学生目录tag切换bug修改

zhongshujie

2025-04-08 92cd3be8a166e9d7c67f88518111670be8b9ec98

 src/views/directory/index.vue

@@ -15,66 +15,9 @@
    </div>
    <!-- 图表显示 -->
    <div class="charts-main" v-if="activeTabs == 'chart'">
      <!-- <div class="pageBox">
        <div class="main" v-loading="loading" element-loading-text="加载中..."
          element-loading-background="rgba(255,255,255,.5)">
          <div class="main-content">
            <div class="detailBox">
              <div class="legendBox">
                <div class="legendItem">
                  <div class="lengend-color"></div>
                  <div class="lengend-text">生</div>
                </div>
                <div class="legendItem">
                  <div class="lengend-color"></div>
                  <div class="lengend-text">旦</div>
                </div>
                <div class="legendItem">
                  <div class="lengend-color"></div>
                  <div class="lengend-text">净</div>
                </div>
                <div class="legendItem">
                  <div class="lengend-color"></div>
                  <div class="lengend-text">末</div>
                </div>
                <div class="legendItem">
                  <div class="lengend-color"></div>
                  <div class="lengend-text">丑</div>
                </div>
                <div class="legendItem">
                  <div class="lengend-color"></div>
                  <div class="lengend-text">未知</div>
                </div>
              </div>
              <div class="echartsBox">
                <div class="clickBox" id="clickBox">
                  <div class="clickBoxContent">
                    <div class="imgBox" style="width: 300px; height: 150px">
                      <img :src="detailData.img" />
                    </div>
                    <div class="title">{{ detailData.title }}</div>
                    <div class="subTitle">{{ detailData.subTitle }}</div>
                    <div class="desc">{{ detailData.desc }}</div>
                    <div class="btnBox">
                      <div @click="gotoDetail()" class="detailBtn">了解更多</div>
                      <img class="closeBtn" @click.stop="closeDetail()"
                        src="@/assets/images/chronology/icon_close.svg" />
                    </div>
                  </div>
                </div>
                <div class="echarts" style="width: 100%; height: 100%"></div>
              </div>
              <div class="toponymBox">
                <div class="imgBox" style="width: 280px; height: 280px">
                  <img :src="toponymData.img" />
                </div>
                <div class="">戏院：{{ toponymData.toponymName || "-" }}</div>
                <div class="">农历：{{ toponymData.chineseTime || "-" }}</div>
              </div>
            </div>
          </div>
        </div>
      </div> -->
      <div class="radial-tree-container">
        <div ref="chart" style="width: 100%; height: 600px"></div>
      </div>
    </div>
    <!-- 列表显示 -->
    <div class="page-main" v-if="activeTabs == 'list'">
@@ -90,12 +33,8 @@
        </div>
        <table cellpadding="100" v-if="item.studentList && item.studentList.length > 0 && item.isShow">
          <tr class="table-heading">
            <th>
              姓名
            </th>
            <th>
              性别
            </th>
            <th>姓名</th>
            <th>性别</th>
            <th>学习时间</th>
            <th>工作单位（到二级单位全称）</th>
            <th>职务</th>
@@ -120,7 +59,8 @@
</template>

