App预案演练报表修改为季度范围查询

src/components/DatePicker/QuarterDatePicker.vue

@@ -0,0 +1,71 @@
+<template>
+  <van-picker
+    :title="title"
+    show-toolbar
+    :columns="columns"
+    @cancel="cancel"
+    @confirm="onConfirm"
+    @change="onChange"
+  />
+</template>
+
+<script>
+import dayjs from 'dayjs';
+
+const getQuarters = (year) => {
+  return [
+    {value: `${year}-Q1`, text: `Q1 (01/01 - 03/31)`, start: `${year}-01-01`, end: `${year}-03-31`},
+    {value: `${year}-Q2`, text: `Q2 (04/01 - 06/30)`, start: `${year}-04-01`, end: `${year}-06-30`},
+    {value: `${year}-Q3`, text: `Q3 (07/01 - 09/30)`, start: `${year}-07-01`, end: `${year}-09-30`},
+    {value: `${year}-Q4`, text: `Q4 (10/01 - 12/31)`, start: `${year}-10-01`, end: `${year}-12-31`},
+  ];
+};
+
+export default {
+  props: {
+    title: {
+      type: String,
+      default: '季度选择',
+    },
+    selectedQuarter: {
+      type: String,
+      default: '',
+    }
+  },
+  data() {
+    const currentYear = dayjs().year();
+    const years = Array.from({length: 20}, (_, i) => currentYear - 10 + i);
+    const initialQuarters = getQuarters(currentYear);
+
+    const selectedYear = this.selectedQuarter.split('-')[0];
+    const selectedQuarter = this.selectedQuarter.split('-')[1];
+
+    return {
+      columns: [
+        {
+          values: years,
+          className: 'column1',
+          defaultIndex: years.indexOf(parseInt(selectedYear)),
+        },
+        {
+          values: initialQuarters,
+          className: 'column2',
+          defaultIndex: initialQuarters.findIndex(q => q.value.endsWith(selectedQuarter)),
+        },
+      ],
+    };
+  },
+  methods: {
+    onConfirm(value, index) {
+      this.$emit('onConfirm', value);
+    },
+    onChange(picker, values) {
+      const selectedYear = values[0];
+      picker.setColumnValues(1, getQuarters(selectedYear));
+    },
+    cancel() {
+      this.$emit('onCancel');
+    },
+  },
+};
+</script>

src/views/menu/drillStatistics/index.vue

@@ -1,20 +1,18 @@
 <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="showStatus = true" is-link arrow-direction="down" :value="fieldValue" />
-
-          <van-popup v-model="showStatus" round position="bottom">
+        <van-col span="24">
+          <van-cell title="演练任务名称" @click="showPlanSelect = true" is-link arrow-direction="down"
+                    :value="planName"/>
+          <van-popup v-model="showPlanSelect" round position="bottom">
             <van-picker
               title="演练任务名称"
               show-toolbar
               :columns="taskList"
-              @confirm="onConfirm"
+              @confirm="onPlanConfirm"
               @cancel="onCancel"
               confirm-button-text="确定"
               :close-on-click-overlay="false"
@@ -24,65 +22,37 @@
       </van-row>
       <van-row>
         <van-col span="12">
-          <!-- <van-field
-            v-model="currentDate"
-            label-width="5em"
-            label="开始月份"
-            placeholder=""
-            :disabled="showDate"
-            @click="showDate = true"
-          >
-            <van-icon name="arrow-down" slot="button"
-          /></van-field> -->
-          <van-cell title="开始月份" @click="showDate = true" is-link arrow-direction="down" :value="currentDate" />
-
-          <van-popup v-model="showDate" round position="bottom">
-            <!-- :columns="yearColumns" -->
-            <van-datetime-picker
-              v-model="presentDate"
-              show-toolbar
-              @cancel="onCancel"
-              type="year-month"
-              @confirm="onDateConfirm"
+          <van-cell title="开始季度" @click="showStartDateSelect = true" is-link arrow-direction="down"
+                    :value="currentDate"/>
+          <van-popup v-model="showStartDateSelect" round position="bottom">
+            <quarter-date-picker
+              :title="'开始季度'"
+              v-model="selectStartDate"
+              :selected-quarter="currentDate"
+              @onCancel="onCancel"
+              @onConfirm="onStartConfirm"
               confirm-button-text="确定"
