feat: 名称修改

罗广辉

2025-10-11 02409bfbe15f22fc3b5dccadabfd860a660a49d9

 src/views/wel/components/flyratio.vue

@@ -2,10 +2,22 @@
  <div class="machineNest">
    <div class="nestTop">
      <div class="card-title">
        <img :src="jc1" alt="" />
       
        <div class="cardtotal">
          <p>机巢工单数量排名</p>
           <img @click="refresh" src="/src/assets/images/workbench/st1.svg" alt="" />
        </div>
         <div class="time-card">
        <div
          class="card-item"
          :class="item === checked ? 'active' : ''"
          v-for="(item, index) in timeListEnum"
          :key="index"
          @click="timeClick(item, index)"
        >
          {{ timeListStr[index] }}
        </div>
      </div>
      </div>
    </div>
    <div class="nestCenter">
@@ -21,7 +33,16 @@
import jc2 from '@/assets/images/workbench/jc2.png';
import { industryJobNumPieChart } from '@/api/home/index';
import { nextTick } from 'vue';

let checked = ref('CURRENT_YEAR');
let timeListStr = ['本周', '本月', '本年'];
let timeListEnum = ['CURRENT_WEEK', 'CURRENT_MONTH', 'CURRENT_YEAR'];
const params = ref({
  date_enum: 'CURRENT_YEAR',
  device_sn: '',
  end_date: undefined,
  start_date: undefined,
});
const dateSelect = ref('CURRENT_YEAR');
const echartsRef = ref(null);
let { chart: jcchart } = useEchartsResize(echartsRef);
const jcOrder = ref([]);
@@ -30,9 +51,18 @@
    type: String,
  },
});
const params = reactive({
  date_enum: props.dateSelect,
});
const refresh = () => {
  // params.value.date_enum = 'CURRENT_YEAR';
  // checked.value = 'CURRENT_YEAR';
  // dateSelect.value = 'CURRENT_YEAR';
getIndustryJobNumPieChart();
};
let timeClick = (item, index) => {
  checked.value = item;
  params.value.date_enum = item;
  dateSelect.value = item;
getIndustryJobNumPieChart();
};
// 空数据计算
const isEmptyData = computed(() => {
  return jcOrder.value.length === 0 ||
@@ -46,15 +76,13 @@
}
// 获取机巢事件数据
const getIndustryJobNumPieChart = () => {
  industryJobNumPieChart(params).then(res => {
  industryJobNumPieChart(params.value).then(res => {
    const resList = res?.data?.data || [];
    jcOrder.value = resList;
    if (resList.length > 0) {
      nextTick(() => {
     nextTick(() => {
        initChart()
        pieInit(resList)
      })
    }
  });
};
watch(
@@ -66,7 +94,8 @@
  { immediate: true }
);
const pieInit = resList => {
if (!jcchart.value || !resList?.length) return

// if (!jcchart.value || !resList?.length) return
  const validData = resList?.filter(item => item.name).sort((a, b) => b.value - a.value); // 从大到小排序
  const colors = [
    '#F87E04', // 橙色
@@ -81,9 +110,11 @@
    yAxisData: validData.map(item => item.name),
    seriesData: validData.map(item => item.value),
  };

  
  const option = {
    title: {
      text: optionData.seriesData?.length  ? '' :'暂无数据',
      text: resList.length  ? '' :'暂无数据',
      left: 'center',
      top: 'center',
      textStyle: {
@@ -99,21 +130,22 @@
    },
    grid: {
      left: '3%',
      right: '4%',
      right: '3%',
      bottom: '3%',
         top: '-3%', // 添加顶部间距
      containLabel: true,
    },
    xAxis: {
      type: 'value',
      splitLine: { lineStyle: { color: '#E5E5E5' } },
      axisLabel: { color: '#7C8091',fontSize:'1.2rem' },
      splitLine: { lineStyle: { color: '#E5E5E5' },show:false },
      axisLabel: { color: '#7C8091',fontSize:'1.2rem',show:false },
      boundaryGap: [0, 0.01],
    },
    yAxis: {
      type: 'category',
      data: optionData.yAxisData,
      axisLabel: { color: '#7C8091' ,fontSize:'1.2rem'},
      axisLine: { lineStyle: { color: '#D1D1D1' } },
      axisLabel: { color: '#7C8091' ,fontSize:'1.2rem',},
      axisLine: { lineStyle: { color: '#D1D1D1' } ,show:false},
      axisTick: { show: false },
      // 确保排序后的数据从上到下显示（最大值在顶部）
      inverse: true,
@@ -124,6 +156,7 @@
        type: 'bar',
        data: optionData.seriesData,
        itemStyle: {
        barBorderRadius: [0, 20, 20, 0],
          color: params => {
            // 前6项使用固定颜色循环，之后使用渐变
            return params.dataIndex < colors.length
@@ -139,6 +172,11 @@
          show: true,
          position: 'right',
          formatter: '{c}',
          itemStyle:{
             fontSize: '1.4rem',
             color: '#414243',
             
          }
        },
      },
    ],
@@ -160,22 +198,58 @@

<style scoped lang="scss">
.machineNest {
  width: 100%;
  width: 93%;
  margin-left: 10px;
  height: pxToVh(282);
    border-radius: 8px 8px 8px 8px;
  padding: 4px 14px 0 15px;
  background: #ffffff !important;
  .custom-text {
    font-size: 14px;
    color: #7c8091;
  }
  .nestTop {
    .card-title {
   .card-title {
    display: flex;
    margin-bottom: 10px;
    align-items: center;
    justify-content: space-between;
    .cardtotal {
      display: flex;
      margin-left: 57px;
      margin-bottom: 15px;
      align-items: center;
   
      img {
        width: 36px;
        height: 40px;
        width: 17px;
        height: 17px;
        margin-left: 6px;
        cursor: pointer;
      }
      p {
        font-weight: bold;
        font-size: 14px;
        color: #363636;
      }

      span {
        font-weight: 400;
        font-size: 14px;
        color: #7c8091;
      }

      .total-number {
        font-family: 'Source Han Sans CN';

        font-weight: bold;
        font-size: 32px;
        color: #2a54ff;
      }
    }

    img {
      width: 36px;
      height: 40px;
    }
  }
    .cardtotal {
      display: flex;
      align-items: center;
@@ -229,11 +303,51 @@
  }
  .nestCenter {
    width: 100%;
    height: 600px;
 
    height: pxToVh(226);
    .chart {
      width: 100%;
      height: 100%;
    }
  }
}
.time-card {
  text-align: center;
  // height: 30px;
  height: pxToVh(30);
  background: #ffffff;

  border: 1px solid #e5e5e5;
  font-weight: 400;
  font-size: 14px;
  color: #7c8091;
  display: flex;
  width: 282px;
  margin-left: 15px;
  border-radius: 4px;

  .card-item {
    width: 94px;
    height: 100%;
    line-height: 28px;
    cursor: pointer;
    font-family: 'Source Han Sans CN';
    font-weight: 400;
    font-size: 14px;
    color: #7c8091;
  }

  .card-item:first-child {
    border-right: 1px solid #e5e5e5;
  }

  .card-item:nth-child(2) {
    border-right: 1px solid #e5e5e5;
  }

  .card-item.active {
    color: #1441ff;
    border: 1px solid #1c5cff;
  }
}
</style>