261 lines
14 KiB
JavaScript
261 lines
14 KiB
JavaScript
$(function () {
|
||
alert("HI");
|
||
floorguid = localStorage.getItem('floorguid');
|
||
chartDom = document.getElementById("floor_map");
|
||
myChart = echarts.init(chartDom, null, { width: 'auto', });
|
||
console.log(floorguid);
|
||
|
||
$.ajax({
|
||
url: '/upload/meter_source_1_3.json',
|
||
type: 'GET',
|
||
dataType: 'json',
|
||
cache: false,
|
||
success: function (code, statut) {
|
||
console.log(code.reverse());
|
||
|
||
var filter3Floor = code.filter(function (i, n) {
|
||
return i.floor === 3;
|
||
});
|
||
|
||
currentData = filter3Floor[0].meter;
|
||
currentData = $.map(currentData, function (item) {
|
||
item.seleted = false;
|
||
return item;
|
||
});
|
||
|
||
console.log('currentData', currentData);
|
||
|
||
//#region 平面圖設定
|
||
$.get(`/upload/floor_map/${floorguid}.svg`, function (svg) {
|
||
echarts.registerMap('floor_svg', { svg: svg });
|
||
|
||
option = {
|
||
// animationDurationUpdate: 1500,
|
||
tooltip: {
|
||
formatter: function (params) {
|
||
return `名稱：${params.data.name}<br>
|
||
Guid：${params.data.guid}`
|
||
}
|
||
},
|
||
toolbox: { //工具欄
|
||
show: false
|
||
},
|
||
geo: {
|
||
map: 'floor_svg',
|
||
roam: true,
|
||
scaleLimit: { //限制放大縮小倍數
|
||
max: 8,
|
||
min: 1.5
|
||
},
|
||
layoutSize: '100%',
|
||
layoutCenter: ['50%', '50%'],
|
||
zoom: 1.5,
|
||
silent: true
|
||
},
|
||
series: [
|
||
{
|
||
type: 'scatter',
|
||
coordinateSystem: 'geo',
|
||
geoIndex: 0,
|
||
symbol: 'circle',
|
||
symbolSize: 10,
|
||
symbolOffset: [10, 10],
|
||
label: {
|
||
show: false
|
||
},
|
||
data: null,
|
||
z: 2
|
||
},
|
||
{ //放未選擇的
|
||
type: 'effectScatter',
|
||
coordinateSystem: 'geo',
|
||
geoIndex: 0,
|
||
showEffectOn: 'emphasis', //hover 才會顯示漣漪
|
||
symbol: "image://data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEAYABgAAD/2wBDAAMCAgMCAgMDAwMEAwMEBQgFBQQEBQoHBwYIDAoMDAsKCwsNDhIQDQ4RDgsLEBYQERMUFRUVDA8XGBYUGBIUFRT/2wBDAQMEBAUEBQkFBQkUDQsNFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBT/wAARCAAyADIDASIAAhEBAxEB/8QAHwAAAQUBAQEBAQEAAAAAAAAAAAECAwQFBgcICQoL/8QAtRAAAgEDAwIEAwUFBAQAAAF9AQIDAAQRBRIhMUEGE1FhByJxFDKBkaEII0KxwRVS0fAkM2JyggkKFhcYGRolJicoKSo0NTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uHi4+Tl5ufo6erx8vP09fb3+Pn6/8QAHwEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoL/8QAtREAAgECBAQDBAcFBAQAAQJ3AAECAxEEBSExBhJBUQdhcRMiMoEIFEKRobHBCSMzUvAVYnLRChYkNOEl8RcYGRomJygpKjU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6goOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4uPk5ebn6Onq8vP09fb3+Pn6/9oADAMBAAIRAxEAPwD8/bbw1YDQ9DlWGNGnsVlk/cxuWcySAsSyk9AOM1B/Z2ldcp/4Bxf/ABur+mOf7F0rJ4FmmPbrXrvw1+EUvi3wpaaomp2dssrSoIZtIS4YYbaTvLgn7vHp2qrpbmE5qGsmeJHTtK9U/wDAOL/43Sf2dpWOSh/7c4v/AI3X0xL8B7qCWS6/tnTC7ZUp/wAI9EE+bcD8vmYGPMOMDjC/3RjFn/Z0lu5p7htfVDIzSFI9KCKCdxICibCj5cADjlelNWZmq8O54CdP0juqf+Asf/xFOk0Wxa2kkijThSQTbRDp9Ur6Lh/ZzuRI0H9vWW1AsYkbQ42LAjrkydR69f0x4RrMRsrd48hgsD8jvhnH9KV0XCpGfws8x8TWsVj4k1a2hQRQw3csaIM/KocgDn2FFWPHAx4018f9RC4/9GNRUnQd3o83m6PZgjHlW0afX5Q2f/Hq+q/gMmfhPpZxnMs3H/bduvt6+2a+S9FfGlRDP/LKP/0Ule9/DH45aD4K8F2ej3llqk11C0zGS1iiaP55GYYLSKejDtTa0OLERlKKUV1PcVhJTOyQ8DqeOidf89Q1ONudr/JN36/e6Sfr6fVK83X9p7wwOtlrn/gLB/8AH6eP2nvC3ez1z8bSD/4/Tujh9nV/lPUbJzNffckG/afmHyjGOB78ivh3xBgxEkcNbOf/ACJLX0kn7T3hYSqxttbABzj7FAe//XevmPxBdeZZO6AgC0ccj/akP9aVl0OrDRlHm5lY4Dxz/wAjt4g/7CFx/wCjGoqT4gjb498Sj01O5H/kVqKR6J1Ph5RLYrGXVMiIbmzhf3MfJxz+VdNa2ulwWckc11aTTt/q5t86bPlI+6I8Hkqef7uO9N8GfC7xvrXhu21XTfBPiXU9LuY0eG/stGuZ7eQKioxWRIypwyMDg8FSO1bKfDHxzFFMh8AeI5RKANz6FdbkI6FT5fHXp3remot2k7GM7rVK5iw2enpFcLNqEDysgEDq0qLG29SWZfJJcbQy4BXBYHJxtItnZrazR/brOWZ2Qxzf6QPLA3bht8vB3ZXk9NvvV0eAfFscM0TeC9ccvj5n0e4DxkHsfLz9R3qs/hPX7eF7eXwrqaS7wwkfTZlkT1H3MkEdj0JzWvLTaXvdPPft8yG5X2GpFpq6ZJCxhkvixK3fnTBVHy4Hl+Vz0fnP8Q/u84eulUsZ1WRZQtqwLKDjOG9QPWtebQdVhhWGbw/eQyBiyzNZSI5HcH5fmGfyrL1fSL6LTbrfp90mYnA3W7jJwfaspqKtyu+n9IqLb3RxfxD/AOR/8Tf9hO6/9GtRS/EXj4g+J+//ABNLr/0a1FYG5z1FFFABRRRQAUUUUAFFFFAH/9k=",
|
||
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: 'effectScatter',
|
||
coordinateSystem: 'geo',
|
||
geoIndex: 0,
|
||
showEffectOn: 'render',
|
||
symbol: "image://data:image/jpeg;base64,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",
|
||
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
|
||
}
|
||
],
|
||
};
|
||
|
||
myChart.setOption(option);
|
||
resetData();
|
||
|
||
myChart.getZr().on('click', function (params) {
|
||
console.log("click", params);
|
||
var pixelPoint = [params.offsetX, params.offsetY];
|
||
var dataPoint = myChart.convertFromPixel({ geoIndex: 0 }, pixelPoint);
|
||
console.log(dataPoint);
|
||
// currentData.push([dataPoint[0], dataPoint[1], 1]);
|
||
// myChart.setOption(option);
|
||
});
|
||
|
||
//myChart.on('selectchanged', function (params) {
|
||
// var pixelPoint = [params.offsetX, params.offsetY];
|
||
// var dataPoint = myChart.convertFromPixel({ geoIndex: 0 }, pixelPoint);
|
||
// console.log("selectchanged", params);
|
||
// // currentData.push([dataPoint[0], dataPoint[1], 1]);
|
||
// // myChart.setOption(option);
|
||
|
||
// currentData = $.map(currentData, function (item) {
|
||
// item.seleted = false;
|
||
// return item;
|
||
// });
|
||
|
||
// if (params.selected.length > 0) {
|
||
// currentData[params.selected[0].seriesIndex - 1].seleted = true;
|
||
// }
|
||
|
||
// resetData();
|
||
//});
|
||
|
||
// myChart.getZr().on('mousewheel', function (params) {
|
||
// console.log(params)
|
||
// })
|
||
myChart.on('georoam', function (params) {
|
||
var zoom = myChart.getOption().geo[0].zoom;
|
||
console.log(zoom)
|
||
|
||
if (zoom <= 2) {
|
||
myChart.setOption({
|
||
geo: {
|
||
roam: 'scale'
|
||
},
|
||
series: [{
|
||
symbolOffset: [0, 0],
|
||
}, {
|
||
data: [],
|
||
}]
|
||
});
|
||
} else {
|
||
myChart.setOption({
|
||
geo: {
|
||
roam: true
|
||
},
|
||
});
|
||
}
|
||
resetData();
|
||
});
|
||
});
|
||
//#endregion
|
||
|
||
//#region 重設平面圖設備資料
|
||
function resetData() {
|
||
const scatter_symbol_convertData = function (data) {
|
||
var res = [];
|
||
|
||
res = $.map(data, function (item) {
|
||
delete item.symbol;
|
||
switch (item.status) {
|
||
case 0:
|
||
// item.push({ 'itemStyle': { 'color': '#ccc' } });
|
||
item.itemStyle = { 'color': '#ccc' };
|
||
break;
|
||
case 1:
|
||
// item.push({ 'itemStyle': { 'color': 'green' } });
|
||
item.itemStyle = { 'color': 'green' };
|
||
break;
|
||
case 2:
|
||
// item.push({ 'itemStyle': { 'color': 'red' } });
|
||
item.itemStyle = { 'color': 'red' };
|
||
break;
|
||
}
|
||
return item;
|
||
});
|
||
|
||
return res;
|
||
}
|
||
|
||
const effectScatter_unselect_convertData = function (data) {
|
||
var res = [];
|
||
|
||
res = data.filter(function (item, index) {
|
||
return item.seleted == false;
|
||
});
|
||
|
||
return res;
|
||
}
|
||
|
||
const effectScatter_selected_convertData = function (data) {
|
||
var res = [];
|
||
|
||
res = data.filter(function (item, index) {
|
||
return item.seleted == true;
|
||
});
|
||
|
||
return res;
|
||
}
|
||
|
||
var zoom = myChart.getOption().geo[0].zoom;
|
||
console.log("resetData", currentData);
|
||
|
||
if (zoom <= 2) {
|
||
myChart.setOption({
|
||
series: [{
|
||
symbolOffset: [0, 0],
|
||
data: scatter_symbol_convertData(currentData)
|
||
}, {
|
||
data: []
|
||
}, {
|
||
data: []
|
||
}]
|
||
});
|
||
} else {
|
||
myChart.setOption({
|
||
series: [{
|
||
symbolOffset: [10, 10],
|
||
data: scatter_symbol_convertData(currentData)
|
||
}, {
|
||
data: effectScatter_unselect_convertData(currentData),
|
||
}, {
|
||
data: effectScatter_selected_convertData(currentData),
|
||
}]
|
||
});
|
||
}
|
||
}
|
||
//#endregion
|
||
}
|
||
});
|
||
|
||
}); |