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>
|