feat:工作台页面优化

张含笑

2025-07-17 704b0dd87ef7b30f53cd434c2225fa245671d82c

feat:工作台页面优化

 src/views/wel/components/calendarBox.vue

@@ -78,8 +78,6 @@

const getJobEventBar = () => {
  getCalen(params.value).then(res => {
    console.log('re', res.data);

    if (res.data.code !== 0) return;
    const a = res.data.data;
    const filteredData = {};
@@ -151,9 +149,10 @@
    //   }
    // }
    .el-calendar-table .el-calendar-day {
      height: 78px !important;
   
       height: pxToVh(91) !important;
    }

 
    // 选中日期样式
    .el-calendar-table td.is-selected {
      background-color: #f0f7ff;

 src/views/wel/components/flightStatistics.vue

@@ -3,7 +3,7 @@
    <div class="fytitle">
      <div class="cardtotal">
        <p>飞行统计</p>
        <img @click="refresh" src="/src/assets/images/workbench/st1.png" alt="" />
        <img @click="refresh" src="/src/assets/images/workbench/st1.svg" alt="" />
      </div>
      <div class="time-card">
        <div
@@ -394,7 +394,7 @@
    }

    .lineChart {
      height: 209px;
     height: pxToVh(233) ;
      width: 100%;

      .lineBox {

 src/views/wel/components/flyratio.vue

@@ -5,7 +5,7 @@
       
        <div class="cardtotal">
          <p>机巢工单数量排名</p>
           <img @click="refresh" src="/src/assets/images/workbench/st1.png" alt="" />
           <img @click="refresh" src="/src/assets/images/workbench/st1.svg" alt="" />
        </div>
         <div class="time-card">
        <div
@@ -130,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,
@@ -155,6 +156,7 @@
        type: 'bar',
        data: optionData.seriesData,
        itemStyle: {
        barBorderRadius: [0, 20, 20, 0],
          color: params => {
            // 前6项使用固定颜色循环，之后使用渐变
            return params.dataIndex < colors.length
@@ -170,6 +172,11 @@
          show: true,
          position: 'right',
          formatter: '{c}',
          itemStyle:{
             fontSize: '1.4rem',
             color: '#414243',
             
          }
        },
      },
    ],
@@ -210,7 +217,7 @@
    .cardtotal {
      display: flex;
      align-items: center;
      margin-left: 9px;
   
      img {
        width: 17px;
        height: 17px;

 src/views/wel/components/taskOutcome.vue

@@ -5,7 +5,7 @@
        <p>任务成果</p>
        <span class="total-number">1856</span>
        <p>个</p>
        <img @click="refresh" src="/src/assets/images/workbench/st1.png" alt="" />
        <img @click="refresh" src="/src/assets/images/workbench/st1.svg" alt="" />
      </div>
      <div class="time-card">
        <div
@@ -38,7 +38,12 @@
  start_date: undefined,
});
const dateSelect = ref('YEAR');

const refresh = () => {
  params.value.date_enum = 'YEAR';
  checked.value = 'YEAR';
  dateSelect.value = 'YEAR';
  getBarChartData(params.value);
};
let timeClick = (item, index) => {
  checked.value = item;
  params.value.date_enum = item;
@@ -54,7 +59,7 @@
  legend: {
    itemWidth: 14,
    itemHeight: 8,
    data: ['待处理', '处理中', '已完成', '事件完成率'], // 确保包含所有系列名称
    data: ['待处理', '处理中', '已完成'], // 确保包含所有系列名称
    top: '-1%',
    textStyle: {
      color: '#383838',
@@ -255,7 +260,8 @@
}
.chart {
  width: 98%;
  height: 265px;
  // height: 265px;
   height: pxToVh(285);
  padding-left: 10px;
  margin-top: 27px;
}