Merge branch 'master' of http://182.92.203.7:2001/r/TCM_CharacterLibrary

杨磊

2024-07-24 48fbf705ee51a803081bfd09e7ff173d8475cdc9

Merge branch 'master' of http://182.92.203.7:2001/r/TCM_CharacterLibrary

 public/index.html

@@ -4,7 +4,7 @@
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <link rel="icon" href="./logo.ico">
    <title>中国医学人物知识库</title>
    <title>中国历代医学人物知识库</title>
    <script>
      var coverSupport =
        "CSS" in window &&

 src/api/index.js

@@ -6,7 +6,7 @@
  return req1({
    url: "/account/register",
    method: "post",
    data: Obj
    data: Obj,
  });
};

@@ -17,8 +17,8 @@
    method: "post",
    data: req,
    headers: {
      "Content-Type": "multipart/form-data"
    }
      "Content-Type": "multipart/form-data",
    },
  });
};

@@ -27,14 +27,14 @@
  return req1({
    url: "/account/verification",
    method: "post",
    data: req
    data: req,
  });
};
// 获取用户信息
export const getUserInfo = () => {
  return req1({
    url: "/account/getUserInfo",
    method: "post"
    method: "post",
  });
};

@@ -43,7 +43,7 @@
  return req1({
    url: "/account/resetPassword",
    method: "post",
    data: Obj
    data: Obj,
  });
};

@@ -51,7 +51,7 @@
export const getlogout = () => {
  return req1({
    url: "/account/logout",
    method: "post"
    method: "post",
  });
};

@@ -60,7 +60,7 @@
  return req1({
    url: "/account/changePassword",
    method: "post",
    data: obj
    data: obj,
  });
};

@@ -69,7 +69,7 @@
export const getdataOutput = () => {
  return req1({
    url: "/person/dataOutput",
    method: "post"
    method: "post",
  });
};

@@ -77,7 +77,7 @@
export const getHotSearch = () => {
  return req1({
    url: "/person/hotSearch",
    method: "post"
    method: "post",
  });
};
// 人物相关的 来源
@@ -85,7 +85,7 @@
  return req1({
    url: "/person/source",
    method: "post",
    params: data
    params: data,
  });
};
// 人物相关的 个人时空地图
@@ -93,7 +93,7 @@
  return req1({
    url: "/person/spaceTime",
    method: "post",
    params: data
    params: data,
  });
};

@@ -102,7 +102,7 @@
  return req1({
    url: "/person/images",
    method: "post",
    params: data
    params: data,
  });
};
// 医学人物知识库 个人事迹
@@ -110,7 +110,7 @@
  return req1({
    url: "/person/biog",
    method: "post",
    params: data
    params: data,
  });
};
// 医学人物知识库 人物关系
@@ -118,7 +118,7 @@
  return req1({
    url: "/person/personRelationAtSchool",
    method: "post",
    params: data
    params: data,
  });
};
// 医学人物知识库 人物关系
@@ -126,7 +126,7 @@
  return req1({
    url: "/inheritMedical/nodeCount",
    method: "post",
    data: data
    data: data,
  });
};

@@ -135,7 +135,7 @@
  return req1({
    url: "/person/writings",
    method: "post",
    params: data
    params: data,
  });
};
// 医学人物知识库 人物详情
@@ -143,14 +143,14 @@
  return req1({
    url: "/person/getPersonInfo",
    method: "post",
    params: Obj
    params: Obj,
  });
};
export const getWebBasic = (Obj) => {
  return req1({
    url: "/person/webBasic",
    method: "post",
    params: Obj
    params: Obj,
  });
};

@@ -162,7 +162,7 @@
    params: {
      keyword: requestData?.keyword,
      personId: requestData?.personId,
    }
    },
  });
};

@@ -171,7 +171,7 @@
  return req1({
    url: "/person/advanceSearch",
    method: "post",
    data: Obj
    data: Obj,
  });
};

@@ -187,7 +187,7 @@
      requestData?.keyword +
      "&dynasty=" +
      requestData?.dynasty,
    method: "post"
    method: "post",
  });
};
// 中国地域地谱检索人物
@@ -198,7 +198,7 @@
      requestData?.keyword +
      "&dynasty=" +
      requestData?.dynasty,
    method: "post"
    method: "post",
  });
};
// 医学人物知识库
@@ -208,28 +208,28 @@
  return req1({
    url: "/inheritMedical/list",
    method: "post",
    data: requestData
    data: requestData,
  });
};
export const inheritMedicalSataStatistics = (requestData) => {
  return req1({
    url: "/inheritMedical/dataStatistics",
    method: "post",
    data: requestData
    data: requestData,
  });
};
export const inheritMedicalCultureList = (requestData) => {
  return req1({
    url: "/inheritMedical/cultureList",
    method: "post",
    data: requestData
    data: requestData,
  });
};
export const inheritMedicalRelationList = (requestData) => {
  return req1({
    url: "/inheritMedical/relationList",
    method: "post",
    data: requestData
    data: requestData,
  });
};

@@ -239,14 +239,14 @@
  return req1({
    url: "/person/list",
    method: "post",
    data: data
    data: data,
  });
};
// 检索数据到出
export const getPDownload = () => {
  return req1({
    url: "/person/download",
    method: "post"
    method: "post",
  });
};
// -------------------------P
@@ -255,20 +255,20 @@
export const getDynastyAll = () => {
  return req1({
    url: "/dynasty/list",
    method: "post"
    method: "post",
  });
};

export const getDynasty = () => {
  return req1({
    url: "/dynasty/listAll",
    method: "post"
    method: "post",
  });
};
export const getDynastyData = () => {
  return req1({
    url: "/person/retrieval/dynasty",
    method: "post"
    method: "post",
  });
};

@@ -276,31 +276,45 @@
export const getDynastyStatistics = () => {
  return req1({
    url: "/school/dynasty/statistics",
    method: "get"
    method: "get",
  });
};

export const getIntroduction = (id) => {
  return req1({
    url: "/school/introduction?id=" + id,
    method: "post"
    method: "post",
  });
};

export const schoolAtlas = (id) => {
  return req1({
    url: "/person/schoolAtlas?schoolId=" + id,
    method: "post"
    method: "post",
  });
};

// 查询人物6类数据
export const getPersonData = (id) => {
  return req1({
    url: "/person/chain/search/person?personId=" + id + "&maxStep=3",
    method: "post",
  });
};
 
// 查询人物学术流派
export const getSchoolInfo = (id) => {
  return req1({
    url: "/person/chain/search/school?schoolId=" + id + "&maxStep=3",
    method: "post",
  });
};

export const searchSchoolPerson = (data) => {
  return req1({
    url: "/person/searchSchoolPerson",
    method: "post",
    params: data
    params: data,
  });
};

@@ -309,7 +323,7 @@
export const getDataStatistics = () => {
  return req1({
    url: "/medical/dataStatistics",
    method: "post"
    method: "post",
  });
};
// 查询
@@ -317,7 +331,7 @@
  return req1({
    url: "/medical/list",
    method: "post",
    data: data
    data: data,
  });
};
// 详情
@@ -325,7 +339,7 @@
  return req1({
    url: "/medical/details",
    method: "post",
    data: data
    data: data,
  });
};
// 取值：RDF、NT、XML、JSON
@@ -333,7 +347,7 @@
  return req1({
    url: "/medical/dataOutput",
    method: "post",
    data: Obj
    data: Obj,
  });
};

@@ -341,18 +355,18 @@
  return req1({
    url: "/person/dataOutput",
    method: "post",
    params: Obj
    params: Obj,
  });
};

// -----------

// 中国医学人物知识库
// 中国历代医学人物知识库
// 数据统计
export const getPDataStatistics = () => {
  return req1({
    url: "/person/dataStatistics",
    method: "post"
    method: "post",
  });
};
// ----------------
@@ -364,21 +378,36 @@
export const getRelationTypeTreeList = () => {
  return req1({
    url: "/personRelationType/getRelationTypeTreeList",
    method: "post"
    method: "post",
  });
};

export const getInstitutionList = () => {
  return req1({
    url: "/medical/institutionList",
    method: "post"
    method: "post",
  });
};

export const academicSearch = (data) => {
  return req1({
    url: "/person/academic/search",
    method: "post",
    params: data,
  });
};

export const getPersonTag = () => {
  return req1({
    url: "/personTag/list",
    method: "post",
  });
};





export const getSocialDistinction = () => {
  return req1({
    url: "/socialDistinction/list",
    method: "post",
  });
};


 src/components/headNav/headNav.vue

@@ -82,13 +82,9 @@
            class="search-logo"
            @click="toggleSearch"
            :style="{
              backgroundColor: searchBg == true ? '#244A7B' : '#DA7A2B'
              backgroundColor: searchBg == true ? '#244A7B' : '#DA7A2B',
            }"
            style="
              background-color: #000;
              border-radius: 50%;
              margin-top: -4rpx;
            "
            style="background-color: #000; border-radius: 50%"
          ></view>
        </view>
        <el-dropdown trigger="click" @command="handleCommand">
@@ -142,20 +138,23 @@
            <span slot="title">首页</span>
          </el-menu-item>
          <el-menu-item index="1">
            <span slot="title">中医人物数据库</span>
            <span slot="title">历代人物</span>
          </el-menu-item>
          <el-menu-item index="2" class="oActive">
            <span slot="title">世医医家数据库</span>
            <span slot="title">家学传承</span>
          </el-menu-item>
          <el-menu-item index="6">
            <span slot="title">学术流派</span>
          </el-menu-item>
          <el-menu-item index="3">
            <span slot="title">中医学术流派</span>
            <span slot="title">学术图谱</span>
          </el-menu-item>
          <el-menu-item index="4">
            <span slot="title">中医地域图谱</span>
            <span slot="title">地域图谱</span>
          </el-menu-item>
          <el-menu-item index="5">
          <!-- <el-menu-item index="5">
            <span slot="title">中医医事制度</span>
          </el-menu-item>
          </el-menu-item> -->
        </el-menu>
      </view>
    </el-dialog>
@@ -176,32 +175,32 @@
      type: String,
      default() {
        return "标题";
      }
      },
    },
    searchBg: {
      type: Boolean,
      default() {
        return true;
      }
      },
    },
    bg: {
      type: String,
      default() {
        return "/static/image/topBg.png";
      }
      },
    },
    bg1: {
      type: String,
      default() {
        return "/static/image/line.png";
      }
      },
    },
    idIndex: {
      type: String,
      default() {
        return "1";
      }
    }
      },
    },
  },
  data() {
    return {
@@ -209,7 +208,7 @@
      searchInput: "", // 搜索框输入的内容
      menuNav: false,
      dialogVisible: false,
      isCommand: true
      isCommand: true,
    };
  },
  methods: {
@@ -234,13 +233,13 @@
              if (res.confirm) {
                setTimeout(() => {
                  uni.reLaunch({
                    url: "/pages/Login/Login"
                    url: "/pages/Login/Login",
                  });
                }, 1500);
              } else if (res.cancel) {
                // console.log('用户点击取消');
              }
            }
            },
          });
        }
        // uni.navigateTo({
@@ -254,7 +253,7 @@
    handleCommand(int) {
      if (int == 1) {
        uni.navigateTo({
          url: "/pages/changePassword/changePassword"
          url: "/pages/changePassword/changePassword",
        });
      } else if (int == 2) {
        uni.showModal({
@@ -271,40 +270,44 @@
                //退出成功！并跳转到其他页面
                this.$message.success("退出成功");
                uni.reLaunch({
                  url: "/pages/Login/Login"
                  url: "/pages/Login/Login",
                });
              });
            } else if (res.cancel) {
              // console.log('用户点击取消');
            }
          }
          },
        });
      }
    },
    handleSelect(index) {
      if (index === "0") {
        uni.navigateTo({
          url: "/pages/index/index?id=" + 0
          url: "/pages/index/index?id=" + 0,
        });
      } else if (index === "1") {
        uni.navigateTo({
          url: "/pages/character/index?id=" + 1
          url: "/pages/character/index?id=" + 1,
        });
      } else if (index === "2") {
        uni.navigateTo({
          url: "/pages/inherit/index?id=" + 2
          url: "/pages/inherit/index?id=" + 2,
        });
      } else if (index === "3") {
        uni.navigateTo({
          url: "/pages/academicGenres/index?id=" + 3
          url: "/pages/academicGenres/index?id=" + 3,
        });
      } else if (index === "4") {
        uni.navigateTo({
          url: "/pages/territory/territory?id=" + 4
          url: "/pages/territory/territory?id=" + 4,
        });
      } else if (index === "5") {
        uni.navigateTo({
          url: "/pages/TcmSystem/TcmSystem?id=" + 5
          url: "/pages/TcmSystem/TcmSystem?id=" + 5,
        });
      } else if (index === "6") {
        uni.navigateTo({
          url: "/pages/academicSchools/index",
        });
      }
    },
@@ -320,13 +323,13 @@
        if (this.searchInput.trim() !== "") {
          uni.navigateTo({
            url:
              "/pages/knowledgeBase/knowledgeBase?keyword=" + this.searchInput
              "/pages/knowledgeBase/knowledgeBase?keyword=" + this.searchInput,
          });
        }
        this.searchInput = "";
      });
    }
  }
    },
  },
};
</script>


 src/pages.json

@@ -137,11 +137,19 @@
                "enablePullDownRefresh" : false,
                "navigationStyle": "custom"
            }
        },
        {
            "path" : "pages/academicSchools/index",
            "style" : 
            {
                "enablePullDownRefresh" : false,
                "navigationStyle": "custom"
            }
        }
    ],
    "globalStyle": {
        "navigationBarTextStyle": "black",
        "navigationBarTitleText": "中国医学人物知识库",
        "navigationBarTitleText": "中国历代医学人物知识库",
        "navigationBarBackgroundColor": "#F8F8F8",
        "backgroundColor": "#F8F8F8"
    }

 src/pages/Login/Login.vue

@@ -16,7 +16,7 @@
              font-family: cursive;
              font-weight: bold;
            "
            >中国医学人物知识库</text
            >中国历代医学人物知识库</text
          >
        </view>
        <view></view>
@@ -235,25 +235,29 @@
      // 书籍数据
      listData: [
        {
          name: "中医人物数据库",
          name: "历代人物",
          id: 1
        },
        {
          name: "世医医家数据库",
          name: "家学传承",
          id: 2
        },
        {
          name: "中医学术流派",
          name: "学术流派",
          id: 6
        },
        {
          name: "学术图谱",
          id: 3
        },
        {
          name: "中医地域医谱",
          name: "地域图谱",
          id: 4
        },
        {
          name: "中医医事制度",
          id: 5
        }
        // {
        //   name: "中医医事制度",
        //   id: 5
        // }
      ]
    };
  },

 src/pages/Register/Register.vue

@@ -16,7 +16,7 @@
              font-family: cursive;
              font-weight: bold;
            "
            >中国医学人物知识库</text
            >中国历代医学人物知识库</text
          >
        </view>
        <view></view>
@@ -293,25 +293,29 @@
      // 书籍数据
      listData: [
        {
          name: "中医人物数据库",
          name: "历代人物",
          id: 1
        },
        {
          name: "世医医家数据库",
          name: "家学传承",
          id: 2
        },
        {
          name: "中医学术流派",
          name: "学术流派",
          id: 6
        },
        {
          name: "学术图谱",
          id: 3
        },
        {
          name: "中医地域医谱",
          name: "地域图谱",
          id: 4
        },
        {
          name: "中医医事制度",
          id: 5
        }
        // {
        //   name: "中医医事制度",
        //   id: 5
        // }
      ],
      checked: false
    };
