| | |
| | | :close-on-click-modal="false" |
| | | > |
| | | <div class="content" style="display: flex"> |
| | | <div class="processBox" v-if="dialogMode !== 'add' && processList.length"> |
| | | <div class="timeline-wrapper"> |
| | | <div v-for="(stage, stageIndex) in processList" :key="stageIndex" class="stage-group"> |
| | | <!-- 大节点 Stage Node --> |
| | | <div class="stage-node"> |
| | | <div class="stage-icon" :class="{ reached: stage.reached }"> |
| | | <el-icon v-if="stage.reached"><Check /></el-icon> |
| | | <span v-else class="stage-index">{{ stageIndex + 1 }}</span> |
| | | </div> |
| | | <span class="stage-name">{{ stage.stageName }}</span> |
| | | </div> |
| | | |
| | | <!-- 小节点 Child Nodes --> |
| | | <div class="child-list" v-if="stage.child && stage.child.length"> |
| | | <template v-for="(child, childIndex) in stage.child.filter(c => c.reached)"> |
| | | <div v-if="child.reached" :key="childIndex" class="child-node"> |
| | | <div class="child-left"> |
| | | <span class="child-status">{{ child.statusName }}</span> |
| | | </div> |
| | | <div class="child-dot"></div> |
| | | <div class="child-right"> |
| | | <span class="child-operator">{{ child.operator || '-' }}</span> |
| | | <span class="child-time">{{ child.createTime || '-' }}</span> |
| | | </div> |
| | | </div> |
| | | </template> |
| | | |
| | | </div> |
| | | |
| | | <!-- 连接线 --> |
| | | <div |
| | | class="connector-line" |
| | | v-if="stageIndex < processList.length - 1" |
| | | :class="{ reached: stage.reached }" |
| | | ></div> |
| | | </div> |
| | | <div class="processBox" v-if="dialogMode !== 'add'"> |
| | | <div class="detail-title">工单记录</div> |
| | | <div class="process"> |
| | | <OrderStepBar :processList="processList" /> |
| | | </div> |
| | | </div> |
| | | <div class="leftBox"> |
| | |
| | | <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="至" |
| | |
| | | <el-input |
| | | class="gd-input" |
| | | type="textarea" |
| | | :rows="4" |
| | | :rows="3" |
| | | v-model="formData.remark" |
| | | placeholder="请输入" |
| | | clearable |
| | |
| | | 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 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) |
| | | |
| | |
| | | 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), |
| | | }, |
| | | }) |
| | | flyVisual({ |
| | |
| | | // 渲染 |
| | | function renderingAllDevice(list) { |
| | | list.forEach(item => { |
| | | const position = Cesium.Cartesian3.fromDegrees(item.longitude || 115.0, item.latitude || 27.11) |
| | | if (!item.longitude || !item.latitude) return |
| | | const position = Cesium.Cartesian3.fromDegrees(item.longitude, item.latitude) |
| | | viewer.entities.add({ |
| | | position: position, |
| | | billboard: { |
| | |
| | | |
| | | .gd-cesium { |
| | | width: 100%; |
| | | min-height: 380px; |
| | | min-height: 360px; |
| | | flex: 1; |
| | | } |
| | | } |
| | |
| | | } |
| | | |
| | | .processBox { |
| | | padding: 24px 16px; |
| | | width: 312px; |
| | | border: 1px solid #e4e4e4; |
| | | border-radius: 8px; |
| | | overflow: auto; |
| | | background: #fff; |
| | | display: flex; |
| | | flex-direction: column; |
| | | |
| | | .timeline-wrapper { |
| | | padding-left: 100px; |
| | | position: relative; |
| | | } |
| | | |
| | | .stage-group { |
| | | position: relative; |
| | | } |
| | | |
| | | // 大节点 - Stage Node |
| | | .stage-node { |
| | | display: flex; |
| | | align-items: center; |
| | | gap: 12px; |
| | | margin-bottom: 8px; |
| | | |
| | | .stage-icon { |
| | | width: 28px; |
| | | height: 28px; |
| | | border-radius: 50%; |
| | | background: #e0e0e0; |
| | | display: flex; |
| | | align-items: center; |
| | | justify-content: center; |
| | | color: #fff; |
| | | font-size: 14px; |
| | | font-weight: 600; |
| | | flex-shrink: 0; |
| | | position: relative; |
| | | z-index: 2; |
| | | |
| | | &.reached { |
| | | background: #1a1a2e; |
| | | } |
| | | |
| | | .el-icon { |
| | | font-size: 16px; |
| | | } |
| | | |
| | | .stage-index { |
| | | font-size: 12px; |
| | | } |
| | | } |
| | | |
| | | .stage-name { |
| | | width: 70px; |
| | | text-align: right; |
| | | position: absolute; |
| | | left: -80px; |
| | | font-family: Roboto, Roboto; |
| | | font-weight: bold; |
| | | font-size: 16px; |
| | | color: rgba(0,0,0,0.85); |
| | | } |
| | | } |
| | | |
| | | // 小节点 - Child Nodes |
| | | .child-list { |
| | | position: relative; |
| | | left: -52px; |
| | | } |
| | | |
| | | .child-node { |
| | | display: flex; |
| | | align-items: flex-start; |
| | | position: relative; |
| | | |
| | | |
| | | &:last-child::before { |
| | | bottom: 50%; |
| | | } |
| | | |
| | | .child-left { |
| | | width: 100px; |
| | | flex-shrink: 0; |
| | | text-align: right; |
| | | padding-right: 20px; |
| | | font-family: Source Han Sans CN, Source Han Sans CN; |
| | | font-weight: 400; |
| | | font-size: 14px; |
| | | color: rgba(0,0,0,0.85); |
| | | |
| | | .child-status { |
| | | white-space: nowrap; |
| | | } |
| | | } |
| | | |
| | | .child-dot { |
| | | width: 12px; |
| | | height: 12px; |
| | | border-radius: 50%; |
| | | background: #1a1a2e; |
| | | flex-shrink: 0; |
| | | position: relative; |
| | | z-index: 2; |
| | | margin-top: 4px; |
| | | } |
| | | |
| | | .child-right { |
| | | flex: 1; |
| | | padding-left: 12px; |
| | | display: flex; |
| | | flex-direction: column; |
| | | gap: 2px; |
| | | |
| | | .child-operator { |
| | | font-family: Source Han Sans CN, Source Han Sans CN; |
| | | font-weight: 400; |
| | | font-size: 14px; |
| | | color: rgba(0,0,0,0.85); |
| | | |
| | | } |
| | | |
| | | .child-time { |
| | | white-space: nowrap; |
| | | font-family: Source Han Sans CN, Source Han Sans CN; |
| | | font-weight: 400; |
| | | font-size: 14px; |
| | | color: rgba(0,0,0,0.45); |
| | | } |
| | | } |
| | | } |
| | | |
| | | // 连接线 |
| | | .connector-line { |
| | | position: absolute; |
| | | left: 13px; |
| | | width: 2px; |
| | | .process { |
| | | height: 100%; |
| | | background: #e0e0e0; |
| | | top: 28px; |
| | | z-index: 1; |
| | | |
| | | &.reached { |
| | | background: #1a1a2e; |
| | | } |
| | | padding: 12px 16px 24px 16px; |
| | | width: 312px; |
| | | border: 1px solid #e4e4e4; |
| | | border-radius: 8px; |
| | | background: #fff; |
| | | overflow: auto; |
| | | } |
| | | } |
| | | } |