ibms-dome/Frontend/_sysMonFloor.html

<style>
    [id^=yt_tooltip] {
        width: 450px;
    }
</style>

<div class="row">
    <div id="floChart" style="height : 80vh!important;width:100%"></div>
</div>


<script src="lib/echarts.min.js"></script>
<script>
    var floChart = null;

    $(function () {
        initChart();
        getFloData();
    })

    function getFloData() {

        let url = baseApiUrl + "/api/Device/GetDeviceList";
        let sendData = {
            main_system_tag: pageAct.sysMainTag,
            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}`);
            }
        }, null, "POST").send();

    }

    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.device_full_name}<br>
                //                    Guid：${params.data.device_guid}`
                //        }
                //    }
                //},
                toolbox: { //工具欄
                    show: false
                },
                geo: {
                    map: 'floor_svg',
                    roam: true,
                    scaleLimit: {  //限制放大縮小倍數
                        max: 32,
                        min: 2.5
                    },
                    layoutSize: '100%',
                    layoutCenter: [],
                    zoom: 2.5,
                    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);
            console.log(floChart)
            floChart.getZr().on('click', function (params) {
                console.log("click", params);
                var pixelPoint = [params.offsetX, params.offsetY];
                var dataPoint = floChart.convertFromPixel({ geoIndex: 0 }, pixelPoint);
                console.log(dataPoint);

                if (floor_map_mode == "edit") {

                    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);
            });

            //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
                        },
                    });
                }


            });

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