"点标注创建，渲染，添加接口，上树"

src/renderer/src/api/ts/index.ts

@@ -20,4 +20,16 @@ export const TsApi = {
       data
     })
   },
+  addTsSource: async (data: any) => {
+    return await request.post({
+      url: '/tsSource/add',
+      data
+    })
+  },
+  queryTsSource: async (data: any) => {
+    return await request.post({
+      url: '/tsSource/query',
+      data
+    })
+  },
 }

src/renderer/src/views/TS/cabin.vue

@@ -27,21 +27,83 @@ import {$changeComponentShow} from "../../utils/communication";
 
 const {getSelectedNodes, cusSelectNode, getSameLevel, cusNodeIcon, nodeType} = useTreeNode()
 import {showRightMenuTs} from "./tree"
+import {TsApi} from "../../api/ts";
+import {initMapData} from "./entity";
 
 const rightMenuRef: any = ref()
 const treeObj = ref() //树形的实例
-const nodes: any = ref([])
+let zNodes: any = ref([])//树形结构数据
+let nodes: any = ref([])//选中的node节点
 let input2 = ref('')
 onMounted(() => {
-  let data = [
-    {
-      name: "88",
-      sourceType: "directory"
+  let formData = new FormData()
+  // let data = []
+  formData.append('id', window["planId"])
+  TsApi.queryTsSource(formData).then(async res => {
+    console.log('queryTsSource', res)
+    if (res.code == 200) {
+      for (let i = res.data.length - 1; i >= 0; i--) {
+        res.data[i].icon = await cusNodeIcon(res.data[i]);
       }
-  ]
-  treeObj.value = $.fn.zTree.init($(`#treeDemos`), setting, data)
+      zNodes.value = res.data
+      console.log("data", zNodes.value)
+
+      treeObj.value = $.fn.zTree.init($(`#treeDemos`), setting, zNodes.value)
       window.treeObj = treeObj.value
+    }
   })
+
+})
+const initTreeCallBack = () => {
+  let arr = zNodes.value
+  let layerTypes = [
+    "arcgisWximagery",
+    "arcgisBlueImagery",
+    "ArcgisLWImagery",
+    "gdlwImagery",
+    "gdwxImagery",
+    "gdslImagery",
+    "layer",
+  ];
+  let layers: any = []
+  for (let i = 0; i < arr.length; i++) {
+    if (arr[i].sourceType === 'directory') {
+      continue
+    }
+    let detail = JSON.parse(arr[i].detail || '{}')
+    let params = JSON.parse(arr[i].params || '{}')
+    if (!detail.name) {
+      detail.name = arr[i].sourceName
+    }
+    if (!detail.id) {
+      detail.id = arr[i].id
+    }
+    if (layerTypes.includes(arr[i].sourceType)) {
+      layers.push(
+        {
+          sourceType: arr[i].sourceType,
+          detail: {...detail, ...params}
+        }
+      )
+    } else {
+      initMapData(arr[i].sourceType, {...detail, ...params})
+    }
+  }
+
+  layers.sort((obj1, obj2) => {
+    return obj1.detail.layerIndex - obj2.detail.layerIndex;
+  });
+  if (window.earth_ts) {
+    for (let i = 0; i < layers.length; i++) {
+      // initMapData(layers[i].sourceType, layers[i].detail, null)
+    }
+  }
+}
+const onDblClick = (event: MouseEvent, treeId: string, treeNode: any) => {
+  let entityObject
+  entityObject = (window as any)._entityMap.get(treeNode.id)
+  entityObject.flyTo()
+}
 const onClick = (event: MouseEvent, treeId: string, treeNode: any) => {
   console.log('selectNode', treeNode)
 
@@ -131,20 +193,21 @@ const setting = {
   data: {
     key: {
       //zdatas数据中表示节点name的属性key
-      name: "name",
-      checked: "is_show",
+      name: "sourceName",
+      checked: "isShow",
     },
     simpleData: {
       enable: true,
       idKey: "id",
-      pIdKey: "p_id",
-      nameKey: "name",
+      pIdKey: "parentId",
+      nameKey: "sourceName",
     },
   },
   callback: {
     onMouseDown: onMouseDown,
     onRightClick: rightClick,
     onClick: onClick,
+    onDblClick: onDblClick
     /*
     onClick: this.onClick,
     onDblClick: this.onDblClick,
@@ -162,8 +225,11 @@ const setting = {
        beforeClick: this.zTreeBeforeClick,
        onCheck: this.onCheck*/
   },
-}
 
+}
+defineExpose({
+  initTreeCallBack
+})
 </script>
 
 <style lang="scss" scoped>
@@ -189,6 +255,19 @@ const setting = {
       height: 100%;
     }
   }
