更新实时录像和历史录像的位置

src/router/index.js

@@ -13,7 +13,9 @@ const VideoPage = () => import('views/home/VideoPage')
 const VideoList = () => import('views/home/VideoList')
 
 const LivePage = () => import('views/cam/LivePage')
+const LivePage0 = () => import('views/cam/LivePage0')
 const RecordPage = () => import('views/cam/RecordPage')
+const RecordPage0 = () => import('views/cam/RecordPage0')
 
 const AudioIndex = () => import('views/home/Audio')
 const AudioPage = () => import('views/home/AudioPage')
@@ -243,7 +245,7 @@ const routes = [
   },
   {
     path: '/my/cam',
-    name: 'MyMessage',
+    name: 'MyCam',
     component: My,
     meta: { needAuth: true },
     children: [
@@ -252,6 +254,18 @@ const routes = [
         name: '摄像头列表',
         component: CamList,
         meta: { needAuth: true }
+      },
+      {
+        path: '/my/cam/live',
+        name: '实时录像',
+        component: LivePage0,
+        meta: { needAuth: true }
+      },
+      {
+        path: '/my/cam/record',
+        name: '历史录像',
+        component: RecordPage0,
+        meta: { needAuth: true }
       }
     ]
   },

src/views/cam/LivePage0.vue

@@ -0,0 +1,177 @@
+<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/RecordPage0.vue

@@ -0,0 +1,315 @@
+<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/my/My.vue

@@ -34,10 +34,7 @@
           :default-active="this.$route.path"
           router
           class="el-menu-vertical-demo"
-          :collapse="isCollapse"
           :unique-opened="true"
-          @open="handleOpen"
-          @close="handleClose"
         >
           <el-submenu index="/my/account">
             <template slot="title">
@@ -163,6 +160,14 @@
                 <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>