20251113炳辰版本

src/components/Home.vue

@@ -0,0 +1,158 @@
+<template>
+  <el-container>
+    <el-header>
+      <el-row class="container">
+        <el-col class="topbar-wrap">
+          <div class="topbar-logo topbar-btn">
+            <a href>
+              <img
+                src="../assets/icon/logo.png"
+                style="padding: 10px 23px 0px 20px; height: 25px; width: 20px"
+              />
+            </a>
+          </div>
+          <div class="topbar-logos">
+            <a
+              href
+              style="
+                font-family: PingFangSC-Regular;
+                font-size: 18px;
+                line-height: 70px;
+                color: #264672;
+                margin-left: 10px;
+              "
+              >{{ myname }}</a
+            >
+          </div>
+          <div class="topbar-title">
+            <el-menu
+              :default-active="$route.path"
+              class="el-menu"
+              mode="horizontal"
+              background-color="#F7F8F1"
+              router
+            >
+              <template v-for="item in menu">
+                <el-submenu
+                  v-if="item.children"
+                  :index="item.index"
+                  :key="item.index"
+                >
+                  <template slot="title">{{ item.name }}</template>
+                  <el-menu-item
+                    v-for="submenu in item.children"
+                    :index="submenu.index"
+                    :key="submenu.index"
+                    style="width: 100%"
+                    >{{ submenu.name }}</el-menu-item
+                  >
+                </el-submenu>
+                <el-menu-item v-else :index="item.index" :key="item.index">{{
+                  item.name
+                }}</el-menu-item>
+              </template>
+            </el-menu>
+          </div>
+        </el-col>
+      </el-row>
+    </el-header>
+    <el-main>
+      <div class="content">
+        <router-view />
+      </div>
+    </el-main>
+  </el-container>
+</template>
+
+<script>
+import "element-ui/lib/theme-chalk/display.css";
+import "../assets/css/main.css";
+
+export default {
+  name: "Home",
+  data() {
+    return {
+      menu: [],
+      myname: myname,
+    };
+  },
+  mounted() {
+    if (sessionStorage.getItem("access-user") == "Leader") {
+      this.menu = [
+        { index: "/view", name: "工作监管" },
+        { index: "/statistic", name: "汇总统计" },
+        { index: "/analysis", name: "分析决策" },
+        { index: "/data", name: "数据管理" },
+        { index: "/login", name: "退出" },
+      ];
+    } else if (
+      sessionStorage.getItem("access-user") == "Admin" ||
+      sessionStorage.getItem("access-user") == "SuperAdmin"
+    ) {
+      this.menu = [
+        { index: "/view", name: "工作监管" },
+        { index: "/statistic", name: "汇总统计" },
+        { index: "/analysis", name: "分析决策" },
+        { index: "/data", name: "数据管理" },
+        { index: "/main", name: "任务管理" },
+        { index: "/login", name: "退出" },
+      ];
+    } else if (sessionStorage.getItem("access-user") == "Operator") {
+      this.menu = [
+        { index: "/main", name: "任务管理" },
+        { index: "/login", name: "退出" },
+      ];
+    }
+  },
+};
+</script>
+
+<style scoped>
+.header ul {
+  z-index: 1;
+  list-style-type: none;
+  overflow: hidden;
+  background-color: #333;
+}
+
+.header ul li {
+  float: right;
+}
+
+.el-header {
+  padding: 0;
+  z-index: 99;
+}
+
+.topbar-title .el-menu--horizontal > .el-menu-item {
+  height: 50px;
+  line-height: 70px;
+  width: 114px;
+  text-align: center;
+  font-family: PingFangSC-Regular;
+  font-size: 16px;
+  color: #264672;
+  letter-spacing: 0;
+}
+.el-menu--horizontal > .el-menu-item.is-active {
+  color: #3a87f9 !important;
+  font-family: PingFangSC-Semibold;
+  font-size: 16px;
+  letter-spacing: 0;
+  border-bottom: 3px solid #409eff !important;
+}
+.el-menu--horizontal .el-menu-item:not(.is-disabled):focus,
+.el-menu--horizontal .el-menu-item:not(.is-disabled):hover {
+  outline: 0;
+  background: #f7f8f1 !important;
+}
+
+.el-main {
+  padding: 0;
+  height: 100%;
+}
+
+.content {
+  height: 100%;
+}
+</style>