吉安感知网项目-前端
罗广辉
2026-01-26 beb95fb5fc166804056abafd70fc01ac27de7621
applications/task-work-order/src/views/orderView/orderManage/inspectionRequest/ViewDiaLog.vue
@@ -4,14 +4,32 @@
      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>
@@ -47,15 +65,14 @@
                  </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>
@@ -149,7 +166,14 @@
                  </el-col>
                  <el-col :span="24">
                     <el-form-item label="巡查任务描述" prop="taskDesc">
                        <el-input class="gd-input" type="textarea" 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>
@@ -158,29 +182,29 @@
            <!-- 地图组件 -->
            <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>
      <template #footer>
         <template v-if="requester">
            <el-button
               v-if="!dialogReadonly || ['1','4'].includes(taskStatus)"
               v-if="!dialogReadonly || ['1', '4'].includes(taskStatus)"
               :loading="submitting"
               :disabled="submitting"
               @click="handleSubmit"
            >
               提交
            </el-button>
            <el-button v-if="['1','4'].includes(taskStatus)" @click="viewDescription">
            <el-button v-if="['1', '4'].includes(taskStatus)" @click="viewDescription">
               {{ gdStatusObj[taskStatus].reason }}
            </el-button>
            <el-button @click="statusChange(3)" v-if="taskStatus === '3'">撤回任务</el-button>
@@ -192,9 +216,9 @@
               {{ gdStatusObj[taskStatus].reason }}
            </el-button>
            <el-button v-if="taskStatus === '0'" @click="addDescription">拒绝签收</el-button>
            <el-button v-if="taskStatus === '0'" @click="statusChange(1)" >签收</el-button>
            <el-button v-if="taskStatus === '3'" @click="addDescription" >驳回</el-button>
            <el-button v-if="taskStatus === '3'" @click="statusChange(4)" >同意</el-button>
            <el-button v-if="taskStatus === '0'" @click="statusChange(1)">签收</el-button>
            <el-button v-if="taskStatus === '3'" @click="addDescription">驳回</el-button>
            <el-button v-if="taskStatus === '3'" @click="statusChange(4)">同意</el-button>
         </template>
      </template>
@@ -212,13 +236,14 @@
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 = () => ({
@@ -258,19 +283,17 @@
   { name: '航线3', id: '3' },
])
const gdStatusObj = {
   '0': { reason: '拒绝原因',operationType: '2' },
   '0': { reason: '拒绝原因', operationType: '2' },
   '1': { reason: '拒绝原因' },
   '2': { reason: '' },
   '3': { reason: '驳回原因',operationType: '5' },
   '3': { reason: '驳回原因', operationType: '5' },
   '4': { reason: '驳回原因' },
   '5': { reason: '' },
   '6': { reason: '拒绝原因' },
   '7': { reason: '拒绝原因' },
   '8': { reason: '' },
}
let viewer
@@ -288,7 +311,6 @@
   visible.value = false
   emit('success')
}
// 填写说明
function addDescription() {
@@ -363,6 +385,14 @@
   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)
@@ -393,7 +423,9 @@
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()
}
@@ -418,12 +450,39 @@
   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>