调整模块, 删除无用代码

src/api/admin.js

@@ -1,58 +0,0 @@
-import { delete0, get, post } from '@/utils/request'
-
-const adminApi = {
-  siteNoticeApi: '/api/admin/site/notice',
-  userListApi: '/api/admin/user/list',
-  postListApi: '/api/admin/video/post',
-  setHotVideoApi: '/api/admin/video/sethot',
-  dataSourceApi: '/api/spider/data/source',
-  adminMessageApi: '/api/admin/message',
-  approveMessageApi: '/api/admin/message/approve',
-}
-
-// 获取站点公告
-export function getSiteNotice() {
-  return get(adminApi.siteNoticeApi)
-}
-
-// 更新站点公告
-export function updateSiteNotice(data) {
-  return post(adminApi.siteNoticeApi, data)
-}
-
-export function getMessages() {
-  return get(adminApi.adminMessageApi)
-}
-
-export function approveCharge(data) {
-  return post(adminApi.approveMessageApi, data)
-}
-
-// 获取用户列表
-export function getUserList(page) {
-  return get(adminApi.userListApi, page)
-}
-
-// 获取稿件列表
-export function getPostList(page) {
-  return get(adminApi.postListApi, page)
-}
-
-// 获取源数据
-export function getDataSource(page) {
-  return get(adminApi.dataSourceApi, page)
-}
-
-// 删除
-export function deleteDataSource(data) {
-  return delete0(adminApi.dataSourceApi, data)
-}
-
-// 缓存源数据
-export function cacheDataSource(magnetId) {
-  return post(adminApi.dataSourceApi + '/' + magnetId)
-}
-
-export function setHotVideo() {
-  return post(adminApi.setHotVideoApi)
-}

src/api/cam.js

@@ -1,61 +0,0 @@
-import { delete0, get, post } from '@/utils/request'
-
-const camApi = {
-  camApi: '/api/content/cam',
-  updateCamNameApi: '/api/content/cam/update/name',
-  camListApi: '/api/content/cam/list/kv',
-  camRecordByMonthApi: '/api/content/cam/record/month',
-  camRecordByDayApi: '/api/content/cam/record/day',
-  camRecordApi: '/api/content/cam/record/id',
-  camLatestRecordApi: '/api/content/cam/record/latest',
-  camPushUrlApi: '/api/content/cam/push',
-  camPullUrlApi: '/api/content/cam/stream/rtmp/pull'
-}
-
-export function addCam(data) {
-  return post(camApi.camApi, data)
-}
-
-export function updateCamName(jsonData) {
-  return post(camApi.updateCamNameApi, jsonData)
-}
-
-export function deleteCam(camId) {
-  return delete0(camApi.camApi + '/' + camId)
-}
-
-export function getUserCams(page) {
-  return get(camApi.camApi + '?page=' + page)
-}
-
-export function getCamPushUrl(camId) {
-  return get(camApi.camPushUrlApi + '/' + camId)
-}
-
-export function getCamDetail(camId) {
-  return get(camApi.camApi + '/' + camId)
-}
-
-export function getCamList() {
-  return get(camApi.camListApi)
-}
-
-export function getCamRecordByMonth(param) {
-  return get(camApi.camRecordByMonthApi, param)
-}
-
-export function getCamRecordByDay(param) {
-  return get(camApi.camRecordByDayApi, param)
-}
-
-export function getCamPullUrl(camId) {
-  return get(camApi.camPullUrlApi + '/' + camId)
-}
-
-export function getCamRecord(recordId) {
-  return get(camApi.camRecordApi + '/' + recordId)
-}
-
-export function getLatestRecord(camId) {
-  return get(camApi.camLatestRecordApi + '/' + camId)
-}

src/api/disk.js

@@ -1,54 +0,0 @@
-import { delete0, get, post } from '@/utils/request'
-
-const diskApi = {
-  getImageList: '/api/disk/image/list',
-  getFolderTreeApi: '/api/disk/folder/tree',
-  createFolderApi: '/api/disk/folder/add',
-  addDiskFileApi: '/api/disk/file',
-  deleteDiskFileApi: '/api/disk/file',
-  moveDiskFileApi: '/api/disk/file/move',
-  getFileUrlApi: '/api/disk/file/url',
-  getFileDetailApi: '/api/disk/file/detail',
-  getFileListApi: '/api/disk/list',
-  ossServerApi: '/api/disk/oss/serverinfo',
-}
-
-export function getFolderTree() {
-  return get(diskApi.getFolderTreeApi)
-}
-
-export function addDiskFile(jsonData) {
-  return post(diskApi.addDiskFileApi, jsonData)
-}
-
-export function addDiskFolder(jsonData) {
-  return post(diskApi.createFolderApi, jsonData)
-}
-
-export function deleteDiskFile(fileIds) {
-  return delete0(diskApi.addDiskFileApi, fileIds)
-}
-
-export function moveDiskFile(jsonData) {
-  return post(diskApi.moveDiskFileApi, jsonData)
-}
-
-export function getFileList(form) {
-  return get(diskApi.getFileListApi, form)
-}
-
-export function getFileUrl(fileType, fileId) {
-  return get(diskApi.getFileUrlApi + '?fileType=' + fileType + '&fileId=' + fileId)
-}
-
-export function getFileDetail(fileId) {
-  return get(diskApi.getFileDetailApi + '?fileId=' + fileId)
-}
-
-export function getImageList(searchForm) {
-  return get(diskApi.getImageList, searchForm)
-}
-
-export function getServerInfo(channelId) {
-  return post(diskApi.ossServerApi + '?channelId=' + channelId)
-}

src/components/LivePlayer.vue

@@ -5,7 +5,6 @@
 <script>
 import flvjs from 'flv.js'
 import DPlayer from 'dplayer'
