diff --git a/src/i18n/langs/en/global.js b/src/i18n/langs/en/global.js
index 949386fa2..fa6b46629 100644
--- a/src/i18n/langs/en/global.js
+++ b/src/i18n/langs/en/global.js
@@ -204,5 +204,6 @@ export default {
     perpetual: 'perpetual',
     buyingTips: 'Function upgrade, stay tuned!',
     permissionAllNum:'Total permissions',
-    set: 'Set'
+    set: 'Set',
+    joinNewRoom: 'Join new room'
 };
diff --git a/src/i18n/langs/en/trainRoom.js b/src/i18n/langs/en/trainRoom.js
index c27daee2c..238099021 100644
--- a/src/i18n/langs/en/trainRoom.js
+++ b/src/i18n/langs/en/trainRoom.js
@@ -33,5 +33,7 @@ export default {
     plcGatewayOffline: '[PLC gateway offline]',
     uplinkPlatform: 'Uplink platform',
     downlinkPlatform: 'Downlink platform',
-    ibp:'IBP'
+    ibp:'IBP',
+    getGroupId: 'Get group Id',
+    groupId: 'Group id'
 };
diff --git a/src/i18n/langs/zh/global.js b/src/i18n/langs/zh/global.js
index 893759f07..42635d258 100644
--- a/src/i18n/langs/zh/global.js
+++ b/src/i18n/langs/zh/global.js
@@ -204,5 +204,6 @@ export default {
     perpetual: '永久',
     buyingTips: '功能升级中, 敬请期待!',
     permissionAllNum:'权限总数',
-    set: '设 置'
+    set: '设 置',
+    joinNewRoom: '加入新房间'
 };
diff --git a/src/i18n/langs/zh/trainRoom.js b/src/i18n/langs/zh/trainRoom.js
index 3987dd786..9c607e361 100644
--- a/src/i18n/langs/zh/trainRoom.js
+++ b/src/i18n/langs/zh/trainRoom.js
@@ -33,5 +33,7 @@ export default {
     plcGatewayOffline: '[PLC网关离线]',
     uplinkPlatform: '上行站台',
     downlinkPlatform: '下行站台',
-    ibp:'IBP'
+    ibp:'IBP',
+    getGroupId: '获取房间号',
+    groupId: '房间号'
 };
diff --git a/src/layout/components/Entry.vue b/src/layout/components/Entry.vue
index 8aef0b114..0bdab8b7c 100644
--- a/src/layout/components/Entry.vue
+++ b/src/layout/components/Entry.vue
@@ -23,14 +23,14 @@
         </el-dropdown>
         <span v-else style="color: white;">{{ $t(item.name) }}</span>
       </el-menu-item>
-      <deomon-list ref="deomonList" />
+      <deomon-list ref="deomonList" @enterQcode="qcodeEntry" />
       <qcode ref="qcode" />
     </div>
   </div>
 </template>
 
 <script>
-import DeomonList from '@/views/demonstration/deomonList';
+import DeomonList from '@/views/demonstration/deomonList/index_APP_TARGET';
 import Qcode from './Qcode';
 import { getSessionStorage } from '@/utils/auth';
 import LangStorage from '@/utils/lang';
diff --git a/src/layout/components/Qcode.vue b/src/layout/components/Qcode.vue
index 076a08d8a..282713f1b 100644
--- a/src/layout/components/Qcode.vue
+++ b/src/layout/components/Qcode.vue
@@ -1,7 +1,7 @@
 <template>
   <el-dialog v-dialogDrag :title="$t('global.chooseRoom')" :visible.sync="dialogShow" width="30%" center>
     <el-input v-model="input" :placeholder="$t('global.inputRoomNumber')" />
-    <el-checkbox v-model="isNewMap">是否新版地图房间</el-checkbox>
+    <el-checkbox v-if="!isShow" v-model="isNewMap">是否新版地图房间</el-checkbox>
     <span slot="footer" class="dialog-footer">
       <el-button @click="dialogShow = false">{{ $t('global.cancel') }}</el-button>
       <el-button v-loading="loading" :disabled="!input.length" type="primary" @click="comit">{{ $t('global.confirm') }}</el-button>
