优化加载时间

package.json

@@ -17,6 +17,7 @@
     "update-element-ui-theme": "^1.0.0",
     "v-viewer": "^1.6.4",
     "vue": "^2.6.14",
+    "vue-lazyload": "^1.2.6",
     "vue-router": "^3.5.1",
     "vuex": "^3.6.2"
   },

src/main.js

@@ -26,7 +26,25 @@ import "./assets/css/theme.less"; //修改主题颜色
 import "./assets/css/global.less"; //全局定义颜色
 import "./assets/css/element.less"; //全局定义颜色
 import "./assets/fonts/iconfont.css"; //按钮
+import VueLazyload from "vue-lazyload";
+//注册插件
+// 全局配置vue-lazyload
+// Vue.use(VueLazyload, {
 
+//   listenEvents: ["scroll"], // 监听的事件类型
+// });
+Vue.use(VueLazyload, {
+  error: require("./assets/img/nodatapic2.jpg"),
+  listenEvents: [
+    "scroll",
+    "wheel",
+    "mousewheel",
+    "resize",
+    "animationend",
+    "transitionend",
+    "touchmove",
+  ],
+});
 //引入md5加密
 import md5 from "js-md5";
 Vue.prototype.$md5 = md5;

src/utils/request.js

@@ -7,7 +7,7 @@ const service = axios.create({
   // easy-mock服务挂了，暂时不使用了
   // baseURL: '',
   // timeout: 5000
-  baseURL: "api", //把原来的项目地址，改成api，解决跨域问题
+  baseURL: "", //把原来的项目地址，改成api，解决跨域问题
   timeout: 30000,
 });
 

src/views/alarmHandling/components/historyimg.vue

@@ -16,9 +16,10 @@
     </div>
     <carouselChart
       ref="carouselpic"
+      :key="carouselKey"
       :terminalPhoto="terminalPhoto"
+      :photoNum="photoNum"
       v-if="terminalPhoto.length > 0"
-      v-loading="historyPicLoading"
     ></carouselChart>
   </el-dialog>
 </template>
@@ -31,6 +32,8 @@ export default {
   },
   data() {
     return {
+      carouselKey: 0,
+      photoNum: 5,
       page: 1, // 当前页数
       pageSize: 10, // 每页数量
       total: 0, //总条数
@@ -56,10 +59,8 @@ export default {
         pagesize: this.pageSize,
       }).then((res) => {
         console.log(res);
-
         this.historyPicLoading = false;
         this.terminalPhoto = res.data.list;
-
         this.total = res.data.total;
       });
     },

src/views/alarmHandling/index.vue

