diff --git a/public/images/影像0.jpg b/public/images/影像0.jpg new file mode 100644 index 000000000..826894c96 Binary files /dev/null and b/public/images/影像0.jpg differ diff --git a/public/images/影像2.jpg b/public/images/影像2.jpg new file mode 100644 index 000000000..826894c96 Binary files /dev/null and b/public/images/影像2.jpg differ diff --git a/src/hooks/entity.ts b/src/hooks/entity.ts index 39bfb4fdb..f78d04b5d 100644 --- a/src/hooks/entity.ts +++ b/src/hooks/entity.ts @@ -26,8 +26,6 @@ export const useEntity = () => { showEntity, getHisTraj, getMBEntityOpt, - getEllipsoidEntity, - getMBEntityOptOther, createMBConicSensor, iconOrModel, changeIconOrModel, @@ -95,17 +93,7 @@ async function getMBEntityOpt({ const mubiaoDict = window.settings.mbDict[targetType] const countryColor = window.settings.mbCountryDict[country] - // const headingPitchRoll = new Cesium.HeadingPitchRoll( - // heading, - // pitch, - // roll - // ) - // const newOrientation = Cesium.Transforms.headingPitchRollQuaternion( - // obj.position, - // headingPitchRo11 - // ) - - + // console.log(country, countryColor) const staticOrientation = { position: Cesium.Cartesian3.fromDegrees(116.0, 39.9, 10000), // 初始位置（北京附近，高度10km） orientation: Cesium.Transforms.headingPitchRollQuaternion( @@ -198,275 +186,17 @@ async function getMBEntityOpt({ color: Cesium.Color.fromCssColorString(countryColor), scaleByDistance: new Cesium.NearFarScalar(7000000, 1.0, 18000000, 0.4), }, - ...(flag ? { - orientation: staticOrientation.orientation, - properties: staticOrientation.properties - } : {}), model: { show: iconOrModel.value, uri: mubiaoDict.model, - scale: 50, - minimumPixelSize: 25, - }, - properties: { // 添加自定义属性 - zhName: '目标中文名称', - show: iconOrModel.value, - }, - ...ellipsoid, - } -} -async function getEllipsoidEntity({ - id, - targetType, - country, - extendInfo, -}: { - id: string - targetType: string - country: string - extendInfo?: { detectingPayload: Record } -}) { - const mubiaoDict = window.settings.mbDict[targetType] - const countryColor = window.settings.mbCountryDict[country] - - // const headingPitchRoll = new Cesium.HeadingPitchRoll( - // heading, - // pitch, - // roll - // ) - // const newOrientation = Cesium.Transforms.headingPitchRollQuaternion( - // obj.position, - // headingPitchRo11 - // ) - - - const staticOrientation = { - position: Cesium.Cartesian3.fromDegrees(116.0, 39.9, 10000), // 初始位置（北京附近，高度10km） - orientation: Cesium.Transforms.headingPitchRollQuaternion( - Cesium.Cartesian3.fromDegrees(116.0, 39.9, 10000), - new Cesium.HeadingPitchRoll( - Cesium.Math.toRadians(90), // 航向：正东方向（0=正北，90=正东） - Cesium.Math.toRadians(-90), // 俯仰：轻微下倾（模拟地球曲率） - Cesium.Math.toRadians(0) // 滚转：保持水平 - ) - ), - properties: { - velocity: 800, // 飞行速度（km/h） - heading: 90.0, // 当前航向（度） - pitch: -90, // 当前俯仰（度） - roll: 0.0, // 当前滚转（度） - altitude: 10000 // 当前高度（米） - } - }; - - // console.log(country, countryColor) - let ellipsoid; - console.log(extendInfo,targetType,id,'----exteninfo') - let flag = false ; - if(id == 'xx19' || id == 'xx42' || id == 'xx42' || id == 'xxx1' || id == 'xx14' || id == 'xx30' || id == 'xx48' || id == 'xx24' || id == 'xx'){ - flag = true - } - if (extendInfo) { - const { - angle, - maximumCone, - minimumCone, - minimumClock, - maximumClock, - radius, - } = extendInfo.detectingPayload - if (maximumClock || minimumClock || minimumCone) { - ellipsoid = { - ellipsoid: { - - radii: new Cesium.Cartesian3(radius, radius, radius), - innerRadii: new Cesium.Cartesian3(1.0, 1.0, 1.0), - maximumCone: Cesium.Math.toRadians(90), - minimumCone: Cesium.Math.toRadians(minimumCone), - minimumClock: Cesium.Math.toRadians(minimumClock), - maximumClock: Cesium.Math.toRadians(maximumClock), - 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, - }, - } - } - } - const image = await getImageByColor({ - img: mubiaoDict.icon, - color: countryColor, - }) - console.log(extendInfo.detectingPayload?.zhName,'---extendInfo') - console.log(mbPayloadShowMap.get(id)?.detectingPayload?.show,'---iconOrModel.value') - - - // console.log(image.img, (+image.height / +image.width) * 30) - return { - show: mbPayloadShowMap.get(id)?.detectingPayload?.show || false, - label: { - text: `${extendInfo.detectingPayload?.zhName}`, - font: '12pt sans-serif', - fillColor: Cesium.Color.fromCssColorString(countryColor), - // fillColor: Cesium.Color.YELLOW, - outlineColor: Cesium.Color.BLACK, - outlineWidth: 2, - style: Cesium.LabelStyle.FILL_AND_OUTLINE, - pixelOffset: new Cesium.CallbackProperty(() => { - const radius = ellipsoid.ellipsoid.radii.y; - return new Cesium.Cartesian2(-radius * 0.08,0); // 偏移到椭球体顶部 - }, false), - // pixelOffset: new Cesium.Cartesian2(0, -20), - // pixelOffsetScaleByDistance: new Cesium.NearFarScalar( - // 7000000, - // 1.0, - // 18000000, - // 0.4 - // ), - // scaleByDistance: new Cesium.NearFarScalar(7000000, 1.0, 18000000, 0.4), - }, - - ...ellipsoid, - } -} -async function getMBEntityOptOther({ - id, - targetType, - country, - extendInfo, -}: { - id: string - targetType: string - country: string - extendInfo?: { detectingPayload: Record } -}) { - const mubiaoDict = window.settings.mbDict[targetType] - const countryColor = window.settings.mbCountryDict[country] - - // const headingPitchRoll = new Cesium.HeadingPitchRoll( - // heading, - // pitch, - // roll - // ) - // const newOrientation = Cesium.Transforms.headingPitchRollQuaternion( - // obj.position, - // headingPitchRo11 - // ) - - - const staticOrientation = { - position: Cesium.Cartesian3.fromDegrees(116.0, 39.9, 10000), // 初始位置（北京附近，高度10km） - orientation: Cesium.Transforms.headingPitchRollQuaternion( - Cesium.Cartesian3.fromDegrees(116.0, 39.9, 10000), - new Cesium.HeadingPitchRoll( - Cesium.Math.toRadians(90), // 航向：正东方向（0=正北，90=正东） - Cesium.Math.toRadians(-90), // 俯仰：轻微下倾（模拟地球曲率） - Cesium.Math.toRadians(0) // 滚转：保持水平 - ) - ), - properties: { - velocity: 800, // 飞行速度（km/h） - heading: 90.0, // 当前航向（度） - pitch: -90, // 当前俯仰（度） - roll: 0.0, // 当前滚转（度） - altitude: 10000 // 当前高度（米） - } - }; - - // console.log(country, countryColor) - let ellipsoid; - console.log(extendInfo,targetType,id,'----exteninfo') - let flag = false ; - if(id == 'xx19' || id == 'xx42' || id == 'xx42' || id == 'xxx1' || id == 'xx14' || id == 'xx30' || id == 'xx48' || id == 'xx24' || id == 'xx'){ - flag = true - } - if (extendInfo) { - const { - angle, - maximumCone, - minimumCone, - minimumClock, - maximumClock, - radius, - } = extendInfo.detectingPayload - if (maximumClock || minimumClock || minimumCone) { - ellipsoid = { - ellipsoid: { - show: mbPayloadShowMap.get(id)?.detectingPayload?.show || false, - radii: new Cesium.Cartesian3(radius, radius, radius), - innerRadii: new Cesium.Cartesian3(1.0, 1.0, 1.0), - maximumCone: Cesium.Math.toRadians(90), - minimumCone: Cesium.Math.toRadians(minimumCone), - minimumClock: Cesium.Math.toRadians(minimumClock), - maximumClock: Cesium.Math.toRadians(maximumClock), - 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, - }, - } - } - } - const image = await getImageByColor({ - img: mubiaoDict.icon, - color: countryColor, - }) - // console.log(image.img, (+image.height / +image.width) * 30) - return { - label: { - text: `${id}`, - font: '12pt sans-serif', - fillColor: Cesium.Color.fromCssColorString(countryColor), - // fillColor: Cesium.Color.YELLOW, - outlineColor: Cesium.Color.BLACK, - outlineWidth: 2, - style: Cesium.LabelStyle.FILL_AND_OUTLINE, - pixelOffset: new Cesium.Cartesian2(20, -20), - pixelOffsetScaleByDistance: new Cesium.NearFarScalar( - 7000000, - 1.0, - 18000000, - 0.4 - ), - scaleByDistance: new Cesium.NearFarScalar(7000000, 1.0, 18000000, 0.4), - }, - billboard: { - show: !iconOrModel.value, - image: image.img, - // image: mubiaoDict.icon, - width: 35, - height: (+image.height / +image.width) * 35, - // height: 30, - color: Cesium.Color.fromCssColorString(countryColor), - scaleByDistance: new Cesium.NearFarScalar(7000000, 1.0, 18000000, 0.4), + scale: 100, + minimumPixelSize: 5, }, ...(flag ? { orientation: staticOrientation.orientation, properties: staticOrientation.properties } : {}), - model: { - show: iconOrModel.value, - uri: mubiaoDict.model, - scale: 50, - minimumPixelSize: 25, - }, - // properties: { // 添加自定义属性 - // zhName: '目标中文名称', - // show: iconOrModel.value, - // }, - // ...ellipsoid, + ...ellipsoid, } } diff --git a/src/views/BaseMB/components/HisImages/components/LImage.jsx b/src/views/BaseMB/components/HisImages/components/LImage.jsx index a50dc9d88..9793fb46e 100644 --- a/src/views/BaseMB/components/HisImages/components/LImage.jsx +++ b/src/views/BaseMB/components/HisImages/components/LImage.jsx @@ -1,5 +1,7 @@ import { NImage } from 'naive-ui' import WZoom from 'vanilla-js-wheel-zoom/dist/wheel-zoom.min.js' +import ModalCom from '@/components/Modal/index.vue' +import { color } from 'echarts'; export default defineComponent({ props: { @@ -7,36 +9,104 @@ export default defineComponent({ type: Array, default: () => [], }, + isJ:{ + type: Boolean, + default: false, + } }, setup(props) { - // const { images, activeIndex } = toRefs(props) - + const show = ref(false); + const wzInstances = new Map(); + + // 初始化缩放 watch( () => props.imageList, () => { - console.log(props.imageList,'---imageList--') + console.log('-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: 1, - // zoomOnDoubleClick: true, - width: imageElement.naturalWidth, - height: imageElement.naturalHeight, - }) - }) - }) + props.imageList.forEach(image => { + // if (!wzInstances.has(image.id)) { + // const imageElement = document + // .getElementById(`image-${image.id}`) + // .querySelector('img'); + // const wz = WZoom.create(`#image-${image.id}`, { + // type: 'html', + // maxScale: 3, + // minScale: 1, + // width: imageElement.naturalWidth, + // height: imageElement.naturalHeight, + // }); + // wzInstances.set(image.id, wz); + // } + initImageZoom(image); + }); + }); } } - ) + ); + watch( + () => props.isJ, + (newVal) => { + nextTick(() => { + props.imageList.forEach(image => { + initImageZoom(image); + }) + + }); + }, + {immediate: true } + ); + + // 监听弹窗关闭事件 + watch(show, (newVal) => { + nextTick(() => { + props.imageList.forEach(image => { + initImageZoom(image); + }) + + }); + }); + + + // 初始化单个图片缩放函数 + function initImageZoom(image) { + const container = document.getElementById(`image-${image.id}`); + if (!container) return; + + const imageElement = container.querySelector('img'); + if (!imageElement) return; + + const wz = WZoom.create(`#image-${image.id}`, { + type: 'html', + maxScale: 3, + minScale: 1, + width: imageElement.naturalWidth, + height: imageElement.naturalHeight, + }); + wzInstances.set(image.id, wz); + } + + // 点击处理函数 + function getImageMess(image) { + show.value = !show.value; + } + + const handleImageClick = (image) => { + const wz = wzInstances.get(image.id); + if (wz) { + wz.destroy(); + wzInstances.delete(image.id); + } + + getImageMess(image); + }; + return () => (
+ +
雨辰接口数据
+ {props.imageList.map(image => (
{image.createTime}
@@ -45,30 +115,41 @@ export default defineComponent({
- +
+ image handleImageClick(image)} /> +
{image.time}
+
) : ( + //
+ // + // {image.time} + //

雨辰接口数据1233

+ //
- -

雨辰接口数据1233

+
+ + {/* */} +
{image.time}
+
+

雨辰接口数据1233

)}
-
{image.detailContent}
))} - ) - }, + ); + } }) diff --git a/src/views/BaseMB/components/HisImages/index.vue b/src/views/BaseMB/components/HisImages/index.vue index 381eb94d7..a5356dccb 100644 --- a/src/views/BaseMB/components/HisImages/index.vue +++ b/src/views/BaseMB/components/HisImages/index.vue @@ -7,6 +7,8 @@ import Panel from '@/components/Panel/index.vue' import LImage from './components/LImage' import JImage from './components/JImage' import imageRoller from './components/imageRoller.vue' +import TimeLine from './components/timeLine.vue' + @@ -16,6 +18,11 @@ const { sheshiData, showOrHideHisImage, getHisImages } = useHisImage() // }) const timeRange = ref<[string, string] | undefined>() +// 处理时间选择 +const handleTimeSelect = (selectedItem) => { + console.log('当前选中:', selectedItem) + // 这里可以更新大图显示或执行其他操作 +} const rangeShortcuts = { 近一天: () => { @@ -37,18 +44,7 @@ const rangeShortcuts = { } const showPreview = ref(true) const previewIndex = ref(0) -const selectImg = (index: number) => { - // show() - if (previewIndex.value === index) { - showPreview.value = false - setTimeout(() => { - previewIndex.value = 0 - }, 300) - return - } - previewIndex.value = index - showPreview.value = true -} + const imageList = ref([]) const isJ=ref(false); @@ -65,20 +61,29 @@ const getImage = async () => { // imgId: item.parseInfo.id, // } // }) - imageList.value = new Array(10).fill(1).map((item, index) => { + imageList.value = new Array(3).fill(1).map((item, index) => { return { id: index, - imgPath: `/images/影像.jpg`, + imgPath: `/images/影像${index}.jpg`, imgId: index, + time: '2025-04-' + (17 + index).toString().padStart(2, '0') } }) + console.log(imageList.value,'-------largeImageList') // console.log(imageList.value, 'imageList') } const btnText=ref('卷帘对比'); +const images=ref([]); const changeShow= ()=>{ btnText.value=isJ.value ? '卷帘对比' : '取消卷帘对比'; isJ.value= !isJ.value; - console.log('-------isJ',isJ.value) + if(imageList.value.length > 1){ + images.value = imageList.value.map(item=>{ + return item.imgPath + }) + } + console.log(images.value,'---imageLists') + // console.log('-------isJ',isJ.value) } @@ -94,11 +99,25 @@ const checkValue = e => { // watch(checkedImage, newCheck => { // // console.log(newCheck, 'newCheck') // }) +const selectImg = (index: number) => { + // show() + // if (previewIndex.value === index) { + // showPreview.value = false + // setTimeout(() => { + // previewIndex.value = 0 + // }, 300) + // return + // } + previewIndex.value = index + showPreview.value = true + activeIndex.value = index -1 +} const isCompare = ref(false) const compareImages = () => { if (!isCompare.value) { if (checkedImage.value && checkedImage.value.length === 2) { showPreview.value = true + activeIndex.value = -1 previewIndex.value = 0 // showPreview.value = true isCompare.value = true @@ -106,6 +125,7 @@ const compareImages = () => { } else { isCompare.value = false showPreview.value = false + activeIndex.value = -1 checkedImage.value = null } } @@ -119,6 +139,34 @@ const largeImageList = computed(() => { : [] } }) + + +const activeIndex = ref(-1) +// const checkedImage = ref([]) + +// 计算节点位置 +const getNodePosition = (index) => { + const itemWidth = 140 // 与图片项宽度一致 + const gap = 16 // 与图片项间隔一致 + return { + left: `${(itemWidth + gap) * index + itemWidth/2 - 4}px` // 4为时间点宽度的一半 + } +} + +// 时间格式化 +const formatTime = (time) => { + return new Date(time).toLocaleDateString('zh-CN', { + month: '2-digit', + day: '2-digit' + }) +} + +// // 点击处理 +// const handleSelect = (index) => { +// activeIndex.value = index; +// selectImg(index + 1) +// // 这里可以触发父组件事件 +// }