1

YM

2024-07-12 0326804dd7bf985d1912abbab10dec84923acef6

 src/pages/character/index.vue

@@ -1,14 +1,17 @@
<template>
  <view>
  <view
    style="width: 100%; height: 100%; display: flex; flex-direction: column"
  >
    <headNav idIndex="1" text="中医人物数据库" />
    <!-- 高级搜索 -->
    <view style="margin: 0.35rem 0 0.16rem 0">
    <view style="margin-top: 0.1rem">
      <advancedSearch
        @onSearch="onSearch"
        @onSubmit="onSubmit"
        :from="From"
        placehold="请输入关键字"
        :keyword="searchKey"
        :advancedSearchBack="advancedSearchBack"
      />
    </view>
    <!-- 热门搜索 -->
@@ -16,23 +19,39 @@
      热门搜索：
      <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 }"
          v-for="(item, index) in hotKeyList"
          :key="item"
        >
          {{ item }}
        </li>
      </ul>
    </view>
    <view class="" style="margin-left: 0.2rem">书中最常提到的100位人物</view>
    <view style="margin-left: 0.2rem">书中最常提到的100位人物</view>
    <!-- 关系表地图 -->
    <view
      id="relation"
      style="margin-top: 0.2rem; height: 70vh; width: 100%"
    ></view>
      style="margin-top: 0.1rem; flex: 1; width: 100%; position: relative"
    >
      <div
        v-if="!loading && relationships.length == 0"
        style="
          position: absolute;
          top: 30%;
          left: 0;
          right: 0;
          text-align: center;
          font-size: 0.2rem;
          color: #666;
        "
      >
        暂无相关数据
      </div>
    </view>

    <!-- 朝代 -->
    <view
    <!-- <view
      class="flex flex-center"
      style="width: 100%; position: fixed; bottom: 0.33rem; left: 0"
    >
@@ -69,7 +88,7 @@
          </view>
        </li>
      </ul>
    </view>
    </view> -->
  </view>
</template>

