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

<template>
  <Flex fd="co" class="page-model">
    <Flex ai="c" jc="sb" class="page-model-header">
      <span class="page-model-title">系统控制子系统</span>
      <span class="page-model-title">推演想定【{{ roomName }}-{{ scenarioName }}】</span>
      <span class="page-model-title">剩余 {{ roomInfo.remainTimeStr }}</span>
    </Flex>
    <Grid class="page-model-main flex-1 oh" :columns="['320px', 1, '320px']" :rows="['30px', 1]" gap="0px">
      <div class="tool-wrapper" style="grid-area: 1 / 1 / 2 / 4"></div>
      <div
        ref="model-cesium-container"
        class="model-cesium-container"
        id="model-cesium-container"
        style="grid-area: 2 / 1 / 3 / 4"
      ></div>
      <div class="pr zi1" style="grid-area: 2 / 1 / 3 / 2">
        <ModuleWrapper title="作战/保障力量" height="45%">
          <template #extra>
            <a-button type="text-primary" icon="sync" style="font-size: 20px" @click="getZzbzllTreeData()"></a-button>
          </template>
          <div class="normal" style="padding: 5px; overflow-y: auto">
            <a-tree
              class="simulation-tree"
              :treeData="zzbzll.treeData"
              :selectedKeys.sync="zzbzll.selectedKeys"
              :replaceFields="{ children: 'children', title: 'title', key: 'id' }"
              @select="handleSelectZzbzll"
            >
              <template #title="{ id, dataRef }">
                <a-dropdown :trigger="['contextmenu']">
                  <span>{{ dataRef.resourceName || dataRef.title }}</span>
                  <template #overlay>
                    <Flex>
                      <a-button
                        type="text-primary"
                        icon="edit"
                        title="修改名称"
                        @click="handleOpenEditZzbzllModal(id, dataRef)"
                      ></a-button>
                      <AntFormModal
                        :visible.sync="zzbzllModal.visible"
                        :title="zzbzllModal.title"
                        :formItems="zzbzllModal.formItems"
                        :formRules="zzbzllModal.formRules"
                        :formData="zzbzllModal.formData"
                        :onSubmit="handleSubmitZzbzll"
                        @success="handleSubmitZzbzllSuccess"
                      ></AntFormModal>
                      <a-button
                        type="text-danger"
                        icon="delete"
                        title="删除"
                        @click="handleDeleteZzbzll(id, dataRef)"
                      ></a-button>
                    </Flex>
                  </template>
                </a-dropdown>
              </template>
            </a-tree>
          </div>
        </ModuleWrapper>
        <ModuleWrapper height="55%">
          <template #title>
            <a-radio-group v-model="qd.qdlx" button-style="solid">
              <a-radio-button value="xqqd">需求清单</a-radio-button>
              <a-radio-button value="bzqd">保障清单</a-radio-button>
            </a-radio-group>
          </template>
          <div class="normal" style="padding: 5px">
            <a-table
              class="simulation-table-plain"
              rowKey="id"
              :columns="qd.qdColumns"
              :dataSource="qd.qdList"
              :pagination="false"
              :bordered="true"
            ></a-table>
          </div>
        </ModuleWrapper>
      </div>
      <div class="pr zi1" style="grid-area: 2 / 3 / 3 / 4">
        <ModuleWrapper title="兵力编组" height="30%">
          <template #extra>
            <a-button type="text-primary" icon="plus" @click="handleOpenBlbzModal()"></a-button>
            <a-modal
              v-model="blbzModal.visible"
              :title="'兵力编组-' + (blbz.modelData && (blbz.modelData.resourceName || blbz.modelData.title))"
              width="900px"
              :maskClosable="false"
              :destroyOnClose="true"
              @ok="handleSubmitBlbz()"
            >
              <Grid :columns="['300px', 1]" :rows="[1, 1]" style="height: 600px">
                <ModuleWrapper title="组织机构" style="grid-row: 1 / 3">
                  <a-tree
                    class="simulation-tree"
                    :treeData="blbzModal.treeData"
                    :checkable="true"
                    v-model="blbzModal.checkedKeys"
                    :selectedKeys.sync="blbzModal.selectedKeys"
                    @select="
                      () => ($refs['zzry-table'].commitAction('query'), $refs['zzzb-table'].commitAction('query'))
                    "
                  >
                  </a-tree>
                </ModuleWrapper>
                <ModuleWrapper title="组织人员">
                  <AntQueryTable
                    ref="zzry-table"
                    height="100%"
                    :queryConfig="blbzModal.zzry.queryConfig"
                    :tableConfig="blbzModal.zzry.tableConfig"
                    :pageConfig="blbzModal.zzry.pageConfig"
                    :showTool="blbzModal.zzry.showTool"
                  >
                  </AntQueryTable>
                </ModuleWrapper>
                <ModuleWrapper title="组织机构">
                  <AntQueryTable
                    ref="zzzb-table"
                    height="100%"
                    :queryConfig="blbzModal.zzzb.queryConfig"
                    :tableConfig="blbzModal.zzzb.tableConfig"
                    :pageConfig="blbzModal.zzzb.pageConfig"
                    :showTool="blbzModal.zzzb.showTool"
                  >
                  </AntQueryTable>
                </ModuleWrapper>
              </Grid>
            </a-modal>
          </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 height="70%">
          <template #title>
            <a-radio-group v-model="modelInfoType" button-style="solid">
              <a-radio-button value="jcsx">基础属性</a-radio-button>
              <a-radio-button value="zzxd">作战行动</a-radio-button>
              <a-radio-button value="bzrw">保障任务</a-radio-button>
            </a-radio-group>
          </template>
          <div class="normal" style="padding: 15px 0">
            <div style="height: 100%; padding: 0 15px; overflow-y: auto">
              <Jcsx v-if="modelInfoType === 'jcsx'" :scenarioId="scenarioId" :modelData="jcsx.data" />
              <Zzxd v-if="modelInfoType === 'zzxd'" :actionList="zzxd.data" />
              <BzTask v-if="modelInfoType === 'bzrw'" :scenarioId="scenarioId" :resourceid="resourceid" :type="type" />
            </div>
          </div>
        </ModuleWrapper>
      </div>
    </Grid>
  </Flex>
