feat: 添加echartsResize hooks,添加ztzf组件样式

罗广辉

2025-04-13 898c836c57c22b9439321e96650f8a35b1cea917

feat: 添加echartsResize hooks,添加ztzf组件样式

 src/hooks/useEchartsResize.js

New file
@@ -0,0 +1,38 @@
import * as echarts from 'echarts'


/**
 * ECharts自适应容器大小Hook
 *
 * @param {Object} domRef - DOM元素引用对象，需包含value属性指向要挂载的DOM节点
 * @returns {Object} chart - 包含value属性的对象，value保存ECharts实例引用
 */
const useEchartsResize = (domRef) => {
    // 图表实例容器，用对象包装便于保持引用地址
    const chart = {value: null}

    // 窗口大小变化处理函数
    const resizeChart = () => {
        chart.value?.resize()
    }

    // 组件挂载后初始化逻辑
    onMounted(() => {
        if (!domRef.value) return
        // 初始化ECharts实例并注册resize监听
        chart.value = echarts.init(domRef.value)
        window.addEventListener('resize', resizeChart)
    })

    // 组件卸载前清理逻辑
    onBeforeUnmount(() => {
        // 移除监听并清理图表实例
        window.removeEventListener('resize', resizeChart)
        chart.value?.dispose()
        chart.value = null
    })

    return {chart}
}

export default useEchartsResize

 src/styles/element-ui.scss

@@ -60,60 +60,65 @@
.avue--detail .el-form-item {
  background-color: #fafafa;
}

// 查看按钮
.ztzf-view {
  width: 53px;
    height: 27px;
    background: #001f4e !important;
    border-radius: 0px 0px 0px 0px;
    border: 1px solid #51a8ff !important;
    font-size: 14px;
    color: #ffffff;
    text-align: center;
    line-height: 27px;
    cursor: pointer;
  height: 27px;
  background: #001f4e !important;
  border-radius: 0px 0px 0px 0px;
  border: 1px solid #51a8ff !important;
  font-size: 14px;
  color: #ffffff;
  text-align: center;
  line-height: 27px;
  cursor: pointer;
}

// table表格
.ztzf-table {
  .el-table__inner-wrapper:before {
        height: 0 !important;
    }
    .el-table .warning-row {
        --el-table-tr-bg-color: rgba(22, 43, 74, 0.79);
    }
    .el-table .warning-row::after {
        position: absolute;
        content: '';
        left: 0;
        width: 100%;
        border-bottom: 1px solid;
    height: 0 !important;
  }

        border-image: linear-gradient(
                90deg,
                rgba(25, 162, 255, 0) 10%,
                rgba(20, 125, 202, 1) 50%,
                rgba(25, 162, 255, 0) 90%
            )
            2 2 2 2;
    }
    .el-table .success-row {
        --el-table-tr-bg-color: #0b1d38;
    }
    .el-table .success-row::after {
        position: absolute;
        content: '';
        left: 0;
        width: 100%;
        border-bottom: 1px solid;
  .el-table .warning-row {
    --el-table-tr-bg-color: rgba(22, 43, 74, 0.79);
  }

        border-image: linear-gradient(
                90deg,
                rgba(25, 162, 255, 0) 10%,
                rgba(20, 125, 202, 1) 79%,
                rgba(25, 162, 255, 0) 90%
            )
            2 2 2 2;
    }
  .el-table .warning-row::after {
    position: absolute;
    content: '';
    left: 0;
    width: 100%;
    border-bottom: 1px solid;

    border-image: linear-gradient(
                    90deg,
                    rgba(25, 162, 255, 0) 10%,
                    rgba(20, 125, 202, 1) 50%,
                    rgba(25, 162, 255, 0) 90%
    ) 2 2 2 2;
  }

  .el-table .success-row {
    --el-table-tr-bg-color: #0b1d38;
  }

  .el-table .success-row::after {
    position: absolute;
    content: '';
    left: 0;
    width: 100%;
    border-bottom: 1px solid;

    border-image: linear-gradient(
                    90deg,
                    rgba(25, 162, 255, 0) 10%,
                    rgba(20, 125, 202, 1) 79%,
                    rgba(25, 162, 255, 0) 90%
    ) 2 2 2 2;
  }

  .el-table {
    color: #fff;
    --el-table-border-color: var(--el-border-color-lighter);
@@ -130,18 +135,21 @@
    --el-table-fixed-left-column: inset 10px 0 10px -10px rgba(0, 0, 0, 0.15);
    --el-table-fixed-right-column: inset -10px 0 10px -10px rgba(0, 0, 0, 0.15);
  }

  .el-table__header {
    width: 0 !important;
  }

  .el-table__body {
    border-collapse: collapse;
  }

  .el-table .el-table__cell {
    padding: 0 !important;
    text-align: center !important;
  }
  
  .el-table thead{

  .el-table thead {
    border-bottom: 1px solid !important;
    border: 1px solid !important;
    border-image: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1), rgba(255, 255, 255, 0)) 1 1 !important;
