Add - 新增企业落点详情

src/components/DeviceDialog/index.vue

@@ -10,14 +10,13 @@
       custom-class="tvDialog"
       width="55%"
       center
-      style="margin-top: 12vh !important;"
+      style="margin-top: 5vh !important;"
       >
       <div class="container">
         <div class="leftContain">
           <div
             class="TVWallCustomWidth"
-            style="width: 100% !important;height: 75% !important;box-shadow: none !important;background: none !important;"
-            :style="{height: currentType == 'tree' ? '100% !important' : '75% !important'}"
+            style="width: 100% !important;height: 100% !important;box-shadow: none !important;background: none !important;"
             >
             <div
               class="leader-info-container"
@@ -25,7 +24,7 @@
               >
               <div
                 class="leader-info-list-con"
-                style="width: 100% !important;height: 90% !important; overflow: auto;margin-bottom: 0;padding:1rem;background-image: none !important;box-shadow: none !important;"
+                style="width: 100% !important;height: 90% !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">
                   <el-descriptions class="margin-top" title="" :column="2" direction="horizontal" border >
@@ -40,31 +39,71 @@
                     </el-descriptions-item>
                   </el-descriptions>
                 </div>
+
+                <!-- 切换器 -->
+                <el-radio-group v-model="currentRadio" @input="radioHasChanged">
+                  <el-radio-button label="传感器"></el-radio-button>
+                  <el-radio-button label="摄像头" class="cameraBtn"></el-radio-button>
+                </el-radio-group>
+
+                <!-- 传感器基础数据 -->
+                <div class="sensorInfo" v-show="isSensorVisible">
+                  <span>设备名称:烟感探测器</span>
+                  <span>设备状态:正常</span>
+                  <br>
+                  <div>
+                    <span>信号强度：-52dBm</span>
+                    <span>状态：正常</span>
+                  </div>
+                  <div>
+                    <span>实时浓度：5%LEL</span>
+                    <span>状态：正常</span>
+                  </div>
+                  <div>
+                    <span>实时电压：3.31</span>
+                    <span>状态：正常</span>
+                  </div>
+                  <div>
+                    <span>实时温度：29℃</span>
+                    <span>状态：正常</span>
+                  </div>
+                </div>
+                <!-- 摄像头基础数据 -->
+                <div class="cameraInfo" v-show="!isSensorVisible">
+                  <div
+                    v-for="(e,idx) in cameraList"
+                    :key="idx"
+                  >
+                    <img :src="e.pic">
+                    <span>{{ e.tile }}</span>
+                  </div>
+                </div>
               </div>
             </div>
           </div>
-          <!-- 资源图标 -->
-          <img
-            :src='currentDevicePic'
-            class="deviceIcon"
-            alt=""
-            v-show="currentType != 'tree'  "
-            @click="toDo">
         </div>
         <div class="rightContain">
-          <div class="bigPicContain">
-            <img :src='currentPickedPic' alt="" class="bigPic" v-show="isHavePicVisible">
-            <img src='@/assets/images/noDevice.png' class="noHavePic" alt="" v-show="!isHavePicVisible">
+          <!-- 按照左侧切换器展示对应传感器/摄像头内容 -->
+          <!-- 传感器图表 -->
+          <div class="sernsorChart_contain" v-show="isSensorVisible">
+            <!-- 信号强度 -->
+            <div id="signal"></div>
+            <!-- 实时浓度 -->
+            <div id="concentration"></div>
+            <!-- 实时电压 -->
+            <div id="voltage"></div>
+            <!-- 实时温度 -->
+            <div id="temperature"></div>
           </div>
-          <div class="scrollBottomBar" v-show="tvPicList.length != 0">
-            <img
-              class="bottomPic"
-              v-for="(e,idx) in tvPicList"
-              @click="currentHighLight(idx,e)"
-              :class="currentHighLightPic == idx ? 'tvPicHighlight' : 'tvPicNotHighlight' "
+          <!-- 摄像头视图 -->
+          <div class="camera_contain" v-show="!isSensorVisible">
+            <div
+              v-for="(e,idx) in cameraList"
               :key="idx"
-              :src="e"
-            />
+            >
+              <img :src="e.pic">
+              <h4>{{ e.tile }}</h4>
+            </div>
           </div>
         </div>
       </div>
@@ -72,6 +111,7 @@
 </template>
 
 <script>
