/

src/views/dashboard/index.vue

@@ -5,68 +5,33 @@
       <div class="left-map">
         <div style="width: 3px;height: 16px;background-color: #2250C8;position: absolute;left: 15px;top: 14px;"></div>
         <span style="font-size: 16px;font-weight: 500;position: absolute;left: 22px;top: 12px;">线路实况</span>
-        <div class="cameraBtn" >
-          <!-- <el-select></el-select> -->
-          <el-select></el-select>
-          <!-- <img src="/map/camera.png" :style="cameraShow?{opacity:0.6}:{opacity:1}" width="32" height="32" alt="" @click="showCamera"> -->
+        <div class="cameraBtn">
+          <!-- <el-select></el-select>
+          <el-select></el-select> -->
+          <!-- <el-input size="small" v-model="searchInfo.camera" placeholder="输入摄像机编号"     clearable></el-input> -->
+          <el-input size="small" v-model="searchInfo.vehicle" placeholder="输入机车编号"     clearable></el-input>
+          <el-button @click="highlighPanel" size="small" type="primary">
+            <i class="el-icon-search"></i>
+          </el-button>
+          <!-- <img src="/map/camera.png" :style="cameraShow ? { opacity: 0.6 } : { opacity: 1 }" width="32" height="32" alt=""
+            @click="showCamera"> -->
         </div>
-        <iframe ref="mapRef" style="width: 100%;height: 100%;" src="SH-demo.html" frameborder="0"></iframe>
+        <iframe ref="mapRef" style="width: 100%;height: 100%;" src="/SH-demo(1).html" frameborder="0"></iframe>
       </div>
       <div class="right-msg">
         <div class="msgStatistics">
           <div style="width: 3px;height: 16px;background-color: #2250C8;position: absolute;left: 15px;top: 14px;"></div>