@@ -149,88 +157,116 @@
    background: #102441 !important;
  }
}
  // 分页

// 分页
.ztzf-pagination {

  .el-pagination {
    display: flex !important;
    justify-content: center !important;
}
.el-pagination button{
    background: center center no-repeat none !important;
    color: #8eb8ea !important;
}
.el-pager li{
    background: none !important;
    color: #8eb8ea !important;
}
.el-pager li.is-active {
    background: #021022 !important;
    border-radius: 0px 0px 0px 0px;
    border: 1px solid #1479ef;
    color: #c7e1ff !important;
}
.el-pagination__goto {
    color: #c7e1ff !important;
}
.el-pagination__classifier {
    color: #c7e1ff !important;
}
.el-pager .el-input__wrapper {
    background: #021022 !important;
    color: #c7e1ff !important;
    border: 1px solid #1479ef !important;
    z-index: 1;
}
.el-input__wrapper {
    background: #021022 !important;
    box-shadow: none !important;
    border: 1px solid #178bff;
    color: #fff !important;
}
.el-input__inner {
    color: #fff !important;
}
}


.ztzf-date-picker{
  box-shadow: none !important;
  background: rgba(0, 15, 34, 0.5);
  border: 1px solid #306fca;

  .el-input__wrapper {
    background-color: transparent;
    box-shadow: 0 0 0 1px #0070ff;

    &.is-focus {
      box-shadow: 0 0 0 1px #0070ff;
    }
  --text-color: #8eb8ea;
  --border: 1px solid #1479EF;
   button {
    background: center center no-repeat none !important;
    color: var(--text-color);
  }

  .el-range-input {
    background-color: transparent;
    color: #fff;
    height: 28px;

    &::placeholder {
      color: rgba(255, 255, 255, 0.6);
    }
  }

  .el-range-separator{
    color: #fff;
  }
}

.ztzf-select {
  .el-select__wrapper {
    background-color: transparent;
    box-shadow: none;
    border: 1px solid #306fca;
    border: var(--border);
  }

  .el-select__placeholder {
    color: #ffffff;
  }
  .el-pagination__total{
    color: var(--text-color);
  }

  .el-pager li {
    background: none !important;
    color: var(--text-color);

    &.is-active{
      background: #021022 !important;
      border-radius: 0;
      border: var(--border);
      color: var(--text-color);
    }
  }

  .el-pagination__goto {
    color: var(--text-color);
  }

  .el-pagination__classifier {
    color: var(--text-color);
  }

  .el-input__wrapper {
    background: #021022 !important;
    box-shadow: none !important;
    border: var(--border);
    color: #fff !important;
  }

  .el-input__inner {
    color: #fff !important;
  }
}

//时间日期选择器
.ztzf-date-picker {
  box-shadow: none !important;
  background: #012A50;
  border: 1px solid #51A8FF;

  .el-input__wrapper {
    box-shadow: none !important;

    &.is-focus {
      box-shadow: none !important;
    }
  }

  .el-range-input {
    color: #fff;

    &::placeholder {
      color: #8AC3FD;
    }
  }

  .el-range-separator {
    color: #ffffff;
  }
}

//下拉
.ztzf-select {
  .el-select__wrapper {
    background: #012A50;
    box-shadow: none !important;
    border: 1px solid #51A8FF;
  }

  .el-select__placeholder {
    &.is-transparent{
      color: #8AC3FD !important;
    }
    &.el-select__selected-item{
      color: #ffffff;
    }
  }
}

.ztzf-input{
  .el-input__wrapper{
    background: #012A50;
    box-shadow: none !important;
    border: 1px solid #51A8FF;

    .el-input__inner{
      color: #ffffff;
      &::placeholder {
        color: #8AC3FD;
      }
    }
  }
}

 src/views/Home/EventOverviewDetail/EventOverviewDetailLeft/EventDataAnalysis.vue

@@ -7,9 +7,10 @@
<script setup>
import { getEventIndustryData } from '@/api/home/event'
import * as echarts from 'echarts'
import useEchartsResize from '@/hooks/useEchartsResize'

const echartsRef = ref(null)
let chart = null
let { chart } = useEchartsResize(echartsRef)

const echartsOption = {
    tooltip: {
@@ -126,12 +127,10 @@
        })
    })
    echartsOption.series = seriesList
    chart.setOption(echartsOption)
    chart.value.setOption(echartsOption)
}

