812 lines
37 KiB
HTML
812 lines
37 KiB
HTML
<style>
|
||
[id^=yt_tooltip] {
|
||
width: 450px;
|
||
}
|
||
</style>
|
||
|
||
<div class="row">
|
||
<div id="floChart" style="height : 80vh!important;width:100%"></div>
|
||
</div>
|
||
|
||
|
||
<script src="lib/echarts.min.js"></script>
|
||
<script>
|
||
var floChart = null;
|
||
var currentData = [];
|
||
var allDeviceRowData = []; //所有設備原始資料
|
||
var global_emergency_alarm_device_number = [];
|
||
var zoomToggle = 3;
|
||
$(function () {
|
||
initChart();
|
||
getFloData();
|
||
})
|
||
|
||
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: 2.5
|
||
},
|
||
layoutSize: '100%',
|
||
layoutCenter: [],
|
||
zoom: 2.5,
|
||
silent: true
|
||
},
|
||
series: [
|
||
{ //不管有無被選擇(圓點)
|
||
type: 'scatter',
|
||
coordinateSystem: 'geo',
|
||
geoIndex: 0,
|
||
symbol: 'circle',
|
||
symbolSize: 10,
|
||
symbolOffset: [10, 10],
|
||
label: {
|
||
show: false
|
||
},
|
||
/*data: currentData,*/
|
||
z: 2
|
||
},
|
||
{ //未選擇的設備(icon)
|
||
type: 'scatter',
|
||
coordinateSystem: 'geo',
|
||
geoIndex: 0,
|
||
symbolSize: 30,
|
||
label: {
|
||
formatter: '{b}',
|
||
position: 'bottom',
|
||
show: true,
|
||
backgroundColor: 'orange'
|
||
},
|
||
emphasis: {
|
||
label: {
|
||
show: true,
|
||
fontSize: '20',
|
||
fontWeight: 'bold',
|
||
color: 'yellow'
|
||
}
|
||
},
|
||
selectedMode: 'single',
|
||
data: null,
|
||
z: 1
|
||
},
|
||
{ //被選擇的設備(icon)
|
||
type: 'effectScatter',
|
||
coordinateSystem: 'geo',
|
||
geoIndex: 0,
|
||
showEffectOn: 'render',
|
||
symbolSize: 30,
|
||
label: {
|
||
formatter: '{b}',
|
||
position: 'bottom',
|
||
show: true,
|
||
backgroundColor: 'orange'
|
||
},
|
||
emphasis: {
|
||
label: {
|
||
show: true,
|
||
fontSize: '20',
|
||
fontWeight: 'bold',
|
||
color: 'yellow'
|
||
}
|
||
},
|
||
selectedMode: 'single',
|
||
data: null,
|
||
z: 1
|
||
},
|
||
{ //編輯模式底下的設備(圓點，只會有一個)
|
||
type: 'scatter',
|
||
coordinateSystem: 'geo',
|
||
geoIndex: 0,
|
||
symbol: 'circle',
|
||
symbolSize: 10,
|
||
symbolOffset: [10, 10],
|
||
label: {
|
||
show: false
|
||
},
|
||
/*data: currentData,*/
|
||
z: 2
|
||
},
|
||
{ //編輯模式底下的設備(icon，只會有一個)
|
||
type: 'scatter',
|
||
coordinateSystem: 'geo',
|
||
geoIndex: 0,
|
||
symbolSize: 30,
|
||
label: {
|
||
formatter: '{b}',
|
||
position: 'bottom',
|
||
show: true,
|
||
backgroundColor: 'orange'
|
||
},
|
||
emphasis: {
|
||
label: {
|
||
show: true,
|
||
fontSize: '20',
|
||
fontWeight: 'bold',
|
||
color: 'yellow'
|
||
}
|
||
},
|
||
data: null,
|
||
z: 1
|
||
},
|
||
],
|
||
};
|
||
|
||
floChart.setOption(option);
|
||
|
||
|
||
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 };
|
||
|
||
if (item.selected) {
|
||
obj.symbolSize = 60
|
||
}
|
||
console.log(item.zoom)
|
||
if (item.zoom > zoomToggle) {
|
||
obj.symbolSize = 10
|
||
}
|
||
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> |