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

<template>
  <div class="central-control-page" v-grid-box="{ columns: [1, 1], rows: ['331px', 1], gap: '20px' }">
    <ModuleWrapper title="系统模块" style="grid-column: 1 / 3">
      <div class="normal" v-grid-box="{ columns: [1, 1, 1, 1, 1] }">
        <div
          v-for="block in systemModules"
          :key="block.moduleCode"
          :class="['system-block', `system-${block.moduleStatus}`]"
          v-flex.v="['c', 'sb']"
        >
          <img class="icon" :src="systemIconMap[block.moduleCode]" alt="" />
          <div class="title">{{ block.moduleName }}</div>
          <div :class="['status', `status-${block.moduleStatus}`]">
            {{ systemStatusDesc[block.moduleStatus] }}
          </div>
        </div>
      </div>
    </ModuleWrapper>
    <ModuleWrapper v-if="!loadedScenario" title="全部想定" style="grid-column: 1 / 3">
      <div class="normal" v-flex.v="['c']" v-loading="loading">
        <div class="scenario-wrapper" v-grid-box="{ columns: [1, 1, 1, 1, 1], rows: [1, 1] }">
          <div v-for="item in scenarioList" :key="item.id" class="scenario-item">
            <img
              class="scenario-image"
              :src="item.image || '/mockData/68ab3707-2552-4b78-bfc0-cec3502ec62f.png'"
              alt=""
            />
            <div class="scenario-mask"></div>
            <div class="scenario-brief">
              <div class="scenario-name">{{ item.name }}</div>
              <div class="scenario-author">{{ item.author }}</div>
            </div>
            <div class="scenario-reload" title="载入想定" @click="handleLoadSenario(item)">
              <a-icon type="reload" />
            </div>
          </div>
        </div>
        <a-pagination
          v-model="pagination.current"
          :pageSize.sync="pagination.pageSize"
          :total="pagination.total"
          @change="getScenarioList"
        />
      </div>
    </ModuleWrapper>
    <ModuleWrapper v-if="loadedScenario" title="想定信息">
      <template #extra>
        <a-button type="primary" shape="circle" icon="close" @click="handleCloseSenario()" />
      </template>
      <div class="normal" v-flex.v>
        <div v-flex="['c', 'sb']" style="margin-bottom: 10px">
          <div v-flex="['c']">
            <div style="color: #92bacb">运行方式：</div>
            <a-select style="width: 240px" v-model="runningMode">
              <a-select-option value="1">人在回路</a-select-option>
              <a-select-option value="2">人不在回路</a-select-option>
            </a-select>
          </div>
          <div v-flex="['c']">
            <a-button type="primary" icon="caret-right">开始</a-button>
            <a-button type="primary" icon="pause">暂停</a-button>
            <a-button type="primary" icon="stop">中止</a-button>
            <a-button type="primary" icon="step-backward">快退X1</a-button>
            <a-button type="primary" icon="step-forward">快进X1</a-button>
          </div>
        </div>
        <div class="scenario-info-wrapper" v-flex.v>
          <a-radio-group v-model="radioType" button-style="solid">
            <a-radio-button value="xdsj">想定时间</a-radio-button>
            <a-radio-button value="xdqy">想定区域</a-radio-button>
            <a-radio-button value="xdsm">想定说明</a-radio-button>
          </a-radio-group>
          <a-row v-if="radioType === 'xdsj'">想定时间</a-row>
          <a-row v-if="radioType === 'xdqy'">想定区域</a-row>
          <a-row v-if="radioType === 'xdsm'" style="flex: 1; padding: 10px 16px; overflow-y: auto">
            <a-col :span="12" v-flex="['c']">
              <div>想定名称：</div>
              <div>{{ scenarioDetail.title }}</div>
            </a-col>
            <a-col :span="12" v-flex="['c']">
              <div>作者：</div>
              <div>{{ scenarioDetail.authorName }}</div>
            </a-col>
            <a-col :span="24">
              <div>想定说明：</div>
              <div class="xdsm-wrapper" v-html="scenarioDetail.description"></div>
            </a-col>
          </a-row>
        </div>
      </div>
    </ModuleWrapper>
    <ModuleWrapper v-if="loadedScenario" title="输入输出事件">
      <template #extra>
        <a-checkbox v-model="visible">显示</a-checkbox>
      </template>
      <div class="io-event-list" test="1" style="display: block">
        <div v-for="item in ioEventList" :key="item.id" class="io-event-item">
          <span style="margin-right: 20px">{{ item.eventTime }}</span>
          <span>{{ item.eventDesc }}</span>
        </div>
      </div>
    </ModuleWrapper>
  </div>
</template>

<script>
import { mapState } from 'vuex'

