From 38498783f5080482cc2f1f5493f28fec140154da Mon Sep 17 00:00:00 2001
From: 龚焕茏 <2842157468@qq.com>
Date: 星期四, 23 五月 2024 15:47:12 +0800
Subject: [PATCH] feat：统计新需求
---
src/api/dashboard.js | 2
src/router.js | 10 +
src/views/answer/dataStatistics.vue | 257 +++++++++++++++++++++++++++++++++++++++++++++++++++
3 files changed, 267 insertions(+), 2 deletions(-)
diff --git a/src/api/dashboard.js b/src/api/dashboard.js
index bbd6429..6a9614e 100644
--- a/src/api/dashboard.js
+++ b/src/api/dashboard.js
@@ -3,6 +3,8 @@
export default {
index: () => post('/api/admin/dashboard/index'),
getData: query => post('/api/admin/examPaperAnswer/statistic', query),
+ data: query => post('/api/admin/examPaperAnswer/data', query),
+ queryCondition: query => get('/api/admin/exam/paper/queryCondition', query),
examPaperList: query => get('/api/admin/exam/paper/list', query),
page: query => post('/api/admin/examPaperAnswer/page', query)
}
diff --git a/src/router.js b/src/router.js
index 86a80d1..0027693 100644
--- a/src/router.js
+++ b/src/router.js
@@ -314,7 +314,13 @@
path: 'sheetStatistics',
component: () => import('@/views/answer/sheetStatistics.vue'),
name: 'AnswerPageList',
- meta: { title: '绛斿嵎缁熻', noCache: true }
+ meta: { title: '浜烘暟鍒嗗竷', noCache: true }
+ },
+ {
+ path: 'dataStatistics',
+ component: () => import('@/views/answer/dataStatistics.vue'),
+ name: 'AnswerPageList',
+ meta: { title: '鍒嗘暟缁熻', noCache: true }
},
{
path: 'achievementStatistics',
@@ -570,7 +576,7 @@
path: 'sheetStatistics',
component: () => import('@/views/answer/sheetStatistics.vue'),
name: 'AnswerPageList',
- meta: { title: '绛斿嵎缁熻', noCache: true }
+ meta: { title: '浜烘暟鍒嗗竷', noCache: true }
},
]
},
diff --git a/src/views/answer/dataStatistics.vue b/src/views/answer/dataStatistics.vue
new file mode 100644
index 0000000..997726f
--- /dev/null
+++ b/src/views/answer/dataStatistics.vue
@@ -0,0 +1,257 @@
+<template>
+ <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.id" filterable placeholder="璇曞嵎">
+ <el-option v-for="item in examPaperList" :key="item.id" :value="item.id" :label="item.name" @change="getType(item.type)" />
+ </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="12" class="echarts-row">
+ <el-card>
+ <div class="card-chart-container">
+ <div id="ageChart" ref="ageChart" class="chart-style" v-loading="chartLoading1" />
+ </div>
+ </el-card>
+ </el-col>
+
+ <el-col :xl="12" class="echarts-row">
+ <el-card>
+ <div class="card-chart-container">
+ <div id="scoreChart" ref="scoreChart" class="chart-style" v-loading="chartLoading2" />
+ </div>
+ </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 } from 'vuex';
+import dashboardApi from '@/api/dashboard';
+
+const colorList = ['#3498DB', '#E74C3C', '#F1C40F', '#95A5A6', '#8E44AD', '#F39C12', '#D35400'];
+
+
+const ageLabel = {
+ 'age0To19': '0-19宀�',
+ 'age20To29': '20-29宀�',
+ 'age30To39': '30-39宀�',
+ 'age40To49': '40-49宀�',
+ 'ageOver50': '澶т簬50宀�',
+};
+const scoreLabel = {
+ 'score0To59': '灏忎簬60鍒�',
+ 'score60To69': '60-69鍒�',
+ 'score70To79': '70-79鍒�',
+ 'score80To89': '80-89鍒�',
+ 'score90To100': '90-100鍒�'
+};
+const pieLabel = {
+ 'totalAttended': '鍙備笌鑰冭瘯',
+ 'totalAbsent': '鏈弬涓庤�冭瘯'
+};
+let ageChart = null;
+let scroeChart = null;
+let peopleChart = null;
+let observer = null;
+export default {
+ data() {
+ return {
+ examPaperList: [],
+ chartLoading1: false,
+ chartLoading2: false,
+ chartLoading3: false,
+ queryParam: {
+ id: '',
+ type: 1
+ },
+ admin: true
+ };
+ },
+ 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);
+ dashboardApi.queryCondition().then(res => {
+ this.examPaperList = res.response;
+ this.queryParam.id = this.examPaperList[0].id
+ this.queryParam.type = this.examPaperList[0].paperType
+ this.getChartData();
+ this.observe();
+ });
+ },
+ methods: {
+ getType(type) {
+ this.queryParam.type = type;
+ this.getChartData();
+ },
+ getChartData() {
+ this.chartLoading1 = true;
+ this.chartLoading2 = true;
+ this.chartLoading3 = true;
+ dashboardApi.data(this.queryParam).then(re => {
+ const { age, score, examPeopleNum } = re.response;
+
+ const ageOption = this.barOption('骞撮緞娈电粺璁�', age, ageLabel);
+ const scoreOption = this.barOption('鍒嗘暟娈电粺璁�', score, scoreLabel);
+ const peopleOption = this.pieOption('鑰冭瘯浜烘暟', examPeopleNum, pieLabel);
+
+ 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) {
+ const dataKeys = data.map(item => labelList[Object.keys(item)[0]]);
+ const dataValues = data.map(item => Object.values(item)[0]);
+ return {
+ title: {
+ text: title,
+ x: 'left'
+ },
+ color: colorList,
+ tooltip: {
+ trigger: 'item'
+ },
+ grid: {
+ left: 10,
+ right: 10,
+ bottom: 20,
+ top: 40,
+ containLabel: true
+ },
+ xAxis: {
+ type: 'category',
+ data: dataKeys
+ },
+ yAxis: {
+ type: 'value'
+ },
+ series: [
+ {
+ type: 'bar',
+ label: {
+ show: true,
+ fontSize: 16
+ },
+ barMaxWidth: '40%',
+ data: dataValues,
+ }
+ ]
+
+ };
+
+ },
+ 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: ['#E74C3C', '#3498DB', '#F1C40F', '#95A5A6', '#8E44AD', '#F39C12', '#D35400'],
+ 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.getChartData();
+ },
+
+ // 鐩戝惉鍙樺寲
+ observe() {
+ if (!observer) {
+ observer = new ResizeObserver(entries => {
+ this.handleResize();
+ });
+ }
+ observer.observe(this.$refs.pageContent);
+ },
+ // 绐楀彛鍙樻崲
+ handleResize() {
+ if (ageChart) {
+ ageChart.resize();
+ }
+ if (scroeChart) {
+ scroeChart.resize();
+ }
+ if (peopleChart) {
+ peopleChart.resize();
+ }
+ }
+ },
+ beforeDestroy() {
+ observer.unobserve(this.$refs.pageContent);
+ },
+ computed: {
+ ...mapGetters('enumItem', ['enumFormat']),
+ ...mapState('enumItem', {
+ levelEnum: state => state.user.levelEnum
+ })
+ }
+};
+</script>
+
+<style scoped lang="scss">
+.echarts-row {
+ margin-bottom: 20px;
+}
+
+.card-chart-container {
+ width: 100%;
+ height: 400px;
+}
+
+
+.chart-style {
+ width: 100%;
+ height: 100%;
+}
+</style>
--
Gitblit v1.8.0