fix

virgo.wzfrontend/console/public/index.html

@@ -6,7 +6,7 @@
 		<link rel="icon" href="https://file-node.oss-cn-shanghai.aliyuncs.com/youji/2f7b4bfaf9e64817bc2cb46f3a632b01">
 		<link rel="stylesheet" type="text/css" href="<%= BASE_URL %>reset.css" />
 		<link rel="stylesheet" href="//at.alicdn.com/t/c/font_4358860_plro02z515r.css">
-		<script type="text/javascript" src="http://api.tianditu.gov.cn/api?v=4.0&tk=72632adad893994a0450b55949c8a8fc">
+		<script type="text/javascript" src="https://api.tianditu.gov.cn/api?v=4.0&tk=72632adad893994a0450b55949c8a8fc">
 		</script>
 		<title>红链智慧建筑</title>
 		<script src="<%= BASE_URL %>jquery.js"></script>

virgo.wzfrontend/console/src/views/work/iot/device/alarmMonitor.vue

@@ -59,46 +59,10 @@
 					<div class="hui-chart-title">告警分布</div>
 					<div ref="chart1" class="alarm-distribution-chart"></div>
 					<div class="alarm-distribution-legend">
-						<div class="legend-item">
-							<span class="legend-bage bg1"></span>
-							<span class="legend-label">设备名称1</span>
-							<span class="legend-label alibaba">10</span>
-						</div>
-						<div class="legend-item">
-							<span class="legend-bage bg2"></span>
-							<span class="legend-label">设备名称2</span>
-							<span class="legend-label alibaba">1</span>
-						</div>
-						<div class="legend-item">
-							<span class="legend-bage bg3"></span>
-							<span class="legend-label">设备名称3</span>
-							<span class="legend-label alibaba">11</span>
-						</div>
-						<div class="legend-item">
-							<span class="legend-bage bg4"></span>
-							<span class="legend-label">设备名称4</span>
-							<span class="legend-label alibaba">4</span>
-						</div>
-						<div class="legend-item">
-							<span class="legend-bage bg5"></span>
-							<span class="legend-label">设备名称5</span>
-							<span class="legend-label alibaba">18</span>
-						</div>
-
-						<div class="legend-item">
-							<span class="legend-bage bg6"></span>
-							<span class="legend-label">设备名称6</span>
-							<span class="legend-label alibaba">22</span>
-						</div>
-						<div class="legend-item">
-							<span class="legend-bage bg7"></span>
-							<span class="legend-label">设备名称7</span>
-							<span class="legend-label alibaba">21</span>
-						</div>
-						<div class="legend-item">
-							<span class="legend-bage bg8"></span>
-							<span class="legend-label">设备名称8</span>
-							<span class="legend-label alibaba">6</span>
+						<div class="legend-item" v-for="(item,index) in topAlarm" :key="index">
+							<span :class="'legend-bage bg'+(index+1)"></span>
+							<span class="legend-label">{{item.name}}</span>
+							<span class="legend-label alibaba">{{item.number}}</span>
 						</div>
 					</div>
 				</div>
@@ -119,7 +83,7 @@
 								<span class="tr-100">
 									<div :class="'tr-top'+(index+1)">{{returnTop(String(index+1))}}</div>
 								</span>
-								<span class="tr-flex">{{item.deviceName}}</span>
+								<span class="tr-flex">{{item.name}}</span>
 								<span class="tr-flex tr-center alibaba">{{item.number}}</span>
 							</div>
 						</div>
@@ -408,7 +372,7 @@
 					max: 100,
 					value: 99
 				});
-				this.chart();
+				
 				this.chart1(this.$refs.chart2, [
 					[1, 3, 2, 6, 1]
 				])
