feat: 优化或者修复任务管理

chenyao

2025-05-30 593c3dc1800cb03ad895856fdddecb29c0b44249

feat: 优化或者修复任务管理

 src/assets/images/task/dzx.png

 src/views/job/components/DeviceJobDetails.vue

@@ -1,7 +1,7 @@
<!-- 历史任务详情 -->
<template>
    <el-dialog class="ztzf-dialog" append-to-body modal-class="detailsOfHistoricalTasks" v-model="isShow" title="历史任务详情"
        width="1800" :close-on-click-modal="false" :destroy-on-close="true">
        width="1700" :close-on-click-modal="false" :destroy-on-close="true">
        <div class="content">
            <div class="contentLeft">
                <div class="machineTableDetailsTitle"><span>详情</span></div>
@@ -69,7 +69,7 @@
</template>

<script setup>
// import { pxToRem } from '@/utils/rem'
import { pxToRem } from '@/utils/rem'
import JobRelatedEvents from './JobRelatedEvents.vue'
import { getEventMediaListApi, getJobDetails, getJobInfoFiles } from '@/api/job/task'
import DeviceJobDetailsMap from './DeviceJobDetailsMap.vue'
@@ -206,8 +206,7 @@
.content {
    display: flex;
    height: 100%;

    .contentLeft {
.contentLeft {
        margin-left: 35px;
        margin-right: 24px;
        width: 1150px;
@@ -222,7 +221,7 @@
                display: inline-block;
                margin-left: 30px;
                font-size: 16px;
                color: #363636;
                color: #0282ff;
                line-height: 20px;
                text-align: left;
                margin-bottom: 8px;
@@ -279,36 +278,36 @@
                .itemBox {
                    display: flex;
                    align-items: center;
                    // background: #152743;
                    background: #fff;
                    height: 43px;
                    // border-top: 2px solid #eeeeee;
                    border-top: 2px solid #EFEFEF;

                }

            }

            .itemCon:nth-last-child(-n+2) {
                border-bottom: 2px solid #eeeeee;
                border-bottom: 2px solid #EFEFEF;
            }

            .itemBox:nth-last-child(-n+2) .itemTitle {
                border-bottom: 1px solid #eeeeee;
                border-bottom: 1px solid #EFEFEF;
            }

            .itemTitle {
                color: #363636;
                color: #0B1D38;
                width: 26%;
                text-align: right;
                // background: #0B1D38;
                background: #F3F6FF;
                height: 43px;
                line-height: 43px;
                padding-right: 10px;
                border-top: 1px solid #eeeeee
                border-top: 1px solid #EFEFEF;
            }

            .itemValue {
                font-size: 14px;
                color: #363636;
                color: #747e91;
                text-align: center;
                width: 74%;

@@ -348,34 +347,23 @@
            position: relative;
        }

        .videobutton {
            position: absolute;
            top: 40%;
            left: 45%;
            transform: translate(-50%);
            cursor: pointer;
            width: 40px;
            height: 40px;
            display: inline-block;
        }
        // .videobutton {
        //     position: absolute;
        //     top: 40%;
        //     left: 45%;
        //     transform: translate(-50%);
        //     cursor: pointer;
        //     width: 40px;
        //     height: 40px;
        //     display: inline-block;
        // }

    }

    .contentRight {
        width: 0;
        flex-grow: 1;
        background: #19ad8d;
        margin-right: 17px;
    }



    // .fullscreen-video {
    //   width: 100%;
    //   height: 100%;
    //   max-width: 800px;
    //   max-height: 800px;
    //   object-fit: contain;
    // }
}
</style>

 src/views/job/components/JobRelatedEvents.vue

@@ -1,5 +1,6 @@
<template>
    <div class="machineTableDetailsTitle">
    <div class="JobRelatedEvents">
        <div class="machineTableDetailsTitle">
        <p>
            关联事件
            <span>{{ total }}</span>
