joylink/rt-sim-training-client
6
0
Fork 0
Code Issues 3 Pull Requests Actions Packages Projects Releases Wiki Activity

实训条件编辑

Browse Source
This commit is contained in:
dong 2022-08-29 18:25:52 +08:00
parent 6127e21279
commit 46b807e36e
7 changed files with 641 additions and 92 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/api/trainingManage.js
View File

@ -95,3 +95,11 @@ export function updateTrainingMaplocation(data) {
data
});
}
/** 获取实训表达式条件素材 */
export function getTrainingMaterials() {
return request({
url: `/api/v2/draft/training/expression/materials`,
method: 'get'
});
}

4
src/i18n/langs/en/trainingManage.js
View File

@ -24,5 +24,7 @@ export default {
roleSelect: 'role choices',
triggerCondition: 'triggering condition',
operateCondition: 'operating conditions',
completionCondition: 'completion conditions'
completionCondition: 'completion conditions',
editCompletionCondition: 'Edit completion conditions',
editOperationCondition: 'Edit operation condition'
};

4
src/i18n/langs/zh/trainingManage.js
View File

@ -24,5 +24,7 @@ export default {
roleSelect: '角色选择',
triggerCondition: '触发条件',
operateCondition: '操作条件',
completionCondition: '完成条件'
completionCondition: '完成条件',
editCompletionCondition: '编辑完成条件',
editOperationCondition: '编辑运算条件'
};

26
src/scripts/ConstConfig.js
View File

@ -264,6 +264,32 @@ export default {
{value:'DOWN_OUT_STATION', label:'下行出站'},
{value:'UP_OUT_STATION', label:'上行出站'},
{value:'BOTH_WAY_STATION', label:'双向'}
],
conditionList: [
{ label: '标识状态', value: 'S' },
{ label: '表达式', value: 'E' },
{ label: '代表值', value: 'V' }
],
operationList: [
{ label: '与', value: 'AND' },
{ label: '或', value: 'OR' },
{ label: '非', value: 'NOT' },
{ label: '是', value: 'IS' },
{ label: '等于', value: 'EQ' },
{ label: '不等于', value: 'NEQ' },
{ label: '大于', value: 'GT' },
{ label: '大于等于', value: 'GTOE' },
{ label: '小于', value: 'LT' },
{ label: '小于等于', value: 'LTOE' }
],
operationDeviceList: [
{ label: '区段', value: 'Section' },
{ label: '道岔', value: 'Switch' },
{ label: '信号机', value: 'Signal' },
{ label: '站台', value: 'Stand' },
{ label: '车站', value: 'Station' },
{label:'进路', value:'Route'},
{ label: '列车', value: 'Train' }
]
}
};

243
src/views/trainingManage/editCondition.vue Normal file
View File

