<style> [id^=yt_tooltip] { width: 450px; } </style> <div class="row m-0 mb-3"> <button id="resChartZoom" class="btn btn-info">圖檔重置</button> </div> <!-- <div class="row"> <div id="floChart" style="height : 80vh!important;width:100%"></div> </div> --> <!-- <div class="row"> <div id="forgeViewer" class="position-absolute" style="width:96%;height:96%;"></div> </div> --> <div class="d-flex"> <div class="col-6 my-3"> <div id="floChart" style="height : 80vh!important;width:100%"></div> </div> <div class="col-6 my-3"> <div id="forgeHeatBarDiv" class="d-flex mb-4" style="gap:15px"> </div> <div id="forgeViewer"></div> </div> </div> <!--<script src="lib/echarts.min.js"></script>--> <script> var floChart = null; var currentData = []; var heatMap = null; var allDeviceRowData = []; //所有設備原始資料 var global_emergency_alarm_device_number = []; var zoomToggle = 3; $(function () { drawHeatBar(); getHotspotPoint(() => { show3DModel(pageAct.urn); }); initChart(); getFloData(); subDevice(); }) onEvent("click", "#resChartZoom", function () { floChart.setOption({ geo: { center: null, zoom: 1.2, }, }); resetData(); }) function getFloData() { let url = baseApiUrl + "/api/Device/GetDeviceList"; let sendData = { sub_system_tag: pageAct.sysSubTag, building_tag: pageAct.buiTag, floor_tag: pageAct.floTag, }; objSendData.Data = sendData; ytAjax = new YourTeam.Ajax(url, objSendData, function (res) { if (!res || res.code != "0000" || !res.data) { } else { chartHandler(`${baseImgUrl}/upload/floor_map/${res.data[0].floor_map_name}`); getDevice(res.data[0].device_list); } }, null, "POST").send(); } function getDevice(devList) { let selected_floor = devList[0]; //let selected_floor_objs = devList.filter(function (item) { // return item.floor_guid == selected_floor.floor_guid; //}); //currentData = selected_floor_objs[0].device; currentData = $.map(devList, function (item) { //資料處理 if (selected_floor.device_number != undefined && selected_floor.device_number != null && selected_floor.device_number != "" && selected_floor.device_number == item.device_number) { item.selected = true; } else { item.selected = false; } if (item.device_coordinate != undefined && item.device_coordinate != null) { var coordinate = item.device_coordinate.split(',') item.value = [ parseFloat(coordinate[0]), parseFloat(coordinate[1]) ] } if (item.device_nodes != undefined && item.device_nodes != null && item.device_nodes.length > 0) { if (item.device_master_number == selected_floor.device_master) { //var datatable_data = { // device_full_name: item.full_name, // device_number: item.device_number, // device_master: item.device_master_number //} //datatable_data_list.push(datatable_data); $.map(item.device_nodes, function (item_node) { item_node.selected = false; if (item_node.device_node_coordinate != undefined && item_node.device_node_coordinate != null) { var node_coordinate = item_node.device_node_coordinate.split(',') item_node.value = [ parseFloat(node_coordinate[0]), parseFloat(node_coordinate[1]) ] } }); } else { //var index = datatable_data_list.findIndex(x => x.device_number == item.device_number); //if (index < 0) { // var datatable_data = { // device_number: item.device_number, // device_master: item.device_master_number // } // datatable_data_list.push(datatable_data); //} $.map(item.device_nodes, function (item_node) { item_node.selected = false; if (item_node.device_node_coordinate != undefined && item_node.device_node_coordinate != null) { var node_coordinate = item_node.device_node_coordinate.split(',') item_node.value = [ parseFloat(node_coordinate[0]), parseFloat(node_coordinate[1]) ] } }); } } return item; }); if (currentData == null || currentData.length == 0) { this.currentData = []; } // myBaja.setPrepareSubscribeDevices(currentData); // myBaja.setCallBack(mySubscribeDevices); //if (datatable_data_list.length > 0) { // $("#datatablediv").show(); // dataTableDraw(); //} else { // $("#datatablediv").hide(); //} resetData(); } function initChart() { let chartDom = $("#floChart")[0]; floChart = echarts.init(chartDom, null, { width: 'auto'}); } function chartHandler(url) { floChart.clear(); $.get(url, function (svg) { if (svg == undefined || svg == null) { return; } echarts.registerMap('floor_svg', { svg: svg }); option = { // animationDurationUpdate: 1500, tooltip: { formatter: function (params) { if (params.data.device_node_guid != undefined && params.data.device_node_guid != null && params.data.device_node_guid != "") { return `名稱:${params.data.device_node_full_name}<br> Guid:${params.data.device_node_guid}` } else { return `名稱:${params.data.full_name}<br> Guid:${params.data.device_guid}` } } }, toolbox: { //工具欄 show: false }, geo: { map: 'floor_svg', roam: true, scaleLimit: { //限制放大縮小倍數 max: 32, min: 1 }, layoutSize: '100%', layoutCenter: [], zoom: 1.2, silent: true }, series: [ { //不管有無被選擇(圓點) type: 'scatter', coordinateSystem: 'geo', geoIndex: 0, symbol: 'circle', symbolSize: 10, symbolOffset: [10, 10], label: { show: false }, /*data: currentData,*/ z: 2 }, { //未選擇的設備(icon) type: 'scatter', coordinateSystem: 'geo', geoIndex: 0, symbolSize: 30, label: { formatter: '{b}', position: 'bottom', show: true, backgroundColor: 'orange' }, emphasis: { label: { show: true, fontSize: '20', fontWeight: 'bold', color: 'yellow' } }, selectedMode: 'single', data: null, z: 1 }, { //被選擇的設備(icon) type: 'effectScatter', coordinateSystem: 'geo', geoIndex: 0, showEffectOn: 'render', symbolSize: 30, label: { formatter: '{b}', position: 'bottom', show: true, backgroundColor: 'orange' }, emphasis: { label: { show: true, fontSize: '20', fontWeight: 'bold', color: 'yellow' } }, selectedMode: 'single', data: null, z: 1 }, { //編輯模式底下的設備(圓點,只會有一個) type: 'scatter', coordinateSystem: 'geo', geoIndex: 0, symbol: 'circle', symbolSize: 10, symbolOffset: [10, 10], label: { show: false }, /*data: currentData,*/ z: 2 }, { //編輯模式底下的設備(icon,只會有一個) type: 'scatter', coordinateSystem: 'geo', geoIndex: 0, symbolSize: 30, label: { formatter: '{b}', position: 'bottom', show: true, backgroundColor: 'orange' }, emphasis: { label: { show: true, fontSize: '20', fontWeight: 'bold', color: 'yellow' } }, data: null, z: 1 }, ], }; floChart.setOption(option); if (currentData != undefined && currentData != null && currentData.length > 0) { resetData(); } var ordPath = { "building_tag": pageAct.buiTag, "system_tag": pageAct.sysMainTag, } //myBaja.setSubscribeDevicesByBql(ordPath); //myBaja.setSubscribeDevicesCallBack(subscribeCallBack); let parentEle = null; floChart.on('click', function (params) { forgeUnFocusAll(); chartUnFocusAll(); if (params.componentType == "series") { let data = params.data; let position = [params.event.event.clientX, params.event.event.clientY]; data._dbId = data._dbId ?? null; parentEle = crePosPopover(position, data); $(parentEle).click(); } else { $(parentEle).YTTooltip("hide"); } }) floChart.getZr().on('click', function (params) { /*console.log("click", params);*/ var pixelPoint = [params.offsetX, params.offsetY]; var dataPoint = floChart.convertFromPixel({ geoIndex: 0 }, pixelPoint); if (!(params?.target?.shape?.symbolType == "circle")) { $(parentEle).YTTooltip("hide"); } //temp_device_on_floor_map = [{ // device_guid: selected_temp_device.device_guid, // device_full_name: selected_temp_device.device_full_name, // device_node_guid: selected_temp_device.device_node_guid ? selected_temp_device.device_node_guid : null, // device_node_full_name: selected_temp_device.device_node_full_name ? selected_temp_device.device_node_full_name : null, // status: selected_temp_device.status, // value: dataPoint //}]; // currentData.push([dataPoint[0], dataPoint[1], 1]); // floChart.setOption(option); }); onEvent("autodesk:complete:sprite", "#forgeViewer", function (e, obj) { let option = floChart.getOption(); option.series.forEach(function (series) { series.data.forEach(function (point) { let dbid = obj.myDataList.filter(x => x.device_number == point.device_number)[0]?._dbId; point._dbId = dbid; currentData.forEach(function (cData) { if (cData.device_guid == point.device_guid) { cData._dbId = dbid; } }) }); }); floChart.setOption(option) }) //floChart.on('selectchanged', function (params) { // console.log("selectchanged", params); // // currentData.push([dataPoint[0], dataPoint[1], 1]); // // floChart.setOption(option); // currentData = $.map(currentData, function (item) { // item.selected = false; // return item; // }); // if (params.selected.length > 0) { // currentData[params.selected[0].seriesIndex - 1].selected = true; // } //}); // floChart.getZr().on('mousewheel', function (params) { // console.log(params) // }) floChart.on('georoam', function (params) { var zoom = floChart.getOption().geo[0].zoom; if (zoom <= 2.5) { /*ResetFloorMap();*/ floChart.setOption({ geo: { roam: 'scale' }, }); } else { floChart.setOption({ geo: { roam: true }, }); } resetData(); }); }) .fail(function () { toast_warning("查無該樓層地圖") floChart.clear(); }); } //baja 訂閱設備 function subDevice() { let floMyBaja = new subscriptionDevices(); var ordPath = { "area_tag": pageAct.AreaTag, "building_tag": pageAct.buiTag, "system_tag": pageAct.sysMainTag, "name_tag": pageAct.sysSubTag, } floMyBaja.setSubscribeDevicesByBql(ordPath); floMyBaja.setSubscribeDevicesCallBack(function (data) { let matchDevice = currentData.filter(x => x.device_number == data.device_number_full)[0]; if (!matchDevice) { return false; } let norDevPoiName = matchDevice.device_normal_point_name; let cloDevPoiName = matchDevice.device_close_point_name; let errDevPoiName = matchDevice.device_error_point_name; if (data.point_name == "Temp") { heatMap?.changeTemp(data.device_number_full, !isNaN(parseInt(data.value)) ? parseInt(data.value) : 0); let devIdx = currentData.findIndex(x => x.device_number == data.device_number_full); currentData[devIdx]._temp = !isNaN(parseInt(data.value)) ? parseInt(data.value) : 0; } if (data.point_name == norDevPoiName && data.value == matchDevice.device_normal_point_value) { //顯示正常燈號 $(`#${matchDevice.device_number}_status`).attr("data-light-type", "normal").data("light-type", "normal"); } else if (data.point_name == cloDevPoiName && data.value == matchDevice.device_close_point_value) { $(`#${matchDevice.device_number}_status`).attr("data-light-type", "close").data("light-type", "close"); } else if (data.point_name == errDevPoiName && data.value == matchDevice.device_error_point_value) { $(`#${matchDevice.device_number}_status`).attr("data-light-type", "error").data("light-type", "error"); } }); floMyBaja.setSubscribeDeviceEndCallBack(function (data) { endPageLoading(); if (data.findIndex(x => x.point_name == "Temp") != -1) { // 顯示溫度條 showHeat("[name=forgeHeatBar]"); } }); } function drawHeatBar() { $("#forgeHeatBarDiv").html(setTopHeatBar()); } // 電梯 3D 位置呈現 function set3DElevPos(viewer) { let nodeIds = allElevDevList.filter(x => !isNaN(parseInt(x.forge_dbid))).map(x => { return { devNum: x.device_number, nodeId: parseInt(x.forge_dbid) } }); $.each(nodeIds, (idx, item) => { elev3DBind[item.devNum] = item.nodeId; }) nodeIds = nodeIds.map(x => x.nodeId); $.each(nodeIds, function (idx, node) { let options = { element: $("[name=forgeViewer]"), viewer: viewer, nodeId: node, floorHeight: elev3DOption.floorHeight ?? [], inited: function () { } } let elevator3DObj = new elevator3D(options); let devNum = Object.keys(elev3DBind).filter(x => elev3DBind[x] == node)[0]; let subData = subSeviceData.filter(x => x.device_number == devNum)[0]; if (elev3DObj.filter(x => x.nodeId == node).length == 0) { elev3DObj.push({ id: devNum, nodeId: node, obj: elevator3DObj }); } if (subData) { let elevObj = elev3DObj.filter(x => x.nodeId == node)[0]; if (!elevObj.id) { elevObj.id = devNum; } elevObj.obj = Object.assign(elevObj, elevator3DObj ?? {}) elevObj.obj.init(function () { let frags = elevObj.obj.fragProxys.filter(x => x.nodeId == node); frags.forEach((fragProxy) => { fragProxy.frag.position.z = elev3DOption.floorHeight.filter(x => x.floor == subData["CP"])[0]?.height ?? 0; fragProxy.frag.updateAnimTransform() }) elevObj.obj.viewer.impl.sceneUpdated(true); }) } }) } // 電梯 3D Option 設置 function set3DElevOpt(data) { let devNumArr = data.map(x => { return { devNum: x.device_number_full, priority: allElevDevList.filter(y => y.device_number == x.device_number_full)[0]?.priority } }).DistinctBy("devNum"); devNumArr = devNumArr.oSort("priority"); $.each(devNumArr, (idx, devObj) => { devNum = devObj.devNum; let subData = subSeviceData.filter(x => x.device_number == devNum)[0]; if (subData) { //// 左側 3D 電梯 nodeID 與 device_number match //if (Object.keys(elev3DBind).indexOf(devNum) == -1 && viewer3DNodeIds.length != 0) { // elev3DBind[devNum] = viewer3DNodeIds[Object.keys(elev3DBind).length]; //} // 左側 3D 電梯 Viewer Option 設置 /*elev3DOption.nodes = Object.keys(elev3DBind).map(x => elev3DBind[x]);*/ elev3DOption.nodeId = elev3DBind[devNum]; elev3DOption.floorHeight = floList.map((x) => { return { floor: x } }); elev3DOption.floorHeight.forEach((floObj, idx) => { if (floObj.floor.startsWith("B")) { let floor = parseInt(floObj.floor.split("B")[1].split("F")[0]); floObj.height = floor * -13; } else { let floor = parseInt(floObj.floor.split("F")[0]); if (floor == 1) { floObj.height = 0; } else if (floor == 2) { floObj.height = 14.75; } else { floObj.height = (14.75 + ((floor - 2) * 9.75)); } } }) if (elev3DObj.length != 0) { let elevObj = elev3DObj.filter(x => x.nodeId == elev3DBind[devNum])[0]; if (!elevObj.id) { elevObj.id = devNum; } elevObj.obj = Object.assign(elevObj.obj, elev3DOption); elevObj.obj.init(function () { let frags = elevObj.obj.fragProxys.filter(x => x.nodeId == elev3DBind[devNum]); frags.forEach((fragProxy) => { fragProxy.frag.position.z = elev3DOption.floorHeight.filter(x => x.floor == subData["CP"])[0]?.height ?? 0; fragProxy.frag.updateAnimTransform(); }) elevObj.obj.viewer.impl.sceneUpdated(true); }); } } }) } // //訂閱設備的回傳值,並塞到全域變數 // function subscribeCallBack(change_device, is_need_reset = false) { // if (change_device != undefined && change_device != null) { // var target_device = allDeviceRowData.filter(x => x.device_number == change_device.device_number)[0]; // if (target_device == undefined || target_device == null) { // //新增 // obj = { // device_number: change_device.device_number, // points: [{ // name: change_device.point_name, // value: change_device.value // }] // }; // allDeviceRowData.push(obj); // } // else { // selected_device_point = target_device.points.find(x => x.name == change_device.point_name); // if (selected_device_point != null) { // selected_device_point.value = change_device.value; // } // else { // obj = { // name: change_device.point_name, // value: change_device.value // } // target_device.points.push(obj); // } // } // if (is_need_reset) { // resetData(); // } // } // } // 重設平面圖設備資料 function resetData() { const scatter_symbol_convertData = function (data,zoom) { //正常、關閉排除CCVT(圓點) let res = [], temp = []; data.forEach(function (item, index) { if (global_emergency_alarm_device_number != undefined && global_emergency_alarm_device_number != null) { if (global_emergency_alarm_device_number.findIndex(x => x.device_number == item.device_number) < 0 && item.device_system_category_layer3 != "C") { //如果有子節點,則只針對子節點操作 if (item.device_nodes != undefined && item.device_nodes != null && item.device_nodes.length > 0) { item.device_nodes.forEach(function (item_node, item_node_index) { //添加父節點相關資訊 item_node.device_system_category_layer3 = item.device_system_category_layer3; item_node.device_normal_color = item.device_normal_color; item_node.device_close_color = item.device_close_color; //判斷父節點狀態 var device_index = allDeviceRowData.findIndex(x => x.device_number == item.device_number) var temp_point_value; if (device_index > -1) { if (item.device_normal_point_name != null || item.device_close_point_name != null) { //當其中point name 不為null的情況 if (item.device_normal_point_name != null) { temp_point_value = allDeviceRowData[device_index].points.find(x => x.name == item.device_normal_point_name); temp_point_value = allDeviceRowData[device_index].points[item.device_normal_point_name]; if (temp_point_value == item.device_normal_point_value) { item_node.device_color = item.device_normal_color; } } if (item.device_close_point_name != null) { temp_point_value = allDeviceRowData[device_index].points[item.device_close_point_name]; if (temp_point_value == item.device_close_point_value) { item_node.device_color = item.device_close_color; } } } else { if (item.device_normal_point_name == "ER") { temp_point_value = allDeviceRowData[device_index].points[item.device_normal_point_name]; if (temp_point_value == "true") { item_node.device_color = item.device_normal_color; } else { temp_point_value = allDeviceRowData[device_index].points[item.device_close_point_name]; if (temp_point_value == item.device_close_point_value) { item_node.device_color = item.device_close_color; } } } else if (item.device_close_point_name == "ER") { temp_point_value = allDeviceRowData[device_index].points[item.device_close_point_name]; if (temp_point_value == "true") { item_node.device_color = item.device_close_color; } else { temp_point_value = allDeviceRowData[device_index].points[item.device_normal_point_name]; if (temp_point_value == item.device_normal_point_value) { item_node.device_color = item.device_normal_color; } } } else { temp_point_value = allDeviceRowData[device_index].points[item.device_normal_point_name]; if (temp_point_value == item.device_normal_point_value) { item_node.device_color = item.device_normal_color; } else if (temp_point_value == item.device_close_point_value) { item_node.device_color = item.device_close_color; } } } } temp.push(item_node); }); } else { var device_index = allDeviceRowData.findIndex(x => x.device_number == item.device_number) if (device_index > -1) { if (item.device_normal_point_name != null || item.device_close_point_name != null) { //當其中point name 有為null的情況 if (item.device_normal_point_name != null) { // temp_point_value = allDeviceRowData[device_index].points[item.device_normal_point_name]; temp_point_value = allDeviceRowData[device_index].points.find(x => x.name == item.device_normal_point_name).value; if (temp_point_value == item.device_normal_point_value) { item.device_color = item.device_normal_color; } } if (item.device_close_point_name != null) { // temp_point_value = allDeviceRowData[device_index].points[item.device_close_point_name]; temp_point_value = allDeviceRowData[device_index].points.find(x => x.name == item.device_close_point_name).value; if (temp_point_value == item.device_close_point_value) { item.device_color = item.device_close_color; } } } else { if (item.device_normal_point_name == "ER") { // temp_point_value = allDeviceRowData[device_index].points[item.device_normal_point_name]; temp_point_value = allDeviceRowData[device_index].points.find(x => x.name == item.device_normal_point_name).value; if (temp_point_value == "true") { item.device_color = item.device_normal_color; } else { // temp_point_value = allDeviceRowData[device_index].points[item.device_close_point_name]; temp_point_value = allDeviceRowData[device_index].points.find(x => x.name == item.device_close_point_name).value; if (temp_point_value == item.device_close_point_value) { item.device_color = item.device_close_color; } } } else if (item.device_close_point_name == "ER") { // temp_point_value = allDeviceRowData[device_index].points[item.device_close_point_name]; temp_point_value = allDeviceRowData[device_index].points.find(x => x.name == item.device_close_point_name).value; if (temp_point_value == "true") { item.device_color = item.device_close_color; } else { // temp_point_value = allDeviceRowData[device_index].points[item.device_normal_point_name]; temp_point_value = allDeviceRowData[device_index].points.find(x => x.name == item.device_normal_point_name).value; if (temp_point_value == item.device_normal_point_value) { item.device_color = item.device_normal_color; } } } else { // temp_point_value = allDeviceRowData[device_index].points[item.device_normal_point_name]; temp_point_value = allDeviceRowData[device_index].points.find(x => x.name == item.device_normal_point_name).value; if (temp_point_value == item.device_normal_point_value) { item.device_color = item.device_normal_color; } else if (temp_point_value == item.device_close_point_value) { item.device_color = item.device_close_color; } } } } item.zoom = zoom; temp.push(item); } } } }); // let temp = data.filter(function (item, index) { // if (global_emergency_alarm_device_number != undefined && global_emergency_alarm_device_number != null) { // return global_emergency_alarm_device_number.findIndex(x => x.device_number == item.device_number) < 0 && item.device_system_category_layer3 != "C"; // } else { // return []; // } // }); let option = floChart.getOption(); temp.forEach(function (tempData) { let oldTarObj = option.series[0]?.data?.filter(x => x.device_number == tempData.device_number)[0]; if (oldTarObj) { tempData = Object.assign(tempData, oldTarObj) } }) temp.map(function (item) { var obj = { device_guid: item.device_guid, device_number: item.device_number, full_name: item.full_name ? item.full_name : null, device_node_guid: item.device_node_guid ? item.device_node_guid : null, device_node_full_name: item.device_node_full_name ? item.device_node_full_name : null, device_system_category_layer3: item.device_system_category_layer3 ? item.device_system_category_layer3 : null, status: item.status, value: item.value, deviceItems: item.deviceItems, deviceURL: item.deviceURL, _dbId: item._dbId ?? null } obj.itemStyle = { 'color': item.device_color }; res.push(obj); }); return res; } const scatter_icon_convertData = function (data) { //正常、關閉(icon) let res = [], temp = []; data.forEach(function (item, index) { if (global_emergency_alarm_device_number != undefined && global_emergency_alarm_device_number != null) { if (global_emergency_alarm_device_number.findIndex(x => x.device_number == item.device_number) < 0 && item.device_system_category_layer3 != "C") { //如果有子節點,則只針對子節點操作 if (item.device_nodes != undefined && item.device_nodes != null && item.device_nodes.length > 0) { item.device_nodes.forEach(function (item_node, item_node_index) { //添加父節點相關資訊 item_node.device_system_category_layer3 = item.device_system_category_layer3; item_node.device_normal_color = item.device_normal_color; item_node.device_image = item.device_image; temp.push(item_node); }); } else { temp.push(item) } } } }); temp = data.filter(function (item, index) { if (global_emergency_alarm_device_number != undefined && global_emergency_alarm_device_number != null) { return global_emergency_alarm_device_number.findIndex(x => x.device_number == item.device_number) < 0 && item.device_system_category_layer3 != "C"; } else { return []; } }); temp.map(function (item) { var obj = { device_guid: item.device_guid, device_number: item.device_number, full_name: item.full_name ? item.full_name : null, device_node_guid: item.device_node_guid ? item.device_node_guid : null, device_node_full_name: item.device_node_full_name ? item.device_node_full_name : null, device_system_category_layer3: item.device_system_category_layer3 ? item.device_system_category_layer3 : null, status: item.status, symbol: 'image://' + baseImgUrl + "/upload/device_icon/" + item.device_image, value: item.value, deviceItems: item.deviceItems, deviceURL: item.deviceURL } if (item.selected) { obj.symbolSize = 50 } res.push(obj); }); return res; } const scatter_error_convertData = function (data) { //異常(圓點) let res = [], temp = []; data.forEach(function (item, index) { if (global_emergency_alarm_device_number != undefined && global_emergency_alarm_device_number != null) { if (global_emergency_alarm_device_number.findIndex(x => x.device_number == item.device_number) > -1 && item.device_system_category_layer3 != "C") { //如果有子節點,則只針對子節點操作 if (item.device_nodes != undefined && item.device_nodes != null && item.device_nodes.length > 0) { item.device_nodes.forEach(function (item_node, item_node_index) { //添加父節點相關資訊 item_node.device_system_category_layer3 = item.device_system_category_layer3; item_node.device_error_color = item.device_error_color; temp.push(item_node); }); } else { temp.push(item) } } } }); // if (global_emergency_alarm_device_number != undefined && global_emergency_alarm_device_number != null) { // temp = data.filter(function (item, index) { // return global_emergency_alarm_device_number.findIndex(x => x.device_number == item.device_number) > -1 && item.device_system_category_layer3 != "C"; // }); // } temp.map(function (item) { var obj = { device_guid: item.device_guid, device_number: item.device_number, full_name: item.full_name ? item.full_name : null, device_node_guid: item.device_node_guid ? item.device_node_guid : null, device_node_full_name: item.device_node_full_name ? item.device_node_full_name : null, device_system_category_layer3: item.device_system_category_layer3 ? item.device_system_category_layer3 : null, status: item.status, value: item.value, deviceItems: item.deviceItems, deviceURL: item.deviceURL } obj.itemStyle = { 'color': item.device_error_color }; res.push(obj); }); return res; } const scatter_error_icon_convertData = function (data) { //異常(icon) let res = [], temp = []; data.forEach(function (item, index) { if (global_emergency_alarm_device_number != undefined && global_emergency_alarm_device_number != null) { if (global_emergency_alarm_device_number.findIndex(x => x.device_number == item.device_number) > -1 && item.device_system_category_layer3 != "C") { //如果有子節點,則只針對子節點操作 if (item.device_nodes != undefined && item.device_nodes != null && item.device_nodes.length > 0) { item.device_nodes.forEach(function (item_node, item_node_index) { //添加父節點相關資訊 item_node.device_system_category_layer3 = item.device_system_category_layer3; item_node.device_error_color = item.device_error_color; item_node.device_image = item.device_image; temp.push(item_node); }); } else { temp.push(item) } } } }); if (global_emergency_alarm_device_number != undefined && global_emergency_alarm_device_number != null) { temp = data.filter(function (item, index) { return global_emergency_alarm_device_number.findIndex(x => x.device_number == item.device_number) > -1 && item.device_system_category_layer3 != "C"; }); } temp.map(function (item) { var obj = { device_guid: item.device_guid, device_number: item.device_number, full_name: item.full_name ? item.full_name : null, device_node_guid: item.device_node_guid ? item.device_node_guid : null, device_node_full_name: item.device_node_full_name ? item.device_node_full_name : null, device_system_category_layer3: item.device_system_category_layer3 ? item.device_system_category_layer3 : null, status: item.status, symbol: 'image://' + baseImgUrl + "/upload/device_icon/" + item.device_image, value: item.value, deviceItems: item.deviceItems, deviceURL: item.deviceURL } res.push(obj); }); return res; } const scatter_cctv_convertData = function (data) { //CCTV let res = []; let temp = data.filter(function (item, index) { return item.device_system_category_layer3 == "C"; }); temp.map(function (item) { var obj = { device_guid: item.device_guid, device_number: item.device_number, full_name: item.full_name, device_system_category_layer3: item.device_system_category_layer3, device_ip: item.device_ip, device_port: item.device_port, status: item.status, symbol: 'image://' + str_location_url + "/upload/device_icon/" + item.device_image, value: item.value } res.push(obj); }); return res; } if (!floChart.getOption()) { return; } var zoom = 0; if (floChart.getOption().geo && floChart.getOption().geo.length > 0) { zoom = floChart.getOption().geo[0].zoom; } if (zoom <= zoomToggle) { floChart.setOption({ series: [{ symbolOffset: [0, 0], data: scatter_symbol_convertData(currentData), //正常、關閉(圓點) }, { data: [] //正常、關閉(icon) }, { symbolOffset: [0, 0], data: scatter_error_convertData(currentData) //異常(圓點) }, { data: [] //異常(icon) }, { data: scatter_cctv_convertData(currentData) //CCTV }] }); } else { floChart.setOption({ series: [{ symbolOffset: [10, 10], data: scatter_symbol_convertData(currentData, zoom), //正常、關閉(圓點) }, { data: scatter_icon_convertData(currentData) //正常、關閉(icon) }, { symbolOffset: [10, 10], data: scatter_error_convertData(currentData) //異常(圓點) }, { data: scatter_error_icon_convertData(currentData) //異常(icon) }, { data: scatter_cctv_convertData(currentData) //CCTV }] }); } } function getNextFloor(floGuid = null) { let url = baseApiUrl + "/api/Device/GetNextFloor"; objSendData.Data = { floor_guid: floGuid } let result = ""; ytAjax = new YourTeam.Ajax(url, objSendData, function (res) { if (!res || res.code != "0000" || !res.data) { } else { result = res.data?.full_name; } }, null, "POST").send(); return result; } // show 3D 模型 function show3DModel(urn) { $(loadEle).Loading("start"); launchViewerForHotspot(urn, (viewer, nodeIds) => { let nextFloor = getNextFloor(pageAct.floGuid); let curFloTag = pageAct.floTag; if (!nextFloor) { toast_warning("超出樓層範圍"); return; } if (curFloTag?.startsWith("U")) { curFloTag = curFloTag.split("U")[1]; } if (nextFloor?.startsWith("U")) { nextFloor = nextFloor.split("U")[1]; } getLevelsData(curFloTag, nextFloor, function () { $(loadEle).Loading("close"); }); setHeatMap(); let elevOption = { viewer: viewer, ordPath: { "area_tag": pageAct.AreaTag, "building_tag": pageAct.buiTag, } } // 電梯移動訂閱程序載入 let forge3DElev = new Forge3DElevFull(elevOption); forge3DElev.bajaEndCallback = function () { endPageLoading(); } forge3DElev.init(); }); } function setHeatMap() { console.log("currentData", currentData) let devices = currentData.map(x => { return { roomDbId: !isNaN(parseInt(x.room_dbid)) ? parseInt(x.room_dbid) : -1, id: x.device_number, position: isJSON(x.device_coordinate_3d) ? JSON.parse(x.device_coordinate_3d) : {}, // x: 0, y: 25, z: -2.5 (3.35, -4.81, 12.88 sensorTypes: ["temperature", "humidity"] } }) let option = { devices: devices, } heatMap = new ADHeatMaps(option); heatMap.onComplete = () => { $.each(currentData, (idx, dev) => { heatMap.changeTemp(dev.device_number, dev._temp || 0); }) } } function getHotspotPoint(callback = null) { let url = baseApiUrl + "/api/GetDevForCor"; let sendData = { "device_area_tag": pageAct.AreaTag, "device_building_tag": pageAct.buiTag, "device_system_tag": pageAct.sysMainTag, "device_name_tag": pageAct.sysSubTag, "device_floor_tag": pageAct.floTag, }; objSendData.Data = sendData; ytAjax = new YourTeam.Ajax(url, objSendData, function (res) { if (!res || res.code != "0000" || !res.data) { } else { let myDataList = []; $.each(res.data, (idx, data) => { let item = {}; item.position = {}; if (data.device_coordinate_3d != null && isJSON(data.device_coordinate_3d)) { item.position = JSON.parse(data.device_coordinate_3d); } $.extend(item, data); myDataList.push(item); }) setHotspotPoint(myDataList); callback ? callback() : ""; } }, null, "POST").send(); } function setHotspotPoint(myDataList = []) { getHopspotPoint(myDataList); } onEvent("autodesk:click:sprite", "#forgeViewer", function (e, obj) { forgeUnFocusAll(); chartUnFocusAll(); let position = [obj.event.target.toolController.lastClickX, obj.event.target.toolController.lastClickY]; let devObj = obj.myData; let name = currentData.filter(x => x.device_guid == devObj.device_guid)[0]?.full_name; devObj.full_name = name; parentEle = crePosPopover(position, devObj); $(parentEle).click(); let option = floChart.getOption(); option.series.forEach(function (series) { series.data.forEach(function (point) { if (point.device_guid == devObj.device_guid) { point.symbolSize = 50; } }); }); floChart.setOption(option); }) onEvent("autodesk:clickOut:sprite", "#forgeViewer", function (e) { $(parentEle).YTTooltip("hide"); }) function forgeUnFocusAll() { $.each(currentData, (idx, cData) => { controlFocusHotspot(cData._dbId, false); }) } function chartUnFocusAll() { let option = floChart.getOption(); option.series.forEach(function (series) { series.data.forEach(function (point) { point.symbolSize = 10; }); }); floChart.setOption(option); } // 解除 series 聚焦 function chartUnFocus(ele) { let devGuid = $(ele).data("id"); let option = floChart.getOption(); option.series.forEach(function (series) { series.data.forEach(function (point) { if (point.device_guid == devGuid) { point.symbolSize = 10; } }); }); floChart.setOption(option); } </script>