新增安保履职统计页面

src/views/menu/resumptionStatistics/index.vue

@@ -11,7 +11,7 @@
               title="统计周期"
               show-toolbar
               :columns="selectTypeList"
-              @confirm="onConfirm"
+              @confirm="onSelectTypeConfirm"
               @cancel="onCancel"
               confirm-button-text="确定"
               :close-on-click-overlay="false"
@@ -26,18 +26,18 @@
               v-model="startDate"
               show-toolbar
               @cancel="onCancel"
-              type="month-day"
+              type="day"
               @confirm="onDateConfirm"
               confirm-button-text="确定"
               title="统计日期"
-              :formatter="formatter"
+              :formatter="monthFormatter"
             />
           </van-popup>
         </van-col>
         <van-col span="13">
-          <van-cell title="月份" @click="showDate = true" is-link arrow-direction="down" :value="showSelectTimeText"
+          <van-cell title="月份" @click="showMonth = true" is-link arrow-direction="down" :value="showSelectTimeText"
                     v-if="selectType==2"/>
-          <van-popup v-model="showDate" round position="bottom">
+          <van-popup v-model="showMonth" round position="bottom">
             <van-datetime-picker
               v-model="startDate"
               show-toolbar
@@ -46,7 +46,7 @@
               @confirm="onMonthConfirm"
               confirm-button-text="确定"
               title="统计月份"
-              :formatter="formatter"
+              :formatter="monthFormatter"
             />
           </van-popup>
         </van-col>
@@ -75,6 +75,7 @@ import dateCell from '@/components/dateCell'
 import selectCell from '@/components/selectCell'
 import dayjs from "dayjs";
 import {Toast} from 'vant'
+import {selectResumptionReport} from "views/menu/resumption/api";
 
 export default {
   components: {
@@ -91,6 +92,7 @@ export default {
       startDate: this.initDate(),
       // yearColumns: [],
       showDate: false, //月份显示隐藏
+      showMonth: false, //月份显示隐藏
       selectTypeText: '日', //查询类型名称
       selectType: 1, //默认为日的查询类型
       selectTypeList: [
@@ -99,11 +101,6 @@ export default {
       ],
       showSelectTimeText: this.getDayStr(new Date()),
       searchTime: dayjs(new Date()),
-      prop: {
-        label: 'name',
-        value: 'id'
-      },
-      loading: false,
       columns: [
         {
           field: 'index',
@@ -116,24 +113,24 @@ export default {
           }
         },
         {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: 'totalPlanNumber', key: 'b', title: '应履职数', align: 'center'},
+        {field: 'totalRealityNumber', key: 'c', title: '已履职数', align: 'center'},
+        {field: 'totalRate', key: 'd', title: '完成率', align: 'center'}
       ],
       dataList: []
     }
   },
-  created() {
-
-  },
+  created() {},
   mounted() {
     this.initData()
   },
   computed: {},
   methods: {
     dayjs,
-    formatter(type, val) {
-      if (type === 'month') {
+    monthFormatter(type, val) {
+      if (type === 'day') {
+        return `${val}日`;
+      } else if (type === 'month') {
         return `${val}月`;
       } else if (type === 'year') {
         return `${val}年`;
@@ -162,43 +159,43 @@ export default {
         searchTime: this.showSelectTimeText
       }
       console.log("getDataList....", data)
-      /*selectResumptionReport(data).then(res => {
+      selectResumptionReport(data).then(res => {
         this.dataList = res.data
-      })*/
+      })
     },
     //搜索选择状态时触发
-    onConfirm(value, index) {
+    onSelectTypeConfirm(value) {
       this.selectType = value.value;
       this.selectTypeText = value.text;
-
-      this.getDataList();
       this.showSelectType = false;
+      // 只有在用户选择了日期类型后，才显示日期选择器
       if (this.selectType === 1) {
-        this.onDateConfirm(new Date());
-      } else {
-        this.onMonthConfirm(new Date());
+
+        this.showDate = true;
+      }else {
+
+        this.showMonth = true;
       }
     },
 
     onCancel() {
-      this.show = false
-      this.typeStatus = false
-      this.showDate = false
-      this.showSelectType = false
-      this.endShowDate = false
+      this.showSelectType = false;
+      this.showDate = false;
     },
     //日期选中触发
     onDateConfirm(val) {
       console.log('onDateConfirm...', val)
       this.showSelectTimeText = this.getDayStr(val);
-      this.showDate = false
+      this.startDate = val;
+      this.showDate = false;
       this.getDataList()
     },
     //月份选中触发
     onMonthConfirm(val) {
       console.log('onMonthConfirm...', val)
       this.showSelectTimeText = this.getDayStr(val, 'YYYY-MM')
-      this.showDate = false
+      this.startDate = val;
+      this.showDate = false;
       this.getDataList()
     },
 
@@ -243,25 +240,6 @@ export default {
   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;