onMounted(() => {
    chart = echarts.init(echartsRef.value)
    window.addEventListener('resize', chart.resize)
    getData()
})
</script>

 src/views/Home/EventOverviewDetail/EventOverviewDetailLeft/EventTrendAnalysis.vue

@@ -7,9 +7,10 @@
<script setup>
import { getEventTrend } from '@/api/home/event'
import * as echarts from 'echarts'
import useEchartsResize from '@/hooks/useEchartsResize'

const echartsRef = ref(null)
let chart = null
let { chart } = useEchartsResize(echartsRef)

const echartsOption = {
    tooltip: {
@@ -102,12 +103,10 @@
    const list = res?.data?.data || []
    echartsOption.xAxis.data = list.map(item => item.name)
    echartsOption.series.data = list.map(item => item.value)
    chart.setOption(echartsOption)
    chart.value.setOption(echartsOption)
}

onMounted(() => {
    chart = echarts.init(echartsRef.value)
    window.addEventListener('resize', chart.resize)
    getData()
})
</script>

 src/views/Home/EventOverviewDetail/EventOverviewDetailRight.vue

@@ -90,6 +90,7 @@

            <div class="pagination">
                <el-pagination
                    class="ztzf-pagination"
                    background
                    v-model:current-page="params.current"
                    v-model:page-size="params.size"
@@ -450,13 +451,5 @@
    width: 100%;
    display: flex;
    justify-content: center;

    .el-pagination {
        --el-color-primary: #173da7;
        --el-pagination-button-bg-color: #131c35;
        --el-pagination-button-color: #ecf1ff;
        --el-disabled-bg-color: #131c35;
        --el-text-color-regular: #ecf1ff;
    }
}
</style>

 src/views/Home/HomeLeft/InspectionRaskDetails/InspectionRaskDetails.vue

@@ -1,7 +1,6 @@
<!-- 巡检任务详情 -->
<template>
    <common-title title="巡检任务情况" :style="{ marginLeft: pxToRem(14) }" @details="detailsFun">
    </common-title>
    <common-title title="巡检任务情况" :style="{ marginLeft: pxToRem(14) }" @details="detailsFun"></common-title>
    <div class="inspection-rask-details">
        <div class="inspection-num">
            <div class="total">
@@ -34,6 +33,7 @@
import { getJobNumBar, getJobStatistics, getTotalJobNum } from '@/api/home'
import dayjs from 'dayjs'
import InspectionRaskDetailsDialog from '@/views/Home/HomeLeft/InspectionRaskDetails/InspectionRaskDetailsDialog.vue'
import useEchartsResize from '@/hooks/useEchartsResize'
const currenDate = dayjs().format('YYYY-MM-DD')
const newTime = ref([currenDate, currenDate])
const list = ref([
@@ -107,14 +107,14 @@
        },
    },
}

