back.vue

<template>
  <div class="setting-box">
    <div class="search-box">
      <el-col :span="4">
        <el-input v-model="searchval"></el-input>
      </el-col>
      <el-col :span="2" class="ml10">
        <el-button type="primary">查询</el-button>
      </el-col>
    </div>
    <!-- 外层内容 -->
    <div class="content-box" id="eqcontentbox">
      <div class="left-box">
         <div class="master-box">
          master
        </div>
        <div class="submast-box">
          <div
            :class="{ 'sbumast-item': true, 'top-line': true }"
            v-for="(item, index) in itemlength"
            :key="item"
            @click="getleval($event, index)"
            :style="`background:rgba(${setsubcolor(index)},.2);borderColor:rgb(${setsubcolor(index)})`"
          >
            <div :class="{ 'sub-line': index == curindex }"></div>
            {{ item }}
          </div>
        </div>
        <!-- <div class="leval-box" :style="'top:'+topheihgt+'px;'" >
          <div :class="{'sbumast-item':true,'top-line':istop,'bottom-line':!istop}"  v-for="item in levallength" :key="item" @click="getleval($event)">
            {{item}}
          </div>
        </div> -->

        <div
          v-if="istop"
          :style="`top:${topheihgt}px;left:${item * 14 + 12}vw`"
          v-for="item in 3"
          :key="item"
          class="leval-box"
        >
          <div
            :class="{
              'sbumast-item': true,
              'leval-sbumast-item': true,
              'top-line': istop,
              'bottom-line': !istop
            }"
            v-for="item in levallength"
            :key="item"
            :style="`background:${curlevalcolor};borderColor:${curlevalbordercolor}`"
          >
            {{ '192.168.9.99' }}
          </div>
        </div>
        <div
           v-if="!istop"
          :style="`bottom:${bottomHeight}px;left:${item * 14 + 12}vw`"
          v-for="item in 3"
          :key="item"
          class="leval-bottom-box"
        >
          <div
            ref="submast"
            :class="{
              'sbumast-item': true,
              'leval-sbumast-item': true,
              'top-line': istop,
              'bottom-line': !istop
            }"
            v-for="item in levallength"
            :key="item"
            :style="`background:${curlevalcolor};borderColor:${curlevalbordercolor}`"
          >
            {{ '192.168.9.99' }}
          </div>
        </div>
      </div>
      <div class="right-box">
        <span>xxxx</span>
      </div>
    </div>
    <div style="clear: both;"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      treeData: [],
      itemlength: 10,
      topheihgt: 120,
      searchval: "",
      styleheight: 0,
      istop: true,
      levallength: 5,
      curindex: -1,
      curlevalcolor: "#f0f0f0",
      curlevalbordercolor: "#f0f0f0",
      submastcolor:['48,210,255','86,183,202','237,140,36','181,184,41','104,182,69','105,199,187','71,157,248','0,105,255','116,96,238','232,84,30'],
      defaultProps: {
        children: "childs",
        label: "device_name"
      },
      bottomHeight:0,
      stylebottom:{

      },
      dev_unid: sessionStorage.getItem("dev_unid")
    };
  },
  mounted() {
    this.styleheight = 55 * 6;
    this.itemlength = 39;
    this.levallength = 6;
    Math.ceil(9 / 6);
  },
  methods: {
    getleval(ev, index) {
      var eqc = document.getElementById("eqcontentbox").clientHeight;
      console.log(ev);
      this.curindex = index;
      this.topheihgt = ev.toElement.offsetTop + 70 + 30;
      if (index === 2) {
        this.topheihgt = ev.toElement.offsetTop + 70 + 29;
      }
      if (index > 4) {
        this.istop = false;
      } else {
        this.istop = true;
      }

      this.bottomHeight = eqc - ev.toElement.offsetTop - 62;
      if (index % 3 == 0) {
        this.bottomHeight = eqc - ev.toElement.offsetTop - 61;
      }
      this.curlevalcolor = ev.toElement.style.backgroundColor;
      this.curlevalbordercolor = ev.toElement.style.borderColor;
      let a = document.querySelectorAll(".leval-sbumast-item");
    },
    setsubcolor(index) {
      let color = "";
      if (index >= 10) {
        let c = String(index);
        let i = Number(c[c.length-1]);
        color = this.submastcolor[i];
      } else {
        color = this.submastcolor[index];
      }
      return color;
    },
    getTree() {
      this.$api.resource
        .getDevsName(
          {
            is_leaf: 0
          },
          this.dev_unid
        )
        .then(res => {
          this.treeData = res.list_data;
          this.treeData.forEach(item => {
            this.getChild(item.device_id);
          });
        });
    },
    getChild(id) {
      this.$api.resource
        .getDevsName(
          {
            limit: 9999,
            offset: 0,
            parent_id: id
          },
          this.dev_unid
        )
        .then(res => {
          this.treeData.forEach(item => {
            if (item.device_id == id) {
              this.treeData.childs = res.list_data;
            }
          });
        })
        .catch(error => {});
    },
    handleNodeClick(data) {
      console.log(data);
    }
  }
};
</script>

