rt-sim-training-client/src/views/scriptManage/scriptRecord/getAction.vue
joylink_cuiweidong 70f06409df 综合演练 语音聊天接口调整
剧本预览 代码调整
2020-05-14 14:36:15 +08:00

237 lines
10 KiB
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>