<template>
|
<el-scrollbar v-if="mapStore.focusMarker" :height="mapHeight">
|
<el-card class="p-events-auto wrapper">
|
<el-row justify="space-between">
|
<div class="font-small">{{ scene.name }}</div>
|
<el-button icon="Close" circle @click="mapStore.focusMarker = undefined"></el-button>
|
</el-row>
|
<el-divider></el-divider>
|
<div class="font-small">状态：{{ subtask.status }}</div>
|
<div class="font-small">计划：{{ $fm.formatYMD(subtask.planstarttime) }}</div>
|
<div v-if="subtask.status != '未执行'" class="font-small">
|
<span>执行：{{ $fm.formatYMDH(subtask.executionstarttime) }}</span>
|
<span> - </span>
|
<span>{{ $fm.formatYMDH(subtask.executionendtime) }}</span>
|
</div>
|
<div class="font-small">问题：</div>
|
<problem-item
|
v-for="(item, i) in problemList"
|
:key="item.guid"
|
:index="i + 1"
|
:problem="item"
|
></problem-item>
|
<!-- <div v-for="item in problemList" :key="item.guid">
|
{{ item.problemname }}
|
</div> -->
|
<!-- <el-timeline style="max-width: 600px">
|
<el-timeline-item
|
v-for="(activity, index) in activities"
|
:key="index"
|
:timestamp="activity.timestamp"
|
:hide-timestamp="activity.running"
|
:type="activity.running ? 'danger' : 'success'"
|
:size="activity.running ? 'large' : 'normal'"
|
:hollow="false"
|
>
|
{{ activity.content }}
|
</el-timeline-item>
|
</el-timeline> -->
|
</el-card>
|
</el-scrollbar>
|
</template>
|
|
<script>
|
import { inject } from 'vue'
|
import { useMapStore } from '@/stores/map.js'
|
import { mapStores } from 'pinia'
|
|
import problemApi from '@/api/fysp/problemApi.js'
|
|
/**
|
* 具体巡查任务可视化
|
* 包括地图定位信息展示、巡查任务全流程平铺展示
|
*/
|
export default {
|
setup() {
|
const mapHeight = inject('mapHeight')
|
|
const height = 'height:' + mapHeight
|
return { height, mapHeight }
|
},
|
props: {
|
// subtask: {
|
// type: Object,
|
// default: () => {
|
// return {
|
// guid: 'SMuheEkjswioSn7A',
|
// name: '中科生态数字港项目巡查中科生态数字港项目巡查',
|
// district: '金山区',
|
// planTime: '2024-06-04',
|
// startTime: '2024-06-04 13:31:26',
|
// endTime: '2024-06-04 13:33:37',
|
// userName: '朱正强',
|
// status: '已结束',
|
// total: 4,
|
// checked: 2
|
// }
|
// }
|
// }
|
},
|
data() {
|
return {
|
// activities: [
|
// {
|
// content: '任务创建',
|
// timestamp: '2024-06-04 08:00',
|
// running: false
|
// },
|
// {
|
// content: '开始巡查',
|
// timestamp: '2024-06-04 09:00',
|
// running: false
|
// },
|
// {
|
// content: '结束巡查',
|
// timestamp: '2024-06-04 09:15',
|
// running: false
|
// },
|
// {
|
// content: '完成问题审核',
|
// timestamp: '2024-06-04 10:15',
|
// running: false
|
// },
|
// {
|
// content: '问题整改中...',
|
// timestamp: '2024-06-04 10:15',
|
// running: true
|
// }
|
// ]
|
problemList: []
|
}
|
},
|
computed: {
|
...mapStores(useMapStore),
|
subtask() {
|
return this.mapStore.focusMarker ? this.mapStore.focusMarker.subtask : undefined
|
},
|
scene() {
|
return this.mapStore.focusMarker ? this.mapStore.focusMarker.scene : undefined
|
},
|
inspection() {
|
return this.mapStore.focusMarker ? this.mapStore.focusMarker.inspection : undefined
|
}
|
},
|
watch: {
|
subtask(nV, oV) {
|
if (nV != undefined && nV != oV) {
|
this.fetchProblem(nV.stguid)
|
}
|
}
|
},
|
methods: {
|
fetchProblem(stguid) {
|
problemApi.fetchProblems(stguid).then((res) => {
|
this.problemList = res
|
})
|
}
|
}
|
}
|
</script>
|
|
<style scoped>
|
.wrapper {
|
/* position: absolute; */
|
top: 0;
|
right: 0;
|
/* background-color: wheat; */
|
}
|
|
.el-card {
|
--el-card-padding: 8px;
|
}
|
</style>
|
