rt-sim-training-client/src/views/scriptManage/scriptRecord/getAction.vue

<template>
        <div class="actionPaneInner">
            <div class="actionList">
                <span class="titleStyle">剧本编制</span>
            </div>
            <div class="tab-pane-big">
                <el-card class="scriptTop">
                    <add-role :group="group" ref="addRole"></add-role>
                </el-card>
                <div class="scriptPane">
                    <!-- <el-card class="scriptTop">
                        <template>
                            <div class="selectRole">选择角色</div>
                            <el-transfer v-model="selectRoleData" :data="allRoleData" class="elTransfer" :titles="['待选成员角色', '已选成员角色']"></el-transfer>
                        </template>
                    </el-card> -->

                    <div class="scriptBottom">
                        <el-scrollbar wrapClass="scrollbar-wrapper" ref="elScrollbar" class="elScrollbar">
                            <add-action ref="addBehavior" :group="group" @create="create" :buttonName="buttonName" :operateType="operateType" @modifyButtonName="modifyButtonName" class="addScript"></add-action>
                        </el-scrollbar>
                        <div class="block actionListTable">
                            <el-scrollbar wrapClass="scrollbar-wrapper" ref="elActionScrollbar">
                            <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>
                                            <span class="otherInfo" v-html="actionInfo.otherInfo"></span>
                                            <span v-if="actionInfo.isCoversition">
                                                <span class="roleClass">{{actionInfo.memberName}}</span>
                                                <span>对</span>
                                                <span class="roleClass">{{actionInfo.targetName}}</span>
                                                <span>: </span>
                                                <span>{{actionInfo.reply}}</span>
                                            </span>
                                            <span v-else>
                                                <span class="roleClass">{{actionInfo.memberName}}</span>
                                                <span>执行指令: </span>
                                                <span class="commandStyle">{{actionInfo.command}}</span>
                                            </span>
                                        </div>
                                        <div class="btnGroup">
                                            <el-button type="primary" size="mini" style="margin-left:10px;" @click="modifyAction(actionInfo.row)" v-if="actionInfo.visible">修改</el-button>
                                            <!-- <el-button type="danger" size="mini" @click="deleteAction(actionInfo.id)">删除</el-button> -->
                                        </div>
                                    </el-card>
                                </el-timeline-item>
                            </el-timeline>
                            </el-scrollbar>
                        </div>
                    </div>
                </div>
            </div>
        </div>
