feat: 下拉选择框样式修改，任务管理已完成修改为已执行

张含笑

2025-04-18 cbd44c0cf16a097587e19549268b89ba5f04b7ff

feat: 下拉选择框样式修改，任务管理已完成修改为已执行

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

@@ -20,19 +20,19 @@
                    <el-input class="ztzf-input" v-model="searchForm.key_word" placeholder="请输入任务/机巢名称" clearable />
                </el-form-item>
                <el-form-item label="关联算法">
                    <el-select class="ztzf-select" v-model="searchForm.ai_types" placeholder="请选择">
                    <el-select :teleported="false" 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 class="ztzf-select" v-model="searchForm.status" placeholder="请选择" clearable>
                    <el-select :teleported="false" 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 class="ztzf-select" v-model="searchForm.device_sn" placeholder="请选择">
                    <el-select :teleported="false" class="ztzf-select" v-model="searchForm.device_sn" placeholder="请选择">
                        <el-option
                            v-for="item in deviceList"
                            :label="item.nickname"
@@ -293,7 +293,34 @@
    getDeviceList()
})
</script>
<style lang="scss">

</style>
<style scoped lang="scss">
/* 修改整个日期面板的背景色 */
.custom-date-picker {
  background: #1e2b3c !important;
  border: 1px solid #479DFF !important;
}

/* 修改头部背景色 */
.custom-date-picker .el-picker-panel__header {
  background: #16202d !important;
}

/* 修改日期单元格背景色 */
.custom-date-picker .el-picker-panel__body {
  background: #1e2b3c !important;
}

/* 修改日期单元格悬停/选中状态 */
.custom-date-picker .el-date-table td:hover,
.custom-date-picker .el-date-table td.current:not(.disabled) {
  background: #479DFF !important;
  color: white !important;
}


.search-row {
    display: flex;
    justify-content: space-between;

 src/views/Home/HomeRight/EventOverview.vue

@@ -9,7 +9,10 @@
        </div>
        <div class="contentBox">
          <div class="overviewItem" v-for="item in eventTypeList" :key="item.name">
            <div class="itemName"><img :src="item.img" alt="" />{{ item.name }}</div>
                        <div class="itemName">
                            <img :src="item.img" alt="" />
                            {{ item.name }}
                        </div>
            <div class="itemValue" :style="{ color: item.color }">{{ item.value }}</div>
          </div>
        </div>
@@ -17,7 +20,8 @@
      <CommonDateTime class="dateTime" v-model="timeArr" @change="timeChange" />

      <el-select
        class="homeRightSelect"
            :teleported="false"
                class="homeRightSelect ztzf-select"
        v-model="params.device_sn"
        placeholder="请选择"
        size="large"
@@ -30,12 +34,7 @@
        v-select-load:uavHomePopper="scrollEvent"
        @change="selectChange"
      >
        <el-option
          v-for="item in deviceList"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
                <el-option v-for="item in deviceList" :key="item.value" :label="item.label" :value="item.value" />
      </el-select>
      <div class="completion">
        <img class="completion-left-img" :src="completionLeft" alt="" />
@@ -49,20 +48,20 @@
  </div>
</template>
<script setup>
import CommonTitle from '@/components/CommonTitle.vue';
import overviewImg1 from '@/assets/images/home/homeRight/overview1.png';
import overviewImg2 from '@/assets/images/home/homeRight/overview2.png';
import overviewImg3 from '@/assets/images/home/homeRight/overview3.png';
import overviewImg4 from '@/assets/images/home/homeRight/overview4.png';
import overviewImg5 from '@/assets/images/home/homeRight/overview5.png';
import overviewImg6 from '@/assets/images/home/homeRight/overview6.png';
import completionLeft from '@/assets/images/home/homeRight/completionLeft.png';
import * as echarts from 'echarts';
import CommonDateTime from '@/components/CommonDateTime.vue';
import VSelectLoad from '@/directive/selectLoad';
import { getJobEventBrokerLine, getJobEventByStatus, getJobEventTotal } from '@/api/home';
import dayjs from 'dayjs';
import { selectDevicePage } from '@/api/home/machineNest';
import CommonTitle from '@/components/CommonTitle.vue'
import overviewImg1 from '@/assets/images/home/homeRight/overview1.png'
import overviewImg2 from '@/assets/images/home/homeRight/overview2.png'
import overviewImg3 from '@/assets/images/home/homeRight/overview3.png'
import overviewImg4 from '@/assets/images/home/homeRight/overview4.png'
import overviewImg5 from '@/assets/images/home/homeRight/overview5.png'
import overviewImg6 from '@/assets/images/home/homeRight/overview6.png'
import completionLeft from '@/assets/images/home/homeRight/completionLeft.png'
import * as echarts from 'echarts'
import CommonDateTime from '@/components/CommonDateTime.vue'
import VSelectLoad from '@/directive/selectLoad'
import { getJobEventBrokerLine, getJobEventByStatus, getJobEventTotal } from '@/api/home'
import dayjs from 'dayjs'
import { selectDevicePage } from '@/api/home/machineNest'
import { useStore } from 'vuex'
import useEchartsResize from '@/hooks/useEchartsResize'

@@ -116,7 +115,7 @@
    },
  ],
  series: [],
};
}