// 是否展示巡检任务详情
const isShowDetailsDialog = ref(false)
const detailsFun = () => {	
const detailsFun = () => {
    isShowDetailsDialog.value = true
	
}

let chart = null
const chartRef = ref(null)
let { chart } = useEchartsResize(chartRef)

// TODAY,CURRENT_WEEK,CURRENT_MONTH,CURRENT_YEAR
const getData = (value, date_enum) => {
@@ -129,11 +129,10 @@
    getJobNumBar(params).then(res => {
        option.xAxis.data = res.data?.data.map(item => item.name)
        option.series.data = res.data?.data.map(item => item.value)
        chart.setOption(option)
        chart.value.setOption(option)
    })
}

const chartRef = ref(null)
const total = ref(0)
const jobStatistics = ref({
    planned_executions: 0,
@@ -144,11 +143,6 @@
})

onMounted(() => {
    chart = echarts.init(chartRef.value)
    // 监听窗口大小变化
    window.addEventListener('resize', () => {
        chart?.resize()
    })
    getTotalJobNum().then(res => {
        total.value = res.data?.data || 0
    })
@@ -162,12 +156,7 @@
    padding: 16px 16px;
    width: 390px;
    height: 414px;
    background: linear-gradient(
        270deg,
        rgba(31, 62, 122, 0) 0%,
        rgba(31, 62, 122, 0.35) 21%,
        #1f3e7a 100%
    );
    background: linear-gradient(270deg, rgba(31, 62, 122, 0) 0%, rgba(31, 62, 122, 0.35) 21%, #1f3e7a 100%);
    border-radius: 0px 0px 0px 0px;
    opacity: 0.85;

@@ -201,22 +190,22 @@
            height: 110px;
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            grid-template-rows: repeat(1    , 30px); // 设置每行高度
            grid-template-rows: repeat(1, 30px); // 设置每行高度
            gap: 10px 0; // 调整行间距
            align-content: center;
			

            .item {
                display: flex;
                align-items: center;
            }
            .right-line {
        width: 0px;
        height: 36px;
        border-radius: 0px 0px 0px 0px;
        border: 1px solid;
        border-image: linear-gradient(180deg, rgba(27, 148, 255, 0), rgba(27, 148, 255, 1), rgba(27, 148, 255, 0)) 1 1;
        margin-left: 10px;
      }
                width: 0px;
                height: 36px;
                border-radius: 0px 0px 0px 0px;
                border: 1px solid;
                border-image: linear-gradient(180deg, rgba(27, 148, 255, 0), rgba(27, 148, 255, 1), rgba(27, 148, 255, 0)) 1 1;
                margin-left: 10px;
            }
            .name {
                width: 56px;
                text-align: center;

 src/views/Home/HomeLeft/InspectionRaskDetails/InspectionRaskDetailsDialog.vue

@@ -17,22 +17,22 @@
        <el-form :model="searchForm" inline>
            <div class="search-row">
                <el-form-item>
                    <el-input v-model="searchForm.key_word" placeholder="请输入任务/机巢名称" clearable />
                    <el-input class="ztzf-input" v-model="searchForm.key_word" placeholder="请输入任务/机巢名称" clearable />
                </el-form-item>
                <el-form-item label="关联算法">
                    <el-select v-model="searchForm.ai_types" placeholder="请选择">
                    <el-select class="ztzf-select" v-model="searchForm.ai_types" placeholder="请选择">
                        <el-option v-for="item in taskAlgorithm" :key="item.id" :label="item.dictValue" :value="item.dictKey" />
                    </el-select>
                </el-form-item>
                <el-form-item label="任务状态">
                    <el-select v-model="searchForm.status" placeholder="请选择" clearable>
                    <el-select class="ztzf-select" v-model="searchForm.status" placeholder="请选择" clearable>
                        <el-option v-for="item in statusOptions" :key="item.value" :label="item.label" :value="item.value" />
                    </el-select>
                </el-form-item>
            </div>
            <div class="search-row">
                <el-form-item label="选择机巢">
                    <el-select v-model="searchForm.device_sn" placeholder="请选择">
                    <el-select class="ztzf-select" v-model="searchForm.device_sn" placeholder="请选择">
                        <el-option
                            v-for="item in deviceList"
                            :label="item.nickname"
@@ -43,6 +43,7 @@
                </el-form-item>
                <el-form-item>
                    <el-date-picker
                        class="ztzf-date-picker"
                        v-model="dateRange"
                        type="daterange"
                        range-separator="至"
@@ -115,8 +116,9 @@
            </el-table>
        </div>
        <!-- 分页 -->
        <div class="pagination ztzf-pagination">
        <div style="display: flex;justify-content: center">
            <el-pagination
                class="ztzf-pagination"
                v-model:current-page="pageParams.current"
                v-model:page-size="pageParams.size"
                :page-sizes="[10, 20, 30, 50]"
@@ -272,67 +274,18 @@
        .el-form-item__label {
            color: #fff;
        }

        .el-input,
        .el-select,
        .el-date-editor {
            width: 200px;
            --el-input-bg-color: transparent;
            --el-input-border-color: rgba(255, 255, 255, 0.3);
            --el-input-text-color: #fff;
            --el-input-placeholder-color: rgba(255, 255, 255, 0.5);
        }
    }
}

:deep() {
    .el-date-editor.el-input,
    .el-date-editor.el-input__wrapper {
        height: var(--el-input-height, var(--el-component-size));
        width: 0 !important;
    }
    .el-select__wrapper {
        background: #012a50;
        height: 100%;
        padding-left: 20px;
        border: 1px solid #51a8ff;
        box-shadow: none !important;
    }

    .el-select__selected-item {
        font-family: Source Han Sans CN, Source Han Sans CN, serif;

        line-height: 18px;
        font-weight: 400;
        font-size: 16px;
        color: #296aca;
    }
    .el-input__wrapper {
        background: #012a50 !important;
        box-shadow: none !important;
        border: 1px solid #178bff;
    }
    .el-input__inner::placeholder {
        color: #296aca;
    }
    .el-form-item__label {
        font-family: Segoe UI, Segoe UI;
        font-weight: 400;
        font-size: 16px;
        color: #ffffff;
    }
    .el-date-editor .el-range-separator {
        color: #ffffff !important;
    }
}
:deep(.el-pagination) {
    display: flex;
    justify-content: center;
    margin-top: 10px;
}
:deep(.el-pagination button) {
    background: center center no-repeat none !important;
    color: #8eb8ea !important;
}

.el-table__body {
@@ -435,9 +388,9 @@
        -webkit-background-clip: text; /* 背景被裁剪成文字的前景色 */
        -webkit-text-fill-color: transparent; /* 文字填充颜色变透明 */
    }
	

    .el-scrollbar__thumb {
        background: #13c6ff !important;
    }
}
</style>
</style>

 src/views/Home/HomeRight/EventOverview.vue

@@ -64,6 +64,7 @@
import dayjs from 'dayjs';
import { selectDevicePage } from '@/api/home/machineNest';
import { useStore } from 'vuex'
import useEchartsResize from '@/hooks/useEchartsResize'

const echartsOption = {
  tooltip: {
@@ -139,7 +140,7 @@
  };
});
const echartsRef = ref(null);
let chart = null;
let { chart } = useEchartsResize(echartsRef)
const deviceList = ref([]);
const today = dayjs().format('YYYY-MM-DD');
const timeArr = ref([today, today]);
@@ -233,13 +234,14 @@
        Object.keys(seriesObj).forEach(key => {seriesObj[key].data = []})
    list.forEach(item => {
      item.data.forEach((item1, index) => {
                if (!seriesObj?.[item1.status]) return
        seriesObj[item1.status].data.push(item1.value);
      });
    });
    completionRateSeries.data = list.map(item => item.rate);
    echartsOption.series = Object.values(seriesObj);
    echartsOption.series.push(completionRateSeries);
    chart.setOption(echartsOption);
    chart.value.setOption(echartsOption);
  });
};

