<style> [id^="yt_tooltip"] { min-width: 520px; } </style> <!-- <div class="row m-0 mb-3"> <button id="resChartZoom" class="btn btn-info">圖檔重置</button> </div> --> <div id="topLight" class="d-flex mb-4" style="gap: 15px"></div> <!-- <div class="row"> <div id="floChart" style="height : 80vh!important;width:100%"></div> </div> --> <!-- <div class="row"> <div id="forgeViewer" class="position-absolute" style="width:96%;height:96%;"></div> </div> --> <div class="d-flex"> <div class="col-6 my-3"> <div id="floChart" style="height: 100%; width: 100%; background-color: #fff"></div> </div> <div class="col-6 my-3"> <!-- <div id="forgeViewer" class="position-relative" style="height:100%"> <div id="forgeHeatBarDiv" class="d-flex mb-4 position-absolute" style="gap:15px"> </div> </div> --> <div id="forgeViewer" class="position-relative" style="height: 80vh"> <div id="forgeHeatBarDiv" class="d-flex mb-4 position-absolute" style="gap: 15px"></div> </div> </div> </div> <!--<script src="lib/echarts.min.js"></script>--> <script> var floChart = null; var currentData = []; var heatMap = null; var allDeviceRowData = []; //所有設備原始資料 var global_emergency_alarm_device_number = []; var lightControl = "device"; // device 群控 node 燈控 var zoomToggle = 1.3; $(function () { $(loadEle).Loading("start"); alarmDbIdList = []; $("#topLight").html(setTopLight()); setLightColor(); initChart(); getFloData(); drawHeatBar(); getHotspotPoint(() => { show3DModel(pageAct.urn); }); }); onEvent("click", "#resChartZoom", function () { floChart.setOption({ geo: { center: null, zoom: 1.2, }, }); resetData(); }); function getFloData() { let url = baseApiUrl + "/api/Device/GetDeviceList"; let sendData = { sub_system_tag: pageAct.sysSubTag, building_tag: pageAct.buiTag, floor_tag: pageAct.floTag, }; objSendData.Data = sendData; ytAjax = new YourTeam.Ajax( url, objSendData, function (res) { if (!res || res.code != "0000" || !res.data) { } else { lightControl = res.module; chartHandler( `${baseImgUrl}/upload/floor_map/${res.data[0].floor_map_name}` ); if (pageAct.sysSubTag === "L1") { let nodes = []; res.data[0].device_list.forEach((d) => { nodes = [...nodes, ...d.device_nodes]; }); getDevice([...nodes, ...res.data[0].device_list]); } else { getDevice(res.data[0].device_list); } } }, null, "POST" ).send(); } function getDevice(devList) { let selected_floor = devList[0]; //let selected_floor_objs = devList.filter(function (item) { // return item.floor_guid == selected_floor.floor_guid; //}); //currentData = selected_floor_objs[0].device; currentData = $.map(devList, function (item) { //資料處理 if ( selected_floor.device_number != undefined && selected_floor.device_number != null && selected_floor.device_number != "" && selected_floor.device_number == item.device_number ) { item.selected = true; } else { item.selected = false; } if ( item.device_coordinate != undefined && item.device_coordinate != null ) { var coordinate = item.device_coordinate.split(","); item.value = [parseFloat(coordinate[0]), parseFloat(coordinate[1])]; } if ( item.device_nodes != undefined && item.device_nodes != null && item.device_nodes.length > 0 ) { if (item.device_master_number == selected_floor.device_master) { //var datatable_data = { // device_full_name: item.full_name, // device_number: item.device_number, // device_master: item.device_master_number //} //datatable_data_list.push(datatable_data); $.map(item.device_nodes, function (item_node) { item_node.selected = false; if ( item_node.device_node_coordinate != undefined && item_node.device_node_coordinate != null ) { var node_coordinate = item_node.device_node_coordinate.split(","); item_node.value = [ parseFloat(node_coordinate[0]), parseFloat(node_coordinate[1]), ]; } }); } else { //var index = datatable_data_list.findIndex(x => x.device_number == item.device_number); //if (index < 0) { // var datatable_data = { // device_number: item.device_number, // device_master: item.device_master_number // } // datatable_data_list.push(datatable_data); //} $.map(item.device_nodes, function (item_node) { item_node.selected = false; if ( item_node.device_node_coordinate != undefined && item_node.device_node_coordinate != null ) { var node_coordinate = item_node.device_node_coordinate.split(","); item_node.value = [ parseFloat(node_coordinate[0]), parseFloat(node_coordinate[1]), ]; } }); } } return item; }); if (currentData == null || currentData.length == 0) { currentData = []; } // myBaja.setPrepareSubscribeDevices(currentData); // myBaja.setCallBack(mySubscribeDevices); //if (datatable_data_list.length > 0) { // $("#datatablediv").show(); // dataTableDraw(); //} else { // $("#datatablediv").hide(); //} } function initChart() { let chartDom = $("#floChart")[0]; floChart = echarts.init(chartDom, null, { width: "auto" }); } function chartHandler(url) { floChart.clear(); $.get(url, function (svg) { if (svg == undefined || svg == null) { return; } echarts.registerMap("floor_svg", { svg: svg }); option = { // animationDurationUpdate: 1500, tooltip: { formatter: function (params) { if ( params.data.device_node_guid != undefined && params.data.device_node_guid != null && params.data.device_node_guid != "" ) { return `<div > 名稱:${params.data.device_node_full_name}<br> Guid:${params.data.device_node_guid} </div>`; } else { return `<div >名稱:${params.data.full_name}<br> Guid:${params.data.device_guid}</div>`; } }, }, toolbox: { //工具欄 show: false, }, geo: { map: "floor_svg", roam: true, scaleLimit: { //限制放大縮小倍數 max: 2, min: 1, }, layoutSize: "100%", layoutCenter: [], zoom: 1.1, silent: true, }, series: [ { //不管有無被選擇(圓點) type: "scatter", coordinateSystem: "geo", geoIndex: 0, symbol: "circle", symbolSize: 20, symbolOffset: [10, 10], label: { show: false, }, /*data: currentData,*/ z: 2, }, { //未選擇的設備(icon) type: "scatter", coordinateSystem: "geo", geoIndex: 0, symbolSize: 50, label: { formatter: "{b}", position: "bottom", show: true, backgroundColor: "orange", }, emphasis: { label: { show: true, fontSize: "20", fontWeight: "bold", color: "yellow", }, }, selectedMode: "single", data: null, z: 1, }, { //被選擇的設備(icon) type: "effectScatter", coordinateSystem: "geo", geoIndex: 0, showEffectOn: "render", symbolSize: 50, label: { formatter: "{b}", position: "bottom", show: true, backgroundColor: "orange", }, emphasis: { label: { show: true, fontSize: "20", fontWeight: "bold", color: "yellow", }, }, selectedMode: "single", data: null, z: 1, }, { //編輯模式底下的設備(圓點,只會有一個) type: "scatter", coordinateSystem: "geo", geoIndex: 0, symbol: "circle", symbolSize: 20, symbolOffset: [10, 10], label: { show: false, }, /*data: currentData,*/ z: 2, }, { //編輯模式底下的設備(icon,只會有一個) type: "scatter", coordinateSystem: "geo", geoIndex: 0, symbolSize: 50, label: { formatter: "{b}", position: "bottom", show: true, backgroundColor: "orange", }, emphasis: { label: { show: true, fontSize: "20", fontWeight: "bold", color: "yellow", }, }, data: null, z: 1, }, ], }; floChart.setOption(option); if ( currentData != undefined && currentData != null && currentData.length > 0 ) { resetData(); } var ordPath = { building_tag: pageAct.buiTag, system_tag: pageAct.sysMainTag, }; //myBaja.setSubscribeDevicesByBql(ordPath); //myBaja.setSubscribeDevicesCallBack(subscribeCallBack); let parentEle = null; floChart.on("click", function (params) { forgeUnFocusAll(); chartUnFocusAll(); if (params.componentType == "series") { let data = params.data; let rect = $("#floChart")[0].getBoundingClientRect(); let position = [ rect.left + rect.width / 2, rect.top + rect.height / 4, ]; // console.log(position) // let position = [params.event.event.clientX+100, params.event.event.clientY-300]; data._dbId = data._dbId ?? ""; // currentData.find( // (cData) => cData.device_number === data.device_number // ).forge_dbid; parentEle = crePosPopover(position, data); $(parentEle).click(); } else { $(parentEle).YTTooltip("hide"); } }); floChart.getZr().on("click", function (params) { /*console.log("click", params);*/ var pixelPoint = [params.offsetX, params.offsetY]; var dataPoint = floChart.convertFromPixel({ geoIndex: 0 }, pixelPoint); if (!(params?.target?.shape?.symbolType == "circle")) { $(parentEle).YTTooltip("hide"); } //temp_device_on_floor_map = [{ // device_guid: selected_temp_device.device_guid, // device_full_name: selected_temp_device.device_full_name, // device_node_guid: selected_temp_device.device_node_guid ? selected_temp_device.device_node_guid : null, // device_node_full_name: selected_temp_device.device_node_full_name ? selected_temp_device.device_node_full_name : null, // status: selected_temp_device.status, // value: dataPoint //}]; // currentData.push([dataPoint[0], dataPoint[1], 1]); // floChart.setOption(option); }); onEvent("autodesk:complete:sprite", "#forgeViewer", function (e, obj) { console.log("Current", obj.myDataList); let option = floChart.getOption(); option.series.forEach(function (series) { (series.data ?? []).forEach(function (point) { let dbid = obj.myDataList.filter( (x) => x.device_number == point.device_number )[0]?._dbId; point._dbId = dbid; // currentData.forEach(function (cData) { // console.log(cData.device_node_guid=== point.device_node_guid) // if (lightControl === "node" && pageAct.sysSubTag === "L1" && cData.device_node_guid == point.device_node_guid) { // cData._dbId = dbid; // cData.spriteDbid = dbid; // setForgeHotSpotColor(cData); // } // else if (cData.device_guid == point.device_guid) { // cData._dbId = dbid; // cData.spriteDbid = dbid; // setForgeHotSpotColor(cData); // } // }); const cData = currentData.find((cur) => { if (lightControl === "node" && pageAct.sysSubTag === "L1") { if (cur.device_node_guid == point.device_node_guid) return cur; } else if (cur.device_guid == point.device_guid) { return cur; } }); cData._dbId = dbid; cData.spriteDbid = dbid; // setForgeHotSpotColor(cData); }); }); floChart.setOption(option); subDevice(); }); //floChart.on('selectchanged', function (params) { // console.log("selectchanged", params); // // currentData.push([dataPoint[0], dataPoint[1], 1]); // // floChart.setOption(option); // currentData = $.map(currentData, function (item) { // item.selected = false; // return item; // }); // if (params.selected.length > 0) { // currentData[params.selected[0].seriesIndex - 1].selected = true; // } //}); // floChart.getZr().on('mousewheel', function (params) { // console.log(params) // }) floChart.on("georoam", function (params) { var zoom = floChart.getOption().geo[0].zoom; const option = floChart.getOption(); console.log("georoam", zoom); if (zoom <= 1.5) { /*ResetFloorMap();*/ floChart.setOption({ geo: { roam: "scale", }, }); } else { floChart.setOption({ geo: { roam: true, }, }); } if (zoom > zoomToggle) { const currentImage = currentData.find( ({ device_image }) => device_image ).device_image; option.series[1].data = option.series[0].data.map((d) => ({ ...d, symbol: "image://" + baseImgUrl + "/upload/device_icon/" + currentImage, })); } else { option.series[1].data = []; } floChart.setOption(option); // resetData(); }); }).fail(function () { toast_warning("查無該樓層地圖"); floChart.clear(); }); } //baja 訂閱設備 function subDevice() { console.log("subDevice 開始"); let option = floChart.getOption(); let floMyBaja = new subscriptionDevices(); var ordPath = { area_tag: pageAct.AreaTag, building_tag: pageAct.buiTag, system_tag: pageAct.sysMainTag, name_tag: pageAct.sysSubTag, flo_tag: pageAct.floTag, }; floMyBaja.setSubscribeDevicesByBql(ordPath); // 燈熱點用 let lightOnHotColorArr = []; let lightOffHotColorArr = []; // 燈光圈用 let deviceScatterNormalArr = []; let deviceScatterCloseArr = []; let deviceScatterErrorArr = []; floMyBaja.setSubscribeDevicesCallBack(function (data) { let matchDevice = currentData.filter( (x) => x.device_number == data.device_number_full )[0]; if (!matchDevice) { $(loadEle).Loading("close"); return false; } //將訂閱值塞入 subDeviceData if ( subDeviceData.findIndex( (x) => x.device_number == matchDevice.device_number ) == -1 ) { let obj = {}; obj.device_number = matchDevice.device_number; obj.dbid = matchDevice.forge_dbid; subDeviceData.push(obj); } let norDevPoiName = matchDevice.device_normal_point_name; let cloDevPoiName = matchDevice.device_close_point_name; let errDevPoiName = matchDevice.device_error_point_name; if (data.point_name == "Temp" || data.point_name == "TEMP") { heatMap?.changeTemp( data.device_number_full, !isNaN(parseInt(data.value)) ? parseInt(data.value) : 0 ); let devIdx = currentData.findIndex( (x) => x.device_number == data.device_number_full ); currentData[devIdx]._temp = !isNaN(parseInt(data.value)) ? parseInt(data.value) : 0; } if (data.point_name == "SSC" && pageAct.sysSubTag === "L1") { const lightOn = data.value.includes("true"); setLightOpenOrClose(lightOn, matchDevice.device_guid); if (lightOn && matchDevice.spriteDbid) { // setLightValues(matchDevice.device_guid, 200, 0xe1cf18); // changeColorForHotspot(matchDevice.spriteDbid, null, lightOn); if ( !lightOnHotColorArr.some( ({ spriteDbid }) => spriteDbid === matchDevice.spriteDbid ) ) { lightOnHotColorArr.push(matchDevice); } lightOffHotColorArr = lightOffHotColorArr.filter( (light) => light.spriteDbid !== matchDevice.spriteDbid ); heatMap?.changeTemp(matchDevice.device_number, 40); } else if (matchDevice.spriteDbid) { if ( !lightOffHotColorArr.some( ({ spriteDbid }) => spriteDbid === matchDevice.spriteDbid ) ) { lightOffHotColorArr.push(matchDevice); } lightOnHotColorArr = lightOnHotColorArr.filter( (light) => light.spriteDbid !== matchDevice.spriteDbid ); heatMap?.changeTemp(matchDevice.device_number, 0); } } if ( data.point_name == errDevPoiName && data.value !== matchDevice.device_error_point_value && alarmDbIdList.some( ({ device_number }) => matchDevice.device_number === device_number ) ) { alarmDbIdList = alarmDbIdList.filter( ({ device_number }) => matchDevice.device_number === device_number ); } else if ( data.point_name == errDevPoiName && data.value == matchDevice.device_error_point_value && !alarmDbIdList.some( ({ device_number }) => matchDevice.device_number === device_number ) ) { $(`#${matchDevice.device_number}_status`) .attr("data-light-type", "error") .data("light-type", "error"); alarmDbIdList.push(matchDevice); } if ( data.point_name == norDevPoiName && data.value == matchDevice.device_normal_point_value && !deviceScatterNormalArr.some( ({ device_number }) => data.device_number_full === device_number ) ) { //顯示正常燈號 $(`#${matchDevice.device_number}_status`) .attr("data-light-type", "normal") .data("light-type", "normal"); deviceScatterNormalArr.push(matchDevice); deviceScatterCloseArr = deviceScatterCloseArr.filter( (device) => device.spriteDbid !== matchDevice.spriteDbid ); } else if ( data.point_name == cloDevPoiName && data.value == matchDevice.device_close_point_value && !deviceScatterCloseArr.some( ({ device_number }) => data.device_number_full === device_number ) ) { $(`#${matchDevice.device_number}_status`) .attr("data-light-type", "close") .data("light-type", "close"); deviceScatterCloseArr.push(matchDevice); deviceScatterNormalArr = deviceScatterNormalArr.filter( (device) => device.spriteDbid !== matchDevice.spriteDbid ); } if (pageAct.sysSubTag === "L1" && lightControl === "node") { alarmDbIdList = alarmDbIdList.filter( ({ device_node_guid }) => device_node_guid !== undefined && device_node_guid !== null ); deviceScatterNormalArr = deviceScatterNormalArr.filter( ({ device_node_guid }) => device_node_guid !== undefined && device_node_guid !== null ); deviceScatterCloseArr = deviceScatterCloseArr.filter( ({ device_node_guid }) => device_node_guid !== undefined && device_node_guid !== null ); lightOnHotColorArr = lightOnHotColorArr.filter( ({ device_node_guid }) => device_node_guid !== undefined && device_node_guid !== null ); lightOffHotColorArr = lightOffHotColorArr.filter( ({ device_node_guid }) => device_node_guid !== undefined && device_node_guid !== null ); } if ( deviceScatterCloseArr.length + deviceScatterNormalArr.length === option.series[0].data.length || deviceScatterCloseArr.length + deviceScatterNormalArr.length + alarmDbIdList.length === option.series[0].data.length ) { deviceScatterNormalArr.length && deviceScatterNormalArr.forEach((device) => { const cur = option.series[0].data.find( ({ device_number }) => device_number === device.device_number ); const normalColor = currentData.find( ({ device_number }) => device_number === device.device_number ).device_normal_color; if (cur) { cur.itemStyle = { color: normalColor }; } }); changeColorForHotspot( deviceScatterNormalArr.map(({ spriteDbid }) => spriteDbid), null, true ); deviceScatterCloseArr.length && deviceScatterCloseArr.forEach((device) => { const cur = option.series[0].data.find( ({ device_number }) => device_number === device.device_number ); const closeColor = currentData.find( ({ device_number }) => device_number === device.device_number ).device_close_color; if (cur) { cur.itemStyle = { color: closeColor }; } }); changeColorForHotspot( deviceScatterCloseArr.map(({ spriteDbid }) => spriteDbid), null, false ); alarmDbIdList.length && alarmDbIdList.forEach((device) => { const cur = option.series[0].data.find( ({ device_number }) => device_number === device.device_number ); const errColor = currentData.find( ({ device_number }) => device_number === device.device_number )?.device_error_color; if (cur) { cur.itemStyle = { color: errColor }; } }); changeColorForHotspot( alarmDbIdList.map(({ spriteDbid }) => spriteDbid), "error", false ); floChart.setOption(option); $(loadEle).Loading("close"); } }); floMyBaja.setSubscribeDeviceEndCallBack(function (data) { endPageLoading(); if ( pageAct.sysSubTag !== "M12" && data.findIndex( (x) => x.point_name == "Temp" || x.point_name == "TEMP" ) != -1 ) { // 顯示溫度條 showHeat("[name=forgeHeatBar]"); } }); } function drawHeatBar() { $("#forgeHeatBarDiv").html(setTopHeatBar()); } // 電梯 3D 位置呈現 function set3DElevPos(viewer) { let nodeIds = allElevDevList .filter((x) => !isNaN(parseInt(x.forge_dbid))) .map((x) => { return { devNum: x.device_number, nodeId: parseInt(x.forge_dbid) }; }); $.each(nodeIds, (idx, item) => { elev3DBind[item.devNum] = item.nodeId; }); nodeIds = nodeIds.map((x) => x.nodeId); $.each(nodeIds, function (idx, node) { let options = { element: $("#forgeViewer"), viewer: viewer, nodeId: node, floorHeight: elev3DOption.floorHeight ?? [], inited: function () { }, }; let elevator3DObj = new elevator3D(options); let devNum = Object.keys(elev3DBind).filter( (x) => elev3DBind[x] == node )[0]; let subData = subSeviceData.filter((x) => x.device_number == devNum)[0]; if (elev3DObj.filter((x) => x.nodeId == node).length == 0) { elev3DObj.push({ id: devNum, nodeId: node, obj: elevator3DObj }); } if (subData) { let elevObj = elev3DObj.filter((x) => x.nodeId == node)[0]; if (!elevObj.id) { elevObj.id = devNum; } elevObj.obj = Object.assign(elevObj, elevator3DObj ?? {}); elevObj.obj.init(function () { let frags = elevObj.obj.fragProxys.filter((x) => x.nodeId == node); frags.forEach((fragProxy) => { fragProxy.frag.position.z = elev3DOption.floorHeight.filter( (x) => x.floor == subData["CP"] )[0]?.height ?? 0; fragProxy.frag.updateAnimTransform(); }); elevObj.obj.viewer.impl.sceneUpdated(true); }); } }); } // 電梯 3D Option 設置 function set3DElevOpt(data) { let devNumArr = data .map((x) => { return { devNum: x.device_number_full, priority: allElevDevList.filter( (y) => y.device_number == x.device_number_full )[0]?.priority, }; }) .DistinctBy("devNum"); devNumArr = devNumArr.oSort("priority"); $.each(devNumArr, (idx, devObj) => { devNum = devObj.devNum; let subData = subSeviceData.filter((x) => x.device_number == devNum)[0]; if (subData) { //// 左側 3D 電梯 nodeID 與 device_number match //if (Object.keys(elev3DBind).indexOf(devNum) == -1 && viewer3DNodeIds.length != 0) { // elev3DBind[devNum] = viewer3DNodeIds[Object.keys(elev3DBind).length]; //} // 左側 3D 電梯 Viewer Option 設置 /*elev3DOption.nodes = Object.keys(elev3DBind).map(x => elev3DBind[x]);*/ elev3DOption.nodeId = elev3DBind[devNum]; elev3DOption.floorHeight = floList.map((x) => { return { floor: x }; }); elev3DOption.floorHeight.forEach((floObj, idx) => { if (floObj.floor.startsWith("B")) { let floor = parseInt(floObj.floor.split("B")[1].split("F")[0]); floObj.height = floor * -13; } else { let floor = parseInt(floObj.floor.split("F")[0]); if (floor == 1) { floObj.height = 0; } else if (floor == 2) { floObj.height = 14.75; } else { floObj.height = 14.75 + (floor - 2) * 9.75; } } }); if (elev3DObj.length != 0) { let elevObj = elev3DObj.filter( (x) => x.nodeId == elev3DBind[devNum] )[0]; if (!elevObj.id) { elevObj.id = devNum; } elevObj.obj = Object.assign(elevObj.obj, elev3DOption); elevObj.obj.init(function () { let frags = elevObj.obj.fragProxys.filter( (x) => x.nodeId == elev3DBind[devNum] ); frags.forEach((fragProxy) => { fragProxy.frag.position.z = elev3DOption.floorHeight.filter( (x) => x.floor == subData["CP"] )[0]?.height ?? 0; fragProxy.frag.updateAnimTransform(); }); elevObj.obj.viewer.impl.sceneUpdated(true); }); } } }); } // //訂閱設備的回傳值,並塞到全域變數 // function subscribeCallBack(change_device, is_need_reset = false) { // if (change_device != undefined && change_device != null) { // var target_device = allDeviceRowData.filter(x => x.device_number == change_device.device_number)[0]; // if (target_device == undefined || target_device == null) { // //新增 // obj = { // device_number: change_device.device_number, // points: [{ // name: change_device.point_name, // value: change_device.value // }] // }; // allDeviceRowData.push(obj); // } // else { // selected_device_point = target_device.points.find(x => x.name == change_device.point_name); // if (selected_device_point != null) { // selected_device_point.value = change_device.value; // } // else { // obj = { // name: change_device.point_name, // value: change_device.value // } // target_device.points.push(obj); // } // } // if (is_need_reset) { // resetData(); // } // } // } // 重設平面圖設備資料 function resetData() { const scatter_symbol_convertData = function (data, zoom) { //正常、關閉排除CCVT(圓點) let res = [], temp = []; data.forEach(function (item, index) { if ( global_emergency_alarm_device_number != undefined && global_emergency_alarm_device_number != null ) { if ( global_emergency_alarm_device_number.findIndex( (x) => x.device_number == item.device_number ) < 0 && item.device_system_category_layer3 != "C" ) { //如果有子節點,則只針對子節點操作 if ( lightControl === "node" && item.device_nodes != undefined && item.device_nodes != null && item.device_nodes.length > 0 ) { item.device_nodes.forEach(function (item_node, item_node_index) { //添加父節點相關資訊 item_node.device_system_category_layer3 = item.device_system_category_layer3; item_node.device_normal_color = item.device_normal_color; item_node.device_close_color = item.device_close_color; //判斷父節點狀態 var device_index = allDeviceRowData.findIndex( (x) => x.device_number == item.device_number ); var temp_point_value; if (device_index > -1) { if ( item.device_normal_point_name != null || item.device_close_point_name != null ) { //當其中point name 不為null的情況 if (item.device_normal_point_name != null) { temp_point_value = allDeviceRowData[ device_index ].points.find( (x) => x.name == item.device_normal_point_name ); temp_point_value = allDeviceRowData[device_index].points[ item.device_normal_point_name ]; if (temp_point_value == item.device_normal_point_value) { item_node.device_color = item.device_normal_color; } } if (item.device_close_point_name != null) { temp_point_value = allDeviceRowData[device_index].points[ item.device_close_point_name ]; if (temp_point_value == item.device_close_point_value) { item_node.device_color = item.device_close_color; } } } else { if (item.device_normal_point_name == "ER") { temp_point_value = allDeviceRowData[device_index].points[ item.device_normal_point_name ]; if (temp_point_value == "true") { item_node.device_color = item.device_normal_color; } else { temp_point_value = allDeviceRowData[device_index].points[ item.device_close_point_name ]; if (temp_point_value == item.device_close_point_value) { item_node.device_color = item.device_close_color; } } } else if (item.device_close_point_name == "ER") { temp_point_value = allDeviceRowData[device_index].points[ item.device_close_point_name ]; if (temp_point_value == "true") { item_node.device_color = item.device_close_color; } else { temp_point_value = allDeviceRowData[device_index].points[ item.device_normal_point_name ]; if ( temp_point_value == item.device_normal_point_value ) { item_node.device_color = item.device_normal_color; } } } else { temp_point_value = allDeviceRowData[device_index].points[ item.device_normal_point_name ]; if (temp_point_value == item.device_normal_point_value) { item_node.device_color = item.device_normal_color; } else if ( temp_point_value == item.device_close_point_value ) { item_node.device_color = item.device_close_color; } } } } // temp.push(item_node); }); } else { var device_index = allDeviceRowData.findIndex( (x) => x.device_number == item.device_number ); if (device_index > -1) { if ( item.device_normal_point_name != null || item.device_close_point_name != null ) { //當其中point name 有為null的情況 if (item.device_normal_point_name != null) { // temp_point_value = allDeviceRowData[device_index].points[item.device_normal_point_name]; temp_point_value = allDeviceRowData[ device_index ].points.find( (x) => x.name == item.device_normal_point_name ).value; if (temp_point_value == item.device_normal_point_value) { item.device_color = item.device_normal_color; } } if (item.device_close_point_name != null) { // temp_point_value = allDeviceRowData[device_index].points[item.device_close_point_name]; temp_point_value = allDeviceRowData[ device_index ].points.find( (x) => x.name == item.device_close_point_name ).value; if (temp_point_value == item.device_close_point_value) { item.device_color = item.device_close_color; } } } else { if (item.device_normal_point_name == "ER") { // temp_point_value = allDeviceRowData[device_index].points[item.device_normal_point_name]; temp_point_value = allDeviceRowData[ device_index ].points.find( (x) => x.name == item.device_normal_point_name ).value; if (temp_point_value == "true") { item.device_color = item.device_normal_color; } else { // temp_point_value = allDeviceRowData[device_index].points[item.device_close_point_name]; temp_point_value = allDeviceRowData[ device_index ].points.find( (x) => x.name == item.device_close_point_name ).value; if (temp_point_value == item.device_close_point_value) { item.device_color = item.device_close_color; } } } else if (item.device_close_point_name == "ER") { // temp_point_value = allDeviceRowData[device_index].points[item.device_close_point_name]; temp_point_value = allDeviceRowData[ device_index ].points.find( (x) => x.name == item.device_close_point_name ).value; if (temp_point_value == "true") { item.device_color = item.device_close_color; } else { // temp_point_value = allDeviceRowData[device_index].points[item.device_normal_point_name]; temp_point_value = allDeviceRowData[ device_index ].points.find( (x) => x.name == item.device_normal_point_name ).value; if (temp_point_value == item.device_normal_point_value) { item.device_color = item.device_normal_color; } } } else { // temp_point_value = allDeviceRowData[device_index].points[item.device_normal_point_name]; temp_point_value = allDeviceRowData[ device_index ].points.find( (x) => x.name == item.device_normal_point_name ).value; if (temp_point_value == item.device_normal_point_value) { item.device_color = item.device_normal_color; } else if ( temp_point_value == item.device_close_point_value ) { item.device_color = item.device_close_color; } } } } item.zoom = zoom; temp.push(item); } } } }); // let temp = data.filter(function (item, index) { // if (global_emergency_alarm_device_number != undefined && global_emergency_alarm_device_number != null) { // return global_emergency_alarm_device_number.findIndex(x => x.device_number == item.device_number) < 0 && item.device_system_category_layer3 != "C"; // } else { // return []; // } // }); let option = floChart.getOption(); temp.forEach(function (tempData) { let oldTarObj = option.series[0]?.data?.filter( (x) => x.device_number == tempData.device_number )[0]; if (oldTarObj) { tempData = Object.assign(tempData, oldTarObj); } }); temp.map(function (item) { var obj = { device_guid: item.device_guid, device_number: item.device_number, full_name: item.full_name ? item.full_name : null, device_node_guid: item.device_node_guid ? item.device_node_guid : null, device_node_full_name: item.device_node_full_name ? item.device_node_full_name : null, device_system_category_layer3: item.device_system_category_layer3 ? item.device_system_category_layer3 : null, status: item.status, value: item.value, deviceItems: item.deviceItems, deviceURL: item.deviceURL, _dbId: item._dbId ?? null, }; obj.itemStyle = { color: item.device_color || item.device_close_color, }; res.push(obj); }); return res; }; const scatter_icon_convertData = function (data) { //正常、關閉(icon) let res = [], temp = []; data.forEach(function (item, index) { if ( global_emergency_alarm_device_number != undefined && global_emergency_alarm_device_number != null ) { if ( global_emergency_alarm_device_number.findIndex( (x) => x.device_number == item.device_number ) < 0 && item.device_system_category_layer3 != "C" ) { //如果有子節點,則只針對子節點操作 if ( lightControl === "node" && item.device_nodes != undefined && item.device_nodes != null && item.device_nodes.length > 0 ) { item.device_nodes.forEach(function (item_node, item_node_index) { //添加父節點相關資訊 item_node.device_system_category_layer3 = item.device_system_category_layer3; item_node.device_normal_color = item.device_normal_color; item_node.device_image = item.device_image; temp.push(item_node); }); } else { temp.push(item); } } } }); temp = data.filter(function (item, index) { if ( global_emergency_alarm_device_number != undefined && global_emergency_alarm_device_number != null ) { return ( global_emergency_alarm_device_number.findIndex( (x) => x.device_number == item.device_number ) < 0 && item.device_system_category_layer3 != "C" ); } else { return []; } }); temp.map(function (item) { var obj = { device_guid: item.device_guid, device_number: item.device_number, full_name: item.full_name ? item.full_name : null, device_node_guid: item.device_node_guid ? item.device_node_guid : null, device_node_full_name: item.device_node_full_name ? item.device_node_full_name : null, device_system_category_layer3: item.device_system_category_layer3 ? item.device_system_category_layer3 : null, status: item.status, symbol: "image://" + baseImgUrl + "/upload/device_icon/" + item.device_image, value: item.value, deviceItems: item.deviceItems, deviceURL: item.deviceURL, }; if (item.selected) { obj.symbolSize = 50; } obj.itemStyle = { color: item.device_colse_color, }; res.push(obj); }); return res; }; const scatter_error_convertData = function (data) { //異常(圓點) let res = [], temp = []; data.forEach(function (item, index) { if ( global_emergency_alarm_device_number != undefined && global_emergency_alarm_device_number != null ) { if ( global_emergency_alarm_device_number.findIndex( (x) => x.device_number == item.device_number ) > -1 && item.device_system_category_layer3 != "C" ) { //如果有子節點,則只針對子節點操作 if ( lightControl === "node" && item.device_nodes != undefined && item.device_nodes != null && item.device_nodes.length > 0 ) { item.device_nodes.forEach(function (item_node, item_node_index) { //添加父節點相關資訊 item_node.device_system_category_layer3 = item.device_system_category_layer3; item_node.device_error_color = item.device_error_color; temp.push(item_node); }); } else { temp.push(item); } } } }); // if (global_emergency_alarm_device_number != undefined && global_emergency_alarm_device_number != null) { // temp = data.filter(function (item, index) { // return global_emergency_alarm_device_number.findIndex(x => x.device_number == item.device_number) > -1 && item.device_system_category_layer3 != "C"; // }); // } temp.map(function (item) { var obj = { device_guid: item.device_guid, device_number: item.device_number, full_name: item.full_name ? item.full_name : null, device_node_guid: item.device_node_guid ? item.device_node_guid : null, device_node_full_name: item.device_node_full_name ? item.device_node_full_name : null, device_system_category_layer3: item.device_system_category_layer3 ? item.device_system_category_layer3 : null, status: item.status, value: item.value, deviceItems: item.deviceItems, deviceURL: item.deviceURL, }; console.log("異常", item.device_color); obj.itemStyle = { color: item.device_error_color }; res.push(obj); }); return res; }; const scatter_error_icon_convertData = function (data) { //異常(icon) let res = [], temp = []; data.forEach(function (item, index) { if ( global_emergency_alarm_device_number != undefined && global_emergency_alarm_device_number != null ) { if ( global_emergency_alarm_device_number.findIndex( (x) => x.device_number == item.device_number ) > -1 && item.device_system_category_layer3 != "C" ) { //如果有子節點,則只針對子節點操作 if ( lightControl === "node" && item.device_nodes != undefined && item.device_nodes != null && item.device_nodes.length > 0 ) { item.device_nodes.forEach(function (item_node, item_node_index) { //添加父節點相關資訊 item_node.device_system_category_layer3 = item.device_system_category_layer3; item_node.device_error_color = item.device_error_color; item_node.device_image = item.device_image; temp.push(item_node); }); } else { temp.push(item); } } } }); if ( global_emergency_alarm_device_number != undefined && global_emergency_alarm_device_number != null ) { temp = data.filter(function (item, index) { return ( global_emergency_alarm_device_number.findIndex( (x) => x.device_number == item.device_number ) > -1 && item.device_system_category_layer3 != "C" ); }); } temp.map(function (item) { var obj = { device_guid: item.device_guid, device_number: item.device_number, full_name: item.full_name ? item.full_name : null, device_node_guid: item.device_node_guid ? item.device_node_guid : null, device_node_full_name: item.device_node_full_name ? item.device_node_full_name : null, device_system_category_layer3: item.device_system_category_layer3 ? item.device_system_category_layer3 : null, status: item.status, symbol: "image://" + baseImgUrl + "/upload/device_icon/" + item.device_image, value: item.value, deviceItems: item.deviceItems, deviceURL: item.deviceURL, }; res.push(obj); }); return res; }; const scatter_cctv_convertData = function (data) { //CCTV let res = []; let temp = data.filter(function (item, index) { return item.device_system_category_layer3 == "C"; }); temp.map(function (item) { var obj = { device_guid: item.device_guid, device_number: item.device_number, full_name: item.full_name, device_system_category_layer3: item.device_system_category_layer3, device_ip: item.device_ip, device_port: item.device_port, status: item.status, symbol: "image://" + str_location_url + "/upload/device_icon/" + item.device_image, value: item.value, }; res.push(obj); }); return res; }; if (!floChart.getOption()) { return; } var zoom = 0; if (floChart.getOption().geo && floChart.getOption().geo.length > 0) { zoom = floChart.getOption().geo[0].zoom; } if (zoom <= zoomToggle) { floChart.setOption({ series: [ { symbolOffset: [0, 0], data: scatter_symbol_convertData(currentData), //正常、關閉(圓點) }, { data: [], //正常、關閉(icon) }, { symbolOffset: [0, 0], data: scatter_error_convertData(currentData), //異常(圓點) }, { data: [], //異常(icon) }, { data: scatter_cctv_convertData(currentData), //CCTV }, ], }); } else { floChart.setOption({ series: [ { symbolOffset: [10, 10], data: scatter_symbol_convertData(currentData, zoom), //正常、關閉(圓點) }, { data: scatter_icon_convertData(currentData), //正常、關閉(icon) }, { symbolOffset: [10, 10], data: scatter_error_convertData(currentData), //異常(圓點) }, { data: scatter_error_icon_convertData(currentData), //異常(icon) }, { data: scatter_cctv_convertData(currentData), //CCTV }, ], }); } } function getNextFloor(floGuid = null) { let url = baseApiUrl + "/api/Device/GetNextFloor"; objSendData.Data = { floor_guid: floGuid, building_tag: pageAct.buiTag }; let result = ""; ytAjax = new YourTeam.Ajax( url, objSendData, function (res) { if (!res || res.code != "0000" || !res.data) { } else { result = res.data?.full_name; } }, null, "POST" ).send(); return result; } // show 3D 模型 function show3DModel(urn) { launchViewerForHotspot(urn, (viewer, nodeIds) => { // 隱藏 toolbar document.querySelector("#guiviewer3d-toolbar").style.display = "none"; let nextFloor = getNextFloor(pageAct.floGuid); let curFloTag = pageAct.floTag; if (!nextFloor) { toast_warning("超出樓層範圍"); return; } if (curFloTag?.startsWith("U")) { curFloTag = curFloTag.split("U")[1]; } if (nextFloor?.startsWith("U")) { nextFloor = nextFloor.split("U")[1]; } getLevelsData(curFloTag, nextFloor, function () { viewer.model.search( "天花板", (nodeIds) => { // console.log("2",nodeIds) viewer.hide(nodeIds); }, (e) => { console.log(e); } ); }); setHeatMap(); if ( (pageAct.sysSubTag == "M12" || pageAct.sysSubTag == "ELEV") && elevatorShow ) { let elevOption = { viewer: viewer, ordPath: { area_tag: pageAct.AreaTag, building_tag: pageAct.buiTag, }, }; // 電梯移動訂閱程序載入 let forge3DElev = new Forge3DElevFull(elevOption); forge3DElev.bajaEndCallback = function () { endPageLoading(); }; forge3DElev.init(); } }); } function setHeatMap() { if (pageAct.sysSubTag !== "M12") { devices = currentData.map((x) => { return { roomDbId: !isNaN(parseInt(x.room_dbid)) ? parseInt(x.room_dbid) : -1, id: x.device_number, position: isJSON(x.device_coordinate_3d) ? JSON.parse(x.device_coordinate_3d) : {}, // x: 0, y: 25, z: -2.5 (3.35, -4.81, 12.88 sensorTypes: ["temperature", "humidity"], }; }); let option = { devices: devices, }; heatMap = new ADHeatMaps(option); heatMap.onComplete = () => { $.each(currentData, (idx, dev) => { heatMap.changeTemp(dev.device_number, dev._temp || 0); }); }; } if (pageAct.sysSubTag === "M12" && !elevatorShow) { let sensorObjs = []; addHotPoint(viewer); Forge3DSensor.sensorTimes = 0; sensorObjs = currentData.map((device) => { Forge3DSensor.sensorTimes++; return new Forge3DSensor({ viewer: viewer, ordPath: { area_tag: pageAct.AreaTag, building_tag: pageAct.buiTag, }, selector: "#forgeViewer", elevCb: elevatorShow ? () => { let elevOption = { selector: "#forgeViewer", viewer: viewer, ordPath: { area_tag: pageAct.AreaTag, building_tag: pageAct.buiTag, }, sensorObjs, }; // 電梯移動訂閱程序載入 let forge3DElev = new Forge3DElevFull(elevOption); forge3DElev.bajaEndCallback = function () { endPageLoading(); }; forge3DElev.init(); } : null, curDevice: { ...device, roomDbId: !isNaN(parseInt(device.room_dbid)) ? parseInt(device.room_dbid) : -1, id: device.device_number, position: isJSON(device.device_coordinate_3d) ? JSON.parse(device.device_coordinate_3d) : {}, // x: 0, y: 25, z: -2.5 (3.35, -4.81, 12.88 temp: 25, forge_dbid: parseInt(device.forge_dbid), }, deviceList: currentData.map((d) => ({ ...d, roomDbId: !isNaN(parseInt(d.room_dbid)) ? parseInt(d.room_dbid) : -1, id: d.device_number, position: isJSON(d.device_coordinate_3d) ? JSON.parse(d.device_coordinate_3d) : {}, // x: 0, y: 25, z: -2.5 (3.35, -4.81, 12.88 temp: 25, forge_dbid: parseInt(d.forge_dbid), })), }); }); } } function getHotspotPoint(callback = null) { let url = baseApiUrl + "/api/GetDevForCor"; let sendData = { device_area_tag: pageAct.AreaTag, device_building_tag: pageAct.buiTag, device_system_tag: pageAct.sysMainTag, device_name_tag: pageAct.sysSubTag, device_floor_tag: pageAct.floTag, }; objSendData.Data = sendData; ytAjax = new YourTeam.Ajax( url, objSendData, function (res) { if (!res || res.code != "0000" || !res.data) { } else { let myDataList = []; $.each(res.data, (idx, data) => { if (lightControl == "node" && data.device_nodes.length > 0) { data.device_nodes.forEach((node) => { if ( node.device_node_coordinate_3D != null && isJSON(node.device_node_coordinate_3D) ) { myDataList.push({ ...node, position: JSON.parse(node.device_node_coordinate_3D), }); } }); } else if ( data.device_coordinate_3d != null && isJSON(data.device_coordinate_3d) ) { myDataList.push({ ...data, position: JSON.parse(data.device_coordinate_3d), }); } }); getLightData(myDataList); setHotspotPoint(myDataList); callback ? callback() : ""; } }, null, "POST" ).send(); } function setHotspotPoint(myDataList = []) { getHopspotPoint(myDataList); } onEvent("autodesk:click:sprite", "#forgeViewer", function (e, obj) { forgeUnFocusAll(); chartUnFocusAll(); let rect = $("#forgeViewer")[0].getBoundingClientRect(); let position = [rect.left + rect.width / 2, rect.top + rect.height / 4]; // console.log(position) // let position = [obj.event.target.toolController.lastClickX, obj.event.target.toolController.lastClickY]; let devObj = obj.myData; let name = lightControl === "node" && pageAct.sysSubTag === "L1" ? currentData.filter( (x) => x.device_node_guid == devObj.device_node_guid )[0]?.device_node_full_name : currentData.filter((x) => x.device_guid == devObj.device_guid)[0] ?.full_name; devObj.full_name = name; parentEle = crePosPopover(position, devObj); $(parentEle).click(); let option = floChart.getOption(); option.series.forEach(function (series) { series.data.forEach(function (point) { if (pageAct.sysSubTag === "L1") { if (point.device_node_guid == devObj.device_node_guid) { point.symbolSize = 50; } } else { if (point.device_guid == devObj.device_guid) { point.symbolSize = 50; } } }); }); floChart.setOption(option); }); onEvent("autodesk:clickOut:sprite", "#forgeViewer", function (e) { $(parentEle).YTTooltip("hide"); }); function forgeUnFocusAll() { $.each(currentData, (idx, cData) => { const eleDbId = cData._dbId; if (alarmDbIdList.some((dbId) => dbId == eleDbId)) { changeScaleForHotspot(eleDbId, false); return; } else { // 3D 熱點解除 controlFocusHotspot(eleDbId, false); } }); } function chartUnFocusAll() { let option = floChart.getOption(); option.series.forEach(function (series) { series.data.forEach(function (point) { point.symbolSize = 20; }); }); floChart.setOption(option); } // 解除 series 聚焦 function chartUnFocus(ele) { let devGuid = $(ele).data("id"); let option = floChart.getOption(); option.series.forEach(function (series) { series.data.forEach(function (point) { if (point.device_guid == devGuid) { point.symbolSize = 20; } }); }); floChart.setOption(option); } </script>