综合演练 聊天 创建群聊代码调整

src/api/chat.js

@@ -312,11 +312,11 @@ export function getSimulationConversationListNew(group) {
 }
 
 // 获取/创建仿真会话（新版地图）
-export function getSimulationConversationIdNew(params, group) {
+export function getSimulationConversationIdNew(data, group) {
     return request({
         url: `/simulation/${group}/wx/conversation`,
-        method: 'get',
+        method: 'post',
-        params: params
+        data
     });
 }
 

src/store/modules/socket.js

@@ -163,7 +163,7 @@ function handleSimulationInfo(state, data) {
         targetOnline:data.targetMember ? data.targetMember.online : null,
         targetName:data.targetMember ? data.targetMember : 'All',
         targetRole:data.targetMember ? data.targetMember.role : null,
-        group: data.group,
+        all: data.all,
         date: +new Date(`${myDate1} ${chatTime}`)
     };
     state.simulationText = params;

src/views/newMap/jointTrainingNew/chatBox.vue

@@ -11,8 +11,11 @@
             <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()">
+            <!-- <div v-show="currentCoversition.group==undefined?true:currentCoversition.group" class="showMembers" @click="handleMembers()">
               <i class="el-icon-user-solid" />
+            </div> -->
+            <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" />
@@ -42,6 +45,7 @@
       </div>
     </div>
     <chat-setting ref="chatSetting" :form="form" @setSetting="setSetting" />
+    <chat-create-group ref="createGroup" :group="group" @addCoversition="addCoversition" />
   </div>
 </template>
 <script>
@@ -49,6 +53,7 @@ import ChatSetting from './chatSetting';
 import ChatContent from './chatContent';
 import ChatMemberList from './chatMemberList';
 import ChatCoversitionList from './chatCoversitionList';
+import ChatCreateGroup from './chatCreateGroup';
 import RecordRTC from 'recordrtc';
 import {uploadAudioFileNew} from '@/api/chat';
 export default {
@@ -57,12 +62,17 @@ export default {
         ChatSetting,
         ChatContent,
         ChatMemberList,
-        ChatCoversitionList
+        ChatCoversitionList,
+        ChatCreateGroup
     },
     props: {
         group: {
             type: String,
             required: true
+        },
+        userRole: {
+            type: String,
+            required: true
         }
     },
     data() {
@@ -81,6 +91,11 @@ export default {
             headerTitle:'所有人'
         };
     },
+    computed:{
+        isShow() {
+            return this.userRole != 'ADMIN' && this.userRole != 'AUDIENCE';
+        }
+    },
     watch: {
         '$store.state.socket.simulationRoleList': function (val) {
             if (val && val.length) {
@@ -110,7 +125,7 @@ export default {
         },
         setCurrentCoversition(coversition) {
             this.currentCoversition = coversition;
-            if (coversition.group) {
+            if (coversition.all) {
                 this.headerTitle = coversition.name;
             }
             if (this.recordSending) {
@@ -123,7 +138,7 @@ export default {
         },
         addCoversition({data, headerTitle}) {
             this.$refs.chatCoversitionList.addCoversition(data);
-            this.currentCoversition = {id:data.id, group:data.group};
+            this.currentCoversition = {id:data.id, all:data.all};
             this.headerTitle = headerTitle;
         },
         // 语音录制开始
@@ -229,9 +244,12 @@ export default {
         handleSetting() {
             this.$refs.chatSetting.doShow();
         },
-        handleMembers() {
+        // handleMembers() {
-            this.$refs.chatSetting.doClose();
+        //     this.$refs.chatSetting.doClose();
-            this.$refs.chatMemberList.doShow();
+        //     this.$refs.chatMemberList.doShow();
+        // },
+        handleCreateGroup() {
+            this.$refs.createGroup.doShow();
         }
     }
 };
@@ -285,6 +303,14 @@ export default {
     cursor: pointer;
     font-size: 16px;
 }
+.chat-createGroup{
+    float: right;
+    line-height: 40px;
+    margin-right: 10px;
+    cursor: pointer;
+    font-size: 16px;
+    position: relative;
+}
 .chat-box-footer-tool{
     width: 100%;
     height: 30px;

src/views/newMap/jointTrainingNew/chatContent.vue

@@ -4,12 +4,12 @@
       <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">
-              <span v-if="chatContent.group&&!chatContent.member.robot">@{{ covertName(chatContent.targetName) }}</span>
+              <span v-if="chatContent.all&&!chatContent.member.robot">@{{ 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" />
@@ -59,7 +59,7 @@ export default {
                 }
                 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/jointTrainingNew/chatCoversitionList.vue

@@ -32,9 +32,15 @@ export default {
                 if (resp.data) {
                     const data = resp.data;
                     data.map(coversition=>{
-                        const objectCover = this.handleMemberName(coversition);
+                        if (coversition.name) {
-                        coversition.coverName = objectCover.coversitionName;
+                            coversition.coverName = coversition.name;
-                        coversition.isOnline = objectCover.isOnline;
+                            coversition.isOnline = true;
+                        } else {
+                            const objectCover = this.handleMemberName(coversition);
+                            coversition.coverName = objectCover.coversitionName;
+                            coversition.isOnline = objectCover.isOnline;
+                        }
+
                         return coversition;
                     });
                     this.coversitionList = data;
@@ -49,15 +55,21 @@ export default {
             const index = this.coversitionList.findIndex(item=>{ return item.id == data.id; });
             if (index < 0) {
                 const objectCover = this.handleMemberName(data);
-                data.coverName = objectCover.coversitionName;
+                if (data.name) {
-                data.isOnline = objectCover.isOnline;
+                    data.coverName = data.name;
+                    data.isOnline = true;
+                } else {
+                    data.coverName = objectCover.coversitionName;
+                    data.isOnline = objectCover.isOnline;
+                }
+
                 this.coversitionList.push(data);
                 this.currentCoversition = data;
             }
         },
         changeCoversition(coversition) {
             this.$emit('setHeadTitle', !coversition.isOnline ? coversition.coverName + ' (离线)' : coversition.coverName);
-            this.currentCoversition = {id:coversition.id, group:coversition.group};
+            this.currentCoversition = {id:coversition.id, all:coversition.all};
             this.$emit('setCurrentCoversition', coversition);
             // this.$refs.chatContent.reloadData(this.currentCoversition);
         },
@@ -72,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 = '';

src/views/newMap/jointTrainingNew/chatCreateGroup.vue

@@ -0,0 +1,219 @@
+<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 = [];
+                    }
+                });
+            }
+
+        },
+        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/jointTrainingNew/chatMemberList.vue

@@ -7,13 +7,12 @@
         :key="member.id"
         :class="member.online?'each-chat-member':'each-chat-member each-chat-member-outline'"
         :style="member.userId === userId ?'color:red':''"
-        @click="createConversition(member)"
       >{{ member.memberName }}</div>
     </div>
   </div>
 </template>
 <script>
-import {getSimulationMembersNew, getSimulationConversationIdNew} from '@/api/chat';
+import {getSimulationMembersNew} from '@/api/chat';
 import ConstConfig from '@/scripts/ConstConfig';
 import Cookies from 'js-cookie';
 export default {
@@ -26,7 +25,7 @@ export default {
     },
     data() {
         return {
-            showMembers:false,
+            showMembers:true,
             memberList:[]
         };
     },
@@ -39,17 +38,6 @@ export default {
         this.getSimulationMembers();
     },
     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=>{
@@ -84,14 +72,6 @@ export default {
                 });
                 this.memberList = lastData;
             });
-        },
-        doShow() {
-            if (this.showMembers) {
-                this.showMembers = false;
-            } else {
-                this.showMembers = true;
-                this.getSimulationMembers();
-            }
         }
     }
 };

src/views/newMap/jointTrainingNew/menuDemon.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <chat-box :group="group" />
+    <chat-box :group="group" :user-role="userRole" />
     <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 && !dataError " type="primary" @click="setRelDevice">{{ $t('joinTraining.connectRealDevices') }}</el-button>