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

<template>
  <Grid class="trainer-page" :columns="[1, 1]">
    <ModuleWrapper title="想定列表">
      <Flex fd="co" class="normal">
        <div class="scenario-list flex-1">
          <Flex v-for="item in scenario.listData" :key="item.id" ai="c" class="scenario-item">
            <div class="flex-1">
              <div class="scenario-name">【{{ item.id }}】{{ item.name }}</div>
              <Flex ai="c">
                <div class="scenario-author">{{ item.author }}</div>
                <div class="scenario-create-time">{{ item.createTime.replace('T', ' ') }}</div>
              </Flex>
            </div>
            <a-icon
              title="预设"
              type="setting"
              style="font-size: 30px; margin-right: 30px"
              @click="handleOpenSetting(item)"
            />
            <AddRoom @click="handleOpenAddRoomModal(item)" />
          </Flex>
        </div>
        <Flex ai="c" jc="c">
          <a-pagination
            v-model="scenario.pagination.pageNum"
            :total="scenario.pagination.total"
            :pageSize="scenario.pagination.pageSize"
            show-less-items
            :showTotal="(total) => `共${total}条`"
            @change="getScenarioList"
          />
        </Flex>
      </Flex>
    </ModuleWrapper>
    <ModuleWrapper title="房间列表">
      <Flex fd="co" class="normal">
        <Flex fw="w" ac="fs" class="room-list flex-1">
          <div class="room-item" v-for="item in room.listData" :key="item.id">
            <Flex class="room-card">
              <Flex fd="co" jc="c" class="room-info flex-1">
                <div class="room-name"><a-icon type="home" style="margin-right: 10px;" />{{ item.roomName }}</div>
                <div class="room-scenario-relation">想定编号：{{ item.scenarioId }}</div>
                <div class="room-create-time">{{ item.createTime.slice(0, 19).replace('T', ' ') }}</div>
              </Flex>
              <Flex class="room-enter" ai="c" title="开始训练" @click="handleEnterRoom(item)">
                <a-icon type="right" style="font-size: 20px" />
              </Flex>
            </Flex>
          </div>
        </Flex>
        <Flex ai="c" jc="c">
          <a-pagination
            v-model="room.pagination.pageNum"
            :total="room.pagination.total"
            :pageSize="room.pagination.pageSize"
            show-less-items
            :showTotal="(total) => `共${total}条`"
            @change="getRoomList"
          />
        </Flex>
      </Flex>
    </ModuleWrapper>
    <AntFormModal
      :visible.sync="roomModal.visible"
      :title="roomModal.title"
      :formItems="roomModal.formItems"
      :formRules="roomModal.formRules"
      :formData="roomModal.formData"
      :onSubmit="handleSubmitRoom"
      @success="handleSubmitRoomSuccess"
    ></AntFormModal>
  </Grid>
</template>

<script>
import AddRoom from './AddRoom.vue'
import { postAction } from '@/api/manage'

export default {
  name: 'SimulationSceneTrainer',
  components: {
    AddRoom,
  },
  data() {
    return {
      scenario: {
        listData: [],
        pagination: {
          total: 0,
          pageNum: 1,
          pageSize: 10,
        },
      },
      room: {
        listData: [],
        pagination: {
          total: 0,
          pageNum: 1,
          pageSize: 10,
        },
      },
      roomModal: {
        visible: false,
        title: '',
        mode: '',
        formItems: [{ label: '房间名称', prop: 'roomName', required: true }],
        formRules: {},
        formData: {},
      },
    }
  },
  created() {
    this.getScenarioList()
    this.getRoomList()
  },
  methods: {
    async getScenarioList() {
      try {
        const res = await this.$http({
          url: '/baseData/scenario/list',
          method: 'get',
          params: {
            pageNum: this.scenario.pagination.pageNum,
            pageSize: this.scenario.pagination.pageSize,
          },
        })
        this.scenario.listData = res.data.data
        this.scenario.pagination.total = res.data.totalCount
      } catch (error) {
        console.log(error)
      }
    },
    async getRoomList() {
      try {
        const res = await this.$http({
          url: '/scenario/room/list',
          method: 'get',
          params: {
            pageNum: this.room.pagination.pageNum,
            pageSize: this.room.pagination.pageSize,
          },
        })
        this.room.listData = res.data.data
        this.room.pagination.total = res.data.totalCount
      } catch (error) {
        console.log(error)
      }
    },
    handleOpenSetting(scenarioItem) {
      window.localStorage.setItem('scenarioId', scenarioItem.id)
      window.localStorage.setItem('scenarioRedirectUrl', 'SimulationSceneTrainer')
      this.$router.push({ name: 'SimulationSceneSceneEditing' })
    },
    handleOpenAddRoomModal(scenarioItem) {
      this.roomModal.title = '新建房间'
      this.roomModal.formData = {}
      this.roomModal.formData.scenarioId = scenarioItem.id
      this.roomModal.visible = true
    },
    handleSubmitRoom(formData) {
      return postAction('/scenario/room/save', formData)
    },
    handleSubmitRoomSuccess() {
      this.getRoomList()
    },
    handleEnterRoom(roomItem) {
      window.localStorage.setItem('trainerRoomId', roomItem.id)
      window.localStorage.setItem('trainerRoomName', roomItem.roomName)
      this.$router.push({ name: 'SimulationSceneTrainerMenu' })
    },
  },
}
</script>

<style lang="less" scoped>
.trainer-page {
  padding: 20px;
}
.scenario-item {
  margin: 0 10px;
  height: 10%;
  border-bottom: 1px solid #ffffff22;
  .scenario-name {
    font-size: 20px;
    font-weight: bolder;
    margin-left: -10px;
  }
  .scenario-author {
    font-size: 16px;
    margin-right: 16px;
  }
  .scenario-create-time {
    font-size: 14px;
    font-style: italic;
    color: #888888;
  }
}
.room-item {
  width: 50%;
  height: 20%;
  padding: 10px;
  .room-card {
    width: 100%;
    height: 100%;
    border-radius: 10px;
    border: 1px solid #00deff;
    .room-info {
      padding: 10px;
      border-right: 1px solid #00deff;
    }
    .room-name {
      font-size: 26px;
      font-weight: bolder;
    }
    .room-create-time {
      font-size: 14px;
      font-style: italic;
      color: #888888;
    }
    .room-enter {
      border-radius: 0 10px 10px 0;
      cursor: pointer;
      padding: 0 10px;
    }
    .room-enter:hover {
      background-color: #10475f;
    }
  }
}
::v-deep {
  .ant-pagination-total-text {
    font-size: 16px;
    color: #ffffff;
  }
}
</style>