剧本预览代码调整

src/store/modules/socket.js

@@ -29,15 +29,6 @@ function handle(state, data) {
     case 'Simulation_Script_Tip': // 仿真-聊天界面用户进出仿真消息
         handleSimulationScriptTipInfo(state, msg); // 用户进出仿真消息
         break;
-    case 'Simulation_Start_Conversation': // 综合演练仿真-聊天界面用户邀请其他人加入群聊
-        state.inviteOtherIntoChat = msg;
-        break;
-    case 'Simulation_Accept_Conversation': // 综合演练仿真-聊天界面用户接受被邀请
-        state.acceptInviteChat = msg;
-        break;
-    case 'Simulation_Exist_Conversation': // 综合演练仿真-聊天界面用户退出群聊发送消息
-        state.quitCoversition = msg;
-        break;
     case 'Simulation_PlayBack_Finish': // 竞赛裁判系统裁判员回放结束推送
         state.playBackFinish++; // 竞赛裁判系统裁判员回放结束推送
         break;
@@ -228,9 +219,6 @@ const socket = {
         simulationStart: '',	// 仿真-开始消息
         simulationOver:0, // 退出仿真推送消息
         simulationReset: 0, // 仿真-异常消息
-        inviteOtherIntoChat:{}, // 综合演练仿真-聊天界面用户邀请其他人加入群聊推送信息
-        acceptInviteChat:{}, // 综合演练仿真-聊天界面用户接受聊天邀请,
-        quitCoversition:{}, // 综合演练仿真-聊天界面用户退出群聊推送消息,
         // coversitionList:{}, // 历史仿真-用户消息列表
         inviteSimulationConversition: {}, // 仿真会话邀请消息
         acceptConversionInvite:{}, // 仿真会话成员接收邀请

src/views/newMap/chatView/chatBox.vue

@@ -54,7 +54,7 @@
             </div>
             <div v-else>
               <div class="chat-box-footer-tool" />
-              <!-- <el-button v-if="isButtonShow&&isCreate" size="mini" type="danger" class="chat-box-footer-quit" :loading="loading" @click="quitCoversition()">退出群聊</el-button> -->
+              <el-button v-if="isQuitShow" size="mini" type="danger" class="chat-box-footer-quit" :loading="loading" @click="quitConversition()">退出群聊</el-button>
               <el-button v-if="isStartRecord" class="chat-box-footer-send" size="mini" type="primary" :disabled="recordSending" @click="startRecording()">发送语音</el-button>
               <div v-if="scriptTip" class="scriptTip">{{ scriptTip }}</div>
             </div>
@@ -69,6 +69,8 @@
       </div>
     </div>
     <chat-setting ref="chatSetting" :form="form" @setSetting="setSetting" />
+    <!-- @getCoversitionList="getCoversitionList"  -->
+    <chat-tooltip ref="chatToolTip" :group="group" :conversition-id="conversitionId" :invite-user-name="inviteUserName" />
   </div>
 </template>
 <script>
@@ -76,14 +78,16 @@ import ChatSetting from './chatSetting';
 import ChatMemberList from './chatMemberList';
 import ChatContent from './chatContent';
 import RecordRTC from 'recordrtc';
-// , overSimulationConversition, getAllConversition
+import ChatTooltip from './chatTooltip';
-import {sendSimulationConversition, startConversition} from '@/api/chat';
+// getAllConversition
+import {sendSimulationConversition, startConversition, overSimulationConversition} from '@/api/chat';
 export default {
     name:'ChatBoxDraft',
     components:{
         ChatSetting,
         ChatMemberList,
-        ChatContent
+        ChatContent,
+        ChatTooltip
     },
     props:{
         isShow:{
@@ -117,6 +121,14 @@ export default {
         isStartRecord:{
             type:Boolean,
             required:true
+        },
+        isQuitShow:{
+            type:Boolean,
+            required:true
+        },
+        inviteUserName:{
+            type:String,
+            required:true
         }
     },
     data() {
@@ -302,7 +314,6 @@ export default {
                 this.loading = true;
                 startConversition(this.group, this.memberIdList).then(resp => {
                     if (resp.data) {
-                        // this.conversitionId = resp.data.id;
                         this.loading = false;
                         this.memberIdList = [];
                         this.userString = '';
@@ -313,33 +324,33 @@ export default {
                     this.dialogVisible = false;
                 });
             }
-            // this.createLoading = true;
+        },
-            // startConversition(this.group, this.memberIdList).then(resp => {
+        quitConversition() {
-            //     this.conversitionId = resp.data.id;
+            this.loading = true;
-            //     this.messageList = [];
+            overSimulationConversition(this.group, this.conversitionId).then(resp => {
-            //     this.privateMessageList = [];
+                this.$emit('resetCoversition');
-            //     this.userString = '';
+                this.loading = false;
-            //     this.isConversitionCreator = true;
+            }).catch(() => {
-            //     this.$message.success('创建会话成功！');
+                this.$message.error('退出会话失败！');
-            //     this.createLoading = false;
+                this.loading = false;
-            // }).catch((error) => {
+            });
-            //     this.$message.error(error.code == '3005' ? '创建会话失败:仿真会话成员忙线中！' : '创建仿真失败！');
+        },
-            //     this.createLoading = false;
+        inviteMember() {
-            // });
+            this.$refs.chatToolTip.doShow();
         }
     }
 };
 </script>
 <style lang="scss" scoped>
-// .chat-box-footer-quit{
+.chat-box-footer-quit{
-//     font-size: 12px;
+    font-size: 12px;
-//     padding: 5px 15px;
+    padding: 5px 15px;
-//     color: #fff;
+    color: #fff;
-//     float: left;
+    float: left;
-//     margin-left: 10px;
+    margin-left: 10px;
-//     margin-bottom: 10px;
+    margin-bottom: 10px;
-//     cursor: pointer;
+    cursor: pointer;
-// }
+}
 .chatBox{
   width: 503px;
   position: absolute;

src/views/newMap/chatView/chatContent.vue

@@ -120,7 +120,7 @@ export default {
     display: inline-block;
 }
 .userHeader{margin-bottom: 2px;}
-.userName{font-size: 12px;display:inline-block;}
+.userName{font-size: 12px;display:inline-block;margin-right:10px;}
 .userChatTime{font-size: 12px;display:inline-block;}
 .userBubble{
     max-width: 200px;

src/views/newMap/chatView/chatTooltip.vue

@@ -0,0 +1,95 @@
+<template>
+  <div v-show="dialogVisible" class="chatTooltipAll">
+    <div class="chatTooltip">
+      <div class="chatTooltipHeader">
+        {{ inviteUserName }} 邀请您加入会话！
+      </div>
+      <div class="chatTooltipBootom">
+        <div class="create-group-bottom">
+          <el-button :loading="loading" size="small" type="primary" @click="doCreate">接受</el-button>
+          <el-button size="small" @click="doClose">拒绝</el-button>
+        </div>
+      </div>
+    </div>
+  </div>
+
+</template>
+<script>
+import {acceptConversitionInvite} from '@/api/chat';
+export default {
+    name:'ChatTooltip',
+    props: {
+        group: {
+            type: String,
+            required: true
+        },
+        inviteUserName:{
+            type: String,
+            required: true
+        },
+        conversitionId:{
+            type: String,
+            required: true
+        }
+    },
+    data() {
+        return {
+            dialogVisible:false,
+            loading:false
+        };
+    },
+    // {"conversationId":"22e10b17-7a6c-4b1b-8724-f87fb2053b76","from":{"id":"17","userId":"75","name":"赵",
+    // "role":"STATION_SUPERVISOR","deviceType":"STATION","deviceCode":"Station32955","deviceName":"世纪大道","online":true,"robot":false}
+    methods:{
+        doShow() {
+            this.loading = false;
+            this.dialogVisible = true;
+        },
+        doCreate() {
+            this.loading = true;
+            acceptConversitionInvite(this.group, this.conversitionId).then(res=>{
+                this.loading = false;
+                this.dialogVisible = false;
+                this.$emit('getCoversitionList');
+            }).catch(error=>{
+                this.$messageBox('接受邀请失败: ' + error.message);
+            });
+        },
+        doClose() {
+            this.dialogVisible = false;
+        }
+    }
+};
+</script>
+<style lang="scss" scoped>
+.chatTooltip{
+    position: absolute;
+    width: 290px;
+    left: 23%;
+    top: 42%;
+    z-index: 5;
+    background: #fff;
+    padding: 15px;
+    box-shadow: #969090 0px 0px 10px;
+    border-radius: 4px;
+    line-height: 20px;
+    transform: translateY(-50%);
+}
+.chatTooltipHeader{
+    margin-top:10px;
+    font-size:14px;
+}
+.chatTooltipBootom{
+    margin-top:10px;
+    text-align: center;
+    margin-bottom:10px;
+}
+.chatTooltipAll{
+    position:absolute;
+    width:100%;
+    height:100%;
+    left:0;
+    top:0;
+    z-index: 10;
+}
+</style>

src/views/newMap/displayNew/scriptPreviewChat.vue

@@ -9,7 +9,10 @@
     :chat-content-list="chatContentList"
     :script-tip="scriptTip"
     :is-start-record="isStartRecord"
+    :invite-user-name="inviteUserName"
+    :is-quit-show="isQuitShow"
     @setScriptTip="setScriptTip"
+    @resetCoversition="resetCoversition"
   />
 </template>
 <script>
@@ -45,22 +48,31 @@ export default {
             conversitionId:'',
             currentMemberList:[],
             chatContentList:[],
-            isStartRecord:false
+            isStartRecord:false,
+            inviteUserName:'',
+            createCoversition:false,
+            inviteUser:{},
+            isQuitShow:false
         };
     },
     computed:{
         isShow() {
-            return this.userRole != '' && this.userRole != 'ADMIN' && !this.isHasCoversition;
+            return this.userRole != '' &&
+             this.userRole != 'ADMIN' && this.userRole != 'AUDIENCE' &&
+            !this.isHasCoversition && this.createCoversition;
         }
     },
     watch:{
+        // 创建会话
         '$store.state.socket.createConversition':function(val) {
             this.scriptTip = '';
             if (this.memberData.length > 0) {
                 const member = this.memberData.find(member=>{ return member.id == val.creatorId; });
                 if (member && member.userId == this.$store.state.user.id) {
+                    // 当前用户创建的会话
                     this.isHasCoversition = true;
                     this.isStartRecord = true;
+                    this.isQuitShow = true;
                     this.conversitionId = val.id;
                     const memberList = [];
                     val.memberIds.forEach(id=>{
@@ -75,34 +87,43 @@ export default {
                     });
                     this.currentMemberList = memberList;
                 } else {
+                    // 如果是观众看所有人的会话
+                    if (this.userRole == 'AUDIENCE') {
+                        this.isHasCoversition = true;
                         this.currentMemberList = this.memberData;
                     }
                 }
-            //
+            }
-            // if (member.userId == this.$store.state.user.id) {
-            //     const memberList = [];
-            //     val.memberIds.forEach(id=>{
-            //         if (val.creatorId == id) {
-            //             memberList.push({memberId:id, connect:true});
-            //         } else {
-            //             memberList.push({memberId:id, connect:false});
-            //         }
-            //     });
-            //     this.conversitionMemberList = memberList;
-            //     this.privateMemberList = memberList;
-            //     this.commonConversation = false;
-            // }
-            // this.conversitionId = val.id;
         },
+        // 用户接受会话
         '$store.state.socket.acceptConversionInvite':function(val) {
+            let result = false;
+            // 更改成员列表里面的成员状态
             const memberList = this.currentMemberList.map(member => {
                 if (member.id == val.memberId) {
                     member.connect = true;
+                    result = true;
                 }
                 return member;
             });
+            // 如果该用户不在成员列表里面，就动态加进去（当前会话）
+            if (!result && this.conversitionId) {
+                const member = this.memberData.find(member=>{ return member.id == val.memberId; });
+                if (member) {
+                    member.connect = true;
+                    memberList.push(member);
+                    // 如果是当前的用户
+                    if (member.userId == this.$store.state.user.id) {
+                        memberList.push(this.inviteUser);
+                        this.inviteUser = {};
+                        this.isStartRecord = true;
+                        this.isQuitShow = true;
+                    }
+                }
+            }
             this.currentMemberList = memberList;
         },
+        // 剧本提示
         '$store.state.socket.simulationScriptTip':function(val, old) {
             if (val) {
                 if (val.type == 'Conversation') {
@@ -119,6 +140,7 @@ export default {
                     this.scriptTip = '请结束当前会话';
                 } else if (val.type == 'Start_Conversation' ) {
                     const inviteMember = [];
+                    this.createCoversition = true;
                     val.conversationMemberIds.forEach(id=>{
                         if (val.memberId != id) {
                             inviteMember.push((this.memberData.find(member=>{ return member.id == id; }) || {label:''}).label );
@@ -128,20 +150,18 @@ export default {
                 }
             }
         },
+        // 会话聊天消息
         '$store.state.socket.conversationInfo':function (val, old) { //  仿真聊天
             const simulationText = this.$store.state.socket.conversationInfo;
-            if (this.conversitionId == val.id && val.messageType == 'MESSAGE') {
+            if (val.messageType == 'MESSAGE' && (this.conversitionId == val.id || this.userRole == 'AUDIENCE')) {
                 this.chatContentList.push(this.addContent(simulationText.message));
-                // this.scrollTop();
-            } else {
-                if (!simulationText.all && val.messageType == 'MESSAGE') {
-                    this.chatContentList.push(this.addContent(simulationText.message));
-                }
             }
         },
+        // 剧本执行完成消息
         '$store.state.socket.scriptFinish':function(val, old) {
             this.$message('剧本执行完成');
         },
+        // 退出会话消息
         '$store.state.socket.overConversition': function (val) {
             if (val.id === this.conversitionId) {
                 this.conversitionId = '';
@@ -151,6 +171,17 @@ export default {
                 this.isHasCoversition = false;
                 this.isStartRecord = false;
             }
+        },
+        // 邀请会话的消息
+        '$store.state.socket.inviteSimulationConversition':function(val) {
+            const member = this.memberData.find(member=>{ return member.id == val.creatorId; });
+            if (member) {
+                this.inviteUserName = member.label;
+                this.conversitionId = val.id;
+                member.connect = true;
+                this.inviteUser = member;
+                this.$refs.chatbox.inviteMember();
+            }
         }
     },
     methods:{
@@ -170,6 +201,19 @@ export default {
                 text.message = simulationText.content;
             }
             return text;
+        },
+        resetCoversition() {
+            this.conversitionId = '';
+            this.scriptTip = '';
+            this.isHasCoversition = false;
+            this.currentMemberList = [];
+            this.chatContentList = [];
+            this.isStartRecord = false;
+            this.inviteUserName = '';
+            this.createCoversition = false;
+            this.inviteUser = {};
+            this.isQuitShow = false;
+
         }
     }