-              :default-index="yearSelect"
-              title="开始月份"
-              :formatter="formatter"
             />
           </van-popup>
         </van-col>
         <van-col span="12">
-          <!-- <van-field
-            v-model="endDate"
-            label-width="5em"
-            label="结束月份"
-            placeholder=""
-            :disabled="endShowDate"
-            @click="endShowDate = true"
-          >
-            <van-icon name="arrow-down" slot="button"
-          /></van-field> -->
-          <van-cell title="结束月份" @click="endShowDate = true" is-link arrow-direction="down" :value="endDate" />
-
-          <van-popup v-model="endShowDate" round position="bottom">
-            <!-- :columns="yearColumns" -->
-            <van-datetime-picker
-              v-model="presentEndDate"
-              show-toolbar
-              @cancel="onCancel"
+          <van-cell title="结束季度" @click="showEndDateSelect = true" is-link arrow-direction="down" :value="endDate"/>
+          <van-popup v-model="showEndDateSelect" round position="bottom">
+            <quarter-date-picker
+              v-model="selectEndDate"
+              :selected-quarter="endDate"
+              @onCancel="onCancel"
               type="year-month"
-              :formatter="formatter"
-              @confirm="onEndDateConfirm"
+              @onConfirm="onEndConfirm"
               confirm-button-text="确定"
-              :default-index="yearSelect"
-              title="结束月份"
+              :title="'结束季度'"
             />
           </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)"
