| | |
| | | v-model="visible" |
| | | :title="titleEnum[dialogMode]" |
| | | @closed="visible = false" |
| | | :style="{ width: pxToRem(1216) }" |
| | | width="80%" |
| | | destroy-on-close |
| | | > |
| | | <div style="display: flex"> |
| | | <div class="content" style="display: flex"> |
| | | <div class="processBox"> |
| | | <el-steps direction="vertical" :active="processList.length"> |
| | | <el-step v-for="item in processList" :title="item.flowName" :description="item.flowDesc" /> |
| | | </el-steps> |
| | | </div> |
| | | <div class="leftBox"> |
| | | <div class="detail-container" v-if="dialogReadonly"> |
| | | <el-row> |
| | | <div v-if="dialogReadonly"> |
| | | <div class="detail-title">工单详情</div> |
| | | <el-row class="detail-row-view"> |
| | | <el-col :span="12"> |
| | | <div class="label">工单名称</div> |
| | | <div class="val">{{ formData.workOrderName }}</div> |
| | |
| | | <div class="val">{{ formData.remark }}</div> |
| | | </el-col> |
| | | </el-row> |
| | | <div class="detail-title" :style="{ marginTop: pxToRem(20) }">已选设备</div> |
| | | <el-table class="setHeight" ref="deviceTableRef" :data="deviceList" row-key="id"> |
| | | <el-table-column prop="nickname" label="设备名称" /> |
| | | <el-table-column prop="deviceName" label="设备型号" /> |
| | | <el-table-column prop="devicePayload" label="设备负载" /> |
| | | </el-table> |
| | | </div> |
| | | <el-form |
| | | class="gd-dialog-form" |
| | |
| | | </el-col> |
| | | </el-row> |
| | | </el-form> |
| | | <div id="mapContainer" class="gd-cesium"></div> |
| | | <div class="detail-title" :style="{ marginTop: pxToRem(20) }">工单执行范围</div> |
| | | <CommonCesiumMap |
| | | ref="mapRef" |
| | | class="leftMap gd-cesium" |
| | | :active="visible" |
| | | :flat-mode="false" |
| | | :terrain="true" |
| | | :layer-mode="4" |
| | | :boundary="false" |
| | | :zoomToBoundary="false" |
| | | /> |
| | | </div> |
| | | <div> |
| | | <h3>推荐设备</h3> |
| | | <el-table |
| | | class="command-data-cockpit-table" |
| | | ref="deviceTableRef" |
| | | :data="deviceList" |
| | | row-key="id" |
| | | @selection-change="handleDeviceSelectionChange" |
| | | > |
| | | <div class="rightBox" v-if="!dialogReadonly"> |
| | | <div class="detail-title">推荐设备</div> |
| | | <el-table ref="deviceTableRef" :data="deviceList" row-key="id" @selection-change="handleDeviceSelectionChange"> |
| | | <el-table-column type="selection" width="55" :reserve-selection="true" /> |
| | | <el-table-column prop="nickname" label="设备名称" /> |
| | | <el-table-column prop="deviceName" label="设备型号" /> |
| | |
| | | </div> |
| | | |
| | | <template #footer> |
| | | <el-button color="#F2F3F5" @click="visible = false">{{ dialogReadonly ? '关闭' : '取消' }}</el-button> |
| | | <!-- <el-button color="#F2F3F5" @click="visible = false">{{ dialogReadonly ? '关闭' : '取消' }}</el-button>--> |
| | | <el-button |
| | | class="save-btn" |
| | | color="#4C34FF" |
| | | v-if="!dialogReadonly" |
| | | v-if="(!dialogReadonly && !formData.id) || suddenlyEdit" |
| | | :loading="submitting" |
| | | :disabled="submitting" |
| | | @click="handleSubmit" |
| | | > |
| | | 保存 |
| | | 发布 |
| | | </el-button> |
| | | <template v-else> |
| | | <template v-if="requester"> |
| | | <el-button |
| | | class="save-btn" |
| | | color="#4C34FF" |
| | | v-if="editStatus.includes(gdStatus)" |
| | | :loading="submitting" |
| | | :disabled="submitting" |
| | | @click="handleSubmit" |
| | | > |
| | | 发布 |
| | | </el-button> |
| | | <el-button color="#F2F3F5" v-if="gdStatus === '11'">拒单原因</el-button> |
| | | <el-button color="#F2F3F5" @click="statusChange(3)" v-if="gdStatus === '20'">申请取消</el-button> |
| | | <el-button color="#4C34FF" @click="requestModification" v-if="gdStatus === '20'" class="save-btn"> |
| | | 申请修改 |
| | | </el-button> |
| | | </template> |
| | | <template v-else> |
| | | <el-button color="#F2F3F5" v-if="gdStatus === '10'" @click="rejectOrders">拒绝接单</el-button> |
| | | <el-button color="#4C34FF" v-if="gdStatus === '10'" @click="statusChange(1)" class="save-btn">接单</el-button> |
| | | <el-button color="#F2F3F5" v-if="gdStatus === '22'" @click="statusChange(7)">同意修改</el-button> |
| | | <el-button color="#4C34FF" v-if="gdStatus === '22'" @click="statusChange(8)" class="save-btn"> |
| | | 不同意修改 |
| | | </el-button> |
| | | <el-button color="#F2F3F5" v-if="gdStatus === '21'" @click="statusChange(5)">同意取消</el-button> |
| | | <el-button color="#4C34FF" v-if="gdStatus === '21'" @click="statusChange(6)" class="save-btn"> |
| | | 不同意取消 |
| | | </el-button> |
| | | </template> |
| | | </template> |
| | | </template> |
| | | |
| | | <RefuseOrderDialog |
| | | ref="refuseOrderDialogRef" |
| | | v-if="rejectVisible" |
| | | v-model="rejectVisible" |
| | | @success="rejectSuccess" |
| | | /> |
| | | </el-dialog> |
| | | </template> |
| | | |
| | |
| | | import { computed, ref, onMounted, nextTick } from 'vue' |
| | | import { ElMessage } from 'element-plus' |
| | | import { dateRangeFormat, fieldRules, geomAnalysis, getDictLabel } from '@ztzf/utils' |
| | | import { gdWorkOrderDetailApi, gdWorkOrderSaveApi } from './orderManageApi' |
| | | import { gdManageDeviceListApi, gdManageDevicePageApi } from './gdManageDeviceApi' |
| | | import { |
| | | gdWorkOrderDetailApi, |
| | | gdWorkOrderFlowListApi, |
| | | gdWorkOrderHandleStatusApi, |
| | | gdWorkOrderSaveApi, |
| | | } from './orderManageApi' |
| | | import { gdManageDeviceListApi } from './gdManageDeviceApi' |
| | | import { cartesian3Convert } from '@/utils/cesium/mapUtil' |
| | | import * as turf from '@turf/turf' |
| | | import * as Cesium from 'cesium' |
| | | import { DrawPolygon } from '@/utils/cesium/DrawPolygon' |
| | | import { PublicCesium } from '@/utils/cesium/publicCesium' |
| | | import { pxToRem } from '@/utils/rem' |
| | | import dayjs from 'dayjs' |
| | | import RefuseOrderDialog from '@/views/orderView/orderManage/orderManage/RefuseOrderDialog.vue' |
| | | import CommonCesiumMap from '@/components/map-container/common-cesium-map.vue' |
| | | |
| | | // 初始化表单数据 |
| | | const initForm = () => ({ |
| | |
| | | recommendDeviceIds: '', |
| | | }) |
| | | |
| | | const mapRef = ref(null) |
| | | const rejectVisible = ref(false) |
| | | const dictObj = inject('dictObj') |
| | | const dateRange = ref([]) |
| | | const emit = defineEmits(['success']) |
| | |
| | | const submitting = ref(false) // 提交中 |
| | | const dialogReadonly = computed(() => dialogMode.value === 'view') |
| | | const titleEnum = ref({ edit: '编辑', view: '查看', add: '新增' }) |
| | | |
| | | const deviceList = ref([]) // 设备列表 |
| | | const selectedDevices = ref([]) // 选中的设备 |
| | | const deviceTableRef = ref(null) // 设备表格实例 |
| | | const refuseOrderDialogRef = ref(null) |
| | | let viewer |
| | | let drawPolygonExample |
| | | let pointList = [] |
| | | const requester = inject('requester') |
| | | const editStatus = inject('editStatus') |
| | | |
| | | // 工单状态:0草稿、10发布中_接单中、11发布中_拒绝接单、20响应中_待拆分、21响应中_申请取消、22响应中_申请修改、23响应中_已取消、 |
| | | // 24响应中_拒绝取消、25响应中_拒绝修改 30执行中_待全部完成、31执行中_协商修改、40完成待验_待全部验收、50验收通过_待结算、60结算完成_已结算 |
| | | const gdStatus = computed(() => formData.value?.workOrderStatus) |
| | | |
| | | const rules = { |
| | | workOrderName: fieldRules(true, 50), |
| | | workOrderType: fieldRules(true), |
| | | executeStartTime: fieldRules(true), |
| | | deviceLoadDemand: fieldRules(true), |
| | | } |
| | | // 操作类型:1接单,2拒接接单,3申请取消,4申请修改, 5同意取消 6不同意取消 7.同意修改 7.不同意修改 |
| | | function statusChange(operationType) { |
| | | gdWorkOrderHandleStatusApi({ operationType: operationType, workOrderId: formData.value.id }).then(res => { |
| | | visible.value = false |
| | | emit('success') |
| | | }) |
| | | } |
| | | |
| | | const suddenlyEdit = ref(false) |
| | | function requestModification() { |
| | | suddenlyEdit.value = true |
| | | dialogMode.value = 'edit' |
| | | nextTick(() => { |
| | | syncSelection() |
| | | }) |
| | | } |
| | | |
| | | function rejectSuccess() { |
| | | visible.value = false |
| | | emit('success') |
| | | } |
| | | |
| | | function rejectOrders() { |
| | | rejectVisible.value = true |
| | | nextTick(() => { |
| | | refuseOrderDialogRef.value.open({ |
| | | mode: 'add', |
| | | row: { workOrderId: formData.value.id }, |
| | | }) |
| | | }) |
| | | } |
| | | |
| | | // 获取推荐设备列表 |
| | |
| | | } |
| | | ) |
| | | |
| | | const processList = ref([]) |
| | | function loadList() { |
| | | gdWorkOrderFlowListApi({ workOrderId: formData.value.id }).then(res => { |
| | | processList.value = res.data.data |
| | | }) |
| | | } |
| | | |
| | | // 加载详情 |
| | | async function loadDetail() { |
| | | if (!formData.value.id) return |
| | | loadList() |
| | | const res = await gdWorkOrderDetailApi({ id: formData.value.id }) |
| | | formData.value = res?.data?.data ?? {} |
| | | dateRange.value = [formData.value.executeStartTime, formData.value.executeEndTime] |
| | |
| | | material: Cesium.Color.RED, |
| | | }, |
| | | }) |
| | | viewer.flyTo(mian) |
| | | viewer.flyTo(mian, { duration: 0 }) |
| | | } |
| | | |
| | | // 同步关联场景 |
| | |
| | | |
| | | // 初始化地图实例 |
| | | function initMap() { |
| | | const publicCesiumInstance = new PublicCesium({ |
| | | dom: 'mapContainer', |
| | | flatMode: false, |
| | | terrain: true, |
| | | layerMode: 4, |
| | | boundary: false, |
| | | }) |
| | | viewer = publicCesiumInstance.getViewer() |
| | | if (viewer) return |
| | | const map = mapRef.value?.getMap() |
| | | viewer = map?.viewer || null |
| | | } |
| | | |
| | | defineExpose({ open }) |
| | | </script> |
| | | |
| | | <style lang="scss" scoped> |
| | | .leftBox { |
| | | width: 681px; |
| | | .content { |
| | | display: flex; |
| | | gap: 0 20px; |
| | | .leftBox { |
| | | width: 0; |
| | | flex: 1; |
| | | display: flex; |
| | | flex-direction: column; |
| | | .gd-cesium { |
| | | width: 100%; |
| | | height: 423px; |
| | | } |
| | | } |
| | | .rightBox { |
| | | .title { |
| | | font-weight: 500; |
| | | font-size: 14px; |
| | | color: #272e37; |
| | | } |
| | | } |
| | | .processBox { |
| | | width: 312px; |
| | | } |
| | | } |
| | | #mapContainer { |
| | | width: 681px; |
| | | height: 423px; |
| | | |
| | | .setHeight { |
| | | max-height: 300px; |
| | | min-height: 200px; |
| | | } |
| | | </style> |