zc

src/components/fullScreenView/fullScreenView.vue

@@ -49,7 +49,7 @@
           <p v-if="imgNullType" class="img-null-text" :style="'height:'+maxHeight+'px;width:'+maxWidth+'px;line-height:'+maxHeight+'px;'">加载失败...</p>
         </transition>
       </div>
-      <div class="list-img-min-box scrollbar-box"
+      <div class="list-img-min-box full-screen-scrollbar-box"
            v-if="fullScreenViewProps[1]"
            ref="listImgBox"
            @mousedown.stop="listBoxDragDown"
@@ -489,4 +489,23 @@
       }
     }
   }
+
+  //竖向
+  .full-screen-scrollbar-box{
+    overflow-y: scroll;
+  }
+  .full-screen-scrollbar-box::-webkit-scrollbar{
+    width: 6px;     /*高宽分别对应横竖滚动条的尺寸*/
+    height: 6px;
+  }
+  .full-screen-scrollbar-box::-webkit-scrollbar-thumb{
+    border-radius: 5px;
+    -webkit-box-shadow: inset 0 0 5px rgba(255,255,255,0.1);
+    background:  rgba(255,255,255,0.1);
+  }
+  .full-screen-scrollbar-box::-webkit-scrollbar-track{
+    -webkit-box-shadow: inset 0 0 5px #303030;
+    border-radius: 0;
+    background: #303030;
+  }
 </style>

src/views/emergencyManagement/planExecuteRecord/planExecuteRecordDetail.vue

@@ -43,12 +43,14 @@
         </div>
         <div class="addPage_b_t_c">
           <div class="small_title">现场记录<i>(预案发生一个月后将自动清理）</i></div>
-          <div class="addPage_b_t_c_b" v-if="form">
-            <!--            <img src="@/assets/images/login-background.jpg">-->
-            <video class="video" :src="form.recordVideo?form.recordVideo:''" autoplay controls></video>
+          <p class="null-text-p">无</p>
+          <div class="addPage_b_t_c_b" v-if="form.recordPhoto[0]">
+            <el-carousel height="200px" direction="vertical" :autoplay="false">
+              <el-carousel-item v-for="(item,index) in form.recordPhoto" :key="item">
+                <img @click="fullScreenViewClick(index)" style="height:222px;width:380px;cursor: pointer;" :src="item">
+              </el-carousel-item>
+            </el-carousel>
             <div class="video-button-box">
-              <!--<p></p>-->
-              <!--<p></p>-->
             </div>
           </div>
         </div>
@@ -104,15 +106,19 @@
         </div>
       </div>
     </div>
+    <fullScreenView :fullScreenViewProps="fullScreenViewProps" ref="fullScreenView"></fullScreenView>
   </div>
 </template>
 <script>
   import {
     laboratoryEventFindByEventId
   } from '@/api/emergencyManagement/index'
-
+  import fullScreenView from "@/components/fullScreenView/fullScreenView.vue";
   export default {
     name: 'addPage',
+    components: {
+      fullScreenView,
+    },
     props: {
       pageData: {}
     },
@@ -123,7 +129,8 @@
         form: {
           messageLogVoList:[],
         },
-        msgsPush: []
+        msgsPush: [],
+        fullScreenViewProps:[],
       }
     },
     created() {
@@ -139,6 +146,7 @@
       },
       laboratoryEventFindByEventId() {
         laboratoryEventFindByEventId({ eventId: this.pageData.id }).then(response => {
+          response.data.recordPhoto = response.data.recordPhoto ? response.data.recordPhoto.split(',') : [];
           if (response.data.eventLogVoList[0]) {
             response.data.eventLogVoList.forEach((item) => {
               item.sensorJson = JSON.parse(item.sensorJson)
@@ -147,6 +155,12 @@
           this.$set(this, 'form', response.data)
         })
       },
+      fullScreenViewClick(index){
+        this.$set(this,'fullScreenViewProps',this.form.recordPhoto);
+        this.$nextTick(()=>{
+          this.$refs['fullScreenView'].initialize(index);
+        })
+      },
     }
 
   }
@@ -254,6 +268,16 @@
         .addPage_b_t_c {
           width: 380px;
           margin:0 90px 0 30px;
+          .null-text-p{
+            text-align: center;
+            width: 380px;
+            height: 222px;
+            line-height:222px;
+            font-size:16px;
+            color:#999;
+            border:1px solid #dedede;
+            border-radius:4px;
+          }
           .addPage_b_t_c_b {
             width: 380px;
             height: 222px;