308 lines
12 KiB
Vue
308 lines
12 KiB
Vue
<template>
|
|
<div v-if="dialogVisible" v-quickMenuDrag class="reminder-drag">
|
|
<div style="width: 100%;text-align: center;font-size: 18px;padding-top: 8px;">条件管理</div>
|
|
<i style="position: relative;top: -25px;right: -370px;font-size: 20px;cursor: pointer;" class="el-icon-close" @click="handleClose" />
|
|
<div @mousedown="handleMouseDown">
|
|
<el-tabs v-model="activeName" style="cursor: default;">
|
|
<el-tab-pane label="列车触发" name="first">
|
|
<div>
|
|
<el-table
|
|
:data="tableData"
|
|
style="width: 100%"
|
|
height="200px"
|
|
>
|
|
<el-table-column prop="code" label="触发列车" />
|
|
<el-table-column prop="physicalCode" label="到达区段">
|
|
<template slot-scope="scope">
|
|
<span>{{ getSectionName(scope.row.physicalCode) }}</span>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column prop="stop" label="是否停车">
|
|
<template slot-scope="scope">
|
|
<span>{{ handleStopValue(scope.row.stop) }}</span>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column width="150">
|
|
<template slot-scope="scope">
|
|
<el-button
|
|
size="mini"
|
|
@click="handleEdit(scope.$index, scope.row)"
|
|
>编辑</el-button>
|
|
<el-button
|
|
size="mini"
|
|
type="danger"
|
|
@click="handleDelete(scope.$index, scope.row)"
|
|
>删除</el-button>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
<el-form ref="form" label-width="80px" style="margin-top: 8px;padding: 10px;" :model="formModel" :rules="rules">
|
|
<el-form-item label="触发列车" prop="code">
|
|
<el-select v-model="formModel.code" size="small" filterable placeholder="请选择">
|
|
<el-option
|
|
v-for="item in trainList"
|
|
:key="item.code"
|
|
:label="item.code"
|
|
:value="item.code"
|
|
/>
|
|
</el-select>
|
|
<el-button :type="field === 'triggerTrain'? 'danger': 'primary'" size="small" @click="hover('triggerTrain')">{{ $t('map.activate') }}</el-button>
|
|
</el-form-item>
|
|
<el-form-item label="到达区段" prop="physicalCode">
|
|
<el-select v-model="formModel.physicalCode" size="small" filterable placeholder="请选择">
|
|
<el-option
|
|
v-for="item in sectionList"
|
|
:key="item.code"
|
|
:label="item.name"
|
|
:value="item.code"
|
|
/>
|
|
</el-select>
|
|
<el-button :type="field === 'triggerSection'? 'danger': 'primary'" size="small" @click="hover('triggerSection')">{{ $t('map.activate') }}</el-button>
|
|
</el-form-item>
|
|
<el-form-item label="是否停车">
|
|
<el-select v-model="formModel.stop" clearable size="small" placeholder="请选择">
|
|
<el-option
|
|
v-for="item in stopList"
|
|
:key="item.value"
|
|
:label="item.label"
|
|
:value="item.value"
|
|
/>
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item style="text-align: center;" label-width="0">
|
|
<el-button v-if="!update" size="small" type="primary" @click="onCommit">添加</el-button>
|
|
<el-button v-if="update" size="small" type="primary" @click="onUpdate">修改</el-button>
|
|
<el-button v-if="update" size="small" @click="initData">取消</el-button>
|
|
</el-form-item>
|
|
</el-form>
|
|
</div>
|
|
</el-tab-pane>
|
|
<el-tab-pane label="延时触发" name="second">
|
|
<div style="text-align: center;height: 480px;">
|
|
<div style="display: inline-block;margin-right: 10px;font-size: 14px;">延时时间</div>
|
|
<el-input-number v-model="delay" size="small" controls-position="right" :min="0" />
|
|
<span>s</span>
|
|
<div style="margin-top: 10px;">
|
|
<el-button type="primary" size="mini" @click="onUpdateDelay">修改</el-button>
|
|
</div>
|
|
</div>
|
|
</el-tab-pane>
|
|
</el-tabs>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { updateActionCondition } from '@/api/script';
|
|
import { mapGetters } from 'vuex';
|
|
export default {
|
|
name: 'ConditionManage',
|
|
data() {
|
|
return {
|
|
dialogVisible: false,
|
|
tableData: [],
|
|
stopList: [
|
|
{label: '是', value: 1},
|
|
{label: '否', value: 0}
|
|
],
|
|
formModel: {
|
|
code: '',
|
|
physicalCode: '',
|
|
stop: ''
|
|
},
|
|
rules: {
|
|
code: [
|
|
{ required: true, message: '请选择触发列车', trigger: 'change' }
|
|
],
|
|
physicalCode: [
|
|
{ required: true, message: '请选择到达区段', trigger: 'change' }
|
|
]
|
|
},
|
|
actionId: '',
|
|
update: false,
|
|
updateIndex: '',
|
|
field: '',
|
|
delay: 0,
|
|
activeName: 'first',
|
|
actionInfo: {}
|
|
};
|
|
},
|
|
computed: {
|
|
...mapGetters('map', [
|
|
'trainList',
|
|
'sectionList'
|
|
])
|
|
},
|
|
watch: {
|
|
'$store.state.menuOperation.selectedCount':function(em) {
|
|
const device = this.$store.state.menuOperation.selected;
|
|
if (device.code) {
|
|
this.deviceSelect(device);
|
|
}
|
|
}
|
|
},
|
|
methods:{
|
|
doShow(actionInfo) {
|
|
this.actionInfo = actionInfo;
|
|
if (this.actionId === actionInfo.id && this.dialogVisible) {
|
|
this.handleClose();
|
|
} else {
|
|
this.tableData = [];
|
|
this.delay = 0;
|
|
this.actionId = actionInfo.id;
|
|
if (this.actionInfo.condition) {
|
|
this.tableData = [...(this.actionInfo.condition.trainStatuses || [])];
|
|
this.delay = (this.actionInfo.condition.delay || 0) / 1000;
|
|
}
|
|
this.dialogVisible = true;
|
|
}
|
|
},
|
|
handleClose() {
|
|
this.dialogVisible = false;
|
|
this.$emit('clearConditionActionId');
|
|
this.initData();
|
|
},
|
|
getSectionName(code) {
|
|
const section = this.$store.getters['map/getDeviceByCode'](code);
|
|
return section.name;
|
|
},
|
|
handleStopValue(stop) {
|
|
if (stop === 0) {
|
|
return '否';
|
|
} else if (stop === 1) {
|
|
return '是';
|
|
} else {
|
|
return '/';
|
|
}
|
|
},
|
|
handleMouseDown(e) {
|
|
e.stopPropagation();
|
|
},
|
|
handleEdit(index, row) {
|
|
this.updateIndex = index;
|
|
this.update = true;
|
|
this.formModel.code = row.code;
|
|
this.formModel.physicalCode = row.physicalCode;
|
|
this.formModel.stop = row.stop;
|
|
},
|
|
handleDelete(index, row) {
|
|
const data = [...this.tableData];
|
|
data.splice(index, 1);
|
|
const param = { trainStatuses: data };
|
|
if (this.delay) {
|
|
param.delay = this.delay * 1000;
|
|
}
|
|
updateActionCondition(this.$route.query.group, this.actionId, param).then(resp => {
|
|
this.tableData = data;
|
|
this.actionInfo.condition = {
|
|
trainStatuses: data,
|
|
delay:this.delay * 1000
|
|
};
|
|
this.initData();
|
|
this.$message.success('删除条件成功');
|
|
}).catch(()=>{
|
|
this.$message.error('删除条件失败');
|
|
});
|
|
},
|
|
onUpdate() {
|
|
this.$refs.form.validate((valid) => {
|
|
if (valid) {
|
|
const data = [...this.tableData];
|
|
data[this.updateIndex] = {code: this.formModel.code, physicalCode: this.formModel.physicalCode, stop: this.formModel.stop};
|
|
const param = { trainStatuses: data };
|
|
if (this.delay) {
|
|
param.delay = this.delay * 1000;
|
|
}
|
|
updateActionCondition(this.$route.query.group, this.actionId, param).then(resp => {
|
|
this.tableData = data;
|
|
this.actionInfo.condition = {
|
|
trainStatuses: data,
|
|
delay:this.delay * 1000
|
|
};
|
|
this.initData();
|
|
this.$message.success('修改条件成功');
|
|
}).catch(()=>{
|
|
this.$message.error('修改条件失败');
|
|
});
|
|
}
|
|
});
|
|
},
|
|
onUpdateDelay() {
|
|
const param = { trainStatuses: this.tableData };
|
|
if (this.delay) {
|
|
param.delay = this.delay * 1000;
|
|
}
|
|
updateActionCondition(this.$route.query.group, this.actionId, param).then(resp => {
|
|
this.actionInfo.condition = {
|
|
trainStatuses: [...this.tableData],
|
|
delay:this.delay * 1000
|
|
};
|
|
this.initData();
|
|
this.$message.success('修改条件成功');
|
|
}).catch(()=>{
|
|
this.$message.error('修改条件失败');
|
|
});
|
|
},
|
|
initData() {
|
|
this.update = false;
|
|
this.updateIndex = '';
|
|
this.field = '';
|
|
this.$refs.form && this.$refs.form.resetFields();
|
|
this.formModel.stop = '';
|
|
this.actionInfo = {};
|
|
},
|
|
onCommit() {
|
|
this.$refs.form.validate((valid) => {
|
|
if (valid) {
|
|
const data = [...this.tableData];
|
|
data.push({code: this.formModel.code, physicalCode: this.formModel.physicalCode, stop: this.formModel.stop});
|
|
const param = { trainStatuses: data };
|
|
if (this.delay) {
|
|
param.delay = this.delay * 1000;
|
|
}
|
|
updateActionCondition(this.$route.query.group, this.actionId, param).then(resp => {
|
|
this.tableData = data;
|
|
this.actionInfo.condition = {
|
|
trainStatuses: data,
|
|
delay:this.delay * 1000
|
|
};
|
|
this.initData();
|
|
this.$message.success('添加条件成功');
|
|
}).catch(()=>{
|
|
this.$message.error('添加条件失败');
|
|
});
|
|
}
|
|
});
|
|
},
|
|
hover(field) {
|
|
if (this.field === field) {
|
|
this.field = '';
|
|
} else {
|
|
this.field = field;
|
|
}
|
|
},
|
|
deviceSelect(em) {
|
|
if (this.field.toUpperCase() === 'triggerSection'.toUpperCase() && em._type.toUpperCase() === 'Section'.toUpperCase()) {
|
|
this.formModel.physicalCode = em.code;
|
|
} else if (this.field.toUpperCase() === 'triggerTrain'.toUpperCase() && em._type.toUpperCase() === 'Train'.toUpperCase()) {
|
|
this.formModel.code = em.code;
|
|
}
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style scoped>
|
|
.reminder-drag{
|
|
position: absolute;
|
|
bottom: 10px;
|
|
left: 15px;
|
|
z-index: 200;
|
|
padding: 5px;
|
|
background: #FFF;
|
|
width: 400px;
|
|
height: 600px;
|
|
border-radius: 5px;
|
|
}
|
|
</style>
|