| | |
| | | @closed="visible = false" |
| | | width="80%" |
| | | destroy-on-close |
| | | :close-on-click-modal="false" |
| | | > |
| | | <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 v-for="(item, index) in processList">{{ index }}-{{ item.flowName }}{{ item.flowDesc }}</div>--> |
| | | <div class="processBox" v-if="dialogMode !== 'add'"> |
| | | <div class="detail-title">工单记录</div> |
| | | <div class="process"> |
| | | <OrderStepBar :processList="processList" /> |
| | | </div> |
| | | </div> |
| | | <div class="leftBox"> |
| | | <div v-if="dialogReadonly"> |
| | |
| | | </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 class="setHeight gd-dialog-table" ref="deviceTableRef" :data="deviceList" row-key="id"> |
| | | <el-table-column type="index" label="序号" /> |
| | | <el-table-column prop="nickname" label="设备名称" /> |
| | | <el-table-column prop="deviceName" label="设备型号" /> |
| | | <el-table-column prop="devicePayload" label="设备负载" /> |
| | | </el-table> |
| | | <template v-if="hasPatrolTaskList"> |
| | | <div class="detail-title" :style="{ marginTop: pxToRem(20) }">巡查任务名称</div> |
| | | <el-table class="setHeight gd-dialog-table" :data="patrolTaskList" row-key="id"> |
| | | <el-table-column prop="patrolTaskName" show-overflow-tooltip label="巡查任务名称" /> |
| | | <el-table-column prop="patrolTaskType" show-overflow-tooltip label="巡查任务类型"> |
| | | <template v-slot="{ row }"> |
| | | {{ getDictLabel(row.patrolTaskType, dictObj.workOrderType) }} |
| | | </template> |
| | | </el-table-column> |
| | | <el-table-column prop="taskStatus" show-overflow-tooltip label="任务状态"> |
| | | <template v-slot="{ row }"> |
| | | {{ getDictLabel(row.taskStatus, dictObj.taskStatus) }} |
| | | </template> |
| | | </el-table-column> |
| | | <el-table-column prop="executeTime" show-overflow-tooltip label="任务执行时间" /> |
| | | <el-table-column prop="recommendFlyerName" show-overflow-tooltip label="选择飞手" /> |
| | | <el-table-column prop="deviceName" show-overflow-tooltip label="选择设备" /> |
| | | </el-table> |
| | | </template> |
| | | </div> |
| | | <el-form |
| | | class="gd-dialog-form" |
| | |
| | | :disabled="dialogReadonly" |
| | | label-width="90px" |
| | | > |
| | | <div class="detail-title">工单详情</div> |
| | | <el-row> |
| | | <el-col :span="12"> |
| | | <el-form-item label="工单名称" prop="workOrderName"> |
| | |
| | | <el-form-item label="执行时间" prop="executeStartTime"> |
| | | <el-date-picker |
| | | class="gd-date-picker" |
| | | popper-class="gd-date-picker-popper" |
| | | v-model="dateRange" |
| | | type="daterange" |
| | | range-separator="至" |
| | |
| | | v-model="formData.deviceLoadDemand" |
| | | placeholder="请选择" |
| | | clearable |
| | | @change="loadDemandChange" |
| | | > |
| | | <el-option |
| | | v-for="item in dictObj.deviceLoadDemand" |
| | |
| | | </el-col> |
| | | <el-col :span="24"> |
| | | <el-form-item label="工单备注" prop="remark"> |
| | | <el-input class="gd-input" type="textarea" v-model="formData.remark" placeholder="请输入" clearable /> |
| | | <el-input |
| | | class="gd-input" |
| | | type="textarea" |
| | | :rows="3" |
| | | v-model="formData.remark" |
| | | placeholder="请输入" |
| | | clearable |
| | | /> |
| | | </el-form-item> |
| | | </el-col> |
| | | </el-row> |
| | | </el-form> |
| | | |
| | | <div class="detail-title" :style="{ marginTop: pxToRem(20) }"> |
| | | <span class="required-star" v-if="!dialogReadonly">*</span> |
| | | 工单执行范围 |
| | | </div> |
| | | <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="mapReady" |
| | | /> |
| | | </div> |
| | | <div class="rightBox" v-if="!dialogReadonly"> |
| | | <div class="detail-title">推荐设备</div> |
| | | <el-table ref="deviceTableRef" :data="deviceList" row-key="id" @selection-change="handleDeviceSelectionChange"> |
| | | <div class="detail-title"> |
| | | <span class="required-star" v-if="!dialogReadonly">*</span> |
| | | 推荐设备 |
| | | </div> |
| | | <el-table |
| | | class="separateTable" |
| | | :empty-text=" |
| | | formData.deviceLoadDemand && pointList.length ? '暂无数据' : '请先选择设备需求并在地图上绘制工单范围' |
| | | " |
| | | ref="deviceTableRef" |
| | | :data="formData.deviceLoadDemand && pointList.length ? 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 v-if="['11', '21', '23', '31', '60'].includes(gdStatus)" @click="viewDescription" color="#F2F3F5"> |
| | | {{ gdStatusObj[gdStatus]?.reason }} |
| | | </el-button> |
| | | |
| | | <template v-if="!suddenlyEdit"> |
| | | <el-button |
| | | @click="addDescription" |
| | | v-if="['20'].includes(gdStatus) && permission.order_applyCancel" |
| | | color="#F2F3F5" |
| | | > |
| | | 申请取消 |
| | | </el-button> |
| | | <el-button |
| | | color="#4C34FF" |
| | | @click="requestModification" |
| | | v-if="['20'].includes(gdStatus) && permission.order_applyEdit" |
| | | > |
| | | 申请修改 |
| | | </el-button> |
| | | </template> |
| | | <el-button |
| | | class="save-btn" |
| | | color="#4C34FF" |
| | | v-if="(!dialogReadonly && !formData.id) || suddenlyEdit" |
| | | v-if="(['11'].includes(gdStatus) || suddenlyEdit || !formData.id) && permission.order_release" |
| | | :loading="submitting" |
| | | :disabled="submitting" |
| | | color="#4C34FF" |
| | | @click="handleSubmit" |
| | | > |
| | | 发布 |
| | | {{ gdStatus === '11' || !gdStatus ? '发布' : '提交修改' }} |
| | | </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> |
| | | <el-button v-if="gdStatus === '50' && permission.order_settlement" @click="addDescription" color="#F2F3F5"> |
| | | 结算 |
| | | </el-button> |
| | | <template v-if="permission.order_controlOrder"> |
| | | <el-button v-if="gdStatus === '10'" @click="addDescription" color="#F2F3F5">拒绝接单</el-button> |
| | | <el-button v-if="gdStatus === '10'" @click="statusChange(1)" color="#4C34FF">接单</el-button> |
| | | </template> |
| | | <template v-if="permission.order_controlEdit"> |
| | | <el-button v-if="gdStatus === '22'" @click="statusChange(8)" color="#F2F3F5">驳回</el-button> |
| | | <el-button v-if="gdStatus === '22'" @click="statusChange(7)" color="#4C34FF">同意</el-button> |
| | | </template> |
| | | <template v-if="permission.order_controlCancel"> |
| | | <el-button v-if="gdStatus === '21'" @click="statusChange(6)" color="#F2F3F5">驳回</el-button> |
| | | <el-button v-if="gdStatus === '21'" @click="statusChange(5)" color="#4C34FF">通过</el-button> |
| | | </template> |
| | | <el-button v-if="gdStatus === '30' && permission.order_applyNegotiation" @click="addDescription" color="#4C34FF"> |
| | | 协商修改 |
| | | </el-button> |
| | | <el-button |
| | | v-if="gdStatus === '31' && permission.order_controlNegotiation" |
| | | @click="statusChange(10)" |
| | | color="#4C34FF" |
| | | > |
| | | 同意 |
| | | </el-button> |
| | | </template> |
| | | |
| | | <RefuseOrderDialog |
| | |
| | | </template> |
| | | |
| | | <script setup> |
| | | import { computed, ref, onMounted, nextTick } from 'vue' |
| | | import { computed, ref, nextTick } from 'vue' |
| | | import { ElMessage } from 'element-plus' |
| | | import { dateRangeFormat, fieldRules, geomAnalysis, getDictLabel } from '@ztzf/utils' |
| | | import { dateRangeFormat, fieldRules, flyVisual, geomAnalysis, getDictLabel } from '@ztzf/utils' |
| | | import { |
| | | gdWorkOrderDetailApi, |
| | | gdWorkOrderFlowListApi, |
| | |
| | | import { gdManageDeviceListApi } from './gdManageDeviceApi' |
| | | import { cartesian3Convert } from '@/utils/cesium/mapUtil' |
| | | import * as Cesium from 'cesium' |
| | | import { DrawPolygon } from '@/utils/cesium/DrawPolygon' |
| | | import { DrawPolygon } from '@ztzf/utils' |
| | | 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' |
| | | import { gdPatrolTaskPageApi } from '@/views/orderView/orderManage/inspectionRequest/inspectionRequestApi' |
| | | import { Check } from '@element-plus/icons-vue' |
| | | import droneIcon from '@/assets/images/orderView/orderManage/drone.png' |
| | | import droneActiveIcon from '@/assets/images/orderView/orderManage/droneActive.png' |
| | | import { useStore } from 'vuex' |
| | | import OrderStepBar from '@/views/orderView/orderManage/orderManage/OrderStepBar.vue' |
| | | const store = useStore() |
| | | const permission = computed(() => store.state.user.permission) |
| | | |
| | | // 初始化表单数据 |
| | | const initForm = () => ({ |
| | |
| | | const rejectVisible = ref(false) |
| | | const dictObj = inject('dictObj') |
| | | const dateRange = ref([]) |
| | | const patrolTaskList = ref([]) |
| | | const emit = defineEmits(['success']) |
| | | const formRef = ref(null) // 表单实例 |
| | | const formData = ref(initForm()) // 表单数据 |
| | |
| | | const refuseOrderDialogRef = ref(null) |
| | | let viewer |
| | | let drawPolygonExample |
| | | let pointList = [] |
| | | const requester = inject('requester') |
| | | const editStatus = inject('editStatus') |
| | | let pointList = ref([]) |
| | | const suddenlyEdit = ref(false) |
| | | const processList = ref([]) |
| | | let viewPlane |
| | | const hasPatrolTaskList = computed(() => ['30', '40', '50', '60'].includes(String(formData.value.workOrderStatus))) |
| | | |
| | | const gdStatusObj = { |
| | | '10': { reason: '拒单原因', operationType: '2', title: '拒绝接单' }, |
| | | '11': { reason: '拒单原因' }, |
| | | '20': { reason: '原因', operationType: '3', title: '申请取消' }, |
| | | '21': { reason: '取消原因' }, |
| | | '23': { reason: '取消原因' }, |
| | | '30': { reason: '修改原因', operationType: '9', title: '协商修改' }, |
| | | '31': { reason: '修改原因' }, |
| | | '40': { reason: '' }, |
| | | '50': { reason: '情况说明', operationType: '11', title: '结算' }, |
| | | '60': { reason: '情况说明' }, |
| | | } |
| | | |
| | | // 工单状态:0草稿、10发布中_接单中、11发布中_拒绝接单、20响应中_待拆分、21响应中_申请取消、22响应中_申请修改、23响应中_已取消、 |
| | | // 24响应中_拒绝取消、25响应中_拒绝修改 30执行中_待全部完成、31执行中_协商修改、40完成待验_待全部验收、50验收通过_待结算、60结算完成_已结算 |
| | | // 30执行中_待全部完成、31执行中_协商修改、40完成待验_待全部验收、50验收通过_待结算、60结算完成_已结算 |
| | | const gdStatus = computed(() => formData.value?.workOrderStatus) |
| | | |
| | | const rules = { |
| | |
| | | executeStartTime: fieldRules(true), |
| | | deviceLoadDemand: fieldRules(true), |
| | | } |
| | | // 操作类型:1接单,2拒接接单,3申请取消,4申请修改, 5同意取消 6不同意取消 7.同意修改 7.不同意修改 |
| | | |
| | | // 操作类型:1接单,2拒接接单,3申请取消,4申请修改, 5同意取消 |
| | | // 6不同意取消 7.同意修改 8.不同意修改 9.协商修改,10:同意协商修改,11.结算 |
| | | function statusChange(operationType) { |
| | | gdWorkOrderHandleStatusApi({ operationType: operationType, workOrderId: formData.value.id }).then(res => { |
| | | gdWorkOrderHandleStatusApi({ |
| | | operationType: operationType, |
| | | workOrderId: formData.value.id, |
| | | }).then(res => { |
| | | visible.value = false |
| | | emit('success') |
| | | }) |
| | | } |
| | | |
| | | const suddenlyEdit = ref(false) |
| | | function requestModification() { |
| | | // 申请修改按钮 |
| | | async function requestModification() { |
| | | suddenlyEdit.value = true |
| | | dialogMode.value = 'edit' |
| | | await getDeviceList() |
| | | nextTick(() => { |
| | | syncSelection() |
| | | viewPlane && viewer.entities.remove(viewPlane) |
| | | editPolygon() |
| | | }) |
| | | } |
| | | |
| | | // 填写说明弹框回调 |
| | | function rejectSuccess() { |
| | | visible.value = false |
| | | emit('success') |
| | | } |
| | | |
| | | function rejectOrders() { |
| | | // 填写说明 |
| | | function addDescription() { |
| | | rejectVisible.value = true |
| | | nextTick(() => { |
| | | refuseOrderDialogRef.value.open({ |
| | | mode: 'add', |
| | | row: { workOrderId: formData.value.id }, |
| | | row: formData.value, |
| | | type: gdStatusObj[gdStatus.value].operationType, |
| | | formLabel: gdStatusObj[gdStatus.value].reason, |
| | | title: gdStatusObj[gdStatus.value]?.title || '新增', |
| | | }) |
| | | }) |
| | | } |
| | | |
| | | // 查看说明 |
| | | function viewDescription() { |
| | | rejectVisible.value = true |
| | | nextTick(() => { |
| | | refuseOrderDialogRef.value.open({ |
| | | mode: 'view', |
| | | row: formData.value, |
| | | formLabel: gdStatusObj[gdStatus.value].reason, |
| | | }) |
| | | }) |
| | | } |
| | |
| | | // 获取推荐设备列表 |
| | | async function getDeviceList() { |
| | | try { |
| | | const res = await gdManageDeviceListApi({ current: 1, size: 1000, ids: formData.value.recommendDeviceIds }) |
| | | const str = [...pointList.value, pointList.value[0]].map(item => `${item.longitude} ${item.latitude}`).join(',') |
| | | let geom = `POLYGON((${str}))` |
| | | const res = await gdManageDeviceListApi({ |
| | | deviceIds: dialogMode.value === 'add' ? '' : formData.value.recommendDeviceIds, |
| | | devicePayload: formData.value?.deviceLoadDemand, |
| | | geom: geom, |
| | | }) |
| | | deviceList.value = res?.data?.data ?? [] |
| | | } catch (error) { |
| | | console.error('获取设备列表失败:', error) |
| | | } |
| | | } |
| | | |
| | | // 设备需求变化 |
| | | async function loadDemandChange() { |
| | | formData.value.recommendDeviceIds = '' |
| | | selectedDevices.value = [] |
| | | await getDeviceList() |
| | | syncSelection() |
| | | } |
| | | |
| | | // 设备选择变化 |
| | |
| | | async function handleSubmit() { |
| | | const isValid = await formRef.value?.validate().catch(() => false) |
| | | if (!isValid) return |
| | | if (!pointList.length) { |
| | | ElMessage.warning('请绘制范围') |
| | | return |
| | | if (!pointList.value.length) { |
| | | return ElMessage.warning('请绘制范围') |
| | | } |
| | | if (!formData.value.recommendDeviceIds) { |
| | | return ElMessage.warning('请选择设备') |
| | | } |
| | | submitting.value = true |
| | | try { |
| | | const str = [...pointList, pointList[0]].map(item => `${item.longitude} ${item.latitude}`).join(',') |
| | | const str = [...pointList.value, pointList.value[0]].map(item => `${item.longitude} ${item.latitude}`).join(',') |
| | | formData.value.geom = `POLYGON((${str}))` |
| | | if (!formData.value.id) { |
| | | formData.value.workOrderStatus = '10' |
| | |
| | | } |
| | | } |
| | | |
| | | watch( |
| | | () => dateRange.value, |
| | | newVal => { |
| | | const range = dateRangeFormat(dateRange.value) |
| | | formData.value.executeStartTime = range[0] |
| | | formData.value.executeEndTime = range[1] |
| | | } |
| | | ) |
| | | |
| | | const processList = ref([]) |
| | | // 加载时间线list |
| | | function loadList() { |
| | | gdWorkOrderFlowListApi({ workOrderId: formData.value.id }).then(res => { |
| | | gdWorkOrderFlowListApi({ workOrderId: formData.value.id, type: '0' }).then(res => { |
| | | processList.value = res.data.data |
| | | }) |
| | | } |
| | |
| | | |
| | | // 绘制完成回调 |
| | | const drawFinished = async data => { |
| | | pointList = _.cloneDeep(data).map(item => { |
| | | pointList.value = _.cloneDeep(data).map(item => { |
| | | const val = cartesian3Convert(item, viewer) |
| | | return { ...val, lng: val.longitude, lat: val.latitude } |
| | | }) |
| | | formData.value.recommendDeviceIds = '' |
| | | selectedDevices.value = [] |
| | | await getDeviceList() |
| | | syncSelection() |
| | | } |
| | | |
| | | // 编辑面 |
| | | function editPolygon() { |
| | | if (!formData.value?.geom) return |
| | | pointList = geomAnalysis(formData.value.geom) |
| | | pointList.value = geomAnalysis(formData.value.geom) |
| | | drawPolygonExample?.destroy() |
| | | drawPolygonExample = new DrawPolygon(viewer) |
| | | let noClosedList = _.cloneDeep(pointList) |
| | | let noClosedList = _.cloneDeep(pointList.value) |
| | | noClosedList.pop() |
| | | drawPolygonExample.initPolygon( |
| | | viewer, |
| | |
| | | // 查看面 |
| | | function viewPolygon() { |
| | | if (!formData.value?.geom) return |
| | | pointList = geomAnalysis(formData.value.geom) |
| | | const result = pointList.map(item => [item.longitude, item.latitude]).flat() |
| | | const mian = viewer.entities?.add({ |
| | | pointList.value = geomAnalysis(formData.value.geom) |
| | | const result = pointList.value.map(item => [item.longitude, item.latitude]).flat() |
| | | viewPlane = viewer.entities?.add({ |
| | | customType: 'control_group', |
| | | position: Cesium.Cartesian3.fromDegrees(result[0], result[1]), |
| | | polygon: { |
| | | hierarchy: Cesium.Cartesian3.fromDegreesArray(result), |
| | | material: Cesium.Color.fromBytes(45, 140, 240, 99), |
| | | outline: false, |
| | | heightReference: Cesium.HeightReference.CLAMP_TO_GROUND, |
| | | }, |
| | | polyline: { |
| | | positions: Cesium.Cartesian3.fromDegreesArray(result), |
| | | clampToGround: true, |
| | | width: 3, |
| | | material: Cesium.Color.RED, |
| | | width: 2, |
| | | material: Cesium.Color.fromBytes(45, 140, 240, 255), |
| | | }, |
| | | }) |
| | | viewer.flyTo(mian, { duration: 0 }) |
| | | flyVisual({ |
| | | positionsData: pointList.value.map(i => [i.longitude, i.latitude, i.height || 0]), |
| | | viewer, |
| | | }) |
| | | } |
| | | |
| | | // 同步关联场景 |
| | | // 回显选中设备 |
| | | function syncSelection() { |
| | | if (!deviceTableRef.value) return |
| | | deviceTableRef.value.clearSelection() |
| | |
| | | }) |
| | | } |
| | | |
| | | // 获取巡检任务 |
| | | function gdPatrolTaskPage() { |
| | | gdPatrolTaskPageApi({ current: 1, size: 1000, workOrderId: formData.value.id }).then(res => { |
| | | patrolTaskList.value = res.data.data.records || [] |
| | | }) |
| | | } |
| | | |
| | | // 渲染 |
| | | function renderingAllDevice(list) { |
| | | list.forEach(item => { |
| | | if (!item.longitude || !item.latitude) return |
| | | const position = Cesium.Cartesian3.fromDegrees(item.longitude, item.latitude) |
| | | viewer.entities.add({ |
| | | position: position, |
| | | billboard: { |
| | | image: droneIcon, |
| | | width: 30, |
| | | height: 30, |
| | | verticalOrigin: Cesium.VerticalOrigin.CENTER, |
| | | }, |
| | | label: { |
| | | text: item.nickname, |
| | | font: '12px/1.5 Microsoft YaHei', |
| | | style: Cesium.LabelStyle.FILL_AND_OUTLINE, |
| | | outlineWidth: 2, |
| | | outlineColor: Cesium.Color.WHITE, |
| | | horizontalOrigin: Cesium.HorizontalOrigin.CENTER, |
| | | verticalOrigin: Cesium.VerticalOrigin.BOTTOM, |
| | | pixelOffset: new Cesium.Cartesian2(0, -20), |
| | | }, |
| | | }) |
| | | }) |
| | | } |
| | | |
| | | // 打开弹框 |
| | | async function open({ mode = 'add', row } = {}) { |
| | | dialogMode.value = mode |
| | | formData.value = dialogMode.value === 'add' ? initForm() : row |
| | | initMap() |
| | | if (dialogMode.value !== 'add') { |
| | | await loadDetail() |
| | | } |
| | | await getDeviceList() |
| | | const allDeviceRes = await gdManageDeviceListApi() |
| | | formData.value = dialogMode.value === 'add' ? initForm() : row |
| | | renderingAllDevice(allDeviceRes?.data?.data || []) |
| | | if (dialogMode.value === 'add') { |
| | | addPolygon() |
| | | } else if (dialogMode.value === 'edit') { |
| | | editPolygon() |
| | | } else { |
| | | viewPolygon() |
| | | await loadDetail() |
| | | hasPatrolTaskList.value && gdPatrolTaskPage() |
| | | dialogMode.value === 'edit' ? editPolygon() : viewPolygon() |
| | | } |
| | | |
| | | await nextTick() |
| | | await getDeviceList() |
| | | syncSelection() |
| | | highlightSelectedDevices() |
| | | } |
| | | |
| | | // 初始化地图实例 |
| | |
| | | viewer = map?.viewer || null |
| | | } |
| | | |
| | | // 高亮选中的设备 |
| | | function highlightSelectedDevices() { |
| | | const selectedIds = (formData.value.recommendDeviceIds || '').split(',').filter(Boolean) |
| | | if (!viewer?.entities) return |
| | | viewer.entities.values.forEach(entity => { |
| | | const image = entity.billboard?.image?._value |
| | | if ((image === droneIcon || image === droneActiveIcon) && entity.label) { |
| | | const device = deviceList.value.find(d => d.nickname === entity.label.text._value) |
| | | entity.billboard.image = device && selectedIds.includes(String(device.id)) ? droneActiveIcon : droneIcon |
| | | } |
| | | }) |
| | | } |
| | | |
| | | watch(() => formData.value.recommendDeviceIds, highlightSelectedDevices) |
| | | |
| | | watch( |
| | | () => dateRange.value, |
| | | newVal => { |
| | | const range = dateRangeFormat(dateRange.value) |
| | | formData.value.executeStartTime = range[0] |
| | | formData.value.executeEndTime = range[1] |
| | | } |
| | | ) |
| | | |
| | | // 地图加载完毕 |
| | | function mapReady() { |
| | | dialogMode.value === 'add' && mapRef.value.flyBoundary() |
| | | } |
| | | |
| | | defineExpose({ open }) |
| | | </script> |
| | | |
| | | <style lang="scss" scoped> |
| | | .separateTable { |
| | | height: 0; |
| | | flex: 1; |
| | | :deep() { |
| | | .el-scrollbar__view { |
| | | height: 100%; |
| | | } |
| | | .el-table__empty-text { |
| | | line-height: normal; |
| | | } |
| | | } |
| | | } |
| | | .content { |
| | | display: flex; |
| | | gap: 0 20px; |
| | | height: 680px; |
| | | |
| | | .leftBox { |
| | | width: 0; |
| | | flex: 1; |
| | | display: flex; |
| | | overflow: auto; |
| | | flex-direction: column; |
| | | |
| | | .gd-cesium { |
| | | width: 100%; |
| | | height: 423px; |
| | | min-height: 360px; |
| | | flex: 1; |
| | | } |
| | | } |
| | | |
| | | .rightBox { |
| | | width: 350px; |
| | | display: flex; |
| | | flex-direction: column; |
| | | .title { |
| | | font-weight: 500; |
| | | font-size: 14px; |
| | | color: #272e37; |
| | | } |
| | | } |
| | | |
| | | .processBox { |
| | | display: flex; |
| | | flex-direction: column; |
| | | |
| | | .process { |
| | | height: 100%; |
| | | padding: 12px 16px 24px 16px; |
| | | width: 312px; |
| | | border: 1px solid #e4e4e4; |
| | | border-radius: 8px; |
| | | background: #fff; |
| | | overflow: auto; |
| | | } |
| | | } |
| | | } |
| | | |
| | | .setHeight { |
| | | max-height: 300px; |
| | | min-height: 200px; |
| | | .tipSelect { |
| | | text-align: center; |
| | | height: 200px; |
| | | line-height: 200px; |
| | | } |
| | | |
| | | .required-star { |
| | | color: #f56c6c; |
| | | margin-right: 4px; |
| | | } |
| | | </style> |