轮巡

src/views/pictureRotation/index.vue

@@ -34,7 +34,7 @@
             v-if="index < colNum * i && index >= colNum * (i - 1)"
             :key="'col-' + index"
           >
-            <div class="imgList">
+            <div class="imgList" @click="handleShowHistory(item)">
               <!-- <viewer
                 :options="OptionssalseImg"
                 v-if="item.path !== null && item.path.indexOf('videos') == -1"
@@ -48,7 +48,6 @@
                 <img :src="item.path + '!1366x768'" />
               </viewer> -->
               <div
-                @click="handleShowHistory(item)"
                 v-if="item.path !== null && item.path.indexOf('videos') == -1"
                 class="bigpic"
                 :style="
@@ -60,7 +59,6 @@
                 <img :src="item.path + '!1366x768'" />
               </div>
               <div
-                @click="handleShowHistory(item)"
                 class="bigpic"
                 v-else-if="
                   item.path !== null && item.path.indexOf('videos') !== -1
@@ -74,7 +72,7 @@
                 ></video>
               </div>
               <div class="bigpic" v-else>
-                <img src="../../assets/img/nopic.jpg" style="cursor: default" />
+                <img src="../../assets/img/nodatapic2.jpg" />
               </div>
               <div class="picInfo">
                 <p>
@@ -152,7 +150,7 @@
         <el-button type="primary" @click="submitForm()">确 定</el-button>
       </div>
     </el-dialog>
-    <el-dialog
+    <!-- <el-dialog
       title="历史图片"
       :visible.sync="historyPicdialog"
       width="1366px"
@@ -166,22 +164,49 @@
             : picInfoData.channnelname
         }}） {{ $moment(picInfoData.photoTime).format("YYYY-MM-DD ") }}
       </div>
-      <carouselChart
+      <carouselChartmore
         ref="carouselpic"
         :terminalPhoto="terminalPhoto"
         v-if="terminalPhoto.length > 0"
         v-loading="historyPicLoading"
-      ></carouselChart>
-    </el-dialog>
+      ></carouselChartmore>
+    </el-dialog> -->
+    <div class="morePicBox" v-if="historyPicdialog">
+      <div class="headTitle">
+        <div class="info">
+          <p>
+            {{ picInfoData.linename }} - {{ picInfoData.towername }} - （{{
+              picInfoData.alias !== null && picInfoData.alias !== ""
+                ? picInfoData.alias
+                : picInfoData.channnelname
+            }}）{{ $moment(picInfoData.photoTime).format("YYYY-MM-DD ") }}
+          </p>
+          <!-- <p class="timeinfo" v-if="item.mediatype !== null">
+          {{ $moment(item.photoTime).format("YYYY-MM-DD HH:mm:ss") }}
+        </p> -->
+        </div>
+        <div class="closeBox" @click="handleclose">
+          <i class="el-icon-close"></i>
+        </div>
+      </div>
+      <div class="picmain">
+        <carouselChartmore
+          ref="carouselpic"
+          :terminalPhoto="terminalPhoto"
+          v-if="terminalPhoto.length > 0"
+          v-loading="historyPicLoading"
+        ></carouselChartmore>
+      </div>
+    </div>
   </div>
 </template>
 <script>
 import { getPictureList, getTerminalPhotoListJoggle } from "@/utils/api/index";
-import carouselChart from "../components/carouselChart.vue";
+import carouselChartmore from "../components/carouselChartmore.vue";
 
 export default {
   components: {
-    carouselChart,
+    carouselChartmore,
   },
   data() {
     return {
@@ -265,10 +290,15 @@ export default {
       this.picInfoData = item;
       console.log(this.picInfoData);
       this.historyPicdialog = true;
-
+      if (item.photoTime == null) {
+        item.photoTime = new Date().getTime();
+      }
       //this.getTerminalPhotoList(item.cmdid);
       this.getTerminalPhotoList(item.channelid, item.photoTime, item.termid);
     },
+    handleclose() {
+      this.historyPicdialog = false;
+    },
     //获取图片
     getTerminalPhotoList(channelid, date, termId) {
       this.terminalPhoto = [];
@@ -538,35 +568,39 @@ export default {
       }
     }
   }
-  .showDialogHistoryPic {
-    display: flex;
-    align-items: center;
-    justify-content: center;
 
-    .el-dialog {
-      width: 70% !important;
-      height: 90%;
-      transform: none;
-      margin: auto;
-      left: auto;
-      top: auto;
-    }
-
-    .el-dialog__body {
-      height: calc(100% - 70px);
-      .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%;
+  .morePicBox {
+    position: fixed;
+    width: 100%;
+    height: 100%;
+    background: #fff;
+    top: 0px;
+    left: 0px;
+    z-index: 99999;
+    .headTitle {
+      height: 40px;
+      padding-left: 18px;
+      padding-right: 18px;
+      line-height: 40px;
+      color: #fff;
+      font-size: 14px;
+      background: linear-gradient(180deg, #4cdbc8 10%, #128071);
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      .closeBox {
+        width: 24px;
+        height: 24px;
+        align-items: center;
+        display: flex;
+        justify-content: center;
+        cursor: pointer;
       }
     }
+    .picmain {
+      width: 100%;
+      height: calc(100% - 10px);
+    }
   }
 }
 [v-cloak] {