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 {getScriptRecord, deleteScriptAction, getAvailableDeviceCommand } from '@/api/simulation';
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: ''
		};
	},
	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'};
			getAvailableDeviceCommand(data).then(response=>{
				this.deviceCommandList=response.data;
				this.loadOtherData(this.$route.query);
			});
		},
		loadOtherData(obj) {
			const group=obj.group;
			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; });
						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;
			deleteScriptAction(group, row).then(resp => {
				this.reloadTable();
				this.$message.success('删除行为动作成功');
			}).catch(error => {
				this.$messageBox(`删除行为动作失败: ${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:20px;
        padding-left: 25px;
    }
    .roleClass{
        color:#409EFF
    }
    .commandStyle{
        color:#F00;
    }
    .scriptPane{
        height: 100%;
        padding-top:200px;
    }
    .scriptBottom{
        margin-left:360px;
        margin-top: 20px;
    }
</style>