ibms-dome/Frontend/_sysMonFloor.html

243 lines
8.5 KiB
HTML
Raw Normal View History

<style>
[id^=yt_tooltip] {
width: 450px;
}
</style>
<div class="row">
<div id="floChart"></div>
</div>
<script src="lib/echarts.min.js"></script>
<script>
var floChart = null;
$(function () {
initChart();
chartHandler();
})
function initChart() {
let chartDom = $("#floChart")[0];
floChart = echarts.init(chartDom, null, { width: 'auto' });
}
function getSvg() {
"/upload/floor_map/c0de2199-e62b-4f82-b7f7-abacd4e1cd17.svg"
}
function chartHandler() {
floChart.clear();
$.get(`${baseImgUrl}/upload/floor_map/c0de2199-e62b-4f82-b7f7-abacd4e1cd17.svg`, 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.device_full_name}<br>
Guid${params.data.device_guid}`
}
}
},
toolbox: { //工具欄
show: false
},
geo: {
map: 'floor_svg',
roam: true,
scaleLimit: { //限制放大縮小倍數
max: 32,
min: 2.5
},
layoutSize: '100%',
layoutCenter: ['50%', '50%'],
zoom: 2.5,
silent: true
},
series: [
{ //不管有無被選擇(圓點)
type: 'scatter',
coordinateSystem: 'geo',
geoIndex: 0,
symbol: 'circle',
symbolSize: 10,
symbolOffset: [10, 10],
label: {
show: false
},
data: currentData,
z: 2
},
{ //未選擇的設備(icon)
type: 'scatter',
coordinateSystem: 'geo',
geoIndex: 0,
symbolSize: 30,
label: {
formatter: '{b}',
position: 'bottom',
show: true,
backgroundColor: 'orange'
},
emphasis: {
label: {
show: true,
fontSize: '20',
fontWeight: 'bold',
color: 'yellow'
}
},
selectedMode: 'single',
data: null,
z: 1
},
{ //被選擇的設備(icon)
type: 'effectScatter',
coordinateSystem: 'geo',
geoIndex: 0,
showEffectOn: 'render',
symbolSize: 30,
label: {
formatter: '{b}',
position: 'bottom',
show: true,
backgroundColor: 'orange'
},
emphasis: {
label: {
show: true,
fontSize: '20',
fontWeight: 'bold',
color: 'yellow'
}
},
selectedMode: 'single',
data: null,
z: 1
},
{ //編輯模式底下的設備(圓點,只會有一個)
type: 'scatter',
coordinateSystem: 'geo',
geoIndex: 0,
symbol: 'circle',
symbolSize: 10,
symbolOffset: [10, 10],
label: {
show: false
},
data: currentData,
z: 2
},
{ //編輯模式底下的設備(icon只會有一個)
type: 'scatter',
coordinateSystem: 'geo',
geoIndex: 0,
symbolSize: 30,
label: {
formatter: '{b}',
position: 'bottom',
show: true,
backgroundColor: 'orange'
},
emphasis: {
label: {
show: true,
fontSize: '20',
fontWeight: 'bold',
color: 'yellow'
}
},
data: null,
z: 1
},
],
};
floChart.setOption(option);
floChart.getZr().on('click', function (params) {
console.log("click", params);
var pixelPoint = [params.offsetX, params.offsetY];
var dataPoint = floChart.convertFromPixel({ geoIndex: 0 }, pixelPoint);
console.log(dataPoint);
if (floor_map_mode == "edit") {
temp_device_on_floor_map = [{
device_guid: selected_temp_device.device_guid,
device_full_name: selected_temp_device.device_full_name,
device_node_guid: selected_temp_device.device_node_guid ? selected_temp_device.device_node_guid : null,
device_node_full_name: selected_temp_device.device_node_full_name ? selected_temp_device.device_node_full_name : null,
status: selected_temp_device.status,
value: dataPoint
}];
}
// currentData.push([dataPoint[0], dataPoint[1], 1]);
// floChart.setOption(option);
});
floChart.on('selectchanged', function (params) {
console.log("selectchanged", params);
// currentData.push([dataPoint[0], dataPoint[1], 1]);
// floChart.setOption(option);
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
},
});
}
});
})
.fail(function () {
toast_warning("查無該樓層地圖")
floChart.clear();
});
}
</script>