727 lines
27 KiB
Vue
727 lines
27 KiB
Vue
<template>
|
|
<div v-loading="loading" class="joylink-card map-list-main">
|
|
<div class="clearfix">
|
|
<div>iscs系统列表</div>
|
|
</div>
|
|
<div class="text_item">
|
|
<!--<el-cascader v-model="mapStationList" style="width: 100%;" :props="props" placeholder="请选择车站" @change="handleChange" />-->
|
|
<!--<el-input v-model="filterText" :placeholder="this.$t('global.filteringKeywords')" clearable />-->
|
|
<div style="border-bottom: 1px solid #EBEEF5; padding: 10px 10px;">
|
|
<el-select v-model="lineCode" size="mini" placeholder="请选择线路">
|
|
<el-option
|
|
v-for="item in lineList"
|
|
:key="item.code"
|
|
:label="item.name"
|
|
:value="item.code"
|
|
/>
|
|
</el-select>
|
|
</div>
|
|
<div class="tree_box">
|
|
<el-tree ref="tree" :data="treeList" node-key="id" :props="defaultProps" highlight-current :span="22" :filter-node-method="filterNode" @node-click="clickEvent" @node-contextmenu="showContextMenu">
|
|
<span slot-scope="{ node:tnode, data }">
|
|
<span class="el-icon-tickets" :style="{color: data.valid ? 'green':''}" />
|
|
<span> {{ tnode.label }}</span>
|
|
</span>
|
|
</el-tree>
|
|
</div>
|
|
<div class="buttonList">
|
|
<!--<el-button size="small" type="primary" class="eachButton" @click="createMap">{{ $t('map.newConstruction') }}</el-button>-->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
import { DeviceMenu } from '@/scripts/ConstDic';
|
|
import { removeSessionStorage } from '@/utils/auth';
|
|
import { getPublishMapListOnline, getStationListNeedAttendant } from '@/api/jmap/map';
|
|
import { getLineCodeList } from '@/api/management/mapline';
|
|
|
|
export default {
|
|
name: 'UserMapList',
|
|
data() {
|
|
return {
|
|
loading: false,
|
|
defaultShowKeys: [],
|
|
filterText: '',
|
|
selected: {},
|
|
defaultProps: {
|
|
children: 'children',
|
|
label: 'name'
|
|
},
|
|
point: {
|
|
x: 0,
|
|
y: 0
|
|
},
|
|
editModel: {},
|
|
lineCode: '',
|
|
mapList: [],
|
|
mapStationList: [],
|
|
lineList: [],
|
|
pageTreeMap: {
|
|
'01': [],
|
|
'02': [
|
|
{
|
|
// 牵引降压混合变电所主接线图 变电所接线图 降压变电所主接线图 解除网图 混合变电所主接线图
|
|
name: '电力监控系统',
|
|
mode: 'powerMonitoring',
|
|
id: 'powerMonitoring',
|
|
type: 'totalSystem',
|
|
children: [
|
|
{
|
|
name: '变电所接线图',
|
|
mode: 'substation',
|
|
id: 'substation',
|
|
type: 'interface'
|
|
},
|
|
{
|
|
name: '降压变电所主接线图',
|
|
mode: 'stepDown',
|
|
id: 'stepDown',
|
|
type: 'interface'
|
|
},
|
|
{
|
|
name: '混合变电所主接线图',
|
|
mode: 'hybrid',
|
|
id: 'hybrid',
|
|
type: 'interface'
|
|
},
|
|
{
|
|
name: '牵引降压混合变电所主接线图',
|
|
mode: 'combined',
|
|
id: 'combined',
|
|
type: 'interface'
|
|
},
|
|
{
|
|
name: '接触网图',
|
|
mode: 'catenary',
|
|
id: 'catenary',
|
|
type: 'interface'
|
|
}
|
|
]
|
|
},
|
|
{
|
|
name: '自动售检票/门禁',
|
|
mode: 'afc',
|
|
id: 'afc',
|
|
type: 'totalSystem',
|
|
children: [
|
|
{
|
|
name: '自动售检票系统',
|
|
mode: 'autoTicket',
|
|
id: 'autoTicket',
|
|
type: 'interface'
|
|
},
|
|
{
|
|
name: '门禁系统',
|
|
mode: 'entranceGuard',
|
|
id: 'entranceGuard',
|
|
type: 'interface'
|
|
}
|
|
]
|
|
},
|
|
{
|
|
name: '火灾报警系统',
|
|
mode: 'fas',
|
|
id: 'fas',
|
|
type: 'totalSystem',
|
|
children: [
|
|
{
|
|
name: '火灾报警系统-FAS联动',
|
|
mode: 'linkage',
|
|
id: 'linkage',
|
|
type: 'interface'
|
|
},
|
|
{
|
|
name: '火灾报警系统-站厅层',
|
|
mode: 'stationHall',
|
|
id: 'stationHall',
|
|
type: 'interface'
|
|
},
|
|
{
|
|
name: '火灾报警系统-站台层',
|
|
mode: 'platform',
|
|
id: 'platform',
|
|
type: 'interface'
|
|
},
|
|
{
|
|
name: '火灾报警系统-区间',
|
|
mode: 'section',
|
|
id: 'section',
|
|
type: 'interface'
|
|
},
|
|
{
|
|
name: '感温光纤探测系统',
|
|
mode: 'sensing',
|
|
id: 'sensing',
|
|
type: 'interface'
|
|
},
|
|
{
|
|
name: '气体灭火系统',
|
|
mode: 'gas',
|
|
id: 'gas',
|
|
type: 'interface'
|
|
}
|
|
]
|
|
},
|
|
{
|
|
name: '信号系统',
|
|
mode: 'signalSystem',
|
|
id: 'signalSystem',
|
|
type: 'totalSystem',
|
|
children: [
|
|
{
|
|
name: 'TIS管理器',
|
|
mode: 'tis',
|
|
id: 'tis',
|
|
type: 'interface'
|
|
},
|
|
{
|
|
name: '列车时刻表',
|
|
mode: 'schedule',
|
|
id: 'schedule',
|
|
type: 'interface'
|
|
},
|
|
{
|
|
name: '信号系统',
|
|
mode: 'signal',
|
|
id: 'signal',
|
|
type: 'interface'
|
|
},
|
|
{
|
|
name: '全线信号系统界面',
|
|
mode: 'allLineSignal',
|
|
id: 'allLineSignal',
|
|
type: 'interface'
|
|
}
|
|
]
|
|
}, {
|
|
name: '通信',
|
|
mode: 'communication',
|
|
id: 'communication',
|
|
type: 'totalSystem',
|
|
children: [
|
|
{
|
|
name: '乘客信息显示系统',
|
|
mode: 'pis',
|
|
id: 'pis',
|
|
type: 'interface'
|
|
},
|
|
{
|
|
name: '广播系统',
|
|
mode: 'broadcasting',
|
|
id: 'broadcasting',
|
|
type: 'interface'
|
|
},
|
|
{
|
|
name: '闭路电视',
|
|
mode: 'cctv',
|
|
id: 'cctv',
|
|
type: 'interface'
|
|
}
|
|
]
|
|
}],
|
|
'03': [],
|
|
'04': [],
|
|
'05': [],
|
|
'06': [],
|
|
'07': [{
|
|
name: 'FAS界面',
|
|
mode: 'fas',
|
|
id: 'fas',
|
|
type: 'totalSystem',
|
|
children: [
|
|
{
|
|
name: '站厅报警',
|
|
mode: 'fas',
|
|
id: 'stationHall',
|
|
type: 'system',
|
|
children: [
|
|
{
|
|
name: '站厅报警',
|
|
mode: 'fas',
|
|
id: 'stationHall',
|
|
type: 'interface'
|
|
}
|
|
]
|
|
},
|
|
{
|
|
name: '站台报警',
|
|
mode: 'fas',
|
|
id: 'stand',
|
|
type: 'system',
|
|
children: [
|
|
{
|
|
name: '站台报警',
|
|
mode: 'fas',
|
|
id: 'stand',
|
|
type: 'interface'
|
|
},
|
|
{
|
|
name: '公共区域',
|
|
mode: 'fas',
|
|
id: 'standPublicArea',
|
|
type: 'interface'
|
|
}
|
|
]
|
|
},
|
|
{
|
|
name: '系统状态',
|
|
mode: 'fas',
|
|
id: 'systemState',
|
|
type: 'system',
|
|
children: [
|
|
{
|
|
name: '系统状态',
|
|
mode: 'fas',
|
|
id: 'systemState',
|
|
type: 'interface'
|
|
}
|
|
]
|
|
}
|
|
]
|
|
},
|
|
{
|
|
name: 'BAS界面',
|
|
mode: 'bas',
|
|
id: 'bas',
|
|
type: 'totalSystem',
|
|
children: [
|
|
{
|
|
name: '大系统',
|
|
mode: 'bas',
|
|
id: 'bigSystem',
|
|
type: 'system',
|
|
children:[
|
|
{
|
|
name: '大系统',
|
|
mode: 'bas',
|
|
id: 'bigSystem',
|
|
type: 'interface'
|
|
}
|
|
]
|
|
},
|
|
{
|
|
name: '小系统',
|
|
mode: 'bas',
|
|
id: 'smallSystem',
|
|
type: 'system',
|
|
children: [
|
|
{
|
|
name: '小系统A端(一)',
|
|
mode: 'bas',
|
|
id: 'aSideOne',
|
|
type: 'interface'
|
|
},
|
|
{
|
|
name: '小系统A端(二)',
|
|
mode: 'bas',
|
|
id: 'aSideTwo',
|
|
type: 'interface'
|
|
},
|
|
{
|
|
name: '小系统B端',
|
|
mode: 'bas',
|
|
id: 'bSide',
|
|
type: 'interface'
|
|
}
|
|
]
|
|
},
|
|
{
|
|
name: '水系统',
|
|
mode: 'bas',
|
|
id: 'waterSystem',
|
|
type: 'system',
|
|
children: [
|
|
{
|
|
name: '水系统',
|
|
mode: 'bas',
|
|
id: 'waterSystem',
|
|
type: 'interface'
|
|
}
|
|
]
|
|
},
|
|
{
|
|
name: '照明',
|
|
mode: 'bas',
|
|
id: 'lightingSystem',
|
|
type: 'system',
|
|
children: [
|
|
{
|
|
name: '照明系统',
|
|
mode: 'bas',
|
|
id: 'lightingSystem',
|
|
type: 'interface'
|
|
},
|
|
{
|
|
name: 'EPS系统',
|
|
mode: 'bas',
|
|
id: 'epsSystem',
|
|
type: 'interface'
|
|
}
|
|
]
|
|
},
|
|
{
|
|
name: '电扶梯',
|
|
mode: 'bas',
|
|
id: 'electricEscalator',
|
|
type: 'system',
|
|
children: [
|
|
{
|
|
name: '电扶梯',
|
|
mode: 'bas',
|
|
id: 'electricEscalator',
|
|
type: 'interface'
|
|
}
|
|
]
|
|
},
|
|
{
|
|
name: '机电排水',
|
|
mode: 'bas',
|
|
id: 'waterSupply',
|
|
type: 'system',
|
|
children: [
|
|
{
|
|
name: '机电排水',
|
|
mode: 'bas',
|
|
id: 'waterSupply',
|
|
type: 'interface'
|
|
}
|
|
]
|
|
},
|
|
{
|
|
name: '隧道通风',
|
|
mode: 'bas',
|
|
id: 'tunnelVentilation',
|
|
type: 'system',
|
|
children: [
|
|
{
|
|
name: '隧道通风',
|
|
mode: 'bas',
|
|
id: 'tunnelVentilation',
|
|
type: 'interface'
|
|
},
|
|
{
|
|
name: '射流风机图',
|
|
mode: 'bas',
|
|
id: 'jetFan',
|
|
type: 'interface'
|
|
}
|
|
]
|
|
},
|
|
{
|
|
name: '车站网络',
|
|
mode: 'bas',
|
|
id: 'stationNet',
|
|
type: 'system',
|
|
children: [
|
|
{
|
|
name: '车站网络',
|
|
mode:'bas',
|
|
id: 'stationNet',
|
|
type: 'interface'
|
|
}
|
|
]
|
|
}
|
|
]
|
|
},
|
|
{
|
|
name: 'PSD界面',
|
|
mode: 'psd',
|
|
id: 'psd',
|
|
type: 'totalSystem',
|
|
children: [
|
|
{
|
|
name: '屏蔽门',
|
|
mode: 'psd',
|
|
id: 'psd',
|
|
type: 'system',
|
|
children: [
|
|
{
|
|
name: '屏蔽门',
|
|
mode: 'psd',
|
|
id: 'psd',
|
|
type: 'interface'
|
|
}
|
|
]
|
|
}
|
|
]
|
|
},
|
|
{
|
|
name: 'cctv界面',
|
|
mode: 'cctv',
|
|
id: 'cctv',
|
|
type: 'system',
|
|
children: [
|
|
{
|
|
name: '车站控制',
|
|
mode: 'cctv',
|
|
id: 'cctv',
|
|
type: 'system',
|
|
children: [
|
|
{
|
|
name: '站厅',
|
|
mode: 'cctv',
|
|
id: 'stationHall',
|
|
type: 'interface'
|
|
},
|
|
{
|
|
name: '站台',
|
|
mode: 'cctv',
|
|
id: 'stand',
|
|
type: 'interface'
|
|
},
|
|
{
|
|
name: '云台',
|
|
mode: 'cctv',
|
|
id: 'holder',
|
|
type: 'interface'
|
|
}
|
|
]
|
|
},
|
|
{
|
|
name: '中心设备状态',
|
|
mode: 'cctv',
|
|
id: 'centralDeviceState',
|
|
type: 'system',
|
|
children: [
|
|
{
|
|
name: '中心设备状态',
|
|
mode: 'cctv',
|
|
id: 'centralDeviceState',
|
|
type: 'interface'
|
|
}
|
|
]
|
|
}
|
|
]
|
|
},
|
|
{
|
|
name: 'AFC界面',
|
|
mode: 'afc',
|
|
id: 'afc',
|
|
type: 'totalSystem',
|
|
children: [
|
|
{
|
|
name: '售检票',
|
|
mode: 'afc',
|
|
id: 'afc',
|
|
type: 'system',
|
|
children: [
|
|
{
|
|
name: '售检票',
|
|
mode: 'afc',
|
|
id: 'afc',
|
|
type: 'interface'
|
|
}
|
|
]
|
|
}
|
|
]
|
|
},
|
|
{
|
|
name: 'ACS界面',
|
|
mode: 'acs',
|
|
id: 'acs',
|
|
type: 'totalSystem',
|
|
children: [
|
|
{
|
|
name: '门禁-站台层',
|
|
mode: 'acs',
|
|
id: 'acs',
|
|
type: 'system',
|
|
children: [
|
|
{
|
|
name: '门禁-站台层',
|
|
mode: 'acs',
|
|
id: 'stand',
|
|
type: 'interface'
|
|
}
|
|
]
|
|
},
|
|
{
|
|
name: '门禁-站厅层',
|
|
mode: 'acs',
|
|
id: 'acs',
|
|
type: 'system',
|
|
children: [
|
|
{
|
|
name: '门禁-站厅层',
|
|
mode: 'acs',
|
|
id: 'stationHall',
|
|
type: 'interface'
|
|
}
|
|
]
|
|
}
|
|
]
|
|
},
|
|
{
|
|
name: '网络状态',
|
|
mode: 'netState',
|
|
id: 'netState',
|
|
type: 'totalSystem',
|
|
children: [
|
|
{
|
|
name: '网络状态',
|
|
mode: 'netState',
|
|
id: 'netState',
|
|
type: 'system',
|
|
children: [
|
|
{
|
|
name: '网络状态',
|
|
mode: 'netState',
|
|
id: 'netState',
|
|
type: 'interface'
|
|
}
|
|
]
|
|
}
|
|
]
|
|
}],
|
|
'08': [],
|
|
'09': [],
|
|
'10': [],
|
|
'11': [],
|
|
'12': []
|
|
}
|
|
};
|
|
},
|
|
computed: {
|
|
props() {
|
|
const self = this;
|
|
return {
|
|
lazy: true,
|
|
lazyLoad (node, resolve) {
|
|
const { level } = node;
|
|
let nodes = [];
|
|
if (level === 1) {
|
|
getStationListNeedAttendant(node.data.value).then(resp => {
|
|
nodes = resp.data.map(elem => { return {value: elem.code, label: elem.name, leaf: true}; });
|
|
resolve(nodes);
|
|
}).catch(() => {
|
|
self.$message.error('获取车站列表失败');
|
|
resolve(nodes);
|
|
});
|
|
} else if (!level) {
|
|
getPublishMapListOnline().then(resp => {
|
|
nodes = resp.data.map(elem => { return { value: elem.id, label: elem.name, leaf: false }; });
|
|
resolve(nodes);
|
|
}).catch(() => {
|
|
self.$message.error('获取地图列表失败！');
|
|
resolve(nodes);
|
|
});
|
|
}
|
|
}
|
|
};
|
|
},
|
|
treeList() {
|
|
if (this.lineCode) {
|
|
return this.pageTreeMap[this.lineCode];
|
|
} else {
|
|
return [];
|
|
}
|
|
}
|
|
},
|
|
watch: {
|
|
filterText(val) {
|
|
this.$refs.tree.filter(val);
|
|
},
|
|
mapStationList(val) {
|
|
console.log(val);
|
|
}
|
|
},
|
|
beforeDestroy () {
|
|
removeSessionStorage('demonList');
|
|
},
|
|
mounted() {
|
|
if (this.$route.query.lineCode) {
|
|
this.lineCode = this.$route.query.lineCode;
|
|
}
|
|
getLineCodeList().then(resp => {
|
|
this.lineList = resp.data || [];
|
|
}).catch(() => {
|
|
this.$message.error('获取线路列表异常！');
|
|
});
|
|
},
|
|
methods: {
|
|
filterNode(value, data) {
|
|
if (!value) return true;
|
|
return data.name.indexOf(value) !== -1;
|
|
},
|
|
createMap() {
|
|
this.$emit('createMap');
|
|
},
|
|
clickEvent(obj, data, ele) {
|
|
switch (obj.type) {
|
|
case 'totalSystem':
|
|
break;
|
|
case 'system' :
|
|
break;
|
|
case 'interface':
|
|
this.$router.push({ path: `/iscs/design/edit`, query: {mode: obj.mode, system: data.parent.data.id, part: obj.id, lineCode: this.lineCode} });
|
|
break;
|
|
}
|
|
},
|
|
showContextMenu(e, obj, node, vueElem) {
|
|
const deviceMenuMap = { system: DeviceMenu.IscsSystem, interface: DeviceMenu.IscsInterface };
|
|
if (obj && (obj.type == 'system' || obj.type == 'interface')) {
|
|
e.preventDefault();
|
|
const menu = deviceMenuMap[obj.type];
|
|
this.point = {
|
|
x: e.clientX,
|
|
y: e.clientY
|
|
};
|
|
this.editModel = obj;
|
|
this.$store.dispatch('menuOperation/setPopMenu', { position: this.point, menu: menu });
|
|
}
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
.clearfix{
|
|
padding: 0 20px;
|
|
border-bottom: 1px solid #EBEEF5;
|
|
box-sizing: border-box;
|
|
height: 47px;
|
|
line-height: 47px;
|
|
position: absolute;
|
|
width:100%;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
}
|
|
.text_item{
|
|
height: 100%;
|
|
padding-top: 47px;
|
|
.tree_box{
|
|
height: calc(100% - 89px);
|
|
overflow-y: auto;
|
|
}
|
|
}
|
|
.buttonList{
|
|
padding: 8px 0px 8px 0px;
|
|
border-top: 1px #ccc solid;
|
|
}
|
|
.eachButton{
|
|
margin-left:10px;
|
|
}
|
|
.uploadDemo {
|
|
position: relative;
|
|
overflow: hidden;
|
|
// float: right;
|
|
padding: 9px 15px;
|
|
margin-right: 3px;
|
|
cursor: pointer;
|
|
input {
|
|
width: 100%;
|
|
height: 100%;
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
opacity: 0;
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
.map-list-main{
|
|
text-align:left;
|
|
height: 100%;
|
|
position: relative;
|
|
}
|
|
</style>
|