</template>

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

export default {
  name: 'SubsystemModel',
  components: {
    Jcsx,
    Zzxd,
    BzTask,
  },
  data() {
    return {
      ws: null,
      roomInfo: {
        remainTimeStr: '',
        remainTime: '',
        duringTime: '',
      },
      roomId: '',
      roomName: '',
      scenarioId: '',
      scenarioName: '',
      cesium: null,
      zzbzll: {
        treeData: [],
        selectedKeys: [],
      },
      zzbzllModal: {
        title: '修改名称',
        visible: false,
        formItems: [
          { label: '原名称', prop: 'originName', customRender: (text) => text },
          { label: '新名称', prop: 'resourceName', required: true },
        ],
        formRules: {},
        formData: {},
      },
      qd: {
        qdlx: 'xqqd',
        qdColumns: [
          {
            dataIndex: 'dj',
            title: '等级',
            width: '62px',
            align: 'center',
            customRender: (text) => ['', '紧急', '加急', '一般'][text],
            customCell: (record) => ({ style: { color: ['', '#ff3838', '#feba29', '#ffffff'][record.dj] } }),
          },
          { dataIndex: 'bzxq', title: '保障需求' },
        ],
        qdList: [
          { id: '1', dj: '1', bzxq: '500枚防空导弹、6辆装甲车' },
          { id: '2', dj: '2', bzxq: '5吨汽油、100套军装' },
          { id: '3', dj: '3', bzxq: '15箱消炎药、6箱葡萄糖滴' },
          { id: '4', dj: '3', bzxq: '一吨饮用水' },
          { id: '5', dj: '3', bzxq: '1吨燃油、厨房抽烟机设备一' },
        ],
      },
      blbz: {
        modelData: null,
        treeData: [],
        checkedKeys: [],
      },
      blbzModal: {
        visible: false,
        treeData: [],
        checkedKeys: [],
        selectedKeys: [],
        zzry: {
          queryConfig: false,
          tableConfig: {
            table: {},
            immediate: false,
            query: () =>
              this.$http({
                url: `/baseData/fightPowerHierarchy/staff/${this.blbzModal.selectedKeys[0]}`,
                method: 'get',
              }),
            columns: [
              { dataIndex: 'serial' },
              { title: '岗位', dataIndex: 'name', width: 'auto', minWidth: 150 },
              { title: '岗位数量', dataIndex: 'number', type: 'number', width: 'auto', minWidth: 150 },
            ],
          },
          pageConfig: false,
          showTool: false,
        },
        zzzb: {
          queryConfig: false,
          tableConfig: {
            table: {},
            immediate: false,
            query: () =>
              this.$http({
                url: `/baseData/fightPowerHierarchy/weapon/${this.blbzModal.selectedKeys[0]}`,
                method: 'get',
              }),
            columns: [
              { dataIndex: 'serial' },
              { title: '装备名称', dataIndex: 'name', width: 'auto', minWidth: 150 },
              { title: '装备数量', dataIndex: 'number', type: 'number', width: 'auto', minWidth: 150 },
            ],
          },
          pageConfig: false,
          showTool: false,
        },
      },
      modelInfoType: 'jcsx',
      jcsx: {
        data: {
          team: {},
          person: {},
        },
      },
      zzxd: {
        data: [
          {
            id: '1',
            typeName: '机动',
            typeType: '1',
            beginDateTime: '2000-01-01 00:00:00',
            endDateTime: '2000-01-01 00:00:00',
            lon: '120',
            lat: '20',
          },
        ],
      },
    }
  },
  computed: {
    showBlbzCheckedTreeData() {
      const target = []
      this.getTree(target, this.blbz.treeData, this.blbz.checkedKeys)
      return target
    },
  },
  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.initWebsocket()

    window.addEventListener('beforeunload', (e) => {
      this.closeWebsocket()
      return true
    })
  },
  mounted() {
    this.cesium = new window.MyCesium('model-cesium-container')
    this.getZzbzllTreeData(true)
  },
  beforeDestroy() {
    this.closeWebsocket()
  },
  methods: {
    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
          default:
            break
        }
      })
    },
    closeWebsocket() {
      this.ws && this.ws.close()
      this.ws = null
    },
    getTree(target, treeData, checkedKeys) {
      treeData.forEach((item) => {
        const newChildren = []
        if (item.children && item.children.length > 0) {
          this.getTree(newChildren, item.children, checkedKeys)
        }
        if (newChildren.length > 0 || checkedKeys.includes(item.key)) {
          target.push({ ...item, children: newChildren })
        }
      })
    },
    async getZzbzllTreeData(initPlot = false) {
      try {
        const res = await postAction(`/scenario/resource/`, {
          scenarioId: this.scenarioId,
        })
        this.zzbzll.treeData = [
          {
            id: '0',
            title: '红方',
            selectable: false,
            children: res.data.filter((item) => item.type === 0),
          },
          {
            id: '1',
            title: '蓝方',
            selectable: false,
            children: res.data.filter((item) => item.type === 1),
          },
        ]
        if (initPlot) {
          this.initPlot(res.data)
        }
      } catch (error) {
        console.log(error)
      }
    },
    initPlot(plots) {
      plots.forEach((item) => {
        if (item.lng && item.lat) {
          this.cesium.addPlotByLonLat(item.imgBase64, { lon: +item.lng, lat: +item.lat }, item.id)
        }
      })
    },
    handleOpenEditZzbzllModal(id, data) {
      this.zzbzllModal.formData = { id, originName: data.resourceName || data.title }
      this.zzbzllModal.visible = true
      this.zzbzllModal.originData = data
    },
    handleSubmitZzbzll(formData) {
      return postAction('/scenario/resource/save', formData)
    },
    handleSubmitZzbzllSuccess() {
      this.$set(this.zzbzllModal.originData, 'resourceName', this.zzbzllModal.formData.resourceName)
    },
    async handleDeleteZzbzll(id, data) {
      try {
        await this.$confirm({ content: `确定删除${data.resourceName || data.title}？` })
        const res = await getAction(`/scenario/resource/remove/${id}`)
        this.$message.success(res.message)
        this.cesium.removePlotById(id)
        this.getZzbzllTreeData()
      } catch (error) {
        console.log(error)
      }
    },

    handleSelectZzbzll(selectedKeys, { node }) {
      this.cesium.setClientByCenter({ longitude: +node.dataRef.lng, latitude: +node.dataRef.lat })
      this.blbz.modelData = node.dataRef
      this.resourceid = node.dataRef.id
      this.type = node.dataRef.type
      this.getBlbzTreeData()
      this.getJcsxData()
    },
    async getBlbzTreeData() {
      try {
        const res = await getAction('/tree/organization')
        this.blbz.treeData = res.data
      } catch (error) {
        console.log(error)
      }
      try {
        const { type, id: resourceId, scenarioId } = this.blbz.modelData
        const res = await postAction('/scenarioOrgPost/getPost', { type, resourceId, scenarioId })
        this.blbz.checkedKeys = res.data
      } catch (error) {
        console.log(error)
      }
    },
    async handleOpenBlbzModal() {
      if (!this.blbz.modelData) {
        this.$message.error('未选择分队!')
        return
      }
      this.blbzModal.treeData = this.blbz.treeData
      this.blbzModal.checkedKeys = [...this.blbz.checkedKeys]
      this.blbzModal.visible = true
    },
    async handleSubmitBlbz() {
      try {
        const { type, id: resourceId, scenarioId } = this.blbz.modelData
        const res = await postAction('/scenarioOrgPost/batchSave', {
          type,
          resourceId,
          scenarioId,
          orgIdList: this.blbzModal.checkedKeys,
        })
        this.blbzModal.visible = false
        this.$message.success(res.message)
        this.getBlbzTreeData()
      } catch (error) {
        console.log(error)
      }
    },
    async getJcsxData() {
      try {
        const { type, id: resourceId, scenarioId } = this.blbz.modelData
        const res = await getAction('/statistic/info', { type, resourceId, scenarioId })
        this.jcsx.data = res.data
      } catch (error) {
        console.log(error)
      }
    },
  },
}
</script>

