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; overflow-y: auto">
        <a-tree
          :treeData="zb.zbTreeData"
          :selectedKeys.sync="zb.selectedKeys"
          :replaceFields="{ children: 'children', title: 'name', key: 'id' }"
          @select="handleSelectTree"
        ></a-tree>
      </div>
    </ModuleWrapper>
    <ModuleWrapper title="装备元素" style="grid-column: 1 / 2; grid-row: 2 / 4">
      <div class="normal flex-c" style="padding: 5px">
        <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" class="flex-c ai-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 flex ai-c">
            <span>{{ item.label }}：</span>
            <img :src="item.icon" alt="" />
            <span>{{ item.text }}</span>
            <div v-if="'progress' in item" class="progress-bar flex">
              <div class="progress" :style="{ width: item.progress }"></div>
            </div>
          </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 flex">
            <span>{{ item.title }}</span>
          </div>
        </div>
      </div>
    </ModuleWrapper>
  </div>
</template>

<script>
export default {
  name: 'SimulationSceneSceneEditing',
  data() {
    return {
      cesium: null,
      scenarioId: null,
      zb: { zbTreeData: [], selectedKeys: [] },
      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: '毁伤', text: `0%` },
          { 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')
    this.scenarioId = 2733
    this.getZbTree()
  },
  methods: {
    async getZbTree() {
      try {
        const res = await this.$http({
          url: `/scenario/power/${this.scenarioId}`,
          method: 'get',
        })
        this.zb.zbTreeData = [
          {
            id: '1',
            name: '红方',
            selectable: false,
            children: [
              { id: '1-1', name: '作战力量', selectable: false, children: res.data.red.fight },
              { id: '1-2', name: '保障力量', selectable: false, children: res.data.red.guarantee },
              { id: '1-3', name: '指挥力量', selectable: false, children: res.data.red.command },
            ],
          },
          {
            id: '2',
            name: '蓝方',
            selectable: false,
            children: [
              { id: '2-1', name: '作战力量', selectable: false, children: res.data.red.fight },
              { id: '2-2', name: '保障力量', selectable: false, children: res.data.red.guarantee },
              { id: '2-3', name: '指挥力量', selectable: false, children: res.data.red.command },
            ],
          },
        ]
      } catch (error) {
        console.log(error)
      }
    },
    handleSelectTree(selectedKeys, { node }) {
      console.log(...arguments)
      // node.dataRef
    },
    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;
  .progress-bar {
    flex: 1;
    height: 20px;
    background-color: #9da0a1;
    .progress {
      background-color: #1b9b39;
    }
  }
}
.wq-item {
  text-decoration: underline;
  font-size: 16px;
  line-height: 26px;
  letter-spacing: 0px;
  color: #00baff;
}
</style>