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

src/router/router.config.js

@@ -469,6 +469,12 @@ export let routers = [
         name: 'operate',
         component: () => import('@/views/menu/operate/index.vue'),
         meta: { title: '操作手册', keepAlive: false, hideTabBar: true, deep: 2 }
+      },
+      {
+        path: '/monitorStatistics',
+        name: 'monitorStatistics',
+        component: () => import('@/views/menu/monitorStatistics/index.vue'),
+        meta: { title: '监控调阅情况表', keepAlive: false, hideTabBar: true, deep: 2 }
       }
       // {
       //   path: '/addOrder',

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

@@ -0,0 +1,111 @@
+<script setup>
+
+</script>
+
+<template>
+  <van-picker
+    title="周次选择"
+    show-toolbar
+    :columns="columns"
+    @cancel="cancel"
+    @confirm="onConfirm"
+    @change="onChange"
+  />
+</template>
+
+<script>
+import dayjs from 'dayjs';
+import weekOfYear from 'dayjs/plugin/weekOfYear';
+import 'dayjs/locale/zh-cn';
+dayjs.extend(weekOfYear);
+dayjs.locale('zh-cn');
+
+// 获取一年的周次列表
+const getWeeks = (year) => {
+  const startOfYear = dayjs(`${year}-01-01`);
+  const endOfYear = dayjs(`${year}-12-31`);
+  const weeks = [];
+  let currentWeekStart = startOfYear.startOf('week');
+  let currentWeekNumber = startOfYear.week(); // 获取当前年份的第一周
+
+  while (currentWeekStart.isBefore(endOfYear)) {
+    const weekEnd = currentWeekStart.add(6, 'day');
+    weeks.push({
+      value: currentWeekStart.format('YYYY-MM-DD'),
+      text: `第${currentWeekNumber}周 (${currentWeekStart.format('MM/DD')} - ${weekEnd.format('MM/DD')})`,
+    });
+    currentWeekStart = currentWeekStart.add(1, 'week');
+    if (currentWeekStart.isAfter(endOfYear)) {
+      // 如果下一周的开始日期在年末之后，则将周数重置为1
+      currentWeekNumber = 1;
+    } else {
+      // 否则，周数累加
+      currentWeekNumber++;
+    }
+  }
+
+  return weeks;
+};
+
+export default {
+  props: {
+    defaults: {
+      type: [Object, String, Date],
+      default: () => dayjs(),
+    },
+  },
+  data() {
+    return {
+      columns: [
+        {
+          values: [],
+          className: 'column1',
+        },
+        {
+          values: [],
+          className: 'column2',
+        },
+      ],
+    };
+  },
+  created() {
+    this.setData();
+  },
+  methods: {
+    setData() {
+      const defaultData = dayjs(this.defaults);
+      const currentYear = dayjs().year();
+      this.columns[0].values = [];
+      for (let i = currentYear - 10; i < currentYear + 10; i++) {
+        this.columns[0].values.unshift(i);
+      }
+      this.columns[0].defaultIndex = this.columns[0].values.indexOf(currentYear);
+      this.columns[0].valueKey = this.columns[0].defaultIndex;
+      this.columns[1].values = getWeeks(currentYear);
+      this.columns[1].defaultIndex = this.columns[1].values.findIndex(
+        (week) => week.value === defaultData.startOf('week').format('YYYY-MM-DD')
+      );
+      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');
+    },
+
+
+  },
+};
+</script>
+
+<style scoped lang="scss">
+
+</style>

src/views/menu/monitorStatistics/index.vue

@@ -0,0 +1,243 @@
+<template>
+  <div class="educationStatistics">
+    <NavBar />
+    <div class="statistics-container">
+      <org-tree v-model="cascaderValue" @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-popup>
+        </van-col>
+      </van-row>
+
+      <div class="card-list">
+        <empty v-if="!dataList || dataList.length === 0" />
+        <ve-table
+          v-else
+          maxHeight="calc(100vh - 252px)"
+          fixedHeader
+          borderX
+          borderY
+          borderAround
+          :columns="columns"
+          :table-data="dataList"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+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 WeekDateType from "views/menu/monitorStatistics/components/WeekDateType.vue";
+export default {
+  components: {
+    WeekDateType,
+    NavBar,
+    OrgTree,
+    dateCell,
+    selectCell
+  },
+  data() {
+    return {
+      // active: '',
+      cascaderValue: '',
+      presentDate: '',
+      presentEndDate: '',
+      showDate: false, //月份显示隐藏
+      fieldValue: '', //状态名称
+      statusValue: '', //状态值
+      taskList: [], //状态数组
+      columnsList: [], //状态数组
+      currentDate: '', //年份
+      showPicker: false,
+      endDate: newDateMonth(), //年份
+      planList: [],
+      yearSelect: null,
+      defaults: new Date(),
+      prop: {
+        label: 'name',
+        value: 'id'
+      },
+      loading: false,
+      columns: [
+        {
+          field: 'index',
+          key: 'index',
+          title: '序号',
+          width: 50,
+          align: 'center',
+          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' }
+      ],
+      dataList: []
+    }
+  },
+  created() {
+    this.presentDate = new Date(newDateMonth())
+    this.presentEndDate = new Date(newDateMonth())
+  },
+  mounted() {
+    this.initData()
+  },
+  computed: {},
+  methods: {
+    formatter(type, val) {
+      if (type === 'month') {
+        return `${val}月`;
+      }  else if (type === 'year') {
+        return `${val}年`;
+      }
+      return val;
+    },
+
+    initData() {
+      this.cascaderValue = JSON.parse(window.sessionStorage.getItem('SET_USER_ORGID')) + ''
+    },
+
+    //机构搜索
+    getOrgDataList(val) {
+      this.cascaderValue = val
+      this.getDataList()
+    },
+    getDataList() {
+      if (!this.statusValue) return
+      let data = {
+        orgId: this.cascaderValue || '',
+        startTime: this.currentDate + '-01',
+        endTime: this.endDate + '-01'
+      }
+
+      getTableRehearsalList(data).then(res => {
+        this.dataList = res.data
+      })
+    },
+    //搜索选择状态时触发
+    onConfirm(value, index) {
+      console.log("onConfirm", value);
+      // 检查 value 是否为对象并且有 text 属性
+      console.log("onConfirm", 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.showPicker = false; // 关闭弹窗
+    },
+
+    onCancel() {
+      this.show = false
+      this.typeStatus = false
+      this.showStatus = false
+      this.endShowDate = 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
+    },
+    //月份选中触发
+    onDateConfirm(val) {
+      if (this.newDate(val + '') > this.endDate) {
+        return Toast('开始月份不能大于结束月份')
+      }
+      this.currentDate = this.newDate(val + '')
+
+      this.getDataList()
+    },
+    //年份选中触发
+    onEndDateConfirm(val) {
+      if (this.newDate(val + '') < this.currentDate) {
+        return Toast('结束月份不能小于开始月份')
+      }
+      this.endDate = this.newDate(val + '')
+
+      console.log(this.endDate)
+      this.endShowDate = false
+      this.getDataList()
+    },
+    tbsHandler() {
+      this.getDataList()
+    }
+  }
+}
+</script>
+<style lang="scss">
+.van-cell-group {
+  margin-bottom: 20px;
+}
+.van-cell-group:last-child {
+  margin-bottom: 0;
+}
+.vue-table-root {
+  tr,
+  td,
+  th {
+    font-size: 25px !important;
+    color: #666 !important;
+  }
+}
+</style>
+<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{
+  color: black;
+  text-align: left;
+}
+</style>