仿真聊天代码调整

src/views/newMap/displayNew/chatView/chatBox.vue

@@ -2,7 +2,7 @@
   <!-- v-quickMenuDrag  -->
   <div class="chatBox">
     <div v-if="!minimize" class="chat-box">
-      <chat-member-list ref="chatMemberList" :group="group" @addCoversition="addCoversition" />
+      <chat-member-list ref="chatMemberList" :group="group" :current-coversition="currentCoversition" @addCoversition="addCoversition" />
       <div class="chat-box-main">
         <chat-coversition-list ref="chatCoversitionList" @setCurrentCoversition="setCurrentCoversition" @setHeadTitle="setHeadTitle" />
         <div class="chat-window">
@@ -11,8 +11,8 @@
             <div class="minimality" @click="handleMinimality('min')">
               <i class="el-icon-remove" />
             </div>
-            <div v-show="currentCoversition.group==undefined?true:currentCoversition.group" class="showMembers" @click="handleMembers()">
-              <i class="el-icon-user-solid" />
+            <div v-show="currentCoversition.all==undefined?true&&isShow:currentCoversition.all&&isShow" class="chat-createGroup" @click="handleCreateGroup()">
+              <i class="el-icon-plus" style="font-weight: bolder;" />
             </div>
             <div class="chat-setting" @click="handleSetting()">
               <i class="el-icon-s-tools" />
@@ -43,12 +43,14 @@
       </div>
     </div>
     <chat-setting ref="chatSetting" :form="form" @setSetting="setSetting" />
+    <chat-create-group ref="createGroup" :group="group" @addCoversition="addCoversition" />
   </div>
 </template>
 <script>
 import CMD from '@/scripts/cmdPlugin/CommandEnum';
 import ChatSetting from './chatSetting';
 import ChatContent from './chatContent';
+import ChatCreateGroup from './chatCreateGroup';
 import ChatMemberList from './chatMemberList';
 import ChatCoversitionList from './chatCoversitionList';
 import RecordRTC from 'recordrtc';
@@ -59,12 +61,17 @@ export default {
         ChatSetting,
         ChatContent,
         ChatMemberList,
-        ChatCoversitionList
+        ChatCoversitionList,
+        ChatCreateGroup
     },
     props: {
         group: {
             type: String,
             required: true
+        },
+        userRole: {
+            type: String,
+            required: true
         }
     },
     data() {
@@ -84,15 +91,12 @@ export default {
             headerTitle:''
         };
     },
