页面提交

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/SentryCockpit.vue

@@ -544,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",

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)
           }
         })
       },