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

<template>
  <Grid class="instructor-page" :columns="[1, 2, 2]">
    <ModuleWrapper title="数据库子系统"> </ModuleWrapper>
    <ModuleWrapper title="想定列表">
      <template #extra>
        <a-icon title="新建想定" type="plus" style="font-size: 30px" @click="handleOpenAddScenarioModal()" />
      </template>
      <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="delete"
              style="font-size: 30px; margin-right: 30px; color: red"
              @click="handleDeleteScenario(item)"
            />
            <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="scenarioModal.visible"
      :title="scenarioModal.title"
      :formItems="scenarioModal.formItems"
      :formRules="scenarioModal.formRules"
      :formData="scenarioModal.formData"
      :onSubmit="handleSubmitScenario"
      @success="handleSubmitScenarioSuccess"
    ></AntFormModal>
    <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 { getAction, postAction } from '@/api/manage'

export default {
  name: 'SimulationSceneInstructor',
  components: {
    AddRoom,
  },
  data() {
    return {
      scenario: {
        listData: [],
        pagination: {
          total: 0,
          pageNum: 1,
          pageSize: 10,
        },
      },
      scenarioModal: {
        visible: false,
        title: '',
        mode: '',
        formItems: [
          { label: '想定名称', prop: 'name', required: true },         
          {
            label: '开始时间', prop: 'startTime', component: 'a-date-picker', options: {
              showTime: true,
              format: 'YYYY-MM-DD HH:mm:ss',
              valueFormat: 'YYYY-MM-DD HH:mm:ss'
            }
          },
          {
            label: '结束时间', prop: 'endTime', component: 'a-date-picker', options: {
              showTime: true,
              format: 'YYYY-MM-DD HH:mm:ss',
              valueFormat: 'YYYY-MM-DD HH:mm:ss'
            }
          },
          { label: '想定区域(东)', prop: 'right', required: true, options: { type: 'number' } },
          { label: '想定区域(西)', prop: 'left', required: true, options: { type: 'number' } },
          { label: '想定区域(南)', prop: 'down', required: true, options: { type: 'number' } },
          { label: '想定区域(北)', prop: 'up', required: true, options: { type: 'number' } },
        ],
        formRules: {},
        formData: {},
      },
      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)
      }
    },
    handleOpenAddScenarioModal() {
      this.scenarioModal.title = '新建想定'
      this.scenarioModal.formData = {}
      this.scenarioModal.visible = true
    },
    handleSubmitScenario(formData) {
      const params = {
        name: formData.name,
        startTime:formData.startTime,
        endTime:formData.endTime,
        leftUpLng: formData.left,
        leftUpLat: formData.up,
        rightUpLng: formData.right,
        rightUpLat: formData.up,
        leftBottomLng: formData.left,
        leftBottomLat: formData.down,
        rightBottomLng: formData.right,
        rightBottomLat: formData.down,
      }
      return postAction('/baseData/scenario/save', params)
    },
    handleSubmitScenarioSuccess() {
      this.getScenarioList()
    },
    async handleDeleteScenario(scenarioItem) {
      try {
        await this.$confirm({ title: '温馨提示', content: '确定要删除该想定吗？' })
        const res = await getAction(`/baseData/scenario/remove/${scenarioItem.id}`)
        this.$message.success(res.message)
        this.getScenarioList()
      } catch (error) {
        console.log(error)
      }
    },
    handleOpenSetting(scenarioItem) {
      window.localStorage.setItem('scenarioId', scenarioItem.id)
      window.localStorage.setItem('scenarioName', scenarioItem.name)
      window.localStorage.setItem('scenarioRedirectUrl', 'SimulationSceneInstructor')
      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) {
      console.log(roomItem)
      window.localStorage.setItem('instructorRoomId', roomItem.id)
      window.localStorage.setItem('instructorRoomName', roomItem.roomName)
      window.localStorage.setItem('instructorScenarioId',roomItem.scenarioId)
      this.$router.push({ name: 'SimulationSceneInstructorSystemDisplay' })
    },
  },
}
</script>

<style lang="less" scoped>
.instructor-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>