</template>
<script>
    import Vue from 'vue';
    import AddAction from './addAction';
    import AddRole from './addRole';
    import {getScriptRecord,deleteScriptAction,getAvailableDeviceCommand,getScriptPlayMember,getScriptMemberData} from '@/api/simulation';
    import ConstConfig from '@/scripts/ConstConfig';
    export default {
        name: 'getAction',
        props: {
            group: {
                type: String,
                required: true
            },
        },
        data() {
            return {
                // actionList:[],
                actionInfoList:[],
                deviceCommandList:[],
                reverse:true,
                loading:true,
                behaviorName:"",
                memberName:"",
                operateType:"add",
                buttonName:"添加对话",
            }
        },
        components: {
            AddAction,
            AddRole
        },
        mounted(){
            this.loadInitData();
        },
        watch:{
            actionInfoList: function(val){
                this.$nextTick(function(){
                    var div = this.$refs['elActionScrollbar'].$refs['wrap'];
                    div.scrollTop=this.$refs['elActionScrollbar'].wrap.scrollHeight;
                });
            }
        },
        methods:{
            loadInitData() {
                let group=this.$route.query.group;
                let data={role:"Driver"};
                getAvailableDeviceCommand(data).then(response=>{
                    this.deviceCommandList=response.data;
                    this.loadOtherData(this.$route.query);
                });
            },
            loadOtherData(obj){
                let group=obj.group;
                getScriptRecord(group).then(response=>{
                    this.$store.dispatch('scriptRecord/updateBgSet', response.data.bgSet);
                    this.actionInfoList=[];
                    let roleTypeList=ConstConfig.ConstSelect.roleType;
                    let memberVOList=JSON.stringify(response.data.memberVOList);
                    roleTypeList.forEach(function(element){
                        let rolename=element.value;
                        memberVOList=memberVOList.replace(new RegExp(rolename,'g'),element.label);
                    });
                    memberVOList=JSON.parse(memberVOList);
                    let actionList=response.data.actionVOList;
                    actionList.forEach(element => {
                        let member=memberVOList.find(elem=>{return elem.id==element.memberId});
                        let memberName=member.name==undefined?"":" - "+member.name;
                        switch(element.type)
                        {
                            case "Conversation":
                            {
                                let target=memberVOList.find(elem=>{return elem.id==element.targetId});
                                let targetName=target.name==undefined?"":" - "+target.name;
                                this.actionInfoList.push({id:element.id,isCoversition:true,memberName:member.role+memberName,targetName:target.role+targetName,reply:element.reply,row:element,visible:true});
                                break;
                            }
                            case "Command":
                            {
                                let deviceCommand=this.deviceCommandList.find(elem=>{return elem.deviceCommand==element.deviceCommand});
                                switch(element.deviceCommand)
                                {
                                    case 'Train_Manual_Route_Blocking_Drive':
                                    {
                                        this.actionInfoList.push({id:element.id,isCoversition:false,memberName:member.role+memberName,command:deviceCommand.label,row:element,visible:false});
                                        break;
                                    }
                                    case 'Train_Manual_Limit_Drive':
                                    {
                                        this.actionInfoList.push({id:element.id,isCoversition:false,memberName:member.role+memberName,command:deviceCommand.label,row:element,visible:false});
                                        break;
                                    }
                                    default:
                                    {
                                    }
                                }
                                break;
                            }
                        }
                    });
                    if(response.data.mapLocation)
                    {
                        let mapLocation={"offsetX":response.data.mapLocation.x,"offsetY":response.data.mapLocation.y,"scaleRate":response.data.mapLocation.scale};
                        this.$store.dispatch('scriptRecord/updateMapLocation', mapLocation);
                    }
                    this.loading=false;
                });
            },
            deleteAction(row){
                let group=this.$props.group;
                deleteScriptAction(group,row).then(resp => {
                    this.reloadTable();
                    this.$message.success('删除行为动作成功');
                }).catch(error => {
                    this.$messageBox(`删除行为动作失败: ${error.message}`);
                });
            },
            reloadTable(){
                this.loadInitData();
            },
            create(data){
                this.reloadTable();
            },
            modifyAction(row){
                this.operateType="modify";
                this.buttonName="修改对话"
                this.$refs.addBehavior.doShow(row);
            },
            modifyButtonName(){
                this.buttonName="添加对话",
                this.operateType="add"
            }
        }
    }
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
    @import "src/styles/mixin.scss";
    .actionPaneInner{
        height:100%;
        padding-top:45px;
    }
    .addScript{
        float:left;
        width:380px;
        display: inline-block;
    }
    .actionListTable{
        font-size: 15px;
        width:380px;
        display: inline-block;
        margin-left:380px;
        height:100%;
    }
    .actionList{
        height: 35px;
        font-size: 18px;
        padding-top: 5px;
        position: absolute;
        top: 0;
        left: 0;
        width: 740px;
        border-bottom: 1px #ccc solid;
    }
    .titleStyle{
        margin-left:10px;
    }
    .tab-pane-big{
        height:100%;
        padding-bottom: 20px;
        position: relative;
    }
    .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;
    }
    .vertialLine{
        height: 100%;
        margin-left: 440px;
        border-right: 1px #dadada solid;
        position:absolute;
        width: 0px;
    }
    .el_timeline{
        width: 360px;
        margin-top:10px;
    }
    .elScrollbar{
        width: 380px;
        position: absolute;
    }
    .roleClass{
        color:#409EFF
    }
    .commandStyle{
        color:#F00;
    }
    .scriptPane{
        height: 100%;
        padding-top:200px;
    }
    .scriptBottom{
        height: 100%;
        position: relative;
    }
    .scriptTop{
        position: absolute;
        top: 0;
        left: 20px;
        padding: 10px 10px;
        width: 730px;
    }
    // .elTransfer{
    //     height:230px;
    //     margin-left:100px;
    // }
    // .selectRole{
    //     font-size: 15px;
    //     padding: 0px 20px 15px 15px;
    // }
</style>