载荷等

2025-02-19 16:06:46 +08:00 · 2025-02-19 16:06:46 +08:00 · 516a54ee59
commit 516a54ee59
parent f642f0d705
37 changed files with 934 additions and 286 deletions
--- a/public/baseConfig.js
+++ b/public/baseConfig.js
@ -29,16 +29,19 @@ window['settings'] = {
      icon: './images/icons/飞机.png',
      color: '#d00',
      model: './models/IDF.glb',
+      payload: 'conic',
    },
    乙: {
      icon: './images/icons/舰船.png',
      color: '#dd0',
      model: './models/驱逐舰2.glb',
+      payload: 'radar',
    },
    丙: {
      icon: './images/icons/舰船.png',
      color: '#dd0',
      model: './models/驱逐舰2.glb',
+      payload: 'radar',
    },
  },

@ -68,4 +71,15 @@ window['settings'] = {
      name: '卫星影像',
    },
  },
+
+  gantt: {
+    task: { label: '任务', color: 'error' },
+
+    dd: { label: '主体' },
+
+    mainEvent: { label: '主事件', color: 'success' },
+    eventType: { label: '事件分类', color: 'info' },
+
+    subEvent: { label: '子事件', color: 'warning' },
+  },
 }
--- a/public/models/IDF1.glb
+++ b/public/models/IDF1.glb
--- a/src/api/Gantt/index.js
+++ b/src/api/Gantt/index.js
@ -13,8 +13,7 @@ const sub = [
        end: '2024-11-17',
        type: 'subEvent',
        trajData: {},
-        avatar:
-          'https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/custom-render/wolf.jpg',
+        avatar: '/images/影像.jpg',
      },
    ],
  },
@ -29,8 +28,7 @@ const sub = [
        start: '2024-11-18',
        end: '2024-11-21',
        type: 'subEvent',
-        avatar:
-          'https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/custom-render/rabbit.jpg',
+        avatar: '/images/影像.jpg',
      },
    ],
  },
@ -44,8 +42,7 @@ const sub = [
        start: '2024-11-20',
        end: '2024-11-22',
        type: 'subEvent',
-        avatar:
-          'https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/custom-render/cat.jpg',
+        avatar: '/images/影像.jpg',
      },
      {
        id: 7,
@ -53,8 +50,7 @@ const sub = [
        start: '2024-11-18',
        end: '2024-11-19',
        type: 'subEvent',
-        avatar:
-          'https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/custom-render/flower.jpg',
+        avatar: '/images/影像.jpg',
      },
    ],
  },
@ -69,8 +65,7 @@ const sub = [
        start: '2024-11-20',
        end: '2024-11-21',
        type: 'subEvent',
-        avatar:
-          'https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/custom-render/bear.jpg',
+        avatar: '/images/影像.jpg',
      },
      {
        id: 9,
@ -78,8 +73,7 @@ const sub = [
        start: '2024-11-22',
        end: '2024-11-26',
        type: 'subEvent',
-        avatar:
-          'https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/custom-render/wolf.jpg',
+        avatar: '/images/影像.jpg',
      },
    ],
  },
@ -93,9 +87,7 @@ const sub = [
        start: '2024-11-22',
        end: '2024-11-25',
        type: 'subEvent',
-
-        avatar:
-          'https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/custom-render/rabbit.jpg',
+        avatar: '/images/影像.jpg',
      },
      {
        id: 14,
@ -103,8 +95,7 @@ const sub = [
        start: '2024-11-27',
        end: '2024-11-30',
        type: 'subEvent',
-        avatar:
-          'https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/custom-render/cat.jpg',
+        avatar: '/images/影像.jpg',
      },
    ],
  },
@ -114,8 +105,6 @@ const main = [
  {
    id: 0,
    name: 'DD-1',
-    start: '2024-11-15',
-    end: '2024-11-21',
    type: 'dd',
    children: [
      {
--- a/src/api/Mubiao/index.js
+++ b/src/api/Mubiao/index.js
@ -31,3 +31,11 @@ export function getMubiaoHisTraj(params) {
    params,
  })
 }
+
+export function updateMbPayload(data = {}) {
+  return request({
+    url: `${baseUrl}/traj/extendInfo`,
+    method: 'put',
+    data,
+  })
+}
--- a/src/api/Satellite/index.js
+++ b/src/api/Satellite/index.js
@ -23,4 +23,12 @@ export function getSatellite() {
  })
 }

+export function updateSatellitePayload(data = {}) {
+  return request({
+    url: `${baseUrl}/satellite/extendInfo`,
+    method: 'put',
+    data,
+  })
+}
+
 export { getTleDataFromExternal }
