From aed85547dfbc4fc27844c7d10bf08a6afdcb8e72 Mon Sep 17 00:00:00 2001
From: 龚焕茏 <2842157468@qq.com>
Date: 星期三, 29 五月 2024 09:57:18 +0800
Subject: [PATCH] fix：重复调动判断修改
---
src/views/answer/sheetStatistics.vue | 255 ++++++++++++++++++++++++++++++++------------------
1 files changed, 163 insertions(+), 92 deletions(-)
diff --git a/src/views/answer/sheetStatistics.vue b/src/views/answer/sheetStatistics.vue
index 4c6e6da..3397549 100644
--- a/src/views/answer/sheetStatistics.vue
+++ b/src/views/answer/sheetStatistics.vue
@@ -2,20 +2,101 @@
<div style="padding: 10px" ref="pageContent">
<el-form :model="queryParam" ref="queryForm" :inline="true" style="display: flex">
<el-form-item label="璇曞嵎锛�">
- <el-select v-model="queryParam.examPaperId" filterable placeholder="璇曞嵎">
+ <el-select v-model="queryParam.examPaperId" filterable placeholder="璇曞嵎" @change="getType">
<el-option v-for="item in examPaperList" :key="item.id" :value="item.id" :label="item.name" />
</el-select>
</el-form-item>
- <el-form-item label="閮ㄩ棬锛�" v-if="true">
- <el-select v-model="queryParam.departmentId" placeholder="閮ㄩ棬" clearable>
+ <el-form-item label="閮ㄩ棬锛�" v-if="admin">
+ <el-select v-model="queryParam.departmentId" multiple filterable placeholder="閮ㄩ棬" clearable>
<el-option v-for="item in levelEnum" :key="item.key" :value="item.key" :label="item.value" />
</el-select>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm">鏌ヨ</el-button>
</el-form-item>
-
</el-form>
+
+ <el-row :gutter="20">
+ <el-col :xl="24" class="echarts-row">
+ <el-row :gutter="20">
+ <el-col :span="6">
+ <el-card>
+ <div class="data-item">
+ <div class="data-icon" :style="{ 'background-color': iconList[0].color }">
+ <i class="el-icon-tickets"></i>
+ </div>
+ <div class="data-info">
+ <div class="data-label">
+ 鎬昏�冭瘯娆℃暟
+ </div>
+ <div class="data-num">
+ {{ totalInfo.examTotal }}
+ </div>
+ </div>
+ </div>
+ </el-card>
+
+ </el-col>
+
+ <el-col :span="6">
+ <el-card>
+ <div class="data-item">
+ <div class="data-icon" :style="{ 'background-color': iconList[1].color }">
+ <i class="el-icon-s-claim"></i>
+ </div>
+ <div class="data-info">
+ <div class="data-label">
+ 鍙傝�冧汉鏁�
+ </div>
+ <div class="data-num">
+ {{ totalInfo.factPeopleTotal }}
+ </div>
+ </div>
+ </div>
+ </el-card>
+
+ </el-col>
+
+ <el-col :span="6">
+ <el-card>
+ <div class="data-item">
+ <div class="data-icon" :style="{ 'background-color': iconList[2].color }">
+ <i class="el-icon-edit"></i>
+ </div>
+ <div class="data-info">
+ <div class="data-label">
+ 骞冲潎鍒�
+ </div>
+ <div class="data-num">
+ {{ totalInfo.averageScore }}
+ </div>
+ </div>
+ </div>
+ </el-card>
+
+ </el-col>
+
+ <el-col :span="6">
+ <el-card>
+ <div class="data-item">
+ <div class="data-icon" :style="{ 'background-color': iconList[3].color }">
+ <i class="el-icon-s-data"></i>
+ </div>
+ <div class="data-info">
+ <div class="data-label">
+ 鍙傝�冧汉鏁扮櫨鍒嗘瘮
+ </div>
+ <div class="data-num">
+ {{ totalInfo.referencePercentage }}%
+ </div>
+ </div>
+ </div>
+ </el-card>
+ </el-col>
+ </el-row>
+ </el-col>
+ </el-row>
+
<el-row :gutter="20">
<el-col :xl="12" class="echarts-row">
<el-card>
@@ -33,20 +114,10 @@
</el-card>
</el-col>
</el-row>
-
- <el-row :gutter="20">
- <el-col :xl="24">
- <el-card>
- <div class="card-chart-container">
- <div id="peopleChart" ref="peopleChart" class="chart-style" v-loading="chartLoading3" />
- </div>
- </el-card>
- </el-col>
- </el-row>
</div>
</template>
<script>
-import { mapGetters, mapState, mapActions } from 'vuex';
+import { mapGetters, mapState } from 'vuex';
import dashboardApi from '@/api/dashboard';
const colorList = ['#3498DB', '#E74C3C', '#F1C40F', '#95A5A6', '#8E44AD', '#F39C12', '#D35400'];
@@ -61,13 +132,22 @@
};
const scoreLabel = {
'score0To59': '灏忎簬60鍒�',
- 'score60To79': '60-79鍒�',
- 'score80To100': '80-100鍒�'
+ 'score60To69': '60-69鍒�',
+ 'score70To79': '70-79鍒�',
+ 'score80To89': '80-89鍒�',
+ 'score90To100': '90-100鍒�'
};
const pieLabel = {
- 'totalAbsent': '鍙備笌鑰冭瘯',
- 'totalAttended': '鏈弬涓庤�冭瘯'
+ 'totalAttended': '鍙備笌鑰冭瘯',
+ 'totalAbsent': '鏈弬涓庤�冭瘯'
};
+
+const dataKeyMap = {
+ 'factPeopleTotal': '鍙傝�冧汉鏁�',
+ 'averageScore': '骞冲潎鍒�',
+ 'referencePercentage': '鍙傝�冧汉鏁扮櫨鍒嗘瘮',
+};
+
let ageChart = null;
let scroeChart = null;
let peopleChart = null;
@@ -75,60 +155,64 @@
export default {
data() {
return {
+ totalInfo: {
+ examTotal: 0,
+ factPeopleTotal: 0,
+ averageScore: 0,
+ referencePercentage: 0
+ },
+ iconList: [
+ { icon: 'el-icon-tickets', color: '#7868d9' },
+ { icon: 'el-icon-s-claim', color: '#3eba45' },
+ { icon: 'el-icon-edit', color: '#3da7f8' },
+ { icon: 'el-icon-warning', color: '#ffbe40' },
+ { icon: 'el-icon-error', color: '#fe640d' },
+ ],
examPaperList: [],
- max: '',
- min: '',
- avg: '',
chartLoading1: false,
chartLoading2: false,
- chartLoading3: false,
- loading: false,
- examPaperCount: 0,
- questionCount: 0,
- doExamPaperCount: 0,
- doQuestionCount: 0,
- echartsUserAction: null,
queryParam: {
- examPaperId: '85',
- departmentId: '',
- subjectId: null,
- pageIndex: 1,
- pageSize: 10
+ examPaperId: '',
+ departmentId: [],
+ examPaperType: 1
},
- listLoading: false
+ admin: true
};
},
- created() {
- dashboardApi.examPaperList().then(res => {
- this.examPaperList = res.response;
- });
- },
mounted() {
+ if (sessionStorage.getItem('deptAdmin') == 1) {
+ this.admin = false;
+ }
ageChart = echarts.init(this.$refs.ageChart);
scroeChart = echarts.init(this.$refs.scoreChart);
- peopleChart = echarts.init(this.$refs.peopleChart);
- this.getChartData();
- this.observe();
+ dashboardApi.examPaperList().then(res => {
+ this.examPaperList = res.response;
+ this.queryParam.examPaperId = this.examPaperList[0].id
+ this.queryParam.examPaperType = this.examPaperList[0].paperType
+ this.getChartData();
+ this.observe();
+ });
},
methods: {
+ getType(val) {
+ const selectedItem = this.examPaperList.find(item => item.id === val);
+ this.queryParam.examPaperType = selectedItem.paperType;
+ this.getChartData();
+ },
getChartData() {
this.chartLoading1 = true;
this.chartLoading2 = true;
- this.chartLoading3 = true;
dashboardApi.getData(this.queryParam).then(re => {
- const { age, score, examPeopleNum } = re.response;
-
+ const { age, score, total } = re.response;
+ this.totalInfo = total;
const ageOption = this.barOption('骞撮緞娈电粺璁�', age, ageLabel);
- const scoreOption = this.barOption('鑰冭瘯鎴愮哗缁熻', score, scoreLabel);
- const peopleOption = this.pieOption('鑰冭瘯鎯呭喌', examPeopleNum, pieLabel);
+ const scoreOption = this.barOption('鍒嗘暟娈电粺璁�', score, scoreLabel);
ageChart.setOption(ageOption, true);
scroeChart.setOption(scoreOption, true);
- peopleChart.setOption(peopleOption, true);
this.chartLoading1 = false;
this.chartLoading2 = false;
- this.chartLoading3 = false;
});
},
barOption(title, data, labelList) {
@@ -172,45 +256,7 @@
};
},
- pieOption(title, data, labelList) {
- const pieData = data.map(item => {
- return {
- name: labelList[Object.keys(item)[0]],
- value: Object.values(item)[0]
- };
- });
- return {
- title: {
- text: title,
- x: 'left'
- },
- color: colorList,
- tooltip: {
- trigger: 'item'
- },
- legend: {
- orient: 'horizontal',
- },
- series: [
- {
- type: 'pie',
- radius: '50%',
- data: pieData,
- emphasis: {
- itemStyle: {
- shadowBlur: 10,
- shadowOffsetX: 0,
- shadowColor: 'rgba(0, 0, 0, 0.5)'
- }
- }
- }
- ]
-
- };
-
- },
submitForm() {
- this.queryParam.pageIndex = 1;
this.getChartData();
},
@@ -230,9 +276,6 @@
}
if (scroeChart) {
scroeChart.resize();
- }
- if (peopleChart) {
- peopleChart.resize();
}
}
},
@@ -258,9 +301,37 @@
height: 400px;
}
-
.chart-style {
width: 100%;
height: 100%;
}
+
+.data-item {
+ width: 100%;
+ display: flex;
+ align-items: center;
+ border-radius: 10px;
+ overflow: hidden;
+
+ .data-icon {
+ font-size: 70px;
+ padding: 20px 30px;
+ color: #fff;
+ border-radius: 10px;
+ overflow: hidden;
+ margin-right: 20px;
+ }
+
+ .data-info {
+ .data-label {
+ font-size: 18px;
+ margin-bottom: 10px;
+ color: #707070;
+ }
+
+ .data-num {
+ font-size: 28px;
+ }
+ }
+}
</style>
--
Gitblit v1.8.0