From 5208ae16a508a42be2e4b50ef299389fb556a67e Mon Sep 17 00:00:00 2001 From: fuliqi <fuliqi@qq.com> Date: 星期日, 28 四月 2024 09:14:18 +0800 Subject: [PATCH] Merge remote-tracking branch 'origin/master' --- src/views/system/result/detail/index1.vue | 194 ++++++++++++++++++++++++----------------------- 1 files changed, 99 insertions(+), 95 deletions(-) diff --git a/src/views/system/result/detail/index1.vue b/src/views/system/result/detail/index1.vue index 4a9971c..3e3341f 100644 --- a/src/views/system/result/detail/index1.vue +++ b/src/views/system/result/detail/index1.vue @@ -1,9 +1,10 @@ <template> <div style="padding: 0px 10px"> <div> - <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect" style="margin-bottom: 10px"> - <el-menu-item index="1">鐪佸巺鑰冩牳</el-menu-item> - <el-menu-item index="2">鍖哄煙鑰冩牳</el-menu-item> + <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> @@ -12,6 +13,11 @@ <div class="card-content"> <div class="title-container"> <h1>鑰冩牳鎴愮哗</h1> + <div class="select-container"> + <el-date-picker v-model="date" format="yyyy-MM" value-format="yyyy-MM" type="month" placeholder="閫夋嫨鏃ユ湡" + @change="dateChange"> + </el-date-picker> + </div> </div> <div class="chart-container"> <div id="chartContent" ref="chartContent"></div> @@ -21,49 +27,29 @@ </div> <div style="margin-top: 35px"> - <el-table - :data="tableData" - style="width: 100%"> - <el-table-column - label="鑰冩牳鏃堕棿" - prop="createTime" - align="center"> + <el-table :data="tableData" style="width: 100%" v-loading="loading"> + <el-table-column label="鑰冩牳鏃堕棿" prop="createTime" align="center"> </el-table-column> - <el-table-column - label="鑰冩牳瀵硅薄" - prop="deptId" - align="center"> + <el-table-column label="鑰冩牳瀵硅薄" prop="deptId" align="center"> <template slot-scope="scope"> {{ translateDeptId(scope.row.deptId) }} </template> </el-table-column> - <el-table-column - label="鏍囩" - prop="examineTag" - align="center"> + <el-table-column label="鏍囩" prop="examineTag" align="center"> <template slot-scope="scope"> {{ scope.row.examineTag == 0 ? '鐪佸巺鑰冩牳' : '甯傚眬鑰冩牳' }} </template> </el-table-column> - <el-table-column - label="鑰冩牳绫诲瀷" - prop="examineCategory" - align="center"> + <el-table-column label="鑰冩牳绫诲瀷" prop="examineCategory" align="center"> <template slot-scope="scope"> - <dict-tag :options="dict.type.platform_examine_category" :value="scope.row.examineCategory"/> + <dict-tag :options="dict.type.platform_examine_category" :value="scope.row.examineCategory" /> </template> </el-table-column> - <el-table-column - label="鍒嗘暟" - prop="score" - align="center"> + <el-table-column label="鍒嗘暟" prop="score" align="center"> </el-table-column> - <el-table-column - label="鐘舵��" - prop="publish" - align="center"> + <el-table-column label="鐘舵��" prop="publish" align="center"> </el-table-column> <el-table-column label="鎿嶄綔" align="center" class-name="small-padding fixed-width"> <template slot-scope="scope"> @@ -81,14 +67,9 @@ </div> <div style="text-align: right; margin-top: 10px"> - <el-pagination - @size-change="handleSizeChange" - @current-change="handleCurrentChange" - :current-page="currentPage4" - :page-sizes="[5, 10, 20]" - :page-size="5" - layout="total, sizes, prev, pager, next, jumper" - :total="4"> + <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" + :current-page="queryParams.pageNum" :page-sizes="[10, 20, 50]" :page-size="queryParams.pageSize" + layout="total, sizes, prev, pager, next, jumper" :total="tableData.length"> </el-pagination> </div> @@ -96,41 +77,29 @@ </template> <script> -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 { areaSelect } from '@/api/system/dept'; +import { mapState } from 'vuex'; import * as echarts from 'echarts'; let lineChart = null; let observer = null; export default { name: 'index', - dicts: ['platform_examine_use','platform_examine_category'], + dicts: ['platform_examine_use', 'platform_examine_category'], data() { return { - activeIndex: '1', - areaList:[], + activeIndex: '0', + areaList: [], + date: '', dateRange: '', - company: '', queryParams: { pageNum: 1, pageSize: 10, deptId: null, + examinTag:0 }, - dataList: [ - { - name: '鍏ㄩ儴', - complete: { '4.5': 95.5, '4.6': 95.3, '4.7': 96.0, '4.8': 97.2, '4.9': 96.5 , - '4.10': 95.5, '4.11': 95.3, '4.12': 96.0, '4.13': 97.2, '4.14': 96.5 , - '4.15': 95.5, '4.16': 95.3, '4.17': 96.0, '4.18': 97.2, '4.19': 96.5 , - '4.20': 95.5, '4.21': 95.3, '4.22': 96.0, '4.23': 97.2, '4.24': 96.5, - '4.25': 95.5, '4.26': 95.3, '4.27': 96.0, '4.28': 97.2, '4.29': 96.5 - }, - waiting: { '4.5': 94.8, '4.6': 91.3, '4.7': 95.3, '4.8': 92.3, '4.9': 93.3, - '4.10': 94.8, '4.11': 91.3, '4.12': 95.3, '4.13': 92.3, '4.14': 93.3 }, - pending: { '4.5': 91.6, '4.6': 92.6, '4.7': 93.7, '4.8': 94.0, '4.9': 95.9 - ,'4.10': 91.6, '4.11': 92.6, '4.12': 93.7, '4.13': 94.0, '4.14': 95.9 } - } - ], tableData: [], + loading: false, searchForm: { time: null, } @@ -139,11 +108,18 @@ created() { //鑰冩牳鎴愮哗璇︽儏璺宠浆鍙傛暟鎺ユ敹 console.log(this.$route.query.index) - if(this.$route.query.index){ + if (this.$route.query.index) { this.queryParams.deptId = this.$route.query.index } - this.getList(this.$route.query.index); + const date = new Date(); + const year = date.getFullYear(); + const month = (date.getMonth() + 1) >= 10 ? date.getMonth() + 1 : '0' + (date.getMonth() + 1); + this.date = year + '-' + month; + this.queryParams.date = this.date; this.areaSelect(); + }, + computed: { + }, methods: { // 鍖哄煙涓嬫媺鏁版嵁 @@ -157,16 +133,19 @@ return department ? department.value : '鏈煡'; }, /** 瀵艰埅鍒囨崲 */ - handleSelect(key){ - this.activeIndex = key; // 鏇存柊褰撳墠婵�娲荤殑鑿滃崟椤� - this.getList(); + handleSelect(key) { + this.activeIndex = key; + this.queryParams.examinTag = key; + this.getList(this.queryParams.deptId); }, /** 鏌ヨ鑰冩牳妯℃澘鍒楄〃 */ getList(deptId) { this.loading = true; + lineChart.showLoading(); listScore(this.queryParams).then(response => { this.tableData = response.data[deptId]; this.loading = false; + this.initChart(response.data[deptId]); }); }, handleSizeChange(val) { @@ -186,33 +165,14 @@ handleDelete(index, row) { console.log(index, row); }, - initChart() { + initChart(data) { + const dataList = this.groupByData(data); const option = { legend: { right: 'right', top: 'top', icon: 'rect', orient: "vertical", - data: [ - { - name: '杞﹁締鑰冩牳', - itemStyle: { - color: 'rgba(62, 144, 247, 1)' - } - }, - { - name: '浜鸿劯鑰冩牳', - itemStyle: { - color: 'rgba(85, 192, 191, 1)' - } - }, - { - name: '瑙嗛鑰冩牳', - itemStyle: { - color: 'rgba(255, 165, 0, 1)' - } - }, - ], }, grid: { left: 0, @@ -224,7 +184,7 @@ tooltip: {}, xAxis: { type: 'category', - data: Object.keys(this.acitveData.complete), + data: dataList.map((item) => item[0]), }, yAxis: { min: 90, @@ -232,7 +192,7 @@ series: [ { name: '杞﹁締鑰冩牳', - data: Object.entries(this.acitveData.complete).map(([key, value]) => value), + data: this.filterData(dataList, 0), type: 'line', itemStyle: { color: 'rgba(62, 144, 247, 1)' @@ -240,7 +200,7 @@ }, { name: '浜鸿劯鑰冩牳', - data: Object.entries(this.acitveData.waiting).map(([key, value]) => value), + data: this.filterData(dataList, 1), type: 'line', itemStyle: { color: 'rgba(85, 192, 191, 1)' @@ -248,7 +208,7 @@ }, { name: '瑙嗛鑰冩牳', - data: Object.entries(this.acitveData.pending).map(([key, value]) => value), + data: this.filterData(dataList, 2), type: 'line', itemStyle: { color: 'rgba(255, 165, 0, 1)' @@ -257,6 +217,47 @@ ] }; lineChart.setOption(option, true); + lineChart.hideLoading(); + }, + + groupByData(data) { + if (!data) return this.getAllDay().map((item) => [item, []]); + const tempGroup = {}; + data.forEach((item) => { + let { createTime } = item; + let tempTime = createTime.split('-'); + createTime = tempTime[1] + '-' + tempTime[2]; + if (!tempGroup[createTime]) { + tempGroup[createTime] = []; + } + tempGroup[createTime].push(item); + }) + const tempArray = Object.entries(tempGroup).sort(([keyA], [keyB]) => new Date([keyA]) - new Date([keyB])); + return tempArray; + }, + filterData(data, tag) { + const scoreList = data.map((item) => { + let temp = item[1].find((exam) => exam.examineCategory === tag); + if (temp) { + return temp.score; + } else { + return; + } + }); + return scoreList; + }, + + getAllDay() { + const currentDate = this.date.split('-'); + const currentYear = currentDate[0]; + const currentMonth = currentDate[1]; + const daysInMonth = new Date(currentYear, currentMonth, 0).getDate(); + const datesOfMonth = []; + for (var day = 1; day <= daysInMonth; day++) { + const formattedDate = currentMonth + '-' + (day.toString().padStart(2, '0')); + datesOfMonth.push(formattedDate); + } + return datesOfMonth; }, // 鐩戝惉鍙樺寲 @@ -273,14 +274,18 @@ if (lineChart) { lineChart.resize(); } + }, + + dateChange() { + this.queryParams.date = this.date; + console.log(this.queryParams); + this.getList(this.queryParams.deptId); } }, mounted() { - this.acitveData = this.dataList[0]; - this.company = this.acitveData.name; lineChart = echarts.init(this.$refs.chartContent); - this.initChart(); + this.getList(this.$route.query.index); this.observe(); }, beforeDestroy() { @@ -292,6 +297,7 @@ handleSelect(key, keyPath) { console.log(key, keyPath); }, + } </script> @@ -327,7 +333,6 @@ } .chart-container { - width: 100%; height: 100%; @@ -341,5 +346,4 @@ margin: 0 20px; width: 180px; } - </style> -- Gitblit v1.8.0