fixed:4-23部分bug修复，回退载荷名称

src/hooks/entity.ts

@@ -26,8 +26,6 @@ export const useEntity = () => {
     showEntity,
     getHisTraj,
     getMBEntityOpt,
-    getEllipsoidEntity,
-    getMBEntityOptOther,
     createMBConicSensor,
     iconOrModel,
     changeIconOrModel,
@@ -95,17 +93,7 @@ async function getMBEntityOpt({
   const mubiaoDict = window.settings.mbDict[targetType]
   const countryColor = window.settings.mbCountryDict[country]
 
-  // const headingPitchRoll = new Cesium.HeadingPitchRoll(
+  // console.log(country, countryColor)
-  //   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(
@@ -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,
+      scale: 100,
-      minimumPixelSize: 25,
+      minimumPixelSize: 5,
-    },
-    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),
     },
     ...(flag ? {
       orientation: staticOrientation.orientation,
       properties: staticOrientation.properties
     } : {}),
-    model: {
+    ...ellipsoid,
-      show: iconOrModel.value,
-      uri: mubiaoDict.model,
-      scale: 50,
-      minimumPixelSize: 25,
-    },
-    // properties: { // 添加自定义属性
-    //   zhName: '目标中文名称',
-    //   show: iconOrModel.value,
-    // },
-    // ...ellipsoid,
   }
 }
 

src/views/BaseMB/components/HisImages/components/LImage.jsx

@@ -1,5 +1,7 @@
 import { NImage } from 'naive-ui'
 import WZoom from 'vanilla-js-wheel-zoom/dist/wheel-zoom.min.js'
+import ModalCom from '@/components/Modal/index.vue'
+import { color } from 'echarts';
 
 export default defineComponent({
   props: {
@@ -7,36 +9,104 @@ export default defineComponent({
       type: Array,
       default: () => [],
     },
+    isJ:{
+      type: Boolean,
+      default: false,
+    }
   },
   setup(props) {
-    // const { images, activeIndex } = toRefs(props)
+    const show = ref(false);
-
+    const wzInstances = new Map();
+  
+    // 初始化缩放
     watch(
       () => props.imageList,
       () => {
-        console.log(props.imageList,'---imageList--')
+        console.log('-imageList--------')
         if (props.imageList.length > 1) {
           nextTick(() => {
-            props.imageList.map(image => {
+            props.imageList.forEach(image => {
-              const imageElement = document
+              // if (!wzInstances.has(image.id)) {
-                .getElementById(`image-${image.id}`)
+              //   const imageElement = document
-                .querySelector('img')
+              //     .getElementById(`image-${image.id}`)
-
+              //     .querySelector('img');
-              const wz = WZoom.create(`#image-${image.id}`, {
+              //   const wz = WZoom.create(`#image-${image.id}`, {
-                type: 'html',
+              //     type: 'html',
-                maxScale: 3,
+              //     maxScale: 3,
-                minScale: 1,
+              //     minScale: 1,
-                // zoomOnDoubleClick: true,
+              //     width: imageElement.naturalWidth,
-                width: imageElement.naturalWidth,
+              //     height: imageElement.naturalHeight,
-                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
+                 <div style={{color:'#ecf007',display:'inline-block'}}>
-                    class="w-full"
+                 <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
+                  <div >
-                  object-fit="contain"
+                  <img              
-                  src={image.imgPath}
+                    src={image.imgPath}
-                />
+                    draggable="false"
-                <h2>雨辰接口数据1233</h2>
+                    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>
-    )
+    );
-  },
+  }
 })

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

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

src/views/Mubiao/components/HisTrajectory/hooks/mbTraj.ts

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

src/views/Mubiao/hooks/mubiao.ts

@@ -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, mbEntity, data)
-        addEventSub(id, otherOptEntity, data)
+
-        mubiaoMap.set(id, otherOptEntity)
+        mubiaoMap.set(id, mbEntity)
       })
     }
   }
@@ -117,88 +112,25 @@ if(ellipsoidEntity){
   }: Record<string, string | number | number[]>) => {
     // 添加目标实体
     // console.log(window.settings, targetType, '-----')
-    // const mbEntityOpt = await getMBEntityOpt({
+    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({
       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),

src/views/Mubiao/hooks/mubiaoDetail.jsx

@@ -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('保存成功')

src/views/Payload/Detection.jsx

@@ -22,19 +22,19 @@ export default defineComponent({
 
     const detectingPayloadColumns = {
       radar: [
-        {
+        // {
-          title: '载荷名称',
+        //   title: '载荷名称',
-          key: 'zhName',
+        //   key: 'zhName',
-          // width: 140,
+        //   // width: 140,
-          render(row) {
+        //   render(row) {
-            return (
+        //     return (
-              <NInput
+        //       <NInput
-                v-model:value={row.zhName}
+        //         v-model:value={row.zhName}
-                // disabled={['光学', '雷达'].includes(row.type)}
+        //         // disabled={['光学', '雷达'].includes(row.type)}
-              ></NInput>
+        //       ></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}

src/views/TextReport/components/List/index.vue

@@ -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({
+  // openDetailsModal({
-    contentString: item.detailContent,
+  //   contentString: item.detailContent,
-    titleString: item.title,
+  //   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>
+    <n-modal
-  <div
+    v-model:show="show"
-    class="cursor-pointer leading-8 hover:text-blue-400"
+    preset="dialog"
-    v-for="(item, index) in list"
+    :title="curTitle"
-    :key="item.title"
+    class="bg-[#1c202cee] text-white"
-    @click="textClick(item)"
+    style="width: auto"
   >
-    <!-- 新增 flex 容器使文字和图标水平排列 -->
+    <h1>{{ curItem }}</h1>
-    <div class="flex items-center justify-between">
+    <div class="flex items-center my-container">
-      <div class="flex items-center">
+    <img 
-        <span class="inline-block w-6">{{ index + 1 }}.</span>
+      src="@/assets/image/icon/word.png" 
-        {{ item.title }}
+      class="ml-3 h-4 w-4" 
-      </div>
+      alt="info icon"      
-      <div class="flex items-center">
+    />
-      <img 
+    <img 
-        @click.stop="()=>{
+      src="@/assets/image/icon/excel.png" 
-          getIconChange(item,'word')
+      class="ml-3 h-4 w-4" 
-        }"
+      alt="info icon"      
-        src="@/assets/image/icon/word.png" 
+    />
-        class="ml-3 h-4 w-4" 
+    <img 
-        alt="info icon"      
+      src="@/assets/image/icon/photo.png" 
-      />
+      class="ml-3 h-4 w-4" 
-      <img 
+      alt="info icon"      
-      @click.stop="()=>{
+    />
-          getIconChange(item,'excel')
+    <img 
-        }"
+      src="@/assets/image/icon/zip.png" 
-        src="@/assets/image/icon/excel.png" 
+      class="ml-3 h-4 w-4" 
-        class="ml-3 h-4 w-4" 
+      alt="info icon"      
-        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-modal>
-</n-scrollbar>
+    <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>