ibms-dome/Frontend/_sysMonFloor.html

<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 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 zoomToggle = 3;
  $(function () {
    console.log("floor")
    drawHeatBar();
    getHotspotPoint(() => {
      show3DModel(pageAct.urn);
    });
    initChart();
    getFloData();

    subDevice();
  })

  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 {
        chartHandler(`${baseImgUrl}/upload/floor_map/${res.data[0].floor_map_name}`);
        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) {
      this.currentData = [];
    }

    // myBaja.setPrepareSubscribeDevices(currentData);
    // myBaja.setCallBack(mySubscribeDevices);

    //if (datatable_data_list.length > 0) {
    //    $("#datatablediv").show();
    //    dataTableDraw();
    //} else {
    //    $("#datatablediv").hide();
    //}
    resetData();
  }

  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: 32,
            min: 1
          },
          layoutSize: '100%',
          layoutCenter: [],
          zoom: 1.2,
          silent: true
        },
        series: [
          {   //不管有無被選擇(圓點)
            type: 'scatter',
            coordinateSystem: 'geo',
            geoIndex: 0,
            symbol: 'circle',
            symbolSize: 10,
            symbolOffset: [10, 10],
            label: {
              show: false
            },
            /*data: currentData,*/
            z: 2
          },
          {   //未選擇的設備(icon)
            type: 'scatter',
            coordinateSystem: 'geo',
            geoIndex: 0,
            symbolSize: 30,
            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: 30,
            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: 10,
            symbolOffset: [10, 10],
            label: {
              show: false
            },
            /*data: currentData,*/
            z: 2
          },
          {   //編輯模式底下的設備(icon，只會有一個)
            type: 'scatter',
            coordinateSystem: 'geo',
            geoIndex: 0,
            symbolSize: 30,
            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 ?? null;
          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) {
        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) {
              if (cData.device_guid == point.device_guid) {
                cData._dbId = dbid;
                cData.spriteDbid = dbid;
                setForgeHotSpotColor(cData);
              }
            })
          });
        });
        floChart.setOption(option)
      })
      //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;

        if (zoom <= 2.5) {
          /*ResetFloorMap();*/
          floChart.setOption({
            geo: {
              roam: 'scale'
            },
          });
        } else {
          floChart.setOption({
            geo: {
              roam: true
            },
          });
        }

        resetData();
      });

    })
      .fail(function () {
        toast_warning("查無該樓層地圖")
        floChart.clear();
      });



  }
  //baja 訂閱設備
  function subDevice() {

    let floMyBaja = new subscriptionDevices();
    var ordPath = {
      "area_tag": pageAct.AreaTag,
      "building_tag": pageAct.buiTag,
      "system_tag": pageAct.sysMainTag,
      "name_tag": pageAct.sysSubTag,
    }
    floMyBaja.setSubscribeDevicesByBql(ordPath);
    floMyBaja.setSubscribeDevicesCallBack(function (data) {
      let matchDevice = currentData.filter(x => x.device_number == data.device_number_full)[0];
      if (!matchDevice) {
        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") {
        const lightOn = data.value.includes("true")
        setLightOpenOrClose(lightOn, matchDevice.device_guid);
        if (lightOn) {
          setLightValues(matchDevice.device_guid, 200, 0xe1cf18);
        } else {
          setLightValues(matchDevice.device_guid, 0, 0xffffff);
        }
      }

      if (data.point_name == norDevPoiName && data.value == matchDevice.device_normal_point_value) {
        //顯示正常燈號
        $(`#${matchDevice.device_number}_status`).attr("data-light-type", "normal").data("light-type", "normal");
      } else if (data.point_name == cloDevPoiName && data.value == matchDevice.device_close_point_value) {
        $(`#${matchDevice.device_number}_status`).attr("data-light-type", "close").data("light-type", "close");
      } else if (data.point_name == errDevPoiName && data.value == matchDevice.device_error_point_value) {
        $(`#${matchDevice.device_number}_status`).attr("data-light-type", "error").data("light-type", "error");
      }
      setForgeHotSpotColor(matchDevice);

    });

    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: $("[name=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 (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 };

        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 (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
        }

        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 (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
        }

        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 (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 }
    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) {
    $(loadEle).Loading("start");
    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 () {
        $(loadEle).Loading("close");
      });
      setHeatMap();

      if (pageAct.sysSubTag == "ELEV") {
        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.sysMainTag !== "LT" && 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"]
        }
      })


      console.log("floor", devices)

      let option = {
        devices: devices,
      }

      heatMap = new ADHeatMaps(option);
      heatMap.onComplete = () => {

        $.each(currentData, (idx, dev) => {
          heatMap.changeTemp(dev.device_number, dev._temp || 0);
        })
      }
    }
  }

  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) => {
          let item = {};
          item.position = {};
          if (data.device_coordinate_3d != null && isJSON(data.device_coordinate_3d)) {
            item.position = JSON.parse(data.device_coordinate_3d);
          }
          $.extend(item, data);
          myDataList.push(item);
        })

        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 = 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 (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 = 10;
      });
    });
    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 = 10;
        }
      });
    });
    floChart.setOption(option);
  }
</script>