Add - 企业落点详情完善 && 传感器详情接口对接

src/api/forest.js

@@ -405,3 +405,10 @@ export function eventHandling(id,eventCode) {
     })
   }
 
+  // 企业传感器传详情
+  export function deviceById(id) {
+    return request({
+      url: '/center-monitor/device/selectByDeviceId/'+id,
+      method: 'get'
+    })
+  }

src/components/DeviceDialog/index.vue

@@ -14,19 +14,14 @@
 					<div class="leader-info-container" style="width: 100%;height: 100%;padding: 0;">
 						<div class="leader-info-list-con"
 							style="width: 100% !important; overflow: hidden;margin-bottom: 0;padding:1rem;background-image: none !important;box-shadow: none !important;">
-							<div v-for="(e,idx) in deviceInfoList" :key="idx">
+							<div>
 								<el-descriptions class="margin-top bd-table" title="" :column="2" direction="horizontal"
 									border>
 									<el-descriptions-item>
 										<template slot="label">
-											{{ e.key }}
+											<span>{{ '名称' }}</span>
 										</template>
-										<span
-											v-if="currentType == 'tree' ? false : e.value&&(e.value.indexOf('http://')!=-1||e.value.indexOf('https://')!=-1)">
-											<el-image style="width:50px;height:50px" :src="e.value"
-												:preview-src-list="[e.value]" />
-										</span>
-										<span v-else>{{e.value}}</span>
+										<span>{{currentDeviceLabel}}</span>
 									</el-descriptions-item>
 								</el-descriptions>
 							</div>
@@ -40,31 +35,54 @@
 
 							<!-- 传感器基础数据 -->
 							<div class="sensorInfo" v-show="isSensorVisible">
-								<span>设备名称:烟感探测器</span>
-								<span>设备状态:正常</span>
-								<br>
 								<div>
-									<span>信号强度：-52dBm</span>
+                  <span title="烟感探测器">设备名称：烟感探测器</span>
+								  <span>状态：正常</span>
+                </div>
+								<div>
+									<span title="烟感探测器">信号强度：-52dBm</span>
 									<span>状态：正常</span>
 								</div>
 								<div>
-									<span>实时浓度：5%LEL</span>
+									<span title="烟感探测器">实时浓度：5%LEL</span>
 									<span>状态：正常</span>
 								</div>
 								<div>
-									<span>实时电压：3.31</span>
+									<span title="烟感探测器">实时电压：3.31</span>
 									<span>状态：正常</span>
 								</div>
 								<div>
-									<span>实时温度：29℃</span>
+									<span title="烟感探测器">实时温度：29℃</span>
 									<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: 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">
-									<img :src="e.pic">
-									<span>{{ e.tile }}</span>
+								<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') ">
+									<span>{{ e.cameraName }}</span>
 								</div>
 							</div>
 						</div>
@@ -86,9 +104,13 @@
 				</div>
 				<!-- 摄像头视图 -->
 				<div class="camera_contain" v-show="!isSensorVisible">
-					<div class="camera_list_row" v-for="(e,idx) in cameraList" :key="idx">
-						<img :src="e.pic">
-						<h4>{{ e.tile }}</h4>
+					<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') ">
+						<h4>{{ e.cameraName }}</h4>
 					</div>
 				</div>
 			</div>
@@ -98,6 +120,9 @@
 
 <script>
 	let echarts = require("echarts");
+  import {
+    deviceById
+  } from '@/api/forest';
 	export default {
 		name: 'DeviceDialog',
 		props: ['localMark'],
@@ -415,11 +440,17 @@
 						tile: '四平市双辽市那木乡永发屯金宝村',
 						pic: require('@/assets/images/video-plaza/shiLianWangImg/no-camera.png')
 					},
-				]
-
+				],
+        currentDeviceLabel:'',
+        deviceList:[],         // 传感器列表
+        currentDevice:0,       // 当前选中传感器，默认索引为0
+        currentCamera:null,    // 当前选中传感器，默认不选
 			}
 		},
 		methods: {
+      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"));
@@ -430,6 +461,12 @@
 				voltageChart.setOption(this.voltageOption)
 				temperatureChart.setOption(this.temperatureOption)
 			},
