| | |
| | | <template> |
| | | <div |
| | | class="menus" |
| | | v-show="fullScreen" |
| | | > |
| | | <div class="menus" v-show="fullScreen"> |
| | | <div class="logo_box"> |
| | | <img |
| | | src="../assets/img/logo.png" |
| | | alt="" |
| | | class="logo" |
| | | /> |
| | | <img src="../assets/img/logo.png" alt="" class="logo" /> |
| | | <div class="logo_name"> |
| | | <h3>月球大数据地理空间分析展示平台</h3> |
| | | <img |
| | | src="../assets/img/logob.png" |
| | | alt="" |
| | | class="logo_name_b" |
| | | /> |
| | | <img src="../assets/img/logob.png" alt="" class="logo_name_b" /> |
| | | </div> |
| | | </div> |
| | | <div class="menus_box"> |
| | |
| | | </div> |
| | | </div> |
| | | </div> |
| | | <div |
| | | class="content_box" |
| | | v-show="fullScreen" |
| | | > |
| | | <div class="content_box" v-show="fullScreen"> |
| | | <div |
| | | v-show="checkMenuFlag == 'l1'" |
| | | style="position: relative; display: flex" |
| | | > |
| | | |
| | | </div> |
| | | ></div> |
| | | <div |
| | | style="position: relative; display: flex" |
| | | v-show="store.state.setLayerManager" |
| | |
| | | <plotting @setCloseplotting="setCloseplotting"> </plotting> |
| | | </div> |
| | | <div v-show="checkMenuFlag == 'l5'"> |
| | | <baseMapSwitching> </baseMapSwitching> |
| | | <baseMapSwitching @setCloseBaseMap="setCloseBaseMap"> </baseMapSwitching> |
| | | </div> |
| | | |
| | | <search v-if="thematicMapBtnState"> </search> |
| | | </div> |
| | | |
| | | <top-btn |
| | | v-show="fullScreen" |
| | | v-if="thematicMapBtnState" |
| | | ></top-btn> |
| | | |
| | | <thematic-map v-show="!thematicMapBtnState"></thematic-map> |
| | | <div |
| | | class="fullScreen_btn" |
| | | v-show="!fullScreen" |
| | | @click="screen" |
| | | ></div> |
| | | <div class="fullScreen_btn" v-show="!fullScreen" @click="screen"></div> |
| | | <div |
| | | v-show="store.state.doubleMenu" |
| | | class="setDobuleMap" |
| | |
| | | v-show="store.state.doubleMap" |
| | | > |
| | | <double-layer></double-layer> |
| | | </div> |
| | | <div |
| | | style=" |
| | | display: flex; |
| | | position: absolute; |
| | | z-index: 30; |
| | | top: 23px; |
| | | right: 23px; |
| | | " |
| | | > |
| | | <thematic-map v-show="!thematicMapBtnState"></thematic-map> |
| | | <top-btn v-show="fullScreen" v-if="thematicMapBtnState"></top-btn> |
| | | <div> |
| | | <div class="setUserLogo" @click="setLogMeu = !setLogMeu"> |
| | | <div class="setUserImage"></div> |
| | | <div class="setUserTitle">{{ store.state.uname }}</div> |
| | | </div> |
| | | <div v-show="setLogMeu" class="setLogContent" @click="setUserLogOut"> |
| | | 退出 |
| | | </div> |
| | | </div> |
| | | </div> |
| | | </template> |
| | | |
| | |
| | | import baseMapSwitching from "@/views/baseMapSwitching/baseMapSwitching.vue"; |
| | | //分屏菜单 |
| | | import doubleLayer from "@/views/layer/doubleLayer.vue"; |
| | | import { removeToken } from "@/utils/auth"; |
| | | import store from "@/store"; |
| | | //Router |
| | | import router from "@/router"; |
| | | const menuOptions = ref([]); |
| | | const checkMenuFlag = ref(""); |
| | | let fullScreen = ref(true); |
| | | let thematicMapState = ref(true); |
| | | let thematicMapBtnState = ref(true); |
| | | const setLogMeu = ref(false); |
| | | const setDoubleScreenMap = () => { |
| | | store.state.doubleMenu = false; |
| | | store.state.doubleMap = true; |
| | | }; |
| | | const setUserLogOut = () => { |
| | | removeToken(); |
| | | router.push("/Login"); |
| | | }; |
| | | const setDobuleCloseLayer = () => { |
| | | store.state.doubleMenu = true; |
| | |
| | | const setCloseplotting = (res) => { |
| | | checkMenuFlag.value = null; |
| | | }; |
| | | |
| | | const setCloseBaseMap = (res) => { |
| | | checkMenuFlag.value = null; |
| | | }; |
| | | |
| | | // 切换浏览器全屏 |
| | | const screen = () => { |
| | | fullScreen.value = !fullScreen.value; |
| | |
| | | background-size: 100% 100%; |
| | | cursor: pointer; |
| | | } |
| | | .setUserLogo { |
| | | height: 46px; |
| | | |
| | | display: flex; |
| | | .setUserImage { |
| | | width: 46px; |
| | | height: 46px; |
| | | background: url("../assets/img/图层 18.png") no-repeat center; |
| | | background-size: 100% 100%; |
| | | cursor: pointer; |
| | | } |
| | | .setUserTitle { |
| | | height: 100%; |
| | | align-items: center; |
| | | display: flex; |
| | | font-size: 15px; |
| | | font-family: Microsoft YaHei; |
| | | font-weight: 400; |
| | | color: #d6e4ff; |
| | | margin-left: 10px; |
| | | } |
| | | } |
| | | .setLogContent { |
| | | width: calc(100% - 10px); |
| | | padding: 5px; |
| | | background: rgba(7, 8, 14, 0.8); |
| | | box-shadow: inset 0px 10px 40px 10px rgba(38, 47, 71, 1); |
| | | margin-top: 10px; |
| | | font-size: 14px; |
| | | font-family: Microsoft YaHei; |
| | | font-weight: 400; |
| | | color: #d6e4ff; |
| | | } |
| | | </style> |