综合演练仿真添加聊天窗口(未完成)

src/api/chat.js

@@ -285,3 +285,11 @@ export function realDeviceIsUsed(group, projectCode) {
         }
     });
 }
+
+// 获取仿真成员列表（新版地图）
+export function getSimulationMembersNew(group) {
+    return request({
+        url: `/simulation/${group}/members`,
+        method: 'get'
+    });
+}

src/scripts/ConstConfig.js

@@ -89,7 +89,7 @@ export default {
         ],
         roleTypeNew:[
             {label: '管理员', value: 'ADMIN', enLabel: 'Admin '},
-            // {label: '教员', value: 'Instructor', enLabel: 'Instructor '},
+            {label: '教员', value: 'Instructor', enLabel: 'Instructor '},
             {label: '行调', value: 'DISPATCHER', enLabel: 'Dispatcher '},
             {label: '行值', value: 'STATION_SUPERVISOR', enLabel: 'Attendant '},
             {label: '观众', value: 'AUDIENCE', enLabel: 'Audience '},

src/views/newMap/jointTrainingNew/chatBox.vue

@@ -0,0 +1,183 @@
+<template>
+  <div class="chatBox">
+    <div v-show="!minimize" class="chat-box">
+      <div :class="showMembers?'memberAnimate chat-box-members':'chat-box-members'">
+        <div class="chat-member-title">成员列表</div>
+        <div class="chat-member-list">
+          <div v-for="member in memberList" :key="member.id" class="each-chat-member">{{ member.role+'-'+member.name }}</div>
+        </div>
+      </div>
+      <div class="chat-box-main">
+        <div class="chat-box-header">
+          <div class="chat-box-header-title">聊天窗口</div>
+          <div class="minimality" @click="handleMinimality('min')">
+            <i class="el-icon-remove" />
+          </div>
+          <div class="showMembers" @click="handleMembers()">
+            <i class="el-icon-user-solid" />
+          </div>
+        </div>
+      </div>
+    </div>
+    <div v-show="minimize" class="reminder-drag minimize-box">
+      <div class="chat-title">聊天窗口</div>
+      <div class="minimality" @click="handleMinimality('max')">
+        <i class="el-icon-circle-plus" />
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import {getSimulationMembersNew} from '@/api/chat';
+import ConstConfig from '@/scripts/ConstConfig';
+import Cookies from 'js-cookie';
+export default {
+    name: 'ChatBox',
+    data() {
+        return {
+            minimize:false,
+            showMembers:false,
+            memberList:[]
+        };
+    },
+    methods:{
+        handleMinimality(data) {
+            if (data == 'min') {
+                this.minimize = true;
+            } else {
+                this.minimize = false;
+            }
+        },
+        handleMembers() {
+            if (this.showMembers) {
+                this.showMembers = false;
+            } else {
+                getSimulationMembersNew(this.$route.query.group).then(resp => {
+                    // this.memberList = netdata.data;
+                    let lastData = JSON.stringify(resp.data);
+                    const roleTypeList = ConstConfig.ConstSelect.roleTypeNew;
+                    roleTypeList.forEach(function(element) {
+                        const rolename = element.value;
+                        if (Cookies.get('user_lang') == 'en') {
+                            lastData = lastData.replace(new RegExp(rolename, 'g'), element.enLabel);
+                        } else {
+                            lastData = lastData.replace(new RegExp(rolename, 'g'), element.label);
+                        }
+                    });
+                    lastData = JSON.parse(lastData);
+                    this.memberList = lastData;
+
+                });
+                this.showMembers = true;
+            }
+        }
+    }
+};
+</script>
+<style lang="scss" scoped>
+.chatBox{
+  width: 400px;
+  height: 400px;
+  position: absolute;
+  padding-left:5px;
+  left: 0;
+  bottom:28px;
+}
+.chat-box{
+  width: 100%;
+  height: 100%;
+}
+.chat-box-header{
+    width: 100%;
+    height: 40px;
+    border-bottom: 1px #dedede solid;
+}
+.chat-box-header-title{
+  font-size: 15px;
+  margin-left: 15px;
+  display: inline-block;
+  margin-top: 10px;
+}
+.minimality {
+    float: right;
+    line-height: 40px;
+    margin-right: 10px;
+    cursor: pointer;
+}
+.chat-box-main{
+    position: absolute;
+    width: 100%;
+    left: 0;
+    height: 100%;
+    top: 0;
+    border-right: 1px #dedede solid;
+    z-index: 4;
+    background: #fff;
+    border-radius: 5px;
+    left:5px;
+}
+.chat-member-list{
+    margin-top: 13px;
+    font-size: 12px;
+    margin-left: 2px;
+}
+.each-chat-member{
+    margin-bottom: 10px;
+    width: 100%;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+.chat-box-members{
+    position: absolute;
+    width: 140px;
+    right: 0;
+    height: 100%;
+    background: #fff;
+    border-right: 1px #dedede solid;
+    border-radius: 0px 5px 5px 0px;
+    z-index: 2;
+    transition: transform 1s;
+    padding: 12px 11px 10px 16px;
+    font-size: 14px;
+}
+.chat-member-title{
+
+}
+.showMembers{
+    float: right;
+    line-height: 40px;
+    margin-right: 10px;
+    cursor: pointer;
+    font-size: 17px;
+}
+.memberAnimate{
+  transform: translateX(97%);
+}
+.minimize-box {
+    width: 97.5%;
+    height: 40px;
+    position: absolute;
+    left: 5px;
+    bottom: 0;
+    z-index: 222;
+    background: #fff;
+    border-radius: 5px;
+
+    .chat-title {
+        float: left;
+        font-size: 15px;
+        margin-left: 10px;
+        line-height: 40px;
+    }
+
+    .minimality {
+        float: right;
+        height: 40px;
+        line-height: 40px;
+        margin-right: 10px;
+        cursor: pointer;
+    }
+}
+
+</style>

src/views/newMap/jointTrainingNew/menuDemon.vue

@@ -1,5 +1,63 @@
 <template>
   <div>
+    <chat-box />
+    <!-- <div v-show="!minimize" class="reminder-drag">
+        <div v-if="userRole != '05' && userRole != ''">
+          <div class="tabs-roles">
+            <div
+              class="roles roles-first"
+              :class="activeName == 'first' ? 'roles-active':''"
+              @click="clickRoles('first')"
+            >角色
+            </div>
+            <div
+              class="roles"
+              :class="activeName == 'second' ? 'roles-active':''"
+              @click="clickRoles('second')"
+            >所有人
+            </div>
+            <div class="minimality" @click="handleMinimality('min')">
+              <i class="el-icon-remove" />
+            </div>
+          </div>
+          <div class="tabs-content">
+            <div v-show="activeName == 'first'">
+              <chart-view
+                ref="chatView"
+                :group="group"
+                :station-list="stationLists"
+                @showChatSpeak="showChatSpeak"
+                @showChat="showChat"
+                @showChatNone="showChatNone"
+              />
+            </div>
+            <div style="flex-grow: 1">
+              <chart-window
+                ref="chat"
+                :group="group"
+                :chat-show="chatShow"
+                :speaking="isSpeaking"
+                :is-show-auto="isShowAuto"
+                @handleChatShow="handleChatShow"
+                @handleChatList="handleChatList"
+              />
+            </div>
+          </div>
+        </div>
+        <div v-else>
+          <el-tabs v-model="activeName2" type="card">
+            <el-tab-pane label="所有人" name="second">
+              <chart-window :speaking="isSpeaking" :group="group" :is-show-auto="true" />
+            </el-tab-pane>
+          </el-tabs>
+        </div>
+      </div> -->
+    <!-- <div v-show="minimize" class="reminder-drag minimize-box">
+        <div class="chat-title">聊天窗口</div>
+        <div class="minimality" @click="handleMinimality('max')">
+          <i class="el-icon-circle-plus" />
+        </div>
+      </div> -->
     <div class="display-draft" :class="{'display-type-hb': $route.query.lineCode == '07' && $store.state.training.prdType=='01'}">
       <el-button-group>
         <el-button v-if="isProject" type="primary" @click="setRelDevice">{{ $t('joinTraining.connectRealDevices') }}</el-button>
@@ -8,7 +66,7 @@
           <el-button type="success" :disabled="isDisable" @click="selectBeginTime">{{ $t('joinTraining.drivingByPlan') }}</el-button>
           <el-button type="danger" :disabled="!isDisable" @click="end">{{ $t('joinTraining.exitPlan') }}</el-button>
         </template>
-        <el-button type="primary" @click="back">{{ $t('global.back') }}</el-button>
+        <el-button type="primary" :loading="backLoading" @click="back">{{ $t('global.back') }}</el-button>
       </el-button-group>
     </div>
     <qr-code ref="qrCode" />
@@ -19,6 +77,9 @@
 
 <script>
 import QrCode from '@/components/QrCode';
+// import ChartWindow from './chatWindow';
+// import ChartView from './chartView';
+import ChatBox from './chatBox';
 import SetTime from '@/views/newMap/displayNew/demon/setTime';
 import { ranAsPlan, exitRunPlan } from '@/api/simulation';
 import { exitFullscreen } from '@/utils/screen';
@@ -30,6 +91,9 @@ import RealDevice from './menuDraft/realDevice';
 export default {
     name: 'MenuDemonJoint',
     components: {
+        // ChartView,
+        // ChartWindow,
+        ChatBox,
         QrCode,
         SetTime,
         RealDevice
@@ -53,6 +117,7 @@ export default {
     data() {
         return {
             isDisable: false,
+            backLoading:false,
             timeNow: 0,
             remainingTime: 0,
             recordStep: 'BGSetting',
@@ -69,7 +134,7 @@ export default {
             activeName2: 'second',
             stationList: [],
             stationLists: [],
-            minimize: false
+            minimize: true
         };
     },
     computed: {
@@ -115,6 +180,7 @@ export default {
     },
     async mounted() {
         this.userId = this.$store.state.user.id;
+        this.backLoading = false;
         await this.initLoadPage();
     },
     beforeDestroy() {
@@ -151,35 +217,29 @@ export default {
             }
             this.activeName = active;
         },
-        handleMinimality(data) {
-            if (data == 'min') {
-                this.minimize = true;
-            } else {
-                this.minimize = false;
-            }
-        },
-        handleChatShow(data) {
-            if (!this.minimize) { // 最大化状态
-                if (this.activeName == 'first') {
-                    this.$refs.chatView.select(data.id);
-                    this.chatShow = false;
-                    this.isShowAuto = false;
-                    this.$refs.chat.handleTextList(data.conversationId);
-                } else {
-                    this.activeName = 'first';
-                    this.handleChatShow(data);
-                }
-            } else { // 最小化状态
-                this.minimize = false;
-                this.handleChatShow(data);
-            }
-        },
+
+        // handleChatShow(data) {
+        //     if (!this.minimize) { // 最大化状态
+        //         if (this.activeName == 'first') {
+        //             this.$refs.chatView.select(data.id);
+        //             this.chatShow = false;
+        //             this.isShowAuto = false;
+        //             this.$refs.chat.handleTextList(data.conversationId);
+        //         } else {
+        //             this.activeName = 'first';
+        //             this.handleChatShow(data);
+        //         }
+        //     } else { // 最小化状态
+        //         this.minimize = false;
+        //         this.handleChatShow(data);
+        //     }
+        // },
         // 切到未读消息并说话
-        showChatSpeak(data) {
-            this.chatShow = false;
-            this.isShowAuto = false;
-            this.$refs.chat.handleTextList(data.conversationId);
-        },
+        // showChatSpeak(data) {
+        //     this.chatShow = false;
+        //     this.isShowAuto = false;
+        //     this.$refs.chat.handleTextList(data.conversationId);
+        // },
         // 获取历史纪录list
         showChat(obj) {
             this.chatShow = false;
@@ -327,9 +387,11 @@ export default {
         },
         back() {
             this.$store.dispatch('training/over').then(() => {
+                this.backLoading = true;
                 putJointTrainingSimulationUserNew(this.group).then(() => {
                     this.$router.replace({ path: `/trainroom`, query: { lineCode: this.lineCode, group: this.group, drawWay: true } });
                     exitFullscreen();
+                    this.backLoading = false;
                 });
             });
         },
@@ -374,12 +436,6 @@ export default {
             color: #409EFF;
         }
 
-        .minimality {
-            float: right;
-            line-height: 40px;
-            margin-right: 10px;
-            cursor: pointer;
-        }
     }
 
     .tabs-content {
@@ -431,27 +487,6 @@ export default {
         }
     }
 
-    .minimize-box {
-        bottom: 10px;
-        width: 300px;
-        height: 40px;
-
-        .chat-title {
-            float: left;
-            font-size: 16px;
-            margin-left: 10px;
-            line-height: 40px;
-        }
-
-        .minimality {
-            float: right;
-            height: 40px;
-            line-height: 40px;
-            margin-right: 10px;
-            cursor: pointer;
-        }
-    }
-
     .display-draft {
         position: absolute;
         float: right;