对接数据接口

src/views/components/carouselChart.vue

@@ -6,8 +6,12 @@
       :options="swiperOptionTop"
       ref="swiperTop"
     >
-      <swiper-slide class="slide-1" v-for="item in bigImg" :key="item.id">
+      <swiper-slide
-        <img :src="item.url" style="width: 100%; height: 100%" alt="" />
+        class="slide-1"
+        v-for="item in terminalPhoto"
+        :key="item.id"
+      >
+        <img :src="item.path" style="width: 100%; height: 100%" alt="" />
       </swiper-slide>
       <div
         class="swiper-button-next swiper-button-white"
@@ -27,11 +31,11 @@
       <swiper-slide
         class="slide"
         style="width: 30%; height: 100%"
-        v-for="(item, index) in bigImg"
+        v-for="(item, index) in terminalPhoto"
         :key="item.id"
       >
-        <img style="width: 100%; height: 100%" :src="item.url" alt="" />
+        <img style="width: 100%; height: 100%" :src="item.path" alt="" />
-        <p class="timeInfo">{{ 7 + index }}:00:12</p>
+        <p class="timeInfo">{{ item.photoTime }}</p>
       </swiper-slide>
       <div
         class="swiper-button-next swiper-button-white"
@@ -47,6 +51,12 @@
 
 <script>
 export default {
+  props: {
+    terminalPhoto: {
+      type: Array,
+      default: () => [],
+    },
+  },
   mounted() {
     // 实现swiper双向控制
     this.$nextTick(() => {
@@ -59,32 +69,32 @@ export default {
   data() {
     return {
       //轮播大图配置
-      bigImg: [
+      // bigImg: [
-        {
+      //   {
-          url: "http://180.166.218.222:8104/media/local/XYIGQ10C221000080/210509/XYIGQ10C221000080_21050918190300_1_255.jpg",
+      //     url: "http://180.166.218.222:8104/media/local/XYIGQ10C221000080/210509/XYIGQ10C221000080_21050918190300_1_255.jpg",
-          id: 0,
+      //     id: 0,
-        },
+      //   },
-        {
+      //   {
-          url: "http://180.166.218.222:8104/media/local/XYIGQ10C221000080/202303/XYIGQ10C221000080_20230323100012_1_255_res.jpg",
+      //     url: "http://180.166.218.222:8104/media/local/XYIGQ10C221000080/202303/XYIGQ10C221000080_20230323100012_1_255_res.jpg",
-          id: 1,
+      //     id: 1,
-        },
+      //   },
-        {
+      //   {
-          url: "http://180.166.218.222:8104/media/local/XYIGQ10C221000080/202303/XYIGQ10C221000080_20230323090012_1_255_res.jpg",
+      //     url: "http://180.166.218.222:8104/media/local/XYIGQ10C221000080/202303/XYIGQ10C221000080_20230323090012_1_255_res.jpg",
-          id: 2,
+      //     id: 2,
-        },
+      //   },
-        {
+      //   {
-          url: "http://180.166.218.222:8104/media/local/XYIGQ10C221000080/202303/XYIGQ10C221000080_20230323080011_1_255_res.jpg",
+      //     url: "http://180.166.218.222:8104/media/local/XYIGQ10C221000080/202303/XYIGQ10C221000080_20230323080011_1_255_res.jpg",
-          id: 3,
+      //     id: 3,
-        },
+      //   },
-        {
+      //   {
-          url: "http://180.166.218.222:8104/media/local/XYIGQ10C221000080/202303/XYIGQ10C221000080_20230323070012_1_255_res.jpg",
+      //     url: "http://180.166.218.222:8104/media/local/XYIGQ10C221000080/202303/XYIGQ10C221000080_20230323070012_1_255_res.jpg",
-          id: 4,
+      //     id: 4,
-        },
+      //   },
-        {
+      //   {
-          url: "http://180.166.218.222:8104/media/local/XYIGQ10C221000080/202303/XYIGQ10C221000080_20230323060012_1_255_res.jpg",
+      //     url: "http://180.166.218.222:8104/media/local/XYIGQ10C221000080/202303/XYIGQ10C221000080_20230323060012_1_255_res.jpg",
-          id: 5,
+      //     id: 5,
-        },
+      //   },
-      ],
+      // ],
       swiperOptionTop: {
         zoom: true,
         loop: true,
@@ -120,7 +130,7 @@ export default {
   methods: {},
 };
 </script>
-<style lang="less" scoped>
+<style lang="less">
 .thumb-example {
   width: 100%;
   display: flex;
@@ -135,8 +145,9 @@ export default {
     height: 20% !important;
     box-sizing: border-box;
     padding: 10px 0px;
-    width: auto;
+    width: 100%;
     margin-left: 2px;
+    background-color: #f0f0f8;
     .swiper-button-next {
       right: 0px;
     }
@@ -153,19 +164,18 @@ export default {
       text-align: center;
     }
   }
-}
+  .swiper-slide {
-
-.swiper-slide {
     background-size: cover;
     background-position: center;
-}
+  }
 
-.gallery-thumbs .swiper-slide {
+  .gallery-thumbs .swiper-slide {
     // width: 20%;
     // height: 80px;
     // opacity: 0.4;
-}
+  }
-.gallery-thumbs .swiper-slide-active {
+  .gallery-thumbs .swiper-slide-active {
     border: 3px solid @color-primary;
+  }
 }
 </style>

src/views/management/monitoringEquipment/photographicDevice/index.vue

@@ -87,6 +87,7 @@
         :data="terminalTableData"
         tooltip-effect="dark"
         style="width: 100%"
+        height="calc(100% - 40px)"
         border
         @selection-change="handleSelectionChange"
         @row-click="handleRowClick"
@@ -292,6 +293,7 @@ export default {
   }
   .photoGraphicTable {
     padding: 16px 8px 0 8px;
+    height: calc(100% - 80px);
   }
 }
 </style>

src/views/management/userEquipment/lineInformation/index.vue

@@ -42,6 +42,7 @@
         :data="lineTableData"
         tooltip-effect="dark"
         style="width: 100%"
+        height="calc(100% - 40px)"
         border
         @selection-change="handleSelectionChange"
         @row-click="handleRowClick"
@@ -212,6 +213,8 @@ export default {
   }
   .lineTable {
     padding: 16px 8px 0 8px;
+    height: calc(100% - 80px);
+    //background: #fcc;
   }
 }
 </style>

src/views/realTimeMonitor/index.vue

@@ -24,12 +24,12 @@
     <!-- 带参数的中心内容右侧参数区 -->
     <div class="picSetBox">
       <div class="swiperBox">
-        {{ terminalPhoto }}
+        <!-- {{ terminalPhoto }}
         <div class="pic" v-for="item in terminalPhoto">
           <img :src="item.path" style="width: 100%; height: 100%" alt="" />
-        </div>
+        </div> -->
 
-        <!-- <carouselChart></carouselChart> -->
+        <carouselChart :terminalPhoto="terminalPhoto"></carouselChart>
       </div>
       <div class="parameterArea">
         <div class="monitorItemBox">