<script>
import echarts from "@/assets/js/echarts.min.js";
import * as echarts from "echarts";
import axios from "axios";
export default {
  data() {
    return {
@@ -161,7 +101,7 @@
              position: "原院长",
              title: "主任医师、教授",
            },
          ]
          ],
        },
        {
          name: "北京中医药大学",
@@ -192,7 +132,7 @@
              position: "原院长",
              title: "主任医师、教授",
            },
          ]
          ],
        },
        {
          name: "北京中医药大学",
@@ -223,14 +163,13 @@
              position: "原院长",
              title: "主任医师、教授",
            },
          ]
          ],
        },
        {
          name: "北京中医药大学",
          degree: "硕士",
          isShow: "true",
          studentList: [
          ]
          studentList: [],
        },
        {
          name: "北京中医药大学",
@@ -261,14 +200,13 @@
              position: "原院长",
              title: "主任医师、教授",
            },
          ]
          ],
        },
        {
          name: "北京中医药大学",
          degree: "硕士",
          isShow: "true",
          studentList: [
          ]
          studentList: [],
        },
        {
          name: "北京中医药大学",
@@ -299,23 +237,159 @@
              position: "原院长",
              title: "主任医师、教授",
            },
          ]
          ],
        },
      ]
    }
      ],
      chart: null,
      chartData: {
        name: "Root",
        children: [
          {
            name: "Node 1",
            children: [
              { name: "Leaf 1-1" },
              { name: "Leaf 1-2" },
              { name: "Leaf 1-3" },
            ],
          },
          {
            name: "Node 2",
            children: [
              {
                name: "Node 2-1",
                children: [{ name: "Leaf 2-1-1" }, { name: "Leaf 2-1-2" }],
              },
              { name: "Leaf 2-2" },
            ],
          },
          {
            name: "Node 3",
            children: [{ name: "Leaf 3-1" }, { name: "Leaf 3-2" }],
          },
        ],
      },
    };
  },

  mounted() {
    this.initChart();
    window.addEventListener("resize", this.handleResize);
  },
  beforeDestroy() {
    window.removeEventListener("resize", this.handleResize);
    if (this.chart) {
      this.chart.dispose();
    }
  },
  methods: {
    changeTab(key) {
      this.activeTabs = key
      this.activeTabs = key;
      console.log(this.activeTabs, "activeTabs");
      // if (key == "chart") {
      if (key == "chart") {
        this.$nextTick(() => {
          this.initChart();
          window.addEventListener("resize", this.handleResize);
        });
      }
    },
    initChart() {
      this.chart = echarts.init(this.$refs.chart);
      const option = {
        tooltip: {
          trigger: "item",
          triggerOn: "mousemove",
          formatter: (params) => {
            const data = params.data;
            return `
              <div style="
                padding: 10px;
                background: #fff;
                border-radius: 5px;
                box-shadow: 0 2px 10px rgba(0,0,0,0.1);
                max-width: 300px;
              ">
                <div style="
                  border-bottom: 1px solid #eee;
                  padding-bottom: 5px;
                  margin-bottom: 5px;
                ">
                  <span style="
                    font-size: 16px;
                    color: #333;
                    font-weight: bold;
                  ">${data.name}</span>
                  ${data.customInfo
                ? `<span style="
                    background: #ffeb3b;
                    padding: 2px 5px;
                    border-radius: 3px;
                    margin-left: 8px;
                    font-size: 12px;
                  ">${data.customInfo}</span>`
                : ""
              }
                </div>
                <div style="margin-top: 8px;">
                  <div>节点值: <span style="color: #4f8ff7;">${data.value || 0
              }</span></div>
                  <div>描述: ${data.description || "暂无描述"}</div>
        
                </div>
              </div>
            `;
          },
        },
        series: [
          {
            type: "tree",
            data: [this.chartData],
            layout: "radial",
            symbol: "emptyCircle",
            symbolSize: 7,
            initialTreeDepth: -1, // 展开所有节点
            animationDurationUpdate: 750,
            emphasis: {
              focus: "descendant",
            },
            label: {
              position: "left",
              verticalAlign: "middle",
              align: "right",
              fontSize: 12,
              rotate: 0,
            },
            leaves: {
              label: {
                position: "right",
                verticalAlign: "middle",
                align: "left",
              },
            },
            expandAndCollapse: true,
            lineStyle: {
              color: "#ccc",
              width: 1,
            },
            itemStyle: {
              color: "#4f8ff7",
              borderColor: "#4f8ff7",
            },
            roam: true,
            center: ["10%", "15%"], // 微调垂直居中
            radius: "60%", // 增大半径占比
            nodePadding: 20,
          },
        ],
      };

      // } else if (key == 'list') {

      // }
    }
  }
      this.chart.setOption(option);
    },
    handleResize() {
      if (this.chart) {
        this.chart.resize();
      }
    },
  },
};
</script>

@@ -350,13 +424,13 @@
  justify-content: center;
  cursor: pointer;
  margin-bottom: 75px;
  color: #9E9E9E;
  color: #9e9e9e;

  p {
    display: flex;
    align-items: center;
    padding: 15.5px 20px;
    border-bottom: 2px solid #9E9E9E;
    border-bottom: 2px solid #9e9e9e;
  }

  img {
@@ -376,8 +450,6 @@
  color: #937950 !important;
  border-bottom: 2px solid #937950 !important;
}



.page-main {
  width: 1313px;
@@ -416,15 +488,18 @@
  }
}

.charts-main {
  // background-color: #000;
}

.table-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 28px;
  background-color: #D8CBB6;
  background-color: #d8cbb6;
  margin-bottom: 4px;
  margin-top: 2px;


  .table-title-left {
    display: flex;
@@ -452,7 +527,6 @@
    font-weight: bold;
  }


  .table-title-right {
    cursor: pointer;
  }
@@ -461,6 +535,5 @@
    width: 20px;
    height: auto;
  }

}
</style>