From 09f0861e61e69e2d818eafc7b9edbd17cf0822d4 Mon Sep 17 00:00:00 2001
From: zxl <763096477@qq.com>
Date: 星期四, 06 十一月 2025 17:20:02 +0800
Subject: [PATCH] 页面优化以及扣分详情导出
---
src/views/system/check/result/index.vue | 287 ++++++++++++++++++++++++++++++++++++++++++++++----------
1 files changed, 234 insertions(+), 53 deletions(-)
diff --git a/src/views/system/check/result/index.vue b/src/views/system/check/result/index.vue
index 090956a..35016e5 100644
--- a/src/views/system/check/result/index.vue
+++ b/src/views/system/check/result/index.vue
@@ -1,11 +1,67 @@
<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="1">甯傚眬鑰冩牳</el-menu-item>
- </el-menu>
+ <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="1">鍖哄幙鑰冩牳</el-menu-item>
+ <el-menu-item index="2">鍏畨閮ㄨ�冩牳</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">
@@ -13,6 +69,19 @@
<div class="card-content">
<div class="title-container">
<h1>鑰冩牳鎴愮哗</h1>
+ <div class="select-container">
+ <el-date-picker v-model="date"
+ format="yyyy-MM-dd"
+ value-format="yyyy-MM-dd"
+ type="daterange"
+ placeholder="閫夋嫨鏃ユ湡"
+ start-placeholder="寮�濮嬫棩鏈�"
+ end-placeholder="缁撴潫鏃ユ湡"
+ @change="dateChange"
+ @clear="handleClear"
+ :picker-options="pickerOptions">
+ </el-date-picker>
+ </div>
</div>
<div class="echart-container">
<div id="barChart" ref="barChart"></div>
@@ -31,22 +100,23 @@
</div>
<div class="score-warp">
<div class="score-item">
- <div style="font-size: 15px; margin-bottom: 15px">{{ formatCreateDate(city[0].createTime) }}</div>
+ <div style="font-size: 15px; margin-bottom: 15px">{{ formatCreateDate(city[0]) }}</div>
</div>
- <div v-for="(score, scoreIndex) in city" :key="scoreIndex">
+ <div v-for="(score, scoreIndex) in filterRepeat(city)" :key="scoreIndex">
<div class="score-item">
<div v-if="score.examineCategory == 2">杞﹁締锛�</div>
<div v-else-if="score.examineCategory == 3">浜鸿劯锛�</div>
<div v-else-if="score.examineCategory == 1">瑙嗛锛�</div>
- <div class="score">{{ score.score }}</div>
+ <div class="score">{{ (score.score * 100).toFixed(2) + '%' }}</div>
</div>
</div>
</div>
<div class="bottom-publish">
- <el-button 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="info">璇︽儏</el-button>
+ <el-button size="medium" @click="jumpDetail(index)" type="primary">璇︽儏</el-button>
</div>
</div>
</div>
@@ -58,45 +128,96 @@
</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, publishScore} from "@/api/platform/check-score";
import * as echarts from 'echarts';
+import {barScore} from "../../../../api/platform/check-score";
+
let observer = null;
let chart = null;
export default {
name: 'index',
data() {
return {
+ tagOptions: [
+ {value: 0, label: '鐪佸巺'},
+ {value: 1, label: '鍖哄幙'},
+ {value: 2, label: '鍏畨閮�'}
+ ],
+ pickerOptions: {
+ shortcuts: [{
+ text: '绗竴瀛ｅ害',
+ onClick(picker) {
+ picker.$emit('pick', [new Date(new Date().getFullYear() + "-01"+ "-01"), new Date(new Date().getFullYear() + "-03"+"-31")]);
+ }
+ },
+ {
+ text: '绗簩瀛ｅ害',
+ onClick(picker) {
+ picker.$emit('pick', [new Date(new Date().getFullYear() + "-04"+"-01"), new Date(new Date().getFullYear() + "-06"+"-30")]);
+ }
+ },
+ {
+ text: '绗笁瀛ｅ害',
+ onClick(picker) {
+ picker.$emit('pick', [new Date(new Date().getFullYear() + "-07"+"-01"), new Date(new Date().getFullYear() + "-09"+"-30")])
+ }
+ },
+ {
+ text: '绗洓瀛ｅ害',
+ onClick(picker) {
+ picker.$emit('pick', [new Date(new Date().getFullYear() + "-10"+"-01"), new Date(new Date().getFullYear() + "-12"+"-31")])
+ }
+ }]
+ },
province: {
id: [],
publish: null,
},
+ // 瀵煎嚭琛ㄥ崟楠岃瘉
+ exportRules: {
+ quarter: [
+ { type: 'array', required: true, message: '璇烽�夋嫨鏃堕棿', trigger: 'change' }
+ ],
+ },
checkScoreList: [],
areaList: [],
activeIndex: '0',
- date: '',
+ date: [],
company: '',
- dataList: {
- name: ['瀵岄『鍘�', '鑽ｅ幙', '楂樻柊鍖�', '鑷祦浜曞尯', '璐′簳鍖�', '澶у畨鍖�', '娌挎哗鍖�'],
- data1: [95, 96, 97, 95, 94.5, 93.6, 94.5],
- data2: [93.7, 93.5, 94.3, 96.5, 95.3, 94.2, 93.3],
- data3: [98.3, 94.3, 93.3, 95.5, 96.8, 96.1, 95.8],
+ // 瀵煎嚭
+ exportForm: {
+ quarter: [],
+ deptIds: [],
+ examineTags: [],
+ examineCategories: [],
+ average: null,
},
// 鏌ヨ鍙傛暟
queryParams: {
examineTag: null,
createTime: null
},
+ // 鏌ヨ鍙傛暟
+ barParams: {
+ examineTag: null,
+ createTime: null
+ },
}
},
created() {
- this.queryParams.examineTag = this.activeIndex
- this.getList();
- this.areaSelect();
},
mounted() {
+ this.queryParams.examineTag = this.activeIndex
+ this.barParams.examineTag = this.activeIndex
chart = echarts.init(this.$refs.barChart);
- this.initEchart();
+ const currentDate = new Date();
+ const year = currentDate.getFullYear();
+ const month = String(currentDate.getMonth() + 1).padStart(2, '0'); // 鏈堜唤浠�0寮�濮嬶紝闇�瑕佸姞1锛屽苟涓斾繚璇佷袱浣嶆暟
+ const day = String(currentDate.getDate()).padStart(2, '0'); // 淇濊瘉涓や綅鏁�
+ this.date = [`${year}-${month}-${day}`,`${year}-${month}-${day}`];
+ this.areaSelect()
+ // this.setChartOption(this.checkScoreList);
},
methods: {
jumpDetail(index) {
@@ -126,8 +247,7 @@
tooltip: {},
xAxis: {
type: 'category',
- axisLabel: {
- },
+ axisLabel: {},
data: this.dataList.name
},
yAxis: {
@@ -138,6 +258,7 @@
type: 'bar',
name: '瑙嗛鑰冩牳',
data: this.dataList.data1,
+ barWidth: '40',
itemStyle: {
color: 'rgba(255, 165, 0, 1)'
}
@@ -146,6 +267,7 @@
type: 'bar',
name: '浜鸿劯鑰冩牳',
data: this.dataList.data2,
+ barWidth: '40',
itemStyle: {
color: 'rgba(85, 192, 191, 1)'
}
@@ -154,6 +276,7 @@
type: 'bar',
name: '杞﹁締鑰冩牳',
data: this.dataList.data3,
+ barWidth: '40',
itemStyle: {
color: 'rgba(62, 144, 247, 1)'
}
@@ -193,53 +316,61 @@
tooltip: {},
xAxis: {
type: 'category',
- axisLabel: {
- },
+ axisLabel: {},
data: nameArray
+
},
yAxis: {
- min: 90,
+ min: 0
},
series: [
{
type: 'bar',
name: '瑙嗛鑰冩牳',
data: data1,
+ barWidth: '40',
itemStyle: {
- color: 'rgba(255, 165, 0, 1)'
+ color: 'rgba(255, 165, 0, 1)',
}
},
{
type: 'bar',
name: '浜鸿劯鑰冩牳',
data: data2,
+ barWidth: '40',
itemStyle: {
- color: 'rgba(85, 192, 191, 1)'
+ color: 'rgba(85, 192, 191, 1)',
}
},
{
type: 'bar',
name: '杞﹁締鑰冩牳',
data: data3,
+ barWidth: '40',
itemStyle: {
- color: 'rgba(62, 144, 247, 1)'
+ color: 'rgba(62, 144, 247, 1)',
}
},
]
}
chart.setOption(option, true);
},
- filterData(data, tag) {
- if (!data) return;
- if(!Array.isArray(data)) return;
+ filterData(mapData, tag) {
+ if (!mapData) return;
+ if (!Array.isArray(mapData)) return;
const tempArray = [];
- data.forEach((item) => {
- if(item.data.length) {
+ mapData.forEach((item) => {
+ 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) {
+ tempArray.push(0);
+ }
}
})
return tempArray;
@@ -248,10 +379,13 @@
areaSelect() {
areaSelect().then(res => {
this.areaList = res.data;
+ this.getList();
+ this.getChart();
})
},
translateDeptId(deptId) {
const department = this.areaList.find(dept => dept.id === deptId);
+ console.log(deptId,this.areaList)
return department ? department.value : '鏈煡';
},
@@ -259,8 +393,8 @@
// 妫�鏌� city 鐨� score 鏁扮粍涓槸鍚︽湁浠讳綍涓�涓殑 publish 灞炴�т负 'UNPUBLISHED'
return city.some(score => score.publish === 'UNPUBLISHED');
},
- formatCreateDate(dateString) {
- const date = new Date(dateString);
+ formatCreateDate(item) {
+ const date = new Date(item.createTime);
const year = date.getFullYear();
const month = date.getMonth() + 1; // getMonth() 杩斿洖鐨勬湀浠芥槸浠� 0 寮�濮嬬殑锛屾墍浠ヨ鍔� 1
const day = date.getDate();
@@ -271,31 +405,61 @@
return `${year}骞�${formattedMonth}鏈�${formattedDay}鍙穈;
},
+ filterRepeat(city) {
+ let list = [];
+ let examineCategorys = [];
+ city.forEach(item => {
+ if (examineCategorys.indexOf(item.examineCategory) === -1) {
+ examineCategorys.push(item.examineCategory);
+ list.push(item);
+ }
+ });
+ return list;
+ },
/** 瀵艰埅鍒囨崲 */
handleSelect(key) {
this.activeIndex = key; // 鏇存柊褰撳墠婵�娲荤殑鑿滃崟椤�
this.queryParams.examineTag = key;
+ this.barParams.examineTag = key;
this.getList();
+ this.getChart();
},
- /** 鏌ヨ鑰冩牳鎴愮哗鍒楄〃 */
+ dateChange() {
+ this.getChart();
+ },
+ handleClear() {
+ const currentDate = new Date();
+ const year = currentDate.getFullYear();
+ const month = String(currentDate.getMonth() + 1).padStart(2, '0'); // 鏈堜唤浠�0寮�濮嬶紝闇�瑕佸姞1锛屽苟涓斾繚璇佷袱浣嶆暟
+ const day = String(currentDate.getDate()).padStart(2, '0'); // 淇濊瘉涓や綅鏁�
+ this.barParams.startDate = `${year}-${month}-${day}`;
+ this.barParams.endDate = `${year}-${month}-${day}`;
+ this.getChart();
+ },
+ /** 鑾峰彇鏌辩姸鍥炬暟鎹� */
+ getChart() {
+ this.loading = true;
+ if(this.date) {
+ this.barParams.startDate = this.date[0]
+ this.barParams.endDate = this.date[1]
+ }
+ barScore(this.barParams).then(response => {
+ this.setChartOption(response.data);
+ this.loading = false;
+ });
+ },
+ /**
+ * 鏌ヨ鑰冩牳鎴愮哗鍒楄〃
+ * 鍗＄墖鍒楄〃榛樿鏄剧ず褰撳ぉ
+ * */
getList() {
this.loading = true;
- // 鑾峰彇褰撳墠鏃ユ湡
- const today = new Date();
-
- // 璁＄畻鏄ㄥぉ鐨勬棩鏈�
- const yesterday = new Date(today);
- yesterday.setDate(today.getDate() - 1);
-
- // 灏嗘槰澶╃殑鏃ユ湡鏍煎紡鍖栦负瀛楃涓诧紝杩欓噷鍋囪鍚庣鏈熸湜鐨勬槸ISO 8601鏍煎紡
- this.queryParams.createTime = yesterday.toISOString().split('T')[0];
-
- console.log(this.queryParams);
listScore(this.queryParams).then(response => {
this.checkScoreList = response.data;
- console.log(this.checkScoreList);
+
+
+ // this.setChartOption(this.checkScoreList);
this.loading = false;
- this.setChartOption(this.checkScoreList);
});
},
publish(city) {
@@ -315,6 +479,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