Merge remote-tracking branch 'origin/master'
| | |
| | | import aggregationImg from '@/assets/images/home/useUavHome/aggregation.png' |
| | | import eventAggregationImg from '@/assets/images/home/useUavHome/eventAggregationImg.png' |
| | | import uavImg from '@/assets/images/home/useUavHome/uavImg.png' |
| | | |
| | | // 事件图标 |
| | | import eventSingle from '@/assets/images/home/useEventOperate/eventSingle.png' |
| | | |
| | | import eventPending from '@/assets/images/home/useEventOperate/eventPending.png' // 待处理 0 |
| | | import eventWaitAudit from '@/assets/images/home/useEventOperate/eventWaitAudit.png' // 待审核 2 |
| | | import eventProcessing from '@/assets/images/home/useEventOperate/eventProcessing.png' // 处理中 3 |
| | | import eventCompleted from '@/assets/images/home/useEventOperate/eventCompleted.png' // 已完成 4 |
| | | import eventClosed from '@/assets/images/home/useEventOperate/eventClosed.png' // 已完结 5 |
| | | |
| | | import DevicePopUpBox from '@/hooks/components/DevicePopUpBox.vue' |
| | | import EventPopUpBox from '@/hooks/components/EventPopUpBox.vue' |
| | | // 图标 |
| | | import offlineImg from '@/assets/images/home/useEventOperate/offline.png' |
| | | import onlineImg from '@/assets/images/home/useEventOperate/eventSingle.png' |
| | | |
| | | |
| | | // 机巢图标 |
| | | import endingImg from '@/assets/images/aiNowFly/ending.png' |
| | | import endingHighImg from '@/assets/images/aiNowFly/ending-high.png' |
| | | |
| | | import { render } from 'vue' |
| | | import { useStore } from 'vuex' |
| | | import { getCenterPoint } from '@/utils/cesium/mapUtil' |
| | |
| | | export const useMapAggregation = (type, status) => { |
| | | const { flyTo } = cesiumOperation() |
| | | |
| | | const singleImg = type === 'device' ? onlineImg : eventSingle |
| | | const offlinesingleImg = type === 'device' ? offlineImg : eventSingle |
| | | const mergeImg = type === 'device' ? aggregationImg : eventAggregationImg |
| | | const MapPopUpBox = type === 'device' ? DevicePopUpBox : EventPopUpBox |
| | | const styleTransform = type === 'device' ? 'translateY(-50%)' : 'translate(-50%,-110%)' |
| | |
| | | // 事件散点 |
| | | let eventList = [] |
| | | function processChildren(childrens) { |
| | | // console.log(childrens, '事件点') |
| | | return (childrens || []).map(item => { |
| | | const arr = processChildren(item.childrens) |
| | | if (item.data) { |
| | |
| | | if (!areaCode) return |
| | | saveParams.area_code = areaCode |
| | | const list = type === 'device' ? await getDeviceCount(areaCode) : await getMapEventCount(saveParams) |
| | | |
| | | const splashedList = |
| | | type === 'device' |
| | | ? await getDeviceList(areaCode) |
| | |
| | | latitude: Number(i.latitude), |
| | | longitude: Number(i.longitude), |
| | | type: 'event', |
| | | status: i.status |
| | | })) |
| | | const hierarchy = convertToHierarchy(areaCode.slice(0, 6)) |
| | | const jsonPath = hierarchy.join('/') |
| | |
| | | //散点机巢 |
| | | function splashed(row) { |
| | | row.splashedList.forEach((item, index) => { |
| | | const eventImage = { |
| | | 0: eventPending, |
| | | 2: eventWaitAudit, |
| | | 3: eventProcessing, |
| | | 4: eventCompleted, |
| | | 5: eventClosed |
| | | } |
| | | |
| | | const image = type === 'device' ? (item.status === "OFFLINE" ? endingHighImg : endingImg) : eventImage[item.status] || eventSingle |
| | | |
| | | viewer.entities.add({ |
| | | id: `aggregation-splashed-${index}`, |
| | |
| | | }, |
| | | billboard: { |
| | | // singleImg |
| | | image: new Cesium.ConstantProperty(()=>{ |
| | | return item.status ==="OFFLINE" ? offlinesingleImg:singleImg |
| | | }), |
| | | image: new Cesium.ConstantProperty(image), |
| | | width: 24, |
| | | height: 24, |
| | | }, |
| | |
| | | const singleMachineEvent = async click => { |
| | | let clickTargets = viewer.scene.drillPick(click.position).map(item => item.id) |
| | | if (!clickTargets.length) return |
| | | |
| | | // console.log(clickTargets, 11111) |
| | | |
| | | let deviceAggregationFind = findTypeItem( |
| | | clickTargets, |
| | |
| | | * @Author: shuishen 1109946754@qq.com |
| | | * @Date: 2025-04-15 22:41:40 |
| | | * @LastEditors: shuishen 1109946754@qq.com |
| | | * @LastEditTime: 2025-04-16 22:26:26 |
| | | * @LastEditTime: 2025-04-17 15:05:32 |
| | | * @FilePath: \command-center-dashboard\src\hooks\useSingleDroneMap\useSingleDroneMap.js |
| | | * @Description: |
| | | * |
| | |
| | | properties: { |
| | | customData: { |
| | | data: { |
| | | type: 'single-drone-event' |
| | | type: 'single-drone-position' |
| | | } |
| | | } |
| | | } |
| | |
| | | |
| | | let clickedEntities = viewer?.scene.drillPick(click.position).map(item => item.id) |
| | | |
| | | console.log(clickedEntities, 1111111) |
| | | |
| | | if (!clickedEntities?.length) return |
| | | |
| | | currentEntity = findEntityByType(clickedEntities, 'single-drone-event') |
| | | |
| | | console.log(currentEntity, 1111111) |
| | | |
| | | removeLabel() |
| | | |
| | |
| | | const labelBoxRender = () => { |
| | | if (!currentEntity) return |
| | | let dom = document.querySelector('#mapPopUpBox') |
| | | |
| | | console.log(currentEntity.properties.customData, 4444) |
| | | |
| | | if (!dom) { |
| | | dom = getLabelDom(currentEntity.properties.customData._value.data) |
| | |
| | | <el-checkbox v-model="item.checked" @change="handleItemCheck"/> |
| | | </div> |
| | | <div class="table-item">{{ item.nickname }}</div> |
| | | <div class="table-item">{{ item.minute }}</div> |
| | | <div class="table-item">{{ item.exe_distance }}</div> |
| | | <div class="table-item">{{ item.minute }}(min)</div> |
| | | <div class="table-item">{{ item.exe_distance }}(km)</div> |
| | | </div> |
| | | </div> |
| | | <div class="btn-submit" @click="nowFly"><img src="@/assets/images/aiNowFly/fly.png" alt=""></div> |
| | |
| | | label: { |
| | | text: `预计${item.minute}分钟`, |
| | | font: 'bold 16px Source Han Sans CN', // 加粗并增大字号 |
| | | fillColor: new Cesium.Color(27/255, 179/255, 255/255, 1.0), |
| | | fillColor: Cesium.Color.WHITE, |
| | | style: Cesium.LabelStyle.FILL_AND_OUTLINE, |
| | | verticalOrigin: Cesium.VerticalOrigin.CENTER, |
| | | horizontalOrigin: Cesium.HorizontalOrigin.CENTER, |
| | | eyeOffset: new Cesium.Cartesian3(0, 0, -10), |
| | | pixelOffset: new Cesium.Cartesian2(0, -10), |
| | | rotation: Math.atan2(direction.y, direction.x) |
| | | // fillColor: new Cesium.Color(27/255, 179/255, 255/255, 1.0), |
| | | // fillColor: Cesium.Color.WHITE, |
| | | // style: Cesium.LabelStyle.FILL_AND_OUTLINE, |
| | | // verticalOrigin: Cesium.VerticalOrigin.CENTER, |
| | | // horizontalOrigin: Cesium.HorizontalOrigin.CENTER, |
| | | // eyeOffset: new Cesium.Cartesian3(0, 0, -10), |
| | | // pixelOffset: new Cesium.Cartesian2(0, -10), |
| | | rotation: 12.785398, // 修改旋转计算方式 |
| | | } |
| | | }) |
| | | viewer.entities.add({ |
| | | id: `AINow-line-${index}`, |
| | | polyline: { |
| | | width: 4, |
| | | width: 2, |
| | | positions: positionsList, |
| | | material: new Cesium.Color(27/255, 179/255, 255/255, 1.0), |
| | | material: index === 0 ? new Cesium.Color(2/255, 192/255, 255/255, 1) : new Cesium.Color(27/255, 179/255, 255/255, 0.4), |
| | | clampToGround: false, |
| | | }, |
| | | }) |
| | |
| | | padding: 0 0 14px 11px; |
| | | } |
| | | .tabledata { |
| | | height: 120px; |
| | | min-height: 120px; |
| | | border: 1px dashed #fff; |
| | | margin: 0px 10px; |
| | | .table-content { |
| | |
| | | display: flex; |
| | | justify-content: space-between; |
| | | align-items: center; |
| | | &:not(:last-child) { |
| | | border-bottom: 1px dashed #fff; |
| | | } |
| | | } |
| | | .table-item { |
| | | width: 100px; |
| | | text-align: center; |
| | | height: 32px; |
| | | line-height: 32px; |
| | | overflow: hidden; |
| | | text-overflow: ellipsis; |
| | | white-space: nowrap; |
| | | } |
| | | } |
| | | |
| | |
| | | <template> |
| | | <div class="event-overviewdetail-right" :class="{ isMore }"> |
| | | <CommonTitle title="事件概况" :style="{right: isMore?pxToRem(410):pxToRem(0)}" /> |
| | | <CommonTitle title="事件概况" :style="{width: isMore?pxToRem(820):pxToRem(404)}" /> |
| | | |
| | | <div class="content"> |
| | | <img class="leftArrow" :class="isMore?'rightArrow':''" :src="isMore ? rightArrowImg : leftArrowImg" @click="leftArrowFun" alt="" /> |
| | |
| | | class="eventListItemImg" |
| | | :src="getSmallImg(item.photo_url)" |
| | | alt="" |
| | | @click="getFindImgHistory(item.id)" |
| | | @click="getFindImgHistory(item)" |
| | | /> |
| | | <div class="eventListItemPosition" :title="item.address" @click="positioning(item)"> |
| | | <img :src="positioningImg" alt="" title="点击定位" /> |
| | | <div class="address">{{ item.address }}</div> |
| | | <!-- <div class="address">{{ item.address }}</div> --> |
| | | </div> |
| | | <div class="eventListItemText"> |
| | | <div class="eventListItemName">{{ item.event_name }}</div> |
| | | <div class="eventListItemTime">{{ item.create_time }}</div> |
| | | <div class="eventListItemTime">{{ dayjs(item.create_time).format('MM/DD HH:mm') }}</div> |
| | | </div> |
| | | </div> |
| | | </div> |
| | |
| | | </div> |
| | | </div> |
| | | </div> |
| | | <div class="image-list" v-if="isShowBigImg"> |
| | | <div class="image-list" v-if="isShowBigImg" :style="{ right: isMore?pxToRem(840):pxToRem(460) }"> |
| | | <div class="title"> |
| | | <img @click="isShowBigImg=false" src="@/assets/images/home/useEventOperate/close.png" alt=""> |
| | | </div> |
| | |
| | | }) |
| | | } |
| | | const { flyTo } = cesiumOperation() |
| | | const longitudeOffset = ref(0); |
| | | const positioning = row => { |
| | | const longitude = Number(row.longitude) |
| | | const latitude = Number(row.latitude) |
| | | flyTo({ longitude, latitude }, 1, 1000) |
| | | // ismore 单独点击定位和未展开都为0 ismore为false 展开大图 值为0.004 ismore=true & isShowBigImg=true 展开大图 值为0.005 |
| | | if (isMore.value) { |
| | | longitudeOffset.value = isShowBigImg.value ? 0.005 : 0.003 |
| | | } |
| | | if (!isMore.value) { |
| | | longitudeOffset.value = isShowBigImg.value ? 0.003 : 0; |
| | | } |
| | | flyTo({ longitude: longitude + longitudeOffset.value, latitude }, 1, 1000); |
| | | } |
| | | |
| | | // 事件状态+数量 |
| | |
| | | const clickImgSrc = ref(''); |
| | | const selectedImgIndex = ref(0); |
| | | // 点击图片放大 显示详细信息 |
| | | const getFindImgHistory = (id) => { |
| | | findImgHistory(id).then((res) => { |
| | | const getFindImgHistory = (item) => { |
| | | // 下半部分隐藏 右侧隐藏 |
| | | isShowBigImg.value = true |
| | | store.commit('setHideBottomIcon', false) |
| | | findImgHistory(item.id).then((res) => { |
| | | if (res.data.code !== 0) return |
| | | imageList.value = res.data.data |
| | | clickImgSrc.value = res.data.data[0]?.url; |
| | | isShowBigImg.value = true |
| | | }) |
| | | positioning(item); |
| | | } |
| | | // 点击周期 |
| | | const clickWeekTime = (item,index) => { |
| | |
| | | } |
| | | .image-list { |
| | | position: absolute; |
| | | left: 40%; |
| | | transform: translate(-40%); |
| | | bottom: 218px; |
| | | width: 524px; |
| | | height: 382px; |
| | | z-index: 10; |
| | | right: 460px; |
| | | top: 122px; |
| | | width: 800px; |
| | | height: 600px; |
| | | background: #0F1929; |
| | | box-shadow: inset 0px -50px 50px 0px rgba(27,148,255,0.13); |
| | | border-radius: 0px 0px 0px 0px; |
| | |
| | | } |
| | | } |
| | | .content { |
| | | width: 475px; |
| | | height: 231px; |
| | | width: 740px; |
| | | height: 440px; |
| | | box-shadow: 1px 3px 6px 0px rgba(81,168,255,0.58); |
| | | border-radius: 20px 20px 20px 20px; |
| | | border-image: linear-gradient(180deg, rgba(81, 168, 255, 1), rgba(189, 228, 255, 1)) 2 2; |
| | | margin: 28px 28px; |
| | | img { |
| | | width: 100%; |
| | | height: 230px; |
| | | height: 100%; |
| | | border-radius: 20px 20px 20px 20px; |
| | | } |
| | | } |
| | | .card { |