-          <span style="font-size: 16px;font-weight: 500;position: absolute;left: 22px;top: 12px;">设备状态</span>
-          <div class="left">
-            <img src="../../assets/编组201.png" style="position: absolute;right: 25px;top: 29px;">
-            <span style="color:#333333;font-size:12px;position: absolute;top: 18px;left: 77px;">在线</span>
-            <span style="color:#333333;font-size:12px;position: absolute;bottom: 18px;left: 77px;">离线</span>
-            <span
-              style="color:#333333;font-size:12px;position: absolute;bottom: 10px;right: 16px;font-weight: 600;">接入摄像机</span>
-            <!-- <span style="color: #00974D;line-height: 22px;font-size: 16px;font-weight: 600;text-shadow: 0px 2px 2px rgba(161,158,158,0.5);position: absolute;left: 33px;top: 13px;">{{ msgStatisticsData.online||0 }}{{ '台' }}</span>
-              <span style="color: #FF0000;line-height: 22px;font-size: 16px;font-weight: 600;text-shadow: 0px 2px 2px rgba(161,158,158,0.5);position: absolute;left: 33px;bottom: 13px;">{{ msgStatisticsData.offline ||0}}{{ '台' }}</span>
-              <span style="color: #2250C8;line-height: 22px;font-size: 16px;font-weight: 600;text-shadow: 0px 2px 2px rgba(161,158,158,0.5);position: absolute;right: 42px;top: 13px;">{{ msgStatisticsData.countAllCamera||0}}{{ '台' }}</span> -->
-            <div class="onlineNum" style="width: 40%;height: 50%;text-align: center;">
-              <span
-                style="color: #00974D;line-height: 55px;font-size: 16px;font-weight: 600;text-shadow: 0px 2px 2px rgba(161,158,158,0.5);cursor: pointer;"
-                @click="toCameraMonitoring('2')">{{ msgStatisticsData.online || 0 }}{{ '台' }}</span>
-            </div>
-            <div class="offlineNum" style="width: 40%;height: 50%;text-align: center;">
-              <span
-                style="color: #FF0000;line-height: 55px;font-size: 16px;font-weight: 600;text-shadow: 0px 2px 2px rgba(161,158,158,0.5);cursor: pointer;"
-                @click="toCameraMonitoring('1')">{{ msgStatisticsData.offline || 0 }}{{ '台' }}</span>
-            </div>
-            <div class="cameraNum" style="position: absolute;right: 5px;top:0;width: 40%;height: 50%;text-align: center;">
-              <span
-                style="color: #2250C8;line-height: 55px;font-size: 16px;font-weight: 600;text-shadow: 0px 2px 2px rgba(161,158,158,0.5);">{{
-                  msgStatisticsData.countAllCamera || 0 }}{{ '台' }}</span>
-            </div>
-          </div>
-          <div class="right">
-            <img src="../../assets/编组202.png" style="position: absolute;left: 25px;top: 29px;">
-            <span style="color:#333333;font-size:12px;position: absolute;top: 18px;right: 77px;">在线</span>
-            <span style="color:#333333;font-size:12px;position: absolute;bottom: 18px;right: 77px;">离线</span>
-            <span
-              style="color:#333333;font-size:12px;position: absolute;bottom: 10px;left: 24px;font-weight: 600;">车载终端</span>
-            <!-- <span style="color: #00974D;line-height: 22px;font-size: 16px;font-weight: 600;text-shadow: 0px 2px 2px rgba(161,158,158,0.5);position: absolute;right: 33px;top: 13px;">{{ msgStatisticsData.OFFLINETERMINAL ||0}}{{ '台' }}</span>
-              <span style="color: #FF0000;line-height: 22px;font-size: 16px;font-weight: 600;text-shadow: 0px 2px 2px rgba(161,158,158,0.5);position: absolute;right: 33px;bottom: 13px;">{{ msgStatisticsData.ONLINETERMINAL ||0}}{{ '台' }}</span>
-              <span style="color: #2250C8;line-height: 22px;font-size: 16px;font-weight: 600;text-shadow: 0px 2px 2px rgba(161,158,158,0.5);position: absolute;left: 37px;top: 13px;">{{ msgStatisticsData.COUNTALLTERMINAL ||0}}{{ '台' }}</span> -->
-            <div class="terminalNum"
-              style="position: absolute;left: 5px;top:0;width: 40%;height: 50%;text-align: center;">
-              <span
-                style="color: #2250C8;line-height: 55px;font-size: 16px;font-weight: 600;text-shadow: 0px 2px 2px rgba(161,158,158,0.5);">{{
-                  msgStatisticsData.COUNTALLTERMINAL || 0 }}{{ '台' }}</span>
-            </div>
-            <div class="onlineNum" style="width: 40%;height: 50%;text-align: center;float: right;">
-              <span
-                style="color: #00974D;line-height: 55px;font-size: 16px;font-weight: 600;text-shadow: 0px 2px 2px rgba(161,158,158,0.5);cursor: pointer;"
-                @click="toVehicleMonitoring('1')">{{ msgStatisticsData.OFFLINETERMINAL || 0 }}{{ '台' }}</span>
-            </div>
-            <div class="offlineNum"
-              style="width: 40%;height: 50%;text-align: center;position: absolute;right: 0;bottom: 0;">
-              <span
-                style="color: #FF0000;line-height: 55px;font-size: 16px;font-weight: 600;text-shadow: 0px 2px 2px rgba(161,158,158,0.5);cursor: pointer;"
-                @click="toVehicleMonitoring('2')">{{ msgStatisticsData.ONLINETERMINAL || 0 }}{{ '台' }}</span>
-            </div>
+          <span style="font-size: 16px;font-weight: 500;position: absolute;left: 22px;top: 12px;">信息统计</span>
+          <div class="tjMsg">
+            <img src="../../assets/矩形_28@2x.png">
+            <span class="total">车载终端总数</span>
+            <div class="blueDrop"></div>
+            <span class="onlineText">在线</span>
+            <div class="redDrop"></div>
+            <span class="offlineText">离线</span>
+            <span class="zs">{{ this.msgStatisticsData.COUNTALLTERMINAL }}</span>
+            <span class="onlineTotal">{{ this.msgStatisticsData.OFFLINETERMINAL }}</span>
+            <span class="offlineTotal">{{ this.msgStatisticsData.ONLINETERMINAL }}</span>
           </div>
         </div>
         <div class="systemMsg">
@@ -102,7 +67,7 @@
                 style="font-size: 14px;font-weight: 400;color: #484646;line-height: 22px;position: absolute;left: 60px;top: 20px;">离线</span>
             </div>
           </div>
