feat: 任务管理实时刷新

罗广辉

2025-07-24 a82a97196788baceb8f579051e18e0f7c4c837bc

feat: 任务管理实时刷新

 package.json

@@ -39,6 +39,7 @@
        "vue-i18n": "^9.1.9",
        "vue-router": "^4.3.2",
        "vuex": "^4.1.0",
        "uuid": "^11.1.0",
        "xlsx": "^0.18.5"
    },
    "devDependencies": {

 pnpm-lock.yaml

@@ -77,6 +77,9 @@
  sm-crypto:
    specifier: ^0.3.13
    version: 0.3.13
  uuid:
    specifier: ^11.1.0
    version: 11.1.0
  vue:
    specifier: ^3.4.27
    version: 3.4.30
@@ -3851,6 +3854,11 @@
    resolution: {integrity: sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==}
    dev: false

  /uuid@11.1.0:
    resolution: {integrity: sha512-0/A9rDy9P7cJ+8w1c9WD9V//9Wj15Ce2MPz8Ri6032usz+NfePxx5AcN3bN+r6ZL6jEo066/yNYB3tn4pQEx+A==}
    hasBin: true
    dev: false

  /vite-plugin-compression@0.5.1(vite@5.3.1):
    resolution: {integrity: sha512-5QJKBDc+gNYVqL/skgFAP81Yuzo9R+EAf19d+EtsMF/i8kFUpNi3J/H01QD3Oo8zBQn+NzoCIFkpPLynoOzaJg==}
    peerDependencies:

 src/api/job/task.js

@@ -1,4 +1,5 @@
import request from '@/axios'
import { v4 as uuidv4 } from 'uuid'

// 任务总数统计
export const totalJobNum = params => {
@@ -202,3 +203,18 @@
        method: 'get',
    })
}

// 生成固定uuid
const uuid = uuidv4()
// 轮询刷新
export const statusChangedApi = (params = {}) => {
    return request({
        url: '/drone-device-core/manage/api/v1/devices/statusChanged',
        method: 'get',
        params: {
            uuid,
            intervalTime: 4,
            ...params,
        },
    })
}

 src/axios.js

@@ -14,8 +14,6 @@
import { isURL, validatenull } from '@/utils/validate';
import { ElMessage } from 'element-plus';
import website from '@/config/website';
import NProgress from 'nprogress'; // progress bar
import 'nprogress/nprogress.css'; // progress bar style
import { Base64 } from 'js-base64';
import { baseUrl } from '@/config/env';
import crypto from '@/utils/crypto';
@@ -32,15 +30,10 @@
};
//跨域请求，允许保存cookie
axios.defaults.withCredentials = true;
// NProgress Configuration
NProgress.configure({
  showSpinner: false,
});

//http request拦截
axios.interceptors.request.use(
  config => {
    // start progress bar
    NProgress.start();
    // 初始化错误提示状态
    isErrorShown = false;
    //地址为已经配置状态则不添加前缀
@@ -98,7 +91,6 @@
//http response拦截
axios.interceptors.response.use(
  res => {
    NProgress.done();
    const status = res.data.error_code || res.data.code || res.status;
    const statusWhiteList = website.statusWhiteList || [];
    const message = res.data.msg || res.data.error_description || res.data.message || '系统错误';
@@ -227,7 +219,6 @@
    return res;
  },
  error => {
    NProgress.done();
    return Promise.reject(new Error(error));
  }
);

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

@@ -101,12 +101,13 @@
import SearchBox from '../SearchBox.vue'
import AddTask from './AddTask.vue'
// import CurrentTaskDetails from '@/components/CurrentTaskDetails/CurrentTaskDetails.vue'
import { jobList, cancelJobs, taskReturnLines, returnHomeCluster } from '@/api/job/task'
import { jobList, cancelJobs, taskReturnLines, returnHomeCluster, statusChangedApi } from '@/api/job/task';
import { ElMessage } from 'element-plus'
import DeviceJobDetails from '../DeviceJobDetails.vue'
import CancelTaskDialog from '../CancelTaskDialog.vue'
import { useStore } from 'vuex'
import { cloneDeep } from 'lodash'
import { inject, onBeforeUnmount } from 'vue';
const store = useStore()
const singleUavHome = computed(() => store.state.home.singleUavHome)
const jobListParams = reactive({
@@ -241,6 +242,21 @@
    }
}


const changeKey = inject('changeKey')
// 轮询查询是否刷新
const polling = setInterval(async () => {
  const res = await statusChangedApi()
  if (res.data.data.DEVICE_REFRESH || res.data.data.JOB_REFRESH) {
    getJobList()
    changeKey.value++
  }
}, 4000)

onBeforeUnmount(() => {
  clearInterval(polling)
})

onMounted(() => {
    // getJobList()
})

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

@@ -119,20 +119,13 @@
    })
}