<style scoped="scoped" lang="scss">
.setting-box {
  height: calc(100% - 58.5px);
  width: 99%;
  margin: 1.5vh auto 0;
  background: #fff;
  overflow: hidden;
  border-radius: 2px;
}
.content-box {
  display: flex;
  height: 100%;
  position: relative;
}
.search-box {
  padding: 10px;
  border-bottom: 1vh solid #f5f7f9;
  overflow: hidden;
}
.left-box {
  overflow: auto;
  width: 65vw;
  position: relative;
  height: 100%;
  margin: 0 0 12vh 0;
}
.left-box::-webkit-scrollbar {display:none}
.right-box {
  width: 10vw;
  height: 100%;
  border-left: 10px solid #f5f7f9;
}
.master-box {
  position: absolute;
  height: 40px;
  width: 140px;
  line-height: 40px;
  text-align: center;
  background: rgba(18, 62, 108, 0.2);
  border: 1px solid rgba(18, 62, 108, 1);
  border-radius: 5px;
  left: 20px;
  top: 20px;
}

.submast-box {
  position: absolute;
  left: 12vw;
  top: 70px;
  padding: 0 0 10vh 0;
}
.sbumast-item {
  position: relative;
  height: 5vh;
  width: 7vw;
  text-align: center;
  border-radius: 5px;
  margin-top: 1vh;
  border: 1px solid #333;
}
.sbumast-item::before {
  content: "";
  display: block;
  position: absolute;
  left: -5vw;
  top: 2.5vh;
  background: #123E6C;
  width: 5vw;
  height: 1px;
}
.sbumast-item::after {
  content: "";
  display: block;
  position: absolute;
  left: -5vw;
  top: 1.5vh;
  background: #123E6C;
  width: 1px;
  height: 7.3vh;
}
.top-line:first-child::after {
  height: 10vh;
  top: -2.2vh;
}
.sbumast-item:last-child::after {
  height: 0;
}
.bottom-line:last-child::after {
  height: 7.35vh;
}
.leval-box {
  position: absolute;
}
.leval-box::before{
  position: absolute;
  content: "";
  height: 1px;
  width: 16.1vw;
  left: -5vw;
  top: -1.1vh;
  background: #ED8C24;
}
.leval-box:last-child::before {
  width: 0;
}
.leval-bottom-box {
  position: absolute;
}
.leval-bottom-box::before {
  position: absolute;
  content:"";
  height: 1px;
  width: 15.1vw;
  left: -4vw;
  bottom: -3.8vh;
  background: #ED8C24;
}
.leval-bottom-box:last-child::before {
  width: 0;
}
.leval-bottom-box .sbumast-item::after {
  height: 6.4vh;
  top: 2.5vh;
  background: #ED8C24;
}
.leval-bottom-box .sbumast-item::before,
.leval-box .sbumast-item::before {
  left: -3vw;
  background: #ED8C24;
  width: 3vw;
  height: 1px;
}
.leval-bottom-box .sbumast-item::after,
.leval-box .sbumast-item::after {
  left: -3vw;
  background: #ED8C24;
}
.sub-line {
  position: absolute;
  height: 1px;
  width: 3vw;
  right: -3vw;
  background: #ED8C24;
  top: 20px;
}
.leval-top-line {
  position: absolute;
  height: 1px;
  top: -1.1vh;
  width: 14vw;
  left: -19vw;
  background: #ED8C24;
}
</style>