liujiejie před 11 měsíci
rodič
revize
241f0377a2

+ 228 - 0
src/components/MenuTag.vue

@@ -0,0 +1,228 @@
+<template>
+  <el-card class="box-card">
+    <div class="tags" ref="tags" :style="{ padding: '6px 10px' }">
+      <div class="tags-out-box" ref="outBox">
+        <div
+          class="tags-box"
+          ref="box"
+          :style="{
+            'padding-left': '0',
+            left: `${left}px`,
+          }"
+        >
+          <el-tag
+            ref="tag"
+            size="small"
+            v-for="(tag, i) in tags"
+            :data-index="i"
+            :data-id="tag.name"
+            :key="tag.name"
+            :closable="tag.name !== 'home' && tag.name !== '驾驶舱'"
+            :effect="$route.name === tag.name ? 'dark' : 'plain'"
+            class="tagBox"
+            :class="{
+              'selected-tag':
+                $route.name === tag.name || $route.name === 'cockpitManage',
+              'unselected-tag': $route.name !== tag.name,
+            }"
+            @contextmenu.native.prevent="handleClickContextMenu($event, tag, i)"
+            @click="handleTagClick($event, tag)"
+            @close="handleTagClose(tag, i)"
+          >
+            {{ tag.label }}
+          </el-tag>
+        </div>
+      </div>
+      <ul
+        class="right-menu"
+        :style="{ left: menuLeft, top: menuTop, zIndex: 99 }"
+        v-show="contextMenuVisible"
+      >
+        <a href="javascript:;" @click="refresh">刷新</a>
+        <a href="javascript:;" @click="closeAllTag">关闭所有</a>
+      </ul>
+    </div>
+  </el-card>
+</template>
+
+<script>
+import { mapState, mapActions } from "vuex";
+
+export default {
+  data() {
+    return {
+      contextMenuVisible: false, // 是否显示菜单
+      menuLeft: "", // 右键菜单距离浏览器左边的距离
+      menuTop: "", // 右键菜单距离浏览器上边的距离
+      tagIndex: 0, // 当前点击的tag的索引
+      tag: {}, // 当前右键点击的tag对象
+      arrowVisible: false, // 是否显示箭头
+      tagsBoxWidth: 0, // ref 为 outBox 的长度
+      tagsWidth: 0, // ref 为 tags 的长度
+      left: 0, // ref 为 box 节点相对于左边的距离,用于箭头点击
+    };
+  },
+  computed: {
+    ...mapState({
+      tags: (state) => state.menuTag.tagList,
+    }),
+  },
+  methods: {
+    ...mapActions("menuTag", [
+      "addTag",
+      "removeTag",
+      "removeOtherTags",
+      "removeAllTags",
+      "setTagList",
+    ]),
+    handleClickContextMenu(event, tag, index) {
+      this.contextMenuVisible = true;
+      this.menuLeft = `${event.clientX}px`;
+      this.menuTop = `${event.clientY}px`;
+      this.tagIndex = index;
+      this.tag = tag;
+    },
+    handleTagClick(event, tag) {
+      this.contextMenuVisible = false;
+      // 点击标签时的处理逻辑
+      // 例如:导航到标签对应的页面
+      this.$router.push(tag.path);
+    },
+    handleTagClose(tag, index) {
+      // 关闭标签时的处理逻辑
+      if (tag.name !== "home") {
+        this.removeTag(tag);
+      }
+    },
+    refresh() {
+      // 刷新标签页的逻辑
+      this.$router.push({ path: this.tag.path, query: { refresh: true } });
+      this.contextMenuVisible = false;
+    },
+    closeAllTag() {
+      // 关闭所有标签的逻辑
+      this.removeAllTags();
+      this.contextMenuVisible = false;
+    },
+    updateArrowVisibility() {
+      this.tagsBoxWidth = this.$refs.outBox.offsetWidth;
+      this.tagsWidth = this.$refs.box.scrollWidth;
+      console.log();
+      // this.arrowVisible = this.tagsWidth > this.tagsBoxWidth;
+    },
+  },
+  watch: {
+    tags() {
+      this.$nextTick(() => {
+        this.updateArrowVisibility();
+      });
+    },
+  },
+  mounted() {
+    this.updateArrowVisibility();
+    window.addEventListener("resize", this.updateArrowVisibility);
+  },
+  beforeDestroy() {
+    window.removeEventListener("resize", this.updateArrowVisibility);
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+::v-deep.box-card {
+  border: 0 !important;
+  border-bottom: 1px solid #d8dce5 !important;
+  -webkit-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.12),
+    0 0 3px 0 rgba(0, 0, 0, 0.04) !important;
+  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.12), 0 0 3px 0 rgba(0, 0, 0, 0.04) !important;
+  .tags-out-box {
+    width: 100%;
+    .tags-box {
+      width: 100%;
+      overflow-x: scroll;
+    }
+    .tags-box::-webkit-scrollbar {
+      width: 0px;
+      height: 0px;
+      background: transparent; /* 隐藏滚动条 */
+    }
+    .tags-box {
+      scrollbar-width: none; /* 隐藏滚动条 */
+      -ms-overflow-style: none; /* 隐藏滚动条(旧版 Internet Explorer 和 Edge) */
+    }
+
+    .tags-box::-webkit-scrollbar {
+      width: 0px;
+      height: 0px;
+      background: transparent; /* 隐藏滚动条 */
+    }
+    .tags-box {
+      overflow: -moz-scrollbars-none; /* 隐藏滚动条(旧版 Firefox) */
+      -ms-overflow-style: none; /* 隐藏滚动条(旧版 Internet Explorer 和 Edge) */
+      scrollbar-width: none; /* 隐藏滚动条(Firefox) */
+    }
+
+    .tags-box::-webkit-scrollbar {
+      width: 0px;
+      height: 0px;
+      background: transparent; /* 隐藏滚动条(Webkit 浏览器) */
+    }
+  }
+}
+::v-deep.box-card .el-card__body {
+  padding: 0 !important;
+}
+.tagBox {
+  cursor: pointer;
+}
+.tags {
+  width: 100%;
+  white-space: nowrap;
+  background-color: #fff;
+  // padding: 12px 10px;
+
+  &-out-box {
+    display: inline-block;
+    position: relative;
+  }
+
+  &-box {
+    position: relative;
+    transition: 0.3s;
+  }
+}
+
+.el-tag {
+  margin: 0 5px;
+
+  // &.selected-tag {
+  //   background-color: #409eff !important; // 选中的背景色
+  //   color: #fff; // 选中的文字颜色
+  // }
+
+  &.unselected-tag {
+    background-color: #fff !important; // 未选中的背景色
+    color: #333 !important; // 未选中的文字颜色
+    border-color: #ccc !important;
+  }
+}
+
+.right-menu {
+  position: absolute;
+  background-color: #fff;
+  border: 1px solid #dcdcdc;
+  list-style: none;
+  padding: 10px 0;
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
+
+  a {
+    display: block;
+    padding: 5px 20px;
+    color: #666;
+    text-decoration: none;
+    &:hover {
+      background-color: #f5f5f5;
+    }
+  }
+}
+</style>

