feat: 历史任务详情

罗广辉

2025-04-03 8cdaaafadbbdcff3e55da90fc160191d34ec40c7

feat: 历史任务详情

 src/layout/Header.vue

@@ -50,7 +50,7 @@
]);

const handleClick = ({ path, name }) => {
  if (!['首页', '任务管理'].includes(name)) return ElMessage.warning('正在开发中');
  if (!['首页', '任务管理'].includes(name)) return ElMessage.warning('正在加急开发中...');
  // 更新 leftList 的 active 状态
  leftList.value.forEach(item => {
    item.active = item.path === path;

 src/views/SignMachineNest/MachineLeft/InspectionRaskDetails.vue

File was renamed from src/views/SignMachineNest/components/MachineLeft/InspectionRaskDetails.vue
@@ -14,7 +14,7 @@
import { pxToRem } from '@/utils/rem';
import CommonTitle from '@/components/CommonTitle.vue';
import CommonDateTime from '@/components/CommonDateTime.vue';
import { jobNumBar, eventNumPie } from '@/api/home/index.js'
import { jobNumBar, eventNumPie } from '@/api/home'

// 日期
const currenDate = dayjs().format('YYYY-MM-DD');
@@ -230,4 +230,4 @@
        margin-top: 10px;
    }
}
</style>
</style>

 src/views/SignMachineNest/MachineLeft/MachineData.vue

 src/views/SignMachineNest/MachineLeft/MachineLeft.vue

File was renamed from src/views/SignMachineNest/components/MachineLeft/MachineLeft.vue
@@ -5,7 +5,7 @@
    <!-- 机巢数据 -->
    <MachineData></MachineData>
    <div class="do-return" @click="goBack">
      <img src="@/assets/images/signMachineNest/return.png" alt="" />
      <img src="../../../assets/images/signMachineNest/return.png" alt="" />
    </div>
     <!--巡检任务详情-->
     <InspectionRaskDetails></InspectionRaskDetails>
@@ -17,11 +17,13 @@
import MachineData from './MachineData.vue';
import InspectionRaskDetails from './InspectionRaskDetails.vue';
import { useRouter } from 'vue-router';
import { useStore } from 'vuex';

const router = useRouter();
const store = useStore()

const goBack = () => {
  router.push('/index');
  store.commit('setSingleUavHome', {});
};
</script>

@@ -32,7 +34,7 @@
  color: #e7f5ff;
  .do-return {
    position: absolute;
    top: 56px;
    top: 50px;
    right: -50px;
    cursor: pointer;
    img {
@@ -41,4 +43,4 @@
    }
  }
}
</style>
</style>

 src/views/SignMachineNest/MachineRight/InspectionRaskList.vue

File was renamed from src/views/SignMachineNest/components/MachineRight/InspectionRaskList.vue
@@ -30,12 +30,12 @@
              </span>
            </div>
            <div class="left-b">
              <img src="@/assets/images/signMachineNest/machineRight/date.png" alt="" />{{ item.begin_time }}
              <img src="@/assets/images/signMachineNest/machineRight/name.png" alt="" />{{ item.creator_name || '' }}
              <img src="../../../assets/images/signMachineNest/machineRight/date.png" alt="" />{{ item.begin_time }}
              <img src="../../../assets/images/signMachineNest/machineRight/name.png" alt="" />{{ item.creator_name || '' }}
            </div>
          </div>
          <div class="right">
            <img src="@/assets/images/signMachineNest/machineRight/return.png" alt="">
            <img src="../../../assets/images/signMachineNest/machineRight/return.png" alt="">
          </div>
        </div>
      </div>
@@ -51,7 +51,7 @@
<script setup>
import { Search } from '@element-plus/icons-vue';
import CommonTitle from '@/components/CommonTitle.vue';
import { getBeforeJob, getTodayJob } from '@/api/home/index.js'
import { getBeforeJob, getTodayJob } from '@/api/home'

const isMore = ref(true);
// 控制加载状态
@@ -273,4 +273,4 @@
      }
    }
 }
</style>
</style>

 src/views/SignMachineNest/MachineRight/MachineMonitor.vue

 src/views/SignMachineNest/MachineRight/MachineRight.vue

 src/views/SignMachineNest/MachineRight/MachineStatus.vue

File was renamed from src/views/SignMachineNest/components/MachineRight/MachineStatus.vue
@@ -4,7 +4,7 @@
  <div :style="{ marginLeft: pxToRem(14) }">
    <div class="machine-status">
      <div class="info">
        <img src="@/assets/images/signMachineNest/machineRight/wrj.png" alt="">
        <img src="../../../assets/images/signMachineNest/machineRight/wrj.png" alt="">
        <div class="info-right">
          <div class="name">{{ osdVisible?.callsign || '--' }}</div>
          <div class="wz">
