1
YM
2024-07-19 cda2f5263a6d2e6c8475f396bca4bd38dc29bb3b
1
1个文件已修改
317 ■■■■ 已修改文件
src/pages/academicSchools/index.vue 317 ●●●● 补丁 | 查看 | 原始文档 | blame | 历史
src/pages/academicSchools/index.vue
@@ -4,30 +4,40 @@
  >
    <headNav :idIndex="'6'" text="学术流派" />
    <!-- 高级搜索 -->
    <view style="margin-top: 0.1rem">
    <view style="margin-left: 0.6rem; margin-top: 0.1rem; display: flex">
      <advancedSearch
        @onSearch="onSearch"
        @onSubmit="onSubmit"
        :from="From"
        placehold="请输入关键字"
        :isAvancedTrue="false"
        :keyword="searchKey"
        :advancedSearchBack="advancedSearchBack"
      />
      <view
        @click="isAvancedClick"
        style="
          color: #244a7b;
          cursor: pointer;
          font-size: 0.12rem;
          margin-left: 0.35rem;
          line-height: 0.58rem;
        "
        >高级搜索 {{ isAdvancedSearch ? "∧" : "∨" }}</view
      >
      <!-- 热门搜索 -->
      <view class="flex flex-center hotSearch" style="margin-left: 2rem">
        热门搜索:
        <ul class="flex" style="margin-right: 10rpx">
          <li
            @click="onSearch({ text: item }, index)"
            :class="{ cursor: true, active: hotAciveIndex === index }"
            v-for="(item, index) in hotKeyList"
            :key="item"
          >
            {{ item }}
          </li>
        </ul>
      </view>
    </view>
    <!-- 热门搜索 -->
    <view class="flex flex-center hotSearch">
      热门搜索:
      <ul class="flex" style="margin-right: 10rpx">
        <li
          @click="onSearch({ text: item }, index)"
          :class="{ cursor: true, active: hotAciveIndex === index }"
          v-for="(item, index) in hotKeyList"
          :key="item"
        >
          {{ item }}
        </li>
      </ul>
    </view>
    <!-- 关系表地图 -->
    <div
      id="relation"
@@ -69,7 +79,7 @@
import {
  getPersonData,
  getHotSearch,
  getPDataStatistics,
  getPDataStatistics
} from "@/api/index.js";
import * as echarts from "echarts";
export default {
@@ -82,172 +92,6 @@
      nodes: [],
      // echarts两者的关系
      relationships: [],
      // 高级搜索
      From: {
        from: [
          {
            type: "input",
            label: "姓名",
            name: "name",
            value: "",
          },
          {
            type: "input",
            label: "别名",
            name: "alias",
            value: "",
          },
          {
            type: "input",
            label: "籍贯",
            name: "location",
            value: "",
          },
          {
            type: "select",
            label: "职业",
            name: "sdId",
            value: "",
            options: [
              {
                label: "未指明",
                value: "UNKNOWN",
              },
            ],
          },
          {
            type: "input",
            label: "官职",
            name: "office",
            value: "",
          },
          {
            type: "select",
            label: "性别",
            value: "",
            name: "genderTypeEO",
            options: [
              {
                label: "未指明",
                value: "UNKNOWN",
              },
              {
                label: "男",
                value: "MALE",
              },
              {
                label: "女",
                value: "WOMAN",
              },
            ],
          },
          {
            type: "input",
            label: "时期",
            name: "period",
            value: "",
          },
          {
            type: "input",
            label: "机构",
            name: "inst",
            value: "",
          },
          {
            type: "number",
            label: "页码",
            name: "page",
            value: "",
          },
          {
            type: "number",
            label: "页大小",
            name: "pageSize",
            value: "",
          },
        ],
      },
      // 下面的朝代1
      dynastyColor: 1,
      // 朝代
      dynasty: [
        {
          name: "夏朝",
          coord: "2070BC",
          id: 1,
        },
        {
          name: "商朝",
          id: 2,
          coord: "1600BC",
        },
        {
          name: "西周",
          id: 3,
          coord: "1600BC",
        },
        {
          name: "春秋战国",
          id: 4,
          coord: "770BC",
        },
        {
          name: "秦朝",
          id: 5,
          coord: "221BC",
        },
        {
          name: "汉朝",
          id: 6,
          coord: "202BC",
        },
        {
          name: "三国两晋南北朝",
          id: 7,
          coord: "184",
        },
        {
          name: "隋朝",
          id: 8,
          coord: "581",
        },
        {
          name: "唐朝",
          id: 9,
          coord: "618",
        },
        {
          name: "五代十国",
          id: 10,
          coord: "907",
        },
        {
          name: "辽夏金",
          id: 11,
          coord: "907",
        },
        {
          name: "宋朝",
          id: 12,
          coord: "960",
        },
        {
          name: "元朝",
          id: 13,
          coord: "1271",
        },
        {
          name: "明朝",
          id: 14,
          coord: "1368",
        },
        {
          name: "清朝",
          id: 15,
          coord: "1636",
        },
      ],
      // 热门搜索
      hotKeyList: [],
      searchKey: "",
@@ -261,8 +105,9 @@
      // 当前人物信息
      ownInfo: null,
      detailData: {
        name: "",
        name: ""
      },
      isAdvancedSearch: false
    };
  },
  mounted() {
@@ -271,7 +116,6 @@
    this.hotSearch();
    // 监听窗口大小变化
    window.addEventListener("resize", this.relation);
    this.innt();
  },
  onLoad(options) {
    this.searchKey = options.keyword;
@@ -292,7 +136,7 @@
            relationTypeName: ele.relationTypeName,
            parentName: parent?.NAME[0]?.content1 ?? parent.parentName,
            name2: personInfo?.NAME[0]?.content1,
            category: type,
            category: type
          };
          if (str == "literatureList") {
            obj.relationTypeName = ele.literatureName;
@@ -391,7 +235,7 @@
              const data = item[str]?.map((e) => {
                return {
                  ...e,
                  personId: item.personId,
                  personId: item.personId
                };
              });
              if (data?.length) {
@@ -531,7 +375,7 @@
            ...literature,
            ...social,
            ...place,
            ...school,
            ...school
          ];
          // const k = personData.filter((item) => item.category == 0);
          // const t = personData.filter((item) => item.category == 1);
@@ -554,20 +398,20 @@
              this.nodes.push({
                name: item.parentName,
                id: item.parentId,
                ...item,
                ...item
              });
            }
            if (item.name2 && exists2 !== true) {
              this.nodes.push({
                name: item.name2,
                id: item.id2,
                ...item,
                ...item
              });
            }
            let obj = {
              source: item.parentName,
              target: item.name2,
              relation: item.relationTypeName || "", // 如果存在 relationName 字段则使用,否则为空字符串
              relation: item.relationTypeName || "" // 如果存在 relationName 字段则使用,否则为空字符串
            };
            this.relationships.push(obj);
          });
