地域图谱

杨磊

2024-05-20 0f3805cc33bf479fc0f44d456dfb20eb8528fe92

地域图谱

 src/api/index.js

@@ -123,6 +123,14 @@
    params: data
  });
};
// 医学人物知识库 人物关系
export const getNodeCount = (data) => {
  return req1({
    url: "/inheritMedical/nodeCount",
    method: "post",
    params: data
  });
};

// 医学人物知识库 著述
export const getPersonWritings = (data) => {

 src/pages/character/detail.vue

@@ -1,25 +1,15 @@
<template>
  <view class="relative">
    <headNav
      :idIndex="1 + ''"
      text="中医人物数据库"
    />
    <headNav :idIndex="1 + ''" text="中医人物数据库" />
    <view class="Midde flex">
      <el-button
        class="MiddeBack flex flex-center"
        @click="goBack"
      >返回</el-button>
      <view
        style="width: 70%"
        class="flex flex-center flex-column"
      <el-button class="MiddeBack flex flex-center" @click="goBack"
        >返回</el-button
      >
      <view style="width: 70%" class="flex flex-center flex-column">
        <view style="font-weight: bold; font-size: 0.2rem">{{
          detailInfo.NAME
        }}</view>
        <ul
          class="flex"
          style="line-height: 1.2; margin: 0.15rem 0"
        >
        <ul class="flex" style="line-height: 1.2; margin: 0.15rem 0">
          <li
            style="
              background-color: #fff;
@@ -93,10 +83,7 @@
        >
          {{ biogData.length ? biogData[0].content : "-" }}
        </view>
        <view
          class="flex"
          style="width: 100%; margin: 0.25rem 0 0.15rem 0"
        >
        <view class="flex" style="width: 100%; margin: 0.25rem 0 0.15rem 0">
          <view>
            <!-- <el-button style="padding: 10rpx;" size="mini" icon="el-icon-folder-add">收藏</el-button> -->
            <el-button
@@ -104,16 +91,15 @@
              class="yinyong flex"
              @click="copyText"
            >
              <img
                src="@/static/image/yinyong.png"
                alt=""
              />引用</el-button>
              <img src="@/static/image/yinyong.png" alt="" />引用</el-button
            >
          </view>
          <!-- v-if="biogData.length > 1" -->
          <view
            style="font-size: 0.12rem; color: #244a7b; cursor: pointer"
            @click="ProfileClick"
          >阅读更多></view>
            >阅读更多></view
          >
        </view>
      </view>
      <view style="width: 5%"></view>
@@ -126,10 +112,7 @@
        style="padding-right: 0.2rem; width: 2.8rem"
      >
        <div class="grid-content bg-purple-dark flex flex-column">
          <el-card
            class="box-card"
            style="width: 100%; height: 2.06rem"
          >
          <el-card class="box-card" style="width: 100%; height: 2.06rem">
            <div
              class="clearfix flex"
              style="
@@ -138,11 +121,14 @@
                padding-bottom: 0.1rem;
              "
            >
              <span style="
              <span
                style="
                  margin-left: 0.12rem;
                  font-size: 0.14rem;
                  font-weight: 900;
                ">关系图谱</span>
                "
                >关系图谱</span
              >
              <!-- <el-button icon="el-icon-rank" style="float: right; padding: 3px 0;" type="text"></el-button> -->
              <img
                src="@/static/image/fangda.png"
@@ -151,10 +137,7 @@
                alt=""
              />
            </div>
            <view
              id="relation"
              style="height: 1.51rem; width: 100%"
            ></view>
            <view id="relation" style="height: 1.51rem; width: 100%"></view>
          </el-card>
          <el-card
            class="box-card"
@@ -219,18 +202,9 @@
        </div>
      </div>
      <!-- 右侧 -->
      <div
        :span="18"
        class="BoxRight"
      >
        <div
          class="grid-content bg-purple-dark"
          style="width: 100%"
        >
          <el-card
            class="box-card"
            style="padding: 0"
          >
      <div :span="18" class="BoxRight">
        <div class="grid-content bg-purple-dark" style="width: 100%">
          <el-card class="box-card" style="padding: 0">
            <div
              class="clearfix"
              style="
@@ -248,60 +222,36 @@
            class="box-card"
            style="min-height: 1.91rem; margin: 0.2rem 0"
          >
            <el-tabs
              ref="tabs"
              v-model="activeName"
              @tab-click="handleClick"
            >
              <el-tab-pane
                label="代表著作"
                data-id="1"
                name="representative"
              >
            <el-tabs ref="tabs" v-model="activeName" @tab-click="handleClick">
              <el-tab-pane label="代表著作" data-id="1" name="representative">
                <Table1
                  :data="tableData1"
                  :columns="tableColumns1"
                  :height="400"
                />
              </el-tab-pane>
              <el-tab-pane
                label="亲属关系"
                data-id="2"
                name="family "
              >
              <el-tab-pane label="亲属关系" data-id="2" name="family ">
                <Table1
                  :data="tableData2"
                  :columns="tableColumns2"
                  :height="400"
                />
              </el-tab-pane>
              <el-tab-pane
                label="师承关系"
                data-id="3"
                name="mentoring "
              >
              <el-tab-pane label="师承关系" data-id="3" name="mentoring ">
                <Table1
                  :data="tableData3"
                  :columns="tableColumns2"
                  :height="400"
                />
              </el-tab-pane>
              <el-tab-pane
                label="社会关系"
                data-id="4"
                name="society"
              >
              <el-tab-pane label="社会关系" data-id="4" name="society">
                <Table1
                  :data="tableData4"
                  :columns="tableColumns2"
                  :height="400"
                />
              </el-tab-pane>
              <el-tab-pane
                label="活动年谱"
                data-id="5"
                name="activity"
              >
              <el-tab-pane label="活动年谱" data-id="5" name="activity">
                <Table1
                  :data="tableData5"
                  :columns="tableColumns3"
@@ -350,10 +300,7 @@
            >
              <span>现代研究</span>
            </div>
            <ul
              class="font-family"
              style="font-size: 0.13rem; line-height: 2"
            >
            <ul class="font-family" style="font-size: 0.13rem; line-height: 2">
              <li
                v-for="(item, index) in personResearchList"
                :key="index"
@@ -383,10 +330,7 @@
      ></el-button>
    </el-col>
    <!-- 个人小传 -->
    <el-dialog
      :visible.sync="isProfile"
      :modal-append-to-body="false"
    >
    <el-dialog :visible.sync="isProfile" :modal-append-to-body="false">
      <view class="ProfileNav flex flex-center"> 个人小传 </view>
      <view
        style="padding: 0.44rem 0.3rem; min-height: 7.32rem"
@@ -409,7 +353,9 @@
          </view>
          <view class="flex">
            <view></view>
            <view style="font-weight: 700; color: #2c2c2c">——{{ item.pageNo }}</view>
            <view style="font-weight: 700; color: #2c2c2c"
              >——{{ item.bookName }}</view
            >
          </view>
        </view>
      </view>
@@ -606,20 +552,19 @@
      }).then((res) => {
        this.personResearchList = res.object.personResearchList;
      });
      getPersonInfo({
        id: this.detailId,
        type: "PERSON_RELATIONS",
      getPersonRelationAtSchool({
        personId: this.detailId,
      }).then((res) => {
        console.log(res, "PERSON_RELATIONS");
        this.personRelationList = res.object.personRelationList;
        if (this.personRelationList.length) {
          this.tableData4 = this.personRelationList.map((f) => {
            return {
              a: f.nodeName,
              b: f.relationTypeName,
            };
          });
        }
        // this.personRelationList = res.object.personRelationList;
        // if (this.personRelationList.length) {
        //   this.tableData4 = this.personRelationList.map((f) => {
        //     return {
        //       a: f.nodeName,
        //       b: f.relationTypeName,
        //     };
        //   });
        // }
      });
      getWebBasic({
        personId: this.detailId,
@@ -730,7 +675,7 @@
        this.biogData = res.list.map((item) => {
          return {
            content: item.content1,
            pageNo: "《" + item.pageNo + "》 " + "P " + item.pageNo, // 这里只有bookid无法匹配到书名
            bookName: "《" + item.bookName + "》 " + "P " + item.pageNo, // 这里只有bookid无法匹配到书名
          };
        });
      });

 src/pages/territory/territory.vue

@@ -1,11 +1,7 @@
<template>
  <view class="pageBox">
    <!-- 顶部导航 -->
    <headNav
      :idIndex="idIndex"
      text="中医地域医谱"
      style="z-index:999"
    />
    <headNav :idIndex="idIndex" text="中医地域医谱" style="z-index: 999" />
    <view
      class="flex flex-center"
      style="width: 100%; margin: 0.2rem 0 0.34rem; justify-content: flex-start"
@@ -18,11 +14,7 @@
        :keyword="keyword"
      />
      <ul class="flex">
        <li
          style=""
          v-for="(item, index) in dynasty"
          :key="item.id"
        >
        <li style="" v-for="(item, index) in dynasty" :key="item.id">
          <view
            @click="SchoolClick(item.id)"
            class="flex flex-center font-family school"
@@ -50,10 +42,7 @@
                border-radius: 50%;
              "
            ></view>
            <view
              class=""
              style="color: #2c2c2c; font-size: 0.12rem"
            >{{
            <view class="" style="color: #2c2c2c; font-size: 0.12rem">{{
              item.name
            }}</view>
          </view>
@@ -73,10 +62,7 @@
        top: 2.2rem;
      "
    >
      <div
        slot="header"
        class="clearfix"
      >
      <div slot="header" class="clearfix">
        <span>人物 ({{ SearchArr.length }})</span>
        <el-button
          style="
@@ -87,12 +73,10 @@
          "
          @click="isSearch = false"
          type="text"
        >关闭</el-button>
      </div>
      <view
        class=""
        style="overflow: auto; height: 2.5rem"
          >关闭</el-button
      >
      </div>
      <view class="" style="overflow: auto; height: 2.5rem">
        <ul
          class="information"
          v-for="(item, index) in SearchArr"
@@ -126,10 +110,7 @@
      "
      :style="{ top: isTop, left: isLeft }"
    >
      <div
        slot="header"
        class="clearfix"
      >
      <div slot="header" class="clearfix">
        <span v-if="currentMark">{{
          currentMark.name ? currentMark.name : "-"
        }}</span>
@@ -142,12 +123,10 @@
          "
          @click="isEchTrue = false"
          type="text"
        >关闭</el-button>
      </div>
      <ul
        class="information"
        v-if="currentMark"
          >关闭</el-button
      >
      </div>
      <ul class="information" v-if="currentMark">
        <li>
          姓名:
          {{ currentMark.name ? currentMark.name : "-" }}
@@ -164,7 +143,8 @@
        @click="viewMoreClick"
        style="width: 100%; padding: 3px 0; font-size: 0.12rem; color: #597aa5"
        type="text"
      >查看更多>></el-button>
        >查看更多>></el-button
      >
    </el-card>
    <div id="map"></div>
    <!-- 朝代 -->
@@ -182,7 +162,7 @@
            class="flex flex-center"
            style="height: 0.35rem; background-color: #fff; color: #244a7b"
          >
            {{ item.coord }}
            {{ item.start }}
          </view>
          <view
            class="flex flex-center font-family"
@@ -201,7 +181,7 @@
              background: dynasty1Color == item.id ? '#244A7B' : '#597AA5',
            }"
          >
            {{ item.name }}
            {{ item.dynastyChs }}
          </view>
        </li>
      </ul>
@@ -216,7 +196,7 @@
import * as echarts from "echarts";
import "echarts/extension/bmap/bmap";
import "leaflet.chinatmsproviders";
import { getRetrieval } from "@/api/index.js";
import { getRetrieval, getDynasty } from "@/api/index.js";
export default {
  data() {
    return {
@@ -250,7 +230,7 @@
        },
      ],
      // 下面的朝代1
      dynasty1Color: 1,
      dynasty1Color: "",
      dynasty1: [
        {
          name: "夏朝",
@@ -333,12 +313,12 @@
      // 朝代
      dynasty: [
        {
          name: "夏朝",
          name: "夏",
          color: "#90BBD8",
          id: 1,
        },
        {
          name: "商朝",
          name: "商",
          color: "#EDD28B",
          id: 2,
        },
@@ -348,24 +328,29 @@
          id: 3,
        },
        {
          name: "秦朝",
          name: "秦",
          color: "#9CC27A",
          id: 4,
        },
        {
          name: "汉朝",
          name: "汉",
          color: "#5B6CB9",
          id: 5,
        },
        {
          name: "隋朝",
          name: "隋",
          color: "#8860A8",
          id: 6,
        },
        {
          name: "唐朝",
          name: "唐",
          color: "#DE8E66",
          id: 7,
        },
        {
          name: "明",
          color: "#DE8E66",
          id: 8,
        },
      ],
      // 搜索后是否显示弹框
@@ -392,14 +377,17 @@
    console.log("optionsoptionsoptions", options.id);
  },
  mounted() {
    // this.$nextTick(() => {
    // loadBMap("1NJdwrI1CfT6lrykVhDkmWgsO6O2bjQK").then(() => {
    //   this.innt();
    // });
    // })
    this.getDynastyList();

    this.getDataList();
  },
  methods: {
    getDynastyList() {
      getDynasty().then((res) => {
        console.log(res, "123123");
        this.dynasty1 = res.list;
      });
    },
    showCard(info) {
      console.log(info);
      console.log(this.markerList);
@@ -409,19 +397,29 @@
      this.map.setView(latlng, 10);
    },
    getDataList() {
      getRetrieval({ keyword: this.keyword, dynasty: "" }).then((res) => {
      getRetrieval({ keyword: this.keyword, dynasty: this.dynasty1Color }).then(
        (res) => {
          if (res.object) {
        let markerList = [];
        const listData = res.object.personList;
            console.log(listData, "listData");
        for (let i = 0; i < listData.length; i++) {
          const item = listData[i];
          if (item.NATIVE_PLACE?.length > 0) {
            item.NATIVE_PLACE.forEach((citem) => {
              if (citem.xCoord && citem.yCoord) {
                    const currentDynasty = this.dynasty1.find(
                      (f) => f.id == item.PERIOD[0].content1
                    );
                    if (currentDynasty) {
                      item.dynastyInfo = currentDynasty;
                    }
                markerList.push({ ...citem, ...item });
              }
            });
          }
        }
            console.log(markerList, "markerList");
        this.initMap(markerList);
        this.SearchArr = markerList.map((item) => ({
          birthAndDeath: item?.BIRTH_YEAR[0]?.content1
@@ -434,10 +432,16 @@
          id: item.id,
        }));
        this.markerList = markerList;
      });
          }
        }
      );
    },
    //初始化地图
    initMap(markerList) {
      this.isEchTrue = false;
      if (this.map) {
        this.map.remove();
      }
      var map = L.map("map", {
        preferCanvas: true,
        attributionControl: false,
@@ -457,9 +461,6 @@
        popupAnchor: [1, -24], // 该点是相对于iconAnchor弹出信息的位置  这个是我手动调出来的，文档默认原始值是[-1，-76]，我是去一半值，取一半值调出来的
      });

      let htmlStr = '<p><span class="map-circle-name">';
      ('</span><br><span class="map-circle-count">');
      ("</span><p/>");
      let icon = L.divIcon({
        html: "<div class='map-circle-name'></div>",
        iconSize: [80, 80],
@@ -469,6 +470,38 @@
      if (markerList.length) {
        for (let i = 0; i < markerList.length; i++) {
          const item = markerList[i];
          let currentClassName = "map-circle-name";
          switch (item.dynastyInfo.dynastyChs) {
            case "夏":
              currentClassName = "map-circle-xia";
              break;
            case "商":
              currentClassName = "map-circle-shang";
              break;
            case "西周":
              currentClassName = "map-circle-zhou";
              break;
            case "秦":
              currentClassName = "map-circle-qin";
              break;
            case "汉":
              currentClassName = "map-circle-han";
              break;
            case "隋":
              currentClassName = "map-circle-sui";
              break;
            case "唐":
              currentClassName = "map-circle-tang";
              break;
            case "明":
              currentClassName = "map-circle-ming";
              break;
          }
          let icon = L.divIcon({
            html: `<div class='${currentClassName}'></div>`,
            iconSize: [80, 80],
            className: "map-circle",
          });
          const temp_mark = L.marker([item.yCoord, item.xCoord], {
            icon: icon,
          }).addTo(map);
@@ -500,6 +533,7 @@
    dynastyBottomClick(id) {
      console.log(id);
      this.dynasty1Color = id;
      this.getDataList();
    },
    onSearch(val) {
      this.isSearch = true;
@@ -527,8 +561,57 @@
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: #2070bc;
  background-color: rgb(144, 187, 216);
}
::v-deep .map-circle-xia {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: rgb(144, 187, 216);
}
::v-deep .map-circle-shang {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: rgb(237, 210, 139);
}
::v-deep .map-circle-zhou {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: rgb(207, 116, 109);
}
::v-deep .map-circle-qin {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: rgb(156, 194, 122);
}
::v-deep .map-circle-han {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: rgb(91, 108, 185);
}
::v-deep .map-circle-sui {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: rgb(136, 96, 168);
}
::v-deep .map-circle-tang {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: rgb(136, 96, 168);
}
::v-deep .map-circle-ming {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: rgb(222, 142, 102);
}

.pageBox {
  width: 100%;
  height: 100%;