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, index) in systemModules"
          :key="index"
          :class="['system-block', `system-${systemStatusMap[block.statusKey]}`]"
          v-flex.v="['c', 'sb']"
        >
          <img class="icon" :src="block.icon" alt="" />
          <div class="title">{{ block.title }}</div>
          <div :class="['status', `status-${systemStatusMap[block.statusKey]}`]">
            {{ systemStatusDesc[systemStatusMap[block.statusKey]] }}
          </div>
        </div>
      </div>
    </ModuleWrapper>
    <ModuleWrapper title="想定信息">
      <template #extra>
        <a-button type="primary">加载想定</a-button>
      </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 title="输入输出事件">
      <template #extra>
        <a-checkbox v-model="visible">显示</a-checkbox>
      </template>
      <div class="io-event-list">
        <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 {
      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,
    }),
  },
  watch: {},
}
</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-running {
    background-color: #11b740;
  }
  .status-unstart {
    background-color: #9d9d9d;
  }
}
.system-unstart {
  cursor: not-allowed;
}
.system-running:hover {
  border-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;
  .io-event-item {
    padding: 10px 0;
    font-size: 16px;
    line-height: 22px;
    color: #a1c2d0;
  }
}

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