@@ -635,8 +479,8 @@
                borderRadius: 30,
                position: "middle", // 设置标签文本在线的中间位置上居中显示
                // z: -1, // 设置标签的z轴高度,使其比连接线更高
                distance: -10, // 将标签放置在连接线上
              },
                distance: -10 // 将标签放置在连接线上
              }
            });
          }
        }
@@ -649,7 +493,7 @@
          type: "image",
          image: "/static/image/characterRelationBg.png",
          size: "100% 100%", // 背景图片的尺寸,可以是百分比或者像素
          position: "center center", // 背景图片的位置,可以是 top, bottom, middle 或者百分比
          position: "center center" // 背景图片的位置,可以是 top, bottom, middle 或者百分比
        },
        tooltip: {},
        legend: [
@@ -659,8 +503,8 @@
            orient: "vertical",
            data: this.categories.map(function (a) {
              return a.name;
            }),
          },
            })
          }
        ],
        series: [
          {
@@ -675,31 +519,31 @@
            label: {
              show: true,
              position: "right",
              formatter: "{b}",
              formatter: "{b}"
            },
            labelLayout: {
              hideOverlap: true,
              hideOverlap: true
            },
            scaleLimit: {
              min: 0.4,
              max: 2,
              max: 2
            },
            lineStyle: {
              color: "source",
              curveness: 0.2,
              curveness: 0.2
            },
            emphasis: {
              focus: "adjacency",
              lineStyle: {
                width: 5,
              },
                width: 5
              }
            },
            force: {
              repulsion: 600,
              edgeLength: 300,
            },
          },
        ],
              edgeLength: 300
            }
          }
        ]
      };
      // 设置点击事件监听
      myChart.off("click");
@@ -741,7 +585,7 @@
            i += 1;
            return e["content" + i];
          }).join("、") ?? "",
        biography: data?.BIOGRAPHY ?? "",
        biography: data?.BIOGRAPHY ?? ""
      };
      this.detailData = obj;
    },
@@ -759,33 +603,18 @@
      }
      this.getData(val.text);
    },
    // 高级搜索
    onSubmit(val) {
      getAdvanceSearch({
        ...val,
        page: 1,
        pageSize: 100,
      }).then((res) => {
        console.log(res, "res");
      });
    },
    advancedSearchBack() {
      uni.navigateTo({
        url: "/pages/knowledgeBase/knowledgeBase",
      });
    },
    // 点击下面的朝代按钮
    dynastyBottomClick(item) {
      this.dynastyColor = item.id;
      this.onSearch({
        text: item.name,
        text: item.name
      });
    },
    // 关系图 点击里面的元素
    spaceTimeArr(id) {
      // 关系图的数据
      uni.navigateTo({
        url: "/pages/character/detail?id=" + id,
        url: "/pages/character/detail?id=" + id
      });
    },
    // 获取朝代echarts的数据
@@ -811,28 +640,18 @@
        });
      });
    },
    // 高级搜索里面职业的下拉菜单
    innt() {
      getPDataStatistics().then((res) => {
        const professionIndex = this.From.from.findIndex(
          (field) => field.label === "职业"
        );
        // 如果找到了职业字段
        if (professionIndex !== -1) {
          // 将 profession.list 转换为 options 格式
          const options = res.object.occupationStatistic.details.map(
            (item) => ({
              label: item.tagName,
              value: item.tagId.toString(), // 将 id 转换为字符串,确保与 value 类型一致
            })
          );
          // 更新职业字段的 options 属性
          this.$set(this.From.from[professionIndex], "options", options);
        }
      });
    isAvancedClick() {
      this.isAdvancedSearch = !this.isAdvancedSearch;
      // this.$nextTick(() => {
      //   var box1Height = document.querySelector(".fbox").offsetHeight;
      //   // let box2Height= document.querySelector('.fbox1').style.height = box1Height + 'px';
      //   let box2Height = document.querySelector(".fbox1").offsetHeight;
      //   if (box1Height <= box2Height) {
      //     document.querySelector(".fbox1").style.height = box1Height + "px";
      //   }
      // });
    },
  },
  }
};
</script>
@@ -926,8 +745,8 @@
    color: #244a7b;
    margin: 0 0.1rem;
    color: #244a7b;
    &.active{
      color: #027EDC;
    &.active {
      color: #027edc;
      font-weight: bold;
    }
  }