+ 9 - 9
src/router/index.js

@@ -24,7 +24,7 @@ const createRouter = () =>
           {
             id: 1,
             path: "cockpitManage",
-            name: "cockpitManage",
+            name: "驾驶舱",
             iconName: "gps",
             component: () =>
               import(
@@ -44,14 +44,14 @@ const createRouter = () =>
             // ],
           },
           {
-             // 电子地图
-              id: 11,
-              path: "cockpitManage/electronic-map",
-              name: "electronicMap",
-              component: () =>
-                import(
-                  /*webpackChunkName:'home-cockpitManage'*/ "../views/admin/cockpitManage/electronicMap.vue"
-                ),
+            // 电子地图
+            id: 11,
+            path: "cockpitManage/electronic-map",
+            name: "电子地图",
+            component: () =>
+              import(
+                /*webpackChunkName:'home-cockpitManage'*/ "../views/admin/cockpitManage/electronicMap.vue"
+              ),
           },
           // 电子地图
           // {

+ 2 - 0
src/store/index.js

@@ -5,6 +5,7 @@ import auth from "./auth.js";
 import createPersistedState from "vuex-persistedstate";
 import settings from "./settings.js";
 import themes from "./themes.js";
+import menuTag from "./menuTag.js";
 Vue.use(Vuex);
 export const store = new Vuex.Store({
   state: {
@@ -33,6 +34,7 @@ export const store = new Vuex.Store({
     auth,
     settings,
     themes,
+    menuTag,
   },
   plugins: [
     createPersistedState({

+ 61 - 0
src/store/menuTag.js

@@ -0,0 +1,61 @@
+const state = {
+  tagList: [
+    {
+      path: "/home/cockpitManage",
+      name: "home",
+      label: "驾驶舱",
+    },
+  ], // 标签列表
+};
+
+const mutations = {
+  ADD_TAG(state, tag) {
+    if (!state.tagList.find((t) => t.name === tag.name)) {
+      state.tagList.push(tag);
+    }
+  },
+  REMOVE_TAG(state, tag) {
+    // 确保不能删除 name 为 "驾驶舱" 的标签
+    if (tag.name !== "home") {
+      state.tagList = state.tagList.filter((t) => t.name !== tag.name);
+    }
+  },
+  REMOVE_OTHER_TAGS(state, tag) {
+    // 确保不能删除 name 为 "驾驶舱" 的标签
+    state.tagList = state.tagList.filter(
+      (t) => t.name === tag.name || t.name === "home"
+    );
+  },
+  REMOVE_ALL_TAGS(state) {
+    // 确保不能删除 name 为 "驾驶舱" 的标签
+    state.tagList = state.tagList.filter((t) => t.name === "home");
+  },
+  SET_TAG_LIST(state, tags) {
+    state.tagList = tags;
+  },
+};
+
+const actions = {
+  addTag({ commit }, tag) {
+    commit("ADD_TAG", tag);
+  },
+  removeTag({ commit }, tag) {
+    commit("REMOVE_TAG", tag);
+  },
+  removeOtherTags({ commit }, tag) {
+    commit("REMOVE_OTHER_TAGS", tag);
+  },
+  removeAllTags({ commit }) {
+    commit("REMOVE_ALL_TAGS");
+  },
+  setTagList({ commit }, tags) {
+    commit("SET_TAG_LIST", tags);
+  },
+};
+
+export default {
+  namespaced: true,
+  state,
+  mutations,
+  actions,
+};

+ 15 - 1
src/styles/global.scss

@@ -48,6 +48,16 @@
   border-color: var(--primary-color) !important;
   color: var(--text-color) !important;
 }
+.el-tag {
+  &.selected-tag {
+    background-color: var(--primary-color) !important; // 选中的背景色
+    color: #fff !important; // 选中的文字颜色
+    border: 1px solid var(--primary-color) !important;
+    .el-tag__close :hover {
+      background-color: #ccc !important;
+    }
+  }
+}
 .el-tabs--border-card > .el-tabs__header .el-tabs__item.is-active {
   color: var(--primary-color) !important;
 }
@@ -92,6 +102,10 @@
 .el-select-dropdown__item.selected,
 .el-select-dropdown.is-multiple .el-select-dropdown__item.selected,
 .el-month-table td.current:not(.disabled) .cell,
-.searchFrom .setting {
+.searchFrom .setting,
+.el-tag--plain .el-tag__close {
   color: var(--primary-color) !important;
 }
+.el-tag--plain .el-tag__close:hover {
+  background-color: #ccc !important;
+}

+ 1 - 2
src/views/admin/cockpitManage/Index.vue

@@ -158,7 +158,7 @@ export default {
       if (input && typeof input === "string") {
         return input.split(",").map(Number);
       }
-      debugger;
+      // debugger;
       return [];
     },
     parentChange(data) {
@@ -237,7 +237,6 @@ export default {
 };
 </script>
 
-
 <style lang="scss" scoped>
 .map-ditu {
   // min-width: 86.9vw;

+ 3 - 1
src/views/admin/cockpitManage/component/rightdata.vue

@@ -9,7 +9,9 @@
       <div class="BOX">
         <div style="display: flex">
           <div class="YC01">
-            <strong> {{ equipment?.errCount ? equipment.errCount : 0 }}</strong>
+            <strong>
+              {{ equipment?.errCounrt ? equipment.errCounrt : 0 }}</strong
+            >
             <span>异常总数</span>
           </div>
           <div class="YC02">

+ 15 - 10
src/views/dataAdministration/index.vue

@@ -54,35 +54,35 @@
           prop="batchName"
           align="center"
           label="批次名称"
-          width="200"
+          min-width="200"
         >
         </el-table-column>
         <el-table-column
           prop="fieldName"
           align="center"
           label="风场名称"
-          width="200"
+          min-width="200"
         >
         </el-table-column>
         <el-table-column
           prop="engineCount"
           align="center"
           label="机组数量"
-          width="100"
+          min-width="100"
         >
         </el-table-column>
         <el-table-column
           prop="transferTypeName"
           align="center"
           label="类型"
-          width="200"
+          min-width="200"
         >
         </el-table-column>
         <el-table-column
           prop="transferProgress"
           align="center"
           label="进度"
-          width="200"
+          min-width="200"
         >
           <template slot-scope="scope">
             <el-progress
@@ -95,7 +95,7 @@
             <span v-else>/</span>
           </template>
         </el-table-column>
-        <el-table-column prop="" align="center" label="状态" width="100">
+        <el-table-column prop="" align="center" label="状态" min-width="100">
           <template slot-scope="scope">
             <span v-if="scope.row.transferState == -1">未转换</span>
             <span v-else-if="scope.row.transferState == 0" style="color: #f90"
@@ -112,7 +112,12 @@
             <span v-else>/</span>
           </template>
         </el-table-column>
-        <el-table-column prop="" align="center" label="异常状态" width="100">
+        <el-table-column
+          prop=""
+          align="center"
+          label="异常状态"
+          min-width="100"
+        >
           <template slot-scope="scope">
             {{ scope.row.transferState == 2 ? "异常" : "未异常" }}
           </template>
@@ -120,7 +125,7 @@
         <el-table-column
           prop="abnormal"
           label="异常信息"
-          width="100"
+          min-width="100"
           align="center"
         >
           <template slot-scope="scope">
@@ -138,7 +143,7 @@
           prop="transferFinishTime"
           align="center"
           label="转换时间"
-          width="200"
+          min-width="230"
         >
         </el-table-column>
         <el-table-column
@@ -146,7 +151,7 @@
           align="center"
           fixed="right"
           label="操作"
-          width="150"
+          min-width="150"
         >
           <template slot-scope="scope">
             <el-button

+ 6 - 1
src/views/home/Index.vue

@@ -4,6 +4,7 @@
       <Menu></Menu>
       <el-main>
         <HeaderCom @setLoding="setLoding"></HeaderCom>
+        <MenuTag></MenuTag>
         <!-- 主体内容-->
         <!-- <el-scrollbar>
           <ul>
@@ -23,11 +24,13 @@
 <script>
 import HeaderCom from "@/components/HeaderCom.vue";
 import Menu from "./components/Menu";
+import MenuTag from "@/components/MenuTag.vue";
 
 export default {
   components: {
     Menu,
     HeaderCom,
+    MenuTag,
   },
   data() {
     return {
@@ -36,7 +39,9 @@ export default {
     };
   },
   mounted() {},
-  created() {},
+  created() {
+    console.log("MenuTag");
+  },
   methods: {
     setLoding(state) {
       console.log(state);

+ 19 - 8
src/views/home/components/Menu.vue

@@ -64,6 +64,12 @@
             v-if="child.meta?.hidden === false"
             :key="child.id"
             :index="`/home/${item.path}/${child.path}?id=${child.id}`"
+            @click="
+              handleChangeMenuUrl(
+                child,
+                `/home/${item.path}/${child.path}?id=${child.id}`
+              )
+            "
           >
             <i v-if="isElPrefix(child.iconName)" class="el-icon-menu"></i>
             <i v-else class="svnIcon">
@@ -76,6 +82,7 @@
           v-else-if="item.meta?.hidden === false"
           :key="item.id"
           :index="`/home/${item.path}?id=${item.id}`"
+          @click="handleChangeMenuUrl(item, `/home/${item.path}?id=${item.id}`)"
         >
           <i v-if="isElPrefix(item.iconName)" class="el-icon-menu"></i>
           <i v-else class="svnIcon">
@@ -103,8 +110,10 @@
 </template>
 
 <script>
+import { mapActions, mapState } from "vuex";
 import { orgList } from "./mockData";
 import Vue from "vue";
+
 export default {
   data() {
     return {
@@ -140,20 +149,15 @@ export default {
     };
   },
   created() {
-    console.log(
-      this.defaultActive,
-      Vue.prototype.$backgroundColor,
-      "defaultActive"
-    );
     this.routerList = [
       ...this.routerList,
       ...this.$store.state.auth.dynamicRouter,
     ];
   },
   computed: {
-    currentMenuIndex() {
-      return this.$store.state.breadStore?.currentUrl?.routeUrl;
-    },
+    ...mapState({
+      currentMenuIndex: (state) => state.breadStore?.currentUrl?.routeUrl,
+    }),
   },
   watch: {
     currentMenuIndex: {
@@ -174,6 +178,7 @@ export default {
     },
   },
   methods: {
+    ...mapActions("menuTag", ["addTag"]),
     isElPrefix(str) {
       const regex = /^el-/;
       return regex.test(str);
@@ -222,6 +227,12 @@ export default {
       if (item) {
         item.activeIndex = true;
       }
+      const tag = {
+        path: key,
+        name: item.name,
+        label: item.name,
+      };
+      this.addTag(tag);
       this.$router.push({
         path: key,
       });

+ 1 - 1
src/views/ledger/draught.vue

@@ -681,7 +681,7 @@ export default {
     },
     // 获取风场
     windsite() {
-      debugger;
+      // debugger;
       getWindFieldNames().then((res) => {
         this.fieldCodeOptions = res.data;
         this.subordinatedata = res.data;

+ 9 - 9
src/views/performance/assetssMag.vue

@@ -36,21 +36,21 @@
           fixed
           prop="fieldName"
           label="风场名称"
-          width="200"
+          min-width="200"
         >
         </el-table-column>
         <el-table-column
           align="center"
           label="批次名称"
           prop="batchName"
-          width="200"
+          min-width="200"
         >
         </el-table-column>
         <el-table-column
           prop="loginName"
           align="center"
           label="进度"
-          width="150"
+          min-width="150"
         >
           <template slot-scope="scope">
             <el-progress
@@ -69,7 +69,7 @@
           prop="loginName"
           align="center"
           label="分析状态"
-          width="150"
+          min-width="150"
         >
           <template slot-scope="scope">
             <span v-if="scope.row.analysisState == -1">未分析</span>
@@ -97,7 +97,7 @@
           prop="errState"
           align="center"
           label="异常状态"
-          width="120"
+          min-width="120"
         >
           <template slot-scope="scope">
             <span>
@@ -115,7 +115,7 @@
           prop="roleName"
           align="center"
           label="异常信息"
-          width="120"
+          min-width="120"
         >
           <template slot-scope="scope">
             <el-button
@@ -132,7 +132,7 @@
           prop="roleName"
           align="center"
           label="分析记录"
-          width="120"
+          min-width="120"
         >
           <template slot-scope="scope">
             <el-button
@@ -149,7 +149,7 @@
           prop="createTime"
           align="center"
           label="创建时间"
-          width="200"
+          min-width="230"
         >
         </el-table-column>
         <el-table-column
@@ -157,7 +157,7 @@
           align="center"
           fixed="right"
           label="操作"
-          width="200"
+          min-width="200"
         >
           <template slot-scope="scope">
             <el-button