265 lines
9.9 KiB
Vue
265 lines
9.9 KiB
Vue
<template>
|
|
<div v-loading="loading" class="map-list-main">
|
|
<div>
|
|
<div class="mapListName">
|
|
<span>{{ $t('map.publishedMapList') }}</span>
|
|
</div>
|
|
<template v-if="!getMapByCode">
|
|
<filter-city ref="filerCity" filter-empty :local-param-name="localParamName" @filterSelectChange="refresh" />
|
|
<el-input v-model="filterText" :placeholder="this.$t('global.filteringKeywords')" clearable />
|
|
</template>
|
|
</div>
|
|
<div class="text_item">
|
|
<el-tree ref="tree" :data="treeList" :default-expanded-keys="defaultShowKeys" node-key="id" :props="defaultProps" highlight-current :span="22" :filter-node-method="filterNode" @node-click="clickEvent">
|
|
<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>
|
|
</template>
|
|
<script>
|
|
import { listPublishMap, getMapListByProjectCode } from '@/api/jmap/map';
|
|
import { UrlConfig } from '@/scripts/ConstDic';
|
|
import { superAdmin, admin, lessonCreater } from '@/router/index';
|
|
import { getSessionStorage, setSessionStorage, removeSessionStorage } from '@/utils/auth';
|
|
import FilterCity from '@/views/components/filterCity';
|
|
import localStore from 'storejs';
|
|
import { ProjectCode, GetMapListByProjectList } from '@/scripts/ProjectConfig';
|
|
|
|
export default {
|
|
name: 'PublicMapList',
|
|
components: {
|
|
FilterCity
|
|
},
|
|
data() {
|
|
return {
|
|
loading: true,
|
|
widthLeft:0,
|
|
defaultShowKeys: [],
|
|
filterText: '',
|
|
treeData: [],
|
|
treeList: [],
|
|
selected: {},
|
|
defaultProps: {
|
|
children: 'children',
|
|
label: 'name'
|
|
},
|
|
node: {
|
|
},
|
|
localParamName: 'publish_cityCode',
|
|
loadingProjectList: ['login', 'design', 'xty', 'designxty', 'gzb', 'designxty', 'xadt', 'designxadt', 'drts', 'designdrts', 'hlsdrts', 'designhlsdrts', 'teaching', 'designteaching']
|
|
};
|
|
},
|
|
computed: {
|
|
project() {
|
|
return getSessionStorage('project');
|
|
},
|
|
getMapByCode() {
|
|
const project = getSessionStorage('project');
|
|
return GetMapListByProjectList.includes(project);
|
|
}
|
|
},
|
|
watch: {
|
|
filterText(val) {
|
|
this.treeList = this.treeData.filter((res) => {
|
|
return res.name.includes(val);
|
|
});
|
|
}
|
|
},
|
|
beforeDestroy () {
|
|
removeSessionStorage('demonList');
|
|
},
|
|
mounted() {
|
|
if (this.getMapByCode) {
|
|
this.refresh();
|
|
}
|
|
if (this.$route.query.mapId || this.$route.params.mapId) {
|
|
const mapId = this.$route.query.mapId || this.$route.params.mapId;
|
|
this.defaultShowKeys = [mapId];
|
|
}
|
|
},
|
|
methods: {
|
|
filterNode(value, data) {
|
|
if (!value) return true;
|
|
return data.name.indexOf(value) !== -1;
|
|
},
|
|
showContextMenu(e, obj, node, vueElem) {
|
|
if (obj) {
|
|
this.node = node;
|
|
this.selected = obj;
|
|
}
|
|
},
|
|
clickEvent(obj, data, ele) {
|
|
switch (obj.type) {
|
|
case 'scriptDesign': {
|
|
const query = {lineCode:obj.lineCode};
|
|
this.$router.push({ path: `${UrlConfig.design.scriptHome}/${obj.mapId}?`, query});
|
|
break;
|
|
}
|
|
case 'lessonDesign': {
|
|
this.$router.push({ path: `${UrlConfig.design.lessonHome}/${obj.mapId}?lineCode=${obj.lineCode}&cityCode=${obj.cityCode}` });
|
|
break;
|
|
}
|
|
case 'lesson3dDesign': {
|
|
this.$router.push({ path: `${UrlConfig.design.lesson3d}`});
|
|
break;
|
|
}
|
|
case 'runPlanDesign': {
|
|
this.$router.push({ path: `${UrlConfig.design.runPlan}/${obj.mapId}?lineCode=${obj.lineCode}` });
|
|
break;
|
|
}
|
|
case 'map': {
|
|
setSessionStorage('demonList', obj.id);
|
|
break;
|
|
}
|
|
case 'mapPreview': {
|
|
this.$router.push({ path: `${UrlConfig.design.mapPreviewNew}/${obj.mapId}` });
|
|
break;
|
|
}
|
|
case 'ibpDesign': {
|
|
this.$router.push({ path: `${UrlConfig.design.ibpHome}/${obj.mapId}`, query: {cityCode: obj.cityCode} });
|
|
break;
|
|
}
|
|
case 'bigScreen': {
|
|
this.$router.push({ path: `/design/bigScreen/${obj.mapId}` });
|
|
break;
|
|
}
|
|
case 'bigSplitScreen': {
|
|
if (this.loadingProjectList.includes(this.project)) {
|
|
this.$store.dispatch('app/transitionAnimations');
|
|
}
|
|
this.$router.push({ path: `/bigSplitScreen/${obj.mapId}` });
|
|
break;
|
|
}
|
|
}
|
|
},
|
|
async refresh(filterSelect) {
|
|
this.loading = true;
|
|
this.treeData = this.treeList = [];
|
|
const that = this;
|
|
try {
|
|
let res = '';
|
|
if (this.getMapByCode) {
|
|
res = await getMapListByProjectCode(ProjectCode[this.project]);
|
|
} else {
|
|
res = await listPublishMap({cityCode: filterSelect});
|
|
}
|
|
res.data && res.data.forEach(elem=>{
|
|
elem.children = [
|
|
{
|
|
id: '1',
|
|
name: this.$t('designPlatform.mapPreview'),
|
|
type: 'mapPreview',
|
|
mapId: elem.id,
|
|
cityCode: elem.cityCode
|
|
}
|
|
];
|
|
this.isAdministrator() ? elem.children.push({id: '2', name: this.$t('designPlatform.lessonDesign'), type: 'lessonDesign', mapId: elem.id, cityCode: elem.cityCode, lineCode: elem.lineCode}) : '';
|
|
elem.children.push(
|
|
{
|
|
id: '3',
|
|
name: this.$t('designPlatform.scriptDesign'),
|
|
type: 'scriptDesign',
|
|
mapId: elem.id,
|
|
cityCode: elem.cityCode,
|
|
lineCode: elem.lineCode
|
|
// code:elem.children.find(n => { return n.name.includes("行调")})
|
|
});
|
|
elem.children.push(
|
|
{
|
|
id: '4',
|
|
name: this.$t('designPlatform.runPlanDesign'),
|
|
type: 'runPlanDesign',
|
|
mapId: elem.id,
|
|
lineCode: elem.lineCode,
|
|
cityCode: elem.cityCode
|
|
}
|
|
);
|
|
if (process.env.VUE_APP_PRO !== 'local') {
|
|
elem.children.push(
|
|
{
|
|
id: '5',
|
|
name: 'IBP盘设计',
|
|
type: 'ibpDesign',
|
|
mapId: elem.id,
|
|
lineCode: elem.lineCode,
|
|
cityCode: elem.cityCode
|
|
}
|
|
);
|
|
}
|
|
elem.children.push({
|
|
id: '6',
|
|
name: '大屏预览',
|
|
type: 'bigScreen',
|
|
mapId: elem.id,
|
|
lineCode: elem.lineCode,
|
|
cityCode: elem.cityCode
|
|
});
|
|
elem.children.push({
|
|
id: '7',
|
|
name: '大屏分屏预览',
|
|
type: 'bigSplitScreen',
|
|
mapId: elem.id,
|
|
lineCode: elem.lineCode,
|
|
cityCode: elem.cityCode
|
|
});
|
|
this.isAdministrator() ? elem.children.push({id: '8', name: this.$t('designPlatform.lesson3dDesign'), type: 'lesson3dDesign'}) : '';
|
|
|
|
});
|
|
|
|
this.treeData = res.data;
|
|
this.treeList = this.filterText
|
|
? res.data.filter(elem => { return elem.name.includes(this.filterText); })
|
|
: res.data;
|
|
this.$nextTick(() => {
|
|
const mapId = getSessionStorage('demonList') || null;
|
|
this.$refs.tree.setCurrentKey(mapId);
|
|
this.loading = false;
|
|
});
|
|
} catch (error) {
|
|
this.loading = false;
|
|
this.$messageBox(that.$t('error.refreshFailed'));
|
|
}
|
|
},
|
|
resize() {
|
|
this.widthLeft = Number(localStore.get('LeftWidth')) || this.widthLeft;
|
|
const width = this.$store.state.app.width - 521 - this.widthLeft;
|
|
const height = this.$store.state.app.height - 90;
|
|
this.$store.dispatch('config/resize', { width: width, height: height });
|
|
},
|
|
isAdministrator() {
|
|
return this.$store.state.user.roles.includes(superAdmin) || this.$store.state.user.roles.includes(admin) || this.$store.state.user.roles.includes(lessonCreater);
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
<style rel="stylesheet/scss" lang="scss" scoped>
|
|
.text_item{
|
|
width: 100%;
|
|
flex: 1;
|
|
overflow: auto;
|
|
padding-bottom: 10px;
|
|
padding-top: 5px;
|
|
}
|
|
|
|
.map-list-main{
|
|
height: 100%;
|
|
display:flex;
|
|
flex-direction:column;
|
|
}
|
|
.mapListName{
|
|
padding: 15px 0px 15px 20px;
|
|
border-bottom: 1px solid #EBEEF5;
|
|
}
|
|
</style>
|
|
<style>
|
|
.el-tree {
|
|
overflow-x: hidden;
|
|
}
|
|
.el-tree-node.is-current>.el-tree-node__content {
|
|
background-color: #e4e3e3 !important;
|
|
}
|
|
</style>
|