@@ -264,8 +266,6 @@
};

onMounted(() => {
  chart = echarts.init(echartsRef.value);
  window.addEventListener('resize',  chart.resize);
  getJobEventTotal().then(res => {
    eventTotal.value = res?.data?.data || 0;
  });

 src/views/Home/HomeRight/TaskAchievements.vue

@@ -1,5 +1,5 @@
<template>
  <CommonTitle title="任务成果" @details="detailsFun" />
  <CommonTitle title="任务成果" />
  <div :style="{ marginLeft: pxToRem(14) }">
    <div class="taskAchievements">
      <div class="rawData">

 src/views/SignMachineNest/MachineLeft/InspectionRaskDetails.vue

@@ -15,13 +15,16 @@
import CommonTitle from '@/components/CommonTitle.vue';
import CommonDateTime from '@/components/CommonDateTime.vue';
import { jobNumBar, eventNumPie } from '@/api/home'
import useEchartsResize from '@/hooks/useEchartsResize'

// 日期
const currenDate = dayjs().format('YYYY-MM-DD');
const newTime = ref([currenDate, currenDate]);
// 统计图
const chartRef = ref(null);
let { chart } = useEchartsResize(chartRef)
const pieRef = ref(null);
let { chart: pieChart } = useEchartsResize(pieRef)


const option = {
@@ -160,8 +163,6 @@
        }
    ]
};
let chart = null;
let pieChart = null;

