Add - 新增企业详情传感器基础信息联调 && 弹窗样式完善

src/api/forest.js

@@ -411,4 +411,12 @@ export function eventHandling(id,eventCode) {
       url: '/center-monitor/device/selectByDeviceId/'+id,
       method: 'get'
     })
+  }
+
+  // 获取企业传感器信息
+  export function getSensorDataInfoAndList(deviceCode) {
+    return request({
+      url: `/center-monitor/device/getSensorDataInfoAndList?deviceCode=${deviceCode}`,
+      method: 'get'
+    })
   }

src/components/DeviceDialog/index.vue

@@ -19,7 +19,7 @@
 									border>
 									<el-descriptions-item>
 										<template slot="label">
-											<span>{{ '名称' }}</span>
+											<span>{{ '企业名称' }}</span>
 										</template>
 										<span>{{currentDeviceLabel}}</span>
 									</el-descriptions-item>
@@ -36,52 +36,56 @@
 							<!-- 传感器基础数据 -->
 							<div class="sensorInfo" v-show="isSensorVisible">
 								<div>
-                  <span title="烟感探测器">设备名称：烟感探测器</span>
-								  <span>状态：正常</span>
-                </div>
+                  					<span title="烟感探测器">设备名称：{{ deviceInfo.eventName ? deviceInfo.eventName : '--' }}</span>
+								  	<span>状态：<span :class="currentWorkingStatus == '0' ? 'normal-state' : 'err-state' ">{{ currentWorkingStatus == '0' ? '正常' : "异常" }}</span></span>
+                				</div>
 								<div>
-									<span title="烟感探测器">信号强度：-52dBm</span>
-									<span>状态：正常</span>
+									<span title="烟感探测器">信号强度：{{ deviceInfo.signalStrength ? deviceInfo.signalStrength : '--' }}dBm</span>
+									<span>状态：<span :class="deviceInfo.signalStrengthStatus == '0' ? 'normal-state' : 'err-state' ">{{ deviceInfo.signalStrengthStatus == '0' ? '正常' : "异常" }}</span></span>
 								</div>
 								<div>
-									<span title="烟感探测器">实时浓度：5%LEL</span>
-									<span>状态：正常</span>
+									<span title="烟感探测器">实时浓度：{{ deviceInfo.smokescope ? deviceInfo.smokescope : '--' }}%FT</span>
+									<span>状态：<span :class="deviceInfo.smokescopeStatus == '0' ? 'normal-state' : 'err-state' ">{{ deviceInfo.smokescopeStatus == '0' ? '正常' : "异常" }}</span></span>
 								</div>
 								<div>
-									<span title="烟感探测器">实时电压：3.31</span>
-									<span>状态：正常</span>
+									<span title="烟感探测器">实时电压：{{ deviceInfo.cellVoltage ? deviceInfo.cellVoltage : '--' }}V</span>
+									<span>状态：<span :class="deviceInfo.cellVoltageStatus == '0' ? 'normal-state' : 'err-state' ">{{ deviceInfo.cellVoltageStatus == '0' ? '正常' : "异常" }}</span></span>
 								</div>
 								<div>
-									<span title="烟感探测器">实时温度：29℃</span>
-									<span>状态：正常</span>
+									<span title="烟感探测器">实时温度：{{ deviceInfo.temperature ? deviceInfo.temperature : '--' }}℃</span>
+									<span>状态：<span :class="deviceInfo.temperatureStatus == '0' ? 'normal-state' : 'err-state' ">{{ deviceInfo.temperatureStatus == '0' ? '正常' : "异常" }}</span></span>
+								</div>
+								<div style="margin-top: 5%;"></div>
+								<!-- 传感器列表 -->
+								<div class="cameraInfo">
+								<div 
+									v-for="(e,idx) in deviceList" 
+									:key="idx" 
+									class="cameradiv device_contain"
+									@click="currentDeviceHasChanged(e,idx)"
+									:class="currentDevice == idx ? 'select-device' : '' "
+									>
+									<img 
+										:src="e.deviceImg?e.deviceImg : require('@/assets/images/video-plaza/shiLianWangImg/no-camera.png')" 
+										style="width: 110px;height: 70px;object-fit: fill;"
+									>
+									
+									<span>{{ e.deviceName }}</span>
+								</div>
 								</div>