<style lang="less" scoped>
.page-model {
  height: 100%;
  color: #ffffff;
  .page-model-header {
    height: 50px;
    background-color: #0a2a3d;
    padding: 0 20px;
    .page-model-title {
      color: #00d5fe;
      font-size: 18px;
      font-weight: bolder;
      letter-spacing: 2px;
    }
  }
  .page-model-main {
    background-color: #022234;
  }
}
.model-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;
  }
}
.simulation-table-plain::v-deep {
  .ant-table {
    color: #a1c2d0;
  }
  .ant-table-body > table {
    border: none;
  }
  .ant-table-thead > tr > th {
    background-color: #083a52;
    color: #ffffff;
    border-bottom-color: #05628e;
    border-top: 1px solid #05628e;
    &:last-child {
      border-right-color: #05628e;
    }
    &:not(:last-child) {
      border-right-color: #05628e3b;
    }
    &:first-child {
      border-left: 1px solid #05628e;
    }
    &:not(:first-child) {
    }
  }
  .ant-table-tbody > tr > td {
    border-bottom-color: #064766;
    &:last-child {
      border-right-color: #064766;
    }
    &:not(:last-child) {
      border-right-color: #05628e3b;
    }
    &:first-child {
      border-left: 1px solid #064766;
    }
    &:not(:first-child) {
    }
  }
}
</style>