feat:日历去掉今日

张含笑

2025-06-10 e4c7bca105e64c047fbcd6bbb53ff5d32b0c5fd6

 src/views/wel/components/flyratio.vue

@@ -9,8 +9,7 @@
      </div>
    </div>
    <div class="nestCenter">
      <div class="chart" ref="echartsRef" ></div>
   
      <div class="chart" ref="echartsRef"></div>
    </div>
  </div>
</template>
@@ -21,6 +20,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 +33,26 @@
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);
     nextTick(() => {
        initChart()
        pieInit(resList)
      })
  });
};
watch(
@@ -49,7 +64,9 @@
  { 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', // 黄色
@@ -63,7 +80,19 @@
    yAxisData: validData.map(item => item.name),
    seriesData: validData.map(item => item.value),
  };

  
  const option = {
    title: {
      text: resList.length  ? '' :'暂无数据',
      left: 'center',
      top: 'center',
      textStyle: {
        color: '#999',
        fontSize: '1.6rem',
        fontWeight: 'normal'
      }
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: { type: 'shadow' },
@@ -78,17 +107,18 @@
    xAxis: {
      type: 'value',
      splitLine: { lineStyle: { color: '#E5E5E5' } },
      axisLabel: { color: '#7C8091' },
      axisLabel: { color: '#7C8091',fontSize:'1.2rem' },
      boundaryGap: [0, 0.01],
    },
    yAxis: {
      type: 'category',
      data: optionData.yAxisData,
      axisLabel: { color: '#7C8091' },
      axisLabel: { color: '#7C8091' ,fontSize:'1.2rem'},
      axisLine: { lineStyle: { color: '#D1D1D1' } },
      axisTick: { show: false },
      // 4. 确保排序后的数据从上到下显示（最大值在顶部）
      // 确保排序后的数据从上到下显示（最大值在顶部）
      inverse: true,
      show:optionData.seriesData?.length  ? true : false
    },
    series: [
      {
@@ -115,21 +145,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 +221,7 @@
          color: #383838;
        }
        .status-value {
           font-family: 'Source Han Sans CN';
          font-family: 'Source Han Sans CN';
          font-weight: bold;
          font-size: 20px;
        }