修改图片轮播

src/assets/css/theme.less

@@ -264,7 +264,7 @@
       > .el-tree-node__content {
       // 设置颜色
       color: #fff;
-      background: @orange-color !important;
+      background: #f39b33 !important;
     }
     .el-menu--horizontal .el-menu-item.is-active i {
       color: @orange-color;
@@ -276,7 +276,7 @@
     .el-tree-node.is-current
     > .el-tree-node__content {
     color: #fff;
-    background: @orange-color;
+    background: #f39b33 !important;
   }
 
   .gallery-thumbs .swiper-slide-active {

src/utils/request.js

@@ -1,36 +1,36 @@
 import axios from "axios";
-// import { Loading } from "element-ui"; //项目已经全局引入element的话可以不单独引入
-// let loading; //定义loading变量
-// function startLoading() {
-//   //使用Element loading-start 方法
-//   loading = Loading.service({
-//     lock: true,
-//     text: "加载中……",
-//     background: "rgba(255, 255, 255, 0.7)",
-//   });
-// }
-// function endLoading() {
-//   //使用Element loading-close 方法
-//   loading.close();
-// }
+import { Loading } from "element-ui"; //项目已经全局引入element的话可以不单独引入
+let loading; //定义loading变量
+function startLoading() {
+  //使用Element loading-start 方法
+  loading = Loading.service({
+    lock: true,
+    text: "加载中……",
+    background: "rgba(255, 255, 255, 0.7)",
+  });
+}
+function endLoading() {
+  //使用Element loading-close 方法
+  loading.close();
+}
 // 那么 showFullScreenLoading() tryHideFullScreenLoading() 要干的事儿就是将同一时刻的请求合并。
 // 声明一个变量 needLoadingRequestCount，每次调用showFullScreenLoading方法 needLoadingRequestCount + 1。
 // 调用tryHideFullScreenLoading()方法，needLoadingRequestCount - 1。needLoadingRequestCount为 0 时，结束 loading。
-// let needLoadingRequestCount = 0;
-// export function showFullScreenLoading() {
-//   if (needLoadingRequestCount === 0) {
-//     startLoading();
-//   }
-//   needLoadingRequestCount++;
-// }
+let needLoadingRequestCount = 0;
+export function showFullScreenLoading() {
+  if (needLoadingRequestCount === 0) {
+    startLoading();
+  }
+  needLoadingRequestCount++;
+}
 
-// export function tryHideFullScreenLoading() {
-//   if (needLoadingRequestCount <= 0) return;
-//   needLoadingRequestCount--;
-//   if (needLoadingRequestCount === 0) {
-//     endLoading();
-//   }
-// }
+export function tryHideFullScreenLoading() {
+  if (needLoadingRequestCount <= 0) return;
+  needLoadingRequestCount--;
+  if (needLoadingRequestCount === 0) {
+    endLoading();
+  }
+}
 
 const service = axios.create({
   // process.env.NODE_ENV === 'development' 来判断是否开发环境
@@ -43,7 +43,7 @@ const service = axios.create({
 
 service.interceptors.request.use(
   (config) => {
-    //showFullScreenLoading();
+    showFullScreenLoading();
     return config;
   },
   (error) => {
@@ -55,7 +55,7 @@ service.interceptors.request.use(
 service.interceptors.response.use(
   (response) => {
     if (response.status === 200) {
-      // tryHideFullScreenLoading();
+      tryHideFullScreenLoading();
       return response.data;
     } else {
       Promise.reject();

src/views/components/carouselChart.vue

@@ -11,7 +11,7 @@
         v-for="item in terminalPhoto"
         :key="item.id"
       >
-        <img :src="item.path" style="width: 100%" alt="" />
+        <img :src="item.path" alt="" />
       </swiper-slide>
       <div
         class="swiper-button-next swiper-button-white"
@@ -33,7 +33,7 @@
         v-for="(item, index) in terminalPhoto"
         :key="item.id"
       >
-        <img style="width: 100%" :src="item.path" alt="" />
+        <img :src="item.path" alt="" />
         <p class="timeInfo">
           {{ $moment(item.photoTime).format("YYYY-MM-DD HH:mm:ss") }}
         </p>
@@ -111,55 +111,59 @@ export default {
   display: flex;
   flex-direction: column;
   height: 100%;
-  .slide {
-    width: 20%;
-  }
+  box-sizing: border-box;
   .gallery-top {
-    // height: 80% !important;
-    height: 80% !important;
+    //background: #fcc;
+    width: calc(100% - 6px);
+    height: 80%;
+    overflow: hidden;
+    border: 3px solid transparent;
+    .slide-1 {
       width: 100%;
+      overflow: hidden;
+
+      img {
+        width: 1360px;
+        height: auto;
+        object-fit: cover;
+      }
+    }
   }
   .gallery-thumbs {
-    height: 20% !important;
-    box-sizing: border-box;
-    padding: 10px 0px;
     width: 100%;
-    margin-left: 2px;
-    background-color: #f0f0f8;
-
-    .swiper-button-next {
-      right: 0px;
+    height: 18%;
+    .slide {
+      width: 20%;
+      border: 3px solid transparent;
+      overflow: hidden;
+      box-sizing: border-box;
+      img {
+        width: 320px;
+        height: auto;
+        object-fit: cover;
       }
-    .swiper-button-prev {
-      left: 0px;
     }
+
     .timeInfo {
       position: absolute;
-      bottom: 0;
+      bottom: 0px;
       width: 100%;
       background: #f0f0f0;
-      padding: 4px 0px;
+      padding: 8px 0px;
       font-size: 14px;
       text-align: center;
       color: @color-text-primary;
     }
   }
-  .swiper-slide {
-    background-size: cover;
-    background-position: center;
-    //border: 3px solid transparent;
-  }
-
-  .gallery-thumbs .swiper-slide {
-    // width: 20%;
-    // height: 80px;
-    // opacity: 0.4;
-  }
-  .slide {
-    border: 3px solid transparent;
+  .nopic {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    img {
+      object-fit: fill;
+      width: 100% !important;
+      height: 100% !important;
     }
-  .gallery-thumbs .swiper-slide-active {
-    border: 3px solid @color-primary;
   }
 }
 </style>

src/views/realTimeMonitor/index.vue

@@ -1,4 +1,5 @@
 <template>
+  <div class="monitorBox">
     <div class="monitor-container">
       <!-- 左侧数据列表树 -->
       <div class="sideBar">
@@ -27,7 +28,6 @@
       </div>
       <!-- <router-view></router-view> -->
       <!-- 中心内容 -->
-
       <!-- <picturemain :photoData="photoData" v-if="showBigPic"></picturemain> -->
       <!-- 带参数的中心内容右侧参数区 -->
       <div class="picSetBox">
@@ -66,6 +66,7 @@
         <!-- <paramArea></paramArea> -->
       </div>
     </div>
+  </div>
 </template>
 
 <script>
@@ -143,13 +144,13 @@ export default {
               console.log(this.currentNodekey);
               this.channelId = this.currentNodekey;
               console.log(this.channelId);
+              this.getChannelList(this.channelId); //获取通道id接口
             });
           }
         })
         .catch((err) => {
           console.log(err); //代码错误、请求失败捕获
         });
-      this.getChannelList(this.channelId); //获取通道id接口
     },
     //点击获取当前点击的tree数据
     handleNodeClick(data, node) {
@@ -190,6 +191,7 @@ export default {
     },
     //获取图片
     getTerminalPhotoList(id, date, termId) {
+      this.terminalPhoto = [];
       console.log(id, date, termId);
       getTerminalPhotoListJoggle({
         channelid: id,
@@ -198,6 +200,7 @@ export default {
       })
         .then((res) => {
           console.log(res);
+
           this.terminalPhoto = res.data.list;
           console.log(this.terminalPhoto);
         })
@@ -213,6 +216,7 @@ export default {
         return i.value === val;
       });
       console.log(channelObj);
+
       this.getTerminalPhotoList(val, this.dateValue, channelObj.termid);
     },
   },
@@ -220,16 +224,23 @@ export default {
 </script>
 
 <style lang="less">
+.monitorBox {
+  width: calc(100% - 16px);
+  height: calc(100% - 32px);
+  padding: 16px 8px;
+  background: #ffffff;
   .monitor-container {
     display: flex;
     height: 100%;
-  border: 1px solid @border-color-base;
     box-sizing: border-box;
     background: @color-white;
+    border: 1px solid #dddddd;
+    border-radius: 4px;
     .sideBar {
       width: 300px;
       border-right: 1px solid @border-color-base;
       overflow: auto;
+      padding: 16px 0px;
       .el-tree {
         .el-tree-node__content {
           height: 40px;
@@ -259,7 +270,7 @@ export default {
       }
     }
     .parameterArea {
-    width: 300px;
+      width: 220px;
       padding: 16px 16px;
       border-left: 1px solid #dcdfe6;
       .monitorItemBox,
@@ -277,4 +288,5 @@ export default {
       }
     }
   }
+}
 </style>