perf: 修改顶部站点选择组件

admin_2/src/layouts/components/Header.vue

@@ -7,10 +7,10 @@
         alt="LOGO"
         @click="handleGoHome"
       />
-      <h1 class="title mr-[50px] cursor-pointer" @click="handleGoHome">
+      <h1 class="title cursor-pointer" @click="handleGoHome">
         {{ sysName ? sysName : systemName }}
       </h1>
-      <!-- <HeaderSite class="mr50 ml20"></HeaderSite> -->
+      <HeaderSite class="ml-10"></HeaderSite>
     </div>
     <!-- 导航 -->
     <el-menu
@@ -54,11 +54,11 @@
 </template>
 
 <script>
-// import HeaderSite from "./HeaderSite.vue";
+import HeaderSite from "./HeaderSite.vue";
 import { mapState } from "vuex";
 export default {
   components: {
-    // HeaderSite,
+    HeaderSite,
   },
   data() {
     return {

admin_2/src/layouts/components/HeaderSite copy.vue

+<template>
+  <el-popover placement="bottom-start" trigger="manual" v-model="visible">
+    <a slot="reference" class="ant-dropdown-link" @click="visible = true">
+      {{ siteName }} <i class="el-icon-arrow-down"></i>
+    </a>
+    <div
+      class="content"
+      style="min-width: 60vw; max-width: 80vw; min-height: 200px"
+    >
+      <div class="flex_row flex_align_c primary-color name">
+        <i class="el-icon-location" style="margin-right: 10px"></i>
+        <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 size="small" @click="visible = false">取消</el-button>
+
+        <el-button
+          type="primary"
+          size="small"
+          @click="onSucessSite"
+          :disabled="isSite"
+          >确定</el-button
+        >
+      </div>
+    </div>
+  </el-popover>
+</template>
+<script>
+import { getSiteTree } from "@/api/site";
+import storage from "@/utils/storage";
+export default {
+  data() {
+    return {
+      sitelist: [],
+      visible: 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;
+        // 如果选中数据有子集更新站点列表
+        if (obj.children && obj.children.length > 0) {
+          this.sitelist = obj.children;
+        }
+      } 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);
+
+      if (index > -1) {
+        this.checkarr.splice(index + 1, this.checkarr.length - (index + 1));
+      }
+      if (row.children && row.children.length > 0) {
+        this.sitelist = row.children;
+      }
+
+      if (row && row.type == "site") {
+        this.isSite = false;
+      } else {
+        this.isSite = true;
+      }
+      // this.getwaitedListdata(id);
+    },
+    getwaitedListdata() {
+      getSiteTree().then((res) => {
+        const { code, data } = res.data;
+        if (code == 1) {
+          const { siteTree } = 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 = storage.get(2, "siteId");
+          treeFn(siteTree);
+          const siteObj = arr.find((v) => v.id == siteid);
+          this.siteName = siteObj ? siteObj.label : "请选择站点";
+        }
+      });
+    },
+    clickSite(obj) {
+      storage.set(2, "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>
+.ant-dropdown-link {
+  padding: 0 20px;
+  font-size: 16px;
+  min-width: 200px;
+  display: inline-block;
+}
+.content {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-around;
+  .name {
+    font-size: 20px;
+    color: #1890ff;
+  }
+  .site-list {
+    border-top: 1px solid #ddd;
+    border-bottom: 1px solid #ddd;
+    display: flex;
+    flex-wrap: wrap;
+    span {
+      line-height: 1.5;
+      padding: 10px 20px;
+      cursor: pointer;
+      &:hover {
+        color: #1890ff;
+      }
+    }
+  }
+  .check-site,
+  .site-btn {
+    padding: 0 20px;
+  }
+  .check-site {
+    cursor: pointer;
+  }
+}
+.trigger {
+  display: inline-block;
+  position: relative;
+}
+.ant-dropdown-link {
+  padding: 0 20px;
+  font-size: 16px;
+  display: inline-block;
+  color: #fff;
+  cursor: pointer;
+}
+.select-site {
+  position: fixed;
+  left: 300px !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>

admin_2/src/layouts/components/HeaderSite.vue

 <template>
-  <el-popover placement="bottom-start" trigger="manual" v-model="visible">
-    <a slot="reference" class="ant-dropdown-link" @click="visible = true">
-      {{ siteName }} <i class="el-icon-arrow-down"></i>
-    </a>
-    <div
-      class="content"
-      style="min-width: 60vw; max-width: 80vw; min-height: 200px"
+  <div class="flex items-center gap-5">
+    <el-popover
+      placement="bottom-start"
+      trigger="manual"
+      :offset="-100"
+      v-model="visible"
     >
-      <div class="flex_row flex_align_c primary-color name">
-        <i class="el-icon-location" style="margin-right: 10px"></i>
-        <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 class="change-btn" slot="reference" @click="visible = true">
+        切换站点
       </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 size="small" @click="visible = false">取消</el-button>
+      <!-- <a slot="reference" class="ant-dropdown-link" @click="visible = true">
+      {{ siteName }} <i class="el-icon-arrow-down"></i>
+    </a> -->
+      <div
+        class="content"
+        style="min-width: 60vw; max-width: 80vw; min-height: 200px"
+      >
+        <div class="flex_row flex_align_c primary-color name">
+          <i class="el-icon-location" style="margin-right: 10px"></i>
+          <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 size="small" @click="visible = false">取消</el-button>
 
-        <el-button
-          type="primary"
-          size="small"
-          @click="onSucessSite"
-          :disabled="isSite"
-          >确定</el-button
-        >
+          <el-button
+            type="primary"
+            size="small"
+            @click="onSucessSite"
+            :disabled="isSite"
+            >确定</el-button
+          >
+        </div>
       </div>
-    </div>
-  </el-popover>
+    </el-popover>
+    <div class="font-[500]">{{ siteName }}</div>
+  </div>
 </template>
 <script>
 import { getSiteTree } from "@/api/site";
@@ -206,6 +217,19 @@ export default {
   color: #fff;
   cursor: pointer;
 }
+.change-btn {
+  width: 78px;
+  height: 32px;
+  background: rgba(255, 255, 255, 0.2);
+  border-radius: 4px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-weight: 500;
+  font-size: 14px;
+  color: #ffffff;
+  cursor: pointer;
+}
 .select-site {
   position: fixed;
   left: 300px !important;