Merge remote-tracking branch 'origin/lifeline_develop_siping' into lifeline_develop_siping

src/assets/styles/sb_body.css

@@ -14,6 +14,9 @@ i,b,u{
 .hei64{
   height: 64vh;
 }
+.hei62{
+  height: 62vh;
+}
 /*哨兵*/
 /*//头部通用*/
 .s_header{

src/views/SenEquipmentCenter.vue

@@ -1,10 +1,16 @@
 <!--设备中心-->
 <template>
 	<div class="visual-con hz_body">
+    <div class="con_left">
+      <div class="list_tit">设备分析</div>
+      <div class="company_fx" ref="echartsByCompany"></div>
+      <div class="type_fx" ref="echartsByType"></div>
+      <div class="onoff_fx" ref="echartsByOnOff"></div>
+    </div>
 		<!--主体-->
-		<div class="con_left">
+		<div class="con_right">
 			<div class="list_tit">设备列表</div>
-			<el-select v-model="listParams.brand" placeholder="请选择品牌" @change="brandHasChanged" clearable>
+			<el-select v-model="listParams.brand" placeholder="请选择品牌" @change="brandHasChanged" clearable style="width:100%;margin-bottom: 10px;">
 				<el-option
 						v-for="item in options"
 						:key="item.value"
@@ -45,37 +51,6 @@
 					:total="deviceTotal">
 			</el-pagination>
 		</div>
-		<div class="visual-body">
-			<!--弹框演示模板 开始-->
-			<!-- <img src="../assets/images/sentinel/hz_qy.png" class="qydw1"/>
-			<img src="../assets/images/sentinel/hz_qy.png" class="qydw2"/>
-			<img src="../assets/images/sentinel/hz_qy.png" class="qydw3"/> -->
-			<div class="tk_div" v-show="isDetailVisible">
-				<div class="tk1 tk_bor" style="width: 371px;height: 310px;">
-					<h1>
-						<span :title="detailInfo.deviceName || '--'" style="display: inline-block;overflow: hidden;width: 62%;text-overflow: ellipsis;">{{ detailInfo.deviceName || '--' }}</span>
-						<i class="el-icon el-icon-close" style="margin-left: 5%;cursor: pointer;" @click="closeDetail"></i>
-						<i>{{ detailInfo.workingStatus == '0' ? '在线' : '离线' }}</i>
-					</h1>
-					<p>设备名称：{{ detailInfo.deviceName || '--' }}</p>
-					<p>设备类型：{{ detailInfo.deviceTypeText || '--' }}</p>
-					<p>设备监测指标：{{ detailInfo.threshold || '--' }}</p>
-					<p>品牌：{{ detailInfo.brand || '--' }}</p>
-					<p>所在街道：{{ detailInfo.address || '--' }}</p>
-					<p>历史数值：<a  @click="toggleDisplay(detailInfo.deviceCode)">详情</a></p>
-				</div>
-				<div class="tk2 tk_bor"  v-if="isVisible" style="position: absolute;width: 466px;height: 455px;left: 98%;">
-					<h1>哨兵详情</h1>
-					<div id="sbxqChart" ref="MyChart"></div>
-				</div>
-			</div>
-			<!--弹框演示模板 结束-->
-
-
-			<!-- 地图 -->
-			<supermap ref="supermap" style="width: 100%;height: 100vh;" @preview="preview">
-			</supermap>
-		</div>
 	</div>
 </template>
 
@@ -115,7 +90,7 @@
 			}
 		},
 		created() {
-			this.getListDeviceAll()
+      this.getListDeviceAll()
 			// 查询品牌
 			selectBrandList().then(res => {
 				if(res.data){
@@ -131,8 +106,8 @@
 			})
 		},
 		mounted() {
+      this.equipmentEcharts();
 			// 初始化地图数据
-			// this.getSuperMapUrl();
 			setTimeout(() => {
 				this.title = '四平市智慧哨兵监管平台'
 			}, 1000);
@@ -159,6 +134,153 @@
 			}
 		},
 		methods: {
+      equipmentEcharts(){
+        const echartsByCompany = echarts.init(this.$refs.echartsByCompany);
+        let echartsByCompanyOption = {
+          series: [
+            {
+              type: 'pie',
+              radius: ['30%', '60%'],
+              avoidLabelOverlap: false,
+              padAngle: 10,
+              itemStyle: {
+                borderRadius: 20
+              },
+              label: {
+                show: false,
+                position: 'center'
+              },
+              emphasis: {
+                label: {
+                  show: true,
+                  fontSize: 14,
+                  fontWeight: 'bold',
+                  formatter: '{b}:{c} \n {d}%'
+                }
+              },
+              labelLine: {
+                show: false
+              },
+              color: ["rgb(131,249,103)", "#FBFE27", "#FE5050","#1DB7E5"],
+              data: [
+                { value: 1048, name: '港华' },
+                { value: 735, name: '奥德' },
+                { value: 580, name: '华生' },
+                { value: 484, name: '润发' }
+              ]
+            }
+          ]
+        };
+        echartsByCompany.setOption(echartsByCompanyOption);
+        const echartsByType = echarts.init(this.$refs.echartsByType);
+        let echartsByTypeOption = {
+          series: [
+            {
+              type: 'pie',
+              radius: [20, 70],
+              center: ['50%', '50%'],
+              roseType: 'area',
+              itemStyle: {
+                borderRadius: 2
+              },
+              labelLine:{
+                show:true,
+                position:'outside',
+                length:5,
+                length2:5
+              },
+              label: {
+                show: true,
+                formatter: '{b}:{c}'
+              },
+              color: ["#ffa518", "#ff5629","#60b49b"],
+              data: [
+                { value: 36, name: '地埋' },
+                { value: 20, name: '桩式' },
+                { value: 25, name: '阀井哨兵' },
+              ]
+            }
+          ]
+        };
+        echartsByType.setOption(echartsByTypeOption);
+        const echartsByOnOff = echarts.init(this.$refs.echartsByOnOff);
+        let product = ['product', '地埋', '桩式','阀井哨兵'];
+        let on = ['在线', 10, 20,50];
+        let off = ['离线', 30, 40,50];
+        let source = [product,on,off];
+        let echartsByOnOffOption = {
+          title: {
+            text: product[1],
+            textStyle: {
+              color: '#b2de82', // 文字颜色
+              fontSize: 20, // 字体大小
+              fontWeight: 'bold', // 字体粗细
+              fontFamily: 'Arial' // 字体家族
+            },
+            left: 'left' // 标题位置
+          },
+          tooltip: {
+            trigger: 'axis',
+            showContent: false
+          },
+          dataset: {
+            source: source
+          },
+          xAxis: { type: 'category',
+            axisLabel: {
+              color: '#b2de82'
+            }
+          },
+          yAxis: { gridIndex: 0 },
+          grid: { top: '55%' },
+          color: ["#6cb956", "#629ab2"],
+          series: [
+            {
+              type: 'bar',
+              smooth: true,
+              seriesLayoutBy: 'row',
+              emphasis: { focus: 'series' }
+            },
+            {
+              type: 'bar',
+              smooth: true,
+              seriesLayoutBy: 'row',
+              emphasis: { focus: 'series' }
+            },
+            {
+              type: 'pie',
+              id: 'pie',
+              radius: '30%',
+              center: ['50%', '25%'],
+              emphasis: {
+                focus: 'self'
+              },
+              label: {
+                formatter: '{b}: {@地埋} ({d}%)'
+              },
+            }
+          ]
+        };
+        echartsByOnOff.on('updateAxisPointer', function (event) {
+          const xAxisInfo = event.axesInfo[0];
+          if (xAxisInfo) {
+            const dimension = xAxisInfo.value + 1;
+            echartsByOnOff.setOption({
+              title: {
+                text: product[dimension]
+              },
+              series: {
+                id: 'pie',
+                label: {
+                  formatter: '{b}: {@[' + dimension + ']} ({d}%)'
+                },
+              }
+            });
+          }
+        });
+        echartsByOnOff.setOption(echartsByOnOffOption);
+
+      },
 			closeDetail(){
 				this.isDetailVisible = false
 				this.isVisible = false
@@ -219,214 +341,6 @@
 			brandHasChanged(e){
 				this.getListDeviceAll()
 			},
-			/**
-			 * desc： 设备列表条件检索
-			 * @param {string} [val=''] 		// 设备名称
-			 * @param {string} [brandName=''] 	// 品牌
-			 * */
-			searchOptionHasChanged(val='',brandName=''){
-				this.deviceListSearch = [];
-				// 名称检索
-				for (let i in this.deviceList) {
-					if (this.deviceList[i].deviceName.indexOf(val) != -1) {
-						this.deviceListSearch.push(this.deviceList[i]);
-					}
-				}
-				// 品牌检索
-				if(brandName){
-					this.deviceListSearch = this.deviceListSearch.filter(v => v.brand == brandName)
-				}
-			},
-			getSuperMapUrl(){
-				getUserProfile().then(response => {
-					let mapDeptId=response.mapDeptId
-					let num = 0;
-					if (mapDeptId == "365") {
-						num = 0;
-					} else if (mapDeptId == "369") {
-						num = 1;
-					} else if (mapDeptId == "371") {
-						num = 2;
-					} else if (mapDeptId == "373") {
-						num = 3;
-					} else if (mapDeptId == "372") {
-						num = 4;
-					} else if (mapDeptId == "370") {
-						num = 5;
-					}
-					this.$parent.$refs.supermap.removeAllviewer(mapDeptId, -1);
-				});
-			},
-			toggleDisplay(deviceCode) {
-				this.isVisible = !this.isVisible; // 点击按钮时切换isVisible的值
-				if(this.isVisible){
-					selectDailyThreshold(deviceCode).then(res => {
-						this.initChart(res.data)
-					})
-				}
-			},
-			initChart(data){
-				// 基于准备好的dom，初始化echarts实例
-				const myChart = echarts.init(document.getElementById('sbxqChart'))
-				let xdata = data.time //x轴
-				let dataArr = data.value //value
-				let dashedArr = data.threshold
-				let titleName = "阈值";
-				let titleNames = "实际值";
-				let option = {
-					backgroundColor: "rgba(25,44,59,.4)",
-					grid: {
-						left: "5%",
-						bottom: "10%",
-						top: "18%",
-						containLabel: true,
-					},
-					tooltip: {
-						trigger: "axis",
-						axisPointer: {
-							type: "shadow",
-						},
-					},
-					legend: {
-						show: true,
-						x: "center",
-						y: 20,
-						textStyle: {
-							color: "#fff", // 图例文字颜色
-							fontSize: 16,
-						},
-					},
-					xAxis: {
-						type: "category",
-						boundaryGap: false,
-						data: xdata,
-						axisLabel: {
-							show: true,
-							textStyle: {
-								color: "#fff",
-							},
-						},
-						axisLine: {
-							lineStyle: {
-								color: "transparent",
-								width: 2, //这里是为了突出显示加上的
-							},
-						},
-					},
-					"dataZoom": [
-						{
-							"show": true,
-							"height": 12,
-							"xAxisIndex": [
-							0
-							],
-							"bottom": "8%",
-							"start": 0,
-							"end": 50,
-							"handleIcon": "path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z",
-							"handleSize": "110%",
-							"handleStyle": {
-							"color": "#d3dee5"
-							},
-							"textStyle": {
-							"color": "#fff"
-							},
-							"borderColor": "#90979c"
-						},
-						{
-							"type": "inside",
-							"show": true,
-							"height": 15,
-							"start": 1,
-							"end": 35
-						}
-					],
-					yAxis: [
-						{
-							type: "value",
-							name: "(%vol)",
-							nameTextStyle: {
-								color: "#fff",
-							},
-							axisLabel: {
-								formatter: "{value}",
-								textStyle: {
-									color: "#fff",
-								},
-							},
-							axisLine: {
-								lineStyle: {
-									color: "transparent",
-									width: 2, //这里是为了突出显示加上的
-								},
-							},
-							axisTick: {
-								show: false,
-							},
-							splitLine: {
-								show: true,
-								lineStyle: {
-									color: "#11366e",
-								},
-							},
-						},
-					],
-					series: [
-						{
-							name: titleName,
-							type: "line",
-							smooth: true,
-							symbol: "none",
-							itemStyle: {
-								normal: {
-									lineStyle: {
-										type: "dashed",
-									},
-									color: "#01F699", //拐点的颜色
-									borderColor: "#01F699", //拐点边框的颜色
-								},
-							},
-							data: dashedArr,
-						},
-						{
-							name: titleNames,
-							type: "line",
-							stack: "总量",
-							smooth: true, //平滑曲线显示
-							symbol: "circle", //标记的图形为实心圆
-							symbolSize: 8,
-							itemStyle: {
-								normal: {
-									color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
-										{
-											offset: 0,
-											color: "rgba(3,191,255,1)",
-										},
-										{
-											offset: 1,
-											color: "rgba(18,93,236,1)",
-										},
-									]),
-									areaStyle: {
-										color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
-											{
-												offset: 0,
-												color: "rgba(3,191,255,.3)",
-											},
-											{
-												offset: 1,
-												color: "rgba(18,93,236,.3)",
-											},
-										]),
-									},
-								},
-							},
-							data: dataArr,
-						},
-					],
-				};
-				myChart.setOption(option);
-			}
 		},
 		watch:{
 			['listParams.deviceName'](){
@@ -563,7 +477,31 @@
 		width: 100%;
 		height: 91%;
 	}
+  //图表设备分析
+  .company_fx {
+    width: 100%;
+    height: 240px;
+  }
+
+  .type_fx {
+    width: 100%;
+    height: 240px;
+  }
+
+  .onoff_fx {
+    width: 100%;
+    height: 240px;
+  }
 
+  .sp_list .dt1{
+    width:52px !important;
+  }
+  .sp_list .dt2{
+    width:190px !important;
+  }
+  .sp_list .dt3{
+    width:40px !important;
+  }
 
 
 </style>

src/views/SenEventCenter.vue

@@ -25,64 +25,71 @@
           </p>
 				</div>
 			</div>
-			<div class="list_tit">事件列表</div>
-			<el-select v-model="eventType" placeholder="请选择" @change="getEventLeft(1)">
-				<el-option
-						v-for="item in eventTypes"
-						:key="item.eventTypeCode"
-						:label="item.eventTypeName"
-						:value="item.eventTypeCode">
-				</el-option>
-			</el-select>
-			<el-input
-					placeholder="请输入内容"
-					suffix-icon="el-icon-search"
+      <div class="list_tit">事件分析</div>
+      <div class="event_analyze" ref="eventAnalyze"></div>
+      <div class="list_tit">企业分析</div>
+      <div class="enterprise_analyze" ref="enterpriseAnalyze"></div>
+		</div>
+		<div class="con_right">
+<!--			<div class="list_tit list_tit2">应急中心<i>发起应急事件</i></div>-->
+<!--			<el-input-->
+<!--					placeholder="请输入事件名称"-->
+<!--					suffix-icon="el-icon-search"-->
+<!--          @change="getEventRight(1)"-->
+<!--					v-model="searchRight">-->
+<!--			</el-input>-->
+<!--			<dl class="sp_list yjsj_list">-->
+<!--				<dt><span class="dt1">序号</span><span class="dt2">应急事件名称</span><span class="dt3">发生时间</span></dt>-->
+<!--				<div class="hei_scroll hei64">-->
+<!--          <dd v-for="(item,index) in eventRightList">-->
+<!--            <span class="dt1">{{index+1}}</span><span class="dt2">{{item.eventTitle.length>5?item.eventTitle.substring(0,5)+'...':item.eventTitle}}</span><span class="dt3">{{item.createTime}}</span>-->
+<!--          </dd>-->
+<!--				</div>-->
+<!--			</dl>-->
+<!--			<el-pagination-->
+<!--					background-->
+<!--					layout="prev, pager, next"-->
+<!--          @prev-click="getEventRight"-->
+<!--          @next-click="getEventRight"-->
+<!--          @current-change="getEventRight"-->
+<!--					:total="rightTotal">-->
+<!--			</el-pagination>-->
+      <div class="list_tit">事件列表</div>
+      <div style="display: flex; gap: 10px;">
+        <el-select v-model="eventType" placeholder="请选择" @change="getEventLeft(1)" style="flex: 1;">
+          <el-option
+            v-for="item in eventTypes"
+            :key="item.eventTypeCode"
+            :label="item.eventTypeName"
+            :value="item.eventTypeCode">
+          </el-option>
+        </el-select>
+        <el-input
+          placeholder="请输入内容"
+          suffix-icon="el-icon-search"
           @change="getEventLeft(1)"
-					v-model="searchLeft">
-			</el-input>
-			<dl class="sp_list">
-				<dt><span class="dtc1">序号</span><span class="dtc2">设备名称</span><span class="dtc3">定位</span></dt>
-				<div class="hei_scroll hei30" >
-					<dd v-for="(item,index) in eventLeftList">
+          v-model="searchLeft"
+          style="flex: 1;">
+        </el-input>
+      </div>
+      <dl class="sp_list">
+        <dt><span class="dtc1">序号</span><span class="dtc2">设备名称</span><span class="dtc3">定位</span></dt>
+        <div class="hei_scroll hei62" >
+          <dd v-for="(item,index) in eventLeftList">
             <span class="dtc1">{{index+1}}</span>
             <span class="dtc2">{{item.eventTitle.length>15?item.eventTitle.substring(0,15)+'...':item.eventTitle}}</span>
             <span class="dtc3" @click="flyTo(item.longitude,item.latitude)"><img src="../assets/images/sentinel/hz_list_d.png"/></span>
           </dd>
-				</div>
-			</dl>
-			<el-pagination
-					background
-					layout="prev, pager, next"
-          @prev-click="getEventLeft"
-          @next-click="getEventLeft"
-          @current-change="getEventLeft"
-					:total="leftTotal">
-			</el-pagination>
-		</div>
-		<div class="con_right">
-			<div class="list_tit list_tit2">应急中心<i>发起应急事件</i></div>
-			<el-input
-					placeholder="请输入事件名称"
-					suffix-icon="el-icon-search"
-          @change="getEventRight(1)"
-					v-model="searchRight">
-			</el-input>
-			<dl class="sp_list yjsj_list">
-				<dt><span class="dt1">序号</span><span class="dt2">应急事件名称</span><span class="dt3">发生时间</span></dt>
-				<div class="hei_scroll hei64">
-          <dd v-for="(item,index) in eventRightList">
-            <span class="dt1">{{index+1}}</span><span class="dt2">{{item.eventTitle.length>5?item.eventTitle.substring(0,5)+'...':item.eventTitle}}</span><span class="dt3">{{item.createTime}}</span>
-          </dd>
-				</div>
-			</dl>
-			<el-pagination
-					background
-					layout="prev, pager, next"
-          @prev-click="getEventRight"
-          @next-click="getEventRight"
-          @current-change="getEventRight"
-					:total="rightTotal">
-			</el-pagination>
+        </div>
+      </dl>
+      <el-pagination
+        background
+        layout="prev, pager, next"
+        @prev-click="getEventLeft"
+        @next-click="getEventLeft"
+        @current-change="getEventLeft"
+        :total="leftTotal">
+      </el-pagination>
 		</div>
 	</div>
 </template>
@@ -127,6 +134,8 @@
 			setTimeout(() => {
 				this.title = '四平市智慧哨兵监管平台'
 			}, 1000);
+      this.eventAnalyzeChart();
+      this.enterpriseAnalyzeChart();
 		},
 		data() {
 			return {
@@ -178,6 +187,186 @@
 			}
 		},
 		methods: {
+      //事件分析
+      eventAnalyzeChart() {
+        const chartDom = this.$refs.eventAnalyze;
+        const myChart = echarts.init(chartDom);
+        this.option = {
+          tooltip: {
+            trigger: "item",
+            formatter: "{b} : {c} ({d}%)",
+          },
+
+          visualMap: {
+            show: false,
+            min: 500,
+            max: 600,
+            inRange: {
+              //colorLightness: [0, 1]
+            },
+          },
+          series: [{
+            name: "访问来源",
+            type: "pie",
+            radius: "80%",
+            center: ["50%", "50%"],
+            color: ["rgb(131,249,103)", "#FBFE27", "#FE5050","#f17c7c","#1DB7E5"
+            ], //'#FBFE27','rgb(11,228,96)','#FE5050'
+            data: [{
+              value: 285,
+              name: "伊通县",
+            },
+              {
+                value: 410,
+                name: "梨树县",
+              },
+              {
+                value: 274,
+                name: "铁东区",
+              },
+              {
+                value: 235,
+                name: "铁西区",
+              },,
+              {
+                value: 235,
+                name: "双辽市",
+              },
+            ].sort(function(a, b) {
+              return a.value - b.value;
+            }),
+            roseType: "radius",
+
+            label: {
+              normal: {
+                formatter: ["{c|{c}}", "{b|{b}}"].join("\n"),
+                rich: {
+                  c: {
+                    color: "rgb(241,246,104)",
+                    fontSize: 20,
+                    fontWeight: "bold",
+                    lineHeight: 5,
+                  },
+                  b: {
+                    color: "rgb(98,137,169)",
+                    fontSize: 15,
+                    height: 40,
+                  },
+                },
+              },
+            },
+            labelLine: {
+              normal: {
+                lineStyle: {
+                  color: "rgb(98,137,169)",
+                },
+                smooth: 0.2,
+                length: 10,
+                length2: 20,
+              },
+            },
+            itemStyle: {
+              normal: {
+                shadowColor: "rgba(0, 0, 0, 0.8)",
+                shadowBlur: 50,
+              },
+            },
+          }, ],
+        };
+
+
+        myChart.setOption(this.option, true);
+        window.addEventListener("resize", function() {
+          myChart.resize();
+        });
+
+      },
+      //企业分析
+      enterpriseAnalyzeChart() {
+        const chartDom = this.$refs.enterpriseAnalyze;
+        const myChart = echarts.init(chartDom);
+        this.option =  {
+          tooltip: {
+            trigger: 'axis'
+          },
+          legend: {
+            data: ['华生','港华', '奥德', '润发'],
+            textStyle: {
+              color: '#13e845'  // 图例文字颜色，设置为深灰色
+            }
+          },
+          grid: {
+            left: '3%',
+            right: '4%',
+            bottom: '3%',
+            containLabel: true
+          },
+          toolbox: {
+            feature: {
+              saveAsImage: {}
+            }
+          },
+          xAxis: {
+            type: 'category',
+            boundaryGap: false,
+            data: ['2025-09-17', '2025-09-18', '2025-09-19', '2025-09-20', '2025-09-21', '2025-09-22', '2025-09-23'],
+            axisLabel: {
+              color: '#13e845'  // X轴刻度颜色，这里设置为深灰色
+            }
+          },
+          yAxis: {
+            type: 'value',
+            axisLabel: {
+              color: '#eed113'  // Y轴刻度颜色，这里设置为深灰色
+            }
+          },
+          series: [
+            {
+              name: '华生',
+              type: 'line',
+              stack: 'Total',
+              itemStyle: {
+                color: '#5470c6'  // 蓝色
+              },
+              data: [120, 132, 101, 134, 90, 230, 210]
+            },
+            {
+              name: '港华',
+              type: 'line',
+              stack: 'Total',
+              itemStyle: {
+                color: '#91cc75'  // 绿色
+              },
+              data: [220, 182, 191, 234, 290, 330, 310]
+            },
+            {
+              name: '奥德',
+              type: 'line',
+              stack: 'Total',
+              itemStyle: {
+                color: '#fac858'  // 黄色
+              },
+              data: [150, 232, 201, 154, 190, 330, 410]
+            },
+            {
+              name: '润发',
+              type: 'line',
+              stack: 'Total',
+              itemStyle: {
+                color: '#ee6666'  // 红色
+              },
+              data: [320, 332, 301, 334, 390, 330, 320]
+            },
+          ]
+        };
+
+
+        myChart.setOption(this.option, true);
+        window.addEventListener("resize", function() {
+          myChart.resize();
+        });
+
+      },
       getStatisticByEventType(){
         getStatisticByEventType({createTimeRange:this.dataValue+","+this.dataValue}).then(req => {
           this.eventNumberList = req.data;
@@ -490,7 +679,15 @@
     top: 10px;
     left: 11px;
   }
-
+  //图表事件分析
+  .event_analyze {
+    width: 100%;
+    height: 20vh;
+  }
+  .enterprise_analyze {
+    width: 100%;
+    height: 20vh;
+  }
 </style>
 <style rel="stylesheet/scss" lang="scss" scoped>
 	@import '@/assets/styles/base.scss';

src/views/SentryCockpit.vue

@@ -3,26 +3,205 @@
 	<div class="visual-con hz_body">
 		<!--主体-->
 		<div class="con_left con_left_js">
-			<div class="list_tit">设备列表</div>
-			<div class="info-list">
-				<p>用户数：253872户</p>
-				<p>管线长度：260公里</p>
-				<p>商用户：3535户 </p>
-				<p>中压长度：260公里</p>
-				<p>民用：253535户次 </p>
-				<p>高压长度：260公里</p>
-				<p>场站数：1 </p>
-				<p>低压长度：260公里</p>
-			</div>
-			<div class="list_tit">设备分析</div>
-			<div class="sb_fx" ref="sbfx">
+			<div class="list_tit">基本信息</div>
+			<div class="info-list_left">
+				<p>用户总数：257005户</p>
+				<p>管线总长：930公里</p>
+				<p>商业用户：3999户 </p>
+				<p>中压长度：186.707公里</p>
+				<p>居民用户：252906户 </p>
+				<p>次高压长度：65.9公里</p>
+				<p>工业用户：100户 </p>
+				<p>低压长度：577公里</p>
 			</div>
+      <div class="list_tit">监测长度</div>
+      <div class="cd_fx" ref="jccd"></div>
+        <div class="list_tit">图层控制</div>
+        <div class="map_tab">
+            <span v-for="(item,index) in tabList"
+                  :key="index"
+                  :class="{on:currentClass==index}"
+                  @click="toggleTab(index)">{{item}}</span>
+
+        </div>
+        <div class="con_tckz_div">
+          <div class="tab_con" v-show="currentTab==0">
+                <div class="rq_div tekz_div">
+                  <div class="tc_div">
+                    <div class="scrollx">
+                      <span>华生燃气：</span>
+                      <div class="scroll-container">
+                        <el-checkbox-group v-model="checkedCities"  @change="handleCheckedCities">
+                          <el-checkbox v-for="city in cities1_1" :label="city.url" :key="city.type">{{ city.type }}
+                          </el-checkbox>
+                        </el-checkbox-group>
+                      </div>
+                    </div>
+                  </div>
+                  <div class="tc_div">
+                    <div class="scrollx"><span>港华燃气：</span>
+                      <div class="scroll-container">
+                        <el-checkbox-group v-model="checkedCities"  @change="handleCheckedCities">
+                          <el-checkbox v-for="city in cities1_2" :label="city.url" :key="city.type">{{ city.type }}
+                          </el-checkbox>
+                        </el-checkbox-group>
+                      </div>
+                    </div>
+                  </div>
+                  <div class="tc_div">
+                    <div class="scrollx"><span>奥德燃气：</span>
+                      <div class="scroll-container">
+                        <el-checkbox-group v-model="checkedCities"  @change="handleCheckedCities">
+                          <el-checkbox v-for="city in cities1_3" :label="city.url" :key="city.type">{{ city.type }}
+                          </el-checkbox>
+                        </el-checkbox-group>
+                      </div>
+                    </div>
+                  </div>
+                  <div class="tc_div">
+                    <div class="scrollx"><span>润发燃气：</span>
+                      <div class="scroll-container">
+                        <el-checkbox-group v-model="checkedCities"  @change="handleCheckedCities">
+                          <el-checkbox v-for="city in cities1_4" :label="city.url" :key="city.type">{{ city.type }}
+                          </el-checkbox>
+                        </el-checkbox-group>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+                <div class="map_btn">
+                  <button class="map_btn_span on" @click="showExcavation()">开挖</button>
+                  <button class="map_btn_span" @click="choseMeasuringDistance()">测距</button>
+                  <button class="map_btn_span" @click="choseMeasuringArea()">测面</button>
+                  <button class="map_btn_span" @click="choseMeasuringHeight()">测高</button>
+                  <button class="map_btn_span" @click="boxSelection()">框选</button>
+                  <button class="map_btn_span" @click="clearAll()">清除</button>
+                  <!--                  <button class="map_btn_span" @click="showExcavationAnalyze()">填挖方分析</button>-->
+                </div>
+          </div>
+          <div class="tab_con" v-show="currentTab==1">
+                <div class="rq_div tekz_div">
+                  <div class="tc_div">
+                    <div class="scrollx">
+                      <span>华生燃气：</span>
+                      <div class="scroll-container">
+                        <el-checkbox-group v-model="checkedCities"  @change="handleCheckedCities">
+                          <el-checkbox v-for="city in cities1_1" :label="city.url" :key="city.type">{{ city.type }}
+                          </el-checkbox>
+                        </el-checkbox-group>
+                      </div>
+                    </div>
+                  </div>
+                  <div class="tc_div">
+                    <div class="scrollx"><span>港华燃气：</span>
+                      <div class="scroll-container">
+                        <el-checkbox-group v-model="checkedCities"  @change="handleCheckedCities">
+                          <el-checkbox v-for="city in cities1_2" :label="city.url" :key="city.type">{{ city.type }}
+                          </el-checkbox>
+                        </el-checkbox-group>
+                      </div>
+                    </div>
+                  </div>
+                  <div class="tc_div">
+                    <div class="scrollx"><span>奥德燃气：</span>
+                      <div class="scroll-container">
+                        <el-checkbox-group v-model="checkedCities"  @change="handleCheckedCities">
+                          <el-checkbox v-for="city in cities1_3" :label="city.url" :key="city.type">{{ city.type }}
+                          </el-checkbox>
+                        </el-checkbox-group>
+                      </div>
+                    </div>
+                  </div>
+                  <div class="tc_div">
+                    <div class="scrollx"><span>润发燃气：</span>
+                      <div class="scroll-container">
+                        <el-checkbox-group v-model="checkedCities"  @change="handleCheckedCities">
+                          <el-checkbox v-for="city in cities1_4" :label="city.url" :key="city.type">{{ city.type }}
+                          </el-checkbox>
+                        </el-checkbox-group>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+                <div class="map_btn">
+                  <button class="map_btn_span on" @click="showExcavation()">开挖</button>
+                  <button class="map_btn_span" @click="choseMeasuringDistance()">测距</button>
+                  <button class="map_btn_span" @click="choseMeasuringArea()">测面</button>
+                  <button class="map_btn_span" @click="choseMeasuringHeight()">测高</button>
+                  <button class="map_btn_span" @click="boxSelection()">框选</button>
+                  <button class="map_btn_span" @click="clearAll()">清除</button>
+                  <!--                  <button class="map_btn_span" @click="showExcavationAnalyze()">填挖方分析</button>-->
+                </div>
+          </div>
+          <div class="tab_con" v-show="currentTab==2">
+                <div class="rq_div tekz_div">
+                  <div class="tc_div">
+                    <div class="scrollx">
+                      <span>华生燃气：</span>
+                      <div class="scroll-container">
+                        <el-checkbox-group v-model="checkedCities"  @change="handleCheckedCities">
+                          <el-checkbox v-for="city in cities1_1" :label="city.url" :key="city.type">{{ city.type }}
+                          </el-checkbox>
+                        </el-checkbox-group>
+                      </div>
+                    </div>
+                  </div>
+                  <div class="tc_div">
+                    <div class="scrollx"><span>港华燃气：</span>
+                      <div class="scroll-container">
+                        <el-checkbox-group v-model="checkedCities"  @change="handleCheckedCities">
+                          <el-checkbox v-for="city in cities1_2" :label="city.url" :key="city.type">{{ city.type }}
+                          </el-checkbox>
+                        </el-checkbox-group>
+                      </div>
+                    </div>
+                  </div>
+                  <div class="tc_div">
+                    <div class="scrollx"><span>奥德燃气：</span>
+                      <div class="scroll-container">
+                        <el-checkbox-group v-model="checkedCities"  @change="handleCheckedCities">
+                          <el-checkbox v-for="city in cities1_3" :label="city.url" :key="city.type">{{ city.type }}
+                          </el-checkbox>
+                        </el-checkbox-group>
+                      </div>
+                    </div>
+                  </div>
+                  <div class="tc_div">
+                    <div class="scrollx"><span>润发燃气：</span>
+                      <div class="scroll-container">
+                        <el-checkbox-group v-model="checkedCities"  @change="handleCheckedCities">
+                          <el-checkbox v-for="city in cities1_4" :label="city.url" :key="city.type">{{ city.type }}
+                          </el-checkbox>
+                        </el-checkbox-group>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+                <div class="map_btn">
+                  <button class="map_btn_span on" @click="showExcavation()">开挖</button>
+                  <button class="map_btn_span" @click="choseMeasuringDistance()">测距</button>
+                  <button class="map_btn_span" @click="choseMeasuringArea()">测面</button>
+                  <button class="map_btn_span" @click="choseMeasuringHeight()">测高</button>
+                  <button class="map_btn_span" @click="boxSelection()">框选</button>
+                  <button class="map_btn_span" @click="clearAll()">清除</button>
+                  <!--                  <button class="map_btn_span" @click="showExcavationAnalyze()">填挖方分析</button>-->
+                </div>
+          </div>
+        </div>
 		</div>
 		<!--主体右侧-->
 		<div class="con_right con_left_js">
+      <div class="list_tit">设备分析</div>
+      <div class="sb_fx" ref="sbfx"></div>
 			<div class="list_tit">用户分析</div>
 			<div class="yh_fx" ref="yhfx"></div>
 			<div class="list_tit">事件分析</div>
+      <div class="info-list_right">
+        <p>报警累计：6</p>
+        <p>已处理：6，未处理：0</p>
+        <p>泄露：3，震动：1</p>
+        <p>位移：2，超限：0</p>
+      </div>
 			<div class="sj_fx" ref="sjfx"></div>
 		</div>
 		<div class="visual-body" style="height: 100%;">
@@ -46,6 +225,12 @@
 		selectConfigKey
 	} from "@/api/system/config";
 	import * as echarts from 'echarts'
+
+
+  const cityOptions1_1 = [{ type: '企业', url: '' }, { type: '厂站', url: '' }, { type: '阀门', url: '' }, { type: '次高压管网', url: '/3D-huashengranqi-2/rest/realspace' }, { type: '中压管网', url: '' }];
+  const cityOptions1_2 = [{ type: '企业', url: '' }, { type: '厂站', url: '' }, { type: '阀门', url: '' }, { type: '次高压管网', url: '/3D-ganghuaranqi/rest/realspace' }, { type: '中压管网', url: '' }];
+  const cityOptions1_3 = [{ type: '企业', url: '' }, { type: '厂站', url: '' }, { type: '阀门', url: '' }, { type: '次高压管网', url: '/3D-aode/rest/realspace' }, { type: '中压管网', url: '' }];
+  const cityOptions1_4 = [{ type: '企业', url: '' }, { type: '厂站', url: '' }, { type: '阀门', url: '' }, { type: '次高压管网', url: '' }, { type: '中压管网', url: '' }];
 	export default {
 		name: 'SentryCockpit',
 		components: {
@@ -67,6 +252,7 @@
 
 		},
 		mounted() {
+      this.jccdChart();
 			this.sbfxChart();
 			this.yhfxChart();
 			this.sjfxChart();
@@ -83,30 +269,258 @@
 				input: '',
 				input1: '',
 				title: '四平市智慧哨兵监管平台',
-				options: [{
-					value: '选项1',
-					label: '华生1'
-				}, {
-					value: '选项2',
-					label: '华生2'
-				}, {
-					value: '选项3',
-					label: '华生3'
-				}, {
-					value: '选项4',
-					label: '华生4'
-				}, {
-					value: '选项5',
-					label: '华生5'
-				}],
-				value: ''
+				value: '',
+        //图层控制
+        checkedCities: [],
+        cities1_1: cityOptions1_1,
+        cities1_2: cityOptions1_2,
+        cities1_3: cityOptions1_3,
+        cities1_4: cityOptions1_4,
+        currentTab: 0,
+        currentClass: 0,
+        tabList:[ '四平市', '铁东区', '铁西区'],
 			}
 		},
 
 		methods: {
+      toggleTab(current){
+        this.currentTab = current;
+        this.currentClass = current;
+      },
+      handleCheckedCities(checkedCities) {
+        // checkedCities 是当前选中的所有选项的数组
+        this.$parent.$refs.supermap.addLifelineOpen(this.checkedCities)
+      },
+      //开挖
+      showExcavation() {
+        this.$parent.$refs.supermap.excavation()
+      },
+      //开挖
+      showExcavationAnalyze() {
+        this.$parent.$refs.supermap.excavationAnalyze()
+      },
+      //测距
+      choseMeasuringDistance() {
+        this.$parent.$refs.supermap.choseMeasuringDistance()
+      },
+      //测面
+      choseMeasuringArea() {
+        this.$parent.$refs.supermap.choseMeasuringArea()
+      },
+      //测高
+      choseMeasuringHeight() {
+        this.$parent.$refs.supermap.choseMeasuringHeight()
+      },
+      //选择、框选
+      boxSelection() {
+        this.$parent.$refs.supermap.boxSelection()
+      },
+      //清除
+      clearAll() {
+        this.$parent.$refs.supermap.closeMeasuringAll()
+        this.$parent.$refs.supermap.closeExcavationAll()
+        this.checkedCities = []
+        this.$parent.$refs.supermap.addLifelineOpen(this.checkedCities)
+        this.$parent.$refs.supermap.removeBoxSelection()
+      },
 			toggleDisplay() {
 				this.isVisible = !this.isVisible; // 点击按钮时切换isVisible的值
 			},
+      //检测长度
+      jccdChart() {
+        const chartDom = this.$refs.jccd;
+        const myChart = echarts.init(chartDom);
+
+        function deepCopy(obj) {
+          if (typeof obj !== "object") {
+            return obj;
+          }
+          var newobj = {};
+          for (var attr in obj) {
+            newobj[attr] = obj[attr];
+          }
+          return newobj;
+        }
+        var xData = [],
+          yData = [];
+        var data = [{
+          name: "监测长度",
+          value: 3999,
+         },
+        ];
+        data.map((a, b) => {
+          xData.push(a.name);
+          yData.push(a.value);
+        });
+        var startColor = ["#0157be", "#7a18ed", "#00bbce", "#ea865a"];
+        var endColor = ["#0367d4", "#2743ed", "#00c4a5", "#ea2e41"];
+        var borderStartColor = ["#05acff", "#ee36ff", "#05fcfb", "#ffa597"];
+        var borderEndColor = ["#09c1ff", "#8171ff", "#05ffff", "#ff6584"];
+        var RealData = [];
+        var borderData = [];
+        data.map((item, index) => {
+          var newobj = deepCopy(item);
+          var newobj1 = deepCopy(item);
+          RealData.push(newobj);
+          borderData.push(newobj1);
+        });
+        RealData.map((item, index) => {
+          item.itemStyle = {
+            normal: {
+              color: {
+                type: "linear",
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                colorStops: [{
+                  offset: 0,
+                  color: startColor[index], // 0% 处的颜色
+                },
+                  {
+                    offset: 1,
+                    color: endColor[index], // 100% 处的颜色
+                  },
+                ],
+                globalCoord: false, // 缺省为 false
+              },
+            },
+          };
+        });
+        borderData.map((item, index) => {
+          item.itemStyle = {
+            normal: {
+              color: {
+                type: "linear",
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                colorStops: [{
+                  offset: 0,
+                  color: borderStartColor[index], // 0% 处的颜色
+                },
+                  {
+                    offset: 1,
+                    color: borderEndColor[index], // 100% 处的颜色
+                  },
+                ],
+                globalCoord: false, // 缺省为 false
+              },
+            },
+          };
+        });
+        this.option = {
+          legend: {
+            top: "5%",
+            // left: 10,
+            textStyle: {
+              color: "#f2f2f2",
+              fontSize: 12,
+            },
+            icon: "circle",
+            data: data,
+          },
+          tooltip: {
+            formatter: "<br/>{b}: {c}KM",
+          },
+          series: [
+            // 主要展示层的
+            {
+              radius: ["33%", "61%"],
+              center: ["50%", "50%"],
+              type: "pie",
+              label: {
+                normal: {
+                  show: false,
+                },
+                emphasis: {
+                  show: false,
+                },
+              },
+              labelLine: {
+                normal: {
+                  show: false,
+                },
+                emphasis: {
+                  show: false,
+                },
+              },
+              name: "监测长度",
+              data: RealData,
+            },
+            // 边框的设置
+            {
+              radius: ["31%", "34%"],
+              center: ["50%", "50%"],
+              type: "pie",
+              label: {
+                normal: {
+                  show: false,
+                },
+                emphasis: {
+                  show: false,
+                },
+              },
+              labelLine: {
+                normal: {
+                  show: false,
+                },
+                emphasis: {
+                  show: false,
+                },
+              },
+              animation: false,
+              tooltip: {
+                show: false,
+              },
+              data: borderData,
+            },
+            // 中心的圆圈
+            {
+              radius: ["26%", "31%"],
+              center: ["50%", "50%"],
+              type: "pie",
+              label: {
+                normal: {
+                  show: false,
+                },
+                emphasis: {
+                  show: false,
+                },
+              },
+              labelLine: {
+                normal: {
+                  show: false,
+                },
+                emphasis: {
+                  show: false,
+                },
+              },
+              tooltip: {
+                show: false,
+              },
+              data: [{
+                value: 100,
+                name: "监测长度",
+                itemStyle: {
+                  normal: {
+                    color: "#3d3d6b",
+                  },
+                },
+              }, ],
+              animation: false,
+            },
+          ],
+        };
+
+
+        myChart.setOption(this.option, true);
+        window.addEventListener("resize", function() {
+          myChart.resize();
+        });
+
+      },
 			//设备分析
 			sbfxChart() {
 				const chartDom = this.$refs.sbfx;
@@ -130,9 +544,7 @@
 						type: "pie",
 						radius: "80%",
 						center: ["50%", "50%"],
-						color: ["rgb(131,249,103)", "#FBFE27", "#FE5050",
-							"#1DB7E5"
-						], //'#FBFE27','rgb(11,228,96)','#FE5050'
+						color: ["rgb(131,249,103)", "#FBFE27", "#FE5050","#1DB7E5"], //'#FBFE27','rgb(11,228,96)','#FE5050'
 						data: [{
 								value: 285,
 								name: "设备1",
@@ -216,20 +628,16 @@
 				var xData = [],
 					yData = [];
 				var data = [{
-						name: "第一种",
-						value: 1895457,
-					},
-					{
-						name: "第二种",
-						value: 722232,
+						name: "商业用户",
+						value: 3999,
 					},
 					{
-						name: "第三种",
-						value: 1723130,
+						name: "居民用户",
+						value: 252906,
 					},
 					{
-						name: "第四种",
-						value: 854920,
+						name: "工业用户",
+						value: 100,
 					},
 				];
 				data.map((a, b) => {
@@ -907,7 +1315,7 @@
 		background: rgba(0, 0, 0, 0.39);
 	}
 
-	.info-list {
+	.info-list_left {
 		display: flex;
 		flex-wrap: wrap;
 		margin-bottom: 20px !important;
@@ -919,7 +1327,22 @@
 			background-size: 12px;
 			font-size: 14px;
 			color: #fff;
-			line-height: 60px;
+			line-height: 35px;
+		}
+	}
+	.info-list_right {
+		display: flex;
+		flex-wrap: wrap;
+		margin-bottom: 5px !important;
+
+		p {
+			width: 50%;
+			padding-left: 20px;
+			background: url("../assets/images/sentinel/hz_k.png") no-repeat left;
+			background-size: 12px;
+			font-size: 14px;
+			color: #fff;
+			line-height: 35px;
 		}
 	}
 
@@ -1008,20 +1431,133 @@
 	}
 
 	//图表设备分析
+	.cd_fx {
+		width: 100%;
+		height: 18vh;
+	}
+	//图表设备分析
 	.sb_fx {
 		width: 100%;
-		height: 300px;
+    height: 20vh;
 	}
 
 	.yh_fx {
 		width: 100%;
-		height: 260px;
+    height: 20vh;
 	}
 
 	.sj_fx {
 		width: 100%;
-		height: 280px;
+    height: 20vh;
 	}
+
+  .map_tab {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-around;
+    margin-bottom: 10px !important;
+    border-bottom: 2px solid rgba(13, 107, 179, 0.53);
+
+    span {
+      display: block;
+      /*background: rgba(13, 107, 179, 0.53);*/
+      padding: 8px 20px;
+      color: #fff;
+      font-size: 16px;
+      text-shadow: 0px 0px 4px #0bf3f7;
+      cursor: pointer;
+    }
+
+    .on {
+      color: #0bf3f7;
+      background: none !important;
+      box-shadow: none;
+      font-weight: bold;
+      position: relative;
+    }
+
+    .on::after {
+      content: '';
+      display: block;
+      position: absolute;
+      bottom: -10px; /* 下三角位于链接的底部 */
+      left: 50%; /* 水平居中 */
+      width: 0;
+      height: 0;
+      border-left: 9px solid transparent; /* 左边透明 */
+      border-right: 9px solid transparent; /* 右边透明 */
+      border-top: 10px solid rgba(13, 107, 179, 0.53); /* 上边是三角形颜色 */
+      transform: translateX(-50%); /* 确保三角形中心对齐链接的中心 */
+    }
+  }
+
+  .con_tckz_div {
+    margin: 0px 10px;
+
+    .tekz_div {
+      font-size: 14px;
+      text-align: left;
+      color: #fff;
+      padding-bottom: 15px;
+      border-bottom: 1px dashed #4a5958;
+      margin-bottom: 00px;
+    }
+    .scroll-container::-webkit-scrollbar {
+      /*滚动条整体样式*/
+      width: 6px !important; /*高宽分别对应横竖滚动条的尺寸*/
+      height: 1px !important;
+      display: block !important;
+      cursor: pointer;
+    }
+
+    .scroll-container::-webkit-scrollbar-thumb {
+      /*滚动条里面小方块*/
+      border-radius: 10px;
+      height: 15px;
+      -webkit-box-shadow: inset 0 0 5px rgba(0, 22, 55, 0.87);
+      // background: #E5E5E5;
+      background: rgba(38, 235, 255, 0.5);
+    }
+
+    .scroll-container::-webkit-scrollbar-track {
+      /*滚动条里面轨道*/
+      -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
+      border-radius: 10px;
+      background: rgba(10, 37, 64, 0.75);
+    }
+
+
+    .map_btn button {
+      display: inline-block;
+      background: url("../assets/images/sixZ/sixzbtn1.png") no-repeat center;
+      background-size: 100% 100%;
+      padding: 8px 20px;
+      margin: 8px 8px 8px 0px;
+      font-size: 14px;
+      color: #fff;
+      cursor: pointer;
+    }
+
+    .map_btn button.on {
+      background: url("../assets/images/sixZ/sixzbtn1_on.png") no-repeat center;
+      background-size: 100% 100%;
+      box-shadow: none;
+    }
+
+    .map_clear {
+      background: #09335f;
+      color: #a4bfe2;
+      font-size: 14px;
+      float: right;
+      margin: 20px 0px;
+      display: inline-block;
+      padding: 6px 18px;
+    }
+
+    .map_clear:hover {
+      background: #0a5184;
+    }
+  }
 </style>
 <style rel="stylesheet/scss" lang="scss" scoped>
 	@import '@/assets/styles/base.scss';

src/views/SentryPage.vue

@@ -12,24 +12,27 @@
     <router-view ref="senEventCenter"></router-view>
 		<div class="s_header">
 			<div class="head_btn">
-          <div @click="jumpTo('/SentryCockpit',0)" :class="routerIdx == 0 ? 'on' : ''">
-              <i>驾驶舱</i>
-          </div>
-          <div @click="jumpTo('/SenEquipmentCenter',1)" :class="routerIdx == 1 ? 'on' : ''">
-              <i>设备中心</i>
-          </div>
+        <div @click="jumpTo('/SentryCockpit',0)" :class="routerIdx == 0 ? 'on' : ''">
+            <i>驾驶舱</i>
+        </div>
+        <div @click="jumpTo('/SenEquipmentCenter',1)" :class="routerIdx == 1 ? 'on' : ''">
+            <i>设备中心</i>
+        </div>
+        <div @click="jumpTo('？？？')" :class="routerIdx == 1 ? 'on' : ''">
+            <i>应急中心</i>
+        </div>
       </div>
       <div class="header_tit"><i>{{title}}</i></div>
       <div class="head_btn">
-		  <div @click="jumpTo('/SenWarningCenter',4)" :class="routerIdx == 4 ? 'on' : ''">
-              <i>预警中心</i>
-          </div>
-          <div @click="jumpTo('/SenEventCenter',2)" :class="routerIdx == 2 ? 'on' : ''">
-              <i>事件中心</i>
-          </div>
-          <div @click="jumpTo('/useCenter',3)" :class="routerIdx == 3 ? 'on' : ''">
-              <i>用户中心</i>
-          </div>
+		    <div @click="jumpTo('/SenWarningCenter',4)" :class="routerIdx == 4 ? 'on' : ''">
+            <i>预警中心</i>
+        </div>
+        <div @click="jumpTo('/SenEventCenter',2)" :class="routerIdx == 2 ? 'on' : ''">
+            <i>事件中心</i>
+        </div>
+        <div @click="jumpTo('/useCenter',3)" :class="routerIdx == 3 ? 'on' : ''">
+            <i>用户中心</i>
+        </div>
 			</div>
 			<div class="head_tx">
 				<span><img src="../assets/images/sentinel/hz_tx.png" /></span>
@@ -513,6 +516,7 @@
         addEventLogDescription({eventId:params.eventId,reviewDescription:this.reviewDescription}).then(req => {
           if(req.code == 200){
             this.$modal.msgSuccess('保存成功');
+            this.openEventDetails(params)
           }
         })
       },