运行图设计调整
This commit is contained in:
joylink_cuiweidong
parent
71171625fa
commit
713f411ffc
@ -27,8 +27,6 @@ import UserExam from '@/views/system/userExam/index';
|
||||
import UserSimulation from '@/views/system/userSimulation/index';
|
||||
import ExistingSimulation from '@/views/system/existingSimulation/index';
|
||||
import CacheControl from '@/views/system/cacheControl/index';
|
||||
// import Trainingrecord from '@/views/system/trainingrecord/index';
|
||||
// import TrainingrecordManage from '@/views/system/trainingrecord/trainingrecordmanage/index';
|
||||
import SystemGenerate from '@/views/system/systemGenerate/index';
|
||||
import IbpDraw from '@/views/system/ibpDraw/index';
|
||||
|
||||
@ -362,11 +360,6 @@ export const asyncRouter = [
|
||||
}
|
||||
]
|
||||
},
|
||||
// {
|
||||
// path: 'lesson/training/:trainingId/:trainingName',
|
||||
// component: TrainingrecordManage,
|
||||
// hidden: true
|
||||
// },
|
||||
{ // 地图预览
|
||||
path: 'mapPreview/:mapId',
|
||||
component: MapPreview,
|
||||
@ -817,23 +810,6 @@ export const asyncRouter = [
|
||||
i18n: 'router.productEdit'
|
||||
}
|
||||
},
|
||||
// {
|
||||
// // 实训录制
|
||||
// path: 'record',
|
||||
// redirect: 'record/training/0/null',
|
||||
// component: Trainingrecord,
|
||||
// meta: {
|
||||
// i18n: 'router.trainingRecord'
|
||||
// },
|
||||
// hidden: !isDev,
|
||||
// children: [
|
||||
// {
|
||||
// path: 'training/:trainingId/:trainingName',
|
||||
// component: TrainingrecordManage,
|
||||
// hidden: true
|
||||
// }
|
||||
// ]
|
||||
// },
|
||||
{
|
||||
path: 'news',
|
||||
component: News,
|
||||
|
||||
@ -100,7 +100,8 @@ export default {
|
||||
}
|
||||
case 'runPlanDesign': {
|
||||
setSessionStorage('designType', 'runPlanDesign');
|
||||
this.$router.push({ path: `${UrlConfig.design.runPlan}/${obj.mapId}?skinCode=${obj.skinCode}` });
|
||||
// ?skinCode=${obj.skinCode}
|
||||
this.$router.push({ path: `${UrlConfig.design.runPlan}/${obj.mapId}` });
|
||||
break;
|
||||
}
|
||||
case 'map': {
|
||||
|
||||
@ -139,7 +139,8 @@ export default {
|
||||
break;
|
||||
}
|
||||
case 'runPlanDesign': {
|
||||
this.$router.push({ path: `${UrlConfig.designUser.runPlan}/${obj.mapId}?skinCode=${obj.skinCode}` });
|
||||
// ?skinCode=${obj.skinCode}
|
||||
this.$router.push({ path: `${UrlConfig.designUser.runPlan}/${obj.mapId}` });
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
@ -12,116 +12,116 @@ import { prefixIntrger } from '@/utils/date';
|
||||
import logo_ from '@/assets/logo_.png';
|
||||
|
||||
export default {
|
||||
name: 'PlanMenuTool',
|
||||
data() {
|
||||
return {
|
||||
tools: [
|
||||
{
|
||||
title: this.$t('planMonitor.server1'),
|
||||
operate: '',
|
||||
src: logo_,
|
||||
click: this.undeveloped
|
||||
},
|
||||
{
|
||||
title: this.$t('planMonitor.server2'),
|
||||
operate: '',
|
||||
src: '',
|
||||
click: this.undeveloped
|
||||
},
|
||||
{
|
||||
title: this.$t('planMonitor.frontMachine1'),
|
||||
operate: '',
|
||||
src: '',
|
||||
click: this.undeveloped
|
||||
},
|
||||
{
|
||||
title: this.$t('planMonitor.frontMachine2'),
|
||||
operate: '',
|
||||
src: '',
|
||||
click: this.undeveloped
|
||||
},
|
||||
{
|
||||
title: this.$t('planMonitor.mainDispatcher'),
|
||||
operate: '',
|
||||
src: '',
|
||||
click: this.undeveloped
|
||||
},
|
||||
{
|
||||
title: this.$t('planMonitor.dispatcher1'),
|
||||
operate: '',
|
||||
src: '',
|
||||
click: this.undeveloped
|
||||
},
|
||||
{
|
||||
title: this.$t('planMonitor.dispatcher2'),
|
||||
operate: '',
|
||||
src: '',
|
||||
click: this.undeveloped
|
||||
},
|
||||
{
|
||||
title: this.$t('planMonitor.dispatcher3'),
|
||||
operate: '',
|
||||
src: '',
|
||||
click: this.undeveloped
|
||||
},
|
||||
{
|
||||
title: this.$t('planMonitor.bigScreen'),
|
||||
operate: '',
|
||||
src: '',
|
||||
click: this.undeveloped
|
||||
},
|
||||
{
|
||||
title: this.$t('planMonitor.maintenanceWorkstation'),
|
||||
operate: '',
|
||||
src: '',
|
||||
click: this.undeveloped
|
||||
},
|
||||
{
|
||||
title: this.$t('planMonitor.runGraphShowManualStation'),
|
||||
operate: '',
|
||||
src: '',
|
||||
click: this.undeveloped
|
||||
},
|
||||
{
|
||||
title: this.$t('planMonitor.jumpStop'),
|
||||
operate: '',
|
||||
src: '',
|
||||
click: this.undeveloped
|
||||
},
|
||||
{
|
||||
title: this.$t('planMonitor.detainTrain'),
|
||||
operate: '',
|
||||
src: '',
|
||||
click: this.undeveloped
|
||||
},
|
||||
{
|
||||
title: this.$t('planMonitor.trainAlarm'),
|
||||
operate: '',
|
||||
src: logo_,
|
||||
click: this.undeveloped
|
||||
}
|
||||
]
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
isShowSystemTime() {
|
||||
return this.$route.params.mode == 'demon' || this.$route.params.mode === 'dp' || !this.$route.params.mode;
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
'$store.state.training.initTime': function (initTime) {
|
||||
const date = new Date(initTime);
|
||||
this.time = `${prefixIntrger(date.getHours(), 2)}:${prefixIntrger(date.getMinutes(), 2)}${prefixIntrger(date.getSeconds(), 2)}`;
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.initTools();
|
||||
},
|
||||
methods: {
|
||||
initTools() {
|
||||
this.tools = [];
|
||||
}
|
||||
}
|
||||
name: 'PlanMenuTool',
|
||||
data() {
|
||||
return {
|
||||
tools: [
|
||||
{
|
||||
title: this.$t('planMonitor.server1'),
|
||||
operate: '',
|
||||
src: logo_,
|
||||
click: this.undeveloped
|
||||
},
|
||||
{
|
||||
title: this.$t('planMonitor.server2'),
|
||||
operate: '',
|
||||
src: '',
|
||||
click: this.undeveloped
|
||||
},
|
||||
{
|
||||
title: this.$t('planMonitor.frontMachine1'),
|
||||
operate: '',
|
||||
src: '',
|
||||
click: this.undeveloped
|
||||
},
|
||||
{
|
||||
title: this.$t('planMonitor.frontMachine2'),
|
||||
operate: '',
|
||||
src: '',
|
||||
click: this.undeveloped
|
||||
},
|
||||
{
|
||||
title: this.$t('planMonitor.mainDispatcher'),
|
||||
operate: '',
|
||||
src: '',
|
||||
click: this.undeveloped
|
||||
},
|
||||
{
|
||||
title: this.$t('planMonitor.dispatcher1'),
|
||||
operate: '',
|
||||
src: '',
|
||||
click: this.undeveloped
|
||||
},
|
||||
{
|
||||
title: this.$t('planMonitor.dispatcher2'),
|
||||
operate: '',
|
||||
src: '',
|
||||
click: this.undeveloped
|
||||
},
|
||||
{
|
||||
title: this.$t('planMonitor.dispatcher3'),
|
||||
operate: '',
|
||||
src: '',
|
||||
click: this.undeveloped
|
||||
},
|
||||
{
|
||||
title: this.$t('planMonitor.bigScreen'),
|
||||
operate: '',
|
||||
src: '',
|
||||
click: this.undeveloped
|
||||
},
|
||||
{
|
||||
title: this.$t('planMonitor.maintenanceWorkstation'),
|
||||
operate: '',
|
||||
src: '',
|
||||
click: this.undeveloped
|
||||
},
|
||||
{
|
||||
title: this.$t('planMonitor.runGraphShowManualStation'),
|
||||
operate: '',
|
||||
src: '',
|
||||
click: this.undeveloped
|
||||
},
|
||||
{
|
||||
title: this.$t('planMonitor.jumpStop'),
|
||||
operate: '',
|
||||
src: '',
|
||||
click: this.undeveloped
|
||||
},
|
||||
{
|
||||
title: this.$t('planMonitor.detainTrain'),
|
||||
operate: '',
|
||||
src: '',
|
||||
click: this.undeveloped
|
||||
},
|
||||
{
|
||||
title: this.$t('planMonitor.trainAlarm'),
|
||||
operate: '',
|
||||
src: logo_,
|
||||
click: this.undeveloped
|
||||
}
|
||||
]
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
isShowSystemTime() {
|
||||
return this.$route.params.mode == 'demon' || this.$route.params.mode === 'dp' || !this.$route.params.mode;
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
'$store.state.training.initTime': function (initTime) {
|
||||
const date = new Date(initTime);
|
||||
this.time = `${prefixIntrger(date.getHours(), 2)}:${prefixIntrger(date.getMinutes(), 2)}${prefixIntrger(date.getSeconds(), 2)}`;
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.initTools();
|
||||
},
|
||||
methods: {
|
||||
initTools() {
|
||||
this.tools = [];
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
|
||||
@ -1,308 +0,0 @@
|
||||
<template>
|
||||
<el-dialog v-dialogDrag :title="operation.title" :visible.sync="dialogShow" width="30%" :before-close="close">
|
||||
<el-form ref="form" :model="operateModel" label-width="120px" :rules="rules" size="mini">
|
||||
<el-form-item :label="this.$t('lesson.trainingName')+':'" prop="name">
|
||||
<el-input v-model="operateModel.name" />
|
||||
</el-form-item>
|
||||
<el-form-item :label="this.$t('lesson.productType')" prop="prdId">
|
||||
<el-select v-model="operateModel.prdId" placeholder="" :disabled="true">
|
||||
<el-option
|
||||
v-for="option in productTypesList"
|
||||
:key="option.code"
|
||||
:label="option.name"
|
||||
:value="option.code"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item :label="this.$t('lesson.trainingType')+':'" prop="type">
|
||||
<el-select v-model="operateModel.type" placeholder="" :disabled="true">
|
||||
<el-option
|
||||
v-for="option in trainTypesList"
|
||||
:key="option.code"
|
||||
:label="option.name"
|
||||
:value="option.code"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item :label="this.$t('lesson.operationType')+':'">
|
||||
<el-select v-model="operateModel.operateType">
|
||||
<el-option
|
||||
v-for="(option, index) in operationList"
|
||||
:key="index"
|
||||
:label="option.name"
|
||||
:value="option.code"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item :label="this.$t('lesson.minTime')" prop="minDuration">
|
||||
<el-input-number v-model="operateModel.minDuration" :min="0" :max="10000" />s
|
||||
</el-form-item>
|
||||
<el-form-item :label="this.$t('lesson.maxTime')" prop="maxDuration">
|
||||
<el-input-number v-model="operateModel.maxDuration" :min="0" :max="10000" />s
|
||||
</el-form-item>
|
||||
<el-form-item :label="this.$t('lesson.trainingDescription')" prop="remarks">
|
||||
<el-input
|
||||
v-model="operateModel.remarks"
|
||||
type="textarea"
|
||||
:autosize="{ minRows: 4, maxRows: 4}"
|
||||
:placeholder="this.$t('rules.pleaseEnterContent')"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button @click="handleClose">{{ $t('global.cancel') }}</el-button>
|
||||
<el-button type="primary" @click="handleDeal">{{ $t('global.confirm') }}</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { addTraining, updateTraining, getTrainingDetail } from '@/api/jmap/training';
|
||||
import localStore from 'storejs';
|
||||
|
||||
export default {
|
||||
name: 'TreeDraft',
|
||||
props: {
|
||||
node: {
|
||||
type: Object,
|
||||
required: true
|
||||
}
|
||||
},
|
||||
data() {
|
||||
var minDurations = (rule, value, callback) => {
|
||||
if (!value) {
|
||||
return callback(new Error(this.$t('rules.enterStandardTime')));
|
||||
}
|
||||
setTimeout(() => {
|
||||
if (!Number.isInteger(value)) {
|
||||
callback(new Error(this.$t('rules.enterNumericValue')));
|
||||
} else {
|
||||
callback();
|
||||
}
|
||||
}, 100);
|
||||
};
|
||||
var maxDurations = (rule, value, callback) => {
|
||||
if (!value) {
|
||||
return callback(new Error(this.$t('rules.enterStandardTime')));
|
||||
}
|
||||
setTimeout(() => {
|
||||
if (!Number.isInteger(value)) {
|
||||
callback(new Error(this.$t('rules.enterNumericValue')));
|
||||
} else {
|
||||
if (value < this.operateModel.minDuration) {
|
||||
callback(new Error(this.$t('rules.greaterThanMinTime')));
|
||||
} else {
|
||||
callback();
|
||||
}
|
||||
}
|
||||
}, 100);
|
||||
};
|
||||
return {
|
||||
dialogShow: false,
|
||||
productTypesList: [],
|
||||
trainTypesList: [],
|
||||
operationList: [],
|
||||
trainingOperateTypeMap: {},
|
||||
operation: {
|
||||
title: '',
|
||||
event: ''
|
||||
},
|
||||
operateModel: {
|
||||
id: '',
|
||||
name: '',
|
||||
type: '',
|
||||
prdId: '',
|
||||
skinCode: '',
|
||||
operateType: '',
|
||||
maxDuration: 0,
|
||||
minDuration: 0,
|
||||
remarks: ''
|
||||
},
|
||||
rules: {
|
||||
name: [
|
||||
{ required: true, message: this.$t('rules.inputTrainingName'), trigger: 'change' }
|
||||
],
|
||||
minDuration: [
|
||||
{ required: true, validator: minDurations, trigger: 'blur' }
|
||||
],
|
||||
maxDuration: [
|
||||
{ required: true, validator: maxDurations, trigger: 'blur' }
|
||||
],
|
||||
remarks: [
|
||||
{ required: true, message: this.$t('rules.inputTrainingRemark'), trigger: 'change' }
|
||||
]
|
||||
}
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
},
|
||||
watch: {
|
||||
node: function (val, old) {
|
||||
this.initLoadData();
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.$Dictionary.trainingType().then(list => {
|
||||
this.trainTypesList = list;
|
||||
});
|
||||
this.operationList = [];
|
||||
this.$Dictionary.stationControl().then(list => {
|
||||
this.trainingOperateTypeMap['01'] = list; // 控制权实训
|
||||
});
|
||||
this.$Dictionary.signalOperation().then(list => {
|
||||
this.trainingOperateTypeMap['02'] = list; // 信号机实训
|
||||
});
|
||||
this.$Dictionary.switchOperation().then(list => {
|
||||
this.trainingOperateTypeMap['03'] = list; // 道岔实训
|
||||
});
|
||||
this.$Dictionary.sectionOperation().then(list => {
|
||||
this.trainingOperateTypeMap['04'] = list; // 区段实训
|
||||
});
|
||||
this.$Dictionary.stationStandOperation().then(list => {
|
||||
this.trainingOperateTypeMap['05'] = list; // 站台实训
|
||||
});
|
||||
this.$Dictionary.trainPlanOperation().then(list => {
|
||||
this.trainingOperateTypeMap['06'] = list; // 行车计划实训
|
||||
});
|
||||
this.$Dictionary.trainOperation().then(list => {
|
||||
this.trainingOperateTypeMap['07'] = list; // 列车实训
|
||||
});
|
||||
},
|
||||
methods: {
|
||||
initLoadData() {
|
||||
const node = this.node;
|
||||
if (this.$refs && this.$refs.form) {
|
||||
this.$refs['form'].resetFields();
|
||||
}
|
||||
if (node && node.data) {
|
||||
switch (node.data.type) {
|
||||
case 'TrainingType':
|
||||
if (node.parent) {
|
||||
this.operateModel.type = node.data.id;
|
||||
this.operateModel.prdId = node.parent.data.id;
|
||||
this.operateModel.skinCode = node.parent.parent.data.id;
|
||||
this.productTypesList = [{
|
||||
code: node.parent.data.id,
|
||||
name: node.parent.data.name
|
||||
}];
|
||||
|
||||
}
|
||||
|
||||
this.operateModel.id = '';
|
||||
this.operateModel.name = '';
|
||||
this.operateModel.minDuration = '';
|
||||
this.operateModel.maxDuration = '';
|
||||
this.operateModel.remarks = '';
|
||||
this.operateModel.operateType = '';
|
||||
this.operationList = this.trainingOperateTypeMap[node.data.id] || [];
|
||||
break;
|
||||
case 'Training':
|
||||
if (node.parent && node.parent.parent) {
|
||||
this.operateModel.type = node.parent.data.id;
|
||||
this.operateModel.prdId = node.parent.parent.data.id;
|
||||
this.operateModel.skinCode = node.parent.parent.parent.data.id;
|
||||
this.operationList = this.trainingOperateTypeMap[node.parent.data.id] || [];
|
||||
this.productTypesList = [{
|
||||
code: node.parent.parent.data.id,
|
||||
name: node.parent.parent.data.name
|
||||
}];
|
||||
}
|
||||
|
||||
this.operateModel.id = node.data.id;
|
||||
this.operateModel.name = node.data.name;
|
||||
getTrainingDetail(node.data.id).then(response => {
|
||||
this.operateModel.minDuration = response.data.minDuration;
|
||||
this.operateModel.maxDuration = response.data.maxDuration;
|
||||
this.operateModel.operateType = response.data.operateType;
|
||||
this.operateModel.remarks = response.data.remarks;
|
||||
}).catch(() => {
|
||||
this.$messageBox(this.$t('error.obtainStepDataFailed'));
|
||||
});
|
||||
break;
|
||||
}
|
||||
}
|
||||
},
|
||||
show(data) {
|
||||
this.operation = data;
|
||||
this.initLoadData();
|
||||
this.dialogShow = true;
|
||||
},
|
||||
close() {
|
||||
this.dialogShow = false;
|
||||
},
|
||||
handleDeal() {
|
||||
const operation = this.operation;
|
||||
if (operation) {
|
||||
const event = operation.event;
|
||||
switch (event) {
|
||||
case '01': this.addTraining(); break;
|
||||
case '02': this.edtTraining(); break;
|
||||
}
|
||||
}
|
||||
},
|
||||
handleClose() {
|
||||
this.dialogShow = false;
|
||||
this.operateModel = {
|
||||
id: '',
|
||||
name: '',
|
||||
type: '',
|
||||
prdId: '',
|
||||
skinCode: '',
|
||||
operateType: '',
|
||||
maxDuration: 0,
|
||||
minDuration: 0,
|
||||
remarks: ''
|
||||
};
|
||||
this.$refs['form'].resetFields();
|
||||
},
|
||||
addTraining() {
|
||||
this.$refs.form.validate((valid) => {
|
||||
if (valid) {
|
||||
const data = {
|
||||
name: this.operateModel.name,
|
||||
type: this.operateModel.type,
|
||||
prdId: this.operateModel.prdId,
|
||||
skinCode: this.operateModel.skinCode,
|
||||
operateType: this.operateModel.operateType,
|
||||
minDuration: this.operateModel.minDuration,
|
||||
maxDuration: this.operateModel.maxDuration,
|
||||
remarks: this.operateModel.remarks
|
||||
};
|
||||
addTraining(data).then(response => {
|
||||
this.$emit('refresh', [localStore.get('cityCode') || '', localStore.get('skinCode') || '']);
|
||||
this.close();
|
||||
this.$message.success(this.$t('tip.addTrainingSuccessfully'));
|
||||
}).catch(() => {
|
||||
this.$messageBox(this.$t('tip.addTrainingFailed'));
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
edtTraining() {
|
||||
this.$refs.form.validate((valid) => {
|
||||
if (valid) {
|
||||
const data = {
|
||||
id: this.operateModel.id,
|
||||
name: this.operateModel.name,
|
||||
type: this.operateModel.type,
|
||||
prdId: this.operateModel.prdId,
|
||||
skinCode: this.operateModel.skinCode,
|
||||
operateType: this.operateModel.operateType,
|
||||
minDuration: this.operateModel.minDuration,
|
||||
maxDuration: this.operateModel.maxDuration,
|
||||
remarks: this.operateModel.remarks
|
||||
};
|
||||
updateTraining(data).then(response => {
|
||||
this.$emit('refresh', [localStore.get('cityCode') || '', localStore.get('skinCode') || '']);
|
||||
this.close();
|
||||
this.$message.success(this.$t('tip.updateTrainingSuccessfully'));
|
||||
}).catch(() => {
|
||||
this.$messageBox(this.$t('tip.updateTrainingFailed'));
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
</script>
|
||||
@ -1,125 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<pop-menu ref="popMenu" :menu="menu" />
|
||||
<training-draft ref="draft" :node="node" @refresh="refresh" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { DeviceMenu } from '@/scripts/ConstDic';
|
||||
import { launchFullscreen } from '@/utils/screen';
|
||||
import PopMenu from '@/components/PopMenu';
|
||||
import TrainingDraft from './draft';
|
||||
|
||||
export default {
|
||||
name: 'TrainingOperateMenu',
|
||||
components: {
|
||||
PopMenu,
|
||||
TrainingDraft
|
||||
},
|
||||
props: {
|
||||
point: {
|
||||
type: Object,
|
||||
required: true
|
||||
},
|
||||
node: {
|
||||
type: Object,
|
||||
required: true
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
menuShow: false,
|
||||
menu: [],
|
||||
menuCreate: [
|
||||
{
|
||||
label: this.$t('lesson.addTraining'),
|
||||
handler: this.addTrainging
|
||||
}
|
||||
],
|
||||
menuEdit: [
|
||||
{
|
||||
label: this.$t('lesson.editTraining'),
|
||||
handler: this.edtTrainging
|
||||
},
|
||||
{
|
||||
label: this.$t('lesson.demonstration'),
|
||||
handler: this.startTraining
|
||||
}
|
||||
|
||||
]
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
node: function (val, old) {
|
||||
if (val && val.data) {
|
||||
switch (val.data.type) {
|
||||
case 'TrainingType':
|
||||
this.menu = this.menuCreate;
|
||||
break;
|
||||
case 'Training':
|
||||
this.menu = this.menuEdit;
|
||||
break;
|
||||
}
|
||||
}
|
||||
},
|
||||
'$store.state.menuOperation.menuCount': function (val) {
|
||||
if (this.$store.getters['menuOperation/checkDialogIsOpen'](DeviceMenu.Training)) {
|
||||
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;
|
||||
},
|
||||
addTrainging() {
|
||||
this.$refs.draft.show({ event: '01', title: this.$t('lesson.addTraining') });
|
||||
},
|
||||
edtTrainging() {
|
||||
this.$refs.draft.show({ event: '02', title: this.$t('lesson.editTraining') });
|
||||
},
|
||||
delTrainging() {
|
||||
this.$confirm(this.$t('lesson.isConfirmDelete'), this.$t('global.tips'), {
|
||||
confirmButtonText: this.$t('global.confirm'),
|
||||
cancelButtonText: this.$t('global.cancel'),
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
}).catch(() => {
|
||||
this.$message.info({ message: this.$t('lesson.hasCalcelDelete') });
|
||||
});
|
||||
},
|
||||
startTraining() {
|
||||
this.$emit('trainingShow');
|
||||
this.doClose();
|
||||
setTimeout(() => {
|
||||
launchFullscreen();
|
||||
}, 0);
|
||||
},
|
||||
refresh(filterSelect) {
|
||||
this.$emit('refresh', filterSelect);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@ -1,146 +0,0 @@
|
||||
<template>
|
||||
<el-card v-loading="loading" class="map-list-main">
|
||||
<div slot="header" class="clearfix">
|
||||
<span>{{ $t(`lesson.trainingList`) }}</span>
|
||||
</div>
|
||||
<el-input v-model="filterText" :placeholder="$t(`lesson.filterPlaceholder`)" clearable />
|
||||
<el-scrollbar wrap-class="scrollbar-wrapper" :style="{ height: (height-60) +'px' }">
|
||||
<el-tree
|
||||
ref="tree"
|
||||
:data="treeData"
|
||||
:props="defaultProps"
|
||||
node-key="id"
|
||||
:default-expanded-keys="defaultShowKeys"
|
||||
:filter-node-method="filterNode"
|
||||
expand-on-click-node
|
||||
highlight-current
|
||||
:span="22"
|
||||
@node-contextmenu="showContextMenu"
|
||||
@node-click="clickEvent"
|
||||
>
|
||||
<div slot-scope="{ node: nodeScop }">
|
||||
<span v-if="nodeScop.data.type == 'skin'" class="el-icon-news" />
|
||||
<span v-else-if="nodeScop.data.type == 'prd'" class="el-icon-tickets" />
|
||||
<span
|
||||
v-else-if="nodeScop.data.type == 'trainingType'"
|
||||
class="el-icon-document"
|
||||
/>
|
||||
<span
|
||||
v-else-if="nodeScop.data.type == 'training'"
|
||||
class="el-icon-edit-outline"
|
||||
/>
|
||||
<span> {{ nodeScop.label }}</span>
|
||||
</div>
|
||||
</el-tree>
|
||||
</el-scrollbar>
|
||||
<operate-menu ref="menu" :point="point" :node="node" @refresh="refresh" @trainingShow="trainingShow" />
|
||||
</el-card>
|
||||
</template>
|
||||
<script>
|
||||
import { DeviceMenu } from '@/scripts/ConstDic';
|
||||
import { getTrainingTree } from '@/api/jmap/training';
|
||||
import OperateMenu from './operateMenu';
|
||||
|
||||
// 实训录制左侧 数据树
|
||||
export default {
|
||||
name: 'TrainingOperate',
|
||||
components: {
|
||||
OperateMenu
|
||||
},
|
||||
props: {
|
||||
height: {
|
||||
type: Number,
|
||||
required: true
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
loading: true,
|
||||
defaultShowKeys: [],
|
||||
filterText: '',
|
||||
treeData: [],
|
||||
defaultProps: {
|
||||
children: 'children',
|
||||
label: 'name'
|
||||
},
|
||||
point: {
|
||||
x: 0,
|
||||
y: 0
|
||||
},
|
||||
node: {
|
||||
}
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
filterText(val) {
|
||||
this.$refs.tree.filter(val);
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.refresh();
|
||||
},
|
||||
methods: {
|
||||
filterNode(value, data) {
|
||||
if (!value) return true;
|
||||
return data.name.indexOf(value) !== -1;
|
||||
},
|
||||
clickEvent(obj, node, data) {
|
||||
this.$store.dispatch('menuOperation/setPopMenu', { position: null, menu: null });
|
||||
if (obj && obj.type === 'Training') {
|
||||
this.$emit('selectMapSure', obj);
|
||||
}
|
||||
},
|
||||
showContextMenu(e, obj, node, vueElem) {
|
||||
|
||||
if (obj && obj.type === 'TrainingType' || obj.type === 'Training') {
|
||||
e.preventDefault();
|
||||
this.point = {
|
||||
x: e.clientX,
|
||||
y: e.clientY
|
||||
};
|
||||
this.node = node;
|
||||
const menu = DeviceMenu.Training;
|
||||
this.$store.dispatch('menuOperation/setPopMenu', { position: this.point, menu: menu });
|
||||
}
|
||||
},
|
||||
getParent(node) {
|
||||
while (node && node.data.type != 'Skin') {
|
||||
node = node.parent;
|
||||
}
|
||||
|
||||
return node || {};
|
||||
},
|
||||
trainingShow() {
|
||||
this.$emit('trainingStart', { id: this.node.data.id, lessonId: this.getParent(this.node).data.id });
|
||||
},
|
||||
refresh() {
|
||||
this.loading = true;
|
||||
getTrainingTree().then(response => {
|
||||
debugger;
|
||||
this.treeData = response.data;
|
||||
this.defaultShowKeys = [this.$route.params.trainingId];
|
||||
this.$nextTick(() => {
|
||||
this.loading = false;
|
||||
this.$refs.tree.setCurrentKey(this.$route.params.trainingId); // value 绑定的node-key
|
||||
if (this.filterText) {
|
||||
this.$refs.tree.filter(this.filterText);
|
||||
}
|
||||
});
|
||||
}).catch(() => {
|
||||
this.loading = false;
|
||||
this.$messageBox(this.$t('error.refreshFailed'));
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.el-tree {
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
.el-tree-node.is-current>.el-tree-node__content {
|
||||
background-color: #e4e3e3 !important;
|
||||
}
|
||||
</style>
|
||||
@ -1,103 +0,0 @@
|
||||
<template>
|
||||
<div class="main">
|
||||
<div class="mapList" :style="{width: widthLeft+'px'}">
|
||||
<training-category
|
||||
ref="trainingCategory"
|
||||
:height="height"
|
||||
@selectMapSure="selectMapSure"
|
||||
@trainingStart="trainingStart"
|
||||
/>
|
||||
</div>
|
||||
<drap-left :width-left="widthLeft" @drapWidth="drapWidth" />
|
||||
<div>
|
||||
<router-view />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { UrlConfig } from '@/router/index';
|
||||
import { trainingNotify, runDiagramQuit } from '@/api/simulation';
|
||||
import TrainingCategory from './category/tree';
|
||||
import localStore from 'storejs';
|
||||
import drapLeft from '@/views/components/drapLeft/index';
|
||||
|
||||
export default {
|
||||
name: 'TrainingDraft',
|
||||
components: {
|
||||
TrainingCategory,
|
||||
drapLeft
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
widthLeft: localStore.get('LeftWidth') ? Number(localStore.get('LeftWidth')) : 320,
|
||||
trainingObj: null,
|
||||
group: ''
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
width() {
|
||||
return this.$store.state.app.width - 481 - this.widthLeft;
|
||||
},
|
||||
height() {
|
||||
return this.$store.state.app.height - 90;
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
'$store.state.app.windowSizeCount': function() {
|
||||
this.resize();
|
||||
},
|
||||
widthLeft(val) {
|
||||
this.resize(val);
|
||||
},
|
||||
$route() {
|
||||
this.resize();
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.group = this.$route.query.group;
|
||||
this.resize();
|
||||
},
|
||||
async beforeDestroy() {
|
||||
if (this.group) {
|
||||
runDiagramQuit(this.group);
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
selectMapSure(data) {
|
||||
trainingNotify({ trainingId: data.id }).then(resp => {
|
||||
this.group = resp.data;
|
||||
this.$router.push({ path: `${UrlConfig.lesson.record}/${data.id}/${data.name}`, query: { group: resp.data } });
|
||||
}).catch(error => {
|
||||
this.$messageBox(`${this.$t('error.createSimulationFailed')}: ${error.message}`);
|
||||
});
|
||||
},
|
||||
trainingStart(data) {
|
||||
/** 区分演示和正式，需要在演示时设置lessonId为0*/
|
||||
trainingNotify({ trainingId: data.id }).then(resp => {
|
||||
this.$router.push({ path: `${UrlConfig.display}/record`, query: { trainingId: this.$route.params.trainingId, trainingName: this.$route.params.trainingName, group: resp.data, lessonId: 0 } });
|
||||
}).catch(error => {
|
||||
this.$messageBox(`${this.$t('error.createSimulationFailed')}: ${error.message}`);
|
||||
});
|
||||
},
|
||||
drapWidth(width) {
|
||||
this.widthLeft = Number(width);
|
||||
},
|
||||
resize() {
|
||||
this.$store.dispatch('config/resize', { width: this.width, height: this.height });
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style rel="stylesheet/scss" lang="scss" scoped>
|
||||
@import "src/styles/mixin.scss";
|
||||
|
||||
.main {
|
||||
overflow: hidden !important;
|
||||
}
|
||||
|
||||
.mapList {
|
||||
float: left;
|
||||
width: 350px;
|
||||
}
|
||||
</style>
|
||||
@ -1,136 +0,0 @@
|
||||
<template>
|
||||
<div class="blockContext">
|
||||
<div class="mapContext">
|
||||
<map-system-draft ref="mapCanvas" />
|
||||
</div>
|
||||
<div class="stepContext">
|
||||
<el-scrollbar wrap-class="scrollbar-wrapper">
|
||||
<step-manage ref="stepManage" :training-obj="trainingObj" />
|
||||
</el-scrollbar>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import MapSystemDraft from '@/views/mapsystem/index';
|
||||
import StepManage from './stepmanage/index';
|
||||
import { mapGetters } from 'vuex';
|
||||
import { getTrainingDetail, getTrainingStepsDetail } from '@/api/jmap/training';
|
||||
import { getProductDetail } from '@/api/management/mapprd';
|
||||
import { TrainingMode, OperateMode } from '@/scripts/ConstDic';
|
||||
import { loadMapData } from '@/utils/loaddata';
|
||||
import { EventBus } from '@/scripts/event-bus';
|
||||
|
||||
export default {
|
||||
name: 'LessonDraft',
|
||||
components: {
|
||||
MapSystemDraft,
|
||||
StepManage
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
stationObj: null,
|
||||
trainingObj: null,
|
||||
widthLeft: 0
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapGetters('map', [
|
||||
'mapData'
|
||||
]),
|
||||
group() {
|
||||
return this.$route.query.group;
|
||||
},
|
||||
trainingId() {
|
||||
return this.$route.params.trainingId;
|
||||
},
|
||||
width() {
|
||||
return this.$store.state.app.width - 481 - this.widthLeft;
|
||||
},
|
||||
height() {
|
||||
return this.$store.state.app.height - 90;
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
$route(newVal) {
|
||||
this.initLoadData();
|
||||
},
|
||||
'$store.state.map.mapViewLoadedCount': function() {
|
||||
if (this.trainingId) {
|
||||
getTrainingStepsDetail(this.trainingId, { group: this.group }).then(response => {
|
||||
this.$store.dispatch('training/setTrainingData', response.data);
|
||||
}).catch(() => {
|
||||
this.$messageBox(this.$t('error.getMapStepsFailed'));
|
||||
this.endViewLoading();
|
||||
});
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.initLoadData();
|
||||
},
|
||||
beforeDestroy() {
|
||||
this.$store.dispatch('map/mapClear');
|
||||
},
|
||||
methods: {
|
||||
endViewLoading(isSuccess) {
|
||||
if (!isSuccess) {
|
||||
this.$store.dispatch('map/mapClear');
|
||||
}
|
||||
|
||||
this.$nextTick(() => {
|
||||
EventBus.$emit('viewLoading', false);
|
||||
});
|
||||
},
|
||||
initLoadData() {
|
||||
this.$store.dispatch('training/end', TrainingMode.EDIT);
|
||||
this.$store.dispatch('training/reset');
|
||||
this.$store.dispatch('training/changeOperateMode', { mode: OperateMode.NORMAL }); // 默认为正常模式
|
||||
|
||||
if (parseInt(this.trainingId)) {
|
||||
this.trainingObj = { id: this.trainingId, name: this.$route.params.trainingName };
|
||||
// 获取实训的详细数据
|
||||
// 加载地图数据
|
||||
// 设置实训数据
|
||||
getTrainingDetail(this.trainingId).then(resp => {
|
||||
const detail = resp.data;
|
||||
getProductDetail(detail.prdId).then(rest => {
|
||||
const data = rest.data;
|
||||
debugger;
|
||||
loadMapData(detail.skinCode).then(() => {
|
||||
this.$store.dispatch('training/setPrdType', data.prdType);
|
||||
}).catch(() => {
|
||||
this.$messageBox(this.$t('error.loadMapDataFailed'));
|
||||
this.endViewLoading();
|
||||
});
|
||||
});
|
||||
}).catch(() => {
|
||||
this.$messageBox(this.$t('error.getMapDetailFailed'));
|
||||
this.endViewLoading();
|
||||
});
|
||||
} else {
|
||||
this.endViewLoading();
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style rel="stylesheet/scss" lang="scss" scoped>
|
||||
@import "src/styles/mixin.scss";
|
||||
|
||||
.blockContext {
|
||||
// float: left;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.mapContext {
|
||||
float: left;
|
||||
}
|
||||
|
||||
.stepContext {
|
||||
float: right;
|
||||
width: 480px;
|
||||
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
|
||||
}
|
||||
</style>
|
||||
@ -1,84 +0,0 @@
|
||||
<template>
|
||||
<el-card class="map-list-main">
|
||||
<div slot="header" class="clearfix">
|
||||
<span>
|
||||
{{ $t('lesson.trainingName') }} :
|
||||
<b>{{ trainingName }}</b>
|
||||
</span>
|
||||
<el-button type="text" :disabled="started" style="float: right; padding: 3px 0" @click="reset">{{ $t('global.reset') }}</el-button>
|
||||
</div>
|
||||
<el-tabs v-model="enabledTab" class="ViewControl" type="card">
|
||||
<el-tab-pane :label="$t('lesson.stationList')" name="StationList">
|
||||
<station-list-operate ref="stationList" :height="stationListHeight" @getStationObj="getStationObj" />
|
||||
</el-tab-pane>
|
||||
<el-tab-pane :label="$t('lesson.stepInfo')" name="StepInfo">
|
||||
<step-Info-operate ref="stepInfo" :height="stepDraftHeight" :training-obj="trainingObj" :station-obj="stationObj" />
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</el-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapGetters } from 'vuex';
|
||||
import StepInfoOperate from './stepinfo/index';
|
||||
import StationListOperate from './stationlist/index';
|
||||
|
||||
export default {
|
||||
name: 'LessonDraft',
|
||||
components: {
|
||||
StepInfoOperate,
|
||||
StationListOperate
|
||||
},
|
||||
props: {
|
||||
trainingObj: {
|
||||
type: Object,
|
||||
default() {
|
||||
return null;
|
||||
}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
enabledTab: 'StationList',
|
||||
stationObj: null,
|
||||
point: {
|
||||
x: 0,
|
||||
y: 0
|
||||
}
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
mapName: function () {
|
||||
return this.map.name || this.$t('lesson.selectMap');
|
||||
},
|
||||
trainingName: function () {
|
||||
let name = this.$t('lesson.selectTraining');
|
||||
if (this.trainingObj) {
|
||||
name = this.trainingObj.name;
|
||||
}
|
||||
return name;
|
||||
},
|
||||
...mapGetters('map', [
|
||||
'map'
|
||||
]),
|
||||
...mapGetters('training', [
|
||||
'started'
|
||||
]),
|
||||
stepDraftHeight() {
|
||||
return this.$store.state.app.height - 150;
|
||||
},
|
||||
stationListHeight() {
|
||||
return this.$store.state.app.height - 195;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getStationObj: function (data) {
|
||||
this.stationObj = data;
|
||||
},
|
||||
reset() {
|
||||
this.$refs.stepInfo.reset();
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
@ -1,85 +0,0 @@
|
||||
<template>
|
||||
<div class="mainContext">
|
||||
<el-input v-model="filterText" :placeholder="$t('lesson.findStationPlaceholder')" clearable />
|
||||
<div class="treeMenu" :style="{ height: height +'px' }">
|
||||
<el-scrollbar wrap-class="scrollbar-wrapper">
|
||||
<el-tree
|
||||
ref="StationTree"
|
||||
class="treeList"
|
||||
:data="stationData"
|
||||
:props="defaultProps"
|
||||
:filter-node-method="filterNode"
|
||||
accordion
|
||||
default-expand-all
|
||||
:expand-on-click-node="false"
|
||||
@node-click="clickEvent"
|
||||
>
|
||||
<span slot-scope="{ node }"> {{ node.label }}</span>
|
||||
</el-tree>
|
||||
</el-scrollbar>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { mapGetters } from 'vuex';
|
||||
|
||||
export default {
|
||||
name: 'StationListOperate',
|
||||
props: {
|
||||
height: {
|
||||
type: Number,
|
||||
required: true
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
filterText: '',
|
||||
stationData: [],
|
||||
defaultProps: {
|
||||
children: 'children',
|
||||
label: 'label'
|
||||
}
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapGetters('map', [
|
||||
'stationList'
|
||||
])
|
||||
},
|
||||
watch: {
|
||||
'stationList': function (val, old) {
|
||||
if (val) {
|
||||
this.stationData = [];
|
||||
val.forEach(elem => {
|
||||
if (elem.visible) {
|
||||
this.stationData.push({
|
||||
id: elem.code,
|
||||
label: elem.name
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
filterText(val) {
|
||||
this.$refs.StationTree.filter(val);
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
},
|
||||
methods: {
|
||||
filterNode(value, data) {
|
||||
if (!value) return true;
|
||||
return data.label.indexOf(value) !== -1;
|
||||
},
|
||||
clickEvent(obj, node, data) {
|
||||
this.$store.dispatch('training/updateOffsetStationCode', { offsetStationCode: obj.id });
|
||||
this.$emit('getStationObj', obj);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style rel="stylesheet/scss" lang="scss" scoped>
|
||||
.treeList {
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
</style>
|
||||
@ -1,51 +0,0 @@
|
||||
<template>
|
||||
<el-tabs>
|
||||
<el-scrollbar wrap-class="scrollbar-wrapper">
|
||||
<div class="mainContext" :style="{height: height +'px' }">
|
||||
<step-operate ref="step" :training-obj="trainingObj" :station-obj="stationObj" />
|
||||
<list-operate ref="list" :training-obj="trainingObj" />
|
||||
</div>
|
||||
</el-scrollbar>
|
||||
</el-tabs>
|
||||
</template>
|
||||
<script>
|
||||
import ListOperate from './list';
|
||||
import StepOperate from './step';
|
||||
|
||||
export default {
|
||||
name: 'StepInfoOperate',
|
||||
components: {
|
||||
ListOperate,
|
||||
StepOperate
|
||||
},
|
||||
props: {
|
||||
height: {
|
||||
type: Number,
|
||||
required: true
|
||||
},
|
||||
stationObj: {
|
||||
type: Object,
|
||||
default() {
|
||||
return null;
|
||||
}
|
||||
},
|
||||
trainingObj: {
|
||||
type: Object,
|
||||
default() {
|
||||
return null;
|
||||
}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
},
|
||||
methods: {
|
||||
reset: function () {
|
||||
this.$refs.step.reset();
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@ -1,37 +0,0 @@
|
||||
<template>
|
||||
<div class="mainContext">
|
||||
<el-table ref="stepTree" :data="steps" border style="width: 100%; padding-bottom: 30px;" height="320px">
|
||||
<el-table-column prop="order" :label="$t('lesson.stepNo')" width="80" />
|
||||
<el-table-column prop="code" :label="$t('lesson.deviceNumber')" width="180" />
|
||||
<el-table-column prop="operation" :label="$t('lesson.operationType')" />
|
||||
</el-table>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { mapGetters } from 'vuex';
|
||||
|
||||
export default {
|
||||
name: 'TreeOperate',
|
||||
props: {
|
||||
trainingObj: {
|
||||
type: Object,
|
||||
default() {
|
||||
return null;
|
||||
}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapGetters('training', [
|
||||
'steps'
|
||||
])
|
||||
},
|
||||
methods: {
|
||||
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@ -1,233 +0,0 @@
|
||||
<template>
|
||||
<div class="mainContext">
|
||||
<el-form ref="form" :label-width="$i18n.locale == 'zh'? '90px': '140px'" :model="stepModel" :rules="rules" size="mini">
|
||||
<el-form-item :label="`${$t('lesson.selectMode')}:`">
|
||||
<el-radio-group v-model="modeSelect" size="mini" @change="changeOperateMode">
|
||||
<el-radio :label="OperateMode.ADMIN" border>{{ $t('global.coachingModel') }}</el-radio>
|
||||
<el-radio :label="OperateMode.NORMAL" border>{{ $t('global.normalMode') }}</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item :label="`${$t('lesson.stepNo')}:`">
|
||||
<el-input v-model="index" :disabled="true" />
|
||||
</el-form-item>
|
||||
<el-form-item :label="`${$t('lesson.deviceNumber')}:`" prop="code">
|
||||
<el-input v-model="stepModel.code" :disabled="true" />
|
||||
</el-form-item>
|
||||
<el-form-item :label="`${$t('lesson.deviceType')}:`" prop="type">
|
||||
<el-input v-model="stepModel.type" :disabled="true" />
|
||||
</el-form-item>
|
||||
<el-form-item :label="`${$t('lesson.operationType')}:`" prop="operation">
|
||||
<el-input v-model="stepModel.operation" :disabled="true" />
|
||||
</el-form-item>
|
||||
<el-form-item :label="`${$t('lesson.returnValue')}:`" prop="returnCode">
|
||||
<el-input v-model="stepModel.returnCode" :disabled="true" />
|
||||
</el-form-item>
|
||||
<el-form-item :label="`${$t('lesson.tips')}:`" prop="tipMessage">
|
||||
<el-input
|
||||
v-model="stepModel.tipMessage"
|
||||
type="textarea"
|
||||
:autosize="{ minRows: 4, maxRows: 4}"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button-group>
|
||||
<el-button :loading="saveLoading" :disabled="saveDisabled" size="small" @click="start">
|
||||
{{ $t('lesson.startRecording') }}
|
||||
</el-button>
|
||||
<el-button v-if="started" size="small" @click="next">
|
||||
{{ $t('lesson.nextStep') }}
|
||||
</el-button>
|
||||
<el-button v-if="started" size="small" @click="end">
|
||||
{{ $t('lesson.endRecording') }}
|
||||
</el-button>
|
||||
</el-button-group>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { mapGetters } from 'vuex';
|
||||
import { saveTrainingInitStatus, saveTrainingStepsData, startTraining, clearTraining } from '@/api/jmap/training';
|
||||
import { OperateMode } from '@/scripts/ConstDic';
|
||||
import OperateHandler from '@/scripts/plugin/trainingOperateHandler';
|
||||
import { EventBus } from '@/scripts/event-bus';
|
||||
|
||||
export default {
|
||||
name: 'StepOperate',
|
||||
props: {
|
||||
trainingObj: {
|
||||
type: Object,
|
||||
default() {
|
||||
return null;
|
||||
}
|
||||
},
|
||||
stationObj: {
|
||||
type: Object,
|
||||
default () {
|
||||
return { id: '', name: '' };
|
||||
}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
OperateMode: OperateMode,
|
||||
modeSelect: OperateMode.NORMAL,
|
||||
index: 1,
|
||||
saveLoading: false,
|
||||
saveDisabled: false,
|
||||
stepModel: {
|
||||
code: '',
|
||||
type: '',
|
||||
operation: '',
|
||||
returnCode: '',
|
||||
tipMessage: ''
|
||||
}
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapGetters('training', [
|
||||
'tempStep',
|
||||
'steps',
|
||||
'started'
|
||||
]),
|
||||
...mapGetters('map', [
|
||||
'mapDeviceStatus'
|
||||
]),
|
||||
rules() {
|
||||
return {
|
||||
type: { required: true, message: this.$t('rules.deviceTypeNotNull'), trigger: 'change' },
|
||||
operation: { required: true, message: this.$t('rules.operationTypeNotNull'), trigger: 'change' },
|
||||
tipMessage: { required: true, message: this.$t('rules.tipsNotNull'), trigger: 'change' }
|
||||
};
|
||||
},
|
||||
group() {
|
||||
return this.$route.query.group;
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
'tempStep': function (val) {
|
||||
if (val && this.started) {
|
||||
this.$refs.form.resetFields();
|
||||
this.stepModel.code = val.code;
|
||||
this.stepModel.type = val.type;
|
||||
this.stepModel.operation = val.operation;
|
||||
this.stepModel.returnCode = val.val;
|
||||
}
|
||||
},
|
||||
$route() {
|
||||
this.modeSelect = OperateMode.NORMAL;
|
||||
this.saveDisabled = false;
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.changeOperateMode(this.modeSelect);
|
||||
},
|
||||
methods: {
|
||||
changeOperateMode(handle) {
|
||||
this.$store.dispatch('training/changeOperateMode', { mode: handle });
|
||||
},
|
||||
reset() {
|
||||
if (this.trainingObj) {
|
||||
const data = { id: this.trainingObj.id };
|
||||
clearTraining(data).then(response => {
|
||||
startTraining(data, this.group).then(response => {
|
||||
OperateHandler.cleanOperates(); // 清空提示信息
|
||||
this.$refs.form.resetFields();
|
||||
this.$store.dispatch('training/over');
|
||||
this.$store.dispatch('menuOperation/reset');
|
||||
this.$store.dispatch('menuOperation/handleBreakFlag', { break: false });
|
||||
this.$store.dispatch('training/emitTipFresh');
|
||||
this.$store.dispatch('map/clearJlmapTrainView').then(() => {
|
||||
this.$store.dispatch('training/setMapDefaultState').then(() => {
|
||||
this.index = 1;
|
||||
this.$store.dispatch('training/setSteps', []);
|
||||
this.$store.dispatch('training/updateMapState', this.mapDeviceStatus);
|
||||
});
|
||||
});
|
||||
});
|
||||
}).catch(() => {
|
||||
this.$messageBox(this.$t('error.resetFailed'));
|
||||
});
|
||||
}
|
||||
},
|
||||
start() {
|
||||
this.saveLoading = true;
|
||||
if (this.trainingObj) {
|
||||
const data = { id: this.trainingObj.id };
|
||||
saveTrainingInitStatus(data, this.group).then(response => {
|
||||
startTraining(data, this.group).then(response => {
|
||||
this.index = 1;
|
||||
this.$store.dispatch('training/start');
|
||||
this.$store.dispatch('training/setSteps', []);
|
||||
this.$store.dispatch('training/emitTipFresh');
|
||||
this.$refs.form.resetFields();
|
||||
this.saveLoading = false;
|
||||
this.saveDisabled = true;
|
||||
}).catch(() => {
|
||||
this.$messageBox(this.$t('error.startTrainingFailed'));
|
||||
this.saveLoading = false;
|
||||
});
|
||||
}).catch(() => {
|
||||
this.$messageBox(this.$t('error.saveBackgroundFailed'));
|
||||
this.saveLoading = false;
|
||||
});
|
||||
}
|
||||
},
|
||||
saveStep(callback) {
|
||||
this.$refs.form.validate((valid) => {
|
||||
if (valid) {
|
||||
if (this.stepModel.tipMessage) {
|
||||
const model = {
|
||||
order: this.index,
|
||||
code: this.stepModel.code,
|
||||
type: this.stepModel.type,
|
||||
operation: this.stepModel.operation,
|
||||
val: this.stepModel.returnCode,
|
||||
tip: this.stepModel.tipMessage
|
||||
};
|
||||
|
||||
this.$store.dispatch('training/addStep', model).then((valid) => {
|
||||
if (valid) {
|
||||
this.index = this.index + 1;
|
||||
}
|
||||
});
|
||||
this.$store.dispatch('menuOperation/handleBreakFlag');
|
||||
}
|
||||
this.$refs.form.resetFields();
|
||||
}
|
||||
});
|
||||
this.$nextTick(() => { EventBus.$emit('closeMenu'); });
|
||||
if (typeof callback === typeof function () { }) {
|
||||
callback();
|
||||
}
|
||||
},
|
||||
next() {
|
||||
this.saveStep();
|
||||
},
|
||||
end() {
|
||||
this.saveStep(() => {
|
||||
if (this.stationObj && this.stationObj.id) {
|
||||
this.index = 1;
|
||||
this.$store.dispatch('training/over');
|
||||
const model = {
|
||||
id: this.trainingObj.id,
|
||||
steps: this.steps,
|
||||
locateDeviceCode: this.stationObj.id
|
||||
};
|
||||
saveTrainingStepsData(model).then(response => {
|
||||
this.$refs.form.resetFields();
|
||||
this.$store.dispatch('training/emitTipFresh');
|
||||
this.$message.success(this.$t('tip.savedStepDataSuccessfully'));
|
||||
this.saveDisabled = false;
|
||||
}).catch(() => {
|
||||
this.saveDisabled = false;
|
||||
this.$messageBox(this.$t('tip.savedStepDataFailed'));
|
||||
});
|
||||
} else {
|
||||
this.$messageBox(this.$t('rules.selectAssociatedStation'));
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
Loading…
Reference in New Issue
Block a user