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 | 253 +++++++++++++++++++++++++++++++++++---------------
1 files changed, 177 insertions(+), 76 deletions(-)
diff --git a/src/views/wel/components/flightStatistics.vue b/src/views/wel/components/flightStatistics.vue
index 5f43e1f..6034068 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
@@ -35,7 +35,7 @@
</template>
<script setup>
-import { getJobEventByStatus, getJobEventTotal, getFly, getFlyTime } from '@/api/home/index';
+import { getFly, getFlyTime, tongjiNestApi } from '@/api/home/index';
import flyImg1 from '@/assets/images/workbench/fy2.svg';
import flyImg2 from '@/assets/images/workbench/fy3.svg';
import flyImg3 from '@/assets/images/workbench/fy4.svg';
@@ -51,42 +51,66 @@
end_date: undefined,
start_date: undefined,
});
+const flyparams = ref({
+ date_enum: 'YEAR',
+ device_sn: '',
+ end_date: undefined,
+ start_date: undefined,
+});
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([
- { name: '飞行时长', value: 0, img: flyImg1 },
- { name: '飞行里程', value: 0, img: flyImg2 },
- // { name: '任务成果', value: 0, img: flyImg3 },
+ { name: '飞行时长', value: 0, img: flyImg1, key: 'hour_count' },
+ { name: '飞行里程', value: 0, img: flyImg2, key: 'flight_mileage' },
+
]);
// 飞行统计
const getFlyList = () => {
- getFly(params.value).then(res => {
+
+
+ tongjiNestApi(flyparams.value).then(res => {
flyTypeList.value = flyTypeList.value.map(item => ({
...item,
- value: res.data.data[keyMapping[item.name]] || 0,
+ value: res.data.data[item.key] || 0,
}));
+
});
};
const getFlyTimeList = () => {
getFlyTime(params.value).then(res => {
const resList = res?.data?.data || [];
+
lineCharts(resList);
});
+};
+const refresh = () => {
+
+ getFlyList();
+ getFlyTimeList();
+
+
};
let timeClick = (item, index) => {
checked.value = item;
params.value.date_enum = item;
dateSelect.value = item;
+ if (item === 'CURRENT_MONTH') {
+ flyparams.value.date_enum = 'MONTH';
+ } else if (item === 'CURRENT_WEEK') {
+ flyparams.value.date_enum = 'WEEK';
+ } else {
+ flyparams.value.date_enum = 'YEAR';
+ }
getFlyList();
getFlyTimeList();
};
@@ -109,8 +133,6 @@
hasDuration = true;
break;
case '飞行里程':
- // 转换为万公 (假设原始单位是米)
- // flight_distance.push((parseFloat(item.value) / 10 || 0));
flight_distance.push(parseFloat(item.value) || 0);
hasDistance = true;
break;
@@ -120,27 +142,28 @@
// 处理可能缺失的数据项
if (!hasDuration) flight_time.push(0);
if (!hasDistance) flight_distance.push(0);
-
});
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,
@@ -155,47 +178,49 @@
},
},
axisLabel: {
- interval: 0,
+ // interval: 0,
color: '#383838',
},
},
yAxis: [
{
- type: 'log',
- name: '单位:小时',
- nameTextStyle: {
- color: '#383838',
- fontSize: '1.2rem',
- },
- min: 1,
- logBase: 3,
- axisLine: {
- show: false,
- lineStyle: {
- color: '#cdd5e2',
- },
- },
- splitLine: {
- show: true,
- lineStyle: {
- type: 'dashed',
- color: '#cdd5e2',
- width: 1,
- opacity: 0.5,
- },
- },
- axisLabel: {
- color: '#666666', // 直接配置颜色
- },
+ type: 'value',
+ name: '单位:小时',
+ nameTextStyle: {
+ color: '#383838',
+ fontSize: '1.2rem',
+ // padding: [0, 0, 14, 0]
+
+ },
+ axisLine: {
+ show: false,
+ lineStyle: {
+ color: '#cdd5e2',
},
+ },
+ splitLine: {
+ show: true,
+ lineStyle: {
+ type: 'dashed',
+ color: '#cdd5e2',
+ width: 1,
+ opacity: 0.5,
+ },
+ },
+ axisLabel: {
+ color: '#666666',
+ }
+ },
{
- type: 'log',
+ type: 'value',
name: '单位:公里',
nameTextStyle: {
color: '#383838',
+ fontSize: '1.2rem',
+ // padding: [0, 0, 14, 0]
},
- min: 1,
- logBase: 3,
+
+
axisLine: {
show: false,
lineStyle: {
@@ -203,7 +228,7 @@
},
},
splitLine: {
- show: true,
+ show: false,
lineStyle: {
type: 'dashed',
color: '#cdd5e2',
@@ -211,26 +236,91 @@
opacity: 0.5,
},
},
+
axisLabel: {
color: '#383838', // 直接配置颜色
},
},
],
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',
@@ -242,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,
},
@@ -268,7 +368,7 @@
padding: 4px 14px 0 15px;
background: #ffffff !important;
margin-top: 5px;
-height: 100%;
+ height: pxToVh(471);
.fytitle {
display: flex;
@@ -317,7 +417,7 @@
}
.flycenter {
- margin-top: 13px;
+ margin-top: 8px;
.centerBox {
display: flex;
@@ -328,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;
@@ -351,7 +453,7 @@
}
.flydata {
- margin-top: 10px;
+ margin-left: 11px;
text-align: right;
font-size: 14px;
color: #7c8091;
@@ -367,9 +469,8 @@
}
.lineChart {
- height: 209px;
+ height: pxToVh(374) ;
width: 100%;
-
.lineBox {
width: 100%;
height: 100%;
--
Gitblit v1.9.3