剧本预览代码调整

src/views/newMap/chatView/chatBox.vue

@@ -44,7 +44,20 @@
                 <div class="record_tip_cancle" @click="cancleRecording()">取消</div>
               </div>
             </div>
-            <chat-member-list ref="chatMemberList" :current-member-list="currentMemberList" />
+            <chat-member-list ref="chatMemberList" :current-member-list="currentMemberListData" />
+          </div>
+          <div class="chat-box-footer">
+            <div v-if="isShow">
+              <div class="userString">{{ userString }}</div>
+              <el-button :loading="loading" size="mini" type="primary" class="chat-box-create-coversite" @click="doCreate">创建群聊</el-button>
+              <div v-if="scriptTip" class="scriptTip">{{ scriptTip }}</div>
+            </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="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>
           </div>
         </div>
       </div>
@@ -62,8 +75,9 @@
 import ChatSetting from './chatSetting';
 import ChatMemberList from './chatMemberList';
 import ChatContent from './chatContent';
-// startConversition, overSimulationConversition, getAllConversition
+import RecordRTC from 'recordrtc';
-import {sendSimulationConversition} from '@/api/chat';
+// , overSimulationConversition, getAllConversition
+import {sendSimulationConversition, startConversition} from '@/api/chat';
 export default {
     name:'ChatBoxDraft',
     components:{
@@ -77,7 +91,7 @@ export default {
             required:true
         },
         treeData:{
-            type:Object,
+            type:Array,
             required:true
         },
         group: {
@@ -95,6 +109,14 @@ export default {
         chatContentList:{
             type:Array,
             required: true
+        },
+        scriptTip:{
+            type:String,
+            required:true
+        },
+        isStartRecord:{
+            type:Boolean,
+            required:true
         }
     },
     data() {
@@ -114,10 +136,18 @@ export default {
             recorders: null,
             seconds:0,
             inter:null,
-            microphone:null
+            microphone:null,
+            loading:false,
+            userString:'',
+            memberIdList:[],
+            currentMemberListData:[]
         };
     },
     watch:{
+        'currentMemberList':(val)=>{
+            debugger;
+            this.currentMemberListData = val;
+        },
         '$store.state.map.mapViewLoadedCount':function(val) {
             const object = document.querySelector('.menuButton');
             if (object) {
@@ -149,7 +179,16 @@ export default {
         },
         handleCheckChange() {
             const memberList = this.$refs.tree.getCheckedNodes();
-            this.$emit('checkedMember', memberList);
+            this.userString = '';
+            this.memberIdList = [];
+            if (memberList && memberList.length) {
+                memberList.forEach(member => {
+                    if (member && !(member.children) && (member.userId == '' || member.userId)) {
+                        this.userString += member.memberName + ',';
+                        this.memberIdList.push(member.id);
+                    }
+                });
+            }
         },
         handleMinimality(data) {
             if (data == 'min') {
@@ -162,6 +201,71 @@ export default {
         setSetting(data) {
             this.form = data;
         },
+        // 语音录制开始
+        startRecording() {
+            this.$emit('setScriptTip', '');
+            const that = this;
+            if (!this.recordSending && !this.recorders && !this.microphone) {
+                this.$refs.chatSetting.doClose();
+                const StereoAudioRecorder = RecordRTC.StereoAudioRecorder;
+                navigator.getUserMedia(
+                    { audio: true } // 只启用音频
+                    , function (stream) {
+                        that.microphone = stream;
+                        that.recorders = new RecordRTC(that.microphone, {
+                            type: 'audio',
+                            recorderType: StereoAudioRecorder,
+                            numberOfAudioChannels: 1,
+                            bitsPerSecond:256000,
+                            desiredSampRate: 16000
+                        });
+                        that.recorders.startRecording();
+                        that.recordSending = true;
+                        that.inter = setInterval(() => {
+                            if (that.seconds < 60) {
+                                that.seconds++;
+                            } else {
+                                clearInterval(that.inter);
+                            }
+                        }, 1000);
+                    }, function (error) {
+                        switch (error.code || error.name) {
+                        case 'PERMISSION_DENIED':
+                        case 'PermissionDeniedError':
+                            that.$message({
+                                showClose: true,
+                                message: '用户拒绝提供信息',
+                                type: 'error'
+                            });
+                            break;
+                        case 'NOT_SUPPORTED_ERROR':
+                        case 'NotSupportedError':
+                            that.$message({
+                                showClose: true,
+                                message: '浏览器不支持硬件设备',
+                                type: 'error'
+                            });
+                            break;
+                        case 'MANDATORY_UNSATISFIED_ERROR':
+                        case 'MandatoryUnsatisfiedError':
+                            that.$message({
+                                showClose: true,
+                                message: '无法发现指定的硬件设备',
+                                type: 'error'
+                            });
+                            break;
+                        default:
+                            that.$message({
+                                showClose: true,
+                                message: '无法打开麦克风',
+                                type: 'error'
+                            });
+                            break;
+                        }
+                    }
+                );
+            }
+        },
         // 停止录制
         stopRecording() {
             const that = this;
@@ -196,6 +300,36 @@ export default {
                 this.recordSending = false;
                 this.recorders = null;
             }
+        },
+        doCreate() {
+            if (this.memberIdList.length > 0) {
+                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 = '';
+                    }
+                }).catch(error=>{
+                    this.$message.error(error.code == '3005' ? '创建会话失败:仿真会话成员忙线中！' : '创建会话失败！');
+                    this.loading = false;
+                    this.dialogVisible = false;
+                });
+            }
+            // this.createLoading = true;
+            // startConversition(this.group, this.memberIdList).then(resp => {
+            //     this.conversitionId = resp.data.id;
+            //     this.messageList = [];
+            //     this.privateMessageList = [];
+            //     this.userString = '';
+            //     this.isConversitionCreator = true;
+            //     this.$message.success('创建会话成功！');
+            //     this.createLoading = false;
+            // }).catch((error) => {
+            //     this.$message.error(error.code == '3005' ? '创建会话失败:仿真会话成员忙线中！' : '创建仿真失败！');
+            //     this.createLoading = false;
+            // });
         }
     }
 };
@@ -254,11 +388,11 @@ export default {
     position: relative;
 }
 
-// .chat-box-footer{
+.chat-box-footer{
-//     display: inline-block;
+    display: inline-block;
-//     width: 100%;
+    width: 100%;
-//     position: relative;
+    position: relative;
-// }
+}
 .chat-window{
     display: inline-block;
     width: 100%;
@@ -270,27 +404,27 @@ export default {
     cursor: pointer;
     font-size: 16px;
 }
-// .chat-box-footer-tool{
+.chat-box-footer-tool{
-//     width: 100%;
+    width: 100%;
-//     height: 30px;
+    height: 30px;
-// }
+}
-// .chat-box-footer-send{
+.chat-box-footer-send{
-//     font-size: 12px;
+    font-size: 12px;
-//     text-align: center;
+    text-align: center;
-//     float: right;
+    float: right;
-//     margin-right: 10px;
+    margin-right: 10px;
-//     margin-bottom: 10px;
+    margin-bottom: 10px;
-//     cursor: pointer;
+    cursor: pointer;
-//     padding: 5px 15px;
+    padding: 5px 15px;
-// }
+}
-// .chat-box-create-coversite{
+.chat-box-create-coversite{
-//     font-size: 12px;
+    font-size: 12px;
-//     float: right;
+    float: right;
-//     margin-right: 10px;
+    margin-right: 10px;
-//     margin-top: 18px;
+    margin-top: 18px;
-//     cursor: pointer;
+    cursor: pointer;
-//     padding: 5px 15px;
+    padding: 5px 15px;
-// }
+}
 .minimality {
     float: right;
     line-height: 40px;
@@ -317,46 +451,46 @@ export default {
 // .coversition-list{
 
 // }
-// .chat-box-footer-send.disbled{
+.chat-box-footer-send.disbled{
-//     cursor: no-drop;
+    cursor: no-drop;
-// }
+}
 
-// .scriptTip{
+.scriptTip{
-//     position: absolute;
+    position: absolute;
-//     width: 260px;
+    width: 260px;
-//     padding: 10px;
+    padding: 10px;
-//     background: rgb(250, 246, 3);
+    background: rgb(250, 246, 3);
-//     right: 7px;
+    right: 7px;
-//     bottom:45px;
+    bottom:45px;
-//     border-radius: 5px;
+    border-radius: 5px;
-//     font-size: 14px;
+    font-size: 14px;
-//     color: #000000;
+    color: #000000;
-//     z-index: 2;
+    z-index: 2;
-// }
+}
-// .scriptTip::after{
+.scriptTip::after{
-//     content: '';
+    content: '';
-//     position: absolute;
+    position: absolute;
-//     width: 0;
+    width: 0;
-//     height: 0;
+    height: 0;
-//     border-left: 10px solid transparent;
+    border-left: 10px solid transparent;
-//     border-right: 10px solid transparent;
+    border-right: 10px solid transparent;
-//     border-top: 8px solid #faf603;
+    border-top: 8px solid #faf603;
-//     right: 16px;
+    right: 16px;
-//     bottom: -7px;
+    bottom: -7px;
-// }
+}
 
-// .userString{
+.userString{
-//     height: 50px;
+    height: 50px;
-//     width: 409px;
+    width: 409px;
-//     position: absolute;
+    position: absolute;
-//     left: 0;
+    left: 0;
-//     top: 0;
+    top: 0;
-//     padding: 4px 5px;
+    padding: 4px 5px;
-//     overflow-x: auto;
+    overflow-x: auto;
-//     font-size: 13px;
+    font-size: 13px;
-//     line-height: 135%;
+    line-height: 135%;
-//     resize: none;
+    resize: none;
-// }
+}
 
 // .showMembers{
 //     float: right;

src/views/newMap/chatView/chatMemberList.vue

@@ -26,6 +26,12 @@ export default {
             return this.$store.state.user.id;
         }
     },
+    watch:{
+        'currentMemberList':()=>{
+            debugger;
+            this.currentMemberList;
+        }
+    },
     mounted() {
     },
     methods:{
@@ -62,7 +68,7 @@ export default {
     margin-top: 10px;
     font-size: 12px;
     margin-left: 0px;
-    height: 350px;
+    height: 250px;
     overflow-y: auto;
 }
 .each-chat-member{

src/views/newMap/displayNew/designIndex.vue

@@ -5,7 +5,7 @@
         <map-system-draft ref="mapCanvas" @back="back" />
       </transition>
 
-      <script-preview-chat ref="chatbox" :group="group" :user-role="userRole" />
+      <script-preview-chat ref="chatbox" :group="group" :user-role="userRole" :member-data="memberData" :tree-data="treeData" />
       <div class="display-draft">
         <el-button v-if="isscriptRun&&!dataError" type="danger" @click="handleQuitQuest">{{ $t('display.demon.exitScript') }}</el-button>
         <el-button type="primary" @click="back">{{ $t('display.demon.back') }}</el-button>
@@ -43,7 +43,6 @@ import { quitScriptNew, scriptRePreview } from '@/api/simulation';
 import MenuSchema from '@/views/newMap/displayNew/menuSchema';
 import MenuSystemTime from '@/views/newMap/displayNew/menuSystemTime';
 import { mapGetters } from 'vuex';
-import { setGoodsTryUse } from '@/api/management/goods';
 import { clearSimulation, getSimulationInfoNew } from '@/api/simulation';
 import { OperateMode, TrainingMode } from '@/scripts/ConstDic';
 import { checkLoginLine } from '@/api/login';
@@ -51,6 +50,7 @@ import { loadNewMapDataByGroup } from '@/utils/loaddata';
 import { EventBus } from '@/scripts/event-bus';
 import { Notification } from 'element-ui';
 import ConstConfig from '@/scripts/ConstConfig';
+import Cookies from 'js-cookie';
 
 // 三维
 // import Jl3dSimulation from '@/views/jlmap3d/simulation/jl3dsimulation';
@@ -91,6 +91,7 @@ export default {
             mapBoxP: null,
             dataError: false,
             panelShow: true,
+            memberData:[],
             simulationShow: false,
             drivingShow: false,
             isscriptRun:false, // 剧本是否正在加载
@@ -104,8 +105,9 @@ export default {
                 '04': '02', 	// 司机 => 行调
                 '05': ''		// 派班 => null
             },
-            userRole:'AUDIENCE',
+            userRole:'',
-            isDrive: this.prdType == '04'
+            isDrive: this.prdType == '04',
+            treeData:[]
         };
     },
     computed: {
@@ -318,10 +320,6 @@ export default {
                 this.endViewLoading();
             }
         },
-        async runAddRolesLoadShow() {
-            const row = {group: this.$route.query.group, id: this.$route.query.scriptId};
-            this.$refs.addQuest.handleLoad(1, row);
-        },
         async back() {
             await clearSimulation(this.group);
             this.$store.dispatch('training/over').then(() => {
@@ -342,6 +340,87 @@ export default {
             } else {
                 this.userRole = 'AUDIENCE';
             }
+            const memberList = this.$store.state.training.memberData;
+            memberList[data.id].userId = this.$store.state.user.id;
+            memberList[data.id].disabled = true;
+            let lastData = JSON.stringify(memberList);
+            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 = Object.values(lastData);
+            const lastMemberList = [];
+            const dispatcherList = [];
+            const electricDispatcherList = [];
+            const depotDispatcherList = [];
+            const stationSupervisorList = [];
+            const driverList = [];
+            const maintainerList = [];
+            this.treeData = [];
+            lastData.forEach((member, index)=>{
+                if (member.type != '观众') {
+                    const name = member.name == undefined ? '' : '-' + member.name;
+                    if (member.deviceCode) {
+                        const device = this.$store.getters['map/getDeviceByCode'](member.deviceCode);
+                        if (device) {
+                            if (device._type == 'Train') {
+                                member.memberName = member.type + device.groupNumber + name;
+                                lastMemberList.push(member);
+                                member.label = member.memberName;
+                                driverList.push(member);
+                            } else {
+                                member.memberName = member.type + device.name + name;
+                                lastMemberList.push(member);
+                                if (device._type == 'Station') {
+                                    member.label = member.memberName;
+                                    stationSupervisorList.push(member);
+                                }
+                            }
+                        } else {
+                            member.memberName = member.type + member.deviceCode + name;
+                            lastMemberList.push(member);
+                        }
+                    } else {
+                        member.memberName = member.type + name;
+                        member.label = member.memberName;
+                        if (member.type == '行调') {
+                            dispatcherList.push(member);
+                        } else if (member.type == '通号') {
+                            maintainerList.push(member);
+                        }
+                        lastMemberList.push(member);
+                    }
+                }
+            });
+            this.treeData = [{
+                label: '行调',
+                id: 'dispatcher',
+                type: 'role',
+                children: dispatcherList
+            }, {
+                label: '车站值班员',
+                id: 'stationSupervisor',
+                type: 'role',
+                children: stationSupervisorList
+            }, {
+                label: '司机',
+                id: 'driver',
+                type: 'role',
+                children: driverList
+            }, {
+                label: '通号',
+                id: 'maintainer',
+                type: 'role',
+                children: maintainerList
+            }];
+            this.memberData = lastMemberList;
+
         },
         // 退出剧本
         handleQuitQuest() {
@@ -350,8 +429,8 @@ export default {
                     getSimulationInfoNew(this.group).then(()=>{
                         this.isscriptRun = false;
                         this.$store.dispatch('scriptRecord/updateSimulationPause', false);
-                        this.userRole = 'AUDIENCE';
+                        this.userRole = '';
-                        this.$refs.chatbox.clearAllData();
+                        // this.$refs.chatbox.clearAllData();
                     }).catch(()=>{
                         this.$messageBox(this.$t('display.demon.exitTaskFail'));
                     });
@@ -379,16 +458,6 @@ export default {
             await clearSimulation(this.group);
             await this.$store.dispatch('training/over');
         },
-        // 设置使用时间
-        async tryTime(param) {
-            const data = {
-                goodsId: param.goodsId,
-                time: param.time
-            };
-            if (data.goodsId) {
-                await setGoodsTryUse(data);
-            }
-        },
         switchMode(prdType) {
             this.$store.dispatch('training/setPrdType', prdType);
         },

src/views/newMap/displayNew/menuSchema.vue

@@ -220,7 +220,7 @@ export default {
                         Vue.prototype.$jlmap.setOptions(newMapLocation);
                     }
                 }
-                this.$emit('selectQuest', {row, roleName});
+                this.$emit('selectQuest', {row, roleName, id});
             } catch (error) {
                 this.$messageBox(error.message);
             }

src/views/newMap/displayNew/scriptPreviewChat.vue

@@ -7,9 +7,13 @@
     :conversition-id="conversitionId"
     :current-member-list="currentMemberList"
     :chat-content-list="chatContentList"
+    :script-tip="scriptTip"
+    :is-start-record="isStartRecord"
+    @setScriptTip="setScriptTip"
   />
 </template>
 <script>
+import CMD from '@/scripts/cmdPlugin/CommandEnum';
 import ChatBox from '../chatView/chatBox.vue';
 export default {
     name:'ScriptPreviewChat',
@@ -24,16 +28,119 @@ export default {
         userRole: {
             type: String,
             required: true
+        },
+        memberData:{
+            type: Array,
+            required: true
+        },
+        treeData:{
+            type: Array,
+            required: true
         }
     },
     data() {
         return {
-            isShow:false,
+            scriptTip:'',
-            treeData:{},
+            isHasCoversition:false,
             conversitionId:'',
             currentMemberList:[],
-            chatContentList:[]
+            chatContentList:[],
+            isStartRecord:false
         };
+    },
+    computed:{
+        isShow() {
+            return this.userRole != '' && this.userRole != 'ADMIN' && !this.isHasCoversition;
+        }
+    },
+    watch:{
+        '$store.state.socket.createConversition':function(val) {
+            this.isHasCoversition = true;
+            this.isStartRecord = true;
+            this.conversitionId = val.id;
+            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) {
+                    const memberList = [];
+                    val.memberIds.forEach(id=>{
+                        if (val.creatorId == id) {
+                            member.connect = true;
+                            memberList.push(member);
+                        } else {
+                            const member = this.memberData.find(member=>{ return member.id == id; });
+                            member.connect = false;
+                            member && memberList.push(member);
+                        }
+                    });
+                    this.currentMemberList = memberList;
+
+                }
+            }
+            //
+            // 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) {
+            this.currentMemberList.forEach(member => {
+                if (member.id == val.memberId) {
+                    member.connect = true;
+                }
+            });
+        },
+        '$store.state.socket.simulationScriptTip':function(val, old) {
+            if (val) {
+                if (val.type == 'Conversation') {
+                    this.scriptTip = '请说：' + val.content;
+                } else if (val.type == 'Command') {
+                    const commandName = val.operationType;
+                    let device = val.operationType.split('_')[0];
+                    if (device == 'CM') {
+                        device = 'ControlConvertMenu';
+                    }
+                    const operateName = Object.values(CMD[device]).find(res=>{ return res.value == commandName; });
+                    this.$messageBox('请执行【' + operateName.label + '】操作');
+                } else if (val.type == 'Over_Conversation') {
+                    this.scriptTip = '请结束当前会话';
+                } else if (val.type == 'Start_Conversation' ) {
+                    const inviteMember = [];
+                    val.conversationMemberIds.forEach(id=>{
+                        if (val.memberId != id) {
+                            inviteMember.push((this.memberData.find(member=>{ return member.id == id; }) || {label:''}).label );
+                        }
+                    });
+                    this.scriptTip = '请创建会话,选择' + inviteMember.toString();
+                }
+            }
+        },
+        '$store.state.socket.conversationInfo':function (val, old) { //  仿真聊天
+            const simulationText = this.$store.state.socket.conversationInfo;
+            if (this.conversitionId == val.id && val.messageType == 'MESSAGE') {
+                this.chatContentList.push(this.addContent(simulationText.message));
+                // this.scrollTop();
+            } else {
+                if (!simulationText.all && val.messageType == 'MESSAGE') {
+                    this.chatContentList.push(this.addContent(simulationText.message));
+                }
+            }
+        }
+    },
+    methods:{
+        setScriptTip(scriptTip) {
+            this.scriptTip = scriptTip;
+        }
     }
 
 };