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', 'flex-c', 'ai-c', 'jc-sb', `system-${block.moduleStatus}`]"
        >
          <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 flex-c ai-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 flex-c">
        <div class="flex ai-c jc-sb" style="margin-bottom: 10px">
          <div class="flex ai-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 class="flex ai-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 flex-c">
          <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-show="radioType === 'xdsj'">
            <a-col :span="24">
              <div>想定当前时间：</div>
              <div>
                <a-date-picker :value="scenarioDetail.planDate" valueFormat="YYYY-MM-DD" style="width: 100%" />
                <a-time-picker :value="scenarioDetail.planTime" valueFormat="HH:mm:ss" style="width: 100%" />
              </div>
            </a-col>
            <a-col :span="24">
              <div>想定开始时间：</div>
              <div>
                <a-date-picker :value="scenarioDetail.startDate" valueFormat="YYYY-MM-DD" style="width: 100%" />
                <a-time-picker :value="scenarioDetail.startTime" valueFormat="HH:mm:ss" style="width: 100%" />
              </div>
            </a-col>
            <a-col :span="24">
              <div>想定持续时间：</div>
              <div>
                <DurationPicker v-model="scenarioDetail.continueTime" />
              </div>
            </a-col>
            <a-col :span="24">
              <div>想定消耗时间：</div>
              <div>
                <DurationPicker v-model="scenarioDetail.wasterTime" />
              </div>
            </a-col>
          </a-row>
          <div v-show="radioType === 'xdqy'" class="flex-1 flex">
            <div style="width: 150px">
              <div>经纬度坐标</div>
              <div>左上</div>
              <a-input v-model="scenarioDetail.leftUpLon" style="width: 100%" />
              <a-input v-model="scenarioDetail.leftUpLat" style="width: 100%" />
              <div>右上</div>
              <a-input v-model="scenarioDetail.rightUpLon" style="width: 100%" />
              <a-input v-model="scenarioDetail.rightUpLat" style="width: 100%" />
              <div>右下</div>
              <a-input v-model="scenarioDetail.rightDownLon" style="width: 100%" />
              <a-input v-model="scenarioDetail.rightDownLat" style="width: 100%" />
              <div>左下</div>
              <a-input v-model="scenarioDetail.leftDownLon" style="width: 100%" />
              <a-input v-model="scenarioDetail.leftDownLat" style="width: 100%" />
            </div>
            <div class="flex-1" style="position: relative">
              <div id="jwd-cesium" style="width: 100%; height: 100%"></div>
              <div style="position: absolute; left: 0; top: 0; width: 100%; height: 100%"></div>
            </div>
          </div>
          <a-row v-show="radioType === 'xdsm'" style="flex: 1; padding: 10px 16px; overflow-y: auto">
            <a-col :span="12" class="flex ai-c">
              <div>想定名称：</div>
              <div>{{ scenarioDetail.planName }}</div>
            </a-col>
            <a-col :span="12" class="flex ai-c">
              <div>作者：</div>
              <div>{{ scenarioDetail.author }}</div>
            </a-col>
            <a-col :span="24">
              <div>想定说明：</div>
              <div class="xdsm-wrapper">
                <WangEditor v-model="scenarioDetail.planDesc" />
                <!-- <iframe v-html="scenarioDetail.planDesc" frameborder="0"></iframe> -->
              </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">
        <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 { mapActions, mapState } from 'vuex'

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

      runningMode: '1',
      radioType: 'xdsj',
      scenarioDetail: {},
      cesium: null,

      visible: false,
      ioEventList: [
        {
          id: '1',
          eventTime: '2021-06-26 11:50:35',
          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,
    }),
  },
  created() {
    this.getSystemModules()
    this.getScenarioList()
  },
  methods: {
    ...mapActions(['getSystemModules']),
    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
      }
    },
    async handleLoadSenario(item) {
      try {
        const res = await this.$http({
          url: `/baseData/scenario/${item.id}`,
          method: 'get',
        })
        this.scenarioDetail = JSON.parse(res.data.content)
        console.log('----', this.scenarioDetail)
        this.loadedScenario = item.id
        this.$nextTick(() => {
          this.initCesium()
        })
      } catch (error) {
        console.log(error)
      }
    },
    initCesium() {
      const { leftUpLat, rightUpLat, rightDownLat, leftDownLat, leftUpLon, rightUpLon, rightDownLon, leftDownLon } =
        this.scenarioDetail
      const centerLon = (leftUpLon + rightUpLon + rightDownLon + leftDownLon) / 4
      const centerLat = (leftUpLat + rightUpLat + rightDownLat + leftDownLat) / 4
      this.cesium = new window.MyCesium('jwd-cesium', { center: [centerLon, centerLat] })

      this.cesium.setViewerByAllCorner(
        [leftUpLon, leftUpLat],
        [rightUpLon, rightUpLat],
        [rightDownLon, rightDownLat],
        [leftDownLon, leftDownLat]
      )
    },
    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;
  .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;
    }
  }
  *::-webkit-scrollbar {
    display: none;
  }
  ::v-deep {
    .ant-calendar-picker-input,
    .ant-time-picker-input {
      background-color: #0b293a;
      border: solid 1px #1d5777;
      color: #ffffff;
    }
  }
  .ant-calendar-picker {
    color: #ffffff;
    margin: 5px 0;
  }
  .ant-time-picker {
    margin: 5px 0;
  }
  .ant-calendar-picker::v-deep {
    .anticon {
      color: #ffffff;
    }
  }
  .ant-calendar-picker:hover::v-deep {
    .anticon {
      background-color: transparent;
    }
  }
  .ant-time-picker::v-deep {
    .anticon {
      color: #ffffff;
    }
  }
  .ant-time-picker:hover::v-deep {
    .anticon {
      background-color: transparent;
    }
  }
  .ant-input {
    background-color: #0b293a;
    border: solid 1px #1d5777;
    color: #ffffff;
  }
}

.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>