243 lines
8.5 KiB
HTML
243 lines
8.5 KiB
HTML
<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> |