251 lines
9.1 KiB
HTML
251 lines
9.1 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();
|
||
/*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();
|
||
// });
|
||
}
|
||
</script> |