| | |
| | | |
| | | 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 { render } from 'vue' |
| | | import { useStore } from 'vuex' |
| | | import { getCenterPoint } from '@/utils/cesium/mapUtil' |
| | |
| | | * 机巢聚合功能 |
| | | */ |
| | | |
| | | let arrColor = ["rgb(15,176,255)", "rgb(18,76,154)", "#40C4E4", "#42B2BE", "rgb(51,176,204)", "#8CB7E5", "rgb(0,244,188)", "#139FF0"] |
| | | let arrColor = [ |
| | | 'rgb(15,176,255)', |
| | | 'rgb(18,76,154)', |
| | | '#40C4E4', |
| | | '#42B2BE', |
| | | 'rgb(51,176,204)', |
| | | '#8CB7E5', |
| | | 'rgb(0,244,188)', |
| | | '#139FF0', |
| | | ] |
| | | |
| | | let index = 0 |
| | | function getColor () { |
| | | return arrColor[++index % arrColor.length] |
| | | } |
| | | |
| | | export const useMapAggregation = type => { |
| | | export const useMapAggregation = (type, status) => { |
| | | const { flyTo } = cesiumOperation() |
| | | |
| | | const singleImg = type === 'device' ? uavImg : eventSingle |
| | | 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%)' |
| | |
| | | const userAreaCode = computed(() => store.state.user.userInfo.detail.areaCode) |
| | | const selectedAreaCode = computed(() => store.state.user.selectedAreaCode) |
| | | |
| | | |
| | | const eventTimeType = computed(() => store.state.home.eventTimeType) |
| | | const eventTimeRang = computed(() => store.state.home.eventTimeRang) |
| | | |
| | |
| | | })) |
| | | |
| | | let saveParams = { area_code: '', date_enum: 'CURRENT_WEEK' } |
| | | |
| | | |
| | | // 确定缩放比例 |
| | | const determineScaling = () => { |
| | |
| | | // 获取设备聚合 |
| | | function getDeviceCount (areaCode) { |
| | | return getDeviceRegionCount({ areaCode }).then(res => { |
| | | return (res?.data?.data || []) |
| | | return res?.data?.data || [] |
| | | }) |
| | | } |
| | | // 获取设备散点 |
| | | function getDeviceList (areaCode) { |
| | | return getDeviceRegion({ areaCode }).then(res => { |
| | | |
| | | return (res?.data?.data || []).map(i => ({ ...i, type })) |
| | | |
| | | |
| | | }) |
| | | } |
| | | |
| | |
| | | } |
| | | const getOutLine = async (jsonPathPre, hierarchy) => { |
| | | const parentGJson = await getFiler(`${defaultDir}${jsonPathPre}/index.json`) |
| | | let features = parentGJson.features.find( |
| | | item => item.properties.adcode === Number(hierarchy[hierarchy.length - 1]) |
| | | ) |
| | | let features = parentGJson.features.find(item => item.properties.adcode === Number(hierarchy[hierarchy.length - 1])) |
| | | return { type: 'FeatureCollection', features: [features] } |
| | | } |
| | | |
| | |
| | | if (!areaCode) return |
| | | saveParams.area_code = areaCode |
| | | const list = type === 'device' ? await getDeviceCount(areaCode) : await getMapEventCount(saveParams) |
| | | const splashedList = type === 'device' |
| | | const splashedList = |
| | | type === 'device' |
| | | ? await getDeviceList(areaCode) |
| | | : eventList.map(i => ({ eventId: i.id, latitude: Number(i.latitude), longitude: Number(i.longitude), type: 'event' })) |
| | | : eventList.map(i => ({ |
| | | eventId: i.id, |
| | | latitude: Number(i.latitude), |
| | | longitude: Number(i.longitude), |
| | | type: 'event', |
| | | })) |
| | | const hierarchy = convertToHierarchy(areaCode.slice(0, 6)) |
| | | const jsonPath = hierarchy.join('/') |
| | | const jsonPathPre = hierarchy.slice(0, hierarchy.length - 1).join('/') |
| | |
| | | const outlineGJson = await getOutLine(jsonPathPre, hierarchy) |
| | | scalingJudgment.forEach(item => item.show && (item.outline = outlineGJson)) |
| | | const [longitude, latitude] = outlineGJson.features[0].properties.centroid |
| | | const height = scalingJudgment[(hierarchy.length - 3) * (-1)].height |
| | | const height = scalingJudgment[(hierarchy.length - 3) * -1].height |
| | | setCenterPosition({ longitude, latitude, height }) |
| | | flyTo({ longitude, latitude }, 0, height) |
| | | } |
| | | |
| | | const userAreaPosition = computed(() => store.state.home.userAreaPosition) |
| | | |
| | | const setCenterPosition = (position) => { |
| | | const setCenterPosition = position => { |
| | | store.commit('setCurrentAreaPosition', position) |
| | | if (!userAreaPosition.value.longitude) { |
| | | store.commit('setUserAreaPosition', position) |
| | | } |
| | | } |
| | | |
| | | watch(combinedValues, async (newValue, oldValue) => { |
| | | watch( |
| | | combinedValues, |
| | | async (newValue, oldValue) => { |
| | | if (newValue.singleUavHome?.device_sn) { |
| | | clearMapEntity() |
| | | return |
| | |
| | | } |
| | | |
| | | if (newValue.eventTimeRang) { |
| | | saveParams = { area_code: newValue.selectedAreaCode, start_date: newValue.eventTimeRang[0], end_date: newValue.eventTimeRang[1] } |
| | | saveParams = { |
| | | area_code: newValue.selectedAreaCode, |
| | | start_date: newValue.eventTimeRang[0], |
| | | end_date: newValue.eventTimeRang[1], |
| | | } |
| | | } |
| | | |
| | | needFly = true |
| | |
| | | //散点机巢 |
| | | function splashed (row) { |
| | | row.splashedList.forEach((item, index) => { |
| | | |
| | | viewer.entities.add({ |
| | | id: `aggregation-splashed-${index}`, |
| | | position: Cesium.Cartesian3.fromDegrees(item.longitude, item.latitude), |
| | |
| | | pixelOffset: new Cesium.Cartesian2(0, -9), |
| | | }, |
| | | billboard: { |
| | | image: new Cesium.ConstantProperty(singleImg), |
| | | // singleImg |
| | | image: new Cesium.ConstantProperty(()=>{ |
| | | return item.status ==="OFFLINE" ? offlinesingleImg:singleImg |
| | | }), |
| | | width: 24, |
| | | height: 24, |
| | | }, |
| | |
| | | let material = new PolyGradientMaterial({ |
| | | color: Cesium.Color.fromCssColorString(arrColor[randomInt]), |
| | | opacity: 0.7, |
| | | alphaPower: 1.3 |
| | | alphaPower: 1.3, |
| | | }) |
| | | |
| | | entity.polygon.extrudedHeight = (entity.properties.childrenNum._value || 1) * 500 |
| | |
| | | }), |
| | | }, |
| | | |
| | | polygon |
| | | polygon, |
| | | }) |
| | | }) |
| | | }) |
| | | } |
| | | |
| | | // 聚合机巢 |
| | | const aggregation = (item) => { |
| | | const aggregation = item => { |
| | | if (!item.gJson) return |
| | | const featuresList = item.gJson.features.map(item1 => { |
| | | // const {lng,lat} = getCenterPoint(item1.geometry.coordinates[0][0]) |
| | |
| | | let material = new PolyGradientMaterial({ |
| | | color: Cesium.Color.fromCssColorString(getColor()), |
| | | opacity: 0.7, |
| | | alphaPower: 1.3 |
| | | alphaPower: 1.3, |
| | | }) |
| | | |
| | | const randomInt = Math.floor(Math.random() * 8) + 1 |
| | |
| | | entity.polygon.outline = false // 显示边框 |
| | | }) |
| | | |
| | | needFly && viewer.flyTo(dataSource, { |
| | | needFly && |
| | | viewer.flyTo(dataSource, { |
| | | offset: new Cesium.HeadingPitchRange(0, Cesium.Math.toRadians(-60), 0), |
| | | duration: 0.5, |
| | | }) |
| | |
| | | let clickTargets = viewer.scene.drillPick(click.position).map(item => item.id) |
| | | if (!clickTargets.length) return |
| | | |
| | | console.log(clickTargets, 11111) |
| | | // console.log(clickTargets, 11111) |
| | | |
| | | let deviceAggregationFind = findTypeItem(clickTargets, (item) => item?.properties?.customData?._value?.data?.type === 'deviceAggregation') |
| | | let deviceFind = findTypeItem(clickTargets, (item) => item?.properties?.customData?._value?.data?.type === 'device') |
| | | let deviceAggregationFind = findTypeItem( |
| | | clickTargets, |
| | | item => item?.properties?.customData?._value?.data?.type === 'deviceAggregation' |
| | | ) |
| | | let deviceFind = findTypeItem(clickTargets, item => item?.properties?.customData?._value?.data?.type === 'device') |
| | | // "event" |
| | | let eventFind = findTypeItem(clickTargets, (item) => item?.properties?.customData?._value?.data?.type === 'event') |
| | | let eventFind = findTypeItem(clickTargets, item => item?.properties?.customData?._value?.data?.type === 'event') |
| | | // let eventFind = findTypeItem(clickTargets, (item) => item?.properties?.customData?._value?.data?.type === 'eventAggregation') |
| | | currentEntity = deviceAggregationFind || deviceFind || eventFind |
| | | |