-import { getCamPullUrl } from '@/api/cam'
 
 export default {
   name: 'LivePlayer',
@@ -26,28 +25,8 @@ export default {
   },
   mounted() {
     const camId = this.videoProp.videoId
-    this.getPullUrl(camId)
   },
   methods: {
-    getPullUrl(camId) {
-      getCamPullUrl(camId).then(resp => {
-        if (resp.code === 0) {
-          this.initFlvPlayer(resp.data)
-        } else {
-          this.$notify.error({
-            message: '获取摄像头拉流地址失败',
-            type: 'warning',
-            duration: 3000
-          })
-        }
-      }).catch(error => {
-        this.$notify.error({
-          message: error.message,
-          type: 'warning',
-          duration: 3000
-        })
-      })
-    },
     initFlvPlayer(videoUrl) {
       new DPlayer({
         container: document.getElementById('dplayer'),

src/router/cam.js

@@ -1,37 +0,0 @@
-const Cam = () => import('views/cam/Cam')
-const CamList = () => import('views/cam/CamList')
-const LivePage = () => import('views/cam/LivePage')
-const RecordPage = () => import('views/cam/RecordPage')
-
-export default {
-  path: '/cam',
-  name: 'Cam',
-  component: Cam,
-  meta: { needAuth: true },
-  children: [
-    {
-      path: '',
-      name: '摄像头列表',
-      component: CamList,
-      meta: { needAuth: true }
-    },
-    {
-      path: '/cam/list',
-      name: '摄像头列表',
-      component: CamList,
-      meta: { needAuth: true }
-    },
-    {
-      path: '/cam/live/:camId',
-      name: 'LivePage',
-      component: LivePage,
-      meta: { needAuth: true }
-    },
-    {
-      path: '/cam/record/:camId',
-      name: 'RecordPage',
-      component: RecordPage,
-      meta: { needAuth: true }
-    }
-  ]
-}

src/router/disk.js

@@ -1,63 +0,0 @@
-// ********************************************************************************************************************
-// 网盘主页
-// ********************************************************************************************************************
-const Disk = () => import('views/disk/Disk')
-const DiskOverview = () => import('views/disk/DiskOverview')
-const FileList = () => import('views/disk/FileList')
-const UploadFile = () => import('views/disk/UploadFile')
-const FileTrash = () => import('views/disk/FileTrash')
-const FileImage = () => import('views/disk/FileImage')
-const FileVideo = () => import('views/disk/FileVideo')
-const FileAudio = () => import('views/disk/FileAudio')
-const FileText = () => import('views/disk/FileText')
-
-export default {
-  path: '/disk',
-  name: 'Disk',
-  component: Disk,
-  meta: { needAuth: true },
-  children: [
-    {
-      path: '',
-      name: '文件',
-      component: FileList,
-      meta: { needAuth: true }
-    },
-    {
-      path: '/disk/image',
-      name: '图片',
-      component: FileImage,
-      meta: { needAuth: true }
-    },
-    {
-      path: '/disk/video',
-      name: '视频',
-      component: FileVideo,
-      meta: { needAuth: true }
-    },
-    {
-      path: '/disk/audio',
-      name: '音频',
-      component: FileAudio,
-      meta: { needAuth: true }
-    },
-    {
-      path: '/disk/text',
-      name: '文本',
-      component: FileText,
-      meta: { needAuth: true }
-    },
-    {
-      path: '/disk/upload',
-      name: '上传',
-      component: UploadFile,
-      meta: { needAuth: true }
-    },
-    {
-      path: '/disk/trash',
-      name: 'Trash',
-      component: FileTrash,
-      meta: { needAuth: true }
-    }
-  ]
-}

src/router/index.js

@@ -4,11 +4,8 @@ import MyRouter from './my'
 import UserRouter from './user'
 import ExamRouter from './exam'
 import MallRouter from './mall'
-import PostRouter from './post'
-// TODO 待删除
-import DiskRouter from './disk'
-// TODO 待删除
-import CamRouter from './cam'
+import VodRouter from './vod'
+import MapRouter from './map'
 
 // 懒加载引入页面组件，es6语法
 // ********************************************************************************************************************
@@ -40,9 +37,8 @@ const routes = [
   ExamRouter,
   UserRouter,
   MallRouter,
-  DiskRouter,
-  PostRouter,
-  CamRouter,
+  MapRouter,
+  VodRouter,
   {
     path: '/login',
     name: 'Login',

src/router/mall.js

@@ -10,7 +10,6 @@ const ConfirmOrder = () => import('views/mall/ConfirmOrder')
 const Visit = () => import('views/mall/Visit')
 const Pay = () => import('views/mall/Pay')
 const Product = () => import('views/mall/Product')
-const AMap = () => import('views/home/AMap')
 
 export default {
   path: '/mall',
@@ -36,18 +35,6 @@ export default {
       component: Fav,
       meta: { needAuth: false }
     },
-    {
-      path: '/mall/map',
-      name: 'AMap',
-      component: AMap,
-      meta: { needAuth: false }
-    },
-    {
-      path: '/mall/amap',
-      name: 'AMap',
-      component: AMap,
-      meta: { needAuth: false }
-    },
     {
       path: '/mall/order',
       name: '订单',
@@ -77,6 +64,6 @@ export default {
       name: 'Product',
       component: Product,
       meta: { needAuth: false }
-    },
+    }
   ]
 }

src/router/map.js

@@ -0,0 +1,26 @@
+// ********************************************************************************************************************
+// 网盘主页
+// ********************************************************************************************************************
+const Map = () => import('views/map/Map')
+const AMap = () => import('views/map/AMap')
+
+export default {
+  path: '/map',
+  name: 'Map',
+  component: Map,
+  meta: { needAuth: true },
+  children: [
+    {
+      path: '',
+      name: '高德地图',
+      component: AMap,
+      meta: { needAuth: true }
+    },
+    {
+      path: '/map/image',
+      name: '图片',
+      component: AMap,
+      meta: { needAuth: true }
+    }
+  ]
+}

src/views/admin/DataSource.vue

@@ -1,265 +0,0 @@
-<template>
-  <el-row>
-    <el-row>
-      <el-form :inline="true" :model="searchForm" class="demo-form-inline">
-        <el-form-item>
-          <el-select v-model="searchForm.status" placeholder="状态" @change="search">
-            <el-option label="未下载" value="1" />
-            <el-option label="下载中" value="2" />
-            <el-option label="已下载" value="3" />
-            <el-option label="已发布" value="4" />
-          </el-select>
-        </el-form-item>
-        <el-form-item>
-          <el-input v-model="searchForm.title" placeholder="" />
-        </el-form-item>
-        <el-form-item>
-          <el-button size="mini" type="warning" @click="search">查询</el-button>
-        </el-form-item>
-      </el-form>
-      <el-form :inline="true" class="demo-form-inline">
-        <el-form-item>
-          <el-button size="mini" type="danger" @click="deleteMultiple">删除多行</el-button>
-        </el-form-item>
-      </el-form>
-      <el-table
-        ref="multipleTable"
-        :data="dataList"
-        border
-        style="width: 100%"
-        @selection-change="handleSelectionChange"
-      >
-        <el-table-column
-          type="selection"
-        />
-        <el-table-column
-          prop="site"
-          label="Site"
-        />
-        <el-table-column
-          prop="title"
-          label="Name"
-          width="400px"
-        >
-          <template slot-scope="scope">
-            <a :href="scope.row.pageUrl" style="text-decoration-line: none" target="_blank">
-              <el-tooltip
-                :content="scope.row.title"
-                raw-content
-                placement="top-start"
-              >
-                <span v-if="scope.row.title.length <= 60">
-                  {{ scope.row.title }}
-                </span>
-                <span v-else>
-                  {{ scope.row.title.substr(0, 55) + "..." }}
-                </span>
-              </el-tooltip>
-            </a>
-          </template>
-        </el-table-column>
-        <el-table-column
-          prop="magnetUri"
-          label="Link"
-        >
-          <template slot-scope="scope">
-            <a :href="scope.row.magnetUri">
-              <span class="el-icon-link" />
-            </a>
-          </template>
-        </el-table-column>
-        <el-table-column
-          prop="size"
-          label="Size"
-        />
-        <el-table-column
-          prop="pubDate"
-          label="Date"
-        />
-        <el-table-column
-          prop="status"
-          label="Status"
-        >
-          <template slot-scope="scope">
-            <el-tag v-if="scope.row.status === 1" :type="'warning'" disable-transitions>
-              未下载
-            </el-tag>
-            <el-tag v-else-if="scope.row.status === 2" :type="'success'" disable-transitions>
-              下载中
-            </el-tag>
-            <el-tag v-else-if="scope.row.status === 3" :type="'danger'" disable-transitions>
-              已下载
-            </el-tag>
-            <el-tag v-else :type="'danger'" disable-transitions>
-              已发布
-            </el-tag>
-          </template>
-        </el-table-column>
-        <el-table-column
-          label="操作"
-        >
-          <template slot-scope="scope">
-            <el-button
-              size="mini"
-              @click="cache(scope.row)"
-            >缓存</el-button>
-          </template>
-        </el-table-column>
-      </el-table>
-      <div style="margin-top: 20px">
-        <el-button @click="toggleSelection([tableData[1], tableData[2]])">切换第二、第三行的选中状态</el-button>
-        <el-button @click="toggleSelection()">取消选择</el-button>
-      </div>
-    </el-row>
-    <el-row>
-      <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-row>
-</template>
-
-<script>
-import { cacheDataSource, deleteDataSource, getDataSource } from '@/api/admin'
-
-export default {
-  name: 'DataSource',
-  data() {
-    return {
-      // 屏幕宽度, 为了控制分页条的大小
-      screenWidth: document.body.clientWidth,
-      currentPage: 1,
-      pageSize: 100,
-      totalSize: 0,
-      dataList: [],
-      searchForm: {
-        page: 1,
-        status: '1',
-        title: null
-      },
-      multipleSelection: []
-    }
-  },
-  created() {
-    document.title = '数据源'
-    this.getData()
-  },
-  methods: {
-    handleCurrentChange(pageNumber) {
-      this.currentPage = pageNumber
-      this.searchForm.page = this.currentPage
-      this.getData()
-      // 回到顶部
-      scrollTo(0, 0)
-    },
-    getData() {
-      this.dataList = []
-      getDataSource(this.searchForm).then(resp => {
-        if (resp.code === 0) {
-          this.dataList = resp.data.list
-          this.totalSize = resp.data.totalSize
-        } else {
-          this.$notify({
-            title: '提示',
-            message: resp.msg,
-            type: 'warning',
-            duration: 3000
-          })
-        }
-      }).catch(error => {
-        this.$notify({
-          title: '提示',
-          message: error.message,
-          type: 'error',
-          duration: 3000
-        })
-      })
-    },
-    cache(row) {
-      cacheDataSource(row.magnetId).then(resp => {
-        if (resp.code === 0) {
-          this.$notify({
-            message: row.title + ' 正在缓存中',
-            type: 'warning',
-            duration: 3000
-          })
-        } else {
-          this.$notify({
-            title: '提示',
-            message: resp.msg,
-            type: 'warning',
-            duration: 3000
-          })
-        }
-      })
-    },
-    search() {
-      this.currentPage = 1
-      this.searchForm.page = this.currentPage
-      this.getData(this.searchForm)
-    },
-    toggleSelection(rows) {
-      if (rows) {
-        rows.forEach(row => {
-          this.$refs.multipleTable.toggleRowSelection(row)
-        })
-      } else {
-        this.$refs.multipleTable.clearSelection()
-      }
-    },
-    handleSelectionChange(val) {
-      this.multipleSelection = val
-    },
-    deleteMultiple() {
-      if (this.multipleSelection.length === 0) {
-        this.$notify({
-          message: '至少应选中一行',
-          type: 'warning',
-          duration: 3000
-        })
-      }
-
-      var magnetIds = []
-      for (const item of this.multipleSelection) {
-        magnetIds.push(item.magnetId)
-      }
-
-      deleteDataSource(magnetIds).then(resp => {
-        if (resp.code === 0) {
-          this.$notify({
-            message: resp.msg,
-            type: 'warning',
-            duration: 3000
-          })
-        } else {
-          this.$notify({
-            title: '提示',
-            message: resp.msg,
-            type: 'warning',
-            duration: 3000
-          })
-        }
-      }).catch(error => {
-        this.$notify({
-          title: '提示',
-          message: error.message,
-          type: 'error',
-          duration: 3000
-        })
-      })
-      // console.log(ids)
-    }
-  }
-}
-</script>
-
-<style>
-</style>

src/views/admin/Message.vue

@@ -1,148 +0,0 @@
-<template>
-  <el-row>
-    <el-row>
-      <el-form :inline="true" :model="searchForm" class="demo-form-inline">
-        <el-form-item>
-          <el-select v-model="searchForm.status" placeholder="状态" @change="search">
-            <el-option label="未下载" value="1" />
-            <el-option label="下载中" value="2" />
-            <el-option label="已下载" value="3" />
-            <el-option label="已发布" value="4" />
-          </el-select>
-        </el-form-item>
-        <el-form-item>
-          <el-input v-model="searchForm.title" placeholder="" />
-        </el-form-item>
-        <el-form-item>
-          <el-button size="mini" type="warning" @click="search">查询</el-button>
-        </el-form-item>
-      </el-form>
-      <el-table
-        :data="dataList"
-        border
-        style="width: 100%"
-      >
-        <el-table-column
-          prop="chargeId"
-          label="ID"
-        />
-        <el-table-column
-          prop="quantity"
-          label="金额"
-        />
-        <el-table-column
-          prop="owner"
-          label="Owner"
-        />
-        <el-table-column
-          label="操作"
-        >
-          <template slot-scope="scope">
-            <el-button
-              size="mini"
-              @click="approve(scope.row)"
-            >同意</el-button>
-          </template>
-        </el-table-column>
-      </el-table>
-    </el-row>
-    <el-row>
-      <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-row>
-</template>
-
-<script>
-import {approveCharge, getMessages} from '@/api/admin'
-
-export default {
-  name: 'DataSource',
-  data() {
-    return {
-      // 屏幕宽度, 为了控制分页条的大小
-      screenWidth: document.body.clientWidth,
-      currentPage: 1,
-      pageSize: 100,
-      totalSize: 0,
-      dataList: [],
-      searchForm: {
-        page: 1,
-        status: '1',
-        title: null
-      },
-      multipleSelection: []
-    }
-  },
-  created() {
-    document.title = '消息'
-    this.getData()
-  },
-  methods: {
-    handleCurrentChange(pageNumber) {
-      this.currentPage = pageNumber
-      this.searchForm.page = this.currentPage
-      this.getData()
-      // 回到顶部
-      scrollTo(0, 0)
-    },
-    getData() {
-      getMessages().then(resp => {
-        if (resp.code === 0) {
-          this.dataList = resp.data
-          // this.totalSize = resp.data.totalSize
-        } else {
-          this.$notify({
-            title: '提示',
-            message: resp.msg,
-            type: 'warning',
-            duration: 3000
-          })
-        }
-      }).catch(error => {
-        this.$notify({
-          title: '提示',
-          message: error.message,
-          type: 'error',
-          duration: 3000
-        })
-      })
-    },
-    approve(row) {
-      approveCharge(row).then(resp => {
-        if (resp.code === 0) {
-          this.$notify({
-            message: row.title + ' 正在缓存中',
-            type: 'warning',
-            duration: 3000
-          })
-        } else {
-          this.$notify({
-            title: '提示',
-            message: resp.msg,
-            type: 'warning',
-            duration: 3000
-          })
-        }
-      })
-    },
-    search() {
-      this.currentPage = 1
-      this.searchForm.page = this.currentPage
-      this.getData(this.searchForm)
-    },
-  }
-}
-</script>
-
-<style>
-</style>

src/views/admin/PostList.vue

@@ -1,473 +0,0 @@
-<template>
-  <el-row>
-    <el-row>
-      <el-form :inline="true" :model="searchForm" class="demo-form-inline">
-        <el-form-item>
-          <el-select v-model="searchForm.type" placeholder="查询类型">
-            <el-option label="稿件标题" value="1" />
-            <el-option label="用户ID" value="2" />
-          </el-select>
-        </el-form-item>
-        <el-form-item>
-          <el-input v-model="searchForm.content" placeholder="" />
-        </el-form-item>
-        <el-form-item>
-          <el-button size="mini" type="warning" @click="search">查询</el-button>
-        </el-form-item>
-      </el-form>
-      <el-table
-        :data="dataList"
-        border
-        style="width: 100%"
-      >
-        <el-table-column
-          fixed="left"
-          label="No"
-          type="index"
-        />
-        <el-table-column
-          prop="pubDate"
-          label="发布时间"
-          width="150"
-        />
-        <el-table-column
-          prop="coverUrl"
-          label="封面"
-          width="90"
-        >
-          <template slot-scope="scope">
-            <el-image :src="scope.row.coverUrl" min-width="30" height="20" />
-          </template>
-        </el-table-column>
-        <el-table-column
-          prop="title"
-          label="标题"
-          width="150"
-        >
-          <template slot-scope="scope">
-            <el-tooltip
-              :content="scope.row.title"
-              raw-content
-              placement="top-start"
-            >
-              <router-link style="text-decoration-line: none" target="_blank" :to="`/video/${scope.row.videoId}`">
-                <span v-if="scope.row.title.length <= 15">
-                  {{ scope.row.title }}
-                </span>
-                <span v-else>
-                  {{ scope.row.title.substr(0, 15) + "..." }}
-                </span>
-              </router-link>
-            </el-tooltip>
-          </template>
-        </el-table-column>
-        <el-table-column
-          prop="description"
-          label="描述"
-          width="150"
-        >
-          <template slot-scope="scope">
-            <el-tooltip
-              v-if="scope.row.description"
-              :content="scope.row.description"
-              raw-content
-              placement="top-start"
-            >
-              <span v-if="scope.row.description && scope.row.description.length <= 15">
-                {{ scope.row.description }}
-              </span>
-              <span v-if="scope.row.description && scope.row.description.length > 15">
-                {{ scope.row.description.substr(0, 15) + "..." }}
-              </span>
-            </el-tooltip>
-            <span v-else>-</span>
-          </template>
-        </el-table-column>
-        <el-table-column
-          prop="duration"
-          label="时长"
-        >
-          <!--          <span>59:59:59</span>-->
-        </el-table-column>
-        <el-table-column
-          prop="direction"
-          label="方向"
-        />
-        <el-table-column
-          prop="scope"
-          label="可见范围"
-          width="120"
-        >
-          <template slot-scope="scope">
-            <el-tag v-if="scope.row.scope === 1" :type="'warning'" disable-transitions>
-              本人可见
-            </el-tag>
-            <el-tag v-else-if="scope.row.scope === 2" :type="'success'" disable-transitions>
-              所有人可见
-            </el-tag>
-            <el-tag v-else-if="scope.row.scope === 3" :type="'danger'" disable-transitions>
-              VIP 可见
-            </el-tag>
-            <el-tag v-else :type="'danger'" disable-transitions>
-              验证码可见
-            </el-tag>
-          </template>
-        </el-table-column>
-        <el-table-column
-          prop="scope"
-          label="审核状态"
-          width="120"
-        >
-          <template slot-scope="scope">
-            <el-tag v-if="scope.row.status === 1" :type="'warning'" disable-transitions>
-              审核中
-            </el-tag>
-            <el-tag v-else-if="scope.row.status === 2" :type="'success'" disable-transitions>
-              审核通过
-            </el-tag>
-            <el-tag v-else-if="scope.row.status === 3" :type="'danger'" disable-transitions>
-              审核未通过
-            </el-tag>
-            <el-tag v-else-if="scope.row.status === 4" :type="'danger'" disable-transitions>
-              下架
-            </el-tag>
-            <el-tag v-else-if="scope.row.status === 5" :type="'danger'" disable-transitions>
-              待缓存
-            </el-tag>
-            <el-tag v-else-if="scope.row.status === 6" :type="'danger'" disable-transitions>
-              缓存中
-            </el-tag>
-            <el-tag v-else-if="scope.row.status === 7" :type="'danger'" disable-transitions>
-              缓存失败
-            </el-tag>
-            <el-tag v-else-if="scope.row.status === 8" :type="'danger'" disable-transitions>
-              封面不存在
-            </el-tag>
-            <el-tag v-else :type="'danger'" disable-transitions>
-              视频不存在
-            </el-tag>
-          </template>
-        </el-table-column>
-        <el-table-column
-          prop="duration"
-          label="发布用户"
-        />
-        <el-table-column
-          fixed="right"
-          label="操作"
-          width="320"
-        >
-          <template slot-scope="scope">
-            <el-button
-              size="mini"
-              @click="handleCache(scope.$index, scope.row)"
-            >缓存</el-button>
-            <el-button
-              size="mini"
-              @click="handlePreview(scope.$index, scope.row)"
-            >预览</el-button>
-            <el-button
-              size="mini"
-              @click="handleEdit(scope.$index, scope.row)"
-            >审核</el-button>
-            <el-button
-              size="mini"
-              @click="handleVideoResource(scope.$index, scope.row)"
-            >资源</el-button>
-          </template>
-        </el-table-column>
-      </el-table>
-      <!-- 视频资源对话框 -->
-      <el-dialog
-        append-to-body
-        :visible.sync="showVideoResourceDialog"
-        width="70%"
-        center
-      >
-        <el-table
-          :data="videoResources"
-          border
-          style="width: 100%"
-        >
-          <el-table-column
-            label="No"
-            type="index"
-          />
-          <el-table-column
-            prop="videoCodec"
-            label="原始视频"
-          />
-          <el-table-column
-            prop="videoCodec"
-            label="视频编码"
-          />
-          <el-table-column
-            prop="audioCodec"
-            label="音频编码"
-          />
-          <el-table-column
-            prop="quality"
-            label="画质"
-          />
-          <el-table-column
-            prop="urlType"
-            label="URL 类型"
-          />
-          <el-table-column
-            prop="url"
-            label="URL"
-          />
-          <el-table-column
-            fixed="right"
-            label="操作"
-            width="280"
-          >
-            <template slot-scope="scope">
-              <el-button
-                size="mini"
-                @click="handleConvert(scope.$index, scope.row)"
-              >转码</el-button>
-            </template>
-          </el-table-column>
-        </el-table>
-      </el-dialog>
-      <!-- 稿件审核对话框 -->
-      <el-dialog
-        append-to-body
-        :visible.sync="showEditScopeDialog"
-        width="30%"
-        center
-      >
-        <el-card class="box-card">
-          <div slot="header" class="clearfix">
-            <span>稿件审核</span>
-            <el-button style="float: right; padding: 3px 0" type="text" @click="onUpdateStatus">更新</el-button>
-          </div>
-          <div class="text item">
-            <el-select v-model="form.scope" placeholder="选择审核结果">
-              <el-option label="本人可见" value="1" />
-              <el-option label="所有人可见" value="2" />
-              <el-option label="VIP 可见" value="3" />
-              <el-option label="验证码可见" value="4" />
-            </el-select>
-          </div>
-        </el-card>
-      </el-dialog>
-      <!-- 视频预览对话框 -->
-      <el-dialog
-        title="预览视频"
-        append-to-body
-        :visible.sync="showPreviewDialog"
-        :before-close="handleDialogClose"
-        width="70%"
-        center
-      >
-        <template>
-          <video-preview-player :video-prop.sync="videoProp" />
-        </template>
-      </el-dialog>
-    </el-row>
-    <el-row>
-      <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-row>
-</template>
-
-<script>
-import VideoPreviewPlayer from 'components/VideoPreviewPlayer'
-import {
-  videoInfo,
-  deleteVideoPost,
-  getVideoResource,
-  convertVideo,
-  updateVideoStatus,
-  cacheBiliVideo
-} from '@/api/video'
-import { getPostList } from '@/api/admin'
-
-export default {
-  name: 'PostList',
-  components: { VideoPreviewPlayer },
-  data() {
-    return {
-      // 屏幕宽度, 为了控制分页条的大小
-      screenWidth: document.body.clientWidth,
-      currentPage: 1,
-      pageSize: 20,
-      totalSize: 0,
-      dataList: [],
-      // **********************************************************************
-      videoProp: null,
-      showVideoResourceDialog: false,
-      showEditScopeDialog: false,
-      showPreviewDialog: false,
-      form: {
-        videoId: null,
-        scope: '1'
-      },
-      videoResources: [],
-      searchForm: {
-        page: 1,
-        type: '1',
-        content: null
-      }
-    }
-  },
-  created() {
-    document.title = '稿件列表'
-    this.getData(this.searchForm)
-  },
-  methods: {
-    handleCurrentChange(pageNumber) {
-      this.currentPage = pageNumber
-      this.searchForm.page = this.currentPage
-      this.getData(this.searchForm)
-      // 回到顶部
-      scrollTo(0, 0)
-    },
-    getData(searchForm) {
-      this.dataList = []
-      getPostList(searchForm).then(resp => {
-        if (resp.code === 0) {
-          this.dataList = resp.data.list
-          this.totalSize = resp.data.totalSize
-        } else {
-          this.$notify({
-            title: '提示',
-            message: resp.msg,
-            type: 'warning',
-            duration: 3000
-          })
-        }
-      }).catch(error => {
-        this.$notify({
-          title: '提示',
-          message: error.message,
-          type: 'error',
-          duration: 3000
-        })
-      })
-    },
-    handleVideoResource(index, row) {
-      const videoId = row.videoId
-      this.showVideoResourceDialog = true
-
-      getVideoResource(videoId).then(resp => {
-        if (resp.code === 0) {
-          this.videoResources = resp.data
-        }
-      })
-    },
-    handleDialogClose(done) {
-      this.showPreviewDialog = false
-      this.videoProp = {
-        videoId: null,
-        play: false
-      }
-      done()
-    },
-    handleConvert(index, row) {
-      convertVideo(row.videoId).then(res => {
-        if (res.code === 0) {
-          this.$notify({
-            title: '提示',
-            message: '视频转码请求已提交',
-            type: 'warning',
-            duration: 3000
-          })
-        }
-      })
-    },
-    handleCache(index, row) {
-      const bvId = row.videoId
-      cacheBiliVideo(bvId).then(resp => {
-        if (resp.code === 0) {
-          const resData = resp.data
-          this.$notify({
-            title: '提示',
-            message: resData.msg,
-            type: 'warning',
-            duration: 3000
-          })
-        }
-      })
-    },
-    handlePreview(index, row) {
-      videoInfo(row.videoId).then(res => {
-        if (res.code === 0) {
-          this.showPreviewDialog = true
-          this.videoProp = {
-            videoId: res.data.videoId,
-            play: true
-          }
-        }
-      })
-    },
-    handleEdit(index, row) {
-      this.showEditScopeDialog = true
-    },
-    handleDelete(index, row) {
-      this.$confirm('确定要删除 ' + row.title + '?', '提示', {
-        confirmButtonText: '确定',
-        cancelButtonText: '取消',
-        type: 'warning'
-      }).then(() => {
-        deleteVideoPost(row.videoId).then(res => {
-          if (res.code === 0) {
-            this.$notify({
-              title: '提示',
-              message: '稿件已删除',
-              type: 'warning',
-              duration: 3000
-            })
-            this.$router.go(0)
-          }
-        })
-      }).catch(() => {
-        this.$message({
-          type: 'info',
-          message: '已取消'
-        })
-      })
-    },
-    onUpdateStatus() {
-      this.showEditScopeDialog = false
-      updateVideoStatus(this.form).then(res => {
-        if (res.code === 0) {
-          this.$notify({
-            title: '提示',
-            message: '稿件状态已更新',
-            type: 'warning',
-            duration: 3000
-          })
-        }
-      }).catch(error => {
-        this.$notify({
-          title: '提示',
-          message: error.message,
-          type: 'warning',
-          duration: 3000
-        })
-      })
-    },
-    search() {
-      this.currentPage = 1
-      this.searchForm.page = this.currentPage
-      this.getData(this.searchForm)
-    }
-  }
-}
-</script>
-
-<style>
-</style>

src/views/admin/SiteConfig.vue

@@ -1,94 +0,0 @@
-<template>
-  <el-row class="movie-list">
-    <el-col :md="12" style="padding-right: 5px; padding-left: 5px; padding-bottom: 5px">
-      <el-row style="padding-right: 5px; padding-left: 5px; padding-bottom: 5px">
-        <el-card class="box-card">
-          <div slot="header" class="clearfix">
-            <span>当前公告</span>
-          </div>
-          <div class="text item">
-            <span v-html="notice" />
-          </div>
-        </el-card>
-      </el-row>
-    </el-col>
-    <el-col :md="12" style="padding-right: 5px; padding-left: 5px; padding-bottom: 5px">
-      <el-row style="padding-right: 5px; padding-left: 5px; padding-bottom: 5px">
-        <el-card class="box-card">
-          <div slot="header" class="clearfix">
-            <span>新公告</span>
-            <el-button style="float: right; padding: 3px 0" type="text" @click="onUpdate">更新</el-button>
-          </div>
-          <div class="text item">
-            <el-form ref="form" :model="formData">
-              <el-form-item>
-                <el-input v-model="formData.content" type="textarea" :rows="5" style="padding-right: 1px" />
-              </el-form-item>
-            </el-form>
-          </div>
-        </el-card>
-      </el-row>
-      <el-row style="padding-right: 5px; padding-left: 5px; padding-bottom: 5px">
-        <el-card class="box-card">
-          <div slot="header" class="clearfix">
-            <span>设置热门视频</span>
-            <el-button style="float: right; padding: 3px 0" type="text" @click="setHotVideoWrapper">更新</el-button>
-          </div>
-        </el-card>
-      </el-row>
-    </el-col>
-  </el-row>
-</template>
-
-<script>
-import { getAuthedUser } from '@/utils/auth'
-import { setHotVideo, updateSiteNotice } from '@/api/admin'
-import { getSiteNotice } from '@/api/content'
-
-export default {
-  name: 'SiteConfig',
-  data() {
-    return {
-      loginUser: null,
-      notice: '',
-      formData: {
-        content: null
-      }
-    }
-  },
-  created() {
-    document.title = '站点配置'
-    this.loginUser = getAuthedUser()
-    getSiteNotice().then(resp => {
-      if (resp.code === 0) {
-        this.notice = resp.data
-      }
-    })
-  },
-  mounted() {
-  },
-  methods: {
-    onUpdate() {
-      updateSiteNotice(this.formData).then(resp => {
-        if (resp.code === 0) {
-          this.notice = this.formData.content
-          this.formData.content = null
-        }
-      })
-    },
-    setHotVideoWrapper() {
-      setHotVideo().then(resp => {
-        if (resp.code !== 0) {
-          this.$message.error(resp.msg)
-        }
-      }).catch(error => {
-        this.$message.error(error.message)
-      }).finally(() => {
-      })
-    }
-  }
-}
-</script>
-
-<style>
-</style>

src/views/admin/UserList.vue

@@ -1,243 +0,0 @@
-<template>
-  <el-row>
-    <el-row>
-      <el-form :inline="true" :model="searchForm" class="demo-form-inline">
-        <el-form-item>
-          <el-select v-model="searchForm.type" placeholder="查询类型">
-            <el-option label="用户名" value="1" />
-            <el-option label="用户 ID" value="2" />
-          </el-select>
-        </el-form-item>
-        <el-form-item>
-          <el-input v-model="searchForm.content" placeholder="" />
-        </el-form-item>
-        <el-form-item>
-          <el-button size="mini" type="warning" @click="search">查询</el-button>
-        </el-form-item>
-      </el-form>
-      <el-table
-        :data="dataList"
-        border
-        style="width: 100%"
-      >
-        <el-table-column
-          fixed="left"
-          label="No"
-          type="index"
-        />
-        <el-table-column
-          prop="avatarUrl"
-          label="头像"
-          width="90"
-        >
-          <template slot-scope="scope">
-            <el-image :src="scope.row.avatarUrl" min-width="30" height="20" />
-          </template>
-        </el-table-column>
-        <el-table-column
-          prop="screenName"
-          label="用户名"
-        >
-          <template slot-scope="scope">
-            <router-link style="text-decoration-line: none" target="_blank" :to="`/user/${scope.row.userId}`">
-              <span>{{ scope.row.screenName }}</span>
-            </router-link>
-          </template>
-        </el-table-column>
-        <el-table-column
-          prop="gender"
-          label="性别"
-        >
-          <template slot-scope="scope">
-            <span v-if="scope.row.gender === 0">女</span>
-            <span v-else-if="scope.row.gender === 1">男</span>
-            <span v-else>未知</span>
-          </template>
-        </el-table-column>
-        <el-table-column
-          prop="signature"
-          label="签名"
-        >
-          <template slot-scope="scope">
-            <el-tooltip
-              v-if="scope.row.signature"
-              :content="scope.row.signature"
-              raw-content
-              placement="top-start"
-            >
-              <span v-if="scope.row.signature.length <= 15">
-                {{ scope.row.signature }}
-              </span>
-              <span v-else>
-                {{ scope.row.signature.substr(0, 15) + "..." }}
-              </span>
-            </el-tooltip>
-            <span v-else>-</span>
-          </template>
-        </el-table-column>
-        <el-table-column
-          prop="following"
-          label="关注数"
-        />
-        <el-table-column
-          prop="follower"
-          label="粉丝数"
-        />
-        <el-table-column
-          prop="userId"
-          label="帐号状态"
-          width="120"
-        >
-          <template slot-scope="scope">
-            <el-tag v-if="scope.row.status === 1" :type="'warning'" disable-transitions>
-              正常
-            </el-tag>
-            <el-tag v-else-if="scope.row.status === 2" :type="'success'" disable-transitions>
-              禁言
-            </el-tag>
-            <el-tag v-else-if="scope.row.status === 3" :type="'danger'" disable-transitions>
-              封禁
-            </el-tag>
-            <el-tag v-else :type="'danger'" disable-transitions>
-              注销
-            </el-tag>
-          </template>
-        </el-table-column>
-        <el-table-column
-          fixed="right"
-          label="操作"
-        >
-          <template slot-scope="scope">
-            <el-button
-              size="mini"
-              @click="handleEdit(scope.$index, scope.row)"
-            >编辑</el-button>
-          </template>
-        </el-table-column>
-      </el-table>
-      <!-- 修改修改帐号状态对话框 -->
-      <el-dialog
-        append-to-body
-        :visible.sync="showEditScopeDialog"
-        width="30%"
-        center
-      >
-        <el-card class="box-card">
-          <div slot="header" class="clearfix">
-            <span>修改帐号状态</span>
-            <el-button style="float: right; padding: 3px 0" type="text" @click="onUpdateStatus">更新</el-button>
-          </div>
-          <div class="text item">
-            <el-select v-model="form.scope" placeholder="设置帐号状态">
-              <el-option label="正常" value="1" />
-              <el-option label="禁言" value="2" />
-              <el-option label="封禁" value="3" />
-            </el-select>
-          </div>
-        </el-card>
-      </el-dialog>
-    </el-row>
-    <el-row>
-      <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-row>
-</template>
-
-<script>
-import { getUserList } from '@/api/admin'
-
-export default {
-  name: 'UserList',
-  data() {
-    return {
-      // 屏幕宽度, 为了控制分页条的大小
-      screenWidth: document.body.clientWidth,
-      currentPage: 1,
-      pageSize: 20,
-      totalSize: 0,
-      dataList: [],
-      // **********************************************************************
-      showEditScopeDialog: false,
-      form: {
-        videoId: null,
-        scope: '1'
-      },
-      searchForm: {
-        page: 1,
-        type: '1',
-        content: null
-      }
-    }
-  },
-  created() {
-    document.title = '用户列表'
-    this.getData(this.searchForm)
-  },
-  methods: {
-    handleCurrentChange(pageNumber) {
-      this.currentPage = pageNumber
-      this.searchForm.page = this.currentPage
-      this.getData(this.searchForm)
-      // 回到顶部
-      scrollTo(0, 0)
-    },
-    getData(searchForm) {
-      this.dataList = []
-      getUserList(searchForm).then(resp => {
-        if (resp.code === 0) {
-          this.dataList = resp.data.list
-          this.totalSize = resp.data.totalSize
-        } else {
-          this.$notify({
-            title: '提示',
-            message: resp.msg,
-            type: 'warning',
-            duration: 3000
-          })
-        }
-      }).catch(error => {
-        this.$notify({
-          title: '提示',
-          message: error.message,
-          type: 'error',
-          duration: 3000
-        })
-      })
-    },
-    handleScope(index, row) {
-      this.form.videoId = row.videoId
-      this.form.scope = '' + row.scope
-      this.showEditScopeDialog = true
-    },
-    handleEdit(index, row) {
-      this.showEditScopeDialog = true
-    },
-    onUpdateStatus() {
-      this.showEditScopeDialog = false
-      this.$notify({
-        message: '接口未实现',
-        type: 'warning',
-        duration: 3000
-      })
-    },
-    search() {
-      this.currentPage = 1
-      this.searchForm.page = this.currentPage
-      this.getData(this.searchForm)
-    }
-  }
-}
-</script>
-
-<style>
-</style>

src/views/cam/Cam.vue

@@ -1,83 +0,0 @@
-<template>
-  <el-container style="height: 650px; border: 1px solid #eee">
-    <el-header style="text-align: right; font-size: 12px">
-      <el-row>
-        <el-col :md="2">
-          <ul class="el-menu--horizontal el-menu">
-            <li class="el-menu-item">
-              <a href="/cam" style="text-decoration-line: none">
-                <img src="@/assets/img/icon/logo.png" class="el-avatar--circle el-avatar--medium" alt="img">
-                MyCam
-              </a>
-            </li>
-          </ul>
-        </el-col>
-        <el-col :md="20">
-          <el-menu
-            :default-active="this.$route.path"
-            router
-            mode="horizontal"
-          >
-            <el-menu-item index="/cam/list">
-              <template slot="title" class="el-icon-camera">摄像头</template>
-            </el-menu-item>
-          </el-menu>
-        </el-col>
-        <el-col :md="2">
-          <el-dropdown>
-            <img
-              :src="user.avatarUrl"
-              class="el-avatar--circle el-avatar--medium"
-              style="margin-right: 10px; margin-top: 15px"
-              alt=""
-            >
-            <el-dropdown-menu slot="dropdown">
-              <el-dropdown-item
-                icon="el-icon-s-platform"
-                class="size"
-                @click.native="goToHome"
-              >主站</el-dropdown-item>
-              <el-dropdown-item
-                icon="el-icon-error"
-                class="size"
-                @click.native="goToLogout"
-              >退出</el-dropdown-item>
-            </el-dropdown-menu>
-          </el-dropdown>
-        </el-col>
-      </el-row>
-    </el-header>
-    <el-container>
-      <el-main>
-        <router-view />
-      </el-main>
-    </el-container>
-  </el-container>
-</template>
-
-<script>
-import { userMixin } from 'assets/js/mixin'
-import { getAuthedUser } from '@/utils/auth'
-
-export default {
-  name: 'Cam',
-  mixins: [userMixin],
-  data() {
-    return {
-      user: null,
-      loginUser: null
-    }
-  },
-  created() {
-    document.title = '我的监控'
-    const userInfo = getAuthedUser()
-    if (userInfo !== null) {
-      this.user = userInfo
-      this.loginUser = userInfo
-    }
-  }
-}
-</script>
-
-<style>
-</style>

src/views/cam/CamList.vue

@@ -1,342 +0,0 @@
-<template>
-  <el-row class="movie-list">
-    <el-col :md="18">
-      <el-row>
-        <el-button
-          size="mini"
-          type="warning"
-          class="el-icon-document-add"
-          @click="handleAdd"
-        >添加</el-button>
-        <el-table
-          :data="dataList"
-          style="width: 100%"
-        >
-          <el-table-column
-            label="No"
-            type="index"
-          />
-          <el-table-column
-            prop="addAt"
-            label="添加时间"
-            width="150"
-          />
-          <el-table-column
-            prop="camName"
-            label="摄像头名字"
-            width="150"
-          >
-            <template slot-scope="scope">
-              <router-link style="text-decoration-line: none" target="_blank" :to="`/cam/live/${scope.row.camId}`">
-                {{ scope.row.camName }}
-              </router-link>
-            </template>
-          </el-table-column>
-          <el-table-column
-            prop="state"
-            label="状态"
-          >
-            <template slot-scope="scope">
-              <el-tag v-if="scope.row.state" :type="'success'" disable-transitions>
-                推流中
-              </el-tag>
-              <el-tag v-else :type="'danger'" disable-transitions>
-                离线
-              </el-tag>
-            </template>
-          </el-table-column>
-          <el-table-column
-            label="操作"
-          >
-            <template slot-scope="scope">
-              <el-button
-                size="mini"
-                type="success"
-                @click="goToCamRecord(scope.row)"
-              >历史录像</el-button>
-              <el-button
-                size="mini"
-                @click="handleEdit(scope.$index, scope.row)"
-              >修改名字</el-button>
-              <el-button
-                size="mini"
-                @click="handleDetail(scope.$index, scope.row)"
-              >推流地址</el-button>
-              <el-button
-                size="mini"
-                type="danger"
-                @click="handleDelete(scope.$index, scope.row)"
-              >删除</el-button>
-            </template>
-          </el-table-column>
-        </el-table>
-        <!-- 添加摄像头对话框 -->
-        <el-dialog
-          append-to-body
-          :visible.sync="showEditScopeDialog"
-          width="50%"
-          center
-        >
-          <el-card class="box-card">
-            <div slot="header" class="clearfix">
-              <h3>添加摄像头</h3>
-            </div>
-            <div class="text item">
-              <el-form ref="form" :model="addCamForm" label-width="80px">
-                <el-form-item label="设备 ID">
-                  <el-input v-model="addCamForm.deviceId" />
-                </el-form-item>
-                <el-form-item label="设备名字">
-                  <el-input v-model="addCamForm.deviceName" />
-                </el-form-item>
-                <el-form-item>
-                  <el-button type="primary" @click="onAddCam">立即添加</el-button>
-                  <el-button>取消</el-button>
-                </el-form-item>
-              </el-form>
-            </div>
-          </el-card>
-        </el-dialog>
-        <!-- 修改摄像头名字对话框 -->
-        <el-dialog
-          append-to-body
-          :visible.sync="showUpdateDialog"
-          width="50%"
-          center
-        >
-          <el-card class="box-card">
-            <div slot="header" class="clearfix">
-              <h3>修改摄像头名字</h3>
-            </div>
-            <div class="text item">
-              <el-form ref="form" :model="updateNameForm" label-width="80px">
-                <el-form-item label="新名字">
-                  <el-input v-model="updateNameForm.newName" />
-                </el-form-item>
-                <el-form-item>
-                  <el-button type="primary" @click="onUpdateCam">立即修改</el-button>
-                  <el-button>取消</el-button>
-                </el-form-item>
-              </el-form>
-            </div>
-          </el-card>
-        </el-dialog>
-        <!-- 摄像头详情对话框 -->
-        <el-dialog
-          append-to-body
-          :visible.sync="showDetailDialog"
-          width="50%"
-          center
-        >
-          <el-card class="box-card">
-            <div slot="header" class="clearfix">
-              <h3>推流地址</h3>
-            </div>
-            <div class="text item">
-              <h3>{{ pushUrl }}</h3>
-            </div>
-          </el-card>
-        </el-dialog>
-      </el-row>
-      <el-row>
-        <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-col>
-  </el-row>
-</template>
-
-<script>
-import {
-  getVideoResource
-} from '@/api/video'
-import { addCam, deleteCam, getCamPushUrl, getUserCams, updateCamName } from '@/api/cam'
-
-export default {
-  name: 'CamList',
-  data() {
-    return {
-      // 屏幕宽度, 为了控制分页条的大小
-      screenWidth: document.body.clientWidth,
-      currentPage: 1,
-      pageSize: 20,
-      totalSize: 0,
-      dataList: [],
-      // **********************************************************************
-      showEditScopeDialog: false,
-      showUpdateDialog: false,
-      showDetailDialog: false,
-      videoResources: [],
-      addCamForm: {
-        deviceId: null,
-        deviceName: null
-      },
-      updateNameForm: {
-        camId: null,
-        newName: null
-      },
-      pushUrl: null
-    }
-  },
-  created() {
-    document.title = '摄像头列表'
-    this.getData(this.currentPage)
-  },
-  methods: {
-    handleCurrentChange(pageNumber) {
-      this.currentPage = pageNumber
-      this.getData(this.currentPage)
-      // 回到顶部
-      scrollTo(0, 0)
-    },
-    getData() {
-      this.dataList = []
-      getUserCams(this.currentPage).then(resp => {
-        if (resp.code === 0) {
-          this.dataList = resp.data.list
-          this.totalSize = resp.data.totalSize
-        } else {
-          this.$notify({
-            title: '提示',
-            message: resp.msg,
-            type: 'warning',
-            duration: 3000
-          })
-        }
-      }).catch(error => {
-        this.$notify({
-          title: '提示',
-          message: error.message,
-          type: 'error',
-          duration: 3000
-        })
-      })
-    },
-    handleVideoResource(index, row) {
-      const videoId = row.videoId
-      getVideoResource(videoId).then(resp => {
-        if (resp.code === 0) {
-          this.videoResources = resp.data
-        }
-      })
-    },
-    handleAdd(index, row) {
-      this.showEditScopeDialog = true
-    },
-    handleEdit(index, row) {
-      this.updateNameForm.camId = row.camId
-      this.showUpdateDialog = true
-    },
-    handleDetail(index, row) {
-      getCamPushUrl(row.camId).then(resp => {
-        if (resp.code === 0) {
-          this.pushUrl = resp.data
-          this.showDetailDialog = true
-        }
-      })
-    },
-    handleDelete(index, row) {
-      this.$confirm('确定要删除 ' + row.title + '?', '提示', {
-        confirmButtonText: '确定',
-        cancelButtonText: '取消',
-        type: 'warning'
-      }).then(() => {
-        deleteCam(row.camId).then(resp => {
-          if (resp.code === 0) {
-            this.$notify({
-              title: '提示',
-              message: '摄像头已删除',
-              type: 'warning',
-              duration: 3000
-            })
-            this.$router.go(0)
-          }
-        })
-      }).catch(() => {
-        this.$message({
-          type: 'info',
-          message: '已取消'
-        })
-      })
-    },
-    onAddCam() {
-      this.showEditScopeDialog = false
-      addCam(this.addCamForm).then(resp => {
-        if (resp.code === 0) {
-          this.addCamForm = {
-            deviceId: null,
-            deviceName: null
-          }
-          this.$notify({
-            title: '提示',
-            message: '摄像头已添加',
-            type: 'warning',
-            duration: 3000
-          })
-        }
-      }).catch(error => {
-        this.$notify({
-          title: '提示',
-          message: error.message,
-          type: 'warning',
-          duration: 3000
-        })
-      })
-    },
-    onUpdateCam() {
-      this.showUpdateDialog = false
-      updateCamName(this.updateNameForm).then(resp => {
-        if (resp.code === 0) {
-          this.$notify({
-            title: '提示',
-            message: '摄像头名字已更新',
-            type: 'warning',
-            duration: 3000
-          })
-        }
-      }).catch(error => {
-        this.$notify({
-          title: '提示',
-          message: error.message,
-          type: 'warning',
-          duration: 3000
-        })
-      })
-    },
-    goToCamRecord(row) {
-      const path = '/cam/record/' + row.camId
-      if (this.$route.path === path) {
-        this.$router.go(0)
-        return
-      }
-      this.$router.push(path)
-    }
-  }
-}
-</script>
-
-<style>
-/*处于手机屏幕时*/
-@media screen and (max-width: 768px) {
-  .movie-list {
-    padding-top: 8px;
-    padding-left: 0.5%;
-    padding-right: 0.5%;
-  }
-}
-
-.movie-list {
-  padding-top: 15px;
-  padding-left: 6%;
-  padding-right: 6%;
-}
-</style>

src/views/cam/LivePage.vue

@@ -1,172 +0,0 @@
-<template>
-  <el-row class="movie-list">
-    <el-col :md="16">
-      <el-row style="padding-right: 5px; padding-left: 5px; padding-bottom: 5px">
-        <el-card class="box-card">
-          <div slot="header" class="clearfix">
-            <h3 v-if="camDetail != null" v-html="camDetail.camName" />
-          </div>
-          <div class="text item">
-            <div id="dplayer" ref="dplayer" style="height: 480px;" />
-          </div>
-        </el-card>
-      </el-row>
-    </el-col>
-    <el-col :md="8">
-      <el-row>
-        <el-row style="padding-right: 5px; padding-left: 5px; padding-bottom: 5px">
-          <el-card class="box-card">
-            <div slot="header" class="clearfix">
-              <el-select v-model="camId" placeholder="选择摄像头" @change="onSelect">
-                <el-option
-                  v-for="item in camList"
-                  :key="item.value"
-                  :label="item.name"
-                  :value="item.value"
-                />
-              </el-select>
-              <el-button style="float: right; padding: 3px 0" type="text" @click="goToCamRecord">历史录像</el-button>
-            </div>
-          </el-card>
-        </el-row>
-      </el-row>
-    </el-col>
-  </el-row>
-</template>
-
-<script>
-import flvjs from 'flv.js'
-import DPlayer from 'dplayer'
-import { getCamDetail, getCamList } from '@/api/cam'
-
-export default {
-  name: 'LivePage',
-  data() {
-    return {
-      flvjs,
-      DPlayer,
-      user: {
-        userId: 1,
-        screenName: '浩',
-        avatarUrl: '//pic1.zhimg.com/v2-c755e7ec5510b0638c2d1bead712544a_r.jpg',
-        following: 1024,
-        follower: 1024
-      },
-      camId: null,
-      camList: [],
-      camDetail: null
-    }
-  },
-  watch: {
-    $route() {
-      this.$router.go()
-    }
-  },
-  created() {
-    const camId = this.$route.params.camId
-    this.camId = camId
-    getCamDetail(camId).then(resp => {
-      if (resp.code === 0) {
-        var camDetail = resp.data
-        this.camDetail = camDetail
-        document.title = camDetail.camName + '实时录像'
-
-        var ele = document.querySelector('#dplayer')
-        if (camDetail.state) {
-          const flvUrl = camDetail.pullUrl
-          this.initFlvPlayer(camId, flvUrl)
-        } else {
-          ele.innerHTML = '<h5>摄像头离线, 你可以查看本摄像头的' +
-            '<a style="text-decoration-line: none; color: red" target="_blank" href="/cam/record/' + this.camId + '">历史录像</a>' +
-            '</h5>'
-        }
-      }
-    })
-
-    getCamList().then(resp => {
-      if (resp.code === 0) {
-        this.camList = resp.data
-      }
-    })
-  },
-  methods: {
-    onSelect(value) {
-      const path = '/cam/live/' + value
-      if (this.$route.path === path) {
-        this.$router.go(0)
-        return
-      }
-      this.$router.push(path)
-    },
-    initFlvPlayer(videoId, flvUrl) {
-      new DPlayer({
-        container: document.querySelector('#dplayer'),
-        live: true,
-        screenshot: true,
-        autoplay: false,
-        volume: 0.1,
-        mutex: true,
-        video: {
-          url: flvUrl,
-          type: 'customFlv',
-          customType: {
-            customFlv: function(video, player) {
-              const flvPlayer = flvjs.createPlayer({
-                type: 'flv',
-                url: video.src
-              })
-              flvPlayer.attachMediaElement(video)
-              flvPlayer.load()
-            }
-          }
-        }
-      })
-    },
-    goToCamRecord() {
-      const path = '/cam/record/' + this.camId
-      if (this.$route.path === path) {
-        this.$router.go(0)
-        return
-      }
-      this.$router.push(path)
-    }
-  }
-}
-</script>
-
-<style scoped>
-/*处于手机屏幕时*/
-@media screen and (max-width: 768px) {
-  .movie-list {
-    padding-top: 8px;
-    padding-left: 0.5%;
-    padding-right: 0.5%;
-  }
-}
-
-.movie-list {
-  padding-top: 15px;
-  padding-left: 5%;
-  padding-right: 5%;
-}
-
-.clearfix:before,
-.clearfix:after {
-  display: table;
-  content: "";
-}
-
-.clearfix:after {
-  clear: both;
-}
-
-.budge{
-  width: 10px;
-  height: 10px;
-  border-radius: 5px;
-  margin: 10px auto;
-}
-.blue{
-  background-color: #409eff;
-}
-</style>

src/views/cam/LivePage0.vue

@@ -1,177 +0,0 @@
-<template>
-  <el-row v-if="camDetail !== null" class="movie-list">
-    <el-col :md="16">
-      <el-row style="padding-right: 5px; padding-left: 5px; padding-bottom: 5px">
-        <el-card class="box-card">
-          <div slot="header" class="clearfix">
-            <h3 v-html="camDetail.camName" />
-          </div>
-          <div v-if="camDetail.state" id="videoplayer" class="text item">
-            <div id="dplayer" ref="dplayer" style="height: 480px;" />
-          </div>
-          <div v-else>
-            <h5>摄像头离线, 你可以查看本摄像头的<router-link style="text-decoration-line: none; color: red" target="_blank" :to="`/my/cam/record`">历史录像</router-link></h5>
-          </div>
-        </el-card>
-      </el-row>
-    </el-col>
-    <el-col :md="8">
-      <el-row>
-        <el-row style="padding-right: 5px; padding-left: 5px; padding-bottom: 5px">
-          <el-card class="box-card">
-            <div slot="header" class="clearfix">
-              <el-select v-model="camNameModel" placeholder="选择摄像头" @change="onSelect">
-                <el-option
-                  v-for="item in camList"
-                  :key="item.value"
-                  :label="item.name"
-                  :value="item.value"
-                />
-              </el-select>
-              <el-button style="float: right; padding: 3px 0" type="text" @click="goToCamRecord">历史录像</el-button>
-            </div>
-          </el-card>
-        </el-row>
-      </el-row>
-    </el-col>
-  </el-row>
-</template>
-
-<script>
-import flvjs from 'flv.js'
-import DPlayer from 'dplayer'
-import { getCamDetail, getCamList } from '@/api/cam'
-
-export default {
-  name: 'LivePage0',
-  data() {
-    return {
-      flvjs,
-      DPlayer,
-      user: {
-        userId: 10001,
-        screenName: '浩',
-        avatarUrl: '//pic1.zhimg.com/v2-c755e7ec5510b0638c2d1bead712544a_r.jpg',
-        following: 1024,
-        follower: 1024
-      },
-      camList: [],
-      camNameModel: null,
-      camDetail: null
-    }
-  },
-  watch: {
-    $route() {
-      this.$router.go()
-    }
-  },
-  created() {
-    const camId = '103758827520'
-    if (camId === undefined || camId === null) {
-      return
-    }
-
-    getCamDetail(camId).then(resp => {
-      if (resp.code === 0) {
-        var camDetail = resp.data
-        this.camDetail = camDetail
-        this.camNameModel = camDetail.camName
-        document.title = camDetail.camName + '实时录像'
-
-        if (!camDetail.state) {
-          const msg = camDetail.camName + '离线'
-          console.log(msg)
-          var container = document.getElementById('videoplayer')
-          console.log(container)
-          // container.innerHTML = msg
-        } else {
-          console.log(camDetail)
-          const flvUrl = camDetail.pullUrl
-          this.initFlvPlayer(camId, flvUrl)
-        }
-      }
-    })
-
-    getCamList().then(resp => {
-      if (resp.code === 0) {
-        this.camList = resp.data
-      }
-    })
-  },
-  methods: {
-    onSelect(value) {
-      const path = '/my/cam/live/' + value
-      if (this.$route.path === path) {
-        this.$router.go(0)
-        return
-      }
-      this.$router.push(path)
-    },
-    initFlvPlayer(videoId, flvUrl) {
-      new DPlayer({
-        container: document.getElementById('dplayer'),
-        live: true,
-        video: {
-          url: flvUrl,
-          type: 'customFlv',
-          customType: {
-            customFlv: function(video, player) {
-              const flvPlayer = flvjs.createPlayer({
-                type: 'flv',
-                url: video.src
-              })
-              flvPlayer.attachMediaElement(video)
-              flvPlayer.load()
-            }
-          }
-        }
-      })
-    },
-    goToCamRecord() {
-      const path = '/my/cam/record'
-      if (this.$route.path === path) {
-        this.$router.go(0)
-        return
-      }
-      this.$router.push(path)
-    }
-  }
-}
-</script>
-
-<style scoped>
-/*处于手机屏幕时*/
-@media screen and (max-width: 768px) {
-  .movie-list {
-    padding-top: 8px;
-    padding-left: 0.5%;
-    padding-right: 0.5%;
-  }
-}
-
-.movie-list {
-  padding-top: 15px;
-  padding-left: 5%;
-  padding-right: 5%;
-}
-
-.clearfix:before,
-.clearfix:after {
-  display: table;
-  content: "";
-}
-
-.clearfix:after {
-  clear: both;
-}
-
-.budge{
-  width: 10px;
-  height: 10px;
-  border-radius: 5px;
-  margin: 10px auto;
-}
-.blue{
-  background-color: #409eff;
-}
-</style>

src/views/cam/LivePage1.vue

@@ -1,187 +0,0 @@
-<template>
-  <div class="app-container">
-    <el-form ref="queryForm" :model="queryParams" size="small" :inline="true">
-      <el-form-item label="年份" prop="holidayYear">
-        <el-date-picker
-          v-model="queryParams.holidayYear"
-          type="year"
-          :clearable="false"
-          placeholder="选择年"
-        />
-      </el-form-item>
-      <el-form-item>
-        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
-        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
-      </el-form-item>
-    </el-form>
-    <el-row>
-      <div v-for="cal in defaultCals" @click="handleUpdateHoliday(cal)">
-        <el-col :span="6">
-          <el-calendar :value="cal" class="holiday">
-            <template slot="dateCell" slot-scope="{date, data}" class="temp-mt">
-              <div v-show="data.type === 'current-month'" :id="cal.getMonth()+'-'+data.day" class="holiday-cell">
-                {{ data.day.split('-')[2] }}
-              </div>
-            </template>
-          </el-calendar>
-        </el-col>
-      </div>
-    </el-row>
-
-    <el-dialog title="节假日设置" :visible.sync="show" width="40%">
-      <el-calendar :value="currentMonth" class="select-month">
-        <!-- 这里使用的是 2.5 slot 语法，对于新项目请使用 2.6 slot 语法-->
-        <template slot="dateCell" slot-scope="{date, data}" class="temp-mt">
-          <div v-show="data.type === 'current-month'" class="holiday-cell" @click="selectDate(date,data)">
-            <span>{{ data.day.split('-')[2] }}</span>
-            <span :id="data.day">{{ initHolidayDate(data) }}</span>
-          </div>
-        </template>
-      </el-calendar>
-      <span slot="footer" class="dialog-footer">
-        <el-button @click="show = false">取 消</el-button>
-        <el-button type="primary" @click="submitHoliday">确 定</el-button>
-      </span>
-    </el-dialog>
-  </div>
-</template>
-
-<script>
-
-export default {
-  name: 'Temp',
-  data() {
-    return {
-      queryParams: {
-        holidayYear: new Date()
-      },
-      // 设置的月份
-      defaultCals: [],
-      // 全年已选中的日期
-      holidayDate: [],
-      // 弹框
-      show: false,
-      // 点击修改的月份
-      currentMonth: undefined,
-      // 点击月中已选中的日期
-      currentDate: []
-    }
-  },
-  created() {
-    // 初始化日历
-    const nowYear = new Date().getFullYear()
-    this.initCalendar(nowYear)
-  },
-  methods: {
-    // 初始化日历
-    initCalendar(year) {
-      this.defaultCals = [
-        new Date(year, 0, 1), new Date(year, 1, 1), new Date(year, 2, 1),
-        new Date(year, 3, 1), new Date(year, 4, 1), new Date(year, 5, 1),
-        new Date(year, 6, 1), new Date(year, 7, 1), new Date(year, 8, 1),
-        new Date(year, 9, 1), new Date(year, 10, 1), new Date(year, 11, 1)
-      ]
-
-      // 调接口获取
-      this.holidayDate = [
-        { day: 2, date: '0-' + year + '-01-02' },
-        { day: 2, date: '1-' + year + '-02-02' },
-        { day: 2, date: '2-' + year + '-03-02' }
-      ]
-      this.$nextTick(() => {
-        const holidayCell = document.getElementsByClassName('holiday-cell')
-        for (const i in holidayCell) {
-          if (undefined != holidayCell[i].style) {
-            holidayCell[i].style.backgroundColor = '#FFFFFF'
-          }
-        }
-        // 给已选中的日期加背景色
-        for (const i in this.holidayDate) {
-          const span = document.getElementById(this.holidayDate[i].date)
-          span.style.backgroundColor = '#F56C6C'
-        }
-      })
-    },
-    /** 搜索按钮操作 */
-    handleQuery() {
-      const year = this.queryParams.holidayYear.getFullYear()
-      this.initCalendar(year)
-    },
-    /** 重置按钮操作 */
-    resetQuery() {
-      this.resetForm('queryForm')
-      this.queryParams.holidayYear = new Date()
-      this.handleQuery()
-    },
-    // 初始化已选中的日期
-    initHolidayDate(data) {
-      for (const i in this.currentDate) {
-        if (data.day === this.currentDate[i].date) {
-          data.isSelected = true
-          return '✔️'
-        }
-      }
-    },
-    // 节假日设置
-    handleUpdateHoliday(cal) {
-      this.show = true
-      this.currentMonth = cal
-      // 调接口获取
-      this.currentDate = [
-        { day: 2, date: cal.getFullYear() + '-01-02' }
-      ]
-    },
-    selectDate(date, data) {
-      const day = date.getDate()
-      const span = document.getElementById(data.day)
-      if (span.innerText) {
-        span.innerText = ''
-        for (const i in this.currentDate) {
-          if (day === this.currentDate[i].day) {
-            this.currentDate.splice(i, 1)
-          }
-        }
-      } else {
-        span.innerText = '✔️'
-        this.currentDate.push({ day: day, date: data.day })
-      }
-    },
-    // 提交
-    submitHoliday() {
-      console.log(this.currentMonth, this.currentDate)
-      this.show = false
-      this.queryParams.holidayYear = this.currentMonth
-      this.handleQuery()
-    }
-  }
-}
-</script>
-
-<style>
-.holiday .el-calendar__button-group{
-  display: none;
-}
-
-.select-month .el-calendar__button-group{
-  display: none;
-}
-
-.holiday .el-calendar-day{
-  padding: 1px;
-  width: 100%;
-  height: 34px;
-}
-
-.select-month .el-calendar-day{
-  padding: 1px;
-  width: 100%;
-}
-
-.holiday-cell{
-  width: 100%;
-  height: 100%;
-  display:flex;
-  justify-content: center;
-  align-items: center;
-}
-</style>

src/views/cam/RecordPage.vue

@@ -1,314 +0,0 @@
-<template>
-  <el-row v-if="camDetail !== null" class="movie-list">
-    <el-col :md="16">
-      <el-row style="padding-right: 5px; padding-left: 5px; padding-bottom: 5px">
-        <el-card class="box-card">
-          <div slot="header" class="clearfix">
-            <el-select v-model="camId" placeholder="选择摄像头" @change="onSelect">
-              <el-option
-                v-for="item in camList"
-                :key="item.value"
-                :label="item.name"
-                :value="item.value"
-              />
-            </el-select>
-            <el-button style="float: right; padding: 3px 0" type="text" @click="goToCamLive">实时录像</el-button>
-          </div>
-          <div id="videoplayer" class="text item">
-            <div id="dplayer" ref="dplayer" style="height: 480px;" />
-          </div>
-        </el-card>
-      </el-row>
-    </el-col>
-    <el-col :md="8">
-      <el-row v-if="showCalender" style="padding-right: 5px; padding-left: 5px; padding-bottom: 5px">
-        <el-card class="box-card">
-          <div class="text item">
-            <el-calendar v-model="calendarDate">
-              <div
-                slot="dateCell"
-                slot-scope="{ date, data }"
-                @click="handleCellClick(date, data)"
-              >
-                <p>{{ data.day.split("-").slice(2).join() }}</p>
-                <p v-if="dealMyDate(data.day)" class="blue budge" />
-              </div>
-            </el-calendar>
-          </div>
-        </el-card>
-      </el-row>
-      <el-row v-if="showRecordList" style="padding-right: 5px; padding-left: 5px; padding-bottom: 5px">
-        <el-card class="box-card">
-          <div slot="header" class="clearfix">
-            <el-row>
-              <h3>录像列表</h3>
-            </el-row>
-            <el-button style="float: right; padding: 3px 0" type="text" @click="goToCamLive1">显示日历</el-button>
-          </div>
-          <div class="text item">
-            <el-table
-              :data="recordList"
-              height="480"
-              style="width: 100%"
-              @row-click="onClickRow"
-            >
-              <el-table-column
-                label="开始时间"
-                prop="startAt"
-              >
-                <template slot-scope="scope">
-                  <span>{{ scope.row.startAt }}</span>
-                </template>
-              </el-table-column>
-              <el-table-column
-                label="时长(秒)"
-                prop="duration"
-              >
-                <template slot-scope="scope">
-                  <span>{{ scope.row.duration }}</span>
-                </template>
-              </el-table-column>
-            </el-table>
-          </div>
-        </el-card>
-      </el-row>
-    </el-col>
-  </el-row>
-</template>
-
-<script>
-import DPlayer from 'dplayer'
-import {
-  getCamDetail,
-  getCamList,
-  getCamRecord,
-  getCamRecordByDay,
-  getCamRecordByMonth,
-  getLatestRecord
-} from '@/api/cam'
-
-export default {
-  name: 'RecordPage',
-  data() {
-    return {
-      DPlayer,
-      user: {
-        userId: 1,
-        screenName: '浩',
-        avatarUrl: '//pic1.zhimg.com/v2-c755e7ec5510b0638c2d1bead712544a_r.jpg',
-        following: 1024,
-        follower: 1024
-      },
-      camId: null,
-      calendarDate: new Date(),
-      dateMap: new Map(),
-      showCalender: false,
-      showRecordList: false,
-      camList: [],
-      cam: null,
-      camDetail: null,
-      form: {},
-      recordList: [],
-      camRecord: null
-    }
-  },
-  watch: {
-    $route() {
-      this.$router.go()
-    },
-    calendarDate: {
-      handler(newValue, oldValue) {
-        const oldMonth = this.getYearMonth(oldValue)
-        const newMonth = this.getYearMonth(newValue)
-        if (oldMonth !== newMonth) {
-          this.showCalender = false
-          this.form.yearMonth = this.getYearMonth(newValue)
-          getCamRecordByMonth(this.form).then(resp => {
-            if (resp.code === 0) {
-              this.dateMap.clear()
-              for (const item of resp.data) {
-                const date1 = new Date(item)
-                const dayStr = this.getYearMonthDay(date1)
-                this.dateMap.set(dayStr, date1)
-              }
-            }
-            this.showCalender = true
-          })
-        }
-      }
-    }
-  },
-  created() {
-    const camId = this.$route.params.camId
-    this.camId = camId
-    getCamDetail(camId).then(resp => {
-      if (resp.code === 0) {
-        var camDetail = resp.data
-        this.camDetail = camDetail
-        document.title = camDetail.camName + '历史录像'
-      }
-    })
-
-    this.form.camId = camId
-    this.form.yearMonth = this.getYearMonth(new Date())
-    getCamRecordByMonth(this.form).then(resp => {
-      if (resp.code === 0) {
-        this.dateMap.clear()
-        for (const item of resp.data) {
-          const date1 = new Date(item)
-          const dayStr = this.getYearMonthDay(date1)
-          this.dateMap.set(dayStr, date1)
-        }
-        this.showCalender = true
-      }
-    })
-
-    getCamList().then(resp => {
-      if (resp.code === 0) {
-        this.camList = resp.data
-      }
-    })
-
-    // const today = new Date()
-    getLatestRecord(camId).then(resp => {
-      if (resp.code === 0) {
-        const respData = resp.data
-        this.initMp4Player(respData.coverUrl, respData.videoUrl)
-      }
-    }).catch(error => {
-      console.log(error)
-      var ele = document.querySelector('#dplayer')
-      ele.innerHTML = '<h5>没有今天的录像记录</h5>'
-    })
-  },
-  methods: {
-    onSelect(value) {
-      const path = '/cam/record/' + value
-      if (this.$route.path === path) {
-        this.$router.go(0)
-        return
-      }
-      this.$router.push(path)
-    },
-    handleCellClick(date, data) {
-      this.form.yearMonthDay = this.getYearMonthDay(date)
-      getCamRecordByDay(this.form).then(resp => {
-        if (resp.code === 0) {
-          this.showCalender = false
-          this.showRecordList = true
-          this.recordList = resp.data
-        }
-      })
-    },
-    dealMyDate(val) {
-      let res = ''
-
-      /* this.potDate = [
-        { date: '2024-02-02', hasRecord: true },
-        { date: '2024-02-01', hasRecord: true }
-      ]
-      for (let i = 0; i < this.potDate.length; i++) {
-        if (this.potDate[i].date === val) {
-          res = this.potDate[i].hasRecord
-          break
-        }
-      }*/
-
-      if (this.dateMap.get(val) != null) {
-        res = true
-      }
-      return res
-    },
-    getYearMonth(date) {
-      const year = date.getFullYear().toString().padStart(4, '0')
-      const month = (date.getMonth() + 1).toString().padStart(2, '0')
-      // const day = date.getDate().toString().padStart(2, '0')
-      // const hour = date.getHours().toString().padStart(2, '0')
-      // const minute = date.getMinutes().toString().padStart(2, '0')
-      // const second = date.getSeconds().toString().padStart(2, '0')
-      // 2023-02-16 08:25:05
-      // console.log(`${year}-${month}-${day} ${hour}:${minute}:${second}`)
-      return year + '-' + month
-    },
-    getYearMonthDay(date) {
-      const year = date.getFullYear().toString().padStart(4, '0')
-      const month = (date.getMonth() + 1).toString().padStart(2, '0')
-      const day = date.getDate().toString().padStart(2, '0')
-      return year + '-' + month + '-' + day
-    },
-    initMp4Player(coverUrl, videoUrl) {
-      new DPlayer({
-        container: document.getElementById('dplayer'),
-        lang: 'zh-cn',
-        autoplay: false,
-        volume: 0.1,
-        mutex: true,
-        video: {
-          pic: coverUrl,
-          url: videoUrl,
-          hotkey: true
-        }
-      })
-    },
-    onClickRow(row) {
-      const recordId = row.recordId
-      getCamRecord(recordId).then(resp => {
-        if (resp.code === 0) {
-          const respData = resp.data
-          console.log(respData)
-          this.initMp4Player(respData.coverUrl, respData.videoUrl)
-        }
-      })
-    },
-    goToCamLive() {
-      const path = '/cam/live/' + this.camId
-      if (this.$route.path === path) {
-        this.$router.go(0)
-        return
-      }
-      this.$router.push(path)
-    },
-    goToCamLive1() {
-      this.showRecordList = false
-      this.showCalender = true
-    }
-  }
-}
-</script>
-
-<style scoped>
-/*处于手机屏幕时*/
-@media screen and (max-width: 768px) {
-  .movie-list {
-    padding-top: 8px;
-    padding-left: 0.5%;
-    padding-right: 0.5%;
-  }
-}
-
-.movie-list {
-  padding-top: 15px;
-  padding-left: 5%;
-  padding-right: 5%;
-}
-
-.clearfix:before,
-.clearfix:after {
-  display: table;
-  content: "";
-}
-
-.clearfix:after {
-  clear: both;
-}
-
-.budge{
-  width: 10px;
-  height: 10px;
-  border-radius: 5px;
-  margin: 10px auto;
-}
-.blue{
-  background-color: #409eff;
-}
-</style>

src/views/cam/RecordPage0.vue

@@ -1,315 +0,0 @@
-<template>
-  <el-row v-if="camDetail !== null" class="movie-list">
-    <el-col :md="16">
-      <el-row style="padding-right: 5px; padding-left: 5px; padding-bottom: 5px">
-        <el-card class="box-card">
-          <div slot="header" class="clearfix">
-            <h3 v-html="camDetail.camName" />
-          </div>
-          <div id="videoplayer" class="text item">
-            <div id="dplayer" ref="dplayer" style="height: 480px;" />
-          </div>
-        </el-card>
-      </el-row>
-    </el-col>
-    <el-col :md="8">
-      <el-row>
-        <el-row style="padding-right: 5px; padding-left: 5px; padding-bottom: 5px">
-          <el-card class="box-card">
-            <div slot="header" class="clearfix">
-              <el-select v-model="cam" placeholder="选择摄像头" @change="onSelect">
-                <el-option
-                  v-for="item in camList"
-                  :key="item.value"
-                  :label="item.name"
-                  :value="item.value"
-                />
-              </el-select>
-              <el-button style="float: right; padding: 3px 0" type="text" @click="goToCamLive">实时录像</el-button>
-            </div>
-            <div class="text item">
-              <el-calendar v-if="showCalender" v-model="calendarDate">
-                <div
-                  slot="dateCell"
-                  slot-scope="{ date, data }"
-                  @click="handleCellClick(date, data)"
-                >
-                  <p>{{ data.day.split("-").slice(2).join() }}</p>
-                  <p v-if="dealMyDate(data.day)" class="blue budge" />
-                </div>
-              </el-calendar>
-            </div>
-          </el-card>
-        </el-row>
-        <el-row style="padding-right: 5px; padding-left: 5px; padding-bottom: 5px">
-          <el-card v-if="showRecordList" class="box-card">
-            <div slot="header" class="clearfix">
-              <el-row>
-                <h3>列表</h3>
-              </el-row>
-            </div>
-            <div class="text item">
-              <el-table
-                :data="recordList"
-                :show-header="false"
-                height="480"
-                style="width: 100%"
-              >
-                <el-table-column
-                  prop="title"
-                >
-                  <template slot-scope="scope">
-                    <span>{{ scope.row.title | ellipsis }}</span>
-                  </template>
-                </el-table-column>
-                <el-table-column
-                  prop="duration"
-                >
-                  <template slot-scope="scope">
-                    <span>{{ scope.row.duration }}</span>
-                  </template>
-                </el-table-column>
-              </el-table>
-            </div>
-          </el-card>
-        </el-row>
-      </el-row>
-    </el-col>
-  </el-row>
-</template>
-
-<script>
-import DPlayer from 'dplayer'
-import {
-  getCamDetail,
-  getCamList,
-  getCamRecord,
-  getCamRecordByDay,
-  getCamRecordByMonth,
-  getLatestRecord
-} from '@/api/cam'
-
-export default {
-  name: 'RecordPage',
-  data() {
-    return {
-      DPlayer,
-      user: {
-        userId: 10001,
-        screenName: '浩',
-        avatarUrl: '//pic1.zhimg.com/v2-c755e7ec5510b0638c2d1bead712544a_r.jpg',
-        following: 1024,
-        follower: 1024
-      },
-      calendarDate: new Date(),
-      dateMap: new Map(),
-      showRecordList: false,
-      camList: [],
-      cam: null,
-      camDetail: null,
-      form: {},
-      recordList: [],
-      camRecord: null,
-      showCalender: false
-    }
-  },
-  watch: {
-    $route() {
-      this.$router.go()
-    },
-    calendarDate: {
-      handler(newValue, oldValue) {
-        const oldMonth = this.getYearMonth(oldValue)
-        const newMonth = this.getYearMonth(newValue)
-        if (oldMonth !== newMonth) {
-          this.showCalender = false
-          this.form.yearMonth = this.getYearMonth(newValue)
-          getCamRecordByMonth(this.form).then(resp => {
-            if (resp.code === 0) {
-              this.dateMap.clear()
-              for (const item of resp.data) {
-                const date1 = new Date(item)
-                const dayStr = this.getYearMonthDay(date1)
-                this.dateMap.set(dayStr, date1)
-              }
-            }
-            this.showCalender = true
-          })
-        }
-      }
-    }
-  },
-  created() {
-    const camId = '103758827520'
-    if (camId === undefined || camId === null) {
-      return
-    }
-
-    getCamDetail(camId).then(resp => {
-      if (resp.code === 0) {
-        var camDetail = resp.data
-        this.camDetail = camDetail
-        document.title = camDetail.camName + '历史录像'
-      }
-    })
-
-    this.cam = camId
-    this.form.camId = camId
-    this.form.yearMonth = this.getYearMonth(new Date())
-    getCamRecordByMonth(this.form).then(resp => {
-      if (resp.code === 0) {
-        this.dateMap.clear()
-        for (const item of resp.data) {
-          const date1 = new Date(item)
-          const dayStr = this.getYearMonthDay(date1)
-          this.dateMap.set(dayStr, date1)
-        }
-        this.showCalender = true
-      }
-    })
-
-    getCamList().then(resp => {
-      if (resp.code === 0) {
-        this.camList = resp.data
-      }
-    })
-
-    getLatestRecord(camId).then(resp => {
-      if (resp.code === 0) {
-        const respData = resp.data
-        // this.initMp4Player(respData.coverUrl, respData.videoUrl)
-      }
-    })
-  },
-  methods: {
-    onSelect(value) {
-      this.form.camId = value
-      this.form.yearMonth = this.getYearMonth(this.calendarDate)
-      this.showCalender = false
-      getCamRecordByMonth(this.form).then(resp => {
-        if (resp.code === 0) {
-          for (const item of resp.data) {
-            const date1 = new Date(item)
-            const dayStr = this.getYearMonthDay(date1)
-            this.dateMap.set(dayStr, date1)
-          }
-        }
-
-        this.showCalender = true
-      })
-    },
-    handleCellClick(date, data) {
-      this.form.yearMonthDay = this.getYearMonthDay(date)
-      getCamRecordByDay(this.form).then(resp => {
-        if (resp.code === 0) {
-          this.showRecordList = true
-          this.recordList = resp.data
-        }
-      })
-    },
-    dealMyDate(val) {
-      let res = ''
-
-      /* this.potDate = [
-        { date: '2024-02-02', hasRecord: true },
-        { date: '2024-02-01', hasRecord: true }
-      ]
-      for (let i = 0; i < this.potDate.length; i++) {
-        if (this.potDate[i].date === val) {
-          res = this.potDate[i].hasRecord
-          break
-        }
-      }*/
-
-      if (this.dateMap.get(val) != null) {
-        res = true
-      }
-      return res
-    },
-    getYearMonth(date) {
-      const year = date.getFullYear().toString().padStart(4, '0')
-      const month = (date.getMonth() + 1).toString().padStart(2, '0')
-      // const day = date.getDate().toString().padStart(2, '0')
-      // const hour = date.getHours().toString().padStart(2, '0')
-      // const minute = date.getMinutes().toString().padStart(2, '0')
-      // const second = date.getSeconds().toString().padStart(2, '0')
-      // 2023-02-16 08:25:05
-      // console.log(`${year}-${month}-${day} ${hour}:${minute}:${second}`)
-      return year + '-' + month
-    },
-    getYearMonthDay(date) {
-      const year = date.getFullYear().toString().padStart(4, '0')
-      const month = (date.getMonth() + 1).toString().padStart(2, '0')
-      const day = date.getDate().toString().padStart(2, '0')
-      return year + '-' + month + '-' + day
-    },
-    initMp4Player(coverUrl, videoUrl) {
-      new DPlayer({
-        container: document.getElementById('dplayer'),
-        lang: 'zh-cn',
-        autoplay: true,
-        volume: 0.1,
-        mutex: true,
-        video: {
-          pic: coverUrl,
-          url: videoUrl,
-          hotkey: true
-        }
-      })
-    },
-    getCamRecord(recordId) {
-      getCamRecord(recordId).then(resp => {
-        if (resp.code === 0) {
-          const respData = resp.data
-          // this.initMp4Player(respData.coverUrl, respData.videoUrl)
-        }
-      })
-    },
-    goToCamLive() {
-      const path = '/my/cam/live'
-      if (this.$route.path === path) {
-        this.$router.go(0)
-        return
-      }
-      this.$router.push(path)
-    }
-  }
-}
-</script>
-
-<style scoped>
-/*处于手机屏幕时*/
-@media screen and (max-width: 768px) {
-  .movie-list {
-    padding-top: 8px;
-    padding-left: 0.5%;
-    padding-right: 0.5%;
-  }
-}
-
-.movie-list {
-  padding-top: 15px;
-  padding-left: 5%;
-  padding-right: 5%;
-}
-
-.clearfix:before,
-.clearfix:after {
-  display: table;
-  content: "";
-}
-
-.clearfix:after {
-  clear: both;
-}
-
-.budge{
-  width: 10px;
-  height: 10px;
-  border-radius: 5px;
-  margin: 10px auto;
-}
-.blue{
-  background-color: #409eff;
-}
-</style>

src/views/disk/DiskOverview.vue

@@ -1,157 +0,0 @@
-<template>
-  <el-row>
-    <el-row>
-      <el-button size="mini" type="danger" @click="loadAll">网盘概览</el-button>
-    </el-row>
-  </el-row>
-</template>
-
-<script>
-import {
-  getImageList
-} from '@/api/disk'
-
-export default {
-  name: 'DiskOverview',
-  data() {
-    return {
-      // 屏幕宽度, 为了控制分页条的大小
-      screenWidth: document.body.clientWidth,
-      currentPage: 1,
-      pageSize: 10,
-      totalSize: 0,
-      dataList: [],
-      audioList: [],
-      searchForm: {
-        pageNumber: 1,
-        fileType: 1003
-      }
-    }
-  },
-  created() {
-    document.title = '网盘概览'
-    this.getData()
-  },
-  methods: {
-    getData() {
-      this.dataList = []
-      getImageList(this.searchForm).then(resp => {
-        if (resp.code === 0) {
-          this.dataList = resp.data.list
-          this.totalSize = resp.data.totalSize
-          for (const item of this.dataList) {
-            console.log(item)
-          }
-        } else {
-          this.$notify({
-            title: '提示',
-            message: resp.msg,
-            type: 'warning',
-            duration: 3000
-          })
-        }
-      }).catch(error => {
-        this.$notify({
-          title: '提示',
-          message: error.message,
-          type: 'error',
-          duration: 3000
-        })
-      })
-    },
-    loadAll() {
-    }
-  }
-}
-</script>
-
-<style scoped>
-.time {
-  font-size: 15px;
-  color: #999;
-}
-
-.bottom {
-  margin-top: 13px;
-  line-height: 12px;
-}
-
-.tit {
-  font-weight: 700;
-  font-size: 18px;
-
-  height: 50px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  display: -webkit-box;
-  -webkit-line-clamp: 2; /*行数*/
-  -webkit-box-orient: vertical;
-}
-
-.num {
-  position: relative;
-  font-size: 15px;
-  padding-top: 9px;
-}
-
-/*处于手机屏幕时*/
-@media screen and (max-width: 768px) {
-  .tit {
-    font-weight: 600;
-    font-size: 12px;
-    height: 32px;
-  }
-  .time {
-    font-size: 10px;
-    color: #999;
-  }
-  .num {
-    font-size: 9px;
-    padding-top: 3px;
-  }
-  .bottom {
-    margin-top: 2px;
-    line-height: 7px;
-  }
-  .coverImg {
-    height: 120px !important;
-  }
-}
-
-.coverImg {
-  width: 100%;
-  height: 175px;
-  display: block;
-}
-
-.clearfix:before,
-.clearfix:after {
-  display: table;
-  content: "";
-}
-
-.clearfix:after {
-  clear: both;
-}
-
-.card {
-  margin-bottom: 20px;
-  transition: all 0.6s; /*所有属性变化在0.6秒内执行动画*/
-}
-
-/*.card:hover {
-  !*鼠标放上之后元素变成1.06倍大小*!
-  transform: scale(1.06);
-}*/
-.imgs {
-  position: relative;
-}
-.play-icon {
-  position: absolute;
-  /*top: -15px;*/
-  right: 2%;
-  bottom: 5px;
-  z-index: 7;
-  width: 40px;
-}
-</style>

src/views/disk/FileAudio.vue

@@ -1,199 +0,0 @@
-<template>
-  <el-row>
-    <el-row>
-      <el-col v-for="(item, index) in dataList" :key="index" :md="6" :sm="12" :xs="12">
-        <el-row style="padding-right: 5px; padding-left: 5px; padding-bottom: 5px">
-          <el-card class="box-card">
-            <div slot="header" class="clearfix">
-              <span style="left: 0;margin-bottom: 0px;color: black;">{{ item.filename }}</span>
-            </div>
-            <div class="text item">
-              <audio-player
-                :id="item.fileId"
-                ref="audioPlayer"
-                :is-loop="false"
-                :show-prev-button="false"
-                :show-next-button="false"
-                :show-playback-rate="false"
-                :audio-list="item.audioList.map(elm => elm.url)"
-                :before-play="handleBeforePlay"
-                theme-color="#87CEFA"
-                @playing="onPlaying"
-                @on-progress-move="onProgressMove"
-                @ended="onEnd"
-              />
-            </div>
-          </el-card>
-        </el-row>
-      </el-col>
-    </el-row>
-  </el-row>
-</template>
-
-<script>
-import { getImageList } from '@/api/disk'
-
-export default {
-  name: 'FileVideo',
-  data() {
-    return {
-      // 屏幕宽度, 为了控制分页条的大小
-      screenWidth: document.body.clientWidth,
-      currentPage: 1,
-      pageSize: 10,
-      totalSize: 0,
-      dataList: [],
-      audioList: [],
-      searchForm: {
-        pageNumber: 1,
-        fileType: 1003
-      }
-    }
-  },
-  created() {
-    document.title = '我的音频'
-    this.getData()
-  },
-  methods: {
-    getData() {
-      this.dataList = []
-      getImageList(this.searchForm).then(resp => {
-        if (resp.code === 0) {
-          this.totalSize = resp.data.totalSize
-          for (const item of resp.data.list) {
-            item.audioList = [
-              { name: item.filename, url: item.url }
-            ]
-            this.dataList.push(item)
-          }
-          console.log(this.dataList)
-        } else {
-          this.$notify({
-            title: '提示',
-            message: resp.msg,
-            type: 'warning',
-            duration: 3000
-          })
-        }
-      }).catch(error => {
-        this.$notify({
-          title: '提示',
-          message: error.message,
-          type: 'error',
-          duration: 3000
-        })
-      })
-    },
-    // 播放前做的事
-    handleBeforePlay(next) {
-      next()
-    },
-    handlePlaySpecify() {
-      this.$refs.audioPlayer.currentPlayIndex = 1
-      this.$nextTick(() => {
-        this.$refs.audioPlayer.play()
-        /* this.title = this.audioList[
-          this.$refs.audioPlayer.currentPlayIndex
-        ].name*/
-      })
-    },
-    onPlaying() {
-    },
-    onProgressMove(event) {
-    },
-    onEnd(event) {
-    }
-  }
-}
-</script>
-
-<style scoped>
-.time {
-  font-size: 15px;
-  color: #999;
-}
-
-.bottom {
-  margin-top: 13px;
-  line-height: 12px;
-}
-
-.tit {
-  font-weight: 700;
-  font-size: 18px;
-
-  height: 50px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  display: -webkit-box;
-  -webkit-line-clamp: 2; /*行数*/
-  -webkit-box-orient: vertical;
-}
-
-.num {
-  position: relative;
-  font-size: 15px;
-  padding-top: 9px;
-}
-
-/*处于手机屏幕时*/
-@media screen and (max-width: 768px) {
-  .tit {
-    font-weight: 600;
-    font-size: 12px;
-    height: 32px;
-  }
-  .time {
-    font-size: 10px;
-    color: #999;
-  }
-  .num {
-    font-size: 9px;
-    padding-top: 3px;
-  }
-  .bottom {
-    margin-top: 2px;
-    line-height: 7px;
-  }
-  .coverImg {
-    height: 120px !important;
-  }
-}
-
-.coverImg {
-  width: 100%;
-  height: 175px;
-  display: block;
-}
-
-.clearfix:before,
-.clearfix:after {
-  display: table;
-  content: "";
-}
-
-.clearfix:after {
-  clear: both;
-}
-
-.card {
-  margin-bottom: 20px;
-  transition: all 0.6s; /*所有属性变化在0.6秒内执行动画*/
-}
-
-/*.card:hover {
-  !*鼠标放上之后元素变成1.06倍大小*!
-  transform: scale(1.06);
-}*/
-.imgs {
-  position: relative;
-}
-.play-icon {
-  position: absolute;
-  /*top: -15px;*/
-  right: 2%;
-  bottom: 5px;
-  z-index: 7;
-  width: 40px;
-}
-</style>

src/views/disk/FileImage.vue

@@ -1,127 +0,0 @@
-<template>
-  <el-row>
-    <el-col :md="24" class="movie-list">
-      <div>
-        <el-col v-for="(item, index) in dataList" :key="index" :md="6" :sm="12" :xs="12" style="padding-right: 5px; padding-left: 5px; padding-bottom: 5px">
-          <el-card class="box-card">
-            <div slot="header" class="clearfix">
-              <span style="left: 0;margin-bottom: 0px;color: black;">{{ item.filename }}</span>
-            </div>
-            <div class="text item">
-              <div class="imgs">
-                <el-image
-                  lazy
-                  fit="cover"
-                  :src="item.url"
-                  class="coverImg"
-                  @click="showImage(index, item)"
-                />
-              </div>
-            </div>
-          </el-card>
-        </el-col>
-      </div>
-    </el-col>
-  </el-row>
-</template>
-
-<script>
-import {
-  getImageList
-} from '@/api/disk'
-
-export default {
-  name: 'FileImage',
-  data() {
-    return {
-      // 屏幕宽度, 为了控制分页条的大小
-      screenWidth: document.body.clientWidth,
-      currentPage: 1,
-      pageSize: 10,
-      totalSize: 0,
-      dataList: [],
-      searchForm: {
-        pageNumber: 1,
-        fileType: 1001
-      }
-    }
-  },
-  created() {
-    document.title = '我的图片'
-    this.getData()
-  },
-  methods: {
-    getData() {
-      this.dataList = []
-      getImageList(this.searchForm).then(resp => {
-        if (resp.code === 0) {
-          this.dataList = resp.data.list
-          this.totalSize = resp.data.totalSize
-        } else {
-          this.$notify({
-            title: '提示',
-            message: resp.msg,
-            type: 'warning',
-            duration: 3000
-          })
-        }
-      }).catch(error => {
-        this.$notify({
-          title: '提示',
-          message: error.message,
-          type: 'error',
-          duration: 3000
-        })
-      })
-    },
-    showImage(index, item) {
-      const imageUrls = []
-      for (const ele of this.dataList) {
-        imageUrls.push(ele.originalUrl)
-      }
-      //imageUrls.push(item.originalUrl)
-
-      this.$viewerApi({
-        images: imageUrls,
-        options: {
-          initialViewIndex: index,
-          movable: true,
-          fullscreen: false,
-          keyboard: true
-        }
-      })
-    },
-  }
-}
-</script>
-
-<style scoped>
-/*处于手机屏幕时*/
-@media screen and (max-width: 768px){
-  .movie-list {
-    padding-top: 3px;
-    padding-left: 0.5%;
-    padding-right: 0.5%;
-  }
-
-  .coverImg {
-    height: 120px !important;
-  }
-}
-
-.movie-list {
-  padding-top: 5px;
-  padding-left: 3%;
-  padding-right: 3%;
-}
-
-.coverImg {
-  width: 100%;
-  height: 240px;
-  display: block;
-}
-
-.imgs {
-  position: relative;
-}
-</style>

src/views/disk/FileList.vue

@@ -1,625 +0,0 @@
-<template>
-  <el-row>
-    <el-row>
-      <el-form :inline="true" :model="searchForm" class="demo-form-inline" style="padding-right: 5px; padding-left: 5px; padding-bottom: 5px">
-        <el-form-item>
-          <el-button size="mini" type="danger" @click="goToUpload">上传</el-button>
-          <el-button size="mini" type="danger" @click="downloadFile">下载</el-button>
-          <el-button size="mini" type="danger" @click="deleteMultiple">删除</el-button>
-          <el-button size="mini" type="danger" @click="createNewFolder">新建文件夹</el-button>
-          <el-button size="mini" type="danger" @click="move(1)">移动</el-button>
-          <el-button size="mini" type="danger" @click="move(2)">复制</el-button>
-          <el-button size="mini" type="danger" @click="share">分享</el-button>
-        </el-form-item>
-        <el-form-item>
-          <el-select v-model="searchForm.fileType" placeholder="文件类型" @change="onSelect">
-            <el-option label="全部" value="0" />
-            <el-option label="图片" value="1001" />
-            <el-option label="视频" value="1002" />
-            <el-option label="音频" value="1003" />
-            <el-option label="文本" value="1004" />
-          </el-select>
-        </el-form-item>
-        <el-form-item>
-          <el-input v-model="searchForm.filename" placeholder="" />
-        </el-form-item>
-        <el-form-item>
-          <el-button size="mini" type="warning" @click="search">查询</el-button>
-        </el-form-item>
-      </el-form>
-    </el-row>
-    <el-row>
-      <el-col :md="2">
-        <span>当前路径:</span>
-      </el-col>
-      <el-col :md="22">
-        <el-breadcrumb separator-class="el-icon-arrow-right" style="padding-right: 5px; padding-left: 5px; padding-bottom: 5px">
-          <el-breadcrumb-item v-for="(item, index) of parentDirs" :key="index">
-            <a href="javascript:void(0)" style="text-decoration-line: none" @click="goTo(item.path)">{{ item.filename }}</a>
-          </el-breadcrumb-item>
-        </el-breadcrumb>
-      </el-col>
-    </el-row>
-    <el-row>
-      <el-table
-        ref="multipleTable"
-        :data="dataList"
-        border
-        style="width: 100%"
-        @selection-change="handleSelectionChange"
-      >
-        <el-table-column
-          type="selection"
-        />
-        <el-table-column
-          prop="filename"
-          label="文件名"
-        >
-          <template slot-scope="scope">
-            <a href="javascript:void(0)" style="text-decoration-line: none" @click="handleFile(scope.row)">
-              <el-image :src="scope.row.icon" min-width="16" height="16" />
-              <el-tooltip
-                :content="scope.row.filename"
-                raw-content
-                placement="top-start"
-              >
-                <span v-if="scope.row.filename.length <= 60">
-                  {{ scope.row.filename }}
-                </span>
-                <span v-else>
-                  {{ scope.row.filename.substr(0, 55) + "..." }}
-                </span>
-              </el-tooltip>
-            </a>
-          </template>
-        </el-table-column>
-        <el-table-column
-          prop="owner"
-          label="修改时间"
-        />
-        <el-table-column
-          prop="size"
-          label="大小"
-        />
-        <el-table-column
-          prop="fileType"
-          label="文件类型"
-        >
-          <template slot-scope="scope">
-            <el-tag v-if="scope.row.fileType === 1000" :type="'warning'" disable-transitions>
-              目录
-            </el-tag>
-            <el-tag v-else-if="scope.row.fileType === 1001" :type="'warning'" disable-transitions>
-              图片
-            </el-tag>
-            <el-tag v-else-if="scope.row.fileType === 1002" :type="'success'" disable-transitions>
-              视频
-            </el-tag>
-            <el-tag v-else-if="scope.row.fileType === 1003" :type="'danger'" disable-transitions>
-              音频
-            </el-tag>
-            <el-tag v-else-if="scope.row.fileType === 1004" :type="'danger'" disable-transitions>
-              文本
-            </el-tag>
-            <el-tag v-else-if="scope.row.fileType === 1005" :type="'danger'" disable-transitions>
-              其他
-            </el-tag>
-            <el-tag v-else-if="scope.row.fileType === 1006" :type="'danger'" disable-transitions>
-              PDF
-            </el-tag>
-            <el-tag v-else :type="'danger'" disable-transitions>
-              二进制
-            </el-tag>
-          </template>
-        </el-table-column>
-        <el-table-column
-          label="操作"
-        >
-          <template slot-scope="scope">
-            <el-button
-              size="mini"
-              @click="getDetail(scope.row.fileId)"
-            >详情</el-button>
-            <el-button
-              size="mini"
-              @click="share(scope.row)"
-            >分享</el-button>
-            <el-button
-              size="mini"
-              @click="remove(scope.row)"
-            >删除</el-button>
-          </template>
-        </el-table-column>
-      </el-table>
-    </el-row>
-    <el-row>
-      <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
-      title="创建新目录"
-      append-to-body
-      :visible.sync="createFolderDialog"
-      width="30%"
-      center
-    >
-      <el-form ref="form" :model="createFolderForm">
-        <el-form-item label="目录名">
-          <el-input
-            v-model="createFolderForm.folderName"
-            placeholder="新目录名"
-            style="width: 70%; padding-right: 2px"
-            clearable
-          />
-        </el-form-item>
-        <el-form-item>
-          <el-button
-            type="primary"
-            @click="onCreateFolder"
-          >创建</el-button>
-        </el-form-item>
-      </el-form>
-    </el-dialog>
-    <!--文件预览弹窗-->
-    <el-dialog
-      append-to-body
-      width="70%"
-      center
-      :visible.sync="previewFileDialog"
-      :before-close="handleDialogClose"
-      destroy-on-close
-    >
-      <div v-if="fileDetail !== null">
-        <el-card class="box-card">
-          <div slot="header" class="clearfix">
-            <span style="left: 0;margin-bottom: 0px;color: black;">{{ fileDetail.filename }}</span>
-          </div>
-          <div class="text item">
-            <div v-if="fileDetail.fileType === 1001">
-              <el-image
-                :src="fileDetail.originalUrl"
-                lazy
-              />
-            </div>
-            <div v-else-if="fileDetail.fileType === 1002">
-              <video-preview :video-prop="videoProp" />
-            </div>
-            <div v-else-if="fileDetail.fileType === 1003">
-              <audio-player
-                ref="audioPlayer"
-                :is-loop="false"
-                :show-prev-button="false"
-                :show-next-button="false"
-                :show-playback-rate="false"
-                :audio-list="fileDetail.audioList.map(elm => elm.url)"
-                theme-color="#87CEFA"
-              />
-            </div>
-            <div v-else-if="fileDetail.fileType === 1004" style="white-space: pre-wrap;">
-              {{textContent}}
-            </div>
-            <div v-else-if="fileDetail.fileType === 1005">
-              <span>文本文件</span>
-            </div>
-            <div v-else-if="fileDetail.fileType === 1006" style="height: 80vh; overflow: auto">
-              <iframe :src="fileUrl" width="100%" height="100%"></iframe>
-            </div>
-            <div v-else>
-              <span>无预览</span>
-            </div>
-          </div>
-        </el-card>
-      </div>
-    </el-dialog>
-    <!--移动/复制弹窗-->
-    <el-dialog
-      title="移动文件"
-      append-to-body
-      :visible.sync="moveDialog"
-      width="50%"
-      center
-    >
-      <el-row style="padding-right: 5px; padding-left: 5px; padding-bottom: 5px">
-        <el-card class="box-card" :body-style="{ paddingTop: '0px' }">
-          <div slot="header" class="clearfix">
-            <span>选择目录</span>
-            <el-button style="float: right; padding: 3px 0" type="text" @click="onMove">确定</el-button>
-          </div>
-          <div class="item">
-            <el-tree
-              :accordion="true"
-              :data="treeNode"
-              :props="defaultProps"
-              highlight-current
-              @node-click="handleNodeClick"
-            >
-              <span slot-scope="{ node, data }">
-                <span :class="data.icon">{{ node.label }}</span>
-              </span>
-            </el-tree>
-          </div>
-        </el-card>
-      </el-row>
-    </el-dialog>
-  </el-row>
-</template>
-
-<script>
-import VideoPreview from 'components/VideoPreview'
-import {
-  getFileList,
-  deleteDiskFile,
-  addDiskFolder,
-  getFileDetail,
-  getFileUrl,
-  getFolderTree,
-  moveDiskFile
-} from '@/api/disk'
-
-export default {
-  name: 'FileList',
-  components: { VideoPreview },
-  data() {
-    return {
-      // 屏幕宽度, 为了控制分页条的大小
-      screenWidth: document.body.clientWidth,
-      currentPage: 1,
-      pageSize: 10,
-      totalSize: 0,
-      dataList: [],
-      searchForm: {
-        page: 1,
-        path: '/',
-        fileType: '0',
-        filename: null
-      },
-      currentDir: '/',
-      multipleSelection: [],
-      parentDirs: [],
-      createFolderDialog: false,
-      createFolderForm: {
-        parent: null,
-        folderName: null
-      },
-      previewFileDialog: false,
-      fileDetail: null,
-      moveDialog: false,
-      treeNode: [],
-      defaultProps: {
-        children: 'children',
-        label: 'label',
-        value: 'value'
-      },
-      moveForm: {
-        type: 1,
-        pid: null,
-        fileIds: []
-      },
-      videoProp: null,
-      fileUrl: null,
-      textContent: null,
-    }
-  },
-  created() {
-    const path = this.$route.query.path
-    if (path !== undefined && path !== null) {
-      this.searchForm.path = path
-    }
-
-    document.title = '文件列表'
-    this.getData(this.searchForm)
-  },
-  methods: {
-    handleCurrentChange(pageNumber) {
-      this.currentPage = pageNumber
-      this.searchForm.page = this.currentPage
-      this.getData(this.searchForm)
-      // 回到顶部
-      scrollTo(0, 0)
-    },
-    getData() {
-      this.dataList = []
-      getFileList(this.searchForm).then(resp => {
-        if (resp.code === 0) {
-          this.dataList = resp.data.fileList.list
-          this.totalSize = resp.data.fileList.totalSize
-          this.parentDirs = resp.data.pathList
-          this.currentDir = this.parentDirs[this.parentDirs.length - 1].path
-        } else {
-          this.$notify({
-            title: '提示',
-            message: resp.msg,
-            type: 'warning',
-            duration: 3000
-          })
-        }
-      }).catch(error => {
-        this.$notify({
-          title: '提示',
-          message: error.message,
-          type: 'error',
-          duration: 3000
-        })
-      })
-    },
-    getDetail(fileId) {
-      getFileDetail(fileId).then(resp => {
-        if (resp.code === 0) {
-          this.$message(resp.data)
-        }
-      })
-    },
-    share(row) {
-      this.$message('share 未实现')
-    },
-    remove(row) {
-      this.$message('remove 未实现')
-    },
-    onSelect() {
-      this.currentPage = 1
-      this.searchForm.page = this.currentPage
-      this.getData(this.searchForm)
-    },
-    search() {
-      this.currentPage = 1
-      this.searchForm.page = this.currentPage
-      this.getData(this.searchForm)
-    },
-    handleSelectionChange(val) {
-      this.multipleSelection = val
-    },
-    goToUpload() {
-      const path = '/disk/upload'
-      if (this.$route.path === path) {
-        this.$router.go(0)
-        return
-      }
-      this.$router.push(path)
-    },
-    downloadFile() {
-      console.log('下载文件')
-    },
-    deleteMultiple() {
-      if (this.multipleSelection.length === 0) {
-        this.$notify({
-          message: '至少应选中一行',
-          type: 'warning',
-          duration: 3000
-        })
-        return
-      }
-
-      var fileIds = []
-      for (const item of this.multipleSelection) {
-        fileIds.push(item.fileId)
-      }
-
-      this.$confirm('确定要删除文件?', '提示', {
-        confirmButtonText: '确定',
-        cancelButtonText: '取消',
-        type: 'warning'
-      }).then(() => {
-        deleteDiskFile(fileIds).then(resp => {
-          if (resp.code === 0) {
-            this.$refs.multipleTable.clearSelection()
-            this.$notify({
-              message: resp.msg,
-              type: 'warning',
-              duration: 3000
-            })
-          } else {
-            this.$notify({
-              title: '提示',
-              message: resp.msg,
-              type: 'warning',
-              duration: 3000
-            })
-          }
-        }).catch(error => {
-          this.$notify({
-            title: '提示',
-            message: error.message,
-            type: 'error',
-            duration: 3000
-          })
-        })
-      }).catch(() => {
-        this.$message({
-          type: 'info',
-          message: '已取消'
-        })
-      })
-    },
-    handleFile(item) {
-      const fileType = item.fileType
-      if (fileType === 1000) {
-        const filename = item.filename
-        const namePath = this.parentDirs[this.parentDirs.length - 1]
-        let currentPath
-        if (namePath.filename === '/') {
-          currentPath = namePath.path + filename
-        } else {
-          currentPath = namePath.path + '/' + filename
-        }
-        this.searchForm.path = currentPath
-        this.getData(this.searchForm)
-      } else {
-        const fileId = item.fileId
-        this.previewFile(fileType, fileId)
-      }
-    },
-    goTo(path) {
-      this.searchForm.page = 1
-      this.searchForm.path = path
-      this.getData(this.searchForm)
-    },
-    previewFile(fileType, fileId) {
-      getFileUrl(fileType, fileId).then(resp => {
-        if (resp.code === 0) {
-          this.fileDetail = resp.data
-          if (fileType === 1001) {
-          } else if (fileType === 1002) {
-            this.videoProp = {
-              videoId: this.fileDetail.fileId,
-              url: this.fileDetail.originalUrl,
-              type: 'mp4'
-            }
-          } else if (fileType === 1003) {
-            this.fileDetail.audioList = [
-              { name: this.fileDetail.filename, url: this.fileDetail.originalUrl }
-            ]
-          } else if (fileType === 1004) {
-            this.textContent = null
-            const textUrl = this.fileDetail.originalUrl
-            var that = this
-            fetch(textUrl).then(function (data) {
-              const contentType = data.headers.get("content-type")
-              console.log(contentType)
-              data.text().then(result => {
-                that.textContent = result
-                console.log(that.textContent)
-              })
-            }).catch(e => {
-              this.$message(e)
-            })
-          } else if (fileType === 1005) {
-          } else if (fileType === 1006) {
-            const pdfUrl = this.fileDetail.originalUrl
-            this.fileUrl = '/pdfjs/web/viewer.html?file=' + encodeURIComponent(pdfUrl)
-          } else {
-          }
-          this.previewFileDialog = true
-        }
-      }).catch(error => {
-        this.$notify({
-          title: '请求错误',
-          message: error.message,
-          type: 'error',
-          duration: 3000
-        })
-      })
-    },
-    handleDialogClose(done) {
-      console.log('dialog close')
-      done()
-    },
-    createNewFolder() {
-      this.createFolderDialog = true
-    },
-    onCreateFolder() {
-      this.createFolderForm.parent = this.currentDir
-      addDiskFolder(this.createFolderForm).then(resp => {
-        if (resp.code === 0) {
-          this.$router.go(0)
-        } else {
-          this.$notify({
-            message: resp.msg,
-            type: 'warning',
-            duration: 3000
-          })
-        }
-      })
-    },
-    move(type) {
-      if (this.multipleSelection.length === 0) {
-        this.$notify({
-          message: '至少应选中一行',
-          type: 'warning',
-          duration: 3000
-        })
-        return
-      }
-
-      this.moveForm.type = type
-      for (const item of this.multipleSelection) {
-        this.moveForm.fileIds.push(item.fileId)
-      }
-
-      getFolderTree().then(resp => {
-        if (resp.code === 0) {
-          this.treeNode = resp.data
-          this.moveDialog = true
-        } else {
-          this.$notify({
-            title: '提示',
-            message: resp.msg,
-            type: 'error',
-            duration: 3000
-          })
-        }
-      }).catch(error => {
-        this.$notify({
-          title: '提示',
-          message: error.message,
-          type: 'warning',
-          duration: 3000
-        })
-      })
-    },
-    handleNodeClick(data) {
-      this.moveForm.pid = data.fileId
-    },
-    onMove() {
-      moveDiskFile(this.moveForm).then(resp => {
-        if (resp.code === 0) {
-          this.moveDialog = false
-          this.$refs.multipleTable.clearSelection()
-        }
-      })
-    }
-  }
-}
-</script>
-
-<style>
-/*处于手机屏幕时*/
-@media screen and (max-width: 768px) {
-  .tit {
-    font-weight: 600;
-    font-size: 12px;
-    height: 32px;
-  }
-  .time {
-    font-size: 10px;
-    color: #999;
-  }
-  .num {
-    font-size: 9px;
-    padding-top: 3px;
-  }
-  .bottom {
-    margin-top: 2px;
-    line-height: 7px;
-  }
-  .coverImg {
-    height: 120px !important;
-  }
-}
-
-.coverImg {
-  width: 100%;
-  height: 175px;
-  display: block;
-}
-
-.clearfix:before,
-.clearfix:after {
-  display: table;
-  content: "";
-}
-
-.clearfix:after {
-  clear: both;
-}
-</style>

src/views/disk/FileText.vue

@@ -1,172 +0,0 @@
-<template>
-  <el-row>
-    <el-row>
-      <el-col v-for="(item, index) in dataList" :key="index" :md="6" :sm="12" :xs="12">
-        <el-row style="padding-right: 5px; padding-left: 5px; padding-bottom: 5px">
-          <el-card class="box-card">
-            <div slot="header" class="clearfix">
-              <span style="left: 0;margin-bottom: 0px;color: black;">{{ item.filename }}</span>
-            </div>
-            <div class="text item">
-            </div>
-          </el-card>
-        </el-row>
-      </el-col>
-    </el-row>
-  </el-row>
-</template>
-
-<script>
-import {
-  getImageList
-} from '@/api/disk'
-import {get} from "@/utils/request";
-
-export default {
-  name: 'FileText',
-  data() {
-    return {
-      // 屏幕宽度, 为了控制分页条的大小
-      screenWidth: document.body.clientWidth,
-      currentPage: 1,
-      pageSize: 10,
-      totalSize: 0,
-      dataList: [],
-      audioList: [],
-      searchForm: {
-        pageNumber: 1,
-        fileType: 1004
-      }
-    }
-  },
-  created() {
-    document.title = '我的文本'
-    this.getData()
-  },
-  methods: {
-    getData() {
-      this.dataList = []
-      getImageList(this.searchForm).then(resp => {
-        if (resp.code === 0) {
-          this.dataList = resp.data.list
-          this.totalSize = resp.data.totalSize
-          for (const item of this.dataList) {
-            console.log(item)
-          }
-        } else {
-          this.$notify({
-            title: '提示',
-            message: resp.msg,
-            type: 'warning',
-            duration: 3000
-          })
-        }
-      }).catch(error => {
-        this.$notify({
-          title: '提示',
-          message: error.message,
-          type: 'error',
-          duration: 3000
-        })
-      })
-    },
-    loadAll() {
-      const item = this.dataList[0]
-      get(item.url).then(resp => {
-        console.log(resp)
-      })
-    }
-  }
-}
-</script>
-
-<style scoped>
-.time {
-  font-size: 15px;
-  color: #999;
-}
-
-.bottom {
-  margin-top: 13px;
-  line-height: 12px;
-}
-
-.tit {
-  font-weight: 700;
-  font-size: 18px;
-
-  height: 50px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  display: -webkit-box;
-  -webkit-line-clamp: 2; /*行数*/
-  -webkit-box-orient: vertical;
-}
-
-.num {
-  position: relative;
-  font-size: 15px;
-  padding-top: 9px;
-}
-
-/*处于手机屏幕时*/
-@media screen and (max-width: 768px) {
-  .tit {
-    font-weight: 600;
-    font-size: 12px;
-    height: 32px;
-  }
-  .time {
-    font-size: 10px;
-    color: #999;
-  }
-  .num {
-    font-size: 9px;
-    padding-top: 3px;
-  }
-  .bottom {
-    margin-top: 2px;
-    line-height: 7px;
-  }
-  .coverImg {
-    height: 120px !important;
-  }
-}
-
-.coverImg {
-  width: 100%;
-  height: 175px;
-  display: block;
-}
-
-.clearfix:before,
-.clearfix:after {
-  display: table;
-  content: "";
-}
-
-.clearfix:after {
-  clear: both;
-}
-
-.card {
-  margin-bottom: 20px;
-  transition: all 0.6s; /*所有属性变化在0.6秒内执行动画*/
-}
-
-/*.card:hover {
-  !*鼠标放上之后元素变成1.06倍大小*!
-  transform: scale(1.06);
-}*/
-.imgs {
-  position: relative;
-}
-.play-icon {
-  position: absolute;
-  /*top: -15px;*/
-  right: 2%;
-  bottom: 5px;
-  z-index: 7;
-  width: 40px;
-}
-</style>

src/views/disk/FileTrash.vue

@@ -1,36 +0,0 @@
-<template>
-  <el-row>
-    <span>回收站</span>
-  </el-row>
-</template>
-
-<script>
-export default {
-  name: 'FileTrash',
-  data() {
-    return {
-      // 屏幕宽度, 为了控制分页条的大小
-      screenWidth: document.body.clientWidth,
-      data: {
-      },
-    }
-  },
-  created() {
-    document.title = '回收站'
-  },
-  mounted() {
-    // 当窗口宽度改变时获取屏幕宽度
-    window.onresize = () => {
-      return () => {
-        window.screenWidth = document.body.clientWidth
-        this.screenWidth = window.screenWidth
-      }
-    }
-  },
-  methods: {
-  }
-}
-</script>
-
-<style scoped>
-</style>

src/views/disk/FileVideo.vue

@@ -1,194 +0,0 @@
-<template>
-  <el-row>
-    <el-row>
-      <el-col v-for="(item, index) in dataList" :key="index" :md="6" :sm="12" :xs="12">
-        <el-row style="padding-right: 5px; padding-left: 5px; padding-bottom: 5px">
-          <el-card class="box-card">
-            <div slot="header" class="clearfix">
-              <span style="left: 0;margin-bottom: 0px;color: black;">{{ item.filename }}</span>
-            </div>
-            <div class="text item">
-              <video-preview :video-prop.sync="item.videoProp" />
-            </div>
-          </el-card>
-        </el-row>
-      </el-col>
-    </el-row>
-  </el-row>
-</template>
-
-<script>
-import VideoPreview from 'components/VideoPreview'
-import DPlayer from 'dplayer'
-import {
-  getImageList
-} from '@/api/disk'
-
-export default {
-  name: 'FileVideo',
-  components: { VideoPreview },
-  data() {
-    return {
-      DPlayer,
-      dplayer: null,
-      // 屏幕宽度, 为了控制分页条的大小
-      screenWidth: document.body.clientWidth,
-      currentPage: 1,
-      pageSize: 10,
-      totalSize: 0,
-      dataList: [],
-      searchForm: {
-        pageNumber: 1,
-        fileType: 1002
-      }
-    }
-  },
-  created() {
-    document.title = '我的视频'
-    this.getData()
-  },
-  methods: {
-    getData() {
-      this.dataList = []
-      getImageList(this.searchForm).then(resp => {
-        if (resp.code === 0) {
-          this.dataList = resp.data.list
-          this.totalSize = resp.data.totalSize
-          for (const item of this.dataList) {
-            item.videoProp = {
-              videoId: item.fileId,
-              url: item.originalUrl,
-              type: 'mp4'
-            }
-          }
-        } else {
-          this.$notify({
-            title: '提示',
-            message: resp.msg,
-            type: 'warning',
-            duration: 3000
-          })
-        }
-      }).catch(error => {
-        this.$notify({
-          title: '提示',
-          message: error.message,
-          type: 'error',
-          duration: 3000
-        })
-      })
-    },
-    initMp4Player(fileId, videoUrl) {
-      return new DPlayer({
-        container: document.getElementById(fileId),
-        lang: 'zh-cn',
-        screenshot: false,
-        autoplay: false,
-        volume: 0.1,
-        mutex: true,
-        video: {
-          url: videoUrl
-        }
-      })
-    },
-    loadAll() {
-      for (const item of this.dataList) {
-        /* const elem = document.getElementById(item.fileId)
-        console.log(elem)*/
-        this.initMp4Player(item.fileId, item.url)
-      }
-    }
-  }
-}
-</script>
-
-<style scoped>
-.time {
-  font-size: 15px;
-  color: #999;
-}
-
-.bottom {
-  margin-top: 13px;
-  line-height: 12px;
-}
-
-.tit {
-  font-weight: 700;
-  font-size: 18px;
-
-  height: 50px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  display: -webkit-box;
-  -webkit-line-clamp: 2; /*行数*/
-  -webkit-box-orient: vertical;
-}
-
-.num {
-  position: relative;
-  font-size: 15px;
-  padding-top: 9px;
-}
-
-/*处于手机屏幕时*/
-@media screen and (max-width: 768px) {
-  .tit {
-    font-weight: 600;
-    font-size: 12px;
-    height: 32px;
-  }
-  .time {
-    font-size: 10px;
-    color: #999;
-  }
-  .num {
-    font-size: 9px;
-    padding-top: 3px;
-  }
-  .bottom {
-    margin-top: 2px;
-    line-height: 7px;
-  }
-  .coverImg {
-    height: 120px !important;
-  }
-}
-
-.coverImg {
-  width: 100%;
-  height: 175px;
-  display: block;
-}
-
-.clearfix:before,
-.clearfix:after {
-  display: table;
-  content: "";
-}
-
-.clearfix:after {
-  clear: both;
-}
-
-.card {
-  margin-bottom: 20px;
-  transition: all 0.6s; /*所有属性变化在0.6秒内执行动画*/
-}
-
-/*.card:hover {
-  !*鼠标放上之后元素变成1.06倍大小*!
-  transform: scale(1.06);
-}*/
-.imgs {
-  position: relative;
-}
-.play-icon {
-  position: absolute;
-  /*top: -15px;*/
-  right: 2%;
-  bottom: 5px;
-  z-index: 7;
-  width: 40px;
-}
-</style>

src/views/disk/UploadFile.vue

@@ -1,255 +0,0 @@
-<template>
-  <el-row class="movie-list">
-    <el-col :md="8" style="padding-right: 5px; padding-left: 5px; padding-bottom: 5px">
-      <el-row style="padding-right: 5px; padding-left: 5px; padding-bottom: 5px">
-        <el-card class="box-card" :body-style="{ paddingTop: '0px' }">
-          <div slot="header" class="clearfix">
-            <span>选择目录</span>
-          </div>
-          <div class="item">
-            <el-tree
-              :accordion="true"
-              :data="treeNode"
-              :props="defaultProps"
-              highlight-current
-              @node-click="handleNodeClick"
-            >
-              <span slot-scope="{ node, data }">
-                <span :class="data.icon">{{ node.label }}</span>
-              </span>
-            </el-tree>
-          </div>
-        </el-card>
-      </el-row>
-    </el-col>
-    <el-col :md="16" style="padding-right: 5px; padding-left: 5px; padding-bottom: 5px">
-      <el-row style="padding-right: 5px; padding-left: 5px; padding-bottom: 5px">
-        <el-card class="box-card">
-          <div slot="header" class="clearfix">
-            <el-row style="padding-right: 5px; padding-left: 5px; padding-bottom: 5px">
-              <span>存储节点: <span style="color: red">{{ ossUrl }}</span></span>
-            </el-row>
-            <el-row style="padding-right: 5px; padding-left: 5px; padding-bottom: 5px">
-              <span>上传文件到目录: <span style="color: red">{{ currentDir }}</span></span>
-            </el-row>
-          </div>
-          <div class="text item">
-            <uploader
-              v-if="options !== null"
-              class="uploader-example"
-              :options="options"
-              :auto-start="true"
-              @file-added="onFileAdded"
-              @file-success="onFileSuccess"
-              @file-progress="onFileProgress"
-              @file-error="onFileError"
-            >
-              <uploader-unsupport />
-              <uploader-drop>
-                <p>拖动文件到此处或</p>
-                <uploader-btn :attrs="attrs">选择文件</uploader-btn>
-              </uploader-drop>
-              <uploader-list />
-            </uploader>
-          </div>
-        </el-card>
-      </el-row>
-    </el-col>
-  </el-row>
-</template>
-
-<script>
-import { addDiskFile, getFolderTree, getServerInfo } from '@/api/disk'
-
-export default {
-  name: 'UploadFile',
-  data() {
-    return {
-      // ****************************************************************************************************************
-      options: null,
-      attrs: {
-        accept: '*'
-      },
-      channelId: process.env.VUE_APP_UPLOAD_FILE_CHANNEL,
-      // ****************************************************************************************************************
-      ossUrl: null,
-      // ****************************************************************************************************************
-      treeNode: [],
-      defaultProps: {
-        children: 'children',
-        label: 'label',
-        value: 'value'
-      },
-      currentDir: '/',
-      // ****************************************************************************************************************
-      pid: 0,
-      form: {
-        fileUrl: null,
-        imageUrl: null
-      }
-    }
-  },
-  created() {
-    document.title = '上传文件'
-    getServerInfo(this.channelId).then(resp => {
-      if (resp.code === 0) {
-        const resData = resp.data
-        this.ossUrl = resData.ossUrl
-        this.options = {
-          target: resData.ossUrl,
-          chunkSize: resData.maxSize,
-          fileParameterName: 'file',
-          testChunks: false,
-          query: (file, chunk) => {
-            return {
-              channelId: this.channelId
-            }
-          },
-          headers: {
-            Authorization: 'Bearer ' + resData.token
-          },
-          withCredentials: false
-        }
-      } else {
-        this.$notify({
-          title: '提示',
-          message: '获取 OSS 服务器地址失败, 暂时无法上传文件',
-          type: 'error',
-          duration: 3000
-        })
-      }
-    }).catch(error => {
-      this.$notify({
-        title: '提示',
-        message: error.message,
-        type: 'warning',
-        duration: 3000
-      })
-    })
-
-    getFolderTree().then(resp => {
-      if (resp.code === 0) {
-        this.treeNode = resp.data
-      } else {
-        this.$notify({
-          title: '提示',
-          message: resp.msg,
-          type: 'error',
-          duration: 3000
-        })
-      }
-    }).catch(error => {
-      this.$notify({
-        title: '提示',
-        message: error.message,
-        type: 'warning',
-        duration: 3000
-      })
-    })
-  },
-  mounted() {
-  },
-  methods: {
-    // ****************************************************************************************************************
-    onFileAdded(file) {
-      if (file.file.size > 1024 * 1024 * 1024 * 5) {
-        file.cancel()
-        this.$notify({
-          title: '提示',
-          message: '视频文件应小于 5GiB',
-          type: 'warning',
-          duration: 3000
-        })
-      }
-    },
-    onFileProgress(rootFile, file, chunk) {
-    },
-    onFileSuccess(rootFile, file, response, chunk) {
-      const resp = JSON.parse(response)
-      if (resp.code === 0) {
-        this.form.fileUrl = resp.data.url
-
-        const jsonData = {}
-        jsonData.channelId = this.channelId
-        jsonData.uploadId = resp.data.uploadId
-        jsonData.pid = this.pid
-        this.addDiskFile(jsonData)
-      } else {
-        this.$notify({
-          title: '提示',
-          message: resp.msg,
-          type: 'warning',
-          duration: 3000
-        })
-      }
-    },
-    onFileError(rootFile, file, response, chunk) {
-      this.$notify({
-        title: '提示',
-        message: '文件上传错误',
-        type: 'warning',
-        duration: 3000
-      })
-    },
-    // ****************************************************************************************************************
-    handleNodeClick(data) {
-      this.pid = data.fileId
-      this.currentDir = data.label
-    },
-    addDiskFile(jsonData) {
-      addDiskFile(jsonData).then(resp => {
-        if (resp.code !== 0) {
-          this.$notify({
-            message: resp.msg,
-            type: 'warning',
-            duration: 3000
-          })
-        }
-      })
-    }
-  }
-}
-</script>
-
-<style>
-.uploader-example {
-  width: 500px;
-  padding: 15px;
-  margin: 40px auto 0;
-  font-size: 12px;
-  box-shadow: 0 0 10px rgba(0, 0, 0, .4);
-}
-.uploader-example .uploader-btn {
-  margin-right: 4px;
-}
-.uploader-example .uploader-list {
-  max-height: 440px;
-  overflow: auto;
-  overflow-x: hidden;
-  overflow-y: auto;
-}
-
-.avatar-uploader .el-upload {
-  border: 1px dashed #d9d9d9;
-  border-radius: 6px;
-  cursor: pointer;
-  position: relative;
-  overflow: hidden;
-}
-.avatar-uploader .el-upload:hover {
-  border-color: #409EFF;
-}
-.avatar-uploader-icon {
-  font-size: 28px;
-  color: #8c939d;
-  width: 320px;
-  height: 240px;
-  line-height: 178px;
-  text-align: center;
-}
-.avatar {
-  width: 320px;
-  height: 240px;
-  display: block;
-}
-</style>

src/views/home/AMap1.vue

@@ -1,60 +0,0 @@
-<template>
-  <div id="container" />
-</template>
-
-<script>
-import Vue from 'vue'
-import VueAMap from 'vue-amap'
-Vue.use(VueAMap)
-VueAMap.initAMapApiLoader({
-  key: 'your amap key',
-  plugin: ['AMap.Autocomplete', 'AMap.PlaceSearch', 'AMap.Scale', 'AMap.OverView', 'AMap.ToolBar', 'AMap.MapType', 'AMap.PolyEditor', 'AMap.CircleEditor'],
-  // 默认高德 sdk 版本为 1.4.4
-  v: '1.4.15'
-})
-import AMapLoader from '@amap/amap-jsapi-loader'
-import { shallowRef } from '@vue/reactivity'
-
-export default {
-  data() {
-    return {
-    }
-  },
-  mounted() {
-    // DOM初始化完成进行地图初始化
-    this.initMap()
-  },
-  setup() {
-    const map = shallowRef(null)
-    return {
-      map
-    }
-  },
-  methods: {
-    initMap() {
-      AMapLoader.load({
-        key: '', // 申请好的Web端开发者Key，首次调用 load 时必填
-        version: '2.0', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
-        plugins: [''] // 需要使用的的插件列表，如比例尺'AMap.Scale'等
-      }).then((AMap) => {
-        this.map = new AMap.Map('container', { // 设置地图容器id
-          viewMode: '3D', // 是否为3D地图模式
-          zoom: 5, // 初始化地图级别
-          center: [105.602725, 37.076636] // 初始化地图中心点位置
-        })
-      }).catch(e => {
-        console.log(e)
-      })
-    }
-  }
-}
-</script>
-
-<style>
-#container{
-  padding:0px;
-  margin: 0px;
-  width: 100%;
-  height: 800px;
-}
-</style>

src/views/login.vue

@@ -1,104 +0,0 @@
-<template>
-  <el-container>
-    <el-main>
-      <login-bar />
-      <router-view />
-      <el-row class="movie-list">
-        <el-col :md="8" style="padding-right: 5px; padding-left: 5px; padding-bottom: 5px" />
-        <el-col :md="8" style="padding-right: 5px; padding-left: 5px; padding-bottom: 5px" />
-        <el-col :md="8" style="padding-right: 5px; padding-left: 5px; padding-bottom: 5px">
-          <el-row style="padding-right: 5px; padding-left: 5px; padding-bottom: 5px; text-align: center">
-            <el-card class="box-card">
-              <div slot="header" class="clearfix">
-                <span>用户登录</span>
-              </div>
-              <div class="text item">
-                <el-form ref="form" :model="userLogin" label-width="80px">
-                  <el-form-item label="帐号">
-                    <el-input
-                      v-model="userLogin.principal"
-                      placeholder="请输入手机号或邮箱"
-                      style="padding-right: 1px"
-                      clearable
-                    />
-                  </el-form-item>
-                  <el-form-item label="密码">
-                    <el-input
-                      v-model="userLogin.credential"
-                      type="password"
-                      placeholder="请输入密码"
-                      style="padding-right: 1px"
-                    />
-                  </el-form-item>
-                  <el-form-item label="图形验证码" label-width="90px">
-                    <el-image :src="captchaCode" @click="getCaptcha" />
-                    <el-input
-                      v-model="userLogin.captchaCode"
-                      placeholder="请输入图形验证码"
-                      style="width: 50%; padding-right: 1px"
-                    />
-                  </el-form-item>
-                  <el-form-item>
-                    <el-button
-                      type="primary"
-                      :loading="isLoading"
-                      @click.native="loginBtn"
-                    >登 录</el-button>
-                    <el-button type="plain" @click="register">注册/忘记密码?</el-button>
-                  </el-form-item>
-                </el-form>
-              </div>
-            </el-card>
-          </el-row>
-        </el-col>
-      </el-row>
-    </el-main>
-  </el-container>
-</template>
-
-<script>
-import { userMixin } from 'assets/js/mixin'
-import LoginBar from 'components/layout/LoginBar'
-
-export default {
-  name: 'Login',
-  components: {
-    LoginBar
-  },
-  mixins: [userMixin],
-  data() {
-    return {
-    }
-  },
-  created() {
-    document.title = '用户登录'
-    this.fetchPubkey()
-  },
-  methods: {
-    login() {
-      this.fetchPubkey()
-      this.dialogVisible = true
-    },
-    register() {
-      console.log('帐号注册')
-    }
-  }
-}
-</script>
-
-<style>
-/*处于手机屏幕时*/
-@media screen and (max-width: 768px){
-  .movie-list {
-    padding-top: 8px;
-    padding-left: 0.5%;
-    padding-right: 0.5%;
-  }
-}
-
-.movie-list {
-  padding-top: 15px;
-  padding-left: 6%;
-  padding-right: 6%;
-}
-</style>

src/views/disk/Disk.vue → src/views/map/Map.vue

@@ -4,9 +4,9 @@
       <el-col :md="2">
         <ul class="el-menu--horizontal el-menu">
           <li class="el-menu-item">
-            <a href="/disk" style="text-decoration-line: none">
+            <a href="/map" style="text-decoration-line: none">
               <img src="@/assets/img/icon/logo.png" class="el-avatar--circle el-avatar--medium" alt="img">
-              disk
+              map
             </a>
           </li>
         </ul>
@@ -17,30 +17,10 @@
           router
           mode="horizontal"
         >
-          <el-menu-item index="/disk/image">
+          <el-menu-item index="/map/image">
             <i class="el-icon-picture" />
             <span slot="title">图片</span>
           </el-menu-item>
-          <el-menu-item index="/disk/video">
-            <i class="el-icon-video-camera" />
-            <span slot="title">视频</span>
-          </el-menu-item>
-          <el-menu-item index="/disk/audio">
-            <i class="el-icon-headset" />
-            <span slot="title">音频</span>
-          </el-menu-item>
-          <el-menu-item index="/disk/text">
-            <i class="el-icon-headset" />
-            <span slot="title">文本</span>
-          </el-menu-item>
-          <el-menu-item index="/disk/upload">
-            <i class="el-icon-upload" />
-            <span slot="title">上传</span>
-          </el-menu-item>
-          <el-menu-item index="/disk/trash">
-            <i class="el-icon-delete" />
-            <span slot="title">回收站</span>
-          </el-menu-item>
         </el-menu>
       </el-col>
       <el-col :md="2">
@@ -79,7 +59,7 @@ import { userMixin } from 'assets/js/mixin'
 import { getAuthedUser } from '@/utils/auth'
 
 export default {
-  name: 'Disk',
+  name: 'Map',
   mixins: [userMixin],
   data() {
     return {
@@ -87,7 +67,6 @@ export default {
     }
   },
   created() {
-    document.title = '我的网盘'
     const userInfo = getAuthedUser()
     if (userInfo !== null) {
       this.user = userInfo

src/views/post/CamList.vue

@@ -1,313 +0,0 @@
-<template>
-  <el-row>
-    <el-row>
-      <el-button
-        size="mini"
-        type="warning"
-        class="el-icon-document-add"
-        @click="handleAdd"
-      >添加</el-button>
-      <el-table
-        :data="dataList"
-        style="width: 100%"
-      >
-        <el-table-column
-          label="No"
-          type="index"
-        />
-        <el-table-column
-          prop="addAt"
-          label="添加时间"
-          width="150"
-        />
-        <el-table-column
-          prop="camName"
-          label="摄像头名字"
-          width="150"
-        >
-          <template slot-scope="scope">
-            <router-link style="text-decoration-line: none" target="_blank" :to="`/my/cam/${scope.row.camId}/live`">
-              {{ scope.row.camName }}
-            </router-link>
-          </template>
-        </el-table-column>
-        <el-table-column
-          prop="state"
-          label="状态"
-        >
-          <template slot-scope="scope">
-            <el-tag v-if="scope.row.state" :type="'success'" disable-transitions>
-              推流中
-            </el-tag>
-            <el-tag v-else :type="'danger'" disable-transitions>
-              离线
-            </el-tag>
-          </template>
-        </el-table-column>
-        <el-table-column
-          label="操作"
-        >
-          <template slot-scope="scope">
-            <el-button
-              size="mini"
-              @click="handleEdit(scope.$index, scope.row)"
-            >修改名字</el-button>
-            <el-button
-              size="mini"
-              @click="handleDetail(scope.$index, scope.row)"
-            >推流地址</el-button>
-            <el-button
-              size="mini"
-              type="danger"
-              @click="handleDelete(scope.$index, scope.row)"
-            >删除</el-button>
-          </template>
-        </el-table-column>
-      </el-table>
-      <!-- 添加摄像头对话框 -->
-      <el-dialog
-        append-to-body
-        :visible.sync="showEditScopeDialog"
-        width="50%"
-        center
-      >
-        <el-card class="box-card">
-          <div slot="header" class="clearfix">
-            <h3>添加摄像头</h3>
-          </div>
-          <div class="text item">
-            <el-form ref="form" :model="addCamForm" label-width="80px">
-              <el-form-item label="设备 ID">
-                <el-input v-model="addCamForm.deviceId" />
-              </el-form-item>
-              <el-form-item label="设备名字">
-                <el-input v-model="addCamForm.deviceName" />
-              </el-form-item>
-              <el-form-item>
-                <el-button type="primary" @click="onAddCam">立即添加</el-button>
-                <el-button>取消</el-button>
-              </el-form-item>
-            </el-form>
-          </div>
-        </el-card>
-      </el-dialog>
-      <!-- 修改摄像头名字对话框 -->
-      <el-dialog
-        append-to-body
-        :visible.sync="showUpdateDialog"
-        width="50%"
-        center
-      >
-        <el-card class="box-card">
-          <div slot="header" class="clearfix">
-            <h3>修改摄像头名字</h3>
-          </div>
-          <div class="text item">
-            <el-form ref="form" :model="updateNameForm" label-width="80px">
-              <el-form-item label="新名字">
-                <el-input v-model="updateNameForm.newName" />
-              </el-form-item>
-              <el-form-item>
-                <el-button type="primary" @click="onUpdateCam">立即修改</el-button>
-                <el-button>取消</el-button>
-              </el-form-item>
-            </el-form>
-          </div>
-        </el-card>
-      </el-dialog>
-      <!-- 摄像头详情对话框 -->
-      <el-dialog
-        append-to-body
-        :visible.sync="showDetailDialog"
-        width="50%"
-        center
-      >
-        <el-card class="box-card">
-          <div slot="header" class="clearfix">
-            <h3>推流地址</h3>
-          </div>
-          <div class="text item">
-            <h3>{{ pushUrl }}</h3>
-          </div>
-        </el-card>
-      </el-dialog>
-    </el-row>
-    <el-row>
-      <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-row>
-</template>
-
-<script>
-import {
-  getVideoResource
-} from '@/api/video'
-import { addCam, deleteCam, getCamPushUrl, getUserCams, updateCamName } from '@/api/cam'
-
-export default {
-  name: 'CamList',
-  data() {
-    return {
-      // 屏幕宽度, 为了控制分页条的大小
-      screenWidth: document.body.clientWidth,
-      currentPage: 1,
-      pageSize: 20,
-      totalSize: 0,
-      dataList: [],
-      // **********************************************************************
-      showEditScopeDialog: false,
-      showUpdateDialog: false,
-      showDetailDialog: false,
-      videoResources: [],
-      addCamForm: {
-        deviceId: null,
-        deviceName: null
-      },
-      updateNameForm: {
-        camId: null,
-        newName: null
-      },
-      pushUrl: null
-    }
-  },
-  created() {
-    document.title = '摄像头列表'
-    this.getData(this.currentPage)
-  },
-  methods: {
-    handleCurrentChange(pageNumber) {
-      this.currentPage = pageNumber
-      this.getData(this.currentPage)
-      // 回到顶部
-      scrollTo(0, 0)
-    },
-    getData() {
-      this.dataList = []
-      getUserCams(this.currentPage).then(resp => {
-        if (resp.code === 0) {
-          this.dataList = resp.data.list
-          this.totalSize = resp.data.totalSize
-        } else {
-          this.$notify({
-            title: '提示',
-            message: resp.msg,
-            type: 'warning',
-            duration: 3000
-          })
-        }
-      }).catch(error => {
-        this.$notify({
-          title: '提示',
-          message: error.message,
-          type: 'error',
-          duration: 3000
-        })
-      })
-    },
-    handleVideoResource(index, row) {
-      const videoId = row.videoId
-      getVideoResource(videoId).then(resp => {
-        if (resp.code === 0) {
-          this.videoResources = resp.data
-        }
-      })
-    },
-    handleAdd(index, row) {
-      this.showEditScopeDialog = true
-    },
-    handleEdit(index, row) {
-      this.updateNameForm.camId = row.camId
-      this.showUpdateDialog = true
-    },
-    handleDetail(index, row) {
-      getCamPushUrl(row.camId).then(resp => {
-        if (resp.code === 0) {
-          this.pushUrl = resp.data
-          this.showDetailDialog = true
-        }
-      })
-    },
-    handleDelete(index, row) {
-      this.$confirm('确定要删除 ' + row.title + '?', '提示', {
-        confirmButtonText: '确定',
-        cancelButtonText: '取消',
-        type: 'warning'
-      }).then(() => {
-        deleteCam(row.camId).then(resp => {
-          if (resp.code === 0) {
-            this.$notify({
-              title: '提示',
-              message: '摄像头已删除',
-              type: 'warning',
-              duration: 3000
-            })
-            this.$router.go(0)
-          }
-        })
-      }).catch(() => {
-        this.$message({
-          type: 'info',
-          message: '已取消'
-        })
-      })
-    },
-    onAddCam() {
-      this.showEditScopeDialog = false
-      addCam(this.addCamForm).then(resp => {
-        if (resp.code === 0) {
-          this.addCamForm = {
-            deviceId: null,
-            deviceName: null
-          }
-          this.$notify({
-            title: '提示',
-            message: '摄像头已添加',
-            type: 'warning',
-            duration: 3000
-          })
-        }
-      }).catch(error => {
-        this.$notify({
-          title: '提示',
-          message: error.message,
-          type: 'warning',
-          duration: 3000
-        })
-      })
-    },
-    onUpdateCam() {
-      this.showUpdateDialog = false
-      updateCamName(this.updateNameForm).then(resp => {
-        if (resp.code === 0) {
-          this.$notify({
-            title: '提示',
-            message: '摄像头名字已更新',
-            type: 'warning',
-            duration: 3000
-          })
-        }
-      }).catch(error => {
-        this.$notify({
-          title: '提示',
-          message: error.message,
-          type: 'warning',
-          duration: 3000
-        })
-      })
-    }
-  }
-}
-</script>
-
-<style>
-</style>

src/views/vip/Vip.vue

@@ -1,60 +0,0 @@
-<template>
-  <div>
-    <el-row class="not-result">
-      <el-col :span="12" :offset="6">
-        <img src="@/assets/img/icon/not-collection.png">
-        <div>VIP 功能正在施工中</div>
-      </el-col>
-    </el-row>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'Vip',
-  components: {},
-  data() {
-    return {
-      // 屏幕宽度, 为了控制分页条的大小
-      screenWidth: document.body.clientWidth,
-      currentPage: 1
-    }
-  },
-  created() {
-  },
-  mounted() {
-    // 当窗口宽度改变时获取屏幕宽度
-    window.onresize = () => {
-      return () => {
-        window.screenWidth = document.body.clientWidth
-        this.screenWidth = window.screenWidth
-      }
-    }
-  },
-  methods: {
-  }
-}
-</script>
-
-<style scoped>
-/*处于手机屏幕时*/
-@media screen and (max-width: 768px){
-  #movie-list {
-    padding-top: 8px;
-    padding-left: 0.5%;
-    padding-right: 0.5%;
-  }
-}
-
-#movie-list {
-  padding-top: 15px;
-  padding-left: 6%;
-  padding-right: 6%;
-}
-
-.not-result {
-  padding-top: 100px;
-  padding-bottom: 100px;
-  text-align: center;
-}
-</style>