事件详情 附件展示

src/components/TcPlayer.vue

@@ -0,0 +1,95 @@
+<template>
+  <div
+    class="player"
+    :style="'width:' + widthHeigt[0] + '%' + 'height:' + widthHeigt[1] + '%'">
+    <div class="video" id="tcplayer" ref="tcplayer"></div>
+  </div>
+</template>
+
+<script>
+import { TcPlayer } from '@/api/components/tcplayer'
+
+export default {
+  name: 'TcPlayer',
+  components: {},
+  props: {
+    widthHeigt: {
+      type: Array,
+      default: () => {
+        return [300, 100]
+      }
+    },
+    playVideo: ''
+  },
+  watch: {
+    playVideo: function(newVal) {
+      this.play()
+    }
+  },
+  methods: {
+    play() {
+      if(this.playVideo==''||this.playVideo==null){
+        return
+      }
+      let dom = document.getElementById('tcplayer')
+      // let dom = this.$refs.tcplayer;
+      // console.log(dom);
+      while (dom.hasChildNodes()) {
+        //当div下还存在子节点时 循环继续
+        dom.removeChild(dom.firstChild)
+        // this.player.destroy();
+      }
+      // console.log(JSON.stringify(this.playVideo));
+      let objectString = JSON.stringify(this.playVideo)
+      if (objectString != '{}') {
+        this.player = new TcPlayer('tcplayer', {
+          m3u8: '',
+          m3u8_sd: this.playVideo, //请替换成实际可用的播放地址
+          m3u8_hd: '',
+          // flv_sd: this.playVideo.flv_sd, //请替换成实际可用的播放地址
+          // flv_hd: this.playVideo.flv_hd, //请替换成实际可用的播放地址
+          autoplay: true, //iOS 下 safari 浏览器，以及大部分移动端浏览器是不开放视频自动播放这个能力的
+          // poster: "http://www.test.com/myimage.jpg",
+          flash: false,
+          h5_flv: true,
+          width: this.widthHeigt[0] + '%', //视频的显示宽度，请尽量使用视频分辨率宽度
+          height: this.widthHeigt[1] + '%', //视频的显示高度，请尽量使用视频分辨率高度
+          live: true,
+          volume: 0,
+          clarity: 'sd',
+          wording: {
+            2: '摄像头连接网络不稳定',
+            1002: '摄像头连接网络不稳定，请切换清晰度'
+          }
+        })
+      }
+    },
+    destroyed() {
+      // 页面销毁，同时也销毁 TcPlayer
+      this.player.destroy()
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.player {
+  width: 100%;
+  height: 100%;
+
+  ::v-deep .video {
+    width: 100%;
+    height: 100%;
+
+    .vcp-player {
+      width: 100%;
+      height: 100%;
+
+      video {
+        width: 100%;
+        height: 100%;
+        object-fit: fill;
+      }
+    }
+  }
+}
+</style>

src/views/eventdetailsdialog.vue

@@ -93,17 +93,67 @@
                                       {{ item.logContent }}
                                     </div>
                                     <div>
-                                      <el-image :src="itemfile.fileUrl" v-if="isAssetTypeAnImage(itemfile.fileUrl)"
-                                                :preview-src-list="assetTypeAnImage(item.attachs)"
-                                                style="width:3rem; height:3rem;margin: 2px;"
-                                                v-for="(itemfile,index1) in item.fileVOs">
-                                      </el-image>
-                                      <br>
-                                      <el-link :href="itemfile.fileUrl" :underline="false" target="_blank"
-                                               v-for="(itemfile,index1) in item.fileVOs"
-                                               v-if="!isAssetTypeAnImage(itemfile.fileUrl)">
-                                        <span class="el-icon-document"> {{ itemfile.fileName }} </span>
-                                      </el-link>
+                                      <router-link to="#" @click.native="clickFile(itemfile.fileUrl,itemfile.fileName)"
+                                                   v-for="(itemfile,indexfile) in item.fileVOs">
+                                        <!-- 使用el-image的:src需要加require -->
+                                        <!--                                        <img v-if="isAssetTypeAnImage(itemfile.fileUrl)"-->
+                                        <!--                                             style="width:3rem; height:3rem;margin: 2px;"-->
+                                        <!--                                             :src="itemfile.fileUrl"-->
+                                        <!--                                             :title="itemfile.fileName">-->
+                                        <!--                                        </img>-->
+                                        <el-image :src="itemfile.fileUrl" v-if="isAssetTypeAnImage(itemfile.fileUrl)"
+                                                  :preview-src-list="assetTypeAnImage(item.attachs)"
+                                                  style="width:3rem; height:3rem;margin: 2px;"
+                                                  :title="itemfile.fileName">
+                                        </el-image>
+                                        <img v-else-if="isAssetTypeAnMp4(itemfile.fileUrl)"
+                                             style="width:3rem; height:3rem;margin: 2px;"
+                                             :src="require('@/assets/fileTypeImage/mp4.png')"
+                                             :title="itemfile.fileName">
+                                        </img>
+                                        <img v-else-if="isAssetTypeAnWord(itemfile.fileUrl)"
+                                             style="width:3rem; height:3rem;margin: 2px;"
+                                             :src="require('@/assets/fileTypeImage/word.png')"
+                                             :title="itemfile.fileName">
+                                        </img>
+                                        <img v-else-if="isAssetTypeAnExcel(itemfile.fileUrl)"
+                                             style="width:3rem; height:3rem;margin: 2px;"
+                                             :src="require('@/assets/fileTypeImage/excel.png')"
+                                             :title="itemfile.fileName">
+                                        </img>
+                                        <img v-else
+                                             style="width:3rem; height:3rem;margin: 2px;"
+                                             :src="require('@/assets/fileTypeImage/file.png')"
+                                             :title="itemfile.fileName">
+                                        </img>
+                                      </router-link>
+                                      <!--                                      <el-image :src="itemfile.fileUrl" v-if="isAssetTypeAnImage(itemfile.fileUrl)"-->
+                                      <!--                                                :preview-src-list="assetTypeAnImage(item.attachs)"-->
+                                      <!--                                                style="width:3rem; height:3rem;margin: 2px;"-->
+                                      <!--                                                >000-->
+                                      <!--                                      </el-image>-->
+                                      <!--                                      <el-image :src="require('@/assets/fileTypeImage/mp4.png')" v-else-if="isAssetTypeAnMp4(itemfile.fileUrl)"-->
+                                      <!--                                                style="width:3rem; height:3rem;margin: 2px;"-->
+                                      <!--                                                v-for="(itemfile,index1) in item.fileVOs">111-->
+                                      <!--                                      </el-image>-->
+                                      <!--                                      <el-image :src="require('@/assets/fileTypeImage/word.png')" v-else-if="isAssetTypeAnWord(itemfile.fileUrl)"-->
+                                      <!--                                                style="width:3rem; height:3rem;margin: 2px;"-->
+                                      <!--                                                v-for="(itemfile,index1) in item.fileVOs">222-->
+                                      <!--                                      </el-image>-->
+                                      <!--                                      <el-image :src="require('@/assets/fileTypeImage/excel.png')" v-else-if="isAssetTypeAnExcel(itemfile.fileUrl)"-->
+                                      <!--                                                style="width:3rem; height:3rem;margin: 2px;"-->
+                                      <!--                                                v-for="(itemfile,index1) in item.fileVOs">333-->
+                                      <!--                                      </el-image>-->
+                                      <!--                                      <el-image :src="require('@/assets/fileTypeImage/file.png')" v-else-->
+                                      <!--                                                style="width:3rem; height:3rem;margin: 2px;"-->
+                                      <!--                                                v-for="(itemfile,index1) in item.fileVOs">444-->
+                                      <!--                                      </el-image>-->
+                                      <!--                                      <br>-->
+                                      <!--                                      <el-link :href="itemfile.fileUrl" :underline="false" target="_blank"-->
+                                      <!--                                               v-for="(itemfile,index1) in item.fileVOs"-->
+                                      <!--                                               v-if="!isAssetTypeAnImage(itemfile.fileUrl)">-->
+                                      <!--                                        <span class="el-icon-document"> {{ itemfile.fileName }} </span>-->
+                                      <!--                                      </el-link>-->
                                     </div>
                                   </div>
                                 </div>
@@ -820,11 +870,15 @@
       </div>
     </el-dialog>
     <!-- 添加区域标记 -->
-    <el-dialog title="火灾区域"  :visible.sync="regionalFlagOpen" width="1000px">
+    <el-dialog title="火灾区域" :visible.sync="regionalFlagOpen" width="1000px">
       <areaSupermap ref="fireAreaSupermap" v-if="regionalFlagOpen" style="width: 100%;height:74vh"
                     :mapDiv="'fireAreaSuperMap'" :mapSite="{doubleClickZoom:false}" :codes="['9fa5']"
                     :isSideBySide="false" :showAreaLatLng="showAreaLatLng"></areaSupermap>
     </el-dialog>
+    <!-- 图片，视频预览 -->
+    <el-dialog title="视频预览" :visible.sync="showTcPlayer" customClass="customWidthMp4" append-to-body>
+      <TcPlayer ref="TcPlayer" :playVideo="playVideo" :widthHeigt="[100,100]"></TcPlayer>
+    </el-dialog>
   </div>
 </template>
 
@@ -835,6 +889,7 @@ import vheader from '@/components/v-header.vue' //一体化共用头部
 import vBottomMenu from '@/components/vBottomMenu.vue' //一体化公共底部菜单
 import eventLogUpload from '@/views/eventLogUpload.vue' //日志上传文件
 import areaSupermap from '@/components/supermap'//区域标记地图
+import TcPlayer from '@/components/TcPlayer' //视频预览
 import {
   getEventDetail,
   sendEventLog,
@@ -863,10 +918,13 @@ export default {
     vBottomMenu,
     supermapDialog,
     eventLogUpload,
-    areaSupermap
+    areaSupermap,
+    TcPlayer
   },
   data() {
     return {
+      playVideo: '',//视频预览地址
+      showTcPlayer: false,//视频预览弹窗
       regionalFlagOpen: false,//区域标记
       //区域标记
       regionalFlagObj: {
@@ -1168,6 +1226,33 @@ export default {
       let aa = ['png', 'jpg', 'jpeg', 'bmp', 'gif', 'webp', 'psd', 'svg', 'tiff'].indexOf(ext.toLowerCase()) !== -1
       return aa
     },
+    // 判断是否为视频
+    isAssetTypeAnMp4(filePath) {
+      //获取最后一个.的位置
+      var index = filePath.lastIndexOf('.')
+      //获取后缀
+      var ext = filePath.substr(index + 1)
+      let aa = ['mp4'].indexOf(ext.toLowerCase()) !== -1
+      return aa
+    },
+    // 判断是否为Word
+    isAssetTypeAnWord(filePath) {
+      //获取最后一个.的位置
+      var index = filePath.lastIndexOf('.')
+      //获取后缀
+      var ext = filePath.substr(index + 1)
+      let aa = ['doc', 'docx'].indexOf(ext.toLowerCase()) !== -1
+      return aa
+    },
+    // 判断是否为Excel
+    isAssetTypeAnExcel(filePath) {
+      //获取最后一个.的位置
+      var index = filePath.lastIndexOf('.')
+      //获取后缀
+      var ext = filePath.substr(index + 1)
+      let aa = ['xlsx', 'xls', 'csv'].indexOf(ext.toLowerCase()) !== -1
+      return aa
+    },
     // 获取文件名称
     getFileName(name) {
       if (name.lastIndexOf('/') > -1) {
@@ -1176,6 +1261,22 @@ export default {
         return ''
       }
     },
+    clickFile(fileUrl, fileName) {
+      if (this.isAssetTypeAnImage(fileUrl)) {
+        return
+      } else if (this.isAssetTypeAnMp4(fileUrl)) {
+        this.showTcPlayer = true
+        setTimeout(() => {
+          this.playVideo = fileUrl
+        }, 500)
+      } else {
+        let a = document.createElement('a')
+        a.download = fileName
+        a.href = fileUrl
+        a.target="_blank"
+        a.click()
+      }
+    },
     setValue(event) {
       //签收选择部门
       this.sendDeptName = event.label
@@ -1223,6 +1324,11 @@ export default {
       this.resetTable1()
       this.resetTable2()
     },
+    cancelEventConfirm_mp4() {
+      //关闭视频窗口
+      this.playVideo=''
+      this.$refs.TcPlayer.destroyed()
+    },
     resetTable1() {
       this.table1 = {
         reportUnit: null,
@@ -1441,7 +1547,7 @@ export default {
             czlx: '',
             forestFireLoss: { eventId: this.eventCode, table1: this.table1 },
             fireInformation: { eventId: this.eventCode, table2: this.table2 },
-            array:this.regionalFlagObj.array
+            array: this.regionalFlagObj.array
           }
           updateCentereventTEventcatalogueStatus(param).then(res => {
             if (res.code == 200) {
@@ -1694,7 +1800,7 @@ export default {
       })
     },
     regionalFlagAdd: function() {//火灾区域
-      this.regionalFlagObj.array=[]
+      this.regionalFlagObj.array = []
       this.regionalFlagOpen = true
     },
     showAreaLatLng: function(latlng) {//获取火灾区域经纬度
@@ -1709,6 +1815,12 @@ export default {
 <style lang="scss" scoped>
 @import '@/assets/styles/base.scss';
 
+//弹层样式
+.customWidthMp4 {
+  width: 800px !important;
+  height: 500px !important;
+}
+
 .tree-border {
   border: 1px $barBorder;