From bec7efb74cb9350dc720fb1ea641f06d7316b4dc Mon Sep 17 00:00:00 2001
From: 张含笑 <zhx18749296735@163.com>
Date: Fri, 09 May 2025 16:24:41 +0800
Subject: [PATCH] 个人工作台
---
src/views/wel/components/flyratio.vue | 51 ++++++++++++++++++++++++++++++++++++++++-----------
1 files changed, 40 insertions(+), 11 deletions(-)
diff --git a/src/views/wel/components/flyratio.vue b/src/views/wel/components/flyratio.vue
index 08cb6fc..00c6fbe 100644
--- a/src/views/wel/components/flyratio.vue
+++ b/src/views/wel/components/flyratio.vue
@@ -4,7 +4,7 @@
<div class="card-title">
<img :src="jc1" alt="" />
<div class="cardtotal">
- <p>机巢事件数量排名</p>
+ <p>机巢工单数量排名</p>
<!-- <div class="total-number">111</div>
<span>个</span> -->
</div>
@@ -36,21 +36,41 @@
const echartsRef = ref(null);
let { chart: jcchart } = useEchartsResize(echartsRef);
const jcOrder = ref([]);
+const props = defineProps({
+ dateSelect: {
+ type: String,
+ },
+});
+const params = reactive({
+ date_enum: props.dateSelect,
+});
// 获取机巢事件数据
-const getIndustryJobNumPieChart = value => {
- industryJobNumPieChart(value).then(res => {
- console.log('ppp', res);
-
+const getIndustryJobNumPieChart = () => {
+ industryJobNumPieChart(params).then(res => {
const resList = res?.data?.data || [];
jcOrder.value = resList;
pieInit(resList);
});
};
+watch(
+ () => props.dateSelect,
+ newVal => {
+ params.date_enum = newVal;
+ getIndustryJobNumPieChart();
+ },
+ { immediate: true }
+);
const pieInit = resList => {
// 处理数据，过滤掉没有name的项
const validData = resList.filter(item => item.name);
-
- // 准备图表数据
+ const colors = [
+ '#F87E04',
+ '#FFC400',
+ '#08BC44',
+ '#07B5FF',
+ '#A98DFF',
+ '#9ABFFF'
+];
const optionData = {
yAxisData: validData.map(item => item.name),
seriesData: validData.map(item => item.value),
@@ -102,10 +122,18 @@
type: 'bar',
data: optionData.seriesData, // 使用处理后的数值数据
itemStyle: {
- color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+ // 修改为根据索引返回不同颜色
+ 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' },
- ]),
+ { offset: 1, color: '#C5DEFF' }
+ ]);
+ }
},
barWidth: '30%',
label: {
@@ -120,12 +148,13 @@
jcchart.value.setOption(option);
};
onMounted(() => {
- getIndustryJobNumPieChart({ date_enum: 'CURRENT_WEEK' });
+ getIndustryJobNumPieChart();
});
</script>
<style scoped lang="scss">
.machineNest {
+width: 100%;
.nestTop {
.card-title {
display: flex;
--
Gitblit v1.9.3