@@ -331,9 +335,9 @@
    // 服务条款
    termOfServiceClick(number) {
      if (number == 1) {
        window.open(`#/pages/userAgreement/userAgreement`);
        window.open(`#/pages/userAgreement/userAgreement?type=1`);
      } else if (number == 2) {
        window.open(`#/pages/userAgreement/userAgreement`);
        window.open(`#/pages/userAgreement/userAgreement?type=2`);
      }
    },
    // 已有账号？返回登录

 src/pages/academicGenres/chart.vue

@@ -3,7 +3,7 @@
    style="width: 100%; height: 100%; display: flex; flex-direction: column"
  >
    <!-- 顶部导航 -->
    <headNav :idIndex="3 + ''" text="中医学术流派" />
    <headNav :idIndex="3 + ''" text="学术图谱" />
    <view class="Midde flex">
      <!-- <view class="MiddeBack">返回</view> -->
      <el-button class="MiddeBack flex flex-center" @click="goBack"

 src/pages/academicGenres/detail.vue

@@ -1,7 +1,7 @@
<template>
  <view class="bag">
    <!-- 顶部导航 -->
    <headNav idIndex="3" text="中医学术流派" />
    <headNav idIndex="3" text="学术图谱" />
    <view class="Midde flex">
      <!-- <view class="MiddeBack">返回</view> -->
      <el-button class="MiddeBack flex flex-center" @click="goBack"

 src/pages/academicGenres/index.vue

@@ -1,7 +1,7 @@
<template>
  <view style="width: 100%;height: 100%;display: flex;flex-direction: column;">
    <!-- 顶部导航 -->
    <headNav :idIndex="idIndex" text="中医学术流派" />
    <headNav :idIndex="idIndex" text="学术图谱" />
    <view id="line-chart" style="flex: 1;overflow: hidden;padding: 50px;"></view>
  </view>
</template>

 src/pages/academicSchools/index.vue

New file
@@ -0,0 +1,1289 @@
<template>
  <view
    style="width: 100%; height: 100%; display: flex; flex-direction: column"
  >
    <headNav :idIndex="'6'" text="学术流派" />
    <!-- 高级搜索 -->
    <view
      style="
        padding-left: 0.6rem;
        margin-top: 0.1rem;
        display: flex;
        position: relative;
      "
    >
      <advancedSearch
        @onSearch="onSearch"
        placehold="请输入关键字"
        :isAvancedTrue="false"
        :keyword="searchKey"
      />
      <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.name"
          >
            {{ item.name }}
          </li>
        </ul>
      </view>
      <view v-if="isAdvancedSearch" class="searchDialog">
        <h3 style="margin-bottom: 0.2rem">高级搜索</h3>
        <el-form
          label-width="100px"
          :model="formData"
          ref="searchForm"
          size="mini"
        >
          <el-row>
            <el-col :span="8">
              <el-form-item label="姓名/别名：">
                <el-input v-model="formData.name"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="活动地：">
                <div class="selectActivelyBox" @click="selectActively">
                  <p v-if="formData.actively.length == 0">请选择活动地</p>
                  <el-tag
                    v-for="item in formData.actively"
                    :key="item.id"
                    size="small"
                    closable
                    >{{ item.name }}</el-tag
                  >
                </div>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="作品：">
                <el-input v-model="formData.works"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
              <el-form-item label="人物标签：">
                <el-select
                  multiple
                  style="width: 100%"
                  v-model="formData.personTags"
                  placeholder="请选择人物标签"
                >
                  <el-option
                    v-for="item in personTag"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="社会身份：">
                <el-select
                  multiple
                  style="width: 100%"
                  v-model="formData.socialIdentity"
                  placeholder="请选择社会身份"
                >
                  <el-option
                    v-for="item in socialDistinction"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="时期：">
                <el-select
                  multiple
                  style="width: 100%"
                  v-model="formData.period"
                  placeholder="请选择时期"
                >
                  <el-option
                    v-for="item in dynastyData"
                    :key="item.dynastyId"
                    :label="item.name"
                    :value="item.dynastyId"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <div style="text-align: right">
            <el-button type="primary" size="mini" @click="searchFun"
              >搜索</el-button
            >
            <el-button size="mini" @click="resetForm">重置</el-button>
          </div>
        </el-form>
      </view>
      <div v-if="showPerson" class="personDialog">
        <i
          class="el-icon-circle-close closeBtn"
          @click="
            () => {
              showPerson = false;
            }
          "
        ></i>
        <el-table :data="personList" style="width: 100%">
          <el-table-column prop="name" label="姓名">
            <template slot-scope="scope">
              <span
                style="color: #409eff; cursor: pointer"
                @click="
                  () => {
                    currentId = scope.row.id;
                    getData();
                  }
                "
                >{{ scope.row.name }}</span
              >
            </template>
          </el-table-column>
          <el-table-column prop="age" label="时代"> </el-table-column>
          <el-table-column prop="nativePlace" label="籍贯"> </el-table-column>
          <el-table-column prop="alias" label="别名"> </el-table-column>
          <el-table-column prop="division" label="医学分科"> </el-table-column>
        </el-table>
      </div>
    </view>

    <!-- 关系表地图 -->
    <div
      id="relation"
      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>
      <div
        v-if="loading"
        v-loading="loading"
        style="
          position: absolute;
          top: 30%;
          left: 0;
          right: 0;
          text-align: center;
          font-size: 0.2rem;
          color: #666;
        "
      ></div>
    </div>
    <div id="customDialog" class="customDialog">
      <div class="title">
        <span>{{ detailData.name }}</span>
        <span @click="closeDom">关闭</span>
      </div>
      <div class="content">
        <p>姓名：{{ detailData.name }}</p>
        <p>别名：{{ detailData.alias }}</p>
        <p>籍贯：{{ detailData.nativePlace }}</p>
        <p>医学分科： {{ detailData.medicalBranch }}</p>
        <p>小传：{{ detailData.biography }}</p>
      </div>
      <div class="btn" @click="spaceTimeArr(detailData.id)">查看更多>>></div>
    </div>
    <div id="schoolDialog" class="customDialog">
      <div class="title">
        <span>{{ detailData.name }}</span>
        <span @click="closeDom">关闭</span>
      </div>
      <div class="content">
        <p>姓名：{{ detailData.name }}</p>
        <p>别名：{{ detailData.alias }}</p>
        <p>籍贯：{{ detailData.nativePlace }}</p>
        <p>医学分科： {{ detailData.medicalBranch }}</p>
        <p>小传：{{ detailData.biography }}</p>
      </div>
      <div class="btn" @click="spaceTimeArr(detailData.id)">查看更多>>></div>
    </div>
    
    <el-drawer
      title="地址列表"
      :visible.sync="drawer"
      direction="rtl"
      :before-close="handleClose"
    >
      <span>我来啦!</span>
    </el-drawer>
  </view>
</template>

