[Frontend]系統監控 tooltip show 取得原element 功能補上 | 部分功能註解補上
This commit is contained in:
		
							parent
							
								
									f359469e1f
								
							
						
					
					
						commit
						d9d2f27ba0
					
				@ -72,7 +72,7 @@
 | 
				
			|||||||
                    strHtml += `<button id="floItemBtn${floObj.full_name}" type="button" class="btn btn-primary waves-effect waves-themed mr-5">${floObj.full_name}</button>`
 | 
					                    strHtml += `<button id="floItemBtn${floObj.full_name}" type="button" class="btn btn-primary waves-effect waves-themed mr-5">${floObj.full_name}</button>`
 | 
				
			||||||
 | 
					
 | 
				
			||||||
                    $.each(floObj.device_list, (index2, devObj) => {
 | 
					                    $.each(floObj.device_list, (index2, devObj) => {
 | 
				
			||||||
                        strHtml += `<div name="devItem" data-id="${devObj.device_guid}" class="mr-5 cur-poi">
 | 
					                        strHtml += `<div name="devItem" data-id="${devObj.device_guid}" data-number="${devObj.device_number}" class="mr-5 cur-poi">
 | 
				
			||||||
                                        <span class="status status-success d-inline-block">
 | 
					                                        <span class="status status-success d-inline-block">
 | 
				
			||||||
                                            <img src="${baseImgUrl + varPathImg + devObj.device_master_icon}" class="profile-image rounded-circle" onerror="defDev(this)" alt="...">
 | 
					                                            <img src="${baseImgUrl + varPathImg + devObj.device_master_icon}" class="profile-image rounded-circle" onerror="defDev(this)" alt="...">
 | 
				
			||||||
                                        </span> ${devObj.full_name}
 | 
					                                        </span> ${devObj.full_name}
 | 
				
			||||||
@ -235,7 +235,8 @@
 | 
				
			|||||||
                                    </div>
 | 
					                                    </div>
 | 
				
			||||||
                                </div>`,
 | 
					                                </div>`,
 | 
				
			||||||
            group:"device",
 | 
					            group:"device",
 | 
				
			||||||
            onShow: function () {
 | 
					            onShow: function (tooltipEle, oriEle) {
 | 
				
			||||||
 | 
					                console.log($(oriEle).data("number"))
 | 
				
			||||||
                var tab = new YT.Tab({ tabName: "cardTab" })
 | 
					                var tab = new YT.Tab({ tabName: "cardTab" })
 | 
				
			||||||
                loadOpeRecTable();
 | 
					                loadOpeRecTable();
 | 
				
			||||||
            }
 | 
					            }
 | 
				
			||||||
 | 
				
			|||||||
@ -29,215 +29,223 @@
 | 
				
			|||||||
 | 
					
 | 
				
			||||||
    function chartHandler() {
 | 
					    function chartHandler() {
 | 
				
			||||||
        floChart.clear();
 | 
					        floChart.clear();
 | 
				
			||||||
        $.get(`${baseImgUrl}/upload/floor_map/c0de2199-e62b-4f82-b7f7-abacd4e1cd17.svg`, function (svg) {
 | 
					        /*let url = `${baseApiUrl}/upload/graph_manage/de08e7ee-9839-4403-90e5-754dec4e389b.jpg`*/
 | 
				
			||||||
 | 
					        let url = `${baseImgUrl}/upload/floor_map/2e5be49c-f8e8-4977-b5b6-db4d95ff9691.svg`
 | 
				
			||||||
 | 
					
 | 
				
			||||||
            if (svg == undefined || svg == null) {
 | 
					        download(url)
 | 
				
			||||||
                return;
 | 
					 | 
				
			||||||
            }
 | 
					 | 
				
			||||||
 | 
					
 | 
				
			||||||
            echarts.registerMap('floor_svg', { svg: svg });
 | 
					        //ytAjax = new YourTeam.Ajax(url, null, function (res) {
 | 
				
			||||||
 | 
					        //    if (svg == undefined || svg == null) {
 | 
				
			||||||
 | 
					        //        return;
 | 
				
			||||||
 | 
					        //    }
 | 
				
			||||||
 | 
					
 | 
				
			||||||
            option = {
 | 
					        //    echarts.registerMap('floor_svg', { svg: svg });
 | 
				
			||||||
                // 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: ['50%', '50%'],
 | 
					 | 
				
			||||||
                    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);
 | 
					        //    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: ['50%', '50%'],
 | 
				
			||||||
 | 
					        //            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.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);
 | 
					        //    floChart.setOption(option);
 | 
				
			||||||
 | 
					
 | 
				
			||||||
                currentData = $.map(currentData, function (item) {
 | 
					        //    floChart.getZr().on('click', function (params) {
 | 
				
			||||||
                    item.selected = false;
 | 
					        //        console.log("click", params);
 | 
				
			||||||
                    return item;
 | 
					        //        var pixelPoint = [params.offsetX, params.offsetY];
 | 
				
			||||||
                });
 | 
					        //        var dataPoint = floChart.convertFromPixel({ geoIndex: 0 }, pixelPoint);
 | 
				
			||||||
 | 
					        //        console.log(dataPoint);
 | 
				
			||||||
 | 
					
 | 
				
			||||||
                if (params.selected.length > 0) {
 | 
					        //        if (floor_map_mode == "edit") {
 | 
				
			||||||
                    currentData[params.selected[0].seriesIndex - 1].selected = true;
 | 
					
 | 
				
			||||||
                }
 | 
					        //            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
 | 
				
			||||||
 | 
					        //            }];
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					
 | 
				
			||||||
            });
 | 
					        //        }
 | 
				
			||||||
 | 
					 | 
				
			||||||
            // 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
 | 
					 | 
				
			||||||
                        },
 | 
					 | 
				
			||||||
                    });
 | 
					 | 
				
			||||||
                }
 | 
					 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					
 | 
				
			||||||
            });
 | 
					        //        // currentData.push([dataPoint[0], dataPoint[1], 1]);
 | 
				
			||||||
        })
 | 
					        //        // floChart.setOption(option);
 | 
				
			||||||
            .fail(function () {
 | 
					        //    });
 | 
				
			||||||
                toast_warning("查無該樓層地圖")
 | 
					
 | 
				
			||||||
                floChart.clear();
 | 
					        //    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
 | 
				
			||||||
 | 
					        //                },
 | 
				
			||||||
 | 
					        //            });
 | 
				
			||||||
 | 
					        //        }
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					        //    });
 | 
				
			||||||
 | 
					        //}).send();
 | 
				
			||||||
 | 
					        //$.get(`${baseImgUrl}/device/GetFloorSvg/c0de2199-e62b-4f82-b7f7-abacd4e1cd17.svg`, function (svg) {
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					            
 | 
				
			||||||
 | 
					        //})
 | 
				
			||||||
 | 
					        //    .fail(function () {
 | 
				
			||||||
 | 
					        //        toast_warning("查無該樓層地圖")
 | 
				
			||||||
 | 
					        //        floChart.clear();
 | 
				
			||||||
 | 
					        //    });
 | 
				
			||||||
    }
 | 
					    }
 | 
				
			||||||
