From 38781aa31a50c6d1eb121e4f05ab30fb06587da3 Mon Sep 17 00:00:00 2001
From: ZhangXianQiang <1135831638@qq.com>
Date: 星期五, 26 四月 2024 14:10:51 +0800
Subject: [PATCH] Merge branch 'dev-threejs'
---
src/views/system/result/detail/index1.vue | 420 +++++++++++++++++++++++++++++++++++++++++------------------
1 files changed, 288 insertions(+), 132 deletions(-)
diff --git a/src/views/system/result/detail/index1.vue b/src/views/system/result/detail/index1.vue
index d8b604f..f0f402b 100644
--- a/src/views/system/result/detail/index1.vue
+++ b/src/views/system/result/detail/index1.vue
@@ -1,92 +1,71 @@
<template>
- <div style="padding: 15px">
- <div style="display: flex;flex-direction: row;">
- <div class="now-item">
- <div class="box now">
- <div class="title">
- 瑙嗛
+ <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="0">鐪佸巺鑰冩牳</el-menu-item>
+ <el-menu-item index="1">鍖哄煙鑰冩牳</el-menu-item>
+ </el-menu>
+ </div>
+
+ <div class="data-chart-container">
+ <el-card class="data-card" :body-style="{ height: '100%' }">
+ <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>
- 98
+ <div class="chart-container">
+ <div id="chartContent" ref="chartContent"></div>
</div>
</div>
- </div>
- <div class="now-item">
- <div class="box now">
- <div class="title">
- 浜鸿劯
- </div>
- <div>
- 98
- </div>
- </div>
- </div>
- <div class="now-item">
- <div class="box now">
- <div class="title">
- 鐩戞帶
- </div>
- <div>
- 98
- </div>
- </div>
- </div>
- <div style="justify-content: center;align-items: center;display: flex;width: 80px">
- <i class="el-icon-caret-left">鏈湀</i>
- </div>
+ </el-card>
</div>
<div style="margin-top: 35px">
- <el-table
- :data="tableData"
- style="width: 100%">
- <el-table-column
- label="鏈堜唤"
- prop="month">
+ <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="renlian">
- </el-table-column>
- <el-table-column
- label="瑙嗛"
- prop="shipin">
- </el-table-column>
- <el-table-column
- label="杞﹁締"
- prop="cheliang">
- </el-table-column>
- <el-table-column
- align="right">
- <template slot="header" slot-scope="scope">
- <el-date-picker
- size="mini"
- style="width: 100%"
- v-model="searchForm.time"
- type="monthrange"
- range-separator="~"
- start-placeholder="寮�濮嬫湀"
- end-placeholder="缁撴潫鏈�">
- </el-date-picker>
- </template>
+ <el-table-column label="鑰冩牳瀵硅薄" prop="deptId" align="center">
<template slot-scope="scope">
- <el-button
- size="mini"
- @click="handleDetail(scope.$index, scope.row)">璇︽儏</el-button>
+ {{ translateDeptId(scope.row.deptId) }}
+ </template>
+ </el-table-column>
+ <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">
+ <template slot-scope="scope">
+ <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>
+ <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">
+ <el-button size="small" type="text" v-show="scope.row.publish != 1">纭鍙戝竷</el-button>
+ <el-button size="small" type="text" v-show="scope.row.publish == 1">鍙栨秷鍙戝竷</el-button>
+ <el-button size="mini" type="text" icon="el-icon-view"
+ @click="handleDetail(scope.row, scope.index)">璇︾粏</el-button>
</template>
</el-table-column>
</el-table>
</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="5">
+ <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>
@@ -94,49 +73,77 @@
</template>
<script>
+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'],
data() {
return {
- tableData: [
- {
- renlian: 94,
- shipin: 89.5,
- cheliang: 92,
- month: "2024骞�3鏈�"
- },
- {
- renlian: 94,
- shipin: 89.5,
- cheliang: 92,
- month: "2024骞�2鏈�"
- },
- {
- renlian: 94,
- shipin: 89.5,
- cheliang: 92,
- month: "2024骞�1鏈�"
- },
- {
- renlian: 94,
- shipin: 89.5,
- cheliang: 92,
- month: "2023骞�12鏈�"
- },
- ,
- {
- renlian: 94,
- shipin: 89.5,
- cheliang: 92,
- month: "2023骞�11鏈�"
- },
- ],
+ activeIndex: '0',
+ areaList: [],
+ date: '',
+ dateRange: '',
+ queryParams: {
+ pageNum: 1,
+ pageSize: 10,
+ deptId: null,
+ examinTag:0
+ },
+ tableData: [],
+ loading: false,
searchForm: {
time: null,
}
}
},
+ created() {
+ //鑰冩牳鎴愮哗璇︽儏璺宠浆鍙傛暟鎺ユ敹
+ console.log(this.$route.query.index)
+ if (this.$route.query.index) {
+ this.queryParams.deptId = 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: {
+ // 鍖哄煙涓嬫媺鏁版嵁
+ areaSelect() {
+ areaSelect().then(res => {
+ this.areaList = res.data;
+ })
+ },
+ translateDeptId(deptId) {
+ const department = this.areaList.find(dept => dept.id == deptId);
+ return department ? department.value : '鏈煡';
+ },
+ /** 瀵艰埅鍒囨崲 */
+ 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) {
console.log(`姣忛〉 ${val} 鏉);
},
@@ -149,37 +156,186 @@
},
handleDelete(index, row) {
console.log(index, row);
+ },
+ initChart(data) {
+ const dataList = this.groupByData(data);
+ const option = {
+ legend: {
+ right: 'right',
+ top: 'top',
+ icon: 'rect',
+ orient: "vertical",
+ },
+ grid: {
+ left: 0,
+ right: 0,
+ bottom: 0,
+ top: '20%',
+ containLabel: true
+ },
+ tooltip: {},
+ xAxis: {
+ type: 'category',
+ data: dataList.map((item) => item[0]),
+ },
+ yAxis: {
+ min: 90,
+ },
+ series: [
+ {
+ name: '杞﹁締鑰冩牳',
+ data: this.filterData(dataList, 0),
+ type: 'line',
+ itemStyle: {
+ color: 'rgba(62, 144, 247, 1)'
+ }
+ },
+ {
+ name: '浜鸿劯鑰冩牳',
+ data: this.filterData(dataList, 1),
+ type: 'line',
+ itemStyle: {
+ color: 'rgba(85, 192, 191, 1)'
+ }
+ },
+ {
+ name: '瑙嗛鑰冩牳',
+ data: this.filterData(dataList, 2),
+ type: 'line',
+ itemStyle: {
+ color: 'rgba(255, 165, 0, 1)'
+ }
+ }
+ ]
+ };
+ 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;
+ },
+
+ // 鐩戝惉鍙樺寲
+ observe() {
+ if (!observer) {
+ observer = new ResizeObserver(entries => {
+ this.handleResize();
+ })
+ }
+ observer.observe(this.$refs.chartContent);
+ },
+ // 绐楀彛鍙樻崲
+ handleResize() {
+ if (lineChart) {
+ lineChart.resize();
+ }
+ },
+
+ dateChange() {
+ this.queryParams.date = this.date;
+ console.log(this.queryParams);
+ this.getList(this.queryParams.deptId);
+ }
+
+ },
+ mounted() {
+ lineChart = echarts.init(this.$refs.chartContent);
+ this.getList(this.$route.query.index);
+ this.observe();
+ },
+ beforeDestroy() {
+ if (lineChart) {
+ lineChart.dispose();
+ observer.unobserve(this.$refs.chartContent);
}
},
+ handleSelect(key, keyPath) {
+ console.log(key, keyPath);
+ },
+
}
</script>
-<style scoped>
-.now-item {
- flex: 1;
- display: flex;
- justify-content: center;
- align-items: center;
-}
-.now {
- /*background-color: #42b983;*/
- height: 80px !important;
-}
-.box {
- display: flex;
- flex-direction: column;
- align-items: center;
- justify-content: center;
- box-shadow: 0 2px 6px hsla(0, 0%, 7%, .1);
- border-radius: 10px;
- width: 240px;
- height: 50px;
-}
-.box:hover{
- cursor: pointer;
+<style lang="scss" scoped>
+.data-chart-container {
+ height: 400px;
+ margin-bottom: 20px;
+
+ .data-card {
+ height: 100%;
+
+ .card-content {
+ width: 100%;
+ height: 100%;
+ position: relative;
+ }
+ }
}
-.title {
- font-size: larger;
+.title-container {
+ position: absolute;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ z-index: 2;
+
+
+ .more-button {
+ cursor: pointer;
+ font-size: 16px;
+ padding: 0 10px;
+ }
+}
+
+.chart-container {
+ width: 100%;
+ height: 100%;
+
+ #chartContent {
+ width: 100%;
+ height: 100%;
+ }
+}
+
+.select-container {
+ margin: 0 20px;
+ width: 180px;
}
</style>
--
Gitblit v1.8.0