@@ -25,7 +25,7 @@ export default {
     },
     computed: {
         isShow() {
-            return process.env.NODE_ENV == 'development';
+            return process.env.VUE_APP_PRO === 'local';
         }
     },
     methods: {
@@ -38,7 +38,7 @@ export default {
         async comit() {
             try {
                 this.loading = true;
-                if (this.isNewMap) {
+                if (this.isNewMap || this.isShow) {
                     await getPermissionJointNew(`${this.input}`);
                 } else {
                     await getPermissionJoint(`${this.input}`);
diff --git a/src/scripts/GlobalPlugin.js b/src/scripts/GlobalPlugin.js
index 2a32b31d8..d767ae38c 100644
--- a/src/scripts/GlobalPlugin.js
+++ b/src/scripts/GlobalPlugin.js
@@ -39,11 +39,11 @@ Vue.prototype.$addWindowResizeListener = function(cb) {
 };
 
 Vue.prototype.$theme = new Theme();
-Vue.prototype.$messageBox = function(msge) {
+Vue.prototype.$messageBox = function(msge, title, type) {
     if (this.$confirm) {
-        this.$confirm(`${msge || this.$t('global.processFailure')}`, this.$t('global.tips'), {
+        this.$confirm(`${msge || this.$t('global.processFailure')}`, title || this.$t('global.tips'), {
             confirmButtonText: this.$t('global.confirm'),
-            type: 'warning',
+            type: type || 'warning',
             showCancelButton: false,
             center: true
         }).then(() => {
diff --git a/src/views/demonstration/deomonList/index.vue b/src/views/demonstration/deomonList/index_Common.vue
similarity index 100%
rename from src/views/demonstration/deomonList/index.vue
rename to src/views/demonstration/deomonList/index_Common.vue
diff --git a/src/views/demonstration/deomonList/index_HYD.vue b/src/views/demonstration/deomonList/index_HYD.vue
new file mode 100644
index 000000000..3683df2d8
--- /dev/null
+++ b/src/views/demonstration/deomonList/index_HYD.vue
@@ -0,0 +1,171 @@
+<template>
+  <el-dialog
+    v-dialogDrag
+    v-dialogLoading="pageLoading"
+    :title="title"
+    :visible.sync="show"
+    width="600px"
+    :before-close="doClose"
+    :z-index="2000"
+    :modal="false"
+    :close-on-click-modal="false"
+  >
+    <el-scrollbar wrap-class="scrollbar-wrapper" :style="{height: height+'px'}">
+      <el-tree
+        ref="tree"
+        node-key="group"
+        class="filter-tree"
+        default-expand-all
+        :data="trainingList"
+        :props="defaultProps"
+        :filter-node-method="filterNode"
+        :style="{height: height+'px'}"
+        @node-click="clickEvent"
+      >
+        <div slot-scope="{ node, data }" class="list-elem custom-tree-node">
+          <span v-if="data.state=='01'">{{ '['+data.mapName+']'+($t('global.trainingNotStart').replace('{name}', data.creator.nickName)) }}</span>
+          <span v-else>{{ '['+data.mapName+']'+($t('global.trainingHasStart').replace('{name}', data.creator.nickName)) }}</span>
+          <el-button
+            type="text"
+            size="mini"
+            @click="handleJoinRoom(data)"
+          >进入</el-button>
+        </div>
+      </el-tree>
+    </el-scrollbar>
+    <span
+      slot="footer"
+      class="dialog-footer"
+    >
+      <el-button v-loading="loading" type="primary" :disabled="!group" @click="handleJoin">{{ $t('global.joinNewRoom') }}</el-button>
+      <el-button @click="dialogShow = false">{{ $t('global.cancel') }}</el-button>
+    </span>
+  </el-dialog>
+</template>
+
+<script>
+import { getjointTrainList, getjointTraining, putJointTrainingSimulationEntrance } from '@/api/chat';
+import { getjointTrainListNew, putJointTrainingSimulationEntranceNew, getjointTrainingNew } from '@/api/jointTraining';
+import { getPublishMapInfo } from '@/api/jmap/map';
+import { launchFullscreen } from '@/utils/screen';
+
+export default {
+    name: 'DeomonList',
+    data() {
+        return {
+            dialogShow: false,
+            height: 120,
+            trainingList: [],
+            defaultProps: {
+                label: 'roomName'
+            },
+            group: '',
+            state: '',
+            mapId: '',
+            loading: false,
+            pageLoading: false
+        };
+    },
+    computed: {
+        show() {
+            return this.dialogShow;
+        },
+        title() {
+            return this.$t('global.synthesisTrainingTitle');
+        },
+        isWatch() {
+            return true;
+        },
+        isjoin() {
+            return true;
+        }
+    },
+    methods: {
+        filterNode(value, data) {
+            if (!value) return true;
+            return data.label.indexOf(value) !== -1;
+        },
+        clickEvent(obj, node, data) {
+            this.state = obj.state;
+            this.group = obj.group;
+            this.mapId = obj.mapId;
+        },
+        async doShow() {
+            try {
+                this.pageLoading = true;
+                this.dialogShow = true;
+                this.loading = false;
+                const resp = await getjointTrainListNew();
+                this.trainingList = resp.data || [];
+                this.$nextTick(() => {
+                    var training = this.trainingList[0] || {};
+                    if (training) {
+                        this.state = training.state;
+                        this.group = training.group;
+                        this.mapId = training.mapId;
+                        this.$refs.tree.setCurrentKey(this.group);
+                    }
+                });
+            } catch (e) {
+                console.error(e);
+            } finally {
+                this.pageLoading = false;
+            }
+        },
+        async doClose() {
+            this.dialogShow = false;
+        },
+        async handleJoinRoom(data) {
+            try {
+                const rest = await getPublishMapInfo(this.mapId);
+                await getjointTrainingNew(data.group);
+                if (data.state == '02') {
+                    launchFullscreen();
+                    const query = { lineCode: rest.data.lineCode, mapId: this.mapId, group: this.group, drawWay: true };
+                    await putJointTrainingSimulationEntranceNew(this.group);
+                    this.$router.push({ path: `/jointTrainingNew`, query: query });
+                } else if (data.state == '01') {
+                    const query = { group: this.group, drawWay: true };
+                    this.$router.push({ path: `/trainroom`, query: query });
+                }
+            } catch (e) {
+                console.error(e);
+            } finally {
+                this.loading = false;
+            }
+        },
+        handleJoin() {
+            this.$emit('enterQcode');
+            this.dialogShow = false;
+        }
+    }
+};
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+    /deep/ {
+        .el-dialog__body {
+            padding: 0px 30px !important;
+        }
+
+        .el-tree {
+            overflow: hidden !important;
+			.list-elem {
+				height: 30px;
+				line-height: 30px;
+			}
+        }
+
+        .el-tree-node.is-current>.el-tree-node__content {
+            background-color: #e4e3e3 !important;
+        }
+    }
+	.custom-tree-node {
+		flex: 1;
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		font-size: 14px;
+		padding-right: 8px;
+	}
+</style>
diff --git a/src/views/trainRoom/e-roles.vue b/src/views/trainRoom/e-roles.vue
index 29ff52ca7..546079d8b 100644
--- a/src/views/trainRoom/e-roles.vue
+++ b/src/views/trainRoom/e-roles.vue
@@ -92,7 +92,8 @@
     </div>
     <div class="roles__footer">
       <el-button v-if="userId == room.creatorId" style="margin-left: 10px" type="danger" :disabled="disabled" @click="handleExit">{{ $t('trainRoom.destroyRoom') }}</el-button>
-      <el-button v-if="userId == room.creatorId" style="margin-left: 10px" type="success" :disabled="disabled" @click="handlePostQrcode">{{ $t('trainRoom.generatingQRCode') }}</el-button>
+      <el-button v-if="userId == room.creatorId && !isLocal" style="margin-left: 10px" type="success" :disabled="disabled" @click="handlePostQrcode">{{ $t('trainRoom.generatingQRCode') }}</el-button>
+      <el-button v-if="userId == room.creatorId && isLocal" style="margin-left: 10px" type="success" :disabled="disabled" @click="handleGetGroup">{{ $t('trainRoom.getGroupId') }}</el-button>
       <template v-if="!starting">
         <el-button v-if="userId == room.creatorId" style="margin-left: 10px" type="primary" :disabled="disabled" @click="handleStart"> {{ $t('trainRoom.startSimulation') }}</el-button>
       </template>
@@ -169,6 +170,9 @@ export default {
         isXtyProject() {
             return getSessionStorage('project').endsWith('xty');
         },
+        isLocal() {
+            return 	process.env.VUE_APP_PRO === 'local';
+        },
         group() {
             return this.$route.query.group;
         },
@@ -436,6 +440,9 @@ export default {
                 this.disabled = false;
             });
         },
+        handleGetGroup() {
+            this.$messageBox(this.group, this.$t('trainRoom.groupId'), 'success');
+        },
         async handleBack() {
             try {
                 this.disabled = true;