[Frontend][系統監控] 平面圖 熱點程序建置 | 3D 熱點 focus 程序建置 | 2D平面圖 設備圓點 打開 popover 程序建置 | 2D平面圖圓點與3D熱點互動程序建置 | 2D 平面圖剖面熱圖程序建置 | 總攬 3D 熱圖串接資料庫程序建置 | 3D 熱圖 串接訂閱程序建置
This commit is contained in:
		
							parent
							
								
									d059763692
								
							
						
					
					
						commit
						93e57c3086
					
				@ -36,7 +36,7 @@
 | 
			
		||||
 | 
			
		||||
<script>
 | 
			
		||||
    var allDevList = [];  //全設備清單
 | 
			
		||||
    var devicePointList = [];
 | 
			
		||||
    var heatMap = null;
 | 
			
		||||
 | 
			
		||||
    $(function () {
 | 
			
		||||
        getBuildMenu((arr, data) => {
 | 
			
		||||
@ -110,8 +110,12 @@
 | 
			
		||||
                let errDevPoiName = matchDevice.device_error_point_name;
 | 
			
		||||
               
 | 
			
		||||
                if (data.point_name == "Temp") {
 | 
			
		||||
                    
 | 
			
		||||
                    console.log(data)
 | 
			
		||||
                    heatMap?.changeTemp(data.device_number_full, !isNaN(parseInt(data.value)) ? parseInt(data.value) : 0);
 | 
			
		||||
                    let devIdx = allDevList.findIndex(x => x.device_number == data.device_number_full);
 | 
			
		||||
                    allDevList[devIdx]._temp = !isNaN(parseInt(data.value)) ? parseInt(data.value) : 0;
 | 
			
		||||
                }
 | 
			
		||||
                
 | 
			
		||||
                if (data.point_name == norDevPoiName && data.value == matchDevice.device_normal_point_value) {
 | 
			
		||||
                    //顯示正常燈號
 | 
			
		||||
                    $(`#${matchDevice.device_number}_status`).attr("data-light-type", "normal").data("light-type", "normal");
 | 
			
		||||
@ -205,7 +209,7 @@
 | 
			
		||||
                    subDevice();
 | 
			
		||||
                }
 | 
			
		||||
                $("#floDevList").append(strHtml);
 | 
			
		||||
                initPopover(pageAct.sysMainTag == "LT" ? "light" : null);
 | 
			
		||||
                initPopover();
 | 
			
		||||
            }
 | 
			
		||||
        }, null, "POST").send();
 | 
			
		||||
    }
 | 
			
		||||
@ -259,32 +263,24 @@
 | 
			
		||||
 | 
			
		||||
    function show3DModel(urn) {
 | 
			
		||||
        launchViewerForHotspot(urn, (viewer, nodeIds) => {
 | 
			
		||||
            let devices = [{
 | 
			
		||||
                roomDbId: 7567,
 | 
			
		||||
                id: "Oficina 5",
 | 
			
		||||
                //name: "Oficina-",
 | 
			
		||||
                position: { x: 3.35, y: -4.81, z: 12.88 }, // x: 0, y: 25, z: -2.5      (3.35, -4.81, 12.88
 | 
			
		||||
                sensorTypes: ["temperature", "humidity"]
 | 
			
		||||
            }, {
 | 
			
		||||
                roomDbId: 7567,
 | 
			
		||||
                id: "Oficina 6",
 | 
			
		||||
                //name: "Oficina-",
 | 
			
		||||
                position: { x: 4.35, y: -4.81, z: 11.88 }, // x: 0, y: 25, z: -2.5      (3.35, -4.81, 12.88
 | 
			
		||||
                sensorTypes: ["temperature", "humidity"]
 | 
			
		||||
            }, {
 | 
			
		||||
                roomDbId: 7567,
 | 
			
		||||
                id: "Oficina 7",
 | 
			
		||||
                //name: "Oficina-",
 | 
			
		||||
                position: { x: 6.35, y: -4.81, z: 16.88 }, // x: 0, y: 25, z: -2.5      (3.35, -4.81, 12.88
 | 
			
		||||
                sensorTypes: ["temperature", "humidity"]
 | 
			
		||||
            }];
 | 
			
		||||
            let devices = allDevList.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,
 | 
			
		||||
            }
 | 
			
		||||
            let heatMap = new ADHeatMaps(option);
 | 
			
		||||
            
 | 
			
		||||
            heatMap.onComplete = function () {
 | 
			
		||||
                heatMap.changeTemp(7567, 32);
 | 
			
		||||
            heatMap = new ADHeatMaps(option);
 | 
			
		||||
            heatMap.onComplete = () => {
 | 
			
		||||
                $.each(allDevList, (idx,dev) => {
 | 
			
		||||
                    heatMap.changeTemp(dev.device_number, dev._temp || 0);
 | 
			
		||||
                })
 | 
			
		||||
            }
 | 
			
		||||
            
 | 
			
		||||
        },"[name=forgeViewer]");
 | 
			
		||||
@ -330,22 +326,14 @@
 | 
			
		||||
    
 | 
			
		||||
    var parentEle = "";
 | 
			
		||||
    onEvent("autodesk:click:sprite", "[name=forgeViewer]", function (e, obj) {
 | 
			
		||||
        let position = {};
 | 
			
		||||
        position.tpLeft = obj.event.target.toolController.lastClickX;
 | 
			
		||||
        position.tpTop = obj.event.target.toolController.lastClickY;
 | 
			
		||||
        position.tpOffHeight = 24;
 | 
			
		||||
        parentEle = creDiv();
 | 
			
		||||
        forgeUnFocusAll();
 | 
			
		||||
        let position = [obj.event.target.toolController.lastClickX, obj.event.target.toolController.lastClickY];
 | 
			
		||||
        let devObj = obj.myData;
 | 
			
		||||
        parentEle.append(`<a href="javascript:;" name="devItem" class=" ml-2 mb-0 ">詳細資料</a>`);
 | 
			
		||||
        parentEle.data("id", devObj.device_guid);
 | 
			
		||||
        parentEle.data("number", devObj.device_number);
 | 
			
		||||
        parentEle.data("dbId", devObj._dbId);
 | 
			
		||||
        let name = allDevList.filter(x => x.device_guid == devObj.device_guid)[0]?.full_name;
 | 
			
		||||
        parentEle.data("name", name);
 | 
			
		||||
        devObj.full_name = name;
 | 
			
		||||
        parentEle = crePosPopover(position, devObj);
 | 
			
		||||
        
 | 
			
		||||
        initPopover(pageAct.sysMainTag == "LT" ? "light" : null, position, parentEle);
 | 
			
		||||
        $(parentEle).click();
 | 
			
		||||
       
 | 
			
		||||
    })
 | 
			
		||||
 | 
			
		||||
    onEvent("autodesk:clickOut:sprite", "[name=forgeViewer]", function (e) {
 | 
			
		||||
@ -358,7 +346,15 @@
 | 
			
		||||
            let dbid = obj.myDataList.filter(x => x.device_number == devNum)[0]?._dbId;
 | 
			
		||||
            $(ele).data("dbId", dbid);
 | 
			
		||||
        })
 | 
			
		||||
       
 | 
			
		||||
    })
 | 
			
		||||
    
 | 
			
		||||
    onEvent("yt:tooltip:show", "[name=devItem]", function (e, obj) {
 | 
			
		||||
        forgeUnFocusAll();
 | 
			
		||||
    })
 | 
			
		||||
 | 
			
		||||
    function forgeUnFocusAll() {
 | 
			
		||||
        $("#floDevList a[name=devItem]").each((idx, ele) => {
 | 
			
		||||
            controlFocusHotspot($(ele).data("dbId"), false);
 | 
			
		||||
        })
 | 
			
		||||
    }
 | 
			
		||||
</script>
 | 
			
		||||
@ -22,9 +22,12 @@
 | 
			
		||||
    </div>
 | 
			
		||||
