rt-sim-training-client/src/views/scriptManage/tipScriptRecord.vue
2020-11-05 18:02:02 +08:00

684 lines
27 KiB
Vue

<template>
<div style="position:relative">
<div class="scriptRecordNew" :style="{bottom:(offsetBottom-15)+'px'}">
<div v-show="isShow" class="scriptRecordNewIn">
<el-tabs type="card">
<el-tab-pane :label="$t('scriptRecord.scriptRecordTitle')+'('+language+')'">
<div class="eachScriptPanel">
<div class="scriptPanelLeft">
<div class="panelLeftSelect">
<div>
<span style="font-size:13px;">当前剧本角色:</span>
<span style="font-size:13px;">{{ getRoleName(memberId) }}</span>
</div>
<div class="quickChange">
<!-- <div class="quickChange_head">快捷切换</div> -->
<div class="quickChangeList" style="margin:10px 0px 10px 0px;overflow-y:auto;height:200px;">
<div v-for="member in quickChangeMember.list" :key="member.id" class="setGroupOut">
<span style="font-size: 14px">{{ member.normalName }}</span>
<span class="setGroup">
<span v-if="member.userId" class="hasSetted">已设置</span>
<span v-else class="settingBtn" @click="changeRole(member)">设置</span>
</span>
</div>
</div>
</div>
</div>
<el-button-group v-if="!isReplaceBg" class="button-group">
<el-button v-if="isPause" size="small" type="primary" :disabled="executeDisabled" @click="pauseScript">{{ $t('scriptRecord.drivingPause') }}</el-button>
<el-button v-else size="small" type="primary" :disabled="executeDisabled" @click="executePlayScript">恢复</el-button>
<el-button size="small" type="danger" :disabled="!backDisabled" @click="dumpScenesData">{{ $t('scriptRecord.resetScript') }}</el-button>
<el-button v-if="backDisabled" size="small" type="primary" @click="startReplaceBg">{{ $t('scriptRecord.startReplaceBg') }}</el-button>
<el-button v-else size="small" type="primary" :disabled="backDisabled" @click="saveScenesStage">{{ $t('scriptRecord.saveBackground') }}</el-button>
<el-button size="small" type="success" :loading="isSavingScript" @click="saveScenesData">{{ $t('scriptRecord.saveData') }}</el-button>
</el-button-group>
</div>
<div class="scriptPanelRight">
<get-action-new ref="getAction" :group="group" :size="size" :member-list="memberList" @showConditionManage="showConditionManage" />
</div>
</div>
<template v-if="isReplaceBg">
<div class="mask" />
<el-button-group class="button-group">
<el-button v-if="isPause" size="small" type="primary" :disabled="executeDisabled" @click="pauseScript">{{ $t('scriptRecord.drivingPause') }}</el-button>
<el-button v-else size="small" type="primary" :disabled="executeDisabled" @click="executePlayScript">恢复</el-button>
<el-button size="small" type="primary" @click="confirmReplaceBg">{{ $t('scriptRecord.confirmReplaceBg') }}</el-button>
<el-button size="small" type="info" @click="cancelReplaceBg">{{ $t('scriptRecord.cancelReplaceBg') }}</el-button>
</el-button-group>
</template>
</el-tab-pane>
<el-tab-pane label="所有成员">
<div class="eachScriptPanel">
<all-script-role
ref="allScriptRole"
:member-id="memberId"
:tree-data="treeData"
:group="group"
@changeMode="changeMode"
@addMember="addMember"
/>
</div>
</el-tab-pane>
</el-tabs>
</div>
<div class="scriptRecordNewTitle" @click="minisize">
<span class="titleStyle">{{ $t('scriptRecord.scriptRecordTitle') }}</span>
</div>
</div>
<add-script-member ref="addScriptMember" @addScriptMember="addScriptMember" />
<condition-manage ref="conditionManage" @clearConditionActionId="clearConditionActionId" />
</div>
</template>
<script>
import Vue from 'vue';
import Cookies from 'js-cookie';
import {getDraftScriptByGroupNew, getAllSelectedScriptRole } from '@/api/script';
import ConstConfig from '@/scripts/ConstConfig';
import AddScriptMember from './addScriptMember';
import {covertMemberData} from '@/views/newMap/displayNew/utils';
import GetActionNew from './getAction';
import AllScriptRole from './allScriptRole';
import { getToken } from '@/utils/auth';
import ConditionManage from './conditionManage';
import {executeScriptNew, dumpScriptDataNew, saveScriptDataNew, saveScriptScenesNew, updateMapLocationNew, simulationPause, startReplaceBg, confirmReplaceBg, cancelReplaceBg} from '@/api/simulation';
export default {
name:'TipScriptRecord',
components: {
GetActionNew,
AllScriptRole,
AddScriptMember,
ConditionManage
},
props: {
group: {
type: String,
required: true
},
offsetBottom:{
type: Number,
required: true
},
offset:{
type: Number,
required: true
},
isReplaceBg: {
type: Boolean,
default: false
}
},
data() {
return {
isShow:true,
isFirst:true,
language:'',
isPause:false,
executeDisabled: false,
backDisabled: false,
autoSaveScript: null,
isSavingScript: false,
mapLocation:null,
quickChangeMember:{list:[]},
size: {
width: 300,
height: 300
},
openWindow:null,
treeData:[],
memberList:[],
driverList:[],
activeTrainList:[],
oldMember:{id:null, type:''}
};
},
computed:{
memberId() {
return this.$store.state.scriptRecord.updateRoleId;
},
memberType() {
return this.$store.state.scriptRecord.userRole;
},
orignalUserRoleId() {
return this.$store.state.training.orignalUserRoleId;
}
},
watch:{
'$store.state.map.mapViewLoadedCount': function (val) {
Vue.prototype.$jlmap.setOptions(this.$store.state.scriptRecord.mapLocation);
this.isPause = !(this.$store.state.scriptRecord.simulationPause);
if (this.mapLocation) {
const newMapLocation = {'offsetX': this.mapLocation.x, 'offsetY': this.mapLocation.y, 'scaleRate': this.mapLocation.scale};
Vue.prototype.$jlmap.setOptions(newMapLocation);
}
},
'$store.state.scriptRecord.bgSet': function (val) {
this.backDisabled = val;
},
'$store.state.scriptRecord.simulationPause': function(val) {
this.isPause = !(this.$store.state.scriptRecord.simulationPause);
},
'memberList':function(val) {
if (this.isFirst) {
this.isFirst = false;
this.initData();
}
},
'$store.state.training.memberList': function (val) {
if (val && val.length) {
const memberData = this.$store.state.training.memberData;
this.driverList = [];
this.treeData = [];
if (this.$store.state.training.started) {
this.activeTrainList = this.$store.state.map.activeTrainList;
}
// 获取仿真成员列表
const result = covertMemberData(this.activeTrainList, Object.values(memberData));
this.driverList = result.driverList;
this.treeData = [{
label: '行调',
id: 'dispatcher',
type: 'role',
children: result.deviceListData[0]
}, {
label: '车站值班员',
id: 'stationSupervisor',
type: 'role',
children: result.deviceListData[2]
}, {
label: '司机',
id: 'driver',
type: 'role',
children: result.deviceListData[3]
}, {
label: '通号',
id: 'maintainer',
type: 'role',
children: result.deviceListData[1]
}, {
label: '车辆段',
id: 'depotDispatcher',
type: 'role',
children: result.deviceListData[4]
}, {
label: '上级部门',
id: 'parentDepartment',
type: 'role',
children: result.deviceListData[5]
}, {
label: '电力调度',
id: 'electricDispatcher',
type: 'role',
children: result.deviceListData[6]
},
{
label: '停车场信号楼',
id: 'parkingLotSignalBuilding',
type: 'role',
children: result.deviceListData[7]
}
// PARENT_DEPARTMENT
];
this.memberList = result.lastMemberList;
}
},
// 按计划行车的列车列表更新(更新司机列表)
'$store.state.map.activeTrainListChange': function (val) {
// driverList
const activeTrainList = this.$store.state.map.activeTrainList;
if (this.driverList.length > 0) {
const driverList = [];
if (activeTrainList && activeTrainList.length) {
activeTrainList.sort();
activeTrainList.forEach(groupNumber => {
const drivers = this.driverList.find(driver=>{
return driver.deviceCode == groupNumber;
});
if (drivers) {
driverList.push(drivers);
}
});
}
// this.memberData = [...this.treeData[0].children, ...this.treeData[1].children, ...this.treeData[2].children, ...this.treeData[3].children, ...this.treeData[4].children];
this.treeData[2].children = driverList;
} else {
this.activeTrainList = activeTrainList;
}
}
},
mounted() {
this.language = this.$route.query.lang == 'en' ? this.$t('scriptRecord.english') : this.$t('scriptRecord.chinese');
getDraftScriptByGroupNew(this.group).then(response=>{
this.backDisabled = response.data.bgSet;
this.mapLocation = response.data.mapLocation;
this.$store.dispatch('scriptRecord/updateBgSet', response.data.bgSet);
});
},
methods:{
initData() {
getAllSelectedScriptRole(this.group).then(res=>{
res.data.forEach(each=>{
const eachMember = this.memberList.find(member=>{ return member.id == each.id; });
if (eachMember) {
this.quickChangeMember.list.push(eachMember);
}
});
this.oldMember = {id:this.memberId, type:this.memberType};
});
},
addScriptMember(member) {
member.userId = '';
member.disabled = false;
const lastData = JSON.stringify([member]);
const covertmember = this.covert(lastData, ConstConfig.ConstSelect.roleTypeNew);
const newMember = covertmember[0];
this.memberList.push(newMember);
const deviceTypeList = ['行调', '行值', '司机', '通号', '车辆段调度', '上级部门', '电力调度', '停车场信号楼'];
const index = deviceTypeList.indexOf(newMember.type);
if (index >= 0) {
const treeDataIn = this.treeData[index];
treeDataIn.children.push(newMember);
this.treeData[index] = treeDataIn;
}
},
addMember() {
this.$refs.addScriptMember.doShow();
},
changeRole(member) {
this.$refs.allScriptRole.changeRole(member);
},
getRoleName(memberId) {
const currentMember = this.memberList.find(member=>{
return member.id == memberId;
});
if (currentMember) {
return currentMember.normalName;
}
return '';
},
minisize() {
if (this.isShow) {
this.isShow = false;
} else {
this.isShow = true;
}
},
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=>{
let deviceName = '';
if (each.deviceCode) {
const device = this.$store.getters['map/getDeviceByCode'](each.deviceCode);
if (device) {
if (device._type == 'Train') {
deviceName = device.groupNumber;
} else {
deviceName = device.name;
}
} else {
deviceName = each.deviceCode;
}
}
each.deviceName = deviceName;
each.normalName = each.type + deviceName + (each.name ? '' + each.name : '');
each.label = each.normalName;
});
return lastData;
},
pauseScript() {
simulationPause(this.group).then(resp => {
this.$store.dispatch('scriptRecord/updateSimulationPause', true);
}).catch(() => {
this.$messageBox(this.$t('scriptRecord.pauseFail'));
});
},
saveScenesData() {
this.isSavingScript = true;
const data = Vue.prototype.$jlmap.$options;
const dataZoom = {scale: data.scaleRate, x: data.offsetX, y: data.offsetY};
updateMapLocationNew(this.group, dataZoom).then(response=>{
saveScriptDataNew(this.group).then(resp => {
this.$message.success(this.$t('scriptRecord.saveDataSucess'));
this.isSavingScript = false;
// this.initAutoSaveScript();
}).catch(error => {
this.$messageBox(`${this.$t('scriptRecord.saveDataFail')}: ${error.message}`);
this.isSavingScript = false;
if (error.code === 40004 || error.code === 40005 || error.code === 40003) {
// this.clearAutoSave();
} else {
// // this.initAutoSaveScript();
}
});
}).catch(error => {
this.$messageBox(`${this.$t('scriptRecord.saveDataFail')}: ${error.message}`);
this.isSavingScript = false;
if (error.code === 40004 || error.code === 40005 || error.code === 40003) {
// this.clearAutoSave();
} else {
// // this.initAutoSaveScript();
}
});
},
saveScenesStage() {
const data = Vue.prototype.$jlmap.$options;
const group = this.$route.query.group;
const dataZoom = {scale: data.scaleRate, x: data.offsetX, y: data.offsetY};
updateMapLocationNew(group, dataZoom).then(response=>{
saveScriptScenesNew(this.group).then(resp => {
this.$store.dispatch('scriptRecord/updateBgSet', true);
this.$message.success(this.$t('scriptRecord.saveBackgroundSuceess'));
}).catch(error => {
this.$messageBox(`${this.$t('scriptRecord.updateLocationFail')}: ${error.message}`);
});
}).catch((error) => {
this.$messageBox(`${this.$t('scriptRecord.saveBackgroundFail')}: ${error.message}`);
});
},
initAutoSaveScript() {
const timeout = 1000 * 20;
this.clearAutoSave(this.autoSaveScript);
this.autoSaveScript = setInterval(this.saveScenesData, timeout);
},
clearAutoSave() {
if (this.autoSaveScript) {
clearInterval(this.autoSaveScript);
this.autoSaveScript = null;
}
},
executePlayScript() {
executeScriptNew(this.group).then(resp => {
this.$store.dispatch('scriptRecord/updateSimulationPause', false);
}).catch(() => {
this.$messageBox(this.$t('scriptRecord.recoverFail'));
});
},
dumpScenesData() {
// this.clearAutoSave();
const group = this.group;
this.$confirm(this.$t('scriptRecord.clearDataTip'), this.$t('global.tips'), {
confirmButtonText: this.$t('global.confirm'),
cancelButtonText: this.$t('global.cancel'),
type: 'warning'
}).then(() => {
dumpScriptDataNew(group).then(resp => {
this.$parent.resetBeginTime();
this.$refs['getAction'].loadInitData();
this.$store.dispatch('training/updateMemberListInScript',
{
oldMemberId:this.memberId,
newMemberId:this.orignalUserRoleId,
userId:this.$store.state.user.id,
name:this.$store.state.user.nickname
}
);
const new_member = this.memberList.find(mem=>{ return mem.id == this.orignalUserRoleId; });
const old_member = this.memberList.find(mem=>{ return mem.id == this.memberId; });
if (new_member && old_member) {
new_member.userId = this.$store.state.user.id;
new_member.disabled = true;
this.quickChangeMember.list = [new_member];
this.$emit('resetChat');
}
this.$refs.conditionManage && this.$refs.conditionManage.handleClose();
this.$refs.getAction.conditionActionId = '';
this.$store.dispatch('training/setPrdType', '02');
this.$store.dispatch('map/resetActiveTrainList');
this.$store.dispatch('scriptRecord/updateRole', new_member.type + ':' + this.orignalUserRoleId);
this.$store.dispatch('scriptRecord/updateBgSet', false);
// this.memberId = this.orignalUserRoleId;
this.oldMember = {id:this.orignalUserRoleId, type:new_member.type};
this.$message.success(this.$t('scriptRecord.resetDataSuccess'));
}).catch(() => {
this.$messageBox(this.$t('scriptRecord.resetDataFail'));
});
});
},
changeMode(member) {
let prdType = '';
if (this.openWindow) {
this.openWindow.close();
}
const role = Object.assign({}, member);
if (role.type == '行值') {
prdType = '01';
role.type = 'STATION_SUPERVISOR';
this.$store.dispatch('training/setRoles', 'STATION_SUPERVISOR');
this.$store.dispatch('training/setRoleDeviceCode', role.deviceCode);
} else if (role.type == '行调') {
prdType = '02';
role.type = 'DISPATCHER';
this.$store.dispatch('training/setRoles', 'DISPATCHER');
} else if (role.type == '司机') {
prdType = '04';
role.type = 'DRIVER';
this.$store.dispatch('training/setRoles', 'DRIVER');
} else if (role.type == '通号') {
prdType = '';
role.type = 'MAINTAINER';
this.$store.dispatch('training/setRoles', 'MAINTAINER');
const routeData = this.$router.resolve({
path:'/jlmap3d/maintainer',
query:{
mapid:this.$route.query.mapId,
group:this.group,
token:getToken(),
project: this.project,
noPreLogout: true
}
});
this.openWindow = window.open(routeData.href);
} else if (role.type == '车辆段调度') {
prdType = '05';
role.type = 'DEPOT_DISPATCHER';
this.$store.dispatch('training/setRoles', 'DEPOT_DISPATCHER');
} else if (role.type == '上级部门') {
prdType = '';
role.type = 'PARENT_DEPARTMENT';
this.$store.dispatch('training/setRoles', 'PARENT_DEPARTMENT');
} else if (role.type == '电力调度') {
prdType = '';
role.type = 'ELECTRIC_DISPATCHER';
this.$store.dispatch('training/setRoles', 'ELECTRIC_DISPATCHER');
} else if (role.type == '停车场信号楼') {
prdType = '';
role.type = 'PARKING_LOT_SIGNAL_BUILDING';
this.$store.dispatch('training/setRoles', 'PARKING_LOT_SIGNAL_BUILDING');
} else {
prdType = '';
}
this.$store.dispatch('training/setPrdType', prdType);
this.$store.dispatch('scriptRecord/updateRole', role.type + ':' + role.id);
const newRole = role;
const oldRole = this.oldMember;
const quickChangeMember = this.quickChangeMember.list;
quickChangeMember.forEach((mem, index)=>{
if (oldRole.id && mem.id == oldRole.id) {
delete mem.userId;
}
if (newRole.id == mem.id) {
mem.userId = this.$store.state.user.id;
}
});
this.quickChangeMember = {list:quickChangeMember};
const memberdata = this.quickChangeMember.list.find(mem=>{ return mem.id == newRole.id; });
if (!memberdata) {
newRole.userId = this.$store.state.user.id;
const roleTypeEnumMap = {
'STATION_SUPERVISOR':'行值',
'DISPATCHER':'行调',
'DRIVER':'司机',
'MAINTAINER':'通号',
'DEPOT_DISPATCHER':'车辆段调度',
'PARENT_DEPARTMENT':'上级部门',
'ELECTRIC_DISPATCHER':'电力调度',
'PARKING_LOT_SIGNAL_BUILDING':'停车场信号楼'
};
newRole.type = roleTypeEnumMap[newRole.type];
this.quickChangeMember.list.push(newRole);
}
this.$store.dispatch('training/updateMemberListInScript',
{
oldMemberId:this.oldMember.id,
newMemberId:role.id,
userId:this.$store.state.user.id,
name:this.$store.state.user.nickname
}
);
this.oldMember = Object.assign({}, role);
this.$refs.allScriptRole.updateLoading();
},
startReplaceBg() {
startReplaceBg(this.group).then(resp => {
this.$emit('setReplace', true);
}).catch(error => {
this.$messageBox(error.message);
});
},
confirmReplaceBg() {
confirmReplaceBg(this.group).then(resp => {
this.$message.success('替换成功');
this.$emit('setReplace', false);
}).catch(error => {
this.$messageBox(error.message);
});
},
cancelReplaceBg() {
cancelReplaceBg(this.group).then(resp => {
this.$emit('setReplace', false);
}).catch(error => {
this.$messageBox(error.message);
});
},
showConditionManage(actionId) {
this.$refs.conditionManage.doShow(actionId);
},
clearConditionActionId() {
this.$refs.getAction.conditionActionId = '';
}
}
};
</script>
<style lang="scss" scoped>
.selectRolesTitle{
}
.button-group{
position: absolute;
left: 0;
bottom: 0;
z-index: 5;
}
.eachScriptPanel{
height: 300px;
display: inline-block;
width:100%;
}
.scriptPanelLeft{
width: 330px;
height: 100%;
vertical-align: top;
position: absolute;
left: 0;
top: 0;
z-index: 2;
}
.scriptPanelRight{
width: 680px;
position: relative;
}
.scriptRecordNew{
position: absolute;
width: 700px;
z-index: 10;
padding-top: 28px;
left: 50%;
bottom: 0px;
transform: translateX(-50%) translateY(0);
}
.scriptRecordNewTitle{
position: absolute;
background: #fff;
border-radius: 5px 5px 0px 0px ;
padding: 5px 0px;
width: 100px;
text-align: center;
left: 50%;
transform: translateX(-50%);
cursor: pointer;
top:0;
}
.scriptRecordNewIn{
padding: 10px;
background: #fff;
border-radius: 5px 5px 0px 0px ;
height: 380px;
box-shadow: -1px -1px 3px #656565;
}
.scriptPanelRight{
}
.quickChange{
width: 300px;
}
.quickChange_head{
font-size: 14px;
margin-top: 5px;
color: #409eff;
}
.setGroup{
font-size: 14px;
float: right;
margin-right: 15px;
}
.settingBtn{
color: #409eff;
cursor: pointer;
padding: 2px 10px;
border-radius: 4px;
border: 1px #409eff solid;
}
.setGroupOut{
padding: 4px 6px;
}
.setGroupOut:hover{
background-color:#ccc;
}
.hasSetted{
width: 50px;
text-align: center;
display: inline-block;
}
.mask {
position: absolute;
top:0;
right:0;
bottom:0;
left:0;
opacity: 0.5;
z-index: 2;
&::before {
content: '';
position: absolute;
top:0;
right:0;
bottom:0;
left:0;
background: #aaa;
filter: blur(20px);
}
}
</style>