@@ -86,6 +105,8 @@
export default {
  data() {
    return {
      loading: true,
      hotAciveIndex: "",
      // echarts数据
      nodes: [],
      // echarts两者的关系
@@ -151,7 +172,7 @@
          },
          {
            type: "input",
            label: "时间",
            label: "时期",
            name: "period",
            value: ""
          },
@@ -263,30 +284,54 @@
  },
  mounted() {
    this.getData();
    this.echartsArr();
    // this.echartsArr();
    this.hotSearch();
    // 监听窗口大小变化
    // window.addEventListener("resize", this.relation);
    window.addEventListener("resize", this.relation);
    this.innt();
  },
  onLoad(options) {
    this.searchKey = options.keyword;
  },
  methods: {
    getData() {
      getPersonList({
        keywords: "楊", //搜索框检索
        name: "", //姓名
        alias: "", //别名
        nativePlace: "", //机关
        tagId: null, //职业id
        official: "", //职官
        genderType: null, //性别
        dynasty: null, //朝代名
        dynastyId: null, //朝代id
        institution: "", //机构
        bookId: null, //来源id
        page: 1,
        pageSize: 100
    getData(key) {
      this.loading = true;
      getFuzzySearch({
        keyword: key ? key : this.searchKey ? this.searchKey : ""
      }).then((res) => {
        console.log(res);
        this.nodes = [];
        this.relationships = [];
        if (res.success && res.list) {
          res.list.forEach((item, index) => {
            let exists1 = this.nodes.some(
              (node) => node.id === item.identifier1 && node.name === item.name1
            );
            let exists2 = this.nodes.some(
              (node) => node.id === item.identifier2 && node.name === item.name2
            );
            // 证明不存在
            if (item.name1 && exists1 !== true) {
              this.nodes.push({
                name: item.name1,
                id: item.identifier1
              });
            }
            if (item.name2 && exists2 !== true) {
              this.nodes.push({
                name: item.name2,
                id: item.identifier2
              });
            }
            let obj = {
              source: item.name1,
              target: item.name2,
              relation: item.relationName || "" // 如果存在 relationName 字段则使用，否则为空字符串
            };
            this.relationships.push(obj);
          });
        }
        this.loading = false;
        this.relation();
      });
    },
    // 关系图谱
@@ -303,17 +348,17 @@
      let Distance = 10;
      // 不同尺寸下修改echarts的字体
      if (window.innerWidth > 2560 && window.innerWidth <= 3840) {
        FontSize = 28;
        FontSize = 20;
        BorderWidth = 5;
        SymbolSize = 100;
        SymbolSize = 90;
        Distance = 33;
      } else if (window.innerWidth > 1920 && window.innerWidth <= 2560) {
        FontSize = 28;
        FontSize = 18;
        BorderWidth = 4;
        SymbolSize = 90;
        SymbolSize = 80;
        Distance = 22;
      } else if (window.innerWidth >= 1366 && window.innerWidth <= 1920) {
        FontSize = 18;
        FontSize = 14;
        BorderWidth = 4;
        SymbolSize = 70;
        Distance = 22;
@@ -347,10 +392,8 @@
                padding: [3, 8],
                borderRadius: 30,
                position: "middle", // 设置标签文本在线的中间位置上居中显示
                // bottom: -(FontSize+10),
                z: 10, // 设置标签的z轴高度，使其比连接线更高
                // offset: [0, 15] ,// 往下移动 10 像素
                distance: -(Distance + 1) // 将标签放置在连接线上
                // z: -1, // 设置标签的z轴高度，使其比连接线更高
                distance: -10 // 将标签放置在连接线上
              }
            });
          }
@@ -361,31 +404,14 @@
        return {
          name: node.name,
          id: node.id,
          x: Math.random() * 2000, // 设置随机x坐标位置
          y: Math.random() * 600, // 设置随机y坐标位置
          itemStyle: {
            color: getColorByIndex(), // 可以根据索引设置不同的颜色
            color: "#eae0eb", // 可以根据索引设置不同的颜色
            borderWidth: BorderWidth,
            borderColor: getColorByIndex()
            borderColor: "#996f9f"
          }
        };
      });
      // 设置颜色
      function getColorByIndex() {
        // 生成随机的 R、G、B 分量值，限制在更高的范围内
        var r = Math.floor(Math.random() * 106) + 150; // 150 到 255 之间的随机数
        var g = Math.floor(Math.random() * 106) + 150; // 150 到 255 之间的随机数
        var b = Math.floor(Math.random() * 106) + 150; // 150 到 255 之间的随机数
        // 将 R、G、B 分量值转换为十六进制，并确保每个分量值都是两位数
        var hexR = r.toString(16).padStart(2, "0"); // 使用 padStart 方法确保生成的十六进制数为两位
        var hexG = g.toString(16).padStart(2, "0");
        var hexB = b.toString(16).padStart(2, "0");
        // 拼接十六进制颜色值
        var color = "#" + hexR + hexG + hexB;
        return color;
      }
      console.log(links);
      console.log(nodeData);

      var option;
      option = {
        title: {
@@ -414,7 +440,7 @@
        series: [
          {
            type: "graph",
            layout: "none",
            layout: "force",
            roam: true,
            symbolSize: SymbolSize, // 调整节点大小
            label: {
@@ -422,7 +448,7 @@
              color: "black", // 设置节点文字颜色为黑色
              fontSize: FontSize // 设置文字大小
            },
            edgeSymbol: ["circle"],
            edgeSymbol: ["circle", "arrow"],
            edgeSymbolSize: [4, 10],
            data: nodeData,
            links: links,
@@ -430,6 +456,18 @@
              opacity: 0.9,
              width: 2,
              curveness: 0.3
            },
            emphasis: {
              focus: "adjacency",
              lineStyle: {
                width: 10
              }
            },
            force: {
              // layoutAnimation: false,
              // friction: 1,
              repulsion: 800,
              edgeLength: 400
            }
          }
        ]
@@ -437,56 +475,38 @@
      // 将生成的连接线添加到echarts图表的option中
      option.series[0].links = links;
      // 设置点击事件监听
      myChart.off("click");
      myChart.on("click", (params) => {
        // menuNav2 = !menuNav1
        if (params.componentType === "series") {
        if (params.dataType === "node") {
          this.spaceTimeArr(params.data.id);
        }
      });
      option && myChart.setOption(option);
    },
    // 基础搜索
    onSearch(val) {
      this.searchKey = val.text;
      getFuzzySearch({ keyword: val.text }).then((res) => {
        if (res.list) {
          this.nodes = [];
          this.relationships = [];
          res.list.forEach((item, index) => {
            let exists1 = this.nodes.some(
              (node) => node.id === item.identifier1 && node.name === item.name1
            );
            let exists2 = this.nodes.some(
              (node) => node.id === item.identifier2 && node.name === item.name2
            );
            // 证明不存在
            if (exists1 !== true) {
              this.nodes.push({
                name: item.name1,
                id: item.identifier1
              });
            }
            if (exists2 !== true) {
              this.nodes.push({
                name: item.name2,
                id: item.identifier2
              });
            }
            let obj = {
              source: item.name1,
              target: item.name2,
              relation: item.relationName || "" // 如果存在 relationName 字段则使用，否则为空字符串
            };
            this.relationships.push(obj);
          });
        }
        this.relation();
      });
    onSearch(val, index) {
      if (index !== undefined) {
        this.searchKey = "";
        this.hotAciveIndex = index;
      } else {
        this.hotAciveIndex = "";
      }
      // this.searchKey = val.text;
      this.getData(val.text);
    },
    // 高级搜索
    onSubmit(val) {
      getAdvanceSearch(val).then((res) => {
        console.log(res, "接口调用成功");
      getAdvanceSearch({
        ...val,
        page: 1,
        pageSize: 100
      }).then((res) => {
        console.log(res, "res");
      });
    },
    advancedSearchBack() {
      uni.navigateTo({
        url: "/pages/knowledgeBase/knowledgeBase"
      });
    },
    // 点击下面的朝代按钮
@@ -580,6 +600,10 @@
    color: #244a7b;
    margin: 0 0.1rem;
    color: #244a7b;
    &.active{
      color: #027EDC;
      font-weight: bold;
    }
  }
}
</style>