const eventTypeList = ref([
  { name: '待审核', value: 0, img: overviewImg1, color: '#8CFEA7', status: '2' },
@@ -125,8 +124,8 @@
  { name: '处理中', value: 0, img: overviewImg4, color: '#FFC398', status: '3' },
  { name: '已完成', value: 0, img: overviewImg5, color: '#AFD9FB', status: '4' },
  { name: '已完结', value: 0, img: overviewImg6, color: '#11C4FF', status: '5' },
]);
const seriesObj = {};
])
const seriesObj = {}
eventTypeList.value.forEach(item => {
  seriesObj[item.status] = {
    type: 'bar',
@@ -137,13 +136,13 @@
    name: item.name,
    itemStyle: { color: item.color },
    data: [],
  };
});
const echartsRef = ref(null);
    }
})
const echartsRef = ref(null)
let { chart } = useEchartsResize(echartsRef)
const deviceList = ref([]);
const today = dayjs().format('YYYY-MM-DD');
const timeArr = ref([today, today]);
const deviceList = ref([])
const today = dayjs().format('YYYY-MM-DD')
const timeArr = ref([today, today])
const completionRateSeries = {
  name: '完成率',
  type: 'line',
@@ -160,22 +159,22 @@
    focus: 'series',
  },
  data: [], // 示例数据，根据实际完成率计算
};
}

const eventTotal = ref(0);
let deviceTotal = 0;
const eventTotal = ref(0)
let deviceTotal = 0
const devicePageParams = ref({
  current: 1,
  size: 10,
  total: 0,
  nickname: '',
});
})
const params = ref({
  date_enum: 'TODAY',
  device_sn: '',
  end_date: undefined,
  start_date: undefined,
});
})

const store = useStore()
const details = () =>{
@@ -185,95 +184,99 @@

// 远程查询
const remoteMethod = nickname => {
  devicePageParams.value.nickname = nickname;
  devicePageParams.value.current = 1;
  devicePageParams.value.size = 10;
  deviceList.value = [];
  getTableList();
};
    devicePageParams.value.nickname = nickname
    devicePageParams.value.current = 1
    devicePageParams.value.size = 10
    deviceList.value = []
    getTableList()
}
// 滚动查询
const scrollEvent = () => {
  const { current, size } = devicePageParams.value;
    const { current, size } = devicePageParams.value
  if (current * size < deviceTotal) {
    devicePageParams.value.current = current + 1;
    getTableList();
        devicePageParams.value.current = current + 1
        getTableList()
  }
};
}
// 机巢列表数据
const getTableList = async () => {
  const res = await selectDevicePage({ ...devicePageParams.value, type: 1 });
  const arr = res?.data?.data?.records || [];
    const res = await selectDevicePage({ ...devicePageParams.value, type: 1 })
    const arr = res?.data?.data?.records || []
  deviceList.value = deviceList.value.concat(
    arr.map(item => ({
      value: item.device_sn,
      label: item.nickname,
    }))
  );
  deviceTotal = res?.data?.data?.total || 0;
};
    )
    deviceTotal = res?.data?.data?.total || 0
}
// 下拉变化
const selectChange = val => {
  getData();
};
    getData()
}

