添加实训设计和语音

2022-08-16 17:17:27 +08:00 · 2022-08-16 17:17:27 +08:00 · 4ffda4f614
commit 4ffda4f614
parent bdbd709824
15 changed files with 1517 additions and 12 deletions
--- a/src/api/chat.js
+++ b/src/api/chat.js
@ -61,3 +61,19 @@ export function sendConversationText (group, id, data) {
        data
    });
 }
+/** 发送会话语音(新接口) */
+export function sendChatAudioBase64 (group, data) {
+    return request({
+        url: `/simulation/${group}/operate/Conversation_Chat_Audio_Base64`,
+        method: 'post',
+        data
+    });
+}
+/** 发送会话文字(新接口) */
+export function sendChatText (group, data) {
+    return request({
+        url: `/simulation/${group}/operate/Conversation_Chat_Text`,
+        method: 'post',
+        data
+    });
+}
--- a/src/router/index.js
+++ b/src/router/index.js
@ -117,6 +117,7 @@ const DesignPlatform = () => import('@/views/designPlatform/index');
 const MapPreviewNew = () => import('@/views/designPlatform/mapPreviewNew');
 const BigScreen = () => import('@/views/designPlatform/bigScreen');
 const BigSplitScreen = () => import('@/views/designPlatform/bigSplitScreen');
+const TrainingDesign = () => import('@/views/designPlatform/trainingDesign');
 const TestRunplan = () => import('@/views/designPlatform/testRunplan');

 const Package = () => import('@/views/package/index');
@ -478,6 +479,11 @@ export const publicAsyncRoute = [
        component: BigSplitScreen,
        hidden: true
    },
+    { // 实训设计
+        path: '/trainingDesign',
+        component: TrainingDesign,
+        hidden: true
+    },
    {
        path: '/jointTrainingNew',
        component: JointTrainingNew,
--- a/src/scripts/cmdPlugin/CommandEnum.js
+++ b/src/scripts/cmdPlugin/CommandEnum.js
@ -472,5 +472,9 @@ export default {
        CMD_RAIL_FILL_IN_REGISTER: {value: 'RAIL_FILL_IN_REGISTER', label: '填写行车簿册'},
        CMD_RAIL_QUERY_REGISTER: {value: 'RAIL_QUERY_REGISTER', label: '查询行车簿册'},
        CMD_RAIL_GIVE_TICKET_TO: {value: 'RAIL_GIVE_TICKET_TO', label: '给出票据'}
+    },
+    Conversation: {
+        CMD_Conversation_Chat_Text: {value: 'Conversation_Chat_Text', label: '发送文本消息'},
+        CMD_Conversation_Chat_Audio_Base64: {value: 'Conversation_Chat_Audio_Base64', label: '发送语音消息'}
    }
 };
--- a/src/store/modules/socket.js
+++ b/src/store/modules/socket.js
@ -96,6 +96,9 @@ function handle(state, data) {
    case 'Simulation_Conversation': // 仿真-用户交互消息（聊天/命令）
        handleSimulationInfo(state, msg);
        break;
+    case 'Simulation_Conversation_Operation': // 仿真-用户交互消息（聊天/命令）-新
+        handleSimulationInfo(state, {id: msg.id, message: msg, messageType: 'MESSAGE'});
+        break;
    case 'Simulation_PlayBack_Conversation': // 回放-用户交互消息
        handleSimulationInfo(state, msg);
        break;
--- a/src/views/designPlatform/demonList.vue
+++ b/src/views/designPlatform/demonList.vue
@ -27,6 +27,7 @@ import { getSessionStorage, setSessionStorage, removeSessionStorage } from '@/ut
 import FilterCity from '@/views/components/filterCity';
 import localStore from 'storejs';
 import { ProjectCode, GetMapListByProjectList } from '@/scripts/ProjectConfig';
+import { createSimulationNew } from '@/api/simulation';

 export default {
    name: 'PublicMapList',
@ -133,6 +134,19 @@ export default {
                this.$router.push({ path: `/bigSplitScreen/${obj.mapId}` });
                break;
            }
+            case 'trainingDesign': {
+                const data = { mapId: obj.mapId, prdType: '01' };
+                createSimulationNew(data).then(resp => {
+                    if (this.loadingProjectList.includes(this.project)) {
+                        this.$store.dispatch('app/transitionAnimations');
+                    }
+                    const query = { ...data, group: resp.data, scriptId: obj.id, lineCode:obj.lineCode};
+                    this.$router.push({ path: `/trainingDesign`, query });
+                }).catch(error => {
+                    this.$messageBox(`${this.$t('scriptRecord.createSimulationFail')}: ${error.message}`);
+                });
+                break;
+            }
            }
        },
        async refresh(filterSelect) {
@ -206,6 +220,16 @@ export default {
                        cityCode: elem.cityCode
                    });
                    this.isAdministrator() ? elem.children.push({id: '8', name: this.$t('designPlatform.lesson3dDesign'), type: 'lesson3dDesign'}) : '';