// TODAY,CURRENT_WEEK,CURRENT_MONTH,CURRENT_YEAR
const getData = (value,date_enum) => {
@@ -177,7 +178,7 @@
        option.xAxis.data = res.data?.data.map(item => item.name);
        option.series[0].data = res.data?.data.map(item => item.data[0].value);
        option.series[1].data = res.data?.data.map(item => item.data[1].value);
        chart.setOption(option);
        chart.value.setOption(option);
    })
    // 获取饼状图
    eventNumPie(params).then(res => {
@@ -191,16 +192,10 @@
            };
        });
        pieOption.series[0].data = updatedPieData;
        pieChart.setOption(pieOption);
        pieChart.value.setOption(pieOption);
    })
};
onMounted(() => {
    chart= echarts.init(chartRef.value);
    pieChart = echarts.init(pieRef.value);
    window.addEventListener('resize', () => {
        chart?.resize();
        pieChart?.resize();
    });
    getData(newTime.value, 'TODAY');
});
</script>

 src/views/TaskManage/SearchBox.vue

@@ -3,15 +3,15 @@
    <el-form :model="searchForm" inline>
      <div class="search-first">
        <el-form-item>
          <el-input v-model="searchForm.key_word" placeholder="请输入任务/机巢名称" clearable />
          <el-input class="ztzf-input" v-model="searchForm.key_word" placeholder="请输入任务/机巢名称" clearable />
        </el-form-item>
        <el-form-item label="行政区划:">
          <el-select v-model="searchForm.area_code" @change="deptChange" placeholder="请选择部门" clearable>
          <el-select class="ztzf-select" v-model="searchForm.area_code" @change="deptChange" placeholder="请选择部门" clearable>
            <el-option v-for="item in deptTreeData" :key="item.area_code" :label="item.area_name" :value="item.area_code" />
          </el-select>
        </el-form-item>
        <el-form-item label="所属机巢:">
          <el-select v-model="searchForm.device_sn" placeholder="请选择机巢" clearable>
          <el-select class="ztzf-select" v-model="searchForm.device_sn" placeholder="请选择机巢" clearable>
            <el-option v-for="item in machineData" :key="item.device_sn" :label="item.nickname" :value="item.device_sn" />
          </el-select>
        </el-form-item>
@@ -22,12 +22,12 @@
          <TaskAlgorithmBusiness :setWidth="200" :showAlgorithm="true" @algorithmChange="algorithmChange"/>
        </el-form-item>
        <el-form-item label="所属部门:" v-if="isExpand">
          <el-select v-model="searchForm.create_dept" placeholder="请选择部门" clearable>
          <el-select class="ztzf-select" v-model="searchForm.create_dept" placeholder="请选择部门" clearable>
            <el-option v-for="item in deptData" :key="item.id" :label="item.deptName" :value="item.id" />
          </el-select>
        </el-form-item>
        <el-form-item label="任务状态:" v-if="isExpand">
          <el-select v-model="searchForm.status" placeholder="请选择状态" clearable>
          <el-select class="ztzf-select" v-model="searchForm.status" placeholder="请选择状态" clearable>
            <el-option v-for="item in statusOptions" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>
@@ -181,18 +181,6 @@
    }
  }
  :deep(.el-form) {
    :deep(.el-input__wrapper),
    :deep(.el-select),
    :deep(.el-select__wrapper) {
      
      background-color: #021740;
      box-shadow: 0 0 0 1px #026AD6;
      
      &.is-focus {
        box-shadow: 0 0 0 1px #026AD6;
      }
    }
    
    :deep(.el-input__wrapper.is-disabled) {
      background-color: #021740;
      box-shadow: 0 0 0 1px #026AD6;
@@ -201,51 +189,13 @@
      margin-bottom: 0;
      margin-right: 20px;
      width: 260px;
      

      .el-form-item__label {
        color: #fff;
        line-height: 32px;
      }
      
      .el-input,
      .el-select,
      .el-date-editor {
        width: 100%;
        height: 32px;
        --el-input-bg-color: transparent;
        --el-input-border-color: #178BFF;
        --el-input-text-color: #296ACA;
        --el-input-placeholder-color: rgba(255, 255, 255, 0.5);

        .el-input__wrapper {
          height: 32px;
        }

        .el-input__inner {
          height: 32px;
          line-height: 32px;
        }
      }
    }
  }
  :deep() {
    .el-select__wrapper {
      background: transparent;
      box-shadow: none;
      box-shadow: 0 0 0 1px #026AD6;
      height: 32px;
      padding-left: 20px;
    }
  }
  :deep(.el-pagination) {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(31, 62, 122, 0.95);
    padding: 15px 20px;
    border-radius: 4px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
  }
}
</style>
</style>

 src/views/TaskManage/TaskIntermediateContent/TaskIntermediateContent.vue