@@ -102,36 +72,34 @@ 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 { mapGetters } from 'vuex'
-import { formatDate } from '@/filters/filter'
-import { newDateMonth } from '@/utils/date.js'
-import { Toast } from 'vant'
+import QuarterDatePicker from '@/components/DatePicker/QuarterDatePicker.vue'
+import {getrehearsalList, getTableRehearsalList} from '@/api/drillTask.js'
+import {Toast} from 'vant'
+import dayjs from "dayjs";
+
 export default {
   components: {
     NavBar,
     OrgTree,
     dateCell,
-    selectCell
+    selectCell,
+    QuarterDatePicker
   },
   data() {
     return {
       // active: '',
-      cascaderValue: '',
-      presentDate: '',
-      presentEndDate: '',
-      showStatus: false, //状态显示隐藏
-      endShowDate: false, //状态显示隐藏
-      // yearColumns: [],
-      showDate: false, //月份显示隐藏
-      fieldValue: '', //状态名称
-      statusValue: '', //状态值
+      orgId: '',
+      selectStartDate: '',
+      selectEndDate: '',
+      showPlanSelect: false, //计划显示隐藏
+      showStartDateSelect: false, //开始时间显示隐藏
+      showEndDateSelect: false, //结束时间显示隐藏
+      planName: '', //状态名称
+      planId: '', //状态值
       taskList: [], //状态数组
-      columnsList: [], //状态数组
-      currentDate: newDateMonth(), //年份
-      endDate: newDateMonth(), //年份
+      currentDate: '', //年份
+      endDate: '', //年份
       planList: [],
-      yearSelect: null,
       prop: {
         label: 'name',
         value: 'id'
@@ -144,90 +112,76 @@ 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: 'shouldFinish', key: 'b', title: '应演练数', align: 'center' },
-        { field: 'finish', key: 'c', title: '已演练数', align: 'center' },
-        { field: 'finishRate', key: 'd', title: '完成率', align: 'center' }
+        {field: 'orgName', key: 'a', title: '单位名称', align: 'center'},
+        {field: 'shouldFinish', key: 'b', title: '应演练数', align: 'center'},
+        {field: 'finish', key: 'c', title: '已演练数', align: 'center'},
+        {field: 'finishRate', key: 'd', title: '完成率', align: 'center'}
       ],
       dataList: []
     }
   },
   created() {
-    this.presentDate = new Date(newDateMonth())
-    this.presentEndDate = new Date(newDateMonth())
-    // this.yearData()
-    // this.getNewMonth()
+    let date = new Date();
+    let year = dayjs(date).year();
+    let month = dayjs(date).month() + 1;
+    this.currentDate = this.initShowDateStr(year, month);
+    this.endDate = this.initShowDateStr(year, month);
+    this.selectStartDate = this.getQuarterStarOrEndTime('start', year, month)
+    this.selectEndDate = this.getQuarterStarOrEndTime('end', year, month)
+
+    this.getDataList()
   },
   mounted() {
     this.initData()
   },
   computed: {},
   methods: {
-    formatter(type, val) {
-      if (type === 'month') {
-        return `${val}月`;
-      }  else if (type === 'year') {
-        return `${val}年`;
-      }
-      return val;
-    },
-    // getNewMonth() {
-    //   //获取当前月份
-    //   let date = new Date().getMonth() + 1
-
-    //   //默认填充当前季度
-    //   if (date > 7 && date < 10) {
-    //     this.active='07-01'
-    //     //三季度
-    //   }else if(date > 4 && date < 7){
-    //     //二季度
-    //     this.active='04-01'
-    //   }else if(date > 1 && date < 4){
-    //     //一季度
-    //     this.active='01-01'
-    //   }else{
-    //     this.active='10-01'
-    //     // 四季度
-    //   }
-    // },
     initData() {
-      this.cascaderValue = JSON.parse(window.sessionStorage.getItem('SET_USER_ORGID')) + ''
-
-      this.getPlanList()
+      this.orgId = JSON.parse(window.sessionStorage.getItem('SET_USER_ORGID')) + '';
+      this.getPlanList();
+    },
+    initShowDateStr(year, month) {
+      if (month >= 1 && month <= 3) {
+        return year + '-Q1';
+      }
+      if (month >= 4 && month <= 6) {
+        return year + '-Q2';
+      }
+      if (month >= 7 && month <= 9) {
+        return year + '-Q3';
+      }
+      return year + '-Q4';
     },
     getPlanList() {
-      getrehearsalList(this.cascaderValue).then(res => {
+      getrehearsalList(this.orgId).then(res => {
         if (res.data.length === 0) return this.$toast('暂无演练排名数据')
         this.planList = res.data
         this.taskList = res.data.map(item => item.name)
-
-        this.fieldValue = res.data[0].name
-        this.statusValue = res.data[0].id
+        this.planName = res.data[0].name
+        this.planId = res.data[0].id
         this.getDataList()
       })
     },
     //机构搜索
     getOrgDataList(val) {
-      this.cascaderValue = val
-
+      this.orgId = val
       this.getDataList()
     },
     getDataList() {
-      if (!this.statusValue) return
+      if (!this.planId) return
       let data = {
-        planId: this.statusValue || '',
-        orgId: this.cascaderValue || '',
-        startTime: this.currentDate + '-01',
-        endTime: this.endDate + '-01'
+        planId: this.planId || '',
+        orgId: this.orgId || '',
+        startTime: this.selectStartDate,
+        endTime: this.selectEndDate
       }
-
       getTableRehearsalList(data).then(res => {
-        if (res.data.length > 0){
-          let arr=res.data;
+        if (res.data.length > 0) {
+          let arr = res.data;
           // 将百分比字符串转换为数字
           arr.forEach(item => {
             item.finishRate = parseFloat(item.finishRate);
@@ -241,83 +195,66 @@ export default {
           });
           // 重新赋值给dataList
           this.dataList = arr;
-        }else {
+        } else {
           this.dataList = []
         }
       })
     },
     //搜索选择状态时触发
-    onConfirm(value, index) {
-      this.fieldValue = value
+    onPlanConfirm(value, index) {
+      this.planName = value
       this.planList.forEach(item => {
         if (value == item.name) {
-          this.statusValue = item.id
+          this.planId = item.id
         }
       })
 
       this.getDataList()
-      this.showStatus = false
+      this.showPlanSelect = false
     },
 
     onCancel() {
-      this.show = false
-      this.typeStatus = false
-      this.showDate = false
-      this.showStatus = false
-      this.endShowDate = false
+      this.showStartDateSelect = false
+      this.showEndDateSelect = false
+      this.showPlanSelect = false
     },
-    // yearData() {
-    //   // 获取默认显示的时间
-    //   var nowTime = new Date()
-    //   let year = nowTime.getFullYear()
-    //   let month = nowTime.getMonth()
-    //   let day = nowTime.getDate()
-    //   // 循环数组 填写最小时间和最大时间范围
-    //   for (let i = 1980; i < 2099; i++) {
-    //     this.yearColumns.push(i)
-    //   }
-    //   // 格式化时间并截取
-    //   var years = this.formatDate(new Date(year, month, day))
-    //   var Year = years.slice(0, 4)
-    //   // 将截取的年份赋值给绑定值 用于点击弹出日期窗口后显示当前的时间
-    //   this.yearSelect = this.yearColumns.indexOf(Number(Year))
-    // },
-    //日期格式
-    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
+
+    onStartConfirm(val) {
+      let startTime = dayjs(val[1].start);
+      let endTime = dayjs(this.selectEndDate);
+      if (startTime.month()+1 > endTime.month()+1 ) {
+        return Toast('开始月份不能大于结束月份')
+      }
+      this.selectStartDate=startTime.format('YYYY-MM-DD');
+      this.currentDate = this.initShowDateStr(startTime.year(), startTime.month()+1);
+      this.showStartDateSelect = false
+      this.showEndDateSelect = true
     },
-    //月份选中触发
-    onDateConfirm(val) {
-      if (this.newDate(val + '') > this.endDate) {
+
+    onEndConfirm(val) {
+      let startTime = dayjs(this.selectStartDate);
+      let endTime = dayjs(val[1].end);
+      if (startTime.month()+1 > endTime.month()+1 ) {
         return Toast('开始月份不能大于结束月份')
       }
-      this.currentDate = this.newDate(val + '')
-      this.showDate = false
+      this.selectEndDate=endTime.format('YYYY-MM-DD');
+      this.endDate =this.initShowDateStr(endTime.year(), endTime.month()+1);
+      this.showEndDateSelect = false
       this.getDataList()
     },
-    //年份选中触发
-    onEndDateConfirm(val) {
-      if (this.newDate(val + '') < this.currentDate) {
-        return Toast('结束月份不能小于开始月份')
+    getQuarterStarOrEndTime(type, year, month) {
+      if (month < 4) {
+        return type == 'start' ? `${year}-01-01` : `${year}-03-31`;
       }
-      this.endDate = this.newDate(val + '')
 
-      console.log(this.endDate)
-      this.endShowDate = false
-      this.getDataList()
-    },
-    tbsHandler() {
-      this.getDataList()
+      if (month < 7) {
+        return type == 'start' ? `${year}-04-01` : `${year}-06-30`;
+      }
+
+      if (month < 10) {
+        return type == 'start' ? `${year}-07-01` : `${year}-09-30`;
+      }
+      return type == 'start' ? `${year}-10-01` : `${year}-12-31`;
     }
   }
 }
@@ -326,9 +263,11 @@ export default {
 .van-cell-group {
   margin-bottom: 20px;
 }
+
 .van-cell-group:last-child {
   margin-bottom: 0;
 }
+
 .vue-table-root {
   tr,
   td,
@@ -341,35 +280,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;
 }