@@ -20,28 +20,28 @@
      <div class="status">
        <div class="card">
          <div>
            <img src="@/assets/images/signMachineNest/machineRight/height.png" alt="">
            <img src="../../../assets/images/signMachineNest/machineRight/height.png" alt="">
            <span class="text">实时真高</span>
          </div>
          <div class="text-data">{{ detailInfo.height || '--' }}<span class="text">米</span></div>
        </div>
        <div class="card">
          <div>
            <img src="@/assets/images/signMachineNest/machineRight/speed.png" alt="">
            <img src="../../../assets/images/signMachineNest/machineRight/speed.png" alt="">
            <span class="text">飞行速度</span>
          </div>
          <div class="text-data">{{ detailInfo.horizontal_speed }}<span class="text">米/秒</span></div>
        </div>
        <div class="card">
          <div>
            <img src="@/assets/images/signMachineNest/machineRight/signal.png" alt="">
            <img src="../../../assets/images/signMachineNest/machineRight/signal.png" alt="">
            <span class="text">信号强度</span>
          </div>
          <div class="text-data">{{ detailInfo.quality }}</div>
        </div>
        <div class="card">
          <div>
            <img src="@/assets/images/signMachineNest/machineRight/electricity.png" alt="">
            <img src="../../../assets/images/signMachineNest/machineRight/electricity.png" alt="">
            <span class="text">电池电量</span>
          </div>
          <div v-if="drone_charge_state.capacity_percent != 0" class="text-data">
@@ -51,14 +51,14 @@
        </div>
        <div class="card">
          <div>
            <img src="@/assets/images/signMachineNest/machineRight/distance.png" alt="">
            <img src="../../../assets/images/signMachineNest/machineRight/distance.png" alt="">
            <span class="text">飞行距离</span>
          </div>
          <div class="text-data">{{ singleTotal.flight_mileage }}<span class="text">km</span></div>
        </div>
        <div class="card">
          <div>
            <img src="@/assets/images/signMachineNest/machineRight/duration.png" alt="">
            <img src="../../../assets/images/signMachineNest/machineRight/duration.png" alt="">
            <span class="text">飞行时长</span>
          </div>
          <div class="text-data">{{ singleTotal.hour_count }}<span class="text">h</span></div>
@@ -75,7 +75,7 @@
import { EModeCode, EDockModeText, EModeText } from '@/utils/staticData/device';
import { getLnglatAltitude } from '@/utils/cesium/mapUtil.js';
import { useStore } from 'vuex';
import MachineTableDetails from '@/views/SignMachineNest/components/MachineRight/MachineTableDetails/MachineTableDetails.vue';
import MachineTableDetails from '@/views/SignMachineNest/MachineRight/MachineTableDetails/MachineTableDetails.vue';

const store = useStore();
// 获取机巢信息

 src/views/SignMachineNest/MachineRight/MachineTableDetails/DeviceEvent.vue

copy from src/views/SignMachineNest/components/MachineRight/MachineTableDetails/DeviceEvent.vue
copy to src/views/SignMachineNest/MachineRight/MachineTableDetails/DeviceEvent.vue
File was copied from src/views/SignMachineNest/components/MachineRight/MachineTableDetails/DeviceEvent.vue
@@ -1,12 +1,12 @@
<template>
    <el-divider content-position="left">相关事件 {{total}}次</el-divider>
    <el-table :data="list" style="width: 100%">
        <el-table-column prop="event_num" label="编号" />
        <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="ai_types" label="关联算法" />
        <el-table-column prop="photo_url" label="图片url" />
        <el-table-column prop="video_url" label="视频url" />
        <el-table-column prop="remark" label="备注" />
        <el-table-column prop="status" label="状态">
            <template #default="scope">
                <el-tag v-if="scope.row.status === 0" type="info">待处理</el-tag>
@@ -17,7 +17,15 @@
                <el-tag v-if="scope.row.status === 5" type="success">已完结</el-tag>
            </template>
        </el-table-column>
        <el-table-column prop="wayline_job_id" label="    任务id" />
    <el-table-column prop="event_dict_key" label="event_dict_key" />
    <el-table-column prop="create_time" label="创建时间" />

    <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>
      </template>
    </el-table-column>
    </el-table>
    <el-pagination
        background
@@ -32,6 +40,7 @@
<script setup>
import { useStore } from 'vuex'
import { getDeviceEventList } from '@/api/home/machineNest'
import { ElMessage } from 'element-plus';


