剧本代码调整

src/views/scriptManage/display/tipScriptRecordNew.vue

@@ -1,13 +1,31 @@
 <template>
-  <div>
   <div class="scriptRecordNew" :style="{bottom:(offsetBottom-15)+'px'}">
     <div v-show="isShow" class="scriptRecordNewIn">
       <el-tabs type="card">
         <el-tab-pane :label="$t('scriptRecord.scriptRecordTitle')+'('+language+')'">
-            <div style="padding:0px 10px;height: 240px;" />
+          <div class="eachScriptPanel">
+            <div class="scriptPanelLeft">
+              <div class="panelLeftSelect">
+                <span style="font-size:13px;">当前剧本角色:</span>
+                <el-select v-model="memberId" placeholder="请选择" :disabled="isPause" @change="changeRole">
+                  <el-option v-for="member in memberList" :key="member.id" :label="member.name" :value="member.id" />
+                </el-select>
+              </div>
+              <el-button-group class="button-group">
+                <el-button v-if="isPause" size="small" type="primary" :disabled="executeDisabled" @click="pauseScript">{{ $t('scriptRecord.drivingPause') }}</el-button>
+                <el-button v-else size="small" type="primary" :disabled="executeDisabled" @click="executePlayScript">恢复</el-button>
+                <el-button size="small" type="danger" @click="dumpScenesData">{{ $t('scriptRecord.resetScript') }}</el-button>
+                <el-button size="small" type="primary" :disabled="backDisabled" @click="saveScenesStage">{{ $t('scriptRecord.saveBackground') }}</el-button>
+                <el-button size="small" type="success" :loading="isSavingScript" @click="saveScenesData">{{ $t('scriptRecord.saveData') }}</el-button>
+              </el-button-group>
+            </div>
+            <div class="scriptPanelRight">
+              <get-action-new ref="getAction" :group="group" :size="size" @setAction="setAction" />
+            </div>
+          </div>
         </el-tab-pane>
-          <el-tab-pane label="选择剧本角色">
+        <el-tab-pane label="选择待出演剧本角色">
-            <div style="padding:0px 10px;height: 240px;">
+          <div class="eachScriptPanel">
             <add-role ref="addRole" :group="group" @refresh="refresh" />
           </div>
         </el-tab-pane>
@@ -15,21 +33,23 @@
     </div>
     <div class="scriptRecordNewTitle" @click="minisize">
       <span class="titleStyle">{{ $t('scriptRecord.scriptRecordTitle') }}</span>
-        <!-- <span class="titleStyle">( {{ $t('scriptRecord.language') }}: {{ $route.query.lang=="en"?$t('scriptRecord.english'):$t('scriptRecord.chinese') }} )</span> -->
     </div>
   </div>
-    <!-- <div class="selectRoles">
-      <div class="selectRolesTitle">选择成员角色</div>
-      <add-role ref="addRole" :group="group" @refresh="refresh" />
-    </div> -->
-  </div>
 </template>
 <script>
+import Vue from 'vue';
 import AddRole from '../scriptRecord/addRole';
