coding

src/views/simulationScene/centralControl/index.vue

@@ -15,6 +15,32 @@
         </div>
       </Grid>
     </ModuleWrapper>
+    <ModuleWrapper title="全部房间" style="grid-column: 1 / 3">
+      <template #extra>
+        <a-button type="primary">新建房间</a-button>
+      </template>
+      <div class="normal flex-c ai-c" v-loading="room.loading">
+        <Grid class="room-wrapper" :columns="[1, 1, 1, 1, 1]" :rows="[1, 1]">
+          <div v-for="item in room.list" :key="item.id" class="room-item">
+            <img class="room-image" :src="item.image || '/mockData/68ab3707-2552-4b78-bfc0-cec3502ec62f.png'" alt="" />
+            <div class="room-mask"></div>
+            <div class="room-brief">
+              <div class="room-name">{{ item.name }}</div>
+              <div class="room-author">{{ item.author }}</div>
+            </div>
+            <div class="room-reload" title="进入房间" @click="handleJoinRoom(item)">
+              <a-icon type="reload" />
+            </div>
+          </div>
+        </Grid>
+        <a-pagination
+          v-model="room.pagination.current"
+          :pageSize.sync="room.pagination.pageSize"
+          :total="room.pagination.total"
+          @change="getRoomList"
+        />
+      </div>
+    </ModuleWrapper>
     <ModuleWrapper v-if="!loadedScenario" title="全部想定" style="grid-column: 1 / 3">
       <div class="normal flex-c ai-c" v-loading="loading">
         <Grid class="scenario-wrapper" :columns="[1, 1, 1, 1, 1]" :rows="[1, 1]">
@@ -159,6 +185,22 @@ export default {
   name: 'SimulationSceneCentralControl',
   data() {
     return {
+      ws: null,
+
+      room: {
+        list: [],
+        loading: false,
+        pagination: {
+          current: 1,
+          pageSize: 10,
+          total: 0,
+        },
+      },
+
+      scenario: {
+        list: [],
+      },
+
       scenarioList: [],
       loading: false,
       loadedScenario: '',
@@ -193,11 +235,42 @@ export default {
     }),
   },
   created() {
+    this.initWebsocket()
     this.getSystemModules()
+    this.getRoomList()
     this.getScenarioList()
   },
+  beforeDestroy() {
+    this.ws.close()
+  },
   methods: {
     ...mapActions(['getSystemModules']),
+    initWebsocket() {
+      this.ws = new window.MyWebsocket('/', (error, data) => {
+        if (error) return
+        console.log('----data----', data)
+      })
+    },
+    async getRoomList() {
+      try {
+        this.loading = true
+        const res = await this.$http({
+          url: '/baseData/room/list',
+          method: 'get',
+          params: {
+            pageNum: this.room.pagination.current,
+            pageSize: this.room.pagination.pageSize,
+          },
+        })
+        this.room.list = res.data.data
+        this.room.pagination.total = res.data.totalCount
+      } catch (error) {
+        console.log(error)
+      } finally {
+        this.loading = false
+      }
+    },
+    handleJoinRoom(item) {},
     async getScenarioList() {
       try {
         this.loading = true
@@ -295,6 +368,63 @@ export default {
   border-color: #00f2fe;
 }
 
+.room-wrapper {
+  flex: 1;
+  width: 100%;
+  overflow: hidden;
+  margin-bottom: 20px;
+}
+.room-item {
+  position: relative;
+  cursor: pointer;
+  .room-image {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+  .room-mask {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0, 0, 0, 0.5);
+  }
+  .room-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;
+    .room-name {
+      font-size: 20px;
+      line-height: 36px;
+    }
+    .room-author {
+      font-size: 12px;
+      line-height: 24px;
+    }
+  }
+  .room-reload {
+    position: absolute;
+    right: 20px;
+    bottom: 10px;
+    width: 40px;
+    height: 40px;
+    font-size: 40px;
+    line-height: 1;
+    display: none;
+  }
+  &:hover .room-reload {
+    display: block;
+  }
+  .room-reload:hover {
+    color: #00f2fe;
+  }
+}
+
 .scenario-wrapper {
   flex: 1;
   width: 100%;