1204

src/main/vue/src/pages/ClickHistorys.vue

@@ -27,7 +27,6 @@
       ></el-table-column>
       <el-table-column label="操作" align="center" fixed="right" min-width="150">
         <template slot-scope="scope">
-          <el-button @click="editRow(scope.row)" type="primary" size="mini" plain>编辑</el-button>
           <el-button @click="deleteRow(scope.row)" type="danger" size="mini" plain>删除</el-button>
         </template>
       </el-table-column>

src/main/vue/src/pages/FileInfos.vue

@@ -57,7 +57,25 @@
 
       <el-table-column v-if="isColumnShow('url')" prop="url" label="文件地址" min-width="100">
         <template slot-scope="{row}">
-          <span @click="showFile(row.url)" style="cursor: pointer;">{{row.url}}</span>
+          <img
+            @click="showImg(row.url)"
+            style="width:50px;height:50px;cursor: pointer;"
+            :src="row.url"
+            v-if="row.type==1"
+            alt
+          >
+          <div
+            @click="showFile(row.url)"
+            class="imgContent"
+            :style="{backgroundImage:'url('+row.image+')'}"
+            v-else
+          >
+            <div class="width:100%;height：100%; background-color: rgba(0,0,0,.3);">
+              <i class="fas fa-video"></i>
+            </div>
+          </div>
+
+          <!-- <span @click="showFile(row.url)" style="cursor: pointer;">{{row.url}}</span> -->
         </template>
       </el-table-column>
 
@@ -72,12 +90,12 @@
       <el-table-column
         v-if="isColumnShow('type')"
         prop="type"
-        label="类型：0：data_video  1:data_app"
+        label="类型"
         :formatter="TypeFormatter"
         min-width="100"
       ></el-table-column>
 
-      <el-table-column v-if="isColumnShow('fatherId')" prop="fatherId" label="父类id" min-width="100"></el-table-column>
+      <!-- <el-table-column v-if="isColumnShow('fatherId')" prop="fatherId" label="父类id" min-width="100"></el-table-column> -->
       <el-table-column label="操作" align="center" fixed="right" min-width="150">
         <template slot-scope="scope">
           <el-button @click="editRow(scope.row)" type="primary" size="mini" plain>编辑</el-button>
@@ -191,8 +209,11 @@
       <img width="100%" :src="imgSrc" alt>
     </el-dialog>
 
-    <el-dialog title="播放音频" :visible.sync="audioDialogVisible" size="small">
-      <audio :src="audioSrc" controls="controls" autoplay>您的浏览器不支持 audio 标签。</audio>
+    <el-dialog title="播放视频" :visible.sync="audioDialogVisible" width="520px" size="small">
+      <!-- <video :src="audioSrc" controls="controls" autoplay>您的浏览器不支持 video 标签。</video> -->
+      <video v-if="audioDialogVisible" width="500" height="300" controls autoplay>
+        <source :src="audioSrc" type="video/mp4">您的浏览器不支持 video 标签。
+      </video>
     </el-dialog>
   </div>
 </template>
@@ -460,20 +481,19 @@ export default {
       }
     },
     TypeFormatter(row, column, cellValue) {
-       
-    //   if (cellValue) {
-          
-        var type = "";
-        switch (Number(cellValue)) {
-          case 0:
-            type = "data_video";
-            break;
-          case 1:
-            type = "data_app";
-            break;
-        }
-        return type;
-    //   }
+      //   if (cellValue) {
+
+      var type = "";
+      switch (Number(cellValue)) {
+        case 0:
+          type = "视频";
+          break;
+        case 1:
+          type = "图片";
+          break;
+      }
+      return type;
+      //   }
     },
     showImg(img) {
       this.imgSrc = img;
@@ -482,16 +502,22 @@ export default {
       }, 500);
     },
     showFile(url) {
-      var data = url.split(".");
-      if (data[data.length - 1] == "mp3") {
-        this.audioSrc = url;
-        this.audioDialogVisible = true;
-      } else {
-        this.showImg(url);
-      }
+      this.audioSrc = url;
+      this.audioDialogVisible = true;
     }
   }
 };
 </script>
 <style lang="less" scoped>
+.imgContent {
+  width: 50px;
+  height: 70px;
+  cursor: pointer;
+  position: relative;
+  background-position: cenetr center;
+  background-size: cover;
+  text-align: center;
+  line-height: 70px;
+  color: #fff;
+}
 </style>