update views/disk DiskCam.vue

src/api/disk.js

@@ -10,7 +10,9 @@ const diskApi = {
   getAlbumDetailApi: '/api/content/disk/album/detail',
   getCamKeyValueApi: '/api/content/disk/cam/kv',
   getCamDetailApi: '/api/content/disk/cam/detail',
+  submitUserActivityApi: '/api/content/disk/cam/activity',
   getCamRecordByMonthAPi: '/api/content/disk/cam/record/month',
+  getRecordUrlAPi: '/api/content/disk/cam/record/url',
   getDiskChannelInfoApi: '/api/file/oss/serverinfo/file'
 }
 
@@ -22,10 +24,6 @@ export function getFileDetail(fileId) {
   return get(diskApi.filePreviewApi + '?fileId=' + fileId)
 }
 
-export function getCamDetail(query) {
-  return get(diskApi.getCamDetailApi, query)
-}
-
 export function getDiskChannelInfo() {
   return post(diskApi.getDiskChannelInfoApi)
 }
@@ -54,6 +52,17 @@ export function getCamKeyValue() {
   return get(diskApi.getCamKeyValueApi)
 }
 
+export function getCamDetail(query) {
+  return get(diskApi.getCamDetailApi, query)
+}
+
 export function getRecordByMonth(query) {
   return get(diskApi.getCamRecordByMonthAPi, query)
 }
+export function getRecordUrl(recordId) {
+  return get(diskApi.getRecordUrlAPi + '/' + recordId)
+}
+
+export function submitActivity() {
+  return post(diskApi.submitUserActivityApi)
+}

src/views/disk/DiskCam.vue

@@ -2,18 +2,38 @@
   <div>
     <el-row style="padding: 5px">
       <el-col :md="16" style="padding: 5px">
-        <el-card v-if="camVideo !== null" class="box-card">
+        <el-card v-if="camDetail !== null" class="box-card">
           <div slot="header" class="clearfix">
-            <span>{{ camVideo.recordTime }}</span>
+            <span>{{ camDetail.camName }}</span>
           </div>
           <div class="text item">
-            <video
-              :src="camVideo.videoUrl"
-              controls
-              autoplay
-              class="video"
-              width="100%"
-            />
+            <span v-if="camDetail.onLive">
+              <video
+                :src="camDetail.pullUrl"
+                controls
+                autoplay
+                class="video"
+                width="100%"
+              />
+            </span>
+            <span v-else>
+              <video
+                v-if="camRecordDetail !== null"
+                :src="camRecordDetail.url"
+                controls
+                autoplay
+                class="video"
+                width="100%"
+              />
+              <span v-else>
+                无实时监控(选择日期查看历史监控录像)
+              </span>
+            </span>
+          </div>
+        </el-card>
+        <el-card v-else class="box-card">
+          <div slot="header" class="clearfix">
+            <span>选择摄像头查看监控</span>
           </div>
         </el-card>
       </el-col>
@@ -27,14 +47,14 @@
               placeholder="选择摄像头"
               @change="onSelectChange"
             >
-              <el-option v-for="item in selectOptions" :key="item.value" :label="item.label" :value="item.label" />
+              <el-option v-for="item in selectOptions" :key="item.value" :label="item.label" :value="item.value" />
             </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>
           </div>
           <div class="text item">
             <span style="color: red">
-              {{ getYearMonthDay(calendarDate) }} 的监控列表
+              {{ getYearMonthDay(calendarDate) }} 的监控录像
             </span>
             <el-divider />
             <el-table
@@ -43,14 +63,19 @@
               style="width: 100%"
             >
               <el-table-column
-                prop="createAt"
-                label="名字"
+                prop="startTime"
+                label="开始时间"
+              />
+              <el-table-column
+                prop="duration"
+                label="时长(秒)"
               />
               <el-table-column label="操作">
                 <template slot-scope="scope">
                   <el-button
                     size="mini"
-                    @click="handlePlay(scope.$index, scope.row)"
+                    icon="el-icon-video-play"
+                    @click="handlePlay(scope.row.recordId)"
                   >播放</el-button>
                 </template>
               </el-table-column>
@@ -68,15 +93,19 @@
       center
     >
       <div style="padding: 5px; text-align: center">
-        <span style="color: green">绿色标记的日期表示当天有监控录像</span>
+        <span>
+          <span style="color: red">红色 ✔</span>标记的日期表示当天有监控录像
+        </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" />
+            <p v-if="dealMyDate(data.day)" style="color: red">
+              {{ data.day.split("-").slice(2).join() }} {{ '✔' }}
+            </p>
+            <p v-else>{{ data.day.split("-").slice(2).join() }}</p>
           </div>
         </el-calendar>
       </div>
@@ -85,7 +114,7 @@
 </template>
 
 <script>
