|
|
@@ -0,0 +1,244 @@
|
|
|
+<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>
|
zengyicheng