|
|
@@ -0,0 +1,572 @@
|
|
|
+<template>
|
|
|
+ <div id="app">
|
|
|
+ <div class="header">
|
|
|
+ <div class="timeline">
|
|
|
+ <div class="timeline-item" v-html="formattedText"></div>
|
|
|
+ <div class="timeline-item timeline-item-time" v-html="formattedTime"></div>
|
|
|
+ </div>
|
|
|
+ <div class="menuClass" id="menuClass">
|
|
|
+ <!-- <div
|
|
|
+ v-for="(item, index) in menu"
|
|
|
+ :key="index"
|
|
|
+ :class="activeMenuId == index ? 'activemenu' : 'menu'"
|
|
|
+ @click="chooseMenu(item, index)"
|
|
|
+ >
|
|
|
+ {{ item.title }}
|
|
|
+ </div> -->
|
|
|
+ <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleMenuSelect"
|
|
|
+ background-color="rgba(4,16,36,0)" text-color="white" active-text-color="white">
|
|
|
+ <template v-for="(item, index) in menu_left">
|
|
|
+ <el-menu-item v-if="!item.children" :index="item.path">{{
|
|
|
+ item.title
|
|
|
+ }}</el-menu-item>
|
|
|
+ <el-submenu :index="index" v-if="item.children && item.children.length > 0">
|
|
|
+ <template slot="title">{{ item.title }}</template>
|
|
|
+
|
|
|
+ <template v-for="(subitem, subindex) in item.children">
|
|
|
+ <el-menu-item v-if="!subitem.children" popper-class="el-menu-item-popper" :index="subitem.path">{{
|
|
|
+ subitem.title }}</el-menu-item>
|
|
|
+ <el-submenu :index="index + '-' + subindex" v-if="subitem.children && subitem.children.length > 0">
|
|
|
+ <template slot="title">{{ subitem.title }}</template>
|
|
|
+ <el-menu-item :index="submenu.path" v-for="(submenu, sunindex) in subitem.children" :key="sunindex">{{
|
|
|
+ submenu.title }}</el-menu-item>
|
|
|
+ </el-submenu>
|
|
|
+ </template>
|
|
|
+ </el-submenu>
|
|
|
+ </template>
|
|
|
+ </el-menu>
|
|
|
+
|
|
|
+ <el-menu :default-active="activeIndex" class="el-menu-demo1" mode="horizontal" @select="handleMenuSelect1"
|
|
|
+ background-color="rgb(4,16,36)" text-color="white" active-text-color="white">
|
|
|
+ <template v-for="(item, index) in menu_right">
|
|
|
+ <el-menu-item v-if="!item.children" :index="item.path">{{
|
|
|
+ item.title
|
|
|
+ }}</el-menu-item>
|
|
|
+ <el-submenu :index="index" v-if="item.children && item.children.length > 0">
|
|
|
+ <template slot="title">{{ item.title }}</template>
|
|
|
+
|
|
|
+ <template v-for="(subitem, subindex) in item.children">
|
|
|
+ <el-menu-item v-if="!subitem.children" popper-class="el-menu-item-popper" :index="subitem.path">{{
|
|
|
+ subitem.title }}</el-menu-item>
|
|
|
+ <el-submenu :index="index + '-' + subindex" v-if="subitem.children && subitem.children.length > 0">
|
|
|
+ <template slot="title">{{ subitem.title }}</template>
|
|
|
+ <el-menu-item :index="submenu.path" v-for="(submenu, sunindex) in subitem.children" :key="sunindex">{{
|
|
|
+ submenu.title }}</el-menu-item>
|
|
|
+ </el-submenu>
|
|
|
+ </template>
|
|
|
+ </el-submenu>
|
|
|
+ </template>
|
|
|
+ </el-menu>
|
|
|
+ </div>
|
|
|
+ <div class="systemTitle">海南省国土空间智慧治理试点（三亚）</div>
|
|
|
+ <tool-bar></tool-bar>
|
|
|
+ <!-- <div class="timeline">
|
|
|
+ <div class="timeline-item" v-html="formattedText"></div>
|
|
|
+ <div
|
|
|
+ class="timeline-item timeline-item-time"
|
|
|
+ v-html="formattedTime"
|
|
|
+ ></div>
|
|
|
+ </div> -->
|
|
|
+ <el-tooltip class="item" effect="dark" content="智能会话" placement="top">
|
|
|
+ <i class="ai el-icon-chat-dot-round" @click="drawer = !drawer"></i>
|
|
|
+ </el-tooltip>
|
|
|
+ <div class="user">
|
|
|
+ <span>admin</span>
|
|
|
+ <el-tooltip class="item" effect="dark" content="退出" placement="top">
|
|
|
+ <i style="width: 24px;height: 24px;background-image: url('/static/images/overview/icon_LogOut.png'); cursor: pointer;"
|
|
|
+ @click="exit"></i>
|
|
|
+ </el-tooltip>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="routerContainer">
|
|
|
+ <router-view ref="routeViewRef"></router-view>
|
|
|
+ </div>
|
|
|
+ <sm-viewer @viewerChange="viewerChange" :isdefaultbig="true"> </sm-viewer>
|
|
|
+ <!-- <div class="masking_top">
|
|
|
+ <div class="top_left"></div>
|
|
|
+ <div class="top_right"></div>
|
|
|
+
|
|
|
+ </div>
|
|
|
+ <div class="masking_left"></div>
|
|
|
+ <div class="masking_bottom"></div>
|
|
|
+ <div class="masking_right"></div>
|
|
|
+ <div class="masking_right"></div> -->
|
|
|
+ <el-drawer :visible.sync="drawer" :with-header="false" :append-to-body="true" :show-close="false">
|
|
|
+ <iframe :src="aiModel" style="width: 100%; height: 100%; position: absolute"></iframe>
|
|
|
+ </el-drawer>
|
|
|
+
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import { getRouters } from "@/api/menu";
|
|
|
+export default {
|
|
|
+ name: "app",
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ menu_left: [],
|
|
|
+ menu_right: [],
|
|
|
+
|
|
|
+ activeIndex: 0,
|
|
|
+ formattedText: "",
|
|
|
+ formattedTime: "",
|
|
|
+ activeMenuId: 0,
|
|
|
+ drawer: false,
|
|
|
+ aiModel: window.aiModel
|
|
|
+ };
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ this.GetRouters();
|
|
|
+ },
|
|
|
+ computed: {},
|
|
|
+ mounted() {
|
|
|
+ //动态时间回显
|
|
|
+ setInterval(() => {
|
|
|
+ this.updateTime();
|
|
|
+ }, 1000);
|
|
|
+ this.updateTime();
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ viewerChange(isbig) {
|
|
|
+ // this.$refs.routeViewRef[ isbig ? 'switchPack_down':'switchPack_up']()
|
|
|
+ this.$refs.routeViewRef["switch"]();
|
|
|
+ },
|
|
|
+ handleMenuSelect(item) {
|
|
|
+ this.$router.push({ path: item });
|
|
|
+
|
|
|
+ if (item == "/checkmodel") {
|
|
|
+ store.setToolBarShow(true); //显示工具栏
|
|
|
+ // this.$refs.routeViewRef["switch"]();
|
|
|
+
|
|
|
+ } else {
|
|
|
+ store.setToolBarShow(false); //显示工具栏
|
|
|
+ // this.$refs.routeViewRef["switch"]();
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ // 菜单切换的时候取消左或者右高亮菜单
|
|
|
+ // var lis = document.querySelectorAll('.el-menu-demo1 li');
|
|
|
+ // console.log(lis, "lis");
|
|
|
+
|
|
|
+ // lis.forEach(function (li) {
|
|
|
+ // li.classList.remove('is-active');
|
|
|
+ // });
|
|
|
+ },
|
|
|
+ handleMenuSelect1(item) {
|
|
|
+
|
|
|
+
|
|
|
+ this.$router.push({ path: item });
|
|
|
+ // var lis = document.querySelectorAll('.el-menu-demo li');
|
|
|
+ // lis.forEach(function (li) {
|
|
|
+ // li.classList.remove('is-active');
|
|
|
+ // });
|
|
|
+ },
|
|
|
+ updateTime() {
|
|
|
+ let s = new Date().toLocaleString().split(" ");
|
|
|
+ this.formattedText = s[0];
|
|
|
+ // this.formattedTime = s[1];
|
|
|
+
|
|
|
+ var index = s[1].lastIndexOf(":");
|
|
|
+ this.formattedTime = s[1].substring(0, index);
|
|
|
+ },
|
|
|
+ chooseMenu(item, index) {
|
|
|
+ if (this.activeMenuId == index) {
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ console.log(item);
|
|
|
+ this.activeMenuId = index;
|
|
|
+ this.$router.push({ path: item.path });
|
|
|
+ },
|
|
|
+ GetRouters() {
|
|
|
+ getRouters().then((res) => {
|
|
|
+
|
|
|
+ this.menu_left = res.data[0].children.slice(0, 3);
|
|
|
+ this.menu_right = res.data[0].children.slice(3, 5);
|
|
|
+
|
|
|
+ let curRouter = this.$router.currentRoute.path;
|
|
|
+ if (curRouter == "/") {
|
|
|
+ this.activeIndex = this.menu[0].path;
|
|
|
+ this.$router.push({ path: this.menu[0].path });
|
|
|
+ } else {
|
|
|
+ this.activeIndex = curRouter;
|
|
|
+ this.$router.push({ path: curRouter });
|
|
|
+ // for (let i = 0; i < this.menu.length; i++) {
|
|
|
+ // if (this.menu[i].path == curRouter) {
|
|
|
+ // this.activeMenuId = i;
|
|
|
+ // this.$router.push({ path: this.menu[i].path });
|
|
|
+ // break;
|
|
|
+ // }
|
|
|
+ // }
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ getDayOfWeek() {
|
|
|
+ const days = [
|
|
|
+ "星期日",
|
|
|
+ "星期一",
|
|
|
+ "星期二",
|
|
|
+ "星期三",
|
|
|
+ "星期四",
|
|
|
+ "星期五",
|
|
|
+ "星期六",
|
|
|
+ ];
|
|
|
+ const date = new Date();
|
|
|
+ return days[date.getDay()];
|
|
|
+ },
|
|
|
+ exit() {
|
|
|
+ this.$alert("确认退出登录吗？", "提示", {
|
|
|
+ confirmButtonText: "确定",
|
|
|
+ callback: (action) => {
|
|
|
+ if (action != "cancel") {
|
|
|
+ this.$store.dispatch("LogOut").then(() => {
|
|
|
+ location.href = "/login";
|
|
|
+ });
|
|
|
+ }
|
|
|
+ },
|
|
|
+ });
|
|
|
+ },
|
|
|
+ },
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+.exit {
|
|
|
+ font-size: 30px;
|
|
|
+ color: cornflowerblue;
|
|
|
+ cursor: pointer;
|
|
|
+}
|
|
|
+
|
|
|
+.ai {
|
|
|
+ position: absolute;
|
|
|
+ right: 110px;
|
|
|
+ top: 19px;
|
|
|
+ color: cornflowerblue;
|
|
|
+ font-size: 24px;
|
|
|
+}
|
|
|
+
|
|
|
+.user {
|
|
|
+ width: 85px;
|
|
|
+ height: 40px;
|
|
|
+ position: absolute;
|
|
|
+ right: 10px;
|
|
|
+ top: 10px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+}
|
|
|
+
|
|
|
+.user span {
|
|
|
+ display: inline-block;
|
|
|
+ width: 60px;
|
|
|
+ height: 24px;
|
|
|
+ padding-left: 5px;
|
|
|
+ /* background-color: pink; */
|
|
|
+ font-size: 14px;
|
|
|
+ color: #bcd3e5;
|
|
|
+ line-height: 24px;
|
|
|
+ text-align: left;
|
|
|
+}
|
|
|
+
|
|
|
+.routerContainer {
|
|
|
+ position: absolute;
|
|
|
+ width: 100%;
|
|
|
+ height: calc(100% - 60px);
|
|
|
+ top: 60px;
|
|
|
+ // z-index: 100;
|
|
|
+}
|
|
|
+
|
|
|
+.header {
|
|
|
+ height: 60px;
|
|
|
+ position: fixed;
|
|
|
+ top: 0px;
|
|
|
+ width: 100%;
|
|
|
+ z-index: 100;
|
|
|
+ // background: RGBA(31, 35, 41, 1);
|
|
|
+ text-align: center;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ background-image: url("/static/images/overview/title_new.png");
|
|
|
+
|
|
|
+ background-size: 100% 100%;
|
|
|
+}
|
|
|
+
|
|
|
+.masking_top {
|
|
|
+ height: 60px;
|
|
|
+ position: fixed;
|
|
|
+ top: 0px;
|
|
|
+ width: 100%;
|
|
|
+ background: no-repeat;
|
|
|
+
|
|
|
+ // // background-image: url("/static/images/overview/masking_top.png");
|
|
|
+ // .top_left {
|
|
|
+ // height: 100%;
|
|
|
+ // width: 29%;
|
|
|
+ // background: -webkit-linear-gradient(left, RGBA(11, 32, 61, 1), RGBA(8, 40, 60, 1));
|
|
|
+ // }
|
|
|
+
|
|
|
+ // .top_right {
|
|
|
+ // background: -webkit-linear-gradient(right, RGBA(8, 40, 60, 1), RGBA(11, 32, 61, 1));
|
|
|
+
|
|
|
+ // }
|
|
|
+
|
|
|
+}
|
|
|
+
|
|
|
+.masking_left {
|
|
|
+ width: 415px;
|
|
|
+ height: 100%;
|
|
|
+ background: no-repeat;
|
|
|
+ background-image: url("/static/images/overview/masking_left.png");
|
|
|
+
|
|
|
+}
|
|
|
+
|
|
|
+.masking_bottom {
|
|
|
+
|
|
|
+ width: 100%;
|
|
|
+ height: 140px;
|
|
|
+ background: no-repeat;
|
|
|
+ background-image: url("/static/images/overview/masking_bottom.png");
|
|
|
+
|
|
|
+ position: fixed;
|
|
|
+ bottom: 0.1rem;
|
|
|
+}
|
|
|
+
|
|
|
+.masking_right {
|
|
|
+ width: 415px;
|
|
|
+ height: 100%;
|
|
|
+ background: no-repeat;
|
|
|
+ background-image: url("/static/images/overview/masking_right.png");
|
|
|
+ position: fixed;
|
|
|
+ right: -1rem;
|
|
|
+ top: 1rem;
|
|
|
+ z-index: 1;
|
|
|
+}
|
|
|
+
|
|
|
+.systemTitle {
|
|
|
+ height: 100%;
|
|
|
+ width: 430;
|
|
|
+ position: absolute;
|
|
|
+ top: 0px;
|
|
|
+ line-height: 60px;
|
|
|
+ font-size: 25px;
|
|
|
+ // color: white;
|
|
|
+ background: linear-gradient(180deg, rgba(212, 250, 255, 1) 10%, rgba(54, 215, 215, 1) 100%);
|
|
|
+ -webkit-background-clip: text;
|
|
|
+ -webkit-text-fill-color: transparent;
|
|
|
+ font-family: auto;
|
|
|
+ font-weight: 600;
|
|
|
+}
|
|
|
+
|
|
|
+.menuClass {
|
|
|
+ position: absolute;
|
|
|
+ left: 40px;
|
|
|
+ font-size: 14px;
|
|
|
+ height: 32px;
|
|
|
+ top: 20px;
|
|
|
+}
|
|
|
+
|
|
|
+.menu {
|
|
|
+ display: inline-block;
|
|
|
+ width: 108px;
|
|
|
+ height: 100%;
|
|
|
+ line-height: 35px;
|
|
|
+ margin-left: 9px;
|
|
|
+ cursor: pointer;
|
|
|
+ background-image: url("/static/images/overview/menu.png");
|
|
|
+ background-size: 100% 100%;
|
|
|
+}
|
|
|
+
|
|
|
+.activemenu {
|
|
|
+ display: inline-block;
|
|
|
+ width: 108px;
|
|
|
+ height: 100%;
|
|
|
+ line-height: 35px;
|
|
|
+ margin-left: 9px;
|
|
|
+ cursor: pointer;
|
|
|
+ background-image: url("/static/images/overview/menuactive.png");
|
|
|
+ background-size: 100% 100%;
|
|
|
+}
|
|
|
+
|
|
|
+.menu:hover,
|
|
|
+.activemenu:hover {
|
|
|
+ /* background: blue; */
|
|
|
+ font-weight: bold;
|
|
|
+}
|
|
|
+
|
|
|
+.timeline {
|
|
|
+ position: absolute;
|
|
|
+ left: 11px;
|
|
|
+ top: 10px;
|
|
|
+ height: 38px;
|
|
|
+ line-height: 60px;
|
|
|
+ font-size: 14px;
|
|
|
+ width: 100px;
|
|
|
+ color: white;
|
|
|
+ /* background-image: url(/static/images/overview/time.png); */
|
|
|
+ background-size: 100% 100%;
|
|
|
+ z-index: 20;
|
|
|
+}
|
|
|
+
|
|
|
+.timeline-item {
|
|
|
+ height: 25px;
|
|
|
+ line-height: 25px;
|
|
|
+ /* text-align: center; */
|
|
|
+ text-align: left;
|
|
|
+ width: 100%;
|
|
|
+ display: inline-block;
|
|
|
+ position: relative;
|
|
|
+ top: -21px;
|
|
|
+ letter-spacing: 1px;
|
|
|
+
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 14px;
|
|
|
+ color: #bcd3e5;
|
|
|
+}
|
|
|
+
|
|
|
+.timeline-item-time {
|
|
|
+ top: -62px;
|
|
|
+ font-size: 14px;
|
|
|
+ text-align: left;
|
|
|
+}
|
|
|
+
|
|
|
+.el-menu-demo {
|
|
|
+ border: none !important;
|
|
|
+ height: 5%;
|
|
|
+ background-color: transparent;
|
|
|
+ position: relative;
|
|
|
+ background-color: rgba(4, 16, 36, 0) !important;
|
|
|
+ position: fixed;
|
|
|
+ left: 9.3rem;
|
|
|
+
|
|
|
+ top: 1rem;
|
|
|
+ font-weight: 700;
|
|
|
+
|
|
|
+ .el-menu--horizontal>.el-menu-item.is-active,
|
|
|
+ .el-menu-item.is-active,
|
|
|
+ .el-submenu.is-active {
|
|
|
+ background-image: url("/static/images/overview/left_mune_button_click.png");
|
|
|
+ background-size: 100% 100%;
|
|
|
+ }
|
|
|
+
|
|
|
+}
|
|
|
+
|
|
|
+.el-menu-demo1 {
|
|
|
+ border: none !important;
|
|
|
+ height: 5%;
|
|
|
+ background-color: transparent;
|
|
|
+ position: fixed;
|
|
|
+ right: 16.9rem;
|
|
|
+ top: 1.1rem;
|
|
|
+ background-color: rgba(4, 16, 36, 0) !important;
|
|
|
+ font-weight: 700;
|
|
|
+
|
|
|
+ .el-menu-item {
|
|
|
+ background-image: url("/static/images/overview/right_mune_button.png");
|
|
|
+ background-size: 100% 100%;
|
|
|
+ float: left;
|
|
|
+ height: 34px;
|
|
|
+ line-height: 34px !important;
|
|
|
+ margin: 0;
|
|
|
+ border: none;
|
|
|
+ color: white;
|
|
|
+ width: 120px;
|
|
|
+ // margin-right: -1.2rem;
|
|
|
+ margin-right: 1rem;
|
|
|
+ }
|
|
|
+
|
|
|
+ .el-menu-item:hover {
|
|
|
+ font-weight: bold;
|
|
|
+ color: white !important;
|
|
|
+ background-image: url("/static/images/overview/right_mune_button_click.png");
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ // 暂时隐藏
|
|
|
+
|
|
|
+ // .el-menu--horizontal>.el-menu-item.is-active,
|
|
|
+ // .el-menu-item.is-active,
|
|
|
+ // .el-submenu.is-active {
|
|
|
+ // background-image: url("/static/images/overview/right_mune_button_click.png");
|
|
|
+ // background-size: 100% 100%;
|
|
|
+ // }
|
|
|
+
|
|
|
+}
|
|
|
+
|
|
|
+.el-menu-item {
|
|
|
+ background-image: url("/static/images/overview/left_mune_button.png");
|
|
|
+ background-size: 100% 100%;
|
|
|
+ float: left;
|
|
|
+ height: 37px;
|
|
|
+ line-height: 43px !important;
|
|
|
+ margin: 0;
|
|
|
+ border: none;
|
|
|
+ color: white;
|
|
|
+ width: 120px;
|
|
|
+ margin-right: 1rem;
|
|
|
+}
|
|
|
+
|
|
|
+.el-menu-item:hover {
|
|
|
+ font-weight: bold;
|
|
|
+ color: white !important;
|
|
|
+ background-image: url("/static/images/overview/left_mune_button_click.png");
|
|
|
+
|
|
|
+}
|
|
|
+
|
|
|
+.el-submenu,
|
|
|
+.is-opend {
|
|
|
+ background-image: url("/static/images/overview/left_mune_button.png");
|
|
|
+ background-size: 100% 100%;
|
|
|
+ height: 34px;
|
|
|
+ line-height: 34px !important;
|
|
|
+ margin: 0;
|
|
|
+ border: none;
|
|
|
+ color: white;
|
|
|
+ width: 120px;
|
|
|
+ margin-right: 1rem;
|
|
|
+}
|
|
|
+
|
|
|
+.el-menu--popup .el-submenu {
|
|
|
+ width: 100% !important;
|
|
|
+}
|
|
|
+
|
|
|
+.el-submenu:hover {
|
|
|
+ font-weight: bold;
|
|
|
+ color: white !important;
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+.el-menu--horizontal>.el-submenu.is-active .el-submenu__title {
|
|
|
+ border: none !important;
|
|
|
+ color: white !important;
|
|
|
+}
|
|
|
+
|
|
|
+.el-submenu__title {
|
|
|
+ height: 39px !important;
|
|
|
+ line-height: 43px !important;
|
|
|
+ border: none !important;
|
|
|
+ color: white !important;
|
|
|
+}
|
|
|
+
|
|
|
+/deep/ .el-menu-item.is-active,
|
|
|
+/deep/.el-submenu.is-active,
|
|
|
+/deep/ .el-submenu.is-active,
|
|
|
+/deep/.el-submenu__title {
|
|
|
+ border: none;
|
|
|
+ color: white;
|
|
|
+}
|
|
|
+
|
|
|
+/deep/ .el-menu-item,
|
|
|
+/deep/ .el-submenu__title,
|
|
|
+/deep/ .is-opened {
|
|
|
+ height: 34px !important;
|
|
|
+ line-height: 34px !important;
|
|
|
+ color: white !important;
|
|
|
+ background-color: transparent !important;
|
|
|
+ border: none !important;
|
|
|
+ text-align: center !important;
|
|
|
+}
|
|
|
+</style>
|
