引入海康威视插件

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>