-                <div style="margin-top: 5%;"></div>
-                <!-- 传感器列表 -->
-                <div class="cameraInfo">
-                  <div 
-                    v-for="(e,idx) in deviceList" 
-                    :key="idx" 
-                    class="cameradiv device_contain"
-                    @click="currentDeviceHasChanged(e,idx)"
-                    :class="currentDevice == idx ? 'select-device' : '' "
-                    >
-                    <img 
-                      :src="e.deviceImg?e.deviceImg : require('@/assets/images/video-plaza/shiLianWangImg/no-camera.png')" 
-                      style="width: 107px;height: 66px;"
-                      >
-                    <span>{{ e.deviceName }}</span>
-                  </div>
-                </div>
 							</div>
 							<!-- 摄像头基础数据 -->
 							<div class="cameraInfo" v-show="!isSensorVisible">
 								<div 
-                  v-for="(e,idx) in cameraList" 
-                  :key="idx" 
-                  class="cameradiv" 
-                  @click="deviceShow(e,idx)"
-                >
-									<img :src="e.cameraImg?e.cameraImg : require('@/assets/images/video-plaza/shiLianWangImg/no-camera.png') ">
+									v-for="(e,idx) in cameraList" 
+									:key="idx" 
+									class="cameradiv" 
+									@click="deviceShow(e,idx)"
+									>
+									<img 
+										:src="e.cameraImg?e.cameraImg : require('@/assets/images/video-plaza/shiLianWangImg/no-camera.png') "
+										style="width: 110px;height: 70px;object-fit: fill;"
+									>
 									<span>{{ e.cameraName }}</span>
 								</div>
 							</div>
@@ -105,11 +109,14 @@
 				<!-- 摄像头视图 -->
 				<div class="camera_contain" v-show="!isSensorVisible">
 					<div class="camera_list_row" 
-            v-for="(e,idx) in cameraList" 
-            :key="idx"
-            @click="deviceShow(e)"
-          >
-						<img :src="e.cameraImg?e.cameraImg : require('@/assets/images/video-plaza/shiLianWangImg/no-camera.png') ">
+						v-for="(e,idx) in cameraList" 
+						:key="idx"
+						@click="deviceShow(e)"
+					>
+						<img 
+							:src="e.cameraImg?e.cameraImg : require('@/assets/images/video-plaza/shiLianWangImg/no-camera.png') "
+							style="width: 153px;height: 94px;object-fit: fill;"	
+						>
 						<h4>{{ e.cameraName }}</h4>
 					</div>
 				</div>
@@ -121,7 +128,8 @@
 <script>
 	let echarts = require("echarts");
   import {
-    deviceById
+    deviceById,
+	getSensorDataInfoAndList,        // 获取传感器信息
   } from '@/api/forest';
 	export default {
 		name: 'DeviceDialog',
@@ -231,7 +239,7 @@
 							color: "#2297DA",
 						},
 						axisLabel: {
-							formatter: '{value} dB/m',
+							formatter: '{value}',
 						},
 						splitLine: {
 							lineStyle: {
@@ -441,16 +449,18 @@
 						pic: require('@/assets/images/video-plaza/shiLianWangImg/no-camera.png')
 					},
 				],