</script>
 | 
					</script>
 | 
				
			||||||
@ -5,13 +5,18 @@
 | 
				
			|||||||
 | 
					
 | 
				
			||||||
})
 | 
					})
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					/** 
 | 
				
			||||||
 | 
					 * fn 定義 | 手動初始化 Bootstrap dropdown select 
 | 
				
			||||||
 | 
					 */
 | 
				
			||||||
$.fn.droSetItem = function () {
 | 
					$.fn.droSetItem = function () {
 | 
				
			||||||
    setDropdownItem(this);
 | 
					    setDropdownItem(this);
 | 
				
			||||||
    return this;
 | 
					    return this;
 | 
				
			||||||
}
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					/**
 | 
				
			||||||
 | 
					 * 設置 bootstrap dropdown 為下拉選單 
 | 
				
			||||||
 | 
					 * @param {any} menuEle .dropdown-menu element
 | 
				
			||||||
 | 
					 */
 | 
				
			||||||
function setDropdownItem(menuEle) {
 | 
					function setDropdownItem(menuEle) {
 | 
				
			||||||
    if ($(menuEle).find(".dropdown-item.active").length == 0) {
 | 
					    if ($(menuEle).find(".dropdown-item.active").length == 0) {
 | 
				
			||||||
        $(menuEle).find(".dropdown-item").first().addClass("active");
 | 
					        $(menuEle).find(".dropdown-item").first().addClass("active");
 | 
				
			||||||
@ -21,14 +26,19 @@ function setDropdownItem(menuEle) {
 | 
				
			|||||||
    let actEleId = $(menuEle).prop("id");
 | 
					    let actEleId = $(menuEle).prop("id");
 | 
				
			||||||
    $(`.dropdown-toggle[data-target=${actEleId}]`).text(actText);
 | 
					    $(`.dropdown-toggle[data-target=${actEleId}]`).text(actText);
 | 
				
			||||||
    $(menuEle).trigger("active:change", $(menuEle).find(".dropdown-item.active"));
 | 
					    $(menuEle).trigger("active:change", $(menuEle).find(".dropdown-item.active"));
 | 
				
			||||||
}
 | 
					 | 
				
			||||||
 | 
					
 | 
				
			||||||
onEvent("click", ".dropdown-menu.dropdown-select-menu .dropdown-item", function () {
 | 
					    //點選選項 add active class
 | 
				
			||||||
 | 
					    onEvent("click", ".dropdown-menu.dropdown-select-menu .dropdown-item", function () {
 | 
				
			||||||
        $(this).parent(".dropdown-menu.dropdown-select-menu").find(".dropdown-item").removeClass("active");
 | 
					        $(this).parent(".dropdown-menu.dropdown-select-menu").find(".dropdown-item").removeClass("active");
 | 
				
			||||||
        $(this).addClass("active");
 | 
					        $(this).addClass("active");
 | 
				
			||||||
        setDropdownItem($(this).parent(".dropdown-menu.dropdown-select-menu"));
 | 
					        setDropdownItem($(this).parent(".dropdown-menu.dropdown-select-menu"));
 | 
				
			||||||
})
 | 
					    })
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					/**
 | 
				
			||||||
 | 
					 * 預設設備圖像
 | 
				
			||||||
 | 
					 * @param {any} obj
 | 
				
			||||||
 | 
					 */
 | 
				
			||||||
function defDev(obj) {
 | 
					function defDev(obj) {
 | 
				
			||||||
    let defSrc = 'img/defdev.png';
 | 
					    let defSrc = 'img/defdev.png';
 | 
				
			||||||
    obj.src = defSrc;
 | 
					    obj.src = defSrc;
 | 
				
			||||||
 | 
				
			|||||||
@ -10,11 +10,14 @@
 | 
				
			|||||||
 * */
 | 
					 * */
 | 
				
			||||||
var YT = YT || {};
 | 
					var YT = YT || {};
 | 
				
			||||||
 | 
					
 | 
				
			||||||
var _ytTabInited = []
 | 
					var _ytTabInited = [];
 | 
				
			||||||
$(function () {
 | 
					 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					$(function () {
 | 
				
			||||||
})
 | 
					})
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					/**
 | 
				
			||||||
 | 
					 * 初始全頁面 yt tab
 | 
				
			||||||
 | 
					 * */
 | 
				
			||||||
function initTabsByEle() {
 | 
					function initTabsByEle() {
 | 
				
			||||||
    $("[data-tabname][data-target]:not([data-tabrole=child])").each(function (index, value) {
 | 
					    $("[data-tabname][data-target]:not([data-tabrole=child])").each(function (index, value) {
 | 
				
			||||||
        let tabName = $(value).data("tabname");
 | 
					        let tabName = $(value).data("tabname");
 | 
				
			||||||
@ -38,25 +41,24 @@ class YourTeamTab {
 | 
				
			|||||||
        }
 | 
					        }
 | 
				
			||||||
        this.event();
 | 
					        this.event();
 | 
				
			||||||
        $(`[data-tabname=${this.tabName}][data-tabrole=child]`).css("display", "none");
 | 
					        $(`[data-tabname=${this.tabName}][data-tabrole=child]`).css("display", "none");
 | 
				
			||||||
        $(`[data-tabname=${this.tabName}][data-target]`).first().trigger("click","fromInit");
 | 
					        $(`[data-tabname=${this.tabName}][data-target]`).first().trigger("click");
 | 
				
			||||||
        _ytTabInited.push(this.tabName);
 | 
					        _ytTabInited.push(this.tabName);
 | 
				
			||||||
    }
 | 
					    }
 | 
				
			||||||
 | 
					
 | 
				
			||||||
    event = function () {
 | 
					    event = function () {
 | 
				
			||||||
        let clsObj = this;
 | 
					        let clsObj = this;
 | 
				
			||||||
        // custom tab
 | 
					
 | 
				
			||||||
        // example : 
 | 
					        // Tab Item 按鈕 click
 | 
				
			||||||
        // <button id="test" data-target="#okDiv" data-tabname="tab1"></button>
 | 
					        $(`[data-tabname=${this.tabName}][data-target]`).off("click").on("click", function (e) {
 | 
				
			||||||
        // <div id="okDiv" data-tabrole="child" data-tabname="tab1"></div>
 | 
					 | 
				
			||||||
        $(`[data-tabname=${this.tabName}][data-target]`).off("click").on("click", function (e, arg) {
 | 
					 | 
				
			||||||
            console.log(e)
 | 
					 | 
				
			||||||
            let target = $(this).data("target");
 | 
					            let target = $(this).data("target");
 | 
				
			||||||
            let obj = this;
 | 
					            let obj = this;
 | 
				
			||||||
            $(`[data-tabname=${clsObj.tabName}][data-target]:not([data-tabrole=child])`).removeClass("active")
 | 
					            $(`[data-tabname=${clsObj.tabName}][data-target]:not([data-tabrole=child])`).removeClass("active");
 | 
				
			||||||
            $(obj).addClass("active")
 | 
					            $(obj).addClass("active");
 | 
				
			||||||
            $(obj).trigger("yt:tab:change")
 | 
					            // 觸發 yt:tab:change事件
 | 
				
			||||||
 | 
					            $(obj).trigger("yt:tab:change");
 | 
				
			||||||
            let tabName = $(target).data("tabname");
 | 
					            let tabName = $(target).data("tabname");
 | 
				
			||||||
            if (tabName) {
 | 
					            if (tabName) {
 | 
				
			||||||
 | 
					                // 找出該觸發對象 block
 | 
				
			||||||
                if ($(target).data("tabrole") == "child") {
 | 
					                if ($(target).data("tabrole") == "child") {
 | 
				
			||||||
                    $(obj).trigger("yt:tab:show");
 | 
					                    $(obj).trigger("yt:tab:show");
 | 
				
			||||||
                    $(`[data-tabname='${tabName}'][data-tabrole='child']`).css("opacity", 0).hide();
 | 
					                    $(`[data-tabname='${tabName}'][data-tabrole='child']`).css("opacity", 0).hide();
 | 
				
			||||||
 | 
				
			|||||||
@ -71,7 +71,7 @@ $.fn.YTTooltip = function (option) {
 | 
				
			|||||||
                obj.tooltipDiv = clone;
 | 
					                obj.tooltipDiv = clone;
 | 
				
			||||||
                //顯示 tooltip
 | 
					                //顯示 tooltip
 | 
				
			||||||
                $(clone).css({ "display": display, "position": "absolute" });
 | 
					                $(clone).css({ "display": display, "position": "absolute" });
 | 
				
			||||||
                obj.onShow ? obj.onShow(clone,obj) : "";
 | 
					                obj.onShow ? obj.onShow(clone,obj.ele,obj) : "";
 | 
				
			||||||
                //tooltip 高寬
 | 
					                //tooltip 高寬
 | 
				
			||||||
                let toolWidth = $(clone)[0].offsetWidth;
 | 
					                let toolWidth = $(clone)[0].offsetWidth;
 | 
				
			||||||
                let toolHeight = $(clone)[0].offsetHeight;
 | 
					                let toolHeight = $(clone)[0].offsetHeight;
 | 
				
			||||||
 | 
				
			|||||||
@ -182,7 +182,7 @@ namespace FrontendWebApi.ApiControllers
 | 
				
			|||||||
                foreach (var f in fl)
 | 
					                foreach (var f in fl)
 | 
				
			||||||
                {
 | 
					                {
 | 
				
			||||||
                    List<DeviceLists> dl = new List<DeviceLists>();
 | 
					                    List<DeviceLists> dl = new List<DeviceLists>();
 | 
				
			||||||
                    sqlString = $@"select d.device_guid, d.full_name, d.status, d.device_coordinate, dm.device_master_icon
 | 
					                    sqlString = $@"select d.device_guid, d.full_name, d.status, d.device_coordinate, dm.device_master_icon,d.device_number
 | 
				
			||||||
                                   from device d
 | 
					                                   from device d
 | 
				
			||||||
                                   left join device_master dm on d.device_building_tag = dm.device_building_tag and d.device_name_tag = dm.device_name_tag
 | 
					                                   left join device_master dm on d.device_building_tag = dm.device_building_tag and d.device_name_tag = dm.device_name_tag
 | 
				
			||||||
                                   where d.deleted = 0 and d.device_system_tag = @main_system_tag and d.device_building_tag = @building_tag and d.device_floor_tag = ifnull(@floor_tag, d.device_floor_tag)";
 | 
					                                   where d.deleted = 0 and d.device_system_tag = @main_system_tag and d.device_building_tag = @building_tag and d.device_floor_tag = ifnull(@floor_tag, d.device_floor_tag)";
 | 
				
			||||||
 | 
				
			|||||||
@ -30,6 +30,7 @@ namespace FrontendWebApi.Models
 | 
				
			|||||||
    public class DeviceLists
 | 
					    public class DeviceLists
 | 
				
			||||||
    {
 | 
					    {
 | 
				
			||||||
        public string device_guid { get; set; }
 | 
					        public string device_guid { get; set; }
 | 
				
			||||||
 | 
					        public string device_number { get; set; }
 | 
				
			||||||
        public string full_name { get; set; }
 | 
					        public string full_name { get; set; }
 | 
				
			||||||
        public string device_coordinate { get; set; }
 | 
					        public string device_coordinate { get; set; }
 | 
				
			||||||
        public string device_coordinate_3d { get; set; }
 | 
					        public string device_coordinate_3d { get; set; }
 | 
				
			||||||
 | 
				
			|||||||
										
											
												File diff suppressed because one or more lines are too long
											
										
									
								
							| 
		 After Width: | Height: | Size: 2.0 MiB  | 
		Loading…
	
		Reference in New Issue
	
	Block a user