个人工作台

张含笑

2025-05-09 bec7efb74cb9350dc720fb1ea641f06d7316b4dc

 src/views/wel/components/flyratio.vue

@@ -4,7 +4,7 @@
      <div class="card-title">
        <img :src="jc1" alt="" />
        <div class="cardtotal">
          <p>机巢事件数量排名</p>
          <p>机巢工单数量排名</p>
          <!-- <div class="total-number">111</div>
          <span>个</span> -->
        </div>
@@ -36,21 +36,41 @@
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 colors = [
  '#F87E04',  
  '#FFC400',  
  '#08BC44', 
  '#07B5FF',  
  '#A98DFF',  
  '#9ABFFF'  
];
  const optionData = {
    yAxisData: validData.map(item => item.name),
    seriesData: validData.map(item => item.value),
@@ -102,10 +122,18 @@
        type: 'bar',
        data: optionData.seriesData, // 使用处理后的数值数据
        itemStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
          // 修改为根据索引返回不同颜色
        color: (params) => {
          if (params.dataIndex < 5) {
            // 前5条使用固定颜色
            return colors[params.dataIndex % colors.length];
          }
          // 第6条及之后保持原渐变
          return new echarts.graphic.LinearGradient(0, 0, 1, 0, [
            { offset: 0, color: '#93BAFF' },
            { offset: 1, color: '#C5DEFF' },
          ]),
            { offset: 1, color: '#C5DEFF' }
          ]);
        }
        },
        barWidth: '30%',
        label: {
@@ -120,12 +148,13 @@
  jcchart.value.setOption(option);
};
onMounted(() => {
  getIndustryJobNumPieChart({ date_enum: 'CURRENT_WEEK' });
  getIndustryJobNumPieChart();
});
</script>

<style scoped lang="scss">
.machineNest {
width: 100%;
  .nestTop {
    .card-title {
      display: flex;