1.更新 cam 路由

2.添加 account 路由

src/router/index.js

@@ -41,6 +41,7 @@ const UserRelation = () => import('views/user/UserRelation')
 // 用户后台主页
 const My = () => import('views/my/My')
 const MyProfile = () => import('views/my/MyProfile')
+const MyRealname = () => import('views/my/MyRealname')
 // 消息
 const MessageIndex = () => import('views/my/Message')
 const MyVip = () => import('views/my/MyVip')
@@ -50,7 +51,7 @@ const FavlistImage = () => import('views/my/FavlistImage')
 // 浏览记录
 const HistoryIndex = () => import('views/my/History')
 
-const CamList = () => import('views/post/CamList')
+const CamList = () => import('views/cam/CamList')
 
 // 发布稿件
 const PostPublishVideo = () => import('components/upload/PublishVideo')
@@ -111,6 +112,12 @@ const routes = [
         component: MyProfile,
         meta: { needAuth: true }
       },
+      {
+        path: '/my/account/realname',
+        name: '实名认证',
+        component: MyRealname,
+        meta: { needAuth: true }
+      },
       {
         path: '/my/account/vip',
         name: '小会员',
@@ -261,7 +268,7 @@ const routes = [
         component: CamList,
         meta: { needAuth: true }
       },
-      {
+      /* {
         path: '/my/cam/live',
         name: '实时录像',
         component: LivePage,
@@ -272,6 +279,18 @@ const routes = [
         name: '历史录像',
         component: RecordPage,
         meta: { needAuth: true }
+      },*/
+      {
+        path: '/my/cam/live/:camId',
+        name: 'LivePage',
+        component: LivePage,
+        meta: { needAuth: true }
+      },
+      {
+        path: '/my/cam/record/:camId',
+        name: 'RecordPage',
+        component: RecordPage,
+        meta: { needAuth: true }
       }
     ]
   },
@@ -382,18 +401,6 @@ const routes = [
     component: TimelineIndex,
     meta: { needAuth: true }
   },
-  {
-    path: '/my/cam/:camId/live',
-    name: 'LivePage',
-    component: LivePage,
-    meta: { needAuth: true }
-  },
-  {
-    path: '/my/cam/:camId/record',
-    name: 'RecordPage',
-    component: RecordPage,
-    meta: { needAuth: true }
-  },
   {
     path: '/my/post/edit/video/:videoId',
     name: 'PostEditVideo',

src/views/post/CamList.vue → src/views/cam/CamList.vue

@@ -26,7 +26,7 @@
           width="150"
         >
           <template slot-scope="scope">
-            <router-link style="text-decoration-line: none" target="_blank" :to="`/my/cam/${scope.row.camId}/live`">
+            <router-link style="text-decoration-line: none" target="_blank" :to="`/my/cam/live/${scope.row.camId}`">
               {{ scope.row.camName }}
             </router-link>
           </template>
@@ -48,6 +48,11 @@
           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)"
@@ -304,6 +309,14 @@ export default {
           duration: 3000
         })
       })
+    },
+    goToCamRecord(row) {
+      const path = '/my/cam/record/' + row.camId
+      if (this.$route.path === path) {
+        this.$router.go(0)
+        return
+      }
+      this.$router.push(path)
     }
   }
 }

src/views/cam/LivePage.vue

@@ -17,7 +17,7 @@
         <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-select v-model="camId" placeholder="选择摄像头" @change="onSelect">
                 <el-option
                   v-for="item in camList"
                   :key="item.value"
@@ -52,8 +52,8 @@ export default {
         following: 1024,
         follower: 1024
       },
+      camId: null,
       camList: [],
-      camNameModel: null,
       camDetail: null
     }
   },
