| | |
| | | v-model="visible" |
| | | :title="titleEnum[dialogMode]" |
| | | @closed="visible = false" |
| | | :style="{ width: pxToRem(1216) }" |
| | | destroy-on-close |
| | | :close-on-click-modal="false" |
| | | > |
| | | <div class="content" style="display: flex"> |
| | | <div class="processBox" v-if="dialogMode !== 'add' && processList.length"> |
| | | <el-timeline class="gd-timeline"> |
| | | <el-timeline-item |
| | | v-for="(activity, index) in processList" |
| | | :key="index" |
| | | :icon="Check" |
| | | :type="index === processList.length - 1 ? 'success' : 'info'" |
| | | :color="activity.color" |
| | | :hollow="activity.hollow" |
| | | :timestamp="activity.flowDesc.split(' ')[1]" |
| | | > |
| | | <div class="item-content"> |
| | | <div>{{ activity.flowDesc.split(' ')[0] }}</div> |
| | | <div class="flowName">{{ activity.flowName }}</div> |
| | | </div> |
| | | </el-timeline-item> |
| | | </el-timeline> |
| | | </div> |
| | | <div class="leftBox"> |
| | | <!-- 查看模式 --> |
| | | <div class="detail-container" v-if="dialogReadonly"> |
| | | <div class="detail-title">工单详情</div> |
| | | <el-row class="detail-row-view"> |
| | | <el-col :span="12"> |
| | | <div class="label">巡查任务名称</div> |
| | |
| | | </el-col> |
| | | </el-row> |
| | | <template v-if="['6', '7', '8'].includes(taskStatus)"> |
| | | <div>任务成功({{ list.length || 0 }}条)</div> |
| | | <div style="display: flex"> |
| | | <div class="detail-title" :style="{ marginTop: pxToRem(10) }">任务成功({{ list.length || 0 }}条)</div> |
| | | <div class="imgBox"> |
| | | <div v-for="item in list"> |
| | | <el-image |
| | | v-if="item.resultUrl" |
| | | :src="item.resultUrl" |
| | | :preview-src-list="[item.resultUrl]" |
| | | fit="cover" |
| | | style="width: 80px; height: 60px" |
| | | preview-teleported |
| | | /> |
| | | </div> |
| | |
| | | </el-col> |
| | | <el-col :span="24"> |
| | | <el-form-item label="巡查任务描述" prop="taskDesc"> |
| | | <el-input class="gd-input" type="textarea" :rows="4" v-model="formData.taskDesc" placeholder="请输入" clearable /> |
| | | <el-input |
| | | class="gd-input" |
| | | type="textarea" |
| | | :rows="4" |
| | | v-model="formData.taskDesc" |
| | | placeholder="请输入" |
| | | clearable |
| | | /> |
| | | </el-form-item> |
| | | </el-col> |
| | | </el-row> |
| | |
| | | <!-- 地图组件 --> |
| | | <CommonCesiumMap |
| | | ref="mapRef" |
| | | class="leftMap gd-cesium" |
| | | class="gd-cesium" |
| | | :active="visible" |
| | | :flat-mode="false" |
| | | :terrain="true" |
| | | :layer-mode="4" |
| | | :boundary="false" |
| | | :zoomToBoundary="false" |
| | | @ready="() => mapRef.flyBoundary()" |
| | | /> |
| | | </div> |
| | | </div> |
| | |
| | | import { ElMessage } from 'element-plus' |
| | | import { fieldRules, getDictLabel } from '@ztzf/utils' |
| | | import { gdPatrolTaskRepublish, gdFlyerPageApi, gdPatrolTaskAuditApi } from './inspectionRequestApi' |
| | | import { gdWorkOrderPageApi } from '../orderManage/orderManageApi' |
| | | import { gdWorkOrderFlowListApi, gdWorkOrderPageApi } from '../orderManage/orderManageApi' |
| | | import { gdManageDeviceListApi } from '../orderManage/gdManageDeviceApi' |
| | | import { pxToRem } from '@/utils/rem' |
| | | import CommonCesiumMap from '@/components/map-container/common-cesium-map.vue' |
| | | import { gdTaskResultListApi } from '@/views/orderView/orderManage/clueEvents/achievementApi' |
| | | import RefuseOrderDialog from '@/views/orderView/orderManage/orderManage/RefuseOrderDialog.vue' |
| | | import RefuseOrderDialog1 from '@/views/orderView/orderManage/inspectionRequest/RefuseOrderDialog1.vue' |
| | | import { Check } from '@element-plus/icons-vue' |
| | | |
| | | // 初始化表单数据 |
| | | const initForm = () => ({ |
| | |
| | | deviceList.value = res?.data?.data ?? [] |
| | | } |
| | | |
| | | const processList = ref([]) |
| | | // 加载时间线list |
| | | function loadList() { |
| | | gdWorkOrderFlowListApi({ workOrderId: formData.value.id,type: '1' }).then(res => { |
| | | processList.value = res.data.data |
| | | }) |
| | | } |
| | | |
| | | // 提交编辑 |
| | | async function handleSubmit() { |
| | | const isValid = await formRef.value?.validate().catch(() => false) |
| | |
| | | async function open({ mode = 'view', row } = {}) { |
| | | dialogMode.value = mode |
| | | formData.value = { ...initForm(), ...row } |
| | | console.log(row) |
| | | ;['6', '7', '8'].includes(row.taskStatus) && getList() |
| | | loadList() |
| | | initMap() |
| | | } |
| | | |
| | |
| | | display: flex; |
| | | gap: 0 20px; |
| | | .leftBox { |
| | | width: 0; |
| | | flex: 1; |
| | | width: 920px; |
| | | .gd-cesium { |
| | | padding-top: 10px; |
| | | width: 100%; |
| | | height: 423px; |
| | | } |
| | | |
| | | } |
| | | .processBox { |
| | | width: 312px; |
| | | .item-content { |
| | | position: relative; |
| | | .flowName { |
| | | width: 80px; |
| | | position: absolute; |
| | | left: -120px; |
| | | top: 0px; |
| | | } |
| | | } |
| | | } |
| | | .imgBox { |
| | | display: flex; |
| | | flex-wrap: wrap; |
| | | gap: 10px; |
| | | > div { |
| | | width: calc((100% - 40px) / 5); /* 5列布局,减去4个10px间隙 */ |
| | | height: 110px; |
| | | flex-shrink: 0; |
| | | } |
| | | .el-image { |
| | | width: 100%; |
| | | height: 100%; |
| | | } |
| | | } |
| | | } |
| | | </style> |