282 lines
12 KiB
Vue
282 lines
12 KiB
Vue
<template>
|
|
<div v-loading="loading" class="map-list-main">
|
|
<div class="mapListName">
|
|
<span>{{ $t('global.mapList') }}</span>
|
|
</div>
|
|
<template v-if="!IsProject">
|
|
<filter-city ref="filerCity" filter-empty local-param-name="training_cityCode" @filterSelectChange="refresh" />
|
|
<el-input v-model="filterText" :placeholder="this.$t('global.filteringKeywords')" clearable />
|
|
</template>
|
|
<div id="trainingMapTree" class="left-map-list">
|
|
<el-tree
|
|
ref="tree"
|
|
:data="treeList"
|
|
node-key="key"
|
|
:props="{children:'children',label:'name'}"
|
|
highlight-current
|
|
:span="22"
|
|
:filter-node-method="filterNode"
|
|
:default-expanded-keys="expandList"
|
|
@node-click="clickEvent"
|
|
@node-expand="nodeExpand"
|
|
@node-collapse="nodeCollapse"
|
|
>
|
|
<span slot-scope="{ node }">
|
|
<span
|
|
class="el-icon-tickets"
|
|
/>
|
|
<span v-if="node.data.id ==='Simulation'" :id="node.data.key"> {{ node.data.name+ $t('global.simulationSystem') }}</span>
|
|
<span v-else-if="node.data.id ==='Lesson'" :id="node.data.key"> {{ node.data.name+ $t('global.lessonSystem') }}</span>
|
|
<span v-else-if="node.data.id ==='Exam'" :id="node.data.key"> {{ node.data.name+ $t('global.examSystem') }}</span>
|
|
<span v-else-if="node.data.id ==='Plan'" :id="node.data.key"> {{ node.data.name+ $t('global.runPlanSystem') }}</span>
|
|
<span v-else :id="node.data.key"> {{ node.data.name }}</span>
|
|
</span>
|
|
</el-tree>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
import { getTrainingSystemList, getSubSystemInfo, getSubSystemByProjectCode } from '@/api/trainingPlatform';
|
|
import { getPublishMapInfo } from '@/api/jmap/map';
|
|
import { UrlConfig } from '@/scripts/ConstDic';
|
|
import FilterCity from '@/views/components/filterCity';
|
|
import localStore from 'storejs';
|
|
import { getSessionStorage } from '@/utils/auth';
|
|
import { GetMapListByProjectList } from '@/scripts/ProjectConfig';
|
|
|
|
export default {
|
|
name: 'DemonList',
|
|
components: {
|
|
FilterCity
|
|
},
|
|
data() {
|
|
return {
|
|
loading: true,
|
|
filterText: '',
|
|
treeList: [],
|
|
mapId: '',
|
|
expandList: [],
|
|
filterSelect: ''
|
|
};
|
|
},
|
|
computed: {
|
|
userId() {
|
|
return this.$store.state.user.id;
|
|
},
|
|
project() {
|
|
return getSessionStorage('project');
|
|
},
|
|
IsProject() {
|
|
// 实训平台 是否为通过项目code获取地图列表的项目
|
|
return GetMapListByProjectList.includes(this.project);
|
|
}
|
|
},
|
|
watch: {
|
|
filterText(val) {
|
|
this.$refs.tree.filter(val);
|
|
}
|
|
},
|
|
mounted() {
|
|
if (this.IsProject) {
|
|
this.refresh();
|
|
}
|
|
},
|
|
methods: {
|
|
filterNode(value, data) {
|
|
if (!value) return true;
|
|
return data.name.includes(value);
|
|
},
|
|
clickEvent(obj, data, ele, isReplace = false) {
|
|
if (ele) {
|
|
if ( ele.expanded) {
|
|
ele.expanded = false;
|
|
} else {
|
|
ele.expanded = true;
|
|
}
|
|
}
|
|
|
|
localStore.set('trainingPlatformCheckId' + this.filterSelect + this.userId + this.project, obj.key);
|
|
this.mapId = obj.key.split('-')[0];
|
|
if ( obj.type === 'Map') {
|
|
this.mapId = obj.id;
|
|
const router = { path: `${UrlConfig.trainingPlatform.permission}/${this.mapId}`};
|
|
this.toNextPage(isReplace, router);
|
|
} else if ( obj.type === 'System' ) {
|
|
const router = { path: `${UrlConfig.trainingPlatform.secondaryHome}`, query: { type: obj.id } };
|
|
this.toNextPage(isReplace, router);
|
|
} else if ( obj.type === 'MapSystem') {
|
|
getSubSystemInfo(obj.id).then(resp => { // 查询子系统信息
|
|
let router = '';
|
|
switch (resp.data.type) {
|
|
case 'Exam':
|
|
// this.setLocalRoute(`${UrlConfig.trainingPlatform.examHome}/${obj.id}`);
|
|
// router = localStore.get('examDetail' + obj.id);
|
|
// if (!router) { router = { path: `${UrlConfig.trainingPlatform.examHome}/${obj.id}`}; }
|
|
// this.toNextPage(isReplace, router);
|
|
router = { path: `${UrlConfig.trainingPlatform.examHome}/${obj.id}`};
|
|
this.toNextPage(isReplace, router);
|
|
break;
|
|
case 'Lesson':
|
|
this.setLocalRoute(`${UrlConfig.trainingPlatform.teachHome}/${obj.id}`);
|
|
router = { path: `${UrlConfig.trainingPlatform.teachHome}/${obj.id}`};
|
|
this.toNextPage(isReplace, router);
|
|
break;
|
|
case 'Simulation':
|
|
if (resp.data.prdType == '08') {
|
|
// 运行图编辑工作站
|
|
getPublishMapInfo(this.mapId).then(rest => {
|
|
this.setLocalRoute(`${UrlConfig.trainingPlatform.runPlan}/${this.mapId}?lineCode=${rest.data.lineCode}`);
|
|
router = { path: `${UrlConfig.trainingPlatform.runPlan}/${this.mapId}`, query: { lineCode: rest.data.lineCode}};
|
|
this.toNextPage(isReplace, router);
|
|
});
|
|
} else {
|
|
this.setLocalRoute(`${UrlConfig.trainingPlatform.prodDetail}/${obj.id}?mapId=${this.mapId}`);
|
|
router = { path: `${UrlConfig.trainingPlatform.prodDetail}/${obj.id}`, query: { mapId: this.mapId}};
|
|
this.toNextPage(isReplace, router);
|
|
}
|
|
break;
|
|
}
|
|
}).catch((error) => {
|
|
if (error.code === '40004') {
|
|
this.$messageBox(this.$t('systemGenerate.getSubSystemInfoFail'));
|
|
}
|
|
});
|
|
}
|
|
},
|
|
toNextPage(isReplace, router) {
|
|
isReplace ? this.$router.replace(router) : this.$router.push(router);
|
|
},
|
|
setLocalRoute(path) {
|
|
localStore.set('trainingPlatformRoute' + this.userId + this.project, path);
|
|
},
|
|
forTree(item) {
|
|
item.children && item.children.forEach(childrenItem => {
|
|
childrenItem.key = item.key + '-' + childrenItem.id;
|
|
if (childrenItem.children && childrenItem.children.length) {
|
|
this.forTree(childrenItem);
|
|
}
|
|
});
|
|
},
|
|
async refresh(filterSelect) {
|
|
this.loading = true;
|
|
this.treeList = [];
|
|
this.filterSelect = filterSelect;
|
|
try {
|
|
let res = {};
|
|
if (this.IsProject) {
|
|
res = await getSubSystemByProjectCode();
|
|
} else {
|
|
res = await getTrainingSystemList(filterSelect);
|
|
}
|
|
this.$emit('goRoutePath', res.data);
|
|
res.data && res.data.forEach(item =>{
|
|
item.key = item.id;
|
|
this.forTree(item);
|
|
});
|
|
if (this.project === 'cgy') {
|
|
this.treeList = [];
|
|
res.data.forEach(item => {
|
|
const childList = [];
|
|
if (item && item.children && item.children.length > 3) {
|
|
item.children.forEach(elem => {
|
|
if (elem.id === 'Lesson') {
|
|
childList[0] = elem;
|
|
} else if (elem.id === 'Exam') {
|
|
childList[3] = elem;
|
|
} else if (elem.id === 'Simulation') {
|
|
childList[1] = elem;
|
|
} else {
|
|
childList[2] = elem;
|
|
}
|
|
});
|
|
item.children = childList;
|
|
}
|
|
});
|
|
}
|
|
this.treeList = res.data;
|
|
this.getExpandList(filterSelect);
|
|
this.$nextTick(() => {
|
|
let checkId = localStore.get('trainingPlatformCheckId' + filterSelect + this.userId + this.project) || null;
|
|
checkId = checkId && checkId.includes('-') ? checkId : null;
|
|
this.$refs.tree && this.$refs.tree.setCurrentKey(checkId);
|
|
if (!this.$route.path.includes('result') && !this.$route.path.includes('/trainingPlatform/teach/')) {
|
|
checkId && this.findTree(this.treeList, checkId);
|
|
!checkId && this.treeList && this.treeList.length && this.clickEvent(this.treeList[0], {data: this.treeList[0]});
|
|
}
|
|
setTimeout(()=> {
|
|
if (checkId) {
|
|
const checkIdDom = document.getElementById(checkId);
|
|
const mapTreeDom = document.getElementById('trainingMapTree');
|
|
if (checkIdDom && mapTreeDom) {
|
|
mapTreeDom.scrollTop = checkIdDom.offsetTop;
|
|
}
|
|
}
|
|
this.loading = false;
|
|
}, 200);
|
|
});
|
|
} catch (error) {
|
|
this.loading = false;
|
|
this.$message.error(this.$t('error.refreshFailed'));
|
|
}
|
|
},
|
|
/* 根据localstorage缓存的trainingPlatformCheckId跳转右侧显示页面 */
|
|
findTree(treeList, checkId, data) {
|
|
treeList && treeList.length && treeList.forEach(item =>{
|
|
if (item.type === 'Map') {
|
|
data = item;
|
|
}
|
|
if (checkId === item.key) {
|
|
this.clickEvent(item, {data: data}, null, true);
|
|
} else {
|
|
this.findTree(item.children, checkId, data);
|
|
}
|
|
});
|
|
},
|
|
nodeExpand(obj, node, ele) {
|
|
const key = obj.key;
|
|
this.expandList = this.expandList.filter(item => item !== key);
|
|
this.expandList.push(key);
|
|
localStore.set('trainIngPlatformExpandList' + this.filterSelect + this.userId + this.project, this.expandList);
|
|
},
|
|
nodeCollapse(obj, node, ele) {
|
|
const key = obj.key;
|
|
this.expandList = this.expandList.filter(item => (item !== key && !item.startsWith(`${key}-`)));
|
|
localStore.set('trainIngPlatformExpandList' + this.filterSelect + this.userId + this.project, this.expandList);
|
|
},
|
|
getExpandList(filterSelect) {
|
|
this.expandList = [];
|
|
let expand = localStore.get('trainIngPlatformExpandList' + filterSelect + this.userId + this.project);
|
|
expand = expand ? (expand + '').split(',') : '';
|
|
if (expand instanceof Array) {
|
|
this.expandList = expand;
|
|
}
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
<style rel="stylesheet/scss" lang="scss" scoped>
|
|
.mapListName{
|
|
padding: 15px 0px 15px 17px;
|
|
}
|
|
.left-map-list{
|
|
width: 100%;
|
|
flex: 1;
|
|
overflow: auto;
|
|
padding-bottom: 10px;
|
|
padding-top: 5px;
|
|
}
|
|
.map-list-main{
|
|
height: 100%;
|
|
display:flex;
|
|
flex-direction:column;
|
|
}
|
|
</style>
|
|
<style>
|
|
.el-tree {
|
|
overflow-x: hidden;
|
|
}
|
|
.el-tree-node.is-current>.el-tree-node__content {
|
|
background-color: #e4e3e3 !important;
|
|
}
|
|
</style>
|