From c832bf2e80ac465e71b7a1c1f7a59d4252030989 Mon Sep 17 00:00:00 2001
From: 张含笑 <zhx18749296735@163.com>
Date: Tue, 05 Aug 2025 17:33:08 +0800
Subject: [PATCH] feat:事件工单滚动条
---
src/views/wel/components/flightStatistics.vue | 150 ++++++++++++++++++++++++++++++++++++++-----------
1 files changed, 115 insertions(+), 35 deletions(-)
diff --git a/src/views/wel/components/flightStatistics.vue b/src/views/wel/components/flightStatistics.vue
index 94da299..6034068 100644
--- a/src/views/wel/components/flightStatistics.vue
+++ b/src/views/wel/components/flightStatistics.vue
@@ -59,14 +59,14 @@
});
const chartRef = ref(null);
let { chart: lineChart } = useEchartsResize(chartRef);
-const keyMapping = {
- 飞行时长: 'total_flight_time',
- 飞行里程: 'total_flight_distance',
- // 任务成果: 'event_num',
-};
+// const keyMapping = {
+// '飞行时长': 'total_flight_time',
+// '飞行里程': 'total_flight_distance',
+// // 任务成果: 'event_num',
+// };
const unitMap = {
- 飞行时长: '小时',
- 飞行里程: '公里',
+ '飞行时长': '小时',
+ '飞行里程': '公里',
};
const flyTypeList = ref([
@@ -145,23 +145,25 @@
});
var option = {
tooltip: {
- trigger: 'item',
+ trigger: 'axis',
axisPointer: {
- type: 'shadow',
+ type: 'shadow'
},
+ // position: 'top'
+
},
grid: {
left: '2%',
right: '4%',
bottom: '14%',
- top: '16%',
+ top: '9%',
containLabel: true,
},
legend: {
data: ['飞行时长', '飞行里程'],
left: 'center',
- top: '5%',
- color: '#383838', // 直接配置颜色
+ // top: '5%',
+ color: '#383838',
itemWidth: 15,
itemHeight: 10,
itemGap: 25,
@@ -176,7 +178,7 @@
},
},
axisLabel: {
- interval: 0,
+ // interval: 0,
color: '#383838',
},
},
@@ -187,6 +189,8 @@
nameTextStyle: {
color: '#383838',
fontSize: '1.2rem',
+ // padding: [0, 0, 14, 0]
+
},
axisLine: {
show: false,
@@ -213,6 +217,7 @@
nameTextStyle: {
color: '#383838',
fontSize: '1.2rem',
+ // padding: [0, 0, 14, 0]
},
@@ -238,20 +243,84 @@
},
],
series: [
- {
- name: '飞行时长',
- type: 'bar',
- barWidth: '8px',
- itemStyle: {
- color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
- { offset: 0, color: '#91C1FF' },
- { offset: 1, color: '#2970FF' },
- ]),
- borderRadius: 4,
- },
- data: flight_time,
- },
+
+ // {//柱底圆片
+ // name: "",
+ // type: "pictorialBar",
+ // symbolSize: [8, 10],//调整截面形状
+ // symbolOffset: [0, 5],
+ // z: 12,
+ // itemStyle: {
+ // "normal": {
+ // color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+ // offset: 0,
+ // "color": "#91C1FF"
+ // },
+ // {
+ // offset: 1,
+ // "color": "#2970FF"
+ // }
+ // ],false)
+ // }
+ // },
+ // data: flight_time,
+ // },
+
+ //柱体
+ {
+ name: '飞行时长',
+ type: 'bar',
+ barWidth: '8px',
+ itemStyle: {
+ "normal": {
+ "color": {
+ "x": 0,
+ "y": 0,
+ "x2": 0,
+ "y2": 1,
+ "type": "linear",
+ "global": false,
+ "colorStops": [{//第一节下面
+ "offset": 0,
+ "color": "#91C1FF"
+ }, {
+ "offset": 1,
+ "color": "#2970FF"
+ }]
+ }
+ }
+ },
+ data: flight_time,
+ },
+
+ //柱顶圆片
+ {
+ name: '',
+ type: "pictorialBar",
+ tooltip: { show: false },
+ symbolSize: [8, 8],//调整截面形状
+ symbolOffset: [0, -3],
+ z: 12,
+ symbolPosition: "end",
+ "itemStyle": {
+ "normal": {
+ color: new echarts.graphic.LinearGradient(0,0,0,1,
+ [{
+ offset: 0,
+ color: "#9DC9FD"
+ },
+ {
+ offset: 1,
+ color: "#3279FA"
+ }
+ ],
+ false
+ ),
+ }
+ },
+ data: flight_time,
+ },
{
name: '飞行里程',
type: 'line',
@@ -263,11 +332,21 @@
lineStyle: {
width: 2,
type: 'solid',
+ color: '#01D0A7',
},
symbol: 'circle',
symbolSize: 6,
- lineStyle: {
- color: '#01D0A7',
+ areaStyle: {
+ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+ {
+ offset: 0,
+ color: 'rgba(1,208,167,0.4) '
+ },
+ {
+ offset: 1,
+ color: 'rgba(1,208,167,0) '
+ }
+ ])
},
data: flight_distance,
},
@@ -289,7 +368,7 @@
padding: 4px 14px 0 15px;
background: #ffffff !important;
margin-top: 5px;
- height: pxToVh(400);
+ height: pxToVh(471);
.fytitle {
display: flex;
@@ -338,7 +417,7 @@
}
.flycenter {
- margin-top: 13px;
+ margin-top: 8px;
.centerBox {
display: flex;
@@ -349,13 +428,15 @@
padding: 7px 7px 0 15px;
width: 196px;
flex: 1;
- // height: 80px;
- height: pxToVh(80);
+ height: 41px;
+ //height: pxToVh(41);
background: #f6f8fe;
box-shadow: 0px 5px 4px 0px #ebf1ff;
border-radius: 8px 8px 8px 8px;
border: 1px solid #ffffff;
margin-right: 16px;
+ display: flex;
+ align-items: center;
img {
width: 15px;
@@ -372,7 +453,7 @@
}
.flydata {
- margin-top: 10px;
+ margin-left: 11px;
text-align: right;
font-size: 14px;
color: #7c8091;
@@ -388,9 +469,8 @@
}
.lineChart {
- height: pxToVh(233) ;
+ height: pxToVh(374) ;
width: 100%;
-
.lineBox {
width: 100%;
height: 100%;
--
Gitblit v1.9.3