2022-11-15 18:47:16 +08:00
|
|
|
|
<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();
|
2022-11-16 17:23:00 +08:00
|
|
|
|
/*let url = `${baseApiUrl}/upload/graph_manage/de08e7ee-9839-4403-90e5-754dec4e389b.jpg`*/
|
|
|
|
|
|
let url = `${baseImgUrl}/upload/floor_map/2e5be49c-f8e8-4977-b5b6-db4d95ff9691.svg`
|
|
|
|
|
|
|
|
|
|
|
|
download(url)
|
|
|
|
|
|
|
|
|
|
|
|
//ytAjax = new YourTeam.Ajax(url, null, function (res) {
|
|
|
|
|
|
// 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
|
|
|
|
|
|
// },
|
|
|
|
|
|
// });
|
|
|
|
|
|
// }
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// });
|
|
|
|
|
|
//}).send();
|
|
|
|
|
|
//$.get(`${baseImgUrl}/device/GetFloorSvg/c0de2199-e62b-4f82-b7f7-abacd4e1cd17.svg`, function (svg) {
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
//})
|
|
|
|
|
|
// .fail(function () {
|
|
|
|
|
|
// toast_warning("查無該樓層地圖")
|
|
|
|
|
|
// floChart.clear();
|
|
|
|
|
|
// });
|
2022-11-15 18:47:16 +08:00
|
|
|
|
}
|
|
|
|
|
|
</script>
|