<script>
import {
  getPersonData,
  getHotSearch,
  getPDataStatistics,
  academicSearch,
  getPersonTag,
  getSocialDistinction,
  getDynastyAll
} from "@/api/index.js";
import * as echarts from "echarts";
export default {
  data() {
    return {
      loading: true,
      hotAciveIndex: "",
      currentId: 21682,
      // echarts数据
      nodes: [],
      // echarts两者的关系
      relationships: [],
      // 热门搜索
      hotKeyList: [],
      searchKey: "",
      // 分类
      categories: [
        {
          name: "亲属关系"
        },
        {
          name: "师承关系"
        },
        {
          name: "文献作品"
        },
        {
          name: "社会关系"
        },
        {
          name: "活动地"
        },
        {
          name: "学术流派"
        }
      ],
      // 当前人物信息
      ownInfo: null,
      detailData: {
        name: ""
      },
      isAdvancedSearch: false,
      formData: {
        name: "",
        actively: [],
        works: "",
        personTags: "",
        socialIdentity: "",
        period: ""
      },
      showPerson: false,
      personList: [],
      personPageInfo: {
        totalCount: 0,
        page: 1,
        limit: 10
      },
      personTag: [],
      socialDistinction: [],
      dynastyData: [],
      drawer: false,
      infoOfPersons: [],
      infoOfSchools: [],
      nodeDatas: [],
      links: []
    };
  },
  mounted() {
    this.getData();
    this.hotSearch();
    // 获取人物标签、社会身份
    this.getOptionInfo();
    // 监听窗口大小变化
    window.addEventListener("resize", this.relation);
  },
  onLoad(options) {
    this.searchKey = options.keyword;
  },
  methods: {
    getOptionInfo() {
      getDynastyAll().then((res) => {
        this.dynastyData = res.list;
      });
      getPersonTag().then((res) => {
        this.personTag = res.list;
      });
      getSocialDistinction().then((res) => {
        this.socialDistinction = res.list;
      });
    },
    resetForm(formName) {
      this.formData = {
        name: "",
        actively: [],
        works: "",
        personTags: "",
        socialIdentity: "",
        period: ""
      };
    },
    searchFun() {
      console.log(this.formData);
    },
    selectActively() {
      this.drawer = true;
    },
    handleClose(done) {
      done();
    },
    // 获取人物关系
    getPersonInfo(arr, str, newArr, order, type, parent) {
      for (let i = 0; i < arr.length; i++) {
        const ele = arr[i];
        const personInfo = this.infoOfPersons.find(
          (item) => item.id == ele.personId
        );
        if (personInfo?.id) {
          const obj = {
            personId: ele.personId,
            parentId: parent.id,
            relationTypeName: ele.relationTypeName,
            parentName: parent?.NAME[0]?.content1 ?? parent.parentName,
            name: personInfo?.NAME[0]?.content1,
            category: type,
            symbolSize: 15
          };
          if (order > 80) {
            order = 80;
          }
          if (str == "literatureList") {
            obj.relationTypeName = ele.literatureName;
          }
          if (str == "schoolList") {
            const nameData = this.infoOfSchools?.find(
              (i) => i.schoolId == ele.schoolId
            );
            obj.relationTypeName = nameData?.name[0];
          }
          if (str == "placeList") {
            obj.relationTypeName = ele.ancientName ?? ele.currentName;
          }
          newArr.push(obj);
          if (ele["kinList"] && ele["kinList"]?.length) {
            order += 15;
            this.getPersonInfo(
              ele["kinList"],
              "kinList",
              newArr,
              order,
              0,
              personInfo
            );
          }
          if (ele["teacherStudentList"] && ele["teacherStudentList"]?.length) {
            order += 15;
            this.getPersonInfo(
              ele["teacherStudentList"],
              "teacherStudentList",
              newArr,
              order,
              1,
              personInfo
            );
          }
          if (ele["literatureList"] && ele["literatureList"]?.length) {
            const data = this.changeLiterature(
              ele["literatureList"],
              "literatureList"
            );
            order += 15;
            this.getPersonInfo(
              data,
              "literatureList",
              newArr,
              order,
              2,
              personInfo
            );
          }

          if (ele["socialList"] && ele["socialList"]?.length) {
            const data = this.changeLiterature(ele["socialList"], "socialList");
            order += 15;
            this.getPersonInfo(
              data,
              "socialList",
              newArr,
              order,
              3,
              personInfo
            );
          }
          if (ele["placeList"] && ele["placeList"]?.length) {
            const data = this.changeLiterature(ele["placeList"], "placeList");
            order += 15;
            this.getPersonInfo(data, "placeList", newArr, order, 4, personInfo);
          }
          if (ele["schoolList"] && ele["schoolList"]?.length) {
            const data = this.changeLiterature(ele["schoolList"], "schoolList");
            order += 15;
            this.getPersonInfo(
              data,
              "schoolList",
              newArr,
              order,
              5,
              personInfo
            );
          }
        }
      }
    },

    // 处理数据
    changeLiterature(arr, str) {
      for (let i = 0; i < arr.length; i++) {
        const ele = arr[i];
        if (!ele.personId && ele.personList?.length) {
          ele.literatureList = [];
          ele.personId = this.ownInfo.id;
          if (ele["personList"] && ele["personList"]?.length) {
            for (let j = 0; j < ele["personList"].length; j++) {
              const item = ele["personList"][j];
              const data = item[str]?.map((e) => {
                return {
                  ...e,
                  personId: item.personId
                };
              });
              if (ele[str] && data?.length) {
                ele[str].push(...data);
              }
            }
          }
        }
      }
      return arr;
    },
    //数组去重
    deduplicateArray(arr, idKey) {
      // 使用一个辅助对象来跟踪已经见过的ID
      const seen = {};
      // 使用filter方法过滤数组
      const deduplicatedArray = arr.filter((item) => {
        // 获取当前对象的ID
        const id = item[idKey];
        // 如果ID在辅助对象中不存在，则将其添加到对象并返回true
        if (!seen[id]) {
          seen[id] = true;
          return true;
        }
        // 如果ID已经存在，返回false
        return false;
      });

      return deduplicatedArray;
    },

    // 查询详情
    getData() {
      this.loading = true;
      getPersonData(this.currentId).then((res) => {
        console.log("1111111111111", res);
        this.infoOfPersons = res.object.infoOfPersons;
        this.infoOfSchools = res.object.infoOfSchools;
        this.nodeDatas = [];
        this.links = [];
        this.handleData([res.object.personChain], null);
        console.log("this.nodeDatas", this.nodeDatas);
        console.log("this.links", this.links);
        this.loading = false;
        this.relation();
        // this.nodes = [];
        // this.relationships = [];
        // let kinData = [];
        // let teacher = [];
        // let literature = [];
        // let social = [];
        // let place = [];
        // let school = [];
        // if (res && res.success && res.object) {
        //   this.infoOfPersons = res.object?.infoOfPersons;
        //   this.infoOfSchools = res.object?.infoOfSchools;

        //   if (res.object?.personChain) {
        //     this.ownInfo = this.infoOfPersons.find(
        //       (item) => item.id == res.object?.personChain.personId
        //     );
        //     const obj = res.object?.personChain;
        //     if (obj.kinList?.length) {
        //       let newArr = [];
        //       this.categories.push({ name: "亲属关系" });
        //       this.getPersonInfo(
        //         obj.kinList,
        //         "kinList",
        //         newArr,
        //         1,
        //         0,
        //         this.ownInfo
        //       );
        //       kinData = [...newArr];
        //     }
        //     if (obj.teacherStudentList?.length) {
        //       this.categories.push({ name: "师承关系" });
        //       let newArr = [];
        //       this.getPersonInfo(
        //         obj.teacherStudentList,
        //         "teacherStudentList",
        //         newArr,
        //         1,
        //         1,
        //         this.ownInfo
        //       );
        //       teacher = [...newArr];
        //     }
        //     if (obj.literatureList?.length) {
        //       this.categories.push({ name: "文献作品" });
        //       let newArr = [];
        //       const data = this.changeLiterature(
        //         obj.literatureList,
        //         "literatureList"
        //       );
        //       this.getPersonInfo(
        //         data,
        //         "literatureList",
        //         newArr,
        //         1,
        //         2,
        //         this.ownInfo
        //       );
        //       literature = [...newArr];
        //       // console.log(literature, "literature");
        //     }
        //     if (obj.socialList?.length) {
        //       let newArr = [];
        //       this.categories.push({ name: "社会关系" });
        //       const data = this.changeLiterature(obj.socialList, "socialList");
        //       this.getPersonInfo(
        //         data,
        //         "socialList",
        //         newArr,
        //         1,
        //         3,
        //         this.ownInfo
        //       );
        //       social = [...newArr];
        //     }
        //     if (obj.placeList?.length) {
        //       this.categories.push({ name: "活动地" });
        //       let newArr = [];
        //       const data = this.changeLiterature(obj.placeList, "placeList");
        //       console.log(data, "place");
        //       this.getPersonInfo(data, "placeList", newArr, 1, 4, this.ownInfo);
        //       place = [...newArr];
        //     }
        //     if (obj.schoolList?.length) {
        //       this.categories.push({ name: "学术流派" });
        //       let newArr = [];
        //       const data = this.changeLiterature(obj.schoolList, "schoolList");
        //       this.getPersonInfo(
        //         data,
        //         "schoolList",
        //         newArr,
        //         1,
        //         5,
        //         this.ownInfo
        //       );
        //       school = [...newArr];
        //     }
        //   }
        //   const personData = [
        //     ...kinData,
        //     ...teacher,
        //     ...literature,
        //     ...social,
        //     ...place,
        //     ...school
        //   ];

        //   personData.forEach((item) => {
        //     this.nodes.push({
        //       name: item.name,
        //       id: item.personId,
        //       ...item
        //     });
        //     let obj = {
        //       source: item.parentName,
        //       target: item.name,
        //       relation: item.relationTypeName || "" // 如果存在 relationName 字段则使用，否则为空字符串
        //     };
        //     this.relationships.push(obj);
        //   });
        // }
      });
    },
    // 递归处理所有层级数据
    handleData(data, parent) {
      for (let i = 0; i < data.length; i++) {
        const item = data[i];
        // 处理node/link
        if (!parent) {
          // 当前人物
          item.mainId = item.personId + "_p";
          const mainPerson = this.infoOfPersons.find(
            (pItem) => pItem.id == item.personId
          );
          this.nodeDatas.push({
            id: item.mainId,
            name: mainPerson.NAME[0].content1,
            itemStyle: {
              color: "#244a7b"
            }
          });
        } else {
          switch (parent.thisType) {
            case 1:
              item.mainId = item.personId + "_p";
              if (
                this.nodeDatas.findIndex((cItem) => cItem.id == item.mainId) ==
                -1
              ) {
                const p = this.infoOfPersons.find(
                  (pItem) => pItem.id == item.personId
                );
                if (p) {
                  this.nodeDatas.push({
                    category: 0,
                    id: item.mainId,
                    name: p.NAME[0].content1
                  });
                }
              }
              this.links.push({
                source: item.mainId,
                target: parent.mainId,
                label: {
                  show: true,
                  formatter: item.relationTypeName,
                  color: "#2C2C2C",
                  fontSize: 14,
                  backgroundColor: "rgba(255, 255, 255, 1)",
                  padding: [3, 8],
                  borderRadius: 30,
                  position: "middle", // 设置标签文本在线的中间位置上居中显示
                  distance: -10 // 将标签放置在连接线上
                }
              });
              break;
            case 2:
              item.mainId = item.literatureId + "_l";
              if (
                this.nodeDatas.findIndex((cItem) => cItem.id == item.mainId) ==
                -1
              ) {
                this.nodeDatas.push({
                  category: 2,
                  id: item.mainId,
                  name: item.literatureName
                });
              }
              this.links.push({
                source: item.mainId,
                target: parent.mainId
              });
              break;
            case 3:
              item.mainId = item.ancientName + "_a";
              if (
                this.nodeDatas.findIndex((cItem) => cItem.id == item.mainId) ==
                -1
              ) {
                this.nodeDatas.push({
                  category: 4,
                  id: item.mainId,
                  name: item.ancientName
                });
              }
              this.links.push({
                source: item.mainId,
                target: parent.mainId
              });
              break;
            case 4:
              item.mainId = item.schoolId + "_s";
              if (
                this.nodeDatas.findIndex((cItem) => cItem.id == item.mainId) ==
                -1
              ) {
                const s = this.infoOfSchools.find(
                  (sItem) => sItem.schoolId == item.schoolId
                );
                if (s) {
                  this.nodeDatas.push({
                    category: 5,
                    id: item.mainId,
                    name: s.name[0]
                  });
                }
              }
              this.links.push({
                source: item.mainId,
                target: parent.mainId
              });
              break;
            case 5:
              item.mainId = item.personId + "_p";
              if (
                this.nodeDatas.findIndex((cItem) => cItem.id == item.mainId) ==
                -1
              ) {
                const p = this.infoOfPersons.find(
                  (pItem) => pItem.id == item.personId
                );
                if (p) {
                  this.nodeDatas.push({
                    category: 3,
                    id: item.mainId,
                    name: p.NAME[0].content1
                  });
                }
              }
              this.links.push({
                source: item.mainId,
                target: parent.mainId,
                label: {
                  show: true,
                  formatter: item.relationTypeName,
                  color: "#2C2C2C",
                  fontSize: 14,
                  backgroundColor: "rgba(255, 255, 255, 1)",
                  padding: [3, 8],
                  borderRadius: 30,
                  position: "middle", // 设置标签文本在线的中间位置上居中显示
                  distance: -10 // 将标签放置在连接线上
                }
              });
              break;
            case 6:
              item.mainId = item.personId + "_p";
              if (
                this.nodeDatas.findIndex((cItem) => cItem.id == item.mainId) ==
                -1
              ) {
                const p = this.infoOfPersons.find(
                  (pItem) => pItem.id == item.personId
                );
                if (p) {
                  this.nodeDatas.push({
                    category: 1,
                    id: item.mainId,
                    name: p.NAME[0].content1
                  });
                }
              }
              this.links.push({
                source: item.mainId,
                target: parent.mainId,
                label: {
                  show: true,
                  formatter: item.relationTypeName,
                  color: "#2C2C2C",
                  fontSize: 14,
                  backgroundColor: "rgba(255, 255, 255, 1)",
                  padding: [3, 8],
                  borderRadius: 30,
                  position: "middle", // 设置标签文本在线的中间位置上居中显示
                  distance: -10 // 将标签放置在连接线上
                }
              });
              break;
          }
        }

        // 亲属关系
        if (item.kinList && item.kinList.length) {
          this.handleData(item.kinList, { ...item, thisType: 1 });
        }
        // 文献作品
        if (item.literatureList && item.literatureList.length) {
          this.handleData(item.literatureList, { ...item, thisType: 2 });
        }
        // 活动地
        if (item.placeList && item.placeList.length) {
          this.handleData(item.placeList, { ...item, thisType: 3 });
        }
        // 学术流派
        if (item.schoolList && item.schoolList.length) {
          this.handleData(item.schoolList, { ...item, thisType: 4 });
        }
        // 社会关系
        if (item.socialList && item.socialList.length) {
          this.handleData(item.socialList, { ...item, thisType: 5 });
        }
        // 师承关系
        if (item.teacherStudentList && item.teacherStudentList.length) {
          this.handleData(item.teacherStudentList, { ...item, thisType: 6 });
        }
      }
    },

    // 关系图谱
    relation() {
      var chartDom = document.getElementById("relation");
      var myChart = echarts.init(chartDom);
      // 假设您有节点名称和它们之间的关系数据
      this.nodeDatas = this.nodeDatas.map((item) => {
        let size = 15;
        for (let i = 0; i < this.links.length; i++) {
          const linkItem = this.links[i];
          if (linkItem.source == item.id) {
            size += 5;
          }
          if (linkItem.target == item.id) {
            size += 5;
          }
        }
        return {
          ...item,
          symbolSize: size > 80 ? 80 : size
        };
      });

      let FontSize = 12; // 字体大小
      let BorderWidth = 2; // 边框大小
      let SymbolSize = 80; // 尺寸距离
      let Distance = 10;
      // 不同尺寸下修改echarts的字体
      if (window.innerWidth > 2560 && window.innerWidth <= 3840) {
        FontSize = 20;
        BorderWidth = 5;
        SymbolSize = 90;
        Distance = 33;
      } else if (window.innerWidth > 1920 && window.innerWidth <= 2560) {
        FontSize = 18;
        BorderWidth = 4;
        SymbolSize = 80;
        Distance = 22;
      } else if (window.innerWidth >= 1366 && window.innerWidth <= 1920) {
        FontSize = 14;
        BorderWidth = 4;
        SymbolSize = 70;
        Distance = 22;
      }
      var option;
      option = {
        legend: [
          {
            left: 20,
            top: 20,
            orient: "vertical",
            data: this.categories.map(function (a) {
              return a.name;
            })
          }
        ],
        series: [
          {
            type: "graph",
            legendHoverLink: false,
            layout: "force",
            symbolSize: 15,
            data: this.nodeDatas,
            links: this.links,
            categories: this.categories,
            roam: true,
            label: {
              show: true,
              position: "right",
              formatter: "{b}"
            },
            scaleLimit: {
              min: 0.4,
              max: 2
            },
            lineStyle: {
              color: "source",
              curveness: 0.2
            },
            emphasis: {
              focus: "adjacency",
              lineStyle: {
                width: 5
              }
            },
            force: {
              repulsion: 600,
              edgeLength: 300
            }
          }
        ],
        color: [
          "#5470c6",
          "#3dae7b",
          "#fac858",
          "#ee6666",
          "#ea7ccc",
          "#9a60b4"
        ]
      };
      // 设置点击事件监听
      myChart.off("click");
      myChart.on("click", (params) => {
        if (params.dataType === "node") {
          this.creatDom(params);
        }
      });
      myChart.setOption(option);
    },
    creatDom(params) {
      const id = params.data.id.split("_")[0];
      const type = params.data.id.split("_")[1];
      if (type == "p") {
        // 人
        const e = params.event;
        const div = document.getElementById("customDialog");
        div.style.display = "block";
        div.style.left = e.offsetX + 50 + "px";
        div.style.top = e.offsetY - 50 + "px";
        const data = this.infoOfPersons?.find(
          (i) => i.id == id
        );
        const obj = {
          id: id,
          name:
            data?.NAME?.map((e, i) => {
              i += 1;
              return e["content" + i];
            }).join("、") ?? "",
          alias:
            data?.ALIAS?.map((e, i) => {
              i += 1;
              return e["content" + i];
            }).join("、") ?? "",
          nativePlace:
            data?.NATIVE_PLACE?.map((e, i) => {
              i += 1;
              return e["content" + i];
            }).join("、") ?? "",
          medicalBranch:
            data?.MEDICAL_BRANCH?.map((e, i) => {
              i += 1;
              return e["content" + i];
            }).join("、") ?? "",
          biography: data?.BIOGRAPHY ?? ""
        };
        this.detailData = obj;
      }
      if (type == "s") {
        // 学派
        const e = params.event;
        const div = document.getElementById("schoolDialog");
        div.style.display = "block";
        div.style.left = e.offsetX + 50 + "px";
        div.style.top = e.offsetY - 50 + "px";
        const data = this.infoOfPersons?.find(
          (i) => i.id == id
        );
        const obj = {
          id: params.data.id,
          name:
            data?.NAME?.map((e, i) => {
              i += 1;
              return e["content" + i];
            }).join("、") ?? "",
          alias:
            data?.ALIAS?.map((e, i) => {
              i += 1;
              return e["content" + i];
            }).join("、") ?? "",
          nativePlace:
            data?.NATIVE_PLACE?.map((e, i) => {
              i += 1;
              return e["content" + i];
            }).join("、") ?? "",
          medicalBranch:
            data?.MEDICAL_BRANCH?.map((e, i) => {
              i += 1;
              return e["content" + i];
            }).join("、") ?? "",
          biography: data?.BIOGRAPHY ?? ""
        };
        this.detailData = obj;
      }
    },
    closeDom() {
      const div = document.getElementById("customDialog");
      div.style.display = "none";
    },
    // 基础搜索
    onSearch(val, index) {
      console.log(val);
      if (index !== undefined) {
        // 热门搜索关键字，直接查询数据
        this.searchKey = "";
        this.hotAciveIndex = index;
        this.currentId = val.text.id;
        this.getData();
      } else {
        this.hotAciveIndex = "";
        // 搜索先显示人物列表
        this.personPageInfo.page = 1;
        this.searchPerson(val.text);
      }
    },
    // 根据关键字检索人物
    searchPerson(key) {
      academicSearch({
        keyword: key,
        page: this.personPageInfo.page,
        pageSize: this.personPageInfo.limit
      }).then((res) => {
        this.personList = res.list.map((item) => {
          return {
            id: item.personId,
            name: item.name,
            age:
              item.periodList && item.periodList.length
                ? item.periodList[0].content2
                : "-",
            nativePlace:
              item.nativePlaceList && item.nativePlaceList.length
                ? item.nativePlaceList[0].content1
                : "-",
            alias:
              item.aliasList && item.aliasList.length
                ? item.aliasList[0].content2
                : "-",
            division:
              item.medicalBranchList && item.medicalBranchList.length
                ? item.medicalBranchList[0].content1
                : "-"
          };
        });
        this.showPerson = true;
      });
    },
    // 关系图 点击里面的元素
    spaceTimeArr(id) {
      // 关系图的数据
      uni.navigateTo({
        url: "/pages/character/detail?id=" + id
      });
    },
    // 获取朝代echarts的数据
    echartsArr() {
      getDataStatistics().then((res) => {
        res.object.dynastyStatistic.details.map((item, index) => {
          // this.dynasty.id = item.dynastyId
          // this.dynasty.name = item.dynastyName
          // this.dynasty.coord = item.count
          this.dynasty[index].id = item.dynastyId;
          this.dynasty[index].name = item.dynastyName;
          this.dynasty[index].coord = item.count;
        });
      });
    },
    // 热门搜索
    hotSearch() {
      getHotSearch().then((res) => {
        const indexList = Object.keys(res.object);
        indexList.sort((a, b) => parseInt(b) - parseInt(a));
        this.hotKeyList = indexList.map((item) => {
          return {
            id: item,
            name: res.object[item]
          };
        });
      });
    },
    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>

<style>
#relation {
  width: 100%;
  height: 100%;
  position: relative;
  background-image: url("../../static/image/characterRelationBg.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
}

.customDialog {
  width: 300px;
  min-height: 240px;
  display: none;
  position: fixed;
  z-index: 99999999;
  border-radius: 2px;
  background: #fff;
}

.customDialog .title {
  width: 100%;
  height: 35px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
  box-sizing: border-box;
  background-color: rgb(221, 232, 246);
  font-size: 14px;
}
.customDialog .title span:nth-child(1) {
  font-size: 16px;
  font-weight: 600;
}

.customDialog .title span:nth-child(2) {
  color: rgb(95, 127, 168);
  cursor: pointer;
}

.customDialog .content {
  padding: 15px;
  box-sizing: border-box;
}

.customDialog .content p {
  margin-bottom: 5px;
  display: -webkit-box; /* 显示多行文本容器 */
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2; /*显示行数*/
  overflow: hidden; /*隐藏多出部分文字*/
  text-overflow: ellipsis; /*用省略号代替多出部分文字*/
}

.customDialog .btn {
  display: flex;
  justify-content: center;
  align-items: center;
  color: rgb(95, 127, 168);
  cursor: pointer;
  font-size: 14px;
  height: 35px;
}

@media screen and (min-width: 2560px) and (max-width: 3840px) {
}

@media screen and (min-width: 1366px) and (max-width: 1920px) {
}

::v-deep .uni-input-placeholder {
  line-height: 1;
  font-size: 0.12rem;
}

::v-deep .ffff {
  border-radius: 0.5rem;
}

::v-deep .widget_button {
  border-radius: 0.5rem;
  margin: 0.02rem;
}

.hotSearch {
  font-size: 0.12rem;
  color: #2c2c2c;

  li {
    color: #244a7b;
    margin: 0 0.1rem;
    color: #244a7b;
    &.active {
      color: #027edc;
      font-weight: bold;
    }
  }
}

.searchDialog {
  position: absolute;
  top: 0.68rem;
  left: 0;
  right: 0;
  z-index: 999;
  padding: 0.1rem 0.4rem;
  background: #fff;
  min-height: 2rem;
}

.personDialog {
  position: absolute;
  top: 0.68rem;
  z-index: 999;
  padding: 0.1rem;
  background: #fff;
  border-radius: 6px;
  box-shadow: 0 0 10px -3px #000;
  .closeBtn {
    position: absolute;
    right: -10px;
    top: -10px;
    width: 24px;
    height: 24px;
    font-size: 24px;
    background-color: #fff;
    border-radius: 50%;
    color: #f56c6c;
    cursor: pointer;
  }
}

.selectActivelyBox {
  cursor: pointer;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  padding: 0 0.12rem;
  font-size: 12px;
  color: #c0c4cc;
}

.el-drawer__wrapper {
  top: 0.86rem;
}

::v-deep .el-drawer__open .el-drawer.rtl {
  width: 50% !important;
}
</style>

 src/pages/changePassword/changePassword.vue

@@ -16,7 +16,7 @@
              font-family: cursive;
              font-weight: bold;
            "
            >中国医学人物知识库</text
            >中国历代医学人物知识库</text
          >
        </view>
        <view></view>
@@ -233,25 +233,29 @@
      // 书籍数据
      listData: [
        {
          name: "中医人物数据库",
          name: "历代人物",
          id: 1
        },
        {
          name: "世医医家数据库",
          name: "家学传承",
          id: 2
        },
        {
          name: "中医学术流派",
          name: "学术流派",
          id: 6
        },
        {
          name: "学术图谱",
          id: 3
        },
        {
          name: "中医地域医谱",
          name: "地域图谱",
          id: 4
        },
        {
          name: "中医医事制度",
          id: 5
        }
        // {
        //   name: "中医医事制度",
        //   id: 5
        // }
      ]
    };
  },

 src/pages/character/detail.vue

