Merge branch 'master' into jiangwu

shuishen

2025-05-19 2dfc8dc4bcd3d3cd4aed1b6054e073e140eba9c8

 src/views/wel/components/flyratio.vue

@@ -4,25 +4,13 @@
      <div class="card-title">
        <img :src="jc1" alt="" />
        <div class="cardtotal">
          <p>机巢事件数量排名</p>
          <!-- <div class="total-number">111</div>
          <span>个</span> -->
          <p>机巢工单数量排名</p>
        </div>
      </div>
      <!-- <div class="status-grid">
        <div v-for="(item, index) in jcOrder" :key="index" class="status-item">
          <img :src="jc2" alt="" />
          <div>
            <div class="status-label">{{ item.name }}</div>
            <div :style="{ color: '#387FC8' }" class="status-value">
              {{ item.value }}
            </div>
          </div>
        </div>
      </div> -->
    </div>
    <div class="nestCenter">
      <div class="chart" ref="echartsRef"></div>
      <div class="chart" ref="echartsRef" ></div>
   
    </div>
  </div>
</template>
@@ -36,32 +24,49 @@
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 validData = resList.filter(item => item.name).sort((a, b) => b.value - a.value); // 从大到小排序
  const colors = [
    '#F87E04', // 橙色
    '#FFC400', // 黄色
    '#08BC44', // 绿色
    '#07B5FF', // 蓝色
    '#A98DFF', // 紫色
    '#9ABFFF', // 浅蓝
  ];

  // 准备图表数据
  const optionData = {
    yAxisData: validData.map(item => item.name),
    seriesData: validData.map(item => item.value),
  };

  const option = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow',
      },
      axisPointer: { type: 'shadow' },
      formatter: '{b}: {c}',
    },
    grid: {
@@ -72,40 +77,33 @@
    },
    xAxis: {
      type: 'value',
      splitLine: {
        lineStyle: {
          color: '#E5E5E5',
        },
      },
      axisLabel: {
        color: '#35455aa6',
      },
      splitLine: { lineStyle: { color: '#E5E5E5' } },
      axisLabel: { color: '#7C8091' },
      boundaryGap: [0, 0.01],
    },
    yAxis: {
      type: 'category',
      data: optionData.yAxisData, // 使用处理后的分类数据
      axisLabel: {
        color: '#35455aa6',
      },
      axisLine: {
        lineStyle: {
          color: '#D1D1D1',
        },
      },
      axisTick: {
        show: false,
      },
      data: optionData.yAxisData,
      axisLabel: { color: '#7C8091' },
      axisLine: { lineStyle: { color: '#D1D1D1' } },
      axisTick: { show: false },
      // 4. 确保排序后的数据从上到下显示（最大值在顶部）
      inverse: true,
    },
    series: [
      {
        type: 'bar',
        data: optionData.seriesData, // 使用处理后的数值数据
        data: optionData.seriesData,
        itemStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
            { offset: 0, color: '#93BAFF' },
            { offset: 1, color: '#C5DEFF' },
          ]),
          color: params => {
            // 前6项使用固定颜色循环，之后使用渐变
            return params.dataIndex < colors.length
              ? colors[params.dataIndex]
              : new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                  { offset: 0, color: '#93BAFF' },
                  { offset: 1, color: '#C5DEFF' },
                ]);
          },
        },
        barWidth: '30%',
        label: {
@@ -117,15 +115,22 @@
    ],
  };

  jcchart.value.setOption(option);
  // 5. 设置图表选项
  jcchart.value.setOption(option, true);
};
onMounted(() => {
  getIndustryJobNumPieChart({ date_enum: 'CURRENT_WEEK' });
  getIndustryJobNumPieChart();
  
});
</script>

<style scoped lang="scss">
.machineNest {
  width: 100%;
    .custom-text {
  font-size: 14px;
color: #7C8091;
  }
  .nestTop {
    .card-title {
      display: flex;
@@ -152,7 +157,7 @@
        color: #7c8091;
      }
      .total-number {
        font-family: 'YouSheBiaoTiHei';
        font-family: 'Source Han Sans CN';
        font-weight: bold;
        font-size: 32px;
        color: #2a54ff;
@@ -181,7 +186,7 @@
          color: #383838;
        }
        .status-value {
          font-family: 'YouSheBiaoTiHei';
           font-family: 'Source Han Sans CN';
          font-weight: bold;
          font-size: 20px;
        }