feat:空状态

张含笑

2025-05-21 42f0fa1798dee91bd9cebff446e99ce61d60e425

feat:空状态

 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;
        }

 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 {