@@ -29,7 +29,7 @@
      </el-table-column>
    </el-table>
    <div class="pagination">
      <el-pagination class="btn-prev"
      <el-pagination class="ztzf-pagination"
        v-model:current-page="jobListParams.current"
        v-model:page-size="jobListParams.size"
        :page-sizes="[10, 20, 30, 50]"
@@ -72,7 +72,7 @@
const getStatusText = (status) => {
  const statusMap = {
    1: '待执行',
    2: '执行中',  
    2: '执行中',
    3: '已完成',
    4: '已取消',
    5: '执行失败'
@@ -141,7 +141,7 @@
  margin: 16px 38px 16px 38px;
  background: linear-gradient( 27deg, #1F3E7A 0%, rgba(31,62,122,0.35) 79%, rgba(31,62,122,0) 100%);
  padding: 14px 18px;
  

  :deep(.el-table) {
    margin-top: 12px;
    background-color: transparent;
@@ -174,27 +174,6 @@
    // padding: 20px 0;
    display: flex;
    justify-content: center;
    
    :deep(.el-pagination) {
      --el-pagination-bg-color: transparent;
      --el-pagination-text-color: #8EB8EA;
      --el-pagination-button-color: #8EB8EA;
      --el-pagination-hover-color: #409eff;
      .btn-prev {
        background: transparent;
      }
      .el-pager li.is-active {
        background: #021022;
        color: #8EB8EA;
        border: 1px solid #1479EF;
        padding: 0 6px;
      }
      
      .el-pagination__jump {
        background: transparent;
        color: #8EB8EA;
      }
    }
  }
}
</style>
</style>

 src/views/TaskManage/TaskTop/TaskEvent.vue

@@ -10,13 +10,15 @@
import * as echarts from 'echarts';
import { jobEventBar } from '@/api/home/task';
import dayjs from 'dayjs';
import useEchartsResize from '@/hooks/useEchartsResize'

// 日期
const currenDate = dayjs().format('YYYY-MM-DD');
const newTime = ref([currenDate, currenDate]);
// 图表
const chartRef = ref(null);
let chart = null;
let { chart } = useEchartsResize(chartRef)


const option = {
  tooltip: {
@@ -104,33 +106,15 @@
    option.xAxis.data = res.data.data.map(item => item.name);
    option.series[0].data = res.data?.data.map(item => item.data[0].value);
    option.series[1].data = res.data?.data.map(item => item.data[1].value);
    chart.setOption(option);
    chart.value.setOption(option);
  });
};

onBeforeUnmount(() => {
  if (chart) {
    chart.dispose();
    chart = null;
  }
  window.removeEventListener('resize', handleResize);
});

onMounted(() => {
  chart = echarts.init(chartRef.value);
  getJobEventBar(newTime.value, 'CURRENT_YEAR');
  
  window.addEventListener('resize', () => {
    if (chart && !chart.isDisposed()) {
      chart.resize();
    }
  });
});

onUnmounted(() => {
  window.removeEventListener('resize', chart?.resize);
  chart?.dispose();
});
</script>

<style lang="scss" scoped>
@@ -140,7 +124,7 @@
  height: 100%;
  margin-left: 40px;
  .title {
    margin-top: 10px; 
    margin-top: 10px;
    width: 660px;
    height: 28.6px;
    background: url('@/assets/images/task/task-event-total.png') no-repeat center / 100% 100%;
@@ -153,4 +137,4 @@
    height: 200px;
  }
}
</style>
</style>

 src/views/TaskManage/TaskTop/TaskIndustry.vue

@@ -9,8 +9,9 @@
<script setup>
import * as echarts from 'echarts';
import { industryJobNumPieChart } from '@/api/home/task';
import useEchartsResize from '@/hooks/useEchartsResize'
const chartRef = ref(null);
let chart = null;
let { chart } = useEchartsResize(chartRef)

const option = {
  tooltip: {
@@ -73,7 +74,7 @@
        item.value = matchData.value;
      }
    });
    chart.setOption(option);
    chart.value.setOption(option);
  });
};