@ -0,0 +1,243 @@
<template>
<div>
<div class="conditionTab">
<div v-if="tabVisible" class="conditionTabLable" @click="minisize">
<span class="titleStyle">{{ title }}</span>
</div>
</div>
<el-dialog :title="title" :visible.sync="dialogVisible" :width="dialogWidth" :modal="false" :close-on-click-modal="false" :before-close="doClose" center :style="{'margin-left': dialogMarginLeft + 'px'}">
<el-table
:data="tableData"
border
>
<el-table-column label="条件类型" width="100px">
<template slot-scope="scope">
<span>{{ getConditionName(scope.row.t) }}</span>
</template>
</el-table-column>
<el-table-column label="运算符" width="100px">
<template slot-scope="scope">
<el-select v-model="scope.row.operator" size="mini" placeholder="请选择运算符">
<el-option
v-for="option in ConstSelect.operationList"
:key="option.value"
:label="option.label"
:value="option.value"
/>
</el-select>
</template>
</el-table-column>
<el-table-column label="值1">
<template slot-scope="scope">
<span>{{ getValueName(scope.row.valuables, 0) }}</span>
<el-button size="mini" style="margin-left: 10px" @click="editValue1(scope.$index, scope.row)">编辑</el-button>
</template>
</el-table-column>
<el-table-column label="值2">
<template slot-scope="scope">
<span v-show="showCondition2(scope.row.operator)">{{ getValueName(scope.row.valuables, 1) }}</span>
<el-button size="mini" style="margin-left: 10px" :disabled="!showCondition2(scope.row.operator)" @click="editValue2(scope.$index, scope.row)">编辑</el-button>
</template>
</el-table-column>
<el-table-column label="操作" width="80px">
<template slot-scope="scope">
<el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
</template>
</el-table-column>
</el-table>
<span slot="footer" class="dialog-footer">
<el-button size="small" type="primary" @click="doSave">保存</el-button>
<el-button size="small" @click="doClose">取消</el-button>
</span>
</el-dialog>
<Expression ref="expression" v-dialogDrag :materials-list="materialsList" @editExpression="editExpression" />
</div>
</template>
<script>
import ConstConfig from '@/scripts/ConstConfig';
import Expression from './expression.vue';
export default {
name: 'EditCondition',
components:{
Expression
},
props: {
materialsList: {
type: Array,
default() {
return [];
}
}
},
data() {
return {
dialogWidth: '800px',
tabVisible: false,
dialogVisible: false,
formModel: {
t: 'E',
operator: 'EQ',
valuables: []
},
formModel2: {
condition1: '',
condition2: ''
},
tableData: [],
defaultProps: {
children: 'valuables',
label: 't'
},
rowIndex: 0,
conditionKey: ''
};
},
computed: {
ConstSelect() {
return ConstConfig.ConstSelect;
},
title() {
const keyObj = {
triggerCondition: '编辑触发条件',
operateCondition : '编辑操作条件',
completionCondition: '编辑完成条件'
};
const t = keyObj[this.conditionKey] || this.$t('trainingManage.editCompletionCondition');
return t;
},
dialogMarginLeft() {
const w = this.$store.state.app.width;
const ml = (w - parseInt(this.dialogWidth)) / 2;
return ml;
},
group() {
return this.$route.query.group;
}
},
watch: {},
methods: {
showCondition2(operator) {
let s = true;
const arr = ['NOT', 'IS'];
if (arr.includes(operator)) {
s = false;
}
return s;
},
editExpression(data, index, valueIndex) {
let tData = this.tableData;
if (tData[index]) {
tData = tData[index].valuables;
}
tData.splice(valueIndex, 1, data);
console.log(this.tableData, '----');
},
getConditionName(t) {
let n = '表达式';
const findObj = ConstConfig.ConstSelect.conditionList.find(item => {
return item.value == t;
});
if (findObj) {
n = findObj.label;
}
return n;
},
getOperatorName(o) {
let n = '等于';
const findObj = ConstConfig.ConstSelect.operationList.find(item => {
return item.value == o;
});
if (findObj) {
n = findObj.label;
}
return n;
},
getValueName(list, index) {
const row = list[index] || {};
let n = '';
switch (row.t) {
case 'V':
n = `值为${row.v}`;
break;
case 'S':
n = `${row.elementCode}设备的${row.filedName}属性`;
break;
case 'E':
n = '';
break;
}
return n;
},
editValue1(index, row) {
console.log(index, row);
this.$refs.expression.doShow(row.valuables[0], index, 0);
},
editValue2(index, row) {
console.log(index, row);
this.$refs.expression.doShow(row.valuables[1], index, 1);
},
handleDelete(index, row) {
console.log(index, row);
},
doSave() {
console.log('保存', this.tableData);
this.$emit('editConditionFn', this.tableData[0], this.rowIndex, this.conditionKey);
this.doClose();
},
minisize() {
this.dialogVisible = true;
},
doShow(data, rowIndex, conditionKey) {
this.dialogVisible = true;
this.tabVisible = true;
if (data) {
this.tableData = [data];
} else {
this.tableData = [
{
t: 'E',
operator: 'EQ',
valuables: []
}
];
}
this.rowIndex = rowIndex;
this.conditionKey = conditionKey;
},
doClose() {
this.dialogVisible = false;
}
}
};
</script>
<style lang="scss" scoped>
/deep/ .el-dialog__wrapper {
width: 1px;
height: 1px;
top: auto;
right: auto;
bottom: auto;
left: auto;
overflow: visible !important;
}
.conditionTab{
position: absolute;
z-index: 10;
right: 12px;
top: calc(45% + 200px);
}
.conditionTabLable{
position: absolute;
background: #fff;
border-radius: 5px 0px 0px 5px ;
padding: 5px 0px;
width: 23px;
text-align: center;
left: 50%;
transform: translateX(-50%);
cursor: pointer;
top:-28px;
}
</style>

