feat:新增头部站点选择

device-manager-ui/admin/src/assets/utils/local.js

+/**
+ *  本地存储函数
+ */
+
+ const local = {
+    // 设置
+    setLocal(key, val) {
+      localStorage.setItem(key, JSON.stringify(val));
+    },
+  
+    // 获取
+    getLocal(key) {
+      return JSON.parse(localStorage.getItem(key));
+    },
+
+    // 删除本地存储
+    removeLocal(key){
+      localStorage.removeItem(key)
+    },
+  
+    // 清空本地存储
+    clearLocal() {
+      localStorage.clear();
+    },
+  };
+  
+  // 暴露
+  export default local;
\ No newline at end of file

device-manager-ui/admin/src/assets/utils/session.js

+/**
+ *  本地存储函数
+ */
+
+const session = {
+    // 设置
+    setSession(key, val) {
+        sessionStorage.setItem(key, JSON.stringify(val));
+    },
+
+    // 获取
+    getSession(key) {
+        return JSON.parse(sessionStorage.getItem(key));
+    },
+
+    // 删除本地存储
+    removeSession(key) {
+        sessionStorage.removeItem(key)
+    },
+
+    // 清空本地存储
+    clearSession() {
+        sessionStorage.clear();
+    },
+};
+
+// 暴露
+export default session;
\ No newline at end of file

device-manager-ui/admin/src/components/Header.vue

@@ -20,6 +20,10 @@
             >
           </router-link>
         </div>
+        <!-- 站点选择 -->
+        <div>
+          <HeaderSite></HeaderSite>
+        </div>
         <!-- 一级菜单 -->
         <ul class="menu-list flex">
           <li v-for="item in menu" :key="item.id">
@@ -91,8 +95,12 @@
 </template>
 
 <script>