@@ -45,17 +46,17 @@
            :row-style="{ height: '38px', fontSize: '14px', 'text-align': 'center' }"
            :header-cell-style="{ 'text-align': 'center', height: '36px', fontSize: '14px' }"
        >
            <el-table-column label="序号" type="index" width="60">
            <el-table-column label="序号" type="index" width="60" align="center">
                <template #default="{ $index }">
                    {{ ($index + 1 + (sizeParams.current - 1) * sizeParams.size).toString().padStart(2, '0') }}
                </template>
            </el-table-column>
            <el-table-column prop="event_num" label="事件编号" />
            <el-table-column show-overflow-tooltip prop="event_name" label="事件名称" />
            <el-table-column show-overflow-tooltip prop="remark" label="事件地址" />
            <el-table-column show-overflow-tooltip prop="ai_types" label="关联算法" />
            <el-table-column show-overflow-tooltip prop="job_create_time" label="事件时间" />
            <el-table-column prop="status" label="事件状态">
            <el-table-column prop="event_num" label="事件编号"  align="center"/>
            <el-table-column show-overflow-tooltip prop="event_name" label="事件名称"  align="center"/>
            <el-table-column show-overflow-tooltip prop="remark" label="事件地址"  align="center"/>
            <el-table-column show-overflow-tooltip prop="ai_types" label="关联算法"  align="center"/>
            <el-table-column show-overflow-tooltip prop="job_create_time" label="事件时间"  align="center"/>
            <el-table-column prop="status" label="事件状态" align="center">
                <template #default="scope">
                    <div class="pending" v-if="scope.row.status === 0">待处理</div>
                    <div class="reviewed" v-if="scope.row.status === 2">待审核</div>
@@ -64,9 +65,9 @@
                    <div class="ended" v-if="scope.row.status === 5">已完结</div>
                </template>
            </el-table-column>
            <el-table-column label="操作" width="80">
            <el-table-column label="操作" width="90" align="center">
                <template #default="scope">
                    <div class="ztzf-view" @click="examine(scope.row)">查看</div>
                    <div class="ztzf-view btnItem" @click="examine(scope.row)">查看</div>
                </template>
            </el-table-column>
        </el-table>
@@ -82,13 +83,16 @@
        :total="total"
        @change="pageChange"
    />
    </div>
