摄像头录像页面添加 header 导航栏和 user-avatar-card

src/api/cam.js

@@ -7,6 +7,7 @@ const camApi = {
   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'
 }
@@ -54,3 +55,7 @@ export function getCamPullUrl(camId) {
 export function getCamRecord(recordId) {
   return get(camApi.camRecordApi + '/' + recordId)
 }
+
+export function getLatestRecord(camId) {
+  return get(camApi.camLatestRecordApi + '/' + camId)
+}

src/views/cam/LivePage.vue

@@ -1,40 +1,70 @@
 <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/` + camDetail.camId">历史录像</router-link></h5>
-          </div>
-        </el-card>
-      </el-row>
-    </el-col>
-    <el-col :md="8">
-      <el-row>
+  <el-row>
+    <el-header style="text-align: right; font-size: 12px">
+      <el-col :md="2">
+        <ul class="el-menu--horizontal el-menu">
+          <li class="el-menu-item">
+            <a href="/my" style="text-decoration-line: none">
+              <img src="@/assets/img/icon/logo.png" class="el-avatar--circle el-avatar--medium" alt="img">
+              my
+            </a>
+          </li>
+        </ul>
+      </el-col>
+      <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-error"
+            class="size"
+            @click.native="goToLogout"
+          >退出</el-dropdown-item>
+          <el-dropdown-item>查看</el-dropdown-item>
+        </el-dropdown-menu>
+      </el-dropdown>
+    </el-header>
+    <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="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>
+              <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/` + camDetail.camId">历史录像</router-link></h5>
             </div>
           </el-card>
         </el-row>
-        <user-avatar-card v-if="user !== null" :user-avatar="user" />
-      </el-row>
-    </el-col>
+      </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>
+          <user-avatar-card v-if="user !== null" :user-avatar="user" />
+        </el-row>
+      </el-col>
+    </el-row>
   </el-row>
 </template>
 

src/views/cam/RecordPage.vue

@@ -1,110 +1,135 @@
 <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>
+    <el-header style="text-align: right; font-size: 12px">
+      <el-col :md="2">
+        <ul class="el-menu--horizontal el-menu">
+          <li class="el-menu-item">
+            <a href="/my" style="text-decoration-line: none">
+              <img src="@/assets/img/icon/logo.png" class="el-avatar--circle el-avatar--medium" alt="img">
+              my
+            </a>
+          </li>
+        </ul>
+      </el-col>
+      <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-error"
+            class="size"
+            @click.native="goToLogout"
+          >退出</el-dropdown-item>
+          <el-dropdown-item>查看</el-dropdown-item>
+        </el-dropdown-menu>
+      </el-dropdown>
+    </el-header>
+    <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="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>
+              <h3 v-html="camDetail.camName" />
             </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 id="videoplayer" class="text item">
+              <div id="dplayer" ref="dplayer" style="height: 480px;" />
             </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"
+      </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%"
                 >
-                  <template slot-scope="scope">
-                    <router-link :to="`/vidlist/${scope.row.videoId}`">
-                      <span>{{ scope.row.title | ellipsis }}</span>
-                    </router-link>
-                  </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-table-column
+                    prop="title"
+                  >
+                    <template slot-scope="scope">
+                      <router-link :to="`/vidlist/${scope.row.videoId}`">
+                        <span>{{ scope.row.title | ellipsis }}</span>
+                      </router-link>
+                    </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>
+          <user-avatar-card v-if="user !== null" :user-avatar="user" />
         </el-row>
-      </el-row>
-    </el-col>
+      </el-col>
+    </el-row>
   </el-row>
 </template>
 
 <script>
 import DPlayer from 'dplayer'
-import { getCamDetail, getCamList, getCamRecord, getCamRecordByMonth } from '@/api/cam'
+import UserAvatarCard from '@/components/card/UserAvatarCard'
+import { getCamDetail, getCamList, getCamRecord, getCamRecordByMonth, getLatestRecord } from '@/api/cam'
 
 export default {
   name: 'RecordPage',
+  components: { UserAvatarCard },
   data() {
     return {
       DPlayer,
-      video: {
-        videoId: 110120119,
-        title: '我的直播',
-        description: '我的直播',
-        view: 10,
-        favorite: 10
-      },
       user: {
         userId: 10001,
         screenName: '浩',
-        avatarUrl: '',
+        avatarUrl: '//pic1.zhimg.com/v2-c755e7ec5510b0638c2d1bead712544a_r.jpg',
         following: 1024,
         follower: 1024
       },
       calendarDate: new Date(),
-      dateList: [],
       dateMap: new Map(),
       showRecordList: false,
       camList: [],
@@ -179,8 +204,7 @@ export default {
       }
     })
 
-    const recordId = '857500422144'
-    getCamRecord(recordId).then(resp => {
+    getLatestRecord(camId).then(resp => {
       if (resp.code === 0) {
         const respData = resp.data
         this.initMp4Player(respData.coverUrl, respData.videoUrl)