+import HeaderSite from "./HeaderSite.vue";
 export default {
   name: "Header",
+  components: {
+    HeaderSite,
+  },
   methods: {
     handleCommand(key) {
       if (key === "update") {

device-manager-ui/admin/src/components/HeaderSite.vue

+<template>
+  <div :trigger="['click']" class="trigger" @click="ontrigger">
+    <slot>
+      <a class="ant-dropdown-link" @click="(e) => e.preventDefault()">
+        {{ siteName }} <i class="el-icon-arrow-down"></i>
+      </a>
+    </slot>
+    <div slot="overlay" class="select-site" v-if="show">
+      <div class="flex_row flex_align_c primary-color name">
+        <a-icon type="environment" style="margin-right: 10px" />
+        <span style="">{{ siteName }}</span>
+      </div>
+      <div class="site-list">
+        <span
+          v-for="(item, index) in sitelist"
+          :key="index"
+          :class="{ 'primary-color': item.id == checkid }"
+          @click="setSite(item)"
+          >{{ item.label }}</span
+        >
+      </div>
+      <div class="check-site">
+        <span>您的选择是：</span>
+        <span
+          v-for="(item, index) in checkarr"
+          :key="index"
+          @click="updataSite(item)"
+          >{{ index > 0 ? ">" : "" }}{{ item.label }}</span
+        >
+      </div>
+      <div class="site-btn">
+        <el-button
+          type="primary"
+          size="small"
+          style="margin-right: 10px"
+          @click="onSucessSite"
+          :disabled="isSite"
+          >确定</el-button
+        >
+        <el-button size="small" @click="show = false">取消</el-button>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+// import { getSiteTree } from "@/services/businessMatter";
+import session from "@/assets/utils/session";
+// import Cookie from "js-cookie";
+export default {
+  data() {
+    return {
+      sitelist: [],
+      show: false,
+      offsetLeft: 0,
+      checkarr: [], //选中站点
+      checkid: undefined, //最终选中站点
+      siteName: "",
+      isSite: true,
+    };
+  },
+  computed: {},
+  created() {
+    this.getwaitedListdata();
+  },
+  mounted() {},
+  methods: {
+    // 确认站点
+    onSucessSite() {
+      if (this.checkarr.length == 0) return;
+      let obj = this.checkarr[this.checkarr.length - 1];
+      this.clickSite(obj);
+    },
+    // 选中
+    setSite(obj) {
+      this.checkid = undefined;
+      // 为子节点不添加数据
+      let data = this.checkarr[this.checkarr.length - 1];
+      if (data && (data.isLeaf || data.children.length == 0)) {
+        // 如果为子节点更新最后一个数据
+        this.checkid = obj.id;
+        this.checkarr[this.checkarr.length - 1] = obj;
+      } else {
+        this.checkarr.push(obj);
+        if (obj.children && obj.children.length > 0) {
+          this.sitelist = obj.children;
+        }
+      }
+      if (obj && obj.type == "site") {
+        this.isSite = false;
+      } else {
+        this.isSite = true;
+      }
+    },
+    // 更新选中
+    updataSite(row) {
+      const { id } = row;
+      this.checkid = undefined;
+      let index = this.checkarr.findIndex((v) => v.id == id);
+      this.checkarr.length = index + 1;
+      this.sitelist = row.children;
+
+      if (row && row.type == "site") {
+        this.isSite = false;
+      } else {
+        this.isSite = true;
+      }
+      // this.getwaitedListdata(id);
+    },
+    getwaitedListdata() {
+      this.$get("http://192.168.0.98:11078/base/site/siteTree").then((res) => {
+        console.log(res.data);
+        const { siteTree } = res.data;
+        this.sitelist = siteTree;
+        let arr = [];
+        const treeFn = function (e) {
+          e.forEach((element) => {
+            arr.push(element);
+            if (element.children && element.children.length > 0) {
+              treeFn(element.children);
+            }
+          });
+        };
+        const siteid = session.getSession("siteid");
+        treeFn(siteTree);
+        const siteObj = arr.find((v) => v.id == siteid);
+        this.siteName = siteObj ? siteObj.label : "请选择站点";
+      });
+    },
+    clickSite(obj) {
+      session.setSession("siteid", obj.id);
+      this.show = false;
+      if (location.href.search(/token/gi) >= 0) {
+        setTimeout(() => {
+          location.reload();
+        });
+      } else {
+        location.reload();
+      }
+    },
+    ontrigger(e) {
+      if (e.target && e.target.nodeName == "A") {
+        this.show = !this.show;
+      }
+    },
+  },
+};
+</script>
+<style lang="less" scoped>
+.trigger {
+  display: inline-block;
+  position: relative;
+}
+.ant-dropdown-link {
+  padding: 0 20px;
+  font-size: 14px;
+  min-width: 200px;
+  color: #eee;
+  display: inline-block;
+}
+.select-site {
+  position: fixed;
+  left: 100px !important;
+  top: 65px;
+  background: #fff;
+  border-radius: 6px;
+  padding: 10px;
+  min-width: 60%;
+  max-width: 80%;
+  z-index: 9;
+  color: rgba(0, 0, 0, 0.8);
+  font-size: 14px;
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
+  .name {
+    font-size: 20px;
+  }
+  .site-list {
+    // padding: 10px 0;
+    border-top: 1px solid #ddd;
+    border-bottom: 1px solid #ddd;
+    overflow: hidden;
+    span {
+      float: left;
+      line-height: 1.5;
+      padding: 10px 20px;
+      cursor: pointer;
+      &:hover {
+        color: #1890ff;
+      }
+    }
+  }
+  .check-site,
+  .site-btn {
+    padding: 0 20px;
+  }
+}
+</style>

device-manager-ui/admin/src/views/SSO.vue

@@ -7,23 +7,27 @@
 <script>
 export default {
   mounted() {
-    let token = this.$route.query.token 
-    console.log("token:"+token)
-    if(token ) {
+    let token = this.$route.query.token;
+    let siteid = this.$route.query.siteid;
+    if (token) {
       window.sessionStorage.setItem("token", token);
-      this.$router.push('/index') // 有token直接跳转首页
-    }else{
+      window.sessionStorage.setItem("siteid", siteid);
+      this.$router.push("/index"); // 有token直接跳转首页
+    } else {
       this.$message({
-          message: '没有权限，正在跳转登录页面...',
-          center: true
+        message: "没有权限，正在跳转登录页面...",
+        center: true,
       });
-        setTimeout(function(){
-         window.location.href=process.env.VUE_APP_PORTAL_URL=='undefined'?'http://192.168.0.98:11072':process.env.VUE_APP_PORTAL_URL
+      setTimeout(function () {
+        window.location.href =
+          process.env.VUE_APP_PORTAL_URL == "undefined"
+            ? "http://192.168.0.98:11072"
+            : process.env.VUE_APP_PORTAL_URL;
         //this.$router.push('/login')
-        },1000)
+      }, 1000);
     }
-  }
-}
+  },
+};
 </script>
 
 <style>