update views/disk

src/api/disk.js

@@ -2,15 +2,19 @@ import { get, post } from '@/utils/request'
 
 const diskApi = {
   diskFileApi: '/api/content/disk/file',
-  ossUploadApi: '/api/file/upload',
+  filePreviewApi: '/api/content/disk/preview',
   ossStsApi: '/api/file/aliyun/sts_token',
-  ossSignedUrlApi: '/api/file/aliyun/signed_url'
+  getCamDetailApi: '/api/content/disk/cam/detail'
 }
 
 export function getDiskFile(query) {
   return get(diskApi.diskFileApi, query)
 }
 
-export function getVideoCoverChannelInfo() {
-  return post(diskApi.ossUploadApi + '/image')
+export function getFileDetail(fileId) {
+  return get(diskApi.filePreviewApi + '?fileId=' + fileId)
+}
+
+export function getCamDetail(query) {
+  return get(diskApi.getCamDetailApi, query)
 }

src/router/disk.js

@@ -1,5 +1,5 @@
 const Disk = () => import('views/disk/Disk')
-const DiskDashboard = () => import('views/disk/DiskDashboard')
+const DiskAlbum = () => import('views/disk/DiskAlbum')
 const DiskFile = () => import('views/disk/DiskFile')
 const DiskShare = () => import('views/disk/DiskShare')
 const DiskRecycle = () => import('views/disk/DiskRecycle')
@@ -13,14 +13,14 @@ export default {
   children: [
     {
       path: '',
-      name: 'ExamDashboard',
-      component: DiskDashboard,
+      name: 'DiskFile',
+      component: DiskFile,
       meta: { needAuth: true }
     },
     {
-      path: '/disk/file',
-      name: 'DiskFile',
-      component: DiskFile,
+      path: '/disk/album',
+      name: 'DiskAlbum',
+      component: DiskAlbum,
       meta: { needAuth: true }
     },
     {

src/views/disk/Disk.vue

@@ -19,9 +19,9 @@
             router
             mode="horizontal"
           >
-            <el-menu-item index="/disk/file">
+            <el-menu-item index="/disk/album">
               <template slot="title">
-                <span style="color: #007bff">文件</span>
+                <span style="color: #007bff">相册</span>
               </template>
             </el-menu-item>
             <el-menu-item index="/disk/share">

src/views/disk/DiskDashboard.vue → src/views/disk/DiskAlbum.vue

@@ -1,13 +1,13 @@
 <template>
   <div>
-    <span>disk dashboard</span>
+    <span>Disk Album</span>
   </div>
 </template>
 
 <script>
 
 export default {
-  name: 'DiskDashboard',
+  name: 'DiskAlbum',
   data() {
     return {
     }

src/views/disk/DiskCam.vue

@@ -15,8 +15,8 @@
         <el-card class="box-card">
           <div slot="header" class="clearfix">
             <el-select
-              style="margin: 5px;"
               v-model="selectedOption"
+              style="margin: 5px;"
               clearable
               placeholder="选择摄像头"
               @change="onSelectChange"
@@ -86,6 +86,8 @@
 </template>
 
 <script>
+import { getCamDetail } from '@/api/disk'
+
 export default {
   name: 'DiskCam',
   data() {
@@ -130,6 +132,16 @@ export default {
   },
   methods: {
     getData() {
+      const query = {
+        camId: null,
+        yearMonthDay: null
+      }
+      getCamDetail(query).then(resp => {
+        if (resp.code === 0) {
+          const respData = resp.data
+          console.log(respData)
+        }
+      })
     },
     onSelectChange() {
       this.$message.info('select -> ' + this.selectedOption)

src/views/disk/DiskFile.vue

@@ -27,9 +27,16 @@
       </el-input>
       <el-divider />
       <el-breadcrumb separator-class="el-icon-arrow-right">
-        <el-breadcrumb-item style="padding: 1px" :to="{ path: '/disk/file' }">全部文件</el-breadcrumb-item>
-        <el-breadcrumb-item style="padding: 1px" :to="{ path: '/disk/file' }">文件夹1</el-breadcrumb-item>
-        <el-breadcrumb-item style="padding: 1px" :to="{ path: '/disk/file' }">文件夹2</el-breadcrumb-item>
+        <el-breadcrumb-item
+          v-for="(item, index) in pathList"
+          :key="index"
+          style="padding: 1px"
+          :replace="true"
+          :to="{ path: item.path }"
+        >
+          {{ item.name }}
+        </el-breadcrumb-item>
+        <!--<el-breadcrumb-item style="padding: 1px" :to="{ path: '/disk/file' }">文件夹2</el-breadcrumb-item>
         <el-breadcrumb-item style="padding: 1px" :to="{ path: '/disk/file' }">文件夹3</el-breadcrumb-item>
         <el-breadcrumb-item style="padding: 1px" :to="{ path: '/disk/file' }">文件夹4</el-breadcrumb-item>
         <el-breadcrumb-item style="padding: 1px" :to="{ path: '/disk/file' }">文件夹5</el-breadcrumb-item>
@@ -37,7 +44,7 @@
         <el-breadcrumb-item style="padding: 1px" :to="{ path: '/disk/file' }">文件夹7</el-breadcrumb-item>
         <el-breadcrumb-item style="padding: 1px" :to="{ path: '/disk/file' }">文件夹8</el-breadcrumb-item>
         <el-breadcrumb-item style="padding: 1px" :to="{ path: '/disk/file' }">文件夹9</el-breadcrumb-item>
-        <el-breadcrumb-item style="padding: 1px" :to="{ path: '/disk/file' }">文件夹10</el-breadcrumb-item>
+        <el-breadcrumb-item style="padding: 1px" :to="{ path: '/disk/file' }">文件夹10</el-breadcrumb-item>-->
       </el-breadcrumb>
       <el-divider />
       <el-table
@@ -77,39 +84,139 @@
           label="修改时间"
         />
       </el-table>
+      <el-pagination
+        background
+        :small="screenWidth <= 768"
+        layout="prev, pager, next"
+        :page-size="pageSize"
+        :current-page="currentPage"
+        :total="totalSize"
+        @current-change="handleCurrentChange"
+        @prev-click="handleCurrentChange"
+        @next-click="handleCurrentChange"
+      />
     </el-row>
+
+    <el-dialog
+      :visible.sync="showPreviewDialog"
+      :before-close="handleClose"
+      width="100%"
+      center
+    >
+      <el-card v-if="fileDetail !== null" class="box-card" style="padding-right: 5px; padding-left: 5px; padding-bottom: 5px">
+        <div slot="header" class="clearfix">
+          <span>{{ fileDetail.filename }}</span>
+        </div>
+        <div class="text item">
+          <el-col v-if="fileType === 1001" :md="12">
+            <div class="imgs">
+              <el-image
+                lazy
+                fit="cover"
+                class="coverImg"
+                :src="fileDetail.url"
+              />
+            </div>
+          </el-col>
+          <el-col v-else-if="fileType === 1002" :md="12">
+            <video
+              :src="fileDetail.url"
+              controls
+              autoplay
+              class="video"
+              width="100%"
+            />
+          </el-col>
+          <el-col v-else-if="fileType === 1003" :md="12">
+            <audio
+              :src="fileDetail.url"
+              controls
+              autoplay
+              class="audio"
+            />
+          </el-col>
+          <el-col v-else-if="fileType === 1004" :md="12">
+            文档
+          </el-col>
+          <el-col v-else-if="fileType === 1005" :md="12">
+            文件
+          </el-col>
+        </div>
+      </el-card>
+    </el-dialog>
   </div>
 </template>
 
 <script>
-import { getDiskFile } from '@/api/disk'
+import { getDiskFile, getFileDetail } from '@/api/disk'
 
 export default {
   name: 'DiskFile',
   data() {
     return {
+      // 屏幕宽度, 为了控制分页条的大小
+      screenWidth: document.body.clientWidth,
+      currentPage: 1,
+      pageSize: 10,
+      totalSize: 0,
       dataList: [],
-      // 所有题目的对话框中表格被选中
+      // 所有文件的对话框被选中
       selectedTable: [],
-      inputData: ''
+      inputData: '',
+      showPreviewDialog: false,
+      fileDetail: null,
+      fileType: 0,
+      videoProp: null,
+      pathList: [
+        { path: '/disk', name: '全部文件' },
+        { path: '/disk?path=/1', name: '1' },
+        { path: '/disk?path=/1/2', name: '2' },
+        { path: '/disk?path=/1/2/3', name: '3' }
+      ],
+      queryForm: {
+        pn: this.currentPage,
+        path: '/',
+        fileType: null,
+        filename: null
+      }
     }
   },
   created() {
+    const pn = this.$route.query.pn
+    if (pn !== undefined) {
+      this.queryForm.pn = pn
+    }
+
+    const path = this.$route.query.path
+    if (path === undefined) {
+      this.queryForm.path = path
+    }
     document.title = '所有文件'
     this.getData()
   },
   methods: {
+    handleClose() {
+      this.showPreviewDialog = false
+      this.fileDetail = null
+      this.fileType = 0
+    },
+    handleCurrentChange(pageNumber) {
+      this.currentPage = pageNumber
+      this.queryForm.pn = this.currentPage
+      this.getData()
+      // 回到顶部
+      scrollTo(0, 0)
+    },
     getData() {
-      const queryForm = {
-        pageNo: 1,
-        path: '/',
-        fileType: null,
-        filename: null
-      }
-      getDiskFile(queryForm).then(resp => {
+      getDiskFile(this.queryForm).then(resp => {
         if (resp.code === 0) {
           const respData = resp.data
-          this.dataList = respData.list
+          this.pathList = respData.pathList
+          this.dataList = respData.pageList.list
+          this.totalSize = respData.pageList.totalSize
+          if (this.pathList.length === 0) {
+            this.pathList.push({ path: '/disk', name: '全部文件' })
+          }
         }
       })
     },
@@ -130,16 +237,27 @@ export default {
       this.$message.info('search file')
     },
     onClickFilename(row) {
-      const fileId = row.fileId
-      const fileType = row.fileType
-      if (fileType === 1001) {
-        this.$message.info(fileId + ' 是图片')
-      } else if (fileType === 1002) {
-        this.$message.info(fileId + ' 是视频')
-      } else if (fileType === 1003) {
-        this.$message.info(fileId + ' 是音频')
-      } else if (fileType === 1004) {
-        this.$message.info(fileId + ' 是文档')
+      this.fileType = row.fileType
+      if (this.fileType === 1000) {
+        const filename = row.filename
+        const nextPath = this.pathList[this.pathList.length - 1].path + '/' + filename
+        console.log(nextPath)
+        this.currentPage = 1
+        this.queryForm.pn = this.currentPage
+        this.queryForm.path = '/pv'
+        this.getData()
+      } else {
+        getFileDetail(row.fileId).then(resp => {
+          if (resp.code === 0) {
+            this.showPreviewDialog = true
+            this.fileDetail = resp.data
+            if (this.fileType === 1002) {
+              this.videoProp = {
+                videoUrl: this.fileDetail.url
+              }
+            }
+          }
+        })
       }
     }
   }
@@ -147,4 +265,16 @@ export default {
 </script>
 
 <style>
+/*处于手机屏幕时*/
+@media screen and (max-width: 768px){
+  .coverImg {
+    height: 120px !important;
+  }
+}
+
+.coverImg {
+  width: 100%;
+  height: 320px;
+  display: block;
+}
 </style>