</div>
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
<!--<script src="lib/echarts.min.js"></script>-->
 | 
			
		||||
<script>
 | 
			
		||||
    var floChart = null;
 | 
			
		||||
    var currentData = [];
 | 
			
		||||
    var heatMap = null;
 | 
			
		||||
    var allDeviceRowData = []; //所有設備原始資料
 | 
			
		||||
    var global_emergency_alarm_device_number = [];
 | 
			
		||||
    var zoomToggle = 3;
 | 
			
		||||
@ -140,7 +143,6 @@
 | 
			
		||||
            }
 | 
			
		||||
            return item;
 | 
			
		||||
        });
 | 
			
		||||
        console.log(currentData)
 | 
			
		||||
        if (currentData == null || currentData.length == 0) {
 | 
			
		||||
            this.currentData = [];
 | 
			
		||||
        }
 | 
			
		||||
@ -176,7 +178,6 @@
 | 
			
		||||
                // animationDurationUpdate: 1500,
 | 
			
		||||
                tooltip: {
 | 
			
		||||
                    formatter: function (params) {
 | 
			
		||||
                        console.log("23", 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}`
 | 
			
		||||
@ -314,24 +315,41 @@
 | 
			
		||||
            }
 | 
			
		||||
            //myBaja.setSubscribeDevicesByBql(ordPath);
 | 
			
		||||
            //myBaja.setSubscribeDevicesCallBack(subscribeCallBack);
 | 
			
		||||
            let parentEle = null;
 | 
			
		||||
            floChart.on('click', function (params) {
 | 
			
		||||
                forgeUnFocusAll();
 | 
			
		||||
                chartUnFocusAll();
 | 
			
		||||
                if (params.componentType == "series") {
 | 
			
		||||
                    let data = params.data;
 | 
			
		||||
                    let position = [params.event.event.clientX, params.event.event.clientY];
 | 
			
		||||
                    data._dbId = data._dbId ?? null;
 | 
			
		||||
                    parentEle = crePosPopover(position, data);
 | 
			
		||||
 | 
			
		||||
                    $(parentEle).click();
 | 
			
		||||
                } else {
 | 
			
		||||
                    $(parentEle).YTTooltip("hide");
 | 
			
		||||
                }
 | 
			
		||||
            })
 | 
			
		||||
 | 
			
		||||
            console.log(floChart)
 | 
			
		||||
            floChart.getZr().on('click', function (params) {
 | 
			
		||||
                console.log("click", params);
 | 
			
		||||
                /*console.log("click", params);*/
 | 
			
		||||
                var pixelPoint = [params.offsetX, params.offsetY];
 | 
			
		||||
                var dataPoint = floChart.convertFromPixel({ geoIndex: 0 }, pixelPoint);
 | 
			
		||||
                console.log(dataPoint);
 | 
			
		||||
                
 | 
			
		||||
                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
 | 
			
		||||
                }];
 | 
			
		||||
                //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
 | 
			
		||||
                //}];
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
@ -341,6 +359,23 @@
 | 
			
		||||
                // floChart.setOption(option);
 | 
			
		||||
            });
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
            onEvent("autodesk:complete:sprite", "#forgeViewer", function (e, obj) {
 | 
			
		||||
                let option = floChart.getOption();
 | 
			
		||||
 | 
			
		||||
                option.series.forEach(function (series) {
 | 
			
		||||
                    series.data.forEach(function (point) {
 | 
			
		||||
                        let dbid = obj.myDataList.filter(x => x.device_number == point.device_number)[0]?._dbId;
 | 
			
		||||
                        point._dbId = dbid;
 | 
			
		||||
                        currentData.forEach(function (cData) { 
 | 
			
		||||
                            if (cData.device_guid == point.device_guid) {
 | 
			
		||||
                                cData._dbId = dbid;
 | 
			
		||||
                            }
 | 
			
		||||
                        })
 | 
			
		||||
                    });
 | 
			
		||||
                });
 | 
			
		||||
                floChart.setOption(option)
 | 
			
		||||
            })
 | 
			
		||||
            //floChart.on('selectchanged', function (params) {
 | 
			
		||||
 | 
			
		||||
            //    console.log("selectchanged", params);
 | 
			
		||||
@ -404,8 +439,7 @@
 | 
			
		||||
            }
 | 
			
		||||
            floMyBaja.setSubscribeDevicesByBql(ordPath);
 | 
			
		||||
            floMyBaja.setSubscribeDevicesCallBack(function (data) {
 | 
			
		||||
                console.log(data)
 | 
			
		||||
                let matchDevice = allDeviceRowData.filter(x => x.device_number == data.device_number_full)[0];
 | 
			
		||||
                let matchDevice = currentData.filter(x => x.device_number == data.device_number_full)[0];
 | 
			
		||||
                if (!matchDevice) {
 | 
			
		||||
                    return false;
 | 
			
		||||
                }
 | 
			
		||||
@ -413,6 +447,12 @@
 | 
			
		||||
                let cloDevPoiName = matchDevice.device_close_point_name;
 | 
			
		||||
                let errDevPoiName = matchDevice.device_error_point_name;
 | 
			
		||||
 | 
			
		||||
                if (data.point_name == "Temp") {
 | 
			
		||||
                    heatMap?.changeTemp(data.device_number_full, !isNaN(parseInt(data.value)) ? parseInt(data.value) : 0);
 | 
			
		||||
                    let devIdx = currentData.findIndex(x => x.device_number == data.device_number_full);
 | 
			
		||||
                    currentData[devIdx]._temp = !isNaN(parseInt(data.value)) ? parseInt(data.value) : 0;
 | 
			
		||||
                }
 | 
			
		||||
 | 
			
		||||
                if (data.point_name == norDevPoiName && data.value == matchDevice.device_normal_point_value) {
 | 
			
		||||
                    //顯示正常燈號
 | 
			
		||||
                    $(`#${matchDevice.device_number}_status`).attr("data-light-type", "normal").data("light-type", "normal");
 | 
			
		||||
@ -605,6 +645,13 @@
 | 
			
		||||
            //         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) {
 | 
			
		||||
 | 
			
		||||
@ -618,7 +665,8 @@
 | 
			
		||||
                    status: item.status,
 | 
			
		||||
                    value: item.value,
 | 
			
		||||
                    deviceItems: item.deviceItems,
 | 
			
		||||
                    deviceURL: item.deviceURL
 | 
			
		||||
                    deviceURL: item.deviceURL,
 | 
			
		||||
                    _dbId: item._dbId ?? null
 | 
			
		||||
                }
 | 
			
		||||
 | 
			
		||||
                obj.itemStyle = { 'color': item.device_color };
 | 
			
		||||
@ -626,6 +674,7 @@
 | 
			
		||||
                res.push(obj);
 | 
			
		||||
            });
 | 
			
		||||
            
 | 
			
		||||
           
 | 
			
		||||
            return res;
 | 
			
		||||
        }
 | 
			
		||||
 | 
			
		||||