export default {
  name: 'SimulationSceneCentralControl',
  data() {
    return {
      scenarioList: [],
      loading: false,
      loadedScenario: '',
      pagination: {
        current: 1,
        pageSize: 10,
        total: 0,
      },

      runningMode: '1',
      radioType: 'xdsm',
      scenarioDetail: {
        title: '中印边界xxx作战',
        authorName: '周海鹏',
        description: `<div style="width: 640px">
          <h1>一、作战背景</h1>
          <p style="text-indent: 2em">
            由于印度一直受美国方面的指示试图想越过中印边界，试图打开突破口侵占我国领土。
          </p>
          <p style="text-indent: 2em">
            为了防御突发战争的爆发，亚东边防六团决定实施一次应对印度突然袭击的军事演习。
          </p>
          <img
            src="/mockData/68ab3707-2552-4b78-bfc0-cec3502ec62f.png"
            style="display: block; margin: 0 auto"
          />
          <div style="text-align: center">标绘</div>
          <h1>二、作战企图</h1>
          <p style="text-indent: 2em">
            现代战争的准备和实施必须有相应的后勤保障（包括武器装备及物资资源）、后勤保障
          </p>
          <p style="text-indent: 2em">制约着战略、战术目标的达成！</p>
          <h1>三、基本情况</h1>
        </div>`,
      },

      visible: false,
      ioEventList: [
        {
          id: '1',
          eventTime: '2021-06-26 11:50:35',
          eventDesc: '加载数据中，请稍后',
        },
        {
          id: '2',
          eventTime: '2021-06-26 11:50:36',
          eventDesc: '兵棋推演正式开始',
        },
        {
          id: '3',
          eventTime: '2021-06-26 11:53:10',
          eventDesc: '红方051型驱逐舰驶向蓝方A102目标，距离目标还有100海里，准备开火',
        },
        {
          id: '4',
          eventTime: '2021-06-26 11:54:11',
          eventDesc: '蓝方进入红方巡逻区，战斗机准备出动',
        },
        {
          id: '5',
          eventTime: '2021-06-26 11:54:19',
          eventDesc: '红方辽宁舰发现不明舰艇靠近，疑似其他国家干涉，启动预案二',
        },
        {
          id: '6',
          eventTime: '2021-06-26 11:54:56',
          eventDesc: '红方Chengdu J-20开始攻击蓝方飞机场',
        },
        {
          id: '7',
          eventTime: '2021-06-26 11:55:00',
          eventDesc: '蓝方预警机出动',
        },
      ],
    }
  },
  computed: {
    ...mapState({
      systemModules: (state) => state.simulation.systemModules,
      systemStatusMap: (state) => state.simulation.systemStatusMap,
      systemStatusDesc: (state) => state.simulation.systemStatusDesc,
      systemIconMap: (state) => state.simulation.systemIconMap,
      systemPathMap: (state) => state.simulation.systemPathMap,
    }),
  },
  mounted() {
    this.getScenarioList()
  },
  methods: {
    async getScenarioList() {
      try {
        this.loading = true
        const res = await this.$http({
          url: '/baseData/scenario/list',
          method: 'get',
          params: {
            pageNum: this.pagination.current,
            pageSize: this.pagination.pageSize,
          },
        })
        this.scenarioList = res.data.data
        this.pagination.total = res.data.totalCount
      } catch (error) {
        console.log(error)
      } finally {
        this.loading = false
      }
    },
    handleLoadSenario(item) {
      this.loadedScenario = item.id
    },
    handleCloseSenario() {
      this.loadedScenario = ''
    },
  },
}
</script>

<style lang="less" scoped>
.central-control-page {
  padding: 20px;
}
.system-block {
  border: 1px solid #06445f;
  background-color: #062e45;
  position: relative;
  padding-bottom: 32px;
  cursor: pointer;
  .icon {
    transform: translateY(calc(90px - 50%));
  }
  .title {
    color: #9cd3f5;
    font-size: 24px;
    line-height: 26px;
  }
  .status {
    position: absolute;
    right: 10px;
    top: 10px;
    padding: 8px 10px;
    font-size: 14px;
    line-height: 1;
    color: #ffffff;
  }
  .status-1 {
    background-color: #11b740;
  }
  .status-0 {
    background-color: #9d9d9d;
  }
}
.system-0 {
  cursor: not-allowed;
}
.system-1:hover {
  border-color: #00f2fe;
}

.scenario-wrapper {
  flex: 1;
  width: 100%;
  overflow: hidden;
  margin-bottom: 20px;
}
.scenario-item {
  position: relative;
  cursor: pointer;
  width: 100%;
  height: 100%;
  .scenario-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .scenario-mask {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
  }
  .scenario-brief {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 60px;
    background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 1));
    padding-left: 10px;
    .scenario-name {
      font-size: 20px;
      line-height: 36px;
    }
    .scenario-author {
      font-size: 12px;
      line-height: 24px;
    }
  }
  .scenario-reload {
    position: absolute;
    right: 20px;
    bottom: 10px;
    width: 40px;
    height: 40px;
    font-size: 40px;
    line-height: 1;
    display: none;
  }
  &:hover .scenario-reload {
    display: block;
  }
  .scenario-reload:hover {
    color: #00f2fe;
  }
}

.scenario-info-wrapper {
  flex: 1;
  border: 1px solid #06445f;
  background-color: #0f3b4f;
  overflow: auto;
  .ant-row {
    line-height: 26px;
    .xdsm-wrapper {
      background-color: #ffffff;
      color: #666666;
      padding: 8px 10px;
      p {
        margin-bottom: 0;
      }
    }
  }
  *::-webkit-scrollbar {
    display: none;
  }
}

.io-event-list {
  width: 100%;
  height: 100%;
  background-color: #082532;
  padding: 20px;
  overflow-y: scroll;
  display: block !important;
  .io-event-item {
    padding: 10px 0;
    font-size: 16px;
    line-height: 22px;
    color: #a1c2d0;
  }
}

.ant-btn + .ant-btn {
  margin-left: 8px;
}
</style>