--- a/src/components/Tree/index.vue
+++ b/src/components/Tree/index.vue
@ -26,6 +26,10 @@ const props = defineProps({
    type: Function as TreeNodeProps,
    default: undefined,
  },
+  renderLabel: {
+    type: Function as RenderTreePart,
+    default: undefined,
+  },
  renderSuffix: {
    type: Function as RenderTreePart,
    default: undefined,
@ -81,6 +85,7 @@ const updateChecked = (keys: Array<string | number>) => {
        @update:checked-keys="updateChecked"
        :node-props="nodeProps"
        :render-suffix="renderSuffix"
+        :render-label="renderLabel"
      />
      <!-- :default-checked-keys="defaultCheckedKeys" -->
    </n-scrollbar>
--- a/src/hooks/entity.ts
+++ b/src/hooks/entity.ts
@ -1,16 +1,30 @@
+import { reactive } from 'vue'
 import { getMubiaoHisTraj } from '@/api/Mubiao'

 const baseMap = new Map()
 const mubiaoMap = new Map()
+const mubiaoConicMap = new Map()
 const satelliteMap = new Map()
+
+const mbPayloadShowMap = reactive(new Map())
+// const satDetectingPayloadMap = reactive(new Map())
+// const satCommunicationPayloadMap = reactive(new Map())
+const satellitePayloadShowMap = reactive(new Map())
+
 export const useEntity = () => {
  return {
    baseMap,
    mubiaoMap,
+    mubiaoConicMap,
    satelliteMap,
+    mbPayloadShowMap,
+    // satDetectingPayloadMap,
+    // satCommunicationPayloadMap,
+    satellitePayloadShowMap,
    showEntity,
    getHisTraj,
    getMBEntityOpt,
+    createMBConicSensor,
    iconOrModel,
    changeIconOrModel,
    showOrHideLoad,
@ -66,14 +80,48 @@ async function getHisTraj({
 function getMBEntityOpt({
  id,
  targetType,
-  name,
+  extendInfo,
 }: {
  id: string
  targetType: string
-  name?: string
+  extendInfo?: { detectingPayload: Record<string, number> }
 }) {
  const mubiaoDict = window.settings.mbDict[targetType]

+  let ellipsoid
+  if (extendInfo) {
+    const {
+      angle,
+      maximumCone,
+      minimumCone,
+      minimumClock,
+      maximumClock,
+      radius,
+    } = extendInfo.detectingPayload
+    if (radius) {
+      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,
+        },
+      }
+    }
+  }
  return {
    label: {
      text: `${id}`,
@ -105,28 +153,49 @@ function getMBEntityOpt({
      scale: 1000,
      minimumPixelSize: 50,
    },
-    ellipsoid: {
-      show: showOrHideLoad.value,
-      radii: new Cesium.Cartesian3(100000, 100000, 100000),
-      innerRadii: new Cesium.Cartesian3(1.0, 1.0, 1.0),
-      maximumCone: Cesium.Math.toRadians(90),
-      minimumCone: Cesium.Math.toRadians(40),
-      minimumClock: Cesium.Math.toRadians(20),
-      maximumClock: Cesium.Math.toRadians(90),
-      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,
-    },
+    ...ellipsoid,
  }
 }

+function createMBConicSensor({
+  entity,
+  angle,
+  show,
+}: {
+  entity: Cesium.Entity
+  angle: number
+  show: boolean
+}) {
+  console.log('entity', angle)
+  const conicSensor = new CesiumSensorVolumes.ConicSensorGraphics({
+    show,
+    radius: 2e7,
+    innerHalfAngle: 0,
+    outerHalfAngle: Cesium.Math.toRadians(angle / 2),
+    minimumClockAngle: 0,
+    maximumClockAngle: 2 * Math.PI,
+    showIntersection: true,
+    intersectionColor: new Cesium.Color(1, 1, 1, 1),
+    intersectionWidth: 3,
+    lateralSurfaceMaterial: new Cesium.Color(0.0, 1.0, 1.0, 0.3),
+  })
+  const mbConic = viewer.entities.add({
+    position: entity.position,
+    orientation:
+      entity.position &&
+      Cesium.Transforms.headingPitchRollQuaternion(
+        entity.position._value,
+        new Cesium.HeadingPitchRoll(
+          Cesium.Math.toRadians(90),
+          0,
+          Cesium.Math.toRadians(180)
+        ) // 初始朝向
+      ),
+    conicSensor: conicSensor,
+  })
+  return mbConic
+}
+
 const iconOrModel = ref(false)
 function changeIconOrModel() {
  iconOrModel.value = !iconOrModel.value
@ -136,15 +205,51 @@ function changeIconOrModel() {
  })
 }

-const showOrHideLoad = ref(true)
+const showOrHideLoad = ref(false)

+watch([mbPayloadShowMap, satellitePayloadShowMap], ([newMb, newSatellite]) => {
+  ;[...newMb.keys()].forEach(key => {
+    let show = false
+    if (newMb.get(key).detectingPayload) {
+      show = newMb.get(key).detectingPayload.show
+    }
+    if (mubiaoMap.has(key)) {
+      // if(console.log(mubiaoMap.get(key).ellipsoid)
+      mubiaoMap.get(key).ellipsoid && (mubiaoMap.get(key).ellipsoid.show = show)
+
+      mubiaoConicMap.get(key)?.conicSensor &&
+        (mubiaoConicMap.get(key).conicSensor.show = show)
+    }
+  })
+  ;[...newSatellite.keys()].forEach(key => {
+    let show = false
+    if (newSatellite.get(key).detectingPayload) {
+      show = newSatellite.get(key).detectingPayload.show
+      // console.log(newSatellite.get(key).detectingPayload.show)
+    }
+    if (satelliteMap.has(key)) {
+      satelliteMap.get(key).sensor = show
+    }
+  })
+})
 function changeShowOrHideLoad() {
  showOrHideLoad.value = !showOrHideLoad.value
-  ;[...mubiaoMap.values()].forEach(entity => {
-    entity.ellipsoid.show = !entity.ellipsoid.show._value
-  })
-  ;[...satelliteMap.values()].forEach(satellite => {
-    satellite.sensor = showOrHideLoad.value
-    console.log(satellite)
-  })
+  // ;[...mubiaoMap.values()].forEach(entity => {
+  //   entity.ellipsoid.show = !entity.ellipsoid.show._value
+  // })
+  for (const [key] of mbPayloadShowMap.entries()) {
+    mbPayloadShowMap.get(key).detectingPayload.show = showOrHideLoad.value
+  }
+
+  for (const [key] of satellitePayloadShowMap.entries()) {
+    satellitePayloadShowMap.get(key).detectingPayload &&
+      (satellitePayloadShowMap.get(key).detectingPayload.show =
+        showOrHideLoad.value)
+    satellitePayloadShowMap.get(key).communicationPayload &&
+      (satellitePayloadShowMap.get(key).communicationPayload.show =
+        showOrHideLoad.value)
+  }
+  // ;[...satelliteMap.values()].forEach(satellite => {
+  //   satellite.sensor = showOrHideLoad.value
+  // })
 }
--- a/src/js/satelliteEntity.js
+++ b/src/js/satelliteEntity.js
@ -22,6 +22,7 @@ class SatelliteEntity {
    this.entity = null
    this._underPoint = false
    this.underPointEntity = null
+    this._sensorAngle = 30
    this._sensorType = 'conic'
    this._listener = null
  }
@ -50,6 +51,16 @@ class SatelliteEntity {
    }
  }

+  get sensorAngle() {
+    return this._sensorAngle
+  }
+  set sensorAngle(angle) {
+    this._sensorAngle = angle
+    if (this._sensorEntity) {
+      this._sensorEntity.angle = angle
+    }
+  }
+
  get underPoint() {
    return this._underPoint
  }
@ -344,7 +355,7 @@ class SatelliteEntity {
      show: true,
      radius: 2e7,
      innerHalfAngle: 0,
-      outerHalfAngle: Cesium.Math.toRadians(20),
+      outerHalfAngle: Cesium.Math.toRadians(this._sensorAngle / 2),
      minimumClockAngle: 0,
      maximumClockAngle: 2 * Math.PI,
      showIntersection: true,
--- a/src/utils/tree.js
+++ b/src/utils/tree.js
@ -2,6 +2,8 @@ export const useTree = () => {
  return {
    filterTreeNodeByField,
    getAllKeys,
+    getLeafNodeIds,
+    getLeafNode,
  }
 }

@ -36,3 +38,37 @@ function getAllKeys(treeData, key) {
    return acc
  }, [])
 }
+
+function getLeafNodeIds(tree, idKey) {
+  let leafIds = []
+  function traverse(node) {
+    if (!node.children && node.data) {
+      leafIds.push(node[idKey])
+    } else {
+      for (let child of node.children) {
+        traverse(child)
+      }
+    }
+  }
+
+  traverse(tree)
+
+  return leafIds
+}
+
+function getLeafNode(tree) {
+  let leafNodes = []
+  function traverse(node) {
+    if (!node.children && node.data) {
+      leafNodes.push(node)
+    } else {
+      for (let child of node.children) {
+        traverse(child)
+      }
+    }
+  }
+
+  traverse(tree)
+
+  return leafNodes
+}
--- a/src/views/BaseMB/components/HisImages/index.vue
+++ b/src/views/BaseMB/components/HisImages/index.vue
@ -86,10 +86,14 @@ const isCompare = ref(false)
 const compareImages = () => {
  if (!isCompare.value) {
    if (checkedImage.value && checkedImage.value.length === 2) {
+      showPreview.value = true
+      previewIndex.value = 0
+      // showPreview.value = true
      isCompare.value = true
    }
  } else {
    isCompare.value = false
+    showPreview.value = false
    checkedImage.value = null
  }
 }
@ -130,9 +134,14 @@ const largeImageList = computed(() => {
              format="yyyy-MM-dd HH:mm:ss"
            />
            <n-button type="primary" @click="getImage">搜索</n-button>
-            <n-button type="primary" @click="compareImages">{{
-              isCompare ? '取消对比' : '对比'
-            }}</n-button>
+            <n-button
+              type="primary"
+              :disabled="
+                !isCompare && (!checkedImage || checkedImage.length < 2)
+              "
+              @click="compareImages"
+              >{{ isCompare ? '取消对比' : '对比' }}</n-button
+            >
          </div>
          <div v-if="imageList.length === 0" class="m-auto flex">
            <n-empty description="暂无数据"> </n-empty>
--- a/src/views/Content/index.vue
+++ b/src/views/Content/index.vue
@ -12,7 +12,7 @@ import Hangjing from '../Hangjing/index.vue'
 import Mubiao from '../Mubiao/index.vue'
 import MubiaoHisTrajectory from '../Mubiao/components/HisTrajectory/index.vue'
 import MultiHisTrajectory from '../Mubiao/components/MultiHisTrajectory/index.vue'
-import YsHangjing from '../YsHangjing/index.vue'
+// import YsHangjing from '../YsHangjing/index.vue'

 import Daodan from '../Daodan'

@ -60,7 +60,7 @@ const types = [
  { name: 'XW', value: 'wzbXw' },
 ]

-const showPanelName = ref('dd')
+const showPanelName = ref('wx')

 const panelList = [
  // {
@ -149,13 +149,13 @@ const showOrHideTextReport = () => {
            }}</label>
          </template>
        </div>
-        <transition name="slide">
+        <!-- <transition name="slide">
          <div class="left-panel-wrapper" v-show="showPanelName === 'hj-1'">
            <panel title="航景">
              <ys-hangjing />
            </panel>
          </div>
-        </transition>
+        </transition> -->
        <transition name="slide">
          <div class="left-panel-wrapper" v-show="showPanelName === 'hj-2'">
            <panel title="值班航景">
--- a/src/views/Daodan/ddHooks.jsx
+++ b/src/views/Daodan/ddHooks.jsx
@ -7,11 +7,9 @@ const treeData = ref([])
 const daodanData = ref({})

 export function useDaodan() {
-  onMounted(() => {
-    getDaodanTreeData()
-  })
  return {
    showDdConfigCom,
+    getDaodanTreeData,
    showOrHideDdConfig,
    isLoading,
    daodanData,
--- a/src/views/Daodan/index.jsx
+++ b/src/views/Daodan/index.jsx
@ -2,11 +2,15 @@ import Tree from '@/components/Tree/index.vue'
 import { useDaodan } from './ddHooks'
 import { NButton } from 'naive-ui'
 import { useTestConfig } from './components/hooks/testHooks'
+import { onMounted } from 'vue'

 export default defineComponent({
  setup() {
-    const { treeData, isLoading, showOrHideDdConfig } = useDaodan()
-
+    const { treeData, isLoading, showOrHideDdConfig, getDaodanTreeData } =
+      useDaodan()
+    onMounted(() => {
+      getDaodanTreeData()
+    })
    const renderSuffix = ({ option }) => {
      if (!option.data) {
        return undefined
--- a/src/views/Earth/index.vue
+++ b/src/views/Earth/index.vue
@ -33,7 +33,7 @@ onMounted(async () => {
  //     tilingScheme: new Cesium.WebMercatorTilingScheme(),
  //   })
  // )
-  viewer.scene.debugShowFramesPerSecond = true
+  // viewer.scene.debugShowFramesPerSecond = true
  viewer.camera.setView({
    destination: Cesium.Cartesian3.fromDegrees(117.48, 30.67, 18000000.0),
  })
@ -109,6 +109,23 @@ onMounted(async () => {
  //     }
  //   })
  // }, 2000)
+
+  let handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas)
+  // var tooltip = document.getElementById("toolTip");
+
+  handler.setInputAction(function (movement) {
+    // tooltip.style.display = "none";
+    // cartesian = viewer.scene.camera.pickEllipsoid(movement.position, viewer.scene.globe.ellipsoid);
+
+    const ray = viewer.camera.getPickRay(movement.position)
+    const promise = viewer.imageryLayers.pickImageryLayerFeatures(
+      ray,
+      viewer.scene
+    )
+    Promise.resolve(promise).then(function (features) {
+      console.log(features)
+    })
+  }, Cesium.ScreenSpaceEventType.LEFT_CLICK)
 })
 </script>

--- a/src/views/Gantt/components/EventList/components/MainEventEdit.jsx
+++ b/src/views/Gantt/components/EventList/components/MainEventEdit.jsx
@ -19,7 +19,7 @@ export default defineComponent({
    const { showMainEvent, mainEventData } = useEvent()

    const close = () => {
-      showNewEvent.value = false
+      showMainEvent.value = false
    }

    watch(
@ -52,7 +52,9 @@ export default defineComponent({
        </NForm>
        <div class="flex justify-end gap-2">
          <NButton onClick={close}>取消</NButton>
-          <NButton type="primary">确认</NButton>
+          <NButton type="primary" onClick={close}>
+            确认
+          </NButton>
        </div>
      </ModalCom>
    )
--- a/src/views/Gantt/components/EventList/components/SubEventEdit.jsx
+++ b/src/views/Gantt/components/EventList/components/SubEventEdit.jsx
@ -73,7 +73,9 @@ export default defineComponent({
        </NForm>
        <div class="flex justify-end gap-2">
          <NButton onClick={close}>取消</NButton>
-          <NButton type="primary">确认</NButton>
+          <NButton type="primary" onClick={close}>
+            确认
+          </NButton>
        </div>
      </ModalCom>
    )
--- a/src/views/Gantt/components/EventList/index.jsx
+++ b/src/views/Gantt/components/EventList/index.jsx
@ -25,12 +25,7 @@ export default defineComponent({
  },
  setup(props) {
    const { showMainEvent, mainEventData, showNewEvent, eventData } = useEvent()
-    const dict = {
-      mainEvent: { label: '主事件', color: 'success' },
-      eventType: { label: '事件分类', color: 'info' },
-
-      subEvent: { label: '子事件', color: 'warning' },
-    }
+    const dict = window.settings.gantt
    const columns = [
      {
        title: '事件名称',
--- a/src/views/Gantt/components/Gantt/hooks/gantt.ts
+++ b/src/views/Gantt/components/Gantt/hooks/gantt.ts
@ -36,7 +36,7 @@ const useGantt = ({ router, route }: GanttParams) => {
    const option = getOption()
    ganttInstance = new Gantt(dom, option)
    window['ganttInstance'] = ganttInstance
-    console.log(ganttInstance)
+    // console.log(ganttInstance)
  }
  function getOption(): TYPES.GanttConstructorOptions {
    const option = {
@ -224,6 +224,28 @@ const useGantt = ({ router, route }: GanttParams) => {
        // checkbox.addEventListener('click', event => {
        //   console.log(event, 'event')
        // })
+        // console.log(taskRecord, 'taskRecord')
+        const nameContainer = new Group({
+          fill: 'transparent',
+          display: 'flex',
+          // flexDirection: 'column',
+          // justifyContent: 'center',
+          alignItems: 'center',
+        })
+
+        container.add(nameContainer)
+        if ('trajData' in taskRecord && taskRecord.trajData) {
+          const taskRecordSymbol = new Image({
+            width: 20,
+            height: 20,
+            fill: '#ff0',
+            image:
+              '<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10s10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8s8 3.59 8 8s-3.59 8-8 8zm0-12.5c-2.49 0-4.5 2.01-4.5 4.5s2.01 4.5 4.5 4.5s4.5-2.01 4.5-4.5s-2.01-4.5-4.5-4.5zm0 5.5c-.55 0-1-.45-1-1s.45-1 1-1s1 .45 1 1s-.45 1-1 1z" fill="#ff0"></path></svg>',
+            boundsPadding: [-3, 10, 0, 0],
+            cursor: 'pointer',
+          })
+          nameContainer.add(taskRecordSymbol)
+        }
        const name = new Text({
          text: taskRecord.name,
          fontSize: 16,
@ -234,7 +256,7 @@ const useGantt = ({ router, route }: GanttParams) => {
          textAlign: 'center',
          // boundsPadding: [10, 0, 0, 0],
        })
-        container.add(name)
+        nameContainer.add(name)

        const days = new Text({
          text: `${startDate.toLocaleDateString()} ~ ${endDate.toLocaleDateString()}`,
--- a/src/views/Gantt/components/MainGantt/index.jsx
+++ b/src/views/Gantt/components/MainGantt/index.jsx
@ -15,7 +15,12 @@ export default defineComponent({
    return () => (
      <>
        <div class="flex gap-2">
-          <NDatePicker v-model:value={range.value} type="daterange" clearable />
+          <NDatePicker
+            v-model:value={range.value}
+            type="daterange"
+            clearable
+            disabled
+          />
          <NRadioGroup v-model:value={value.value} name="radiobuttongroup">
            <NRadioButton value="hour" label="日" />
            <NRadioButton value="day" label="月" />
--- a/src/views/Gantt/components/TaskList/components/NewTask/hooks.ts
+++ b/src/views/Gantt/components/TaskList/components/NewTask/hooks.ts
@ -1,7 +1,14 @@
 const showNewTask = ref(false)
+
+const curTaskData = ref({
+  name: '',
+  description: '',
+  checkedEvent: [],
+})
 const useTask = () => {
  return {
    showNewTask,
+    curTaskData,
  }
 }

--- a/src/views/Gantt/components/TaskList/components/NewTask/index.jsx
+++ b/src/views/Gantt/components/TaskList/components/NewTask/index.jsx
@ -10,14 +10,11 @@ export default defineComponent({
  //   },
  // },
  setup() {
-    const checkedRowKeys = ref([])
-    watch(checkedRowKeys, newval => {
-      console.log(newval, '-----')
-    })
-    const task = ref({
-      name: '',
-      description: '',
-    })
+    // const checkedRowKeys = ref([])
+    // watch(checkedRowKeys, newval => {
+    //   console.log(newval, '-----')
+    // })
+
    const columns = [
      { type: 'selection' },
      {
@ -43,10 +40,10 @@ export default defineComponent({
        title: '结束时间',
        key: 'end',
      },
-      {
-        title: '类型',
-        key: 'type',
-      },
+      // {
+      //   title: '类型',
+      //   key: 'type',
+      // },
      {
        title: '图片',
        key: 'avatar',
@ -59,34 +56,50 @@ export default defineComponent({
        },
      },
    ]
+
    const tableData = ref([])
    onMounted(async () => {
      const res = await getMainGantt()
      tableData.value = res
    })
-    const { showNewTask } = useTask()
+    const { showNewTask, curTaskData } = useTask()

    const close = () => {
      showNewTask.value = false
+      console.log(curTaskData, '---')
    }

+    // watch(
+    //   showNewTask,
+    //   show => {
+    //     if (show) {
+    //       taskData.value = {
+    //         name: '',
+    //         description: '',
+    //         checkedEvent: [],
+    //       }
+    //     }
+    //   },
+    //   { immediate: true }
+    // )
+
    return () => (
      <ModalCom v-model:show={showNewTask.value} title="新增任务">
        <NForm
          class="w-[900px]"
-          model={task}
+          model={curTaskData}
          label-placement="left"
          label-width="auto"
        >
          <NFormItem label="任务名称" path="name">
-            <NInput v-model:value={task.value.name} />
+            <NInput v-model:value={curTaskData.value.name} />
          </NFormItem>
          <NFormItem label="任务描述" path="description">
-            <NInput v-model:value={task.value.description} />
+            <NInput v-model:value={curTaskData.value.description} />
          </NFormItem>
          <NFormItem label="事件" path="event">
            <NDataTable
-              v-model:checked-row-keys={checkedRowKeys.value}
+              v-model:checked-row-keys={curTaskData.value.checkedEvent}
              class="h-[400px]"
              flex-height
              columns={columns}
--- a/src/views/Gantt/components/TaskList/index.jsx
+++ b/src/views/Gantt/components/TaskList/index.jsx
@ -8,19 +8,11 @@ import {
  AddCircleOutline,
  EnterOutline,
 } from '@vicons/ionicons5'
+import useTask from './components/NewTask/hooks'

 export default defineComponent({
  setup() {
-    const dict = {
-      task: { label: '任务', color: 'error' },
-
-      dd: { label: '主体' },
-
-      mainEvent: { label: '主事件', color: 'success' },
-      eventType: { label: '事件分类', color: 'info' },
-
-      subEvent: { label: '子事件', color: 'warning' },
-    }
+    const dict = window.settings.gantt
    const columns = [
      {
        title: '任务名称/事件名称',
@ -93,21 +85,23 @@ export default defineComponent({
                    type="primary"
                    size="small"
                    quaternary
-                    onClick={() => handleEdit(row)}
+                    onClick={() => editTask(row)}
                  >
                    <NIcon>
                      <EnterOutline />
                    </NIcon>
+                    进入任务
                  </NButton>
                  <NButton
                    type="primary"
                    size="small"
                    quaternary
-                    onClick={() => handleEdit(row)}
+                    onClick={() => editTask(row)}
                  >
                    <NIcon>
                      <CreateOutline />
                    </NIcon>
+                    编辑
                  </NButton>
                </>
              ) : null}
@ -126,7 +120,7 @@ export default defineComponent({
                <></>
              )} */}

-              <NButton
+              {/* <NButton
                type="error"
                size="small"
                quaternary
@ -135,7 +129,7 @@ export default defineComponent({
                <NIcon>
                  <TrashBinOutline />
                </NIcon>
-              </NButton>
+              </NButton> */}
            </div>
          )
        },
@ -154,6 +148,15 @@ export default defineComponent({
      expandedRowKeys.value = getAllKeys(tableData.value, 'name')
    }

+    const { showNewTask, curTaskData } = useTask()
+    function editTask(row) {
+      showNewTask.value = true
+      curTaskData.value = {
+        ...row,
+        checkedEvent: getAllKeys(row.children, 'name'),
+      }
+    }
+
    return () => (
      <NDataTable
        class="h-full"
--- a/src/views/Hangjing/hooks/hangjing.ts
+++ b/src/views/Hangjing/hooks/hangjing.ts
@ -16,9 +16,9 @@ const hangjingMap: Map<string, any> = new Map()

 const { addHangjingPolygon, removeHangjingPolygon } = useHjPolygon(hangjingMap)
 export const useHangjing = () => {
-  onMounted(() => {
-    initWebSocket()
-  })
+  // onMounted(() => {
+  //   initWebSocket()
+  // })
  const addHangjing = ids => {
    addHangjingPolygon(ids, hjTreeData)
  }
@ -28,6 +28,7 @@ export const useHangjing = () => {
  }

  return {
+    initWebSocket,
    addHangjing,
    removeHangjing,
    hjTreeData,
--- a/src/views/Hangjing/hooks/hangjingPolygon.ts
+++ b/src/views/Hangjing/hooks/hangjingPolygon.ts
@ -16,7 +16,7 @@ export const useHjPolygon = (polygonMap: Map<string | number, any>) => {
  let subscriber: Subscriber | null = null

  const colors = new Map()
-
+  const centerPointMap = new Map()
  function addHangjingPolygon(ids, data) {
    subscriber = new Subscriber(viewer, {
      pickResult: {
@ -38,10 +38,13 @@ export const useHjPolygon = (polygonMap: Map<string | number, any>) => {
      nodes.forEach(({ data: hjData, dataId: id }) => {
        // const item = data.find(item => item.id === id)
        if (hjData) {
+          // console.log(hjData, 'hjData')
+
          if (hjData.zoneList.length > 0) {
            hjData.zoneList.forEach(zone => {
              // console.log(zone, 'zone')
-              addPolygon({ ...zone, styleJsonData: hjData.styleJsonData }, id)
+              // addPolygon({ ...zone, styleJsonData: hjData.styleJsonData }, id)
+              addPolygon({ ...zone, styleJsonData: hjData.styleJsonData })
            })
          } else {
            addPolygon(hjData)
@ -60,6 +63,7 @@ export const useHjPolygon = (polygonMap: Map<string | number, any>) => {
  }

  function addPolygon(item, parentId: number | null = null) {
+    // console.log(parentId, '----')
    const { id, geom, title, styleJsonData } = item
    const feature = parseWKT(geom)
    const position = feature.coordinates[0].map(pos => {
@ -115,9 +119,10 @@ export const useHjPolygon = (polygonMap: Map<string | number, any>) => {
      polygonMap.get(parentId).push(centerEntity)
    } else {
      polygonMap.set(id, polygon)
+      centerPointMap.set(id, centerEntity)
    }

-    // console.log(polygonMap, 'polygonMap')
+    // console.log(parentId, polygonMap, 'polygonMap')
  }

  function addPolygonCenter(centerPoint: number[]) {
@ -235,6 +240,11 @@ export const useHjPolygon = (polygonMap: Map<string | number, any>) => {
      // viewer.entities.remove(hangjingMap.get(id))
      polygonMap.delete(id)
    }
+
+    if (centerPointMap.has(id)) {
+      viewer.entities.remove(centerPointMap.get(id))
+      centerPointMap.delete(id)
+    }
  }

  function addEventSub({
--- a/src/views/Hangjing/hooks/hangjingStyle.jsx
+++ b/src/views/Hangjing/hooks/hangjingStyle.jsx
@ -26,7 +26,7 @@ function initStyle(data) {
    styleForm.value = {
      fontFamily: '微软雅黑',
      fontSize: 14,
-      textColor: 'rgba(255,255,0,1)',
+      textColor: 'rgba(255,255,255,1)',
      polygonColor: 'rgba(255,255,255,0.5)',
      lineColor: 'rgba(255,255,255,1)',
      lineWidth: 1,
--- a/src/views/Hangjing/index.vue
+++ b/src/views/Hangjing/index.vue
@ -96,37 +96,51 @@ const drawArea = () => {

 const { showDetailsModal } = useHangjingDetail()

-const renderSuffix = ({ option }: { option: TreeOption }) => {
-  return option.data
-    ? h('div', { class: 'flex items-center gap-2 pr-2' }, [
-        h(
-          NButton,
-          {
-            text: true,
-            size: 'tiny',
-            type: 'info',
-            onClick: () =>
-              showDetailsModal(`${option.data.title}详情`, option.data),
-          },
-          { default: () => '详情' }
-        ),
-        // h(
-        //   NButton,
-        //   {
-        //     text: true,
-        //     size: 'tiny',
-        //     type: 'info',
-        //     onClick: () => showStyleModal(`${option.data.title}样式配置`, option.data),
-        //   },
-        //   { default: () => '样式配置' }
-        // ),
-      ])
-    : null
+const renderLabel = ({ option }) => {
+  // if()
+  if (option.data) {
+    const textColor = option.data.styleJsonData
+      ? JSON.parse(option.data.styleJsonData).textColor
+      : 'rgba(255,255,255,1)'
+
+    return h('span', { style: `color:${textColor}` }, option.data.title)
+  } else {
+    return option.nodeName
+  }
+}
+const renderSuffix = ({ option }) => {
+  return (
+    option.data &&
+    h('div', { class: 'flex items-center gap-2 pr-2' }, [
+      h(
+        NButton,
+        {
+          text: true,
+          size: 'tiny',
+          type: 'info',
+          onClick: () =>
+            showDetailsModal(`${option.data.title}详情`, option.data),
+        },
+        { default: () => '详情' }
+      ),
+      // h(
+      //   NButton,
+      //   {
+      //     text: true,
+      //     size: 'tiny',
+      //     type: 'info',
+      //     onClick: () => showStyleModal(`${option.data.title}样式配置`, option.data),
+      //   },
+      //   { default: () => '样式配置' }
+      // ),
+    ])
+  )
 }

 // const checkedKeys = ref<Array<string | number>>([])

 const {
+  initWebSocket,
  addHangjing,
  hjTreeData,
  isLoading,
@ -144,6 +158,7 @@ watch(checkedKeys, val => {
 })

 onMounted(() => {
+  initWebSocket()
  getHangjingData()
 })
 </script>
@ -196,6 +211,7 @@ onMounted(() => {
      v-model:checked="checkedKeys"
      showSearch
      :renderSuffix="renderSuffix"
+      :renderLabel="renderLabel"
    />
  </div>
 </template>
--- a/src/views/Mubiao/hooks/mubiao.ts
+++ b/src/views/Mubiao/hooks/mubiao.ts
@ -1,9 +1,9 @@
-import { ref } from 'vue'
+import { ref, nextTick } from 'vue'
 import { Subscriber } from 'cesium-extends'
 import { parseWKT } from '@/utils/parseWKT'
 import { cesiumTime2Format } from '@/utils/date'
 import { difference } from 'lodash'
-import { getMubiaoPos, sendCheckedTargetIds } from '@/api/Mubiao'
+import { getMubiao, getMubiaoPos, sendCheckedTargetIds } from '@/api/Mubiao'
 import { useTree } from '@/utils/tree'
 import { useMubiaoPopup } from './mubiaoPopup'
 import { useEntity } from '@/hooks/entity'
@ -23,15 +23,23 @@ interface IMubiao {
  children?: IMubiao[]
 }

+const checkedKeys = ref<Array<string | number>>([])
+
 const data = ref<Record<string, any>[]>([])

-const { mubiaoMap, getMBEntityOpt } = useEntity()
+const {
+  mubiaoMap,
+  getMBEntityOpt,
+  createMBConicSensor,
+  mubiaoConicMap,
+  mbPayloadShowMap,
+} = useEntity()
 // const { mubiaoMap } = storeToRefs(entity)
 // const mubiaoMap = ref<Map<string, any>>(new Map())

 let subscriber: Subscriber | null = null

-const { filterTreeNodeByField } = useTree()
+const { filterTreeNodeByField, getLeafNode } = useTree()

 const { popupMap, createPopup } = useMubiaoPopup()
 export const useMubiao = () => {
@ -72,6 +80,7 @@ export const useMubiao = () => {
          position: pos,
          target_time,
          targetType: data.targetType,
+          extendInfo: data.extendInfo,
        })

        // console.log(mbEntity, 'mbEntity')
@ -98,19 +107,29 @@ export const useMubiao = () => {
    position,
    target_time,
    targetType,
+    extendInfo,
  }: Record<string, string | number | number[]>) => {
    // 添加目标实体
    // console.log(window.settings, targetType, '-----')
-    const mbEntityOpt = getMBEntityOpt({
-      id,
-      targetType,
-    })
+    const mbEntityOpt = getMBEntityOpt({ id, targetType, extendInfo })

    const mubiaoEntity = viewer.entities.add({
      name: id,
-      position: Cesium.Cartesian3.fromDegrees(...(position as number[])),
+      position: Cesium.Cartesian3.fromDegrees(
+        ...(position as number[]),
+        targetType === '甲' ? 20000 : 0
+      ),
      ...mbEntityOpt,
    })
+
+    if (extendInfo?.detectingPayload?.angle) {
+      const conic = createMBConicSensor({
+        entity: mubiaoEntity,
+        angle: extendInfo?.detectingPayload?.angle,
+        show: mbPayloadShowMap.get(id).detectingPayload.show,
+      })
+      mubiaoConicMap.set(id, conic)
+    }
    return mubiaoEntity
  }

@ -144,6 +163,10 @@ export const useMubiao = () => {
      popupMap.get(id).windowClose()
      popupMap.delete(id)
    }
+    if (mubiaoConicMap.has(id)) {
+      viewer.entities.remove(mubiaoConicMap.get(id))
+      mubiaoConicMap.delete(id)
+    }
  }

  const updateMubiaoPos = async (
@ -197,6 +220,8 @@ export const useMubiao = () => {

  return {
    data,
+    checkedKeys,
+    getMubiaoData,
    addMubiao,
    updateMubiaoPos,
  }
@ -212,3 +237,34 @@ async function getMubiaoCurPos(ids: Array<string | number>) {
    return []
  }
 }
+
+async function getMubiaoData() {
+  const checked = JSON.parse(JSON.stringify(checkedKeys.value))
+  // console.log(checked)
+  const { code, data: resData } = await getMubiao()
+  if (code === '200') {
+    data.value = [resData]
+    checkedKeys.value = []
+    getAllNodesToPayload()
+    nextTick(() => {
+      checkedKeys.value = checked
+    })
+  }
+}
+
+function getAllNodesToPayload() {
+  const mbList = getLeafNode(data.value[0])
+  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 },
+      })
+    }
+  })
+  console.log('mbPayloadShowMap', mbPayloadShowMap)
+}
--- a/src/views/Mubiao/hooks/mubiaoDetail.jsx
+++ b/src/views/Mubiao/hooks/mubiaoDetail.jsx
@ -1,51 +1,132 @@
 // import { h } from 'vue'
-import { NDataTable, NInputNumber, NSwitch } from 'naive-ui'
+import { NButton, NInputNumber, NSwitch } from 'naive-ui'
 import { useModal } from '@/views/Content/hooks/modal'
 import Detection from '@/views/Payload/Detection.jsx'
 import Communication from '@/views/Payload/Communication.jsx'
+import { updateMbPayload } from '@/api/Mubiao'
+import { useEntity } from '@/hooks/entity'
+import { useMubiao } from './mubiao'

 const { openDetailsModal } = useModal()
 export const useMubiaoDetail = () => {
+  const payloadData = ref([])
+
+  function addCommunicationPayload(mbData) {
+    const { id, targetType, extendInfo } = mbData
+
+    const payLoadType = window.settings.mbDict[targetType].payload
+    if (payLoadType === 'radar') {
+      payloadData.value = [
+        {
+          id,
+          radius: null,
+          minimumClock: null,
+          maximumClock: 90,
+          minimumCone: null,
+          maximumCone: null,
+          show: false,
+        },
+      ]
+    } else if (payLoadType === 'conic') {
+      payloadData.value = [
+        {
+          id,
+          angle: null,
+          show: false,
+        },
+      ]
+    }
+  }
+  const { mbPayloadShowMap } = useEntity()
+
+  function renderMubiaoDetailsContent(mbData) {
+    payloadData.value = []
+    const { id, targetType, extendInfo } = mbData
+    const payLoadType = window.settings.mbDict[targetType].payload
+
+    if (extendInfo) {
+      payloadData.value = [
+        {
+          id,
+          ...extendInfo.detectingPayload,
+          show: mbPayloadShowMap.get(id).detectingPayload.show,
+        },
+      ]
+    }
+    // return h(
+    //   'div',
+    //   {},
+    //   Object.keys(mbData).map(key => h('div', {}, `${key}：${mbData[key]}`))
+    // )
+    return () => (
+      <div class="detail-container w-[45vw]">
+        <div class="detail-item-title">基本信息</div>
+        <div>
+          {Object.keys(mbData).map(key => (
+            <div>
+              {key}：{mbData[key]}
+            </div>
+          ))}
+        </div>
+        {/* <div class="detail-item-title">探测载荷</div>
+         */}
+        <div class="flex justify-between">
+          <div class="detail-item-title">探测载荷</div>
+          {payloadData.value.length === 0 && (
+            <NButton
+              quaternary
+              type="primary"
+              onClick={() => addCommunicationPayload(mbData)}
+            >
+              添加
+            </NButton>
+          )}
+        </div>
+        {payloadData.value.length > 0 && (
+          <Detection target="mb" type={payLoadType} data={payloadData.value} />
+        )}
+
+        <div class="flex justify-end gap-2">
+          <NButton
+            type="primary"
+            onClick={() =>
+              updateMbLoad({
+                mbData,
+                detection: payloadData.value,
+              })
+            }
+          >
+            确定
+          </NButton>
+          {/* <NButton onClick={closeDetailsModal}>取消</NButton> */}
+        </div>
+      </div>
+    )
+  }
+  function showDetailsMubiao(mbData) {
+    openDetailsModal({
+      titleString: 'zb详情',
+      contentSlot: renderMubiaoDetailsContent(mbData),
+    })
+  }
+
+  function updateMbLoad({ mbData, detection }) {
+    const { getMubiaoData } = useMubiao()
+    const { id, show, ...detectionData } = detection[0]
+    const payloadData = {
+      id: mbData.id,
+      extendInfo: {
+        detectingPayload: { ...detectionData },
+      },
+    }
+    // console.log(payloadData)
+    updateMbPayload(payloadData).then(res => {
+      if (res.code === '200') {
+        window.$message.success('保存成功')
+        getMubiaoData()
+      }
+    })
+  }
+
  return { showDetailsMubiao }
 }
-
-const data = ref([
-  {
-    id: 3,
-    radius: 5000,
-    minimumClock: 20.0,
-    maximumClock: 110.0,
-    minimumCone: 20.0,
-    maximumCone: 90.0,
-    height: 100,
-    status: true,
-  },
-])
-
-function renderMubiaoDetailsContent(mbData) {
-  // return h(
-  //   'div',
-  //   {},
-  //   Object.keys(mbData).map(key => h('div', {}, `${key}：${mbData[key]}`))
-  // )
-  return () => (
-    <div class="detail-container">
-      <div class="detail-item-title">基本信息</div>
-      <div>
-        {Object.keys(mbData).map(key => (
-          <div>
-            {key}：{mbData[key]}
-          </div>
-        ))}
-      </div>
-      <div class="detail-item-title">探测载荷</div>
-      <Detection type="radar" data={data.value} />
-    </div>
-  )
-}
-function showDetailsMubiao(mbData) {
-  openDetailsModal({
-    titleString: 'zb详情',
-    contentSlot: renderMubiaoDetailsContent(mbData),
-  })
-}
--- a/src/views/Mubiao/index.vue
+++ b/src/views/Mubiao/index.vue
@ -2,7 +2,6 @@
 import { h } from 'vue'
 import { NButton } from 'naive-ui'
 import type { TreeOption } from 'naive-ui'
-import { getMubiao, getMubiaoPos } from '@/api/Mubiao'
 // import type { DataTableColumns, DataTableRowKey } from 'naive-ui'
 import Tree from '@/components/Tree/index.vue'
 import HeatMap from './components/HeatMap/index.vue'
@ -13,26 +12,19 @@ import { useMubiaoDetail } from './hooks/mubiaoDetail'
 import { useMBTrajectory } from './components/HisTrajectory/hooks/mbTraj'
 import { useDaodan } from '../Daodan/ddHooks'

-const { addMubiao, data } = useMubiao()
+const { getMubiaoData, data, addMubiao, checkedKeys } = useMubiao()
 const useMbPosWS = useMuBiaoPositionWS()

 const useMbDisappearWS = useMuBiaoDisappearWS()

-const getMubiaoData = async () => {
-  const { code, data: resData } = await getMubiao()
-  if (code === '200') {
-    data.value = [resData]
-  }
-}
-
 onMounted(() => {
  getMubiaoData()
-  // useMuBiaoPositionWS()
 })

-const checkedKeys = ref<Array<string | number>>([])
+// const checkedKeys = ref<Array<string | number>>([])

 watch(checkedKeys, val => {
+  console.log('watch', val)
  addMubiao(val)
 })

--- a/src/views/Payload/Communication.jsx
+++ b/src/views/Payload/Communication.jsx
@ -1,19 +1,50 @@
-import { NDataTable, NButton, NSelect, NInputNumber, NSwitch } from 'naive-ui'
+import { defineExpose } from 'vue'
+import {
+  NDataTable,
+  NButton,
+  NSelect,
+  NInputNumber,
+  NSwitch,
+  NTreeSelect,
+} from 'naive-ui'
+import { getMubiao } from '@/api/Mubiao'

 export default defineComponent({
-  name: 'DetectionPayload',
-  props: {},
-  setup(props) {
+  name: 'CommunicationPayload',
+  props: {
+    data: {
+      type: Array,
+      default: () => [],
+    },
+  },
+  setup(props, { expose }) {
+    const targetList = ref([])
+    onMounted(async () => {
+      const { code, data: resData } = await getMubiao()
+      if (code === '200') {
+        targetList.value = [resData]
+      }
+    })
    const communicationPayloadColumns = [
      {
        title: '通信对象',
        key: 'target',
        render(row) {
          return (
-            <NSelect
+            // <NSelect
+            //   v-model:value={row.target}
+            //   options={[{ label: '3', value: '3' }]}
+            // ></NSelect>
+            <NTreeSelect
+              class="w-full"
+              multiple
+              checkable
+              check-strategy="child"
              v-model:value={row.target}
-              options={[{ label: '3', value: '3' }]}
-            ></NSelect>
+              options={targetList.value}
+              key-field="dataId"
+              label-field="nodeName"
+            ></NTreeSelect>
          )
        },
      },
@ -26,18 +57,12 @@ export default defineComponent({
        },
      },
    ]
-    const communicationPayload = ref([
-      {
-        id: 3,
-        target: '3',
-        status: true,
-      },
-    ])
+
    return () => (
      <NDataTable
        key={row => row.id}
        columns={communicationPayloadColumns}
-        data={communicationPayload.value}
+        data={props.data}
      />
    )
  },
--- a/src/views/Payload/Detection.jsx
+++ b/src/views/Payload/Detection.jsx
@ -1,8 +1,13 @@
 import { NDataTable, NButton, NSelect, NInputNumber, NSwitch } from 'naive-ui'
+import { useEntity } from '@/hooks/entity'

 export default defineComponent({
  name: 'DetectionPayload',
  props: {
+    target: {
+      type: String,
+      require: true,
+    },
    type: {
      type: String,
      default: 'radar',
@ -13,12 +18,14 @@ export default defineComponent({
    },
  },
  setup(props) {
+    const { mbPayloadShowMap, satellitePayloadShowMap } = useEntity()
+
    const detectingPayloadColumns = {
      radar: [
        {
          title: '垂直起始角',
          key: 'minimumClock',
-          width: 180,
+          // width: 140,
          render(row) {
            return (
              <NInputNumber
@ -44,7 +51,7 @@ export default defineComponent({
        {
          title: '水平起始角',
          key: 'minimumCone',
-          width: 180,
+          // width: 140,
          render(row) {
            return (
              <NInputNumber
@ -57,7 +64,7 @@ export default defineComponent({
        {
          title: '水平终止角',
          key: 'maximumCone',
-          width: 180,
+          // width: 140,
          render(row) {
            return (
              <NInputNumber
@ -82,14 +89,19 @@ export default defineComponent({
        },
        {
          title: '是否开启',
-          key: 'status',
+          key: 'show',
          width: 120,
          render(row) {
-            return <NSwitch v-model:value={row.status}></NSwitch>
+            return (
+              <NSwitch
+                v-model:value={row.show}
+                onUpdate:value={() => changePayloadStatus(row)}
+              ></NSwitch>
+            )
          },
        },
      ],
-      corner: [
+      conic: [
        // {
        //   title: '载荷类型',
        //   key: 'type',
@ -152,15 +164,30 @@ export default defineComponent({
        // },
        {
          title: '是否开启',
-          key: 'status',
+          key: 'show',
          width: 120,
          render(row) {
-            return <NSwitch v-model:value={row.status}></NSwitch>
+            return (
+              <NSwitch
+                v-model:value={row.show}
+                onUpdate:value={() => changePayloadStatus(row)}
+              ></NSwitch>
+            )
          },
        },
      ],
    }

+    function changePayloadStatus(row) {
+      const { id, show } = row
+      const mapDict = {
+        mb: mbPayloadShowMap,
+        satellite: satellitePayloadShowMap,
+      }
+      const map = mapDict[props.target]
+      map.has(id) && (map.get(id).detectingPayload.show = show)
+    }
+
    return () => (
      <NDataTable
        key={row => row.id}
--- a/src/views/PlaceName/hooks/mapboxHooks.jsx
+++ b/src/views/PlaceName/hooks/mapboxHooks.jsx
@ -1,10 +1,13 @@
+import { ref } from 'vue'
 import maplibregl from 'maplibre-gl'
 import 'maplibre-gl/dist/maplibre-gl.css'
 import { style } from '../style'

+const zoom = ref(0)
 export function useMapbox() {
  return {
    initMapbox,
+    zoom,
  }
 }

@ -16,7 +19,7 @@ function initMapbox() {
    style, // style URL

    center: [121, 19], // starting position [lng, lat]
-    zoom: 5,
+    zoom: zoom.value,
  })

  map.on('load', function () {
@ -40,6 +43,10 @@ function initMapbox() {
    // })
  })

+  map.on('zoom', () => {
+    zoom.value = map.getZoom()
+  })
+
  map.on('click', e => {
    const features = map.queryRenderedFeatures(e.point)
    console.log(features)
--- a/src/views/PlaceName/index.jsx
+++ b/src/views/PlaceName/index.jsx
@ -21,7 +21,7 @@ export default defineComponent({
    const { model, showPlace, addPlaceName, initViewer, clickPoint } =
      usePlaceName()

-    const { initMapbox } = useMapbox()
+    const { initMapbox, zoom } = useMapbox()
    const { initOpenLayer } = useOpenLayer()
    onMounted(async () => {
      initMapbox()
@ -32,6 +32,7 @@ export default defineComponent({
    return () => (
      <div class="h-full w-full">
        <div id="place-earth" class="h-full w-full"></div>
+        <div class="absolute right-2 top-2 text-black">zoom:{zoom.value}</div>
        <div class="absolute left-0 top-0 p-2">
          <NButton class="z-10" type="primary" onClick={() => addPlaceName()}>
            添加地名
--- a/src/views/PlaceName/style.js
+++ b/src/views/PlaceName/style.js
@ -101,7 +101,7 @@ export const style = {
    openmaptiles: {
      type: 'vector',
      scheme: 'tms',
-      tiles: ['http://192.168.10.187:8080/tmp/pbfMulti/{z}/{x}/{y}.pbf'],
+      tiles: ['http://192.168.10.143:2024/api/tmp/pbfMulti/{z}/{x}/{y}.pbf'],
    },
  },
  // tiles: [
@ -464,14 +464,14 @@ export const style = {
      metadata: {},
      source: 'openmaptiles',
      'source-layer': 'admin',
-      minzoom: 5,
+      // minzoom: 1,
      filter: ['all', ['==', 'admin_level', 2]],
      layout: {
        visibility: 'visible',
      },
      paint: {
        'line-color': '#aaaaaa',
-        'line-width': ['interpolate', ['linear'], ['zoom'], 4, 0.5, 7, 2],
+        'line-width': ['interpolate', ['linear'], ['zoom'], 4, 1, 7, 2],
      },
    },
    {
@ -480,7 +480,7 @@ export const style = {
      metadata: {},
      source: 'openmaptiles',
      'source-layer': 'admin',
-      minzoom: 6,
+      minzoom: 3,
      filter: ['all', ['==', 'admin_level', 4]],
      layout: {
        visibility: 'visible',
@ -497,7 +497,7 @@ export const style = {
      metadata: {},
      source: 'openmaptiles',
      'source-layer': 'admin',
-      minzoom: 9,
+      minzoom: 6,
      filter: ['all', ['==', 'admin_level', 5]],
      layout: {
        visibility: 'visible',
@ -551,13 +551,55 @@ export const style = {
      },
      interactive: true,
    },
-
    {
      id: 'province_point',
      type: 'symbol',
      metadata: {},
      source: 'openmaptiles',
      'source-layer': 'place',
+      minzoom: 4,
+      filter: ['all', ['==', 'type', 'state']],
+      layout: {
+        'text-field': '{name}',
+        'text-font': ['Open Sans Regular'],
+        'text-padding': 5,
+        'text-rotation-alignment': 'map',
+        // 'symbol-placement': 'line-center',
+        // 'text-pitch-alignment': 'viewport',
+        // 'text-size': 18,
+        // 'text-max-width': 6.25,
+        'text-size': [
+          'interpolate',
+          ['linear', 1],
+          ['zoom'],
+          4.99,
+          13,
+          5,
+          14,
+          7,
+          15,
+        ],
+      },
+      paint: {
+        'text-halo-color': 'rgb(200, 200, 200)',
+        'text-halo-width': 1,
+        'text-color': {
+          stops: [
+            [2, 'hsl(302, 16%, 36%)'],
+            [10, 'hsl(273, 33%, 22%)'],
+          ],
+        },
+        'text-halo-blur': 0.5,
+      },
+      interactive: true,
+    },
+
+    {
+      id: 'county_point',
+      type: 'symbol',
+      metadata: {},
+      source: 'openmaptiles',
+      'source-layer': 'place',
      minzoom: 7,
      filter: ['all', ['==', 'type', 'county']],
      layout: {
--- a/src/views/Satellite/components/SatDetail.jsx
+++ b/src/views/Satellite/components/SatDetail.jsx
@ -1,24 +1,53 @@
+import { toRaw } from 'vue'
 import { useModal } from '@/views/Content/hooks/modal'
-import { NDataTable, NButton, NSelect, NInputNumber, NSwitch } from 'naive-ui'
+import { NButton } from 'naive-ui'
 import Detection from '@/views/Payload/Detection.jsx'
 import Communication from '@/views/Payload/Communication.jsx'
+import { useEntity } from '@/hooks/entity'
+import { updateSatellitePayload } from '@/api/Satellite'
+import { useSatellite } from '../hooks/satellite'
 const { openDetailsModal } = useModal()

 export function showDetailsSatellite(option) {
-  const detectingPayload = ref([
-    {
-      id: 3,
-      angle: 30,
-      // xHalfAngle: 20,
-      // yHalfAngle: 25,
-      // type: '电子',
-      status: true,
-    },
-  ])
+  const { extendInfo, id } = option
+
+  const detectingPayload = ref([])
+  function addDetectingPayload() {
+    detectingPayload.value.push({
+      id,
+      angle: null,
+      show: false,
+    })
+  }
+  const communicationPayload = ref([])
+  function addCommunicationPayload() {
+    communicationPayload.value.push({
+      id,
+      target: [],
+      show: false,
+    })
+  }
+
+  const { satellitePayloadShowMap } = useEntity()
+  if (extendInfo?.detectingPayload) {
+    detectingPayload.value.push({
+      id,
+      angle: extendInfo.detectingPayload.angle,
+      show: satellitePayloadShowMap.get(id).detectingPayload.show,
+    })
+  }
+  if (extendInfo?.communicationPayload) {
+    communicationPayload.value.push({
+      id,
+      target: extendInfo.communicationPayload,
+      show: satellitePayloadShowMap.get(id).communicationPayload.show,
+    })
+  }
+
  openDetailsModal({
    titleString: '' + option.name + ' 详情',
    contentSlot: () => (
-      <div class="detail-container">
+      <div class="detail-container w-[45vw]">
        <div class="detail-item-title">基本信息</div>
        <div>
          <div>卫星编号：{option.name}</div>
@ -31,19 +60,79 @@ export function showDetailsSatellite(option) {
            </div>
          </div>
        </div>
-        <div class="detail-item-title">探测载荷</div>
-        <Detection type="corner" data={detectingPayload.value} />
+        {/* <div class="detail-item-title">探测载荷</div> */}
+        <div class="flex justify-between">
+          <div class="detail-item-title">探测载荷</div>
+          {detectingPayload.value.length === 0 && (
+            <NButton quaternary type="primary" onClick={addDetectingPayload}>
+              添加
+            </NButton>
+          )}
+        </div>
+        {detectingPayload.value.length > 0 && (
+          <Detection
+            target="satellite"
+            type="conic"
+            data={detectingPayload.value}
+          />
+        )}
        <div class="flex justify-between">
          <div class="detail-item-title">通信载荷</div>
-          <NButton quaternary type="primary">
-            添加
-          </NButton>
+          {communicationPayload.value.length === 0 && (
+            <NButton
+              quaternary
+              type="primary"
+              onClick={addCommunicationPayload}
+            >
+              添加
+            </NButton>
+          )}
+        </div>
+        {communicationPayload.value.length > 0 && (
+          <Communication data={communicationPayload.value} />
+        )}
+        <div class="flex justify-end gap-2">
+          <NButton
+            type="primary"
+            onClick={() =>
+              updateSatelliteLoad({
+                sat: option,
+                detection: detectingPayload.value,
+                communication: communicationPayload.value,
+              })
+            }
+          >
+            确定
+          </NButton>
+          {/* <NButton onClick={closeDetailsModal}>取消</NButton> */}
        </div>
-        <Communication />
      </div>
    ),
  })
 }
+function updateSatelliteLoad({ sat: sateData, detection, communication }) {
+  // console.log(sateData, payload, communicationRef.value.communicationPayload)
+  if (!detection[0] && !communication[0]) {
+    return
+  }
+  const { getSatelliteList } = useSatellite()
+  const payloadData = {
+    id: sateData.id,
+    extendInfo: {
+      detectingPayload: detection[0] ? { angle: detection[0].angle } : null,
+      communicationPayload: communication[0]
+        ? toRaw(communication[0].target)
+        : null,
+    },
+  }
+  // console.log(payloadData)
+  updateSatellitePayload(payloadData).then(res => {
+    if (res.code === '200') {
+      window.$message.success('保存成功')
+      getSatelliteList()
+    }
+  })
+}

 // export default defineComponent({
 //   name: 'SatDetail',
--- a/src/views/Satellite/hooks/satellite.ts
+++ b/src/views/Satellite/hooks/satellite.ts
@ -1,6 +1,9 @@
 import SatelliteEntity from '@/js/SatelliteEntity'
 import { difference } from 'lodash'
 import { useEntity } from '@/hooks/entity'
+import { useTree } from '@/utils/tree'
+import { getSatellite } from '@/api/Satellite'
+
 // import CreateFrustum from '@/js/Sensor'

 interface ISatellite {
@ -14,9 +17,11 @@ interface IBaseFilterParam {
  params: Array<string | number>
  paramName: string
 }
+const { filterTreeNodeByField } = useTree()
 const satelliteList = ref<ISatellite[]>([])
+const checkedKeys = ref<Array<string | number>>([])

-const { satelliteMap, showOrHideLoad } = useEntity()
+const { satelliteMap, showOrHideLoad, satellitePayloadShowMap } = useEntity()

 const showPoint = ref(true)
 function showPointUnderSat(id?: string) {
@ -54,14 +59,19 @@ export function useSatellite() {
    })
  }
  // 创建satellite entity 实例
-  function addSatellite({ tle }: ISatellite) {
+  function addSatellite({ id, tle }: ISatellite) {
    const satellite = new SatelliteEntity(tle)
    const cesiumSateEntity = satellite.createSatelliteEntity()
    // const result = viewer.entities.add(cesiumSateEntity)

    setTimeout(() => {
      // satellite.sensorType = Math.random() > 0.5 ? 'conic' : 'rectangle'
-      satellite.sensor = showOrHideLoad.value
+      const satPayload = satellitePayloadShowMap.get(id)
+      if (satPayload && satPayload.detectingPayload) {
+        satPayload.detectingPayload.angle &&
+          (satellite.sensorAngle = satPayload.detectingPayload.angle)
+        satPayload.detectingPayload.show && (satellite.sensor = true)
+      }
    }, 1000)

    // viewer.clock.multiplier = 100
@ -99,27 +109,76 @@ export function useSatellite() {
    }
  }

-  return { satelliteList, addSatellites, showPoint, showPointUnderSat }
+  return {
+    satelliteList,
+    checkedKeys,
+    getSatelliteList,
+    addSatellites,
+    showPoint,
+    showPointUnderSat,
+  }
 }

-function filterTreeNodeByField({
-  treeData,
-  params,
-  paramName,
-}: IBaseFilterParam): Array<ISatellite> {
-  return treeData.reduce((acc, node) => {
-    if (params.includes(node[paramName]) && !node.children) {
-      acc.push(node)
-    }
-    if (node.children) {
-      acc = acc.concat(
-        filterTreeNodeByField({
-          treeData: node.children,
-          params,
-          paramName,
-        })
-      )
-    }
-    return acc
-  }, [])
+// function filterTreeNodeByField({
+//   treeData,
+//   params,
+//   paramName,
+// }: IBaseFilterParam): Array<ISatellite> {
+//   return treeData.reduce((acc, node) => {
+//     if (params.includes(node[paramName]) && !node.children) {
+//       acc.push(node)
+//     }
+//     if (node.children) {
+//       acc = acc.concat(
+//         filterTreeNodeByField({
+//           treeData: node.children,
+//           params,
+//           paramName,
+//         })
+//       )
+//     }
+//     return acc
+//   }, [])
+// }
+
+async function getSatelliteList() {
+  const checked = JSON.parse(JSON.stringify(checkedKeys.value))
+
+  const sateRes = await getSatellite()
+  const { data, code } = sateRes
+  if (code === '200') {
+    checkedKeys.value = []
+    satelliteList.value = data
+    getAllNodesToPayload()
+    nextTick(() => {
+      checkedKeys.value = checked
+    })
+  }
+  // console.log('data,code', data, code)
+}
+
+function getAllNodesToPayload() {
+  // const mbList = getLeafNodeIds(satelliteList.value, 'dataId')
+  satelliteList.value.forEach(satellite => {
+    if (satellite.extendInfo) {
+      const { detectingPayload, communicationPayload } = satellite.extendInfo
+      const detectingShow =
+        satellitePayloadShowMap.get(satellite.id)?.detectingPayload?.show ||
+        false
+      const communicationShow =
+        satellitePayloadShowMap.get(satellite.id)?.communicationPayload?.show ||
+        false
+      satellitePayloadShowMap.set
+
+      satellitePayloadShowMap.set(satellite.id, {
+        detectingPayload: detectingPayload
+          ? { ...detectingPayload, show: detectingShow }
+          : null,
+        communicationPayload: communicationPayload
+          ? { ...communicationPayload, show: communicationShow }
+          : null,
+      })
+    }
+  })
+  console.log('satellitePayloadShowMap', satellitePayloadShowMap)
 }
--- a/src/views/Satellite/index.vue
+++ b/src/views/Satellite/index.vue
@ -2,27 +2,16 @@
 import type { TreeOption } from 'naive-ui'
 import { NButton } from 'naive-ui'
 import Tree from '@/components/Tree/index.vue'
-import { getSatellite } from '@/api/Satellite'
 import { useSatellite } from './hooks/satellite'
 import { showDetailsSatellite } from './components/SatDetail'

-const { satelliteList, addSatellites } = useSatellite()
+const { satelliteList, checkedKeys, getSatelliteList, addSatellites } =
+  useSatellite()

 onMounted(async () => {
  getSatelliteList()
 })

-async function getSatelliteList() {
-  const sateRes = await getSatellite()
-  const { data, code } = sateRes
-  if (code === '200') {
-    satelliteList.value = data
-  }
-  // console.log('data,code', data, code)
-}
-
-const checkedKeys = ref<Array<string | number>>([])
-
 watch(checkedKeys, val => {
  addSatellites(val)
 })