|
|
@@ -0,0 +1,349 @@
|
|
|
+<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="showStatus = true" is-link arrow-direction="down" :value="fieldValue" />
|
|
|
+
|
|
|
+ <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-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"
|
|
|
+ confirm-button-text="确定"
|
|
|
+ :default-index="yearSelect"
|
|
|
+ title="开始月份"
|
|
|
+ :formatter="formatter"
|
|
|
+ />
|
|
|
+ </van-popup>
|
|
|
+ </van-col>
|
|
|
+ <van-col span="12">
|
|
|
+
|
|
|
+ <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"
|
|
|
+ type="year-month"
|
|
|
+ :formatter="formatter"
|
|
|
+ @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: 'finishRate', 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: {
|
|
|
+ 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()
|
|
|
+ },
|
|
|
+ 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%;
|
|
|
+ }
|
|
|
+}
|
|
|
+.van-cell__value{
|
|
|
+ color: black;
|
|
|
+ text-align: left;
|
|
|
+}
|
|
|
+</style>
|
jingyuanchao