feat:装备多载荷部分开发

src/hooks/entity.ts

@@ -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）
+      velocity: 800,    // 飞行速度（km/h）
-      heading: 90.0,                  // 当前航向（度）
+      heading: 90.0,    // 当前航向（度）
-      pitch: -90,                    // 当前俯仰（度）
+      pitch: -90,       // 当前俯仰（度） 
-      roll: 0.0,                      // 当前滚转（度）
+      roll: 0.0,        // 当前滚转（度）
-      altitude: 10000                 // 当前高度（米）
+      altitude: 10000   // 当前高度（米）
     }
   };
   
-  // console.log(country, countryColor)
+  // 检查是否为特殊ID
-  let ellipsoid;
+  let flag = false;
-  console.log(extendInfo,targetType,id,'----exteninfo')
+  const specialIds = ['xx19', 'xx42', 'xxx1', 'xx14', 'xx30', 'xx48', 'xx24', 'xx'];
-  let flag = false ;
+  if (specialIds.includes(id)) {
-  if(id == 'xx19' || id == 'xx42' || id == 'xx42'  ||  id == 'xxx1'  || id == 'xx14' || id == 'xx30' || id == 'xx48' || id == 'xx24' || id == 'xx'){
+    flag = true;
-    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(
+      pixelOffsetScaleByDistance: new Cesium.NearFarScalar(7000000, 1.0, 18000000, 0.4),
-        7000000,
-        1.0,
-        18000000,
-        0.4
-      ),
       scaleByDistance: new Cesium.NearFarScalar(7000000, 1.0, 18000000, 0.4),
     },
+    // 公告牌配置
     billboard: {
       show: !iconOrModel.value,
-      image: image.img,
+      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),
     },
+    // 模型配置
     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 mbEllipsoid = viewer.entities.add({
-  const svg = await fetch(url)
+    position: entity.position, // 使用主实体位置
-  const svgContent = await svg.text()
+    orientation: entity.orientation, // 使用主实体方向
+    ellipsoid: ellipsoid // 添加椭球体图形
+  });
 
