soc_app/src/views/menu/drillStatistics/index.vue

<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-field
            v-model="fieldValue"
            label-width="6em"
            :disabled="showStatus"
            label="演练计划名称"
            placeholder=""
            @click="showStatus = true"
            ><van-icon name="arrow-down" slot="button"
          /></van-field>
          <van-popup v-model="showStatus" round position="bottom">
            <van-picker
              title="演练计划名称"
              show-toolbar
              :columns="taskList"
              @confirm="onConfirm"
              @cancel="onCancel"
              confirm-button-text="确定"
              :close-on-click-overlay="false"
            />
          </van-popup>
        </van-col>
      </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-popup v-model="showDate" round position="bottom">
            <!-- :columns="yearColumns" -->
            <van-datetime-picker
              v-model="presentDate"
              show-toolbar
              @cancel="onCancel"
              type="year-month"
              @confirm="onDateConfirm"
              confirm-button-text="确定"
              :default-index="yearSelect"
              title="开始月份"
            />
          </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-popup v-model="endShowDate" round position="bottom">
            <!-- :columns="yearColumns" -->
            <van-datetime-picker
              v-model="presentEndDate"
              show-toolbar
              @cancel="onCancel"
              type="year-month"
              @confirm="onEndDateConfirm"
              confirm-button-text="确定"
              :default-index="yearSelect"
              title="结束月份"
            />
          </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 { mapGetters } from 'vuex'
import { formatDate } from '@/filters/filter'
import { newDateMonth } from '@/utils/date.js'
import { Toast } from 'vant'
export default {
  components: {
    NavBar,
    OrgTree,
    dateCell,
    selectCell
  },
  data() {
    return {
      // active: '',
      cascaderValue: '',
      presentDate: '',
      presentEndDate: '',
      showStatus: false, //状态显示隐藏
      endShowDate: false, //状态显示隐藏
      // yearColumns: [],
      showDate: false, //月份显示隐藏
      fieldValue: '', //状态名称
      statusValue: '', //状态值
      taskList: [], //状态数组
      columnsList: [], //状态数组
      currentDate: newDateMonth(), //年份
      endDate: newDateMonth(), //年份
      planList: [],
      yearSelect: null,
      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: 'shouldFinish', key: 'b', title: '应演练数', align: 'center' },
        { field: 'finish', key: 'c', title: '已演练数', align: 'center' },
        { field: 'score', key: 'd', title: '评分', align: 'center' }
      ],
      dataList: []
    }
  },
  created() {
    this.presentDate = new Date(newDateMonth())
    this.presentEndDate = new Date(newDateMonth())
    // this.yearData()
    // this.getNewMonth()
  },
  mounted() {
    this.initData()
  },
  computed: {},
  methods: {
    // 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()
    },
    getPlanList() {
      getrehearsalList(this.cascaderValue).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.getDataList()
      })
    },
    //机构搜索
    getOrgDataList(val) {
      this.cascaderValue = val

      this.getDataList()
    },
    getDataList() {
      if (!this.statusValue) return
      let data = {
        planId: this.statusValue || '',
        orgId: this.cascaderValue || '',
        startTime: this.currentDate + '-01',
        endTime: this.endDate + '-01'
      }

      getTableRehearsalList(data).then(res => {
        this.dataList = res.data
      })
    },
    //搜索选择状态时触发
    onConfirm(value, index) {
      this.fieldValue = value
      this.planList.forEach(item => {
        if (value == item.name) {
          this.statusValue = item.id
        }
      })

      this.getDataList()
      this.showStatus = false
    },

    onCancel() {
      this.show = false
      this.typeStatus = false
      this.showDate = false
      this.showStatus = false
      this.endShowDate = 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
    },
    //月份选中触发
    onDateConfirm(val) {
      if (this.newDate(val + '') > this.endDate) {
        return Toast('开始月份不能大于结束月份')
      }
      this.currentDate = this.newDate(val + '')
      this.showDate = false
      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%;
  }
}
</style>