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/home/data-face/index.vue | 64 ++++++++++++++++++++++++--------
1 files changed, 48 insertions(+), 16 deletions(-)
diff --git a/src/views/home/data-face/index.vue b/src/views/home/data-face/index.vue
index ae50412..d663302 100644
--- a/src/views/home/data-face/index.vue
+++ b/src/views/home/data-face/index.vue
@@ -10,10 +10,22 @@
</el-option>
</el-select>
</div>
- <div>
+ <div class="select-container">
+ <el-select v-model="params.category" placeholder="鏁版嵁绫诲瀷" @change="getChart" clearable>
+ <el-option v-for="item in categories" :key="item.label" :label="item.label" :value="item.value">
+ </el-option>
+ </el-select>
+ </div>
+ <div style="margin-right: 20px">
<el-date-picker v-model="date" format="yyyy-MM" value-format="yyyy-MM" type="month" placeholder="閫夋嫨鏈堜唤"
@change="dateChange">
</el-date-picker>
+ </div>
+ <div >
+ <el-select v-model="params.area" placeholder="鍖哄幙" @change="getChart" clearable>
+ <el-option v-for="item in areaOption" :key="item.label" :label="item.label" :value="item.value">
+ </el-option>
+ </el-select>
</div>
</div>
<div class="chart-container">
@@ -28,8 +40,8 @@
import * as echarts from 'echarts';
import {car, face} from "../../../api/platform/home";
-var chartDom = document.getElementById('main');
-var myChart = echarts.init(chartDom);
+
+var myChart = null;
var option;
let observer = null;
export default {
@@ -39,10 +51,23 @@
date: '',
params: {
month: '',
+ category: 1
},
+ categories: [
+ {label: '绱鏁版嵁', value: 1},
+ {label: '姣忔棩鏁版嵁', value: 2},
+ ],
+ areaOption:[
+ {label:'鑷祦浜曞尯',value:'510302'},
+ {label:'璐′簳鍖�',value:'510303'},
+ {label:'澶у畨鍖�',value:'510304'},
+ {label:'娌挎哗鍖�',value:'510311'},
+ {label:'鑽ｅ幙',value:'510321'},
+ {label:'瀵岄『鍘�',value:'510322'},
+ {label:'楂樻柊鍖�',value:'510399'},
+ ],
options: [
- {label: '鐪佸巺', value: 1},
- {label: '鍏畨閮�', value: 2}
+ {label: '鐪佸巺', value: 1}
],
dataList: [],
}
@@ -79,10 +104,13 @@
return tempArray;
},
getAllDay() {
- const currentDate = this.date.split('-');
- const currentYear = currentDate[0];
- const currentMonth = currentDate[1];
+ // 鑾峰彇褰撳墠鏃ユ湡
+ const currentDate = new Date();
+ const currentYear = currentDate.getFullYear();
+ const currentMonth = (currentDate.getMonth() + 1).toString().padStart(2, '0'); // 鏈堜唤浠�0寮�濮嬶紝闇�瑕佸姞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'));
@@ -98,9 +126,13 @@
if (!data.list || data.list.length === 0) {
snapCount = 0;
}else {
- snapCount = data.list[data.list.length - 1].snapCount
+ snapCount = data.list.reduce((max, item) => Math.max(max, item.snapCount), 0)
}
- const yMax = Math.max(snapCount, baseLine * 1.2);
+ const yMax = Math.max(snapCount * 1.2, baseLine * 1.2);
+ let interval = 1;
+ while ((yMax) / interval > 100) { // 杩欓噷鐨� 100 鏄竴涓槇鍊硷紝鎮ㄥ彲浠ユ牴鎹渶瑕佽皟鏁�
+ interval *= 10;
+ }
const colors = ['#5470C6', '#66CC99', '#EE6666'];
option = {
color: colors,
@@ -192,7 +224,7 @@
axisLabel: {
formatter: function (value) {
// 杩斿洖鏁存暟閮ㄥ垎锛屾垨浣跨敤鍏朵粬閫昏緫鏉ユ牸寮忓寲鏍囩
- return Math.floor(value);
+ return Math.floor(value / interval) * interval;
}
}
}
@@ -276,6 +308,7 @@
const month = (date.getMonth() + 1) >= 10 ? date.getMonth() + 1 : '0' + (date.getMonth() + 1);
this.date = year + '-' + month;
this.params.date = this.date;
+ myChart = echarts.init(this.$refs.chartContent);
this.getChart();
this.observe();
},
@@ -305,12 +338,11 @@
}
.title-container {
- position: absolute;
display: flex;
- justify-content: space-between;
align-items: center;
- z-index: 2;
-
+ padding: 15px 20px; /* 鍐呰竟璺濇帶鍒堕珮搴﹀拰杈硅窛 */
+ background: #fff;
+ border-bottom: 1px solid #eee; /* 鍒嗛殧绾垮寮鸿瑙夊垎绂� */
.more-button {
cursor: pointer;
font-size: 16px;
@@ -321,7 +353,7 @@
.chart-container {
width: 100%;
- height: 100%;
+ height: 80%;
#chartContent {
width: 100%;
--
Gitblit v1.8.0