Merge branch 'master' of http://114.244.114.158:8802/siwei/real3d-portalsite

src/components/Combinations/toolBar/toolBar.vue

@@ -1,102 +1,52 @@
 <template>
-  <div v-if="ToolBarShow">
+  <!-- <div v-if="ToolBarShow"> -->
+  <div v-if="false">
+
     <!-- <div class="resourceTree" @click="choose(0)"></div> -->
     <div class="toolBar">
-      <el-cascader
-        size="mini"
-        :show-all-levels="false"
-        :options="xzqTreeData"
-        placeholder="行政区"
-        :props="{ checkStrictly: true, expandTrigger: 'hover' }"
-        clearable
-        v-model="xzqTreeValue"
-      ></el-cascader>
-      <li
-        class="sm-btn sm-tool-btn"
-        :title="Resource.Resource"
-        @click="choose(0)"
-      >
+      <el-cascader size="mini" :show-all-levels="false" :options="xzqTreeData" placeholder="行政区"
+        :props="{ checkStrictly: true, expandTrigger: 'hover' }" clearable v-model="xzqTreeValue"></el-cascader>
+      <li class="sm-btn sm-tool-btn" :title="Resource.Resource" @click="choose(0)">
         <span class="iconfont icontuceng"></span>
       </li>
 
       <!-- <ul v-if="show"> -->
-      <li
-        class="sm-btn sm-tool-btn"
-        :title="Resource.PoinyQuery"
-        @click="choose(9)"
-      >
+      <li class="sm-btn sm-tool-btn" :title="Resource.PoinyQuery" @click="choose(9)">
         <i class="el-icon-thumb"></i>
       </li>
-      <li
-        class="sm-btn sm-tool-btn"
-        :title="Resource.PlacenameLocation"
-        @click="choose(10)"
-      >
+      <li class="sm-btn sm-tool-btn" :title="Resource.PlacenameLocation" @click="choose(10)">
         <i class="el-icon-place"></i>
       </li>
-      <li
-        class="sm-btn sm-tool-btn"
-        :title="Resource.BookMark"
-        @click="choose(11)"
-      >
+      <li class="sm-btn sm-tool-btn" :title="Resource.BookMark" @click="choose(11)">
         <i class="el-icon-notebook-2"></i>
       </li>
-      <li
-        class="sm-btn sm-tool-btn"
-        :title="Resource.measure"
-        @click="choose(7)"
-      >
+      <li class="sm-btn sm-tool-btn" :title="Resource.measure" @click="choose(7)">
         <span class="iconfont iconliangsuan"></span>
       </li>
       <!-- <li class="sm-btn sm-tool-btn" :title="Resource.clip" @click="choose(4)">
         <span class="iconfont iconiEarth-R8-xiugai_caijian"></span>
       </li> -->
-      <li
-        class="sm-btn sm-tool-btn"
-        :title="Resource.terrain"
-        @click="choose(5)"
-      >
+      <li class="sm-btn sm-tool-btn" :title="Resource.terrain" @click="choose(5)">
         <span class="iconfont icondixing"></span>
       </li>
-      <li
-        class="sm-btn sm-tool-btn"
-        :title="Resource.onlineEditing"
-        @click="choose(8)"
-      >
+      <li class="sm-btn sm-tool-btn" :title="Resource.onlineEditing" @click="choose(8)">
         <span class="iconfont iconzaixianbianji"></span>
       </li>
-      <li
-        class="sm-btn sm-tool-btn"
-        :title="Resource.analysis"
-        @click="choose(6)"
-      >
+      <li class="sm-btn sm-tool-btn" :title="Resource.analysis" @click="choose(6)">
         <span class="iconfont iconsanweifenxi"></span>
       </li>
       <!-- <li class="sm-btn sm-tool-btn" :title="Resource.fly" @click="choose(12)">
         <i class="el-icon-guide"></i>
       </li> -->
-      <li
-        class="sm-btn sm-tool-btn"
-        :title="Resource.sceneOptions"
-        @click="choose(3)"
-      >
+      <li class="sm-btn sm-tool-btn" :title="Resource.sceneOptions" @click="choose(3)">
         <i class="el-icon-setting"></i>
       </li>
       <!-- </ul> -->
-      <div
-        style="display: none"
-        class="sm-tool-btn"
-        @click="toggleVisibility"
-        :class="{ 'sm-tool-btn-only': !show }"
-      >
-        <span
-          class="iconfont"
-          :class="
-            !show
-              ? 'iconiEarth-R8-xiugai_shouqi'
-              : 'iconiEarth-R8-xiugai_zhankai'
-          "
-        ></span>
+      <div style="display: none" class="sm-tool-btn" @click="toggleVisibility" :class="{ 'sm-tool-btn-only': !show }">
+        <span class="iconfont" :class="!show
+            ? 'iconiEarth-R8-xiugai_shouqi'
+            : 'iconiEarth-R8-xiugai_zhankai'
+          "></span>
       </div>
     </div>
     <!-- 调用子组件-->
@@ -118,12 +68,8 @@
     <air-lines-trail-lines></air-lines-trail-lines>
     <scan-effect></scan-effect>
     <wind-particle></wind-particle>
