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 lightControl = "device"; // device 群控 node 燈控
    var zoomToggle = 3;
    $(function () {
        initChart();
        getFloData();
        drawHeatBar();
        getHotspotPoint(() => {
            show3DModel(pageAct.urn);
        });
    });

    onEvent("click", "#resChartZoom", function () {
        floChart.setOption({
            geo: {
                center: null,
                zoom: 1.2,
            },
        });
        resetData();
    });

    function getFloData() {
        let url = baseApiUrl + "/api/Device/GetDeviceList";
        let sendData = {
            sub_system_tag: pageAct.sysSubTag,
            building_tag: pageAct.buiTag,
            floor_tag: pageAct.floTag,
        };
        objSendData.Data = sendData;
        ytAjax = new YourTeam.Ajax(
            url,
            objSendData,
            function (res) {
                if (!res || res.code != "0000" || !res.data) {
                } else {
                    lightControl = res.module;
                    chartHandler(
                        `${baseImgUrl}/upload/floor_map/${res.data[0].floor_map_name}`
                    );
                    if (pageAct.sysSubTag === "L1") {
                        let nodes = [];
                        res.data[0].device_list.forEach((d) => {
                            nodes = [...nodes, ...d.device_nodes];
                        });
                        getDevice([...nodes, ...res.data[0].device_list]);
                    } else {
                        getDevice(res.data[0].device_list);
                    }
                }
            },
            null,
            "POST"
        ).send();
    }

    function getDevice(devList) {
        let selected_floor = devList[0];
        //let selected_floor_objs = devList.filter(function (item) {
        //    return item.floor_guid == selected_floor.floor_guid;
        //});

        //currentData = selected_floor_objs[0].device;

        currentData = $.map(devList, function (item) {
            //資料處理
            if (
                selected_floor.device_number != undefined &&
                selected_floor.device_number != null &&
                selected_floor.device_number != "" &&
                selected_floor.device_number == item.device_number
            ) {
                item.selected = true;
            } else {
                item.selected = false;
            }
            if (
                item.device_coordinate != undefined &&
                item.device_coordinate != null
            ) {
                var coordinate = item.device_coordinate.split(",");
                item.value = [parseFloat(coordinate[0]), parseFloat(coordinate[1])];
            }

            if (
                item.device_nodes != undefined &&
                item.device_nodes != null &&
                item.device_nodes.length > 0
            ) {
                if (item.device_master_number == selected_floor.device_master) {
                    //var datatable_data = {
                    //    device_full_name: item.full_name,
                    //    device_number: item.device_number,
                    //    device_master: item.device_master_number
                    //}
                    //datatable_data_list.push(datatable_data);

                    $.map(item.device_nodes, function (item_node) {
                        item_node.selected = false;
                        if (
                            item_node.device_node_coordinate != undefined &&
                            item_node.device_node_coordinate != null
                        ) {
                            var node_coordinate = item_node.device_node_coordinate.split(",");
                            item_node.value = [
                                parseFloat(node_coordinate[0]),
                                parseFloat(node_coordinate[1]),
                            ];
                        }
                    });
                } else {
                    //var index = datatable_data_list.findIndex(x => x.device_number == item.device_number);
                    //if (index < 0) {
                    //    var datatable_data = {
                    //        device_number: item.device_number,
                    //        device_master: item.device_master_number
                    //    }
                    //    datatable_data_list.push(datatable_data);
                    //}

                    $.map(item.device_nodes, function (item_node) {
                        item_node.selected = false;
                        if (
                            item_node.device_node_coordinate != undefined &&
                            item_node.device_node_coordinate != null
                        ) {
                            var node_coordinate = item_node.device_node_coordinate.split(",");
                            item_node.value = [
                                parseFloat(node_coordinate[0]),
                                parseFloat(node_coordinate[1]),
                            ];
                        }
                    });
                }
            }
            return item;
        });
        if (currentData == null || currentData.length == 0) {
            currentData = [];
        }

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

        //if (datatable_data_list.length > 0) {
        //    $("#datatablediv").show();
        //    dataTableDraw();
        //} else {
        //    $("#datatablediv").hide();
        //}
        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: 16,
                        min: 1,
                    },
                    layoutSize: "100%",
                    layoutCenter: [],
                    zoom: 1.2,
                    silent: true,
                },
                series: [
                    {
                        //不管有無被選擇(圓點)
                        type: "scatter",
                        coordinateSystem: "geo",
                        geoIndex: 0,
                        symbol: "circle",
                        symbolSize: 20,
                        symbolOffset: [10, 10],
                        label: {
                            show: false,
                        },
                        /*data: currentData,*/
                        z: 2,
                    },
                    {
                        //未選擇的設備(icon)
                        type: "scatter",
                        coordinateSystem: "geo",
                        geoIndex: 0,
                        symbolSize: 50,
                        label: {
                            formatter: "{b}",
                            position: "bottom",
                            show: true,
                            backgroundColor: "orange",
                        },
                        emphasis: {
                            label: {
                                show: true,
                                fontSize: "20",
                                fontWeight: "bold",
                                color: "yellow",
                            },
                        },
                        selectedMode: "single",
                        data: null,
                        z: 1,
                    },
                    {
                        //被選擇的設備(icon)
                        type: "effectScatter",
                        coordinateSystem: "geo",
                        geoIndex: 0,
                        showEffectOn: "render",
                        symbolSize: 50,
                        label: {
                            formatter: "{b}",
                            position: "bottom",
                            show: true,
                            backgroundColor: "orange",
                        },
                        emphasis: {
                            label: {
                                show: true,
                                fontSize: "20",
                                fontWeight: "bold",
                                color: "yellow",
                            },
                        },
                        selectedMode: "single",
                        data: null,
                        z: 1,
                    },
                    {
                        //編輯模式底下的設備(圓點，只會有一個)
                        type: "scatter",
                        coordinateSystem: "geo",
                        geoIndex: 0,
                        symbol: "circle",
                        symbolSize: 20,
                        symbolOffset: [10, 10],
                        label: {
                            show: false,
                        },
                        /*data: currentData,*/
                        z: 2,
                    },
                    {
                        //編輯模式底下的設備(icon，只會有一個)
                        type: "scatter",
                        coordinateSystem: "geo",
                        geoIndex: 0,
                        symbolSize: 50,
                        label: {
                            formatter: "{b}",
                            position: "bottom",
                            show: true,
                            backgroundColor: "orange",
                        },
                        emphasis: {
                            label: {
                                show: true,
                                fontSize: "20",
                                fontWeight: "bold",
                                color: "yellow",
                            },
                        },
                        data: null,
                        z: 1,
                    },
                ],
            };

            floChart.setOption(option);

            if (
                currentData != undefined &&
                currentData != null &&
                currentData.length > 0
            ) {
                resetData();
            }

            var ordPath = {
                building_tag: pageAct.buiTag,
                system_tag: pageAct.sysMainTag,
            };
            //myBaja.setSubscribeDevicesByBql(ordPath);
            //myBaja.setSubscribeDevicesCallBack(subscribeCallBack);
            let parentEle = null;
            floChart.on("click", function (params) {
                console.log("Click1", params);
                forgeUnFocusAll();
                chartUnFocusAll();
                if (params.componentType == "series") {
                    let data = params.data;
                    let rect = $("#floChart")[0].getBoundingClientRect();
                    let position = [
                        rect.left + rect.width / 2,
                        rect.top + rect.height / 4,
                    ];
                    // console.log(position)
                    // let position = [params.event.event.clientX+100, params.event.event.clientY-300];
                    data._dbId = data._dbId ?? "";
                    // currentData.find(
                    //   (cData) => cData.device_number === data.device_number
                    // ).forge_dbid;
                    parentEle = crePosPopover(position, data);
                    $(parentEle).click();
                } else {
                    $(parentEle).YTTooltip("hide");
                }
            });

            floChart.getZr().on("click", function (params) {
                /*console.log("click", params);*/
                var pixelPoint = [params.offsetX, params.offsetY];
                var dataPoint = floChart.convertFromPixel({ geoIndex: 0 }, pixelPoint);

                if (!(params?.target?.shape?.symbolType == "circle")) {
                    $(parentEle).YTTooltip("hide");
                }

                //temp_device_on_floor_map = [{
                //    device_guid: selected_temp_device.device_guid,
                //    device_full_name: selected_temp_device.device_full_name,
                //    device_node_guid: selected_temp_device.device_node_guid ? selected_temp_device.device_node_guid : null,
                //    device_node_full_name: selected_temp_device.device_node_full_name ? selected_temp_device.device_node_full_name : null,
                //    status: selected_temp_device.status,
                //    value: dataPoint
                //}];

                // currentData.push([dataPoint[0], dataPoint[1], 1]);
                // floChart.setOption(option);
            });

            onEvent("autodesk:complete:sprite", "#forgeViewer", function (e, obj) {
                console.log(obj.myDataList);
                let option = floChart.getOption();

                option.series.forEach(function (series) {
                    (series.data ?? []).forEach(function (point) {
                        let dbid = obj.myDataList.filter(
                            (x) => x.device_number == point.device_number
                        )[0]?._dbId;
                        point._dbId = dbid;
                        // currentData.forEach(function (cData) {
                        //   console.log(cData.device_node_guid=== point.device_node_guid)
                        //   if (lightControl === "node" && pageAct.sysSubTag === "L1" && cData.device_node_guid == point.device_node_guid) {
                        //     cData._dbId = dbid;
                        //     cData.spriteDbid = dbid;
                        //     setForgeHotSpotColor(cData);
                        //   }
                        //   else if (cData.device_guid == point.device_guid) {
                        //     cData._dbId = dbid;
                        //     cData.spriteDbid = dbid;
                        //     setForgeHotSpotColor(cData);
                        //   }
                        // });
                        const cData = currentData.find((cur) => {
                            if (lightControl === "node" && pageAct.sysSubTag === "L1") {
                                if (cur.device_node_guid == point.device_node_guid) return cur;
                            } else if (cur.device_guid == point.device_guid) {
                                return cur;
                            }
                        });
                        cData._dbId = dbid;
                        cData.spriteDbid = dbid;
                        setForgeHotSpotColor(cData);
                    });
                });
                floChart.setOption(option);
            });
            //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() {
        console.log("subDevice 開始");
        let floMyBaja = new subscriptionDevices();
        var ordPath = {
            area_tag: pageAct.AreaTag,
            building_tag: pageAct.buiTag,
            system_tag: pageAct.sysMainTag,
            name_tag: pageAct.sysSubTag,
            flo_tag: pageAct.floTag,
        };
        floMyBaja.setSubscribeDevicesByBql(ordPath);

        // 燈熱點用
        let lightOnHotColorArr = [];
        let lightOffHotColorArr = [];
        // 燈光圈用
        let lightOnGuidArr = [];
        let lightOffGuidArr = [];
        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 == "ONOFF" && pageAct.sysSubTag === "L1") {
                const lightOn = data.value.includes("true");
                setLightOpenOrClose(lightOn, matchDevice.device_guid);
                // console.log("Forge 渲染",data.point_name,lightOn)
                if (lightOn && matchDevice.spriteDbid) {
                    console.log(lightOn, matchDevice, matchDevice.spriteDbid);
                    // setLightValues(matchDevice.device_guid, 200, 0xe1cf18);
                    // changeColorForHotspot(matchDevice.spriteDbid, null, lightOn);
                    lightOnHotColorArr.push(matchDevice.spriteDbid);
                    lightOffHotColorArr = lightOffHotColorArr.filter(
                        (light) => light !== matchDevice.spriteDbid
                    );
                    heatMap?.changeTemp(matchDevice.device_number, 40);
                } else if (matchDevice.spriteDbid) {
                    // console.log(lightOn, matchDevice);
                    // setLightValues(matchDevice.device_guid, 0, 0xffffff);
                    // changeColorForHotspot(matchDevice.spriteDbid, null, lightOn);
                    lightOnHotColorArr = lightOnHotColorArr.filter(
                        (light) => light !== matchDevice.spriteDbid
                    );
                    lightOffHotColorArr.push(matchDevice.spriteDbid);
                    heatMap?.changeTemp(matchDevice.device_number, 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");
            }
            setForgeHotSpotColor(matchDevice);

            console.log(lightOnHotColorArr, lightOffHotColorArr);
            changeColorForHotspot(lightOnHotColorArr, null, true);
            changeColorForHotspot(lightOffHotColorArr, null, false);
        });

        floMyBaja.setSubscribeDeviceEndCallBack(function (data) {
            endPageLoading();
            if (
                pageAct.sysSubTag !== "M12" &&
                data.findIndex(
                    (x) => x.point_name == "Temp" || x.point_name == "TEMP"
                ) != -1
            ) {
                // 顯示溫度條
                showHeat("[name=forgeHeatBar]");
            }
        });
    }

    function drawHeatBar() {
        $("#forgeHeatBarDiv").html(setTopHeatBar());
    }

    // 電梯 3D 位置呈現
    function set3DElevPos(viewer) {
        let nodeIds = allElevDevList
            .filter((x) => !isNaN(parseInt(x.forge_dbid)))
            .map((x) => {
                return { devNum: x.device_number, nodeId: parseInt(x.forge_dbid) };
            });

        $.each(nodeIds, (idx, item) => {
            elev3DBind[item.devNum] = item.nodeId;
        });
        nodeIds = nodeIds.map((x) => x.nodeId);
        $.each(nodeIds, function (idx, node) {
            let options = {
                element: $("#forgeViewer"),
                viewer: viewer,
                nodeId: node,
                floorHeight: elev3DOption.floorHeight ?? [],
                inited: function () { },
            };
            let elevator3DObj = new elevator3D(options);
            let devNum = Object.keys(elev3DBind).filter(
                (x) => elev3DBind[x] == node
            )[0];
            let subData = subSeviceData.filter((x) => x.device_number == devNum)[0];

            if (elev3DObj.filter((x) => x.nodeId == node).length == 0) {
                elev3DObj.push({ id: devNum, nodeId: node, obj: elevator3DObj });
            }

            if (subData) {
                let elevObj = elev3DObj.filter((x) => x.nodeId == node)[0];
                if (!elevObj.id) {
                    elevObj.id = devNum;
                }
                elevObj.obj = Object.assign(elevObj, elevator3DObj ?? {});
                elevObj.obj.init(function () {
                    let frags = elevObj.obj.fragProxys.filter((x) => x.nodeId == node);

                    frags.forEach((fragProxy) => {
                        fragProxy.frag.position.z =
                            elev3DOption.floorHeight.filter(
                                (x) => x.floor == subData["CP"]
                            )[0]?.height ?? 0;
                        fragProxy.frag.updateAnimTransform();
                    });
                    elevObj.obj.viewer.impl.sceneUpdated(true);
                });
            }
        });
    }

    // 電梯 3D Option 設置
    function set3DElevOpt(data) {
        let devNumArr = data
            .map((x) => {
                return {
                    devNum: x.device_number_full,
                    priority: allElevDevList.filter(
                        (y) => y.device_number == x.device_number_full
                    )[0]?.priority,
                };
            })
            .DistinctBy("devNum");
        devNumArr = devNumArr.oSort("priority");
        $.each(devNumArr, (idx, devObj) => {
            devNum = devObj.devNum;
            let subData = subSeviceData.filter((x) => x.device_number == devNum)[0];

            if (subData) {
                //// 左側 3D 電梯 nodeID 與 device_number match
                //if (Object.keys(elev3DBind).indexOf(devNum) == -1 && viewer3DNodeIds.length != 0) {
                //    elev3DBind[devNum] = viewer3DNodeIds[Object.keys(elev3DBind).length];
                //}
                // 左側 3D 電梯 Viewer Option 設置
                /*elev3DOption.nodes = Object.keys(elev3DBind).map(x => elev3DBind[x]);*/
                elev3DOption.nodeId = elev3DBind[devNum];
                elev3DOption.floorHeight = floList.map((x) => {
                    return { floor: x };
                });
                elev3DOption.floorHeight.forEach((floObj, idx) => {
                    if (floObj.floor.startsWith("B")) {
                        let floor = parseInt(floObj.floor.split("B")[1].split("F")[0]);
                        floObj.height = floor * -13;
                    } else {
                        let floor = parseInt(floObj.floor.split("F")[0]);
                        if (floor == 1) {
                            floObj.height = 0;
                        } else if (floor == 2) {
                            floObj.height = 14.75;
                        } else {
                            floObj.height = 14.75 + (floor - 2) * 9.75;
                        }
                    }
                });

                if (elev3DObj.length != 0) {
                    let elevObj = elev3DObj.filter(
                        (x) => x.nodeId == elev3DBind[devNum]
                    )[0];
                    if (!elevObj.id) {
                        elevObj.id = devNum;
                    }
                    elevObj.obj = Object.assign(elevObj.obj, elev3DOption);
                    elevObj.obj.init(function () {
                        let frags = elevObj.obj.fragProxys.filter(
                            (x) => x.nodeId == elev3DBind[devNum]
                        );

                        frags.forEach((fragProxy) => {
                            fragProxy.frag.position.z =
                                elev3DOption.floorHeight.filter(
                                    (x) => x.floor == subData["CP"]
                                )[0]?.height ?? 0;
                            fragProxy.frag.updateAnimTransform();
                        });
                        elevObj.obj.viewer.impl.sceneUpdated(true);
                    });
                }
            }
        });
    }

    // //訂閱設備的回傳值，並塞到全域變數
    // function subscribeCallBack(change_device, is_need_reset = false) {
    //     if (change_device != undefined && change_device != null) {
    //         var target_device = allDeviceRowData.filter(x => x.device_number == change_device.device_number)[0];

    //         if (target_device == undefined || target_device == null) {
    //             //新增
    //             obj = {
    //                 device_number: change_device.device_number,
    //                 points: [{
    //                     name: change_device.point_name,
    //                     value: change_device.value
    //                 }]
    //             };

    //             allDeviceRowData.push(obj);
    //         }
    //         else {
    //             selected_device_point = target_device.points.find(x => x.name == change_device.point_name);
    //             if (selected_device_point != null) {
    //                 selected_device_point.value = change_device.value;
    //             }
    //             else {
    //                 obj = {
    //                     name: change_device.point_name,
    //                     value: change_device.value
    //                 }
    //                 target_device.points.push(obj);
    //             }
    //         }

    //         if (is_need_reset) {
    //             resetData();
    //         }
    //     }
    // }

    // 重設平面圖設備資料
    function resetData() {
        const scatter_symbol_convertData = function (data, zoom) {
            //正常、關閉排除CCVT(圓點)
            let res = [],
                temp = [];
            data.forEach(function (item, index) {
                if (
                    global_emergency_alarm_device_number != undefined &&
                    global_emergency_alarm_device_number != null
                ) {
                    if (
                        global_emergency_alarm_device_number.findIndex(
                            (x) => x.device_number == item.device_number
                        ) < 0 &&
                        item.device_system_category_layer3 != "C"
                    ) {
                        //如果有子節點，則只針對子節點操作
                        if (
                            lightControl === "node" &&
                            item.device_nodes != undefined &&
                            item.device_nodes != null &&
                            item.device_nodes.length > 0
                        ) {
                            item.device_nodes.forEach(function (item_node, item_node_index) {
                                //添加父節點相關資訊
                                item_node.device_system_category_layer3 =
                                    item.device_system_category_layer3;
                                item_node.device_normal_color = item.device_normal_color;
                                item_node.device_close_color = item.device_close_color;

                                //判斷父節點狀態
                                var device_index = allDeviceRowData.findIndex(
                                    (x) => x.device_number == item.device_number
                                );
                                var temp_point_value;
                                if (device_index > -1) {
                                    if (
                                        item.device_normal_point_name != null ||
                                        item.device_close_point_name != null
                                    ) {
                                        //當其中point name 不為null的情況
                                        if (item.device_normal_point_name != null) {
                                            temp_point_value = allDeviceRowData[
                                                device_index
                                            ].points.find(
                                                (x) => x.name == item.device_normal_point_name
                                            );
                                            temp_point_value =
                                                allDeviceRowData[device_index].points[
                                                item.device_normal_point_name
                                                ];
                                            if (temp_point_value == item.device_normal_point_value) {
                                                item_node.device_color = item.device_normal_color;
                                            }
                                        }
                                        if (item.device_close_point_name != null) {
                                            temp_point_value =
                                                allDeviceRowData[device_index].points[
                                                item.device_close_point_name
                                                ];
                                            if (temp_point_value == item.device_close_point_value) {
                                                item_node.device_color = item.device_close_color;
                                            }
                                        }
                                    } else {
                                        if (item.device_normal_point_name == "ER") {
                                            temp_point_value =
                                                allDeviceRowData[device_index].points[
                                                item.device_normal_point_name
                                                ];
                                            if (temp_point_value == "true") {
                                                item_node.device_color = item.device_normal_color;
                                            } else {
                                                temp_point_value =
                                                    allDeviceRowData[device_index].points[
                                                    item.device_close_point_name
                                                    ];
                                                if (temp_point_value == item.device_close_point_value) {
                                                    item_node.device_color = item.device_close_color;
                                                }
                                            }
                                        } else if (item.device_close_point_name == "ER") {
                                            temp_point_value =
                                                allDeviceRowData[device_index].points[
                                                item.device_close_point_name
                                                ];
                                            if (temp_point_value == "true") {
                                                item_node.device_color = item.device_close_color;
                                            } else {
                                                temp_point_value =
                                                    allDeviceRowData[device_index].points[
                                                    item.device_normal_point_name
                                                    ];
                                                if (
                                                    temp_point_value == item.device_normal_point_value
                                                ) {
                                                    item_node.device_color = item.device_normal_color;
                                                }
                                            }
                                        } else {
                                            temp_point_value =
                                                allDeviceRowData[device_index].points[
                                                item.device_normal_point_name
                                                ];
                                            if (temp_point_value == item.device_normal_point_value) {
                                                item_node.device_color = item.device_normal_color;
                                            } else if (
                                                temp_point_value == item.device_close_point_value
                                            ) {
                                                item_node.device_color = item.device_close_color;
                                            }
                                        }
                                    }
                                }
                                temp.push(item_node);
                            });
                        } else {
                            var device_index = allDeviceRowData.findIndex(
                                (x) => x.device_number == item.device_number
                            );
                            if (device_index > -1) {
                                if (
                                    item.device_normal_point_name != null ||
                                    item.device_close_point_name != null
                                ) {
                                    //當其中point name 有為null的情況
                                    if (item.device_normal_point_name != null) {
                                        // temp_point_value = allDeviceRowData[device_index].points[item.device_normal_point_name];
                                        temp_point_value = allDeviceRowData[
                                            device_index
                                        ].points.find(
                                            (x) => x.name == item.device_normal_point_name
                                        ).value;
                                        if (temp_point_value == item.device_normal_point_value) {
                                            item.device_color = item.device_normal_color;
                                        }
                                    }
                                    if (item.device_close_point_name != null) {
                                        // temp_point_value = allDeviceRowData[device_index].points[item.device_close_point_name];
                                        temp_point_value = allDeviceRowData[
                                            device_index
                                        ].points.find(
                                            (x) => x.name == item.device_close_point_name
                                        ).value;
                                        if (temp_point_value == item.device_close_point_value) {
                                            item.device_color = item.device_close_color;
                                        }
                                    }
                                } else {
                                    if (item.device_normal_point_name == "ER") {
                                        // temp_point_value = allDeviceRowData[device_index].points[item.device_normal_point_name];
                                        temp_point_value = allDeviceRowData[
                                            device_index
                                        ].points.find(
                                            (x) => x.name == item.device_normal_point_name
                                        ).value;
                                        if (temp_point_value == "true") {
                                            item.device_color = item.device_normal_color;
                                        } else {
                                            // temp_point_value = allDeviceRowData[device_index].points[item.device_close_point_name];
                                            temp_point_value = allDeviceRowData[
                                                device_index
                                            ].points.find(
                                                (x) => x.name == item.device_close_point_name
                                            ).value;
                                            if (temp_point_value == item.device_close_point_value) {
                                                item.device_color = item.device_close_color;
                                            }
                                        }
                                    } else if (item.device_close_point_name == "ER") {
                                        // temp_point_value = allDeviceRowData[device_index].points[item.device_close_point_name];
                                        temp_point_value = allDeviceRowData[
                                            device_index
                                        ].points.find(
                                            (x) => x.name == item.device_close_point_name
                                        ).value;
                                        if (temp_point_value == "true") {
                                            item.device_color = item.device_close_color;
                                        } else {
                                            // temp_point_value = allDeviceRowData[device_index].points[item.device_normal_point_name];
                                            temp_point_value = allDeviceRowData[
                                                device_index
                                            ].points.find(
                                                (x) => x.name == item.device_normal_point_name
                                            ).value;
                                            if (temp_point_value == item.device_normal_point_value) {
                                                item.device_color = item.device_normal_color;
                                            }
                                        }
                                    } else {
                                        // temp_point_value = allDeviceRowData[device_index].points[item.device_normal_point_name];
                                        temp_point_value = allDeviceRowData[
                                            device_index
                                        ].points.find(
                                            (x) => x.name == item.device_normal_point_name
                                        ).value;
                                        if (temp_point_value == item.device_normal_point_value) {
                                            item.device_color = item.device_normal_color;
                                        } else if (
                                            temp_point_value == item.device_close_point_value
                                        ) {
                                            item.device_color = item.device_close_color;
                                        }
                                    }
                                }
                            }
                            item.zoom = zoom;
                            temp.push(item);
                        }
                    }
                }
            });

            // let temp = data.filter(function (item, index) {
            //     if (global_emergency_alarm_device_number != undefined && global_emergency_alarm_device_number != null) {
            //         return global_emergency_alarm_device_number.findIndex(x => x.device_number == item.device_number) < 0 && item.device_system_category_layer3 != "C";
            //     } else {
            //         return [];
            //     }
            // });
            let option = floChart.getOption();
            temp.forEach(function (tempData) {
                let oldTarObj = option.series[0]?.data?.filter(
                    (x) => x.device_number == tempData.device_number
                )[0];
                if (oldTarObj) {
                    tempData = Object.assign(tempData, oldTarObj);
                }
            });
            temp.map(function (item) {
                var obj = {
                    device_guid: item.device_guid,
                    device_number: item.device_number,
                    full_name: item.full_name ? item.full_name : null,
                    device_node_guid: item.device_node_guid
                        ? item.device_node_guid
                        : null,
                    device_node_full_name: item.device_node_full_name
                        ? item.device_node_full_name
                        : null,
                    device_system_category_layer3: item.device_system_category_layer3
                        ? item.device_system_category_layer3
                        : null,
                    status: item.status,
                    value: item.value,
                    deviceItems: item.deviceItems,
                    deviceURL: item.deviceURL,
                    _dbId: item._dbId ?? null,
                };

                obj.itemStyle = { color: item.device_color };

                res.push(obj);
            });

            return res;
        };

        const scatter_icon_convertData = function (data) {
            //正常、關閉(icon)
            let res = [],
                temp = [];

            data.forEach(function (item, index) {
                if (
                    global_emergency_alarm_device_number != undefined &&
                    global_emergency_alarm_device_number != null
                ) {
                    if (
                        global_emergency_alarm_device_number.findIndex(
                            (x) => x.device_number == item.device_number
                        ) < 0 &&
                        item.device_system_category_layer3 != "C"
                    ) {
                        //如果有子節點，則只針對子節點操作
                        if (
                            lightControl === "node" &&
                            item.device_nodes != undefined &&
                            item.device_nodes != null &&
                            item.device_nodes.length > 0
                        ) {
                            item.device_nodes.forEach(function (item_node, item_node_index) {
                                //添加父節點相關資訊
                                item_node.device_system_category_layer3 =
                                    item.device_system_category_layer3;
                                item_node.device_normal_color = item.device_normal_color;
                                item_node.device_image = item.device_image;
                                temp.push(item_node);
                            });
                        } else {
                            temp.push(item);
                        }
                    }
                }
            });

            temp = data.filter(function (item, index) {
                if (
                    global_emergency_alarm_device_number != undefined &&
                    global_emergency_alarm_device_number != null
                ) {
                    return (
                        global_emergency_alarm_device_number.findIndex(
                            (x) => x.device_number == item.device_number
                        ) < 0 && item.device_system_category_layer3 != "C"
                    );
                } else {
                    return [];
                }
            });

            temp.map(function (item) {
                var obj = {
                    device_guid: item.device_guid,
                    device_number: item.device_number,
                    full_name: item.full_name ? item.full_name : null,
                    device_node_guid: item.device_node_guid
                        ? item.device_node_guid
                        : null,
                    device_node_full_name: item.device_node_full_name
                        ? item.device_node_full_name
                        : null,
                    device_system_category_layer3: item.device_system_category_layer3
                        ? item.device_system_category_layer3
                        : null,
                    status: item.status,
                    symbol:
                        "image://" +
                        baseImgUrl +
                        "/upload/device_icon/" +
                        item.device_image,
                    value: item.value,
                    deviceItems: item.deviceItems,
                    deviceURL: item.deviceURL,
                };

                if (item.selected) {
                    obj.symbolSize = 50;
                }

                res.push(obj);
            });

            return res;
        };

        const scatter_error_convertData = function (data) {
            //異常(圓點)
            let res = [],
                temp = [];

            data.forEach(function (item, index) {
                if (
                    global_emergency_alarm_device_number != undefined &&
                    global_emergency_alarm_device_number != null
                ) {
                    if (
                        global_emergency_alarm_device_number.findIndex(
                            (x) => x.device_number == item.device_number
                        ) > -1 &&
                        item.device_system_category_layer3 != "C"
                    ) {
                        //如果有子節點，則只針對子節點操作
                        if (
                            lightControl === "node" &&
                            item.device_nodes != undefined &&
                            item.device_nodes != null &&
                            item.device_nodes.length > 0
                        ) {
                            item.device_nodes.forEach(function (item_node, item_node_index) {
                                //添加父節點相關資訊
                                item_node.device_system_category_layer3 =
                                    item.device_system_category_layer3;
                                item_node.device_error_color = item.device_error_color;
                                temp.push(item_node);
                            });
                        } else {
                            temp.push(item);
                        }
                    }
                }
            });

            // if (global_emergency_alarm_device_number != undefined && global_emergency_alarm_device_number != null) {
            //     temp = data.filter(function (item, index) {
            //         return global_emergency_alarm_device_number.findIndex(x => x.device_number == item.device_number) > -1 && item.device_system_category_layer3 != "C";
            //     });
            // }

            temp.map(function (item) {
                var obj = {
                    device_guid: item.device_guid,
                    device_number: item.device_number,
                    full_name: item.full_name ? item.full_name : null,
                    device_node_guid: item.device_node_guid
                        ? item.device_node_guid
                        : null,
                    device_node_full_name: item.device_node_full_name
                        ? item.device_node_full_name
                        : null,
                    device_system_category_layer3: item.device_system_category_layer3
                        ? item.device_system_category_layer3
                        : null,
                    status: item.status,
                    value: item.value,
                    deviceItems: item.deviceItems,
                    deviceURL: item.deviceURL,
                };

                obj.itemStyle = { color: item.device_error_color };

                res.push(obj);
            });

            return res;
        };

        const scatter_error_icon_convertData = function (data) {
            //異常(icon)
            let res = [],
                temp = [];

            data.forEach(function (item, index) {
                if (
                    global_emergency_alarm_device_number != undefined &&
                    global_emergency_alarm_device_number != null
                ) {
                    if (
                        global_emergency_alarm_device_number.findIndex(
                            (x) => x.device_number == item.device_number
                        ) > -1 &&
                        item.device_system_category_layer3 != "C"
                    ) {
                        //如果有子節點，則只針對子節點操作
                        if (
                            lightControl === "node" &&
                            item.device_nodes != undefined &&
                            item.device_nodes != null &&
                            item.device_nodes.length > 0
                        ) {
                            item.device_nodes.forEach(function (item_node, item_node_index) {
                                //添加父節點相關資訊
                                item_node.device_system_category_layer3 =
                                    item.device_system_category_layer3;
                                item_node.device_error_color = item.device_error_color;
                                item_node.device_image = item.device_image;
                                temp.push(item_node);
                            });
                        } else {
                            temp.push(item);
                        }
                    }
                }
            });

            if (
                global_emergency_alarm_device_number != undefined &&
                global_emergency_alarm_device_number != null
            ) {
                temp = data.filter(function (item, index) {
                    return (
                        global_emergency_alarm_device_number.findIndex(
                            (x) => x.device_number == item.device_number
                        ) > -1 && item.device_system_category_layer3 != "C"
                    );
                });
            }

            temp.map(function (item) {
                var obj = {
                    device_guid: item.device_guid,
                    device_number: item.device_number,
                    full_name: item.full_name ? item.full_name : null,
                    device_node_guid: item.device_node_guid
                        ? item.device_node_guid
                        : null,
                    device_node_full_name: item.device_node_full_name
                        ? item.device_node_full_name
                        : null,
                    device_system_category_layer3: item.device_system_category_layer3
                        ? item.device_system_category_layer3
                        : null,
                    status: item.status,
                    symbol:
                        "image://" +
                        baseImgUrl +
                        "/upload/device_icon/" +
                        item.device_image,
                    value: item.value,
                    deviceItems: item.deviceItems,
                    deviceURL: item.deviceURL,
                };

                res.push(obj);
            });

            return res;
        };

        const scatter_cctv_convertData = function (data) {
            //CCTV
            let res = [];
            let temp = data.filter(function (item, index) {
                return item.device_system_category_layer3 == "C";
            });

            temp.map(function (item) {
                var obj = {
                    device_guid: item.device_guid,
                    device_number: item.device_number,
                    full_name: item.full_name,
                    device_system_category_layer3: item.device_system_category_layer3,
                    device_ip: item.device_ip,
                    device_port: item.device_port,
                    status: item.status,
                    symbol:
                        "image://" +
                        str_location_url +
                        "/upload/device_icon/" +
                        item.device_image,
                    value: item.value,
                };

                res.push(obj);
            });

            return res;
        };

        if (!floChart.getOption()) {
            return;
        }

        var zoom = 0;
        if (floChart.getOption().geo && floChart.getOption().geo.length > 0) {
            zoom = floChart.getOption().geo[0].zoom;
        }

        if (zoom <= zoomToggle) {
            floChart.setOption({
                series: [
                    {
                        symbolOffset: [0, 0],
                        data: scatter_symbol_convertData(currentData), //正常、關閉(圓點)
                    },
                    {
                        data: [], //正常、關閉(icon)
                    },
                    {
                        symbolOffset: [0, 0],
                        data: scatter_error_convertData(currentData), //異常(圓點)
                    },
                    {
                        data: [], //異常(icon)
                    },
                    {
                        data: scatter_cctv_convertData(currentData), //CCTV
                    },
                ],
            });
        } else {
            floChart.setOption({
                series: [
                    {
                        symbolOffset: [10, 10],

                        data: scatter_symbol_convertData(currentData, zoom), //正常、關閉(圓點)
                    },
                    {
                        data: scatter_icon_convertData(currentData), //正常、關閉(icon)
                    },
                    {
                        symbolOffset: [10, 10],
                        data: scatter_error_convertData(currentData), //異常(圓點)
                    },
                    {
                        data: scatter_error_icon_convertData(currentData), //異常(icon)
                    },
                    {
                        data: scatter_cctv_convertData(currentData), //CCTV
                    },
                ],
            });
        }
    }

    function getNextFloor(floGuid = null) {
        let url = baseApiUrl + "/api/Device/GetNextFloor";
        objSendData.Data = { floor_guid: floGuid, building_tag: pageAct.buiTag };
        let result = "";
        ytAjax = new YourTeam.Ajax(
            url,
            objSendData,
            function (res) {
                if (!res || res.code != "0000" || !res.data) {
                } else {
                    result = res.data?.full_name;
                }
            },
            null,
            "POST"
        ).send();

        return result;
    }

    // show 3D 模型
    function show3DModel(urn) {
        $(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 () {
                viewer.model.search(
                    "天花板",
                    (nodeIds) => {
                        // console.log("2",nodeIds)
                        viewer.hide(nodeIds);
                    },
                    (e) => {
                        console.log(e);
                    }
                );
                $(loadEle).Loading("close");
            });

            setHeatMap();

            if (
                (pageAct.sysSubTag == "M12" || pageAct.sysSubTag == "ELEV") &&
                elevatorShow
            ) {
                let elevOption = {
                    viewer: viewer,
                    ordPath: {
                        area_tag: pageAct.AreaTag,
                        building_tag: pageAct.buiTag,
                    },
                };
                // 電梯移動訂閱程序載入
                let forge3DElev = new Forge3DElevFull(elevOption);
                forge3DElev.bajaEndCallback = function () {
                    endPageLoading();
                };
                forge3DElev.init();
            }
        });

        subDevice();
    }

    function setHeatMap() {
        if (pageAct.sysSubTag !== "M12") {
            devices = currentData.map((x) => {
                return {
                    roomDbId: !isNaN(parseInt(x.room_dbid)) ? parseInt(x.room_dbid) : -1,
                    id: x.device_number,
                    position: isJSON(x.device_coordinate_3d)
                        ? JSON.parse(x.device_coordinate_3d)
                        : {}, // x: 0, y: 25, z: -2.5      (3.35, -4.81, 12.88
                    sensorTypes: ["temperature", "humidity"],
                };
            });

            let option = {
                devices: devices,
            };

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

        if (pageAct.sysSubTag === "M12" && !elevatorShow) {
            let sensorObjs = [];
            addHotPoint(viewer);
            Forge3DSensor.sensorTimes = 0;
            sensorObjs = currentData.map((device) => {
                Forge3DSensor.sensorTimes++;
                return new Forge3DSensor({
                    viewer: viewer,
                    ordPath: {
                        area_tag: pageAct.AreaTag,
                        building_tag: pageAct.buiTag,
                    },
                    selector: "#forgeViewer",
                    elevCb: elevatorShow
                        ? () => {
                            let elevOption = {
                                selector: "#forgeViewer",
                                viewer: viewer,
                                ordPath: {
                                    area_tag: pageAct.AreaTag,
                                    building_tag: pageAct.buiTag,
                                },
                                sensorObjs,
                            };

                            // 電梯移動訂閱程序載入
                            let forge3DElev = new Forge3DElevFull(elevOption);
                            forge3DElev.bajaEndCallback = function () {
                                endPageLoading();
                            };
                            forge3DElev.init();
                        }
                        : null,
                    curDevice: {
                        ...device,
                        roomDbId: !isNaN(parseInt(device.room_dbid))
                            ? parseInt(device.room_dbid)
                            : -1,
                        id: device.device_number,
                        position: isJSON(device.device_coordinate_3d)
                            ? JSON.parse(device.device_coordinate_3d)
                            : {}, // x: 0, y: 25, z: -2.5      (3.35, -4.81, 12.88
                        temp: 25,
                        forge_dbid: parseInt(device.forge_dbid),
                    },
                    deviceList: currentData.map((d) => ({
                        ...d,
                        roomDbId: !isNaN(parseInt(d.room_dbid))
                            ? parseInt(d.room_dbid)
                            : -1,
                        id: d.device_number,
                        position: isJSON(d.device_coordinate_3d)
                            ? JSON.parse(d.device_coordinate_3d)
                            : {}, // x: 0, y: 25, z: -2.5      (3.35, -4.81, 12.88
                        temp: 25,
                        forge_dbid: parseInt(d.forge_dbid),
                    })),
                });
            });
        }
    }

    function getHotspotPoint(callback = null) {
        let url = baseApiUrl + "/api/GetDevForCor";
        let sendData = {
            device_area_tag: pageAct.AreaTag,
            device_building_tag: pageAct.buiTag,
            device_system_tag: pageAct.sysMainTag,
            device_name_tag: pageAct.sysSubTag,
            device_floor_tag: pageAct.floTag,
        };
        objSendData.Data = sendData;
        ytAjax = new YourTeam.Ajax(
            url,
            objSendData,
            function (res) {
                if (!res || res.code != "0000" || !res.data) {
                } else {
                    let myDataList = [];
                    $.each(res.data, (idx, data) => {
                        if (lightControl == "node" && data.device_nodes.length > 0) {
                            data.device_nodes.forEach((node) => {
                                if (
                                    node.device_node_coordinate_3D != null &&
                                    isJSON(node.device_node_coordinate_3D)
                                ) {
                                    myDataList.push({
                                        ...node,
                                        position: JSON.parse(node.device_node_coordinate_3D),
                                    });
                                }
                            });
                        } else if (
                            data.device_coordinate_3d != null &&
                            isJSON(data.device_coordinate_3d)
                        ) {
                            myDataList.push({
                                ...data,
                                position: JSON.parse(data.device_coordinate_3d),
                            });
                        }
                    });

                    getLightData(myDataList);
                    setHotspotPoint(myDataList);
                    callback ? callback() : "";
                }
            },
            null,
            "POST"
        ).send();
    }

    function setHotspotPoint(myDataList = []) {
        getHopspotPoint(myDataList);
    }

    onEvent("autodesk:click:sprite", "#forgeViewer", function (e, obj) {
        forgeUnFocusAll();
        chartUnFocusAll();
        let rect = $("#forgeViewer")[0].getBoundingClientRect();
        let position = [rect.left + rect.width / 2, rect.top + rect.height / 4];
        // console.log(position)
        // let position = [obj.event.target.toolController.lastClickX, obj.event.target.toolController.lastClickY];
        let devObj = obj.myData;
        let name =
            lightControl === "node" && pageAct.sysSubTag === "L1"
                ? currentData.filter(
                    (x) => x.device_node_guid == devObj.device_node_guid
                )[0]?.device_node_full_name
                : currentData.filter((x) => x.device_guid == devObj.device_guid)[0]
                    ?.full_name;
        devObj.full_name = name;
        parentEle = crePosPopover(position, devObj);
        $(parentEle).click();

        let option = floChart.getOption();
        option.series.forEach(function (series) {
            series.data.forEach(function (point) {
                if (pageAct.sysSubTag === "L1") {
                    if (point.device_node_guid == devObj.device_node_guid) {
                        point.symbolSize = 50;
                    }
                } else {
                    if (point.device_guid == devObj.device_guid) {
                        point.symbolSize = 50;
                    }
                }
            });
        });
        floChart.setOption(option);
    });

    onEvent("autodesk:clickOut:sprite", "#forgeViewer", function (e) {
        $(parentEle).YTTooltip("hide");
    });

    function forgeUnFocusAll() {
        $.each(currentData, (idx, cData) => {
            const eleDbId = cData._dbId;
            if (alarmDbIdList.some((dbId) => dbId == eleDbId)) {
                changeScaleForHotspot(eleDbId, false);
                return;
            } else {
                // 3D 熱點解除
                controlFocusHotspot(eleDbId, false);
            }
        });
    }

    function chartUnFocusAll() {
        let option = floChart.getOption();
        option.series.forEach(function (series) {
            series.data.forEach(function (point) {
                point.symbolSize = 20;
            });
        });
        floChart.setOption(option);
    }

    // 解除 series 聚焦
    function chartUnFocus(ele) {
        let devGuid = $(ele).data("id");
        let option = floChart.getOption();
        option.series.forEach(function (series) {
            series.data.forEach(function (point) {
                if (point.device_guid == devGuid) {
                    point.symbolSize = 20;
                }
            });
        });
        floChart.setOption(option);
    }
</script>