From 42f0fa1798dee91bd9cebff446e99ce61d60e425 Mon Sep 17 00:00:00 2001
From: 张含笑 <zhx18749296735@163.com>
Date: Wed, 21 May 2025 14:07:43 +0800
Subject: [PATCH] feat:空状态
---
src/views/wel/components/statistics.vue | 57 ++++++++++++++++++----------
src/views/wel/components/flyratio.vue | 52 ++++++++++++++++++++-----
2 files changed, 78 insertions(+), 31 deletions(-)
diff --git a/src/views/wel/components/flyratio.vue b/src/views/wel/components/flyratio.vue
index 5eec008..fcdc2ca 100644
--- a/src/views/wel/components/flyratio.vue
+++ b/src/views/wel/components/flyratio.vue
@@ -9,8 +9,14 @@
</div>
</div>
<div class="nestCenter">
- <div class="chart" ref="echartsRef" ></div>
-
+ <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>
</div>
</template>
@@ -21,6 +27,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([]);
@@ -32,12 +40,28 @@
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);
+ if (resList.length > 0) {
+ nextTick(() => {
+ initChart()
+ pieInit(resList)
+ })
+ }
});
};
watch(
@@ -49,7 +73,8 @@
{ immediate: true }
);
const pieInit = resList => {
- const validData = resList.filter(item => item.name).sort((a, b) => b.value - a.value); // 从大到小排序
+if (!jcchart.value || !resList?.length) return
+ const validData = resList?.filter(item => item.name).sort((a, b) => b.value - a.value); // 从大到小排序
const colors = [
'#F87E04', // 橙色
'#FFC400', // 黄色
@@ -87,7 +112,7 @@
axisLabel: { color: '#7C8091' },
axisLine: { lineStyle: { color: '#D1D1D1' } },
axisTick: { show: false },
- // 4. 确保排序后的数据从上到下显示（最大值在顶部）
+ // 确保排序后的数据从上到下显示（最大值在顶部）
inverse: true,
},
series: [
@@ -115,21 +140,26 @@
],
};
- // 5. 设置图表选项
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%;
- .custom-text {
- font-size: 14px;
-color: #7C8091;
+ .custom-text {
+ font-size: 14px;
+ color: #7c8091;
}
.nestTop {
.card-title {
@@ -186,7 +216,7 @@
color: #383838;
}
.status-value {
- font-family: 'Source Han Sans CN';
+ font-family: 'Source Han Sans CN';
font-weight: bold;
font-size: 20px;
}
diff --git a/src/views/wel/components/statistics.vue b/src/views/wel/components/statistics.vue
index 3761b0c..bee9512 100644
--- a/src/views/wel/components/statistics.vue
+++ b/src/views/wel/components/statistics.vue
@@ -10,14 +10,14 @@
</div>
</div>
- <div class="grid-container">
+ <div class="grid-container" v-if="Object.keys(newtitleData).length > 0">
<div v-for="(item, index) in Object.keys(newtitleData)" :key="index" class="device-card">
<div class="device-title">
<img :src="test[item].img" :alt="newtitleData[item].name" />
<div class="itemcenter">
<div>{{ test[item]?.name || '--' }}</div>
<span class="shu">{{ newtitleData[item].total_num }}</span>
- <span>{{unitMap[test[item]?.name]}}</span>
+ <span>{{ unitMap[test[item]?.name] }}</span>
</div>
</div>
<div class="status-list">
@@ -39,7 +39,7 @@
<span class="label">{{ getStatusLabel(test[item]?.name, statusKey) }}</span>
<span class="count">
{{ newtitleData[item].status_map[statusKey] }}
- {{ unitMap[test[item]?.name]}}
+ {{ unitMap[test[item]?.name] }}
</span>
</div>
</template>
@@ -61,7 +61,7 @@
<span class="label">{{ getStatusLabel(test[item]?.name, statusKey) }}</span>
<span class="count">
{{ newtitleData[item].status_map[statusKey] }}
- {{ unitMap[test[item]?.name]}}
+ {{ unitMap[test[item]?.name] }}
</span>
</div>
</template>
@@ -103,13 +103,18 @@
}"
></span>
<span class="label">{{ getStatusLabel(test[item]?.name, statusIndex) }}</span>
- <span class="count"
- >{{ status }} {{ unitMap[test[item]?.name]}}</span
- >
+ <span class="count">{{ status }} {{ unitMap[test[item]?.name] }}</span>
</div>
</template>
</div>
</div>
+ </div>
+ <div class="grid-container" v-else>
+ <el-empty>
+ <template #description>
+ <span class="custom-text">暂无数据</span>
+ </template>
+ </el-empty>
</div>
</div>
</template>
@@ -248,7 +253,7 @@
const getStaticsList = () => {
getStatics(userInfo.value.detail.areaCode).then(res => {
- console.log('permission.value', permission.value);
+ // console.log('permission.value', permission.value);
// console.log('设备', res.data.data);
if (permission.value?.device_statistics_six) {
const { move_list, monitor_list, ...filteredData } = res.data.data;
@@ -267,12 +272,12 @@
};
const unitMap = {
- '无人机流量': '架',
- '无人机': '架',
- '机巢': '个',
- '机巢保险': '个',
- '监控设备': '个',
- '移动机巢': '个',
+ 无人机流量: '架',
+ 无人机: '架',
+ 机巢: '个',
+ 机巢保险: '个',
+ 监控设备: '个',
+ 移动机巢: '个',
};
watch(
() => [
@@ -310,7 +315,7 @@
font-weight: bold;
font-size: 16px;
color: #363636;
- font-family: 'Source Han Sans CN';
+ font-family: 'Source Han Sans CN';
}
img {
@@ -327,8 +332,20 @@
padding: 0 14px 0 21px;
// display: grid;
// grid-template-columns: repeat(4, 1fr);
+ height: 80px;
display: flex;
justify-content: space-around;
+ :deep(.el-empty ){
+ width: 60px;
+ height: 60px;
+ .el-empty__image{
+ width: 60px !important;
+ height: 60px !important;}
+ .custom-text {
+ font-size: 12px;
+ color: #7c8091;
+ }
+ }
.device-card {
display: flex;
align-items: center;
@@ -349,8 +366,8 @@
font-weight: 400;
font-size: 14px;
color: #343434;
- div{
- margin-top: 5px;
+ div {
+ margin-top: 5px;
}
.shu {
font-weight: bold;
@@ -358,7 +375,7 @@
color: #363636;
display: inline-block;
transform: skewX(-5deg);
- font-family: 'Source Han Sans CN';
+ font-family: 'Source Han Sans CN';
// font-size: calc(12px + 0.5vw);
margin-right: 2px;
}
@@ -433,8 +450,8 @@
color: #363636;
display: inline-block;
transform: skewX(-5deg);
- font-family: 'Source Han Sans CN';
- margin-right: 2px;
+ font-family: 'Source Han Sans CN';
+ margin-right: 2px;
}
span {
--
Gitblit v1.9.3