ibms-dome/Frontend/_sysMonFloor.html

<style>
    [id^=yt_tooltip] {
        width: 450px;
    }
</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 : 80vh!important;width:100%"></div>
    </div>
    <div class="col-6 my-3">
        <div id="forgeHeatBarDiv" class="d-flex mb-4" style="gap:15px">

        </div>
        <div id="forgeViewer"></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 () {
        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 `名稱：${params.data.device_node_full_name}<br>
                                    Guid：${params.data.device_node_guid}`
                        }
                        else {
                            return `名稱：${params.data.full_name}<br>
                                    Guid：${params.data.device_guid}`
                        }
                    }
                },
                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 position = [params.event.event.clientX, params.event.event.clientY];
                    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;
                            }
                        })
                    });
                });
                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;
                }
                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") {
                    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 == 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");
                }
                
            });

            floMyBaja.setSubscribeDeviceEndCallBack(function (data) {
                endPageLoading();
                if (data.findIndex(x => 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) => {
            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();

            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() {
        console.log("currentData", currentData)
        let 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,
        }

      if (pageAct.sysMainTag !== "LT") {
        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 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) => {
            controlFocusHotspot(cData._dbId, 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>