From 636ad750419ea9915cef7435a1506c01f9035a80 Mon Sep 17 00:00:00 2001 From: fuliqi <fuliqi@qq.com> Date: 星期四, 05 九月 2024 21:52:17 +0800 Subject: [PATCH] 考核结果导出优化 --- src/views/system/check/result/index.vue | 154 ++++++++++++++++++++++++++++++++++++++++++++------ 1 files changed, 134 insertions(+), 20 deletions(-) diff --git a/src/views/system/check/result/index.vue b/src/views/system/check/result/index.vue index ad11a90..b43277f 100644 --- a/src/views/system/check/result/index.vue +++ b/src/views/system/check/result/index.vue @@ -1,15 +1,68 @@ <template> <div id="warp"> - <div> - <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect" - style="margin-bottom: 10px"> - <el-menu-item index="0">鐪佸巺鏈堝害</el-menu-item> - <el-menu-item index="2">鐪佸巺瀛e害</el-menu-item> - <el-menu-item index="1">鍖哄幙鏈堝害</el-menu-item> - <el-menu-item index="3">鍖哄幙瀛e害</el-menu-item> - </el-menu> - </div> + <div style="display: flex;position: relative"> + <div style="width: 100%"> + <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect" + style="margin-bottom: 10px"> + <el-menu-item index="0">鐪佸巺鏈堝害</el-menu-item> + <el-menu-item index="2">鐪佸巺瀛e害</el-menu-item> + <el-menu-item index="1">鍖哄幙鏈堝害</el-menu-item> + <el-menu-item index="3">鍖哄幙瀛e害</el-menu-item> + </el-menu> + </div> + <!-- 瀵煎嚭鎸夐挳 --> + <div style="position: absolute;top:10px; right: 5px;z-index: 2" v-hasPermi="['check:result:export']"> + <el-popover + placement="left" + width="300px" + trigger="click"> + <span style="font-weight: bold;font-size: 16px">瀵煎嚭</span> + <el-form ref="exportForm" :model="exportForm" :rules="exportRules" label-width="100px"> + <el-form-item label="鑰冩牳鏃堕棿" prop="quarter" required> + <el-date-picker + :clearable="false" + v-model="exportForm.quarter" + type="monthrange" + format="yyyy-MM" + value-format="yyyy-MM" + unlink-panels + range-separator="鑷�" + start-placeholder="寮�濮嬫湀浠�" + end-placeholder="缁撴潫鏈堜唤" + :picker-options="pickerOptions"> + </el-date-picker> + </el-form-item> + <el-form-item label="鍖哄幙" prop="deptIds"> + <el-select v-model="exportForm.deptIds" multiple clearable> + <el-option v-for="dept in areaList" + :value="dept.id" + :key="dept.value" + :label="dept.value"/> + </el-select> + </el-form-item> + <el-form-item label="鑰冩牳鏍囩" prop="examineTags"> + <el-checkbox-group v-model="exportForm.examineTags"> + <el-checkbox + v-for="item in tagOptions" + :key="item.value" + :label="item.value" + >{{ item.label }} + </el-checkbox> + </el-checkbox-group> + </el-form-item> + <el-form-item label="璁$畻骞冲潎鍊�" prop="average"> + <el-switch + v-model="exportForm.average" + > + </el-switch> + </el-form-item> + <el-button type="primary" size="small" style="width: 400px" @click="handleExport">瀵煎嚭</el-button> + </el-form> + <el-button slot="reference" type="primary" size="mini" plain>瀵煎嚭</el-button> + </el-popover> + </div> + </div> <div class="data-chart-container"> <el-card class="data-card" :body-style="{ height: '100%' }"> <div class="card-content"> @@ -45,7 +98,8 @@ </div> </div> <div class="bottom-publish"> - <el-button v-hasPermi="['check:score:publish']" size="medium" :type="isAnyUnpublished(city) ? 'success' : 'danger'" @click="publish(city)"> + <el-button v-hasPermi="['check:score:publish']" size="medium" + :type="isAnyUnpublished(city) ? 'success' : 'danger'" @click="publish(city)"> {{ isAnyUnpublished(city) ? '鍙戝竷' : '鍙栨秷' }} </el-button> <el-button size="medium" @click="jumpDetail(index)" type="primary">璇︽儏</el-button> @@ -60,24 +114,69 @@ </template> <script> -import { areaSelect } from '@/api/system/dept'; -import { listScore, getScore, delScore, addScore, updateScore, publishScore } from "@/api/platform/check-score"; +import {areaSelect} from '@/api/system/dept'; +import {listScore, getScore, delScore, addScore, updateScore, publishScore} from "@/api/platform/check-score"; import * as echarts from 'echarts'; + let observer = null; let chart = null; export default { name: 'index', data() { return { + tagOptions: [ + {value: 0, label: '鐪佸巺'}, + {value: 1, label: '鍖哄幙'} + ], + pickerOptions: { + shortcuts: [{ + text: '绗竴瀛e害', + onClick(picker) { + picker.$emit('pick', [new Date(new Date().getFullYear() + "-01"), new Date(new Date().getFullYear() + "-03")]); + } + }, + { + text: '绗簩瀛e害', + onClick(picker) { + picker.$emit('pick', [new Date(new Date().getFullYear() + "-04"), new Date(new Date().getFullYear() + "-06")]); + } + }, + { + text: '绗笁瀛e害', + onClick(picker) { + picker.$emit('pick', [new Date(new Date().getFullYear() + "-07"), new Date(new Date().getFullYear() + "-09")]) + } + }, + { + text: '绗洓瀛e害', + onClick(picker) { + picker.$emit('pick', [new Date(new Date().getFullYear() + "-10"), new Date(new Date().getFullYear() + "-12")]) + } + }] + }, province: { id: [], publish: null, + }, + // 瀵煎嚭琛ㄥ崟楠岃瘉 + exportRules: { + quarter: [ + { type: 'array', required: true, message: '璇烽�夋嫨鏃堕棿', trigger: 'change' } + ], }, checkScoreList: [], areaList: [], activeIndex: '0', date: '', company: '', + // 瀵煎嚭 + exportForm: { + quarter: [], + deptIds: [], + examineTags: [], + examineCategories: [], + average: null, + }, // 鏌ヨ鍙傛暟 queryParams: { examineTag: null, @@ -122,8 +221,7 @@ tooltip: {}, xAxis: { type: 'category', - axisLabel: { - }, + axisLabel: {}, data: this.dataList.name }, yAxis: { @@ -192,8 +290,7 @@ tooltip: {}, xAxis: { type: 'category', - axisLabel: { - }, + axisLabel: {}, data: nameArray }, @@ -234,18 +331,18 @@ }, filterData(mapData, tag) { if (!mapData) return; - if(!Array.isArray(mapData)) return; + if (!Array.isArray(mapData)) return; const tempArray = []; mapData.forEach((item) => { - if(item.data.length) { + if (item.data.length) { let flag = false; item.data.forEach((examine) => { - if(examine.examineCategory === tag) { + if (examine.examineCategory === tag) { flag = true tempArray.push(examine.score); } }) - if(!flag){ + if (!flag) { tempArray.push(0); } } @@ -334,6 +431,23 @@ // 閿欒澶勭悊閫昏緫 }); }, + // clickItem(value) { + // value === this.exportForm.examineTag ? this.exportForm.examineTag = null : this.exportForm.examineTag = value + // }, + /** 瀵煎嚭鎸夐挳鎿嶄綔 */ + handleExport() { + this.$refs['exportForm'].validate((valid) => { + if (valid) { + this.download( + "/check/score/export", + { + ...this.exportForm, + }, + `鑰冩牳鎸囨爣_${new Date().getTime()}.xlsx` + ); + } + }) + }, }, } </script> -- Gitblit v1.8.0