From 02409bfbe15f22fc3b5dccadabfd860a660a49d9 Mon Sep 17 00:00:00 2001
From: 罗广辉 <guanghui.luo@foxmail.com>
Date: Sat, 11 Oct 2025 10:37:14 +0800
Subject: [PATCH] feat: 名称修改
---
src/views/wel/components/flyratio.vue | 180 +++++++++++++++++++++++++++++++++++++++++++++++++----------
1 files changed, 149 insertions(+), 31 deletions(-)
diff --git a/src/views/wel/components/flyratio.vue b/src/views/wel/components/flyratio.vue
index fcdc2ca..1488c6a 100644
--- a/src/views/wel/components/flyratio.vue
+++ b/src/views/wel/components/flyratio.vue
@@ -2,21 +2,26 @@
<div class="machineNest">
<div class="nestTop">
<div class="card-title">
- <img :src="jc1" alt="" />
+
<div class="cardtotal">
<p>机巢工单数量排名</p>
+ <img @click="refresh" src="/src/assets/images/workbench/st1.svg" alt="" />
</div>
+ <div class="time-card">
+ <div
+ class="card-item"
+ :class="item === checked ? 'active' : ''"
+ v-for="(item, index) in timeListEnum"
+ :key="index"
+ @click="timeClick(item, index)"
+ >
+ {{ timeListStr[index] }}
+ </div>
+ </div>
</div>
</div>
<div class="nestCenter">
- <div class="chart" ref="echartsRef" v-if="!isEmptyData"></div>
- <div v-else>
- <el-empty>
- <template #description>
- <span class="custom-text">暂无数据</span>
- </template>
- </el-empty>
- </div>
+ <div class="chart" ref="echartsRef"></div>
</div>
</div>
</template>
@@ -28,7 +33,16 @@
import jc2 from '@/assets/images/workbench/jc2.png';
import { industryJobNumPieChart } from '@/api/home/index';
import { nextTick } from 'vue';
-
+let checked = ref('CURRENT_YEAR');
+let timeListStr = ['本周', '本月', '本年'];
+let timeListEnum = ['CURRENT_WEEK', 'CURRENT_MONTH', 'CURRENT_YEAR'];
+const params = ref({
+ date_enum: 'CURRENT_YEAR',
+ device_sn: '',
+ end_date: undefined,
+ start_date: undefined,
+});
+const dateSelect = ref('CURRENT_YEAR');
const echartsRef = ref(null);
let { chart: jcchart } = useEchartsResize(echartsRef);
const jcOrder = ref([]);
@@ -37,12 +51,21 @@
type: String,
},
});
-const params = reactive({
- date_enum: props.dateSelect,
-});
+const refresh = () => {
+ // params.value.date_enum = 'CURRENT_YEAR';
+ // checked.value = 'CURRENT_YEAR';
+ // dateSelect.value = 'CURRENT_YEAR';
+getIndustryJobNumPieChart();
+};
+let timeClick = (item, index) => {
+ checked.value = item;
+ params.value.date_enum = item;
+ dateSelect.value = item;
+getIndustryJobNumPieChart();
+};
// 空数据计算
const isEmptyData = computed(() => {
- return jcOrder.value.length === 0 ||
+ return jcOrder.value.length === 0 ||
jcOrder.value.every(item => !item.name || item.value === 0)
})
// 图表初始化
@@ -53,15 +76,13 @@
}
// 获取机巢事件数据
const getIndustryJobNumPieChart = () => {
- industryJobNumPieChart(params).then(res => {
+ industryJobNumPieChart(params.value).then(res => {
const resList = res?.data?.data || [];
jcOrder.value = resList;
- if (resList.length > 0) {
- nextTick(() => {
+ nextTick(() => {
initChart()
pieInit(resList)
})
- }
});
};
watch(
@@ -73,7 +94,8 @@
{ immediate: true }
);
const pieInit = resList => {
-if (!jcchart.value || !resList?.length) return
+
+// if (!jcchart.value || !resList?.length) return
const validData = resList?.filter(item => item.name).sort((a, b) => b.value - a.value); // 从大到小排序
const colors = [
'#F87E04', // 橙色
@@ -88,7 +110,19 @@
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' },
@@ -96,30 +130,33 @@
},
grid: {
left: '3%',
- right: '4%',
+ right: '3%',
bottom: '3%',
+ top: '-3%', // 添加顶部间距
containLabel: true,
},
xAxis: {
type: 'value',
- splitLine: { lineStyle: { color: '#E5E5E5' } },
- axisLabel: { color: '#7C8091' },
+ 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' },
- axisLine: { lineStyle: { color: '#D1D1D1' } },
+ axisLabel: { color: '#7C8091' ,fontSize:'1.2rem',},
+ axisLine: { lineStyle: { color: '#D1D1D1' } ,show:false},
axisTick: { show: false },
// 确保排序后的数据从上到下显示（最大值在顶部）
inverse: true,
+ show:optionData.seriesData?.length ? true : false
},
series: [
{
type: 'bar',
data: optionData.seriesData,
itemStyle: {
+ barBorderRadius: [0, 20, 20, 0],
color: params => {
// 前6项使用固定颜色循环，之后使用渐变
return params.dataIndex < colors.length
@@ -135,6 +172,11 @@
show: true,
position: 'right',
formatter: '{c}',
+ itemStyle:{
+ fontSize: '1.4rem',
+ color: '#414243',
+
+ }
},
},
],
@@ -156,22 +198,58 @@
<style scoped lang="scss">
.machineNest {
- width: 100%;
+ width: 93%;
+ margin-left: 10px;
+ height: pxToVh(282);
+ border-radius: 8px 8px 8px 8px;
+ padding: 4px 14px 0 15px;
+ background: #ffffff !important;
.custom-text {
font-size: 14px;
color: #7c8091;
}
.nestTop {
- .card-title {
+ .card-title {
+ display: flex;
+ margin-bottom: 10px;
+ align-items: center;
+ justify-content: space-between;
+ .cardtotal {
display: flex;
- margin-left: 57px;
- margin-bottom: 15px;
align-items: center;
+
img {
- width: 36px;
- height: 40px;
+ width: 17px;
+ height: 17px;
+ margin-left: 6px;
+ cursor: pointer;
+ }
+ p {
+ font-weight: bold;
+ font-size: 14px;
+ color: #363636;
+ }
+
+ span {
+ font-weight: 400;
+ font-size: 14px;
+ color: #7c8091;
+ }
+
+ .total-number {
+ font-family: 'Source Han Sans CN';
+
+ font-weight: bold;
+ font-size: 32px;
+ color: #2a54ff;
}
}
+
+ img {
+ width: 36px;
+ height: 40px;
+ }
+ }
.cardtotal {
display: flex;
align-items: center;
@@ -225,11 +303,51 @@
}
.nestCenter {
width: 100%;
- height: 600px;
+
+ height: pxToVh(226);
.chart {
width: 100%;
height: 100%;
}
}
}
+.time-card {
+ text-align: center;
+ // height: 30px;
+ height: pxToVh(30);
+ background: #ffffff;
+
+ border: 1px solid #e5e5e5;
+ font-weight: 400;
+ font-size: 14px;
+ color: #7c8091;
+ display: flex;
+ width: 282px;
+ margin-left: 15px;
+ border-radius: 4px;
+
+ .card-item {
+ width: 94px;
+ height: 100%;
+ line-height: 28px;
+ cursor: pointer;
+ font-family: 'Source Han Sans CN';
+ font-weight: 400;
+ font-size: 14px;
+ color: #7c8091;
+ }
+
+ .card-item:first-child {
+ border-right: 1px solid #e5e5e5;
+ }
+
+ .card-item:nth-child(2) {
+ border-right: 1px solid #e5e5e5;
+ }
+
+ .card-item.active {
+ color: #1441ff;
+ border: 1px solid #1c5cff;
+ }
+}
</style>
--
Gitblit v1.9.3