LSSE-front/src/views/subsystem/scene/index.vue

<template>
  <Flex fd="co" class="page-scene">
    <Flex ai="c" jc="sb" class="page-scene-header">
      <span class="page-scene-title">场景编辑子系统</span>
      <span class="page-scene-title">推演想定【{{ roomName }}-{{ scenarioName }}】</span>
      <span class="page-scene-title">剩余 {{ roomInfo.remainTimeStr }}</span>
    </Flex>
    <Grid class="page-scene-main flex-1 oh" :columns="['320px', 1, '320px']" :rows="['30px', 1]" gap="0px">
      <div class="tool-wrapper" style="grid-area: 1 / 1 / 2 / 4">
        <a-menu :selectedKeys="[]" mode="horizontal" theme="dark">
          <a-menu-item @click="() => {}"> 统计分析 </a-menu-item>
        </a-menu>
      </div>
      <div
        ref="scene-cesium-container"
        class="scene-cesium-container"
        id="scene-cesium-container"
        style="grid-area: 2 / 1 / 3 / 4"
      ></div>
      <div class="pr zi1" style="grid-area: 2 / 1 / 3 / 2">
        <ModuleWrapper title="作战/保障力量" height="60%">
          <div class="normal" style="padding: 5px; overflow-y: auto">
            <a-tree
              class="simulation-tree"
              :treeData="zzbzllTreeData"
              :selectedKeys.sync="zzbzll.selectedKeys"
              :replaceFields="{ children: 'children', title: 'resourceName', key: 'id' }"
              @select="handleSelectZzbzll"
            >
            </a-tree>
          </div>
        </ModuleWrapper>
        <ModuleWrapper title="日志" height="40%">
          <div class="normal"></div>
        </ModuleWrapper>
      </div>
      <Grid class="pr zi1" :rows="rightRows" gap="0px" style="grid-area: 2 / 3 / 3 / 4">
        <ModuleWrapper title="兵力编组">
          <template #extra>
            <Zoom :max="rightViewer === 'blbz'" @zoom-max="rightViewer = 'blbz'" @zoom-min="rightViewer = ''" />
          </template>
          <div class="normal" style="padding: 5px; overflow-y: auto">
            <a-tree
              class="simulation-tree"
              :treeData="showBlbzCheckedTreeData"
              :selectable="false"
              :replaceFields="{ children: 'children', title: 'title', key: 'id' }"
            >
            </a-tree>
          </div>
        </ModuleWrapper>
        <ModuleWrapper title="基础属性">
          <template #extra>
            <Zoom :max="rightViewer === 'jcsx'" @zoom-max="rightViewer = 'jcsx'" @zoom-min="rightViewer = ''" />
          </template>
          <div class="normal" style="padding: 15px 0">
            <Jcsx
              ref="jcsx"
              v-if="zzbzllSelectedFd"
              :scenarioId="scenarioId"
              :resourceId="zzbzllSelectedFd.sdzy.id"
              :originResourceId="zzbzllSelectedFd.sdzy.resourceId"
              :resourceName="zzbzllSelectedFd.sdzy.resourceName"
              :resourceType="zzbzllSelectedFd.sdzy.resourceType"
              :type="zzbzllSelectedFd.sdzy.type"
              :modelData="jcsxModelData"
              :readonly="true"
            />
          </div>
        </ModuleWrapper>
        <ModuleWrapper :title="xdrw.resourceTypeMapTitle[zzbzllSelectedFd?.sdzy.resourceType] || '行动任务'">
          <template #extra>
            <Zoom :max="rightViewer === 'xdrw'" @zoom-max="rightViewer = 'xdrw'" @zoom-min="rightViewer = ''" />
          </template>
          <div class="normal" style="padding: 0">
            <Zzxd
              ref="xdrw"
              v-if="zzbzllSelectedFd"
              :scenarioId="scenarioId"
              :resourceId="zzbzllSelectedFd.sdzy.id"
              :resourceType="zzbzllSelectedFd.sdzy.resourceType"
              :actionList="xdrwActionList"
              :readonly="true"
            />
          </div>
        </ModuleWrapper>
      </Grid>
    </Grid>
  </Flex>
</template>

<script>
import { getAction } from '@/api/manage'
import Zoom from './components/Zoom.vue'
import Jcsx from './components/Jcsx.vue'
import Zzxd from './components/Zzxd.vue'

