300 lines
11 KiB
Vue
300 lines
11 KiB
Vue
<template>
|
|
<el-card v-loading="loading" class="map-list-main" header="我的地图列表">
|
|
<filter-city ref="myfilerCity" filter-empty :query-function="queryFunction" @filterSelectChange="refresh" />
|
|
<el-input v-model="filterText" :placeholder="this.$t('global.filteringKeywords')" clearable />
|
|
<el-scrollbar wrap-class="scrollbar-wrapper" :style="{ height: (height-185) +'px' }">
|
|
<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':''}"
|
|
> {{ tnode.label }}</span>
|
|
</span>
|
|
</el-tree>
|
|
</el-scrollbar>
|
|
<div class="buttonList">
|
|
<el-button size="small" type="primary" class="eachButton uploadDemo ">
|
|
<input
|
|
ref="files"
|
|
type="file"
|
|
class="file_box"
|
|
accept=".json, application/json"
|
|
@change="importf"
|
|
>
|
|
导入地图
|
|
<!-- {{ $t('map.importMap') }} -->
|
|
</el-button>
|
|
<el-button size="small" type="primary" class="eachButton" @click="createMap" >新建地图</el-button>
|
|
<!-- {{ $t('map.newConstruction') }} -->
|
|
</div>
|
|
<map-operate-menu
|
|
ref="menu"
|
|
:point="point"
|
|
:edit-model="editModel"
|
|
:skin-code="skinCode"
|
|
@refresh="refresh1"
|
|
@jlmap3d="jlmap3d"
|
|
/>
|
|
</el-card>
|
|
</template>
|
|
<script>
|
|
import { DeviceMenu } from '@/scripts/ConstDic';
|
|
import { postBuildMapImport } from '@/api/jmap/mapdraft';
|
|
import { getUserMapTree } from '@/api/designPlatform';
|
|
import { UrlConfig } from '@/router/index';
|
|
import { getSessionStorage, setSessionStorage, removeSessionStorage } from '@/utils/auth';
|
|
import FilterCity from '@/views/components/filterCity';
|
|
import localStore from 'storejs';
|
|
import MapOperateMenu from '@/views/map/mapdraft/mapmanage/operateMenu';
|
|
|
|
export default {
|
|
name: 'userMapList',
|
|
components: {
|
|
FilterCity,
|
|
MapOperateMenu
|
|
},
|
|
props: {
|
|
height: {
|
|
type: Number,
|
|
required: true
|
|
},
|
|
width: {
|
|
type: Number,
|
|
required: true
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
loading: true,
|
|
defaultShowKeys: [],
|
|
queryFunction:getUserMapTree,
|
|
filterText: '',
|
|
treeData: [],
|
|
treeList: [],
|
|
selected: {},
|
|
defaultProps: {
|
|
children: 'children',
|
|
label: 'name'
|
|
},
|
|
node: {
|
|
},
|
|
// mapId: '',
|
|
// mapName:'',
|
|
heightUp: 450,
|
|
point: {
|
|
x: 0,
|
|
y: 0
|
|
},
|
|
editModel: {},
|
|
skinCode:''
|
|
};
|
|
},
|
|
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.treeList = this.treeData.filter((res) => {
|
|
return res.name.includes(val);
|
|
});
|
|
}
|
|
},
|
|
beforeDestroy () {
|
|
removeSessionStorage('demonList');
|
|
},
|
|
mounted() {
|
|
this.heightUp = Number(localStore.get('upHeight')?localStore.get('upHeight'):(this.height)/2);
|
|
},
|
|
methods:{
|
|
filterNode(value, data) {
|
|
if (!value) return true;
|
|
return data.name.indexOf(value) !== -1;
|
|
},
|
|
createMap() {
|
|
this.$emit("createMap");
|
|
},
|
|
async refresh(filterSelect) {
|
|
this.loading = true;
|
|
this.treeData = this.treeList = [];
|
|
try {
|
|
const res = await getUserMapTree(filterSelect);
|
|
res.data.forEach(elem=>{
|
|
// if(elem.children)
|
|
// {
|
|
elem.type="map",
|
|
elem.children=[
|
|
{
|
|
id:'1',
|
|
name:'地图设计',
|
|
type:'mapDesign',
|
|
mapId:elem.id,
|
|
mapName:elem.name,
|
|
skinCode:elem.skinCode
|
|
},
|
|
// {
|
|
// id:'2',
|
|
// name:'课程设计',
|
|
// type:'lessonDesign'
|
|
// },
|
|
// {
|
|
// id:'3',
|
|
// name:'剧本设计',
|
|
// type:'scriptDesign'
|
|
// },
|
|
{
|
|
id:'4',
|
|
name:'运行图设计',
|
|
type:'runPlanDesign',
|
|
mapId:elem.id,
|
|
mapName:elem.name,
|
|
skinCode:elem.skinCode
|
|
},
|
|
]
|
|
// }
|
|
});
|
|
|
|
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(this.$t('error.refreshFailed'));
|
|
}
|
|
},
|
|
clickEvent(obj, data, ele) {
|
|
if (obj.type=="map"){
|
|
// this.mapId = data.data.id;
|
|
// this.mapName=data.data.name;
|
|
// this.skinCode=data.data.skinCode;
|
|
}
|
|
switch(obj.type){
|
|
// case 'scriptDesign':{
|
|
// this.$router.push({ path: `${UrlConfig.designUser.scriptHome}/${this.mapId}` });
|
|
// break;
|
|
// }
|
|
case 'mapDesign': {
|
|
// this.resize();
|
|
this.$router.push({ path: `${UrlConfig.designUser.mapDraw}/${obj.mapId}/draft`, query: { name: this.mapName } });
|
|
break;
|
|
}
|
|
// case 'lessonDesign': {
|
|
// this.$router.push({ path: `${UrlConfig.designUser.lessonHome}/${this.mapId}` });
|
|
// break;
|
|
// }
|
|
case 'runPlanDesign': {
|
|
this.$router.push({ path: `${UrlConfig.designUser.runPlan}/${obj.mapId}?skinCode=${obj.skinCode}` })
|
|
break;
|
|
}
|
|
}
|
|
this.$refs.menu.doClose();
|
|
},
|
|
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.skinCode = obj.skinCode;
|
|
this.$store.dispatch('menuOperation/setPopMenu', { position: this.point, menu: menu });
|
|
}
|
|
else{
|
|
// 关掉右键操作
|
|
}
|
|
},
|
|
refresh1(){
|
|
this.$refs.myfilerCity.loadInitData();
|
|
this.refresh();
|
|
},
|
|
refresh2(){
|
|
this.$refs.myfilerCity.loadInitData();
|
|
this.refresh();
|
|
},
|
|
jlmap3d() {
|
|
this.$router.push({ path: '/jlmap3d/edit', query: { mapid: this.editModel.id } });
|
|
},
|
|
importf() {
|
|
const loading = this.$loading({
|
|
lock: true,
|
|
text: '正在导入中...',
|
|
spinner: 'el-icon-loading',
|
|
background: 'rgba(0, 0, 0, 0.7)'
|
|
});
|
|
setTimeout(() => {
|
|
const obj = this.$refs.files;
|
|
if (!obj.files) return;
|
|
const f = obj.files[0];
|
|
const reader = new FileReader();
|
|
const that = this;
|
|
reader.readAsText(f, 'utf-8');
|
|
reader.onload = function(e) {
|
|
const data = e.target.result;
|
|
postBuildMapImport(JSON.parse(data)).then(res => {
|
|
loading.close();
|
|
that.$message.success('导入成功！');
|
|
that.refresh();
|
|
loading.close();
|
|
}).catch(error => {
|
|
loading.close();
|
|
that.$message.error('导入失败' + error.message);
|
|
});
|
|
obj.value = '';
|
|
};
|
|
});
|
|
},
|
|
}
|
|
};
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
.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;
|
|
}
|
|
</style>
|