LSSE-front/src/views/simulationScene/sceneEditing/index.vue

<template>
  <div class="scene-editing-page" v-grid-box="{ columns: ['320px', 1, '320px'], rows: [45, 30, 25], gap: '0px' }">
    <ModuleWrapper title="作战/保障力量" style="grid-column: 1 / 2; grid-row: 1 / 2">
      <div class="normal" style="padding: 5px">
        <a-tree :treeData="zb.zbTreeData"></a-tree>
      </div>
    </ModuleWrapper>
    <ModuleWrapper title="装备元素" style="grid-column: 1 / 2; grid-row: 2 / 4">
      <div class="normal" style="padding: 5px" v-flex.v>
        <a-input-search v-model="ys.keyword" placeholder="输入关键词搜索..." @search="onSearch" />
        <div style="height: 0; flex: 1; overflow-y: auto">
          <a-row>
            <template v-for="item in ys.ysList">
              <a-col :key="item.id" :span="24">{{ item.title }}</a-col>
              <a-col v-for="it in item.children" :key="it.id" :span="12" v-flex.v="['c']">
                <img class="ys-image" :src="it.image" alt="" />
                <span>{{ it.title }}</span>
              </a-col>
            </template>
          </a-row>
        </div>
      </div>
    </ModuleWrapper>
    <div
      class="cesium-container"
      id="cesium-container"
      style="grid-column: 2 / 3; grid-row: 1 / 7; overflow: hidden"
    ></div>
    <ModuleWrapper title="作战单元状态" style="grid-column: 3 / 4; grid-row: 1 / 3">
      <div class="normal" style="padding: 15px 0">
        <div style="height: 100%; padding: 0 15px; overflow-y: auto">
          <img class="image" :src="zt.image" />
          <div class="name">{{ zt.name }}</div>
          <div v-for="item in zt.ztList" :key="item.label" class="zt-item">
            <span>{{ item.label }}：</span>
            <img :src="item.icon" alt="" />
            <span>{{ item.text }}</span>
          </div>
        </div>
      </div>
    </ModuleWrapper>
    <ModuleWrapper title="作战单元武器" style="grid-column: 3 / 4; grid-row: 3 / 4">
      <div class="normal" style="padding: 15px 0">
        <div style="height: 100%; padding: 0 15px; overflow-y: auto">
          <div v-for="(item, index) in zzdywq.wqList" :key="index" class="wq-item" v-flex>
            <span>{{ item.title }}</span>
          </div>
        </div>
      </div>
    </ModuleWrapper>
  </div>
</template>

