Merge remote-tracking branch 'origin/test_dispaly' into test
# Conflicts: # src/views/newMap/displayNew/demonMenu.vue # src/views/newMap/displayNew/dispatherContest/index.vue # src/views/newMap/displayNew/index.vue # src/views/newMap/displayNew/menuSchema.vue # src/views/newMap/jointTrainingNew/index.vue
This commit is contained in:
fan
commit
3054160b14
@ -129,7 +129,7 @@ import { mapGetters } from 'vuex';
|
||||
import NoticeInfo from '@/jmapNew/theme/components/menus/childDialog/noticeInfo';
|
||||
import { MouseEvent, DeviceMenu } from '@/scripts/ConstDic';
|
||||
import { EventBus } from '@/scripts/event-bus';
|
||||
import {UserOperationType} from "../../../../scripts/ConstDic";
|
||||
import {UserOperationType} from '../../../../scripts/ConstDic';
|
||||
|
||||
export default {
|
||||
name: 'MapButtonMenu',
|
||||
@ -502,7 +502,8 @@ export default {
|
||||
}
|
||||
}
|
||||
} else {
|
||||
const signal = this.$store.dispatch('map/getDeviceByCode')[model.signalCode || model.code];
|
||||
// const signal = this.$store.dispatch('map/getDeviceByCode')[model.signalCode || model.code];
|
||||
const signal = this.$store.getters['map/getDeviceByCode'](model.signalCode || model.code);
|
||||
if (signal.routeLock) { return; }
|
||||
}
|
||||
this.$store.dispatch('trainingNew/next', operate).then(({valid}) => {
|
||||
|
||||
@ -193,12 +193,12 @@ export default {
|
||||
stationCode: stationCode
|
||||
}
|
||||
};
|
||||
this.$store.dispatch('trainingNew/next', operate).then(({valid, resp}) => {
|
||||
this.$store.dispatch('trainingNew/next', operate).then(({valid, response}) => {
|
||||
if (valid) {
|
||||
this.stationCode = stationCode;
|
||||
this.trainFixedPathList = resp.data.data;
|
||||
this.trainFixedPathList = response.data.data;
|
||||
this.dialogShow = true;
|
||||
this.title = title + ' 版本:' + resp.data.version;
|
||||
this.title = title + ' 版本:' + response.data.version;
|
||||
this.$nextTick(() => { this.$store.dispatch('training/emitTipFresh'); });
|
||||
}
|
||||
}).catch(e => {
|
||||
@ -246,7 +246,7 @@ export default {
|
||||
};
|
||||
this.$store.dispatch('trainingNew/next', operate).then(({valid}) => {
|
||||
if (valid) {
|
||||
sendCommandNew(this.$route.query.group, menuOperate.CTC.getStationTrainFixedPath.cmdType, { stationCode: this.stationCode }).then(resp => {
|
||||
sendCommandNew(this.$route.query.group, menuOperate.CTC.getStationTrainFixedPath.cmdType.value, { stationCode: this.stationCode }).then(resp => {
|
||||
const title = '固定径路信息';
|
||||
this.trainFixedPathList = resp.data.data;
|
||||
this.title = title + ' 版本 :' + resp.data.version;
|
||||
@ -260,7 +260,6 @@ export default {
|
||||
},
|
||||
cancel() {
|
||||
const operate = {
|
||||
over: true,
|
||||
userOperationType: UserOperationType.LEFTCLICK,
|
||||
operation: OperationEvent.Command.cancel.menu.operation
|
||||
};
|
||||
|
||||
@ -48,17 +48,10 @@ const Display = () => import('@/views/newMap/display/index');
|
||||
// const TrainingPreview = () => import('@/views/designPlatform/trainingPreview');
|
||||
const TrainingDesign = () => import('@/views/organization/trainingDesign/index');
|
||||
const TrainingManage = () => import('@/views/organization/trainingManage/index');
|
||||
const TestRunplan = () => import('@/views/designPlatform/testRunplan');
|
||||
|
||||
const PracticeDisplay = () => import('@/views/newMap/displayNew/practiceDisplay');
|
||||
const BigLPFStrategy = () => import('@/views/newMap/displayNew/bigLPFStrategy');
|
||||
|
||||
const RunPlanViewWindow = () => import('@/views/newMap/displayNew/demon/runPlanViewWindow');
|
||||
const PlanScheduleWicket = () => import('@/views/newMap/displayNew/demon/planSchedule');
|
||||
// const DemoTraining = () => import('@/views/newMap/displayNew/demoTraining');
|
||||
|
||||
const BigTrainRunplanManage = () => import('@/views/bigTrainRunplanManage/index');
|
||||
const jointTrainingNewCCTV = () => import('@/views/newMap/jointTrainingNew/realCCTV');
|
||||
|
||||
const Errpr404 = () => import('@/views/error-page/404');
|
||||
|
||||
@ -163,8 +156,6 @@ const UserRulesDetail = () => import('@/views/orderauthor/rules/detail');
|
||||
const DeviceManage = () => import('@/views/system/deviceManage/index');
|
||||
const BankManage = () => import('@/views/competitionManage/bankList/index');
|
||||
|
||||
const Scene = () => import('@/views/drts/scene/index');
|
||||
|
||||
const QuestionCreatePage = () => import('@/views/competitionManage/bankList/question-create-page');
|
||||
const QuestionUpdatePage = () => import('@/views/competitionManage/bankList/question-update-page');
|
||||
|
||||
@ -199,8 +190,6 @@ const Demo = () => import('@/views/demo');
|
||||
const MapGroup = () => import('@/views/publish/mapGroup/index');
|
||||
const OrgDetail = () => import('@/views/system/companyManage/orgDetail');
|
||||
const VoiceTraining = () => import('@/views/system/voiceTraining/index');
|
||||
const SceneTrainingResult = () => import('@/views/drts/scene/trainingResult');
|
||||
const SceneVoiceTraining = () => import('@/views/drts/scene/voiceTraining');
|
||||
|
||||
const Ueditor = () => import('@/views/editor/index');
|
||||
const UeditorList = () => import('@/views/editor/list');
|
||||
@ -375,11 +364,6 @@ export const constantRoutes = [
|
||||
component: PlanMonitorEditAUSTool,
|
||||
hidden: true
|
||||
},
|
||||
{
|
||||
path: '/runPlanViewWindow',
|
||||
component: RunPlanViewWindow,
|
||||
hidden: true
|
||||
},
|
||||
{
|
||||
path: '/jlmap3d/sandbox',
|
||||
component: Jlmap3dSandbox,
|
||||
@ -510,11 +494,6 @@ export const publicAsyncRoute = [
|
||||
component: BigSplitScreen,
|
||||
hidden: true
|
||||
},
|
||||
{
|
||||
path: '/jointTrainingNewCCTV',
|
||||
component: jointTrainingNewCCTV,
|
||||
hidden: true
|
||||
},
|
||||
{
|
||||
path: '/jlmap3d',
|
||||
component: Jlmap3d,
|
||||
@ -583,29 +562,6 @@ export const publicAsyncRoute = [
|
||||
component: ExamResult,
|
||||
hidden: true
|
||||
},
|
||||
{// 运行图预览
|
||||
path: '/planSchedule/window',
|
||||
component: PlanScheduleWicket,
|
||||
hidden: true
|
||||
},
|
||||
{
|
||||
// 运行图测试（仿真，仅有按计划行车和初始化操作）
|
||||
path: '/design/runPlan/testRunplan',
|
||||
component: TestRunplan,
|
||||
hidden: true
|
||||
},
|
||||
{
|
||||
// 北京交大使用 客流视图
|
||||
path: '/practiceDisplay',
|
||||
component: PracticeDisplay,
|
||||
hidden: true
|
||||
},
|
||||
{
|
||||
// 北京交大使用 大客流策略
|
||||
path: '/bigLPFStrategy',
|
||||
component: BigLPFStrategy,
|
||||
hidden: true
|
||||
},
|
||||
{
|
||||
path: '/messageBoard',
|
||||
component: MessageBoard,
|
||||
@ -1509,14 +1465,6 @@ export const asyncRouter = [
|
||||
icon: 'design'
|
||||
}
|
||||
},
|
||||
{
|
||||
path: 'scene',
|
||||
component: Scene,
|
||||
meta: {
|
||||
i18n: 'router.sceneManage',
|
||||
icon: 'design'
|
||||
}
|
||||
},
|
||||
{
|
||||
path: 'questionCreate',
|
||||
component: QuestionCreatePage,
|
||||
@ -1526,16 +1474,6 @@ export const asyncRouter = [
|
||||
path: 'questionUpdate/:questionId',
|
||||
component: QuestionUpdatePage,
|
||||
hidden: true
|
||||
},
|
||||
{
|
||||
path: 'voiceTraining',
|
||||
component: SceneVoiceTraining,
|
||||
hidden: true
|
||||
},
|
||||
{
|
||||
path: 'trainingResult',
|
||||
component: SceneTrainingResult,
|
||||
hidden: true
|
||||
}
|
||||
]
|
||||
},
|
||||
|
||||
@ -171,7 +171,8 @@ export default {
|
||||
distributePackage(index, row) {
|
||||
if (this.packageId) {
|
||||
const accountId = row.id;
|
||||
const subjectType = row.type == '1' ? 'user' : 'org';
|
||||
// const subjectType = row.type == '1' ? 'user' : 'org';
|
||||
const subjectType = 'user'; // 都是用户
|
||||
setDistributeToSubject(this.packageId, subjectType, accountId).then(resp=> {
|
||||
this.$message.success('权限分发给指定账户成功！');
|
||||
this.$emit('reloadTable');
|
||||
|
||||
@ -1,198 +0,0 @@
|
||||
<template>
|
||||
<div class="map-view" :style="{width: canvasWidth+'px',height:'100%',position:'absolute',overflow:'hidden'}">
|
||||
<div v-show="maskOpen" class="mask" :style="{'width': maskWidth}" />
|
||||
<jlmap-visual ref="jlmapVisual" />
|
||||
<div class="display-draft">
|
||||
<el-button-group>
|
||||
<el-button type="success" :disabled="isDisable" size="small" @click="selectBeginTime">{{ $t('display.demon.drivingByPlan') }}</el-button>
|
||||
<el-button type="danger" size="small" @click="end">{{ $t('display.demon.initialize') }}</el-button>
|
||||
<el-button type="small" @click="back">{{ $t('scriptRecord.scriptBack') }}</el-button>
|
||||
</el-button-group>
|
||||
</div>
|
||||
<set-time ref="setTime" @ConfirmSelectBeginTime="start" />
|
||||
<menu-system-time ref="menuSystemTime" :offset="15" :group="group" />
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import SetTime from '@/views/newMap/displayNew/demon/setTime';
|
||||
import JlmapVisual from '@/views/newMap/jlmapNew/index';
|
||||
import { Notification } from 'element-ui';
|
||||
import { loadMapDataById } from '@/utils/loaddata';
|
||||
import { ranAsPlan, exitRunPlan, clearSimulation, getSimulationInfoNew } from '@/api/simulation';
|
||||
import { creatSubscribe, clearSubscribe, displayTopic} from '@/utils/stomp';
|
||||
import MenuSystemTime from '@/views/newMap/displayNew/menuSystemTime';
|
||||
import { getToken } from '@/utils/auth';
|
||||
import { mapGetters } from 'vuex';
|
||||
export default {
|
||||
name:'TestRunplan',
|
||||
components: {
|
||||
SetTime,
|
||||
JlmapVisual,
|
||||
MenuSystemTime
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
maskOpen: false,
|
||||
maskWidth: '100%'
|
||||
};
|
||||
},
|
||||
computed:{
|
||||
...mapGetters([
|
||||
'canvasWidth'
|
||||
]),
|
||||
group() {
|
||||
return this.$route.query.group;
|
||||
},
|
||||
mapId() {
|
||||
return this.$route.query.mapId;
|
||||
},
|
||||
isDisable() {
|
||||
return this.$store.state.training.started;
|
||||
},
|
||||
width() {
|
||||
return this.$store.state.app.width;
|
||||
},
|
||||
height() {
|
||||
return this.$store.state.app.height;
|
||||
}
|
||||
},
|
||||
watch:{
|
||||
'$store.state.map.mapViewLoadedCount':function() {
|
||||
this.$store.dispatch('map/setTrainWindowShow', false);
|
||||
// this.$jlmap.off('zoom');
|
||||
if (this.group) {
|
||||
this.subscribe();
|
||||
}
|
||||
},
|
||||
'$store.state.app.windowSizeCount': function() { // 窗口缩放
|
||||
this.setWindowSize();
|
||||
},
|
||||
'$store.state.socket.equipmentStatus': function (val) {
|
||||
if (val.length && this.$route.query.group) {
|
||||
this.statusMessage(val);
|
||||
}
|
||||
},
|
||||
'$store.state.socket.simulationStart': function(val) {
|
||||
this.$store.dispatch('training/simulationStart').then(() => {
|
||||
this.$store.dispatch('map/setShowCentralizedStationNum');
|
||||
});
|
||||
}
|
||||
},
|
||||
async beforeDestroy() {
|
||||
await this.$store.dispatch('map/mapClear');
|
||||
},
|
||||
async mounted() {
|
||||
this.setWindowSize();
|
||||
await this.initLoadData();
|
||||
},
|
||||
methods:{
|
||||
initLoadData() { // 加载地图数据
|
||||
if (this.mapId) {
|
||||
this.loadSimulationInfo();
|
||||
loadMapDataById(this.mapId, 'simulation');
|
||||
}
|
||||
},
|
||||
// 缩放设置
|
||||
setWindowSize() {
|
||||
const width = this.width;
|
||||
const height = this.height;
|
||||
this.$store.dispatch('config/resize', { width, height });
|
||||
},
|
||||
async back() {
|
||||
if (this.group) {
|
||||
await clearSimulation(this.group);
|
||||
this.clearSubscribe();
|
||||
}
|
||||
this.$store.dispatch('map/setShowCentralizedStationCode', '');
|
||||
history.go(-1);
|
||||
Notification.closeAll();
|
||||
},
|
||||
selectBeginTime() {
|
||||
this.$refs.setTime.doShow();
|
||||
},
|
||||
async statusMessage(list) {
|
||||
await this.$store.dispatch('training/updateMapState', list);
|
||||
await this.$store.dispatch('socket/setEquipmentStatus');
|
||||
},
|
||||
end() {
|
||||
exitRunPlan(this.group).then(() => {
|
||||
this.$store.dispatch('training/over').then(() => {
|
||||
this.$store.dispatch('training/setMapDefaultState').then(() => {
|
||||
this.$store.dispatch('map/resetActiveTrainList', false);
|
||||
this.$store.dispatch('map/clearJlmapTrainView');
|
||||
this.$store.dispatch('map/setTrainWindowShow', false);
|
||||
});
|
||||
});
|
||||
}).catch(() => {
|
||||
this.$messageBox(this.$t('display.demon.endSimulationFail'));
|
||||
});
|
||||
},
|
||||
async subscribe() {
|
||||
this.clearSubscribe();
|
||||
const header = { group: this.group || '', 'X-Token': getToken() };
|
||||
creatSubscribe(`${displayTopic}\/${this.$route.query.group}`, header);
|
||||
// await this.$store.dispatch('training/setHasSubscribed');
|
||||
},
|
||||
clearSubscribe() {
|
||||
clearSubscribe(`${displayTopic}\/${this.group}`);
|
||||
},
|
||||
async loadSimulationInfo() {
|
||||
const resp = await getSimulationInfoNew(this.group);
|
||||
if (resp && resp.code == 200 && resp.data) {
|
||||
if (!resp.data.dataError) {
|
||||
this.$store.dispatch('scriptRecord/updateSimulationPause', resp.data.pause); // 是否暂停判断
|
||||
this.$store.dispatch('training/setInitTime', resp.data.systemTime);
|
||||
this.planRunning = resp.data.planRunning;
|
||||
if (resp.data.planRunning) {
|
||||
this.$store.commit('training/start');
|
||||
}
|
||||
} else {
|
||||
this.$messageBox('此地图数据正在维护中,无法运行！');
|
||||
}
|
||||
this.dataError = resp.data.dataError;
|
||||
}
|
||||
},
|
||||
start(model) { // 开始仿真
|
||||
const data = {
|
||||
time: model.initTime
|
||||
};
|
||||
ranAsPlan(data, this.group).then(res => {
|
||||
// this.$store.dispatch('training/setInitTime', model.initTime);
|
||||
this.$store.dispatch('training/setInitTime', model.timestamp);
|
||||
}).catch(error => {
|
||||
if (error.code == '5001') {
|
||||
this.$messageBox(this.$t('error.mapDataError') + ',' + this.$t('error.startSimulationFailed'));
|
||||
} else if (error.code == '5002') {
|
||||
this.$messageBox(this.$t('error.runningChartDataError') + ',' + this.$t('error.startSimulationFailed'));
|
||||
} else if (error.code == '5003') {
|
||||
this.$messageBox(this.$t('error.runningChartIsNotLoaded') + ',' + this.$t('error.startSimulationFailed'));
|
||||
} else if (error.code == '5004') {
|
||||
this.$messageBox(this.$t('error.runningDataError') + ',' + this.$t('error.startSimulationFailed'));
|
||||
} else if (error.code == '5000') {
|
||||
this.$messageBox(this.$t('error.systemError') + ',' + this.$t('error.startSimulationFailed'));
|
||||
} else if (error.code == '4000') {
|
||||
this.$messageBox(this.$t('error.simulationDoesNotExist') + ',' + this.$t('error.startSimulationFailed'));
|
||||
} else if (error.code == '4001') {
|
||||
this.$messageBox(this.$t('error.simulationOperationIsNotDefined') + ',' + this.$t('error.startSimulationFailed'));
|
||||
} else if (error.code == '4002') {
|
||||
this.$messageBox(this.$t('error.simulationOperationProcessingMethodNotFound') + ',' + this.$t('error.startSimulationFailed'));
|
||||
} else if (error.code == '4003') {
|
||||
this.$messageBox(this.$t('error.simulationOperationFailed') + ',' + this.$t('error.startSimulationFailed'));
|
||||
} else if (error.code == '4004') {
|
||||
this.$messageBox(this.$t('error.operationConflict') + ',' + this.$t('error.startSimulationFailed'));
|
||||
} else {
|
||||
this.$messageBox('按计划行车异常,请退出重试!');
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.display-draft {
|
||||
position: absolute;
|
||||
float: right;
|
||||
right: 15px;
|
||||
bottom: 15px;
|
||||
}
|
||||
</style>
|
||||
@ -1,156 +0,0 @@
|
||||
<template>
|
||||
<el-dialog :title="title" :visible.sync="dialogVisible" width="500px" :before-close="doClose" center>
|
||||
<data-form ref="dataform" :form="form" :form-model="formModel" :rules="rules" />
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button type="primary" @click="doCreate">{{ $t('global.confirm') }}</el-button>
|
||||
<el-button @click="doClose">{{ $t('global.cancel') }}</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</template>
|
||||
<script>
|
||||
import {addCompetitionPracticalScene, getCompetitionPracticalSceneById, updateCompetitionPracticalScene} from '@/api/competition';
|
||||
export default {
|
||||
name:'SceneCreate',
|
||||
props: {
|
||||
scriptList:{
|
||||
type: Array,
|
||||
default() {
|
||||
return [];
|
||||
}
|
||||
},
|
||||
title:{
|
||||
type: String,
|
||||
default() {
|
||||
return '';
|
||||
}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
dialogVisible:false,
|
||||
isEdit:false,
|
||||
formModel: {
|
||||
id:'',
|
||||
name:'', // 场景名称
|
||||
description:'', // 场景描述
|
||||
disposalProcesses:'', // 处置流程
|
||||
scriptId:'', // 剧本id
|
||||
operationScore:0, // 运营部分总分（站间停车等）
|
||||
main:true // 是否主场景
|
||||
}
|
||||
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
form() {
|
||||
const form = {
|
||||
labelWidth: '120px',
|
||||
items: [
|
||||
{ prop: 'name', label: '场景名称', type: 'text', maxlength:80 },
|
||||
{ prop: 'description', label: '场景描述', type: 'textarea' },
|
||||
{ prop: 'disposalProcesses', label: '处置流程', type: 'textarea' },
|
||||
{ prop: 'operationScore', label: '运营部分总分', type: 'number', min: 0, max: 100, step:1, precision:1 },
|
||||
{ prop:'scriptId', label:'关联剧本', type:'select', options:this.scriptList, optionValue:'value', optionLabel:'label' },
|
||||
{ prop:'main', label:'是否主场景', type:'switch' }
|
||||
]
|
||||
};
|
||||
return form;
|
||||
},
|
||||
rules() {
|
||||
const crules = {
|
||||
name: [
|
||||
{ required: true, validator: this.validateSceneName, trigger: 'blur' },
|
||||
{ required: true, validator: this.validateSceneName, trigger: 'change' }
|
||||
],
|
||||
description: [
|
||||
{ required: true, validator: this.validateDescription, trigger: 'blur' },
|
||||
{ required: true, validator: this.validateDescription, trigger: 'change' }
|
||||
],
|
||||
disposalProcesses: [
|
||||
{ required: true, validator: this.validateDisposalProcesses, trigger: 'blur' },
|
||||
{ required: true, validator: this.validateDisposalProcesses, trigger: 'change' }
|
||||
],
|
||||
scriptId:[
|
||||
{ required: true, message: '请选择剧本', trigger: 'change' }
|
||||
],
|
||||
operationScore:[
|
||||
{ required: true, message: '请输入运营部分总分', trigger: 'blur' }
|
||||
]
|
||||
};
|
||||
return crules;
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
validateSceneName(rule, value, callback) {
|
||||
if (value.trim().length === 0) {
|
||||
this.formModel.name = this.formModel.name.replace(/\s/g, '');
|
||||
return callback(new Error('请输入场景名称'));
|
||||
} else {
|
||||
return callback();
|
||||
}
|
||||
},
|
||||
validateDescription(rule, value, callback) {
|
||||
if (value.trim().length === 0) {
|
||||
this.formModel.description = this.formModel.description.replace(/\s/g, '');
|
||||
return callback(new Error('请输入场景描述'));
|
||||
} else {
|
||||
return callback();
|
||||
}
|
||||
},
|
||||
validateDisposalProcesses(rule, value, callback) {
|
||||
if (value.trim().length === 0) {
|
||||
this.formModel.disposalProcesses = this.formModel.disposalProcesses.replace(/\s/g, '');
|
||||
return callback(new Error('请输入处置流程'));
|
||||
} else {
|
||||
return callback();
|
||||
}
|
||||
},
|
||||
doShow(sceneId) {
|
||||
// this.dialogVisible = true;
|
||||
if (sceneId) {
|
||||
getCompetitionPracticalSceneById(sceneId).then(resp=>{
|
||||
const data = {'name':resp.data.name,
|
||||
'description':resp.data.description,
|
||||
'disposalProcesses':resp.data.disposalProcesses,
|
||||
'scriptId':resp.data.scriptId,
|
||||
'operationScore':resp.data.operationScore,
|
||||
'main':resp.data.main};
|
||||
this.formModel = data;
|
||||
this.formModel.id = sceneId;
|
||||
this.dialogVisible = true;
|
||||
this.isEdit = true;
|
||||
});
|
||||
} else {
|
||||
this.dialogVisible = true;
|
||||
this.isEdit = false;
|
||||
}
|
||||
},
|
||||
doCreate() {
|
||||
const self = this;
|
||||
this.$refs.dataform.validateForm(() => {
|
||||
if (this.isEdit) {
|
||||
updateCompetitionPracticalScene(Object.assign({}, this.formModel)).then(resp => {
|
||||
this.$emit('reloadTable');
|
||||
this.$message.success('更新场景成功');
|
||||
}).catch(error => {
|
||||
this.$messageBox(`更新场景失败: ${error.message}`);
|
||||
});
|
||||
} else {
|
||||
delete this.formModel.id;
|
||||
addCompetitionPracticalScene(Object.assign({}, this.formModel)).then(resp => {
|
||||
this.$emit('reloadTable');
|
||||
this.$message.success('创建场景成功');
|
||||
}).catch(error => {
|
||||
this.$messageBox(`创建场景失败: ${error.message}`);
|
||||
});
|
||||
}
|
||||
self.doClose();
|
||||
});
|
||||
},
|
||||
doClose() {
|
||||
this.$refs.dataform.resetForm();
|
||||
this.dialogVisible = false;
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@ -1,171 +0,0 @@
|
||||
<template>
|
||||
<el-dialog v-dialogDrag title="场景导入" :visible.sync="dialogShow" width="360px" :before-close="handleClose" custom-class="importClass">
|
||||
<div>
|
||||
<div v-show="!formDisplay" class="eachButton uploadDemo">
|
||||
<i class="el-icon-plus avatar-uploader-icon el-icon-other" />
|
||||
<input ref="files" type="file" class="file_box" accept=".json, application/json" @change="importf">
|
||||
</div>
|
||||
<el-form v-show="formDisplay" ref="form" label-position="right" :rules="editRules" :model="editModel" label-width="100px" size="mini" @submit.native.prevent>
|
||||
<el-form-item label="场景名称" prop="name">
|
||||
<el-input v-model="editModel.name" />
|
||||
</el-form-item>
|
||||
<el-form-item label="请选择剧本" prop="scriptId">
|
||||
<el-select v-model="editModel.scriptId">
|
||||
<el-option v-for="item in scriptList" :key="item.code" :label="item.label" :value="item.value" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div style="margin-left:18px;color:red;font-size:13px;">{{ validateText }}</div>
|
||||
</div>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button @click="handleClose">{{ $t('map.cancel') }}</el-button>
|
||||
<el-button type="primary" :loading="loading" @click="importScene">{{ $t('map.confirm') }}</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</template>
|
||||
<script>
|
||||
import { postSceneImport } from '@/api/competition';
|
||||
export default {
|
||||
name:'ImportScene',
|
||||
props: {
|
||||
scriptList:{
|
||||
type: Array,
|
||||
default() {
|
||||
return [];
|
||||
}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
formDisplay:false,
|
||||
dialogShow: false,
|
||||
loading: false,
|
||||
jsonData:null,
|
||||
validateText:'',
|
||||
editModel: {
|
||||
scriptId: '',
|
||||
name: ''
|
||||
},
|
||||
editRules: {
|
||||
name: [
|
||||
{ required: true, message: '请输入场景名称', trigger: 'blur' }
|
||||
],
|
||||
scriptId:[
|
||||
{ required: true, message: '请选择剧本', trigger: 'change' }
|
||||
]
|
||||
}
|
||||
};
|
||||
},
|
||||
methods:{
|
||||
close() {
|
||||
this.$refs.form.resetFields();
|
||||
this.formDisplay = false;
|
||||
this.editModel.scriptId = '';
|
||||
this.jsonData = null;
|
||||
this.dialogShow = false;
|
||||
this.validateText = '';
|
||||
},
|
||||
handleClose() {
|
||||
this.close();
|
||||
},
|
||||
doShow() {
|
||||
this.validateText = '';
|
||||
this.dialogShow = true;
|
||||
},
|
||||
importf() {
|
||||
const that = this;
|
||||
setTimeout(() => {
|
||||
const obj = this.$refs.files;
|
||||
if (!obj.files) return;
|
||||
const f = obj.files[0];
|
||||
if (f.type != 'application/json') {
|
||||
this.$message.error('请上传json格式的文件');
|
||||
return;
|
||||
}
|
||||
const reader = new FileReader();
|
||||
reader.readAsText(f, 'utf-8');
|
||||
reader.onload = function(e) {
|
||||
const data = e.target.result;
|
||||
that.formDisplay = true;
|
||||
const json = JSON.parse(data);
|
||||
that.jsonData = json;
|
||||
that.editModel.name = json.name;
|
||||
obj.value = '';
|
||||
that.validateText = '';
|
||||
};
|
||||
});
|
||||
},
|
||||
importScene() {
|
||||
if (!this.jsonData) {
|
||||
this.validateText = '请选择文件';
|
||||
return false;
|
||||
}
|
||||
this.$refs['form'].validate((valid) => {
|
||||
if (valid) {
|
||||
this.submitData();
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
});
|
||||
},
|
||||
submitData() {
|
||||
const loading = this.$loading({
|
||||
lock: true,
|
||||
text: '正在导入中...',
|
||||
spinner: 'el-icon-loading',
|
||||
background: 'rgba(0, 0, 0, 0.7)'
|
||||
});
|
||||
this.loading = true;
|
||||
this.dialogShow = false;
|
||||
this.validateText = '';
|
||||
const that = this;
|
||||
postSceneImport(that.editModel.scriptId, that.editModel.name, that.jsonData).then(res => {
|
||||
loading.close();
|
||||
that.loading = false;
|
||||
that.$message.success('导入成功！');
|
||||
this.$emit('refresh');
|
||||
// loading.close();
|
||||
this.close();
|
||||
}).catch(error => {
|
||||
loading.close();
|
||||
that.loading = false;
|
||||
this.close();
|
||||
that.$message.error('导入失败' + error.message);
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.eachButton{
|
||||
margin-left:10px;
|
||||
width:100px;
|
||||
height:100px;
|
||||
border:1px #ccc dashed;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.el-icon-other{
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
height: 100%;
|
||||
line-height: 72px;
|
||||
font-size: 16px;
|
||||
}
|
||||
.uploadDemo {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
// float: right;
|
||||
padding: 9px 15px;
|
||||
margin-right: 3px;
|
||||
cursor: pointer;
|
||||
input {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
opacity: 0;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,178 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<query-list-page ref="user" :pager-config="pagerConfig" :query-form="queryForm" :query-list="queryList" />
|
||||
<create-scene ref="createScene" title="创建场景" :script-list="scriptList" @reloadTable="reloadTable" />
|
||||
<create-scene ref="updateScene" title="更新场景" :script-list="scriptList" @reloadTable="reloadTable" />
|
||||
<modify-step ref="modifyStep" title="编辑步骤数据" />
|
||||
<import-scene ref="importScene" :script-list="scriptList" @refresh="reloadTable" />
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { getCompetitionPracticalScene, deleteCompetitionPracticalScene, getSceneExport } from '@/api/competition';
|
||||
import { getScriptPageListOnlineNew } from '@/api/script';
|
||||
import CreateScene from './create';
|
||||
import ModifyStep from './modify';
|
||||
import ImportScene from './importScene';
|
||||
export default {
|
||||
name:'SceneManage',
|
||||
components:{
|
||||
CreateScene,
|
||||
ModifyStep,
|
||||
ImportScene
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
scriptList:[],
|
||||
pagerConfig: {
|
||||
pageSize: 'pageSize',
|
||||
pageIndex: 'pageNum'
|
||||
},
|
||||
queryForm: {
|
||||
reset: false,
|
||||
labelWidth: '80px',
|
||||
queryObject: {
|
||||
name: {
|
||||
type: 'text',
|
||||
label: '场景名称'
|
||||
}
|
||||
}
|
||||
},
|
||||
queryList: {
|
||||
query: getCompetitionPracticalScene,
|
||||
selectCheckShow: false,
|
||||
indexShow: true,
|
||||
columns: [
|
||||
{
|
||||
title: '场景名称',
|
||||
prop: 'name',
|
||||
width: '100'
|
||||
},
|
||||
{
|
||||
title: '场景描述',
|
||||
prop: 'description'
|
||||
},
|
||||
{
|
||||
title: '处置流程',
|
||||
prop: 'disposalProcesses'
|
||||
},
|
||||
{
|
||||
title: '运营部分总分',
|
||||
prop: 'operationScore'
|
||||
},
|
||||
{
|
||||
title: '关联剧本',
|
||||
prop: 'scriptId',
|
||||
type: 'tag',
|
||||
width: '320',
|
||||
columnValue: (row) => { return this.$convertField(row.scriptId, this.scriptList, ['value', 'label']); },
|
||||
tagType: (row) => { return 'success'; }
|
||||
},
|
||||
{
|
||||
type: 'button',
|
||||
title: '操 作',
|
||||
width: '520',
|
||||
buttons: [
|
||||
{
|
||||
name: '更 新',
|
||||
handleClick: this.doUpdate,
|
||||
type: 'primary'
|
||||
},
|
||||
{
|
||||
name: '编辑步骤数据',
|
||||
handleClick: this.doModify,
|
||||
type: 'success'
|
||||
},
|
||||
{
|
||||
name: '删 除',
|
||||
handleClick: this.doDelete,
|
||||
type: 'danger'
|
||||
},
|
||||
{
|
||||
name: '导 出',
|
||||
handleClick: this.doExport,
|
||||
type: 'primary'
|
||||
},
|
||||
{
|
||||
name: '语音训练',
|
||||
handleClick: this.voiceTraining,
|
||||
type: 'primary'
|
||||
},
|
||||
{
|
||||
name: '训练结果',
|
||||
handleClick: this.trainingResult,
|
||||
type: 'primary'
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
actions: [
|
||||
{ text: '添 加', handler: this.doCreate },
|
||||
{ text: '导 入', handler: this.doImport }
|
||||
]
|
||||
}
|
||||
};
|
||||
},
|
||||
created() {
|
||||
getScriptPageListOnlineNew({pageSize:999, pageNum:1}).then(response=>{
|
||||
this.scriptList = response.data.list.map(elem => { return { value: parseInt(elem.id), label: elem.name }; });
|
||||
// this.queryForm.queryObject.scriptId.config.data = this.scriptList;
|
||||
});
|
||||
},
|
||||
methods:{
|
||||
// 修改
|
||||
doUpdate(index, row) {
|
||||
this.$refs.updateScene.doShow(row.id);
|
||||
},
|
||||
doDelete(index, row) {
|
||||
this.$confirm('此操作将删除此场景, 是否继续?', this.$t('global.tips'), {
|
||||
confirmButtonText: this.$t('global.confirm'),
|
||||
cancelButtonText: this.$t('global.cancel'),
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
deleteCompetitionPracticalScene(row.id).then(response => {
|
||||
this.$message.success('删除场景成功');
|
||||
this.reloadTable();
|
||||
}).catch((error) => {
|
||||
this.$messageBox(`删除场景失败: ${error.message}`);
|
||||
});
|
||||
}).catch(() => { });
|
||||
},
|
||||
doCreate() {
|
||||
this.$refs.createScene.doShow(null);
|
||||
},
|
||||
doImport() {
|
||||
this.$refs.importScene.doShow();
|
||||
},
|
||||
reloadTable() {
|
||||
if (this.queryList && this.queryList.reload) {
|
||||
this.queryList.reload();
|
||||
}
|
||||
},
|
||||
doModify(index, row) {
|
||||
this.$refs.modifyStep.doShow(row);
|
||||
},
|
||||
voiceTraining(index, row) {
|
||||
this.$router.push({ path: '/design/race/voiceTraining', query: { scriptId: row.scriptId, sceneId: row.id}});
|
||||
},
|
||||
trainingResult(index, row) {
|
||||
this.$router.push({ path: '/design/race/trainingResult', query: { scriptId: row.scriptId, sceneId: row.id }});
|
||||
},
|
||||
doExport(index, row) {
|
||||
getSceneExport(row.id).then(res=>{
|
||||
const resultData = res.data;
|
||||
if (resultData === false) {
|
||||
return;
|
||||
}
|
||||
const content = new Blob([JSON.stringify(resultData)]);
|
||||
const urlObject = window.URL || window.webkitURL || window;
|
||||
const url = urlObject.createObjectURL(content);
|
||||
const el = document.createElement('a');
|
||||
el.href = url;
|
||||
el.download = `场景-${resultData.name}.json`;
|
||||
el.click();
|
||||
urlObject.revokeObjectURL(url);
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@ -1,781 +0,0 @@
|
||||
<template>
|
||||
<el-dialog v-loading="loading" :title="title" :visible.sync="dialogVisible" :before-close="doClose" top="50px" center custom-class="sceneModifyOut" fullscreen>
|
||||
<el-form v-if="!loading" ref="form" :model="formModel" label-width="120px" class="sceneModify" @submit.native.prevent>
|
||||
<!-- :rules="rules" -->
|
||||
<el-table :data="actionList" border style="width:1320px;margin: 0 auto;" height="500" :span-method="objectSpanMethod" :show-summary="true" :summary-method="getSummaries">
|
||||
<el-table-column label="步骤名称" width="100">
|
||||
<template slot-scope="scope">
|
||||
<div v-if="stepVOs[scope.row.id]">
|
||||
{{ stepVOs[scope.row.id].description||'' }}
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="动作id" width="70" prop="id" />
|
||||
<el-table-column label="动作内容" width="350">
|
||||
<template slot-scope="scope">
|
||||
<!-- v-model="scope.row.id" -->
|
||||
<el-checkbox v-if="isModify" v-model="checkBoxActionList[scope.row.id].status" :disabled="checkBoxActionList[scope.row.id].disabled" class="checkBoxAction" @change="((val)=>{changeSelectActionId(val, scope.row.id, scope.$index)})" />
|
||||
<el-radio v-if="isOperate" v-model="radioBoxAction" :label="scope.row.id" name="operateAction" class="checkBoxAction" @change="((val)=>{changeSelectRadioActionId(val, scope.row.id, scope.$index)})">{{ '' }}</el-radio>
|
||||
<div v-if="dialogVisible">{{ scope.row.remarkName }}</div>
|
||||
<!-- covert(scope.row) -->
|
||||
<!-- -->
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="语音识别关键词列表" width="350">
|
||||
<template v-if="scope.row.type=='Conversation'&&scope.row.memberId=='1'" slot-scope="scope">
|
||||
<div v-if="commandEvaluationRuleVOs[scope.row.id]&&commandEvaluationRuleVOs[scope.row.id].keyWords">
|
||||
<el-tag v-for="(tag,index) in commandEvaluationRuleVOs[scope.row.id].keyWords" :key="index" closable :disable-transitions="false" @close="handleClose(scope.row.id,index)">{{ tag }}</el-tag>
|
||||
<el-input
|
||||
v-if="commandEvaluationRuleVOs[scope.row.id].inputVisible"
|
||||
:ref="'saveTagInput'+scope.row.id"
|
||||
v-model="commandEvaluationRuleVOs[scope.row.id].inputValue"
|
||||
size="small"
|
||||
class="input-new-tag"
|
||||
@keyup.enter.native="handleInputConfirm(scope.row.id)"
|
||||
@blur="handleInputConfirm(scope.row.id)"
|
||||
/>
|
||||
<el-button v-else class="button-new-tag" size="small" @click="showInput(scope.row.id)">添加</el-button>
|
||||
</div>
|
||||
<div v-else>
|
||||
<el-button class="button-new-tag" size="small" @click="addKeyWord(scope.row.id)">添加</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="总分值" width="149">
|
||||
<template v-if="scope.row.memberId=='1'&&(scope.row.type=='Conversation'||scope.row.type=='Operation')" slot-scope="scope">
|
||||
<div v-if="commandEvaluationRuleVOs[scope.row.id]&&commandEvaluationRuleVOs[scope.row.id].score!=undefined">
|
||||
<el-input-number
|
||||
v-if="commandEvaluationRuleVOs[scope.row.id].scoreVisible"
|
||||
:ref="'saveScoreInput'+scope.row.id"
|
||||
v-model="commandEvaluationRuleVOs[scope.row.id].score"
|
||||
:min="0"
|
||||
size="small"
|
||||
:max="Infinity"
|
||||
:step="1"
|
||||
@keyup.enter.native="handleScoreConfirm(scope.row.id)"
|
||||
@blur="handleScoreConfirm(scope.row.id)"
|
||||
/>
|
||||
<div v-else style="cursor:pointer" @click="modifyScore(scope.row.id)">
|
||||
{{ commandEvaluationRuleVOs[scope.row.id].score }}
|
||||
</div>
|
||||
</div>
|
||||
<div v-else>
|
||||
<el-button class="button-new-tag" size="small" @click="addScore(scope.row.id)">编辑</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="超时时间" width="150">
|
||||
<template v-if="scope.row.type=='Conversation'&&scope.row.memberId=='1'" slot-scope="scope">
|
||||
<div v-if="commandEvaluationRuleVOs[scope.row.id]&&commandEvaluationRuleVOs[scope.row.id].timeOut!=undefined">
|
||||
<el-input-number
|
||||
v-if="commandEvaluationRuleVOs[scope.row.id].timeOutVisible"
|
||||
:ref="'saveTimeOutInput'+scope.row.id"
|
||||
v-model="commandEvaluationRuleVOs[scope.row.id].timeOut"
|
||||
:min="0"
|
||||
size="small"
|
||||
:max="Infinity"
|
||||
:step="1"
|
||||
@keyup.enter.native="handleTimeOutConfirm(scope.row.id)"
|
||||
@blur="handleTimeOutConfirm(scope.row.id)"
|
||||
/>
|
||||
<div v-else style="cursor:pointer" @click="modifyTimeOut(scope.row.id)">
|
||||
{{ commandEvaluationRuleVOs[scope.row.id].timeOut }}
|
||||
</div>
|
||||
</div>
|
||||
<div v-else>
|
||||
<el-button class="button-new-tag" size="small" @click="addTimeOut(scope.row.id)">编辑</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="扣除分值" width="150">
|
||||
<template v-if="scope.row.type=='Conversation'&&scope.row.memberId=='1'" slot-scope="scope">
|
||||
<div v-if="commandEvaluationRuleVOs[scope.row.id]&&commandEvaluationRuleVOs[scope.row.id].deductScore!=undefined">
|
||||
<el-input-number
|
||||
v-if="commandEvaluationRuleVOs[scope.row.id].deductScoreVisible"
|
||||
:ref="'saveDeductScoreInput'+scope.row.id"
|
||||
v-model="commandEvaluationRuleVOs[scope.row.id].deductScore"
|
||||
:min="0"
|
||||
size="small"
|
||||
:max="Infinity"
|
||||
:step="1"
|
||||
@keyup.enter.native="handleDeductScoreConfirm(scope.row.id)"
|
||||
@blur="handleDeductScoreConfirm(scope.row.id)"
|
||||
/>
|
||||
<div v-else style="cursor:pointer" @click="modifyDeductScore(scope.row.id)">
|
||||
{{ commandEvaluationRuleVOs[scope.row.id].deductScore }}
|
||||
</div>
|
||||
</div>
|
||||
<div v-else>
|
||||
<el-button class="button-new-tag" size="small" @click="addDeductScore(scope.row.id)">编辑</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<table class="operateStatistic">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="operateStatisticLT">
|
||||
<div class="operateStatisticLIn">每一项分值</div>
|
||||
</th>
|
||||
<th class="operateStatisticRT">
|
||||
<div class="operateStatisticLIn">运营统计项列表</div>
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tr>
|
||||
<td class="operateStatisticLB">
|
||||
<el-input-number
|
||||
v-model="formModel.operationStatisticVO.score"
|
||||
:style="{width: '130px'}"
|
||||
:min="0"
|
||||
size="small"
|
||||
:max="100"
|
||||
:step="1"
|
||||
/>
|
||||
</td>
|
||||
<td class="operateStatisticRB">
|
||||
<el-table :data="formModel.operationStatisticVO.itemVOS" border style="width:651px;float:left;" height="240">
|
||||
<el-table-column prop="description" label="简介" width="150">
|
||||
<template slot-scope="scope">
|
||||
<el-input v-model="scope.row.description" type="text" :style="{width: '125px'}" size="small" :maxlength="100" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="type" label="类型" width="150">
|
||||
<template slot-scope="scope">
|
||||
<el-select v-model="scope.row.type" :style="{width: '125px'}" size="small">
|
||||
<el-option
|
||||
v-for="option in operationItemType"
|
||||
:key="option.value"
|
||||
:label="option.label"
|
||||
:value="option.value"
|
||||
/>
|
||||
</el-select>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="actionId" label="关联步骤" width="150">
|
||||
<template slot-scope="scope">
|
||||
<el-button v-if="scope.row.type=='Time'" type="primary" size="small" class="selectStep" @click="selectStep(scope.row.actionId,scope.$index)">选择步骤</el-button>
|
||||
<div v-if="scope.row.actionId">步骤id:{{ scope.row.actionId }}</div>
|
||||
<!-- <el-select v-model="scope.row.stepId" :style="{width: '125px'}" size="small">
|
||||
<el-option
|
||||
v-for="option in stepVOs"
|
||||
:key="option.id"
|
||||
:label="option.description"
|
||||
:value="option.id"
|
||||
/>
|
||||
</el-select> -->
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="standardAnswer" label="非时间标准答案" width="150">
|
||||
<template slot-scope="scope">
|
||||
<el-input v-if="scope.row.type=='Non_Time'" v-model="scope.row.standardAnswer" type="text" :style="{width: '125px'}" size="small" :maxlength="100" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" width="50">
|
||||
<template slot-scope="scope">
|
||||
<span class="el-icon-error deleteScene" @click="handleDelete(scope.$index)" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<el-button type="primary" size="small" class="addOperateItem" @click="addItemVO">添加</el-button>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</el-form>
|
||||
<div style="margin-top:15px;width:1250px;margin-left:auto;margin-right:auto;">
|
||||
<el-button v-if="!isModify" type="primary" @click="doModifyDes">编辑步骤描述</el-button>
|
||||
<el-button v-if="isModify" type="success" @click="cancleModifyDes">取消编辑步骤描述</el-button>
|
||||
<!-- <el-button v-if="idOperateStatistic" type="success" @click="doOperateStatistic">编辑运营统计</el-button> -->
|
||||
</div>
|
||||
<step-description
|
||||
ref="addStepDescription"
|
||||
@cancleDescription="cancleDescription"
|
||||
@submitDescription="submitDescription"
|
||||
/>
|
||||
<!-- <operate-statistic ref="operateStatistic" @submitOperateStatistic="submitOperateStatistic" /> -->
|
||||
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button type="primary" @click="doSave">保存</el-button>
|
||||
<el-button type="primary" @click="doConfirm">{{ $t('global.confirm') }}</el-button>
|
||||
<el-button @click="doClose">{{ $t('global.cancel') }}</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</template>
|
||||
<script>
|
||||
import ConstConfig from '@/scripts/ConstConfig';
|
||||
import Cookies from 'js-cookie';
|
||||
import {getScriptByIdNew} from '@/api/script';
|
||||
import StepDescription from './stepDescription';
|
||||
// import OperateStatistic from './operateStatistic';
|
||||
import {covertOperate} from '@/views/newMap/displayNew/scriptDisplay/component/covertOperation';
|
||||
import {updateCompetitionPracticalStep, getCompetitionPracticalSceneById} from '@/api/competition';
|
||||
import { loadMapDataById } from '@/utils/loaddata';
|
||||
export default {
|
||||
name:'ModifyStep',
|
||||
components:{
|
||||
StepDescription
|
||||
// OperateStatistic
|
||||
},
|
||||
props: {
|
||||
title:{
|
||||
type: String,
|
||||
default() {
|
||||
return '';
|
||||
}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
isModify:false,
|
||||
jsonData: '',
|
||||
isOperate:false,
|
||||
dialogVisible:false,
|
||||
currentSelectStep:'',
|
||||
actionList:[],
|
||||
memberList:[],
|
||||
operationItemType:[{label:'时间', value:'Time'}, {label:'非时间', value:'Non_Time'}],
|
||||
checkBoxActionList:[],
|
||||
radioBoxAction:'',
|
||||
commandEvaluationRuleVOs:{},
|
||||
currentstepAction:[],
|
||||
startArray:[],
|
||||
endArray:[],
|
||||
stepVOs:{},
|
||||
formModel:{
|
||||
id:'',
|
||||
name:'',
|
||||
main:true,
|
||||
description:'',
|
||||
disposalProcesses:'',
|
||||
operationScore:'',
|
||||
scriptId:'',
|
||||
commandEvaluationRuleVOs:[],
|
||||
stepVOs:[],
|
||||
operationStatisticVO:{
|
||||
score:'',
|
||||
itemVOS:[]
|
||||
}
|
||||
},
|
||||
loading: false
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
idOperateStatistic() {
|
||||
return Object.values(this.stepVOs).length > 2;
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
'$store.state.map.mapDataLoadedCount': function (val) {
|
||||
this.parseMember();
|
||||
getCompetitionPracticalSceneById(this.formModel.id).then(response=>{
|
||||
const commandEvaluationRuleVOs = {};
|
||||
if (response.data.commandEvaluationRuleVOs) {
|
||||
response.data.commandEvaluationRuleVOs.forEach(data=>{
|
||||
commandEvaluationRuleVOs[data.actionId] = data;
|
||||
// commandEvaluationRuleVOs[data.actionId].inputVisible = false;
|
||||
});
|
||||
}
|
||||
const stepVOs = {};
|
||||
if (response.data.stepVOs) {
|
||||
response.data.stepVOs.forEach(data=>{
|
||||
stepVOs[data.startActionId] = data;
|
||||
const dataIndex = this.tempActionList.findIndex((value, index, arr)=>{ return value.id == data.startActionId; });
|
||||
const dataIndex1 = this.tempActionList.findIndex((value, index, arr)=>{ return value.id == data.endActionId; });
|
||||
this.startArray.push(dataIndex);
|
||||
this.endArray.push(dataIndex1);
|
||||
});
|
||||
}
|
||||
// action.remarkName = this.covert(action);
|
||||
this.tempActionList.forEach(action=>{
|
||||
action.remarkName = this.covert(action);
|
||||
});
|
||||
this.actionList = [...this.tempActionList];
|
||||
this.commandEvaluationRuleVOs = commandEvaluationRuleVOs;
|
||||
if (response.data.operationStatisticVO) {
|
||||
this.formModel.operationStatisticVO = response.data.operationStatisticVO;
|
||||
} else {
|
||||
this.formModel.operationStatisticVO = {score:0, itemVOS:[]};
|
||||
}
|
||||
this.stepVOs = stepVOs;
|
||||
});
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
doShow(row) {
|
||||
// 加载剧本数据
|
||||
this.loading = true;
|
||||
this.dialogVisible = true;
|
||||
this.formModel.id = row.id;
|
||||
this.formModel.name = row.name;
|
||||
this.formModel.main = row.main;
|
||||
this.formModel.description = row.description;
|
||||
this.formModel.disposalProcesses = row.disposalProcesses;
|
||||
this.formModel.operationScore = row.operationScore;
|
||||
this.formModel.scriptId = row.scriptId;
|
||||
this.actionList = [];
|
||||
this.tempActionList = [];
|
||||
getScriptByIdNew(row.scriptId).then(res=>{
|
||||
this.tempActionList = res.data.actionList.filter(action=>{
|
||||
return action.type != 'Exit_Conversation' && action.type != 'Accept_Conversation_Invitation';
|
||||
});
|
||||
this.jsonData = res;
|
||||
// 加载地图数据
|
||||
loadMapDataById(res.data.mapId, 'parse');
|
||||
});
|
||||
},
|
||||
parseMember() {
|
||||
const stationMap = {};
|
||||
const stationList = this.$store.state.map.map.stationList;
|
||||
stationList.forEach(station=>{
|
||||
stationMap[station.code] = station;
|
||||
});
|
||||
let lastData = JSON.stringify(this.jsonData.data.memberList);
|
||||
const roleTypeList = ConstConfig.ConstSelect.roleTypeNew;
|
||||
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);
|
||||
const lastMemberList = {};
|
||||
lastData.forEach((member, index)=>{
|
||||
const userName = member.userName ? '-' + member.userName : '';
|
||||
const name = member.name ? '-' + member.name : '';
|
||||
if (member.deviceCode && member.type == '行值') {
|
||||
const device = stationMap[member.deviceCode];
|
||||
member.deviceName = device.name;
|
||||
// || device.groupNumber
|
||||
member.label = member.type + member.deviceName + name + userName;
|
||||
member.normalName = member.type + member.deviceName + name;
|
||||
} else if (member.deviceCode && member.type == '司机') {
|
||||
member.deviceName = member.deviceCode;
|
||||
member.label = member.type + member.deviceName + name + userName;
|
||||
} else {
|
||||
member.deviceName = '';
|
||||
member.label = member.type + name + userName;
|
||||
member.normalName = member.type + name;
|
||||
}
|
||||
lastMemberList[member.id] = member;
|
||||
this.memberList = lastMemberList;
|
||||
});
|
||||
this.loading = false;
|
||||
},
|
||||
doClose() {
|
||||
// this.$refs.dataform.resetForm();
|
||||
this.dialogVisible = false;
|
||||
this.$store.dispatch('map/mapClear');
|
||||
},
|
||||
covert(element) {
|
||||
// console.log(JSON.stringify(element), '8888888---666666');
|
||||
const member = this.memberList[element.memberId];
|
||||
let resultData = '';
|
||||
if (element.type == 'Accept_Conversation_Invitation') {
|
||||
resultData = member.label + '请接受会话邀请';
|
||||
} else if (element.type == 'Conversation') {
|
||||
resultData = member.label + '说：' + element.content;
|
||||
} else if (element.type == 'Operation') {
|
||||
resultData = covertOperate(element.operationType, element.operationParamMap);
|
||||
resultData = resultData.replace('请', member.label);
|
||||
// this.scriptTipMessage = '请找到' + deviceName + '，执行【' + operateName.label + '】操作';
|
||||
} else if (element.type == 'Exit_Conversation') {
|
||||
resultData = member.label + '结束当前会话';
|
||||
} else if (element.type == 'Start_Conversation' ) {
|
||||
const inviteMember = [];
|
||||
// this.$emit('allowCreatCoversition');
|
||||
if (element.communicationObject) {
|
||||
if (element.communicationObject == 'ALL_STATION') {
|
||||
inviteMember.push('所有车站');
|
||||
} else if (element.communicationObject == 'ALL_TRAIN') {
|
||||
inviteMember.push('所有司机');
|
||||
}
|
||||
} else {
|
||||
element.conversationMemberIds.forEach(id=>{
|
||||
if (element.memberId != id) {
|
||||
inviteMember.push((this.memberList[id] || {label: ''}).label);
|
||||
}
|
||||
});
|
||||
}
|
||||
resultData = member.label + '创建会话,选择' + inviteMember.toString();
|
||||
} else if (element.type == 'Command') {
|
||||
const targetName = this.memberList[element.commandInitiateVO.targetMemberId];
|
||||
const CommandList = {
|
||||
Drive_Ahead:'确认运行至前方站',
|
||||
Route_Block_Drive:'进路闭塞法行车',
|
||||
Switch_Hook_Lock: '道岔钩锁',
|
||||
Drive_Through_The_Red_Light:'越红灯行驶',
|
||||
Drive_Through_The_Guide_Signal:'越引导信号行驶',
|
||||
Open_Or_Close_Door:'开关门',
|
||||
Set_Speed_Limit:'设置限速',
|
||||
Turn_Direction: '换端',
|
||||
Drive_To: '驾驶至',
|
||||
Apply_URM_Mode: '转URM模式',
|
||||
Apply_RM_Mode: '转RM模式',
|
||||
Apply_CM_Mode: '转CM模式',
|
||||
Apply_AM_Mode: '转AM模式'
|
||||
};
|
||||
resultData = member.label + '对【' + targetName.label + '】下达【' + CommandList[element.commandInitiateVO.commandType] + '】指令';
|
||||
} else if (element.type == 'Drive') {
|
||||
if (element.targetSectionCode) {
|
||||
const section = this.$store.getters['map/getDeviceByCode'](element.targetSectionCode);
|
||||
if (section && section.name) {
|
||||
resultData = member.label + '把车开到区段' + section.name;
|
||||
}
|
||||
}
|
||||
}
|
||||
return resultData;
|
||||
},
|
||||
initCommandEvaluationRuleVOs(actionId) {
|
||||
if (!this.commandEvaluationRuleVOs[actionId]) {
|
||||
this.$set(this.commandEvaluationRuleVOs, actionId, {});
|
||||
this.$set(this.commandEvaluationRuleVOs[actionId], 'actionId', actionId);
|
||||
}
|
||||
},
|
||||
addKeyWord(actionId) {
|
||||
this.initCommandEvaluationRuleVOs(actionId);
|
||||
this.$set(this.commandEvaluationRuleVOs[actionId], 'inputValue', '');
|
||||
this.$set(this.commandEvaluationRuleVOs[actionId], 'keyWords', []);
|
||||
this.$set(this.commandEvaluationRuleVOs[actionId], 'inputVisible', true);
|
||||
this.$nextTick(_ => {
|
||||
this.$refs['saveTagInput' + actionId].$refs.input.focus();
|
||||
});
|
||||
},
|
||||
addScore(actionId) {
|
||||
this.initCommandEvaluationRuleVOs(actionId);
|
||||
this.$set(this.commandEvaluationRuleVOs[actionId], 'score', 0);
|
||||
this.$set(this.commandEvaluationRuleVOs[actionId], 'scoreVisible', true);
|
||||
this.$nextTick(_ => {
|
||||
this.$refs['saveScoreInput' + actionId].$refs.input.focus();
|
||||
});
|
||||
},
|
||||
addTimeOut(actionId) {
|
||||
this.initCommandEvaluationRuleVOs(actionId);
|
||||
this.$set(this.commandEvaluationRuleVOs[actionId], 'timeOut', 0);
|
||||
this.$set(this.commandEvaluationRuleVOs[actionId], 'timeOutVisible', true);
|
||||
this.$nextTick(_ => {
|
||||
this.$refs['saveTimeOutInput' + actionId].$refs.input.focus();
|
||||
});
|
||||
},
|
||||
handleTimeOutConfirm(actionId) {
|
||||
this.$set(this.commandEvaluationRuleVOs[actionId], 'timeOutVisible', false);
|
||||
},
|
||||
modifyTimeOut(actionId) {
|
||||
this.$set(this.commandEvaluationRuleVOs[actionId], 'timeOutVisible', true);
|
||||
this.$nextTick(_ => {
|
||||
this.$refs['saveTimeOutInput' + actionId].$refs.input.focus();
|
||||
});
|
||||
},
|
||||
showInput(actionId) {
|
||||
const self = this;
|
||||
// this.commandEvaluationRuleVOs[actionId].inputVisible = true;
|
||||
this.$set(this.commandEvaluationRuleVOs[actionId], 'inputVisible', true);
|
||||
this.$nextTick(_ => {
|
||||
self.$refs['saveTagInput' + actionId].$refs.input.focus();
|
||||
});
|
||||
},
|
||||
handleInputConfirm(actionId) {
|
||||
const inputValue = this.commandEvaluationRuleVOs[actionId].inputValue;
|
||||
if (inputValue) {
|
||||
this.commandEvaluationRuleVOs[actionId].keyWords.push(inputValue);
|
||||
}
|
||||
this.$set(this.commandEvaluationRuleVOs[actionId], 'inputVisible', false);
|
||||
this.$set(this.commandEvaluationRuleVOs[actionId], 'inputValue', '');
|
||||
},
|
||||
handleScoreConfirm(actionId) {
|
||||
this.$set(this.commandEvaluationRuleVOs[actionId], 'scoreVisible', false);
|
||||
},
|
||||
modifyScore(actionId) {
|
||||
this.$set(this.commandEvaluationRuleVOs[actionId], 'scoreVisible', true);
|
||||
this.$nextTick(_ => {
|
||||
this.$refs['saveScoreInput' + actionId].$refs.input.focus();
|
||||
});
|
||||
},
|
||||
handleClose(index, tagIndex) {
|
||||
const keyWords = this.commandEvaluationRuleVOs[index].keyWords;
|
||||
keyWords.splice(tagIndex, 1);
|
||||
},
|
||||
handleDeductScoreConfirm(actionId) {
|
||||
this.$set(this.commandEvaluationRuleVOs[actionId], 'deductScoreVisible', false);
|
||||
},
|
||||
modifyDeductScore(actionId) {
|
||||
this.$set(this.commandEvaluationRuleVOs[actionId], 'deductScoreVisible', true);
|
||||
this.$nextTick(_ => {
|
||||
this.$refs['saveDeductScoreInput' + actionId].$refs.input.focus();
|
||||
});
|
||||
},
|
||||
addDeductScore(actionId) {
|
||||
this.initCommandEvaluationRuleVOs(actionId);
|
||||
this.$set(this.commandEvaluationRuleVOs[actionId], 'deductScore', 0);
|
||||
this.$set(this.commandEvaluationRuleVOs[actionId], 'deductScoreVisible', true);
|
||||
this.$nextTick(_ => {
|
||||
this.$refs['saveDeductScoreInput' + actionId].$refs.input.focus();
|
||||
});
|
||||
},
|
||||
doConfirm() {
|
||||
this.doUpdate();
|
||||
this.doClose();
|
||||
},
|
||||
doSave() {
|
||||
this.doUpdate();
|
||||
},
|
||||
doUpdate() {
|
||||
let commandEvaluationRuleVOs = Object.values(this.commandEvaluationRuleVOs);
|
||||
const stepVOs = Object.values(this.stepVOs);
|
||||
commandEvaluationRuleVOs = commandEvaluationRuleVOs.filter(eachData=>{
|
||||
return (eachData.keyWords && eachData.keyWords.length > 0) || eachData.timeOut || eachData.score || eachData.deductScore;
|
||||
});
|
||||
let count = 0;
|
||||
let errorMessage = '';
|
||||
commandEvaluationRuleVOs.forEach((RuleVO, index)=>{
|
||||
if (RuleVO.keyWords) {
|
||||
if (!(RuleVO.keyWords.length > 0 && RuleVO.timeOut && RuleVO.score && RuleVO.deductScore)) {
|
||||
errorMessage += '动作id为' + RuleVO.actionId + '的表单没有填写完整, ';
|
||||
count++;
|
||||
}
|
||||
}
|
||||
});
|
||||
if (count > 0) {
|
||||
this.$messageBox(errorMessage);
|
||||
return false;
|
||||
}
|
||||
if (stepVOs.length > 0) {
|
||||
stepVOs.sort(this.objectSort('startActionId'));
|
||||
stepVOs.map((step, index)=>{
|
||||
step.id = (index + 1);
|
||||
});
|
||||
}
|
||||
if (commandEvaluationRuleVOs.length > 0) {
|
||||
commandEvaluationRuleVOs.map(data=>{
|
||||
delete data.inputValue;
|
||||
delete data.inputVisible;
|
||||
delete data.scoreVisible;
|
||||
delete data.timeOutVisible;
|
||||
delete data.deductScoreVisible;
|
||||
});
|
||||
}
|
||||
const itemVOS = this.formModel.operationStatisticVO.itemVOS;
|
||||
if (itemVOS.length > 0) {
|
||||
let result = true;
|
||||
itemVOS.forEach(item=>{
|
||||
delete item.id;
|
||||
if (item.description && (item.actionId || item.standardAnswer)) {
|
||||
result = result && true;
|
||||
} else {
|
||||
result = result && false;
|
||||
}
|
||||
});
|
||||
if (!result) {
|
||||
this.$messageBox('请填写运营统计项列表');
|
||||
return false;
|
||||
}
|
||||
}
|
||||
// if (operationStatisticVO) {
|
||||
// this.formModel.operationStatisticVO = operationStatisticVO;
|
||||
// }
|
||||
this.formModel.commandEvaluationRuleVOs = commandEvaluationRuleVOs;
|
||||
this.formModel.stepVOs = stepVOs;
|
||||
updateCompetitionPracticalStep(this.formModel).then(res=>{
|
||||
this.$message.success('编辑步骤信息成功');
|
||||
}).catch(error=>{
|
||||
this.$message.success('编辑步骤信息失败:' + error.message);
|
||||
});
|
||||
},
|
||||
doModifyDes() {
|
||||
this.actionList.forEach(action=>{
|
||||
this.$set(this.checkBoxActionList, action.id, {status:false});
|
||||
});
|
||||
this.startArray.forEach((start, index)=>{
|
||||
for (var i = start; i <= this.endArray[index]; i++) {
|
||||
this.$set(this.checkBoxActionList, this.actionList[i].id, {disabled:true});
|
||||
}
|
||||
});
|
||||
this.isModify = true;
|
||||
},
|
||||
cancleModifyDes() {
|
||||
this.isModify = false;
|
||||
},
|
||||
changeSelectActionId(val, actionId, index) {
|
||||
if (val) {
|
||||
this.currentstepAction.push({'actionId':actionId, 'index':index});
|
||||
if (this.currentstepAction.length >= 2) {
|
||||
this.$refs.addStepDescription.doShow();
|
||||
}
|
||||
} else {
|
||||
const data = this.currentstepAction.findIndex((value, index, arr)=>{ return value.actionId == actionId; });
|
||||
this.currentstepAction.splice(data, 1);
|
||||
}
|
||||
},
|
||||
changeSelectRadioActionId(val, actionId, index) {
|
||||
this.formModel.operationStatisticVO.itemVOS[this.currentSelectStep].actionId = actionId;
|
||||
this.isOperate = false;
|
||||
this.currentSelectStep = '';
|
||||
},
|
||||
cancleDescription() {
|
||||
this.currentstepAction.forEach(data=>{
|
||||
this.checkBoxActionList[data.actionId].status = false;
|
||||
});
|
||||
this.currentstepAction = [];
|
||||
},
|
||||
submitDescription(stepDescription) {
|
||||
this.currentstepAction.sort(this.objectSort('actionId'));
|
||||
let start, end;
|
||||
this.currentstepAction.forEach((data, index)=>{
|
||||
if (index % 2 == 0) {
|
||||
this.startArray.push(data.index);
|
||||
start = data.index;
|
||||
} else {
|
||||
this.endArray.push(data.index);
|
||||
end = data.index;
|
||||
}
|
||||
});
|
||||
for (var i = start; i <= end; i++) {
|
||||
this.$set(this.checkBoxActionList, this.actionList[i].id, {disabled:true});
|
||||
}
|
||||
this.$set(this.stepVOs, this.currentstepAction[0].actionId, {description:stepDescription, startActionId:parseInt(this.currentstepAction[0].actionId), endActionId:parseInt(this.currentstepAction[1].actionId)});
|
||||
this.cancleDescription();
|
||||
},
|
||||
submitOperateStatistic(formModel) {
|
||||
this.doUpdate(formModel);
|
||||
},
|
||||
objectSort(keyName) {
|
||||
return function (objectN, objectM) {
|
||||
var valueN = parseInt(objectN[keyName]);
|
||||
var valueM = parseInt(objectM[keyName]);
|
||||
if (valueN > valueM) return 1;
|
||||
else if (valueN < valueM) return -1;
|
||||
else return 0;
|
||||
};
|
||||
},
|
||||
objectSpanMethod({ row, column, rowIndex, columnIndex }) {
|
||||
if (this.startArray.length > 0) {
|
||||
if (columnIndex === 0) {
|
||||
let rowspan = 1;
|
||||
let colspan = 1;
|
||||
for (var i = 0; i < this.startArray.length; i++) {
|
||||
if (rowIndex == this.startArray[i]) {
|
||||
rowspan = this.endArray[i] - this.startArray[i] + 1;
|
||||
colspan = 1;
|
||||
} else if (rowIndex > this.startArray[i] && rowIndex <= this.endArray[i]) {
|
||||
rowspan = 0;
|
||||
colspan = 0;
|
||||
}
|
||||
}
|
||||
return {
|
||||
rowspan:rowspan,
|
||||
colspan:colspan
|
||||
};
|
||||
}
|
||||
}
|
||||
},
|
||||
// doOperateStatistic() {
|
||||
// this.$refs.operateStatistic.doShow(this.stepVOs, this.formModel.operationStatisticVO);
|
||||
// },
|
||||
handleDelete(index) {
|
||||
this.formModel.operationStatisticVO.itemVOS.splice(index, 1);
|
||||
},
|
||||
addItemVO() {
|
||||
this.formModel.operationStatisticVO.itemVOS.push({'description':'', actionId:'', type:'Time'});
|
||||
},
|
||||
selectStep(actionId, index) {
|
||||
this.currentSelectStep = index;
|
||||
this.radioBoxAction = actionId;
|
||||
this.isOperate = true;
|
||||
},
|
||||
getSummaries(param) {
|
||||
const { columns, data } = param;
|
||||
const sums = [];
|
||||
columns && columns.forEach((column, index) => {
|
||||
if (index === 0) {
|
||||
sums[index] = '总分值';
|
||||
return;
|
||||
}
|
||||
if (index === 4) {
|
||||
const values = [];
|
||||
data.map(item =>{
|
||||
if (item.memberId === '1' && (item.type == 'Conversation' || item.type == 'Operation')) {
|
||||
values.push(item.id);
|
||||
}
|
||||
});
|
||||
sums[index] = values.reduce((prev, curr) => {
|
||||
let value = 0;
|
||||
if (this.commandEvaluationRuleVOs[curr]) { value = Number(this.commandEvaluationRuleVOs[curr].score || 0); }
|
||||
if (!isNaN(value)) {
|
||||
return prev + value;
|
||||
} else {
|
||||
return Number(this.commandEvaluationRuleVOs[prev].score);
|
||||
}
|
||||
}, 0);
|
||||
return;
|
||||
}
|
||||
});
|
||||
return sums;
|
||||
}
|
||||
}
|
||||
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.checkBoxAction{
|
||||
display: inline-block;
|
||||
float: left;
|
||||
margin-right: 8px;
|
||||
}
|
||||
.input-new-tag {
|
||||
width: 60px;
|
||||
margin-left: 10px;
|
||||
margin-bottom: 10px;
|
||||
vertical-align: bottom;
|
||||
}
|
||||
.button-new-tag{
|
||||
margin-bottom:10px;
|
||||
}
|
||||
.operateStatistic{
|
||||
width: 1320px;
|
||||
margin: 15px auto;
|
||||
border: 1px #EBEEF5 solid;
|
||||
}
|
||||
.operateStatisticLT{
|
||||
width: 300px;
|
||||
padding: 10px;
|
||||
border-bottom: 1px #EBEEF5 solid;
|
||||
border-right: 1px solid #EBEEF5;
|
||||
}
|
||||
.operateStatisticLB{
|
||||
padding: 10px;
|
||||
border-right: 1px solid #EBEEF5;
|
||||
}
|
||||
.operateStatisticRT{
|
||||
width: 950px;
|
||||
padding: 10px;
|
||||
border-bottom: 1px #EBEEF5 solid;
|
||||
}
|
||||
.operateStatisticRB{
|
||||
padding: 10px;
|
||||
}
|
||||
.operateStatisticLIn{
|
||||
text-align: left;
|
||||
padding-left: 5px;
|
||||
color: #909399;
|
||||
}
|
||||
.addOperateItem{
|
||||
margin-left: 20px;
|
||||
margin-top: 200px;
|
||||
}
|
||||
.deleteScene{
|
||||
font-size: 24px;
|
||||
color: #f00;
|
||||
cursor: pointer;
|
||||
}
|
||||
.selectStep{
|
||||
|
||||
}
|
||||
</style>
|
||||
<style lang="scss">
|
||||
.el-tag {
|
||||
margin-right: 10px;
|
||||
margin-bottom: 10px;
|
||||
vertical-align:top;
|
||||
}
|
||||
</style>
|
||||
@ -1,162 +0,0 @@
|
||||
<template>
|
||||
<div v-if="dialogShow" class="OperateStatistic">
|
||||
<div class="OperateStatisticIn">
|
||||
<div class="OperateStatisticInName">编辑运营统计</div>
|
||||
<div class="OperateStatisticContent">
|
||||
<el-form ref="dataform" :rules="rules" :model="formModel" label-width="140px" class="statisticForm" @submit.native.prevent>
|
||||
<el-form-item label="每一项分值" :required="true" prop="score">
|
||||
<el-input-number
|
||||
v-model="formModel.score"
|
||||
:style="{width: '130px'}"
|
||||
:min="0"
|
||||
size="medium"
|
||||
:max="100"
|
||||
:step="1"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="运营统计项列表" :required="true" prop="itemVOS">
|
||||
<el-button type="primary" size="small" style="margin-bottom:10px" @click="addItemVO">添加</el-button>
|
||||
<el-table :data="formModel.itemVOS" border style="width:351px;" height="200">
|
||||
<el-table-column prop="description" label="简介" width="150">
|
||||
<template slot-scope="scope">
|
||||
<el-input v-model="scope.row.description" type="text" :style="{width: '125px'}" size="small" :maxlength="100" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="stepId" label="关联步骤" width="150">
|
||||
<template slot-scope="scope">
|
||||
<el-select v-model="scope.row.stepId" :style="{width: '125px'}" size="small">
|
||||
<el-option
|
||||
v-for="option in stepVOs"
|
||||
:key="option.id"
|
||||
:label="option.description"
|
||||
:value="option.id"
|
||||
/>
|
||||
</el-select>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" width="50">
|
||||
<template slot-scope="scope">
|
||||
<span class="el-icon-error deleteScene" @click="handleDelete(scope.$index)" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
<div class="OperateStatistic-footer">
|
||||
<el-button @click="roleDoClose">{{ $t('global.cancel') }}</el-button>
|
||||
<el-button type="primary" @click="confirm">{{ $t('global.confirm') }}</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
name:'OperateStatistic',
|
||||
data() {
|
||||
return {
|
||||
dialogShow:false,
|
||||
stepVOs:[],
|
||||
formModel:{
|
||||
score:0,
|
||||
itemVOS:[]
|
||||
// private String description;
|
||||
// private Long stepId;
|
||||
}
|
||||
};
|
||||
},
|
||||
computed:{
|
||||
rules() {
|
||||
const crules = {
|
||||
score: [
|
||||
{ required: true, message: '请输入每一项分值', trigger: 'blur' },
|
||||
{ required: true, message: '请输入每一项分值', trigger: 'change' }
|
||||
]};
|
||||
return crules;
|
||||
// itemVOS
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
roleDoClose() {
|
||||
this.dialogShow = false;
|
||||
},
|
||||
confirm() {
|
||||
const self = this;
|
||||
this.$refs.dataform.validate(() => {
|
||||
const itemVOS = self.formModel.itemVOS;
|
||||
if (itemVOS.length > 0) {
|
||||
let result = true;
|
||||
itemVOS.forEach(item=>{
|
||||
if (item.description && item.stepId) {
|
||||
result = result && true;
|
||||
} else {
|
||||
result = result && false;
|
||||
}
|
||||
});
|
||||
if (!result) {
|
||||
this.$messageBox('请填写运营统计项列表');
|
||||
}
|
||||
}
|
||||
this.dialogShow = false;
|
||||
this.$emit('submitOperateStatistic', this.formModel);
|
||||
});
|
||||
},
|
||||
doShow(stepVOs, operationStatisticVO) {
|
||||
if (JSON.stringify(operationStatisticVO) != '{}') {
|
||||
this.formModel = operationStatisticVO;
|
||||
}
|
||||
this.stepVOs = Object.values(stepVOs);
|
||||
this.stepDescription = '';
|
||||
this.dialogShow = true;
|
||||
},
|
||||
addItemVO() {
|
||||
this.formModel.itemVOS.push({'description':'', stepId:''});
|
||||
},
|
||||
handleDelete(index) {
|
||||
this.formModel.itemVOS.splice(index, 1);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style lang="scss">
|
||||
.OperateStatistic{
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
left: 0;
|
||||
top: 0;
|
||||
background: rgba(0,0,0,0.7);
|
||||
z-index: 2;
|
||||
}
|
||||
.OperateStatisticIn{
|
||||
width: 600px;
|
||||
background: #fff;
|
||||
left: 50%;
|
||||
position: absolute;
|
||||
transform: translate(-50%,-50%);
|
||||
top: 40%;
|
||||
height: 450px;
|
||||
border-radius:4px;
|
||||
}
|
||||
.OperateStatistic-footer{
|
||||
text-align: center;
|
||||
}
|
||||
.OperateStatisticInName{
|
||||
font-size: 17px;
|
||||
margin-top: 16px;
|
||||
text-align: center;
|
||||
}
|
||||
.OperateStatisticContent{
|
||||
padding: 20px 0px 0px 0px;
|
||||
}
|
||||
.statisticForm{
|
||||
display: table;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
.deleteScene{
|
||||
font-size: 24px;
|
||||
color: #f00;
|
||||
cursor: pointer;
|
||||
}
|
||||
</style>
|
||||
@ -1,93 +0,0 @@
|
||||
<template>
|
||||
<!-- <el-dialog
|
||||
title="修改步骤名称"
|
||||
:visible.sync="dialogShow"
|
||||
top="50px"
|
||||
width="350px"
|
||||
:before-do-close="roleDoClose"
|
||||
:close-on-click-modal="false"
|
||||
>
|
||||
<div>
|
||||
<el-input v-model="stepDescription" type="text" :style="{width: '80%'}" :maxlength="80" />
|
||||
</div>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button @click="roleDoClose">{{ $t('global.cancel') }}</el-button>
|
||||
<el-button type="primary" @click="confirm">{{ $t('global.confirm') }}</el-button>
|
||||
</span>
|
||||
</el-dialog> -->
|
||||
<div v-if="dialogShow" class="StepDescription">
|
||||
<div class="StepDescriptionIn">
|
||||
<div class="StepDescriptionInName">修改步骤名称</div>
|
||||
<div class="StepDescriptionInInput">
|
||||
<el-input v-model="stepDescription" type="text" :style="{width: '80%'}" :maxlength="80" />
|
||||
</div>
|
||||
<div class="StepDescription-footer">
|
||||
<el-button @click="roleDoClose">{{ $t('global.cancel') }}</el-button>
|
||||
<el-button type="primary" @click="confirm">{{ $t('global.confirm') }}</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
name:'StepDescription',
|
||||
data() {
|
||||
return {
|
||||
dialogShow:false,
|
||||
stepDescription:''
|
||||
};
|
||||
},
|
||||
methods:{
|
||||
roleDoClose() {
|
||||
this.dialogShow = false;
|
||||
this.$emit('cancleDescription');
|
||||
},
|
||||
confirm() {
|
||||
if (this.stepDescription.trim().length > 0) {
|
||||
this.dialogShow = false;
|
||||
this.$emit('submitDescription', this.stepDescription);
|
||||
}
|
||||
},
|
||||
doShow() {
|
||||
this.stepDescription = '';
|
||||
this.dialogShow = true;
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style lang="scss">
|
||||
.StepDescription{
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
left: 0;
|
||||
top: 0;
|
||||
background: rgba(0,0,0,0.7);
|
||||
z-index: 2;
|
||||
}
|
||||
.StepDescriptionIn{
|
||||
width: 350px;
|
||||
background: #fff;
|
||||
left: 50%;
|
||||
position: absolute;
|
||||
transform: translate(-50%,-50%);
|
||||
top: 40%;
|
||||
height: 240px;
|
||||
border-radius:4px;
|
||||
}
|
||||
.StepDescription-footer{
|
||||
text-align: center;
|
||||
}
|
||||
.StepDescriptionInName{
|
||||
font-size: 17px;
|
||||
margin-top: 16px;
|
||||
text-align: center;
|
||||
}
|
||||
.StepDescriptionInInput{
|
||||
margin-top: 30px;
|
||||
margin-bottom: 40px;
|
||||
text-align: center;
|
||||
padding: 0px 20px;
|
||||
|
||||
}
|
||||
</style>
|
||||
@ -1,449 +0,0 @@
|
||||
<template>
|
||||
<div style="width: 100%;height: 100%">
|
||||
<div style="position: absolute;top: 61px;width: 100%;background: #fff;z-index: 9;height: 90px;">
|
||||
<el-row>
|
||||
<div class="title-text">场景语音训练结果</div>
|
||||
</el-row>
|
||||
<el-row v-loading="loading">
|
||||
<el-col :span="6" :offset="1">
|
||||
<span>用户：</span>
|
||||
<el-select v-model="userId" size="mini" filterable placeholder="请选择">
|
||||
<el-option
|
||||
v-for="item in userList"
|
||||
:key="item.id"
|
||||
:label="item.name"
|
||||
:value="item.id"
|
||||
/>
|
||||
</el-select>
|
||||
</el-col>
|
||||
<el-col :span="4" :offset="13">
|
||||
<el-button size="mini" type="primary" @click="queryData">查询</el-button>
|
||||
<el-button size="mini" type="primary" @click="goBack">返回</el-button>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
<el-table v-loading="loading" :data="actionList" border style="width:96%;margin: 90px auto 0;" :span-method="objectSpanMethod">
|
||||
<el-table-column label="动作id" width="70" prop="id" />
|
||||
<el-table-column label="动作内容" width="350">
|
||||
<template slot-scope="scope">
|
||||
<!-- v-model="scope.row.id" -->
|
||||
<el-checkbox v-if="isModify" v-model="checkBoxActionList[scope.row.id].status" :disabled="checkBoxActionList[scope.row.id].disabled" class="checkBoxAction" @change="((val)=>{changeSelectActionId(val, scope.row.id, scope.$index)})" />
|
||||
<el-radio v-if="isOperate" v-model="radioBoxAction" :label="scope.row.id" name="operateAction" class="checkBoxAction" @change="((val)=>{changeSelectRadioActionId(val, scope.row.id, scope.$index)})">{{ '' }}</el-radio>
|
||||
<div>{{ covert(scope.row) }}</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="语音识别关键词列表" width="350">
|
||||
<template v-if="scope.row.type=='Conversation'&&scope.row.memberId=='1'" slot-scope="scope">
|
||||
<div v-if="commandEvaluationRuleVOs[scope.row.id]&&commandEvaluationRuleVOs[scope.row.id].keyWords">
|
||||
<el-tag v-for="(tag,index) in commandEvaluationRuleVOs[scope.row.id].keyWords" :key="index" :disable-transitions="false">{{ tag }}</el-tag>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="录音" width="80">
|
||||
<template slot-scope="scope">
|
||||
<el-button v-if="scope.row.filePath" class="chat-box-footer-create" style="background: #F2F2F2;color: #000;font-size: 40px;" @click="audioPlay(scope.row)">
|
||||
<i v-if="audioPlayId !== scope.row.id" class="el-icon-video-play" />
|
||||
<i v-else class="el-icon-video-pause" />
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="转译结果" prop="result" />
|
||||
<el-table-column label="错误关键字">
|
||||
<template slot-scope="scope">
|
||||
<el-tag v-for="(tag,index) in scope.row.wrongKeyWords" :key="index" :disable-transitions="false">{{ tag }}</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="错误发音">
|
||||
<template slot-scope="scope">
|
||||
<el-tag v-for="(tag,index) in scope.row.wrongTripNumbers" :key="index" :disable-transitions="false">{{ tag }}</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" width="80">
|
||||
<template slot-scope="scope">
|
||||
<el-button v-if="scope.row.recordId" type="text" @click="checkAudio(scope.row,scope.$index)">重新校验</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<audio id="audioPlay" style="display:none" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {getScriptByIdNew} from '@/api/script';
|
||||
import { getCompetitionPracticalSceneById } from '@/api/competition';
|
||||
import { loadMapDataById } from '@/utils/loaddata';
|
||||
import ConstConfig from '@/scripts/ConstConfig';
|
||||
import Cookies from 'js-cookie';
|
||||
import {covertOperate} from '@/views/newMap/displayNew/scriptDisplay/component/covertOperation';
|
||||
import { audioFilesCheck, getHavaAudoUserList, audioFilesCheckAllSence } from '@/api/competition';
|
||||
export default {
|
||||
name: 'VoiceTraining',
|
||||
data() {
|
||||
return {
|
||||
actionList:[],
|
||||
startArray: [],
|
||||
endArray: [],
|
||||
jsonData: '',
|
||||
stepVOs: {},
|
||||
memberList: [],
|
||||
isModify:false,
|
||||
isOperate:false,
|
||||
commandEvaluationRuleVOs:{},
|
||||
audioDataMap: {},
|
||||
userList: [],
|
||||
userId: '',
|
||||
resultMap: {},
|
||||
loading: false,
|
||||
audioPlayId: '',
|
||||
baseUrl:this.$store.state.user.ossUrl
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
'$store.state.map.mapDataLoadedCount': function (val) {
|
||||
this.parseMember();
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.initFunction();
|
||||
},
|
||||
methods: {
|
||||
async initFunction() {
|
||||
const userListData = await getHavaAudoUserList(this.$route.query.sceneId);
|
||||
this.userList = userListData.data;
|
||||
const scriptData = await getScriptByIdNew(this.$route.query.scriptId);
|
||||
const dispatcher = scriptData.data.memberList.find(member => member.type === 'DISPATCHER');
|
||||
this.actionList = scriptData.data.actionList.filter(action => {
|
||||
action.wrongKeyWords = [];
|
||||
action.wrongTripNumbers = [];
|
||||
action.result = '';
|
||||
action.recordId = '';
|
||||
action.filePath = '';
|
||||
return action.type === 'Conversation' && action.memberId == dispatcher.id;
|
||||
});
|
||||
this.jsonData = scriptData;
|
||||
const competitionData = await getCompetitionPracticalSceneById(this.$route.query.sceneId);
|
||||
const commandEvaluationRuleVOs = {};
|
||||
if (competitionData.data.commandEvaluationRuleVOs) {
|
||||
competitionData.data.commandEvaluationRuleVOs.forEach(data=>{
|
||||
commandEvaluationRuleVOs[data.actionId] = data;
|
||||
});
|
||||
}
|
||||
const stepVOs = {};
|
||||
if (competitionData.data.stepVOs) {
|
||||
competitionData.data.stepVOs.forEach(data=>{
|
||||
stepVOs[data.startActionId] = data;
|
||||
const dataIndex = this.actionList.findIndex((value, index, arr)=>{ return value.id == data.startActionId; });
|
||||
const dataIndex1 = this.actionList.findIndex((value, index, arr)=>{ return value.id == data.endActionId; });
|
||||
this.startArray.push(dataIndex);
|
||||
this.endArray.push(dataIndex1);
|
||||
});
|
||||
}
|
||||
this.commandEvaluationRuleVOs = commandEvaluationRuleVOs;
|
||||
this.stepVOs = stepVOs;
|
||||
loadMapDataById(scriptData.data.mapId, 'parse');
|
||||
},
|
||||
audioPlay(row) {
|
||||
const audioUrl = this.baseUrl + row.filePath;
|
||||
const that = this;
|
||||
if (this.audioPlayId === row.id) {
|
||||
this.audioPlayId = '';
|
||||
document.querySelector('#audioPlay').pause();
|
||||
} else if (this.audioPlayId) {
|
||||
document.querySelector('#audioPlay').pause();
|
||||
this.audioPlayId = row.id;
|
||||
document.querySelector('#audioPlay').src = audioUrl;
|
||||
document.querySelector('#audioPlay').play();
|
||||
document.querySelector('#audioPlay').onended = function() {
|
||||
that.audioPlayId = '';
|
||||
};
|
||||
} else {
|
||||
this.audioPlayId = row.id;
|
||||
document.querySelector('#audioPlay').src = audioUrl;
|
||||
document.querySelector('#audioPlay').play();
|
||||
document.querySelector('#audioPlay').onended = function() {
|
||||
that.audioPlayId = '';
|
||||
};
|
||||
}
|
||||
},
|
||||
queryData() {
|
||||
if (this.userId) {
|
||||
this.loading = true;
|
||||
audioFilesCheckAllSence(this.$route.query.sceneId, this.userId).then(resp => {
|
||||
this.actionList.forEach(item => {
|
||||
item.result = '';
|
||||
item.wrongKeyWords = [];
|
||||
item.wrongTripNumbers = [];
|
||||
item.recordId = '';
|
||||
item.filePath = '';
|
||||
});
|
||||
(resp.data || []).forEach(elem => {
|
||||
this.actionList.forEach(item => {
|
||||
if (elem.actionId === item.id) {
|
||||
item.result = elem.result;
|
||||
item.wrongKeyWords = elem.keyWords;
|
||||
item.wrongTripNumbers = elem.tripNumbers;
|
||||
item.recordId = elem.recordId;
|
||||
item.filePath = elem.filePath;
|
||||
}
|
||||
});
|
||||
});
|
||||
this.loading = false;
|
||||
}).catch(() => {
|
||||
this.loading = false;
|
||||
this.$message.error('获取校验数据异常！');
|
||||
});
|
||||
} else {
|
||||
this.$message.error('请选择语音录制用户！');
|
||||
}
|
||||
},
|
||||
parseMember() {
|
||||
const stationMap = {};
|
||||
const stationList = this.$store.state.map.map.stationList;
|
||||
stationList.forEach(station=>{
|
||||
stationMap[station.code] = station;
|
||||
});
|
||||
let lastData = JSON.stringify(this.jsonData.data.memberList);
|
||||
const roleTypeList = ConstConfig.ConstSelect.roleTypeNew;
|
||||
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);
|
||||
const lastMemberList = {};
|
||||
lastData.forEach((member, index)=>{
|
||||
const userName = member.userName ? '-' + member.userName : '';
|
||||
const name = member.name ? '-' + member.name : '';
|
||||
if (member.deviceCode && member.type == '行值') {
|
||||
const device = stationMap[member.deviceCode];
|
||||
member.deviceName = device.name;
|
||||
member.label = member.type + member.deviceName + name + userName;
|
||||
member.normalName = member.type + member.deviceName + name;
|
||||
} else if (member.deviceCode && member.type == '司机') {
|
||||
member.deviceName = member.deviceCode;
|
||||
member.label = member.type + member.deviceName + name + userName;
|
||||
} else {
|
||||
member.deviceName = '';
|
||||
member.label = member.type + name + userName;
|
||||
member.normalName = member.type + name;
|
||||
}
|
||||
lastMemberList[member.id] = member;
|
||||
this.memberList = lastMemberList;
|
||||
});
|
||||
},
|
||||
objectSpanMethod({ row, column, rowIndex, columnIndex }) {
|
||||
if (this.startArray.length > 0) {
|
||||
if (columnIndex === 0) {
|
||||
let rowspan = 1;
|
||||
let colspan = 1;
|
||||
for (var i = 0; i < this.startArray.length; i++) {
|
||||
if (rowIndex == this.startArray[i]) {
|
||||
rowspan = this.endArray[i] - this.startArray[i] + 1;
|
||||
colspan = 1;
|
||||
} else if (rowIndex > this.startArray[i] && rowIndex <= this.endArray[i]) {
|
||||
rowspan = 0;
|
||||
colspan = 0;
|
||||
}
|
||||
}
|
||||
return {
|
||||
rowspan:rowspan,
|
||||
colspan:colspan
|
||||
};
|
||||
}
|
||||
}
|
||||
},
|
||||
checkAudio(row, index) {
|
||||
this.loading = true;
|
||||
const commandEvaluationRule = this.commandEvaluationRuleVOs[row.id];
|
||||
const params = {
|
||||
id: commandEvaluationRule.id,
|
||||
actionId: commandEvaluationRule.actionId,
|
||||
actionVO: {content: row.content},
|
||||
keyWords: commandEvaluationRule.keyWords
|
||||
};
|
||||
audioFilesCheck(row.recordId, params).then(resp => {
|
||||
this.actionList[index].result = resp.data.result;
|
||||
this.actionList[index].wrongKeyWords = resp.data.keyWords;
|
||||
this.actionList[index].wrongTripNumbers = resp.data.tripNumbers;
|
||||
this.loading = false;
|
||||
}).catch((e) => {
|
||||
this.loading = false;
|
||||
this.$message.error('校验语音数据失败！');
|
||||
});
|
||||
},
|
||||
goBack() {
|
||||
this.$router.go(-1);
|
||||
},
|
||||
covert(element) {
|
||||
const member = this.memberList[element.memberId] || {};
|
||||
let resultData = '';
|
||||
if (element.type == 'Accept_Conversation_Invitation') {
|
||||
resultData = member.label + '请接受会话邀请';
|
||||
} else if (element.type == 'Conversation') {
|
||||
resultData = member.label + '说：' + element.content;
|
||||
} else if (element.type == 'Operation') {
|
||||
resultData = covertOperate(element.operationType, element.operationParamMap);
|
||||
resultData = resultData.replace('请', member.label);
|
||||
// this.scriptTipMessage = '请找到' + deviceName + '，执行【' + operateName.label + '】操作';
|
||||
} else if (element.type == 'Exit_Conversation') {
|
||||
resultData = member.label + '结束当前会话';
|
||||
} else if (element.type == 'Start_Conversation' ) {
|
||||
const inviteMember = [];
|
||||
// this.$emit('allowCreatCoversition');
|
||||
if (element.communicationObject) {
|
||||
if (element.communicationObject == 'ALL_STATION') {
|
||||
inviteMember.push('所有车站');
|
||||
} else if (element.communicationObject == 'ALL_TRAIN') {
|
||||
inviteMember.push('所有司机');
|
||||
}
|
||||
} else {
|
||||
element.conversationMemberIds.forEach(id=>{
|
||||
if (element.memberId != id) {
|
||||
inviteMember.push((this.memberList[id] || {label: ''}).label);
|
||||
}
|
||||
});
|
||||
}
|
||||
resultData = member.label + '创建会话,选择' + inviteMember.toString();
|
||||
} else if (element.type == 'Command') {
|
||||
const targetName = this.memberList[element.commandInitiateVO.targetMemberId];
|
||||
const CommandList = {
|
||||
Drive_Ahead:'确认运行至前方站',
|
||||
Route_Block_Drive:'进路闭塞法行车',
|
||||
Switch_Hook_Lock: '道岔钩锁',
|
||||
Drive_Through_The_Red_Light:'越红灯行驶',
|
||||
Drive_Through_The_Guide_Signal:'越引导信号行驶',
|
||||
Open_Or_Close_Door:'开关门',
|
||||
Set_Speed_Limit:'设置限速',
|
||||
Turn_Direction: '换端',
|
||||
Drive_To: '驾驶至',
|
||||
Apply_URM_Mode: '转URM模式',
|
||||
Apply_RM_Mode: '转RM模式',
|
||||
Apply_CM_Mode: '转CM模式',
|
||||
Apply_AM_Mode: '转AM模式'
|
||||
};
|
||||
resultData = member.label + '对【' + targetName.label + '】下达【' + CommandList[element.commandInitiateVO.commandType] + '】指令';
|
||||
} else if (element.type == 'Drive') {
|
||||
if (element.targetSectionCode) {
|
||||
const section = this.$store.getters['map/getDeviceByCode'](element.targetSectionCode);
|
||||
if (section && section.name) {
|
||||
resultData = member.label + '把车开到区段' + section.name;
|
||||
}
|
||||
}
|
||||
}
|
||||
return resultData;
|
||||
},
|
||||
|
||||
getUrl(el) {
|
||||
return `https://joylink.club/oss/joylink${el.filePath}`;
|
||||
},
|
||||
covertTime(time) {
|
||||
const date = new Date(time);
|
||||
let hour = date.getHours();
|
||||
let minute = date.getMinutes();
|
||||
let second = date.getSeconds();
|
||||
hour = hour > 9 ? hour : '0' + hour;
|
||||
minute = minute > 9 ? minute : '0' + minute;
|
||||
second = second > 9 ? second : '0' + second;
|
||||
return hour + ':' + minute + ':' + second;
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.record_progress_bar{
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
border-radius: 50%;
|
||||
}
|
||||
.userHeader{margin-bottom: 2px;}
|
||||
.userChatTime{font-size: 12px;display:inline-block;}
|
||||
.chatContentInClass{
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
border: 1px solid #f1f1f1;
|
||||
}
|
||||
.leftUser{
|
||||
float: left;
|
||||
margin-left: 10px;
|
||||
margin-top: 10px;
|
||||
display: inline-block;
|
||||
}
|
||||
.chat-box-footer-create{
|
||||
font-size: 16px;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
position: relative;
|
||||
left: 5px;
|
||||
top: 6px;
|
||||
line-height: 30px;
|
||||
cursor: pointer;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 50%;
|
||||
background: green;
|
||||
border: none;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
.chat-box-footer-send{
|
||||
background: #F2F2F2;
|
||||
right: 55px;
|
||||
cursor: pointer;
|
||||
.icon-yuyin{
|
||||
color: #333;
|
||||
font-size: 24px;
|
||||
margin: 0;
|
||||
}
|
||||
&.active{
|
||||
.icon-yuyin{
|
||||
color: green;
|
||||
}
|
||||
}
|
||||
.close_icon{
|
||||
position: absolute;
|
||||
top: 8px;
|
||||
left: 45px;
|
||||
font-size: 16px;
|
||||
color: #333;
|
||||
font-weight: 600;
|
||||
padding: 3px;
|
||||
}
|
||||
}
|
||||
.deleteRecord{}
|
||||
.title-text{
|
||||
font-size: 26px;
|
||||
height: 50px;
|
||||
line-height: 50px;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
.chat-box-footer-create{
|
||||
font-size: 16px;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
position: relative;
|
||||
left: 5px;
|
||||
top: 6px;
|
||||
line-height: 30px;
|
||||
cursor: pointer;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 50%;
|
||||
background: green;
|
||||
border: none;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
/deep/.el-table .el-table__row .cell{
|
||||
min-height: 50px;
|
||||
}
|
||||
</style>
|
||||
@ -1,275 +0,0 @@
|
||||
<template>
|
||||
<el-dialog title="修改场景" :visible.sync="dialogVisible" width="1000px" :before-close="doClose" center custom-class="sceneModifyOut">
|
||||
<el-form ref="form" :rules="rules" :model="formModel" label-width="120px" class="sceneModify">
|
||||
<el-form-item label="场景名称" :required="true" prop="name">
|
||||
<el-input v-model="formModel.name" type="text" :style="{width: '80%'}" :maxlength="80" />
|
||||
</el-form-item>
|
||||
<el-form-item label="场景描述" :required="true" prop="description">
|
||||
<el-input v-model="formModel.description" type="textarea" :style="{width: '80%'}" />
|
||||
</el-form-item>
|
||||
<el-form-item label="处置流程" :required="true" prop="disposalProcesses">
|
||||
<el-input v-model="formModel.disposalProcesses" type="textarea" :style="{width: '80%'}" />
|
||||
</el-form-item>
|
||||
<el-form-item label="步骤描述" :required="true" prop="stepVOs">
|
||||
<el-button type="primary" size="small" style="margin-bottom:10px" @click="addStepVO">添加</el-button>
|
||||
<el-table :data="formModel.stepVOs" border style="width: 661px;">
|
||||
<el-table-column prop="description" label=" 简介" width="200">
|
||||
<template slot-scope="scope">
|
||||
<!-- <el-form-item :prop="'stepVOs[' + scope.$index + '].description'"> -->
|
||||
<el-input v-model="scope.row.description" type="text" :style="{width: '170px'}" size="small" />
|
||||
<!-- </el-form-item> -->
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="startActionId" label=" 首动作" width="200">
|
||||
<template slot-scope="scope">
|
||||
<!-- <el-form-item :prop="'stepVOs+[' + scope.$index + '].startActionId'"> -->
|
||||
<el-select v-model="scope.row.startActionId" type="textarea" :style="{width: '170px'}" size="small">
|
||||
<el-option
|
||||
v-for="option in actionList"
|
||||
:key="option.id"
|
||||
:label="option.name"
|
||||
:value="option.id"
|
||||
/>
|
||||
</el-select>
|
||||
<!-- </el-form-item> -->
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="endActionId" label=" 尾动作" width="200">
|
||||
<template slot-scope="scope">
|
||||
<el-select v-model="scope.row.endActionId" type="textarea" :style="{width: '170px'}" size="small">
|
||||
<el-option
|
||||
v-for="option in actionList"
|
||||
:key="option.id"
|
||||
:label="option.name"
|
||||
:value="option.id"
|
||||
/>
|
||||
</el-select>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" width="60">
|
||||
<template slot-scope="scope">
|
||||
<span class="el-icon-error deleteScene" @click="handleDelete(scope.$index)" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-form-item>
|
||||
<el-form-item label=" 指令下达规则" :required="true" prop="commandPublishStatistics">
|
||||
<el-button type="primary" size="small" style="margin-bottom:10px" @click="addStatistics">添加</el-button>
|
||||
<el-table :data="formModel.commandPublishStatistics" border style="width: 751px;">
|
||||
<el-table-column prop="keyWords" label=" 语音识别关键词列表" width="250">
|
||||
<template slot-scope="scope" style="font-size:0">
|
||||
<el-tag v-for="(tag,index) in scope.row.keyWords" :key="index" closable :disable-transitions="false" @close="handleClose(scope.$index,index)">{{ tag }}</el-tag>
|
||||
<el-input
|
||||
v-if="scope.row.inputVisible"
|
||||
:ref="'saveTagInput'+scope.$index"
|
||||
v-model="scope.row.inputValue"
|
||||
size="small"
|
||||
class="input-new-tag"
|
||||
@keyup.enter.native="handleInputConfirm(scope.$index)"
|
||||
@blur="handleInputConfirm(scope.$index)"
|
||||
/>
|
||||
<el-button v-else class="button-new-tag" size="small" @click="showInput(scope.$index)">添加</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="actionId" label="动作" width="200">
|
||||
<template slot-scope="scope">
|
||||
<el-select v-model="scope.row.actionId" type="textarea" :style="{width: '170px'}" size="small">
|
||||
<el-option
|
||||
v-for="option in actionList"
|
||||
:key="option.id"
|
||||
:label="option.name"
|
||||
:value="option.id"
|
||||
/>
|
||||
</el-select>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="timeOut" label="超时时间" width="150">
|
||||
<template slot-scope="scope">
|
||||
<el-input-number
|
||||
v-model="scope.row.timeOut"
|
||||
:style="{width: '100px'}"
|
||||
:min="0"
|
||||
size="small"
|
||||
:max="Infinity"
|
||||
:step="1"
|
||||
/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="score" label="总分值" width="150">
|
||||
<template slot-scope="scope">
|
||||
<el-input-number
|
||||
v-model="scope.row.score"
|
||||
:style="{width: '100px'}"
|
||||
:min="0"
|
||||
size="small"
|
||||
:max="Infinity"
|
||||
:step="1"
|
||||
/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-form-item>
|
||||
<el-form-item label="运营部分总分" :required="true" prop="operationScore">
|
||||
<el-input-number v-model="formModel.operationScore" :controls="true" :min="0" :max="100" :step="1" />
|
||||
</el-form-item>
|
||||
<el-form-item label="关联剧本" :required="true" prop="scriptId">
|
||||
<!-- <el-input-number v-model="formModel.scriptId" :controls="true" :min="0" :max="100" :step="1" /> -->
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button type="primary" @click="doUpdate">{{ $t('global.confirm') }}</el-button>
|
||||
<el-button @click="doClose">{{ $t('global.cancel') }}</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
name:'UpdateScene',
|
||||
props: {
|
||||
scriptList:{
|
||||
type: Array,
|
||||
default() {
|
||||
return [];
|
||||
}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
dialogVisible:false,
|
||||
sceneId:'',
|
||||
actionList:[],
|
||||
formModel:{
|
||||
name:'', // 场景名称
|
||||
description:'', // 场景描述
|
||||
disposalProcesses:'', // 处置流程
|
||||
scriptId:'', // 剧本id
|
||||
operationScore:0, // 运营部分总分（站间停车等）
|
||||
main:true, // 是否主场景
|
||||
stepVOs:[], // 步骤描述
|
||||
commandPublishStatistics:[] // 指令下达规则列表
|
||||
}
|
||||
};
|
||||
},
|
||||
computed:{
|
||||
rules() {
|
||||
const crules = {
|
||||
name: [
|
||||
{ required: true, validator: this.validateSceneName, trigger: 'blur' },
|
||||
{ required: true, validator: this.validateSceneName, trigger: 'change' }
|
||||
],
|
||||
description: [
|
||||
{ required: true, validator: this.validateDescription, trigger: 'blur' },
|
||||
{ required: true, validator: this.validateDescription, trigger: 'change' }
|
||||
],
|
||||
disposalProcesses: [
|
||||
{ required: true, validator: this.validateDisposalProcesses, trigger: 'blur' },
|
||||
{ required: true, validator: this.validateDisposalProcesses, trigger: 'change' }
|
||||
],
|
||||
scriptId:[
|
||||
{ required: true, message: '请选择剧本', trigger: 'change' }
|
||||
],
|
||||
operationScore:[
|
||||
{ required: true, message: '请输入运营部分总分', trigger: 'blur' }
|
||||
]
|
||||
};
|
||||
return crules;
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
validateSceneName(rule, value, callback) {
|
||||
if (value.trim().length === 0) {
|
||||
this.formModel.name = this.formModel.name.replace(/\s/g, '');
|
||||
return callback(new Error('请输入场景名称'));
|
||||
} else {
|
||||
return callback();
|
||||
}
|
||||
},
|
||||
validateDescription(rule, value, callback) {
|
||||
if (value.trim().length === 0) {
|
||||
this.formModel.description = this.formModel.description.replace(/\s/g, '');
|
||||
return callback(new Error('请输入场景描述'));
|
||||
} else {
|
||||
return callback();
|
||||
}
|
||||
},
|
||||
validateDisposalProcesses(rule, value, callback) {
|
||||
if (value.trim().length === 0) {
|
||||
this.formModel.disposalProcesses = this.formModel.disposalProcesses.replace(/\s/g, '');
|
||||
return callback(new Error('请输入处置流程'));
|
||||
} else {
|
||||
return callback();
|
||||
}
|
||||
},
|
||||
doShow(sceneId) {
|
||||
this.dialogVisible = true;
|
||||
this.sceneId = sceneId;
|
||||
|
||||
},
|
||||
doClose() {
|
||||
this.$refs.form.resetFields();
|
||||
this.dialogVisible = false;
|
||||
},
|
||||
doUpdate() {
|
||||
|
||||
},
|
||||
addStepVO() {
|
||||
this.formModel.stepVOs.push({competitionId:this.sceneId, description:'', startActionId:'', endActionId:''});
|
||||
},
|
||||
addStatistics() {
|
||||
this.formModel.commandPublishStatistics.push({competitionId:this.sceneId, keyWords:[], actionId:'', timeOut:0, inputVisible:false, inputValue:'', score:0 });
|
||||
},
|
||||
handleDelete(index) {
|
||||
this.formModel.stepVOs.splice(index, 1);
|
||||
},
|
||||
handleClose(index, tagIndex) {
|
||||
const keyWords = this.formModel.commandPublishStatistics[index].keyWords;
|
||||
keyWords.splice(tagIndex, 1);
|
||||
},
|
||||
handleInputConfirm(index) {
|
||||
const inputValue = this.formModel.commandPublishStatistics[index].inputValue;
|
||||
if (inputValue) {
|
||||
this.formModel.commandPublishStatistics[index].keyWords.push(inputValue);
|
||||
}
|
||||
this.formModel.commandPublishStatistics[index].inputVisible = false;
|
||||
this.formModel.commandPublishStatistics[index].inputValue = '';
|
||||
},
|
||||
showInput(index) {
|
||||
this.formModel.commandPublishStatistics[index].inputVisible = true;
|
||||
this.$nextTick(_ => {
|
||||
this.$refs['saveTagInput' + index].$refs.input.focus();
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.deleteScene{
|
||||
font-size: 24px;
|
||||
color: #f00;
|
||||
cursor: pointer;
|
||||
}
|
||||
.sceneModify{
|
||||
height:500px;
|
||||
overflow: auto;
|
||||
}
|
||||
.input-new-tag {
|
||||
width: 60px;
|
||||
margin-left: 10px;
|
||||
margin-bottom: 10px;
|
||||
vertical-align: bottom;
|
||||
}
|
||||
.button-new-tag{
|
||||
margin-bottom:10px;
|
||||
}
|
||||
</style>
|
||||
<style lang="scss">
|
||||
.sceneModifyOut.el-dialog--center .el-dialog__body {
|
||||
text-align: initial;
|
||||
padding: 25px 10px 30px 10px;
|
||||
}
|
||||
.el-tag {
|
||||
margin-right: 10px;
|
||||
margin-bottom: 10px;
|
||||
vertical-align:top;
|
||||
}
|
||||
</style>
|
||||
@ -1,516 +0,0 @@
|
||||
<template>
|
||||
<div style="width: 100%;height: 100%">
|
||||
<div class="title-text">场景语音训练</div>
|
||||
<el-button size="mini" type="primary" style="position: absolute;top: 80px;right: 30px;z-index: 10;" @click="goBack">返回</el-button>
|
||||
<el-table :data="actionList" border style="width:96%;margin: 60px auto 0;" :span-method="objectSpanMethod">
|
||||
<el-table-column label="动作id" width="70" prop="id" />
|
||||
<el-table-column label="动作内容" width="350">
|
||||
<template slot-scope="scope">
|
||||
<!-- v-model="scope.row.id" -->
|
||||
<el-checkbox v-if="isModify" v-model="checkBoxActionList[scope.row.id].status" :disabled="checkBoxActionList[scope.row.id].disabled" class="checkBoxAction" @change="((val)=>{changeSelectActionId(val, scope.row.id, scope.$index)})" />
|
||||
<el-radio v-if="isOperate" v-model="radioBoxAction" :label="scope.row.id" name="operateAction" class="checkBoxAction" @change="((val)=>{changeSelectRadioActionId(val, scope.row.id, scope.$index)})">{{ '' }}</el-radio>
|
||||
<div>{{ covert(scope.row) }}</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="语音识别关键词列表" width="350">
|
||||
<template v-if="scope.row.type=='Conversation'&&scope.row.memberId=='1'" slot-scope="scope">
|
||||
<div v-if="commandEvaluationRuleVOs[scope.row.id]&&commandEvaluationRuleVOs[scope.row.id].keyWords">
|
||||
<el-tag v-for="(tag,index) in commandEvaluationRuleVOs[scope.row.id].keyWords" :key="index" :disable-transitions="false">{{ tag }}</el-tag>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="录音" width="140">
|
||||
<template slot-scope="scope">
|
||||
<div style="display: flex;">
|
||||
<el-button class="chat-box-footer-create chat-box-footer-send" :disabled="recordSendingId !== scope.row.id && !!recordSendingId" :class="{'active': recordSendingId == scope.row.id}" size="mini" type="primary" @click="startRecording(scope.row)">
|
||||
<el-progress v-if="recordSendingId == scope.row.id" class="record_progress_bar" type="circle" :show-text="false" :percentage="100/60*seconds" :width="40" :stroke-width="2" status="success" />
|
||||
<i v-if="recordSendingId == scope.row.id" class="el-icon-close close_icon" @click.stop="cancleRecording()" />
|
||||
<span class="iconfont icon-yuyin"></span>
|
||||
</el-button>
|
||||
<el-button v-if="audioDataMap[scope.row.id]" class="chat-box-footer-create" style="background: #F2F2F2;color: #000;font-size: 40px;" @click="audioPlay(scope.row)">
|
||||
<i v-if="audioPlayId !== scope.row.id" class="el-icon-video-play" />
|
||||
<i v-else class="el-icon-video-pause" />
|
||||
</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="转译结果" prop="result" />
|
||||
<el-table-column label="错误关键字">
|
||||
<template slot-scope="scope">
|
||||
<el-tag v-for="(tag,index) in scope.row.wrongKeyWords" :key="index" :disable-transitions="false">{{ tag }}</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="错误发音">
|
||||
<template slot-scope="scope">
|
||||
<el-tag v-for="(tag,index) in scope.row.wrongTripNumbers" :key="index" :disable-transitions="false">{{ tag }}</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" width="80">
|
||||
<template slot-scope="scope">
|
||||
<el-button v-if="audioDataMap[scope.row.id]" type="text" @click="checkAudio(scope.row.id, scope.row.content ,scope.$index)">校验</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<audio id="audioPlay" style="display:none" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {getScriptByIdNew} from '@/api/script';
|
||||
import { getCompetitionPracticalSceneById } from '@/api/competition';
|
||||
import { loadMapDataById } from '@/utils/loaddata';
|
||||
import ConstConfig from '@/scripts/ConstConfig';
|
||||
import Cookies from 'js-cookie';
|
||||
import {covertOperate} from '@/views/newMap/displayNew/scriptDisplay/component/covertOperation';
|
||||
import RecordRTC from 'recordrtc';
|
||||
import { uploadAudioFilesInSence, updateAuidoFilesInSence, getAudioFilesList, audioFilesCheck } from '@/api/competition';
|
||||
export default {
|
||||
name: 'VoiceTraining',
|
||||
data() {
|
||||
return {
|
||||
actionList:[],
|
||||
startArray: [],
|
||||
endArray: [],
|
||||
jsonData: '',
|
||||
stepVOs: {},
|
||||
memberList: [],
|
||||
isModify:false,
|
||||
isOperate:false,
|
||||
commandEvaluationRuleVOs:{},
|
||||
seconds: 0,
|
||||
recordSending: false,
|
||||
recorders: null,
|
||||
microphone:null,
|
||||
recordSendingId: null,
|
||||
audioDataMap: {},
|
||||
audioPlayId: '',
|
||||
baseUrl:this.$store.state.user.ossUrl
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
'$store.state.map.mapDataLoadedCount': function (val) {
|
||||
this.parseMember();
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.initFunction();
|
||||
},
|
||||
methods: {
|
||||
initFunction() {
|
||||
getScriptByIdNew(this.$route.query.scriptId).then(res=>{
|
||||
const dispatcher = res.data.memberList.find(member => member.type === 'DISPATCHER');
|
||||
this.actionList = res.data.actionList.filter(action=>{
|
||||
action.wrongKeyWords = [];
|
||||
action.wrongTripNumbers = [];
|
||||
action.result = '';
|
||||
return action.type == 'Conversation' && action.memberId == dispatcher.id;
|
||||
});
|
||||
this.jsonData = res;
|
||||
getCompetitionPracticalSceneById(this.$route.query.sceneId).then(response=>{
|
||||
const commandEvaluationRuleVOs = {};
|
||||
if (response.data.commandEvaluationRuleVOs) {
|
||||
response.data.commandEvaluationRuleVOs.forEach(data=>{
|
||||
commandEvaluationRuleVOs[data.actionId] = data;
|
||||
});
|
||||
}
|
||||
const stepVOs = {};
|
||||
if (response.data.stepVOs) {
|
||||
response.data.stepVOs.forEach(data=>{
|
||||
stepVOs[data.startActionId] = data;
|
||||
const dataIndex = this.actionList.findIndex((value, index, arr)=>{ return value.id == data.startActionId; });
|
||||
const dataIndex1 = this.actionList.findIndex((value, index, arr)=>{ return value.id == data.endActionId; });
|
||||
this.startArray.push(dataIndex);
|
||||
this.endArray.push(dataIndex1);
|
||||
});
|
||||
}
|
||||
this.commandEvaluationRuleVOs = commandEvaluationRuleVOs;
|
||||
this.stepVOs = stepVOs;
|
||||
});
|
||||
// 加载地图数据
|
||||
loadMapDataById(res.data.mapId, 'parse');
|
||||
getAudioFilesList(this.$store.state.user.id, this.$route.query.sceneId).then(resp => {
|
||||
resp.data.forEach(item => {
|
||||
this.audioDataMap[item.actionId] = item;
|
||||
});
|
||||
});
|
||||
});
|
||||
},
|
||||
parseMember() {
|
||||
const stationMap = {};
|
||||
const stationList = this.$store.state.map.map.stationList;
|
||||
stationList.forEach(station=>{
|
||||
stationMap[station.code] = station;
|
||||
});
|
||||
let lastData = JSON.stringify(this.jsonData.data.memberList);
|
||||
const roleTypeList = ConstConfig.ConstSelect.roleTypeNew;
|
||||
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);
|
||||
const lastMemberList = {};
|
||||
lastData.forEach((member, index)=>{
|
||||
const userName = member.userName ? '-' + member.userName : '';
|
||||
const name = member.name ? '-' + member.name : '';
|
||||
if (member.deviceCode && member.type == '行值') {
|
||||
const device = stationMap[member.deviceCode];
|
||||
member.deviceName = device.name;
|
||||
member.label = member.type + member.deviceName + name + userName;
|
||||
member.normalName = member.type + member.deviceName + name;
|
||||
} else if (member.deviceCode && member.type == '司机') {
|
||||
member.deviceName = member.deviceCode;
|
||||
member.label = member.type + member.deviceName + name + userName;
|
||||
} else {
|
||||
member.deviceName = '';
|
||||
member.label = member.type + name + userName;
|
||||
member.normalName = member.type + name;
|
||||
}
|
||||
lastMemberList[member.id] = member;
|
||||
this.memberList = lastMemberList;
|
||||
});
|
||||
this.loading = false;
|
||||
},
|
||||
objectSpanMethod({ row, column, rowIndex, columnIndex }) {
|
||||
if (this.startArray.length > 0) {
|
||||
if (columnIndex === 0) {
|
||||
let rowspan = 1;
|
||||
let colspan = 1;
|
||||
for (var i = 0; i < this.startArray.length; i++) {
|
||||
if (rowIndex == this.startArray[i]) {
|
||||
rowspan = this.endArray[i] - this.startArray[i] + 1;
|
||||
colspan = 1;
|
||||
} else if (rowIndex > this.startArray[i] && rowIndex <= this.endArray[i]) {
|
||||
rowspan = 0;
|
||||
colspan = 0;
|
||||
}
|
||||
}
|
||||
return {
|
||||
rowspan:rowspan,
|
||||
colspan:colspan
|
||||
};
|
||||
}
|
||||
}
|
||||
},
|
||||
checkAudio(actionId, content, index) {
|
||||
const commandEvaluationRule = this.commandEvaluationRuleVOs[actionId];
|
||||
const params = {
|
||||
id: commandEvaluationRule.id,
|
||||
actionId: commandEvaluationRule.actionId,
|
||||
actionVO: {content: content},
|
||||
keyWords: commandEvaluationRule.keyWords
|
||||
};
|
||||
const record = this.audioDataMap[actionId];
|
||||
audioFilesCheck(record.id, params).then(resp => {
|
||||
this.actionList[index].result = resp.data.result;
|
||||
this.actionList[index].wrongKeyWords = resp.data.keyWords;
|
||||
this.actionList[index].wrongTripNumbers = resp.data.tripNumbers;
|
||||
}).catch((e) => {
|
||||
this.$message.error('校验语音数据失败！');
|
||||
});
|
||||
},
|
||||
goBack() {
|
||||
this.$router.go(-1);
|
||||
},
|
||||
covert(element) {
|
||||
const member = this.memberList[element.memberId] || {};
|
||||
let resultData = '';
|
||||
if (element.type == 'Accept_Conversation_Invitation') {
|
||||
resultData = member.label + '请接受会话邀请';
|
||||
} else if (element.type == 'Conversation') {
|
||||
resultData = member.label + '说：' + element.content;
|
||||
} else if (element.type == 'Operation') {
|
||||
resultData = covertOperate(element.operationType, element.operationParamMap);
|
||||
resultData = resultData.replace('请', member.label);
|
||||
// this.scriptTipMessage = '请找到' + deviceName + '，执行【' + operateName.label + '】操作';
|
||||
} else if (element.type == 'Exit_Conversation') {
|
||||
resultData = member.label + '结束当前会话';
|
||||
} else if (element.type == 'Start_Conversation' ) {
|
||||
const inviteMember = [];
|
||||
// this.$emit('allowCreatCoversition');
|
||||
if (element.communicationObject) {
|
||||
if (element.communicationObject == 'ALL_STATION') {
|
||||
inviteMember.push('所有车站');
|
||||
} else if (element.communicationObject == 'ALL_TRAIN') {
|
||||
inviteMember.push('所有司机');
|
||||
}
|
||||
} else {
|
||||
element.conversationMemberIds.forEach(id=>{
|
||||
if (element.memberId != id) {
|
||||
inviteMember.push((this.memberList[id] || {label: ''}).label);
|
||||
}
|
||||
});
|
||||
}
|
||||
resultData = member.label + '创建会话,选择' + inviteMember.toString();
|
||||
} else if (element.type == 'Command') {
|
||||
const targetName = this.memberList[element.commandInitiateVO.targetMemberId];
|
||||
const CommandList = {
|
||||
Drive_Ahead:'确认运行至前方站',
|
||||
Route_Block_Drive:'进路闭塞法行车',
|
||||
Switch_Hook_Lock: '道岔钩锁',
|
||||
Drive_Through_The_Red_Light:'越红灯行驶',
|
||||
Drive_Through_The_Guide_Signal:'越引导信号行驶',
|
||||
Open_Or_Close_Door:'开关门',
|
||||
Set_Speed_Limit:'设置限速',
|
||||
Turn_Direction: '换端',
|
||||
Drive_To: '驾驶至',
|
||||
Apply_URM_Mode: '转URM模式',
|
||||
Apply_RM_Mode: '转RM模式',
|
||||
Apply_CM_Mode: '转CM模式',
|
||||
Apply_AM_Mode: '转AM模式'
|
||||
};
|
||||
resultData = member.label + '对【' + targetName.label + '】下达【' + CommandList[element.commandInitiateVO.commandType] + '】指令';
|
||||
} else if (element.type == 'Drive') {
|
||||
if (element.targetSectionCode) {
|
||||
const section = this.$store.getters['map/getDeviceByCode'](element.targetSectionCode);
|
||||
if (section && section.name) {
|
||||
resultData = member.label + '把车开到区段' + section.name;
|
||||
}
|
||||
}
|
||||
}
|
||||
return resultData;
|
||||
},
|
||||
audioPlay(row) {
|
||||
const audioUrl = this.baseUrl + this.audioDataMap[row.id].filePath;
|
||||
const that = this;
|
||||
if (this.audioPlayId === row.id) {
|
||||
this.audioPlayId = '';
|
||||
document.querySelector('#audioPlay').pause();
|
||||
} else if (this.audioPlayId) {
|
||||
document.querySelector('#audioPlay').pause();
|
||||
this.audioPlayId = row.id;
|
||||
document.querySelector('#audioPlay').src = audioUrl;
|
||||
document.querySelector('#audioPlay').play();
|
||||
document.querySelector('#audioPlay').onended = function() {
|
||||
that.audioPlayId = '';
|
||||
};
|
||||
} else {
|
||||
this.audioPlayId = row.id;
|
||||
document.querySelector('#audioPlay').src = audioUrl;
|
||||
document.querySelector('#audioPlay').play();
|
||||
document.querySelector('#audioPlay').onended = function() {
|
||||
that.audioPlayId = '';
|
||||
};
|
||||
}
|
||||
},
|
||||
cancleRecording() {
|
||||
this.recordSendingId = null;
|
||||
if (this.microphone) {
|
||||
clearInterval(this.inter);
|
||||
this.seconds = 0;
|
||||
this.microphone.stop();
|
||||
this.microphone = null;
|
||||
this.recordSending = false;
|
||||
this.recorders = null;
|
||||
}
|
||||
},
|
||||
// 停止录制 发送语音
|
||||
stopRecording(actionId) {
|
||||
this.audioPlay = true;
|
||||
this.recordSendingId = null;
|
||||
const that = this;
|
||||
this.recorders.stopRecording(function(blobURL) {
|
||||
clearInterval(that.inter);
|
||||
that.seconds = 0;
|
||||
const blob = that.recorders.getBlob();
|
||||
const fd = new FormData();
|
||||
fd.append('file', blob);
|
||||
if (that.audioDataMap[actionId]) {
|
||||
updateAuidoFilesInSence(that.audioDataMap[actionId].id, fd).then((resp) => {
|
||||
that.audioPlay = false;
|
||||
that.audioDataMap[resp.data.actionId] = resp.data;
|
||||
}).catch(error => {
|
||||
console.log(error);
|
||||
that.$message.error('语音发送失败: ' + error.message);
|
||||
that.audioPlay = false;
|
||||
});
|
||||
} else {
|
||||
const commandEvaluationRule = that.commandEvaluationRuleVOs[actionId];
|
||||
uploadAudioFilesInSence(that.$route.query.sceneId, commandEvaluationRule.id, actionId, fd)
|
||||
.then((resp) => {
|
||||
that.audioPlay = false;
|
||||
that.audioDataMap[resp.data.actionId] = resp.data;
|
||||
that.actionList = [...that.actionList];
|
||||
})
|
||||
.catch(error => {
|
||||
console.log(error);
|
||||
that.$message.error('语音发送失败: ' + error.message);
|
||||
that.audioPlay = false;
|
||||
});
|
||||
}
|
||||
if (that.microphone) {
|
||||
that.microphone.stop();
|
||||
that.microphone = null;
|
||||
that.recordSending = false;
|
||||
that.recorders = null;
|
||||
}
|
||||
});
|
||||
},
|
||||
getUrl(el) {
|
||||
return `https://joylink.club/oss/joylink${el.filePath}`;
|
||||
},
|
||||
covertTime(time) {
|
||||
const date = new Date(time);
|
||||
let hour = date.getHours();
|
||||
let minute = date.getMinutes();
|
||||
let second = date.getSeconds();
|
||||
hour = hour > 9 ? hour : '0' + hour;
|
||||
minute = minute > 9 ? minute : '0' + minute;
|
||||
second = second > 9 ? second : '0' + second;
|
||||
return hour + ':' + minute + ':' + second;
|
||||
},
|
||||
startRecording(row) {
|
||||
this.audioPlay = true;
|
||||
const that = this;
|
||||
if (!this.recordSending) {
|
||||
if (!this.recordSending && !this.recorders && !this.microphone) {
|
||||
const StereoAudioRecorder = RecordRTC.StereoAudioRecorder;
|
||||
navigator.getUserMedia({ audio: true }, function (stream) {
|
||||
that.microphone = stream;
|
||||
that.recorders = new RecordRTC(that.microphone, {
|
||||
type: 'audio',
|
||||
recorderType: StereoAudioRecorder,
|
||||
numberOfAudioChannels: 1,
|
||||
bitsPerSecond:256000,
|
||||
desiredSampRate: 16000
|
||||
});
|
||||
that.recordSendingId = row.id;
|
||||
that.recorders.startRecording();
|
||||
that.recordSending = true;
|
||||
that.audioPlay = false;
|
||||
that.inter = setInterval(() => {
|
||||
if (that.seconds < 60) {
|
||||
that.seconds++;
|
||||
} else {
|
||||
clearInterval(that.inter);
|
||||
that.stopRecording(row.id);
|
||||
}
|
||||
}, 1000);
|
||||
}, function (error) {
|
||||
switch (error.code || error.name) {
|
||||
case 'PERMISSION_DENIED':
|
||||
case 'PermissionDeniedError':
|
||||
that.$message({
|
||||
showClose: true,
|
||||
message: '用户拒绝提供信息',
|
||||
type: 'error'
|
||||
});
|
||||
break;
|
||||
case 'NOT_SUPPORTED_ERROR':
|
||||
case 'NotSupportedError':
|
||||
that.$message({
|
||||
showClose: true,
|
||||
message: '浏览器不支持硬件设备',
|
||||
type: 'error'
|
||||
});
|
||||
break;
|
||||
case 'MANDATORY_UNSATISFIED_ERROR':
|
||||
case 'MandatoryUnsatisfiedError':
|
||||
that.$message({
|
||||
showClose: true,
|
||||
message: '无法发现指定的硬件设备',
|
||||
type: 'error'
|
||||
});
|
||||
break;
|
||||
default:
|
||||
that.$message({
|
||||
showClose: true,
|
||||
message: '无法打开麦克风',
|
||||
type: 'error'
|
||||
});
|
||||
break;
|
||||
}
|
||||
}
|
||||
);
|
||||
}
|
||||
} else {
|
||||
this.stopRecording(row.id); // 发送语音
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.record_progress_bar{
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
border-radius: 50%;
|
||||
}
|
||||
.userHeader{margin-bottom: 2px;}
|
||||
.userChatTime{font-size: 12px;display:inline-block;}
|
||||
.chatContentInClass{
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
border: 1px solid #f1f1f1;
|
||||
}
|
||||
.leftUser{
|
||||
float: left;
|
||||
margin-left: 10px;
|
||||
margin-top: 10px;
|
||||
display: inline-block;
|
||||
}
|
||||
.chat-box-footer-create{
|
||||
font-size: 16px;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
position: relative;
|
||||
left: 5px;
|
||||
top: 6px;
|
||||
line-height: 30px;
|
||||
cursor: pointer;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 50%;
|
||||
background: green;
|
||||
border: none;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
.chat-box-footer-send{
|
||||
background: #F2F2F2;
|
||||
right: 55px;
|
||||
cursor: pointer;
|
||||
.icon-yuyin{
|
||||
color: #333;
|
||||
font-size: 24px;
|
||||
margin: 0;
|
||||
}
|
||||
&.active{
|
||||
.icon-yuyin{
|
||||
color: green;
|
||||
}
|
||||
}
|
||||
.close_icon{
|
||||
position: absolute;
|
||||
top: 8px;
|
||||
left: 45px;
|
||||
font-size: 16px;
|
||||
color: #333;
|
||||
font-weight: 600;
|
||||
padding: 3px;
|
||||
}
|
||||
}
|
||||
.deleteRecord{}
|
||||
.title-text{
|
||||
font-size: 26px;
|
||||
position: absolute;
|
||||
height: 50px;
|
||||
line-height: 50px;
|
||||
width: 100%;
|
||||
top: 61px;
|
||||
background: #fff;
|
||||
z-index: 9;
|
||||
text-align: center;
|
||||
}
|
||||
/deep/.el-table .el-table__row .cell{
|
||||
min-height: 50px;
|
||||
}
|
||||
</style>
|
||||
@ -91,9 +91,9 @@ export default {
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
'$store.state.socket.simulationOver':function(val) {
|
||||
this.back();
|
||||
},
|
||||
// '$store.state.socket.simulationOver':function(val) {
|
||||
// this.back();
|
||||
// },
|
||||
},
|
||||
beforeDestroy() {
|
||||
// console.log("destroy");
|
||||
|
||||
@ -193,7 +193,8 @@ export default {
|
||||
this.logout();
|
||||
});
|
||||
} else if (this.$route.query.third) {
|
||||
this.$router.push({ path: `/trainingPlatform/simulation/${this.$route.query.mapId}`, query: { lineCode: this.$route.query.lineCode } });
|
||||
// this.$router.push({ path: `/trainingPlatform/simulation/${this.$route.query.mapId}`, query: { lineCode: this.$route.query.lineCode } });
|
||||
window.close();
|
||||
} else if (this.projectDevice) {
|
||||
this.logout();
|
||||
} else {
|
||||
|
||||
@ -272,6 +272,8 @@ export default {
|
||||
}
|
||||
} else if (val === 'scheduleWork') {
|
||||
this.mapViewLoaded(true);
|
||||
} else if (val === 'dispatcherManage') {
|
||||
this.mapViewLoaded(true);
|
||||
}
|
||||
this.$nextTick(() => { this.loading = false; });
|
||||
},
|
||||
|
||||
@ -76,16 +76,14 @@ export default {
|
||||
{
|
||||
name: '路票',
|
||||
code: 'trainTicket',
|
||||
roleList: ['DISPATCHER', 'STATION_SUPERVISOR', 'STATION_ASSISTANT', 'STATION_MASTER', 'STATION_SIGNALER', 'STATION_PASSENGER',
|
||||
'STATION_SWITCH_MAN', 'STATION_FACILITATOR', 'STATION_WORKER', 'DEVICE_MANAGER', 'TRAIN_MASTER', 'DEPOT_DISPATCHER', 'SIGNAL_BUILDING', 'DRIVER'],
|
||||
roleList: ['STATION_SUPERVISOR', 'STATION_ASSISTANT'],
|
||||
isShow: () => this.$route.query.simType === 'RAILWAY',
|
||||
click: this.changePictureShow
|
||||
},
|
||||
{
|
||||
name: '簿册',
|
||||
code: 'registerBook',
|
||||
roleList: ['DISPATCHER', 'STATION_SUPERVISOR', 'STATION_ASSISTANT', 'STATION_MASTER', 'STATION_SIGNALER', 'STATION_PASSENGER',
|
||||
'STATION_SWITCH_MAN', 'STATION_FACILITATOR', 'STATION_WORKER', 'DEVICE_MANAGER', 'TRAIN_MASTER', 'DEPOT_DISPATCHER', 'SIGNAL_BUILDING', 'DRIVER'],
|
||||
roleList: ['STATION_SUPERVISOR', 'STATION_ASSISTANT'],
|
||||
isShow: () => this.$route.query.simType === 'RAILWAY',
|
||||
click: this.changePictureShow
|
||||
},
|
||||
|
||||
@ -48,7 +48,6 @@ import {menuOperate, commitOperate} from '@/jmapNew/theme/components/utils/menuO
|
||||
import RailTicket from './trainTicket';
|
||||
import GreenLicence from './greenLicence';
|
||||
import RedLicence from './redLicence';
|
||||
import { EventBus } from '@/scripts/event-bus';
|
||||
export default {
|
||||
name: 'Index',
|
||||
components: {
|
||||
@ -118,7 +117,7 @@ export default {
|
||||
'stationList'
|
||||
]),
|
||||
userRole() {
|
||||
return this.$store.state.training.userRole;
|
||||
return this.$store.state.training.roles;
|
||||
},
|
||||
roleDeviceCode() {
|
||||
return this.$store.state.training.roleDeviceCode;
|
||||
@ -133,14 +132,14 @@ export default {
|
||||
this.greenLicenseForm.stationSeal = station.name;
|
||||
this.redLicenseForm.stationSeal = station.name;
|
||||
}
|
||||
},
|
||||
'$store.state.training.memberList': function (val) {
|
||||
this.initGiveMemberList(val);
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
EventBus.$on('trainTicketMember', (memberList) => {
|
||||
this.giveMemberList = memberList;
|
||||
});
|
||||
const station = this.$store.getters['map/getDeviceByCode'](this.roleDeviceCode);
|
||||
|
||||
this.initGiveMemberList(this.$store.state.training.memberList);
|
||||
if (station) {
|
||||
this.ticketForm.station = station.name;
|
||||
this.ticketForm.stationSeal = station.name;
|
||||
@ -153,6 +152,15 @@ export default {
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
initGiveMemberList(memberList) {
|
||||
this.giveMemberList = [];
|
||||
const memberData = this.$store.state.training.memberData;
|
||||
memberList.forEach(item => {
|
||||
if (item.type === 'STATION_ASSISTANT' || item.type === 'STATION_SUPERVISOR') {
|
||||
this.giveMemberList.push(memberData[item.id]);
|
||||
}
|
||||
});
|
||||
},
|
||||
handleClick() {
|
||||
if (this.activeName === 'second') {
|
||||
this.query();
|
||||
|
||||
@ -116,7 +116,7 @@
|
||||
import { updateTrainingStep, getTrainingAll, updateTrainingBackgroud, getTrainingStepList, updateTrainingMaplocation, clearDesignTraining} from '@/api/trainingManage';
|
||||
import { assignUsersPlayRoles } from '@/api/jointSimulation';
|
||||
import Vue from 'vue';
|
||||
import {covertMemberData} from '@/views/newMap/displayNew/utils';
|
||||
import {covertMemberData} from '@/utils/simulation';
|
||||
import DraftTrainingList from './draftTrainingList';
|
||||
import EditOperate from './editOperate';
|
||||
import CreateDraftTraining from './createDraftTraining';
|
||||
|
||||
@ -55,7 +55,7 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {handleMemberList} from '@/views/newMap/displayNew/utils';
|
||||
import {handleMemberList} from '@/utils/simulation';
|
||||
import { getTrainingStepList, getTrainingPlayers, updateTrainingGradeRules, getTrainingGradeRules } from '@/api/trainingManage';
|
||||
export default {
|
||||
name: 'GradeRulesN',
|
||||
|
||||
@ -28,7 +28,7 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {covertMemberData} from '@/views/newMap/displayNew/utils';
|
||||
import {covertMemberData} from '@/utils/simulation';
|
||||
import { assignUsersPlayRoles } from '@/api/jointSimulation';
|
||||
export default {
|
||||
name: 'ScenePlayRole',
|
||||
|
||||
@ -1,510 +0,0 @@
|
||||
<template>
|
||||
<div class="bigLPFStrategy">
|
||||
<div class="bigLPFStrategyL">
|
||||
<div class="bigLPFStrategyLTitle">大客流站台直方图</div>
|
||||
<div :id="bigLPFStrategyId" class="bigLPFStrategyLChart" />
|
||||
</div>
|
||||
<div class="bigLPFStrategyR">
|
||||
<div class="LPFstrategyTop">
|
||||
<div class="LPFstrategyTitle">
|
||||
<span class="LPFstrategyTitleL">客流策略</span>
|
||||
<span v-if="LPFstrategyList.length>0" class="LPFstrategyTitleR">【 推算时长:{{ recoimemmandTime }}分钟 】</span>
|
||||
</div>
|
||||
</div>
|
||||
<div id="LPFstrategyListOut">
|
||||
<div v-if="LPFstrategyList.length<=0" class="noLPFstrategy">暂无策略</div>
|
||||
<!-- <el-tabs v-model="activeName" class="border-card">
|
||||
<el-tab-pane class="view-control" label="策略列表" name="first"> -->
|
||||
<!-- <div class=""></div> -->
|
||||
<!-- <el-tabs v-else v-model="activeName" type="card" class="LPFstrategyListIn">
|
||||
<el-tab-pane label="策略列表" name="first"> -->
|
||||
<!-- <div v-else class="eachLPFstrategy">
|
||||
<div class="eachLPFstrategyData1">大客流站台列表</div>
|
||||
<div v-for="(eachLPFstand,index) in LPFstandList" :key="index">
|
||||
<div class="eachLPFstrategyData">站台{{ index+1 }}：{{ eachLPFstand.name }}</div>
|
||||
<div class="eachLPFstrategyData">等待人数：{{ eachLPFstand.wait }}</div>
|
||||
</div>
|
||||
</div> -->
|
||||
<div v-for="(eachLPFstrategy,index) in LPFstrategyList" :key="index" class="eachLPFstrategy">
|
||||
<div class="eachLPFstrategyData1">策略{{ index+1 }}：{{ eachLPFstrategy.description }}</div>
|
||||
<div class="eachLPFstrategyData">指标数据：</div>
|
||||
<div class="eachLPFstrategyData">
|
||||
<span> 影响的列车数量: {{ eachLPFstrategy.effectTrainNum }}</span>
|
||||
<span class="eachLPFstrategySpan">时刻表总偏移量: {{ eachLPFstrategy.scheduleOffset }}秒 </span>
|
||||
</div>
|
||||
<!-- <div class="eachLPFstrategyData">影响的列车: {{ eachLPFstrategy.effectTrainSet.toString() }}</div> -->
|
||||
<div class="eachLPFstrategyData">
|
||||
<span> 可多载离的乘客数量（累计的）: {{ eachLPFstrategy.extraNum }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- </el-tab-pane> -->
|
||||
<!-- <el-tab-pane label="大客流站台列表" name="second"> -->
|
||||
|
||||
<!-- </el-tab-pane> -->
|
||||
<!-- </el-tabs> -->
|
||||
<!-- </el-tab-pane>
|
||||
<el-tab-pane class="view-control" label="大客流站台列表" name="second">
|
||||
{{ 111 }}
|
||||
</el-tab-pane>
|
||||
</el-tabs> -->
|
||||
</div>
|
||||
</div>
|
||||
<div class="quitLPFstrategy"><el-button type="primary" class="quitLPFButton" @click="quitLPFstrategy">退出</el-button></div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import echarts from 'echarts';
|
||||
import { mapGetters } from 'vuex';
|
||||
import { clearSimulation } from '@/api/simulation';
|
||||
import { creatSubscribe, clearSubscribe, LPFTopic} from '@/utils/stomp';
|
||||
import { getToken } from '@/utils/auth';
|
||||
import { loadMapDataById } from '@/utils/loaddata';
|
||||
export default {
|
||||
name:'BigLPFStrategy',
|
||||
data() {
|
||||
return {
|
||||
group:'',
|
||||
myChart: null,
|
||||
activeName:'first',
|
||||
LPFstrategyList:[],
|
||||
recoimemmandTime:0,
|
||||
bigLPFStrategyId:'bigLPFStrategyId',
|
||||
upStandList:[],
|
||||
downStandList:[],
|
||||
stationNameList:[],
|
||||
LPFstandList:[]
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapGetters('map', [
|
||||
'stationList',
|
||||
'stationStandList',
|
||||
'mapConfig'
|
||||
])
|
||||
},
|
||||
watch: {
|
||||
'$store.state.socket.LPFstrategy':function(val) {
|
||||
if (val && val.recommendList && val.recommendList.length > 0) {
|
||||
this.LPFstrategyList = [];
|
||||
this.recoimemmandTime = val.duration;
|
||||
val.recommendList.forEach(strategy=>{
|
||||
const eachStrategy = {};
|
||||
switch (strategy.type) {
|
||||
case 'JUMP': {
|
||||
// {"type":"JUMP","description":"为列车[132056],设置罗汉山-上行站台跳停",
|
||||
// "effectTrainSet":["004"],"effectTrainNum":1,"scheduleOffset":-50,
|
||||
// "extraNum":0,"groupNumber":"004","serviceNumber":"13","tripNumber":"2056","standCode":"PF61848"}]}
|
||||
// const stand = this.$store.getters['map/getDeviceByCode'](strategy.standCode);
|
||||
// const station = this.$store.getters['map/getDeviceByCode'](stand.stationCode);
|
||||
// eachStrategy.description = '为列车[' + strategy.groupNumber +
|
||||
// '-' + strategy.serviceNumber + '|' + strategy.tripNumber +
|
||||
// ']，设置站台' + station.name + '-' + (stand.right ? '右行' : '左行') +
|
||||
// stand.name + ' (' + stand.code + ') 跳停';
|
||||
// 为列车[005-02|2057],设置站台秀山-右行-PF42(PF44165)跳停",
|
||||
eachStrategy.description = strategy.description;
|
||||
break;
|
||||
}
|
||||
// "type":"PARK_TIME",
|
||||
// "description":"福州火车站-上行站台设置停站时间[85]",
|
||||
// "effectTrainSet":["012","004","005","009"],"effectTrainNum":4,
|
||||
// "scheduleOffset":160,"extraNum":2540,"time":85,"standCode":"PF83991"
|
||||
case 'PARK_TIME': {
|
||||
// const stand = this.$store.getters['map/getDeviceByCode'](strategy.standCode);
|
||||
// const station = this.$store.getters['map/getDeviceByCode'](stand.stationCode);
|
||||
eachStrategy.description = strategy.description;
|
||||
// eachStrategy.description = '为站台[' + station.name + '-' + (stand.right ? '右行' : '左行') +
|
||||
// stand.name + '(' + stand.code + ')] 设置停站时间，' + strategy.time + '秒';
|
||||
break;
|
||||
}
|
||||
case 'J_P': {
|
||||
// const stand = this.$store.getters['map/getDeviceByCode'](strategy.standCode);
|
||||
// const station = this.$store.getters['map/getDeviceByCode'](stand.stationCode);
|
||||
// eachStrategy.description = '为列车[' + strategy.groupNumber +
|
||||
// '-' + strategy.serviceNumber + '|' + strategy.tripNumber +
|
||||
// ']，设置站台' + station.name + '-' + (stand.right ? '右行' : '左行') +
|
||||
// stand.name + ' (' + stand.code + ') 跳停，并且为站台[' + station.name + '-' + (stand.right ? '右行' : '左行') +
|
||||
// stand.name + '(' + stand.code + ')] 设置停站时间，' + strategy.time + '秒';
|
||||
eachStrategy.description = strategy.description;
|
||||
}
|
||||
}
|
||||
eachStrategy.effectTrainNum = strategy.effectTrainNum;
|
||||
eachStrategy.scheduleOffset = strategy.scheduleOffset;
|
||||
eachStrategy.extraNum = strategy.extraNum;
|
||||
eachStrategy.effectTrainSet = strategy.effectTrainSet;
|
||||
this.LPFstrategyList.push(eachStrategy);
|
||||
});
|
||||
this.LPFstandList = [];
|
||||
val.lpfList.forEach(standInfo=>{
|
||||
const stand = this.$store.getters['map/getDeviceByCode'](standInfo.standCode);
|
||||
const station = this.$store.getters['map/getDeviceByCode'](stand.stationCode);
|
||||
this.LPFstandList.push({name:station.name + '-' + (stand.right ? '右行' : '左行') +
|
||||
stand.name + '(' + stand.code + ')', wait:standInfo.wait});
|
||||
});
|
||||
}
|
||||
},
|
||||
'$store.state.socket.simulationOver':function(val) {
|
||||
this.quitLPFstrategy();
|
||||
},
|
||||
'$store.state.app.windowSizeCount': function() { // 窗口缩放
|
||||
this.setWindowSize();
|
||||
},
|
||||
'$store.state.map.mapDataLoadedCount': function (val) {
|
||||
const upRight = this.mapConfig.upRight;
|
||||
const stationList = this.stationList.sort((a, b) => {
|
||||
return parseInt(a.kmRange) - parseInt(b.kmRange);
|
||||
});
|
||||
stationList.forEach((station)=>{
|
||||
if (!station.depot) {
|
||||
this.stationNameList.push(station.name);
|
||||
}
|
||||
});
|
||||
this.stationStandList.forEach((stand)=>{
|
||||
const station = this.$store.getters['map/getDeviceByCode'](stand.stationCode);
|
||||
if ((stand.right && upRight) || (!stand.right && !upRight)) {
|
||||
this.upStandList[station.name] = 0;
|
||||
} else {
|
||||
this.downStandList[station.name] = 0;
|
||||
}
|
||||
});
|
||||
this.loadInitData();
|
||||
this.subscribe();
|
||||
},
|
||||
'$store.state.socket.standPfiNum':function(val) {
|
||||
if (val) {
|
||||
// console.log(val, 'standPfiNum');
|
||||
val.forEach(stationNum=>{
|
||||
const upRight = this.mapConfig.upRight;
|
||||
const stand = this.$store.getters['map/getDeviceByCode'](stationNum.standCode);
|
||||
const station = this.$store.getters['map/getDeviceByCode'](stand.stationCode);
|
||||
if ((stand.right && upRight) || (!stand.right && !upRight)) {
|
||||
this.upStandList[station.name] = stationNum.num;
|
||||
} else {
|
||||
this.downStandList[station.name] = stationNum.num;
|
||||
}
|
||||
});
|
||||
this.updateData();
|
||||
}
|
||||
}
|
||||
},
|
||||
beforeDestroy() {
|
||||
if (this.group) {
|
||||
clearSimulation(this.group);
|
||||
this.clearSubscribe();
|
||||
this.$store.dispatch('socket/resetTrainPassagerNum');
|
||||
this.$store.dispatch('socket/setIsFirst', false);
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.group = this.$route.query.group;
|
||||
loadMapDataById(this.$route.query.mapId, 'parse');
|
||||
},
|
||||
methods:{
|
||||
async subscribe() {
|
||||
this.clearSubscribe();
|
||||
const header = { group: this.group || '', 'X-Token': getToken() };
|
||||
creatSubscribe(`${LPFTopic}\/${this.$route.query.group}`, header);
|
||||
},
|
||||
clearSubscribe() {
|
||||
clearSubscribe(`${LPFTopic}\/${this.group}`);
|
||||
},
|
||||
quitLPFstrategy() {
|
||||
window.close();
|
||||
},
|
||||
updateData() {
|
||||
const result = this.covertData();
|
||||
const upStandNumList = result.upStandNumList;
|
||||
const downStandNumList = result.downStandNumList;
|
||||
const series = [{
|
||||
name: '上行',
|
||||
type: 'bar',
|
||||
data:upStandNumList
|
||||
},
|
||||
{
|
||||
name: '下行',
|
||||
type: 'bar',
|
||||
data:downStandNumList
|
||||
}];
|
||||
this.myChart && this.myChart.setOption({series: series});
|
||||
},
|
||||
covertData() {
|
||||
const upStandNumList = [];
|
||||
const downStandNumList = [];
|
||||
this.stationNameList.forEach(station=>{
|
||||
upStandNumList.push(this.upStandList[station]);
|
||||
downStandNumList.push(this.downStandList[station]);
|
||||
});
|
||||
return {upStandNumList:upStandNumList, downStandNumList:downStandNumList};
|
||||
},
|
||||
|
||||
async loadInitData() {
|
||||
const result = this.covertData();
|
||||
const upStandNumList = result.upStandNumList;
|
||||
const downStandNumList = result.downStandNumList;
|
||||
this.myChart && this.myChart.showLoading();
|
||||
const option = {
|
||||
tooltip: {
|
||||
trigger: 'axis'
|
||||
},
|
||||
color:['#0029ca', '#33459c'],
|
||||
grid: [
|
||||
{
|
||||
right: '80px',
|
||||
left: '80px',
|
||||
height: '85%',
|
||||
top:'40px'
|
||||
}
|
||||
],
|
||||
xAxis: [
|
||||
{
|
||||
type: 'category',
|
||||
data: this.stationNameList,
|
||||
axisLine: {
|
||||
onZero: false,
|
||||
lineStyle: {
|
||||
width: 2,
|
||||
color: '#d14a61'
|
||||
}
|
||||
}
|
||||
}
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
type: 'value',
|
||||
splitLine: {
|
||||
show: false
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
axisLine: {
|
||||
onZero: false,
|
||||
lineStyle: {
|
||||
width: 2,
|
||||
color: '#d14a61'
|
||||
}
|
||||
}
|
||||
}
|
||||
],
|
||||
dataZoom: [{
|
||||
type: 'inside'
|
||||
},
|
||||
{
|
||||
fiterMode: 'filter',
|
||||
handleIcon: 'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
|
||||
handleSize: '80%',
|
||||
handleStyle: {
|
||||
color: '#fff',
|
||||
shadowBlur: 3,
|
||||
shadowColor: 'rgba(0, 0, 0, 0.6)',
|
||||
shadowOffsetX: 2,
|
||||
shadowOffsetY: 2
|
||||
},
|
||||
bottom: '20px'
|
||||
}],
|
||||
series: [
|
||||
{
|
||||
name: '上行',
|
||||
type: 'bar',
|
||||
data:upStandNumList
|
||||
},
|
||||
{
|
||||
name: '下行',
|
||||
type: 'bar',
|
||||
data:downStandNumList
|
||||
}
|
||||
]
|
||||
};
|
||||
await this.loadInitChart(option);
|
||||
this.myChart && this.myChart.hideLoading();
|
||||
},
|
||||
loadInitChart(option) {
|
||||
return new Promise((resolve, reject) => {
|
||||
try {
|
||||
this.myChart = echarts.init(document.getElementById(this.bigLPFStrategyId));
|
||||
if (this.myChart) {
|
||||
this.myChart.setOption(option);
|
||||
this.reSize({ width: this.$store.state.app.width * 0.74, height: this.$store.state.app.height - 40 });
|
||||
}
|
||||
resolve(true);
|
||||
} catch (error) {
|
||||
reject(error);
|
||||
}
|
||||
});
|
||||
},
|
||||
setWindowSize() {
|
||||
this.reSize({ width: this.$store.state.app.width * 0.74, height: this.$store.state.app.height - 40 });
|
||||
},
|
||||
reSize(opt) {
|
||||
if (this.myChart) {
|
||||
this.myChart.resize({
|
||||
width: opt.width,
|
||||
height: opt.height,
|
||||
silent: false
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.LPFstrategyList{
|
||||
position: absolute;
|
||||
width: 360px;
|
||||
left: 10px;
|
||||
height: 500px;
|
||||
top: 80px;
|
||||
background: #f1f1f1;
|
||||
border-radius: 6px;
|
||||
z-index: 2;
|
||||
}
|
||||
.eachLPFstrategy{
|
||||
width: 96%;
|
||||
box-shadow: 0px 5px 5px #ccc;
|
||||
border-top: 1px #dedede solid;
|
||||
margin-top: 10px;
|
||||
padding:10px;
|
||||
background: #fff;
|
||||
font-size: 14px;
|
||||
margin-left: 2%;
|
||||
border-radius: 5px;
|
||||
}
|
||||
.LPFstrategyTop{
|
||||
background:#fff;
|
||||
height: 40px;
|
||||
border-bottom: 1px #d4d4d4 solid;
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left:0;
|
||||
}
|
||||
.bigLPFStrategyLTitle{
|
||||
padding: 15px 20px 0px 20px;
|
||||
font-size: 15px;
|
||||
background: #fff;
|
||||
height: 40px;
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
.LPFstrategyTitle{
|
||||
float: left;
|
||||
width:100%;
|
||||
padding-top: 10px;
|
||||
padding-left: 15px;
|
||||
font-size: 15px;
|
||||
padding-right: 20px;
|
||||
}
|
||||
.LPFstrategyClose{
|
||||
float: right;
|
||||
margin-right: 5px;
|
||||
padding: 5px;
|
||||
margin-top: 5px;
|
||||
}
|
||||
#LPFstrategyListOut{
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
background: #f1f1f1;
|
||||
padding-bottom:20px;
|
||||
border-bottom: 1px #d4d4d4 solid;
|
||||
&::-webkit-scrollbar {
|
||||
width: 5px;
|
||||
}
|
||||
&::-webkit-scrollbar-thumb {
|
||||
border-radius: 10px;
|
||||
background: #c3c3c3;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-track {
|
||||
border-radius: 0;
|
||||
background: #f0f0f0;
|
||||
|
||||
}
|
||||
}
|
||||
.eachLPFstrategyData1{
|
||||
line-height:145%;
|
||||
font-weight:600;
|
||||
}
|
||||
.eachLPFstrategyData{
|
||||
margin-top:5px;
|
||||
}
|
||||
.eachLPFstrategySpan{
|
||||
margin-left:50px;
|
||||
}
|
||||
.bigLPFStrategyL{
|
||||
width: 74%;
|
||||
float: left;
|
||||
height: 100%;
|
||||
padding: 40px 0px 0px 0px;
|
||||
position: relative;
|
||||
}
|
||||
.bigLPFStrategyR{
|
||||
width: 26%;
|
||||
float: right;
|
||||
border-left: 1px #eee solid;
|
||||
height: 100%;
|
||||
padding: 40px 0px;
|
||||
position: relative;
|
||||
box-shadow: -5px 0px 5px #dedede;
|
||||
}
|
||||
.bigLPFStrategy{
|
||||
width:100%;
|
||||
height:100%;
|
||||
position: relative;
|
||||
}
|
||||
.noLPFstrategy{
|
||||
padding:50px 0px;
|
||||
text-align: center;
|
||||
}
|
||||
.quitLPFstrategy{
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
bottom: 5px;
|
||||
}
|
||||
.quitLPFButton{
|
||||
height: 30px;
|
||||
padding-top: 5px;
|
||||
padding-bottom: 5px;
|
||||
}
|
||||
#bigLPFStrategyId{
|
||||
width:100%;
|
||||
height:100%;
|
||||
}
|
||||
.LPFstrategyTitleL{}
|
||||
.LPFstrategyTitleR{
|
||||
// float:right
|
||||
}
|
||||
.LPFstrategyListIn{height:100%;overflow:hidden;padding-top: 41px;position:relative;}
|
||||
</style>
|
||||
<style lang="scss">
|
||||
#LPFstrategyListOut .LPFstrategyListIn .el-tabs__header.is-top{
|
||||
margin-bottom: 10px;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
background: #fff;
|
||||
width: 100%;
|
||||
border-bottom: 1px #ccc solid;
|
||||
}
|
||||
#LPFstrategyListOut .LPFstrategyListIn .el-tabs__content{
|
||||
height: 100%;
|
||||
padding-bottom: 10px;
|
||||
overflow: auto;
|
||||
&::-webkit-scrollbar {
|
||||
width: 5px;
|
||||
}
|
||||
&::-webkit-scrollbar-thumb {
|
||||
border-radius: 10px;
|
||||
background: #c3c3c3;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-track {
|
||||
border-radius: 0;
|
||||
background: #f0f0f0;
|
||||
|
||||
}
|
||||
}
|
||||
#LPFstrategyListOut .el-tabs--card>.el-tabs__header .el-tabs__item.is-active{
|
||||
border-bottom-color:#dedede;
|
||||
}
|
||||
</style>
|
||||
@ -1,71 +0,0 @@
|
||||
<template>
|
||||
<div class="demo">
|
||||
<lesson-training v-if="hasGroup" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import LessonTraining from '../index';
|
||||
import { trainingNotifyNew } from '@/api/simulation';
|
||||
import { EventBus } from '@/scripts/event-bus';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
LessonTraining
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
loading: false,
|
||||
result: {
|
||||
}
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
hasGroup() {
|
||||
return this.$route.query.group;
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
'$route': function() {
|
||||
},
|
||||
'$store.state.map.mapViewLoadedCount': function (val) {
|
||||
window.parent.postMessage(Object.assign({}, {type: 'DEMO_MAP_LOADED'}), 'https://test.joylink.club/cbtc/demo');
|
||||
}
|
||||
},
|
||||
async mounted() {
|
||||
await this.createSimulation();
|
||||
},
|
||||
methods: {
|
||||
async createSimulation() {
|
||||
const lineCode = this.$route.query.lineCode;
|
||||
const mapId = this.$route.query.mapId;
|
||||
const prdType = this.$route.query.prdType;
|
||||
const trainingId = this.$route.query.trainingId;
|
||||
const lessonId = this.$route.query.lessonId;
|
||||
const mode = this.$route.params.mode;
|
||||
const goodsId = '';
|
||||
|
||||
const resp = await trainingNotifyNew({trainingId});
|
||||
if (resp && resp.code == 200) {
|
||||
const query = { lineCode, group: resp.data, prdType, mapId, lessonId, trainingId, goodsId, from: 'kzfmooc', project: 'login', try: '0'};
|
||||
this.$store.dispatch('training/setPrdType', prdType);
|
||||
this.$router.replace({ path: `/demoTraining/${mode}`, query: query });
|
||||
EventBus.$on('demoResult', e => this.exitSimulation(e) );
|
||||
} else if (resp.code == 10003) {
|
||||
this.$messageBox(this.$t('error.createSimulationFailed') + '：您的仿真权限不足！');
|
||||
} else {
|
||||
this.$messageBox(this.$t('error.createSimulationFailed') + resp.error.message);
|
||||
}
|
||||
},
|
||||
exitSimulation(result = {}) {
|
||||
window.parent.postMessage(Object.assign(result, {type: 'DEMO_RESULT'}), 'https://test.joylink.club/cbtc/demo');
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.demo {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
@ -1,284 +0,0 @@
|
||||
<template>
|
||||
<div class="addRules">
|
||||
<div class="addRulesInner">
|
||||
<div class="addRulesInnerTitle">新增故障</div>
|
||||
<div class="closeAddRulesInner" @click="addRulesClose">
|
||||
<span class="el-icon-close closeAddRulesIn" />
|
||||
</div>
|
||||
<el-form ref="form" :model="faultRule" label-width="100px" style="margin-left:15px;">
|
||||
<el-form-item label="目标设备">
|
||||
<!-- faultRule.targetDeviceCode -->
|
||||
<el-input v-model="targetDevice.name" disabled size="small" class="inputModelClass" />
|
||||
<!--<el-button :type="field === 'targetActive' ? 'danger' : 'primary'" size="small" @click="hover('targetActive')">{{ $t('map.activate') }}</el-button>-->
|
||||
</el-form-item>
|
||||
<el-form-item label="触发方式">
|
||||
<el-select v-model="triggerMode" @change="changeTriggerMode">
|
||||
<el-option
|
||||
v-for="item in triggerModeList"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="故障类型">
|
||||
<el-select v-model="faultRule.faultType" placeholder="请选择" class="inputModelClass">
|
||||
<el-option
|
||||
v-for="item in faultTypeList"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item v-if="triggerMode === 'DEVICE'" label="触发设备">
|
||||
<!-- faultRule.condition.triggerDeviceCode -->
|
||||
<el-input v-model="triggerDevice" size="small" disabled class="inputModelClass" />
|
||||
<el-button :type="field === 'triggerActive' ? 'danger' : 'primary'" size="small" @click="hover('triggerActive')">{{ $t('map.activate') }}</el-button>
|
||||
</el-form-item>
|
||||
<el-form-item v-if="triggerMode === 'DEVICE'" label="触发状态">
|
||||
<!-- <el-input v-model="faultRule.condition.triggerDeviceStatus" size="small" class="inputModelClass" /> -->
|
||||
<el-select v-model="faultRule.condition.triggerDeviceStatus" placeholder="请选择" class="inputModelClass">
|
||||
<el-option
|
||||
v-for="item in triggerStatusList"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item v-if="triggerMode === 'DEVICE'" label="关联设备">
|
||||
<el-input v-model="triggerAssociatedDevice" size="small" disabled class="inputModelClass" />
|
||||
<el-button :type="field === 'triggerAssociated'? 'danger': 'primary'" size="small" @click="hover('triggerAssociated')">{{ $t('map.activate') }}</el-button>
|
||||
</el-form-item>
|
||||
<el-form-item v-if="triggerMode === 'TIME'" label="触发时间">
|
||||
<el-date-picker
|
||||
v-model="faultRule.condition.triggeringTime"
|
||||
type="datetime"
|
||||
placeholder="选择日期时间"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<span class="addRulesFooter">
|
||||
<el-button size="medium" type="primary" @click="addRulesCreate">{{ $t('global.confirm') }}</el-button>
|
||||
<el-button size="medium" @click="addRulesClose">{{ $t('global.cancel') }}</el-button>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { FaultStatusEnum } from '@/scripts/FaultDicNew';
|
||||
import { setFailureModeNew} from '@/api/simulation';
|
||||
import { deviceFaultType} from '@/scripts/cmdPlugin/Config';
|
||||
// 添加故障
|
||||
export default {
|
||||
name: 'AddChoose',
|
||||
props: {
|
||||
targetDevice: {
|
||||
type: Object,
|
||||
required: true
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
field:'',
|
||||
triggerStatusList:[],
|
||||
faultTypeList:[],
|
||||
faultRule:{
|
||||
targetDeviceCode:'',
|
||||
targetDeviceType:'',
|
||||
faultType:'',
|
||||
condition:{
|
||||
triggerDeviceCode:'',
|
||||
triggerDeviceStatus:'',
|
||||
triggerDeviceType :'',
|
||||
type:'DEVICE',
|
||||
triggeringTime: '',
|
||||
triggerAssociatedDeviceCode: ''
|
||||
}
|
||||
},
|
||||
// targetDevice:'',
|
||||
triggerDevice:'',
|
||||
triggerAssociatedDevice: '',
|
||||
triggerMode: 'DEVICE',
|
||||
triggerModeList: [
|
||||
{label: '设备触发', value: 'DEVICE'},
|
||||
{label: '时间触发', value: 'TIME'}
|
||||
]
|
||||
// rules:{
|
||||
// targetDevice:[
|
||||
// { required: true, message:'请选择目标设备', trigger: 'blur' }
|
||||
// ],
|
||||
// triggerDevice:[
|
||||
// { required: true, message:'请选择触发设备', trigger: 'blur' }
|
||||
// ],
|
||||
// faultRule:{
|
||||
// faultType:[
|
||||
// { required: true, message:'请选择故障类型', trigger: 'blur' },
|
||||
// { required: true, message:'请选择故障类型', trigger: 'change' }
|
||||
// ]
|
||||
// }
|
||||
// }
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
'$store.state.menuOperation.selectedCount':function(em) {
|
||||
const device = this.$store.state.menuOperation.selected;
|
||||
if (device.code) {
|
||||
this.deviceSelect(device);
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
},
|
||||
methods:{
|
||||
deviceSelect(em) {
|
||||
if (this.field.toUpperCase() === 'triggerAssociated'.toUpperCase()) {
|
||||
// if (em._type == 'Station') {
|
||||
// em = this.$store.getters['map/getDeviceByCode'](em.zcCode);
|
||||
// }
|
||||
// this.faultRule.targetDeviceType = this.covertType(em._type);
|
||||
// this.faultRule.targetDeviceCode = em.code;
|
||||
if (em._type.toUpperCase() === 'Section'.toUpperCase() && em.parentName) {
|
||||
this.triggerAssociatedDevice = em._type + '-' + em.parentName + '-' + em.name;
|
||||
} else {
|
||||
this.triggerAssociatedDevice = em._type + '-' + em.name;
|
||||
}
|
||||
this.faultRule.condition.triggerAssociatedDeviceCode = em.code;
|
||||
} else if (this.field.toUpperCase() === 'triggerActive'.toUpperCase()) {
|
||||
this.faultRule.condition.triggerDeviceType = this.covertType(em._type);
|
||||
this.faultRule.condition.triggerDeviceCode = em.code;
|
||||
if (em._type.toUpperCase() === 'Section'.toUpperCase() && em.parentName) {
|
||||
this.triggerDevice = em._type + '-' + em.parentName + '-' + em.name;
|
||||
} else if (em._type.toUpperCase() === 'Train'.toUpperCase()) {
|
||||
this.triggerDevice = em._type + '-' + em.code;
|
||||
} else {
|
||||
this.triggerDevice = em._type + '-' + em.name;
|
||||
}
|
||||
this.triggerStatusList = [];
|
||||
const faultStatus = FaultStatusEnum[this.faultRule.condition.triggerDeviceType];
|
||||
if (faultStatus) {
|
||||
const list = Object.keys(faultStatus);
|
||||
list.forEach(key=>{
|
||||
this.triggerStatusList.push({label:faultStatus[key], value:key});
|
||||
});
|
||||
}
|
||||
this.field = '';
|
||||
this.faultRule.condition.triggerDeviceStatus = '';
|
||||
}
|
||||
},
|
||||
covertType(type) {
|
||||
switch (type) {
|
||||
case 'Section':return 'SECTION';
|
||||
case 'Signal':return 'SIGNAL';
|
||||
case 'Switch':return 'SWITCH';
|
||||
case 'Station':return 'STATION';
|
||||
case 'ZcControl':return 'ZC';
|
||||
case 'StationStand':return 'STAND';
|
||||
case 'Train':return 'TRAIN';
|
||||
}
|
||||
},
|
||||
hover(field) {
|
||||
if (this.field == '') {
|
||||
this.field = field;
|
||||
} else {
|
||||
this.field = '';
|
||||
}
|
||||
},
|
||||
addRulesCreate() {
|
||||
if (this.triggerDevice == '') {
|
||||
this.$messageBox('请选择触发设备');
|
||||
return;
|
||||
}
|
||||
if (this.faultRule.condition.triggerDeviceStatus == '') {
|
||||
this.$messageBox('请选择触发状态');
|
||||
return;
|
||||
}
|
||||
if (this.faultRule.faultType == '') {
|
||||
this.$messageBox('请选择故障类型');
|
||||
return;
|
||||
}
|
||||
console.log(this.faultRule, '-------------');
|
||||
setFailureModeNew(this.faultRule, this.$route.query.group).then(res=>{
|
||||
this.$emit('closeAddRules');
|
||||
this.$emit('reload');
|
||||
}).catch((error)=>{
|
||||
this.$messageBox('创建故障失败: ' + error.message);
|
||||
});
|
||||
},
|
||||
addRulesClose() {
|
||||
this.resetForm();
|
||||
this.$emit('closeAddRules');
|
||||
},
|
||||
|
||||
initValue() {
|
||||
this.faultTypeList = deviceFaultType[this.targetDevice._type];
|
||||
this.faultRule.targetDeviceCode = this.targetDevice.code;
|
||||
this.faultRule.targetDeviceType = this.covertType(this.targetDevice._type);
|
||||
},
|
||||
resetForm() {
|
||||
this.triggerDevice = '';
|
||||
this.faultRule = {
|
||||
targetDeviceCode:'',
|
||||
targetDeviceType:'',
|
||||
faultType:'',
|
||||
condition:{
|
||||
triggerDeviceCode:'',
|
||||
triggerDeviceStatus:'',
|
||||
triggerDeviceType :'',
|
||||
type:'DEVICE',
|
||||
triggeringTime: '',
|
||||
triggerAssociatedDeviceCode: ''
|
||||
}
|
||||
};
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.addRules{
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
left: 0;
|
||||
top: 40px;
|
||||
}
|
||||
.addRulesInner{
|
||||
position: relative;
|
||||
width: 380px;
|
||||
margin-top:6px;
|
||||
background: #fff;
|
||||
border-radius: 10px;
|
||||
border: 1px #ccc solid;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
box-shadow: 3px 3px 3px #a0a0a0;
|
||||
z-index:2;
|
||||
}
|
||||
.queryList{
|
||||
height: 300px;
|
||||
overflow: auto;
|
||||
}
|
||||
.inputModelClass{
|
||||
width:150px;
|
||||
}
|
||||
.addRulesInnerTitle{
|
||||
padding: 10px;
|
||||
font-size: 14px;
|
||||
}
|
||||
.closeAddRulesInner{
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
top: 9px;
|
||||
width: 19px;
|
||||
height: 19px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.closeAddRulesIn{
|
||||
font-size: 19px;
|
||||
}
|
||||
.addRulesFooter{
|
||||
margin-left: 116px;
|
||||
display: inline-block;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
</style>
|
||||
@ -1,279 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-dialog
|
||||
v-dialogDrag
|
||||
:title="$t('display.script.scriptList')"
|
||||
:visible.sync="show"
|
||||
top="50px"
|
||||
width="70%"
|
||||
:before-do-close="doClose"
|
||||
:close-on-click-modal="false"
|
||||
:z-index="2000"
|
||||
>
|
||||
<QueryListPage
|
||||
ref="queryListPage"
|
||||
:pager-config="pagerConfig"
|
||||
:query-form="queryForm"
|
||||
:query-list="queryList"
|
||||
/>
|
||||
</el-dialog>
|
||||
<el-dialog
|
||||
v-dialogDrag
|
||||
:title="$t('display.script.roleSelect')"
|
||||
:visible.sync="roleShow"
|
||||
top="50px"
|
||||
width="350px"
|
||||
:before-do-close="roleDoClose"
|
||||
:close-on-click-modal="false"
|
||||
:z-index="5000"
|
||||
>
|
||||
<div>
|
||||
<el-form ref="ruleForm" :model="form" label-width="50px">
|
||||
<el-form-item :label="$t('display.script.role')" prop="role">
|
||||
<el-select v-model="form.type" :placeholder="$t('display.script.pleaseSelect')">
|
||||
<el-option
|
||||
v-for="item in memberList"
|
||||
:key="item.id"
|
||||
:label="(roleConfig[item.type]?roleConfig[item.type]: '')+(item.name?item.name: '')"
|
||||
:value="item.id"
|
||||
:disabled="item.disabled"
|
||||
/>
|
||||
<!-- checkDisabled(item.type) -->
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button @click="roleDoClose">{{ $t('global.cancel') }}</el-button>
|
||||
<el-button type="primary" @click="confirm">{{ $t('global.confirm') }}</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Cookies from 'js-cookie';
|
||||
import ConstConfig from '@/scripts/ConstConfig';
|
||||
import {getScriptPageListOnlineNew, getScriptByIdNew } from '@/api/script';
|
||||
import { EventBus } from '@/scripts/event-bus';
|
||||
|
||||
// 剧本弹窗
|
||||
export default {
|
||||
name: 'AddQuest',
|
||||
props: {
|
||||
trainings: {
|
||||
type: Array,
|
||||
default() {
|
||||
return [];
|
||||
}
|
||||
},
|
||||
detail: {
|
||||
type: Object,
|
||||
default() {
|
||||
return null;
|
||||
}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
show: false,
|
||||
roleShow: false,
|
||||
pagerConfig: {
|
||||
pageSize: 'pageSize',
|
||||
pageIndex: 'pageNum'
|
||||
},
|
||||
row: {},
|
||||
form: {
|
||||
type: ''
|
||||
},
|
||||
memberList: [],
|
||||
mapLocation:null,
|
||||
queryForm: {
|
||||
labelWidth: '80px',
|
||||
reset: false,
|
||||
show: false,
|
||||
queryObject: {
|
||||
|
||||
}
|
||||
},
|
||||
queryList: {
|
||||
query: this.listQuest,
|
||||
selectCheckShow: false,
|
||||
indexShow: true,
|
||||
columns: [
|
||||
{
|
||||
title: this.$t('display.script.scriptName'),
|
||||
prop: 'name'
|
||||
},
|
||||
{
|
||||
title: this.$t('display.script.createTime'),
|
||||
prop: 'createTime'
|
||||
},
|
||||
{
|
||||
type: 'button',
|
||||
title: this.$t('display.script.operate'),
|
||||
width: '250',
|
||||
buttons: [
|
||||
{
|
||||
name: this.$t('display.script.loadScript'),
|
||||
type: 'primary',
|
||||
handleClick: this.handleLoad
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
actions: [
|
||||
]
|
||||
},
|
||||
|
||||
currentModel: {},
|
||||
roleConfig: {
|
||||
'Admin': this.$t('display.script.admin'),
|
||||
'Instructor': this.$t('display.script.instructor'),
|
||||
'Dispatcher': this.$t('display.script.dispatcher'),
|
||||
'Attendant': this.$t('display.script.attendant'),
|
||||
'Audience': this.$t('display.script.audience'),
|
||||
'Driver': this.$t('display.script.driver'),
|
||||
'Repair':this.$t('display.script.repair'),
|
||||
'no': ''
|
||||
}
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.loadInitData();
|
||||
},
|
||||
methods: {
|
||||
doShow() {
|
||||
this.show = true;
|
||||
this.reloadTable();
|
||||
},
|
||||
doClose() {
|
||||
this.show = false;
|
||||
},
|
||||
listQuest(params) {
|
||||
params['mapId'] = this.$route.query.mapId;
|
||||
return getScriptPageListOnlineNew(params);
|
||||
},
|
||||
async loadInitData() {
|
||||
|
||||
},
|
||||
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.type + deviceName + name;
|
||||
each.disabled = false;
|
||||
const prdType = this.$store.state.training.prdType;
|
||||
if ( prdType == '01') {
|
||||
if (each.type !== '行值' && each.type !== 'no') { each.disabled = true; }
|
||||
} else if (prdType == '02') {
|
||||
if (each.type !== '行调' && each.type !== 'no') { each.disabled = true; }
|
||||
} else if (prdType == '04') {
|
||||
if (each.type !== '司机' && each.type !== 'no') { each.disabled = true; }
|
||||
}
|
||||
});
|
||||
return lastData;
|
||||
},
|
||||
async handleLoad(index, row) {
|
||||
this.row = row;
|
||||
const res = await getScriptByIdNew(row.id);
|
||||
let newMemberList = [];
|
||||
if (res.code == 200) {
|
||||
EventBus.$emit('clearRunSeries');
|
||||
if (res.data.memberList && res.data.memberList.length > 0) {
|
||||
// newMemberList
|
||||
// const playerList = res.data.memberList.filter(item => item.hasPlay === true);
|
||||
// playerList.map(each=>{
|
||||
// if (!each.deviceName && each.deviceCode) {
|
||||
// const device = this.$store.getters['map/getDeviceByCode'](each.deviceCode);
|
||||
// if (device.name) {
|
||||
// each.deviceName = device.name;
|
||||
// } else {
|
||||
// each.deviceName = each.deviceCode;
|
||||
// }
|
||||
// }
|
||||
// });
|
||||
this.form.type = '';
|
||||
res.data.memberList.sort((a, b) => {
|
||||
return parseInt(a.id) - parseInt(b.id);
|
||||
});
|
||||
this.$store.dispatch('training/setMemberList', {memberList:res.data.memberList, userId:this.$store.state.user.id});
|
||||
const activeMemberList = [];
|
||||
res.data.actionList.forEach((activeMember)=>{
|
||||
if (!(activeMemberList.length > 0 && activeMemberList.includes(activeMember.memberId))) {
|
||||
activeMemberList.push(activeMember.memberId);
|
||||
}
|
||||
});
|
||||
const playerList = res.data.memberList.filter(member=>{
|
||||
return activeMemberList.includes(member.id);
|
||||
});
|
||||
playerList.map(member=>{
|
||||
if (!member.deviceName && member.deviceCode) {
|
||||
const device = this.$store.getters['map/getDeviceByCode'](member.deviceCode);
|
||||
if (device.name) {
|
||||
member.deviceName = device.name;
|
||||
} else {
|
||||
member.deviceName = member.deviceCode;
|
||||
}
|
||||
}
|
||||
});
|
||||
const lastData = JSON.stringify(playerList);
|
||||
newMemberList = this.covert(lastData, ConstConfig.ConstSelect.roleTypeNew);
|
||||
}
|
||||
if (res.data.mapLocation) {
|
||||
this.mapLocation = res.data.mapLocation;
|
||||
}
|
||||
this.memberList = newMemberList || [];
|
||||
this.memberList.unshift({ id: '', name: this.$t('display.script.none'), role: 'no' });
|
||||
}
|
||||
this.roleShow = true;
|
||||
},
|
||||
|
||||
reloadTable() {
|
||||
if (this.queryList && this.queryList.reload) {
|
||||
this.queryList.reload();
|
||||
}
|
||||
},
|
||||
|
||||
confirm() {
|
||||
const roleName = this.memberList.find(elem=>{ return elem.id == this.form.type; });
|
||||
this.$emit('selectQuest', this.row, this.form.type, this.mapLocation, roleName.type);
|
||||
this.doClose();
|
||||
this.roleDoClose();
|
||||
},
|
||||
|
||||
roleDoClose() {
|
||||
this.$refs['ruleForm'].resetFields();
|
||||
this.roleShow = false;
|
||||
},
|
||||
|
||||
// checkDisabled(role) {
|
||||
// const prdType = this.$store.state.training.prdType;
|
||||
// return this.judgeDisabled(prdType, role);
|
||||
// },
|
||||
// judgeDisabled(prdType, role) {
|
||||
// if ( prdType == '01') {
|
||||
// return role !== '行值' && role !== 'no';
|
||||
// } else if (prdType == '02') {
|
||||
// return role !== '行调' && role !== 'no';
|
||||
// } else if (prdType == '04') {
|
||||
// return role !== '司机' && role !== 'no';
|
||||
// }
|
||||
// },
|
||||
|
||||
handleName(item) {
|
||||
return this.roleConfig[item.type] ? this.roleConfig[item.type] : '' + (item.name ? item.name : '');
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@ -1,198 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-drawer
|
||||
title="设备管理"
|
||||
:visible.sync="show"
|
||||
direction="ltr"
|
||||
:before-close="doClose"
|
||||
custom-class="dialog_box"
|
||||
size="43%"
|
||||
>
|
||||
<div style="margin-bottom: 3px; overflow: hidden; padding: 0 10px;">
|
||||
<div class="plc_box">名称: {{ plcInfo.name }}</div>
|
||||
<div class="plc_box">状态: <span :style="{'color': plcInfo.status ? 'green' : 'red'}">{{ plcInfo.status ? '在线' : '不在线' }}</span></div>
|
||||
<el-button type="text" size="small" class="freshen_box" @click="getList">刷新</el-button>
|
||||
</div>
|
||||
<el-table :data="tableData" border style="width: 100%; max-height: calc(100% - 24px); overflow: auto;">
|
||||
<el-table-column prop="code" label="设备编号" width="180" />
|
||||
<el-table-column prop="typeName" label="设备类型" width="180" />
|
||||
<el-table-column prop="vrDeviceCode" label="连接设备编码">
|
||||
<template slot-scope="scope">
|
||||
<div v-if="scope.row.vrDeviceCode" class="flex_box">{{ scope.row.vrDeviceName }}</div>
|
||||
<div v-if="!scope.row.vrDeviceCode" class="flex_box">(空)</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作">
|
||||
<template slot-scope="scope">
|
||||
<el-button :type="scope.row.buttonShowType ? 'danger' : 'primary'" size="small" @click="handleClick(scope.row, scope.$index)">连接</el-button>
|
||||
<el-button size="small" @click="cancel(scope.row, scope.$index)">断开</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-drawer>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getAllSimulationList, postSimulationConnectById, putSimulationDisconnectById } from '@/api/simulation.js';
|
||||
import ConstConfig from '@/scripts/ConstConfig';
|
||||
import { EventBus } from '@/scripts/event-bus';
|
||||
import { getSessionStorage } from '@/utils/auth';
|
||||
|
||||
export default {
|
||||
name: 'Equipment',
|
||||
data() {
|
||||
return {
|
||||
show: false,
|
||||
group: '',
|
||||
tableData: [],
|
||||
typeList: ConstConfig.ConstSelect.projectDeviceTypeList,
|
||||
plcInfo: {
|
||||
name: '',
|
||||
status: ''
|
||||
},
|
||||
index: 0,
|
||||
selected: {},
|
||||
typeObj: {
|
||||
Section: '区段',
|
||||
Signal: '信号机',
|
||||
Switch: '道岔',
|
||||
Psd: '屏蔽门',
|
||||
StationStand: '站台'
|
||||
}
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
project() {
|
||||
return getSessionStorage('project');
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
EventBus.$on('selectDevice', (data) => {
|
||||
this.selected = data;
|
||||
this.tableData[this.index]['buttonShowType'] = false;
|
||||
this.tableData.splice(this.index, 1, this.tableData[this.index]);
|
||||
this.$store.dispatch('map/selectDeviceCode', {flag: false, type: ''});
|
||||
this.connect(this.tableData[this.index]);
|
||||
});
|
||||
},
|
||||
async beforeDestroy() {
|
||||
EventBus.$off('selectDevice');
|
||||
},
|
||||
methods: {
|
||||
async doShow() {
|
||||
this.show = true;
|
||||
this.group = this.$route.query.group;
|
||||
this.getList();
|
||||
},
|
||||
async getList() {
|
||||
try {
|
||||
const res = await getAllSimulationList(this.group);
|
||||
this.tableData = [];
|
||||
res.data.forEach((item, index) => {
|
||||
if (item.type == 'PLC_GATEWAY') {
|
||||
this.plcInfo = {
|
||||
name: 'PLC网关',
|
||||
status: item.online
|
||||
};
|
||||
} else {
|
||||
item.buttonShowType = false;
|
||||
item.typeName = this.typeList.find(el => el.value == item.type).label;
|
||||
if (item.vrDeviceCode && this.$store.getters['map/getDeviceByCode'](item.vrDeviceCode)) {
|
||||
item.vrDeviceName = this.$store.getters['map/getDeviceByCode'](item.vrDeviceCode).name;
|
||||
} else {
|
||||
item.vrDeviceName = item.vrDeviceCode;
|
||||
}
|
||||
if (this.project == 'heb' || this.project == 'designheb') {
|
||||
if (item.type == 'SWITCH') {
|
||||
this.tableData.push(item);
|
||||
}
|
||||
} else {
|
||||
this.tableData.push(item);
|
||||
}
|
||||
}
|
||||
});
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
}
|
||||
},
|
||||
doClose() {
|
||||
this.show = false;
|
||||
},
|
||||
handleClick(row, index) {
|
||||
row.buttonShowType = !row.buttonShowType;
|
||||
this.index = index;
|
||||
this.tableData.splice(index, 1, row);
|
||||
this.$store.dispatch('map/selectDeviceCode', {flag: row.buttonShowType, type: row.type});
|
||||
},
|
||||
async connect(row) {
|
||||
this.$confirm(`您确定连接${this.typeObj[this.selected._type] || '设备'}: ${this.selected.name}, 是否继续?`, '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(async () => {
|
||||
try {
|
||||
const res = await postSimulationConnectById(this.group, row.id, this.selected.code);
|
||||
if (res && res.code == 200) {
|
||||
this.$message.success('连接成功!');
|
||||
this.tableData[this.index]['vrDeviceCode'] = this.selected.code;
|
||||
this.tableData[this.index]['vrDeviceName'] = this.selected.name;
|
||||
this.tableData.splice(this.index, 1, this.tableData[this.index]);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
}
|
||||
});
|
||||
},
|
||||
async cancel(row, index) {
|
||||
this.$confirm('您确定将次设备断开, 是否继续?', '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(async () => {
|
||||
if (row.vrDeviceCode) {
|
||||
row.vrDeviceCode = '';
|
||||
row.vrDeviceName = '';
|
||||
this.tableData.splice(index, 1, row);
|
||||
try {
|
||||
const res = await putSimulationDisconnectById(this.group, row.id);
|
||||
if (res && res.code == 200) {
|
||||
this.$message.success('断开成功!');
|
||||
}
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style rel="stylesheet/scss" lang="scss" scoped>
|
||||
.plc_box{
|
||||
float: left;
|
||||
margin-right: 40px;
|
||||
padding: 9px;
|
||||
}
|
||||
.freshen_box{
|
||||
float: right;
|
||||
}
|
||||
.flex_box{
|
||||
float: left;
|
||||
margin-right: 5px;
|
||||
line-height: 30px;
|
||||
}
|
||||
/deep/ {
|
||||
.el-dialog__wrapper{
|
||||
width: 800px;
|
||||
}
|
||||
.dialog_box{
|
||||
height: 100%;
|
||||
}
|
||||
.el-dialog__body{
|
||||
padding-top: 6px;
|
||||
height: calc(100% - 54px);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,651 +0,0 @@
|
||||
<template>
|
||||
<div v-if="dialogShow" id="faultChoose">
|
||||
<div class="falutChooseTitle">{{ title }}</div>
|
||||
<div class="closeFalutChoose" @click="closeFaultChoose">
|
||||
<span class="el-icon-close closeFalutChooseIn" />
|
||||
</div>
|
||||
<!-- <div class="minimizeFalutChoose">
|
||||
<span class="el-icon-close closeFalutChooseIn" />
|
||||
</div> -->
|
||||
<el-card class="triggerFaultInfo">
|
||||
<el-button type="primary" size="small" style="margin-bottom:10px;" @click="isTableShow=!isTableShow">{{ isTableShow?'隐藏列表':'显示列表' }}</el-button>
|
||||
<el-table v-if="isTableShow" :data="faultList" height="300" border style="width: 100%;font-size:13px;">
|
||||
<el-table-column prop="targetDeviceCode" label="目标设备" width="220">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ `${deviceMap[scope.row.targetDeviceType]}${formatNameByCode(scope.row.targetDeviceCode)}` }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="faultType" label="故障类型">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ covertFaultType(scope.row) }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<!--<el-table-column prop="condition" label="触发方式">-->
|
||||
<!--<template slot-scope="scope">-->
|
||||
<!--<span>{{ scope.row.condition.type === 'DEVICE'?'设备':'时间' }}</span>-->
|
||||
<!--</template>-->
|
||||
<!--</el-table-column>-->
|
||||
<el-table-column prop="condition" label="列车" width="100">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ `${deviceMap[scope.row.condition.triggerDeviceType] || ''}${formatNameByCode(scope.row.condition.triggerDeviceCode)}` }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<!--<el-table-column prop="condition" label="触发状态">-->
|
||||
<!--<template slot-scope="scope">-->
|
||||
<!--<span>{{ formatTriggerStatus(scope.row.condition) }}</span>-->
|
||||
<!--</template>-->
|
||||
<!--</el-table-column>-->
|
||||
<el-table-column prop="condition" label="到达区段" width="180">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ `${formatNameByCode(scope.row.condition.triggerAssociatedDeviceCode)}` }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="condition.condition.triggerTime" label="触发时间" width="150" />
|
||||
<el-table-column prop="triggeringTime" label="故障状态">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ scope.row.triggeringTime? '已触发': '未触发' }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作">
|
||||
<template slot-scope="scope">
|
||||
<el-button v-if="!scope.row.triggeringTime" type="text" size="small" @click="handleDelete(scope.row)">取消</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-card>
|
||||
<div class="targetCard">
|
||||
<!-- <el-card class="box-card"> -->
|
||||
<div class="targetCardHead">
|
||||
<el-button style="padding:3px 0" type="text" @click="addRulesCreate">新增</el-button>
|
||||
</div>
|
||||
<div>
|
||||
<el-form ref="form" :model="faultRule" :inline="true" label-width="100px" style="margin-left:15px;">
|
||||
<el-form-item label="目标设备" class="targetFormItem">
|
||||
<!-- faultRule.targetDeviceCode -->
|
||||
<el-input v-model="targetDeviceName" disabled size="small" class="inputModelClass" style="width: 300px;" />
|
||||
<!--<el-button :type="field === 'targetActive' ? 'danger' : 'primary'" size="small" @click="hover('targetActive')">{{ $t('map.activate') }}</el-button>-->
|
||||
</el-form-item>
|
||||
<!--<el-form-item label="触发方式">-->
|
||||
<!--<el-select v-model="triggerMode" size="small" style="width: 200px;" @change="changeTriggerMode">-->
|
||||
<!--<el-option-->
|
||||
<!--v-for="item in triggerModeList"-->
|
||||
<!--:key="item.value"-->
|
||||
<!--:label="item.label"-->
|
||||
<!--:value="item.value"-->
|
||||
<!--/>-->
|
||||
<!--</el-select>-->
|
||||
<!--</el-form-item>-->
|
||||
<el-form-item label="故障类型" class="targetFormItem">
|
||||
<el-select v-model="faultRule.faultType" placeholder="请选择" class="inputModelClass" size="small" style="width: 300px;">
|
||||
<el-option
|
||||
v-for="item in faultTypeList"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item v-if="triggerMode === 'DEVICE'" label="列车" class="targetFormItem">
|
||||
<!-- faultRule.condition.triggerDeviceCode -->
|
||||
<el-input v-model="triggerDevice" size="small" disabled class="inputModelClass" style="width: 240px;" />
|
||||
<el-button :type="field === 'triggerActive' ? 'danger' : 'primary'" size="small" @click="hover('triggerActive')">{{ $t('map.activate') }}</el-button>
|
||||
</el-form-item>
|
||||
<!--<el-form-item v-if="triggerMode === 'DEVICE'" label="触发状态">-->
|
||||
<!--<!– <el-input v-model="faultRule.condition.triggerDeviceStatus" size="small" class="inputModelClass" /> –>-->
|
||||
<!--<el-select v-model="faultRule.condition.triggerDeviceStatus" placeholder="请选择" class="inputModelClass" size="small" style="width: 200px;">-->
|
||||
<!--<el-option-->
|
||||
<!--v-for="item in triggerStatusList"-->
|
||||
<!--:key="item.value"-->
|
||||
<!--:label="item.label"-->
|
||||
<!--:value="item.value"-->
|
||||
<!--/>-->
|
||||
<!--</el-select>-->
|
||||
<!--</el-form-item>-->
|
||||
<el-form-item v-if="triggerMode === 'DEVICE'" label="到达区段" class="targetFormItem">
|
||||
<el-input v-model="triggerAssociatedDevice" size="small" disabled class="inputModelClass" style="width: 240px;" />
|
||||
<el-button :type="field === 'triggerAssociated'? 'danger': 'primary'" size="small" @click="hover('triggerAssociated')">{{ $t('map.activate') }}</el-button>
|
||||
</el-form-item>
|
||||
<el-form-item v-if="triggerMode === 'TIME'" label="触发时间" class="targetFormItem">
|
||||
<el-date-picker
|
||||
v-model="faultRule.condition.triggerTime"
|
||||
size="small"
|
||||
format="yyyy-MM-dd HH:mm:ss"
|
||||
value-format="yyyy-MM-dd HH:mm:ss"
|
||||
type="datetime"
|
||||
placeholder="选择日期时间"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
<!-- </el-card> -->
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getSimulationFaultRules, setFailureModeNew, deleteFailureRule, cancelFailureModeNew } from '@/api/simulation';
|
||||
import ConstConfig from '@/scripts/ConstConfig';
|
||||
import { FaultStatusEnum } from '@/scripts/FaultDicNew';
|
||||
import ModelType from '@/jmapNew/constant/deviceType';
|
||||
import { deviceFaultType } from '@/scripts/cmdPlugin/Config';
|
||||
|
||||
// 故障列表
|
||||
export default {
|
||||
name: 'FaultChoose',
|
||||
props: {
|
||||
group: {
|
||||
type: String,
|
||||
required: true
|
||||
},
|
||||
offset: {
|
||||
type: Number,
|
||||
required: true
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
dialogShow: false,
|
||||
loading: false,
|
||||
isAdd:false,
|
||||
isTableShow:true,
|
||||
deviceMap: {},
|
||||
simulationFault:{},
|
||||
faultList: [],
|
||||
faultRule:{
|
||||
targetDeviceCode:'',
|
||||
targetDeviceType:'',
|
||||
faultType:'',
|
||||
condition:{
|
||||
triggerDeviceCode:'',
|
||||
triggerDeviceStatus:'',
|
||||
triggerDeviceType :'',
|
||||
type:'DEVICE',
|
||||
triggerTime: '',
|
||||
triggerAssociatedDeviceCode: ''
|
||||
}
|
||||
},
|
||||
triggerDevice:'',
|
||||
triggerAssociatedDevice: '',
|
||||
triggerMode: 'DEVICE',
|
||||
triggerModeList: [
|
||||
{label: '设备触发', value: 'DEVICE'},
|
||||
{label: '时间触发', value: 'TIME'}
|
||||
],
|
||||
field:'',
|
||||
triggerStatusList:[],
|
||||
faultTypeList:[],
|
||||
targetDeviceName: ''
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
title() {
|
||||
return '自动故障设置';
|
||||
},
|
||||
lineCode() {
|
||||
return this.$route.query.lineCode;
|
||||
},
|
||||
targetDevice() {
|
||||
return this.$store.state.training.triggerFaultDevice;
|
||||
}
|
||||
},
|
||||
watch:{
|
||||
'$store.state.socket.autoFaultTrigger':function(val) {
|
||||
this.dialogShow && this.getSimulationFaultRules();
|
||||
},
|
||||
'$store.state.menuOperation.selectedCount':function(em) {
|
||||
const device = this.$store.state.menuOperation.selected;
|
||||
if (device && device.code) {
|
||||
this.deviceSelect(device);
|
||||
}
|
||||
},
|
||||
targetDevice: function(device) {
|
||||
this.targetDeviceName = this.targetDevice.name || this.targetDevice.code;
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.deviceMap = [];
|
||||
ConstConfig.ConstSelect.simulationDeviceList.forEach(elem => {
|
||||
this.deviceMap[elem.value] = elem.label;
|
||||
});
|
||||
},
|
||||
methods: {
|
||||
formatNameByCode(code) {
|
||||
let name = '';
|
||||
const device = this.$store.getters['map/getDeviceByCode'](code);
|
||||
if (device) {
|
||||
switch (device._type) {
|
||||
case ModelType.Signal:
|
||||
case ModelType.Switch:
|
||||
case ModelType.Station:
|
||||
case ModelType.Section: {
|
||||
if (device.parentName) {
|
||||
name += device.parentName + '-' + device.name;
|
||||
} else {
|
||||
name += device.name;
|
||||
}
|
||||
|
||||
break;
|
||||
}
|
||||
case ModelType.Train:
|
||||
name = device.code;
|
||||
break;
|
||||
}
|
||||
if (device.stationCode) {
|
||||
const station = this.$store.getters['map/getDeviceByCode'](device.stationCode);
|
||||
if (station) {
|
||||
name += '【' + station.name + '】';
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return name;
|
||||
},
|
||||
// formatTriggerStatus(condition) {
|
||||
// if (!condition.triggerDeviceType) {
|
||||
// return '';
|
||||
// }
|
||||
// const faultStatus = FaultStatusEnum[condition.triggerDeviceType];
|
||||
// return faultStatus[condition.triggerDeviceStatus];
|
||||
// },
|
||||
hover(field) {
|
||||
if (this.field == '') {
|
||||
this.field = field;
|
||||
} else {
|
||||
this.field = '';
|
||||
}
|
||||
},
|
||||
handleDelete(row) {
|
||||
cancelFailureModeNew(row.id, this.$route.query.group).then(resp => {
|
||||
this.getSimulationFaultRules();
|
||||
}).catch(() => {
|
||||
this.$message.error('取消故障失败！');
|
||||
});
|
||||
},
|
||||
covertType(type) {
|
||||
switch (type) {
|
||||
case 'SECTION':return 'Section';
|
||||
case 'SIGNAL':return 'Signal';
|
||||
case 'SWITCH':return 'Switch';
|
||||
case 'STATION':return 'Station';
|
||||
case 'ZC':return 'ZcControl';
|
||||
case 'STAND':return 'StationStand';
|
||||
case 'TRAIN':return 'Train';
|
||||
case 'Section':return 'SECTION';
|
||||
case 'Signal':return 'SIGNAL';
|
||||
case 'Switch':return 'SWITCH';
|
||||
case 'Station':return 'STATION';
|
||||
case 'ZcControl':return 'ZC';
|
||||
case 'StationStand':return 'STAND';
|
||||
case 'Train':return 'TRAIN';
|
||||
}
|
||||
},
|
||||
covertFaultType(row) {
|
||||
let faultType = '';
|
||||
if (row && row.id) {
|
||||
let type = this.covertType(row.targetDeviceType);
|
||||
if (type == 'Station') {
|
||||
type = 'ZcControl';
|
||||
}
|
||||
const currentList = deviceFaultType[type];
|
||||
currentList.forEach(temp=>{
|
||||
if (temp.value === row.faultType) {
|
||||
faultType = temp.label;
|
||||
}
|
||||
});
|
||||
}
|
||||
return faultType;
|
||||
},
|
||||
closeFaultChoose() {
|
||||
this.dialogShow = false;
|
||||
this.isAdd = false;
|
||||
if (this.$refs.addFault) {
|
||||
this.$refs.addFault.resetForm();
|
||||
}
|
||||
},
|
||||
closeAddRules() {
|
||||
this.isAdd = false;
|
||||
},
|
||||
getSimulationFaultRules() {
|
||||
if (this.dialogShow) {
|
||||
getSimulationFaultRules(this.$route.query.group).then(resp => {
|
||||
this.faultList = resp.data;
|
||||
}).catch(() => {
|
||||
this.$messageBox('获取数据异常');
|
||||
});
|
||||
}
|
||||
},
|
||||
changeTriggerMode(val) {
|
||||
this.resetForm();
|
||||
this.triggerMode = val;
|
||||
this.faultRule.condition.type = val;
|
||||
},
|
||||
doShow() {
|
||||
this.dialogShow = true;
|
||||
this.getSimulationFaultRules();
|
||||
this.resetForm();
|
||||
this.faultTypeList = deviceFaultType[this.targetDevice._type];
|
||||
this.faultRule.targetDeviceCode = this.targetDevice.code;
|
||||
this.faultRule.targetDeviceType = this.covertType(this.targetDevice._type);
|
||||
this.faultRule.faultType = (this.faultTypeList[0] || {}).value;
|
||||
this.$nextTick(()=>{
|
||||
this.dragEvent();
|
||||
});
|
||||
},
|
||||
resetForm() {
|
||||
this.getSimulationFaultRules();
|
||||
this.field = '';
|
||||
this.triggerDevice = '';
|
||||
this.triggerAssociatedDevice = '';
|
||||
this.faultRule = {
|
||||
targetDeviceCode:this.targetDevice.code,
|
||||
targetDeviceType:this.covertType(this.targetDevice._type),
|
||||
faultType:'',
|
||||
condition:{
|
||||
triggerDeviceCode:'',
|
||||
triggerDeviceStatus:'',
|
||||
triggerDeviceType :'',
|
||||
type:'DEVICE',
|
||||
triggerTime: '',
|
||||
triggerAssociatedDeviceCode: ''
|
||||
}
|
||||
};
|
||||
},
|
||||
doClose() {
|
||||
this.dialogShow = false;
|
||||
},
|
||||
handleAdd() {
|
||||
this.isAdd = true;
|
||||
this.$nextTick(() => {
|
||||
this.$refs.addFault.initValue();
|
||||
});
|
||||
},
|
||||
deleteFailure(index, row) {
|
||||
event.cancelBubble = true;
|
||||
this.$confirm('删除故障规则，是否继续？', '提 示', {
|
||||
confirmButtonText: '确 定',
|
||||
cancelButtonText: '取 消',
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
deleteFailureRule(row.id).then(resp => {
|
||||
}).catch(error => {
|
||||
this.$message.error(`删除故障规则失败: ${error.message}`);
|
||||
});
|
||||
}).catch( () => { });
|
||||
},
|
||||
settingFailure(index, row, idx) {
|
||||
const faultModel = {ruleId: row.id, auto:true};
|
||||
// row['loading' + idx] = true;
|
||||
setFailureModeNew(faultModel, this.group).then(() => {
|
||||
this.getSimulationFaultRules();
|
||||
this.$message.success('设置自动故障成功');
|
||||
}).catch(() => {
|
||||
this.$messageBox('设置自动故障失败');
|
||||
});
|
||||
},
|
||||
cancleAutoFault() {
|
||||
const faultModel = {auto:false};
|
||||
setFailureModeNew(faultModel, this.group).then(() => {
|
||||
this.getSimulationFaultRules();
|
||||
this.$message.success('取消自动故障成功');
|
||||
}).catch(() => {
|
||||
this.$messageBox('取消自动故障失败');
|
||||
});
|
||||
},
|
||||
addRulesCreate() {
|
||||
if (this.triggerMode === 'DEVICE' && this.triggerDevice == '') {
|
||||
this.$messageBox('请选择触发设备');
|
||||
return;
|
||||
}
|
||||
if (this.triggerMode === 'DEVICE' && this.faultRule.condition.triggerDeviceStatus == '') {
|
||||
this.$messageBox('请选择触发状态');
|
||||
return;
|
||||
}
|
||||
if (this.faultRule.faultType == '') {
|
||||
this.$messageBox('请选择故障类型');
|
||||
return;
|
||||
}
|
||||
if (this.triggerMode === 'TIME' && this.faultRule.condition.triggerTime == '') {
|
||||
this.$messageBox('请选择触发时间');
|
||||
return;
|
||||
}
|
||||
if (this.triggerMode === 'DEVICE' && this.faultRule.condition.triggerDeviceType === 'TRAIN' && this.faultRule.condition.triggerDeviceStatus === 'Section' && this.faultRule.condition.triggerAssociatedDeviceCode == '') {
|
||||
this.$messageBox('请选择关联设备');
|
||||
return;
|
||||
}
|
||||
const param = {
|
||||
targetDeviceCode:this.targetDevice.code,
|
||||
targetDeviceType:this.covertType(this.targetDevice._type),
|
||||
faultType: this.faultRule.faultType,
|
||||
condition:{
|
||||
triggerDeviceCode: this.faultRule.condition.triggerDeviceCode || null,
|
||||
triggerDeviceStatus:this.faultRule.condition.triggerDeviceStatus || null,
|
||||
triggerDeviceType :this.faultRule.condition.triggerDeviceType || null,
|
||||
type:this.faultRule.condition.type,
|
||||
triggerTime: this.faultRule.condition.triggerTime || null,
|
||||
triggerAssociatedDeviceCode: this.faultRule.condition.triggerAssociatedDeviceCode || null
|
||||
}
|
||||
};
|
||||
setFailureModeNew(param, this.$route.query.group).then(res=>{
|
||||
this.$message.success('创建故障成功！');
|
||||
this.resetForm();
|
||||
}).catch((error)=>{
|
||||
this.$messageBox('创建故障失败: ' + error.message);
|
||||
});
|
||||
},
|
||||
deviceSelect(em) {
|
||||
if (this.field.toUpperCase() === 'triggerAssociated'.toUpperCase() && em._type.toUpperCase() === 'Section'.toUpperCase()) {
|
||||
// if (em._type == 'Station') {
|
||||
// em = this.$store.getters['map/getDeviceByCode'](em.zcCode);
|
||||
// }
|
||||
// this.faultRule.targetDeviceType = this.covertType(em._type);
|
||||
// this.faultRule.targetDeviceCode = em.code;
|
||||
if (em._type.toUpperCase() === 'Section'.toUpperCase() && em.parentName) {
|
||||
this.triggerAssociatedDevice = em._type + '-' + em.parentName + '-' + em.name;
|
||||
} else {
|
||||
this.triggerAssociatedDevice = em._type + '-' + em.name;
|
||||
}
|
||||
this.faultRule.condition.triggerAssociatedDeviceCode = em.code;
|
||||
} else if (this.field.toUpperCase() === 'triggerActive'.toUpperCase() && em._type.toUpperCase() === 'Train'.toUpperCase()) {
|
||||
this.faultRule.condition.triggerDeviceType = this.covertType(em._type);
|
||||
this.faultRule.condition.triggerDeviceCode = em.code;
|
||||
if (em._type.toUpperCase() === 'Section'.toUpperCase() && em.parentName) {
|
||||
this.triggerDevice = em._type + '-' + em.parentName + '-' + em.name;
|
||||
} else if (em._type.toUpperCase() === 'Train'.toUpperCase()) {
|
||||
this.triggerDevice = em._type + '-' + em.code;
|
||||
} else {
|
||||
this.triggerDevice = em._type + '-' + em.name;
|
||||
}
|
||||
this.triggerStatusList = [];
|
||||
const faultStatus = FaultStatusEnum[this.faultRule.condition.triggerDeviceType];
|
||||
if (faultStatus) {
|
||||
const list = Object.keys(faultStatus);
|
||||
list.forEach(key=>{
|
||||
this.triggerStatusList.push({label:faultStatus[key], value:key});
|
||||
});
|
||||
}
|
||||
this.field = '';
|
||||
this.faultRule.condition.triggerDeviceStatus = (this.triggerStatusList[0] || {}).value;
|
||||
}
|
||||
},
|
||||
dragEvent() {
|
||||
const offset = this.offset;
|
||||
const dialogHeaderEl = document.querySelector('.falutChooseTitle');
|
||||
const dragDom = document.querySelector('#faultChoose');
|
||||
dialogHeaderEl.style.cursor = 'move';
|
||||
|
||||
/** 获取原有属性 ie dom元素.currentStyle 火狐谷歌 window.getComputedStyle(dom元素, null);*/
|
||||
const sty = dragDom.currentStyle || window.getComputedStyle(dragDom, null);
|
||||
|
||||
dialogHeaderEl.onmousedown = (e) => {
|
||||
/** 鼠标按下，计算当前元素距离可视区的距离*/
|
||||
const disX = e.clientX - dialogHeaderEl.offsetLeft;
|
||||
const disY = e.clientY - dialogHeaderEl.offsetTop;
|
||||
|
||||
/** 获取到的值带px 正则匹配替换*/
|
||||
let styL, styT;
|
||||
|
||||
/** 注意在ie中 第一次获取到的值为组件自带50% 移动之后赋值为px*/
|
||||
if (sty.left.includes('%')) {
|
||||
// eslint-disable-next-line no-useless-escape
|
||||
styL = +document.body.clientWidth * (+sty.left.replace(/\%/g, '') / 100);
|
||||
styT = +document.body.clientHeight * (+sty.top.replace(/\%/g, '') / 100);
|
||||
} else {
|
||||
// eslint-disable-next-line no-useless-escape
|
||||
styL = +sty.left.replace(/\px/g, '');
|
||||
// eslint-disable-next-line no-useless-escape
|
||||
styT = +sty.top.replace(/\px/g, '');
|
||||
}
|
||||
|
||||
document.onmousemove = function (e) {
|
||||
/** 通过事件委托，计算移动的距离*/
|
||||
const l = e.clientX - disX;
|
||||
const t = e.clientY - disY;
|
||||
|
||||
/** 移动当前元素*/
|
||||
// dragDom.style.left = `${l + styL}px`;
|
||||
// dragDom.style.top = `${t + styT}px`;
|
||||
|
||||
/** 移动当前元素*/
|
||||
if (l + styL < 0) {
|
||||
dragDom.style.left = `0px`;
|
||||
} else if (l + styL > document.body.clientWidth - dragDom.clientWidth - 10) {
|
||||
dragDom.style.left = `${document.body.clientWidth - dragDom.clientWidth - 10}px`;
|
||||
} else {
|
||||
dragDom.style.left = `${l + styL}px`;
|
||||
}
|
||||
if (t + styT <= offset) {
|
||||
dragDom.style.top = offset + `px`;
|
||||
} else if (t + styT > document.body.clientHeight - dragDom.clientHeight - 10) {
|
||||
dragDom.style.top = `${document.body.clientHeight - dragDom.clientHeight - 10}px`;
|
||||
} else {
|
||||
dragDom.style.top = `${t + styT}px`;
|
||||
}
|
||||
|
||||
/** 将此时的位置传出去*/
|
||||
// binding.value({ x: e.pageX, y: e.pageY });
|
||||
};
|
||||
|
||||
document.onmouseup = function () {
|
||||
document.onmousemove = null;
|
||||
document.onmouseup = null;
|
||||
};
|
||||
};
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style lang="scss">
|
||||
#faultChoose .card .queryList .el-card .el-card__body .el-table--border .el-table__body-wrapper{
|
||||
height: 135px !important;
|
||||
overflow-y: auto !important;
|
||||
}
|
||||
#faultChoose .el-button--mini {
|
||||
margin-left: 5px;
|
||||
}
|
||||
.triggerFaultListLeft{
|
||||
display: inline-block;
|
||||
float: left;
|
||||
width: 730px;
|
||||
}
|
||||
// 谷歌、safari、qq浏览器、360浏览器滚动条样式
|
||||
// 定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸
|
||||
#faultChoose .el-table__body-wrapper::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
// height: 110px;
|
||||
background-color: #FFFFFF;
|
||||
}
|
||||
/*定义滚动条轨道 内阴影+圆角*/
|
||||
#faultChoose .el-table__body-wrapper::-webkit-scrollbar-track {
|
||||
// box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
|
||||
border-radius: 10px;
|
||||
background-color: #FFFFFF;;
|
||||
}
|
||||
/*定义滑块 内阴影+圆角*/
|
||||
#faultChoose .el-table__body-wrapper::-webkit-scrollbar-thumb {
|
||||
border-radius: 10px;
|
||||
// box-shadow: inset 0 0 6px rgba(0,0,0,.3);
|
||||
background-color: #eaeaea;
|
||||
}
|
||||
/*滑块效果*/
|
||||
#faultChoose .el-table__body-wrapper::-webkit-scrollbar-thumb:hover {
|
||||
border-radius: 5px;
|
||||
// box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
|
||||
background: rgba(0,0,0,0.4);
|
||||
}
|
||||
/*IE滚动条颜色*/
|
||||
html {
|
||||
scrollbar-face-color:#bfbfbf;/*滚动条颜色*/
|
||||
scrollbar-highlight-color:#000;
|
||||
scrollbar-3dlight-color:#000;
|
||||
scrollbar-darkshadow-color:#000;
|
||||
scrollbar-Shadow-color:#adadad;/*滑块边色*/
|
||||
scrollbar-arrow-color:rgba(0,0,0,0.4);/*箭头颜色*/
|
||||
scrollbar-track-color:#eeeeee;/*背景颜色*/
|
||||
}
|
||||
</style>
|
||||
<style scoped rel="stylesheet/scss" lang="scss">
|
||||
.triggerFaultInfo{
|
||||
margin-bottom:10px;
|
||||
padding: 10px 10px 10px 15px;
|
||||
}
|
||||
.triggerFaultList{
|
||||
font-size: 14px;
|
||||
margin-top: 10px;
|
||||
line-height: 20px;
|
||||
}
|
||||
.triggerFaultTitle{
|
||||
font-size: 15px;
|
||||
font-weight: bold;
|
||||
}
|
||||
.falutChooseTitle{
|
||||
padding: 15px;
|
||||
cursor: all-scroll;
|
||||
}
|
||||
#faultChoose{
|
||||
width: 1000px;
|
||||
position: absolute;
|
||||
left: 30%;
|
||||
top: 20%;
|
||||
background: #fff;
|
||||
padding:0px 0px 15px 0px;
|
||||
// transform: translate3d(-50%,-50%,0);
|
||||
border-radius: 6px;
|
||||
z-index:999;
|
||||
}
|
||||
.faultChooseFoot{
|
||||
display: inline-block;
|
||||
float: right;
|
||||
margin-right: 20px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
.closeFalutChoose{
|
||||
position: absolute;
|
||||
right: 0px;
|
||||
top: 0px;
|
||||
width: 35px;
|
||||
height: 35px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.closeFalutChooseIn{
|
||||
font-size: 20px;
|
||||
margin-left: 5px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
.targetCard{
|
||||
box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
|
||||
border-top: 1px #ebeef5 solid;
|
||||
}
|
||||
.targetFormItem{
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
.targetCardHead{
|
||||
padding: 5px;
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
margin-bottom: 10px;
|
||||
border-bottom: 1px #f4f4f4 solid;
|
||||
text-align: right;
|
||||
padding-right: 15px;
|
||||
}
|
||||
</style>
|
||||
@ -1,80 +0,0 @@
|
||||
<template>
|
||||
<el-dialog v-dialogDrag :title="title" :visible.sync="show" width="550px" :before-close="doClose">
|
||||
<el-form ref="form" label-width="120px" :model="formModel" :rules="rules">
|
||||
<el-form-item :label="$t('display.setTime.systemTime')" prop="time">
|
||||
<el-time-picker
|
||||
v-model="formModel.time"
|
||||
:picker-options="pickerOptions"
|
||||
:placeholder="$t('display.setTime.anyTime')"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button @click="show = false">{{ $t('global.cancel') }}</el-button>
|
||||
<el-button type="primary" :loading="status" @click="handleSure">{{ $t('global.confirm') }}</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { modifySystemTime } from '@/api/simulation';
|
||||
import { timestampFormat } from '@/utils/date';
|
||||
|
||||
// 修改系统时间
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
show: false,
|
||||
formModel: {
|
||||
time: new Date()
|
||||
},
|
||||
maxNumber: 1,
|
||||
pickerOptions: { selectableRange: '00:00:00 - 23:59:59' },
|
||||
status: false
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
title() {
|
||||
return '修改系统时间';
|
||||
},
|
||||
group() {
|
||||
return this.$route.query.group;
|
||||
},
|
||||
rules() {
|
||||
return {
|
||||
time: [
|
||||
{ required: true, message: this.$t('display.setTime.selectSystemTime'), trigger: 'change' }
|
||||
]
|
||||
};
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
doShow() {
|
||||
// this.formModel.time = new Date(this.$store.state.training.initTime || null);
|
||||
this.show = true;
|
||||
},
|
||||
doClose() {
|
||||
this.status = false;
|
||||
this.show = false;
|
||||
},
|
||||
handleSure() {
|
||||
this.$refs.form.validate((valid) => {
|
||||
if (valid) {
|
||||
this.status = true;
|
||||
const model = {
|
||||
time: timestampFormat('HH:mm:ss', this.formModel.time)
|
||||
};
|
||||
modifySystemTime(model, this.group).then(resp => {
|
||||
this.status = false;
|
||||
this.$message.success('修改系统时间成功！');
|
||||
}).catch(() => {
|
||||
this.status = false;
|
||||
this.$messageBox('修改系统时间失败，请稍后再试');
|
||||
});
|
||||
this.doClose();
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@ -1,128 +0,0 @@
|
||||
<template>
|
||||
<el-dialog
|
||||
title="订单"
|
||||
:visible.sync="dialogVisible"
|
||||
width="30%"
|
||||
center
|
||||
:before-close="handleClose"
|
||||
>
|
||||
<el-row style="font-size: 16px; height: 30px;line-height: 30px;">
|
||||
<el-col :span="6" :offset="2">产品：</el-col>
|
||||
<el-col :span="16">全国行车调度员大赛训练系统</el-col>
|
||||
</el-row>
|
||||
<el-row style="font-size: 16px; height: 30px;line-height: 30px;">
|
||||
<el-col :span="6" :offset="2">单价：</el-col>
|
||||
<el-col :span="16">200元/月</el-col>
|
||||
</el-row>
|
||||
<el-row style="font-size: 16px; height: 30px;line-height: 30px;">
|
||||
<el-col :span="6" :offset="2">购买月数：</el-col>
|
||||
<el-col :span="16"><el-input-number v-model="monthAmount" size="mini" :min="1" :max="999" :precision="0" :step="1" :disabled="!changeMonth" /></el-col>
|
||||
</el-row>
|
||||
<el-row style="font-size: 16px; height: 30px;line-height: 30px;">
|
||||
<el-col :span="6" :offset="2">总价：</el-col>
|
||||
<el-col :span="16">{{ unitPrice * monthAmount + ' 元' }}</el-col>
|
||||
</el-row>
|
||||
<div style="text-align: center;margin: 20px;">
|
||||
<el-button type="primary" size="mini" :disabled="!changeMonth" @click="orderDetermine">生成订单</el-button>
|
||||
<el-button type="primary" size="mini" :disabled="changeMonth" @click="changeOrder">修改订单</el-button>
|
||||
</div>
|
||||
<el-row style="font-size: 16px; height: 30px;line-height: 30px;">
|
||||
<el-col :span="6" :offset="2">订单号：</el-col>
|
||||
<el-col :span="16">{{ orderCode }}</el-col>
|
||||
</el-row>
|
||||
<el-row style="font-size: 16px;height: 200px;">
|
||||
<el-col :span="6" :offset="2">支付码：</el-col>
|
||||
<el-col :span="16">
|
||||
<div style="width: 150px;">
|
||||
<qrcode-vue
|
||||
v-loading="loading"
|
||||
:value="url"
|
||||
:size="150"
|
||||
element-loading-spinner="el-icon-refresh"
|
||||
element-loading-background="rgba(255, 255, 255, 0.9)"
|
||||
/>
|
||||
</div>
|
||||
<div v-if="paySuccess" style="position: relative; top: -50px;color: #0B840B;z-index: 8888;font-size: 18px;text-align: center;width: 150px;font-weight: bold;">
|
||||
<div>订单支付成功!</div>
|
||||
<div>{{ `将在${countdown}后自动关闭` }}</div>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getPayQrCode } from '@/api/competition';
|
||||
import QrcodeVue from 'qrcode.vue';
|
||||
export default {
|
||||
name: 'PayPage',
|
||||
components: { QrcodeVue },
|
||||
data() {
|
||||
return {
|
||||
dialogVisible: false,
|
||||
monthAmount: 1,
|
||||
unitPrice: 200,
|
||||
loading: true,
|
||||
changeMonth: true,
|
||||
url: '',
|
||||
orderCode: '',
|
||||
paySuccess: false,
|
||||
countdown: 10,
|
||||
timer: null
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
'$store.state.socket.payOrder':function (val) {
|
||||
if (this.orderCode == val) {
|
||||
this.paySuccess = true;
|
||||
this.loading = true;
|
||||
this.url = '';
|
||||
this.timer = setInterval(() => {
|
||||
this.countdown--;
|
||||
if (this.countdown <= 0) {
|
||||
this.handleClose();
|
||||
}
|
||||
}, 1000);
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleClose() {
|
||||
this.dialogVisible = false;
|
||||
this.timer && clearInterval(this.timer);
|
||||
},
|
||||
doShow() {
|
||||
this.loading = true;
|
||||
this.dialogVisible = true;
|
||||
this.monthAmount = 1;
|
||||
this.countdown = 10;
|
||||
this.url = '';
|
||||
this.changeMonth = true;
|
||||
this.paySuccess = false;
|
||||
},
|
||||
changeOrder() {
|
||||
this.loading = true;
|
||||
this.changeMonth = true;
|
||||
this.orderCode = '';
|
||||
this.url = '';
|
||||
},
|
||||
orderDetermine() {
|
||||
this.loading = true;
|
||||
this.changeMonth = false;
|
||||
getPayQrCode(this.$route.query.mapId, this.monthAmount).then(resp => {
|
||||
this.url = resp.data.code_url;
|
||||
this.orderCode = resp.data.orderCode;
|
||||
this.loading = false;
|
||||
}).catch(error => {
|
||||
console.error(error);
|
||||
this.dialogVisible = false;
|
||||
this.$messageBox('生成支付二维码错误,请您重新尝试！');
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@ -1,673 +0,0 @@
|
||||
<template>
|
||||
<div id="PlanSchedule" :style="{top: top+'px', height: height+'px'}">
|
||||
<el-button size="small" style="position: fixed; top: 5px;right: 5px;" type="primary" plain @click="quit">退出</el-button>
|
||||
<el-button size="small" style="position: fixed; top: 5px;right: 70px;" type="primary" plain @click="handlePfiNum">{{ pfiNumFlag ? '隐藏客流量' : '显示客流量' }}</el-button>
|
||||
<div class="left">
|
||||
<div :id="runPlanId" />
|
||||
</div>
|
||||
<div class="right">
|
||||
<data-table
|
||||
ref="serviceTable1"
|
||||
:height="height/2"
|
||||
:config="serviceNumberConfig"
|
||||
:style="{top: top-height/2+'px'}"
|
||||
@touch="scheduleTouch"
|
||||
/>
|
||||
<data-table
|
||||
ref="tripTable1"
|
||||
:height="height/2"
|
||||
:config="tripNumberConfig"
|
||||
:style="{top: top-height/2+'px'}"
|
||||
@touch="trainNumTouch"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapGetters } from 'vuex';
|
||||
import { timeFormat } from '@/utils/date';
|
||||
import DataTable from '@/views/planSchedule/menusPlan/components/dataTable';
|
||||
import echarts from 'echarts';
|
||||
import {toTimeStamp, formatDuring} from '@/utils/date';
|
||||
import { deepAssign } from '@/utils/index';
|
||||
import { EventBus } from '@/scripts/event-bus';
|
||||
import { getByGroupStationList, getPassengerHistoryList } from '@/api/jmap/map';
|
||||
import { loadRunPlanData } from '@/utils/loaddata';
|
||||
import { creatSubscribe, clearSubscribe, displayTopic, LPFTopic} from '@/utils/stomp';
|
||||
import { getSimulationInfoNew } from '@/api/simulation';
|
||||
import { getToken } from '@/utils/auth';
|
||||
export default {
|
||||
name: 'PlanSchedule',
|
||||
components: {
|
||||
DataTable
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
top: 0,
|
||||
height: 0,
|
||||
inter:null,
|
||||
runPlanId: 'run-plan-view',
|
||||
myChart: null,
|
||||
PlanConvert: {},
|
||||
serviceNumberConfig: {
|
||||
data: [],
|
||||
highlightCurrentRow: true,
|
||||
handleChange: this.serviceNumberChange,
|
||||
showClose: false,
|
||||
columns: [
|
||||
{
|
||||
prop: 'serviceNumber',
|
||||
label: '表号'
|
||||
},
|
||||
{
|
||||
width: 40
|
||||
}
|
||||
]
|
||||
},
|
||||
tripNumberConfig: {
|
||||
data: [],
|
||||
highlightCurrentRow: true,
|
||||
handleChange: this.tripNumberChange,
|
||||
showClose: false,
|
||||
columns: [
|
||||
{
|
||||
prop: 'tripNumber',
|
||||
label: '车次号'
|
||||
},
|
||||
{
|
||||
width: 40
|
||||
}
|
||||
]
|
||||
},
|
||||
realData: {},
|
||||
kmRangeCoordMap: {},
|
||||
absoluteTime: 2 * 3600,
|
||||
indexKmRangeMap: {},
|
||||
dialogLoading: false,
|
||||
dialogShow: false,
|
||||
seriesMap: {},
|
||||
staticSeries: [],
|
||||
runSeries: [],
|
||||
selectSeries: [],
|
||||
runPlanData: {},
|
||||
pfiNumFlag: true,
|
||||
pfiNumList: [] // 客流量列表
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapGetters('runPlan', [
|
||||
'stations'
|
||||
]),
|
||||
maxWidth() {
|
||||
return this.$store.state.app.width > 1920 ? 1920 : this.$store.state.app.width;
|
||||
},
|
||||
maxHeight() {
|
||||
return this.$store.state.app.height > 1080 ? 1080 : this.$store.state.app.height;
|
||||
},
|
||||
title() {
|
||||
return this.$t('display.runPlan.previewRunDiagram');
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
maxWidth() {
|
||||
this.setPosition();
|
||||
},
|
||||
maxHeight() {
|
||||
this.setPosition();
|
||||
},
|
||||
'$store.state.runPlan.planLoadedCount': async function () {
|
||||
try {
|
||||
await this.loadChartPage();
|
||||
this.selectSeries = []; this.runSeries = []; this.runPlanData = {}; this.pfiNumList = [];
|
||||
// console.log('清除计划车次');
|
||||
if (this.dialogShow) {
|
||||
await this.loadInitData();
|
||||
}
|
||||
} catch (e) {
|
||||
console.error(e);
|
||||
} finally {
|
||||
this.loading = false;
|
||||
}
|
||||
},
|
||||
'$store.state.socket.simulationReset': function (val) {
|
||||
this.selectSeries = []; this.runSeries = []; this.runPlanData = {}; this.pfiNumList = [];
|
||||
this.loadInitData();
|
||||
},
|
||||
'$store.state.runPlan.planSizeCount': function () {
|
||||
this.reSize({ width: this.$store.state.runPlan.width, height: this.$store.state.runPlan.height });
|
||||
},
|
||||
'$store.state.socket.trainStationList': function (val) {
|
||||
if (val.length) {
|
||||
this.updateRunPlanData(val);
|
||||
}
|
||||
},
|
||||
'$store.state.socket.stationPfiNum': function (data) {
|
||||
if (data) {
|
||||
this.updateRunPlanPfiNum(data);
|
||||
this.$store.dispatch('socket/setStationPfiNum');
|
||||
}
|
||||
},
|
||||
'$store.state.socket.simulationOver':function(val) {
|
||||
this.quit();
|
||||
},
|
||||
'$store.state.runPlan.loadRunPlanCount': function () {
|
||||
this.loadChartPage();
|
||||
this.setPosition();
|
||||
this.loadInitData();
|
||||
this.inter && clearInterval(this.inter);
|
||||
this.subscribe();
|
||||
},
|
||||
'$store.state.socket.isFirst':function(val) {
|
||||
if (val) {
|
||||
const header = { group: this.group || '', 'X-Token': getToken() };
|
||||
creatSubscribe(`${LPFTopic}\/${this.$route.query.group}`, header);
|
||||
}
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.$store.dispatch('app/transitionAnimations');
|
||||
this.loadRunData();
|
||||
this.staticSeries = []; this.selectSeries = []; this.runSeries = []; this.runPlanData = {};
|
||||
this.PlanConvert = this.$theme.loadPlanConvert(this.$route.query.lineCode);
|
||||
EventBus.$on('clearRunSeries', () => {
|
||||
this.runSeries = [];
|
||||
});
|
||||
},
|
||||
beforeDestroy() {
|
||||
this.destroy();
|
||||
this.clearSubscribe();
|
||||
this.$store.dispatch('runPlan/setPlanData', []);
|
||||
this.$store.dispatch('socket/setIsFirst', false);
|
||||
},
|
||||
methods: {
|
||||
async subscribe() {
|
||||
this.clearSubscribe();
|
||||
const header = { group: this.$route.query.group || '', 'X-Token': getToken() };
|
||||
creatSubscribe(`${displayTopic}\/${this.$route.query.group}`, header);
|
||||
// creatSubscribe(`${LPFTopic}\/${this.$route.query.group}`, header);
|
||||
// await this.$store.dispatch('training/setHasSubscribed');
|
||||
this.$store.dispatch('app/animationsClose');
|
||||
},
|
||||
clearSubscribe() {
|
||||
clearSubscribe(`${displayTopic}\/${this.$route.query.group}`);
|
||||
clearSubscribe(`${LPFTopic}\/${this.$route.query.group}`);
|
||||
},
|
||||
loadRunData() {
|
||||
this.$store.dispatch('runPlan/clear').then(() => {
|
||||
if (this.$route.query.group) {
|
||||
// 获取排序的车站列表
|
||||
getByGroupStationList(this.$route.query.group).then(response => {
|
||||
getSimulationInfoNew(this.$route.query.group).then(res => {
|
||||
this.$store.dispatch('runPlan/setRunPlanInfo', res.data.runPlan);
|
||||
this.$store.dispatch('runPlan/setStations', response.data).then(async() => {
|
||||
loadRunPlanData(this.$route.query.group, this.dataError);
|
||||
});
|
||||
});
|
||||
}).catch(() => {
|
||||
this.$messageBox(this.$t('display.schema.getStationListFail'));
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
async doClose() {
|
||||
this.dialogShow = false;
|
||||
this.inter && clearInterval(this.inter);
|
||||
},
|
||||
serviceNumberChange(row) {
|
||||
if (row) {
|
||||
this.$store.dispatch('runPlan/setSelected', { serviceNumber: row.serviceNumber, tripNumber: null });
|
||||
this.renderTripNumber({ serviceNumber: row.serviceNumber, tripNumber: null });
|
||||
const serviceObj = this.$store.state.runPlan.editData[row.serviceNumber];
|
||||
if (serviceObj) {
|
||||
this.analyticalTripNumber(serviceObj.trainMap);
|
||||
}
|
||||
}
|
||||
},
|
||||
tripNumberChange(row) {
|
||||
if (row) {
|
||||
this.$store.dispatch('runPlan/setSelected', { serviceNumber: this.$store.state.runPlan.selected.serviceNumber, tripNumber: row.tripNumber });
|
||||
this.renderTripNumber({ serviceNumber: this.$store.state.runPlan.selected.serviceNumber, tripNumber: row.tripNumber });
|
||||
}
|
||||
},
|
||||
async analyticalServiceNumber(data) {
|
||||
this.serviceNumberConfig.data = Object.keys(data || {})
|
||||
// .sort((a, b) => { return data[a].oldIndex - data[b].oldIndex; })
|
||||
.sort((a, b) => { return parseInt(data[a].serviceNumber) - parseInt(data[b].serviceNumber); })
|
||||
.map(serviceNumber => { return { serviceNumber }; });
|
||||
},
|
||||
async analyticalTripNumber(data) {
|
||||
this.tripNumberConfig.data = Object.keys(data || {})
|
||||
.sort((a, b) => { return data[a].tripNumber - data[b].tripNumber; })
|
||||
.map(tripNumber => { return { tripNumber }; });
|
||||
},
|
||||
async setPosition() {
|
||||
this.$nextTick(() => {
|
||||
const top = 54;
|
||||
const width = this.maxWidth * 0.85;
|
||||
let height = this.maxHeight;
|
||||
|
||||
height = height - top;
|
||||
this.$store.dispatch('runPlan/resize', { width, height });
|
||||
|
||||
if (this.top != top) {
|
||||
this.top = top;
|
||||
}
|
||||
|
||||
if (this.height != height) {
|
||||
this.height = height - top;
|
||||
}
|
||||
});
|
||||
},
|
||||
updateRunPlanPfiNum(data) {
|
||||
// const option = this.myChart.getOption();
|
||||
// const series = option.series;
|
||||
// const seriesList = series.filter(elem => elem.type != 'bar');
|
||||
this.handleStationNum(data);
|
||||
if (this.pfiNumFlag) {
|
||||
const series = [...this.staticSeries, ...this.runSeries, ...this.selectSeries, ...this.pfiNumList];
|
||||
this.myChart && this.myChart.setOption({series: series});
|
||||
}
|
||||
},
|
||||
updateRunPlanData(data) {
|
||||
const stations = this.$store.state.runPlan.stations;
|
||||
data.forEach(item => {
|
||||
item.secondTime = item.second;
|
||||
});
|
||||
this.kmRangeCoordMap = this.PlanConvert.convertStationsToMap(stations);
|
||||
this.runSeries = this.PlanConvert.updateDataToModels(data, stations, this.kmRangeCoordMap,
|
||||
this.runPlanData, this.runSeries, { color: '#FF00DE', width: 2 }
|
||||
);
|
||||
const series = [...this.staticSeries, ...this.runSeries, ...this.selectSeries];
|
||||
this.myChart && this.myChart.setOption({series: series});
|
||||
},
|
||||
handleStationNum(data) {
|
||||
const timeDate = (data.systemTime).split(' ')[0];
|
||||
const time = ((+new Date(data.systemTime) - (+new Date(`${timeDate} 00:00:00`))) / 1000) - this.PlanConvert.TranslationTime;
|
||||
let index = 1;
|
||||
this.stations.forEach((station, ii) => {
|
||||
if (station.visible) {
|
||||
const stationObj = data.data.find(ele => ele.stationCode == station.code);
|
||||
const judge = this.pfiNumList.find(ele => ele.code == station.code);
|
||||
if (!judge) {
|
||||
this.pfiNumList.push({
|
||||
name: '客流量',
|
||||
type: 'bar',
|
||||
code: station.code,
|
||||
barGap: '-100%',
|
||||
yAxisIndex: index++,
|
||||
barWidth: '3000%',
|
||||
itemStyle: {
|
||||
color: '#3BAAF7'
|
||||
},
|
||||
z: 10,
|
||||
data: [[time, stationObj.passengerQuantity]]
|
||||
});
|
||||
} else {
|
||||
judge.data.push([time, stationObj.passengerQuantity]);
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
handlePfiNum() {
|
||||
const option = this.myChart.getOption();
|
||||
const series = option.series;
|
||||
if (this.pfiNumFlag) {
|
||||
series.forEach(item => {
|
||||
if (item.type == 'bar') {
|
||||
item.itemStyle = {
|
||||
color: 'rgba(0,0,0,0)'
|
||||
};
|
||||
}
|
||||
});
|
||||
} else {
|
||||
series.forEach(item => {
|
||||
if (item.type == 'bar') {
|
||||
item.itemStyle = {
|
||||
color: '#3BAAF7'
|
||||
};
|
||||
}
|
||||
});
|
||||
}
|
||||
this.myChart && this.myChart.setOption({series: series});
|
||||
this.pfiNumFlag = !this.pfiNumFlag;
|
||||
},
|
||||
async loadChartPage() {
|
||||
try {
|
||||
this.seriesMap = {};
|
||||
this.staticSeries = [];
|
||||
const stations = this.$store.state.runPlan.stations;
|
||||
const planData = this.$store.state.runPlan.planData;
|
||||
this.kmRangeCoordMap = this.PlanConvert.convertStationsToMap(stations);
|
||||
this.pushModels(this.staticSeries, [this.PlanConvert.initializeYaxis(stations)]);
|
||||
this.staticSeries = this.pushModels(this.staticSeries, this.PlanConvert.convertDataToModels(planData, stations, this.kmRangeCoordMap, { color: '#000', width: 0.5 }));
|
||||
this.staticSeries.forEach(item => {
|
||||
this.seriesMap[item.name] = item;
|
||||
});
|
||||
await this.analyticalServiceNumber(this.$store.state.runPlan.editData);
|
||||
// 客流量历史数据渲染
|
||||
const res = await getPassengerHistoryList(this.$route.query.group);
|
||||
if (res.code == 200) {
|
||||
res.data.forEach(item => {
|
||||
this.handleStationNum(item);
|
||||
});
|
||||
}
|
||||
const series = [...this.staticSeries, ...this.runSeries, ...this.selectSeries, ...this.pfiNumList];
|
||||
this.myChart && this.myChart.setOption({series: series});
|
||||
} catch (error) {
|
||||
console.log(error, '====');
|
||||
this.$messageBox(`加载运行图数据失败`);
|
||||
}
|
||||
},
|
||||
|
||||
async loadInitData() {
|
||||
this.myChart && this.myChart.showLoading();
|
||||
const option = {
|
||||
tooltip: {
|
||||
axisPointer: {
|
||||
trigger: 'item',
|
||||
type: 'cross'
|
||||
},
|
||||
formatter: this.axisTooltip,
|
||||
borderWidth: 1
|
||||
},
|
||||
grid: [
|
||||
{
|
||||
right: '40px',
|
||||
left: '120px',
|
||||
height: '85%'
|
||||
}
|
||||
],
|
||||
xAxis: [
|
||||
{
|
||||
type: 'category',
|
||||
data: [],
|
||||
axisLine: {
|
||||
onZero: false,
|
||||
lineStyle: {
|
||||
width: 2,
|
||||
color: '#d14a61'
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
formatter: this.xAxisLableFormat,
|
||||
textStyle: {
|
||||
color: '#333'
|
||||
}
|
||||
},
|
||||
axisPointer: {
|
||||
snap: true,
|
||||
label: {
|
||||
formatter: this.xAxisPointFormat,
|
||||
backgroundColor: 'rgb(255,0,0,0.5)',
|
||||
color: 'white'
|
||||
}
|
||||
}
|
||||
}
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
type: 'value',
|
||||
splitLine: {
|
||||
show: false
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
axisLine: {
|
||||
onZero: false,
|
||||
lineStyle: {
|
||||
width: 2,
|
||||
color: '#d14a61'
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
interval: 'auto',
|
||||
formatter: this.yAxisLableFormat
|
||||
},
|
||||
axisPointer: {
|
||||
xAxisIndex: 'all',
|
||||
label: {
|
||||
formatter: this.yAxisPointFormat,
|
||||
backgroundColor: 'rgb(0,100,0,0.5)',
|
||||
color: 'white'
|
||||
}
|
||||
}
|
||||
}
|
||||
],
|
||||
dataZoom: [{
|
||||
type: 'inside'
|
||||
},
|
||||
{
|
||||
fiterMode: 'filter',
|
||||
handleIcon: 'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
|
||||
handleSize: '80%',
|
||||
handleStyle: {
|
||||
color: '#fff',
|
||||
shadowBlur: 3,
|
||||
shadowColor: 'rgba(0, 0, 0, 0.6)',
|
||||
shadowOffsetX: 2,
|
||||
shadowOffsetY: 2
|
||||
},
|
||||
bottom: '20px'
|
||||
}],
|
||||
series: []
|
||||
};
|
||||
await this.xAxisInit(option);
|
||||
await this.yAxisInit(option);
|
||||
await this.loadInitChart(option);
|
||||
this.myChart && this.myChart.hideLoading();
|
||||
},
|
||||
pushModels(series, models) {
|
||||
if (models && models.length) {
|
||||
models.forEach(elem => {
|
||||
if (elem) {
|
||||
series.push(elem);
|
||||
}
|
||||
});
|
||||
}
|
||||
return series;
|
||||
},
|
||||
loadInitChart(option) {
|
||||
return new Promise((resolve, reject) => {
|
||||
try {
|
||||
this.destroy();
|
||||
let startValue = 3600 + this.PlanConvert.TranslationTime;
|
||||
const offsetTime = 3600;
|
||||
const initTime = toTimeStamp(formatDuring(parseInt(this.$route.query.initTime)));
|
||||
startValue = initTime - this.PlanConvert.TranslationTime;
|
||||
option.dataZoom[0].startValue = option.dataZoom[1].startValue = startValue - offsetTime;
|
||||
option.dataZoom[0].endValue = option.dataZoom[1].endValue = startValue + offsetTime;
|
||||
if (this.pfiNumFlag) {
|
||||
option.series = [...this.staticSeries, ...this.runSeries, ...this.selectSeries, ...this.pfiNumList];
|
||||
} else {
|
||||
option.series = [...this.staticSeries, ...this.runSeries, ...this.selectSeries];
|
||||
}
|
||||
this.myChart = echarts.init(document.getElementById(this.runPlanId));
|
||||
if (this.myChart) {
|
||||
this.myChart.setOption(option);
|
||||
this.reSize({ width: this.$store.state.runPlan.width, height: this.$store.state.runPlan.height });
|
||||
this.myChart.on('click', this.mouseClick);
|
||||
}
|
||||
resolve(true);
|
||||
} catch (error) {
|
||||
reject(error);
|
||||
}
|
||||
});
|
||||
},
|
||||
xAxisPointFormat(params) {
|
||||
return timeFormat(params.value);
|
||||
},
|
||||
yAxisPointFormat(params) {
|
||||
return this.PlanConvert.computedFormatYAxis(this.stations, params);
|
||||
},
|
||||
xAxisLableFormat(value, index) {
|
||||
return timeFormat(value);
|
||||
},
|
||||
yAxisLableFormat(value, index) {
|
||||
return '';
|
||||
},
|
||||
xAxisInit(option) {
|
||||
const list = [];
|
||||
for (var time = 0 + this.PlanConvert.TranslationTime; time < 3600 * 24 + this.PlanConvert.TranslationTime; time++) {
|
||||
list.push(time);
|
||||
}
|
||||
const startValue = 3600 * 6;
|
||||
const offsetTime = 3600 * 1;
|
||||
|
||||
option.xAxis[0].data = list;
|
||||
if (!option.dataZoom[0].startValue) {
|
||||
option.dataZoom[0].startValue = option.dataZoom[1].startValue = startValue - offsetTime;
|
||||
}
|
||||
|
||||
if (!option.dataZoom[0].endValue) {
|
||||
option.dataZoom[0].endValue = option.dataZoom[1].endValue = startValue + offsetTime;
|
||||
}
|
||||
},
|
||||
yAxisInit(option) {
|
||||
if (Object.keys(this.PlanConvert).length) {
|
||||
option.yAxis[0].min = this.PlanConvert.computedYaxisMinValue(this.stations);
|
||||
option.yAxis[0].max = this.PlanConvert.computedYaxisMaxValue(this.stations);
|
||||
let index = 1;
|
||||
this.stations.forEach((station, ii) => {
|
||||
if (station.visible) {
|
||||
option.yAxis.push({
|
||||
type: 'value',
|
||||
min: Math.floor(option.yAxis[0].min - this.PlanConvert.getYaxisValueByStation(station, ii)),
|
||||
max: Math.floor(option.yAxis[0].max - this.PlanConvert.getYaxisValueByStation(station, ii)),
|
||||
show: false,
|
||||
yAxisIndex : index++
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
axisTooltip(param) {
|
||||
if (param.seriesType == 'bar') {
|
||||
return [
|
||||
`Point Data <hr size=1 style=" margin: 3px 0">`,
|
||||
`车站客流量: ${param.data[1]} 人 <br>`,
|
||||
`当前时间: ${timeFormat(param.data[0] + this.PlanConvert.TranslationTime)}<br>`
|
||||
].join('');
|
||||
} else {
|
||||
const station = (this.$store.getters['map/getDeviceByCode'](param.data[2])) || { name: '', kmRange: '' };
|
||||
return [
|
||||
`Point Data <hr size=1 style=" margin: 3px 0">`,
|
||||
`车站名称: ${station.name}<br>`,
|
||||
`车站公里标: ${station.kmRange} km <br>`,
|
||||
`到站时间: ${timeFormat(param.data[0] + this.PlanConvert.TranslationTime)} (${param.data[0]})<br>`
|
||||
].join('');
|
||||
}
|
||||
|
||||
},
|
||||
renderTripNumber(params) {
|
||||
const tripNumber = params.tripNumber; // 车次号
|
||||
const serviceNumber = params.serviceNumber; // 服务号
|
||||
let data, markPoint;
|
||||
if (tripNumber && this.seriesMap[serviceNumber]) {
|
||||
const temp = this.seriesMap[serviceNumber].data.filter(elem => elem[3] == tripNumber);
|
||||
if (temp.length) {
|
||||
data = temp;
|
||||
this.seriesMap[serviceNumber].markPoint.data.forEach(each=> {
|
||||
if (each.name == temp[0][4]) {
|
||||
markPoint = deepAssign({}, {data:[each]});
|
||||
markPoint.symbol = 'roundRect';
|
||||
markPoint.symbolSize = 1;
|
||||
markPoint.data[0].label.color = '#f00';
|
||||
}
|
||||
});
|
||||
}
|
||||
} else if (this.seriesMap[serviceNumber]) {
|
||||
markPoint = deepAssign({}, this.seriesMap[serviceNumber].markPoint);
|
||||
markPoint.data.forEach(each => {
|
||||
each.label.color = '#f00';
|
||||
});
|
||||
data = this.seriesMap[serviceNumber].data;
|
||||
}
|
||||
this.selectSeries = [{
|
||||
name: 'trainLabel',
|
||||
lineStyle: {
|
||||
color: '#f00',
|
||||
width: 2,
|
||||
type: 'solid'
|
||||
},
|
||||
z: 10,
|
||||
type: 'line',
|
||||
markPoint:markPoint,
|
||||
animation: false,
|
||||
data: data
|
||||
}];
|
||||
const series = [...this.staticSeries, ...this.runSeries, ...this.selectSeries];
|
||||
this.myChart && this.myChart.setOption({series: series});
|
||||
},
|
||||
mouseClick(params) {
|
||||
const model = {
|
||||
serviceNumber: params.seriesName
|
||||
};
|
||||
this.$store.dispatch('runPlan/setSelected', model);
|
||||
},
|
||||
reSize(opt) {
|
||||
if (this.myChart) {
|
||||
this.myChart.resize({
|
||||
width: opt.width,
|
||||
height: opt.height,
|
||||
silent: false
|
||||
});
|
||||
}
|
||||
},
|
||||
destroy() {
|
||||
if (this.myChart && this.myChart.isDisposed) {
|
||||
this.myChart.dispose();
|
||||
this.myChart = null;
|
||||
}
|
||||
},
|
||||
scheduleTouch() {
|
||||
|
||||
},
|
||||
trainNumTouch() {
|
||||
|
||||
},
|
||||
quit() {
|
||||
window.close();
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped rel="stylesheet/scss" lang="scss">
|
||||
@import "src/styles/mixin.scss";
|
||||
|
||||
#PlanSchedule {
|
||||
z-index: 5;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
|
||||
.left {
|
||||
height: 100%;
|
||||
width: 85%;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.right {
|
||||
height: 100%;
|
||||
width: 15%;
|
||||
float: right;
|
||||
}
|
||||
}
|
||||
|
||||
/deep/ {
|
||||
.el-dialog {
|
||||
height: 100%;
|
||||
max-height: 1080px;
|
||||
}
|
||||
.el-dialog__body {
|
||||
padding: 0px !important;
|
||||
background-color: floralwhite !important;
|
||||
}
|
||||
.el-dialog__headerbtn .el-dialog__close {
|
||||
font-size: 18px;
|
||||
border: 1px solid #909399;
|
||||
border-radius: 5px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,45 +0,0 @@
|
||||
<template>
|
||||
<div v-show="show" class="run-plan-dialog" style="width: 100%; height: 100%;z-index: 36;">
|
||||
<edit-tool ref="planSchedule" @doClose="doClose" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import EditTool from '@/views/planMonitor/newEditTool/index';
|
||||
export default {
|
||||
name: 'RunPlanEdit',
|
||||
components: {
|
||||
EditTool
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
menus: null,
|
||||
show: false
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
doShow() {
|
||||
this.show = true;
|
||||
},
|
||||
doClose() {
|
||||
this.show = false;
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style rel="stylesheet/scss" lang="scss" scoped>
|
||||
@import "src/styles/mixin.scss";
|
||||
|
||||
.run-plan-dialog {
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
position: absolute;
|
||||
z-index: 38;
|
||||
top: 0px;
|
||||
right: 0px;
|
||||
background: white;
|
||||
}
|
||||
</style>
|
||||
@ -1,80 +0,0 @@
|
||||
<template>
|
||||
<div v-show="show" class="run-plan-dialog" :style="{width: width + 'px',height:height + 'px'}">
|
||||
<plan-schedule ref="planSchedule" :group="group" @back="doClose" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import PlanSchedule from '@/views/planSchedule/index';
|
||||
import { getSimulationInfoNew } from '@/api/simulation';
|
||||
import { loadRunPlanData } from '@/utils/loaddata';
|
||||
|
||||
// 运行图加载
|
||||
export default {
|
||||
name: 'RunPlanLoad',
|
||||
components: {
|
||||
PlanSchedule
|
||||
},
|
||||
props: {
|
||||
group: {
|
||||
type: String,
|
||||
required: true
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
menus: null,
|
||||
show: false
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
title() {
|
||||
return this.$t('display.runPlan.runDiagramPlanTool');
|
||||
},
|
||||
width() {
|
||||
return this.$store.state.app.width > 1920 ? 1920 : this.$store.state.app.width;
|
||||
},
|
||||
height() {
|
||||
return this.$store.state.app.height > 1080 ? 1080 : this.$store.state.app.height;
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
'$store.state.socket.runPlanReloadCount': function (val) {
|
||||
getSimulationInfoNew(this.group).then(res => {
|
||||
this.$store.dispatch('runPlan/setRunPlanInfo', res.data.runPlan);
|
||||
loadRunPlanData(this.group);
|
||||
});
|
||||
}
|
||||
},
|
||||
beforeDestroy() {
|
||||
this.$store.dispatch('runPlan/setPlanData', []);
|
||||
},
|
||||
mounted() {
|
||||
// this.menus = this.$theme.loadPlanComponent(this.$route.query.lineCode);
|
||||
},
|
||||
methods: {
|
||||
doShow() {
|
||||
this.show = true;
|
||||
this.$refs.planSchedule.setPosition();
|
||||
},
|
||||
doClose() {
|
||||
this.show = false;
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style rel="stylesheet/scss" lang="scss" scoped>
|
||||
@import "src/styles/mixin.scss";
|
||||
|
||||
.run-plan-dialog {
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
position: absolute;
|
||||
z-index: 38;
|
||||
top: 0px;
|
||||
right: 0px;
|
||||
background: white;
|
||||
}
|
||||
</style>
|
||||
@ -1,657 +0,0 @@
|
||||
<template>
|
||||
<el-dialog
|
||||
v-dialogLoading="dialogLoading"
|
||||
:title="title"
|
||||
:width="maxWidth + 'px'"
|
||||
top="0"
|
||||
:style="{left:$store.state.app.width> 1920? '50%': '0'}"
|
||||
:visible.sync="dialogShow"
|
||||
:before-close="doClose"
|
||||
:close-on-click-modal="false"
|
||||
:modal="false"
|
||||
>
|
||||
<div id="PlanSchedule" :style="{top: top+'px', height: height+'px'}">
|
||||
<div class="left">
|
||||
<div :id="runPlanId" />
|
||||
</div>
|
||||
<div class="right">
|
||||
<data-table
|
||||
ref="serviceTable1"
|
||||
:height="height/2"
|
||||
:config="serviceNumberConfig"
|
||||
:style="{top: top-height/2+'px'}"
|
||||
@touch="scheduleTouch"
|
||||
/>
|
||||
<data-table
|
||||
ref="tripTable1"
|
||||
:height="height/2"
|
||||
:config="tripNumberConfig"
|
||||
:style="{top: top-height/2+'px'}"
|
||||
@touch="trainNumTouch"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapGetters } from 'vuex';
|
||||
import { timeFormat } from '@/utils/date';
|
||||
import DataTable from '@/views/planSchedule/menusPlan/components/dataTable';
|
||||
import echarts from 'echarts';
|
||||
import {toTimeStamp, formatDuring} from '@/utils/date';
|
||||
import { deepAssign } from '@/utils/index';
|
||||
import { EventBus } from '@/scripts/event-bus';
|
||||
let myChart = null;
|
||||
export default {
|
||||
name: 'PlanSchedule',
|
||||
components: {
|
||||
DataTable
|
||||
},
|
||||
props: {
|
||||
group: {
|
||||
type: String,
|
||||
required: true
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
top: 0,
|
||||
height: 0,
|
||||
inter:null,
|
||||
runPlanId: 'run-plan-view',
|
||||
// myChart: null,
|
||||
PlanParser: {},
|
||||
serviceNumberConfig: {
|
||||
data: [],
|
||||
highlightCurrentRow: true,
|
||||
handleChange: this.serviceNumberChange,
|
||||
showClose: false,
|
||||
columns: [
|
||||
{
|
||||
prop: 'serviceNumber',
|
||||
label: '表号'
|
||||
},
|
||||
{
|
||||
width: 40
|
||||
}
|
||||
]
|
||||
},
|
||||
tripNumberConfig: {
|
||||
data: [],
|
||||
highlightCurrentRow: true,
|
||||
handleChange: this.tripNumberChange,
|
||||
showClose: false,
|
||||
columns: [
|
||||
{
|
||||
prop: 'tripNumber',
|
||||
label: '车次号'
|
||||
},
|
||||
{
|
||||
width: 40
|
||||
}
|
||||
]
|
||||
},
|
||||
realData: {},
|
||||
kmRangeMap: {},
|
||||
absoluteTime: 2 * 3600,
|
||||
indexKmRangeMap: {},
|
||||
dialogLoading: false,
|
||||
dialogShow: false,
|
||||
seriesMap: {},
|
||||
staticSeries: [],
|
||||
runSeries: [],
|
||||
selectSeries: [],
|
||||
runPlanData: {}
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapGetters('runPlan', [
|
||||
'stations'
|
||||
]),
|
||||
maxWidth() {
|
||||
return this.$store.state.app.width > 1920 ? 1920 : this.$store.state.app.width;
|
||||
},
|
||||
maxHeight() {
|
||||
return this.$store.state.app.height > 1080 ? 1080 : this.$store.state.app.height;
|
||||
},
|
||||
title() {
|
||||
return this.$t('display.runPlan.previewRunDiagram');
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
maxWidth() {
|
||||
this.setPosition();
|
||||
},
|
||||
maxHeight() {
|
||||
this.setPosition();
|
||||
},
|
||||
'$store.state.runPlan.planLoadedCount': async function () {
|
||||
try {
|
||||
await this.loadChartPage();
|
||||
this.selectSeries = []; this.runSeries = []; this.runPlanData = {};
|
||||
if (this.dialogShow) {
|
||||
await this.loadInitData();
|
||||
}
|
||||
} catch (e) {
|
||||
console.error(e);
|
||||
} finally {
|
||||
this.loading = false;
|
||||
}
|
||||
},
|
||||
'$store.state.socket.simulationReset': function (val) {
|
||||
this.selectSeries = []; this.runSeries = []; this.runPlanData = {};
|
||||
if (this.dialogShow) {
|
||||
this.loadInitData();
|
||||
}
|
||||
},
|
||||
'$store.state.runPlan.planSizeCount': function () {
|
||||
this.reSize({ width: this.$store.state.runPlan.width, height: this.$store.state.runPlan.height });
|
||||
},
|
||||
'$store.state.socket.trainStationList': function (val) {
|
||||
if (val.length) {
|
||||
this.updateRunPlanData(val);
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.staticSeries = []; this.selectSeries = []; this.runSeries = []; this.runPlanData = {};
|
||||
this.PlanParser = this.$theme.loadPlanParser(this.$route.query.lineCode);
|
||||
// this.loadChartPage();
|
||||
EventBus.$on('clearRunSeries', () => {
|
||||
this.runSeries = [];
|
||||
});
|
||||
},
|
||||
beforeDestroy() {
|
||||
this.$store.dispatch('runPlan/setSelected', null);
|
||||
this.destroy();
|
||||
},
|
||||
methods: {
|
||||
async doShow() {
|
||||
try {
|
||||
this.dialogLoading = true;
|
||||
this.dialogShow = true;
|
||||
this.setPosition();
|
||||
this.loadInitData();
|
||||
this.inter && clearInterval(this.inter);
|
||||
} catch (e) {
|
||||
console.error(e);
|
||||
} finally {
|
||||
this.dialogLoading = false;
|
||||
}
|
||||
},
|
||||
async doClose() {
|
||||
this.dialogShow = false;
|
||||
this.inter && clearInterval(this.inter);
|
||||
},
|
||||
serviceNumberChange(row) {
|
||||
if (row) {
|
||||
this.$store.dispatch('runPlan/setSelected', { serviceNumber: row.serviceNumber, tripNumber: null });
|
||||
this.renderTripNumber({ serviceNumber: row.serviceNumber, tripNumber: null });
|
||||
const serviceObj = this.$store.state.runPlan.editData[row.serviceNumber];
|
||||
if (serviceObj) {
|
||||
this.analyticalTripNumber(serviceObj.trainMap);
|
||||
}
|
||||
}
|
||||
},
|
||||
tripNumberChange(row) {
|
||||
if (row) {
|
||||
this.$store.dispatch('runPlan/setSelected', { serviceNumber: this.$store.state.runPlan.selected.serviceNumber, tripNumber: row.tripNumber });
|
||||
this.renderTripNumber({ serviceNumber: this.$store.state.runPlan.selected.serviceNumber, tripNumber: row.tripNumber });
|
||||
}
|
||||
},
|
||||
async analyticalServiceNumber(data) {
|
||||
this.serviceNumberConfig.data = Object.keys(data || {})
|
||||
.sort((a, b) => { return parseInt(data[a].serviceNumber) - parseInt(data[b].serviceNumber); })
|
||||
.map(serviceNumber => { return { serviceNumber }; });
|
||||
},
|
||||
async analyticalTripNumber(data) {
|
||||
this.tripNumberConfig.data = Object.keys(data || {})
|
||||
.sort((a, b) => { return data[a].tripNumber - data[b].tripNumber; })
|
||||
.map(tripNumber => { return { tripNumber }; });
|
||||
},
|
||||
async setPosition() {
|
||||
this.$nextTick(() => {
|
||||
const top = 54;
|
||||
const width = this.maxWidth * 0.85;
|
||||
let height = this.maxHeight;
|
||||
|
||||
height = height - top;
|
||||
this.$store.dispatch('runPlan/resize', { width, height });
|
||||
|
||||
if (this.top != top) {
|
||||
this.top = top;
|
||||
}
|
||||
|
||||
if (this.height != height) {
|
||||
this.height = height - top;
|
||||
}
|
||||
});
|
||||
},
|
||||
updateRunPlanData(data) {
|
||||
const stations = this.$store.state.runPlan.stations;
|
||||
data.forEach(item => {
|
||||
item.secondTime = item.second;
|
||||
});
|
||||
this.kmRangeMap = this.PlanParser.convertStationsToMap(stations);
|
||||
this.runSeries = this.PlanParser.updateDataToModels(data, stations, this.kmRangeMap,
|
||||
this.runPlanData, this.runSeries, { color: '#FF00DE', width: 2 }
|
||||
);
|
||||
const series = [...this.staticSeries, ...this.runSeries, ... this.selectSeries];
|
||||
myChart && myChart.setOption({series: series});
|
||||
},
|
||||
async loadChartPage() {
|
||||
try {
|
||||
this.seriesMap = {};
|
||||
this.staticSeries = [];
|
||||
const stations = this.$store.state.runPlan.stations;
|
||||
const planData = this.$store.state.runPlan.planData;
|
||||
this.kmRangeMap = this.PlanParser.convertStationsToMap(stations);
|
||||
if (this.$route.query.lineCode === '07') {
|
||||
this.pushModels(this.staticSeries, [this.PlanParser.initializeAxisX(stations)]);
|
||||
} else {
|
||||
this.pushModels(this.staticSeries, [this.PlanParser.initializeAxisY(stations)]);
|
||||
}
|
||||
this.staticSeries = this.pushModels(this.staticSeries, this.PlanParser.convertDataToModels(planData, stations, this.kmRangeMap, { color: '#000', width: 0.5 }));
|
||||
this.staticSeries.forEach(item => {
|
||||
this.seriesMap[item.name] = item;
|
||||
});
|
||||
await this.analyticalServiceNumber(this.$store.state.runPlan.editData);
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
this.$messageBox(`加载运行图数据失败`);
|
||||
}
|
||||
},
|
||||
|
||||
async loadInitData() {
|
||||
myChart && myChart.showLoading();
|
||||
const option = {
|
||||
tooltip: {
|
||||
axisPointer: {
|
||||
trigger: 'item',
|
||||
type: 'cross'
|
||||
},
|
||||
formatter: this.axisTooltip,
|
||||
borderWidth: 1
|
||||
},
|
||||
grid: {
|
||||
right: '40px',
|
||||
left: '120px',
|
||||
height: '85%'
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
type: 'category',
|
||||
data: [],
|
||||
axisLine: {
|
||||
onZero: false,
|
||||
lineStyle: {
|
||||
width: 2,
|
||||
color: '#d14a61'
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
formatter: this.xAxisLableFormat,
|
||||
textStyle: {
|
||||
color: '#333'
|
||||
}
|
||||
},
|
||||
axisPointer: {
|
||||
snap: true,
|
||||
label: {
|
||||
formatter: this.xAxisPointFormat,
|
||||
backgroundColor: 'rgb(255,0,0,0.5)',
|
||||
color: 'white'
|
||||
}
|
||||
}
|
||||
}
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
type: 'value',
|
||||
yAxisIndex: 0,
|
||||
splitLine: {
|
||||
show: false
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
axisLine: {
|
||||
onZero: false,
|
||||
lineStyle: {
|
||||
width: 2,
|
||||
color: '#d14a61'
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
interval: 'auto',
|
||||
formatter: this.yAxisLableFormat
|
||||
},
|
||||
axisPointer: {
|
||||
xAxisIndex: 'all',
|
||||
label: {
|
||||
formatter: this.yAxisPointFormat,
|
||||
backgroundColor: 'rgb(0,100,0,0.5)',
|
||||
color: 'white'
|
||||
}
|
||||
}
|
||||
}
|
||||
],
|
||||
dataZoom: [{
|
||||
type: 'inside'
|
||||
},
|
||||
{
|
||||
fiterMode: 'filter',
|
||||
handleIcon: 'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
|
||||
handleSize: '80%',
|
||||
handleStyle: {
|
||||
color: '#fff',
|
||||
shadowBlur: 3,
|
||||
shadowColor: 'rgba(0, 0, 0, 0.6)',
|
||||
shadowOffsetX: 2,
|
||||
shadowOffsetY: 2
|
||||
},
|
||||
bottom: '20px'
|
||||
}],
|
||||
series: [
|
||||
|
||||
]
|
||||
};
|
||||
const hebXAxis = {
|
||||
type: 'value',
|
||||
splitLine: {
|
||||
show: false
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
axisLine: {
|
||||
onZero: false,
|
||||
lineStyle: {
|
||||
width: 2,
|
||||
color: '#d14a61'
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
interval: 'auto',
|
||||
formatter: this.yAxisLableFormat
|
||||
},
|
||||
axisPointer: {
|
||||
xAxisIndex: 'all',
|
||||
label: {
|
||||
formatter: this.yAxisPointFormat,
|
||||
backgroundColor: 'rgb(0,100,0,0.5)',
|
||||
color: 'white'
|
||||
}
|
||||
},
|
||||
min: 0,
|
||||
max: 0
|
||||
};
|
||||
const hebYAxis = [
|
||||
{
|
||||
type: 'category',
|
||||
boundaryGap: false,
|
||||
data: [],
|
||||
axisLine: {
|
||||
onZero: false,
|
||||
lineStyle: {
|
||||
width: 2,
|
||||
color: '#d14a61'
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
formatter: this.xAxisLableFormat,
|
||||
textStyle: {
|
||||
color: '#333'
|
||||
}
|
||||
},
|
||||
axisPointer: {
|
||||
snap: true,
|
||||
label: {
|
||||
formatter: this.xAxisPointFormat,
|
||||
backgroundColor: 'rgb(255,0,0,0.5)',
|
||||
color: 'white'
|
||||
}
|
||||
}
|
||||
}
|
||||
];
|
||||
const hebDataZoom = [
|
||||
{
|
||||
type: 'inside',
|
||||
yAxisIndex: 0
|
||||
},
|
||||
{
|
||||
fiterMode: 'filter',
|
||||
handleIcon: 'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
|
||||
handleSize: '80%',
|
||||
yAxisIndex: 0,
|
||||
handleStyle: {
|
||||
color: '#fff',
|
||||
shadowBlur: 3,
|
||||
shadowColor: 'rgba(0, 0, 0, 0.6)',
|
||||
shadowOffsetX: 2,
|
||||
shadowOffsetY: 2
|
||||
},
|
||||
left: '20px'
|
||||
}
|
||||
];
|
||||
if (this.$route.query.lineCode === '07') {
|
||||
option.xAxis = hebXAxis;
|
||||
option.yAxis = hebYAxis;
|
||||
option.dataZoom = hebDataZoom;
|
||||
}
|
||||
await this.xAxisInit(option);
|
||||
await this.yAxisInit(option);
|
||||
await this.loadInitChart(option);
|
||||
myChart && myChart.hideLoading();
|
||||
},
|
||||
pushModels(series, models) {
|
||||
if (models && models.length) {
|
||||
models.forEach(elem => {
|
||||
if (elem) {
|
||||
series.push(elem);
|
||||
}
|
||||
});
|
||||
}
|
||||
return series;
|
||||
},
|
||||
loadInitChart(option) {
|
||||
return new Promise((resolve, reject) => {
|
||||
try {
|
||||
this.destroy();
|
||||
let startValue = 3600 + this.PlanParser.getTranslation();
|
||||
const offsetTime = 3600;
|
||||
const initTime = toTimeStamp(formatDuring(this.$store.state.training.initTime));
|
||||
startValue = initTime - this.PlanParser.getTranslation();
|
||||
option.dataZoom[0].startValue = option.dataZoom[1].startValue = startValue - offsetTime;
|
||||
option.dataZoom[0].endValue = option.dataZoom[1].endValue = startValue + offsetTime;
|
||||
option.series = [...this.staticSeries, ...this.runSeries, ...this.selectSeries];
|
||||
myChart = echarts.init(document.getElementById(this.runPlanId));
|
||||
if (myChart) {
|
||||
myChart.setOption(option);
|
||||
this.reSize({ width: this.$store.state.runPlan.width, height: this.$store.state.runPlan.height });
|
||||
myChart.on('click', this.mouseClick);
|
||||
}
|
||||
resolve(true);
|
||||
} catch (error) {
|
||||
reject(error);
|
||||
}
|
||||
});
|
||||
},
|
||||
xAxisPointFormat(params) {
|
||||
return timeFormat(params.value);
|
||||
},
|
||||
yAxisPointFormat(params) {
|
||||
return this.PlanParser.computedFormatAxisY(this.stations, params);
|
||||
},
|
||||
xAxisLableFormat(value, index) {
|
||||
return timeFormat(value);
|
||||
},
|
||||
yAxisLableFormat(value, index) {
|
||||
return '';
|
||||
},
|
||||
xAxisInit(option) {
|
||||
const list = [];
|
||||
for (var time = 0 + this.PlanParser.getTranslation(); time < 3600 * 24 + this.PlanParser.getTranslation(); time++) {
|
||||
list.push(time);
|
||||
}
|
||||
const startValue = 3600 * 6;
|
||||
const offsetTime = 3600 * 1;
|
||||
|
||||
if (this.$route.query.lineCode === '07') {
|
||||
option.yAxis[0].data = list;
|
||||
} else {
|
||||
option.xAxis[0].data = list;
|
||||
}
|
||||
if (!option.dataZoom[0].startValue) {
|
||||
option.dataZoom[0].startValue = option.dataZoom[1].startValue = startValue - offsetTime;
|
||||
}
|
||||
|
||||
if (!option.dataZoom[0].endValue) {
|
||||
option.dataZoom[0].endValue = option.dataZoom[1].endValue = startValue + offsetTime;
|
||||
}
|
||||
},
|
||||
yAxisInit(option) {
|
||||
if (Object.keys(this.PlanParser).length && this.$route.query.lineCode !== '07') {
|
||||
option.yAxis.min = this.PlanParser.computedAxisYMinValue(this.stations);
|
||||
option.yAxis.max = this.PlanParser.computedAxisYMaxValue(this.stations);
|
||||
} else if (Object.keys(this.PlanParser).length && this.$route.query.lineCode === '07') {
|
||||
option.xAxis.min = this.PlanParser.computedAxisXMinValue(this.stations);
|
||||
option.xAxis.max = this.PlanParser.computedAxisXMaxValue(this.stations);
|
||||
}
|
||||
},
|
||||
axisTooltip(param) {
|
||||
const station = (this.$store.getters['map/getDeviceByCode'](param.data[2])) || { name: '', kmRange: '' };
|
||||
if (this.$route.query.lineCode !== '07') {
|
||||
if (station.name) {
|
||||
return [
|
||||
`Point Data <hr size=1 style=" margin: 3px 0">`,
|
||||
`车站名称: ${station.name}<br>`,
|
||||
`车站公里标: ${station.kmRange} km <br>`,
|
||||
`到站时间: ${timeFormat(param.data[0] + this.PlanParser.getTranslation())} (${param.data[0]})<br>`
|
||||
].join('');
|
||||
} else {
|
||||
return '';
|
||||
}
|
||||
} else {
|
||||
|
||||
return [
|
||||
`Point Data <hr size=1 style=" margin: 3px 0">`,
|
||||
`车站名称: ${station.name}<br>`,
|
||||
`车站公里标: ${station.kmRange} km <br>`,
|
||||
`到站时间: ${timeFormat(param.data[1] + this.PlanParser.getTranslation())} (${param.data[1]})<br>`
|
||||
].join('');
|
||||
}
|
||||
|
||||
},
|
||||
renderTripNumber(params) {
|
||||
const tripNumber = params.tripNumber; // 车次号
|
||||
const serviceNumber = params.serviceNumber; // 服务号
|
||||
let data, markPoint;
|
||||
if (tripNumber && this.seriesMap[serviceNumber]) {
|
||||
const temp = this.seriesMap[serviceNumber].data.filter(elem => elem[3] == tripNumber);
|
||||
if (temp.length) {
|
||||
data = temp;
|
||||
this.seriesMap[serviceNumber].markPoint.data.forEach(each=> {
|
||||
if (each.name == temp[0][4]) {
|
||||
markPoint = deepAssign({}, {data:[each]});
|
||||
markPoint.symbol = 'roundRect';
|
||||
markPoint.symbolSize = 1;
|
||||
markPoint.data[0].label.color = '#f00';
|
||||
}
|
||||
});
|
||||
}
|
||||
} else if (this.seriesMap[serviceNumber]) {
|
||||
markPoint = deepAssign({}, this.seriesMap[serviceNumber].markPoint);
|
||||
markPoint.data.forEach((each, index) => {
|
||||
if (each.symbol == 'circle') {
|
||||
markPoint.data.splice(index, 1);
|
||||
} else {
|
||||
each.label.color = '#f00';
|
||||
}
|
||||
});
|
||||
data = this.seriesMap[serviceNumber].data;
|
||||
}
|
||||
this.selectSeries = [{
|
||||
name: 'trainLabel',
|
||||
lineStyle: {
|
||||
color: '#f00',
|
||||
width: 2,
|
||||
type: 'solid'
|
||||
},
|
||||
z: 10,
|
||||
type: 'line',
|
||||
markPoint:markPoint,
|
||||
animation: false,
|
||||
data: data
|
||||
}];
|
||||
const series = [...this.staticSeries, ...this.runSeries, ...this.selectSeries];
|
||||
myChart && myChart.setOption({series: series});
|
||||
},
|
||||
mouseClick(params) {
|
||||
const model = {
|
||||
serviceNumber: params.seriesName
|
||||
};
|
||||
this.$store.dispatch('runPlan/setSelected', model);
|
||||
},
|
||||
reSize(opt) {
|
||||
if (myChart) {
|
||||
myChart.resize({
|
||||
width: opt.width,
|
||||
height: opt.height,
|
||||
silent: false
|
||||
});
|
||||
}
|
||||
},
|
||||
destroy() {
|
||||
if (myChart && myChart.isDisposed) {
|
||||
myChart.dispose();
|
||||
myChart = null;
|
||||
}
|
||||
},
|
||||
scheduleTouch() {
|
||||
|
||||
},
|
||||
trainNumTouch() {
|
||||
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style scoped rel="stylesheet/scss" lang="scss">
|
||||
@import "src/styles/mixin.scss";
|
||||
|
||||
#PlanSchedule {
|
||||
z-index: 5;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
|
||||
.left {
|
||||
height: 100%;
|
||||
width: 85%;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.right {
|
||||
height: 100%;
|
||||
width: 15%;
|
||||
float: right;
|
||||
}
|
||||
}
|
||||
|
||||
/deep/ {
|
||||
.el-dialog {
|
||||
height: 100%;
|
||||
max-height: 1080px;
|
||||
}
|
||||
.el-dialog__body {
|
||||
padding: 0px !important;
|
||||
background-color: floralwhite !important;
|
||||
}
|
||||
.el-dialog__headerbtn .el-dialog__close {
|
||||
font-size: 18px;
|
||||
border: 1px solid #909399;
|
||||
border-radius: 5px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,659 +0,0 @@
|
||||
<template>
|
||||
<div v-loading="dialogLoading" style="width: 100%;height: 100%;">
|
||||
<div style="text-align: center;font-size: 20px;padding-top: 10px;">{{ title }}</div>
|
||||
<div id="PlanSchedule" :style="{top: top+'px', height: height+'px'}">
|
||||
<div class="left">
|
||||
<div :id="runPlanId" />
|
||||
</div>
|
||||
<div class="right">
|
||||
<data-table
|
||||
ref="serviceTable1"
|
||||
:height="height/2 - 15"
|
||||
:config="serviceNumberConfig"
|
||||
:style="{top: top-height/2+'px'}"
|
||||
@touch="scheduleTouch"
|
||||
/>
|
||||
<data-table
|
||||
ref="tripTable1"
|
||||
:height="height/2 -15"
|
||||
:config="tripNumberConfig"
|
||||
:style="{top: top-height/2+'px'}"
|
||||
@touch="trainNumTouch"
|
||||
/>
|
||||
<div style="width: 100%;height: 30px;">
|
||||
<el-button style="float: right;" type="primary" size="mini" @click="quit">退出</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapGetters } from 'vuex';
|
||||
import { timeFormat } from '@/utils/date';
|
||||
import DataTable from '@/views/planSchedule/menusPlan/components/dataTable';
|
||||
import echarts from 'echarts';
|
||||
import {toTimeStamp, formatDuring} from '@/utils/date';
|
||||
import { deepAssign } from '@/utils/index';
|
||||
import { EventBus } from '@/scripts/event-bus';
|
||||
import { creatSubscribe, clearSubscribe, displayTopic} from '@/utils/stomp';
|
||||
import { getToken } from '@/utils/auth';
|
||||
import { getByGroupStationList } from '@/api/jmap/map';
|
||||
import { loadRunPlanData } from '@/utils/loaddata';
|
||||
import { getSimulationInfoNew } from '@/api/simulation';
|
||||
|
||||
export default {
|
||||
name: 'PlanSchedule',
|
||||
components: {
|
||||
DataTable
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
top: 0,
|
||||
height: 0,
|
||||
inter:null,
|
||||
runPlanId: 'run-plan-view',
|
||||
myChart: null,
|
||||
PlanParser: {},
|
||||
dialogLoading: false,
|
||||
serviceNumberConfig: {
|
||||
data: [],
|
||||
highlightCurrentRow: true,
|
||||
handleChange: this.serviceNumberChange,
|
||||
showClose: false,
|
||||
columns: [
|
||||
{
|
||||
prop: 'serviceNumber',
|
||||
label: '表号'
|
||||
},
|
||||
{
|
||||
width: 40
|
||||
}
|
||||
]
|
||||
},
|
||||
tripNumberConfig: {
|
||||
data: [],
|
||||
highlightCurrentRow: true,
|
||||
handleChange: this.tripNumberChange,
|
||||
showClose: false,
|
||||
columns: [
|
||||
{
|
||||
prop: 'tripNumber',
|
||||
label: '车次号'
|
||||
},
|
||||
{
|
||||
width: 40
|
||||
}
|
||||
]
|
||||
},
|
||||
realData: {},
|
||||
kmRangeMap: {},
|
||||
absoluteTime: 2 * 3600,
|
||||
indexKmRangeMap: {},
|
||||
seriesMap: {},
|
||||
staticSeries: [],
|
||||
runSeries: [],
|
||||
selectSeries: [],
|
||||
runPlanData: {}
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapGetters('runPlan', [
|
||||
'stations'
|
||||
]),
|
||||
group() {
|
||||
return this.$route.query.group;
|
||||
},
|
||||
maxWidth() {
|
||||
return this.$store.state.app.width > 1920 ? 1920 : this.$store.state.app.width;
|
||||
},
|
||||
maxHeight() {
|
||||
return this.$store.state.app.height > 1080 ? 1080 : this.$store.state.app.height;
|
||||
},
|
||||
title() {
|
||||
return this.$t('display.runPlan.previewRunDiagram');
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
maxWidth() {
|
||||
this.setPosition();
|
||||
},
|
||||
maxHeight() {
|
||||
this.setPosition();
|
||||
},
|
||||
'$store.state.runPlan.planLoadedCount': async function () {
|
||||
try {
|
||||
await this.loadChartPage();
|
||||
this.selectSeries = []; this.runSeries = []; this.runPlanData = {};
|
||||
await this.loadInitData();
|
||||
} catch (e) {
|
||||
console.error(e);
|
||||
} finally {
|
||||
this.loading = false;
|
||||
}
|
||||
},
|
||||
'$store.state.socket.simulationReset': function (val) {
|
||||
this.selectSeries = []; this.runSeries = []; this.runPlanData = {};
|
||||
this.loadInitData();
|
||||
},
|
||||
'$store.state.runPlan.planSizeCount': function () {
|
||||
this.reSize({ width: this.$store.state.runPlan.width, height: this.$store.state.runPlan.height });
|
||||
},
|
||||
'$store.state.socket.trainStationList': function (val) {
|
||||
if (val.length) {
|
||||
this.updateRunPlanData(val);
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.dialogLoading = true;
|
||||
getSimulationInfoNew(this.group).then(res => {
|
||||
this.$store.dispatch('runPlan/setRunPlanInfo', res.data.runPlan);
|
||||
getByGroupStationList(this.group).then(response => {
|
||||
this.$store.dispatch('runPlan/setStations', response.data).then(() => {
|
||||
loadRunPlanData(this.group, this.dataError);
|
||||
this.staticSeries = []; this.selectSeries = []; this.runSeries = []; this.runPlanData = {};
|
||||
this.PlanParser = this.$theme.loadPlanParser(this.$route.query.lineCode);
|
||||
this.loadChartPage();
|
||||
EventBus.$on('clearRunSeries', () => {
|
||||
this.runSeries = [];
|
||||
});
|
||||
this.doShow();
|
||||
});
|
||||
}).catch(() => {
|
||||
this.$messageBox(this.$t('display.schema.getStationListFail'));
|
||||
});
|
||||
});
|
||||
},
|
||||
beforeDestroy() {
|
||||
this.$store.dispatch('runPlan/setSelected', null);
|
||||
this.destroy();
|
||||
this.clearSubscribe();
|
||||
},
|
||||
methods: {
|
||||
async doShow() {
|
||||
try {
|
||||
await this.setPosition();
|
||||
await this.loadInitData();
|
||||
this.inter && clearInterval(this.inter);
|
||||
await this.subscribe();
|
||||
} catch (e) {
|
||||
console.error(e);
|
||||
} finally {
|
||||
this.dialogLoading = false;
|
||||
}
|
||||
},
|
||||
async doClose() {
|
||||
this.inter && clearInterval(this.inter);
|
||||
},
|
||||
serviceNumberChange(row) {
|
||||
if (row) {
|
||||
this.$store.dispatch('runPlan/setSelected', { serviceNumber: row.serviceNumber, tripNumber: null });
|
||||
this.renderTripNumber({ serviceNumber: row.serviceNumber, tripNumber: null });
|
||||
const serviceObj = this.$store.state.runPlan.editData[row.serviceNumber];
|
||||
if (serviceObj) {
|
||||
this.analyticalTripNumber(serviceObj.trainMap);
|
||||
}
|
||||
}
|
||||
},
|
||||
tripNumberChange(row) {
|
||||
if (row) {
|
||||
this.$store.dispatch('runPlan/setSelected', { serviceNumber: this.$store.state.runPlan.selected.serviceNumber, tripNumber: row.tripNumber });
|
||||
this.renderTripNumber({ serviceNumber: this.$store.state.runPlan.selected.serviceNumber, tripNumber: row.tripNumber });
|
||||
}
|
||||
},
|
||||
async analyticalServiceNumber(data) {
|
||||
this.serviceNumberConfig.data = Object.keys(data || {})
|
||||
.sort((a, b) => { return parseInt(data[a].serviceNumber) - parseInt(data[b].serviceNumber); })
|
||||
.map(serviceNumber => { return { serviceNumber }; });
|
||||
},
|
||||
async analyticalTripNumber(data) {
|
||||
this.tripNumberConfig.data = Object.keys(data || {})
|
||||
.sort((a, b) => { return data[a].tripNumber - data[b].tripNumber; })
|
||||
.map(tripNumber => { return { tripNumber }; });
|
||||
},
|
||||
async setPosition() {
|
||||
this.$nextTick(() => {
|
||||
const top = 54;
|
||||
const width = this.maxWidth * 0.85;
|
||||
let height = this.maxHeight;
|
||||
|
||||
height = height - top;
|
||||
this.$store.dispatch('runPlan/resize', { width, height });
|
||||
|
||||
if (this.top != top) {
|
||||
this.top = top;
|
||||
}
|
||||
|
||||
if (this.height != height) {
|
||||
this.height = height - top;
|
||||
}
|
||||
});
|
||||
},
|
||||
updateRunPlanData(data) {
|
||||
const stations = this.$store.state.runPlan.stations;
|
||||
data.forEach(item => {
|
||||
item.secondTime = item.second;
|
||||
});
|
||||
this.kmRangeMap = this.PlanParser.convertStationsToMap(stations);
|
||||
this.runSeries = this.PlanParser.updateDataToModels(data, stations, this.kmRangeMap,
|
||||
this.runPlanData, this.runSeries, { color: '#FF00DE', width: 2 }
|
||||
);
|
||||
const series = [...this.staticSeries, ...this.runSeries, ... this.selectSeries];
|
||||
this.myChart && this.myChart.setOption({series: series});
|
||||
},
|
||||
async loadChartPage() {
|
||||
try {
|
||||
this.seriesMap = {};
|
||||
this.staticSeries = [];
|
||||
const stations = this.$store.state.runPlan.stations;
|
||||
const planData = this.$store.state.runPlan.planData;
|
||||
this.kmRangeMap = this.PlanParser.convertStationsToMap(stations);
|
||||
if (this.$route.query.lineCode === '07') {
|
||||
this.pushModels(this.staticSeries, [this.PlanParser.initializeAxisX(stations)]);
|
||||
} else {
|
||||
this.pushModels(this.staticSeries, [this.PlanParser.initializeAxisY(stations)]);
|
||||
}
|
||||
this.staticSeries = this.pushModels(this.staticSeries, this.PlanParser.convertDataToModels(planData, stations, this.kmRangeMap, { color: '#000', width: 0.5 }));
|
||||
this.staticSeries.forEach(item => {
|
||||
this.seriesMap[item.name] = item;
|
||||
});
|
||||
await this.analyticalServiceNumber(this.$store.state.runPlan.editData);
|
||||
} catch (error) {
|
||||
this.$messageBox(`加载运行图数据失败`);
|
||||
}
|
||||
},
|
||||
|
||||
async loadInitData() {
|
||||
this.myChart && this.myChart.showLoading();
|
||||
const option = {
|
||||
tooltip: {
|
||||
axisPointer: {
|
||||
trigger: 'item',
|
||||
type: 'cross'
|
||||
},
|
||||
formatter: this.axisTooltip,
|
||||
borderWidth: 1
|
||||
},
|
||||
grid: {
|
||||
right: '40px',
|
||||
left: '120px',
|
||||
height: '85%'
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
type: 'category',
|
||||
data: [],
|
||||
axisLine: {
|
||||
onZero: false,
|
||||
lineStyle: {
|
||||
width: 2,
|
||||
color: '#d14a61'
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
formatter: this.xAxisLableFormat,
|
||||
textStyle: {
|
||||
color: '#333'
|
||||
}
|
||||
},
|
||||
axisPointer: {
|
||||
snap: true,
|
||||
label: {
|
||||
formatter: this.xAxisPointFormat,
|
||||
backgroundColor: 'rgb(255,0,0,0.5)',
|
||||
color: 'white'
|
||||
}
|
||||
}
|
||||
}
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
type: 'value',
|
||||
yAxisIndex: 0,
|
||||
splitLine: {
|
||||
show: false
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
axisLine: {
|
||||
onZero: false,
|
||||
lineStyle: {
|
||||
width: 2,
|
||||
color: '#d14a61'
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
interval: 'auto',
|
||||
formatter: this.yAxisLableFormat
|
||||
},
|
||||
axisPointer: {
|
||||
xAxisIndex: 'all',
|
||||
label: {
|
||||
formatter: this.yAxisPointFormat,
|
||||
backgroundColor: 'rgb(0,100,0,0.5)',
|
||||
color: 'white'
|
||||
}
|
||||
}
|
||||
}
|
||||
],
|
||||
dataZoom: [{
|
||||
type: 'inside'
|
||||
},
|
||||
{
|
||||
fiterMode: 'filter',
|
||||
handleIcon: 'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
|
||||
handleSize: '80%',
|
||||
handleStyle: {
|
||||
color: '#fff',
|
||||
shadowBlur: 3,
|
||||
shadowColor: 'rgba(0, 0, 0, 0.6)',
|
||||
shadowOffsetX: 2,
|
||||
shadowOffsetY: 2
|
||||
},
|
||||
bottom: '20px'
|
||||
}],
|
||||
series: [
|
||||
|
||||
]
|
||||
};
|
||||
const hebXAxis = {
|
||||
type: 'value',
|
||||
splitLine: {
|
||||
show: false
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
axisLine: {
|
||||
onZero: false,
|
||||
lineStyle: {
|
||||
width: 2,
|
||||
color: '#d14a61'
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
interval: 'auto',
|
||||
formatter: this.yAxisLableFormat
|
||||
},
|
||||
axisPointer: {
|
||||
xAxisIndex: 'all',
|
||||
label: {
|
||||
formatter: this.yAxisPointFormat,
|
||||
backgroundColor: 'rgb(0,100,0,0.5)',
|
||||
color: 'white'
|
||||
}
|
||||
},
|
||||
min: 0,
|
||||
max: 0
|
||||
};
|
||||
const hebYAxis = [
|
||||
{
|
||||
type: 'category',
|
||||
boundaryGap: false,
|
||||
data: [],
|
||||
axisLine: {
|
||||
onZero: false,
|
||||
lineStyle: {
|
||||
width: 2,
|
||||
color: '#d14a61'
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
formatter: this.xAxisLableFormat,
|
||||
textStyle: {
|
||||
color: '#333'
|
||||
}
|
||||
},
|
||||
axisPointer: {
|
||||
snap: true,
|
||||
label: {
|
||||
formatter: this.xAxisPointFormat,
|
||||
backgroundColor: 'rgb(255,0,0,0.5)',
|
||||
color: 'white'
|
||||
}
|
||||
}
|
||||
}
|
||||
];
|
||||
const hebDataZoom = [
|
||||
{
|
||||
type: 'inside',
|
||||
yAxisIndex: 0
|
||||
},
|
||||
{
|
||||
fiterMode: 'filter',
|
||||
handleIcon: 'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
|
||||
handleSize: '80%',
|
||||
yAxisIndex: 0,
|
||||
handleStyle: {
|
||||
color: '#fff',
|
||||
shadowBlur: 3,
|
||||
shadowColor: 'rgba(0, 0, 0, 0.6)',
|
||||
shadowOffsetX: 2,
|
||||
shadowOffsetY: 2
|
||||
},
|
||||
left: '20px'
|
||||
}
|
||||
];
|
||||
if (this.$route.query.lineCode === '07') {
|
||||
option.xAxis = hebXAxis;
|
||||
option.yAxis = hebYAxis;
|
||||
option.dataZoom = hebDataZoom;
|
||||
}
|
||||
await this.xAxisInit(option);
|
||||
await this.yAxisInit(option);
|
||||
await this.loadInitChart(option);
|
||||
this.myChart && this.myChart.hideLoading();
|
||||
},
|
||||
pushModels(series, models) {
|
||||
if (models && models.length) {
|
||||
models.forEach(elem => {
|
||||
if (elem) {
|
||||
series.push(elem);
|
||||
}
|
||||
});
|
||||
}
|
||||
return series;
|
||||
},
|
||||
loadInitChart(option) {
|
||||
return new Promise((resolve, reject) => {
|
||||
try {
|
||||
this.destroy();
|
||||
let startValue = 3600 + this.PlanParser.getTranslation();
|
||||
const offsetTime = 3600;
|
||||
const initTime = toTimeStamp(formatDuring(parseInt(this.$route.query.initTime)));
|
||||
startValue = initTime - this.PlanParser.getTranslation();
|
||||
option.dataZoom[0].startValue = option.dataZoom[1].startValue = startValue - offsetTime;
|
||||
option.dataZoom[0].endValue = option.dataZoom[1].endValue = startValue + offsetTime;
|
||||
option.series = [...this.staticSeries, ...this.runSeries, ...this.selectSeries];
|
||||
this.myChart = echarts.init(document.getElementById(this.runPlanId));
|
||||
if (this.myChart) {
|
||||
this.myChart.setOption(option);
|
||||
this.reSize({ width: this.$store.state.runPlan.width, height: this.$store.state.runPlan.height });
|
||||
this.myChart.on('click', this.mouseClick);
|
||||
}
|
||||
resolve(true);
|
||||
} catch (error) {
|
||||
reject(error);
|
||||
}
|
||||
});
|
||||
},
|
||||
xAxisPointFormat(params) {
|
||||
return timeFormat(params.value);
|
||||
},
|
||||
yAxisPointFormat(params) {
|
||||
return this.PlanParser.computedFormatAxisY(this.stations, params);
|
||||
},
|
||||
xAxisLableFormat(value, index) {
|
||||
return timeFormat(value);
|
||||
},
|
||||
yAxisLableFormat(value, index) {
|
||||
return '';
|
||||
},
|
||||
xAxisInit(option) {
|
||||
const list = [];
|
||||
for (var time = 0 + this.PlanParser.getTranslation(); time < 3600 * 24 + this.PlanParser.getTranslation(); time++) {
|
||||
list.push(time);
|
||||
}
|
||||
const startValue = 3600 * 6;
|
||||
const offsetTime = 3600 * 1;
|
||||
|
||||
if (this.$route.query.lineCode === '07') {
|
||||
option.yAxis[0].data = list;
|
||||
} else {
|
||||
option.xAxis[0].data = list;
|
||||
}
|
||||
if (!option.dataZoom[0].startValue) {
|
||||
option.dataZoom[0].startValue = option.dataZoom[1].startValue = startValue - offsetTime;
|
||||
}
|
||||
|
||||
if (!option.dataZoom[0].endValue) {
|
||||
option.dataZoom[0].endValue = option.dataZoom[1].endValue = startValue + offsetTime;
|
||||
}
|
||||
},
|
||||
yAxisInit(option) {
|
||||
if (Object.keys(this.PlanParser).length && this.$route.query.lineCode !== '07') {
|
||||
option.yAxis.min = this.PlanParser.computedAxisYMinValue(this.stations);
|
||||
option.yAxis.max = this.PlanParser.computedAxisYMaxValue(this.stations);
|
||||
} else if (Object.keys(this.PlanParser).length && this.$route.query.lineCode === '07') {
|
||||
option.xAxis.min = this.PlanParser.computedAxisXMinValue(this.stations);
|
||||
option.xAxis.max = this.PlanParser.computedAxisXMaxValue(this.stations);
|
||||
}
|
||||
},
|
||||
axisTooltip(param) {
|
||||
const station = (this.$store.getters['map/getDeviceByCode'](param.data[2])) || { name: '', kmRange: '' };
|
||||
if (this.$route.query.lineCode !== '07') {
|
||||
return [
|
||||
`Point Data <hr size=1 style=" margin: 3px 0">`,
|
||||
`车站名称: ${station.name}<br>`,
|
||||
`车站公里标: ${station.kmRange} km <br>`,
|
||||
`到站时间: ${timeFormat(param.data[0] + this.PlanParser.getTranslation())} (${param.data[0]})<br>`
|
||||
].join('');
|
||||
} else {
|
||||
return [
|
||||
`Point Data <hr size=1 style=" margin: 3px 0">`,
|
||||
`车站名称: ${station.name}<br>`,
|
||||
`车站公里标: ${station.kmRange} km <br>`,
|
||||
`到站时间: ${timeFormat(param.data[1] + this.PlanParser.getTranslation())} (${param.data[1]})<br>`
|
||||
].join('');
|
||||
}
|
||||
},
|
||||
renderTripNumber(params) {
|
||||
const tripNumber = params.tripNumber; // 车次号
|
||||
const serviceNumber = params.serviceNumber; // 服务号
|
||||
let data, markPoint;
|
||||
if (tripNumber && this.seriesMap[serviceNumber]) {
|
||||
const temp = this.seriesMap[serviceNumber].data.filter(elem => elem[3] == tripNumber);
|
||||
if (temp.length) {
|
||||
data = temp;
|
||||
this.seriesMap[serviceNumber].markPoint.data.forEach(each=> {
|
||||
if (each.name == temp[0][4]) {
|
||||
markPoint = deepAssign({}, {data:[each]});
|
||||
markPoint.symbol = 'roundRect';
|
||||
markPoint.symbolSize = 1;
|
||||
markPoint.data[0].label.color = '#f00';
|
||||
}
|
||||
});
|
||||
}
|
||||
} else if (this.seriesMap[serviceNumber]) {
|
||||
markPoint = deepAssign({}, this.seriesMap[serviceNumber].markPoint);
|
||||
markPoint.data.forEach(each => {
|
||||
each.label.color = '#f00';
|
||||
});
|
||||
data = this.seriesMap[serviceNumber].data;
|
||||
}
|
||||
this.selectSeries = [{
|
||||
name: 'trainLabel',
|
||||
lineStyle: {
|
||||
color: '#f00',
|
||||
width: 2,
|
||||
type: 'solid'
|
||||
},
|
||||
z: 10,
|
||||
type: 'line',
|
||||
markPoint:markPoint,
|
||||
animation: false,
|
||||
data: data
|
||||
}];
|
||||
const series = [...this.staticSeries, ...this.runSeries, ...this.selectSeries];
|
||||
this.myChart && this.myChart.setOption({series: series});
|
||||
},
|
||||
mouseClick(params) {
|
||||
const model = {
|
||||
serviceNumber: params.seriesName
|
||||
};
|
||||
this.$store.dispatch('runPlan/setSelected', model);
|
||||
},
|
||||
reSize(opt) {
|
||||
if (this.myChart) {
|
||||
this.myChart.resize({
|
||||
width: opt.width,
|
||||
height: opt.height,
|
||||
silent: false
|
||||
});
|
||||
}
|
||||
},
|
||||
destroy() {
|
||||
if (this.myChart && this.myChart.isDisposed) {
|
||||
this.myChart.dispose();
|
||||
this.myChart = null;
|
||||
}
|
||||
},
|
||||
async subscribe() {
|
||||
this.clearSubscribe();
|
||||
const header = { group: this.group || '', 'X-Token': getToken() };
|
||||
creatSubscribe(`${displayTopic}\/${this.group}`, header);
|
||||
},
|
||||
clearSubscribe() {
|
||||
clearSubscribe(`${displayTopic}\/${this.group}`);
|
||||
},
|
||||
quit() {
|
||||
window.close();
|
||||
},
|
||||
scheduleTouch() {
|
||||
|
||||
},
|
||||
trainNumTouch() {
|
||||
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style scoped rel="stylesheet/scss" lang="scss">
|
||||
@import "src/styles/mixin.scss";
|
||||
|
||||
#PlanSchedule {
|
||||
z-index: 5;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
|
||||
.left {
|
||||
height: 100%;
|
||||
width: 85%;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.right {
|
||||
height: 100%;
|
||||
width: 15%;
|
||||
float: right;
|
||||
}
|
||||
}
|
||||
|
||||
/deep/ {
|
||||
.el-dialog {
|
||||
height: 100%;
|
||||
max-height: 1080px;
|
||||
}
|
||||
.el-dialog__body {
|
||||
padding: 0px !important;
|
||||
background-color: floralwhite !important;
|
||||
}
|
||||
.el-dialog__headerbtn .el-dialog__close {
|
||||
font-size: 18px;
|
||||
border: 1px solid #909399;
|
||||
border-radius: 5px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,356 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-dialog
|
||||
v-dialogDrag
|
||||
:title="title"
|
||||
:visible.sync="show"
|
||||
top="50px"
|
||||
width="95%"
|
||||
:before-do-close="doClose"
|
||||
:close-on-click-modal="false"
|
||||
:z-index="2000"
|
||||
>
|
||||
<div class="scheduling">
|
||||
<el-card class="scheduling_header">
|
||||
<el-form>
|
||||
<el-row>
|
||||
<el-col :span="6">
|
||||
<el-form-item :label="$t('display.schedule.scheduleSelect')">
|
||||
<el-date-picker
|
||||
v-model="formModel.planDate"
|
||||
clearable
|
||||
size="small"
|
||||
type="date"
|
||||
value-format="yyyy-MM-dd"
|
||||
:picker-options="pickerOptions"
|
||||
@change="handleQuery"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item :label="$t('display.schedule.runDiagramName')">
|
||||
<!--<el-select v-model="formModel.runPlanName" size="small" style="display: inline-block">-->
|
||||
<!--<el-option-->
|
||||
<!--v-for="item in runPlanList"-->
|
||||
<!--:key="item.value"-->
|
||||
<!--:label="item.label"-->
|
||||
<!--:value="item.value"-->
|
||||
<!--/>-->
|
||||
<!--</el-select>-->
|
||||
<el-input v-model="formModel.runPlanName" size="small" style="width:140px;" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-form-item style="text-align: right">
|
||||
<el-button-group>
|
||||
<el-button size="small" type="primary" @click="handleSave">{{ $t('display.schedule.save') }}</el-button>
|
||||
</el-button-group>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
</el-card>
|
||||
<div class="scheduling_body">
|
||||
<div class="scheduling_body-table">
|
||||
<edit-table ref="table" v-loading="loading" border stripe :table-data="tableData" :table-form="tableForm" :row-style="handleRowStyle" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { querySechedulingNew, generateSchedulingNew, saveSchedulingNew } from '@/api/scheduling';
|
||||
import { hexColor } from '@/jmapNew/theme/parser/util';
|
||||
import EditTable from '@/views/components/editTable/index';
|
||||
|
||||
// 排班计划弹窗列表
|
||||
export default {
|
||||
name: 'Scheduling',
|
||||
components: {
|
||||
EditTable
|
||||
},
|
||||
props: {
|
||||
group: {
|
||||
type: String,
|
||||
required: true
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
show: false,
|
||||
loading: false,
|
||||
runPlanList: [],
|
||||
groupNumberList: [],
|
||||
pickerOptions: {
|
||||
disabledDate(time) {
|
||||
return time.getTime() < Date.now() - 24 * 3600 * 1000;
|
||||
}
|
||||
},
|
||||
formModel: {
|
||||
id: '',
|
||||
mode: '',
|
||||
planDate: '',
|
||||
runPlanName: ''
|
||||
},
|
||||
tableForm: {
|
||||
index: true,
|
||||
columns: [
|
||||
// {
|
||||
// title: this.$t('display.schedule.driverNumber'),
|
||||
// prop: 'driverCode',
|
||||
// type: 'text'
|
||||
// },
|
||||
{
|
||||
title: this.$t('display.schedule.trainNumber'),
|
||||
prop: 'groupNumber',
|
||||
type: 'select',
|
||||
width: '150',
|
||||
options: () => { return this.groupNumberList; },
|
||||
editable: true,
|
||||
editing: true
|
||||
},
|
||||
{
|
||||
title: this.$t('display.schedule.onlineSection'),
|
||||
prop: 'outDepotTrip.outDepotSectionCode',
|
||||
type: 'text',
|
||||
format: (row) => { return this.handleDeviceName(row.outDepotTrip.outDepotSectionCode); }
|
||||
},
|
||||
{
|
||||
title: this.$t('display.schedule.onlineServerNumber'),
|
||||
prop: 'outDepotTrip.serviceNumber',
|
||||
type: 'text',
|
||||
format: (row) => { return row.outDepotTrip.serviceNumber; }
|
||||
},
|
||||
{
|
||||
title: this.$t('display.schedule.onlineTargetNumber'),
|
||||
prop: 'outDepotTrip.destinationCode',
|
||||
type: 'text',
|
||||
format: (row) => { return row.outDepotTrip.destinationCode; }
|
||||
},
|
||||
{
|
||||
title: this.$t('display.schedule.onlineTime'),
|
||||
prop: 'outDepotTrip.outDepotTime',
|
||||
type: 'text',
|
||||
format: (row) => { return row.outDepotTrip.outDepotTime; }
|
||||
},
|
||||
{
|
||||
title: this.$t('display.schedule.onlineTripNumber'),
|
||||
prop: 'outDepotTrip.tripNumber',
|
||||
type: 'text',
|
||||
format: (row) => { return row.outDepotTrip.tripNumber; }
|
||||
},
|
||||
{
|
||||
title: this.$t('display.schedule.outDepot'),
|
||||
prop: 'outDepotTrip.outDepotCode',
|
||||
type: 'text',
|
||||
format: (row) => { return this.handleDeviceName(row.outDepotTrip.outDepotCode); }
|
||||
},
|
||||
{
|
||||
title: this.$t('display.schedule.outDepotStatus'),
|
||||
prop: 'outDepotTrip.status',
|
||||
type: 'tag',
|
||||
columnValue: (row) => { return this.$ConstSelect.translate(row.outDepotTrip.status, 'Whether'); },
|
||||
tagType: (row) => {
|
||||
switch (row.outDepotTrip.status) {
|
||||
case true: return 'success';
|
||||
case false: return 'danger';
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
title: this.$t('display.schedule.offlineSection'),
|
||||
prop: 'offlineSection',
|
||||
type: 'text',
|
||||
format: (row) => { return this.handleDeviceName(row.inDepotTrip.inDepotSectionCode); }
|
||||
},
|
||||
{
|
||||
title: this.$t('display.schedule.offlineServerNumber'),
|
||||
prop: 'offlineServerNumber',
|
||||
type: 'text',
|
||||
format: (row) => { return row.inDepotTrip.serviceNumber; }
|
||||
},
|
||||
{
|
||||
title: this.$t('display.schedule.offlineTargetNumber'),
|
||||
prop: 'offlineTargetNumber',
|
||||
type: 'text',
|
||||
format: (row) => { return row.inDepotTrip.destinationCode; }
|
||||
},
|
||||
{
|
||||
title: this.$t('display.schedule.offlineTime'),
|
||||
prop: 'offlineTime',
|
||||
type: 'text',
|
||||
format: (row) => { return row.inDepotTrip.inDepotTime; }
|
||||
},
|
||||
{
|
||||
title: this.$t('display.schedule.offlineTripNumber'),
|
||||
prop: 'offlineTripNumber',
|
||||
type: 'text',
|
||||
format: (row) => { return row.inDepotTrip.tripNumber; }
|
||||
},
|
||||
{
|
||||
title: this.$t('display.schedule.inDepot'),
|
||||
prop: 'inDepot',
|
||||
type: 'text',
|
||||
format: (row) => { return this.handleDeviceName(row.inDepotTrip.inDepotCode); }
|
||||
},
|
||||
{
|
||||
title: this.$t('display.schedule.inDepotStatus'),
|
||||
prop: 'inStatus',
|
||||
type: 'tag',
|
||||
columnValue: (row) => { return this.$ConstSelect.translate(row.inDepotTrip.status, 'Whether'); },
|
||||
tagType: (row) => {
|
||||
switch (row.inDepotTrip.status) {
|
||||
case true: return 'success';
|
||||
case false: return 'danger';
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
tableData: []
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
title() {
|
||||
return this.$t('display.schedule.schedulePlan');
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
'$store.state.map.mapDataLoadedCount': function () {
|
||||
const trainList = this.$store.state.map.map.trainList || [];
|
||||
this.groupNumberList = [];
|
||||
trainList.forEach(item => {
|
||||
this.groupNumberList.push({value: item.code, label: item.groupNumber});
|
||||
});
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
doShow() {
|
||||
this.formModel.day = '';
|
||||
this.show = true;
|
||||
},
|
||||
doClose() {
|
||||
this.show = false;
|
||||
},
|
||||
handleQuery(day) {
|
||||
if (day) {
|
||||
this.loading = true;
|
||||
querySechedulingNew(this.group, {day}).then(resp => {
|
||||
if (!resp.data) {
|
||||
this.$confirm(this.$t('display.schedule.noSchedulePlan'), this.$t('global.tips'), {
|
||||
confirmButtonText: this.$t('global.confirm'),
|
||||
cancelButtonText: this.$t('global.cancel'),
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
this.handleGenerate(day);
|
||||
}).catch(() => {
|
||||
this.clearData();
|
||||
this.loading = false;
|
||||
});
|
||||
} else {
|
||||
this.tableData = this.initTableData(resp.data.planList || []);
|
||||
this.formModel.id = resp.data.id;
|
||||
this.formModel.planDate = resp.data.planDate;
|
||||
this.formModel.runPlanName = resp.data.runPlanName;
|
||||
this.$message.success(`${this.$t('display.schedule.loadData')} ${day} ${this.$t('display.schedule.schedulePlanSuccess')}`);
|
||||
this.loading = false;
|
||||
}
|
||||
}).catch(error => {
|
||||
this.clearData();
|
||||
this.$messageBox(`${error.message}`);
|
||||
this.loading = false;
|
||||
});
|
||||
}
|
||||
},
|
||||
handleGenerate(day) {
|
||||
generateSchedulingNew(this.group, {day}).then(resp => {
|
||||
this.loading = false;
|
||||
this.tableData = this.initTableData(resp.data.planList || []);
|
||||
this.formModel.id = resp.data.id;
|
||||
// this.formModel.planDate = resp.data.planDate;
|
||||
this.formModel.runPlanName = resp.data.runPlanName;
|
||||
this.$message.success(this.$t('display.schedule.createSchedulePlanSuccess'));
|
||||
}).catch(error => {
|
||||
this.loading = false;
|
||||
this.clearData();
|
||||
this.$messageBox(`${error.message}`);
|
||||
});
|
||||
},
|
||||
handleSave() {
|
||||
if (this.formModel.planDate) {
|
||||
saveSchedulingNew(this.group, this.tableData).then(resp => {
|
||||
if (resp.data && !resp.data.pass) {
|
||||
this.setConflictList(resp.data.conflictList);
|
||||
this.$message.warning(this.$t('display.schedule.checkFailed'));
|
||||
} else {
|
||||
this.setConflictList([]);
|
||||
this.$message.success(this.$t('display.schedule.saveSchedulePlanSuccess'));
|
||||
}
|
||||
}).catch(() => {
|
||||
this.$messageBox(this.$t('display.schedule.saveSchedulePlanFail'));
|
||||
});
|
||||
} else {
|
||||
this.$messageBox(this.$t('display.schedule.selectSchedulePlan'));
|
||||
}
|
||||
|
||||
},
|
||||
handleRowStyle({row, rowIndex}) {
|
||||
return row['$conflict'] ? {background: row.$conflict} : {background: '#FFF'};
|
||||
},
|
||||
setConflictList(list) {
|
||||
this.tableData.forEach(elem => { elem['$conflict'] = null; });
|
||||
if (list && list.length) {
|
||||
list.forEach(idList => {
|
||||
const color = hexColor.colorRandom();
|
||||
this.tableData.forEach(elem => {
|
||||
if (idList.includes(parseInt(elem.id))) {
|
||||
elem['$conflict'] = color;
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
this.tableData = [...this.tableData];
|
||||
},
|
||||
initTableData(tableData) {
|
||||
tableData.forEach(elem => {
|
||||
this.$set(elem, '$conflict', null);
|
||||
});
|
||||
|
||||
return tableData;
|
||||
},
|
||||
clearData() {
|
||||
this.formModel.planDate = '';
|
||||
this.tableData = [];
|
||||
},
|
||||
handleDeviceName(code) {
|
||||
const device = this.$store.getters['map/getDeviceByCode'](code) || {};
|
||||
return device.name;
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style scoped rel="stylesheet/scss" lang="scss">
|
||||
.scheduling {
|
||||
&_header {
|
||||
background: #fff;
|
||||
padding: 30px 30px 0;
|
||||
}
|
||||
&_body {
|
||||
margin-top: 30px;
|
||||
background: #ffff;
|
||||
border: 1px solid #F1F1F1;
|
||||
width: 100%;
|
||||
overflow: auto;
|
||||
}
|
||||
}
|
||||
|
||||
/deep/ .el-dialog__body {
|
||||
background: #fafafa;
|
||||
}
|
||||
|
||||
/deep/ label {
|
||||
font-weight: 0;
|
||||
}
|
||||
</style>
|
||||
@ -1,254 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-dialog
|
||||
v-dialogDrag
|
||||
:title="title"
|
||||
:visible.sync="show"
|
||||
top="50px"
|
||||
width="95%"
|
||||
:before-do-close="doClose"
|
||||
:close-on-click-modal="false"
|
||||
:z-index="2000"
|
||||
>
|
||||
<div class="scheduling">
|
||||
<div class="scheduling_body">
|
||||
<div class="scheduling_body-table">
|
||||
<edit-table ref="table" v-loading="loading" border stripe :table-data="tableData" :table-form="tableForm" :row-style="handleRowStyle" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { queryCurrentSecheduling } from '@/api/scheduling';
|
||||
import { hexColor } from '@/jmapNew/theme/parser/util';
|
||||
import EditTable from '@/views/components/editTable/index';
|
||||
|
||||
// 排班计划弹窗列表
|
||||
export default {
|
||||
name: 'AddQuest',
|
||||
components: {
|
||||
EditTable
|
||||
},
|
||||
props: {
|
||||
group: {
|
||||
type: String,
|
||||
required: true
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
show: false,
|
||||
loading: false,
|
||||
runPlanList: [],
|
||||
groupNumberList: [],
|
||||
tableForm: {
|
||||
index: true,
|
||||
columns: [
|
||||
// {
|
||||
// title: this.$t('display.schedule.driverNumber'),
|
||||
// prop: 'driverCode',
|
||||
// type: 'text'
|
||||
// },
|
||||
{
|
||||
title: this.$t('display.schedule.trainNumber'),
|
||||
prop: 'groupNumber',
|
||||
type: 'select',
|
||||
width: '150',
|
||||
options: () => { return this.groupNumberList; },
|
||||
editable: false,
|
||||
editing: false
|
||||
},
|
||||
{
|
||||
title: this.$t('display.schedule.onlineSection'),
|
||||
prop: 'outDepotTrip.outDepotSectionCode',
|
||||
type: 'text',
|
||||
format: (row) => { return this.handleDeviceName(row.outDepotTrip.outDepotSectionCode); }
|
||||
},
|
||||
{
|
||||
title: this.$t('display.schedule.onlineServerNumber'),
|
||||
prop: 'outDepotTrip.serviceNumber',
|
||||
type: 'text',
|
||||
format: (row) => { return row.outDepotTrip.serviceNumber; }
|
||||
},
|
||||
{
|
||||
title: this.$t('display.schedule.onlineTargetNumber'),
|
||||
prop: 'outDepotTrip.destinationCode',
|
||||
type: 'text',
|
||||
format: (row) => { return row.outDepotTrip.destinationCode; }
|
||||
},
|
||||
{
|
||||
title: this.$t('display.schedule.onlineTime'),
|
||||
prop: 'outDepotTrip.outDepotTime',
|
||||
type: 'text',
|
||||
format: (row) => { return row.outDepotTrip.outDepotTime; }
|
||||
},
|
||||
{
|
||||
title: this.$t('display.schedule.onlineTripNumber'),
|
||||
prop: 'outDepotTrip.tripNumber',
|
||||
type: 'text',
|
||||
format: (row) => { return row.outDepotTrip.tripNumber; }
|
||||
},
|
||||
{
|
||||
title: this.$t('display.schedule.outDepot'),
|
||||
prop: 'outDepotTrip.outDepotCode',
|
||||
type: 'text',
|
||||
format: (row) => { return this.handleDeviceName(row.outDepotTrip.outDepotCode); }
|
||||
},
|
||||
{
|
||||
title: this.$t('display.schedule.outDepotStatus'),
|
||||
prop: 'outDepotTrip.status',
|
||||
type: 'tag',
|
||||
columnValue: (row) => { return this.$ConstSelect.translate(row.outDepotTrip.status, 'Whether'); },
|
||||
tagType: (row) => {
|
||||
switch (row.outDepotTrip.status) {
|
||||
case true: return 'success';
|
||||
case false: return 'danger';
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
title: this.$t('display.schedule.offlineSection'),
|
||||
prop: 'offlineSection',
|
||||
type: 'text',
|
||||
format: (row) => { return this.handleDeviceName(row.inDepotTrip.inDepotSectionCode); }
|
||||
},
|
||||
{
|
||||
title: this.$t('display.schedule.offlineServerNumber'),
|
||||
prop: 'offlineServerNumber',
|
||||
type: 'text',
|
||||
format: (row) => { return row.inDepotTrip.serviceNumber; }
|
||||
},
|
||||
{
|
||||
title: this.$t('display.schedule.offlineTargetNumber'),
|
||||
prop: 'offlineTargetNumber',
|
||||
type: 'text',
|
||||
format: (row) => { return row.inDepotTrip.destinationCode; }
|
||||
},
|
||||
{
|
||||
title: this.$t('display.schedule.offlineTime'),
|
||||
prop: 'offlineTime',
|
||||
type: 'text',
|
||||
format: (row) => { return row.inDepotTrip.inDepotTime; }
|
||||
},
|
||||
{
|
||||
title: this.$t('display.schedule.offlineTripNumber'),
|
||||
prop: 'offlineTripNumber',
|
||||
type: 'text',
|
||||
format: (row) => { return row.inDepotTrip.tripNumber; }
|
||||
},
|
||||
{
|
||||
title: this.$t('display.schedule.inDepot'),
|
||||
prop: 'inDepot',
|
||||
type: 'text',
|
||||
format: (row) => { return this.handleDeviceName(row.inDepotTrip.inDepotCode); }
|
||||
},
|
||||
{
|
||||
title: this.$t('display.schedule.inDepotStatus'),
|
||||
prop: 'inStatus',
|
||||
type: 'tag',
|
||||
columnValue: (row) => { return this.$ConstSelect.translate(row.inDepotTrip.status, 'Whether'); },
|
||||
tagType: (row) => {
|
||||
switch (row.inDepotTrip.status) {
|
||||
case true: return 'success';
|
||||
case false: return 'danger';
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
tableData: []
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
title() {
|
||||
return '派班计划预览';
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
'$store.state.map.mapDataLoadedCount': function () {
|
||||
const trainList = this.$store.state.map.map.trainList || [];
|
||||
this.groupNumberList = [];
|
||||
trainList.forEach(item => {
|
||||
this.groupNumberList.push({value: item.code, label: item.groupNumber});
|
||||
});
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
doShow() {
|
||||
this.initData();
|
||||
this.show = true;
|
||||
},
|
||||
doClose() {
|
||||
this.show = false;
|
||||
},
|
||||
initData() {
|
||||
this.loading = true;
|
||||
queryCurrentSecheduling(this.group).then(resp => {
|
||||
this.tableData = [];
|
||||
if (resp.data) {
|
||||
this.tableData = this.initTableData(resp.data.planList || []);
|
||||
// this.$message.success(`${this.$t('display.schedule.loadData')}${this.$t('display.schedule.schedulePlanSuccess')}`);
|
||||
}
|
||||
this.loading = false;
|
||||
}).catch(error => {
|
||||
this.$messageBox(`${error.message}`);
|
||||
this.loading = false;
|
||||
});
|
||||
},
|
||||
handleRowStyle({row, rowIndex}) {
|
||||
return row['$conflict'] ? {background: row.$conflict} : {background: '#FFF'};
|
||||
},
|
||||
setConflictList(list) {
|
||||
this.tableData.forEach(elem => { elem['$conflict'] = null; });
|
||||
if (list && list.length) {
|
||||
list.forEach(idList => {
|
||||
const color = hexColor.colorRandom();
|
||||
this.tableData.forEach(elem => {
|
||||
if (idList.includes(parseInt(elem.id))) {
|
||||
elem['$conflict'] = color;
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
this.tableData = [...this.tableData];
|
||||
},
|
||||
initTableData(tableData) {
|
||||
tableData.forEach(elem => {
|
||||
this.$set(elem, '$conflict', null);
|
||||
});
|
||||
|
||||
return tableData;
|
||||
},
|
||||
handleDeviceName(code) {
|
||||
const device = this.$store.getters['map/getDeviceByCode'](code) || {};
|
||||
return device.name;
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style scoped rel="stylesheet/scss" lang="scss">
|
||||
.scheduling {
|
||||
&_header {
|
||||
background: #fff;
|
||||
padding: 30px 30px 0;
|
||||
}
|
||||
&_body {
|
||||
margin-top: 30px;
|
||||
background: #ffff;
|
||||
border: 1px solid #F1F1F1;
|
||||
width: 100%;
|
||||
overflow: auto;
|
||||
}
|
||||
}
|
||||
|
||||
/deep/ .el-dialog__body {
|
||||
background: #fafafa;
|
||||
}
|
||||
|
||||
/deep/ label {
|
||||
font-weight: 0;
|
||||
}
|
||||
</style>
|
||||
@ -1,130 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-dialog
|
||||
v-dialogDrag
|
||||
:title="$t('display.script.scriptList')"
|
||||
:visible.sync="show"
|
||||
top="50px"
|
||||
width="60%"
|
||||
:before-do-close="doClose"
|
||||
:close-on-click-modal="false"
|
||||
:z-index="2000"
|
||||
>
|
||||
<QueryListPage
|
||||
ref="queryListPage"
|
||||
:pager-config="pagerConfig"
|
||||
:query-form="queryForm"
|
||||
:query-list="queryList"
|
||||
/>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {getScriptPageListOnlineNew } from '@/api/script';
|
||||
|
||||
// 剧本弹窗
|
||||
export default {
|
||||
name: 'AddQuest',
|
||||
props: {
|
||||
trainings: {
|
||||
type: Array,
|
||||
default() {
|
||||
return [];
|
||||
}
|
||||
},
|
||||
detail: {
|
||||
type: Object,
|
||||
default() {
|
||||
return null;
|
||||
}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
show: false,
|
||||
pagerConfig: {
|
||||
pageSize: 'pageSize',
|
||||
pageIndex: 'pageNum'
|
||||
},
|
||||
queryForm: {
|
||||
labelWidth: '80px',
|
||||
reset: false,
|
||||
show: false,
|
||||
queryObject: {
|
||||
|
||||
}
|
||||
},
|
||||
queryList: {
|
||||
query: this.listQuest,
|
||||
selectCheckShow: false,
|
||||
indexShow: true,
|
||||
columns: [
|
||||
{
|
||||
title: '关联站台',
|
||||
prop: 'name'
|
||||
},
|
||||
// {
|
||||
// title: '创建时间',
|
||||
// prop: 'createTime'
|
||||
// },
|
||||
{
|
||||
type: 'button',
|
||||
title: '操作',
|
||||
width: '250',
|
||||
buttons: [
|
||||
{
|
||||
name: '预览',
|
||||
type: 'primary',
|
||||
handleClick: this.handleLoad
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
actions: [
|
||||
]
|
||||
},
|
||||
|
||||
currentModel: {}
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.loadInitData();
|
||||
},
|
||||
methods: {
|
||||
doShow() {
|
||||
this.show = true;
|
||||
this.reloadTable();
|
||||
},
|
||||
doClose() {
|
||||
this.show = false;
|
||||
},
|
||||
listQuest(params) {
|
||||
params['mapId'] = this.$route.query.mapId;
|
||||
return getScriptPageListOnlineNew(params);
|
||||
},
|
||||
async loadInitData() {
|
||||
|
||||
},
|
||||
|
||||
async handleLoad(index, row) {
|
||||
this.row = row;
|
||||
// const routeData = this.$router.resolve({
|
||||
// path:`/ibpShow`,
|
||||
// query:{
|
||||
// lineCode: this.$route.query.lineCode,
|
||||
// mapId: this.$route.query.mapId,
|
||||
// group: this.$route.query.group
|
||||
// }
|
||||
// });
|
||||
// window.open(routeData.href, '_blank');
|
||||
},
|
||||
|
||||
reloadTable() {
|
||||
if (this.queryList && this.queryList.reload) {
|
||||
this.queryList.reload();
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@ -1,115 +0,0 @@
|
||||
<template>
|
||||
<el-dialog v-dialogDrag :title="title" :visible.sync="show" width="550px" :before-close="doClose">
|
||||
<el-form ref="form" label-width="120px" :model="formModel" :rules="rules">
|
||||
<el-form-item :label="$t('display.setTime.systemTime')" prop="initTime">
|
||||
<el-time-picker
|
||||
v-model="formModel.initTime"
|
||||
:picker-options="pickerOptions"
|
||||
:placeholder="$t('display.setTime.anyTime')"
|
||||
@change="handleChange"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item v-if="hasNumber" :label="$t('display.setTime.loadTrainNum')" prop="loadNum">
|
||||
<el-input-number v-model="formModel.loadNum" :min="1" :max="maxNumber" :label="$t('display.setTime.selectLoadTrainNum')" />
|
||||
<span> {{ ` (${$t('display.setTime.maxTrainNum')} ：${maxNumber}) ` }} </span>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button @click="show = false">{{ $t('global.cancel') }}</el-button>
|
||||
<el-button type="primary" :loading="status" @click="handleSure">{{ $t('global.confirm') }}</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { timestampFormat } from '@/utils/date';
|
||||
import { getLoadTrainNumber } from '@/api/simulation';
|
||||
|
||||
// 计划行车时间选择
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
show: false,
|
||||
formModel: {
|
||||
initTime: new Date(),
|
||||
loadNum: 1
|
||||
},
|
||||
maxNumber: 1,
|
||||
pickerOptions: { selectableRange: '00:00:00 - 23:59:59' },
|
||||
status: false
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
title() {
|
||||
return this.$t('display.setTime.setSimulationSystemTime');
|
||||
},
|
||||
hasNumber() {
|
||||
return this.$route.params.mode == 'demon' && this.$route.query.prdType == '04';
|
||||
},
|
||||
group() {
|
||||
return this.$route.query.group;
|
||||
},
|
||||
rules() {
|
||||
return {
|
||||
initTime: [
|
||||
{ required: true, message: this.$t('display.setTime.selectSystemTime'), trigger: 'change' },
|
||||
{
|
||||
validator(rule, value, callback) {
|
||||
if (this.maxNumber == 0) {
|
||||
callback(new Error(this.$t('display.setTime.selectValidStartTime')));
|
||||
} else {
|
||||
callback();
|
||||
}
|
||||
},
|
||||
trigger: 'change',
|
||||
maxNumber: this.maxNumber
|
||||
}
|
||||
],
|
||||
loadNum: [
|
||||
{ required: true, message: this.$t('display.setTime.selectTrainNum'), trigger: 'change' }
|
||||
|
||||
]
|
||||
};
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
doShow() {
|
||||
console.log(this.$store.state.training.initTime)
|
||||
this.formModel.initTime = new Date(this.$store.state.training.initTime || null);
|
||||
this.handleChange(this.formModel.initTime);
|
||||
this.show = true;
|
||||
},
|
||||
doClose() {
|
||||
this.status = false;
|
||||
this.show = false;
|
||||
},
|
||||
handleChange(initTime) {
|
||||
this.formModel.loadNum = 0;
|
||||
if (this.hasNumber) {
|
||||
getLoadTrainNumber({ time: timestampFormat('HH:mm:ss', initTime) }, this.group).then(resp => {
|
||||
this.maxNumber = parseInt(resp.data);
|
||||
});
|
||||
}
|
||||
},
|
||||
handleSure() {
|
||||
this.$refs.form.validate((valid) => {
|
||||
debugger
|
||||
if (valid) {
|
||||
this.status = true;
|
||||
const model = {
|
||||
initTime: timestampFormat('HH:mm:ss', this.formModel.initTime),
|
||||
timestamp:this.formModel.initTime
|
||||
};
|
||||
|
||||
if (this.hasNumber) {
|
||||
model['loadNum'] = this.formModel.loadNum;
|
||||
}
|
||||
|
||||
this.$emit('ConfirmSelectBeginTime', model);
|
||||
this.doClose();
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@ -1,68 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<voice-chat-box
|
||||
v-if="$route.query.lineCode == '16'"
|
||||
ref="chatbox"
|
||||
:group="group"
|
||||
:user-role="userRole"
|
||||
/>
|
||||
<chat-box
|
||||
v-else
|
||||
ref="chatbox"
|
||||
:group="group"
|
||||
:user-role="userRole"
|
||||
/>
|
||||
<script-tip ref="scriptTip" :offset="offset" @allowCreatCoversition="allowCreatCoversition" />
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import ChatBox from '../chatView/chatBox.vue';
|
||||
import voiceChatBox from '../chatView/voiceChatBox.vue';
|
||||
import ScriptTip from '@/views/newMap/displayNew/scriptDisplay/component/scriptTip';
|
||||
|
||||
export default {
|
||||
name:'DemonChat',
|
||||
components:{
|
||||
ChatBox,
|
||||
voiceChatBox,
|
||||
ScriptTip
|
||||
},
|
||||
props: {
|
||||
group: {
|
||||
type: String,
|
||||
required: true
|
||||
},
|
||||
userRole: {
|
||||
type: String,
|
||||
required: true
|
||||
},
|
||||
offset: {
|
||||
type: Number,
|
||||
required: true
|
||||
}
|
||||
},
|
||||
watch:{
|
||||
|
||||
},
|
||||
mounted() {
|
||||
},
|
||||
methods:{
|
||||
clearAllData() {
|
||||
// this.resetCoversition();
|
||||
this.$refs.chatbox.resetCoversition();
|
||||
this.$refs.scriptTip.resetScriptTip();
|
||||
},
|
||||
resetCoversition() {
|
||||
this.$refs.chatbox.resetCoversition();
|
||||
},
|
||||
allowCreatCoversition() {
|
||||
},
|
||||
resetScriptTip() {
|
||||
this.$refs.scriptTip.resetScriptTip();
|
||||
},
|
||||
cancelCommonConversation() {
|
||||
this.$refs.chatbox.cancelCommonConversation();
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@ -1,335 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<div v-if="isAllShow&&project != 'bjd'&& !isCtc" class="display_top_draft" :style="allStyle">
|
||||
<div class="btn_hover" @click="menuClick">菜单</div>
|
||||
<el-button-group ref="button_group_box" class="button_group_box" :style="`margin-left:-${btnWidth}px`">
|
||||
<!-- 地图错误判断 -->
|
||||
<!-- 设备视图 -->
|
||||
<el-button v-if="jl3dmodelShow && !isContest && project !== 'bjd' && $route.query.lineCode !== '16' && project !== 'teaching'" size="small" @click="jumpjlmap3dmodel">{{ jl3dmodel }}</el-button>
|
||||
<!-- 三维视图/数字沙盘 -->
|
||||
<el-button v-if="jl3dnameShow && !isContest && project !== 'bjd' && $route.query.lineCode !== '16' && project !== 'teaching'" size="small" @click="jumpjlmap3d">{{ jl3dname }}</el-button>
|
||||
<!-- cctv视图 -->
|
||||
<el-button v-if="jl3dnameShow && !isContest && project !== 'bjd' && $route.query.lineCode !== '16' && project !== 'teaching'" size="small" @click="jumpjl3dpassflow">{{ jl3dpassflow }}</el-button>
|
||||
<!-- 客流规划视图 -->
|
||||
<!-- <el-button v-if="trafficplanShow && project == 'bjd' && !isContest" size="small" @click="jumpjl3dtrafficplan">{{ jl3dtrafficplan }}</el-button>
|
||||
<el-button v-if="trafficplanShow && project == 'bjd' && !isContest" size="small" @click="jumpjl3dtraffictrain">{{ $t('display.demon.traffictraintext') }}</el-button> -->
|
||||
|
||||
<!-- 故障设备视图 -->
|
||||
<el-button v-if="jlmap3dFaultShow" size="small" @click="jumpjlmap3dFault">故障设备</el-button>
|
||||
<!-- 司机视角 -->
|
||||
<el-button v-if="driverShow" size="small" type="jumpjlmap3d" @click="jumpjlmap3dDriver">司机视角</el-button>
|
||||
<!-- 排班计划 -->
|
||||
<el-button v-if="scheduleLoadShow" type="primary" size="small" @click="jumpScheduling">派班计划加载</el-button>
|
||||
<el-button v-if="schedulePreviewShow" type="primary" size="small" @click="schedulingView">派班计划预览</el-button>
|
||||
<el-button v-if="isContest" size="small" :disabled="practiceDisabled" @click="fieldPractice">实操练习</el-button>
|
||||
<el-button v-if="isContest" size="small" @click="goTheoryQuiz">理论考试</el-button>
|
||||
<el-button v-if="messageBoard" size="small" @click="messageBoardShow">留言板</el-button>
|
||||
<!-- v-if="isContest" -->
|
||||
<el-button v-if="!isLocal" size="small" @click="contectUs">联系方式</el-button>
|
||||
</el-button-group>
|
||||
</div>
|
||||
<Jl3d-Device
|
||||
v-if="deviceif"
|
||||
v-show="deviceShow"
|
||||
ref="Jl3dDevice"
|
||||
:panel-show="deviceShow"
|
||||
@closedevice3dview="jumpjlmap3dmodel"
|
||||
/>
|
||||
<Jl3d-Drive v-show="drivingShow" ref="Jl3dDrive" :panel-show="drivingShow" @showdriving="showdriving" />
|
||||
<scheduling v-if="scheduleLoadShow" ref="scheduling" :group="group" />
|
||||
<scheduling-view v-if="schedulePreviewShow" ref="schedulingView" :group="group" />
|
||||
<contect-us ref="contectUs" />
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import Jl3dDevice from '@/views/jlmap3d/device/jl3ddevice';
|
||||
import Jl3dDrive from '@/views/jlmap3d/drive/jl3ddrive';
|
||||
import { getToken } from '@/utils/auth';
|
||||
import { getSessionStorage } from '@/utils/auth';
|
||||
import Scheduling from '@/views/newMap/displayNew/demon/scheduling';
|
||||
import SchedulingView from '@/views/newMap/displayNew/demon/schedulingView';
|
||||
import { EventBus } from '@/scripts/event-bus';
|
||||
import ContectUs from '@/views/newMap/displayNew/dispatherContest/contectUs';
|
||||
import { getPostByProjectCode } from '@/api/learn';
|
||||
import { ProjectCode } from '@/scripts/ProjectConfig';
|
||||
export default {
|
||||
name:'DemonMenu',
|
||||
components:{
|
||||
Jl3dDevice,
|
||||
Jl3dDrive,
|
||||
Scheduling,
|
||||
SchedulingView,
|
||||
ContectUs
|
||||
},
|
||||
props:{
|
||||
isAllShow:{
|
||||
type:Boolean,
|
||||
require:true
|
||||
},
|
||||
jl3dmodelShow:{
|
||||
type:Boolean,
|
||||
require:true
|
||||
},
|
||||
jl3dnameShow:{
|
||||
type:Boolean,
|
||||
require:true
|
||||
},
|
||||
cctvShow:{
|
||||
type:Boolean,
|
||||
require:true
|
||||
},
|
||||
trafficplanShow:{
|
||||
type:Boolean,
|
||||
require:true
|
||||
},
|
||||
traffictrainShow:{
|
||||
type:Boolean,
|
||||
require:true
|
||||
},
|
||||
scheduleLoadShow:{
|
||||
type:Boolean,
|
||||
require:true
|
||||
},
|
||||
driverShow:{
|
||||
type:Boolean,
|
||||
require:true
|
||||
},
|
||||
schedulePreviewShow:{
|
||||
type:Boolean,
|
||||
require:true
|
||||
},
|
||||
jlmap3dFaultShow:{
|
||||
type:Boolean,
|
||||
require:true
|
||||
},
|
||||
allStyle:{
|
||||
type:String,
|
||||
default() {
|
||||
return '';
|
||||
}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
hoverBtn: false,
|
||||
btnWidth: 0,
|
||||
group:'',
|
||||
mapId:'',
|
||||
lineCode:'',
|
||||
practiceDisabled:false,
|
||||
deviceif:false,
|
||||
deviceShow: true,
|
||||
drivingShow: false,
|
||||
messageBoard: false,
|
||||
jl3dtrafficplan:this.$t('display.demon.trafficplantext'),
|
||||
jl3dtraffictrain:this.$t('display.demon.traffictraintext'),
|
||||
jl3dpassflow:this.$t('display.demon.passengerflow'),
|
||||
jl3dname: this.$t('display.demon.threeDimensionalView'),
|
||||
jl3dmodel: this.$t('display.demon.deviceView')
|
||||
};
|
||||
},
|
||||
computed:{
|
||||
isDrive() {
|
||||
return this.$route.query.prdType == '04';
|
||||
},
|
||||
project() {
|
||||
return getSessionStorage('project');
|
||||
},
|
||||
isContest() {
|
||||
return this.$route.params.mode === 'demon' && (this.project.includes('drts') || this.$route.query.thirdDrts);
|
||||
},
|
||||
running() {
|
||||
return this.$store.state.training.started;
|
||||
},
|
||||
isLocal() { // 是否为本地项目
|
||||
return process.env.VUE_APP_PRO === 'local';
|
||||
},
|
||||
isCtc() {
|
||||
return this.$route.query.ctc;
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.group = this.$route.query.group;
|
||||
this.mapId = this.$route.query.mapId;
|
||||
this.lineCode = this.$route.query.lineCode;
|
||||
EventBus.$on('loadScene', () => {
|
||||
this.practiceDisabled = true;
|
||||
});
|
||||
EventBus.$on('quitScene', () => {
|
||||
this.practiceDisabled = false;
|
||||
});
|
||||
if (this.project) {
|
||||
getPostByProjectCode(ProjectCode[this.project]).then(resp => {
|
||||
if (resp.data) {
|
||||
this.messageBoard = true;
|
||||
}
|
||||
}).catch(() => {
|
||||
// this.$message.error('获取留言板信息失败');
|
||||
console.log('获取留言板信息失败');
|
||||
});
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
menuClick() {
|
||||
this.hoverBtn = !this.hoverBtn;
|
||||
if (this.hoverBtn) {
|
||||
// this.$refs.button_group_box.$el.clientWidth ||
|
||||
this.btnWidth = 600; // 默认宽度
|
||||
} else {
|
||||
// button_group_box
|
||||
this.btnWidth = 0;
|
||||
}
|
||||
},
|
||||
jumpjlmap3dmodel() {
|
||||
if (this.deviceif == false) {
|
||||
this.deviceif = true;
|
||||
} else {
|
||||
if (this.deviceShow == false) {
|
||||
this.deviceShow = true;
|
||||
} else {
|
||||
this.deviceShow = false;
|
||||
}
|
||||
}
|
||||
|
||||
},
|
||||
showdriving() {
|
||||
this.drivingShow = false;
|
||||
},
|
||||
jumpjlmap3d() {
|
||||
const routeData = this.$router.resolve({
|
||||
path:'/jlmap3d/sandbox',
|
||||
query:{
|
||||
mapid:this.mapId,
|
||||
group:this.group,
|
||||
token:getToken(),
|
||||
project: this.project,
|
||||
noPreLogout: true
|
||||
}
|
||||
});
|
||||
window.open(routeData.href, '_blank');
|
||||
},
|
||||
jumpjl3dpassflow() {
|
||||
const routeData = this.$router.resolve({
|
||||
path:'/jlmap3d/passengerflow',
|
||||
query:{
|
||||
mapid:this.mapId,
|
||||
group:this.group,
|
||||
project: this.project,
|
||||
noPreLogout: true,
|
||||
lineCode:this.lineCode
|
||||
}
|
||||
});
|
||||
window.open(routeData.href, '_blank');
|
||||
},
|
||||
// jumpjl3dtrafficplan() {
|
||||
// const routeData = this.$router.resolve({
|
||||
// path:'/jlmap3d/trafficplan',
|
||||
// query:{
|
||||
// mapid:this.mapId,
|
||||
// group:this.group,
|
||||
// project: this.project,
|
||||
// noPreLogout: true,
|
||||
// lineCode:this.lineCode
|
||||
// }
|
||||
// });
|
||||
// window.open(routeData.href, '_blank');
|
||||
// },
|
||||
// jumpjl3dtraffictrain() {
|
||||
// const routeData = this.$router.resolve({
|
||||
// path:'/jlmap3d/traffictrain',
|
||||
// query:{
|
||||
// mapid:this.mapId,
|
||||
// group:this.group,
|
||||
// project: this.project,
|
||||
// noPreLogout: true,
|
||||
// lineCode:this.lineCode
|
||||
// }
|
||||
// });
|
||||
// window.open(routeData.href, '_blank');
|
||||
// },
|
||||
jumpjlmap3dFault() {
|
||||
const routeData = this.$router.resolve({
|
||||
path:'/jlmap3d/maintainer',
|
||||
query:{
|
||||
mapid:this.mapId,
|
||||
group:this.group,
|
||||
token:getToken(),
|
||||
project: this.project,
|
||||
noPreLogout: true
|
||||
}
|
||||
});
|
||||
window.open(routeData.href);
|
||||
},
|
||||
jumpjlmap3dDriver() {
|
||||
this.drivingShow = true;
|
||||
this.$refs.Jl3dDrive.show(this.mapId, this.group);
|
||||
},
|
||||
jumpScheduling() {
|
||||
this.$refs.scheduling.doShow();
|
||||
},
|
||||
schedulingView() {
|
||||
this.$refs.schedulingView.doShow();
|
||||
},
|
||||
hideScheduling(running) {
|
||||
if (running) {
|
||||
this.$refs.scheduling && this.$refs.scheduling.doClose();
|
||||
} else {
|
||||
this.$refs.schedulingView && this.$refs.schedulingView.doClose();
|
||||
}
|
||||
},
|
||||
fieldPractice() {
|
||||
this.$emit('fieldPractice');
|
||||
},
|
||||
goTheoryQuiz() {
|
||||
this.$emit('goTheoryQuiz');
|
||||
},
|
||||
messageBoardShow() {
|
||||
const routeData = this.$router.resolve({
|
||||
path:'/messageBoard',
|
||||
query:{
|
||||
project: this.$route.query.project || getSessionStorage('project'),
|
||||
noPreLogout: true
|
||||
}
|
||||
});
|
||||
window.open(routeData.href, '_blank');
|
||||
},
|
||||
contectUs() {
|
||||
this.$refs.contectUs.doShow();
|
||||
}
|
||||
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.display_top_draft{
|
||||
position: absolute;
|
||||
left: 5px;
|
||||
top: 15px;
|
||||
height: 32px;
|
||||
overflow: hidden;
|
||||
padding-left: 44px;
|
||||
z-index: 35;
|
||||
.btn_hover{
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
z-index: 2;
|
||||
color: #4e4d4d;
|
||||
font-size: 14px;
|
||||
background: #fff;
|
||||
padding: 8px;
|
||||
border-radius: 5px;
|
||||
display: block;
|
||||
cursor: pointer;
|
||||
float: left;
|
||||
height: 32px;
|
||||
}
|
||||
.button_group_box{
|
||||
float: left;
|
||||
transition: all 0.5s;
|
||||
overflow: hidden;
|
||||
margin-left: -700px;
|
||||
// transform: translateX(0px);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,66 +0,0 @@
|
||||
<template>
|
||||
<el-dialog
|
||||
title="联系方式"
|
||||
:visible.sync="dialogVisible"
|
||||
width="400px"
|
||||
:before-close="handleClose"
|
||||
>
|
||||
<div v-if="thirdLogin">
|
||||
<div><span class="el-icon-user" style="font-size:15px;margin-right:8px;" />联系人：欧阳炜椿</div>
|
||||
<div class="eachInfo"><span class="el-icon-mobile-phone" style="font-size:15px;margin-right:7px;" />电 话：4000500081</div>
|
||||
<div class="eachInfo"><span class="el-icon-message" style="font-size:15px;margin-right:7px;" />邮 箱：zhrc@richortech.com</div>
|
||||
<div class="eachInfo"><span class="el-icon-connection" style="font-size:15px;margin-right:7px;" />网 址：www.richortech.com</div>
|
||||
<!-- <div class="eachInfo">
|
||||
<span class="el-icon-chat-round" style="font-size:15px;margin-right:3px;vertical-align:top;" />
|
||||
<span style="vertical-align: top;">微 信：</span>
|
||||
<img :src="wchatImg" width="80" height="80">
|
||||
</div> -->
|
||||
</div>
|
||||
<div v-else>
|
||||
<div><span class="el-icon-user" style="font-size:15px;margin-right:8px;" />联系人：许经理</div>
|
||||
<div class="eachInfo"><span class="el-icon-mobile-phone" style="font-size:15px;margin-right:7px;" />手 机：13910989830</div>
|
||||
<div class="eachInfo"><span class="el-icon-message" style="font-size:15px;margin-right:7px;" />邮 箱：henry@joylink.club</div>
|
||||
<div class="eachInfo">
|
||||
<span class="el-icon-chat-round" style="font-size:15px;margin-right:3px;vertical-align:top;" />
|
||||
<span style="vertical-align: top;">微 信：</span>
|
||||
<img :src="wchatImg" width="80" height="80">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button type="primary" @click="dialogVisible = false">确 定</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</template>
|
||||
<script>
|
||||
import wchat from '@/assets/wchat.png';
|
||||
import { getSessionStorage } from '@/utils/auth';
|
||||
import { RichorContectUsList } from '@/scripts/ProjectConfig';
|
||||
export default {
|
||||
name:'',
|
||||
data() {
|
||||
return {
|
||||
dialogVisible:false,
|
||||
wchatImg: wchat
|
||||
};
|
||||
},
|
||||
computed:{
|
||||
thirdLogin() {
|
||||
return RichorContectUsList.includes(getSessionStorage('project'));
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
handleClose() {
|
||||
this.dialogVisible = false;
|
||||
},
|
||||
doShow() {
|
||||
this.dialogVisible = true;
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.eachInfo{
|
||||
margin-top: 10px;
|
||||
}
|
||||
</style>
|
||||
@ -1,528 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<demon-chat ref="chatbox" :group="group" :user-role="userRole" :offset="offset" />
|
||||
<demon-menu
|
||||
ref="demonMenu"
|
||||
:is-all-show="!dataError"
|
||||
:jl3dmodel-show="false"
|
||||
:jl3dname-show="!isShowScheduling&&!isDrive"
|
||||
:cctv-show="!isShowScheduling"
|
||||
:schedule-load-show="isShowScheduling && !runing"
|
||||
:schedule-preview-show="isShowScheduling && runing"
|
||||
:jlmap3d-fault-show="false"
|
||||
:driver-show="isDrive"
|
||||
:all-style="'top:'+(offset+textStatusHeight)+'px'"
|
||||
@fieldPractice="fieldPractice"
|
||||
@goTheoryQuiz="goTheoryQuiz"
|
||||
/>
|
||||
|
||||
<div v-if="isScriptLoad" class="trainingButton" :style="{top: (offset+45)+'px'}">
|
||||
<el-row>
|
||||
<el-radio-group v-model="scriptMode" class="mode" size="small" @change="changeScriptMode">
|
||||
<el-radio-button :label="scriptModeList.TEACH" :disabled="isScriptRun">{{ $t('display.lesson.teachingMode') }}</el-radio-button>
|
||||
<el-radio-button :label="scriptModeList.PRACTICE" :disabled="isScriptRun">{{ $t('display.lesson.practiceMode') }}</el-radio-button>
|
||||
<el-radio-button :label="scriptModeList.TEST" :disabled="isScriptRun">{{ $t('display.lesson.testMode') }}</el-radio-button>
|
||||
</el-radio-group>
|
||||
</el-row>
|
||||
</div>
|
||||
|
||||
<div class="display-draft" :class="{'haerbin_btn_box': $route.query.lineCode == '07'}" :style="{bottom: offsetBottom + 'px'}">
|
||||
<el-button-group class="button-group-box">
|
||||
<template v-if="!dataError">
|
||||
<template v-if="isScriptLoad">
|
||||
<el-button type="" size="small" @click="handleExplain">说明</el-button>
|
||||
<el-button type="primary" size="small" :disabled="isScriptRun" @click="startTraining">开始</el-button>
|
||||
<el-button type="success" size="small" :disabled="!isScriptRun" @click="endTraining">结束</el-button>
|
||||
<el-button type="danger" size="small" @click="handleQuitQuest">退出场景</el-button>
|
||||
</template>
|
||||
<template v-else>
|
||||
<!-- 按计划行车 -->
|
||||
<el-button type="success" :disabled="isDisable" size="small" @click="selectBeginTime">{{ $t('display.demon.drivingByPlan') }}</el-button>
|
||||
<!-- 初始化 -->
|
||||
<el-button type="danger" size="small" @click="end">{{ $t('display.demon.initialize') }}</el-button>
|
||||
</template>
|
||||
<el-button type="primary" size="small" @click="back">退出</el-button>
|
||||
|
||||
</template>
|
||||
</el-button-group>
|
||||
</div>
|
||||
|
||||
<menu-schema
|
||||
ref="menuSchema"
|
||||
:offset="offset"
|
||||
:data-error="dataError"
|
||||
:offset-bottom="offsetBottom"
|
||||
@selectQuest="selectQuest"
|
||||
/>
|
||||
|
||||
<!-- :station-list="stationListMode"
|
||||
:show-select-station="showSelectStation"
|
||||
@selectQuest="selectQuest"
|
||||
@switchStationMode="switchStationMode"
|
||||
@switchMode="switchMode" -->
|
||||
|
||||
<set-time ref="setTime" @ConfirmSelectBeginTime="start" />
|
||||
<scene-list ref="sceneList" @selectScript="selectScript" @goToPay="goToPay" />
|
||||
<theory-exam-select ref="theoryExamSelect" @startTheoryExam="startTheoryExam" />
|
||||
<theory-exam ref="theoryExam" />
|
||||
<select-role ref="selectRole" :member-list="currentPlayList" @selectRole="selectRole" />
|
||||
|
||||
<operational-statistic ref="operationalStatistic" @finishTraining="finishTraining" />
|
||||
|
||||
<test-result ref="testResult" />
|
||||
<pay-page ref="payPage" />
|
||||
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
<!-- 单人仿真 -->
|
||||
<script>
|
||||
import SetTime from '../demon/setTime';
|
||||
import DemonMenu from '../demonMenu';
|
||||
import DemonChat from '../demonChat';
|
||||
import SceneList from './sceneList';
|
||||
import MenuSchema from '@/views/newMap/displayNew/menuSchema';
|
||||
import TheoryExamSelect from './theoryExamSelect';
|
||||
import TheoryExam from './theoryExam';
|
||||
import PayPage from '@/views/newMap/displayNew/demon/payPage';
|
||||
import {clearSimulation, getSimulationInfoNew } from '@/api/simulation';
|
||||
import { timestampFormat } from '@/utils/date';
|
||||
import { ScriptMode, TrainingMode } from '@/scripts/ConstDic';
|
||||
import SelectRole from '@/views/newMap/displayNew/scriptDisplay/component/selectRole';
|
||||
|
||||
import {competitionPracticalSceneStart, competitionPracticalSceneExit, competitionPracticalSceneFinish, getEmptyOperationalStatistics} from '@/api/competition';
|
||||
import { EventBus } from '@/scripts/event-bus';
|
||||
import OperationalStatistic from './operationalStatistic.vue';
|
||||
import TestResult from './testResult.vue';
|
||||
import Vue from 'vue';
|
||||
import ConstConfig from '@/scripts/ConstConfig';
|
||||
|
||||
export default {
|
||||
name: 'MenuDemon',
|
||||
components: {
|
||||
SetTime,
|
||||
DemonChat,
|
||||
MenuSchema,
|
||||
DemonMenu,
|
||||
SceneList,
|
||||
TheoryExamSelect,
|
||||
TheoryExam,
|
||||
OperationalStatistic,
|
||||
TestResult,
|
||||
SelectRole,
|
||||
PayPage
|
||||
},
|
||||
props: {
|
||||
offset: {
|
||||
type: Number,
|
||||
required: true
|
||||
},
|
||||
offsetBottom: {
|
||||
type: Number,
|
||||
required: true
|
||||
},
|
||||
dataError: {
|
||||
type: Boolean,
|
||||
default() {
|
||||
return false;
|
||||
}
|
||||
},
|
||||
textStatusHeight: {
|
||||
type: Number,
|
||||
default() {
|
||||
return 0;
|
||||
}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
userRole: 'AUDIENCE',
|
||||
isScriptLoad: false,
|
||||
isScriptRun: false,
|
||||
scriptMode: ScriptMode.TEACH,
|
||||
mapLocation: {},
|
||||
playerList: [],
|
||||
currentPlayList: [],
|
||||
isGoback: false,
|
||||
runing: false,
|
||||
prdTypeMap: {
|
||||
'01': '01', // 现地 => 现地
|
||||
'02': '02', // 行调 => 行调
|
||||
'04': '02', // 司机 => 行调
|
||||
'05': '' // 派班 => null
|
||||
}
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
isShowScheduling() {
|
||||
return this.$route.query.prdType == '05';
|
||||
},
|
||||
isDrive() {
|
||||
return this.$route.query.prdType == '04';
|
||||
},
|
||||
group() {
|
||||
return this.$route.query.group;
|
||||
},
|
||||
scriptModeList() {
|
||||
return ScriptMode;
|
||||
},
|
||||
isDisable() {
|
||||
return this.$store.state.training.started;
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
// '$store.state.training.subscribeCount': function () {
|
||||
// this.group && this.initLoadPage();
|
||||
// },
|
||||
'$store.state.socket.simulationRoleList':function(val) {
|
||||
(val || []).forEach(item => {
|
||||
if (item.messageType === 'KICK_OUT' && item.userId == this.$store.state.user.id) {
|
||||
!this.isGoback && this.back();
|
||||
}
|
||||
});
|
||||
},
|
||||
'$store.state.socket.competitionPracticeFinish':function(val) {
|
||||
this.getEmptyOperationalStatistics();
|
||||
},
|
||||
// '$store.state.socket.simulationOver':function(val) {
|
||||
// !this.isGoback && this.back();
|
||||
// },
|
||||
// '$store.state.training.started': function (val) {
|
||||
// this.setRuning(val);
|
||||
// },
|
||||
'$store.state.socket.simulationStart':function(val) {
|
||||
if (val) {
|
||||
this.setRuning(true);
|
||||
this.$store.dispatch('training/simulationStart').then(() => {
|
||||
this.$store.dispatch('map/setShowCentralizedStationNum');
|
||||
});
|
||||
}
|
||||
},
|
||||
'$store.state.socket.simulationReset':function(val) {
|
||||
this.setRuning(false);
|
||||
},
|
||||
'$store.state.map.mapViewLoadedCount': function (val) { // 地图视图加载完成标识 开始加载默认状态
|
||||
if (this.$route.query.noFirst) {
|
||||
const initTime = new Date(this.$store.state.training.initTime || null);
|
||||
const model = {initTime: timestampFormat('HH:mm:ss', initTime), timestamp:initTime};
|
||||
this.start(model);
|
||||
}
|
||||
},
|
||||
isScriptLoad(val) {
|
||||
if (!val && this.$store.state.training.notifySelected) {
|
||||
this.$store.state.training.notifySelected.close();
|
||||
this.$store.commit('training/setNotifySelected', null);
|
||||
}
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.$store.dispatch('training/setPrdType', this.$route.query.prdType);
|
||||
if (this.$store.state.training.prdType == '02') {
|
||||
this.userRole = 'DISPATCHER';
|
||||
} else if (this.$store.state.training.prdType == '01') {
|
||||
this.userRole = 'STATION_SUPERVISOR';
|
||||
} else if (this.$store.state.training.prdType == '04') {
|
||||
this.userRole = 'DRIVER';
|
||||
} else if (this.$store.state.training.prdType == '05') {
|
||||
this.userRole = 'DEPOT_DISPATCHER';
|
||||
} else {
|
||||
this.userRole = 'AUDIENCE';
|
||||
}
|
||||
},
|
||||
beforeDestroy() {
|
||||
this.$store.dispatch('scriptRecord/updateSimulationPause', false);
|
||||
this.$store.dispatch('map/resetActiveTrainList', true);
|
||||
},
|
||||
mounted() {
|
||||
this.$store.dispatch('training/end', TrainingMode.NORMAL);
|
||||
this.$store.dispatch('training/setPrdType', this.prdTypeMap[this.$route.query.prdType]);
|
||||
this.$nextTick(() => {
|
||||
this.$refs.demonMenu.menuClick();
|
||||
});
|
||||
},
|
||||
methods: {
|
||||
selectBeginTime() {
|
||||
this.$refs.setTime.doShow();
|
||||
},
|
||||
start(model) { // 开始仿真
|
||||
this.$emit('start', model);
|
||||
},
|
||||
setRuning(run) {
|
||||
this.runing = run;
|
||||
this.$refs.demonMenu.hideScheduling(run);
|
||||
},
|
||||
end() {
|
||||
this.$emit('end');
|
||||
},
|
||||
handleQuitQuest() {
|
||||
competitionPracticalSceneExit(this.group).then(resp => {
|
||||
getSimulationInfoNew(this.group).then((res)=>{
|
||||
this.$store.dispatch('scriptRecord/updateAudioPlay', false);
|
||||
EventBus.$emit('quitScene');
|
||||
this.quitQuest();
|
||||
// this.initLoadPage();
|
||||
this.isScriptRun = false;
|
||||
this.clearAllData();
|
||||
this.$store.dispatch('scriptRecord/updateBgSet', false);
|
||||
}).catch(()=>{
|
||||
this.$messageBox(this.$t('display.demon.exitTaskFail'));
|
||||
});
|
||||
}).catch(() => {
|
||||
this.$messageBox(this.$t('display.demon.exitTaskFail'));
|
||||
});
|
||||
},
|
||||
// 选择脚本
|
||||
async selectQuest({row, id, mapLocation, roleName}) {
|
||||
try {
|
||||
let userRole = 'AUDIENCE';
|
||||
if (id) {
|
||||
this.$store.dispatch('training/setPrdType', this.$route.query.prdType);
|
||||
if (this.$route.query.prdType) {
|
||||
if (this.$route.query.prdType == '02') {
|
||||
userRole = 'DISPATCHER';
|
||||
} else if (this.$route.query.prdType == '01') {
|
||||
userRole = 'STATION_SUPERVISOR';
|
||||
} else if (this.$route.query.prdType == '04') {
|
||||
userRole = 'DRIVER';
|
||||
} else if (this.$route.query.prdType == '05') {
|
||||
userRole = 'DEPOT_DISPATCHER';
|
||||
} else {
|
||||
userRole = 'AUDIENCE';
|
||||
}
|
||||
}
|
||||
this.$store.dispatch('training/setRoles', userRole);
|
||||
} else {
|
||||
this.$store.dispatch('training/setRoles', 'AUDIENCE');
|
||||
this.$store.dispatch('training/setPrdType', '');
|
||||
}
|
||||
this.userRole = userRole;
|
||||
this.$store.dispatch('scriptRecord/updateBgSet', true);
|
||||
this.isScriptLoad = true;
|
||||
// this.$refs.chatbox.setMembers(id);
|
||||
// const res = await loadScriptNewMode(row.id, id, this.group, operationType);
|
||||
// if (res && res.code == 200) {
|
||||
// if (mapLocation) {
|
||||
// const newMapLocation = {'offsetX': mapLocation.x, 'offsetY': mapLocation.y, 'scaleRate': mapLocation.scale};
|
||||
// Vue.prototype.$jlmap.setOptions(newMapLocation);
|
||||
// }
|
||||
// this.isScriptRun = true;
|
||||
// // this.initLoadPage();
|
||||
// }
|
||||
} catch (error) {
|
||||
this.$messageBox(error.message);
|
||||
}
|
||||
// if (this.isScript) {
|
||||
// this.$refs.menuScript.initLoadPage();
|
||||
// }
|
||||
},
|
||||
selectScript({playerList, mapLocation}) {
|
||||
this.changeScriptMode(this.scriptMode);
|
||||
this.isScriptLoad = true;
|
||||
this.playerList = playerList;
|
||||
this.mapLocation = mapLocation;
|
||||
this.userRole = 'AUDIENCE';
|
||||
this.$store.dispatch('training/setRoles', 'AUDIENCE');
|
||||
},
|
||||
selectRole(role) {
|
||||
const memberId = role.id;
|
||||
(this.$store.state.training.memberData[role.id] || {}).userId = this.$store.state.user.id;
|
||||
(this.$store.state.training.memberData[role.id] || {}).disabled = true;
|
||||
this.runScriptMode(memberId);
|
||||
},
|
||||
handleExplain() {
|
||||
let name = this.$store.state.training.notifySelected.title;
|
||||
if (name.includes('—')) {
|
||||
name = name.split('—')[0];
|
||||
}
|
||||
const ossData = ConstConfig.ConstSelect.ossList.find(ele => { return ele.name == name; });
|
||||
const href = `https://joylink.club/oss/cbtc/race/${ossData.url}`;
|
||||
window.open(href, '_blank');
|
||||
},
|
||||
finishTraining(data) {
|
||||
this.isScriptRun = false;
|
||||
this.showResultData(data);
|
||||
},
|
||||
showResultData(data) {
|
||||
this.$refs.testResult.doShow({data:data});
|
||||
},
|
||||
endTraining() {
|
||||
competitionPracticalSceneFinish(this.group, {operationStatisticVO:{}}).then(res=>{
|
||||
this.isScriptRun = false;
|
||||
// if (this.scriptMode == ScriptMode.TEST) {
|
||||
this.showResultData(res.data);
|
||||
// this.$store.dispatch('scriptRecord/updateAudioPlay', false);
|
||||
// }
|
||||
// this.userRole = 'AUDIENCE';
|
||||
// this.$store.dispatch('training/setRoles', 'AUDIENCE');
|
||||
// this.quitScriptTraining();
|
||||
}).catch(error=>{
|
||||
this.$messageBox(error.message);
|
||||
});
|
||||
},
|
||||
startTraining() {
|
||||
this.$store.dispatch('scriptRecord/updateAudioPlay', false);
|
||||
let userRole = 'AUDIENCE';
|
||||
if (this.$route.query.prdType) {
|
||||
if (this.$route.query.prdType == '02') {
|
||||
userRole = 'DISPATCHER';
|
||||
} else if (this.$route.query.prdType == '01') {
|
||||
userRole = 'STATION_SUPERVISOR';
|
||||
} else if (this.$route.query.prdType == '04') {
|
||||
userRole = 'DRIVER';
|
||||
} else if (this.$route.query.prdType == '05') {
|
||||
userRole = 'DEPOT_DISPATCHER';
|
||||
} else {
|
||||
userRole = 'AUDIENCE';
|
||||
}
|
||||
}
|
||||
this.userRole = userRole;
|
||||
this.$store.dispatch('training/setRoles', userRole);
|
||||
this.$refs.chatbox.cancelCommonConversation();
|
||||
if (this.isScriptLoad) {
|
||||
this.clearAllData();
|
||||
}
|
||||
const currentPlayList = [];
|
||||
this.playerList.forEach(play=>{
|
||||
if (play.type === userRole) {
|
||||
currentPlayList.push(play);
|
||||
}
|
||||
});
|
||||
if (currentPlayList.length > 0) {
|
||||
// if (currentPlayList.length > 1) {
|
||||
// this.currentPlayList = currentPlayList;
|
||||
// this.$refs.selectRole.doShow();
|
||||
// } else {
|
||||
const member = currentPlayList[0];
|
||||
const memberId = member.id;
|
||||
(this.$store.state.training.memberData[member.id] || {}).userId = this.$store.state.user.id;
|
||||
(this.$store.state.training.memberData[member.id] || {}).disabled = true;
|
||||
this.runScriptMode(memberId);
|
||||
// }
|
||||
}
|
||||
},
|
||||
runScriptMode(memberId) {
|
||||
// this.$store.dispatch('scriptRecord/updateBgSet', true);
|
||||
competitionPracticalSceneStart(this.group, memberId, this.scriptMode)
|
||||
.then(res=>{
|
||||
this.isScriptRun = true;
|
||||
if (this.mapLocation) {
|
||||
const newMapLocation = {'offsetX': this.mapLocation.x, 'offsetY': this.mapLocation.y, 'scaleRate': this.mapLocation.scale};
|
||||
Vue.prototype.$jlmap.setOptions(newMapLocation);
|
||||
}
|
||||
})
|
||||
.catch(error=>{
|
||||
this.$messageBox(error.message);
|
||||
});
|
||||
},
|
||||
changeScriptMode(scriptMode) {
|
||||
const ScriptModeList = {
|
||||
TEACHING_MODE:'teach',
|
||||
PRACTICE_MODE:'practice',
|
||||
TEST_MODE:'test'
|
||||
};
|
||||
this.$store.dispatch('training/setScriptOperationType', ScriptModeList[scriptMode]);
|
||||
},
|
||||
quitQuest() {
|
||||
this.isScriptLoad = false;
|
||||
if (this.isScriptRun) {
|
||||
this.quitScriptTraining();
|
||||
}
|
||||
this.$store.dispatch('training/setScriptQuit');
|
||||
// this.$refs.chatbox.resetCoversition();
|
||||
// this.$store.dispatch('scriptRecord/updateSimulationPause', false);
|
||||
},
|
||||
quitScriptTraining() {
|
||||
let userRole = '';
|
||||
if (this.$route.query.prdType) {
|
||||
if (this.$route.query.prdType == '02') {
|
||||
userRole = 'DISPATCHER';
|
||||
} else if (this.$route.query.prdType == '01') {
|
||||
userRole = 'STATION_SUPERVISOR';
|
||||
} else if (this.$route.query.prdType == '04') {
|
||||
userRole = 'DRIVER';
|
||||
} else if (this.$route.query.prdType == '05') {
|
||||
userRole = 'DEPOT_DISPATCHER';
|
||||
} else {
|
||||
userRole = 'AUDIENCE';
|
||||
}
|
||||
}
|
||||
this.userRole = userRole;
|
||||
// this.$refs.chatbox.setMembers(this.$store.state.training.orignalUserRoleId);
|
||||
// this.$refs.chatbox.clearAllData();
|
||||
this.$store.dispatch('training/setPrdType', this.$route.query.prdType);
|
||||
this.$store.dispatch('training/setRoles', userRole);
|
||||
},
|
||||
clearAllData() {
|
||||
this.$refs.chatbox.clearAllData();
|
||||
},
|
||||
async back() {
|
||||
clearSimulation(this.group).then(res=>{
|
||||
this.isGoback = true;
|
||||
this.$store.dispatch('training/over').then(() => {
|
||||
if (this.$route.query.thirdDrts) {
|
||||
window.close();
|
||||
} else {
|
||||
this.$store.dispatch('LogOut').then(() => {
|
||||
location.reload();
|
||||
});
|
||||
}
|
||||
});
|
||||
}).catch(()=> {
|
||||
this.$message.error('结束仿真失败！');
|
||||
});
|
||||
},
|
||||
fieldPractice() {
|
||||
this.$refs.sceneList.doShow();
|
||||
},
|
||||
goTheoryQuiz() {
|
||||
this.$refs.theoryExamSelect.doShow();
|
||||
},
|
||||
startTheoryExam(mode) {
|
||||
this.$refs.theoryExam.doShow(mode);
|
||||
},
|
||||
getEmptyOperationalStatistics() {
|
||||
getEmptyOperationalStatistics(this.group).then(res=>{
|
||||
this.$refs.operationalStatistic.doShow(res.data);
|
||||
});
|
||||
},
|
||||
goToPay() {
|
||||
this.$refs.payPage.doShow();
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style rel="stylesheet/scss" lang="scss" scoped>
|
||||
@import "src/styles/mixin.scss";
|
||||
.trainingButton{
|
||||
position: absolute;
|
||||
left: 5px;
|
||||
}
|
||||
|
||||
.display-score {
|
||||
background-color: black;
|
||||
display: -moz-inline-box;
|
||||
display: inline-block;
|
||||
text-align: left;
|
||||
height: 32px;
|
||||
line-height: 24px;
|
||||
border-radius: 4px;
|
||||
padding-left: 2px;
|
||||
margin-left: 10px;
|
||||
font-family: "Microsoft" !important;
|
||||
font-size: 18px !important;
|
||||
color: #fff;
|
||||
}
|
||||
.haerbin_btn_box{
|
||||
width: 450px;
|
||||
bottom: 15px!important;
|
||||
}
|
||||
.display-draft {
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
bottom: 15px;
|
||||
.button-group-box{
|
||||
float: right;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,99 +0,0 @@
|
||||
<template>
|
||||
<el-dialog
|
||||
title="提交运营统计数据"
|
||||
:visible.sync="dialogShow"
|
||||
top="50px"
|
||||
width="500px"
|
||||
:before-do-close="roleDoClose"
|
||||
:close-on-click-modal="false"
|
||||
>
|
||||
<div v-for="(item,index) in resultData.itemVOS" :key="index" style="margin-top:10px;">
|
||||
<span class="itemDescription">{{ item.description+':' }}</span>
|
||||
<el-time-picker
|
||||
v-if="item.type=='Time'"
|
||||
v-model="dataList[index]"
|
||||
value-format="HH:mm"
|
||||
format="HH:mm"
|
||||
size="small"
|
||||
class="itemFormItem"
|
||||
@change="((val)=>{changeData(val,index)}) "
|
||||
/>
|
||||
<el-input v-if="item.type=='Non_Time'" v-model="dataList[index]" type="text" class="itemFormItem" size="small" :maxlength="100" @change="((val)=>{changeNoTimeData(val,index)}) " />
|
||||
</div>
|
||||
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button @click="roleDoClose">{{ $t('global.cancel') }}</el-button>
|
||||
<el-button type="primary" @click="confirm">{{ $t('global.confirm') }}</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</template>
|
||||
<script>
|
||||
import { competitionPracticalSceneFinish} from '@/api/competition';
|
||||
export default {
|
||||
name:'OperationalStatistics',
|
||||
data() {
|
||||
return {
|
||||
dialogShow:false,
|
||||
resultData:{
|
||||
score:0,
|
||||
itemVOS:[]
|
||||
},
|
||||
dataList:[]
|
||||
};
|
||||
},
|
||||
methods:{
|
||||
doShow(resultData) {
|
||||
this.dialogShow = true;
|
||||
this.resultData.score = resultData.score;
|
||||
this.resultData.itemVOS = resultData.itemVOS;
|
||||
this.dataList = [];
|
||||
},
|
||||
roleDoClose() {
|
||||
this.dialogShow = false;
|
||||
},
|
||||
confirm() {
|
||||
let result = true;
|
||||
if (this.resultData.itemVOS.length > 0) {
|
||||
this.resultData.itemVOS.forEach(item=>{
|
||||
if (!item.timeFilledInByUser && !item.userAnswer) {
|
||||
result = result && false;
|
||||
}
|
||||
});
|
||||
}
|
||||
if (!result) {
|
||||
this.$messageBox('请填写表单');
|
||||
} else {
|
||||
competitionPracticalSceneFinish(this.$route.query.group, this.resultData).then(res=>{
|
||||
this.$message.success('运营统计数据提交成功');
|
||||
// this.formatScore = res.data;
|
||||
// this.$messageBox('得分：' + this.formatScore);
|
||||
this.$emit('finishTraining', res.data);
|
||||
this.dialogShow = false;
|
||||
}).catch(error=>{
|
||||
this.$message.error('运营统计数据提交失败：' + error.message);
|
||||
});
|
||||
}
|
||||
},
|
||||
changeData(val, index) {
|
||||
this.resultData.itemVOS[index].timeFilledInByUser = val + ':00';
|
||||
},
|
||||
changeNoTimeData(val, index) {
|
||||
this.resultData.itemVOS[index].userAnswer = val;
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.itemDescription{
|
||||
margin-left: 20px;
|
||||
width:180px;
|
||||
display: inline-block;
|
||||
text-align: right;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.itemFormItem{
|
||||
width:200px;
|
||||
display:inline-block;
|
||||
vertical-align: middle;
|
||||
}
|
||||
</style>
|
||||
@ -1,91 +0,0 @@
|
||||
<template>
|
||||
<div class="question">
|
||||
<div class="ql-editor" v-html="appendIndex($escapeHTML(`${option.topic}`), $vnode.key)" />
|
||||
<template v-if="checkType(option, 'judge')">
|
||||
<el-radio-group v-model="answer" @change="onChnage">
|
||||
<el-radio v-for="(el,i) in option.optionList" :key="i" :label="$str2number(el.id)" style="display: inline">
|
||||
<span>{{ el.content }}</span>
|
||||
</el-radio>
|
||||
</el-radio-group>
|
||||
</template>
|
||||
<template v-else-if="checkType(option, 'select')">
|
||||
<el-radio-group v-model="answer" @change="onChnage">
|
||||
<el-radio v-for="(el,i) in option.optionList" :key="i" :label="$str2number(el.id)" style="display: block">
|
||||
<span>{{ $asc2chart(i+65) }}. </span>
|
||||
<div class="ql-editor" style="display: inline; padding: 0" v-html="$escapeHTML(el.content)" />
|
||||
</el-radio>
|
||||
</el-radio-group>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
export default {
|
||||
props: {
|
||||
value: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
option: {
|
||||
type: Object,
|
||||
required: true
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
answer: 0
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
value(val) {
|
||||
this.changeValue();
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.changeValue();
|
||||
},
|
||||
methods: {
|
||||
changeValue() {
|
||||
this.answer = parseInt(this.value);
|
||||
},
|
||||
checkType(option, type) {
|
||||
return option.type == type;
|
||||
},
|
||||
appendIndex(str, index) {
|
||||
return `${index + 1}. ${str}`;
|
||||
},
|
||||
onChnage(e) {
|
||||
const answer = `${e}`;
|
||||
this.$emit('input', answer);
|
||||
this.$emit('save', {userExamQuestionId: this.option.id, answer: answer});
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.rich-text {
|
||||
padding: 0;
|
||||
display: inline;
|
||||
}
|
||||
|
||||
.question {
|
||||
/deep/ {
|
||||
.ql-editor {
|
||||
line-height: 26px;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.el-radio {
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.el-radio__label {
|
||||
font-size: 16px;
|
||||
line-height: 26px;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,342 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-dialog v-dialogDrag title="场景列表" :visible.sync="dialogVisible" width="920px" center>
|
||||
<el-tabs v-model="activeName" type="card" style="height:550px">
|
||||
<el-tab-pane label="主场景列表" name="first">
|
||||
<div v-if="!hasPermission" style="margin-bottom: 10px;color: #f00;width: 100%;text-align: center;">
|
||||
尊敬的用户，您好：由于您暂无场景权限，现仅提供场景1试用，如需使用其他场景请
|
||||
<el-button type="text" style="text-decoration: underline" @click="goToPay">购买权限</el-button>
|
||||
</div>
|
||||
<div v-if="permisson.endTime" style="margin-bottom: 10px;color: #f00;width: 100%;text-align: center;">
|
||||
{{ `您的场景权限截止时间：${permisson.endTime || '永久'}。` }}
|
||||
<el-button type="text" style="text-decoration: underline" @click="goToPay">立即续费</el-button>
|
||||
</div>
|
||||
<el-table :data="mainSceneData" border :span-method="objectSpanMethod" height="465" stripe :cell-style="{padding: '8px 0'}">
|
||||
<el-table-column type="index" width="50" label="序号" />
|
||||
<el-table-column prop="type" width="200" label="类别" />
|
||||
<el-table-column prop="scene" width="350" label="场景" />
|
||||
<el-table-column label="操作">
|
||||
<template slot-scope="scope">
|
||||
<div v-if="scope.row.result">
|
||||
<template v-for="(each, index) in scope.row.result">
|
||||
<el-button :key="index" type="primary" size="small" :disabled="!hasPermission && each.name !=='场景1'" style="margin-right: 8px;margin-left: 0;margin-bottom: 5px" @click="handleLoad(each)">{{ each.name }}</el-button>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { getDraftScriptByGroupNew } from '@/api/script';
|
||||
import {loadCompetitionPracticalScene, getCompetitionPracticalScene, queryCompetitionPracticalPermissions} from '@/api/competition';
|
||||
import { EventBus } from '@/scripts/event-bus';
|
||||
import ConstConfig from '@/scripts/ConstConfig';
|
||||
|
||||
export default {
|
||||
name:'ChangeMap',
|
||||
data() {
|
||||
return {
|
||||
projectMapList:[],
|
||||
dialogVisible: false,
|
||||
selectMapId:'',
|
||||
hasPermission: false,
|
||||
permisson: {},
|
||||
form: {
|
||||
type: ''
|
||||
},
|
||||
row: '',
|
||||
activeName: 'first',
|
||||
memberList: [],
|
||||
selectMapLineCode:'',
|
||||
mainSceneData: [
|
||||
{type: '车辆故障', scene: '列车救援', result:[]},
|
||||
{type: '信号系统故障', scene: '道岔故障', result:[]},
|
||||
{type: '信号系统故障', scene: '区域控制器故障', result:[]},
|
||||
{type: '信号系统故障', scene: '联锁故障', result:[]},
|
||||
{type: '供电系统故障', scene: '接触轨(网)断电', result:[]},
|
||||
{type: '供电系统故障', scene: '车站照明熄灭影响乘降', result:[]},
|
||||
{type: '车站机电设备故障', scene: '站台门故障', result:[]},
|
||||
// {type: '车站机电设备故障', scene: '车站照明故障', result:[]},
|
||||
{type: '限速', scene: '列车限速', result:[]},
|
||||
{type: '轨道故障', scene: '线路故障影响列车运行', result:[]},
|
||||
{type: '轨道故障', scene: '计轴故障', result:[]}
|
||||
// {type: '在区域控制器故障', scene: '线路故障多车降级', result:[]}
|
||||
]
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
'$store.state.socket.payOrder':function (val) {
|
||||
this.queryPermission();
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.queryPermission();
|
||||
getCompetitionPracticalScene({pageSize:100, pageNum:1}).then(res=>{
|
||||
if (res.data.list && res.data.list.length > 0) {
|
||||
const list = res.data.list.sort((a, b) => {
|
||||
return parseInt(a.name.replace('场景', '')) - parseInt(b.name.replace('场景', ''));
|
||||
});
|
||||
list.forEach(each=>{
|
||||
if (each.name == '场景1' || each.name == '场景2' || each.name == '场景3' || each.name == '场景7') {
|
||||
this.mainSceneData[1].result.push({id:each.id, name:each.name, description: each.description, disposalProcesses: each.disposalProcesses});
|
||||
} else if (each.name == '场景4') {
|
||||
this.mainSceneData[0].result.push({id:each.id, name:'场景4', description: each.description, disposalProcesses: each.disposalProcesses});
|
||||
} else if (each.name == '场景5' || each.name == '场景11') {
|
||||
this.mainSceneData[4].result.push({id:each.id, name:each.name, description: each.description, disposalProcesses: each.disposalProcesses});
|
||||
} else if (each.name == '场景6') {
|
||||
this.mainSceneData[9].result.push({id:each.id, name:each.name, description: each.description, disposalProcesses: each.disposalProcesses});
|
||||
} else if (each.name == '场景9') {
|
||||
this.mainSceneData[6].result.push({id:each.id, name:'场景9', description: each.description, disposalProcesses: each.disposalProcesses});
|
||||
} else if (each.name == '场景8') {
|
||||
this.mainSceneData[5].result.push({id:each.id, name:'场景8', description: each.description, disposalProcesses: each.disposalProcesses});
|
||||
} else if (each.name == '场景10') {
|
||||
this.mainSceneData[7].result.push({id:each.id, name:'场景10', description: each.description, disposalProcesses: each.disposalProcesses});
|
||||
} else if (each.name == '场景12') {
|
||||
this.mainSceneData[2].result.push({id:each.id, name:'场景12', description: each.description, disposalProcesses: each.disposalProcesses});
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
methods:{
|
||||
doShow() {
|
||||
this.dialogVisible = true;
|
||||
},
|
||||
doClose() {
|
||||
this.dialogVisible = false;
|
||||
},
|
||||
queryPermission() {
|
||||
this.permisson = {};
|
||||
queryCompetitionPracticalPermissions({mapId:this.$route.query.mapId}).then(res => {
|
||||
this.hasPermission = !!res.data;
|
||||
if (res.data) { this.permisson = res.data; }
|
||||
}).catch(() => {
|
||||
this.$message.error('获取场景权限异常！');
|
||||
});
|
||||
},
|
||||
async handleLoad(row) {
|
||||
this.row = row;
|
||||
const response = await loadCompetitionPracticalScene(this.$route.query.group, row.id);
|
||||
if (response.code == 200) {
|
||||
const res = await getDraftScriptByGroupNew(this.$route.query.group);
|
||||
if (res.code == 200) {
|
||||
const playerList = [];
|
||||
EventBus.$emit('clearRunSeries');
|
||||
EventBus.$emit('loadScene');
|
||||
const notifyData = this.$notify({
|
||||
title: res.data.name,
|
||||
dangerouslyUseHTMLString: true,
|
||||
message: `<p><span style="color: #000;font-weight: bold;">场景描述：</span>${row.description}</p>`,
|
||||
customClass: 'notify_box',
|
||||
showClose: false,
|
||||
offset: 75,
|
||||
duration: 0
|
||||
});
|
||||
this.$store.commit('training/setNotifySelected', notifyData);
|
||||
if (res.data.memberList && res.data.memberList.length > 0) {
|
||||
this.form.type = '';
|
||||
res.data.memberList.sort((a, b) => {
|
||||
return parseInt(a.id) - parseInt(b.id);
|
||||
});
|
||||
this.$store.dispatch('training/setMemberList', {memberList:res.data.memberList, userId:this.$store.state.user.id});
|
||||
const activeMemberList = [];
|
||||
res.data.actionList.forEach((activeMember)=>{
|
||||
if (!(activeMemberList.length > 0 && activeMemberList.includes(activeMember.memberId))) {
|
||||
activeMemberList.push(activeMember.memberId);
|
||||
}
|
||||
});
|
||||
|
||||
res.data.memberList.forEach(member=>{
|
||||
if (activeMemberList.includes(member.id)) {
|
||||
playerList.push(Object.assign({}, member));
|
||||
}
|
||||
});
|
||||
|
||||
playerList.map(member=>{
|
||||
switch (member.type) {
|
||||
case 'DISPATCHER': {
|
||||
member.label = '行调' + (member.name ? member.name : '');
|
||||
break;
|
||||
}
|
||||
case 'STATION_SUPERVISOR': {
|
||||
const device = this.$store.getters['map/getDeviceByCode'](member.deviceCode);
|
||||
if (device) {
|
||||
member.label = '行值' + device.name;
|
||||
member.deviceName = device.name;
|
||||
}
|
||||
break;
|
||||
}
|
||||
case 'DRIVER': {
|
||||
member.deviceName = member.deviceCode;
|
||||
member.label = '司机' + member.deviceName;
|
||||
break;
|
||||
}
|
||||
case 'MAINTAINER': {
|
||||
member.label = '通号' + (member.name ? member.name : '');
|
||||
break;
|
||||
}
|
||||
case 'DEPOT_DISPATCHER': {
|
||||
member.label = '车辆段/停车场调度' + (member.name ? member.name : '');
|
||||
break;
|
||||
}
|
||||
case 'PARENT_DEPARTMENT': {
|
||||
member.label = '上级部门' + (member.name ? member.name : '');
|
||||
break;
|
||||
}
|
||||
case 'ELECTRIC_DISPATCHER': {
|
||||
member.label = '电力调度' + (member.name ? member.name : '');
|
||||
break;
|
||||
}
|
||||
case 'SIGNAL_BUILDING': {
|
||||
member.label = '信号楼' + (member.name ? member.name : '');
|
||||
break;
|
||||
}
|
||||
case 'STATION_ASSISTANT': {
|
||||
const device = this.$store.getters['map/getDeviceByCode'](member.deviceCode);
|
||||
if (device) {
|
||||
member.label = '车站助理-' + device.name + (member.name ? member.name : '');
|
||||
member.deviceName = device.name;
|
||||
}
|
||||
// member.label = '车站助理' + (member.name ? member.name : '');
|
||||
break;
|
||||
}
|
||||
case 'STATION_MASTER': {
|
||||
const device = this.$store.getters['map/getDeviceByCode'](member.deviceCode);
|
||||
if (device) {
|
||||
member.label = '车站站长-' + device.name + (member.name ? member.name : '');
|
||||
member.deviceName = device.name;
|
||||
}
|
||||
// member.label = '车站站长' + (member.name ? member.name : '');
|
||||
break;
|
||||
}
|
||||
case 'STATION_SIGNALER': {
|
||||
const device = this.$store.getters['map/getDeviceByCode'](member.deviceCode);
|
||||
if (device) {
|
||||
member.label = '车站信号员-' + device.name + (member.name ? member.name : '');
|
||||
member.deviceName = device.name;
|
||||
}
|
||||
// member.label = '车站信号员' + (member.name ? member.name : '');
|
||||
break;
|
||||
}
|
||||
case 'STATION_PASSENGER': {
|
||||
const device = this.$store.getters['map/getDeviceByCode'](member.deviceCode);
|
||||
if (device) {
|
||||
member.label = '车站客运员-' + device.name + (member.name ? member.name : '');
|
||||
member.deviceName = device.name;
|
||||
}
|
||||
// member.label = '车站客运员' + (member.name ? member.name : '');
|
||||
break;
|
||||
}
|
||||
case 'STATION_SWITCH_MAN': {
|
||||
const device = this.$store.getters['map/getDeviceByCode'](member.deviceCode);
|
||||
if (device) {
|
||||
member.label = '车站扳道员-' + device.name + (member.name ? member.name : '');
|
||||
member.deviceName = device.name;
|
||||
}
|
||||
// member.label = '车站扳道员' + (member.name ? member.name : '');
|
||||
break;
|
||||
}
|
||||
case 'STATION_FACILITATOR': {
|
||||
const device = this.$store.getters['map/getDeviceByCode'](member.deviceCode);
|
||||
if (device) {
|
||||
member.label = '车站引导员-' + device.name + (member.name ? member.name : '');
|
||||
member.deviceName = device.name;
|
||||
}
|
||||
// member.label = '车站引导员' + (member.name ? member.name : '');
|
||||
break;
|
||||
}
|
||||
case 'STATION_WORKER': {
|
||||
// member.label = '车站工务工' + (member.name ? member.name : '');
|
||||
const device = this.$store.getters['map/getDeviceByCode'](member.deviceCode);
|
||||
if (device) {
|
||||
member.label = '车站工务工-' + device.name + (member.name ? member.name : '');
|
||||
member.deviceName = device.name;
|
||||
}
|
||||
break;
|
||||
}
|
||||
case 'DEVICE_MANAGER': {
|
||||
const device = this.$store.getters['map/getDeviceByCode'](member.deviceCode);
|
||||
if (device) {
|
||||
member.label = '设备管理员-' + device.name + (member.name ? member.name : '');
|
||||
member.deviceName = device.name;
|
||||
}
|
||||
// member.label = '设备管理员' + (member.name ? member.name : '');
|
||||
break;
|
||||
}
|
||||
case 'TRAIN_MASTER': {
|
||||
const device = this.$store.getters['map/getDeviceByCode'](member.deviceCode);
|
||||
if (device) {
|
||||
// + device.name
|
||||
member.label = '车务段段长-' + (member.name ? member.name : '');
|
||||
member.deviceName = device.name;
|
||||
}
|
||||
break;
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
if (res.data.mapLocation) {
|
||||
this.mapLocation = res.data.mapLocation;
|
||||
}
|
||||
this.confirm(playerList);
|
||||
}
|
||||
}
|
||||
},
|
||||
async handleExplain(row) {
|
||||
const ossData = ConstConfig.ConstSelect.ossList.find(ele => { return ele.name == row.name; });
|
||||
const href = `https://joylink.club/oss/cbtc/race/${ossData.url}`;
|
||||
window.open(href, '_blank');
|
||||
},
|
||||
confirm(playerList) {
|
||||
this.$emit('selectScript', {playerList:playerList, mapLocation:this.mapLocation});
|
||||
this.doClose();
|
||||
},
|
||||
goToPay() {
|
||||
this.$emit('goToPay');
|
||||
this.doClose();
|
||||
},
|
||||
objectSpanMethod({ row, column, rowIndex, columnIndex }) {
|
||||
if (rowIndex === 1 && columnIndex === 1) {
|
||||
return {
|
||||
rowspan: 3,
|
||||
colspan: 1
|
||||
};
|
||||
} else if ((rowIndex === 4 || rowIndex === 8) && columnIndex === 1) {
|
||||
return {
|
||||
rowspan: 2,
|
||||
colspan: 1
|
||||
};
|
||||
} else if ((rowIndex === 2 || rowIndex === 3 || rowIndex === 5 || rowIndex === 9) && columnIndex === 1) {
|
||||
return {
|
||||
rowspan: 0,
|
||||
colspan: 0
|
||||
};
|
||||
} else {
|
||||
return {
|
||||
rowspan: 1,
|
||||
colspan: 1
|
||||
};
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.tooltip-box {
|
||||
white-space:pre-wrap;
|
||||
}
|
||||
.notify_box{
|
||||
width: 300px;
|
||||
white-space: inherit;
|
||||
&.el-notification.right{
|
||||
right: 5px;
|
||||
padding: 6px 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,275 +0,0 @@
|
||||
<template>
|
||||
<el-dialog
|
||||
title="竞赛结果详情"
|
||||
:visible.sync="dialogShow"
|
||||
top="50px"
|
||||
width="900px"
|
||||
:before-do-close="doClose"
|
||||
class="OSResult"
|
||||
:close-on-click-modal="false"
|
||||
>
|
||||
<div class="operationStatisticResult">
|
||||
<div class="OSTcompleted">
|
||||
<span v-if="completed" style="font-size:16px;color:green">完成</span>
|
||||
<span v-else style="font-size:16px;color:red">未完成</span>
|
||||
<span style="margin-left:20px;font-size:16px;">满分：{{ fullScore }} 分</span>
|
||||
<span style="margin-left:20px;font-size:16px;">得分：{{ userScore }} 分</span>
|
||||
</div>
|
||||
<div class="OSTitle"><span>关键步骤信息</span><span style="margin-left:10px;">{{ '(得分: '+userScoreOfCommand+' / 满分: '+ fullScoreOfCommand+')' }}</span></div>
|
||||
<el-table :data="commandPublishStatisticVO" border class="OSTTable3">
|
||||
<!-- height="400" -->
|
||||
<el-table-column prop="actionId" label="步骤描述" width="230">
|
||||
<template slot-scope="scope">
|
||||
{{ covert(scope.row.actionVO) }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="keyWords" label="关键字" width="200">
|
||||
<template slot-scope="scope">
|
||||
<el-tag v-for="(tag,index) in scope.row.keyWords" :key="index" class="eachTag">{{ tag }}</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="timeConsumed" label="用时" width="100" />
|
||||
<el-table-column prop="timeOut" label="超时时间" width="100">
|
||||
<template slot-scope="scope">
|
||||
{{ scope.row.timeOut?scope.row.timeOut+'s':'' }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="score" label="步骤总分" width="100" />
|
||||
<el-table-column prop="finalPointsDeducted" label="用户扣分" width="100" />
|
||||
</el-table>
|
||||
<div class="OSTitle">
|
||||
<span>运营统计信息</span>
|
||||
<span style="margin-left:10px;">{{ '(得分: '+userScoreOfOperationStatistic+' / 满分: '+ fullScoreOfOperationStatistic+')' }}</span>
|
||||
</div>
|
||||
<el-table :data="operationStaticItemVOs" border class="OSTTable">
|
||||
<el-table-column prop="description" label="数据名称" width="300" />
|
||||
<el-table-column label="正确答案" width="150">
|
||||
<template slot-scope="scope">
|
||||
<div v-if="scope.row.type=='Time'">{{ covertTime(scope.row.time) }}</div>
|
||||
<div v-else-if="scope.row.type=='Non_Time'">{{ scope.row.standardAnswer }}</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="用户填写" width="150">
|
||||
<template slot-scope="scope">
|
||||
<div v-if="scope.row.type=='Time'">{{ covertTime(scope.row.timeFilledInByUser) }}</div>
|
||||
<div v-else-if="scope.row.type=='Non_Time'">{{ scope.row.userAnswer }}</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="finalPointsDeducted" label="扣分" />
|
||||
</el-table>
|
||||
<div class="OSTSignInfo">
|
||||
<span>运营指标信息</span>
|
||||
<span style="margin-left:10px;">{{ '(得分: '+userScoreOfOperationIndex+' / 满分: '+fullScoreOfOperationIndex+')' }}</span>
|
||||
</div>
|
||||
<div class="OSTSignInfoTips">
|
||||
<span class="el-icon-info" style="font-size: 16px;" /> 若竞赛未完成，运营指标不得分
|
||||
</div>
|
||||
<div class="OSTSignInfoTips">停运列车信息</div>
|
||||
<el-table :data="finalStoppedRunningStatistics" border class="OSTTable4">
|
||||
<el-table-column prop="groupNumber" label="车组号" width="400" />
|
||||
<el-table-column prop="finalPointsDeducted" label="扣分" width="430" />
|
||||
</el-table>
|
||||
<div class="OSTSignInfoTips">晚点列车信息</div>
|
||||
<el-table :data="finalLateStatistics" border class="OSTTable1">
|
||||
<el-table-column prop="groupNumber" label="车组号" width="300" />
|
||||
<el-table-column prop="dt" label="晚点时间" width="300">
|
||||
<template slot-scope="scope">
|
||||
{{ scope.row.dt }} s
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="finalPointsDeducted" label="扣分" width="230" />
|
||||
</el-table>
|
||||
<div class="OSTSignInfoTips">区间停车信息</div>
|
||||
<el-table :data="finalStopInSectionStatistics" border class="OSTTable2">
|
||||
<el-table-column prop="groupNumber" label="车组号" width="300" />
|
||||
<el-table-column prop="duration" label="停车时长" width="300">
|
||||
<template slot-scope="scope">
|
||||
{{ scope.row.duration }} s
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="finalPointsDeducted" label="扣分" width="230" />
|
||||
</el-table>
|
||||
</div>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button type="primary" @click="doClose">{{ $t('global.confirm') }}</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</template>
|
||||
<script>
|
||||
import {covertOperate} from '@/views/newMap/displayNew/scriptDisplay/component/covertOperation';
|
||||
export default {
|
||||
name:'TestResult',
|
||||
data() {
|
||||
return {
|
||||
dialogShow:false,
|
||||
operationStaticItemVOs:[], // 运营统计信息
|
||||
finalLateStatistics:[], // 晚点列车信息
|
||||
finalStopInSectionStatistics:[], // 区间停车信息
|
||||
commandPublishStatisticVO:[], // 关键步骤信息
|
||||
finalStoppedRunningStatistics:[], // 停运列车列表
|
||||
completed:false, // 竞赛是否已完成
|
||||
fullScore:'', // 总分
|
||||
userScore:'', // 用户得分
|
||||
fullScoreOfCommand:0, // 指令发布部分总分
|
||||
userScoreOfCommand:0, // 关键步骤部分用户得分
|
||||
fullScoreOfOperationStatistic:0, // 运营统计满分
|
||||
userScoreOfOperationStatistic:0, // 运营统计用户得分
|
||||
fullScoreOfOperationIndex:0, // 运营指标满分
|
||||
userScoreOfOperationIndex:0 // 运营指标用户得分
|
||||
};
|
||||
},
|
||||
methods:{
|
||||
doShow({data}) {
|
||||
this.dialogShow = true;
|
||||
this.completed = data.completed;
|
||||
this.operationStaticItemVOs = data.operationStatisticVO.itemVOS;
|
||||
this.finalLateStatistics = data.operationIndexStatisticVO.finalLateStatistics;
|
||||
this.finalStopInSectionStatistics = data.operationIndexStatisticVO.finalStopInSectionStatistics;
|
||||
this.finalStoppedRunningStatistics = data.operationIndexStatisticVO.finalStoppedRunningStatistics;
|
||||
this.commandPublishStatisticVO = data.commandPublishStatisticVO;
|
||||
this.fullScore = data.fullScore;
|
||||
this.userScore = data.userScore;
|
||||
this.fullScoreOfCommand = data.fullScoreOfCommand;
|
||||
this.userScoreOfCommand = data.userScoreOfCommand;
|
||||
this.fullScoreOfOperationStatistic = data.fullScoreOfOperationStatistic;
|
||||
this.userScoreOfOperationStatistic = data.userScoreOfOperationStatistic;
|
||||
this.fullScoreOfOperationIndex = data.fullScoreOfOperationIndex;
|
||||
this.userScoreOfOperationIndex = data.userScoreOfOperationIndex;
|
||||
},
|
||||
doClose() {
|
||||
this.dialogShow = false;
|
||||
},
|
||||
covertTime(time) {
|
||||
return time ? time.slice(0, time.length - 3) : '';
|
||||
},
|
||||
covert(element) {
|
||||
const member = this.$store.state.training.memberData[element.memberId];
|
||||
let resultData = '';
|
||||
if (element.type == 'Accept_Conversation_Invitation') {
|
||||
resultData = member.label + '请接受会话邀请';
|
||||
} else if (element.type == 'Conversation') {
|
||||
resultData = member.label + '说：' + element.content;
|
||||
} else if (element.type == 'Operation') {
|
||||
resultData = covertOperate(element.operationType, element.operationParamMap);
|
||||
resultData = resultData.replace('请', member.label);
|
||||
// this.scriptTipMessage = '请找到' + deviceName + '，执行【' + operateName.label + '】操作';
|
||||
} else if (element.type == 'Exit_Conversation') {
|
||||
resultData = member.label + '结束当前会话';
|
||||
} else if (element.type == 'Start_Conversation' ) {
|
||||
const inviteMember = [];
|
||||
// this.$emit('allowCreatCoversition');
|
||||
if (element.communicationObject) {
|
||||
if (element.communicationObject == 'ALL_STATION') {
|
||||
inviteMember.push('所有车站');
|
||||
} else if (element.communicationObject == 'ALL_TRAIN') {
|
||||
inviteMember.push('所有司机');
|
||||
}
|
||||
} else {
|
||||
element.conversationMemberIds.forEach(id=>{
|
||||
if (element.memberId != id) {
|
||||
inviteMember.push((this.memberList[id] || {label: ''}).label);
|
||||
}
|
||||
});
|
||||
}
|
||||
resultData = member.label + '创建会话,选择' + inviteMember.toString();
|
||||
} else if (element.type == 'Command') {
|
||||
const targetName = this.memberList[element.commandInitiateVO.targetMemberId];
|
||||
const CommandList = {
|
||||
Drive_Ahead:'确认运行至前方站',
|
||||
Route_Block_Drive:'进路闭塞法行车',
|
||||
Switch_Hook_Lock: '道岔钩锁',
|
||||
Drive_Through_The_Red_Light:'越红灯行驶',
|
||||
Drive_Through_The_Guide_Signal:'越引导信号行驶',
|
||||
Open_Or_Close_Door:'开关门',
|
||||
Set_Speed_Limit:'设置限速',
|
||||
Turn_Direction: '换端',
|
||||
Drive_To: '驾驶至',
|
||||
Apply_URM_Mode: '转URM模式',
|
||||
Apply_RM_Mode: '转RM模式',
|
||||
Apply_CM_Mode: '转CM模式',
|
||||
Apply_AM_Mode: '转AM模式'
|
||||
};
|
||||
resultData = member.label + '对【' + targetName.label + '】下达【' + CommandList[element.commandInitiateVO.commandType] + '】指令';
|
||||
} else if (element.type == 'Drive') {
|
||||
if (element.targetSectionCode) {
|
||||
const section = this.$store.getters['map/getDeviceByCode'](element.targetSectionCode);
|
||||
if (section && section.name) {
|
||||
resultData = member.label + '把车开到区段' + section.name;
|
||||
}
|
||||
}
|
||||
}
|
||||
return resultData;
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.operationStatisticResult{
|
||||
height: 500px;
|
||||
overflow: auto;
|
||||
&::-webkit-scrollbar {
|
||||
width: 4px;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-thumb {
|
||||
border-radius: 10px;
|
||||
background: #c3c3c3;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-track {
|
||||
border-radius: 0;
|
||||
background: #f0f0f0;
|
||||
}
|
||||
}
|
||||
.OSTitle{
|
||||
padding: 10px 5px;
|
||||
font-size: 15px;
|
||||
font-weight: bold;
|
||||
}
|
||||
.OSTTable{
|
||||
width:832px;
|
||||
}
|
||||
.OSTTable1,.OSTTable2{
|
||||
width:832px;
|
||||
}
|
||||
.OSTTable3,.OSTTable4{
|
||||
width:832px;
|
||||
}
|
||||
.OSTcompleted{
|
||||
padding: 5px 5px;
|
||||
font-size: 15px;
|
||||
}
|
||||
.OSTSignInfo{
|
||||
padding: 15px 5px 10px 5px;
|
||||
font-size: 15px;
|
||||
font-weight: bold;
|
||||
}
|
||||
.OSTSignInfoTips{
|
||||
padding: 10px 5px;
|
||||
font-size: 15px;
|
||||
}
|
||||
.eachTag{
|
||||
margin-left:10px;
|
||||
}
|
||||
</style>
|
||||
<style lang="scss">
|
||||
.OSResult .el-dialog__body{
|
||||
padding: 10px 20px;
|
||||
}
|
||||
// .OSTTable3 .el-table__body-wrapper.is-scrolling-none {
|
||||
// &::-webkit-scrollbar{
|
||||
// width: 4px !important;
|
||||
// }
|
||||
// &::-webkit-scrollbar-thumb {
|
||||
// border-radius: 10px;
|
||||
// background: #c3c3c3;
|
||||
// }
|
||||
|
||||
// &::-webkit-scrollbar-track {
|
||||
// border-radius: 0;
|
||||
// background: #f0f0f0;
|
||||
// }
|
||||
// }
|
||||
|
||||
</style>
|
||||
|
||||
@ -1,618 +0,0 @@
|
||||
<template>
|
||||
<el-dialog :visible.sync="dialogVisible" :close-on-click-modal="false" class="theoryExam" fullscreen style="background:#eeeeee" :before-close="close">
|
||||
<div v-if="!isResult" v-loading="loading" class="theoryExamBody">
|
||||
<div class="theoryExamBodyL">
|
||||
<div class="theoryExamQuestion">
|
||||
<div class="QuestionName">{{ covert() }}</div>
|
||||
<div class="choiceList">
|
||||
<div v-if="judgeQuestionType('radio',questionList[currentQuestionNum])">
|
||||
<el-radio
|
||||
v-for="(choice,index) in questionList[currentQuestionNum].optionList "
|
||||
:key="index"
|
||||
v-model="currentRadioAnswer"
|
||||
:label="choice.id"
|
||||
class="eachChoice"
|
||||
@change="changeAnswer"
|
||||
>{{ choiceTypeList[index]+'、 '+choice.content }}</el-radio>
|
||||
</div>
|
||||
<div v-else-if="judgeQuestionType('multi',questionList[currentQuestionNum])">
|
||||
<el-checkbox-group v-model="currentSelectAnswer" @change="changeAnswer">
|
||||
<el-checkbox
|
||||
v-for="(choice,index) in questionList[currentQuestionNum].optionList "
|
||||
:key="index"
|
||||
:label="choice.id"
|
||||
class="eachChoice"
|
||||
>{{ choiceTypeList[index]+'、 '+choice.content }}</el-checkbox>
|
||||
</el-checkbox-group>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="!isTest&&isSelect" class="correctAnswer" :style="answerIsCorrect?'color: #67C23A;':'color: #ff4d4f;'">
|
||||
<span class="practiceIconTips" :class="answerIsCorrect?'el-icon-success':'el-icon-error'" />
|
||||
<span class="practicecorrectAnswer">{{ '答案：'+correctAnswer }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="buttonList" :style="!isTest?'bottom: 15px;':''">
|
||||
<el-button v-if="!isTest" :disabled="isSelect" type="success" class="commitQuestion" size="small" @click="commitQuestion">确 认</el-button>
|
||||
<div class="prevAndNext">
|
||||
<el-button-group>
|
||||
<el-button type="primary" size="small" :disabled="currentQuestionNum==0" @click="prevQuestion"><span class="el-icon-arrow-left" style="margin-right:5px;" />上一题</el-button>
|
||||
<el-button type="primary" size="small" :disabled="checkNextButton()" @click="nextQuestion">下一题<span class="el-icon-arrow-right" style="margin-left:5px;" /></el-button>
|
||||
</el-button-group>
|
||||
</div>
|
||||
<el-button v-if="isTest" type="success" class="commitExam" size="small" @click="commitExam">交卷</el-button>
|
||||
</div>
|
||||
<div v-if="isTest" class="examTips">距离测试结束还有 {{ currentTime }}</div>
|
||||
</div>
|
||||
<div class="theoryExamBodyR">
|
||||
<div v-if="mode=='test'" class="theoryExamBodyRT">
|
||||
<span class="noAnswer">未作答</span>
|
||||
<span class="hasAnswer">已作答</span>
|
||||
<!-- <span class="hasSign">标记</span> -->
|
||||
</div>
|
||||
<div class="theoryExamQuestionList">
|
||||
<!-- :class="item.answerOptionId.length>0?'hasSelect':''" -->
|
||||
<div v-for="(item,index) in questionList" :id="'eachQuestionNum'+index" :key="index" class="eachQuestionNum" @click="changeQuestion(index+1)">
|
||||
{{ (index+1) }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else class="theoryExamBody">
|
||||
<div v-if="theoryExamWrongList.length>0" class="theoryExamWrongList">
|
||||
<div class="theoryExamScore">{{ '测验得分：' }}<span class="resultScoreStyle">{{ resultScore+' 分' }}</span></div>
|
||||
<div class="theoryExamWrongListName">错题列表</div>
|
||||
<div class="theoryExamWrongListL">
|
||||
<div class="QuestionName">{{ covertWrong() }}</div>
|
||||
<div class="choiceList">
|
||||
<div v-if="judgeQuestionType('radio',theoryExamWrongList[wrongQuestionNum].question)">
|
||||
<el-radio
|
||||
v-for="(choice,index) in theoryExamWrongList[wrongQuestionNum].question.optionList "
|
||||
:key="index"
|
||||
v-model="currentRadioAnswer"
|
||||
:label="choice.id"
|
||||
:disabled="true"
|
||||
class="eachChoice"
|
||||
>{{ choiceTypeList[index]+'、 '+choice.content }}</el-radio>
|
||||
</div>
|
||||
<div v-else-if="judgeQuestionType('multi',theoryExamWrongList[wrongQuestionNum].question)">
|
||||
<el-checkbox-group v-model="currentSelectAnswer">
|
||||
<el-checkbox
|
||||
v-for="(choice,index) in theoryExamWrongList[wrongQuestionNum].question.optionList"
|
||||
:key="index"
|
||||
:label="choice.id"
|
||||
:disabled="true"
|
||||
class="eachChoice"
|
||||
>{{ choiceTypeList[index]+'、 '+choice.content }}</el-checkbox>
|
||||
</el-checkbox-group>
|
||||
</div>
|
||||
</div>
|
||||
<div class="correctAnswer" style="color: #ff4d4f;">
|
||||
<span class="practicecorrectAnswer">{{ '答案：'+wrongCorrectAnswer() }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="theoryExamWrongListR">
|
||||
<div class="theoryExamWrongQuestionList">
|
||||
<div v-for="(wrongQuestion,index) in theoryExamWrongList" :key="index" class="eachQuestionNum" :class="wrongQuestionNum==index?'active':''" @click="changeWrongQuestion(index)">
|
||||
{{ index+1 }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else>
|
||||
<div class="el-icon-success theoryExamEnd" />
|
||||
<div class="theoryExamScore1">{{ '测验得分：' }}<span class="resultScoreStyle">{{ resultScore+' 分' }}</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</template>
|
||||
<script>
|
||||
import {getItemListByProjectCode, updatePracticeQuestionProgress, getPracticeQuestionProgress, submitPracticeQuestionData} from '@/api/competition';
|
||||
export default {
|
||||
name:'TheoryExam',
|
||||
data() {
|
||||
return {
|
||||
loading:false,
|
||||
dialogVisible:false,
|
||||
mode:'',
|
||||
currentTime:'00:30:00',
|
||||
allTime:30 * 60,
|
||||
questionList:[],
|
||||
inter:null,
|
||||
currentQuestionNum:0,
|
||||
wrongQuestionNum:0,
|
||||
currentSelectAnswer:[],
|
||||
currentRadioAnswer:'',
|
||||
answerIsCorrect:false,
|
||||
hasAnswerList:{},
|
||||
correctAnswer:'',
|
||||
isSelect:false,
|
||||
isResult:false,
|
||||
theoryExamWrongList:[],
|
||||
resultScore:0,
|
||||
choiceTypeList:['A', 'B', 'C', 'D', 'E', 'F', 'G']
|
||||
};
|
||||
},
|
||||
computed:{
|
||||
isTest() {
|
||||
return this.mode == 'test';
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
doShow({type}) {
|
||||
this.isResult = false;
|
||||
this.loading = true;
|
||||
this.allTime = 30 * 60;
|
||||
this.currentTime = '00:30:00';
|
||||
this.isSelect = false;
|
||||
this.questionList = [];
|
||||
this.currentSelectAnswer = [];
|
||||
this.currentRadioAnswer = '';
|
||||
this.hasAnswerList = {};
|
||||
let currentMode = '01';
|
||||
if (type == 'practice') {
|
||||
currentMode = '01';
|
||||
} else if (type == 'test') {
|
||||
currentMode = '02';
|
||||
}
|
||||
this.mode = type;
|
||||
getItemListByProjectCode('DRTS', {mode:currentMode}).then(res=>{
|
||||
this.questionList = res.data;
|
||||
if (this.isTest) {
|
||||
this.questionList.forEach((question, index)=>{
|
||||
this.hasAnswerList[index] = {questionId:question.id, answerContents:[]};
|
||||
});
|
||||
}
|
||||
if (this.mode == 'practice') {
|
||||
getPracticeQuestionProgress('DRTS').then(res=>{
|
||||
this.currentQuestionNum = res.data.questionIndex;
|
||||
this.loading = false;
|
||||
}).catch(error=>{
|
||||
console.log(error.message);
|
||||
});
|
||||
} else {
|
||||
this.initCurrentTime();
|
||||
this.currentQuestionNum = 0;
|
||||
this.wrongQuestionNum = 0;
|
||||
this.loading = false;
|
||||
}
|
||||
});
|
||||
this.dialogVisible = true;
|
||||
},
|
||||
close() {
|
||||
this.dialogVisible = false;
|
||||
clearInterval(this.inter);
|
||||
},
|
||||
covert() {
|
||||
const typeList = {'judge':'判断', 'select':'选择', 'multi':'多选'};
|
||||
const currentQuestion = this.questionList[this.currentQuestionNum];
|
||||
if (currentQuestion) {
|
||||
return '第 ' + (this.currentQuestionNum + 1) + ' 题、[' + typeList[currentQuestion.type] + '] ' + currentQuestion.topic + ' (' + currentQuestion.score + '分)';
|
||||
}
|
||||
return '';
|
||||
},
|
||||
initCurrentTime() {
|
||||
this.inter = setInterval(() => {
|
||||
if (this.allTime > 0) {
|
||||
this.allTime--;
|
||||
let seconds = this.allTime % 60;
|
||||
let minutes = (this.allTime - this.allTime % 60) / 60;
|
||||
minutes = minutes > 9 ? minutes : '0' + minutes;
|
||||
seconds = seconds > 9 ? seconds : '0' + seconds;
|
||||
this.currentTime = '00:' + minutes + ':' + seconds;
|
||||
} else {
|
||||
clearInterval(this.inter);
|
||||
const submitData = Object.values(this.hasAnswerList);
|
||||
this.submitConfirmExam(submitData);
|
||||
}
|
||||
}, 1000);
|
||||
},
|
||||
covertWrong() {
|
||||
const typeList = {'judge':'判断', 'select':'选择', 'multi':'多选'};
|
||||
const WrongQuestion = this.theoryExamWrongList[this.wrongQuestionNum];
|
||||
if (WrongQuestion) {
|
||||
return (this.wrongQuestionNum + 1) + '、[' + typeList[WrongQuestion.question.type] + '] ' + WrongQuestion.question.topic + ' (' + WrongQuestion.question.score + '分)';
|
||||
}
|
||||
return '';
|
||||
},
|
||||
changeQuestion(num) {
|
||||
this.isSelect = false;
|
||||
this.currentQuestionNum = num - 1;
|
||||
this.checkCurrentData(this.currentQuestionNum);
|
||||
},
|
||||
changeWrongQuestion(num) {
|
||||
this.wrongQuestionNum = num;
|
||||
this.getWrongDataOption();
|
||||
},
|
||||
judgeQuestionType(type, currentQuestion) {
|
||||
if (currentQuestion && type == 'radio') {
|
||||
return currentQuestion.type == 'judge' || currentQuestion.type == 'select';
|
||||
} else if (currentQuestion && type == 'multi') {
|
||||
return currentQuestion.type == 'multi';
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
},
|
||||
prevQuestion() {
|
||||
if (this.currentQuestionNum > 0) {
|
||||
this.currentQuestionNum -= 1;
|
||||
this.isSelect = false;
|
||||
this.checkCurrentData(this.currentQuestionNum);
|
||||
}
|
||||
|
||||
},
|
||||
nextQuestion() {
|
||||
if (this.currentQuestionNum < this.questionList.length) {
|
||||
this.currentQuestionNum += 1;
|
||||
this.isSelect = false;
|
||||
this.checkCurrentData(this.currentQuestionNum);
|
||||
}
|
||||
},
|
||||
checkCurrentData(currentQuestionNum) {
|
||||
if (this.hasAnswerList[currentQuestionNum]) {
|
||||
const answerObj = this.hasAnswerList[currentQuestionNum].answerContents;
|
||||
if (answerObj.length > 0) {
|
||||
const question = this.questionList[currentQuestionNum];
|
||||
if (question.type == 'judge' || question.type == 'select') {
|
||||
this.currentRadioAnswer = answerObj[0].optionId;
|
||||
} else {
|
||||
const list = [];
|
||||
answerObj.forEach(item => {
|
||||
list.push(item.optionId);
|
||||
});
|
||||
this.currentSelectAnswer = list;
|
||||
}
|
||||
} else {
|
||||
this.currentSelectAnswer = [];
|
||||
this.currentRadioAnswer = '';
|
||||
}
|
||||
} else {
|
||||
this.currentSelectAnswer = [];
|
||||
this.currentRadioAnswer = '';
|
||||
}
|
||||
},
|
||||
commitExam() {
|
||||
const submitData = Object.values(this.hasAnswerList);
|
||||
let submitWriteLength = 0;
|
||||
submitData.forEach(each=>{
|
||||
if (each.answerContents.length > 0) {
|
||||
submitWriteLength++;
|
||||
}
|
||||
});
|
||||
if (submitWriteLength < this.questionList.length) {
|
||||
this.$confirm(`测试未完成，是否确认交卷?`, '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消'
|
||||
}).then(() => {
|
||||
this.submitConfirmExam(submitData);
|
||||
});
|
||||
} else {
|
||||
this.submitConfirmExam(submitData);
|
||||
}
|
||||
},
|
||||
submitConfirmExam(submitData) {
|
||||
this.loading = true;
|
||||
submitPracticeQuestionData('DRTS', {mode:'02', theoryAnswers:submitData}).then(res=>{
|
||||
this.loading = false;
|
||||
this.isResult = true;
|
||||
this.$message.success('提交成功');
|
||||
this.resultScore = 0;
|
||||
this.theoryExamWrongList = [];
|
||||
res.data.forEach(item => {
|
||||
this.resultScore += (item.score || 0);
|
||||
if (item.answerOptionId && item.answerOptionId.length && !item.score) {
|
||||
this.theoryExamWrongList.push(item);
|
||||
}
|
||||
});
|
||||
// const writeList = res.data.filter(wrong=>{
|
||||
// return wrong.answerContents && wrong.answerContents.length > 0;
|
||||
// });
|
||||
// this.theoryExamWrongList = writeList.filter(wrong=>{
|
||||
// return wrong.correct == false;
|
||||
// });
|
||||
// if (writeList.length > 0) {
|
||||
// if (writeList.length >= 2) {
|
||||
// this.resultScore = writeList.reduce((prev, cur, index, arr)=>{
|
||||
// return prev.score == undefined ? prev + cur.score : prev.score + cur.score;
|
||||
// });
|
||||
// } else {
|
||||
// this.resultScore = writeList[0].score;
|
||||
// }
|
||||
// } else {
|
||||
// this.resultScore = 0;
|
||||
// }
|
||||
// if (this.theoryExamWrongList.length > 0) {
|
||||
// this.getWrongDataOption();
|
||||
// }
|
||||
|
||||
}).catch(()=>{
|
||||
this.$message.error('提交失败，请稍后再试');
|
||||
});
|
||||
},
|
||||
getWrongDataOption() {
|
||||
const wrongList = this.theoryExamWrongList[this.wrongQuestionNum].answerOptionId;
|
||||
if (wrongList.length > 1) {
|
||||
this.currentSelectAnswer = wrongList;
|
||||
} else {
|
||||
this.currentRadioAnswer = wrongList[0];
|
||||
}
|
||||
},
|
||||
wrongCorrectAnswer() {
|
||||
let correctAnswer = '';
|
||||
const wrongList = this.theoryExamWrongList[this.wrongQuestionNum].question.optionList;
|
||||
wrongList.forEach((choice, index)=>{
|
||||
if (choice.correct) {
|
||||
correctAnswer += this.choiceTypeList[index] + '、' + choice.content + ' ';
|
||||
}
|
||||
});
|
||||
return correctAnswer;
|
||||
},
|
||||
checkNextButton() {
|
||||
if (this.questionList.length > 0) {
|
||||
return this.currentQuestionNum == this.questionList.length - 1;
|
||||
}
|
||||
return true;
|
||||
},
|
||||
commitQuestion() {
|
||||
if (this.mode == 'practice') {
|
||||
const currentCorrectAnswer = [];
|
||||
this.correctAnswer = '';
|
||||
this.answerIsCorrect = false;
|
||||
const question = this.questionList[this.currentQuestionNum];
|
||||
if (question) {
|
||||
const options = this.questionList[this.currentQuestionNum].optionList;
|
||||
options.forEach((choice, index)=>{
|
||||
if (choice.correct) {
|
||||
this.correctAnswer += this.choiceTypeList[index] + '、' + choice.content + ' ';
|
||||
currentCorrectAnswer.push(choice.id);
|
||||
}
|
||||
});
|
||||
if (this.currentRadioAnswer) {
|
||||
if (this.currentRadioAnswer == currentCorrectAnswer.toString()) {
|
||||
this.answerIsCorrect = true;
|
||||
} else {
|
||||
this.answerIsCorrect = false;
|
||||
}
|
||||
}
|
||||
if (this.currentSelectAnswer.length > 0) {
|
||||
if (currentCorrectAnswer.toString() == this.currentSelectAnswer.sort().toString()) {
|
||||
this.answerIsCorrect = true;
|
||||
} else {
|
||||
this.answerIsCorrect = false;
|
||||
}
|
||||
}
|
||||
this.isSelect = true;
|
||||
updatePracticeQuestionProgress('DRTS', {index:this.currentQuestionNum}).then(res=>{
|
||||
}).catch(error=>{
|
||||
console.log(error.message);
|
||||
});
|
||||
}
|
||||
}
|
||||
},
|
||||
changeAnswer(data) {
|
||||
if (this.isTest) {
|
||||
let answerContents = [];
|
||||
if (data instanceof Array) {
|
||||
data.forEach(item => {
|
||||
answerContents.push({optionId: item, answerContent: ''});
|
||||
});
|
||||
} else {
|
||||
answerContents = [{optionId: data, answerContents: ''}];
|
||||
}
|
||||
this.hasAnswerList[this.currentQuestionNum].answerContents = answerContents;
|
||||
document.querySelector('#eachQuestionNum' + this.currentQuestionNum).classList.add('hasSelect');
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.theoryExamBody{
|
||||
width: 800px;
|
||||
height: 460px;
|
||||
border: 1px #ccc solid;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
transform: translate(-50%,-50%);
|
||||
border-radius: 6px;
|
||||
top: 39%;
|
||||
padding: 10px;
|
||||
box-shadow: 0px 0px 10px #ccc;
|
||||
background:#fff;
|
||||
}
|
||||
.theoryExamBodyL{
|
||||
width: 500px;
|
||||
display: inline-block;
|
||||
float: left;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
}
|
||||
.theoryExamQuestion{
|
||||
padding: 5px 15px 0px 10px;
|
||||
}
|
||||
.theoryExamBodyR{
|
||||
width: 277px;
|
||||
display: inline-block;
|
||||
height: 100%;
|
||||
}
|
||||
.theoryExamBodyRT{margin-top: 5px;margin-left: 25px;}
|
||||
.theoryExamQuestionList{
|
||||
margin-top: 10px;
|
||||
height: 360px;
|
||||
overflow:auto;
|
||||
padding-left: 10px;
|
||||
width: 256px;
|
||||
}
|
||||
.theoryExamWrongQuestionList{
|
||||
height: 320px;
|
||||
overflow:auto;
|
||||
padding-left: 10px;
|
||||
width: 256px;
|
||||
border: 1px #ececec solid;
|
||||
border-radius: 5px;
|
||||
}
|
||||
.eachQuestionNum{
|
||||
color: #8f7f70;
|
||||
border-radius: 4px;
|
||||
border: 1px #cfcfcf solid;
|
||||
display: inline-block;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
text-align: center;
|
||||
line-height: 28px;
|
||||
margin-right: 25px;
|
||||
margin-top: 10px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.noAnswer{
|
||||
position: relative;
|
||||
}
|
||||
.hasAnswer,.hasSign{
|
||||
position: relative;
|
||||
margin-left: 25px;
|
||||
}
|
||||
.noAnswer::before{
|
||||
content: '';
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border-radius: 20px;
|
||||
background: #fff;
|
||||
border: 1px #606266 solid;
|
||||
position: absolute;
|
||||
left: -15px;
|
||||
top: 4px;
|
||||
}
|
||||
.hasSign::before{
|
||||
content: '';
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border-radius: 20px;
|
||||
background: #ff4d4f;
|
||||
position: absolute;
|
||||
left: -15px;
|
||||
top: 4px;
|
||||
}
|
||||
.hasAnswer::before{
|
||||
content: '';
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border-radius: 20px;
|
||||
background: #40a9ff;
|
||||
position: absolute;
|
||||
left: -15px;
|
||||
top: 4px;
|
||||
}
|
||||
.QuestionName{
|
||||
font-weight: bold;
|
||||
line-height: 160%;
|
||||
}
|
||||
.choiceList{
|
||||
margin-top:10px;
|
||||
display: inline-block;
|
||||
margin-left: 15px;
|
||||
}
|
||||
.eachChoice{
|
||||
display: block;
|
||||
margin-top: 15px;
|
||||
}
|
||||
.correctAnswer{
|
||||
margin-top: 20px;
|
||||
}
|
||||
.buttonList{
|
||||
position: absolute;
|
||||
bottom: 30px;
|
||||
left: 20px;
|
||||
}
|
||||
.prevAndNext{
|
||||
float: left;
|
||||
display: inline-block;
|
||||
}
|
||||
.commitExam{margin-left: 30px;}
|
||||
.commitQuestion{
|
||||
float: left;
|
||||
margin-right: 200px;
|
||||
}
|
||||
.practiceIconTips{
|
||||
font-size: 25px;
|
||||
display: inline-block;
|
||||
float: left;
|
||||
margin-left:10px;
|
||||
}
|
||||
.practicecorrectAnswer{
|
||||
vertical-align: top;
|
||||
line-height: 131%;
|
||||
display: inline-block;
|
||||
width: 375px;
|
||||
margin-left: 8px;
|
||||
margin-top: 3px;
|
||||
}
|
||||
.hasSelect{
|
||||
background: #409eff;
|
||||
color: #fff;
|
||||
}
|
||||
.theoryExamScore{
|
||||
margin-left: 20px;
|
||||
margin-top: 10px;
|
||||
font-size: 15px;
|
||||
}
|
||||
.theoryExamScore1{
|
||||
text-align: center;
|
||||
font-size: 17px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
.theoryExamEnd{
|
||||
font-size: 90px;
|
||||
color: #007b00;
|
||||
margin-left: 340px;
|
||||
margin-top: 115px;
|
||||
}
|
||||
.theoryExamWrongList{}
|
||||
.theoryExamWrongListL{
|
||||
width: 500px;
|
||||
display: inline-block;
|
||||
float: left;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
padding-left: 20px;
|
||||
padding-right: 20px;
|
||||
padding-top: 5px;
|
||||
}
|
||||
.theoryExamWrongListR{
|
||||
width: 277px;
|
||||
display: inline-block;
|
||||
height: 100%;
|
||||
}
|
||||
.theoryExamWrongListName{
|
||||
margin-left: 20px;
|
||||
margin-top: 15px;
|
||||
font-size: 15px;
|
||||
font-weight: bold;
|
||||
color: #ff3737;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
.eachQuestionNum.active{
|
||||
background: #67c23a;
|
||||
color: #fff;
|
||||
}
|
||||
.resultScoreStyle{
|
||||
color: #f00;
|
||||
font-size: 17px;
|
||||
}
|
||||
.examTips{
|
||||
position: absolute;
|
||||
bottom: 5px;
|
||||
left: 22px;
|
||||
color:#000;
|
||||
}
|
||||
/deep/.el-dialog__headerbtn {
|
||||
font-size: 25px;
|
||||
|
||||
}
|
||||
/deep/.el-dialog__close {
|
||||
color: #000;
|
||||
}
|
||||
</style>
|
||||
<style lang="scss">
|
||||
.theoryExam .el-dialog.is-fullscreen{
|
||||
background:#eeeeee
|
||||
}
|
||||
</style>
|
||||
@ -1,49 +0,0 @@
|
||||
<template>
|
||||
<el-dialog
|
||||
title="选择考试类型"
|
||||
:visible.sync="dialogVisible"
|
||||
:close-on-click-modal="false"
|
||||
width="350px"
|
||||
:before-do-close="close"
|
||||
>
|
||||
<div>
|
||||
<el-form ref="ruleForm" :model="form" label-width="30px">
|
||||
<el-form-item label="" prop="role">
|
||||
<el-select v-model="form.type" style="width:260px">
|
||||
<el-option label="练习模式" value="practice" />
|
||||
<el-option label="测验模式" value="test" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button @click="close">{{ $t('global.cancel') }}</el-button>
|
||||
<el-button type="primary" @click="confirm">{{ $t('global.confirm') }}</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
name:'TheoryExamSelect',
|
||||
data() {
|
||||
return {
|
||||
dialogVisible:false,
|
||||
form:{
|
||||
type:'practice'
|
||||
}
|
||||
};
|
||||
},
|
||||
methods:{
|
||||
doShow() {
|
||||
this.dialogVisible = true;
|
||||
},
|
||||
close() {
|
||||
this.dialogVisible = false;
|
||||
},
|
||||
confirm() {
|
||||
this.dialogVisible = false;
|
||||
this.$emit('startTheoryExam', this.form);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@ -1,431 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="display-card" :style="{top: offset + 'px'}">
|
||||
<el-row style="vertical-align:middle; ">
|
||||
<span class="display-time">{{ formatUsedTime }}</span>
|
||||
</el-row>
|
||||
</div>
|
||||
<div class="display-draft" :style="{bottom: offsetBottom + 'px'}">
|
||||
<el-button-group>
|
||||
<el-button type="success" :disabled="isDisable || dataError" :loading="startLoading" @click="start">{{ $t('display.startBtn') }}</el-button>
|
||||
<el-button type="danger" :disabled="!isDisable || dataError" @click="end">{{ $t('display.endBtn') }}</el-button>
|
||||
<el-button type="primary" class="back" @click="back">{{ $t('display.backBtn') }}</el-button>
|
||||
</el-button-group>
|
||||
</div>
|
||||
<tip-exam-list :offset-bottom="offsetBottom" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import TipExamList from './tipExamList';
|
||||
import { Notification } from 'element-ui';
|
||||
import { startTrainingNew } from '@/api/jmap/training';
|
||||
import { timeFormat } from '@/utils/date';
|
||||
import { refreshExamList, finishOneExamQuestion } from '@/api/management/userexam';
|
||||
import { EventBus } from '@/scripts/event-bus';
|
||||
|
||||
export default {
|
||||
name: 'MenuExam',
|
||||
components: {
|
||||
TipExamList
|
||||
},
|
||||
props: {
|
||||
offset: {
|
||||
type: Number,
|
||||
required: true
|
||||
},
|
||||
offsetBottom: {
|
||||
type: Number,
|
||||
required: true
|
||||
},
|
||||
dataError: {
|
||||
type: Boolean,
|
||||
default() {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
isDisable: false,
|
||||
startLoading: false,
|
||||
locateDeviceCode:null,
|
||||
training: {
|
||||
id: '',
|
||||
name: '',
|
||||
remarks: ''
|
||||
},
|
||||
prdTypeMap: {
|
||||
'01': '01', // 现地 => 现地
|
||||
'02': '02', // 行调 => 行调
|
||||
'04': '02', // 司机 => 行调
|
||||
'05': '' // 派班 => null
|
||||
}
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
group() {
|
||||
return this.$route.query.group;
|
||||
},
|
||||
formatUsedTime() {
|
||||
return timeFormat(this.$store.state.training.usedTime);
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
'$store.state.map.mapViewLoadedCount': function() {
|
||||
// this.$store.dispatch('exam/countUsedTime');
|
||||
this.locateDeviceCode && this.$store.dispatch('exam/setCenter', this.locateDeviceCode); // 设置考题对象居中
|
||||
},
|
||||
$route() {
|
||||
// this.initData();
|
||||
this.isDisable = false;
|
||||
this.$store.dispatch('training/end', null);
|
||||
this.$store.dispatch('training/reset');
|
||||
this.$store.dispatch('menuOperation/setButtonOperation', null);
|
||||
this.$store.dispatch('training/setStopCountTime');
|
||||
this.$store.dispatch('training/setTrainingStart', false);
|
||||
EventBus.$emit('viewLoading', false);
|
||||
},
|
||||
'$store.state.socket.simulationRoleList':function(list) {
|
||||
if (list && list.length) {
|
||||
this.checkRoleChange(list);
|
||||
}
|
||||
},
|
||||
'$store.state.training.simulationUserList': function(val) {
|
||||
const userInfo = this.$store.state.training.simulationUserList.find(user => user.userId == this.$store.state.user.id );
|
||||
if (userInfo.type === 'STATION_SUPERVISOR') {
|
||||
if (this.$store.state.map.map && this.$store.state.map.map.pictureList) {
|
||||
const picture = this.$store.state.map.map.pictureList.find(picture => picture.stationCodes && picture.stationCodes.includes(userInfo.deviceCode) && picture.type === 'chainStation');
|
||||
if (picture) {
|
||||
const mapDevice = this.$store.state.map.mapDevice;
|
||||
const list = [];
|
||||
const deviceList = [];
|
||||
for (const key in mapDevice) {
|
||||
list.push(mapDevice[key]);
|
||||
deviceList.push(key);
|
||||
}
|
||||
this.$store.dispatch('map/setPictureDeviceMap', picture.deviceMap);
|
||||
this.$jlmap.updatePicture(deviceList);
|
||||
// this.$jlmap.updateTransform(picture.scaling, picture.origin);
|
||||
this.$store.dispatch('map/setShowCentralizedStationCode', userInfo.deviceCode);
|
||||
} else {
|
||||
this.$store.dispatch('map/setShowCentralizedStationCode', userInfo.deviceCode);
|
||||
const mapDevice = this.$store.state.map.mapDevice;
|
||||
const list = [];
|
||||
for (const key in mapDevice) {
|
||||
list.push(mapDevice[key]);
|
||||
}
|
||||
this.$jlmap.updateShowStation(list, userInfo.deviceCode);
|
||||
}
|
||||
} else {
|
||||
this.$store.dispatch('map/setShowCentralizedStationCode', userInfo.deviceCode);
|
||||
const mapDevice = this.$store.state.map.mapDevice;
|
||||
const list = [];
|
||||
for (const key in mapDevice) {
|
||||
list.push(mapDevice[key]);
|
||||
}
|
||||
this.$jlmap.updateShowStation(list, userInfo.deviceCode);
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
// mounted() {
|
||||
// this.initDate();
|
||||
// },
|
||||
methods: {
|
||||
tipInfo(opt) {
|
||||
if (opt && opt.hasOwnProperty('color') && opt.hasOwnProperty('message')) {
|
||||
const h = this.$createElement;
|
||||
this.$notify({
|
||||
title: this.$t('global.tips'),
|
||||
message: h('i', { style: 'color:' + opt.color }, this.$t('display.exam.startTestOperateTip'))
|
||||
});
|
||||
}
|
||||
},
|
||||
start() {
|
||||
this.$store.dispatch('menuOperation/setButtonOperation', null);
|
||||
this.startLoading = true;
|
||||
if (this.$route.query.trainingId) {
|
||||
this.isDisable = true;
|
||||
startTrainingNew({ id: this.$route.query.trainingId }, this.group).then(response => {
|
||||
this.$store.dispatch('training/setTrainingStart', true);
|
||||
this.$store.dispatch('training/examModeStart');
|
||||
this.$store.dispatch('exam/start');
|
||||
this.$store.dispatch('map/clearJlmapTrainView').then(() => {
|
||||
this.$store.dispatch('training/emitTipFresh');
|
||||
this.$store.dispatch('training/countTime', 'Lesson'); // 开始计时
|
||||
});
|
||||
this.startLoading = false;
|
||||
}).catch(() => {
|
||||
this.isDisable = false;
|
||||
this.startLoading = false;
|
||||
});
|
||||
} else {
|
||||
this.startLoading = true;
|
||||
this.$messageBox(this.$t('display.exam.selectTest'));
|
||||
}
|
||||
},
|
||||
end() {
|
||||
if (this.$route.query.trainingId) {
|
||||
this.isDisable = false;
|
||||
if (this.$store.state.exam.started) {
|
||||
const model = {
|
||||
id: this.$route.query.examQuestionId,
|
||||
usedTime: this.$store.state.training.usedTime,
|
||||
group: this.group
|
||||
};
|
||||
|
||||
this.$store.dispatch('training/end', null);
|
||||
this.$store.dispatch('exam/over');
|
||||
finishOneExamQuestion(model).then(response => {
|
||||
this.$store.dispatch('training/setStopCountTime');
|
||||
this.$store.dispatch('training/emitTipFresh');
|
||||
this.init();
|
||||
}).catch(() => {
|
||||
this.$store.dispatch('training/emitTipFresh');
|
||||
this.$messageBox(this.$t('display.exam.endTrainingError'));
|
||||
});
|
||||
} else {
|
||||
this.isDisable = true;
|
||||
this.$messageBox(this.$t('display.exam.startTestTip'));
|
||||
}
|
||||
}
|
||||
},
|
||||
back() {
|
||||
this.$confirm(this.$t('display.exam.endTestTip'), this.$t('global.tips'), {
|
||||
confirmButtonText: this.$t('global.confirm'),
|
||||
cancelButtonText: this.$t('global.cancel'),
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
if (this.$route.query.noPreLogout) {
|
||||
this.$router.replace({path: `/device/exam/${this.$route.query.examId}`, query: {mapId: this.$route.query.mapId, noPreLogout: this.$route.query.noPreLogout}});
|
||||
} else {
|
||||
this.$router.go(-1);
|
||||
}
|
||||
Notification.closeAll();
|
||||
}).catch(() => {
|
||||
|
||||
});
|
||||
},
|
||||
init() {
|
||||
// 刷新考试列表
|
||||
refreshExamList(this.$route.query.userExamId).then(response => {
|
||||
this.$store.dispatch('exam/setUsedTime', response.data.usedTime);
|
||||
this.$store.dispatch('exam/setTotalTime', response.data.duration);
|
||||
this.$store.dispatch('trainingList/setTrainingList', response.data.userExamQuestionsVOs).then(response => { });
|
||||
}).catch(error => {
|
||||
// 如果时50009则表示考试已完成，不能再次进行y
|
||||
if (error.code === 500009) {
|
||||
this.$router.replace({ path: `/trainingPlatform/result/${this.$route.params.userExamId}`, query: { subSystem: this.$route.query.subSystem, mapId:this.$route.query.mapId } });
|
||||
} else {
|
||||
this.$messageBox(this.$t('display.exam.refreshListError'));
|
||||
}
|
||||
});
|
||||
},
|
||||
// refresh() {
|
||||
// this.isDisable = false;
|
||||
// this.$store.dispatch('training/end', null);
|
||||
// },
|
||||
// // 课程和考试系统
|
||||
// async initData() {
|
||||
// if (parseInt(this.$route.query.trainingId)) {
|
||||
// const resp = await getTrainingDetailNew(this.$route.query.trainingId);
|
||||
// if (resp && resp.code == 200) {
|
||||
// const detail = resp.data;
|
||||
// this.locateDeviceCode = resp.data.locateDeviceCode;
|
||||
// debugger;
|
||||
// await this.$store.dispatch('training/setPrdType', this.prdTypeMap[detail.prdType]);
|
||||
// await this.$store.dispatch('training/setTrainingData', detail); // 设置实训信息
|
||||
// } else {
|
||||
// this.$messageBox(`获取实训步骤数据失败`);
|
||||
// this.endViewLoading();
|
||||
// }
|
||||
// } else {
|
||||
// this.endViewLoading();
|
||||
// }
|
||||
// },
|
||||
// 结束加载状态
|
||||
endViewLoading(isSuccess) {
|
||||
if (!isSuccess) {
|
||||
this.$store.dispatch('map/mapClear');
|
||||
}
|
||||
},
|
||||
checkRoleChange(list) {
|
||||
list.forEach(item => {
|
||||
if (item.messageType === 'PLAY_CHANGE' && item.userId == this.$store.state.user.id && item.type === 'STATION_SUPERVISOR') {
|
||||
if (this.$store.state.map.map && this.$store.state.map.map.pictureList) {
|
||||
const picture = this.$store.state.map.map.pictureList.find(picture => picture.stationCodes && picture.stationCodes.includes(item.deviceCode) && picture.type === 'chainStation');
|
||||
if (picture) {
|
||||
const mapDevice = this.$store.state.map.mapDevice;
|
||||
const list = [];
|
||||
const deviceList = [];
|
||||
for (const key in mapDevice) {
|
||||
list.push(mapDevice[key]);
|
||||
deviceList.push(key);
|
||||
}
|
||||
this.$store.dispatch('map/setPictureDeviceMap', picture.deviceMap);
|
||||
this.$jlmap.updatePicture(deviceList);
|
||||
// this.$jlmap.updateTransform(picture.scaling, picture.origin);
|
||||
this.$store.dispatch('map/setShowCentralizedStationCode', item.deviceCode);
|
||||
} else {
|
||||
this.$store.dispatch('map/setShowCentralizedStationCode', item.deviceCode);
|
||||
const mapDevice = this.$store.state.map.mapDevice;
|
||||
const list = [];
|
||||
for (const key in mapDevice) {
|
||||
list.push(mapDevice[key]);
|
||||
}
|
||||
this.$jlmap.updateShowStation(list, item.deviceCode);
|
||||
}
|
||||
} else {
|
||||
this.$store.dispatch('map/setShowCentralizedStationCode', item.deviceCode);
|
||||
const mapDevice = this.$store.state.map.mapDevice;
|
||||
const list = [];
|
||||
for (const key in mapDevice) {
|
||||
list.push(mapDevice[key]);
|
||||
}
|
||||
this.$jlmap.updateShowStation(list, item.deviceCode);
|
||||
}
|
||||
this.$jlmap.setCenter(item.deviceCode);
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style rel="stylesheet/scss" lang="scss" scoped>
|
||||
@import "src/styles/mixin.scss";
|
||||
|
||||
.display-card {
|
||||
z-index: 9;
|
||||
display: inline;
|
||||
position: absolute;
|
||||
left: 10px;
|
||||
}
|
||||
|
||||
.display-time {
|
||||
background-color: white;
|
||||
display: -moz-inline-box;
|
||||
display: inline-block;
|
||||
border: 1px solid lightskyblue;
|
||||
width: 100px;
|
||||
height: 32px;
|
||||
line-height: 32px;
|
||||
border-radius: 4px;
|
||||
text-align: center;
|
||||
font-family: "Microsoft" !important;
|
||||
font-size: 18px !important;
|
||||
font-weight: bold;
|
||||
color: black;
|
||||
}
|
||||
|
||||
.display-draft {
|
||||
position: absolute;
|
||||
float: right;
|
||||
right: 15px;
|
||||
bottom: 15px;
|
||||
|
||||
.back {
|
||||
z-index: 100000;
|
||||
}
|
||||
}
|
||||
|
||||
.tip-body-box {
|
||||
position: relative;
|
||||
height: 430px;
|
||||
}
|
||||
|
||||
.reminder-box {
|
||||
position: absolute;
|
||||
float: left;
|
||||
left: 15px;
|
||||
bottom: 15px;
|
||||
width: 650px;
|
||||
height: 470px;
|
||||
background-color: #fff;
|
||||
border-radius: 5px;
|
||||
overflow: hidden;
|
||||
z-index: 500;
|
||||
/* transition: height 0.5s; */
|
||||
font-size: 18px;
|
||||
|
||||
.tip-title {
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
height: 40px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: row-reverse;
|
||||
background-color: #409EFF;
|
||||
cursor: move;
|
||||
border-radius: 5px 5px 0 0;
|
||||
justify-content: space-between;
|
||||
padding: 0 10px;
|
||||
}
|
||||
|
||||
.drag-right,
|
||||
.drag-left {
|
||||
width: 10px;
|
||||
cursor: e-resize;
|
||||
background-color: yellow;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.drag-left {
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.drag-bottom {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
height: 10px;
|
||||
cursor: s-resize;
|
||||
background-color: yellow;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.tip-body {
|
||||
height: 366px;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.tip-foot {
|
||||
width: 100%;
|
||||
margin-right: 10px;
|
||||
position: absolute;
|
||||
right: 0px;
|
||||
bottom: 0px;
|
||||
background-color: #fff;
|
||||
padding: 10px 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: row-reverse;
|
||||
|
||||
.btn {
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.icon {
|
||||
float: right;
|
||||
margin-right: 10px;
|
||||
cursor: pointer;
|
||||
background-color: #d2d2d2;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
/deep/ {
|
||||
.el-tree-node__content {
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content {
|
||||
background-color: #d6e5f7;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,477 +0,0 @@
|
||||
<template>
|
||||
<div v-quickMenuDrag class="reminder-drag" :style="{bottom: offsetBottom + 'px'}">
|
||||
<div ref="drapBox" class="reminder-box">
|
||||
<div class="tip-title">
|
||||
<i v-show="isShrink" class="icon el-icon-minus" @click="shrink" />
|
||||
<i v-show="!isShrink" class="icon el-icon-plus" @click="shrink" />
|
||||
<p v-if="!isShrink" style="color: #fff;">
|
||||
<span class="time-label">{{ $t('display.exam.examTime') }}</span>
|
||||
<span class="time-elem">{{ formatRemainTime }}</span>
|
||||
</p>
|
||||
<p v-if="isShrink" style="color: #fff;">
|
||||
<span>{{ examName }}</span>
|
||||
</p>
|
||||
</div>
|
||||
<div v-if="isShrink" class="reminder-box-content">
|
||||
<div class="zhezhao" />
|
||||
<div ref="dragBody" class="tip-body-box">
|
||||
<div v-show="detailShow" class="tip-body">
|
||||
<el-scrollbar wrap-class="scrollbar-wrapper">
|
||||
<el-tree
|
||||
ref="treeQuestion"
|
||||
style="background:rgba(0,0,0,0)"
|
||||
:data="trainingList"
|
||||
node-key="id"
|
||||
highlight-current
|
||||
@node-click="getTrainDetail"
|
||||
>
|
||||
<span slot-scope="{ data }">
|
||||
<span :style="{color: data.usedTime !== undefined ? 'green':''}"> {{ trainingList.indexOf(data)+1 }}.{{
|
||||
data.trainingName }}
|
||||
</span>
|
||||
</span>
|
||||
</el-tree>
|
||||
</el-scrollbar>
|
||||
</div>
|
||||
<div v-show="!detailShow" class="tip-body">
|
||||
<el-scrollbar wrap-class="scrollbar-wrapper">
|
||||
<p class="list-item">
|
||||
<span class="list-label">{{ $t('display.exam.questionTitle') }}</span>
|
||||
<span class="list-elem">{{ courseModel.name }}</span>
|
||||
</p>
|
||||
<!-- <p class="list-item">-->
|
||||
<!-- <span class="list-label">{{ $t('display.exam.bestTime') }}</span>-->
|
||||
<!-- <span class="list-elem">{{ courseModel.minDuration }} {{ $t('display.seconds') }} </span>-->
|
||||
<!-- </p>-->
|
||||
<!-- <p class="list-item">-->
|
||||
<!-- <span class="list-label">{{ $t('display.exam.maximumTime') }}</span>-->
|
||||
<!-- <span class="list-elem">{{ courseModel.maxDuration }} {{ $t('display.seconds') }} </span>-->
|
||||
<!-- </p>-->
|
||||
<p class="list-item">
|
||||
<span class="list-label"> {{ $t('display.exam.trainingInstructions') }}</span>
|
||||
<span class="list-elem">{{ courseModel.remarks }}</span>
|
||||
</p>
|
||||
</el-scrollbar>
|
||||
</div>
|
||||
<div class="tip-foot">
|
||||
<div v-show="!detailShow" class="foot-detail">
|
||||
<el-button class="btn" @click="backList">{{ $t('display.exam.viewQuestions') }}</el-button>
|
||||
<el-button v-if="!isFirst" class="btn" type="primary" @click="lastExam">{{ $t('display.exam.prev') }}</el-button>
|
||||
<el-button v-if="!isLast" class="btn" type="primary" @click="nextExam">{{ $t('display.exam.next') }}</el-button>
|
||||
<el-button v-if="isLast" class="btn" type="primary" @click="overExam">{{ $t('display.exam.submitExaminationPaper') }}</el-button>
|
||||
</div>
|
||||
<div v-show="detailShow" class="foot-submit">
|
||||
<el-button class="btn" type="primary" @click="overExam">{{ $t('display.exam.submitExaminationPaper') }}</el-button>
|
||||
</div>
|
||||
<p style="color: #000; float: left;">
|
||||
<span class="time-label">{{ $t('display.exam.examTime') }}</span>
|
||||
<span class="time-elem">{{ formatRemainTime }}</span>
|
||||
</p>
|
||||
</div>
|
||||
<div class="drag-right" />
|
||||
<div class="drag-left" />
|
||||
<div class="drag-bottom" />
|
||||
<div class="drag-top" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapGetters } from 'vuex';
|
||||
import { timeFormat } from '@/utils/date';
|
||||
import { refreshExamList } from '@/api/management/userexam';
|
||||
// import { getTrainingDetailNew } from '@/api/jmap/training';
|
||||
import { loadTrainingInSimulation } from '@/api/jmap/training';
|
||||
|
||||
export default {
|
||||
name: 'TipExamList',
|
||||
components: {
|
||||
},
|
||||
props: {
|
||||
offsetBottom: {
|
||||
type: Number,
|
||||
required: true
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
training: {
|
||||
id: '',
|
||||
name: '',
|
||||
remarks: ''
|
||||
},
|
||||
isShrink: true,
|
||||
examName: '',
|
||||
courseModel: {
|
||||
id: '',
|
||||
name: '',
|
||||
maxDuration: '',
|
||||
minDuration: '',
|
||||
remarks: '',
|
||||
updateTime: ''
|
||||
},
|
||||
detailShow: false,
|
||||
examIndex: 0,
|
||||
scanInter:null,
|
||||
prdTypeMap: {
|
||||
'01': '01', // 现地 => 现地
|
||||
'02': '02', // 行调 => 行调
|
||||
'04': '02', // 司机 => 行调
|
||||
'05': '' // 派班 => null
|
||||
}
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapGetters('trainingList', [
|
||||
'trainingList'
|
||||
]),
|
||||
remainTime() {
|
||||
return this.$store.state.exam.totalTime - this.$store.state.exam.usedTime;
|
||||
},
|
||||
formatRemainTime() {
|
||||
return this.remainTime >= 0 ? timeFormat(this.remainTime) : '';
|
||||
},
|
||||
isFirst() {
|
||||
return this.examIndex == 0;
|
||||
},
|
||||
isLast() {
|
||||
return this.examIndex == this.trainingList.length - 1;
|
||||
},
|
||||
group() {
|
||||
return this.$route.query.group;
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
'$store.state.map.mapViewLoadedCount': function() { // 地图视图加载完成标识
|
||||
this.$store.dispatch('exam/stopCountTime');
|
||||
this.loadInitData();
|
||||
this.$store.dispatch('exam/countUsedTime');
|
||||
}
|
||||
},
|
||||
beforeDestroy() {
|
||||
this.$store.dispatch('exam/stopCountTime');
|
||||
this.clearScanCommit();
|
||||
},
|
||||
methods: {
|
||||
backList() {
|
||||
this.detailShow = true;
|
||||
this.$nextTick(() => {
|
||||
this.$refs.treeQuestion.setCurrentKey(this.$route.query.examQuestionId); // value 绑定的node-key
|
||||
});
|
||||
},
|
||||
// 获取试题详情
|
||||
selectedTraining(obj, type = null) {
|
||||
this.trainingList.forEach((item, index) => {
|
||||
if (item.id == obj.id) {
|
||||
this.examIndex = index;
|
||||
return;
|
||||
}
|
||||
});
|
||||
if (obj) {
|
||||
loadTrainingInSimulation(this.group, obj.trainingId).then(resp => {
|
||||
// getTrainingDetailNew(obj.trainingId).then(resp => {
|
||||
this.courseModel = {
|
||||
id: resp.data.id,
|
||||
name: resp.data.name,
|
||||
maxDuration: resp.data.maxDuration,
|
||||
remarks: resp.data.remarks,
|
||||
minDuration: resp.data.minDuration,
|
||||
updateTime: resp.data.updateTime
|
||||
};
|
||||
this.$store.dispatch('training/setPrdType', this.prdTypeMap[resp.data.prdType]);
|
||||
this.$store.dispatch('exam/setCenter', resp.data.locateDeviceCode);
|
||||
this.$store.dispatch('training/setTrainingData', resp.data); // 设置实训信息
|
||||
}).catch(error => {
|
||||
this.$message.error(this.$t('display.exam.getTestInformation') + ':' + error.message);
|
||||
});
|
||||
}
|
||||
this.jump(obj);
|
||||
},
|
||||
getTrainDetail(obj) {
|
||||
this.selectedTraining(obj);
|
||||
this.detailShow = false;
|
||||
},
|
||||
// 获取试题列表
|
||||
async loadInitData() {
|
||||
// 刷新考试列表
|
||||
refreshExamList(this.$route.query.userExamId).then(response => {
|
||||
this.examName = response.data.examName;
|
||||
this.$store.commit('exam/setUsedTime', response.data.usedTime);
|
||||
this.$store.commit('exam/setTotalTime', response.data.duration);
|
||||
this.$store.commit('trainingList/setTrainingList', response.data.userExamQuestionsVOs);
|
||||
const obj = {
|
||||
trainingId: '',
|
||||
id: ''
|
||||
};
|
||||
|
||||
if (this.$route.query.examQuestionId && this.$route.query.trainingId) {
|
||||
obj.trainingId = this.$route.query.trainingId;
|
||||
obj.id = this.$route.query.examQuestionId;
|
||||
} else {
|
||||
obj.trainingId = response.data.userExamQuestionsVOs[0].trainingId;
|
||||
obj.id = response.data.userExamQuestionsVOs[0].id;
|
||||
}
|
||||
this.selectedTraining(obj, 'first');
|
||||
this.scanCommit();
|
||||
}).catch(error => {
|
||||
// 如果时50009则表示考试已完成，不能再次进行y
|
||||
if (error.code === 500009) {
|
||||
if (this.$route.query.subSystem) {
|
||||
this.$router.replace({ path: `/trainingPlatform/result/${this.$route.query.userExamId}`, query: { subSystem: this.$route.query.subSystem, mapId:this.$route.query.mapId } });
|
||||
} else {
|
||||
this.$router.replace({ path: `/device/result/${this.$route.query.userExamId}`, query: { mapId:this.$route.query.mapId, noPreLogout: this.$route.query.noPreLogout } });
|
||||
}
|
||||
} else {
|
||||
this.$messageBox(this.$t('display.exam.refreshListError'));
|
||||
|
||||
}
|
||||
});
|
||||
},
|
||||
scanCommit() {
|
||||
this.clearScanCommit();
|
||||
this.scanInter = setInterval(()=>{
|
||||
if (this.remainTime < 0) {
|
||||
this.$message.success(this.$t('display.exam.autoSubmit'));
|
||||
this.clearScanCommit();
|
||||
this.submit();
|
||||
}
|
||||
}, 1000);
|
||||
},
|
||||
clearScanCommit() {
|
||||
clearInterval(this.scanInter);
|
||||
this.scanInter = null;
|
||||
},
|
||||
nextExam() {
|
||||
const obj = {
|
||||
trainingId: '',
|
||||
id: ''
|
||||
};
|
||||
if (this.trainingList[this.examIndex + 1] && this.trainingList[this.examIndex + 1].trainingId) {
|
||||
obj.trainingId = this.trainingList[this.examIndex + 1].trainingId;
|
||||
obj.id = this.trainingList[this.examIndex + 1].id;
|
||||
this.examIndex = this.examIndex + 1;
|
||||
}
|
||||
if (obj.trainingId && obj.id) {
|
||||
this.selectedTraining(obj);
|
||||
}
|
||||
},
|
||||
lastExam() {
|
||||
const obj = {
|
||||
trainingId: '',
|
||||
id: ''
|
||||
};
|
||||
if (this.trainingList[this.examIndex - 1] && this.trainingList[this.examIndex - 1].trainingId) {
|
||||
obj.trainingId = this.trainingList[this.examIndex - 1].trainingId;
|
||||
obj.id = this.trainingList[this.examIndex - 1].id;
|
||||
this.examIndex = this.examIndex - 1;
|
||||
}
|
||||
if (obj.trainingId && obj.id) {
|
||||
this.selectedTraining(obj);
|
||||
}
|
||||
},
|
||||
jump(obj) {
|
||||
const query = {
|
||||
group: this.$route.query.group,
|
||||
userExamId: this.$route.query.userExamId,
|
||||
trainingId: obj.trainingId,
|
||||
examQuestionId: obj.id,
|
||||
subSystem: this.$route.query.subSystem,
|
||||
examId: this.$route.query.examId,
|
||||
mapId: this.$route.query.mapId,
|
||||
lineCode: this.$route.query.lineCode,
|
||||
noPreLogout: this.$route.query.noPreLogout
|
||||
};
|
||||
this.$router.replace({query: query});
|
||||
// this.$emit('refresh');
|
||||
},
|
||||
overExam() {
|
||||
this.$store.dispatch('exam/isOver').then(isOver => {
|
||||
if (isOver) {
|
||||
this.submit();
|
||||
} else {
|
||||
this.$confirm(this.$t('display.exam.cancleExam'), this.$t('global.tips'), {
|
||||
cancelButtonText: this.$t('global.cancel'),
|
||||
confirmButtonText: this.$t('global.confirm'),
|
||||
type: 'warning',
|
||||
center: true
|
||||
}).then(() => {
|
||||
this.submit();
|
||||
}).catch(() => {
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
submit() {
|
||||
this.$store.dispatch('exam/over').then(() => {
|
||||
this.$store.dispatch('trainingList/clearTrainingList');
|
||||
if (this.$route.query.subSystem) {
|
||||
this.$router.replace({ path: `/trainingPlatform/result/${this.$route.query.userExamId}`, query: { subSystem: this.$route.query.subSystem, mapId:this.$route.query.mapId } });
|
||||
} else {
|
||||
this.$router.replace({ path: `/device/result/${this.$route.query.userExamId}`, query: { mapId:this.$route.query.mapId, noPreLogout: this.$route.query.noPreLogout } });
|
||||
}
|
||||
});
|
||||
},
|
||||
shrink() {
|
||||
// const height = this.$refs.dragBody.offsetHeight + 40;
|
||||
// const top = this.$refs.drapBox.style.top;
|
||||
if (this.isShrink) {
|
||||
// this.$refs.drapBox.style.height = '40px';
|
||||
// this.$refs.drapBox.style.top = '';
|
||||
this.isShrink = false;
|
||||
} else {
|
||||
// this.$refs.drapBox.style.height = height + 'px';
|
||||
// this.$refs.drapBox.style.top = top;
|
||||
this.isShrink = true;
|
||||
this.$nextTick(()=>{
|
||||
const dragDom = document.querySelector('.reminder-drag').style.bottom;
|
||||
if (document.body.clientHeight - 470 - parseInt(dragDom.replace('px', '')) < 0) {
|
||||
document.querySelector('.reminder-drag').style.bottom = `${document.body.clientHeight - 470}px`;
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style rel="stylesheet/scss" lang="scss" scoped>
|
||||
@import "src/styles/mixin.scss";
|
||||
|
||||
.reminder-drag{
|
||||
position: absolute;
|
||||
bottom: 0px;
|
||||
left: 15px;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.tip-body-box {
|
||||
position: relative;
|
||||
height: 430px;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.zhezhao{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
filter: blur(8px);
|
||||
background: rgba(255,255,255,0.9);
|
||||
}
|
||||
.reminder-box-content{
|
||||
width: 500px;
|
||||
height: 430px;
|
||||
left: 0;
|
||||
top: 0;
|
||||
z-index: 2;
|
||||
background: rgba(255,255,255,0.8);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.reminder-box {
|
||||
border-radius: 5px;
|
||||
overflow: hidden;
|
||||
z-index: 10;
|
||||
font-size: 18px;
|
||||
|
||||
.tip-title {
|
||||
width: 500px;
|
||||
overflow: hidden;
|
||||
height: 40px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: row-reverse;
|
||||
background-color: #409EFF;
|
||||
border-radius: 5px 5px 0 0;
|
||||
justify-content: space-between;
|
||||
padding: 0 10px;
|
||||
}
|
||||
|
||||
.drag-right,
|
||||
.drag-left {
|
||||
width: 10px;
|
||||
cursor: e-resize;
|
||||
background-color: yellow;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.drag-left {
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.drag-bottom {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
height: 10px;
|
||||
cursor: s-resize;
|
||||
background-color: yellow;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.drag-top {
|
||||
position: absolute;
|
||||
top: -45px;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 10px;
|
||||
cursor: s-resize;
|
||||
background-color: yellow;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.tip-body {
|
||||
height: 370px;
|
||||
padding: 10px;
|
||||
|
||||
.list-label {
|
||||
width: 105px;
|
||||
}
|
||||
}
|
||||
|
||||
.tip-foot {
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
right: 0px;
|
||||
bottom: 0px;
|
||||
padding: 10px 0 10px 10px;
|
||||
|
||||
.foot-detail {
|
||||
height: 100%;
|
||||
float: right;
|
||||
margin-top: 9px;
|
||||
padding-right: 15px;
|
||||
}
|
||||
|
||||
.foot-submit {
|
||||
float: right;
|
||||
margin-top: 9px;
|
||||
padding-right: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
.icon {
|
||||
float: right;
|
||||
margin-right: 10px;
|
||||
cursor: pointer;
|
||||
background-color: #f3f3f3;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
/deep/ {
|
||||
.el-tree-node__content {
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content {
|
||||
background-color: #d6e5f7;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,360 +0,0 @@
|
||||
<template>
|
||||
<div class="main" :style="{width: canvasWidth+'px'}">
|
||||
<template>
|
||||
<transition name="el-zoom-in-bottom">
|
||||
<map-system-draft v-show="!specialDispatch" ref="mapCanvas" @back="back" />
|
||||
</transition>
|
||||
<menu-demon v-if="isDemon" ref="menuDemon" :offset="offset" :offset-bottom="offsetBottom" :data-error="dataError" :text-status-height="textStatusHeight" @start="start" @end="end" @changeShowMap="changeShowMap"/>
|
||||
<menu-lesson v-if="isLesson" ref="lessonMenu" :offset="offset" :data-error="dataError" :offset-bottom="offsetBottom" :tip-bottom="tipBottom" />
|
||||
<menu-exam v-if="isExam" ref="menuExam" :offset="offset" :data-error="dataError" :offset-bottom="offsetBottom" />
|
||||
<menu-script v-if="isScript" ref="menuScript" :offset-bottom="offsetBottom" :offset="offset" :text-status-height="textStatusHeight" :data-error="dataError" @start="start" @end="end" @changeShowMap="changeShowMap" />
|
||||
<menu-dispather-contest v-if="isContest" ref="menuDispatherContest" :offset="offset" :offset-bottom="offsetBottom" :data-error="dataError" :text-status-height="textStatusHeight" @start="start" @end="end" />
|
||||
<div v-if="lineCode === '16'" v-show="prdType === '02'&& !showMap" style="position:absolute;width: 100%;top:0;left:0;">
|
||||
<!-- && (isScript || isDemon) -->
|
||||
<dispatcher-station ref="dispatcherStation" @changeShowMap="changeShowMap" />
|
||||
</div>
|
||||
</template>
|
||||
<menu-train-list v-if="isDemon||isContest||isScript" />
|
||||
<menu-system-time v-if="lineCode !== '16'&&lineCode !== '19'" ref="menuSystemTime" :offset="offset" :group="group" />
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { getSessionStorage } from '@/utils/auth';
|
||||
import { mapGetters } from 'vuex';
|
||||
import { OperateMode } from '@/scripts/ConstDic';
|
||||
import MapSystemDraft from '@/views/newMap/mapsystemNew/index';
|
||||
import MenuLesson from './lesson/index';
|
||||
import MenuDemon from './menuDemon';
|
||||
import MenuExam from './exam/index';
|
||||
import MenuScript from './scriptDisplay/scriptRecord/index';
|
||||
import MenuDispatherContest from './dispatherContest/index';
|
||||
import MenuTrainList from '@/views/newMap/displayNew/menuTrainList';
|
||||
import MenuSystemTime from '@/views/newMap/displayNew/menuSystemTime';
|
||||
import { clearSimulation, getSimulationInfoNew, ranAsPlan, exitRunPlan } from '@/api/simulation';
|
||||
import { loadMapDataById } from '@/utils/loaddata';
|
||||
// import DispatcherStation from '../jointTrainingNew/dispatcherStation';
|
||||
import { EventBus } from '@/scripts/event-bus';
|
||||
|
||||
export default {
|
||||
name: 'DisplayDraft',
|
||||
components: {
|
||||
MapSystemDraft,
|
||||
MenuDemon,
|
||||
MenuExam,
|
||||
MenuLesson,
|
||||
MenuSystemTime,
|
||||
MenuTrainList,
|
||||
MenuDispatherContest,
|
||||
MenuScript,
|
||||
DispatcherStation
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
offset: 15,
|
||||
offsetBottom: 15,
|
||||
tipBottom: 0,
|
||||
textStatusHeight: 0,
|
||||
planRunning:false,
|
||||
dataError: false,
|
||||
group:'',
|
||||
showMap: false
|
||||
};
|
||||
},
|
||||
computed:{
|
||||
...mapGetters([
|
||||
'canvasWidth'
|
||||
]),
|
||||
mode() {
|
||||
return this.$route.params.mode;
|
||||
},
|
||||
project() {
|
||||
return getSessionStorage('project');
|
||||
},
|
||||
isDemon() {
|
||||
return this.mode === 'demon' && !(this.project.includes('drts') || this.$route.query.thirdDrts);
|
||||
},
|
||||
isContest() {
|
||||
return this.mode === 'demon' && (this.project.includes('drts') || this.$route.query.thirdDrts);
|
||||
},
|
||||
isExam() {
|
||||
return this.mode === 'exam';
|
||||
},
|
||||
isLesson() {
|
||||
return (this.mode === 'teach' || this.mode === 'manage');
|
||||
},
|
||||
isScript() {
|
||||
return this.mode === 'script';
|
||||
},
|
||||
mapId() {
|
||||
return this.$route.query.mapId;
|
||||
},
|
||||
width() {
|
||||
return this.$store.state.app.width;
|
||||
},
|
||||
height() {
|
||||
return this.$store.state.app.height;
|
||||
},
|
||||
prdType() {
|
||||
return this.$store.state.training.prdType;
|
||||
},
|
||||
lineCode() {
|
||||
return this.$route.query.lineCode;
|
||||
},
|
||||
specialDispatch() {
|
||||
return (this.lineCode === '14' && this.$store.state.training.prdType === '02') || (this.lineCode === '16' && this.$store.state.training.prdType === '02' && !this.showMap);
|
||||
}
|
||||
},
|
||||
watch:{
|
||||
'$store.state.socket.permissionOver': function () {
|
||||
this.$alert('用户权限已被收回', '提示', {
|
||||
confirmButtonText: '确定',
|
||||
callback: action => {
|
||||
this.back();
|
||||
}
|
||||
});
|
||||
},
|
||||
// 此处代码似乎没什么用，之前从menuSchema复制过来的
|
||||
// '$store.state.training.prdType':function(val) {
|
||||
// if (val == '01') { this.switchModeInner('01'); } else { this.switchModeInner('02'); }
|
||||
// },
|
||||
'$store.state.config.menuBarLoadedCount': function (val) { // menuBar加载完成
|
||||
this.setPosition();
|
||||
},
|
||||
'$store.state.app.windowSizeCount': function() { // 窗口缩放
|
||||
this.setWindowSize();
|
||||
},
|
||||
'$store.state.training.prdType': function (val) { // 根据权限类型计算高度
|
||||
this.setPosition();
|
||||
},
|
||||
'$store.state.map.mapViewLoadedCount': function (val) { // 地图视图加载完成标识 开始加载默认状态
|
||||
if (this.planRunning) {
|
||||
this.$store.dispatch('training/simulationStart');
|
||||
}
|
||||
},
|
||||
$route() {
|
||||
if (!this.isLesson && !this.isExam) {
|
||||
this.initLoadData();
|
||||
}
|
||||
}
|
||||
},
|
||||
beforeDestroy() {
|
||||
clearSimulation(this.group);
|
||||
this.$store.dispatch('training/setSimulationUserList', []);
|
||||
this.$store.dispatch('training/setUserRole', '');
|
||||
this.$store.dispatch('training/reset');
|
||||
// this.$store.dispatch('map/mapClear');
|
||||
},
|
||||
async mounted() {
|
||||
this.setWindowSize();
|
||||
this.initLoadData();
|
||||
},
|
||||
methods:{
|
||||
// 结束加载状态
|
||||
endViewLoading(isSuccess) {
|
||||
if (!isSuccess) {
|
||||
this.$store.dispatch('map/mapClear');
|
||||
}
|
||||
this.$nextTick(() => {
|
||||
EventBus.$emit('viewLoading', false);
|
||||
});
|
||||
},
|
||||
// 仿真错误时，被动退出时调用
|
||||
async back() {
|
||||
if (this.isExam) {
|
||||
await this.$refs.menuExam.back();
|
||||
} else if (this.isLesson) {
|
||||
await this.$refs.lessonMenu.back();
|
||||
} else if (this.isDemon) {
|
||||
await this.$refs.menuDemon.back();
|
||||
} else if (this.isScript) {
|
||||
await this.$refs.menuScript.back();
|
||||
} else if (this.isContest) {
|
||||
await this.$refs.menuDispatherContest.back();
|
||||
}
|
||||
},
|
||||
// 设置各个按钮的定位
|
||||
setPosition() {
|
||||
this.$nextTick(() => {
|
||||
this.offset = 10;
|
||||
this.offsetBottom = 15;
|
||||
const menuBar = document.getElementById('menuBar');
|
||||
const menuTool = document.getElementById('menuTool');
|
||||
const menuBottom = document.getElementById('menuButton');
|
||||
const menuButtonsBox = document.getElementById('menuButtons_box');
|
||||
const textStatus = document.getElementById('textStatus');
|
||||
if (menuBar) {
|
||||
this.offset = (menuBar.offsetHeight || 0) + 15;
|
||||
}
|
||||
if (menuTool) {
|
||||
this.offset = (menuTool.offsetHeight || 0) + 15;
|
||||
}
|
||||
const buttonWidth = this.width - 1200; // B box widht
|
||||
if (menuBottom && buttonWidth < 780) {
|
||||
this.offsetBottom = (menuBottom.offsetHeight || 0) + 15;
|
||||
}
|
||||
if (menuButtonsBox) {
|
||||
this.tipBottom = (menuButtonsBox.offsetHeight || 0) + 15;
|
||||
}
|
||||
if (textStatus) {
|
||||
this.textStatusHeight = textStatus.offsetHeight || 0;
|
||||
textStatus.style.top = this.offset - 15 + 'px';
|
||||
}
|
||||
if (this.$route.query.ctc) {
|
||||
this.offset = 65;
|
||||
this.offsetBottom = 2;
|
||||
}
|
||||
});
|
||||
},
|
||||
// 缩放设置
|
||||
setWindowSize() {
|
||||
const width = this.width;
|
||||
const height = this.height;
|
||||
this.$store.dispatch('config/resize', { width, height });
|
||||
// this.$store.dispatch('training/updateOffsetStationCode', { offsetStationCode: this.offsetStationCode });
|
||||
},
|
||||
// 初始化
|
||||
initLoadData() {
|
||||
this.group = this.$route.query.group;
|
||||
this.$store.dispatch('training/reset');
|
||||
this.loadSimulationInfo();
|
||||
},
|
||||
// 新版地图根据仿真group获取仿真基础信息
|
||||
async loadSimulationInfo() {
|
||||
const resp = await getSimulationInfoNew(this.group);
|
||||
if (resp && resp.code == 200 && resp.data) {
|
||||
if (!resp.data.dataError) {
|
||||
this.$store.dispatch('scriptRecord/updateSimulationPause', resp.data.pause); // 是否暂停判断
|
||||
this.$store.dispatch('training/setInitTime', resp.data.systemTime);
|
||||
// this.$store.dispatch('training/countTime');
|
||||
if (resp.data.prodType === '03') {
|
||||
this.$store.dispatch('training/setPrdType', this.$route.query.prdType);
|
||||
} else {
|
||||
this.$store.dispatch('training/setPrdType', resp.data.prodType);
|
||||
}
|
||||
this.$store.dispatch('runPlan/setRunPlanInfo', resp.data.runPlan);
|
||||
this.planRunning = resp.data.planRunning;
|
||||
if (resp.data.planRunning) {
|
||||
this.$store.commit('training/start');
|
||||
}
|
||||
if (this.isScript) {
|
||||
this.$store.dispatch('training/setPrdType', '02');
|
||||
}
|
||||
this.loadMapData();
|
||||
} else {
|
||||
this.$messageBox('此地图数据正在维护中,无法运行！');
|
||||
}
|
||||
this.dataError = resp.data.dataError;
|
||||
}
|
||||
},
|
||||
// 通过showMode切换显示效果 11
|
||||
// switchModeInner(swch) {
|
||||
// let showMode = '03';
|
||||
// if (swch == '01') {
|
||||
// showMode = '03';
|
||||
// } else if (swch == '02') {
|
||||
// showMode = '02';
|
||||
// }
|
||||
//
|
||||
// const list = [];
|
||||
// const mapDevice = this.$store.state.map.mapDevice;
|
||||
// for (const key in mapDevice) {
|
||||
// list.push(mapDevice[key]);
|
||||
// }
|
||||
//
|
||||
// if (swch == '01') {
|
||||
// this.$jlmap.updateShowStation(list, this.$store.state.training.centerStationCode); // 显示全部元素
|
||||
// } else {
|
||||
// this.$jlmap.updateShowStation(list, ''); // 显示全部元素
|
||||
// }
|
||||
//
|
||||
// this.$jlmap.updateShowMode(list, showMode); // 二次过滤
|
||||
// },
|
||||
// 加载地图数据
|
||||
loadMapData() {
|
||||
if (parseInt(this.mapId)) {
|
||||
this.$store.dispatch('training/changeOperateMode', { mode: OperateMode.NORMAL }); // 默认为正常模式
|
||||
loadMapDataById(this.mapId, 'simulation');
|
||||
} else {
|
||||
this.endViewLoading();
|
||||
}
|
||||
},
|
||||
start(model) { // 开始仿真
|
||||
const data = {
|
||||
time: model.initTime
|
||||
};
|
||||
if (this.$route.query.prdType === '04') {
|
||||
data.loadNumber = model.loadNum;
|
||||
}
|
||||
ranAsPlan(data, this.group).then(res => {
|
||||
// this.$store.dispatch('training/setInitTime', model.initTime);
|
||||
this.$store.dispatch('training/setInitTime', model.timestamp);
|
||||
}).catch(error => {
|
||||
let message = '';
|
||||
switch (error.code) {
|
||||
case '5001':
|
||||
message = this.$t('error.mapDataError');
|
||||
break;
|
||||
case '5002':
|
||||
message = this.$t('error.runningChartDataError');
|
||||
break;
|
||||
case '5003':
|
||||
message = this.$t('error.runningChartIsNotLoaded');
|
||||
break;
|
||||
case '5004':
|
||||
message = this.$t('error.runningDataError');
|
||||
break;
|
||||
case '5000':
|
||||
message = this.$t('error.systemError');
|
||||
break;
|
||||
case '4000':
|
||||
message = this.$t('error.simulationDoesNotExist');
|
||||
break;
|
||||
case '4001':
|
||||
message = this.$t('error.simulationOperationIsNotDefined');
|
||||
break;
|
||||
case '4002':
|
||||
message = this.$t('error.simulationOperationProcessingMethodNotFound');
|
||||
break;
|
||||
case '4003':
|
||||
message = this.$t('error.simulationOperationFailed');
|
||||
break;
|
||||
case '4004':
|
||||
message = this.$t('error.operationConflict');
|
||||
break;
|
||||
default:
|
||||
message = '按计划行车异常,请退出重试!';
|
||||
// this.$messageBox('按计划行车异常,请退出重试!');
|
||||
break;
|
||||
}
|
||||
this.$messageBox(message + '，' + this.$t('error.startSimulationFailed'));
|
||||
});
|
||||
},
|
||||
end() {
|
||||
exitRunPlan(this.group).then(() => {
|
||||
this.$store.dispatch('training/over').then(() => {
|
||||
this.$store.dispatch('training/setMapDefaultState').then(() => {
|
||||
this.$store.dispatch('map/clearJlmapTrainView');
|
||||
this.$store.dispatch('map/resetActiveTrainList', false);
|
||||
this.$store.dispatch('map/setTrainWindowShow', false);
|
||||
});
|
||||
});
|
||||
}).catch(() => {
|
||||
this.$messageBox(this.$t('display.demon.endSimulationFail'));
|
||||
});
|
||||
},
|
||||
changeShowMap(flag) {
|
||||
this.showMap = flag;
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style scoped lang="scss" rel="stylesheep/scss">
|
||||
.main {
|
||||
display: block;
|
||||
width: 100% !important;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
background: #000000;
|
||||
}
|
||||
</style>
|
||||
@ -1,158 +0,0 @@
|
||||
<template>
|
||||
<div id="leftSlider" class="left-slider">
|
||||
<div class="tip-title">
|
||||
<span>
|
||||
{{ $t('display.lesson.coursePracticeList') }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="handleShow">
|
||||
<!-- {{ $t('display.lesson.unfold') }} -->
|
||||
<span v-if="show" class="el-icon-arrow-right" style="cursor:pointer" @click="handleSliderShow(true)">实训列表</span>
|
||||
<!-- {{ $t('display.lesson.fold') }} -->
|
||||
<span v-else class="el-icon-arrow-left" style="cursor:pointer" @click="handleSliderShow(false)">实训列表</span>
|
||||
</div>
|
||||
<div class="slider-tree">
|
||||
<el-scrollbar wrap-class="scrollbar-wrapper" style="background: #fff;">
|
||||
<el-tree
|
||||
ref="tree"
|
||||
style="margin-top: 10px"
|
||||
:data="treeList"
|
||||
node-key="id"
|
||||
:props="defaultProps"
|
||||
highlight-current
|
||||
:span="22"
|
||||
default-expand-all
|
||||
@node-click="clickEvent"
|
||||
>
|
||||
<span slot-scope="{ node }">
|
||||
<span v-if="node.data.type === 'Training'" class="el-icon-goods" />
|
||||
<span v-if="node.data.id === trainingId" :style="{color: 'red'}"> {{ node.data.name }}</span>
|
||||
<span v-else-if="node.data.valid" :style="{color: 'green'}"> {{ node.data.name }}</span>
|
||||
<span v-else> {{ node.data.name }}</span>
|
||||
</span>
|
||||
</el-tree>
|
||||
</el-scrollbar>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getPublishLessonTree } from '@/api/jmap/lesson';
|
||||
// import { trainingNotifyNew } from '@/api/simulation';
|
||||
import { launchFullscreen } from '@/utils/screen';
|
||||
import { UrlConfig } from '@/scripts/ConstDic';
|
||||
export default {
|
||||
name: 'LeftSlider',
|
||||
props:{
|
||||
offsetBottom:{
|
||||
type: Number,
|
||||
required: true
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
show: true,
|
||||
treeList: [],
|
||||
defaultProps: ''
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
trainingId () {
|
||||
return this.$route.query.trainingId;
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.initLoadPage();
|
||||
// this.$nextTick(() => {
|
||||
// document.querySelector('.left-slider').style.height = document.querySelector('.left-slider').offsetHeight - this.offsetBottom + 'px';
|
||||
// });
|
||||
},
|
||||
methods: {
|
||||
initLoadPage() {
|
||||
getPublishLessonTree(this.$route.query.lessonId).then(response => {
|
||||
if (response.data.tree && response.data.tree.length > 0) {
|
||||
this.treeList = response.data.tree;
|
||||
}
|
||||
}).catch(error => {
|
||||
this.$message.error(this.$t('tip.failedCourse') + ':' + error.message);
|
||||
});
|
||||
},
|
||||
handleSliderShow(flag) {
|
||||
this.$emit('overallTranslation', flag);
|
||||
const slider = document.getElementById('leftSlider');
|
||||
if (flag) {
|
||||
slider.style.transform = 'translateX(0)';
|
||||
this.show = false;
|
||||
} else {
|
||||
slider.style.transform = '';
|
||||
this.show = true;
|
||||
}
|
||||
},
|
||||
clickEvent(obj, node, ele) {
|
||||
if (obj && obj.type === 'Training') {
|
||||
if (obj.valid) {
|
||||
this.disabled = true;
|
||||
// trainingNotifyNew({ trainingId: obj.id }).then(resp => {
|
||||
const query = {
|
||||
group: this.$route.query.group, trainingId: obj.id, lessonId: this.$route.query.lessonId, mapId: this.$route.query.mapId, lineCode:this.$route.query.lineCode, noPreLogout: this.$route.query.noPreLogout
|
||||
};
|
||||
this.$router.replace({ path: `${UrlConfig.display}/teach`, query: query });
|
||||
launchFullscreen();
|
||||
// }).catch(error => {
|
||||
// this.$messageBox(`${this.$t('tip.createSimulationFaild')} : ${error.message}`);
|
||||
// this.disabled = false;
|
||||
// });
|
||||
} else {
|
||||
this.$confirm(this.$t('tip.accessCourseNo'), this.$t('tip.hint'), {
|
||||
confirmButtonText: this.$t('tip.confirm'),
|
||||
cancelButtonText: this.$t('tip.cancel')
|
||||
}).then(() => {
|
||||
// this.buy();
|
||||
}).catch(() => { });
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.left-slider{
|
||||
z-index: 10;
|
||||
width: 400px;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
transform: translateX(-400px);
|
||||
}
|
||||
.slider-tree{
|
||||
height: calc(100% - 40px);
|
||||
border: 2px solid #409EFF;
|
||||
}
|
||||
.handleShow{
|
||||
position: absolute;
|
||||
left: 400px;
|
||||
top: 50%;
|
||||
background: #fff;
|
||||
color: #000;
|
||||
border-radius: 3px;
|
||||
box-shadow: 3px 1px 5px #000;
|
||||
padding: 3px;
|
||||
}
|
||||
.tip-title {
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
height: 40px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: row-reverse;
|
||||
background-color: #409EFF;
|
||||
border-radius: 5px 5px 0 0;
|
||||
justify-content: center;
|
||||
padding: 0 10px;
|
||||
color: #fff;
|
||||
font-size: 18px;
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
@ -1,482 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="display-card" :style="{top: offset + 'px'}">
|
||||
<el-row>
|
||||
<el-radio-group v-model="demoMode" class="mode" size="small">
|
||||
<el-radio-button :label="TrainingMode.TEACH">{{ $t('display.lesson.teachingMode') }}</el-radio-button>
|
||||
<el-radio-button :label="TrainingMode.PRACTICE">{{ $t('display.lesson.practiceMode') }}</el-radio-button>
|
||||
<el-radio-button :label="TrainingMode.TEST">{{ $t('display.lesson.testMode') }}</el-radio-button>
|
||||
</el-radio-group>
|
||||
<span class="display-time">{{ formatUsedTime }}</span>
|
||||
<span v-if="demoMode === TrainingMode.TEST" class="display-score">{{ $t('display.lesson.score') }}{{ formatScore }}</span>
|
||||
<el-button v-if="messageBoard" size="small" @click="messageBoardShow">留言板</el-button>
|
||||
</el-row>
|
||||
</div>
|
||||
<div id="teachGroupButton" class="display-draft" :style="{bottom: offsetBottom + 'px'}">
|
||||
<el-button-group>
|
||||
<el-button type="success" class="start" :disabled="isDisable || dataError" :loading="startLoading" @click="start">{{ $t('display.startBtn') }}</el-button>
|
||||
<el-button type="danger" class="end" :disabled="!isDisable || dataError" @click="end">{{ $t('display.endBtn') }}</el-button>
|
||||
<el-button type="primary" :disabled="backDisable" class="back" @click="back">{{ $t('display.backBtn') }}</el-button>
|
||||
</el-button-group>
|
||||
</div>
|
||||
<tip-training-detail :training-obj="trainingObj" :offset-bottom="offsetBottom + tipBottom" />
|
||||
<left-slider v-if="isShowLeftSlider" :offset-bottom="offsetBottom" @overallTranslation="overallTranslation" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import TipTrainingDetail from './tipTrainingDetail';
|
||||
import LeftSlider from './LeftSlider';
|
||||
import { mapGetters } from 'vuex';
|
||||
import { Notification } from 'element-ui';
|
||||
import { startTrainingNew, endTrainingNew } from '@/api/jmap/training';
|
||||
import { trainingNotifyNew } from '@/api/simulation';
|
||||
import { TrainingMode, UrlConfig } from '@/scripts/ConstDic';
|
||||
import { timeFormat } from '@/utils/date';
|
||||
import { getTrainingStepsDetailNew, loadTrainingInSimulation } from '@/api/jmap/training';
|
||||
import { EventBus } from '@/scripts/event-bus';
|
||||
import { getSessionStorage } from '@/utils/auth';
|
||||
import { getPostByProjectCode } from '@/api/learn';
|
||||
import { ProjectCode } from '@/scripts/ProjectConfig';
|
||||
|
||||
export default {
|
||||
name: 'MenuLesson',
|
||||
components: {
|
||||
TipTrainingDetail,
|
||||
LeftSlider
|
||||
},
|
||||
props: {
|
||||
offset: {
|
||||
type: Number,
|
||||
required: true
|
||||
},
|
||||
offsetBottom: {
|
||||
type: Number,
|
||||
required: true
|
||||
},
|
||||
tipBottom: {
|
||||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
dataError: {
|
||||
type: Boolean,
|
||||
default() {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
result: {},
|
||||
timeInterval: null,
|
||||
TrainingMode: TrainingMode,
|
||||
trainingObj:{},
|
||||
demoMode: TrainingMode.TEACH,
|
||||
isDisable: false,
|
||||
backDisable: false,
|
||||
startLoading: false,
|
||||
messageBoard: false,
|
||||
prdTypeMap: {
|
||||
'01': '01', // 现地 => 现地
|
||||
'02': '02', // 行调 => 行调
|
||||
'04': '02', // 司机 => 行调
|
||||
'05': '' // 派班 => null
|
||||
}
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapGetters('training', [
|
||||
'score',
|
||||
'usedTime',
|
||||
'basicInfo'
|
||||
]),
|
||||
group() {
|
||||
return this.$route.query.group;
|
||||
},
|
||||
formatScore() {
|
||||
return this.score;
|
||||
},
|
||||
formatUsedTime() {
|
||||
return timeFormat(this.usedTime);
|
||||
},
|
||||
isShowLeftSlider() {
|
||||
return this.$route.query.lessonId != '0' && !this.isOther;
|
||||
},
|
||||
project() {
|
||||
return getSessionStorage('project');
|
||||
},
|
||||
isOther() {
|
||||
return this.$route.query.from == 'kzfmooc';
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
demoMode: function (val) {
|
||||
this.$store.dispatch('training/end', null);
|
||||
this.$store.dispatch('training/reset');
|
||||
this.$store.dispatch('training/setStopCountTime');
|
||||
this.$store.dispatch('training/emitTipFresh');
|
||||
this.$store.dispatch('menuOperation/setButtonOperation', null);
|
||||
this.isDisable = false;
|
||||
},
|
||||
'$store.state.map.mapViewLoadedCount': function (val) {
|
||||
this.getTrainingData();
|
||||
},
|
||||
'$store.state.training.operateErrMsg': function (val) {
|
||||
this.tipInfo({ color: val.color, message: val.errMsg });
|
||||
},
|
||||
'$store.state.socket.simulationOver':function(val) {
|
||||
this.back();
|
||||
},
|
||||
'$store.state.training.simulationUserList': function(val) {
|
||||
const userInfo = this.$store.state.training.simulationUserList.find(user => user.userId == this.$store.state.user.id );
|
||||
if (userInfo.type === 'STATION_SUPERVISOR') {
|
||||
if (this.$store.state.map.map && this.$store.state.map.map.pictureList) {
|
||||
const picture = this.$store.state.map.map.pictureList.find(picture => picture.stationCodes && picture.stationCodes.includes(userInfo.deviceCode) && picture.type === 'chainStation');
|
||||
if (picture) {
|
||||
const mapDevice = this.$store.state.map.mapDevice;
|
||||
const list = [];
|
||||
const deviceList = [];
|
||||
for (const key in mapDevice) {
|
||||
list.push(mapDevice[key]);
|
||||
deviceList.push(key);
|
||||
}
|
||||
this.$store.dispatch('map/setPictureDeviceMap', picture.deviceMap);
|
||||
this.$jlmap.updatePicture(deviceList);
|
||||
// this.$jlmap.updateTransform(picture.scaling, picture.origin);
|
||||
this.$store.dispatch('map/setShowCentralizedStationCode', userInfo.deviceCode);
|
||||
} else {
|
||||
this.$store.dispatch('map/setShowCentralizedStationCode', userInfo.deviceCode);
|
||||
const mapDevice = this.$store.state.map.mapDevice;
|
||||
const list = [];
|
||||
for (const key in mapDevice) {
|
||||
list.push(mapDevice[key]);
|
||||
}
|
||||
this.$jlmap.updateShowStation(list, userInfo.deviceCode);
|
||||
}
|
||||
} else {
|
||||
this.$store.dispatch('map/setShowCentralizedStationCode', userInfo.deviceCode);
|
||||
const mapDevice = this.$store.state.map.mapDevice;
|
||||
const list = [];
|
||||
for (const key in mapDevice) {
|
||||
list.push(mapDevice[key]);
|
||||
}
|
||||
this.$jlmap.updateShowStation(list, userInfo.deviceCode);
|
||||
}
|
||||
}
|
||||
},
|
||||
'$store.state.socket.simulationRoleList':function(list) {
|
||||
if (list && list.length) {
|
||||
this.checkRoleChange(list);
|
||||
}
|
||||
},
|
||||
async $route() {
|
||||
loadTrainingInSimulation(this.group, this.$route.query.trainingId).then(resp => {
|
||||
this.setTrainingData(resp);
|
||||
this.endViewLoading(true);
|
||||
}).catch(error => {
|
||||
this.endViewLoading(true);
|
||||
this.$messageBox(`初始化实训内容失败: ${error.message}`);
|
||||
});
|
||||
this.resetTraining();
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
if (this.project) {
|
||||
getPostByProjectCode(ProjectCode[this.project]).then(resp => {
|
||||
if (resp.data) {
|
||||
this.messageBoard = true;
|
||||
}
|
||||
}).catch(() => {
|
||||
// this.$message.error('获取留言板信息失败');
|
||||
console.log('获取留言板信息失败');
|
||||
});
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
tipInfo(opt) {
|
||||
if (opt && opt.hasOwnProperty('color') && opt.hasOwnProperty('message')) {
|
||||
const h = this.$createElement;
|
||||
this.$notify({
|
||||
title: this.$t('global.tips'),
|
||||
|
||||
message: h('i', { style: 'color:' + opt.color }, opt.message)
|
||||
});
|
||||
}
|
||||
},
|
||||
setTrainingData(resp) {
|
||||
const detail = resp.data;
|
||||
this.trainingObj = detail;
|
||||
this.$store.dispatch('exam/setCenter', detail.locateDeviceCode);
|
||||
this.$store.dispatch('training/setTrainingData', this.trainingObj); // 设置实训教学信息
|
||||
this.$store.dispatch('training/setPrdType', this.prdTypeMap[detail.prdType]);
|
||||
},
|
||||
resetTraining() {
|
||||
this.$store.dispatch('training/end', null);
|
||||
this.$store.dispatch('training/reset');
|
||||
this.$store.dispatch('training/emitTipFresh');
|
||||
this.$store.dispatch('menuOperation/setButtonOperation', null);
|
||||
this.$store.dispatch('training/setStopCountTime');
|
||||
this.$store.dispatch('training/setScore', 0);
|
||||
this.$store.dispatch('training/setTrainingStart', false);
|
||||
this.isDisable = false;
|
||||
},
|
||||
getTrainingData() {
|
||||
if (this.$route.query.trainingId) {
|
||||
// 获取实训步骤数据（新版地图）
|
||||
getTrainingStepsDetailNew(this.$route.query.trainingId, { group: this.group }).then(resp => {
|
||||
this.setTrainingData(resp);
|
||||
}).catch(error => {
|
||||
this.$messageBox(`初始化实训内容失败: ${error.message}`);
|
||||
});
|
||||
}
|
||||
this.resetTraining();
|
||||
},
|
||||
overallTranslation(flag) {
|
||||
const panel = document.getElementById('leftSlider');
|
||||
if (flag) {
|
||||
panel.style.transform = 'translateX(400px)';
|
||||
} else {
|
||||
panel.style.transform = '';
|
||||
}
|
||||
},
|
||||
start() {
|
||||
// 清空按钮操作
|
||||
this.$store.dispatch('menuOperation/setButtonOperation', null);
|
||||
this.startLoading = true;
|
||||
if (this.trainingObj && this.trainingObj.id) {
|
||||
startTrainingNew(this.trainingObj, this.group).then(response => {
|
||||
this.isDisable = true;
|
||||
this.$store.dispatch('training/setTrainingStart', true);
|
||||
this.$store.dispatch('map/clearJlmapTrainView').then(() => {
|
||||
this.$store.dispatch('training/teachModeStart', this.demoMode).then(()=>{
|
||||
this.$store.dispatch('training/countTime', 'Lesson'); // 开始计时
|
||||
this.$store.dispatch('training/emitTipFresh');
|
||||
this.tipInfo({ color: 'green', message: this.$t('global.pleaseOpearte') });
|
||||
});
|
||||
});
|
||||
this.startLoading = false;
|
||||
}).catch(() => {
|
||||
this.isDisable = false;
|
||||
this.startLoading = false;
|
||||
});
|
||||
} else {
|
||||
this.startLoading = false;
|
||||
this.$messageBox(this.$t('display.lesson.selectTraining'));
|
||||
}
|
||||
},
|
||||
endCommit() {
|
||||
const mode = {
|
||||
mode: this.demoMode,
|
||||
id: this.trainingObj.id,
|
||||
lessonId: this.$route.query.lessonId,
|
||||
usedTime: this.usedTime
|
||||
};
|
||||
endTrainingNew(mode, this.group).then(response => {
|
||||
const data = response.data;
|
||||
this.result = data;
|
||||
this.$store.dispatch('training/judgeFinish', data).then(rsp => {
|
||||
this.$store.dispatch('training/setStopCountTime');
|
||||
this.$store.dispatch('training/emitTipFresh');
|
||||
this.$store.dispatch('training/setTrainingStart', false);
|
||||
});
|
||||
}).catch(() => {
|
||||
this.$messageBox(this.$t('display.lesson.endTrainingError'));
|
||||
});
|
||||
},
|
||||
end() {
|
||||
// 如果是测试模式需要获取最终的得分
|
||||
if (this.trainingObj && this.trainingObj.id) {
|
||||
this.isDisable = false;
|
||||
this.$store.dispatch('training/isStepOver').then((rnt) => {
|
||||
if (rnt) {
|
||||
this.endCommit();
|
||||
} else {
|
||||
this.backDisable = true;
|
||||
this.$confirm(this.$t('display.lesson.endTrainingTip'), this.$t('global.tips'), {
|
||||
cancelButtonText: this.$t('global.cancel'),
|
||||
confirmButtonText: this.$t('global.confirm'),
|
||||
type: 'warning',
|
||||
center: true,
|
||||
zIndex: 9999
|
||||
}).then(() => {
|
||||
this.backDisable = false;
|
||||
const mode = {
|
||||
mode: this.demoMode,
|
||||
id: this.trainingObj.id,
|
||||
lessonId: this.$route.query.lessonId,
|
||||
usedTime: this.usedTime
|
||||
};
|
||||
endTrainingNew(mode, this.group).then(response => {
|
||||
this.result = response.data;
|
||||
this.$store.dispatch('training/end', null);
|
||||
this.$store.dispatch('training/setStopCountTime');
|
||||
this.$store.dispatch('training/setScore', 0);
|
||||
this.$store.dispatch('training/emitTipFresh');
|
||||
this.$store.dispatch('training/setTrainingStart', false);
|
||||
}).catch(() => {
|
||||
this.$messageBox(this.$t('display.lesson.endTrainingError'));
|
||||
});
|
||||
}).catch(() => {
|
||||
this.isDisable = true;
|
||||
this.backDisable = false;
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
back() {
|
||||
Notification.closeAll();
|
||||
if (this.isOther) {
|
||||
EventBus.$emit('demoResult', this.result);
|
||||
} else if (this.$route.params.mode == 'record') {
|
||||
/** 如果是演示返回时，需要重新创建仿真*/
|
||||
trainingNotifyNew({ trainingId: this.$route.query.trainingId }).then(resp => {
|
||||
this.$router.push({ path: `${UrlConfig.lesson.record}/${this.$route.query.trainingId}/${this.$route.query.trainingName}`, query: { group: resp.data } });
|
||||
}).catch(error => {
|
||||
this.$messageBox(`${this.$t('display.lesson.createSimulationError')}: ${error.message}`);
|
||||
});
|
||||
} else {
|
||||
if (this.$route.query.noPreLogout) {
|
||||
this.$router.replace({path:'/device/teachDetail', query: {lessonId: this.$route.query.lessonId, mapId: this.$route.query.mapId, noPreLogout: this.$route.query.noPreLogout}});
|
||||
} else {
|
||||
history.go(-1);
|
||||
}
|
||||
}
|
||||
},
|
||||
// 结束加载状态
|
||||
endViewLoading(isSuccess) {
|
||||
if (!isSuccess) {
|
||||
this.$store.dispatch('map/mapClear');
|
||||
}
|
||||
this.$nextTick(() => {
|
||||
EventBus.$emit('viewLoading', false);
|
||||
});
|
||||
},
|
||||
messageBoardShow() {
|
||||
const routeData = this.$router.resolve({
|
||||
path:'/messageBoard',
|
||||
query:{
|
||||
project: this.project,
|
||||
noPreLogout: true
|
||||
}
|
||||
});
|
||||
window.open(routeData.href, '_blank');
|
||||
},
|
||||
checkRoleChange(list) {
|
||||
list.forEach(item => {
|
||||
if (item.messageType === 'PLAY_CHANGE' && item.userId == this.$store.state.user.id && item.type === 'STATION_SUPERVISOR') {
|
||||
if (this.$store.state.map.map && this.$store.state.map.map.pictureList) {
|
||||
const picture = this.$store.state.map.map.pictureList.find(picture => picture.stationCodes && picture.stationCodes.includes(item.deviceCode) && picture.type === 'chainStation');
|
||||
if (picture) {
|
||||
const mapDevice = this.$store.state.map.mapDevice;
|
||||
const list = [];
|
||||
const deviceList = [];
|
||||
for (const key in mapDevice) {
|
||||
list.push(mapDevice[key]);
|
||||
deviceList.push(key);
|
||||
}
|
||||
this.$store.dispatch('map/setPictureDeviceMap', picture.deviceMap);
|
||||
this.$jlmap.updatePicture(deviceList);
|
||||
// this.$jlmap.updateTransform(picture.scaling, picture.origin);
|
||||
this.$store.dispatch('map/setShowCentralizedStationCode', item.deviceCode);
|
||||
} else {
|
||||
this.$store.dispatch('map/setShowCentralizedStationCode', item.deviceCode);
|
||||
const mapDevice = this.$store.state.map.mapDevice;
|
||||
const list = [];
|
||||
for (const key in mapDevice) {
|
||||
list.push(mapDevice[key]);
|
||||
}
|
||||
this.$jlmap.updateShowStation(list, item.deviceCode);
|
||||
}
|
||||
} else {
|
||||
this.$store.dispatch('map/setShowCentralizedStationCode', item.deviceCode);
|
||||
const mapDevice = this.$store.state.map.mapDevice;
|
||||
const list = [];
|
||||
for (const key in mapDevice) {
|
||||
list.push(mapDevice[key]);
|
||||
}
|
||||
this.$jlmap.updateShowStation(list, item.deviceCode);
|
||||
}
|
||||
this.$jlmap.setCenter(this.trainingObj.locateDeviceCode);
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style rel="stylesheet/scss" lang="scss" scoped>
|
||||
@import "src/styles/mixin.scss";
|
||||
|
||||
.display-card {
|
||||
z-index: 9;
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
left: 5px;
|
||||
height: 32px;
|
||||
}
|
||||
|
||||
.display-card .el-row {
|
||||
line-height: 32px !important;
|
||||
}
|
||||
|
||||
.display-mode {
|
||||
display: -moz-inline-box;
|
||||
display: inline-block;
|
||||
|
||||
/deep/ .el-radio-button__inner {
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
.display-time {
|
||||
background-color: white;
|
||||
display: -moz-inline-box;
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
font-weight: bold;
|
||||
border: 1px solid lightskyblue;
|
||||
width: 100px;
|
||||
height: 32px;
|
||||
line-height: 24px;
|
||||
border-radius: 4px;
|
||||
margin-left: 10px;
|
||||
font-family: "Microsoft" !important;
|
||||
font-size: 18px !important;
|
||||
color: black;
|
||||
}
|
||||
|
||||
.display-score {
|
||||
background-color: black;
|
||||
display: -moz-inline-box;
|
||||
display: inline-block;
|
||||
text-align: left;
|
||||
border: 1px solid lightskyblue;
|
||||
width: 100px;
|
||||
height: 32px;
|
||||
line-height: 24px;
|
||||
border-radius: 4px;
|
||||
padding-left: 2px;
|
||||
margin-left: 10px;
|
||||
font-family: "Microsoft" !important;
|
||||
font-size: 18px !important;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.display-draft {
|
||||
position: absolute;
|
||||
float: right;
|
||||
right: 15px;
|
||||
bottom: 15px;
|
||||
|
||||
.back {
|
||||
z-index: 100000;
|
||||
}
|
||||
|
||||
.start{z-index:2;}
|
||||
.end{z-index:2}
|
||||
|
||||
/deep/ .el-button {
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,304 +0,0 @@
|
||||
<template>
|
||||
<!-- v-drag 拖拽 调整宽高 -->
|
||||
<div v-quickMenuDrag class="reminder-drag" :style="{bottom: offsetBottom + 'px'}">
|
||||
<div ref="drapBox" class="reminder-box">
|
||||
<div class="tip-title">
|
||||
<i v-show="isShrink" class="icon el-icon-minus" @click="shrink" />
|
||||
<i v-show="!isShrink" class="icon el-icon-plus" @click="shrink" />
|
||||
<p v-if="isShrink" style="color: #fff;">
|
||||
<span>{{ lessonName }}</span>
|
||||
</p>
|
||||
</div>
|
||||
<div v-if="isShrink" class="reminder-box-content">
|
||||
<div class="zhezhao" />
|
||||
<div ref="dragBody" class="tip-body-box">
|
||||
<div class="tip-body">
|
||||
<el-scrollbar wrap-class="scrollbar-wrapper">
|
||||
<p class="list-item">
|
||||
<span class="list-label">{{ $t('display.training.trainingName') }}</span>
|
||||
<span class="list-elem">{{ courseModel.name }}</span>
|
||||
</p>
|
||||
<!-- <p class="list-item">-->
|
||||
<!-- <span class="list-label">{{ $t('display.training.bestTime') }}</span>-->
|
||||
<!-- <span class="list-elem">{{ courseModel.minDuration }} {{ $t('display.seconds') }} </span>-->
|
||||
<!-- </p>-->
|
||||
<!-- <p class="list-item">-->
|
||||
<!-- <span class="list-label">{{ $t('display.training.maximumTime') }}</span>-->
|
||||
<!-- <span class="list-elem">{{ courseModel.maxDuration }} {{ $t('display.seconds') }} </span>-->
|
||||
<!-- </p>-->
|
||||
<p class="list-item">
|
||||
<span class="list-label" style="vertical-align: top;"> {{ $t('display.training.trainingInstructions') }}</span>
|
||||
<span class="list-elem elem-span">{{ courseModel.remarks }}</span>
|
||||
</p>
|
||||
</el-scrollbar>
|
||||
</div>
|
||||
<div class="drag-right" />
|
||||
<div class="drag-left" />
|
||||
<div class="drag-bottom" />
|
||||
<div class="drag-top" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapGetters } from 'vuex';
|
||||
import { getPublishLessonDetail } from '@/api/jmap/lesson';
|
||||
import { launchFullscreen } from '@/utils/screen';
|
||||
|
||||
export default {
|
||||
name: 'TipTrainingDetail',
|
||||
props: {
|
||||
trainingObj: {
|
||||
type: Object,
|
||||
default() {
|
||||
return null;
|
||||
}
|
||||
},
|
||||
offsetBottom: {
|
||||
type: Number,
|
||||
required: true
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
training: {
|
||||
id: '',
|
||||
name: '',
|
||||
remarks: ''
|
||||
},
|
||||
isShrink: true,
|
||||
lessonName: '',
|
||||
courseModel: {
|
||||
id: '',
|
||||
name: '',
|
||||
maxDuration: '',
|
||||
minDuration: '',
|
||||
remarks: '',
|
||||
updateTime: ''
|
||||
},
|
||||
showSumbit: false,
|
||||
lessonIndex: 0
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapGetters('trainingList', [
|
||||
'trainingList'
|
||||
])
|
||||
},
|
||||
watch: {
|
||||
'trainingObj': function (val) {
|
||||
if (val) {
|
||||
this.courseModel = {
|
||||
id: val.id,
|
||||
name: val.name,
|
||||
maxDuration: val.maxDuration,
|
||||
minDuration: val.minDuration,
|
||||
remarks: val.remarks,
|
||||
updateTime: val.updateTime
|
||||
};
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.loadInitData(this.$route.query);
|
||||
},
|
||||
methods: {
|
||||
loadInitData(obj) {
|
||||
this.showSumbit = false;
|
||||
this.lessonName = '';
|
||||
this.courseModel = {
|
||||
id: '',
|
||||
name: '',
|
||||
maxDuration: '',
|
||||
minDuration: '',
|
||||
remarks: '',
|
||||
updateTime: ''
|
||||
};
|
||||
|
||||
if (parseInt(obj.lessonId)) {
|
||||
getPublishLessonDetail({ id: obj.lessonId }).then(response => {
|
||||
this.lessonName = response.data.name;
|
||||
}).catch(error => {
|
||||
this.$message.error(this.$t('display.training.getCourseInformationFail') + ':' + error.message);
|
||||
});
|
||||
}
|
||||
},
|
||||
jump(obj) {
|
||||
const query = {
|
||||
group: this.$route.query.group,
|
||||
trainingId: this.$route.query.trainingId,
|
||||
lessonId: this.$route.query.lessonId
|
||||
};
|
||||
this.$router.push({ path: `/display/${this.$route.params.mode}`, query: query });
|
||||
launchFullscreen();
|
||||
},
|
||||
shrink() {
|
||||
// const height = this.$refs.dragBody.offsetHeight + 40;
|
||||
// const top = this.$refs.drapBox.style.top;
|
||||
if (this.isShrink) {
|
||||
//
|
||||
// this.$refs.drapBox.style.height = '40px';
|
||||
// this.$refs.drapBox.style.top = '';
|
||||
this.isShrink = false;
|
||||
} else {
|
||||
this.isShrink = true;
|
||||
this.$nextTick(()=>{
|
||||
const dragDom = document.querySelector('.reminder-drag').style.bottom;
|
||||
if (document.body.clientHeight - 300 - parseInt(dragDom.replace('px', '')) < 0) {
|
||||
document.querySelector('.reminder-drag').style.bottom = `${document.body.clientHeight - 300}px`;
|
||||
}
|
||||
});
|
||||
// this.$refs.drapBox.style.height = height + 'px';
|
||||
// this.$refs.drapBox.style.top = top;
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style rel="stylesheet/scss" lang="scss" scoped>
|
||||
@import "src/styles/mixin.scss";
|
||||
|
||||
.tip-body-box {
|
||||
position: relative;
|
||||
height: 260px;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.reminder-drag{
|
||||
position: absolute;
|
||||
bottom: 0px;
|
||||
left: 15px;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.elem-span{
|
||||
display:inline-block;width:77%;line-height:26px;margin-top:-4px;
|
||||
}
|
||||
|
||||
.zhezhao{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
filter: blur(8px);
|
||||
background: rgba(255,255,255,0.9);
|
||||
position:absolute;
|
||||
}
|
||||
.reminder-box-content{
|
||||
width: 500px;
|
||||
height: 260px;
|
||||
left: 0;
|
||||
top: 0;
|
||||
z-index: 2;
|
||||
background: rgba(255,255,255,0.8);
|
||||
position: relative;
|
||||
}
|
||||
.reminder-box {
|
||||
border-radius: 5px;
|
||||
overflow: hidden;
|
||||
z-index: 10;
|
||||
font-size: 18px;
|
||||
|
||||
.tip-title {
|
||||
width: 500px;
|
||||
overflow: hidden;
|
||||
height: 40px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: row-reverse;
|
||||
background-color: rgba(64, 158, 255,1);
|
||||
border-radius: 5px 5px 0 0;
|
||||
justify-content: space-between;
|
||||
padding: 0 10px;
|
||||
}
|
||||
|
||||
.drag-right,
|
||||
.drag-left {
|
||||
width: 10px;
|
||||
cursor: e-resize;
|
||||
background-color: yellow;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.drag-left {
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.drag-bottom {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
height: 10px;
|
||||
cursor: s-resize;
|
||||
background-color: yellow;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.drag-top {
|
||||
position: absolute;
|
||||
top: -45px;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 10px;
|
||||
cursor: s-resize;
|
||||
background-color: yellow;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.tip-body {
|
||||
height: 260px;
|
||||
padding: 10px;
|
||||
|
||||
.list-label {
|
||||
width: 105px;
|
||||
}
|
||||
}
|
||||
|
||||
.tip-foot {
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
right: 0px;
|
||||
bottom: 0px;
|
||||
background-color: #fff;
|
||||
padding: 10px 0 10px 10px;
|
||||
|
||||
.foot-detail {
|
||||
height: 100%;
|
||||
float: right;
|
||||
margin-top: 9px;
|
||||
padding-right: 15px;
|
||||
}
|
||||
|
||||
.foot-submit {
|
||||
float: right;
|
||||
margin-top: 9px;
|
||||
padding-right: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
.icon {
|
||||
float: right;
|
||||
margin-right: 10px;
|
||||
cursor: pointer;
|
||||
background-color: #f3f3f3;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
/deep/ {
|
||||
.el-tree-node__content {
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content {
|
||||
background-color: #d6e5f7;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,497 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<status-icon v-if="$route.query.lineCode == '11' || $route.query.lineCode == '10'" ref="statusIcon" />
|
||||
<demon-chat v-if="!noChatBox" ref="chatbox" :group="group" :user-role="userRole" :offset="offset" />
|
||||
<div class="display-card" :style="{top: offset+'px'}">
|
||||
<el-row>
|
||||
<span v-if="countTime" class="display-score">{{ $t('display.demon.trialTime') }} {{ countTime }}</span>
|
||||
</el-row>
|
||||
</div>
|
||||
|
||||
<demon-menu
|
||||
ref="demonMenu"
|
||||
:is-all-show="!dataError"
|
||||
:jl3dmodel-show="isShow3dmodel && !isShowScheduling && !isDrive"
|
||||
:jl3dname-show="!isShowScheduling&&!isDrive"
|
||||
:cctv-show="!isShowScheduling"
|
||||
:trafficplan-show="!isShowScheduling"
|
||||
:schedule-load-show="isShowScheduling && !runing"
|
||||
:schedule-preview-show="isShowScheduling && runing"
|
||||
:jlmap3d-fault-show="false"
|
||||
:driver-show="isDrive"
|
||||
:all-style="'top:'+(offset+textStatusHeight)+'px'"
|
||||
@runPlanLoadShow="runPlanLoadShow"
|
||||
/>
|
||||
|
||||
<div class="display-draft" :class="{'haerbin_btn_box': $route.query.lineCode == '07'||$route.query.lineCode == '14'}" :style="{bottom: offsetBottom + 'px', zIndex: zIndex}">
|
||||
<el-button-group class="button-group-box">
|
||||
<template v-if="!dataError&&project != 'bjd'">
|
||||
<template v-if="isScriptRun">
|
||||
<el-button type="danger" size="small" @click="handleQuitQuest">退出剧本</el-button>
|
||||
</template>
|
||||
<template v-if="datie">
|
||||
<el-button type="primary" size="small" @click="modifySystemTime">修改系统时间</el-button>
|
||||
</template>
|
||||
<template v-if="!projectDevice">
|
||||
<el-button v-if="project !== 'srsandbox' && !datie " type="success" :disabled="isDisable" size="small" @click="selectBeginTime">{{ $t('display.demon.drivingByPlan') }}</el-button>
|
||||
<!-- isDisable&& -->
|
||||
<el-button v-if="isAdmin && !datie " v-loading="pauseLoading" :type="simulationPaused?'warning':'primary'" size="small" @click="startOrPause">{{ simulationPaused?'开始':'暂停' }}</el-button>
|
||||
<el-button type="danger" size="small" @click="end">{{ $t('display.demon.initialize') }}</el-button>
|
||||
</template>
|
||||
</template>
|
||||
<el-button v-if="project !='bjd'" type="primary" size="small" @click="back">{{ projectDevice || isCtc ?'退出':$t('display.demon.back') }}</el-button>
|
||||
</el-button-group>
|
||||
</div>
|
||||
|
||||
<div v-if="project ==='bjd'" style="position:absolute;right:0;bottom:0"><el-button type="primary" @click="quit">退出</el-button></div>
|
||||
|
||||
<menu-schema
|
||||
ref="menuSchema"
|
||||
:offset="offset"
|
||||
:data-error="dataError"
|
||||
:offset-bottom="offsetBottom"
|
||||
@selectQuest="selectQuest"
|
||||
@changeShowMap="changeShowMap"
|
||||
/>
|
||||
|
||||
<set-time ref="setTime" @ConfirmSelectBeginTime="start" />
|
||||
<modify-time v-if="datie" ref="modifySysTime" />
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
<!-- 单人仿真 -->
|
||||
<script>
|
||||
import SetTime from './demon/setTime';
|
||||
import ModifyTime from './demon/modifyTime';
|
||||
import DemonMenu from './demonMenu';
|
||||
import DemonChat from './demonChat';
|
||||
import { Notification } from 'element-ui';
|
||||
import MenuSchema from '@/views/newMap/displayNew/menuSchema';
|
||||
import { getGoodsTryUse } from '@/api/management/goods';
|
||||
import {getSimulationInfoNew, clearSimulation } from '@/api/simulation';
|
||||
import { PermissionType } from '@/scripts/ConstDic';
|
||||
import { getCountTime } from '@/utils/index';
|
||||
import { TrainingMode } from '@/scripts/ConstDic';
|
||||
import { quitScriptNew } from '@/api/simulation';
|
||||
import { setGoodsTryUse } from '@/api/management/goods';
|
||||
import { simulationPause, simulationStart } from '@/api/rtSimulation';
|
||||
import {loadScriptNew } from '@/api/simulation';
|
||||
import StatusIcon from '@/views/components/StatusIcon/statusIcon';
|
||||
import Vue from 'vue';
|
||||
import { getSessionStorage } from '@/utils/auth';
|
||||
import { EventBus } from '@/scripts/event-bus';
|
||||
|
||||
export default {
|
||||
name: 'MenuDemon',
|
||||
components: {
|
||||
SetTime,
|
||||
ModifyTime,
|
||||
DemonChat,
|
||||
MenuSchema,
|
||||
DemonMenu,
|
||||
StatusIcon
|
||||
},
|
||||
props: {
|
||||
offset: {
|
||||
type: Number,
|
||||
required: true
|
||||
},
|
||||
offsetBottom: {
|
||||
type: Number,
|
||||
required: true
|
||||
},
|
||||
dataError: {
|
||||
type: Boolean,
|
||||
default() {
|
||||
return false;
|
||||
}
|
||||
},
|
||||
textStatusHeight: {
|
||||
type: Number,
|
||||
default() {
|
||||
return 0;
|
||||
}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
tryTime: 0, // 进入页面多少秒
|
||||
timeNow: 0, // 进入页面 相对时间
|
||||
time: null, // 定时器
|
||||
countTime: 0, // 显示 倒计时
|
||||
remainingTime: 0,
|
||||
userRole:'AUDIENCE',
|
||||
pauseLoading: false,
|
||||
goodsId: this.$route.query.goodsId,
|
||||
try: this.$route.query.try, // 是否是试用权限
|
||||
training: {
|
||||
id: '',
|
||||
name: '',
|
||||
remarks: ''
|
||||
},
|
||||
isScriptRun:false,
|
||||
jl3dpassflow:this.$t('display.demon.passengerflow'),
|
||||
jl3dname: this.$t('display.demon.threeDimensionalView'),
|
||||
jl3dstation: this.$t('display.demon.threeDimensionalStation'),
|
||||
jl3dmodel: this.$t('display.demon.deviceView'),
|
||||
isShow3dmodel :true,
|
||||
isGoback: false,
|
||||
runing:false,
|
||||
prdTypeMap: {
|
||||
'01': '01', // 现地 => 现地
|
||||
'02': '02', // 行调 => 行调
|
||||
'04': '02', // 司机 => 行调
|
||||
'05': '' // 派班 => null
|
||||
}
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
isShowScheduling() {
|
||||
return this.$route.query.prdType == '05';
|
||||
},
|
||||
datie() {
|
||||
return ['16', '19'].includes(this.$route.query.lineCode);
|
||||
},
|
||||
isDrive() {
|
||||
return this.$route.query.prdType == '04';
|
||||
},
|
||||
group() {
|
||||
return this.$route.query.group;
|
||||
},
|
||||
projectDevice() {
|
||||
return this.$route.query.projectDevice;
|
||||
},
|
||||
isDisable() {
|
||||
return this.$store.state.training.started;
|
||||
},
|
||||
isCtc() {
|
||||
return !!this.$route.query.ctc;
|
||||
},
|
||||
zIndex() {
|
||||
return this.$route.query.ctc ? 11 : 0;
|
||||
},
|
||||
project() {
|
||||
return getSessionStorage('project');
|
||||
},
|
||||
isAdmin() {
|
||||
return this.$store.state.user.roles.includes('04') || this.$store.state.user.roles.includes('05');
|
||||
},
|
||||
simulationPaused() {
|
||||
return this.$store.state.socket.simulationPause;
|
||||
},
|
||||
noChatBox() {
|
||||
return this.project.includes('srsandbox') || this.project.includes('jxgm');
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
'$store.state.training.subscribeCount': function () {
|
||||
this.group && this.initLoadPage();
|
||||
},
|
||||
'$store.state.socket.simulationRoleList':function(val) {
|
||||
(val || []).forEach(item => {
|
||||
if (item.messageType === 'KICK_OUT' && item.userId == this.$store.state.user.id) {
|
||||
!this.isGoback && this.back();
|
||||
}
|
||||
});
|
||||
},
|
||||
'$store.state.socket.simulationOver':function(val) {
|
||||
!this.isGoback && this.back();
|
||||
},
|
||||
// '$store.state.training.started': function (val) {
|
||||
// this.setRuning(val);
|
||||
// },
|
||||
'$store.state.socket.simulationStart':function(val) {
|
||||
if (val) {
|
||||
this.setRuning(true);
|
||||
this.$store.dispatch('training/simulationStart').then(() => {
|
||||
this.$store.dispatch('map/setShowCentralizedStationNum');
|
||||
});
|
||||
}
|
||||
},
|
||||
'$store.state.socket.simulationReset':function(val) {
|
||||
this.setRuning(false);
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.$store.dispatch('training/setPrdType', this.$route.query.prdType);
|
||||
switch (this.$store.state.training.prdType) {
|
||||
case '02': { this.userRole = 'DISPATCHER'; break; }
|
||||
case '01': { this.userRole = 'STATION_SUPERVISOR'; break; }
|
||||
case '04': { this.userRole = 'DRIVER'; break; }
|
||||
case '05': { this.userRole = 'DEPOT_DISPATCHER'; break; }
|
||||
default: { this.userRole = 'AUDIENCE'; break; }
|
||||
}
|
||||
},
|
||||
beforeDestroy() {
|
||||
if (this.time) {
|
||||
this.setTryTime();
|
||||
clearTimeout(this.time);
|
||||
}
|
||||
this.$store.dispatch('scriptRecord/updateSimulationPause', false);
|
||||
this.$store.dispatch('map/resetActiveTrainList', true);
|
||||
},
|
||||
mounted() {
|
||||
this.$store.dispatch('training/end', TrainingMode.NORMAL);
|
||||
// this.$store.dispatch('training/setPrdType', this.prdTypeMap[this.$route.query.prdType]);
|
||||
this.$nextTick(() => {
|
||||
this.$refs.demonMenu.menuClick();
|
||||
});
|
||||
},
|
||||
methods: {
|
||||
startOrPause() {
|
||||
this.pauseLoading = true;
|
||||
if (this.simulationPaused) {
|
||||
simulationStart(this.group).then(resp => {
|
||||
this.pauseLoading = false;
|
||||
}).catch(() => {
|
||||
this.pauseLoading = false;
|
||||
this.$messageBox('开始失败，请稍后再试');
|
||||
});
|
||||
} else {
|
||||
simulationPause(this.group).then(resp => {
|
||||
this.pauseLoading = false;
|
||||
}).catch(() => {
|
||||
this.pauseLoading = false;
|
||||
this.$messageBox('暂停失败，请稍后再试');
|
||||
});
|
||||
}
|
||||
},
|
||||
async initLoadPage() {
|
||||
try {
|
||||
if (this.try != '0') {
|
||||
this.loadInitData();
|
||||
}
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
}
|
||||
},
|
||||
loadInitData() {
|
||||
const data = {
|
||||
mapId: this.$route.query.mapId,
|
||||
prdType: this.$route.query.prdType,
|
||||
permissionType: PermissionType.SIMULATION
|
||||
};
|
||||
getGoodsTryUse(data).then(res => {
|
||||
if (res.data) {
|
||||
this.remainingTime = res.data.tryTime;
|
||||
this.timeNow = Date.parse(new Date()) / 1000 + this.remainingTime;
|
||||
}
|
||||
if (this.try) {
|
||||
this.time = setInterval(() => {
|
||||
this.tryTime += 1;
|
||||
this.countTime = getCountTime(this.timeNow);
|
||||
if (this.countTime == -1) {
|
||||
this.back();
|
||||
}
|
||||
}, 1000);
|
||||
}
|
||||
}).catch(() => {
|
||||
this.$messageBox(this.$t('display.demon.getTimeFail'));
|
||||
});
|
||||
},
|
||||
selectBeginTime() {
|
||||
this.$refs.setTime.doShow();
|
||||
},
|
||||
start(model) { // 开始仿真
|
||||
this.$emit('start', model);
|
||||
},
|
||||
setRuning(run) {
|
||||
this.runing = run;
|
||||
this.$refs.demonMenu.hideScheduling(run);
|
||||
},
|
||||
end() {
|
||||
this.$emit('end');
|
||||
},
|
||||
handleQuitQuest() {
|
||||
quitScriptNew(this.group).then(resp => {
|
||||
getSimulationInfoNew(this.group).then((res)=>{
|
||||
EventBus.$emit('clearRunSeries');
|
||||
this.quitQuest();
|
||||
this.initLoadPage();
|
||||
this.clearAllData();
|
||||
this.$store.dispatch('scriptRecord/updateBgSet', false);
|
||||
});
|
||||
}).catch(() => {
|
||||
this.$messageBox(this.$t('display.demon.exitTaskFail'));
|
||||
});
|
||||
},
|
||||
// 修改系统时间
|
||||
modifySystemTime() {
|
||||
this.$refs.modifySysTime.doShow();
|
||||
},
|
||||
// 选择脚本
|
||||
async selectQuest({row, id, mapLocation, roleName}) {
|
||||
try {
|
||||
let userRole = 'AUDIENCE';
|
||||
if (id) {
|
||||
this.$store.dispatch('training/setPrdType', this.$route.query.prdType);
|
||||
if (this.$route.query.prdType) {
|
||||
if (this.$route.query.prdType == '02') {
|
||||
userRole = 'DISPATCHER';
|
||||
} else if (this.$route.query.prdType == '01') {
|
||||
userRole = 'STATION_SUPERVISOR';
|
||||
} else if (this.$route.query.prdType == '04') {
|
||||
userRole = 'DRIVER';
|
||||
} else if (this.$route.query.prdType == '05') {
|
||||
userRole = 'DEPOT_DISPATCHER';
|
||||
} else {
|
||||
userRole = 'AUDIENCE';
|
||||
}
|
||||
}
|
||||
this.$store.dispatch('training/setRoles', userRole);
|
||||
} else {
|
||||
this.$store.dispatch('training/setRoles', 'AUDIENCE');
|
||||
this.$store.dispatch('training/setPrdType', '');
|
||||
}
|
||||
// this.$refs.menuSchema.loadRunData();
|
||||
this.userRole = userRole;
|
||||
this.$store.dispatch('scriptRecord/updateBgSet', true);
|
||||
// this.$refs.chatbox.setMembers(id);
|
||||
(this.$store.state.training.memberData[id] || {}).userId = this.$store.state.user.id;
|
||||
(this.$store.state.training.memberData[id] || {}).disabled = true;
|
||||
const res = await loadScriptNew(row.id, id, this.group);
|
||||
if (res && res.code == 200) {
|
||||
if (mapLocation) {
|
||||
const newMapLocation = {'offsetX': mapLocation.x, 'offsetY': mapLocation.y, 'scaleRate': mapLocation.scale};
|
||||
Vue.prototype.$jlmap.setOptions(newMapLocation);
|
||||
}
|
||||
this.isScriptRun = true;
|
||||
// this.initLoadPage();
|
||||
}
|
||||
} catch (error) {
|
||||
this.$messageBox(error.message);
|
||||
}
|
||||
// if (this.isScript) {
|
||||
// this.$refs.menuScript.initLoadPage();
|
||||
// }
|
||||
},
|
||||
quitQuest() {
|
||||
this.isScriptRun = false;
|
||||
let userRole = '';
|
||||
if (this.$route.query.prdType) {
|
||||
if (this.$route.query.prdType == '02') {
|
||||
userRole = 'DISPATCHER';
|
||||
} else if (this.$route.query.prdType == '01') {
|
||||
userRole = 'STATION_SUPERVISOR';
|
||||
} else if (this.$route.query.prdType == '04') {
|
||||
userRole = 'DRIVER';
|
||||
} else if (this.$route.query.prdType == '05') {
|
||||
userRole = 'DEPOT_DISPATCHER';
|
||||
} else {
|
||||
userRole = 'AUDIENCE';
|
||||
}
|
||||
}
|
||||
this.userRole = userRole;
|
||||
if (this.$refs.chatbox) {
|
||||
this.$refs.chatbox.clearAllData();
|
||||
}
|
||||
this.$store.dispatch('training/setPrdType', this.$route.query.prdType);
|
||||
this.$store.dispatch('training/setRoles', userRole);
|
||||
this.$store.dispatch('training/setScriptQuit');
|
||||
// this.$store.dispatch('scriptRecord/updateSimulationPause', false);
|
||||
},
|
||||
clearAllData() {
|
||||
if (this.$refs.chatbox) {
|
||||
this.$refs.chatbox.clearAllData();
|
||||
}
|
||||
},
|
||||
async back() {
|
||||
this.isGoback = true;
|
||||
if (this.projectDevice) {
|
||||
if (this.$route.query.type == 'IM') {
|
||||
clearSimulation(this.group).then(res=>{
|
||||
this.$store.dispatch('training/over').then(() => {
|
||||
this.$store.dispatch('LogOut').then(() => {
|
||||
// this.$store.dispatch('training/reset');
|
||||
// this.$store.dispatch('map/mapClear');
|
||||
location.reload();
|
||||
});
|
||||
});
|
||||
});
|
||||
} else {
|
||||
this.$store.dispatch('training/over').then(() => {
|
||||
this.$store.dispatch('LogOut').then(() => {
|
||||
// this.$store.dispatch('training/reset');
|
||||
// this.$store.dispatch('map/mapClear');
|
||||
location.reload();
|
||||
});
|
||||
});
|
||||
}
|
||||
// || this.project === 'bjd'
|
||||
|
||||
} else {
|
||||
if (this.project === 'bjd' || this.isCtc) {
|
||||
window.close();
|
||||
} else {
|
||||
this.$store.dispatch('map/setShowCentralizedStationCode', '');
|
||||
history.go(-1);
|
||||
Notification.closeAll();
|
||||
}
|
||||
|
||||
}
|
||||
},
|
||||
setTryTime() {
|
||||
if (this.try) {
|
||||
const data = { time: this.tryTime, goodsId: this.goodsId };
|
||||
if (data.goodsId) {
|
||||
setGoodsTryUse(data);
|
||||
}
|
||||
|
||||
}
|
||||
},
|
||||
runPlanLoadShow() {
|
||||
this.$refs.menuSchema.loadRunPlan();
|
||||
},
|
||||
quit() {
|
||||
window.close();
|
||||
},
|
||||
changeShowMap(flag) {
|
||||
this.$emit('changeShowMap', flag);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style rel="stylesheet/scss" lang="scss" scoped>
|
||||
@import "src/styles/mixin.scss";
|
||||
|
||||
.display-card {
|
||||
z-index: 9;
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
top: 17px;
|
||||
left: 160px;
|
||||
height: 32px;
|
||||
}
|
||||
|
||||
.display-card .el-row {
|
||||
line-height: 32px !important;
|
||||
}
|
||||
|
||||
.display-score {
|
||||
background-color: black;
|
||||
display: -moz-inline-box;
|
||||
display: inline-block;
|
||||
text-align: left;
|
||||
height: 32px;
|
||||
line-height: 24px;
|
||||
border-radius: 4px;
|
||||
padding-left: 2px;
|
||||
margin-left: 10px;
|
||||
font-family: "Microsoft" !important;
|
||||
font-size: 18px !important;
|
||||
color: #fff;
|
||||
}
|
||||
.haerbin_btn_box{
|
||||
width: 450px;
|
||||
bottom: 15px!important;
|
||||
}
|
||||
.display-draft {
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
bottom: 15px;
|
||||
.button-group-box{
|
||||
float: right;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,520 +0,0 @@
|
||||
<template>
|
||||
<div style="height:100%;">
|
||||
<div class="schema" :style="{top: offset+'px'}">
|
||||
<select-station v-show="!$route.query.joint" v-if="isShowSelectStation && !isScript" ref="selectStation" :style-css="'width: 100px;'" />
|
||||
<el-select v-model="speed" style="width: 100px;" size="small" @change="speedChange">
|
||||
<el-option
|
||||
v-for="item in speedList"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
/>
|
||||
</el-select>
|
||||
<template v-if="!dataError">
|
||||
<el-button-group v-if="project !== 'bjd'">
|
||||
<el-button v-if="$route.query.lineCode === '16'&&!isCtc && project !== 'teaching'&&isLocalStation" size="small" @click="goCtc">车务终端</el-button>
|
||||
<el-button v-if="$route.query.lineCode === '16'&&!isCtc && project !== 'teaching'&&isLocalStation" size="small" @click="goRpManage">车务管理终端</el-button>
|
||||
<el-button v-if="$route.query.lineCode ==='16'&&isLocalStation" size="small" @click="showTrainTicket">路票</el-button>
|
||||
<el-button v-if="showRegisterBookBtn" size="small" @click="showRegisterBook">簿册</el-button>
|
||||
<!-- <el-button v-if="$route.query.lineCode === '16'&&!isCtc" size="small" @click="goDsManage">调度台</el-button> -->
|
||||
<el-button v-if="showDispatcherStation" size="small" @click="changeShowMap">调度台</el-button>
|
||||
<el-button v-if="isLocalStation && $route.query.lineCode!='08' && $route.query.lineCode!='16' && $route.query.lineCode!='19' && project !== 'teaching'" size="small" @click="goIbp">IBP盘</el-button>
|
||||
<el-button v-if="isScheduling && isDepot && project !== 'teaching'" size="small" type="primary" @click="runPlanEditShow">运行图编辑</el-button>
|
||||
<!-- 加载剧本 -->
|
||||
<el-button v-if="isDemon && !isScheduling && !isContest && !isDepoltSim && $route.query.lineCode!='16' && $route.query.lineCode!='19' && project !== 'teaching'" size="small" :disabled="viewDisabled" type="success" @click="viewRunQuest">{{ $t('display.schema.loadScript') }}</el-button>
|
||||
<!-- 运行图加载 -->
|
||||
<!-- notScript && -->
|
||||
<el-button v-if="running && project !== 'teaching'" size="small" :disabled="viewDisabled" @click="viewRunPlan">{{ $t('display.schema.previewRunDiagram') }}</el-button>
|
||||
<!-- notScript && -->
|
||||
<el-button v-if="!running && $route.query.lineCode!='16'&& $route.query.lineCode!='19' && project !== 'teaching'" size="small" type="warning" @click="loadRunPlan">{{ $t('display.schema.loadRunDiagram') }}</el-button>
|
||||
</el-button-group>
|
||||
<el-button v-if="!isScheduling && project !== 'bjd'" size="small" :type="faultMode ? '':'primary' " @click="changeOperateMode()">{{ faultMode?'切换到普通模式[Tab]':'切换到故障模式[Tab]' }}</el-button>
|
||||
<el-button v-if="running&&project == 'bjd'" size="small" :disabled="viewDisabled" @click="viewRunPlan">{{ $t('display.schema.previewRunDiagram') }}</el-button>
|
||||
<!-- <el-button v-if="!isLocalStation" size="small" :type="faultMode ? 'danger' : ''" @click="changeDirectiveMode()">指令模式</el-button> -->
|
||||
</template>
|
||||
</div>
|
||||
<fault-choose ref="faultChoose" :group="group" :offset="offset" />
|
||||
<run-plan-Load ref="runPlanLoad" :group="group" />
|
||||
<!-- v-if="project!== 'bjd'" -->
|
||||
<run-plan-view ref="runPlanView" :group="group" />
|
||||
<!-- 加载剧本列表弹窗 -->
|
||||
<add-quest ref="addQuest" @selectQuest="selectQuest" />
|
||||
<line-board ref="lineBoard" />
|
||||
<train-ticket ref="trainTicket" />
|
||||
<register-book ref="registerBook" />
|
||||
<!-- <run-plan-edit v-if="isScheduling && isDepot" ref="runPlanEdit" /> -->
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import SelectStation from './selectStation';
|
||||
import RunPlanLoad from './demon/runPlanLoad';
|
||||
import RunPlanView from './demon/runPlanView';
|
||||
import FaultChoose from './demon/faultChoose';
|
||||
import LineBoard from '../displayCity/lineBoard';
|
||||
import AddQuest from './demon/addQuest';
|
||||
import { OperateMode } from '@/scripts/ConstDic';
|
||||
import { getByGroupStationList } from '@/api/jmap/map';
|
||||
import { generateRunPlanInfoSync } from '@/api/jmap/mapdraft.js';
|
||||
import { getSessionStorage } from '@/utils/auth';
|
||||
import { getToken } from '@/utils/auth';
|
||||
import { getIbpInfoByStation } from '@/api/ibp';
|
||||
import { loadRunPlanData } from '@/utils/loaddata';
|
||||
import { EventBus } from '@/scripts/event-bus';
|
||||
import { timesSpeedPlayback } from '@/api/rtSimulation';
|
||||
import TrainTicket from '../trainTicket/index';
|
||||
import RegisterBook from '../registerBook/index';
|
||||
|
||||
// 右上角操作
|
||||
export default {
|
||||
name: 'MenuSchema',
|
||||
components: {
|
||||
RunPlanLoad,
|
||||
RunPlanView,
|
||||
FaultChoose,
|
||||
AddQuest,
|
||||
// RunPlanEdit,
|
||||
SelectStation,
|
||||
LineBoard,
|
||||
TrainTicket,
|
||||
RegisterBook
|
||||
},
|
||||
props: {
|
||||
offset: {
|
||||
type: Number,
|
||||
required: true
|
||||
},
|
||||
dataError: {
|
||||
type: Boolean,
|
||||
default() {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
mode: OperateMode.NORMAL,
|
||||
OperateMode: OperateMode,
|
||||
viewDisabled: true,
|
||||
swch: '02',
|
||||
isScriptCommand:false,
|
||||
faultMode: false,
|
||||
speed: 1,
|
||||
centralizedstationList: [],
|
||||
centralizedStationMap: {}
|
||||
// firstLoad: true
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
group() {
|
||||
return this.$route.query.group;
|
||||
},
|
||||
notScript() {
|
||||
return this.$route.params.mode !== 'script';
|
||||
},
|
||||
isCtc() {
|
||||
return !!this.$route.query.ctc;
|
||||
},
|
||||
isScript() {
|
||||
return this.$route.params.mode === 'script';
|
||||
},
|
||||
project() {
|
||||
return getSessionStorage('project');
|
||||
},
|
||||
isDemon() {
|
||||
return this.$route.params.mode === 'demon';
|
||||
},
|
||||
isScheduling() {
|
||||
return this.$route.query.prdType === '05';
|
||||
},
|
||||
isDepoltSim() {
|
||||
return this.$route.query.prdType === '09';
|
||||
},
|
||||
isLocalStation() {
|
||||
return this.$store.state.training.prdType === '01';
|
||||
},
|
||||
isShowSelectStation() {
|
||||
return this.$store.state.training.prdType === '01' || this.$store.state.training.prdType === '09';
|
||||
},
|
||||
running() {
|
||||
return this.$store.state.training.started;
|
||||
},
|
||||
isDepot() {
|
||||
return this.$route.query.type === 'DEPOT';
|
||||
},
|
||||
showDispatcherStation() {
|
||||
return this.$route.query.lineCode === '16' && this.$store.state.training.prdType === '02';
|
||||
},
|
||||
isContest() {
|
||||
return this.project.includes('drts') || this.$route.query.thirdDrts;
|
||||
},
|
||||
isAdmin() {
|
||||
return this.$store.state.user.roles.includes('04') || this.$store.state.user.roles.includes('05');
|
||||
},
|
||||
userId() {
|
||||
return this.$store.state.user ? this.$store.state.user.id : '';
|
||||
},
|
||||
speedList() {
|
||||
return this.isAdmin ? [
|
||||
{ value: 1, label: '1倍速' },
|
||||
{ value: 2, label: '2倍速' },
|
||||
{ value: 3, label: '3倍速' },
|
||||
{ value: 4, label: '4倍速' },
|
||||
{ value: 5, label: '5倍速' },
|
||||
{ value: 6, label: '6倍速' },
|
||||
{ value: 7, label: '7倍速' },
|
||||
{ value: 8, label: '8倍速' },
|
||||
{ value: 9, label: '9倍速' },
|
||||
{ value: 10, label: '10倍速' }
|
||||
] : [
|
||||
{ value: 1, label: '1倍速' },
|
||||
{ value: 2, label: '2倍速' },
|
||||
{ value: 3, label: '3倍速' },
|
||||
{ value: 4, label: '4倍速' },
|
||||
{ value: 5, label: '5倍速' }
|
||||
];
|
||||
},
|
||||
showRegisterBookBtn() {
|
||||
const roleList = ['STATION_SUPERVISOR', 'STATION_ASSISTANT', 'STATION_SIGNALER', 'STATION_SWITCH_MAN', 'STATION_MASTER', 'STATION_WORKER', 'DEVICE_MANAGER'];
|
||||
return this.$route.query.lineCode === '16' && roleList.includes(this.$store.state.training.userRole);
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
'$store.state.scriptRecord.bgSet':function (val) {
|
||||
this.isScriptCommand = val;
|
||||
if (!val) {
|
||||
this.swch = '01';
|
||||
}
|
||||
},
|
||||
// '$store.state.map.mapDataLoadedCount': function () {
|
||||
// this.loadRunData();
|
||||
// },
|
||||
'$store.state.training.subscribeCount': function () {
|
||||
this.loadRunData();
|
||||
},
|
||||
'$store.state.socket.simulationPlanChange': function (val) {
|
||||
// 判断是否已经加载运行图，若加载只处理运行图数据，否则，缓存数据
|
||||
if (JSON.stringify(this.$store.state.runPlan.planData) == '{}') {
|
||||
this.$store.dispatch('runPlan/setUpdateTrainRpData', val);
|
||||
} else {
|
||||
this.$store.dispatch('runPlan/updateTrainRunplan', val);
|
||||
}
|
||||
},
|
||||
'$store.state.training.triggerFaultCount': function () {
|
||||
this.setFault();
|
||||
},
|
||||
'$store.state.runPlan.loadRunPlanCount': function () {
|
||||
this.viewDisabled = false;
|
||||
if (JSON.stringify(this.$store.state.runPlan.updateTrainRpData) != '{}') {
|
||||
this.$store.dispatch('runPlan/updateTrainRunplan', this.$store.state.runPlan.updateTrainRpData);
|
||||
}
|
||||
},
|
||||
'$store.state.socket.simulationSpeed': function (val) {
|
||||
this.speed = val;
|
||||
},
|
||||
'$store.state.map.map': function (map) {
|
||||
if (map) {
|
||||
this.setCentralizedstationList(map); // 获取集中站列表
|
||||
}
|
||||
},
|
||||
'$store.state.training.simulationUserList': function(list) {
|
||||
if (list && list.length && this.$route.query.lineCode == '16' && this.isCtc && !this.$route.query.joint) {
|
||||
this.checkRoleInit(list);
|
||||
}
|
||||
},
|
||||
'$store.state.socket.simulationRoleList':function(list) {
|
||||
if (list && list.length && this.$route.query.lineCode == '16' && this.isCtc && !this.$route.query.joint) {
|
||||
this.checkRoleChange(list);
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
EventBus.$on('CheckFaultModeEvent', () => {
|
||||
if (!this.isScheduling) {
|
||||
this.changeOperateMode();
|
||||
}
|
||||
});
|
||||
EventBus.$on('showLineBoard', () => {
|
||||
this.showLineBoard();
|
||||
});
|
||||
},
|
||||
methods: {
|
||||
loadRunData() {
|
||||
this.$store.dispatch('runPlan/clear').then(() => {
|
||||
if (this.group) {
|
||||
this.viewDisabled = true;
|
||||
// 获取排序的车站列表
|
||||
getByGroupStationList(this.group).then(response => {
|
||||
this.$store.dispatch('runPlan/setStations', response.data).then(() => {
|
||||
loadRunPlanData(this.group, this.dataError);
|
||||
});
|
||||
}).catch(() => {
|
||||
this.$messageBox(this.$t('display.schema.getStationListFail'));
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
showLineBoard() {
|
||||
this.$refs.lineBoard.doShow();
|
||||
},
|
||||
changeShowMap() {
|
||||
this.$emit('changeShowMap', false);
|
||||
},
|
||||
goCtc() {
|
||||
// const routeData = this.$router.resolve({
|
||||
// path:'/displayNew/demon',
|
||||
// query:{
|
||||
// lineCode:this.$route.query.lineCode,
|
||||
// group: this.$route.query.group,
|
||||
// prdType: this.$store.state.training.prdType,
|
||||
// mapId:this.$route.query.mapId,
|
||||
// project: this.project,
|
||||
// newApi: this.$route.query.newApi,
|
||||
// ctc: true,
|
||||
// try: this.$route.query.try,
|
||||
// token:getToken(),
|
||||
// noPreLogout: true
|
||||
// }
|
||||
// });
|
||||
const routeData = this.$router.resolve({
|
||||
path:'/display/demon',
|
||||
query:{
|
||||
lineCode:this.$route.query.lineCode,
|
||||
group: this.$route.query.group,
|
||||
prdType: '01',
|
||||
mapId:this.$route.query.mapId,
|
||||
project: this.project,
|
||||
newApi: false,
|
||||
// joint: true,
|
||||
ctc: true,
|
||||
try: this.$route.query.try || 0,
|
||||
token:getToken(),
|
||||
noPreLogout: true
|
||||
}
|
||||
});
|
||||
window.open(routeData.href, '_blank');
|
||||
},
|
||||
showTrainTicket() {
|
||||
const stationSupervisorList = [];
|
||||
for (const memberId in this.$store.state.training.memberData) {
|
||||
const item = this.$store.state.training.memberData[memberId];
|
||||
if (item.type === 'STATION_SUPERVISOR') {
|
||||
const device = this.$store.getters['map/getDeviceByCode'](item.deviceCode);
|
||||
const memberData = { labelName: '值班员-' + device.name + (item.name ? `-${item.name }` : ''), id:item.id, userId:item.userId };
|
||||
stationSupervisorList.push(memberData);
|
||||
}
|
||||
}
|
||||
EventBus.$emit('trainTicketMember', stationSupervisorList);
|
||||
this.$refs.trainTicket.doShow();
|
||||
},
|
||||
showRegisterBook() {
|
||||
this.$refs.registerBook.doShow();
|
||||
},
|
||||
checkRoleInit(data) {
|
||||
const stationRoleList = ['STATION_SUPERVISOR', 'STATION_ASSISTANT', 'STATION_MASTER', 'STATION_SIGNALER',
|
||||
'STATION_PASSENGER', 'STATION_SWITCH_MAN', 'STATION_FACILITATOR', 'STATION_WORKER', 'DEVICE_MANAGER'];
|
||||
// 'TRAIN_MASTER'
|
||||
data.forEach(item => {
|
||||
if ((item.admin && item.online) && item.userId == this.userId && stationRoleList.includes(item.type)) {
|
||||
this.$store.dispatch('training/setRoleDeviceCode', item.deviceCode);
|
||||
this.deviceCode = item.deviceCode;
|
||||
this.setShowStation(item.deviceCode);
|
||||
this.$store.dispatch('training/setPrdType', '01');
|
||||
}
|
||||
});
|
||||
},
|
||||
checkRoleChange(data) {
|
||||
const stationRoleList = ['STATION_SUPERVISOR', 'STATION_ASSISTANT', 'STATION_MASTER', 'STATION_SIGNALER',
|
||||
'STATION_PASSENGER', 'STATION_SWITCH_MAN', 'STATION_FACILITATOR', 'STATION_WORKER', 'DEVICE_MANAGER'];
|
||||
// 'TRAIN_MASTER'
|
||||
data.forEach(item => {
|
||||
if ((item.messageType === 'PLAY_CHANGE' || item.messageType === 'ONLINE' ) && item.userId == this.userId && stationRoleList.includes(item.type)) {
|
||||
// this.userRole = item.type || 'AUDIENCE';
|
||||
this.$store.dispatch('training/setRoleDeviceCode', item.deviceCode);
|
||||
this.$store.dispatch('training/setUserRole', item.type);
|
||||
this.deviceCode = item.deviceCode;
|
||||
// this.setShowStation(item.deviceCode);
|
||||
this.setShowStation(item.deviceCode);
|
||||
this.$store.dispatch('training/setPrdType', '01');
|
||||
// this.setSimulationPrdType(this.centralizedStationMap[item.deviceCode]);
|
||||
// this.$nextTick(() => {
|
||||
// if (item.deviceCode && this.$store.state.training.prdType !== '09') { this.setCenter(item.deviceCode); }
|
||||
// });
|
||||
}
|
||||
});
|
||||
},
|
||||
setShowStation(stationCode) {
|
||||
const showStation = this.centralizedStationMap[stationCode];
|
||||
const list = [];
|
||||
const mapDevice = this.$store.state.map.mapDevice;
|
||||
for (const key in mapDevice) {
|
||||
list.push(mapDevice[key]);
|
||||
}
|
||||
this.$jlmap.updateShowStation(list, showStation);
|
||||
this.$nextTick(()=>{
|
||||
this.$jlmap.setCenter(showStation);
|
||||
});
|
||||
},
|
||||
setCentralizedstationList(map) {
|
||||
this.centralizedstationList = [];
|
||||
(map.stationList || []).forEach(item => {
|
||||
if (item.centralized) {
|
||||
this.centralizedstationList.push({value: item.code, name: item.name});
|
||||
this.centralizedStationMap[item.code] = item.code;
|
||||
item.chargeStationCodeList && item.chargeStationCodeList.length && item.chargeStationCodeList.forEach(ele => {
|
||||
this.centralizedStationMap[ele] = item.code;
|
||||
});
|
||||
}
|
||||
});
|
||||
// if (this.centralizedstationList.length && !this.showStation) {
|
||||
// this.showStation = this.centralizedstationList[0].value;
|
||||
// }
|
||||
},
|
||||
goRpManage() {
|
||||
const routeData = this.$router.resolve({
|
||||
path:'/bigTrainRunplanManage',
|
||||
query:{
|
||||
group: this.$route.query.group,
|
||||
mapId:this.$route.query.mapId,
|
||||
project: this.project,
|
||||
prdType: this.$route.query.prdType,
|
||||
lineCode:this.$route.query.lineCode,
|
||||
// stationCode:this.$store.state.training.roleDeviceCode,
|
||||
// token:getToken(),
|
||||
noPreLogout: true
|
||||
}
|
||||
});
|
||||
window.open(routeData.href, '_blank');
|
||||
},
|
||||
// goDispatcherStation() {
|
||||
// const routeData = this.$router.resolve({
|
||||
// // path:'/bigTrainDispatcherStation',
|
||||
// path:'/displayNew/demon',
|
||||
// query:{
|
||||
// group: this.$route.query.group,
|
||||
// mapId:this.$route.query.mapId,
|
||||
// project: this.project,
|
||||
// prdType: this.$route.query.prdType,
|
||||
// lineCode:this.$route.query.lineCode,
|
||||
// newApi: this.$route.query.newApi,
|
||||
// dispatcherStation:true,
|
||||
// // stationCode:this.$store.state.training.roleDeviceCode,
|
||||
// // token:getToken(),
|
||||
// try: this.$route.query.try,
|
||||
// token:getToken(),
|
||||
// noPreLogout: true
|
||||
// }
|
||||
// });
|
||||
// window.open(routeData.href, '_blank');
|
||||
// },
|
||||
// goDsManage() {
|
||||
// const routeData = this.$router.resolve({
|
||||
// path:'/dispatcherStationManage',
|
||||
// query:{
|
||||
// group: this.$route.query.group,
|
||||
// mapId:this.$route.query.mapId,
|
||||
// project: this.project,
|
||||
// prdType: this.$route.query.prdType,
|
||||
// lineCode:this.$route.query.lineCode,
|
||||
// // stationCode:this.$store.state.training.roleDeviceCode,
|
||||
// token:getToken(),
|
||||
// noPreLogout: true
|
||||
// }
|
||||
// });
|
||||
// window.open(routeData.href, '_blank');
|
||||
// },
|
||||
changeOperateMode() {
|
||||
this.faultMode = !this.faultMode;
|
||||
let mode = OperateMode.NORMAL;
|
||||
if (this.faultMode) {
|
||||
mode = OperateMode.FAULT;
|
||||
}
|
||||
this.$store.dispatch('training/changeOperateMode', { mode: mode });
|
||||
},
|
||||
// changeDirectiveMode() { // 调整指令模式 (暂时不使用 等项目更新 在使用)
|
||||
// this.directiveMode = !this.directiveMode;
|
||||
// let mode = OperateMode.NORMAL;
|
||||
// if (this.directiveMode) {
|
||||
// mode = OperateMode.DIRECTIVE;
|
||||
// }
|
||||
// this.$store.dispatch('training/changeOperateMode', { mode: mode });
|
||||
// },
|
||||
speedChange(val) {
|
||||
timesSpeedPlayback(this.$route.query.group, val).then(resp => {
|
||||
this.$message.success(`设置${val}倍速成功!`);
|
||||
}).catch(e => {
|
||||
this.$message.error('设置倍速失败！');
|
||||
});
|
||||
},
|
||||
setFault() {
|
||||
this.$refs.faultChoose.doShow();
|
||||
},
|
||||
loadRunPlan() {
|
||||
this.$refs.runPlanLoad.doShow();
|
||||
},
|
||||
viewRunPlan() {
|
||||
this.$refs.runPlanView.doShow();
|
||||
},
|
||||
viewRunQuest() {
|
||||
this.$refs.addQuest.doShow();
|
||||
},
|
||||
selectQuest(row, id, mapLocation, roleName) {
|
||||
this.$emit('selectQuest', {row, id, mapLocation, roleName});
|
||||
},
|
||||
runPlanEditShow() {
|
||||
generateRunPlanInfoSync(this.$route.query.mapId).then(resp => {
|
||||
const routeData = this.$router.resolve({
|
||||
path:'/plan/newTool',
|
||||
query:{
|
||||
mapId:this.$route.query.mapId,
|
||||
lineCode:this.$route.query.lineCode,
|
||||
token:getToken(),
|
||||
project: this.project,
|
||||
noPreLogout: true
|
||||
}
|
||||
});
|
||||
window.open(routeData.href, '_blank');
|
||||
});
|
||||
},
|
||||
goIbp() {
|
||||
const deviceCode = this.$refs.selectStation.showStation;
|
||||
getIbpInfoByStation(this.$route.query.mapId, deviceCode).then(resp => {
|
||||
if (resp.data) {
|
||||
const routeData = this.$router.resolve({
|
||||
path:`/ibpShow`,
|
||||
query:{
|
||||
lineCode: this.$route.query.lineCode,
|
||||
mapId: this.$route.query.mapId,
|
||||
group: this.$route.query.group,
|
||||
stationCode: deviceCode,
|
||||
loadAll: true,
|
||||
noPreLogout: true
|
||||
}
|
||||
});
|
||||
window.open(routeData.href, '_blank');
|
||||
} else {
|
||||
this.$messageBox('本车站暂无IBP盘数据！');
|
||||
}
|
||||
}).catch((error) => {
|
||||
if (error.code == '10007') {
|
||||
this.$messageBox('本车站暂无IBP盘数据！');
|
||||
} else {
|
||||
this.$message.error('获取IBP盘数据异常');
|
||||
}
|
||||
});
|
||||
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style rel="stylesheet/scss" lang="scss" scoped>
|
||||
.schema {
|
||||
z-index: 36;
|
||||
display: inline;
|
||||
position: absolute;
|
||||
right: 5px;
|
||||
}
|
||||
|
||||
/deep/ .el-button+.el-button {
|
||||
margin-left: 0px;
|
||||
}
|
||||
</style>
|
||||
@ -1,127 +0,0 @@
|
||||
<template>
|
||||
<div v-if="isShowSystemTime" class="display-card" :style="{top: top+'px', right: newRight+'px'}">
|
||||
<template v-if="pause">
|
||||
<span class="display-pause">{{ $t('display.systemTime.timePause') }}</span>
|
||||
</template>
|
||||
<template v-else>
|
||||
<system-time
|
||||
class="display-time"
|
||||
:time="time"
|
||||
/>
|
||||
<div v-if="isShowDate" style="width: 80px;height: 58px;float: right;box-shadow: 0 0 5px #eee;">
|
||||
<div class="display-date-box">{{ dateString }}</div>
|
||||
<div class="display-date-box">{{ dayString }}</div>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import SystemTime from '@/views/components/systemTime/index';
|
||||
import { timestampFormat } from '@/utils/date';
|
||||
|
||||
// 顶部时间栏显示
|
||||
export default {
|
||||
name: 'MenuSystemTime',
|
||||
components: {
|
||||
SystemTime
|
||||
},
|
||||
props: {
|
||||
offset: {
|
||||
type: Number,
|
||||
required: true
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
time: '00:0000',
|
||||
dateString: '00/00/00',
|
||||
dayString: ''
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
isShowSystemTime() {
|
||||
return this.$route.params.mode == 'demon' ||
|
||||
this.$route.params.mode == 'dp' ||
|
||||
this.$route.params.mode == 'plan' ||
|
||||
this.$route.params.mode == 'script' ||
|
||||
this.$route.params.mode == 'practice' ||
|
||||
!this.$route.params.mode;
|
||||
},
|
||||
pause() {
|
||||
return this.$store.state.scriptRecord.simulationPause;
|
||||
},
|
||||
isDisplay() {
|
||||
return this.$route.path.includes('display') || this.$route.path.includes('scriptDisplayNew');
|
||||
},
|
||||
isShowDate() { // 西安一 三号线
|
||||
return (this.$route.query.lineCode == 10 || this.$route.query.lineCode == 11) && this.isDisplay;
|
||||
},
|
||||
top() {
|
||||
if (this.isShowDate) {
|
||||
return this.$route.query.prdType === '05' ? 5 : this.offset - 10;
|
||||
} else {
|
||||
return this.$store.state.training.prdType === '09' ? this.offset + 20 : this.offset;
|
||||
}
|
||||
},
|
||||
newRight() {
|
||||
return this.isShowDate ? this.$store.state.config.width - 420 : this.$store.state.config.width / 2 - 55;
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
'$store.state.training.initTime': function (timestamp) {
|
||||
this.initDate(timestamp);
|
||||
},
|
||||
'$store.state.socket.simulationTimeSync': function (timestamp) { // 仿真时间更新
|
||||
this.initDate(timestamp)
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
const initTime = this.$store.state.training.initTime;
|
||||
if (initTime > 0) {
|
||||
this.initDate(initTime);
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
initDate(timestamp) {
|
||||
this.time = timestampFormat('HH:mmss', timestamp)
|
||||
this.dateString = timestampFormat('YYYY/MM/DD', timestamp)
|
||||
this.dayString = timestampFormat('dddd', timestamp).split('').join(' ')
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style rel="stylesheet/scss" lang="scss" scoped>
|
||||
@import "src/styles/mixin.scss";
|
||||
|
||||
.display-card {
|
||||
z-index: 9;
|
||||
display: inline;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.display-pause {
|
||||
font-size: 21px;
|
||||
font-weight: bold;
|
||||
color: yellow;
|
||||
}
|
||||
|
||||
.display-time{
|
||||
padding: 3px 5px;
|
||||
border: 1px solid rgba(255,255,255,.2);
|
||||
box-shadow: 0 2px 12px 0 rgba(255,255,255,.3);
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.display-card .el-row {
|
||||
line-height: 32px !important;
|
||||
}
|
||||
.display-date-box{
|
||||
height: 29px;
|
||||
line-height: 29px;
|
||||
background: #404040;
|
||||
color: #1DEA1E;
|
||||
text-align: center;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
</style>
|
||||
@ -1,174 +0,0 @@
|
||||
<template>
|
||||
<div class="menuTrainListOut" :class="{'xian_01' : lineCode == '11', 'active': drawer}">
|
||||
<div class="menuTrainListBtn" @click="clickBtn">列车</div>
|
||||
<div :show-close="false" class="menuTrainList_box" style="height: 100%;">
|
||||
<div v-if="lineCode=='10'||lineCode=='11'" class="menuTrainList">
|
||||
<div class="bottomTrainListInfo">下行列车详细信息</div>
|
||||
<el-table :data="bottomTrainList" height="45%" :highlight-current-row="true" @row-click="selectTrain">
|
||||
<el-table-column property="groupNumber" label="车组号" width="70" />
|
||||
<el-table-column property="tripNumber" label="车次号" width="70" />
|
||||
<el-table-column property="destinationCode" label="目的地号" width="100" />
|
||||
<el-table-column property="serviceNumber" label="表号" width="70" />
|
||||
<el-table-column property="dt" label="早晚点" width="70">
|
||||
<template slot-scope="scope">
|
||||
<div>{{ covert(scope.row.dt) }}</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<div class="topTrainListInfo">上行列车详细信息</div>
|
||||
<el-table :data="topTrainList" height="45%" :highlight-current-row="true" style="border-radius:0px 0px 0px 5px;" @row-click="selectTrain">
|
||||
<el-table-column property="groupNumber" label="车组号" width="70" />
|
||||
<el-table-column property="tripNumber" label="车次号" width="70" />
|
||||
<el-table-column property="destinationCode" label="目的地号" width="100" />
|
||||
<el-table-column property="serviceNumber" label="表号" width="70" />
|
||||
<el-table-column property="dt" label="早晚点" width="70">
|
||||
<template slot-scope="scope">
|
||||
<div>{{ covert(scope.row.dt) }}</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
<div v-else class="menuTrainList">
|
||||
<el-table :data="trainList" height="100%" :highlight-current-row="true" style="border-radius:5px 0px 0px 5px;" @row-click="selectTrain">
|
||||
<el-table-column property="groupNumber" label="车组号" width="130" />
|
||||
<el-table-column property="tripNumber" label="车次号" width="130" />
|
||||
<el-table-column property="serviceNumber" label="表号" width="130" />
|
||||
</el-table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { mapGetters } from 'vuex';
|
||||
export default {
|
||||
name: 'MenuTrainList',
|
||||
data() {
|
||||
return {
|
||||
drawer: false,
|
||||
trainList:[],
|
||||
oldDevice: null,
|
||||
topTrainList:[],
|
||||
bottomTrainList:[]
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapGetters('map', [
|
||||
'map',
|
||||
'mapConfig'
|
||||
]),
|
||||
lineCode() {
|
||||
return this.$route.query.lineCode;
|
||||
}
|
||||
},
|
||||
watch:{
|
||||
'$store.state.map.activeTrainListUpdate': function (val) {
|
||||
if (val) {
|
||||
const activeTrainList = this.$store.state.map.activeTrainList;
|
||||
if (this.lineCode == '10' || this.lineCode == '11') {
|
||||
this.topTrainList = [];
|
||||
this.bottomTrainList = [];
|
||||
activeTrainList.forEach((trainCode)=>{
|
||||
// train.serviceNumber != '' && train.serviceNumber != undefined &&
|
||||
const train = this.$store.getters['map/getDeviceByCode'](trainCode);
|
||||
let isUpDirection;
|
||||
if (this.mapConfig.upRight) {
|
||||
isUpDirection = train.right;
|
||||
} else if (!this.mapConfig.upRight) {
|
||||
isUpDirection = !train.right;
|
||||
}
|
||||
if (train && isUpDirection && train.sectionCode) {
|
||||
this.topTrainList.push(train);
|
||||
} else if (train && !isUpDirection && train.sectionCode) {
|
||||
this.bottomTrainList.push(train);
|
||||
}
|
||||
});
|
||||
} else {
|
||||
this.trainList = [];
|
||||
activeTrainList.forEach((trainCode)=>{
|
||||
const train = this.$store.getters['map/getDeviceByCode'](trainCode);
|
||||
if (train && train.sectionCode) {
|
||||
this.trainList.push(train);
|
||||
}
|
||||
});
|
||||
}
|
||||
} else {
|
||||
this.topTrainList = [];
|
||||
this.bottomTrainList = [];
|
||||
this.trainList = [];
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
},
|
||||
methods:{
|
||||
clickBtn() {
|
||||
if (this.drawer) {
|
||||
this.drawer = false;
|
||||
} else {
|
||||
this.drawer = true;
|
||||
}
|
||||
},
|
||||
selectTrain(row, column, event) {
|
||||
// 设置显示中心
|
||||
this.$jlmap.setCenter(row.code);
|
||||
},
|
||||
covert(data) {
|
||||
const absData = Math.abs(data);
|
||||
const hours = Math.floor(absData / 3600);
|
||||
let min = Math.floor((absData % 3600) / 60);
|
||||
let seconds = (absData % 3600) % 60;
|
||||
min = min > 9 ? min : '0' + min;
|
||||
seconds = seconds > 9 ? seconds : '0' + seconds;
|
||||
const time = hours + ':' + min + ':' + seconds;
|
||||
return data == 0 ? '00:00:00' : (data > 0 ? time + 'E' : time + 'L');
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style rel="stylesheet/scss" lang="scss" scoped>
|
||||
.menuTrainListOut{
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 20%;
|
||||
height: 60%;
|
||||
transform: translateX(400px);
|
||||
transition: all 0.4s;
|
||||
&.active{
|
||||
transform: translateX(0px);
|
||||
}
|
||||
}
|
||||
.menuTrainListBtn{
|
||||
background: #fff;
|
||||
text-align: center;
|
||||
border-radius: 6px 0px 0px 6px;
|
||||
position: absolute;
|
||||
top: 45%;
|
||||
z-index: 2;
|
||||
transform: translateX(-23px);
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
justify-content: center;
|
||||
padding: 7px 4px;
|
||||
width: 23px;
|
||||
}
|
||||
.menuTrainList_box{
|
||||
height: 100%;
|
||||
.menuTrainList{
|
||||
width: 400px;
|
||||
height: 100%;
|
||||
border-radius: 10px 0px 0px 10px;
|
||||
background: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
.topTrainListInfo,
|
||||
.bottomTrainListInfo{
|
||||
padding: 10px 10px;
|
||||
background: #cde2ef;
|
||||
font-size: 13px;
|
||||
border-radius: 5px 0px 0px 0px;
|
||||
}
|
||||
</style>
|
||||
@ -1,541 +0,0 @@
|
||||
<template>
|
||||
<div class="map-view" :style="{width: canvasWidth+'px',height:'100%',position:'absolute',overflow:'hidden'}">
|
||||
<div v-show="maskOpen" class="mask" :style="{'width': maskWidth}" />
|
||||
<jlmap-visual ref="jlmapVisual" />
|
||||
<div class="menudown">
|
||||
<el-button-group class="button-group-box">
|
||||
<el-button type="success" :disabled="isDisable" size="small" @click="selectBeginTime">{{ $t('display.demon.drivingByPlan') }}</el-button>
|
||||
<el-button type="danger" size="small" @click="end">{{ $t('display.demon.initialize') }}</el-button>
|
||||
<el-button type="primary" size="small" @click="back">退出</el-button>
|
||||
</el-button-group>
|
||||
</div>
|
||||
<el-button-group ref="button_group_box" class="button_group">
|
||||
<!-- {{ $t('joinTraining.runGraphPreview') }} -->
|
||||
<el-button v-if="running" size="small" @click="changeFlowData">切换客流数据</el-button>
|
||||
<!-- <el-button v-if="running" size="small" @click="viewRunPlan">运行图视图</el-button> -->
|
||||
<el-button v-if="running" size="small" @click="bigLPFStrategy">大客流策略</el-button>
|
||||
<!-- 运行图加载 -->
|
||||
<el-button size="small" @click="dispatcherWorkStation">ATS行调工作站</el-button>
|
||||
<!-- <el-button v-if="!running" size="small" type="warning" @click="loadRunPlan">{{ $t('joinTraining.runGraphLoading') }}</el-button> -->
|
||||
<el-button size="small" @click="distribute">权限分发</el-button>
|
||||
<el-button v-if="messageBoard" size="small" @click="messageBoardShow">留言板</el-button>
|
||||
<el-button size="small" @click="contectUs">联系方式</el-button>
|
||||
</el-button-group>
|
||||
<div class="trainExample">
|
||||
<div class="currentFlowDataName">{{ currentFlowDataName }}</div>
|
||||
<div class="trainExampleL">
|
||||
<div class="trainExampleName">车站 颜色图例</div>
|
||||
<div class="eachTrainExample">
|
||||
<span class="smallExample" />
|
||||
<span class="eachTrainExampleName">0 ~ 400</span>
|
||||
</div>
|
||||
<div class="eachTrainExample">
|
||||
<span class="mediumExample" />
|
||||
<span class="eachTrainExampleName">400 ~ 800</span>
|
||||
</div>
|
||||
<div class="eachTrainExample">
|
||||
<span class="bigExample" />
|
||||
<span class="eachTrainExampleName">800及以上</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="trainExampleR">
|
||||
<div class="trainExampleName">列车 颜色图例</div>
|
||||
<div class="eachTrainExample">
|
||||
<span class="smallExample" />
|
||||
<span class="eachTrainExampleName">0 ~ 400</span>
|
||||
</div>
|
||||
<div class="eachTrainExample">
|
||||
<span class="mediumExample" />
|
||||
<span class="eachTrainExampleName">400 ~ 1000</span>
|
||||
</div>
|
||||
<div class="eachTrainExample">
|
||||
<span class="bigExample" />
|
||||
<span class="eachTrainExampleName">1000及以上</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<distribute-draft ref="distribute" @QrCodeShow="QrCodeShow" />
|
||||
<qr-code ref="qrCode" />
|
||||
<menu-system-time ref="menuSystemTime" :offset="15" :group="group" />
|
||||
<contect-us ref="contectUs" />
|
||||
<run-plan-Load ref="runPlanLoad" :group="group" />
|
||||
<set-time ref="setTime" @ConfirmSelectBeginTime="start" />
|
||||
<el-dialog
|
||||
title="切换客流数据"
|
||||
:visible.sync="flowDataShow"
|
||||
top="150px"
|
||||
width="400px"
|
||||
:before-do-close="flowDataClose"
|
||||
:close-on-click-modal="false"
|
||||
:z-index="5000"
|
||||
>
|
||||
<div>
|
||||
<el-form ref="ruleForm" label-width="100px">
|
||||
<el-form-item label="客流数据:" prop="role">
|
||||
<el-select v-model="currentFlowDataId" placeholder="请选择客流数据" @change="changeData">
|
||||
<el-option
|
||||
v-for="item in flowDataList"
|
||||
:key="item.id"
|
||||
:label="item.name==currentFlowDataName?item.name+' [运行中]':item.name"
|
||||
:value="item.id"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button @click="flowDataClose">{{ $t('global.cancel') }}</el-button>
|
||||
<el-button type="primary" :disabled="isDisabled" :loading="loading" @click="confirmFlowData">{{ $t('global.confirm') }}</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import JlmapVisual from '@/views/newMap/jlmapNew/index';
|
||||
import DistributeDraft from '@/views/components/limits/distribute';
|
||||
import QrCode from '@/components/QrCode';
|
||||
import ContectUs from '@/views/newMap/displayNew/dispatherContest/contectUs';
|
||||
import RunPlanLoad from './demon/runPlanLoad';
|
||||
import SetTime from './demon/setTime';
|
||||
import { PermissionType } from '@/scripts/ConstDic';
|
||||
import { loadMapDataById } from '@/utils/loaddata';
|
||||
import { clearSimulation, getSimulationInfoNew, ranAsPlan, exitRunPlan, getPassengerFlowData, changePassengerFlowData } from '@/api/simulation';
|
||||
import { creatSubscribe, clearSubscribe, displayTopic, LPFTopic} from '@/utils/stomp';
|
||||
import MenuSystemTime from '@/views/newMap/displayNew/menuSystemTime';
|
||||
import { getToken } from '@/utils/auth';
|
||||
import { mapGetters } from 'vuex';
|
||||
import { getPostByProjectCode } from '@/api/learn';
|
||||
import { ProjectCode } from '@/scripts/ProjectConfig';
|
||||
export default {
|
||||
name:'PracticeDisplay',
|
||||
components: {
|
||||
JlmapVisual,
|
||||
MenuSystemTime,
|
||||
QrCode,
|
||||
DistributeDraft,
|
||||
ContectUs,
|
||||
SetTime,
|
||||
RunPlanLoad
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
maskOpen: false,
|
||||
flowDataShow:false,
|
||||
maskWidth: '100%',
|
||||
group:'',
|
||||
openWindow:null,
|
||||
openBigLPF:null,
|
||||
flowDataList:[],
|
||||
currentFlowDataName:'',
|
||||
currentFlowDataId:'',
|
||||
isDisabled:false,
|
||||
loading:false,
|
||||
messageBoard: false
|
||||
};
|
||||
},
|
||||
computed:{
|
||||
...mapGetters([
|
||||
'canvasWidth'
|
||||
]),
|
||||
mapId() {
|
||||
return this.$route.query.mapId;
|
||||
},
|
||||
width() {
|
||||
return this.$store.state.app.width;
|
||||
},
|
||||
height() {
|
||||
return this.$store.state.app.height;
|
||||
},
|
||||
running() {
|
||||
return this.$store.state.training.started;
|
||||
},
|
||||
isDisable() {
|
||||
return this.$store.state.training.started;
|
||||
}
|
||||
},
|
||||
watch:{
|
||||
'$store.state.map.mapViewLoadedCount':function() {
|
||||
this.$store.dispatch('map/setTrainWindowShow', false);
|
||||
// this.$jlmap.off('zoom');
|
||||
if (this.group) {
|
||||
getPassengerFlowData(this.mapId).then(res=>{
|
||||
this.flowDataList = res.data;
|
||||
const currentFlowData = res.data.find(each=>{ return each.initial; });
|
||||
if (currentFlowData) {
|
||||
this.currentFlowDataName = currentFlowData.name;
|
||||
this.currentFlowDataId = currentFlowData.id;
|
||||
}
|
||||
this.subscribe();
|
||||
});
|
||||
}
|
||||
},
|
||||
'$store.state.app.windowSizeCount': function() { // 窗口缩放
|
||||
this.setWindowSize();
|
||||
},
|
||||
'$store.state.socket.equipmentStatus': function (val) {
|
||||
if (val.length && this.$route.query.group) {
|
||||
this.statusMessage(val);
|
||||
}
|
||||
},
|
||||
'$store.state.socket.simulationStart': function(val) {
|
||||
this.$store.dispatch('training/simulationStart').then(() => {
|
||||
this.$store.dispatch('map/setShowCentralizedStationNum');
|
||||
});
|
||||
},
|
||||
'$store.state.socket.standPfiNum':function(val) {
|
||||
if (val) {
|
||||
// console.log(val, 'standPfiNum');
|
||||
const stationNumList = val;
|
||||
stationNumList.forEach(stationNum=>{
|
||||
stationNum.deviceType = 'STAND';
|
||||
stationNum.code = stationNum.standCode;
|
||||
});
|
||||
this.$store.dispatch('training/updateMapState', stationNumList);
|
||||
}
|
||||
},
|
||||
'$store.state.socket.trainPfiNum':function(val) {
|
||||
if (val) {
|
||||
// console.log(val, 'trainPfiNum');
|
||||
const trainNumList = this.$store.state.socket.trainPfiNum;
|
||||
trainNumList.forEach(stationNum=>{
|
||||
stationNum.deviceType = 'TRAIN';
|
||||
});
|
||||
this.$store.dispatch('training/updateMapState', trainNumList);
|
||||
}
|
||||
},
|
||||
'$store.state.socket.trainPfiBL':function(val) {
|
||||
if (val) {
|
||||
const trainNum = this.$store.state.socket.trainPfiBL;
|
||||
// const device = this.$store.getters['map/getDeviceByCode'](trainNum.code);
|
||||
trainNum.deviceType = 'TRAIN';
|
||||
// console.log(trainNum, device, device.num, trainNum.in, trainNum.out, 'changed');
|
||||
trainNum.num = trainNum.remain;
|
||||
// device.num + trainNum.in - trainNum.out;
|
||||
// console.log(trainNum.num, 'changeder');
|
||||
this.$store.dispatch('training/updateMapState', [trainNum]);
|
||||
}
|
||||
},
|
||||
'$store.state.socket.isFirst':function(val) {
|
||||
if (val) {
|
||||
const header = { group: this.group || '', 'X-Token': getToken() };
|
||||
creatSubscribe(`${LPFTopic}\/${this.$route.query.group}`, header);
|
||||
}
|
||||
}
|
||||
},
|
||||
beforeDestroy() {
|
||||
this.$store.dispatch('map/mapClear');
|
||||
if (this.group) {
|
||||
clearSimulation(this.group);
|
||||
this.clearSubscribe();
|
||||
this.$store.dispatch('socket/resetTrainPassagerNum');
|
||||
this.$store.dispatch('socket/setIsFirst', false);
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.group = this.$route.query.group;
|
||||
this.setWindowSize();
|
||||
this.initLoadData();
|
||||
getPostByProjectCode(ProjectCode[this.$route.query.project]).then(resp => {
|
||||
if (resp.data) {
|
||||
this.messageBoard = true;
|
||||
}
|
||||
}).catch(() => {
|
||||
this.$message.error('获取留言板信息失败');
|
||||
});
|
||||
},
|
||||
methods:{
|
||||
async initLoadData() { // 加载地图数据
|
||||
if (this.group) {
|
||||
this.loadSimulationInfo();
|
||||
loadMapDataById(this.mapId, 'simulation');
|
||||
}
|
||||
},
|
||||
// 缩放设置
|
||||
setWindowSize() {
|
||||
const width = this.width;
|
||||
const height = this.height;
|
||||
this.$store.dispatch('config/resize', { width, height });
|
||||
},
|
||||
async back() {
|
||||
// this.isGoback = true;
|
||||
clearSimulation(this.group).then(res=>{
|
||||
this.$store.dispatch('training/over').then(() => {
|
||||
this.$store.dispatch('LogOut').then(() => {
|
||||
// this.$store.dispatch('training/reset');
|
||||
// this.$store.dispatch('map/mapClear');
|
||||
location.reload();
|
||||
});
|
||||
});
|
||||
});
|
||||
},
|
||||
async statusMessage(list) {
|
||||
await this.$store.dispatch('training/updateMapState', list);
|
||||
await this.$store.dispatch('socket/setEquipmentStatus');
|
||||
},
|
||||
async subscribe() {
|
||||
this.clearSubscribe();
|
||||
const header = { group: this.group || '', 'X-Token': getToken() };
|
||||
creatSubscribe(`${displayTopic}\/${this.$route.query.group}`, header);
|
||||
// await this.$store.dispatch('training/setHasSubscribed');
|
||||
},
|
||||
clearSubscribe() {
|
||||
clearSubscribe(`${LPFTopic}\/${this.group}`);
|
||||
clearSubscribe(`${displayTopic}\/${this.group}`);
|
||||
},
|
||||
async loadSimulationInfo() {
|
||||
const resp = await getSimulationInfoNew(this.group);
|
||||
if (resp && resp.code == 200 && resp.data) {
|
||||
if (!resp.data.dataError) {
|
||||
this.$store.dispatch('scriptRecord/updateSimulationPause', resp.data.pause); // 是否暂停判断
|
||||
this.$store.dispatch('training/setInitTime', resp.data.systemTime);
|
||||
// this.$store.dispatch('training/countTime');
|
||||
this.$store.dispatch('runPlan/setRunPlanInfo', resp.data.runPlan);
|
||||
this.planRunning = resp.data.planRunning;
|
||||
if (resp.data.planRunning) {
|
||||
this.$store.commit('training/start');
|
||||
}
|
||||
} else {
|
||||
this.$messageBox('此地图数据正在维护中,无法运行！');
|
||||
}
|
||||
this.dataError = resp.data.dataError;
|
||||
}
|
||||
},
|
||||
distribute() {
|
||||
if (this.$refs) {
|
||||
this.$refs.distribute.doShow({PermissionType:PermissionType.SIMULATION, mapId: this.$route.query.mapId, prdType: this.$route.query.prdType});
|
||||
}
|
||||
},
|
||||
QrCodeShow(data) {
|
||||
if (this.$refs && data) {
|
||||
this.$refs.qrCode.doShow(data);
|
||||
}
|
||||
},
|
||||
flowDataClose() {
|
||||
this.flowDataShow = false;
|
||||
},
|
||||
confirmFlowData() {
|
||||
if (this.currentFlowDataId) {
|
||||
this.loading = true;
|
||||
changePassengerFlowData(this.group, this.currentFlowDataId).then(res=>{
|
||||
this.$store.dispatch('socket/resetTrainPassagerNum');
|
||||
// this.$store.dispatch('map/mapClear');
|
||||
this.flowDataShow = false;
|
||||
const currentFlowData = this.flowDataList.find(each=>{ return each.id == this.currentFlowDataId; });
|
||||
if (currentFlowData) { this.currentFlowDataName = currentFlowData.name; }
|
||||
this.loading = false;
|
||||
}).catch(error=>{
|
||||
this.loading = false;
|
||||
this.$messageBox('切换客流数据失败');
|
||||
console.log(error.message);
|
||||
});
|
||||
} else {
|
||||
this.$messageBox('当前的客流数据不存在');
|
||||
}
|
||||
},
|
||||
messageBoardShow() {
|
||||
// this.$refs.messageBoard.doShow();
|
||||
const routeData = this.$router.resolve({
|
||||
path:'/messageBoard',
|
||||
query:{
|
||||
project: this.$route.query.project,
|
||||
noPreLogout: true
|
||||
}
|
||||
});
|
||||
window.open(routeData.href, '_blank');
|
||||
},
|
||||
contectUs() {
|
||||
this.$refs.contectUs.doShow();
|
||||
},
|
||||
viewRunPlan() {
|
||||
const routeData = this.$router.resolve({
|
||||
path:'/planSchedule/window',
|
||||
query:{
|
||||
mapId:this.$route.query.mapId,
|
||||
group:this.$route.query.group,
|
||||
lineCode: this.$route.query.lineCode,
|
||||
project: this.$route.query.project,
|
||||
noPreLogout: true,
|
||||
initTime: this.$store.state.training.initTime
|
||||
}
|
||||
});
|
||||
window.open(routeData.href, '_blank');
|
||||
},
|
||||
dispatcherWorkStation() {
|
||||
if (this.openWindow) {
|
||||
this.openWindow.close();
|
||||
}
|
||||
const routeData = this.$router.resolve({
|
||||
path:'/display/demon',
|
||||
query:{
|
||||
mapId:this.$route.query.mapId,
|
||||
group:this.$route.query.group,
|
||||
prdType: this.$route.query.prdType,
|
||||
lineCode: this.$route.query.lineCode,
|
||||
project: this.$route.query.project,
|
||||
noPreLogout: true,
|
||||
goodsId:'',
|
||||
try:'0'
|
||||
}
|
||||
});
|
||||
this.openWindow = window.open(routeData.href);
|
||||
},
|
||||
/** 大客流策略 */
|
||||
bigLPFStrategy() {
|
||||
if (this.openBigLPF) {
|
||||
this.openBigLPF.close();
|
||||
}
|
||||
const routeData = this.$router.resolve({
|
||||
path:'/bigLPFStrategy',
|
||||
query:{
|
||||
mapId:this.$route.query.mapId,
|
||||
group:this.$route.query.group,
|
||||
project: this.$route.query.project,
|
||||
noPreLogout: true
|
||||
}
|
||||
});
|
||||
this.openBigLPF = window.open(routeData.href);
|
||||
},
|
||||
loadRunPlan() {
|
||||
this.$refs.runPlanLoad.doShow();
|
||||
},
|
||||
selectBeginTime() {
|
||||
this.$refs.setTime.doShow();
|
||||
},
|
||||
changeFlowData() {
|
||||
this.flowDataShow = true;
|
||||
this.isDisabled = true;
|
||||
const currentFlowData = this.flowDataList.find(each=>{ return each.name == this.currentFlowDataName; });
|
||||
if (currentFlowData) { this.currentFlowDataId = currentFlowData.id; }
|
||||
},
|
||||
changeData(id) {
|
||||
const currentFlowData = this.flowDataList.find(each=>{ return each.id == id; });
|
||||
if (currentFlowData && currentFlowData.name == this.currentFlowDataName) {
|
||||
this.isDisabled = true;
|
||||
} else {
|
||||
this.isDisabled = false;
|
||||
}
|
||||
},
|
||||
end() {
|
||||
exitRunPlan(this.group).then(() => {
|
||||
this.$store.dispatch('training/over').then(() => {
|
||||
this.$store.dispatch('training/setMapDefaultState').then(() => {
|
||||
this.$store.dispatch('map/clearJlmapTrainView');
|
||||
this.$store.dispatch('map/resetActiveTrainList', false);
|
||||
this.$store.dispatch('map/setTrainWindowShow', false);
|
||||
});
|
||||
});
|
||||
}).catch(() => {
|
||||
this.$messageBox(this.$t('display.demon.endSimulationFail'));
|
||||
});
|
||||
},
|
||||
start(model) { // 开始仿真
|
||||
const data = {
|
||||
time: model.initTime
|
||||
};
|
||||
if (this.$route.query.prdType === '04') {
|
||||
data.loadNumber = model.loadNum;
|
||||
}
|
||||
ranAsPlan(data, this.group).then(res => {
|
||||
// this.$store.dispatch('training/setInitTime', model.initTime);
|
||||
this.$store.dispatch('training/setInitTime', model.timestamp);
|
||||
}).catch(error => {
|
||||
let message = '';
|
||||
switch (error.code) {
|
||||
case '5001':
|
||||
message = this.$t('error.mapDataError');
|
||||
break;
|
||||
case '5002':
|
||||
message = this.$t('error.runningChartDataError');
|
||||
break;
|
||||
case '5003':
|
||||
message = this.$t('error.runningChartIsNotLoaded');
|
||||
break;
|
||||
case '5004':
|
||||
message = this.$t('error.runningDataError');
|
||||
break;
|
||||
case '5000':
|
||||
message = this.$t('error.systemError');
|
||||
break;
|
||||
case '4000':
|
||||
message = this.$t('error.simulationDoesNotExist');
|
||||
break;
|
||||
case '4001':
|
||||
message = this.$t('error.simulationOperationIsNotDefined');
|
||||
break;
|
||||
case '4002':
|
||||
message = this.$t('error.simulationOperationProcessingMethodNotFound');
|
||||
break;
|
||||
case '4003':
|
||||
message = this.$t('error.simulationOperationFailed');
|
||||
break;
|
||||
case '4004':
|
||||
message = this.$t('error.operationConflict');
|
||||
break;
|
||||
default:
|
||||
message = '按计划行车异常,请退出重试!';
|
||||
// this.$messageBox('按计划行车异常,请退出重试!');
|
||||
break;
|
||||
}
|
||||
this.$messageBox(message + '，' + this.$t('error.startSimulationFailed'));
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.display-draft {
|
||||
position: absolute;
|
||||
float: right;
|
||||
right: 5px;
|
||||
top: 5px;
|
||||
}
|
||||
.currentFlowDataName{
|
||||
padding-bottom: 30px;
|
||||
padding-left: 5px;
|
||||
padding-top: 5px;
|
||||
font-size: 18px;
|
||||
}
|
||||
.trainExample{
|
||||
position: absolute;
|
||||
width: 360px;
|
||||
padding: 10px;
|
||||
left: 20px;
|
||||
bottom: 40px;
|
||||
color: #fff;
|
||||
border: 1px #fff solid;
|
||||
border-radius: 5px;
|
||||
background: #000;
|
||||
}
|
||||
.trainExampleName{margin-bottom: 10px;}
|
||||
.eachTrainExample{margin-top: 5px;}
|
||||
.smallExample,.mediumExample,.bigExample{
|
||||
width: 50px;
|
||||
height: 20px;
|
||||
display: inline-block;
|
||||
}
|
||||
.eachTrainExampleName{
|
||||
vertical-align: top;
|
||||
line-height: 23px;
|
||||
margin-left: 8px;
|
||||
}
|
||||
.smallExample{background: #29a909;}
|
||||
.mediumExample{background: #ffa500;}
|
||||
.bigExample{background: #F00;}
|
||||
.trainExampleL{
|
||||
float: left;
|
||||
display: inline-block;
|
||||
margin-right: 35px;
|
||||
margin-left: 10px;
|
||||
}
|
||||
.menudown{
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
bottom: 15px;
|
||||
}
|
||||
.trainExampleR{display: inline-block;}
|
||||
.button_group{
|
||||
position: absolute;
|
||||
left: 10px;
|
||||
top: 15px;
|
||||
}
|
||||
</style>
|
||||
File diff suppressed because it is too large
Load Diff
@ -1,132 +0,0 @@
|
||||
<template>
|
||||
<div v-if="scriptTipMessage!=''" class="scriptTipMessage" :style="{top:offset + 55 +'px'}">{{ scriptTipMessage }}</div>
|
||||
</template>
|
||||
<script>
|
||||
import {covertOperate} from './covertOperation.js';
|
||||
import LangStorage from '@/utils/lang';
|
||||
|
||||
export default {
|
||||
name:'ScriptTip',
|
||||
props: {
|
||||
offset: {
|
||||
type: Number,
|
||||
required: true
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
scriptTipMessage:''
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
memberData() {
|
||||
return this.$store.state.training.memberData;
|
||||
}
|
||||
},
|
||||
watch:{
|
||||
// 剧本提示
|
||||
'$store.state.socket.simulationScriptTip':function(val, old) {
|
||||
if (val && this.$store.state.training.scriptOperationType === 'teach') {
|
||||
if (val.type == 'Accept_Conversation_Invitation') {
|
||||
this.scriptTipMessage = '请接受会话邀请';
|
||||
} else if (val.type == 'Conversation') {
|
||||
this.scriptTipMessage = '请说：' + val.content.replace(/%s/g, '[当前时间]');
|
||||
} else if (val.type == 'Operation') {
|
||||
this.scriptTipMessage = covertOperate(val.operationType, val.operationParamMap);
|
||||
// this.scriptTipMessage = '请找到' + deviceName + '，执行【' + operateName.label + '】操作';
|
||||
} else if (val.type == 'Exit_Conversation') {
|
||||
this.scriptTipMessage = '请结束当前会话';
|
||||
} else if (val.type == 'Start_Conversation' ) {
|
||||
const inviteMember = [];
|
||||
this.$emit('allowCreatCoversition');
|
||||
if (val.communicationObject) {
|
||||
if (val.communicationObject == 'ALL_STATION') {
|
||||
inviteMember.push('所有车站');
|
||||
} else if (val.communicationObject == 'ALL_TRAIN') {
|
||||
inviteMember.push('所有司机');
|
||||
}
|
||||
} else {
|
||||
val.conversationMemberIds.forEach(id=>{
|
||||
if (val.memberId != id) {
|
||||
inviteMember.push((this.memberData[id] || {labelName: ''}).labelName);
|
||||
}
|
||||
});
|
||||
}
|
||||
this.scriptTipMessage = '请创建会话,选择' + inviteMember.toString();
|
||||
} else if (val.type == 'Command') {
|
||||
const targetName = this.memberData[val.commandInitiateVO.targetMemberId];
|
||||
const CommandList = {
|
||||
Drive_Ahead:'确认运行至前方站',
|
||||
Route_Block_Drive:'进路闭塞法行车',
|
||||
Switch_Hook_Lock: '道岔钩锁',
|
||||
Drive_Through_The_Red_Light:'越红灯行驶',
|
||||
Drive_Through_The_Guide_Signal:'越引导信号行驶',
|
||||
Open_Or_Close_Door:'开关门',
|
||||
Set_Speed_Limit:'设置限速',
|
||||
Turn_Direction: '换端',
|
||||
Drive_To: '驾驶至',
|
||||
Apply_URM_Mode: '转URM模式',
|
||||
Apply_RM_Mode: '转RM模式',
|
||||
Apply_CM_Mode: '转CM模式',
|
||||
Apply_AM_Mode: '转AM模式'
|
||||
};
|
||||
this.scriptTipMessage = '请对【' + targetName.labelName + '】下达【' + CommandList[val.commandInitiateVO.commandType] + '】指令';
|
||||
} else if (val.type == 'Drive') {
|
||||
if (val.targetSectionCode) {
|
||||
const section = this.$store.getters['map/getDeviceByCode'](val.targetSectionCode);
|
||||
if (section && section.name) {
|
||||
this.scriptTipMessage = '请把车开到区段' + section.name;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
'$store.state.socket.simulationScriptTipFinish':function(val, old) {
|
||||
if (val && this.$store.state.training.scriptOperationType != 'test') {
|
||||
// 剧本某一步骤完成消息推送
|
||||
this.scriptTipMessage = '';
|
||||
this.tipInfo({ message: LangStorage.getLang() == 'en' ? "Correct operation! That's great!" : '操作正确！真棒！', color: 'green' });
|
||||
}
|
||||
},
|
||||
'$store.state.socket.simulationScriptTipError': function(val, old) {
|
||||
if (val && this.$store.state.training.scriptOperationType != 'test') {
|
||||
this.tipInfo({ message: LangStorage.getLang() == 'en' ? "Correct operation! That's great!" : '操作错误！', color: 'red' });
|
||||
}
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
resetScriptTip() {
|
||||
this.scriptTipMessage = '';
|
||||
},
|
||||
tipInfo(opt) {
|
||||
if (opt && opt.hasOwnProperty('color') && opt.hasOwnProperty('message')) {
|
||||
const h = this.$createElement;
|
||||
this.$notify({
|
||||
title: this.$t('global.tips'),
|
||||
duration: 3000,
|
||||
offset: 100,
|
||||
message: h('i', { style: 'color:' + opt.color }, opt.message)
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.scriptTipMessage{
|
||||
position: absolute;
|
||||
width: 400px;
|
||||
padding: 15px 15px 20px 15px;
|
||||
background: rgba(255,255,255,0.97);
|
||||
top: 100px;
|
||||
left: 50%;
|
||||
border-radius: 8px;
|
||||
-webkit-transform: translateX(-50%);
|
||||
transform: translateX(-50%);
|
||||
color: #000;
|
||||
line-height: 180%;
|
||||
// z-index: 1501;
|
||||
z-index: 15;
|
||||
font-size: 14px;
|
||||
}
|
||||
</style>
|
||||
@ -1,68 +0,0 @@
|
||||
<template>
|
||||
<el-dialog
|
||||
v-dialogDrag
|
||||
:title="$t('display.script.roleSelect')"
|
||||
:visible.sync="roleShow"
|
||||
top="50px"
|
||||
width="350px"
|
||||
:before-do-close="roleDoClose"
|
||||
:close-on-click-modal="false"
|
||||
:z-index="5000"
|
||||
>
|
||||
<div>
|
||||
<el-form ref="ruleForm" :model="form" label-width="50px">
|
||||
<el-form-item :label="$t('display.script.role')" prop="role">
|
||||
<el-select v-model="form.type" :placeholder="$t('display.script.pleaseSelect')">
|
||||
<el-option
|
||||
v-for="item in memberList"
|
||||
:key="item.id"
|
||||
:label="item.label"
|
||||
:value="item.id"
|
||||
:disabled="item.disabled"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button @click="roleDoClose">{{ $t('global.cancel') }}</el-button>
|
||||
<el-button type="primary" @click="confirm">{{ $t('global.confirm') }}</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
name:'SelectRole',
|
||||
props:{
|
||||
memberList:{
|
||||
type: Array,
|
||||
default() {
|
||||
return [];
|
||||
}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
roleShow:false,
|
||||
form: {
|
||||
type: ''
|
||||
}
|
||||
};
|
||||
},
|
||||
methods:{
|
||||
roleDoClose() {
|
||||
this.$refs['ruleForm'].resetFields();
|
||||
this.roleShow = false;
|
||||
},
|
||||
doShow() {
|
||||
this.roleShow = true;
|
||||
},
|
||||
confirm() {
|
||||
const role = this.memberList.find(elem=>{ return elem.id == this.form.type; });
|
||||
this.$emit('selectRole', role);
|
||||
this.roleDoClose();
|
||||
}
|
||||
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@ -1,413 +0,0 @@
|
||||
<template>
|
||||
<div class="main" :style="{width: canvasWidth+'px'}">
|
||||
<div v-show="panelShow" :panelShow="panelShow">
|
||||
<transition name="el-zoom-in-bottom">
|
||||
<map-system-draft v-show="userRole != 'DISPATCHER'" ref="mapCanvas" @back="back" />
|
||||
</transition>
|
||||
<script-button-group
|
||||
ref="scriptButtonGroup"
|
||||
:offset="offset"
|
||||
:text-status-height="textStatusHeight"
|
||||
:group="group"
|
||||
:user-role.sync="userRole"
|
||||
@viewScriptRoles="viewScriptRoles"
|
||||
@viewRunPlan="viewRunPlan"
|
||||
@loadRunPlan="loadRunPlan"
|
||||
@setFault="setFault"
|
||||
@setMemberData="setMemberData"
|
||||
@setMemberList="setMemberList"
|
||||
@clearAllData="clearAllData"
|
||||
@setTreeData="setTreeData"
|
||||
@changeScriptMode="changeScriptMode"
|
||||
@setMapLocation="setMapLocation"
|
||||
@changeShowMap="changeShowMap"
|
||||
@quitQuest="quitQuest"
|
||||
/>
|
||||
<div v-if="lineCode === '16'" v-show="userRole === 'DISPATCHER' && !showMap">
|
||||
<dispatcher-station ref="dispatcherStation" @changeShowMap="changeShowMap" />
|
||||
</div>
|
||||
<script-preview-chat ref="chatbox" :group="group" :user-role="userRole" :offset="offset" />
|
||||
<menu-system-time ref="menuSystemTime" :offset="offset" :group="group" />
|
||||
</div>
|
||||
<select-role ref="selectRole" :member-list="memberList" @selectRole="selectRole" />
|
||||
<run-plan-Load ref="runPlanLoad" :group="group" />
|
||||
<run-plan-view ref="runPlanView" :group="group" />
|
||||
<fault-choose ref="faultChoose" :group="group" :offset="offset" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// 草稿预备预览
|
||||
|
||||
import { getToken } from '@/utils/auth';
|
||||
|
||||
import RunPlanLoad from '@/views/newMap/displayNew/demon/runPlanLoad';
|
||||
import RunPlanView from '@/views/newMap/displayNew/demon/runPlanView';
|
||||
import SelectRole from '../component/selectRole';
|
||||
import ScriptPreviewChat from './scriptPreviewChat.vue';
|
||||
import MapSystemDraft from '@/views/newMap/mapsystemNew/index';
|
||||
import ScriptButtonGroup from './scriptButtonGroup';
|
||||
import FaultChoose from '@/views/newMap/displayNew/demon/faultChoose';
|
||||
import MenuSystemTime from '@/views/newMap/displayNew/menuSystemTime';
|
||||
|
||||
import { mapGetters } from 'vuex';
|
||||
import { loadDraftScriptNew } from '@/api/designPlatform';
|
||||
import Vue from 'vue';
|
||||
import { ScriptMode } from '@/scripts/ConstDic';
|
||||
import ConstConfig from '@/scripts/ConstConfig';
|
||||
// import DispatcherStation from '@/views/newMap/jointTrainingNew/dispatcherStation.vue';
|
||||
|
||||
export default {
|
||||
name: 'DisplayDraft',
|
||||
components: {
|
||||
RunPlanLoad,
|
||||
RunPlanView,
|
||||
ScriptPreviewChat,
|
||||
MapSystemDraft,
|
||||
FaultChoose,
|
||||
MenuSystemTime,
|
||||
SelectRole,
|
||||
DispatcherStation,
|
||||
ScriptButtonGroup
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
trainingObj: {},
|
||||
timeDemonNum: 0,
|
||||
offset: 15,
|
||||
textStatusHeight: 0,
|
||||
panelShow: true,
|
||||
memberData:[],
|
||||
mapLocation:{},
|
||||
showStation: '',
|
||||
group: '',
|
||||
lineCode: '',
|
||||
prdTypeMap: {
|
||||
'01': '01', // 现地 => 现地
|
||||
'02': '02', // 行调 => 行调
|
||||
'04': '02', // 司机 => 行调
|
||||
'05': '' // 派班 => null
|
||||
},
|
||||
userRole:'',
|
||||
showMap: false,
|
||||
isDrive: this.prdType == '04',
|
||||
treeData:[],
|
||||
memberList:[],
|
||||
centralizedstationList: [],
|
||||
centralizedStationMap: {},
|
||||
scriptMode: ScriptMode.TEACH
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapGetters([
|
||||
'canvasWidth',
|
||||
'canvasHeight'
|
||||
]),
|
||||
...mapGetters('map', [
|
||||
'map',
|
||||
'stationList'
|
||||
]),
|
||||
...mapGetters('config', [
|
||||
'canvasId'
|
||||
]),
|
||||
mapId() {
|
||||
return this.$route.query.mapId;
|
||||
},
|
||||
prdType() {
|
||||
return this.$store.state.training.prdType;
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
'$store.state.config.menuBarLoadedCount': function (val) {
|
||||
this.setPosition();
|
||||
},
|
||||
'$store.state.map.mapViewLoadedCount': function (val) {
|
||||
this.switchStationMode(this.showStation);
|
||||
},
|
||||
'$store.state.training.centerStationCode': function(code) {
|
||||
if (code) {
|
||||
this.showStation = code;
|
||||
}
|
||||
},
|
||||
'$store.state.map.map': function (map) {
|
||||
if (map) {
|
||||
this.setCentralizedstationList(map); // 获取集中站列表
|
||||
}
|
||||
},
|
||||
'$store.state.training.prdType':function(val) {
|
||||
this.setPosition();
|
||||
// this.setMode();
|
||||
}
|
||||
},
|
||||
beforeDestroy() {
|
||||
this.$store.dispatch('training/setRoles', '');
|
||||
this.$store.dispatch('training/setPrdType', '');
|
||||
this.clearAllData();
|
||||
},
|
||||
created() {
|
||||
this.group = this.$route.query.group || '';
|
||||
this.lineCode = this.$route.query.lineCode;
|
||||
},
|
||||
methods: {
|
||||
changeShowMap(flag) {
|
||||
this.showMap = flag;
|
||||
},
|
||||
back() {
|
||||
this.$refs.scriptButtonGroup.back();
|
||||
},
|
||||
changeScriptMode(scriptMode) {
|
||||
this.scriptMode = scriptMode;
|
||||
},
|
||||
async selectRole(role) {
|
||||
try {
|
||||
const res = await loadDraftScriptNew(role.id, this.group, this.scriptMode);
|
||||
if (res && res.code == 200) {
|
||||
// if (this.querymapLocation) {
|
||||
const newMapLocation = {'offsetX': this.mapLocation.x, 'offsetY': this.mapLocation.y, 'scaleRate': this.mapLocation.scale};
|
||||
Vue.prototype.$jlmap.setOptions(newMapLocation);
|
||||
// }
|
||||
}
|
||||
this.$store.dispatch('scriptRecord/updateAudioPlay', false);
|
||||
this.$store.dispatch('scriptRecord/updateBgSet', true);
|
||||
this.$refs.scriptButtonGroup.setIsscriptRun(true);
|
||||
if (role.type) {
|
||||
(this.$store.state.training.memberData[role.id] || {}).userId = this.$store.state.user.id;
|
||||
(this.$store.state.training.memberData[role.id] || {}).disabled = true;
|
||||
const typeList = ConstConfig.ConstSelect.roleTypeNew;
|
||||
typeList.forEach(type=>{
|
||||
if (role.type == type.label) {
|
||||
this.userRole = type.value;
|
||||
}
|
||||
});
|
||||
let prdType;
|
||||
let type;
|
||||
if (role.type == '行值') {
|
||||
prdType = '01';
|
||||
type = 'STATION_SUPERVISOR';
|
||||
this.$store.dispatch('training/setRoles', 'STATION_SUPERVISOR');
|
||||
this.$store.dispatch('training/setRoleDeviceCode', role.deviceCode);
|
||||
} else if (role.type == '行调') {
|
||||
prdType = '02';
|
||||
type = 'DISPATCHER';
|
||||
this.$store.dispatch('training/setRoles', 'DISPATCHER');
|
||||
} else if (role.type == '司机') {
|
||||
prdType = '04';
|
||||
type = 'DRIVER';
|
||||
this.$store.dispatch('training/setRoles', 'DRIVER');
|
||||
} else if (role.type == '通号') {
|
||||
prdType = '';
|
||||
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
|
||||
}
|
||||
});
|
||||
window.open(routeData.href);
|
||||
} else if (role.type == '车辆段/停车场调度') {
|
||||
prdType = '05';
|
||||
type = 'DEPOT_DISPATCHER';
|
||||
this.$store.dispatch('training/setRoles', 'DEPOT_DISPATCHER');
|
||||
} else if (role.type == '上级部门') {
|
||||
prdType = '';
|
||||
type = 'PARENT_DEPARTMENT';
|
||||
this.$store.dispatch('training/setRoles', 'PARENT_DEPARTMENT');
|
||||
} else if (role.type == '电力调度') {
|
||||
prdType = '';
|
||||
type = 'ELECTRIC_DISPATCHER';
|
||||
this.$store.dispatch('training/setRoles', 'ELECTRIC_DISPATCHER');
|
||||
} else if (role.type == '车辆段/停车场信号楼') {
|
||||
prdType = '';
|
||||
type = 'SIGNAL_BUILDING';
|
||||
this.$store.dispatch('training/setRoles', 'SIGNAL_BUILDING');
|
||||
|
||||
} else if (role.type == '车站助理') {
|
||||
prdType = '';
|
||||
type = 'STATION_ASSISTANT';
|
||||
this.$store.dispatch('training/setRoles', 'STATION_ASSISTANT');
|
||||
} else if (role.type == '车站站长') {
|
||||
prdType = '';
|
||||
type = 'STATION_MASTER';
|
||||
this.$store.dispatch('training/setRoles', 'STATION_MASTER');
|
||||
} else if (role.type == '车站信号员') {
|
||||
prdType = '01';
|
||||
type = 'STATION_SIGNALER';
|
||||
this.$store.dispatch('training/setRoles', 'STATION_SIGNALER');
|
||||
} else if (role.type == '车站客运员') {
|
||||
prdType = '';
|
||||
type = 'STATION_PASSENGER';
|
||||
this.$store.dispatch('training/setRoles', 'STATION_PASSENGER');
|
||||
} else if (role.type == '车站扳道员') {
|
||||
prdType = '01';
|
||||
type = 'STATION_SWITCH_MAN';
|
||||
this.$store.dispatch('training/setRoles', 'STATION_SWITCH_MAN');
|
||||
} else if (role.type == '车站引导员') {
|
||||
prdType = '';
|
||||
type = 'STATION_FACILITATOR';
|
||||
this.$store.dispatch('training/setRoles', 'STATION_FACILITATOR');
|
||||
} else if (role.type == '车站工务工') {
|
||||
prdType = '';
|
||||
type = 'STATION_WORKER';
|
||||
this.$store.dispatch('training/setRoles', 'STATION_WORKER');
|
||||
} else if (role.type == '设备管理员') {
|
||||
prdType = '';
|
||||
type = 'DEVICE_MANAGER';
|
||||
this.$store.dispatch('training/setRoles', 'DEVICE_MANAGER');
|
||||
} else if (role.type == '车务段段长') {
|
||||
prdType = '';
|
||||
type = 'TRAIN_MASTER';
|
||||
this.$store.dispatch('training/setRoles', 'TRAIN_MASTER');
|
||||
} else {
|
||||
prdType = '';
|
||||
}
|
||||
this.$store.dispatch('training/setPrdType', prdType);
|
||||
this.$store.dispatch('scriptRecord/updateRole', type + ':' + role.id);
|
||||
|
||||
if (role.type == '行值' || role.type == '车站信号员' || role.type == '车站扳道员') {
|
||||
this.setShowStation(role.deviceCode);
|
||||
}
|
||||
this.memberData.map(member=>{
|
||||
if (member.id == role.id) {
|
||||
member.userId = this.$store.state.user.id;
|
||||
member.userName = this.$store.state.user.nickname;
|
||||
member.disabled = true;
|
||||
} else {
|
||||
member.userId = '';
|
||||
member.userName = '';
|
||||
member.disabled = false;
|
||||
}
|
||||
const userName = member.userName ? '-' + member.userName : '';
|
||||
const name = member.name == undefined ? '' : '-' + member.name;
|
||||
member.label = member.type + member.deviceName + name + userName;
|
||||
});
|
||||
|
||||
} else {
|
||||
this.userRole = 'AUDIENCE';
|
||||
this.$store.dispatch('training/setRoles', 'AUDIENCE');
|
||||
this.memberData.map(member=>{
|
||||
if (member.userId) {
|
||||
member.userId = '';
|
||||
member.userName = '';
|
||||
member.disabled = false;
|
||||
const userName = member.userName ? '-' + member.userName : '';
|
||||
const name = member.name == undefined ? '' : '-' + member.name;
|
||||
member.label = member.type + member.deviceName + name + userName;
|
||||
}
|
||||
});
|
||||
this.switchMode('');
|
||||
}
|
||||
} catch (error) {
|
||||
this.$messageBox(error.message);
|
||||
}
|
||||
},
|
||||
setPosition() {
|
||||
this.$nextTick(() => {
|
||||
const menuBar = document.getElementById('menuBar');
|
||||
const menuTool = document.getElementById('menuTool');
|
||||
this.offset = 15 + (menuBar ? menuBar.offsetHeight || 0 : 0) + (menuTool ? menuTool.offsetHeight || 0 : 0);
|
||||
const textStatus = document.getElementById('textStatus');
|
||||
if (textStatus) {
|
||||
this.textStatusHeight = textStatus.offsetHeight || 0;
|
||||
textStatus.style.top = this.offset - 15 + 'px';
|
||||
}
|
||||
});
|
||||
},
|
||||
setMapLocation(mapLocation) {
|
||||
this.mapLocation = mapLocation;
|
||||
},
|
||||
switchMode(prdType) {
|
||||
this.$store.dispatch('training/setPrdType', prdType);
|
||||
},
|
||||
viewScriptRoles() {
|
||||
this.$refs.selectRole.doShow();
|
||||
},
|
||||
viewRunPlan() {
|
||||
this.$refs.runPlanView.doShow();
|
||||
},
|
||||
loadRunPlan() {
|
||||
this.$refs.runPlanLoad.doShow();
|
||||
},
|
||||
setFault() {
|
||||
this.$refs.faultChoose.doShow();
|
||||
},
|
||||
setMemberData(lastMemberList) {
|
||||
this.memberData = lastMemberList;
|
||||
},
|
||||
setMemberList(memberList) {
|
||||
this.memberList = memberList;
|
||||
},
|
||||
setTreeData(treeData) {
|
||||
this.treeData = treeData;
|
||||
},
|
||||
clearAllData() {
|
||||
this.$refs.chatbox.clearAllData();
|
||||
},
|
||||
switchStationMode(val) {
|
||||
if (val == null && this.stationListMode.length > 0) {
|
||||
this.showStation = this.stationListMode[0].value;
|
||||
} else {
|
||||
this.showStation = val;
|
||||
}
|
||||
this.$store.dispatch('map/setShowCentralizedStationCode', this.showStation);
|
||||
this.$store.dispatch('map/setShowCentralizedStationNum');
|
||||
},
|
||||
quitQuest() {
|
||||
this.userRole = '';
|
||||
this.setShowStation('');
|
||||
},
|
||||
setShowStation(stationCode) {
|
||||
const showStation = this.centralizedStationMap[stationCode];
|
||||
const list = [];
|
||||
const mapDevice = this.$store.state.map.mapDevice;
|
||||
for (const key in mapDevice) {
|
||||
list.push(mapDevice[key]);
|
||||
}
|
||||
this.$jlmap.updateShowStation(list, showStation);
|
||||
this.$nextTick(()=>{
|
||||
this.$jlmap.setCenter(showStation);
|
||||
});
|
||||
},
|
||||
setCentralizedstationList(map) {
|
||||
this.centralizedstationList = [];
|
||||
(map.stationList || []).forEach(item => {
|
||||
if (item.centralized) {
|
||||
this.centralizedstationList.push({value: item.code, name: item.name});
|
||||
this.centralizedStationMap[item.code] = item.code;
|
||||
item.chargeStationCodeList && item.chargeStationCodeList.length && item.chargeStationCodeList.forEach(ele => {
|
||||
this.centralizedStationMap[ele] = item.code;
|
||||
});
|
||||
}
|
||||
});
|
||||
console.log(this.centralizedStationMap, '----this.centralizedStationMap--');
|
||||
// if (this.centralizedstationList.length && !this.showStation) {
|
||||
// this.showStation = this.centralizedstationList[0].value;
|
||||
// }
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style rel="stylesheet/scss" lang="scss" scoped>
|
||||
.main {
|
||||
z-index: 10;
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
background: #000000;
|
||||
|
||||
-moz-user-select: none;
|
||||
-o-user-select: none;
|
||||
-khtml-user-select: none;
|
||||
-webkit-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
/deep/ .el-button+.el-button {
|
||||
margin-left: 0px;
|
||||
}
|
||||
</style>
|
||||
@ -1,582 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<!-- 右下角按钮列表 -->
|
||||
<div class="display-draft">
|
||||
<el-button v-if="isscriptRun&&!dataError" type="danger" @click="handleQuitQuest">{{ $t('display.demon.exitScript') }}</el-button>
|
||||
<el-button type="primary" @click="back">{{ $t('display.demon.back') }}</el-button>
|
||||
</div>
|
||||
<!-- 左上角按钮 -->
|
||||
<div class="trainingButton" :style="{top: (offset+45)+'px'}">
|
||||
<el-row>
|
||||
<el-radio-group v-model="scriptMode" class="mode" size="small" @change="changeScriptMode">
|
||||
<el-radio-button :label="scriptModeList.TEACH" :disabled="isscriptRun">{{ $t('display.lesson.teachingMode') }}</el-radio-button>
|
||||
<el-radio-button :label="scriptModeList.PRACTICE" :disabled="isscriptRun">{{ $t('display.lesson.practiceMode') }}</el-radio-button>
|
||||
<el-radio-button :label="scriptModeList.TEST" :disabled="isscriptRun">{{ $t('display.lesson.testMode') }}</el-radio-button>
|
||||
</el-radio-group>
|
||||
</el-row>
|
||||
</div>
|
||||
<!-- 右上角按钮列表 -->
|
||||
<div class="schema" :style="{top: offset+'px'}">
|
||||
<el-select v-model="speed" style="width: 100px;" size="small" @change="speedChange">
|
||||
<el-option
|
||||
v-for="item in speedList"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
/>
|
||||
</el-select>
|
||||
<template v-if="!dataError">
|
||||
<el-button-group>
|
||||
<el-button size="small" :disabled="viewDisabled || isscriptRun" type="success" @click="viewScriptRoles">{{ $t('display.schema.selectRoles') }}</el-button>
|
||||
<el-button v-if="userRole=== 'STATION_SUPERVISOR'&&$route.query.lineCode ==='16'" size="small" @click="goCtc">车务终端</el-button>
|
||||
<el-button v-if="$route.query.lineCode ==='16'&&$store.state.training.prdType === '01'" size="small" @click="showTrainTicket">路票</el-button>
|
||||
<el-button v-if="showRegisterBookBtn" size="small" @click="showRegisterBook">簿册</el-button>
|
||||
<el-button v-if="showDispatcherStation && userRole === 'DISPATCHER'" size="small" @click="changeShowMap">调度台</el-button>
|
||||
<!-- 运行图加载 -->
|
||||
<el-button v-if="running" size="small" :disabled="viewDisabled" @click="viewRunPlan">{{ $t('display.schema.previewRunDiagram') }}</el-button>
|
||||
<el-button v-if="!running" size="small" type="warning" @click="loadRunPlan">{{ $t('display.schema.loadRunDiagram') }}</el-button>
|
||||
</el-button-group>
|
||||
<el-button v-if="!isScheduling" size="small" :type="faultMode ? '':'primary' " @click="changeOperateMode()">{{ faultMode?'切换到普通模式[Tab]':'切换到故障模式[Tab]' }}</el-button>
|
||||
</template>
|
||||
</div>
|
||||
<!-- 菜单按钮列表 -->
|
||||
<demon-menu
|
||||
ref="demonMenu"
|
||||
:is-all-show="!dataError"
|
||||
:jl3dmodel-show="false"
|
||||
:jl3dname-show="!isScheduling&&!isDriver"
|
||||
:cctv-show="false"
|
||||
:schedule-load-show="false"
|
||||
:schedule-preview-show="false"
|
||||
:jlmap3d-fault-show="isStation"
|
||||
:driver-show="isDriver"
|
||||
:all-style="'top:'+(offset+textStatusHeight)+'px'"
|
||||
/>
|
||||
<train-ticket ref="trainTicket" />
|
||||
<register-book ref="registerBook" />
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { ScriptMode } from '@/scripts/ConstDic';
|
||||
import DemonMenu from '@/views/newMap/displayNew/demonMenu';
|
||||
import { EventBus } from '@/scripts/event-bus';
|
||||
import {covertMemberData} from '@/views/newMap/displayNew/utils';
|
||||
import { timeFormat } from '@/utils/date';
|
||||
import { OperateMode } from '@/scripts/ConstDic';
|
||||
import { clearSimulation, getSimulationInfoNew } from '@/api/simulation';
|
||||
import { scriptRePreview } from '@/api/simulation';
|
||||
import {getDraftScriptByGroupNew } from '@/api/script';
|
||||
import { loadMapDataById } from '@/utils/loaddata';
|
||||
import { getByGroupStationList } from '@/api/jmap/map';
|
||||
import ConstConfig from '@/scripts/ConstConfig';
|
||||
import { loadRunPlanData } from '@/utils/loaddata';
|
||||
import Cookies from 'js-cookie';
|
||||
import { Notification } from 'element-ui';
|
||||
import { getToken } from '@/utils/auth';
|
||||
import TrainTicket from '@/views/newMap/trainTicket/index.vue';
|
||||
import RegisterBook from '@/views/newMap/registerBook/index.vue';
|
||||
import { timesSpeedPlayback } from '@/api/rtSimulation';
|
||||
export default {
|
||||
name:'ScriptButtonGroup',
|
||||
components:{
|
||||
DemonMenu,
|
||||
TrainTicket,
|
||||
RegisterBook
|
||||
},
|
||||
props:{
|
||||
offset: {
|
||||
type: Number,
|
||||
required: true
|
||||
},
|
||||
group: {
|
||||
type: String,
|
||||
required: true
|
||||
},
|
||||
userRole: {
|
||||
type: String,
|
||||
required: true
|
||||
},
|
||||
textStatusHeight: {
|
||||
type: Number,
|
||||
default() {
|
||||
return 0;
|
||||
}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
dataError: false,
|
||||
faultMode: false,
|
||||
viewDisabled: true,
|
||||
firstLoad:true,
|
||||
activeTrainList:[],
|
||||
isscriptRun:false, // 剧本是否正在加载
|
||||
scriptMode: ScriptMode.TEACH,
|
||||
speed: 1,
|
||||
planRunning:false
|
||||
};
|
||||
},
|
||||
computed:{
|
||||
running() {
|
||||
return this.$store.state.training.started;
|
||||
},
|
||||
isScheduling() {
|
||||
return this.$store.state.training.prdType === '05';
|
||||
},
|
||||
width() {
|
||||
return this.$store.state.app.width;
|
||||
},
|
||||
height() {
|
||||
return this.$store.state.app.height;
|
||||
},
|
||||
isDriver() {
|
||||
return this.$store.state.scriptRecord.userRole == 'DRIVER';
|
||||
},
|
||||
isStation() {
|
||||
return this.$store.state.training.prdType == '01';
|
||||
},
|
||||
showDispatcherStation() {
|
||||
return this.$route.query.lineCode === '16' && this.$store.state.training.prdType === '02';
|
||||
},
|
||||
scriptModeList() {
|
||||
return ScriptMode;
|
||||
},
|
||||
isAdmin() {
|
||||
return this.$store.state.user.roles.includes('04') || this.$store.state.user.roles.includes('05');
|
||||
},
|
||||
mapId() {
|
||||
return this.$route.query.mapId;
|
||||
},
|
||||
speedList() {
|
||||
return this.isAdmin ? [
|
||||
{ value: 1, label: '1倍速' },
|
||||
{ value: 2, label: '2倍速' },
|
||||
{ value: 3, label: '3倍速' },
|
||||
{ value: 4, label: '4倍速' },
|
||||
{ value: 5, label: '5倍速' },
|
||||
{ value: 6, label: '6倍速' },
|
||||
{ value: 7, label: '7倍速' },
|
||||
{ value: 8, label: '8倍速' },
|
||||
{ value: 9, label: '9倍速' },
|
||||
{ value: 10, label: '10倍速' }
|
||||
] : [
|
||||
{ value: 1, label: '1倍速' },
|
||||
{ value: 2, label: '2倍速' },
|
||||
{ value: 3, label: '3倍速' },
|
||||
{ value: 4, label: '4倍速' },
|
||||
{ value: 5, label: '5倍速' }
|
||||
];
|
||||
},
|
||||
showRegisterBookBtn() {
|
||||
const roleList = ['STATION_SUPERVISOR', 'STATION_ASSISTANT', 'STATION_SIGNALER', 'STATION_SWITCH_MAN', 'STATION_MASTER', 'STATION_WORKER', 'DEVICE_MANAGER'];
|
||||
return this.$route.query.lineCode === '16' && roleList.includes(this.$store.state.training.userRole);
|
||||
}
|
||||
},
|
||||
watch:{
|
||||
$route() {
|
||||
this.initLoadData();
|
||||
},
|
||||
'$store.state.map.mapDataLoadedCount': async function () {
|
||||
await this.getDraftScriptByGroupNew(this.group);
|
||||
await this.loadRunData();
|
||||
},
|
||||
'$store.state.app.windowSizeCount': function() {
|
||||
this.setWindowSize();
|
||||
},
|
||||
'$store.state.runPlan.loadRunPlanCount': function () {
|
||||
this.viewDisabled = false;
|
||||
},
|
||||
'$store.state.socket.simulationSpeed': function (val) {
|
||||
this.speed = val;
|
||||
}
|
||||
},
|
||||
async mounted() {
|
||||
EventBus.$on('CheckFaultModeEvent', () => {
|
||||
if (!this.isScheduling) {
|
||||
this.changeOperateMode();
|
||||
}
|
||||
});
|
||||
await this.initLoadData();
|
||||
},
|
||||
async beforeDestroy() {
|
||||
await this.quit();
|
||||
await this.$store.dispatch('training/reset');
|
||||
await this.$store.dispatch('map/mapClear');
|
||||
this.$store.dispatch('scriptRecord/updateSimulationPause', false);
|
||||
this.$store.dispatch('scriptRecord/updateAudioPlay', false);
|
||||
this.$store.dispatch('map/resetActiveTrainList', true);
|
||||
},
|
||||
methods:{
|
||||
goCtc() {
|
||||
const routeData = this.$router.resolve({
|
||||
path:'/display/demon',
|
||||
query:{
|
||||
lineCode:this.$route.query.lineCode,
|
||||
group: this.$route.query.group,
|
||||
prdType: '01',
|
||||
mapId:this.$route.query.mapId,
|
||||
project: this.project,
|
||||
newApi: false,
|
||||
ctc: true,
|
||||
try: this.$route.query.try || 0,
|
||||
token:getToken(),
|
||||
noPreLogout: true
|
||||
}
|
||||
});
|
||||
window.open(routeData.href, '_blank');
|
||||
},
|
||||
showTrainTicket() {
|
||||
this.$refs.trainTicket.doShow();
|
||||
},
|
||||
showRegisterBook() {
|
||||
this.$refs.registerBook.doShow();
|
||||
},
|
||||
changeShowMap() {
|
||||
this.$emit('changeShowMap', false);
|
||||
},
|
||||
speedChange(val) {
|
||||
timesSpeedPlayback(this.$route.query.group, val).then(resp => {
|
||||
this.$message.success(`设置${val}倍速成功!`);
|
||||
}).catch(e => {
|
||||
this.$message.error('设置倍速失败！');
|
||||
});
|
||||
},
|
||||
// 加载地图数据
|
||||
async initLoadData() {
|
||||
this.changeScriptMode(this.scriptMode);
|
||||
this.$store.dispatch('training/setPrdType', '');
|
||||
this.setWindowSize();
|
||||
this.$store.dispatch('training/reset');
|
||||
try {
|
||||
await this.loadSimulationInfo();
|
||||
this.initLoadDemonData();
|
||||
} catch (error) {
|
||||
this.$messageBox(`初始化失败: ${error.message}`);
|
||||
this.endViewLoading();
|
||||
}
|
||||
},
|
||||
// 加载仿真信息
|
||||
async loadSimulationInfo() {
|
||||
const resp = await getSimulationInfoNew(this.group);
|
||||
if (resp && resp.code == 200 && resp.data && !resp.data.dataError) {
|
||||
this.$store.dispatch('scriptRecord/updateSimulationPause', resp.data.pause);
|
||||
this.$store.dispatch('runPlan/setRunPlanInfo', resp.data.runPlan);
|
||||
if (resp.data.planRunning) {
|
||||
this.$store.dispatch('training/start');// 仿真开始按计划行车
|
||||
} else {
|
||||
this.$store.dispatch('training/over');// 仿真按计划行车结束
|
||||
}
|
||||
this.planRunning = resp.data.planRunning;
|
||||
this.$store.dispatch('training/setInitTime', resp.data.systemTime);
|
||||
} else if (resp && resp.code == 200 && resp.data && resp.data.dataError) {
|
||||
this.dataError = true;
|
||||
this.$messageBox('此地图数据正在维护中,无法运行！');
|
||||
}
|
||||
},
|
||||
// 仿真系统
|
||||
initLoadDemonData() {
|
||||
this.$store.dispatch('training/changeOperateMode', { mode: OperateMode.NORMAL }); // 默认为正常模式
|
||||
if (this.group) {
|
||||
loadMapDataById(this.mapId, 'simulation');
|
||||
this.$store.dispatch('training/setPrdType', '02');
|
||||
} else {
|
||||
this.endViewLoading();
|
||||
}
|
||||
},
|
||||
// 结束加载状态
|
||||
endViewLoading() {
|
||||
this.$store.dispatch('map/mapClear');
|
||||
this.$nextTick(() => {
|
||||
EventBus.$emit('viewLoading', false);
|
||||
});
|
||||
},
|
||||
setIsscriptRun(status) {
|
||||
this.isscriptRun = status;
|
||||
},
|
||||
async getDraftScriptByGroupNew(group) {
|
||||
const resp = await getDraftScriptByGroupNew(group);
|
||||
if (resp.code == 200) {
|
||||
if (resp.data.memberList && resp.data.memberList.length > 0) {
|
||||
resp.data.memberList.sort((a, b) => {
|
||||
return parseInt(a.id) - parseInt(b.id);
|
||||
});
|
||||
this.$store.dispatch('training/setMemberList', {memberList:resp.data.memberList, userId:this.$store.state.user.id});
|
||||
if (this.$store.state.training.started) {
|
||||
this.activeTrainList = this.$store.state.map.activeTrainList;
|
||||
}
|
||||
const memberList = resp.data.memberList;
|
||||
// 获取仿真成员列表
|
||||
const result = covertMemberData(this.activeTrainList, memberList);
|
||||
this.driverList = result.driverList;
|
||||
const 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]
|
||||
},
|
||||
{
|
||||
label: '车站助理',
|
||||
id: 'stationAssistant',
|
||||
type: 'role',
|
||||
children: result.deviceListData[8]
|
||||
},
|
||||
{
|
||||
label: '车站站长',
|
||||
id: 'stationMaster',
|
||||
type: 'role',
|
||||
children: result.deviceListData[9]
|
||||
},
|
||||
{
|
||||
label: '车站信号员',
|
||||
id: 'stationSignaler',
|
||||
type: 'role',
|
||||
children: result.deviceListData[10]
|
||||
},
|
||||
{
|
||||
label: '车站客运员',
|
||||
id: 'stationPassenger',
|
||||
type: 'role',
|
||||
children: result.deviceListData[11]
|
||||
},
|
||||
{
|
||||
label: '车站扳道员',
|
||||
id: 'stationSwitchMan',
|
||||
type: 'role',
|
||||
children: result.deviceListData[12]
|
||||
},
|
||||
{
|
||||
label: '车站引导员',
|
||||
id: 'stationFacilitator',
|
||||
type: 'role',
|
||||
children: result.deviceListData[13]
|
||||
},
|
||||
{
|
||||
label: '车站工务工',
|
||||
id: 'stationWorker',
|
||||
type: 'role',
|
||||
children: result.deviceListData[14]
|
||||
},
|
||||
{
|
||||
label: '设备管理员',
|
||||
id: 'deviceManager',
|
||||
type: 'role',
|
||||
children: result.deviceListData[15]
|
||||
},
|
||||
{
|
||||
label: '车务段段长',
|
||||
id: 'trainMaster',
|
||||
type: 'role',
|
||||
children: result.deviceListData[16]
|
||||
}
|
||||
];
|
||||
/**
|
||||
* 车站助理
|
||||
*/
|
||||
// STATION_ASSISTANT,
|
||||
// STATION_MASTER:'车站站长',
|
||||
// STATION_SIGNALER:'车站信号员',
|
||||
// STATION_PASSENGER:'车站客运员',
|
||||
// STATION_SWITCH_MAN:'车站扳道员',
|
||||
// STATION_FACILITATOR:'车站引导员',
|
||||
// STATION_WORKER:'车站工务工'
|
||||
// stationMaster
|
||||
// stationSignaler
|
||||
// stationPassenger
|
||||
// stationSwitchMan
|
||||
// stationFacilitator
|
||||
// stationWorker
|
||||
const lastMemberList = result.lastMemberList;
|
||||
this.$emit('setTreeData', treeData);
|
||||
this.$emit('setMemberData', lastMemberList);
|
||||
}
|
||||
let newMemberList = [];
|
||||
// planRunning
|
||||
// debugger;
|
||||
const activeMemberList = [];
|
||||
resp.data.actionList.forEach((activeMember)=>{
|
||||
if (!(activeMemberList.length > 0 && activeMemberList.includes(activeMember.memberId))) {
|
||||
activeMemberList.push(activeMember.memberId);
|
||||
}
|
||||
});
|
||||
const playerList = resp.data.memberList.filter(member=>{
|
||||
return activeMemberList.includes(member.id);
|
||||
});
|
||||
playerList.map(member=>{
|
||||
if (!member.deviceName && member.deviceCode) {
|
||||
const device = this.$store.getters['map/getDeviceByCode'](member.deviceCode);
|
||||
if (device.name) {
|
||||
member.deviceName = device.name;
|
||||
} else {
|
||||
member.deviceName = member.deviceCode;
|
||||
}
|
||||
}
|
||||
});
|
||||
const lastData = JSON.stringify(playerList);
|
||||
newMemberList = this.covert(lastData, ConstConfig.ConstSelect.roleTypeNew);
|
||||
if (resp.data.mapLocation) {
|
||||
this.$emit('setMapLocation', resp.data.mapLocation);
|
||||
}
|
||||
const memberList = newMemberList || [];
|
||||
memberList.unshift({ id: '', label: this.$t('display.script.none'), role: 'no', disabled:false });
|
||||
this.$emit('setMemberList', memberList);
|
||||
}
|
||||
},
|
||||
loadRunData() {
|
||||
this.$store.dispatch('runPlan/clear').then(() => {
|
||||
if (this.group) {
|
||||
this.viewDisabled = true;
|
||||
// 获取排序的车站列表
|
||||
getByGroupStationList(this.group).then(response => {
|
||||
this.$store.dispatch('runPlan/setStations', response.data).then(() => {
|
||||
loadRunPlanData(this.group, this.dataError);
|
||||
});
|
||||
}).catch(() => {
|
||||
this.$messageBox(this.$t('display.schema.getStationListFail'));
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
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.label = each.type + deviceName + name;
|
||||
each.disabled = false;
|
||||
});
|
||||
return lastData;
|
||||
},
|
||||
// 退出剧本
|
||||
handleQuitQuest() {
|
||||
scriptRePreview(this.group).then(resp=>{
|
||||
getSimulationInfoNew(this.group).then(()=>{
|
||||
this.isscriptRun = false;
|
||||
this.$store.dispatch('scriptRecord/updateBgSet', false);
|
||||
this.$store.dispatch('scriptRecord/updateAudioPlay', false);
|
||||
// this.userRole = '';
|
||||
this.$store.dispatch('training/setRoles', '');
|
||||
this.$store.dispatch('training/setPrdType', '');
|
||||
this.$emit('clearAllData');
|
||||
this.$emit('quitQuest');
|
||||
// if (resp.data.planRunning) {
|
||||
// this.$store.dispatch('training/start');// 仿真开始按计划行车
|
||||
// } else {
|
||||
// this.$store.dispatch('training/over');// 仿真按计划行车结束
|
||||
// }
|
||||
}).catch(()=>{
|
||||
this.$messageBox(this.$t('display.demon.exitTaskFail'));
|
||||
});
|
||||
}).catch(()=>{
|
||||
this.$messageBox(this.$t('display.demon.exitTaskFail'));
|
||||
});
|
||||
},
|
||||
async back() {
|
||||
await clearSimulation(this.group);
|
||||
this.$store.dispatch('training/over').then(() => {
|
||||
history.go(-1);
|
||||
Notification.closeAll();
|
||||
});
|
||||
},
|
||||
// 销毁仿真
|
||||
async quit() {
|
||||
await clearSimulation(this.group);
|
||||
await this.$store.dispatch('training/over');
|
||||
},
|
||||
viewScriptRoles() {
|
||||
this.$emit('viewScriptRoles');
|
||||
},
|
||||
changeOperateMode() {
|
||||
this.faultMode = !this.faultMode;
|
||||
let mode = OperateMode.NORMAL;
|
||||
if (this.faultMode) {
|
||||
mode = OperateMode.FAULT;
|
||||
}
|
||||
this.$store.dispatch('training/changeOperateMode', { mode: mode });
|
||||
},
|
||||
viewRunPlan() {
|
||||
this.$emit('viewRunPlan');
|
||||
},
|
||||
loadRunPlan() {
|
||||
this.$emit('loadRunPlan');
|
||||
},
|
||||
setWindowSize() {
|
||||
this.$nextTick(() => {
|
||||
const width = this.width;
|
||||
const height = this.height;
|
||||
this.$store.dispatch('config/resize', { width, height });
|
||||
});
|
||||
},
|
||||
changeScriptMode(scriptMode) {
|
||||
const ScriptModeList = {
|
||||
TEACHING_MODE:'teach',
|
||||
PRACTICE_MODE:'practice',
|
||||
TEST_MODE:'test'
|
||||
};
|
||||
this.$store.dispatch('training/setScriptOperationType', ScriptModeList[scriptMode]);
|
||||
this.$emit('changeScriptMode', scriptMode);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.trainingButton{
|
||||
position: absolute;
|
||||
left: 5px;
|
||||
z-index: 2;
|
||||
}
|
||||
.display-draft{
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
bottom: 15px;
|
||||
}
|
||||
.schema{
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
}
|
||||
</style>
|
||||
@ -1,68 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<voice-chat-box
|
||||
v-if="$route.query.lineCode == '16'"
|
||||
ref="chatbox"
|
||||
:group="group"
|
||||
:user-role="userRole"
|
||||
/>
|
||||
<chat-box
|
||||
v-else
|
||||
ref="chatbox"
|
||||
:group="group"
|
||||
:user-role="userRole"
|
||||
/>
|
||||
<script-tip ref="scriptTip" :offset="offset" @allowCreatCoversition="allowCreatCoversition" />
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import ChatBox from '@/views/newMap/chatView/chatBox.vue';
|
||||
import voiceChatBox from '@/views/newMap/chatView/voiceChatBox.vue';
|
||||
import ScriptTip from '@/views/newMap/displayNew/scriptDisplay/component/scriptTip';
|
||||
export default {
|
||||
name:'ScriptPreviewChat',
|
||||
components:{
|
||||
ChatBox,
|
||||
voiceChatBox,
|
||||
ScriptTip
|
||||
},
|
||||
props: {
|
||||
group: {
|
||||
type: String,
|
||||
required: true
|
||||
},
|
||||
userRole: {
|
||||
type: String,
|
||||
required: true
|
||||
},
|
||||
offset: {
|
||||
type: Number,
|
||||
required: true
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
};
|
||||
},
|
||||
computed:{
|
||||
},
|
||||
watch:{
|
||||
|
||||
},
|
||||
methods:{
|
||||
clearAllData() {
|
||||
this.resetCoversition();
|
||||
this.$refs.scriptTip.resetScriptTip();
|
||||
},
|
||||
resetCoversition() {
|
||||
},
|
||||
allowCreatCoversition() {
|
||||
this.createCoversition = true;
|
||||
},
|
||||
resetScriptTip() {
|
||||
this.$refs.scriptTip.resetScriptTip();
|
||||
}
|
||||
}
|
||||
|
||||
};
|
||||
</script>
|
||||
@ -1,338 +0,0 @@
|
||||
<template>
|
||||
<div style="width:100%;height:100%;">
|
||||
<div class="display-draft">
|
||||
<el-button-group>
|
||||
<el-button v-if="!isReplaceBg" type="primary" @click="back">{{ $t('scriptRecord.scriptBack') }}</el-button>
|
||||
<template v-if="$route.query.lineCode == '16'">
|
||||
<el-button type="primary" @click="modifySystemTime">修改系统时间</el-button>
|
||||
</template>
|
||||
<el-button v-if="!isScriptCommand||isReplaceBg" type="danger" :disabled="dataError" @click="end">初始化</el-button>
|
||||
<el-button v-if="!isScriptCommand||isReplaceBg" type="success" :disabled="isDisable||dataError" @click="selectBeginTime">{{ $t('scriptRecord.drivingByPlan') }}</el-button>
|
||||
</el-button-group>
|
||||
</div>
|
||||
<demon-menu
|
||||
ref="demonMenu"
|
||||
:is-all-show="!dataError"
|
||||
:jl3dmodel-show="false"
|
||||
:jl3dname-show="!isShowScheduling&&!isDriver"
|
||||
:cctv-show="false"
|
||||
:schedule-load-show="false"
|
||||
:schedule-preview-show="false"
|
||||
:jlmap3d-fault-show="isStation"
|
||||
:driver-show="isDriver"
|
||||
:all-style="'top:'+(offset+textStatusHeight)+'px'"
|
||||
/>
|
||||
|
||||
<menu-schema
|
||||
ref="menuSchema"
|
||||
:offset="offset"
|
||||
:data-error="dataError"
|
||||
:offset-bottom="offsetBottom"
|
||||
@changeShowMap="changeShowMap"
|
||||
/>
|
||||
|
||||
<set-time ref="setTime" @ConfirmSelectBeginTime="start" />
|
||||
<modify-time v-if="$route.query.lineCode == '16'" ref="modifySysTime" />
|
||||
|
||||
<tip-script-record-new
|
||||
ref="tipTaskRecordNew"
|
||||
:group="group"
|
||||
:offset-bottom="offsetBottom"
|
||||
:offset="offset"
|
||||
:is-replace-bg="isReplaceBg"
|
||||
@resetChat="resetChat"
|
||||
@setReplace="setReplace"
|
||||
/>
|
||||
<voice-chat-box
|
||||
v-if="$route.query.lineCode == '16'"
|
||||
ref="chatbox"
|
||||
:group="group"
|
||||
:user-role="userRole"
|
||||
:is-replace-bg="isReplaceBg"
|
||||
/>
|
||||
<chat-box
|
||||
v-else
|
||||
ref="chatbox"
|
||||
:group="group"
|
||||
:user-role="userRole"
|
||||
:is-replace-bg="isReplaceBg"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- 单人仿真 -->
|
||||
<script>
|
||||
import { TrainingMode } from '@/scripts/ConstDic';
|
||||
import MenuSchema from '@/views/newMap/displayNew/menuSchema';
|
||||
import DemonMenu from '@/views/newMap/displayNew/demonMenu';
|
||||
import TipScriptRecordNew from '@/views/scriptManage/tipScriptRecord';
|
||||
import SetTime from '@/views/newMap/displayNew/demon/setTime';
|
||||
import ModifyTime from '@/views/newMap/displayNew/demon/modifyTime';
|
||||
import { Notification } from 'element-ui';
|
||||
import { getSimulationMemberList} from '@/api/simulation';
|
||||
import ChatBox from '@/views/newMap/chatView/chatBox.vue';
|
||||
import voiceChatBox from '@/views/newMap/chatView/voiceChatBox.vue';
|
||||
|
||||
export default {
|
||||
name: 'MenuScript',
|
||||
components: {
|
||||
SetTime,
|
||||
ModifyTime,
|
||||
MenuSchema,
|
||||
DemonMenu,
|
||||
TipScriptRecordNew,
|
||||
ChatBox,
|
||||
voiceChatBox
|
||||
},
|
||||
props: {
|
||||
offsetBottom: {
|
||||
type: Number,
|
||||
required: true
|
||||
},
|
||||
dataError: {
|
||||
type: Boolean,
|
||||
default() {
|
||||
return false;
|
||||
}
|
||||
},
|
||||
offset: {
|
||||
type: Number,
|
||||
required: true
|
||||
},
|
||||
textStatusHeight: {
|
||||
type: Number,
|
||||
default() {
|
||||
return 0;
|
||||
}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
isScriptCommand:false,
|
||||
isReplaceBg: false,
|
||||
userRole:'',
|
||||
centralizedstationList: [],
|
||||
centralizedStationMap: {}
|
||||
};
|
||||
},
|
||||
|
||||
computed: {
|
||||
scriptId() {
|
||||
return this.$route.query.scriptId;
|
||||
},
|
||||
group() {
|
||||
return this.$route.query.group;
|
||||
},
|
||||
// userRole() {
|
||||
// return this.$store.state.scriptRecord.userRole ? this.$store.state.scriptRecord.userRole : 'DISPATCHER';
|
||||
// },
|
||||
isDriver() {
|
||||
return this.userRole == 'DRIVER';
|
||||
},
|
||||
isShowScheduling() {
|
||||
return this.$store.state.training.prdType == '05';
|
||||
},
|
||||
isStation() {
|
||||
return this.$store.state.training.prdType == '01';
|
||||
},
|
||||
isDisable() {
|
||||
return this.$store.state.training.started;
|
||||
},
|
||||
userId() {
|
||||
return this.$store.state.user ? this.$store.state.user.id : '';
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
'$store.state.scriptRecord.bgSet':function (val) {
|
||||
this.isScriptCommand = val;
|
||||
},
|
||||
'$store.state.socket.simulationStart': function(val) {
|
||||
this.$store.dispatch('training/simulationStart').then(() => {
|
||||
this.$store.dispatch('map/setShowCentralizedStationNum');
|
||||
});
|
||||
},
|
||||
'$store.state.map.map': function (map) {
|
||||
if (map) {
|
||||
this.setCentralizedstationList(map); // 获取集中站列表
|
||||
}
|
||||
},
|
||||
'$store.state.map.mapViewLoadedCount': function (val) { // 地图视图加载完成标识
|
||||
getSimulationMemberList(this.group).then(resp => {
|
||||
this.$store.dispatch('training/setMemberList', {memberList:resp.data, userId:this.$store.state.user.id});
|
||||
// 设置当前角色
|
||||
const member = resp.data.find(mem=>{
|
||||
return mem.userId != '' && mem.userId != undefined;
|
||||
});
|
||||
if (member) {
|
||||
const memberType = ['STATION_SUPERVISOR', 'DISPATCHER', 'DRIVER', 'MAINTAINER', 'DEPOT_DISPATCHER', 'PARENT_DEPARTMENT',
|
||||
'ELECTRIC_DISPATCHER', 'SIGNAL_BUILDING', 'STATION_ASSISTANT', 'STATION_MASTER', 'STATION_SIGNALER',
|
||||
'STATION_PASSENGER', 'STATION_SWITCH_MAN', 'STATION_FACILITATOR', 'STATION_WORKER', 'DEVICE_MANAGER', ' TRAIN_MASTER'];
|
||||
const prdTypeList = ['01', '02', '04', '', '05', '', '', '', '', '', '01', '', '01', '', '', '', ''];
|
||||
const index = memberType.indexOf(member.type);
|
||||
let prdType;
|
||||
if (index >= 0) {
|
||||
prdType = prdTypeList[index];
|
||||
}
|
||||
this.userRole = member.type;
|
||||
this.$store.dispatch('training/setRoles', member.type);
|
||||
this.$store.dispatch('scriptRecord/updateRole', member.type + ':' + member.id);
|
||||
this.$store.dispatch('training/setPrdType', prdType);
|
||||
}
|
||||
|
||||
}).catch(() => {
|
||||
this.$messageBox('获取仿真成员列表失败！');
|
||||
});
|
||||
},
|
||||
'$store.state.scriptRecord.userRole':function (val) {
|
||||
this.userRole = val;
|
||||
},
|
||||
// '$store.state.training.roleDeviceCode':function (val) {
|
||||
// if (val) {
|
||||
// this.setShowStation(val);
|
||||
// }
|
||||
// },
|
||||
'$store.state.socket.simulationRoleList':function(list) {
|
||||
if (list && list.length && this.$route.query.lineCode == '16') { // 人员变化监控
|
||||
this.checkRoleChange(list);
|
||||
}
|
||||
}
|
||||
|
||||
},
|
||||
beforeDestroy() {
|
||||
// this.clearAutoSave();
|
||||
this.$store.dispatch('training/setMemberList', {memberList:[], userId:this.$store.state.user.id});
|
||||
this.$store.dispatch('map/resetActiveTrainList', true);
|
||||
this.$store.dispatch('scriptRecord/updateBgSet', false);
|
||||
this.$store.dispatch('scriptRecord/updateRole', null);
|
||||
this.$store.dispatch('training/setRoles', null);
|
||||
},
|
||||
mounted() {
|
||||
this.isScriptCommand = this.$store.state.scriptRecord.bgSet;
|
||||
this.$store.dispatch('training/end', TrainingMode.NORMAL);
|
||||
this.$nextTick(() => {
|
||||
this.$refs.demonMenu.menuClick();
|
||||
});
|
||||
},
|
||||
methods: {
|
||||
// 修改系统时间
|
||||
modifySystemTime() {
|
||||
this.$refs.modifySysTime.doShow();
|
||||
},
|
||||
selectBeginTime() {
|
||||
this.$refs.setTime.doShow();
|
||||
},
|
||||
start(model) {
|
||||
this.$emit('start', model);
|
||||
},
|
||||
end() {
|
||||
this.$emit('end');
|
||||
},
|
||||
back() {
|
||||
history.go(-1);
|
||||
Notification.closeAll();
|
||||
},
|
||||
resetChat() {
|
||||
// this.$refs.chatbox.resetCoversition();
|
||||
},
|
||||
setReplace(isRp) {
|
||||
this.isReplaceBg = isRp;
|
||||
},
|
||||
changeShowMap() {
|
||||
this.$emit('changeShowMap', false);
|
||||
},
|
||||
|
||||
checkRoleChange(data) {
|
||||
const stationRoleList = ['STATION_SUPERVISOR', 'STATION_ASSISTANT', 'STATION_MASTER', 'STATION_SIGNALER',
|
||||
'STATION_PASSENGER', 'STATION_SWITCH_MAN', 'STATION_FACILITATOR', 'STATION_WORKER', 'DEVICE_MANAGER'];
|
||||
// 'TRAIN_MASTER'
|
||||
data.forEach(item => {
|
||||
if ((item.messageType === 'PLAY_CHANGE' || item.messageType === 'ONLINE' ) && item.userId == this.userId && (stationRoleList.includes(item.type) )) {
|
||||
// this.userRole = item.type || 'AUDIENCE';
|
||||
this.$store.dispatch('training/setRoleDeviceCode', item.deviceCode);
|
||||
this.$store.dispatch('training/setUserRole', item.type);
|
||||
this.deviceCode = item.deviceCode;
|
||||
|
||||
if (item.type == 'STATION_SUPERVISOR' || item.type == 'STATION_SIGNALER') {
|
||||
this.setShowStation(item.deviceCode);
|
||||
this.$store.dispatch('training/setPrdType', '01');
|
||||
} else {
|
||||
const showStation = this.centralizedStationMap[item.deviceCode];
|
||||
this.setShowStation('');
|
||||
this.$jlmap.setCenter(showStation);
|
||||
}
|
||||
// this.setSimulationPrdType(this.centralizedStationMap[item.deviceCode]);
|
||||
// this.$nextTick(() => {
|
||||
// if (item.deviceCode && this.$store.state.training.prdType !== '09') { this.setCenter(item.deviceCode); }
|
||||
// });
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
setShowStation(stationCode) {
|
||||
const showStation = this.centralizedStationMap[stationCode];
|
||||
const list = [];
|
||||
const mapDevice = this.$store.state.map.mapDevice;
|
||||
for (const key in mapDevice) {
|
||||
list.push(mapDevice[key]);
|
||||
}
|
||||
this.$jlmap.updateShowStation(list, showStation);
|
||||
this.$nextTick(()=>{
|
||||
this.$jlmap.setCenter(showStation);
|
||||
});
|
||||
},
|
||||
setCentralizedstationList(map) {
|
||||
this.centralizedstationList = [];
|
||||
(map.stationList || []).forEach(item => {
|
||||
if (item.centralized) {
|
||||
this.centralizedstationList.push({value: item.code, name: item.name});
|
||||
this.centralizedStationMap[item.code] = item.code;
|
||||
item.chargeStationCodeList && item.chargeStationCodeList.length && item.chargeStationCodeList.forEach(ele => {
|
||||
this.centralizedStationMap[ele] = item.code;
|
||||
});
|
||||
}
|
||||
});
|
||||
// if (this.centralizedstationList.length && !this.showStation) {
|
||||
// this.showStation = this.centralizedstationList[0].value;
|
||||
// }
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style rel="stylesheet/scss" lang="scss" scoped>
|
||||
@import "src/styles/mixin.scss";
|
||||
|
||||
.display-card {
|
||||
z-index: 9;
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
top: 17px;
|
||||
left: 160px;
|
||||
height: 32px;
|
||||
}
|
||||
|
||||
.display-card .el-row {
|
||||
line-height: 32px !important;
|
||||
}
|
||||
|
||||
.display-score {
|
||||
background-color: black;
|
||||
display: -moz-inline-box;
|
||||
display: inline-block;
|
||||
text-align: left;
|
||||
height: 32px;
|
||||
line-height: 24px;
|
||||
border-radius: 4px;
|
||||
padding-left: 2px;
|
||||
margin-left: 10px;
|
||||
font-family: "Microsoft" !important;
|
||||
font-size: 18px !important;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.display-draft {
|
||||
position: absolute;
|
||||
float: right;
|
||||
right: 15px;
|
||||
bottom: 15px;
|
||||
}
|
||||
</style>
|
||||
@ -1,183 +0,0 @@
|
||||
<template>
|
||||
<span>
|
||||
<el-select v-if="$store.state.training.prdType === '01'" v-model="oldShowMemberId" :style="styleCss" size="small" @change="switchStationMode">
|
||||
<el-option v-for="item in stationListMode" :key="item.value" :label="item.name" :value="item.value" />
|
||||
</el-select>
|
||||
<el-select v-else-if="$store.state.training.prdType === '09'" v-model="oldShowMemberId" :style="styleCss" size="small" style="margin-right:20px;" @change="switchStationMode">
|
||||
<el-option v-for="item in depotListMode" :key="item.value" :label="item.name" :value="item.value" />
|
||||
</el-select>
|
||||
</span>
|
||||
</template>
|
||||
<script>
|
||||
import { mapGetters } from 'vuex';
|
||||
import { assignUsersPlayRoles } from '@/api/jointSimulation';
|
||||
import { EventBus } from '@/scripts/event-bus';
|
||||
|
||||
export default {
|
||||
name:'SelectStation',
|
||||
props:{
|
||||
styleCss: {
|
||||
type: String,
|
||||
required: true
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
stationListMode: [], // 设备集中站列表
|
||||
depotListMode: [],
|
||||
showMemberId: '', // 展示的值班站memberId
|
||||
oldShowMemberId: '',
|
||||
stationCentralizedMap: {},
|
||||
showStation: ''
|
||||
};
|
||||
},
|
||||
computed:{
|
||||
...mapGetters('map', [
|
||||
'map',
|
||||
'stationList'
|
||||
])
|
||||
},
|
||||
watch:{
|
||||
'$store.state.training.memberData': function (val) {
|
||||
this.initStationListMode();
|
||||
},
|
||||
'$store.state.training.simulationUserList': function(val) {
|
||||
this.initData();
|
||||
},
|
||||
'$store.state.socket.simulationRoleList':function(list) {
|
||||
if (list && list.length) { // 人员变化监控
|
||||
this.checkRoleChange(list);
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.initStationListMode();
|
||||
this.initData();
|
||||
EventBus.$on('switchStationMode', (stationCode) => {
|
||||
this.$store.state.training.memberList.filter(el => el.type == 'STATION_SUPERVISOR').find(el => {
|
||||
if (el.deviceCode == stationCode) {
|
||||
this.oldShowMemberId = el.id;
|
||||
this.switchStationMode(el.id);
|
||||
}
|
||||
});
|
||||
});
|
||||
},
|
||||
methods:{
|
||||
switchStationMode(val) {
|
||||
assignUsersPlayRoles([{ userId: this.$store.state.user.id, memberId: val}], this.$route.query.group).then(resp => {
|
||||
this.showMemberId = val;
|
||||
const member = this.$store.state.training.memberData[val];
|
||||
const station = this.$store.getters['map/getDeviceByCode'](member.deviceCode);
|
||||
if (station) {
|
||||
if (this.$store.state.map.map && this.$store.state.map.map.pictureList) {
|
||||
const picture = this.$store.state.map.map.pictureList.find(picture => picture.stationCodes && picture.stationCodes.includes(station.code) && picture.type === 'chainStation');
|
||||
if (picture) {
|
||||
const mapDevice = this.$store.state.map.mapDevice;
|
||||
const list = [];
|
||||
const deviceList = [];
|
||||
for (const key in mapDevice) {
|
||||
list.push(mapDevice[key]);
|
||||
deviceList.push(key);
|
||||
}
|
||||
this.$jlmap.updateShowStation(list, '');
|
||||
this.$store.dispatch('map/setPictureDeviceMap', picture.deviceMap);
|
||||
this.$jlmap.updatePicture(deviceList);
|
||||
this.$jlmap.updateTransform(picture.scaling, picture.origin);
|
||||
} else {
|
||||
this.jmapShowStation(station);
|
||||
}
|
||||
} else {
|
||||
this.jmapShowStation(station);
|
||||
}
|
||||
}
|
||||
}).catch((err) => {
|
||||
console.log(err);
|
||||
this.showMemberId = this.oldShowMemberId;
|
||||
this.$message.error('调整角色成员失败！');
|
||||
});
|
||||
},
|
||||
jmapShowStation(station) {
|
||||
this.showStation = station.code;
|
||||
const showStationCode = this.stationCentralizedMap[station.code];
|
||||
const mapDevice = this.$store.state.map.mapDevice;
|
||||
const list = [];
|
||||
for (const key in mapDevice) {
|
||||
list.push(mapDevice[key]);
|
||||
}
|
||||
this.$store.dispatch('training/setRoleDeviceCode', station.code);
|
||||
this.$jlmap.updateShowStation(list, showStationCode || station.code);
|
||||
this.setCenter(showStationCode);
|
||||
},
|
||||
setCenter(code) {
|
||||
if (this.$store.state.training.prdType === '09' && this.$store.state.map.map.displayList && this.$store.state.map.map.displayList.length) {
|
||||
const tempData = this.$store.state.map.map.displayList.find(item => { return item.stationCodeList.includes(code) && item.type === 'DEPOT_IL'; });
|
||||
const dataZoom = { offsetX: tempData.offsetX, offsetY: tempData.offsetY, scaleRate: tempData.scaleRate };
|
||||
this.$store.commit('map/setDataZoom', dataZoom);
|
||||
this.$jlmap.setDepot(dataZoom);
|
||||
} else {
|
||||
this.$jlmap.setCenter(code);
|
||||
}
|
||||
},
|
||||
initStationListMode() {
|
||||
this.stationListMode = [];
|
||||
this.$store.state.training.memberList.forEach(item => {
|
||||
if (item.type === 'STATION_SUPERVISOR') {
|
||||
const station = this.$store.getters['map/getDeviceByCode'](item.deviceCode);
|
||||
if (station) {
|
||||
this.stationListMode.push({value:item.id, name: station.name});
|
||||
}
|
||||
} else if (item.type === 'DEPOT_DISPATCHER') {
|
||||
const station = this.$store.getters['map/getDeviceByCode'](item.deviceCode);
|
||||
if (station) {
|
||||
this.depotListMode.push({value:item.id, name: station.name});
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
initData() {
|
||||
this.$store.state.training.simulationUserList.forEach(item => {
|
||||
if (item.type === 'STATION_SUPERVISOR' && item.userId == this.$store.state.user.id) {
|
||||
this.showMemberId = item.memberId;
|
||||
this.oldShowMemberId = item.memberId;
|
||||
} else if (item.type === 'DEPOT_DISPATCHER' && item.userId == this.$store.state.user.id) {
|
||||
this.showMemberId = item.memberId;
|
||||
this.oldShowMemberId = item.memberId;
|
||||
}
|
||||
});
|
||||
this.stationList.forEach(item => {
|
||||
if (item.centralized) {
|
||||
this.stationCentralizedMap[item.code] = item.code;
|
||||
item.chargeStationCodeList.forEach(ele => {
|
||||
this.stationCentralizedMap[ele] = item.code;
|
||||
});
|
||||
}
|
||||
});
|
||||
if (this.showMemberId) {
|
||||
this.switchStationMode( this.showMemberId);
|
||||
}
|
||||
},
|
||||
checkRoleChange(data) {
|
||||
data.forEach(item => {
|
||||
if (item.messageType === 'KICK_OUT' && item.userId == this.$store.state.user.id) {
|
||||
this.$messageBox('您已经被请离房间！');
|
||||
window.close();
|
||||
} else if (item.messageType === 'PLAY_CHANGE' && item.userId == this.$store.state.user.id && item.type === 'STATION_SUPERVISOR') {
|
||||
this.showMemberId = item.memberId;
|
||||
this.oldShowMemberId = item.memberId;
|
||||
this.showStation = item.deviceCode;
|
||||
const showStationCode = this.stationCentralizedMap[item.deviceCode];
|
||||
const mapDevice = this.$store.state.map.mapDevice;
|
||||
const list = [];
|
||||
for (const key in mapDevice) {
|
||||
list.push(mapDevice[key]);
|
||||
}
|
||||
this.$store.dispatch('training/setRoleDeviceCode', item.deviceCode);
|
||||
this.$store.dispatch('training/setUserRole', item.type);
|
||||
this.$jlmap.updateShowStation(list, showStationCode || item.deviceCode);
|
||||
this.setCenter(showStationCode);
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@ -1,446 +0,0 @@
|
||||
<template>
|
||||
<div class="dispatcher-station">
|
||||
<div class="station-title">上海局CTC系统-行调台-控制工具条</div>
|
||||
<div class="main">
|
||||
<div class="menu-list">
|
||||
<el-button v-for="(item, index) in menuList" :key="index" class="btn" type="text" @click="clickMenu(item.refPath)">{{ item.label }}</el-button>
|
||||
</div>
|
||||
<div class="btn-box">
|
||||
<div v-for="(item, index) in buttonList" :key="index" class="btn-div" @click="doShow(item.refPath)">
|
||||
<div class="img">
|
||||
<el-image
|
||||
style="width: 83px; height: 83px"
|
||||
:src="item.imgUrl"
|
||||
/>
|
||||
</div>
|
||||
<div class="text">{{ item.label }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<DispatchCmd ref="dispatch-cmd" />
|
||||
<DispatcherLoger ref="dispatcherLoger" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import DispatchCmd from '@/views/dispatcherStationManage/dispatchCmd';
|
||||
import DispatcherLoger from '@/views/dispatcherLoger/index';
|
||||
// import DispatcherLoger from '@/jmapNew/theme/datie_02/menus/dispatcherLoger';
|
||||
import ZhanchangIcon from '@/assets/dispatcherStation/zhanchang.png';
|
||||
import YunxingIcon from '@/assets/dispatcherStation/yunxing.png';
|
||||
import CmdIcon from '@/assets/dispatcherStation/cmd.png';
|
||||
import { getToken } from '@/utils/auth';
|
||||
import { creatSubscribe, clearSubscribe, getTopic } from '@/utils/stomp';
|
||||
export default {
|
||||
name: 'DispatcherStation',
|
||||
components: {
|
||||
DispatchCmd,
|
||||
DispatcherLoger
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
stationCode:'',
|
||||
groupModel: '',
|
||||
hasUnsubscribe:false,
|
||||
buttonList: [
|
||||
{
|
||||
label: '运行图',
|
||||
refPath: 'dispatcherLoger',
|
||||
imgUrl: YunxingIcon
|
||||
},
|
||||
{
|
||||
label: '调度命令',
|
||||
refPath: 'dispatch-cmd',
|
||||
imgUrl: CmdIcon
|
||||
},
|
||||
{
|
||||
label: '站场图',
|
||||
refPath: 'station-map',
|
||||
imgUrl: ZhanchangIcon
|
||||
},
|
||||
{
|
||||
label: '数据更新',
|
||||
refPath: '',
|
||||
imgUrl: CmdIcon
|
||||
},
|
||||
{
|
||||
label: '时间同步',
|
||||
refPath: '',
|
||||
imgUrl: CmdIcon
|
||||
}
|
||||
],
|
||||
menuList: [
|
||||
{
|
||||
label: '登录(L)',
|
||||
refPath: ''
|
||||
},
|
||||
{
|
||||
label: '应用程序(T)',
|
||||
refPath: ''
|
||||
}
|
||||
]
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
'$store.state.training.prdType': function(prdType, oldPrdType) {
|
||||
this.changePrdType(prdType, oldPrdType);
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
// const _that = this;
|
||||
// window.onbeforeunload = () => { _that.clearSubscribe(); };
|
||||
this.groupModel = this.$route.query.group;
|
||||
// this.subscribe();
|
||||
},
|
||||
// beforeDestroy() {
|
||||
// this.clearSubscribe();
|
||||
// },
|
||||
methods: {
|
||||
doShow(refPath) {
|
||||
if (!refPath) {
|
||||
this.$alert('实现中......', '提示', {
|
||||
confirmButtonText: '确定',
|
||||
callback: action => {
|
||||
}
|
||||
});
|
||||
return;
|
||||
}
|
||||
if (refPath === 'station-map') {
|
||||
this.$emit('changeShowMap', true);
|
||||
} else {
|
||||
this.$refs[refPath].doShow();
|
||||
}
|
||||
},
|
||||
clickMenu(refPath) {
|
||||
this.$alert('实现中......', '提示', {
|
||||
confirmButtonText: '确定',
|
||||
callback: action => {
|
||||
}
|
||||
});
|
||||
},
|
||||
changePrdType(prdType, oldPrdType) {
|
||||
// if (prdType) {
|
||||
// this.subscribe(prdType);
|
||||
// }
|
||||
// if (oldPrdType) {
|
||||
// this.clearSubscribe(oldPrdType);
|
||||
// }
|
||||
if (prdType == '01') {
|
||||
this.clearSubscribe();
|
||||
this.hasUnsubscribe = true;
|
||||
} else if (prdType == '02' && this.hasUnsubscribe) {
|
||||
this.subscribe();
|
||||
}
|
||||
},
|
||||
async subscribe(prdType) {
|
||||
const header = { group: this.$route.query.group || '', 'X-Token': getToken() };
|
||||
creatSubscribe(getTopic('CTC', this.$route.query.group), header);
|
||||
// if (prdType == '02') {
|
||||
// // creatSubscribe(getTopic('CTC_RAILWAY', this.$route.query.group), header);
|
||||
|
||||
// } else if (prdType == '01') {
|
||||
// // creatSubscribe(getTopic('CTC', this.$route.query.group), header);
|
||||
// }
|
||||
|
||||
},
|
||||
clearSubscribe(prdType) {
|
||||
// if (prdType == '02') {
|
||||
// // clearSubscribe(getTopic('CTC_RAILWAY', this.groupModel));
|
||||
// } else if (prdType == '01') {
|
||||
clearSubscribe(getTopic('CTC', this.groupModel));
|
||||
// }
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.dispatcher-station{
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
background: #E1EDF9;
|
||||
.station-title {
|
||||
height: 30px;
|
||||
padding: 0 10px;
|
||||
line-height: 30px;
|
||||
width: 100%;
|
||||
}
|
||||
.main {
|
||||
margin: 5px;
|
||||
height: calc(100% - 40px);
|
||||
border: 1px solid #000;
|
||||
background: #C0C0C0;
|
||||
.menu-list {
|
||||
width: 100%;
|
||||
padding-left: 50px;
|
||||
background: #D9DFF0;
|
||||
.el-button {
|
||||
padding: 5px;
|
||||
}
|
||||
}
|
||||
.btn-box {
|
||||
height: 100%;
|
||||
border-top: 2px solid #808080;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
padding: 20px 10px;
|
||||
.btn-div {
|
||||
width: 120px;
|
||||
height: 100px;
|
||||
text-align: center;
|
||||
.text {
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
}
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<style>
|
||||
.chengdou-03__systerm {
|
||||
overflow: hidden !important;
|
||||
}
|
||||
|
||||
.chengdou-03__systerm .el-dialog {
|
||||
background: #0055E8;
|
||||
box-shadow: 1px hsla(240, 0%, 100%, 0.5) inset;
|
||||
border: 1px solid rgb(69, 134, 247);
|
||||
border-radius: 6px;
|
||||
font-size: 13px !important;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.chengdou-03__systerm .el-dialog span {
|
||||
font-size: 13px !important;
|
||||
line-height: 22px;
|
||||
}
|
||||
|
||||
.chengdou-03__systerm .el-dialog span .el-icon-arrow-up{
|
||||
line-height: 18px;
|
||||
}
|
||||
|
||||
.chengdou-03__systerm .el-dialog .el-dialog__footer {
|
||||
background: #ECE9D8;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.chengdou-03__systerm .el-dialog .el-dialog__body {
|
||||
padding: 20px;
|
||||
margin: 0px 3px 3px;
|
||||
border: 2px solid rgba(120, 121, 123, 0.5);
|
||||
box-shadow: 1px hsla(240, 0%, 100%, 0.5) inset;
|
||||
background: #ECE9D8;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.chengdou-03__systerm .el-dialog .el-dialog__title {
|
||||
font-size: 16px;
|
||||
color: #fff;
|
||||
position: absolute;
|
||||
top: 4px;
|
||||
left: 7px;
|
||||
}
|
||||
|
||||
.chengdou-03__systerm .el-dialog .el-dialog__headerbtn {
|
||||
background: linear-gradient(#CD98A0, #C27D6E, #B63022, #C68770);
|
||||
border: 1px solid #fff;
|
||||
border-radius: 4px;
|
||||
top: 6px;
|
||||
right: 3px;
|
||||
line-height: 16px;
|
||||
}
|
||||
|
||||
.chengdou-03__systerm .el-dialog .el-dialog__headerbtn .el-icon-close:before {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.chengdou-03__systerm .el-dialog .el-dialog__headerbtn .el-dialog__close {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.chengdou-03__systerm .el-dialog .el-button {
|
||||
height: 24px;
|
||||
line-height: 22px;
|
||||
padding: 0px;
|
||||
width: 80px;
|
||||
border: 2px outset #E2E2E2;
|
||||
border-radius: 4px !important;
|
||||
color: #000;
|
||||
background: #F0F0F0;
|
||||
}
|
||||
|
||||
.chengdou-03__systerm .el-dialog .expand {
|
||||
width: 120px;
|
||||
}
|
||||
|
||||
.chengdou-03__systerm .el-dialog .el-button:focus span {
|
||||
border: 1px dashed gray;
|
||||
}
|
||||
|
||||
.chengdou-03__systerm .el-dialog .el-button:active {
|
||||
border: 2px inset #E2E2E2;
|
||||
}
|
||||
|
||||
.chengdou-03__systerm .el-dialog .el-button:disabled {
|
||||
border: 2px inset #E2E2E2;
|
||||
}
|
||||
|
||||
.chengdou-03__systerm .el-dialog .el-button:disabled span {
|
||||
border: 0px;
|
||||
}
|
||||
|
||||
.chengdou-03__systerm .el-dialog .el-input {
|
||||
border: 2px inset #E9E9E9;
|
||||
height: 22px !important;
|
||||
line-height: 22px !important;
|
||||
}
|
||||
|
||||
.chengdou-03__systerm .el-dialog .el-input__inner {
|
||||
color: #000;
|
||||
background: #fff !important;
|
||||
border: 0px;
|
||||
border-radius: 0px !important;
|
||||
box-sizing: border-box;
|
||||
height: 22px !important;
|
||||
line-height: 22px !important;
|
||||
}
|
||||
|
||||
.chengdou-03__systerm .el-dialog .el-input.is-disabled .el-input__inner {
|
||||
background: #F0F0F0 !important;
|
||||
}
|
||||
|
||||
.chengdou-03__systerm .el-dialog .el-textarea {
|
||||
border: 2px inset #E9E9E9;
|
||||
border-radius: 0px;
|
||||
}
|
||||
|
||||
.chengdou-03__systerm .el-dialog .el-textarea .el-textarea__inner {
|
||||
color: #000;
|
||||
background: #fff !important;
|
||||
border: 0px;
|
||||
border-radius: 0px !important;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.chengdou-03__systerm .el-dialog .el-textarea.is-disabled .el-textarea__inner {
|
||||
background: #F0F0F0 !important;
|
||||
}
|
||||
|
||||
.chengdou-03__systerm .el-dialog .el-table--border th.gutter {
|
||||
background: #EBEADB !important;
|
||||
}
|
||||
|
||||
.chengdou-03__systerm .el-dialog .el-table {
|
||||
border: 2px inset #E9E9E9;
|
||||
color: #000 !important;
|
||||
}
|
||||
|
||||
.chengdou-03__systerm .el-dialog .el-table .cell {
|
||||
height: 22px;
|
||||
line-height: 22px;
|
||||
}
|
||||
|
||||
.chengdou-03__systerm .el-dialog .el-table th.is-leaf {
|
||||
background: #F0F0F0 !important;
|
||||
border-right: 1px solid #BDBDBD !important;
|
||||
border-bottom: 1px solid #BDBDBD !important;
|
||||
color: #000 !important;
|
||||
height: 20px !important;
|
||||
padding: 0px;
|
||||
}
|
||||
|
||||
.chengdou-03__systerm .el-dialog .el-table tr td {
|
||||
height: 20px !important;
|
||||
padding: 0px;
|
||||
}
|
||||
|
||||
.chengdou-03__systerm .el-dialog .el-table .el-table__empty-text {
|
||||
top: 15px !important;
|
||||
}
|
||||
|
||||
.chengdou-03__systerm .el-dialog .current-row>td {
|
||||
background: #3399FF !important;
|
||||
color: #fff !important;
|
||||
}
|
||||
|
||||
.chengdou-03__systerm .el-dialog .el-checkbox__inner {
|
||||
border: 1px inset #dcdfe6 !important;
|
||||
}
|
||||
|
||||
.chengdou-03__systerm .el-dialog .el-checkbox__label {
|
||||
color: #000 !important;
|
||||
}
|
||||
|
||||
.chengdou-03__systerm .el-dialog .el-checkbox.is-disabled .el-checkbox__inner {
|
||||
background: #E6E6E6 !important;
|
||||
}
|
||||
|
||||
.chengdou-03__systerm .el-dialog .el-checkbox.is-disabled .el-checkbox__label {
|
||||
color: #C5C9CC !important;
|
||||
}
|
||||
|
||||
.chengdou-03__systerm .el-dialog .el-checkbox__input.is-checked .el-checkbox__inner {
|
||||
background: #fff !important;
|
||||
border: 1px inset #dcdfe6 !important;
|
||||
}
|
||||
|
||||
.chengdou-03__systerm .el-dialog .el-checkbox__input.is-checked .el-checkbox__inner::after {
|
||||
position: absolute;
|
||||
-webkit-box-sizing: content-box;
|
||||
box-sizing: content-box;
|
||||
content: "";
|
||||
border: 1px solid #000;
|
||||
border-left: 0;
|
||||
border-top: 0;
|
||||
height: 7px;
|
||||
left: 4px;
|
||||
top: 1px;
|
||||
}
|
||||
|
||||
.chengdou-03__systerm .el-dialog .el-radio__inner {
|
||||
border: 1px inset #dcdfe6 !important;
|
||||
}
|
||||
|
||||
.chengdou-03__systerm .el-dialog .el-radio__label {
|
||||
color: #000 !important;
|
||||
}
|
||||
|
||||
.chengdou-03__systerm .el-dialog .el-radio__input.is-checked .el-radio__inner {
|
||||
background: #fff !important;
|
||||
border: 1px inset #dcdfe6 !important;
|
||||
}
|
||||
|
||||
.chengdou-03__systerm .el-dialog .el-radio__input.is-checked .el-radio__inner::after {
|
||||
width: 4px;
|
||||
height: 4px;
|
||||
border-radius: 100%;
|
||||
background-color: #000 !important;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
}
|
||||
|
||||
.chengdou-03__systerm .el-dialog .el-radio.is-disabled .el-radio__inner {
|
||||
background: #E6E6E6 !important;
|
||||
}
|
||||
|
||||
.chengdou-03__systerm .el-dialog .el-radio.is-disabled .el-radio__label {
|
||||
color: #C5C9CC !important;
|
||||
}
|
||||
|
||||
.chengdou-03__systerm .el-dialog .base-label {
|
||||
background: rgba(0, 0, 0, x);
|
||||
position: relative;
|
||||
left: -15px;
|
||||
top: -18px;
|
||||
}
|
||||
|
||||
.chengdou-03__systerm .el-dialog .el-form-item label {
|
||||
font-weight: normal !important;
|
||||
color: #000 !important;
|
||||
}
|
||||
</style>
|
||||
@ -1,806 +0,0 @@
|
||||
<template>
|
||||
<div class="main" :style="{width: canvasWidth+'px'}">
|
||||
<Jl3d-Drive v-show="drivingShow" ref="Jl3dDrive" :panel-show="drivingShow" @showdriving="showdriving" />
|
||||
<Jl3d-MaintainerSelect v-if="jl3dmaintainershow" :is-admin="isAdmin" @back="back" @handlerMemberManage="handlerMemberManage" />
|
||||
<ibp-plate v-show="ibpShow" ref="ibpPlate" @hideIbp="hideIbp" />
|
||||
<template v-show="panelShow" :panelShow="panelShow">
|
||||
<transition name="el-zoom-in-bottom">
|
||||
<map-system-draft v-show="!specialDispatch" ref="mapCanvas" @back="back" />
|
||||
</transition>
|
||||
<div v-if="lineCode === '14'" v-show="prdType=='02'">
|
||||
<ba-si-di ref="baSiDi" @handleDialogShow="handleDialogShow" />
|
||||
<rps-dialog ref="rpsDialog" :is-run-plan="isRunPlan" :train-list="trainList" />
|
||||
<tro-dialog ref="troDialog" :is-run-plan="isRunPlan" :train-list="trainList" :station-list="stationList" />
|
||||
<car-pack ref="carPack" />
|
||||
<tro-detail ref="troDetail" :is-run-plan="isRunPlan" :train-list="trainList" :station-list="stationList" @goTroDialog="troClick" />
|
||||
<tra-dialog ref="traDialog" @openTrainTrunkDetail="openTrainTrunkDetail" />
|
||||
<ttl-dialog ref="ttlDialog" />
|
||||
<tmt-dialog ref="tmtDialog" />
|
||||
<atr-dialog ref="atrDialog" />
|
||||
<train-trunk-detail ref="trainTrunkDetail" @openTra="openTra" />
|
||||
</div>
|
||||
<div v-if="lineCode === '16'" v-show="prdType === '02'&& !showMap">
|
||||
<dispatcher-station ref="dispatcherStation" @changeShowMap="changeShowMap" />
|
||||
</div>
|
||||
<menu-demon-joint
|
||||
ref="demonMenu"
|
||||
:group="group"
|
||||
:offset="offset"
|
||||
:offset-bottom="offsetBottom"
|
||||
:data-error="dataError"
|
||||
:user-role="userRole"
|
||||
:is-admin="isAdmin"
|
||||
:device-code="deviceCode"
|
||||
|
||||
@passflow="passflow"
|
||||
@faultdevice="faultdevice"
|
||||
@getUserRole="getUserRole"
|
||||
@hidepanel="hidepanel"
|
||||
@devicemodel="devicemodel"
|
||||
|
||||
@hidejl3dcctv="hidejl3dcctv"
|
||||
@runPlanLoadShow="runPlanLoadShow"
|
||||
@handlerMemberManage="handlerMemberManage"
|
||||
/>
|
||||
<menu-demon-schema
|
||||
ref="menuSchema"
|
||||
:group="group"
|
||||
:offset="offset"
|
||||
:user-role="userRole"
|
||||
:is-admin="isAdmin"
|
||||
:show-station="showStation"
|
||||
:station-list="centralizedstationList"
|
||||
:device-code="deviceCode"
|
||||
:show-select-station="showSelectStation"
|
||||
:data-error="dataError"
|
||||
@runPlanLoadShow="runPlanLoadShow"
|
||||
@faultChooseShow="faultChooseShow"
|
||||
@switchStationMode="switchStationMode"
|
||||
@changeShowMap="changeShowMap"
|
||||
/>
|
||||
<join-fault-choose ref="faultChoose" :group="group" :offset="offset" />
|
||||
<join-run-plan-Load ref="runPlanLoad" :group="group" />
|
||||
<menu-system-time v-show="!specialDispatch && lineCode !== '19'" ref="menuSystemTime" :offset="offset" :group="group" />
|
||||
<menu-train-list v-if="prdType=='02'" @setCenter="setCenter" />
|
||||
<members-manage ref="membersManage" :is-admin="isAdmin" @addSimulationMember="addSimulationMember" /> <!-- 成员管理 -->
|
||||
<add-member ref="addMember" :station-list="stationList" />
|
||||
<ticket-info v-if="lineCode === '16'" ref="ticketInfo" />
|
||||
<Jl3d-Device
|
||||
v-if="deviceif"
|
||||
v-show="deviceShow"
|
||||
ref="Jl3dDevice"
|
||||
:panel-show="deviceShow"
|
||||
@closedevice3dview="devicemodel"
|
||||
/>
|
||||
</template>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import MapSystemDraft from '@/views/newMap/mapsystemNew/index';
|
||||
import MenuDemonJoint from './menuDemon';
|
||||
import MenuDemonSchema from './menuSchema';
|
||||
import JoinFaultChoose from '@/views/newMap/displayNew/demon/faultChoose';
|
||||
import JoinRunPlanLoad from '@/views/newMap/displayNew/demon/runPlanLoad';
|
||||
import menuSystemTime from '@/views/newMap/displayNew/menuSystemTime';
|
||||
import IbpPlate from '@/views/ibp/ibpsystem/index';
|
||||
import MenuTrainList from './menuTrainList';
|
||||
import { mapGetters } from 'vuex';
|
||||
import { OperateMode, TrainingMode } from '@/scripts/ConstDic';
|
||||
import { loadMapDataById } from '@/utils/loaddata';
|
||||
import { clearSimulation, getSimulationInfoNew, getSimulationUserInfo } from '@/api/simulation';
|
||||
import { getSessionStorage } from '@/utils/auth';
|
||||
import Jl3dDrive from '@/views/jlmap3d/drive/jl3ddrive';
|
||||
import Jl3dDevice from '@/views/jlmap3d/device/jl3ddevice';
|
||||
import Jl3dMaintainerSelect from '@/views/jlmap3d/maintainer/jl3dmaintainerselect';
|
||||
import { EventBus } from '@/scripts/event-bus';
|
||||
import { Message } from 'element-ui';
|
||||
import { getToken } from '@/utils/auth';
|
||||
import MembersManage from './memberManage/membersManage';
|
||||
import AddMember from './memberManage/addMember';
|
||||
// import BaSiDi from '@/views/newMap/displayBaSiDi/baSiDiNew';
|
||||
// import RpsDialog from '@/views/newMap/displayBaSiDi/rps';
|
||||
// import TroDialog from '@/views/newMap/displayBaSiDi/tro';
|
||||
// import CarPack from '@/views/newMap/displayBaSiDi/carPack';
|
||||
// import TroDetail from '@/views/newMap/displayBaSiDi/troDetail';
|
||||
// import TraDialog from '@/views/newMap/displayBaSiDi/tra';
|
||||
// import TtlDialog from '@/views/newMap/displayBaSiDi/ttl';
|
||||
// import TmtDialog from '@/views/newMap/displayBaSiDi/tmt';
|
||||
// import AtrDialog from '@/views/newMap/displayBaSiDi/atr';
|
||||
// import TrainTrunkDetail from '@/views/newMap/displayBaSiDi/trainTrunkDetail';
|
||||
import DispatcherStation from './dispatcherStation';
|
||||
import TicketInfo from '../trainTicket/ticketInfo';
|
||||
import Vue from 'vue';
|
||||
|
||||
export default {
|
||||
name: 'JointTrainingDraft',
|
||||
components: {
|
||||
MapSystemDraft,
|
||||
MenuDemonJoint,
|
||||
MenuDemonSchema,
|
||||
JoinFaultChoose,
|
||||
JoinRunPlanLoad,
|
||||
MenuTrainList,
|
||||
menuSystemTime,
|
||||
Jl3dDrive,
|
||||
Jl3dMaintainerSelect,
|
||||
IbpPlate,
|
||||
MembersManage,
|
||||
AddMember,
|
||||
Jl3dDevice,
|
||||
BaSiDi,
|
||||
RpsDialog,
|
||||
TroDialog,
|
||||
CarPack,
|
||||
TroDetail,
|
||||
TraDialog,
|
||||
TtlDialog,
|
||||
TmtDialog,
|
||||
AtrDialog,
|
||||
TrainTrunkDetail,
|
||||
DispatcherStation,
|
||||
TicketInfo
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// trainingObj: {},
|
||||
// timeDemonNum: 0,
|
||||
offset: 10,
|
||||
offsetBottom: 15,
|
||||
userRole: '',
|
||||
deviceCode: '',
|
||||
group: '',
|
||||
mapId: '',
|
||||
lineCode: '',
|
||||
simulationShow: false,
|
||||
drivingShow: false,
|
||||
jl3dmaintainershow:false,
|
||||
ibpShow: false,
|
||||
panelShow: true,
|
||||
ibpPart: '',
|
||||
showStation: '',
|
||||
centralizedstationList: [],
|
||||
showSelectStation: false, // 宁波线集中站 显示
|
||||
mapViewLoadedOver: false,
|
||||
dataError: false,
|
||||
isAdmin: false,
|
||||
deviceif:false,
|
||||
deviceShow: true,
|
||||
centralizedStationMap: {},
|
||||
selfJmap: null,
|
||||
showMap: false
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapGetters([
|
||||
'canvasWidth'
|
||||
]),
|
||||
...mapGetters('map', [
|
||||
'map',
|
||||
'bigScreenConfig',
|
||||
'stationList',
|
||||
'sectionList',
|
||||
'signalList',
|
||||
'trainList',
|
||||
'trainWindowList'
|
||||
]),
|
||||
width() {
|
||||
return this.$store.state.app.width;
|
||||
},
|
||||
height() {
|
||||
return this.$store.state.app.height;
|
||||
},
|
||||
userId() {
|
||||
return this.$store.state.user ? this.$store.state.user.id : '';
|
||||
},
|
||||
prdType() {
|
||||
return this.$store.state.training.prdType;
|
||||
},
|
||||
project() {
|
||||
return getSessionStorage('project');
|
||||
},
|
||||
specialDispatch() {
|
||||
return (this.lineCode === '14' && this.$store.state.training.prdType === '02') || (this.lineCode === '16' && this.$store.state.training.prdType === '02' && !this.showMap);
|
||||
},
|
||||
isRunPlan() {
|
||||
return this.$store.state.training.started;
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
'$store.state.config.menuBarLoadedCount': function (val) { // menuBar加载完成
|
||||
this.setPosition();
|
||||
},
|
||||
'$store.state.menuOperation.selectedCount':function(em) {
|
||||
const device = this.$store.state.menuOperation.selected;
|
||||
if (device && device._type === 'Station' && this.$store.state.menuOperation.subType === 'troButton') {
|
||||
this.$refs.troDialog.doClose();
|
||||
this.$refs.troDetail.doShow(device.code);
|
||||
}
|
||||
},
|
||||
'$store.state.training.prdType': function (prdType) {
|
||||
this.setPosition();
|
||||
if (prdType == '01') {
|
||||
this.showSelectStation = true;
|
||||
this.cancelBigScreenMode();
|
||||
} else if (prdType == '02') {
|
||||
this.showSelectStation = false;
|
||||
this.cancelBigScreenMode();
|
||||
} else if (prdType == '07') { // 大屏
|
||||
this.setBigScreenMode();
|
||||
} else {
|
||||
this.cancelBigScreenMode();
|
||||
}
|
||||
},
|
||||
'$store.state.map.mapDataLoadedCount':function(val) {
|
||||
const roleList = ['STATION_SUPERVISOR', 'STATION_ASSISTANT'];
|
||||
if (roleList.includes(this.$store.state.training.roles)) {
|
||||
const list = [];
|
||||
const mapDevice = this.$store.state.map.mapDevice;
|
||||
for (const key in mapDevice) {
|
||||
list.push(mapDevice[key]);
|
||||
}
|
||||
this.$jlmap.updateShowMode(list, '02');
|
||||
}
|
||||
},
|
||||
'$store.state.map.mapViewLoadedCount': function () { // 地图视图加载完成标识
|
||||
this.mapViewLoadedOver = true;
|
||||
this.showSelectStation && this.setShowStation(this.showStation);
|
||||
// this.initMemberUserInfo();
|
||||
if (this.$route.query.type === 'VR_PSD') {
|
||||
this.deviceif = true;
|
||||
this.deviceShow = true;
|
||||
}
|
||||
if (this.$route.query.type === 'DRIVE') {
|
||||
this.$store.dispatch('training/setPrdType', '04');
|
||||
this.$store.dispatch('training/setRoles', 'DRIVER');
|
||||
this.hidepanel();
|
||||
}
|
||||
},
|
||||
// '$store.state.socket.memberChangeCount': function () { // 仿真成员变更
|
||||
// this.initMemberUserInfo();
|
||||
// },
|
||||
'$store.state.socket.permissionOver': function () {
|
||||
this.$alert(this.$t('tip.userRightsHaveBeenReclaimed'), this.$t('tip.hint'), {
|
||||
confirmButtonText: this.$t('global.confirm'),
|
||||
showClose: false,
|
||||
callback: async (action) => {
|
||||
await this.$store.dispatch('training/over');
|
||||
await clearSimulation(this.group);
|
||||
this.$router.go(-1);
|
||||
}
|
||||
});
|
||||
},
|
||||
'$store.state.app.windowSizeCount': function() { // 窗口变化
|
||||
this.setWindowSize();
|
||||
this.setPosition();
|
||||
},
|
||||
$route() {
|
||||
this.initLoadData();
|
||||
},
|
||||
'$store.state.map.map': function (map) {
|
||||
if (map) {
|
||||
this.setCentralizedstationList(map); // 获取集中站列表
|
||||
}
|
||||
},
|
||||
'$store.state.socket.simulationRoleList':function(list) {
|
||||
if (list && list.length) { // 人员变化监控
|
||||
this.checkRoleChange(list);
|
||||
}
|
||||
},
|
||||
'$store.state.socket.ticketInfo': function(val) {
|
||||
if (val) {
|
||||
this.$refs.ticketInfo.doShow(val);
|
||||
}
|
||||
}
|
||||
},
|
||||
async created() {
|
||||
this.group = this.$route.query.group;
|
||||
this.mapId = this.$route.query.mapId;
|
||||
this.lineCode = this.$route.query.lineCode;
|
||||
Message.closeAll();
|
||||
},
|
||||
async mounted() {
|
||||
await this.setWindowSize();
|
||||
await this.initLoadData();
|
||||
this.selfJmap = Vue.prototype.$jlmap;
|
||||
},
|
||||
async beforeDestroy() {
|
||||
await this.$store.dispatch('training/end', null);
|
||||
await this.$store.dispatch('training/reset');
|
||||
await this.$store.dispatch('map/mapClear');
|
||||
await this.$store.dispatch('menuOperation/resetRequestList');
|
||||
this.$store.dispatch('training/setUserRole', '');
|
||||
Message.closeAll();
|
||||
},
|
||||
methods: {
|
||||
// 设置菜单和工具栏位置
|
||||
setPosition() {
|
||||
this.$nextTick(() => {
|
||||
this.offset = 10;
|
||||
this.offsetBottom = 15;
|
||||
const menuBar = document.getElementById('menuBar');
|
||||
const menuTool = document.getElementById('menuTool');
|
||||
const menuBottom = document.getElementById('menuButton');
|
||||
if (menuBar) {
|
||||
this.offset = (menuBar.offsetHeight || 0) + 15;
|
||||
}
|
||||
if (menuTool) {
|
||||
this.offset = (menuTool.offsetHeight || 0) + 15;
|
||||
}
|
||||
const buttonWidth = this.width - 1200;
|
||||
if (menuBottom && buttonWidth < 780) {
|
||||
this.offsetBottom = (menuBottom.offsetHeight || 0) + 15;
|
||||
}
|
||||
if (this.$route.query.lineCode === '16' && this.$store.state.training.prdType === '02') {
|
||||
this.offset = 35;
|
||||
}
|
||||
});
|
||||
},
|
||||
// 结束加载状态
|
||||
endViewLoading(isSuccess) {
|
||||
if (!isSuccess) {
|
||||
this.$store.dispatch('map/mapClear');
|
||||
}
|
||||
this.$nextTick(() => {
|
||||
EventBus.$emit('viewLoading', false);
|
||||
});
|
||||
},
|
||||
setCenter(code) {
|
||||
this.$jlmap.setCenter(code);
|
||||
},
|
||||
// 加载地图数据
|
||||
initLoadData() {
|
||||
const width = document.documentElement.clientWidth;
|
||||
const height = document.documentElement.clientHeight + 200;
|
||||
this.$store.dispatch('config/resize', { width, height });
|
||||
|
||||
try {
|
||||
this.loadSimulationInfo();
|
||||
this.initLoadDemonData();
|
||||
} catch (error) {
|
||||
this.$messageBox( this.$t('error.initializationFailed') + error.message);
|
||||
this.endViewLoading();
|
||||
}
|
||||
},
|
||||
// initMemberUserInfo() {
|
||||
// // 获取仿真成员列表
|
||||
// getSimulationMemberList(this.$route.query.group).then(resp => {
|
||||
// this.$store.dispatch('training/setMemberList', { memberList: resp.data, userId: this.$store.state.user.id });
|
||||
// }).catch(() => {
|
||||
// this.$messageBox('获取仿真成员列表失败！');
|
||||
// });
|
||||
// getAllSimulationUser(this.$route.query.group).then(resp => {
|
||||
// this.$store.dispatch('training/setSimulationUserList', resp.data);
|
||||
// }).catch(() => {
|
||||
// this.$messageBox('获取所有仿真用户失败！');
|
||||
// });
|
||||
// },
|
||||
devicemodel() {
|
||||
if (this.deviceif == false) {
|
||||
this.deviceif = true;
|
||||
} else {
|
||||
if (this.deviceShow == false) {
|
||||
this.deviceShow = true;
|
||||
} else {
|
||||
this.deviceShow = false;
|
||||
}
|
||||
}
|
||||
|
||||
},
|
||||
/* 地图根据仿真group获取仿真基础信息 */
|
||||
async loadSimulationInfo() {
|
||||
const resp = await getSimulationInfoNew(this.group);
|
||||
if (resp && resp.code == 200 && resp.data && !resp.data.dataError) {
|
||||
this.$store.dispatch('scriptRecord/updateSimulationPause', resp.data.pause);// 设置剧本暂停装填
|
||||
this.$store.dispatch('training/setInitTime', resp.data.systemTime);// 设置仿真时间
|
||||
// this.$store.dispatch('training/countTime');// 前端仿真时间开始跑秒
|
||||
this.$store.dispatch('runPlan/setRunPlanInfo', resp.data.runPlan);
|
||||
if (resp.data.planRunning) {
|
||||
this.$store.dispatch('training/start');// 仿真开始按计划行车
|
||||
} else {
|
||||
this.$store.dispatch('training/over');// 仿真按计划行车结束
|
||||
}
|
||||
this.$store.dispatch('training/changeMode', {mode:TrainingMode.NORMAL}); // 设置教学模式以便操作顺利执行
|
||||
this.$store.dispatch('training/changeOperateMode', { mode: OperateMode.NORMAL }); // 默认为正常模式
|
||||
} else if (resp && resp.code == 200 && resp.data && resp.data.dataError) {
|
||||
this.dataError = true;
|
||||
this.$messageBox('此地图数据正在维护中,无法运行！');
|
||||
}
|
||||
},
|
||||
/* 获取个人仿真信息*/
|
||||
async getUserRole() {
|
||||
const res = await getSimulationUserInfo(this.group);
|
||||
const data = res.data || {};
|
||||
this.userRole = data.type || 'AUDIENCE';
|
||||
this.deviceCode = data.deviceCode;
|
||||
this.$store.dispatch('training/setRoleDeviceCode', data.deviceCode);
|
||||
this.isAdmin = data.admin;
|
||||
|
||||
const deviceVO = JSON.parse(getSessionStorage('projectDevice'));
|
||||
if (deviceVO && deviceVO.type === 'VR_IBP') {
|
||||
const config = JSON.parse(deviceVO.config);
|
||||
this.ibpPart = config.part.toLowerCase();
|
||||
this.showIbp(this.deviceCode);
|
||||
} else {
|
||||
this.hideIbp();
|
||||
}
|
||||
return res;
|
||||
},
|
||||
// 仿真系统
|
||||
async initLoadDemonData() {
|
||||
if (this.lineCode) {
|
||||
let resp = {data: {}};
|
||||
resp = await this.getUserRole();
|
||||
if (resp && resp.code == 200) {
|
||||
this.setSimulationPrdType(resp.data.deviceCode);
|
||||
}
|
||||
loadMapDataById(this.mapId, 'simulation');
|
||||
} else {
|
||||
this.endViewLoading();
|
||||
}
|
||||
},
|
||||
handleDialogShow(type) {
|
||||
this.$refs[type].doShow();
|
||||
},
|
||||
stationRoleShow(deviceCode) {
|
||||
if (this.lineCode === '14') {
|
||||
const list = [];
|
||||
const mapDevice = this.$store.state.map.mapDevice;
|
||||
this.$jlmap.setMap(this.$store.state.map.map, this.$store.state.map.mapDevice, {routeData:this.$store.state.map.routeData, autoReentryData: this.$store.state.map.autoReentryData});
|
||||
for (const key in mapDevice) {
|
||||
list.push(mapDevice[key]);
|
||||
}
|
||||
this.$jlmap.updateShowMode(list, '02');
|
||||
}
|
||||
if (this.$store.state.map.map && this.$store.state.map.map.pictureList) {
|
||||
const picture = this.$store.state.map.map.pictureList.find(picture => picture.stationCodes && picture.stationCodes.includes(deviceCode) && picture.type === 'chainStation');
|
||||
if (picture) {
|
||||
const mapDevice = this.$store.state.map.mapDevice;
|
||||
const list = [];
|
||||
const deviceList = [];
|
||||
for (const key in mapDevice) {
|
||||
list.push(mapDevice[key]);
|
||||
deviceList.push(key);
|
||||
}
|
||||
this.$jlmap.updateShowStation(list, '');
|
||||
this.$store.dispatch('map/setPictureDeviceMap', picture.deviceMap);
|
||||
this.$jlmap.updatePicture(deviceList);
|
||||
this.$jlmap.updateTransform(picture.scaling, picture.origin);
|
||||
this.$store.dispatch('map/setShowCentralizedStationCode', this.centralizedStationMap[deviceCode]);
|
||||
} else {
|
||||
this.$jlmap.amendDevice([...this.sectionList, ...this.signalList, ...this.trainWindowList]);
|
||||
this.mapViewLoadedOver && this.switchStationMode(deviceCode);
|
||||
}
|
||||
} else {
|
||||
this.$jlmap.amendDevice([...this.sectionList, ...this.signalList, ...this.trainWindowList]);
|
||||
this.mapViewLoadedOver && this.switchStationMode(deviceCode);
|
||||
}
|
||||
},
|
||||
// 设置prdType和role
|
||||
setSimulationPrdType(deviceCode) {
|
||||
// Dispatcher 行调 STATION_SUPERVISOR 车站 Audience 观众 Driver 司机 MAINTAINER 通号
|
||||
this.showStation = '';
|
||||
let tempData;
|
||||
let dataZoom;
|
||||
switch (this.userRole) {
|
||||
case 'DISPATCHER':
|
||||
this.$store.dispatch('training/setPrdType', '02');
|
||||
this.$store.dispatch('training/setRoles', 'DISPATCHER');
|
||||
this.hideIbp();
|
||||
this.drivingShow = false;
|
||||
// this.changePrdType('02');
|
||||
this.$jlmap.amendDevice([...this.sectionList, ...this.signalList, ...this.trainWindowList]);
|
||||
this.mapViewLoadedOver && this.setShowStation('');
|
||||
this.jl3dmaintainershow = false;
|
||||
break;
|
||||
case 'STATION_SUPERVISOR':
|
||||
if (this.selfJmap) { Vue.prototype.$jlmap = this.selfJmap; }
|
||||
this.$store.dispatch('training/setPrdType', '01');
|
||||
this.$store.dispatch('training/setRoles', 'STATION_SUPERVISOR');
|
||||
this.$refs.menuSchema.chiShowStation = deviceCode;
|
||||
this.showStation = deviceCode;
|
||||
// this.changePrdType('01');
|
||||
this.stationRoleShow(deviceCode);
|
||||
this.jl3dmaintainershow = false;
|
||||
this.drivingShow = false;
|
||||
break;
|
||||
case 'STATION_ASSISTANT':
|
||||
if (this.selfJmap) { Vue.prototype.$jlmap = this.selfJmap; }
|
||||
this.$store.dispatch('training/setPrdType', '01');
|
||||
this.$store.dispatch('training/setRoles', 'STATION_ASSISTANT');
|
||||
this.$refs.menuSchema.chiShowStation = deviceCode;
|
||||
this.showStation = deviceCode;
|
||||
this.stationRoleShow(deviceCode);
|
||||
this.jl3dmaintainershow = false;
|
||||
this.drivingShow = false;
|
||||
break;
|
||||
case 'DEPOT_DISPATCHER':
|
||||
this.$store.dispatch('training/setPrdType', '09');
|
||||
this.$store.dispatch('training/setRoles', 'DEPOT_DISPATCHER');
|
||||
this.$refs.menuSchema.chiShowStation = deviceCode;
|
||||
this.showStation = deviceCode;
|
||||
this.$jlmap.amendDevice([...this.sectionList, ...this.signalList, ...this.trainWindowList]);
|
||||
if (this.mapViewLoadedOver) {
|
||||
const showStation = this.centralizedStationMap[deviceCode];
|
||||
const list = [];
|
||||
const mapDevice = this.$store.state.map.mapDevice;
|
||||
for (const key in mapDevice) {
|
||||
list.push(mapDevice[key]);
|
||||
}
|
||||
this.$jlmap.updateShowStation(list, showStation);
|
||||
}
|
||||
tempData = this.$store.state.map.map.displayList.find(item => { return item.stationCodeList.includes(deviceCode); });
|
||||
dataZoom = { offsetX: tempData.offsetX, offsetY: tempData.offsetY, scaleRate: tempData.scaleRate };
|
||||
this.$store.commit('map/setDataZoom', dataZoom);
|
||||
this.$jlmap.setDepot(dataZoom);
|
||||
this.jl3dmaintainershow = false;
|
||||
this.drivingShow = false;
|
||||
break;
|
||||
case 'DRIVER':
|
||||
this.$store.dispatch('training/setPrdType', '04');
|
||||
this.$store.dispatch('training/setRoles', 'DRIVER');
|
||||
this.jl3dmaintainershow = false;
|
||||
this.hidepanel();
|
||||
this.mapViewLoadedOver && this.setShowStation('');
|
||||
break;
|
||||
case 'MAINTAINER':
|
||||
this.$store.dispatch('training/setPrdType', '');
|
||||
this.$store.dispatch('training/setRoles', 'MAINTAINER');
|
||||
this.hideIbp();
|
||||
this.jl3dmaintainershow = true;
|
||||
this.mapViewLoadedOver && this.setShowStation('');
|
||||
this.drivingShow = false;
|
||||
break;
|
||||
case 'RAIL_CTC':
|
||||
this.$store.dispatch('training/setPrdType', '10');
|
||||
this.$store.dispatch('training/setRoles', 'RAIL_CTC');
|
||||
this.$refs.menuSchema.chiShowStation = deviceCode;
|
||||
this.showStation = deviceCode;
|
||||
this.$jlmap.amendDevice([...this.sectionList, ...this.signalList, ...this.trainWindowList]);
|
||||
this.mapViewLoadedOver && this.switchStationMode(deviceCode);
|
||||
this.jl3dmaintainershow = false;
|
||||
this.drivingShow = false;
|
||||
break;
|
||||
default:
|
||||
this.$store.dispatch('training/setPrdType', '');
|
||||
this.$store.dispatch('training/setRoles', 'AUDIENCE');
|
||||
this.jl3dmaintainershow = false;
|
||||
this.drivingShow = false;
|
||||
this.hideIbp();
|
||||
this.mapViewLoadedOver && this.setShowStation('');
|
||||
}
|
||||
if (this.$route.query.type === 'ILW') {
|
||||
this.$store.dispatch('training/setPrdType', '');
|
||||
this.$store.dispatch('training/setRoles', 'AUDIENCE');
|
||||
this.jl3dmaintainershow = false;
|
||||
this.drivingShow = false;
|
||||
this.hideIbp();
|
||||
}
|
||||
},
|
||||
async getTrainDetail() {
|
||||
try {
|
||||
// await loadNewMapDataByGroup(this.group);
|
||||
await loadMapDataById(this.mapId, 'Group');
|
||||
await this.$store.dispatch('training/setMapDefaultState');
|
||||
// if (this.userRole == 'MAINTAINER') {
|
||||
// this.jl3dmaintainershow = true;
|
||||
// }
|
||||
} catch (error) {
|
||||
this.$messageBox(this.$t('error.getMapDataFailed'));
|
||||
this.endViewLoading();
|
||||
}
|
||||
},
|
||||
back() {
|
||||
this.$refs.demonMenu.back();
|
||||
},
|
||||
runPlanLoadShow() { // 运行图加载
|
||||
this.$refs.runPlanLoad.doShow();
|
||||
},
|
||||
faultChooseShow() { // 故障列表加载
|
||||
this.$refs.faultChoose.doShow();
|
||||
},
|
||||
passflow() {
|
||||
const routeData = this.$router.resolve({
|
||||
path:'/jlmap3d/passengerflow',
|
||||
query:{
|
||||
mapid:this.mapId,
|
||||
group:this.group,
|
||||
project: this.project,
|
||||
lineCode:this.lineCode,
|
||||
noPreLogout: true
|
||||
}
|
||||
});
|
||||
window.open(routeData.href, '_blank');
|
||||
},
|
||||
faultdevice() {
|
||||
const routeData = this.$router.resolve({
|
||||
path:'/jlmap3d/maintainer',
|
||||
query:{
|
||||
mapid:this.mapId,
|
||||
group:this.group,
|
||||
project: this.project,
|
||||
noPreLogout: true
|
||||
}
|
||||
});
|
||||
window.open(routeData.href, '_blank');
|
||||
},
|
||||
showdriving() {
|
||||
this.panelShow = true;
|
||||
this.drivingShow = false;
|
||||
this.ibpShow = false;
|
||||
},
|
||||
showIbp(deviceCode) {
|
||||
this.drivingShow = false;
|
||||
this.panelShow = false;
|
||||
this.ibpShow = true;
|
||||
this.$refs.ibpPlate.show(deviceCode, this.ibpPart);
|
||||
},
|
||||
hidejl3dcctv() {
|
||||
const routeData = this.$router.resolve({
|
||||
path:'/jlmap3d/passengerflow',
|
||||
query:{
|
||||
mapid:this.mapId,
|
||||
group:this.group,
|
||||
project: this.project,
|
||||
noPreLogout: true
|
||||
}
|
||||
});
|
||||
window.open(routeData.href, '_blank');
|
||||
},
|
||||
hidepanel() { // 司机视角
|
||||
if (this.$store.state.training.prdType == '04') {
|
||||
this.panelShow = false;
|
||||
this.drivingShow = true;
|
||||
this.$refs.Jl3dDrive.show(this.mapId, this.group, 34, 'isTraining', this.deviceCode);
|
||||
} else {
|
||||
const routeData = this.$router.resolve({
|
||||
path:'/jlmap3d/sandbox',
|
||||
query:{
|
||||
mapid: this.mapId,
|
||||
group: this.group,
|
||||
token: getToken(),
|
||||
project: this.project,
|
||||
noPreLogout: true
|
||||
}
|
||||
});
|
||||
window.open(routeData.href, '_blank');
|
||||
}
|
||||
},
|
||||
|
||||
hideIbp() {
|
||||
Message.closeAll();
|
||||
this.jl3dmaintainershow = false;
|
||||
this.panelShow = true;
|
||||
this.ibpShow = false;
|
||||
if (this.$refs && this.$refs.ibpPlate) {
|
||||
this.$refs.ibpPlate.ibpDestroy();
|
||||
}
|
||||
},
|
||||
messageInfo(message, type) {
|
||||
this.$message({
|
||||
showClose: true,
|
||||
message: message,
|
||||
type: type
|
||||
});
|
||||
},
|
||||
setWindowSize() {
|
||||
this.$store.dispatch('config/resize', { width: this.width, height: this.height });
|
||||
if (this.prdType == '07') {
|
||||
this.setBigScreenMode();
|
||||
}
|
||||
},
|
||||
switchStationMode(stationCode) {
|
||||
this.showStation = this.centralizedStationMap[stationCode];
|
||||
this.setShowStation(this.showStation);
|
||||
},
|
||||
// changePrdType(val) {
|
||||
// const nameList = Object.keys(this.$store.state.map.map || {});
|
||||
// let list = []; let showMode = '';
|
||||
// nameList.forEach(item => {
|
||||
// if (item !== 'skinVO') {
|
||||
// const data = this.$store.state.map.map[item];
|
||||
// if (data && data.constructor === Array) {
|
||||
// list = [...list, ...data];
|
||||
// }
|
||||
// }
|
||||
// });
|
||||
//
|
||||
// if (val === '01') {
|
||||
// showMode = '03';
|
||||
// } else if (val === '02') {
|
||||
// showMode = '02';
|
||||
// }
|
||||
//
|
||||
// this.$jlmap.updatePrdType(list, showMode, val);
|
||||
// },
|
||||
setShowStation(stationCode) {
|
||||
const showStation = this.centralizedStationMap[stationCode];
|
||||
const list = [];
|
||||
const mapDevice = this.$store.state.map.mapDevice;
|
||||
for (const key in mapDevice) {
|
||||
list.push(mapDevice[key]);
|
||||
}
|
||||
this.$jlmap.updateShowStation(list, showStation);
|
||||
this.$jlmap.setCenter(showStation);
|
||||
},
|
||||
setCentralizedstationList(map) {
|
||||
this.centralizedstationList = [];
|
||||
(map.stationList || []).forEach(item => {
|
||||
if (item.centralized) {
|
||||
this.centralizedstationList.push({value: item.code, name: item.name});
|
||||
this.centralizedStationMap[item.code] = item.code;
|
||||
item.chargeStationCodeList && item.chargeStationCodeList.length && item.chargeStationCodeList.forEach(ele => {
|
||||
this.centralizedStationMap[ele] = item.code;
|
||||
});
|
||||
}
|
||||
});
|
||||
if (this.centralizedstationList.length && !this.showStation) {
|
||||
this.showStation = this.centralizedstationList[0].value;
|
||||
}
|
||||
},
|
||||
setBigScreenMode() {
|
||||
if (this.bigScreenConfig.bigScreenSplitConfig.length) {
|
||||
const offsetList = this.bigScreenConfig.offsetList;
|
||||
const width = this.bigScreenConfig.width;
|
||||
const height = this.bigScreenConfig.height;
|
||||
const size = {
|
||||
width: this.$store.state.app.width * width,
|
||||
height: (this.$store.state.app.height - 60) * height,
|
||||
offsetY: 60,
|
||||
list: this.bigScreenConfig.bigScreenSplitConfig.map(ele => ele.position),
|
||||
offsetList: offsetList
|
||||
};
|
||||
this.$jlmap.off('zoom'); // 禁止缩放
|
||||
this.$jlmap.setUpdateScreen(size);
|
||||
}
|
||||
},
|
||||
cancelBigScreenMode() {
|
||||
this.$jlmap.on('zoom'); // 激活缩放
|
||||
this.$jlmap.setRevoverBigScreen(); // 设置默认缩放 位移
|
||||
},
|
||||
handlerMemberManage() {
|
||||
this.$refs.membersManage.doShow();
|
||||
},
|
||||
addSimulationMember() {
|
||||
this.$refs.addMember.doShow();
|
||||
},
|
||||
troClick() {
|
||||
this.$refs.troDialog.doShow();
|
||||
},
|
||||
openTrainTrunkDetail(index) {
|
||||
this.$refs.trainTrunkDetail.doShow(index);
|
||||
},
|
||||
changeShowMap(flag) {
|
||||
this.showMap = flag;
|
||||
},
|
||||
openTra() {
|
||||
this.$refs.traDialog.doShow();
|
||||
},
|
||||
checkRoleChange(data) {
|
||||
data.forEach(item => {
|
||||
if (item.messageType === 'KICK_OUT' && item.userId == this.userId) {
|
||||
this.$messageBox('您已经被请离房间！');
|
||||
this.$refs.demonMenu.back();
|
||||
} else if (item.messageType === 'PLAY_CHANGE' && item.userId == this.userId) {
|
||||
this.userRole = item.type || 'AUDIENCE';
|
||||
this.$store.dispatch('training/setRoleDeviceCode', item.deviceCode);
|
||||
this.$store.dispatch('training/setUserRole', this.userRole);
|
||||
this.deviceCode = item.deviceCode;
|
||||
this.setSimulationPrdType(this.centralizedStationMap[item.deviceCode]);
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style scoped lang="scss" rel="stylesheep/scss">
|
||||
.main {
|
||||
display: block;
|
||||
width: 100% !important;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
background: #000000;
|
||||
}
|
||||
</style>
|
||||
@ -1,138 +0,0 @@
|
||||
<template>
|
||||
<el-dialog
|
||||
v-dialogDrag
|
||||
:title="title"
|
||||
:visible.sync="dialogVisible"
|
||||
width="500px"
|
||||
:before-close="handleClose"
|
||||
center
|
||||
:close-on-click-modal="false"
|
||||
>
|
||||
<el-form ref="form" :model="formModel" label-width="120px" :rules="rules">
|
||||
<el-form-item label="添加仿真成员:" prop="type">
|
||||
<el-select v-model="formModel.type" placeholder="请选择" size="small">
|
||||
<el-option
|
||||
v-for="item in typeList"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item v-if="stationRoleList.includes(formModel.type)" label="值班车站:" prop="deviceCode">
|
||||
<el-select v-model="formModel.deviceCode" placeholder="请选择" size="small">
|
||||
<el-option
|
||||
v-for="item in filterStationList"
|
||||
:key="item.code"
|
||||
:label="item.name"
|
||||
:value="item.code"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="仿真成员名称:" prop="name">
|
||||
<el-input v-model="formModel.name" size="small" placeholder="请输入成员名称" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button type="primary" @click="doSave">{{ $t('global.confirm') }}</el-button>
|
||||
<el-button @click="handleClose">{{ $t('global.cancel') }}</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { addSimulationMember } from '@/api/jointSimulation';
|
||||
export default {
|
||||
name: 'AddMember',
|
||||
props: {
|
||||
stationList: {
|
||||
type: Array,
|
||||
required: true
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
dialogVisible: false,
|
||||
formModel: {
|
||||
type: '',
|
||||
name: '',
|
||||
deviceCode: ''
|
||||
},
|
||||
filterStationList: [],
|
||||
rules: {
|
||||
type: [
|
||||
{ required: true, message: '请选择显示位置', trigger: 'change' }
|
||||
],
|
||||
deviceCode: [
|
||||
{ required: true, message: '请选择值班车站', trigger: 'change' }
|
||||
]
|
||||
},
|
||||
stationRoleList:[
|
||||
'STATION_SUPERVISOR',
|
||||
'STATION_ASSISTANT',
|
||||
'STATION_MASTER',
|
||||
'STATION_SIGNALER',
|
||||
'STATION_PASSENGER',
|
||||
'STATION_SWITCH_MAN',
|
||||
'STATION_FACILITATOR',
|
||||
'STATION_WORKER',
|
||||
'DEVICE_MANAGER'
|
||||
],
|
||||
typeList: [
|
||||
{label: '行调', value: 'DISPATCHER'},
|
||||
{label: '通号', value: 'MAINTAINER'},
|
||||
{label: '车站值班员', value: 'STATION_SUPERVISOR'},
|
||||
{label: '车站助理', value: 'STATION_ASSISTANT'},
|
||||
{label: '车站站长', value: 'STATION_MASTER'},
|
||||
{label: '车站信号员', value: 'STATION_SIGNALER'},
|
||||
{label: '车站客运员', value: 'STATION_PASSENGER'},
|
||||
{label: '车站扳道员', value: 'STATION_SWITCH_MAN'},
|
||||
{label: '车站引导员', value: 'STATION_FACILITATOR'},
|
||||
{label: '车站工务工', value: 'STATION_WORKER'},
|
||||
{label: '设备管理员', value: 'DEVICE_MANAGER'},
|
||||
{label: '车务段段长', value: 'TRAIN_MASTER'}
|
||||
]
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
title() {
|
||||
return '添加仿真角色成员';
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
initData(row) {
|
||||
this.filterStationList = [];
|
||||
this.stationList.forEach(item => {
|
||||
if (!item.depot) {
|
||||
this.filterStationList.push(item);
|
||||
}
|
||||
});
|
||||
},
|
||||
doShow(row) {
|
||||
this.initData(row);
|
||||
this.dialogVisible = true;
|
||||
},
|
||||
doSave() {
|
||||
this.$refs.form.validate(() => {
|
||||
// if (this.formModel.type !== 'STATION_SUPERVISOR') { delete this.formModel.deviceCode; }
|
||||
if (!this.stationRoleList.includes(this.formModel.type)) { delete this.formModel.deviceCode; }
|
||||
addSimulationMember(this.formModel, this.$route.query.group).then(() => {
|
||||
this.$message.success('添加仿真角色成员成功！');
|
||||
this.handleClose();
|
||||
}).catch(() => {
|
||||
this.$message.error('添加仿真角色成员失败！');
|
||||
});
|
||||
});
|
||||
},
|
||||
handleClose() {
|
||||
this.dialogVisible = false;
|
||||
this.formModel = {
|
||||
type: '',
|
||||
name: '',
|
||||
deviceCode: ''
|
||||
};
|
||||
this.$refs.form.resetFields();
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@ -1,100 +0,0 @@
|
||||
<template>
|
||||
<div class="jointRoomMenu">
|
||||
<pop-menu ref="popMenu" :menu="menu" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import PopMenu from '@/components/PopMenu';
|
||||
import { DeviceMenu } from '@/scripts/ConstDic';
|
||||
import { kickOutMember } from '@/api/jointSimulation';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
PopMenu
|
||||
},
|
||||
props: {
|
||||
clickUserId: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
menuDisabled: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// menu: [{
|
||||
// label: this.$t('trainRoom.kickOutTheRoom'),
|
||||
// handler: this.kicked
|
||||
// }]
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
userId() {
|
||||
return this.$store.state.user ? this.$store.state.user.id : '';
|
||||
},
|
||||
position() {
|
||||
return this.$store.state.menuOperation.menuPosition;
|
||||
},
|
||||
menu() {
|
||||
return [{
|
||||
label: this.$t('trainRoom.kickOutTheRoom'),
|
||||
handler: this.kicked,
|
||||
disabled: this.menuDisabled
|
||||
}];
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
'$store.state.menuOperation.menuCount': function (val) {
|
||||
if (this.$store.getters['menuOperation/checkDialogIsOpen'](DeviceMenu.JointRoom)) {
|
||||
this.doShow();
|
||||
} else {
|
||||
this.doClose();
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.closeEvent();
|
||||
},
|
||||
beforeDestroy() {
|
||||
window.removeEventListener('click', this.doClose, false);
|
||||
},
|
||||
methods: {
|
||||
closeEvent() {
|
||||
window.addEventListener('click', this.doClose, false);
|
||||
},
|
||||
doShow() {
|
||||
this.closeEvent();
|
||||
if (this.userId != this.clickUserId) {
|
||||
if (this.$refs && this.$refs.popMenu) {
|
||||
this.$refs.popMenu.resetShowPosition(this.position);
|
||||
}
|
||||
}
|
||||
},
|
||||
doClose() {
|
||||
if (this.$refs && this.$refs.popMenu) {
|
||||
this.$refs.popMenu.close();
|
||||
}
|
||||
},
|
||||
async kicked() {
|
||||
try {
|
||||
await kickOutMember(this.$route.query.group, this.clickUserId);
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style rel="stylesheet/scss" lang="scss" scoped>
|
||||
/deep/ {
|
||||
.menu-item{
|
||||
background: #f1ecec;
|
||||
.pop-menu {
|
||||
background: #5F9EA0;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,157 +0,0 @@
|
||||
<template>
|
||||
<div class="member">
|
||||
<div class="member__head">
|
||||
<div class="member__head--title"> 仿真用户列表</div>
|
||||
<div class="member__head--notes"> {{ onlineNum }}/{{ members.length }}</div>
|
||||
</div>
|
||||
<div class="member__container">
|
||||
<el-input v-model="filterText" :placeholder="this.$t('global.enterNameToFilter')" clearable />
|
||||
<el-scrollbar class="member__container--list" wrap-class="scrollbar-wrapper" style="{height: calc(100% - 64px)}">
|
||||
<el-tree
|
||||
ref="tree"
|
||||
:data="filterMembers"
|
||||
:filter-node-method="handleFilterNode"
|
||||
:lazy="false"
|
||||
:props="defaultProps"
|
||||
@node-contextmenu="handleShowContextMenu"
|
||||
>
|
||||
<span slot-scope="{ node, data }">
|
||||
<span v-if="node.data.online" style="color: green;">{{ data.nickName + (data.admin? '【管理员】':'') + (data.referee? '【裁判员】':'') + (data.deviceVO? ` -- (${data.deviceVO.code})`:'') }}</span>
|
||||
<span v-else style="color: #ccc;">{{ data.nickName + (data.admin? '【管理员】':'') + (data.referee? '【裁判员】':'') + (data.deviceVO? ` -- (${data.deviceVO.code})`:'') }}</span>
|
||||
</span>
|
||||
</el-tree>
|
||||
</el-scrollbar>
|
||||
</div>
|
||||
<content-menu ref="menu" :click-user-id="clickUserId" :menu-disabled="menuDisabled" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { DeviceMenu } from '@/scripts/ConstDic';
|
||||
import ContentMenu from './content-menu';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
ContentMenu
|
||||
},
|
||||
props: {
|
||||
room: {
|
||||
type: Object,
|
||||
required: true
|
||||
},
|
||||
members: {
|
||||
type: Array,
|
||||
required: true
|
||||
},
|
||||
isAdmin: {
|
||||
type: Boolean,
|
||||
default() {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
filterText: '',
|
||||
clickUserId: '',
|
||||
menuDisabled: false,
|
||||
onlineNum: 1
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
defaultProps() {
|
||||
return { label: 'nickName' };
|
||||
},
|
||||
filterMembers() {
|
||||
return this.members.filter(e =>{ return e.nickName.includes(this.filterText); });
|
||||
},
|
||||
userId() {
|
||||
return this.$store.state.user ? this.$store.state.user.id : '';
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
members: {
|
||||
handler(n, o) {
|
||||
let num = 0;
|
||||
if (n && n.length) {
|
||||
n.forEach(item => {
|
||||
if (item.online) {
|
||||
num++;
|
||||
}
|
||||
});
|
||||
}
|
||||
this.onlineNum = num;
|
||||
},
|
||||
immediate: true,
|
||||
deep: true
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleFilterNode(value, data) {
|
||||
if (!value) return true;
|
||||
return data.name.indexOf(value) !== -1;
|
||||
},
|
||||
handleShowContextMenu(e, obj, node, vueElem) {
|
||||
e.preventDefault();
|
||||
const position = {
|
||||
x: e.clientX,
|
||||
y: e.clientY
|
||||
};
|
||||
if (this.isAdmin) {
|
||||
this.clickUserId = `${obj.userId || ''}`;
|
||||
this.menuDisabled = !!obj.deviceVO;
|
||||
this.$store.dispatch('menuOperation/setPopMenu', { position, menu: DeviceMenu.JointRoom });
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.member {
|
||||
background: #f0f0f0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
border: 1px solid #ccc;
|
||||
|
||||
&__head {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 0 10px;
|
||||
border-bottom: 1px solid #ccc;
|
||||
|
||||
&--title {
|
||||
padding:10px 0px;
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
&--notes {
|
||||
font-size: 16px;
|
||||
padding:10px 0px;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
}
|
||||
}
|
||||
|
||||
&__container {
|
||||
flex-grow: 1;
|
||||
height: 520px;
|
||||
&--list {
|
||||
background: #fff;
|
||||
height: calc(100% - 109px);
|
||||
border-bottom: 1px #ccc solid;
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
/deep/ {
|
||||
.member__container{
|
||||
height: calc(100% - 40px);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,484 +0,0 @@
|
||||
<template>
|
||||
<el-drawer
|
||||
title="仿真成员管理"
|
||||
:visible.sync="show"
|
||||
:direction="direction"
|
||||
:before-close="doClose"
|
||||
custom-class="drawer_box"
|
||||
size="43%"
|
||||
>
|
||||
<div class="room">
|
||||
<div class="room__container">
|
||||
<div style="width: 70%;height: calc(100% - 20px);">
|
||||
<div style="margin-left: 10px;margin-right: 10px;">
|
||||
<el-input v-model="queryMember" placeholder="请输入搜索人员">
|
||||
<el-button slot="append" icon="el-icon-search" />
|
||||
</el-input>
|
||||
<el-button @click="addMember">添加仿真成员</el-button>
|
||||
</div>
|
||||
<el-tree
|
||||
ref="tree"
|
||||
:data="treeData"
|
||||
:props="defaultProps"
|
||||
default-expand-all
|
||||
style="margin: 10px;margin-bottom: 0;border: 1px solid #ccc;overflow-y: auto;height: calc(100% - 120px);"
|
||||
:filter-node-method="filterNode"
|
||||
@node-click="handleNodeClick"
|
||||
>
|
||||
<span :id="data.id" slot-scope="{ data }" class="custom-tree-node">
|
||||
<span>{{ data.labelName }}</span>
|
||||
<span v-if="data.type">
|
||||
<el-select :key="data.id" v-model="data.userId" placeholder="请选择" clearable size="mini" @change="nodeMemberChange($event, data)">
|
||||
<el-option
|
||||
v-for="item in simulationUserList"
|
||||
:key="item.userId"
|
||||
:label="item.nickName"
|
||||
:value="item.userId"
|
||||
/>
|
||||
</el-select>
|
||||
</span>
|
||||
</span>
|
||||
</el-tree>
|
||||
</div>
|
||||
<e-members
|
||||
class="room__container--members"
|
||||
:room="room"
|
||||
:members="simulationUserList"
|
||||
:is-admin="isAdmin"
|
||||
style="height: 100%"
|
||||
@message="messageInfo"
|
||||
/>
|
||||
</div>
|
||||
<div class="room__footer" />
|
||||
</div>
|
||||
</el-drawer>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import eMembers from './e-members';
|
||||
import { EventBus } from '@/scripts/event-bus';
|
||||
import { assignUsersPlayRoles } from '@/api/jointSimulation';
|
||||
export default {
|
||||
name: 'MembersManage',
|
||||
components: {
|
||||
eMembers
|
||||
},
|
||||
props: {
|
||||
isAdmin: {
|
||||
type: Boolean,
|
||||
default() {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
show: false,
|
||||
direction: 'ltr',
|
||||
queryMember: '',
|
||||
room: {
|
||||
totalNum: 0,
|
||||
group: '',
|
||||
mapId: '',
|
||||
creatorId: '',
|
||||
creator: {
|
||||
nickName: ''
|
||||
},
|
||||
permissionRest: 0,
|
||||
permissionNum: 0,
|
||||
state: ''
|
||||
},
|
||||
defaultProps: {
|
||||
children: 'children',
|
||||
label: 'labelName'
|
||||
},
|
||||
simulationUserList: [],
|
||||
stationList: [],
|
||||
availableStationList:[],
|
||||
activeTrains: [],
|
||||
standList: [],
|
||||
doorList: [],
|
||||
memberData: {},
|
||||
treeData: [{
|
||||
labelName: '行调',
|
||||
children: []
|
||||
}, {
|
||||
labelName: '车站值班员',
|
||||
children: []
|
||||
}, {
|
||||
labelName: '司机',
|
||||
children: []
|
||||
}, {
|
||||
labelName: '通号',
|
||||
children: []
|
||||
}, {
|
||||
labelName: '车辆段',
|
||||
children: []
|
||||
}, {
|
||||
labelName: 'CTC操作员',
|
||||
children: []
|
||||
}, {
|
||||
labelName: '车站助理',
|
||||
children: []
|
||||
},
|
||||
{
|
||||
labelName: '车站站长',
|
||||
children: []
|
||||
},
|
||||
{
|
||||
labelName: '车站信号员',
|
||||
children: []
|
||||
},
|
||||
{
|
||||
labelName: '车站客运员',
|
||||
children: []
|
||||
},
|
||||
{
|
||||
labelName: '车站扳道员',
|
||||
children: []
|
||||
},
|
||||
{
|
||||
labelName: '车站引导员',
|
||||
children: []
|
||||
},
|
||||
{
|
||||
labelName: '车站工务工',
|
||||
children: []
|
||||
},
|
||||
{
|
||||
labelName: '设备管理员',
|
||||
children: []
|
||||
}
|
||||
]
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
height() {
|
||||
return this.$store.state.app.height - 130;
|
||||
},
|
||||
group() {
|
||||
return this.$route.query.group;
|
||||
},
|
||||
userId() {
|
||||
return this.$store.state.user ? this.$store.state.user.id : '';
|
||||
},
|
||||
username() {
|
||||
return this.$store.state.user.nickname;
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
queryMember(val) {
|
||||
this.$refs.tree.filter(val);
|
||||
},
|
||||
'$store.state.training.simulationUserList': function(val) {
|
||||
this.simulationUserList = val;
|
||||
},
|
||||
'$store.state.training.memberList': function (val) {
|
||||
if (val && val.length) {
|
||||
this.memberData = this.$store.state.training.memberData;
|
||||
const dispatcherList = [];
|
||||
const electricDispatcherList = [];
|
||||
const depotDispatcherList = [];
|
||||
const stationSupervisorList = [];
|
||||
const driverList = [];
|
||||
const maintainerList = [];
|
||||
const ctcOperatorList = [];
|
||||
const stationAssistantList = [];
|
||||
const stationMasterList = [];
|
||||
const stationSignalerList = [];
|
||||
const stationPassengerList = [];
|
||||
const stationSwitchManList = [];
|
||||
const stationFacilitatorList = [];
|
||||
const stationWorkerList = [];
|
||||
const deviceManagerList = [];
|
||||
const trainMasterList = [];
|
||||
val.forEach(item => {
|
||||
const device = this.$store.getters['map/getDeviceByCode'](item.deviceCode);
|
||||
switch (item.type) {
|
||||
case 'DISPATCHER':
|
||||
this.memberData[item.id].labelName = '行调' + (item.name || '');
|
||||
dispatcherList.push(this.memberData[item.id]);
|
||||
break;
|
||||
case 'ELECTRIC_DISPATCHER':
|
||||
this.memberData[item.id].labelName = '电力调度' + (item.name || '');
|
||||
electricDispatcherList.push(this.memberData[item.id]);
|
||||
break;
|
||||
case 'DEPOT_DISPATCHER':
|
||||
this.memberData[item.id].labelName = '车辆段信号楼' + (item.name || '');
|
||||
depotDispatcherList.push(this.memberData[item.id]);
|
||||
break;
|
||||
case 'STATION_SUPERVISOR':
|
||||
this.memberData[item.id].labelName = '值班员-' + device.name + (item.name ? `-${item.name }` : '');
|
||||
stationSupervisorList.push(this.memberData[item.id]);
|
||||
break;
|
||||
case 'DRIVER':
|
||||
this.memberData[item.id].labelName = '司机-列车' + item.deviceCode;
|
||||
driverList.push(this.memberData[item.id]);
|
||||
break;
|
||||
case 'MAINTAINER':
|
||||
this.memberData[item.id].labelName = '通号' + (item.name || '');
|
||||
maintainerList.push(this.memberData[item.id]);
|
||||
break;
|
||||
case 'RAIL_CTC':
|
||||
this.memberData[item.id].labelName = 'CTC操作员' + device.name;
|
||||
ctcOperatorList.push(this.memberData[item.id]);
|
||||
break;
|
||||
case 'STATION_ASSISTANT':
|
||||
this.memberData[item.id].labelName = '车站助理-' + device.name + (item.name ? `-${item.name }` : '');
|
||||
stationAssistantList.push(this.memberData[item.id]);
|
||||
break;
|
||||
case 'STATION_MASTER':
|
||||
this.memberData[item.id].labelName = '车站站长-' + device.name + (item.name ? `-${item.name }` : '');
|
||||
stationMasterList.push(this.memberData[item.id]);
|
||||
break;
|
||||
case 'STATION_SIGNALER':
|
||||
this.memberData[item.id].labelName = '车站信号员-' + device.name + (item.name ? `-${item.name }` : '');
|
||||
stationSignalerList.push(this.memberData[item.id]);
|
||||
break;
|
||||
case 'STATION_PASSENGER':
|
||||
this.memberData[item.id].labelName = '车站客运员-' + device.name + (item.name ? `-${item.name }` : '');
|
||||
stationPassengerList.push(this.memberData[item.id]);
|
||||
break;
|
||||
case 'STATION_SWITCH_MAN':
|
||||
this.memberData[item.id].labelName = '车站扳道员-' + device.name + (item.name ? `-${item.name }` : '');
|
||||
stationSwitchManList.push(this.memberData[item.id]);
|
||||
break;
|
||||
case 'STATION_FACILITATOR':
|
||||
this.memberData[item.id].labelName = '车站引导员-' + device.name + (item.name ? `-${item.name }` : '');
|
||||
stationFacilitatorList.push(this.memberData[item.id]);
|
||||
break;
|
||||
case 'STATION_WORKER':
|
||||
this.memberData[item.id].labelName = '车站工务工-' + device.name + (item.name ? `-${item.name }` : '');
|
||||
stationWorkerList.push(this.memberData[item.id]);
|
||||
break;
|
||||
case 'DEVICE_MANAGER':
|
||||
this.memberData[item.id].labelName = '设备管理员-' + device.name + (item.name ? `-${item.name }` : '');
|
||||
deviceManagerList.push(this.memberData[item.id]);
|
||||
break;
|
||||
case 'TRAIN_MASTER':
|
||||
// device.name;
|
||||
this.memberData[item.id].labelName = '车务段段长-' + (item.name ? `-${item.name }` : '');
|
||||
trainMasterList.push(this.memberData[item.id]);
|
||||
break;
|
||||
// DEVICE_MANAGER:'设备管理员' deviceManager
|
||||
}
|
||||
});
|
||||
this.treeData = [{
|
||||
labelName: '行调',
|
||||
id: 'dispatcher',
|
||||
children: dispatcherList
|
||||
}, {
|
||||
labelName: '车站值班员',
|
||||
id: 'stationSupervisor',
|
||||
children: stationSupervisorList
|
||||
}, {
|
||||
labelName: '司机',
|
||||
id: 'driver',
|
||||
children: driverList
|
||||
}, {
|
||||
labelName: '通号',
|
||||
id: 'maintainer',
|
||||
children: maintainerList
|
||||
}, {
|
||||
labelName: '车辆段信号楼',
|
||||
id: 'depotDispatcher',
|
||||
children: depotDispatcherList
|
||||
}, {
|
||||
labelName: '电力调度',
|
||||
id: 'electricDispatcher',
|
||||
children: electricDispatcherList
|
||||
}, {
|
||||
labelName: 'CTC操作员',
|
||||
id: 'ctcOperator',
|
||||
children: ctcOperatorList
|
||||
}, {
|
||||
labelName: '车站助理',
|
||||
id: 'stationAssistant',
|
||||
children: stationAssistantList
|
||||
},
|
||||
{
|
||||
labelName: '车站站长',
|
||||
id: 'stationMaster',
|
||||
children: stationMasterList
|
||||
},
|
||||
{
|
||||
labelName: '车站信号员',
|
||||
id: 'stationSignaler',
|
||||
children: stationSignalerList
|
||||
},
|
||||
{
|
||||
labelName: '车站客运员',
|
||||
id: 'stationPassenger',
|
||||
children: stationPassengerList
|
||||
},
|
||||
{
|
||||
labelName: '车站扳道员',
|
||||
id: 'stationSwitchMan',
|
||||
children: stationSwitchManList
|
||||
},
|
||||
{
|
||||
labelName: '车站引导员',
|
||||
id: 'stationFacilitator',
|
||||
children: stationFacilitatorList
|
||||
},
|
||||
{
|
||||
labelName: '车站工务工',
|
||||
id: 'stationWorker',
|
||||
children: stationWorkerList
|
||||
},
|
||||
{
|
||||
labelName: '设备管理员',
|
||||
id: 'deviceManager',
|
||||
children: deviceManagerList
|
||||
},
|
||||
{
|
||||
labelName: '车务段段长 ',
|
||||
id: 'trainMaster',
|
||||
children: trainMasterList
|
||||
}
|
||||
];
|
||||
EventBus.$emit('trainTicketMember', [...stationSupervisorList, ...stationAssistantList]);
|
||||
this.$nextTick(() => {
|
||||
if (this.$refs.tree) {
|
||||
this.$refs.tree.filter(this.queryMember);
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
'$store.state.map.activeTrainListChange': function () {
|
||||
this.activeTrains = [];
|
||||
const activeTrainList = this.$store.state.map.activeTrainList;
|
||||
if (activeTrainList && activeTrainList.length) {
|
||||
activeTrainList.forEach(groupNumber => {
|
||||
this.activeTrains.push(groupNumber);
|
||||
});
|
||||
}
|
||||
this.$refs.tree && this.$refs.tree.filter(this.queryMember);
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
},
|
||||
methods: {
|
||||
doShow() {
|
||||
this.show = true;
|
||||
this.memberData = this.$store.state.training.memberData;
|
||||
this.simulationUserList = this.$store.state.training.simulationUserList;
|
||||
this.$nextTick(() => {
|
||||
if (this.$refs.tree) {
|
||||
this.$refs.tree.filter(this.queryMember);
|
||||
}
|
||||
});
|
||||
},
|
||||
doClose() {
|
||||
this.show = false;
|
||||
},
|
||||
messageInfo(info) {
|
||||
this.$message({ showClose: true, ...info });
|
||||
},
|
||||
jumpInSimulation() {
|
||||
},
|
||||
clearSubscribe() {
|
||||
},
|
||||
handleNodeClick() {
|
||||
},
|
||||
nodeMemberChange(val, nodeData) {
|
||||
let user = '';
|
||||
this.simulationUserList.forEach(item => {
|
||||
if (val && item.userId === val) {
|
||||
user = item;
|
||||
} else if (!val && item.memberId === nodeData.id) {
|
||||
user = item;
|
||||
}
|
||||
});
|
||||
const data = [{userId: user.userId, memberId:val ? nodeData.id : ''}];
|
||||
const self = this;
|
||||
assignUsersPlayRoles(data, this.$route.query.group).then(resp => {
|
||||
this.$message.success('调整角色成员成功！');
|
||||
}).catch(() => {
|
||||
self.memberData[nodeData.id].userId = '';
|
||||
this.$message.error('调整角色成员失败！');
|
||||
});
|
||||
},
|
||||
addMember() {
|
||||
this.$emit('addSimulationMember');
|
||||
},
|
||||
filterNode(value, data) {
|
||||
let flag = false;
|
||||
if (this.memberData[data.id] && this.memberData[data.id].nickName) {
|
||||
flag = this.memberData[data.id].nickName.indexOf(value) !== -1;
|
||||
}
|
||||
let driverNoShow = true;
|
||||
if (data.type && data.type === 'DRIVER' && !this.activeTrains.includes(data.deviceCode)) {
|
||||
driverNoShow = false;
|
||||
}
|
||||
return (data.labelName.indexOf(value) !== -1 || flag) && driverNoShow;
|
||||
}
|
||||
// handlerMemberOnOff(data) {
|
||||
// this.$store.dispatch('training/updateMemberAndUser', { simulationUserList: data, userId: this.userId });
|
||||
// }
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.drawer_box{
|
||||
width: 800px;
|
||||
}
|
||||
.custom-tree-node {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
font-size: 14px;
|
||||
padding-right: 8px;
|
||||
margin: 2px;
|
||||
}
|
||||
.room {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
// display: flex;
|
||||
// flex-direction: column;
|
||||
box-sizing: border-box;
|
||||
background: #f0f0f0;
|
||||
|
||||
&__container {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-grow: 1;
|
||||
padding: 10px;
|
||||
|
||||
&--members {
|
||||
flex-shrink: 1;
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
&--roles {
|
||||
flex-grow: 5;
|
||||
flex-shrink: 5;
|
||||
}
|
||||
|
||||
&--chat {
|
||||
flex-basis: 360px;
|
||||
}
|
||||
}
|
||||
&__footer {
|
||||
height: 20px;
|
||||
}
|
||||
}
|
||||
/deep/ {
|
||||
.el-input--mini .el-input__inner {
|
||||
height: 24px;
|
||||
line-height: 24px;
|
||||
}
|
||||
.el-input-group {
|
||||
width: calc(100% - 146px);
|
||||
}
|
||||
.el-dialog__body {
|
||||
padding: 6px 20px;
|
||||
}
|
||||
.el-drawer__body{
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
@ -1,566 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<status-icon v-if="statusIconShow" ref="statusIcon" />
|
||||
<voice-chat-box v-if="!noChatBox && datie" :group="group" :user-role="userRole" />
|
||||
<chat-box v-if="!noChatBox && !datie" :group="group" :user-role="userRole" />
|
||||
<!-- 地图没有报错-->
|
||||
<!-- 地图错误判断 -->
|
||||
<div v-if="!dataError&&hasOneButton" class="display_top_draft" :style="{top: statusIconShow ? offset + 60 + 'px':offset+'px'}">
|
||||
<div class="btn_hover" @click="menuClick">菜单</div>
|
||||
<el-button-group ref="button_group_box" class="button_group_box" :style="`margin-left:-${btnWidth}px`">
|
||||
<!-- 设备视图 -->
|
||||
<el-button v-if="isShow3dmodel && isShowScheduling" size="small" @click="jumpjlmap3dmodel">{{ $t('display.demon.deviceView') }}</el-button>
|
||||
<!-- 三维视图 / 司机视角 -->
|
||||
<el-button v-if="isShowScheduling || isDriver || isDISPATCHER" size="small" @click="jumpjlmap3d">{{ jl3dname }}</el-button>
|
||||
<!-- cctv视图 -->
|
||||
<el-button v-if="isShowScheduling || isStationSupervisor" size="small" @click="jumpjl3dpassflow">{{ $t('display.demon.passengerflow') }}</el-button>
|
||||
<!-- 客流规划视图 -->
|
||||
<el-button v-if="project == 'bjd' && (isShowScheduling || isStationSupervisor)" size="small" @click="jumpjl3dtrafficplan">{{ $t('display.demon.trafficplantext') }}</el-button>
|
||||
<el-button v-if="project == 'bjd' && (isShowScheduling || isStationSupervisor)" size="small" @click="jumpjl3dtraffictrain">{{ $t('display.demon.traffictraintext') }}</el-button>
|
||||
|
||||
<el-button v-if="(isShowScheduling || isStationSupervisor)&&project !== 'bjd'" size="small" @click="jumpjl3dfaultdevice">{{ $t('display.demon.maintainer') }}</el-button>
|
||||
<!-- <el-button v-if="isAdmin" size="small" @click="otherVrView">VR第三人称视角</el-button> -->
|
||||
<el-button v-if="qrCodeShow" type="primary" size="small" @click="generateQrCode">生成二维码</el-button>
|
||||
<el-button v-if="memberManageShow" size="small" @click="memberManage">成员管理</el-button>
|
||||
<el-button v-if="deviceManageShow" size="small" @click="handleEquipment">设备管理</el-button>
|
||||
<el-button v-if="teachSystemShow" size="small" @click="handleTeach">教学系统</el-button>
|
||||
<el-button v-if="examSystemShow" size="small" @click="handleExam">考试系统</el-button>
|
||||
<el-button v-if="messageBoard" size="small" @click="messageBoardShow">留言板</el-button>
|
||||
<el-button v-if="!isLocal" size="small" @click="contectUs">联系方式</el-button>
|
||||
</el-button-group>
|
||||
</div>
|
||||
<div class="display-draft" :class="{'haerbin_btn_box': lineCode == '07'||lineCode=='14'}" :style="{bottom: offsetBottom + 'px'}">
|
||||
<el-button-group class="button-group-box">
|
||||
<template v-if="!dataError"> <!-- 地图错误判断 -->
|
||||
<template v-if="isAdmin && project != 'refereeJsxt' && $route.query.type !== 'ILW'">
|
||||
<!-- 按计划行车 -->
|
||||
<el-button v-if="project !== 'srsandbox' && !datie" type="success" :disabled="isDisable" size="small" @click="selectBeginTime">{{ $t('joinTraining.drivingByPlan') }}</el-button>
|
||||
<el-button v-if="isAdministrator && !datie" v-loading="pauseLoading" :type="simulationPaused?'warning':'primary'" size="small" @click="startOrPause">{{ simulationPaused?'开始':'暂停' }}</el-button>
|
||||
<el-button type="danger" size="small" @click="end">{{ $t('joinTraining.initialize') }}</el-button>
|
||||
</template>
|
||||
<template v-if="datie">
|
||||
<el-button type="primary" size="small" @click="modifySystemTime">修改系统时间</el-button>
|
||||
</template>
|
||||
</template>
|
||||
<el-button type="primary" :loading="backLoading" size="small" @click="back">退出</el-button>
|
||||
</el-button-group>
|
||||
</div>
|
||||
<qr-code ref="qrCode" />
|
||||
<set-time ref="setTime" @ConfirmSelectBeginTime="start" />
|
||||
<modify-time v-if="datie" ref="modifySysTime" />
|
||||
<equipment ref="equipment" />
|
||||
<contect-us ref="contectUs" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import QrCode from '@/components/QrCode';
|
||||
import StatusIcon from '@/views/components/StatusIcon/statusIcon';
|
||||
import ChatBox from '../chatView/chatBox';
|
||||
import voiceChatBox from '../chatView/voiceChatBox';
|
||||
import Equipment from '@/views/newMap/displayNew/demon/equipment';
|
||||
import SetTime from '@/views/newMap/displayNew/demon/setTime';
|
||||
import ModifyTime from '@/views/newMap/displayNew/demon/modifyTime';
|
||||
import { ranAsPlan, exitRunPlan, clearSimulation } from '@/api/simulation';
|
||||
import { exitFullscreen } from '@/utils/screen';
|
||||
import { getSimulationQrcode } from '@/api/jointSimulation';
|
||||
import { getSessionStorage } from '@/utils/auth';
|
||||
import { NoSimulationQrCodeList } from '@/scripts/ProjectConfig';
|
||||
import { getPublishLessonListByMapId } from '@/api/jmap/lesson';
|
||||
import { getPostByProjectCode } from '@/api/learn';
|
||||
import { ProjectCode } from '@/scripts/ProjectConfig';
|
||||
import ContectUs from '@/views/newMap/displayNew/dispatherContest/contectUs';
|
||||
import { simulationPause, simulationStart } from '@/api/rtSimulation';
|
||||
|
||||
export default {
|
||||
name: 'MenuDemonJoint',
|
||||
components: {
|
||||
ChatBox,
|
||||
voiceChatBox,
|
||||
QrCode,
|
||||
SetTime,
|
||||
ModifyTime,
|
||||
Equipment,
|
||||
ContectUs,
|
||||
StatusIcon
|
||||
},
|
||||
props: {
|
||||
group: {
|
||||
type: String,
|
||||
required: true
|
||||
},
|
||||
userRole: {
|
||||
type: String,
|
||||
required: true
|
||||
},
|
||||
deviceCode: {
|
||||
type: String,
|
||||
default() {
|
||||
return '';
|
||||
}
|
||||
},
|
||||
dataError: {
|
||||
type: Boolean,
|
||||
default() {
|
||||
return false;
|
||||
}
|
||||
},
|
||||
isAdmin: {
|
||||
type: Boolean,
|
||||
default() {
|
||||
return false;
|
||||
}
|
||||
},
|
||||
offset: {
|
||||
type: Number,
|
||||
required: true
|
||||
},
|
||||
offsetBottom: {
|
||||
type: [String, Number],
|
||||
default: 15
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
backLoading: false,
|
||||
chatShow: true,
|
||||
pauseLoading: false,
|
||||
isGoback: false,
|
||||
noSimulationQrCodeList: NoSimulationQrCodeList,
|
||||
isShow3dmodel :false,
|
||||
jl3dname: this.$t('display.demon.threeDimensionalView'),
|
||||
hoverBtn: false,
|
||||
btnWidth: 0,
|
||||
messageBoard: false
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
lineCode() {
|
||||
return this.$route.query.lineCode;
|
||||
},
|
||||
datie() {
|
||||
return ['16', '19'].includes(this.$route.query.lineCode);
|
||||
},
|
||||
mapId() {
|
||||
return this.$route.query.mapId;
|
||||
},
|
||||
isShowScheduling() {
|
||||
// 行调与管理员 可显示
|
||||
return (this.$store.state.training.prdType == '02' || this.isAdmin) && (!this.$route.query.projectDevice) && !['16', '19'].includes(this.$route.query.lineCode);
|
||||
},
|
||||
isDISPATCHER() {
|
||||
return (this.$store.state.training.prdType == '01' || this.$store.state.training.prdType == '02' || this.isAdmin) && (!this.$route.query.projectDevice || this.project == 'sdy');
|
||||
},
|
||||
isStationSupervisor() {
|
||||
return (this.userRole == 'STATION_SUPERVISOR' && (!this.$route.query.projectDevice || this.project == 'sdy')) || this.project === 'gzb';
|
||||
},
|
||||
isDriver() {
|
||||
return this.userRole == 'DRIVER' && !this.$route.query.projectDevice;
|
||||
},
|
||||
project() {
|
||||
return getSessionStorage('project');
|
||||
},
|
||||
isProject() {
|
||||
return getSessionStorage('project') != 'login' && getSessionStorage('project') != 'design';
|
||||
},
|
||||
isLocal() { // 是否为本地项目
|
||||
return process.env.VUE_APP_PRO === 'local';
|
||||
},
|
||||
hasOneButton() {
|
||||
let num = 0;
|
||||
if ((this.isShow3dmodel && this.isShowScheduling) ||
|
||||
(this.isShowScheduling || this.isDriver) ||
|
||||
(this.isShowScheduling || this.isStationSupervisor) ||
|
||||
(this.isAdmin && !this.noSimulationQrCodeList.includes(this.project)) ||
|
||||
(this.isAdmin) || (this.isAdmin && this.isProject) || this.isDeviceLogin || this.$route.query.type === 'IM') {
|
||||
num++;
|
||||
}
|
||||
return num > 0;
|
||||
},
|
||||
isDeviceLogin() {
|
||||
const typeList = ['LW', 'CW'];
|
||||
return typeList.includes(this.$route.query.type);
|
||||
},
|
||||
examSystemShow() {
|
||||
const typeList = ['LW', 'CW', 'IM'];
|
||||
return typeList.includes(this.$route.query.type);
|
||||
},
|
||||
teachSystemShow() {
|
||||
const typeList = ['LW', 'CW'];
|
||||
return typeList.includes(this.$route.query.type);
|
||||
},
|
||||
memberManageShow() {
|
||||
return this.isAdmin && this.$route.query.type !== 'ILW';
|
||||
},
|
||||
deviceManageShow() {
|
||||
return (this.isAdmin && this.isProject) || this.$route.query.type === 'ILW';
|
||||
},
|
||||
qrCodeShow() {
|
||||
return this.isAdmin && !this.noSimulationQrCodeList.includes(this.project) && this.$route.query.type !== 'ILW';
|
||||
},
|
||||
isDisable() {
|
||||
return this.$store.state.training.started;
|
||||
},
|
||||
statusIconShow() {
|
||||
return (this.$route.query.lineCode == '11' || this.$route.query.lineCode == '10') && this.$store.state.training.prdType == '02';
|
||||
},
|
||||
isAdministrator() {
|
||||
return this.$store.state.user.roles.includes('04') || this.$store.state.user.roles.includes('05');
|
||||
},
|
||||
simulationPaused() {
|
||||
return this.$store.state.socket.simulationPause;
|
||||
},
|
||||
noChatBox() {
|
||||
return this.$route.query.type === 'ILW' || this.project.includes('srsandbox') || this.project.includes('jxgm');
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
'$store.state.socket.simulationOver':function(val) {
|
||||
if (val && this.project == 'refereeJsxt') {
|
||||
this.$router.go(-1);
|
||||
} else {
|
||||
if (!this.isGoback) {
|
||||
this.back();
|
||||
}
|
||||
}
|
||||
},
|
||||
'$store.state.training.prdType': function(prdType) {
|
||||
this.change3dname();
|
||||
},
|
||||
'$store.state.socket.simulationStart': async function (val) {
|
||||
if (val) {
|
||||
this.$store.dispatch('training/setInitTime', val);
|
||||
this.$store.dispatch('training/start');
|
||||
}
|
||||
}
|
||||
},
|
||||
async mounted() {
|
||||
this.change3dname();
|
||||
getPostByProjectCode(ProjectCode[this.project]).then(resp => {
|
||||
if (resp.data) {
|
||||
this.messageBoard = true;
|
||||
}
|
||||
}).catch(() => {
|
||||
this.$message.error('获取留言板信息失败');
|
||||
});
|
||||
this.$nextTick(() => {
|
||||
this.menuClick();
|
||||
});
|
||||
},
|
||||
async beforeDestroy() {
|
||||
// 返回 销毁仿真 重置状态
|
||||
this.isGoback = true;
|
||||
if (this.isAdmin) {
|
||||
await clearSimulation(this.group);
|
||||
}
|
||||
this.$store.dispatch('training/setMemberList', {memberList:[], userId: this.$store.state.user.id});
|
||||
this.$store.dispatch('training/setSimulationUserList', []);
|
||||
this.$store.dispatch('training/over').then(() => {
|
||||
this.backLoading = true;
|
||||
this.$store.dispatch('map/resetActiveTrainList', true);
|
||||
if (this.$route.query.projectDevice) {
|
||||
this.$store.dispatch('LogOut').then(() => {
|
||||
location.reload();
|
||||
});
|
||||
} else {
|
||||
exitFullscreen();
|
||||
}
|
||||
});
|
||||
},
|
||||
methods: {
|
||||
startOrPause() {
|
||||
this.pauseLoading = true;
|
||||
if (this.simulationPaused) {
|
||||
simulationStart(this.group).then(resp => {
|
||||
this.pauseLoading = false;
|
||||
}).catch(() => {
|
||||
this.pauseLoading = false;
|
||||
this.$messageBox('开始失败，请稍后再试');
|
||||
});
|
||||
} else {
|
||||
simulationPause(this.group).then(resp => {
|
||||
this.pauseLoading = false;
|
||||
}).catch(() => {
|
||||
this.pauseLoading = false;
|
||||
this.$messageBox('暂停失败，请稍后再试');
|
||||
});
|
||||
}
|
||||
},
|
||||
// 修改系统时间
|
||||
modifySystemTime() {
|
||||
this.$refs.modifySysTime.doShow();
|
||||
},
|
||||
selectBeginTime() {
|
||||
this.$refs.setTime.doShow();
|
||||
console.log(1);
|
||||
},
|
||||
// 开始仿真
|
||||
start(model) {
|
||||
const data = {
|
||||
time: model.initTime
|
||||
};
|
||||
ranAsPlan(data, this.group).then(res => {
|
||||
// this.$store.dispatch('training/setInitTime', model.initTime);
|
||||
this.$store.dispatch('training/setInitTime', model.timestamp);
|
||||
}).catch((error) => {
|
||||
if (error.code == '5001') {
|
||||
this.$messageBox(this.$t('error.mapDataError') + '，' + this.$t('error.startSimulationFailed'));
|
||||
} else if (error.code == '5002') {
|
||||
this.$messageBox(this.$t('error.runningChartDataError') + ',' + this.$t('error.startSimulationFailed'));
|
||||
} else if (error.code == '5003') {
|
||||
this.$messageBox(this.$t('error.runningChartIsNotLoaded') + ',' + this.$t('error.startSimulationFailed'));
|
||||
} else if (error.code == '5004') {
|
||||
this.$messageBox(this.$t('error.runningDataError') + ',' + this.$t('error.startSimulationFailed'));
|
||||
} else if (error.code == '5000') {
|
||||
this.$messageBox(this.$t('error.systemError') + ',' + this.$t('error.startSimulationFailed'));
|
||||
} else if (error.code == '4000') {
|
||||
this.$messageBox(this.$t('error.simulationDoesNotExist') + ',' + this.$t('error.startSimulationFailed'));
|
||||
} else if (error.code == '4001') {
|
||||
this.$messageBox(this.$t('error.simulationOperationIsNotDefined') + ',' + this.$t('error.startSimulationFailed'));
|
||||
} else if (error.code == '4002') {
|
||||
this.$messageBox(this.$t('error.simulationOperationProcessingMethodNotFound') + ',' + this.$t('error.startSimulationFailed'));
|
||||
} else if (error.code == '4003') {
|
||||
this.$messageBox(this.$t('error.simulationOperationFailed') + ',' + this.$t('error.startSimulationFailed'));
|
||||
} else if (error.code == '4004') {
|
||||
this.$messageBox(this.$t('error.operationConflict') + ',' + this.$t('error.startSimulationFailed'));
|
||||
}
|
||||
});
|
||||
},
|
||||
end() {
|
||||
exitRunPlan(this.group).then(()=>{
|
||||
this.$store.dispatch('map/clearJlmapTrainView');
|
||||
this.$store.dispatch('map/setTrainWindowShow', false);
|
||||
this.$store.dispatch('map/resetActiveTrainList', false);
|
||||
}).catch(() => {
|
||||
this.$store.dispatch('training/over').then(() => {
|
||||
this.$store.dispatch('map/resetActiveTrainList', false);
|
||||
this.$messageBox(this.$t('error.endSimulationFailed'));
|
||||
});
|
||||
});
|
||||
},
|
||||
handleEquipment() {
|
||||
this.$refs.equipment.doShow();
|
||||
},
|
||||
async back() {
|
||||
this.isGoback = true;
|
||||
if (this.isAdmin) {
|
||||
await clearSimulation(this.group);
|
||||
}
|
||||
this.$store.dispatch('training/setMemberList', {memberList:[], userId: this.$store.state.user.id});
|
||||
this.$store.dispatch('training/setSimulationUserList', []);
|
||||
this.$store.dispatch('training/over').then(() => {
|
||||
this.backLoading = true;
|
||||
this.$store.dispatch('map/resetActiveTrainList', true);
|
||||
if (this.$route.query.projectDevice) {
|
||||
this.$store.dispatch('LogOut').then(() => {
|
||||
location.reload();
|
||||
});
|
||||
} else {
|
||||
history.go(-1);
|
||||
exitFullscreen();
|
||||
}
|
||||
});
|
||||
},
|
||||
jumpjlmap3d() {
|
||||
this.$emit('hidepanel');
|
||||
},
|
||||
jlmap3dcctv() {
|
||||
this.$emit('hidejl3dcctv');
|
||||
},
|
||||
jumpjl3dpassflow() {
|
||||
this.$emit('passflow');
|
||||
},
|
||||
jumpjl3dtrafficplan() {
|
||||
const routeData = this.$router.resolve({
|
||||
path:'/jlmap3d/trafficplan',
|
||||
query:{
|
||||
mapid:this.mapId,
|
||||
group:this.group,
|
||||
project: this.project,
|
||||
noPreLogout: true,
|
||||
lineCode:this.lineCode
|
||||
}
|
||||
});
|
||||
window.open(routeData.href, '_blank');
|
||||
},
|
||||
jumpjl3dtraffictrain() {
|
||||
const routeData = this.$router.resolve({
|
||||
path:'/jlmap3d/traffictrain',
|
||||
query:{
|
||||
mapid:this.mapId,
|
||||
group:this.group,
|
||||
project: this.project,
|
||||
noPreLogout: true,
|
||||
lineCode:this.lineCode
|
||||
}
|
||||
});
|
||||
window.open(routeData.href, '_blank');
|
||||
},
|
||||
jumpjl3dfaultdevice() {
|
||||
this.$emit('faultdevice');
|
||||
},
|
||||
jumpjlmap3dmodel() {
|
||||
this.$emit('devicemodel');
|
||||
},
|
||||
otherVrView() {
|
||||
const routeData = this.$router.resolve({
|
||||
path:'/jlmap3d/othervr',
|
||||
query:{
|
||||
mapid:this.$route.query.mapId,
|
||||
group:this.$route.query.group,
|
||||
noPreLogout: true
|
||||
}
|
||||
});
|
||||
window.open(routeData.href);
|
||||
},
|
||||
memberManage() {
|
||||
this.$emit('handlerMemberManage');
|
||||
},
|
||||
generateQrCode() {
|
||||
getSimulationQrcode(this.$route.query.group).then(resp => {
|
||||
const param = {
|
||||
url: resp.data,
|
||||
title: this.$t('综合演练二维码'),
|
||||
group: this.$route.query.group
|
||||
};
|
||||
if (this.$refs) {
|
||||
this.$refs.qrCode.doShow(param);
|
||||
}
|
||||
}).catch(() => {
|
||||
this.$messageBox('仿真生成二维码失败！');
|
||||
});
|
||||
},
|
||||
change3dname() {
|
||||
if (this.$store.state.training.prdType == '04') {
|
||||
this.jl3dname = this.$t('display.demon.driverPerspective'); // 司机视角
|
||||
} else {
|
||||
this.jl3dname = this.$t('display.demon.threeDimensionalView'); // 三维视图
|
||||
this.isShow3dmodel = true;
|
||||
}
|
||||
},
|
||||
menuClick() {
|
||||
this.hoverBtn = !this.hoverBtn;
|
||||
if (this.hoverBtn) {
|
||||
this.btnWidth = 800;
|
||||
} else {
|
||||
this.btnWidth = 0;
|
||||
}
|
||||
},
|
||||
messageBoardShow() {
|
||||
const routeData = this.$router.resolve({
|
||||
path:'/messageBoard',
|
||||
query:{
|
||||
project: this.project,
|
||||
noPreLogout: true
|
||||
}
|
||||
});
|
||||
window.open(routeData.href, '_blank');
|
||||
},
|
||||
handleTeach() {
|
||||
getPublishLessonListByMapId({mapId: this.mapId}).then(resp => {
|
||||
const lesson = resp.data.find(item => {
|
||||
return (this.$route.query.type === 'LW' && item.prdType === '01') || (this.$route.query.type === 'CW' && item.prdType === '02');
|
||||
});
|
||||
if (lesson) {
|
||||
const routeData = this.$router.resolve({
|
||||
path:'/device/teachDetail',
|
||||
query:{
|
||||
lessonId: lesson.id,
|
||||
mapId:this.mapId,
|
||||
noPreLogout: true
|
||||
}
|
||||
});
|
||||
window.open(routeData.href, '_blank');
|
||||
} else {
|
||||
this.$message.error('暂无教学系统数据！');
|
||||
}
|
||||
}).catch(() => {
|
||||
this.$message.error('获取课程ID失败！');
|
||||
});
|
||||
},
|
||||
contectUs() {
|
||||
this.$refs.contectUs.doShow();
|
||||
},
|
||||
handleExam() {
|
||||
if (this.$route.query.type === 'IM') {
|
||||
const routeData = this.$router.resolve({
|
||||
path:'/device/examRule/manage',
|
||||
query:{
|
||||
mapId:this.mapId,
|
||||
noPreLogout: true
|
||||
}
|
||||
});
|
||||
window.open(routeData.href, '_blank');
|
||||
} else {
|
||||
let prdType = '';
|
||||
if (this.$route.query.type === 'LW') {
|
||||
prdType = '01';
|
||||
} else if (this.$route.query.type === 'CW') {
|
||||
prdType = '02';
|
||||
}
|
||||
if (prdType) {
|
||||
const routeData = this.$router.resolve({
|
||||
path:'/device/course',
|
||||
query:{
|
||||
prdType: prdType,
|
||||
mapId:this.mapId,
|
||||
noPreLogout: true
|
||||
}
|
||||
});
|
||||
window.open(routeData.href, '_blank');
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style rel="stylesheet/scss" lang="scss" scoped>
|
||||
@import "src/styles/mixin.scss";
|
||||
|
||||
.display-draft {
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
bottom: 28px;
|
||||
.button-group-box{
|
||||
float: right;
|
||||
}
|
||||
}
|
||||
.display_top_draft{
|
||||
position: absolute;
|
||||
left: 5px;
|
||||
top: 15px;
|
||||
height: 32px;
|
||||
overflow: hidden;
|
||||
padding-left: 44px;
|
||||
z-index: 35;
|
||||
.btn_hover{
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
z-index: 2;
|
||||
color: #4e4d4d;
|
||||
font-size: 14px;
|
||||
background: #fff;
|
||||
padding: 8px;
|
||||
border-radius: 5px;
|
||||
display: block;
|
||||
cursor: pointer;
|
||||
float: left;
|
||||
height: 32px;
|
||||
}
|
||||
.button_group_box{
|
||||
float: left;
|
||||
transition: all 0.5s;
|
||||
overflow: hidden;
|
||||
// transform: translateX(0px);
|
||||
margin-left: -500px;
|
||||
}
|
||||
}
|
||||
.haerbin_btn_box{
|
||||
width: 450px;
|
||||
bottom: 15px!important;
|
||||
}
|
||||
.display-type-hb{
|
||||
bottom: 105px;
|
||||
}
|
||||
</style>
|
||||
@ -1,94 +0,0 @@
|
||||
<template>
|
||||
<el-dialog
|
||||
v-dialogDrag
|
||||
:title="title"
|
||||
:visible.sync="show"
|
||||
width="400px"
|
||||
:before-close="doClose"
|
||||
:z-index="2000"
|
||||
:modal="false"
|
||||
:close-on-click-modal="false"
|
||||
append-to-body
|
||||
>
|
||||
<el-input v-model="filterText" placeholder="输入名称进行过滤" clearable />
|
||||
<ul v-if="filterList.length" class="listBox">
|
||||
<li v-for="item in filterList" :key="item" class="listLi">
|
||||
<el-radio v-model="selected" :label="item"><span>{{ item.name }}</span></el-radio>
|
||||
</li>
|
||||
</ul>
|
||||
<span v-else class="tipLable"> {{ $t('global.temporarilyNoData') }} </span>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button @click="doClose">{{ $t('global.cancel') }}</el-button>
|
||||
<el-button type="primary" :loading="loading" @click="commit">{{ $t('global.confirm') }}</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'CmdNotice',
|
||||
data() {
|
||||
return {
|
||||
dialogShow: false,
|
||||
title: '',
|
||||
props: {
|
||||
label: 'name'
|
||||
},
|
||||
sourceList: [],
|
||||
filterText: '',
|
||||
selected: '',
|
||||
loading: false
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
show() {
|
||||
return this.dialogShow;
|
||||
},
|
||||
filterList() {
|
||||
return this.sourceList.filter(p => p.name.indexOf(this.filterText) !== -1);
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
doShow(obj) {
|
||||
this.dialogShow = true;
|
||||
this.title = obj.title;
|
||||
this.sourceList = obj.list;
|
||||
this.selected = '';
|
||||
},
|
||||
doClose() {
|
||||
this.dialogShow = false;
|
||||
},
|
||||
commit() {
|
||||
this.$emit('setDriver', this.selected);
|
||||
this.doClose();
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
/deep/ {
|
||||
.el-dialog__body {
|
||||
padding: 0px 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.listBox {
|
||||
margin: 0px;
|
||||
max-height: 270px;
|
||||
overflow-y: auto;
|
||||
padding-inline-start: 0px;
|
||||
width: 100%;
|
||||
|
||||
.listLi {
|
||||
list-style: none;
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
.tipLable {
|
||||
line-height: 33px;
|
||||
}
|
||||
</style>
|
||||
@ -1,145 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<pop-menu ref="popMenu" :menu="menu" />
|
||||
<choose-role ref="chooseRole" @setDriver="setDriver" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import PopMenu from '@/components/PopMenu';
|
||||
import ChooseRole from './chooseRole';
|
||||
import { putUserRolesNew} from '@/api/jointTraining';
|
||||
import { DeviceMenu } from '@/scripts/ConstDic';
|
||||
|
||||
export default {
|
||||
name: 'OperateMenu',
|
||||
components: {
|
||||
PopMenu,
|
||||
ChooseRole
|
||||
},
|
||||
props: {
|
||||
group: {
|
||||
type: String,
|
||||
required: true
|
||||
},
|
||||
point: {
|
||||
type: Object,
|
||||
required: true
|
||||
},
|
||||
selected: {
|
||||
type: Object,
|
||||
required: true
|
||||
},
|
||||
driverList: {
|
||||
type: Array,
|
||||
required: true
|
||||
},
|
||||
driverMapDict: {
|
||||
type: Object,
|
||||
required: true
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
menuShow: false,
|
||||
menu: [
|
||||
{
|
||||
label: this.$t('joinTraining.chooseDriver'),
|
||||
handler: this.chooseDriver
|
||||
},
|
||||
{
|
||||
label: this.$t('joinTraining.cancelDriver'),
|
||||
handler: this.cancelDriver
|
||||
}
|
||||
]
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
'$store.state.menuOperation.menuCount': function (val) {
|
||||
if (this.$store.getters['menuOperation/checkDialogIsOpen'](DeviceMenu.SetDriver)) {
|
||||
this.doShow(this.$store.state.menuOperation.menuPosition);
|
||||
} else {
|
||||
this.doClose();
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.closeEvent();
|
||||
},
|
||||
methods: {
|
||||
closeEvent() {
|
||||
const self = this;
|
||||
window.onclick = function (e) {
|
||||
self.doClose();
|
||||
};
|
||||
},
|
||||
doShow(point) {
|
||||
this.closeEvent();
|
||||
if (this.$refs && this.$refs.popMenu) {
|
||||
this.$refs.popMenu.resetShowPosition(point);
|
||||
}
|
||||
this.menuShow = true;
|
||||
},
|
||||
doClose() {
|
||||
if (this.$refs && this.$refs.popMenu) {
|
||||
this.$refs.popMenu.close();
|
||||
}
|
||||
this.menuShow = false;
|
||||
},
|
||||
chooseDriver() {
|
||||
const arrs = Object.values(this.driverMapDict);
|
||||
const list = this.driverList.filter(elem => {
|
||||
let ret = true;
|
||||
arrs.forEach(item => {
|
||||
if (item.id == elem.id) {
|
||||
ret = false;
|
||||
}
|
||||
});
|
||||
return ret;
|
||||
});
|
||||
|
||||
this.$refs.chooseRole.doShow({ title: this.$t('joinTraining.chooseDriver'), list: list });
|
||||
},
|
||||
async setDriver(obj) {
|
||||
if (obj && this.selected) {
|
||||
const params = [{
|
||||
id: obj.id,
|
||||
nickName: obj.name,
|
||||
userRole: 'DRIVER',
|
||||
stationCode: '',
|
||||
trainCode: this.selected._code
|
||||
}];
|
||||
|
||||
await putUserRolesNew(params, this.group);
|
||||
}
|
||||
},
|
||||
async cancelDriver() {
|
||||
const data = this.driverMapDict[this.selected._code];
|
||||
if (data) {
|
||||
const params = [{
|
||||
id: data.id,
|
||||
nickName: data.name,
|
||||
userRole: 'DRIVER',
|
||||
stationCode: '',
|
||||
trainCode: ''
|
||||
}];
|
||||
|
||||
await putUserRolesNew(params, this.group);
|
||||
}
|
||||
},
|
||||
refresh() {
|
||||
this.$emit('refresh');
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style rel="stylesheet/scss" lang="scss" scoped>
|
||||
/deep/ {
|
||||
.menu-item{
|
||||
background: #f1ecec;
|
||||
.pop-menu {
|
||||
background: #5F9EA0;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,426 +0,0 @@
|
||||
<template>
|
||||
<div style="height:100%">
|
||||
<div class="schema" :style="{top: offset+'px'}">
|
||||
<!--<el-select v-if="showSelectStation" v-model="chiShowStation" style="width: 100px;" size="small" @change="switchStationMode">-->
|
||||
<!--<el-option v-for="item in stationList" :key="item.value" :label="item.name" :value="item.value" />-->
|
||||
<!--</el-select>-->
|
||||
<el-select v-if="isAdmin && isSystemAdmin" v-model="speed" style="width: 100px;" size="small" @change="speedChange">
|
||||
<el-option
|
||||
v-for="item in speedList"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
/>
|
||||
</el-select>
|
||||
<el-button-group>
|
||||
<el-button v-if="userRole=== 'STATION_SUPERVISOR'&&$route.query.lineCode ==='16'" size="small" @click="goCtc">车务终端</el-button>
|
||||
<el-button v-if="userRole=== 'STATION_SUPERVISOR'&&$route.query.lineCode ==='16'" size="small" @click="goRpManage">车务管理终端</el-button>
|
||||
<el-button v-if="$route.query.lineCode ==='16'&&$store.state.training.prdType === '01'" size="small" @click="showTrainTicket">路票</el-button>
|
||||
<el-button v-if="showRegisterBookBtn" size="small" @click="showRegisterBook">簿册</el-button>
|
||||
<el-button v-if="showDispatcherStation" size="small" @click="changeShowMap">调度台</el-button>
|
||||
<el-button v-if="ibpShow" size="small" @click="goIbp">IBP盘</el-button>
|
||||
<el-button v-if="userRole=== 'DISPATCHER' && !$route.query.projectDevice && hasBigScreen" size="small" @click="goBigScreen">大屏</el-button>
|
||||
<el-button v-if="(userRole==='DISPATCHER' || userRole=== 'STATION_SUPERVISOR') && !$route.query.projectDevice && iscsShow" size="small" @click="goIscs">ISCS</el-button>
|
||||
<el-button v-if="running && !dataError && $route.query.type !== 'ILW' && !datie" size="small" :disabled="viewDisabled" @click="viewRunPlan">{{ $t('joinTraining.runGraphPreview') }}</el-button>
|
||||
<template v-if="isAdmin">
|
||||
<el-button v-if="!running && !dataError && $route.query.type !== 'ILW' && !datie" size="small" type="warning" @click="loadRunPlan">
|
||||
{{ $t('joinTraining.runGraphLoading') }}</el-button><!-- 运行图加载 -->
|
||||
</template>
|
||||
</el-button-group>
|
||||
<el-button v-if="(isAdmin || $route.query.type === 'ILW') && !dataError && !isScreen" size="small" :type="faultMode ? '' : 'primary' " @click="changeOperateMode()">{{ faultMode?' 切换到普通模式[Tab]':'切换到故障模式[Tab]' }}</el-button>
|
||||
<!-- isCenter && !dataError && !isAdmin 此判断用于以后(目前 暂时不用) -->
|
||||
<el-button v-if="isShowDirective" size="small" :type="directiveMode ? 'primary' : ''" @click="changeDirectiveMode()">{{ directiveMode? '切换到普通模式[Tab]':'切换到指令模式[Tab]' }}</el-button>
|
||||
</div>
|
||||
<!-- running && -->
|
||||
<join-run-plan-view v-if="!dataError" ref="runPlanView" :group="group" />
|
||||
<select-ibp ref="selectIbp" />
|
||||
<train-ticket ref="trainTicket" />
|
||||
<register-book ref="registerBook" />
|
||||
</div>
|
||||
|
||||
</template>
|
||||
<script>
|
||||
import { mapGetters } from 'vuex';
|
||||
import { OperateMode } from '@/scripts/ConstDic';
|
||||
import { getByGroupStationList } from '@/api/jmap/map';
|
||||
import { getSessionStorage } from '@/utils/auth';
|
||||
import JoinRunPlanView from '@/views/newMap/displayNew/demon/runPlanView';
|
||||
import SelectIbp from '@/views/newMap/displayNew/demon/selectIbp';
|
||||
import { getIbpInfoByStation } from '@/api/ibp';
|
||||
import { loadRunPlanData } from '@/utils/loaddata';
|
||||
import { EventBus } from '@/scripts/event-bus';
|
||||
import { timesSpeedPlayback } from '@/api/rtSimulation';
|
||||
import { queryHasIscs } from '@/api/iscs';
|
||||
import { getToken } from '@/utils/auth';
|
||||
import TrainTicket from '../trainTicket/index';
|
||||
import RegisterBook from '../registerBook/index';
|
||||
export default {
|
||||
name: 'MenuDemonSchema',
|
||||
components:{
|
||||
JoinRunPlanView,
|
||||
SelectIbp,
|
||||
TrainTicket,
|
||||
RegisterBook
|
||||
},
|
||||
props: {
|
||||
group: {
|
||||
type: String,
|
||||
required: true
|
||||
},
|
||||
offset: {
|
||||
type: Number,
|
||||
required: true
|
||||
},
|
||||
userRole: {
|
||||
type: String,
|
||||
required: true
|
||||
},
|
||||
showSelectStation: {
|
||||
type: Boolean,
|
||||
default() {
|
||||
return false;
|
||||
}
|
||||
},
|
||||
stationList: {
|
||||
type: Array,
|
||||
default() {
|
||||
return [];
|
||||
}
|
||||
},
|
||||
dataError: {
|
||||
type: Boolean,
|
||||
default() {
|
||||
return false;
|
||||
}
|
||||
},
|
||||
isAdmin: {
|
||||
type: Boolean,
|
||||
default() {
|
||||
return false;
|
||||
}
|
||||
},
|
||||
deviceCode: {
|
||||
type: String,
|
||||
default() {
|
||||
return '';
|
||||
}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
mode: OperateMode.NORMAL,
|
||||
OperateMode: OperateMode,
|
||||
viewDisabled: true,
|
||||
realData: {},
|
||||
series: [],
|
||||
chiShowStation: '',
|
||||
kmRangeMap: {},
|
||||
runPlanData: {},
|
||||
userId: '',
|
||||
faultMode: false,
|
||||
directiveMode: false,
|
||||
firstLoad: true,
|
||||
iscsShow:false,
|
||||
speedList:[
|
||||
{ value: 1, label: '1倍速' },
|
||||
{ value: 2, label: '2倍速' },
|
||||
{ value: 3, label: '3倍速' },
|
||||
{ value: 4, label: '4倍速' },
|
||||
{ value: 5, label: '5倍速' },
|
||||
{ value: 6, label: '6倍速' },
|
||||
{ value: 7, label: '7倍速' },
|
||||
{ value: 8, label: '8倍速' },
|
||||
{ value: 9, label: '9倍速' },
|
||||
{ value: 10, label: '10倍速' }
|
||||
],
|
||||
speed: 1
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapGetters('runPlan', [
|
||||
'stations'
|
||||
]),
|
||||
...mapGetters('map', [
|
||||
'bigScreenConfig'
|
||||
]),
|
||||
running() {
|
||||
return this.$store.state.training.started;
|
||||
},
|
||||
datie() {
|
||||
return ['16', '19'].includes(this.$route.query.lineCode);
|
||||
},
|
||||
isScreen() {
|
||||
return this.$store.state.training.prdType === '07';
|
||||
},
|
||||
project() {
|
||||
return getSessionStorage('project');
|
||||
},
|
||||
isShowDirective() { // 哈尔滨项目 行调设备显示
|
||||
return this.$route.query.type == 'CW' && this.project == 'heb';
|
||||
},
|
||||
hasBigScreen() {
|
||||
return this.bigScreenConfig.bigScreenSplitConfig && this.bigScreenConfig.bigScreenSplitConfig.length;
|
||||
},
|
||||
isSystemAdmin() {
|
||||
return this.$store.state.user.roles.includes('04') || this.$store.state.user.roles.includes('05');
|
||||
},
|
||||
showDispatcherStation() {
|
||||
return this.$route.query.lineCode === '16' && this.$store.state.training.prdType === '02';
|
||||
},
|
||||
ibpShow() {
|
||||
const lineCodeList = ['08', '16'];
|
||||
return this.userRole === 'STATION_SUPERVISOR' && !this.$route.query.projectDevice && !lineCodeList.includes(this.$route.query.lineCode);
|
||||
},
|
||||
showRegisterBookBtn() {
|
||||
const roleList = ['STATION_SUPERVISOR', 'STATION_ASSISTANT', 'STATION_SIGNALER', 'STATION_SWITCH_MAN', 'STATION_MASTER', 'STATION_WORKER', 'DEVICE_MANAGER'];
|
||||
return this.$route.query.lineCode === '16' && roleList.includes(this.$store.state.training.userRole);
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
// '$store.state.training.switchcount': async function () {
|
||||
// if (this.group) {
|
||||
// const started = this.$store.state.training.started;
|
||||
// if (started && !this.firstLoad) {
|
||||
// await this.loadRunData(this.$route.query);
|
||||
// } else if (this.firstLoad) {
|
||||
// await this.loadRunData(this.$route.query);
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
'$store.state.socket.simulationPlanChange': function (val) {
|
||||
// 判断是否已经加载运行图，若加载只处理运行图数据，否则，缓存数据
|
||||
if (JSON.stringify(this.$store.state.runPlan.planData) == '{}') {
|
||||
this.$store.dispatch('runPlan/setUpdateTrainRpData', val);
|
||||
} else {
|
||||
this.$store.dispatch('runPlan/updateTrainRunplan', val);
|
||||
}
|
||||
},
|
||||
// '$store.state.map.mapDataLoadedCount': function () {
|
||||
// this.loadRunData(this.$route.query);
|
||||
// },
|
||||
'$store.state.training.subscribeCount': function () {
|
||||
this.loadRunData(this.$route.query);
|
||||
},
|
||||
'$store.state.training.triggerFaultCount': function () {
|
||||
this.setFault();
|
||||
},
|
||||
'$store.state.runPlan.loadRunPlanCount': function () {
|
||||
this.viewDisabled = false;
|
||||
this.firstLoad = false;
|
||||
if (JSON.stringify(this.$store.state.runPlan.updateTrainRpData) != '{}') {
|
||||
this.$store.dispatch('runPlan/updateTrainRunplan', this.$store.state.runPlan.updateTrainRpData);
|
||||
this.$store.dispatch('runPlan/setUpdateTrainRpData', {});
|
||||
}
|
||||
}
|
||||
},
|
||||
async mounted() {
|
||||
this.userId = this.$store.state.user.id;
|
||||
EventBus.$on('CheckFaultModeEvent', () => {
|
||||
if ((this.isAdmin || this.$route.query.type === 'ILW') && !this.dataError && !this.isScreen) {
|
||||
this.changeOperateMode();
|
||||
}
|
||||
if (this.isShowDirective) {
|
||||
this.changeDirectiveMode();
|
||||
}
|
||||
});
|
||||
queryHasIscs({mapId: this.$route.query.mapId}).then(resp => {
|
||||
if (resp.data) {
|
||||
this.iscsShow = true;
|
||||
} else {
|
||||
this.iscsShow = false;
|
||||
}
|
||||
}).catch(() => {
|
||||
this.$message.error('查询ISCS数据异常');
|
||||
});
|
||||
},
|
||||
methods: {
|
||||
loadRunData(opt) {
|
||||
this.$store.dispatch('runPlan/clear').then(resp => {
|
||||
if (opt && opt.mapId) {
|
||||
this.viewDisabled = true;
|
||||
getByGroupStationList(this.$route.query.group).then(response => {
|
||||
const stations = response.data;
|
||||
this.$store.dispatch('runPlan/setStations', stations).then(() => {
|
||||
loadRunPlanData(this.group, this.dataError);
|
||||
});
|
||||
}).catch(() => {
|
||||
this.$messageBox(this.$t('error.obtainStationListFailed'));
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
// initPlannedDriving(isDisable) {
|
||||
// this.isDisable = isDisable;
|
||||
// },
|
||||
changeOperateMode() {
|
||||
this.faultMode = !this.faultMode;
|
||||
let mode = OperateMode.NORMAL;
|
||||
if (this.faultMode) {
|
||||
mode = OperateMode.FAULT;
|
||||
}
|
||||
this.$store.dispatch('training/changeOperateMode', { mode: mode });
|
||||
},
|
||||
goCtc() {
|
||||
const routeData = this.$router.resolve({
|
||||
path:'/display/demon',
|
||||
query:{
|
||||
lineCode:this.$route.query.lineCode,
|
||||
group: this.$route.query.group,
|
||||
prdType: '01',
|
||||
mapId:this.$route.query.mapId,
|
||||
project: this.project,
|
||||
newApi: false,
|
||||
joint: true,
|
||||
ctc: true,
|
||||
try: this.$route.query.try || 0,
|
||||
token:getToken(),
|
||||
noPreLogout: true
|
||||
}
|
||||
});
|
||||
window.open(routeData.href, '_blank');
|
||||
},
|
||||
changeDirectiveMode() { // 调整指令模式
|
||||
this.directiveMode = !this.directiveMode;
|
||||
let mode = OperateMode.NORMAL;
|
||||
if (this.directiveMode) {
|
||||
mode = OperateMode.DIRECTIVE;
|
||||
}
|
||||
this.$store.dispatch('training/changeOperateMode', { mode: mode });
|
||||
},
|
||||
setFault() {
|
||||
this.$emit('faultChooseShow');
|
||||
},
|
||||
loadRunPlan() {
|
||||
this.$emit('runPlanLoadShow');
|
||||
},
|
||||
viewRunPlan() {
|
||||
if (this.$route.query.type === 'CW') {
|
||||
const routeData = this.$router.resolve({
|
||||
path:`/runPlanViewWindow`,
|
||||
query:{
|
||||
lineCode: this.$route.query.lineCode,
|
||||
mapId:this.$route.query.mapId,
|
||||
group:this.$route.query.group,
|
||||
initTime: this.$store.state.training.initTime,
|
||||
noPreLogout: true
|
||||
}
|
||||
});
|
||||
window.open(routeData.href, '_blank');
|
||||
} else {
|
||||
this.$refs.runPlanView.doShow();
|
||||
}
|
||||
},
|
||||
// 选择车站
|
||||
switchStationMode(stationCode) {
|
||||
this.$emit('switchStationMode', stationCode);
|
||||
},
|
||||
// 点击大屏预览
|
||||
goBigScreen() {
|
||||
const routeData = this.$router.resolve({
|
||||
path:`/displayBigScreen/${this.$route.query.mapId}`,
|
||||
query:{
|
||||
lineCode: this.$route.query.lineCode,
|
||||
mapId:this.$route.query.mapId,
|
||||
group:this.$route.query.group,
|
||||
prdType: '07',
|
||||
try:0,
|
||||
noPreLogout: true
|
||||
}
|
||||
});
|
||||
window.open(routeData.href, '_blank');
|
||||
},
|
||||
goIscs() {
|
||||
const routeData = this.$router.resolve({
|
||||
path:`/displayIscs/system`,
|
||||
query:{
|
||||
lineCode: this.$route.query.lineCode,
|
||||
mapId: this.$route.query.mapId,
|
||||
group: this.$route.query.group,
|
||||
noPreLogout: true
|
||||
}
|
||||
});
|
||||
window.open(routeData.href, '_blank');
|
||||
},
|
||||
speedChange(val) {
|
||||
timesSpeedPlayback(this.$route.query.group, val).then(resp => {
|
||||
this.$message.success(`设置${val}倍速成功!`);
|
||||
}).catch(e => {
|
||||
this.$message.error('设置倍速失败！');
|
||||
});
|
||||
},
|
||||
showTrainTicket() {
|
||||
this.$refs.trainTicket.doShow();
|
||||
},
|
||||
showRegisterBook() {
|
||||
this.$refs.registerBook.doShow();
|
||||
},
|
||||
changeShowMap() {
|
||||
this.$emit('changeShowMap', false);
|
||||
},
|
||||
// 点击ibp预览
|
||||
goIbp() {
|
||||
// this.$refs.selectIbp.doShow();
|
||||
getIbpInfoByStation(this.$route.query.mapId, this.deviceCode).then(resp => {
|
||||
if (resp.data) {
|
||||
const routeData = this.$router.resolve({
|
||||
path:`/ibpShow`,
|
||||
query:{
|
||||
lineCode: this.$route.query.lineCode,
|
||||
mapId: this.$route.query.mapId,
|
||||
group: this.$route.query.group,
|
||||
stationCode: this.deviceCode,
|
||||
loadAll: true,
|
||||
noPreLogout: true
|
||||
}
|
||||
});
|
||||
window.open(routeData.href, '_blank');
|
||||
} else {
|
||||
this.$messageBox('本车站暂无IBP盘数据！');
|
||||
}
|
||||
}).catch((error) => {
|
||||
if (error.code == '10007') {
|
||||
this.$messageBox('本车站暂无IBP盘数据！');
|
||||
} else {
|
||||
this.$message.error('获取IBP盘数据异常');
|
||||
}
|
||||
});
|
||||
|
||||
},
|
||||
goRpManage() {
|
||||
const routeData = this.$router.resolve({
|
||||
path:'/bigTrainRunplanManage',
|
||||
query:{
|
||||
group: this.$route.query.group,
|
||||
mapId:this.$route.query.mapId,
|
||||
project: this.project,
|
||||
prdType: this.$store.state.training.prdType,
|
||||
lineCode:this.$route.query.lineCode,
|
||||
// stationCode:this.$store.state.training.roleDeviceCode,
|
||||
// token:getToken(),
|
||||
noPreLogout: true
|
||||
}
|
||||
});
|
||||
window.open(routeData.href, '_blank');
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style>
|
||||
.schema {
|
||||
z-index: 18;
|
||||
display: inline;
|
||||
position: absolute;
|
||||
right: 5px;
|
||||
}
|
||||
|
||||
.schema .el-radio-group .el-radio-button__inner {
|
||||
padding: 0px 15px 0px 15px;
|
||||
height: 32px;
|
||||
line-height: 32px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
/* /deep/ .el-button+ .el-button {
|
||||
margin-left: 0px;
|
||||
} */
|
||||
</style>
|
||||
@ -1,172 +0,0 @@
|
||||
<template>
|
||||
<div class="menuTrainListOut" :class="{'xian_01' : lineCode == '11', 'active': drawer}">
|
||||
<div class="menuTrainListBtn" @click="clickBtn">
|
||||
<!-- <i class="el-icon-more" /> -->
|
||||
<p style="margin: 0;">列</p>
|
||||
<p style="margin: 0;">车</p>
|
||||
</div>
|
||||
<div :show-close="false" class="menuTrainList_box" style="height: 100%;">
|
||||
<div v-if="lineCode=='10'||lineCode=='11'" class="menuTrainList">
|
||||
<div class="bottomTrainListInfo">下行列车详细信息</div>
|
||||
<el-table :data="bottomTrainList" height="45%" :highlight-current-row="true" @row-click="selectTrain">
|
||||
<el-table-column property="groupNumber" label="车组号" width="70" />
|
||||
<el-table-column property="tripNumber" label="车次号" width="70" />
|
||||
<el-table-column property="destinationCode" label="目的地号" width="100" />
|
||||
<el-table-column property="serviceNumber" label="表号" width="70" />
|
||||
<el-table-column property="dt" label="早晚点" width="70">
|
||||
<template slot-scope="scope">
|
||||
<div>{{ covert(scope.row.dt) }}</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<div class="topTrainListInfo">上行列车详细信息</div>
|
||||
<el-table :data="topTrainList" height="45%" :highlight-current-row="true" style="border-radius:0px 0px 0px 5px;" @row-click="selectTrain">
|
||||
<el-table-column property="groupNumber" label="车组号" width="70" />
|
||||
<el-table-column property="tripNumber" label="车次号" width="70" />
|
||||
<el-table-column property="destinationCode" label="目的地号" width="100" />
|
||||
<el-table-column property="serviceNumber" label="表号" width="70" />
|
||||
<el-table-column property="dt" label="早晚点" width="70">
|
||||
<template slot-scope="scope">
|
||||
<div>{{ covert(scope.row.dt) }}</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
<div v-else class="menuTrainList">
|
||||
<el-table :data="trainList" height="100%" :highlight-current-row="true" style="border-radius:5px 0px 0px 5px;" @row-click="selectTrain">
|
||||
<el-table-column property="groupNumber" label="车组号" width="130" />
|
||||
<el-table-column property="tripNumber" label="车次号" width="130" />
|
||||
<el-table-column property="serviceNumber" label="表号" width="130" />
|
||||
</el-table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { mapGetters } from 'vuex';
|
||||
export default {
|
||||
name: 'MenuTrainList',
|
||||
data() {
|
||||
return {
|
||||
drawer: false,
|
||||
trainList:[],
|
||||
oldDevice: null,
|
||||
topTrainList:[],
|
||||
bottomTrainList:[]
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
lineCode() {
|
||||
return this.$route.query.lineCode;
|
||||
},
|
||||
...mapGetters('map', ['mapConfig'])
|
||||
},
|
||||
watch:{
|
||||
'$store.state.map.activeTrainListUpdate': function (val) {
|
||||
if (val) {
|
||||
const activeTrainList = this.$store.state.map.activeTrainList;
|
||||
if (this.lineCode == '10' || this.lineCode == '11') {
|
||||
this.topTrainList = [];
|
||||
this.bottomTrainList = [];
|
||||
activeTrainList.forEach((trainCode)=>{
|
||||
// train.serviceNumber != '' && train.serviceNumber != undefined &&
|
||||
const train = this.$store.getters['map/getDeviceByCode'](trainCode);
|
||||
const isUpDirection = this.mapConfig.upRight ? train.right : !train.right
|
||||
if (train && isUpDirection && train.sectionCode) {
|
||||
this.topTrainList.push(train);
|
||||
} else if (train && !isUpDirection && train.sectionCode) {
|
||||
this.bottomTrainList.push(train);
|
||||
}
|
||||
});
|
||||
} else {
|
||||
this.trainList = [];
|
||||
activeTrainList.forEach((trainCode)=>{
|
||||
const train = this.$store.getters['map/getDeviceByCode'](trainCode);
|
||||
if (train && train.sectionCode) {
|
||||
this.trainList.push(train);
|
||||
}
|
||||
});
|
||||
}
|
||||
} else {
|
||||
this.topTrainList = [];
|
||||
this.bottomTrainList = [];
|
||||
this.trainList = [];
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
},
|
||||
methods:{
|
||||
clickBtn() {
|
||||
if (this.drawer) {
|
||||
this.drawer = false;
|
||||
} else {
|
||||
this.drawer = true;
|
||||
}
|
||||
},
|
||||
selectTrain(row, column, event) {
|
||||
this.setCenter(row.code);
|
||||
},
|
||||
// 设置显示中心
|
||||
setCenter(code) {
|
||||
this.$emit('setCenter', code);
|
||||
},
|
||||
covert(data) {
|
||||
const absData = Math.abs(data);
|
||||
const hours = Math.floor(absData / 3600);
|
||||
let min = Math.floor((absData % 3600) / 60);
|
||||
let seconds = (absData % 3600) % 60;
|
||||
min = min > 9 ? min : '0' + min;
|
||||
seconds = seconds > 9 ? seconds : '0' + seconds;
|
||||
const time = hours + ':' + min + ':' + seconds;
|
||||
return data == 0 ? '00:00:00' : (data > 0 ? time + 'E' : time + 'L');
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style rel="stylesheet/scss" lang="scss" scoped>
|
||||
.menuTrainListOut{
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 20%;
|
||||
height: 60%;
|
||||
transform: translateX(400px);
|
||||
transition: all 0.4s;
|
||||
&.active{
|
||||
transform: translateX(0px);
|
||||
}
|
||||
}
|
||||
.menuTrainListBtn{
|
||||
background: #fff;
|
||||
text-align: center;
|
||||
border-radius: 6px 0px 0px 6px;
|
||||
position: absolute;
|
||||
top: 45%;
|
||||
z-index: 2;
|
||||
transform: translateX(-23px);
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
justify-content: center;
|
||||
padding: 7px 4px;
|
||||
}
|
||||
.menuTrainList_box{
|
||||
height: 100%;
|
||||
.menuTrainList{
|
||||
width: 400px;
|
||||
height: 100%;
|
||||
border-radius: 10px 0px 0px 10px;
|
||||
background: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
.topTrainListInfo,
|
||||
.bottomTrainListInfo{
|
||||
padding: 10px 10px;
|
||||
background: #cde2ef;
|
||||
font-size: 13px;
|
||||
border-radius: 5px 0px 0px 0px;
|
||||
}
|
||||
</style>
|
||||
@ -1,159 +0,0 @@
|
||||
<template>
|
||||
<div class="jl3dpassflow">
|
||||
<div id="jlReal3d" class="jlReal3d">
|
||||
<div class="realCctv1">
|
||||
<video id="myvideo0" class="video-js">
|
||||
<source :src="`${host}/hls/cctv1.m3u8`" type="application/x-mpegURL">
|
||||
</video>
|
||||
</div>
|
||||
<div class="realCctv2">
|
||||
<video id="myvideo1" class="video-js">
|
||||
<source :src="`${host}/hls/cctv2.m3u8`" type="application/x-mpegURL">
|
||||
</video>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <div class="menudown">
|
||||
<el-button-group>
|
||||
<el-button type="primary" @click="back">退出</el-button>
|
||||
</el-button-group>
|
||||
</div> -->
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import Video from 'video.js';
|
||||
import 'video.js/dist/video-js.css';
|
||||
import { RealCctvMap } from '@/scripts/ProjectConfig';
|
||||
import { getSessionStorage } from '@/utils/auth';
|
||||
export default {
|
||||
name:'RealCCTV',
|
||||
data() {
|
||||
return {
|
||||
videoList:[]
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
host() {
|
||||
const project = getSessionStorage('project');
|
||||
return RealCctvMap[project];
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
for (var i = 0; i < 2; i++) {
|
||||
const videoPlay = new Video('myvideo' + i, {
|
||||
controls: false,
|
||||
autoplay: 'muted',
|
||||
loop: false,
|
||||
preload: 'auto',
|
||||
width: window.innerWidth / 2 + 'px',
|
||||
height: window.innerHeight + 'px',
|
||||
hls: {
|
||||
withCredentials: true
|
||||
}
|
||||
}, function () {
|
||||
console.log('videojs播放器初始化成功');
|
||||
const video = this;
|
||||
var lastTime = -1;
|
||||
this.on('loadeddata', function() {
|
||||
console.log('loadeddata');
|
||||
});
|
||||
this.on('seeked', function() {
|
||||
// 已经拿到视频流,可以播放
|
||||
console.log('seeked');
|
||||
// var currentTime = video.currentTime();
|
||||
// if (currentTime != lastTime) {
|
||||
// video.currentTime(currentTime + 10000);
|
||||
// video.play();
|
||||
// }
|
||||
});
|
||||
this.on('error', function() {
|
||||
console.log('error');
|
||||
if (video.error().code == '') {
|
||||
const src = video.getMedia().src[0].src;
|
||||
video.reset();
|
||||
video.src(src);
|
||||
video.load();
|
||||
video.play();
|
||||
var currentTime = video.currentTime();
|
||||
lastTime = currentTime;
|
||||
}
|
||||
});
|
||||
this.on('loadedmetadata', function() {
|
||||
console.log('loadedmetadata');
|
||||
// 加载到元数据后开始播放视频
|
||||
// startVideo();
|
||||
video.autoplay(true);
|
||||
|
||||
// var tryTimes = 0;
|
||||
let isVideoBreak = null;
|
||||
clearInterval(isVideoBreak);
|
||||
isVideoBreak = setInterval(function() {
|
||||
// debugger;
|
||||
var currentTime = video.currentTime();
|
||||
console.log('currentTime' + currentTime + 'lastTime' + lastTime);
|
||||
if (currentTime == lastTime) {
|
||||
video.currentTime(currentTime + 10000);
|
||||
video.play();
|
||||
// video.src({
|
||||
// src:that.videosrc
|
||||
// });
|
||||
// // 尝试5次播放后，如仍未播放成功提示刷新
|
||||
// if (++tryTimes > 5) {
|
||||
// alert('您的网速有点慢，刷新下试试');
|
||||
// tryTimes = 0;
|
||||
// }
|
||||
} else {
|
||||
lastTime = currentTime;
|
||||
// tryTimes = 0;
|
||||
}
|
||||
}, 3000);
|
||||
});
|
||||
this.on('play', function() {
|
||||
console.log('play');
|
||||
});
|
||||
});
|
||||
this.videoList.push(videoPlay);
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
// back() {
|
||||
// window.close();
|
||||
// }
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style>
|
||||
.jl3dpassflow{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.jlReal3d{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 0;
|
||||
font-size:0;
|
||||
}
|
||||
.realCctv1{
|
||||
position: absolute;
|
||||
width:50%;
|
||||
height:50%;
|
||||
left:0;
|
||||
top:0;
|
||||
}
|
||||
.realCctv2{
|
||||
position: absolute;
|
||||
width:50%;
|
||||
height:50%;
|
||||
left:50%;
|
||||
top:0;
|
||||
}
|
||||
.menudown{
|
||||
bottom:0;
|
||||
right:0;
|
||||
position:absolute;
|
||||
z-index: 2;
|
||||
}
|
||||
.video-js video{
|
||||
outline: none !important;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -88,7 +88,7 @@ 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 {covertMemberData} from '@/utils/simulation';
|
||||
import GetActionNew from './getAction';
|
||||
import AllScriptRole from './allScriptRole';
|
||||
import { getToken } from '@/utils/auth';
|
||||
|
||||
Loading…
Reference in New Issue
Block a user