|
|
@@ -1,315 +0,0 @@
|
|
|
-<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>
|