192
src/views/trainingManage/editDetails.vue
View File

@ -8,7 +8,54 @@
<el-dialog :title="title" :visible.sync="dialogVisible" :width="dialogWidth" :modal="false" :close-on-click-modal="false" :before-close="doClose" center :style="{'margin-left': dialogMarginLeft + 'px'}">
<div class="stepListBox">
<el-button size="small" type="primary" @click="addStep">新增步骤</el-button>
<QueryListPage ref="queryListPage" :query-form="queryForm" :query-list="queryList" />
<el-table
:data="tableData"
height="500px"
border
>
<el-table-column type="index" label="序号" width="50" />
<el-table-column :label="$t('trainingManage.roleSelect')" width="200">
<template slot-scope="scope">
<el-select v-model="scope.row.memberId" placeholder="请选择" size="mini">
<el-option
v-for="item in roleList"
:key="item.id"
:label="item.label"
:value="item.id"
/>
</el-select>
</template>
</el-table-column>
<el-table-column :label="$t('trainingManage.stepDescription')">
<template slot-scope="scope">
<span>{{ scope.row.description }}</span>
</template>
</el-table-column>
<el-table-column :label="$t('trainingManage.triggerCondition')">
<template slot-scope="scope">
<span>{{ getConditionName(scope.row, 'triggerCondition') }}</span>
<el-button style="margin-left: 10px" size="mini" @click="handleCondition(scope.$index, scope.row, 'triggerCondition')">{{ $t('global.edit') }}</el-button>
</template>
</el-table-column>
<el-table-column :label="$t('trainingManage.operateCondition')">
<template slot-scope="scope">
<span>{{ getConditionName(scope.row, 'operateCondition') }}</span>
<el-button style="margin-left: 10px" size="mini" @click="handleCondition(scope.$index, scope.row, 'operateCondition')">{{ $t('global.edit') }}</el-button>
</template>
</el-table-column>
<el-table-column :label="$t('trainingManage.completionCondition')">
<template slot-scope="scope">
<span>{{ getConditionName(scope.row, 'completionCondition') }}</span>
<el-button style="margin-left: 10px" size="mini" @click="handleCondition(scope.$index, scope.row, 'completionCondition')">{{ $t('global.edit') }}</el-button>
</template>
</el-table-column>
<el-table-column :label="$t('global.operate')" width="200">
<template slot-scope="scope">
<el-button size="mini" type="primary" @click="handleEditOperate(scope.$index, scope.row)">{{ $t('global.edit') }}</el-button>
<el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">{{ $t('global.delete') }}</el-button>
</template>
</el-table-column>
</el-table>
</div>
<span slot="footer" class="dialog-footer">
<el-button size="small" type="primary" @click="updateMapLocation">{{ $t('trainingManage.mapLocation') }}</el-button>
@ -16,18 +63,22 @@
<el-button size="small" type="success" @click="saveStepData">{{ $t('trainingManage.saveStepData') }}</el-button>
</span>
</el-dialog>
<EditCondition ref="editCondition" v-dialogDrag :materials-list="materialsList" @editConditionFn="editConditionFn" />
</div>
</template>
<script>
import { updateTrainingStep, getTrainingAll, updateTrainingBackgroud, getTrainingStepList, updateTrainingMaplocation } from '@/api/trainingManage';
import { updateTrainingStep, getTrainingAll, updateTrainingBackgroud, getTrainingStepList, updateTrainingMaplocation, getTrainingMaterials } from '@/api/trainingManage';
import { assignUsersPlayRoles } from '@/api/jointSimulation';
import Vue from 'vue';
import {covertMemberData} from '@/views/newMap/displayNew/utils';
import EditCondition from './editCondition.vue';
export default {
name: 'EditDetails',
components:{},
components:{
EditCondition
},
props: {
editData: {
type: Object,
@ -41,6 +92,9 @@ export default {
dialogWidth: '1100px',
tabVisible: false,
dialogVisible: false,
roleList: [],
tableData: [],
materialsList: [],
formModel: {
mapLocationJson: '',
// runPlanId:'',
@ -50,73 +104,6 @@ export default {
// memberJson: '',
// playerIdJson: '',
failureConditionJson: ''
},
queryForm: {
show: false
},
queryList: {
height: '500px',
indexShow: true,
paginationHiden: true,
selectCheckShow: false,
data: [],
columns: [
// {
// title: this.$t('trainingManage.stepNum'),
// width: '80',
// prop: 'id',
// type: 'basic',
// edit: true
// },
{
title: this.$t('trainingManage.roleSelect'),
width: '200',
prop: 'memberId',
type: 'select',
options: []
},
{
title: this.$t('trainingManage.stepDescription'),
prop: 'description',
type: 'basic',
edit: true
},
{
title: this.$t('trainingManage.triggerCondition'),
prop: 'triggerCondition',
type: 'basic',
edit: true
},
{
title: this.$t('trainingManage.operateCondition'),
prop: 'operations',
type: 'basic'
},
{
title: this.$t('trainingManage.completionCondition'),
prop: 'completionCondition',
type: 'basic',
edit: true
},
{
type: 'button',
title: this.$t('global.operate'),
width: '200',
buttons: [
{
name: '编辑步骤',
type: 'primary',
handleClick: this.handleEditOperate
},
{
name: this.$t('global.delete'),
type: 'danger',
handleClick: this.handleDelete
}
]
}
]
}
};
},
@ -148,25 +135,35 @@ export default {
result.deviceListData.forEach(item => {
list = list.concat(item);
});
list.forEach(every => {
every.code = every.id;
every.name = `${every.label}(${every.type})`;
});
const colObj = this.queryList.columns.find(item => {
return item.prop == 'memberId';
});
if (colObj) {
colObj.options = list;
}
this.roleList = list;
}
}
},
methods: {
editConditionFn(data, index, key) {
this.tableData[index][key] = data;
this.dialogVisible = true;
console.log(data, index, key, this.tableData, '---val---');
},
getRoleSelect(v) {
let name = '';
const colObj = this.roleList.find(item => {
return item.value == v;
});
if (colObj) {
name = colObj.label;
}
return name;
},
getConditionName(row, key) {
const n = row[key] || '';
return n;
},
addStep() {
const lastIndex = this.queryList.data.length - 1;
const lastIndex = this.tableData.length - 1;
let mId = '';
if (this.queryList.data[lastIndex]) {
mId = this.queryList.data[lastIndex].memberId || '';
if (this.tableData[lastIndex]) {
mId = this.tableData[lastIndex].memberId || '';
}
const obj = {
// id: lastIndex + 2 + '',
@ -177,7 +174,7 @@ export default {
// failureCondition: [],
// operations: []
};
this.queryList.data.push(obj);
this.tableData.push(obj);
},
setOperations(data) {
this.queryList.data.forEach(item => {
@ -193,9 +190,14 @@ export default {
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
this.queryList.data.splice(index, 1);
this.tableData.splice(index, 1);
}).catch(e => {});
},
handleCondition(index, row, key) {
console.log(key, '条件', index, row);
this.$refs.editCondition.doShow(row[key], index, key);
this.doClose();
},
handleEditOperate(index, row) {
const member = this.$store.state.training.memberData[row.memberId];
if (!member.userId) {
@ -214,10 +216,20 @@ export default {
this.getStepList(data);
this.dialogVisible = true;
this.tabVisible = true;
this.getMaterials();
},
getMaterials() {
getTrainingMaterials().then(res => {
console.log(res, 'Materials');
this.materialsList = res.data;
}).catch(err => {
console.log(err, 'Materials----');
this.materialsList = [];
});
},
saveStepData() {
const list = [];
this.queryList.data.forEach((item, index) => {
this.tableData.forEach((item, index) => {
const obj = {
...item,
id: index + 1 + ''
@ -240,10 +252,10 @@ export default {
getStepList(data) { // 获取步骤
getTrainingStepList(data.id).then(res => {
console.log(res, '获取步骤成功');
this.queryList.data = res.data;
this.tableData = res.data;
}).catch(err => {
console.log(err, '获取步骤失败');
this.queryList.data = [];
this.tableData = [];
});
},
getTrainingAllInfo(data) {
@ -252,7 +264,7 @@ export default {
this.formModel[key] = res.data[key] || '';
if (key == 'stepJson') {
const sList = res.data[key] ? JSON.parse(res.data[key]) : [];
this.queryList.data = Object.prototype.toString.call(sList) === '[object Array]' ? sList : [];
this.tableData = Object.prototype.toString.call(sList) === '[object Array]' ? sList : [];
}
});
console.log(res, this.formModel, '获取详细信息成功');
@ -261,7 +273,7 @@ export default {
Object.keys(this.formModel).forEach(key => {
this.formModel[key] = '';
});
this.queryList.data = [];
this.tableData = [];
});
},
updateMapLocation() {

256
src/views/trainingManage/expression.vue Normal file
View File

@ -0,0 +1,256 @@
<template>
<el-dialog :title="title" :visible.sync="dialogVisible" :width="dialogWidth" :modal="false" :close-on-click-modal="false" :before-close="doClose" center :style="{'margin-left': dialogMarginLeft + 'px'}">
<el-form ref="formModel" :model="formModel" :rules="rules" label-width="100px">
<el-form-item label="条件类型" prop="t">
<el-select v-model="formModel.t" placeholder="请选择条件类型" size="mini">
<el-option
v-for="option in conditionList"
:key="option.value"
:label="option.label"
:value="option.value"
/>
</el-select>
</el-form-item>
<el-form-item v-if="showExpression" label="运算符" prop="operator">
<el-select v-model="formModel.operator" placeholder="请选择运算符" size="mini">
<el-option
v-for="option in ConstSelect.operationList"
:key="option.value"
:label="option.label"
:value="option.value"
/>
</el-select>
</el-form-item>
<el-form-item v-if="showDevice" label="设备类型" prop="elementCode">
<el-select v-model="deviceType" clearable placeholder="请选择设备类型" size="mini">
<el-option
v-for="option in deviceTypeList"
:key="option.value"
:label="option.label"
:value="option.value"
/>
</el-select>
</el-form-item>
<el-form-item v-if="showDevice" label="设备" prop="elementCode">
<el-select v-model="formModel.elementCode" clearable placeholder="请选择设备" size="mini">
<el-option
v-for="option in getDeviceList"
:key="option.code"
:label="option.name"
:value="option.code"
/>
</el-select>
</el-form-item>
<el-form-item v-if="showDevice" label="设备属性" prop="filedName">
<el-select v-model="formModel.filedName" clearable placeholder="请选择设备属性" size="mini">
<el-option
v-for="option in getAttributeList"
:key="option.name"
:label="option.desc"
:value="option.name"
/>
</el-select>
</el-form-item>
<el-form-item v-if="showValue" label="值" prop="v">
<el-input v-model="formModel.v" size="mini" />
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button size="small" type="primary" @click="doSave">确定</el-button>
<el-button size="small" @click="doClose">取消</el-button>
</span>
</el-dialog>
</template>
<script>
import ConstConfig from '@/scripts/ConstConfig';
export default {
name: 'Expression',
components:{},
props: {
materialsList: {
type: Array,
default() {
return [];
}
}
},
data() {
return {
dialogWidth: '400px',
dialogVisible: false,
rowIndex: '',
valueIndex: 0,
deviceTypeList: [],
deviceType: '',
formModel: {
t: 'S',
operator: 'EQ',
elementCode: '',
filedName: '',
v: ''
}
};
},
computed: {
ConstSelect() {
return ConstConfig.ConstSelect;
},
conditionList() {
return this.ConstSelect.conditionList.filter(item => {
return item.value !== 'E';
});
},
mapDevice() {
return this.$store.state.map.mapDevice;
},
getDeviceList() {
if (this.deviceType == 'Route') {
return this.getRouteList;
}
return Object.values(this.mapDevice).filter(item => {
return item._type == this.deviceType;
});
},
routeData() {
return this.$store.state.map.routeData;
},
getRouteList() {
return Object.values(this.routeData);
},
getAttributeList() {
let attr = [];
if (this.deviceType) {
const obj = this.materialsList.find(item => {
return item.srcName == this.deviceType;
});
if (obj) {
attr = obj.materials;
}
console.log(attr, '========ppp');
}
return attr;
},
title() {
const t = this.$t('trainingManage.editOperationCondition');
return t;
},
dialogMarginLeft() {
const w = this.$store.state.app.width;
const ml = (w - parseInt(this.dialogWidth)) / 2;
return ml;
},
group() {
return this.$route.query.group;
},
rules() {
const crules = {
t: [
{ required: true, message: '请选择条件类型', trigger: 'blur' }
],
operator: [
{ required: true, message: '请选择运算符', trigger: 'blur' }
],
elementCode: [
{ required: true, message: '请选择设备', trigger: 'blur' }
],
filedName: [
{ required: true, message: '请选择设备属性', trigger: 'blur' }
],
v: [
{ required: true, message: '请输入值', trigger: 'blur' }
]
};
return crules;
},
showExpression() {
let s = false;
if (this.formModel.t == 'E') {
s = true;
}
return s;
},
showDevice() {
let s = false;
if (this.formModel.t == 'S') {
s = true;
}
return s;
},
showValue() {
let s = false;
if (this.formModel.t == 'V') {
s = true;
}
return s;
}
},
watch: {},
created() {
this.getDeviceTypeList();
},
methods: {
doSave() {
const cpData = {};
cpData.t = this.formModel.t;
if (this.showValue) {
cpData.v = this.formModel.v;
}
if (this.showDevice) {
cpData.elementCode = this.formModel.elementCode;
cpData.filedName = this.formModel.filedName;
}
if (this.showExpression) {
cpData.operator = this.formModel.operator;
const list = [{
t: 'V',
v: ''
}];
const arr = ['NOT', 'IS'];
if (!arr.includes(this.formModel.operator)) {
list.splice(1, 1, {
t: 'V',
v: ''
});
}
cpData.valuables = list;
}
this.$emit('editExpression', cpData, this.rowIndex, this.valueIndex);
this.doClose();
},
doShow(data, index, valueIndex) {
this.dialogVisible = true;
this.rowIndex = index;
this.valueIndex = valueIndex;
if (data) {
const cpData = Object.assign({}, data);
this.formModel = cpData;
} else {
this.$nextTick(() => {
this.$refs.formModel.resetFields();
});
}
console.log(data, index, valueIndex, '---data, index, valueIndex---');
},
doClose() {
this.dialogVisible = false;
},
getDeviceTypeList() {
this.ConstSelect.operationDeviceList.forEach(elem => {
this.deviceTypeList.push(elem);
});
}
}
};
</script>
<style lang="scss" scoped>
/deep/ .el-dialog__wrapper {
width: 1px;
height: 1px;
top: auto;
right: auto;
bottom: auto;
left: auto;
overflow: visible !important;
}
</style>