-          <div class="msgItem" v-for="item in sysMsg.monitorSystemList.slice(0,3)">
+          <div class="msgItem" v-for="item in sysMsg.monitorSystemList.slice(0, 3)">
             <div class="blueDrop"></div>
             <div style="width: 100%;height: 10px;"></div>
             <div class="sysName">{{ item.monitorSystemName }}</div>
@@ -224,6 +189,20 @@
         </div>
       </div>
     </div>
+    <el-dialog width="65%" :visible="dialogInfo.show" @close="dialogInfo.show = false, dialogInfo.data = {}">
+      <template #title>
+        <div :style="`opacity: ${Object.keys(dialogInfo.data).length === 0 ? '1' : '0'};`">视频加载中...</div>
+      </template>
+      <div class="video" v-loading="Object.keys(dialogInfo.data).length === 0">
+        <div v-for="item in dialogInfo.data.data" :key="item">
+          <div>
+            <VideoLine :showElectric="false" :items="false" :camera-code="item.cameraCode ? item.cameraCode : ''">
+            </VideoLine>
+            <Video :src="item.url"></Video>
+          </div>
+        </div>
+      </div>
+    </el-dialog>
   </div>
 </template>
 <script>
@@ -257,8 +236,9 @@ import {
   baseVehicleVehicleTree,
   baseVehicleVehicleCurrentStream,
 } from "@/api/alarmList";
-import { statisticsNum, getVehicleList, getCameraList } from "@/api/home";
-import Video from "./Video";
+import { statisticsNum, getVehicleList, getCameraList, getVehicleVideo } from "@/api/home";
+import Video from "./Video.vue";
+import VideoLine from "@/components/videoPlayer/videoLine";
 export default {
   name: "Cart",
   computed: {},
@@ -297,7 +277,15 @@ export default {
       errorMsgList: [],
       data: [],
       timer: null,
-      cameraShow:false
+      cameraShow: false,
+      dialogInfo: {
+        show: false,
+        data: {}
+      },
+      searchInfo: {
+        camera: '',
+        vehicle: ''
+      }
     };
   },
   mounted() {
@@ -336,6 +324,27 @@ export default {
     }
     getMapData()
     this.timer = setInterval(getMapData, 10000);
+    window.onmessage = (e) => {
+      const { data: { data, name } } = e
+      if(!name) return
+      this.$set(this.dialogInfo, 'show', true)
+      getVehicleVideo(data).then(res => {
+        if (res.data?.length > 0) {
+          this.dialogInfo = {
+            show: true,
+            data: {
+              name,
+              data: res.data
+            }
+          }
+        }
+
+        else this.$message({
+          message: "无监控视频",
+          type: 'warning'
+        })
+      })
+    }
   },
   beforeDestroy() {
     clearInterval(this.timer)
@@ -373,9 +382,10 @@ export default {
   components: {
     warningDispose,
     Video,
+    VideoLine
   },
   methods: {
-    showCamera(){
+    showCamera() {
       this.$refs.mapRef.contentWindow.postMessage(this.cameraShow, "*");
       this.cameraShow = !this.cameraShow
     },
@@ -506,7 +516,6 @@ export default {
         this.videoCode = "";
         return;
       }
-      console.log(item);
       const nodes =
         this.getParentNodesByCode(
           this.butType === 1 ? this.data : this.VehicleTree,
@@ -726,6 +735,12 @@ export default {
           this.sysMsg = res.data
         }
       })
+    },
+    highlighPanel() {
+      this.$refs.mapRef.contentWindow.postMessage({
+        type: 3,
+        data: this.searchInfo
+      }, "*");
     }
   },
 };