@@ -436,18 +400,145 @@
 				})
 			},
 			testTopData() {
-				let obj = {};
-				for (let i = 0; i < this.alarmList.length; i++) {
+				let obj = {},
+					list = [];
+				for (let i = 0; i < this.alarmList.length; i++) {
 					console.log(this.alarmList[i]);
-					if (!obj[this.alarmList[i].deviceName]) obj[this.alarmList[i].deviceName] = 0;
-					obj[this.alarmList[i].deviceName]++
+					if (!obj[this.alarmList[i].deviceId]) {
+						obj[this.alarmList[i].deviceId] = 1;
+						list.push({
+							id: this.alarmList[i].deviceId,
+							name: this.alarmList[i].deviceName,
+							number: 0,
+						})
+					}
+					list.find(node => node.id == this.alarmList[i].deviceId).number++
 				}
-				console.log(obj);
-				// this.topAlarm = res.data.sort((a, b) => a.number > b.number);
+				this.topAlarm = list.sort((a, b) => a.number > b.number);
+				this.chart();
 			},
 			returnTop(number) {
 				let str = number.length === 1 ? ('0' + number) : number;
 				return 'TOP' + str;
+			},
+			chart() {
+				let chart = echarts.init(this.$refs.chart1);
+				let title = '设备名称2',
+					len = "50.00"
+				let option = {
+					title: {
+						text: ("{name|" + title + "}" + "\n{percent|" + len + "}{name|%}"),
+						left: 'center',
+						top: 'center',
+						textStyle: {
+							rich: {
+								name: {
+									color: "#fff",
+									fontSize: 12,
+									lineHeight: 16
+								},
+								percent: {
+									color: "#fff",
+									fontSize: 28,
+									lineHeight: 38,
+									fontFamily: 'alibabaMedium'
+								},
+							}
+						}
+					},
+					color: ['#EB7E65', '#9D60FB', '#5AD8A6', '#F7C739', '#5B8FF9', '#5D7092', '#6DC8EC', '#FF9D4D'],
+					series: [{
+						type: 'pie',
+						center: ['50%', '50%'],
+						radius: ['60%', '90%'],
+						avoidLabelOverlap: false,
+						itemStyle: {
+							borderColor: 'RGBA(21, 26, 37, 1)',
+							borderWidth: 10
+						},
+						label: {
+							show: false,
+							position: 'center'
+						},
+						emphasis: {
+							label: {
+								show: true,
+								formatter: (params) => {
+									return ("{name|" + params.name + "}" + "\n{percent|" +
+										params.percent.toFixed(2) + "}{name|%}");
+								},
+								rich: {
+									name: {
+										color: "#fff",
+										fontSize: 12,
+										lineHeight: 16
+									},
+									percent: {
+										color: "#fff",
+										fontSize: 28,
+										lineHeight: 38,
+										fontFamily: 'alibabaMedium'
+									},
+								}
+							},
+						},
+						labelLine: {
+							show: false
+						},
+						data: [{
+								value: 3,
+								name: "设备名称2"
+							},
+							{
+								value: 2,
+								name: "设备名称3"
+							},
+							{
+								value: 1,
+								name: "设备名称4"
+							}
+						]
+					}]
+				};
+				chart.setOption(option);
+				// 高亮时
+				chart.on('highlight', (e) => {
+					chart.setOption({
+						title: {
+							show: false
+						}
+					});
+				});
+				// 取消高亮时
+				chart.on('downplay', (e) => {
+					chart.setOption({
+						title: {
+							show: true
+						}
+					});
+				});
+				// 鼠标移入数据时
+				chart.on('mouseover', {
+					componentType: 'series',
+					seriesType: 'pie'
+				}, (params) => {
+					chart.setOption({
+						title: {
+							show: false
+						}
+					});
+				});
+				// 鼠标移出数据时
+				chart.on('mouseout', {
+					componentType: 'series',
+					seriesType: 'pie'
+				}, (params) => {
+					chart.setOption({
+						title: {
+							show: true
+						}
+					});
+				});
 			},
 			chart1(elem, data) {
 				let chart = echarts.init(elem);
@@ -544,125 +635,6 @@
 				};
 				chart.setOption(option);
 			},
-			chart() {
-				let chart = echarts.init(this.$refs.chart1);
-				let title = '设备名称2',
-					len = "50.00"
-				let option = {
-					title: {
-						text: ("{name|" + title + "}" + "\n{percent|" + len + "}{name|%}"),
-						left: 'center',
-						top: 'center',
-						textStyle: {
-							rich: {
-								name: {
-									color: "#fff",
-									fontSize: 12,
-									lineHeight: 16
-								},
-								percent: {
-									color: "#fff",
-									fontSize: 28,
-									lineHeight: 38,
-									fontFamily: 'alibabaMedium'
-								},
-							}
-						}
-					},
-					color: ['#EB7E65', '#9D60FB', '#5AD8A6', '#F7C739', '#5B8FF9', '#5D7092', '#6DC8EC', '#FF9D4D'],
-					series: [{
-						type: 'pie',
-						center: ['50%', '50%'],
-						radius: ['60%', '90%'],
-						avoidLabelOverlap: false,
-						itemStyle: {
-							borderColor: 'RGBA(21, 26, 37, 1)',
-							borderWidth: 10
-						},
-						label: {
-							show: false,
-							position: 'center'
-						},
-						emphasis: {
-							label: {
-								show: true,
-								formatter: (params) => {
-									return ("{name|" + params.name + "}" + "\n{percent|" +
-										params.percent.toFixed(2) + "}{name|%}");
-								},
-								rich: {
-									name: {
-										color: "#fff",
-										fontSize: 12,
-										lineHeight: 16
-									},
-									percent: {
-										color: "#fff",
-										fontSize: 28,
-										lineHeight: 38,
-										fontFamily: 'alibabaMedium'
-									},
-								}
-							},
-						},
-						labelLine: {
-							show: false
-						},
-						data: [{
-								value: 3,
-								name: "设备名称2"
-							},
-							{
-								value: 2,
-								name: "设备名称3"
-							},
-							{
-								value: 1,
-								name: "设备名称4"
-							}
-						]
-					}]
-				};
-				chart.setOption(option);
-				// 高亮时
-				chart.on('highlight', (e) => {
-					chart.setOption({
-						title: {
-							show: false
-						}
-					});
-				});
-				// 取消高亮时
-				chart.on('downplay', (e) => {
-					chart.setOption({
-						title: {
-							show: true
-						}
-					});
-				});
-				// 鼠标移入数据时
-				chart.on('mouseover', {
-					componentType: 'series',
-					seriesType: 'pie'
-				}, (params) => {
-					chart.setOption({
-						title: {
-							show: false
-						}
-					});
-				});
-				// 鼠标移出数据时
-				chart.on('mouseout', {
-					componentType: 'series',
-					seriesType: 'pie'
-				}, (params) => {
-					chart.setOption({
-						title: {
-							show: true
-						}
-					});
-				});
-			},
 			chartEnergy(data) {
 				let chart = echarts.init(this.$refs.energy);
 				let option = {