-import { getCamDetail, getCamKeyValue, getRecordByMonth } from '@/api/disk'
+import { getCamDetail, getCamKeyValue, getRecordByMonth, getRecordUrl, submitActivity } from '@/api/disk'
 
 export default {
   name: 'DiskCam',
@@ -93,17 +122,17 @@ export default {
     return {
       selectOptions: [],
       selectedOption: '',
-      currentCamId: '',
       calendarDate: new Date(),
       dateMap: new Map(),
       query: {
-        camId: this.currentCamId,
+        camId: '',
         yearMonth: '',
         yearMonthDay: ''
       },
       dataList: [],
       showCalenderDialog: false,
-      camVideo: null
+      camDetail: null,
+      camRecordDetail: null
     }
   },
   watch: {
@@ -115,10 +144,8 @@ export default {
         const oldMonth = this.getYearMonth(oldValue)
         const newMonth = this.getYearMonth(newValue)
         if (oldMonth !== newMonth) {
-          this.showCalender = false
-          this.query.camId = this.currentCamId
           this.query.yearMonth = this.getYearMonth(newValue)
-          this.getCamRecordByMonth().then(resp => {
+          getRecordByMonth(this.query).then(resp => {
             if (resp.code === 0) {
               this.dateMap.clear()
               for (const item of resp.data) {
@@ -126,8 +153,9 @@ export default {
                 const dayStr = this.getYearMonthDay(date1)
                 this.dateMap.set(dayStr, date1)
               }
+              // 对 calendarDate 赋值重新渲染日历, 目的是调用 dealMyDate 处理当月的日期
+              this.calendarDate = new Date(newMonth)
             }
-            this.showCalender = true
           }).catch(error => {
             this.$message.error(error.message)
           })
@@ -137,7 +165,6 @@ export default {
   },
   created() {
     document.title = '监控'
-    this.getData()
     getCamKeyValue().then(resp => {
       if (resp.code === 0) {
         this.selectOptions = resp.data
@@ -148,23 +175,39 @@ export default {
     getData() {
       getCamDetail(this.query).then(resp => {
         if (resp.code === 0) {
-          const respData = resp.data
-          console.log(respData)
+          this.camDetail = resp.data
         }
       })
     },
     onSelectChange() {
-      this.$message.info('select -> ' + this.selectedOption)
+      if (this.selectedOption === '') {
+        this.query.camId = ''
+        this.query.yearMonth = ''
+        this.query.yearMonthDay = ''
+        this.camDetail = null
+        this.camRecordDetail = null
+        return
+      }
+
+      this.query.camId = this.selectedOption
+      this.query.yearMonth = ''
+      this.query.yearMonthDay = ''
+      this.getData()
     },
     handleCellClick(date, data) {
+      this.showCalenderDialog = false
       this.query.yearMonthDay = this.getYearMonthDay(date)
+      getCamDetail(this.query).then(resp => {
+        if (resp.code === 0) {
+          const respData = resp.data
+          this.camDetail = respData
+          this.dataList = respData.dayRecords
+        }
+      })
     },
+    // 渲染日历时会处理每个日期
     dealMyDate(val) {
-      let res = ''
-      if (this.dateMap.get(val) != null) {
-        res = true
-      }
-      return res
+      return this.dateMap.get(val) !== undefined
     },
     getYearMonth(date) {
       const year = date.getFullYear().toString().padStart(4, '0')
@@ -183,22 +226,21 @@ export default {
       const day = date.getDate().toString().padStart(2, '0')
       return year + '-' + month + '-' + day
     },
-    getCamRecordByMonth(val) {
-      const query = {
-        camId: 1,
-        yearMonth: ''
-      }
-      getRecordByMonth(query).then(resp => {
+    handlePlay(recordId) {
+      getRecordUrl(recordId).then(resp => {
         if (resp.code === 0) {
-          console.log(resp.data)
+          this.camRecordDetail = resp.data
+        } else {
+          this.$message.error(resp.msg)
         }
       })
     },
-    handlePlay(index, row) {
-      this.$message.info('play cam video')
-    },
     onSelectDate() {
-      this.showCalenderDialog = true
+      if (this.selectedOption === '') {
+        this.$message.info('请先选择摄像头')
+      } else {
+        this.showCalenderDialog = true
+      }
     },
     onButtonSubmit() {
       this.$confirm('确认提交？', '提示', {
@@ -206,9 +248,10 @@ export default {
         cancelButtonText: '取消',
         type: 'warning'
       }).then(() => {
-        this.$message({
-          type: 'success',
-          message: '已提交'
+        submitActivity().then(resp => {
+          this.$message.info(resp.msg)
+        }).catch(error => {
+          this.$message.error(error.message)
         })
       }).catch(() => {
         this.$message({
@@ -222,56 +265,4 @@ export default {
 </script>
 
 <style>
-.clearfix:before,
-.clearfix:after {
-  display: table;
-  content: "";
-}
-
-.clearfix:after {
-  clear: both;
-}
-
-.is-selected {
-  color: #1989FA;
-}
-
-::v-deep.el-calendar{
-  height: calc(100% - 35px);
-}
-::v-deep.el-calendar .el-calendar__body{
-  padding-bottom: 16px;
-  height: calc(100% - 80px);
-}
-::v-deep.el-calendar .el-calendar-table{
-  height: 100%;
-}
-.el-backtop, ::v-deep.el-calendar .el-calendar-table td.is-today .date{
-  background: #DCE9FF;
-  color: rgba(0,0,0,0.45);
-}
-.el-backtop, ::v-deep.el-calendar .el-calendar-table .date:hover{
-  background: #DCE9FF;
-  color: rgba(0,0,0,0.45);
-}
-::v-deep.el-calendar .el-calendar-table .el-calendar-day:hover{
-  background: none;
-}
-::v-deep.el-calendar .el-calendar-table td.is-selected{
-  background: none;
-}
-::v-deep.el-calendar .el-calendar-table td.is-selected .date{
-  background: #5E97F9;
-  box-shadow: 0px 4px 7px 0px rgba(113,208,255,0.5);
-  color: #fff;
-}
-::v-deep.el-calendar .el-calendar__button-group{
-  display: none;
-}
-::v-deep.el-calendar .el-calendar__title{
-  margin: 0 auto;
-}
-::v-deep.el-calendar .el-calendar-table .el-calendar-day{
-  position: relative;
-}
 </style>