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

<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 {deleteScriptAction, getAvailableDeviceCommand, getScriptRecord, 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: 'GetAction',
    props: {
        group: {
            type: String,
            required: true
        },
        size: {
            type: Object,
            required: true
        }
    },
    data() {
        return {
            actionInfoList: [],
            deviceCommandList: [],
            reverse: true,
            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() {
            // const group=this.$route.query.group;
            const data = {role: 'Driver'};
            if (!this.drawWay) {
                getAvailableDeviceCommand(data).then(response=>{
                    this.deviceCommandList = response.data;
                    this.loadOtherData(this.$route.query);
                });
            } else {
                this.loadOtherData(this.$route.query);
            }
        },
        loadOtherData(obj) {
            const group = obj.group;
            if (this.drawWay) {
                getScriptPlayMemberNew(this.group).then(response => {
                    const memberVOList = response.data;
                    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.operationId);
                                const operateType = command.operate.split('_')[0];
                                const data = command.operate.toUpperCase();
                                const operateName = CMD[operateType]['CMD_' + data];
                                const deviceTypeList = {Section:'区段', Switch:'道岔', Signal:'信号机', Stand:'站台', Station:'车站', TrainWindow:'车次窗'};
                                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);
                });

            } else {
                getScriptRecord(group).then(response=>{
                    this.$store.dispatch('scriptRecord/updateBgSet', response.data.bgSet);
                    this.actionInfoList = [];
                    const roleTypeList = ConstConfig.ConstSelect.roleType;

                    let memberVOList = JSON.stringify(response.data.memberVOList);
                    roleTypeList.forEach(function(element) {
                        const rolename = element.value;
                        memberVOList = memberVOList.replace(new RegExp(rolename, 'g'), element.label);
                    });
                    memberVOList = JSON.parse(memberVOList);
                    const actionList = response.data.actionVOList;

                    actionList.forEach(element => {

                        const member = memberVOList.find(elem=>{ return elem.id == element.memberId; });

                        const memberName = member.name ? ' - ' + member.name : '';
                        switch (element.type) {
                        case 'Conversation':
                        {
                            const target = memberVOList.find(elem=>{ return elem.id == element.targetId; });
                            const targetName = target.name ? ' - ' + 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':
                        {
                            const deviceCommand = this.deviceCommandList.find(elem=>{ return elem.deviceCommand == element.deviceCommand; });
                            this.actionInfoList.push({id: element.id, isCoversition: false, memberName: member.role + memberName, command: deviceCommand.label, row: element, visible: false});
                        // 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;
                        // }
                        // }
                        }
                        }
                    });
                    if (response.data.mapLocation) {
                        const 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) {
            const group = this.$props.group;
            if (!this.drawWay) {
                deleteScriptAction(group, row).then(resp => {
                    this.reloadTable();
                    this.$message.success('删除行为动作成功');
                }).catch(error => {
                    this.$messageBox(`删除行为动作失败: ${error.message}`);
                });
            }
        },
        reloadTable() {
            this.loadInitData();
        },
        modifyAction(row) {
            if (!this.drawWay) {
                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:20px;
        padding-left: 25px;
    }
    .roleClass{
        color:#409EFF
    }
    .commandStyle{
        color:#F00;
    }
    .scriptPane{
        height: 100%;
        padding-top:200px;
    }
    .scriptBottom{
        margin-left:360px;
        margin-top: 20px;
    }
</style>