dsj-front/src/views/siteAdministration/children/siteAdministrationItem.vue

<template>
  <!-- 一期 -->
  <div class="siteAdministrationItem">
    <div class="top">
      <div class="back" />
    </div>
    <div class="content">
      <div class="nav">
        <el-menu
          default-active="2"
          class="el-menu-vertical-demo"
          @open="handleOpen"
          @close="handleClose"
        >
          <el-submenu v-for="menu in menus" :key="menu.title" :index="menu.KEY">
            <template slot="title">
              <span>{{ menu.title }}</span>
            </template>
            <el-menu-item-group>
              <el-menu-item
                v-for="item in menu.item"
                :key="item.name"
                @click="clickSite(item)"
                >{{ item.meta.title }}</el-menu-item
              >
            </el-menu-item-group>
            <!-- <p @click="$router.push({name:'dataInputCom'})">测试</p> -->
          </el-submenu>
        </el-menu>
      </div>
      <div class="item">
        <p>{{ $route.meta.title }}</p>
        <div class="item-main">
          <router-view />
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { SITE_MENUS_TYPE } from "@/router/business.router";
import cloneDeep from "lodash/cloneDeep";
import { tree } from "@/api/user";
export default {
  data() {
    return {
      titleText: "",
      isACtive: 0,
      treeList: [],
    };
  },
  computed: {
    menus: function () {
      const router = this.$store.state.app.menuList[0].children.filter(
        (item) => item.name === "siteAdministrationItem"
      );
      const SITE_TYPES = cloneDeep(SITE_MENUS_TYPE);
      console.log(router, "111");
      console.log(SITE_TYPES, "222");
      if (!router.length) {
        return [];
      }

      router.forEach((item) => {
        (item.children || []).forEach((child) => {
          const temp = SITE_TYPES[child.meta.type];
          temp && temp.item && temp.item.push(child);
        });
      });
      const result = [];
      Object.keys(SITE_TYPES).forEach(
        (key) => SITE_TYPES[key].item.length && result.push(SITE_TYPES[key])
      );
      console.log(result);
      result[1].item[0].meta.title = "实时数据";

      return result;
    },
  },
  methods: {
    addTitle() {},
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
    async clickSite(item) {
      console.log(item, "111");
      if (item.name == "site") {
        await tree().then((res) => {
          if (res.code === 0) {
            this.treeList = res.data;
          }
        });
        const node = this.getFirstNodeByType("111", this.treeList[0]);
        this.$router.push({
          name: "transformerList",
          params: { siteId: node.siteId, id: node.id, nodeType: "111" },
        });
      } else {
        this.$router.push({ name: item.name });
      }
    },
    getFirstNodeByType(nodeType, item) {
      if (!item) {
        return null;
      }
      if (item.type === nodeType) {
        return item;
      }
      if (!item.children || item.children.length === 0) {
        return item;
      }
      let index = nodeType.substring(0, 1) - 1;
      index = item.type === "0" ? nodeType.substring(0, 1) - 1 : 0;
      return this.getFirstNodeByType(nodeType, item.children[index]);
    },
  },
};
</script>
<style lang="scss" scoped>
@import "../../../assets/stylesheet/index";
.siteAdministrationItem {
  width: 100%;
  height: 90%;
  padding: vw(123) vw(126) vw(60) vw(126);
  position: relative;
  .top {
    width: 100%;
    position: absolute;
    left: 0;
    top: 0;
    .back {
      width: vw(400);
      height: vw(86);
      margin: 0 auto;
      // background-image: url('../../../assets/image/bigNumber/back.png');
    }
  }
  .content {
    width: 100%;
    height: 100%;
    display: flex;
    .nav {
      width: vw(418);
    }
    .item {
      // flex: 1;
      margin-left: vw(60);
      position: relative;
      padding: vw(70) 0 0 0;
      width: calc(100% - 440px);
      // width: restVw(478);
      height: 100%;
      > p {
        background: #075cc5;
        font-size: vw(34);
        color: #fff;
        display: inline-block;
        height: vw(70);
        line-height: vw(70);
        padding: 0 vw(50);
        border-radius: 0 vw(20) 0 0;
        position: absolute;
        left: 0;
        top: 0;
      }
      .item-main {
        width: 100%;
        height: 100%;
        background: #fff;
        overflow-y: auto;
      }
    }
  }
}
</style>