@@ -1,6 +1,6 @@
<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
@@ -239,7 +239,7 @@
            class="box-card"
            style="min-height: 1.91rem; margin: 0.2rem 0"
          >
            <el-tabs ref="tabs" v-model="activeName" @tab-click="handleClick">
            <el-tabs ref="tabs" v-model="activeName">
              <el-tab-pane label="代表著作" data-id="1" name="representative">
                <Table1
                  :data="tableData1"
@@ -534,13 +534,13 @@
    // 获取时空地图
    this.getMapInfo();

    this.$nextTick(() => {
      // 获取第一个选项卡的 DOM 元素
      const firstTab = this.$refs.tabs.$el.querySelector(
        ".el-tabs__active-bar"
      );
      firstTab.style.transform = "translateX(" + "-.2rem" + ")";
    });
    // this.$nextTick(() => {
    //   // 获取第一个选项卡的 DOM 元素
    //   const firstTab = this.$refs.tabs.$el.querySelector(
    //     ".el-tabs__active-bar"
    //   );
    //   firstTab.style.transform = "translateX(" + "-.2rem" + ")";
    // });

    // 监听窗口大小变化
    window.addEventListener("resize", this.relation);
@@ -992,30 +992,6 @@
        .join("&");
      window.open(`#/pages/fileDetail/index?${queryString}`);
    },
    handleClick(tab) {
      let index = tab.$attrs["data-id"] - 1;
      this.$nextTick(() => {
        let firstTab = this.$refs.tabs.$el.querySelector(
          ".el-tabs__active-bar"
        );
        if (index == 0) {
          firstTab.style.transform = "translateX(-" + 0.2 + "rem)";
        } else if (index == 1) {
          firstTab.style.transform = "translateX(" + 0.85 * index + "rem)";
        } else if (index == 2) {
          firstTab.style.transform = "translateX(" + 0.93 * index + "rem)";
        } else if (index == 3) {
          firstTab.style.transform = "translateX(" + 0.95 * index + "rem)";
        } else if (index == 4) {
          firstTab.style.transform = "translateX(" + 0.97 * index + "rem)";
        } else {
          let firstTab = this.$refs.tabs.$el.querySelector(
            ".el-tabs__active-bar"
          );
          firstTab.style.transform = "translateX(" + "-.2" + "rem)";
        }
      });
    },
    // 关系图谱
    relation() {
      var chartDom = document.getElementById("relation");
@@ -1367,9 +1343,7 @@
  width: 70%;
}

::v-deep .el-tabs__content {
  line-height: 1;
}


/* 个人小传 ------------------*/
::v-deep .el-dialog__header {
@@ -1496,10 +1470,12 @@
}

::v-deep .el-tabs__item {
  width: 1rem;
  width: 1.4rem;
  font-size: 0.14rem;
  line-height: 0.4rem;
  height: 0.4rem;
  padding: 0 20px !important;
  text-align: center;
}

::v-deep .el-tabs__header {
@@ -1507,12 +1483,8 @@
}

::v-deep .el-tabs__active-bar {
  /* 设置滚动条宽度 */
  width: 1rem !important;
  height: 0.03rem !important;
  background-color: #597aa5;
  transform: translateX(-20px);
  /* margin-top: .09rem; */
}

::v-deep .el-tabs__active-bar {

 src/pages/character/index.vue

@@ -2,9 +2,9 @@
  <view
    style="width: 100%; height: 100%; display: flex; flex-direction: column"
  >
    <headNav idIndex="1" text="中医人物数据库" />
    <headNav idIndex="1" text="历代人物" />
    <!-- 高级搜索 -->
    <view style="margin: 0.35rem 0 0.16rem 0">
    <view style="margin-top: 0.1rem">
      <advancedSearch
        @onSearch="onSearch"
        @onSubmit="onSubmit"
@@ -32,7 +32,7 @@
    <!-- 关系表地图 -->
    <view
      id="relation"
      style="margin-top: 0.2rem; flex: 1; width: 100%; position: relative"
      style="margin-top: 0.1rem; flex: 1; width: 100%; position: relative"
    >
      <div
        v-if="!loading && relationships.length == 0"
@@ -348,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;
@@ -411,7 +411,6 @@
          }
        };
      });

      var option;
      option = {
        title: {

 src/pages/characterMap/characterMap.vue

@@ -2,7 +2,7 @@
  <view
    style="width: 100%; height: 100%; display: flex; flex-direction: column"
  >
    <headNav :idIndex="1 + ''" text="中医人物数据库" />
    <headNav :idIndex="1 + ''" text="历代人物" />
    <el-button class="getBack" @click="goBack">返回</el-button>
    <view style="flex: 1; overflow: hidden">
      <!-- 地图 -->

 src/pages/fileDetail/index.vue

@@ -1,6 +1,6 @@
<template>
  <view class="pageBox">
    <headNav :idIndex="1 + ''" text="中医人物数据库" />
    <headNav :idIndex="1 + ''" text="历代人物" />
    <div class="contentBox">
      <pre v-if="options.outputType == 'XML' || options.outputType == 'JSON'">
        <code>

 src/pages/forgetPass/forgetPass.vue

@@ -16,7 +16,7 @@
              font-family: cursive;
              font-weight: bold;
            "
            >中国医学人物知识库</text
            >中国历代医学人物知识库</text
          >
        </view>
        <view></view>

 src/pages/index/index.vue

@@ -19,7 +19,7 @@
                  font-family: cursive;
                  font-weight: bold;
                "
                >中国医学人物知识库</text
                >中国历代医学人物知识库</text
              >
            </view>
          </view>
@@ -42,7 +42,7 @@
                @confirm="toggleSearch"
                type="text"
                style="
                  margin-left: 0.05rem;
                  margin-left: 0.16rem;
                  color: #2c2c2c;
                  flex: 1;
                  background-color: #fff;
@@ -55,11 +55,7 @@
              <view
                class="search-logo"
                @click="toggleSearch"
                style="
                  background-color: #244a7b;
                  border-radius: 50%;
                  margin-top: -4rpx;
                "
                style="background-color: #244a7b; border-radius: 50%"
              ></view>
            </view>
            <el-dropdown
@@ -121,7 +117,7 @@
              >{{ item.name }}</span
            >
            <view
              class="flex flex-content"
              class="detailBtn flex flex-content"
              style="
                width: 0.5rem;
                height: 0.5rem;
@@ -154,7 +150,7 @@
import Footer1 from "@/components/footer/footer.vue";
export default {
  components: {
    Footer1
    Footer1,
  },
  data() {
    return {
@@ -173,60 +169,63 @@
        pass: "",
        checkPass: "",
        cellphoneORmailbox: "",
        verifyCode: ""
        verifyCode: "",
      },
      // 登录用户账号
      loginData: {
        // 账号
        loginID: "",
        pass: ""
        pass: "",
      },
      // 重置密码
      resetDataPass: {
        cellphoneORmailbox: "",
        verifyCode: "",
        newPass: "",
        checkPass: ""
        checkPass: "",
      },
      // 修改密码
      amendDataPass: {
        loginID: "",
        originalPass: "",
        newPass: "",
        checkPass: ""
        checkPass: "",
      },
      // 书籍数据
      listData: [
        {
          name: "中医人物数据库",
          id: 1
          name: "历代人物",
          id: 1,
        },
        {
          name: "世医医家数据库",
          id: 2
          name: "家学传承",
          id: 2,
        },
        {
          name: "中医学术流派",
          id: 3
          name: "学术流派",
          id: 6,
        },
        {
          name: "中医地域医谱",
          id: 4
          name: "学术图谱",
          id: 3,
        },
        {
          name: "中医医事制度",
          id: 5
        }
      ]
          name: "地域图谱",
          id: 4,
        },
        // {
        //   name: "中医医事制度",
        //   id: 5
        // }
      ],
    };
  },
  onLoad() {

    uni.getSystemInfo({
      success: function (info) {
        // console.log('屏幕的宽度：' + info.windowWidth);
        // console.log('屏幕的高度：' + info.windowHeight);
      }
      },
    });
  },
  mounted() {
@@ -237,7 +236,7 @@
    // 搜索
    onSearch(val) {
      uni.navigateTo({
        url: "/pages/knowledgeBase/knowledgeBase?keyword=" + val.text
        url: "/pages/knowledgeBase/knowledgeBase?keyword=" + val.text,
      });
    },
    // 搜索
@@ -248,7 +247,7 @@
        if (this.searchInput.trim() !== "") {
          uni.navigateTo({
            url:
              "/pages/knowledgeBase/knowledgeBase?keyword=" + this.searchInput
              "/pages/knowledgeBase/knowledgeBase?keyword=" + this.searchInput,
          });
        }
        this.searchInput = "";
@@ -261,26 +260,30 @@
      if (item.id == 1) {
        uni.navigateTo({
          // url: '/pages/character/detail?id=' + item.id
          url: "/pages/character/index?id=" + item.id
          url: "/pages/character/index?id=" + item.id,
        });
      } else if (item.id == 2) {
        uni.navigateTo({
          url: "/pages/inherit/index?id=" + item.id
          url: "/pages/inherit/index?id=" + item.id,
        });
        // uni.navigateTo({
        //     url: '/pages/shiyiHome/shiyiHome'
        // })
      } else if (item.id == 3) {
        uni.navigateTo({
          url: "/pages/academicGenres/index?id=" + item.id
          url: "/pages/academicGenres/index?id=" + item.id,
        });
      } else if (item.id == 4) {
        uni.navigateTo({
          url: "/pages/territory/territory?id=" + item.id
          url: "/pages/territory/territory?id=" + item.id,
        });
      } else if (item.id == 5) {
        uni.navigateTo({
          url: "/pages/TcmSystem/TcmSystem?id=" + item.id
          url: "/pages/TcmSystem/TcmSystem?id=" + item.id,
        });
      } else if (item.id == 6) {
        uni.navigateTo({
          url: "/pages/academicSchools/index",
        });
      }
    },
@@ -312,7 +315,7 @@
          // token 不存在
          this.isCommand = false;
          uni.navigateTo({
            url: "/pages/Login/Login"
            url: "/pages/Login/Login",
          });
        }
      } else if (index == 3) {
@@ -323,7 +326,7 @@
    handleCommand(int) {
      if (int == 1) {
        uni.navigateTo({
          url: "/pages/changePassword/changePassword"
          url: "/pages/changePassword/changePassword",
        });
      } else if (int == 2) {
        uni.showModal({
@@ -340,15 +343,15 @@
                //退出成功！并跳转到其他页面
                this.$message.success("退出成功");
                uni.reLaunch({
                  url: "/pages/Login/Login"
                  url: "/pages/Login/Login",
                });
              });
            }
          }
          },
        });
      }
    }
  }
    },
  },
};
</script>

@@ -568,6 +571,14 @@
    height: 80% !important;
  }

  .Search ::v-deep .ffff {
    opacity: 0.8;
  }

  .Search ::v-deep .ffff:focus-within {
    opacity: 1;
  }

  ::v-deep .searchBg {
    width: 0.35rem;
    height: 0.35rem;
@@ -745,4 +756,11 @@
::v-deep .cleanupBtn{
  right: 52px !important;
}

.secretary li .detailBtn {
  transition: translate 0.3s;
}
.secretary li .detailBtn:hover {
  translate: 0 -5px;
}
</style>

 src/pages/inherit/index.vue

@@ -3,7 +3,7 @@
    <headNav
      idIndex="2"
      :searchBg="false"
      text="中医世医传承数据库"
      text="家学传承"
      bg="/static/image/topBg1.png"
      bg1="/static/image/line1.png"
    />
@@ -42,8 +42,17 @@
          >✖</span
        >
        <button @click="search">搜索</button>
        <span
          class="openSearch"
          @click="
            () => {
              openSearch = !openSearch;
            }
          "
          >高级搜索{{ openSearch ? "∧" : "∨" }}</span
        >
      </div>
      <div class="dynasty">
      <div class="dynasty" v-if="openSearch">
        <div style="font-weight: 700; line-height: 0.25rem">筛选朝代</div>
        <div class="filterList">
          <div
@@ -62,7 +71,7 @@
          </div>
        </div>
      </div>
      <div class="condition">
      <div class="condition"  v-if="openSearch">
        <div style="font-weight: 700; line-height: 0.25rem">条件选择</div>
        <div class="filterList">
          <div class="conditionItem" @click="changeCondition(3)">
@@ -95,7 +104,7 @@
          </div>
        </div>
      </div>
      <div style="padding-left: 0.5rem; margin-top: 20px">
      <div style="padding-left: 0.5rem; margin-top: 0.1rem">
        共 {{ totalCount }}个世医
      </div>
    </div>
@@ -122,7 +131,13 @@
        :style="{ top: toolTop, left: toolLeft }"
      >
        <div class="toolItem" @click="gotoDetail(1)">个人信息</div>
        <div class="toolItem" @click="gotoDetail(2)">世医文化</div>
        <div
          class="toolItem"
          style="position: relative; top: -40px"
          @click="gotoDetail(2)"
        >
          世医文化
        </div>
        <div class="toolItem" @click="gotoDetail(3)">世医传承</div>
      </div>
    </div>
@@ -151,7 +166,8 @@
      toolTop: 0,
      toolLeft: 0,
      toolInfo: {},
      totalCount: 0
      totalCount: 0,
      openSearch: false
    };
  },
  onLoad(options) {
@@ -288,22 +304,36 @@
              friction: 0.1,
              repulsion: 500,
              edgeLength: 6
            },
            selectedMode: "single",
            select: {
              itemStyle: {
                color: "#e8f3ff",
                borderColor: "#284e74",
                borderWidth: "3"
              }
            }
          }
        ]
      };
      let selectData = [];
      //进行渲染
      myChart.setOption(option);
      myChart.getZr().on("click", (params) => {
        if (!params.target) {
          this.showTool = false;
        }
      });
      // myChart.getZr().on("click", (params) => {
      //   console.log(params);
      //   console.log(selectData);
      //   if (!params.target) {
      //     this.showTool = false;
      //   }
      // });
      myChart.on("click", (params) => {
        if (selectData.length > 0) {
          let x = params.event.target.transform[4];
          let y = params.event.target.transform[5];
        if (params.componentType === "series") {
          this.showTool = true;
          this.toolTop = params.event.offsetY + "px";
          this.toolLeft = params.event.offsetX + "px";
            this.toolTop = y - 70 + "px";
            this.toolLeft = x - 163 + "px";
          this.toolInfo = {
            id: params.data.identifier,
            name: encodeURIComponent(params.data.name)
@@ -311,6 +341,22 @@
        } else {
          this.showTool = false;
        }
        }
      });
      myChart.on("selectchanged", (params) => {
        if (params.fromAction == "select") {
          selectData = params.selected[0].dataIndex;
        } else {
          selectData = [];
          this.showTool = false;
        }
      });
      myChart.on("graphroam", (params) => {
        this.showTool = false;
        myChart.dispatchAction({
          type: "unselect",
          dataIndex: selectData
        });
      });
    },
    gotoDetail(type) {
@@ -421,6 +467,7 @@
  font-size: 0.12rem;
  cursor: pointer;
  background-color: #fff;
  display: inline-block;
}
.toolItem:hover {
  background-color: #efefef;
@@ -460,16 +507,24 @@
  border-radius: 50px;
  margin-right: 10rpx;
}

