343 lines
12 KiB
Vue
343 lines
12 KiB
Vue
<template>
|
|
<div style="height: 100%; border: 1px solid #EBEEF5; position: relative; left: 8%; width: 88%">
|
|
<el-table :data="conflictingSignalList" border style="width: 100%">
|
|
<el-table-column type="index" label="敌对数据" width="350px">
|
|
<template slot-scope="scope">
|
|
<span>{{ handleShowData(scope.$index) }}</span>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column fixed="right" :label="$t('map.operation')">
|
|
<template slot-scope="scope">
|
|
<el-button
|
|
type="text"
|
|
size="small"
|
|
@click.native.prevent="deleteOverlab(conflictingSignalList, scope.$index)"
|
|
>
|
|
移出
|
|
</el-button>
|
|
<el-button
|
|
type="text"
|
|
size="small"
|
|
@click.native.prevent="editOverlab(conflictingSignalList, scope.$index)"
|
|
>
|
|
编辑
|
|
</el-button>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
<el-card class="box-card" shadow="never">
|
|
<div slot="header" class="clearfix">
|
|
<span style="font-size: 12px;">{{ cardTitle }}</span>
|
|
<el-button v-if="cardMode === 'generate'" style="float: right; padding: 3px 0" type="text" @click="generateOverlab">生成</el-button>
|
|
<el-button-group v-else-if=" cardMode === 'edit'" style="float: right;">
|
|
<el-button type="text" style="padding:3px 3px" @click="updateOverlab">修改</el-button>
|
|
<el-button type="text" style="padding:3px 0" @click="cancelOverlab">取消</el-button>
|
|
</el-button-group>
|
|
</div>
|
|
<div>
|
|
<el-form ref="hostileForm" :model="addHostileModel" :rules="hostileRules" label-width="135px" size="mini" style="margin-top: 15px">
|
|
<el-form-item label="敌对信号:" prop="signalCode">
|
|
<el-select v-model="addHostileModel.signalCode" clearable :filterable="true">
|
|
<el-option
|
|
v-for="item in signalList"
|
|
:key="item.code"
|
|
:label="item.name + ' (' + item.code+ ')'"
|
|
:value="item.code"
|
|
/>
|
|
</el-select>
|
|
<el-button
|
|
:type=" field === 'hostileSignal' ? 'danger' : 'primary'"
|
|
@click="hover('hostileSignal')"
|
|
>{{ $t('map.activate') }}</el-button>
|
|
</el-form-item>
|
|
<el-form-item label="敌对道岔:" prop="switchPositionList">
|
|
<el-select v-model="hostileSwitchCode" clearable :filterable="true" :placeholder="$t('map.pleaseSelect')">
|
|
<el-option
|
|
v-for="item in switchList"
|
|
:key="item.code"
|
|
:label="`${item.name}(${item.code})`"
|
|
:value="item.code"
|
|
/>
|
|
</el-select>
|
|
<el-button
|
|
:type=" field === 'switchPositionList' ? 'danger' : 'primary'"
|
|
@click="hover('switchPositionList')"
|
|
>{{ $t('map.activate') }}</el-button>
|
|
<el-button
|
|
type="primary"
|
|
@click="pushSwitch(addHostileModel.switchPositionList, {switchCode: hostileSwitchCode, normal: hostileSwitchType, switchType: hostileSwitchType ? '定位' : '反位'})"
|
|
>{{ $t('map.add') }}
|
|
</el-button>
|
|
<el-select v-model="hostileSwitchType" :filterable="true" :placeholder="$t('map.pleaseSelect')">
|
|
<el-option
|
|
v-for="item in SwitchLocateTypeList"
|
|
:key="item.code"
|
|
:label="item.name"
|
|
:value="item.code"
|
|
/>
|
|
</el-select>
|
|
<el-table :data="addHostileModel.switchPositionList" border style="width: 97%">
|
|
<el-table-column prop="switchCode" :label="$t('map.switchId')" width="100">
|
|
<template slot-scope="scope">
|
|
<span>{{ swictchName(scope.row.switchCode) }}</span>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column prop="switchType" :label="$t('map.switchType')" />
|
|
<el-table-column fixed="right" :label="$t('map.operation')" width="50">
|
|
<template slot-scope="scope">
|
|
<el-button
|
|
type="text"
|
|
size="small"
|
|
@click.native.prevent="deleteSwitch(addHostileModel.switchPositionList, scope.$index)"
|
|
>
|
|
{{ $t('map.remove') }}
|
|
</el-button>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
</el-form-item>
|
|
</el-form>
|
|
</div>
|
|
</el-card>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
import { mapGetters } from 'vuex';
|
|
import { ViewMode } from '@/scripts/ConstDic';
|
|
import { deepAssign } from '@/utils/index';
|
|
|
|
export default {
|
|
name: 'HostileData',
|
|
props: {
|
|
selected: {
|
|
type: Object,
|
|
default() {
|
|
return null;
|
|
}
|
|
},
|
|
mapInfo: {
|
|
type: Object,
|
|
default() {
|
|
return null;
|
|
}
|
|
},
|
|
conflictingSignalList: {
|
|
type: Object,
|
|
default() {
|
|
return [];
|
|
}
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
ViewMode: ViewMode,
|
|
field: '',
|
|
hostileSwitchCode: '',
|
|
isSave: true,
|
|
editModel: {},
|
|
addModel: {
|
|
conflictingSignalList: []
|
|
},
|
|
addHostileModel: {
|
|
parentIndex: '',
|
|
signalCode: '', // 敌对信号
|
|
switchPositionList: [] // 进路延续保护道岔数据列表
|
|
},
|
|
hostileSwitchType: '',
|
|
SwitchLocateTypeList: [
|
|
{ name: '定位', code: true },
|
|
{ name: '反位', code: false }
|
|
],
|
|
editShow: false,
|
|
hostileRules: {
|
|
|
|
},
|
|
cardMode: 'generate'
|
|
};
|
|
},
|
|
computed: {
|
|
...mapGetters('map', [
|
|
'switchList',
|
|
'signalList'
|
|
]),
|
|
cardTitle() {
|
|
if (this.cardMode === 'generate') {
|
|
return '生成敌对数据';
|
|
} else if (this.cardMode === 'edit') {
|
|
return '编辑敌对数据';
|
|
} else {
|
|
return '';
|
|
}
|
|
}
|
|
},
|
|
watch: {
|
|
mapInfo(val) {
|
|
if (val) {
|
|
this.addModel.mapId = val.id;
|
|
}
|
|
},
|
|
conflictingSignalList(val, old) {
|
|
if (val) {
|
|
this.conflictingSignalList && this.conflictingSignalList.forEach(item => {
|
|
item.switchPositionList.length && item.switchPositionList.forEach( ele => {
|
|
ele.switchType = ele.normal ? '定位' : '反位';
|
|
});
|
|
});
|
|
this.editShow = true;
|
|
}
|
|
}
|
|
},
|
|
mounted() {
|
|
|
|
},
|
|
methods: {
|
|
hover(field) {
|
|
this.$emit('hover', field);
|
|
},
|
|
setField(field) {
|
|
this.field = field;
|
|
},
|
|
handleShowData(index) {
|
|
let signalName = '';
|
|
this.signalList.some(item => {
|
|
if (item.code === this.conflictingSignalList[index].signalCode) {
|
|
signalName = item.name;
|
|
return true;
|
|
}
|
|
});
|
|
let switchName = '';
|
|
this.conflictingSignalList[index].switchPositionList.forEach((item, index) => {
|
|
this.switchList.some(it => {
|
|
if (it.code === item.switchCode) {
|
|
const pos = item.normal ? 'N' : 'R';
|
|
if (index === 0) {
|
|
switchName = switchName + it.name + pos;
|
|
} else {
|
|
switchName = switchName + '/' + it.name + pos;
|
|
}
|
|
return true;
|
|
}
|
|
});
|
|
});
|
|
if (switchName) {
|
|
return signalName + ' ' + 'WITH' + ' ' + switchName;
|
|
} else {
|
|
return signalName;
|
|
}
|
|
},
|
|
pushSwitch(list, data) {
|
|
const index = list.findIndex(elem => { return elem.switchCode == data.switchCode; });
|
|
if (index < 0) {
|
|
list.push(data);
|
|
} else {
|
|
this.$messageBox(this.$t('tip.routeSameID'));
|
|
}
|
|
},
|
|
deleteSwitch(list, index) {
|
|
list.splice(index, 1);
|
|
},
|
|
swictchName(code) {
|
|
let name = '';
|
|
if (code) {
|
|
const swch = this.$store.getters['map/getDeviceByCode'](code);
|
|
if (swch) {
|
|
name = `${swch.name}(${swch.code})`;
|
|
}
|
|
}
|
|
return name;
|
|
},
|
|
setHostileSignal(code) {
|
|
this.addHostileModel.signalCode = code;
|
|
},
|
|
clear() {
|
|
if (this.$refs && this.$refs.form) {
|
|
this.$refs.form.resetFields();
|
|
this.isSave = true;
|
|
this.cardMode = 'generate';
|
|
this.clearHostile();
|
|
}
|
|
},
|
|
deleteOverlab(list, index) {
|
|
list.splice(index, 1);
|
|
this.$refs.hostileForm.resetFields();
|
|
this.clearHostile();
|
|
this.cardMode = 'generate';
|
|
},
|
|
editOverlab(list, index) {
|
|
this.addHostileModel = deepAssign({}, list[index]);
|
|
this.addHostileModel.parentIndex = index;
|
|
this.cardMode = 'edit';
|
|
},
|
|
updateOverlab() {
|
|
if (this.addHostileModel.parentIndex || this.addHostileModel.parentIndex === 0 ) {
|
|
if (!this.addHostileModel.signalCode.length) {
|
|
this.$messageBox('请选择敌对信号!');
|
|
} else {
|
|
this.conflictingSignalList[this.addHostileModel.parentIndex] = {
|
|
signalCode:this.addHostileModel.signalCode,
|
|
switchPositionList:this.addHostileModel.switchPositionList
|
|
};
|
|
}
|
|
this.clearHostile();
|
|
this.cardMode = 'generate';
|
|
}
|
|
},
|
|
cancelOverlab() {
|
|
this.clearHostile();
|
|
this.cardMode = 'generate';
|
|
},
|
|
generateOverlab() {
|
|
if (!this.addHostileModel.signalCode.length) {
|
|
this.$messageBox('请选择敌对信号!');
|
|
} else {
|
|
this.conflictingSignalList.push({
|
|
signalCode:this.addHostileModel.signalCode,
|
|
switchPositionList:this.addHostileModel.switchPositionList
|
|
});
|
|
this.$refs.hostileForm.resetFields();
|
|
this.clearHostile();
|
|
}
|
|
},
|
|
clearHostile() {
|
|
this.addHostileModel = {
|
|
parentIndex: '',
|
|
signalCode: '',
|
|
switchPositionList:[]
|
|
};
|
|
this.hostileSwitchCode = '';
|
|
this.hostileSwitchType = '';
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
<style rel="stylesheet/scss" lang="scss" scoped>
|
|
/deep/ .el-radio {
|
|
margin-right: 10px;
|
|
}
|
|
/deep/ {
|
|
.el-select .el-tag {
|
|
height: auto;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding-right: 15px;
|
|
box-sizing: border-box;
|
|
white-space: normal;
|
|
}
|
|
.el-input__suffix{
|
|
right: 2px;
|
|
}
|
|
.el-card__header{
|
|
border-bottom: 1px solid #EBEEF5;
|
|
border-top: 1px solid #EBEEF5;
|
|
}
|
|
.el-card{
|
|
border:0 solid #EBEEF5;
|
|
|
|
}
|
|
}
|
|
.box-card {
|
|
position: relative;
|
|
}
|
|
</style>
|