rt-sim-training-client/src/views/iscs/iscsDesign/demonList.vue

875 lines
34 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>&nbsp;{{ 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: 'powerMonitoring02',
id: 'powerMonitoring',
type: 'totalSystem',
children: [
{
name: '黄山变电所接线图',
mode: 'powerMonitoring02',
id: 'substation',
type: 'interface'
},
{
name: '降压变电所主接线图',
mode: 'powerMonitoring02',
id: 'stepDown',
type: 'interface'
},
{
name: '控制中心图',
mode: 'powerMonitoring02',
id: 'hybrid',
type: 'interface'
},
{
name: '牵引降压混合变电所主接线图',
mode: 'powerMonitoring02',
id: 'combined',
type: 'interface'
},
{
name: '停车场接触网图',
mode: 'powerMonitoring02',
id: 'catenary',
type: 'interface'
}
]
},
{
name: '环境与设备监控系统',
mode: 'environment02',
id: 'environment',
type: 'totalSystem',
children: [
{
name: '大系统',
mode: 'environment02',
id: 'environmentOne',
type: 'interface'
},
{
name: '冷水系统',
mode: 'environment02',
id: 'environmentTwo',
type: 'interface'
},
{
name: '隧道通风系统',
mode: 'environment02',
id: 'environmentThree',
type: 'interface'
},
{
name: '车站小系统1',
mode: 'environment02',
id: 'environmentFour',
type: 'interface'
}
]
},
{
name: '自动售检票/门禁',
mode: 'afc02',
id: 'afc',
type: 'totalSystem',
children: [
{
name: '自动售检票系统',
mode: 'afc02',
id: 'autoTicket',
type: 'interface'
},
{
name: '门禁系统',
mode: 'afc02',
id: 'entranceGuard',
type: 'system',
children: [
{
name: '站厅层',
mode: 'afc02',
id: 'afcOne02',
type: 'interface'
}
]
}
]
},
{
name: '火灾报警系统',
mode: 'fas02',
id: 'fas',
type: 'totalSystem',
children: [
{
name: '火灾报警系统-FAS联动',
mode: 'fas02',
id: 'linkage',
type: 'interface'
},
{
name: '火灾报警系统-站厅层',
mode: 'fas02',
id: 'stationHall',
type: 'system',
children: [
{
name: '站厅层',
mode: 'fas02',
id: 'stationHallOne',
type: 'interface'
},
{
name: '站厅层A端',
mode: 'fas02',
id: 'stationHallTwo',
type: 'interface'
},
{
name: '站厅层B端',
mode: 'fas02',
id: 'stationHallThree',
type: 'interface'
},
{
name: '站厅层公共区段',
mode: 'fas02',
id: 'stationHallFour',
type: 'interface'
}
]
},
{
name: '火灾报警系统-站台层',
mode: 'fas02',
id: 'platform',
type: 'system',
children: [
{
name: '站台层',
mode: 'fas02',
id: 'platformOne',
type: 'interface'
},
{
name: '站台层A端',
mode: 'fas02',
id: 'platformTwo',
type: 'interface'
},
{
name: '站台层B端',
mode: 'fas02',
id: 'platformThree',
type: 'interface'
},
{
name: '站台层公共区段',
mode: 'fas02',
id: 'platformFour',
type: 'interface'
}
]
},
{
name: '火灾报警系统-区间',
mode: 'fas02',
id: 'section',
type: 'interface'
},
{
name: '感温光纤探测系统',
mode: 'fas02',
id: 'sensing',
type: 'interface'
},
{
name: '气体灭火系统',
mode: 'fas02',
id: 'gas',
type: 'interface'
}
]
},
{
name: '信号系统',
mode: 'signalSystem02',
id: 'signalSystem',
type: 'totalSystem',
children: [
// 暂时没有 系统界面 介绍
// {
// name: 'TIS管理器',
// mode: 'signalSystem02',
// id: 'tis',
// type: 'interface'
// },
// {
// name: '列车时刻表',
// mode: 'signalSystem02',
// id: 'schedule',
// type: 'interface'
// },
// 这两个内容 不清晰
{
name: '信号系统',
mode: 'signalSystem02',
id: 'signal',
type: 'interface'
},
{
name: '全线信号系统界面',
mode: 'signalSystem02',
id: 'allLineSignal',
type: 'interface'
}
]
},
{
name: '屏蔽门系统',
mode: 'psdSystem02',
id: 'psdSystem',
type: 'totalSystem',
children: [
{
name: '屏蔽门系统',
mode: 'psdSystem02',
id: 'psdOne',
type: 'interface'
}
]
},
{
name: '通信',
mode: 'communication02',
id: 'communication',
type: 'totalSystem',
children: [
// 不用画图
// {
// name: '乘客信息显示系统',
// mode: 'communication02',
// id: 'pis',
// type: 'system',
// children: [
// ]
// },
// {
// name: '广播系统',
// mode: 'communication02',
// id: 'broadcasting',
// type: 'system',
// children: [
// ]
// },
{
name: '闭路电视',
mode: 'communication02',
id: 'cctv',
type: 'system',
children:[
{
name: '站厅',
mode: 'communication02',
id: 'basOne',
type: 'interface'
},
{
name: '上行站台',
mode: 'communication02',
id: 'basTwo',
type: 'interface'
},
{
name: '下行站台',
mode: 'communication02',
id: 'basThree',
type: 'interface'
},
{
name: '地下一层',
mode: 'communication02',
id: 'basFour',
type: 'interface'
},
{
name: '地下二层',
mode: 'communication02',
id: 'basFive',
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>