@@ -63,12 +63,12 @@ export default {
     }
   },
   created() {
-    const camId = '103758827520'
+    const camId = this.$route.params.camId
+    this.camId = camId
     getCamDetail(camId).then(resp => {
       if (resp.code === 0) {
         var camDetail = resp.data
         this.camDetail = camDetail
-        this.camNameModel = camDetail.camName
         document.title = camDetail.camName + '实时录像'
 
         var ele = document.querySelector('#dplayer')
@@ -76,7 +76,9 @@ export default {
           const flvUrl = camDetail.pullUrl
           this.initFlvPlayer(camId, flvUrl)
         } else {
-          ele.innerHTML = '<h5>摄像头离线, 你可以查看本摄像头的<a style="text-decoration-line: none; color: red" target="_blank" href="/my/cam/record">历史录像</a></h5>'
+          ele.innerHTML = '<h5>摄像头离线, 你可以查看本摄像头的' +
+            '<a style="text-decoration-line: none; color: red" target="_blank" href="/my/cam/record/' + this.camId + '">历史录像</a>' +
+            '</h5>'
         }
       }
     })
@@ -121,7 +123,7 @@ export default {
       })
     },
     goToCamRecord() {
-      const path = '/my/cam/record'
+      const path = '/my/cam/record/' + this.camId
       if (this.$route.path === path) {
         this.$router.go(0)
         return

src/views/cam/RecordPage.vue

@@ -4,7 +4,15 @@
       <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" />
+            <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;" />
@@ -13,66 +21,62 @@
       </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-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)"
               >
-                <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>
+                <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"
+              :show-header="false"
+              height="480"
+              style="width: 100%"
+              @row-click="onClickRow"
+            >
+              <el-table-column
+                prop="recordId"
+              >
+                <template slot-scope="scope" onclick="getCamRecord">
+                  <span>{{ scope.row.recordId }}</span>
+                </template>
+              </el-table-column>
+              <el-table-column
+                prop="title"
+              >
+                <template slot-scope="scope">
+                  <span>{{ scope.row.title }}</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-col>
   </el-row>
@@ -101,16 +105,17 @@ export default {
         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,
-      showCalender: false
+      camRecord: null
     }
   },
   watch: {
@@ -140,11 +145,8 @@ export default {
     }
   },
   created() {
-    const camId = '103758827520'
-    if (camId === undefined || camId === null) {
-      return
-    }
-
+    const camId = this.$route.params.camId
+    this.camId = camId
     getCamDetail(camId).then(resp => {
       if (resp.code === 0) {
         var camDetail = resp.data
@@ -153,7 +155,6 @@ export default {
       }
     })
 
-    this.cam = camId
     this.form.camId = camId
     this.form.yearMonth = this.getYearMonth(new Date())
     getCamRecordByMonth(this.form).then(resp => {
@@ -174,34 +175,32 @@ export default {
       }
     })
 
+    // const today = new Date()
     getLatestRecord(camId).then(resp => {
       if (resp.code === 0) {
         const respData = resp.data
-        // this.initMp4Player(respData.coverUrl, respData.videoUrl)
+        this.initMp4Player(respData.coverUrl, respData.videoUrl)
       }
+    }).catch(error => {
+      console.log(error)
+      var ele = document.querySelector('#dplayer')
+      ele.innerHTML = '<h5>没有今天的录像记录</h5>'
     })
   },
   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
-      })
+      const path = '/my/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
         }
@@ -257,21 +256,27 @@ export default {
         }
       })
     },
-    getCamRecord(recordId) {
+    onClickRow(row) {
+      const recordId = row.recordId
       getCamRecord(recordId).then(resp => {
         if (resp.code === 0) {
           const respData = resp.data
-          // this.initMp4Player(respData.coverUrl, respData.videoUrl)
+          console.log(respData)
+          this.initMp4Player(respData.coverUrl, respData.videoUrl)
         }
       })
     },
     goToCamLive() {
-      const path = '/my/cam/live'
+      const path = '/my/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
     }
   }
 }

src/views/my/My.vue

@@ -1,5 +1,5 @@
 <template>
