| | |
| | | :title="titleEnum[dialogMode]" |
| | | @closed="visible = false" |
| | | destroy-on-close |
| | | width="auto" |
| | | :close-on-click-modal="false" |
| | | width="80%" |
| | | > |
| | | <div class="content" style="display: flex"> |
| | | <div class="processBox" v-if="dialogMode !== 'add' && processList.length"> |
| | | <div class="detail-container" style="display: flex"> |
| | | <div class="detail-left" v-if="dialogMode !== 'add' && processList.length"> |
| | | <el-timeline class="gd-timeline"> |
| | | <el-timeline-item |
| | | v-for="(activity, index) in processList" |
| | |
| | | :type="index === processList.length - 1 ? 'success' : 'info'" |
| | | :color="activity.color" |
| | | :hollow="activity.hollow" |
| | | :timestamp="activity.flowDesc.split(' ')[1] + activity.flowDesc.split(' ')[2]" |
| | | :timestamp="activity.createTime" |
| | | > |
| | | <div class="item-content"> |
| | | <div>{{ activity.flowDesc.split(' ')[0] }}</div> |
| | | <div>{{ activity.operator }}</div> |
| | | <div class="flowName">{{ activity.flowName }}</div> |
| | | </div> |
| | | </el-timeline-item> |
| | | </el-timeline> |
| | | </div> |
| | | <div class="leftBox"> |
| | | |
| | | <div class="detail-right"> |
| | | <!-- 查看模式 --> |
| | | <div class="detail-container" v-if="dialogReadonly"> |
| | | <div class="view-container" v-if="dialogReadonly"> |
| | | <div class="detail-title">工单详情</div> |
| | | <el-row class="detail-row-view"> |
| | | <el-col :span="12"> |
| | |
| | | </el-col> |
| | | <el-col :span="12"> |
| | | <div class="label">巡查任务航线</div> |
| | | <div class="val">{{ getAirName(formData.patrolRouteUrl) }}</div> |
| | | <div class="val val-long"> |
| | | <el-tooltip :content="getAirName(formData.patrolRouteUrl)" placement="top"> |
| | | {{ getAirName(formData.patrolRouteUrl) }} |
| | | </el-tooltip> |
| | | </div> |
| | | </el-col> |
| | | <el-col :span="12"> |
| | | <div class="label">推荐飞手</div> |
| | |
| | | <div class="label">关联工单</div> |
| | | <div class="val">{{ getWorkOrderName(formData.workOrderId) }}</div> |
| | | </el-col> |
| | | <el-col :span="24"> |
| | | <el-col :span="12"> |
| | | <div class="label">巡查任务描述</div> |
| | | <div class="val">{{ formData.taskDesc }}</div> |
| | | </el-col> |
| | | </el-row> |
| | | <template v-if="['6', '7', '8'].includes(taskStatus)"> |
| | | <div class="detail-title" :style="{ marginTop: pxToRem(10) }"> |
| | | 任务成功({{ taskResultList.length || 0 }}条) |
| | | 任务成果({{ taskResultList.length || 0 }}条) |
| | | </div> |
| | | <div class="imgBox"> |
| | | <div v-for="item in taskResultList"> |
| | |
| | | v-model="formData.patrolRouteUrl" |
| | | placeholder="请选择" |
| | | clearable |
| | | @change="getAirDetails" |
| | | > |
| | | <el-option v-for="item in routeOptions" :key="item.id" :label="item.name" :value="item.id" /> |
| | | </el-select> |
| | |
| | | </el-row> |
| | | </el-form> |
| | | |
| | | <div class="detail-title" :style="{ marginTop: pxToRem(10) }">任务航线</div> |
| | | <!-- 地图组件 --> |
| | | <CommonCesiumMap |
| | | ref="mapRef" |
| | |
| | | |
| | | // 获取飞手列表 |
| | | async function getFlyerList() { |
| | | const res = await gdFlyerPageApi({ size: 999 }) |
| | | const res = await gdFlyerPageApi({ size: 999,current: 1 }) |
| | | flyerList.value = res?.data?.data?.records ?? [] |
| | | } |
| | | |
| | |
| | | function loadList() { |
| | | gdWorkOrderFlowListApi({ workOrderId: formData.value.id, type: '1' }).then(res => { |
| | | processList.value = res.data.data |
| | | console.log(processList.value, 'processList.value') |
| | | }) |
| | | } |
| | | |
| | |
| | | } finally { |
| | | } |
| | | } |
| | | |
| | | import { ArrowLineMaterialProperty } from '@/utils/cesium/Material' |
| | | let arrowLineMaterialProperty = new ArrowLineMaterialProperty({ |
| | | color: new Cesium.Color(128 / 255, 215 / 255, 255 / 255, 1), |
| | | directionColor: new Cesium.Color(1, 1, 1, 1), |
| | | outlineColor: new Cesium.Color(1, 1, 1, 1), |
| | | outlineWidth: 0, |
| | | speed: 5, |
| | | }) |
| | | // 获取航线详情 |
| | | function getAirDetails() { |
| | | queryAirById(formData.value.patrolRouteUrl).then(res => { |
| | |
| | | polyline: { |
| | | positions: Cesium.Cartesian3.fromDegreesArray(result), |
| | | clampToGround: true, |
| | | width: 3, |
| | | material: Cesium.Color.RED, |
| | | width: 4, |
| | | material: arrowLineMaterialProperty, |
| | | }, |
| | | }) |
| | | // 渲染起点(蓝色) |
| | | const startPoint = list[0] |
| | | viewer.entities.add({ |
| | | position: Cesium.Cartesian3.fromDegrees(Number(startPoint.longitude), Number(startPoint.latitude), startPoint.height || 0), |
| | | position: Cesium.Cartesian3.fromDegrees( |
| | | Number(startPoint.longitude), |
| | | Number(startPoint.latitude), |
| | | startPoint.height || 0 |
| | | ), |
| | | point: { |
| | | pixelSize: 12, |
| | | color: Cesium.Color.BLUE, |
| | |
| | | // 渲染终点(红色) |
| | | const endPoint = list[list.length - 1] |
| | | viewer.entities.add({ |
| | | position: Cesium.Cartesian3.fromDegrees(Number(endPoint.longitude), Number(endPoint.latitude), endPoint.height || 0), |
| | | position: Cesium.Cartesian3.fromDegrees( |
| | | Number(endPoint.longitude), |
| | | Number(endPoint.latitude), |
| | | endPoint.height || 0 |
| | | ), |
| | | point: { |
| | | pixelSize: 12, |
| | | color: Cesium.Color.RED, |
| | |
| | | </script> |
| | | |
| | | <style lang="scss" scoped> |
| | | .content { |
| | | display: flex; |
| | | gap: 0 20px; |
| | | .leftBox { |
| | | width: 920px; |
| | | .gd-cesium { |
| | | padding-top: 10px; |
| | | width: 100%; |
| | | height: 423px; |
| | | } |
| | | } |
| | | .processBox { |
| | | width: 312px; |
| | | .item-content { |
| | | position: relative; |
| | | |
| | | /* 时间线样式 */ |
| | | :deep(.gd-timeline) { |
| | | padding-left: 90px; |
| | | } |
| | | |
| | | :deep(.el-timeline-item) { |
| | | padding-bottom: 20px; |
| | | .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; |
| | | } |
| | | .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%; |
| | | } |
| | | .el-image { |
| | | width: 100%; |
| | | height: 100%; |
| | | } |
| | | } |
| | | :deep(.el-timeline-item__timestamp) { |
| | | font-size: 12px; |
| | | color: #999; |
| | | margin-top: 2px; |
| | | } |
| | | </style> |