<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> <script src="lib/echarts.min.js"></script> <script> var floChart = null; var currentData = []; var allDeviceRowData = []; //所有設備原始資料 var global_emergency_alarm_device_number = []; var zoomToggle = 3; $(function () { initChart(); getFloData(); }) 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}`); /*allDeviceRowData = res.data[0].device_list;*/ 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; }); console.log(currentData) 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) { 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}` } 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); console.log(floChart) floChart.getZr().on('click', function (params) { console.log("click", params); var pixelPoint = [params.offsetX, params.offsetY]; var dataPoint = floChart.convertFromPixel({ geoIndex: 0 }, pixelPoint); console.log(dataPoint); temp_device_on_floor_map = [{ device_guid: selected_temp_device.device_guid, device_full_name: selected_temp_device.device_full_name, device_node_guid: selected_temp_device.device_node_guid ? selected_temp_device.device_node_guid : null, device_node_full_name: selected_temp_device.device_node_full_name ? selected_temp_device.device_node_full_name : null, status: selected_temp_device.status, value: dataPoint }]; // currentData.push([dataPoint[0], dataPoint[1], 1]); // floChart.setOption(option); }); //floChart.on('selectchanged', function (params) { // console.log("selectchanged", params); // // currentData.push([dataPoint[0], dataPoint[1], 1]); // // floChart.setOption(option); // currentData = $.map(currentData, function (item) { // item.selected = false; // return item; // }); // if (params.selected.length > 0) { // currentData[params.selected[0].seriesIndex - 1].selected = true; // } //}); // floChart.getZr().on('mousewheel', function (params) { // console.log(params) // }) floChart.on('georoam', function (params) { var zoom = floChart.getOption().geo[0].zoom; if (zoom <= 2.5) { /*ResetFloorMap();*/ floChart.setOption({ geo: { roam: 'scale' }, }); } else { floChart.setOption({ geo: { roam: true }, }); } resetData(); }); }) .fail(function () { toast_warning("查無該樓層地圖") floChart.clear(); }); } //訂閱設備的回傳值,並塞到全域變數 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 []; // } // }); 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_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 }] }); } } </script>