pbl-teacher-table/src/components/tools/seeBoard.vue

<template>
  <div class="data_body">
    <div class="noMind" v-if="mindV">
      <img src="../../assets/nominddata.png" alt />
    </div>
    <!-- <img src="../../assets/dataimage/1.png" style="width:90%" /> -->
    <div class="b_box">
      <div class="b_box_table">
        <div class="bbt_title">{{ ename }}</div>
        <div class="bbt_content">
          <div v-for="(item, index) in ooption" :key="index" class="bbt_c1">
            <div
              class="bbt_c1_div"
              :class="{ bbn: index == ooption.length - 1 }"
            >
              {{ item.name }}
            </div>
            <div class="bbt_c2">
              <div
                v-for="(item2, index2) in item.children"
                :key="index + '-' + index2"
                class="bbt_c1"
              >
                <div
                  class="bbt_c2_div"
                  :class="{
                    bbn:
                      index2 == item.children.length - 1 &&
                      index == ooption.length - 1,
                  }"
                >
                  {{ item2.name }}
                </div>
                <div class="bbt_c3">
                  <div
                    v-for="(item3, index3) in item2.children"
                    :key="index + '-' + index2 + '-' + index3"
                    :class="{
                      bbn:
                        index2 == item.children.length - 1 &&
                        index == ooption.length - 1 &&
                        index3 == item2.children.length - 1,
                    }"
                  >
                    {{ item3.name }}
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: ["Josn", "num", "ename"],
  data() {
    return {
      mindV: true,
      ooption: [],
    };
  },
  methods: {
    setData() {
      if (!Object.keys(this.Josn).length) {
        this.mindV = true;
      } else {
        this.mindV = false;
      }
      var res = this.Josn;
      var _array = [];
      let i = 0;
      for (var item in res) {
        let num = Object.keys(res);
        let count = 10 / num.length;
        let _item = res[item];
        _array.push({ name: _item.name, value: count, children: [] });
        let j = 0;
        for (var item2 in _item.child) {
          let num2 = Object.keys(res);
          let count2 = count / num2.length;
          let _item2 = _item.child[item2];
          _array[i].children.push({
            name: _item2.name,
            value: count2,
            children: [],
          });
          for (var item3 in _item2.child) {
            let num3 = Object.keys(res);
            let count3 = count2 / num3.length;
            let _item3 = _item2.child[item3];
            _array[i].children[j].children.push({
              name: _item3.name,
              value: count3,
            });
          }
          j++;
        }
        i++;
        console.log(item);
      }
      this.ooption = _array;
    },
  },
  watch: {
    num: {
      handler: function (newVal, oldVal) {
        this.setData();
      },
      deep: true,
    },
    Josn: {
      handler: function (newVal, oldVal) {},
      deep: true,
    },
  },
  mounted() {
    this.setData();
  },
};
</script>

<style scoped>
.data_body {
  /* display: flex; */
  /* flex-direction: column; */
  width: 500px;
  height: 450px;
  /* height: 500px; */
  /* margin: 15px 5px 0 0; */
  background: #fff;
  overflow: hidden;
  flex-shrink: 0;
  position: relative;
}
.noMind {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  z-index: 999;
  background: #fff;
}

.b_box {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  overflow: auto;
}

.b_box_table {
  border: 2px solid #000;
  height: fit-content;
  width: auto;
  margin: 20px 0;
}

.bbt_content {
}

.bbt_title {
  height: 50px;
  width: 330px;
  border-bottom: 2px solid #000;
  text-align: center;
  line-height: 50px;
  font-size: 18px;
  background: rgb(57, 76, 165);
  color: #fff;
}
.bbt_c1 {
  display: flex;
  width: 100%;
}
.bbt_c1_div {
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 2px solid #000;
  max-width: 110px;
  width: 110px;
  min-height: 50px;
  font-size: 16px;
  background: rgb(171, 179, 214);
  color: #000;
  box-sizing: border-box;
  padding: 5px 10px;
}
.bbt_c2 {
  display: flex;
  flex-direction: column;
  max-width: 220px;
  width: 220px;
  border-left: 2px solid #000;
  box-sizing: border-box;
}
.bbt_c2_div {
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 110px;
  width: 110px;
  border-bottom: 2px solid #000;
  min-height: 50px;
  background: rgb(189, 194, 226);
  color: #000;
  box-sizing: border-box;
  padding: 5px 10px;
}
.bbt_c3 {
  display: flex;
  flex-direction: column;
  max-width: 110px;
  width: 110px;
  border-left: 2px solid #000;
}
.bbt_c3 > div {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 50px;
  width: 100%;
  height: 100%;
  background: rgb(214, 216, 234);
  color: #000;
  border-bottom: 2px solid #000;
  box-sizing: border-box;
  padding: 5px 10px;
}
.bl {
  border-left: 2px solid #000;
}

.bbn {
  border-bottom: none !important;
}
</style>