+let echarts = require("echarts");
 export default{
     name:'DeviceDialog',
     props:['localMark'],
@@ -162,209 +202,323 @@ export default{
               }
             ],
             currentDeviceData:null,
-            currentPickedPic:require('@/assets/images/login-b-2.png'),
-            noHavePic:require('@/assets/images/integrated/event-img-sub.png'),
-            tvPicList:[
-            ],
-            currentHighLightPic:0,
             tvWallInfoVisible:false,
             currentCameraParam:null,
             workingStatus:null,
             currentCenterStatus:null,
-            isHavePicVisible:true,
-            currentType:null
+            currentType:null,
+            currentRadio:'传感器',
+            isSensorVisible:true,         // 当前是否显示为传感器信息，否则为摄像头信息，默认为传感器
+            signalOption:{
+              grid: {
+                top: '15%',
+                left: '3%',
+                right: '4%',
+                bottom: '3%',
+                containLabel: true
+              },
+              xAxis: {
+                type: 'category',
+                data: ['1:00', '2:00', '3:00', '5:00', '6:00','7:00','8:00','9:00','10:00','11:00','12:00','13:00','14:00','15:00','16:00','17:00','18:00','19:00','20:00','21:00','22:00','23:00','24:00',]
+              },
+              yAxis: {
+                type: 'value',
+                axisLabel: {formatter: '{value} dB/m'},
+              },
+              series: [
+                {
+                  data: [0.1, 0.1, 0.1, 0.1, 0.12, 0.08, 0.08,0.1, 0.1, 0.1, 0.12, 0.08, 0.08,0.1, 0.1, 0.1, 0.12, 0.08, 0.08,0.12, 0.08, 0.08,0.1, 0.1, 0.1, 0.12, 0.08, 0.08,],
+                  type: 'line'
+                }
+              ]
+            },
+            concentrationOption:{
+              grid: {
+                top: '15%',
+                left: '3%',
+                right: '4%',
+                bottom: '3%',
+                containLabel: true
+              },
+              xAxis: {
+                type: 'category',
+                data: ['1:00', '2:00', '3:00', '5:00', '6:00','7:00','8:00','9:00','10:00','11:00','12:00','13:00','14:00','15:00','16:00','17:00','18:00','19:00','20:00','21:00','22:00','23:00','24:00',]
+              },
+              yAxis: {
+                type: 'value',
+                axisLabel: {formatter: '{value} ％FT'},
+              },
+              series: [
+                {
+                  data: [6.35, 6.75, 6.35, 6.75,6.35, 6.75, 6.35, 6.75, 6.35, 6.75,6.35, 6.75,6.35, 6.75, 6.35, 6.75,6.35, 6.75,6.35, 6.75, 6.35, 6.75,6.35, 6.75,],
+                  type: 'line'
+                }
+              ]
+            },
+            voltageOption:{
+              grid: {
+                top: '15%',
+                left: '3%',
+                right: '4%',
+                bottom: '3%',
+                containLabel: true
+              },
+              xAxis: {
+                type: 'category',
+                data: ['1:00', '2:00', '3:00', '5:00', '6:00','7:00','8:00','9:00','10:00','11:00','12:00','13:00','14:00','15:00','16:00','17:00','18:00','19:00','20:00','21:00','22:00','23:00','24:00',]
+              },
+              yAxis: {
+                type: 'value',
+                axisLabel: {formatter: '{value} V'},
+              },
+              series: [
+                {
+                  data: [2.85, 2.85,2.85, 2.85,2.85, 2.85,2.85, 2.85,2.85, 2.85,2.85, 2.85,2.85, 2.85,2.85, 2.85,2.85, 2.85,2.85, 2.85,2.85, 2.85,2.85, 2.85,2.85, 2.85,2.85, 2.85,2.85, 2.85,],
+                  type: 'line'
+                }
+              ]
+            },
+            temperatureOption:{
+              grid: {
+                top: '15%',
+                left: '3%',
+                right: '4%',
+                bottom: '3%',
+                containLabel: true
+              },
+              xAxis: {
+                type: 'category',
+                data: ['1:00', '2:00', '3:00', '5:00', '6:00','7:00','8:00','9:00','10:00','11:00','12:00','13:00','14:00','15:00','16:00','17:00','18:00','19:00','20:00','21:00','22:00','23:00','24:00',]
+              },
+              yAxis: {
+                type: 'value',
+                axisLabel: {formatter: '{value} ℃'},
+              },
+              series: [
+                {
+                  data: [23,23,23,23,23,23,23,23,23,23,23,23,24,24,24,24,24,24,24,23,23,23,23,23,23,23,23,23,23,23,23,23,23,],
+                  type: 'line'
+                }
+              ]
+            },
+            cameraList:[
+              {
+                tile:'四平市双辽市郑家屯街道工农村东',
+                pic:require('@/assets/images/video-plaza/shiLianWangImg/no-camera.png')
+              },
+              {
+                tile:'四平市双辽市辽东街道建金良村',
+                pic:require('@/assets/images/video-plaza/shiLianWangImg/no-camera.png')
+              },
+              {
+                tile:'四平市双辽市那木乡双城村',
+                pic:require('@/assets/images/video-plaza/shiLianWangImg/no-camera.png')
+              },
+              {
+                tile:'四平市双辽市郑家屯街道工农村东',
+                pic:require('@/assets/images/video-plaza/shiLianWangImg/no-camera.png')
+              },
+              {
+                tile:'四平市双辽市那木乡建新村东北',
+                pic:require('@/assets/images/video-plaza/shiLianWangImg/no-camera.png')
+              },
+              {
+                tile:'四平市双辽市那木乡永发屯金宝村',
+                pic:require('@/assets/images/video-plaza/shiLianWangImg/no-camera.png')
+              },
+            ]
+
         }
     },
     methods:{
-        open(data){
-            console.log(data)
-            this.currentCameraParam = data
-        },
-        update(option,type){
-          this.currentType = type
-          this.deviceInfoList = []
-          this.tvPicList = []
-          this.workingStatus = option.workingStatus
-          if(option.workingStatus == 0){
-            // 在线
-            this.currentDevicePic = require('@/assets/images/camera-online.png')
-          }else{
-            // 离线
-            this.currentDevicePic = require('@/assets/images/camera-offline.png')
-          }
-          switch(type){
-            case 'dataCenter' :
-               if(option.cameras.length == 0){
-                // 离线
-                this.currentCenterStatus = false
-                this.currentDevicePic = require('@/assets/images/camera-offline.png')
-              }else{
-                // 在线
-                this.currentCenterStatus = true
-                this.currentDevicePic = require('@/assets/images/camera-online.png')
-              }
-              if(option.pictures.length != 0){
-                let newArr = []
-                option.pictures.forEach(e => {
-                  newArr.push(
-                    e
-                  )
-                })
-                this.tvPicList = newArr
-              }else{
-                this.tvPicList = option.pictures
-              }
+      initChart(){
+        let signalChart = echarts.init(document.getElementById("signal"));
+        let concentrationChart = echarts.init(document.getElementById("concentration"));
+        let voltageChart = echarts.init(document.getElementById("voltage"));
+        let temperatureChart = echarts.init(document.getElementById("temperature"));
+        signalChart.setOption(this.signalOption)
+        concentrationChart.setOption(this.concentrationOption)
+        voltageChart.setOption(this.voltageOption)
+        temperatureChart.setOption(this.temperatureOption)
+      },
+      // 当前选项卡发生变化（传感器 / 摄像头）
+      radioHasChanged(v){
+        if(v == '传感器'){
+          this.isSensorVisible = true
+        } else {
+          this.isSensorVisible = false
+        }
+      },
+      open(data){
+          console.log(data)
+          this.deviceInfoList = data
+          // this.currentCameraParam = data
+          this.tvWallInfoVisible = true
+      },
+      update(option,type){
+        this.currentType = type
+        this.deviceInfoList = []
+        this.workingStatus = option.workingStatus
+        if(option.workingStatus == 0){
+          // 在线
+          this.currentDevicePic = require('@/assets/images/camera-online.png')
+        }else{
+          // 离线
+          this.currentDevicePic = require('@/assets/images/camera-offline.png')
+        }
+        switch(type){
+          case 'dataCenter' :
+              if(option.cameras.length == 0){
+              // 离线
+              this.currentCenterStatus = false
+              this.currentDevicePic = require('@/assets/images/camera-offline.png')
+            }else{
+              // 在线
+              this.currentCenterStatus = true
+              this.currentDevicePic = require('@/assets/images/camera-online.png')
+            }
+            if(option.pictures.length != 0){
               let newArr = []
-              for(let key in option.detail){
-                newArr.push({
-                  key,
-                  value:option.detail[key]
-                })
-              }
-              this.deviceInfoList = newArr
-              break;
-            case 'animal' :
-              if(option.cameraList.length == 0){
-                // 离线
-                this.currentCenterStatus = false
-                this.currentDevicePic = require('@/assets/images/camera-offline.png')
-              }else{
-                // 在线
-                this.currentCenterStatus = true
-                this.currentDevicePic = require('@/assets/images/camera-online.png')
-              }
-              let animalArr = []
-              this.animalInfoKey.forEach(e => {
-                animalArr.push({
-                  key:e.value,
-                  value:option[e.key]
-                })
+              option.pictures.forEach(e => {
+                newArr.push(
+                  e
+                )
               })
-              this.deviceInfoList = animalArr
-              this.tvPicList.push(option.attachId)
-              break;
-            case 'tree' :
-              let treeArr = []
-              this.treeInfoKey.forEach(e => {
-                treeArr.push({
-                  key:e.value,
-                  value:option[e.key]
-                })
+            }
+            let newArr = []
+            for(let key in option.detail){
+              newArr.push({
+                key,
+                value:option.detail[key]
+              })
+            }
+            this.deviceInfoList = newArr
+            break;
+          case 'animal' :
+            if(option.cameraList.length == 0){
+              // 离线
+              this.currentCenterStatus = false
+              this.currentDevicePic = require('@/assets/images/camera-offline.png')
+            }else{
+              // 在线
+              this.currentCenterStatus = true
+              this.currentDevicePic = require('@/assets/images/camera-online.png')
+            }
+            let animalArr = []
+            this.animalInfoKey.forEach(e => {
+              animalArr.push({
+                key:e.value,
+                value:option[e.key]
               })
-              this.deviceInfoList = treeArr
-              this.tvPicList.push(option.attachId)
+            })
+            this.deviceInfoList = animalArr
             break;
-            case 'SHE' :
-              this.tvPicList = option.cameraImagesList
-              this.infoKey.forEach(e => {
+          case 'tree' :
+            let treeArr = []
+            this.treeInfoKey.forEach(e => {
+              treeArr.push({
+                key:e.value,
+                value:option[e.key]
+              })
+            })
+            this.deviceInfoList = treeArr
+          break;
+          case 'SHE' :
+            this.infoKey.forEach(e => {
+              this.deviceInfoList.push({
+                key:e.value,
+                value:option[e.key]
+              })
+            })
+            break;
+          case 'CHUAN' :
+            this.currentDevicePic = null
+            if(option.cameras.length == 0){
+              // 在线
+              this.currentCenterStatus = false
+              this.currentDevicePic = require('@/assets/images/camera-offline.png')
+            }else{
+              // 离线
+              this.currentCameraParam = {cameras:option.cameras,longitude:option.longitude,latitude:option.latitude}
+              this.currentCenterStatus = true
+              this.currentDevicePic = require('@/assets/images/camera-online.png')
+            }
+            let chuanArr = []
+            for(let key in option.deviceList){
+              chuanArr.push(
+                {
+                  key,
+                  value:option.deviceList[key]
+                }
+              )
+            }
+            for(let key in option.sensorDetectionList){
+              chuanArr.push(
+                {
+                  key,
+                  value:option.sensorDetectionList[key]
+                }
+              )
+            }
+            this.deviceInfoList = chuanArr
+            break;
+          case 'LA' :
+            this.laInfoKey.forEach(e => {
+              if(e.key == 'broadcastUse'){
                 this.deviceInfoList.push({
                   key:e.value,
-                  value:option[e.key]
+                  value:option[e.key] == '1' ? '应急云广播' : '2' ? '智能云广播' : null
                 })
-              })
-              break;
-            case 'CHUAN' :
-              this.currentDevicePic = null
-              if(option.cameras.length == 0){
-                // 在线
-                this.currentCenterStatus = false
-                this.currentDevicePic = require('@/assets/images/camera-offline.png')
               }else{
-                // 离线
-                this.currentCameraParam = {cameras:option.cameras,longitude:option.longitude,latitude:option.latitude}
-                this.currentCenterStatus = true
-                this.currentDevicePic = require('@/assets/images/camera-online.png')
-              }
-              this.tvPicList = option.deviceImagesList
-              let chuanArr = []
-              for(let key in option.deviceList){
-                chuanArr.push(
-                  {
-                    key,
-                    value:option.deviceList[key]
-                  }
-                )
-              }
-              for(let key in option.sensorDetectionList){
-                chuanArr.push(
-                  {
-                    key,
-                    value:option.sensorDetectionList[key]
-                  }
-                )
-              }
-              this.deviceInfoList = chuanArr
-              break;
-            case 'LA' :
-              this.tvPicList = option.broadcastImagesList
-              this.laInfoKey.forEach(e => {
-                if(e.key == 'broadcastUse'){
-                  this.deviceInfoList.push({
-                    key:e.value,
-                    value:option[e.key] == '1' ? '应急云广播' : '2' ? '智能云广播' : null
-                  })
-                }else{
-                  this.deviceInfoList.push({
-                    key:e.value,
-                    value:option[e.key]
-                  })
-                }
-              })
-              this.currentDevicePic = require('@/assets/images/cloudBroadcast.png')
-              break;
-            case 'Zhi' :
-              this.tvPicList = option.cameraImagesList
-              this.infoKey.forEach(e => {
                 this.deviceInfoList.push({
                   key:e.value,
                   value:option[e.key]
                 })
+              }
+            })
+            this.currentDevicePic = require('@/assets/images/cloudBroadcast.png')
+            break;
+          case 'Zhi' :
+            this.infoKey.forEach(e => {
+              this.deviceInfoList.push({
+                key:e.value,
+                value:option[e.key]
               })
-              break;
-          }
-
-           // 图片处理
-           if(this.tvPicList.length == 0){
-              // 暂无图片
-              this.isHavePicVisible = false
-              this.currentPickedPic = require('@/assets/images/noDevice.png')
-            }else{
-              this.isHavePicVisible = true
-              this.currentPickedPic = this.tvPicList[0]
-              console.log(this.currentPickedPic)
-            }
-            this.tvWallInfoVisible = true
-        },
-        toDo(){
-          switch(this.localMark){
-            case 'She' :
-              if(this.workingStatus != 0) return
-              this.$emit('toTvWall',this.currentCameraParam)
-              break;
-            case 'Chuan' :
-              this.$emit('toTvWall_cgq',this.currentCameraParam)
-              break;
-            case 'La' :
-              this.$emit('jump')
-              break;
-            case 'dataCenter' :
-              if(!this.currentCenterStatus) return
-              this.$emit('toTvWall')
-              break;
-            case 'animal' :
-              this.$emit('sewageOutletClick',this.currentCameraParam)
-              break;
-            case 'Zhi' :
-              if(this.workingStatus != 0) return
-              this.$emit('toTvWall',this.currentCameraParam)
-              break;
-          }
-        },
-        currentHighLight(idx,e){
-            if(this.currentHighLightPic == idx) return
-            this.currentHighLightPic = idx
-            this.currentPickedPic = e
-        },
+            })
+            break;
+        }
+          this.tvWallInfoVisible = true
+      },
+      toDo(){
+        switch(this.localMark){
+          case 'She' :
+            if(this.workingStatus != 0) return
+            this.$emit('toTvWall',this.currentCameraParam)
+            break;
+          case 'Chuan' :
+            this.$emit('toTvWall_cgq',this.currentCameraParam)
+            break;
+          case 'La' :
+            this.$emit('jump')
+            break;
+          case 'dataCenter' :
+            if(!this.currentCenterStatus) return
+            this.$emit('toTvWall')
+            break;
+          case 'animal' :
+            this.$emit('sewageOutletClick',this.currentCameraParam)
+            break;
+          case 'Zhi' :
+            if(this.workingStatus != 0) return
+            this.$emit('toTvWall',this.currentCameraParam)
+            break;
+        }
+      }
+    },
+    mounted(){
+      setTimeout(() => {
+        this.initChart()
+      })
     },
     watch:{
       localMark(newVal){
@@ -387,16 +541,50 @@ export default{
 
 <style rel="stylesheet/scss" lang="scss" scoped>
 @import '@/assets/styles/base.scss';
+::v-deep .el-radio-group{
+  width: 100%;
+  .el-radio-button{
+    width: 50%;
+    margin-top: 10%;
+    .el-radio-button__inner{
+      display: block;
+      background-color: #010518;
+    }
+    .el-radio-button__inner{
+      border-left:1px solid #2C3F73 !important;
+    }
+    // 选中样式
+    .el-radio-button__orig-radio:checked+.el-radio-button__inner{
+      background-color: #104A8F;
+      border-color: #104A8F;
+    }
+  }
+
+  .cameraBtn{
+    .el-radio-button__inner{
+      border-left: none !important;
+    }
+  }
+}
+.sensorInfo{
+  margin-top: 10%;
+  height: 40%;
+}
+.cameraInfo{
+  overflow: hidden scroll;
+  margin-top: 10%;
+  height: 73%;
+  >div{
+    display: flex;
+  }
+  >div:not(:nth-child(1)){
+    margin-top: 10%;
+  }
+}
 </style>
 
 <style lang="scss">
 
-.tvPicHighlight{
-    border: 6px solid #B8741A;
-  }
-.tvPicNotHighlight{
-    border: none;
-}
 .tvDialog{
   margin-top: 10vh !important;
   height: 75%;
@@ -409,12 +597,6 @@ export default{
   .el-dialog__header{
     height: 8% !important;
   }
-  .tvPicHighlight{
-    border: 6px solid #B8741A;
-  }
-  .tvPicNotHighlight{
-    border: none;
-  }
   .container{
     height: 100%;
     display: flex;
@@ -422,7 +604,7 @@ export default{
     background-size:100% 100% ;
     .leftContain{
       width: 24.2%;
-      border-right: 2px solid #153E42;
+      // border-right: 2px solid #153E42;
       .deviceInfo{
         height:71%;
         overflow-x: scroll;
@@ -447,58 +629,40 @@ export default{
       .deviceInfo::-webkit-scrollbar-thumb {
         background-color: #183974;
       }
-      .deviceIcon{
-        width: 30%;
-        margin: 7% 0 0 35%;
-        cursor: pointer;
-      }
     }
     .rightContain{
-      width: 64%;
-      height: 96%;
-      margin: 2% auto 0;
-      .bigPicContain{
+      width: 73%;
+      height: 100%;
+      margin: 0 auto 0;
+      .sernsorChart_contain{
         width: 100%;
-        height: 67%;
-        .bigPic{
+        height: 100%;
+        >div{
           width: 100%;
-          height: 100%;
-          object-fit: contain;
+          height: 20%;
         }
-        .noHavePic{
-          margin: 9% 0 0 35%;
+        >div{
+          margin-top: 4%;
         }
       }
-      .scrollBottomBar{
+      .camera_contain{
         display: flex;
+        flex-wrap: wrap;
+        align-content: flex-start;
         width: 100%;
-        overflow: hidden;
-        overflow-x: scroll;
-        height: 24%;
-        margin-top: 6%;
-        border: 1px solid #244BB7;
-        .bottomPic{
-          width: 90px;
-          height: 90px;
-          margin-top: 2%;
-          cursor: pointer;
+        height: 100%;
+        >div{
+          width: 20%;
+          height: 20%;
+          margin-top: 3%;
         }
-        .bottomPic:nth-child(1){
-          margin-left: 2%;
+        >div:nth-child(4n-3){
+          margin-left: 8%;
         }
-        .bottomPic:not(:nth-child(1)){
+        >div:not(:nth-child(4n-3)){
           margin-left: 3%;
         }
       }
-      .scrollBottomBar::-webkit-scrollbar{
-        display: block !important;
-        background-color: #101823;
-        // border: 1px solid #fff;
-        height: 10px !important;
-      }
-      .scrollBottomBar::-webkit-scrollbar-thumb {
-        background-color: #183974;
-      }
     }
   }
 }

src/components/companyProjectDialog/index.vue

@@ -177,6 +177,92 @@ export default{
       }
     }
 }
+.container{
+  height: 100%;
+  display: flex;
+  background: url('~@/assets/images/tvWallBg.png') 0 0 no-repeat;
+  background-size:100% 100% ;
+  .leftContain{
+    width: 24.2%;
+    border-right: 2px solid #153E42;
+    .deviceInfo{
+      height:71%;
+      overflow-x: scroll;
+      white-space: nowrap;
+      >div{
+        text-indent: 42px;
+        height: 10%;
+        font-size:15px;
+        color: #A4A4A4;
+        font-weight: 700;
+      }
+      >div:nth-child(1){
+        margin-top: 7%;
+      }
+    }
+    .deviceInfo::-webkit-scrollbar{
+      display: block !important;
+      background-color: #101823;
+      // border: 1px solid #fff;
+      height: 10px !important;
+    }
+    .deviceInfo::-webkit-scrollbar-thumb {
+      background-color: #183974;
+    }
+    .deviceIcon{
+      width: 30%;
+      margin: 7% 0 0 35%;
+      cursor: pointer;
+    }
+  }
+  .rightContain{
+    width: 64%;
+    height: 96%;
+    margin: 2% auto 0;
+    .bigPicContain{
+      width: 100%;
+      height: 67%;
+      .bigPic{
+        object-fit: contain;
+        width: 100%;
+        height: 100%;
+      }
+      .noHavePic{
+        margin: 9% 0 0 35%;
+      }
+    }
+    .scrollBottomBar{
+      display: flex;
+      width: 100%;
+      overflow: hidden;
+      overflow-x: scroll;
+      height: 24%;
+      margin-top: 6%;
+      border: 1px solid #244BB7;
+      .bottomPic{
+        width: 90px;
+        height: 90px;
+        margin-top: 2%;
+        cursor: pointer;
+      }
+      .bottomPic:nth-child(1){
+        margin-left: 2%;
+      }
+      .bottomPic:not(:nth-child(1)){
+        margin-left: 3%;
+      }
+    }
+    .scrollBottomBar::-webkit-scrollbar{
+      display: block !important;
+      background-color: #101823;
+      // border: 1px solid #fff;
+      height: 10px !important;
+    }
+    .scrollBottomBar::-webkit-scrollbar-thumb {
+      background-color: #183974;
+    }
+  }
+}
 </style>
 <style lang="scss">
 .tvPicHighlight{
@@ -204,92 +290,6 @@ export default{
   .tvPicNotHighlight{
     border: none;
   }
-  .container{
-    height: 100%;
-    display: flex;
-    background: url('~@/assets/images/tvWallBg.png') 0 0 no-repeat;
-    background-size:100% 100% ;
-    .leftContain{
-      width: 24.2%;
-      border-right: 2px solid #153E42;
-      .deviceInfo{
-        height:71%;
-        overflow-x: scroll;
-        white-space: nowrap;
-        >div{
-          text-indent: 42px;
-          height: 10%;
-          font-size:15px;
-          color: #A4A4A4;
-          font-weight: 700;
-        }
-        >div:nth-child(1){
-          margin-top: 7%;
-        }
-      }
-      .deviceInfo::-webkit-scrollbar{
-        display: block !important;
-        background-color: #101823;
-        // border: 1px solid #fff;
-        height: 10px !important;
-      }
-      .deviceInfo::-webkit-scrollbar-thumb {
-        background-color: #183974;
-      }
-      .deviceIcon{
-        width: 30%;
-        margin: 7% 0 0 35%;
-        cursor: pointer;
-      }
-    }
-    .rightContain{
-      width: 64%;
-      height: 96%;
-      margin: 2% auto 0;
-      .bigPicContain{
-        width: 100%;
-        height: 67%;
-        .bigPic{
-          object-fit: contain;
-          width: 100%;
-          height: 100%;
-        }
-        .noHavePic{
-          margin: 9% 0 0 35%;
-        }
-      }
-      .scrollBottomBar{
-        display: flex;
-        width: 100%;
-        overflow: hidden;
-        overflow-x: scroll;
-        height: 24%;
-        margin-top: 6%;
-        border: 1px solid #244BB7;
-        .bottomPic{
-          width: 90px;
-          height: 90px;
-          margin-top: 2%;
-          cursor: pointer;
-        }
-        .bottomPic:nth-child(1){
-          margin-left: 2%;
-        }
-        .bottomPic:not(:nth-child(1)){
-          margin-left: 3%;
-        }
-      }
-      .scrollBottomBar::-webkit-scrollbar{
-        display: block !important;
-        background-color: #101823;
-        // border: 1px solid #fff;
-        height: 10px !important;
-      }
-      .scrollBottomBar::-webkit-scrollbar-thumb {
-        background-color: #183974;
-      }
-    }
-  }
 }.leader-info-container{
    .el-descriptions-item__label{
      width: 77px !important;

src/views/forest.vue

@@ -391,6 +391,16 @@
       this.ws = DHWsInstance;
     },
     mounted() {
+      this.$refs.deviceDialog.open([
+        {
+          key:'名称',
+          value:'测试名称'
+        },
+        {
+          key:'地址',
+          value:'测试地址'
+        },
+      ])
       console.log('图层对象',window.webglExampleConfig)
       console.log('媒体对象',navigator)
       // 初始化地图数据