+import GetActionNew from '../scriptRecord/getActionNew';
+import {getScriptPlayMemberNew, executeScriptNew, dumpScriptDataNew, saveScriptDataNew, saveScriptScenesNew, updateMapLocationNew, simulationPause} from '@/api/simulation';
+import ConstConfig from '@/scripts/ConstConfig';
+import {getDraftScriptByGroupNew} from '@/api/script';
+import Cookies from 'js-cookie';
+
 export default {
     name:'TipScriptRecordNew',
     components: {
-        AddRole
+        AddRole,
+        GetActionNew
     },
     props: {
         group: {
@@ -44,14 +64,52 @@ export default {
     data() {
         return {
             isShow:true,
-            language:''
+            language:'',
+            memberId:'',
+            isPause:false,
+            executeDisabled: false,
+            backDisabled: false,
+            autoSaveScript: null,
+            isSavingScript: false,
+            memberList:[],
+            size: {
+                width: 300,
+                height: 300
+            }
         };
     },
+    watch:{
+        '$store.state.map.mapViewLoadedCount': function (val) {
+            Vue.prototype.$jlmap.setOptions(this.$store.state.scriptRecord.mapLocation);
+            this.isPause = !(this.$store.state.scriptRecord.simulationPause);
+        },
+        '$store.state.scriptRecord.bgSet': function (val) {
+            this.backDisabled = val;
+        }
+    },
+    beforeDestroy() {
+        this.clearAutoSave();
+        this.$store.dispatch('scriptRecord/updateBgSet', false);
+    },
     mounted() {
+        this.initData();
         this.language = this.$route.query.lang == 'en' ? this.$t('scriptRecord.english') : this.$t('scriptRecord.chinese');
+        getDraftScriptByGroupNew(this.group).then(response=>{
+            this.backDisabled = response.data.bgSet;
+            this.$store.dispatch('scriptRecord/updateBgSet', response.data.bgSet);
+        });
     },
     methods:{
         refresh() {
+            this.initData();
+        },
+        initData() {
+            getScriptPlayMemberNew(this.group).then(resp => {
+                const lastData = JSON.stringify(resp.data);
+                this.memberList = this.covert(lastData, ConstConfig.ConstSelect.roleTypeNew);
+            }).catch(error => {
+                this.$message(error.message);
+            });
         },
         minisize() {
             if (this.isShow) {
@@ -59,28 +117,141 @@ export default {
             } else {
                 this.isShow = true;
             }
+        },
+        changeRole() {
+
+        },
+        covert(data, roleTypeList) {
+            let lastData = data;
+            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.forEach(each=>{
+                const name = each.name == undefined ? '' : '-' + each.name;
+                const deviceName = each.deviceName == undefined ? '' : '-' + each.deviceName;
+                each.name = each.role + deviceName + name;
+            });
+            return lastData;
+        },
+        setAction() {
+
+        },
+        pauseScript() {
+            simulationPause(this.group).then(resp => {
+                this.$store.dispatch('scriptRecord/updateSimulationPause', true);
+            }).catch(() => {
+                this.$messageBox(this.$t('scriptRecord.pauseFail'));
+            });
+        },
+        saveScenesData() {
+            this.isSavingScript = true;
+            saveScriptDataNew(this.group).then(resp => {
+                this.$message.success(this.$t('scriptRecord.saveDataSucess'));
+                this.isSavingScript = false;
+                // this.initAutoSaveScript();
+            }).catch(error => {
+                this.$messageBox(`${this.$t('scriptRecord.saveDataFail')}: ${error.message}`);
+                this.isSavingScript = false;
+                if (error.code === 40004 || error.code === 40005 || error.code === 40003) {
+                    this.clearAutoSave();
+                } else {
+                    // this.initAutoSaveScript();
+                }
+            });
+        },
+        saveScenesStage() {
+            const data = Vue.prototype.$jlmap.$options;
+            const group = this.$route.query.group;
+            const dataZoom = {scale: data.scaleRate, x: data.offsetX, y: data.offsetY};
+            saveScriptScenesNew(this.group).then(resp => {
+                updateMapLocationNew(group, dataZoom).then(response=>{
+                    this.$store.dispatch('scriptRecord/updateBgSet', true);
+                    this.$message.success(this.$t('scriptRecord.saveBackgroundSuceess'));
+                }).catch(error => {
+                    this.$messageBox(`${this.$t('scriptRecord.updateLocationFail')}: ${error.message}`);
+                });
+            }).catch((error) => {
+                this.$messageBox(`${this.$t('scriptRecord.saveBackgroundFail')}: ${error.message}`);
+            });
+        },
+        initAutoSaveScript() {
+            const timeout = 1000 * 20;
+            this.clearAutoSave(this.autoSaveScript);
+            this.autoSaveScript = setInterval(this.saveScenesData, timeout);
+        },
+        clearAutoSave() {
+            if (this.autoSaveScript) {
+                clearInterval(this.autoSaveScript);
+                this.autoSaveScript = null;
+            }
+        },
+        executePlayScript() {
+            executeScriptNew(this.group).then(resp => {
+                this.$store.dispatch('scriptRecord/updateSimulationPause', false);
+            }).catch(() => {
+                this.$messageBox(this.$t('scriptRecord.recoverFail'));
+            });
+        },
+        dumpScenesData() {
+            this.clearAutoSave();
+            const group = this.group;
+            this.$confirm(this.$t('scriptRecord.clearDataTip'), this.$t('global.tips'), {
+                confirmButtonText: this.$t('global.confirm'),
+                cancelButtonText: this.$t('global.cancel'),
+                type: 'warning'
+            }).then(() => {
+                dumpScriptDataNew(group).then(resp => {
+                    this.$parent.resetBeginTime();
+                    // this.$parent.$refs['display'].$refs['menuScript'].resetBeginTime();
+                    this.$refs['getAction'].loadInitData();
+                    this.$refs['addRole'].initData();
+                    this.initData();
+                    this.initAutoSaveScript();
+                    this.$store.dispatch('scriptRecord/updateBgSet', false);
+                    this.$message.success(this.$t('scriptRecord.resetDataSuccess'));
+                }).catch(() => {
+                    this.$messageBox(this.$t('scriptRecord.resetDataFail'));
+                });
+            });
         }
     }
 };
 </script>
 <style lang="scss" scoped>
-// .selectRoles{
-//     position: absolute;
-//     width: 700px;
-//     left: 5px;
-//     bottom: 424px;
-//     z-index: 10;
-//     background: #fff;
-//     height: 200px;
-//     border-radius: 5px;
-// }
 .selectRolesTitle{
 
+}
+.button-group{
+    position: absolute;
+    bottom: 0;
+}
+.eachScriptPanel{
+  height: 300px;
+  display: inline-block;
+  width:100%;
+}
+.scriptPanelLeft{
+    width: 330px;
+    height: 100%;
+    vertical-align: top;
+    position: absolute;
+    left: 0;
+    top: 0;
+}
+.scriptPanelRight{
+    display: inline-block;
+    width: 680px;
+    vertical-align: top;
 }
 .scriptRecordNew{
     position: absolute;
     width: 700px;
-    max-height: 400px;
     z-index: 10;
     padding-top: 28px;
     left: 50%;
@@ -104,5 +275,8 @@ export default {
     background: #fff;
     border-radius: 5px 5px 0px 0px ;
     box-shadow: -1px -1px 3px #656565;
+}
+.scriptPanelRight{
+
 }
 </style>

src/views/scriptManage/scriptRecord/getActionNew.vue

@@ -0,0 +1,186 @@
+<template>
+  <el-scrollbar ref="elActionScrollbar" wrap-class="scrollbar-wrapper" class="scriptBottom" :style="{width:370+'px',height:size.height+'px'}">
+    <el-timeline :reverse="reverse" class="el_timeline">
+      <el-timeline-item v-for="(actionInfo,index) in actionInfoList" :key="index">
+        <el-card>
+          <div class="actionTable">
+            <span class="detail" v-html="actionInfo.detail" />
+            <span class="otherInfo" v-html="actionInfo.otherInfo" />
+            <span v-if="actionInfo.isCoversition">
+              <span class="roleClass">{{ actionInfo.memberName }}</span>
+              <span>{{ $t('scriptRecord.speakTo') }}</span>
+              <span class="roleClass">{{ actionInfo.targetName }}</span>
+              <span>: </span>
+              <span>{{ actionInfo.reply }}</span>
+            </span>
+            <span v-else>
+              <span class="roleClass">{{ actionInfo.memberName }}</span>
+              <span>{{ $t('scriptRecord.executeCommandTips') }}</span>
+              <span class="commandStyle">{{ actionInfo.command }}</span>
+            </span>
+          </div>
+          <div class="btnGroup">
+            <!-- <el-button v-if="actionInfo.visible" type="primary" size="mini" style="margin-left:10px;" @click="modifyAction(actionInfo.row)">{{ $t('scriptRecord.modifyConversitionButton') }}</el-button> -->
+            <!-- <el-button type="danger" size="mini" @click="deleteAction(actionInfo.id)">删除</el-button> -->
+          </div>
+        </el-card>
+      </el-timeline-item>
+    </el-timeline>
+  </el-scrollbar>
+</template>
+<script>
+import Cookies from 'js-cookie';
+import {getScriptAllAction, getScriptPlayMemberNew } from '@/api/simulation';
+import CMD from '@/scripts/cmdPlugin/CommandEnum';
+import CommandHandler from '@/scripts/cmdPlugin/CommandHandler';
+import ConstConfig from '@/scripts/ConstConfig';
+export default {
+    name: 'GetActionNew',
+    props: {
+        group: {
+            type: String,
+            required: true
+        },
+        size: {
+            type: Object,
+            required: true
+        }
+    },
+    data() {
+        return {
+            actionInfoList: [],
+            deviceCommandList: [],
+            reverse: false,
+            loading: true,
+            // behaviorName:"",
+            memberName: ''
+        };
+    },
+    computed:{
+        // drawWay() {
+        //     const drawWay = this.$route.query.drawWay;
+        //     return drawWay && JSON.parse(drawWay);
+        // }
+    },
+    watch: {
+        actionInfoList: function(val) {
+            this.$nextTick(function() {
+                var div = this.$refs['elActionScrollbar'].$refs['wrap'];
+                div.scrollTop = this.$refs['elActionScrollbar'].wrap.scrollHeight;
+            });
+        }
+    },
+    mounted() {
+        this.loadInitData();
+    },
+    methods: {
+        loadInitData() {
+            this.loadOtherData(this.$route.query);
+        },
+        covert(data, roleTypeList) {
+            let lastData = data;
+            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.forEach(each=>{
+                const name = each.name == undefined ? '' : '-' + each.name;
+                const deviceName = each.deviceName == undefined ? '' : '-' + each.deviceName;
+                each.name = each.role + deviceName + name;
+            });
+            return lastData;
+        },
+        loadOtherData(obj) {
+            const group = obj.group;
+            getScriptPlayMemberNew(this.group).then(response => {
+                const lastData = JSON.stringify(response.data);
+                const memberVOList = this.covert(lastData, ConstConfig.ConstSelect.roleTypeNew);
+                getScriptAllAction(group).then(resp=>{
+                    this.actionInfoList = [];
+                    const actionList = resp.data;
+                    actionList.forEach(element => {
+                        const member = memberVOList.find(elem=>{ return elem.id == element.memberId; });
+                        const memberName = member.name;
+                        switch (element.type) {
+                        case 'Conversation':
+                        {
+                            const target = memberVOList.find(elem=>{ return elem.id == element.targetId; });
+                            const targetName = target.name;
+                            this.actionInfoList.push({id: element.id, isCoversition: true, memberName: memberName, targetName: targetName, reply: element.reply, row: element, visible: true});
+                            break;
+                        }
+                        case 'Command':
+                        {
+                            const command = CommandHandler.getScriptDefinition(element.operationType);
+                            let operateType = command.operate.split('_')[0];
+                            const data = command.operate.toUpperCase();
+                            if (operateType == 'CM') {
+                                operateType = 'ControlConvertMenu';
+                            }
+                            const operateName = CMD[operateType]['CMD_' + data];
+                            const deviceTypeList = {Section:'区段', Switch:'道岔', Signal:'信号机', Stand:'站台', Station:'车站', TrainWindow:'车次窗', ControlConvertMenu:'控制模式'};
+                            const operateTypeName = deviceTypeList[operateType];
+                            this.actionInfoList.push({id: element.id, isCoversition: false, memberName: memberName, command: operateTypeName + '(' + operateName.label + ')', row: element, visible: false});
+                            break;
+                        }
+                        }
+                    });
+                }).catch(error => {
+                    this.$message(error.message);
+                });
+            }).catch(error => {
+                this.$message(error.message);
+            });
+        },
+        reloadTable() {
+            this.loadInitData();
+        }
+        // modifyAction(row) {
+        //     this.$emit('setAction', row);
+        // }
+    }
+};
+</script>
+<style rel="stylesheet/scss" lang="scss" scoped>
+    @import "src/styles/mixin.scss";
+    .actionTable{
+        width:280px;
+        padding: 15px 0px 10px 15px;
+        display: inline-block;
+        line-height: 200%;
+    }
+    .btnGroup{
+        padding: 10px 10px 10px 10px;
+        float: right;
+        vertical-align: top;
+        display: inline-block;
+    }
+    .el_timeline{
+        width: 350px;
+        margin-top:5px;
+        padding-left: 25px;
+    }
+    .el-timeline{
+        font-size:13px;
+    }
+    .roleClass{
+        color:#409EFF
+    }
+    .commandStyle{
+        color:#F00;
+    }
+    .scriptPane{
+        height: 100%;
+        padding-top:200px;
+    }
+    .scriptBottom{
+        margin-left:300px;
+        margin-top: 0px;
+        font-size:13px;
+    }
+</style>