添加用户显示，退出按钮；修改顶部菜单，投影管理页面

Surpriseplus

2023-09-04 4ff2e4b83f2169661bee7ae099da67212ecbd186

添加用户显示，退出按钮；修改顶部菜单，投影管理页面

 src/App.vue

@@ -11,9 +11,13 @@
  defineEmits,
} from "vue";
import router from "./router";

import store from "@/store";
onMounted(() => {
  // router.push("/Login");
  var val = window.sessionStorage.getItem("Admin-Token");
  if (val) {
    store.state.uname = JSON.parse(val).uname;
  }
});
</script>


 src/assets/img/ͼ²ã 18.png

 src/components/thematicMap/thematicMap.vue

@@ -56,12 +56,9 @@

<style lang="less" scoped>
.top_btn {
  position: absolute;
  top: 23px;
  right: 0px;
  display: flex;
  cursor: pointer;
  z-index: 40;

  .menu_Box {
    margin-right: 104px;
    display: flex;

 src/components/topBtn.vue

@@ -101,7 +101,7 @@
  } else {
    if (res.level == 1) {
      checkFlag.value = null;

      // console.log(res);
      if (res.name == "清除") {
        menuTool.clearALL(checkArr);
      }
@@ -121,9 +121,9 @@

<style lang="less" scoped>
.top_btn {
  position: absolute;
  top: 23px;
  right: 0px;
  // position: absolute;
  // top: 23px;
  // right: 0px;
  display: flex;
  cursor: pointer;
  z-index: 30;

 src/store/index.ts

@@ -46,7 +46,11 @@
    },
    SET_TOKEN(state, token) {
      state.token = token;
      setToken(token);
      var obj = {
        token: token,
        uname: state.uname,
      };
      setToken(JSON.stringify(obj));
    },
    SET_CHECKLAYER(state, layers) {
      state.chekNowLayers = layers;

 src/utils/auth.js

@@ -2,10 +2,15 @@

export function getToken() {
    // console.log(window.sessionStorage.getItem(TokenKey));
    return window.sessionStorage.getItem(TokenKey);
    var val = window.sessionStorage.getItem(TokenKey)
    if (val) {
        return JSON.parse(val).token;
    }
    return val;
}

export function setToken(token) {
    debugger
    return window.sessionStorage.setItem(TokenKey, token);
}


 src/views/baseMapSwitching/baseMapSwitching.vue

@@ -2,7 +2,10 @@
  <div class="baseMapSwitching">
    <div class="baseMapSwitchingTitle">
      <div class="tileLeft">
        <div class="titleImg">
        <div
          class="titleImg"
          @click="setCloseBaseMap"
        >
          <ArrowLeft />
        </div>
        <div class="titleLable">投影图层管理</div>
@@ -42,6 +45,7 @@
import projection from "@/assets/js/Map/projectionServer";

import olMap from "@/assets/js/Map/olMap";
const emits = defineEmits(["setCloseBaseMap"]);
let list = ref([]);
const activceIndex = ref();
const setProjectionLayerChange = (res) => {
@@ -85,6 +89,9 @@
  // }
};
getProjectionLayer();
const setCloseBaseMap = () => {
  emits("setCloseBaseMap", false);
};
</script>

<style lang="less" scoped>

 src/views/export/exportMap.vue

@@ -113,7 +113,6 @@
    </div>
  </div>
</template>

<script lang="ts" setup>
import store from "@/store";
import {
@@ -183,7 +182,7 @@
  overflow: auto;

  .contentTitle {
    font-size: 20px;
    font-size: 16px;
    font-family: Source Han Sans CN;
    font-weight: 300;
    color: #ffffff;
@@ -220,6 +219,8 @@
    margin-top: 9px;
    margin-left: 16px;
    margin-right: 9px;
    font-size: 16px;
    font-family: Source Han Sans CN;
  }
}
.menuButton {
@@ -227,6 +228,7 @@
  display: flex;
  justify-content: center;
  align-items: center;

  .el-button {
    height: 37px;
    background: rgba(104, 156, 255, 0.2);
@@ -247,13 +249,13 @@

.menuTitle {
  width: calc(100% - 30px);
  height: 42px;
  background: #0e151f;

  font-size: 24px;
  background: #0e151f;
  font-size: 18px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: #ffffff;
  padding: 10px;
  padding-left: 28px;
}
::-webkit-scrollbar {

 src/views/login.vue

@@ -156,7 +156,6 @@
      setLogin();
    } else {
      emitter.emit("handleDraw", true);

      return false;
    }
  });
@@ -168,6 +167,7 @@
  };
  sign_login(data).then((res) => {
    if (res.code != 200) return;

    store.commit("SET_UNAME", res.result.uname);
    store.commit("SET_TOKEN", res.result.token);
    router.push("/");

 src/views/menus.vue

@@ -64,18 +64,12 @@
      <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"
@@ -94,6 +88,31 @@
  >
    <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>

<script lang="ts" setup>
@@ -123,15 +142,23 @@
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;
@@ -176,6 +203,11 @@
const setCloseplotting = (res) => {
  checkMenuFlag.value = null;
};

const setCloseBaseMap = (res) => {
  checkMenuFlag.value = null;
};

// åˆ‡æ¢æµè§ˆå™¨å…¨å±
const screen = () => {
  fullScreen.value = !fullScreen.value;
@@ -314,4 +346,37 @@
  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>

 src/views/plotting/plotting.vue

@@ -103,7 +103,7 @@
      align-items: center;

      .titleLable {
        font-size: 24px;
        font-size: 18px;
        font-family: Source Han Sans CN;
        font-weight: 400;
        color: #ffffff;
@@ -121,7 +121,7 @@
    margin-top: 3px;

    .plotting_content_title {
      font-size: 20px;
      font-size: 16px;
      font-weight: 300;
      color: #ffffff;
    }
@@ -190,7 +190,7 @@
          height: 27px;
        }
        span {
          font-size: 16px;
          font-size: 14px;
          font-weight: 300;
          color: #ffffff;
          margin-left: 10px;