feat:装备多载荷部分开发
This commit is contained in:
parent
b88b9a1589
commit
0bd8b19338
@ -4,6 +4,8 @@ import { getMubiaoHisTraj } from '@/api/Mubiao'
|
||||
const baseMap = new Map()
|
||||
const mubiaoMap = new Map()
|
||||
const mubiaoConicMap = new Map()
|
||||
const ellipsoidSensorMap = new Map()
|
||||
|
||||
const satelliteMap = new Map()
|
||||
const satelliteBeamMap = new Map()
|
||||
|
||||
@ -17,6 +19,7 @@ export const useEntity = () => {
|
||||
baseMap,
|
||||
mubiaoMap,
|
||||
mubiaoConicMap,
|
||||
ellipsoidSensorMap,
|
||||
satelliteMap,
|
||||
satelliteBeamMap,
|
||||
mbPayloadShowMap,
|
||||
@ -27,6 +30,7 @@ export const useEntity = () => {
|
||||
getHisTraj,
|
||||
getMBEntityOpt,
|
||||
createMBConicSensor,
|
||||
createMBEllipsoidSensor,
|
||||
iconOrModel,
|
||||
changeIconOrModel,
|
||||
showOrHideLoad,
|
||||
@ -79,164 +83,150 @@ async function getHisTraj({
|
||||
return { points, posArray, timeArray }
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取目标实体配置选项
|
||||
* @param id 目标ID
|
||||
* @param targetType 目标类型
|
||||
* @param country 国家代码
|
||||
* @returns 返回创建的实体对象
|
||||
*/
|
||||
async function getMBEntityOpt({
|
||||
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 mubiaoDict = window.settings.mbDict[targetType];
|
||||
const countryColor = window.settings.mbCountryDict[country];
|
||||
|
||||
// console.log(country, countryColor)
|
||||
// 静态方向配置（北京附近，高度10km）
|
||||
const staticOrientation = {
|
||||
position: Cesium.Cartesian3.fromDegrees(116.0, 39.9, 10000), // 初始位置（北京附近，高度10km）
|
||||
position: Cesium.Cartesian3.fromDegrees(116.0, 39.9, 10000), // 初始位置（经度,纬度,高度）
|
||||
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(90), // 航向：正东方向
|
||||
Cesium.Math.toRadians(-90), // 俯仰：垂直向下
|
||||
Cesium.Math.toRadians(0) // 滚转：保持水平
|
||||
)
|
||||
),
|
||||
properties: {
|
||||
velocity: 800, // 飞行速度（km/h）
|
||||
heading: 90.0, // 当前航向（度）
|
||||
pitch: -90, // 当前俯仰（度）
|
||||
roll: 0.0, // 当前滚转（度）
|
||||
altitude: 10000 // 当前高度（米）
|
||||
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,
|
||||
},
|
||||
}
|
||||
}
|
||||
// 检查是否为特殊ID
|
||||
let flag = false;
|
||||
const specialIds = ['xx19', 'xx42', 'xxx1', 'xx14', 'xx30', 'xx48', 'xx24', 'xx'];
|
||||
if (specialIds.includes(id)) {
|
||||
flag = true;
|
||||
}
|
||||
|
||||
// 获取着色后的图标
|
||||
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
|
||||
),
|
||||
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,
|
||||
image: image.img,
|
||||
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),
|
||||
},
|
||||
// 模型配置
|
||||
model: {
|
||||
show: iconOrModel.value,
|
||||
uri: mubiaoDict.model,
|
||||
scale: 100,
|
||||
minimumPixelSize: 5,
|
||||
},
|
||||
// 如果是特殊ID，添加静态方向属性
|
||||
...(flag ? {
|
||||
orientation: staticOrientation.orientation,
|
||||
properties: staticOrientation.properties
|
||||
} : {}),
|
||||
...ellipsoid,
|
||||
}
|
||||
};
|
||||
}
|
||||
/**
|
||||
* 创建椭球体传感器实体
|
||||
* @param entity 关联的主实体
|
||||
* @param show 是否显示
|
||||
* @param radius 半径（单位：千米）
|
||||
* @param minimumCone 最小锥角（度）
|
||||
* @param maximumCone 最大锥角（度）
|
||||
* @param minimumClock 最小时钟角（度）
|
||||
* @param maximumClock 最大时钟角（度）
|
||||
* @returns 返回创建的椭球体传感器实体
|
||||
*/
|
||||
function createMBEllipsoidSensor({
|
||||
entity,
|
||||
show,
|
||||
radius,
|
||||
minimumCone,
|
||||
maximumCone,
|
||||
minimumClock,
|
||||
maximumClock,
|
||||
}: {
|
||||
entity: Cesium.Entity
|
||||
show: boolean
|
||||
radius: number
|
||||
minimumCone?: number
|
||||
maximumCone?: number
|
||||
minimumClock?: number
|
||||
maximumClock?: number
|
||||
}) {
|
||||
// 创建椭球体图形对象
|
||||
const ellipsoid = new Cesium.EllipsoidGraphics({
|
||||
show,
|
||||
radii: new Cesium.Cartesian3(radius, radius, radius), // 设置XYZ轴半径
|
||||
innerRadii: new Cesium.Cartesian3(1.0, 1.0, 1.0), // 内半径
|
||||
maximumCone: maximumCone !== undefined ? Cesium.Math.toRadians(maximumCone) : Cesium.Math.toRadians(90), // 最大锥角（弧度）
|
||||
minimumCone: minimumCone !== undefined ? Cesium.Math.toRadians(minimumCone) : 0, // 最小锥角（弧度）
|
||||
minimumClock: minimumClock !== undefined ? Cesium.Math.toRadians(minimumClock) : 0, // 最小时钟角（弧度）
|
||||
maximumClock: maximumClock !== undefined ? Cesium.Math.toRadians(maximumClock) : 2 * Math.PI, // 最大时钟角（弧度）
|
||||
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, // 堆叠分区数
|
||||
});
|
||||
|
||||
async function getImageByColor({ img: url, color: newColor }) {
|
||||
// 步骤 1: 获取 SVG 内容
|
||||
const svg = await fetch(url)
|
||||
const svgContent = await svg.text()
|
||||
// 创建并添加椭球体传感器实体
|
||||
const mbEllipsoid = viewer.entities.add({
|
||||
position: entity.position, // 使用主实体位置
|
||||
orientation: entity.orientation, // 使用主实体方向
|
||||
ellipsoid: ellipsoid // 添加椭球体图形
|
||||
});
|
||||
|
||||
// 步骤 2: 修改 SVG 的颜色
|
||||
const parser = new DOMParser()
|
||||
const svgDoc = parser.parseFromString(svgContent, 'image/svg+xml')
|
||||
|
||||
// 修改所有路径、圆形、矩形等元素的填充颜色
|
||||
const elements = svgDoc.querySelectorAll('path, circle, rect, polygon, line')
|
||||
elements.forEach(element => {
|
||||
// 修改 fill 属性
|
||||
element.setAttribute('fill', newColor)
|
||||
// 也可以修改 stroke 颜色，防止可能的边框颜色问题
|
||||
element.setAttribute('stroke', newColor)
|
||||
})
|
||||
|
||||
const svgElement = svgDoc.documentElement
|
||||
// console.log(svgElement)
|
||||
|
||||
// const transformValue = `rotate(${90}, 50, 50)`
|
||||
// svgElement.setAttribute('transform', transformValue)
|
||||
|
||||
// 获取 SVG 的宽度和高度
|
||||
const width = svgElement.getAttribute('width')
|
||||
const height = svgElement.getAttribute('height')
|
||||
|
||||
// 步骤 3: 转换为 Base64 编码
|
||||
const serializer = new XMLSerializer()
|
||||
const modifiedSVG = serializer.serializeToString(svgDoc.documentElement)
|
||||
|
||||
// 输出修改后的 SVG，确保颜色正确
|
||||
const base64SVG = 'data:image/svg+xml;base64,' + btoa(modifiedSVG)
|
||||
|
||||
console.log(base64SVG)
|
||||
return { img: base64SVG, width, height }
|
||||
return mbEllipsoid;
|
||||
}
|
||||
|
||||
function createMBConicSensor({
|
||||
@ -285,6 +275,46 @@ function createMBConicSensor({
|
||||
})
|
||||
return mbConic
|
||||
}
|
||||
async function getImageByColor({ img: url, color: newColor }) {
|
||||
// 步骤 1: 获取 SVG 内容
|
||||
const svg = await fetch(url)
|
||||
const svgContent = await svg.text()
|
||||
|
||||
// 步骤 2: 修改 SVG 的颜色
|
||||
const parser = new DOMParser()
|
||||
const svgDoc = parser.parseFromString(svgContent, 'image/svg+xml')
|
||||
|
||||
// 修改所有路径、圆形、矩形等元素的填充颜色
|
||||
const elements = svgDoc.querySelectorAll('path, circle, rect, polygon, line')
|
||||
elements.forEach(element => {
|
||||
// 修改 fill 属性
|
||||
element.setAttribute('fill', newColor)
|
||||
// 也可以修改 stroke 颜色，防止可能的边框颜色问题
|
||||
element.setAttribute('stroke', newColor)
|
||||
})
|
||||
|
||||
const svgElement = svgDoc.documentElement
|
||||
// console.log(svgElement)
|
||||
|
||||
// const transformValue = `rotate(${90}, 50, 50)`
|
||||
// svgElement.setAttribute('transform', transformValue)
|
||||
|
||||
// 获取 SVG 的宽度和高度
|
||||
const width = svgElement.getAttribute('width')
|
||||
const height = svgElement.getAttribute('height')
|
||||
|
||||
// 步骤 3: 转换为 Base64 编码
|
||||
const serializer = new XMLSerializer()
|
||||
const modifiedSVG = serializer.serializeToString(svgDoc.documentElement)
|
||||
|
||||
// 输出修改后的 SVG，确保颜色正确
|
||||
const base64SVG = 'data:image/svg+xml;base64,' + btoa(modifiedSVG)
|
||||
|
||||
console.log(base64SVG)
|
||||
return { img: base64SVG, width, height }
|
||||
}
|
||||
|
||||
|
||||
|
||||
const iconOrModel = ref(false)
|
||||
function changeIconOrModel() {
|
||||
@ -300,16 +330,46 @@ const showOrHideLoad = ref(false)
|
||||
watch([mbPayloadShowMap, satellitePayloadShowMap], ([newMb, newSatellite]) => {
|
||||
;[...newMb.keys()].forEach(key => {
|
||||
let show = false
|
||||
console.log('newMb.get(key)',newMb.get(key))
|
||||
console.log('--------------watch',key,show)
|
||||
if (newMb.get(key).detectingPayload) {
|
||||
show = newMb.get(key).detectingPayload.show
|
||||
}
|
||||
if (mubiaoMap.has(key)) {
|
||||
// console.log(mubiaoMap.get(key).ellipsoid)
|
||||
mubiaoMap.get(key).ellipsoid && (mubiaoMap.get(key).ellipsoid.show = show)
|
||||
if(newMb.get(key)?.extendInfo){
|
||||
const airplaneConicPayload=newMb.get(key)?.extendInfo?.airplaneConicPayload;
|
||||
const radarPayload=newMb.get(key)?.extendInfo?.radarPayload
|
||||
if(airplaneConicPayload){
|
||||
for(let i=0;i<airplaneConicPayload.length;i++){
|
||||
const innerId=airplaneConicPayload[i].id
|
||||
mubiaoConicMap.get(innerId)?.conicSensor &&
|
||||
(mubiaoConicMap.get(innerId).conicSensor.show = show)
|
||||
}
|
||||
}
|
||||
if(radarPayload){
|
||||
for(let i=0;i<radarPayload.length;i++){
|
||||
const innerId=radarPayload[i].id
|
||||
ellipsoidSensorMap.get(innerId)?.ellipsoid&&
|
||||
(ellipsoidSensorMap.get(innerId).ellipsoid.show = show)
|
||||
}
|
||||
}
|
||||
|
||||
mubiaoConicMap.get(key)?.conicSensor &&
|
||||
(mubiaoConicMap.get(key).conicSensor.show = show)
|
||||
}
|
||||
|
||||
// if (newMb.get(key).detectingPayload) {
|
||||
// show = newMb.get(key).detectingPayload.show
|
||||
// }
|
||||
// console.log('--------------watch',key,show)
|
||||
|
||||
// if (mubiaoMap.has(key)) {
|
||||
// // console.log(mubiaoMap.get(key).ellipsoid)
|
||||
// // mubiaoMap.get(key).ellipsoid && (mubiaoMap.get(key).ellipsoid.show = show)
|
||||
|
||||
// // 控制椭圆载体显隐
|
||||
// ellipsoidSensorMap.get(key)?.ellipsoid&&
|
||||
// (ellipsoidSensorMap.get(key).ellipsoid.show = show)
|
||||
// mubiaoConicMap.get(key)?.conicSensor &&
|
||||
// (mubiaoConicMap.get(key).conicSensor.show = show)
|
||||
// }
|
||||
})
|
||||
;[...newSatellite.keys()].forEach(key => {
|
||||
let show = false
|
||||
|
||||
@ -1,44 +1,17 @@
|
||||
<template>
|
||||
<div
|
||||
class="picBox"
|
||||
@mouseenter="isHover = true"
|
||||
@mouseleave="isHover = false"
|
||||
>
|
||||
<div id="mousemoveBox">
|
||||
<div id="line">
|
||||
<!-- <img
|
||||
v-show="isHover"
|
||||
id="move"
|
||||
src="../../assets/img/area.png"
|
||||
alt=""
|
||||
/> -->
|
||||
<div class="image-roller-container">
|
||||
<div class="image-wrapper h-full w-full" @mousemove="handleMouseMove" @mouseleave="handleMouseLeave">
|
||||
<img :src="path + imgList[0]" alt="Image 1" class="image" />
|
||||
<img :src="path + imgList[1]" alt="Image 2" class="image" :style="imageStyle" />
|
||||
</div>
|
||||
<div class="my-data">
|
||||
雨辰接口数据
|
||||
</div>
|
||||
</div>
|
||||
<div id="before">
|
||||
<img id="beforeImg" :src="path + imgList[0]" alt="" />
|
||||
</div>
|
||||
<div id="after">
|
||||
<img id="afterImg" :src="path + imgList[1]" alt="" />
|
||||
</div>
|
||||
<div id="text">
|
||||
<h2 id="h2">12312312雨辰接口数据</h2>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
// @ts-nocheck
|
||||
import {
|
||||
defineComponent,
|
||||
reactive,
|
||||
toRefs,
|
||||
onMounted,
|
||||
onUnmounted,
|
||||
ref,
|
||||
} from "vue";
|
||||
import { useRoute, useRouter } from "vue-router";
|
||||
|
||||
export default defineComponent({
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
imgList: {
|
||||
type: Object || Array,
|
||||
@ -48,162 +21,57 @@ export default defineComponent({
|
||||
default: "",
|
||||
},
|
||||
},
|
||||
setup(props, { emit }) {
|
||||
const route = useRoute();
|
||||
const router = useRouter();
|
||||
const contentWidth = ref("");
|
||||
const contentHeight = ref("");
|
||||
const imgWidth = ref(0);
|
||||
const isHover = ref(true);
|
||||
|
||||
const state = reactive({});
|
||||
|
||||
onMounted(() => {
|
||||
const picBox = document.querySelector(".picBox");
|
||||
contentWidth.value = picBox.offsetWidth + "px";
|
||||
contentHeight.value = picBox.offsetHeight + "px";
|
||||
contrastImg(props.imgIdList);
|
||||
});
|
||||
let line = null; //domLine
|
||||
let move = null; //domMove
|
||||
let after = null; //domAfter
|
||||
let before = null; //domBefore
|
||||
let picBox = null; //domPicBox
|
||||
let afterImg = null; //domAfterImg
|
||||
let beforeImg = null; //domBeforeImg
|
||||
let x = 0; //鼠标在页面中的位置
|
||||
let afterX = 0; //after在页面中的位置
|
||||
let picBoxWidth = 0; //picBox的宽度
|
||||
let beforeWidth = 0; //before的宽度
|
||||
let afterWidth = 0; //after的宽度
|
||||
let moveFlag = false; //鼠标是否抬起
|
||||
let lineLeft = 0; //line在页面中的位置
|
||||
let picBoxX = 0; //picBox在页面中的位置
|
||||
|
||||
const beforeMove = (beforeWidth) => {
|
||||
before.style.width = beforeWidth + "px";
|
||||
};
|
||||
const afterMove = (mousemoveDistance) => {
|
||||
after.style.width = afterWidth - mousemoveDistance + "px";
|
||||
after.style.left = afterX + mousemoveDistance + "px";
|
||||
afterImg.style.left = -(afterX + mousemoveDistance) + "px";
|
||||
};
|
||||
const mousedown = (e) => {
|
||||
picBoxX = picBox.getBoundingClientRect().left;
|
||||
moveFlag = false;
|
||||
x = e.pageX;
|
||||
beforeWidth = before.offsetWidth;
|
||||
afterWidth = after.offsetWidth;
|
||||
picBoxWidth = picBox.offsetWidth;
|
||||
afterX = after.offsetLeft;
|
||||
lineLeft = line.offsetLeft;
|
||||
line.addEventListener("mousemove", mousemove);
|
||||
};
|
||||
const mousemove = (e) => {
|
||||
if (moveFlag) return;
|
||||
if (e.pageX <= picBoxX || e.pageX >= picBoxX + picBoxWidth) return;
|
||||
const mousemoveDistance = e.pageX - x;
|
||||
line.style.left = mousemoveDistance + lineLeft + "px";
|
||||
// move.style.left = mousemoveDistance + lineLeft + 34 + "px";
|
||||
const beforeMoveWidth = beforeWidth + mousemoveDistance;
|
||||
beforeMove(beforeMoveWidth);
|
||||
afterMove(mousemoveDistance);
|
||||
};
|
||||
const mouseup = () => {
|
||||
moveFlag = true;
|
||||
};
|
||||
const contrastImg = (e) => {
|
||||
line = document.getElementById("line");
|
||||
// move = document.getElementById("move");
|
||||
after = document.getElementById("after");
|
||||
before = document.getElementById("before");
|
||||
picBox = document.querySelector(".picBox");
|
||||
afterImg = document.getElementById("afterImg");
|
||||
beforeImg = document.getElementById("beforeImg");
|
||||
line.addEventListener("mousedown", mousedown);
|
||||
document.addEventListener("mouseup", mouseup);
|
||||
};
|
||||
|
||||
onUnmounted(() => {
|
||||
line.removeEventListener("mousemove", mousemove);
|
||||
line.removeEventListener("mousedown", mousedown);
|
||||
document.addEventListener("mouseup", mouseup);
|
||||
});
|
||||
|
||||
return {
|
||||
...toRefs(state),
|
||||
isHover,
|
||||
};
|
||||
data() {
|
||||
return {
|
||||
positionX: 50
|
||||
};
|
||||
},
|
||||
});
|
||||
computed: {
|
||||
imageStyle() {
|
||||
return {
|
||||
clipPath: `inset(0 0 0 ${this.positionX}%)`,
|
||||
};
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
handleMouseMove(event) {
|
||||
const rect = event.target.getBoundingClientRect();
|
||||
this.positionX = ((event.clientX - rect.left) / rect.width) * 100;
|
||||
},
|
||||
handleMouseLeave() {
|
||||
// this.positionX = 50;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.picBox {
|
||||
<style scoped>
|
||||
.image-roller-container {
|
||||
width: 100%;
|
||||
/* max-width: 600px; */
|
||||
margin: 0 auto;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
font-size: 0;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.image-wrapper {
|
||||
margin-top: 12px;
|
||||
position: relative;
|
||||
width: 50%;
|
||||
height: 585px;
|
||||
/* 根据需要调整高度 */
|
||||
}
|
||||
|
||||
.image {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
#mousemoveBox {
|
||||
position: absolute;
|
||||
width: 100px;
|
||||
height: 100%;
|
||||
left: calc(50% - 30px);
|
||||
z-index: 4;
|
||||
#line {
|
||||
position: absolute;
|
||||
width: 60px;
|
||||
height: 30px;
|
||||
top: calc(50% - 15px);
|
||||
z-index: 5;
|
||||
background: rgba(255, 255, 255, 0.4);
|
||||
}
|
||||
#move {
|
||||
position: absolute;
|
||||
left: 34px;
|
||||
width: 32px;
|
||||
top: calc(50% - 15px);
|
||||
z-index: 5;
|
||||
}
|
||||
}
|
||||
#before {
|
||||
position: absolute;
|
||||
width: 50%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
#beforeImg {
|
||||
position: absolute;
|
||||
width: v-bind(contentWidth);
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
#after {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
width: 50%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
#afterImg {
|
||||
position: absolute;
|
||||
left: -100%;
|
||||
width: v-bind(contentWidth);
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
#text {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
width: 50%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
#h2 {
|
||||
position: absolute;
|
||||
// left: -100%;
|
||||
width: 50%;
|
||||
height: 100%;
|
||||
font-size: 16px;
|
||||
|
||||
}
|
||||
}
|
||||
object-fit: cover;
|
||||
}
|
||||
.my-data{
|
||||
margin: 20px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -7,7 +7,6 @@ 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'
|
||||
|
||||
|
||||
|
||||
@ -42,7 +41,7 @@ const rangeShortcuts = {
|
||||
return [cur - 365 * 24 * 60 * 60 * 1000, cur]
|
||||
},
|
||||
}
|
||||
const showPreview = ref(true)
|
||||
const showPreview = ref(false)
|
||||
const previewIndex = ref(0)
|
||||
|
||||
|
||||
@ -119,7 +118,7 @@ const compareImages = () => {
|
||||
showPreview.value = true
|
||||
activeIndex.value = -1
|
||||
previewIndex.value = 0
|
||||
// showPreview.value = true
|
||||
showPreview.value = true
|
||||
isCompare.value = true
|
||||
}
|
||||
} else {
|
||||
@ -182,11 +181,8 @@ const formatTime = (time) => {
|
||||
<n-button type="primary" @click="changeShow" v-if="isCompare">{{ btnText }}</n-button>
|
||||
</div>
|
||||
<div class="large-container">
|
||||
<!-- <h1 v-if="isJ" >12345</h1> -->
|
||||
<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-[210px] flex-col">
|
||||
<div class="flex gap-2">
|
||||
|
||||
@ -31,7 +31,9 @@ const {
|
||||
mubiaoMap,
|
||||
getMBEntityOpt,
|
||||
createMBConicSensor,
|
||||
createMBEllipsoidSensor,
|
||||
mubiaoConicMap,
|
||||
ellipsoidSensorMap,
|
||||
mbPayloadShowMap,
|
||||
} = useEntity()
|
||||
// const { mubiaoMap } = storeToRefs(entity)
|
||||
@ -128,17 +130,51 @@ export const useMubiao = () => {
|
||||
...mbEntityOpt,
|
||||
})
|
||||
|
||||
if (extendInfo?.detectingPayload?.angle) {
|
||||
const conic = createMBConicSensor({
|
||||
entity: mubiaoEntity,
|
||||
radius: extendInfo?.detectingPayload?.radius,
|
||||
// 设置多载荷分类
|
||||
console.log(extendInfo,'=======extendInfo')
|
||||
console.log(mbPayloadShowMap.get(id),'-----mbPayloadShowMap.get(id)')
|
||||
|
||||
angle: extendInfo?.detectingPayload?.angle,
|
||||
heading: extendInfo?.detectingPayload?.heading,
|
||||
pitch: extendInfo?.detectingPayload?.pitch,
|
||||
show: mbPayloadShowMap.get(id).detectingPayload.show,
|
||||
})
|
||||
mubiaoConicMap.set(id, conic)
|
||||
if (extendInfo?.airplaneConicPayload) {
|
||||
console.log(extendInfo?.airplaneConicPayload)
|
||||
for(let i=0;i<extendInfo?.airplaneConicPayload.length;i++){
|
||||
const innerId=extendInfo?.airplaneConicPayload[i].id
|
||||
const detectingPayload=extendInfo?.airplaneConicPayload[i]
|
||||
console.log(detectingPayload,'--detectingPayload',id)
|
||||
// console.log(mubiaoConicMap.get(id),'---mubiaoConicMap.get(id)')
|
||||
const conic = createMBConicSensor({
|
||||
entity: mubiaoEntity,
|
||||
radius: detectingPayload?.radius,
|
||||
angle: detectingPayload?.angle,
|
||||
heading: detectingPayload?.heading,
|
||||
pitch: detectingPayload?.pitch,
|
||||
show: detectingPayload?.show,
|
||||
// show: mbPayloadShowMap.get(id)?.detectingPayload?.show || false
|
||||
|
||||
})
|
||||
console.log(id,'----id',conic,'---conic')
|
||||
mubiaoConicMap.set(innerId, conic)
|
||||
console.log(mubiaoConicMap.get(innerId),'--mubiaoConicMap---')
|
||||
}
|
||||
|
||||
}
|
||||
if(extendInfo?.radarPayload){
|
||||
console.log(extendInfo?.radarPayload,'---extendInfo?.radarPayload')
|
||||
for(let i=0;i<extendInfo?.radarPayload.length;i++){
|
||||
const innerId=extendInfo?.radarPayload[i].id
|
||||
const detectingPayload=extendInfo?.radarPayload[i]
|
||||
console.log(ellipsoidSensorMap.get(id),'---ellipsoidSensorMap.get(id)')
|
||||
const ellipsoid = createMBEllipsoidSensor({
|
||||
entity: mubiaoEntity,
|
||||
radius: detectingPayload?.radius,
|
||||
minimumCone: detectingPayload?.minimumCone,
|
||||
maximumCone: detectingPayload?.maximumCone,
|
||||
minimumClock: detectingPayload?.minimumClock,
|
||||
maximumClock: detectingPayload?.maximumClock,
|
||||
// show: mbPayloadShowMap.get(id)?.detectingPayload?.show || false
|
||||
show: detectingPayload?.show
|
||||
});
|
||||
ellipsoidSensorMap.set(innerId, ellipsoid)
|
||||
}
|
||||
}
|
||||
return mubiaoEntity
|
||||
}
|
||||
@ -177,6 +213,10 @@ export const useMubiao = () => {
|
||||
viewer.entities.remove(mubiaoConicMap.get(id))
|
||||
mubiaoConicMap.delete(id)
|
||||
}
|
||||
if (ellipsoidSensorMap.has(id)) {
|
||||
viewer.entities.remove(ellipsoidSensorMap.get(id))
|
||||
ellipsoidSensorMap.delete(id)
|
||||
}
|
||||
}
|
||||
|
||||
const updateMubiaoPos = async (
|
||||
@ -264,15 +304,22 @@ async function getMubiaoData() {
|
||||
|
||||
function getAllNodesToPayload() {
|
||||
const mbList = getLeafNode(data.value[0])
|
||||
console.log(mbList,'--mbList--')
|
||||
mbList.forEach(node => {
|
||||
const { dataId, data: nodeData } = node
|
||||
const { extendInfo } = nodeData
|
||||
const detectingShow =
|
||||
mbPayloadShowMap.get(dataId)?.detectingPayload?.show || false
|
||||
|
||||
if (extendInfo) {
|
||||
// mbPayloadShowMap.set(dataId, {
|
||||
// data: toRaw(nodeData),
|
||||
// detectingPayload: { ...extendInfo, show: detectingShow },
|
||||
// })
|
||||
|
||||
mbPayloadShowMap.set(dataId, {
|
||||
data: toRaw(nodeData),
|
||||
detectingPayload: { ...extendInfo, show: detectingShow },
|
||||
extendInfo
|
||||
})
|
||||
}
|
||||
})
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
// import { h } from 'vue'
|
||||
import { NButton, NInputNumber, NSwitch } from 'naive-ui'
|
||||
import { NButton, NInputNumber, NSwitch , NRadioButton,NRadioGroup} from 'naive-ui'
|
||||
import { useModal } from '@/views/Content/hooks/modal'
|
||||
import Detection from '@/views/Payload/Detection.jsx'
|
||||
import Communication from '@/views/Payload/Communication.jsx'
|
||||
@ -11,35 +11,38 @@ import { isNull, isUndefined } from 'es-toolkit'
|
||||
const { openDetailsModal } = useModal()
|
||||
export const useMubiaoDetail = () => {
|
||||
const payloadData = ref([])
|
||||
const payloadTabType=ref('radar')
|
||||
const payLoadTypeRef=ref('')
|
||||
|
||||
function addCommunicationPayload(mbData) {
|
||||
const { id, targetType, extendInfo } = mbData
|
||||
console.log(mbData,'-000--mbData')
|
||||
console.log(extendInfo,'-------extendInfo')
|
||||
console.log(payloadTabType.value,'-------payloadTabType.value')
|
||||
console.log(payloadData.value,'-0000-payloadData')
|
||||
|
||||
const payLoadType = window.settings.mbDict[targetType].payload
|
||||
const payLoadType = payloadTabType.value
|
||||
if (payLoadType === 'radar') {
|
||||
payloadData.value = [
|
||||
{
|
||||
id,
|
||||
radius: null,
|
||||
minimumClock: null,
|
||||
maximumClock: 90,
|
||||
minimumCone: null,
|
||||
maximumCone: null,
|
||||
show: false,
|
||||
zhName:''
|
||||
},
|
||||
]
|
||||
|
||||
// payloadData.value = extendInfo.radarPayload ? extendInfo.radarPayload : []
|
||||
payloadData.value.push({
|
||||
radius: null,
|
||||
minimumClock: null,
|
||||
maximumClock: 90,
|
||||
minimumCone: null,
|
||||
maximumCone: null,
|
||||
show: false,
|
||||
zhName:''
|
||||
})
|
||||
} else if (payLoadType === 'airplaneConic') {
|
||||
payloadData.value = [
|
||||
{
|
||||
id,
|
||||
angle: 30,
|
||||
radius: 10,
|
||||
heading: 90,
|
||||
pitch: 180,
|
||||
show: false,
|
||||
},
|
||||
]
|
||||
// payloadData.value = extendInfo.airplaneConicPayload ? extendInfo.airplaneConicPayload : []
|
||||
payloadData.value.push( {
|
||||
angle: 30,
|
||||
radius: 10,
|
||||
heading: 90,
|
||||
pitch: 180,
|
||||
show: false,
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
@ -49,19 +52,31 @@ export const useMubiaoDetail = () => {
|
||||
const { mbPayloadShowMap } = useEntity()
|
||||
|
||||
function renderMubiaoDetailsContent(mbData) {
|
||||
console.log(mbData,'-----mbData000')
|
||||
payloadData.value = []
|
||||
const { id, targetType, extendInfo } = mbData
|
||||
const payLoadType = window.settings.mbDict[targetType].payload
|
||||
console.log(extendInfo,'---extendInfoextendInfo')
|
||||
console.log(extendInfo && payloadTabType.value == 'radar' && extendInfo.radarPayload,'-999-00-')
|
||||
console.log('--00-')
|
||||
|
||||
if (extendInfo) {
|
||||
payloadData.value = [
|
||||
{
|
||||
id,
|
||||
...extendInfo.detectingPayload,
|
||||
show: mbPayloadShowMap.get(id).detectingPayload.show,
|
||||
},
|
||||
]
|
||||
if(extendInfo && payloadTabType.value == 'radar' && extendInfo.radarPayload){
|
||||
payloadData.value = extendInfo.radarPayload
|
||||
console.log(extendInfo.radarPayload,'--00extendInfo.radarPayload')
|
||||
}else if(extendInfo && payloadTabType.value == 'airplaneConic'&&extendInfo.airplaneConicPayload){
|
||||
payloadData.value = extendInfo.airplaneConicPayload
|
||||
}
|
||||
|
||||
console.log(payloadData.value,'---payloadData--')
|
||||
|
||||
// if (extendInfo) {
|
||||
// payloadData.value = [
|
||||
// {
|
||||
// id,
|
||||
// ...extendInfo.detectingPayload,
|
||||
// show: mbPayloadShowMap.get(id).detectingPayload.show,
|
||||
// },
|
||||
// ]
|
||||
// }
|
||||
// return h(
|
||||
// 'div',
|
||||
// {},
|
||||
@ -80,8 +95,21 @@ export const useMubiaoDetail = () => {
|
||||
{/* <div class="detail-item-title">探测载荷</div>
|
||||
*/}
|
||||
<div class="flex justify-between">
|
||||
<div class="detail-item-title">探测载荷</div>
|
||||
{payloadData.value.length === 0 ? (
|
||||
<div >
|
||||
{/* <div class="detail-item-title"> */}
|
||||
|
||||
<NRadioGroup
|
||||
v-model:value={payloadTabType.value}
|
||||
name="radiobuttongroup"
|
||||
onChange={()=>changePayloadType(mbData)}
|
||||
>
|
||||
<NRadioButton value={'radar'} label="扇形载荷" />
|
||||
<NRadioButton value={'airplaneConic'} label="圆锥载荷" />
|
||||
</NRadioGroup>
|
||||
</div>
|
||||
|
||||
|
||||
{/* {payloadData.value.length === 0 ? (
|
||||
<NButton
|
||||
quaternary
|
||||
type="primary"
|
||||
@ -97,10 +125,28 @@ export const useMubiaoDetail = () => {
|
||||
>
|
||||
删除载荷
|
||||
</NButton>
|
||||
)}
|
||||
)} */}
|
||||
|
||||
|
||||
<NButton
|
||||
quaternary
|
||||
type="primary"
|
||||
onClick={() => addCommunicationPayload(mbData)}
|
||||
>
|
||||
添加载荷
|
||||
</NButton>
|
||||
|
||||
<NButton
|
||||
quaternary
|
||||
type="error"
|
||||
onClick={() => removeCommunicationPayload()}
|
||||
>
|
||||
删除载荷
|
||||
</NButton>
|
||||
|
||||
</div>
|
||||
{payloadData.value.length > 0 && (
|
||||
<Detection target="mb" type={payLoadType} data={payloadData.value} />
|
||||
<Detection target="mb" type={payloadTabType.value} data={payloadData.value} />
|
||||
)}
|
||||
|
||||
<div class="flex justify-end gap-2">
|
||||
@ -126,47 +172,127 @@ export const useMubiaoDetail = () => {
|
||||
contentSlot: renderMubiaoDetailsContent(mbData),
|
||||
})
|
||||
}
|
||||
function changePayloadType(mbData){
|
||||
// if(payloadTabType.value == 'radar'){
|
||||
// payLoadTypeRef.value=payloadTabType.value
|
||||
// }else if(payloadTabType.value == 'airplaneConic'){
|
||||
// payLoadTypeRef.value=payloadTabType.value
|
||||
// }
|
||||
console.log(mbData,'-----changePayloadType')
|
||||
payloadData.value = []
|
||||
const { id, targetType, extendInfo } = mbData
|
||||
|
||||
|
||||
if(extendInfo && payloadTabType.value == 'radar' && extendInfo.radarPayload){
|
||||
payloadData.value = extendInfo.radarPayload
|
||||
console.log(extendInfo.radarPayload,'--00extendInfo.radarPayload')
|
||||
}else if(extendInfo && payloadTabType.value == 'airplaneConic'&&extendInfo.airplaneConicPayload){
|
||||
payloadData.value = extendInfo.airplaneConicPayload
|
||||
}
|
||||
|
||||
console.log(payloadTabType.value,'-------payloadType')
|
||||
}
|
||||
function updateMbLoad({ mbData, detection }) {
|
||||
|
||||
|
||||
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('------------')
|
||||
const { id, targetType, extendInfo } = mbData
|
||||
|
||||
if (
|
||||
Object.values(detectionData).some(
|
||||
item => isNull(item) || isUndefined(item)
|
||||
)
|
||||
) {
|
||||
window.$message.error('探测载荷信息不完整')
|
||||
return
|
||||
|
||||
console.log(mbData,'---mbDatambDatambData')
|
||||
console.log('------------', detection)
|
||||
|
||||
|
||||
const { getMubiaoData } = useMubiao()
|
||||
|
||||
if(!detection[0]){
|
||||
const payloadData = {
|
||||
id: mbData.id,
|
||||
extendInfo: {
|
||||
radarPayload:[],
|
||||
airplaneConicPayload:[]
|
||||
},
|
||||
}
|
||||
// console.log(payloadData)
|
||||
updateMbPayload(payloadData).then(res => {
|
||||
if (res.code === '200') {
|
||||
window.$message.success('保存成功')
|
||||
getMubiaoData()
|
||||
}
|
||||
})
|
||||
return
|
||||
}
|
||||
const payloadData = {
|
||||
id: mbData.id,
|
||||
extendInfo: {
|
||||
detectingPayload: { ...detectionData },
|
||||
},
|
||||
|
||||
// const { id, show, ...detectionData } = detection[0]
|
||||
// console.log('------------')
|
||||
|
||||
// if (
|
||||
// Object.values(detectionData).some(
|
||||
// item => isNull(item) || isUndefined(item)
|
||||
// )
|
||||
// ) {
|
||||
// window.$message.error('探测载荷信息不完整')
|
||||
// return
|
||||
// }
|
||||
// const payloadData = {
|
||||
// id: mbData.id,
|
||||
// extendInfo: {
|
||||
// detectingPayload: { ...detectionData },
|
||||
// },
|
||||
// }
|
||||
let payloadData={}
|
||||
if(payloadTabType.value == 'radar'){
|
||||
let detectingPayload=[]
|
||||
// payloadData.value = extendInfo.radarPayload ? extendInfo.radarPayload : []
|
||||
for(let i=0;i<detection.length;i++){
|
||||
const { id, ...detectionData } = detection[i]
|
||||
if (
|
||||
Object.values(detectionData).some(
|
||||
item => isNull(item) || isUndefined(item)
|
||||
)
|
||||
) {
|
||||
window.$message.error('存在扇形载荷信息不完整项')
|
||||
return
|
||||
}
|
||||
detectingPayload.push({...detectionData,id:`${mbData.id}_${payloadTabType.value}_${i}`})
|
||||
console.log(detectingPayload,'--00---detectingPayload---radar----')
|
||||
console.log(extendInfo.airplaneConicPayload,'---extendInfo.airplaneConicPayload')
|
||||
payloadData = {
|
||||
id: mbData.id,
|
||||
extendInfo: {
|
||||
radarPayload:detectingPayload,
|
||||
airplaneConicPayload:extendInfo.airplaneConicPayload
|
||||
},
|
||||
}
|
||||
}
|
||||
|
||||
}else if(payloadTabType.value == 'airplaneConic'){
|
||||
let detectingPayload=[]
|
||||
// payloadData.value = extendInfo.radarPayload ? extendInfo.radarPayload : []
|
||||
for(let i=0;i<detection.length;i++){
|
||||
const { id, ...detectionData } = detection[i]
|
||||
if (
|
||||
Object.values(detectionData).some(
|
||||
item => isNull(item) || isUndefined(item)
|
||||
)
|
||||
) {
|
||||
window.$message.error('存在扇形载荷信息不完整项')
|
||||
return
|
||||
}
|
||||
detectingPayload.push({...detectionData,id:`${mbData.id}_${payloadTabType.value}_${i}`})
|
||||
console.log(detectingPayload,'--00---detectingPayload----airplaneConic---')
|
||||
console.log(extendInfo.radarPayload,'---extendInfo.radarPayload')
|
||||
payloadData = {
|
||||
id: mbData.id,
|
||||
extendInfo: {
|
||||
radarPayload:extendInfo.radarPayload,
|
||||
airplaneConicPayload:detectingPayload
|
||||
},
|
||||
}
|
||||
}
|
||||
}
|
||||
console.log(payloadData,'--payloadData---')
|
||||
|
||||
|
||||
|
||||
console.log(payloadData,'---payloadData----')
|
||||
// return
|
||||
updateMbPayload(payloadData).then(res => {
|
||||
if (res.code === '200') {
|
||||
window.$message.success('保存成功')
|
||||
|
||||
@ -232,15 +232,18 @@ export default defineComponent({
|
||||
}
|
||||
|
||||
function changePayloadStatus(row) {
|
||||
console.log('changePayloadStatus--',mbPayloadShowMap,props.target)
|
||||
// console.log('changePayloadStatus--',mbPayloadShowMap,props.target)
|
||||
const { id, show } = row
|
||||
debugger
|
||||
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)
|
||||
// const map = mapDict[props.target]
|
||||
// console.log(map,'---map',id)
|
||||
|
||||
// console.log(map.get(id),'--------map.get(id)')
|
||||
// map.has(id) && (map.get(id).detectingPayload.show = show)
|
||||
}
|
||||
console.log(props.data,'----props')
|
||||
return () => (
|
||||
|
||||
Loading…
Reference in New Issue
Block a user