|
|
@@ -0,0 +1,246 @@
|
|
|
+<template>
|
|
|
+ <div>
|
|
|
+ <el-row style="padding: 5px">
|
|
|
+ <el-col :md="16" style="padding: 5px">
|
|
|
+ <el-card class="box-card">
|
|
|
+ <div slot="header" class="clearfix">
|
|
|
+ <span>摄像头</span>
|
|
|
+ </div>
|
|
|
+ <div class="text item">
|
|
|
+ <span>视频播放器</span>
|
|
|
+ </div>
|
|
|
+ </el-card>
|
|
|
+ </el-col>
|
|
|
+ <el-col :md="8" style="padding: 5px">
|
|
|
+ <el-card class="box-card">
|
|
|
+ <div slot="header" class="clearfix">
|
|
|
+ <el-select
|
|
|
+ style="margin: 5px;"
|
|
|
+ v-model="selectedOption"
|
|
|
+ clearable
|
|
|
+ placeholder="选择摄像头"
|
|
|
+ @change="onSelectChange"
|
|
|
+ >
|
|
|
+ <el-option label="cam201" value="1" />
|
|
|
+ <el-option label="cam204" value="2" />
|
|
|
+ </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) }} 的监控列表
|
|
|
+ </span>
|
|
|
+ <el-divider />
|
|
|
+ <el-table
|
|
|
+ :data="dataList"
|
|
|
+ :show-header="true"
|
|
|
+ style="width: 100%"
|
|
|
+ >
|
|
|
+ <el-table-column
|
|
|
+ prop="createAt"
|
|
|
+ label="名字"
|
|
|
+ />
|
|
|
+ <el-table-column label="操作">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <el-button
|
|
|
+ size="mini"
|
|
|
+ @click="handlePlay(scope.$index, scope.row)"
|
|
|
+ >播放</el-button>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ </div>
|
|
|
+ </el-card>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+
|
|
|
+ <el-dialog
|
|
|
+ title="日历"
|
|
|
+ append-to-body
|
|
|
+ :visible.sync="showCalenderDialog"
|
|
|
+ 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>
|
|
|
+ <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-dialog>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+export default {
|
|
|
+ name: 'DiskCam',
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ selectedOption: '1',
|
|
|
+ calendarDate: new Date(),
|
|
|
+ dateMap: new Map(),
|
|
|
+ form: {},
|
|
|
+ dataList: [],
|
|
|
+ showCalenderDialog: 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)
|
|
|
+ this.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() {
|
|
|
+ document.title = '监控'
|
|
|
+ this.getData()
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ getData() {
|
|
|
+ },
|
|
|
+ onSelectChange() {
|
|
|
+ this.$message.info('select -> ' + this.selectedOption)
|
|
|
+ },
|
|
|
+ handleCellClick(date, data) {
|
|
|
+ this.form.yearMonthDay = this.getYearMonthDay(date)
|
|
|
+ },
|
|
|
+ dealMyDate(val) {
|
|
|
+ let res = ''
|
|
|
+ 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
|
|
|
+ },
|
|
|
+ getCamRecordByMonth(val) {
|
|
|
+ },
|
|
|
+ handlePlay(index, row) {
|
|
|
+ this.$message.info('play cam video')
|
|
|
+ },
|
|
|
+ onSelectDate() {
|
|
|
+ this.showCalenderDialog = true
|
|
|
+ },
|
|
|
+ onButtonSubmit() {
|
|
|
+ this.$confirm('确认提交？', '提示', {
|
|
|
+ confirmButtonText: '确定',
|
|
|
+ cancelButtonText: '取消',
|
|
|
+ type: 'warning'
|
|
|
+ }).then(() => {
|
|
|
+ this.$message({
|
|
|
+ type: 'success',
|
|
|
+ message: '已提交'
|
|
|
+ })
|
|
|
+ }).catch(() => {
|
|
|
+ this.$message({
|
|
|
+ type: 'info',
|
|
|
+ message: '已取消'
|
|
|
+ })
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</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>
|
