update views/disk/DiskCam.vue

src/api/disk.js

@@ -8,7 +8,9 @@ const diskApi = {
   getAlbumKeyValueApi: '/api/content/disk/album/kv',
   getAlbumListApi: '/api/content/disk/album/list',
   getAlbumDetailApi: '/api/content/disk/album/detail',
+  getCamKeyValueApi: '/api/content/disk/cam/kv',
   getCamDetailApi: '/api/content/disk/cam/detail',
+  getCamRecordByMonthAPi: '/api/content/disk/cam/record/month',
   getDiskChannelInfoApi: '/api/file/oss/serverinfo/file'
 }
 
@@ -47,3 +49,11 @@ export function getAlbumList() {
 export function getAlbumDetail(albumId) {
   return post(diskApi.getAlbumDetailApi + '/' + albumId)
 }
+
+export function getCamKeyValue() {
+  return post(diskApi.getCamKeyValueApi)
+}
+
+export function getRecordByMonth(query) {
+  return post(diskApi.getCamRecordByMonthAPi, query)
+}

src/views/disk/DiskCam.vue

@@ -2,12 +2,18 @@
   <div>
     <el-row style="padding: 5px">
       <el-col :md="16" style="padding: 5px">
-        <el-card class="box-card">
+        <el-card v-if="camVideo !== null" class="box-card">
           <div slot="header" class="clearfix">
-            <span>摄像头</span>
+            <span>{{ camVideo.recordTime }}</span>
           </div>
           <div class="text item">
-            <span>视频播放器</span>
+            <video
+              :src="camVideo.videoUrl"
+              controls
+              autoplay
+              class="video"
+              width="100%"
+            />
           </div>
         </el-card>
       </el-col>
@@ -21,8 +27,7 @@
               placeholder="选择摄像头"
               @change="onSelectChange"
             >
-              <el-option label="cam201" value="1" />
-              <el-option label="cam204" value="2" />
+              <el-option v-for="item in selectOptions" :key="item.value" :label="item.label" :value="item.label" />
             </el-select>
             <el-button type="plain" icon="el-icon-date" style="margin: 5px" @click="onSelectDate">选择日期</el-button>
             <el-button type="plain" icon="el-icon-magic-stick" style="margin: 5px" @click="onButtonSubmit">提交</el-button>
@@ -62,42 +67,43 @@
       width="50%"
       center
     >
-      <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 style="color: green">绿色标记的日期表示当前有监控录像</span>
+      <div style="padding: 5px; text-align: center">
+        <span style="color: green">绿色标记的日期表示当天有监控录像</span>
+        <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>
-          <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-calendar>
+      </div>
     </el-dialog>
   </div>
 </template>
 
 <script>
-import { getCamDetail } from '@/api/disk'
+import { getCamDetail, getCamKeyValue, getRecordByMonth } from '@/api/disk'
 
 export default {
   name: 'DiskCam',
   data() {
     return {
-      selectedOption: '1',
+      selectOptions: [],
+      selectedOption: '',
+      currentCamId: '',
       calendarDate: new Date(),
       dateMap: new Map(),
-      form: {},
+      query: {
+        camId: this.currentCamId,
+        yearMonth: '',
+        yearMonthDay: ''
+      },
       dataList: [],
-      showCalenderDialog: false
+      showCalenderDialog: false,
+      camVideo: null
     }
   },
   watch: {
@@ -110,8 +116,9 @@ export default {
         const newMonth = this.getYearMonth(newValue)
         if (oldMonth !== newMonth) {
           this.showCalender = false
-          this.form.yearMonth = this.getYearMonth(newValue)
-          this.getCamRecordByMonth(this.form).then(resp => {
+          this.query.camId = this.currentCamId
+          this.query.yearMonth = this.getYearMonth(newValue)
+          this.getCamRecordByMonth().then(resp => {
             if (resp.code === 0) {
               this.dateMap.clear()
               for (const item of resp.data) {
@@ -121,6 +128,8 @@ export default {
               }
             }
             this.showCalender = true
+          }).catch(error => {
+            this.$message.error(error.message)
           })
         }
       }
@@ -129,14 +138,15 @@ export default {
   created() {
     document.title = '监控'
     this.getData()
+    getCamKeyValue().then(resp => {
+      if (resp.code === 0) {
+        this.selectOptions = resp.data
+      }
+    })
   },
   methods: {
     getData() {
-      const query = {
-        camId: null,
-        yearMonthDay: null
-      }
-      getCamDetail(query).then(resp => {
+      getCamDetail(this.query).then(resp => {
         if (resp.code === 0) {
           const respData = resp.data
           console.log(respData)
@@ -147,7 +157,7 @@ export default {
       this.$message.info('select -> ' + this.selectedOption)
     },
     handleCellClick(date, data) {
-      this.form.yearMonthDay = this.getYearMonthDay(date)
+      this.query.yearMonthDay = this.getYearMonthDay(date)
     },
     dealMyDate(val) {
       let res = ''
@@ -174,6 +184,15 @@ export default {
       return year + '-' + month + '-' + day
     },
     getCamRecordByMonth(val) {
+      const query = {
+        camId: 1,
+        yearMonth: ''
+      }
+      getRecordByMonth(query).then(resp => {
+        if (resp.code === 0) {
+          console.log(resp.data)
+        }
+      })
     },
     handlePlay(index, row) {
       this.$message.info('play cam video')