@@ -90,23 +91,13 @@
//       }
//     }));
//     option.series[0].data = data;
//     chart.setOption(option);
//     chart.value.setOption(option);
//   });
// };


onMounted(() => {
  chart = echarts.init(chartRef.value);
  getIndustryJobNumPieChart();
  
  window.addEventListener('resize', () => {
    chart?.resize();
  });
});

onUnmounted(() => {
  window.removeEventListener('resize', chart?.resize);
  chart?.dispose();
});
</script>

@@ -116,7 +107,7 @@
  width: 244px;
  height: 100%;
  .title {
    margin-top: 10px; 
    margin-top: 10px;
    width: 244px;
    height: 26px;
    background: url('@/assets/images/task/title.png') no-repeat center / 100% 100%;
@@ -129,4 +120,4 @@
    height: 200px;
  }
}
</style>
</style>

 src/views/TaskManage/TaskTop/TaskTime.vue

@@ -10,13 +10,15 @@
import * as echarts from 'echarts';
import { jobNumBar } from '@/api/home/task';
import dayjs from 'dayjs';
import useEchartsResize from '@/hooks/useEchartsResize'

// 日期
const currenDate = dayjs().format('YYYY-MM-DD');
const newTime = ref([currenDate, currenDate]);

const chartRef = ref(null);
let chart = null;
let { chart } = useEchartsResize(chartRef)


const option = {
  tooltip: {
@@ -96,30 +98,15 @@
    if (res.data.code !== 0) return;
    option.xAxis.data = res.data.data.map(item => item.name);
    option.series[0].data = res.data.data.map(item => item.value);
    chart.setOption(option);
    chart.value.setOption(option);
  });
};

onBeforeUnmount(() => {
  if (chart) {
    chart.dispose();
    chart = null;
  }
  window.removeEventListener('resize', handleResize);
});

onMounted(() => {
  chart = echarts.init(chartRef.value);
  getJobNumBar(newTime.value, 'CURRENT_YEAR');
  
  if (chart && !chart.isDisposed()) {
    chart.resize();
  }
});

onUnmounted(() => {
  window.removeEventListener('resize', chart?.resize);
  chart?.dispose();
});
</script>

<style lang="scss" scoped>
@@ -129,7 +116,7 @@
  height: 100%;
  margin-left: 14px;
  .title {
    margin-top: 10px; 
    margin-top: 10px;
    width: 502px;
    height: 28.6px;
    background: url('@/assets/images/task/task-num-total.png') no-repeat center / 100% 100%;
@@ -142,4 +129,4 @@
    height: 200px;
  }
}
</style>
</style>

 src/views/TaskManage/TaskTop/TaskTotal.vue

@@ -43,7 +43,7 @@
    list.value[2].value = res.data.data.running_num;
    list.value[3].value = res.data.data.pending_executions;
    list.value[4].value = res.data.data.executed;
    list.value[5].value = res.data.data.failed_executions;
    // list.value[5].value = res.data.data.failed_executions;
  });
};

@@ -99,4 +99,4 @@
    }
  }
}
</style>
</style>

 src/views/TaskManage/components/TaskAlgorithmBusiness.vue

@@ -1,12 +1,12 @@
<!-- 关联算法和综合业务 -->
<template>
  <div class="task-algorithm" v-if="showAlgorithm">
    <el-select :style="{ width:setWidth +'px' }" v-model="ai_types" multiple collapse-tags collapse-tags-tooltip placeholder="请选择算法" clearable @change="handleAlgorithmChange">
    <el-select class="ztzf-select" :style="{ width:setWidth +'px' }" v-model="ai_types" multiple collapse-tags collapse-tags-tooltip placeholder="请选择算法" clearable @change="handleAlgorithmChange">
      <el-option v-for="item in taskAlgorithm" :key="item.id" :label="item.dictValue" :value="item.dictKey" />
    </el-select>
  </div>
  <div class="task-business" v-if="showBusiness">
    <el-select :style="{ width:setWidth +'px' }" v-model="industry_type" placeholder="请选择类型" clearable @change="handleBusinessChange">
    <el-select class="ztzf-select" :style="{ width:setWidth +'px' }" v-model="industry_type" placeholder="请选择类型" clearable @change="handleBusinessChange">
      <el-option v-for="item in taskBusiness" :key="item.id" :label="item.dictValue" :value="item.dictKey" />
    </el-select>
  </div>