const list = ref([])
@@ -40,14 +49,21 @@
})
const sizeParams = ref({
    current: 1,
    size: 1,
    size: 10,
})
const store = useStore()
const child_sn = computed(() => store.state.home.singleUavHome.child_sn)
const device_sn = computed(() => store.state.home.singleUavHome.device_sn)
const total = ref(0)

const distribution = row => {
    ElMessage.warning('正在加急开发中...')
}
const examine = row => {
  ElMessage.warning('正在加急开发中...')
}

const getList = () => {
    params.value.device_sn = child_sn.value
    params.value.device_sn = device_sn.value
    getDeviceEventList(params.value, sizeParams.value).then(res => {
        const resData = res?.data?.data || {}
        list.value = resData.records

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

File was renamed from src/views/SignMachineNest/components/MachineRight/MachineTableDetails/DeviceJob.vue
@@ -1,5 +1,5 @@
<template>
    <el-divider content-position="left">相关事件 {{ total }}次</el-divider>
    <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="name" label="名称" />
@@ -10,8 +10,12 @@
        <el-table-column prop="area_code" label="地区代码" />
        <el-table-column prop="begin_time" label="开始时间" />
        <el-table-column prop="end_time" label="结束时间" />
        <el-table-column prop="device_names" label="设备名称" />
        <el-table-column prop="creator_name" label="创建者姓名" />
        <el-table-column prop="creator_name" label="创建者" />
        <el-table-column label="操作">
            <template #default="scope">
                <el-button type="primary" link @click="viewJob(scope.row)">查看</el-button>
            </template>
        </el-table-column>
    </el-table>
    <el-pagination
        background
@@ -22,10 +26,14 @@
        :total="total"
        @change="pageChange"
    />

  <DeviceJobDetails v-model:show="deviceJobDetailsShow"/>

</template>
<script setup>
import { useStore } from 'vuex'
import { getDeviceJobList } from '@/api/home/machineNest'
import DeviceJobDetails from './DeviceJobDetails/DeviceJobDetails.vue';

const list = ref([])
const params = ref({
@@ -33,20 +41,28 @@
})
const sizeParams = ref({
    current: 1,
    size: 1,
    size: 10,
})
const store = useStore()
const child_sn = computed(() => store.state.home.singleUavHome.child_sn)
const device_sn = computed(() => store.state.home.singleUavHome.device_sn)
const total = ref(0)
const deviceJobDetailsShow = ref(false)
const jobId = ref(null)
provide('jobId', jobId)
const viewJob = (row) => {
  jobId.value = row.id
  deviceJobDetailsShow.value = true
}

const getList = () => {
    params.value.device_sn = child_sn.value
    params.value.device_sn = device_sn.value
    getDeviceJobList(params.value, sizeParams.value).then(res => {
        const resData = res?.data?.data || {}
        list.value = resData.records
        total.value = resData.total
    })
}

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

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

New file
@@ -0,0 +1,130 @@
<!-- 任务详情 -->
<template>
    <el-dialog
        append-to-body
        modal-class="detailsOfHistoricalTasks"
        v-model="isShow"
        title="历史任务详情"
        :width="pxToRem(1500)"
        :close-on-click-modal="false"
        :destroy-on-close="true"
    >
        <div class="content">
            <div class="contentLeft">
                <el-divider content-position="left">详情</el-divider>
                <div class="infoBox">
                    <div class="itemBox" v-for="item in infoList">
                        <div class="itemTitle">{{ item.name }}：</div>
                        <div class="itemValue">{{ item.value }}</div>
                    </div>
                </div>
                <JobRelatedEvents v-if="isShow" />
                <el-divider content-position="left">任务成果 xxx个</el-divider>
                <div class="imgListBox">
                    <div v-for="item in imgList" class="imgItem">xxx图片</div>
                </div>
            </div>
            <div class="contentRight">map</div>
        </div>
    </el-dialog>
</template>

<script setup>
import { pxToRem } from '@/utils/rem'
import JobRelatedEvents from './JobRelatedEvents.vue'

const isShow = defineModel('show')


const imgList = ref([
    { name: '图片1', url: 'xxx' },
    { name: '图片1', url: 'xxx' },
    { name: '图片1', url: 'xxx' },
    { name: '图片1', url: 'xxx' },
])

const infoList = ref([
    { name: '任务编号', value: 'xxx' },
    { name: '任务所属机巢', value: 'xxx' },
    { name: '关联算法', value: 'xxx' },
    { name: '任务名称', value: 'xxx' },
    { name: '所属单位', value: 'xxx' },
    { name: '任务类型', value: 'xxx' },
    { name: '任务周期', value: 'xxx' },
    { name: '飞行事件', value: 'xxx' },
    { name: '任务频次', value: 'xxx' },
    { name: '任务描述', value: 'xxx' },
])

onMounted(() => {})
</script>

<style lang="scss">
.detailsOfHistoricalTasks {
    .el-dialog {
        --el-dialog-margin-top: 5vh;
    }

    .el-pagination {
        justify-content: center;
        padding: 20px;
    }

    .el-dialog__body {
        height: 80vh;
    }
}
</style>

<style lang="scss" scoped>
.content {
    display: flex;
    height: 100%;

    .contentLeft {
        width: 900px;
        overflow: auto;

        .infoBox {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 10px; // 列之间的间距
            padding: 10px;

            .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;
            }

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

            .itemValue {
                color: #666;
            }
        }

        .imgListBox {
            display: flex;

            .imgItem {
                width: 200px;
                height: 200px;
            }
        }
    }

    .contentRight {
        width: 0;
        flex-grow: 1;
        background: #19ad8d;
    }
}
</style>

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

File was renamed from src/views/SignMachineNest/components/MachineRight/MachineTableDetails/DeviceEvent.vue
@@ -1,6 +1,6 @@
<template>
    <el-divider content-position="left">相关事件 {{total}}次</el-divider>
    <el-table :data="list" style="width: 100%">
    <el-divider content-position="left">关联事件 {{total}}个</el-divider>
    <el-table :data="list" style="width: 100%" >
        <el-table-column prop="event_num" label="编号" />
        <el-table-column prop="event_name" label="名称" />
        <el-table-column prop="media_type" label="类型" />
@@ -18,6 +18,12 @@
            </template>
        </el-table-column>
        <el-table-column prop="wayline_job_id" label="    任务id" />
    <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>
      </template>
    </el-table-column>
    </el-table>
    <el-pagination
        background
@@ -32,9 +38,22 @@
<script setup>
import { useStore } from 'vuex'
import { getDeviceEventList } from '@/api/home/machineNest'
import { ElMessage } from 'element-plus';

const jobId = inject("jobId");

const list = ref([])
const list = ref([
  {event_num:''},
  {event_num:''},
  {event_num:''},
  {event_num:''},
  {event_num:''},
  {event_num:''},
  {event_num:''},
  {event_num:''},
  {event_num:''},
  {event_num:''},
])
const params = ref({
    device_sn: null,
})
@@ -44,7 +63,14 @@
})
const store = useStore()
const child_sn = computed(() => store.state.home.singleUavHome.child_sn)
const total = ref(0)
const total = ref(10)

