+
-
-
-
-
{{time}}
-
-
-
- dv-border-box-12
- dv-border-box-12
- dv-border-box-12
-
-
- dv-border-box-12
- dv-border-box-12
- dv-border-box-12
-
+
{{ time }}
+
+
+
+
产品总数：10
+
产品总数：10
+
产品总数：10
+
+
+
产品总数：10
+
产品总数：10
+
产品总数：10
-
-
-
-
-
-
-
+
-
+
- -->
+
@@ -93,14 +95,19 @@ import resize from '../dashboard/mixins/resize';
import boxBoardTit from './boxBoardTit';
import boxBoardBody from './boxBoardBody';
-import { parseTime } from "@/utils/ruoyi";
+import leftTop from './components/leftTop';
+
+import { parseTime } from '@/utils/ruoyi';
export default {
name: 'Chart',
mixins: [resize],
- components: { boxBoardTit, boxBoardBody },
- data () {
+ components: { boxBoardTit, boxBoardBody, leftTop },
+ data() {
return {
+ bottomChart: null,
+ topChart: null,
+ centerChart: null,
bmapChart: null,
ticketAllChart: null,
alarmAllChart: null,
@@ -114,33 +121,33 @@ export default {
workStatusList: {
'1': '待接单',
'2': '待回单',
- '3': '已回单',
+ '3': '已回单'
},
myStyleJson: [
{
- "featureType": "land",
- "elementType": "geometry",
- "stylers": {
- "color": "#f5f6f7ff"
+ featureType: 'land',
+ elementType: 'geometry',
+ stylers: {
+ color: '#f5f6f7ff'
}
}
]
- }
+ };
},
computed: {
- time () {
- return parseTime(this.date, '{h} : {i} : {s}')
+ time() {
+ return parseTime(this.date, '{h} : {i} : {s}');
}
},
- mounted () {
+ mounted() {
let timer = setInterval(() => {
- this.date = new Date()
+ this.date = new Date();
}, 1000);
this.$once('hook:beforeDestroy', () => {
clearInterval(timer);
timer = null;
- })
+ });
this.getData().then(({ code, msg, list, work, activity, devCount }) => {
if (200 == code) {
@@ -150,50 +157,51 @@ export default {
id: v.id,
deviceId: v.deviceId,
deviceName: v.deviceName,
- value: [parseFloat(v.longitude), parseFloat(v.latitude),]
- })
- })
+ value: [parseFloat(v.longitude), parseFloat(v.latitude)]
+ });
+ });
this.spotList = spotList;
this.devCount = devCount;
-
this.$nextTick(() => {
- this.initBmpChart()
- this.initTicketAllChart(work)
- this.initAlarmAllChart(activity)
+ this.initBmpChart();
+ // this.initTicketAllChart(work);
+ // this.initAlarmAllChart(activity);
+ this.initCenterChart(activity);
+ this.initBottomChart();
+ this.initTopChart();
+ this.initAlarmTrendChart();
});
}
- })
-
- this.initAlarmTrendChart()
- this.getTicketData().then(({ code, msg, day, month }) => {
- if (200 == code) {
- this.alarmTrendDay = day;
- this.alarmTrendMonth = month;
- this.$nextTick(() => {
- this.alarmTrendChartSetDay()
- });
- }
- })
+ });
+ // this.getTicketData().then(({ code, msg, day, month }) => {
+ // if (200 == code) {
+ // this.alarmTrendDay = day;
+ // this.alarmTrendMonth = month;
+ // this.$nextTick(() => {
+ // this.alarmTrendChartSetDay();
+ // });
+ // }
+ // });
},
methods: {
- getData () {
+ getData() {
return request({
url: '/system/device/deviceSignal',
- method: 'get',
- })
+ method: 'get'
+ });
},
- getTicketData () {
+ getTicketData() {
return request({
url: '/system/warning/warningList',
- method: 'get',
- })
+ method: 'get'
+ });
},
- initTicketAllChart (ticketAll) {
+ initTicketAllChart(ticketAll) {
if (!this.ticketAllChart) {
- this.ticketAllChart = echarts.init(this.$refs.ticketAll)
+ this.ticketAllChart = echarts.init(this.$refs.ticketAll);
}
let legends = Object.values(this.workStatusList);
@@ -202,9 +210,9 @@ export default {
return {
name: this.workStatusList[v.workStatus],
value: v.workCount
- }
- })
- console.log(data, ticketAll)
+ };
+ });
+ console.log(data, ticketAll);
let option = {
tooltip: {
trigger: 'item',
@@ -234,7 +242,7 @@ export default {
emphasis: {
label: {
show: true,
- fontSize: '20',
+ fontSize: '20'
}
},
labelLine: {
@@ -246,140 +254,230 @@ export default {
};
this.ticketAllChart.setOption(option);
},
- initAlarmTrendChart () {
- if (!this.alarmTrendChart) {
- this.alarmTrendChart = echarts.init(this.$refs.alarmTrend)
- }
- this.alarmTrendChart.setOption({
- visualMap: [{
- show: false,
- type: 'continuous',
- seriesIndex: 0
- }],
- toolbox: {
- show: true,
- feature: {
- // myHour: {
- // show: true,
- // title: '每小时',
- // name: '时',
- // icon: 'path://M113.48438,148.58984H248.25v318.35938h-30.85938v-32.42188h-73.04688v37.10938h-30.85938V148.58984zM217.39062,177.49609h-73.04688v98.82812h73.04688V177.49609zM144.34375,405.62109h73.04688V304.44922h-73.04688V405.62109zM261.14062,197.80859H399.8125v-86.32812h31.25v86.32812h55.46875v28.90625H431.0625v210.15625c0,34.89355-16.66895,52.34375-50,52.34375c-15.10645,0-37.24023-0.39062-66.40625-1.17188c-1.30273-9.375-3.3877-20.3125-6.25-32.8125c27.34375,2.08105,48.69727,3.125,64.0625,3.125c18.22852,0,27.34375-9.24707,27.34375-27.73438V226.71484H261.14062V197.80859zM304.89062,264.21484c20.83105,38.02197,36.58789,68.35938,47.26562,91.01562c-6.77148,3.125-17.1875,8.33398-31.25,15.625c-10.15625-24.7373-24.74023-55.59668-43.75-92.57812L304.89062,264.21484z',
- // onclick: function () {
- // console.log('每小时')
- // }
- // },
- myDay: {
- show: true,
- title: '每天',
- name: '天',
- icon: 'path://M105.46875,450.16797c97.5249-41.53418,154.29688-99.34668,170.3125-173.4375H110.54688v-29.6875h169.33594c1.17188-18.4873,1.75781-50.39062,1.75781-95.70312H132.03125v-29.6875h337.5v29.6875H316.01562c-0.2627,27.21582-0.78125,59.11572-1.5625,95.70312h175v29.6875H319.72656c24.86914,82.55273,83.26758,137.7627,175.19531,165.625c-10.67773,12.75977-19.66211,23.56543-26.95312,32.42188c-84.89648-34.24707-140.75586-90.82031-167.57812-169.72656c-20.5752,73.4375-77.4751,131.70508-170.70312,174.80469C124.21875,472.82422,116.14355,462.92773,105.46875,450.16797z',
- onclick: () => {
- this.alarmTrendChartSetDay()
- }
- },
- myMonth: {
- show: true,
- title: '每月',
- name: '月',
- icon: 'path://M225.19531,349.82422c-5.85938,50.2627-25.45801,95.70312-58.78906,136.32812c-8.33447-8.0752-17.31885-15.8877-26.95312-23.4375c25.25928-27.34375,42.1875-59.89355,50.78125-97.65625c5.9873-27.8623,8.98438-66.40625,8.98438-115.625V114.27734h260.9375v304.6875c0,38.54102-18.35938,57.8125-55.07812,57.8125c-15.36523,0-35.15625-0.2627-59.375-0.78125c-1.30273-9.375-3.25586-20.3125-5.85938-32.8125c23.95605,1.5625,42.83789,2.34375,56.64062,2.34375c21.09375,0,31.64062-10.28711,31.64062-30.85938v-64.84375H225.19531zM228.32031,321.30859H428.125v-75H231.25C231.25,272.35254,230.27344,297.35254,228.32031,321.30859z M231.25,143.57422v74.21875h196.875v-74.21875H231.25z',
- onclick: () => {
- this.alarmTrendChartSetMonth()
- }
- },
+ initAlarmTrendChart() {
+ this.alarmTrendChart = echarts.init(this.$refs.alarmTrend);
+ let option = {
+ xAxis: {
+ type: 'category',
+ data: [
+ '01月',
+ '02月',
+ '03月',
+ '04月',
+ '05月',
+ '06月',
+ '07月',
+ '08月',
+ '09月',
+ '10月',
+ '11月',
+ '12月'
+ ],
+ axisLine: {
+ //这是x轴文字颜色
+ lineStyle: {
+ color: '#709fd9'
+ }
}
},
- title: [{
- left: 'center',
- text: ''
- }],
- tooltip: {
- trigger: 'axis',
- formatter: '{b0}
告警数: {c0}'
+ yAxis: {
+ type: 'value',
+ axisLine: {
+ //这是x轴文字颜色
+ lineStyle: {
+ color: '#709fd9'
+ }
+ }
},
- textStyle: {
- color: '#ffffff'
- },
- xAxis: [{
- data: [],
- axisLabel: { show: false }
- }],
- yAxis: [{
- splitLine: { show: false }
- }],
- grid: [{
- containLabel: true,
- left: '5',
- right: '5',
- top: '20%',
- height: '70%'
- }],
- series: [{
- type: 'line',
- showSymbol: false,
- data: []
- }]
- });
- this.alarmTrendChart.showLoading();
+ series: [
+ {
+ data: [
+ 820,
+ 932,
+ 901,
+ 934,
+ 1290,
+ 1330,
+ 1320,
+ 820,
+ 932,
+ 901,
+ 934,
+ 1290
+ ],
+ // 线的颜色
+ lineStyle: {
+ color: '#06ccf9'
+ },
+ // 点的颜色
+ itemStyle: {
+ normal: {
+ color: '#06ccf9'
+ }
+ },
+ type: 'line',
+ smooth: true
+ }
+ ]
+ };
+ this.alarmTrendChart.setOption(option);
+ // this.alarmTrendChart.showLoading();
},
- alarmTrendChartSetDay () {
+ alarmTrendChartSetDay() {
let dateX = [];
let dateY = [];
this.alarmTrendDay.forEach(v => {
- dateX.push(v.datas)
- dateY.push(v.count)
+ dateX.push(v.datas);
+ dateY.push(v.count);
});
- this.alarmTrendChartSetData(dateX, dateY)
+ this.alarmTrendChartSetData(dateX, dateY);
this.alarmTrendChart.hideLoading();
},
- alarmTrendChartSetMonth () {
+ alarmTrendChartSetMonth() {
let dateX = [];
let dateY = [];
this.alarmTrendMonth.forEach(v => {
- dateX.push(v.datas)
- dateY.push(v.count)
+ dateX.push(v.datas);
+ dateY.push(v.count);
});
- this.alarmTrendChartSetData(dateX, dateY)
+ this.alarmTrendChartSetData(dateX, dateY);
this.alarmTrendChart.hideLoading();
},
- alarmTrendChartSetData (dateX, dateY) {
+ alarmTrendChartSetData(dateX, dateY) {
this.alarmTrendChart.setOption({
- visualMap: [{
- show: false,
- type: 'continuous',
- seriesIndex: 0,
- min: Math.min.apply(null, dateY),
- max: Math.max.apply(null, dateY)
- }],
- xAxis: [{
- data: dateX
- }],
- series: [{
- type: 'line',
- showSymbol: false,
- data: dateY
- }]
- })
+ visualMap: [
+ {
+ show: false,
+ type: 'continuous',
+ seriesIndex: 0,
+ min: Math.min.apply(null, dateY),
+ max: Math.max.apply(null, dateY)
+ }
+ ],
+ xAxis: [
+ {
+ data: dateX
+ }
+ ],
+ series: [
+ {
+ type: 'line',
+ showSymbol: false,
+ data: dateY
+ }
+ ]
+ });
},
-
- initAlarmAllChart (alarmAll) {
- if (!this.alarmAllChart) {
- this.alarmAllChart = echarts.init(this.$refs.alarmAll)
- }
- let snapAlarmAll = []
+ initCenterChart(alarmAll) {
+ // initCenterChart1(alarmAll) {
+ this.centerChart = echarts.init(this.$refs.centerRight);
+ let snapAlarmAll = [];
for (let index = 0; index < 4; index++) {
- let snap = alarmAll.find(v => v.signalLevel == index + 1)
+ let snap = alarmAll.find(v => v.signalLevel == index + 1);
if (snap) {
- snapAlarmAll.push(snap.warningCount)
+ snapAlarmAll.push(snap.warningCount);
} else {
- snapAlarmAll.push(0)
+ snapAlarmAll.push(0);
}
}
- let level4 = '四级告警 ' + snapAlarmAll[3]
- let level3 = '三级告警 ' + snapAlarmAll[2]
- let level2 = '二级告警 ' + snapAlarmAll[1]
- let level1 = '一级告警 ' + snapAlarmAll[0]
+ let option = {
+ xAxis: {
+ type: 'category',
+ data: ['一级告警', '二级告警', '三级告警', '四级告警'],
+ axisLine: {
+ //这是x轴文字颜色
+ lineStyle: {
+ color: '#709fd9'
+ }
+ }
+ },
+ yAxis: {
+ type: 'value',
+ axisLine: {
+ //这是x轴文字颜色
+ lineStyle: {
+ color: '#709fd9'
+ }
+ },
+ splitLine: {
+ //网格线
+ lineStyle: {
+ type: 'dashed' //设置网格线类型 dotted：虚线 solid:实线
+ },
+ show: false //隐藏或显示
+ }
+ },
+ series: [
+ {
+ type: 'bar',
+ barWidth: 20,
+ data: [
+ {
+ value: snapAlarmAll[0],
+ itemStyle: {
+ color: '#19f1ec'
+ }
+ },
+ {
+ value: snapAlarmAll[1],
+ itemStyle: {
+ color: '#e070dc'
+ }
+ },
+ {
+ value: snapAlarmAll[2],
+ itemStyle: {
+ color: '#f1d019'
+ }
+ },
+ {
+ value: snapAlarmAll[3],
+ itemStyle: {
+ color: '#ff4c4c'
+ }
+ }
+ ], //数据
+ itemStyle: {
+ normal: {
+ label: {
+ show: true, //开启显示
+ position: 'top', //在上方显示
+ textStyle: {
+ //数值样式
+ color: '#709fd9',
+ fontSize: 16
+ }
+ }
+ }
+ }
+ }
+ ]
+ };
+ this.centerChart.setOption(option);
+ },
+
+ initAlarmAllChart(alarmAll) {
+ // initCenterChart(alarmAll) {
+ // if (!this.alarmAllChart) {
+ // this.alarmAllChart = echarts.init(this.$refs.alarmAll);
+ // }
+ let snapAlarmAll = [];
+ for (let index = 0; index < 4; index++) {
+ let snap = alarmAll.find(v => v.signalLevel == index + 1);
+ if (snap) {
+ snapAlarmAll.push(snap.warningCount);
+ } else {
+ snapAlarmAll.push(0);
+ }
+ }
+ console.log(snapAlarmAll);
+ debugger
+ let level4 = '四级告警 ' + snapAlarmAll[3];
+ let level3 = '三级告警 ' + snapAlarmAll[2];
+ let level2 = '二级告警 ' + snapAlarmAll[1];
+ let level1 = '一级告警 ' + snapAlarmAll[0];
let levels = [level1, level2, level3, level4];
- let levelsColors = ['#ee504f', '#edb14f', '#42cabe', '#407ebb']
+ let levelsColors = ['#ee504f', '#edb14f', '#42cabe', '#407ebb'];
let freeStyle = {
normal: {
color: 'rgba(192,192,192,0.2)',
@@ -412,7 +510,7 @@ export default {
}
};
let maxRadius = this.$refs.alarmAll.offsetHeight / 3;
- let sum = eval(snapAlarmAll.join("+"));
+ let sum = eval(snapAlarmAll.join('+'));
let series = [];
for (let index = 0; index < snapAlarmAll.length; index++) {
@@ -421,7 +519,10 @@ export default {
clockWise: false,
hoverAnimation: false,
center: ['70%', '50%'],
- radius: [maxRadius * (0.85 - index * 0.2), maxRadius * (1 - index * 0.2)],
+ radius: [
+ maxRadius * (0.85 - index * 0.2),
+ maxRadius * (1 - index * 0.2)
+ ],
itemStyle: dataStyle,
data: [
{
@@ -439,15 +540,16 @@ export default {
}
},
{
- value: sum == 0 ? 1 : (sum - snapAlarmAll[index]),
+ value: sum == 0 ? 1 : sum - snapAlarmAll[index],
name: 'invisible',
itemStyle: freeStyle
}
]
- }
- series.push(snap)
+ };
+ series.push(snap);
}
- this.alarmAllChart.setOption({ //加载数据图表
+ this.alarmAllChart.setOption({
+ //加载数据图表
legend: {
show: true,
orient: 'vertical',
@@ -464,28 +566,152 @@ export default {
series: series
});
},
- initBmpChart () {
- if (!this.bmapChart) {
- this.bmapChart = echarts.init(this.$refs.bmap)
- }
- this.setOptions()
- },
- setOptions () {
+ initBottomChart() {
+ this.bottomChart = echarts.init(this.$refs.bottomLeftChart);
let option = {
- title: { //标题
+ xAxis: {
+ type: 'category',
+ data: [
+ '01月',
+ '02月',
+ '03月',
+ '04月',
+ '05月',
+ '06月',
+ '07月',
+ '08月',
+ '09月',
+ '10月',
+ '11月',
+ '12月'
+ ],
+ axisLine: {
+ //这是x轴文字颜色
+ lineStyle: {
+ color: '#709fd9'
+ }
+ }
+ },
+ yAxis: {
+ type: 'value',
+ axisLine: {
+ //这是y轴文字颜色
+ lineStyle: {
+ color: '#709fd9'
+ }
+ },
+ splitLine: {
+ //网格线
+ lineStyle: {
+ type: 'dashed' //设置网格线类型 dotted：虚线 solid:实线
+ },
+ show: true //隐藏或显示
+ }
+ },
+ legend: {
+ bottom: 10
+ },
+ series: [
+ {
+ type: 'bar',
+ barWidth: 20,
+ data: [100, 200, 300, 400, 500, 600, 700, 800, 900, 1000, 900, 800], //数据
+ itemStyle: {
+ normal: {
+ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+ { offset: 0, color: '#06B5D7' }, //柱图渐变色
+ { offset: 0.5, color: '#44C0C1' }, //柱图渐变色
+ { offset: 1, color: '#71C8B1' } //柱图渐变色
+ ])
+ },
+ emphasis: {
+ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+ { offset: 0, color: '#71C8B1' }, //柱图高亮渐变色
+ { offset: 0.7, color: '#44C0C1' }, //柱图高亮渐变色
+ { offset: 1, color: '#06B5D7' } //柱图高亮渐变色
+ ])
+ }
+ },
+ legend: {
+ bottom: 10,
+ textStyle: {
+ color: '#fff'
+ }
+ }
+ }
+ ]
+ };
+ this.bottomChart.setOption(option);
+ },
+ initTopChart() {
+ this.topChart = echarts.init(this.$refs.topLeftChart);
+ let option = {
+ tooltip: {
+ trigger: 'item',
+ formatter: "{a}
{b}: {c} ({d}%)"
+ },
+ legend: {
+ orient: 'vertical',
+ left: 'left',
+ textStyle: {
+ color: '#fff'
+ }
+ },
+ series : [{
+ name: '设备详情',
+ type: 'pie',
+ radius: ['40%', '70%'],
+ center: ['50%', '50%'],
+ data:[
+ { value: 580, name: '锐能设备',itemStyle: { color: '#0a7ef6' } },
+ { value: 484, name: '铁塔设备',itemStyle: { color: '#77c8ff' } },
+ ],
+ itemStyle: {
+ emphasis: {
+ shadowBlur: 10,
+ shadowOffsetX: 0,
+ shadowColor: 'rgba(0, 0, 0, 0.5)'
+ },
+ normal:{
+ label:{
+ show: true,
+ // formatter: '{b} : {c} ({d}%)'
+ },
+ labelLine :{show:true}
+ }
+ }
+ }
+ ]
+ };
+ this.topChart.setOption(option);
+ },
+ initBmpChart() {
+ if (!this.bmapChart) {
+ this.bmapChart = echarts.init(this.$refs.bmap);
+ }
+ this.setOptions();
+ },
+ setOptions() {
+ let option = {
+ title: {
+ //标题
textStyle: {
color: '#fff'
},
- left: 'center' //标题位置，居中
+ left: 'center' //标题位置，居中
},
tooltip: {
- formatter: function (params) {
+ formatter: function(params) {
return (
- "设备名: " + params.data.deviceName + "
设备sn: " + params.data.deviceId
+ '设备名: ' +
+ params.data.deviceName +
+ '
设备sn: ' +
+ params.data.deviceId
);
}
},
- bmap: { //百度地图的设置
+ bmap: {
+ //百度地图的设置
center: [104.114129, 37.550339],
zoom: 5,
roam: true,
@@ -499,7 +725,7 @@ export default {
type: 'effectScatter',
coordinateSystem: 'bmap',
data: this.spotList,
- symbolSize: function (val, params) {
+ symbolSize: function(val, params) {
// console.log(val, params)
return 6;
},
@@ -512,49 +738,52 @@ export default {
rippleEffect: { brushType: 'stroke' },
hoverAnimation: true,
animation: false,
- itemStyle: { normal: { color: 'red', shadowBlur: 10, shadowColor: 'red' } },
+ itemStyle: {
+ normal: { color: 'red', shadowBlur: 10, shadowColor: 'red' }
+ },
zlevel: 1
- },
+ }
]
};
- loadBMap("mKEqGSlYu4puhYjqtRZlsyVOtstkQ9A6")
- .then(() => {
- // 配置option
- this.bmapChart.setOption(option)
- let bmap = this.bmapChart.getModel().getComponent('bmap').getBMap();
- bmap.enableContinuousZoom(); //启用地图惯性拖拽，默认禁用
- bmap.addControl(new BMap.OverviewMapControl()); //添加缩略地图控件
- bmap.enableScrollWheelZoom();//启用滚轮放大缩小
- // bmap.addControl(new BMap.MapTypeControl());//添加地图类型控件
- bmap.disable3DBuilding();
- let zoomdrag = (() => {
- let bounds = bmap.getBounds()
- let sw = bounds.getSouthWest()//获取西南角的经纬度(左下端点)
- let ne = bounds.getNorthEast();//获取东北角的经纬度(右上端点)
- let wn = new BMap.Point(sw.lng, ne.lat);//获取西北角的经纬度(左上端点)
- let es = new BMap.Point(ne.lng, sw.lat);//获取东南角的经纬度(右下端点)
- // this.lng = bmap.getCenter().lng//经度
- // this.lat = bmap.getCenter().lat//纬度
- // this.lngLatZoom = [Number(this.lng.toFixed(2)), Number(this.lat.toFixed(2)), this.zoom]//经度 纬度 放大级别 用于watch监听
- this.zoom = bmap.getZoom()//获取缩放级别
- console.log('zoom', bmap.getZoom())
- })
- bmap.addEventListener("zoomend", zoomdrag) //监听地图缩放
- bmap.addEventListener("dragend", zoomdrag) //监听地图拖拽平移
+ loadBMap('mKEqGSlYu4puhYjqtRZlsyVOtstkQ9A6').then(() => {
+ // 配置option
+ this.bmapChart.setOption(option);
+ let bmap = this.bmapChart
+ .getModel()
+ .getComponent('bmap')
+ .getBMap();
+ bmap.enableContinuousZoom(); //启用地图惯性拖拽，默认禁用
+ bmap.addControl(new BMap.OverviewMapControl()); //添加缩略地图控件
+ bmap.enableScrollWheelZoom(); //启用滚轮放大缩小
+ // bmap.addControl(new BMap.MapTypeControl());//添加地图类型控件
+ bmap.disable3DBuilding();
+ let zoomdrag = () => {
+ let bounds = bmap.getBounds();
+ let sw = bounds.getSouthWest(); //获取西南角的经纬度(左下端点)
+ let ne = bounds.getNorthEast(); //获取东北角的经纬度(右上端点)
+ let wn = new BMap.Point(sw.lng, ne.lat); //获取西北角的经纬度(左上端点)
+ let es = new BMap.Point(ne.lng, sw.lat); //获取东南角的经纬度(右下端点)
+ // this.lng = bmap.getCenter().lng//经度
+ // this.lat = bmap.getCenter().lat//纬度
+ // this.lngLatZoom = [Number(this.lng.toFixed(2)), Number(this.lat.toFixed(2)), this.zoom]//经度 纬度 放大级别 用于watch监听
+ this.zoom = bmap.getZoom(); //获取缩放级别
+ console.log('zoom', bmap.getZoom());
+ };
+ bmap.addEventListener('zoomend', zoomdrag); //监听地图缩放
+ bmap.addEventListener('dragend', zoomdrag); //监听地图拖拽平移
- this.bmapChart.on('click', function (params) {
- if (params.componentType == "series") {
- let { id } = params.data;
- window.open(`/hardware/device/detail?id=${id}`);
- }
- })
- })
- },
+ this.bmapChart.on('click', function(params) {
+ if (params.componentType == 'series') {
+ let { id } = params.data;
+ window.open(`/hardware/device/detail?id=${id}`);
+ }
+ });
+ });
+ }
}
-}
+};
-
\ No newline at end of file
+.my_context {
+ width: 100%;
+ height: 100%;
+ display: flex;
+ justify-content: space-around;
+ align-items: center;
+ .my_item {
+ display: flex;
+ flex-direction: column;
+ span {
+ margin-top: 10px;
+ }
+ /deep/ svg path:first-child {
+ stroke: #19f1ec;
+ }
+ }
+}
+.bottom_left {
+ width: 100%;
+ height: 100%;
+ padding-top: 15px;
+}
+.my_cenbottom{
+ display: flex;
+ justify-content: space-evenly;
+ margin-top: 23px;
+ div{
+ width: 210px;
+ height: 50px;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ background-image: url('../../assets/image/xiaokuang.png');
+ background-size: cover;
+ span{
+ font-size: 20px;
+ }
+ }
+}
+