| | |
| | | <template> |
| | | <div> |
| | | <div class="leftMenu"> |
| | | <div class="leftTopWrapper"> |
| | | <div class="logo"> |
| | | <img src="../assets/img/www.terra-it.cn.png" alt="" /> |
| | |
| | | <div class="menu"> |
| | | <el-menu |
| | | active-text-color="#ffd04b" |
| | | background-color="#3B4D6E" |
| | | class="el-menu-vertical-demo" |
| | | default-active="2" |
| | | :default-active="activeIndex" |
| | | background-color="#586884" |
| | | text-color="#fff" |
| | | router |
| | | @open="handleOpen" |
| | | @close="handleClose" |
| | | @select="handleselect" |
| | | > |
| | | <el-submenu index="1" class="faSub"> |
| | | <template slot="title"> |
| | | <span>{{ $t("dataManage.dataManage") }}</span> |
| | | </template> |
| | | <el-menu-item index="catalogueManage">{{ |
| | | $t("dataManage.catalogueManage") |
| | | }}</el-menu-item> |
| | | <el-menu-item index="dataUpdata">{{ |
| | | $t("dataManage.dataUpdata") |
| | | }}</el-menu-item> |
| | | <el-menu-item index="metadataManage">{{ |
| | | $t("dataManage.metadataManage") |
| | | }}</el-menu-item> |
| | | <el-menu-item index="dataLoading">{{ |
| | | $t("dataManage.dataLoading") |
| | | }}</el-menu-item> |
| | | <el-menu-item index="SpatialData">{{ |
| | | $t("dataManage.SpatialData") |
| | | }}</el-menu-item> |
| | | <el-menu-item index="versionManage">{{ |
| | | $t("dataManage.versionManage") |
| | | }}</el-menu-item> |
| | | <el-menu-item index="dictionaryManage">{{ |
| | | $t("dataManage.dictionaryManage") |
| | | }}</el-menu-item> |
| | | <el-menu-item index="styleManage">{{ |
| | | $t("dataManage.styleManage") |
| | | }}</el-menu-item> |
| | | </el-submenu> |
| | | <el-submenu index="2" class="faSub"> |
| | | <template slot="title"> |
| | | <span>{{ $t("operatManage.operatManage") }}</span> |
| | | </template> |
| | | <el-menu-item index="userManagement">{{ |
| | | $t("operatManage.userManagement") |
| | | }}</el-menu-item> |
| | | <el-submenu index="2-2"> |
| | | <template slot="title">{{ |
| | | $t("operatManage.systemLayout") |
| | | }}</template> |
| | | <el-menu-item index="menuSettings">{{ |
| | | $t("operatManage.menuSettings") |
| | | }}</el-menu-item> |
| | | <el-menu-item index="parameterConfiguration">{{ |
| | | $t("operatManage.parameterConfiguration") |
| | | }}</el-menu-item> |
| | | <el-menu-item index="rests">{{ |
| | | $t("operatManage.rests") |
| | | }}</el-menu-item> |
| | | </el-submenu> |
| | | <el-menu-item index="authorityManagement">{{ |
| | | $t("operatManage.authorityManagement") |
| | | }}</el-menu-item> |
| | | <el-menu-item index="safetyManagement">{{ |
| | | $t("operatManage.safetyManagement") |
| | | }}</el-menu-item> |
| | | <el-submenu index="2-5"> |
| | | <template slot="title">{{ |
| | | $t("operatManage.operationMonitoring") |
| | | }}</template> |
| | | <el-menu-item index="systemMonitoring">{{ |
| | | $t("operatManage.systemMonitoring") |
| | | }}</el-menu-item> |
| | | <el-menu-item index="logLog">{{ |
| | | $t("operatManage.logLog") |
| | | }}</el-menu-item> |
| | | <el-menu-item index="operationLog">{{ |
| | | $t("operatManage.operationLog") |
| | | }}</el-menu-item> |
| | | <!-- <el-menu-item index="databaseMonitoring">数据库监控</el-menu-item> --> |
| | | </el-submenu> |
| | | </el-submenu> |
| | | <el-submenu index="3" class="faSub"> |
| | | <template slot="title"> |
| | | <span>{{ $t("synthesis.synthesis") }}</span> |
| | | </template> |
| | | <el-menu-item index="Synthesis">{{ |
| | | $t("synthesis.synthesis") |
| | | }}</el-menu-item> |
| | | <el-menu-item index="Thematic">{{ |
| | | $t("synthesis.themaic") |
| | | }}</el-menu-item> |
| | | <el-menu-item index="Archive">{{ |
| | | $t("synthesis.archive") |
| | | }}</el-menu-item> |
| | | </el-submenu> |
| | | <!-- <el-submenu index="4" class="faSub"> |
| | | <template slot="title">数据质检</template> |
| | | <el-menu-item index="4-1">数据质检</el-menu-item> |
| | | </el-submenu> --> |
| | | <!-- <el-submenu index="5" class="faSub"> |
| | | <template slot="title">数据交换</template> |
| | | <el-menu-item index="5-1">数据分发</el-menu-item> |
| | | </el-submenu> --> |
| | | <!-- <el-submenu index="6" class="faSub"> |
| | | <template slot="title">服务管理</template> |
| | | <el-menu-item index="6-1">数据服务注册开启</el-menu-item> |
| | | </el-submenu> --> |
| | | <customElMenu :menuData="menuList"></customElMenu> |
| | | </el-menu> |
| | | </div> |
| | | </div> |
| | |
| | | <div class="userInfo"> |
| | | <img src="../assets/img/user.png" alt="" /> |
| | | <span>admin</span> |
| | | <span>注销</span> |
| | | <span @click="logOut">注销</span> |
| | | |
| | | <span @click="switchLang"> 切换语言</span> |
| | | </div> |
| | |
| | | </template> |
| | | |
| | | <script> |
| | | import { logout } from '@/api/api'; |
| | | import { removeToken, getToken } from '@/utils/auth'; |
| | | import customElMenu from '../components/customElMenu.vue'; |
| | | import { queryMenuTree, getPerms } from '../api/api'; |
| | | |
| | | export default { |
| | | name: "navMenu", |
| | | name: 'navMenu', |
| | | //import引入的组件需要注入到对象中才能使用 |
| | | components: { |
| | | customElMenu, |
| | | }, |
| | | data() { |
| | | return { |
| | | lang: "en", |
| | | oriData: [], //原始树数据 |
| | | dirData: [], //el树数据 |
| | | newData: [], //拖动后数据 |
| | | lang: 'zh', |
| | | activeIndex: '/', |
| | | menuList: [], |
| | | editTitle: '', |
| | | showPopover: false, |
| | | showEditInfoWrapper: false, |
| | | showEdit: false, |
| | | editMenu: false, |
| | | editCatalogue: false, |
| | | editUnit: false, |
| | | itemdetail: {}, |
| | | formLabelWidth: '70px', |
| | | }; |
| | | }, |
| | | mounted() { |
| | | this.getUserPerms(); |
| | | this.getMenuTree(); |
| | | }, |
| | | computed: { |
| | | // 我们使用计算属性来获取到当前点击的菜单的路由路径,然后设置default-active中的值 |
| | | // 使得菜单在载入时就能对应高亮 |
| | | // activeIndex() { |
| | | // const route = this.$route; |
| | | // const { meta, path } = route; |
| | | // // if set path, the sidebar will highlight the path you set |
| | | // // 可以在路由配置文件中设置自定义的路由路径到meta.activeMenu属性中,来控制菜单自定义高亮显示 |
| | | // if (meta.activeMenu) { |
| | | // return meta.activeMenu; |
| | | // } |
| | | // return path; |
| | | // }, |
| | | }, |
| | | methods: { |
| | | handleOpen(key, keyPath) { |
| | | if ( |
| | | keyPath[1] != "dataLoading" && |
| | | keyPath[1] != "2-2" && |
| | | keyPath[1] != "2-5" |
| | | ) |
| | | this.$router.push(keyPath[1]); |
| | | getMenuTree() { |
| | | //获取目录树最大ID,新建节点使用 |
| | | // queryMaxId().then((res) => { |
| | | // this.id = res.data; |
| | | // }); |
| | | // 获取目录树数据 |
| | | queryMenuTree().then((res) => { |
| | | if (res.code == 200) { |
| | | if (res.result.length != 0) { |
| | | let menuLists = res.result.filter((value) => { |
| | | return value.type == 1; |
| | | }); |
| | | this.menuList = this.treeData(menuLists); |
| | | } else { |
| | | alert('暂无菜单栏数据'); |
| | | } |
| | | } else { |
| | | console.log('接口报错'); |
| | | } |
| | | }); |
| | | }, |
| | | handleClose(key, keyPath) { |
| | | if ( |
| | | keyPath[1] != "dataLoading" && |
| | | keyPath[1] != "2-5" && |
| | | keyPath[1] != "2-2" |
| | | ) |
| | | this.$router.push(keyPath[1]); |
| | | }, |
| | | handleselect(index) { |
| | | if (index != null) { |
| | | this.$emit("shwoMapView", false); |
| | | treeData(source) { |
| | | let cloneData = JSON.parse(JSON.stringify(source)); // 对源数据深度克隆 |
| | | // console.log(cloneData); |
| | | if (cloneData.length != 0) { |
| | | return cloneData.filter((father) => { |
| | | // 循环所有项 |
| | | let branchArr = cloneData.filter((child) => father.id == child.pid); // 对比ID,分别上下级菜单,并返回数据 |
| | | branchArr.length > 0 ? (father.children = branchArr) : ''; // 给父级添加一个children属性,并赋值 |
| | | // 属于同一对象问题,例如:令 a=b、c=1 ,然后再令 b.c=c , 那么 a.c=b.c=c=1 ;同理,后续令 c.d=2 ,那么 a.c.d 也是=2; |
| | | // 由此循环多次后,就能形成相应的树形数据结构 |
| | | return father.pid == 1; // 返回一级菜单 |
| | | }); |
| | | } else { |
| | | alert('暂无菜单栏数据'); |
| | | } |
| | | }, |
| | | showChange() { |
| | | this.$emit("shwoMapView", true); |
| | | logOut() { |
| | | this.$confirm('确认是否退出登录?', '提示', { |
| | | confirmButtonText: '确定', |
| | | cancelButtonText: '取消', |
| | | type: 'warning', |
| | | }) |
| | | .then(async () => { |
| | | const data = await logout({ token: getToken() }); |
| | | console.log(data); |
| | | if (data.code != 200) { |
| | | return this.$message.error('退出登录失败'); |
| | | } |
| | | removeToken(); |
| | | this.$router.push('/login'); |
| | | this.$message({ |
| | | message: '退出登录成功', |
| | | type: 'success', |
| | | }); |
| | | }) |
| | | .catch(() => { |
| | | this.$message({ |
| | | type: 'info', |
| | | message: '已取消', |
| | | }); |
| | | }); |
| | | }, |
| | | switchLang() { |
| | | if (this.lang == "en") { |
| | | //当前en |
| | | if (this.lang == 'en') { |
| | | //语言换成zh |
| | | this.lang = 'zh'; |
| | | //菜单换为zh |
| | | this.$store.commit('changeLang', 'zh'); |
| | | //i18换成zh |
| | | this.$i18n.locale = this.lang; |
| | | this.lang = "zh"; |
| | | } else { |
| | | } |
| | | //当前zh |
| | | else { |
| | | this.lang = 'en'; |
| | | this.$i18n.locale = this.lang; |
| | | this.lang = "en"; |
| | | this.$store.commit('changeLang', 'en'); //传递点击的节点 |
| | | } |
| | | }, |
| | | handleselect(index, indexPath, e) { |
| | | // console.log(e.$attrs.perms); |
| | | this.$store.commit('currentPerms', e.$attrs.perms.perms); |
| | | if (Window.ws != null) { |
| | | Window.ws.close(); |
| | | Window.ws.onclose = () => { |
| | | console.log('服务器关闭'); |
| | | }; |
| | | Window.ws = null; |
| | | } |
| | | |
| | | if (index.indexOf('http') != -1) { |
| | | this.$router.push('/databaseMonitoring'); |
| | | this.$store.commit('getIframe', index); |
| | | } else if (isNaN(Number(index))) { |
| | | this.$router.push(index); |
| | | } |
| | | }, |
| | | getUserPerms() { |
| | | getPerms().then((res) => { |
| | | if (res.code == 200) this.$store.commit('getPermsEntity', res.result); |
| | | }); |
| | | }, |
| | | }, |
| | | watch: { |
| | | $route() { |
| | | let str = this.$route.path; |
| | | if (str[0] == '/') { |
| | | this.activeIndex = str.slice(1); |
| | | } |
| | | }, |
| | | }, |
| | | created() { |
| | | let str = this.$route.path; |
| | | if (str[0] == '/') { |
| | | this.activeIndex = str.slice(1); |
| | | } |
| | | }, |
| | | }; |
| | | </script> |
| | | <style lang="less" scoped> |
| | | //@import url(); 引入公共css类 |
| | | .leftMenu { |
| | | // width: 300px; |
| | | height: 99%; |
| | | // background-color: #bfa; |
| | | } |
| | | .leftTopWrapper { |
| | | width: 100%; |
| | | height: 100%; |
| | | .logo { |
| | | // background-color: rgb(139, 0, 0); |
| | | width: 249px; |
| | |
| | | } |
| | | } |
| | | .menu { |
| | | height: 740px; |
| | | height: 90%; |
| | | margin-top: 22px; |
| | | overflow: auto; |
| | | |
| | | // background-color: rgb(120, 121, 120); |
| | | .el-menu { |
| | | width: 234px; |
| | | height: 100%; |
| | | width: 280px; |
| | | border-right: none; |
| | | /deep/ .el-submenu { |
| | | margin-bottom: 10px; |