-    watch: {
-        '$store.state.socket.simulationRoleList': function (val) {
-            if (val && val.length) {
-                this.$nextTick(() => {
-                    this.$refs.chatMemberList && this.$refs.chatMemberList.setMemberStatus(val);
-                    this.$refs.chatCoversitionList && this.$refs.chatCoversitionList.setCoversitionStatus(val);
-                });
+    computed:{
+        isShow() {
+            return this.userRole != 'ADMIN' && this.userRole != 'AUDIENCE';
         }
     },
+    watch: {
         '$store.state.socket.simulationScriptTip':function(val, old) {
             if (val) {
                 if (val.type == 'Conversation') {
@@ -134,7 +138,7 @@ export default {
         },
         setCurrentCoversition(coversition) {
             this.currentCoversition = coversition;
-            if (coversition.group) {
+            if (coversition.all) {
                 this.headerTitle = coversition.name;
             }
             if (this.recordSending) {
@@ -147,7 +151,7 @@ export default {
         },
         addCoversition({data, headerTitle}) {
             this.$refs.chatCoversitionList.addCoversition(data, headerTitle);
-            this.currentCoversition = {id:data.id, group:data.group};
+            this.currentCoversition = {id:data.id, all:data.all};
             this.headerTitle = headerTitle;
         },
         changeCoversition(data) {
@@ -259,12 +263,11 @@ export default {
                 }
             });
         },
+        handleCreateGroup() {
+            this.$refs.createGroup.doShow();
+        },
         handleSetting() {
             this.$refs.chatSetting.doShow();
-        },
-        handleMembers() {
-            this.$refs.chatSetting.doClose();
-            this.$refs.chatMemberList.doShow();
         }
     }
 };
@@ -293,6 +296,10 @@ export default {
   margin-left: 15px;
   display: inline-block;
   margin-top: 10px;
+  width: 70%;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
 }
 .chat-box-content{
     width: 100%;
@@ -312,6 +319,14 @@ export default {
     display: inline-block;
     width: 400px;
 }
+.chat-createGroup{
+    float: right;
+    line-height: 40px;
+    margin-right: 10px;
+    cursor: pointer;
+    font-size: 16px;
+    position: relative;
+}
 .chat-setting{
     float: right;
     line-height: 40px;

src/views/newMap/displayNew/chatView/chatContent.vue

@@ -4,13 +4,13 @@
       <div v-for="(chatContent,index) in chatContentList" :key="index" class="chatContentInClass">
         <div :class="chatContent.self?'rightUser':'leftUser'">
           <div class="userHeader">
-            <div v-if="chatContent.group&& !chatContent.self" class="userName">{{ covertName(chatContent.member) }}</div>
+            <div v-if="chatContent.all&& !chatContent.self" class="userName">{{ covertName(chatContent.member) }}</div>
             <div :class="chatContent.self?'userChatTime textRight':'userChatTime'">{{ formatTime(chatContent.chatTime) }}</div>
           </div>
           <div class="userBubble" @click="playAudio('audio'+index)">
             <div class="userMessage">
               <!-- &&!(chatContent.self) -->
-              <span v-if="chatContent.group">@{{ covertName(chatContent.targetName) }}</span>
+              <span v-if="chatContent.all">@{{ covertName(chatContent.targetName) }}</span>
               <span class="el-icon-video-play playicon" />
               <span class="messageText">{{ chatContent.message }}</span>
               <audio :id="'audio'+index" :src="baseUrl+chatContent.src" style="display:none" />
@@ -46,7 +46,7 @@ export default {
                 this.chatContentList.push(simulationText);
                 this.scrollTop();
             } else {
-                if (!simulationText.group) {
+                if (!simulationText.all) {
                     this.$emit('changeCoversition', simulationText);
                     // this.$emit('addCoversition', {data:simulationText, headerTitle:''});
                     this.chatContentList.push(simulationText);

src/views/newMap/displayNew/chatView/chatCoversitionList.vue

@@ -32,9 +32,14 @@ export default {
                 if (resp.data) {
                     const data = resp.data;
                     data.map(coversition=>{
+                        if (coversition.name) {
+                            coversition.coverName = coversition.name;
+                            coversition.isOnline = true;
+                        } else {
                             const objectCover = this.handleMemberName(coversition);
                             coversition.coverName = objectCover.coversitionName;
                             coversition.isOnline = objectCover.isOnline;
+                        }
                         return coversition;
                     });
                     this.coversitionList = data;
@@ -49,8 +54,13 @@ export default {
             const index = this.coversitionList.findIndex(item=>{ return item.id == data.id; });
             if (index < 0) {
                 const objectCover = this.handleMemberName(data);
+                if (data.name) {
+                    data.coverName = data.name;
+                    data.isOnline = true;
+                } else {
                     data.coverName = objectCover.coversitionName;
                     data.isOnline = objectCover.isOnline;
+                }
                 this.coversitionList.push(data);
                 if (headerTitle) {
                     this.currentCoversition = data;
@@ -58,8 +68,8 @@ export default {
             }
         },
         changeCoversition(coversition) {
-            this.$emit('setHeadTitle', !coversition.isOnline ? coversition.coverName + ' (离线)' : coversition.coverName);
-            this.currentCoversition = {id:coversition.id, group:coversition.group};
+            this.$emit('setHeadTitle', coversition.coverName);
+            this.currentCoversition = {id:coversition.id, all:coversition.all};
             this.$emit('setCurrentCoversition', coversition);
             // this.$refs.chatContent.reloadData(this.currentCoversition);
         },
@@ -74,7 +84,7 @@ export default {
             this.changeCoversition(coversition);
         },
         handleMemberName(conversition) {
-            if (conversition.group) {
+            if (conversition.all) {
                 return {coversitionName:conversition.name, isOnline:true};
             } else {
                 let coversitionName = '';
@@ -119,11 +129,6 @@ export default {
                 }
                 return {coversitionName:coversitionName, isOnline:isOnline};
             }
-        },
-        setCoversitionStatus(data) {
-            this.initPage(false);
-            this.$emit('setHeadTitle', !this.currentCoversition.isOnline ? this.currentCoversition.coverName + ' (离线)' : this.currentCoversition.coverName);
-            // this.changeCoversition(this.currentCoversition);
         }
     }
 };

src/views/newMap/displayNew/chatView/chatCreateGroup.vue

@@ -0,0 +1,224 @@
+<template>
+  <div v-show="dialogVisible" class="chat-create-group">
+    <div class="create-group-header">
+      <div class="create-group-title">添加会话对象</div>
+      <div class="create-group-close">
+        <i class="el-icon-close" @click="dialogVisible=false" />
+      </div>
+    </div>
+    <div class="create-group-content">
+      <div class="chat-member-list">
+        <el-checkbox-group v-model="checkList">
+          <el-checkbox
+            v-for="member in memberList"
+            :key="member.id"
+            class="each-chat-member"
+            :label="member"
+            :disabled="member.userId === userId"
+          >{{ member.memberName }}</el-checkbox>
+        </el-checkbox-group>
+      </div>
+      <div class="currentSelectList">
+        <div
+          v-for="member in checkList"
+          :key="member.id"
+          class="eachSelect"
+        >
+          {{ member.memberName }}
+        </div>
+
+      </div>
+      <!-- :style="member.userId === userId ?'color:red':''" -->
+    </div>
+    <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>
+</template>
+<script>
+import {getSimulationMembersNew, getSimulationConversationIdNew} from '@/api/chat';
+import ConstConfig from '@/scripts/ConstConfig';
+import Cookies from 'js-cookie';
+export default {
+    name:'ChatCreateGroup',
+    props: {
+        group: {
+            type: String,
+            required: true
+        }
+    },
+    data() {
+        return {
+            dialogVisible:false,
+            loading:false,
+            memberList:[],
+            checkList:[]
+        };
+    },
+    computed:{
+        userId() {
+            return this.$store.state.user.id;
+        }
+    },
+    methods:{
+        doShow() {
+            this.getSimulationMembers();
+            this.dialogVisible = true;
+        },
+        getSimulationMembers() {
+            getSimulationMembersNew(this.$route.query.group).then(resp => {
+                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);
+                lastData = lastData.filter(memberIn=>{ return memberIn.role != '观众'; });
+                lastData.map(member=>{
+                    const deviceName = member.deviceName ? '-' + member.deviceName : '';
+                    const memberName = member.name ? '-' + member.name : '';
+                    member.memberName = member.role + deviceName + memberName;
+                    return member;
+                });
+                this.memberList = lastData;
+            });
+        },
+        doCreate() {
+            if (this.checkList.length > 0) {
+                this.loading = true;
+                const checkList = this.checkList.map(function(check) { return check.id; });
+                getSimulationConversationIdNew(checkList, this.group).then(resp => {
+                    if (resp.data) {
+                        const data = resp.data;
+                        this.loading = false;
+                        this.$emit('addCoversition', {data:data, headerTitle:resp.data.name});
+                        this.dialogVisible = false;
+                        this.checkList = [];
+                    }
+                }).catch(error=>{
+                    this.$messageBox('创建会话失败: ' + error.messagfe);
+                    this.loading = false;
+                    this.dialogVisible = false;
+                    this.checkList = [];
+                });
+            }
+
+        },
+        doClose() {
+            this.checkList = [];
+            this.dialogVisible = false;
+        }
+    }
+};
+</script>
+<style lang="scss" scoped>
+.chat-create-group{
+    position: absolute;
+    width: 70%;
+    height: 300px;
+    border: 1px #dedede solid;
+    left: 26%;
+    top: 8%;
+    z-index: 7;
+    border-radius: 8px;
+    box-shadow: #b5aeae 0 0 10px;
+    background: #fff;
+}
+.create-group-header{
+    padding-left: 10px;
+    padding-top: 6px;
+    font-size: 14px;
+    border-bottom: 1px #dedede solid;
+    padding-bottom: 6px;
+}
+.create-group-title{
+    display: inline-block;
+}
+.create-group-close{
+    float: right;
+    display: inline-block;
+    margin-right: 5px;
+    font-size: 16px;
+    cursor: pointer;
+}
+.chat-member-list{
+    width: 54%;
+    height: 216px;
+    overflow-y: auto;
+    padding: 5px 10px;
+    font-size: 14px;
+    overflow-x: hidden;
+    border-right: 1px #ccc solid;
+    display:inline-block;
+}
+.create-group-content{
+    width: 100%;
+    height: 220px;
+    padding-bottom: 10px;
+    border-bottom: 1px #dedede solid;
+}
+.create-group-bottom{
+    text-align: center;
+    margin-top:8px;
+}
+.each-chat-member{
+    display:block;
+    margin-top:5px;
+}
+.currentSelectList{
+    display: inline-block;
+    width: 44%;
+    font-size: 14px;
+    vertical-align: top;
+    padding: 5px 10px;
+    overflow-x: hidden;
+    overflow-y: auto;
+    height: 216px;
+}
+.eachSelect{
+    display:block;
+    margin-top:5px;
+}
+// 谷歌、safari、qq浏览器、360浏览器滚动条样式
+// 定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸
+.chat-member-list::-webkit-scrollbar,.currentSelectList::-webkit-scrollbar {
+    width: 6px;
+    height: 6px;
+    // height: 110px;
+    background-color: #FFFFFF;
+}
+/*定义滚动条轨道 内阴影+圆角*/
+.chat-member-list::-webkit-scrollbar-track,.currentSelectList::-webkit-scrollbar-track{
+    // box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
+    border-radius: 10px;
+    background-color: #FFFFFF;;
+}
+/*定义滑块 内阴影+圆角*/
+.chat-member-list::-webkit-scrollbar-thumb,.currentSelectList::-webkit-scrollbar-thumb{
+    border-radius: 10px;
+    // box-shadow: inset 0 0 6px rgba(0,0,0,.3);
+    background-color: #cacaca;
+}
+/*滑块效果*/
+.chat-member-list::-webkit-scrollbar-thumb:hover,.currentSelectList::-webkit-scrollbar-thumb:hover {
+    border-radius: 5px;
+    // box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
+    background: rgba(0,0,0,0.4);
+}
+/*IE滚动条颜色*/
+html {
+    scrollbar-face-color:#bfbfbf;/*滚动条颜色*/
+    scrollbar-highlight-color:#000;
+    scrollbar-3dlight-color:#000;
+    scrollbar-darkshadow-color:#000;
+    scrollbar-Shadow-color:#adadad;/*滑块边色*/
+    scrollbar-arrow-color:rgba(0,0,0,0.4);/*箭头颜色*/
+    scrollbar-track-color:#eeeeee;/*背景颜色*/
+}
+</style>

src/views/newMap/displayNew/chatView/chatMemberList.vue

@@ -5,14 +5,16 @@
       <div
         v-for="member in memberList"
         :key="member.id"
-        :class="member.online?'each-chat-member':'each-chat-member each-chat-member-outline'"
-        @click="createConversition(member)"
+        :style="member.userId === userId ?'color:red':''"
+        class="each-chat-member"
+        :title="member.memberName"
       >{{ member.memberName }}</div>
+      <!-- :class="member.online?'each-chat-member':'each-chat-member each-chat-member-outline'" -->
     </div>
   </div>
 </template>
 <script>
-import {getSimulationMembersNew, getSimulationConversationIdNew} from '@/api/chat';
+import {getSimulationChatMemberNew} from '@/api/chat';
 import ConstConfig from '@/scripts/ConstConfig';
 import Cookies from 'js-cookie';
 export default {
@@ -21,43 +23,35 @@ export default {
         group: {
             type: String,
             required: true
+        },
+        currentCoversition:{
+            type: Object,
+            required: true
         }
     },
     data() {
         return {
-            showMembers:false,
+            showMembers:true,
             memberList:[]
         };
     },
-    mounted() {
+    computed:{
+        userId() {
+            return this.$store.state.user.id;
+        }
+    },
+    watch:{
+        currentCoversition:function (val, old) {
+            if (val) {
                 this.getSimulationMembers();
+            }
+        }
+    },
+    mounted() {
     },
     methods:{
-        createConversition(member) {
-            if (member.userId != this.$store.state.user.id && member.online) {
-                getSimulationConversationIdNew({ memberId: member.id }, this.group).then(resp => {
-                    if (resp.data) {
-                        const data = resp.data;
-                        this.$emit('addCoversition', {data:data, headerTitle:member.memberName});
-                        this.showMembers = false;
-                    }
-                });
-            }
-        },
-        setMemberStatus(memberInfo) {
-            this.getSimulationMembers();
-            // memberInfo.forEach(member=>{
-            //     if (this.coversitionList) {
-            //         this.coversitionList.forEach(item=>{
-            //             if (item.id == member.id) {
-            //                 item.online = member.online;
-            //             }
-            //         });
-            //     }
-            // });
-        },
         getSimulationMembers() {
-            getSimulationMembersNew(this.$route.query.group).then(resp => {
+            getSimulationChatMemberNew(this.$route.query.group, this.currentCoversition.id).then(resp => {
                 let lastData = JSON.stringify(resp.data);
                 const roleTypeList = ConstConfig.ConstSelect.roleTypeNew;
                 roleTypeList.forEach(function(element) {
@@ -82,14 +76,6 @@ export default {
             return this.memberList.filter(member=>{
                 return member.id == memberId;
             });
-        },
-        doShow() {
-            if (this.showMembers) {
-                this.showMembers = false;
-            } else {
-                this.showMembers = true;
-                this.getSimulationMembers();
-            }
         }
     }
 };

src/views/newMap/displayNew/index.vue

@@ -41,6 +41,7 @@
         :group="group"
         :quest-id="questId"
         :show-station="showStation"
+        :user-role="userRole"
         @tryTime="tryTime"
         @hidepanel="hidepanel"
         @passflow="passflow"
@@ -253,6 +254,17 @@ export default {
         },
         project() {
             return getSessionStorage('project');
+        },
+        userRole() {
+            if (this.$route.query.prdType == '02') {
+                return 'DISPATCHER';
+            } else if (this.$route.query.prdType == '01') {
+                return 'STATION_SUPERVISOR';
+            } else if (this.$route.query.prdType == '04') {
+                return 'DRIVER';
+            } else {
+                return 'AUDIENCE';
+            }
         }
     },
     watch: {

src/views/newMap/displayNew/menuDemon.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <chat-box ref="chatbox" :group="group" />
+    <chat-box ref="chatbox" :group="group" :user-role="userRole" />
     <div class="display-card" :style="{top: offset+'px'}">
       <el-row>
         <span v-if="countTime" class="display-score">{{ $t('display.demon.trialTime') }} {{ countTime }}</span>
@@ -77,6 +77,10 @@ export default {
             default() {
                 return false;
             }
+        },
+        userRole: {
+            type: String,
+            required: true
         }
     },
     data() {

src/views/newMap/jointTrainingNew/chatContent.vue

@@ -38,6 +38,7 @@ export default {
             chatContentList:[],
             coversition:{},
             currentAudioList:[],
+            currentAudioIndex:0,
             isPlay:false,
             baseUrl:process.env.VUE_APP_VOICE_API
         };
@@ -122,17 +123,18 @@ export default {
             return /\d{2}:\d{2}:\d{2}/.exec(time)[0] || time;
         },
         playAllAudio() {
-            // this.playEachAudio(this.currentAudioList[this.currentAudioIndex]);
+            this.playEachAudio(this.currentAudioList[this.currentAudioIndex]);
         },
-        playEachAudio(index) {
+        playEachAudio(audioUrl) {
             this.$nextTick(function() {
-                document.querySelector('#audio' + index).play();
+                document.querySelector('#audioPlay').src = audioUrl;
+                document.querySelector('#audioPlay').play();
                 const that = this;
-                document.querySelector('#audio' + index).onended = function() {
+                document.querySelector('#audioPlay').onended = function() {
                     that.currentAudioList.shift();
                     if (that.currentAudioList.length > 0) {
-                        // that.currentAudioIndex++;
-                        // that.playEachAudio(that.currentAudioList[that.currentAudioIndex]);
+                        that.currentAudioIndex++;
+                        that.playEachAudio(that.currentAudioList[that.currentAudioIndex]);
                     } else {
                         that.isPlay = false;
                     }

src/views/newMap/jointTrainingNew/chatCoversitionList.vue

@@ -68,7 +68,7 @@ export default {
             }
         },
         changeCoversition(coversition) {
-            this.$emit('setHeadTitle', !coversition.isOnline ? coversition.coverName + ' (离线)' : coversition.coverName);
+            this.$emit('setHeadTitle', coversition.coverName);
             this.currentCoversition = {id:coversition.id, all:coversition.all};
             this.$emit('setCurrentCoversition', coversition);
             // this.$refs.chatContent.reloadData(this.currentCoversition);