</template>
<script setup>
import { useStore } from 'vuex'
import { getDeviceEventList } from '@/api/job/task'
import { dayjs, ElMessage } from 'element-plus'
// import { pxToRem } from '@/utils/rem'
import { useRouter } from 'vue-router';
import { pxToRem } from '@/utils/rem'
import TaskAlgorithmBusiness from './TaskAlgorithmBusiness.vue'
const router = useRouter();
const emit = defineEmits(['refresh'])
const props = defineProps({
    jobTimes: Array,
@@ -121,9 +125,12 @@
const total = ref(0)
const examine = row => {
    const orderNumber = row.event_num
    const adminUrl = import.meta.env.VITE_APP_ADMIN_URL
    const targetPath = `/tickets/ticket?orderNumber=${orderNumber}`
    window.open(`${adminUrl}?redirect=${encodeURIComponent(targetPath)}`, '_blank')
    router.push({
      path: `/tickets/ticket`,
      query: {
        orderNumber,
      },
    });
}
const wayLineJodInfoId = inject('wayLineJodInfoId')

@@ -184,7 +191,8 @@
// }
</style>
<style scoped lang="scss">
.machineTableDetailsTitle {
.JobRelatedEvents {
    .machineTableDetailsTitle {
    margin-bottom: 16px;
    background: url('/src/assets/images/task/detailtitle.png') no-repeat center;
    background-size: 100% 100%;
@@ -264,6 +272,7 @@
                display: flex;
                justify-content: center;
                align-items: center;
				
                img {
                    width: 14px;
                    height: 14px;
@@ -273,15 +282,33 @@
                background: #409EFF;
                color: #fff;
                margin-right: 10px;
                cursor: pointer;
            }
            .clear {
                border: 1px solid #D2D1D1;
                color: #676767;
                margin-right: 10px;
                cursor: pointer;
            }
            .add {
                background: #FF9243;
                color: #fff;
            }
        }
        .btnItem {
            height: 27px;
            line-height: 27px;
            border-radius: 0px 0px 0px 0px;
            border: 1px solid #51a8ff;
            font-family: Segoe UI, Segoe UI;
            font-weight: 400;
            font-size: 14px;
            color: #1C5CFF;
            padding: 0 10px;
            display: inline-block;
            margin-right: 10px;
            cursor: pointer;
    }
}

</style>

 src/views/job/components/SearchBox.vue

@@ -57,7 +57,7 @@
                    </div>
                </el-form-item>
                <el-form-item label="任务算法:" v-if="isExpand" class="taskAlgorithm">
                    <TaskAlgorithmBusiness :setWidth="186" :showAlgorithm="true" @algorithmChange="algorithmChange" />
                    <TaskAlgorithmBusiness :setWidth="162" :showAlgorithm="true" @algorithmChange="algorithmChange" />
                </el-form-item>
                <el-form-item label="所属部门:" v-if="isExpand">
                    <el-select
@@ -105,7 +105,7 @@
    </div>
</template>
<script setup>
// import { pxToRem } from '@/utils/rem'
import { pxToRem } from '@/utils/rem'
import { ElMessage } from 'element-plus'
import { deptsByAreaCode } from '@/api/job/task'
import TaskAlgorithmBusiness from './TaskAlgorithmBusiness.vue'
@@ -247,8 +247,8 @@
        const end = dayjs(val[1])
        const diff = end.diff(start, 'day')

        if (diff > 30) {
            ElMessage.warning('日期范围不能超过30天')
        if (diff > 31) {
            ElMessage.warning('日期范围不能超过31天')
            dateRange.value = []
            return
        }
@@ -319,13 +319,13 @@
<style lang="scss">
</style>
<style lang="scss" scoped>
.taskAlgorithm {
    :deep() {
        .task-algorithm > div {
            width: 233px !important;
        }
    }
}
// .taskAlgorithm {
//     :deep() {
//         .task-algorithm > div {
//             width: 233px !important;
//         }
//     }
// }
.search-box-test {
    transition: all 0.3s;


 src/views/job/components/TaskAlgorithmBusiness.vue

@@ -3,7 +3,7 @@
    <div class="task-algorithm" v-if="showAlgorithm">
        <el-select
            :teleported="false"
            :style="{ width: setWidth }"
            :style="{ width: pxToRem(setWidth) }"
            v-model="ai_types"
            multiple
            collapse-tags
@@ -18,7 +18,7 @@
    <div class="task-business" v-if="showBusiness">
        <el-select
            :teleported="false"
            :style="{ width: setWidth }"
            :style="{ width: pxToRem(setWidth) }"
            v-model="industry_type"
            placeholder="请选择类型"
            clearable
@@ -31,7 +31,7 @@

<script setup>
import { getMultipleDictionary } from '@/api/job/task'
// import { pxToRem } from '@/utils/rem'
import { pxToRem } from '@/utils/rem'

// 接收父组件传参
const props = defineProps({

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

@@ -114,7 +114,7 @@

<script setup>
import { ElMessage } from 'element-plus'
// import { pxToRem } from '@/utils/rem'
import { pxToRem } from '@/utils/rem'
import { getWaylineList, createTask } from '@/api/job/task'
// import TaskAlgorithmBusiness from '../components/TaskAlgorithmBusiness.vue'
// import TaskMap from './TaskMap.vue'

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

@@ -242,12 +242,12 @@

<style lang="scss" scoped>
.task-intermediate-content {
    margin: 0 20px 16px 10px;
    margin: 0 18px 16px 10px;
    background-color: #ffffff;
    padding: 14px 18px;
    // 表格
    .task-table {
        height: 520px;
        height: 580px;
        margin-top: 18px;
        overflow: auto;
    }

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

@@ -13,7 +13,7 @@
</template>

<script setup>
// import { pxToRem } from '@/utils/rem'
import { pxToRem } from '@/utils/rem'
// import CommonWeather from '@/components/CommonWeather.vue'
// import UserOperate from '@/components/UserOperate.vue'
import TaskTotal from './TaskTotal.vue'

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

@@ -23,7 +23,7 @@
</template>

<script setup>
// import { pxToRem } from '@/utils/rem'
import { pxToRem } from '@/utils/rem'
import { totalJobNum, jobStatistics } from '@/api/job/task'
import { useStore } from 'vuex'
import jhzxpng from '@/assets/images/task/jhzx.png'
@@ -40,10 +40,10 @@
const list = ref([
    { name: '计划执行', value: '0', color: '#1C5CFF', img: jhzxpng },
    { name: '已执行', value: '0', color: '#00AA2D', img: yzxpng },
    { name: '执行中', value: '0', color: '#FFA705', img:  zxzpng},
    { name: '执行失败', value: '0', color: '#FD3E68', img: zxsbpng },
    { name: '待执行', value: '0', color: '#F8BE00', img: dzxpng },
    { name: '取消执行', value: '0', color: '#FF0000', img: qxzxpng },
    { name: '执行中', value: '0', color: '#FFA768', img:  zxzpng},
    { name: '执行失败', value: '0', color: '#FF4848', img: zxsbpng },
    { name: '待执行', value: '0', color: '#00CDC2', img: dzxpng },
    { name: '取消执行', value: '0', color: '#A6A6A6', img: qxzxpng },
])

// 获取任务统计总数
@@ -72,7 +72,6 @@
    () => store.state.task.taskSearchParams,
    newVal => {
        if (newVal) {
            console.log(newVal, '3333')
            getJobStatistics(newVal)
            newVal
        }