diff --git a/Frontend/_sysMonFloor.html b/Frontend/_sysMonFloor.html index c2ae7e1..f53807c 100644 --- a/Frontend/_sysMonFloor.html +++ b/Frontend/_sysMonFloor.html @@ -16,10 +16,8 @@ -->
-
+
-
+
@@ -44,8 +40,9 @@ var allDeviceRowData = []; //所有設備原始資料 var global_emergency_alarm_device_number = []; var lightControl = "device"; // device 群控 node 燈控 - var zoomToggle = 3; + var zoomToggle = 1.3; $(function () { + $(loadEle).Loading("start"); initChart(); getFloData(); drawHeatBar(); @@ -196,7 +193,6 @@ //} else { // $("#datatablediv").hide(); //} - resetData(); } function initChart() { @@ -242,12 +238,12 @@ roam: true, scaleLimit: { //限制放大縮小倍數 - max: 16, + max: 2, min: 1, }, layoutSize: "100%", layoutCenter: [], - zoom: 1.2, + zoom: 1.1, silent: true, }, series: [ @@ -362,6 +358,7 @@ currentData.length > 0 ) { resetData(); + subDevice(); } var ordPath = { @@ -372,7 +369,6 @@ //myBaja.setSubscribeDevicesCallBack(subscribeCallBack); let parentEle = null; floChart.on("click", function (params) { - console.log("Click1", params); forgeUnFocusAll(); chartUnFocusAll(); if (params.componentType == "series") { @@ -418,7 +414,6 @@ }); onEvent("autodesk:complete:sprite", "#forgeViewer", function (e, obj) { - console.log(obj.myDataList); let option = floChart.getOption(); option.series.forEach(function (series) { @@ -476,8 +471,10 @@ // }) floChart.on("georoam", function (params) { var zoom = floChart.getOption().geo[0].zoom; + const option = floChart.getOption(); + console.log("georoam", zoom); - if (zoom <= 2.5) { + if (zoom <= 1.5) { /*ResetFloorMap();*/ floChart.setOption({ geo: { @@ -491,8 +488,20 @@ }, }); } - - resetData(); + 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("查無該樓層地圖"); @@ -503,6 +512,8 @@ //baja 訂閱設備 function subDevice() { console.log("subDevice 開始"); + + let option = floChart.getOption(); let floMyBaja = new subscriptionDevices(); var ordPath = { area_tag: pageAct.AreaTag, @@ -517,8 +528,9 @@ let lightOnHotColorArr = []; let lightOffHotColorArr = []; // 燈光圈用 - let lightOnGuidArr = []; - let lightOffGuidArr = []; + let deviceScatterNormalArr = []; + let deviceScatterCloseArr = []; + let deviceScatterErrorArr = []; floMyBaja.setSubscribeDevicesCallBack(function (data) { let matchDevice = currentData.filter( (x) => x.device_number == data.device_number_full @@ -559,12 +571,11 @@ setLightOpenOrClose(lightOn, matchDevice.device_guid); // console.log("Forge 渲染",data.point_name,lightOn) if (lightOn && matchDevice.spriteDbid) { - console.log(lightOn, matchDevice, matchDevice.spriteDbid); // setLightValues(matchDevice.device_guid, 200, 0xe1cf18); // changeColorForHotspot(matchDevice.spriteDbid, null, lightOn); - lightOnHotColorArr.push(matchDevice.spriteDbid); + lightOnHotColorArr.push(matchDevice); lightOffHotColorArr = lightOffHotColorArr.filter( - (light) => light !== matchDevice.spriteDbid + (light) => light.spriteDbid !== matchDevice.spriteDbid ); heatMap?.changeTemp(matchDevice.device_number, 40); } else if (matchDevice.spriteDbid) { @@ -572,9 +583,9 @@ // setLightValues(matchDevice.device_guid, 0, 0xffffff); // changeColorForHotspot(matchDevice.spriteDbid, null, lightOn); lightOnHotColorArr = lightOnHotColorArr.filter( - (light) => light !== matchDevice.spriteDbid + (light) => light.spriteDbid !== matchDevice.spriteDbid ); - lightOffHotColorArr.push(matchDevice.spriteDbid); + lightOffHotColorArr.push(matchDevice); heatMap?.changeTemp(matchDevice.device_number, 0); } } @@ -587,6 +598,13 @@ $(`#${matchDevice.device_number}_status`) .attr("data-light-type", "normal") .data("light-type", "normal"); + deviceScatterNormalArr.push(matchDevice); + deviceScatterCloseArr = deviceScatterCloseArr.filter( + (device) => device.spriteDbid !== matchDevice.spriteDbid + ); + deviceScatterErrorArr = deviceScatterErrorArr.filter( + (device) => device.spriteDbid !== matchDevice.spriteDbid + ); } else if ( data.point_name == cloDevPoiName && data.value == matchDevice.device_close_point_value @@ -594,6 +612,14 @@ $(`#${matchDevice.device_number}_status`) .attr("data-light-type", "close") .data("light-type", "close"); + deviceScatterCloseArr.push(matchDevice); + + deviceScatterNormalArr = deviceScatterNormalArr.filter( + (device) => device.spriteDbid !== matchDevice.spriteDbid + ); + deviceScatterErrorArr = deviceScatterErrorArr.filter( + (device) => device.spriteDbid !== matchDevice.spriteDbid + ); } else if ( data.point_name == errDevPoiName && data.value == matchDevice.device_error_point_value @@ -601,12 +627,97 @@ $(`#${matchDevice.device_number}_status`) .attr("data-light-type", "error") .data("light-type", "error"); + deviceScatterErrorArr.push(matchDevice); + deviceScatterNormalArr = deviceScatterNormalArr.filter( + (device) => device.spriteDbid !== matchDevice.spriteDbid + ); + deviceScatterCloseArr = deviceScatterCloseArr.filter( + (device) => device.spriteDbid !== matchDevice.spriteDbid + ); } setForgeHotSpotColor(matchDevice); + if ( + option.series[0].data.length === + lightOnHotColorArr.length + lightOffHotColorArr.length + ) { + lightOnHotColorArr.forEach((light) => { + const cur = option.series[0].data.find( + ({ device_number }) => device_number === light.device_number + ); - console.log(lightOnHotColorArr, lightOffHotColorArr); - changeColorForHotspot(lightOnHotColorArr, null, true); - changeColorForHotspot(lightOffHotColorArr, null, false); + const onColor = currentData.find( + ({ device_number }) => device_number === light.device_number + ).device_normal_color; + cur.itemStyle = { color: onColor }; + }); + + lightOffHotColorArr.forEach((light) => { + const cur = option.series[0].data.find( + ({ device_number }) => device_number === light.device_number + ); + const offColor = currentData.find( + ({ device_number }) => device_number === light.device_number + ).device_close_color; + cur.itemStyle = { color: offColor }; + }); + + floChart.setOption(option); + + changeColorForHotspot( + lightOnHotColorArr.map(({ spriteDbid }) => spriteDbid), + null, + true + ); + changeColorForHotspot( + lightOffHotColorArr.map(({ spriteDbid }) => spriteDbid), + null, + false + ); + + $(loadEle).Loading("close"); + } else if ( + deviceScatterCloseArr.length + + deviceScatterNormalArr.length + + deviceScatterErrorArr.length === + option.series[0].data.length + ) { + console.log("deviceScatterNormalArr", deviceScatterNormalArr) + 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; + cur.itemStyle = { color: normalColor }; + }); + + + 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; + cur.itemStyle = { color: closeColor }; + }); + + deviceScatterErrorArr.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; + cur.itemStyle = { color: errColor }; + }); + + floChart.setOption(option); + $(loadEle).Loading("close"); + } }); floMyBaja.setSubscribeDeviceEndCallBack(function (data) { @@ -645,7 +756,7 @@ viewer: viewer, nodeId: node, floorHeight: elev3DOption.floorHeight ?? [], - inited: function () {}, + inited: function () { }, }; let elevator3DObj = new elevator3D(options); let devNum = Object.keys(elev3DBind).filter( @@ -837,7 +948,7 @@ ); temp_point_value = allDeviceRowData[device_index].points[ - item.device_normal_point_name + item.device_normal_point_name ]; if (temp_point_value == item.device_normal_point_value) { item_node.device_color = item.device_normal_color; @@ -846,7 +957,7 @@ if (item.device_close_point_name != null) { temp_point_value = allDeviceRowData[device_index].points[ - item.device_close_point_name + item.device_close_point_name ]; if (temp_point_value == item.device_close_point_value) { item_node.device_color = item.device_close_color; @@ -856,14 +967,14 @@ if (item.device_normal_point_name == "ER") { temp_point_value = allDeviceRowData[device_index].points[ - item.device_normal_point_name + 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 + item.device_close_point_name ]; if (temp_point_value == item.device_close_point_value) { item_node.device_color = item.device_close_color; @@ -872,14 +983,14 @@ } else if (item.device_close_point_name == "ER") { temp_point_value = allDeviceRowData[device_index].points[ - item.device_close_point_name + 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 + item.device_normal_point_name ]; if ( temp_point_value == item.device_normal_point_value @@ -890,7 +1001,7 @@ } else { temp_point_value = allDeviceRowData[device_index].points[ - item.device_normal_point_name + item.device_normal_point_name ]; if (temp_point_value == item.device_normal_point_value) { item_node.device_color = item.device_normal_color; @@ -902,7 +1013,7 @@ } } } - temp.push(item_node); + // temp.push(item_node); }); } else { var device_index = allDeviceRowData.findIndex( @@ -1038,7 +1149,9 @@ _dbId: item._dbId ?? null, }; - obj.itemStyle = { color: item.device_color }; + obj.itemStyle = { + color: item.device_color || item.device_normal_color, + }; res.push(obj); }); @@ -1127,7 +1240,9 @@ if (item.selected) { obj.symbolSize = 50; } - + obj.itemStyle = { + color: item.device_colse_color, + }; res.push(obj); }); @@ -1196,7 +1311,7 @@ deviceItems: item.deviceItems, deviceURL: item.deviceURL, }; - + console.log("異常", item.device_color); obj.itemStyle = { color: item.device_error_color }; res.push(obj); @@ -1325,7 +1440,6 @@ if (floChart.getOption().geo && floChart.getOption().geo.length > 0) { zoom = floChart.getOption().geo[0].zoom; } - if (zoom <= zoomToggle) { floChart.setOption({ series: [ @@ -1396,7 +1510,6 @@ // show 3D 模型 function show3DModel(urn) { - $(loadEle).Loading("start"); launchViewerForHotspot(urn, (viewer, nodeIds) => { // 隱藏 toolbar document.querySelector("#guiviewer3d-toolbar").style.display = "none"; @@ -1426,7 +1539,6 @@ console.log(e); } ); - $(loadEle).Loading("close"); }); setHeatMap(); @@ -1450,8 +1562,6 @@ forge3DElev.init(); } }); - - subDevice(); } function setHeatMap() { @@ -1494,23 +1604,23 @@ selector: "#forgeViewer", elevCb: elevatorShow ? () => { - let elevOption = { - selector: "#forgeViewer", - viewer: viewer, - ordPath: { - area_tag: pageAct.AreaTag, - building_tag: pageAct.buiTag, - }, - sensorObjs, - }; + 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(); - } + // 電梯移動訂閱程序載入 + let forge3DElev = new Forge3DElevFull(elevOption); + forge3DElev.bajaEndCallback = function () { + endPageLoading(); + }; + forge3DElev.init(); + } : null, curDevice: { ...device, @@ -1607,10 +1717,10 @@ let name = lightControl === "node" && pageAct.sysSubTag === "L1" ? currentData.filter( - (x) => x.device_node_guid == devObj.device_node_guid - )[0]?.device_node_full_name + (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; + ?.full_name; devObj.full_name = name; parentEle = crePosPopover(position, devObj); $(parentEle).click();