feat: 历史任务详情UI调整

张含笑

2025-04-14 906058da9b558d186be6023b24e4be901ad1d9c6

feat: 历史任务详情UI调整

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

@@ -1,7 +1,7 @@
 <!--  巡检任务情况-详情 -->
<template>
    <el-dialog
        class="inspection-rask-details-dialog"
        class="inspection-rask-details-dialog ztzf-dialog"
        v-model="isShowDetailsDialog"
        :width="pxToRem(1000)"
        :close-on-click-modal="false"
@@ -340,57 +340,8 @@
.inspection-rask-details-dialog {
    width: 1270px;
    height: 856px;
    background: #0f1929;
    box-shadow: inset 0px -50px 50px 0px rgba(27, 148, 255, 0.13);
    border-radius: 20px 0px 0px 0px;
    border: 2px solid;
    padding: 0 !important;

    border-image: linear-gradient(
            180deg,
            rgba(81, 168, 255, 0),
            rgba(48, 111, 202, 1),
            rgba(255, 255, 255, 1),
            rgba(27, 148, 255, 1)
        )
        2 2;
    /* 头部 */
    .el-dialog__header {
        width: 1270px;
        height: 47px;
        margin-bottom: 14px;
        background: url('/src/assets/images/home/homeLeft/inspection-vector.png') no-repeat center;
        background-size: 100% 100%;
        font-weight: bold;
        font-size: 16px;
        line-height: 47px;
    }

    .el-dialog .el-dialog__header {
        /* margin: 0px !important; */
        padding: 0px !important;
        padding-left: 0px !important;
    }
    /* 头部 */
    .el-dialog__title {
        width: 112px;
        height: 19px;
        font-family: Segoe UI, Segoe UI;
        font-weight: bold;
        font-size: 16px;
        line-height: 16px;
        text-shadow: 0px 0px 5px rgba(154, 218, 255, 0.6);
        text-align: left;
        font-style: normal;
        text-transform: none;
        background: linear-gradient(90deg, #fbfdff 0%, #86d4ff 100%);
        margin-left: 16px;
        -webkit-background-clip: text; /* 背景被裁剪成文字的前景色 */
        -webkit-text-fill-color: transparent; /* 文字填充颜色变透明 */
    }

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

 src/views/SignMachineNest/MachineRight/MachineStatus/MachineTableDetails/DeviceJob/DeviceJobDetails/DeviceJobDetails.vue

@@ -1,6 +1,7 @@
<!-- 任务详情 -->
<template>
    <el-dialog
        class="ztzf-dialog"
        append-to-body
        modal-class="detailsOfHistoricalTasks"
        v-model="isShow"
@@ -11,19 +12,35 @@
    >
        <div class="content">
            <div class="contentLeft">
                <el-divider content-position="left">详情</el-divider>
                <div class="machineTableDetailsTitle"><span>详情</span></div>
                <div class="infoBox">
                    <div class="itemBox" v-for="item in infoList">
                    <div class="itemBoxLeft">
                        <div v-for="(item, index) in infoList" :key="index">
                            <div class="itemBox">
                        <div class="itemTitle">{{ item.name }}：</div>
                        <div class="itemValue">{{ item.value }}</div>
                                <div class="itemValue">{{ item.value ? item.value :''}}</div>
                            </div>
                        </div>
                    </div>
                    <div class="itemBoxRight">
                        <div class="itemTitle">关联算法：</div>
                        <div class="itemValue">{{ flystatus }}</div>
                    </div>
                </div>
                <JobRelatedEvents v-if="isShow" />
                <el-divider content-position="left">任务成果 xxx个</el-divider>
                <div class="devicetitle" v-if="isShow">
                    <p>
                        任务成果
                        <span>{{ total }}</span>
                        个
                    </p>
                    <p class="more">更多</p>
                </div>
                <div class="imgListBox">
                    <el-image
                        class="imgItem"
                        v-for="(item, index) in achievementList"
                        :key="index"
                        :src="item.url"
                        :preview-src-list="achievementList.map(i => i.url)"
                        show-progress
@@ -43,22 +60,20 @@
import JobRelatedEvents from './JobRelatedEvents.vue'
import { getJobDetails, getJobInfoFiles } from '@/api/home/task'
import DeviceJobDetailsMap from './DeviceJobDetailsMap.vue'

const isShow = defineModel('show')

const infoList = ref([
    { name: '任务编号', value: '', field: 'id' },
    { name: '任务编号', value: '', field: 'job info num' },
    { name: '任务所属机巢', value: '', field: 'device_names' },
    { name: '关联算法', value: '', field: 'ai_type_str' },
    { name: '任务名称', value: '', field: 'name' },
    { name: '所属单位', value: '', field: 'dept_name' },
    { name: '任务类型', value: '', field: 'industry_type_str' },
    { name: '任务时间', value: '', field: 'begin_time' + ' - ' + 'end_time' },
    { name: '飞行事件', value: '', field: 'event_number' },
    { name: '任务周期', value: '', field: 'rep_rule_val' },
    { name: '任务频次', value: '', field: 'rep_fre_val' },
    { name: '任务频次', value: '', field: 'rep_rule_type' + ' - ' + 'rep_rule_val' },
    { name: '任务描述', value: '', field: 'remark' },
])

// 机巢状态
const flystatus = ref('')
const detailsData = ref({
    id: null,
    remark: null,
@@ -75,21 +90,34 @@
    creator_name: null,
    way_lines: [],
})

const total = ref(0)
const achievementList = ref([])

const wayLineJodInfoId = inject('wayLineJodInfoId')
const getAchievement = () => {
    getJobInfoFiles({ jobInfoId: wayLineJodInfoId.value }).then(res => {
        achievementList.value = res.data.data
        total.value = res.data.data.length
    })
}
const getDetails = () => {
    getJobDetails({ wayLineJobInfoId: wayLineJodInfoId.value }).then(res => {
    console.log('res',res);
	
        detailsData.value = res.data.data
        infoList.value.forEach(item => {
            if (item.name === '任务时间') {
                item.value = detailsData.value.begin_time.slice(0,10) + '-' + detailsData.value.end_time.slice(0,10)
				
            } 
        else if (item.name === '任务频次') {
                item.value === undefined ?'': detailsData.value.rep_rule_type + '-' + detailsData.value.rep_rule_val 
            }
            else {
            item.value = detailsData.value?.[item.field] || ''
            }
        })
        flystatus.value = res.data.data.ai_type_str
        // console.log('历史任务详情', res.data.data)
    })
}

@@ -124,32 +152,79 @@
    height: 100%;

    .contentLeft {
        margin-left: 35px;
        margin-right: 24px;
        width: 900px;
        overflow: auto;

        .machineTableDetailsTitle {
            margin-bottom: 16px;
            background: url('/src/assets/images/signMachineNest/machineRight/detailtitle.png') no-repeat center;
            background-size: 100% 100%;
            span {
                display: inline-block;
                margin-left: 30px;
                font-size: 16px;
                color: #ddf0ff;
                line-height: 20px;
                text-align: left;
                margin-bottom: 8px;
            }
        }
        .devicetitle {
            margin-bottom: 16px;
            background: url('/src/assets/images/signMachineNest/machineRight/detailtitle.png') no-repeat center;
            background-size: 100% 100%;
            display: flex;
            justify-content: space-between;
            align-content: center;
            p {
                display: inline-block;
                margin-left: 30px;
                font-size: 16px;
                color: #ddf0ff;
                line-height: 20px;
                text-align: left;
                margin-bottom: 8px;
                span {
                    font-size: 26px;
                    color: #0282ff;
                    font-weight: bold;
                }
            }
            .more {
                color: #2f9dff;
                font-size: 14px;
                padding-top: 5px;
                cursor: pointer;
            }
        }
        .infoBox {
            display: flex;
            justify-content: space-between;
            .itemBoxLeft {
                flex: 1;
            display: grid;
            grid-template-columns: repeat(3, 1fr);
                grid-template-columns: repeat(2, 1fr);
            gap: 10px; // 列之间的间距
            padding: 10px;

                font-size: 14px;
            .itemBox {
                background-color: #fff;
                border: 1px solid #ddd;
                border-radius: 4px;
                padding: 15px;
                box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
                display: flex;
                align-items: center;
                    margin-bottom: 24px;
            }

            }
            .itemTitle {
                font-weight: bold;
                color: #333;
                color: #fff;
            }

            .itemValue {
                color: #666;
                font-weight: bold;
                color: #fff;
            }
            .itemBoxRight {
                width: 262px;
                display: flex;
            }
        }

@@ -169,6 +244,7 @@
        width: 0;
        flex-grow: 1;
        background: #19ad8d;
        margin-right: 17px;
    }
}
</style>

 src/views/SignMachineNest/MachineRight/MachineStatus/MachineTableDetails/DeviceJob/DeviceJobDetails/JobRelatedEvents.vue

@@ -1,47 +1,42 @@
<template>
    <el-divider content-position="left">关联事件 {{total}}个</el-divider>
    <el-table :data="list" style="width: 100%" >
        <el-table-column prop="id" label="ID" />
        <el-table-column prop="event_name" label="名称" />
        <el-table-column prop="media_type" label="类型" />
        <el-table-column prop="photo_url" label="图片">
    <div class="machineTableDetailsTitle"><span>关联事件</span></div>
    <div class="ztzf-table">
        <el-table
        :row-class-name="tableRowClassName"
            :data="list"
            style="width: 100%"
            :row-style="{ height: '38px', fontSize: '14px', 'text-align': 'center' }"
            :header-cell-style="{ 'text-align': 'center', height: '36px', fontSize: '14px' }"
        >
            <el-table-column prop="id" label="事件编号" />
            <el-table-column show-overflow-tooltip prop="event_name" label="事件名称" />
            <el-table-column show-overflow-tooltip prop="create_user" label="所属单位" />
            <el-table-column show-overflow-tooltip prop="remark" label="事件内容" />
            <el-table-column show-overflow-tooltip prop="ai_types" label="关联算法" />
            <el-table-column prop="status" label="工单状态">
      <template #default="scope">
        <el-image
          :style="{width: pxToRem(50), height:  pxToRem(50)}"
          :src="scope.row.photo_url"
          :preview-src-list="[scope.row.photo_url]"
          show-progress
                    preview-teleported
          :initial-index="4"
          fit="cover"
        />
                    <div class="pending" v-if="scope.row.status === 0">待处理</div>
                    <div class="reviewed" v-if="scope.row.status === 2">待审核</div>
                    <div class="processing" v-if="scope.row.status === 3">处理中</div>
                    <div class="done" v-if="scope.row.status === 4">已完成</div>
                    <div class="ended" v-if="scope.row.status === 5">已完结</div>
					
      </template>
    </el-table-column>
        <el-table-column prop="video_url" label="视频" />
        <el-table-column prop="remark" label="备注" />
        <el-table-column prop="status" label="状态">
            <el-table-column label="操作" width="80">
            <template #default="scope">
                <el-tag v-if="scope.row.status === 0" type="info">待处理</el-tag>
                <el-tag v-if="scope.row.status === 1" type="success">待分拨</el-tag>
                <el-tag v-if="scope.row.status === 2" type="warning">待处理</el-tag>
                <el-tag v-if="scope.row.status === 3" type="success">处理中</el-tag>
                <el-tag v-if="scope.row.status === 4" type="success">已完成</el-tag>
                <el-tag v-if="scope.row.status === 5" type="success">已完结</el-tag>
            </template>
        </el-table-column>
    <el-table-column label="操作" >
      <template #default="scope">
        <el-button type="primary" link @click="examine(scope.row)">审核</el-button>
        <el-button type="primary" link @click="distribution(scope.row)">分拨</el-button>
                    <div class="ztzf-view" @click="examine(scope.row)">查看</div>
      </template>
    </el-table-column>
    </el-table>
    </div>
    <el-pagination
    class="ztzf-pagination"
        background
        :page-sizes="[10, 20, 30, 50]"
        v-model:current-page="sizeParams.current"
        v-model:page-size="sizeParams.size"
        layout="total, sizes, prev, pager, next, jumper"
        layout=" prev, pager, next,sizes, jumper"
        :total="total"
        @change="pageChange"
    />
@@ -49,13 +44,12 @@
<script setup>
import { useStore } from 'vuex'
import { getDeviceEventList } from '@/api/home/machineNest'
import { ElMessage } from 'element-plus';
import { ElMessage } from 'element-plus'
import { pxToRem } from '@/utils/rem'


const list = ref()
const params = ref({
  wayLineJodInfoId:null
    wayLineJodInfoId: null,
})
const sizeParams = ref({
    current: 1,
@@ -71,7 +65,7 @@
const examine = row => {
  ElMessage.warning('正在加急开发中...')
}
const wayLineJodInfoId = inject("wayLineJodInfoId");
const wayLineJodInfoId = inject('wayLineJodInfoId')

const getList = () => {
    params.value.wayLineJodInfoId = wayLineJodInfoId.value
@@ -79,17 +73,60 @@
        const resData = res?.data?.data || {}
        list.value = resData.records
        total.value = resData.total
		
    })
}


const pageChange = val => {
    sizeParams.value.current = val
    getList()
}

// 表格隔行变色
const tableRowClassName = ({ row, rowIndex }) => {
    if (rowIndex % 2 === 1) {
        return 'warning-row'
    } else {
        return 'success-row'
    }
}
onMounted(() => {
    getList()
})
</script>
<style scoped lang="scss"></style>
<style scoped lang="scss">
.machineTableDetailsTitle {
    margin-bottom: 16px;
    background: url('/src/assets/images/signMachineNest/machineRight/detailtitle.png') no-repeat center;
    background-size: 100% 100%;
    span {
        display: inline-block;
        margin-left: 30px;
        font-size: 16px;
        color: #ddf0ff;
        line-height: 20px;
        text-align: left;
        margin-bottom: 8px;
    }
}

// 待处理
.pending{
color: #FF7411;
}
// 待审核
.reviewed{
color: #8CFEA7;
}
// 处理中
.processing{
color: #FFC398;
}
// 已完成
.done{
color: #AFD9FB;
}
// 已完结
.ended{
color: #11C4FF;
}
</style>