事件详情 附件展示

src/components/TcPlayer.vue

@@ -1,7 +1,7 @@
 <template>
   <div
     class="player"
-    :style="'width:' + widthHeigt[0] + '%' + 'height:' + widthHeigt[1] + '%'">
+    :style="'width:100%' + 'height:100%'">
     <div class="video" id="tcplayer" ref="tcplayer"></div>
   </div>
 </template>
@@ -16,7 +16,7 @@ export default {
     widthHeigt: {
       type: Array,
       default: () => {
-        return [300, 100]
+        return [70, 70]
       }
     },
     playVideo: ''

src/components/vBottomMenu.vue

@@ -268,17 +268,40 @@
                                     {{ 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>
                                   </div>
                                 </div>
                               </div>
@@ -346,6 +369,10 @@
         </el-button>
       </el-form>
     </el-dialog>
+    <!-- 图片，视频预览 -->
+    <el-dialog title="视频预览" :visible.sync="showTcPlayer" width="40%" append-to-body>
+      <TcPlayer ref="TcPlayer" :playVideo="playVideo" :widthHeigt="[70,70]"></TcPlayer>
+    </el-dialog>
   </div>
 </template>
 
@@ -360,10 +387,12 @@ import {
   treeselectAll as deptTreeselect
 } from '@/api/system/dept'
 import supermapTaskDialog from '@/components/supermap' //超图
+import TcPlayer from '@/components/TcPlayer' //视频预览
 
 export default {
   components: {
-    supermapTaskDialog
+    supermapTaskDialog,
+    TcPlayer
   },
   watch: {
     filterbanText(val) {
@@ -379,6 +408,8 @@ export default {
   },
   data() {
     return {
+      playVideo: '',//视频预览地址
+      showTcPlayer: false,//视频预览弹窗
       filterbanText: '',
       filterchangText: '',
       filterbanList: [],
@@ -532,6 +563,50 @@ export default {
       }
       return imageList
     },
+    // 返回图片列表
+    assetTypeAnImage(filePath) {
+      let imageList = []
+      if (filePath != null && filePath.length > 0) {
+        for (let i = 0; i < filePath.length; i++) {
+          //获取最后一个.的位置
+          var index = filePath[i].lastIndexOf('.')
+          //获取后缀
+          var ext = filePath[i].substr(index + 1)
+          let aa = ['png', 'jpg', 'jpeg', 'bmp', 'gif', 'webp', 'psd', 'svg', 'tiff'].indexOf(ext.toLowerCase()) !== -1
+          if (aa) {
+            imageList.push(filePath[i])
+          }
+        }
+      }
+      return imageList
+    },
+    // 判断是否为视频
+    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
+    },
     // 判断是否为图片
     isAssetTypeAnImage(filePath) {
       //获取最后一个.的位置
@@ -549,6 +624,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.centerTaskTaskDepts = []
       //签收选择部门

src/views/eventdetailsdialog.vue

@@ -127,33 +127,6 @@
                                              :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>
@@ -876,8 +849,8 @@
                     :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 title="视频预览" :visible.sync="showTcPlayer" width="40%" customClass="customWidthMp4">
+      <TcPlayer ref="TcPlayer" :playVideo="playVideo" :widthHeigt="[70,70]"></TcPlayer>
     </el-dialog>
   </div>
 </template>
@@ -1816,10 +1789,10 @@ export default {
 @import '@/assets/styles/base.scss';
 
 //弹层样式
-.customWidthMp4 {
-  width: 800px !important;
-  height: 500px !important;
-}
+//.customWidthMp4 {
+//  width: 70px !important;
+//  height: 70px !important;
+//}
 
 .tree-border {
   border: 1px $barBorder;