rt-sim-training-client/src/views/scriptManage/tipScriptRecord.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" />
  </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.$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(actionInfo) {
            this.$refs.conditionManage.doShow(actionInfo);
        }
    }
};
</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>