历史图片优化加载

src/views/pictureRotation/index.vue

@@ -22,7 +22,7 @@
           <el-button type="primary" @click="setbtn">设置</el-button>
         </div>
       </div>
-      <div class="imageCenter" v-loading="loading" v-cloak>
+      <div class="imageCenter" v-loading="loading">
         <el-row
           v-for="i in rowNum"
           :key="'row-' + i"
@@ -31,7 +31,7 @@
           <el-col
             :span="24 / colNum"
             v-for="(item, index) in picList"
-            v-if="index < colNum * i && index >= colNum * (i - 1)"
+            v-show="index < colNum * i && index >= colNum * (i - 1)"
             :key="'col-' + index"
           >
             <div class="imgList" @click="handleShowHistory(item)">
@@ -39,7 +39,7 @@
                 v-if="item.path !== null && item.path.indexOf('videos') == -1"
                 class="bigpic"
               >
-                <img :src="item.path + '!1366x768'" @error="setDefaultImage" />
+                <img :src="item.path" @error="setDefaultImage" />
               </div>
               <div
                 class="bigpic"
@@ -93,15 +93,18 @@
             ></el-option>
           </el-select>
         </el-form-item>
-        <el-form-item label="画面布局" class="layoutBox">
-          <!-- <el-select v-model="selLayout" placeholder="s请选择">
+        <el-form-item label="选择通道">
+          <el-select v-model="channelVal" placeholder="请选择">
             <el-option
-              v-for="item in layoutOptions"
+              v-for="item in channelOption"
               :key="item.value"
-              :label="item.label"
+              :label="item.name"
               :value="item.value"
             ></el-option>
-          </el-select> -->
+          </el-select>
+        </el-form-item>
+
+        <el-form-item label="画面布局" class="layoutBox">
           <div class="selectGroup">
             <div class="rowbox">
               <el-radio-group v-model="rowradio" class="radio1">
@@ -134,27 +137,6 @@
       </div>
     </el-dialog>
     <morePicPreveiw ref="morePicPreveiw_ref"></morePicPreveiw>
-    <!-- <el-dialog
-      title="历史图片"
-      :visible.sync="historyPicdialog"
-      width="1366px"
-      :close-on-click-modal="false"
-      class="showDialogHistoryPic"
-    >
-      <div class="title">
-        {{ picInfoData.linename }}-{{ picInfoData.towername }}-（{{
-          picInfoData.alias !== null && picInfoData.alias !== ""
-            ? picInfoData.alias
-            : picInfoData.channnelname
-        }}） {{ $moment(picInfoData.photoTime).format("YYYY-MM-DD ") }}
-      </div>
-      <carouselChart
-        ref="carouselpic"
-        :terminalPhoto="terminalPhoto"
-        v-if="terminalPhoto.length > 0"
-        v-loading="historyPicLoading"
-      ></carouselChart>
-    </el-dialog> -->
   </div>
 </template>
 <script>
