新增监控调阅统计页面,新增周选择器组件

src/api/toConsult.js

@@ -120,4 +120,13 @@ export function finishRegistration(data) {
   })
 }
 
+// 获取调阅列表
+export function selectMonitorReport(data) {
+  return request({
+    url: '/core/monitorAccessReport/list',
+    method: 'get',
+    params: data
+  })
+}
+
 ///system/device/getHostByOrgId/{orgId}

src/views/menu/monitorStatistics/components/WeekDateType.vue

@@ -33,6 +33,9 @@ const getWeeks = (year) => {
     weeks.push({
       value: currentWeekStart.format('YYYY-MM-DD'),
       text: `第${currentWeekNumber}周 (${currentWeekStart.format('MM/DD')} - ${weekEnd.format('MM/DD')})`,
+      weekEnd: `${weekEnd.format('YYYY-MM-DD')}`,
+      weekStart: `${currentWeekStart.format('YYYY-MM-DD')}`,
+      weekNumber: currentWeekNumber,
     });
     currentWeekStart = currentWeekStart.add(1, 'week');
     if (currentWeekStart.isAfter(endOfYear)) {
@@ -88,17 +91,14 @@ export default {
       this.columns[1].valueKey = this.columns[1].defaultIndex;
     },
     onConfirm(value, index) {
-      console.log("onConfirm",value, index)
       this.$emit('onConfirm', value);
     },
     onChange(picker, values) {
-      console.log("onChange",picker, values)
       picker.setColumnValues(1, getWeeks(values[0]));
       this.$emit('onChange', values);
     },
     cancel() {
-      console.log("cancel")
-      this.$emit('cancel');
+      this.$emit('onCancel');
     },
 
 

src/views/menu/monitorStatistics/index.vue

@@ -1,19 +1,26 @@
 <template>
   <div class="educationStatistics">
-    <NavBar />
+    <NavBar/>
     <div class="statistics-container">
-      <org-tree v-model="cascaderValue" @change="getOrgDataList"></org-tree>
+      <org-tree v-model="orgId" @change="getOrgDataList"></org-tree>
       <van-row>
-        <van-col span="24">
-          <van-cell title="调阅周期" @click="showPicker = true" is-link arrow-direction="down" :value="currentDate" />
-          <van-popup  v-model="showPicker" position="bottom" custom-style="height: 20%;">
-            <week-date-type :defaults="defaults" @onConfirm="onConfirm" @onCancel="onCancel" />
+        <van-col span="12">
+          <van-cell title="开始时间" @click="showStartPicker = true" is-link arrow-direction="down"
+                    :value="startWeekStr"/>
+          <van-popup v-model="showStartPicker" position="bottom" custom-style="height: 20%;">
+            <week-date-type :defaults="defaults" @onConfirm="onStartTimeConfirm" @onCancel="onCancel"/>
+          </van-popup>
+        </van-col>
+        <van-col span="12">
+          <van-cell title="结束时间" @click="showEndPicker = true" is-link arrow-direction="down" :value="endWeekStr"/>
+          <van-popup v-model="showEndPicker" position="bottom" custom-style="height: 20%;">
+            <week-date-type :defaults="defaults" @onConfirm="onEntTimeConfirm" @onCancel="onCancel"/>
           </van-popup>
         </van-col>
       </van-row>
 
       <div class="card-list">
-        <empty v-if="!dataList || dataList.length === 0" />
+        <empty v-if="!dataList || dataList.length === 0"/>
         <ve-table
           v-else
           maxHeight="calc(100vh - 252px)"
@@ -33,10 +40,14 @@ import NavBar from '@/components/NavBar'
 import OrgTree from '@/components/orgTree'
 import dateCell from '@/components/dateCell'
 import selectCell from '@/components/selectCell'
-import { getrehearsalList, getTableRehearsalList } from '@/api/drillTask.js'
-import { newDateMonth } from '@/utils/date.js'
-import { Toast } from 'vant'
+import {getrehearsalList, getTableRehearsalList} from '@/api/drillTask.js'
+import {newDateMonth} from '@/utils/date.js'
+import {Toast} from 'vant'
 import WeekDateType from "views/menu/monitorStatistics/components/WeekDateType.vue";
+import dayjs from "dayjs";
+import log from "echarts/src/scale/Log";
+import {selectMonitorReport} from "api/toConsult";
+
 export default {
   components: {
     WeekDateType,
@@ -47,20 +58,13 @@ export default {
   },
   data() {
     return {
-      // active: '',
-      cascaderValue: '',
-      presentDate: '',
-      presentEndDate: '',
-      showDate: false, //月份显示隐藏
-      fieldValue: '', //状态名称
-      statusValue: '', //状态值
-      taskList: [], //状态数组
-      columnsList: [], //状态数组
-      currentDate: '', //年份
-      showPicker: false,
-      endDate: newDateMonth(), //年份
-      planList: [],
-      yearSelect: null,
+      orgId: '',
+      showStartPicker: false,
+      showEndPicker: false,
+      startWeekStr: '', //年份
+      endWeekStr: '', //年份
+      startTime: new Date(),
+      endTime: new Date(),
       defaults: new Date(),
       prop: {
         label: 'name',
@@ -74,118 +78,135 @@ export default {
           title: '序号',
           width: 50,
           align: 'center',
-          renderBodyCell: ({ row, column, rowIndex }, h) => {
+          renderBodyCell: ({row, column, rowIndex}, h) => {
             return ++rowIndex
           }
         },
-        { field: 'orgName', key: 'a', title: '单位名称', align: 'center' },
-        { field: 'planAccessNumber', key: 'b', title: '应调阅次数', align: 'center' },
-        { field: 'realityAccessNumber', key: 'c', title: '调阅次数', align: 'center' },
-        { field: 'accessRate', key: 'd', title: '完成率', align: 'center' }
+        {field: 'orgName', key: 'a', title: '单位名称', align: 'center'},
+        {field: 'planAccessNumber', key: 'b', title: '应调阅次数', align: 'center'},
+        {field: 'realityAccessNumber', key: 'c', title: '调阅次数', align: 'center'},
+        {field: 'accessRate', key: 'd', title: '完成率', align: 'center'}
       ],
       dataList: []
     }
   },
   created() {
-    this.presentDate = new Date(newDateMonth())
-    this.presentEndDate = new Date(newDateMonth())
+
   },
   mounted() {
     this.initData()
+
   },
   computed: {},
   methods: {
+    dayjs,
     formatter(type, val) {
       if (type === 'month') {
         return `${val}月`;
-      }  else if (type === 'year') {
+      } else if (type === 'year') {
         return `${val}年`;
       }
       return val;
     },
 
     initData() {
-      this.cascaderValue = JSON.parse(window.sessionStorage.getItem('SET_USER_ORGID')) + ''
+      this.orgId = JSON.parse(window.sessionStorage.getItem('SET_USER_ORGID')) + '';
+      this.initializeDates();
+      this.getDataList();
     },
 
     //机构搜索
     getOrgDataList(val) {
-      this.cascaderValue = val
+      this.orgId = val
       this.getDataList()
     },
     getDataList() {
-      if (!this.statusValue) return
       let data = {
-        orgId: this.cascaderValue || '',
-        startTime: this.currentDate + '-01',
-        endTime: this.endDate + '-01'
+        orgId: this.orgId || '',
+        startDate: this.startTime,
+        endDate: this.endTime,
       }
-
-      getTableRehearsalList(data).then(res => {
+      console.log("getDataList", data)
+      selectMonitorReport(data).then(res => {
         this.dataList = res.data
       })
     },
     //搜索选择状态时触发
-    onConfirm(value, index) {
-      console.log("onConfirm", value);
-      // 检查 value 是否为对象并且有 text 属性
-      console.log("onConfirm", value);
+    onStartTimeConfirm(value, index) {
+      console.log("onStartTimeConfirm", value);
       // 假设 value 是一个对象，其中包含了 text 属性
       const weekText = value[1].text;
-      // 使用正则表达式提取周数部分
-      const weekMatch = weekText.match(/第(\d+)周/);
-      if (weekMatch && weekMatch[1]) {
-        this.currentDate = `第${weekMatch[1]}周`; // 更新 currentDate 为所选周数
-      } else {
-        this.currentDate = ''; // 如果没有匹配到周数，则清空 currentDate
+      this.startTime = value[1].weekStart;
+      this.startWeekStr = this.getWeekStr(weekText)
+      this.showStartPicker = false; // 关闭弹窗
+      if (!this.validateDates()) {
+        // 显示错误消息
+        this.$toast('开始时间不能晚于结束时间！');
+        this.showStartPicker=true;
+        return;
       }
-      this.showPicker = false; // 关闭弹窗
+      this.getDataList();
+    },
+    //搜索选择状态时触发
+    onEntTimeConfirm(value, index) {
+      console.log("onEntTimeConfirm", value);
+      // 假设 value 是一个对象，其中包含了 text 属性
+      const weekText = value[1].text;
+      this.endTime = value[1].weekEnd;
+      this.endDate = this.getWeekStr(weekText);
+      this.showEndPicker = false; // 关闭弹窗
+      if (!this.validateDates()) {
+        // 显示错误消息
+        this.$toast('开始时间不能晚于结束时间！');
+        this.showEndPicker=true;
+        return;
+      }
+      this.getDataList();
     },
 
     onCancel() {
-      this.show = false
-      this.typeStatus = false
-      this.showStatus = false
-      this.endShowDate = false
+      console.log("onCancel....");
+      this.showStartPicker = false;
+      this.showEndPicker = false;
     },
 
     //日期格式
     formatDate(date) {
       return `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`
     },
-    //日期转换
-    newDate(time) {
-      var date = new Date(time)
-      var y = date.getFullYear()
-      var m = date.getMonth() + 1
-      m = m < 10 ? '0' + m : m
-      var d = date.getDate()
-      d = d < 10 ? '0' + d : d
-      return y + '-' + m
+    initializeDates() {
+      const today = dayjs();
+      const startOfYear = today.startOf('year');
+      const startOfWeek = today.startOf('week');
+      const weekOfYear = Math.ceil(startOfWeek.diff(startOfYear, 'weeks', true) + 1);
+      this.startWeekStr = `第${weekOfYear}周`;
+      this.endWeekStr = `第${weekOfYear}周`;
+      this.startTime = today.startOf('week').toDate();
+      this.endTime = today.endOf('week').toDate();
+      console.log('this.startTime', this.startTime, 'this.endTime', this.endTime)
     },
-    //月份选中触发
-    onDateConfirm(val) {
-      if (this.newDate(val + '') > this.endDate) {
-        return Toast('开始月份不能大于结束月份')
+    validateDates() {
+      if (!this.startWeekStr || !this.endWeekStr) {
+        return;
       }
-      this.currentDate = this.newDate(val + '')
-
-      this.getDataList()
+      // 将周数字符串转换为数字进行比较
+      const startWeekNumber = parseInt(this.startWeekStr.replace(/[第周]/g, ''), 10);
+      const endWeekNumber = parseInt(this.endWeekStr.replace(/[第周]/g, ''), 10);
+      // 开始时间晚于结束时间，显示错误消息或重新打开弹窗
+      return startWeekNumber <= endWeekNumber;
     },
-    //年份选中触发
-    onEndDateConfirm(val) {
-      if (this.newDate(val + '') < this.currentDate) {
-        return Toast('结束月份不能小于开始月份')
+    getWeekStr(text) {
+      if (!text) {
+        return '';
+      }
+      const weekMatch = text.match(/第(\d+)周/);
+      if (weekMatch && weekMatch[1]) {
+        return `第${weekMatch[1]}周`;
       }
-      this.endDate = this.newDate(val + '')
+      return '';
 
-      console.log(this.endDate)
-      this.endShowDate = false
-      this.getDataList()
     },
-    tbsHandler() {
-      this.getDataList()
-    }
+
   }
 }
 </script>
@@ -193,9 +214,11 @@ export default {
 .van-cell-group {
   margin-bottom: 20px;
 }
+
 .van-cell-group:last-child {
   margin-bottom: 0;
 }
+
 .vue-table-root {
   tr,
   td,
@@ -208,35 +231,43 @@ export default {
 <style lang="scss" scoped>
 .educationStatistics {
 }
+
 .statistics-container {
 }
+
 .card-list {
   padding: 20px;
   height: calc(100vh - 420px);
   overflow: hidden;
 }
+
 .card-num {
   display: flex;
   align-items: center;
   font-size: 28px;
   color: #009dff;
 }
+
 .flex-box {
   display: flex;
   align-items: center;
+
   > div {
     margin-right: 40px;
   }
 }
+
 .search-flex {
   display: flex;
   align-items: center;
   justify-content: space-between;
+
   > div {
     width: 50%;
   }
 }
-.van-cell__value{
+
+.van-cell__value {
   color: black;
   text-align: left;
 }