引入海康威视插件

web/src/components/monitor/device.vue

@@ -49,15 +49,16 @@
     <a-modal
       v-model:open="modalOpen"
       @ok="handleOk"
-      width="90%"
+      width="60%"
       class="modal-device"
       :get-container="() => $refs.device"
     >
-      <div v-if="modalComponent == 1">
-        <div>
+      <div v-if="modalComponent == 1" class="modal-content">
+        <div class="item">
           <div class="title">
-            <div>电流电压</div>
-            <img src="@/assets/images/titleLine.png" alt="" />
+            电流电压
+            <!-- <div>电流电压</div>
+            <img src="@/assets/images/titleLine.png" alt="" /> -->
           </div>
           <div class="echarts">
             <predictEcharts
@@ -67,11 +68,8 @@
             />
           </div>
         </div>
-        <div>
-          <div class="title">
-            <div>功率</div>
-            <img src="@/assets/images/titleLine.png" alt="" />
-          </div>
+        <div class="item">
+          <div class="title">功率</div>
           <div class="echarts">
             <predictEcharts
               :chart-options="chartOptions[1]"
@@ -246,6 +244,8 @@ export default {
   },
   mounted() {
     this.getDeviceList()
+    
+    
   },
   methods: {
     handlePagesizeChange(pageOption) {
@@ -286,8 +286,16 @@ export default {
         })
         this.chartData.ydata = res.data
         this.chartData.xdata = this.generateTimePoints()
-        this.$refs.chartRef1.initCharts()
-        this.$refs.chartRef2.initCharts()
+        this.$nextTick(() => {
+          if (this.$refs.chartRef1) {
+            this.$refs.chartRef1.initCharts()
+          }
+          if (this.$refs.chartRef2) {
+            this.$refs.chartRef2.initCharts()
+          }
+        })
+        // this.$refs.chartRef1.initCharts()
+        // this.$refs.chartRef2.initCharts()
       } catch (error) {
         console.log(error)
       }
