图片轮巡添加历史图片

src/components/common/Sidebar.vue

@@ -53,11 +53,11 @@ export default {
     return {
       activeIndex: "/realTimeMonitor",
       items: [
-        // {
-        //   icon: "el-icon-s-home",
-        //   index: "/videoHistory",
-        //   title: "首页",
-        // },
+        {
+          icon: "el-icon-s-home",
+          index: "/videoHistory",
+          title: "首页",
+        },
         {
           icon: "el-icon-camera",
           index: "/realTimeMonitor",

src/views/alarmHandling/index.vue

@@ -398,7 +398,7 @@ export default {
       selectRow: {},
       alarmLoading: false,
       canvasloading: false,
-      tableShow: true, //表格展示
+      tableShow: false, //表格展示
       zoomD: 1,
       canvansdata: "",
       current: 0,

src/views/pictureRotation/index.vue

@@ -34,8 +34,8 @@
             v-if="index < colNum * i && index >= colNum * (i - 1)"
             :key="'col-' + index"
           >
-            <div class="imgList">
-              <viewer
+            <div class="imgList" @click="handleShowHistory(item)">
+              <!-- <viewer
                 :options="OptionssalseImg"
                 v-if="item.path !== null && item.path.indexOf('videos') == -1"
                 class="bigpic"
@@ -46,7 +46,18 @@
                 "
               >
                 <img :src="item.path + '!1366x768'" />
-              </viewer>
+              </viewer> -->
+              <div
+                v-if="item.path !== null && item.path.indexOf('videos') == -1"
+                class="bigpic"
+                :style="
+                  item.path
+                    ? 'backgroundImage:url(' + item.path + '!128x72)'
+                    : ''
+                "
+              >
+                <img :src="item.path + '!1366x768'" />
+              </div>
               <div
                 class="bigpic"
                 v-else-if="
@@ -63,21 +74,19 @@
               <div class="bigpic" v-else>
                 <img src="../../assets/img/nopic.jpg" />
               </div>
-              <p class="infoTop">
-                {{ item.linename }}-{{ item.towername }}-{{
+              <div class="picInfo">
+                <p>
+                  {{ item.linename }}-{{ item.towername }}-（{{
                     item.alias !== null && item.alias !== ""
                       ? item.alias
                       : item.channnelname
-                }}
-                <!-- {{
-                  item.displayname !== null && item.displayname !== ""
-                    ? item.displayname
-                    : item.cmdid
-                }}- -->
+                  }}）
                 </p>
-              <p class="infoBottom" v-if="item.photoTime !== null">
-                {{ $moment(item.photoTime).format("yy-MM-DD HH:mm:ss") }} 
+                <p class="timeinfo" v-if="item.photoTime !== null">
+                  {{ $moment(item.photoTime).format("YYYY-MM-DD HH:mm:ss") }}
                 </p>
+                <p class="timeinfo" v-else>无抓拍</p>
+              </div>
             </div>
           </el-col>
         </el-row>
@@ -141,12 +150,37 @@
         <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>
+      <carouselChart
+        ref="carouselpic"
+        :terminalPhoto="terminalPhoto"
+        v-if="terminalPhoto.length > 0"
+        v-loading="historyPicLoading"
+      ></carouselChart>
+    </el-dialog>
   </div>
 </template>
 <script>
-import { getPictureList } from "@/utils/api/index";
-import qs from "qs";
+import { getPictureList, getTerminalPhotoListJoggle } from "@/utils/api/index";
+import carouselChart from "../components/carouselChart.vue";
+
 export default {
+  components: {
+    carouselChart,
+  },
   data() {
     return {
       OptionssalseImg: {
@@ -200,8 +234,8 @@ export default {
       //画面布局
       rowNum: "",
       colNum: "",
-      rowradio: "2",
-      colradio: "2",
+      rowradio: "4",
+      colradio: "4",
       selLayout: 1,
       options: [
         {
@@ -213,9 +247,55 @@ export default {
           label: "倒序",
         },
       ],
+
+      //点击查看历史图片
+      picInfoData: {}, //获取当前图片的信息
+      historyPicdialog: false,
+      historyPicLoading: false,
+      terminalPhoto: [], //获取装置当前图片数据
+      nopicPath: require("@/assets/img/nopic.jpg"),
     };
   },
   methods: {
+    //点击图片弹出历史图
+    handleShowHistory(item) {
+      console.log(item);
+      this.picInfoData = item;
+      console.log(this.picInfoData);
+      this.historyPicdialog = true;
+
+      //this.getTerminalPhotoList(item.cmdid);
+      this.getTerminalPhotoList(item.channelid, item.photoTime, item.termid);
+    },
+    //获取图片
+    getTerminalPhotoList(channelid, date, termId) {
+      this.terminalPhoto = [];
+
+      this.historyPicLoading = true;
+      getTerminalPhotoListJoggle({
+        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,
+              },
+            ];
+          } else {
+            this.terminalPhoto = res.data.list;
+          }
+        })
+        .catch((err) => {
+          console.log(err); //代码错误、请求失败捕获
+        });
+    },
     setbtn() {
       this.isRuning = false;
       this.pauseCountdown();
@@ -409,29 +489,20 @@ export default {
         height: 100%;
         cursor: pointer;
       }
-      .infoTop {
+      .picInfo {
         position: absolute;
-        bottom: 28px;
-        left: 0px;
+        background: #169e8ca1;
+        color: #fff;
+        height: auto;
         font-size: 14px;
-        background: linear-gradient(180deg, #00eaff 10%, @color-primary 100%);
-        color: @color-white;
-        font-weight: normal;
-        margin-top: 2px;
-        padding-left: 5px;
-        padding-right: 5px;
+        left: 0;
+        bottom: 0;
+        width: 100%;
+        text-align: center;
+        .timeinfo {
+          margin-top: 4px;
+          margin-bottom: 4px;
         }
-      .infoBottom {
-        position: absolute;
-        bottom: 4px;
-        color: @color-white;
-        left: 0px;
-        font-size: 14px;
-        background: linear-gradient(180deg, #00eaff 10%, @color-primary 100%);
-        font-weight: normal;
-        margin-top: 2px;
-        padding-left: 5px;
-        padding-right: 5px;
       }
     }
   }
@@ -462,6 +533,23 @@ export default {
       }
     }
   }
+  .showDialogHistoryPic {
+    .el-dialog__body {
+      height: 768px;
+      .title {
+        height: 32px;
+        padding-left: 12px;
+        line-height: 32px;
+        color: #fff;
+        font-size: 14px;
+        background: linear-gradient(180deg, #4cdbc8 10%, #128071 100%);
+        text-align: center;
+      }
+      .thumb-example {
+        //height: 100%;
+      }
+    }
+  }
 }
 [v-cloak] {
   display: none;