Merge branch 'test' of https://git.code.tencent.com/lian-cbtc/jl-client into test
This commit is contained in:
joylink_cuiweidong
commit
b1439d4903
@ -46,7 +46,7 @@ export function logout(token) {
|
||||
});
|
||||
}
|
||||
|
||||
// 检查登录状态
|
||||
// 检查登录状态 WAIT,SCAN,SUCCESS,CANCEL,EXPIRE,
|
||||
export function checkLoginStatus(sessionId) {
|
||||
return new Promise((resolve, reject) => {
|
||||
request({
|
||||
|
||||
@ -3,22 +3,22 @@ import request from '@/utils/request';
|
||||
/** 新建项目设备*/
|
||||
export function createDevice(data) {
|
||||
return request({
|
||||
url: `/api/project/device`,
|
||||
url: `/api/device`,
|
||||
method: 'post',
|
||||
data: data
|
||||
});
|
||||
}
|
||||
/** 项目设备编码是否已存在 */
|
||||
export function deviceIsExist(projectCode, code) {
|
||||
export function deviceIsExist(code) {
|
||||
return request({
|
||||
url: `/api/project/device/exist/${projectCode}/${code}`,
|
||||
url: `/api/device/exist/${code}`,
|
||||
method: 'get'
|
||||
});
|
||||
}
|
||||
/** 分页查询项目设备 */
|
||||
/** 分页查询项目设备n */
|
||||
export function getProjectDeviceList(params) {
|
||||
return request({
|
||||
url: `/api/project/device/paging`,
|
||||
url: `/api/device/paging`,
|
||||
method: 'get',
|
||||
params:params
|
||||
});
|
||||
@ -40,7 +40,7 @@ export function getDeviceDetail(id) {
|
||||
/** 添加/修改屏蔽门设备网关映射配置 */
|
||||
export function setPsdConfig(id, data) {
|
||||
return request({
|
||||
url: `/api/project/device/${id}/config/psd`,
|
||||
url: `/api/device/${id}/config/psd`,
|
||||
method: 'put',
|
||||
data: data
|
||||
});
|
||||
@ -48,7 +48,7 @@ export function setPsdConfig(id, data) {
|
||||
/** 添加/修改信号机设备网关映射配置 */
|
||||
export function setSignalConfig(id, data) {
|
||||
return request({
|
||||
url: `/api/project/device/${id}/config/signal`,
|
||||
url: `/api/device/${id}/config/signal`,
|
||||
method: 'put',
|
||||
data: data
|
||||
});
|
||||
@ -56,7 +56,7 @@ export function setSignalConfig(id, data) {
|
||||
/** 添加/修改信号机设备网关映射配置 */
|
||||
export function setSwitchConfig(id, data) {
|
||||
return request({
|
||||
url: `/api/project/device/${id}/config/switch`,
|
||||
url: `/api/device/${id}/config/switch`,
|
||||
method: 'put',
|
||||
data: data
|
||||
});
|
||||
@ -69,3 +69,26 @@ export function getAllDeviceInProject(params) {
|
||||
params
|
||||
});
|
||||
}
|
||||
/** 添加/修改ibp设备配置 */
|
||||
export function setIbpConfig(id, data) {
|
||||
return request({
|
||||
url: `/api/device/${id}/config/ibp`,
|
||||
method: 'put',
|
||||
data: data
|
||||
});
|
||||
}
|
||||
/** 添加/修改现地工作站配置 */
|
||||
export function setLwConfig(id, data) {
|
||||
return request({
|
||||
url: `/api/device/${id}/config/lw`,
|
||||
method: 'put',
|
||||
data: data
|
||||
});
|
||||
}
|
||||
/** 查询所有的某类型设备 */
|
||||
export function getDevicesByType(type) {
|
||||
return request({
|
||||
url: `/api/device/${type}/all`,
|
||||
method: 'get'
|
||||
});
|
||||
}
|
||||
|
||||
@ -254,8 +254,7 @@
|
||||
<div v-if="bindSuccess"><span>绑定微信成功</span></div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- project.endsWith('design') && !wmOpenId -->
|
||||
<div v-if="project.endsWith('design')" class="form_box">
|
||||
<div v-if="project.endsWith('design') && !wmOpenId " class="form_box">
|
||||
<div class="title">绑定微信:</div>
|
||||
<div class="content">
|
||||
<el-button v-if="!binding&&!bindSuccess" type="primary" size="small" style="position: absolute;" @click="generateBindQrCode">生成微信二维码</el-button>
|
||||
|
||||
@ -42,7 +42,8 @@ function getRouteInfo(to) {
|
||||
}
|
||||
|
||||
if (isDesignPage(toRoutePath)) {
|
||||
loginPath = loginDesignPage;
|
||||
const whitePage = PermissionParam[current_session] ? PermissionParam[current_session].whitePage : '';
|
||||
loginPath = whitePage || loginDesignPage;
|
||||
if (current_session && !current_session.startsWith('design')) {
|
||||
removeToken();
|
||||
}
|
||||
|
||||
@ -42,7 +42,6 @@ const News = () => import('@/views/system/news/index');
|
||||
const CommandDictionary = () => import('@/views/system/commandDictionary/index');
|
||||
const CommandDictionaryDetail = () => import('@/views/system/commandDictionary/edit');
|
||||
const configLine = () => import('@/views/system/configLine/index');
|
||||
// const Mapedit = () => import('@/views/mapdraft/index');
|
||||
|
||||
const IscsSystem = () => import('@/views/iscs/iscsSystem/index');
|
||||
const IscsDraw = () => import('@/views/iscs/iscsDraw/index');
|
||||
@ -780,14 +779,14 @@ export const asyncRouter = [
|
||||
meta: {
|
||||
i18n: 'router.configLine'
|
||||
}
|
||||
},
|
||||
{
|
||||
path: 'deviceManage',
|
||||
component: DeviceManage,
|
||||
meta: {
|
||||
i18n: 'router.deviceManage'
|
||||
}
|
||||
}
|
||||
// {
|
||||
// path: 'deviceManage',
|
||||
// component: DeviceManage,
|
||||
// meta: {
|
||||
// i18n: 'router.deviceManage'
|
||||
// }
|
||||
// }
|
||||
]
|
||||
},
|
||||
{ // 发布申请
|
||||
@ -982,7 +981,7 @@ export const asyncRouter = [
|
||||
]
|
||||
}
|
||||
];
|
||||
|
||||
/* merge 是否再路由处理中与asyncRouter进行合并 mergeIndex合并进入asyncRouter【mergeIndex】 慎重调整asyncRouter顺序 */
|
||||
export const projectRoute = {
|
||||
designgzb: [
|
||||
{
|
||||
@ -1004,6 +1003,46 @@ export const projectRoute = {
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
{ // 系统管理
|
||||
path: '/system',
|
||||
component: Layout,
|
||||
merge: true,
|
||||
mergeIndex: 4,
|
||||
meta: {
|
||||
i18n: 'router.systemManage',
|
||||
roles: [admin]
|
||||
},
|
||||
children: [
|
||||
{
|
||||
path: 'deviceManage',
|
||||
component: DeviceManage,
|
||||
meta: {
|
||||
i18n: 'router.deviceManage'
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
designxty: [
|
||||
{ // 系统管理
|
||||
path: '/system',
|
||||
component: Layout,
|
||||
merge: true,
|
||||
mergeIndex: 4,
|
||||
meta: {
|
||||
i18n: 'router.systemManage',
|
||||
roles: [admin]
|
||||
},
|
||||
children: [
|
||||
{
|
||||
path: 'deviceManage',
|
||||
component: DeviceManage,
|
||||
meta: {
|
||||
i18n: 'router.deviceManage'
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
@ -40,9 +40,27 @@ function resetAsyncRouter({ systemType }) {
|
||||
} else if (systemType == projectXian) {
|
||||
list = [...list, ...asyncRouter];
|
||||
} else if (systemType == projectXty) {
|
||||
if (projectRoute.designxty && projectRoute.designxty.length) {
|
||||
projectRoute.designxty.forEach(item => {
|
||||
if (item.merge) {
|
||||
asyncRouter[item.mergeIndex].children = [...asyncRouter[item.mergeIndex].children, ...item.children];
|
||||
} else {
|
||||
list.push(item);
|
||||
}
|
||||
});
|
||||
}
|
||||
list = [...list, ...asyncRouter];
|
||||
} else if (systemType == projectGzzb) {
|
||||
list = [...list, ...asyncRouter, ...projectRoute.designgzb];
|
||||
if (projectRoute.designgzb && projectRoute.designgzb.length) {
|
||||
projectRoute.designgzb.forEach(item => {
|
||||
if (item.merge) {
|
||||
asyncRouter[item.mergeIndex].children = [...asyncRouter[item.mergeIndex].children, ...item.children];
|
||||
} else {
|
||||
list.push(item);
|
||||
}
|
||||
});
|
||||
}
|
||||
list = [...list, ...asyncRouter];
|
||||
} else if (systemType == projectJsxt) {
|
||||
list = [...list, ...JSXT];
|
||||
} else if (systemType == projectJyd) {
|
||||
|
||||
@ -151,7 +151,6 @@ export default {
|
||||
loadingCode: false,
|
||||
checkLogin: null,
|
||||
checkTimeout: null,
|
||||
scanSuccess: false,
|
||||
pwdDisplay: true,
|
||||
cookiesName: 'UserName',
|
||||
cookiesToken: 'UserToken',
|
||||
@ -251,11 +250,11 @@ export default {
|
||||
this.sessionId = response.data.sessionId;
|
||||
this.loginUrl = response.data.url;
|
||||
this.loadingCode = false;
|
||||
this.clearTimer(this.checkTimeout);
|
||||
this.checkTimeout = setTimeout(() => {
|
||||
this.loadingCode = true;
|
||||
this.loginUrl = '';
|
||||
}, 3 * 60 * 1000);
|
||||
// this.clearTimer(this.checkTimeout);
|
||||
// this.checkTimeout = setTimeout(() => {
|
||||
// this.loadingCode = true;
|
||||
// this.loginUrl = '';
|
||||
// }, 3 * 60 * 1000);
|
||||
this.checkLoginStatus();
|
||||
}).catch(() => {
|
||||
this.loadingCode = false;
|
||||
@ -281,10 +280,12 @@ export default {
|
||||
this.handleLoginSucessRoute();
|
||||
});
|
||||
}).catch(error => {
|
||||
if (error.data && error.data.status === 'WAIT') {
|
||||
self.scanSuccess = true;
|
||||
if (error.data && error.data.status === 'EXPIRE') {
|
||||
this.loadingCode = true;
|
||||
this.loginUrl = '';
|
||||
} else {
|
||||
self.checkLoginStatus();
|
||||
}
|
||||
self.checkLoginStatus();
|
||||
});
|
||||
}, 3000);
|
||||
},
|
||||
|
||||
@ -1,233 +0,0 @@
|
||||
<template>
|
||||
<el-dialog v-dialogDrag :title="$t('map.layerDisplay')" :visible.sync="dialogTableVisible" class="view_box" width="460px" :before-close="doClose" :modal-append-to-body="false">
|
||||
<el-row type="flex" justify="center" class="content_box">
|
||||
<el-form label-width="80px" class="demo-ruleForm">
|
||||
<el-form-item :label="$t('map.viewShows')">
|
||||
<el-checkbox-group v-model="viewSelect" :min="1" @change="handleSelectView">
|
||||
<el-checkbox :label="ViewMode.LOGIC">{{ $t('map.logicalView') }}</el-checkbox>
|
||||
<el-checkbox :label="ViewMode.PHYSICAL">{{ $t('map.physicalView') }}</el-checkbox>
|
||||
</el-checkbox-group>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('map.contentShows')">
|
||||
<el-row v-if="ViewMode.LOGIC === viewSelect[0] && viewSelect.length == 1" class="logical-view" type="flex" justify="center" style="width: 100%;">
|
||||
<el-checkbox-group v-model="logicalLevelsSelect" @change="handleSelectLogicalView">
|
||||
<el-checkbox v-for="view in LogicalViewTypeList" :key="view.code" :label="view.code" size="mini">
|
||||
{{ view.name }}</el-checkbox>
|
||||
</el-checkbox-group>
|
||||
</el-row>
|
||||
<el-row v-if="ViewMode.PHYSICAL === viewSelect[0] && viewSelect.length == 1" class="physical-view" type="flex" justify="center" style="width: 100%;">
|
||||
<el-checkbox-group v-model="physicalLevelsSelect" @change="handleSelectPhysicalView">
|
||||
<el-checkbox v-for="view in PhysicalViewTypeList" :key="view.code" :label="view.code">
|
||||
{{ view.name }}</el-checkbox>
|
||||
</el-checkbox-group>
|
||||
</el-row>
|
||||
<el-row v-if=" viewSelect.length == 2" class="physical-view" type="flex" justify="center" style="width: 100%;">
|
||||
<el-checkbox-group v-model="hybridLevelsSelect" @change="handleSelectHybridView">
|
||||
<el-checkbox v-for="view in HybridViewTypeList" :key="view.code" :label="view.code">
|
||||
{{ view.name }}</el-checkbox>
|
||||
</el-checkbox-group>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-row>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ViewMode } from '@/scripts/ConstDic';
|
||||
|
||||
export default {
|
||||
name: 'ConfigMap',
|
||||
data () {
|
||||
return {
|
||||
ViewMode: ViewMode,
|
||||
dialogTableVisible: false,
|
||||
viewSelect: [ViewMode.LOGIC, ViewMode.PHYSICAL],
|
||||
LogicalViewTypeList: [
|
||||
{ code: 'Link', name: this.$t('map.link') }
|
||||
],
|
||||
PhysicalViewTypeList: [
|
||||
{ code: 'Section', name: this.$t('map.section') },
|
||||
{ code: 'Signal', name: this.$t('map.signal') },
|
||||
{ code: 'Switch', name: this.$t('map.switch') }
|
||||
],
|
||||
HybridViewTypeList: [],
|
||||
|
||||
defaultLogicalSelect: [],
|
||||
defaultPhysicalSelect: [],
|
||||
defaultHybridSelect: [],
|
||||
|
||||
logicalLevelsSelect: [],
|
||||
physicalLevelsSelect: [],
|
||||
hybridLevelsSelect: [] // 混合图层
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
'$store.state.map.mapDataLoadedCount': function (val) {
|
||||
this.handleSelectView(this.viewSelect);
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.initPage();
|
||||
},
|
||||
methods: {
|
||||
doShow() {
|
||||
this.dialogTableVisible = true;
|
||||
},
|
||||
doClose() {
|
||||
this.dialogTableVisible = false;
|
||||
},
|
||||
initPage() {
|
||||
this.$Dictionary.logicalViewType().then(list => {
|
||||
this.LogicalViewTypeList = list;
|
||||
list.forEach(v => {
|
||||
this.HybridViewTypeList.push(v);
|
||||
this.hybridLevelsSelect.push(v.code);
|
||||
this.defaultHybridSelect.push(v.code);
|
||||
});
|
||||
this.LogicalViewTypeList.forEach(elem => {
|
||||
this.logicalLevelsSelect.push(elem.code);
|
||||
this.defaultLogicalSelect.push(elem.code);
|
||||
});
|
||||
});
|
||||
this.$Dictionary.physicalViewType().then(list => {
|
||||
this.PhysicalViewTypeList = list;
|
||||
list.forEach(v => {
|
||||
this.HybridViewTypeList.push(v);
|
||||
this.hybridLevelsSelect.push(v.code);
|
||||
this.defaultHybridSelect.push(v.code);
|
||||
});
|
||||
this.PhysicalViewTypeList.forEach(elem => {
|
||||
this.physicalLevelsSelect.push(elem.code);
|
||||
this.defaultPhysicalSelect.push(elem.code);
|
||||
});
|
||||
});
|
||||
},
|
||||
handleSelectView(value) {
|
||||
if (value.length == 2) {
|
||||
this.$emit('handleSelectView', '03');
|
||||
this.hybridLevelsSelect = this.copyList(this.defaultHybridSelect);
|
||||
} else {
|
||||
this.$emit('handleSelectView', value);
|
||||
if (this.viewSelect[0] == this.ViewMode.LOGIC) {
|
||||
this.logicalLevelsSelect = this.copyList(this.defaultLogicalSelect);
|
||||
} else {
|
||||
this.physicalLevelsSelect = this.copyList(this.defaultPhysicalSelect);
|
||||
}
|
||||
}
|
||||
},
|
||||
handleSelectLogicalView(handle) {
|
||||
this.$emit('handleSelectLogicalView', handle);
|
||||
},
|
||||
handleSelectPhysicalView(handle) {
|
||||
this.$emit('handleSelectPhysicalView', handle);
|
||||
},
|
||||
handleSelectHybridView(handle) {
|
||||
this.$emit('handleSelectHybridView', handle);
|
||||
},
|
||||
copyList(list) {
|
||||
return JSON.parse(JSON.stringify(list));
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
</script>
|
||||
|
||||
<style rel="stylesheet/scss" lang="scss" scoped>
|
||||
.demo-ruleForm{
|
||||
width: 100%;
|
||||
|
||||
/deep/{
|
||||
.el-form-item__label{
|
||||
text-align: left;
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
}
|
||||
.el-checkbox-group{
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.view_box{
|
||||
/deep/ {
|
||||
.el-dialog{
|
||||
position: absolute;
|
||||
right: 26px;
|
||||
left: auto;
|
||||
top: 7px;
|
||||
}
|
||||
|
||||
.el-dialog__body{
|
||||
padding: 0 15px;
|
||||
}
|
||||
|
||||
.el-dialog__header{
|
||||
padding: 10px 20px
|
||||
}
|
||||
|
||||
.el-checkbox{
|
||||
margin-right: 10px;
|
||||
width: 75px;
|
||||
height: 30px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.el-form-item{
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
// ckect框选中颜色
|
||||
.content_box .el-checkbox__input.is-checked .el-checkbox__inner,
|
||||
.content_box .el-checkbox__input.is-indeterminate .el-checkbox__inner {
|
||||
background-color: #85bef9;
|
||||
border-color: #85bef9;
|
||||
}
|
||||
// 文字选中颜色
|
||||
.content_box .el-checkbox__input.is-checked+.el-checkbox__label {
|
||||
color: #3c93ec;
|
||||
}
|
||||
}
|
||||
}
|
||||
.dialog-box{
|
||||
background-color: #fff;
|
||||
width: 460px;
|
||||
box-shadow: 2px 2px 4px #c5c5c5;
|
||||
position: absolute;
|
||||
left: auto;
|
||||
right: 24px;
|
||||
top: 43px;
|
||||
z-index: 10;
|
||||
|
||||
.title{
|
||||
overflow: hidden;
|
||||
border-bottom: 1px solid #ccc;
|
||||
padding: 8px 15px;
|
||||
.fl-title{
|
||||
float: left;
|
||||
}
|
||||
.fr-title{
|
||||
float: right;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
.content_box{
|
||||
padding: 15px;
|
||||
padding-top: 4px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.fade-enter-active, .fade-leave-active {
|
||||
transition: opacity 0.5s;
|
||||
}
|
||||
|
||||
.fade-enter, .fade-leave-to {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
</style>
|
||||
@ -1,189 +0,0 @@
|
||||
<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:false}).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>
|
||||
@ -1,84 +0,0 @@
|
||||
<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: 'AutomaticOperate',
|
||||
components: {
|
||||
RouteDraft,
|
||||
RouteDetail
|
||||
},
|
||||
props: {
|
||||
mapInfo: {
|
||||
type: Object,
|
||||
default() {
|
||||
return null;
|
||||
}
|
||||
},
|
||||
selected: {
|
||||
type: Object,
|
||||
default() {
|
||||
return null;
|
||||
}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
enabledTab: 'Route',
|
||||
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>
|
||||
@ -1,237 +0,0 @@
|
||||
<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>
|
||||
@ -1,154 +0,0 @@
|
||||
<template>
|
||||
<div style="height: 100%;">
|
||||
<div style="height: calc(100% - 46px);">
|
||||
<template v-if="!display">
|
||||
<el-scrollbar wrap-class="scrollbar-wrapper">
|
||||
<el-form ref="form" :model="editModel" label-width="120px" size="mini">
|
||||
<el-form-item label="code" prop="code">
|
||||
<el-select v-model="editModel.code" clearable :filterable="true" @change="deviceChange">
|
||||
<el-option
|
||||
v-for="item in espList"
|
||||
:key="item.code"
|
||||
:label="item.name"
|
||||
:value="item.code"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="名称" prop="name">
|
||||
<el-input v-model="editModel.name" />
|
||||
</el-form-item>
|
||||
<el-form-item label="所属站台" prop="stationStandCode">
|
||||
<el-select v-model="editModel.stationStandCode" disabled>
|
||||
<el-option
|
||||
v-for="item in stationStandList"
|
||||
:key="item.code"
|
||||
:label="item.name"
|
||||
:value="item.code"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-scrollbar>
|
||||
</template>
|
||||
<template v-if="display">
|
||||
<div style="text-align: center;padding-top: 20px;">暂无数据</div>
|
||||
</template>
|
||||
</div>
|
||||
<div class="button_box">
|
||||
<el-button-group class="map-draft-group">
|
||||
<el-button type="primary" size="small" @click="create">批量创建</el-button>
|
||||
<el-button type="danger" size="small" @click="editObject">修改</el-button>
|
||||
</el-button-group>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { mapGetters } from 'vuex';
|
||||
import { deepAssign } from '@/utils/index';
|
||||
import { getUID } from '@/jmap/utils/Uid';
|
||||
|
||||
export default {
|
||||
name: 'SafetyDoorOperate',
|
||||
components: {
|
||||
|
||||
},
|
||||
props: {
|
||||
mapInfo: {
|
||||
type: Object,
|
||||
default() {
|
||||
return null;
|
||||
}
|
||||
},
|
||||
selected: {
|
||||
type: Object,
|
||||
default() {
|
||||
return null;
|
||||
}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
display: true,
|
||||
editModel: {
|
||||
code: '',
|
||||
name: '',
|
||||
stationCode: '',
|
||||
stationStandCode: ''
|
||||
}
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapGetters('map', [
|
||||
'map',
|
||||
'espList',
|
||||
'stationStandList'
|
||||
])
|
||||
},
|
||||
watch: {
|
||||
'$store.state.map.map': function(val) {
|
||||
if (val) {
|
||||
this.init();
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.init();
|
||||
},
|
||||
methods: {
|
||||
init() {
|
||||
this.display = true;
|
||||
const mapObject = this.map;
|
||||
if (mapObject) {
|
||||
if (mapObject.espList && mapObject.espList.length) {
|
||||
this.display = false;
|
||||
} else {
|
||||
mapObject.espList = [];
|
||||
}
|
||||
}
|
||||
},
|
||||
deviceChange(code) {
|
||||
this.deviceSelect(this.$store.getters['map/getDeviceByCode'](code));
|
||||
},
|
||||
deviceSelect(selected) {
|
||||
this.$refs.form && this.$refs.form.resetFields();
|
||||
if (selected && selected._type.toUpperCase() === 'ESP'.toUpperCase()) {
|
||||
this.editModel = deepAssign(this.editModel, selected);
|
||||
}
|
||||
},
|
||||
editObject() {
|
||||
console.log(this.editModel, 111);
|
||||
},
|
||||
hasPSD(data) {
|
||||
let falg = false;
|
||||
this.map.espList.forEach(item => {
|
||||
if (item.stationStandCode == data.code) {
|
||||
falg = true;
|
||||
}
|
||||
});
|
||||
return falg;
|
||||
},
|
||||
create() {
|
||||
const arr = [];
|
||||
this.map.stationStandList.forEach(item => {
|
||||
if (item.visible && item.hasDoor && !this.hasPSD(item)) {
|
||||
arr.push({
|
||||
_type: 'ESP',
|
||||
code: getUID('ESP'),
|
||||
name: getUID('ESP'),
|
||||
stationCode: item.stationCode,
|
||||
stationStandCode: item.code
|
||||
});
|
||||
}
|
||||
});
|
||||
if (arr.length) {
|
||||
this.display = false;
|
||||
this.$message('创建完成');
|
||||
this.$store.dispatch('map/updateMapStandData', {models: arr, type: 'espList'});
|
||||
this.deviceSelect();
|
||||
} else {
|
||||
this.$message('暂无车站');
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@ -1,252 +0,0 @@
|
||||
<template>
|
||||
<transition name="el-zoom-in-center">
|
||||
<div class="map-control">
|
||||
<div class="joylink-card">
|
||||
<div class="clearfix">
|
||||
<span>
|
||||
{{ $t('map.mapName') }}
|
||||
<b>{{ mapInfo.name }}</b>
|
||||
</span>
|
||||
<el-button type="text" class="mapEdit_box" @click="previewRouteEvent">{{ $t('map.preview') }}</el-button>
|
||||
<el-button type="text" class="mapEdit_box" @click="createRouteEvent">{{ $t('map.newConstruction') }}</el-button>
|
||||
<el-button type="text" class="mapEdit_box" @click="drawMap">{{ $t('map.drawMap') }}</el-button>
|
||||
<el-button type="text" class="mapEdit_box" @click="showMap">{{ $t('map.viewLayer') }}</el-button>
|
||||
</div>
|
||||
<el-tabs v-model="enabledTab" type="card" class="map_card" @tab-click="changePane">
|
||||
<el-tab-pane :label="$t('map.routeID')" class="tab_pane_box" name="route">
|
||||
<route-operate
|
||||
ref="routeOperate"
|
||||
: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"
|
||||
:map-info="mapInfo"
|
||||
:selected="selected"
|
||||
@setCenter="setCenter"
|
||||
/>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane :label="$t('map.signal')" class="tab_pane_box" name="signal">
|
||||
<signal-operate
|
||||
ref="signalOperate"
|
||||
:map-info="mapInfo"
|
||||
:selected="selected"
|
||||
@setCenter="setCenter"
|
||||
/>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane :label="$t('map.pathUnit')" class="tab_pane_box" name="path">
|
||||
<path-operate
|
||||
ref="pathOperate"
|
||||
:map-info="mapInfo"
|
||||
:selected="selected"
|
||||
@setCenter="setCenter"
|
||||
/>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane :label="$t('map.routing')" class="tab_pane_box" name="routing">
|
||||
<routing-operate
|
||||
ref="routingOperate"
|
||||
:map-info="mapInfo"
|
||||
:selected="selected"
|
||||
@setCenter="setCenter"
|
||||
/>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="站台屏蔽门" class="tab_pane_box" name="safetyDoor">
|
||||
<psd-operate
|
||||
ref="psdOperate"
|
||||
:map-info="mapInfo"
|
||||
:selected="selected"
|
||||
/>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="站台紧急停车按钮" class="tab_pane_box" name="park">
|
||||
<esp-operate
|
||||
ref="espOperate"
|
||||
:map-info="mapInfo"
|
||||
:selected="selected"
|
||||
/>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</div>
|
||||
</div>
|
||||
</transition>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import RouteOperate from './routeoperate/index';
|
||||
import RoutingOperate from './routingoperate/index';
|
||||
import AutomaticOperate from './automaticoperate/index';
|
||||
import PathOperate from './pathoperate/index';
|
||||
import PsdOperate from './psdOperate/index';
|
||||
import EspOperate from './espOperate/index';
|
||||
import SignalOperate from './signaloperate/index';
|
||||
|
||||
export default {
|
||||
name: 'DataRelation',
|
||||
components: {
|
||||
RouteOperate,
|
||||
RoutingOperate,
|
||||
AutomaticOperate,
|
||||
PathOperate,
|
||||
PsdOperate,
|
||||
EspOperate,
|
||||
SignalOperate
|
||||
},
|
||||
props: {
|
||||
selected: {
|
||||
type: Object,
|
||||
default: function () {
|
||||
return null;
|
||||
}
|
||||
},
|
||||
mapInfo: {
|
||||
type: Object,
|
||||
default: function() { return {name: this.$t('map.pleaseSelectMap')}; }
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
enabledTab: 'route'
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
},
|
||||
methods: {
|
||||
showMap() {
|
||||
this.$emit('showMap');
|
||||
},
|
||||
createRouteEvent() {
|
||||
switch (this.enabledTab) {
|
||||
case 'route':
|
||||
this.$refs.routeOperate.createRouteEvent();
|
||||
break;
|
||||
case 'routing':
|
||||
this.$refs.routingOperate.createRouteEvent();
|
||||
break;
|
||||
case 'automatic':
|
||||
this.$refs.automaticOperate.createRouteEvent();
|
||||
break;
|
||||
case 'signal':
|
||||
this.$refs.signalOperate.createRouteEvent();
|
||||
break;
|
||||
case 'path':
|
||||
this.$refs.pathOperate.createRouteEvent();
|
||||
break;
|
||||
}
|
||||
},
|
||||
previewRouteEvent() {
|
||||
switch (this.enabledTab) {
|
||||
case 'route':
|
||||
this.$refs.routeOperate.previewRouteEvent();
|
||||
break;
|
||||
case 'routing':
|
||||
this.$refs.routingOperate.previewRouteEvent();
|
||||
break;
|
||||
case 'automatic':
|
||||
this.$refs.automaticOperate.previewRouteEvent();
|
||||
break;
|
||||
case 'signal':
|
||||
this.$refs.signalOperate.previewRouteEvent();
|
||||
break;
|
||||
case 'path':
|
||||
this.$refs.pathOperate.previewRouteEvent();
|
||||
break;
|
||||
}
|
||||
},
|
||||
changePane(data) {
|
||||
this.enabledTab = data.name;
|
||||
},
|
||||
setSelected(selected) {
|
||||
switch (this.enabledTab) {
|
||||
case 'route':
|
||||
this.$refs.routeOperate.setSelected(selected);
|
||||
break;
|
||||
case 'routing':
|
||||
this.$refs.routingOperate.setSelected(selected);
|
||||
break;
|
||||
case 'automatic':
|
||||
this.$refs.automaticOperate.setSelected(selected);
|
||||
break;
|
||||
case 'signal':
|
||||
this.$refs.signalOperate.setSelected(selected);
|
||||
break;
|
||||
case 'path':
|
||||
this.$refs.pathOperate.setSelected(selected);
|
||||
break;
|
||||
}
|
||||
},
|
||||
setCenter(code) {
|
||||
this.$emit('setCenter', code);
|
||||
},
|
||||
drawMap() {
|
||||
this.$emit('selectView', 'draft');
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style rel="stylesheet/scss" lang="scss" scoped>
|
||||
@import "src/styles/mixin.scss";
|
||||
|
||||
.map-context {
|
||||
display: block;
|
||||
float: left;
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
.map-control {
|
||||
float: right;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
.clearfix{
|
||||
height: 47px;
|
||||
padding: 15px;
|
||||
}
|
||||
.joylink-card{
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
.mapEdit_box{
|
||||
float: right;
|
||||
padding: 3px 0;
|
||||
margin-right: 5px;
|
||||
}
|
||||
.map_card {
|
||||
height: calc(100% - 47px);
|
||||
.tab_pane_box{
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.physical-view {
|
||||
line-height: 25px;
|
||||
height: 118px;
|
||||
padding-left: 12px;
|
||||
|
||||
.el-checkbox {
|
||||
width: 70px;
|
||||
margin: 0;
|
||||
margin-right: 30px;
|
||||
}
|
||||
}
|
||||
/deep/ {
|
||||
.map_card .el-tabs__header .el-tabs__item.is-active {
|
||||
border-bottom-color: #f5f7fa;
|
||||
background: #f5f7fa;
|
||||
}
|
||||
.map_card .el-tabs__content{
|
||||
height: calc(100% - 56px);
|
||||
}
|
||||
}
|
||||
|
||||
/deep/ .map-draft-group {
|
||||
float: right;
|
||||
margin: 10px 5px;
|
||||
}
|
||||
|
||||
/deep/ {
|
||||
.view-control {
|
||||
overflow-y: auto;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,198 +0,0 @@
|
||||
<template>
|
||||
<el-dialog v-dialogDrag :title="$t('map.pathUnitList')" :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 { getRouteUnitList, delRouteUnit, getRouteUnit } from '@/api/jmap/pathunit';
|
||||
|
||||
export default {
|
||||
name: 'RouteDetail',
|
||||
components: {
|
||||
},
|
||||
props: {
|
||||
mapInfo: {
|
||||
type: Object,
|
||||
default() {
|
||||
return null;
|
||||
}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
show: false,
|
||||
mapList: [],
|
||||
pagerConfig: {
|
||||
pageSize: 'pageSize',
|
||||
pageIndex: 'pageNum'
|
||||
},
|
||||
queryForm: {
|
||||
labelWidth: '120px',
|
||||
queryObject: {
|
||||
startSectionCode: {
|
||||
type: 'select',
|
||||
label: this.$t('map.startSectionCode'),
|
||||
config: {
|
||||
data: []
|
||||
}
|
||||
},
|
||||
endSectionCode: {
|
||||
type: 'select',
|
||||
label: this.$t('map.endSectionCode'),
|
||||
config: {
|
||||
data: []
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
queryList: {
|
||||
query: this.queryFunction,
|
||||
afterQuery: this.afterQuery,
|
||||
selectCheckShow: false,
|
||||
indexShow: true,
|
||||
columns: [
|
||||
{
|
||||
title: this.$t('map.pathUnitCode'),
|
||||
prop: 'code'
|
||||
},
|
||||
{
|
||||
title: this.$t('map.pathUnitMapName'),
|
||||
prop: 'mapId'
|
||||
},
|
||||
{
|
||||
title: this.$t('map.startSectionCode'),
|
||||
prop: 'startSectionCode'
|
||||
|
||||
},
|
||||
{
|
||||
title: this.$t('map.endSectionCode'),
|
||||
prop: 'endSectionCode'
|
||||
},
|
||||
{
|
||||
title: this.$t('map.orderNum'),
|
||||
prop: 'orderNum'
|
||||
},
|
||||
{
|
||||
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'
|
||||
])
|
||||
},
|
||||
watch: {
|
||||
sectionList: function (val, old) {
|
||||
const list = [];
|
||||
if (val && val.length) {
|
||||
val.forEach(elem => {
|
||||
if (elem.isStandTrack || elem.isReentryTrack || elem.isTransferTrack) {
|
||||
list.push({ label: this.formatName(elem.code), value: elem.code });
|
||||
}
|
||||
});
|
||||
this.queryForm.queryObject.startSectionCode.config.data = list;
|
||||
this.queryForm.queryObject.endSectionCode.config.data = list;
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.acquireMapList();
|
||||
},
|
||||
methods: {
|
||||
doShow() {
|
||||
this.show = true;
|
||||
this.reloadTable();
|
||||
},
|
||||
doClose() {
|
||||
this.show = false;
|
||||
},
|
||||
formatName(code) {
|
||||
let name = '';
|
||||
const section = this.$store.getters['map/getDeviceByCode'](code);
|
||||
if (section) {
|
||||
const station = this.$store.getters['map/getDeviceByCode'](section.stationCode);
|
||||
if (station) {
|
||||
name += `${station.name} `;
|
||||
}
|
||||
name += `${section.name} (${section.code})`;
|
||||
}
|
||||
|
||||
return name;
|
||||
},
|
||||
queryFunction(params) {
|
||||
if (this.mapInfo && this.mapInfo.id) {
|
||||
return getRouteUnitList(this.mapInfo.id, params);
|
||||
}
|
||||
},
|
||||
acquireMapList() {
|
||||
// 地图名称列表
|
||||
listMap({ drawWay:false}).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.startSectionCode = that.formatName(elem.startSectionCode);
|
||||
elem.endSectionCode = that.formatName(elem.endSectionCode);
|
||||
});
|
||||
}
|
||||
}
|
||||
return data;
|
||||
},
|
||||
editObj(index, row) {
|
||||
getRouteUnit(row.id).then(response => {
|
||||
const data = response.data;
|
||||
this.$emit('routeSelected', data);
|
||||
this.doClose();
|
||||
});
|
||||
},
|
||||
deleteObj(index, row) {
|
||||
if (this.mapInfo && this.mapInfo.id && row) {
|
||||
// 删除
|
||||
delRouteUnit(row.id).then(response => {
|
||||
this.$message.success(this.$t('tip.successfullyDelete'));
|
||||
this.reloadTable();
|
||||
}).catch(() => {
|
||||
this.$messageBox(this.$t('tip.failDelete'));
|
||||
});
|
||||
}
|
||||
},
|
||||
reloadTable() {
|
||||
if (this.queryList && this.queryList.reload) {
|
||||
this.queryList.reload();
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@ -1,84 +0,0 @@
|
||||
<template>
|
||||
<div style="height: 100%;">
|
||||
<route-draft
|
||||
ref="routeEdit"
|
||||
:selected="selected"
|
||||
:map-info="mapInfo"
|
||||
:route-data="routeData"
|
||||
/>
|
||||
<route-detail ref="routeDetail" :map-info="mapInfo" @routeSelected="routeSelected" />
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import RouteDraft from './route';
|
||||
import RouteDetail from './detail';
|
||||
|
||||
export default {
|
||||
name: 'PathOperate',
|
||||
components: {
|
||||
RouteDraft,
|
||||
RouteDetail
|
||||
},
|
||||
props: {
|
||||
mapInfo: {
|
||||
type: Object,
|
||||
default() {
|
||||
return null;
|
||||
}
|
||||
},
|
||||
selected: {
|
||||
type: Object,
|
||||
default() {
|
||||
return null;
|
||||
}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
enabledTab: 'Route',
|
||||
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;
|
||||
});
|
||||
}
|
||||
},
|
||||
routeSelected: 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>
|
||||
@ -1,200 +0,0 @@
|
||||
<template>
|
||||
<el-dialog v-dialogDrag :title="$t('map.pathUnitList')" :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, listRouteRoute } from '@/api/jmap/mapdraft';
|
||||
|
||||
export default {
|
||||
name: 'PathRoute',
|
||||
components: {
|
||||
},
|
||||
props: {
|
||||
mapInfo: {
|
||||
type: Object,
|
||||
default() {
|
||||
return null;
|
||||
}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
show: false,
|
||||
mapList: [],
|
||||
pagerConfig: {
|
||||
pageSize: 'pageSize',
|
||||
pageIndex: 'pageNum'
|
||||
},
|
||||
queryForm: {
|
||||
labelWidth: '120px',
|
||||
queryObject: {
|
||||
name: {
|
||||
type: 'select',
|
||||
label: this.$t('map.pathName'),
|
||||
config: {
|
||||
data: []
|
||||
}
|
||||
},
|
||||
stationCode: {
|
||||
type: 'select',
|
||||
label: this.$t('map.routeStationName'),
|
||||
config: {
|
||||
data: []
|
||||
}
|
||||
},
|
||||
startSignalCode: {
|
||||
type: 'select',
|
||||
label: this.$t('map.startingSignalName'),
|
||||
config: {
|
||||
data: []
|
||||
}
|
||||
},
|
||||
endSignalCode: {
|
||||
type: 'select',
|
||||
label: this.$t('map.endingSignalName'),
|
||||
config: {
|
||||
data: []
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
queryList: {
|
||||
query: this.queryFunction,
|
||||
afterQuery: this.afterQuery,
|
||||
selectCheckShow: true,
|
||||
indexShow: true,
|
||||
columns: [
|
||||
{
|
||||
title: this.$t('map.routeID'),
|
||||
prop: 'code'
|
||||
},
|
||||
{
|
||||
title: this.$t('map.pathName'),
|
||||
prop: 'name'
|
||||
},
|
||||
{
|
||||
title: this.$t('map.pathUnitMapName'),
|
||||
prop: 'mapId'
|
||||
},
|
||||
{
|
||||
title: this.$t('map.routeStationName'),
|
||||
prop: 'stationCode'
|
||||
},
|
||||
{
|
||||
title: this.$t('map.startingSignalName'),
|
||||
prop: 'startSignalCode'
|
||||
},
|
||||
{
|
||||
title: this.$t('map.endingSignalName'),
|
||||
prop: 'endSignalCode'
|
||||
},
|
||||
{
|
||||
type: 'button',
|
||||
title: this.$t('map.operation'),
|
||||
width: '200',
|
||||
buttons: [
|
||||
{
|
||||
name: this.$t('map.add'),
|
||||
handleClick: this.addObj
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
selectAllClick: this.selectAll
|
||||
}
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapGetters('map', [
|
||||
'signalList',
|
||||
'switchList',
|
||||
'sectionList',
|
||||
'stationList',
|
||||
'stationStandList'
|
||||
])
|
||||
},
|
||||
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.startSignalCode.config.data = list;
|
||||
this.queryForm.queryObject.endSignalCode.config.data = list;
|
||||
}
|
||||
},
|
||||
stationList: function (val, old) {
|
||||
const list = [];
|
||||
if (val && val.length) {
|
||||
for (let i = 0; i < val.length; i++) {
|
||||
list.push({ label: val[i].name, value: val[i].code });
|
||||
}
|
||||
this.queryForm.queryObject.stationCode.config.data = list;
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.acquireMapList();
|
||||
},
|
||||
methods: {
|
||||
doShow() {
|
||||
this.show = true;
|
||||
this.reloadTable();
|
||||
},
|
||||
doClose() {
|
||||
this.show = false;
|
||||
},
|
||||
queryFunction(params) {
|
||||
if (this.mapInfo && this.mapInfo.id) {
|
||||
return listRouteRoute(this.mapInfo.id, params);
|
||||
}
|
||||
},
|
||||
acquireMapList() {
|
||||
// 地图名称列表
|
||||
listMap({ drawWay:false}).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']);
|
||||
that.$convertSpecifiedField(elem, that.stationList, 'code', 'name', ['stationCode']);
|
||||
that.$convertSpecifiedField(elem, that.signalList, 'code', 'name', ['startSignalCode', 'endSignalCode']);
|
||||
});
|
||||
}
|
||||
}
|
||||
return data;
|
||||
},
|
||||
addObj(index, row) {
|
||||
const data = [];
|
||||
data.push(row);
|
||||
this.$emit('routeSelected', data);
|
||||
this.doClose();
|
||||
},
|
||||
selectAll(data) {
|
||||
this.$emit('routeSelected', data);
|
||||
this.doClose();
|
||||
},
|
||||
reloadTable() {
|
||||
if (this.queryList && this.queryList.reload) {
|
||||
this.queryList.reload();
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@ -1,293 +0,0 @@
|
||||
<template>
|
||||
<div style="height: 100%;">
|
||||
<el-scrollbar wrap-class="scrollbar-wrapper">
|
||||
<el-form ref="form" :model="addModel" :rules="rules" label-width="120px" size="mini">
|
||||
<div class="path-box">
|
||||
<el-steps :active="display" style="display: none;">
|
||||
<el-step title="路径单元创建" icon="el-icon-edit" />
|
||||
<el-step title="路径单元整合" icon="el-icon-setting" />
|
||||
</el-steps>
|
||||
<div v-show="display == 1" class="definition">
|
||||
<el-form-item :label="$t('map.startSectionCodeColon')" prop="startSectionCode">
|
||||
<el-select v-model="addModel.startSectionCode" clearable :filterable="true">
|
||||
<el-option
|
||||
v-for="item in filterSectionList"
|
||||
:key="item.code"
|
||||
:label="formatName(item.code)"
|
||||
:value="item.code"
|
||||
/>
|
||||
<!-- </el-input> -->
|
||||
</el-select>
|
||||
<el-button
|
||||
:type=" field === 'startSectionCode' ? 'danger' : 'primary'"
|
||||
@click="hover('startSectionCode')"
|
||||
>{{ $t('map.activate') }}</el-button>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('map.endSectionCodeColon')" prop="endSectionCode">
|
||||
<el-select v-model="addModel.endSectionCode" clearable :filterable="true">
|
||||
<el-option
|
||||
v-for="item in filterSectionList"
|
||||
:key="item.code"
|
||||
:label="formatName(item.code)"
|
||||
:value="item.code"
|
||||
/>
|
||||
</el-select>
|
||||
<el-button
|
||||
:type=" field === 'endSectionCode' ? 'danger' : 'primary'"
|
||||
@click="hover('endSectionCode')"
|
||||
>{{ $t('map.activate') }}</el-button>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button-group>
|
||||
<el-button type="primary" size="small" style="margin-top: 10px" @click="nextStep">下一步
|
||||
</el-button>
|
||||
</el-button-group>
|
||||
</el-form-item>
|
||||
</div>
|
||||
<div v-show="display == 2" class="rule">
|
||||
<el-button
|
||||
type="primary"
|
||||
size="small"
|
||||
style="float: right; margin-right: 20px; margin-bottom: 10px;"
|
||||
@click="pushSwitch"
|
||||
>{{ $t('map.add') }}</el-button>
|
||||
<el-table :data="addModel.mapRouteUnitRelList" row-key="id" border style="width: 95%; margin: 0 auto">
|
||||
<el-table-column type="index" />
|
||||
<el-table-column prop="routeCode" label="进路code" />
|
||||
<el-table-column prop="routeName" label="进路名称" />
|
||||
<el-table-column fixed="right" :label="$t('map.operation')" width="50">
|
||||
<template slot-scope="scope">
|
||||
<el-button type="text" size="small" @click.native.prevent="deletePathUnit(scope.$index, addModel.mapRouteUnitRelList)">
|
||||
{{ $t('map.remove') }}
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<el-form-item>
|
||||
<el-button-group>
|
||||
<el-button type="primary" size="small" style="margin-top: 10px" @click="lastStep">{{ $t('map.lastStep') }}
|
||||
</el-button>
|
||||
</el-button-group>
|
||||
<el-button-group>
|
||||
<el-button v-if="!editShow" type="primary" size="small" :loading="loading" style="margin-top: 10px" @click="save">{{ $t('map.save') }}</el-button>
|
||||
<el-button v-if="editShow" type="warning" size="small" :loading="loading" style="margin-top: 10px" @click="save">{{ $t('map.updata') }}</el-button>
|
||||
</el-button-group>
|
||||
</el-form-item>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</el-form>
|
||||
</el-scrollbar>
|
||||
<path-route ref="pathRoute" :map-info="mapInfo" @routeSelected="routeSelected" />
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { mapGetters } from 'vuex';
|
||||
import { getUID } from '@/jmap/utils/Uid';
|
||||
import { addRouteUnit, setRouteUnit } from '@/api/jmap/pathunit';
|
||||
import PathRoute from './pathRoute';
|
||||
import { ViewMode } from '@/scripts/ConstDic';
|
||||
// import Sortable from 'sortablejs';
|
||||
|
||||
export default {
|
||||
name: 'RouteOperation',
|
||||
components: {
|
||||
PathRoute
|
||||
},
|
||||
props: {
|
||||
selected: {
|
||||
type: Object,
|
||||
default() {
|
||||
return null;
|
||||
}
|
||||
},
|
||||
mapInfo: {
|
||||
type: Object,
|
||||
default() {
|
||||
return null;
|
||||
}
|
||||
},
|
||||
routeData: {
|
||||
type: Object,
|
||||
default() {
|
||||
return null;
|
||||
}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
ViewMode: ViewMode,
|
||||
field: '',
|
||||
code: '',
|
||||
type: '',
|
||||
loading: false,
|
||||
addModel: {
|
||||
mapId: '',
|
||||
code: getUID('RouteUnit'),
|
||||
startSectionCode: '',
|
||||
endSectionCode: '',
|
||||
mapRouteUnitRelList: []
|
||||
},
|
||||
editShow: false,
|
||||
display: 1,
|
||||
rules: {
|
||||
startSectionCode: [
|
||||
{ required: true, message: this.$t('rules.pleaseSelectStartSignal'), trigger: 'change' }
|
||||
],
|
||||
endSectionCode: [
|
||||
{ required: true, message: this.$t('rules.pleaseSelectEndSignal'), trigger: 'change' }
|
||||
]
|
||||
}
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapGetters('map', [
|
||||
'sectionList'
|
||||
]),
|
||||
filterSectionList() {
|
||||
if (this.sectionList) {
|
||||
return this.sectionList.filter(elem => { return elem.isStandTrack || elem.isReentryTrack || elem.isTransferTrack; });
|
||||
} else {
|
||||
return [];
|
||||
}
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
mapInfo(val) {
|
||||
if (val) {
|
||||
this.addModel.mapId = val.id;
|
||||
}
|
||||
},
|
||||
routeData(val, old) {
|
||||
if (val) {
|
||||
this.addModel = val;
|
||||
this.display = 1;
|
||||
this.editShow = true;
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
// this.rowDrop();
|
||||
},
|
||||
methods: {
|
||||
// 行拖拽
|
||||
// rowDrop() {
|
||||
// const that = this;
|
||||
// const tbody = document.querySelector('.el-table__body-wrapper tbody');
|
||||
// if (tbody) {
|
||||
// Sortable.create(tbody, {
|
||||
// onEnd({ newIndex, oldIndex }) {
|
||||
// const currRow = that.addModel.mapRouteUnitRelList.splice(oldIndex, 1)[0];
|
||||
// that.addModel.mapRouteUnitRelList.splice(newIndex, 0, currRow);
|
||||
// }
|
||||
// });
|
||||
// }
|
||||
// },
|
||||
hover(field) {
|
||||
this.field = field === this.field ? '' : field;
|
||||
},
|
||||
formatName(code) {
|
||||
let name = '';
|
||||
const section = this.$store.getters['map/getDeviceByCode'](code);
|
||||
if (section) {
|
||||
const station = this.$store.getters['map/getDeviceByCode'](section.stationCode);
|
||||
if (station) {
|
||||
name += `${station.name} `;
|
||||
}
|
||||
name += `${section.name} (${section.code})`;
|
||||
}
|
||||
|
||||
return name;
|
||||
},
|
||||
pushSwitch() {
|
||||
if (this.$refs && this.$refs.pathRoute) {
|
||||
this.$refs.pathRoute.doShow();
|
||||
}
|
||||
},
|
||||
routeSelected(data) {
|
||||
data.forEach((element, index) => {
|
||||
this.addModel.mapRouteUnitRelList.push({
|
||||
routeCode: element.code,
|
||||
routeName: element.name
|
||||
// routeUnitCode: this.addModel.code
|
||||
});
|
||||
});
|
||||
},
|
||||
// 下一步
|
||||
nextStep() {
|
||||
this.$refs.form.validate((valid) => {
|
||||
if (valid) {
|
||||
this.display = 2;
|
||||
}
|
||||
});
|
||||
},
|
||||
lastStep() {
|
||||
this.display = 1;
|
||||
},
|
||||
buildModel() {
|
||||
this.addModel.mapRouteUnitRelList.forEach((elem, index) => {
|
||||
elem['orderNum'] = index + 1;
|
||||
});
|
||||
|
||||
const model = Object.assign({}, this.addModel);
|
||||
model['mapId'] = this.mapInfo.id;
|
||||
|
||||
return model;
|
||||
},
|
||||
save() {
|
||||
this.loading = true;
|
||||
if (this.editShow) {
|
||||
setRouteUnit(this.buildModel()).then(response => {
|
||||
this.$message.success(this.$t('tip.updateSuccessfully'));
|
||||
this.clear();
|
||||
}).catch(() => {
|
||||
this.$messageBox(this.$t('tip.operationAbnormal'));
|
||||
this.loading = false;
|
||||
});
|
||||
} else {
|
||||
addRouteUnit(this.buildModel()).then(response => {
|
||||
this.$message.success(this.$t('tip.createSuccess'));
|
||||
this.clear();
|
||||
}).catch(() => {
|
||||
this.$messageBox(this.$t('tip.operationAbnormal'));
|
||||
this.loading = false;
|
||||
});
|
||||
}
|
||||
},
|
||||
clear() {
|
||||
if (this.$refs && this.$refs.form && this.mapInfo) {
|
||||
delete this.addModel.id;
|
||||
this.$refs.form.resetFields();
|
||||
this.display = 1;
|
||||
this.editShow = false;
|
||||
this.addModel = {
|
||||
mapId: this.mapInfo.id,
|
||||
code: getUID('RouteUnit'),
|
||||
startSectionCode: '',
|
||||
endSectionCode: '',
|
||||
mapRouteUnitRelList: []
|
||||
};
|
||||
this.loading = false;
|
||||
}
|
||||
},
|
||||
// 移除列表
|
||||
deletePathUnit(index, data) {
|
||||
this.addModel.mapRouteUnitRelList.splice(index, 1);
|
||||
},
|
||||
setSelected(selected) {
|
||||
if (selected) {
|
||||
if (selected._type.toUpperCase() === 'Section'.toUpperCase() && this.field.toUpperCase() === 'startSectionCode'.toUpperCase()) {
|
||||
this.addModel.startSectionCode = selected.code;
|
||||
} else if (selected._type.toUpperCase() === 'Section'.toUpperCase() && this.field.toUpperCase() === 'endSectionCode'.toUpperCase()) {
|
||||
this.addModel.endSectionCode = selected.code;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style rel="stylesheet/scss" lang="scss" scoped>
|
||||
/deep/ .el-radio {
|
||||
margin-right: 10px;
|
||||
}
|
||||
</style>
|
||||
@ -1,154 +0,0 @@
|
||||
<template>
|
||||
<div style="height: 100%;">
|
||||
<div style="height: calc(100% - 46px);">
|
||||
<template v-if="!display">
|
||||
<el-scrollbar wrap-class="scrollbar-wrapper">
|
||||
<el-form ref="ruleForm" :model="editModel" label-width="120px" size="mini">
|
||||
<el-form-item label="code" prop="code">
|
||||
<el-select v-model="editModel.code" clearable :filterable="true" @change="deviceChange">
|
||||
<el-option
|
||||
v-for="item in psdList"
|
||||
:key="item.code"
|
||||
:label="item.name"
|
||||
:value="item.code"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="名称" prop="name">
|
||||
<el-input v-model="editModel.name" />
|
||||
</el-form-item>
|
||||
<el-form-item label="所属站台" prop="stationStandCode">
|
||||
<el-select v-model="editModel.stationStandCode" disabled>
|
||||
<el-option
|
||||
v-for="item in stationStandList"
|
||||
:key="item.code"
|
||||
:label="item.name"
|
||||
:value="item.code"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-scrollbar>
|
||||
</template>
|
||||
<template v-if="display">
|
||||
<div style="text-align: center;padding-top: 20px;">暂无数据</div>
|
||||
</template>
|
||||
</div>
|
||||
<div class="button_box">
|
||||
<el-button-group class="map-draft-group">
|
||||
<el-button type="primary" size="small" @click="create">批量创建</el-button>
|
||||
<el-button type="danger" size="small" @click="editObject">修改</el-button>
|
||||
</el-button-group>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { mapGetters } from 'vuex';
|
||||
import { deepAssign } from '@/utils/index';
|
||||
import { getUID } from '@/jmap/utils/Uid';
|
||||
|
||||
export default {
|
||||
name: 'SafetyDoorOperate',
|
||||
components: {
|
||||
|
||||
},
|
||||
props: {
|
||||
mapInfo: {
|
||||
type: Object,
|
||||
default() {
|
||||
return null;
|
||||
}
|
||||
},
|
||||
selected: {
|
||||
type: Object,
|
||||
default() {
|
||||
return null;
|
||||
}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
display: true,
|
||||
editModel: {
|
||||
code: '',
|
||||
name: '',
|
||||
stationCode: '',
|
||||
stationStandCode: ''
|
||||
}
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapGetters('map', [
|
||||
'map',
|
||||
'psdList',
|
||||
'stationStandList'
|
||||
])
|
||||
},
|
||||
watch: {
|
||||
'$store.state.map.map': function(val) {
|
||||
if (val) {
|
||||
this.init();
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.init();
|
||||
},
|
||||
methods: {
|
||||
init() {
|
||||
this.display = true;
|
||||
const mapObject = this.map;
|
||||
if (mapObject) {
|
||||
if (mapObject.psdList && mapObject.psdList.length) {
|
||||
this.display = false;
|
||||
} else {
|
||||
mapObject.psdList = [];
|
||||
}
|
||||
}
|
||||
},
|
||||
deviceChange(code) {
|
||||
this.deviceSelect(this.$store.getters['map/getDeviceByCode'](code));
|
||||
},
|
||||
deviceSelect(selected) {
|
||||
this.$refs.ruleForm && this.$refs.ruleForm.resetFields();
|
||||
if (selected && selected._type.toUpperCase() === 'PSD'.toUpperCase()) { // ESP
|
||||
this.editModel = deepAssign(this.editModel, selected);
|
||||
}
|
||||
},
|
||||
editObject() {
|
||||
console.log(this.editModel, 111);
|
||||
},
|
||||
hasPSD(data) {
|
||||
let falg = false;
|
||||
this.map.psdList.forEach(item => {
|
||||
if (item.stationStandCode == data.code) {
|
||||
falg = true;
|
||||
}
|
||||
});
|
||||
return falg;
|
||||
},
|
||||
create() {
|
||||
const arr = [];
|
||||
this.map.stationStandList.forEach(item => {
|
||||
if (item.visible && item.hasDoor && !this.hasPSD(item)) {
|
||||
arr.push({
|
||||
_type: 'PSD',
|
||||
code: getUID('PSD'),
|
||||
name: getUID('PSD'),
|
||||
stationCode: item.stationCode,
|
||||
stationStandCode: item.code
|
||||
});
|
||||
}
|
||||
});
|
||||
if (arr.length) {
|
||||
this.display = false;
|
||||
this.$message('创建完成');
|
||||
this.$store.dispatch('map/updateMapStandData', {models: arr, type: 'psdList'});
|
||||
this.deviceSelect();
|
||||
} else {
|
||||
this.$message('暂无车站');
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@ -1,446 +0,0 @@
|
||||
<template>
|
||||
<el-dialog v-dialogDrag :title="$t('map.routePreview')" :visible.sync="show" width="95%" :before-do-close="doClose">
|
||||
<div>
|
||||
<QueryListPage
|
||||
ref="queryListPage"
|
||||
:pager-config="pagerConfig"
|
||||
:query-form="queryForm"
|
||||
:query-list="queryList"
|
||||
/>
|
||||
</div>
|
||||
<pre-view-field ref="previewField" :map-info="mapInfo" />
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapGetters } from 'vuex';
|
||||
import { listMap, listRouteRoute, deleteRouteRoute, queryRouteRouteDetail, updateRouteRoute } from '@/api/jmap/mapdraft'; /** listRouteMapRoute*/
|
||||
import PreViewField from './preview';
|
||||
|
||||
export default {
|
||||
name: 'RouteDetail',
|
||||
components: {
|
||||
PreViewField
|
||||
},
|
||||
props: {
|
||||
mapInfo: {
|
||||
type: Object,
|
||||
default() {
|
||||
return null;
|
||||
}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
show: false,
|
||||
mapList: [],
|
||||
RouteNatureTypeList: [],
|
||||
RouteAutoTypeList: [],
|
||||
SwitchLocateTypeList: [],
|
||||
turnBackList: [
|
||||
{ label: '是', value: true },
|
||||
{ label: '否', value: false }
|
||||
],
|
||||
pagerConfig: {
|
||||
pageSize: 'pageSize',
|
||||
pageIndex: 'pageNum'
|
||||
},
|
||||
queryForm: {
|
||||
labelWidth: '120px',
|
||||
queryObject: {
|
||||
name: {
|
||||
type: 'text',
|
||||
label: this.$t('map.pathName')
|
||||
},
|
||||
stationCode: {
|
||||
type: 'select',
|
||||
label: this.$t('map.routeStationName'),
|
||||
config: {
|
||||
data: []
|
||||
}
|
||||
},
|
||||
startSignalCode: {
|
||||
type: 'select',
|
||||
label: this.$t('map.startingSignalName'),
|
||||
config: {
|
||||
data: []
|
||||
}
|
||||
},
|
||||
endSignalCode: {
|
||||
type: 'select',
|
||||
label: this.$t('map.endingSignalName'),
|
||||
config: {
|
||||
data: []
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
queryList: {
|
||||
query: this.queryFunction,
|
||||
afterQuery: this.afterQuery,
|
||||
selectCheckShow: false,
|
||||
indexShow: true,
|
||||
columns: [
|
||||
{
|
||||
title: this.$t('map.pathName'),
|
||||
prop: 'name'
|
||||
},
|
||||
{
|
||||
title: this.$t('map.routeStationName'),
|
||||
prop: 'stationCode'
|
||||
},
|
||||
{
|
||||
title: this.$t('map.accessType'),
|
||||
prop: 'turnBack',
|
||||
type: 'tag',
|
||||
columnValue: (row) => { return this.$convertField(row.turnBack, this.turnBackList, ['value', 'label']); },
|
||||
tagType: (row) => { return ''; }
|
||||
|
||||
},
|
||||
{
|
||||
title: this.$t('map.startingSignalName'),
|
||||
prop: 'startSignalCode'
|
||||
},
|
||||
{
|
||||
title: this.$t('map.endingSignalName'),
|
||||
prop: 'endSignalCode'
|
||||
},
|
||||
{
|
||||
type: 'button',
|
||||
title: this.$t('map.continueProtectSwitchData'),
|
||||
buttons: [
|
||||
{
|
||||
name: this.$t('map.preview'),
|
||||
handleClick: this.overlapSwitchDetail
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
type: 'button',
|
||||
title: this.$t('map.accessSideTurnoutData'),
|
||||
buttons: [
|
||||
{
|
||||
name: this.$t('map.preview'),
|
||||
handleClick: this.flankProtectionSwitchDetail
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
type: 'button',
|
||||
title: this.$t('map.routeProtectsData'),
|
||||
buttons: [
|
||||
{
|
||||
name: this.$t('map.preview'),
|
||||
handleClick: this.routeOverlap
|
||||
}
|
||||
]
|
||||
},
|
||||
|
||||
{
|
||||
type: 'button',
|
||||
title: this.$t('map.physicalSection'), // 物理区段list
|
||||
buttons: [
|
||||
{
|
||||
name: this.$t('map.preview'),
|
||||
handleClick: this.sectionDetail
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
type: 'button',
|
||||
title: this.$t('map.routeRouteTurnoutData'),
|
||||
buttons: [
|
||||
{
|
||||
name: this.$t('map.preview'),
|
||||
handleClick: this.routeSwitchDetail
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
type: 'button',
|
||||
title: this.$t('map.hostileApproachData'),
|
||||
buttons: [
|
||||
{
|
||||
name: this.$t('map.relation'),
|
||||
handleClick: this.conflictingRouteSection
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
type: 'button',
|
||||
title: this.$t('map.operation'),
|
||||
width: '200',
|
||||
buttons: [
|
||||
{
|
||||
name: this.$t('map.compile'),
|
||||
handleClick: this.edit
|
||||
},
|
||||
{
|
||||
name: this.$t('map.deleteObj'),
|
||||
handleClick: this.deleteObj,
|
||||
type: 'danger'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapGetters('map', [
|
||||
'signalList',
|
||||
'switchList',
|
||||
'sectionList',
|
||||
'stationList',
|
||||
'stationStandList'
|
||||
])
|
||||
},
|
||||
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.startSignalCode.config.data = list;
|
||||
this.queryForm.queryObject.endSignalCode.config.data = list;
|
||||
}
|
||||
},
|
||||
stationList: function (val, old) {
|
||||
const list = [];
|
||||
if (val && val.length) {
|
||||
for (let i = 0; i < val.length; i++) {
|
||||
list.push({ label: val[i].name, value: val[i].code });
|
||||
}
|
||||
this.queryForm.queryObject.stationCode.config.data = list;
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.$Dictionary.routeNatureType().then(list => {
|
||||
this.RouteNatureTypeList = list;
|
||||
});
|
||||
|
||||
this.$Dictionary.routeAutoType().then(list => {
|
||||
this.RouteAutoTypeList = list;
|
||||
});
|
||||
|
||||
this.$Dictionary.switchLocateType().then(list => {
|
||||
this.SwitchLocateTypeList = list;
|
||||
});
|
||||
|
||||
this.acquireMapList();
|
||||
},
|
||||
methods: {
|
||||
doShow() {
|
||||
this.show = true;
|
||||
this.reloadTable();
|
||||
},
|
||||
doClose() {
|
||||
this.show = false;
|
||||
},
|
||||
queryFunction(params) {
|
||||
if (this.mapInfo && this.mapInfo.id) {
|
||||
return listRouteRoute(this.mapInfo.id, params);
|
||||
}
|
||||
},
|
||||
acquireMapList() {
|
||||
listMap({ drawWay:false}).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.RouteAutoTypeList, 'code', 'name', ['autoType']);
|
||||
that.$convertSpecifiedField(elem, that.RouteNatureTypeList, 'code', 'name', ['natureType']);
|
||||
that.$convertSpecifiedField(elem, that.SwitchLocateTypeList, 'code', 'name', ['overlapSwitchLocateType']);
|
||||
that.$convertSpecifiedField(elem, that.mapList, 'id', 'name', ['mapId']);
|
||||
that.$convertSpecifiedField(elem, that.switchList, 'code', 'name', ['routeOverlapSwitchList']);
|
||||
that.$convertSpecifiedField(elem, that.signalList, 'code', 'uniqueName', ['startSignalCode', 'endSignalCode']);
|
||||
that.$convertSpecifiedField(elem, that.stationList, 'code', 'name', ['stationCode']);
|
||||
that.$convertSpecifiedField(elem, that.sectionList, 'code', 'name', ['nearSectionCode', 'autoTriggerSectionCode', 'turnBackSectionCode']);
|
||||
});
|
||||
}
|
||||
}
|
||||
return data;
|
||||
},
|
||||
async routeOverlap(index, row) { // 延续保护区段数据列表
|
||||
if (this.$refs && this.$refs.previewField && row) {
|
||||
const sectionDict = {};
|
||||
this.sectionList.map(elem => { sectionDict[elem.code] = elem.name; });
|
||||
const routeOverlapSectionList = row.routeOverlapSectionList.map(elem => { return {sectionCode : elem}; });
|
||||
const fieldList = {
|
||||
id: row.id,
|
||||
mapId: this.$route.params.mapId,
|
||||
title: '进路延续保护区段数据',
|
||||
name: row.name,
|
||||
model: {
|
||||
items: [
|
||||
{ prop: 'sectionCode', label: '物理区段ID', type: 'text' },
|
||||
{ prop: 'sectionCode', label: '物理区段名称', type: 'select', options: sectionDict }
|
||||
]
|
||||
}
|
||||
};
|
||||
this.$refs.previewField.doShow(fieldList, routeOverlapSectionList);
|
||||
}
|
||||
},
|
||||
async sectionDetail(index, row) { // 进路物理区段
|
||||
if (this.$refs && this.$refs.previewField && row) {
|
||||
const sectionDict = {};
|
||||
this.sectionList.map(elem => { sectionDict[elem.code] = elem.name; });
|
||||
const routeSectionList = row.routeSectionList.map(elem => { return {sectionCode : elem}; });
|
||||
const fieldList = {
|
||||
id: row.id,
|
||||
mapId: this.$route.params.mapId,
|
||||
title: '进路物理区段数据',
|
||||
name: row.name,
|
||||
model: {
|
||||
items: [
|
||||
{ prop: 'sectionCode', label: '物理区段ID', type: 'text' },
|
||||
{ prop: 'sectionCode', label: '物理区段名称', type: 'select', options: sectionDict }
|
||||
]
|
||||
}
|
||||
};
|
||||
this.$refs.previewField.doShow(fieldList, routeSectionList);
|
||||
}
|
||||
},
|
||||
async overlapSwitchDetail(index, row) { // 延续保护道岔
|
||||
if (this.$refs && this.$refs.previewField && row) {
|
||||
const switchDict = {};
|
||||
const switchTypeDict = {};
|
||||
this.switchList.map(elem => { switchDict[elem.code] = elem.name; });
|
||||
this.SwitchLocateTypeList.map(elem => { switchTypeDict[elem.code] = elem.name; });
|
||||
const fieldList = {
|
||||
id: row.id,
|
||||
mapId: this.$route.params.mapId,
|
||||
title: '延续保护道岔数据',
|
||||
name: row.name,
|
||||
model: {
|
||||
items: [
|
||||
{ prop: 'switchCode', label: '道岔ID', type: 'text' },
|
||||
{ prop: 'switchCode', label: '道岔名称', type: 'select', options: switchDict },
|
||||
{ prop: 'switchLocateType', label: '道岔类型', type: 'select', options: switchTypeDict }
|
||||
]
|
||||
}
|
||||
};
|
||||
this.$refs.previewField.doShow(fieldList, row.routeOverlapSwitchList);
|
||||
}
|
||||
},
|
||||
async flankProtectionSwitchDetail(index, row) { // 进路侧防道岔
|
||||
if (this.$refs && this.$refs.previewField && row) {
|
||||
const switchDict = {};
|
||||
const switchTypeDict = {};
|
||||
this.switchList.map(elem => { switchDict[elem.code] = elem.name; });
|
||||
this.SwitchLocateTypeList.map(elem => { switchTypeDict[elem.code] = elem.name; });
|
||||
const fieldList = {
|
||||
id: row.id,
|
||||
mapId: this.$route.params.mapId,
|
||||
title: '进路侧防道',
|
||||
name: row.name,
|
||||
model: {
|
||||
items: [
|
||||
{ prop: 'switchCode', label: '道岔ID', type: 'text' },
|
||||
{ prop: 'switchCode', label: '道岔名称', type: 'select', options: switchDict },
|
||||
{ prop: 'switchLocateType', label: '道岔类型', type: 'select', options: switchTypeDict }
|
||||
]
|
||||
}
|
||||
};
|
||||
this.$refs.previewField.doShow(fieldList, row.routeFlankProtectionList);
|
||||
}
|
||||
},
|
||||
async routeSwitchDetail(index, row) { // 道岔段数据列表
|
||||
if (this.$refs && this.$refs.previewField && row) {
|
||||
const switchDict = {};
|
||||
const switchTypeDict = {};
|
||||
this.switchList.map(elem => { switchDict[elem.code] = elem.name; });
|
||||
this.SwitchLocateTypeList.map(elem => { switchTypeDict[elem.code] = elem.name; });
|
||||
const fieldList = {
|
||||
id: row.id,
|
||||
mapId: this.$route.params.mapId,
|
||||
title: '进路道岔数据',
|
||||
name: row.name,
|
||||
model: {
|
||||
field: 'routeSwitchList',
|
||||
items: [
|
||||
{ prop: 'switchCode', label: '道岔ID', type: 'text' },
|
||||
{ prop: 'switchCode', label: '道岔名称', type: 'select', options: switchDict },
|
||||
{ prop: 'switchLocateType', label: '道岔类型', type: 'select', options: switchTypeDict }
|
||||
]
|
||||
}
|
||||
};
|
||||
this.$refs.previewField.doShow(fieldList, row.routeSwitchList);
|
||||
}
|
||||
},
|
||||
async conflictingRouteSection(index, row) { // 敌对进路列表
|
||||
if (this.$refs && this.$refs.previewField && row) {
|
||||
const sectionDict = {};
|
||||
this.sectionList.map(elem => { sectionDict[elem.code] = elem.name; });
|
||||
const conflictingRouteList = row.conflictingRouteList.map(elem => { return {sectionCode : elem}; });
|
||||
const fieldList = {
|
||||
id: row.id,
|
||||
mapId: this.$route.params.mapId,
|
||||
title: '敌对进路数据',
|
||||
name: row.name,
|
||||
model: {
|
||||
items: [
|
||||
{ prop: 'sectionCode', label: '物理区段ID', type: 'text' },
|
||||
{ prop: 'sectionCode', label: '物理区段名称', type: 'select', options: sectionDict }
|
||||
]
|
||||
}
|
||||
};
|
||||
this.$refs.previewField.doShow(fieldList, conflictingRouteList);
|
||||
}
|
||||
},
|
||||
// 保存
|
||||
saveRelated(row) {
|
||||
updateRouteRoute(row).then(response => {
|
||||
this.$message.success('更新成功');
|
||||
}).catch(() => {
|
||||
this.$messageBox('操作异常');
|
||||
});
|
||||
},
|
||||
edit(index, row) {
|
||||
this.mapList.forEach(elem => {
|
||||
if (elem.name === row.mapId) {
|
||||
const model = {
|
||||
mapId: elem.id,
|
||||
id: row.id
|
||||
};
|
||||
queryRouteRouteDetail(model).then(response => {
|
||||
const data = response.data;
|
||||
this.$emit('routeSelected', data);
|
||||
this.doClose();
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
deleteObj(index, row) {
|
||||
if (row) {
|
||||
this.$confirm('是否确认删除？', '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
deleteRouteRoute(row.id).then(response => {
|
||||
this.$message.success('删除成功');
|
||||
this.reloadTable();
|
||||
}).catch(() => {
|
||||
this.$messageBox('删除失败');
|
||||
});
|
||||
}).catch(() => {
|
||||
this.$message.info('已取消删除');
|
||||
});
|
||||
}
|
||||
},
|
||||
reloadTable() {
|
||||
if (this.queryList && this.queryList.reload) {
|
||||
this.queryList.reload();
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@ -1,85 +0,0 @@
|
||||
<template>
|
||||
<div style="height: 100%;">
|
||||
<route-draft
|
||||
ref="routeEdit"
|
||||
:selected="selected"
|
||||
:map-info="mapInfo"
|
||||
:route-data="routeData"
|
||||
@setCenter="setCenter"
|
||||
/>
|
||||
<route-detail ref="routeDetail" :map-info="mapInfo" @routeSelected="routeSelected" />
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import RouteDraft from './route';
|
||||
import RouteDetail from './detail';
|
||||
|
||||
export default {
|
||||
name: 'RouteOperate',
|
||||
components: {
|
||||
RouteDraft,
|
||||
RouteDetail
|
||||
},
|
||||
props: {
|
||||
mapInfo: {
|
||||
type: Object,
|
||||
default() {
|
||||
return null;
|
||||
}
|
||||
},
|
||||
selected: {
|
||||
type: Object,
|
||||
default() {
|
||||
return null;
|
||||
}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
enabledTab: 'Route',
|
||||
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;
|
||||
});
|
||||
}
|
||||
},
|
||||
routeSelected: 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>
|
||||
@ -1,73 +0,0 @@
|
||||
<template>
|
||||
<el-dialog
|
||||
v-dialogDrag
|
||||
:title="mapInfo.name + ' / ' + name + ' / ' + title"
|
||||
:visible.sync="show"
|
||||
width="30%"
|
||||
:before-close="doClose"
|
||||
center
|
||||
append-to-body
|
||||
>
|
||||
<el-table :data="data" border style="width: 100%">
|
||||
<template v-for="(item, index) in form">
|
||||
<el-table-column :key="index" :label="item.label">
|
||||
<template slot-scope="scope">
|
||||
<template v-if="item.type === 'select'">
|
||||
<el-tooltip effect="dark" :content="item.options[scope.row[item.prop]]" placement="top">
|
||||
<span>{{ item.options[scope.row[item.prop]] }}</span>
|
||||
</el-tooltip>
|
||||
</template>
|
||||
<template v-if="item.type === 'text'">
|
||||
<el-tooltip effect="dark" :content="scope.row[item.prop]" placement="top">
|
||||
<span>{{ scope.row[item.prop] }}</span>
|
||||
</el-tooltip>
|
||||
</template>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</template>
|
||||
</el-table>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'DictionaryDetailEdit',
|
||||
props: {
|
||||
mapInfo: {
|
||||
type: Object,
|
||||
default() {
|
||||
return null;
|
||||
}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
show: false,
|
||||
title: '',
|
||||
name: '',
|
||||
form: [],
|
||||
data: []
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
doShow(fieldList, dataList) {
|
||||
if (fieldList.model) {
|
||||
const items = fieldList.model.items;
|
||||
if (fieldList.model.convert) {
|
||||
// data = fieldList.model.convert(data);
|
||||
}
|
||||
if (items) {
|
||||
this.form = items;
|
||||
this.name = fieldList.name;
|
||||
this.data = dataList;
|
||||
this.title = fieldList.title;
|
||||
}
|
||||
this.show = true;
|
||||
}
|
||||
},
|
||||
doClose(done) {
|
||||
this.show = false;
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@ -1,104 +0,0 @@
|
||||
<template>
|
||||
<el-dialog
|
||||
v-dialogDrag
|
||||
:title="mapInfo.name + ' / ' + editModel.name + ' / ' + title"
|
||||
:visible.sync="show"
|
||||
width="40%"
|
||||
:before-close="doClose"
|
||||
center
|
||||
append-to-body
|
||||
>
|
||||
<el-form ref="form" :model="editModel" label-width="120px" size="mini">
|
||||
<el-form-item :label="$t('map.pathName') + ':'" prop="name" readonly="true">
|
||||
<el-input v-model="editModel.name" :disabled="true" />
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('map.associatedRoute')">
|
||||
<el-transfer
|
||||
v-model="routeColloction"
|
||||
filterable
|
||||
:filter-method="filterRoute"
|
||||
:filter-placeholder="$t('map.pleaseEnterNameQuery')"
|
||||
:data="routeData"
|
||||
:titles="['进路集合', '关联进路ID']"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button type="primary" @click="doSave">{{ $t('map.save') }}</el-button>
|
||||
<el-button @click="show = false">{{ $t('map.cancel') }}</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// 敌对进路列表
|
||||
import { listRouteMapRoute } from '@/api/jmap/mapdraft';
|
||||
export default {
|
||||
name: 'DictionaryDetailEdit',
|
||||
props: {
|
||||
mapInfo: {
|
||||
type: Object,
|
||||
default() {
|
||||
return null;
|
||||
}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
show: false,
|
||||
title: this.$t('map.associatedHostileRecord'),
|
||||
routes: [],
|
||||
routeColloction: [],
|
||||
routeData: [],
|
||||
editModel: {
|
||||
code: '',
|
||||
name: ''
|
||||
},
|
||||
row: {}
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
filterRoute(query, item) {
|
||||
return item.pinyin.indexOf(query) > -1;
|
||||
},
|
||||
doShow(fieldList, dataList, row) {
|
||||
this.routeColloction = [];
|
||||
this.routeData = [];
|
||||
this.editModel.id = fieldList.id;
|
||||
this.editModel.code = fieldList.code;
|
||||
this.editModel.name = fieldList.name;
|
||||
this.row = row || {};
|
||||
this.routeColloction = (dataList || []).map(elem => { return elem.againstRouteCode; });
|
||||
|
||||
listRouteMapRoute(fieldList.mapId).then(response => {
|
||||
if (response.data) {
|
||||
this.routes = response.data;
|
||||
this.routes.forEach(elem => {
|
||||
if (elem.code !== this.editModel.code) {
|
||||
this.routeData.push({
|
||||
label: elem.name,
|
||||
key: elem.code,
|
||||
pinyin: elem.code
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
this.show = true;
|
||||
}).catch(() => {
|
||||
this.$messageBox(this.$t('tip.operationAbnormal'));
|
||||
});
|
||||
},
|
||||
doClose(done) {
|
||||
this.show = false;
|
||||
},
|
||||
doSave() {
|
||||
this.row.id = this.editModel.id;
|
||||
this.row.routeCode = this.editModel.code;
|
||||
this.row.mapId = this.mapInfo.id;
|
||||
this.row.routeAgainstList = this.routeColloction.map(elem => { return { againstRouteCode: elem }; });
|
||||
|
||||
this.$emit('saveRelated', this.row);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@ -1,541 +0,0 @@
|
||||
<template>
|
||||
<div style="height: 100%;" class="route_box_list">
|
||||
<el-scrollbar wrap-class="scrollbar-wrapper">
|
||||
<el-form ref="form" :model="addModel" :rules="rules" label-width="190px" size="mini">
|
||||
<el-form-item :label="$t('map.pathName') + ':'" prop="name">
|
||||
<el-input v-model="addModel.name" />
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('map.equipmentStation') + ':'" prop="stationCode">
|
||||
<el-select v-model="addModel.stationCode" filterable @change="deviceChange">
|
||||
<el-option v-for="item in stationList" :key="item.code" :label="item.name" :value="item.code" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('map.routeArc') + ':'" prop="ciControl">
|
||||
<el-radio-group v-model="addModel.ciControl">
|
||||
<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 :label="$t('map.routeFlt') + ':'" prop="setFleetMode">
|
||||
<el-radio-group v-model="addModel.setFleetMode">
|
||||
<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 :label="$t('map.delayUnlockingTime') + ':'" prop="delayReleaseTime">
|
||||
<el-input-number v-model="addModel.delayReleaseTime" :min="0" />
|
||||
<span>s</span>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('map.accessType') + ':'" prop="turnBack">
|
||||
<el-radio-group v-model="addModel.turnBack">
|
||||
<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 :label="$t('map.startingSignalName') + ':'" prop="startSignalCode">
|
||||
<el-select v-model="addModel.startSignalCode" 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 === 'startSignalCode' ? 'danger' : 'primary'"
|
||||
@click="hover('startSignalCode')"
|
||||
>{{ $t('map.activate') }}</el-button>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('map.endingSignalName') + ':'" prop="endSignalCode">
|
||||
<el-select v-model="addModel.endSignalCode" 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 === 'endSignalCode' ? 'danger' : 'primary'"
|
||||
@click="hover('endSignalCode')"
|
||||
>{{ $t('map.activate') }}</el-button>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('map.greenOpen') + ':'" prop="greenOpen">
|
||||
<el-radio-group v-model="addModel.greenOpen">
|
||||
<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 :label="$t('map.physicalSection') +':'" prop="routeSectionList">
|
||||
<el-select v-model="addModel.routeSectionList" multiple :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 === 'routeSectionList' ? 'danger' : 'primary'"
|
||||
@click="hover('routeSectionList')"
|
||||
>{{ $t('map.activate') }}</el-button>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('map.entryTurnout')+':'" prop="routeSwitchList">
|
||||
<el-select v-model="routeCode" clearable :filterable="true">
|
||||
<el-option
|
||||
v-for="item in switchList"
|
||||
:key="item.code"
|
||||
:label="`${item.name}(${item.code})`"
|
||||
:value="item.code"
|
||||
/>
|
||||
</el-select>
|
||||
<el-button :type=" field === 'routeSwitchList' ? 'danger' : 'primary'" @click="hover('routeSwitchList')">{{ $t('map.activate') }}</el-button>
|
||||
<el-button type="primary" @click="pushSwitch(addModel.routeSwitchList, { switchCode: routeCode, normal: routeType, switchType: routeType ? '定位' : '反位' } )">{{ $t('map.add') }}</el-button>
|
||||
<el-select v-model="routeType" :filterable="true">
|
||||
<el-option
|
||||
v-for="item in SwitchLocateTypeList"
|
||||
:key="item.code"
|
||||
:label="item.name"
|
||||
:value="item.code"
|
||||
/>
|
||||
</el-select>
|
||||
<el-table :data="addModel.routeSwitchList" border style="width: 97%">
|
||||
<el-table-column prop="switchCode" :label="$t('map.switch')">
|
||||
<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(addModel.routeSwitchList, scope.$index)">
|
||||
{{ $t('map.remove') }}
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('map.accessSideTurnoutData') + ':'" prop="routeFlankProtectionList">
|
||||
<el-select v-model="flankCode" 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 === 'routeFlankProtectionList' ? 'danger' : 'primary'"
|
||||
@click="hover('routeFlankProtectionList')"
|
||||
>{{ $t('map.activate') }}</el-button>
|
||||
<el-button
|
||||
type="primary"
|
||||
@click="pushSwitch(addModel.routeFlankProtectionList, {switchCode:flankCode, normal:flankType, switchType: flankType ? '定位' : '反位'})"
|
||||
>{{ $t('map.add') }}
|
||||
</el-button>
|
||||
<el-select v-model="flankType" :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="addModel.routeFlankProtectionList" border style="width: 97%">
|
||||
<el-table-column prop="switchCode" :label="$t('map.switchId')">
|
||||
<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(addModel.routeFlankProtectionList, scope.$index)"
|
||||
>
|
||||
{{ $t('map.remove') }}
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</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.routeProtectsData') + ':'" prop="routeOverlapSectionList">
|
||||
<el-select v-model="addModel.routeOverlapSectionList" 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 === 'routeOverlapSectionList' ? 'danger' : 'primary'"
|
||||
@click="hover('routeOverlapSectionList')"
|
||||
>{{ $t('map.activate') }}</el-button>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('map.continueProtectSwitchData') + ':'" prop="routeOverlapSwitchList">
|
||||
<el-select v-model="overlapCode" 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 === 'routeOverlapSwitchList' ? 'danger' : 'primary'"
|
||||
@click="hover('routeOverlapSwitchList')"
|
||||
>{{ $t('map.activate') }}</el-button>
|
||||
<el-button
|
||||
type="primary"
|
||||
@click="pushSwitch(addModel.routeOverlapSwitchList, {switchCode: overlapCode, normal: overlapType, switchType: overlapType ? '定位' : '反位'})"
|
||||
>{{ $t('map.add') }}
|
||||
</el-button>
|
||||
<el-select v-model="overlapType" :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="addModel.routeOverlapSwitchList" border style="width: 97%">
|
||||
<el-table-column prop="switchCode" :label="$t('map.switchId')">
|
||||
<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(addModel.routeOverlapSwitchList, scope.$index)"
|
||||
>
|
||||
{{ $t('map.remove') }}
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('map.hostileApproachData') + ':'" prop="conflictingRouteList">
|
||||
<el-select v-model="addModel.conflictingRouteList" 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 === 'conflictingRouteList' ? 'danger' : 'primary'"
|
||||
@click="hover('conflictingRouteList')"
|
||||
>{{ $t('map.activate') }}</el-button>
|
||||
</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>
|
||||
</el-form>
|
||||
</el-scrollbar>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { mapGetters } from 'vuex';
|
||||
import { getUID } from '@/jmap/utils/Uid';
|
||||
import { createRouteRoute, updateRouteRoute } from '@/api/jmap/mapdraft';
|
||||
|
||||
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 {
|
||||
isSave: true,
|
||||
field: '',
|
||||
overlapCode: '',
|
||||
overlapType: '',
|
||||
flankCode: '',
|
||||
flankType: '',
|
||||
routeCode: '',
|
||||
routeType: '',
|
||||
loading: false,
|
||||
SwitchLocateTypeList: [
|
||||
{ name: '定位', code: true },
|
||||
{ name: '反位', code: false }
|
||||
],
|
||||
addModel: {
|
||||
mapId: '',
|
||||
code: '',
|
||||
name: '', // 名字
|
||||
stationCode: '', // 所属站台
|
||||
ciControl: false, // 是否自动追踪/联锁自动触发
|
||||
setFleetMode: false, // 是否车队/联锁自动进路
|
||||
delayReleaseTime: '', // 延时解锁时间
|
||||
turnBack: false, // 是否折返进路
|
||||
startSignalCode: '', // 始端信号机
|
||||
endSignalCode: '', // 终端信号机
|
||||
greenOpen: true, // 是否开放绿灯
|
||||
routeSectionList: [], // 进路物理区段
|
||||
routeSwitchList: [], // 进路道岔列表
|
||||
routeFlankProtectionList: [], // 进路侧防道岔列表
|
||||
psdList: [], // 站台屏蔽门数据列表
|
||||
espList: [], // 站台紧急停车按钮数据
|
||||
routeOverlapSectionList: [], // 进路延续保护区段数据列表
|
||||
routeOverlapSwitchList: [], // 进路延续保护道岔数据列表
|
||||
conflictingRouteList: [] // 敌对进路
|
||||
}
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapGetters('map', [
|
||||
'signalList',
|
||||
'switchList',
|
||||
'sectionList',
|
||||
'stationList',
|
||||
'espList',
|
||||
'psdList',
|
||||
'stationStandList'
|
||||
]),
|
||||
routeName: {
|
||||
get() {
|
||||
var name = '';
|
||||
if (this.isSave) {
|
||||
let beg = ''; let end = '';
|
||||
if (this.signalList) {
|
||||
this.signalList.forEach(elem => {
|
||||
if (elem.code === this.addModel.startSignalCode) beg = elem.name;
|
||||
if (elem.code === this.addModel.endSignalCode) end = elem.name;
|
||||
});
|
||||
}
|
||||
name = beg + '-' + end;
|
||||
}
|
||||
return name;
|
||||
}
|
||||
|
||||
},
|
||||
rules() {
|
||||
const baseRules = {
|
||||
name: [
|
||||
{ required: true, message: this.$t('rules.pleaseEnterPathName'), trigger: 'change' }
|
||||
],
|
||||
stationCode: [
|
||||
{ required: true, message: this.$t('rules.stationCode'), trigger: 'change' }
|
||||
],
|
||||
startSignalCode: [
|
||||
{ required: true, message: this.$t('rules.pleaseSelectStartSignal'), trigger: 'change' }
|
||||
],
|
||||
endSignalCode: [
|
||||
{ required: true, message: this.$t('rules.pleaseSelectEndSignal'), trigger: 'change' }
|
||||
],
|
||||
routeSectionList: [
|
||||
{ required: true, message: this.$t('map.selectPhysicalSection'), trigger: 'change' }
|
||||
]
|
||||
};
|
||||
return baseRules;
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
mapInfo(val) {
|
||||
if (val) {
|
||||
this.addModel.mapId = val.id;
|
||||
}
|
||||
},
|
||||
routeData(val, old) {
|
||||
if (val) {
|
||||
this.addModel = val;
|
||||
this.addModel.routeFlankProtectionList.forEach(item => {
|
||||
item.normal ? item.switchType = '定位' : item.switchType = '反位';
|
||||
});
|
||||
this.addModel.routeOverlapSwitchList.forEach(item => {
|
||||
item.normal ? item.switchType = '定位' : item.switchType = '反位';
|
||||
});
|
||||
this.addModel.routeSwitchList.forEach(item => {
|
||||
item.normal ? item.switchType = '定位' : item.switchType = '反位';
|
||||
});
|
||||
}
|
||||
},
|
||||
routeName(val, old) {
|
||||
if (val) {
|
||||
this.addModel.name = val;
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
// this.$Dictionary.normal().then(list => {
|
||||
// this.SwitchLocateTypeList = list;
|
||||
// });
|
||||
},
|
||||
methods: {
|
||||
swictchName(code) {
|
||||
let name = '';
|
||||
if (code) {
|
||||
const swch = this.$store.getters['map/getDeviceByCode'](code);
|
||||
if (swch) {
|
||||
name = `${swch.name}(${swch.code})`;
|
||||
}
|
||||
}
|
||||
return name;
|
||||
},
|
||||
deviceChange(code) {
|
||||
this.$emit('setCenter', code);
|
||||
},
|
||||
hover(field) {
|
||||
this.field = field === this.field ? '' : field;
|
||||
},
|
||||
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);
|
||||
},
|
||||
buildModel(code) {
|
||||
const model = Object.assign({}, this.addModel);
|
||||
model['mapId'] = this.mapInfo.id;
|
||||
if (code) { model['code'] = code; }
|
||||
return model;
|
||||
},
|
||||
save() {
|
||||
this.$refs.form.validate((valid) => {
|
||||
if (valid) {
|
||||
this.loading = true;
|
||||
createRouteRoute(this.buildModel(getUID('Route'))).then(response => {
|
||||
this.$message.success('创建成功');
|
||||
this.loading = false;
|
||||
this.clear();
|
||||
}).catch(() => {
|
||||
this.$messageBox(this.$t('tip.operationAbnormal'));
|
||||
this.loading = false;
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
update() {
|
||||
this.$refs.form.validate((valid) => {
|
||||
if (valid) {
|
||||
this.loading = true;
|
||||
updateRouteRoute(this.buildModel()).then(response => {
|
||||
this.$message.success(this.$t('map.updateSuccessfully'));
|
||||
this.loading = false;
|
||||
this.clear();
|
||||
}).catch(() => {
|
||||
this.$messageBox(this.$t('tip.operationAbnormal'));
|
||||
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.routeSwitchList = [];
|
||||
this.addModel.routeFlankProtectionList = [];
|
||||
this.addModel.routeOverlapSwitchList = [];
|
||||
if (this.selected && this.selected._type.toUpperCase() === 'Station'.toUpperCase()) {
|
||||
this.addModel.stationCode = this.selected.code;
|
||||
}
|
||||
this.isSave = true;
|
||||
}
|
||||
},
|
||||
setSelected(selected) {
|
||||
if (selected) {
|
||||
if (selected._type.toUpperCase() === 'Station'.toUpperCase()) {
|
||||
this.addModel.stationCode = selected.code;
|
||||
} else if (selected._type.toUpperCase() === 'Signal'.toUpperCase() && this.field.toUpperCase() === 'startSignalCode'.toUpperCase()) {
|
||||
this.addModel.startSignalCode = selected.code;
|
||||
} else if (selected._type.toUpperCase() === 'Signal'.toUpperCase() && this.field.toUpperCase() === 'endSignalCode'.toUpperCase()) {
|
||||
this.addModel.endSignalCode = selected.code;
|
||||
} else 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);
|
||||
}
|
||||
} else if (selected._type.toUpperCase() === 'Section'.toUpperCase() && this.field.toUpperCase() === 'conflictingRouteList'.toUpperCase()) {
|
||||
if (this.addModel.conflictingRouteList.indexOf(selected.code) === -1) {
|
||||
this.addModel.conflictingRouteList.push(selected.code);
|
||||
}
|
||||
} else if (selected._type.toUpperCase() === 'Section'.toUpperCase() && this.field.toUpperCase() === 'routeSectionList'.toUpperCase()) {
|
||||
if (this.addModel.routeSectionList.indexOf(selected.code) === -1) {
|
||||
this.addModel.routeSectionList.push(selected.code);
|
||||
}
|
||||
} else if (selected._type.toUpperCase() === 'Switch'.toUpperCase() && this.field.toUpperCase() === 'routeOverlapSwitchList'.toUpperCase()) {
|
||||
this.overlapCode = selected.code;
|
||||
} else if (selected._type.toUpperCase() === 'Switch'.toUpperCase() && this.field.toUpperCase() === 'routeSwitchList'.toUpperCase()) {
|
||||
this.routeCode = selected.code;
|
||||
} else if (selected._type.toUpperCase() === 'Switch'.toUpperCase() && this.field.toUpperCase() === 'routeFlankProtectionList'.toUpperCase()) {
|
||||
this.flankCode = selected.code;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</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>
|
||||
@ -1,251 +0,0 @@
|
||||
<template>
|
||||
<el-dialog v-dialogDrag :title="$t('map.thenList')" :visible.sync="show" width="85%" :before-do-close="doClose">
|
||||
<div>
|
||||
<QueryListPage
|
||||
ref="queryListPage"
|
||||
:pager-config="pagerConfig"
|
||||
:query-form="queryForm"
|
||||
:query-list="queryList"
|
||||
/>
|
||||
</div>
|
||||
<pre-view-field ref="previewField" :map-info="mapInfo" />
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapGetters } from 'vuex';
|
||||
import { listMap } from '@/api/jmap/mapdraft';
|
||||
import { listRouting, deleteRouting, getRouting } from '@/api/jmap/mapdraft';
|
||||
import PreViewField from './preview';
|
||||
|
||||
export default {
|
||||
name: 'RouteDetail',
|
||||
components: {
|
||||
PreViewField
|
||||
},
|
||||
props: {
|
||||
mapInfo: {
|
||||
type: Object,
|
||||
default() {
|
||||
return null;
|
||||
}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
show: false,
|
||||
mapList: [],
|
||||
pagerConfig: {
|
||||
pageSize: 'pageSize',
|
||||
pageIndex: 'pageNum'
|
||||
},
|
||||
queryForm: {
|
||||
labelWidth: '120px',
|
||||
queryObject: {
|
||||
startStationCode: {
|
||||
type: 'select',
|
||||
label: this.$t('map.startStation'),
|
||||
config: {
|
||||
data: []
|
||||
}
|
||||
},
|
||||
endStationCode: {
|
||||
type: 'select',
|
||||
label: this.$t('map.endStation'),
|
||||
config: {
|
||||
data: []
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
queryList: {
|
||||
query: this.queryFunction,
|
||||
afterQuery: this.afterQuery,
|
||||
selectCheckShow: false,
|
||||
indexShow: true,
|
||||
columns: [
|
||||
{
|
||||
title: this.$t('map.routingCode'),
|
||||
prop: 'code'
|
||||
},
|
||||
{
|
||||
title: this.$t('map.startStation'),
|
||||
prop: 'startStationCode'
|
||||
|
||||
},
|
||||
{
|
||||
title: this.$t('map.startStationCode'),
|
||||
prop: 'startSectionCode'
|
||||
},
|
||||
{
|
||||
title: this.$t('map.endStation'),
|
||||
prop: 'endStationCode'
|
||||
},
|
||||
{
|
||||
title: this.$t('map.endStationCode'),
|
||||
prop: 'endSectionCode'
|
||||
},
|
||||
{
|
||||
title: this.$t('map.routingDirection'),
|
||||
prop: 'directionCode',
|
||||
type: 'tag',
|
||||
columnValue: (row) => { return this.$ConstSelect.translate(row.directionCode, 'DirectionCodeList'); },
|
||||
tagType: (row) => { if (row.directionCode === '0') { return 'primary'; } else { return 'success'; } }
|
||||
},
|
||||
{
|
||||
title: this.$t('map.destination'),
|
||||
prop: 'destinationCode'
|
||||
},
|
||||
{
|
||||
title: this.$t('map.remarks'),
|
||||
prop: 'remarks'
|
||||
},
|
||||
{
|
||||
type: 'button',
|
||||
title: this.$t('map.sectionData'),
|
||||
buttons: [
|
||||
{
|
||||
name: this.$t('map.preview'),
|
||||
handleClick: this.sectionDetail
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
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',
|
||||
'stationList'
|
||||
])
|
||||
},
|
||||
watch: {
|
||||
stationList: function (val, old) {
|
||||
const list = [];
|
||||
if (val && val.length) {
|
||||
val.forEach(elem => {
|
||||
list.push({ label: this.formatName(elem.code), value: elem.code });
|
||||
});
|
||||
this.queryForm.queryObject.startStationCode.config.data = list;
|
||||
this.queryForm.queryObject.endStationCode.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.name;
|
||||
}
|
||||
|
||||
return name;
|
||||
},
|
||||
queryFunction(params) {
|
||||
if (this.mapInfo && this.mapInfo.id) {
|
||||
return listRouting(this.mapInfo.id, params);
|
||||
}
|
||||
},
|
||||
acquireMapList() {
|
||||
// 地图名称列表
|
||||
listMap({ drawWay:false}).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.startStationCode = that.formatName(elem.startStationCode);
|
||||
elem.startSectionCode = that.formatName(elem.startSectionCode);
|
||||
elem.endStationCode = that.formatName(elem.endStationCode);
|
||||
elem.endSectionCode = that.formatName(elem.endSectionCode);
|
||||
});
|
||||
}
|
||||
}
|
||||
return data;
|
||||
},
|
||||
editObj(index, row) {
|
||||
getRouting(row.id).then(response => {
|
||||
const data = Object.assign({ code: response.data.id }, response.data);
|
||||
this.$emit('routingSelected', data);
|
||||
this.doClose();
|
||||
});
|
||||
},
|
||||
deleteObj(index, row) {
|
||||
if (this.mapInfo && this.mapInfo.id && row) {
|
||||
// 删除
|
||||
deleteRouting(row.id).then(response => {
|
||||
this.$message.success(this.$t('map.successfullyDelete'));
|
||||
this.reloadTable();
|
||||
}).catch(() => {
|
||||
this.$messageBox(this.$t('map.failDelete'));
|
||||
});
|
||||
}
|
||||
},
|
||||
sectionDetail(index, row) {
|
||||
const sectionDict = {};
|
||||
const stationDict = {};
|
||||
|
||||
this.sectionList.forEach(elem => { sectionDict[elem.code] = elem.name; });
|
||||
this.stationList.forEach(elem => { stationDict[elem.code] = elem.name; });
|
||||
|
||||
const fieldList = {
|
||||
id: row.id,
|
||||
mapId: this.$route.params.mapId,
|
||||
title: '区段列表',
|
||||
name: row.name,
|
||||
model: {
|
||||
field: 'routingSectionList',
|
||||
items: [
|
||||
{ prop: 'stationCode', label: this.$t('map.stationCodeClomn'), type: 'text' },
|
||||
{
|
||||
prop: 'stationCode', label: this.$t('map.sectionName'), type: 'select', options: stationDict
|
||||
},
|
||||
{ prop: 'sectionCode', label: this.$t('map.blockCodingClomn'), type: 'text' },
|
||||
{
|
||||
prop: 'sectionCode', label: this.$t('map.sectionName'), type: 'select', options: sectionDict
|
||||
}
|
||||
]
|
||||
}
|
||||
};
|
||||
this.$refs.previewField.doShow(fieldList, row.routingSectionList);
|
||||
},
|
||||
reloadTable() {
|
||||
if (this.queryList && this.queryList.reload) {
|
||||
this.queryList.reload();
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@ -1,84 +0,0 @@
|
||||
<template>
|
||||
<div style="height: 100%;">
|
||||
<route-draft
|
||||
ref="routeEdit"
|
||||
:selected="selected"
|
||||
:map-info="mapInfo"
|
||||
:route-data="routeData"
|
||||
/>
|
||||
<route-detail ref="routeDetail" :map-info="mapInfo" @routingSelected="routingSelected" />
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import RouteDraft from './route';
|
||||
import RouteDetail from './detail';
|
||||
|
||||
export default {
|
||||
name: 'PathOperate',
|
||||
components: {
|
||||
RouteDraft,
|
||||
RouteDetail
|
||||
},
|
||||
props: {
|
||||
mapInfo: {
|
||||
type: Object,
|
||||
default() {
|
||||
return null;
|
||||
}
|
||||
},
|
||||
selected: {
|
||||
type: Object,
|
||||
default() {
|
||||
return null;
|
||||
}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
enabledTab: 'Route',
|
||||
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;
|
||||
});
|
||||
}
|
||||
},
|
||||
routingSelected: 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>
|
||||
@ -1,70 +0,0 @@
|
||||
<template>
|
||||
<el-dialog
|
||||
v-dialogDrag
|
||||
:title="mapInfo.name + ' / ' + name + ' / ' + title"
|
||||
:visible.sync="show"
|
||||
width="30%"
|
||||
:before-close="doClose"
|
||||
center
|
||||
append-to-body
|
||||
>
|
||||
<el-table :data="data" border style="width: 100%">
|
||||
<template v-for="(item, index) in form">
|
||||
<el-table-column :key="index" :label="item.label">
|
||||
<template slot-scope="scope">
|
||||
<template v-if="item.type === 'select'">
|
||||
<el-tooltip effect="dark" :content="item.options[scope.row[item.prop]]" placement="top">
|
||||
<span>{{ item.options[scope.row[item.prop]] }}</span>
|
||||
</el-tooltip>
|
||||
</template>
|
||||
<template v-if="item.type === 'text'">
|
||||
<el-tooltip effect="dark" :content="scope.row[item.prop]" placement="top">
|
||||
<span>{{ scope.row[item.prop] }}</span>
|
||||
</el-tooltip>
|
||||
</template>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</template>
|
||||
</el-table>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'DictionaryDetailEdit',
|
||||
props: {
|
||||
mapInfo: {
|
||||
type: Object,
|
||||
default() {
|
||||
return null;
|
||||
}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
show: false,
|
||||
title: '',
|
||||
name: '',
|
||||
form: [],
|
||||
data: []
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
doShow(fieldList, dataList) {
|
||||
if (fieldList.model) {
|
||||
const items = fieldList.model.items;
|
||||
if (items) {
|
||||
this.form = items;
|
||||
this.name = fieldList.name;
|
||||
this.data = dataList;
|
||||
this.title = fieldList.title;
|
||||
}
|
||||
this.show = true;
|
||||
}
|
||||
},
|
||||
doClose(done) {
|
||||
this.show = false;
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@ -1,377 +0,0 @@
|
||||
<template>
|
||||
<div style="height: 100%;">
|
||||
<el-scrollbar wrap-class="scrollbar-wrapper">
|
||||
<el-form ref="form" :model="addModel" :rules="rules" label-width="120px" size="mini">
|
||||
<div class="definition">
|
||||
<el-form-item :label="$t('map.routingName')" prop="name">
|
||||
<el-input v-model="addModel.name" />
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('map.startStationCodeColon')" prop="startStationCode">
|
||||
<el-select v-model="addModel.startStationCode" clearable :filterable="true">
|
||||
<el-option
|
||||
v-for="item in filterStationList"
|
||||
:key="item.code"
|
||||
:label="item.name"
|
||||
:value="item.code"
|
||||
/>
|
||||
</el-select>
|
||||
<el-button
|
||||
:type=" field === 'startStationCode' ? 'danger' : 'primary'"
|
||||
@click="hover('startStationCode')"
|
||||
>{{ $t('map.activate') }}</el-button>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('map.startSectionColon')" prop="startSectionCode">
|
||||
<el-select v-model="addModel.startSectionCode" clearable :filterable="true">
|
||||
<el-option
|
||||
v-for="item in filterSectionList"
|
||||
:key="item.code"
|
||||
:label="item.name"
|
||||
:value="item.code"
|
||||
/>
|
||||
</el-select>
|
||||
<el-button
|
||||
:type=" field === 'startSectionCode' ? 'danger' : 'primary'"
|
||||
@click="hover('startSectionCode')"
|
||||
>{{ $t('map.activate') }}</el-button>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('map.endStationColon')" prop="endStationCode">
|
||||
<el-select v-model="addModel.endStationCode" clearable :filterable="true">
|
||||
<el-option
|
||||
v-for="item in filterStationList"
|
||||
:key="item.code"
|
||||
:label="item.name"
|
||||
:value="item.code"
|
||||
/>
|
||||
</el-select>
|
||||
<el-button
|
||||
:type=" field === 'endStationCode' ? 'danger' : 'primary'"
|
||||
@click="hover('endStationCode')"
|
||||
>{{ $t('map.activate') }}</el-button>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('map.endSectionColon')" prop="endSectionCode">
|
||||
<el-select v-model="addModel.endSectionCode" clearable :filterable="true">
|
||||
<el-option
|
||||
v-for="item in filterSectionList"
|
||||
:key="item.code"
|
||||
:label="item.name"
|
||||
:value="item.code"
|
||||
/>
|
||||
</el-select>
|
||||
<el-button
|
||||
:type=" field === 'endSectionCode' ? 'danger' : 'primary'"
|
||||
@click="hover('endSectionCode')"
|
||||
>{{ $t('map.activate') }}</el-button>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('map.destinationCode')" prop="destinationCode">
|
||||
<el-input v-model="addModel.destinationCode" />
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('map.routingDirection')" prop="directionCode">
|
||||
<el-select v-model="addModel.directionCode" clearable :filterable="true" :placeholder="$t('map.pleaseSelect')">
|
||||
<el-option
|
||||
v-for="item in DirectionCodeList"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('map.remarksColon')" prop="remarks">
|
||||
<el-input v-model="addModel.remarks" type="textarea" :rows="4" :placeholder="$t('map.pleaseSelect')" />
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('map.trafficSegmentData')" prop="routingSectionList">
|
||||
<div>
|
||||
<el-select v-model="stationCode" clearable :filterable="true" :placeholder="$t('map.pleaseSelect')">
|
||||
<el-option
|
||||
v-for="item in filterStationList"
|
||||
:key="item.code"
|
||||
:label="`${item.name}(${item.code})`"
|
||||
:value="item.code"
|
||||
/>
|
||||
</el-select>
|
||||
<el-button
|
||||
:type="field === 'routingStation' ? 'danger' : 'primary'"
|
||||
@click="hover('routingStation')"
|
||||
>{{ $t('map.activate') }}</el-button>
|
||||
</div>
|
||||
<div>
|
||||
<el-select v-model="sectionCode" clearable :filterable="true" :placeholder="$t('map.pleaseSelect')">
|
||||
<el-option
|
||||
v-for="item in sectionList"
|
||||
:key="item.code"
|
||||
:label="`${item.name}(${item.code})`"
|
||||
:value="item.code"
|
||||
/>
|
||||
</el-select>
|
||||
<el-button
|
||||
:type=" field === 'routingSection' ? 'danger' : 'primary'"
|
||||
@click="hover('routingSection')"
|
||||
>{{ $t('map.activate') }}</el-button>
|
||||
<el-button
|
||||
type="primary"
|
||||
@click="pushSection(addModel.routingSectionList, {stationCode: stationCode, sectionCode: sectionCode})"
|
||||
>
|
||||
{{ $t('map.add') }}
|
||||
</el-button>
|
||||
</div>
|
||||
<el-table :data="addModel.routingSectionList" border style="width: 97%">
|
||||
<el-table-column prop="sectionCode" :label="$t('map.stationName')">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ formatName(scope.row.stationCode) }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="sectionCode" :label="$t('map.sectionName')">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ formatName(scope.row.sectionCode) }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column fixed="right" :label="$t('map.operation')" width="50">
|
||||
<template slot-scope="scope">
|
||||
<el-button
|
||||
type="text"
|
||||
size="small"
|
||||
@click.native.prevent="deleteSection(addModel.routingSectionList, scope.$index)"
|
||||
>
|
||||
{{ $t('map.remove') }}
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</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 { addRouting, updateRouting } from '@/api/jmap/mapdraft';
|
||||
import { ViewMode } from '@/scripts/ConstDic';
|
||||
import { formatName } from '@/utils/runPlan';
|
||||
// import Sortable from 'sortablejs';
|
||||
|
||||
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: '',
|
||||
stationCode: '',
|
||||
sectionCode: '',
|
||||
isSave: true,
|
||||
loading: false,
|
||||
DirectionCodeList: this.$ConstSelect.DirectionCodeList,
|
||||
addModel: {
|
||||
name: '',
|
||||
mapId: '',
|
||||
code: '',
|
||||
directionCode: '',
|
||||
destinationCode: '',
|
||||
startStationCode: '',
|
||||
startSectionCode: '',
|
||||
endStationCode: '',
|
||||
endSectionCode: '',
|
||||
remarks: '',
|
||||
routingSectionList: []
|
||||
},
|
||||
editShow: false,
|
||||
rules: {
|
||||
name: [
|
||||
{ required: true, message: this.$t('map.routingName'), trigger: 'change' }
|
||||
],
|
||||
destinationCode: [
|
||||
{ required: true, message: this.$t('map.destinationCode'), trigger: 'change' }
|
||||
],
|
||||
startStationCode: [
|
||||
{ required: true, message: this.$t('map.startStationCode'), trigger: 'change' }
|
||||
],
|
||||
startSectionCode: [
|
||||
{ required: true, message: this.$t('map.startSectionCode'), trigger: 'change' }
|
||||
],
|
||||
endStationCode: [
|
||||
{ required: true, message: this.$t('map.endStationCode'), trigger: 'change' }
|
||||
],
|
||||
endSectionCode: [
|
||||
{ required: true, message: this.$t('map.endSectionCode'), trigger: 'change' }
|
||||
]
|
||||
}
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapGetters('map', [
|
||||
'sectionList',
|
||||
'stationList'
|
||||
]),
|
||||
filterSectionList() {
|
||||
if (this.sectionList) {
|
||||
return this.sectionList.filter(elem => { return elem.isStandTrack || elem.isReentryTrack || elem.isTransferTrack; });
|
||||
} else {
|
||||
return [];
|
||||
}
|
||||
},
|
||||
filterStationList() {
|
||||
if (this.stationList) {
|
||||
return this.stationList.filter(elem => { return true; });
|
||||
} else {
|
||||
return [];
|
||||
}
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
mapInfo(val) {
|
||||
if (val) {
|
||||
this.addModel.mapId = val.id;
|
||||
}
|
||||
},
|
||||
routeData(val, old) {
|
||||
if (val) {
|
||||
this.addModel = val;
|
||||
this.editShow = true;
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
// this.rowDrop();
|
||||
},
|
||||
methods: {
|
||||
// 行拖拽
|
||||
// rowDrop() {
|
||||
// const that = this;
|
||||
// const tbody = document.querySelector('.el-table__body-wrapper tbody');
|
||||
// if (tbody) {
|
||||
// Sortable.create(tbody, {
|
||||
// onEnd({ newIndex, oldIndex }) {
|
||||
// const currRow = that.addModel.mapRouteUnitRelList.splice(oldIndex, 1)[0];
|
||||
// that.addModel.mapRouteUnitRelList.splice(newIndex, 0, currRow);
|
||||
// }
|
||||
// });
|
||||
// }
|
||||
// },
|
||||
hover(field) {
|
||||
this.field = field === this.field ? '' : field;
|
||||
},
|
||||
formatName(code) {
|
||||
return formatName(code);
|
||||
},
|
||||
setSelected(selected) {
|
||||
if (selected) {
|
||||
if (selected._type.toUpperCase() === 'Station'.toUpperCase() && this.field.toUpperCase() === 'startStationCode'.toUpperCase()) {
|
||||
this.addModel.startStationCode = selected.code;
|
||||
} else if (selected._type.toUpperCase() === 'Station'.toUpperCase() && this.field.toUpperCase() === 'endStationCode'.toUpperCase()) {
|
||||
this.addModel.endStationCode = selected.code;
|
||||
} else if (selected._type.toUpperCase() === 'Section'.toUpperCase() && this.field.toUpperCase() === 'startSectionCode'.toUpperCase()) {
|
||||
this.addModel.startSectionCode = selected.code;
|
||||
} else if (selected._type.toUpperCase() === 'Section'.toUpperCase() && this.field.toUpperCase() === 'endSectionCode'.toUpperCase()) {
|
||||
this.addModel.endSectionCode = selected.code;
|
||||
this.addModel.destinationCode = selected.destinationCode || '';
|
||||
} else if (selected._type.toUpperCase() === 'Section'.toUpperCase() && this.field.toUpperCase() == 'routingSection'.toUpperCase()) {
|
||||
this.sectionCode = selected.code;
|
||||
} else if (selected._type.toUpperCase() === 'Station'.toUpperCase() && this.field.toUpperCase() == 'routingStation'.toUpperCase()) {
|
||||
this.stationCode = selected.code;
|
||||
}
|
||||
}
|
||||
},
|
||||
pushSection(list, data) {
|
||||
if (data) {
|
||||
const index = list.findIndex(elem => { return elem.sectionCode == data.sectionCode; });
|
||||
if (index < 0) {
|
||||
list.push(data);
|
||||
} else {
|
||||
this.$messageBox(this.$t('tip.routeSameID'));
|
||||
}
|
||||
}
|
||||
},
|
||||
deleteSection(list, index) {
|
||||
list.splice(index, 1);
|
||||
},
|
||||
buildModel(code) {
|
||||
this.addModel.routingSectionList.forEach((elem, index) => {
|
||||
elem['orderNum'] = index + 1;
|
||||
});
|
||||
|
||||
const model = Object.assign({}, this.addModel);
|
||||
model['mapId'] = this.mapInfo.id;
|
||||
|
||||
if (code) { model['code'] = code; }
|
||||
return model;
|
||||
},
|
||||
save() {
|
||||
this.$refs.form.validate((valid) => {
|
||||
if (valid) {
|
||||
this.loading = true;
|
||||
addRouting(this.buildModel(getUID('Routing'))).then(resp => {
|
||||
this.$message.success(this.$t('tip.pathCreationSuccessful'));
|
||||
this.loading = false;
|
||||
this.clear();
|
||||
}).catch(() => {
|
||||
this.$messageBox(this.$t('tip.createRoutingFailed'));
|
||||
this.loading = false;
|
||||
});
|
||||
|
||||
}
|
||||
});
|
||||
},
|
||||
update() {
|
||||
this.$refs.form.validate((valid) => {
|
||||
if (valid) {
|
||||
this.loading = true;
|
||||
updateRouting(this.buildModel()).then(resp => {
|
||||
this.$message.success(this.$t('tip.pathUpdataSuccessful'));
|
||||
this.loading = false;
|
||||
this.clear();
|
||||
}).catch(() => {
|
||||
this.$messageBox(this.$t('tip.pathUpdataFailed'));
|
||||
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.routingSectionList = [];
|
||||
this.addModel.code = '';
|
||||
this.stationCode = '';
|
||||
this.sectionCode = '';
|
||||
this.isSave = true;
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style rel="stylesheet/scss" lang="scss" scoped>
|
||||
/deep/ .el-radio {
|
||||
margin-right: 10px;
|
||||
}
|
||||
</style>
|
||||
@ -1,173 +0,0 @@
|
||||
<template>
|
||||
<el-dialog v-dialogDrag :title="$t('map.signal')" :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 { getApproachSectionList, deleteApproachSection, getApproachSectionDetail } 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.nearSectionCodeColon'),
|
||||
prop: 'routeSectionList',
|
||||
type: 'tagMore',
|
||||
columnValue: (row) => { return this.$convertField(row.routeSectionList, this.sectionList, ['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'
|
||||
])
|
||||
},
|
||||
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 getApproachSectionList(this.mapInfo.id, params);
|
||||
}
|
||||
},
|
||||
acquireMapList() {
|
||||
// 地图名称列表
|
||||
listMap({ drawWay:false}).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) {
|
||||
getApproachSectionDetail(row.id).then(response => {
|
||||
const data = response.data;
|
||||
this.$emit('autoMaticoSelected', data);
|
||||
this.doClose();
|
||||
});
|
||||
},
|
||||
deleteObj(index, row) {
|
||||
if (this.mapInfo && this.mapInfo.id && row) {
|
||||
// 删除
|
||||
deleteApproachSection(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>
|
||||
@ -1,84 +0,0 @@
|
||||
<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: 'AutomaticOperate',
|
||||
components: {
|
||||
RouteDraft,
|
||||
RouteDetail
|
||||
},
|
||||
props: {
|
||||
mapInfo: {
|
||||
type: Object,
|
||||
default() {
|
||||
return null;
|
||||
}
|
||||
},
|
||||
selected: {
|
||||
type: Object,
|
||||
default() {
|
||||
return null;
|
||||
}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
enabledTab: 'Route',
|
||||
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.routeEdit) {
|
||||
this.$refs.routeEdit.isSave = false;
|
||||
}
|
||||
},
|
||||
previewRouteEvent: function () {
|
||||
if (this.$refs.routeDetail) {
|
||||
this.$refs.routeDetail.doShow();
|
||||
}
|
||||
},
|
||||
createRouteEvent: function () {
|
||||
if (this.$refs.routeEdit) {
|
||||
this.$refs.routeEdit.clear();
|
||||
}
|
||||
},
|
||||
setSelected(selected) {
|
||||
this.$refs.routeEdit.setSelected(selected);
|
||||
},
|
||||
setCenter(code) {
|
||||
this.$emit('setCenter', code);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@ -1,207 +0,0 @@
|
||||
<template>
|
||||
<div style="height: 100%;">
|
||||
<el-scrollbar wrap-class="scrollbar-wrapper">
|
||||
<el-form ref="form" :model="addModel" :rules="rules" label-width="120px" 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.nearSectionCodeColon')" prop="routeSectionList">
|
||||
<el-select v-model="addModel.routeSectionList" 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 === 'routeSectionList' ? 'danger' : 'primary'"
|
||||
@click="hover('routeSectionList')"
|
||||
>{{ $t('map.activate') }}</el-button>
|
||||
</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 { postApproachSection, putApproachSection } 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: '',
|
||||
routeSectionList: []
|
||||
},
|
||||
editShow: false,
|
||||
rules: {
|
||||
signalCode: [
|
||||
{ required: true, message: this.$t('map.pleaseSelectSignal'), trigger: 'change' }
|
||||
],
|
||||
routeSectionList: [
|
||||
{ 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() === 'routeSectionList'.toUpperCase()) {
|
||||
if (this.addModel.routeSectionList.indexOf(selected.code) === -1) {
|
||||
this.addModel.routeSectionList.push(selected.code);
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
buildModel(code) {
|
||||
const model = Object.assign({}, this.addModel);
|
||||
if (code) { model['code'] = code; }
|
||||
model['mapId'] = this.mapInfo.id;
|
||||
return model;
|
||||
},
|
||||
save() {
|
||||
this.$refs.form.validate((valid) => {
|
||||
if (valid) {
|
||||
this.loading = true;
|
||||
postApproachSection(this.buildModel(getUID('signalSection'))).then(resp => {
|
||||
this.$message.success(this.$t('map.signalSectionSuccessful'));
|
||||
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;
|
||||
putApproachSection(this.buildModel()).then(resp => {
|
||||
this.$message.success(this.$t('map.signalSectionUpdateSucceeded'));
|
||||
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.routeSectionList = [];
|
||||
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>
|
||||
@ -1,427 +0,0 @@
|
||||
<template>
|
||||
<transition name="el-zoom-in-center">
|
||||
<div class="mapPaint">
|
||||
<div class="map-view">
|
||||
<div class="operation_box">
|
||||
<el-button-group>
|
||||
<el-button size="small" :disabled="!stepData.length" @click="revocation">撤销</el-button>
|
||||
<el-button size="small" :disabled="!recoverStepData.length" @click="recover">恢复</el-button>
|
||||
</el-button-group>
|
||||
</div>
|
||||
<jlmap-visual ref="jlmapVisual" @onSelect="clickEvent" @onMenu="onContextmenu" />
|
||||
</div>
|
||||
<div class="map-draft">
|
||||
<div v-show="viewDraft === 'draft'" class="box">
|
||||
<map-operate
|
||||
ref="mapOperate"
|
||||
:map-info="mapInfo"
|
||||
:selected="selected"
|
||||
:map-saveing="mapSaveing"
|
||||
@handleSelectLogicalView="handleSelectLogicalView"
|
||||
@handleSelectPhysicalView="handleSelectPhysicalView"
|
||||
@saveMapEvent="saveMapEvent"
|
||||
@verifyMapEvent="verifyMapEvent"
|
||||
@updateMapModel="updateMapModel"
|
||||
@setCenter="setCenter"
|
||||
@selectView="selectViewDraft"
|
||||
@showMap="showMap"
|
||||
/>
|
||||
</div>
|
||||
<div v-show="viewDraft != 'draft'" class="box">
|
||||
<data-relation
|
||||
ref="dataRelation"
|
||||
:map-info="mapInfo"
|
||||
:selected="selected"
|
||||
@selectView="selectViewDraft"
|
||||
@showMap="showMap"
|
||||
/>
|
||||
</div>
|
||||
<config-map
|
||||
ref="configMap"
|
||||
@handleSelectView="handleSelectView"
|
||||
@handleSelectLogicalView="handleSelectLogicalView"
|
||||
@handleSelectPhysicalView="handleSelectPhysicalView"
|
||||
@handleSelectHybridView="handleSelectHybridView"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</transition>
|
||||
</template>
|
||||
<script>
|
||||
import { saveMap, getMapDetail, verifyMap, postBuildMapImport } from '@/api/jmap/mapdraft';
|
||||
import { ViewMode, TrainingMode, getDeviceMenuByDeviceType } from '@/scripts/ConstDic';
|
||||
import { checkLoginLine } from '@/api/login';
|
||||
import JlmapVisual from '@/views/jlmap/index';
|
||||
import MapOperate from './mapoperate/index';
|
||||
import { EventBus } from '@/scripts/event-bus';
|
||||
import { mapGetters } from 'vuex';
|
||||
|
||||
import ConfigMap from './configMap';
|
||||
|
||||
import DataRelation from './dataRelation/index';
|
||||
|
||||
export default {
|
||||
name: 'MapView',
|
||||
components: {
|
||||
JlmapVisual,
|
||||
MapOperate,
|
||||
DataRelation,
|
||||
ConfigMap
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
viewSelect: ViewMode.MIX,
|
||||
mapSaveing: false,
|
||||
ViewMode: ViewMode,
|
||||
viewDraft: 'draft',
|
||||
autoSaveTask: null,
|
||||
selected: null,
|
||||
mapInfo: { name: this.$t('map.pleaseSelectMap') },
|
||||
timeDemon: null
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapGetters('map', [
|
||||
'stepData',
|
||||
'recoverStepData'
|
||||
])
|
||||
},
|
||||
watch: {
|
||||
'$store.state.map.mapDataLoadedCount': function (val) {
|
||||
this.initAutoSaveTask();
|
||||
},
|
||||
$route() {
|
||||
this.$nextTick(() => {
|
||||
this.loadInitPage();
|
||||
});
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.loadInitPage();
|
||||
this.timeDemon = setInterval(() => {
|
||||
checkLoginLine();
|
||||
}, 5000 * 60);
|
||||
},
|
||||
beforeDestroy() {
|
||||
this.clearAutoSave();
|
||||
this.$store.dispatch('map/mapClear');
|
||||
if (this.timeDemon) {
|
||||
clearTimeout(this.timeDemon);
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
endViewLoading(isSuccess) {
|
||||
if (!isSuccess) {
|
||||
this.$store.dispatch('map/mapClear');
|
||||
}
|
||||
|
||||
this.$nextTick(() => {
|
||||
EventBus.$emit('viewLoading', false);
|
||||
});
|
||||
},
|
||||
showMap() {
|
||||
this.$refs.configMap.doShow();
|
||||
},
|
||||
selectViewDraft(data) {
|
||||
this.viewDraft = data;
|
||||
},
|
||||
loadInitPage() {
|
||||
this.$store.dispatch('training/changeMode', { mode: TrainingMode.MAP_EDIT });
|
||||
this.mapInfo = { name: this.$t('map.pleaseSelectMap'), id: this.$route.params.mapId };
|
||||
if (parseInt(this.mapInfo.id)) {
|
||||
this.mapInfo.name = this.$route.query.name;
|
||||
getMapDetail(this.$route.params.mapId).then(response => {
|
||||
this.$store.dispatch('map/setMapData', response.data).then(resp => {
|
||||
this.$store.dispatch('training/setMapDefaultState');
|
||||
});
|
||||
this.setDelayUnlockStatus(response.data, '00');
|
||||
this.initAutoSaveTask();
|
||||
}).catch((error) => {
|
||||
console.log(error);
|
||||
this.$message.error(this.$t('tip.failedLoadMap'));
|
||||
this.endViewLoading();
|
||||
});
|
||||
} else {
|
||||
this.endViewLoading();
|
||||
}
|
||||
},
|
||||
initAutoSaveTask() {
|
||||
const timeout = 1000 * 60 * 3;
|
||||
this.clearAutoSave(this.autoSaveTask);
|
||||
if (this.viewDraft == 'draft') {
|
||||
this.autoSaveTask = setInterval(this.saveMapEvent, timeout);
|
||||
}
|
||||
},
|
||||
clearAutoSave() {
|
||||
if (this.autoSaveTask) {
|
||||
clearInterval(this.autoSaveTask);
|
||||
this.autoSaveTask = null;
|
||||
}
|
||||
},
|
||||
handleSelectControlPage (model) {
|
||||
if (this.$refs.mapOperate) {
|
||||
this.$refs.mapOperate.handleSelectControlPage(model);
|
||||
this.$store.dispatch('menuOperation/setMapDrawSelectCount');
|
||||
}
|
||||
},
|
||||
handleSelectView(handle) {
|
||||
if (this.$refs.jlmapVisual) {
|
||||
this.$refs.jlmapVisual.setLayerVisible(handle);
|
||||
}
|
||||
},
|
||||
handleSelectLogicalView(handle) {
|
||||
if (this.$refs.jlmapVisual) {
|
||||
this.$refs.jlmapVisual.setLevelVisible(handle);
|
||||
}
|
||||
},
|
||||
handleSelectPhysicalView(handle) {
|
||||
if (this.$refs.jlmapVisual) {
|
||||
this.$refs.jlmapVisual.setLevelVisible(handle);
|
||||
}
|
||||
},
|
||||
handleSelectHybridView(handle) {
|
||||
if (this.$refs.jlmapVisual) {
|
||||
this.$refs.jlmapVisual.setLevelVisible(handle);
|
||||
}
|
||||
},
|
||||
clickEvent(em) {
|
||||
var device = this.getDeviceByEm(em);
|
||||
this.onSelect(device);
|
||||
if (this.$refs.dataRelation && this.viewDraft != 'draft') {
|
||||
this.$refs.dataRelation.setSelected(device);
|
||||
}
|
||||
},
|
||||
// 获取设备数据
|
||||
getDeviceByEm(em) {
|
||||
var device = this.$store.getters['map/getDeviceByCode'](em.deviceCode) || null;
|
||||
if (device) {
|
||||
device._viewVal = em.val;
|
||||
}
|
||||
return device;
|
||||
},
|
||||
onSelect(device) {
|
||||
this.selected = device || null;
|
||||
this.selected && this.handleSelectControlPage(device);
|
||||
},
|
||||
onContextmenu(em) {
|
||||
this.point = {
|
||||
x: em.clientX,
|
||||
y: em.clientY
|
||||
};
|
||||
if (!em.deviceType) {
|
||||
var menu = getDeviceMenuByDeviceType('Cancel');
|
||||
this.$store.dispatch('menuOperation/setPopMenu', { position: this.point, menu: menu });
|
||||
}
|
||||
},
|
||||
verifySectionPoint(map) { // 校验区段坐标不为空
|
||||
let flag = true;
|
||||
map.sectionList.forEach(elem => {
|
||||
if (elem.points.length > 0) {
|
||||
for (let index = 0; index < elem.points.length; index++) {
|
||||
if (String(elem.points[index].x) == 'undefined' || String(elem.points[index].y) == 'undefined') {
|
||||
this.$message(`${elem.name}${this.$t('tip.sectionPointsDeficiency')}`);
|
||||
flag = false;
|
||||
}
|
||||
}
|
||||
} else {
|
||||
this.$message(this.$t('tip.sectionPointsDeficiency'));
|
||||
flag = false;
|
||||
}
|
||||
});
|
||||
return flag;
|
||||
},
|
||||
saveMapEvent() { // 保存地图
|
||||
const map = this.$store.state.map.map;
|
||||
if (this.$refs.jlmapVisual && map && parseInt(this.$route.params.mapId)) {
|
||||
if (this.verifySectionPoint(map)) {
|
||||
this.mapSaveing = true;
|
||||
this.$store.dispatch('map/saveMapDeviceDefaultRelations').then(() => {
|
||||
saveMap(Object.assign(map, { mapId: this.$route.params.mapId })).then(response => {
|
||||
this.$message.success(this.$t('tip.saveSuccessfully'));
|
||||
this.mapSaveing = false;
|
||||
this.initAutoSaveTask();
|
||||
}).catch(error => {
|
||||
console.log(error);
|
||||
this.$messageBox(this.$t('tip.saveFailed'));
|
||||
this.mapSaveing = false;
|
||||
if (error.code === 40004 || error.code === 40005 || error.code === 40003) {
|
||||
this.clearAutoSave();
|
||||
} else {
|
||||
this.initAutoSaveTask();
|
||||
}
|
||||
});
|
||||
}).catch(error => {
|
||||
console.log(error, '错误提示');
|
||||
this.mapSaveing = false;
|
||||
this.$message(this.$t('tip.saveFailed'));
|
||||
});
|
||||
}
|
||||
}
|
||||
},
|
||||
verifyMapEvent() {
|
||||
if (this.$refs.jlmapVisual) {
|
||||
const map = this.$store.state.map.map;
|
||||
if (map && this.$route.params.mapId) {
|
||||
verifyMap(this.$route.params.mapId).then(res => {
|
||||
if (res.data.length) {
|
||||
this.tableToExcel(res.data);
|
||||
this.$messageBox(this.$t('tip.dataValidationFailed'));
|
||||
} else {
|
||||
this.$message.success(this.$t('tip.dataValidationSuccess'));
|
||||
}
|
||||
}).catch(() => {
|
||||
this.$message.error(this.$t('tip.requestFailed'));
|
||||
});
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
tableToExcel(data) {
|
||||
const filterVal = ['index'];
|
||||
const arr = [];
|
||||
data.forEach(item => {
|
||||
arr.push({ index: item });
|
||||
});
|
||||
const dataList = this.formatJson(filterVal, arr);
|
||||
import('@/utils/Export2Excel').then(excel => {
|
||||
excel.export_json_to_excel([this.$t('tip.dataQuestion')], dataList, this.$t('tip.dataList'));
|
||||
});
|
||||
},
|
||||
formatJson(filterVal, jsonData) {
|
||||
return jsonData.map(v => filterVal.map(j => v[j]));
|
||||
},
|
||||
|
||||
setDelayUnlockStatus(data, status) {
|
||||
if (data && data.delayShowList) {
|
||||
data.delayShowList.forEach(elem => {
|
||||
elem.status = status;
|
||||
});
|
||||
}
|
||||
},
|
||||
// // 增加数据数据 给vuex map对象中
|
||||
addOrUpdateMapModel(obj) {
|
||||
this.$store.dispatch('map/updateMapDevices', obj);
|
||||
},
|
||||
updateMapModel(models) {
|
||||
this.$store.dispatch('map/updateMapDevices', models);
|
||||
},
|
||||
// 撤销
|
||||
revocation() {
|
||||
this.$store.dispatch('map/setRevocation');
|
||||
},
|
||||
// 恢复
|
||||
recover() {
|
||||
this.$store.dispatch('map/setRecover');
|
||||
},
|
||||
// 设置显示中心
|
||||
setCenter(code) {
|
||||
this.$refs.jlmapVisual.setCenter(code);
|
||||
},
|
||||
createMap() {
|
||||
this.$refs.mapCreate.show();
|
||||
},
|
||||
importf() { // 导入地图jsons数据
|
||||
const loading = this.$loading({
|
||||
lock: true,
|
||||
text: '正在导入中...',
|
||||
spinner: 'el-icon-loading',
|
||||
background: 'rgba(0, 0, 0, 0.7)'
|
||||
});
|
||||
setTimeout(() => {
|
||||
const obj = this.$refs.files;
|
||||
if (!obj.files) return;
|
||||
const f = obj.files[0];
|
||||
const reader = new FileReader();
|
||||
const that = this;
|
||||
reader.readAsText(f, 'utf-8');
|
||||
reader.onload = function(e) {
|
||||
const data = e.target.result;
|
||||
postBuildMapImport(JSON.parse(data)).then(res => {
|
||||
loading.close();
|
||||
that.$message.success('导入成功！');
|
||||
that.refresh();
|
||||
loading.close();
|
||||
}).catch(error => {
|
||||
loading.close();
|
||||
that.$message.error('导入失败' + error.message);
|
||||
});
|
||||
obj.value = '';
|
||||
};
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style rel="stylesheet/scss" lang="scss" scoped>
|
||||
@import "src/styles/mixin.scss";
|
||||
.operation_box{
|
||||
position: absolute;
|
||||
right: 20px;
|
||||
top: 20px;
|
||||
z-index: 9;
|
||||
}
|
||||
|
||||
.map-draft{
|
||||
/deep/{
|
||||
.v-modal{
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
.box{
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.mapPaint{
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.map-view {
|
||||
float: left;
|
||||
width: auto;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.map-draft {
|
||||
float: right;
|
||||
width: 520px;
|
||||
height: 100%;
|
||||
// /deep/ .el-scrollbar__view {
|
||||
// width: 510px !important;
|
||||
// height: calc(100% - 40px);
|
||||
// }
|
||||
}
|
||||
|
||||
.physical-view {
|
||||
line-height: 25px;
|
||||
height: 60px;
|
||||
padding-left: 12px;
|
||||
|
||||
.el-checkbox {
|
||||
width: 70px;
|
||||
margin: 0;
|
||||
margin-right: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
.uploadDemo {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
float: right;
|
||||
padding: 3px 0;
|
||||
margin-right: 3px;
|
||||
cursor: pointer;
|
||||
|
||||
input {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
opacity: 0;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,276 +0,0 @@
|
||||
<template>
|
||||
<el-tabs v-model="activeName" class="card">
|
||||
<el-tab-pane class="view-control" :label="$t('map.property')" name="first">
|
||||
<div style="height: calc(100% - 46px);">
|
||||
<el-scrollbar wrap-class="scrollbar-wrapper">
|
||||
<config-list ref="form" :form="dataForm" :form-model="editModel" :rules="rules" />
|
||||
</el-scrollbar>
|
||||
</div>
|
||||
<div class="button_box">
|
||||
<el-button-group class="map-draft-group">
|
||||
<el-button type="primary" size="small" @click="edit">{{ $t('map.updateObj') }}</el-button>
|
||||
<el-button type="danger" size="small" @click="deleteObj">{{ $t('map.deleteObj') }}</el-button>
|
||||
</el-button-group>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane class="view-control" :label="$t('map.newConstruction')" name="second">
|
||||
<div style="height: calc(100% - 46px);">
|
||||
<el-scrollbar wrap-class="scrollbar-wrapper">
|
||||
<config-data ref="make" :form="makeForm" :form-model="addModel" :rules="createRules" />
|
||||
</el-scrollbar>
|
||||
</div>
|
||||
<div class="button_box">
|
||||
<el-button-group class="map-draft-group">
|
||||
<el-button type="primary" size="small" @click="create">{{ $t('map.create') }}</el-button>
|
||||
</el-button-group>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapGetters } from 'vuex';
|
||||
import { getUID } from '@/jmap/utils/Uid';
|
||||
import ConfigList from './config/list';
|
||||
import ConfigData from './config/data';
|
||||
import { deepAssign } from '@/utils/index';
|
||||
|
||||
export default {
|
||||
name: 'ImageControlDraft',
|
||||
components: {
|
||||
ConfigList,
|
||||
ConfigData
|
||||
},
|
||||
props: {
|
||||
selected: {
|
||||
type: Object,
|
||||
default: function () {
|
||||
return null;
|
||||
}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
activeName: 'first',
|
||||
mapData: null,
|
||||
imageLists: [
|
||||
{
|
||||
value: `${process.env.VOICE_API}/oss/2d/bj1.png`,
|
||||
label: this.$t('map.upside')
|
||||
},
|
||||
{
|
||||
value: `${process.env.VOICE_API}/oss/2d/bj2.png`,
|
||||
label: this.$t('map.hypomere')
|
||||
}
|
||||
],
|
||||
editModel: {
|
||||
code: '',
|
||||
width: '',
|
||||
height: '',
|
||||
name: '',
|
||||
rotate: 0,
|
||||
zIndex: 5,
|
||||
url: '',
|
||||
position: {
|
||||
x: 0,
|
||||
y: 0
|
||||
}
|
||||
},
|
||||
addModel: {
|
||||
width: 48,
|
||||
height: 20,
|
||||
name: '',
|
||||
rotate: 0,
|
||||
zIndex: 5,
|
||||
url: `${process.env.VOICE_API}/oss/2d/bj1.png`,
|
||||
position: {
|
||||
x: 0,
|
||||
y: 0
|
||||
}
|
||||
},
|
||||
rules: {
|
||||
width: [
|
||||
{ required: true, message: this.$t('map.pleaseEnterImageWidth'), trigger: 'blur' }
|
||||
],
|
||||
height: [
|
||||
{ required: true, message: this.$t('map.pleaseEnterImageHeight'), trigger: 'blur' }
|
||||
],
|
||||
'position.x': [
|
||||
{ required: true, message: this.$t('map.pleaseEnterXCoordinate'), trigger: 'blur' }
|
||||
],
|
||||
'position.y': [
|
||||
{ required: true, message: this.$t('map.pleaseEnterYCoordinate'), trigger: 'blur' }
|
||||
]
|
||||
}
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapGetters('map', [
|
||||
'resourceList'
|
||||
]),
|
||||
dataForm() {
|
||||
const form = {
|
||||
labelWidth: '130px',
|
||||
items: {
|
||||
code: {
|
||||
name: '',
|
||||
item: []
|
||||
},
|
||||
draw: {
|
||||
name: this.$t('map.drawData'),
|
||||
item: [
|
||||
{ prop: 'code', label: `${this.$t('map.image')}${this.$t('map.code')}`, type: 'select', optionLabel: 'code', optionValue: 'code', options: this.resourceList, change: true, deviceChange: this.deviceChange },
|
||||
{ prop: 'width', label: this.$t('map.imageWidth'), type: 'number', min: 0 },
|
||||
{ prop: 'height', label: this.$t('map.imageHeight'), type: 'number', min: 0 },
|
||||
{ prop: 'zIndex', label: this.$t('map.imageZindex'), type: 'number', min: 0 },
|
||||
{ prop: 'rotate', label: this.$t('map.rotateAngle'), type: 'number', min: 0 },
|
||||
{ prop: 'position', label: this.$t('map.imagePoint'), type: 'coordinate', width: '120px', children: [
|
||||
{ prop: 'position.x', firstLevel: 'position', secondLevel: 'x', label: 'x:', type: 'number', labelWidth: '20px' },
|
||||
{ prop: 'position.y', firstLevel: 'position', secondLevel: 'y', label: 'y:', type: 'number', labelWidth: '20px' }
|
||||
] }
|
||||
]
|
||||
},
|
||||
map: {
|
||||
name: this.$t('map.mapData'),
|
||||
item: []
|
||||
}
|
||||
}
|
||||
};
|
||||
return form;
|
||||
},
|
||||
makeForm() {
|
||||
const form = {
|
||||
labelWidth: '150px',
|
||||
items: [
|
||||
{ prop: 'width', label: this.$t('map.imageWidth'), type: 'number', min: 0 },
|
||||
{ prop: 'height', label: this.$t('map.imageHeight'), type: 'number', min: 0 },
|
||||
{ prop: 'url', label: this.$t('map.imageSelect'), type: 'select', optionLabel: 'label', optionValue: 'value', options: this.imageLists },
|
||||
{ prop: 'position', label: this.$t('map.imagePoint'), type: 'coordinate', width: '140px', children: [
|
||||
{ prop: 'position.x', firstLevel: 'position', secondLevel: 'x', label: 'x:', type: 'number', labelWidth: '20px' },
|
||||
{ prop: 'position.y', firstLevel: 'position', secondLevel: 'y', label: 'y:', type: 'number', labelWidth: '20px' }
|
||||
] }
|
||||
]
|
||||
};
|
||||
return form;
|
||||
},
|
||||
createRules: function () {
|
||||
return {
|
||||
width: [
|
||||
{ required: true, message: this.$t('map.pleaseEnterImageWidth'), trigger: 'blur' }
|
||||
],
|
||||
height: [
|
||||
{ required: true, message: this.$t('map.pleaseEnterImageHeight'), trigger: 'blur' }
|
||||
],
|
||||
'position.x': [
|
||||
{ required: true, message: this.$t('map.pleaseEnterXCoordinate'), trigger: 'blur' }
|
||||
],
|
||||
'position.y': [
|
||||
{ required: true, message: this.$t('map.pleaseEnterYCoordinate'), trigger: 'blur' }
|
||||
]
|
||||
};
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
selected: function (val, oldVal) {
|
||||
this.deviceSelect(val);
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
},
|
||||
methods: {
|
||||
deviceChange(code) {
|
||||
this.$emit('setCenter', code);
|
||||
this.deviceSelect(this.$store.getters['map/getDeviceByCode'](code));
|
||||
},
|
||||
deviceSelect(selected) {
|
||||
this.$refs.form.resetFields();
|
||||
this.$refs.make.resetFields();
|
||||
if (selected && selected._type.toUpperCase() === 'ImageControl'.toUpperCase()) {
|
||||
this.activeName = 'first';
|
||||
this.editModel = deepAssign(this.editModel, selected);
|
||||
}
|
||||
},
|
||||
create() {
|
||||
this.$refs.make.validate((valid) => {
|
||||
if (valid) {
|
||||
const uid = getUID('ImageControl');
|
||||
const model = {
|
||||
_type: 'ImageControl',
|
||||
code: uid,
|
||||
name: uid,
|
||||
width: this.addModel.width,
|
||||
rotate: 0,
|
||||
zIndex: 5,
|
||||
height: this.addModel.height,
|
||||
url: this.addModel.url,
|
||||
position: {
|
||||
x: this.addModel.position.x,
|
||||
y: this.addModel.position.y
|
||||
}
|
||||
};
|
||||
this.$emit('updateMapModel', model);
|
||||
}
|
||||
});
|
||||
},
|
||||
// 修改对象
|
||||
edit() {
|
||||
this.$refs['form'].validate((valid) => {
|
||||
if (valid) {
|
||||
const data = Object.assign({_type: 'ImageControl'}, this.editModel);
|
||||
this.$emit('updateMapModel', data);
|
||||
}
|
||||
});
|
||||
},
|
||||
// 删除对象
|
||||
deleteObj() {
|
||||
const selected = this.$store.getters['map/getDeviceByCode'](this.editModel.code);
|
||||
if (selected && selected._type.toUpperCase() === 'ImageControl'.toUpperCase()) {
|
||||
const _that = this;
|
||||
this.$confirm(this.$t('tip.confirmDeletion'), this.$t('tip.hint'), {
|
||||
confirmButtonText: this.$t('map.confirm'),
|
||||
cancelButtonText: this.$t('map.cancel'),
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
_that.$emit('updateMapModel', {...selected, _dispose: true});
|
||||
_that.deviceSelect();
|
||||
}).catch(() => {
|
||||
_that.$message.info(this.$t('tip.cancelledDelete'));
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style rel="stylesheet/scss" lang="scss" scoped>
|
||||
@import "src/styles/mixin.scss";
|
||||
.view-control{
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.card {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.coordinate {
|
||||
overflow: hidden;
|
||||
|
||||
.title {
|
||||
text-align: right;
|
||||
font-size: 14px;
|
||||
color: #606266;
|
||||
line-height: 40px;
|
||||
padding: 0 12px 0 0;
|
||||
-webkit-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
line-height: 28px;
|
||||
width: 160px;
|
||||
font-weight: bold;
|
||||
display: block;
|
||||
float: left;
|
||||
}
|
||||
}
|
||||
|
||||
.map-draft-group {
|
||||
color: #3E44BE;
|
||||
}
|
||||
</style>
|
||||
@ -1,285 +0,0 @@
|
||||
<template>
|
||||
<el-tabs v-model="activeName" class="card">
|
||||
<el-tab-pane class="view-control" :label="$t('map.property')" name="first">
|
||||
<div style="height: calc(100% - 46px);">
|
||||
<el-scrollbar wrap-class="scrollbar-wrapper">
|
||||
<config-list ref="form" :form="form" :form-model="editModel" :rules="rules" />
|
||||
</el-scrollbar>
|
||||
</div>
|
||||
<div class="button_box">
|
||||
<el-button-group class="map-draft-group">
|
||||
<el-button type="primary" size="small" @click="edit">{{ $t('map.updateObj') }}</el-button>
|
||||
<el-button type="danger" size="small" @click="deleteObj">{{ $t('map.deleteObj') }}</el-button>
|
||||
</el-button-group>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane class="view-control" :label="$t('map.newConstruction')" name="second">
|
||||
<div style="height: calc(100% - 46px);">
|
||||
<el-scrollbar wrap-class="scrollbar-wrapper">
|
||||
<el-form ref="make" label-width="120px" :rules="createRules" :model="addModel" size="mini">
|
||||
<el-form-item :label="$t('map.buttonType')+ ':'" prop="type">
|
||||
<el-select v-model="addModel.type" filterable>
|
||||
<el-option
|
||||
v-for="item in buttonTypeList"
|
||||
:key="item.code"
|
||||
:label="item.name"
|
||||
:value="item.code"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('map.belongsStation')" prop="stationCode">
|
||||
<el-select v-model="addModel.stationCode" filterable>
|
||||
<el-option
|
||||
v-for="item in stationList"
|
||||
:key="item.code"
|
||||
:label="item.name + ' (' + item.code+ ')'"
|
||||
:value="item.code"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<div class="coordinate">
|
||||
<span class="title" style="width: 120px">{{ $t('map.textPoints') }}</span>
|
||||
<el-form-item
|
||||
label="x:"
|
||||
prop="position.x"
|
||||
style="display: table; float: left; margin-right: 20px;"
|
||||
label-width="25px"
|
||||
>
|
||||
<el-input-number v-model="addModel.position.x" label="x:" />
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
label="y:"
|
||||
prop="position.y"
|
||||
style="display: table; float: left;"
|
||||
label-width="25px"
|
||||
>
|
||||
<el-input-number v-model="addModel.position.y" label="y:" />
|
||||
</el-form-item>
|
||||
</div>
|
||||
</el-form>
|
||||
</el-scrollbar>
|
||||
</div>
|
||||
<div class="button_box">
|
||||
<el-button-group class="map-draft-group">
|
||||
<el-button type="primary" size="small" @click="create">{{ $t('map.create') }}</el-button>
|
||||
</el-button-group>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapGetters } from 'vuex';
|
||||
import { getUID } from '@/jmap/utils/Uid';
|
||||
import ConfigList from './config/list';
|
||||
import { deepAssign } from '@/utils/index';
|
||||
|
||||
export default {
|
||||
name: 'LcControlDraft',
|
||||
components: {
|
||||
ConfigList
|
||||
},
|
||||
props: {
|
||||
selected: {
|
||||
type: Object,
|
||||
default: function () {
|
||||
return null;
|
||||
}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
activeName: 'first',
|
||||
buttonTypeList: [
|
||||
{ code: '01', name: this.$t('map.returnByGraph') }
|
||||
],
|
||||
mapData: null,
|
||||
editModel: {
|
||||
code: '',
|
||||
text: '',
|
||||
type: '',
|
||||
stationCode: '',
|
||||
position: {
|
||||
x: 0,
|
||||
y: 0
|
||||
}
|
||||
},
|
||||
addModel: {
|
||||
type: '',
|
||||
stationCode: '',
|
||||
text: '',
|
||||
position: {
|
||||
x: 0,
|
||||
y: 0
|
||||
}
|
||||
},
|
||||
rules: {
|
||||
code: [
|
||||
{ required: true, message: this.$t('rules.pleaseSelectEncoding'), trigger: 'change' }
|
||||
],
|
||||
tsxt: [
|
||||
{ required: true, message: this.$t('rules.pleaseEnterStatusSignal'), trigger: 'blur' }
|
||||
],
|
||||
'position.x': [
|
||||
{ required: true, message: this.$t('map.pleaseEnterXCoordinate'), trigger: 'blur' }
|
||||
],
|
||||
'position.y': [
|
||||
{ required: true, message: this.$t('map.pleaseEnterYCoordinate'), trigger: 'blur' }
|
||||
]
|
||||
}
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapGetters('map', [
|
||||
'stationList',
|
||||
'buttonList'
|
||||
]),
|
||||
createRules: function () {
|
||||
return {
|
||||
text: [
|
||||
{ required: true, message: this.$t('rules.pleaseSelectButtonContent'), trigger: 'blur' }
|
||||
],
|
||||
type: [
|
||||
{ required: true, message: this.$t('rules.pleaseSelectButtonType'), trigger: 'blur' }
|
||||
],
|
||||
stationCode: [
|
||||
{ required: true, message: this.$t('rules.stationControlStationCode'), trigger: 'change' }
|
||||
],
|
||||
'position.x': [
|
||||
{ required: true, message: this.$t('map.pleaseEnterXCoordinate'), trigger: 'blur' }
|
||||
],
|
||||
'position.y': [
|
||||
{ required: true, message: this.$t('map.pleaseEnterYCoordinate'), trigger: 'blur' }
|
||||
]
|
||||
};
|
||||
},
|
||||
form() {
|
||||
const form = {
|
||||
labelWidth: '140px',
|
||||
items: {
|
||||
code: {
|
||||
name: '',
|
||||
item: []
|
||||
},
|
||||
draw: {
|
||||
name: this.$t('map.drawData'),
|
||||
item: [
|
||||
{ prop: 'code', label: `${this.$t('map.buttonControl')}${this.$t('map.code')}`, type: 'select', optionLabel: 'code', optionValue: 'code', options: this.buttonList, change: true, deviceChange: this.deviceChange },
|
||||
{ prop: 'type', label: `${this.$t('map.buttonType')}:`, type: 'select', optionLabel: 'name', optionValue: 'code', options: this.buttonTypeList },
|
||||
{ prop: 'position', label: this.$t('map.stateSignalsPlotCoordinates'), type: 'coordinate', width: '140px', children: [
|
||||
{ prop: 'position.x', firstLevel: 'position', secondLevel: 'x', label: 'x:', type: 'number', labelWidth: '25px'},
|
||||
{ prop: 'position.y', firstLevel: 'position', secondLevel: 'y', label: 'y:', type: 'number', labelWidth: '25px' }
|
||||
] }
|
||||
]
|
||||
},
|
||||
map: {
|
||||
name: this.$t('map.mapData'),
|
||||
item: [
|
||||
{ prop: 'stationCode', label: this.$t('map.equipmentStation'), type: 'select', optionLabel: 'name&&code', optionValue: 'code', options: this.stationList }
|
||||
]
|
||||
}
|
||||
}
|
||||
};
|
||||
return form;
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
selected: function (val, oldVal) {
|
||||
this.deviceSelect(val);
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
},
|
||||
methods: {
|
||||
deviceChange(code) {
|
||||
this.$emit('setCenter', code);
|
||||
this.deviceSelect(this.$store.getters['map/getDeviceByCode'](code));
|
||||
},
|
||||
deviceSelect(selected) {
|
||||
this.$refs.form.resetFields();
|
||||
this.$refs.make.resetFields();
|
||||
if (selected && selected._type.toUpperCase() == 'ButtonControl'.toUpperCase()) {
|
||||
this.activeName = 'first';
|
||||
this.editModel = deepAssign(this.editModel, selected);
|
||||
}
|
||||
},
|
||||
create() {
|
||||
this.$refs.make.validate((valid) => {
|
||||
if (valid) {
|
||||
const uid = getUID('ButtonControl');
|
||||
const model = {
|
||||
_type: 'ButtonControl',
|
||||
code: uid,
|
||||
type: this.addModel.type,
|
||||
stationCode: this.addModel.stationCode,
|
||||
text: this.addModel.text,
|
||||
position: {
|
||||
x: this.addModel.position.x,
|
||||
y: this.addModel.position.y
|
||||
}
|
||||
};
|
||||
this.$emit('updateMapModel', model);
|
||||
}
|
||||
});
|
||||
},
|
||||
// 修改对象
|
||||
edit() {
|
||||
this.$refs['form'].validate((valid) => {
|
||||
if (valid) {
|
||||
const data = Object.assign({_type: 'ButtonControl'}, this.editModel);
|
||||
this.$emit('updateMapModel', data);
|
||||
}
|
||||
});
|
||||
},
|
||||
// 删除对象
|
||||
deleteObj() {
|
||||
const selected = this.$store.getters['map/getDeviceByCode'](this.editModel.code);
|
||||
if (selected && selected._type.toUpperCase() === 'LcControl'.toUpperCase()) {
|
||||
const _that = this;
|
||||
this.$confirm(this.$t('tip.confirmDeletion'), this.$t('tip.hint'), {
|
||||
confirmButtonText: this.$t('tip.confirm'),
|
||||
cancelButtonText: this.$t('tip.cancel'),
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
_that.$emit('updateMapModel', {...selected, _dispose: true});
|
||||
_that.deviceSelect();
|
||||
}).catch(() => {
|
||||
_that.$message.info(this.$t('tip.cancelledDelete'));
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style rel="stylesheet/scss" lang="scss" scoped>
|
||||
@import "src/styles/mixin.scss";
|
||||
.view-control{
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.card {
|
||||
height: 100%;
|
||||
}
|
||||
.coordinate {
|
||||
overflow: hidden;
|
||||
|
||||
.title {
|
||||
text-align: right;
|
||||
font-size: 14px;
|
||||
color: #606266;
|
||||
line-height: 40px;
|
||||
padding: 0 12px 0 0;
|
||||
-webkit-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
line-height: 28px;
|
||||
width: 160px;
|
||||
font-weight: bold;
|
||||
display: block;
|
||||
float: left;
|
||||
}
|
||||
}
|
||||
|
||||
.map-draft-group {
|
||||
color: #3E44BE;
|
||||
}
|
||||
</style>
|
||||
@ -1,197 +0,0 @@
|
||||
<template>
|
||||
<div class="view-control">
|
||||
<div class="content-box">
|
||||
<div v-for="item in modelList" :key="item.type" class="content-box-list">
|
||||
<div class="title-box">{{ item.name }}</div>
|
||||
<div class="list-box">
|
||||
<div v-for="nor in item.list" :key="nor.code" class="list-content" @mouseenter="mouseenter(nor)" @mouseleave="mouseleave(nor)">
|
||||
<div class="name">{{ nor.name }}</div>
|
||||
<div class="close" @click="delList(nor, item.list)"><i class="el-icon-close" /></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="select-box">
|
||||
<el-select v-model="stationCode" filterable size="mini">
|
||||
<el-option
|
||||
v-for="item in stationList"
|
||||
:key="item.code"
|
||||
:label="item.name + item.code"
|
||||
:value="item.code"
|
||||
/>
|
||||
</el-select>
|
||||
</div>
|
||||
<div class="button-box">
|
||||
<el-button type="primary" size="mini" @click="handleScetionStationCode">{{ $t('map.setStationCode') }}</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapGetters } from 'vuex';
|
||||
import { deepAssign } from '@/utils/index';
|
||||
|
||||
export default {
|
||||
name: 'CheckboxDraft',
|
||||
components: {
|
||||
},
|
||||
props: {
|
||||
selected: {
|
||||
type: Object,
|
||||
default: function () {
|
||||
return null;
|
||||
}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
stationCode: '',
|
||||
modelList: [
|
||||
{
|
||||
type: 'Section',
|
||||
name: '区段列表',
|
||||
list: []
|
||||
},
|
||||
{
|
||||
type: 'Switch',
|
||||
name: '道岔列表',
|
||||
list: []
|
||||
}
|
||||
]
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapGetters('map', [
|
||||
'seclectDeviceList',
|
||||
'stationList'
|
||||
])
|
||||
},
|
||||
watch: {
|
||||
selected: function (val, oldVal) {
|
||||
this.deviceSelect(val);
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
},
|
||||
methods: {
|
||||
deviceChange(code) {
|
||||
this.$emit('setCenter', code);
|
||||
this.deviceSelect(this.$store.getters['map/getDeviceByCode'](code));
|
||||
},
|
||||
deviceSelect(selected) {
|
||||
if (selected && selected._type.toUpperCase() == 'CheckBox'.toUpperCase()) {
|
||||
this.clearModelList();
|
||||
this.seclectDeviceList.forEach(item => {
|
||||
if (item._type == 'Section') {
|
||||
this.modelList[0].list.push(item);
|
||||
} else if (item._type == 'Switch') {
|
||||
this.modelList[1].list.push(item);
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
clearModelList() {
|
||||
this.modelList.forEach(item => {
|
||||
item.list = [];
|
||||
});
|
||||
},
|
||||
// 删除当前选中
|
||||
delList(model, list) {
|
||||
list.forEach((nor, index) => {
|
||||
if (nor.code == model.code) {
|
||||
list.splice(index, 1);
|
||||
}
|
||||
});
|
||||
this.seclectDeviceList.forEach((item, index) => {
|
||||
if (item.code == model.code) {
|
||||
this.seclectDeviceList.splice(index, 1);
|
||||
}
|
||||
});
|
||||
},
|
||||
// 多选区段设置集中站
|
||||
handleScetionStationCode() {
|
||||
if (this.stationCode && this.seclectDeviceList) {
|
||||
const models = [];
|
||||
this.seclectDeviceList.forEach(model => {
|
||||
const Model = deepAssign({}, this.$store.getters['map/getDeviceByCode'](model.code));
|
||||
Model.stationCode = this.stationCode;
|
||||
models.push(Model);
|
||||
});
|
||||
this.$emit('updateMapModel', models);
|
||||
this.$message.success('设置设备集中站成功');
|
||||
this.stationCode = '';
|
||||
}
|
||||
},
|
||||
mouseenter(model) {
|
||||
if (model._type == 'Section') {
|
||||
model.instance.mouseout();
|
||||
}
|
||||
},
|
||||
mouseleave(model) {
|
||||
if (model._type == 'Section') {
|
||||
model.instance.mouseover();
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style rel="stylesheet/scss" lang="scss" scoped>
|
||||
@import "src/styles/mixin.scss";
|
||||
.view-control{
|
||||
height: 100%;
|
||||
|
||||
.content-box{
|
||||
padding-bottom: 20px;
|
||||
font-size: 13px;
|
||||
padding-top: 2px;
|
||||
&-list{
|
||||
padding: 10px;
|
||||
margin: 10px;
|
||||
margin-top: 0;
|
||||
box-shadow: 1px 1px 4px #ccc;
|
||||
}
|
||||
}
|
||||
|
||||
.select-box{
|
||||
margin-bottom: 10px;
|
||||
padding-left: 10px;
|
||||
}
|
||||
.button-box{
|
||||
padding-left: 10px;
|
||||
}
|
||||
|
||||
.list-box{
|
||||
overflow: hidden;
|
||||
.list-content{
|
||||
float: left;
|
||||
background: #e2e2e2;
|
||||
margin: 5px;
|
||||
border-radius: 5px;
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
padding-left: 10px;
|
||||
padding-right: 3px;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover{
|
||||
background: #ccc;
|
||||
}
|
||||
.name{
|
||||
float: left;
|
||||
margin-right: 20px;
|
||||
}
|
||||
.close{
|
||||
float: left;
|
||||
width: 23px;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.title-box{
|
||||
padding-left: 10px;
|
||||
border-left: 4px solid red;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,301 +0,0 @@
|
||||
<template>
|
||||
<el-form ref="form" :label-width="form.labelWidth" size="mini" :rules="rules" :model="formModel">
|
||||
<template v-for="item in form.items">
|
||||
<template v-if="checkFieldType(item, 'select')">
|
||||
<el-form-item v-if="!item.isHidden" :key="item.prop" :label="item.label" :prop="item.prop" :required="item.required">
|
||||
<template v-if="item.change">
|
||||
<el-select
|
||||
v-model="formModel[item.prop]"
|
||||
filterable
|
||||
:placeholder="item.placeholder"
|
||||
:disabled="item.disabled"
|
||||
@change="item.deviceChange"
|
||||
>
|
||||
<el-option
|
||||
v-for="option in item.options"
|
||||
:key="option[item.optionValue]"
|
||||
:label="handleLabel(option, item.optionLabel)"
|
||||
:value="option[item.optionValue]"
|
||||
/>
|
||||
</el-select>
|
||||
</template>
|
||||
<template v-else>
|
||||
<el-select
|
||||
v-model="formModel[item.prop]"
|
||||
filterable
|
||||
:placeholder="item.placeholder"
|
||||
:disabled="item.disabled"
|
||||
>
|
||||
<el-option
|
||||
v-for="option in item.options"
|
||||
:key="option[item.optionValue]"
|
||||
:label="handleLabel(option, item.optionLabel)"
|
||||
:value="option[item.optionValue]"
|
||||
/>
|
||||
</el-select>
|
||||
</template>
|
||||
</el-form-item>
|
||||
</template>
|
||||
<template v-if="checkFieldType(item, 'selectHover')">
|
||||
<el-form-item v-if="!item.isHidden" :key="item.prop" :label="item.label" :prop="item.prop" :required="item.required">
|
||||
<el-select
|
||||
v-model="formModel[item.prop]"
|
||||
filterable
|
||||
:placeholder="item.placeholder"
|
||||
:disabled="item.disabled"
|
||||
>
|
||||
<el-option
|
||||
v-for="option in item.options"
|
||||
:key="option.code"
|
||||
:label="handleLabel(option, item.optionLabel)"
|
||||
:value="option.code"
|
||||
/>
|
||||
</el-select>
|
||||
<el-button
|
||||
:type="item.buttonShowType ? 'danger' : 'primary'"
|
||||
@click="item.hover(item.buttonType)"
|
||||
>{{ $t('map.activate') }}</el-button>
|
||||
</el-form-item>
|
||||
</template>
|
||||
<template v-if="checkFieldType(item, 'input')">
|
||||
<el-form-item v-if="!item.isHidden" :key="item.prop" :label="item.label" :prop="item.prop" :required="item.required">
|
||||
<el-input v-model="formModel[item.prop]" type="text" :disabled="item.disabled" maxlength="30" show-word-limit />
|
||||
</el-form-item>
|
||||
</template>
|
||||
<template v-if="checkFieldType(item, 'number')">
|
||||
<el-form-item v-if="!item.isHidden" :key="item.prop" :label="item.label" :prop="item.prop" :required="item.required">
|
||||
<div v-if="!item.firstLevel">
|
||||
<el-input-number v-model="formModel[item.prop]" :min="item.min" :max="item.max" :label="item.label" :disabled="item.disabled" />
|
||||
<span style="padding-left: 1px;">{{ item.placeholder }}</span>
|
||||
</div>
|
||||
<div v-else>
|
||||
<el-input-number v-model="formModel[item.firstLevel][item.secondLevel]" :min="item.min" :max="item.max" :label="item.label" :disabled="item.disabled" />
|
||||
<span style="padding-left: 1px;">{{ item.placeholder }}</span>
|
||||
</div>
|
||||
</el-form-item>
|
||||
</template>
|
||||
<template v-if="checkFieldType(item, 'color')">
|
||||
<el-form-item v-if="!item.isHidden" :key="item.prop" :label="item.label" :prop="item.prop" :required="item.required">
|
||||
<el-color-picker v-model="formModel[item.prop]" show-alpha :predefine="skins" :disabled="item.disabled" />
|
||||
</el-form-item>
|
||||
</template>
|
||||
<template v-if="checkFieldType(item, 'radio')">
|
||||
<el-form-item v-if="!item.isHidden" :key="item.prop" :label="item.label" :prop="item.prop" :required="item.required">
|
||||
<el-radio-group v-model="formModel[item.prop]" :disabled="item.disabled">
|
||||
<el-radio v-for="(opts, index) in item.radioList" :key="index" :border="item.border" :label="opts.value">{{ opts.label }}</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
</template>
|
||||
<!-- 坐标点并列显示 -->
|
||||
<template v-if="checkFieldType(item, 'coordinate')">
|
||||
<div v-if="!item.isHidden" :key="item.prop" class="coordinate">
|
||||
<span class="title" :style="{width: item.width}">{{ item.label }}</span>
|
||||
<div v-for="opt in item.children" :key="opt.code" class="listWidth">
|
||||
<el-form-item :label="opt.label" :prop="opt.prop" :label-width="opt.labelWidth">
|
||||
<el-input-number v-model="formModel[opt.firstLevel][opt.secondLevel]" :label="opt.label" :disabled="opt.disabled" />
|
||||
</el-form-item>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<!-- 多个坐标点绘制 -->
|
||||
<template v-if="checkFieldType(item, 'points')">
|
||||
<div v-if="!item.isHidden" :key="item.prop" class="coordinate">
|
||||
<span class="title" :style="{width: item.width}">{{ item.label }}</span>
|
||||
<div class="point-section">
|
||||
<template v-for="(point, index) in formModel[item.prop]">
|
||||
<div :key="index" style="overflow: hidden;">
|
||||
<span style="display: table; margin-right: 3px; font-size: 14px; float: left; line-height: 28px;">{{ index == 0 ? '(起点)' : index == formModel[item.prop].length - 1 ? '(终点)' : `(中点${index})` }}</span>
|
||||
<el-form-item
|
||||
label=""
|
||||
:prop="'points[' + index + '].x'"
|
||||
style="display: table; float: left;"
|
||||
label-width="0px"
|
||||
>
|
||||
<el-input-number v-model="point.x" :disabled="item.pointDisabled" />
|
||||
</el-form-item>
|
||||
<span
|
||||
style="display: table; margin-left: 8px; float: left; line-height: 28px;"
|
||||
>
|
||||
, </span>
|
||||
<el-form-item
|
||||
label=""
|
||||
:prop="'points[' + index + '].y'"
|
||||
style="display: table; float: left; margin-right: 5px;"
|
||||
label-width="4px"
|
||||
>
|
||||
<el-input-number v-model="point.y" :disabled="item.pointDisabled" />
|
||||
</el-form-item>
|
||||
<el-button
|
||||
icon="el-icon-plus"
|
||||
:disabled="item.pointDisabled"
|
||||
circle
|
||||
class="point-button"
|
||||
@click="item.addPoint(index)"
|
||||
/>
|
||||
<el-button
|
||||
icon="el-icon-minus"
|
||||
:disabled="index == 0 || index == formModel[item.prop].length - 1"
|
||||
circle
|
||||
class="point-button"
|
||||
style="margin-left: 4px;"
|
||||
@click="item.delPoint(index)"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<template v-if="checkFieldType(item, 'checkbox')">
|
||||
<el-form-item v-if="!item.isHidden" :key="item.prop" :label="item.label" :prop="item.prop" :required="item.required">
|
||||
<el-checkbox v-model="formModel[item.prop]" :disabled="item.disabled" />
|
||||
</el-form-item>
|
||||
</template>
|
||||
<template v-if="checkFieldType(item, 'font')">
|
||||
<el-form-item v-if="!item.isHidden" :key="item.prop" :label="item.label" :prop="item.prop" :required="item.required">
|
||||
<el-font v-model="formModel[item.prop]" :disabled="item.disabled" :placeholder="item.placeholder" />
|
||||
</el-form-item>
|
||||
</template>
|
||||
</template>
|
||||
</el-form>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import ElFont from '@/views/components/font/index';
|
||||
export default {
|
||||
name: 'ConfigList',
|
||||
components: {
|
||||
ElFont
|
||||
},
|
||||
props: {
|
||||
formModel: {
|
||||
type: Object,
|
||||
required: true
|
||||
},
|
||||
form: {
|
||||
type: Object,
|
||||
required: true
|
||||
},
|
||||
rules: {
|
||||
type: Object,
|
||||
default: function () {
|
||||
return null;
|
||||
}
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
skins: []
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
handleLabel(option, label) {
|
||||
if (label == 'name') {
|
||||
return option.name;
|
||||
} else if (label == 'code') {
|
||||
return option.code;
|
||||
} else if (label == 'label') {
|
||||
return option.label;
|
||||
} else if (label == 'name&&code') {
|
||||
if (option.code) {
|
||||
return option.name + ' (' + option.code + ')';
|
||||
} else {
|
||||
return option.name;
|
||||
}
|
||||
} else if (label == 'code&&name') {
|
||||
return option.code + ' (' + option.name + ')';
|
||||
} else {
|
||||
return option.label;
|
||||
}
|
||||
},
|
||||
decompose(item, prop) {
|
||||
if (!prop.includes('.')) {
|
||||
return prop;
|
||||
}
|
||||
const keyArr = prop.split('.');
|
||||
return keyArr[0][keyArr[1]];
|
||||
},
|
||||
checkFieldType(field, type) {
|
||||
if (field.hasOwnProperty('show')) {
|
||||
return field.type === type && field.show;
|
||||
} else {
|
||||
return field.type === type;
|
||||
}
|
||||
},
|
||||
validate(callback) {
|
||||
this.$refs.form.validate((valid) => {
|
||||
if (valid) {
|
||||
callback(true);
|
||||
} else {
|
||||
callback(false);
|
||||
}
|
||||
});
|
||||
},
|
||||
resetForm() {
|
||||
this.$refs.form.resetFields();
|
||||
},
|
||||
clearValidate() {
|
||||
this.$refs.form.clearValidate();
|
||||
},
|
||||
resetFields() {
|
||||
this.$refs.form.resetFields();
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style rel="stylesheet/scss" lang="scss" scoped>
|
||||
|
||||
.coordinate {
|
||||
overflow: hidden;
|
||||
|
||||
.title {
|
||||
text-align: right;
|
||||
font-size: 14px;
|
||||
color: #606266;
|
||||
line-height: 40px;
|
||||
// padding: 0 12px 0 0;
|
||||
-webkit-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
line-height: 28px;
|
||||
width: 120px;
|
||||
font-weight: bold;
|
||||
display: block;
|
||||
float: left;
|
||||
margin-right: 7px;
|
||||
}
|
||||
.listWidth{
|
||||
display: table;
|
||||
float: left;
|
||||
margin-right: 20px;
|
||||
&:last-child{
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
.point-section {
|
||||
float: left;
|
||||
width: calc(100% - 180px);
|
||||
}
|
||||
|
||||
.point-button {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
float: left;
|
||||
|
||||
/deep/ {
|
||||
.el-icon-plus,
|
||||
.el-icon-minus {
|
||||
transform: translateY(-5px);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.el-input-number--mini {
|
||||
width: 110px;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
@ -1,351 +0,0 @@
|
||||
<template>
|
||||
<el-form ref="form" :label-width="form.labelWidth" size="mini" :rules="rules" :model="formModel" class="form_data">
|
||||
<template v-for="(items, index) in form.items">
|
||||
<div v-if="items.item.length" :key="index" class="card" :class="{'card_code' : !items.name}">
|
||||
<div class="card_title">{{ items.name }}</div>
|
||||
<template v-for="item in items.item">
|
||||
<template v-if="checkFieldType(item, 'select')">
|
||||
<el-form-item v-if="!item.isHidden" :key="item.prop" :label="item.label" :prop="item.prop" :required="item.required">
|
||||
<template v-if="item.change">
|
||||
<el-select
|
||||
v-model="formModel[item.prop]"
|
||||
filterable
|
||||
:placeholder="item.placeholder"
|
||||
:disabled="item.disabled"
|
||||
@change="item.deviceChange"
|
||||
>
|
||||
<el-option
|
||||
v-for="option in item.options"
|
||||
:key="option[item.optionValue]"
|
||||
:label="handleLabel(option, item.optionLabel)"
|
||||
:value="option[item.optionValue]"
|
||||
/>
|
||||
</el-select>
|
||||
</template>
|
||||
<template v-else>
|
||||
<el-select
|
||||
v-model="formModel[item.prop]"
|
||||
filterable
|
||||
:placeholder="item.placeholder"
|
||||
:disabled="item.disabled"
|
||||
>
|
||||
<el-option
|
||||
v-for="option in item.options"
|
||||
:key="option[item.optionValue]"
|
||||
:label="handleLabel(option, item.optionLabel)"
|
||||
:value="option[item.optionValue]"
|
||||
/>
|
||||
</el-select>
|
||||
</template>
|
||||
</el-form-item>
|
||||
</template>
|
||||
<template v-if="checkFieldType(item, 'selectHover')">
|
||||
<el-form-item v-if="!item.isHidden" :key="item.prop" :label="item.label" :prop="item.prop" :required="item.required">
|
||||
<el-select
|
||||
v-model="formModel[item.prop]"
|
||||
filterable
|
||||
:placeholder="item.placeholder"
|
||||
:disabled="item.disabled"
|
||||
>
|
||||
<el-option
|
||||
v-for="option in item.options"
|
||||
:key="option.code"
|
||||
:label="handleLabel(option, item.optionLabel)"
|
||||
:value="option.code"
|
||||
/>
|
||||
</el-select>
|
||||
<el-button
|
||||
:type="item.buttonShowType ? 'danger' : 'primary'"
|
||||
@click="item.hover(item.buttonType)"
|
||||
>{{ $t('map.activate') }}</el-button>
|
||||
</el-form-item>
|
||||
</template>
|
||||
<template v-if="checkFieldType(item, 'input')">
|
||||
<el-form-item v-if="!item.isHidden" :key="item.prop" :label="item.label" :prop="item.prop" :required="item.required">
|
||||
<el-input v-model="formModel[item.prop]" type="text" :disabled="item.disabled" maxlength="30" :show-word-limit="true" />
|
||||
</el-form-item>
|
||||
</template>
|
||||
<template v-if="checkFieldType(item, 'number')">
|
||||
<el-form-item v-if="!item.isHidden" :key="item.prop" :label="item.label" :prop="item.prop" :required="item.required">
|
||||
<div v-if="!item.firstLevel">
|
||||
<el-input-number v-model="formModel[item.prop]" :min="item.min" :max="item.max" :label="item.label" :disabled="item.disabled" style="width: 140px" />
|
||||
<span style="padding-left: 1px;">{{ item.placeholder }}</span>
|
||||
</div>
|
||||
<div v-else>
|
||||
<el-input-number v-model="formModel[item.firstLevel][item.secondLevel]" :min="item.min" :max="item.max" :label="item.label" :disabled="item.disabled" />
|
||||
<span style="padding-left: 1px;">{{ item.placeholder }}</span>
|
||||
</div>
|
||||
</el-form-item>
|
||||
</template>
|
||||
<template v-if="checkFieldType(item, 'color')">
|
||||
<el-form-item v-if="!item.isHidden" :key="item.prop" :label="item.label" :prop="item.prop" :required="item.required">
|
||||
<el-color-picker v-model="formModel[item.prop]" show-alpha :predefine="skins" :disabled="item.disabled" />
|
||||
</el-form-item>
|
||||
</template>
|
||||
<template v-if="checkFieldType(item, 'radio')">
|
||||
<el-form-item v-if="!item.isHidden" :key="item.prop" :label="item.label" :prop="item.prop" :required="item.required">
|
||||
<el-radio-group v-model="formModel[item.prop]" :disabled="item.disabled">
|
||||
<el-radio v-for="(opts, indexs) in item.radioList" :key="indexs" :border="item.border" :label="opts.value">{{ opts.label }}</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
</template>
|
||||
<!-- 坐标点并列显示 -->
|
||||
<template v-if="checkFieldType(item, 'coordinate')">
|
||||
<div v-if="!item.isHidden" :key="item.prop" class="coordinate">
|
||||
<span class="title" :style="{width: item.width}">{{ item.label }}</span>
|
||||
<div v-for="opt in item.children" :key="opt.code" class="listWidth">
|
||||
<el-form-item :label="opt.label" :prop="opt.prop" :label-width="opt.labelWidth">
|
||||
<el-input-number v-model="formModel[opt.firstLevel][opt.secondLevel]" :label="opt.label" :disabled="opt.disabled" />
|
||||
</el-form-item>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<!-- 多个坐标点绘制 -->
|
||||
<template v-if="checkFieldType(item, 'points')">
|
||||
<div v-if="!item.isHidden" :key="item.prop" class="coordinate">
|
||||
<span class="title" :style="{width: item.width}">{{ item.label }}</span>
|
||||
<div class="point-section" :style="{ width: `calc(100% - 10px - ${item.width})` }">
|
||||
<template v-for="(point, index) in formModel[item.prop]">
|
||||
<div :key="index" style="overflow: hidden;">
|
||||
<span style="display: table; margin-right: 3px; font-size: 14px; float: left; line-height: 28px;" :style="{'margin-right': index == 0 || index == formModel[item.prop].length - 1 ? '9px' : '5px'}">{{ index == 0 ? '起 点' : index == formModel[item.prop].length - 1 ? '终 点' : `中点${index}` }}</span>
|
||||
<el-form-item
|
||||
label=""
|
||||
:prop="'points[' + index + '].x'"
|
||||
style="display: table; float: left;"
|
||||
label-width="0px"
|
||||
>
|
||||
<el-input-number v-model="point.x" :disabled="item.pointDisabled" />
|
||||
</el-form-item>
|
||||
<span
|
||||
style="display: table; margin-left: 8px; float: left; line-height: 28px;"
|
||||
>
|
||||
, </span>
|
||||
<el-form-item
|
||||
label=""
|
||||
:prop="'points[' + index + '].y'"
|
||||
style="display: table; float: left; margin-right: 5px;"
|
||||
label-width="4px"
|
||||
>
|
||||
<el-input-number v-model="point.y" :disabled="item.pointDisabled" />
|
||||
</el-form-item>
|
||||
<el-button
|
||||
icon="el-icon-plus"
|
||||
:disabled="item.pointDisabled"
|
||||
circle
|
||||
class="point-button"
|
||||
@click="item.addPoint(index)"
|
||||
/>
|
||||
<el-button
|
||||
icon="el-icon-minus"
|
||||
:disabled="index == 0 || index == formModel[item.prop].length - 1"
|
||||
circle
|
||||
class="point-button"
|
||||
style="margin-left: 4px;"
|
||||
@click="item.delPoint(index)"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<template v-if="checkFieldType(item, 'checkbox')">
|
||||
<el-form-item v-if="!item.isHidden" :key="item.prop" :label="item.label" :prop="item.prop" :required="item.required">
|
||||
<el-checkbox v-model="formModel[item.prop]" :disabled="item.disabled" />
|
||||
</el-form-item>
|
||||
</template>
|
||||
<template v-if="checkFieldType(item, 'font')">
|
||||
<el-form-item v-if="!item.isHidden" :key="item.prop" :label="item.label" :prop="item.prop" :required="item.required">
|
||||
<el-font v-model="formModel[item.prop]" :disabled="item.disabled" :placeholder="item.placeholder" />
|
||||
</el-form-item>
|
||||
</template>
|
||||
<template v-if="checkFieldType(item, 'fontContent')">
|
||||
<el-form-item v-if="!item.isHidden" :key="item.prop" :label="item.label" :prop="item.prop" :required="item.required">
|
||||
<el-input v-model="formModel[item.content]" :placeholder="item.placeholder" class="input-with-select">
|
||||
<el-select slot="prepend" v-model="formModel[item.prepend]" :placeholder="item.placeholder">
|
||||
<el-option :label="$t('map.horizontal')" value="H" />
|
||||
<el-option :label="$t('map.vertical')" value="V" />
|
||||
</el-select>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
</template>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
</el-form>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import ElFont from '@/views/components/font/index';
|
||||
export default {
|
||||
name: 'ConfigList',
|
||||
components: {
|
||||
ElFont
|
||||
},
|
||||
props: {
|
||||
formModel: {
|
||||
type: Object,
|
||||
required: true
|
||||
},
|
||||
form: {
|
||||
type: Object,
|
||||
required: true
|
||||
},
|
||||
rules: {
|
||||
type: Object,
|
||||
default: function () {
|
||||
return null;
|
||||
}
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
skins: []
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
handleLabel(option, label) {
|
||||
if (label == 'name') {
|
||||
return option.name;
|
||||
} else if (label == 'code') {
|
||||
return option.code;
|
||||
} else if (label == 'label') {
|
||||
return option.label;
|
||||
} else if (label == 'name&&code') {
|
||||
if (option.code) {
|
||||
return option.name + ' (' + option.code + ')';
|
||||
} else {
|
||||
return option.name;
|
||||
}
|
||||
} else if (label == 'code&&name') {
|
||||
return option.code + ' (' + option.name + ')';
|
||||
} else {
|
||||
return option.label;
|
||||
}
|
||||
},
|
||||
decompose(item, prop) {
|
||||
if (!prop.includes('.')) {
|
||||
return prop;
|
||||
}
|
||||
const keyArr = prop.split('.');
|
||||
return keyArr[0][keyArr[1]];
|
||||
},
|
||||
checkFieldType(field, type) {
|
||||
if (field.hasOwnProperty('show')) {
|
||||
return field.type === type && field.show;
|
||||
} else {
|
||||
return field.type === type;
|
||||
}
|
||||
},
|
||||
validate(callback) {
|
||||
this.$refs.form.validate((valid) => {
|
||||
if (valid) {
|
||||
callback(true);
|
||||
} else {
|
||||
callback(false);
|
||||
}
|
||||
});
|
||||
},
|
||||
resetForm() {
|
||||
this.$refs.form.resetFields();
|
||||
},
|
||||
clearValidate() {
|
||||
this.$refs.form.clearValidate(); // 只移除校验结果
|
||||
},
|
||||
resetFields() {
|
||||
this.$refs.form.resetFields(); // 移除校验结果 并 重置字段值
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style rel="stylesheet/scss" lang="scss" scoped>
|
||||
|
||||
.coordinate {
|
||||
overflow: hidden;
|
||||
|
||||
.title {
|
||||
text-align: right;
|
||||
font-size: 14px;
|
||||
color: #606266;
|
||||
line-height: 40px;
|
||||
// padding: 0 12px 0 0;
|
||||
-webkit-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
line-height: 28px;
|
||||
width: 120px;
|
||||
font-weight: bold;
|
||||
display: block;
|
||||
float: left;
|
||||
margin-right: 7px;
|
||||
}
|
||||
.listWidth{
|
||||
display: table;
|
||||
float: left;
|
||||
margin-right: 20px;
|
||||
&:last-child{
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
.point-section {
|
||||
float: left;
|
||||
}
|
||||
|
||||
.point-button {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
float: left;
|
||||
|
||||
/deep/ {
|
||||
.el-icon-plus,
|
||||
.el-icon-minus {
|
||||
transform: translateY(-5px);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.el-input-number--mini {
|
||||
width: 110px;
|
||||
}
|
||||
|
||||
.form_data{
|
||||
padding: 10px;
|
||||
padding-top: 6px;
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
|
||||
.card{
|
||||
border: 1px solid #ccc;
|
||||
padding: 10px;
|
||||
padding-top: 18px;
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
margin-bottom: 15px;
|
||||
|
||||
&:last-child{
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.card_title {
|
||||
position: absolute;
|
||||
left: 10px;
|
||||
top: -8px;
|
||||
background: #fff;
|
||||
padding: 0px 5px;
|
||||
}
|
||||
}
|
||||
.card_code{
|
||||
border: 0px solid #ccc;
|
||||
padding: 0px;
|
||||
}
|
||||
/deep/ {
|
||||
.input-with-select .el-input-group__prepend {
|
||||
background-color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
@ -1,255 +0,0 @@
|
||||
<template>
|
||||
<el-tabs v-model="activeName" class="card">
|
||||
<el-tab-pane class="view-control" :label="$t('map.property')" name="first">
|
||||
<div style="height: calc(100% - 46px);">
|
||||
<el-scrollbar wrap-class="scrollbar-wrapper">
|
||||
<config-list ref="form" :form="form" :form-model="editModel" :rules="rules" />
|
||||
</el-scrollbar>
|
||||
</div>
|
||||
<div class="button_box">
|
||||
<el-button-group class="map-draft-group">
|
||||
<el-button type="primary" size="small" @click="edit">{{ $t('map.updateObj') }}</el-button>
|
||||
<el-button type="danger" size="small" @click="deleteObj">{{ $t('map.deleteObj') }}</el-button>
|
||||
</el-button-group>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane class="view-control" :label="$t('map.newConstruction')" name="second">
|
||||
<div style="height: calc(100% - 46px);">
|
||||
<el-scrollbar wrap-class="scrollbar-wrapper">
|
||||
<el-form ref="make" label-width="120px" :model="addModel" :rules="createRules" size="mini">
|
||||
<el-form-item :label="$t('map.stationName')" prop="stationCode">
|
||||
<el-select v-model="addModel.stationCode" filterable>
|
||||
<el-option
|
||||
v-for="item in stationList"
|
||||
:key="item.code"
|
||||
:label="item.name + ' (' + item.code+ ')'"
|
||||
:value="item.code"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('map.counterType')" prop="type">
|
||||
<el-select v-model="addModel.type" filterable :placeholder="$t('map.pleaseSelect')">
|
||||
<el-option
|
||||
v-for="item in typeList"
|
||||
:key="item.code"
|
||||
:label="item.name"
|
||||
:value="item.code"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-scrollbar>
|
||||
</div>
|
||||
<div class="button_box">
|
||||
<el-button-group class="map-draft-group">
|
||||
<el-button type="primary" size="small" @click="create">{{ $t('map.create') }}</el-button>
|
||||
</el-button-group>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapGetters } from 'vuex';
|
||||
import { getUID } from '@/jmap/utils/Uid';
|
||||
import ConfigList from './config/list';
|
||||
import { deepAssign } from '@/utils/index';
|
||||
|
||||
export default {
|
||||
name: 'CounterDraft',
|
||||
components: {
|
||||
ConfigList
|
||||
},
|
||||
props: {
|
||||
selected: {
|
||||
type: Object,
|
||||
default: function () {
|
||||
return null;
|
||||
}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
activeName: 'first',
|
||||
typeList: [
|
||||
{ code: '01', name: this.$t('map.areaSolution') },
|
||||
{ code: '02', name: this.$t('map.alwaysSolution') }
|
||||
],
|
||||
editModel: {
|
||||
code: '',
|
||||
name: '',
|
||||
type: '',
|
||||
max: 0,
|
||||
val: 0,
|
||||
stationCode: '',
|
||||
position: {
|
||||
x: 0,
|
||||
y: 0
|
||||
}
|
||||
},
|
||||
addModel: {
|
||||
type: '',
|
||||
stationCode: ''
|
||||
}
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapGetters('map', [
|
||||
'counterList',
|
||||
'stationList',
|
||||
'lineCode'
|
||||
]),
|
||||
createRules: function () {
|
||||
return {
|
||||
type: [
|
||||
{ required: true, message: this.$t('map.selectCounterType'), trigger: 'change' }
|
||||
],
|
||||
stationCode: [
|
||||
{ required: true, message: this.$t('map.selectStation'), trigger: 'change' }
|
||||
]
|
||||
};
|
||||
},
|
||||
rules: function () {
|
||||
return {
|
||||
code: [
|
||||
{ required: true, message: this.$t('map.pleaseSelectDevice'), trigger: 'change' }
|
||||
],
|
||||
stationCode: [
|
||||
{ required: true, message: this.$t('map.selectStation'), trigger: 'change' }
|
||||
],
|
||||
name: [
|
||||
{ required: true, message: this.$t('map.pleaseSelectCountName'), trigger: 'change' }
|
||||
],
|
||||
type: [
|
||||
{ required: true, message: this.$t('map.selectCounterType'), trigger: 'change' }
|
||||
],
|
||||
max: [
|
||||
{ required: true, message: this.$t('map.pleaseCounterValue'), trigger: 'change' }
|
||||
],
|
||||
'position.x': [
|
||||
{ required: true, message: this.$t('map.pleaseEnterXCoordinate'), trigger: 'change' }
|
||||
],
|
||||
'position.y': [
|
||||
{ required: true, message: this.$t('map.pleaseEnterYCoordinate'), trigger: 'change' }
|
||||
]
|
||||
};
|
||||
},
|
||||
form() {
|
||||
const form = {
|
||||
labelWidth: '120px',
|
||||
items: {
|
||||
code: {
|
||||
name: '',
|
||||
item: []
|
||||
},
|
||||
draw: {
|
||||
name: this.$t('map.drawData'),
|
||||
item: [
|
||||
{ prop: 'code', label: this.$t('map.counterCoding'), type: 'select', optionLabel: 'code', optionValue: 'code', options: this.counterList, change: true, deviceChange: this.deviceChange },
|
||||
{ prop: 'name', label: this.$t('map.counterName'), type: 'input' },
|
||||
{ prop: 'type', label: this.$t('map.counterType'), type: 'select', optionLabel: 'name', optionValue: 'code', options: this.typeList },
|
||||
{ prop: 'max', label: this.$t('map.countMax'), type: 'number', min: 0, placeholder: this.$t('map.piece') },
|
||||
{ prop: 'position', label: this.$t('map.counterPosition'), type: 'coordinate', width: '110px', children: [
|
||||
{ prop: 'position.x', firstLevel: 'position', secondLevel: 'x', label: 'x:', type: 'number', labelWidth: '25px' },
|
||||
{ prop: 'position.y', firstLevel: 'position', secondLevel: 'y', label: 'y:', type: 'number', labelWidth: '25px' }
|
||||
] }
|
||||
]
|
||||
},
|
||||
map: {
|
||||
name: this.$t('map.mapData'),
|
||||
item: [
|
||||
{ prop: 'stationCode', label: this.$t('map.belongsStation'), type: 'select', optionLabel: 'name&&code', optionValue: 'code', options: this.stationList }
|
||||
]
|
||||
}
|
||||
}
|
||||
};
|
||||
return form;
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
selected: function (val, oldVal) {
|
||||
this.deviceSelect(val);
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
},
|
||||
methods: {
|
||||
deviceChange(code) {
|
||||
this.deviceSelect(this.$store.getters['map/getDeviceByCode'](code));
|
||||
},
|
||||
deviceSelect(selected) {
|
||||
this.$refs.form.resetFields();
|
||||
this.$refs.make.resetFields();
|
||||
if (selected && selected._type.toUpperCase() === 'Counter'.toUpperCase()) {
|
||||
this.activeName = 'first';
|
||||
this.editModel = deepAssign(this.editModel, selected);
|
||||
} else if (selected && selected._type.toUpperCase() === 'Station'.toUpperCase()) {
|
||||
this.addModel.stationCode = selected.code;
|
||||
}
|
||||
},
|
||||
create() {
|
||||
this.$refs.make.validate((valid) => {
|
||||
if (valid) {
|
||||
const uid = getUID('Counter');
|
||||
const model = {
|
||||
_type: 'Counter',
|
||||
code: uid,
|
||||
type: this.addModel.type,
|
||||
max: 0,
|
||||
val: 0
|
||||
};
|
||||
this.typeList.forEach(elem => {
|
||||
if (elem.code === this.addModel.type) {
|
||||
model.name = elem.name;
|
||||
}
|
||||
});
|
||||
this.stationList.forEach(elem => {
|
||||
if (elem.code === this.addModel.stationCode) {
|
||||
model.position = { x: elem.position.x, y: elem.position.y };
|
||||
model.stationCode = elem.code;
|
||||
}
|
||||
});
|
||||
|
||||
this.$emit('updateMapModel', model);
|
||||
}
|
||||
});
|
||||
},
|
||||
// 修改对象
|
||||
edit() {
|
||||
this.$refs.form.validate((valid) => {
|
||||
if (valid) {
|
||||
const data = Object.assign({_type: 'Counter'}, this.editModel);
|
||||
this.$emit('updateMapModel', data);
|
||||
}
|
||||
});
|
||||
},
|
||||
// 删除对象
|
||||
deleteObj() {
|
||||
const selected = this.$store.getters['map/getDeviceByCode'](this.editModel.code);
|
||||
if (selected && selected._type.toUpperCase() === 'Counter'.toUpperCase()) {
|
||||
const _that = this;
|
||||
this.$confirm(this.$t('tip.confirmDeletion'), this.$t('tip.hint'), {
|
||||
confirmButtonText: this.$t('map.confirm'),
|
||||
cancelButtonText: this.$t('map.cancel'),
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
_that.$emit('updateMapModel', {...selected, _dispose: true});
|
||||
_that.deviceSelect();
|
||||
}).catch(() => {
|
||||
_that.$message.info(this.$t('tip.cancelledDelete'));
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style rel="stylesheet/scss" lang="scss" scoped>
|
||||
@import "src/styles/mixin.scss";
|
||||
.view-control{
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.card {
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
@ -1,237 +0,0 @@
|
||||
<template>
|
||||
<el-tabs v-model="activeName" class="card">
|
||||
<el-tab-pane class="view-control" :label="$t('map.property')" name="first">
|
||||
<div style="height: calc(100% - 46px);">
|
||||
<el-scrollbar wrap-class="scrollbar-wrapper">
|
||||
<config-list ref="form" :form="form" :form-model="editModel" :rules="editRules" />
|
||||
</el-scrollbar>
|
||||
</div>
|
||||
<div class="button_box">
|
||||
<el-button-group class="map-draft-group">
|
||||
<el-button type="primary" size="small" @click="edit">{{ $t('map.updateObj') }}</el-button>
|
||||
<el-button type="danger" size="small" @click="deleteObj">{{ $t('map.deleteObj') }}</el-button>
|
||||
</el-button-group>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane class="view-control" :label="$t('map.newConstruction')" name="second">
|
||||
<div style="height: calc(100% - 46px);">
|
||||
<el-scrollbar wrap-class="scrollbar-wrapper">
|
||||
<el-form ref="make" label-width="120px" :rules="createRules" :model="addModel" size="mini">
|
||||
<el-form-item :label="$t('map.stationName')" prop="stationCode">
|
||||
<el-select v-model="addModel.stationCode" filterable>
|
||||
<el-option
|
||||
v-for="item in stationList"
|
||||
:key="item.code"
|
||||
:label="item.name + ' (' + item.code+ ')'"
|
||||
:value="item.code"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-scrollbar>
|
||||
</div>
|
||||
<div class="button_box">
|
||||
<el-button-group class="map-draft-group">
|
||||
<el-button type="primary" size="small" @click="create">{{ $t('map.create') }}</el-button>
|
||||
</el-button-group>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapGetters } from 'vuex';
|
||||
import { getUID } from '@/jmap/utils/Uid';
|
||||
import ConfigList from './config/list';
|
||||
import { deepAssign } from '@/utils/index';
|
||||
|
||||
export default {
|
||||
name: 'DelayUnlockDraft',
|
||||
components: {
|
||||
ConfigList
|
||||
},
|
||||
props: {
|
||||
selected: {
|
||||
type: Object,
|
||||
default: function () {
|
||||
return null;
|
||||
}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
activeName: 'first',
|
||||
skins: [],
|
||||
editModel: {
|
||||
code: '',
|
||||
unlockTime: 0,
|
||||
stationCode: '',
|
||||
fontColor: '#FFFFFF',
|
||||
font: '',
|
||||
position: {
|
||||
x: 0,
|
||||
y: 0
|
||||
}
|
||||
},
|
||||
addModel: {
|
||||
stationCode: ''
|
||||
}
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapGetters('map', [
|
||||
'delayShowList',
|
||||
'stationList',
|
||||
'lineCode'
|
||||
]),
|
||||
createRules: function () {
|
||||
return {
|
||||
stationCode: [
|
||||
{ required: true, message: this.$t('map.selectStation'), trigger: 'change' }
|
||||
]
|
||||
};
|
||||
},
|
||||
editRules: function () {
|
||||
return {
|
||||
code: [
|
||||
{ required: true, message: this.$t('map.pleaseSelectDevice'), trigger: 'change' }
|
||||
],
|
||||
stationCode: [
|
||||
{ required: true, message: this.$t('map.selectStation'), trigger: 'change' }
|
||||
],
|
||||
unlockTime: [
|
||||
{ required: true, message: this.$t('map.pleaseEnterDelayTime'), trigger: 'change' }
|
||||
],
|
||||
fontColor: [
|
||||
{ required: true, message: this.$t('map.pleaseEnterFontColor'), trigger: 'change' }
|
||||
],
|
||||
font: [
|
||||
{ required: true, message: this.$t('map.pleaseEnterFontFormat'), trigger: 'change' }
|
||||
],
|
||||
'position.x': [
|
||||
{ required: true, message: this.$t('map.pleaseEnterXCoordinate'), trigger: 'change' }
|
||||
],
|
||||
'position.y': [
|
||||
{ required: true, message: this.$t('map.pleaseEnterYCoordinate'), trigger: 'change' }
|
||||
]
|
||||
};
|
||||
},
|
||||
form() {
|
||||
const form = {
|
||||
labelWidth: '120px',
|
||||
items: {
|
||||
code: {
|
||||
name: '',
|
||||
item: []
|
||||
},
|
||||
draw: {
|
||||
name: this.$t('map.drawData'),
|
||||
item: [
|
||||
{ prop: 'code', label: this.$t('map.delayUnlockingCode'), type: 'select', optionLabel: 'code', optionValue: 'code', options: this.delayShowList, change: true, deviceChange: this.deviceChange },
|
||||
{ prop: 'unlockTime', label: this.$t('map.delayTime'), type: 'number', min: 0, max: 1000, placeholder: 's' },
|
||||
{ prop: 'font', label: this.$t('map.font'), type: 'font' },
|
||||
{ prop: 'fontColor', label: this.$t('map.color'), type: 'color' },
|
||||
{ prop: 'position', label: this.$t('map.delayUnlockPosition'), type: 'coordinate', width: '110px', children: [
|
||||
{ prop: 'position.x', firstLevel: 'position', secondLevel: 'x', label: 'x:', type: 'number', labelWidth: '25px' },
|
||||
{ prop: 'position.y', firstLevel: 'position', secondLevel: 'y', label: 'y:', type: 'number', labelWidth: '25px' }
|
||||
] }
|
||||
]
|
||||
},
|
||||
map: {
|
||||
name: this.$t('map.mapData'),
|
||||
item: [
|
||||
{ prop: 'stationCode', label: this.$t('map.belongsStation'), type: 'select', optionLabel: 'name&&code', optionValue: 'code', options: this.stationList }
|
||||
]
|
||||
}
|
||||
}
|
||||
};
|
||||
return form;
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
selected: function (val, oldVal) {
|
||||
this.deviceSelect(val);
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
},
|
||||
methods: {
|
||||
deviceChange(code) {
|
||||
this.deviceSelect(this.$store.getters['map/getDeviceByCode'](code));
|
||||
},
|
||||
deviceSelect(selected) {
|
||||
this.$nextTick(() => {
|
||||
this.$refs.form.resetFields();
|
||||
this.$refs.make.resetFields();
|
||||
if (selected && selected._type.toUpperCase() === 'DelayUnlock'.toUpperCase()) {
|
||||
this.activeName = 'first';
|
||||
this.editModel = deepAssign(this.editModel, selected);
|
||||
} else if (selected && selected._type.toUpperCase() === 'Station'.toUpperCase()) {
|
||||
this.addModel.stationCode = selected.code;
|
||||
}
|
||||
|
||||
this.$refs.form.clearValidate();
|
||||
});
|
||||
},
|
||||
create() {
|
||||
this.$refs.make.validate((valid) => {
|
||||
if (valid) {
|
||||
const uid = getUID('DelayUnlock');
|
||||
const model = {
|
||||
_type: 'DelayUnlock',
|
||||
font: '12px consolas',
|
||||
fontColor: '#FFFFFF',
|
||||
unlockTime: 10,
|
||||
code: uid,
|
||||
delayName: 'Test',
|
||||
status: '00'
|
||||
};
|
||||
this.stationList.forEach(elem => {
|
||||
if (elem.code === this.addModel.stationCode) {
|
||||
model.position = { x: elem.position.x, y: elem.position.y };
|
||||
model.stationCode = elem.code;
|
||||
}
|
||||
});
|
||||
this.$emit('updateMapModel', model);
|
||||
}
|
||||
});
|
||||
},
|
||||
// 修改对象
|
||||
edit() {
|
||||
this.$refs.form.validate((valid) => {
|
||||
if (valid) {
|
||||
const data = Object.assign({_type: 'DelayUnlock', status: '00'}, this.editModel);
|
||||
this.$emit('updateMapModel', data);
|
||||
}
|
||||
});
|
||||
},
|
||||
// 删除对象
|
||||
deleteObj() {
|
||||
const selected = this.$store.getters['map/getDeviceByCode'](this.editModel.code);
|
||||
if (selected && selected._type.toUpperCase() === 'DelayUnlock'.toUpperCase()) {
|
||||
const _that = this;
|
||||
this.$confirm(this.$t('tip.confirmDeletion'), this.$t('tip.hint'), {
|
||||
confirmButtonText: this.$t('map.confirm'),
|
||||
cancelButtonText: this.$t('map.cancel'),
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
_that.$emit('updateMapModel', {...selected, _dispose: true});
|
||||
_that.deviceSelect();
|
||||
}).catch(() => {
|
||||
_that.$message.info(this.$t('tip.cancelledDelete'));
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style rel="stylesheet/scss" lang="scss" scoped>
|
||||
@import "src/styles/mixin.scss";
|
||||
.view-control{
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.card {
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
@ -1,453 +0,0 @@
|
||||
<template>
|
||||
<transition name="el-zoom-in-center">
|
||||
<div class="map-control">
|
||||
<div class="border-card">
|
||||
<div class="clearfix">
|
||||
<span>
|
||||
{{ $t('map.mapName') }}
|
||||
<b>{{ mapInfo.name }}</b>
|
||||
</span>
|
||||
<el-button v-if="isSave" type="text" style="float: right; padding: 3px 0" :disabled="mapSaveing" @click="saveMapEvent">{{ $t('map.save') }}</el-button>
|
||||
<el-button v-if="isSave" type="text" style="float: right; padding: 3px 0; margin-right: 5px;" :disabled="mapSaveing" @click="verifyMapEvent">{{ $t('map.dataVerification') }}</el-button>
|
||||
<el-button type="text" style="float: right; padding: 3px 0; margin-right: 5px;" @click="dataRelation">{{ $t('map.advanced') }}</el-button>
|
||||
<el-button type="text" style="float: right; padding: 3px 0; margin-right: 5px;" @click="showMap">{{ $t('map.viewLayer') }}</el-button>
|
||||
</div>
|
||||
<el-tabs v-model="enabledTab" class="mapEdit" type="card">
|
||||
<el-tab-pane :label="$t('map.link')" class="tab_pane_box" name="Link">
|
||||
<link-draft
|
||||
ref="Link"
|
||||
:selected="selected"
|
||||
@updateMapModel="updateMapModel"
|
||||
@setCenter="setCenter"
|
||||
/>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane :label="$t('map.section')" class="tab_pane_box" name="Section">
|
||||
<section-draft
|
||||
ref="Section"
|
||||
:selected="selected"
|
||||
@updateMapModel="updateMapModel"
|
||||
@setCenter="setCenter"
|
||||
@fieldSelect="fieldSelect"
|
||||
/>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane :label="$t('map.switch')" class="tab_pane_box" name="Switch">
|
||||
<switch-draft
|
||||
ref="Switch"
|
||||
:selected="selected"
|
||||
@updateMapModel="updateMapModel"
|
||||
@setCenter="setCenter"
|
||||
/>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane :label="$t('map.station')" class="tab_pane_box" name="Station">
|
||||
<station-draft
|
||||
ref="Station"
|
||||
:selected="selected"
|
||||
@updateMapModel="updateMapModel"
|
||||
@setCenter="setCenter"
|
||||
@stationSectionCode="stationEnabledTab"
|
||||
/>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane :label="$t('map.controlMode')" class="tab_pane_box" name="StationControl">
|
||||
<station-control-draft
|
||||
ref="StationControl"
|
||||
:selected="selected"
|
||||
@updateMapModel="updateMapModel"
|
||||
@setCenter="setCenter"
|
||||
/>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane :label="$t('map.signal')" class="tab_pane_box" name="Signal">
|
||||
<signal-draft
|
||||
ref="Signal"
|
||||
:selected="selected"
|
||||
@updateMapModel="updateMapModel"
|
||||
@setCenter="setCenter"
|
||||
@signalSectionCode="selectEnabledTab"
|
||||
/>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane :label="$t('map.platform')" class="tab_pane_box" name="StationStand">
|
||||
<station-stand-draft
|
||||
ref="StationStand"
|
||||
:selected="selected"
|
||||
@updateMapModel="updateMapModel"
|
||||
@setCenter="setCenter"
|
||||
/>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane :label="$t('map.zcZoneControl')" class="tab_pane_box" name="ZcControl">
|
||||
<zc-control-draft
|
||||
ref="ZcControl"
|
||||
:selected="selected"
|
||||
@updateMapModel="updateMapModel"
|
||||
@setCenter="setCenter"
|
||||
/>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane :label="$t('map.temporaryLimit')" class="tab_pane_box" name="LimitControl">
|
||||
<limit-control-draft
|
||||
ref="LimitControl"
|
||||
:selected="selected"
|
||||
@updateMapModel="updateMapModel"
|
||||
@setCenter="setCenter"
|
||||
/>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane :label="$t('map.lcControl')" class="tab_pane_box" name="LcControl">
|
||||
<lc-control-draft
|
||||
ref="LcControl"
|
||||
:selected="selected"
|
||||
@updateMapModel="updateMapModel"
|
||||
@setCenter="setCenter"
|
||||
/>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane :label="$t('map.counter')" class="tab_pane_box" name="Counter">
|
||||
<counter-draft
|
||||
ref="Counter"
|
||||
:selected="selected"
|
||||
@updateMapModel="updateMapModel"
|
||||
@setCenter="setCenter"
|
||||
/>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane :label="$t('map.delayUnlock')" class="tab_pane_box" name="DelayUnlock">
|
||||
<delay-unlock-draft
|
||||
ref="DelayUnlock"
|
||||
:selected="selected"
|
||||
@updateMapModel="updateMapModel"
|
||||
@setCenter="setCenter"
|
||||
/>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane :label="$t('map.train')" class="tab_pane_box" name="Train">
|
||||
<train-draft
|
||||
ref="Train"
|
||||
:selected="selected"
|
||||
@updateMapModel="updateMapModel"
|
||||
@setCenter="setCenter"
|
||||
/>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane :label="$t('map.trainWindow')" class="tab_pane_box" name="TrainWindow">
|
||||
<train-window-draft
|
||||
ref="TrainWindow"
|
||||
:selected="selected"
|
||||
@updateMapModel="updateMapModel"
|
||||
@setCenter="setCenter"
|
||||
/>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane :label="$t('map.line')" class="tab_pane_box" name="Line">
|
||||
<line-draft
|
||||
ref="Line"
|
||||
:selected="selected"
|
||||
@updateMapModel="updateMapModel"
|
||||
@setCenter="setCenter"
|
||||
/>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane :label="$t('map.text')" class="tab_pane_box" name="Text">
|
||||
<text-draft
|
||||
ref="Text"
|
||||
:selected="selected"
|
||||
@updateMapModel="updateMapModel"
|
||||
@setCenter="setCenter"
|
||||
/>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane :label="$t('map.image')" class="tab_pane_box" name="ImageControl">
|
||||
<Image-control-draft
|
||||
ref="ImageControl"
|
||||
:selected="selected"
|
||||
@updateMapModel="updateMapModel"
|
||||
@setCenter="setCenter"
|
||||
/>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane :label="$t('map.button')" class="tab_pane_box" name="ButtonControl">
|
||||
<button-draft
|
||||
ref="ButtonControl"
|
||||
:selected="selected"
|
||||
@updateMapModel="updateMapModel"
|
||||
@setCenter="setCenter"
|
||||
/>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="包围框" class="tab_pane_box" name="CheckBox">
|
||||
<checkbox-draft
|
||||
ref="CheckBox"
|
||||
:selected="selected"
|
||||
@updateMapModel="updateMapModel"
|
||||
@setCenter="setCenter"
|
||||
/>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</div>
|
||||
</div>
|
||||
</transition>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import LinkDraft from './link';
|
||||
import SectionDraft from './section';
|
||||
import SwitchDraft from './switch';
|
||||
import SignalDraft from './signal';
|
||||
import StationDraft from './station';
|
||||
import StationStandDraft from './stationstand';
|
||||
import StationControlDraft from './stationcontrol';
|
||||
import CounterDraft from './counter';
|
||||
import DelayUnlockDraft from './delayunlock';
|
||||
import TrainDraft from './train/index';
|
||||
import LineDraft from './line';
|
||||
import TextDraft from './text';
|
||||
import TrainWindowDraft from './trainwindow';
|
||||
import ZcControlDraft from './zcControl';
|
||||
import LimitControlDraft from './limitControl';
|
||||
import LcControlDraft from './lcControl';
|
||||
import ImageControlDraft from './ImageControl';
|
||||
import ButtonDraft from './buttonDraft';
|
||||
import CheckboxDraft from './checkboxDraft';
|
||||
|
||||
import { ViewMode } from '@/scripts/ConstDic';
|
||||
|
||||
export default {
|
||||
name: 'MapOperate',
|
||||
components: {
|
||||
CounterDraft,
|
||||
LinkDraft,
|
||||
SectionDraft,
|
||||
SwitchDraft,
|
||||
SignalDraft,
|
||||
StationDraft,
|
||||
StationStandDraft,
|
||||
StationControlDraft,
|
||||
DelayUnlockDraft,
|
||||
TrainWindowDraft,
|
||||
TrainDraft,
|
||||
LineDraft,
|
||||
TextDraft,
|
||||
ZcControlDraft,
|
||||
LimitControlDraft,
|
||||
LcControlDraft,
|
||||
ImageControlDraft,
|
||||
ButtonDraft,
|
||||
CheckboxDraft
|
||||
},
|
||||
props: {
|
||||
selected: {
|
||||
type: Object,
|
||||
default: function () {
|
||||
return null;
|
||||
}
|
||||
},
|
||||
mapInfo: {
|
||||
type: Object,
|
||||
default: function() { return {name: this.$t('map.pleaseSelectMap')}; }
|
||||
},
|
||||
mapSaveing: [Boolean]
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
feild: '',
|
||||
singlaType: '',
|
||||
stationType: '',
|
||||
ViewMode: ViewMode,
|
||||
LogicalViewTypeList: [
|
||||
{ code: 'Link', name: this.$t('map.link') }
|
||||
],
|
||||
PhysicalViewTypeList: [
|
||||
{ code: 'Section', name: this.$t('map.section') },
|
||||
{ code: 'Signal', name: this.$t('map.signal') },
|
||||
{ code: 'Switch', name: this.$t('map.switch') }
|
||||
],
|
||||
logicalLevelsSelect: [],
|
||||
physicalLevelsSelect: [],
|
||||
enabledTab: 'Link',
|
||||
autoSaveTask: null,
|
||||
show: {
|
||||
mapEditShow: false,
|
||||
mapPaintShow: true
|
||||
}
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
isSave() {
|
||||
return this.mapInfo && this.mapInfo.id;
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.initPage();
|
||||
},
|
||||
methods: {
|
||||
dataRelation() {
|
||||
this.$emit('selectView', 'path');
|
||||
},
|
||||
showMap() {
|
||||
this.$emit('showMap');
|
||||
},
|
||||
initPage() {
|
||||
this.$Dictionary.logicalViewType().then(list => {
|
||||
this.LogicalViewTypeList = list;
|
||||
this.LogicalViewTypeList.forEach(elem => {
|
||||
this.logicalLevelsSelect.push(elem.code);
|
||||
});
|
||||
});
|
||||
this.$Dictionary.physicalViewType().then(list => {
|
||||
this.PhysicalViewTypeList = list;
|
||||
this.PhysicalViewTypeList.forEach(elem => {
|
||||
this.physicalLevelsSelect.push(elem.code);
|
||||
});
|
||||
});
|
||||
},
|
||||
handleSelectControlPage(device) {
|
||||
const type = device._type;
|
||||
if (this.stationType) {
|
||||
this.enabledTab = 'Station';
|
||||
} else if (this.singlaType) {
|
||||
this.enabledTab = 'Signal';
|
||||
} else if (this.feild) {
|
||||
this.enabledTab = 'Section';
|
||||
} else {
|
||||
this.enabledTab = type;
|
||||
}
|
||||
},
|
||||
stationEnabledTab(type) {
|
||||
this.stationType = type;
|
||||
},
|
||||
selectEnabledTab(type) {
|
||||
this.singlaType = type;
|
||||
},
|
||||
fieldSelect(type) {
|
||||
this.feild = type;
|
||||
},
|
||||
handleSelectLogicalView(handle) {
|
||||
this.$emit('handleSelectLogicalView', handle);
|
||||
},
|
||||
handleSelectPhysicalView(handle) {
|
||||
this.$emit('handleSelectPhysicalView', handle);
|
||||
},
|
||||
saveMapEvent() {
|
||||
this.$emit('saveMapEvent');
|
||||
},
|
||||
verifyMapEvent() {
|
||||
this.$emit('verifyMapEvent');
|
||||
},
|
||||
updateMapModel(obj) {
|
||||
this.$emit('updateMapModel', obj);
|
||||
},
|
||||
setCenter(code) {
|
||||
this.$emit('setCenter', code);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style rel="stylesheet/scss" lang="scss" scoped>
|
||||
@import "src/styles/mixin.scss";
|
||||
|
||||
.map-context {
|
||||
display: block;
|
||||
float: left;
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
.map-control {
|
||||
float: right;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
.border-card{
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.physical-view {
|
||||
line-height: 25px;
|
||||
height: 118px;
|
||||
padding-left: 12px;
|
||||
|
||||
.el-checkbox {
|
||||
width: 70px;
|
||||
margin: 0;
|
||||
margin-right: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
.clearfix{
|
||||
height: 47px;
|
||||
padding: 15px
|
||||
}
|
||||
.mapEdit{
|
||||
height: calc(100% - 47px);
|
||||
.tab_pane_box{
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
/deep/ .button_box{
|
||||
width: 100%;
|
||||
background: #ffffff;
|
||||
overflow: hidden;
|
||||
border-top: 1px #f3f1f1 solid;
|
||||
box-shadow: 4px 7px 10px #565656;
|
||||
border-radius: 0;
|
||||
border-bottom: 1px transparent solid;
|
||||
}
|
||||
|
||||
/deep/ .map-draft-group {
|
||||
float: right;
|
||||
margin: 6px 5px;
|
||||
}
|
||||
|
||||
/deep/ .view-control {
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
/deep/ {
|
||||
.mapEdit .el-tabs__nav-wrap.is-scrollable {
|
||||
padding: 0 20px;
|
||||
}
|
||||
.mapEdit .el-tabs__header .el-tabs__item.is-active {
|
||||
border-bottom-color: #f5f7fa;
|
||||
background: #f5f7fa;
|
||||
}
|
||||
.mapEdit .el-tabs__active-bar{
|
||||
background: transparent;
|
||||
}
|
||||
.mapEdit .el-tabs__content {
|
||||
height: calc(100% - 56px);
|
||||
}
|
||||
|
||||
.card .el-tabs__nav .el-tabs__item.is-active {
|
||||
border-bottom: 2px solid #E4E7ED;
|
||||
background: #409eff;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.mapEdit .el-tabs__nav-prev {
|
||||
width: 20px;
|
||||
height: 41px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
box-shadow: 1px 1px 4px #ccc;
|
||||
}
|
||||
|
||||
.mapEdit .el-tabs__nav-next {
|
||||
width: 20px;
|
||||
height: 41px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
box-shadow: 1px 1px 4px #ccc;
|
||||
}
|
||||
}
|
||||
|
||||
// 页面页签样式
|
||||
/deep/ {
|
||||
.card .el-transfer-panel__filter{
|
||||
margin: 5px 15px;
|
||||
}
|
||||
.card .el-transfer-panel__list.is-filterable{
|
||||
height: 290px;
|
||||
}
|
||||
|
||||
.card .el-transfer-panel__body{
|
||||
height: 328px;
|
||||
}
|
||||
.card .el-transfer__buttons{
|
||||
padding: 0 16px;
|
||||
}
|
||||
|
||||
.card .el-transfer{
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,255 +0,0 @@
|
||||
<template>
|
||||
<el-tabs v-model="activeName" class="card">
|
||||
<el-tab-pane class="view-control" :label="$t('map.property')" name="first">
|
||||
<div style="height: calc(100% - 46px);">
|
||||
<el-scrollbar wrap-class="scrollbar-wrapper">
|
||||
<config-list ref="form" :form="form" :form-model="editModel" :rules="rules" />
|
||||
</el-scrollbar>
|
||||
</div>
|
||||
<div class="button_box">
|
||||
<el-button-group class="map-draft-group">
|
||||
<el-button type="primary" size="small" @click="edit">{{ $t('map.updateObj') }}</el-button>
|
||||
<el-button type="danger" size="small" @click="deleteObj">{{ $t('map.deleteObj') }}</el-button>
|
||||
</el-button-group>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane class="view-control" :label="$t('map.newConstruction')" name="second">
|
||||
<div style="height: calc(100% - 46px);">
|
||||
<el-scrollbar wrap-class="scrollbar-wrapper">
|
||||
<el-form ref="make" label-width="150px" :rules="createRules" :model="addModel" size="mini">
|
||||
<el-form-item :label="$t('map.statusSignalName')" prop="name">
|
||||
<el-input v-model="addModel.name" />
|
||||
</el-form-item>
|
||||
<div class="coordinate">
|
||||
<span class="title">{{ $t('map.stateSignalsPlotCoordinates') }}</span>
|
||||
<el-form-item
|
||||
label="x:"
|
||||
prop="position.x"
|
||||
style="display: table; float: left; margin-right: 20px;"
|
||||
label-width="20px"
|
||||
>
|
||||
<el-input-number v-model="addModel.position.x" />
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
label="y:"
|
||||
prop="position.y"
|
||||
style="display: table; float: left;"
|
||||
label-width="20px"
|
||||
>
|
||||
<el-input-number v-model="addModel.position.y" />
|
||||
</el-form-item>
|
||||
</div>
|
||||
</el-form>
|
||||
</el-scrollbar>
|
||||
</div>
|
||||
<div class="button_box">
|
||||
<el-button-group class="map-draft-group">
|
||||
<el-button type="primary" size="small" @click="create">{{ $t('map.create') }}</el-button>
|
||||
</el-button-group>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapGetters } from 'vuex';
|
||||
import { getUID } from '@/jmap/utils/Uid';
|
||||
import ConfigList from './config/list';
|
||||
import { deepAssign } from '@/utils/index';
|
||||
|
||||
export default {
|
||||
name: 'LcControlDraft',
|
||||
components: {
|
||||
ConfigList
|
||||
},
|
||||
props: {
|
||||
selected: {
|
||||
type: Object,
|
||||
default: function () {
|
||||
return null;
|
||||
}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
activeName: 'first',
|
||||
mapData: null,
|
||||
editModel: {
|
||||
code: '',
|
||||
name: '',
|
||||
position: {
|
||||
x: 0,
|
||||
y: 0
|
||||
}
|
||||
},
|
||||
addModel: {
|
||||
code: '',
|
||||
name: '',
|
||||
position: {
|
||||
x: 0,
|
||||
y: 0
|
||||
}
|
||||
},
|
||||
rules: {
|
||||
code: [
|
||||
{ required: true, message: this.$t('rules.pleaseSelectEncoding'), trigger: 'change' }
|
||||
],
|
||||
name: [
|
||||
{ required: true, message: this.$t('rules.pleaseEnterStatusSignal'), trigger: 'blur' }
|
||||
],
|
||||
'position.x': [
|
||||
{ required: true, message: this.$t('map.pleaseEnterXCoordinate'), trigger: 'blur' }
|
||||
],
|
||||
'position.y': [
|
||||
{ required: true, message: this.$t('map.pleaseEnterYCoordinate'), trigger: 'blur' }
|
||||
]
|
||||
}
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapGetters('map', [
|
||||
'sectionList',
|
||||
'trainModelList',
|
||||
'lcList',
|
||||
'lineCode'
|
||||
]),
|
||||
createRules: function () {
|
||||
return {
|
||||
name: [
|
||||
{ required: true, message: this.$t('rules.pleaseEnterStatusSignal'), trigger: 'blur' }
|
||||
],
|
||||
'position.x': [
|
||||
{ required: true, message: this.$t('map.pleaseEnterXCoordinate'), trigger: 'blur' }
|
||||
],
|
||||
'position.y': [
|
||||
{ required: true, message: this.$t('map.pleaseEnterYCoordinate'), trigger: 'blur' }
|
||||
]
|
||||
};
|
||||
},
|
||||
form() {
|
||||
const form = {
|
||||
labelWidth: '150px',
|
||||
items: {
|
||||
code: {
|
||||
name: '',
|
||||
item: []
|
||||
},
|
||||
draw: {
|
||||
name: this.$t('map.drawData'),
|
||||
item: [
|
||||
{ prop: 'code', label: `${this.$t('map.lcControl')}${this.$t('map.code')}`, type: 'select', optionLabel: 'name&&code', optionValue: 'code', options: this.lcList, change: true, deviceChange: this.deviceChange },
|
||||
{ prop: 'name', label: this.$t('map.statusSignalName'), type: 'input' },
|
||||
{ prop: 'position', label: this.$t('map.stateSignalsPlotCoordinates'), type: 'coordinate', width: '150px', children: [
|
||||
{ prop: 'position.x', firstLevel: 'position', secondLevel: 'x', label: 'x:', type: 'number', labelWidth: '20px', disabled: false },
|
||||
{ prop: 'position.y', firstLevel: 'position', secondLevel: 'y', label: 'y:', type: 'number', labelWidth: '20px', disabled: false }
|
||||
] }
|
||||
]
|
||||
},
|
||||
map: {
|
||||
name: this.$t('map.mapData'),
|
||||
item: [
|
||||
]
|
||||
}
|
||||
}
|
||||
};
|
||||
return form;
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
selected: function (val, oldVal) {
|
||||
this.deviceSelect(val);
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
},
|
||||
methods: {
|
||||
deviceChange(code) {
|
||||
this.$emit('setCenter', code);
|
||||
this.deviceSelect(this.$store.getters['map/getDeviceByCode'](code));
|
||||
},
|
||||
deviceSelect(selected) {
|
||||
this.$refs.form.resetFields();
|
||||
this.$refs.make.resetFields();
|
||||
if (selected && selected._type.toUpperCase() === 'LcControl'.toUpperCase()) {
|
||||
this.activeName = 'first';
|
||||
this.editModel = deepAssign(this.editModel, selected);
|
||||
}
|
||||
},
|
||||
create() {
|
||||
this.$refs.make.validate((valid) => {
|
||||
if (valid) {
|
||||
const uid = getUID('LcControl');
|
||||
const model = {
|
||||
_type: 'LcControl',
|
||||
code: uid,
|
||||
name: this.addModel.name,
|
||||
position: {
|
||||
x: this.addModel.position.x,
|
||||
y: this.addModel.position.y
|
||||
}
|
||||
};
|
||||
this.$emit('updateMapModel', model);
|
||||
}
|
||||
});
|
||||
},
|
||||
// 修改对象
|
||||
edit() {
|
||||
this.$refs['form'].validate((valid) => {
|
||||
if (valid) {
|
||||
const data = Object.assign({_type: 'LcControl'}, this.editModel);
|
||||
this.$emit('updateMapModel', data);
|
||||
}
|
||||
});
|
||||
},
|
||||
// 删除对象
|
||||
deleteObj() {
|
||||
const selected = this.$store.getters['map/getDeviceByCode'](this.editModel.code);
|
||||
if (selected && selected._type.toUpperCase() === 'LcControl'.toUpperCase()) {
|
||||
const _that = this;
|
||||
this.$confirm(this.$t('tip.confirmDeletion'), this.$t('tip.hint'), {
|
||||
confirmButtonText: this.$t('tip.confirm'),
|
||||
cancelButtonText: this.$t('tip.cancel'),
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
_that.$emit('updateMapModel', {...selected, _dispose: true});
|
||||
_that.deviceSelect();
|
||||
}).catch(() => {
|
||||
_that.$message.info(this.$t('tip.cancelledDelete'));
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style rel="stylesheet/scss" lang="scss" scoped>
|
||||
@import "src/styles/mixin.scss";
|
||||
.view-control{
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.card {
|
||||
height: 100%;
|
||||
}
|
||||
.coordinate {
|
||||
overflow: hidden;
|
||||
|
||||
.title {
|
||||
text-align: right;
|
||||
font-size: 14px;
|
||||
color: #606266;
|
||||
line-height: 40px;
|
||||
padding: 0 12px 0 0;
|
||||
-webkit-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
line-height: 28px;
|
||||
width: 160px;
|
||||
font-weight: bold;
|
||||
display: block;
|
||||
float: left;
|
||||
}
|
||||
}
|
||||
|
||||
.map-draft-group {
|
||||
color: #3E44BE;
|
||||
}
|
||||
</style>
|
||||
@ -1,246 +0,0 @@
|
||||
<template>
|
||||
<el-tabs v-model="activeName" class="card">
|
||||
<el-tab-pane class="view-control" :label="$t('map.property')" name="first">
|
||||
<div style="height: calc(100% - 46px);">
|
||||
<el-scrollbar wrap-class="scrollbar-wrapper">
|
||||
<config-list ref="form" :form="form" :form-model="editModel" :rules="rules" />
|
||||
</el-scrollbar>
|
||||
</div>
|
||||
<div class="button_box">
|
||||
<el-button-group class="map-draft-group">
|
||||
<el-button type="primary" size="small" @click="edit">{{ $t('map.updateObj') }}</el-button>
|
||||
<el-button type="danger" size="small" @click="deleteObj">{{ $t('map.deleteObj') }}</el-button>
|
||||
</el-button-group>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane class="view-control" :label="$t('map.newConstruction')" name="second">
|
||||
<div style="height: calc(100% - 46px);">
|
||||
<el-scrollbar wrap-class="scrollbar-wrapper">
|
||||
<config-data ref="make" :form="formMake" :form-model="addModel" :rules="createRules" />
|
||||
</el-scrollbar>
|
||||
</div>
|
||||
<div class="button_box">
|
||||
<el-button-group class="map-draft-group">
|
||||
<el-button type="primary" size="small" @click="create">{{ $t('map.create') }}</el-button>
|
||||
</el-button-group>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapGetters } from 'vuex';
|
||||
import { getUID } from '@/jmap/utils/Uid';
|
||||
import ConfigList from './config/list';
|
||||
import ConfigData from './config/data';
|
||||
import { deepAssign } from '@/utils/index';
|
||||
|
||||
export default {
|
||||
name: 'LimitControlDraft',
|
||||
components: {
|
||||
ConfigList,
|
||||
ConfigData
|
||||
},
|
||||
props: {
|
||||
selected: {
|
||||
type: Object,
|
||||
default: function () {
|
||||
return null;
|
||||
}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
activeName: 'first',
|
||||
mapData: null,
|
||||
editModel: {
|
||||
code: '',
|
||||
name: '',
|
||||
position: {
|
||||
x: 0,
|
||||
y: 0
|
||||
}
|
||||
},
|
||||
addModel: {
|
||||
code: '',
|
||||
name: '',
|
||||
position: {
|
||||
x: 0,
|
||||
y: 0
|
||||
}
|
||||
},
|
||||
rules: {
|
||||
code: [
|
||||
{ required: true, message: this.$t('rules.pleaseSelectEncoding'), trigger: 'change' }
|
||||
],
|
||||
name: [
|
||||
{ required: true, message: this.$t('rules.pleaseEnterStatusSignal'), trigger: 'blur' }
|
||||
],
|
||||
'position.x': [
|
||||
{ required: true, message: this.$t('rules.pleaseEnterXCoordinate'), trigger: 'blur' }
|
||||
],
|
||||
'position.y': [
|
||||
{ required: true, message: this.$t('rules.pleaseEnterYCoordinate'), trigger: 'blur' }
|
||||
]
|
||||
}
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapGetters('map', [
|
||||
'sectionList',
|
||||
'trainModelList',
|
||||
'tempSpeedLimitList',
|
||||
'lineCode'
|
||||
]),
|
||||
form() {
|
||||
const form = {
|
||||
labelWidth: '150px',
|
||||
items: {
|
||||
code: {
|
||||
name: '',
|
||||
item: []
|
||||
},
|
||||
draw: {
|
||||
name: this.$t('map.drawData'),
|
||||
item: [
|
||||
{ prop: 'code', label: `${this.$t('map.temporaryLimit')}${this.$t('map.code')}`, type: 'select', optionLabel: 'name&&code', optionValue: 'code', options: this.tempSpeedLimitList, change: true, deviceChange: this.deviceChange },
|
||||
{ prop: 'name', label: this.$t('map.statusSignalName'), type: 'input' },
|
||||
{ prop: 'position', label: this.$t('map.stateSignalsPlotCoordinates'), type: 'coordinate', width: '140px', children: [
|
||||
{ prop: 'position.x', firstLevel: 'position', secondLevel: 'x', label: 'x:', type: 'number', labelWidth: '20px' },
|
||||
{ prop: 'position.y', firstLevel: 'position', secondLevel: 'y', label: 'y:', type: 'number', labelWidth: '20px' }
|
||||
] }
|
||||
]
|
||||
},
|
||||
map: {
|
||||
name: this.$t('map.mapData'),
|
||||
item: []
|
||||
}
|
||||
}
|
||||
};
|
||||
return form;
|
||||
},
|
||||
formMake() {
|
||||
const form = {
|
||||
labelWidth: '150px',
|
||||
items: [
|
||||
{ prop: 'name', label: this.$t('map.statusSignalName'), type: 'input' },
|
||||
{ prop: 'position', label: this.$t('map.stateSignalsPlotCoordinates'), type: 'coordinate', width: '140px', children: [
|
||||
{ prop: 'position.x', firstLevel: 'position', secondLevel: 'x', label: 'x:', type: 'number', labelWidth: '20px' },
|
||||
{ prop: 'position.y', firstLevel: 'position', secondLevel: 'y', label: 'y:', type: 'number', labelWidth: '20px' }
|
||||
] }
|
||||
]
|
||||
};
|
||||
return form;
|
||||
},
|
||||
createRules: function () {
|
||||
return {
|
||||
name: [
|
||||
{ required: true, message: this.$t('rules.pleaseEnterStatusSignal'), trigger: 'blur' }
|
||||
],
|
||||
'position.x': [
|
||||
{ required: true, message: this.$t('rules.pleaseEnterXCoordinate'), trigger: 'blur' }
|
||||
],
|
||||
'position.y': [
|
||||
{ required: true, message: this.$t('rules.pleaseEnterYCoordinate'), trigger: 'blur' }
|
||||
]
|
||||
};
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
selected: function (val, oldVal) {
|
||||
this.deviceSelect(val);
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
},
|
||||
methods: {
|
||||
deviceChange(code) {
|
||||
this.$emit('setCenter', code);
|
||||
this.deviceSelect(this.$store.getters['map/getDeviceByCode'](code));
|
||||
},
|
||||
deviceSelect(selected) {
|
||||
this.$refs.form.resetFields();
|
||||
this.$refs.make.resetFields();
|
||||
if (selected && selected._type.toUpperCase() === 'LimitControl'.toUpperCase()) {
|
||||
this.activeName = 'first';
|
||||
this.editModel = deepAssign(this.editModel, selected);
|
||||
}
|
||||
},
|
||||
create() {
|
||||
this.$refs.make.validate((valid) => {
|
||||
if (valid) {
|
||||
const uid = getUID('LimitControl');
|
||||
const model = {
|
||||
_type: 'LimitControl',
|
||||
code: uid,
|
||||
name: this.addModel.name,
|
||||
position: {
|
||||
x: this.addModel.position.x,
|
||||
y: this.addModel.position.y
|
||||
}
|
||||
};
|
||||
this.$emit('updateMapModel', model);
|
||||
}
|
||||
});
|
||||
},
|
||||
// 修改对象
|
||||
edit() {
|
||||
this.$refs['form'].validate((valid) => {
|
||||
if (valid) {
|
||||
const data = Object.assign({_type: 'LimitControl'}, this.editModel);
|
||||
this.$emit('updateMapModel', data);
|
||||
}
|
||||
});
|
||||
},
|
||||
// 删除对象
|
||||
deleteObj() {
|
||||
const selected = this.$store.getters['map/getDeviceByCode'](this.editModel.code);
|
||||
if (selected && selected._type.toUpperCase() === 'LimitControl'.toUpperCase()) {
|
||||
const _that = this;
|
||||
this.$confirm(this.$t('tip.confirmDeletion'), this.$t('tip.hint'), {
|
||||
confirmButtonText: this.$t('tip.confirm'),
|
||||
cancelButtonText: this.$t('tip.cancel'),
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
_that.$emit('updateMapModel', {...selected, _dispose: true});
|
||||
_that.deviceSelect();
|
||||
}).catch(() => {
|
||||
_that.$message.info(this.$t('tip.cancelledDelete'));
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style rel="stylesheet/scss" lang="scss" scoped>
|
||||
@import "src/styles/mixin.scss";
|
||||
.view-control{
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.card {
|
||||
height: 100%;
|
||||
}
|
||||
.coordinate {
|
||||
overflow: hidden;
|
||||
|
||||
.title {
|
||||
text-align: right;
|
||||
font-size: 14px;
|
||||
color: #606266;
|
||||
line-height: 40px;
|
||||
padding: 0 12px 0 0;
|
||||
-webkit-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
line-height: 28px;
|
||||
width: 160px;
|
||||
font-weight: bold;
|
||||
display: block;
|
||||
float: left;
|
||||
}
|
||||
}
|
||||
|
||||
.map-draft-group {
|
||||
color: #3E44BE;
|
||||
}
|
||||
</style>
|
||||
@ -1,310 +0,0 @@
|
||||
<template>
|
||||
<el-tabs v-model="activeName" class="card">
|
||||
<el-tab-pane class="view-control" :label="$t('map.property')" name="first">
|
||||
<div style="height: calc(100% - 46px);">
|
||||
<el-scrollbar wrap-class="scrollbar-wrapper">
|
||||
<config-list ref="form" :form="form" :form-model="editModel" :rules="rules" />
|
||||
</el-scrollbar>
|
||||
</div>
|
||||
<el-button-group class="map-draft-group">
|
||||
<el-button type="primary" size="small" @click="edit">{{ $t('map.updateObj') }}</el-button>
|
||||
<el-button type="danger" size="small" @click="deleteObj">{{ $t('map.deleteObj') }}</el-button>
|
||||
</el-button-group>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane class="view-control" :label="$t('map.newConstruction')" name="second">
|
||||
<div style="height: calc(100% - 46px);">
|
||||
<el-scrollbar wrap-class="scrollbar-wrapper">
|
||||
<el-form ref="make" label-width="120px" :model="addModel" size="mini" :rules="makeRules">
|
||||
<el-form-item :label="$t('map.lineType')" prop="type">
|
||||
<el-select v-model="addModel.type" filterable>
|
||||
<el-option
|
||||
v-for="item in LineTypeList"
|
||||
:key="item.code"
|
||||
:label="item.name"
|
||||
:value="item.code"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('map.lineWidth')" prop="width">
|
||||
<el-input-number v-model="addModel.width" :min="1" />px
|
||||
</el-form-item>
|
||||
<div class="coordinate">
|
||||
<span class="title">{{ $t('map.linePoint') }}</span>
|
||||
<div class="point-section">
|
||||
<template v-for="(point, index) in addModel.points">
|
||||
<div :key="index" style="overflow: hidden;">
|
||||
<el-form-item
|
||||
label=""
|
||||
:prop="'points[' + index + '].x'"
|
||||
style="display: table; float: left;"
|
||||
label-width="0px"
|
||||
>
|
||||
<el-input-number v-model="point.x" />
|
||||
</el-form-item>
|
||||
<span style="display: table; margin-left: 8px; float: left; line-height: 28px;">
|
||||
, </span>
|
||||
<el-form-item
|
||||
label=""
|
||||
:prop="'points[' + index + '].y'"
|
||||
style="display: table; float: left; margin-right: 5px;"
|
||||
label-width="10px"
|
||||
>
|
||||
<el-input-number v-model="point.y" />
|
||||
</el-form-item>
|
||||
<el-button
|
||||
icon="el-icon-plus"
|
||||
circle
|
||||
class="point-button"
|
||||
@click="addPoint(addModel.points, index)"
|
||||
/>
|
||||
<el-button
|
||||
icon="el-icon-minus"
|
||||
:disabled="index == 0 || index == addModel.points.length - 1"
|
||||
circle
|
||||
class="point-button"
|
||||
@click="delPoint(addModel.points, index)"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</el-form>
|
||||
</el-scrollbar>
|
||||
</div>
|
||||
<el-button-group class="map-draft-group">
|
||||
<el-button type="primary" size="small" @click="create">{{ $t('map.create') }}</el-button>
|
||||
</el-button-group>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapGetters } from 'vuex';
|
||||
import { getUID } from '@/jmap/utils/Uid';
|
||||
import ConfigList from './config/list';
|
||||
import { deepAssign } from '@/utils/index';
|
||||
|
||||
export default {
|
||||
name: 'StationStandDraft',
|
||||
components: {
|
||||
ConfigList
|
||||
},
|
||||
props: {
|
||||
selected: {
|
||||
type: Object,
|
||||
default: function () {
|
||||
return null;
|
||||
}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
activeName: 'first',
|
||||
LineTypeList: [],
|
||||
editModel: {
|
||||
code: '',
|
||||
type: '',
|
||||
width: 1,
|
||||
points: []
|
||||
},
|
||||
addModel: {
|
||||
type: '',
|
||||
width: 1,
|
||||
points: [
|
||||
{ x: 0, y: 0 },
|
||||
{ x: 100, y: 100 }
|
||||
]
|
||||
},
|
||||
rules: {
|
||||
code: [
|
||||
{ required: true, message: this.$t('rules.pleaseSelectLine'), trigger: 'blur' }
|
||||
],
|
||||
type: [
|
||||
{ required: true, message: this.$t('rules.pleaseSelectLineType'), trigger: 'blur' }
|
||||
],
|
||||
width: [
|
||||
{ required: true, message: this.$t('rules.pleaseSelectLineWidth'), trigger: 'blur' }
|
||||
]
|
||||
},
|
||||
makeRules: {
|
||||
code: [
|
||||
{ required: true, message: this.$t('rules.pleaseSelectLine'), trigger: 'blur' }
|
||||
],
|
||||
type: [
|
||||
{ required: true, message: this.$t('rules.pleaseSelectLineType'), trigger: 'blur' }
|
||||
],
|
||||
width: [
|
||||
{ required: true, message: this.$t('rules.pleaseSelectLineWidth'), trigger: 'blur' }
|
||||
]
|
||||
}
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapGetters('map', [
|
||||
'lineList',
|
||||
'stationList',
|
||||
'lineCode'
|
||||
]),
|
||||
form() {
|
||||
const form = {
|
||||
labelWidth: '120px',
|
||||
items: {
|
||||
code: {
|
||||
name: '',
|
||||
item: []
|
||||
},
|
||||
draw: {
|
||||
name: this.$t('map.drawData'),
|
||||
item: [
|
||||
{ prop: 'code', label: this.$t('map.lineCoding'), type: 'select', optionLabel: 'code', optionValue: 'code', options: this.lineList, change: true, deviceChange: this.deviceChange },
|
||||
{ prop: 'type', label: this.$t('map.lineType'), type: 'select', optionLabel: 'name', optionValue: 'code', options: this.LineTypeList },
|
||||
{ prop: 'width', label: this.$t('map.lineWidth'), type: 'number', min: 1, placeholder: 'px' },
|
||||
{ prop: 'points', label: this.$t('map.segmentCoordinates'), type: 'points', width: '100px', isHidden: !this.isPointsShow, addPoint: this.addPoint, delPoint: this.delPoint }
|
||||
]
|
||||
},
|
||||
map: {
|
||||
name: this.$t('map.mapData'),
|
||||
item: [
|
||||
]
|
||||
}
|
||||
}
|
||||
};
|
||||
return form;
|
||||
},
|
||||
isPointsShow() {
|
||||
return this.editModel.points.length > 0;
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
selected(val, oldVal) {
|
||||
this.deviceSelect(val);
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.$Dictionary.lineType().then(list => {
|
||||
this.LineTypeList = list;
|
||||
});
|
||||
},
|
||||
methods: {
|
||||
deviceChange(code) {
|
||||
this.$emit('setCenter', code);
|
||||
this.deviceSelect(this.$store.getters['map/getDeviceByCode'](code));
|
||||
},
|
||||
deviceSelect(selected) {
|
||||
this.$refs.form.resetFields();
|
||||
this.$refs.make.resetFields();
|
||||
if (selected && selected._type.toUpperCase() === 'Line'.toUpperCase()) {
|
||||
this.activeName = 'first';
|
||||
this.editModel = deepAssign(this.editModel, selected);
|
||||
}
|
||||
},
|
||||
addPoint(index) {
|
||||
const data = { x: 0, y: 0 };
|
||||
this.editModel.points.splice(index + 1, 0, data);
|
||||
},
|
||||
delPoint(index) {
|
||||
this.editModel.points.splice(index + 1, 0);
|
||||
},
|
||||
create() {
|
||||
this.$refs['make'].validate((valid) => {
|
||||
if (valid) {
|
||||
if (JSON.stringify(this.addModel.points[0]) !== JSON.stringify(this.addModel.points[this.addModel.points.length - 1])) {
|
||||
const pointArr = JSON.stringify(this.addModel.points);
|
||||
const model = {
|
||||
_type: 'Line',
|
||||
code: getUID('Line'),
|
||||
type: this.addModel.type,
|
||||
width: this.addModel.width,
|
||||
points: JSON.parse(pointArr)
|
||||
};
|
||||
this.$emit('updateMapModel', model);
|
||||
} else {
|
||||
this.$message.console.error(this.$t('tip.cannotCoincide'));
|
||||
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
// 修改对象
|
||||
edit() {
|
||||
this.$refs['form'].validate((valid) => {
|
||||
if (valid) {
|
||||
const data = Object.assign({_type: 'Line'}, this.editModel);
|
||||
this.$emit('updateMapModel', data);
|
||||
}
|
||||
});
|
||||
},
|
||||
// 删除对象
|
||||
deleteObj() {
|
||||
const selected = this.$store.getters['map/getDeviceByCode'](this.editModel.code);
|
||||
if (selected && selected._type.toUpperCase() === 'Line'.toUpperCase()) {
|
||||
const _that = this;
|
||||
this.$confirm(this.$t('tip.confirmDeletion'), this.$t('tip.hint'), {
|
||||
confirmButtonText: this.$t('tip.confirm'),
|
||||
cancelButtonText: this.$t('tip.cancel'),
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
_that.$emit('updateMapModel', {...selected, _dispose: true});
|
||||
_that.deviceSelect();
|
||||
}).catch(() => {
|
||||
_that.$message.info(this.$t('tip.cancelledDelete'));
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style rel="stylesheet/scss" lang="scss" scoped>
|
||||
@import "src/styles/mixin.scss";
|
||||
.view-control{
|
||||
height: 100%;
|
||||
overflow-y: auto;
|
||||
}
|
||||
.card {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.coordinate {
|
||||
overflow: hidden;
|
||||
|
||||
.title {
|
||||
text-align: right;
|
||||
font-size: 14px;
|
||||
color: #606266;
|
||||
line-height: 40px;
|
||||
padding: 0 12px 0 0;
|
||||
-webkit-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
line-height: 28px;
|
||||
width: 120px;
|
||||
font-weight: bold;
|
||||
display: block;
|
||||
float: left;
|
||||
}
|
||||
}
|
||||
|
||||
.point-section {
|
||||
float: left;
|
||||
width: calc(100% - 120px);
|
||||
}
|
||||
|
||||
.point-button {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
float: left;
|
||||
|
||||
/deep/ {
|
||||
.el-icon-plus,
|
||||
.el-icon-minus {
|
||||
transform: translateY(-5px);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.el-input-number--mini {
|
||||
width: 110px;
|
||||
}
|
||||
</style>
|
||||
@ -1,551 +0,0 @@
|
||||
<template>
|
||||
<el-tabs v-model="activeName" class="card">
|
||||
<el-tab-pane class="view-control" :label="$t('map.property')" name="first">
|
||||
<div style="height: calc(100% - 46px);">
|
||||
<el-scrollbar wrap-class="scrollbar-wrapper">
|
||||
<config-list ref="dataform" :form="form" :form-model="editModel" :rules="rules" />
|
||||
</el-scrollbar>
|
||||
</div>
|
||||
<div class="button_box">
|
||||
<el-button-group class="map-draft-group">
|
||||
<el-button type="primary" size="small" @click="edit">{{ $t('map.updateObj') }}</el-button>
|
||||
<el-button type="danger" size="small" @click="deleteObj">{{ $t('map.deleteObj') }}</el-button>
|
||||
</el-button-group>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane class="view-control" :label="$t('map.newConstruction')" name="second">
|
||||
<div style="height: calc(100% - 46px);">
|
||||
<el-scrollbar wrap-class="scrollbar-wrapper">
|
||||
<el-form ref="make" label-width="120px" :model="addModel" size="mini">
|
||||
<el-form-item :label="$t('map.linkType')">
|
||||
<el-radio-group v-model="LinkType">
|
||||
<el-radio
|
||||
v-for="item in LinkTypeList"
|
||||
:key="item.value"
|
||||
:label="item.value"
|
||||
border
|
||||
:disabled="item.disabled"
|
||||
size="mini"
|
||||
>{{ item.label }}</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<template v-if="isNew">
|
||||
<config-data ref="make1" :form="formMake1" :form-model="addModel" :rules="makeRules1" />
|
||||
</template>
|
||||
<template v-if="isFd">
|
||||
<config-data ref="make2" :form="formMake2" :form-model="addModel" :rules="makeRules2" />
|
||||
</template>
|
||||
<template v-if="isSd">
|
||||
<config-data ref="make3" :form="formMake3" :form-model="addModel" :rules="makeRules3" />
|
||||
</template>
|
||||
</el-form>
|
||||
</el-scrollbar>
|
||||
</div>
|
||||
<div class="button_box">
|
||||
<el-button-group class="map-draft-group">
|
||||
<el-button v-if="isNew" type="primary" size="small" @click="isNewCreate">{{ $t('map.create') }}</el-button>
|
||||
<el-button v-if="isFd" type="primary" size="small" @click="isFdCreate">{{ $t('map.create') }}</el-button>
|
||||
<el-button v-if="isSd" type="primary" size="small" @click="isSdCreate">{{ $t('map.create') }}</el-button>
|
||||
</el-button-group>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapGetters } from 'vuex';
|
||||
import { getUID } from '@/jmap/utils/Uid';
|
||||
import { getUName } from '@/jmap/utils/Uname';
|
||||
import ConfigList from './config/list';
|
||||
import ConfigData from './config/data';
|
||||
import { deepAssign } from '@/utils/index';
|
||||
|
||||
export default {
|
||||
name: 'LinkDraft',
|
||||
components: {
|
||||
ConfigList,
|
||||
ConfigData
|
||||
},
|
||||
props: {
|
||||
selected: {
|
||||
type: Object,
|
||||
default: function () {
|
||||
return null;
|
||||
}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
linkLists: [],
|
||||
activeName: 'first',
|
||||
LinkType: '0',
|
||||
LinkTypeList: [],
|
||||
LinkDriectTypeList: [],
|
||||
editModel: {
|
||||
code: '',
|
||||
type: '',
|
||||
name: '',
|
||||
lengthFact: 0,
|
||||
leftFdCode: '',
|
||||
leftSdCode: '',
|
||||
rightFdCode: '',
|
||||
rightSdCode: '',
|
||||
lp: {
|
||||
x: 0,
|
||||
y: 0
|
||||
},
|
||||
rp: {
|
||||
x: 0,
|
||||
y: 0
|
||||
}
|
||||
},
|
||||
addModel: {
|
||||
code: '',
|
||||
type: '01',
|
||||
direct: 'R',
|
||||
x: 0,
|
||||
y: 0,
|
||||
lengthShow: 200,
|
||||
lengthFact: 0,
|
||||
lfd: '',
|
||||
rfd: ''
|
||||
},
|
||||
skins: [],
|
||||
makeRules1: {
|
||||
x: [
|
||||
{ required: true, message: this.$t('rules.linkXCoordinate'), trigger: 'blur' }
|
||||
],
|
||||
y: [
|
||||
{ required: true, message: this.$t('rules.linkYCoordinate'), trigger: 'blur' }
|
||||
],
|
||||
lengthShow: [
|
||||
{ required: true, message: this.$t('rules.linkEnterLength'), trigger: 'blur' }
|
||||
],
|
||||
lengthFact: [
|
||||
{ required: true, message: this.$t('rules.linkEnterDisplayLength'), trigger: 'blur' }
|
||||
]
|
||||
},
|
||||
makeRules2: {
|
||||
code: [
|
||||
{ required: true, message: this.$t('rules.linkSelectBase'), trigger: 'change' }
|
||||
],
|
||||
lengthShow: [
|
||||
{ required: true, message: this.$t('rules.linkEnterLength'), trigger: 'blur' }
|
||||
],
|
||||
lengthFact: [
|
||||
{ required: true, message: this.$t('rules.linkEnterDisplayLength'), trigger: 'blur' }
|
||||
]
|
||||
},
|
||||
makeRules3: {
|
||||
lfd: [
|
||||
{ required: true, message: this.$t('rules.linkEnterLeft'), trigger: 'blur' }
|
||||
],
|
||||
rfd: [
|
||||
{ required: true, message: this.$t('rules.linkEnterRight'), trigger: 'blur' }
|
||||
],
|
||||
lengthFact: [
|
||||
{ required: true, message: this.$t('rules.linkEnterDisplayLength'), trigger: 'blur' }
|
||||
]
|
||||
}
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapGetters('map', [
|
||||
'linkList'
|
||||
]),
|
||||
form() {
|
||||
return {
|
||||
labelWidth: '130px',
|
||||
items: {
|
||||
code: {
|
||||
name: '',
|
||||
item: []
|
||||
},
|
||||
draw: {
|
||||
name: this.$t('map.drawData'),
|
||||
item: [
|
||||
{ prop: 'code', label: this.$t('map.linkCode'), type: 'select', optionLabel: 'name&&code', optionValue: 'code', options: this.linkList, change: true, deviceChange: this.deviceChange },
|
||||
{ prop: 'name', label: this.$t('map.linkName'), type: 'input' },
|
||||
{ prop: 'lp', label: this.$t('map.linkLp'), type: 'coordinate', width: '119px', children: [
|
||||
{ prop: 'lp.x', firstLevel: 'lp', secondLevel: 'x', label: 'x:', type: 'number', labelWidth: '25px', disabled: false },
|
||||
{ prop: 'lp.y', firstLevel: 'lp', secondLevel: 'y', label: 'y:', type: 'number', labelWidth: '25px', disabled: false }
|
||||
] },
|
||||
{ prop: 'rp', label: this.$t('map.linkRp'), type: 'coordinate', width: '119px', children: [
|
||||
{ prop: 'rp.x', firstLevel: 'rp', secondLevel: 'x', label: 'x:', type: 'number', labelWidth: '25px', disabled: false },
|
||||
{ prop: 'rp.y', firstLevel: 'rp', secondLevel: 'y', label: 'y:', type: 'number', labelWidth: '25px', disabled: false }
|
||||
] },
|
||||
{ prop: 'leftFdCode', label: this.$t('map.linkLeftFdCode'), type: 'select', optionLabel: 'name&&code', optionValue: 'code', options: this.linkLists },
|
||||
{ prop: 'leftSdCode', label: this.$t('map.linkLeftSdCode'), type: 'select', optionLabel: 'name&&code', optionValue: 'code', options: this.linkLists },
|
||||
{ prop: 'rightFdCode', label: this.$t('map.linkRightFdCode'), type: 'select', optionLabel: 'name&&code', optionValue: 'code', options: this.linkLists },
|
||||
{ prop: 'rightSdCode', label: this.$t('map.linkRightSdCode'), type: 'select', optionLabel: 'name&&code', optionValue: 'code', options: this.linkLists }
|
||||
]
|
||||
},
|
||||
map: {
|
||||
name: this.$t('map.mapData'),
|
||||
item: [
|
||||
{ prop: 'lengthFact', label: this.$t('map.linkActualLength'), type: 'number', min: 0, placeholder: this.$t('tip.meter') }
|
||||
]
|
||||
}
|
||||
}
|
||||
};
|
||||
},
|
||||
rules() {
|
||||
return {
|
||||
code: [
|
||||
{ required: true, message: this.$t('rules.selectEquipment'), trigger: 'change' }
|
||||
],
|
||||
name: [
|
||||
{ required: true, message: this.$t('rules.linkSelectName'), trigger: 'blur' }
|
||||
],
|
||||
'lp.x': [
|
||||
{ required: true, message: this.$t('rules.linkSelectName'), trigger: 'blur' }
|
||||
],
|
||||
'lp.y': [
|
||||
{ required: true, message: this.$t('rules.linkSelectName'), trigger: 'blur' }
|
||||
],
|
||||
'rp.x': [
|
||||
{ required: true, message: this.$t('rules.linkSelectName'), trigger: 'blur' }
|
||||
],
|
||||
'rp.y': [
|
||||
{ required: true, message: this.$t('rules.linkSelectName'), trigger: 'blur' }
|
||||
],
|
||||
lengthFact: [
|
||||
{ required: true, message: this.$t('rules.linkSelectName'), trigger: 'blur' }
|
||||
]
|
||||
};
|
||||
},
|
||||
formMake1() {
|
||||
return {
|
||||
labelWidth: '120px',
|
||||
items: [
|
||||
{ prop: 'lengthShow', label: this.$t('rules.lengthShow'), type: 'number', min: 0, placeholder: 'px' },
|
||||
{ prop: 'lengthFact', label: this.$t('rules.lengthFact'), type: 'number', min: 0, placeholder: this.$t('tip.meter') },
|
||||
{ prop: 'x', label: this.$t('rules.pointX'), type: 'number', placeholder: 'px' },
|
||||
{ prop: 'y', label: this.$t('rules.pointY'), type: 'number', placeholder: 'px' }
|
||||
]
|
||||
};
|
||||
},
|
||||
formMake2() {
|
||||
return {
|
||||
labelWidth: '120px',
|
||||
items: [
|
||||
{ prop: 'code', label: this.$t('rules.basisLink'), type: 'select', optionLabel: 'name', optionValue: 'code', options: this.linkList },
|
||||
{ prop: 'direct', label: this.$t('rules.direct'), type: 'radio', border: true, radioList: this.LinkDriectTypeList },
|
||||
{ prop: 'lengthShow', label: this.$t('rules.lengthShow'), type: 'number', min: 0, placeholder: 'px', isHidden: this.isSd },
|
||||
{ prop: 'lengthFact', label: this.$t('rules.lengthFact'), type: 'number', min: 0, placeholder: this.$t('tip.meter') }
|
||||
]
|
||||
};
|
||||
},
|
||||
formMake3() {
|
||||
return {
|
||||
labelWidth: '120px',
|
||||
items: [
|
||||
{ prop: 'lfd', label: '左侧正向Link:', type: 'select', optionLabel: 'name', optionValue: 'code', options: this.linkList },
|
||||
{ prop: 'rfd', label: '右侧正向Link:', type: 'select', optionLabel: 'name', optionValue: 'code', options: this.linkList },
|
||||
{ prop: 'lengthShow', label: this.$t('rules.lengthShow'), type: 'number', min: 0, placeholder: 'px', isHidden: this.isSd },
|
||||
{ prop: 'lengthFact', label: this.$t('rules.lengthFact'), type: 'number', min: 0, placeholder: this.$t('tip.meter') }
|
||||
]
|
||||
};
|
||||
},
|
||||
|
||||
// 是否初始link
|
||||
isNew() {
|
||||
return this.LinkType === '0';
|
||||
},
|
||||
// 是否正向link
|
||||
isFd() {
|
||||
return this.LinkType === '1';
|
||||
},
|
||||
// 是否侧向link
|
||||
isSd() {
|
||||
return this.LinkType === '2';
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
LinkType(val) {
|
||||
this.addModel.type = val == '2' ? '02' : '01';
|
||||
},
|
||||
selected(val, oldVal) {
|
||||
this.deviceSelect(val);
|
||||
},
|
||||
linkList(value) {
|
||||
this.linkLists = JSON.parse(JSON.stringify(this.linkList));
|
||||
this.linkLists.unshift({code: '', name: '无'});
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.LinkTypeList = this.$ConstSelect.LinkTypeList;
|
||||
this.LinkDriectTypeList = this.$ConstSelect.LinkDriectTypeList;
|
||||
},
|
||||
methods: {
|
||||
deviceChange(code) {
|
||||
this.$emit('setCenter', code);
|
||||
this.deviceSelect(this.$store.getters['map/getDeviceByCode'](code));
|
||||
},
|
||||
deviceSelect(selected) {
|
||||
this.$nextTick(() => {
|
||||
this.$refs.dataform.resetFields();
|
||||
this.$refs.make.resetFields();
|
||||
if (selected && selected._type.toUpperCase() === 'Link'.toUpperCase()) {
|
||||
this.activeName = 'first';
|
||||
this.editModel = deepAssign(this.editModel, selected); // 深拷贝
|
||||
this.addModel.code = selected.code;
|
||||
}
|
||||
});
|
||||
},
|
||||
isNewCreate() {
|
||||
this.$refs['make1'].validate((valid) => {
|
||||
if (valid) {
|
||||
var uid = getUID('Link');
|
||||
var uname = getUName(this.linkList);
|
||||
const edits = [];
|
||||
|
||||
if (this.isNew) {
|
||||
// 初始link
|
||||
const x = this.addModel.x;
|
||||
const y = this.addModel.y;
|
||||
var model = {
|
||||
_type: 'Link',
|
||||
code: uid,
|
||||
name: uname,
|
||||
type: this.addModel.type,
|
||||
lp: {
|
||||
x: x,
|
||||
y: y
|
||||
},
|
||||
rp: {
|
||||
x: x + this.addModel.lengthShow,
|
||||
y: y
|
||||
},
|
||||
lengthFact: this.addModel.lengthFact,
|
||||
color: this.addModel.color ? this.addModel.color : '#4e8de6'
|
||||
};
|
||||
edits.push(model);
|
||||
}
|
||||
this.$emit('updateMapModel', edits);
|
||||
}
|
||||
});
|
||||
},
|
||||
isFdCreate() {
|
||||
this.$refs['make2'].validate((valid) => {
|
||||
if (valid) {
|
||||
var uid = getUID('Link');
|
||||
var uname = getUName(this.linkList);
|
||||
const edits = [];
|
||||
var baseLink = null;
|
||||
if (this.addModel) {
|
||||
baseLink = deepAssign({}, this.$store.getters['map/getDeviceByCode'](this.addModel.code));
|
||||
}
|
||||
|
||||
var leftFdCode = '';
|
||||
var rightFdCode = '';
|
||||
if (this.isFd) {
|
||||
let lp = {};
|
||||
let rp = {};
|
||||
if (baseLink && baseLink._type.toUpperCase() === 'Link'.toUpperCase()) {
|
||||
if (this.addModel.direct === 'L') {
|
||||
lp = {
|
||||
x: baseLink.lp.x - this.addModel.lengthShow,
|
||||
y: baseLink.lp.y
|
||||
};
|
||||
rp = {
|
||||
x: baseLink.lp.x,
|
||||
y: baseLink.lp.y
|
||||
};
|
||||
rightFdCode = baseLink.code;
|
||||
baseLink.leftFdCode = uid;
|
||||
edits.push(baseLink);
|
||||
} else {
|
||||
lp = {
|
||||
x: baseLink.rp.x,
|
||||
y: baseLink.rp.y
|
||||
};
|
||||
rp = {
|
||||
x: baseLink.rp.x + this.addModel.lengthShow,
|
||||
y: baseLink.rp.y
|
||||
};
|
||||
leftFdCode = baseLink.code;
|
||||
baseLink.rightFdCode = uid;
|
||||
edits.push(baseLink);
|
||||
}
|
||||
const model = {
|
||||
_type: 'Link',
|
||||
code: uid,
|
||||
name: uname,
|
||||
type: this.addModel.type,
|
||||
lp: lp,
|
||||
rp: rp,
|
||||
lengthFact: this.addModel.lengthFact,
|
||||
leftFdCode: leftFdCode,
|
||||
rightFdCode: rightFdCode
|
||||
};
|
||||
edits.push(model);
|
||||
}
|
||||
}
|
||||
this.$emit('updateMapModel', edits);
|
||||
}
|
||||
});
|
||||
},
|
||||
isSdCreate() {
|
||||
this.$refs['make3'].validate((valid) => {
|
||||
if (valid) {
|
||||
var uid = getUID('Link');
|
||||
var uname = getUName(this.linkList);
|
||||
const edits = [];
|
||||
|
||||
if (this.isSd) {
|
||||
var lnode = this.findLinkData(this.addModel.lfd);
|
||||
var rnode = this.findLinkData(this.addModel.rfd);
|
||||
if (lnode && rnode) {
|
||||
const model = {
|
||||
_type: 'Link',
|
||||
code: uid,
|
||||
name: uname,
|
||||
type: this.addModel.type,
|
||||
lp: {
|
||||
x: lnode.rp.x,
|
||||
y: lnode.rp.y
|
||||
},
|
||||
rp: {
|
||||
x: rnode.lp.x,
|
||||
y: rnode.lp.y
|
||||
},
|
||||
lengthFact: this.addModel.lengthFact,
|
||||
color: this.addModel.color ? this.addModel.color : '#4e8de6',
|
||||
leftFdCode: lnode.code,
|
||||
rightFdCode: rnode.code
|
||||
};
|
||||
|
||||
if (rnode.lp.y === lnode.rp.y) {
|
||||
lnode.rightFdCode = uid;
|
||||
rnode.leftFdCode = uid;
|
||||
edits.push(lnode);
|
||||
edits.push(rnode);
|
||||
} else {
|
||||
lnode.rightSdCode = uid;
|
||||
rnode.leftSdCode = uid;
|
||||
edits.push(lnode);
|
||||
edits.push(rnode);
|
||||
}
|
||||
edits.push(model);
|
||||
}
|
||||
}
|
||||
this.$emit('updateMapModel', edits);
|
||||
}
|
||||
});
|
||||
},
|
||||
// 修改对象
|
||||
edit() {
|
||||
this.$refs['dataform'].validate((valid) => {
|
||||
if (valid) {
|
||||
const data = Object.assign({_type: 'Link'}, this.editModel);
|
||||
this.$emit('updateMapModel', data);
|
||||
}
|
||||
});
|
||||
},
|
||||
updateRelatedModel(node, code) {
|
||||
const data = Object.assign({ _type: 'Link' }, node);
|
||||
if (node.leftFdCode == code) {
|
||||
data.leftFdCode = '';
|
||||
return data;
|
||||
}
|
||||
|
||||
if (node.leftSdCode == code) {
|
||||
data.leftSdCode = '';
|
||||
return data;
|
||||
}
|
||||
if (node.rightFdCode == code) {
|
||||
data.rightFdCode = '';
|
||||
return data;
|
||||
}
|
||||
|
||||
if (node.rightSdCode == code) {
|
||||
data.rightSdCode = '';
|
||||
return data;
|
||||
}
|
||||
return { _type: 'Link', code: node.code };
|
||||
},
|
||||
deleteObj() {
|
||||
const selected = this.$store.getters['map/getDeviceByCode'](this.editModel.code);
|
||||
if (selected && selected._type.toUpperCase() === 'Link'.toUpperCase()) {
|
||||
let node = null;
|
||||
var _that = this;
|
||||
const updates = [];
|
||||
// 清除link 关联关系
|
||||
if (selected.leftFdCode) {
|
||||
node = this.findLinkData(selected.leftFdCode);
|
||||
node && updates.push(this.updateRelatedModel(node, selected.code));
|
||||
}
|
||||
if (selected.leftSdCode) {
|
||||
node = this.findLinkData(selected.leftSdCode);
|
||||
node && updates.push(this.updateRelatedModel(node, selected.code));
|
||||
}
|
||||
if (selected.rightFdCode) {
|
||||
node = this.findLinkData(selected.rightFdCode);
|
||||
node && updates.push(this.updateRelatedModel(node, selected.code));
|
||||
}
|
||||
if (selected.rightSdCode) {
|
||||
node = this.findLinkData(selected.rightSdCode);
|
||||
node && updates.push(this.updateRelatedModel(node, selected.code));
|
||||
}
|
||||
|
||||
this.$confirm(this.$t('tip.confirmDeletion'), this.$t('tip.hint'), {
|
||||
confirmButtonText: this.$t('tip.confirm'),
|
||||
cancelButtonText: this.$t('tip.cancel'),
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
updates.push(deepAssign(selected, {_dispose: true}));
|
||||
_that.$emit('updateMapModel', updates);
|
||||
_that.deviceSelect();
|
||||
}).catch(() => {
|
||||
_that.$message.info(this.$t('tip.cancelledDelete'));
|
||||
});
|
||||
}
|
||||
},
|
||||
findLinkData(code) {
|
||||
let link = null;
|
||||
const linkList = this.linkList;
|
||||
if (linkList && linkList.length) {
|
||||
for (var i = 0; i < linkList.length; i++) {
|
||||
if (code === linkList[i].code) {
|
||||
link = JSON.parse(JSON.stringify(linkList[i]));
|
||||
return link;
|
||||
}
|
||||
}
|
||||
}
|
||||
return link;
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style rel="stylesheet/scss" lang="scss" scoped>
|
||||
@import "src/styles/mixin.scss";
|
||||
|
||||
.view-control{
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.card {
|
||||
height: 100%;
|
||||
}
|
||||
.coordinate {
|
||||
overflow: hidden;
|
||||
|
||||
.title {
|
||||
text-align: right;
|
||||
font-size: 14px;
|
||||
color: #606266;
|
||||
line-height: 40px;
|
||||
padding: 0 12px 0 0;
|
||||
-webkit-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
line-height: 28px;
|
||||
width: 120px;
|
||||
font-weight: bold;
|
||||
display: block;
|
||||
float: left;
|
||||
margin-right: 7px;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
File diff suppressed because it is too large
Load Diff
@ -1,445 +0,0 @@
|
||||
<template>
|
||||
<el-tabs v-model="activeName" class="card">
|
||||
<el-tab-pane class="view-control" :label="$t('map.property')" name="first">
|
||||
<div style="height: calc(100% - 46px);">
|
||||
<el-scrollbar wrap-class="scrollbar-wrapper">
|
||||
<config-list ref="dataform" :form="form" :form-model="editModel" :rules="rules" />
|
||||
</el-scrollbar>
|
||||
</div>
|
||||
<div class="button_box">
|
||||
<el-button-group class="map-draft-group">
|
||||
<el-button type="primary" size="small" @click="edit">{{ $t('map.updateObj') }}</el-button>
|
||||
<el-button type="danger" size="small" @click="deleteObj">{{ $t('map.deleteObj') }}</el-button>
|
||||
</el-button-group>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane class="view-control" :label="$t('map.newConstruction')" name="second">
|
||||
<div style="height: calc(100% - 46px);">
|
||||
<el-scrollbar wrap-class="scrollbar-wrapper">
|
||||
<el-form ref="make" label-width="130px" :model="addModel" size="mini" :rules="mergeRules">
|
||||
<el-form-item :label="$t('map.physicalSegmentName')" prop="sectionCode">
|
||||
<el-select v-model="addModel.sectionCode" filterable>
|
||||
<el-option
|
||||
v-for="item in PhysicalSectionList"
|
||||
:key="item.code"
|
||||
:label="item.name + ' (' + item.code+ ')'"
|
||||
:value="item.code"
|
||||
/>
|
||||
</el-select>
|
||||
<el-button
|
||||
:type="field === 'selectSingalCode' ? 'danger' : 'primary'"
|
||||
size="small"
|
||||
@click="hover('selectSingalCode')"
|
||||
>{{ $t('map.activate') }}</el-button>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('map.leftOrRight')" prop="leftOrRight">
|
||||
<el-select v-model="addModel.leftOrRight" filterable>
|
||||
<el-option
|
||||
v-for="item in SignalLeftOrRightList"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('map.directionType')" prop="directionType">
|
||||
<el-select v-model="addModel.directionType" filterable>
|
||||
<el-option
|
||||
v-for="item in SignalDirectionTypeList"
|
||||
:key="item.code"
|
||||
:label="item.name"
|
||||
:value="item.code"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('map.signalDirectionTypeX')" prop="directionShowType">
|
||||
<el-select v-model="addModel.directionShowType" filterable>
|
||||
<el-option
|
||||
v-for="item in SignalDirectionList"
|
||||
:key="item.code"
|
||||
:label="item.name"
|
||||
:value="item.code"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('map.positionType')" prop="positionType">
|
||||
<el-select v-model="addModel.positionType" filterable>
|
||||
<el-option
|
||||
v-for="item in SignalPositionTypeList"
|
||||
:key="item.code"
|
||||
:label="item.name"
|
||||
:value="item.code"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('map.equipmentStation')" prop="stationCode">
|
||||
<el-select v-model="addModel.stationCode" filterable>
|
||||
<el-option
|
||||
v-for="item in stationList"
|
||||
:key="item.code"
|
||||
:label="item.name + item.code"
|
||||
:value="item.code"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-scrollbar>
|
||||
</div>
|
||||
<div class="button_box">
|
||||
<el-button-group class="map-draft-group">
|
||||
<el-button type="primary" size="small" @click="create">{{ $t('map.create') }}</el-button>
|
||||
</el-button-group>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapGetters } from 'vuex';
|
||||
import { getUID } from '@/jmap/utils/Uid';
|
||||
import JTriangle from '@/jmap/utils/JTriangle';
|
||||
import ConfigList from './config/list';
|
||||
import { deepAssign } from '@/utils/index';
|
||||
|
||||
export default {
|
||||
name: 'SignalDraft',
|
||||
components: {
|
||||
ConfigList
|
||||
},
|
||||
props: {
|
||||
selected: {
|
||||
type: Object,
|
||||
default: function () {
|
||||
return null;
|
||||
}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
activeName: 'first',
|
||||
SignalDirectionList: [
|
||||
{ code: '01', name: '向左' },
|
||||
{ code: '02', name: '向右' }
|
||||
],
|
||||
SignalLeftOrRightList: [],
|
||||
SignalPotLampTypeList: [],
|
||||
SignalLampPostTypeList: [],
|
||||
SignalLampPositionTypeList: [],
|
||||
SignalDirectionTypeList: [],
|
||||
SignalPositionTypeList: [],
|
||||
SignalUseTypeList: [],
|
||||
failTypes: [
|
||||
{ code: '00', name: this.$t('map.normal') },
|
||||
{ code: '01', name: this.$t('map.signalFilamentAlarm') }
|
||||
],
|
||||
editModel: {
|
||||
code: '',
|
||||
name: '',
|
||||
uniqueName: '',
|
||||
nameShow: false,
|
||||
lampPostType: '',
|
||||
lampPositionType: '',
|
||||
potLampType: '01',
|
||||
directionShowType: '',
|
||||
directionType: '',
|
||||
positionType: '',
|
||||
namePosition: { x: 0, y: 0 },
|
||||
useType: '',
|
||||
stationCode: '',
|
||||
linkCode: '',
|
||||
offset: 0,
|
||||
rotate: 0,
|
||||
guideShow: false,
|
||||
buttonShow: false,
|
||||
position: { x: 0, y: 0 },
|
||||
buttonPosition: { x: 0, y: 0 },
|
||||
guidePosition: { x: 0, y: 0 }
|
||||
},
|
||||
field: '',
|
||||
addModel: {
|
||||
sectionCode: '',
|
||||
directionType: '01',
|
||||
directionShowType: '01',
|
||||
leftOrRight: '0',
|
||||
positionType: '01',
|
||||
stationCode: ''
|
||||
},
|
||||
mergeRules: {
|
||||
sectionCode: [
|
||||
{ required: true, message: this.$t('rules.selectPhysicalExtentName'), trigger: 'change' }
|
||||
],
|
||||
directionType: [
|
||||
{ required: true, message: this.$t('map.pleaseSelect') + '' + this.$t('map.directionType'), trigger: 'change' }
|
||||
],
|
||||
directionShowType: [
|
||||
{ required: true, message: this.$t('map.pleaseSelect') + '' + this.$t('map.directionType'), trigger: 'change' }
|
||||
],
|
||||
leftOrRight: [
|
||||
{ required: true, message: this.$t('map.pleaseSelect') + '' + this.$t('map.leftOrRight'), trigger: 'change' }
|
||||
],
|
||||
positionType: [
|
||||
{ required: true, message: this.$t('map.pleaseSelect') + '' + this.$t('map.positionType'), trigger: 'change' }
|
||||
],
|
||||
stationCode: [
|
||||
{ required: true, message: this.$t('map.pleaseSelect') + '' + this.$t('map.equipmentStation'), trigger: 'change' }
|
||||
]
|
||||
}
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapGetters('map', [
|
||||
'linkList',
|
||||
'signalList',
|
||||
'sectionList',
|
||||
'stationList',
|
||||
'lineCode'
|
||||
]),
|
||||
PhysicalSectionList() {
|
||||
let list = [];
|
||||
if (this.sectionList && this.sectionList.length) {
|
||||
list = this.sectionList.filter(elem => { return elem.type === '01' && !elem.isSwitchSection; });
|
||||
}
|
||||
return list;
|
||||
},
|
||||
form() {
|
||||
return {
|
||||
labelWidth: '150px',
|
||||
items: {
|
||||
code: {
|
||||
name: '',
|
||||
item: []
|
||||
},
|
||||
draw: {
|
||||
name: this.$t('map.drawData'),
|
||||
item: [
|
||||
{ prop: 'code', label: this.$t('map.signalCodeColon'), type: 'select', optionLabel: 'name&&code', optionValue: 'code', options: this.signalList, change: true, deviceChange: this.deviceChange },
|
||||
{ prop: 'name', label: this.$t('map.signalNameColon'), type: 'input' },
|
||||
{ prop: 'position', label: this.$t('map.signalPosition'), type: 'coordinate', width: '140px', children: [
|
||||
{ prop: 'position.x', firstLevel: 'position', secondLevel: 'x', label: 'x:', type: 'number', labelWidth: '25px' },
|
||||
{ prop: 'position.y', firstLevel: 'position', secondLevel: 'y', label: 'y:', type: 'number', labelWidth: '25px' }
|
||||
] },
|
||||
{ prop: 'lampPostType', label: this.$t('map.lampPostType'), type: 'select', optionLabel: 'name', optionValue: 'code', options: this.SignalLampPostTypeList },
|
||||
{ prop: 'lampPositionType', label: this.$t('map.lampPositionType'), type: 'select', optionLabel: 'name', optionValue: 'code', options: this.SignalLampPositionTypeList },
|
||||
{ prop: 'directionShowType', label: this.$t('map.signalDirectionTypeX'), type: 'select', optionLabel: 'name', optionValue: 'code', options: this.SignalDirectionList },
|
||||
{ prop: 'positionType', label: this.$t('map.signalPositionType'), type: 'select', optionLabel: 'name', optionValue: 'code', options: this.SignalPositionTypeList },
|
||||
{ prop: 'rotate', label: this.$t('map.rotateAngle'), type: 'number', min: -90, max: 90, placeholder: this.$t('tip.angle') },
|
||||
{ prop: 'namePosition', label: this.$t('map.signalNamePosition'), type: 'coordinate', width: '140px', children: [
|
||||
{ prop: 'namePosition.x', firstLevel: 'namePosition', secondLevel: 'x', label: 'x:', type: 'number', labelWidth: '25px' },
|
||||
{ prop: 'namePosition.y', firstLevel: 'namePosition', secondLevel: 'y', label: 'y:', type: 'number', labelWidth: '25px' }
|
||||
] },
|
||||
{ prop: 'buttonShow', label: this.$t('map.signalButtonShow'), type: 'checkbox' },
|
||||
{ prop: 'buttonPosition', label: this.$t('map.signalButtonPosition'), type: 'coordinate', width: '140px', children: [
|
||||
{ prop: 'buttonPosition.x', firstLevel: 'buttonPosition', secondLevel: 'x', label: 'x:', type: 'number', labelWidth: '25px' },
|
||||
{ prop: 'buttonPosition.y', firstLevel: 'buttonPosition', secondLevel: 'y', label: 'y:', type: 'number', labelWidth: '25px' }
|
||||
] },
|
||||
{ prop: 'guideShow', label: this.$t('map.signalGuideShow'), type: 'checkbox' },
|
||||
{ prop: 'guidePosition', label: this.$t('map.signalGuidePosition'), type: 'coordinate', width: '140px', children: [
|
||||
{ prop: 'guidePosition.x', firstLevel: 'guidePosition', secondLevel: 'x', label: 'x:', type: 'number', labelWidth: '25px' },
|
||||
{ prop: 'guidePosition.y', firstLevel: 'guidePosition', secondLevel: 'y', label: 'y:', type: 'number', labelWidth: '25px' }
|
||||
] }
|
||||
]
|
||||
},
|
||||
map: {
|
||||
name: this.$t('map.mapData'),
|
||||
item: [
|
||||
{ prop: 'stationCode', label: this.$t('map.equipmentStation'), type: 'select', optionLabel: 'name&&code', optionValue: 'code', options: this.stationList },
|
||||
{ prop: 'directionType', label: this.$t('map.signalDirectionType'), type: 'select', optionLabel: 'name', optionValue: 'code', options: this.SignalDirectionTypeList },
|
||||
{ prop: 'uniqueName', label: this.$t('map.signalUniqueName'), type: 'input' },
|
||||
{ prop: 'useType', label: this.$t('map.signalUseType'), type: 'select', optionLabel: 'name', optionValue: 'code', options: this.SignalUseTypeList },
|
||||
{ prop: 'potLampType', label: this.$t('map.potLampType'), type: 'select', optionLabel: 'name', optionValue: 'code', options: this.SignalPotLampTypeList },
|
||||
{ prop: 'linkCode', label: this.$t('map.signalLinkCode') + ':', type: 'select', optionLabel: 'name&&code', optionValue: 'code', options: this.linkList },
|
||||
{ prop: 'offset', label: this.$t('map.signalOffset'), type: 'number', min: 0, placeholder: this.$t('tip.meter') }
|
||||
|
||||
]
|
||||
}
|
||||
}
|
||||
};
|
||||
},
|
||||
rules() {
|
||||
return {
|
||||
code: [
|
||||
{ required: true, message: this.$t('rules.selectEquipment'), trigger: 'change' }
|
||||
],
|
||||
name: [
|
||||
{ required: true, message: this.$t('rules.pleaseEnterSemaphoreName'), trigger: 'blur' }
|
||||
],
|
||||
uniqueName: [
|
||||
{ required: true, message: this.$t('rules.pleaseEnterSignalName'), trigger: 'blur' }
|
||||
],
|
||||
offset: [
|
||||
{ required: true, message: this.$t('rules.pleaseEnterSignalOffset'), trigger: 'blur' }
|
||||
],
|
||||
'position.x': [
|
||||
{ required: true, message: this.$t('rules.pleaseEnterSignalPositionX'), trigger: 'blur' }
|
||||
],
|
||||
'position.y': [
|
||||
{ required: true, message: this.$t('rules.pleaseEnterSignalPositionY'), trigger: 'blur' }
|
||||
],
|
||||
'buttonPosition.x': [
|
||||
{ required: true, message: this.$t('rules.signalButtonPositionX'), trigger: 'blur' }
|
||||
],
|
||||
'buttonPosition.y': [
|
||||
{ required: true, message: this.$t('rules.signalButtonPositionY'), trigger: 'blur' }
|
||||
],
|
||||
'guidePosition.x': [
|
||||
{ required: true, message: this.$t('rules.signalGuidePositionX'), trigger: 'blur' }
|
||||
],
|
||||
'guidePosition.y': [
|
||||
{ required: true, message: this.$t('rules.signalGuidePositionY'), trigger: 'blur' }
|
||||
]
|
||||
};
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
selected(val, oldVal) {
|
||||
this.deviceSelect(val);
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.SignalLeftOrRightList = this.$ConstSelect.SignalLeftOrRightList;
|
||||
|
||||
this.$Dictionary.signalPotLampType().then(list => {
|
||||
this.SignalPotLampTypeList = list;
|
||||
});
|
||||
|
||||
this.$Dictionary.signalLampPostType().then(list => {
|
||||
this.SignalLampPostTypeList = list;
|
||||
});
|
||||
|
||||
this.$Dictionary.signalLampPositionType().then(list => {
|
||||
this.SignalLampPositionTypeList = list;
|
||||
});
|
||||
|
||||
this.$Dictionary.signalDirectionType().then(list => {
|
||||
this.SignalDirectionTypeList = list;
|
||||
});
|
||||
|
||||
this.$Dictionary.signalPositionType().then(list => {
|
||||
this.SignalPositionTypeList = list;
|
||||
});
|
||||
|
||||
this.$Dictionary.signalUseType().then(list => {
|
||||
this.SignalUseTypeList = list;
|
||||
});
|
||||
},
|
||||
methods: {
|
||||
deviceChange(code) {
|
||||
this.$emit('setCenter', code);
|
||||
this.deviceSelect(this.$store.getters['map/getDeviceByCode'](code));
|
||||
},
|
||||
deviceSelect(selected) {
|
||||
this.$refs.dataform.resetFields();
|
||||
this.$refs.make.resetFields();
|
||||
if (selected && selected._type.toUpperCase() === 'Signal'.toUpperCase()) {
|
||||
this.activeName = 'first';
|
||||
this.editModel = deepAssign(this.editModel, selected);
|
||||
this.editModel.potLampType = selected.potLampType || '01';
|
||||
this.editModel.rotate = selected.rotate || 0; // 角度
|
||||
}
|
||||
|
||||
if (this.field.toUpperCase() === 'selectSingalCode'.toUpperCase()) {
|
||||
this.addModel.sectionCode = selected.code;
|
||||
this.activeName = 'second';
|
||||
this.field = '';
|
||||
this.$emit('signalSectionCode', '');
|
||||
}
|
||||
},
|
||||
hover(field) {
|
||||
this.field = field === this.field ? '' : field;
|
||||
this.$emit('signalSectionCode', this.field);
|
||||
},
|
||||
create() {
|
||||
this.$refs['make'].validate((valid) => {
|
||||
if (valid) {
|
||||
if (this.addModel.sectionCode) {
|
||||
const uid = getUID('Singal');
|
||||
var model = {
|
||||
_type: 'Signal',
|
||||
code: uid,
|
||||
uniqueName: uid,
|
||||
positionType: this.addModel.positionType,
|
||||
directionType: this.addModel.directionType,
|
||||
directionShowType: this.addModel.directionShowType,
|
||||
nameShow: true,
|
||||
namePosition: { x: 0, y: 0 },
|
||||
buttonShow: true,
|
||||
useType: '01',
|
||||
potLampType: '01',
|
||||
lampPostType: '01',
|
||||
lampPositionType: '01',
|
||||
guideShow: false,
|
||||
stationCode: this.addModel.stationCode
|
||||
};
|
||||
this.sectionList.forEach(elem => {
|
||||
if (elem.code === this.addModel.sectionCode) {
|
||||
model.name = 'Signal_' + elem.name.replace('Section_', '');
|
||||
model.linkCode = elem.linkCode;
|
||||
if (this.addModel.leftOrRight === '0') {
|
||||
const beg = elem.points[0];
|
||||
const end = elem.points[0 + 1];
|
||||
const traingle = new JTriangle(beg, end);
|
||||
model.rotate = Math.floor(traingle.getAngle());
|
||||
model.position = { x: elem.points[0].x, y: elem.points[0].y };
|
||||
model.guidePosition = { x: elem.points[0].x, y: elem.points[0].y };
|
||||
model.buttonPosition = { x: elem.points[0].x, y: elem.points[0].y };
|
||||
model.offset = elem.offsetLeft;
|
||||
} else {
|
||||
const r = elem.points.length - 1;
|
||||
const beg = elem.points[r - 1];
|
||||
const end = elem.points[r];
|
||||
const traingle = new JTriangle(beg, end);
|
||||
model.rotate = Math.floor(traingle.getAngle());
|
||||
model.position = { x: elem.points[r].x, y: elem.points[r].y };
|
||||
model.guidePosition = { x: elem.points[r].x, y: elem.points[r].y };
|
||||
model.buttonPosition = { x: elem.points[r].x, y: elem.points[r].y };
|
||||
model.offset = elem.offsetRight;
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
this.$emit('updateMapModel', model);
|
||||
} else {
|
||||
this.$messageBox(this.$t('tip.selectedSectionEmpty'));
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
// 修改对象
|
||||
edit() {
|
||||
this.$refs['dataform'].validate((valid) => {
|
||||
if (valid) {
|
||||
const data = Object.assign({_type: 'Signal'}, this.editModel);
|
||||
this.$emit('updateMapModel', data);
|
||||
}
|
||||
});
|
||||
},
|
||||
// 删除对象
|
||||
deleteObj() {
|
||||
const selected = this.$store.getters['map/getDeviceByCode'](this.editModel.code);
|
||||
if (selected && selected._type === 'Signal') {
|
||||
const _that = this;
|
||||
this.$confirm(this.$t('tip.confirmDeletion'), this.$t('tip.hint'), {
|
||||
confirmButtonText: this.$t('tip.confirm'),
|
||||
cancelButtonText: this.$t('tip.cancel'),
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
_that.$emit('updateMapModel', {...selected, _dispose: true});
|
||||
_that.deviceSelect();
|
||||
}).catch(() => {
|
||||
_that.$message.info(this.$t('tip.cancelledDelete'));
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style rel="stylesheet/scss" lang="scss" scoped>
|
||||
@import "src/styles/mixin.scss";
|
||||
.view-control{
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.card {
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
@ -1,284 +0,0 @@
|
||||
<template>
|
||||
<el-tabs v-model="activeName" class="card">
|
||||
<el-tab-pane class="view-control" :label="$t('map.property')" name="first">
|
||||
<div style="height: calc(100% - 46px);">
|
||||
<el-scrollbar wrap-class="scrollbar-wrapper">
|
||||
<config-list ref="dataform" :form="form" :form-model="editModel" :rules="rules" />
|
||||
</el-scrollbar>
|
||||
</div>
|
||||
<div class="button_box">
|
||||
<el-button-group class="map-draft-group">
|
||||
<el-button type="primary" size="small" @click="edit">{{ $t('map.updateObj') }}</el-button>
|
||||
<el-button type="danger" size="small" @click="deleteObj">{{ $t('map.deleteObj') }}</el-button>
|
||||
</el-button-group>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane class="view-control" :label="$t('map.newConstruction')" name="second">
|
||||
<div style="height: calc(100% - 46px);">
|
||||
<el-scrollbar wrap-class="scrollbar-wrapper">
|
||||
<el-form ref="make" label-width="140px" :model="addModel" size="mini" :rules="mergeRules">
|
||||
<el-form-item :label="$t('map.physicalSegmentName')" prop="sectionCode">
|
||||
<el-select v-model="addModel.sectionCode" filterable>
|
||||
<el-option
|
||||
v-for="item in PhysicalSectionList"
|
||||
:key="item.code"
|
||||
:label="item.name + ' (' + item.code+ ')'"
|
||||
:value="item.code"
|
||||
/>
|
||||
</el-select>
|
||||
<el-button
|
||||
:type="field === 'selectStationCode' ? 'danger' : 'primary'"
|
||||
size="small"
|
||||
@click="hover('selectStationCode')"
|
||||
>{{ $t('map.activate') }}</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-scrollbar>
|
||||
</div>
|
||||
<div class="button_box">
|
||||
<el-button-group class="map-draft-group">
|
||||
<el-button type="primary" size="small" @click="create">{{ $t('map.create') }}</el-button>
|
||||
</el-button-group>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapGetters } from 'vuex';
|
||||
import { getUID } from '@/jmap/utils/Uid';
|
||||
import ConfigList from './config/list';
|
||||
import { deepAssign } from '@/utils/index';
|
||||
|
||||
export default {
|
||||
name: 'StationDraft',
|
||||
components: {
|
||||
ConfigList
|
||||
},
|
||||
props: {
|
||||
selected: {
|
||||
type: Object,
|
||||
default: function () {
|
||||
return null;
|
||||
}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
activeName: 'first',
|
||||
field: '',
|
||||
editModel: {
|
||||
centralized: false,
|
||||
concentrateStationCode: '',
|
||||
code: '',
|
||||
zcCode: '',
|
||||
visible: true,
|
||||
runPlanName: '',
|
||||
name: '',
|
||||
nameFont: '',
|
||||
nameFontColor: '#FFFFFF',
|
||||
kmPostShow: '',
|
||||
kmRange: 0,
|
||||
kmPost: '',
|
||||
kmPostFont: '',
|
||||
kmPostFontColor: '#FFFFFF',
|
||||
isShowControlMode: '',
|
||||
position: {
|
||||
x: 0,
|
||||
y: 0
|
||||
}
|
||||
},
|
||||
addModel: {
|
||||
sectionCode: ''
|
||||
},
|
||||
skins: [],
|
||||
mergeRules: {
|
||||
sectionCode: [
|
||||
{ required: true, message: this.$t('rules.selectPhysicalExtentName'), trigger: 'blur' }
|
||||
]
|
||||
}
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapGetters('map', [
|
||||
'stationList',
|
||||
'sectionList',
|
||||
'zcList',
|
||||
'lineCode'
|
||||
]),
|
||||
form() {
|
||||
return {
|
||||
labelWidth: '130px',
|
||||
items: {
|
||||
code: {
|
||||
name: '',
|
||||
item: []
|
||||
},
|
||||
draw: {
|
||||
name: this.$t('map.drawData'),
|
||||
item: [
|
||||
{ prop: 'code', label: this.$t('map.stationCode'), type: 'select', optionLabel: 'name&&code', optionValue: 'code', options: this.stationList, change: true, deviceChange: this.deviceChange },
|
||||
{ prop: 'name', label: this.$t('map.stationName'), type: 'input' },
|
||||
{ prop: 'position', label: this.$t('map.stationPosition'), type: 'coordinate', width: '120px', children: [
|
||||
{ prop: 'position.x', firstLevel: 'position', secondLevel: 'x', label: 'x:', type: 'number', labelWidth: '25px' },
|
||||
{ prop: 'position.y', firstLevel: 'position', secondLevel: 'y', label: 'y:', type: 'number', labelWidth: '25px' }
|
||||
] },
|
||||
{ prop: 'visible', label: this.$t('map.stationstandShowName'), type: 'checkbox' },
|
||||
{ prop: 'nameFont', label: this.$t('map.stationNameFont'), type: 'font', placeholder: this.$t('tip.stationFont') },
|
||||
{ prop: 'nameFontColor', label: this.$t('map.stationNameFontColor'), type: 'color' },
|
||||
{ prop: 'kmRange', label: this.$t('map.stationKmRange'), type: 'number', min: 0, placeholder: this.$t('tip.meter') },
|
||||
{ prop: 'kmPost', label: this.$t('map.stationKmPost'), type: 'input' },
|
||||
{ prop: 'kmPostFont', label: this.$t('map.stationKmPostFont'), type: 'font', placeholder: this.$t('tip.kilometerFont') },
|
||||
{ prop: 'kmPostFontColor', label: this.$t('map.stationKmPostFontColor'), type: 'color' }
|
||||
]
|
||||
},
|
||||
map: {
|
||||
name: this.$t('map.mapData'),
|
||||
item: [
|
||||
{ prop: 'concentrateStationCode', label: this.$t('map.concentrateStationCode'), type: 'select', optionLabel: 'code&&name', optionValue: 'code', options: this.stationList },
|
||||
{ prop: 'centralized', label: this.$t('map.centralized'), type: 'checkbox' },
|
||||
{ prop: 'zcCode', label: this.$t('map.zcCode'), type: 'select', optionLabel: 'code&&name', optionValue: 'code', options: this.zcList, isHidden: !this.isZcCode },
|
||||
{ prop: 'runPlanName', label: this.$t('map.stationRunPlanName'), type: 'input' }
|
||||
]
|
||||
}
|
||||
}
|
||||
};
|
||||
},
|
||||
rules() {
|
||||
return {
|
||||
code: [
|
||||
{ required: true, message: this.$t('rules.selectEquipment'), trigger: 'change' }
|
||||
],
|
||||
name: [
|
||||
{ required: true, message: this.$t('rules.stationName'), trigger: 'blur' }
|
||||
],
|
||||
kmRange: [
|
||||
{ required: true, message: this.$t('rules.stationKmRange'), trigger: 'blur' }
|
||||
],
|
||||
kmPost: [
|
||||
{ required: true, message: this.$t('rules.stationKmPost'), trigger: 'blur' }
|
||||
],
|
||||
'position.x': [
|
||||
{ required: true, message: this.$t('rules.pleaseEnterXCoordinate'), trigger: 'blur' }
|
||||
],
|
||||
'position.y': [
|
||||
{ required: true, message: this.$t('rules.pleaseEnterYCoordinate'), trigger: 'blur' }
|
||||
]
|
||||
};
|
||||
},
|
||||
PhysicalSectionList() {
|
||||
let list = [];
|
||||
if (this.sectionList && this.sectionList.length) {
|
||||
list = this.sectionList.filter(elem => { return elem.type === '01' && !elem.isSwitchSection; });
|
||||
}
|
||||
return list;
|
||||
},
|
||||
isZcCode() {
|
||||
return this.editModel.centralized;
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
selected: function (val) {
|
||||
this.deviceSelect(val);
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
deviceChange(code) {
|
||||
this.$emit('setCenter', code);
|
||||
this.deviceSelect(this.$store.getters['map/getDeviceByCode'](code));
|
||||
},
|
||||
deviceSelect(selected) {
|
||||
this.$refs.dataform.resetFields();
|
||||
this.$refs.make.resetFields();
|
||||
if (selected && selected._type.toUpperCase() === 'Station'.toUpperCase()) {
|
||||
this.activeName = 'first';
|
||||
this.editModel = deepAssign(this.editModel, selected);
|
||||
this.editModel.runPlanName = selected.runPlanName || '';
|
||||
}
|
||||
if (this.field.toUpperCase() === 'selectStationCode'.toUpperCase()) {
|
||||
this.addModel.sectionCode = selected.code;
|
||||
this.activeName = 'second';
|
||||
this.field = '';
|
||||
this.$emit('stationSectionCode', '');
|
||||
}
|
||||
},
|
||||
hover(field) {
|
||||
this.field = field === this.field ? '' : field;
|
||||
this.$emit('stationSectionCode', this.field);
|
||||
},
|
||||
create() {
|
||||
this.$refs['make'].validate((valid) => {
|
||||
if (valid) {
|
||||
if (this.addModel.sectionCode) {
|
||||
const uid = getUID('Station');
|
||||
const model = {
|
||||
_type: 'Station',
|
||||
code: uid,
|
||||
zcCode: '',
|
||||
runPlanName: '',
|
||||
visible: true,
|
||||
nameFont: '14px consolas',
|
||||
nameFontColor: '#FFFFFF',
|
||||
kmPost: '1000km~2000km',
|
||||
kmPostShow: true,
|
||||
kmPostFont: '8px consolas',
|
||||
kmPostFontColor: '#FFFFFF',
|
||||
centralized: false,
|
||||
concentrateStationCode: ''
|
||||
};
|
||||
this.sectionList.forEach(elem => {
|
||||
if (elem.code === this.addModel.sectionCode) {
|
||||
const l = 0;
|
||||
const r = elem.points.length - 1;
|
||||
model.name = 'Station_' + elem.name.replace('Station_', '');
|
||||
model.position = {
|
||||
x: elem.points[l].x + (elem.points[r].x - elem.points[l].x) / 2,
|
||||
y: elem.points[l].y
|
||||
};
|
||||
}
|
||||
});
|
||||
|
||||
this.$emit('updateMapModel', model);
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
// 修改对象
|
||||
edit() {
|
||||
this.$refs['dataform'].validate((valid) => {
|
||||
if (valid) {
|
||||
const data = Object.assign({_type: 'Station'}, this.editModel);
|
||||
this.$emit('updateMapModel', data);
|
||||
}
|
||||
});
|
||||
},
|
||||
// 删除对象
|
||||
deleteObj() {
|
||||
const selected = this.$store.getters['map/getDeviceByCode'](this.editModel.code);
|
||||
if (selected && selected._type.toUpperCase() === 'Station'.toUpperCase()) {
|
||||
const _that = this;
|
||||
this.$confirm(this.$t('tip.confirmDeletion'), this.$t('tip.hint'), {
|
||||
confirmButtonText: this.$t('tip.confirm'),
|
||||
cancelButtonText: this.$t('tip.cancel'),
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
_that.$emit('updateMapModel', {...selected, _dispose: true});
|
||||
_that.deviceSelect();
|
||||
}).catch(() => {
|
||||
_that.$message.info(this.$t('tip.cancelledDelete'));
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style rel="stylesheet/scss" lang="scss" scoped>
|
||||
@import "src/styles/mixin.scss";
|
||||
.view-control{
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.card {
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
@ -1,254 +0,0 @@
|
||||
<template>
|
||||
<el-tabs v-model="activeName" class="card">
|
||||
<el-tab-pane class="view-control" :label="$t('map.property')" name="first">
|
||||
<div style="height: calc(100% - 46px);">
|
||||
<el-scrollbar wrap-class="scrollbar-wrapper">
|
||||
<config-list ref="dataform" :form="form" :form-model="editModel" :rules="rules" />
|
||||
</el-scrollbar>
|
||||
</div>
|
||||
<div class="button_box">
|
||||
<el-button-group class="map-draft-group">
|
||||
<el-button type="primary" size="small" @click="edit">{{ $t('map.updateObj') }}</el-button>
|
||||
<el-button type="danger" size="small" @click="deleteObj">{{ $t('map.deleteObj') }}</el-button>
|
||||
</el-button-group>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane class="view-control" :label="$t('map.newConstruction')" name="second">
|
||||
<div style="height: calc(100% - 46px);">
|
||||
<el-scrollbar wrap-class="scrollbar-wrapper">
|
||||
<el-form ref="make" :model="addModel" label-width="120px" size="mini" :rules="makeRules">
|
||||
<el-form-item :label="$t('map.stationstandName')" prop="stationCode">
|
||||
<el-select v-model="addModel.stationCode" filterable>
|
||||
<el-option
|
||||
v-for="item in stationList"
|
||||
:key="item.code"
|
||||
:label="item.name + ' (' + item.code+ ')'"
|
||||
:value="item.code"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-scrollbar>
|
||||
</div>
|
||||
<div class="button_box">
|
||||
<el-button-group class="map-draft-group">
|
||||
<el-button type="primary" size="small" @click="create">{{ $t('map.create') }}</el-button>
|
||||
</el-button-group>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapGetters } from 'vuex';
|
||||
import { getUID } from '@/jmap/utils/Uid';
|
||||
import ConfigList from './config/list';
|
||||
import { deepAssign } from '@/utils/index';
|
||||
|
||||
export default {
|
||||
name: 'StationControlDraft',
|
||||
components: {
|
||||
ConfigList
|
||||
},
|
||||
props: {
|
||||
selected: {
|
||||
type: Object,
|
||||
default: function () {
|
||||
return null;
|
||||
}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
activeName: 'first',
|
||||
editModel: {
|
||||
code: '',
|
||||
name: '',
|
||||
position: {
|
||||
x: 0,
|
||||
y: 0
|
||||
},
|
||||
stationCode: '',
|
||||
zokContent: '',
|
||||
zakContent: '',
|
||||
jjzkContent: '',
|
||||
zbjkContent: '',
|
||||
zzkContent: '',
|
||||
lskContent: ''
|
||||
},
|
||||
addModel: {
|
||||
stationCode: ''
|
||||
},
|
||||
makeRules: {
|
||||
stationCode: [
|
||||
{ required: true, message: this.$t('rules.stationControlStationName'), trigger: 'change' }
|
||||
]
|
||||
}
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapGetters('map', [
|
||||
'stationList',
|
||||
'stationControlList',
|
||||
'lineCode'
|
||||
]),
|
||||
form() {
|
||||
const form = {
|
||||
labelWidth: '160px',
|
||||
items: {
|
||||
code: {
|
||||
name: '',
|
||||
item: []
|
||||
},
|
||||
draw: {
|
||||
name: this.$t('map.drawData'),
|
||||
item: [
|
||||
{ prop: 'code', label: this.$t('map.stationControlCode'), type: 'select', optionLabel: 'code', optionValue: 'code', options: this.stationControlList, change: true, deviceChange: this.deviceChange },
|
||||
{ prop: 'zokContent', label: this.$t('map.zokContent'), type: 'input' },
|
||||
{ prop: 'zakContent', label: this.$t('map.zakContent'), type: 'input' },
|
||||
{ prop: 'jjzkContent', label: this.$t('map.jjzkContent'), type: 'input' },
|
||||
{ prop: 'zzkContent', label: this.$t('map.zzkContent'), type: 'input' },
|
||||
{ prop: 'lskContent', label: `${this.$t('map.interconnected')}:`, type: 'input' },
|
||||
{ prop: 'position', label: this.$t('map.stationControlPosition'), type: 'coordinate', width: '150px', children: [
|
||||
{ prop: 'position.x', firstLevel: 'position', secondLevel: 'x', label: 'x:', type: 'number', labelWidth: '25px' },
|
||||
{ prop: 'position.y', firstLevel: 'position', secondLevel: 'y', label: 'y:', type: 'number', labelWidth: '25px' }
|
||||
] }
|
||||
]
|
||||
},
|
||||
map: {
|
||||
name: this.$t('map.mapData'),
|
||||
item: [
|
||||
{ prop: 'stationCode', label: this.$t('map.equipmentStation'), type: 'select', optionLabel: 'name&&code', optionValue: 'code', options: this.stationList }
|
||||
]
|
||||
}
|
||||
}
|
||||
};
|
||||
return form;
|
||||
},
|
||||
rules() {
|
||||
const rules = {
|
||||
code: [
|
||||
{ required: true, message: this.$t('rules.selectEquipment'), trigger: 'change' }
|
||||
],
|
||||
stationCode: [
|
||||
{ required: true, message: this.$t('rules.stationControlStationCode'), trigger: 'change' }
|
||||
],
|
||||
zokContent: [
|
||||
{ required: true, message: this.$t('rules.stationControlZokContent'), trigger: 'blur' }
|
||||
],
|
||||
zakContent: [
|
||||
{ required: true, message: this.$t('rules.stationControlZakContent'), trigger: 'blur' }
|
||||
],
|
||||
jjzkContent: [
|
||||
{ required: true, message: this.$t('rules.stationControlJjzkContent'), trigger: 'blur' }
|
||||
],
|
||||
zzkContent: [
|
||||
{ required: true, message: this.$t('rules.stationControlZzkContent'), trigger: 'blur' }
|
||||
],
|
||||
'position.x': [
|
||||
{ required: true, message: this.$t('rules.stationControlPositionX'), trigger: 'blur' }
|
||||
],
|
||||
'position.y': [
|
||||
{ required: true, message: this.$t('rules.stationControlPositionY'), trigger: 'blur' }
|
||||
]
|
||||
};
|
||||
// 清空表单验证提示信息
|
||||
this.$nextTick(() => {
|
||||
this.$refs.dataform &&
|
||||
this.$refs.dataform.clearValidate();
|
||||
});
|
||||
|
||||
return rules;
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
selected(val, oldVal) {
|
||||
this.deviceSelect(val);
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
},
|
||||
methods: {
|
||||
deviceChange(code) {
|
||||
this.$emit('setCenter', code);
|
||||
this.deviceSelect(this.$store.getters['map/getDeviceByCode'](code));
|
||||
},
|
||||
deviceSelect(selected) {
|
||||
this.$refs.dataform.resetFields();
|
||||
this.$refs.make.resetFields();
|
||||
if (selected && selected._type.toUpperCase() === 'StationControl'.toUpperCase()) {
|
||||
this.activeName = 'first';
|
||||
this.editModel = deepAssign(this.editModel, selected);
|
||||
} else if (selected && selected._type.toUpperCase() === 'Station'.toUpperCase()) {
|
||||
this.addModel.stationCode = selected.code;
|
||||
}
|
||||
},
|
||||
create() {
|
||||
this.$refs['make'].validate((valid) => {
|
||||
if (valid) {
|
||||
if (this.addModel.stationCode) {
|
||||
const uid = getUID('StationControl');
|
||||
const model = {
|
||||
_type: 'StationControl',
|
||||
code: uid,
|
||||
zokContent: '中控',
|
||||
zbjkContent: '总报警',
|
||||
zakContent: '站控',
|
||||
jjzkContent: '紧急站控',
|
||||
zzkContent: '站中控按钮',
|
||||
lskContent: '连锁控'
|
||||
};
|
||||
this.stationList.forEach(elem => {
|
||||
if (elem.code === this.addModel.stationCode) {
|
||||
model.name = 'StationControl_' + elem.name.replace('Station_', '');
|
||||
model.position = { x: elem.position.x, y: elem.position.y };
|
||||
model.stationCode = elem.code;
|
||||
}
|
||||
});
|
||||
|
||||
this.$emit('updateMapModel', model);
|
||||
} else {
|
||||
this.$messageBox(this.$t('tip.selectedStationEmpty'));
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
// 修改对象
|
||||
edit() {
|
||||
this.$refs['dataform'].validate((valid) => {
|
||||
if (valid) {
|
||||
const data = Object.assign({_type: 'StationControl'}, this.editModel);
|
||||
this.$emit('updateMapModel', data);
|
||||
}
|
||||
});
|
||||
},
|
||||
// 删除对象
|
||||
deleteObj() {
|
||||
const selected = this.$store.getters['map/getDeviceByCode'](this.editModel.code);
|
||||
if (selected && selected._type.toUpperCase() === 'StationControl'.toUpperCase()) {
|
||||
const _that = this;
|
||||
this.$confirm(this.$t('tip.confirmDeletion'), this.$t('tip.hint'), {
|
||||
confirmButtonText: this.$t('tip.confirm'),
|
||||
cancelButtonText: this.$t('tip.cancel'),
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
_that.$emit('updateMapModel', {...selected, _dispose: true});
|
||||
_that.deviceSelect();
|
||||
}).catch(() => {
|
||||
_that.$message.info(this.$t('tip.cancelledDelete'));
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style rel="stylesheet/scss" lang="scss" scoped>
|
||||
@import "src/styles/mixin.scss";
|
||||
.view-control{
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.card {
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
@ -1,308 +0,0 @@
|
||||
<template>
|
||||
<el-tabs v-model="activeName" class="card">
|
||||
<el-tab-pane class="view-control" :label="$t('map.property')" name="first">
|
||||
<div style="height: calc(100% - 46px);">
|
||||
<el-scrollbar wrap-class="scrollbar-wrapper">
|
||||
<config-list ref="dataform" :form="form" :form-model="editModel" :rules="rules" />
|
||||
</el-scrollbar>
|
||||
</div>
|
||||
<div class="button_box">
|
||||
<el-button-group class="map-draft-group">
|
||||
<el-button type="primary" size="small" @click="edit">{{ $t('map.updateObj') }}</el-button>
|
||||
<el-button type="danger" size="small" @click="deleteObj">{{ $t('map.deleteObj') }}</el-button>
|
||||
</el-button-group>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane class="view-control" :label="$t('map.newConstruction')" name="second">
|
||||
<div style="height: calc(100% - 46px);">
|
||||
<el-scrollbar wrap-class="scrollbar-wrapper">
|
||||
<el-form ref="make" label-width="140px" :model="addModel" :rules="createRules" size="mini">
|
||||
<el-form-item :label="$t('map.stationstandName')" prop="stationCode">
|
||||
<el-select v-model="addModel.stationCode" filterable>
|
||||
<el-option
|
||||
v-for="item in stationList"
|
||||
:key="item.code"
|
||||
:label="item.name + ' (' + item.code+ ')'"
|
||||
:value="item.code"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('map.equipmentStation')" prop="deviceStationCode">
|
||||
<el-select v-model="addModel.deviceStationCode" filterable>
|
||||
<el-option
|
||||
v-for="item in stationList"
|
||||
:key="item.code"
|
||||
:label="item.name"
|
||||
:value="item.code"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('map.stationstandDirection')" prop="doorLocationType">
|
||||
<el-select v-model="addModel.doorLocationType" filterable :placeholder="$t('map.pleaseSelect')">
|
||||
<el-option
|
||||
v-for="item in DoorLocationTypeList"
|
||||
:key="item.code"
|
||||
:label="item.name"
|
||||
:value="item.code"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('map.stationstandHasDoor')" prop="hasDoor">
|
||||
<el-checkbox v-model="addModel.hasDoor" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-scrollbar>
|
||||
</div>
|
||||
<div class="button_box">
|
||||
<el-button-group class="map-draft-group">
|
||||
<el-button type="primary" size="small" @click="create">{{ $t('map.create') }}</el-button>
|
||||
</el-button-group>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapGetters } from 'vuex';
|
||||
import { getUID } from '@/jmap/utils/Uid';
|
||||
import ConfigList from './config/list';
|
||||
import { deepAssign } from '@/utils/index';
|
||||
|
||||
export default {
|
||||
name: 'StationStandDraft',
|
||||
components: {
|
||||
ConfigList
|
||||
},
|
||||
props: {
|
||||
selected: {
|
||||
type: Object,
|
||||
default: function () {
|
||||
return null;
|
||||
}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
activeName: 'first',
|
||||
DoorLocationTypeList: [],
|
||||
RunDirectionTypeList: [],
|
||||
/*
|
||||
{ code: '01', name: '朝下' },
|
||||
{ code: '02', name: '朝上' }
|
||||
*/
|
||||
editModel: {
|
||||
code: '',
|
||||
name: '',
|
||||
nameShow: '',
|
||||
doorLocationType: '',
|
||||
deviceStationCode: '',
|
||||
hasDoor: false,
|
||||
width: 0,
|
||||
height: 0,
|
||||
stationCode: '',
|
||||
position: {
|
||||
x: 0,
|
||||
y: 0
|
||||
},
|
||||
visible: true,
|
||||
direction: ''
|
||||
},
|
||||
addModel: {
|
||||
stationCode: '',
|
||||
doorLocationType: '01',
|
||||
deviceStationCode: '',
|
||||
hasDoor: true
|
||||
}
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapGetters('map', [
|
||||
'stationList',
|
||||
'stationStandList',
|
||||
'lineCode'
|
||||
]),
|
||||
form() {
|
||||
const form = {
|
||||
labelWidth: '130px',
|
||||
items: {
|
||||
code: {
|
||||
name: '',
|
||||
item: []
|
||||
},
|
||||
draw: {
|
||||
name: this.$t('map.drawData'),
|
||||
item: [
|
||||
{ prop: 'code', label: this.$t('map.relStandCode'), type: 'select', optionLabel: 'name&&code', optionValue: 'code', options: this.stationStandList, change: true, deviceChange: this.deviceChange },
|
||||
{ prop: 'name', label: this.$t('map.stationstandNameColon'), type: 'input' },
|
||||
{ prop: 'position', label: this.$t('map.stationstandPosition'), type: 'coordinate', width: '120px', children: [
|
||||
{ prop: 'position.x', firstLevel: 'position', secondLevel: 'x', label: 'x:', type: 'number', labelWidth: '25px' },
|
||||
{ prop: 'position.y', firstLevel: 'position', secondLevel: 'y', label: 'y:', type: 'number', labelWidth: '25px' }
|
||||
] },
|
||||
{ prop: 'direction', label: this.$t('map.stationstandTopBottom'), type: 'select', optionLabel: 'name', optionValue: 'code', options: this.RunDirectionTypeList },
|
||||
{ prop: 'visible', label: this.$t('map.stationVisible'), type: 'checkbox' },
|
||||
{ prop: 'doorLocationType', label: this.$t('map.stationstandDirection'), type: 'select', optionLabel: 'name', optionValue: 'code', options: this.DoorLocationTypeList },
|
||||
{ prop: 'hasDoor', label: this.$t('map.stationstandHasDoor'), type: 'checkbox' },
|
||||
{ prop: 'width', label: this.$t('map.stationstandWidth'), type: 'number', min: 0, max: 2000, placeholder: 'px' },
|
||||
{ prop: 'height', label: this.$t('map.stationstandHeight'), type: 'number', min: 0, max: 2000, placeholder: 'px' }
|
||||
]
|
||||
},
|
||||
map: {
|
||||
name: this.$t('map.mapData'),
|
||||
item: [
|
||||
{ prop: 'deviceStationCode', label: this.$t('map.equipmentStation'), type: 'select', optionLabel: 'name', optionValue: 'code', options: this.stationList },
|
||||
{ prop: 'stationCode', label: this.$t('map.belongsStation'), type: 'select', optionLabel: 'name&&code', optionValue: 'code', options: this.stationList }
|
||||
]
|
||||
}
|
||||
}
|
||||
};
|
||||
return form;
|
||||
},
|
||||
rules() {
|
||||
const rules = {
|
||||
code: [
|
||||
{ required: true, message: this.$t('rules.pleaseReSelectDevice'), trigger: 'change' }
|
||||
],
|
||||
stationCode: [
|
||||
{ required: true, message: this.$t('rules.stationCode'), trigger: 'change' }
|
||||
],
|
||||
name: [
|
||||
{ required: true, message: this.$t('rules.stationstandCountName'), trigger: 'change' }
|
||||
],
|
||||
doorLocationType: [
|
||||
{ required: true, message: this.$t('rules.doorLocationType'), trigger: 'change' }
|
||||
],
|
||||
deviceStationCode: [
|
||||
{ required: true, message: this.$t('rules.deviceStationCode'), trigger: 'change' }
|
||||
],
|
||||
direction: [
|
||||
{ required: true, message: this.$t('rules.stationstandDirection'), trigger: 'change' }
|
||||
],
|
||||
width: [
|
||||
{ required: true, message: this.$t('rules.stationstandWidth'), trigger: 'change' }
|
||||
],
|
||||
height: [
|
||||
{ required: true, message: this.$t('rules.stationstandHeight'), trigger: 'change' }
|
||||
],
|
||||
'position.x': [
|
||||
{ required: true, message: this.$t('rules.trainPositionX'), trigger: 'change' }
|
||||
],
|
||||
'position.y': [
|
||||
{ required: true, message: this.$t('rules.trainPositionY'), trigger: 'change' }
|
||||
]
|
||||
};
|
||||
// 清空表单验证提示信息
|
||||
this.$nextTick(() => {
|
||||
this.$refs.dataform &&
|
||||
this.$refs.dataform.clearValidate();
|
||||
});
|
||||
|
||||
return rules;
|
||||
},
|
||||
createRules() {
|
||||
return {
|
||||
stationCode: [
|
||||
{ required: true, message: this.$t('rules.stationCode'), trigger: 'change' }
|
||||
],
|
||||
doorLocationType: [
|
||||
{ required: true, message: this.$t('rules.doorLocationType'), trigger: 'change' }
|
||||
],
|
||||
deviceStationCode: [
|
||||
{ required: true, message: this.$t('rules.deviceStationCode'), trigger: 'change' }
|
||||
]
|
||||
};
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
selected: function (val, oldVal) {
|
||||
this.deviceSelect(val);
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.$Dictionary.doorLocationType().then(list => {
|
||||
this.DoorLocationTypeList = list;
|
||||
});
|
||||
this.$Dictionary.runDirectionType().then(list => {
|
||||
this.RunDirectionTypeList = list;
|
||||
});
|
||||
},
|
||||
methods: {
|
||||
deviceChange(code) {
|
||||
this.$emit('setCenter', code);
|
||||
this.deviceSelect(this.$store.getters['map/getDeviceByCode'](code));
|
||||
},
|
||||
deviceSelect(selected) {
|
||||
this.$refs.dataform.resetFields();
|
||||
this.$refs.make.resetFields();
|
||||
if (selected && selected._type.toUpperCase() === 'StationStand'.toUpperCase()) {
|
||||
this.activeName = 'first';
|
||||
this.editModel = deepAssign(this.editModel, selected);
|
||||
} else if (selected && selected._type.toUpperCase() === 'Station'.toUpperCase()) {
|
||||
this.addModel.stationCode = selected.code;
|
||||
}
|
||||
},
|
||||
create() {
|
||||
this.$refs.make.validate((valid) => {
|
||||
if (valid) {
|
||||
const uid = getUID('StationStand');
|
||||
const model = {
|
||||
_type: 'StationStand',
|
||||
code: uid,
|
||||
width: 40,
|
||||
height: 20,
|
||||
doorLocationType: this.addModel.doorLocationType,
|
||||
deviceStationCode: this.addModel.deviceStationCode,
|
||||
visible: true,
|
||||
direction: '01',
|
||||
hasDoor: this.addModel.hasDoor
|
||||
};
|
||||
this.stationList.forEach(elem => {
|
||||
if (elem.code === this.addModel.stationCode) {
|
||||
model.name = 'StationStand_' + elem.name.replace('Station_', '');
|
||||
model.position = { x: elem.position.x, y: elem.position.y + 40 };
|
||||
model.stationCode = elem.code;
|
||||
}
|
||||
});
|
||||
|
||||
this.$emit('updateMapModel', model);
|
||||
}
|
||||
});
|
||||
},
|
||||
// 修改对象
|
||||
edit() {
|
||||
this.$refs.dataform.validate((valid) => {
|
||||
if (valid) {
|
||||
const data = Object.assign({_type: 'StationStand'}, this.editModel);
|
||||
this.$emit('updateMapModel', data);
|
||||
}
|
||||
});
|
||||
},
|
||||
// 删除对象
|
||||
deleteObj() {
|
||||
const selected = this.$store.getters['map/getDeviceByCode'](this.editModel.code);
|
||||
if (selected && selected._type.toUpperCase() === 'StationStand'.toUpperCase()) {
|
||||
const _that = this;
|
||||
this.$confirm(this.$t('tip.confirmDeletion'), this.$t('tip.hint'), {
|
||||
confirmButtonText: this.$t('tip.confirm'),
|
||||
cancelButtonText: this.$t('tip.cancel'),
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
_that.$emit('updateMapModel', {...selected, _dispose: true});
|
||||
_that.deviceSelect();
|
||||
}).catch(() => {
|
||||
_that.$message.info(this.$t('tip.cancelledDelete'));
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style rel="stylesheet/scss" lang="scss" scoped>
|
||||
@import "src/styles/mixin.scss";
|
||||
.view-control{
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.card {
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
@ -1,513 +0,0 @@
|
||||
<template>
|
||||
<el-tabs v-model="activeName" class="card">
|
||||
<el-tab-pane class="view-control" :label="$t('map.property')" name="first">
|
||||
<div style="height: calc(100% - 46px);">
|
||||
<el-scrollbar wrap-class="scrollbar-wrapper">
|
||||
<config-list ref="dataform" :form="form" :form-model="editModel" :rules="rules" />
|
||||
</el-scrollbar>
|
||||
</div>
|
||||
<div class="button_box">
|
||||
<el-button-group class="map-draft-group">
|
||||
<el-button type="primary" size="small" @click="edit">{{ $t('map.updateObj') }}</el-button>
|
||||
<el-button type="danger" size="small" @click="deleteObj">{{ $t('map.deleteObj') }}</el-button>
|
||||
</el-button-group>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane class="view-control" :label="$t('map.newConstruction')" name="second">
|
||||
<div class="flex_box">
|
||||
<el-button type="primary" @click="create">{{ $t('map.createSwitch') }}</el-button>
|
||||
<el-button type="" @click="questionList = []">{{ $t('map.clearHint') }}</el-button>
|
||||
</div>
|
||||
<div style="height: calc(100% - 46px);">
|
||||
<el-scrollbar wrap-class="scrollbar-wrapper">
|
||||
<el-card v-if="questionList.length" class="box-card">
|
||||
<div v-for="(item, index) in questionList" :key="index" class="text item">{{ item }}</div>
|
||||
</el-card>
|
||||
</el-scrollbar>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapGetters } from 'vuex';
|
||||
import { getUID } from '@/jmap/utils/Uid';
|
||||
import ConfigList from './config/list';
|
||||
import { deepAssign } from '@/utils/index';
|
||||
|
||||
export default {
|
||||
name: 'SwitchDraft',
|
||||
components: {
|
||||
ConfigList
|
||||
},
|
||||
props: {
|
||||
selected: {
|
||||
type: Object,
|
||||
default: function () {
|
||||
return null;
|
||||
}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
activeName: 'first',
|
||||
questionList: [],
|
||||
editModel: {
|
||||
code: '',
|
||||
name: '',
|
||||
turnTime: 0,
|
||||
nameShow: false,
|
||||
namePosition: { x: 0, y: 0 },
|
||||
stationCode: '',
|
||||
timeoutShow: false,
|
||||
sectionACode: '',
|
||||
sectionBCode: '',
|
||||
sectionCCode: '',
|
||||
tp: { x: 0, y: 0 }
|
||||
}
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
form() {
|
||||
const form = {
|
||||
labelWidth: '170px',
|
||||
items: {
|
||||
code: {
|
||||
name: '',
|
||||
item: []
|
||||
},
|
||||
draw: {
|
||||
name: this.$t('map.drawData'),
|
||||
item: [
|
||||
{ prop: 'code', label: this.$t('map.switchCode'), type: 'select', optionLabel: 'name&&code', optionValue: 'code', options: this.switchList, change: true, deviceChange: this.deviceChange },
|
||||
{ prop: 'name', label: this.$t('map.switchName'), type: 'input' },
|
||||
{ prop: 'namePosition', label: this.$t('map.switchPosition'), type: 'coordinate', width: '160px', children: [
|
||||
{ prop: 'namePosition.x', firstLevel: 'namePosition', secondLevel: 'x', label: 'x:', type: 'number', labelWidth: '25px' },
|
||||
{ prop: 'namePosition.y', firstLevel: 'namePosition', secondLevel: 'y', label: 'y:', type: 'number', labelWidth: '25px' }
|
||||
] },
|
||||
{ prop: 'tp', label: this.$t('map.switchTp'), type: 'coordinate', width: '160px', children: [
|
||||
{ prop: 'tp.x', firstLevel: 'tp', secondLevel: 'x', label: 'x:', type: 'number', labelWidth: '25px' },
|
||||
{ prop: 'tp.y', firstLevel: 'tp', secondLevel: 'y', label: 'y:', type: 'number', labelWidth: '25px' }
|
||||
] }
|
||||
]
|
||||
},
|
||||
map: {
|
||||
name: this.$t('map.mapData'),
|
||||
item: [
|
||||
{ prop: 'stationCode', label: this.$t('map.equipmentStation'), type: 'select', optionLabel: 'name&&code', optionValue: 'code', options: this.stationList },
|
||||
{ prop: 'turnTime', label: this.$t('map.turnTime'), type: 'number', min: 0, max: 1000, placeholder: 's' }
|
||||
]
|
||||
}
|
||||
}
|
||||
};
|
||||
return form;
|
||||
},
|
||||
rules() {
|
||||
const rules = {
|
||||
code: [
|
||||
{ required: true, message: this.$t('rules.selectEquipment'), trigger: 'change' }
|
||||
],
|
||||
name: [
|
||||
{ required: true, message: this.$t('rules.switchName'), trigger: 'blur' }
|
||||
],
|
||||
'namePosition.x': [
|
||||
{ required: true, message: this.$t('rules.switchNamePointX'), trigger: 'blur' }
|
||||
],
|
||||
'namePosition.y': [
|
||||
{ required: true, message: this.$t('rules.switchNamePointY'), trigger: 'blur' }
|
||||
],
|
||||
turnTime: [
|
||||
{ required: true, message: this.$t('rules.switchTurnTime'), trigger: 'blur' }
|
||||
],
|
||||
'tp.x': [
|
||||
{ required: true, message: this.$t('rules.switchTpX'), trigger: 'blur' }
|
||||
],
|
||||
'tp.y': [
|
||||
{ required: true, message: this.$t('rules.switchTpY'), trigger: 'blur' }
|
||||
]
|
||||
};
|
||||
// 清空表单验证提示信息
|
||||
this.$nextTick(() => {
|
||||
this.$refs.dataform &&
|
||||
this.$refs.dataform.clearValidate();
|
||||
});
|
||||
|
||||
return rules;
|
||||
},
|
||||
...mapGetters('map', [
|
||||
'linkList',
|
||||
'sectionList',
|
||||
'switchList',
|
||||
'stationList',
|
||||
'lineCode'
|
||||
])
|
||||
},
|
||||
watch: {
|
||||
selected: function (val, oldVal) {
|
||||
this.deviceSelect(val);
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
filterSections(query, item) {
|
||||
return item.pinyin.indexOf(query) > -1;
|
||||
},
|
||||
deviceChange(code) {
|
||||
this.$emit('setCenter', code);
|
||||
this.deviceSelect(this.$store.getters['map/getDeviceByCode'](code));
|
||||
},
|
||||
deviceSelect(selected) {
|
||||
this.$refs.dataform.resetFields();
|
||||
if (selected && selected._type.toUpperCase() === 'Switch'.toUpperCase()) {
|
||||
this.activeName = 'first';
|
||||
this.editModel = deepAssign(this.editModel, selected);
|
||||
}
|
||||
},
|
||||
create() { // 一键生成道岔
|
||||
this.questionList = []; // 有问题区段列表
|
||||
const models = [];
|
||||
const linkObj = {};
|
||||
this.linkList.forEach(link => {
|
||||
if (link && link.leftFdCode && link.leftSdCode) { // 左侧同时都有关联link
|
||||
linkObj[`${link.code}`] = { name: '', num: 0 };
|
||||
linkObj[`${link.leftSdCode}`] = { name: '', num: 0 };
|
||||
} else if (link && link.rightFdCode && link.rightSdCode) { // 右侧同时都有关联link
|
||||
linkObj[`${link.code}`] = { name: '', num: 0 };
|
||||
linkObj[`${link.rightSdCode}`] = { name: '', num: 0 };
|
||||
} else if (link && link.leftFdCode && !link.leftSdCode && link.rightFdCode && !link.rightSdCode) { // 左右正向link关联，侧向link不关联检测
|
||||
linkObj[`${link.code}`] = { name: '', num: 0 };
|
||||
}
|
||||
});
|
||||
this.sectionList.forEach(section => {
|
||||
for (const link in linkObj) {
|
||||
if (section.linkCode == link) {
|
||||
linkObj[link].num++;
|
||||
linkObj[link].name = section.name;
|
||||
}
|
||||
}
|
||||
const uname = 'switch_' + section.name.replace('section_', '');
|
||||
const link = this.findLinkData(section.linkCode);
|
||||
if (link && link.leftFdCode && link.leftSdCode) {
|
||||
const node = this.findLinkData(link.leftSdCode); // 寻找 侧段link
|
||||
if (node) {
|
||||
const lFdSection = this.findSectionDataByLinkCodeAndPoint(link.leftFdCode, section.points[0]);
|
||||
const lSdSection = this.findSectionDataByLinkCodeAndPoint(link.leftSdCode, section.points[0]);
|
||||
|
||||
if (lFdSection && lSdSection) {
|
||||
const model = {
|
||||
_type: 'Switch',
|
||||
code: getUID('Switch'),
|
||||
name: uname,
|
||||
nameShow: true,
|
||||
timeoutShow: true,
|
||||
sectionACode: section.code,
|
||||
sectionBCode: lFdSection.code,
|
||||
sectionCCode: lSdSection.code,
|
||||
namePosition: { x: 0, y: 0 },
|
||||
turnTime: 3,
|
||||
tp: { x: 0, y: 0 },
|
||||
lp: {
|
||||
x: lFdSection.points[lFdSection.points.length - 1].x,
|
||||
y: lFdSection.points[lFdSection.points.length - 1].y
|
||||
},
|
||||
rp: {
|
||||
x: lSdSection.points[lSdSection.points.length - 2].x,
|
||||
y: lSdSection.points[lSdSection.points.length - 2].y
|
||||
},
|
||||
intersection: {
|
||||
x: section.points[0].x,
|
||||
y: section.points[0].y
|
||||
},
|
||||
skew: {
|
||||
x: lSdSection.points[lSdSection.points.length - 2].x,
|
||||
y: lSdSection.points[lSdSection.points.length - 2].y
|
||||
}
|
||||
};
|
||||
const swch = this.findSwitchData(model.sectionACode, model.sectionBCode, model.sectionCCode);
|
||||
!swch && models.push(model); // 已有的道岔不在创建
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if (link && link.rightFdCode && link.rightSdCode) {
|
||||
const node = this.findLinkData(link.rightSdCode);
|
||||
if (node) {
|
||||
const rFdSection = this.findSectionDataByLinkCodeAndPoint(link.rightFdCode, section.points[section.points.length - 1]);
|
||||
const rSdSection = this.findSectionDataByLinkCodeAndPoint(link.rightSdCode, section.points[section.points.length - 1]);
|
||||
if (rFdSection && rSdSection) {
|
||||
const model = {
|
||||
_type: 'Switch',
|
||||
code: getUID('Switch'),
|
||||
name: uname,
|
||||
nameShow: true,
|
||||
timeoutShow: true,
|
||||
sectionACode: section.code,
|
||||
sectionBCode: rFdSection.code,
|
||||
sectionCCode: rSdSection.code,
|
||||
namePosition: { x: 0, y: 0 },
|
||||
turnTime: 3,
|
||||
tp: { x: 0, y: 0 },
|
||||
lp: {
|
||||
x: rFdSection.points[0].x,
|
||||
y: rFdSection.points[0].y
|
||||
},
|
||||
rp: {
|
||||
x: rSdSection.points[1].x,
|
||||
y: rSdSection.points[1].y
|
||||
},
|
||||
intersection: {
|
||||
x: section.points[section.points.length - 1].x,
|
||||
y: section.points[section.points.length - 1].y
|
||||
},
|
||||
skew: {
|
||||
x: rSdSection.points[1].x,
|
||||
y: rSdSection.points[1].y
|
||||
}
|
||||
};
|
||||
const swch = this.findSwitchData(model.sectionACode, model.sectionBCode, model.sectionCCode);
|
||||
!swch && models.push(model);
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
const createArr = [];
|
||||
models.forEach((item) => {
|
||||
const sectionA = this.$store.getters['map/getDeviceByCode'](item.sectionACode);
|
||||
// const sectionB = this.$store.getters['map/getDeviceByCode'](item.sectionBCode);
|
||||
const sectionC = this.$store.getters['map/getDeviceByCode'](item.sectionCCode);
|
||||
if (linkObj[sectionA.linkCode] && linkObj[sectionC.linkCode]) {
|
||||
if (linkObj[sectionA.linkCode].num > 1 && linkObj[sectionC.linkCode].num > 1 ) {
|
||||
createArr.push(item);
|
||||
}
|
||||
} else {
|
||||
console.log(linkObj, item, sectionC, linkObj[sectionC.linkCode]);
|
||||
this.questionList.push(`${this.$t('map.section')}${linkObj[sectionA.linkCode].name}${this.$t('tip.linkNoneSplit')}, ${this.$t('tip.createSwitchPortion')}`);
|
||||
// this.questionList.push(`${this.$t('map.section')}${linkObj[sectionC.linkCode].name}${this.$t('tip.linkNoneSplit')}, ${this.$t('tip.createSwitchPortion')}`);
|
||||
}
|
||||
});
|
||||
this.$confirm(this.$t('tip.confirmBatchGeneration'), this.$t('tip.hint'), {
|
||||
confirmButtonText: this.$t('tip.confirm'),
|
||||
cancelButtonText: this.$t('tip.cancel'),
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
for (const link in linkObj) {
|
||||
if (linkObj[link].num == 1) {
|
||||
this.questionList.push(`${this.$t('map.section')}${linkObj[link].name}${this.$t('tip.linkNoneSplit')}, ${this.$t('tip.createSwitchPortion')}`);
|
||||
}
|
||||
}
|
||||
const models = this.createSwitchSection(createArr);
|
||||
models.forEach(item => {
|
||||
createArr.push(item);
|
||||
});
|
||||
this.$emit('updateMapModel', createArr);
|
||||
}).catch(() => {
|
||||
this.$message({
|
||||
type: 'info',
|
||||
message: this.$t('tip.cancelGeneration')
|
||||
});
|
||||
});
|
||||
},
|
||||
// 修改对象
|
||||
edit() {
|
||||
this.$refs['dataform'].validate((valid) => {
|
||||
if (valid) {
|
||||
const data = Object.assign({_type: 'Switch'}, this.editModel);
|
||||
this.$emit('updateMapModel', data);
|
||||
}
|
||||
});
|
||||
},
|
||||
// 删除对象
|
||||
deleteObj() {
|
||||
const selected = this.$store.getters['map/getDeviceByCode'](this.editModel.code);
|
||||
if (selected && selected._type.toUpperCase() === 'Switch'.toUpperCase()) {
|
||||
const _that = this;
|
||||
this.$confirm(this.$t('tip.confirmDeletion'), this.$t('tip.hint'), {
|
||||
confirmButtonText: this.$t('tip.confirm'),
|
||||
cancelButtonText: this.$t('tip.cancel'),
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
_that.handleDelete(selected);
|
||||
_that.deviceSelect();
|
||||
}).catch(() => {
|
||||
_that.$message.info(this.$t('tip.cancelGeneration'));
|
||||
});
|
||||
}
|
||||
},
|
||||
// 删除道岔/ 关联的道岔区段以及 道岔绑定关系
|
||||
handleDelete(selected) {
|
||||
const models = [];
|
||||
this.sectionList.forEach(elem => {
|
||||
if (elem.type == '03' && elem.relSwitchCode == selected.code) {
|
||||
models.push(deepAssign({ _type: 'Section', code: elem.code }, { _dispose: true }));
|
||||
}
|
||||
if (elem.relSwitchCode == selected.code && elem.type != '03') {
|
||||
elem.relSwitchCode = '';
|
||||
elem.isSwitchSection = false;
|
||||
models.push(elem);
|
||||
}
|
||||
});
|
||||
models.push(deepAssign(selected, { _dispose: true }));
|
||||
this.$emit('updateMapModel', models);
|
||||
},
|
||||
findLinkData(code) {
|
||||
var rtn = null;
|
||||
var linkList = this.linkList;
|
||||
if (linkList && linkList.length) {
|
||||
for (var i = 0; i < linkList.length; ++i) {
|
||||
if (code === linkList[i].code) {
|
||||
rtn = linkList[i];
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
return rtn;
|
||||
},
|
||||
findSectionDataByLinkCodeAndPoint(code, point) {
|
||||
var rtn = null;
|
||||
var sectionList = this.sectionList;
|
||||
if (sectionList && sectionList.length) {
|
||||
for (var i = 0; i < sectionList.length; ++i) {
|
||||
if (code === sectionList[i].linkCode && point) {
|
||||
if (JSON.stringify(sectionList[i].points[0]) === JSON.stringify(point) ||
|
||||
JSON.stringify(sectionList[i].points[sectionList[i].points.length - 1]) === JSON.stringify(point)) {
|
||||
rtn = sectionList[i];
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
return rtn;
|
||||
},
|
||||
findSwitchData(sectionACode, sectionBCode, sectionCCode) {
|
||||
var rtn = null;
|
||||
var switchList = this.switchList;
|
||||
if (switchList && switchList.length) {
|
||||
for (var i = 0; i < switchList.length; ++i) {
|
||||
if (sectionACode === switchList[i].sectionACode &&
|
||||
sectionBCode === switchList[i].sectionBCode &&
|
||||
sectionCCode === switchList[i].sectionCCode) {
|
||||
rtn = switchList[i];
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
return rtn;
|
||||
},
|
||||
// 一键删除道岔区段
|
||||
removeSwitchSection() {
|
||||
const models = [];
|
||||
if (this.sectionList && this.sectionList.length) {
|
||||
this.sectionList.forEach(elem => {
|
||||
// 删除 道岔区段/ 恢复道岔绑定关系
|
||||
if (elem.type === '03' && !elem.parentCode) {
|
||||
models.push(deepAssign({ _type: 'Section', code: elem.code }, { _dispose: true }));
|
||||
}
|
||||
if (elem.relSwitchCode) {
|
||||
elem.relSwitchCode = '';
|
||||
elem.isSwitchSection = false;
|
||||
models.push(elem);
|
||||
}
|
||||
});
|
||||
this.$emit('updateMapModel', models);
|
||||
}
|
||||
},
|
||||
// 一键生成道岔区段
|
||||
createSwitchSection(list) {
|
||||
const models = [];
|
||||
if (list && list.length && this.sectionList && this.sectionList.length) {
|
||||
list.forEach(elem => {
|
||||
const sectiona = deepAssign({}, this.$store.getters['map/getDeviceByCode'](elem.sectionACode));
|
||||
const sectionb = deepAssign({}, this.$store.getters['map/getDeviceByCode'](elem.sectionBCode));
|
||||
const sectionc = deepAssign({}, this.$store.getters['map/getDeviceByCode'](elem.sectionCCode));
|
||||
if (sectiona && sectionb && sectionc) {
|
||||
const uid = getUID('Section');
|
||||
let point = {
|
||||
x: sectiona.points[sectiona.points.length - 1].x,
|
||||
y: sectiona.points[sectiona.points.length - 1].y
|
||||
};
|
||||
if (JSON.stringify(sectiona.points[0]) === JSON.stringify(sectionb.points[sectionb.points.length - 1])) {
|
||||
point = { x: sectiona.points[0].x, y: sectiona.points[0].y };
|
||||
}
|
||||
models.push({
|
||||
_type: 'Section',
|
||||
code: uid,
|
||||
name: sectiona.name || sectionb.name || sectionc.name,
|
||||
type: '03',
|
||||
namePosition: point,
|
||||
isStandTrack: false,
|
||||
kmRangeRight: '',
|
||||
kmRangeLeft: '',
|
||||
region: '',
|
||||
standTrackName: '',
|
||||
standTrackNamePosition: { x: 0, y: 0 },
|
||||
isReentryTrack: false,
|
||||
reentryTrackName: '',
|
||||
reentryTrackNamePosition: { x: 0, y: 0 },
|
||||
isTransferTrack: false,
|
||||
transferTrackName: '',
|
||||
transferTrackNamePosition: { x: 0, y: 0 },
|
||||
isSegmentation: false,
|
||||
segmentationPosition: { x: 0, y: 0 },
|
||||
isSwitchSection: true,
|
||||
relSwitchCode: elem.code,
|
||||
points: [{ x: 0, y: 0 }, { x: 0, y: 0 }],
|
||||
logicSectionNum: 0,
|
||||
logicSectionShow: false,
|
||||
sepTypeLeft: '00',
|
||||
offsetLeft: 0,
|
||||
sepTypeRight: '00',
|
||||
offsetRight: 0,
|
||||
parentCode: '',
|
||||
stationCode: sectiona.stationCode,
|
||||
trainPosType: sectiona.trainPosType,
|
||||
isCurve: false,
|
||||
linkCode: '0'
|
||||
});
|
||||
sectiona.parentCode = uid;
|
||||
sectiona.relSwitchCode = elem.code;
|
||||
sectiona.isSwitchSection = true;
|
||||
sectionb.parentCode = uid;
|
||||
sectionb.relSwitchCode = elem.code;
|
||||
sectionb.isSwitchSection = true;
|
||||
sectionc.parentCode = uid;
|
||||
sectionc.relSwitchCode = elem.code;
|
||||
sectionc.isSwitchSection = true;
|
||||
models.push(sectiona);
|
||||
models.push(sectionb);
|
||||
models.push(sectionc);
|
||||
}
|
||||
});
|
||||
}
|
||||
return models;
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style rel="stylesheet/scss" lang="scss" scoped>
|
||||
@import "src/styles/mixin.scss";
|
||||
.flex_box{
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.box-card {
|
||||
width: calc(100% - 80px);
|
||||
margin: 20px auto 0;
|
||||
padding: 0 20px;
|
||||
.text {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.item {
|
||||
padding: 6px 0;
|
||||
}
|
||||
}
|
||||
|
||||
.view-control{
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.card {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
</style>
|
||||
@ -1,272 +0,0 @@
|
||||
<template>
|
||||
<el-tabs v-model="activeName" class="card">
|
||||
<el-tab-pane class="view-control" :label="$t('map.property')" name="first">
|
||||
<div style="height: calc(100% - 46px);">
|
||||
<el-scrollbar wrap-class="scrollbar-wrapper">
|
||||
<config-list ref="form" :form="form" :form-model="editModel" :rules="rules" />
|
||||
</el-scrollbar>
|
||||
</div>
|
||||
<div class="button_box">
|
||||
<el-button-group class="map-draft-group">
|
||||
<el-button type="primary" size="small" @click="edit">{{ $t('map.updateObj') }}</el-button>
|
||||
<el-button type="danger" size="small" @click="deleteObj">{{ $t('map.deleteObj') }}</el-button>
|
||||
</el-button-group>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane class="view-control" :label="$t('map.newConstruction')" name="second">
|
||||
<div style="height: calc(100% - 46px);">
|
||||
<el-scrollbar wrap-class="scrollbar-wrapper">
|
||||
<el-form ref="make" label-width="110px" :model="addModel" size="mini" :rules="makeRules">
|
||||
<el-form-item :label="$t('map.textContent')" prop="content">
|
||||
<el-input v-model="addModel.content" :placeholder="$t('map.pleaseEnter')" class="input-with-select">
|
||||
<el-select slot="prepend" v-model="addModel.prepend" :placeholder="$t('map.pleaseSelect')">
|
||||
<el-option :label="$t('map.horizontal')" value="H" />
|
||||
<el-option :label="$t('map.vertical')" value="V" />
|
||||
</el-select>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<div class="coordinate">
|
||||
<span class="title" style="width: 110px">{{ $t('map.textPoints') }}</span>
|
||||
<el-form-item
|
||||
label="x:"
|
||||
prop="position.x"
|
||||
style="display: table; float: left; margin-right: 20px;"
|
||||
label-width="25px"
|
||||
>
|
||||
<el-input-number v-model="addModel.position.x" label="x:" />
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
label="y:"
|
||||
prop="position.y"
|
||||
style="display: table; float: left;"
|
||||
label-width="25px"
|
||||
>
|
||||
<el-input-number v-model="addModel.position.y" label="y:" />
|
||||
</el-form-item>
|
||||
</div>
|
||||
</el-form>
|
||||
</el-scrollbar>
|
||||
</div>
|
||||
<div class="button_box">
|
||||
<el-button-group class="map-draft-group">
|
||||
<el-button type="primary" size="small" @click="create">{{ $t('map.create') }}</el-button>
|
||||
</el-button-group>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapGetters } from 'vuex';
|
||||
import { getUID } from '@/jmap/utils/Uid';
|
||||
import ConfigList from './config/list';
|
||||
import { deepAssign } from '@/utils/index';
|
||||
|
||||
export default {
|
||||
name: 'StationStandDraft',
|
||||
components: {
|
||||
ConfigList
|
||||
},
|
||||
props: {
|
||||
selected: {
|
||||
type: Object,
|
||||
default: function () {
|
||||
return null;
|
||||
}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
activeName: 'first',
|
||||
skins: [],
|
||||
editModel: {
|
||||
code: '',
|
||||
prepend: 'H',
|
||||
content: '',
|
||||
font: '',
|
||||
fontColor: '',
|
||||
position: {
|
||||
x: 0,
|
||||
y: 0
|
||||
}
|
||||
},
|
||||
addModel: {
|
||||
prepend: 'H',
|
||||
content: '',
|
||||
position: {
|
||||
x: 0,
|
||||
y: 0
|
||||
}
|
||||
},
|
||||
rules: {
|
||||
code: [
|
||||
{ required: true, message: this.$t('rules.selectText'), trigger: 'blur' }
|
||||
],
|
||||
content: [
|
||||
{ required: true, message: this.$t('rules.pleaseEnterContent'), trigger: 'blur' }
|
||||
],
|
||||
font: [
|
||||
{ required: true, message: this.$t('rules.textFont'), trigger: 'blur' }
|
||||
],
|
||||
fontColor: [
|
||||
{ required: true, message: this.$t('rules.textFontColor'), trigger: 'blur' }
|
||||
]
|
||||
},
|
||||
makeRules: {
|
||||
code: [
|
||||
{ required: true, message: this.$t('rules.selectText'), trigger: 'blur' }
|
||||
],
|
||||
content: [
|
||||
{ required: true, message: this.$t('rules.pleaseEnterContent'), trigger: 'blur' }
|
||||
],
|
||||
'position.x': [
|
||||
{ required: true, message: this.$t('rules.pleaseEnterXCoordinate'), trigger: 'blur' }
|
||||
],
|
||||
'position.y': [
|
||||
{ required: true, message: this.$t('rules.pleaseEnterYCoordinate'), trigger: 'blur' }
|
||||
]
|
||||
}
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapGetters('map', [
|
||||
'textList',
|
||||
'stationList',
|
||||
'lineCode'
|
||||
]),
|
||||
form() {
|
||||
const form = {
|
||||
labelWidth: '130px',
|
||||
items: {
|
||||
code: {
|
||||
name: '',
|
||||
item: []
|
||||
},
|
||||
draw: {
|
||||
name: this.$t('map.drawData'),
|
||||
item: [
|
||||
{ prop: 'code', label: this.$t('map.textCode'), type: 'select', optionLabel: 'code', optionValue: 'code', options: this.textList, change: true, deviceChange: this.deviceChange },
|
||||
{ prop: 'content', label: this.$t('map.textContent'), type: 'fontContent', content: 'content', prepend: 'prepend', placeholder: this.$t('map.pleaseEnter') },
|
||||
{ prop: 'font', label: this.$t('map.textFont'), type: 'font', placeholder: this.$t('map.font') },
|
||||
{ prop: 'fontColor', label: this.$t('map.textFontColor'), type: 'color' },
|
||||
{ prop: 'position', label: this.$t('map.textPoints'), type: 'coordinate', width: '120px', children: [
|
||||
{ prop: 'position.x', firstLevel: 'position', secondLevel: 'x', label: 'x:', type: 'number', labelWidth: '25px', disabled: false },
|
||||
{ prop: 'position.y', firstLevel: 'position', secondLevel: 'y', label: 'y:', type: 'number', labelWidth: '25px', disabled: false }
|
||||
] }
|
||||
]
|
||||
},
|
||||
map: {
|
||||
name: this.$t('map.mapData'),
|
||||
item: [
|
||||
]
|
||||
}
|
||||
}
|
||||
};
|
||||
return form;
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
selected: function (val, oldVal) {
|
||||
this.deviceSelect(val);
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
deviceChange(code) {
|
||||
this.$emit('setCenter', code);
|
||||
this.deviceSelect(this.$store.getters['map/getDeviceByCode'](code));
|
||||
},
|
||||
deviceSelect(selected) {
|
||||
this.$refs.form.resetFields();
|
||||
this.$refs.make.resetFields();
|
||||
if (selected && selected._type.toUpperCase() === 'Text'.toUpperCase()) {
|
||||
this.activeName = 'first';
|
||||
this.editModel = deepAssign(this.editModel, selected);
|
||||
[this.editModel.prepend, this.editModel.content] = selected.content.split('::');
|
||||
}
|
||||
},
|
||||
create() {
|
||||
this.$refs['make'].validate((valid) => {
|
||||
if (valid) {
|
||||
const model = {
|
||||
_type: 'Text',
|
||||
code: getUID('Text'),
|
||||
font: '14px consolas',
|
||||
fontColor: '#FFFFFF',
|
||||
content: `${this.addModel.prepend}::${this.addModel.content}`,
|
||||
position: {
|
||||
x: this.addModel.position.x,
|
||||
y: this.addModel.position.y
|
||||
}
|
||||
};
|
||||
this.$emit('updateMapModel', model);
|
||||
}
|
||||
});
|
||||
},
|
||||
// 修改对象
|
||||
edit() {
|
||||
this.$refs['form'].validate((valid) => {
|
||||
if (valid) {
|
||||
const data = Object.assign({_type: 'Text'}, this.editModel);
|
||||
data.content = `${this.editModel.prepend}::${this.editModel.content}`;
|
||||
this.$emit('updateMapModel', data);
|
||||
}
|
||||
});
|
||||
},
|
||||
// 删除对象
|
||||
deleteObj() {
|
||||
const selected = this.$store.getters['map/getDeviceByCode'](this.editModel.code);
|
||||
if (selected && selected._type.toUpperCase() === 'Text'.toUpperCase()) {
|
||||
const _that = this;
|
||||
this.$confirm(this.$t('tip.confirmDeletion'), this.$t('tip.hint'), {
|
||||
confirmButtonText: this.$t('tip.confirm'),
|
||||
cancelButtonText: this.$t('tip.cancel'),
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
_that.$emit('updateMapModel', {...selected, _dispose: true});
|
||||
_that.deviceSelect();
|
||||
}).catch(() => {
|
||||
_that.$message.info(this.$t('tip.cancelledDelete'));
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style rel="stylesheet/scss" lang="scss" scoped>
|
||||
@import "src/styles/mixin.scss";
|
||||
.view-control{
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.card {
|
||||
height: 100%;
|
||||
}
|
||||
.coordinate {
|
||||
overflow: hidden;
|
||||
|
||||
.title {
|
||||
text-align: right;
|
||||
font-size: 14px;
|
||||
color: #606266;
|
||||
line-height: 40px;
|
||||
padding: 0 12px 0 0;
|
||||
-webkit-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
line-height: 28px;
|
||||
width: 120px;
|
||||
font-weight: bold;
|
||||
display: block;
|
||||
float: left;
|
||||
margin-right: 7px;
|
||||
}
|
||||
}
|
||||
/deep/ {
|
||||
.el-select .el-input {
|
||||
width: 130px;
|
||||
}
|
||||
|
||||
.input-with-select .el-input-group__prepend {
|
||||
background-color: #fff;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,153 +0,0 @@
|
||||
<template>
|
||||
<el-dialog
|
||||
v-dialogDrag
|
||||
:title="$t('map.createBatch')"
|
||||
:visible.sync="visible"
|
||||
width="400px"
|
||||
:before-close="doClose"
|
||||
>
|
||||
<el-radio-group v-model="mode" class="radio-mode">
|
||||
<el-radio label="01">{{ $t('map.create') }}</el-radio>
|
||||
<el-radio label="02">{{ $t('map.createBatch') }}</el-radio>
|
||||
</el-radio-group>
|
||||
<el-form ref="form" :model="addModel" label-width="90px" size="mini" :rules="rules">
|
||||
<el-form-item v-if="mode == '01'" :label="$t('map.groupNumber')" prop="groupNumber">
|
||||
<el-input v-model="addModel.groupNumber" />
|
||||
</el-form-item>
|
||||
<el-form-item v-if="mode == '02'" :label="$t('map.groupNumberInterval')" prop="range">
|
||||
<el-input-number v-model="addModel.range.beg" :min="1" :max="999" />
|
||||
<el-input-number v-model="addModel.range.end" :min="1" :max="999" />
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('map.modelCode')" prop="modelCode">
|
||||
<el-select v-model="addModel.modelCode" filterable>
|
||||
<el-option
|
||||
v-for="item in trainModelList"
|
||||
:key="item.code"
|
||||
:label="item.name"
|
||||
:value="item.code"
|
||||
/>
|
||||
</el-select>
|
||||
<el-button-group>
|
||||
<el-button type="primary" size="small" @click="newTrainMode">{{ $t('map.add') }}</el-button>
|
||||
<el-button type="primary" size="small" @click="uptTrainMode(addModel.modelCode)">{{ $t('map.updata') }}
|
||||
</el-button>
|
||||
<el-button type="primary" size="small" @click="delTrainMode(addModel.modelCode)">{{ $t('map.deleteObj') }}
|
||||
</el-button>
|
||||
</el-button-group>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button @click="visible = false">{{ $t('map.cancel') }}</el-button>
|
||||
<el-button type="primary" @click="handleConfirm">{{ $t('map.confirm') }}</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getUID } from '@/jmap/utils/Uid';
|
||||
|
||||
export default {
|
||||
props: {
|
||||
trainModelList: {
|
||||
type: Array,
|
||||
required: true
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
mode: '01',
|
||||
visible: false,
|
||||
addModel: {
|
||||
range: {
|
||||
beg: 1,
|
||||
end: 1
|
||||
},
|
||||
groupNumber: '',
|
||||
modelCode: ''
|
||||
},
|
||||
errorTip: this.$t('tip.selectValidInterval')
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
rules() {
|
||||
return {
|
||||
range: [
|
||||
{
|
||||
validator(rule, range, callback) {
|
||||
if (Number.isInteger(range.beg) &&
|
||||
Number.isInteger(range.end) &&
|
||||
range.beg > 0 &&
|
||||
range.end >= range.beg) {
|
||||
callback();
|
||||
} else {
|
||||
callback(new Error(this.errorTip));
|
||||
}
|
||||
},
|
||||
trigger: 'blur'
|
||||
}
|
||||
],
|
||||
modelCode: [
|
||||
{ required: true, message: this.$t('rules.selectTrainType'), trigger: 'change' }
|
||||
]
|
||||
};
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
doShow() {
|
||||
this.visible = true;
|
||||
},
|
||||
doClose() {
|
||||
this.visible = false;
|
||||
},
|
||||
newTrainMode() {
|
||||
this.$emit('dispatch', { callback: 'newTrainMode', params: null});
|
||||
},
|
||||
uptTrainMode(code) {
|
||||
this.$emit('dispatch', { callback: 'uptTrainMode', params: code});
|
||||
},
|
||||
delTrainMode(code) {
|
||||
this.addModel.modelCode = '';
|
||||
this.$emit('dispatch', { callback: 'delTrainMode', params: code});
|
||||
},
|
||||
handleConfirm() {
|
||||
this.$refs['form'].validate((valid) => {
|
||||
if (valid) {
|
||||
const list = [];
|
||||
|
||||
switch (this.mode) {
|
||||
case '01':
|
||||
list.push({
|
||||
_type: 'Train',
|
||||
code: getUID('Train'),
|
||||
modelCode: this.addModel.modelCode,
|
||||
groupNumber: this.addModel.groupNumber
|
||||
});
|
||||
break;
|
||||
case '02':
|
||||
for (var num = this.addModel.range.beg; num <= this.addModel.range.end; num++) {
|
||||
list.push({
|
||||
_type: 'Train',
|
||||
code: getUID('Train'),
|
||||
modelCode: this.addModel.modelCode,
|
||||
groupNumber: ('000' + num).slice(-3)
|
||||
});
|
||||
}
|
||||
break;
|
||||
}
|
||||
|
||||
this.$emit('dispatch', { callback: 'create', params: list});
|
||||
this.doClose();
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style scoped>
|
||||
.radio-mode {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
</style>
|
||||
@ -1,216 +0,0 @@
|
||||
<template>
|
||||
<el-tabs v-model="activeName" class="card">
|
||||
<el-tab-pane class="view-control" :label="$t('map.operation')" name="second">
|
||||
<div style="height: calc(100% - 46px);">
|
||||
<el-scrollbar wrap-class="scrollbar-wrapper">
|
||||
<el-table :data="trainList.filter(data => !search || data.groupNumber.toLowerCase().includes(search.toLowerCase()))" style="width: 100%">
|
||||
<el-table-column :label="$t('map.trainNumber')" prop="groupNumber" />
|
||||
<el-table-column :label="$t('map.codeC')" prop="code" />
|
||||
<el-table-column align="right">
|
||||
<template slot="header">
|
||||
<el-input v-model="search" size="mini" :placeholder="$t('map.pleaseSelect')" />
|
||||
</template>
|
||||
<template slot-scope="scope">
|
||||
<el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">{{ $t('map.deleteObj') }}</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-scrollbar>
|
||||
</div>
|
||||
<div class="button_box">
|
||||
<el-button-group class="map-draft-group">
|
||||
<el-button type="danger" size="small" @click="handleClear">{{ $t('map.clear') }}</el-button>
|
||||
<el-button type="primary" size="small" @click="handleCreate">{{ $t('map.create') }}</el-button>
|
||||
</el-button-group>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
<train-model ref="trainMode" />
|
||||
<create ref="create" :train-model-list="trainModelList" @dispatch="dispatch" />
|
||||
</el-tabs>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapGetters } from 'vuex';
|
||||
import TrainModel from './trainmodel';
|
||||
import Create from './create';
|
||||
|
||||
export default {
|
||||
name: 'TrainDraft',
|
||||
components: {
|
||||
TrainModel,
|
||||
Create
|
||||
},
|
||||
props: {
|
||||
selected: {
|
||||
type: Object,
|
||||
default: function () {
|
||||
return null;
|
||||
}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
activeName: 'second',
|
||||
mapData: null,
|
||||
editModel: {
|
||||
code: '',
|
||||
groupNumber: '',
|
||||
modelCode: ''
|
||||
},
|
||||
rules: {
|
||||
code: [
|
||||
{ required: true, message: this.$t('rules.pleaseReSelectDevice'), trigger: 'change' }
|
||||
],
|
||||
groupNumber: [
|
||||
{ required: true, message: this.$t('rules.pleaseEnterGroupNumber'), trigger: 'blur' }
|
||||
],
|
||||
modelCode: [
|
||||
{ required: true, message: this.$t('rules.selectTrainType'), trigger: 'change' }
|
||||
]
|
||||
},
|
||||
search: ''
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapGetters('map', [
|
||||
'trainList',
|
||||
'trainModelList',
|
||||
'lineCode'
|
||||
])
|
||||
},
|
||||
watch: {
|
||||
selected(val, oldVal) {
|
||||
this.deviceSelect(val);
|
||||
},
|
||||
$route() {
|
||||
// this.activeName = 'first';
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
deviceChange(code) {
|
||||
this.$emit('setCenter', code);
|
||||
this.deviceSelect(this.$store.getters['map/getDeviceByCode'](code));
|
||||
},
|
||||
deviceSelect(selected) {
|
||||
if (selected && selected._type.toUpperCase() === 'Train'.toUpperCase()) {
|
||||
this.editModel.code = selected.code;
|
||||
this.editModel.modelCode = selected.modelCode;
|
||||
this.editModel.groupNumber = selected.groupNumber;
|
||||
// this.activeName = 'first';
|
||||
} else {
|
||||
// this.activeName = 'second';
|
||||
}
|
||||
},
|
||||
create(list) {
|
||||
this.$emit('addOrUpdateMapModel', list);
|
||||
},
|
||||
// 修改对象
|
||||
edit(elem) {
|
||||
// this.$refs['form'].validate((valid) => {
|
||||
// if (valid) {
|
||||
// this.$emit('addOrUpdateMapModel', this.buildEditModel());
|
||||
// }
|
||||
// });
|
||||
},
|
||||
buildEditModel() {
|
||||
// const model = {
|
||||
// _type: 'Train',
|
||||
// code: this.editModel.code,
|
||||
// safeDistance: this.editModel.safeDistance,
|
||||
// maxSafeDistance: this.editModel.maxSafeDistance,
|
||||
// modelCode: this.editModel.modelCode,
|
||||
// groupNumber: this.editModel.groupNumber
|
||||
// };
|
||||
// return model;
|
||||
},
|
||||
newTrainMode() {
|
||||
if (Object.keys(this.$store.state.map.map || {}).length) {
|
||||
this.$refs.trainMode.doShow({}, 'ADD');
|
||||
} else {
|
||||
this.$messageBox(this.$t('tip.selectMap'));
|
||||
}
|
||||
},
|
||||
uptTrainMode(code) {
|
||||
const index = this.trainModelList.findIndex(elem => { return elem.code == code; });
|
||||
if (index >= 0) {
|
||||
this.$refs.trainMode.doShow(this.trainModelList[index], 'UPT');
|
||||
} else {
|
||||
this.$messageBox(this.$t('tip.selectTrainType'));
|
||||
}
|
||||
},
|
||||
delTrainMode(code) {
|
||||
this.$confirm(this.$t('map.wellDelTrianModel'), this.$t('global.tips'), {
|
||||
confirmButtonText: this.$t('global.confirm'),
|
||||
cancelButtonText: this.$t('global.cancel'),
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
if (code) {
|
||||
const model = { code };
|
||||
this.$refs.trainMode.operateTrainModel({ model, type: 'DEL' });
|
||||
}
|
||||
});
|
||||
},
|
||||
handleEdit(index, row) {
|
||||
|
||||
},
|
||||
handleDelete(index, row) {
|
||||
const train = this.$store.getters['map/getDeviceByCode'](row.code);
|
||||
if (train) {
|
||||
this.$confirm(this.$t('tip.confirmDeletion'), this.$t('tip.hint'), {
|
||||
confirmButtonText: this.$t('tip.confirm'),
|
||||
cancelButtonText: this.$t('tip.cancel'),
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
this.$emit('updateMapModel', {...train, _dispose: true});
|
||||
this.deviceSelect();
|
||||
}).catch(() => {
|
||||
this.$message.info(this.$t('tip.cancelledDelete'));
|
||||
});
|
||||
}
|
||||
},
|
||||
handleCreate() {
|
||||
this.$refs.create.doShow();
|
||||
},
|
||||
handleClear() {
|
||||
this.$confirm(this.$t('tip.confirmBatchDelete'), this.$t('tip.hint'), {
|
||||
confirmButtonText: this.$t('tip.confirm'),
|
||||
cancelButtonText: this.$t('tip.cancel'),
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
this.trainList.forEach(item => {
|
||||
item['_dispose'] = true;
|
||||
});
|
||||
this.$emit('updateMapModel', this.trainList);
|
||||
this.deviceSelect();
|
||||
}).catch(() => {
|
||||
this.$message.info(this.$t('tip.cancelledDelete'));
|
||||
});
|
||||
},
|
||||
dispatch(opts) {
|
||||
this[opts.callback](opts.params);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style rel="stylesheet/scss" lang="scss" scoped>
|
||||
@import "src/styles/mixin.scss";
|
||||
.view-control{
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.card {
|
||||
height: 100%;
|
||||
}
|
||||
.button_box{
|
||||
// width: 100%;
|
||||
// background: #f0f0f0;
|
||||
// overflow: hidden;
|
||||
width: 100%;
|
||||
background: #ffffff;
|
||||
overflow: hidden;
|
||||
border-top: 1px #f3f1f1 solid;
|
||||
box-shadow: 4px 7px 10px #565656;
|
||||
border-radius: 0;
|
||||
border-bottom: 1px transparent solid;
|
||||
}
|
||||
</style>
|
||||
@ -1,199 +0,0 @@
|
||||
<template>
|
||||
<el-dialog v-dialogDrag :title="isNew? $t('map.trainmodelCreate'): $t('map.trainmodelUpdate')" :visible.sync="dialogShow" width="30%" :before-close="doClose">
|
||||
<el-card shadow="never">
|
||||
<el-form
|
||||
ref="form"
|
||||
:model="formModel"
|
||||
:rules="rules"
|
||||
label-width="120px"
|
||||
size="mini"
|
||||
style="margin: 20px 20px;"
|
||||
>
|
||||
<el-input v-model="formModel.code" :disabled="!isNew" type="hidden" />
|
||||
<el-form-item :label="$t('map.trainTypeName')" prop="name">
|
||||
<el-input v-model="formModel.name" :disabled="!isNew" />
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('map.trainLength')" prop="length">
|
||||
<el-input-number v-model="formModel.length" :min="0" />{{ $t('map.meter') }}
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('map.trainSafeDistance')" prop="safeDistance">
|
||||
<el-input-number v-model="formModel.safeDistance" :min="0" />{{ $t('map.meter') }}
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('map.trainMaxSafeDistance')" prop="maxSafeDistance">
|
||||
<el-input-number v-model="formModel.maxSafeDistance" :min="0" />{{ $t('map.meter') }}
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('map.averageVelocity')" prop="averageVelocity">
|
||||
<el-input-number v-model="formModel.averageVelocity" :min="0" />km/h
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('map.averageDeceleration')" prop="averageDeceleration">
|
||||
<el-input-number v-model="formModel.averageDeceleration" :min="0" />km/h
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('map.defaultVelocity')" prop="defaultVelocity">
|
||||
<el-input-number v-model="formModel.defaultVelocity" :min="0" />km/h
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('map.maxVelocity')" prop="maxVelocity">
|
||||
<el-input-number v-model="formModel.maxVelocity" :min="0" />km/h
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-card>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button type="primary" @click="handleSure">{{ isNew? $t('map.create'): $t('map.updata') }}</el-button>
|
||||
<el-button @click="dialogShow = false">{{ $t('map.cancel') }}</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getUID } from '@/jmap/utils/Uid';
|
||||
import { mapGetters } from 'vuex';
|
||||
|
||||
export default {
|
||||
name: 'TrainModeOperate',
|
||||
data() {
|
||||
return {
|
||||
dialogShow: false,
|
||||
loading: false,
|
||||
rules: null,
|
||||
mapList: [],
|
||||
formModel: {
|
||||
code: '',
|
||||
name: '',
|
||||
length: 0,
|
||||
safeDistance: '',
|
||||
maxSafeDistance: '',
|
||||
averageVelocity: 0,
|
||||
averageDeceleration: 0,
|
||||
defaultVelocity: 0,
|
||||
maxVelocity: 0
|
||||
},
|
||||
type: ''
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapGetters('map', [
|
||||
'trainModelList'
|
||||
]),
|
||||
addRules() {
|
||||
return {
|
||||
code: [
|
||||
{ required: true, message: this.$t('rules.trainCode'), trigger: 'change' }
|
||||
],
|
||||
name: [
|
||||
{ required: true, message: this.$t('rules.pleaseEnterTrainTypeName'), trigger: 'change' },
|
||||
{
|
||||
validator: (rule, name, callback) =>{
|
||||
if (this.type == 'ADD' && (this.trainModelList || []).findIndex(elem => { return elem.name == name; }) < 0) {
|
||||
callback();
|
||||
} else {
|
||||
callback(new Error(this.$t('tip.trainModelNameRepeat')));
|
||||
}
|
||||
},
|
||||
trigger: 'change'
|
||||
}
|
||||
],
|
||||
length: [
|
||||
{ required: true, message: this.$t('rules.trainLength'), trigger: 'change' }
|
||||
],
|
||||
safeDistance: [
|
||||
{ required: true, message: this.$t('rules.safeDistance'), trigger: 'change' }
|
||||
],
|
||||
maxSafeDistance: [
|
||||
{ required: true, message: this.$t('rules.maxSafeDistance'), trigger: 'change' }
|
||||
],
|
||||
averageVelocity: [
|
||||
{ required: true, message: this.$t('rules.averageVelocity'), trigger: 'change' }
|
||||
],
|
||||
averageDeceleration: [
|
||||
{ required: true, message: this.$t('rules.averageDeceleration'), trigger: 'change' }
|
||||
],
|
||||
defaultVelocity: [
|
||||
{ required: true, message: this.$t('rules.defaultVelocity'), trigger: 'change' }
|
||||
],
|
||||
maxVelocity: [
|
||||
{ required: true, message: this.$t('rules.maxVelocity'), trigger: 'change' }
|
||||
]
|
||||
};
|
||||
},
|
||||
viewRules() {
|
||||
return {};
|
||||
},
|
||||
isNew() {
|
||||
return this.type == 'ADD';
|
||||
},
|
||||
isUpt() {
|
||||
return this.type == 'UPT';
|
||||
},
|
||||
isDel() {
|
||||
return this.type == 'DEL';
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
doShow(model, type) {
|
||||
this.type = type;
|
||||
this.dialogShow = true;
|
||||
this.$nextTick(() => {
|
||||
if (this.$refs && this.$refs.form) {
|
||||
this.$refs.form.resetFields();
|
||||
}
|
||||
if (type !== 'ADD') {
|
||||
if (model) {
|
||||
this.formModel.code = model.code;
|
||||
this.formModel.name = model.name;
|
||||
this.formModel.length = model.length;
|
||||
this.formModel.safeDistance = model.safeDistance;
|
||||
this.formModel.maxSafeDistance = model.maxSafeDistance;
|
||||
this.formModel.averageVelocity = model.averageVelocity;
|
||||
this.formModel.averageDeceleration = model.averageDeceleration;
|
||||
this.formModel.defaultVelocity = model.defaultVelocity;
|
||||
this.formModel.maxVelocity = model.maxVelocity;
|
||||
}
|
||||
this.rules = this.viewRules;
|
||||
} else {
|
||||
this.rules = this.addRules;
|
||||
}
|
||||
|
||||
this.$nextTick(() => {
|
||||
this.$refs.form.clearValidate();
|
||||
});
|
||||
});
|
||||
},
|
||||
doClose() {
|
||||
this.dialogShow = false;
|
||||
},
|
||||
handleSure() {
|
||||
this.$refs.form.validate((valid) => {
|
||||
if (valid) {
|
||||
if (this.isNew) {
|
||||
this.formModel.code = getUID('TrainModel');
|
||||
this.operateTrainModel({ model: this.formModel, type: 'ADD' });
|
||||
} else if (this.isUpt) {
|
||||
this.operateTrainModel({ model: this.formModel, type: 'UPT' });
|
||||
} else if (this.isDel) {
|
||||
this.operateTrainModel({ model: this.formModel, type: 'DEL'});
|
||||
}
|
||||
this.doClose();
|
||||
}
|
||||
});
|
||||
},
|
||||
operateTrainModel({ model, type }) {
|
||||
this.$store.dispatch('map/operateTrainModel', { model, type });
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style rel="stylesheet/scss" lang="scss" scoped>
|
||||
@import "src/styles/mixin.scss";
|
||||
|
||||
.create-box {
|
||||
width: 800px;
|
||||
margin: 0 auto;
|
||||
padding-top: 20px;
|
||||
height: 100%;
|
||||
|
||||
/deep/ {
|
||||
.el-step__icon.is-icon {
|
||||
width: 95px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,309 +0,0 @@
|
||||
<template>
|
||||
<el-tabs v-model="activeName" class="card">
|
||||
<el-tab-pane class="view-control" :label="$t('map.property')" name="first">
|
||||
<div style="height: calc(100% - 46px);">
|
||||
<el-scrollbar wrap-class="scrollbar-wrapper">
|
||||
<config-list ref="form" :form="form" :form-model="editModel" :rules="rules" />
|
||||
</el-scrollbar>
|
||||
</div>
|
||||
<div class="button_box">
|
||||
<el-button-group class="map-draft-group">
|
||||
<el-button type="primary" size="small" @click="edit">{{ $t('map.updateObj') }}</el-button>
|
||||
<el-button type="danger" size="small" @click="deleteObj">{{ $t('map.deleteObj') }}</el-button>
|
||||
</el-button-group>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane class="view-control" :label="$t('map.batchOperation')" name="three">
|
||||
<div style="height: 100%">
|
||||
<el-scrollbar wrap-class="scrollbar-wrapper">
|
||||
<div style="text-align:center;">
|
||||
<el-button type="danger" size="big" @click="removeTrainWindow">{{ $t('map.deleteTrainWindow') }}</el-button>
|
||||
<el-button type="primary" size="big" style="margin-top:10px" @click="createTrainWindow">{{ $t('map.createTrainWindow') }}</el-button>
|
||||
</div>
|
||||
</el-scrollbar>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapGetters } from 'vuex';
|
||||
import { getUID } from '@/jmap/utils/Uid';
|
||||
import JTriangle from '@/jmap/utils/JTriangle';
|
||||
import ConfigList from './config/list';
|
||||
import { deepAssign } from '@/utils/index';
|
||||
|
||||
export default {
|
||||
name: 'TrainWindowDraft',
|
||||
components: {
|
||||
ConfigList
|
||||
},
|
||||
props: {
|
||||
selected: {
|
||||
type: Object,
|
||||
default: function () {
|
||||
return null;
|
||||
}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
activeName: 'first',
|
||||
mapData: null,
|
||||
editModel: {
|
||||
code: '',
|
||||
point: {
|
||||
x: 0,
|
||||
y: 0
|
||||
},
|
||||
width: 0,
|
||||
height: 0,
|
||||
sectionCode: '',
|
||||
isReversal: false
|
||||
},
|
||||
rules: {
|
||||
code: [
|
||||
{ required: true, message: this.$t('rules.pleaseReSelectDevice'), trigger: 'blur' }
|
||||
],
|
||||
'point.x': [
|
||||
{ required: true, message: this.$t('rules.trainPositionX'), trigger: 'blur' }
|
||||
],
|
||||
'point.y': [
|
||||
{ required: true, message: this.$t('rules.trainPositionY'), trigger: 'blur' }
|
||||
],
|
||||
width: [
|
||||
{ required: true, message: this.$t('rules.trainWindowWidth'), trigger: 'blur' }
|
||||
],
|
||||
height: [
|
||||
{ required: true, message: this.$t('rules.trainWindowHeight'), trigger: 'blur' }
|
||||
],
|
||||
sectionCode: [
|
||||
{ required: true, message: this.$t('rules.trainWindowSectionCode'), trigger: 'change' }
|
||||
]
|
||||
|
||||
}
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapGetters('map', [
|
||||
'sectionList',
|
||||
'trainWindowList'
|
||||
]),
|
||||
filterSectionList() {
|
||||
let list = [];
|
||||
if (this.sectionList && this.sectionList.length) {
|
||||
list = this.sectionList.filter(elem => { return !(elem.type == '03' && elem.parentCode); });
|
||||
}
|
||||
return list;
|
||||
},
|
||||
form() {
|
||||
const form = {
|
||||
labelWidth: '120px',
|
||||
items: {
|
||||
code: {
|
||||
name: '',
|
||||
item: []
|
||||
},
|
||||
draw: {
|
||||
name: this.$t('map.drawData'),
|
||||
item: [
|
||||
{ prop: 'code', label: this.$t('map.trainWindowCode'), type: 'select', optionLabel: 'code', optionValue: 'code', options: this.trainWindowList, change: true, deviceChange: this.deviceChange },
|
||||
{ prop: 'width', label: this.$t('map.trainWindowWidth'), type: 'number', min: 0, placeholder: 'px' },
|
||||
{ prop: 'height', label: this.$t('map.trainWindowHeight'), type: 'number', min: 0, placeholder: 'px' },
|
||||
{ prop: 'point', label: this.$t('map.trainWindowPoints'), type: 'coordinate', width: '110px', children: [
|
||||
{ prop: 'point.x', firstLevel: 'point', secondLevel: 'x', label: 'x:', type: 'number', labelWidth: '20px', disabled: false },
|
||||
{ prop: 'point.y', firstLevel: 'point', secondLevel: 'y', label: 'y:', type: 'number', labelWidth: '20px', disabled: false }
|
||||
] }
|
||||
]
|
||||
},
|
||||
map: {
|
||||
name: this.$t('map.mapData'),
|
||||
item: [
|
||||
{ prop: 'sectionCode', label: this.$t('map.trainWindowSectionCode'), type: 'select', optionLabel: 'code&&name', optionValue: 'code', options: this.filterSectionList },
|
||||
{ prop: 'isReversal', label: '车头翻转', type: 'checkbox' }
|
||||
]
|
||||
}
|
||||
}
|
||||
};
|
||||
return form;
|
||||
},
|
||||
style() {
|
||||
return this.$jlmap.style;
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
selected: function (val, oldVal) {
|
||||
this.deviceSelect(val);
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
filterSections(query, item) {
|
||||
return item.pinyin.indexOf(query) > -1;
|
||||
},
|
||||
deviceChange(code) {
|
||||
this.$emit('setCenter', code);
|
||||
this.deviceSelect(this.$store.getters['map/getDeviceByCode'](code));
|
||||
},
|
||||
deviceSelect(selected) {
|
||||
this.$refs.form.resetFields();
|
||||
if (selected && selected._type.toUpperCase() === 'TrainWindow'.toUpperCase()) {
|
||||
this.activeName = 'first';
|
||||
this.editModel = deepAssign(this.editModel, selected);
|
||||
}
|
||||
},
|
||||
createModel(opts) {
|
||||
const model = {
|
||||
_type: 'TrainWindow',
|
||||
code: getUID('TrainWindow'),
|
||||
trainWindowShow: true,
|
||||
point: {},
|
||||
isReversal: false
|
||||
};
|
||||
|
||||
if (opts) {
|
||||
var width = this.style.trainWindowWidth;
|
||||
var height = this.style.trainWindowHeight;
|
||||
const section = opts.section;
|
||||
if (section) {
|
||||
if (section.type !== '03' && opts.triangle) {
|
||||
model.point = opts.triangle.middlePoint();
|
||||
if (opts.triangle.getCosRate() == 1 && opts.triangle.absx < width) {
|
||||
width = opts.triangle.absx;
|
||||
}
|
||||
|
||||
if (opts.triangle.getCosRate() !== 0 && opts.triangle.getCosRate() !== 1) {
|
||||
model.point.x = section.points[0].x;
|
||||
model.point.y = section.points[section.points.length - 1].y;
|
||||
}
|
||||
} else {
|
||||
model.point = {
|
||||
x: section.namePosition.x,
|
||||
y: section.namePosition.y
|
||||
};
|
||||
}
|
||||
|
||||
const distance = (this.style.trainDistance + this.style.trainConflictR * 2 + height);
|
||||
let offsetx = 0;
|
||||
let offsety = 0;
|
||||
if (opts.triangle) {
|
||||
if (opts.triangle.getCosRate() == 1 || opts.triangle.getCosRate() == 0) {
|
||||
offsetx = distance * opts.triangle.getSinRate();
|
||||
offsety = distance * opts.triangle.getCosRate();
|
||||
} else {
|
||||
offsetx = distance;
|
||||
offsety = distance;
|
||||
}
|
||||
} else {
|
||||
offsetx = 0;
|
||||
offsety = distance;
|
||||
}
|
||||
if (section.trainPosType == '01') {
|
||||
model.point.y = model.point.y - height - offsety;
|
||||
model.point.x = model.point.x - offsetx;
|
||||
} else {
|
||||
model.point.x = model.point.x + offsetx;
|
||||
model.point.y = model.point.y + offsety;
|
||||
}
|
||||
model.sectionCode = section.code;
|
||||
model.height = height;
|
||||
model.width = width;
|
||||
}
|
||||
}
|
||||
return model;
|
||||
},
|
||||
// 一键删除车次窗
|
||||
removeTrainWindow() {
|
||||
this.$confirm(this.$t('tip.confirmDeletion'), this.$t('tip.hint'), {
|
||||
confirmButtonText: this.$t('tip.confirm'),
|
||||
cancelButtonText: this.$t('tip.cancel'),
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
const remove = [];
|
||||
if (this.trainWindowList && this.trainWindowList.length) {
|
||||
this.trainWindowList.forEach(elem => {
|
||||
remove.push({
|
||||
_type: 'TrainWindow',
|
||||
code: elem.code,
|
||||
_dispose: true
|
||||
});
|
||||
});
|
||||
this.$emit('updateMapModel', remove);
|
||||
}
|
||||
}).catch(() => {
|
||||
this.$message.info(this.$t('tip.cancelledDelete'));
|
||||
});
|
||||
},
|
||||
// 一键创建车次窗
|
||||
createTrainWindow() {
|
||||
const models = [];
|
||||
const collection = this.sectionList;
|
||||
|
||||
const remove = []; // 清空所有车次窗
|
||||
if (this.trainWindowList && this.trainWindowList.length) {
|
||||
this.trainWindowList.forEach(elem => {
|
||||
remove.push({
|
||||
_type: 'TrainWindow',
|
||||
code: elem.code,
|
||||
_dispose: true
|
||||
});
|
||||
});
|
||||
this.$emit('updateMapModel', remove);
|
||||
}
|
||||
|
||||
if (collection && collection.length) {
|
||||
collection.forEach(elem => {
|
||||
if (elem.type !== '03' && !elem.isSwitchSection && (Number(elem.logicSectionNum) == 0)) {
|
||||
const triangle = new JTriangle(elem.points[0], elem.points[elem.points.length - 1]);
|
||||
models.push(this.createModel({
|
||||
triangle: triangle,
|
||||
section: elem
|
||||
}));
|
||||
} else if (elem.type === '03' && elem.isSwitchSection) {
|
||||
models.push(this.createModel({
|
||||
section: elem
|
||||
}));
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
this.$emit('updateMapModel', models);
|
||||
},
|
||||
// 修改对象
|
||||
edit() {
|
||||
this.$refs['form'].validate((valid) => {
|
||||
if (valid) {
|
||||
const data = Object.assign({_type: 'TrainWindow'}, this.editModel);
|
||||
this.$emit('updateMapModel', data);
|
||||
}
|
||||
});
|
||||
},
|
||||
// 删除对象
|
||||
deleteObj() {
|
||||
const selected = this.$store.getters['map/getDeviceByCode'](this.editModel.code);
|
||||
if (selected && selected._type.toUpperCase() === 'TrainWindow'.toUpperCase()) {
|
||||
const _that = this;
|
||||
this.$confirm(this.$t('tip.confirmDeletion'), this.$t('tip.hint'), {
|
||||
confirmButtonText: this.$t('tip.confirm'),
|
||||
cancelButtonText: this.$t('tip.cancel'),
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
_that.$emit('updateMapModel', {...selected, _dispose: true});
|
||||
_that.deviceSelect();
|
||||
}).catch(() => {
|
||||
_that.$message.info(this.$t('tip.cancelledDelete'));
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style rel="stylesheet/scss" lang="scss" scoped>
|
||||
@import "src/styles/mixin.scss";
|
||||
.view-control{
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.card {
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
@ -1,253 +0,0 @@
|
||||
<template>
|
||||
<el-tabs v-model="activeName" class="card">
|
||||
<el-tab-pane class="view-control" :label="$t('map.property')" name="first">
|
||||
<div style="height: calc(100% - 46px);">
|
||||
<el-scrollbar wrap-class="scrollbar-wrapper">
|
||||
<config-list ref="dataform" :form="form" :form-model="editModel" :rules="rules" />
|
||||
</el-scrollbar>
|
||||
</div>
|
||||
<div class="button_box">
|
||||
<el-button-group class="map-draft-group">
|
||||
<el-button type="primary" size="small" @click="edit">{{ $t('map.updateObj') }}</el-button>
|
||||
<el-button type="danger" size="small" @click="deleteObj">{{ $t('map.deleteObj') }}</el-button>
|
||||
</el-button-group>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane class="view-control" :label="$t('map.newConstruction')" name="second">
|
||||
<div style="height: calc(100% - 46px);">
|
||||
<el-scrollbar wrap-class="scrollbar-wrapper">
|
||||
<config-data ref="make" :form="formMake" :form-model="addModel" :rules="createRules" />
|
||||
</el-scrollbar>
|
||||
</div>
|
||||
<div class="button_box">
|
||||
<el-button-group class="map-draft-group">
|
||||
<el-button type="primary" size="small" @click="create">{{ $t('map.create') }}</el-button>
|
||||
</el-button-group>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapGetters } from 'vuex';
|
||||
import { getUID } from '@/jmap/utils/Uid';
|
||||
import ConfigList from './config/list';
|
||||
import ConfigData from './config/data';
|
||||
import { deepAssign } from '@/utils/index';
|
||||
|
||||
export default {
|
||||
name: 'ZcControlDraft',
|
||||
components: {
|
||||
ConfigList,
|
||||
ConfigData
|
||||
},
|
||||
props: {
|
||||
selected: {
|
||||
type: Object,
|
||||
default: function () {
|
||||
return null;
|
||||
}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
activeName: 'first',
|
||||
mapData: null,
|
||||
editModel: {
|
||||
code: '',
|
||||
name: '',
|
||||
visible: '',
|
||||
position: {
|
||||
x: 0,
|
||||
y: 0
|
||||
}
|
||||
},
|
||||
addModel: {
|
||||
code: '',
|
||||
name: '',
|
||||
visible: '',
|
||||
position: {
|
||||
x: 0,
|
||||
y: 0
|
||||
}
|
||||
},
|
||||
rules: {
|
||||
code: [
|
||||
{ required: true, message: this.$t('rules.pleaseSelectEncoding'), trigger: 'change' }
|
||||
],
|
||||
name: [
|
||||
{ required: true, message: this.$t('rules.pleaseEnterStatusSignal'), trigger: 'blur' }
|
||||
],
|
||||
visible: [
|
||||
{ required: true, message: this.$t('rules.visible'), trigger: 'change' }
|
||||
],
|
||||
'position.x': [
|
||||
{ required: true, message: this.$t('rules.trainPositionX'), trigger: 'blur' }
|
||||
],
|
||||
'position.y': [
|
||||
{ required: true, message: this.$t('rules.trainPositionY'), trigger: 'blur' }
|
||||
]
|
||||
}
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapGetters('map', [
|
||||
'sectionList',
|
||||
'trainModelList',
|
||||
'zcList',
|
||||
'lineCode'
|
||||
]),
|
||||
form() {
|
||||
const form = {
|
||||
labelWidth: '150px',
|
||||
items: {
|
||||
code: {
|
||||
name: '',
|
||||
item: []
|
||||
},
|
||||
draw: {
|
||||
name: this.$t('map.drawData'),
|
||||
item: [
|
||||
{ prop: 'code', label: `${this.$t('map.zcZoneControl')}${this.$t('map.code')}`, type: 'select', optionLabel: 'name&&code', optionValue: 'code', options: this.zcList, change: true, deviceChange: this.deviceChange },
|
||||
{ prop: 'name', label: this.$t('map.statusSignalName'), type: 'input' },
|
||||
{ prop: 'visible', label: this.$t('map.showZc'), type: 'checkboxx' },
|
||||
{ prop: 'position', label: this.$t('map.stateSignalsPlotCoordinates'), type: 'coordinate', width: '140px', children: [
|
||||
{ prop: 'position.x', firstLevel: 'position', secondLevel: 'x', label: 'x:', type: 'number', labelWidth: '20px' },
|
||||
{ prop: 'position.y', firstLevel: 'position', secondLevel: 'y', label: 'y:', type: 'number', labelWidth: '20px' }
|
||||
] }
|
||||
]
|
||||
},
|
||||
map: {
|
||||
name: this.$t('map.mapData'),
|
||||
item: []
|
||||
}
|
||||
}
|
||||
};
|
||||
return form;
|
||||
},
|
||||
formMake() {
|
||||
const form = {
|
||||
labelWidth: '150px',
|
||||
items: [
|
||||
{ prop: 'name', label: this.$t('map.statusSignalName'), type: 'input' },
|
||||
{ prop: 'position', label: this.$t('map.stateSignalsPlotCoordinates'), type: 'coordinate', width: '140px', children: [
|
||||
{ prop: 'position.x', firstLevel: 'position', secondLevel: 'x', label: 'x:', type: 'number', labelWidth: '20px' },
|
||||
{ prop: 'position.y', firstLevel: 'position', secondLevel: 'y', label: 'y:', type: 'number', labelWidth: '20px' }
|
||||
] }
|
||||
]
|
||||
};
|
||||
return form;
|
||||
},
|
||||
createRules: function () {
|
||||
return {
|
||||
name: [
|
||||
{ required: true, message: this.$t('rules.pleaseEnterStatusSignal'), trigger: 'blur' }
|
||||
],
|
||||
'position.x': [
|
||||
{ required: true, message: this.$t('rules.trainPositionX'), trigger: 'blur' }
|
||||
],
|
||||
'position.y': [
|
||||
{ required: true, message: this.$t('rules.trainPositionY'), trigger: 'blur' }
|
||||
]
|
||||
};
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
selected(val, oldVal) {
|
||||
this.deviceSelect(val);
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
},
|
||||
methods: {
|
||||
deviceChange(code) {
|
||||
this.$emit('setCenter', code);
|
||||
this.deviceSelect(this.$store.getters['map/getDeviceByCode'](code));
|
||||
},
|
||||
deviceSelect(selected) {
|
||||
this.$refs.dataform.resetFields();
|
||||
this.$refs.make.resetFields();
|
||||
if (selected && selected._type.toUpperCase() === 'ZcControl'.toUpperCase()) {
|
||||
this.activeName = 'first';
|
||||
this.editModel = deepAssign(this.editModel, selected);
|
||||
}
|
||||
},
|
||||
create() {
|
||||
this.$refs.make.validate((valid) => {
|
||||
if (valid) {
|
||||
const uid = getUID('ZcControl');
|
||||
const model = {
|
||||
_type: 'ZcControl',
|
||||
code: uid,
|
||||
visible: true,
|
||||
name: this.addModel.name,
|
||||
position: {
|
||||
x: this.addModel.position.x,
|
||||
y: this.addModel.position.y
|
||||
}
|
||||
};
|
||||
this.$emit('updateMapModel', model);
|
||||
}
|
||||
});
|
||||
},
|
||||
// 修改对象
|
||||
edit() {
|
||||
this.$refs['dataform'].validate((valid) => {
|
||||
if (valid) {
|
||||
const data = Object.assign({_type: 'ZcControl'}, this.editModel);
|
||||
this.$emit('updateMapModel', data);
|
||||
}
|
||||
});
|
||||
},
|
||||
// 删除对象
|
||||
deleteObj() {
|
||||
const selected = this.$store.getters['map/getDeviceByCode'](this.editModel.code);
|
||||
if (selected && selected._type.toUpperCase() === 'ZcControl'.toUpperCase()) {
|
||||
const _that = this;
|
||||
this.$confirm(this.$t('tip.confirmDeletion'), this.$t('tip.hint'), {
|
||||
confirmButtonText: this.$t('tip.confirm'),
|
||||
cancelButtonText: this.$t('tip.cancel'),
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
_that.$emit('updateMapModel', {...selected, _dispose: true});
|
||||
_that.deviceSelect();
|
||||
}).catch(() => {
|
||||
_that.$message.info(this.$t('tip.cancelledDelete'));
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style rel="stylesheet/scss" lang="scss" scoped>
|
||||
@import "src/styles/mixin.scss";
|
||||
.view-control{
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.card {
|
||||
height: 100%;
|
||||
}
|
||||
.coordinate {
|
||||
overflow: hidden;
|
||||
|
||||
.title {
|
||||
text-align: right;
|
||||
font-size: 14px;
|
||||
color: #606266;
|
||||
line-height: 40px;
|
||||
padding: 0 12px 0 0;
|
||||
-webkit-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
line-height: 28px;
|
||||
width: 160px;
|
||||
font-weight: bold;
|
||||
display: block;
|
||||
float: left;
|
||||
}
|
||||
}
|
||||
|
||||
.map-draft-group {
|
||||
color: #3E44BE;
|
||||
}
|
||||
</style>
|
||||
@ -13,10 +13,10 @@ import { createDevice, deviceIsExist} from '@/api/project';
|
||||
export default {
|
||||
name: 'DeviceAdd',
|
||||
props: {
|
||||
// type: {
|
||||
// type: String,
|
||||
// required: true
|
||||
// }
|
||||
projectCode: {
|
||||
type: String,
|
||||
required: true
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
@ -29,7 +29,13 @@ export default {
|
||||
LessonList: [],
|
||||
UserList: [],
|
||||
UserLoading: false,
|
||||
deviceTypeList:[{label: '道岔', value: 'SWITCH'}, {label: '信号机', value:'SIGNAL'}, {label: '屏蔽门', value: 'PSD'}],
|
||||
deviceTypeList:[
|
||||
{label: '道岔', value: 'SWITCH'},
|
||||
{label: '信号机', value:'SIGNAL'},
|
||||
{label: '屏蔽门', value: 'PSD'},
|
||||
{label: 'IBP盘', value: 'IBP'},
|
||||
{label: '车站', value: 'LW'}
|
||||
],
|
||||
projectList: [{label:'西铁院', value: 'XTY'}, {label: '贵州装备', value:'GZB'}],
|
||||
gatewayList: []
|
||||
};
|
||||
@ -41,7 +47,7 @@ export default {
|
||||
items: [
|
||||
{ prop: 'code', label: this.$t('system.deviceCode'), type: 'text', required: true, placeholder: this.$t('rules.enterDeviceCode') },
|
||||
{ prop: 'type', label: this.$t('system.deviceType1'), type: 'select', required: true, options: this.deviceTypeList, placeholder: this.$t('rules.selectDeviceType') },
|
||||
{ prop: 'projectCode', label: this.$t('system.belongProject'), type: 'select', required: true, options: this.projectList, placeholder: this.$t('rules.selectBelongProject')}
|
||||
{ prop: 'projectCode', label: this.$t('system.belongProject'), type: 'select', required: true, options: this.projectList, placeholder: this.$t('rules.selectBelongProject'), disabled: true}
|
||||
]
|
||||
};
|
||||
return form;
|
||||
@ -69,6 +75,7 @@ export default {
|
||||
methods: {
|
||||
show(data) {
|
||||
this.dialogVisible = true;
|
||||
this.formModel.projectCode = this.projectCode;
|
||||
},
|
||||
doSave() {
|
||||
const self = this;
|
||||
@ -78,7 +85,7 @@ export default {
|
||||
type: this.formModel.type,
|
||||
projectCode: this.formModel.projectCode
|
||||
};
|
||||
deviceIsExist(params.projectCode, params.code).then(response => {
|
||||
deviceIsExist(params.code).then(response => {
|
||||
if (!response.data) {
|
||||
createDevice(params).then(response => {
|
||||
self.$message.success(this.$t('tip.createProjectDeviceSuccessfully'));
|
||||
@ -88,7 +95,7 @@ export default {
|
||||
self.$message.error(this.$t('error.addFailed') + error.message);
|
||||
});
|
||||
} else {
|
||||
self.$message.error(this.$t('tip.deviceCodeTip'));
|
||||
self.$message.error('项目设备编号已存在！');
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
@ -1,28 +1,30 @@
|
||||
<template>
|
||||
<el-dialog v-dialogDrag :title="title" :visible.sync="dialogVisible" width="60%" :before-close="handleClose" center :close-on-click-modal="false">
|
||||
<data-form ref="datatop" :form="formTop" :form-model="formModel" :rules="topRules" />
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="12">
|
||||
<el-card class="box-card">
|
||||
<div slot="header" class="clearfix">
|
||||
<span>输入配置:</span>
|
||||
</div>
|
||||
<div style="margin-top: 20px">
|
||||
<data-form ref="dataleft" :form="formLeft" :form-model="formModel" :rules="leftRules" />
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-card class="box-card">
|
||||
<div slot="header" class="clearfix">
|
||||
<span>输出配置:</span>
|
||||
</div>
|
||||
<div style="margin-top: 20px">
|
||||
<data-form ref="dataright" :form="formRight" :form-model="formModel" :rules="rightRules" />
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-dialog v-dialogDrag :title="title" :visible.sync="dialogVisible" width="500px" :before-close="handleClose" center :close-on-click-modal="false">
|
||||
<el-form v-show="data.type === 'IBP'" ref="formIbp" :model="formIbp" label-width="100px" :rules="rulesIbp">
|
||||
<el-form-item label="显示位置:" prop="part">
|
||||
<el-select v-model="formIbp.part" placeholder="请选择" size="small">
|
||||
<el-option
|
||||
v-for="item in partList"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<el-form v-show="data.type === 'LW'" ref="formLw" :model="formLw" label-width="100px" :rules="rulesLw">
|
||||
<el-form-item label="下辖IBP:" prop="ibpCodeList">
|
||||
<el-select v-model="formLw.ibpCodeList" placeholder="请选择" multiple size="small">
|
||||
<el-option
|
||||
v-for="item in ibpList"
|
||||
:key="item.code"
|
||||
:label="item.code"
|
||||
:value="item.code"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button type="primary" @click="doSave">{{ $t('global.confirm') }}</el-button>
|
||||
<el-button @click="handleClose">{{ $t('global.cancel') }}</el-button>
|
||||
@ -31,7 +33,7 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getDeviceDetail, setPsdConfig, setSignalConfig, setSwitchConfig } from '@/api/project';
|
||||
import { getDeviceDetail, setIbpConfig, setLwConfig, getDevicesByType } from '@/api/project';
|
||||
|
||||
export default {
|
||||
name: 'EditConfig',
|
||||
@ -44,329 +46,33 @@ export default {
|
||||
data() {
|
||||
return {
|
||||
dialogVisible: false,
|
||||
formModel: {},
|
||||
formLeft: {},
|
||||
formRight: {},
|
||||
leftRules: {},
|
||||
rightRules: {},
|
||||
gatewayList: [],
|
||||
setDeviceConfigFunction: null,
|
||||
data: null,
|
||||
psdLeftValue: [
|
||||
{label: '输入-是否关门位', value: 'i_c'},
|
||||
{label: '输入-PSL关门按钮位', value: 'i_dc_b'},
|
||||
{label: '输入-PSL开门按钮位', value: 'i_do_b'},
|
||||
{label: '输入-互锁解除钥匙开关位', value: 'i_ir'},
|
||||
{label: '输入-是否锁闭位', value: 'i_l'},
|
||||
{label: '输入-PSL允许钥匙开关位', value: 'i_psl'},
|
||||
{label: '输入-PSL试灯按钮位', value: 'i_ts_b'}
|
||||
],
|
||||
psdRightValue: [
|
||||
{label: '输出-关门位', value: 'o_c'},
|
||||
{label: '输出-关门信号灯控制位', value: 'o_dc_s'},
|
||||
{label: '输出-关门且锁闭信号灯控制位', value: 'o_dcl_s'},
|
||||
{label: '输出-开门信号灯控制位', value: 'o_do_s'},
|
||||
{label: '输出-互锁解除信号灯控制位', value: 'o_ir_s'},
|
||||
{label: '输出-锁闭位', value: 'o_l'},
|
||||
{label: '输出-开门位', value: 'o_o'},
|
||||
{label: '输出-PSL信号灯控制位', value: 'o_psl_s'}
|
||||
],
|
||||
switchLeftValue: [
|
||||
{label: '输入-故障挤岔表示位', value: 'i_f'},
|
||||
{label: '输入-定位表示位', value: 'i_n'},
|
||||
{label: '输入-反位表示位', value: 'i_r'}
|
||||
],
|
||||
switchRightValue: [
|
||||
{label: '输出-设置故障控制位', value: 'o_f'},
|
||||
{label: '输出-定操控制位', value: 'o_n'},
|
||||
{label: '输出-反操控制位', value: 'o_r'}
|
||||
],
|
||||
signalLeftValue: [
|
||||
{label: '输入-故障表示位', value: 'i_f'},
|
||||
{label: '输入-绿灯表示位', value: 'i_g'},
|
||||
{label: '输入-黄灯表示位', value: 'i_y'},
|
||||
{label: '输入-黄红灯表示位', value: 'i_yr'}
|
||||
],
|
||||
signalRightValue: [
|
||||
{label: '输出-故障控制位', value: 'o_f'},
|
||||
{label: '输出-绿灯控制位', value: 'o_g'},
|
||||
{label: '输出-红灯控制位', value: 'o_r'},
|
||||
{label: '输出-黄灯控制位', value: 'o_y'},
|
||||
{label: '输出-黄红灯控制位', value: 'o_yr'}
|
||||
]
|
||||
data: {},
|
||||
ibpList: [],
|
||||
formIbp: {
|
||||
part: ''
|
||||
},
|
||||
formLw: {
|
||||
ibpCodeList: []
|
||||
},
|
||||
rulesIbp: {
|
||||
part: [
|
||||
{ required: true, message: '请选择显示位置', trigger: 'change' }
|
||||
]
|
||||
},
|
||||
rulesLw: {
|
||||
ibpCodeList: [
|
||||
{ required: true, message: '请选择下辖ibp设备！', trigger: 'change'}
|
||||
]
|
||||
},
|
||||
partList: [{label: '左', value: 'LEFT'}, {label: '右', value: 'RIGHT'}, {label: '全部', value: 'WHOLE'}]
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
formTop() {
|
||||
return {
|
||||
labelWidth: '220px',
|
||||
items: [
|
||||
{ prop: 'gatewayCode', label: '网关编码:', type: 'select', required: true, options: this.gatewayList, placeholder: '请选择网关编码' }
|
||||
]
|
||||
};
|
||||
},
|
||||
topRules() {
|
||||
return {
|
||||
gatewayCode: [
|
||||
{ required: true, message: '请输入网关编码', trigger: 'change' }
|
||||
]
|
||||
};
|
||||
},
|
||||
title() {
|
||||
return '编辑设备配置';
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
initForm(row) {
|
||||
var validateDevice = (rule, value, callback) => {
|
||||
const list = [];
|
||||
rule.list.forEach(item=> {
|
||||
if (item.value !== rule.field && this.formModel[item.value] === value) {
|
||||
list.push(item.label);
|
||||
} else if (item.value === rule.field) {
|
||||
list.push(item.label);
|
||||
}
|
||||
});
|
||||
let flag = false;
|
||||
if (value && value.length) {
|
||||
for (var i = 0; i < value.length; i++) {
|
||||
const ascallCode = value.charCodeAt(i);
|
||||
if (ascallCode > 70 || ascallCode < 48 || (ascallCode > 57 && ascallCode < 65)) {
|
||||
flag = true;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
if (!value) {
|
||||
callback(new Error(rule.messageEmpty));
|
||||
} else if (flag) {
|
||||
callback(new Error('输入的每一位应为十六进制0-F,请修改'));
|
||||
} else if (list.length > 1) {
|
||||
let repeatedValue = '';
|
||||
list.forEach((item, index) => {
|
||||
repeatedValue += item;
|
||||
if (index !== list.length - 1) {
|
||||
repeatedValue += '与';
|
||||
}
|
||||
});
|
||||
callback(new Error(repeatedValue + '位置重复，请调整！'));
|
||||
} else {
|
||||
callback();
|
||||
}
|
||||
};
|
||||
var validateAddr = (rule, value, callback) => {
|
||||
if (!value && value !== 0) {
|
||||
callback(new Error(rule.messageEmpty));
|
||||
} else if (this.formModel.i_addr === this.formModel.o_addr) {
|
||||
callback(new Error('输入网关字地址与输出网关字地址不能相同！'));
|
||||
} else {
|
||||
callback();
|
||||
}
|
||||
};
|
||||
switch (row.type) {
|
||||
case 'PSD': {
|
||||
this.setDeviceConfigFunction = setPsdConfig;
|
||||
this.formLeft = {
|
||||
labelWidth: '220px',
|
||||
items: [
|
||||
{ prop:'i_addr', label:'输入网关字地址:', type: 'number', min: 0, max: 20000, step: 1, precisionFlag: true, precision: 0},
|
||||
{ prop: 'i_c', label: '输入-是否关门位:', type: 'text', rightWidth: '100px', maxlength: 4},
|
||||
{ prop: 'i_dc_b', label: '输入-PSL关门按钮位:', type: 'text', rightWidth: '100px', maxlength: 4},
|
||||
{ prop: 'i_do_b', label: '输入-PSL开门按钮位:', type: 'text', rightWidth: '100px', maxlength: 4},
|
||||
{ prop: 'i_ir', label: '输入-互锁解除钥匙开关位:', type: 'text', rightWidth: '100px', maxlength: 4},
|
||||
{ prop: 'i_l', label: '输入-是否锁闭位:', type: 'text', rightWidth: '100px', maxlength: 4},
|
||||
{ prop: 'i_psl', label: '输入-PSL允许钥匙开关位:', type: 'text', rightWidth: '100px', maxlength: 4},
|
||||
{ prop: 'i_ts_b', label: '输入-PSL试灯按钮位:', type: 'text', rightWidth: '100px', maxlength: 4}
|
||||
]
|
||||
};
|
||||
this.leftRules = {
|
||||
i_addr: [
|
||||
{ validator: validateAddr, messageEmpty: '请填写输入网关字地址', trigger: 'blur' }
|
||||
],
|
||||
i_c: [
|
||||
{ validator: validateDevice, messageEmpty: '请填写输入-是否关门位', list: this.psdLeftValue, trigger: 'blur' }
|
||||
],
|
||||
i_dc_b: [
|
||||
{validator: validateDevice, messageEmpty: '请填写输入-PSL关门按钮位', list: this.psdLeftValue, trigger: 'blur' }
|
||||
],
|
||||
i_do_b: [
|
||||
{ validator: validateDevice, messageEmpty: '请填写输入-PSL开门按钮位', list: this.psdLeftValue, trigger: 'blur' }
|
||||
],
|
||||
i_ir: [
|
||||
{ validator: validateDevice, messageEmpty: '请填写输入-互锁解除钥匙开关位', list: this.psdLeftValue, trigger: 'blur' }
|
||||
],
|
||||
i_l: [
|
||||
{ validator: validateDevice, messageEmpty: '请填写输入-是否锁闭位', list: this.psdLeftValue, trigger: 'blur' }
|
||||
],
|
||||
i_psl: [
|
||||
{ validator: validateDevice, messageEmpty: '请填写输入-PSL允许钥匙开关位', list: this.psdLeftValue, trigger: 'blur' }
|
||||
],
|
||||
i_ts_b: [
|
||||
{ validator: validateDevice, messageEmpty: '请填写输入-PSL试灯按钮位', list: this.psdLeftValue, trigger: 'blur' }
|
||||
]
|
||||
};
|
||||
this.formRight = {
|
||||
labelWidth: '220px',
|
||||
items: [
|
||||
{ prop: 'o_addr', label: '输出网关字地址:', type: 'number', min: 0, max: 20000, step: 1, precisionFlag: true, precision: 0},
|
||||
{ prop: 'o_c', label: '输出-关门位:', type: 'text', rightWidth: '100px', maxlength: 4},
|
||||
{ prop: 'o_dc_s', label: '输出-关门信号灯控制位:', type: 'text', rightWidth: '100px', maxlength: 4},
|
||||
{ prop: 'o_dcl_s', label: '输出-关门且锁闭信号灯控制位:', type: 'text', rightWidth: '100px', maxlength: 4},
|
||||
{ prop: 'o_do_s', label: '输出-开门信号灯控制位:', type: 'text', rightWidth: '100px', maxlength: 4},
|
||||
{ prop: 'o_ir_s', label: '输出-互锁解除信号灯控制位:', type: 'text', rightWidth: '100px', maxlength: 4},
|
||||
{ prop: 'o_l', label: '输出-锁闭位:', type: 'text', rightWidth: '100px', maxlength: 4},
|
||||
{ prop: 'o_o', label: '输出-开门位:', type: 'text', rightWidth: '100px', maxlength: 4},
|
||||
{ prop: 'o_psl_s', label: '输出-PSL信号灯控制位:', type: 'text', rightWidth: '100px', maxlength: 4}
|
||||
]
|
||||
};
|
||||
this.rightRules = {
|
||||
o_addr: [
|
||||
{ validator: validateAddr, messageEmpty: '请填写输出网关字地址', trigger: 'blur' }
|
||||
],
|
||||
o_c: [
|
||||
{ validator: validateDevice, messageEmpty: '请填写输出-关门位', list: this.psdRightValue, trigger: 'blur' }
|
||||
],
|
||||
o_dc_s: [
|
||||
{ validator: validateDevice, messageEmpty: '请填写输出-关门信号灯控制位', list: this.psdRightValue, trigger: 'blur' }
|
||||
],
|
||||
o_dcl_s: [
|
||||
{ validator: validateDevice, messageEmpty: '请填写输出-关门且锁闭信号灯控制位', list: this.psdRightValue, trigger: 'blur' }
|
||||
],
|
||||
o_do_s: [
|
||||
{ validator: validateDevice, messageEmpty: '请填写输出-开门信号灯控制位', list: this.psdRightValue, trigger: 'blur' }
|
||||
],
|
||||
o_ir_s: [
|
||||
{ validator: validateDevice, messageEmpty: '请填写输出-互锁解除信号灯控制位', list: this.psdRightValue, trigger: 'blur' }
|
||||
],
|
||||
o_l: [
|
||||
{ validator: validateDevice, messageEmpty: '请填写输出-锁闭位', list: this.psdRightValue, trigger: 'blur' }
|
||||
],
|
||||
o_o: [
|
||||
{ validator: validateDevice, messageEmpty: '请填写输出-开门位', list: this.psdRightValue, trigger: 'blur' }
|
||||
],
|
||||
o_psl_s: [
|
||||
{ validator: validateDevice, messageEmpty: '请填写输出-PSL信号灯控制位', list: this.psdRightValue, trigger: 'blur' }
|
||||
]
|
||||
};
|
||||
break;
|
||||
}
|
||||
case 'SIGNAL': {
|
||||
this.setDeviceConfigFunction = setSignalConfig;
|
||||
this.formTop.labelWidth = '150px';
|
||||
this.formLeft = {
|
||||
labelWidth: '150px',
|
||||
items: [
|
||||
{ prop:'i_addr', label:'输入网关字地址:', type: 'number', min: 0, max: 20000, step: 1, precisionFlag: true, precision: 0},
|
||||
{ prop: 'i_f', label: '输入-故障表示位:', type: 'text', rightWidth: '100px', maxlength: 4},
|
||||
{ prop: 'i_g', label: '输入-绿灯表示位:', type: 'text', rightWidth: '100px', maxlength: 4},
|
||||
{ prop: 'i_y', label: '输入-黄灯表示位:', type: 'text', rightWidth: '100px', maxlength: 4},
|
||||
{ prop: 'i_yr', label: '输入-黄红灯表示位:', type: 'text', rightWidth: '100px', maxlength: 4}
|
||||
]
|
||||
};
|
||||
this.leftRules = {
|
||||
i_addr: [
|
||||
{ validator: validateAddr, messageEmpty: '请填写输入网关字地址', trigger: 'blur' }
|
||||
],
|
||||
i_f: [
|
||||
{ validator: validateDevice, messageEmpty: '请填写输入-故障表示位', list: this.signalLeftValue, trigger: 'blur' }
|
||||
],
|
||||
i_g: [
|
||||
{ validator: validateDevice, messageEmpty: '请填写输入-绿灯表示位', list: this.signalLeftValue, trigger: 'blur' }
|
||||
],
|
||||
i_y: [
|
||||
{ validator: validateDevice, messageEmpty: '请填写输入-黄灯表示位', list: this.signalLeftValue, trigger: 'blur' }
|
||||
],
|
||||
i_yr: [
|
||||
{ validator: validateDevice, messageEmpty: '请填写输入-黄红灯表示位', list: this.signalLeftValue, trigger: 'blur'}
|
||||
]
|
||||
};
|
||||
this.formRight = {
|
||||
labelWidth: '150px',
|
||||
size: 'mini',
|
||||
items: [
|
||||
{ prop: 'o_addr', label: '输出网关字地址:', type: 'number', min: 0, max: 20000, step: 1, precisionFlag: true, precision: 0},
|
||||
{ prop: 'o_f', label: '输出-故障控制位:', type: 'text', rightWidth: '100px', maxlength: 4},
|
||||
{ prop: 'o_g', label: '输出-绿灯控制位:', type: 'text', rightWidth: '100px', maxlength: 4},
|
||||
{ prop: 'o_r', label: '输出-红灯控制位:', type: 'text', rightWidth: '100px', maxlength: 4},
|
||||
{ prop: 'o_y', label: '输出-黄灯控制位:', type: 'text', rightWidth: '100px', maxlength: 4},
|
||||
{ prop: 'o_yr', label: '输出-黄红灯控制位', type: 'text', rightWidth: '100px', maxlength: 4}
|
||||
]
|
||||
};
|
||||
this.rightRules = {
|
||||
o_addr: [
|
||||
{ validator: validateAddr, messageEmpty: '请填写输出网关字地址', trigger: 'blur' }
|
||||
],
|
||||
o_f: [
|
||||
{ validator: validateDevice, messageEmpty: '请填写输出-故障控制位', list: this.signalRightValue, trigger: 'blur' }
|
||||
],
|
||||
o_g: [
|
||||
{ validator: validateDevice, messageEmpty: '请填写输出-绿灯控制位', list: this.signalRightValue, trigger: 'blur' }
|
||||
],
|
||||
o_r: [
|
||||
{ validator: validateDevice, messageEmpty: '请填写输出-红灯控制位', list: this.signalRightValue, trigger: 'blur' }
|
||||
],
|
||||
o_y: [
|
||||
{ validator: validateDevice, messageEmpty: '请填写输出-黄灯控制位', list: this.signalRightValue, trigger: 'blur' }
|
||||
],
|
||||
o_yr: [
|
||||
{ validator: validateDevice, messageEmpty: '请填写输出-黄红灯控制位', list: this.signalRightValue, trigger: 'blur'}
|
||||
]
|
||||
};
|
||||
break;
|
||||
}
|
||||
case 'SWITCH': {
|
||||
this.setDeviceConfigFunction = setSwitchConfig;
|
||||
this.formTop.labelWidth = '160px';
|
||||
this.formLeft = {
|
||||
labelWidth: '160px',
|
||||
items: [
|
||||
{ prop:'i_addr', label:'输入网关字地址:', type: 'number', min: 0, max: 20000, step: 1, precisionFlag: true, precision: 0},
|
||||
{ prop: 'i_f', label: '输入-故障挤岔表示位:', type: 'text', rightWidth: '100px', maxlength: 4},
|
||||
{ prop: 'i_n', label: '输入-定位表示位:', type: 'text', rightWidth: '100px', maxlength: 4},
|
||||
{ prop: 'i_r', label: '输入-反位表示位:', type: 'text', rightWidth: '100px', maxlength: 4}
|
||||
]
|
||||
};
|
||||
this.leftRules = {
|
||||
i_addr: [
|
||||
{ validator: validateAddr, messageEmpty: '请填写输入网关字地址', trigger: 'blur' }
|
||||
],
|
||||
i_f: [
|
||||
{ validator: validateDevice, messageEmpty: '请填写输入-故障挤岔表示位', list: this.switchLeftValue, trigger: 'blur' }
|
||||
],
|
||||
i_n: [
|
||||
{ validator: validateDevice, messageEmpty: '请填写输入-定位表示位', list: this.switchLeftValue, trigger: 'blur' }
|
||||
],
|
||||
i_r: [
|
||||
{ validator: validateDevice, messageEmpty: '请填写输入-反位表示位', list: this.switchLeftValue, trigger: 'blur' }
|
||||
]
|
||||
};
|
||||
this.formRight = {
|
||||
labelWidth: '160px',
|
||||
items: [
|
||||
{ prop: 'o_addr', label: '输出网关字地址:', type: 'number', min: 0, max: 20000, step: 1, precisionFlag: true, precision: 0},
|
||||
{ prop: 'o_f', label: '输出-故障挤岔控制位:', type: 'text', rightWidth: '100px', maxlength: 4},
|
||||
{ prop: 'o_n', label: '输出-定操控制位:', type: 'text', rightWidth: '100px', maxlength: 4},
|
||||
{ prop: 'o_r', label: '输出-反操控制位:', type: 'text', rightWidth: '100px', maxlength: 4 }
|
||||
]
|
||||
};
|
||||
this.rightRules = {
|
||||
o_addr: [
|
||||
{ validator: validateAddr, messageEmpty: '请填写输出网关字地址', trigger: 'blur' }
|
||||
],
|
||||
o_f: [
|
||||
{ validator: validateDevice, messageEmpty: '请填写输出-故障挤岔控制位', list: this.switchRightValue, trigger: 'blur' }
|
||||
],
|
||||
o_n: [
|
||||
{ validator: validateDevice, messageEmpty: '请填写输出-定操控制位', list: this.switchRightValue, trigger: 'blur' }
|
||||
],
|
||||
o_r: [
|
||||
{ validator: validateDevice, messageEmpty: '请填写输出-反操控制位', list: this.switchRightValue, trigger: 'blur' }
|
||||
]
|
||||
};
|
||||
break;
|
||||
}
|
||||
}
|
||||
},
|
||||
initData(row) {
|
||||
getDeviceDetail(row.id).then(resp => {
|
||||
if (resp.data.config) {
|
||||
@ -375,45 +81,47 @@ export default {
|
||||
}).catch(()=> {
|
||||
this.$message.error('获取项目设备详情失败！');
|
||||
});
|
||||
if (row.projectCode === 'XTY') {
|
||||
this.gatewayList = [{lable:'XTY', value: 'XTY'}];
|
||||
} else if (row.projectCode === 'GZB') {
|
||||
this.gatewayList = [{label: 'GZB_1', value: 'GZB_1'}];
|
||||
}
|
||||
},
|
||||
doShow(row) {
|
||||
this.initData(row);
|
||||
this.initForm(row);
|
||||
this.dialogVisible = true;
|
||||
this.data = row;
|
||||
if (row.type === 'LW') {
|
||||
getDevicesByType('IBP').then(res => {
|
||||
if (res.data && res.data.length) {
|
||||
this.ibpList = res.data;
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
doSave() {
|
||||
const self = this;
|
||||
this.$refs.datatop.validateForm(() => {
|
||||
self.$refs.dataleft.validateForm(()=> {
|
||||
self.$refs.dataright.validateForm(()=> {
|
||||
this.setDeviceConfigFunction(this.data.id, this.formModel).then(response => {
|
||||
self.$message.success('设置设备网关映射配置成功');
|
||||
self.handleClose();
|
||||
self.$emit('reloadTable');
|
||||
}).catch(error => {
|
||||
self.$message.error(this.$t('tip.modifyTheFailure') + error.message);
|
||||
});
|
||||
console.log(this.data.type);
|
||||
if (this.data.type === 'IBP') {
|
||||
this.$refs.formIbp.validate(() => {
|
||||
setIbpConfig(this.data.id, this.formIbp).then(response => {
|
||||
self.$message.success('设置设备网关映射配置成功');
|
||||
self.handleClose();
|
||||
self.$emit('reloadTable');
|
||||
}).catch(error => {
|
||||
self.$message.error(this.$t('tip.modifyTheFailure') + error.message);
|
||||
});
|
||||
});
|
||||
});
|
||||
} else if (this.data.type === 'LW') {
|
||||
this.$refs.formLw.validate(() => {
|
||||
setLwConfig(this.data.id, this.formLw).then(response => {
|
||||
self.$message.success('设置设备网关映射配置成功');
|
||||
self.handleClose();
|
||||
self.$emit('reloadTable');
|
||||
}).catch(error => {
|
||||
self.$message.error(this.$t('tip.modifyTheFailure') + error.message);
|
||||
});
|
||||
});
|
||||
}
|
||||
},
|
||||
handleClose(done) {
|
||||
this.formModel = {};
|
||||
this.formLeft = {};
|
||||
this.formRight = {};
|
||||
this.leftRules = {};
|
||||
this.rightRules = {};
|
||||
this.gatewayList = [];
|
||||
this.dialogVisible = false;
|
||||
this.$refs.datatop.resetForm();
|
||||
this.$refs.dataleft.resetForm();
|
||||
this.$refs.dataright.resetForm();
|
||||
this.data = {};
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
420
src/views/system/deviceManage/editConfigGateway.vue
Normal file
420
src/views/system/deviceManage/editConfigGateway.vue
Normal file
@ -0,0 +1,420 @@
|
||||
<template>
|
||||
<el-dialog v-dialogDrag :title="title" :visible.sync="dialogVisible" width="60%" :before-close="handleClose" center :close-on-click-modal="false">
|
||||
<data-form ref="datatop" :form="formTop" :form-model="formModel" :rules="topRules" />
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="12">
|
||||
<el-card class="box-card">
|
||||
<div slot="header" class="clearfix">
|
||||
<span>输入配置:</span>
|
||||
</div>
|
||||
<div style="margin-top: 20px">
|
||||
<data-form ref="dataleft" :form="formLeft" :form-model="formModel" :rules="leftRules" />
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-card class="box-card">
|
||||
<div slot="header" class="clearfix">
|
||||
<span>输出配置:</span>
|
||||
</div>
|
||||
<div style="margin-top: 20px">
|
||||
<data-form ref="dataright" :form="formRight" :form-model="formModel" :rules="rightRules" />
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button type="primary" @click="doSave">{{ $t('global.confirm') }}</el-button>
|
||||
<el-button @click="handleClose">{{ $t('global.cancel') }}</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getDeviceDetail, setPsdConfig, setSignalConfig, setSwitchConfig } from '@/api/project';
|
||||
|
||||
export default {
|
||||
name: 'EditConfig',
|
||||
props: {
|
||||
// type: {
|
||||
// type: String,
|
||||
// required: true
|
||||
// }
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
dialogVisible: false,
|
||||
formModel: {},
|
||||
formLeft: {},
|
||||
formRight: {},
|
||||
leftRules: {},
|
||||
rightRules: {},
|
||||
gatewayList: [],
|
||||
setDeviceConfigFunction: null,
|
||||
data: null,
|
||||
psdLeftValue: [
|
||||
{label: '输入-是否关门位', value: 'i_c'},
|
||||
{label: '输入-PSL关门按钮位', value: 'i_dc_b'},
|
||||
{label: '输入-PSL开门按钮位', value: 'i_do_b'},
|
||||
{label: '输入-互锁解除钥匙开关位', value: 'i_ir'},
|
||||
{label: '输入-是否锁闭位', value: 'i_l'},
|
||||
{label: '输入-PSL允许钥匙开关位', value: 'i_psl'},
|
||||
{label: '输入-PSL试灯按钮位', value: 'i_ts_b'}
|
||||
],
|
||||
psdRightValue: [
|
||||
{label: '输出-关门位', value: 'o_c'},
|
||||
{label: '输出-关门信号灯控制位', value: 'o_dc_s'},
|
||||
{label: '输出-关门且锁闭信号灯控制位', value: 'o_dcl_s'},
|
||||
{label: '输出-开门信号灯控制位', value: 'o_do_s'},
|
||||
{label: '输出-互锁解除信号灯控制位', value: 'o_ir_s'},
|
||||
{label: '输出-锁闭位', value: 'o_l'},
|
||||
{label: '输出-开门位', value: 'o_o'},
|
||||
{label: '输出-PSL信号灯控制位', value: 'o_psl_s'}
|
||||
],
|
||||
switchLeftValue: [
|
||||
{label: '输入-故障挤岔表示位', value: 'i_f'},
|
||||
{label: '输入-定位表示位', value: 'i_n'},
|
||||
{label: '输入-反位表示位', value: 'i_r'}
|
||||
],
|
||||
switchRightValue: [
|
||||
{label: '输出-设置故障控制位', value: 'o_f'},
|
||||
{label: '输出-定操控制位', value: 'o_n'},
|
||||
{label: '输出-反操控制位', value: 'o_r'}
|
||||
],
|
||||
signalLeftValue: [
|
||||
{label: '输入-故障表示位', value: 'i_f'},
|
||||
{label: '输入-绿灯表示位', value: 'i_g'},
|
||||
{label: '输入-黄灯表示位', value: 'i_y'},
|
||||
{label: '输入-黄红灯表示位', value: 'i_yr'}
|
||||
],
|
||||
signalRightValue: [
|
||||
{label: '输出-故障控制位', value: 'o_f'},
|
||||
{label: '输出-绿灯控制位', value: 'o_g'},
|
||||
{label: '输出-红灯控制位', value: 'o_r'},
|
||||
{label: '输出-黄灯控制位', value: 'o_y'},
|
||||
{label: '输出-黄红灯控制位', value: 'o_yr'}
|
||||
]
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
formTop() {
|
||||
return {
|
||||
labelWidth: '220px',
|
||||
items: [
|
||||
{ prop: 'gatewayCode', label: '网关编码:', type: 'select', required: true, options: this.gatewayList, placeholder: '请选择网关编码' }
|
||||
]
|
||||
};
|
||||
},
|
||||
topRules() {
|
||||
return {
|
||||
gatewayCode: [
|
||||
{ required: true, message: '请输入网关编码', trigger: 'change' }
|
||||
]
|
||||
};
|
||||
},
|
||||
title() {
|
||||
return '编辑设备配置';
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
initForm(row) {
|
||||
var validateDevice = (rule, value, callback) => {
|
||||
const list = [];
|
||||
rule.list.forEach(item=> {
|
||||
if (item.value !== rule.field && this.formModel[item.value] === value) {
|
||||
list.push(item.label);
|
||||
} else if (item.value === rule.field) {
|
||||
list.push(item.label);
|
||||
}
|
||||
});
|
||||
let flag = false;
|
||||
if (value && value.length) {
|
||||
for (var i = 0; i < value.length; i++) {
|
||||
const ascallCode = value.charCodeAt(i);
|
||||
if (ascallCode > 70 || ascallCode < 48 || (ascallCode > 57 && ascallCode < 65)) {
|
||||
flag = true;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
if (!value) {
|
||||
callback(new Error(rule.messageEmpty));
|
||||
} else if (flag) {
|
||||
callback(new Error('输入的每一位应为十六进制0-F,请修改'));
|
||||
} else if (list.length > 1) {
|
||||
let repeatedValue = '';
|
||||
list.forEach((item, index) => {
|
||||
repeatedValue += item;
|
||||
if (index !== list.length - 1) {
|
||||
repeatedValue += '与';
|
||||
}
|
||||
});
|
||||
callback(new Error(repeatedValue + '位置重复，请调整！'));
|
||||
} else {
|
||||
callback();
|
||||
}
|
||||
};
|
||||
var validateAddr = (rule, value, callback) => {
|
||||
if (!value && value !== 0) {
|
||||
callback(new Error(rule.messageEmpty));
|
||||
} else if (this.formModel.i_addr === this.formModel.o_addr) {
|
||||
callback(new Error('输入网关字地址与输出网关字地址不能相同！'));
|
||||
} else {
|
||||
callback();
|
||||
}
|
||||
};
|
||||
switch (row.type) {
|
||||
case 'PSD': {
|
||||
this.setDeviceConfigFunction = setPsdConfig;
|
||||
this.formLeft = {
|
||||
labelWidth: '220px',
|
||||
items: [
|
||||
{ prop:'i_addr', label:'输入网关字地址:', type: 'number', min: 0, max: 20000, step: 1, precisionFlag: true, precision: 0},
|
||||
{ prop: 'i_c', label: '输入-是否关门位:', type: 'text', rightWidth: '100px', maxlength: 4},
|
||||
{ prop: 'i_dc_b', label: '输入-PSL关门按钮位:', type: 'text', rightWidth: '100px', maxlength: 4},
|
||||
{ prop: 'i_do_b', label: '输入-PSL开门按钮位:', type: 'text', rightWidth: '100px', maxlength: 4},
|
||||
{ prop: 'i_ir', label: '输入-互锁解除钥匙开关位:', type: 'text', rightWidth: '100px', maxlength: 4},
|
||||
{ prop: 'i_l', label: '输入-是否锁闭位:', type: 'text', rightWidth: '100px', maxlength: 4},
|
||||
{ prop: 'i_psl', label: '输入-PSL允许钥匙开关位:', type: 'text', rightWidth: '100px', maxlength: 4},
|
||||
{ prop: 'i_ts_b', label: '输入-PSL试灯按钮位:', type: 'text', rightWidth: '100px', maxlength: 4}
|
||||
]
|
||||
};
|
||||
this.leftRules = {
|
||||
i_addr: [
|
||||
{ validator: validateAddr, messageEmpty: '请填写输入网关字地址', trigger: 'blur' }
|
||||
],
|
||||
i_c: [
|
||||
{ validator: validateDevice, messageEmpty: '请填写输入-是否关门位', list: this.psdLeftValue, trigger: 'blur' }
|
||||
],
|
||||
i_dc_b: [
|
||||
{validator: validateDevice, messageEmpty: '请填写输入-PSL关门按钮位', list: this.psdLeftValue, trigger: 'blur' }
|
||||
],
|
||||
i_do_b: [
|
||||
{ validator: validateDevice, messageEmpty: '请填写输入-PSL开门按钮位', list: this.psdLeftValue, trigger: 'blur' }
|
||||
],
|
||||
i_ir: [
|
||||
{ validator: validateDevice, messageEmpty: '请填写输入-互锁解除钥匙开关位', list: this.psdLeftValue, trigger: 'blur' }
|
||||
],
|
||||
i_l: [
|
||||
{ validator: validateDevice, messageEmpty: '请填写输入-是否锁闭位', list: this.psdLeftValue, trigger: 'blur' }
|
||||
],
|
||||
i_psl: [
|
||||
{ validator: validateDevice, messageEmpty: '请填写输入-PSL允许钥匙开关位', list: this.psdLeftValue, trigger: 'blur' }
|
||||
],
|
||||
i_ts_b: [
|
||||
{ validator: validateDevice, messageEmpty: '请填写输入-PSL试灯按钮位', list: this.psdLeftValue, trigger: 'blur' }
|
||||
]
|
||||
};
|
||||
this.formRight = {
|
||||
labelWidth: '220px',
|
||||
items: [
|
||||
{ prop: 'o_addr', label: '输出网关字地址:', type: 'number', min: 0, max: 20000, step: 1, precisionFlag: true, precision: 0},
|
||||
{ prop: 'o_c', label: '输出-关门位:', type: 'text', rightWidth: '100px', maxlength: 4},
|
||||
{ prop: 'o_dc_s', label: '输出-关门信号灯控制位:', type: 'text', rightWidth: '100px', maxlength: 4},
|
||||
{ prop: 'o_dcl_s', label: '输出-关门且锁闭信号灯控制位:', type: 'text', rightWidth: '100px', maxlength: 4},
|
||||
{ prop: 'o_do_s', label: '输出-开门信号灯控制位:', type: 'text', rightWidth: '100px', maxlength: 4},
|
||||
{ prop: 'o_ir_s', label: '输出-互锁解除信号灯控制位:', type: 'text', rightWidth: '100px', maxlength: 4},
|
||||
{ prop: 'o_l', label: '输出-锁闭位:', type: 'text', rightWidth: '100px', maxlength: 4},
|
||||
{ prop: 'o_o', label: '输出-开门位:', type: 'text', rightWidth: '100px', maxlength: 4},
|
||||
{ prop: 'o_psl_s', label: '输出-PSL信号灯控制位:', type: 'text', rightWidth: '100px', maxlength: 4}
|
||||
]
|
||||
};
|
||||
this.rightRules = {
|
||||
o_addr: [
|
||||
{ validator: validateAddr, messageEmpty: '请填写输出网关字地址', trigger: 'blur' }
|
||||
],
|
||||
o_c: [
|
||||
{ validator: validateDevice, messageEmpty: '请填写输出-关门位', list: this.psdRightValue, trigger: 'blur' }
|
||||
],
|
||||
o_dc_s: [
|
||||
{ validator: validateDevice, messageEmpty: '请填写输出-关门信号灯控制位', list: this.psdRightValue, trigger: 'blur' }
|
||||
],
|
||||
o_dcl_s: [
|
||||
{ validator: validateDevice, messageEmpty: '请填写输出-关门且锁闭信号灯控制位', list: this.psdRightValue, trigger: 'blur' }
|
||||
],
|
||||
o_do_s: [
|
||||
{ validator: validateDevice, messageEmpty: '请填写输出-开门信号灯控制位', list: this.psdRightValue, trigger: 'blur' }
|
||||
],
|
||||
o_ir_s: [
|
||||
{ validator: validateDevice, messageEmpty: '请填写输出-互锁解除信号灯控制位', list: this.psdRightValue, trigger: 'blur' }
|
||||
],
|
||||
o_l: [
|
||||
{ validator: validateDevice, messageEmpty: '请填写输出-锁闭位', list: this.psdRightValue, trigger: 'blur' }
|
||||
],
|
||||
o_o: [
|
||||
{ validator: validateDevice, messageEmpty: '请填写输出-开门位', list: this.psdRightValue, trigger: 'blur' }
|
||||
],
|
||||
o_psl_s: [
|
||||
{ validator: validateDevice, messageEmpty: '请填写输出-PSL信号灯控制位', list: this.psdRightValue, trigger: 'blur' }
|
||||
]
|
||||
};
|
||||
break;
|
||||
}
|
||||
case 'SIGNAL': {
|
||||
this.setDeviceConfigFunction = setSignalConfig;
|
||||
this.formTop.labelWidth = '150px';
|
||||
this.formLeft = {
|
||||
labelWidth: '150px',
|
||||
items: [
|
||||
{ prop:'i_addr', label:'输入网关字地址:', type: 'number', min: 0, max: 20000, step: 1, precisionFlag: true, precision: 0},
|
||||
{ prop: 'i_f', label: '输入-故障表示位:', type: 'text', rightWidth: '100px', maxlength: 4},
|
||||
{ prop: 'i_g', label: '输入-绿灯表示位:', type: 'text', rightWidth: '100px', maxlength: 4},
|
||||
{ prop: 'i_y', label: '输入-黄灯表示位:', type: 'text', rightWidth: '100px', maxlength: 4},
|
||||
{ prop: 'i_yr', label: '输入-黄红灯表示位:', type: 'text', rightWidth: '100px', maxlength: 4}
|
||||
]
|
||||
};
|
||||
this.leftRules = {
|
||||
i_addr: [
|
||||
{ validator: validateAddr, messageEmpty: '请填写输入网关字地址', trigger: 'blur' }
|
||||
],
|
||||
i_f: [
|
||||
{ validator: validateDevice, messageEmpty: '请填写输入-故障表示位', list: this.signalLeftValue, trigger: 'blur' }
|
||||
],
|
||||
i_g: [
|
||||
{ validator: validateDevice, messageEmpty: '请填写输入-绿灯表示位', list: this.signalLeftValue, trigger: 'blur' }
|
||||
],
|
||||
i_y: [
|
||||
{ validator: validateDevice, messageEmpty: '请填写输入-黄灯表示位', list: this.signalLeftValue, trigger: 'blur' }
|
||||
],
|
||||
i_yr: [
|
||||
{ validator: validateDevice, messageEmpty: '请填写输入-黄红灯表示位', list: this.signalLeftValue, trigger: 'blur'}
|
||||
]
|
||||
};
|
||||
this.formRight = {
|
||||
labelWidth: '150px',
|
||||
size: 'mini',
|
||||
items: [
|
||||
{ prop: 'o_addr', label: '输出网关字地址:', type: 'number', min: 0, max: 20000, step: 1, precisionFlag: true, precision: 0},
|
||||
{ prop: 'o_f', label: '输出-故障控制位:', type: 'text', rightWidth: '100px', maxlength: 4},
|
||||
{ prop: 'o_g', label: '输出-绿灯控制位:', type: 'text', rightWidth: '100px', maxlength: 4},
|
||||
{ prop: 'o_r', label: '输出-红灯控制位:', type: 'text', rightWidth: '100px', maxlength: 4},
|
||||
{ prop: 'o_y', label: '输出-黄灯控制位:', type: 'text', rightWidth: '100px', maxlength: 4},
|
||||
{ prop: 'o_yr', label: '输出-黄红灯控制位', type: 'text', rightWidth: '100px', maxlength: 4}
|
||||
]
|
||||
};
|
||||
this.rightRules = {
|
||||
o_addr: [
|
||||
{ validator: validateAddr, messageEmpty: '请填写输出网关字地址', trigger: 'blur' }
|
||||
],
|
||||
o_f: [
|
||||
{ validator: validateDevice, messageEmpty: '请填写输出-故障控制位', list: this.signalRightValue, trigger: 'blur' }
|
||||
],
|
||||
o_g: [
|
||||
{ validator: validateDevice, messageEmpty: '请填写输出-绿灯控制位', list: this.signalRightValue, trigger: 'blur' }
|
||||
],
|
||||
o_r: [
|
||||
{ validator: validateDevice, messageEmpty: '请填写输出-红灯控制位', list: this.signalRightValue, trigger: 'blur' }
|
||||
],
|
||||
o_y: [
|
||||
{ validator: validateDevice, messageEmpty: '请填写输出-黄灯控制位', list: this.signalRightValue, trigger: 'blur' }
|
||||
],
|
||||
o_yr: [
|
||||
{ validator: validateDevice, messageEmpty: '请填写输出-黄红灯控制位', list: this.signalRightValue, trigger: 'blur'}
|
||||
]
|
||||
};
|
||||
break;
|
||||
}
|
||||
case 'SWITCH': {
|
||||
this.setDeviceConfigFunction = setSwitchConfig;
|
||||
this.formTop.labelWidth = '160px';
|
||||
this.formLeft = {
|
||||
labelWidth: '160px',
|
||||
items: [
|
||||
{ prop:'i_addr', label:'输入网关字地址:', type: 'number', min: 0, max: 20000, step: 1, precisionFlag: true, precision: 0},
|
||||
{ prop: 'i_f', label: '输入-故障挤岔表示位:', type: 'text', rightWidth: '100px', maxlength: 4},
|
||||
{ prop: 'i_n', label: '输入-定位表示位:', type: 'text', rightWidth: '100px', maxlength: 4},
|
||||
{ prop: 'i_r', label: '输入-反位表示位:', type: 'text', rightWidth: '100px', maxlength: 4}
|
||||
]
|
||||
};
|
||||
this.leftRules = {
|
||||
i_addr: [
|
||||
{ validator: validateAddr, messageEmpty: '请填写输入网关字地址', trigger: 'blur' }
|
||||
],
|
||||
i_f: [
|
||||
{ validator: validateDevice, messageEmpty: '请填写输入-故障挤岔表示位', list: this.switchLeftValue, trigger: 'blur' }
|
||||
],
|
||||
i_n: [
|
||||
{ validator: validateDevice, messageEmpty: '请填写输入-定位表示位', list: this.switchLeftValue, trigger: 'blur' }
|
||||
],
|
||||
i_r: [
|
||||
{ validator: validateDevice, messageEmpty: '请填写输入-反位表示位', list: this.switchLeftValue, trigger: 'blur' }
|
||||
]
|
||||
};
|
||||
this.formRight = {
|
||||
labelWidth: '160px',
|
||||
items: [
|
||||
{ prop: 'o_addr', label: '输出网关字地址:', type: 'number', min: 0, max: 20000, step: 1, precisionFlag: true, precision: 0},
|
||||
{ prop: 'o_f', label: '输出-故障挤岔控制位:', type: 'text', rightWidth: '100px', maxlength: 4},
|
||||
{ prop: 'o_n', label: '输出-定操控制位:', type: 'text', rightWidth: '100px', maxlength: 4},
|
||||
{ prop: 'o_r', label: '输出-反操控制位:', type: 'text', rightWidth: '100px', maxlength: 4 }
|
||||
]
|
||||
};
|
||||
this.rightRules = {
|
||||
o_addr: [
|
||||
{ validator: validateAddr, messageEmpty: '请填写输出网关字地址', trigger: 'blur' }
|
||||
],
|
||||
o_f: [
|
||||
{ validator: validateDevice, messageEmpty: '请填写输出-故障挤岔控制位', list: this.switchRightValue, trigger: 'blur' }
|
||||
],
|
||||
o_n: [
|
||||
{ validator: validateDevice, messageEmpty: '请填写输出-定操控制位', list: this.switchRightValue, trigger: 'blur' }
|
||||
],
|
||||
o_r: [
|
||||
{ validator: validateDevice, messageEmpty: '请填写输出-反操控制位', list: this.switchRightValue, trigger: 'blur' }
|
||||
]
|
||||
};
|
||||
break;
|
||||
}
|
||||
}
|
||||
},
|
||||
initData(row) {
|
||||
getDeviceDetail(row.id).then(resp => {
|
||||
if (resp.data.config) {
|
||||
this.formModel = resp.data.config;
|
||||
}
|
||||
}).catch(()=> {
|
||||
this.$message.error('获取项目设备详情失败！');
|
||||
});
|
||||
if (row.projectCode === 'XTY') {
|
||||
this.gatewayList = [{lable:'XTY', value: 'XTY'}];
|
||||
} else if (row.projectCode === 'GZB') {
|
||||
this.gatewayList = [{label: 'GZB_1', value: 'GZB_1'}];
|
||||
}
|
||||
},
|
||||
doShow(row) {
|
||||
this.initData(row);
|
||||
this.initForm(row);
|
||||
this.dialogVisible = true;
|
||||
this.data = row;
|
||||
},
|
||||
doSave() {
|
||||
const self = this;
|
||||
this.$refs.datatop.validateForm(() => {
|
||||
self.$refs.dataleft.validateForm(()=> {
|
||||
self.$refs.dataright.validateForm(()=> {
|
||||
this.setDeviceConfigFunction(this.data.id, this.formModel).then(response => {
|
||||
self.$message.success('设置设备网关映射配置成功');
|
||||
self.handleClose();
|
||||
self.$emit('reloadTable');
|
||||
}).catch(error => {
|
||||
self.$message.error(this.$t('tip.modifyTheFailure') + error.message);
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
},
|
||||
handleClose(done) {
|
||||
this.formModel = {};
|
||||
this.formLeft = {};
|
||||
this.formRight = {};
|
||||
this.leftRules = {};
|
||||
this.rightRules = {};
|
||||
this.gatewayList = [];
|
||||
this.dialogVisible = false;
|
||||
this.$refs.datatop.resetForm();
|
||||
this.$refs.dataleft.resetForm();
|
||||
this.$refs.dataright.resetForm();
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@ -1,7 +1,8 @@
|
||||
<template>
|
||||
<div>
|
||||
<QueryListPage ref="queryListPage" :pager-config="pagerConfig" :query-form="queryForm" :query-list="queryList" />
|
||||
<device-add ref="add" @reloadTable="reloadTable" />
|
||||
<device-add ref="add" :project-code="projectCode" @reloadTable="reloadTable" />
|
||||
<edit-config-gateway ref="editConfigGateway" @reloadTable="reloadTable" />
|
||||
<edit-config ref="editConfig" @reloadTable="reloadTable" />
|
||||
</div>
|
||||
</template>
|
||||
@ -9,11 +10,14 @@
|
||||
<script>
|
||||
import { getProjectDeviceList, deleteProjectDevice } from '@/api/project';
|
||||
import DeviceAdd from './add';
|
||||
import EditConfigGateway from './editConfigGateway';
|
||||
import EditConfig from './editConfig';
|
||||
import { getSessionStorage } from '@/utils/auth';
|
||||
export default {
|
||||
name: 'DeviceManage',
|
||||
components: {
|
||||
DeviceAdd,
|
||||
EditConfigGateway,
|
||||
EditConfig
|
||||
},
|
||||
data() {
|
||||
@ -23,19 +27,23 @@ export default {
|
||||
pageSize: 'pageSize',
|
||||
pageIndex: 'pageNum'
|
||||
},
|
||||
deviceTypeList:[{label: '道岔', value: 'SWITCH'}, {label: '信号机', value:'SIGNAL'}, {label: '屏蔽门', value: 'PSD'}],
|
||||
deviceTypeList:[
|
||||
{label: '道岔', value: 'SWITCH'},
|
||||
{label: '信号机', value:'SIGNAL'},
|
||||
{label: '屏蔽门', value: 'PSD'},
|
||||
{label: 'IBP盘', value: 'IBP'},
|
||||
{label: '车站', value: 'LW'}
|
||||
],
|
||||
projectList: [{label:'西铁院', value: 'XTY'}, {label: '贵州装备', value:'GZB'}],
|
||||
projectMap: {
|
||||
designxty: 'XTY',
|
||||
designgzb: 'GZB'
|
||||
},
|
||||
queryForm: {
|
||||
labelWidth: '120px',
|
||||
reset: true,
|
||||
beforeQuery: this.beforeQuery,
|
||||
queryObject: {
|
||||
projectCode: {
|
||||
type: 'select',
|
||||
label: '项目编码',
|
||||
config: {
|
||||
data: [{label:'西铁院', value: 'XTY'}, {label: '贵州装备', value:'GZB'}]
|
||||
}
|
||||
},
|
||||
code: {
|
||||
type: 'text',
|
||||
label: '设备编号'
|
||||
@ -63,7 +71,7 @@ export default {
|
||||
title: '项目名称',
|
||||
prop: 'projectCode',
|
||||
type: 'tag',
|
||||
columnValue: (row) => { return this.$convertField(row.projectCode, this.projectList, ['value', 'label']); },
|
||||
columnValue: (row) => { return this.$convertField(row.project, this.projectList, ['value', 'label']); },
|
||||
tagType: (row) => { return 'success'; }
|
||||
},
|
||||
{
|
||||
@ -104,9 +112,18 @@ export default {
|
||||
currentModel: {}
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
projectCode() {
|
||||
return this.projectMap[getSessionStorage('project')];
|
||||
}
|
||||
},
|
||||
created() {
|
||||
},
|
||||
methods: {
|
||||
beforeQuery(params) {
|
||||
params.projectCode = this.projectCode;
|
||||
return params;
|
||||
},
|
||||
createProjectDevice() {
|
||||
this.$refs.add.show();
|
||||
},
|
||||
@ -152,7 +169,11 @@ export default {
|
||||
});
|
||||
},
|
||||
editConfig(index, row) {
|
||||
this.$refs.editConfig.doShow(row);
|
||||
if (row.type === 'LW' || row.type === 'IBP') {
|
||||
this.$refs.editConfig.doShow(row);
|
||||
} else {
|
||||
this.$refs.editConfigGateway.doShow(row);
|
||||
}
|
||||
},
|
||||
reloadTable() {
|
||||
this.queryList.reload();
|
||||
|
||||
Loading…
Reference in New Issue
Block a user