273 lines
10 KiB
Vue
273 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.isStartCoversition">
|
|
<span class="roleClass">{{ actionInfo.memberName }}</span>
|
|
<span>邀请</span>
|
|
<span class="roleClass">{{ actionInfo.targetName }}</span>
|
|
<span>开始会话</span>
|
|
</span>
|
|
<span v-else-if="actionInfo.isDrive">
|
|
<span class="roleClass">{{ actionInfo.memberName }}</span>
|
|
<span>把车开到</span>
|
|
<span class="commandStyle">区段{{ actionInfo.targetName }}</span>
|
|
</span>
|
|
<span v-else-if="actionInfo.isCoversition">
|
|
<span class="roleClass">{{ actionInfo.memberName }}</span>
|
|
<!-- <span>{{ $t('scriptRecord.speakTo') }}</span> -->
|
|
<!-- <span class="roleClass">{{ actionInfo.targetName }}</span> -->
|
|
<span>: </span>
|
|
<span v-if="!isModify">{{ actionInfo.reply }}</span>
|
|
<textarea v-else v-model="modifyText" type="text" class="modifyText" />
|
|
</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 && !isModify" type="primary" size="mini" style="margin-left:10px;" @click="modifyAction(actionInfo.row)">{{ $t('scriptRecord.modifyConversitionButton') }}</el-button>
|
|
<el-button v-if="actionInfo.visible && isModify" :loading="modifyTextLoading" type="danger" size="mini" style="margin-left:10px;" @click="confirmModify(actionInfo.row)">确定</el-button>
|
|
<el-button v-if="actionInfo.visible && isModify" type="" size="mini" style="margin-left:10px;" @click="cancleModify">取消</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, getScriptMemberDataNew, modifyScriptActionNew } 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: [],
|
|
memberVOList:[],
|
|
reverse: false,
|
|
loading: true,
|
|
isModify:false,
|
|
modifyText:'',
|
|
modifyTextLoading:false,
|
|
// 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;
|
|
});
|
|
},
|
|
'$store.state.socket.scriptAction':function(val) {
|
|
this.covertData(this.memberVOList, val);
|
|
}
|
|
},
|
|
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;
|
|
},
|
|
covertData(memberVOList, element) {
|
|
const member = memberVOList.find(elem=>{ return elem.id == element.memberId; });
|
|
const memberName = member.name;
|
|
switch (element.type) {
|
|
case 'Start_Conversation': {
|
|
// isStartCoversition
|
|
const targetNameList = [];
|
|
element.conversationMemberIds.forEach(id=>{
|
|
if (member.id != id) {
|
|
const userName = memberVOList.find(elem=>{ return elem.id == id; });
|
|
targetNameList.push(userName.name);
|
|
}
|
|
});
|
|
this.actionInfoList.push({id: element.id, isStartCoversition: true, memberName: memberName, targetName:targetNameList.toString() });
|
|
break;
|
|
}
|
|
case 'Drive': {
|
|
this.actionInfoList.push({id: element.id, isDrive: true, memberName: memberName, targetName:this.covertSection(element.targetSectionCode)});
|
|
break;
|
|
}
|
|
case 'Conversation':
|
|
{
|
|
this.actionInfoList.push({id: element.id, isCoversition: true, memberName: memberName, reply: element.content, row: element, visible: true});
|
|
break;
|
|
}
|
|
case 'Command':
|
|
{
|
|
// const command = CommandHandler.getScriptDefinition(element.operationType);
|
|
const commandName = element.operationType;
|
|
let operateType = commandName.split('_')[0];
|
|
const data = commandName.toUpperCase();
|
|
if (operateType == 'CM') {
|
|
operateType = 'ControlConvertMenu';
|
|
}
|
|
const operateName = CMD[operateType]['CMD_' + data];
|
|
const deviceTypeList = {Section:'区段', Switch:'道岔', Signal:'信号机', Stand:'站台', Station:'车站', TrainWindow:'车次窗', ControlConvertMenu:'控制模式', Driver:'司机'};
|
|
const operateTypeName = deviceTypeList[operateType];
|
|
this.actionInfoList.push({id: element.id, isCoversition: false, memberName: memberName, command: operateTypeName + '(' + operateName.label + ')', row: element, visible: false});
|
|
break;
|
|
}
|
|
}
|
|
},
|
|
covertSection(sectionCode) {
|
|
const section = this.$store.getters['map/getDeviceByCode'](sectionCode);
|
|
if (section && section.name) {
|
|
return section.name;
|
|
} else {
|
|
return '';
|
|
}
|
|
},
|
|
loadOtherData(obj) {
|
|
const group = obj.group;
|
|
getScriptMemberDataNew(this.group).then(response => {
|
|
const lastData = JSON.stringify(response.data);
|
|
this.memberVOList = this.covert(lastData, ConstConfig.ConstSelect.roleTypeNew);
|
|
getScriptAllAction(group).then(resp=>{
|
|
this.actionInfoList = [];
|
|
const actionList = resp.data;
|
|
actionList.forEach(element => {
|
|
this.covertData(this.memberVOList, element);
|
|
});
|
|
}).catch(error => {
|
|
this.$message(error.message);
|
|
});
|
|
}).catch(error => {
|
|
this.$message(error.message);
|
|
});
|
|
},
|
|
reloadTable() {
|
|
this.loadInitData();
|
|
},
|
|
modifyAction(row) {
|
|
this.modifyText = row.content;
|
|
this.isModify = true;
|
|
},
|
|
cancleModify() {
|
|
this.modifyText = '';
|
|
this.isModify = false;
|
|
this.modifyTextLoading = false;
|
|
},
|
|
confirmModify(row) {
|
|
if (this.modifyText != row.content) {
|
|
const data = {id:row.id};
|
|
data.content = this.modifyText;
|
|
this.modifyTextLoading = true;
|
|
modifyScriptActionNew(this.group, data).then(response=>{
|
|
this.modifyText = '';
|
|
this.isModify = false;
|
|
this.modifyTextLoading = false;
|
|
this.reloadTable();
|
|
this.$store.dispatch('scriptRecord/updateCoversitionInfo');
|
|
});
|
|
} else {
|
|
if (!this.modifyText) {
|
|
this.$messageBox('请输入修改的会话');
|
|
} else {
|
|
this.modifyText = '';
|
|
this.isModify = false;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
};
|
|
</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: 0px 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;
|
|
}
|
|
.modifyText{
|
|
height: 70px;
|
|
border: 1px #ccc solid;
|
|
border-radius: 3px;
|
|
width: 270px;
|
|
outline: none;
|
|
font-size: 13px;
|
|
resize: none;
|
|
vertical-align: top;
|
|
padding: 5px;
|
|
line-height: 20px;
|
|
}
|
|
</style>
|