diff --git a/components.d.ts b/components.d.ts index 4eeb64745..cdc91ac84 100644 --- a/components.d.ts +++ b/components.d.ts @@ -22,6 +22,8 @@ declare module '@vue/runtime-core' { Modal: typeof import('./src/components/Modal/index.vue')['default'] Nav: typeof import('./src/components/Nav/index.vue')['default'] NButton: typeof import('naive-ui')['NButton'] + NCheckbox: typeof import('naive-ui')['NCheckbox'] + NCheckboxGroup: typeof import('naive-ui')['NCheckboxGroup'] NConfigProvider: typeof import('naive-ui')['NConfigProvider'] NDataTable: typeof import('naive-ui')['NDataTable'] NDatePicker: typeof import('naive-ui')['NDatePicker'] diff --git a/package-lock.json b/package-lock.json index 296a7dcaf..8bddb7d36 100644 --- a/package-lock.json +++ b/package-lock.json @@ -28,6 +28,7 @@ "satellite.js": "^5.0.0", "seemly": "^0.3.9", "v-viewer": "^3.0.21", + "vanilla-js-wheel-zoom": "^9.0.4", "viewerjs": "^1.11.7", "vue": "^3.2.45", "vue-draggable-plus": "^0.5.6", @@ -15120,6 +15121,12 @@ "spdx-expression-parse": "^3.0.0" } }, + "node_modules/vanilla-js-wheel-zoom": { + "version": "9.0.4", + "resolved": "https://registry.npmmirror.com/vanilla-js-wheel-zoom/-/vanilla-js-wheel-zoom-9.0.4.tgz", + "integrity": "sha512-OjmS9ihEKBCRw2OQ7IiIdQGXdC5gTEEmtcAWZcPeNAJaYiS61KCd02Z72YMtIoXLGN5TZP+wliBMylLAsr6wow==", + "license": "MIT" + }, "node_modules/vdirs": { "version": "0.1.8", "resolved": "https://registry.npmmirror.com/vdirs/-/vdirs-0.1.8.tgz", diff --git a/package.json b/package.json index 85b7fc7a6..8212ffcf6 100644 --- a/package.json +++ b/package.json @@ -31,6 +31,7 @@ "satellite.js": "^5.0.0", "seemly": "^0.3.9", "v-viewer": "^3.0.21", + "vanilla-js-wheel-zoom": "^9.0.4", "viewerjs": "^1.11.7", "vue": "^3.2.45", "vue-draggable-plus": "^0.5.6", diff --git a/src/api/Hangjing/index.js b/src/api/Hangjing/index.js index bec3f5d13..4c549c0af 100644 --- a/src/api/Hangjing/index.js +++ b/src/api/Hangjing/index.js @@ -1,8 +1,16 @@ import { defAxios as request } from '@/utils/http' const baseUrl = window.settings.apis +// export function getHangjing(data = {}) { +// return request({ +// url: `${baseUrl}/hangjing/list`, +// method: 'post', +// data, +// }) +// } + export function getHangjing(data = {}) { return request({ - url: `${baseUrl}/hangjing/list`, + url: `${baseUrl}/hangjing/shiJianTree`, method: 'post', data, }) diff --git a/src/assets/base.css b/src/assets/base.css index 3d6ab5bf4..1d345c26c 100644 --- a/src/assets/base.css +++ b/src/assets/base.css @@ -56,6 +56,9 @@ ); --color-bg: #1a222966; + + --gradient-bg-title: linear-gradient(to right, #4fd2dd55, #4b877400); + --tw-from-opacity: 33%; } @media (prefers-color-scheme: dark) { diff --git a/src/assets/detail.scss b/src/assets/detail.scss new file mode 100644 index 000000000..0c8d29d91 --- /dev/null +++ b/src/assets/detail.scss @@ -0,0 +1,8 @@ + +.detail-container { + @apply flex flex-col gap-4; + .detail-item-title{ + @apply font-bold text-xl w-[120px] h-[30px] leading-[30px]; + background-image: linear-gradient(to right, #4fd2dd55 0%, transparent 100%); + } +} \ No newline at end of file diff --git a/src/assets/main.css b/src/assets/main.css index 0c8877249..e928b8781 100644 --- a/src/assets/main.css +++ b/src/assets/main.css @@ -1,5 +1,6 @@ @import './base.css'; @import './naiveui.css'; +@import './detail.scss'; #app { width: 100%; diff --git a/src/assets/naiveui.css b/src/assets/naiveui.css index d4b58fe0f..4130a1bfb 100644 --- a/src/assets/naiveui.css +++ b/src/assets/naiveui.css @@ -1,3 +1,7 @@ +.n-dialog .n-dialog__content { + padding-top: 1rem; +} + .n-base-select-option__content { width: 100%; } diff --git a/src/components/Panel/index.vue b/src/components/Panel/index.vue index e8e076795..3c14dc183 100644 --- a/src/components/Panel/index.vue +++ b/src/components/Panel/index.vue @@ -120,7 +120,7 @@ $radius: 2rem; .content-title { @apply h-9 px-5 leading-9 tracking-[5px]; border-radius: $radius $radius 0 0; - background: linear-gradient(to right, #4fd2dd55, #4b877400); + background: var(--gradient-bg-title); .title-text { @apply font-bold italic; color: transparent; diff --git a/src/hooks/entity.ts b/src/hooks/entity.ts index 6e71de577..ecd762e54 100644 --- a/src/hooks/entity.ts +++ b/src/hooks/entity.ts @@ -62,12 +62,12 @@ async function getHisTraj({ function getMBEntityOpt({ id, - name, targetType, + name, }: { id: string - name?: string targetType: string + name?: string }) { const mubiaoDict = window.settings.mbDict[targetType] @@ -102,6 +102,25 @@ function getMBEntityOpt({ scale: 1000, minimumPixelSize: 50, }, + ellipsoid: { + show: true, + radii: new Cesium.Cartesian3(100000, 100000, 100000), + innerRadii: new Cesium.Cartesian3(1.0, 1.0, 1.0), + maximumCone: Cesium.Math.toRadians(90), + minimumCone: Cesium.Math.toRadians(40), + minimumClock: Cesium.Math.toRadians(20), + maximumClock: Cesium.Math.toRadians(90), + material: Cesium.Color.fromCssColorString('#00dcff44'), + outline: true, + outlineColor: Cesium.Color.fromCssColorString('#00dcff'), + outlineWidth: 1, + distanceDisplayCondition: new Cesium.DistanceDisplayCondition( + 0.0, + 10.5e8 + ), + slicePartitions: 24, + stackPartitions: 36, + }, } } diff --git a/src/js/Radar.js b/src/js/Radar.js new file mode 100644 index 000000000..6e4550857 --- /dev/null +++ b/src/js/Radar.js @@ -0,0 +1,142 @@ +export default class Radar { + // 创建雷达罩 + constructor(options) { + this.radius = options.radius + // this.viewer = options.viewer + // this.id = options.id + // this.entity = null + // this.radius = options.radius + // ;(this.longitude = options.position[0]), + // (this.latitude = options.position[1]), + // (this.position = Cesium.Cartesian3.fromDegrees( + // options.position[0], + // options.position[1] + // )) + // this.heading = 0 + // this.positionArr = this.calcPoints( + // options.position[0], + // options.position[1], + // options.radius, + // 0 + // ) //储存脏数据 + // this.addEntities() + } + cartesian32LonLat(cartesian3) { + const cartographic = + this.viewer.scene.globe.ellipsoid.cartesianToCartographic( + cartesian3._value + ) + const lat = Cesium.Math.toDegrees(cartographic.latitude) + const lon = Cesium.Math.toDegrees(cartographic.longitude) + return [lon, lat] + } + getRadar() { + // this.entity = this.viewer.entities.add({ + // id: this.id, + // position: this.position, + // wall: { + // positions: new Cesium.CallbackProperty(() => { + // return Cesium.Cartesian3.fromDegreesArrayHeights(this.positionArr) + // }, false), + // material: Cesium.Color.fromCssColorString('#00dcff82'), + // distanceDisplayCondition: new Cesium.DistanceDisplayCondition( + // 0.0, + // 10.5e6 + // ), + // }, + // ellipsoid: { + // radii: new Cesium.Cartesian3( + // this.radius, + // this.radius, + // this.radius + // ), + // maximumCone: Cesium.Math.toRadians(90), + // material: Cesium.Color.fromCssColorString('#00dcff82'), + // outline: true, + // outlineColor: Cesium.Color.fromCssColorString('#00dcff'), + // outlineWidth: 1, + // distanceDisplayCondition: new Cesium.DistanceDisplayCondition( + // 0.0, + // 10.5e8 + // ), + // }, + // }) + return { + // wall: { + // positions: new Cesium.CallbackProperty(() => { + // return Cesium.Cartesian3.fromDegreesArrayHeights(this.positionArr) + // }, false), + // material: Cesium.Color.fromCssColorString('#00dcff82'), + // distanceDisplayCondition: new Cesium.DistanceDisplayCondition( + // 0.0, + // 10.5e6 + // ), + // }, + ellipsoid: { + radii: new Cesium.Cartesian3(this.radius, this.radius, this.radius), + maximumCone: Cesium.Math.toRadians(90), + material: Cesium.Color.fromCssColorString('#00dcff82'), + outline: true, + outlineColor: Cesium.Color.fromCssColorString('#00dcff'), + outlineWidth: 1, + distanceDisplayCondition: new Cesium.DistanceDisplayCondition( + 0.0, + 10.5e8 + ), + }, + } + // this.addPostRender() + } + addPostRender() { + this.viewer.clock.onTick.addEventListener(() => { + this.heading += 1.0 //可调节转动速度 + this.positionArr = this.calcPoints( + this.longitude, + this.latitude, + this.radius, + this.heading + ) + }) + } + calcPoints(x1, y1, radius, heading) { + let m = Cesium.Transforms.eastNorthUpToFixedFrame( + Cesium.Cartesian3.fromDegrees(x1, y1) + ) + let rx = radius * Math.cos((heading * Math.PI) / 180.0) + let ry = radius * Math.sin((heading * Math.PI) / 180.0) + let translation = Cesium.Cartesian3.fromElements(rx, ry, 0) + let d = Cesium.Matrix4.multiplyByPoint( + m, + translation, + new Cesium.Cartesian3() + ) + let c = Cesium.Cartographic.fromCartesian(d) + let x2 = Cesium.Math.toDegrees(c.longitude) + let y2 = Cesium.Math.toDegrees(c.latitude) + return this.computeCirclularFlight(x1, y1, x2, y2, 0, 90) + } + computeCirclularFlight(x1, y1, x2, y2, fx, angle) { + let positionArr = [] + positionArr.push(x1) + positionArr.push(y1) + positionArr.push(0) + let radius = Cesium.Cartesian3.distance( + Cesium.Cartesian3.fromDegrees(x1, y1), + Cesium.Cartesian3.fromDegrees(x2, y2) + ) + for (let i = fx; i <= fx + angle; i++) { + let h = radius * Math.sin((i * Math.PI) / 180.0) + let r = Math.cos((i * Math.PI) / 180.0) + let x = (x2 - x1) * r + x1 + let y = (y2 - y1) * r + y1 + positionArr.push(x) + positionArr.push(y) + positionArr.push(h) + } + return positionArr + } + removeEntity() { + this.entity && this.viewer.entities.remove(this.entity) + this.entity = null + } +} diff --git a/src/js/satelliteEntity.js b/src/js/satelliteEntity.js index d75549fad..ec3074bd9 100644 --- a/src/js/satelliteEntity.js +++ b/src/js/satelliteEntity.js @@ -22,7 +22,7 @@ class SatelliteEntity { this.entity = null this._underPoint = false this.underPointEntity = null - this._sensorType = 'rectangle' + this._sensorType = 'conic' this._listener = null } get sensorType() { @@ -443,9 +443,8 @@ class SatelliteEntity { }, polyline: { positions: points, - width: 1, - material: Cesium.Color.RED, + material: color, }, }) } diff --git a/src/views/BaseMB/components/HisImages/components/LImage.jsx b/src/views/BaseMB/components/HisImages/components/LImage.jsx new file mode 100644 index 000000000..77eac536e --- /dev/null +++ b/src/views/BaseMB/components/HisImages/components/LImage.jsx @@ -0,0 +1,70 @@ +import { NImage } from 'naive-ui' +import WZoom from 'vanilla-js-wheel-zoom/dist/wheel-zoom.min.js' + +export default defineComponent({ + props: { + imageList: { + type: Array, + default: () => [], + }, + }, + setup(props) { + // const { images, activeIndex } = toRefs(props) + + watch( + () => props.imageList, + () => { + if (props.imageList.length > 1) { + nextTick(() => { + props.imageList.map(image => { + const imageElement = document + .getElementById(`image-${image.id}`) + .querySelector('img') + + const wz = WZoom.create(`#image-${image.id}`, { + type: 'html', + maxScale: 3, + minScale: 0.2, + // zoomOnDoubleClick: true, + width: imageElement.naturalWidth, + height: imageElement.naturalHeight, + }) + }) + }) + } + } + ) + return () => ( +
+ {props.imageList.map(image => ( +
+
{image.createTime}
+ + +
{image.detailContent}
+
+ ))} +
+ ) + }, +}) diff --git a/src/views/BaseMB/components/HisImages/index.vue b/src/views/BaseMB/components/HisImages/index.vue index 9e544f560..15901ca0b 100644 --- a/src/views/BaseMB/components/HisImages/index.vue +++ b/src/views/BaseMB/components/HisImages/index.vue @@ -4,6 +4,7 @@ import { ImageOutline } from '@vicons/ionicons5' import { useHisImage } from './hooks/hisImage' import Panel from '@/components/Panel/index.vue' +import LImage from './components/LImage' const { sheshiData, showOrHideHisImage, getHisImages } = useHisImage() @@ -61,12 +62,47 @@ const getImage = async () => { // }) imageList.value = new Array(10).fill(1).map((item, index) => { return { + id: index, imgPath: `https://picsum.photos/300/200?random=${index}`, imgId: index, } }) // console.log(imageList.value, 'imageList') } + +const checkedImage = ref(null) + +const checkValue = e => { + e.stopPropagation() + if (checkedImage.value && checkedImage.value.length > 2) { + checkedImage.value.pop() + } +} + +// watch(checkedImage, newCheck => { +// // console.log(newCheck, 'newCheck') +// }) +const isCompare = ref(false) +const compareImages = () => { + if (!isCompare.value) { + if (checkedImage.value && checkedImage.value.length === 2) { + isCompare.value = true + } + } else { + isCompare.value = false + checkedImage.value = null + } +} + +const largeImageList = computed(() => { + if (isCompare.value) { + return imageList.value.filter(img => checkedImage.value.includes(img.id)) + } else { + return imageList.value[previewIndex.value - 1] + ? [imageList.value[previewIndex.value - 1]] + : [] + } +})