优化图片大小

src/views/components/carouselChart.vue

@@ -12,12 +12,12 @@
         :key="item.id"
       >
         <viewer class="bigimg" v-if="item.path.indexOf('nopic') == -1">
-          <!-- <img :src="item.path + '!1330x670'" alt="" /> -->
-          <img v-if="index == 0" :src="item.path + '!1330x670'" />
+          <!-- <img :src="item.path + '!1280x720'" alt="" /> -->
+          <img v-if="index == 0" :src="item.path + '!1280x720'" />
           <img
             v-else
             src="../../assets/img/loading.jpg"
-            :data-src="item.path + '!1330x670'"
+            :data-src="item.path + '!1280x720'"
             class="swiper-lazy"
           />
         </viewer>
@@ -46,7 +46,7 @@
         :key="item.id"
       >
         <div class="bigimg" v-if="item.path.indexOf('nopic') == -1">
-          <!-- <img :src="item.path + '!1330x670'" alt="" /> -->
+          <!-- <img :src="item.path + '!1280x720'" alt="" /> -->
           <img v-if="index == 0" :src="item.path + '!260x160'" />
           <img
             v-else
@@ -58,7 +58,7 @@
         <div class="bigimg" v-else>
           <img :src="item.path" alt="" />
         </div>
-        <!-- <img v-if="index == 0" :src="item.path + '!1330x670'" />
+        <!-- <img v-if="index == 0" :src="item.path + '!1280x720'" />
 
         <img
           src="item.path + '!260x160'"

src/views/devicePhotoSchedule/index.vue

@@ -31,7 +31,11 @@
           </el-table-column>
           <el-table-column label="时间表规则" width="600">
             <template slot-scope="scope">
-              <ul class="rulesBox" v-for="(item,value) in scope.row.list" :key="value">
+              <ul
+                class="rulesBox"
+                v-for="(item, value) in scope.row.list"
+                :key="value"
+              >
                 <li><span>开始时间：</span>{{ item.startTime }}</li>
                 <li><span>结束时间：</span>{{ item.endTime }}</li>
                 <li>
@@ -231,6 +235,11 @@ export default {
         span {
           margin-right: 4px;
         }
+        .el-tag--small {
+          height: 16px;
+          padding: 0 8px;
+          line-height: 16px;
+        }
       }
     }
   }

src/views/realTimeMonitor/index.vue

@@ -83,7 +83,7 @@
               <el-button type="primary" @click="handleShowGPS"
                 >获取GPS位置</el-button
               >
-              <el-button type="primary" @click="handleShowInfo">
+              <el-button type="primary" @click="handleShowErr">
                 装置信息</el-button
               >
               <el-dropdown
@@ -123,7 +123,6 @@
       <!-- <deviceUpgrade ref="deviceupgrade_ref"></deviceUpgrade> -->
       <!-- 绘制图片 -->
       <pictureTags ref="pictureTags_ref"></pictureTags>
-      <info-dialog ref="infodialog_ref"></info-dialog>
     </div>
   </div>
 </template>
@@ -141,14 +140,12 @@ import carouselChart from "../components/carouselChart.vue";
 import setschedule from "./components/setschedule.vue";
 import deviceUpgrade from "./components/deviceUpgrade.vue";
 import pictureTags from "./components/pictureTags.vue";