@ -830,7 +879,7 @@
 | 
			
		||||
            floChart.setOption({
 | 
			
		||||
                series: [{
 | 
			
		||||
                    symbolOffset: [0, 0],
 | 
			
		||||
                    data: scatter_symbol_convertData(currentData) //正常、關閉(圓點)
 | 
			
		||||
                    data: scatter_symbol_convertData(currentData), //正常、關閉(圓點)
 | 
			
		||||
                }, {
 | 
			
		||||
                    data: [] //正常、關閉(icon)
 | 
			
		||||
                }, {
 | 
			
		||||
@ -864,15 +913,69 @@
 | 
			
		||||
        }
 | 
			
		||||
    }
 | 
			
		||||
 | 
			
		||||
    function getNextFloor(floGuid = null) {
 | 
			
		||||
        
 | 
			
		||||
        let url = baseApiUrl + "/api/Device/GetNextFloor";
 | 
			
		||||
        objSendData.Data = { floor_guid: floGuid }
 | 
			
		||||
        let result = "";
 | 
			
		||||
        ytAjax = new YourTeam.Ajax(url, objSendData, function (res) {
 | 
			
		||||
            if (!res || res.code != "0000" || !res.data) {
 | 
			
		||||
 | 
			
		||||
            } else {
 | 
			
		||||
                result = res.data?.full_name;
 | 
			
		||||
            }
 | 
			
		||||
        }, null, "POST").send();
 | 
			
		||||
 | 
			
		||||
        return result;
 | 
			
		||||
    }
 | 
			
		||||
 | 
			
		||||
    // show 3D 模型
 | 
			
		||||
    function show3DModel(urn) {
 | 
			
		||||
        launchViewerForHotspot(urn, (viewer, nodeIds) => {
 | 
			
		||||
            getLevelsData("R2F", "RF");//剖面的下方樓層,剖面的上方樓層
 | 
			
		||||
            var roomsArr = [10481, 10479];//七樓的兩間房間dbid
 | 
			
		||||
            toLoadHeatmap(roomsArr);
 | 
			
		||||
            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);
 | 
			
		||||
            setHeatMap();
 | 
			
		||||
        });
 | 
			
		||||
    }
 | 
			
		||||
 | 
			
		||||
    function setHeatMap() {
 | 
			
		||||
        console.log("currentData", currentData)
 | 
			
		||||
        let devices = currentData.map(x => {
 | 
			
		||||
            return {
 | 
			
		||||
                roomDbId: !isNaN(parseInt(x.room_dbid)) ? parseInt(x.room_dbid) : -1,
 | 
			
		||||
                id: x.device_number,
 | 
			
		||||
                position: isJSON(x.device_coordinate_3d) ? JSON.parse(x.device_coordinate_3d) : {}, // x: 0, y: 25, z: -2.5      (3.35, -4.81, 12.88
 | 
			
		||||
                sensorTypes: ["temperature", "humidity"]
 | 
			
		||||
            }
 | 
			
		||||
        })
 | 
			
		||||
 | 
			
		||||
        let option = {
 | 
			
		||||
            devices: devices,
 | 
			
		||||
        }
 | 
			
		||||
 | 
			
		||||
        heatMap = new ADHeatMaps(option);
 | 
			
		||||
        heatMap.onComplete = () => {
 | 
			
		||||
            
 | 
			
		||||
            $.each(currentData, (idx, dev) => {
 | 
			
		||||
                heatMap.changeTemp(dev.device_number, dev._temp || 0);
 | 
			
		||||
            })
 | 
			
		||||
        }
 | 
			
		||||
    }
 | 
			
		||||
 | 
			
		||||
    function getHotspotPoint(callback = null) {
 | 
			
		||||
        let url = baseApiUrl + "/api/GetDevForCor";
 | 
			
		||||
        let sendData = {
 | 
			
		||||
@ -887,7 +990,6 @@
 | 
			
		||||
            if (!res || res.code != "0000" || !res.data) {
 | 
			
		||||
 | 
			
		||||
            } else {
 | 
			
		||||
                debugger
 | 
			
		||||
                let myDataList = [];
 | 
			
		||||
                $.each(res.data, (idx, data) => {
 | 
			
		||||
                    let item = {};
 | 
			
		||||
@ -899,7 +1001,6 @@
 | 
			
		||||
                    myDataList.push(item);
 | 
			
		||||
                })
 | 
			
		||||
                
 | 
			
		||||
                console.log("1", myDataList)
 | 
			
		||||
                setHotspotPoint(myDataList);
 | 
			
		||||
                callback ? callback() : "";
 | 
			
		||||
            }
 | 
			
		||||
@ -908,7 +1009,62 @@
 | 
			
		||||
    }
 | 
			
		||||
 | 
			
		||||
    function setHotspotPoint(myDataList = []) {
 | 
			
		||||
        console.log(myDataList)
 | 
			
		||||
        getHopspotPoint(myDataList);
 | 
			
		||||
    }
 | 
			
		||||
 | 
			
		||||
    onEvent("autodesk:click:sprite", "#forgeViewer", function (e, obj) {
 | 
			
		||||
        forgeUnFocusAll();
 | 
			
		||||
        chartUnFocusAll();
 | 
			
		||||
        let position = [obj.event.target.toolController.lastClickX, obj.event.target.toolController.lastClickY];
 | 
			
		||||
        let devObj = obj.myData;
 | 
			
		||||
        let name = currentData.filter(x => x.device_guid == devObj.device_guid)[0]?.full_name;
 | 
			
		||||
        devObj.full_name = name;
 | 
			
		||||
        parentEle = crePosPopover(position, devObj);
 | 
			
		||||
        $(parentEle).click();
 | 
			
		||||
        
 | 
			
		||||
        let option = floChart.getOption();
 | 
			
		||||
        option.series.forEach(function (series) {
 | 
			
		||||
            series.data.forEach(function (point) {
 | 
			
		||||
                if (point.device_guid == devObj.device_guid) {
 | 
			
		||||
                    point.symbolSize = 50;
 | 
			
		||||
                }
 | 
			
		||||
            });
 | 
			
		||||
        });
 | 
			
		||||
        floChart.setOption(option);
 | 
			
		||||
        
 | 
			
		||||
    })
 | 
			
		||||
 | 
			
		||||
    onEvent("autodesk:clickOut:sprite", "#forgeViewer", function (e) {
 | 
			
		||||
        $(parentEle).YTTooltip("hide");
 | 
			
		||||
    })
 | 
			
		||||
 | 
			
		||||
    function forgeUnFocusAll() {
 | 
			
		||||
        $.each(currentData, (idx, cData) => {
 | 
			
		||||
            controlFocusHotspot(cData._dbId, false);
 | 
			
		||||
        })
 | 
			
		||||
    }
 | 
			
		||||
    
 | 
			
		||||
    function chartUnFocusAll() {
 | 
			
		||||
        let option = floChart.getOption();
 | 
			
		||||
        option.series.forEach(function (series) {
 | 
			
		||||
            series.data.forEach(function (point) {
 | 
			
		||||
                point.symbolSize = 10;
 | 
			
		||||
            });
 | 
			
		||||
        });
 | 
			
		||||
        floChart.setOption(option);
 | 
			
		||||
    }
 | 
			
		||||
 | 
			
		||||
    // 解除 series 聚焦 
 | 
			
		||||
    function chartUnFocus(ele) {
 | 
			
		||||
        let devGuid = $(ele).data("id");
 | 
			
		||||
        let option = floChart.getOption();
 | 
			
		||||
        option.series.forEach(function (series) {
 | 
			
		||||
            series.data.forEach(function (point) {
 | 
			
		||||
                if (point.device_guid == devGuid) {
 | 
			
		||||
                    point.symbolSize = 10;
 | 
			
		||||
                }
 | 
			
		||||
            });
 | 
			
		||||
        });
 | 
			
		||||
        floChart.setOption(option);
 | 
			
		||||
    }
 | 
			
		||||
</script>
 | 
			
		||||
@ -25,15 +25,16 @@
 | 
			
		||||
    })
 | 
			
		||||
 | 
			
		||||
    onEvent("yt:tab:change", "[name=floBtn]", function () {
 | 
			
		||||
        debugger
 | 
			
		||||
        $.each(tolSubList, (idx, sub) => {
 | 
			
		||||
                        sub.unsubscribeAll();
 | 
			
		||||
                        sub.detach();
 | 
			
		||||
                    })
 | 
			
		||||
                    tolSubList=[];
 | 
			
		||||
            sub.unsubscribeAll();
 | 
			
		||||
            sub.detach();
 | 
			
		||||
        })
 | 
			
		||||
        tolSubList=[];
 | 
			
		||||
        pageAct.floTag = $(this).data("id");
 | 
			
		||||
        pageAct.floGuid = $(this).data("guid");
 | 
			
		||||
        if ($(this).data("id") == "all") {
 | 
			
		||||
            pageAct.floTag = null;
 | 
			
		||||
            pageAct.floGuid = null;
 | 
			
		||||
            $("#js-page-content").load("_sysMonAll.html", loadCallback);
 | 
			
		||||
        } else {
 | 
			
		||||
            $("#js-page-content").load("_sysMonFloor.html", loadCallback);
 | 
			
		||||
@ -55,7 +56,7 @@
 | 
			
		||||
            } else {
 | 
			
		||||
                let strHtml = `<button name="floBtn" data-id="all" type="button" class="btn btn-secondary waves-effect waves-themed btn-sm-2" data-tabname="floor" data-target="all">總覽</button>`;
 | 
			
		||||
                $.each(res.data, (index, floObj) => {
 | 
			
		||||
                    strHtml += `<button name="floBtn" data-id="${floObj.floor_tag}" class="btn btn-secondary waves-effect waves-themed btn-sm-2" data-tabname="floor" data-target="${floObj.floor_tag}">${floObj.floor_tag}</button>`;
 | 
			
		||||
                    strHtml += `<button name="floBtn" data-id="${floObj.floor_tag}" data-guid="${floObj.floor_guid}" class="btn btn-secondary waves-effect waves-themed btn-sm-2" data-tabname="floor" data-target="${floObj.floor_tag}">${floObj.floor_tag}</button>`;
 | 
			
		||||
                })
 | 
			
		||||
                $("#floList").html(strHtml);
 | 
			
		||||
                floList = res.data;
 | 
			
		||||
 | 
			
		||||
@ -2043,6 +2043,7 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
 | 
			
		||||
        }
 | 
			
		||||
        // 執行初步 Loading
 | 
			
		||||
        var loadEle = pageLoading();
 | 
			
		||||
        var errRecTable = null, opeRecTable = null;
 | 
			
		||||
 | 
			
		||||
        /**
 | 
			
		||||
        * 頁面 Loading 建立
 | 
			
		||||
@ -2363,7 +2364,11 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
 | 
			
		||||
            }
 | 
			
		||||
 | 
			
		||||
            // Card 呈現初始化
 | 
			
		||||
            function initPopover(type = null, extOption = {},selector = "[name=devItem]") {
 | 
			
		||||
            function initPopover(type = null, extOption = {}, selector = "[name=devItem]") {
 | 
			
		||||
                if (type == null && pageAct.sysMainTag == "LT") {
 | 
			
		||||
                    type = "light";
 | 
			
		||||
                }
 | 
			
		||||
 | 
			
		||||
                $(selector).each((index, ele) => {
 | 
			
		||||
                    let devNum = $(ele).data("number"); //設備編號
 | 
			
		||||
                    let devGuid = $(ele).data("id"); //guid
 | 
			
		||||
@ -2409,13 +2414,15 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
 | 
			
		||||
                            //loadErrRecTable();
 | 
			
		||||
                            loadErr($(oriEle).data("number"));
 | 
			
		||||
                            $(tooltipEle).find("#info").html(typeof drawInfoTabBlo != "undefined" ? drawInfoTabBlo(devGuid) : "");
 | 
			
		||||
                            changeColorForHotspot($(oriEle).data("dbId"));
 | 
			
		||||
                            changeScaleForHotspot($(oriEle).data("dbId"));
 | 
			
		||||
                            typeof subDeviceSetTable != "undefined " ? subDeviceSetTable($(oriEle).data("number")) : ""
 | 
			
		||||
                            if ($(oriEle).data("dbId")) { 
 | 
			
		||||
                                controlFocusHotspot($(oriEle).data("dbId"));
 | 
			
		||||
                            }
 | 
			
		||||
                            typeof subDeviceSetTable != "undefined" ? subDeviceSetTable($(oriEle).data("number")) : ""
 | 
			
		||||
                        },
 | 
			
		||||
                        onHide: function (tooltipEle, oriEle) {
 | 
			
		||||
                            changeColorForHotspot($(oriEle).data("dbId"),false);
 | 
			
		||||
                            changeScaleForHotspot($(oriEle).data("dbId"),false);
 | 
			
		||||
                            controlFocusHotspot($(oriEle).data("dbId"),false);
 | 
			
		||||
                            // sysMonFloor Echart 解除 focus
 | 
			
		||||
                            typeof chartUnFocus != "undefined" ? chartUnFocus(oriEle) : "";
 | 
			
		||||
                        }
 | 
			
		||||
                    };
 | 
			
		||||
 | 
			
		||||
@ -2427,7 +2434,9 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
 | 
			
		||||
 | 
			
		||||
            // Card - 運維紀錄 Table
 | 
			
		||||
            function loadOpeRecTable(devGuid) {
 | 
			
		||||
 | 
			
		||||
                if (opeRecTable) {
 | 
			
		||||
                    opeRecTable.destroy();
 | 
			
		||||
                }
 | 
			
		||||
                let url = baseApiUrl + "/api/Device/GetOpeDevice?device_guid=" + devGuid;
 | 
			
		||||
                let tag = "#opeRecTable";
 | 
			
		||||
 | 
			
		||||
@ -2461,7 +2470,7 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
 | 
			
		||||
 | 
			
		||||
                ];
 | 
			
		||||
 | 
			
		||||
                let opeRecTable = new YourTeam.JqDataTables.getTableByAjax(url, tag, null, columns, column_defs, null, null, null, null, null, null, "tpi");
 | 
			
		||||
                opeRecTable = new YourTeam.JqDataTables.getTableByAjax(url, tag, null, columns, column_defs, null, null, null, null, null, null, "tpi");
 | 
			
		||||
            }
 | 
			
		||||
 | 
			
		||||
            function loadLightSchTable(devGuid) {
 | 
			
		||||
@ -2525,12 +2534,16 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
 | 
			
		||||
                let lightSchTable = new YourTeam.JqDataTables.getTableByAjax(url, tag, null, columns, column_defs, null, null, null, null, null, null, "tpi");
 | 
			
		||||
            }
 | 
			
		||||
 | 
			
		||||
            function controlFocusHotspot(dbId,open = true) {
 | 
			
		||||
                changeColorForHotspot(dbId, open);
 | 
			
		||||
                changeScaleForHotspot(dbId, open);
 | 
			
		||||
            }
 | 
			
		||||
 | 
			
		||||
            // Baja 取得異常紀錄
 | 
			
		||||
            function loadErr(allPath) {
 | 
			
		||||
                if (allPath != undefined && allPath != null) {
 | 
			
		||||
                    let _pathArr = allPath.split("_");//TPE_B1_ELEV_EL_R2F_NA_ELEV1_N1
 | 
			
		||||
                    let _devicePath = _pathArr[0] + "_" + _pathArr[1] + "_" + _pathArr[2] + "_" + _pathArr[3] + "_" + _pathArr[4] + "_" + _pathArr[5];
 | 
			
		||||
                    getOneDeviceAlarmTop10ByBaja(_devicePath, callbackForErr);
 | 
			
		||||
                  
 | 
			
		||||
                    getOneDeviceAlarmTop10ByBaja(allPath, callbackForErr);
 | 
			
		||||
                }
 | 
			
		||||
                else {
 | 
			
		||||
                    console.log("no device");
 | 
			
		||||
@ -2539,6 +2552,10 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
 | 
			
		||||
 | 
			
		||||
            // Card - 異常紀錄 Table
 | 
			
		||||
            function callbackForErr(result) {
 | 
			
		||||
                if (errRecTable) {
 | 
			
		||||
                    errRecTable.destroy();
 | 
			
		||||
                }
 | 
			
		||||
 | 
			
		||||
                let tag = "#errRecTable";
 | 
			
		||||
                let datas;
 | 
			
		||||
 | 
			
		||||
@ -2607,6 +2624,22 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
 | 
			
		||||
                })
 | 
			
		||||
            }
 | 
			
		||||
 | 
			
		||||
            function crePosPopover(position, obj) {
 | 
			
		||||
                let _position = {};
 | 
			
		||||
                _position.tpLeft = position[0];
 | 
			
		||||
                _position.tpTop = position[1];
 | 
			
		||||
                _position.tpOffHeight = 24;
 | 
			
		||||
                let parentEle = creDiv();
 | 
			
		||||
                parentEle.append(`<a href="javascript:;" name="devItem" class=" ml-2 mb-0 ">詳細資料</a>`);
 | 
			
		||||
                parentEle.data("id", obj.device_guid);
 | 
			
		||||
                parentEle.data("number", obj.device_number);
 | 
			
		||||
                parentEle.data("dbId", obj._dbId);
 | 
			
		||||
                parentEle.data("name", obj.full_name);
 | 
			
		||||
                initPopover(null, _position, parentEle);
 | 
			
		||||
 | 
			
		||||
                return parentEle;
 | 
			
		||||
            }
 | 
			
		||||
 | 
			
		||||
            //==============================================================================
 | 
			
		||||
            //                       ↑  系統監控 - 共用 Function ↑
 | 
			
		||||
            //==============================================================================
 | 
			
		||||
 | 
			
		||||
@ -1,9 +1,10 @@
 | 
			
		||||
var viewer;
 | 
			
		||||
 | 
			
		||||
let fragProxy;
 | 
			
		||||
var targetFloorZ;
 | 
			
		||||
var elevatorSpeed;
 | 
			
		||||
var selector = "#forgeViewer";
 | 
			
		||||
var myDataList;//設備list
 | 
			
		||||
let myDataList;
 | 
			
		||||
var levels;//剖面用
 | 
			
		||||
var lowerIdx;//剖面的下方樓層
 | 
			
		||||
var upperIdx;//剖面的上方樓層
 | 
			
		||||
@ -27,6 +28,31 @@ function launchViewer(urn, callback, _selector = "#forgeViewer") {
 | 
			
		||||
            callback ? callback(viewer, nodeIds) : "";
 | 
			
		||||
        })
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
        //test 
 | 
			
		||||
        // for (let i = 0; i < urn.length; i++) {
 | 
			
		||||
        //     Autodesk.Viewing.Document.load(urn[i]["urn"], async (doc) => {
 | 
			
		||||
        //         let viewables = doc.getRoot().getDefaultGeometry();
 | 
			
		||||
        //         let model = await viewer.loadDocumentNode(doc, viewables, {
 | 
			
		||||
        //             preserveView: false,
 | 
			
		||||
        //             keepCurrentModels: true,
 | 
			
		||||
        //             placementTransform: (new THREE.Matrix4()).setPosition(urn[i]["xform"]),
 | 
			
		||||
        //             keepCurrentModels: true,
 | 
			
		||||
        //             globalOffset: {
 | 
			
		||||
        //                 x: 0,
 | 
			
		||||
        //                 y: 0,
 | 
			
		||||
        //                 z: 0
 | 
			
		||||
        //             }
 | 
			
		||||
        //         });
 | 
			
		||||
 | 
			
		||||
        //         await viewer.waitForLoadDone(); //!<<< Wait for loading materials, properties and geometries for this model (URN)
 | 
			
		||||
        //     });
 | 
			
		||||
        // }
 | 
			
		||||
 | 
			
		||||
        //loadHeatmaps(viewer.getAllModels()[0]); //!<<< equals to viewer.model
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
    });
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
@ -247,6 +273,13 @@ class elevator3D {
 | 
			
		||||
            hideColor(nodeId);
 | 
			
		||||
            return;
 | 
			
		||||
        }
 | 
			
		||||
        //let fragPosition = new THREE.Vector3(position);// 一樓0 二樓15 三樓 26
 | 
			
		||||
 | 
			
		||||
        //fragProxy.position = fragPosition;
 | 
			
		||||
 | 
			
		||||
        //fragProxy.updateAnimTransform();
 | 
			
		||||
 | 
			
		||||
        //viewer.impl.sceneUpdated(true);
 | 
			
		||||
    }
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
@ -254,7 +287,14 @@ function onDocumentLoadSuccess(doc, eleOption) {
 | 
			
		||||
    var viewables = doc.getRoot().getDefaultGeometry();
 | 
			
		||||
    viewer.loadDocumentNode(doc, viewables).then(i => {
 | 
			
		||||
        // documented loaded, any action?
 | 
			
		||||
 | 
			
		||||
    });
 | 
			
		||||
    // viewer.addEventListener(Autodesk.Viewing.AGGREGATE_SELECTION_CHANGED_EVENT, (args) => {
 | 
			
		||||
    //     var currSelection = viewer.getSelection();
 | 
			
		||||
    //     var domElem = document.getElementById('id_printer');
 | 
			
		||||
    //     domElem.innerText = currSelection[0];
 | 
			
		||||
    // });
 | 
			
		||||
 | 
			
		||||
    viewer.addEventListener(Autodesk.Viewing.GEOMETRY_LOADED_EVENT, function () {
 | 
			
		||||
        let instanceTree = viewer.model.getData().instanceTree;
 | 
			
		||||
        console.log(instanceTree.nodeAccess)
 | 
			
		||||
@ -264,6 +304,8 @@ function onDocumentLoadSuccess(doc, eleOption) {
 | 
			
		||||
        });
 | 
			
		||||
 | 
			
		||||
    });
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
// 輔助函數,使用 Promise 封裝 viewer.getProperties 函數
 | 
			
		||||
@ -303,7 +345,7 @@ async function getNodeIdByDbIds(checkName = "【電梯】", callback = null) {
 | 
			
		||||
    let elements = await viewerGetProperties(targetNodeIds,"【tag_id】");
 | 
			
		||||
 | 
			
		||||
    // 從 elements 中篩選出包含 【tag_id】 屬性的元素
 | 
			
		||||
    elements = elements.filter(x => x.properties.findIndex(y => y.displayName == "【tag_id】" && y.displayValue == checkName) != -1);
 | 
			
		||||
    elements = elements.filter(x => x.properties.findIndex(y => y.displayName == "【tag_id】" && y.displayValue.indexOf(checkName) != -1) != -1);
 | 
			
		||||
 | 
			
		||||
    if (elements) {
 | 
			
		||||
        hasElement = true;
 | 
			
		||||
@ -351,11 +393,14 @@ function setElevatorSpeed(speed) { //0.01 ~ 1
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
function movElevator() {
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
    let tree = viewer.model.getData().instanceTree;
 | 
			
		||||
    let nodeId = 10952;
 | 
			
		||||
    let fragProxyZ = 0;
 | 
			
		||||
    var movStatus = 0; // 0=no 1=up 2=down
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
    if (fragProxy.position.z > targetFloorZ) {
 | 
			
		||||
        movStatus = 2
 | 
			
		||||
    }
 | 
			
		||||
@ -370,6 +415,7 @@ function movElevator() {
 | 
			
		||||
    tree.enumNodeFragments(nodeId, function (frag) {
 | 
			
		||||
        fragProxy = viewer.impl.getFragmentProxy(viewer.model, frag);
 | 
			
		||||
        fragProxy.getAnimTransform();
 | 
			
		||||
        //let fragPosition = new THREE.Vector3(0, 0, 15);// 一樓0 二樓15 三樓 26
 | 
			
		||||
        if (movStatus == 2) {
 | 
			
		||||
            fragProxy.position.z -= elevatorSpeed;
 | 
			
		||||
        }
 | 
			
		||||
@ -393,6 +439,15 @@ function movElevator() {
 | 
			
		||||
            requestAnimationFrame(movElevator);
 | 
			
		||||
        }
 | 
			
		||||
    }
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
    //let fragPosition = new THREE.Vector3(position);// 一樓0 二樓15 三樓 26
 | 
			
		||||
 | 
			
		||||
    //fragProxy.position = fragPosition;
 | 
			
		||||
 | 
			
		||||
    //fragProxy.updateAnimTransform();
 | 
			
		||||
 | 
			
		||||
    //viewer.impl.sceneUpdated(true);
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
function getAllDbIds(viewer) {
 | 
			
		||||
@ -440,7 +495,7 @@ class ADHeatMaps {
 | 
			
		||||
    constructor(option = {}) {
 | 
			
		||||
        this.devices = option.devices ?? [];
 | 
			
		||||
        this.checkNodeString = "【ROOM】";
 | 
			
		||||
        this.tempVal = 0;
 | 
			
		||||
        this.tempVals = [];
 | 
			
		||||
        this.roomDbIds = [];  //房間 dbId
 | 
			
		||||
        this.model = null;
 | 
			
		||||
        this.dataVizExtn = null;
 | 
			
		||||
@ -479,6 +534,7 @@ class ADHeatMaps {
 | 
			
		||||
                    device.sensorTypes
 | 
			
		||||
                );
 | 
			
		||||
                shadingNode.addPoint(shadingPoint);
 | 
			
		||||
                device.temp = 0;
 | 
			
		||||
            });
 | 
			
		||||
 | 
			
		||||
            heatmapData.addChild(shadingNode);
 | 
			
		||||
@ -495,34 +551,59 @@ class ADHeatMaps {
 | 
			
		||||
 | 
			
		||||
        this.dataVizExtn = dataVizExtn;
 | 
			
		||||
 | 
			
		||||
        this.changeTemp(this.tempVal);
 | 
			
		||||
        $.each(this.roomDbIds.map(x => x.nodeId), (idx, rDbid) => {
 | 
			
		||||
            this.dataVizExtn.renderSurfaceShading("RoomPanel" + rDbid, "temperature", this.getSensorValue.bind(this));
 | 
			
		||||
        })
 | 
			
		||||
 | 
			
		||||
        /*this.changeTemp(this.tempVal);*/
 | 
			
		||||
        this.onComplete ? this.onComplete() : "";
 | 
			
		||||
    }
 | 
			
		||||
 | 
			
		||||
    getSensorValue = function(device, sensorType) {
 | 
			
		||||
        let dev = this.devices.filter(x => x.id == device.id)[0];
 | 
			
		||||
        return dev.temp / 40;
 | 
			
		||||
    }
 | 
			
		||||
 | 
			
		||||
    // 改變溫度
 | 
			
		||||
    changeTemp = function (devId, temp) {
 | 
			
		||||
        this.tempVal = temp;
 | 
			
		||||
        // 透過 device id 取得 roomDbId
 | 
			
		||||
        /*const rDbid = this.roomDbIds.filter(x => x.)[0]?.roomDbId;*/
 | 
			
		||||
        if (rDbid != null) {
 | 
			
		||||
            // 取得新的溫度值
 | 
			
		||||
            let getSensorValue = (device, sensorType) => {
 | 
			
		||||
                return this.tempVal / 40;
 | 
			
		||||
        this.devices.forEach((dev) => {
 | 
			
		||||
            if (devId == dev.id) {
 | 
			
		||||
                dev.temp = temp;
 | 
			
		||||
            }
 | 
			
		||||
            // 對 "Room Panel" 做表面顏色的渲染,並使用新的溫度值
 | 
			
		||||
            this.dataVizExtn.renderSurfaceShading("RoomPanel" + rDbid, "temperature", getSensorValue);
 | 
			
		||||
        }
 | 
			
		||||
        })
 | 
			
		||||
       
 | 
			
		||||
        this.dataVizExtn.updateSurfaceShading(this.getSensorValue.bind(this));
 | 
			
		||||
 | 
			
		||||
        //if (rDbid != null) {
 | 
			
		||||
        //    // 取得新的溫度值
 | 
			
		||||
        //    let getSensorValue = (device, sensorType) => {
 | 
			
		||||
        //        return this.tempVal / 40;
 | 
			
		||||
        //    }
 | 
			
		||||
        //    // 對 "Room Panel" 做表面顏色的渲染,並使用新的溫度值
 | 
			
		||||
        //    this.dataVizExtn.renderSurfaceShading("RoomPanel" + rDbid, "temperature", getSensorValue);
 | 
			
		||||
        //}
 | 
			
		||||
    }
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
function setTransparentBuilding() {
 | 
			
		||||
    //allDbIdsStr.forEach((dbId) => {
 | 
			
		||||
    //    setTransparency(dbId, 0.2);
 | 
			
		||||
    //})
 | 
			
		||||
 | 
			
		||||
    for (var i = 0; i < allDbIdsStr.length; i++) {
 | 
			
		||||
        setTransparency(parseInt(allDbIdsStr[i]), 0.2);
 | 
			
		||||
    }
 | 
			
		||||
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
function recoverTransparentBuilding() {
 | 
			
		||||
    //allDbIdsStr.forEach((dbId) => {
 | 
			
		||||
    //    setTransparency(dbId, 1);
 | 
			
		||||
    //})
 | 
			
		||||
 | 
			
		||||
    for (var i = 0; i < allDbIdsStr.length; i++) {
 | 
			
		||||
        setTransparency(parseInt(allDbIdsStr[i]), 1);
 | 
			
		||||
    }
 | 
			
		||||
@ -575,6 +656,16 @@ function hideColor(nodeId) {//顏色改成透明
 | 
			
		||||
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
//------------------ 紀錄熱點座標 ---------------
 | 
			
		||||
function getHopspotPoint(data) {
 | 
			
		||||
    //var av = Autodesk.Viewing;
 | 
			
		||||
    myDataList = data;
 | 
			
		||||
    //viewer.addEventListener(av.GEOMETRY_LOADED_EVENT, addHotPoint, {
 | 
			
		||||
    //    once: true,
 | 
			
		||||
    //});
 | 
			
		||||
}
 | 
			
		||||
//-------------------- end ----------------------
 | 
			
		||||
 | 
			
		||||
//------------------- 加入熱點 -----------------
 | 
			
		||||
async function addHotPoint(data) {
 | 
			
		||||
    var viewer = data.target;
 | 
			
		||||
@ -604,7 +695,7 @@ async function addHotPoint(data) {
 | 
			
		||||
 | 
			
		||||
    myDataList.forEach((myData, index) => {
 | 
			
		||||
        const dbId = 10 + index;
 | 
			
		||||
        const myPosition = JSON.parse(myData.device_coordinate_3d);
 | 
			
		||||
        const myPosition = myData.position;
 | 
			
		||||
        const viewable = new DataVizCore.SpriteViewable(myPosition, style, dbId);
 | 
			
		||||
        myData._dbId = dbId;
 | 
			
		||||
        viewableData.addViewable(viewable);
 | 
			
		||||
@ -620,6 +711,7 @@ async function addHotPoint(data) {
 | 
			
		||||
        if (event != undefined && event != null) {
 | 
			
		||||
            if (event.dbId >= dbIdStart && event.dbId <= dbIdEnd) {//event.dbId > 0 && event.dbId < 19
 | 
			
		||||
                console.log(`Sprite clicked: ${event.dbId}`);
 | 
			
		||||
                openHotspotModal();
 | 
			
		||||
                for (let i = dbIdStart; i <= dbIdEnd; i++) {
 | 
			
		||||
                    changeColorForHotspot(i, false);
 | 
			
		||||
                    changeScaleForHotspot(i, false);
 | 
			
		||||
@ -646,6 +738,7 @@ async function addHotPoint(data) {
 | 
			
		||||
    //        if (dbIds.length > 0) {
 | 
			
		||||
    //            // 處理已選取元件的邏輯
 | 
			
		||||
    //            $(selector).trigger("autodesk:click:sprite", event);
 | 
			
		||||
    //            //openHotspotModal();
 | 
			
		||||
    //            console.log(`------ name: ${viewer.model.getInstanceTree().getNodeName(dbIds)} , dbId: ${dbIds}`);//, id: ${event.clickInfo.object.id}, position.x: ${event.clickInfo.point.x}, y: ${event.clickInfo.point.y}, z: ${event.clickInfo.point.z}
 | 
			
		||||
    //        } else {
 | 
			
		||||
    //            // 處理沒有選取元件的邏輯
 | 
			
		||||
@ -687,16 +780,52 @@ async function changeScaleForHotspot(dbId, type = true) {
 | 
			
		||||
        };
 | 
			
		||||
    });
 | 
			
		||||
}
 | 
			
		||||
//------------------------------ end ----------------------------------
 | 
			
		||||
 | 
			
		||||
//------------------------------ 熱圖 ---------------------------------
 | 
			
		||||
async function loadHeatmaps(model, roomsArr) {
 | 
			
		||||
//------------------- end --------------
 | 
			
		||||
 | 
			
		||||
//----------------- 開關熱點小視窗 ----------------------
 | 
			
		||||
function openHotspotModal() {
 | 
			
		||||
    //var modal = document.getElementById("hotspotModal");
 | 
			
		||||
    //modal.style.display = "block";
 | 
			
		||||
    //$("#pills-register-tab").removeClass("active");
 | 
			
		||||
    //$("#pills-alarm-tab").removeClass("active");
 | 
			
		||||
    //$("#pills-operation-tab").removeClass("active");
 | 
			
		||||
    //$("#pills-login-tab").tab("show");
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
function closeHotspotModal() {
 | 
			
		||||
    //var modal = document.getElementById("hotspotModal");
 | 
			
		||||
    //modal.style.display = "none";
 | 
			
		||||
 | 
			
		||||
}
 | 
			
		||||
//------------------ end --------------------------------
 | 
			
		||||
 | 
			
		||||
//------------------ 熱圖 -------------------------------
 | 
			
		||||
async function loadHeatmaps(model) {
 | 
			
		||||
    const dataVizExtn = await viewer.loadExtension("Autodesk.DataVisualization");
 | 
			
		||||
    var devices = [];
 | 
			
		||||
 | 
			
		||||
    myDataList.forEach((myData, index) => {
 | 
			
		||||
        devices.push({ id: index, position: JSON.parse(myData.device_coordinate_3d), sensorTypes: ["temperature", "humidity"] });
 | 
			
		||||
    });
 | 
			
		||||
    //取三個空調設備的位置打點
 | 
			
		||||
    const devices = [
 | 
			
		||||
        {
 | 
			
		||||
            id: "Oficina 5",
 | 
			
		||||
            //name: "Oficina-",
 | 
			
		||||
            position: { x: 6.98, y: -19.00, z: 16.86 }, // x: 0, y: 25, z: -2.5      (-4.93, -20.61, 16.86)
 | 
			
		||||
            sensorTypes: ["temperature", "humidity"]
 | 
			
		||||
        },
 | 
			
		||||
        {
 | 
			
		||||
            id: "Oficina 4",
 | 
			
		||||
            //name: "Oficina-",
 | 
			
		||||
            position: { x: 35.85, y: -2.24, z: 16.86 }, // x: 0, y: 25.03, z: -2.52  (23.94, -3.85, 16.86)
 | 
			
		||||
            sensorTypes: ["temperature", "humidity"]
 | 
			
		||||
        },
 | 
			
		||||
        {
 | 
			
		||||
            id: "Oficina 3",
 | 
			
		||||
            //name: "Oficina-",
 | 
			
		||||
            position: { x: 6.98, y: -2.24, z: 16.86 }, // x: 0, y: 25.03, z: -2.52   (-4.93, -3.85, 16.86)
 | 
			
		||||
            sensorTypes: ["temperature", "humidity"]
 | 
			
		||||
        }
 | 
			
		||||
    ];
 | 
			
		||||
    //冷氣N5: (-4.93, -20.61, 16.86), N4: (23.94, -3.85, 16.86), N3: (-4.93, -3.85, 16.86)
 | 
			
		||||
 | 
			
		||||
    // Initialize sensor values
 | 
			
		||||
    let sensorVals = [];
 | 
			
		||||
@ -705,9 +834,7 @@ async function loadHeatmaps(model, roomsArr) {
 | 
			
		||||
    }
 | 
			
		||||
 | 
			
		||||
    const roomDbIds = [];
 | 
			
		||||
    for (var i = 0; i < roomsArr.length; i++) {
 | 
			
		||||
        roomDbIds.push(roomsArr[i]);
 | 
			
		||||
    }
 | 
			
		||||
    roomDbIds.push(7567);
 | 
			
		||||
 | 
			
		||||
    const {
 | 
			
		||||
        SurfaceShadingData,
 | 
			
		||||
@ -732,10 +859,11 @@ async function loadHeatmaps(model, roomsArr) {
 | 
			
		||||
 | 
			
		||||
    // Setup surface shading
 | 
			
		||||
    await dataVizExtn.setupSurfaceShading(model, heatmapData);
 | 
			
		||||
 | 
			
		||||
    dataVizExtn.registerSurfaceShadingColors("temperature", [0xff0000, 0x0000ff]);
 | 
			
		||||
 | 
			
		||||
    function getSensorValue(device, sensorType) {
 | 
			
		||||
        return sensorVals[parseInt(device.id)];
 | 
			
		||||
        return sensorVals[parseInt(device.id.slice(-1)) - 1];
 | 
			
		||||
    }
 | 
			
		||||
 | 
			
		||||
    dataVizExtn.renderSurfaceShading("Room Panel", "temperature", getSensorValue);
 | 
			
		||||
@ -748,9 +876,97 @@ async function loadHeatmaps(model, roomsArr) {
 | 
			
		||||
        dataVizExtn.updateSurfaceShading(getSensorValue);
 | 
			
		||||
    }, 2000);
 | 
			
		||||
}
 | 
			
		||||
//------------------------------ end ----------------------------------
 | 
			
		||||
//------------------ end --------------------------------
 | 
			
		||||
async function loadHeatmapsForFloor(model) {
 | 
			
		||||
 | 
			
		||||
//--------------------------- -- 剖面 ---------------------------------
 | 
			
		||||
    const dataVizExtn = await viewer.loadExtension("Autodesk.DataVisualization");
 | 
			
		||||
 | 
			
		||||
    //x: -17.33, y: 51.03, z: -2.52
 | 
			
		||||
    const devices = [
 | 
			
		||||
        {
 | 
			
		||||
            id: "Oficina 5",
 | 
			
		||||
            //name: "Oficina-",
 | 
			
		||||
            position: { x: 6.98, y: -19.00, z: 16.86 }, // x: 0, y: 25, z: -2.5      (-4.93, -20.61, 16.86)
 | 
			
		||||
            sensorTypes: ["temperature", "humidity"]
 | 
			
		||||
        },
 | 
			
		||||
        {
 | 
			
		||||
            id: "Oficina 4",
 | 
			
		||||
            //name: "Oficina-",
 | 
			
		||||
            position: { x: 35.85, y: -2.24, z: 16.86 }, // x: 0, y: 25.03, z: -2.52  (23.94, -3.85, 16.86)
 | 
			
		||||
            sensorTypes: ["temperature", "humidity"]
 | 
			
		||||
        },
 | 
			
		||||
        {
 | 
			
		||||
            id: "Oficina 3",
 | 
			
		||||
            //name: "Oficina-",
 | 
			
		||||
            position: { x: 6.98, y: -2.24, z: 16.86 }, // x: 0, y: 25.03, z: -2.52   (-4.93, -3.85, 16.86)
 | 
			
		||||
            sensorTypes: ["temperature", "humidity"]
 | 
			
		||||
        }
 | 
			
		||||
    ];
 | 
			
		||||
 | 
			
		||||
    // Initialize sensor values
 | 
			
		||||
    let sensorVals = [];
 | 
			
		||||
    for (let i = 0; i < devices.length; i++) {
 | 
			
		||||
        sensorVals[i] = Math.random();
 | 
			
		||||
    }
 | 
			
		||||
 | 
			
		||||
    const roomDbIds = [];
 | 
			
		||||
 | 
			
		||||
    roomDbIds.push(7567);
 | 
			
		||||
 | 
			
		||||
    const {
 | 
			
		||||
        SurfaceShadingData,
 | 
			
		||||
        SurfaceShadingPoint,
 | 
			
		||||
        SurfaceShadingNode,
 | 
			
		||||
    } = Autodesk.DataVisualization.Core;
 | 
			
		||||
 | 
			
		||||
    const shadingNode = new SurfaceShadingNode("Room Panel", roomDbIds);
 | 
			
		||||
 | 
			
		||||
    devices.forEach((device) => {
 | 
			
		||||
        const shadingPoint = new SurfaceShadingPoint(
 | 
			
		||||
            device.id,
 | 
			
		||||
            device.position,
 | 
			
		||||
            device.sensorTypes
 | 
			
		||||
        );
 | 
			
		||||
        shadingNode.addPoint(shadingPoint);
 | 
			
		||||
    });
 | 
			
		||||
 | 
			
		||||
    const heatmapData = new SurfaceShadingData();
 | 
			
		||||
    heatmapData.addChild(shadingNode);
 | 
			
		||||
    heatmapData.initialize(model);
 | 
			
		||||
 | 
			
		||||
    // Setup surface shading
 | 
			
		||||
    await dataVizExtn.setupSurfaceShading(model, heatmapData);
 | 
			
		||||
 | 
			
		||||
    //dataVizExtn.registerSurfaceShadingColors("co2", [0x00ff00, 0xff0000]);
 | 
			
		||||
    dataVizExtn.registerSurfaceShadingColors("temperature", [0xff0000, 0x0000ff]);
 | 
			
		||||
 | 
			
		||||
    function getSensorValue(device, sensorType) {
 | 
			
		||||
        return sensorVals[parseInt(device.id.slice(-1)) - 1];
 | 
			
		||||
    }
 | 
			
		||||
 | 
			
		||||
    dataVizExtn.renderSurfaceShading("Room Panel", "temperature", getSensorValue);
 | 
			
		||||
 | 
			
		||||
    setInterval(() => {
 | 
			
		||||
        // Modify sensor values.
 | 
			
		||||
        for (let i = 0; i < devices.length; i++) {
 | 
			
		||||
            sensorVals[i] = Math.random();
 | 
			
		||||
        }
 | 
			
		||||
        dataVizExtn.updateSurfaceShading(getSensorValue);
 | 
			
		||||
    }, 2000);
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
//
 | 
			
		||||
async function loadHeatmap() {
 | 
			
		||||
    const model = viewer.model;
 | 
			
		||||
    loadHeatmaps(model);
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
async function loadHeatmapForFloor() {
 | 
			
		||||
    const model = viewer.model;
 | 
			
		||||
    loadHeatmapsForFloor(model);
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
//------------ 剖面 ----------------------
 | 
			
		||||
async function getRemoteLevels() {
 | 
			
		||||
    const aecData = await Autodesk.Viewing.Document.getAecModelData(this.viewer.model.getDocumentNode());
 | 
			
		||||
    if (!aecData.levels) return null;
 | 
			
		||||
@ -760,6 +976,21 @@ async function getRemoteLevels() {
 | 
			
		||||
    return levels2;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
async function getLevelsData(lowerFloor, upperFloor) {
 | 
			
		||||
 | 
			
		||||
    const data = await this.getRemoteLevels();
 | 
			
		||||
    for (var i = 0; i < data.length; i++) {
 | 
			
		||||
        if ((data[i].name).indexOf(lowerFloor) != -1) {
 | 
			
		||||
            lowerIdx = i;
 | 
			
		||||
        }
 | 
			
		||||
        if ((data[i].name).indexOf(upperFloor) != -1) {
 | 
			
		||||
            upperIdx = i;
 | 
			
		||||
        }
 | 
			
		||||
    }
 | 
			
		||||
    this.levels = data;
 | 
			
		||||
    profile();
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
function getCutPlaneParam(idx, n) {
 | 
			
		||||
    if (idx < 0 || !n) return;
 | 
			
		||||
 | 
			
		||||
@ -779,38 +1010,10 @@ function getCutPlaneParam(idx, n) {
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
function profile() {
 | 
			
		||||
    //const upperIdx = 6;
 | 
			
		||||
    const upperCutPlaneParam = this.getCutPlaneParam(upperIdx, 1);
 | 
			
		||||
    //const lowerIdx = 7;
 | 
			
		||||
    const lowerCutPlaneParam = this.getCutPlaneParam(lowerIdx, -1);
 | 
			
		||||
    this.viewer.setCutPlanes([upperCutPlaneParam, lowerCutPlaneParam]);
 | 
			
		||||
}
 | 
			
		||||
//------------------------------ end ----------------------------------
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
//======================== 外部呼叫function ===========================
 | 
			
		||||
//紀錄熱點座標
 | 
			
		||||
function getHopspotPoint(data) {
 | 
			
		||||
    myDataList = data;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
//呼叫載入熱圖
 | 
			
		||||
async function toLoadHeatmap(roomArr) {
 | 
			
		||||
    const model = viewer.model;
 | 
			
		||||
    loadHeatmaps(model, roomArr);
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
//取得levels,執行剖面
 | 
			
		||||
async function getLevelsData(lowerFloor, upperFloor) {
 | 
			
		||||
 | 
			
		||||
    const data = await this.getRemoteLevels();
 | 
			
		||||
    for (var i = 0; i < data.length; i++) {
 | 
			
		||||
        if ((data[i].name).indexOf(lowerFloor) != -1) {
 | 
			
		||||
            lowerIdx = i;
 | 
			
		||||
        }
 | 
			
		||||
        if ((data[i].name).indexOf(upperFloor) != -1) {
 | 
			
		||||
            upperIdx = i;
 | 
			
		||||
        }
 | 
			
		||||
    }
 | 
			
		||||
    this.levels = data;
 | 
			
		||||
    profile();
 | 
			
		||||
}
 | 
			
		||||
//============================= end ===================================
 | 
			
		||||
//----------------- end -----------------------------------------------
 | 
			
		||||
@ -92,6 +92,7 @@ $.fn.YTTooltip = function (option) {
 | 
			
		||||
                    })
 | 
			
		||||
                }
 | 
			
		||||
                $("body").append(clone);
 | 
			
		||||
                $(obj.ele).trigger("yt:tooltip:show");
 | 
			
		||||
                //push 已顯示紀錄
 | 
			
		||||
                obj.isShowArr.push(ranId);
 | 
			
		||||
                obj.tooltipDiv = clone;
 | 
			
		||||
@ -125,6 +126,7 @@ $.fn.YTTooltip = function (option) {
 | 
			
		||||
                }
 | 
			
		||||
                setTimeout(function () { 
 | 
			
		||||
                    obj.onShow ? obj.onShow(clone, obj.ele, obj) : "";
 | 
			
		||||
                    $(obj.ele).trigger("yt:tooltip:shown");
 | 
			
		||||
                }, 10)
 | 
			
		||||
                event();
 | 
			
		||||
            } else {
 | 
			
		||||
@ -158,6 +160,8 @@ $.fn.YTTooltip = function (option) {
 | 
			
		||||
            let _obj = $(obj.ele)[0]._ytTooltip;
 | 
			
		||||
            onHide ? onHide($("#yt_tooltip_" + tooId), _obj.ele, _obj) : "";
 | 
			
		||||
 | 
			
		||||
            $(obj.ele).trigger("yt:tooltip:hide");
 | 
			
		||||
 | 
			
		||||
            $("#yt_tooltip_" + tooId).remove();
 | 
			
		||||
            obj.isShowArr.splice($.inArray(tooId, obj.isShowArr), 1);
 | 
			
		||||
            //setTimeout(function () {
 | 
			
		||||
 | 
			
		||||
		Loading…
	
		Reference in New Issue
	
	Block a user