export default {
  name: 'SubsystemScene',
  components: {
    Zoom,
    Jcsx,
    Zzxd,
  },
  data() {
    return {
      initial: false,
      ws: null,
      roomInfo: {
        remainTimeStr: '',
        remainTime: '',
        duringTime: '',
        roomData: [],
      },
      roomId: '',
      roomName: '',
      scenarioId: '',
      scenarioName: '',
      cesium: null,
      scenarioDetail: null,
      zzbzll: {
        selectedKeys: [],
      },
      blbz: {
        treeData: [],
      },
      rightViewer: '',
      xdrw: {
        resourceTypeMapTitle: {
          5: '作战行动',
          6: '保障任务',
        },
      },
    }
  },
  computed: {
    zzbzllTreeData() {
      const zzbzllTreeData = [
        {
          id: '0',
          resourceName: '红方',
          selectable: false,
          children: [],
        },
        {
          id: '1',
          resourceName: '蓝方',
          selectable: false,
          children: [],
        },
      ]
      this.roomInfo.roomData.forEach((item) => {
        zzbzllTreeData[item.sdzy.type].children.push(item.sdzy)
      })
      return zzbzllTreeData
    },
    zzbzllSelectedFd() {
      if (this.zzbzll.selectedKeys.length === 0) {
        return null
      }
      return this.roomInfo.roomData.find((item) => item.sdzy.id === this.zzbzll.selectedKeys[0])
    },
    rightRows() {
      switch (this.rightViewer) {
        case 'blbz':
          return [8, 1, 1]
        case 'jcsx':
          return [1, 8, 1]
        case 'xdrw':
          return [1, 1, 8]
        default:
          return [4, 3, 3]
      }
    },
    blbzShowKeys() {
      return this.zzbzllSelectedFd?.orgPostList.map((item) => item.orgId) || []
    },
    showBlbzCheckedTreeData() {
      const target = []
      this.getTree(target, this.blbz.treeData, this.blbzShowKeys)
      return target
    },
    jcsxModelData() {
      return this.zzbzllSelectedFd?.jbxx || {}
    },
    xdrwActionList() {
      return this.zzbzllSelectedFd?.scenarioTasks || []
    },
  },
  created() {
    this.roomId = this.$route.params.roomId
    this.roomName = this.$route.params.roomName
    this.scenarioId = this.$route.params.scenarioId
    this.scenarioName = this.$route.params.scenarioName
    this.getBlbzTreeData()
  },
  mounted() {
    this.cesium = new window.MyCesium('scene-cesium-container')
    this.getScenarioDetail()
    this.initWebsocket()
    window.addEventListener('beforeunload', (e) => {
      this.closeWebsocket()
      return true
    })
  },
  methods: {
    getTree(target, treeData, showKeys) {
      treeData.forEach((item) => {
        const newChildren = []
        if (item.children && item.children.length > 0) {
          this.getTree(newChildren, item.children, showKeys)
        }
        if (newChildren.length > 0 || showKeys.includes(+item.key)) {
          target.push({ ...item, children: newChildren })
        }
      })
    },

    async getScenarioDetail() {
      try {
        const res = await getAction(`/baseData/scenario/${this.scenarioId}`)
        const {
          leftUpLng,
          leftUpLat,
          rightUpLng,
          rightUpLat,
          rightBottomLng,
          rightBottomLat,
          leftBottomLng,
          leftBottomLat,
        } = res.data
        this.cesium.setClientByAllCorner(
          [+leftUpLng, +leftUpLat],
          [+rightUpLng, +rightUpLat],
          [+rightBottomLng, +rightBottomLat],
          [+leftBottomLng, +leftBottomLat]
        )
      } catch (error) {
        console.log(error)
      }
    },
    initWebsocket() {
      this.ws = new window.MyWebsocket(`/ws/${this.scenarioId}/${this.roomId}`, (error, response) => {
        if (error) return this.$message.error(error.message)
        switch (response.cmdType) {
          case 'update_time':
            this.roomInfo.remainTimeStr = response.data.update_time_str
            this.roomInfo.remainTime = response.data.remain_time
            this.roomInfo.duringTime = response.data.during_time
            break
          case 'path_init':
            this.cesium.drawRouteByCoordinates(response.data.points, response.data.resourceId, ['red', 'blue'][response.data.teamType])
            break
          case 'path_update':
            this.cesium.movePlotByCoordinates(response.data.resourceId, response.data.points)
            break
          case 'editScenarioInfo':
            if (this.initial === false) {
              this.roomInfo.roomData = JSON.parse(response.data)
              this.initPlots()
              this.initial = true
            }
            break
          case 'updScenarioInfo':
            {
              const data = JSON.parse(response.data)
              const targetIndex = this.roomInfo.roomData.findIndex((item) => item.sdzy.id === data.sdzy.id)
              this.$set(this.roomInfo.roomData, targetIndex, data)
            }
            break
          default:
            // console.log(response.cmdType, response.data)
            break
        }
      })
      // 初始化数据
      this.ws.send({ cmdType: 'editScenarioInfo' })
      // 初始化路径
      this.ws.send({ cmdType: 'get_init_path' })
    },
    closeWebsocket() {
      this.ws && this.ws.close()
      this.ws = null
    },

    async getBlbzTreeData() {
      try {
        const res = await getAction('/tree/organization')
        this.blbz.treeData = res.data
      } catch (error) {
        console.log(error)
      }
    },

    initPlots() {
      this.roomInfo.roomData.forEach((item) => {
        if (item.sdzy.lng && item.sdzy.lat) {
          this.cesium.addPlotByLonLat(item.sdzy.imgBase64, { lon: +item.sdzy.lng, lat: +item.sdzy.lat }, item.sdzy.id)
        }
      })
    },

    handleSelectZzbzll(selectedKeys, { node }) {
      this.cesium.setClientByCenter({
        longitude: +this.zzbzllSelectedFd.sdzy.lng,
        latitude: +this.zzbzllSelectedFd.sdzy.lat,
      })
    },
  },
}
</script>

<style lang="less" scoped>
.page-scene {
  height: 100%;
  color: #ffffff;
  .page-scene-header {
    height: 50px;
    background-color: #0a2a3d;
    padding: 0 20px;
    .page-scene-title {
      color: #00d5fe;
      font-size: 18px;
      font-weight: bolder;
      letter-spacing: 2px;
    }
  }
  .page-scene-main {
    background-color: #022234;
  }
}
.ant-menu-horizontal {
  line-height: 30px;
}
.scene-cesium-container {
  width: 100%;
  height: 100%;
  overflow: hidden;
}
::v-deep {
  .distance-legend {
    left: 320px;
  }
  .compass {
    right: 320px;
  }
  .navigation-controls {
    right: 350px;
  }
}
.simulation-tree::v-deep {
  color: #a1c2d0;
  li .ant-tree-node-content-wrapper {
    color: #a1c2d0;
  }
  li .ant-tree-node-content-wrapper.ant-tree-node-selected {
    background-color: #bae7ff44;
  }
  li .ant-tree-node-content-wrapper:hover {
    background-color: #bae7ff22;
  }
}
</style>