.searchBox .openSearch {
  position: absolute;
  right: -100px;
  font-size: 14px;
  cursor: pointer;
}

.dynasty {
  display: flex;
  margin-top: 0.2rem;
  width: 100%;
  padding: 0.1rem 0.5rem;
  padding: 0 0.5rem;
}
.condition {
  display: flex;
  width: 100%;
  padding: 0.1rem 0.5rem;
  padding: 0 0.5rem;
}
.filterList {
  flex: 1;
@@ -482,7 +537,6 @@
  box-shadow: 1px 1px 5px #888888;
  align-items: center;
  justify-content: center;
  width: 1.4rem;
  height: 0.3rem;
  margin-left: 0.2rem;
  border-radius: 0.13rem;
@@ -490,13 +544,14 @@
  margin-top: 0.02rem;
  margin-bottom: 0.1rem;
  cursor: pointer;
  padding: 0 0.1rem;
}
.conditionItem {
  display: flex;
  box-shadow: 1px 1px 5px #888888;
  align-items: center;
  justify-content: center;
  width: 1.6rem;
  padding: 0 0.1rem;
  height: 0.3rem;
  float: left;
  margin-left: 0.2rem;
@@ -517,7 +572,7 @@
}
.filterText {
  margin-left: 10px;
  font-size: 0.16rem;
  font-size: 0.14rem;
}
.fontColor {
  color: #827e44 !important;

 src/pages/inherit/list.vue

@@ -3,7 +3,7 @@
    <headNav
      idIndex="2"
      :searchBg="false"
      text="中医世医传承数据库"
      text="家学传承"
      bg="/static/image/topBg1.png"
      bg1="/static/image/line1.png"
    />
@@ -52,6 +52,33 @@
        <view class="icon" style="background: #244a7b"></view>
        <view>社会关系</view>
      </view>
      <view class="viewChangeBtn">
        <p>{{viewType == 1 ? "横版视图" : "竖版视图"}}</p>
        <view class="imgBox">
          <img
            v-if="viewType == 1"
            src="@/static/image/inherit/1-a.png"
            alt=""
          />
          <img
            v-else
            src="@/static/image/inherit/1.png"
            @click="viewChange(1)"
          />
        </view>
        <view class="imgBox">
          <img
            v-if="viewType == 2"
            src="@/static/image/inherit/2-a.png"
            alt=""
          />
          <img
            v-else
            src="@/static/image/inherit/2.png"
            @click="viewChange(2)"
          />
        </view>
      </view>
    </view>
    <!-- echarts图 -->
    <div v-if="showType == 1" class="barChart" id="barChart"></div>
@@ -98,7 +125,7 @@

import {
  inheritMedicalCultureList,
  inheritMedicalRelationList,
  inheritMedicalRelationList
} from "@/api/index.js";

export default {
@@ -115,6 +142,7 @@
      culture1: null,
      culture2: null,
      culture3: null,
      viewType: 1
    };
  },
  onLoad(options) {
@@ -126,13 +154,13 @@
    if (this.type) {
      this.changeType(this.type);
    }
    this.getData();
    this.getData(this.socialMapping);
  },
  methods: {
    getData() {
    getData(socialFlag) {
      inheritMedicalRelationList({
        identifier: this.idIndex,
        socialFlag: true,
        socialFlag: socialFlag
      }).then((res) => {
        this.dataList = res.object;
        // 处理节点颜色
@@ -204,12 +232,17 @@

      // 世医文化
      inheritMedicalCultureList({
        identifier: this.idIndex,
        identifier: this.idIndex
      }).then((res) => {
        this.culture1 = res.list.find((item) => item.typeName == "家风");
        this.culture2 = res.list.find((item) => item.typeName == "医德");
        this.culture3 = res.list.find((item) => item.typeName == "家训");
      });
    },
    viewChange(data) {
      this.viewType = data;
      document.getElementById("barChart").innerHTML = "";
      this.initG6Chart();
    },
    showSocialMapping() {
      this.socialMapping = !this.socialMapping;
@@ -217,9 +250,10 @@
        this.socialRelationsData(this.dataList.children);
        console.log(this.dataList, "dataList");
        document.getElementById("barChart").innerHTML = "";
        this.initG6Chart();
        // this.initG6Chart();
        this.getData(this.socialMapping);
      } else {
        this.getData();
        this.getData(this.socialMapping);
      }
      // this.initBarChart(newDataList, newLinks);
    },
@@ -260,8 +294,7 @@
              : "",
            relationType:
              f?.relationInfo?.relationType == "社会关系" ? true : false,
            children:
              f.children.length > 0 ? this.getChartData(f.children) : [],
            children: f.children.length > 0 ? this.getChartData(f.children) : []
          };
        });
        return G6Data;
@@ -277,12 +310,12 @@
        id: this.dataList.name,
        name:this.dataList.name,
        style: {
          fill: "red",
          fill: "red"
        },
        children:
          this.dataList?.children.length > 0
            ? this.getChartData(this.dataList.children)
            : [],
            : []
      };
      const width = barChart.scrollWidth;
      const height = barChart.scrollHeight || 500;
@@ -294,15 +327,18 @@
        modes: {
          default: [
            "drag-canvas",
            "zoom-canvas",
          ],
            "zoom-canvas"
          ]
        },
        defaultNode: {
          size: 30,
          size: 30
        },
        defaultEdge: {
          type: this.viewType == 1 ? "cubic-horizontal" : "cubic-vertical"
        },
        layout: {
          type: "compactBox",
          direction: "LR",
          direction: this.viewType == 1 ? "LR" : "TB",
          getId: function getId(d) {
            return d.id;
          },
@@ -312,24 +348,25 @@
          getWidth: function getWidth() {
            return 16;
          },
          getVGap: function getVGap() {
            return 30;
          getVGap: () => {
            console.log(this.viewType);
            return this.viewType == 1 ? 20 : 110;
          },
          getHGap: function getHGap() {
            return 100;
          },
        },
          getHGap: () => {
            return this.viewType == 1 ? 100 : 50;
          }
        }
      });
      this.graph.node(function (node) {
        return {
          size: 38,
          anchorPoints: [
            [0, 0.5],
            [1, 0.5],
            [1, 0.5]
          ],
          style: {
            fill: node.relationType ? "#EDF4FF" : "#FCEFE3",
            stroke: node.relationType ? "#5E7AA7" : "#D3791E",
            stroke: node.relationType ? "#5E7AA7" : "#D3791E"
          },
          label: node.name,
          labelCfg: {
@@ -337,16 +374,16 @@
            offset: 5,
            style: {
              fill: "#000",
              fontSize: 12,
            },
          },
              fontSize: 12
            }
          }
        };
      });
      this.graph.edge(function (node) {
        return {
          type: "cubic-horizontal",
          color: "#A3B1BF",
          label: node.target._cfg?.model.relationInfo,
          label: node.target._cfg?.model.relationInfo
        };
      });
      this.graph.on("node:click", (e) => {
@@ -354,11 +391,11 @@
        console.log("单击", nodeItem);
        if (nodeItem?.personId) {
          uni.navigateTo({
            url: "/pages/character/detail?id=" + nodeItem?.personId,
            url: "/pages/character/detail?id=" + nodeItem?.personId
          });
        } else {
          uni.navigateTo({
            url: "/pages/character/detail?id=" + this.idIndex,
            url: "/pages/character/detail?id=" + this.idIndex
          });
        }
      });
@@ -400,7 +437,7 @@
          image: "./static/image/WMBg.png",
          repeat: "repeat-x", // 是否平铺，可以是 'repeat-x', 'repeat-y', 'no-repeat'
          size: "100% 100%", // 背景图片的尺寸，可以是百分比或者像素
          position: "center center", // 背景图片的位置，可以是 top, bottom, middle 或者百分比
          position: "center center" // 背景图片的位置，可以是 top, bottom, middle 或者百分比
        },
        tooltip: {},
        animationEasingUpdate: "quinticInOut",
@@ -413,7 +450,7 @@
            label: {
              show: true,
              color: "black", // 设置节点文字颜色为黑色
              fontSize: FontSize, // 设置文字大小
              fontSize: FontSize // 设置文字大小
            },
            edgeSymbol: ["circle", "arrow"],
            edgeSymbolSize: [4, 10],
@@ -421,17 +458,17 @@
            lineStyle: {
              opacity: 0.9,
              width: 2,
              curveness: 0.3,
              curveness: 0.3
            },
            force: {
              initLayout: null,
              // gravity: 0
              repulsion: 600,
              edgeLength: 400,
              edgeLength: 400
            },
            expandAndCollapse: false,
          },
        ],
            expandAndCollapse: false
          }
        ]
      };
      //进行渲染
      myChart.setOption(option);
@@ -439,8 +476,8 @@
    // 返回按钮
    goBack() {
      this.$router.go(-1);
    },
  },
    }
  }
};
</script>
<style scoped>
@@ -503,6 +540,29 @@
  margin-right: 0.06rem;
}

.viewChangeBtn {
  position: absolute;
  right: 1.2rem;
  top: 0.17rem;
  display: flex;
}

.viewChangeBtn p{
  line-height: 0.36rem;
  margin-right: 0.2rem;
}

.viewChangeBtn .imgBox {
  width: 0.36rem;
  height: 0.36rem;
}

.viewChangeBtn img {
  width: 100%;
  height: 100%;
  cursor: pointer;
}

.legend {
  display: flex;
  align-items: center;

 src/pages/knowledgeBase/knowledgeBase.vue

@@ -1,7 +1,7 @@
<template>
  <view>
    <!-- 顶部 -->
    <headNav idIndex="0" text="中国医学人物知识库" />
    <headNav idIndex="0" text="中国历代医学人物知识库" />
    <!-- 搜索 -->
    <view class="flex flex-center Search">
      <!-- <luanqing-search class="search_bar" @onSearch="onSearch"></luanqing-search> -->
@@ -309,12 +309,12 @@
              }
            ]
          },
          {
            type: "input",
            label: "职官",
            name: "official",
            value: ""
          },
          // {
          //   type: "input",
          //   label: "职官",
          //   name: "official",
          //   value: ""
          // },
          {
            type: "select",
            label: "性别",
@@ -341,12 +341,12 @@
            name: "dynasty",
            value: ""
          },
          {
            type: "select",
            label: "机构",
            name: "institution",
            options: []
          }
          // {
          //   type: "select",
          //   label: "机构",
          //   name: "institution",
          //   options: []
          // }
        ]
      },

@@ -744,21 +744,21 @@
    CurrentChange(val) {
      if (this.CurrentPage != val) {
        this.CurrentPage = val;
        this.onSearch("");
        this.onSearch({ text: this.keywords });
      }
    },
    // 上一页
    PrevClick(val) {
      if (this.CurrentPage != val) {
        this.CurrentPage = val;
        this.onSearch("");
        this.onSearch({ text: this.keywords });
      }
    },
    // 下一页
    NextClick(val) {
      if (this.CurrentPage != val) {
        this.CurrentPage = val;
        this.onSearch("");
        this.onSearch({ text: this.keywords });
      }
    }
  }

 src/pages/repository/repository.vue

@@ -1,6 +1,6 @@
<template>
    <view class="relative">
        <headNav :idIndex="idIndex" text="中医人物数据库" />
        <headNav :idIndex="idIndex" 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">

 src/pages/shiyiHome/shiyiHome.vue

@@ -1,6 +1,6 @@
<template>
    <view>
        <headNav :idIndex="idIndex" :searchBg="false" text="中医世医传承数据库" bg="/static/image/topBg1.png"
        <headNav :idIndex="idIndex" :searchBg="false" text="家学传承" bg="/static/image/topBg1.png"
            bg1="/static/image/line1.png" />
    </view>
</template>

 src/pages/territory/territory.vue

@@ -1,7 +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: 20px 0 34px; justify-content: flex-start"
@@ -13,7 +13,7 @@
        :isAvancedTrue="false"
        :keyword="keyword"
      />
      <ul class="flex">
      <!-- <ul class="flex">
        <li v-for="(item, index) in dynasty" :key="item.id">
          <view
            @click="SchoolClick(item.id)"
@@ -46,7 +46,7 @@
            }}</view>
          </view>
        </li>
      </ul>
      </ul> -->
    </view>
    <!-- 搜索后的弹框 -->
    <el-card
@@ -75,7 +75,7 @@
          >关闭</el-button
        >
      </div>
      <view style="overflow: auto; height: 2.5rem">
      <view style="overflow: auto; height: 2.5rem" v-loading="loading">
        <div
          v-if="!loading && SearchArr.length == 0"
          style="
@@ -94,6 +94,7 @@
          class="information"
          v-for="(item, index) in SearchArr"
          :key="index"
          style="cursor: pointer"
          @click="showCard(item)"
        >
          <li style="font-size: 0.18rem; font-weight: 700">