const distribution = row => {
    ElMessage.warning('正在加急开发中...')
}
const examine = row => {
  ElMessage.warning('正在加急开发中...')
}

const getList = () => {
    params.value.device_sn = child_sn.value
@@ -60,7 +86,7 @@
}

onMounted(() => {
    getList()
    // getList()
})
</script>
<style scoped lang="scss"></style>

 src/views/SignMachineNest/MachineRight/MachineTableDetails/MachineTableDetails.vue

File was renamed from src/views/SignMachineNest/components/MachineRight/MachineTableDetails/MachineTableDetails.vue
@@ -21,8 +21,8 @@
</template>

<script setup>
import DeviceEvent from '@/views/SignMachineNest/components/MachineRight/MachineTableDetails/DeviceEvent.vue'
import DeviceJob from '@/views/SignMachineNest/components/MachineRight/MachineTableDetails/DeviceJob.vue'
import DeviceEvent from '@/views/SignMachineNest/MachineRight/MachineTableDetails/DeviceEvent.vue'
import DeviceJob from '@/views/SignMachineNest/MachineRight/MachineTableDetails/DeviceJob/DeviceJob.vue'
import { pxToRem } from '@/utils/rem';

const isShowDetails = defineModel('show')

 src/views/SignMachineNest/SignMachineNest.vue

@@ -4,8 +4,8 @@
</template>

<script setup>
import MachineLeft from './components/MachineLeft/MachineLeft.vue'
import MachineRight from './components/MachineRight/MachineRight.vue';
import MachineLeft from '@/views/SignMachineNest/MachineLeft/MachineLeft.vue'
import MachineRight from '@/views/SignMachineNest/MachineRight/MachineRight.vue';
import { useConnectWebSocket } from '../../utils/websocket/connect-websocket';
import { getWebsocketUrl } from '@/websocket/util/config';
import { EBizCode } from '@/utils/staticData/enums.js';