+
+  :deep("li a.curSelectedNode") {
+    background-color: #ffe6b0 !important;
+
+  }
+
+  .ztree {
+    li {
+      a.curSelectedNode {
+      }
+    }
+
+  }
 }
 
 :deep(.el-input__wrapper), :deep(.el-input__inner ) {

src/renderer/src/views/TS/components/rightOperate.ts

@@ -1,6 +1,8 @@
+import {$changeComponentPop} from "../../../utils/communication";
+
 export const useRightOperate = () => {
   const addDirectory = () => {
-    // $changeComponentPop('.adddirectoryBox', true)
+    $changeComponentPop('.adddirectoryBox', true)
     console.log("addDirectory")
   }
   const addResource = () => {

src/renderer/src/views/TS/edit.vue

@@ -4,10 +4,11 @@
       <use xlink:href="#icon-tuichu"></use>
     </svg>
     <div id="earthContainer" class="fullSize"></div>
-    <cabin></cabin>
+    <cabin ref="cabin"></cabin>
     <element></element>
     <deduction :TSOBJ="tsOBJ"></deduction>
     <newEvent></newEvent>
+    <addDirectory class="adddirectoryBox absolute zIndex999"></addDirectory>
   </div>
 </template>
 
@@ -18,9 +19,11 @@ import Cabin from "./cabin.vue"
 import Element from "./element.vue"
 import NewEvent from "./newEvent.vue"
 import Deduction from "./deduction.vue";
+import AddDirectory from './components/tsdirectory.vue'
 import {TS} from "./sdk";
 import * as domain from "domain";
 
+let cabin = ref()
 let tsOBJ = reactive({})
 const router = useRouter()
 const route = useRoute()
@@ -33,6 +36,7 @@ for (const routeQueryKey in route.query) {
   }
 }
 console.log("params", params)
+window.planId = params.id
 
 // 通过planID获取方案包含的所有事件
 let getEventList = () => {
@@ -79,6 +83,7 @@ const createEarth = async () => {
   setTimeout(() => {
     new YJ.Tools(window.earth_ts).flyHome()
   }, 1000)
+  cabin.value.initTreeCallBack()
 }
 const closeSituationEdit = () => {
   router.back()
@@ -96,5 +101,9 @@ const closeSituationEdit = () => {
     height: 2.2222222222vh !important;
     cursor: pointer;
   }
+
+  .adddirectoryBox {
+    display: none;
+  }
 }
 </style>

src/renderer/src/views/TS/element.vue

@@ -55,8 +55,11 @@ import {ref, onMounted} from "vue";
 import {Search} from '@element-plus/icons-vue'
 import {ModelApi} from "../../api/model";
 import {GraphApi} from "../../api/graphLabel";
-import {addMapSource} from "./entity";
 
+import {addMapSource} from "./entity";
+import {useTreeNode} from "../components/tree/hooks/treeNode";
+
+const {getSelectedNodes} = useTreeNode()
 const service = ref(localStorage.getItem('ip'))
 
 interface Tree {
@@ -158,11 +161,15 @@ let getGraphTypeList = async () => {
 }
 // 添加标绘
 let addMarker = (item) => {
+  let nodes = getSelectedNodes(window['treeObj'])
   console.log("绘制" + item.name)
+  console.log("获取选中的节点", nodes)
+  let id = new YJ.Tools().randomString()
+  let pId = nodes.length >= 1 ? nodes[0].id : -1
   window.draw = new YJ.Draw[item.funName](earth_ts)
   window.draw.start((a, position) => {
     console.log(position)
-    addMapSource({id: 777, type: item.type, name: item.source_name, position})
+    addMapSource({id, type: item.type, name: item.source_name, position, pId})
   })
 }
 

src/renderer/src/views/TS/entity.ts

@@ -1,4 +1,9 @@
-export function addMapSource(option) {
+import {TsApi} from "../../api/ts";
+import {useTreeNode} from '@/views/components/tree/hooks/treeNode'
+
+const {cusAddNodes, getSelectedNode} = useTreeNode()
+
+export function addMapSource(option, cb: any = null) {
   console.log("添加到地球上", option)
   let id = option.id || new YJ.Tools().randomString()
   let name = option.name
@@ -24,5 +29,37 @@ export function addMapSource(option) {
   }
   console.log('options', options)
   //   进数据库
-  //   上树
+  let dbOption = {
+    "id": option.id,
+    "sourceName": name,
+    "sourceType": option.type,
+    "sourcePath": "",
+    "parentId": option.pId,
+    "treeIndex": 0,
+    "isShow": 1,
+    "detail": JSON.stringify(options) || '{}',
+    "params": "",
+    "planId": window['planId']
+  }
+  console.log('dbOption', dbOption)
+  TsApi.addTsSource(dbOption).then(res => {
+    console.log("addTsSource", res)
+    cb && cb(res)
+    //   上树
+    cusAddNodes(window.treeObj, getSelectedNode(window.treeObj), [dbOption], true)
+  })
+}
+
+export function initMapData(type, data) {
+  let entityObject
+  switch (type) {
+    case 'point':
+      console.log("ssssssss+++", window['earth_ts'])
+      entityObject = new YJ.Obj.BillboardObject(window['earth_ts'], data)
+  }
+  if (entityObject) {
+    if (entityObject.options.id) {
+      (window as any)._entityMap.set(entityObject.options.id, entityObject)
+    }
+  }
 }

src/renderer/src/views/TS/list.vue

@@ -151,7 +151,10 @@ const getList = (params = null) => {
           formData.append(paramsKey, params[paramsKey])
         }
       }
+
     }
+    formData.append('username', params["createdBy"])
+
   }
   TsApi.planList(formData).then(res => {
     console.log(res)
@@ -175,7 +178,7 @@ const toTSEdit = (row) => {
   console.log("当前推演方案", row)
   router.push({
     name: 'tsEdit', // 必须用 name 匹配路由，不能用 path
-    query: {id: 123, name: "战时推演", start_time: 946684800000}
+    query: {id: row.id, name: row.name, start_time: new Date(row.simulationStartTime).getTime()}
   })
 }
 const delPlan = (id) => {

src/renderer/src/views/TS/newPlan.vue

@@ -11,28 +11,31 @@
       </template>
       <div class="set_detail">
         <el-form
+          ref="ruleFormRef"
           style="max-width: 600px"
           :model="sizeForm"
           label-width="auto"
           :label-position="'top'"
-
+          :rules="rules"
         >
-          <el-form-item label="推演名称">
+          <el-form-item label="推演名称" prop="name" required>
             <el-input v-model="sizeForm.name" placeholder="请填写名称"/>
           </el-form-item>
-          <el-form-item label="仿真开始时间">
+          <el-form-item label="仿真开始时间" prop="simulationStartTime" required>
             <el-date-picker
-              v-model="sizeForm.date1"
+              v-model="sizeForm.simulationStartTime"
               type="datetime"
+              timezone="Asia/Shanghai"
+              value-format="YYYY-MM-DDTHH:mm:ss"
               placeholder="请选择日期时间"
             />
           </el-form-item>
-          <el-form-item label="推演描述" prop="desc">
+          <el-form-item label="推演描述" prop="desc" required>
             <el-input v-model="sizeForm.desc" type="textarea" placeholder="请输入内容描述"/>
           </el-form-item>
           <el-form-item>
             <div class="optionbtn">
-              <el-button @click="addPlan">确定</el-button>
+              <el-button @click="addPlan(ruleFormRef)">确定</el-button>
               <el-button>取消</el-button>
             </div>
           </el-form-item>
@@ -45,19 +48,53 @@
 
 <script lang="ts" setup>
 import {ref, reactive,} from "vue";
-import {ElMessage} from 'element-plus'
+import {ElMessage, FormInstance, FormRules} from 'element-plus'
 import {TsApi} from "../../api/ts";
 
 const eventBus: any = inject('bus')
 const emit = defineEmits(['addCallback']);
 const isShowPup = ref(false)
-const sizeForm = reactive({
+
+
+interface RuleForm {
+  name: string,
+  simulationStartTime: string,
+  desc: string,
+}
+
+const ruleFormRef = ref<FormInstance>()
+const sizeForm = reactive<RuleForm>({
   name: '',
-  // date1: '',
+  simulationStartTime: '',
   desc: '',
 })
-const addPlan = () => {
-  TsApi.addPlan({name: sizeForm.name, desc: sizeForm.desc}).then(res => {
+
+const rules = reactive<FormRules<RuleForm>>({
+  name: [
+    {required: true, message: '推演名称不能为空', trigger: 'blur'},
+  ],
+  desc: [
+    {required: true, message: '推演描述不能为空', trigger: 'blur'},
+  ],
+  simulationStartTime: [
+    {required: true, message: '仿真开始时间不能为空', trigger: 'blur'},
+  ],
+})
+const submitForm = async (formEl: FormInstance | undefined) => {
+  if (!formEl) return
+  await formEl.validate((valid, fields) => {
+    if (valid) {
+      console.log('submit!')
+    } else {
+      console.log('error submit!', fields)
+    }
+  })
+}
+const addPlan = async (formEl: FormInstance | undefined) => {
+  if (!formEl) return
+  await formEl.validate((valid, fields) => {
+    if (valid) {
+      TsApi.addPlan(sizeForm).then(res => {
         console.log(res)
         if (res.code == 200) {
           ElMessage({
@@ -68,6 +105,11 @@ const addPlan = () => {
         }
         $(".newPlan")[0].style.display = "none"
       })
+    } else {
+      console.log('提交失败', fields)
+    }
+  })
+
 }
 eventBus.on('openAddPlan', (data, cb, type) => {
   // selectCallback = cb

src/renderer/src/views/components/leftSide/leftSideFirst.vue

@@ -274,6 +274,8 @@ const handleClick = (item: any, e) => {
     if ((window as any).checkAuthIsValid) {
       console.log('打开态势推演')
       ipcRenderer.send('toggle-fullscreen', true)
+      window['earth'].destroy()
+      window['earth'] = null
       router.push({path: '/ts'})
 
     } else {
@@ -493,6 +495,7 @@ const clickMenu = (item: any) => {
   // background-size: 100% 100%;
   transition: all 0.3s ease;
   cursor: pointer;
+
   > svg {
     width: 100%;
     height: 100%;

src/renderer/src/views/components/tree/hooks/tree.ts

@@ -7,7 +7,15 @@ import { ElMessage } from 'element-plus'
 export const useTree = () => {
   const rightMenuRef: any = ref() //右键菜单的实例
   const treeObj = ref() //树形的实例
-  const { getSelectedNodes, showRightMenu, cusUpdateNode, cusSelectNode, getSameLevel, cusNodeIcon, nodeType } = useTreeNode() //树上一系列的方法hooks
+  const {
+    getSelectedNodes,
+    showRightMenu,
+    cusUpdateNode,
+    cusSelectNode,
+    getSameLevel,
+    cusNodeIcon,
+    nodeType
+  } = useTreeNode() //树上一系列的方法hooks
   const nodes: any = ref([])
   /**
    * 用于捕获zTree上鼠标按键按下后的事件回调函数
@@ -79,8 +87,7 @@ export const useTree = () => {
           let t = window.earth.entityMap.get(n.id)
           if (t) {
             return t
-          }
-          else {
+          } else {
             if (n.parentId) {
               return getEntityObject(window.treeObj.getNodeByParam("id", n.parentId, null))
             }
@@ -89,8 +96,7 @@ export const useTree = () => {
       }
       entityObject = getEntityObject(treeNode)
       entityObject.flyTo(treeNode.id)
-    }
-    else if (treeNode.sourceType === "roam") {
+    } else if (treeNode.sourceType === "roam") {
       // 飞行漫游
       ElMessage({
         message: '单击鼠标右键可结束当前漫游',
@@ -99,8 +105,7 @@ export const useTree = () => {
       let params = JSON.parse(treeNode.params)
       YJ.Global.FlyRoam.flyTo((window as any).earth, params.points);
       return;
-    }
-    else {
+    } else {
       if (treeNode.sourceType == 'pressModel') {
         entityObject = (window as any).pressModelEntities.get(treeNode.id)
       } else {
@@ -289,8 +294,7 @@ export const useTree = () => {
           }
         )
         window.treeObj.checkNode(parentNode, false, true);
-      }
-      else {
+      } else {
         p_ids.push(
           {
             id: parentNode.id,
@@ -307,6 +311,7 @@ export const useTree = () => {
 
 
     let ids = [...p_ids]
+
     // 更新节点状态修改地图资源状态
     function sourceStatus(node) {
       ids.push({id: node.id, isShow: node.isShow ? 1 : 0})
@@ -316,8 +321,7 @@ export const useTree = () => {
             sourceStatus(item)
           })
         }
-      }
-      else {
+      } else {
         let params = JSON.parse(node.params)
         let entityObject
         if (node.sourceType == 'pressModel') {
@@ -368,7 +372,6 @@ export const useTree = () => {
     }
 
 
-
     //   let source_ids = [];
     //   nodes.forEach((item) => {
     //     if (item.isHidden == false) {
@@ -604,7 +607,7 @@ export const useTree = () => {
             brightness: 1
           })
         }
-        res.data.list[i].svg = await cusNodeIcon(res.data.list[i]);
+        res.data.list[i].icon = await cusNodeIcon(res.data.list[i]);
       }
     }
     zNodes.value = res.data.list
@@ -686,8 +689,7 @@ export const useTree = () => {
               params: {...detail, ...params}
             }
           )
-        }
-        else {
+        } else {
           initMapData(zNodes.value[i].sourceType, {...detail, ...params}, null)
         }
       }