update

package.json

@@ -33,7 +33,6 @@
     "videojs-flash": "^2.2.1",
     "vue": "^2.6.11",
     "vue-amap": "^0.5.10",
-    "vue-calendar-heatmap": "^0.8.4",
     "vue-clipboard2": "^0.3.3",
     "vue-cookies": "^1.7.0",
     "vue-router": "^3.4.5",

src/api/exam.js

@@ -7,6 +7,7 @@ const examApi = {
   getQuestion: '/api/content/exam/question',
   addQuestion: '/api/content/exam/question',
   getPaper: '/api/content/exam/paper',
+  getPaperKeyValue: '/api/content/exam/paper/kv',
   addPaper: '/api/content/exam/paper',
   startExam: '/api/content/exam/start',
   submitExam: '/api/content/exam/submit',
@@ -51,6 +52,10 @@ export function getPaper(examId) {
   return get(examApi.getPaper + '/' + examId)
 }
 
+export function getPaperKeyValues() {
+  return get(examApi.getPaperKeyValue)
+}
+
 export function addPaper(data) {
   return post(examApi.addPaper, data)
 }
@@ -75,8 +80,8 @@ export function getExamResult(examId) {
   return get(examApi.getExamResult + '/' + examId)
 }
 
-export function getExamMarkList() {
-  return get(examApi.getExamMark)
+export function getExamMarkList(params) {
+  return get(examApi.getExamMark, params)
 }
 
 export function submitExamMark(data) {

src/components/layout/NavBar.vue

@@ -77,7 +77,7 @@
               <el-dropdown-item
                 icon="el-icon-s-home"
                 class="size"
-                @click.native="goToHome"
+                @click.native="goToUserHome"
               >我的主页</el-dropdown-item>
               <el-dropdown-item
                 icon="el-icon-error"
@@ -300,7 +300,7 @@ export default {
       }
       this.$router.push(path)
     },
-    goToHome() {
+    goToUserHome() {
       const path = '/user/' + this.user.userId
       if (this.$route.path === path) {
         this.$router.go(0)
@@ -330,13 +330,13 @@ export default {
       this.$router.push('/post/publish/video')
     },
     // ************************************************************************
-    // 我的监控
-    goToCam() {
-      if (this.$route.path === '/cam') {
+    // 我的考试
+    goToExam() {
+      if (this.$route.path === '/exam') {
         this.$router.go(0)
         return
       }
-      this.$router.push('/cam')
+      this.$router.push('/exam')
     },
     // 我的商城
     goToMall() {
@@ -345,6 +345,14 @@ export default {
         return
       }
       this.$router.push('/mall')
+    },
+    // 我的地图
+    goToMap() {
+      if (this.$route.path === '/map') {
+        this.$router.go(0)
+        return
+      }
+      this.$router.push('/map')
     }
     // ************************************************************************
   }

src/router/exam.js

@@ -7,6 +7,7 @@
 // const PostList = () => import('views/admin/PostList')
 // const DataSource = () => import('views/admin/DataSource')
 
+const ExamIndex = () => import('views/exam/ExamIndex')
 const Exam = () => import('views/exam/Exam')
 const ExamDashboard = () => import('views/exam/ExamDashboard')
 const ExamList = () => import('views/exam/ExamList')
@@ -29,8 +30,8 @@ export default {
   children: [
     {
       path: '',
-      name: 'ExamDashboard',
-      component: ExamDashboard,
+      name: 'ExamIndex',
+      component: ExamIndex,
       meta: { needAuth: true }
     },
     {
@@ -104,6 +105,12 @@ export default {
       name: 'ExamList',
       component: ExamList,
       meta: { needAuth: true }
+    },
+    {
+      path: '/exam/statistics',
+      name: 'ExamDashboard',
+      component: ExamDashboard,
+      meta: { needAuth: true }
     }
   ]
 }

src/router/my.js

@@ -7,7 +7,6 @@ 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',
@@ -50,12 +49,6 @@ export default {
       name: '我的消息',
       component: MessageIndex,
       meta: { needAuth: true }
-    },
-    {
-      path: '/my/calendar',
-      name: '我的日历',
-      component: MyCalendar,
-      meta: { needAuth: true }
     }
   ]
 }

src/views/404.vue

@@ -3,7 +3,7 @@
     <el-main>
       <nav-bar />
       <el-row>
-        <div style="text-align: center;">
+        <div style="height: 720px; text-align: center;">
           <h1>Not Found!</h1>
         </div>
       </el-row>

src/views/exam/Exam.vue

@@ -19,14 +19,16 @@
           alt=""
         >
         <el-dropdown-menu slot="dropdown">
+          <el-dropdown-item
+            icon="el-icon-s-home"
+            class="size"
+            @click.native="goToHome"
+          >主页</el-dropdown-item>
           <el-dropdown-item
             icon="el-icon-error"
             class="size"
             @click.native="goToLogout"
           >退出</el-dropdown-item>
-          <el-dropdown-item>查看</el-dropdown-item>
-          <el-dropdown-item>新增</el-dropdown-item>
-          <el-dropdown-item>删除</el-dropdown-item>
         </el-dropdown-menu>
       </el-dropdown>
     </el-header>
@@ -76,6 +78,10 @@
                 <i class="el-icon-film" />
                 <span slot="title">阅卷管理</span>
               </el-menu-item>
+              <el-menu-item index="/exam/statistics">
+                <i class="el-icon-film" />
+                <span slot="title">成绩统计</span>
+              </el-menu-item>
             </el-menu-item-group>
           </el-submenu>
         </el-menu>
@@ -88,9 +94,11 @@
 </template>
 
 <script>
+import { userMixin } from 'assets/js/mixin'
 import { getAuthedUser } from '@/utils/auth'
 
 export default {
+  mixins: [userMixin],
   data() {
     return {
       user: null

src/views/exam/ExamIndex.vue

@@ -0,0 +1,292 @@
+<template>
+  <el-container>
+    <el-row>
+      <el-row class="card-style">
+        <el-card>
+          <div id="chart2" style="width: 800px;height:400px;" />
+        </el-card>
+      </el-row>
+    </el-row>
+  </el-container>
+</template>
+
+<script>
+import { getExamCount } from '@/api/exam'
+
+export default {
+  name: 'ExamIndex',
+  data() {
+    return {
+      // 考试名称
+      examNames: [],
+      // 考试通过率
+      passRate: [],
+      // 饼图的数据
+      pieData: [],
+      selectedValue: '1',
+      chartOption: null
+    }
+  },
+  created() {
+    this.getExamNumbers()
+  },
+  methods: {
+    // 考试通过率柱状图
+    drawLine() {
+      this.chartOption = {
+        title: {
+          text: '考试通过率',
+          subtext: 'dashbord1',
+          x: 'center',
+          y: 'top',
+          textAlign: 'center'
+        },
+        tooltip: {},
+        xAxis: {
+          data: this.examNames
+        },
+        yAxis: {},
+        series: [{
+          name: '通过率',
+          type: 'bar',
+          data: this.passRate
+        }]
+      }
+    },
+    // 通过率的折线图
+    drawBrokenLine() {
+      this.chartOption = {
+        // 标题
+        title: {
+          text: '考试通过率折线图',
+          x: 'center'
+        },
+        // x轴
+        xAxis: {
+          data: this.examNames
+        },
+        // y轴没有显式设置，根据值自动生成y轴
+        yAxis: {},
+        // 数据-data是最终要显示的数据
+        series: [{
+          name: '通过率',
+          type: 'line',
+          areaStyle: {
+            normal: {}
+          },
+          data: this.passRate
+        }]
+      }
+    },
+    drawImg4() {
+      this.chartOption = {
+        color: ['#cd5c5c'],
+        textStyle: {
+          color: 'black'
+        },
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'shadow'
+          },
+          formatter: '{a} <br/>{b} : {c}'
+        },
+        grid: {
+          containLabel: true
+        },
+        xAxis: {
+          type: 'value',
+          boundaryGap: [0, 0.01],
+          axisLine: {
+            lineStyle: {
+              color: '#fff'
+            }
+          },
+          'axisLabel': {
+            'interval': 0,
+            fontSize: 18,
+            formatter: '{value}'
+          }
+        },
+        yAxis: {
+          axisLine: {
+            lineStyle: {
+              color: '#fff'
+            }
+          },
+          'axisLabel': {
+            'interval': 0,
+            fontSize: 18
+          },
+          type: 'category',
+          data: this.examNames
+        },
+        series: [{
+          name: '通过率：',
+          type: 'bar',
+          data: this.passRate
+        }]
+      }
+    },
+    drawChart5() {
+      this.chartOption = {
+        title: {
+          text: '卡拉云新用户激活数据',
+          subtext: 'Demo 虚构数据',
+          x: 'center'
+        },
+        legend: { // 图例配置选项
+          orient: 'horizontal', // 图例布局方式：水平 'horizontal' 、垂直 'vertical'
+          x: 'left', // 横向放置位置，选项：'center'、'left'、'right'、'number'（横向值 px）
+          y: 'top', // 纵向放置位置，选项：'top'、'bottom'、'center'、'number'（纵向值 px）
+          data: ['猜想', '预期', '实际']
+        },
+        grid: { // 图表距离边框的距离，可用百分比和数字（px）配置
+          top: '20%',
+          left: '3%',
+          right: '10%',
+          bottom: '5%',
+          containLabel: true
+        },
+        xAxis: {
+          name: '月份',
+          type: 'category',
+          data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
+        },
+        yAxis: {
+          name: '人次',
+          type: 'value',
+          min: 0, // 配置 Y 轴刻度最小值
+          max: 4000, // 配置 Y 轴刻度最大值
+          splitNumber: 7 // 配置 Y 轴数值间隔
+        },
+        series: [
+          {
+            name: '猜想',
+            data: [454, 226, 891, 978, 901, 581, 400, 543, 272, 955, 1294, 1581],
+            type: 'line',
+            symbolSize: function(value) { // 点的大小跟随数值增加而变大
+              return value / 150
+            },
+            symbol: 'circle',
+            itemStyle: {
+              normal: {
+                label: {
+                  show: true
+                },
+                lineStyle: {
+                  color: 'rgba(0,0,0,0)'// 折线颜色设置为0，即只显示点，不显示折线
+                }
+              }
+            }
+          },
+          {
+            name: '预期',
+            data: [2455, 2534, 2360, 2301, 2861, 2181, 1944, 2197, 1745, 1810, 2283, 2298],
+            type: 'line',
+            symbolSize: 8, // 设置折线上圆点大小
+            itemStyle: {
+              normal: {
+                label: {
+                  show: true // 在折线拐点上显示数据
+                },
+                lineStyle: {
+                  width: 3, // 设置虚线宽度
+                  type: 'dotted' // 虚线'dotted' 实线'solid'
+                }
+              }
+            }
+          },
+          {
+            name: '实际',
+            data: [1107, 1352, 1740, 1968, 1647, 1570, 1343, 1757, 2547, 2762, 3170, 3665],
+            type: 'line',
+            symbol: 'circle', // 实心圆点
+            smooth: 0.5 // 设置折线弧度
+          }
+        ],
+        color: ['#3366CC', '#FFCC99', '#99CC33'] // 三个折线的颜色
+      }
+    },
+    // 获取考试次数数据
+    async getExamNumbers() {
+      await getExamCount().then((resp) => {
+        const examNames = resp.data[0].split(',')
+        const examNumbers = resp.data[1].split(',')
+        examNames.forEach((item, index) => {
+          this.pieData.push({
+            name: item,
+            value: parseInt(examNumbers[index])
+          })
+        })
+        this.drawPie()
+      })
+    },
+    // 考试次数饼图
+    drawPie() {
+      // 基于准备好的dom，初始化echarts实例
+      const myChart = this.$echarts.init(document.getElementById('chart2'))
+      const option = {
+        title: {
+          text: '考试次数占比',
+          subtext: 'dashbord2',
+          x: 'center'
+        },
+        tooltip: {
+          trigger: 'item',
+          formatter: '{a} <br/>{b} : {c}次 ({d}%)'
+        },
+        legend: {
+          orient: 'vertical',
+          left: 'left',
+          data: this.pieData
+        },
+        series: [
+          {
+            name: '考试次数',
+            type: 'pie',
+            radius: '55%',
+            data: this.pieData,
+            roseType: 'angle',
+            itemStyle: {
+              normal: {
+                shadowBlur: 200,
+                shadowColor: 'rgba(0, 0, 0, 0.5)'
+              }
+            }
+          }
+        ]
+      }
+      myChart.setOption(option)
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.el-container {
+  width: 100%;
+  height: 100%;
+}
+.el-container {
+  animation: leftMoveIn .7s ease-in;
+}
+
+@keyframes leftMoveIn {
+  0% {
+    transform: translateX(-100%);
+    opacity: 0;
+  }
+  100% {
+    transform: translateX(0%);
+    opacity: 1;
+  }
+}
+
+.card-style {
+  padding-top: 3px;
+  padding-bottom: 3px;
+  padding-left: 3px;
+  padding-right: 3px;
+}
+</style>

src/views/exam/ExamMarkIndex.vue

@@ -10,7 +10,7 @@
           @change="paperChange"
         >
           <el-option
-            v-for="item in allSubject"
+            v-for="item in allPapers"
             :key="item.key"
             :label="item.value"
             :value="item.key"
@@ -78,7 +78,7 @@
 </template>
 
 <script>
-import { getSubjectKV, getExamMarkList } from '@/api/exam'
+import {getSubjectKV, getExamMarkList, getPaperKeyValues} from '@/api/exam'
 
 export default {
   name: 'ExamPaper',
@@ -97,13 +97,14 @@ export default {
         paperId: null,
         marked: false
       },
+      allPapers: [],
       allSubject: []
     }
   },
   created() {
     document.title = '阅卷管理'
     this.getData(this.queryInfo)
-    this.getSubjects()
+    this.getPapers()
   },
   methods: {
     handleCurrentChange(pageNumber) {
@@ -136,14 +137,14 @@ export default {
         })
       })
     },
-    getSubjects() {
-      getSubjectKV().then((resp) => {
+    getPapers() {
+      getPaperKeyValues().then(resp => {
         if (resp.code === 0) {
-          this.allSubject = resp.data
+          this.allPapers = resp.data
         }
       })
     },
-    // 题库变化
+    // 试卷变化
     paperChange(val) {
       this.queryInfo.paperId = val
       this.queryInfo.pageNumber = this.currentPage
@@ -151,7 +152,6 @@ export default {
       this.getData(this.queryInfo)
     },
     markPaper(index, row) {
-      // this.$router.push('/exam/mark/' + row.resultId)
       const routeData = this.$router.resolve({ path: '/exam/mark/' + row.resultId })
       window.open(routeData.href, '_blank')
     }

src/views/my/Calendar.vue

@@ -1,70 +0,0 @@
-<template>
-  <div>
-    <el-row>
-      <el-col :md="20">
-        <el-row>
-          <h2>我的日历</h2>
-        </el-row>
-        <el-row>
-          <calendar-heatmap :max="10" :values="values" :end-date="endDate" />
-        </el-row>
-      </el-col>
-    </el-row>
-  </div>
-</template>
-
-<script>
-import Vue from 'vue'
-import { CalendarHeatmap } from 'vue-calendar-heatmap'
-import { getHeatmap } from '@/api/im'
-
-Vue.component('calendarHeatmap', CalendarHeatmap)
-export default {
-  name: 'Calendar',
-  data() {
-    return {
-      values: [
-        { date: '2018-9-22', count: 6 },
-        { date: '2018-9-23', count: 5 },
-        { date: '2018-9-24', count: 4 },
-        { date: '2018-9-25', count: 3 },
-        { date: '2018-9-26', count: 2 },
-        { date: '2018-9-27', count: 1 },
-        { date: '2018-9-28', count: 7 },
-        { date: '2018-9-29', count: 8 },
-        { date: '2018-9-30', count: 9 }
-      ],
-      endDate: '2019-10-22'
-    }
-  },
-  created() {
-    const path = this.$route.path
-    var title = '我的消息'
-    if (path.endsWith('/send')) {
-      title = '发出的消息'
-    } else if (path.endsWith('/receive')) {
-      title = '收到的消息'
-    } else if (path.endsWith('/private')) {
-      title = '私信'
-    }
-
-    document.title = title
-    console.log(new Date())
-    getHeatmap().then(resp => {
-      if (resp.code === 0) {
-        this.values = resp.data
-        this.endDate = this.getYearMonthDay()
-      }
-    })
-  },
-  methods: {
-    getYearMonthDay() {
-      const date = new 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
-    }
-  }
-}
-</script>

src/views/my/My.vue

@@ -1,5 +1,5 @@
 <template>
-  <el-container style="height: 800px; border: 1px solid #eee">
+  <el-container style="height: 960px; border: 1px solid #eee">
     <el-header style="text-align: right; font-size: 12px">
       <el-col :md="2">
         <ul class="el-menu--horizontal el-menu">
@@ -50,20 +50,16 @@
           </el-menu-item>
           <el-menu-item index="/my/account/vip">
             <i class="el-icon-film" />
-            <span slot="title">小会员</span>
+            <span slot="title">我的会员</span>
           </el-menu-item>
           <el-menu-item index="/my/account/wallet">
             <i class="el-icon-wallet" />
-            <span slot="title">钱包</span>
+            <span slot="title">我的钱包</span>
           </el-menu-item>
           <el-menu-item index="/my/message">
             <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

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

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

src/views/my/MyRealname.vue

@@ -1,103 +1,113 @@
 <template>
-  <el-row class="movie-list">
-    <el-col :md="8" style="padding-right: 5px; padding-left: 5px; padding-bottom: 5px">
-      <el-row style="padding-right: 5px; padding-left: 5px; padding-bottom: 5px">
-        <el-card class="box-card">
-          <div slot="header" class="clearfix">
-            <span>身份证背面照</span>
-          </div>
-          <div class="text item">
-            <el-tooltip class="item" effect="dark" content="点击更新我的头像" placement="top-end">
-              <el-upload
-                class="avatar-uploader"
-                :action="imgOssUrl"
-                :headers="imgHeaders"
-                :data="imgData"
-                :with-credentials="true"
-                :show-file-list="false"
-                :before-upload="beforeAvatarUpload"
-                :on-success="handleAvatarSuccess"
-              >
-                <img v-if="loginUser" :src="loginUser.avatarUrl" class="avatar">
-                <i v-else class="el-icon-plus avatar-uploader-icon" />
-              </el-upload>
-            </el-tooltip>
-          </div>
-        </el-card>
-      </el-row>
-    </el-col>
-    <el-col :md="8" style="padding-right: 5px; padding-left: 5px; padding-bottom: 5px">
-      <el-row style="padding-right: 5px; padding-left: 5px; padding-bottom: 5px">
-        <el-card class="box-card">
-          <div slot="header" class="clearfix">
-            <span>身份证反面照</span>
-          </div>
-          <div class="text item">
-            <el-tooltip class="item" effect="dark" content="点击更新我的头像" placement="top-end">
-              <el-upload
-                class="avatar-uploader"
-                :action="imgOssUrl"
-                :headers="imgHeaders"
-                :data="imgData"
-                :with-credentials="true"
-                :show-file-list="false"
-                :before-upload="beforeAvatarUpload"
-                :on-success="handleAvatarSuccess"
-              >
-                <img v-if="loginUser" :src="loginUser.avatarUrl" class="avatar">
-                <i v-else class="el-icon-plus avatar-uploader-icon" />
-              </el-upload>
-            </el-tooltip>
-          </div>
-        </el-card>
-      </el-row>
-    </el-col>
-    <el-col :md="8" style="padding-right: 5px; padding-left: 5px; padding-bottom: 5px">
-      <el-row style="padding-right: 5px; padding-left: 5px; padding-bottom: 5px">
-        <el-card class="box-card">
-          <div slot="header" class="clearfix">
-            <span>手持身份证照</span>
-          </div>
-          <div class="text item">
-            <el-tooltip class="item" effect="dark" content="点击更新我的头像" placement="top-end">
-              <el-upload
-                class="avatar-uploader"
-                :action="imgOssUrl"
-                :headers="imgHeaders"
-                :data="imgData"
-                :with-credentials="true"
-                :show-file-list="false"
-                :before-upload="beforeAvatarUpload"
-                :on-success="handleAvatarSuccess"
-              >
-                <img v-if="loginUser" :src="loginUser.avatarUrl" class="avatar">
-                <i v-else class="el-icon-plus avatar-uploader-icon" />
-              </el-upload>
-            </el-tooltip>
-          </div>
-        </el-card>
-      </el-row>
-    </el-col>
-    <el-col :md="8" style="padding-right: 5px; padding-left: 5px; padding-bottom: 5px">
-      <el-row style="padding-right: 5px; padding-left: 5px; padding-bottom: 5px">
-        <el-card class="box-card">
-          <div slot="header" class="clearfix">
-            <span>实名认证资料</span>
-          </div>
-          <div class="text item">
-            <el-form ref="form" :model="loginUser" label-width="90px">
-              <el-form-item label="身份证号码">
-                <el-input v-model="loginUser.userId" style="padding-right: 1px" readonly />
-              </el-form-item>
-              <el-form-item label="姓名">
-                <el-input v-model="loginUser.screenName" style="padding-right: 1px" readonly />
-              </el-form-item>
-            </el-form>
-          </div>
-        </el-card>
-      </el-row>
-    </el-col>
-  </el-row>
+  <el-main>
+    <el-row class="movie-list">
+      <el-col :md="12" style="padding-right: 5px; padding-left: 5px; padding-bottom: 5px">
+        <el-row style="padding-right: 5px; padding-left: 5px; padding-bottom: 5px">
+          <el-card class="box-card">
+            <div slot="header" class="clearfix">
+              <span>实名认证资料</span>
+            </div>
+            <div class="text item">
+              <el-form ref="form" :model="loginUser" label-width="90px">
+                <el-form-item label="身份证号码">
+                  <el-input v-model="loginUser.userId" style="padding-right: 1px" readonly />
+                </el-form-item>
+                <el-form-item label="姓名">
+                  <el-input v-model="loginUser.screenName" style="padding-right: 1px" readonly />
+                </el-form-item>
+                <el-form-item label="出生日期">
+                  <el-input v-model="loginUser.screenName" style="padding-right: 1px" readonly />
+                </el-form-item>
+                <el-form-item label="居住地址">
+                  <el-input v-model="loginUser.screenName" style="padding-right: 1px" readonly />
+                </el-form-item>
+              </el-form>
+            </div>
+          </el-card>
+        </el-row>
+      </el-col>
+      <el-col :md="12" style="padding-right: 5px; padding-left: 5px; padding-bottom: 5px">
+        <el-row style="padding-right: 5px; padding-left: 5px; padding-bottom: 5px">
+          <el-card class="box-card">
+            <div slot="header" class="clearfix">
+              <span>手持身份证照</span>
+            </div>
+            <div class="text item">
+              <el-tooltip class="item" effect="dark" content="点击更新我的头像" placement="top-end">
+                <el-upload
+                  class="avatar-uploader"
+                  :action="imgOssUrl"
+                  :headers="imgHeaders"
+                  :data="imgData"
+                  :with-credentials="true"
+                  :show-file-list="false"
+                  :before-upload="beforeAvatarUpload"
+                  :on-success="handleAvatarSuccess"
+                >
+                  <img v-if="loginUser" :src="loginUser.avatarUrl" class="avatar">
+                  <i v-else class="el-icon-plus avatar-uploader-icon" />
+                </el-upload>
+              </el-tooltip>
+            </div>
+          </el-card>
+        </el-row>
+      </el-col>
+    </el-row>
+    <el-row class="movie-list">
+      <el-col :md="12" style="padding-right: 5px; padding-left: 5px; padding-bottom: 5px">
+        <el-row style="padding-right: 5px; padding-left: 5px; padding-bottom: 5px">
+          <el-card class="box-card">
+            <div slot="header" class="clearfix">
+              <span>身份证背面照</span>
+            </div>
+            <div class="text item">
+              <el-tooltip class="item" effect="dark" content="点击更新我的头像" placement="top-end">
+                <el-upload
+                  class="avatar-uploader"
+                  :action="imgOssUrl"
+                  :headers="imgHeaders"
+                  :data="imgData"
+                  :with-credentials="true"
+                  :show-file-list="false"
+                  :before-upload="beforeAvatarUpload"
+                  :on-success="handleAvatarSuccess"
+                >
+                  <img v-if="loginUser" :src="loginUser.avatarUrl" class="avatar">
+                  <i v-else class="el-icon-plus avatar-uploader-icon" />
+                </el-upload>
+              </el-tooltip>
+            </div>
+          </el-card>
+        </el-row>
+      </el-col>
+      <el-col :md="12" style="padding-right: 5px; padding-left: 5px; padding-bottom: 5px">
+        <el-row style="padding-right: 5px; padding-left: 5px; padding-bottom: 5px">
+          <el-card class="box-card">
+            <div slot="header" class="clearfix">
+              <span>身份证反面照</span>
+            </div>
+            <div class="text item">
+              <el-tooltip class="item" effect="dark" content="点击更新我的头像" placement="top-end">
+                <el-upload
+                  class="avatar-uploader"
+                  :action="imgOssUrl"
+                  :headers="imgHeaders"
+                  :data="imgData"
+                  :with-credentials="true"
+                  :show-file-list="false"
+                  :before-upload="beforeAvatarUpload"
+                  :on-success="handleAvatarSuccess"
+                >
+                  <img v-if="loginUser" :src="loginUser.avatarUrl" class="avatar">
+                  <i v-else class="el-icon-plus avatar-uploader-icon" />
+                </el-upload>
+              </el-tooltip>
+            </div>
+          </el-card>
+        </el-row>
+      </el-col>
+    </el-row>
+  </el-main>
 </template>
 
 <script>