数据中心添加周三开发 周四演示

src/layout/components/NewMenu/index.vue

@@ -134,6 +134,12 @@ export default {
           icon: "el-icon-data-line",
           show: false,
         },
+        {
+          title: "业务中心",
+          path: "/businessCenter",
+          icon: "el-icon-postcard",
+          show: false,
+        },
       ],
     };
   },

src/router/index.js

@@ -140,6 +140,15 @@ export const constantRoutes = [{
       title: "集成任务",
       icon: "dashboard",
     },
+  },
+    {
+    path: "businessCenter",
+    component: () => import("@/views/newVersionView/businessCenter/index"),
+    name: "businessCenter",
+    meta: {
+      title: "业务中心",
+      icon: "dashboard",
+    },
   },
   ]
 },

src/views/newVersionView/businessCenter/index.vue

@@ -0,0 +1,172 @@
+/**
+  desc 应用管理
+ */
+<template>
+  <div class="workbench">
+    <h3 class="workbench-title">全部应用</h3>
+    <el-tabs>
+      <el-tab-pane
+        v-for="(item, index) in routeData"
+        :key="index"
+        :label="item.meta ? item.meta.title : ''"
+        v-if="item.meta"
+      >
+        <div class="menuContainer">
+          <div
+            v-for="(list, listIndex) in item.children"
+            class="menuBox"
+            @click="goRoute(item, list)"
+            v-if="!list.meta.hidden"
+          >
+            <img class="menuIcon" :src="list.meta.icon" v-if="list.meta.icon" />
+            <img class="menuIcon" src="../logo1.png" v-else />
+            <p class="menuContent">{{ list.meta.title }}</p>
+          </div>
+        </div>
+      </el-tab-pane>
+    </el-tabs>
+  </div>
+</template>
+
+<script>
+import { TagsView } from "@/layout/components";
+import request from "@/utils/request";
+
+export default {
+  name: "ApplicationCenter",
+  components: {
+    TagsView,
+  },
+  created() {
+    this.$store.dispatch("settings/changeSetting", {
+      key: "showTagsView",
+      value: true,
+    });
+  },
+  data() {
+    return {
+      routeData: [], //菜单数据
+    };
+  },
+  mounted() {
+    let routeList = localStorage.getItem("routeList")
+      ? JSON.parse(localStorage.getItem("routeList"))
+      : [];
+    this.routeData = this.OrganizeMenus(routeList);
+  },
+  methods: {
+    goRoute(val, item) {
+      let routeData = this.$router.resolve({
+        path: item.path,
+        name: item.name,
+        query: { mdmCode: item.meta.mdmCode, viewType: item.meta.viewType },
+      });
+      window.open(routeData.href, "_self");
+    },
+    // 处理icon
+    handlerIcon(item) {
+      let str = "";
+      if (item.includes("?")) {
+        str = item.split("?")[1];
+      } else {
+        str = item;
+      }
+      return str;
+    },
+    handlerIconColor(item) {
+      let color = "";
+      if (item.includes("?")) {
+        color = item.split("?")[0];
+      } else {
+        color = "#1478F6";
+      }
+      return color;
+    },
+    // 整理菜单数据
+    OrganizeMenus(data) {
+      let arrData = [];
+      // 业务中心
+      let arrID = ["67f82a6e7f664c5a89b7fc7b8fc817b0"];
+      arrID.forEach((a) => {
+        data.forEach((b) => {
+          if (a === b.id) {
+            arrData.push(b);
+          }
+        });
+      });
+      arrData.forEach((bItem) => {
+        if (bItem.children && bItem.children.length > 0) {
+          bItem.children.forEach((cItem) => {
+            if (cItem.meta.icon) {
+              this.getLogoUrl(cItem.meta.icon).then((res) => {
+                let imageUrl =
+                  "data:image/png/jpg;base64," +
+                  btoa(
+                    new Uint8Array(res).reduce(
+                      (el, byte) => el + String.fromCharCode(byte),
+                      ""
+                    )
+                  );
+                this.$set(cItem.meta, "icon", imageUrl);
+              });
+            }
+          });
+        }
+      });
+      return arrData;
+    },
+    getLogoUrl(id) {
+      return request({
+        url:
+          "/kangarooDataCenterV3/entranceController/fileDownloadNew?id=" + id,
+        method: "get",
+        responseType: "arraybuffer",
+      }).then((res) => {
+        return res;
+      });
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.workbench {
+  background: #fff;
+  padding: 15px;
+  //margin: 0 10px;
+}
+
+.workbench-title {
+  margin: 15px 0;
+}
+
+.menuContainer {
+  display: flex;
+  flex-wrap: wrap;
+  background-color: #fff;
+}
+
+.menuBox {
+  display: flex;
+  align-items: center;
+  background: #fafafa;
+  padding: 10px 15px;
+  border-radius: 10px;
+  width: 200px;
+  margin: 10px;
+  cursor: pointer;
+}
+
+.menuIcon {
+  width: 36px;
+  height: 36px;
+  line-height: 36px;
+  border-radius: 12px;
+  margin-right: 10px;
+}
+
+.menuContent {
+  font-size: 14px;
+  color: #333333;
+}
+</style>