1

YM

2024-06-05 f3e5b489e30a921c03ef8b97e1cd845b65ea5d9d

 src/pages/character/index.vue

@@ -19,21 +19,23 @@
      热门搜索：
      <ul class="flex" style="margin-right: 10rpx">
        <li
          @click="onSearch({ text: item })"
          class="cursor"
          v-for="item in hotKeyList"
          @click="onSearch({ text: item }, index)"
          :class="{ cursor: true, active: hotAciveIndex === index }"
          hotAciveIndex
          v-for="(item, index) in hotKeyList"
          :key="item"
        >
          {{ item }}
        </li>
      </ul>
    </view>
    <view  style="margin-left: 0.2rem">书中最常提到的100位人物</view>
    <view style="margin-left: 0.2rem">书中最常提到的100位人物</view>
    <!-- 关系表地图 -->
    <view
      id="relation"
      style="margin-top: 0.2rem; flex: 1; width: 100%; position: relative"
      ><div
    >
      <div
        v-if="!loading && relationships.length == 0"
        style="
          position: absolute;
@@ -46,8 +48,8 @@
        "
      >
        暂无相关数据
      </div></view
    >
      </div>
    </view>

    <!-- 朝代 -->
    <!-- <view
@@ -105,6 +107,7 @@
  data() {
    return {
      loading: true,
      hotAciveIndex: "",
      // echarts数据
      nodes: [],
      // echarts两者的关系
@@ -282,10 +285,10 @@
  },
  mounted() {
    this.getData();
    this.echartsArr();
    // this.echartsArr();
    this.hotSearch();
    // 监听窗口大小变化
    // window.addEventListener("resize", this.relation);
    window.addEventListener("resize", this.relation);
    this.innt();
  },
  onLoad(options) {
@@ -293,6 +296,7 @@
  },
  methods: {
    getData(key) {
      this.loading = true;
      getFuzzySearch({
        keyword: key ? key : this.searchKey ? this.searchKey : ""
      }).then((res) => {
@@ -307,13 +311,13 @@
              (node) => node.id === item.identifier2 && node.name === item.name2
            );
            // 证明不存在
            if (exists1 !== true) {
            if (item.name1 && exists1 !== true) {
              this.nodes.push({
                name: item.name1,
                id: item.identifier1
              });
            }
            if (exists2 !== true) {
            if (item.name2 && exists2 !== true) {
              this.nodes.push({
                name: item.name2,
                id: item.identifier2
@@ -461,8 +465,8 @@
              }
            },
            force: {
              initLayout: null,
              // gravity: 0
              // layoutAnimation: false,
              // friction: 1,
              repulsion: 800,
              edgeLength: 400
            }
@@ -481,7 +485,13 @@
      option && myChart.setOption(option);
    },
    // 基础搜索
    onSearch(val) {
    onSearch(val, index) {
      if (index !== undefined) {
        this.searchKey = "";
        this.hotAciveIndex = index;
      } else {
        this.hotAciveIndex = "";
      }
      // this.searchKey = val.text;
      this.getData(val.text);
    },
@@ -591,6 +601,10 @@
    color: #244a7b;
    margin: 0 0.1rem;
    color: #244a7b;
    &.active{
      color: #027EDC;
      font-weight: bold;
    }
  }
}
</style>