+                    elem.children.push(
+                        {
+                            id: '9',
+                            name: '实训设计',
+                            type: 'trainingDesign',
+                            mapId: elem.id,
+                            lineCode: elem.lineCode,
+                            cityCode: elem.cityCode
+                        }
+                    );

                });

--- a/src/views/designPlatform/trainingDesign.vue
+++ b/src/views/designPlatform/trainingDesign.vue
@ -0,0 +1,168 @@
+<template>
+  <div class="train">
+    <div v-show="maskOpen" class="trainMask" />
+    <jlmap-visual ref="jlmapVisual" />
+    <voice-chat-box v-if="$route.query.lineCode == '16'" ref="chatbox" :group="group" :user-role="userRole" />
+    <chat-box v-else ref="chatbox" :group="group" :user-role="userRole" />
+    <div class="trainBack">
+      <el-button-group>
+        <el-button type="primary" @click="back">返回</el-button>
+      </el-button-group>
+    </div>
+  </div>
+</template>
+<script>
+import JlmapVisual from '@/views/newMap/jlmapNew/index';
+import {loadMapDataById } from '@/utils/loaddata';
+import { clearSimulation } from '@/api/simulation';
+import { creatSubscribe, clearSubscribe, displayTopic} from '@/utils/stomp';
+import { getToken } from '@/utils/auth';
+import chatBox from '@/views/newMap/chatView/chatBox.vue';
+import VoiceChatBox from '@/views/newMap/chatView/voiceChatBox.vue';
+
+export default {
+    name: 'TrainingDesign',
+    components: {
+        JlmapVisual,
+        chatBox,
+        VoiceChatBox
+    },
+    props: {
+        widthLeft: {
+            type: Number,
+            default: 0
+        }
+    },
+    data() {
+        return {
+            maskOpen: false
+        };
+    },
+    computed: {
+        mapId() {
+            return this.$route.query.mapId;
+        },
+        width() {
+            return this.$store.state.app.width;
+        },
+        height() {
+            return this.$store.state.app.height;
+        },
+        group() {
+            return this.$route.query.group;
+        },
+        userRole() {
+            let role = 'AUDIENCE';
+            switch (this.$store.state.training.prdType) {
+            case '02': { role = 'DISPATCHER'; break; }
+            case '01': { role = 'STATION_SUPERVISOR'; break; }
+            case '04': { role = 'DRIVER'; break; }
+            case '05': { role = 'DEPOT_DISPATCHER'; break; }
+            default: { role = 'AUDIENCE'; break; }
+            }
+            return role;
+        }
+    },
+    watch: {
+        $route() {
+            this.$nextTick(() => {
+                this.initLoadData();
+            });
+        },
+        '$store.state.app.windowSizeCount': function() { // 窗口缩放
+            this.setWindowSize();
+        },
+        '$store.state.map.mapViewLoadedCount':function() {
+            this.$store.dispatch('map/setTrainWindowShow', false);
+            if (this.$route.query.group && !this.$route.path.includes('displayIscs')) {
+                this.subscribe();
+            }
+        },
+        '$store.state.socket.equipmentStatus': function (val) {
+            if (val.length && this.$route.query.group) {
+                this.statusMessage(val);
+            }
+        },
+        '$store.state.socket.simulationOver':function(val) {
+            this.backOut();
+        }
+    },
+    async beforeDestroy() {
+        await this.$store.dispatch('map/mapClear');
+        this.$store.dispatch('training/setPrdType', '');
+    },
+    mounted() {
+        this.$store.dispatch('training/setPrdType', '01');
+        this.setWindowSize();
+        this.initLoadData();
+    },
+    methods: {
+        initLoadData() { // 加载地图数据
+            if (this.$route.query.group) {
+                loadMapDataById(this.mapId, 'simulation');
+            } else {
+                this.$store.dispatch('training/changeMode', { mode: null });
+                loadMapDataById(this.mapId, 'preview');
+            }
+        },
+        async statusMessage(list) {
+            await this.$store.dispatch('training/updateMapState', list);
+            await this.$store.dispatch('socket/setEquipmentStatus');
+        },
+        setWindowSize() {
+            const width = this.width;
+            const height = this.height;
+            this.$store.dispatch('config/resize', { width, height });
+        },
+        async back() {
+            if (this.$route.query.group) {
+                await clearSimulation(this.$route.query.group);
+                this.clearSubscribe();
+            }
+            this.$store.dispatch('training/over').then(() => {
+                history.go(-1);
+            });
+        },
+        backOut() {
+            if (this.$route.query.projectDevice) {
+                this.$store.dispatch('LogOut').then(() => {
+                    location.reload();
+                });
+            }
+        },
+        async subscribe() {
+            this.clearSubscribe();
+            const header = { group: this.$route.query.group || '', 'X-Token': getToken() };
+            creatSubscribe(`${displayTopic}\/${this.$route.query.group}`, header);
+            // await this.$store.dispatch('training/setHasSubscribed');
+        },
+        clearSubscribe() {
+            clearSubscribe(`${displayTopic}\/${this.$route.query.group}`);
+        }
+    }
+};
+</script>
+<style lang="scss" scoped>
+    .train {
+        width: 100%;
+		overflow: hidden;
+        position: relative;
+    }
+	.trainMask{
+        opacity: 1;
+        background: #000;
+        position: absolute;
+        right: 0;
+        top: 0;
+        width: 100%;
+        height: 100%;
+        z-index: 9;
+    }
+	.trainBack {
+        position: absolute;
+        float: right;
+        right: 15px;
+        bottom: 15px;
+		z-index: 19;
+    }
+</style>
--- a/src/views/newMap/chatView/chatContent.vue
+++ b/src/views/newMap/chatView/chatContent.vue
@ -7,7 +7,12 @@
            <div v-if="!chatContent.self" class="userName">{{ covertName(chatContent.memberId) }}</div>
            <div :class="chatContent.memberId == myMemberId?'userChatTime textRight':'userChatTime'">{{ covertTime(chatContent.time) }}</div>
          </div>
