Add - 驾驶舱 预警统计接口联调

src/views/CockpitLifeLine.vue

@@ -611,20 +611,14 @@
 							<div class="chart-contaier">
 								<div class="chart-con" id="sjChart" style="height: 180px !important;"></div>
 								<div class="chart-con-num">
-									<div class="chart-con-num-rig">
-										<img src="../assets/index_img/sj-bg-1.png" alt="">
-										<h6>已完成</h6>
-										<h5>650</h5>
-									</div>
-									<div class="chart-con-num-rig">
-										<img src="../assets/index_img/sj-bg-2.png" alt="">
-										<h6>待处理</h6>
-										<h5>600</h5>
-									</div>
-									<div class="chart-con-num-rig">
-										<img src="../assets/index_img/sj-bg-3.png" alt="">
-										<h6>处理中</h6>
-										<h5>500</h5>
+									<div
+										class="chart-con-num-rig"
+										v-for="(e,idx) in eventStatusOption"
+										:key="idx"
+										>
+										<img :src="require(`../assets/index_img/sj-bg-${idx+1}.png`)" alt="">
+										<h6>{{ e.name }}</h6>
+										<h5>{{ e.value }}</h5>
 									</div>
 								</div>
 							</div>
@@ -1055,7 +1049,10 @@
   import {assetInspection, getSupervisionDetails, getSupervisionList} from "@/api/CockpitLifeLine";
   import { getWeather } from '@/api/data'
   import { selectFocusList } from '@/api/tableInfo'
