feat:图表适配，修改任务管理图表的大小

张含笑

2025-05-29 cfb38defe43a3c3e4d42a95e0128e08a7908490f

feat:图表适配，修改任务管理图表的大小

 src/views/job/components/TaskIntermediateContent/TaskIntermediateContent.vue

@@ -242,7 +242,7 @@

<style lang="scss" scoped>
.task-intermediate-content {
    margin: 0 30px 16px 40px;
    margin: 0 20px 16px 10px;
    background-color: #ffffff;
    padding: 14px 18px;
    // 表格

 src/views/job/components/TaskTop/TaskEvent.vue

@@ -132,9 +132,9 @@

<style lang="scss" scoped>
.task-event {
    width: 554px;
width: 529px;
    height: 100%;
    margin-left: 14px;
    margin-left: 9px;
    background: #FFFFFF;
    border-radius: 8px 8px 8px 8px;
    .title {

 src/views/job/components/TaskTop/TaskIndustry.vue

@@ -101,11 +101,11 @@

<style lang="scss" scoped>
.task-industry {
    width: 288px;
width: 276px;
    height: 100%;
    background: #FFFFFF;
    border-radius: 8px 8px 8px 8px;
    margin-left: 14px;
    margin-left: 9px;
    .title {
        font-family: Segoe UI, Segoe UI;
        padding: 10px 0 10px 16px;

 src/views/job/components/TaskTop/TaskTime.vue

@@ -140,9 +140,9 @@

<style lang="scss" scoped>
.task-time {
    width: 554px;
    width: 529px;
    height: 100%;
    margin-left: 14px;
    margin-left: 9px;
    background: #FFFFFF;
    border-radius: 8px 8px 8px 8px;
    .title {

 src/views/job/components/TaskTop/TaskTop.vue

@@ -27,7 +27,7 @@
    position: relative;
    margin-bottom: 6px;
    .statistical-chart {
        margin-left: 40px;
        margin-left: 10px;
        margin-right: 40px;
        display: flex;
        width:100%;

 src/views/tickets/orderLog.vue

@@ -1381,6 +1381,9 @@
</script>

<style lang="scss" scoped>
:deep(.el-pagination .el-select ){
width: 128px !important;
}
.step-timer {
  position: absolute;
  left: 80%;

 src/views/wel/components/backlog.vue

@@ -315,8 +315,8 @@

      .status-indicator {
        margin-left: 3px;
        width: 16px;
        height: 16px;
        width: 1.6rem;
        height: 1.6rem;
        // border-radius: 50%;
        // flex-shrink: 0;
      }
@@ -367,7 +367,9 @@
        display: flex;
        align-items: center;
        margin-right: 42px;

img{
width: 15px;
height: 15px;}
        .todo-date {
          font-weight: 400;
          font-size: 14px;

 src/views/wel/components/flyratio.vue

@@ -88,7 +88,7 @@
      top: 'center',
      textStyle: {
        color: '#999',
        fontSize: 16,
        fontSize: '1.6rem',
        fontWeight: 'normal'
      }
    },
@@ -106,13 +106,13 @@
    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 },
      // 确保排序后的数据从上到下显示（最大值在顶部）

 src/views/wel/index.vue

@@ -235,14 +235,14 @@
      borderWidth: 0,
      formatter: params => {
        return `<div style="background-color: rgba($color: #FFFFFF, $alpha: 0.95);
          box-shadow: 0 4px 9px 0 rgba($color: #000000, $alpha: 0.1);
          padding:0 12px;
          box-shadow: 0 0.4rem 0.9rem 0 rgba($color: #000000, $alpha: 0.1);
          padding:0 1.2rem;
          display: flex;
          align-items: center;
          border-radius: 4px;
          font-size: 12px;" class="tooltip-area">
          border-radius: 0.4rem;
          font-size: 1.2rem;" class="tooltip-area">
          <p>${params.marker}${params.name}</p>
          <h4 style="margin-left: 30px;">${params.data.rate || params.percent}%</h4>
          <h4 style="margin-left: 3rem;">${params.data.rate || params.percent}%</h4>
        </div>`;
      },
    },
@@ -253,13 +253,13 @@
      text: data.total.title,
      textStyle: {
        color: 'rgba(28, 31, 35, 0.80)',
        fontSize: '12px',
        fontSize: '1.2rem',
        fontWeight: 'bold',
      },
      subtext: data.total.figure,
      subtextStyle: {
        color: '#1C1F23',
        fontSize: '20px',
        fontSize: '2rem',
        fontWeight: '600',
      },
      top: '40%',
@@ -283,11 +283,11 @@
          rich: {
            a: {
              color: 'rgba(28, 31, 35, 0.80)',
              fontSize: 12, // 建议去掉引号使用数字
              fontSize: '1.2rem', 
            },
            b: {
              color: '#1C1F23',
              fontSize: 14,
              fontSize: '1.4rem',
              fontWeight: 'bold', // 确保加粗
            },
          },
@@ -308,7 +308,7 @@
  chart.value.setOption(echartsOption);
};

// 柱状图
// 折线/柱状图
const lineCharts = bardata => {
  const categories = bardata?.map(item => item.name); // x轴类别
  const flight_distance = [];
@@ -377,7 +377,7 @@
      },
      axisLabel: {
        interval: 0,
        color: '#383838', // 直接配置颜色
        color: '#383838', 
      },
    },
    yAxis: [
@@ -509,7 +509,7 @@
</style>
<style scoped lang="scss">
.workbench {
  padding: 0px 20px 0 20px;
  padding: 0px 20px 0 10px;
  display: flex;
  justify-content: space-between;
}