-        currentDeviceLabel:'',
-        deviceList:[],         // 传感器列表
-        currentDevice:0,       // 当前选中传感器，默认索引为0
-        currentCamera:null,    // 当前选中传感器，默认不选
+				currentDeviceLabel:'',
+				currentWorkingStatus:null,   // 当前所选传感器设备状态 0-正常 1-异常
+				deviceList:[],         // 传感器列表
+				currentDevice:0,       // 当前选中传感器，默认索引为0
+				currentCamera:null,    // 当前选中传感器，默认不选
+				deviceInfo:{},         // 传感器基础数据
 			}
 		},
 		methods: {
-      deviceShow(e) {
-        this.$parent.showTVWall(e.cameraCode, e.cameraName, e.cameraType);
-      },
+			deviceShow(e) {
+				this.$parent.showTVWall(e.cameraCode, e.cameraName, e.cameraType);
+			},
 			initChart() {
 				let signalChart = echarts.init(document.getElementById("signal"));
 				let concentrationChart = echarts.init(document.getElementById("concentration"));
@@ -461,12 +471,20 @@
 				voltageChart.setOption(this.voltageOption)
 				temperatureChart.setOption(this.temperatureOption)
 			},
-      // 当前所选传感器发生变化
-      currentDeviceHasChanged(e,idx){
-        if(this.currentDevice == idx) return;
-        this.currentDevice = idx
-        this.currentDeviceLabel = e.deviceName
-      },
+			// 当前所选传感器发生变化
+			currentDeviceHasChanged(e,idx){
+				if(this.currentDevice == idx) return;
+				this.currentDevice = idx
+				// 更新当前设备状态
+				this.currentWorkingStatus = e.workingStatus
+				// this.currentDeviceLabel = e.deviceName
+				// 获取传感器基础数据
+				getSensorDataInfoAndList(e.deviceCode).then(res => {
+					this.deviceInfo = res.data.info || {}
+					// 渲染图表
+					this.updateChart(res)
+				})
+			},
 			// 当前选项卡发生变化（传感器 / 摄像头）
 			radioHasChanged(v) {
 				if (v == '传感器') {
@@ -476,21 +494,41 @@
 				}
 			},
 			open(data) {
-				console.log(data)
+				// 重置选项卡状态为传感器
+				this.isSensorVisible = true
 				this.deviceInfoList = data
-        // 填充摄像头数据
-        this.cameraList = data[0].cameras
-        this.deviceList = data[0].devices
-        // 填充传感器数据 && 调取传感器详情
-        this.currentDeviceLabel = data[0].devices[0].deviceName
-        deviceById(data[0].devices[0].id).then(res => {
-
-        })
+				// 填充摄像头数据
+				this.cameraList = data[0].cameras
+				this.deviceList = data[0].devices
+				this.currentWorkingStatus = data[0].devices[0].workingStatus
+				// 获取传感器基础数据
+				if(this.deviceList.length != 0){
+					getSensorDataInfoAndList(this.deviceList[0].deviceCode).then(res => {
+						this.deviceInfo = res.data.info
+						// 渲染图表
+						this.updateChart(res)
+					})
+				}
+				// 填充传感器数据 && 调取传感器详情
+				this.currentDeviceLabel = data[0].value
 				// this.currentCameraParam = data
 				this.tvWallInfoVisible = true
-        setTimeout(() => {
-          this.initChart()
-        })
+				setTimeout(() => {
+					this.initChart()
+				})
+			},
+			updateChart(res){
+				this.signalOption.series[0].data = res.data.signalStrengthList
+				this.concentrationOption.series[0].data = res.data.smokescopeList
+				this.voltageOption.series[0].data = res.data.cellVoltageList
+				this.temperatureOption.series[0].data = res.data.temperaturethList
+				this.signalOption.xAxis.data = res.data.createTimeList
+				this.concentrationOption.xAxis.data = res.data.createTimeList
+				this.voltageOption.xAxis.data = res.data.createTimeList
+				this.temperatureOption.xAxis.data = res.data.createTimeList
+				setTimeout(() => {
+					this.initChart()
+				})
 			},
 			update(option, type) {
 				this.currentType = type
@@ -674,6 +712,14 @@
 <style rel="stylesheet/scss" lang="scss" scoped>
 	@import '@/assets/styles/base.scss';
 
+	.normal-state{
+		color: #06C562 !important;
+	}
+
+	.err-state{
+		color: #FF0000 !important;
+	}
+
 	::v-deep .el-radio-group {
 		width: 100%;
 
@@ -738,10 +784,14 @@
 				margin-right: 10px;
 				margin-bottom: 10px;
 				color: #2297DA;
-        cursor: pointer;
+				cursor: pointer;
 			}
 			color: #2297DA;
-      cursor: pointer;
+			cursor: pointer;
+			>span{
+				display: block;
+				width: 105px !important;
+			}
 		}
 
     .cameradiv:hover{
@@ -770,6 +820,10 @@
       color: #55D7FF !important; 
     }
   }