@@ -327,13 +335,12 @@ export default {
     async openModal(item, val) {
       console.log(item, '=============')
       this.modalComponent = val
+      this.modalOpen = true
       if (val == 1) {
         await this.getDevicCharts(item)
       } else {
         await this.getDeviceBCUDetail(item)
       }
-
-      this.modalOpen = true
     },
     handleOk() {
       this.modalOpen = false
@@ -347,17 +354,19 @@ export default {
   width: 100%;
   height: 100%;
   margin-left: 20px;
-  display: grid;
+  display: flex;
+  flex-wrap: wrap;
   grid-gap: 20px;
   overflow-y: auto;
-  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
+  align-content: flex-start;
+  // grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
   .device-item {
     border-radius: 15px;
     background: $bg2-color;
     padding: 15px;
     min-width: 340px;
     max-width: 430px;
-    max-height: 230px;
+    height: 260px;
     flex: 1;
     .item-header {
       display: flex;
@@ -460,6 +469,25 @@ export default {
 .environment {
   width: 200px;
 }
+.modal-device {
+  color: #fff;
+  .modal-content {
+    height: 700px;
+    .item {
+      // height: 300px;
+      .title {
+        color: #fff;
+        width: 230px;
+        border-bottom: 5px solid transparent;
+        border-image: url('@/assets/boxBottom.png') 0 0 100% 0 stretch;
+      }
+
+      .echarts {
+        height: 300px;
+      }
+    }
+  }
+}
 
 :deep(.ant-modal-body) {
   :deep(.ant-table-wrapper .ant-table-row-expand-icon) {
@@ -471,7 +499,19 @@ export default {
     background-color: #f0f8ff !important;
   }
 }
-//   .a-modal :deep(.ant-table-thead > tr > th) {
-//   background-color: #f0f8ff !important;
-// }
+:deep(.ant-table-cell) {
+  &::before {
+    width: 0 !important;
+  }
+}
+:deep(.ant-table-thead > tr > td) {
+  border-bottom: none !important;
+  border-top: none !important;
+}
+:deep(.ant-table-wrapper .ant-table-tbody > tr > td) {
+  border-top: none !important;
+}
+:deep(.ant-table-wrapper .ant-table-thead > tr > th) {
+  border-bottom: none !important;
+}
 </style>

web/src/components/monitor/haikang.vue

@@ -0,0 +1,167 @@
+<template>
+<div class="title" >
+        <span>{{ item.name }}</span>
+        <img
+          src="@/assets/images/fillScreen.png"
+          alt=""
+          width="23px"
+          style="margin-left: 10px; cursor: pointer"
+        />
+      </div>
+    <div :id="'divPlugin_' + index" class="plugin"></div> 
+    <!-- <a-button @click="clickLogin">开始登录</a-button>
+    <a-button @click="clickStartRealPlay">开始预览</a-button> -->
+
+</template>
+<script>
+export default {
+  props:{
+    index: {
+      type: Number,
+      default: 0
+    },
+    item: {
+      type: Object,
+      default: () => {}
+    }
+  },
+  data() {
+    return {
+      g_iWndIndex: 0,
+      szDeviceIdentify: '',
+      deviceport: '',
+      channels: [],
+      ip: '',
+      port: '',
+      username: '',
+      password: '',
+      iRtspPort: ''
+    }
+  },
+  mounted() {
+    // this.init()
+  },
+  methods: {
+    // 初始化
+    init() {
+      let that = this;
+
+      // 初始化插件参数及插入插件
+      this.$nextTick(() => {
+        window.WebVideoCtrl.I_InitPlugin('100%', '100%', {
+          bWndFull: true, // 但窗口双击全屏
+          iPackageType: 2, // 封装格式 无插件只能是2
+          iWndowType: 1, // 分屏类型 1*1 2*2 ....
+          bNoPlugin: true, // 开启无插件模式
+          cbInitPluginComplete: function () {
+            console.log("初始化成功！");
+            window.WebVideoCtrl.I_InsertOBJECTPlugin('divPlugin_' + that.index);
+          }
+        });
+      })
+      
+    },
+    // 登录
+    clickLogin() {
+      if (!this.ip || !this.port) {
+        return
+      }
+      this.szDeviceIdentify = this.ip+"_"+this.port
+      WebVideoCtrl.I_Login(this.ip, 1, this.port, this.username, this.password,                 
+        {
+          success: function(xmlDoc) {
+            this.getChannelInfo() // 获取模拟通道
+            this.getDevicePort() // 获取端口 （影响不大）
+          }   
+        })
+    },
+    // 获取模拟媒体通道
+    getChannelInfo() {
+      let self = this
+      if (!this.szDeviceIdentify) {
+        return
+      }
+      WebVideoCtrl.I_GetAnalogChannelInfo(self.szDeviceIdentify, {
+        async: false,
+        success: function (xmlDoc) {
+          let oChannels = $(xmlDoc).find("VideoInputChannel");
+          console.log('获取模拟通道成功', oChannels)
+          $.each(oChannels, function (i) {
+            let id = $(this).find("id").eq(0).text(),
+              name = $(this).find("name").eq(0).text();
+            if (!name) {
+              name = "Camera " + (i < 9 ? "0" + (i + 1) : (i + 1));
+            }
+            self.channels.push({
+              id: id,
+              name: name
+            })
+          });
+        },
+        error: function (status, xmlDoc) {
+          console.log('获取模拟通道失败', status, xmlDoc)
+        }
+      });
+    },
+    // 获取端口 不会对预览效果造成影响
+    getDevicePort() {
+      if (!this.szDeviceIdentify) {
+        return
+      }
+      let oPort = WebVideoCtrl.I_GetDevicePort(this.szDeviceIdentify);
+      console.log('获取通道端口号', oPort)
+      if (oPort != null) {
+        this.deviceport = oPort.iDevicePort;
+        this.iRtspPort= oPort.iRtspPort;
+      }
+    },
+    // 开始预览
+    clickStartRealPlay() {
+      let self = this
+      let oWndInfo = WebVideoCtrl.I_GetWindowStatus(self.g_iWndIndex),
+        iChannelID = self.channels[0].id
+      if (!this.szDeviceIdentify) {
+        return;
+      }
+      let startRealPlay = function () {
+        WebVideoCtrl.I_StartRealPlay(self.szDeviceIdentify, {
+          iRtspPort: parseInt(self.deviceport, 10), // RTSP端口必须是int
+          iStreamType: 1, // 码流类型：1-主码流 必须int
+          iChannelID: parseInt(iChannelID, 10), // 播放通道 必须int
+          bZeroChannel: false, // 是否播放零通道 默认false
+          success: function () {
+            console.log("预览成功")
+          },
+          error: function (status, xmlDoc) {
+            console.log("预览失败", status, xmlDoc)
+          }
+        });
+      };
+      if (oWndInfo != null) {// 已经在播放了，先停止
+        WebVideoCtrl.I_Stop({
+          success: function () {
+            startRealPlay();
+          }
+        });
+      } else {
+        startRealPlay();
+      }
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.plugin{
+  width:100%;
+  height:calc(100% - 40px)
+}
+.title {
+      display: flex;
+      align-items: center;
+      font-size: 24px;
+      font-weight: 700;
+      margin-bottom: 10px;
+      color: #fff;
+      height: 30px;
+    }
+</style>

web/src/components/monitor/videos.vue

@@ -1,24 +1,14 @@
 <template>
-  <div class="videos">
-    <div class="video-item" v-for="item in videoList" :key="item">
-      <div class="title">
-        <span>{{ item.name }}</span>
-        <img
-          src="@/assets/images/fillScreen.png"
-          alt=""
-          width="23px"
-          style="margin-left: 10px; cursor: pointer"
-        />
-      </div>
-      <div class="video">
-        <video
-          src="https://media.w3.org/2010/05/sintel/trailer_hd.mp4"
-          controls="controls"
-          width="100%"
-          height="100%"
-        ></video>
-      </div>
+  <div class="videosPage" id="videosPage">
+    <div
+      class="content"
+      :class="videosPageWidth < 900 ? 'con-w2' : 'con-w1'"
+      v-for="(item, index) in videoList"
+      :key="item"
+    >
+      <haikang :index="index" :item="item" class="video"></haikang>
     </div>
+    
   </div>
   <div class="environment">
     <div class="tab-header">
@@ -35,8 +25,7 @@
         :columns="columns[activeTab]"
         :table-data="tableDatas[activeTab]"
         ref="comTable"
-        :table-option="{page:false}"
-
+        :table-option="{ page: false }"
       >
       </ComTable>
     </div>
@@ -45,9 +34,10 @@
 
 <script>
 import { postReq, getReq } from '@/request/api'
+import haikang from './haikang.vue'
 export default {
   name: '',
-  components: {},
+  components: { haikang },
   props: {
     stationId: {
       type: String,
@@ -154,11 +144,26 @@ export default {
         select: false,
         page: false
       },
-      videoList: []
+      //
+      videoList: [],
+      g_iWndIndex: 0,
+      szDeviceIdentify: '',
+      deviceport: '',
+      channels: [],
+      ip: '',
+      port: '',
+      username: '',
+      password: '',
+      iRtspPort: '',
+      videosPageWidth: ''
     }
   },
   mounted() {
-    console.log(this.systemType)
+    this.$nextTick(() => {
+      const div = document.getElementById('videosPage')
+      const width = div.offsetWidth
+      this.videosPageWidth = width
+    })
 
     this.getEnvironment()
     this.getDeviceList()
@@ -168,9 +173,8 @@ export default {
       try {
         const res = await getReq('/queryEnvironment', { station_id: this.stationId })
         this.tableDatas = res.data
-        
       } catch (error) {
-        this.tableDatas={}
+        this.tableDatas = {}
         console.log(error)
       }
     },
@@ -183,6 +187,7 @@ export default {
         })
 
         this.videoList = res.data.concat(res.data)
+        this.videoList = this.videoList.concat(this.videoList)
       } catch (error) {
         this.videoList = []
 
@@ -194,30 +199,27 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.videos {
+.videosPage {
   width: calc(100% - 470px);
   height: 100%;
   margin-left: 20px;
-  display: grid;
+  display: flex;
+  flex-wrap: wrap;
   grid-gap: 20px;
   overflow-y: auto;
-  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
-  .video-item {
+  align-content: flex-start;
+  justify-content: flex-start;
+  .content {
     border-radius: 15px;
     background: $bg2-color;
     padding: 15px;
-    max-height: 290px;
-    max-width: 400px;
-    .title {
-      display: flex;
-      align-items: center;
-      font-size: 24px;
-      font-weight: 700;
-      color: #fff;
-    }
-    .video {
-      margin-top: 10px;
-    }
+    height: 280px;
+  }
+  .con-w1 {
+    width: calc((100% - 40px) / 3);
+  }
+  .con-w2 {
+    width: calc((100% - 20px) / 2);
   }
 }
 .environment {