@@ -752,7 +767,7 @@ export default {
       margin-right: 10px;
       padding: 60px 20px 12px 13px;
       background-color: #fff;
-      background: url('../../assets/地图图片.png'); 
+      //background: url('../../assets/地图图片.png'); 
     }
 
     .right-msg {
@@ -769,28 +784,102 @@ export default {
         background-color: #fff;
         box-shadow: 0px 0px 4px 0px #E4E4E4;
         border-radius: 2px;
-
-        .left {
-          position: relative;
-          background: url('../../assets/编组24.png') no-repeat 50% 50%;
+        .tjMsg{
+          width: 501px;
+          height: 180px;
+          background: url('../../assets/messageTjbgc.png') no-repeat 50% 50%;
           background-size: 100% 100%;
-          width: 205px;
-          height: 103px;
-          float: left;
-          margin-top: 47px;
-          margin-left: 20px;
-        }
-
-        .right {
           position: relative;
-          background: url('../../assets/编组25.png') no-repeat 50% 50%;
-          background-size: 100% 100%;
-          width: 205px;
-          height: 103px;
-          float: right;
-          margin-top: 47px;
-          margin-right: 20px;
+          left: -25px;
+          top: 8px;
+          img{
+            width: 1px;
+            height: 46px;
+            position: relative;
+            left: 245px;
+            top: 60px;
+          }
+          .total{
+            font-family: PingFangSC, PingFang SC;
+            font-weight: 600;
+            font-size: 12px;
+            color: #484646;
+            line-height: 22px;
+            font-style: normal;
+            position: relative;
+            left: 140px;
+            top: 30px;
+          }
+          .blueDrop{
+            width: 6px;
+            height: 6px;
+            border-radius: 6px;
+            background-color: #2250C8;
+            position: relative;
+            left: 265px;
+            top: 17px;
+          }
+          .redDrop{
+            width: 6px;
+            height: 6px;
+            border-radius: 6px;
+            background-color: #FF0000;
+            position: relative;
+            left: 350px;
+            top: -10px;
+          }
+          .onlineText{
+            font-family: PingFangSC, PingFang SC;
+            font-weight: 400;
+            font-size: 14px;
+            color: #696969;
+            line-height: 22px;
+            font-style: normal;
+            position: relative;
+            left: 275px;
+            top: 2px;
+          }
+          .offlineText{
+            font-family: PingFangSC, PingFang SC;
+            font-weight: 400;
+            font-size: 14px;
+            color: #696969;
+            line-height: 22px;
+            font-style: normal;
+            position: relative;
+            left: 360px;
+            top: -25px;
+          }
+          .zs{
+            font-family: PingFangSC, PingFang SC;
+            font-weight: 600;
+            font-size: 20px;
+            color: #2250C8;
+            line-height: 22px;
+            font-style: normal;
+            position: relative;
+            left: 135px;
+          }
+          .onlineTotal{
+            font-family: PingFangSC, PingFang SC;
+            font-weight: 600;
+            font-size: 20px;
+            color: #00974D;
+            font-style: normal;
+            position: relative;
+            left: 235px;
+          }
+          .offlineTotal{
+            font-family: PingFangSC, PingFang SC;
+            font-weight: 600;
+            font-size: 20px;
+            color: #ff0000;
+            font-style: normal;
+            position: relative;
+            left: 310px;
+          }
         }
+       
       }
 
       .systemMsg {
@@ -1023,6 +1112,10 @@ export default {
   padding: 20px 95px !important;
 }
 
+::v-deep .el-button--primary i {
+  top: 0 !important;
+}
+
 .dialog-footer {
   div {
     display: inline-block;
@@ -1058,7 +1151,8 @@ export default {
     border: 1px solid #1f9fff;
   }
 }
-.cameraBtn{
+
+.cameraBtn {
   cursor: pointer;
   top: 12px;
   right: 21px;
@@ -1068,6 +1162,40 @@ export default {
   gap: 12px;
 }
 
+.video {
+  display: grid;
+  gap: 12px;
+  grid-template-columns: repeat(auto-fill, calc(50% - 6px));
+  min-height: 300px;
+  max-height: 85vh;
+  overflow: auto;
+
+  >div {
+    width: 100%;
+    padding-bottom: 56.5%;
+    position: relative;
+    // overflow: hidden;
+
+    >div {
+      position: absolute;
+      width: 100%;
+      height: 100%;
+      top: 0;
+      left: 0;
+    }
+  }
+
+  // height: 60vh;
+}
+
+::v-deep .el-dialog {
+  margin-top: 8vh !important;
+
+  .el-dialog__body {
+    padding: 6px !important;
+  }
+}
+
 // 选中后radio文本的颜色
 ::v-deep .el-radio__input.is-checked+.el-radio__label {
   color: #2766dd;