-  <el-container style="height: 650px; border: 1px solid #eee">
+  <el-container style="height: 800px; border: 1px solid #eee">
     <el-header style="text-align: right; font-size: 12px">
       <el-col :md="2">
         <ul class="el-menu--horizontal el-menu">
@@ -50,6 +50,10 @@
                 <i class="el-icon-film" />
                 <span slot="title">个人资料</span>
               </el-menu-item>
+              <el-menu-item index="/my/account/realname">
+                <i class="el-icon-film" />
+                <span slot="title">实名认证</span>
+              </el-menu-item>
               <el-menu-item index="/my/account/vip">
                 <i class="el-icon-film" />
                 <span slot="title">小会员</span>
@@ -164,14 +168,6 @@
                 <i class="el-icon-camera" />
                 <span slot="title">摄像头列表</span>
               </el-menu-item>
-              <el-menu-item index="/my/cam/live">
-                <i class="el-icon-camera" />
-                <span slot="title">实时录像</span>
-              </el-menu-item>
-              <el-menu-item index="/my/cam/record">
-                <i class="el-icon-camera" />
-                <span slot="title">历史录像</span>
-              </el-menu-item>
             </el-menu-item-group>
           </el-submenu>
         </el-menu>

src/views/my/MyProfile.vue

@@ -73,6 +73,7 @@ export default {
     }
   },
   created() {
+    document.title = '我的个人资料'
     this.loginUser = getAuthedUser()
 
     getServerInfo(this.imgData.channelId).then(res => {

src/views/my/MyRealname.vue

@@ -0,0 +1,237 @@
+<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">
+          <div slot="header" class="clearfix">
+            <span>身份证背面照</span>
+          </div>
+          <div class="text item">
+            <el-tooltip class="item" effect="dark" content="点击更新我的头像" placement="top-end">
+              <el-upload
+                class="avatar-uploader"
+                :action="imgOssUrl"
+                :headers="imgHeaders"
+                :data="imgData"
+                :with-credentials="true"
+                :show-file-list="false"
+                :before-upload="beforeAvatarUpload"
+                :on-success="handleAvatarSuccess"
+              >
+                <img v-if="loginUser" :src="loginUser.avatarUrl" class="avatar">
+                <i v-else class="el-icon-plus avatar-uploader-icon" />
+              </el-upload>
+            </el-tooltip>
+          </div>
+        </el-card>
+      </el-row>
+    </el-col>
+    <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">
+          <div slot="header" class="clearfix">
+            <span>身份证反面照</span>
+          </div>
+          <div class="text item">
+            <el-tooltip class="item" effect="dark" content="点击更新我的头像" placement="top-end">
+              <el-upload
+                class="avatar-uploader"
+                :action="imgOssUrl"
+                :headers="imgHeaders"
+                :data="imgData"
+                :with-credentials="true"
+                :show-file-list="false"
+                :before-upload="beforeAvatarUpload"
+                :on-success="handleAvatarSuccess"
+              >
+                <img v-if="loginUser" :src="loginUser.avatarUrl" class="avatar">
+                <i v-else class="el-icon-plus avatar-uploader-icon" />
+              </el-upload>
+            </el-tooltip>
+          </div>
+        </el-card>
+      </el-row>
+    </el-col>
+    <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">
+          <div slot="header" class="clearfix">
+            <span>手持身份证反面照</span>
+          </div>
+          <div class="text item">
+            <el-tooltip class="item" effect="dark" content="点击更新我的头像" placement="top-end">
+              <el-upload
+                class="avatar-uploader"
+                :action="imgOssUrl"
+                :headers="imgHeaders"
+                :data="imgData"
+                :with-credentials="true"
+                :show-file-list="false"
+                :before-upload="beforeAvatarUpload"
+                :on-success="handleAvatarSuccess"
+              >
+                <img v-if="loginUser" :src="loginUser.avatarUrl" class="avatar">
+                <i v-else class="el-icon-plus avatar-uploader-icon" />
+              </el-upload>
+            </el-tooltip>
+          </div>
+        </el-card>
+      </el-row>
+    </el-col>
+    <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">
+          <div slot="header" class="clearfix">
+            <span>我的资料</span>
+          </div>
+          <div class="text item">
+            <el-form ref="form" :model="loginUser" label-width="80px">
+              <el-form-item label="ID">
+                <el-input v-model="loginUser.userId" style="padding-right: 1px" readonly />
+              </el-form-item>
+              <el-form-item label="显示名">
+                <el-input v-model="loginUser.screenName" style="padding-right: 1px" readonly />
+              </el-form-item>
+              <el-form-item label="签名">
+                <el-input v-model="loginUser.signature" style="padding-right: 1px" readonly />
+              </el-form-item>
+            </el-form>
+          </div>
+        </el-card>
+      </el-row>
+    </el-col>
+  </el-row>
+</template>
+
+<script>
+import { getServerInfo } from '@/api/content'
+import { updateAvatar } from '@/api/account'
+import { getAuthedUser, updateAuthedUser } from '@/utils/auth'
+
+export default {
+  name: 'MyRealname',
+  data() {
+    return {
+      imgOssUrl: '',
+      imgHeaders: {
+        Authorization: ''
+      },
+      imgData: {
+        channelId: process.env.VUE_APP_UPLOAD_AVATAR_CHANNEL
+      },
+      coverUrl: null,
+      // ****************************************************************************************************************
+      loginUser: null
+    }
+  },
+  created() {
+    document.title = '我的实名认证'
+    this.loginUser = getAuthedUser()
+
+    getServerInfo(this.imgData.channelId).then(res => {
+      if (res.code === 0) {
+        const resData = res.data
+        this.imgOssUrl = resData.ossUrl
+        this.imgHeaders.Authorization = 'Bearer ' + resData.token
+      } else {
+        this.$notify({
+          title: '提示',
+          message: '获取 OSS 服务器地址失败, 暂时无法上传文件',
+          type: 'error',
+          duration: 3000
+        })
+      }
+    }).catch(error => {
+      this.$notify({
+        title: '提示',
+        message: error.message,
+        type: 'warning',
+        duration: 3000
+      })
+    })
+  },
+  mounted() {
+  },
+  methods: {
+    // ****************************************************************************************************************
+    beforeAvatarUpload(file) {
+      const isJPG = file.type === 'image/jpeg'
+      const isLt2M = file.size / 1024 / 1024 < 2
+      if (!isJPG) {
+        this.$message.error('头像文件只能是 JPG 格式!')
+      }
+      if (!isLt2M) {
+        this.$message.error('头像文件大小不能超过 2MB!')
+      }
+      return isJPG && isLt2M
+    },
+    handleAvatarSuccess(res, file) {
+      if (res.code === 0) {
+        const resData = res.data
+        this.coverUrl = URL.createObjectURL(file.raw)
+
+        const avatar = {}
+        avatar.channelId = this.imgData.channelId
+        avatar.uploadId = resData.uploadId
+        updateAvatar(avatar).then(resp => {
+          if (resp.code === 0) {
+            this.loginUser.avatarUrl = resp.data.url
+            updateAuthedUser(this.loginUser)
+          } else {
+            this.$notify({
+              title: '头像更新失败',
+              message: resp.msg,
+              type: 'warning',
+              duration: 3000
+            })
+          }
+        })
+      } else {
+        this.$notify({
+          title: '提示',
+          message: '头像上传失败，请重试！' + res.msg,
+          type: 'warning',
+          duration: 3000
+        })
+      }
+    }
+    // ****************************************************************************************************************
+  }
+}
+</script>
+
+<style>
+.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: 256px;
+  height: 256px;
+  line-height: 178px;
+  text-align: center;
+}
+.avatar {
+  width: 256px;
+  height: 256px;
+  display: block;
+}
+</style>