+      // 当前所选传感器发生变化
+      currentDeviceHasChanged(e,idx){
+        if(this.currentDevice == idx) return;
+        this.currentDevice = idx
+        this.currentDeviceLabel = e.deviceName
+      },
 			// 当前选项卡发生变化（传感器 / 摄像头）
 			radioHasChanged(v) {
 				if (v == '传感器') {
@@ -441,8 +478,19 @@
 			open(data) {
 				console.log(data)
 				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.currentCameraParam = data
 				this.tvWallInfoVisible = true
+        setTimeout(() => {
+          this.initChart()
+        })
 			},
 			update(option, type) {
 				this.currentType = type
@@ -604,11 +652,6 @@
 				}
 			}
 		},
-		mounted() {
-			setTimeout(() => {
-				this.initChart()
-			})
-		},
 		watch: {
 			localMark(newVal) {
 				switch (newVal) {
@@ -663,11 +706,24 @@
 
 	.sensorInfo {
 		margin-top: 10%;
-		height: 40%;
+		height: 75%;
 
 		span {
 			color: #2297DA;
 		}
+
+    >div{
+      >span:nth-child(1){
+        display: inline-block;
+        width: 140px;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+      >span:nth-child(2){
+        float: right;
+      }
+    }
 	}
 
 	.cameraInfo {
@@ -681,11 +737,19 @@
 				border: 1px solid #10539a;
 				margin-right: 10px;
 				margin-bottom: 10px;
-				color: #2297DA
+				color: #2297DA;
+        cursor: pointer;
 			}
-			color: #2297DA
+			color: #2297DA;
+      cursor: pointer;
 		}
 
+    .cameradiv:hover{
+      >span{
+        color: #55D7FF !important; 
+      }
+    }
+
 		>div {
 			display: flex;
 		}
@@ -694,6 +758,18 @@
 			margin-top: 10%;
 		}
 	}
+
+  .select-device,.select-camera{
+    >span{
+      color: #55D7FF !important; 
+    }
+  }
+
+  .device_contain:hover{
+    >span{
+      color: #55D7FF !important; 
+    }
+  }
 </style>
 
 <style lang="scss">
@@ -786,13 +862,21 @@
 							margin-bottom: 10px;
 							border-radius: 5px;
 							border: 1px solid #10539a;
+              cursor: pointer;
 						}
 						
 						h4{
-							color: #2297DA
+							color: #2297DA;
+              cursor: pointer;
 						}
 					}
 
+          .camera_list_row:hover{
+            >h4{
+              color: #55D7FF !important; 
+            }
+          }
+
 					>div {
 						width: 20%;
 						height: 20%;

src/views/forest.vue

@@ -669,6 +669,9 @@
       },
       //三级列表选择（获取列表）
       getDeviceList(e,idx){
+        setTimeout(() => {
+          console.log('eeeeeeeeeeee',e)
+        },3000)
         this.deviceBtn=idx
         let that = this;
         let cameraMarkersList = [];
@@ -683,10 +686,6 @@
           keepBindPopup: false,
           isAggregation: false,
         };
-        markersMap.parameter = {
-          id: e.id,
-          name: e.enterpriseName,
-        }
 
         markersMap.lng = e.longitude;
         markersMap.lat = e.latitude;
@@ -694,15 +693,22 @@
         markersMap.click = 'previewBefore'
         markersMap.bindPopupHtml = "";
         cameraMarkersList.push(markersMap);
-
-        setTimeout(() => {
-          that.$refs.supermap.clearM();
-          that.$refs.supermap.clearMRadius();
-          that.$refs.supermap.setMarkers(cameraMarkersList);
-        }, 3000);
         enterpriseById(e.id).then(res => {
+
+          markersMap.parameter = {
+            id: e.id,
+            name: e.enterpriseName,
+            cameras: res.data.cameras,
+            devices: res.data.devices,
+          }
           that.cameraListSearch = res.data.cameras
           that.cameraListSearchAll = res.data.cameras
+
+          setTimeout(() => {
+            that.$refs.supermap.clearM();
+            that.$refs.supermap.clearMRadius();
+            that.$refs.supermap.setMarkers(cameraMarkersList);
+          }, 3000);
         })
         that.regulatoryinformationQueryParams = {
           pageNum: 1,
@@ -773,7 +779,9 @@
         this.$refs.deviceDialog.open([
           {
             key:"名称",
-            value:company.name
+            value:company.name,
+            cameras:company.cameras,
+            devices:company.devices
           },
         ])
       },