This commit is contained in:
zyy 2019-12-10 16:57:37 +08:00
commit 914af945c8
9 changed files with 776 additions and 127 deletions

View File

@ -323,3 +323,38 @@ export function getApproachSectionList(mapId, params) {
params
});
}
// 延续保护相关接口 创建修改删除根据id查询, 分页查询
export function postContinueProtect(data) {
return request({
url: `/api/mapBuild/overlap`,
method: 'post',
data: data
});
}
export function putContinueProtect(data) {
return request({
url: `/api/mapBuild/overlap/${data.id}`,
method: 'put',
data: data
});
}
export function delContinueProtect(id) {
return request({
url: `/api/mapBuild/overlap/${id}`,
method: 'delete'
});
}
export function getContinueProtectById(id) {
return request({
url: `/api/mapBuild/overlap/${id}`,
method: 'get'
});
}
export function getContinueProtectList(mapId, params) {
return request({
url: `/api/mapBuild/${mapId}/overlap/paging`,
method: 'get',
params
});
}

View File

@ -3,11 +3,11 @@ export function getBaseUrl() {
let BASE_API;
if (process.env.NODE_ENV === 'development') {
// BASE_API = 'https://joylink.club/jlcloud';
BASE_API = 'https://test.joylink.club/jlcloud';
// BASE_API = 'https://test.joylink.club/jlcloud';
// BASE_API = 'http://192.168.3.5:9000'; // 袁琪
// BASE_API = 'http://192.168.3.6:9000'; // 旭强
// BASE_API = 'http://192.168.3.41:9000'; // 张赛
// BASE_API = 'http://192.168.3.82:9000'; // 杜康
BASE_API = 'http://192.168.3.82:9000'; // 杜康
} else {
BASE_API = process.env.VUE_APP_BASE_API;
}

View File

@ -29,6 +29,14 @@
@setCenter="setCenter"
/>
</el-tab-pane>
<el-tab-pane label="折返" class="tab_pane_box" name="turned">
<!--<turned-operate-->
<!--ref="trunedOperate"-->
<!--:map-info="mapInfo"-->
<!--:selected="selected"-->
<!--@setCenter="setCenter"-->
<!--/>-->
</el-tab-pane>
<el-tab-pane :label="$t('map.automaticSignal')" class="tab_pane_box" name="automatic">
<automatic-operate
ref="automaticOperate"
@ -74,6 +82,7 @@ import AutomaticOperate from './automaticoperate/index';
import PathOperate from './pathoperate/index';
import SignalOperate from './signaloperate/index';
import ProtectOperate from './protectoperate/index';
import TurnedOperate from './turnedoperate/index';
export default {
name: 'DataRelation',
@ -83,7 +92,8 @@ export default {
AutomaticOperate,
PathOperate,
SignalOperate,
ProtectOperate
ProtectOperate,
TurnedOperate
},
props: {
selected: {

View File

@ -14,7 +14,7 @@
<script>
import { mapGetters } from 'vuex';
import { listMap } from '@/api/jmap/mapdraft';
import { getAutoSignalList, delAutoSignal, getAutoSignalDetail } from '@/api/jmap/mapdraft';
import { getContinueProtectList, delContinueProtect, getContinueProtectById } from '@/api/jmap/mapdraft';
export default {
name: 'ProtectDetail',
@ -29,7 +29,6 @@ export default {
data() {
return {
show: false,
mapList: [],
pagerConfig: {
pageSize: 'pageSize',
pageIndex: 'pageNum'
@ -37,18 +36,14 @@ export default {
queryForm: {
labelWidth: '120px',
queryObject: {
signalCode: {
type: 'select',
label: this.$t('map.signal'),
config: {
data: []
}
name: {
type: 'text',
label: '延续保护名称'
}
}
},
queryList: {
query: this.queryFunction,
afterQuery: this.afterQuery,
selectCheckShow: false,
indexShow: true,
columns: [
@ -57,25 +52,15 @@ export default {
prop: 'name'
},
{
title: '进路',
prop: 'sectionList',
type: 'tagMore',
columnValue: (row) => { return this.$convertField(row.sectionList, this.sectionList, ['code', 'name'], true); },
title: '解锁区段',
prop: 'unlockSectionCode',
type: 'tag',
columnValue: (row) => { return this.$convertField(row.unlockSectionCode, this.sectionList, ['code', 'name']); },
tagType: (row) => { return ''; }
},
{
title: this.$t('map.psdList'),
prop: 'psdList',
type: 'tagMore',
columnValue: (row) => { return this.$convertField(row.psdList, this.psdList, ['code', 'name'], true); },
tagType: (row) => { return ''; }
},
{
title: this.$t('map.espList'),
prop: 'espList',
type: 'tagMore',
columnValue: (row) => { return this.$convertField(row.espList, this.espList, ['code', 'name'], true); },
tagType: (row) => { return ''; }
title: '解锁时间(s)',
prop: 'unlockTime'
},
{
type: 'button',
@ -100,24 +85,13 @@ export default {
computed: {
...mapGetters('map', [
'sectionList',
'signalList',
'espList',
'psdList'
])
},
watch: {
signalList: function (val, old) {
const list = [];
if (val && val.length) {
for (let i = 0; i < val.length; i++) {
list.push({ label: val[i].uniqueName, value: val[i].code });
}
this.queryForm.queryObject.signalCode.config.data = list;
}
}
},
mounted() {
this.acquireMapList();
},
methods: {
doShow() {
@ -138,40 +112,20 @@ export default {
},
queryFunction(params) {
if (this.mapInfo && this.mapInfo.id) {
return getAutoSignalList(this.mapInfo.id, params);
return getContinueProtectList(this.mapInfo.id, params);
}
},
acquireMapList() {
//
listMap({ drawWay:'1'}).then(response => {
this.mapList = response.data;
});
},
afterQuery(data) {
if (data && data.list) {
const that = this;
const list = data.list;
if (list) {
list.map(elem => {
that.$convertSpecifiedField(elem, that.mapList, 'id', 'name', ['mapId']);
elem.code = elem.signalCode;
elem.signalCode = that.formatName(elem.signalCode);
});
}
}
return data;
},
editObj(index, row) {
getAutoSignalDetail(row.id).then(response => {
getContinueProtectById(row.id).then(response => {
const data = response.data;
this.$emit('autoMaticoSelected', data);
this.$emit('protectSelected', data);
this.doClose();
});
},
deleteObj(index, row) {
if (this.mapInfo && this.mapInfo.id && row) {
//
delAutoSignal(row.id).then(response => {
delContinueProtect(row.id).then(response => {
this.$message.success(this.$t('map.successfullyDelete'));
this.reloadTable();
}).catch(() => {

View File

@ -6,7 +6,7 @@
:map-info="mapInfo"
:route-data="routeData"
/>
<route-detail ref="routeDetail" :map-info="mapInfo" @autoMaticoSelected="autoMaticoSelected" />
<route-detail ref="routeDetail" :map-info="mapInfo" @protectSelected="protectSelected" />
</div>
</template>
<script>
@ -57,7 +57,7 @@ export default {
});
}
},
autoMaticoSelected: function (data) {
protectSelected: function (data) {
this.routeData = data;
if (this.$refs.routeEdit) {
this.$refs.routeEdit.isSave = false;

View File

@ -6,8 +6,61 @@
<el-form-item label="延续保护名称:" prop="name">
<el-input v-model="addModel.name" style="width: 200px;" />
</el-form-item>
<el-form-item label="解锁区段" prop="unlockSectionCode">
<el-select v-model="addModel.unlockSectionCode">
<el-option
v-for="item in sectionList"
:key="item.code"
:label="item.name + ' (' + item.code+ ')'"
:value="item.code"
/>
</el-select>
<el-button
:type=" field === 'unlockSectionCode' ? 'danger' : 'primary'"
@click="hover('unlockSectionCode')"
>{{ $t('map.activate') }}</el-button>
</el-form-item>
<el-form-item label="解锁时间(s)" prop="unlockTime">
<el-input-number v-model="addModel.unlockTime" :min="0" />
</el-form-item>
<el-form-item label="延续保护线路:" prop="relSectionSwitchList">
<el-table :data="addModel.relSectionSwitchList" border style="width: 80%">
<el-table-column type="index" label="序号" width="100" />
<el-table-column fixed="right" :label="$t('map.operation')">
<template slot-scope="scope">
<el-button
type="text"
size="small"
@click.native.prevent="deleteOverlab(addModel.relSectionSwitchList, scope.$index)"
>
移出
</el-button>
<el-button
type="text"
size="small"
@click.native.prevent="editOverlab(addModel.relSectionSwitchList, scope.$index)"
>
编辑
</el-button>
</template>
</el-table-column>
</el-table>
</el-form-item>
</div>
</el-form>
<el-card class="box-card" shadow="never">
<div slot="header" class="clearfix">
<span style="font-size: 14px;">{{ 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="overlabForm" :model="addOverlapModel" :rules="overLapRules" label-width="135px" size="mini" style="margin-top: 15px">
<el-form-item :label="$t('map.routeProtectsData') + ':'" prop="routeOverlapSectionList">
<el-select v-model="addModel.routeOverlapSectionList" multiple clearable :filterable="true">
<el-select v-model="addOverlapModel.routeOverlapSectionList" multiple clearable :filterable="true">
<el-option
v-for="item in sectionList"
:key="item.code"
@ -35,7 +88,7 @@
>{{ $t('map.activate') }}</el-button>
<el-button
type="primary"
@click="pushSwitch(addModel.routeOverlapSwitchList, {switchCode: overlapCode, normal: overlapType, switchType: overlapType ? '定位' : '反位'})"
@click="pushSwitch(addOverlapModel.routeOverlapSwitchList, {switchCode: overlapCode, normal: overlapType, switchType: overlapType ? '定位' : '反位'})"
>{{ $t('map.add') }}
</el-button>
<el-select v-model="overlapType" :filterable="true" :placeholder="$t('map.pleaseSelect')">
@ -46,8 +99,8 @@
:value="item.code"
/>
</el-select>
<el-table :data="addModel.routeOverlapSwitchList" border style="width: 97%">
<el-table-column prop="switchCode" :label="$t('map.switchId')">
<el-table :data="addOverlapModel.routeOverlapSwitchList" 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>
@ -58,7 +111,7 @@
<el-button
type="text"
size="small"
@click.native.prevent="deleteSwitch(addModel.routeOverlapSwitchList, scope.$index)"
@click.native.prevent="deleteSwitch(addOverlapModel.routeOverlapSwitchList, scope.$index)"
>
{{ $t('map.remove') }}
</el-button>
@ -66,24 +119,26 @@
</el-table-column>
</el-table>
</el-form-item>
<el-form-item>
</el-form>
</div>
</el-card>
<div class="draft">
<el-button-group>
<el-button v-if="isSave" type="primary" size="small" :loading="loading" @click="save">{{ $t('map.save') }}
</el-button>
<el-button v-else type="warning" size="small" :loading="loading" @click="update">{{ $t('map.updata') }}
</el-button>
</el-button-group>
</el-form-item>
</div>
</el-form>
</el-scrollbar>
</div>
</template>
<script>
import { mapGetters } from 'vuex';
import { getUID } from '@/jmap/utils/Uid';
import { postAutoSignal, putAutoSignal } from '@/api/jmap/mapdraft';
import { postContinueProtect, putContinueProtect } from '@/api/jmap/mapdraft';
import { ViewMode } from '@/scripts/ConstDic';
import { deepAssign } from '@/utils/index';
export default {
name: 'RouteOperation',
@ -120,33 +175,55 @@ export default {
code: '',
mapId: '',
name: '',
unlockSectionCode:'',
unlockTime: 0,
relSectionSwitchList: []
},
addOverlapModel: {
parentIndex: '',
routeOverlapSectionList: [], //
routeOverlapSwitchList: [] //
},
overlapType: '',
SwitchLocateTypeList: [
{ name: '定位', code: true },
{ name: '反位', code: false }
],
editShow: false,
overLapRules: {
},
rules: {
name: [
{ required: true, message: '请输入延续保护名称', trigger:'blur'}
],
routeOverlapSectionList: [
{ required: true, message: '请选择进路延续保护区段', trigger: 'change'}
unlockSectionCode: [
{ required: true, message: '请选择解锁区段', trigger:'change'}
],
routeOverlapSwitchList: [
{ required: true, message: '请选择延续保护道岔', trigger: null}
unlockTime: [
{ required: true, message: '请输入解锁时间', trigger:'blur'}
],
relSectionSwitchList: [
{ required: true, message: '请生成延续保护线路', trigger: 'change'}
]
}
},
cardMode: 'generate'
};
},
computed: {
...mapGetters('map', [
'switchList',
'sectionList'
])
]),
cardTitle() {
if (this.cardMode === 'generate') {
return '生成延续保护线路';
} else if (this.cardMode === 'edit') {
return '编辑延续保护线路';
} else {
return '';
}
}
},
watch: {
mapInfo(val) {
@ -192,11 +269,13 @@ export default {
setSelected(selected) {
if (selected) {
if (selected._type.toUpperCase() === 'Section'.toUpperCase() && this.field.toUpperCase() === 'routeOverlapSectionList'.toUpperCase()) {
if (this.addModel.routeOverlapSectionList.indexOf(selected.code) === -1) {
this.addModel.routeOverlapSectionList.push(selected.code);
if (this.addOverlapModel.routeOverlapSectionList.indexOf(selected.code) === -1) {
this.addOverlapModel.routeOverlapSectionList.push(selected.code);
}
} else if (selected._type.toUpperCase() === 'Switch'.toUpperCase() && this.field.toUpperCase() === 'routeOverlapSwitchList'.toUpperCase()) {
this.overlapCode = selected.code;
} else if (selected._type.toUpperCase() === 'Section'.toUpperCase() && this.field.toUpperCase() === 'unlockSectionCode'.toUpperCase()) {
this.addModel.unlockSectionCode = selected.code;
}
}
},
@ -210,7 +289,7 @@ export default {
this.$refs.form.validate((valid) => {
if (valid) {
this.loading = true;
postAutoSignal(this.buildModel(getUID('protect'))).then(resp => {
postContinueProtect(this.buildModel(getUID('protect'))).then(resp => {
this.$message.success('创建延续保护成功!');
this.loading = false;
this.clear();
@ -225,7 +304,7 @@ export default {
this.$refs.form.validate((valid) => {
if (valid) {
this.loading = true;
putAutoSignal(this.buildModel()).then(resp => {
putContinueProtect(this.buildModel()).then(resp => {
this.$message.success('更新延续保护成功!');
this.loading = false;
this.clear();
@ -241,13 +320,64 @@ export default {
delete this.addModel.id;
this.$refs.form.resetFields();
this.addModel.mapId = this.mapInfo.id;
this.addModel.routeOverlapSectionList = [];
this.addModel.routeOverlapSwitchList = [];
this.addModel.relSectionSwitchList = [];
this.addModel.code = '';
this.addModel.unlockTime = 0;
this.addModel.unlockSectionCode = '';
this.addModel.id = '';
this.addModel.name = '';
this.isSave = true;
this.cardMode = 'generate';
this.clearOverlab();
}
},
deleteOverlab(list, index) {
list.splice(index, 1);
this.$refs.overlabForm.resetFields();
this.clearOverlab();
this.cardMode = 'generate';
},
editOverlab(list, index) {
this.addOverlapModel = deepAssign({}, list[index]);
this.addOverlapModel.parentIndex = index;
this.cardMode = 'edit';
},
updateOverlab() {
if (this.addOverlapModel.parentIndex || this.addOverlapModel.parentIndex === 0 ) {
this.addModel.relSectionSwitchList[this.addOverlapModel.parentIndex] = {
routeOverlapSectionList:this.addOverlapModel.routeOverlapSectionList,
routeOverlapSwitchList:this.addOverlapModel.routeOverlapSwitchList
};
this.clearOverlab();
this.cardMode = 'generate';
}
},
cancelOverlab() {
this.clearOverlab();
this.cardMode = 'generate';
},
generateOverlab() {
if (!this.addOverlapModel.routeOverlapSectionList.length) {
this.$messageBox('请选择进路延续保护区段!');
} else if (!this.addOverlapModel.routeOverlapSwitchList.length) {
this.$messageBox('请添加延续保护道岔!');
} else {
this.addModel.relSectionSwitchList.push({
routeOverlapSectionList:this.addOverlapModel.routeOverlapSectionList,
routeOverlapSwitchList:this.addOverlapModel.routeOverlapSwitchList
});
this.$refs.overlabForm.resetFields();
this.clearOverlab();
}
},
clearOverlab() {
this.addOverlapModel = {
parentIndex: '',
routeOverlapSectionList:[],
routeOverlapSwitchList:[]
};
this.overlapCode = '';
this.overlapType = '';
}
}
};
@ -270,4 +400,14 @@ export default {
right: 2px;
}
}
.box-card {
width: 88%;
position: relative;
left: 8%;
}
.draft {
width: 400px;
text-align: center;
margin: 20px auto;
}
</style>

View File

@ -0,0 +1,189 @@
<template>
<el-dialog v-dialogDrag :title="$t('map.automaticSignalList')" :visible.sync="show" width="85%" :before-do-close="doClose">
<div>
<QueryListPage
ref="queryListPage"
:pager-config="pagerConfig"
:query-form="queryForm"
:query-list="queryList"
/>
</div>
</el-dialog>
</template>
<script>
import { mapGetters } from 'vuex';
import { listMap } from '@/api/jmap/mapdraft';
import { getAutoSignalList, delAutoSignal, getAutoSignalDetail } from '@/api/jmap/mapdraft';
export default {
name: 'RouteDetail',
props: {
mapInfo: {
type: Object,
default() {
return null;
}
}
},
data() {
return {
show: false,
mapList: [],
pagerConfig: {
pageSize: 'pageSize',
pageIndex: 'pageNum'
},
queryForm: {
labelWidth: '120px',
queryObject: {
signalCode: {
type: 'select',
label: this.$t('map.signal'),
config: {
data: []
}
}
}
},
queryList: {
query: this.queryFunction,
afterQuery: this.afterQuery,
selectCheckShow: false,
indexShow: true,
columns: [
{
title: this.$t('map.signalCodeName'),
prop: 'signalCode'
},
{
title: this.$t('map.interlockingBlocks'),
prop: 'sectionList',
type: 'tagMore',
columnValue: (row) => { return this.$convertField(row.sectionList, this.sectionList, ['code', 'name'], true); },
tagType: (row) => { return ''; }
},
{
title: this.$t('map.psdList'),
prop: 'psdList',
type: 'tagMore',
columnValue: (row) => { return this.$convertField(row.psdList, this.psdList, ['code', 'name'], true); },
tagType: (row) => { return ''; }
},
{
title: this.$t('map.espList'),
prop: 'espList',
type: 'tagMore',
columnValue: (row) => { return this.$convertField(row.espList, this.espList, ['code', 'name'], true); },
tagType: (row) => { return ''; }
},
{
type: 'button',
title: this.$t('map.operation'),
width: '200',
buttons: [
{
name: this.$t('map.compile'),
handleClick: this.editObj
},
{
name: this.$t('map.deleteObj'),
handleClick: this.deleteObj,
type: 'danger'
}
]
}
]
}
};
},
computed: {
...mapGetters('map', [
'sectionList',
'signalList',
'espList',
'psdList'
])
},
watch: {
signalList: function (val, old) {
const list = [];
if (val && val.length) {
for (let i = 0; i < val.length; i++) {
list.push({ label: val[i].uniqueName, value: val[i].code });
}
this.queryForm.queryObject.signalCode.config.data = list;
}
}
},
mounted() {
this.acquireMapList();
},
methods: {
doShow() {
this.show = true;
this.reloadTable();
},
doClose() {
this.show = false;
},
formatName(code) {
let name = '';
const device = this.$store.getters['map/getDeviceByCode'](code);
if (device) {
name = device.uniqueName;
}
return name;
},
queryFunction(params) {
if (this.mapInfo && this.mapInfo.id) {
return getAutoSignalList(this.mapInfo.id, params);
}
},
acquireMapList() {
//
listMap({ drawWay:'1'}).then(response => {
this.mapList = response.data;
});
},
afterQuery(data) {
if (data && data.list) {
const that = this;
const list = data.list;
if (list) {
list.map(elem => {
that.$convertSpecifiedField(elem, that.mapList, 'id', 'name', ['mapId']);
elem.code = elem.signalCode;
elem.signalCode = that.formatName(elem.signalCode);
});
}
}
return data;
},
editObj(index, row) {
getAutoSignalDetail(row.id).then(response => {
const data = response.data;
this.$emit('autoMaticoSelected', data);
this.doClose();
});
},
deleteObj(index, row) {
if (this.mapInfo && this.mapInfo.id && row) {
//
delAutoSignal(row.id).then(response => {
this.$message.success(this.$t('map.successfullyDelete'));
this.reloadTable();
}).catch(() => {
this.$messageBox(this.$t('map.failDelete'));
});
}
},
reloadTable() {
if (this.queryList && this.queryList.reload) {
this.queryList.reload();
}
}
}
};
</script>

View File

@ -0,0 +1,84 @@
<template>
<div style="height: 100%;">
<route-draft
ref="routeEdit"
:selected="selected"
:map-info="mapInfo"
:route-data="routeData"
/>
<route-detail ref="routeDetail" :map-info="mapInfo" @autoMaticoSelected="autoMaticoSelected" />
</div>
</template>
<script>
import RouteDraft from './route';
import RouteDetail from './detail';
export default {
name: 'TurnedOperate',
components: {
RouteDraft,
RouteDetail
},
props: {
mapInfo: {
type: Object,
default() {
return null;
}
},
selected: {
type: Object,
default() {
return null;
}
}
},
data() {
return {
enabledTab: 'Turned',
routeData: null
};
},
methods: {
clickEvent(e, model) {
this.onSelect(model);
},
onSelect(model) {
if (model) {
this.selected = model;
} else {
this.selected = null;
}
},
setDelayUnlockStatus(data, status) {
if (data && data.delayShowList) {
data.delayShowList.forEach(elem => {
elem.status = status;
});
}
},
autoMaticoSelected: function (data) {
this.routeData = data;
if (this.$refs && this.$refs.routeEdit) {
this.$refs.routeEdit.isSave = false;
}
},
previewRouteEvent: function () {
if (this.$refs && this.$refs.routeDetail) {
this.$refs.routeDetail.doShow();
}
},
createRouteEvent: function () {
if (this.$refs && this.$refs.routeEdit) {
this.$refs.routeEdit.clear();
}
},
setSelected(selected) {
this.$refs.routeEdit.setSelected(selected);
},
setCenter(code) {
this.$emit('setCenter', code);
}
}
};
</script>

View File

@ -0,0 +1,237 @@
<template>
<div style="height: 100%;">
<el-scrollbar wrap-class="scrollbar-wrapper">
<el-form ref="form" :model="addModel" :rules="rules" label-width="180px" size="mini">
<div class="definition">
<el-form-item :label="$t('map.signalID')" prop="signalCode">
<el-select v-model="addModel.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 === 'signalCode' ? 'danger' : 'primary'" @click="hover('signalCode')">{{ $t('map.activate') }}
</el-button>
</el-form-item>
<el-form-item :label="$t('map.routeSegmentData') + ':'" prop="sectionList">
<el-select v-model="addModel.sectionList" multiple clearable :filterable="true">
<el-option
v-for="item in sectionList"
:key="item.code"
:label="item.name + ' (' + item.code+ ')'"
:value="item.code"
/>
</el-select>
<el-button
:type=" field === 'sectionList' ? 'danger' : 'primary'"
@click="hover('sectionList')"
>{{ $t('map.activate') }}</el-button>
</el-form-item>
<el-form-item :label="$t('map.psdList') + ':'" prop="psdList">
<el-select v-model="addModel.psdList" multiple clearable :filterable="true">
<el-option
v-for="item in psdList"
:key="item.code"
:label="item.name + ' (' + item.code+ ')'"
:value="item.code"
/>
</el-select>
</el-form-item>
<el-form-item :label="$t('map.espList') + ':'" prop="espList">
<el-select v-model="addModel.espList" multiple clearable :filterable="true">
<el-option
v-for="item in espList"
:key="item.code"
:label="item.name + ' (' + item.code+ ')'"
:value="item.code"
/>
</el-select>
</el-form-item>
<el-form-item :label="$t('map.alwaysRed') + ':'" prop="alwaysRed">
<el-radio-group v-model="addModel.alwaysRed">
<el-radio :label="true">{{ $t('map.are') }}</el-radio>
<el-radio :label="false">{{ $t('map.deny') }}</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item>
<el-button-group>
<el-button v-if="isSave" type="primary" size="small" :loading="loading" @click="save">{{ $t('map.save') }}
</el-button>
<el-button v-else type="warning" size="small" :loading="loading" @click="update">{{ $t('map.updata') }}
</el-button>
</el-button-group>
</el-form-item>
</div>
</el-form>
</el-scrollbar>
</div>
</template>
<script>
import { mapGetters } from 'vuex';
import { getUID } from '@/jmap/utils/Uid';
import { postAutoSignal, putAutoSignal } from '@/api/jmap/mapdraft';
import { ViewMode } from '@/scripts/ConstDic';
import { formatName } from '@/utils/runPlan';
export default {
name: 'RouteOperation',
props: {
selected: {
type: Object,
default() {
return null;
}
},
mapInfo: {
type: Object,
default() {
return null;
}
},
routeData: {
type: Object,
default() {
return null;
}
}
},
data() {
return {
ViewMode: ViewMode,
field: '',
isSave: true,
loading: false,
editModel: {},
addModel: {
id: '',
code: '',
mapId: '',
signalCode: '',
alwaysRed: true,
sectionList: [],
psdList: [],
espList: []
},
editShow: false,
rules: {
signalCode: [
{ required: true, message: this.$t('map.pleaseSelectSignal'), trigger: 'change' }
],
sectionList: [
{ required: true, message: this.$t('map.triggerSegmentData'), trigger: 'change' }
]
}
};
},
computed: {
...mapGetters('map', [
'signalList',
'sectionList'
])
},
watch: {
mapInfo(val) {
if (val) {
this.addModel.mapId = val.id;
}
},
routeData(val, old) {
if (val) {
this.addModel = val;
this.editShow = true;
}
}
},
mounted() {
},
methods: {
hover(field) {
this.field = field === this.field ? '' : field;
},
formatName(code) {
return formatName(code);
},
setSelected(selected) {
if (selected) {
if (selected._type.toUpperCase() === 'Signal'.toUpperCase() && this.field.toUpperCase() === 'signalCode'.toUpperCase()) {
this.addModel.signalCode = selected.code;
} else if (selected._type.toUpperCase() === 'Section'.toUpperCase() && this.field.toUpperCase() === 'sectionList'.toUpperCase()) {
if (this.addModel.sectionList.indexOf(selected.code) === -1) {
this.addModel.sectionList.push(selected.code);
}
}
}
},
buildModel(code) {
const model = Object.assign({}, this.addModel);
if (code) { model['code'] = code; }
model['mapId'] = this.mapInfo.id;
model['autoSignalId'] = this.addModel.id;
return model;
},
save() {
this.$refs.form.validate((valid) => {
if (valid) {
this.loading = true;
postAutoSignal(this.buildModel(getUID('autoSingle'))).then(resp => {
this.$message.success(this.$t('map.automaticSignalSuccessful'));
this.loading = false;
this.clear();
}).catch(() => {
this.$messageBox(this.$t('map.failedCreateSignal'));
this.loading = false;
});
}
});
},
update() {
this.$refs.form.validate((valid) => {
if (valid) {
this.loading = true;
putAutoSignal(this.buildModel()).then(resp => {
this.$message.success(this.$t('map.automaticSignalUpdateSucceeded'));
this.loading = false;
this.clear();
}).catch(() => {
this.$messageBox(this.$t('map.automaticSignalUpdateFailed'));
this.loading = false;
});
}
});
},
clear() {
if (this.$refs && this.$refs.form && this.mapInfo) {
delete this.addModel.id;
this.$refs.form.resetFields();
this.addModel.mapId = this.mapInfo.id;
this.addModel.sectionList = [];
this.addModel.signalCode = '';
this.addModel.code = '';
this.isSave = true;
}
}
}
};
</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;
}
}
</style>