@@ -289,8 +289,8 @@
                     {{ item.lineName }} /
                     {{
                       item.displayName !== null && item.displayName !== ""
-                        ? item.towerName
+                        ? item.displayName
-                        : item.displayName
+                        : item.towerName
                     }}
                     /
                     {{

src/views/pictureRotation/index.vue

@@ -44,11 +44,32 @@
                     : ''
                 "
               >
-                <img
+                <!-- <img
-                  :src="item.path + '!1366x768'"
+                  :src="item.path"
                   :id="'img' + index"
                   :ref="'imgref' + index"
+                /> -->
+                <el-image
+                  :src="item.path"
+                  :id="'img' + index"
+                  :ref="'imgref' + index"
+                >
+                  <div
+                    slot="placeholder"
+                    class="image-slot"
+                    :style="{
+                      backgroundImage: 'url(' + item.path + '!260x160' + ')',
+                    }"
+                  >
+                    <i class="el-icon-loading"></i>
+                  </div>
+                  <template slot="error">
+                    <img
+                      :id="'img' + index"
+                      src="../../assets/img/nodatapic2.jpg"
                     />
+                  </template>
+                </el-image>
                 <canvas
                   :ref="'canvansref' + index"
                   :id="'canvas_' + index"
@@ -110,6 +131,16 @@
             ></el-option>
           </el-select>
         </el-form-item>
+        <el-form-item label="选择通道">
+          <el-select v-model="channelVal" placeholder="请选择">
+            <el-option
+              v-for="item in channelOption"
+              :key="item.value"
+              :label="item.name"
+              :value="item.value"
+            ></el-option>
+          </el-select>
+        </el-form-item>
         <el-form-item label="画面布局" class="layoutBox">
           <!-- <el-select v-model="selLayout" placeholder="s请选择">
             <el-option
@@ -150,27 +181,7 @@
         <el-button type="primary" @click="submitForm()">确 定</el-button>
       </div>
     </el-dialog>
-    <!-- <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>
-      <carouselChartmore
-        ref="carouselpic"
-        :terminalPhoto="terminalPhoto"
-        v-if="terminalPhoto.length > 0"
-        v-loading="historyPicLoading"
-      ></carouselChartmore>
-    </el-dialog> -->
     <div class="morePicBox" v-if="historyPicdialog">
       <div class="headTitle">
         <div class="info">
@@ -193,9 +204,9 @@
       <div class="picmain">
         <carouselChartmore
           ref="carouselpic"
+          :key="carouselKey"
           :terminalPhoto="terminalPhoto"
-          v-if="terminalPhoto.length > 0"
+          :photoNum="photoNum"
-          v-loading="historyPicLoading"
         ></carouselChartmore>
       </div>
     </div>
@@ -211,6 +222,7 @@ export default {
   },
   data() {
     return {
+      carouselKey: 0,
       OptionssalseImg: {
         inline: false,
         button: true,
@@ -228,10 +240,17 @@ export default {
       total: 0, //总条数
       picList: [], //图片列表数据
       remainingTime: 0, //剩余时间
+      photoNum: 8,
       isRuning: false,
       timer: null,
       loading: false,
       setdialog: false, //设置弹框
+      channelVal: 1, //默认全部
+      channelOption: [
+        { name: "全部", value: -1 },
+        { name: "通道一", value: 1 },
+        { name: "通道二", value: 2 },
+      ],
       speedOptions: [
         {
           value: 5,
@@ -300,29 +319,36 @@ export default {
     handleclose() {
       this.historyPicdialog = false;
     },
+
     //获取图片
-    getTerminalPhotoList(channelid, date, termId) {
+    getTerminalPhotoList(channelId, date, termId) {
-      this.terminalPhoto = [];
+      console.log(channelId, date, termId);
-      this.historyPicLoading = true;
+
+      console.log("zhanshi asdadadadadadsddadadadadad", this.terminalPhoto);
+      //this.terminalPhoto = [];
       getTerminalPhotoListJoggle({
-        channelid: channelid,
+        channelid: channelId,
         time: date,
         terminalid: termId,
       })
         .then((res) => {
           console.log(res);
-          this.historyPicLoading = false;
           if (res.data.list.length == 0) {
             this.terminalPhoto = [
               {
                 path: this.nopicPath,
                 termId: termId,
-                mediatype: 0,
+                mediaType: 0,
               },
             ];
           } else {
             this.terminalPhoto = res.data.list;
           }
+          this.carouselKey++; // 更新key以强制重新渲染
+
+          this.$nextTick(() => {
+            this.$refs.carouselpic.changeBigPic(this.terminalPhoto[0], 0);
+          });
         })
         .catch((err) => {
           console.log(err); //代码错误、请求失败捕获
@@ -347,6 +373,9 @@ 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);
@@ -358,6 +387,10 @@ export default {
       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("设置成功");
@@ -373,19 +406,28 @@ export default {
     //请求数据接口方法
     getPicData() {
       this.loading = true;
+      console.log(this.picList);
       this.picList = [];
-      getPictureList({
+      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;
           this.total = res.data.total;
           this.loading = false;
-          this.$nextTick(() => {
+          console.log("我是来获取图片的", document.getElementById("img" + 0));
+          setTimeout(() => {
             this.drawlineListAll(this.picList);
-          });
+          }, 200); // 200 毫秒
+          // this.$nextTick(() => {
+
+          // });
         })
         .catch((err) => {
           console.log(err);
@@ -441,7 +483,7 @@ export default {
         if (val[i].isAlarm == 1) {
           console.log(i);
           console.log(document.getElementById("canvas_" + i));
-          console.log(document.getElementById("img" + i));
+
           this.canvas = document.getElementById("canvas_" + i);
           this.imgpic = document.getElementById("img" + i);
           this.textInfo = val[i].alarmlist[0].enname;
@@ -498,8 +540,12 @@ export default {
     this.colradio = this.colNum = parseInt(localStorage.getItem("col"))
       ? parseInt(localStorage.getItem("col"))
       : 4;
+    this.channelVal = parseInt(localStorage.getItem("channelNum"))
+      ? parseInt(localStorage.getItem("channelNum"))
+      : 1;
     this.pageSize = this.rowradio * this.colradio;
     //this.toggleCountdown();
+
     this.getPicData();
   },
   created() {},
@@ -568,6 +614,22 @@ export default {
       position: relative;
       //background-color: #00eaff;
       height: 100%;
+      .el-image {
+        width: 100%;
+        height: 100%;
+
+        .image-slot {
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          height: 100%;
+          background-size: 100% 100%;
+          i {
+            font-size: 20px;
+            color: #169e8c;
+          }
+        }
+      }
       .bigpic {
         width: 100%;
         height: 100%;

src/views/realTimeMonitor/components/morePicPreveiw.vue

@@ -18,20 +18,22 @@
       </div>
     </div>
     <div class="picmain" v-loading="picLoading">
-      <carouselChartmore
+      <carouselChart
         ref="carouselpic"
+        :key="carouselKey"
         :terminalPhoto="terminalPhoto"
-        v-if="terminalPhoto.length > 0"
+        :photoNum="photoNum"
-      ></carouselChartmore>
+      ></carouselChart>
     </div>
   </div>
 </template>
 <script>
-import carouselChartmore from "../../components/carouselChartmore.vue";
+// import carouselChartmore from "../../components/carouselChartmore.vue";
+import carouselChart from "../../components/carouselChart.vue";
 import { getTerminalPhotoListJoggle } from "@/utils/api/index";
 export default {
   components: {
-    carouselChartmore,
+    carouselChart,
   },
   props: {
     title: String,
@@ -44,6 +46,8 @@ export default {
       terminalPhoto: [], //获取装置当前图片数据
       nopicPath: require("@/assets/img/nopic.jpg"),
       picLoading: false,
+      photoNum: 8,
+      carouselKey: 0,
     };
   },
   mounted() {},
@@ -58,29 +62,65 @@ export default {
       this.getTerminalPhotoList(data.channelid, data.photoTime, data.termid);
     },
     //获取图片
-    getTerminalPhotoList(channelid, date, termId) {
+    // getTerminalPhotoList(channelid, date, termId) {
-      this.terminalPhoto = [];
+    //   this.terminalPhoto = [];
-      console.log("我是morem");
+    //   console.log("我是morem");
-      this.picLoading = true;
+    //   this.picLoading = true;
+    //   getTerminalPhotoListJoggle({
+    //     channelid: channelid,
+    //     time: date,
+    //     terminalid: termId,
+    //   })
+    //     .then((res) => {
+    //       console.log(res);
+    //       this.picLoading = false;
+    //       if (res.data.list.length == 0) {
+    //         this.terminalPhoto = [
+    //           {
+    //             path: this.nopicPath,
+    //             termId: termId,
+    //             mediatype: 0,
+    //           },
+    //         ];
+    //       } else {
+    //         this.terminalPhoto = res.data.list;
+    //       }
+    //     })
+    //     .catch((err) => {
+    //       console.log(err); //代码错误、请求失败捕获
+    //     });
+    // },
+    //获取图片
+    getTerminalPhotoList(channelId, date, termId) {
+      console.log(channelId, date, termId);
+      this.swiperLoading = true;
+      console.log("zhanshi asdadadadadadsddadadadadad", this.terminalPhoto);
+      //this.terminalPhoto = [];
       getTerminalPhotoListJoggle({
-        channelid: channelid,
+        channelid: channelId,
         time: date,
         terminalid: termId,
       })
         .then((res) => {
           console.log(res);
-          this.picLoading = false;
           if (res.data.list.length == 0) {
             this.terminalPhoto = [
               {
                 path: this.nopicPath,
                 termId: termId,
-                mediatype: 0,
+                mediaType: 0,
               },
             ];
           } else {
             this.terminalPhoto = res.data.list;
           }
+          this.carouselKey++; // 更新key以强制重新渲染
+
+          this.$nextTick(() => {
+            this.$refs.carouselpic.changeBigPic(this.terminalPhoto[0], 0);
+          });
+
+          this.swiperLoading = false;
         })
         .catch((err) => {
           console.log(err); //代码错误、请求失败捕获

src/views/realTimeMonitor/index.vue

@@ -110,12 +110,17 @@
               <el-breadcrumb-item> {{ towertitle }}</el-breadcrumb-item>
             </el-breadcrumb>
           </div>
+          <!-- <carouselChart
+            ref="carouselpic"
+            :key="carouselKey"
+            :terminalPhoto="terminalPhoto"
+          ></carouselChart> -->
           <carouselChart
             ref="carouselpic"
+            :key="carouselKey"
             :terminalPhoto="terminalPhoto"
-            v-if="terminalPhoto.length > 0"
+            :photoNum="photoNum"
           ></carouselChart>
-          <!--  -->
         </div>
         <div class="parameterArea">
           <div class="zzbox">
@@ -382,6 +387,7 @@ export default {
       lineTreeData: [],
       filterText: "",
       searchName: "",
+      photoNum: 5,
       defaultProps: {
         //指定参数格式回显数据
         children: "list",
@@ -410,7 +416,7 @@ export default {
       channelOption: [], //主动拍照通道
       channelarr: [],
       channelarrValue: null,
-      selectChannelValue: null, //选中的通道
+      selectChannelValue: 1, //选中的通道
       channelId: "", //选中的通道id
       btnpicloading: false, //主动拍照按钮loading
       requestId: "", //请求拍照返回的requestid
@@ -433,6 +439,7 @@ export default {
         favorVal: "",
       }, //收藏夹参数
       favorOptions: [], //收藏夹列表
+      carouselKey: 0, // 初始key
     };
   },
   watch: {
@@ -712,8 +719,8 @@ export default {
                 alias: item.alias,
               });
             });
-            this.selectChannelValue = this.channelListOption[0].value; //默认选中所有通道
+            this.selectChannelValue = this.channelListOption[1].value; //默认选中所有通道
-            this.channelarrValue = this.channelOption[0].value;
+            this.channelarrValue = this.channelOption[1].value;
             this.getTerminalPhotoList(
               this.selectChannelValue,
               this.dateValue,
@@ -748,30 +755,74 @@ export default {
       );
     },
     //获取图片
-    getTerminalPhotoList(id, date, termId) {
+    // getTerminalPhotoList(id, date, termId) {
-      this.clearfun();
+    //   this.swiperLoading = true;
-      this.terminalPhoto = [];
+    //   this.clearfun();
-      console.log(id, date, termId);
+    //   //this.terminalPhoto = [];
+    //   console.log("我是原来的图片", this.terminalPhoto);
+    //   console.log(id, date, termId);
+
+    //   getTerminalPhotoListJoggle({
+    //     channelid: id,
+    //     time: date,
+    //     terminalid: termId,
+    //   })
+    //     .then((res) => {
+    //       console.log(res);
+
+    //       if (res.data.list.length == 0) {
+    //         this.terminalPhoto = [
+    //           {
+    //             path: this.nopicPath,
+    //             termId: termId,
+    //             mediatype: 0,
+    //           },
+    //         ];
+    //       } else {
+    //         this.terminalPhoto = res.data.list;
+    //       }
+    //       this.carouselKey++; // 更新key以强制重新渲染
+    //       this.$nextTick(() => {
+    //         this.$refs.carouselpic.handleBigpic(this.terminalPhoto[0], 0);
+    //       });
+    //       this.swiperLoading = false;
+    //     })
+    //     .catch((err) => {
+    //       console.log(err); //代码错误、请求失败捕获
+    //     });
+    // },
+
+    //获取图片
+    getTerminalPhotoList(channelId, date, termId) {
+      console.log(channelId, date, termId);
       this.swiperLoading = true;
+      console.log("zhanshi asdadadadadadsddadadadadad", this.terminalPhoto);
+      //this.terminalPhoto = [];
       getTerminalPhotoListJoggle({
-        channelid: id,
+        channelid: channelId,
         time: date,
         terminalid: termId,
       })
         .then((res) => {
           console.log(res);
-          this.swiperLoading = false;
           if (res.data.list.length == 0) {
             this.terminalPhoto = [
               {
                 path: this.nopicPath,
                 termId: termId,
-                mediatype: 0,
+                mediaType: 0,
               },
             ];
           } else {
             this.terminalPhoto = res.data.list;
           }
+          this.carouselKey++; // 更新key以强制重新渲染
+
+          this.$nextTick(() => {
+            this.$refs.carouselpic.changeBigPic(this.terminalPhoto[0], 0);
+          });
+
+          this.swiperLoading = false;
         })
         .catch((err) => {
           console.log(err); //代码错误、请求失败捕获
@@ -1521,6 +1572,8 @@ export default {
         overflow: hidden;
         display: flex;
         flex-direction: column;
+        position: relative;
+
         .title {
           height: 32px;
           padding-left: 12px;
@@ -1540,6 +1593,9 @@ export default {
             }
           }
         }
+        .el-loading-mask {
+          background-color: rgba(0, 0, 0, 0.3);
+        }
       }
       .parameterArea {
         width: 220px;

src/views/realTimeSearch/index.vue

@@ -119,7 +119,7 @@
                 <img
                   :id="'img' + index"
                   :ref="'imgref' + index"
-                  :src="item.path + '!1366x768'"
+                  :src="item.path + '!800x600'"
                   ref="picJpg"
                 />
                 <canvas
@@ -444,549 +444,6 @@ export default {
       // this.$set(this.formdata, "endtime", this.formdata.timeVal[1]);
       getRealtimePhoto(this.formdata)
         .then((res) => {
-          // this.picList = [
-          //   {
-          //     id: 2000898,
-          //     termId: 10027,
-          //     displayName: "XYIGQ10D221000100",
-          //     lineId: 111,
-          //     lineName: "其它测试线路",
-          //     towerId: 25,
-          //     towerName: "湖南XYIGQ10D221000100",
-          //     channelId: 2,
-          //     channnelName: "通道2",
-          //     alias: null,
-          //     presetId: 255,
-          //     photoOrgId: 1697595617,
-          //     path: "http://47.96.238.157/photos/2023/10/18/00/XYIGQ10D221000100_2_FF_20231018102017.jpg",
-          //     alarmTime: "2023-10-18T02:20:17.000+00:00",
-          //     label: 3,
-          //     name: "WaJueJi",
-          //     enname: "挖掘机",
-          //     prob: 84,
-          //     x: 743,
-          //     y: 141,
-          //     width: 377,
-          //     height: 465,
-          //     photoWidth: 1920,
-          //     photoHeight: 1080,
-          //     isread: 0,
-          //   },
-          //   {
-          //     id: 2000897,
-          //     termId: 10027,
-          //     displayName: "XYIGQ10D221000100",
-          //     lineId: 111,
-          //     lineName: "其它测试线路",
-          //     towerId: 25,
-          //     towerName: "湖南XYIGQ10D221000100",
-          //     channelId: 1,
-          //     channnelName: "通道1",
-          //     alias: null,
-          //     presetId: 255,
-          //     photoOrgId: 1697595602,
-          //     path: "http://47.96.238.157/photos/2023/10/18/00/XYIGQ10D221000100_1_FF_20231018102002.jpg",
-          //     alarmTime: "2023-10-18T02:20:02.000+00:00",
-          //     label: 3,
-          //     name: "WaJueJi",
-          //     enname: "挖掘机",
-          //     prob: 84,
-          //     x: 624,
-          //     y: 0,
-          //     width: 433,
-          //     height: 577,
-          //     photoWidth: 1920,
-          //     photoHeight: 1080,
-          //     isread: 0,
-          //   },
-          //   {
-          //     id: 2000896,
-          //     termId: 10027,
-          //     displayName: "XYIGQ10D221000100",
-          //     lineId: 111,
-          //     lineName: "其它测试线路",
-          //     towerId: 25,
-          //     towerName: "湖南XYIGQ10D221000100",
-          //     channelId: 2,
-          //     channnelName: "通道2",
-          //     alias: null,
-          //     presetId: 255,
-          //     photoOrgId: 1697595017,
-          //     path: "http://47.96.238.157/photos/2023/10/18/00/XYIGQ10D221000100_2_FF_20231018101017.jpg",
-          //     alarmTime: "2023-10-18T02:10:17.000+00:00",
-          //     label: 3,
-          //     name: "WaJueJi",
-          //     enname: "挖掘机",
-          //     prob: 84,
-          //     x: 747,
-          //     y: 141,
-          //     width: 375,
-          //     height: 465,
-          //     photoWidth: 1920,
-          //     photoHeight: 1080,
-          //     isread: 0,
-          //   },
-          //   {
-          //     id: 2000895,
-          //     termId: 10027,
-          //     displayName: "XYIGQ10D221000100",
-          //     lineId: 111,
-          //     lineName: "其它测试线路",
-          //     towerId: 25,
-          //     towerName: "湖南XYIGQ10D221000100",
-          //     channelId: 1,
-          //     channnelName: "通道1",
-          //     alias: null,
-          //     presetId: 255,
-          //     photoOrgId: 1697595002,
-          //     path: "http://47.96.238.157/photos/2023/10/18/00/XYIGQ10D221000100_1_FF_20231018101002.jpg",
-          //     alarmTime: "2023-10-18T02:10:02.000+00:00",
-          //     label: 3,
-          //     name: "WaJueJi",
-          //     enname: "挖掘机",
-          //     prob: 83,
-          //     x: 624,
-          //     y: 0,
-          //     width: 433,
-          //     height: 577,
-          //     photoWidth: 1920,
-          //     photoHeight: 1080,
-          //     isread: 0,
-          //   },
-          //   {
-          //     id: 2000894,
-          //     termId: 10027,
-          //     displayName: "XYIGQ10D221000100",
-          //     lineId: 111,
-          //     lineName: "其它测试线路",
-          //     towerId: 25,
-          //     towerName: "湖南XYIGQ10D221000100",
-          //     channelId: 2,
-          //     channnelName: "通道2",
-          //     alias: null,
-          //     presetId: 255,
-          //     photoOrgId: 1697594416,
-          //     path: "http://47.96.238.157/photos/2023/10/18/00/XYIGQ10D221000100_2_FF_20231018100016.jpg",
-          //     alarmTime: "2023-10-18T02:00:16.000+00:00",
-          //     label: 3,
-          //     name: "WaJueJi",
-          //     enname: "挖掘机",
-          //     prob: 84,
-          //     x: 745,
-          //     y: 143,
-          //     width: 375,
-          //     height: 462,
-          //     photoWidth: 1920,
-          //     photoHeight: 1080,
-          //     isread: 1,
-          //   },
-          //   {
-          //     id: 2000893,
-          //     termId: 10027,
-          //     displayName: "XYIGQ10D221000100",
-          //     lineId: 111,
-          //     lineName: "其它测试线路",
-          //     towerId: 25,
-          //     towerName: "湖南XYIGQ10D221000100",
-          //     channelId: 1,
-          //     channnelName: "通道1",
-          //     alias: null,
-          //     presetId: 255,
-          //     photoOrgId: 1697594402,
-          //     path: "http://47.96.238.157/photos/2023/10/18/00/XYIGQ10D221000100_1_FF_20231018100002.jpg",
-          //     alarmTime: "2023-10-18T02:00:02.000+00:00",
-          //     label: 3,
-          //     name: "WaJueJi",
-          //     enname: "挖掘机",
-          //     prob: 83,
-          //     x: 624,
-          //     y: 0,
-          //     width: 435,
-          //     height: 577,
-          //     photoWidth: 1920,
-          //     photoHeight: 1080,
-          //     isread: 0,
-          //   },
-          //   {
-          //     id: 2000892,
-          //     termId: 10027,
-          //     displayName: "XYIGQ10D221000100",
-          //     lineId: 111,
-          //     lineName: "其它测试线路",
-          //     towerId: 25,
-          //     towerName: "湖南XYIGQ10D221000100",
-          //     channelId: 2,
-          //     channnelName: "通道2",
-          //     alias: null,
-          //     presetId: 255,
-          //     photoOrgId: 1697593815,
-          //     path: "http://47.96.238.157/photos/2023/10/18/00/XYIGQ10D221000100_2_FF_20231018095015.jpg",
-          //     alarmTime: "2023-10-18T01:50:15.000+00:00",
-          //     label: 3,
-          //     name: "WaJueJi",
-          //     enname: "挖掘机",
-          //     prob: 85,
-          //     x: 747,
-          //     y: 141,
-          //     width: 382,
-          //     height: 465,
-          //     photoWidth: 1920,
-          //     photoHeight: 1080,
-          //     isread: 0,
-          //   },
-          //   {
-          //     id: 2000891,
-          //     termId: 10027,
-          //     displayName: "XYIGQ10D221000100",
-          //     lineId: 111,
-          //     lineName: "其它测试线路",
-          //     towerId: 25,
-          //     towerName: "湖南XYIGQ10D221000100",
-          //     channelId: 1,
-          //     channnelName: "通道1",
-          //     alias: null,
-          //     presetId: 255,
-          //     photoOrgId: 1697593802,
-          //     path: "http://47.96.238.157/photos/2023/10/18/00/XYIGQ10D221000100_1_FF_20231018095002.jpg",
-          //     alarmTime: "2023-10-18T01:50:02.000+00:00",
-          //     label: 3,
-          //     name: "WaJueJi",
-          //     enname: "挖掘机",
-          //     prob: 85,
-          //     x: 622,
-          //     y: 0,
-          //     width: 438,
-          //     height: 576,
-          //     photoWidth: 1920,
-          //     photoHeight: 1080,
-          //     isread: 0,
-          //   },
-          //   {
-          //     id: 2000890,
-          //     termId: 10027,
-          //     displayName: "XYIGQ10D221000100",
-          //     lineId: 111,
-          //     lineName: "其它测试线路",
-          //     towerId: 25,
-          //     towerName: "湖南XYIGQ10D221000100",
-          //     channelId: 2,
-          //     channnelName: "通道2",
-          //     alias: null,
-          //     presetId: 255,
-          //     photoOrgId: 1697593218,
-          //     path: "http://47.96.238.157/photos/2023/10/18/00/XYIGQ10D221000100_2_FF_20231018094018.jpg",
-          //     alarmTime: "2023-10-18T01:40:18.000+00:00",
-          //     label: 3,
-          //     name: "WaJueJi",
-          //     enname: "挖掘机",
-          //     prob: 85,
-          //     x: 743,
-          //     y: 140,
-          //     width: 384,
-          //     height: 466,
-          //     photoWidth: 1920,
-          //     photoHeight: 1080,
-          //     isread: 1,
-          //   },
-          //   {
-          //     id: 2000889,
-          //     termId: 10027,
-          //     displayName: "XYIGQ10D221000100",
-          //     lineId: 111,
-          //     lineName: "其它测试线路",
-          //     towerId: 25,
-          //     towerName: "湖南XYIGQ10D221000100",
-          //     channelId: 1,
-          //     channnelName: "通道1",
-          //     alias: null,
-          //     presetId: 255,
-          //     photoOrgId: 1697593202,
-          //     path: "http://47.96.238.157/photos/2023/10/18/00/XYIGQ10D221000100_1_FF_20231018094002.jpg",
-          //     alarmTime: "2023-10-18T01:40:02.000+00:00",
-          //     label: 3,
-          //     name: "WaJueJi",
-          //     enname: "挖掘机",
-          //     prob: 86,
-          //     x: 622,
-          //     y: 0,
-          //     width: 435,
-          //     height: 576,
-          //     photoWidth: 1920,
-          //     photoHeight: 1080,
-          //     isread: 1,
-          //   },
-          //   {
-          //     id: 2000887,
-          //     termId: 10027,
-          //     displayName: "XYIGQ10D221000100",
-          //     lineId: 111,
-          //     lineName: "其它测试线路",
-          //     towerId: 25,
-          //     towerName: "湖南XYIGQ10D221000100",
-          //     channelId: 2,
-          //     channnelName: "通道2",
-          //     alias: null,
-          //     presetId: 255,
-          //     photoOrgId: 1697592550,
-          //     path: "http://47.96.238.157/photos/2023/10/18/00/XYIGQ10D221000100_2_FF_20231018092910.jpg",
-          //     alarmTime: "2023-10-18T01:29:10.000+00:00",
-          //     label: 3,
-          //     name: "WaJueJi",
-          //     enname: "挖掘机",
-          //     prob: 69,
-          //     x: 955,
-          //     y: 131,
-          //     width: 410,
-          //     height: 589,
-          //     photoWidth: 1920,
-          //     photoHeight: 1080,
-          //     isread: 1,
-          //   },
-          //   {
-          //     id: 2000885,
-          //     termId: 10027,
-          //     displayName: "XYIGQ10D221000100",
-          //     lineId: 111,
-          //     lineName: "其它测试线路",
-          //     towerId: 25,
-          //     towerName: "湖南XYIGQ10D221000100",
-          //     channelId: 2,
-          //     channnelName: "通道2",
-          //     alias: null,
-          //     presetId: 255,
-          //     photoOrgId: 1697591415,
-          //     path: "http://47.96.238.157/photos/2023/10/18/00/XYIGQ10D221000100_2_FF_20231018091015.jpg",
-          //     alarmTime: "2023-10-18T01:10:15.000+00:00",
-          //     label: 3,
-          //     name: "WaJueJi",
-          //     enname: "挖掘机",
-          //     prob: 62,
-          //     x: 764,
-          //     y: 286,
-          //     width: 953,
-          //     height: 482,
-          //     photoWidth: 1920,
-          //     photoHeight: 1080,
-          //     isread: 1,
-          //   },
-          //   {
-          //     id: 2000884,
-          //     termId: 10027,
-          //     displayName: "XYIGQ10D221000100",
-          //     lineId: 111,
-          //     lineName: "其它测试线路",
-          //     towerId: 25,
-          //     towerName: "湖南XYIGQ10D221000100",
-          //     channelId: 1,
-          //     channnelName: "通道1",
-          //     alias: null,
-          //     presetId: 255,
-          //     photoOrgId: 1697591402,
-          //     path: "http://47.96.238.157/photos/2023/10/18/00/XYIGQ10D221000100_1_FF_20231018091002.jpg",
-          //     alarmTime: "2023-10-18T01:10:02.000+00:00",
-          //     label: 3,
-          //     name: "WaJueJi",
-          //     enname: "挖掘机",
-          //     prob: 70,
-          //     x: 612,
-          //     y: 199,
-          //     width: 983,
-          //     height: 602,
-          //     photoWidth: 1920,
-          //     photoHeight: 1080,
-          //     isread: 0,
-          //   },
-          //   {
-          //     id: 2000883,
-          //     termId: 10027,
-          //     displayName: "XYIGQ10D221000100",
-          //     lineId: 111,
-          //     lineName: "其它测试线路",
-          //     towerId: 25,
-          //     towerName: "湖南XYIGQ10D221000100",
-          //     channelId: 2,
-          //     channnelName: "通道2",
-          //     alias: null,
-          //     presetId: 255,
-          //     photoOrgId: 1697590816,
-          //     path: "http://47.96.238.157/photos/2023/10/18/00/XYIGQ10D221000100_2_FF_20231018090016.jpg",
-          //     alarmTime: "2023-10-18T01:00:16.000+00:00",
-          //     label: 3,
-          //     name: "WaJueJi",
-          //     enname: "挖掘机",
-          //     prob: 64,
-          //     x: 753,
-          //     y: 287,
-          //     width: 977,
-          //     height: 482,
-          //     photoWidth: 1920,
-          //     photoHeight: 1080,
-          //     isread: 0,
-          //   },
-          //   {
-          //     id: 2000882,
-          //     termId: 10027,
-          //     displayName: "XYIGQ10D221000100",
-          //     lineId: 111,
-          //     lineName: "其它测试线路",
-          //     towerId: 25,
-          //     towerName: "湖南XYIGQ10D221000100",
-          //     channelId: 1,
-          //     channnelName: "通道1",
-          //     alias: null,
-          //     presetId: 255,
-          //     photoOrgId: 1697590802,
-          //     path: "http://47.96.238.157/photos/2023/10/18/00/XYIGQ10D221000100_1_FF_20231018090002.jpg",
-          //     alarmTime: "2023-10-18T01:00:02.000+00:00",
-          //     label: 3,
-          //     name: "WaJueJi",
-          //     enname: "挖掘机",
-          //     prob: 74,
-          //     x: 622,
-          //     y: 199,
-          //     width: 987,
-          //     height: 604,
-          //     photoWidth: 1920,
-          //     photoHeight: 1080,
-          //     isread: 0,
-          //   },
-          //   {
-          //     id: 2000881,
-          //     termId: 10027,
-          //     displayName: "XYIGQ10D221000100",
-          //     lineId: 111,
-          //     lineName: "其它测试线路",
-          //     towerId: 25,
-          //     towerName: "湖南XYIGQ10D221000100",
-          //     channelId: 2,
-          //     channnelName: "通道2",
-          //     alias: null,
-          //     presetId: 255,
-          //     photoOrgId: 1697590215,
-          //     path: "http://47.96.238.157/photos/2023/10/18/00/XYIGQ10D221000100_2_FF_20231018085015.jpg",
-          //     alarmTime: "2023-10-18T00:50:15.000+00:00",
-          //     label: 3,
-          //     name: "WaJueJi",
-          //     enname: "挖掘机",
-          //     prob: 64,
-          //     x: 779,
-          //     y: 287,
-          //     width: 942,
-          //     height: 482,
-          //     photoWidth: 1920,
-          //     photoHeight: 1080,
-          //     isread: 0,
-          //   },
-          //   {
-          //     id: 2000880,
-          //     termId: 10027,
-          //     displayName: "XYIGQ10D221000100",
-          //     lineId: 111,
-          //     lineName: "其它测试线路",
-          //     towerId: 25,
-          //     towerName: "湖南XYIGQ10D221000100",
-          //     channelId: 1,
-          //     channnelName: "通道1",
-          //     alias: null,
-          //     presetId: 255,
-          //     photoOrgId: 1697590202,
-          //     path: "http://47.96.238.157/photos/2023/10/18/00/XYIGQ10D221000100_1_FF_20231018085002.jpg",
-          //     alarmTime: "2023-10-18T00:50:02.000+00:00",
-          //     label: 3,
-          //     name: "WaJueJi",
-          //     enname: "挖掘机",
-          //     prob: 71,
-          //     x: 597,
-          //     y: 199,
-          //     width: 1082,
-          //     height: 604,
-          //     photoWidth: 1920,
-          //     photoHeight: 1080,
-          //     isread: 0,
-          //   },
-          //   {
-          //     id: 2000878,
-          //     termId: 10027,
-          //     displayName: "XYIGQ10D221000100",
-          //     lineId: 111,
-          //     lineName: "其它测试线路",
-          //     towerId: 25,
-          //     towerName: "湖南XYIGQ10D221000100",
-          //     channelId: 1,
-          //     channnelName: "通道1",
-          //     alias: null,
-          //     presetId: 255,
-          //     photoOrgId: 1697589602,
-          //     path: "http://47.96.238.157/photos/2023/10/18/00/XYIGQ10D221000100_1_FF_20231018084002.jpg",
-          //     alarmTime: "2023-10-18T00:40:02.000+00:00",
-          //     label: 3,
-          //     name: "WaJueJi",
-          //     enname: "挖掘机",
-          //     prob: 70,
-          //     x: 618,
-          //     y: 201,
-          //     width: 1292,
-          //     height: 612,
-          //     photoWidth: 1920,
-          //     photoHeight: 1080,
-          //     isread: 0,
-          //   },
-          //   {
-          //     id: 2000876,
-          //     termId: 10027,
-          //     displayName: "XYIGQ10D221000100",
-          //     lineId: 111,
-          //     lineName: "其它测试线路",
-          //     towerId: 25,
-          //     towerName: "湖南XYIGQ10D221000100",
-          //     channelId: 1,
-          //     channnelName: "通道1",
-          //     alias: null,
-          //     presetId: 255,
-          //     photoOrgId: 1697589002,
-          //     path: "http://47.96.238.157/photos/2023/10/18/00/XYIGQ10D221000100_1_FF_20231018083002.jpg",
-          //     alarmTime: "2023-10-18T00:30:02.000+00:00",
-          //     label: 3,
-          //     name: "WaJueJi",
-          //     enname: "挖掘机",
-          //     prob: 68,
-          //     x: 618,
-          //     y: 200,
-          //     width: 1290,
-          //     height: 613,
-          //     photoWidth: 1920,
-          //     photoHeight: 1080,
-          //     isread: 0,
-          //   },
-          //   {
-          //     id: 2000874,
-          //     termId: 10027,
-          //     displayName: "XYIGQ10D221000100",
-          //     lineId: 111,
-          //     lineName: "其它测试线路",
-          //     towerId: 25,
-          //     towerName: "湖南XYIGQ10D221000100",
-          //     channelId: 1,
-          //     channnelName: "通道1",
-          //     alias: null,
-          //     presetId: 255,
-          //     photoOrgId: 1697588402,
-          //     path: "http://47.96.238.157/photos/2023/10/18/00/XYIGQ10D221000100_1_FF_20231018082002.jpg",
-          //     alarmTime: "2023-10-18T00:20:02.000+00:00",
-          //     label: 3,
-          //     name: "WaJueJi",
-          //     enname: "挖掘机",
-          //     prob: 65,
-          //     x: 620,
-          //     y: 200,
-          //     width: 1286,
-          //     height: 613,
-          //     photoWidth: 1920,
-          //     photoHeight: 1080,
-          //     isread: 0,
-          //   },
-          // ];
-
           this.picList = res.data.list;
           this.alarmList = res.data.list.alarmlist;
           this.total = res.data.total;