-import infoDialog from "./components/infoDialog.vue";
 export default {
   components: {
     carouselChart,
     setschedule,
     deviceUpgrade,
     pictureTags,
-    infoDialog,
   },
   data() {
     return {
@@ -330,10 +327,6 @@ export default {
       this.$refs.setschedule_ref.getSingleAccess(this.channelId);
       this.$refs.setschedule_ref.deviceList();
     },
-    //
-    handleShowInfo() {
-      this.$refs.infodialog_ref.display();
-    },
     handleShowErr() {
       this.$message({
         message: "该功能暂未开发,敬请期待",
@@ -409,17 +402,8 @@ export default {
       })
         .then((res) => {
           console.log(res);
-
-          this.$message({
-            message: "手动拍照请求成功",
-            type: "success",
-          });
         })
         .catch((err) => {
-          this.$message({
-            message: "手动拍照请求成失败",
-            type: "error",
-          });
           console.log(err); //代码错误、请求失败捕获
         });
     },

src/views/realTimeSearch/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="realTimeSearch">
-    <div class="searchMain">
+    <div class="searchMain" v-loading="loadingSearch">
       <div class="searchBox">
         <el-form :inline="true" :model="formdata" class="demo-form-inline">
           <el-form-item label="电压名称">
@@ -57,34 +57,41 @@
           </el-form-item>
         </el-form>
       </div>
-      <div class="pictureBox" v-loading="loading" v-if="picList.length !== 0">
-        <el-card
-          class="box-card imgList"
-          v-for="(item, index) in picList"
-          :key="index"
-        >
-          <viewer class="bigpic">
-            <img :src="item.path" />
-            <!-- <el-image :src="item.path" lazy></el-image> -->
-            <div class="caption">
-              <p class="infoTop">
-                {{ item.channelId }}-{{ item.termId }}-{{ item.fileSize }}
-              </p>
-              <p class="infoBottom">
-                拍照时间：{{
-                  $moment(item.photoTime).format("YYYY-MM-DD HH:mm:ss")
-                }}
-                上传时间：{{
-                  $moment(item.recvTime).format("YYYY-MM-DD HH:mm:ss")
-                }}
-              </p>
-            </div>
-          </viewer>
-        </el-card>
-      </div>
-      <div class="pictureBox" v-else>
-        <el-empty description="暂无图片"></el-empty>
+      <div class="pictureBox" v-loading="loading">
+        <div v-if="picList.length !== 0">
+          <el-card
+            class="box-card imgList"
+            v-for="(item, index) in picList"
+            :key="index"
+          >
+            <viewer class="bigpic">
+              <img :src="item.path + '!1280x720'" />
+
+              <!-- <el-image :src="item.path" lazy></el-image> -->
+
+              <div class="caption">
+                <p class="infoTop">
+                  {{ item.linename }};{{ item.displayname }};{{
+                    item.channnelname
+                  }}
+                </p>
+                <p class="infoBottom">
+                  拍照时间：{{
+                    $moment(item.photoTime).format("YYYY-MM-DD HH:mm:ss")
+                  }}
+                  上传时间：{{
+                    $moment(item.recvTime).format("YYYY-MM-DD HH:mm:ss")
+                  }}
+                </p>
+              </div>
+            </viewer>
+          </el-card>
+        </div>
+        <div class="noPicBox" v-else>
+          <el-empty description="暂无图片"></el-empty>
+        </div>
       </div>
+
       <div class="pageNation">
         <el-pagination
           @current-change="handleCurrentChange"
@@ -122,6 +129,7 @@ export default {
       pageSize: 10, // 每页数量
       total: 0, //总条数
       loading: false,
+      loadingSearch: false,
       signtype: 0, //0第一次查询
     };
   },
@@ -135,6 +143,7 @@ export default {
   methods: {
     //获取电压信息
     getSearchdy() {
+      this.loadingSearch = true;
       getSearchInfo({ type: 1 })
         .then((res) => {
           this.dyOptions = res.data.list;
@@ -175,6 +184,7 @@ export default {
             this.getPicData();
           }
           this.signtype = 1;
+          this.loadingSearch = false;
         })
         .catch((err) => {});
     },
@@ -231,9 +241,7 @@ export default {
     height: calc(100% - 86px);
     overflow: auto;
     border: 1px solid #eee;
-    .el-empty {
-      margin: auto;
-    }
+
     .imgList {
       width: calc((100% - 104px) / 4);
       position: relative;
@@ -243,6 +251,7 @@ export default {
       padding: 4px;
       border-radius: 3px;
       background: #fff;
+      height: fit-content;
       .el-card__body {
         padding: 0px;
       }
@@ -273,6 +282,15 @@ export default {
         }
       }
     }
+    .noPicBox {
+      display: flex;
+      width: 100%;
+      height: calc(100% - 86px);
+      overflow: auto;
+      .el-empty {
+        margin: auto;
+      }
+    }
   }
 }
 </style>