From 704b0dd87ef7b30f53cd434c2225fa245671d82c Mon Sep 17 00:00:00 2001
From: 张含笑 <zhx18749296735@163.com>
Date: Thu, 17 Jul 2025 16:08:18 +0800
Subject: [PATCH] feat:工作台页面优化
---
src/views/wel/components/flyratio.vue | 21 ++++++++++++++-------
src/views/wel/components/calendarBox.vue | 7 +++----
src/views/wel/components/flightStatistics.vue | 4 ++--
src/views/wel/components/taskOutcome.vue | 14 ++++++++++----
4 files changed, 29 insertions(+), 17 deletions(-)
diff --git a/src/views/wel/components/calendarBox.vue b/src/views/wel/components/calendarBox.vue
index 5cfa30a..1fb2eb7 100644
--- a/src/views/wel/components/calendarBox.vue
+++ b/src/views/wel/components/calendarBox.vue
@@ -78,8 +78,6 @@
const getJobEventBar = () => {
getCalen(params.value).then(res => {
- console.log('re', res.data);
-
if (res.data.code !== 0) return;
const a = res.data.data;
const filteredData = {};
@@ -151,9 +149,10 @@
// }
// }
.el-calendar-table .el-calendar-day {
- height: 78px !important;
+
+ height: pxToVh(91) !important;
}
-
+
// 选中日期样式
.el-calendar-table td.is-selected {
background-color: #f0f7ff;
diff --git a/src/views/wel/components/flightStatistics.vue b/src/views/wel/components/flightStatistics.vue
index 468ec4f..16768fd 100644
--- a/src/views/wel/components/flightStatistics.vue
+++ b/src/views/wel/components/flightStatistics.vue
@@ -3,7 +3,7 @@
<div class="fytitle">
<div class="cardtotal">
<p>飞行统计</p>
- <img @click="refresh" src="/src/assets/images/workbench/st1.png" alt="" />
+ <img @click="refresh" src="/src/assets/images/workbench/st1.svg" alt="" />
</div>
<div class="time-card">
<div
@@ -394,7 +394,7 @@
}
.lineChart {
- height: 209px;
+ height: pxToVh(233) ;
width: 100%;
.lineBox {
diff --git a/src/views/wel/components/flyratio.vue b/src/views/wel/components/flyratio.vue
index 1d397e4..d9dff52 100644
--- a/src/views/wel/components/flyratio.vue
+++ b/src/views/wel/components/flyratio.vue
@@ -5,7 +5,7 @@
<div class="cardtotal">
<p>机巢工单数量排名</p>
- <img @click="refresh" src="/src/assets/images/workbench/st1.png" alt="" />
+ <img @click="refresh" src="/src/assets/images/workbench/st1.svg" alt="" />
</div>
<div class="time-card">
<div
@@ -130,21 +130,22 @@
},
grid: {
left: '3%',
- right: '4%',
+ right: '3%',
bottom: '3%',
+ top: '-3%', // 添加顶部间距
containLabel: true,
},
xAxis: {
type: 'value',
- splitLine: { lineStyle: { color: '#E5E5E5' } },
- axisLabel: { color: '#7C8091',fontSize:'1.2rem' },
+ splitLine: { lineStyle: { color: '#E5E5E5' },show:false },
+ axisLabel: { color: '#7C8091',fontSize:'1.2rem',show:false },
boundaryGap: [0, 0.01],
},
yAxis: {
type: 'category',
data: optionData.yAxisData,
- axisLabel: { color: '#7C8091' ,fontSize:'1.2rem'},
- axisLine: { lineStyle: { color: '#D1D1D1' } },
+ axisLabel: { color: '#7C8091' ,fontSize:'1.2rem',},
+ axisLine: { lineStyle: { color: '#D1D1D1' } ,show:false},
axisTick: { show: false },
// 确保排序后的数据从上到下显示（最大值在顶部）
inverse: true,
@@ -155,6 +156,7 @@
type: 'bar',
data: optionData.seriesData,
itemStyle: {
+ barBorderRadius: [0, 20, 20, 0],
color: params => {
// 前6项使用固定颜色循环，之后使用渐变
return params.dataIndex < colors.length
@@ -170,6 +172,11 @@
show: true,
position: 'right',
formatter: '{c}',
+ itemStyle:{
+ fontSize: '1.4rem',
+ color: '#414243',
+
+ }
},
},
],
@@ -210,7 +217,7 @@
.cardtotal {
display: flex;
align-items: center;
- margin-left: 9px;
+
img {
width: 17px;
height: 17px;
diff --git a/src/views/wel/components/taskOutcome.vue b/src/views/wel/components/taskOutcome.vue
index f9d0d8c..5c71603 100644
--- a/src/views/wel/components/taskOutcome.vue
+++ b/src/views/wel/components/taskOutcome.vue
@@ -5,7 +5,7 @@
<p>任务成果</p>
<span class="total-number">1856</span>
<p>个</p>
- <img @click="refresh" src="/src/assets/images/workbench/st1.png" alt="" />
+ <img @click="refresh" src="/src/assets/images/workbench/st1.svg" alt="" />
</div>
<div class="time-card">
<div
@@ -38,7 +38,12 @@
start_date: undefined,
});
const dateSelect = ref('YEAR');
-
+const refresh = () => {
+ params.value.date_enum = 'YEAR';
+ checked.value = 'YEAR';
+ dateSelect.value = 'YEAR';
+ getBarChartData(params.value);
+};
let timeClick = (item, index) => {
checked.value = item;
params.value.date_enum = item;
@@ -54,7 +59,7 @@
legend: {
itemWidth: 14,
itemHeight: 8,
- data: ['待处理', '处理中', '已完成', '事件完成率'], // 确保包含所有系列名称
+ data: ['待处理', '处理中', '已完成'], // 确保包含所有系列名称
top: '-1%',
textStyle: {
color: '#383838',
@@ -255,7 +260,8 @@
}
.chart {
width: 98%;
- height: 265px;
+ // height: 265px;
+ height: pxToVh(285);
padding-left: 10px;
margin-top: 27px;
}
--
Gitblit v1.9.3