const changeKey = inject('changeKey')
// 添加监听
watch(
    () => store.state.task.taskSearchParams,
    newVal => {
        if (newVal) {
            getJobEventBar(newVal)
        }
    },
    { deep: true }
  () => [store.state.task.taskSearchParams, changeKey.value],
  () => getJobEventBar(store.state.task.taskSearchParams),
  { deep: true }
)

onMounted(() => {
    getJobEventBar({ date_enum: 'TODAY' })
})
</script>

<style lang="scss" scoped>

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

@@ -78,17 +78,15 @@
    })
}

const changeKey = inject('changeKey')
// 添加监听
watch(
    () => store.state.task.taskSearchParams,
    newVal => {
        if (newVal) {
            getIndustryJobNumPieChart(newVal)
        }
    },
    { deep: true }
  () => [store.state.task.taskSearchParams,changeKey.value],
  () => getIndustryJobNumPieChart(store.state.task.taskSearchParams),
  { deep: true }
)


onMounted(() => {
    getIndustryJobNumPieChart({ date_enum: 'TODAY' })
})

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

@@ -121,21 +121,13 @@
    })
}

const changeKey = inject('changeKey')
// 添加监听
watch(
    () => store.state.task.taskSearchParams,
    newVal => {
        if (newVal) {
            getJobNumBar(newVal)
            newVal
        }
    },
    { deep: true }
  () => [store.state.task.taskSearchParams,changeKey.value],
  () => getJobNumBar(store.state.task.taskSearchParams),
  { deep: true }
)

onMounted(() => {
    getJobNumBar({ date_enum: 'TODAY' })
})
</script>

<style lang="scss" scoped>

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

@@ -46,13 +46,7 @@
    { name: '取消执行', value: '0', color: '#373333', img: qxzxpng },
])

// 获取任务统计总数
const getTotalJobNum = () => {
    totalJobNum().then(res => {
        if (res.data.code !== 0) returen
        total.value = res.data.data.job_total_num
    })
}

// 获取其他任务统计
const getJobStatistics = value => {
    jobStatistics(value).then(res => {
@@ -68,16 +62,12 @@
    })
}

const changeKey = inject('changeKey')
// 添加监听
watch(
    () => store.state.task.taskSearchParams,
    newVal => {
        if (newVal) {
            getJobStatistics(newVal)
            newVal
        }
    },
    { immediate: true,deep: true }
  () => [store.state.task.taskSearchParams,changeKey.value],
  () => getJobStatistics(store.state.task.taskSearchParams),
  { deep: true }
)

</script>

 src/views/job/jobstatistics.vue

@@ -1,11 +1,14 @@
<script setup>
import TaskTop from "@/views/job/components/TaskTop/TaskTop.vue"
import TaskIntermediateContent from "@/views/job/components/TaskIntermediateContent/TaskIntermediateContent.vue"
</script>

<template>
  <TaskTop />
  <TaskIntermediateContent />
</template>
<script setup>
import TaskTop from "@/views/job/components/TaskTop/TaskTop.vue"
import TaskIntermediateContent from "@/views/job/components/TaskIntermediateContent/TaskIntermediateContent.vue"
import { ref } from 'vue';
const changeKey = ref(0)
provide('changeKey', changeKey)
</script>

<style scoped lang="scss"></style>