<script>
export default {
  name: 'SimulationSceneSceneEditing',
  data() {
    return {
      cesium: null,
      zb: {
        zbTreeData: [
          {
            key: '1',
            title: '红方',
            children: [
              {
                key: '1-1',
                title: '作战力量',
                children: [
                  { key: '1-1-1', title: '左翼夺控群火力分队' },
                  { key: '1-1-2', title: '左翼攻击分队' },
                  { key: '1-1-3', title: '右翼攻击分队' },
                  { key: '1-1-4', title: '右翼夺控群反装甲分队' },
                  { key: '1-1-5', title: '防空火力队' },
                  { key: '1-1-6', title: '左翼牵制群右翼攻击分队' },
                  { key: '1-1-7', title: '电子对抗兵队超短波干扰分队' },
                  { key: '1-1-8', title: '纵深夺控群火力分队' },
                ],
              },
              {
                key: '1-2',
                title: '保障力量',
              },
            ],
          },
          {
            key: '2',
            title: '蓝方',
            children: [
              { key: '1-1', title: '作战力量' },
              { key: '1-2', title: '保障力量' },
            ],
          },
        ],
      },
      ys: {
        keyword: '',
        ysList: [
          {
            id: '1',
            title: '红方',
            children: [
              { id: '1-1', title: '反坦克导弹', image: '/mockData/fe6ad2d8-da11-04d8-f447-0d8175826e28.png' },
              { id: '1-2', title: '红箭10反坦克导弹', image: '/mockData/fe6ad2d8-da11-04d8-f447-0d8175826e28.png' },
              { id: '1-3', title: '装甲突击车', image: '/mockData/fe6ad2d8-da11-04d8-f447-0d8175826e28.png' },
              { id: '1-4', title: 'VT5坦克', image: '/mockData/fe6ad2d8-da11-04d8-f447-0d8175826e28.png' },
              { id: '1-5', title: '餐饮车', image: '/mockData/fe6ad2d8-da11-04d8-f447-0d8175826e28.png' },
              { id: '1-6', title: '物资运输车', image: '/mockData/fe6ad2d8-da11-04d8-f447-0d8175826e28.png' },
              { id: '1-7', title: '油罐车', image: '/mockData/fe6ad2d8-da11-04d8-f447-0d8175826e28.png' },
              { id: '1-8', title: '雷达车', image: '/mockData/fe6ad2d8-da11-04d8-f447-0d8175826e28.png' },
            ],
          },
          {
            id: '2',
            title: '蓝方',
            children: [
              { id: '2-1', title: '反坦克导弹', image: '/mockData/fe6ad2d8-da11-04d8-f447-0d8175826e28.png' },
              { id: '2-2', title: '红箭10反坦克导弹', image: '/mockData/fe6ad2d8-da11-04d8-f447-0d8175826e28.png' },
              { id: '2-3', title: '装甲突击车', image: '/mockData/fe6ad2d8-da11-04d8-f447-0d8175826e28.png' },
              { id: '2-4', title: 'VT5坦克', image: '/mockData/fe6ad2d8-da11-04d8-f447-0d8175826e28.png' },
              { id: '2-5', title: '餐饮车', image: '/mockData/fe6ad2d8-da11-04d8-f447-0d8175826e28.png' },
              { id: '2-6', title: '物资运输车', image: '/mockData/fe6ad2d8-da11-04d8-f447-0d8175826e28.png' },
              { id: '2-7', title: '油罐车', image: '/mockData/fe6ad2d8-da11-04d8-f447-0d8175826e28.png' },
              { id: '2-8', title: '雷达车', image: '/mockData/fe6ad2d8-da11-04d8-f447-0d8175826e28.png' },
            ],
          },
        ],
      },
      zt: {
        image: '/mockData/fe6ad2d8-da11-04d8-f447-0d8175826e28.png',
        name: '轮式装甲突击车',
        ztList: [
          { label: '推演方', text: `红方` },
          { label: '航向', text: `0度` },
          { label: '航速', text: `0.00公里/小时(停车)` },
          { label: '经度', text: `东经120°53'56″` },
          { label: '纬度', text: `北纬24°34'17″` },
          { label: '高度/深度', text: `0.00米` },
          { label: '毁伤', icon: '/mockData/9d47c8c8-30d8-3e78-944f-d48ca8084c58.png' },
          { label: '系统', progress: 100 },
          { label: '电量', progress: 90 },
          { label: '失火', progress: 0 },
          { label: '状态', text: `未分配任务` },
        ],
      },
      zzdywq: {
        placeholder: '&emsp;'.repeat(100),
        wqList: [
          { title: '240×7.62毫米高射机炮[20发备弹]' },
          { title: '16×AT-14型“短号”反坦克导弹' },
          { title: '6×巡飞弹' },
          { title: '4×无人侦察机' },
        ],
      },
    }
  },
  mounted() {
    this.cesium = new window.MyCesium('cesium-container')
  },
  methods: {
    onSearch(e) {
      console.log('----', e, e.target.value)
    },
  },
}
</script>

<style lang="less" scoped>
.scene-editing-page {
  padding-top: 20px;
}
.ys-image {
  width: 74px;
  height: 62px;
  object-fit: cover;
  margin: 16px 0 8px;
}
.image {
  width: 100%;
  padding: 20px;
  background-color: #0c3040;
}
.name {
  color: #00baff;
  text-decoration: underline;
  font-size: 16px;
  line-height: 26px;
  margin: 10px 0;
}
.zt-item {
  font-size: 16px;
  line-height: 30px;
  letter-spacing: 2px;
  color: #bbdded;
}
.wq-item {
  text-decoration: underline;
  font-size: 16px;
  line-height: 26px;
  letter-spacing: 0px;
  color: #00baff;
}
</style>