-  import {annualPlanCount, annualPlanTreeData} from '@/api/Regulatory'
+  import {annualPlanCount, annualPlanTreeData,
+	administrativeCountEventStatus,  	//事件统计:事件
+	industryCount,  					//事件统计:行业
+  } from '@/api/Regulatory'
 
   export default {
     computed: {
@@ -1116,8 +1113,8 @@
       this.selectFocusList()
 			setTimeout(() => {
 				this.title = '四平市城市生命线'
+				this.sjChart();
 			}, 1000)
-			this.sjChart();
 			this.hyChart();
 			this.ndChart('');
 			this.annualPlanTreeData();
@@ -1860,6 +1857,7 @@
         progress:[],//工程进度
         logDetails:[], //监管日志
         cameraList:[],//摄像头信息
+		eventStatusOption:[]
 			}
 		},
 		methods: {
@@ -2085,291 +2083,283 @@
       },
 			//事件统计chart
 			sjChart() {
-				var myChart = echarts.init(document.getElementById("sjChart"));
-				var scaleData = [{
-						name: "处理中",
-						value: 500,
-					},
-					{
-						name: "待处理",
-						value: 600,
-					},
-					{
-						name: "已完成",
-						value: 650,
-					},
-
-				];
-				var rich = {
-					white: {
-						color: "#ddd",
-						align: "center",
-						padding: [5, 0],
-					},
-				};
-				var placeHolderStyle = {
-					normal: {
-						label: {
-							show: false,
-						},
-						labelLine: {
-							show: false,
-						},
-						color: "rgba(0, 0, 0, 0)",
-						borderColor: "rgba(0, 0, 0, 0)",
-						borderWidth: 0,
-					},
-				};
-				var data = [];
-				var color = [
-
-					"#00cfff",
-					"#006ced",
-					"#7af0aa",
-				];
-				for (var i = 0; i < scaleData.length; i++) {
-					data.push({
-						value: scaleData[i].value,
-						name: scaleData[i].name,
-						itemStyle: {
+				administrativeCountEventStatus().then(res => {
+					if(res.data){
+						var myChart = echarts.init(document.getElementById("sjChart"));
+						var scaleData = [];
+						res.data.itemLabel.forEach((e,idx) => {
+							scaleData.push({
+								name:e,
+								value:res.data.itemCount[idx]
+							})
+						})
+						this.eventStatusOption = scaleData
+						var rich = {
+							white: {
+								color: "#ddd",
+								align: "center",
+								padding: [5, 0],
+							},
+						};
+						var placeHolderStyle = {
 							normal: {
-								borderWidth: 10,
-								shadowBlur: 20,
-								borderColor: color[i],
-								shadowColor: color[i],
+								label: {
+									show: false,
+								},
+								labelLine: {
+									show: false,
+								},
+								color: "rgba(0, 0, 0, 0)",
+								borderColor: "rgba(0, 0, 0, 0)",
+								borderWidth: 0,
 							},
-						},
-					}, {
-						value: 2,
-						name: "",
-						itemStyle: placeHolderStyle,
-					});
-				}
-				var seriesObj = [{
-					name: "",
-					type: "pie",
-					clockWise: false,
-					radius: [65, 70],
-					hoverAnimation: false,
-					itemStyle: {
-						normal: {
-							label: {
-								show: true,
-								position: "outside",
-								color: "#ddd",
-								formatter: function(params) {
-									var percent = 0;
-									var total = 0;
-									for (var i = 0; i < scaleData.length; i++) {
-										total += scaleData[i].value;
-									}
-									if (params.name !== "") {
-										return params.name + "\n" + params.value;
-									} else {
-										return "";
-									}
+						};
+						var data = [];
+						var color = [
+
+							"#00cfff",
+							"#006ced",
+							"#7af0aa",
+						];
+						for (var i = 0; i < scaleData.length; i++) {
+							data.push({
+								value: scaleData[i].value,
+								name: scaleData[i].name,
+								itemStyle: {
+									normal: {
+										borderWidth: 10,
+										shadowBlur: 20,
+										borderColor: color[i],
+										shadowColor: color[i],
+									},
+								},
+							}, {
+								value: 2,
+								name: "",
+								itemStyle: placeHolderStyle,
+							});
+						}
+						var seriesObj = [{
+							name: "",
+							type: "pie",
+							clockWise: false,
+							radius: [65, 70],
+							hoverAnimation: false,
+							itemStyle: {
+								normal: {
+									label: {
+										show: true,
+										position: "outside",
+										color: "#ddd",
+										formatter: function(params) {
+											var percent = 0;
+											var total = 0;
+											for (var i = 0; i < scaleData.length; i++) {
+												total += scaleData[i].value;
+											}
+											if (params.name !== "") {
+												return params.name + "\n" + params.value;
+											} else {
+												return "";
+											}
+										},
+										rich: rich,
+									},
+									labelLine: {
+										length: 10,
+										length2: 20,
+										show: true,
+										color: "#00ffff",
+									},
 								},
-								rich: rich,
 							},
-							labelLine: {
-								length: 10,
-								length2: 20,
-								show: true,
-								color: "#00ffff",
+							data: data,
+						}, ];
+						var option = {
+							title: [{
+									text: "事件总数",
+									x: "center",
+									top: "52%",
+									textStyle: {
+										color: "#FFFFFF",
+										fontSize: 16,
+										fontWeight: "100",
+									},
+								},
+								{
+									text: "1750",
+									x: "center",
+									top: "30%",
+									textStyle: {
+										fontSize: "40",
+										color: "#FFFFFF",
+										fontFamily: "DINAlternate-Bold, DINAlternate",
+										foontWeight: "600",
+									},
+								},
+							],
+							tooltip: {
+								show: false,
 							},
-						},
-					},
-					data: data,
-				}, ];
-				var option = {
-					title: [{
-							text: "事件总数",
-							x: "center",
-							top: "52%",
-							textStyle: {
-								color: "#FFFFFF",
-								fontSize: 16,
-								fontWeight: "100",
+							legend: {
+								show: false,
 							},
-						},
-						{
-							text: "1750",
-							x: "center",
-							top: "30%",
-							textStyle: {
-								fontSize: "40",
-								color: "#FFFFFF",
-								fontFamily: "DINAlternate-Bold, DINAlternate",
-								foontWeight: "600",
+							toolbox: {
+								show: false,
 							},
-						},
-					],
-					tooltip: {
-						show: false,
-					},
-					legend: {
-						show: false,
-					},
-					toolbox: {
-						show: false,
-					},
-					series: seriesObj,
-				};
-				myChart.setOption(option);
-
+							series: seriesObj,
+						};
+						myChart.setOption(option);
+					}
+				})
 			},
 			//行业数量 统计chart
 			hyChart() {
-				var myChart = echarts.init(document.getElementById("hyChart"));
-				var xData = [
-					"燃气",
-					"供热",
-					"供水",
-					"排水",
-					"管廊",
-					"桥梁"
-				];
-				var yData = [80, 87, 51, 81, 23, 45];
-				var option = {
-					color: ["#3398DB"],
-					tooltip: {
-						trigger: "axis",
-						axisPointer: {
-							type: "line",
-							lineStyle: {
-								opacity: 0,
-							},
-						},
-						formatter: function(prams) {
-							return "行业数量" + prams[0].data;
-						},
-					},
-					grid: {
-						left: "0%",
-						right: "0%",
-						bottom: "0",
-						top: "20%",
-						height: "75%",
-						containLabel: true,
-						z: 22,
-					},
-					xAxis: [{
-						type: "category",
-						gridIndex: 0,
-						data: xData,
-						axisTick: {
-							alignWithLabel: true,
-						},
-						axisLine: {
-							lineStyle: {
-								color: "#0c3b71",
-							},
-						},
-						axisLabel: {
-							show: true,
-							color: "rgb(170,170,170)",
-							fontSize: 16,
-						},
-					}, ],
-					yAxis: [{
-							type: "value",
-							gridIndex: 0,
-							splitLine: {
-								show: false,
-							},
-							axisTick: {
-								show: false,
-							},
-							axisLine: {
-								lineStyle: {
-									color: "#0c3b71",
+				industryCount().then(res => {
+					if(res.data){
+						var myChart = echarts.init(document.getElementById("hyChart"));
+						var xData = res.data.itemLabel;
+						var yData = res.data.itemCount;
+						var option = {
+							color: ["#3398DB"],
+							tooltip: {
+								trigger: "axis",
+								axisPointer: {
+									type: "line",
+									lineStyle: {
+										opacity: 0,
+									},
+								},
+								formatter: function(prams) {
+									return "行业数量" + prams[0].data;
 								},
 							},
-							axisLabel: {
-								color: "rgb(170,170,170)",
-								formatter: "{value}",
-							},
-						},
-						{
-							type: "value",
-							gridIndex: 0,
-							splitNumber: 15,
-							splitLine: {
-								show: false,
-							},
-							axisLine: {
-								show: false,
-							},
-							axisTick: {
-								show: false,
-							},
-							axisLabel: {
-								show: false,
+							grid: {
+								left: "0%",
+								right: "0%",
+								bottom: "0",
+								top: "20%",
+								height: "75%",
+								containLabel: true,
+								z: 22,
 							},
-							splitArea: {
-								show: true,
-								areaStyle: {
-									color: ["rgba(250,250,250,0.0)", "rgba(250,250,250,0.05)"],
+							xAxis: [{
+								type: "category",
+								gridIndex: 0,
+								data: xData,
+								axisTick: {
+									alignWithLabel: true,
 								},
-							},
-						},
-					],
-					series: [{
-							name: "计划数",
-							type: "bar",
-							barWidth: "30%",
-							xAxisIndex: 0,
-							yAxisIndex: 0,
-							label: {
-								normal: {
+								axisLine: {
+									lineStyle: {
+										color: "#0c3b71",
+									},
+								},
+								axisLabel: {
 									show: true,
-									position: "top",
-									textStyle: {
-										color: "#ffc72b",
-										fontSize: 20,
+									color: "rgb(170,170,170)",
+									fontSize: 16,
+								},
+							}, ],
+							yAxis: [{
+									type: "value",
+									gridIndex: 0,
+									splitLine: {
+										show: false,
+									},
+									axisTick: {
+										show: false,
+									},
+									axisLine: {
+										lineStyle: {
+											color: "#0c3b71",
+										},
+									},
+									axisLabel: {
+										color: "rgb(170,170,170)",
+										formatter: "{value}",
 									},
 								},
-							},
-							itemStyle: {
-								normal: {
-									color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
-											offset: 0,
-											color: "#00feff",
+								{
+									type: "value",
+									gridIndex: 0,
+									splitNumber: 15,
+									splitLine: {
+										show: false,
+									},
+									axisLine: {
+										show: false,
+									},
+									axisTick: {
+										show: false,
+									},
+									axisLabel: {
+										show: false,
+									},
+									splitArea: {
+										show: true,
+										areaStyle: {
+											color: ["rgba(250,250,250,0.0)", "rgba(250,250,250,0.05)"],
 										},
-										{
-											offset: 0.5,
-											color: "#027eff",
+									},
+								},
+							],
+							series: [{
+									name: "计划数",
+									type: "bar",
+									barWidth: "30%",
+									xAxisIndex: 0,
+									yAxisIndex: 0,
+									label: {
+										normal: {
+											show: true,
+											position: "top",
+											textStyle: {
+												color: "#ffc72b",
+												fontSize: 20,
+											},
 										},
-										{
-											offset: 1,
-											color: "#0286ff",
+									},
+									itemStyle: {
+										normal: {
+											color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+													offset: 0,
+													color: "#00feff",
+												},
+												{
+													offset: 0.5,
+													color: "#027eff",
+												},
+												{
+													offset: 1,
+													color: "#0286ff",
+												},
+											]),
 										},
-									]),
+									},
+									data: yData,
+									zlevel: 11,
 								},
-							},
-							data: yData,
-							zlevel: 11,
-						},
-						{
-							name: "背景",
-							type: "bar",
-							barWidth: "50%",
-							xAxisIndex: 0,
-							yAxisIndex: 1,
-							barGap: "-135%",
-							data: [100, 100, 100, 100, 100, 100, 100],
-							itemStyle: {
-								normal: {
-									color: "rgba(255,255,255,0.2)",
+								{
+									name: "背景",
+									type: "bar",
+									barWidth: "50%",
+									xAxisIndex: 0,
+									yAxisIndex: 1,
+									barGap: "-135%",
+									data: [100, 100, 100, 100, 100, 100, 100],
+									itemStyle: {
+										normal: {
+											color: "rgba(255,255,255,0.2)",
+										},
+									},
+									zlevel: 9,
 								},
-							},
-							zlevel: 9,
-						},
-					],
-				};
-
-				myChart.setOption(option);
-
+							],
+						};
+						myChart.setOption(option);
+					}
+				})
 			},
       annualPlanTreeData(){
         annualPlanTreeData().then(res => {

src/views/Regulatory.vue

@@ -1535,6 +1535,7 @@
 				],
 				selectedDiv: 1, // 当前选中的div的编号
         eventList:[],
+		eventStatusOption:[]
 			}
 		},
 		methods: {