@@ -116,12 +117,102 @@

    <div class="mapBox" id="mapBox" v-loading="mapLoading">
      <div id="map"></div>
      <el-card
        class="box-card echartsTrue"
        v-show="isEchTrue"
      <div
        class="markerDataListBox"
        v-if="isEchTrue"
        style="overflow: inherit; width: 3rem; position: absolute; z-index: 999"
        :style="{ top: isTop, left: isLeft }"
      >
        <div class="markerDataList">
          <div class="markerDataContentBox">
            <div v-if="currentMark.length == 1">
              <ul class="information">
                <li>
                  姓名:
                  {{ currentMark[0].name ? currentMark[0].name : "-" }}
                </li>
                <li>
                  别名:
                  {{ currentMark[0].nikeName ? currentMark[0].nikeName : "-" }}
                </li>
                <li>
                  籍贯:
                  {{
                    currentMark[0].nativePlace
                      ? currentMark[0].nativePlace
                      : "-"
                  }}
                </li>
                <li>
                  医学分科:
                  {{ currentMark[0].barnch ? currentMark[0].barnch : "-" }}
                </li>
                <li
                  class="medicalLi"
                  :title="currentMark[0].medical ? currentMark[0].medical : '-'"
                >
                  小传:
                  {{ currentMark[0].medical ? currentMark[0].medical : "-" }}
                </li>
              </ul>
              <el-button
                class="flex"
                @click="viewMoreClick(currentMark[0])"
                style="
                  width: 100%;
                  padding: 3px 0;
                  font-size: 0.12rem;
                  color: #597aa5;
                "
                type="text"
                >查看更多>></el-button
              >
            </div>
            <el-collapse v-else>
              <el-collapse-item
                v-for="(item, index) in currentMark"
                :name="index"
                :key="index"
              >
                <template slot="title">
                  <div class="titleImg">
                    <i class="el-icon-user"></i>
                  </div>
                  <span>{{ item.name }}</span>
                </template>
                <ul class="information">
                  <li>
                    姓名:
                    {{ item.name ? item.name : "-" }}
                  </li>
                  <li>别名: {{ item.nikeName ? item.nikeName : "-" }}</li>
                  <li>籍贯: {{ item.nativePlace ? item.nativePlace : "-" }}</li>
                  <li>医学分科: {{ item.barnch ? item.barnch : "-" }}</li>
                  <li
                    class="medicalLi"
                    :title="item.medical ? item.medical : '-'"
                  >
                    小传: {{ item.medical ? item.medical : "-" }}
                  </li>
                </ul>
                <el-button
                  class="flex"
                  @click="viewMoreClick(item)"
                  style="
                    width: 100%;
                    padding: 3px 0;
                    font-size: 0.12rem;
                    color: #597aa5;
                  "
                  type="text"
                  >查看更多>></el-button
                >
              </el-collapse-item>
            </el-collapse>
          </div>
        </div>
      </div>
      <!-- <el-card class="box-card echartsTrue" v-show="isEchTrue">
        <div slot="header" class="clearfix">
          <span v-if="currentMark">{{
            currentMark.name ? currentMark.name : "-"
@@ -167,7 +258,7 @@
          type="text"
          >查看更多>></el-button
        >
      </el-card>
      </el-card> -->
    </div>

    <!-- 朝代 -->
@@ -232,6 +323,7 @@
  getPreCount,
  getDynastyData,
} from "@/api/index.js";

export default {
  data() {
    return {
@@ -407,6 +499,10 @@
          source: "国图规范档，CBDB，上图古籍数据库 籍贯：湖北",
        },
      ],
      zoomLevel: 5,
      oldMarkList: [],
      aggregatedData: [],
      openData: null,
    };
  },
  onLoad(options) {
@@ -431,26 +527,9 @@
    },
    showCard(info) {
      const item = this.markerList.find((f) => f.id == info.id);
      console.log(item, "item");
      this.openData = item;
      var latlng = L.latLng(item.yCoord, item.xCoord);
      this.map.setView(latlng, 10);
      setTimeout(() => {
        this.isEchTrue = true;
        this.currentMark = {
          name: item?.NAME[0]?.content1,
          nikeName: item?.ALIAS[0]?.content2,
          nativePlace: item?.content1,
          barnch: item?.MEDICAL_BRANCH[0]?.content1,
          medical: item?.BIOGRAPHY,
          id: item.id,
        };
        this.$nextTick(() => {
          this.isTop =
            document.getElementById("mapBox").offsetHeight / 2 - 295 + "px";
          this.isLeft =
            document.getElementById("mapBox").offsetWidth / 2 - 171 + "px";
        });
      }, 300);
      this.map.setView(latlng, 12);
    },
    getDataList() {
      this.SearchArr = [];
@@ -477,68 +556,11 @@
            markerList = [...markerList, ...curData];
          }
          if (i == 1) {
            this.loading = false;
            this.mapLoading = false;
            this.markerList = markerList;
            this.initMap(markerList);
            this.initMap();
          } else {
            if (curData && curData.length) {
              for (let j = 0; j < curData.length; j++) {
                const ele = curData[j];
                let currentClassName = "map-circle-name";
                if (ele.dynastyInfo) {
                  switch (ele.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} ripple'></div>`,
                  iconSize: [80, 80],
                  className: "map-circle",
                });
                const temp_mark = L.marker([ele.yCoord, ele.xCoord], {
                  icon: icon,
                }).addTo(this.map);
                temp_mark.on("click", (e) => {
                  setTimeout(() => {
                    this.isEchTrue = true;
                    this.currentMark = {
                      name: ele?.NAME[0]?.content1,
                      nikeName: ele?.ALIAS[0]?.content2,
                      nativePlace: ele?.content1,
                      barnch: ele?.MEDICAL_BRANCH[0]?.content1,
                      medical: ele?.BIOGRAPHY,
                      id: ele.id,
                    };
                    this.isTop = e.containerPoint.y - 295 + "px";
                    this.isLeft = e.containerPoint.x - 171 + "px";
                  }, 300);
                });
              }
            }
            this.handleMapIcon(this.markerList);
          }

          if (i == times) {
@@ -553,58 +575,12 @@
              nativPlace: item?.NATIVE_PLACE[0].content1,
              id: item.id,
            }));
            this.loading = false;
            this.markerList = markerList;
            // this.initMap(markerList);
            this.handleMapIcon(this.markerList);
          }
        }
      });

      // 问题：
      // 搜索结果不对
      // 点击地图标点出现弹框，拖动地图时应关闭弹框

      // getRetrieval({
      //   keyword: this.keyword,
      //   dynasty: this.dynasty1Color,
      //   page: 1,
      //   pageSize: 200,
      // }).then((res) => {
      //   this.loading = false;
      //   if (res.object) {
      //     let markerList = [];
      //     const listData = res.object.personList;
      //     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 });
      //           }
      //         });
      //       }
      //     }
      //     this.initMap(markerList);
      //     this.SearchArr = markerList.map((item) => ({
      //       birthAndDeath: item?.BIRTH_YEAR[0]?.content1
      //         ? item?.BIRTH_YEAR[0]?.content1 +
      //           "-" +
      //           item?.DEATH_YEAR[0]?.content1
      //         : "-",
      //       name: item?.NAME[0]?.content1,
      //       source: "-",
      //       id: item.id,
      //     }));
      //     this.markerList = markerList;
      //   } else {
      //     this.initMap([]);
      //   }
      // });
    },

    async getDataPageInfo(count) {
@@ -641,11 +617,14 @@
    },
    onMapMoveEnd() {
      console.log("地图拖动了");
      if (this.openData) {
        this.handleMapIcon(this.markerList);
      } else {
      this.isEchTrue = false;
      }
    },
    //初始化地图
    initMap(markerList) {
      console.log(markerList, "markerList");
    initMap() {
      this.isEchTrue = false;
      if (this.map) {
        this.map.remove();
@@ -653,12 +632,14 @@
      var map = L.map("map", {
        preferCanvas: true,
        attributionControl: false,
      }).setView([34.3227, 108.5525], 5);
      }).setView([34.3227, 108.5525], this.zoomLevel);
      map.on("moveend", this.onMapMoveEnd);
      map.on("zoomend", function () {
      map.on("zoomend", () => {
        var zoomLevel = map.getZoom(); // 获取当前地图的缩放级别
        console.log("当前地图缩放级别为:", zoomLevel);
        this.zoomLevel = zoomLevel;
        this.isEchTrue = false;
        this.handleMapIcon(this.markerList);
      });
      L.tileLayer
        .chinaProvider("TianDiTu.Normal.Map", {
@@ -674,76 +655,166 @@
          minZoom: 3,
        })
        .addTo(map);
      let DefaultIcon1 = L.icon({
        iconUrl: this.icoName,
        iconSize: [24, 41], //  图标的大小    【值1，值2】 为具体你自定义图标的尺寸，比如我图标尺寸是32×52，表示该图标：宽度32像素，高度：52像素，那么值1:就是32，值2：就是52
        iconAnchor: [24, 41], //  图标将对应标记点的位置 这个是重点， 【值1，值2】，值1：为图标坐标第一个值(即32)的一半，值2：为图标坐标第二个值(即52)
        popupAnchor: [1, -24], // 该点是相对于iconAnchor弹出信息的位置  这个是我手动调出来的，文档默认原始值是[-1，-76]，我是去一半值，取一半值调出来的
      });

      let icon = L.divIcon({
        html: "<div class='map-circle-name '></div>",
        iconSize: [80, 80],
        className: "map-circle",
      });
      this.map = map;
      if (this.markerList.length) {
        for (let i = 0; i < this.markerList.length; i++) {
          const item = this.markerList[i];
          let currentClassName = "map-circle-name";
          if (item.dynastyInfo) {
            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;
            }
          }
      this.handleMapIcon(this.markerList);
    },

    handleMapIcon(data) {
      if (this.oldMarkList.length) {
        for (let j = 0; j < this.oldMarkList.length; j++) {
          const oldMark = this.oldMarkList[j];
          oldMark.remove();
        }
        this.oldMarkList = [];
      }
      // 按层级处理数据合并和icon的渲染
      // 获取天地图比例尺(地图1cm:实际cm)
      const scale = {
        1: 295829355.45456564,
        2: 147914677.72728282,
        3: 73957338.863641411,
        4: 36978669.431820706,
        5: 18489334.715910353,
        6: 9244667.3579551764,
        7: 4622333.6789775882,
        8: 2311166.8394887941,
        9: 1155583.419744397,
        10: 577791.70987219852,
        11: 288895.85493609926,
        12: 144447.92746804963,
        13: 72223.963734024815,
        14: 36111.981867012408,
        15: 18055.990933506204,
        16: 9027.9954667531019,
        17: 4513.997733376551,
        18: 2256.9988666882755,
        19: 1128.4994333441377,
        20: 564.24971667206887,
      };
      // 根据比例尺计算当前地图1厘米的经纬度差值
      const cmData = scale[this.zoomLevel] / 100; // 将厘米转换为米
      const longitudeToM = 92064.1; // 1经度对应米
      const latitudeToM = 111195.1; // 1纬度对应米
      const longitudeRange = cmData / longitudeToM; // 地图1cm的经度差
      const latitudeRange = cmData / latitudeToM; // 地图1cm的纬度差
      console.log("longitudeRange", longitudeRange);
      console.log("latitudeRange", latitudeRange);
      // 根据经纬度差值将地图一厘米内所有点合并并记录数量
      const aggregatedData = [];
      for (let i = 0; i < data.length; i++) {
        const item = data[i];
        // 判断当前点是否存在在1cm内的相关数据
        const mateData = aggregatedData.find(
          (aItem) =>
            Math.abs(aItem.mainX - item.xCoord) < longitudeRange &&
            Math.abs(aItem.mainY - item.yCoord) < latitudeRange
        );
        if (!mateData) {
          // 无匹配数据时，将当前点坐标设为中心点坐标，虹吸合并周围1cm内的点
          const obj = {
            mainX: item.xCoord,
            mainY: item.yCoord,
            contentX: "",
            contentY: "",
            xList: [],
            yList: [],
            data: [],
          };
          obj.xList.push(item.xCoord);
          obj.yList.push(item.yCoord);
          obj.data.push(item);
          aggregatedData.push(obj);
        } else {
          // 有匹配数据时，将当前点进行合并
          mateData.xList.push(item.xCoord);
          mateData.yList.push(item.yCoord);
          mateData.data.push(item);
        }
      }
      // 根据聚合经度和纬度列表的最大最小值，取中心点坐标
      for (let j = 0; j < aggregatedData.length; j++) {
        const aggregatedItem = aggregatedData[j];
        const maxX = Math.max(...aggregatedItem.xList);
        const minX = Math.min(...aggregatedItem.xList);
        const maxY = Math.max(...aggregatedItem.yList);
        const minY = Math.min(...aggregatedItem.yList);
        aggregatedItem.contentX = (maxX - minX) / 2 + minX;
        aggregatedItem.contentY = (maxY - minY) / 2 + minY;

        // 添加标记
          let icon = L.divIcon({
            html: `<div class='${currentClassName} ripple'></div>`,
            iconSize: [80, 80],
          html: `<div class='ripple' style='box-shadow: 0 0 20px ${
            aggregatedItem.data.length > 30 ? 30 : aggregatedItem.data.length
          }px #cc2edf78;'>${
            aggregatedItem.data.length < 100
              ? aggregatedItem.data.length
              : "99+"
          }</div>`,
          iconSize: [30, 30],
            className: "map-circle",
          });
          const temp_mark = L.marker([item.yCoord, item.xCoord], {
        const temp_mark = L.marker(
          [aggregatedItem.contentY, aggregatedItem.contentX],
          {
            icon: icon,
          }).addTo(map);
          }
        );
        this.oldMarkList.push(temp_mark);
        temp_mark.addTo(this.map);
          temp_mark.on("click", (e) => {
            setTimeout(() => {
              this.isEchTrue = true;
              this.currentMark = {
                name: item?.WEAK_NAME[0]?.content1,
            this.currentMark = aggregatedItem.data.map((item) => {
              return {
                name: item?.NAME[0]?.content1,
                nikeName: item?.ALIAS[0]?.content2,
                nativePlace: item?.content1,
                barnch: item?.MEDICAL_BRANCH[0]?.content1,
                medical: item?.BIOGRAPHY,
                id: item.id,
              };
              this.isTop = e.containerPoint.y - 295 + "px";
              this.isLeft = e.containerPoint.x - 171 + "px";
            });
            this.isTop = e.containerPoint.y - 435 + "px";
            this.isLeft = e.containerPoint.x - 180 + "px";
            }, 300);
          });
        }
      console.log("aggregatedData", aggregatedData);
      this.aggregatedData = aggregatedData;
      if (this.openData) {
        setTimeout(() => {
          if (this.openData) {
            let aggregated = null;
            for (let i = 0; i < this.aggregatedData.length; i++) {
              const aggregatedItem = this.aggregatedData[i];
              const d = aggregatedItem.data.find(
                (f) => f.id == this.openData.id
              );
              if (d) {
                aggregated = aggregatedItem;
              }
            }
            this.currentMark = aggregated.data.map((item) => {
              return {
                name: item?.NAME[0]?.content1,
                nikeName: item?.ALIAS[0]?.content2,
                nativePlace: item?.content1,
                barnch: item?.MEDICAL_BRANCH[0]?.content1,
                medical: item?.BIOGRAPHY,
                id: item.id,
              };
            });
            this.isEchTrue = true;
            this.$nextTick(() => {
              this.isTop =
                document.getElementById("mapBox").offsetHeight / 2 - 435 + "px";
              this.isLeft =
                document.getElementById("mapBox").offsetWidth / 2 - 180 + "px";
            });
          }

          this.openData = null;
        }, 300);
      }
    },

@@ -762,9 +833,9 @@
    // 点击上面的朝代按钮
    SchoolClick(id) {},
    // 查看更多>>
    viewMoreClick() {
    viewMoreClick(data) {
      uni.navigateTo({
        url: "/pages/character/detail?id=" + this.currentMark.id,
        url: "/pages/character/detail?id=" + data.id,
      });
    },
  },
@@ -772,61 +843,6 @@
</script>

<style>
::v-deep .map-circle-name {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  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%;
@@ -834,21 +850,69 @@
  flex-direction: column;
}

.echartsTrue::before {
.markerDataListBox {
  width: 360px !important;
  height: 400px;
}

.markerDataListBox::before {
  content: "";
  width: 0;
  height: 0;
  position: absolute;
  bottom: -0.18rem;
  left: 1.2rem;
  bottom: -18px;
  left: 160px;
  /* background-color: red; */
  border-left: 0.2rem solid transparent;
  border-left: 20px solid transparent;
  /* 左边透明 */
  border-right: 0.2rem solid transparent;
  border-right: 20px solid transparent;
  /* 右边透明 */
  border-top: 0.2rem solid #fff;
  border-top: 20px solid #fff;
  /* 顶部红色 */
  z-index: 999;
}

.markerDataList {
  width: 100%;
  height: 100%;
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 0 10px 0 #000;
}

.markerDataList ::v-deep .el-collapse-item {
  border-left: 1px solid #ebeef5;
  border-right: 1px solid #ebeef5;
}

::v-deep .el-collapse-item__header.is-active {
  border-bottom-color: #ebeef5;
}

::v-deep .el-collapse-item__header {
  padding-left: 10px;
  font-size: 16px;
}

.markerDataContentBox {
  width: 100%;
  height: 100%;
  overflow: auto !important;
  padding: 6px;
  box-sizing: border-box;
}

.titleImg {
  display: inline-block;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background-color: #4c48fb;
  color: #fff;
  margin-right: 10px;
  text-align: center;
  line-height: 24px;
}

::v-deep .el-card__header {
@@ -858,6 +922,14 @@
  padding: 0.08rem 0.13rem;
  font-size: 0.14rem;
  font-weight: 600;
}

::v-deep .el-collapse-item__content {
  padding-bottom: 10px;
}

.markerDataContentBox .information {
  padding: 20px;
}

.information li {
@@ -962,22 +1034,13 @@
}

::v-deep .ripple {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  position: relative;
  overflow: hidden;
}

::v-deep .ripple::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 150%; /* Ensure it covers the entire parent */
  height: 150%;
  background: rgba(255, 255, 255, 0.5);
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(1);
  animation: ripple-animation 1s infinite linear;
  background: #4c48fb;
  color: #fff;
  text-align: center;
  line-height: 30px;
}

/* @keyframes ripple-animation {

 src/pages/userAgreement/userAgreement.vue

@@ -1,159 +1,171 @@
<template>
    <view class="flex" style="flex-direction: column; padding: 0 2rem;" >
        <h3 class="flex" >
    <view>
        <view style="padding: 50px 200px;" v-if="type == 1">
            <h3 style="line-height: 4; text-align: center; width: 100%;">
            中医人物知识库用户服务协议
        </h3>

            <p>
        请您务必仔细阅读并遵守本《用户服务协议》（以下简称：协议）中的全部内容，特别是涉及免除或责任限制的条款。除非您已阅读并接受本协议所有条款，否则您将不能注册本知识库账号或使用本知识库的服务，如果您不同意本协议的任意内容，请勿注册或使用本知识库的服务，并应立即停止注册程序。如果您对本协议的内容（特别是涉及免除或责任限制的条款）有任何疑义，可随时按照本协议中列明的联系方式与我们联系，我们将根据您的要求为您进一步解释和说明相关内容。如果您通过注册程序或其他任何方式使用或接受本知识库的任何服务，即视为您已经阅读并同意本协议的所有条款，自愿接受本协议的所有内容的约束。请您在决定注册或使用服务前再次确认您已经知悉并完全理解本协议的所有内容。本协议是您与中国中医科学院中医药信息研究所就注册中医人物知识库用户账号及使用本知识库各项服务等相关事宜所订立的协议。
        一、服务内容
        1、中医人物知识库是一个全面展现中医人物知识库平台，平台内严禁一切非法、涉黄信息，违反社区运营规范者，一律封号处理。
        2、本知识库的具体内容由制作者根据实际情况提供。
        3、除非本注册及服务协议另有其它明示规定，本知识库所推出的新产品、新功能、新服务，均受到本协议规范。
        二、用户帐号注册
        1、未满18周岁的未成年人注册账户，应由监护人陪同仔细阅读本协议，并取得他/他们的同意。
        2、您承诺注册符合下列要求：
        （1）请勿以党和国家领导人或其他社会名人的真实姓名、字号、艺名、笔名注册；
        （2）请勿以国家机构或其他机构的名称注册；
        （3）请勿注册不文明、不健康名字，或包含歧视、侮辱、猥亵类词语的帐号；
        （4）请勿注册易产生歧义、引起他人误解或其它不符合法律规定的帐号。
            </p>
            <h4>一、服务内容</h4>
            <p>1、中医人物知识库是一个全面展现中医人物知识库平台，平台内严禁一切非法、涉黄信息，违反社区运营规范者，一律封号处理。</p>
            <p>2、本知识库的具体内容由制作者根据实际情况提供。</p>
            <p>3、除非本注册及服务协议另有其它明示规定，本知识库所推出的新产品、新功能、新服务，均受到本协议规范。</p>
            <h4>二、用户帐号注册</h4>
            <p>1、未满18周岁的未成年人注册账户，应由监护人陪同仔细阅读本协议，并取得他/他们的同意。</p>
            <p>2、您承诺注册符合下列要求：</p>
            <p>（1）请勿以党和国家领导人或其他社会名人的真实姓名、字号、艺名、笔名注册；</p>
            <p>（2）请勿以国家机构或其他机构的名称注册；</p>
            <p>（3）请勿注册不文明、不健康名字，或包含歧视、侮辱、猥亵类词语的帐号；</p>
            <p>（4）请勿注册易产生歧义、引起他人误解或其它不符合法律规定的帐号。</p>
            </p>
        3、您应当使用手机号码或电子邮箱进行注册。您一旦注册成功成为用户，您需要对自己在账号中的所有活动和事件负全责。如果由于您的过失导致您的账号和密码脱离您的控制，则由此导致的针对您、本知识库平台或任何第三方造成的损害，您将承担全部责任。
        三、用户使用规则
        1、您悉知并承诺，在使用本知识库所提供的服务过程中严格遵守国家法律、法规以及道德规范，不得使用本知识库从事任何违法活动。
        2、用户不得在本知识库上发布、传播含有下列内容的信息：
        （1）危害国家安全，泄露国家秘密，颠覆国家政权，破坏国家统一的；
        （2）损害国家荣誉和利益的；
        （3）煽动民族仇恨、民族歧视、破坏民族团结的；
        （4）破坏国家宗教政策，宣扬邪教和封建迷信的；
        （5）散布谣言、淫秽、色情、赌博、暴力、凶杀、恐怖或者教唆犯罪的；
        （6）侮辱、诽谤他人，或侵害他人合法权利的；
        （7）煽动非法集会、结社、游行、示威、聚众扰乱社会秩序的；
        （8）其他违反法律、法规、规章、条例以及社会道德规范所限制或禁止的内容的。
            </p>
            <h4>三、用户使用规则</h4>
            <p>1、您悉知并承诺，在使用本知识库所提供的服务过程中严格遵守国家法律、法规以及道德规范，不得使用本知识库从事任何违法活动。</p>
            <p>2、用户不得在本知识库上发布、传播含有下列内容的信息：</p>
            <p>（1）危害国家安全，泄露国家秘密，颠覆国家政权，破坏国家统一的；</p>
            <p>（2）损害国家荣誉和利益的；</p>
            <p>（3）煽动民族仇恨、民族歧视、破坏民族团结的；</p>
            <p>（4）破坏国家宗教政策，宣扬邪教和封建迷信的；</p>
            <p>（5）散布谣言、淫秽、色情、赌博、暴力、凶杀、恐怖或者教唆犯罪的；</p>
            <p>（6）侮辱、诽谤他人，或侵害他人合法权利的；</p>
            <p>（7）煽动非法集会、结社、游行、示威、聚众扰乱社会秩序的；</p>
            <p>（8）其他违反法律、法规、规章、条例以及社会道德规范所限制或禁止的内容的。</p>
            <p>
        3、用户有义务保证密码和帐号的安全，用户利用该密码和帐号所进行的一切活动引起的任何损失或损害，由用户自行承担全部责任，本知识库不承担任何责任。如用户发现帐号遭到未授权的使用或发生其他任何安全问题，应立即修改帐号密码并妥善保管，如有必要，请反馈通知本知识库管理人员。因黑客行为或用户的保管疏忽导致帐号非法使用，本知识库不承担任何责任。
            </p>
            <p>
        4、当第三方认为用户发表或者上传于本知识库的信息侵犯其权利，并根据《信息网络传播权保护条例》或者相关法律规定向本知识库发送权利通知书时，用户同意本知识库可以自行判断决定删除涉嫌侵权信息，除非用户提交书面证据材料排除侵权的可能性，本知识库将不会自动恢复上述删除的信息。用户必须遵守：
        （1）不得为任何非法目的而使用网络服务系统；
        （2）遵守所有与网络服务有关的网络协议、规定和程序；
        （3）不得利用本知识库的服务进行任何可能对互联网的正常运转造成不利影响的行为；
        （4）不得利用本知识库服务进行任何不利于本知识库的行为。
        5、如用户在使用网络服务时违反上述任何规定，本知识库有权要求用户改正或直接采取一切必要的措施(包括但不限于删除用户上传的内容、暂停或终止用户使用网络服务的权利)以减轻用户不当行为而造成的影响。
        四、责任声明
            </p>
            <p>（1）不得为任何非法目的而使用网络服务系统；</p>
            <p>（2）遵守所有与网络服务有关的网络协议、规定和程序；</p>
            <p>（3）不得利用本知识库的服务进行任何可能对互联网的正常运转造成不利影响的行为；</p>
            <p>（4）不得利用本知识库服务进行任何不利于本知识库的行为。</p>
            <p>5、如用户在使用网络服务时违反上述任何规定，本知识库有权要求用户改正或直接采取一切必要的措施(包括但不限于删除用户上传的内容、暂停或终止用户使用网络服务的权利)以减轻用户不当行为而造成的影响。</p>
            <h4>四、责任声明</h4>
            <p>
        1、任何网站、单位或者个人如认为本知识库或者本知识库提供的相关内容涉嫌侵犯其合法权益，应及时向本知识库提供书面权利通知，并提供身份证明、权属证明及详细侵权情况证明。本知识库在收到上述法律文件后，将会尽快切断相关内容以保证相关网站、单位或者个人的合法权益得到保障。
        2、用户明确同意其使用本知识库网络服务所存在的风险及一切后果将完全由用户本人承担，本应用对此不承担任何责任。
        3、本知识库无法保证网络服务一定能满足用户的要求，也不保证网络服务的及时性、安全性、准确性。
        4、本知识库不保证为方便用户而设置的外部链接的准确性和完整性，同时，对于该等外部链接指向的不由本知识库实际控制的任何网页上的内容，本知识库不承担任何责任。
        五、知识产权
        1、本知识库网站名称、客户端、logo、视频、图片、运营维护过程中所产生的所有数据和信息的知识产权均为本知识库所有。未经本知识库所有人同意，禁止将以上信息与素材以任何方式展示、使用或做其他处理。
        2、您应当遵守相关法律法规，不得侵犯本知识库、知识库用户及其他第三方的知识产权。本知识库有权判断用户的行为、所发布信息是否符合法律、法规、国家政策及本服务条款之规定，并对涉嫌违规内容自行删除而无须通知该用户。
        3、若您认为本知识库的相关内容侵犯了您的知识产权，您可以依据相关法律规定，书面通知本知识库，并提供相关权利侵害证据。如因您的通知导致他人的合法权利受到损害，您应依法承担赔偿责任，本知识库对此不承担责任。
        4、本知识库所有用户上传信息仅代表用户自己的立场和观点，与本知识库无关，由用户本人承担一切法律责任。
        六、隐私保护
        1、本知识库不对外公开或向第三方提供单个用户的注册资料及用户在使用网络服务时存储在本知识库的非公开内容，但下列情况除外：
        （1）事先获得用户的明确授权；
        （2）根据有关的法律法规要求；
        （3）按照相关政府主管部门的要求；
        （4）为维护社会公众的利益。
        2、在不透露单个用户隐私资料的前提下，本知识库有权对整个用户数据库进行分析并对用户数据库进行商业上的利用。
        七、协议终止情形
        如发生下列任何一种情形，本知识库有权终止向用户提供的免费服务或收费服务，而无须对用户或任何第三方承担责任：
        （1）用户提供个人资料不真实，或与注册时信息不一致又未能提供有效证明；
        （2）用户违反相关法律法规规定或本协议的规定；
        （3）按照法律规定或有权行政机关的要求；
        （4）出于安全原因或其他必要情形。
        八、法律适用、管辖
        1.本协议的订立、执行和解释及争议均适用中国中华人民共和国法律。
        2.如双方就协议内容或其执行发生任何争议，双方应尽量友好协商解决，协商不成时，用户和本知识库一致同意提交本知识库运营商所在地有管辖权的法院管辖。
        九、联系方式
        联系电话：010-64089611
        电子邮箱：tcmtczy@mail.cintcm.ac.cn































        隐私政策
        引言
        中国中医科学院中医药信息研究所（以下简称：我们）尊重并保护所有使用中医人物知识库服务的用户（以下简称：您）个人隐私与信息安全。鉴于此，我们制定本《隐私护政策》（以下简称：政策）与您确认关于您在使用服务期间，我们将收集、存储、使用、共享和保护您的个人信息的相关事宜。本政策将帮助您了解以下内容：
        1、我们如何收集和使用您的个人信息
        2、我们如何共享、转让、公开披露、存储您的个人信息
        3、我们如何保护您的个人信息
        4、您可以如何管理您的个人信息
        5、关于未成年人的个人信息
        6、本隐私政策如何更新
        7、如何联系我们
        请您在使用服务前，完整阅读并透彻理解本政策，在您充分理解并同意后使用服务。如果您不同意本政策的任何内容，您应立即停止使用本知识库。当您使用本知识库时，则表示您同意且完全理解本政策的全部内容。
        需要特别说明的是，本政策仅针对于本知识库的行为，我们不承担第三方系统的任何行为导致的任何责任。
        一、我们如何收集您的个人信息
        您的个人信息来源于您向本知识库提供的信息及我们通过您使用系统服务所收集到的信息。
        1、您向我们提供的信息
        a)您注册账号须至少向我们提供手机号，并设置密码；
        2、我们通过您使用服务所收集到的信息
        您在使用服务时（如发布信息等），为满足向您提供服务之目的，更个性化的为您推荐相关内容，除您在注册或开通服务时提供的个人信息外，我们还可能会记录您在使用我们的服务时提供、形成或留存的信息，包括但不限于设备信息、日志信息、位置信息、唯一应用程序编号、网络和连接信息、Cookie数据等。
        二、我们如何使用、共享、 披露您的个人信息
        1、为满足向您提供服务的需要
        您的个人信息将被用于身份验证、客户服务、安全防范、诈骗检测、存档和备份等合理用途，确保我们向您有效的提供产品和服务以及保障服务的安全性；
        2、提供个性化的服务
        a)为您提供个性化的推荐：根据站内各种行为（引用、搜索等），向您个性化推荐适合您的内容；
        b)为您提供个性化的服务：根据站内各种行为（引用、搜索等），向您定向投放知识推荐、弹窗、焦点图、推送等。
        3、提供和改进产品和服务
        为了进一步完善产品或服务，提供更优质的用户体验，我们将使用您提供的或我们收集的信息自行或提供数据服务商进行数据统计、分析，以评估、维护和改进我们服务的性能，进行必要的业务运营，参与有关系统和服务的市场调研活动，开发新的系统、产品或服务，提供客户支持等。这些信息在使用前会经过匿名化处理的，将不会包含您的任何身份识别信息。
        4、信息共享与披露
        a)数据共享
        您同意，为开展系统业务需要，我们将向其关联公司、商业合作伙伴（如广告商或版权方）、第三方服务提供商（如提供数据处理、存储服务的公司、提供市场营销服务的公司、提供技术支持的公司等）共享您的个人信息。请知悉，我们提供给商业合作伙伴或其他第三方的信息是经过匿名化处理的，将不会包含您的任何身份识别信息。此外，若我们或系统发生重组、合并、分立、清算或资产出售时，您的信息将作为交易标的转移到新的主体，在本政策变更前，您的个人信息仍然受到本个人信息保护政策的保护。
        b)数据披露
        基于国家、公共利益及安全，依照法律及合法程序，我们将向有权的司法机关、行政机关或有关个人披露您的个人信息，或依照法院裁决、判决或政府机关的强制要求执行相关行为。请您知悉，上述国家包括但不限于中华人民共和国或其他我们开展业务的国家及相关法律法规。为维护第三人的合法利益，或调查、预防或处理违法、违规、侵权、安全或技术方面的问题或学术研究等合理之目的等情形下而使用、共享、披露您的个人信息。
        三、您如何管理或删除您的个人信息
        您可以在我们系统中查阅或删除您的相关信息；您也可以通过解除绑定、修改个人设置、删除相关信息等方式撤回部分授权，也可以通过注销账号的方式撤销所有授权或服务；请知悉，当您撤回同意或授权后，可能将导致我们无法继续为您提供服务。
        四、关于未成年人的个人信息
        我们非常重视对未成年人信息的保护。若您是18周岁以下的未成年人，请您及您的监护人仔细阅读本政策，并在征得您的监护人同意的前提下使用服务或向我们提供信息。
        五、您的个人信息存储
        请您知悉，我们在全球运营系统及服务时就收集到的信息将统一默认存储在中华人民共和国境内的服务器内。
        六、我们提供的个人信息保障措施
        我们将采取符合业界标准、合理可行的安全防护措施保护您提供的个人信息安全，防止您的个人信息遭到未经授权访问、公开披露、使用、修改、损坏或丢失。我们会以高度的勤勉义务对待您的信息，未经您同意，我们不会向任何第三方共享您的信息。也请您使用复杂密码并妥善保管您的账户及密码，并谨慎向第三方提供您的个人信息。如您发现自己的个人信息泄密，尤其是你的账户及密码发生泄露，请您立即联络我方管理员，以便我方采取相应措施。
        七、个人信息保护政策的修订
        我们可能对本政策进行不定期修改，协议修改后，我们将在相关页面或以其他合适的方式公布修改的内容。如果您不同意本协议的修改，请立即停止使用系统或取消已经获得的服务；如果您选择在本政策修改后继续访问或使用系统或服务的，则视为您已接受本政策的修改。
        您与我们签署的本政策所列明的条款，并不能完全涵盖您与我们所有的关于个人信息的权利和义务。因此，我们公布其他声明、规则等均视为本政策之补充条款，为本政策不可分割的组成部分，与本协议具有同等法律效力。
        八、如何联系我们
        如您对本政策有任何疑问、建议或意见的，或您发现您的个人信息可能被泄露的，您可通过联系电话或电子邮箱联系我们。
        联系电话：010-64089611
        电子邮箱：tcmtczy@mail.cintcm.ac.cn
        本政策的生效、履行、解释及争议的解决，您因使用我们的服务而产生或与本政策相关的一切争议、权利主张或其他事项，均适用中华人民共和国法律（港澳台
        地区除外）。您与我们发生的一切争议，应友好协商，如协商不成的，应提交所在地人民法院管辖。
        请您再次确认您已全部阅读并充分理解上述条款。

            </p>
            <p>2、用户明确同意其使用本知识库网络服务所存在的风险及一切后果将完全由用户本人承担，本应用对此不承担任何责任。</p>
            <p>3、本知识库无法保证网络服务一定能满足用户的要求，也不保证网络服务的及时性、安全性、准确性。</p>
            <p>4、本知识库不保证为方便用户而设置的外部链接的准确性和完整性，同时，对于该等外部链接指向的不由本知识库实际控制的任何网页上的内容，本知识库不承担任何责任。</p>
            <h4>五、知识产权</h4>
            <p>1、本知识库网站名称、客户端、logo、视频、图片、运营维护过程中所产生的所有数据和信息的知识产权均为本知识库所有。未经本知识库所有人同意，禁止将以上信息与素材以任何方式展示、使用或做其他处理。</p>
            <p>2、您应当遵守相关法律法规，不得侵犯本知识库、知识库用户及其他第三方的知识产权。本知识库有权判断用户的行为、所发布信息是否符合法律、法规、国家政策及本服务条款之规定，并对涉嫌违规内容自行删除而无须通知该用户。</p>
            <p>3、若您认为本知识库的相关内容侵犯了您的知识产权，您可以依据相关法律规定，书面通知本知识库，并提供相关权利侵害证据。如因您的通知导致他人的合法权利受到损害，您应依法承担赔偿责任，本知识库对此不承担责任。</p>
            <p>4、本知识库所有用户上传信息仅代表用户自己的立场和观点，与本知识库无关，由用户本人承担一切法律责任。</p>
            <h4>六、隐私保护</h4>
            <p>1、本知识库不对外公开或向第三方提供单个用户的注册资料及用户在使用网络服务时存储在本知识库的非公开内容，但下列情况除外：</p>
            <p>（1）事先获得用户的明确授权；</p>
            <p>（2）根据有关的法律法规要求；</p>
            <p>（3）按照相关政府主管部门的要求；</p>
            <p>（4）为维护社会公众的利益。</p>
            <p>2、在不透露单个用户隐私资料的前提下，本知识库有权对整个用户数据库进行分析并对用户数据库进行商业上的利用。</p>
            <h4>七、协议终止情形</h4>
            <p>如发生下列任何一种情形，本知识库有权终止向用户提供的免费服务或收费服务，而无须对用户或任何第三方承担责任：</p>
            <p>（1）用户提供个人资料不真实，或与注册时信息不一致又未能提供有效证明；</p>
            <p>（2）用户违反相关法律法规规定或本协议的规定；</p>
            <p>（3）按照法律规定或有权行政机关的要求；</p>
            <p>（4）出于安全原因或其他必要情形。</p>
            <h4>八、法律适用、管辖</h4>
            <p>1.本协议的订立、执行和解释及争议均适用中国中华人民共和国法律。</p>
            <p>2.如双方就协议内容或其执行发生任何争议，双方应尽量友好协商解决，协商不成时，用户和本知识库一致同意提交本知识库运营商所在地有管辖权的法院管辖。</p>
            <h4>九、联系方式</h4>
            <p>联系电话：010-64089611</p>
            <p>电子邮箱：tcmtczy@mail.cintcm.ac.cn</p>
    </view>
        <view style="padding: 50px 200px;"  v-if="type == 2">
            <h3 style="line-height: 4; text-align: center; width: 100%;">
                隐私政策
            </h3>

            <h4>引言</h4>
            <p>
                中国中医科学院中医药信息研究所（以下简称：我们）尊重并保护所有使用中医人物知识库服务的用户（以下简称：您）个人隐私与信息安全。鉴于此，我们制定本《隐私护政策》（以下简称：政策）与您确认关于您在使用服务期间，我们将收集、存储、使用、共享和保护您的个人信息的相关事宜。本政策将帮助您了解以下内容：
            </p>
            <p>1、我们如何收集和使用您的个人信息</p>
            <p>2、我们如何共享、转让、公开披露、存储您的个人信息</p>
            <p>3、我们如何保护您的个人信息</p>
            <p>4、您可以如何管理您的个人信息</p>
            <p>5、关于未成年人的个人信息</p>
            <p>6、本隐私政策如何更新</p>
            <p>7、如何联系我们</p>
            <p>请您在使用服务前，完整阅读并透彻理解本政策，在您充分理解并同意后使用服务。如果您不同意本政策的任何内容，您应立即停止使用本知识库。当您使用本知识库时，则表示您同意且完全理解本政策的全部内容。</p>
            <p>需要特别说明的是，本政策仅针对于本知识库的行为，我们不承担第三方系统的任何行为导致的任何责任。</p>
            <h4>一、我们如何收集您的个人信息</h4>
            <p>您的个人信息来源于您向本知识库提供的信息及我们通过您使用系统服务所收集到的信息。
            <p>1、您向我们提供的信息</p>
            <p>a)您注册账号须至少向我们提供手机号，并设置密码；</p>
            </p>
            <p>2、我们通过您使用服务所收集到的信息</p>
            <p>
                您在使用服务时（如发布信息等），为满足向您提供服务之目的，更个性化的为您推荐相关内容，除您在注册或开通服务时提供的个人信息外，我们还可能会记录您在使用我们的服务时提供、形成或留存的信息，包括但不限于设备信息、日志信息、位置信息、唯一应用程序编号、网络和连接信息、Cookie数据等。
            </p>
            <h4>二、我们如何使用、共享、 披露您的个人信息</h4>
            <p>1、为满足向您提供服务的需要
            <p>
            <p>您的个人信息将被用于身份验证、客户服务、安全防范、诈骗检测、存档和备份等合理用途，确保我们向您有效的提供产品和服务以及保障服务的安全性；
            <p>
            <p>2、提供个性化的服务
            <p>
            <p>a)为您提供个性化的推荐：根据站内各种行为（引用、搜索等），向您个性化推荐适合您的内容；
            <p>
            <p>b)为您提供个性化的服务：根据站内各种行为（引用、搜索等），向您定向投放知识推荐、弹窗、焦点图、推送等。
            <p>
            <p>3、提供和改进产品和服务
            <p>
            <p>
                为了进一步完善产品或服务，提供更优质的用户体验，我们将使用您提供的或我们收集的信息自行或提供数据服务商进行数据统计、分析，以评估、维护和改进我们服务的性能，进行必要的业务运营，参与有关系统和服务的市场调研活动，开发新的系统、产品或服务，提供客户支持等。这些信息在使用前会经过匿名化处理的，将不会包含您的任何身份识别信息。
            <p>
            <p>4、信息共享与披露</p>
            <p>a)数据共享</p>
            <p>
                您同意，为开展系统业务需要，我们将向其关联公司、商业合作伙伴（如广告商或版权方）、第三方服务提供商（如提供数据处理、存储服务的公司、提供市场营销服务的公司、提供技术支持的公司等）共享您的个人信息。请知悉，我们提供给商业合作伙伴或其他第三方的信息是经过匿名化处理的，将不会包含您的任何身份识别信息。此外，若我们或系统发生重组、合并、分立、清算或资产出售时，您的信息将作为交易标的转移到新的主体，在本政策变更前，您的个人信息仍然受到本个人信息保护政策的保护。
            </p>
            <p>b)数据披露</p>
            <p>
                基于国家、公共利益及安全，依照法律及合法程序，我们将向有权的司法机关、行政机关或有关个人披露您的个人信息，或依照法院裁决、判决或政府机关的强制要求执行相关行为。请您知悉，上述国家包括但不限于中华人民共和国或其他我们开展业务的国家及相关法律法规。为维护第三人的合法利益，或调查、预防或处理违法、违规、侵权、安全或技术方面的问题或学术研究等合理之目的等情形下而使用、共享、披露您的个人信息。
            </p>
            <h4>三、您如何管理或删除您的个人信息</h4>
            <p>您可以在我们系统中查阅或删除您的相关信息；您也可以通过解除绑定、修改个人设置、删除相关信息等方式撤回部分授权，也可以通过注销账号的方式撤销所有授权或服务；请知悉，当您撤回同意或授权后，可能将导致我们无法继续为您提供服务。
            </p>
            <h4>四、关于未成年人的个人信息</h4>
            <p>我们非常重视对未成年人信息的保护。若您是18周岁以下的未成年人，请您及您的监护人仔细阅读本政策，并在征得您的监护人同意的前提下使用服务或向我们提供信息。</p>
            <h4>五、您的个人信息存储</h4>
            <p>请您知悉，我们在全球运营系统及服务时就收集到的信息将统一默认存储在中华人民共和国境内的服务器内。</p>
            <h4>六、我们提供的个人信息保障措施</h4>
            <p>
                我们将采取符合业界标准、合理可行的安全防护措施保护您提供的个人信息安全，防止您的个人信息遭到未经授权访问、公开披露、使用、修改、损坏或丢失。我们会以高度的勤勉义务对待您的信息，未经您同意，我们不会向任何第三方共享您的信息。也请您使用复杂密码并妥善保管您的账户及密码，并谨慎向第三方提供您的个人信息。如您发现自己的个人信息泄密，尤其是你的账户及密码发生泄露，请您立即联络我方管理员，以便我方采取相应措施。
            </p>
            <h4>七、个人信息保护政策的修订</h4>
            <p>
                我们可能对本政策进行不定期修改，协议修改后，我们将在相关页面或以其他合适的方式公布修改的内容。如果您不同意本协议的修改，请立即停止使用系统或取消已经获得的服务；如果您选择在本政策修改后继续访问或使用系统或服务的，则视为您已接受本政策的修改。
            </p>
            <p>您与我们签署的本政策所列明的条款，并不能完全涵盖您与我们所有的关于个人信息的权利和义务。因此，我们公布其他声明、规则等均视为本政策之补充条款，为本政策不可分割的组成部分，与本协议具有同等法律效力。</p>
            <h4>八、如何联系我们</h4>
            <p>如您对本政策有任何疑问、建议或意见的，或您发现您的个人信息可能被泄露的，您可通过联系电话或电子邮箱联系我们。</p>
            <p>联系电话：010-64089611</p>
            <p>电子邮箱：tcmtczy@mail.cintcm.ac.cn</p>
            <p>本政策的生效、履行、解释及争议的解决，您因使用我们的服务而产生或与本政策相关的一切争议、权利主张或其他事项，均适用中华人民共和国法律（港澳台
                地区除外）。您与我们发生的一切争议，应友好协商，如协商不成的，应提交所在地人民法院管辖。</p>
            <p>请您再次确认您已全部阅读并充分理解上述条款。</p>
        </view>
    </view>


</template>

<script>
    export default {
        data() {
            return {

                type: 1
            }
        },
        onLoad(options) {
            this.type = options.type;
        },
        methods: {

@@ -162,5 +174,7 @@
</script>

<style>

    p {
        text-indent: 2em;
    }
</style>

 src/pages/zhongyi/zhongyi.vue

@@ -1,6 +1,6 @@
<template>
    <view >
        <headNav :idIndex="idIndex" :searchBg="false" text="中医世医传承数据库" bg="/static/image/topBg1.png"
        <headNav :idIndex="idIndex" :searchBg="false" text="家学传承" bg="/static/image/topBg1.png"
            bg1="/static/image/line1.png" />

        <view class="flex" style="padding: .24rem 1.21rem ;background-color: #f0f0f0;">

 src/static/image/inherit/1-a.png

 src/static/image/inherit/1.png

 src/static/image/inherit/2-a.png

 src/static/image/inherit/2.png