无人机管理后台前端(已迁走)
rain
2025-06-12 0082fa417fb2af9add3406bf05ab3e3e45890c34
src/views/wel/index.vue
@@ -36,8 +36,6 @@
                      <img :src="overviewImg1" alt="" />
                      <div class="cardtotal">
                        <p>工单统计占比</p>
                        <!-- <div class="total-number">{{ eventTotal }}</div>
                        <span>个</span> -->
                      </div>
                    </div>
@@ -45,9 +43,6 @@
                      <div class="status-item" v-for="(item, index) in eventTypeList" :key="index">
                        <div class="statusCon">
                          <div class="status-label">{{ item.name }}</div>
                          <!-- <div :style="{ color: item.color }" class="status-value">
                            {{ item.value }}<span>个</span>
                          </div> -->
                          <div class="status-value">{{ item.value }}<span>个</span></div>
                          <div class="ratio">
                            占比
@@ -68,7 +63,7 @@
              <!-- 飞行统计 -->
              <div class="flyOrder">
                <div class="fytitle">
                  <img src="@/assets/images/workbench/fy1.png" alt="" />
                   <img :src="fy1" alt="" />
                  <span>飞行统计</span>
                </div>
                <div class="flycenter">
@@ -115,7 +110,7 @@
import overviewImg3 from '@/assets/images/workbench/tc3.svg';
import overviewImg4 from '@/assets/images/workbench/tc4.svg';
import overviewImg5 from '@/assets/images/workbench/tc5.svg';
import fy1 from '@/assets/images/workbench/fy1.png';
import flyImg1 from '@/assets/images/workbench/fy2.svg';
import flyImg2 from '@/assets/images/workbench/fy3.svg';
import flyImg3 from '@/assets/images/workbench/fy4.svg';
@@ -217,7 +212,6 @@
  const data = {
    total: {
      title: '总计',
      figure: totalNum.toString(), // 动态计算总数
    },
    data: val.map(item => ({
@@ -226,7 +220,8 @@
      rate: item.rate,
    })),
  };
  const containerWidth = chart.value.clientWidth
  const isSmallScreen = containerWidth < 768 // 移动端判断
  const echartsOption = {
    color: ['#FF472F', '#FF7411', '#FFC300', '#0291A1'],
    tooltip: {
@@ -242,7 +237,7 @@
          border-radius: 0.4rem;
          font-size: 1.2rem;" class="tooltip-area">
          <p>${params.marker}${params.name}</p>
          <h4 style="margin-left: 3rem;">${params.data.rate || params.percent}%</h4>
          <h4 style="margin-left: 1rem;">${params.data.rate || params.percent}%</h4>
        </div>`;
      },
    },
@@ -278,27 +273,32 @@
            // 使用 b 样式标记包裹百分比数值
            return `{a|${params.name}}: {b|${params.data.rate}%}`;
          },
        fontSize: isSmallScreen ? '0.8rem' : '1.2rem',
         position: isSmallScreen ? 'outer' : 'outer',
          alignTo: 'labelLine',
          overflow: 'truncate',
           overflow: 'none', // 禁用省略号
          bleedMargin: 30, // 防止标签被截断
          rich: {
            a: {
              color: 'rgba(28, 31, 35, 0.80)',
              fontSize: '1.2rem',
              fontSize: isSmallScreen ? '1rem' : '1.2rem',
            },
            b: {
              color: '#1C1F23',
              fontSize: '1.4rem',
              fontWeight: 'bold', // 确保加粗
              color: '#1C1F23',
               fontSize: isSmallScreen ? '1rem' : '1.3rem',
              fontWeight: 'bold',
            },
          },
        },
        labelLine: {
          show: true,
          length: 5, // 调整引导线长度
          length2: 15,
          length: 3, // 调整引导线长度
          length2: 5,
          lineStyle: {
            cap: 'round',
          },
          minTurnAngle: 45, // 防止小角度重叠
        },
        data: data.data,
      },
@@ -366,6 +366,7 @@
      itemWidth: 15,
      itemHeight: 10,
      itemGap: 25,
       fontSize:'1.2rem'
    },
    xAxis: {
      type: 'category',
@@ -386,6 +387,7 @@
        name: '单位:万套',
        nameTextStyle: {
          color: '#383838',
          fontSize:'1.2rem'
        },
        min: 1,
        logBase: 3,