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

365 lines
13 KiB
Vue

<template>
<div v-loading="loading" class="joylink-card map-list-main">
<div class="clearfix">
<span>iscs系统列表</span>
</div>
<div class="text_item">
<el-input v-model="filterText" :placeholder="this.$t('global.filteringKeywords')" clearable />
<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';
export default {
name: 'UserMapList',
data() {
return {
loading: false,
defaultShowKeys: [],
filterText: '',
treeList: [],
selected: {},
defaultProps: {
children: 'children',
label: 'name'
},
point: {
x: 0,
y: 0
},
editModel: {},
lineCode: ''
};
},
computed: {
// role() {
// return this.$store.state.user.roles.includes('04') ||
// this.$store.state.user.roles.includes('05') ||
// this.$store.state.user.roles.includes('01');
// }
},
watch: {
filterText(val) {
this.$refs.tree.filter(val);
}
},
beforeDestroy () {
removeSessionStorage('demonList');
},
mounted() {
this.loadInitData();
},
methods: {
filterNode(value, data) {
if (!value) return true;
return data.name.indexOf(value) !== -1;
},
createMap() {
this.$emit('createMap');
},
async loadInitData() {
this.treeList = [];
this.treeList = [
{
name: 'iscs系统',
id: 0,
type: 'system',
children: [
{
name: 'FAS界面',
mode: 'fas',
id: '1',
type: 'system',
children: [
{
name: '站厅报警',
mode: 'fas',
id: '11',
type: 'interface'
},
{
name: '站台报警',
mode: 'fas',
id: '14',
type: 'interface'
},
{
name: '站台报警-公共',
mode: 'fas',
id: '12',
type: 'interface'
},
{
name: '系统状态',
mode: 'fas',
id: '13',
type: 'interface'
}
]
},
{
name: 'BAS界面',
mode: 'bas',
id: '2',
type: 'system',
children: [
{
name: '大系统',
mode: 'bas',
id: '21',
type: 'interface'
},
{
name: '小系统',
mode: 'bas',
id: '22',
type: 'interface'
},
{
name: '小系统B端',
mode: 'bas',
id: '22-1',
type: 'interface'
},
{
name: '小系统A端(二)',
mode: 'bas',
id: '22-2',
type: 'interface'
},
{
name: '水系统',
mode: 'bas',
id: '23',
type: 'interface'
},
{
name: '照明',
mode: 'bas',
id: '24',
type: 'interface'
},
{
name: 'EPS系统',
mode: 'bas',
id: '25',
type: 'interface'
},
{
name: '电扶梯',
mode: 'bas',
id: '26',
type: 'interface'
},
{
name: '机电排水',
mode: 'bas',
id: '27',
type: 'interface'
},
{
name: '隧道通风',
mode: 'bas',
id: '28',
type: 'interface'
},
{
name: '隧道通风-射流风机图',
mode: 'bas',
id: '29',
type: 'interface'
},
{
name: '车站网络',
mode: 'bas',
id: '210',
type: 'interface'
}
]
},
{
name: 'PSD界面',
mode: 'psd',
id: '3',
type: 'system',
children: [
{
name: '屏蔽门',
mode: 'psd',
id: '31',
type: 'interface'
}
]
},
{
name: 'cctv界面',
mode: 'cctv',
id: '4',
type: 'system',
children: [
{
name: '车站控制-站厅',
mode: 'cctv',
id: '41',
type: 'interface'
},
{
name: '车站控制-站台',
mode: 'cctv',
id: '42',
type: 'interface'
},
{
name: '中心设备状态',
mode: 'cctv',
id: '43',
type: 'interface'
},
{
name: '车站控制-云台',
mode: 'cctv',
id: '44',
type: 'interface'
}
]
},
{
name: 'AFC界面',
mode: 'afc',
id: '5',
type: 'system',
children: [
{
name: '售检票',
mode: 'afc',
id: '51',
type: 'interface'
}
]
},
{
name: 'ACS界面',
mode: 'acs',
id: '6',
type: 'system',
children: [
{
name: '门禁-站台层',
mode: 'acs',
id: '61',
type: 'interface'
},
{
name: '门禁-站厅层',
mode: 'acs',
id: '62',
type: 'interface'
}
]
},
{
name: '网络状态',
mode: 'netState',
id: '7',
type: 'system',
children: [
{
name: '网络状态',
mode: 'netState',
id: '71',
type: 'interface'
}
]
}
]
}
];
},
clickEvent(obj, data, ele) {
switch (obj.type) {
case 'system' :
break;
case 'interface':
this.$router.push({ path: `/iscs/design/edit/${obj.id}/${obj.mode}` });
break;
}
},
showContextMenu(e, obj, node, vueElem) {
if (obj && obj.type == 'map') {
e.preventDefault();
const menu = DeviceMenu.Map;
this.point = {
x: e.clientX,
y: e.clientY
};
this.editModel = obj;
this.editModel.lineCode = obj.lineCode;
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%;
}
.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>