-  // 步骤 2: 修改 SVG 的颜色
+  return mbEllipsoid;
-  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 }
 }
 
 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)) {
+    if(newMb.get(key)?.extendInfo){
-      // console.log(mubiaoMap.get(key).ellipsoid)
+      const airplaneConicPayload=newMb.get(key)?.extendInfo?.airplaneConicPayload;
-      mubiaoMap.get(key).ellipsoid && (mubiaoMap.get(key).ellipsoid.show = show)
+      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

src/views/BaseMB/components/HisImages/components/imageRoller.vue

@@ -1,44 +1,17 @@
 <template>
-  <div
+  <div class="image-roller-container">
-    class="picBox"
+      <div class="image-wrapper h-full w-full"  @mousemove="handleMouseMove" @mouseleave="handleMouseLeave">
-    @mouseenter="isHover = true"
+          <img :src="path + imgList[0]" alt="Image 1" class="image" />
-    @mouseleave="isHover = false"
+          <img :src="path + imgList[1]" alt="Image 2" class="image" :style="imageStyle" />
-  >
+      </div>
-    <div id="mousemoveBox">
+      <div class="my-data">
-      <div id="line">
+        雨辰接口数据
-        <!-- <img
-          v-show="isHover"
-          id="move"
-          src="../../assets/img/area.png"
-          alt=""
-        /> -->
       </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">
+<script>
-// @ts-nocheck
+export default {
-import {
-  defineComponent,
-  reactive,
-  toRefs,
-  onMounted,
-  onUnmounted,
-  ref,
-} from "vue";
-import { useRoute, useRouter } from "vue-router";
-
-export default defineComponent({
   props: {
     imgList: {
       type: Object || Array,
@@ -48,162 +21,57 @@ export default defineComponent({
       default: "",
     },
   },
-  setup(props, { emit }) {
+  data() {
-    const route = useRoute();
+      return {
-    const router = useRouter();
+          positionX: 50
-    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,
-    };
   },
-});
+  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>
+<style scoped>
-.picBox {
+.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 {
+  object-fit: cover;
-    position: absolute;
+}
-    width: 100px;
+.my-data{
-    height: 100%;
+  margin: 20px;
-    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;
-      
-    }
-  }
 }
 </style>

src/views/BaseMB/components/HisImages/index.vue

@@ -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">

src/views/Mubiao/hooks/mubiao.ts

@@ -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({
+    console.log(extendInfo,'=======extendInfo')
-        entity: mubiaoEntity,
+    console.log(mbPayloadShowMap.get(id),'-----mbPayloadShowMap.get(id)')
-        radius: extendInfo?.detectingPayload?.radius,
 
-        angle: extendInfo?.detectingPayload?.angle,
+    if (extendInfo?.airplaneConicPayload) {
-        heading: extendInfo?.detectingPayload?.heading,
+      console.log(extendInfo?.airplaneConicPayload)
-        pitch: extendInfo?.detectingPayload?.pitch,
+      for(let i=0;i<extendInfo?.airplaneConicPayload.length;i++){
-        show: mbPayloadShowMap.get(id).detectingPayload.show,
+        const innerId=extendInfo?.airplaneConicPayload[i].id
-      })
+        const detectingPayload=extendInfo?.airplaneConicPayload[i]
-      mubiaoConicMap.set(id, conic)
+        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
       })
     }
   })

src/views/Mubiao/hooks/mubiaoDetail.jsx

@@ -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 = [
+
-        {
+      // payloadData.value = extendInfo.radarPayload ? extendInfo.radarPayload : []
-          id,
+      payloadData.value.push({
-          radius: null,
+        radius: null,
-          minimumClock: null,
+        minimumClock: null,
-          maximumClock: 90,
+        maximumClock: 90,
-          minimumCone: null,
+        minimumCone: null,
-          maximumCone: null,
+        maximumCone: null,
-          show: false,
+        show: false,
-          zhName:''
+        zhName:''
-        },
+      })
-      ]
     } else if (payLoadType === 'airplaneConic') {
-      payloadData.value = [
+      // payloadData.value = extendInfo.airplaneConicPayload ? extendInfo.airplaneConicPayload : []
-        {
+      payloadData.value.push( {
-          id,
+        angle: 30,
-          angle: 30,
+        radius: 10,
-          radius: 10,
+        heading: 90,
-          heading: 90,
+        pitch: 180,
-          pitch: 180,
+        show: false,
-          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) {
+    if(extendInfo && payloadTabType.value == 'radar' && extendInfo.radarPayload){
-      payloadData.value = [
+      payloadData.value = extendInfo.radarPayload
-        {
+      console.log(extendInfo.radarPayload,'--00extendInfo.radarPayload')
-          id,
+    }else if(extendInfo && payloadTabType.value == 'airplaneConic'&&extendInfo.airplaneConicPayload){
-          ...extendInfo.detectingPayload,
+      payloadData.value = extendInfo.airplaneConicPayload
-          show: mbPayloadShowMap.get(id).detectingPayload.show,
-        },
-      ]
     }
+
+    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>
+          <div >
-          {payloadData.value.length === 0 ? (
+          {/* <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 }) {
-    
+    const { id, targetType, extendInfo } = mbData
-  
-      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('------------')
 
-    if (
+    
-      Object.values(detectionData).some(
+  console.log(mbData,'---mbDatambDatambData')
-        item => isNull(item) || isUndefined(item)
+      console.log('------------', detection)
-      )
+
-    ) {
+   
-      window.$message.error('探测载荷信息不完整')
+      const { getMubiaoData } = useMubiao()
-      return
+    
+    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,
+    // const { id, show, ...detectionData } = detection[0]
-      extendInfo: {
+    // console.log('------------')
-        detectingPayload: { ...detectionData },
+
-      },
+    // 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('保存成功')

src/views/Payload/Detection.jsx

@@ -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]
+      // const map = mapDict[props.target]
-      console.log(map,'---map',id)
+      // console.log(map,'---map',id)
-      map.has(id) && (map.get(id).detectingPayload.show = show)
+
+      // console.log(map.get(id),'--------map.get(id)')
+      // map.has(id) && (map.get(id).detectingPayload.show = show)
     }
     console.log(props.data,'----props')
     return () => (