-    <placename-location
-      style="width: 400px; height: 400px; z-index: 999999"
-    ></placename-location>
-    <click-query
-      style="width: 400px; height: 700px; z-index: 999999"
-    ></click-query>
+    <placename-location style="width: 400px; height: 400px; z-index: 999999"></placename-location>
+    <click-query style="width: 400px; height: 700px; z-index: 999999"></click-query>
   </div>
 </template>
 

src/views/map3d.vue

@@ -17,50 +17,51 @@
         >
           {{ item.title }}
         </div> -->
-        <el-menu
-          :default-active="activeIndex"
-          class="el-menu-demo"
-          mode="horizontal"
-          @select="handleMenuSelect"
-          background-color="rgb(4,16,36)"
-          text-color="white"
-          active-text-color="white"
-        >
-          <template v-for="(item, index) in menu">
+        <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="handleMenuSelect"
+          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"
-            >
+            <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"
-                >
+                <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-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>
+      <!-- <div class="systemTitle">海南省国土空间智慧治理试点</div> -->
       <tool-bar></tool-bar>
       <!-- <div class="timeline">
         <div class="timeline-item" v-html="formattedText"></div>
@@ -90,7 +91,9 @@ export default {
   name: "app",
   data() {
     return {
-      menu: [],
+      menu_left: [],
+      menu_right: [],
+
       activeIndex: 0,
       formattedText: "",
       formattedTime: "",
@@ -134,7 +137,10 @@ export default {
     },
     GetRouters() {
       getRouters().then((res) => {
-        this.menu = res.data[0].children;
+
+        this.menu_left = res.data[0].children.slice(0, 3);
+        this.menu_right = res.data[0].children.slice(3, 5);
+
         // console.log(this.menu);
         let curRouter = this.$router.currentRoute.path;
         if (curRouter == "/") {
@@ -182,12 +188,13 @@ export default {
 };
 </script>
 
-<style scoped>
+<style lang="scss" scoped>
 .exit {
   font-size: 30px;
   color: cornflowerblue;
   cursor: pointer;
 }
+
 .user {
   width: 85px;
   height: 40px;
@@ -209,12 +216,14 @@ export default {
   line-height: 24px;
   text-align: left;
 }
+
 .routerContainer {
   position: absolute;
   width: 100%;
   height: calc(100% - 60px);
   top: 60px;
 }
+
 .header {
   height: 60px;
   position: fixed;
@@ -226,9 +235,10 @@ export default {
   display: flex;
   justify-content: center;
   align-items: center;
-  background-image: url("/static/images/overview/title.png");
+  background-image: url("/static/images/overview/导航栏.png");
   background-size: 100% 100%;
 }
+
 .systemTitle {
   height: 100%;
   width: 338px;
@@ -238,6 +248,7 @@ export default {
   font-size: 25px;
   color: white;
 }
+
 .menuClass {
   position: absolute;
   left: 40px;
@@ -245,6 +256,7 @@ export default {
   height: 32px;
   top: 20px;
 }
+
 .menu {
   display: inline-block;
   width: 108px;
@@ -255,6 +267,7 @@ export default {
   background-image: url("/static/images/overview/menu.png");
   background-size: 100% 100%;
 }
+
 .activemenu {
   display: inline-block;
   width: 108px;
@@ -265,11 +278,13 @@ export default {
   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;
@@ -283,6 +298,7 @@ export default {
   background-size: 100% 100%;
   z-index: 20;
 }
+
 .timeline-item {
   height: 25px;
   line-height: 25px;
@@ -309,10 +325,57 @@ export default {
   border: none !important;
   height: 100%;
   background-color: transparent;
+  position: relative;
+  left: 8rem;
+  background-color: rgba(4, 16, 36, 0) !important;
+
+
+  .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: 100%;
+  background-color: transparent;
+  position: absolute;
+  right: -77rem;
+  top: 0rem;
+  background-color: rgba(4, 16, 36, 0) !important;
+
+  .el-menu-item {
+    background-image: url("/static/images/overview/right_mune_button.png");
+    background-size: 100% 100%;
+    float: left;
+    height: 37px;
+    line-height: 43px !important;
+    margin: 0;
+    border: none;
+    color: white;
+    width: 120px;
+  }
+
+  .el-menu-item:hover {
+    font-weight: bold;
+    color: white !important;
+    background-image: url("/static/images/overview/right_mune_button_click.png");
+
+  }
+
+  .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/menu.png");
+  background-image: url("/static/images/overview/left_mune_button.png");
   background-size: 100% 100%;
   float: left;
   height: 37px;
@@ -326,11 +389,13 @@ export default {
 .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/menu.png");
+  background-image: url("/static/images/overview/left_mune_button.png");
   background-size: 100% 100%;
   height: 37px;
   line-height: 43px !important;
@@ -349,14 +414,8 @@ export default {
   color: white !important;
 }
 
-.el-menu--horizontal > .el-menu-item.is-active,
-.el-menu-item.is-active,
-.el-submenu.is-active {
-  background-image: url("/static/images/overview/menuactive.png");
-  background-size: 100% 100%;
-}
 
-.el-menu--horizontal > .el-submenu.is-active .el-submenu__title {
+.el-menu--horizontal>.el-submenu.is-active .el-submenu__title {
   border: none !important;
   color: white !important;
 }