From 0082fa417fb2af9add3406bf05ab3e3e45890c34 Mon Sep 17 00:00:00 2001
From: rain <1679827795@qq.com>
Date: Thu, 12 Jun 2025 14:30:02 +0800
Subject: [PATCH] Merge branch 'master' of http://139.196.74.78:10010/r/drone/drone-web-manage
---
src/views/wel/components/flyratio.vue | 137 ++++++++++++++++++++++++---------------------
1 files changed, 74 insertions(+), 63 deletions(-)
diff --git a/src/views/wel/components/flyratio.vue b/src/views/wel/components/flyratio.vue
index 00c6fbe..eef3091 100644
--- a/src/views/wel/components/flyratio.vue
+++ b/src/views/wel/components/flyratio.vue
@@ -5,21 +5,8 @@
<img :src="jc1" alt="" />
<div class="cardtotal">
<p>机巢工单数量排名</p>
- <!-- <div class="total-number">111</div>
- <span>个</span> -->
</div>
</div>
- <!-- <div class="status-grid">
- <div v-for="(item, index) in jcOrder" :key="index" class="status-item">
- <img :src="jc2" alt="" />
- <div>
- <div class="status-label">{{ item.name }}</div>
- <div :style="{ color: '#387FC8' }" class="status-value">
- {{ item.value }}
- </div>
- </div>
- </div>
- </div> -->
</div>
<div class="nestCenter">
<div class="chart" ref="echartsRef"></div>
@@ -33,6 +20,8 @@
import jc1 from '@/assets/images/workbench/jc1.png';
import jc2 from '@/assets/images/workbench/jc2.png';
import { industryJobNumPieChart } from '@/api/home/index';
+import { nextTick } from 'vue';
+
const echartsRef = ref(null);
let { chart: jcchart } = useEchartsResize(echartsRef);
const jcOrder = ref([]);
@@ -44,12 +33,26 @@
const params = reactive({
date_enum: props.dateSelect,
});
+// 空数据计算
+const isEmptyData = computed(() => {
+ return jcOrder.value.length === 0 ||
+ jcOrder.value.every(item => !item.name || item.value === 0)
+})
+// 图表初始化
+const initChart = () => {
+ if (echartsRef.value && !jcchart.value) {
+ jcchart.value = echarts.init(echartsRef.value)
+ }
+}
// 获取机巢事件数据
const getIndustryJobNumPieChart = () => {
industryJobNumPieChart(params).then(res => {
const resList = res?.data?.data || [];
jcOrder.value = resList;
- pieInit(resList);
+ nextTick(() => {
+ initChart()
+ pieInit(resList)
+ })
});
};
watch(
@@ -61,27 +64,38 @@
{ immediate: true }
);
const pieInit = resList => {
- // 处理数据，过滤掉没有name的项
- const validData = resList.filter(item => item.name);
+
+// if (!jcchart.value || !resList?.length) return
+ const validData = resList?.filter(item => item.name).sort((a, b) => b.value - a.value); // 从大到小排序
const colors = [
- '#F87E04',
- '#FFC400',
- '#08BC44',
- '#07B5FF',
- '#A98DFF',
- '#9ABFFF'
-];
+ '#F87E04', // 橙色
+ '#FFC400', // 黄色
+ '#08BC44', // 绿色
+ '#07B5FF', // 蓝色
+ '#A98DFF', // 紫色
+ '#9ABFFF', // 浅蓝
+ ];
+
const optionData = {
yAxisData: validData.map(item => item.name),
seriesData: validData.map(item => item.value),
};
+
const option = {
+ title: {
+ text: resList.length ? '' :'暂无数据',
+ left: 'center',
+ top: 'center',
+ textStyle: {
+ color: '#999',
+ fontSize: '1.6rem',
+ fontWeight: 'normal'
+ }
+ },
tooltip: {
trigger: 'axis',
- axisPointer: {
- type: 'shadow',
- },
+ axisPointer: { type: 'shadow' },
formatter: '{b}: {c}',
},
grid: {
@@ -92,48 +106,34 @@
},
xAxis: {
type: 'value',
- splitLine: {
- lineStyle: {
- color: '#E5E5E5',
- },
- },
- axisLabel: {
- color: '#35455aa6',
- },
+ splitLine: { lineStyle: { color: '#E5E5E5' } },
+ axisLabel: { color: '#7C8091',fontSize:'1.2rem' },
boundaryGap: [0, 0.01],
},
yAxis: {
type: 'category',
- data: optionData.yAxisData, // 使用处理后的分类数据
- axisLabel: {
- color: '#35455aa6',
- },
- axisLine: {
- lineStyle: {
- color: '#D1D1D1',
- },
- },
- axisTick: {
- show: false,
- },
+ data: optionData.yAxisData,
+ axisLabel: { color: '#7C8091' ,fontSize:'1.2rem'},
+ axisLine: { lineStyle: { color: '#D1D1D1' } },
+ axisTick: { show: false },
+ // 确保排序后的数据从上到下显示（最大值在顶部）
+ inverse: true,
+ show:optionData.seriesData?.length ? true : false
},
series: [
{
type: 'bar',
- data: optionData.seriesData, // 使用处理后的数值数据
+ data: optionData.seriesData,
itemStyle: {
- // 修改为根据索引返回不同颜色
- color: (params) => {
- if (params.dataIndex < 5) {
- // 前5条使用固定颜色
- return colors[params.dataIndex % colors.length];
- }
- // 第6条及之后保持原渐变
- return new echarts.graphic.LinearGradient(0, 0, 1, 0, [
- { offset: 0, color: '#93BAFF' },
- { offset: 1, color: '#C5DEFF' }
- ]);
- }
+ color: params => {
+ // 前6项使用固定颜色循环，之后使用渐变
+ return params.dataIndex < colors.length
+ ? colors[params.dataIndex]
+ : new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+ { offset: 0, color: '#93BAFF' },
+ { offset: 1, color: '#C5DEFF' },
+ ]);
+ },
},
barWidth: '30%',
label: {
@@ -145,16 +145,27 @@
],
};
- jcchart.value.setOption(option);
+ jcchart.value.setOption(option, true);
};
+
onMounted(() => {
getIndustryJobNumPieChart();
});
+onBeforeUnmount(() => {
+ if (jcchart.value) {
+ jcchart.value.dispose()
+ jcchart.value = null
+ }
+})
</script>
<style scoped lang="scss">
.machineNest {
-width: 100%;
+ width: 100%;
+ .custom-text {
+ font-size: 14px;
+ color: #7c8091;
+ }
.nestTop {
.card-title {
display: flex;
@@ -181,7 +192,7 @@
color: #7c8091;
}
.total-number {
- font-family: 'YouSheBiaoTiHei';
+ font-family: 'Source Han Sans CN';
font-weight: bold;
font-size: 32px;
color: #2a54ff;
@@ -210,7 +221,7 @@
color: #383838;
}
.status-value {
- font-family: 'YouSheBiaoTiHei';
+ font-family: 'Source Han Sans CN';
font-weight: bold;
font-size: 20px;
}
--
Gitblit v1.9.3