@@ -223,6 +205,12 @@ export default {
       rowradio: "4",
       colradio: "4",
       selLayout: 1,
+      channelVal: -1, //默认全部
+      channelOption: [
+        { name: "全部", value: -1 },
+        { name: "通道一", value: 1 },
+        { name: "通道二", value: 2 },
+      ],
       options: [
         {
           value: "选项1",
@@ -242,6 +230,7 @@ export default {
       nopicPath: require("@/assets/img/nopic.jpg"),
     };
   },
+
   methods: {
     setDefaultImage(e) {
       e.target.src = defaultImage;
@@ -305,17 +294,25 @@ export default {
       this.colradio = parseInt(localStorage.getItem("col"))
         ? parseInt(localStorage.getItem("col"))
         : 4;
+      this.channelVal = parseInt(localStorage.getItem("channelNum"))
+        ? parseInt(localStorage.getItem("channelNum"))
+        : -1;
     },
     submitForm() {
       localStorage.setItem("totalTime", this.selSpeed);
       localStorage.setItem("row", this.rowradio);
       localStorage.setItem("col", this.colradio);
+      localStorage.setItem("channelNum", this.channelVal);
       this.rowNum = parseInt(localStorage.getItem("row"))
         ? parseInt(localStorage.getItem("row"))
         : 4;
       this.colNum = parseInt(localStorage.getItem("col"))
         ? parseInt(localStorage.getItem("col"))
         : 4;
+      this.channelVal = parseInt(localStorage.getItem("channelNum"))
+        ? parseInt(localStorage.getItem("channelNum"))
+        : -1;
+      this.page = 1;
       this.pageSize = this.rowradio * this.colradio;
       this.setdialog = false;
       this.$message.success("设置成功");
@@ -330,12 +327,17 @@ export default {
     },
     //请求数据接口方法
     getPicData() {
-      this.loading = true;
-      this.picList = [];
-      getPictureList({
+      //this.loading = true;
+      console.log(this.picList);
+      //this.picList = [];
+      const params = {
         pageindex: this.page,
         pagesize: this.rowNum * this.colNum,
-      })
+      };
+      if (this.channelVal !== -1) {
+        params.channelid = this.channelVal;
+      }
+      getPictureList(params)
         .then((res) => {
           this.picList = res.data.list;
           this.totalPage = res.data.totalpage;
@@ -402,6 +404,11 @@ export default {
       ? parseInt(localStorage.getItem("col"))
       : 4;
     this.pageSize = this.rowradio * this.colradio;
+
+    this.channelVal = parseInt(localStorage.getItem("channelNum"))
+      ? parseInt(localStorage.getItem("channelNum"))
+      : -1;
+    console.log("我是第一次进来", this.channelVal);
     //this.toggleCountdown();
     this.getPicData();
   },

src/views/realTimeMonitor/components/carouselChart.vue

@@ -23,8 +23,14 @@
         v-if="currentPicPath.indexOf('nopic') !== -1 && currentPicPath"
       >
         <el-image :src="currentPicPath">
-          <div slot="placeholder" class="image-slot">
-            加载中<span class="dot">...</span>
+          <div
+            slot="placeholder"
+            class="image-slot"
+            :style="{
+              backgroundImage: 'url(' + currentPicPath + '!160x60' + ')',
+            }"
+          >
+            <!-- <i class="el-icon-loading"></i> -->
           </div>
         </el-image>
       </div>
@@ -47,7 +53,7 @@
               backgroundImage: 'url(' + currentPicPath + '!160x60' + ')',
             }"
           >
-            <i class="el-icon-loading"></i>
+            <!-- <i class="el-icon-loading"></i> -->
           </div>
           <template slot="error">
             <img src="../../../assets/img/nodatapic2.jpg" />
@@ -109,7 +115,6 @@
                 item.path.indexOf('videos') == -1
               "
             >
-              <!-- <el-image v-lazy="item.path + '!260x160'"></el-image> -->
               <img v-lazy="item.path + '!160x60'" />
               <!--  <img :src="item.path + '!260x160'" />-->
               <!-- :class="{ alarmSpan: item.isAlarm === 1 }" -->
@@ -416,11 +421,6 @@ export default {
     },
     //获取第一张大图
     changeBigPic(data, i) {
-      // //console.log("鼠标222222222", this.currentPage, this.activeSmall);
-      this.picShowFlag = true;
-      if (this.currentPicPath == "static/img/nopic.0e9cfc7c.jpg") {
-        this.picShowFlag = false;
-      }
       this.picDataAlarm = data;
       this.srcList = [];
       this.localPoints = [];
@@ -476,12 +476,10 @@ export default {
       console.log("loading");
       this.picLoading = false;
       this.drawlineBig(this.picDataAlarm);
-      this.picShowFlag = false;
     },
     setDefaultImage(e) {
       e.target.src = defaultImage;
       this.picLoading = false;
-      this.picShowFlag = false;
     },
     //鼠标滚动
     handleScroll(e) {
@@ -754,8 +752,8 @@ export default {
           height: 100%;
           background-size: 100% 100%;
           i {
-            font-size: 40px;
-            color: #128071;
+            font-size: 20px;
+            color: #169e8c;
           }
         }
         img {
@@ -911,7 +909,8 @@ export default {
           position: relative;
           cursor: pointer;
           background: url(../../../assets/img/nopicbg.png) no-repeat;
-          background-size: 100% 100%;
+          background-size: 20% 20%;
+          background-color: #eee;
         }
       }
       .smallPic {
@@ -925,8 +924,9 @@ export default {
         .picBox {
           width: 100%;
           height: 100%;
-          background: url(../../../assets/img/nopicbg.png) no-repeat;
-          background-size: 100% 100%;
+          background: url(../../../assets/img/nopicbg.png) no-repeat center;
+          background-size: 30% 24%;
+          background-color: #eee;
         }
         img {
           width: 100%;

src/views/realTimeMonitor/components/morePicPreveiw.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="morePicBox" v-if="isShow">
+  <div class="morePicBox" v-show="isShow">
     <div class="headTitle">
       <div class="info">
         <p>
@@ -24,7 +24,6 @@
         ref="carouselpic"
         :terminalPhoto="terminalPhoto"
         :photoNum="photoNum"
-        v-if="terminalPhoto.length > 0"
       ></carouselChart>
     </div>
   </div>
@@ -64,7 +63,7 @@ export default {
     },
     //获取图片
     getTerminalPhotoList(channelid, date, termId) {
-      this.terminalPhoto = [];
+      //this.terminalPhoto = [];
       this.picLoading = true;
       getTerminalPhotoListJoggle({
         channelid: channelid,
@@ -86,23 +85,6 @@ export default {
             this.terminalPhoto = res.data.list;
           }
           this.carouselKey++; // 更新key以强制重新渲染
-          // let newDataList = [];
-          // let current = 0;
-          // if (this.terminalPhoto && this.terminalPhoto.length > 0) {
-          //   for (let i = 0; i <= this.terminalPhoto.length - 1; i++) {
-          //     if (i % this.photoNum !== 0 || i === 0) {
-          //       if (!newDataList[current]) {
-          //         newDataList.push([this.terminalPhoto[i]]);
-          //       } else {
-          //         newDataList[current].push(this.terminalPhoto[i]);
-          //       }
-          //     } else {
-          //       current++;
-          //       newDataList.push([this.terminalPhoto[i]]);
-          //     }
-          //   }
-          // }
-          // this.terminalPhoto = [...newDataList];
         })
         .catch((err) => {
           console.log(err); //代码错误、请求失败捕获
@@ -154,6 +136,9 @@ export default {
   .picmain {
     width: 100%;
     height: calc(100% - 10px);
+    .el-loading-mask {
+      background-color: rgba(255, 255, 255, 0.2);
+    }
   }
 }
 </style>

src/views/realTimeSearch/index.vue

@@ -108,22 +108,14 @@
         </el-form>
       </div>
       <div class="pictureBox" v-loading="loading">
-        <div
-          v-if="picList.length !== 0"
-          style="width: 100%"
-          v-loading="loading"
-        >
+        <div class="picShowBox" v-if="picList.length !== 0" style="width: 100%">
           <el-card
             class="box-card imgList"
             v-for="(item, index) in picList"
             :key="index"
           >
             <div class="bigpic" v-if="item.path.indexOf('videos') == -1">
-              <el-image
-                lazy
-                :src="item.path + '!800x600'"
-                :preview-src-list="[item.path]"
-              >
+              <el-image lazy :src="item.path" :preview-src-list="[item.path]">
                 <template slot="error">
                   <img src="../../assets/img/nodatapic2.jpg" />
                 </template>
@@ -395,7 +387,7 @@ export default {
       console.log(this.formdata);
       getRealtimePhoto(this.formdata)
         .then((res) => {
-          this.picList = [];
+          // this.picList = [];
           this.picList = res.data.list;
           this.total = res.data.total;
           this.tdTermid = res.data.list[0].termid;
@@ -425,7 +417,7 @@ export default {
     //点击分页
     handleCurrentChange(val) {
       this.page = val;
-      this.picList = [];
+      //this.picList = [];
       this.getPicData();
     },
     //每页条数
@@ -488,8 +480,12 @@ export default {
     flex-wrap: wrap;
     height: calc(100% - 135px);
     max-height: calc(100% - 135px);
-    overflow: auto;
+
     border: 1px solid #eee;
+    .picShowBox {
+      height: 100%;
+      overflow: auto;
+    }
 
     .imgList {
       width: calc((100% - 104px) / 4);
@@ -509,11 +505,17 @@ export default {
       .bigpic {
         width: 100%;
         height: 100%;
-        background-size: 100% 100%;
+        //background-size: 100% 100%;
         position: relative;
+
         .el-image {
           width: 100%;
           height: 100%;
+
+          .el-image__placeholder {
+            background: url(../../assets/img/nopicbg.png) no-repeat center;
+            background-size: 20% 20%;
+          }
           img {
             cursor: pointer;
             width: 100%;
@@ -572,6 +574,9 @@ export default {
         }
       }
     }
+    .el-loading-mask {
+      background-color: rgba(255, 255, 255, 0.4);
+    }
     .noPicBox {
       display: flex;
       width: 100%;