+  .device_contain span{
+	display: block;
+	width: 105px !important;
+  }
 </style>
 
 <style lang="scss">

src/views/forest.vue

@@ -694,10 +694,10 @@
         markersMap.bindPopupHtml = "";
         cameraMarkersList.push(markersMap);
         enterpriseById(e.id).then(res => {
-
           markersMap.parameter = {
             id: e.id,
             name: e.enterpriseName,
+            enterpriseName:e.enterpriseName,
             cameras: res.data.cameras,
             devices: res.data.devices,
           }

src/views/monitor.vue

@@ -293,40 +293,38 @@ export default {
   methods: {
     getDeviceList(e){
       let that = this;
-      that.$refs.supermap.clearM();
       enterpriseById(e.id).then(res => {
         this.cameraListSearch = res.data.cameras
         this.cameraListSearchAll = res.data.cameras
-        let enterpriseCameraMarkersList = [];
-        for (let i = 0; i < res.data.cameras.length; i++) {
-          let markersMap = {
-            lng: 124.59,
-            lat: 43.02,
-            icon: "camera",
-            bindPopupHtml: "",
-            click: "previewBefore",
-            parameter: "",
-            name: i,
-            keepBindPopup: false,
-            isAggregation: false,
-          };
-          markersMap.parameter = {
-            code: res.data.cameras[i].cameraCode,
-            name: res.data.cameras[i].cameraName,
-            type: res.data.cameras[i].cameraType
-          }
-
-          markersMap.lng = res.data.cameras[i].longitude;
-          markersMap.lat = res.data.cameras[i].latitude;
-          markersMap.icon = "camera";
-          markersMap.click = 'previewBefore'
-          markersMap.bindPopupHtml = "";
-          enterpriseCameraMarkersList.push(markersMap);
+        let cameraMarkersList = [];
+        // 企业落点绘制
+        let markersMap = {
+          lng: 124.59,
+          lat: 43.02,
+          icon: "enterprise",
+          bindPopupHtml: "",
+          click: "previewBefore",
+          parameter: "",
+          name: e.id,
+          keepBindPopup: false,
+          isAggregation: false,
+        };
+        markersMap.parameter = {
+          id: e.id,
+          name: e.enterpriseName,
+          cameras: res.data.cameras,
+          devices: res.data.devices,
         }
+        markersMap.lng = e.longitude;
+        markersMap.lat = e.latitude;
+        markersMap.icon = "enterprise";
+        markersMap.click = 'previewBefore'
+        markersMap.bindPopupHtml = "";
+        cameraMarkersList.push(markersMap);
         setTimeout(() => {
           that.$refs.supermap.clearM();
           that.$refs.supermap.clearMRadius();
-          that.$refs.supermap.setMarkers(enterpriseCameraMarkersList);
+          that.$refs.supermap.setMarkers(cameraMarkersList);
         }, 3000);
       })
     },
@@ -387,33 +385,15 @@ export default {
         );
       }
     },
-    previewBefore(cameraParam) {
-      console.log(this.localMark)
-      switch (this.localMark) {
-        case 'She' :
-          selectByCameraId(cameraParam.code).then(res => {
-            this.$refs.deviceDialog.update(res.data, 'SHE')
-          })
-          break;
-        case 'Chuan' :
-          selectByDeviceId(cameraParam).then(res => {
-            this.$refs.deviceDialog.update(res.data, 'CHUAN')
-          })
-          break;
-        case 'La' :
-          selectByBroadcastId(cameraParam).then(res => {
-            this.$refs.deviceDialog.update(res.data, 'LA')
-          })
-          break;
-        case 'Zhi' :
-          selectByCameraId(cameraParam.code).then(res => {
-            this.$refs.deviceDialog.update(res.data, 'Zhi')
-          })
-          break;
-      }
-      this.$refs.deviceDialog.open(cameraParam)
-      return
-      this.currentCameraParam = cameraParam
+    previewBefore(company) {
+      this.$refs.deviceDialog.open([
+        {
+          key:"名称",
+          value:company.name,
+          cameras:company.cameras,
+          devices:company.devices
+        },
+      ])
     },
     //初始化地图数据
     getSuperMapUrl() {