fixed:4-23部分bug修复，回退载荷名称
This commit is contained in:
parent
212d128c59
commit
df5b2bdbe7
BIN
public/images/影像0.jpg
Normal file
BIN
public/images/影像0.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 931 KiB |
BIN
public/images/影像2.jpg
Normal file
BIN
public/images/影像2.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 931 KiB |
@ -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<string, number> }
|
||||
}) {
|
||||
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<string, number> }
|
||||
}) {
|
||||
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,
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -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 () => (
|
||||
<div class="l-image-container flex h-full w-full gap-4">
|
||||
<ModalCom v-model:show={show.value} title={'详情'}>
|
||||
<div class="w-[300px]">雨辰接口数据</div>
|
||||
</ModalCom>
|
||||
{props.imageList.map(image => (
|
||||
<div class="flex h-full flex-1 flex-col gap-2">
|
||||
<div>{image.createTime}</div>
|
||||
@ -45,30 +115,41 @@ export default defineComponent({
|
||||
<div
|
||||
id={`image-${image.id}`}
|
||||
class="flex h-full w-full cursor-grab items-center justify-center"
|
||||
>
|
||||
<img
|
||||
class="w-full"
|
||||
>
|
||||
<div style={{color:'#ecf007',display:'inline-block'}}>
|
||||
<img
|
||||
src={image.imgPath}
|
||||
draggable="false"
|
||||
// alt="image"
|
||||
onClick={() => handleImageClick(image)}
|
||||
/>
|
||||
<div style={{color:'yellow'}}>{image.time}</div>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
// <div class="flex object-contain w-h-full">
|
||||
// <NImage object-fit="contain" src={image.imgPath} />
|
||||
// <span style={{color:'yellow'}}>{image.time}</span>
|
||||
// <h2>雨辰接口数据1233</h2>
|
||||
// </div>
|
||||
<div class="flex object-contain w-h-full">
|
||||
<NImage
|
||||
object-fit="contain"
|
||||
src={image.imgPath}
|
||||
/>
|
||||
<h2>雨辰接口数据1233</h2>
|
||||
<div >
|
||||
<img
|
||||
src={image.imgPath}
|
||||
draggable="false"
|
||||
style={{maxWidth: '84%'}}
|
||||
/>
|
||||
{/* <NImage object-fit="contain" src={image.imgPath} /> */}
|
||||
<div style={{color:'yellow',maxWidth: '84%'}}>{image.time}</div>
|
||||
</div>
|
||||
<h2>雨辰接口数据1233</h2>
|
||||
</div>
|
||||
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div class="line-clamp-3 pb-4">{image.detailContent}</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)
|
||||
},
|
||||
);
|
||||
}
|
||||
})
|
||||
|
||||
@ -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)
|
||||
// // 这里可以触发父组件事件
|
||||
// }
|
||||
</script>
|
||||
|
||||
<template>
|
||||
@ -135,12 +183,12 @@ const largeImageList = computed(() => {
|
||||
</div>
|
||||
<div class="large-container">
|
||||
<!-- <h1 v-if="isJ" >12345</h1> -->
|
||||
<imageRoller :imgList="['/images/影像.jpg','/images/影像.jpg']" v-if="isJ"></imageRoller>
|
||||
<l-image :imageList="largeImageList" v-else key="l-image" />
|
||||
<imageRoller :imgList="images" v-if="isJ"></imageRoller>
|
||||
<l-image :imageList="largeImageList" v-else key="l-image" :isJ="isJ" />
|
||||
<!-- <j-image :imageList="largeImageList" v-else key="j-image" /> -->
|
||||
|
||||
</div>
|
||||
<div ref="scrollRef" class="flex h-[178px] flex-col">
|
||||
<div ref="scrollRef" class="flex h-[210px] flex-col">
|
||||
<div class="flex gap-2">
|
||||
<n-date-picker
|
||||
v-model:formatted-value="timeRange"
|
||||
@ -165,8 +213,8 @@ const largeImageList = computed(() => {
|
||||
</div>
|
||||
<n-scrollbar v-else x-scrollable>
|
||||
<!-- <div> -->
|
||||
<n-checkbox-group
|
||||
class="flex h-full flex-nowrap"
|
||||
<n-checkbox-group
|
||||
class="flex h-full flex-nowrap image-list"
|
||||
v-model:value="checkedImage"
|
||||
>
|
||||
<div
|
||||
@ -189,12 +237,13 @@ const largeImageList = computed(() => {
|
||||
@click.stop="checkValue"
|
||||
/>
|
||||
<n-image
|
||||
class="m-auto"
|
||||
class="m-auto w-[240px]"
|
||||
object-fit="contain"
|
||||
lazy
|
||||
:intersection-observer-options="{ root: scrollRef }"
|
||||
preview-disabled
|
||||
:src="i.imgPath"
|
||||
@click="selectImg(index + 1)"
|
||||
><template #error>
|
||||
<n-icon :size="100" color="lightGrey">
|
||||
<image-outline />
|
||||
@ -204,6 +253,28 @@ const largeImageList = computed(() => {
|
||||
</div>
|
||||
</div>
|
||||
</n-checkbox-group>
|
||||
<!-- 时间线 -->
|
||||
<div class="timeline-container">
|
||||
|
||||
<div
|
||||
v-for="(i, index) in imageList"
|
||||
:key="i.id"
|
||||
class="timeline-node"
|
||||
:class="{ active: index === activeIndex }"
|
||||
@click="selectImg(index + 1)"
|
||||
:style="getNodePosition(index)"
|
||||
>
|
||||
<div class="time-label">{{ formatTime(i.time) }}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- <div style="overflow: auto">
|
||||
<TimeLine
|
||||
:imageList="imageList"
|
||||
@select="handleTimeSelect"
|
||||
/>
|
||||
</div> -->
|
||||
<!-- </div> -->
|
||||
</n-scrollbar>
|
||||
</div>
|
||||
@ -228,4 +299,125 @@ const largeImageList = computed(() => {
|
||||
// display: block;
|
||||
// }
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.image-timeline-container {
|
||||
position: relative;
|
||||
padding-bottom: 40px; /* 给时间线留出空间 */
|
||||
}
|
||||
|
||||
.image-list {
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
overflow-x: auto;
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
|
||||
.image-item {
|
||||
width: 140px;
|
||||
flex-shrink: 0;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.image-wrapper {
|
||||
position: relative;
|
||||
border: 2px solid transparent;
|
||||
border-radius: 8px;
|
||||
transition: all 0.3s ease;
|
||||
|
||||
&:hover {
|
||||
border-color: #409eff;
|
||||
}
|
||||
|
||||
&.active {
|
||||
border-color: #ecf007;
|
||||
box-shadow: 0 4px 12px rgba(32, 128, 240, 0.2);
|
||||
}
|
||||
}
|
||||
|
||||
.preview-image {
|
||||
width: 100%;
|
||||
height: 120px;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.checkbox {
|
||||
position: absolute;
|
||||
top: 8px;
|
||||
left: 8px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
/* 时间线样式 */
|
||||
.timeline-container {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 28px;
|
||||
}
|
||||
|
||||
.timeline-line {
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 2px;
|
||||
background: #e4e7ed;
|
||||
}
|
||||
|
||||
.timeline-node {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
background: #dcdee2;
|
||||
border-radius: 50%;
|
||||
transform: translateY(14px);
|
||||
transition: all 0.3s ease;
|
||||
|
||||
&::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 12px;
|
||||
top: 5px;
|
||||
width: 156px;
|
||||
height: 2px;
|
||||
background: #e4e7ed;
|
||||
}
|
||||
|
||||
&:last-child::after {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&.active {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
background: #ecf007;
|
||||
box-shadow: 0 0 0 3px rgba(32, 128, 240, 0.2);
|
||||
|
||||
// &::after {
|
||||
// background: #ecf007;
|
||||
// }
|
||||
}
|
||||
}
|
||||
|
||||
.time-label {
|
||||
position: absolute;
|
||||
top: -24px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
white-space: nowrap;
|
||||
font-size: 12px;
|
||||
color: #999;
|
||||
|
||||
.active & {
|
||||
color: #ecf007;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
@ -3,8 +3,11 @@ import { point, bearing } from '@turf/turf'
|
||||
import { cartesian32LonLat } from '@/utils/pos'
|
||||
import { useEntity } from '@/hooks/entity'
|
||||
import { getPositionFromTime } from '@/utils/pos'
|
||||
import { useMBCurTrajctory } from '@/views/Mubiao/components/CurTrajectory/mbCurTraj'
|
||||
|
||||
|
||||
type TPoints = { time: number; position: Cesium.Cartesian3 }[]
|
||||
const { showTrajHour, getCurTraj, removeAllCurTraj } = useMBCurTrajctory()
|
||||
|
||||
const showHisTrajCom = ref(false)
|
||||
const mbData = ref({})
|
||||
@ -40,11 +43,13 @@ export const useMBTrajectory = () => {
|
||||
return
|
||||
}
|
||||
|
||||
removeAllCurTraj()
|
||||
// const pathLine = createPathLine(posArray as number[])
|
||||
createTarget(points, posArray as number[])
|
||||
}
|
||||
|
||||
function showOrHideHisTraj(data) {
|
||||
reset()
|
||||
// console.log(data, '<======>')
|
||||
mbData.value = data
|
||||
showHisTrajCom.value = !showHisTrajCom.value
|
||||
|
||||
@ -30,8 +30,6 @@ const data = ref<Record<string, any>[]>([])
|
||||
const {
|
||||
mubiaoMap,
|
||||
getMBEntityOpt,
|
||||
getEllipsoidEntity,
|
||||
getMBEntityOptOther,
|
||||
createMBConicSensor,
|
||||
mubiaoConicMap,
|
||||
mbPayloadShowMap,
|
||||
@ -83,7 +81,7 @@ export const useMubiao = () => {
|
||||
mbPos.find(item => item.target_id === id) ?? {}
|
||||
const pos = parseWKT(target_geom).coordinates
|
||||
|
||||
const [ellipsoidEntity,otherOptEntity] = await addMubiaoEntity({
|
||||
const mbEntity = await addMubiaoEntity({
|
||||
id,
|
||||
position: pos,
|
||||
target_time,
|
||||
@ -91,14 +89,11 @@ export const useMubiao = () => {
|
||||
targetType: data.targetType,
|
||||
extendInfo: data.extendInfo,
|
||||
})
|
||||
if(ellipsoidEntity){
|
||||
addEventSub(`${id}_model`, ellipsoidEntity, data)
|
||||
mubiaoMap.set(`${id}_model`, ellipsoidEntity)
|
||||
}
|
||||
|
||||
// console.log(mbEntity, 'mbEntity')
|
||||
|
||||
addEventSub(id, otherOptEntity, data)
|
||||
mubiaoMap.set(id, otherOptEntity)
|
||||
addEventSub(id, mbEntity, data)
|
||||
|
||||
mubiaoMap.set(id, mbEntity)
|
||||
})
|
||||
}
|
||||
}
|
||||
@ -117,88 +112,25 @@ if(ellipsoidEntity){
|
||||
}: Record<string, string | number | number[]>) => {
|
||||
// 添加目标实体
|
||||
// console.log(window.settings, targetType, '-----')
|
||||
// const mbEntityOpt = await getMBEntityOpt({
|
||||
// id,
|
||||
// country,
|
||||
// targetType,
|
||||
// extendInfo,
|
||||
// })
|
||||
|
||||
// const mubiaoEntity = viewer.entities.add({
|
||||
// name: id,
|
||||
// position: Cesium.Cartesian3.fromDegrees(
|
||||
// ...(position as number[]),
|
||||
// targetType === '甲' ? 20000 : 0
|
||||
// ),
|
||||
// ...mbEntityOpt,
|
||||
// })
|
||||
let ellipsoid=null;
|
||||
let ellipsoidEntity=null;
|
||||
|
||||
if(extendInfo?.detectingPayload){
|
||||
ellipsoid = await getEllipsoidEntity({
|
||||
id,
|
||||
country,
|
||||
targetType,
|
||||
extendInfo,
|
||||
})
|
||||
ellipsoidEntity = viewer.entities.add({
|
||||
name: id,
|
||||
position: Cesium.Cartesian3.fromDegrees(
|
||||
...(position as number[]),
|
||||
targetType === '甲' ? 20000 : 0
|
||||
),
|
||||
...ellipsoid,
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
const otherOpt = await getMBEntityOptOther({
|
||||
const mbEntityOpt = await getMBEntityOpt({
|
||||
id,
|
||||
country,
|
||||
targetType,
|
||||
extendInfo,
|
||||
})
|
||||
const otherOptEntity = viewer.entities.add({
|
||||
|
||||
const mubiaoEntity = viewer.entities.add({
|
||||
name: id,
|
||||
position: Cesium.Cartesian3.fromDegrees(
|
||||
...(position as number[]),
|
||||
targetType === '甲' ? 20000 : 0
|
||||
),
|
||||
...otherOpt,
|
||||
...mbEntityOpt,
|
||||
})
|
||||
// const mubiaoEntity = viewer.entities.add({
|
||||
// name: id,
|
||||
// position: Cesium.Cartesian3.fromDegrees(
|
||||
// ...(position as number[]),
|
||||
// targetType === '甲' ? 20000 : 0
|
||||
// ),
|
||||
// ...mbEntityOpt,
|
||||
// })
|
||||
// console.log( mubiaoEntity.position.getValue(),'===== mubiaoEntity.position.getValue()')
|
||||
// console.log( mubiaoEntity.properties.zhName.getValue(),'===== mubiaoEntity.position.getValue()')
|
||||
// console.log( mubiaoEntity.model.show.getValue(),'===== mubiaoEntity.model.show.getValue())')
|
||||
|
||||
|
||||
// const zhNameEntity = viewer.entities.add({
|
||||
// position: new Cesium.CallbackProperty(() => mubiaoEntity.position.getValue(), false),
|
||||
// label: {
|
||||
// text: new Cesium.CallbackProperty(() =>
|
||||
// mubiaoEntity.properties.zhName.getValue(), false
|
||||
// ),
|
||||
// show: new Cesium.CallbackProperty(() =>
|
||||
// mubiaoEntity.model.show.getValue(), false // 与模型显示状态同步
|
||||
// ),
|
||||
// font: '12pt 黑体',
|
||||
// fillColor: Cesium.Color.WHITE,
|
||||
// outlineColor: Cesium.Color.BLACK,
|
||||
// pixelOffset: new Cesium.Cartesian2(40, -40), // 在模型右上方
|
||||
// scaleByDistance: new Cesium.NearFarScalar(7000000, 1.0, 18000000, 0.4)
|
||||
// }
|
||||
// });
|
||||
if (extendInfo?.detectingPayload?.angle) {
|
||||
const conic = createMBConicSensor({
|
||||
entity: otherOptEntity,
|
||||
entity: mubiaoEntity,
|
||||
radius: extendInfo?.detectingPayload?.radius,
|
||||
|
||||
angle: extendInfo?.detectingPayload?.angle,
|
||||
@ -208,7 +140,7 @@ if(ellipsoidEntity){
|
||||
})
|
||||
mubiaoConicMap.set(id, conic)
|
||||
}
|
||||
return [ellipsoidEntity,otherOptEntity]
|
||||
return mubiaoEntity
|
||||
}
|
||||
|
||||
const addEventSub = (
|
||||
@ -336,7 +268,7 @@ function getAllNodesToPayload() {
|
||||
const { dataId, data: nodeData } = node
|
||||
const { extendInfo } = nodeData
|
||||
const detectingShow =
|
||||
mbPayloadShowMap.get(dataId)?.detectingPayload?.show || false;
|
||||
mbPayloadShowMap.get(dataId)?.detectingPayload?.show || false
|
||||
if (extendInfo) {
|
||||
mbPayloadShowMap.set(dataId, {
|
||||
data: toRaw(nodeData),
|
||||
|
||||
@ -128,7 +128,27 @@ export const useMubiaoDetail = () => {
|
||||
}
|
||||
|
||||
function updateMbLoad({ mbData, detection }) {
|
||||
const { getMubiaoData } = useMubiao()
|
||||
|
||||
|
||||
console.log('------------', detection)
|
||||
const { getMubiaoData } = useMubiao()
|
||||
|
||||
if(!detection[0]){
|
||||
const payloadData = {
|
||||
id: mbData.id,
|
||||
extendInfo: {
|
||||
detectingPayload: {},
|
||||
},
|
||||
}
|
||||
// console.log(payloadData)
|
||||
updateMbPayload(payloadData).then(res => {
|
||||
if (res.code === '200') {
|
||||
window.$message.success('保存成功')
|
||||
getMubiaoData()
|
||||
}
|
||||
})
|
||||
return
|
||||
}
|
||||
const { id, show, ...detectionData } = detection[0]
|
||||
console.log('------------')
|
||||
|
||||
@ -146,7 +166,7 @@ export const useMubiaoDetail = () => {
|
||||
detectingPayload: { ...detectionData },
|
||||
},
|
||||
}
|
||||
// console.log(payloadData)
|
||||
console.log(payloadData,'--payloadData---')
|
||||
updateMbPayload(payloadData).then(res => {
|
||||
if (res.code === '200') {
|
||||
window.$message.success('保存成功')
|
||||
|
||||
@ -22,19 +22,19 @@ export default defineComponent({
|
||||
|
||||
const detectingPayloadColumns = {
|
||||
radar: [
|
||||
{
|
||||
title: '载荷名称',
|
||||
key: 'zhName',
|
||||
// width: 140,
|
||||
render(row) {
|
||||
return (
|
||||
<NInput
|
||||
v-model:value={row.zhName}
|
||||
// disabled={['光学', '雷达'].includes(row.type)}
|
||||
></NInput>
|
||||
)
|
||||
},
|
||||
},
|
||||
// {
|
||||
// title: '载荷名称',
|
||||
// key: 'zhName',
|
||||
// // width: 140,
|
||||
// render(row) {
|
||||
// return (
|
||||
// <NInput
|
||||
// v-model:value={row.zhName}
|
||||
// // disabled={['光学', '雷达'].includes(row.type)}
|
||||
// ></NInput>
|
||||
// )
|
||||
// },
|
||||
// },
|
||||
{
|
||||
title: '垂直起始角',
|
||||
key: 'minimumClock',
|
||||
@ -232,15 +232,17 @@ export default defineComponent({
|
||||
}
|
||||
|
||||
function changePayloadStatus(row) {
|
||||
console.log('changePayloadStatus--',mbPayloadShowMap,props.target)
|
||||
const { id, show } = row
|
||||
const mapDict = {
|
||||
mb: mbPayloadShowMap,
|
||||
satellite: satellitePayloadShowMap,
|
||||
}
|
||||
const map = mapDict[props.target]
|
||||
console.log(map,'---map',id)
|
||||
map.has(id) && (map.get(id).detectingPayload.show = show)
|
||||
}
|
||||
|
||||
console.log(props.data,'----props')
|
||||
return () => (
|
||||
<NDataTable
|
||||
key={row => row.id}
|
||||
|
||||
@ -24,8 +24,12 @@ onMounted(async () => {
|
||||
})
|
||||
|
||||
const { flyTo } = useEarth()
|
||||
const curItem=ref('')
|
||||
const curTitle=ref('')
|
||||
const show=ref(false)
|
||||
|
||||
const textClick = item => {
|
||||
console.log('item--',item)
|
||||
// console.log(item, 'item s')
|
||||
const { geom } = item
|
||||
if (geom) {
|
||||
@ -37,10 +41,14 @@ const textClick = item => {
|
||||
alt: 2000000,
|
||||
});
|
||||
}
|
||||
openDetailsModal({
|
||||
contentString: item.detailContent,
|
||||
titleString: item.title,
|
||||
})
|
||||
// openDetailsModal({
|
||||
// contentString: item.detailContent,
|
||||
// titleString: item.title,
|
||||
// })
|
||||
curItem.value = item.detailContent
|
||||
curTitle.value = item.title
|
||||
show.value = true
|
||||
|
||||
}
|
||||
const getIconChange=(item,type)=>{
|
||||
|
||||
@ -50,56 +58,90 @@ const getIconChange=(item,type)=>{
|
||||
|
||||
<template>
|
||||
<div class="w-h-full">
|
||||
<n-scrollbar>
|
||||
<div
|
||||
class="cursor-pointer leading-8 hover:text-blue-400"
|
||||
v-for="(item, index) in list"
|
||||
:key="item.title"
|
||||
@click="textClick(item)"
|
||||
<n-modal
|
||||
v-model:show="show"
|
||||
preset="dialog"
|
||||
:title="curTitle"
|
||||
class="bg-[#1c202cee] text-white"
|
||||
style="width: auto"
|
||||
>
|
||||
<!-- 新增 flex 容器使文字和图标水平排列 -->
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="flex items-center">
|
||||
<span class="inline-block w-6">{{ index + 1 }}.</span>
|
||||
{{ item.title }}
|
||||
</div>
|
||||
<div class="flex items-center">
|
||||
<img
|
||||
@click.stop="()=>{
|
||||
getIconChange(item,'word')
|
||||
}"
|
||||
src="@/assets/image/icon/word.png"
|
||||
class="ml-3 h-4 w-4"
|
||||
alt="info icon"
|
||||
/>
|
||||
<img
|
||||
@click.stop="()=>{
|
||||
getIconChange(item,'excel')
|
||||
}"
|
||||
src="@/assets/image/icon/excel.png"
|
||||
class="ml-3 h-4 w-4"
|
||||
alt="info icon"
|
||||
/>
|
||||
<img
|
||||
@click.stop="()=>{
|
||||
getIconChange(item,'photo')
|
||||
}"
|
||||
src="@/assets/image/icon/photo.png"
|
||||
class="ml-3 h-4 w-4"
|
||||
alt="info icon"
|
||||
/>
|
||||
<img
|
||||
@click.stop="()=>{
|
||||
getIconChange(item,'zip')
|
||||
}"
|
||||
src="@/assets/image/icon/zip.png"
|
||||
class="ml-3 h-4 w-4"
|
||||
alt="info icon"
|
||||
/>
|
||||
</div>
|
||||
<h1>{{ curItem }}</h1>
|
||||
<div class="flex items-center my-container">
|
||||
<img
|
||||
src="@/assets/image/icon/word.png"
|
||||
class="ml-3 h-4 w-4"
|
||||
alt="info icon"
|
||||
/>
|
||||
<img
|
||||
src="@/assets/image/icon/excel.png"
|
||||
class="ml-3 h-4 w-4"
|
||||
alt="info icon"
|
||||
/>
|
||||
<img
|
||||
src="@/assets/image/icon/photo.png"
|
||||
class="ml-3 h-4 w-4"
|
||||
alt="info icon"
|
||||
/>
|
||||
<img
|
||||
src="@/assets/image/icon/zip.png"
|
||||
class="ml-3 h-4 w-4"
|
||||
alt="info icon"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</n-scrollbar>
|
||||
</n-modal>
|
||||
<n-scrollbar>
|
||||
<div
|
||||
class="cursor-pointer leading-8 hover:text-blue-400"
|
||||
v-for="(item, index) in list"
|
||||
:key="item.title"
|
||||
@click="textClick(item)"
|
||||
>
|
||||
<!-- 新增 flex 容器使文字和图标水平排列 -->
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="flex items-center">
|
||||
<span class="inline-block w-6">{{ index + 1 }}.</span>
|
||||
{{ item.title }}
|
||||
</div>
|
||||
<div class="flex items-center">
|
||||
<img
|
||||
@click.stop="()=>{
|
||||
getIconChange(item,'word')
|
||||
}"
|
||||
src="@/assets/image/icon/word.png"
|
||||
class="ml-3 h-4 w-4"
|
||||
alt="info icon"
|
||||
/>
|
||||
<img
|
||||
@click.stop="()=>{
|
||||
getIconChange(item,'excel')
|
||||
}"
|
||||
src="@/assets/image/icon/excel.png"
|
||||
class="ml-3 h-4 w-4"
|
||||
alt="info icon"
|
||||
/>
|
||||
<img
|
||||
@click.stop="()=>{
|
||||
getIconChange(item,'photo')
|
||||
}"
|
||||
src="@/assets/image/icon/photo.png"
|
||||
class="ml-3 h-4 w-4"
|
||||
alt="info icon"
|
||||
/>
|
||||
<img
|
||||
@click.stop="()=>{
|
||||
getIconChange(item,'zip')
|
||||
}"
|
||||
src="@/assets/image/icon/zip.png"
|
||||
class="ml-3 h-4 w-4"
|
||||
alt="info icon"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</n-scrollbar>
|
||||
<n-button @click="handleConfirm">
|
||||
警告
|
||||
</n-button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -109,4 +151,7 @@ const getIconChange=(item,type)=>{
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
}
|
||||
.my-container{
|
||||
margin-top: 20px;
|
||||
}
|
||||
</style>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user