// 时间变化
const timeChange = (value, date_enum) => {
  params.value = {
    ...params.value,
    date_enum,
  };
  getData();
};
    }
    getData()
}

// 获取柱状图数据
const getBarChartData = () => {
  getJobEventBrokerLine(params.value).then(res => {
    const list = res?.data?.data || [];
    echartsOption.xAxis.data = list.map(item => item.name);
        const list = res?.data?.data || []
        echartsOption.xAxis.data = list.map(item => item.name)
        // 赋值前清空数据
        Object.keys(seriesObj).forEach(key => {seriesObj[key].data = []})
        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.value.setOption(echartsOption);
  });
};
                seriesObj[item1.status].data.push(item1.value)
            })
        })
        completionRateSeries.data = list.map(item => item.rate)
        echartsOption.series = Object.values(seriesObj)
        echartsOption.series.push(completionRateSeries)
        chart.value.setOption(echartsOption)
    })
}

//  事件类型数据
const getTypeData = () => {
  getJobEventByStatus(params.value).then(res => {
    const resList = res?.data?.data || [];
        const resList = res?.data?.data || []
    resList.forEach(item => {
      eventTypeList.value.forEach(item1 => {
        if (item1.name === item.name) {
          item1.value = item.num;
                    item1.value = item.num
        }
      });
    });
  });
};
            })
        })
    })
}

// 获取事件概括数据
const getData = () => {
  getTypeData();
  getBarChartData();
};
    getTypeData()
    getBarChartData()
}

onMounted(() => {
  getJobEventTotal().then(res => {
    eventTotal.value = res?.data?.data || 0;
  });
  getData();
  getTableList();
});
        eventTotal.value = res?.data?.data || 0
    })
    getData()
    getTableList()
})
</script>
<style lang="scss">

</style>
<style scoped lang="scss">
.homeRightSelect {
  width: 356px;
@@ -298,12 +301,7 @@
.eventOverview {
  width: 390px;
  height: 445px;
  background: linear-gradient(
    270deg,
    #1f3e7a 0%,
    rgba(31, 62, 122, 0.35) 79%,
    rgba(31, 62, 122, 0) 100%
  );
    background: linear-gradient(270deg, #1f3e7a 0%, rgba(31, 62, 122, 0.35) 79%, rgba(31, 62, 122, 0) 100%);
  border-radius: 0px 0px 0px 0px;
  opacity: 0.85;
  margin: 3px 0 0 0;

 src/views/TaskManage/SearchBox.vue

@@ -6,12 +6,12 @@
          <el-input class="ztzf-input" v-model="searchForm.key_word" placeholder="请输入任务/机巢名称" clearable />
        </el-form-item>
        <el-form-item label="行政区划:">
          <el-select class="ztzf-select" v-model="searchForm.area_code" @change="deptChange" placeholder="请选择部门" clearable>
          <el-select :teleported="false" 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 class="ztzf-select" v-model="searchForm.device_sn" placeholder="请选择机巢" clearable>
          <el-select :teleported="false" 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>

 src/views/TaskManage/TaskIntermediateContent/TaskIntermediateContent.vue

@@ -90,7 +90,7 @@
  const statusMap = {
    1: '待执行',
    2: '执行中',
    3: '已完成',
    3: '已执行',
    4: '已取消',
    5: '执行失败'
  };