添加 MyCalendar.vue

src/router/my.js

@@ -7,6 +7,7 @@ const MyRealname = () => import('views/my/MyRealname')
 const MessageIndex = () => import('views/my/Message')
 const MyVip = () => import('views/my/MyVip')
 const MyWallet = () => import('views/my/MyWallet')
+const MyCalendar = () => import('views/my/MyCalendar')
 
 export default {
   path: '/my',
@@ -49,6 +50,12 @@ export default {
       name: '我的消息',
       component: MessageIndex,
       meta: { needAuth: true }
+    },
+    {
+      path: '/my/calendar',
+      name: '我的日历',
+      component: MyCalendar,
+      meta: { needAuth: true }
     }
   ]
 }

src/views/my/My.vue

@@ -60,6 +60,10 @@
             <i class="el-icon-message" />
             <span slot="title">我的消息</span>
           </el-menu-item>
+          <el-menu-item index="/my/calendar">
+            <i class="el-icon-date" />
+            <span slot="title">我的日历</span>
+          </el-menu-item>
         </el-menu>
       </el-aside>
       <el-main>

src/views/my/MyCalendar.vue

@@ -0,0 +1,190 @@
+<template>
+  <div id="customizedCalendar">
+    <div id="button">
+      <el-button type="primary" round size="mini" @click="skip('preYear')">
+        <i class="el-icon-arrow-left" />年
+      </el-button>
+<!--      <el-button type="warning" round size="mini" @click="skip('preMonth')"><i class="el-icon-arrow-left" />月
+      </el-button>-->
+      <el-button type="success" round size="mini" @click="skip('preDay')">
+        <i class="el-icon-arrow-left" />日
+      </el-button>
+      <el-button type="info" round size="mini" @click="skip('today')">今天</el-button>
+      <el-button type="success" round size="mini" @click="skip('postDay')">
+        日<i class="el-icon-arrow-right" />
+      </el-button>
+<!--      <el-button type="warning" round size="mini" @click="skip('postMonth')">月<i class="el-icon-arrow-right" />
+      </el-button>-->
+      <el-button type="primary" round size="mini" @click="skip('postYear')">
+        年<i class="el-icon-arrow-right" />
+      </el-button>
+    </div>
+    <el-divider/>
+    <el-row v-for="(item, index) in [1, 2, 3, 4]" :key="index">
+      <el-col v-for="(item, index) in [1, 2, 3]" :key="index" :md="8" style="padding: 5px;">
+        <el-calendar
+          v-model="value"
+          :first-day-of-week="1"
+        >
+          <template
+            slot="dateCell"
+            slot-scope="{date, data}"
+          >
+            <div slot="reference" class="div-Calendar" style="position: relative;z-index: 10" @click="clickCalendar(data)">
+              <p>{{ data.day.split('-').slice(2).join('-') }}</p>
+            </div>
+            <div v-if="data.isSelected" id="selectP" />
+          </template>
+        </el-calendar>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+// import moment from 'moment'
+// import PubSub from 'pubsub-js'
+
+export default {
+  name: 'Calendar',
+  data() {
+    return {
+      value: new Date()
+    }
+  },
+  computed: {
+    selectDate() {
+      // return moment(this.value).format('YYYY-MM-DD')
+      return new Date()
+    }
+  },
+  created() {
+    var d = new Date()
+    console.log(d)
+    console.log(d.getMonth())
+  },
+  methods: {
+    skip(flag) {
+      if (flag === 'preYear') this.value = new Date(this.value.setFullYear(this.value.getFullYear() - 1))
+      // else if (flag === 'preMonth') this.value = new Date(this.value.setMonth(this.value.getMonth() - 1))
+      else if (flag === 'preDay') this.value = new Date(this.value.setDate(this.value.getDate() - 1))
+      else if (flag === 'today') this.value = new Date()
+      else if (flag === 'postDay') this.value = new Date(this.value.setDate(this.value.getDate() + 1))
+      // else if (flag === 'postMonth') this.value = new Date(this.value.setMonth(this.value.getMonth() + 1))
+      else if (flag === 'postYear') this.value = new Date(this.value.setFullYear(this.value.getFullYear() + 1))
+    },
+    clickCalendar(data) {
+      console.log(data)
+      // PubSub.publish('uploadWarningResultWarningTime', data.day)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+#customizedCalendar {
+  width: 100%;
+  height: 100%;
+
+  #button {
+    margin-top: 10px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+
+  #selectP {
+    width: 30px;
+    height: 30px;
+    background-color: #15ff2c;
+    position: absolute;
+    border-radius: 50%;
+    opacity: 0.6;
+  }
+
+  ::v-deep .el-calendar__header {
+    // 修改头部背景颜色
+    background-color: #57617C;
+    padding: 3px 5px;
+    border: none;
+    display: flex;
+    justify-content: center;
+
+    .el-calendar__button-group {
+      // 隐藏原生按钮
+      display: none;
+    }
+
+    .el-calendar__title {
+      // 修改头部标题的字体颜色
+      color: white !important;
+      font-size: 18px;
+      font-weight: bolder;
+    }
+  }
+
+  ::v-deep .el-calendar__body {
+    // 修改主题部分
+    padding: 0;
+  }
+
+  ::v-deep .el-calendar-table {
+    thead {
+      th {
+        // 修改头部星期部分
+        padding: 0;
+        background-color: #57617C;
+        color: white;
+      }
+    }
+
+    .is-selected {
+      .el-calendar-day {
+        p {
+          // 选中日期颜色
+          color: black;
+        }
+      }
+    }
+
+    .el-calendar-day {
+      // 每天小块样式设置
+      padding: 0;
+      height: 40px;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+
+      p {
+        // 所有日期颜色
+        color: black;
+        z-index: 1;
+        user-select: none;
+        display: flex;
+      }
+    }
+  }
+
+  ::v-deep .el-calendar-table__row {
+    .prev, .next {
+      // 修改非本月
+      .el-calendar-day {
+        p {
+          color: #f0d9d5;
+        }
+      }
+    }
+
+    td {
+      // 修改每一个日期td标签
+      &:first-child, &:last-child {
+        background-color: #f5f5f5;
+      }
+    }
+  }
+
+  button {
+    padding: 3px 10px;
+  }
+}
+</style>

src/views/my/MyCalendar1.vue

@@ -0,0 +1,224 @@
+<template>
+  <el-row class="movie-list">
+    <el-row v-for="(item, index) in [1, 2, 3, 4]" :key="index">
+      <el-col v-for="(item, index) in [1, 2, 3]" :key="index" :md="8">
+        <el-row v-if="showCalender" style="padding-right: 5px; padding-left: 5px; padding-bottom: 5px">
+          <el-card class="box-card">
+            <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-col>
+    </el-row>
+  </el-row>
+</template>
+
+<script>
+import {
+  getCamDetail,
+  getCamList,
+  getCamRecord,
+  getCamRecordByDay,
+  getCamRecordByMonth,
+  getLatestRecord
+} from '@/api/cam'
+
+export default {
+  name: 'MyCalendar',
+  data() {
+    return {
+      user: {
+        userId: 10001,
+        screenName: '浩',
+        avatarUrl: '//pic1.zhimg.com/v2-c755e7ec5510b0638c2d1bead712544a_r.jpg',
+        following: 1024,
+        follower: 1024
+      },
+      camId: null,
+      calendarDate: new Date(),
+      dateMap: new Map(),
+      showCalender: true,
+      showRecordList: false,
+      camList: [],
+      cam: null,
+      camDetail: null,
+      form: {},
+      recordList: [],
+      camRecord: null
+    }
+  },
+  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() {
+    document.title = '我的日历'
+    const camId = this.$route.params.camId
+    this.camId = camId
+    getCamDetail(camId).then(resp => {
+      if (resp.code === 0) {
+        var camDetail = resp.data
+        this.camDetail = camDetail
+      }
+    })
+
+    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
+      }
+    })
+
+    // const today = new Date()
+    getLatestRecord(camId).then(resp => {
+      if (resp.code === 0) {
+        const respData = resp.data
+        this.initMp4Player(respData.coverUrl, respData.videoUrl)
+      }
+    }).catch(error => {
+      console.log(error)
+      var ele = document.querySelector('#dplayer')
+      ele.innerHTML = '<h5>没有今天的录像记录</h5>'
+    })
+  },
+  methods: {
+    onSelect(value) {
+      const path = '/cam/record/' + value
+      if (this.$route.path === path) {
+        this.$router.go(0)
+        return
+      }
+      this.$router.push(path)
+    },
+    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
+    },
+    onClickRow(row) {
+    }
+  }
+}
+</script>
+
+<style scoped>
+.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>