-          <div class="userBubble" @click="playAudio(baseUrl+chatContent.src, chatContent)">
+          <div v-if="chatContent.type == 'Text'" class="userBubble">
+            <div class="userMessage">
+              <span class="messageText">{{ chatContent.content }}</span>
+            </div>
+          </div>
+          <div v-else class="userBubble" style="height: 30px;width: 140px;" @click="playAudio(baseUrl+chatContent.src, chatContent)">
            <div class="userMessage">
              <!-- <span class="el-icon-video-play playicon" /> -->
              <!-- <img :src="yuyin" class="playicon1"> -->
@ -20,9 +25,9 @@
              <!-- <span class="messageText">{{ chatContent.content }}</span> -->
            </div>
          </div>
-          <audio id="audioPlay" style="display:none" />
        </div>
      </div>
+      <audio id="audioPlay" style="display:none" />
    </div>
  </div>
 </template>
@ -220,28 +225,29 @@ export default {
    margin-left: 10px;
    margin-top: 10px;
    display: inline-block;
+	max-width: 80%;
 }
 .rightUser{
    float: right;
    margin-right: 10px;
    margin-top: 10px;
    display: inline-block;
+	max-width: 80%;
 }
 .userHeader{margin-bottom: 2px;}
 .userName{font-size: 12px;display:inline-block;margin-right:10px;}
 .userChatTime{font-size: 12px;display:inline-block;}
 .userBubble{
    font-size: 12px;
-    // max-width: 200px;
    // padding: 10px;
    padding: 5px 10px 6px 10px;
-    width: 140px;
+    min-width: 140px;
    background: #ccc;
    border-radius: 5px;
    cursor: pointer;
    display:inline-block;
-	height: 30px;
-    overflow: hidden;
+	// height: 30px;
+    // overflow: hidden;
 }
 .playicon{
    font-size: 20px;
@ -307,9 +313,12 @@ export default {
 .userMessage{
 	position: relative;
 }
-.messageText{line-height: 20px;}
+.messageText{
+	line-height: 20px;
+	word-break: break-all;
+}
 .chatContentInClass{
-        display: inline-block;
+    display: inline-block;
    width: 100%;
 }

--- a/src/views/newMap/chatView/voiceChatBox.vue
+++ b/src/views/newMap/chatView/voiceChatBox.vue
--- a/src/views/newMap/displayNew/demonChat.vue
+++ b/src/views/newMap/displayNew/demonChat.vue
@ -1,6 +1,13 @@
 <template>
  <div>
+    <voice-chat-box
+      v-if="$route.query.lineCode == '16'"
+      ref="chatbox"
+      :group="group"
+      :user-role="userRole"
+    />
    <chat-box
+      v-else
      ref="chatbox"
      :group="group"
      :user-role="userRole"
@ -10,12 +17,14 @@
 </template>
 <script>
 import ChatBox from '../chatView/chatBox.vue';
+import voiceChatBox from '../chatView/voiceChatBox.vue';
 import ScriptTip from '@/views/newMap/displayNew/scriptDisplay/component/scriptTip';

 export default {
    name:'DemonChat',
    components:{
        ChatBox,
+        voiceChatBox,
        ScriptTip
    },
    props: {
--- a/src/views/newMap/displayNew/scriptDisplay/component/covertOperation.js
+++ b/src/views/newMap/displayNew/scriptDisplay/component/covertOperation.js
@ -828,6 +828,29 @@ export const operateEnum = {
            // ticketId
            // memberId
        }
+    },
+    Conversation: {
+        type:'语音',
+        Conversation_Chat_Text: {
+            isList:true,
+            name:'发送文本消息',
+            params:[
+                {
+                    code:'content',
+                    name:'文本内容'
+                }
+            ]
+        },
+        Conversation_Chat_Audio_Base64: {
+            name:'发送语音消息',
+            isList:true,
+            params:[
+                {
+                    code:'fileBase64Str',
+                    name:'语音内容'
+                }
+            ]
+        }
    }
    //
 };
--- a/src/views/newMap/displayNew/scriptDisplay/scriptPreview/scriptButtonGroup.vue
+++ b/src/views/newMap/displayNew/scriptDisplay/scriptPreview/scriptButtonGroup.vue
@ -568,7 +568,7 @@ export default {
    .trainingButton{
        position: absolute;
        left: 5px;
-		z-index: 1;
+		z-index: 2;
    }
    .display-draft{
        position: absolute;
--- a/src/views/newMap/displayNew/scriptDisplay/scriptPreview/scriptPreviewChat.vue
+++ b/src/views/newMap/displayNew/scriptDisplay/scriptPreview/scriptPreviewChat.vue
@ -1,6 +1,13 @@
 <template>
  <div>
+    <voice-chat-box
+      v-if="$route.query.lineCode == '16'"
+      ref="chatbox"
+      :group="group"
+      :user-role="userRole"
+    />
    <chat-box
+      v-else
      ref="chatbox"
      :group="group"
      :user-role="userRole"
@ -10,11 +17,13 @@
 </template>
 <script>
 import ChatBox from '@/views/newMap/chatView/chatBox.vue';
+import voiceChatBox from '@/views/newMap/chatView/voiceChatBox.vue';
 import ScriptTip from '@/views/newMap/displayNew/scriptDisplay/component/scriptTip';
 export default {
    name:'ScriptPreviewChat',
    components:{
        ChatBox,
+        voiceChatBox,
        ScriptTip
    },
    props: {
--- a/src/views/newMap/displayNew/scriptDisplay/scriptRecord/index.vue
+++ b/src/views/newMap/displayNew/scriptDisplay/scriptRecord/index.vue
@ -43,7 +43,15 @@
      @resetChat="resetChat"
      @setReplace="setReplace"
    />
+    <voice-chat-box
+      v-if="$route.query.lineCode == '16'"
+      ref="chatbox"
+      :group="group"
+      :user-role="userRole"
+      :is-replace-bg="isReplaceBg"
+    />
    <chat-box
+      v-else
      ref="chatbox"
      :group="group"
      :user-role="userRole"
@ -63,6 +71,7 @@ import ModifyTime from '@/views/newMap/displayNew/demon/modifyTime';
 import { Notification } from 'element-ui';
 import { getSimulationMemberList} from '@/api/simulation';
 import ChatBox from '@/views/newMap/chatView/chatBox.vue';
+import voiceChatBox from '@/views/newMap/chatView/voiceChatBox.vue';

 export default {
    name: 'MenuScript',
@ -72,7 +81,8 @@ export default {
        MenuSchema,
        DemonMenu,
        TipScriptRecordNew,
-        ChatBox
+        ChatBox,
+        voiceChatBox
    },
    props: {
        offsetBottom: {
--- a/src/views/newMap/jointTrainingNew/menuDemon.vue
+++ b/src/views/newMap/jointTrainingNew/menuDemon.vue
@ -1,7 +1,8 @@
 <template>
  <div>
    <status-icon v-if="statusIconShow" ref="statusIcon" />
-    <chat-box v-if="!noChatBox" :group="group" :user-role="userRole" />
+    <voice-chat-box v-if="!noChatBox && $route.query.lineCode == '16'" :group="group" :user-role="userRole" />
+    <chat-box v-if="!noChatBox && $route.query.lineCode != '16'" :group="group" :user-role="userRole" />
    <!-- 地图没有报错-->
    <!-- 地图错误判断 -->
    <div v-if="!dataError&&hasOneButton" class="display_top_draft" :style="{top: statusIconShow ? offset + 60 + 'px':offset+'px'}">
@ -56,6 +57,7 @@
 import QrCode from '@/components/QrCode';
 import StatusIcon from '@/views/components/StatusIcon/statusIcon';
 import ChatBox from '../chatView/chatBox';
+import voiceChatBox from '../chatView/voiceChatBox';
 import Equipment from '@/views/newMap/displayNew/demon/equipment';
 import SetTime from '@/views/newMap/displayNew/demon/setTime';
 import ModifyTime from '@/views/newMap/displayNew/demon/modifyTime';
@ -74,6 +76,7 @@ export default {
    name: 'MenuDemonJoint',
    components: {
        ChatBox,
+        voiceChatBox,
        QrCode,
        SetTime,
        ModifyTime,
--- a/src/views/scriptManage/getAction.vue
+++ b/src/views/scriptManage/getAction.vue
@ -178,7 +178,7 @@ export default {
                        });
                    });
                    if (operateName) {
-                        const deviceTypeList = {Section:'区段', Switch:'道岔', Signal:'信号机', Stand:'站台', Station:'车站', TrainWindow:'车次窗', ControlConvertMenu:'控制模式', Driver:'司机', Train:'列车', CTC:'车务终端', RAIL:'票据/簿册'};
+                        const deviceTypeList = {Section:'区段', Switch:'道岔', Signal:'信号机', Stand:'站台', Station:'车站', TrainWindow:'车次窗', ControlConvertMenu:'控制模式', Driver:'司机', Train:'列车', CTC:'车务终端', RAIL:'票据/簿册', Conversation: '语音'};
                        const operateTypeName = deviceTypeList[operateType];
                        this.actionInfoList.push({id: element.id, isOperation: true, memberName: memberName, command: operateTypeName + '(' + operateName.label + ')', row: element, visible: false, condition: element.condition, isDelete:true, deleteLoading:false });
                    }