1

YM

2024-07-26 c423765d8a5ff0c58d23bb0a31af7df6c1fad95c

 src/pages/repository/repository.vue

@@ -1,884 +1,1004 @@
<template>
   <view class="relative">
      <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">
            <view  style="font-weight: bold;font-size: .20rem;">李时珍</view>
            <ul class="flex" style="line-height: 1.2;margin: .15rem 0 ;">
               <li v-for="item in 4"
                  style="background-color: #fff; padding: 0 .08rem ;  border: .01rem solid #000;border-radius:.1rem ;font-size: .12rem;text-align: center;margin-right: .15rem;">
                  VSDS</li>
            </ul>
            <view class="fz font-family"
               style="font-size: .13rem;font-weight: normal;line-height: .2rem;letter-spacing: .03rem;">
               李时珍(1518年-1593年)，字:
               东璧，时人谓之:李东璧。号濒湖，晚年自号濒湖山人，湖北薪州(今湖北省黄冈市薪春县薪州镇)人，汉族，生于明武宗正德十三年(公元1518年)，卒于神宗万历二十二年(公元1593年)。是中国明代与万密斋齐名的医学家、药物学家、博物学家、著述家。李时珍对道家医学的继承是多方面的，曾参考历代有关医药及其学术书籍八百余种，结合自身经验和调查研究，历时27年编成《本草纲目》一书，是我国古代药物学的总结性巨著，在国内外均有很高的评价，已有几种文字的译本或节译本，其著有《濒湖脉学》
            </view>
            <view class="flex" style="width: 100%;margin: .25rem 0 .15rem 0;">
               <view >
                  <!-- <el-button style="padding: 10rpx;" size="mini" icon="el-icon-folder-add">收藏</el-button> -->
                  <el-button style="padding: .05rem .085rem;" class="yinyong flex">
                     <img src="@/static/image/yinyong.png" alt="" />引用</el-button>
               </view>
               <view  style="font-size: .12rem;color: #244A7B;" @click="ProfileClick">阅读更多></view>
            </view>
         </view>
         <view  style="width: 5%;"></view>
      </view>
      <el-row style="padding: 0 1.2rem 0;padding-top: .24rem;">
         <!-- 左侧 -->
         <el-col :span="5" class="BoxLeft" style="padding-right: .2rem;width: 2.8rem;">
            <div class="grid-content bg-purple-dark flex flex-column">
               <el-card class="box-card" style="width: 100%;height: 2.06rem;">
                  <div class="clearfix flex" style="font-weight: 900;font-size: .14rem;padding-bottom: .1rem;">
                     <span style="margin-left: .12rem;font-size: .14rem;font-weight: 900;">关系图谱</span>
                     <!-- <el-button icon="el-icon-rank" style="float: right; padding: 3px 0;" type="text"></el-button> -->
                     <img src="@/static/image/fangda.png" @click="fangdaClick(1)"
                        style="width: .18rem;height: .18rem;" alt="" />
                  </div>
                  <view id="relation" style="height: 1.51rem;width: 100%;"></view>
               </el-card>
               <el-card class="box-card" style="width: 100%;height: 2.06rem; margin: .26rem 0;">
                  <div class="clearfix flex" style="font-weight: 900;font-size: .14rem;padding-bottom: .1rem;">
                     <span>时空地图</span>
                     <!-- <el-button icon="el-icon-rank" style="float: right; padding: 3px 0" type="text"></el-button> -->
                     <img src="@/static/image/fangda.png" @click="fangdaClick(2)"
                        style="width: .18rem;height: .18rem;" alt="" />
                  </div>
                  <view id="spaceTime" style="height: 1.51rem;width: 100%;position: relative;"></view>
               </el-card>
               <el-card style="width: 100%;height: 2.06rem;">
                  <div class="clearfix" style="font-weight: 900;font-size: .14rem;padding-bottom: .1rem;">
                     <span>来源</span>
                  </div>
                  <ul class="font-family" style="height: 300rpx;font-size: .12rem;line-height: .3rem;">
                     <li>1.《明史·卷二百九十九·列作品. p52</li>
                     <li>2.《进(本草纲目)疏》 p52</li>
                  </ul>
               </el-card>
            </div>
         </el-col>
         <!-- 右侧 -->
         <el-col :span="18" class="BoxRight">
            <div class="grid-content bg-purple-dark" style="width: 100%;">
               <el-card class="box-card" style="padding: 0;">
                  <div class="clearfix" style="font-weight: 900;font-size: .14rem;padding-bottom: .1rem;">
                     <span>基础信息</span>
                  </div>
                  <!-- 基础信息  -->
                  <cc-defineTable :tableData="tableArr"></cc-defineTable>
               </el-card>
               <el-card class="box-card" style=" min-height: 1.91rem; margin: .2rem 0;">
                  <el-tabs ref="tabs" v-model="activeName" @tab-click="handleClick">
                     <el-tab-pane label="代表著作" data-id="1" name="representative">
                        <Table1 :data="tableData" :columns="tableColumns" />
                     </el-tab-pane>
                     <el-tab-pane label="亲属关系" data-id="2" name="family ">
                        亲属关系
                     </el-tab-pane>
                     <el-tab-pane label="师承关系" data-id="3" name="mentoring ">师承关系</el-tab-pane>
                     <el-tab-pane label="社会关系" data-id="4" name="society">社会关系</el-tab-pane>
                     <el-tab-pane label="活动年谱" data-id="5" name="activity">活动年谱</el-tab-pane>
                  </el-tabs>
               </el-card>
               <el-card style=" margin-bottom: .2rem ;">
                  <div class="clearfix" style="font-weight: 900;font-size: .14rem;padding-bottom: .1rem;">
                     <span>相关附表/图像</span>
                  </div>
                  <view class="flex">
                     <el-image v-for="item in 4" :key="item" style="width: 2.05rem; height: 1.4rem"
                        src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"
                        fit="fill"></el-image>
                  </view>
               </el-card>
               <el-card class="box-card">
                  <div class="clearfix" style="font-weight: 900;font-size: .14rem;padding-bottom: .1rem;">
                     <span>相关附表/图像</span>
                  </div>
                  <ul class="font-family" style="font-size: .13rem;line-height: 2;">
                     <li>
                        [1|刘炜,谢蓉,张磊,等.向人文研究的国家数据基础设施建设[J|.中国图书馆学报,2016,42(5):29-39.
                     </li>
                     <li>
                        [2|周晨.国际数字人文研究特征与知识结构|J图书馆论坛2017.37(4):1-8.
                     </li>
                     <li>
                        [3]傅德华,于翠艳,李春博,关于创建“20 世纪中国人物传记资料全文数据库治的构想[川,中国者引,2009,714):24-26.
                     </li>
                     <li>
                        [4|于翠艳,傅德华,李春博,关于“20世纪中国人物传记资料全文数据库治的进展与困惑[J1.中国常引,2012.10111:20-22
                     </li>
                     <li>
                        [5]贾武。《湖南近代人物数据率》资源收录范围研究|J河南图书馆学利,2015,35(7):126.127.140.
                     </li>
                  </ul>
               </el-card>
            </div>
         </el-col>
      </el-row>
  <view class="relative">
    <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">
        <view style="font-weight: bold; font-size: 0.2rem">李时珍</view>
        <ul class="flex" style="line-height: 1.2; margin: 0.15rem 0">
          <li
            v-for="item in 4"
            style="
              background-color: #fff;
              padding: 0 0.08rem;
              border: 0.01rem solid #000;
              border-radius: 0.1rem;
              font-size: 0.12rem;
              text-align: center;
              margin-right: 0.15rem;
            "
          >
            VSDS
          </li>
        </ul>
        <view
          class="fz font-family"
          style="
            font-size: 0.13rem;
            font-weight: normal;
            line-height: 0.2rem;
            letter-spacing: 0.03rem;
          "
        >
          李时珍(1518年-1593年)，字:
          东璧，时人谓之:李东璧。号濒湖，晚年自号濒湖山人，湖北薪州(今湖北省黄冈市薪春县薪州镇)人，汉族，生于明武宗正德十三年(公元1518年)，卒于神宗万历二十二年(公元1593年)。是中国明代与万密斋齐名的医学家、药物学家、博物学家、著述家。李时珍对道家医学的继承是多方面的，曾参考历代有关医药及其学术书籍八百余种，结合自身经验和调查研究，历时27年编成《本草纲目》一书，是我国古代药物学的总结性巨著，在国内外均有很高的评价，已有几种文字的译本或节译本，其著有《濒湖脉学》
        </view>
        <view class="flex" style="width: 100%; margin: 0.25rem 0 0.15rem 0">
          <view>
            <!-- <el-button style="padding: 10rpx;" size="mini" icon="el-icon-folder-add">收藏</el-button> -->
            <el-button style="padding: 0.05rem 0.085rem" class="yinyong flex">
              <img src="@/static/image/yinyong.png" alt="" />引用</el-button
            >
          </view>
          <view style="font-size: 0.12rem; color: #244a7b" @click="ProfileClick"
            >阅读更多></view
          >
        </view>
      </view>
      <view style="width: 5%"></view>
    </view>
    <el-row style="padding: 0 1.2rem 0; padding-top: 0.24rem">
      <!-- 左侧 -->
      <el-col
        :span="5"
        class="BoxLeft"
        style="padding-right: 0.2rem; width: 2.8rem"
      >
        <div class="grid-content bg-purple-dark flex flex-column">
          <el-card class="box-card" style="width: 100%; height: 2.06rem">
            <div
              class="clearfix flex"
              style="
                font-weight: 900;
                font-size: 0.14rem;
                padding-bottom: 0.1rem;
              "
            >
              <span
                style="
                  margin-left: 0.12rem;
                  font-size: 0.14rem;
                  font-weight: 900;
                "
                >关系图谱</span
              >
              <!-- <el-button icon="el-icon-rank" style="float: right; padding: 3px 0;" type="text"></el-button> -->
              <img
                src="@/static/image/fangda.png"
                @click="fangdaClick(1)"
                style="width: 0.18rem; height: 0.18rem"
                alt=""
              />
            </div>
            <view id="relation" style="height: 1.51rem; width: 100%"></view>
          </el-card>
          <el-card
            class="box-card"
            style="width: 100%; height: 2.06rem; margin: 0.26rem 0"
          >
            <div
              class="clearfix flex"
              style="
                font-weight: 900;
                font-size: 0.14rem;
                padding-bottom: 0.1rem;
              "
            >
              <span>时空地图</span>
              <!-- <el-button icon="el-icon-rank" style="float: right; padding: 3px 0" type="text"></el-button> -->
              <img
                src="@/static/image/fangda.png"
                @click="fangdaClick(2)"
                style="width: 0.18rem; height: 0.18rem"
                alt=""
              />
            </div>
            <view
              id="spaceTime"
              style="height: 1.51rem; width: 100%; position: relative"
            ></view>
          </el-card>
          <el-card style="width: 100%; height: 2.06rem">
            <div
              class="clearfix"
              style="
                font-weight: 900;
                font-size: 0.14rem;
                padding-bottom: 0.1rem;
              "
            >
              <span>来源</span>
            </div>
            <ul
              class="font-family"
              style="height: 300rpx; font-size: 0.12rem; line-height: 0.3rem"
            >
              <li>1.《明史·卷二百九十九·列作品. p52</li>
              <li>2.《进(本草纲目)疏》 p52</li>
            </ul>
          </el-card>
        </div>
      </el-col>
      <!-- 右侧 -->
      <el-col :span="18" class="BoxRight">
        <div class="grid-content bg-purple-dark" style="width: 100%">
          <el-card class="box-card" style="padding: 0">
            <div
              class="clearfix"
              style="
                font-weight: 900;
                font-size: 0.14rem;
                padding-bottom: 0.1rem;
              "
            >
              <span>基础信息</span>
            </div>
            <!-- 基础信息  -->
            <cc-defineTable :tableData="tableArr"></cc-defineTable>
          </el-card>
          <el-card
            class="box-card"
            style="min-height: 1.91rem; margin: 0.2rem 0"
          >
            <el-tabs ref="tabs" v-model="activeName" @tab-click="handleClick">
              <el-tab-pane label="代表著作" data-id="1" name="representative">
                <Table1 :data="tableData" :columns="tableColumns" />
              </el-tab-pane>
              <el-tab-pane label="亲属关系" data-id="2" name="family ">
                亲属关系
              </el-tab-pane>
              <el-tab-pane label="师承关系" data-id="3" name="mentoring "
                >师承关系</el-tab-pane
              >
              <el-tab-pane label="社会关系" data-id="4" name="society"
                >社会关系</el-tab-pane
              >
              <el-tab-pane label="活动年谱" data-id="5" name="activity"
                >活动年谱</el-tab-pane
              >
            </el-tabs>
          </el-card>
          <el-card style="margin-bottom: 0.2rem">
            <div
              class="clearfix"
              style="
                font-weight: 900;
                font-size: 0.14rem;
                padding-bottom: 0.1rem;
              "
            >
              <span>相关附表/图像</span>
            </div>
            <view class="flex">
              <el-image
                v-for="item in 4"
                :key="item"
                style="width: 2.05rem; height: 1.4rem"
                src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"
                fit="fill"
              ></el-image>
            </view>
          </el-card>
          <el-card class="box-card">
            <div
              class="clearfix"
              style="
                font-weight: 900;
                font-size: 0.14rem;
                padding-bottom: 0.1rem;
              "
            >
              <span>相关附表/图像</span>
            </div>
            <ul class="font-family" style="font-size: 0.13rem; line-height: 2">
              <li>
                [1|刘炜,谢蓉,张磊,等.向人文研究的国家数据基础设施建设[J|.中国图书馆学报,2016,42(5):29-39.
              </li>
              <li>
                [2|周晨.国际数字人文研究特征与知识结构|J图书馆论坛2017.37(4):1-8.
              </li>
              <li>
                [3]傅德华,于翠艳,李春博,关于创建“20
                世纪中国人物传记资料全文数据库治的构想[川,中国者引,2009,714):24-26.
              </li>
              <li>
                [4|于翠艳,傅德华,李春博,关于“20世纪中国人物传记资料全文数据库治的进展与困惑[J1.中国常引,2012.10111:20-22
              </li>
              <li>
                [5]贾武。《湖南近代人物数据率》资源收录范围研究|J河南图书馆学利,2015,35(7):126.127.140.
              </li>
            </ul>
          </el-card>
        </div>
      </el-col>
    </el-row>

      <!-- 个人小传 -->
      <el-dialog :visible.sync="isProfile">
         <view class="ProfileNav flex flex-center">
            个人小传
         </view>
         <view  style="padding: .44rem .3rem;min-height: 7.32rem;">
            <view 
               style="margin-bottom: .2rem; background-color: #F0F0F0;padding: .18rem .1rem .1rem .27rem;font-size: .12rem;line-height: .24rem;font-weight: 400;">
               <view  style="color: #2C2C2C;">
                  蕙展丁丑同里日岩额序先考月池翁著《四彭酸明》八卷，皆精指奥室，茂犀未能疯造，珍因撮粹想菜，僵撰此唐，以便智睛，服指南。世之雷病雨家，咸以服焉首务，不知派乃四能之末，谓之巧者雨。上士欲舍其全，非四不可。
               </view>
               <view class="flex">
                  <view ></view>
                  <view  style="font-weight: 700;color: #2C2C2C;">——《奇八服考》P 3</view>
               </view>
            </view>
         </view>
      </el-dialog>
    <!-- 个人小传 -->
    <el-dialog :visible.sync="isProfile">
      <view class="ProfileNav flex flex-center"> 个人小传 </view>
      <view style="padding: 0.44rem 0.3rem; min-height: 7.32rem">
        <view
          style="
            margin-bottom: 0.2rem;
            background-color: #f0f0f0;
            padding: 0.18rem 0.1rem 0.1rem 0.27rem;
            font-size: 0.12rem;
            line-height: 0.24rem;
            font-weight: 400;
          "
        >
          <view style="color: #2c2c2c">
            蕙展丁丑同里日岩额序先考月池翁著《四彭酸明》八卷，皆精指奥室，茂犀未能疯造，珍因撮粹想菜，僵撰此唐，以便智睛，服指南。世之雷病雨家，咸以服焉首务，不知派乃四能之末，谓之巧者雨。上士欲舍其全，非四不可。
          </view>
          <view class="flex">
            <view></view>
            <view style="font-weight: 700; color: #2c2c2c"
              >——《奇八服考》P 3</view
            >
          </view>
        </view>
      </view>
    </el-dialog>



      <!-- 返回顶部 -->
      <el-col style="position: absolute;bottom: 1rem;left:1.2rem ;">
         <el-button style="width: .50rem;height: .50rem;font-size: .3rem;" icon="el-icon-top" circle
            @click="scrollToTop"></el-button>
      </el-col>
   </view>
    <!-- 返回顶部 -->
    <el-col style="position: absolute; bottom: 1rem; left: 1.2rem">
      <el-button
        style="width: 0.5rem; height: 0.5rem; font-size: 0.3rem"
        icon="el-icon-top"
        circle
        @click="scrollToTop"
      ></el-button>
    </el-col>
  </view>
</template>

<script>
   import * as echarts from 'echarts';
   import 'echarts/extension/bmap/bmap';
   import {
      loadBMap
   } from "@/static/map.js"
   import Table1 from '@/components/table1/table1.vue'
   export default {
      components: {
         Table1
      },
      data() {
         return {
            // 标题顶部栏需要的东西
            idIndex: 0,
            // -------
            // 小传
            isProfile: false,
            // 关系图谱
            activeName: 'representative',
            // 基础信息
            tableArr: [{
                  'list': [{
                        'name': '别名',
                        'value': '李东璧、药圣、李三七'
                     },
                     {
                        'name': '字',
                        'value': '东璧'
                     },
                     {
                        'name': '号',
                        'value': '频湖山人'
                     },
                     {
                        'name': '所处时期',
                        'value': '明朝'
                     },
                     {
                        'name': '民族',
                        'value': '166g'
                     }
                  ]
import * as echarts from "echarts";
import "echarts/extension/bmap/bmap";
import { loadBMap } from "@/static/map.js";
import Table1 from "@/components/table1/table1.vue";
export default {
  components: {
    Table1
  },
  data() {
    return {
      // 标题顶部栏需要的东西
      idIndex: 0,
      // -------
      // 小传
      isProfile: false,
      // 关系图谱
      activeName: "representative",
      // 基础信息
      tableArr: [
        {
          list: [
            {
              name: "别名",
              value: "李东璧、药圣、李三七"
            },
            {
              name: "字",
              value: "东璧"
            },
            {
              name: "号",
              value: "频湖山人"
            },
            {
              name: "所处时期",
              value: "明朝"
            },
            {
              name: "民族",
              value: "166g"
            }
          ]
        },
        {
          list: [
            {
              name: "籍贯",
              value: "黄州府薪州 (今湖北省薪春县)"
            },
            {
              name: "性别",
              value: "男"
            },
            {
              name: "职官",
              value: "太医院判"
            },
            {
              name: "流派",
              value: "医经学派"
            },
            {
              name: "学术特点",
              value: "考古证今、穷究物理"
            }
          ]
        }
      ],
      // 代表著作
      tableColumns: [
        {
          prop: "worksName",
          label: "作品名"
        },
        {
          prop: "works",
          label: "作品"
        },
        {
          prop: "literature",
          label: "文献关系"
        },
        {
          prop: "epoch",
          label: "著作时期"
        },
        {
          prop: "category",
          label: "类别"
        }
        // { type: 'button', action: 'edit', label: 'Edit' }
      ],
      tableData: [
        {
          worksName: "本草纲目",
          works: "李二牛",
          literature: "作者",
          epoch: "现代",
          category: "中医学",
          id: 1
        },
        {
          worksName: "本草纲目",
          works: "李二牛",
          literature: "作者",
          epoch: "现代",
          category: "中医学",
          id: 1
        }
      ]
    };
  },
  onLoad(options) {
    this.idIndex = options.id;
  },
  mounted() {
    // 关系图谱
    this.relation();
    // 时空地图
    loadBMap("5USVDAhhS4ssz44HLq3gNPZai7naXf4Q").then(() => {
      this.spaceTime();
    });
    this.$nextTick(() => {
      // 获取第一个选项卡的 DOM 元素
      const firstTab = this.$refs.tabs.$el.querySelector(
        ".el-tabs__active-bar"
      );
      firstTab.style.transform = "translateX(" + "-.2rem" + ")";
    });

               },
               {
                  'list': [{
                        'name': '籍贯',
                        'value': '黄州府薪州 (今湖北省薪春县)'
                     },
                     {
                        'name': '性别',
                        'value': '男'
                     },
                     {
                        'name': '职官',
                        'value': '太医院判'
                     },
                     {
                        'name': '流派',
                        'value': '医经学派'
                     },
                     {
                        'name': '学术特点',
                        'value': '考古证今、穷究物理'
                     }
                  ]
               }
            ],
            // 代表著作
            tableColumns: [{
                  prop: 'worksName',
                  label: '作品名'
               },
               {
                  prop: 'works',
                  label: '作品'
               },
               {
                  prop: 'literature',
                  label: '文献关系'
               },
               {
                  prop: 'epoch',
                  label: '著作时期'
               }, {
                  prop: 'category',
                  label: '类别'
               },
               // { type: 'button', action: 'edit', label: 'Edit' }
            ],
            tableData: [{
               worksName: '本草纲目',
               works: '李二牛',
               literature: '作者',
               epoch: '现代',
               category: '中医学',
               id: 1
            }, {
               worksName: '本草纲目',
               works: '李二牛',
               literature: '作者',
               epoch: '现代',
               category: '中医学',
               id: 1
    // 监听窗口大小变化
    window.addEventListener("resize", this.relation);
  },
  methods: {
    // 放大地图跳转
    fangdaClick(index) {
      if (index == 1) {
        uni.navigateTo({
          url: "/pages/character/index"
        });
      } else if (index == 2) {
        uni.navigateTo({
          url: "/pages/characterMap/characterMap"
        });
      }
    },
    // 小传
    ProfileClick() {
      this.isProfile = !this.isProfile;
    },
    // 返回上一页
    goBack() {
      this.$router.go(-1);
    },
    // 返回顶部
    scrollToTop() {
      window.scrollTo({
        top: 0,
        behavior: "smooth" // 使用平滑滚动
      });
    },
    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");
      var myChart = echarts.init(chartDom);

            }]
         }
      },
      onLoad(options) {
         this.idIndex = options.id
      },
      mounted() {
      // 假设您有节点名称和它们之间的关系数据
      var nodes = ["李时珍", "成就", "传承", "亲友", "著作"];
      var relationships = [
        {
          source: "李时珍",
          target: "成就"
        },
        {
          source: "李时珍",
          target: "传承"
        },
        {
          source: "李时珍",
          target: "亲友"
        },
        {
          source: "李时珍",
          target: "著作"
        }
        // 其他关系...
      ];

         // 关系图谱
         this.relation()
         // 时空地图
         loadBMap('5USVDAhhS4ssz44HLq3gNPZai7naXf4Q').then(() => {
            this.spaceTime()
         })
         this.$nextTick(() => {
            // 获取第一个选项卡的 DOM 元素
            const firstTab = this.$refs.tabs.$el.querySelector('.el-tabs__active-bar');
            firstTab.style.transform = 'translateX(' + '-.2rem' + ')'
         });
      // 根据关系数据生成连接线
      var links = [];
      relationships.forEach(function (relationship) {
        var sourceIndex = nodes.indexOf(relationship.source);
        var targetIndex = nodes.indexOf(relationship.target);
        if (sourceIndex !== -1 && targetIndex !== -1) {
          links.push({
            source: sourceIndex,
            target: targetIndex
          });
        }
      });
      let FontSize = 12; // 字体大小
      let BorderWidth = 2; // 边框大小
      let SymbolSize = 80; // 尺寸距离
      // 不同尺寸下修改echarts的字体
      if (window.innerWidth > 2560 && window.innerWidth <= 3840) {
        FontSize = 28;
        BorderWidth = 5;
        SymbolSize = 100;
      } else if (window.innerWidth > 1920 && window.innerWidth <= 2560) {
        FontSize = 28;
        BorderWidth = 4;
        SymbolSize = 90;
      } else if (window.innerWidth >= 1366 && window.innerWidth <= 1920) {
        FontSize = 18;
        BorderWidth = 4;
        SymbolSize = 70;
      }
      // 根据nodes动态生成节点数据
      var nodeData = nodes.map(function (node, index) {
        return {
          name: node,
          x: Math.random() * 1000, // 设置随机x坐标位置
          y: Math.random() * 600, // 设置随机y坐标位置
          itemStyle: {
            color: getColorByIndex(index), // 可以根据索引设置不同的颜色
            borderWidth: BorderWidth,
            borderColor: getColorByIndex(index + 1)
          }
        };
      });
      // 设置颜色
      function getColorByIndex(index) {
        var colors = ["#ecf4ff", "#dd9795", "#f1edbe", "#ecf4ff", "#c5dbd8"]; // 可以根据实际情况设置颜色数组
        return colors[index % colors.length];
      }

      var option;
      option = {
        tooltip: {},
        animationDurationUpdate: 1500,
        animationEasingUpdate: "quinticInOut",
        series: [
          {
            type: "graph",
            layout: "none",
            symbolSize: SymbolSize, // 调整节点大小
            label: {
              show: true,
              color: "black", // 设置节点文字颜色为黑色
              fontSize: FontSize // 设置文字大小
            },
            edgeSymbol: ["circle"],
            edgeSymbolSize: [4, 10],
            edgeLabel: {
              fontSize: 40
            },
            data: nodeData,
            links: [
              {
                source: 0,
                target: 1,
                symbolSize: [5, 20]
              },
              {
                source: "Node 2",
                target: "Node 1"
              },
              {
                source: "Node 1",
                target: "Node 3"
              },
              {
                source: "Node 2",
                target: "Node 3"
              },
              {
                source: "Node 2",
                target: "Node 4"
              },
              {
                source: "Node 1",
                target: "Node 4"
              }
            ],
            lineStyle: {
              opacity: 0.9,
              width: 2,
              curveness: 0
            }
          }
        ]
      };

         // 监听窗口大小变化
         window.addEventListener('resize', this.relation);
      },
      methods: {
         // 放大地图跳转
         fangdaClick(index) {
            if (index == 1) {
               uni.navigateTo({
                  url: '/pages/character/index'
               })
            } else if (index == 2) {
               uni.navigateTo({
                  url: '/pages/characterMap/characterMap'
               })
            }
         },
         // 小传
         ProfileClick() {
            this.isProfile = !this.isProfile
         },
         // 返回上一页
         goBack() {
            this.$router.go(-1);
         },
         // 返回顶部
         scrollToTop() {
            window.scrollTo({
               top: 0,
               behavior: "smooth" // 使用平滑滚动
            });
         },
         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(-' + .2 + 'rem)'
               } else if (index == 1) {
                  firstTab.style.transform = 'translateX(' + .85 * index + 'rem)'
               } else if (index == 2) {
                  firstTab.style.transform = 'translateX(' + .93 * index + 'rem)'
               } else if (index == 3) {
                  firstTab.style.transform = 'translateX(' + .95 * index + 'rem)'
               } else if (index == 4) {
                  firstTab.style.transform = 'translateX(' + .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');
            var myChart = echarts.init(chartDom);
      // 将生成的连接线添加到echarts图表的option中
      option.series[0].links = links;
      option && myChart.setOption(option);
    },
    // 时空地图
    spaceTime() {
      var chartDom = document.getElementById("spaceTime");
      var myChart = echarts.init(chartDom);
      var option;

            // 假设您有节点名称和它们之间的关系数据
            var nodes = ['李时珍', '成就', '传承', '亲友', '著作'];
            var relationships = [{
                  source: '李时珍',
                  target: '成就'
               },
               {
                  source: '李时珍',
                  target: '传承'
               },
               {
                  source: '李时珍',
                  target: '亲友'
               },
               {
                  source: '李时珍',
                  target: '著作'
               },
               // 其他关系...
            ];
      const data = [
        {
          name: "海门",
          value: 9
        },
        {
          name: "金昌",
          value: 19
        },
        {
          name: "泉州",
          value: 21
        },
        {
          name: "衢州",
          value: 177
        },
        {
          name: "廊坊",
          value: 193
        },
        {
          name: "菏泽",
          value: 194
        },
        {
          name: "合肥",
          value: 229
        },
        {
          name: "武汉",
          value: 273
        },
        {
          name: "大庆",
          value: 279
        }
      ];
      const geoCoordMap = {
        海门: [121.15, 31.89],
        鄂尔多斯: [109.781327, 39.608266],
        招远: [120.38, 37.35],
        平顶山: [113.29, 33.75],
        邢台: [114.48, 37.05],
        德州: [116.29, 37.45],
        济宁: [116.59, 35.38],
        荆州: [112.239741, 30.335165],
        宜昌: [111.3, 30.7],
        义乌: [120.06, 29.32],
        丽水: [119.92, 28.45],
        洛阳: [112.44, 34.7],
        秦皇岛: [119.57, 39.95],
        株洲: [113.16, 27.83],
        石家庄: [114.48, 38.03],
        莱芜: [117.67, 36.19],
        常德: [111.69, 29.05],
        保定: [115.48, 38.85],
        湘潭: [112.91, 27.87],
        金华: [119.64, 29.12],
        岳阳: [113.09, 29.37],
        长沙: [113, 28.21],
        衢州: [118.88, 28.97],
        廊坊: [116.7, 39.53],
        菏泽: [115.480656, 35.23375],
        合肥: [117.27, 31.86],
        武汉: [114.31, 30.52],
        大庆: [125.03, 46.58]
      };
      const convertData = function (data) {
        var res = [];
        for (var i = 0; i < data.length; i++) {
          var geoCoord = geoCoordMap[data[i].name];
          if (geoCoord) {
            res.push({
              name: data[i].name,
              value: geoCoord.concat(data[i].value)
            });
          }
        }
        return res;
      };
      option = {
        tooltip: {
          trigger: "item"
        },
        bmap: {
          center: [104.114129, 37.550339],
          zoom: 1,
          roam: true,
          mapStyle: {
            styleJson: [
              {
                featureType: "water",
                elementType: "all",
                stylers: {
                  color: "#d1d1d1"
                }
              },
              {
                featureType: "land",
                elementType: "all",
                stylers: {
                  color: "#f3f3f3"
                }
              },
              {
                featureType: "manmade",
                elementType: "all",
                stylers: {
                  color: "#d1d1d1"
                }
              },
              {
                featureType: "local",
                elementType: "all",
                stylers: {
                  color: "#d1d1d1"
                }
              },
              {
                featureType: "arterial",
                elementType: "labels",
                stylers: {
                  visibility: "off"
                }
              },
              {
                featureType: "boundary",
                elementType: "all",
                stylers: {
                  color: "#fefefe"
                }
              },
              {
                featureType: "building",
                elementType: "all",
                stylers: {
                  color: "#d1d1d1"
                }
              },
              {
                featureType: "label",
                elementType: "labels.text.fill",
                stylers: {
                  color: "#999999"
                }
              }
            ]
          }
        },
        series: [
          {
            name: "pm2.5",
            type: "scatter",
            coordinateSystem: "bmap",
            data: convertData(data),
            symbolSize: function (val) {
              return val[2] / 10;
            },
            encode: {
              value: 2
            },
            credits: {
              enabled: false
            },
            label: {
              formatter: "{b}",
              position: "right",
              show: false
            },
            emphasis: {
              label: {
                show: true
              }
            }
          },
          {
            name: "Top 5",
            type: "effectScatter",
            coordinateSystem: "bmap",
            data: convertData(
              data
                .sort(function (a, b) {
                  return b.value - a.value;
                })
                .slice(0, 6)
            ),
            symbolSize: function (val) {
              return val[2] / 10;
            },
            encode: {
              value: 2
            },
            showEffectOn: "render",
            rippleEffect: {
              brushType: "stroke"
            },
            label: {
              formatter: "{b}",
              position: "right",
              show: true
            },
            itemStyle: {
              shadowBlur: 10,
              shadowColor: "#333"
            },
            emphasis: {
              scale: true
            },
            zlevel: 1
          }
        ]
      };

            // 根据关系数据生成连接线
            var links = [];
            relationships.forEach(function(relationship) {
               var sourceIndex = nodes.indexOf(relationship.source);
               var targetIndex = nodes.indexOf(relationship.target);
               if (sourceIndex !== -1 && targetIndex !== -1) {
                  links.push({
                     source: sourceIndex,
                     target: targetIndex
                  });
               }

            });
            let FontSize = 12; // 字体大小
            let BorderWidth = 2; // 边框大小
            let SymbolSize = 80; // 尺寸距离
            // 不同尺寸下修改echarts的字体
            if (window.innerWidth > 2560 && window.innerWidth <= 3840) {
               FontSize = 28
               BorderWidth = 5
               SymbolSize = 100
            } else if (window.innerWidth > 1920 && window.innerWidth <= 2560) {
               FontSize = 28
               BorderWidth = 4
               SymbolSize = 90
            } else if (window.innerWidth >= 1366 && window.innerWidth <= 1920) {
               FontSize = 18
               BorderWidth = 4
               SymbolSize = 70
            }
            // 根据nodes动态生成节点数据
            var nodeData = nodes.map(function(node, index) {
               return {
                  name: node,
                  x: Math.random() * 1000, // 设置随机x坐标位置
                  y: Math.random() * 600, // 设置随机y坐标位置
                  itemStyle: {
                     color: getColorByIndex(index), // 可以根据索引设置不同的颜色
                     borderWidth: BorderWidth,
                     borderColor: getColorByIndex(index + 1),
                  }
               };
            });
            // 设置颜色
            function getColorByIndex(index) {
               var colors = ['#ecf4ff', '#dd9795', '#f1edbe', '#ecf4ff', '#c5dbd8']; // 可以根据实际情况设置颜色数组
               return colors[index % colors.length];
            }

            var option;
            option = {
               tooltip: {},
               animationDurationUpdate: 1500,
               animationEasingUpdate: 'quinticInOut',
               series: [{
                  type: 'graph',
                  layout: 'none',
                  symbolSize: SymbolSize, // 调整节点大小
                  label: {
                     show: true,
                     color: 'black', // 设置节点文字颜色为黑色
                     fontSize: FontSize, // 设置文字大小
                  },
                  edgeSymbol: ['circle'],
                  edgeSymbolSize: [4, 10],
                  edgeLabel: {
                     fontSize: 40
                  },
                  data: nodeData,
                  links: [{
                        source: 0,
                        target: 1,
                        symbolSize: [5, 20]
                     },
                     {
                        source: 'Node 2',
                        target: 'Node 1'
                     },
                     {
                        source: 'Node 1',
                        target: 'Node 3'
                     },
                     {
                        source: 'Node 2',
                        target: 'Node 3'
                     },
                     {
                        source: 'Node 2',
                        target: 'Node 4'
                     },
                     {
                        source: 'Node 1',
                        target: 'Node 4'
                     }
                  ],
                  lineStyle: {
                     opacity: 0.9,
                     width: 2,
                     curveness: 0
                  }
               }]
            };

            // 将生成的连接线添加到echarts图表的option中
            option.series[0].links = links;
            option && myChart.setOption(option);
         },
         // 时空地图
         spaceTime() {
            var chartDom = document.getElementById('spaceTime');
            var myChart = echarts.init(chartDom);
            var option;

            const data = [{
                  name: '海门',
                  value: 9
               },
               {
                  name: '金昌',
                  value: 19
               },
               {
                  name: '泉州',
                  value: 21
               },
               {
                  name: '衢州',
                  value: 177
               },
               {
                  name: '廊坊',
                  value: 193
               },
               {
                  name: '菏泽',
                  value: 194
               },
               {
                  name: '合肥',
                  value: 229
               },
               {
                  name: '武汉',
                  value: 273
               },
               {
                  name: '大庆',
                  value: 279
               }
            ];
            const geoCoordMap = {
               海门: [121.15, 31.89],
               鄂尔多斯: [109.781327, 39.608266],
               招远: [120.38, 37.35],
               平顶山: [113.29, 33.75],
               邢台: [114.48, 37.05],
               德州: [116.29, 37.45],
               济宁: [116.59, 35.38],
               荆州: [112.239741, 30.335165],
               宜昌: [111.3, 30.7],
               义乌: [120.06, 29.32],
               丽水: [119.92, 28.45],
               洛阳: [112.44, 34.7],
               秦皇岛: [119.57, 39.95],
               株洲: [113.16, 27.83],
               石家庄: [114.48, 38.03],
               莱芜: [117.67, 36.19],
               常德: [111.69, 29.05],
               保定: [115.48, 38.85],
               湘潭: [112.91, 27.87],
               金华: [119.64, 29.12],
               岳阳: [113.09, 29.37],
               长沙: [113, 28.21],
               衢州: [118.88, 28.97],
               廊坊: [116.7, 39.53],
               菏泽: [115.480656, 35.23375],
               合肥: [117.27, 31.86],
               武汉: [114.31, 30.52],
               大庆: [125.03, 46.58]
            };
            const convertData = function(data) {
               var res = [];
               for (var i = 0; i < data.length; i++) {
                  var geoCoord = geoCoordMap[data[i].name];
                  if (geoCoord) {
                     res.push({
                        name: data[i].name,
                        value: geoCoord.concat(data[i].value)
                     });
                  }
               }
               return res;
            };
            option = {
               tooltip: {
                  trigger: 'item'
               },
               bmap: {
                  center: [104.114129, 37.550339],
                  zoom: 1,
                  roam: true,
                  mapStyle: {
                     styleJson: [{
                           featureType: 'water',
                           elementType: 'all',
                           stylers: {
                              color: '#d1d1d1'
                           }
                        },
                        {
                           featureType: 'land',
                           elementType: 'all',
                           stylers: {
                              color: '#f3f3f3'
                           }
                        },
                        {
                           featureType: 'manmade',
                           elementType: 'all',
                           stylers: {
                              color: '#d1d1d1'
                           }
                        },
                        {
                           featureType: 'local',
                           elementType: 'all',
                           stylers: {
                              color: '#d1d1d1'
                           }
                        },
                        {
                           featureType: 'arterial',
                           elementType: 'labels',
                           stylers: {
                              visibility: 'off'
                           }
                        },
                        {
                           featureType: 'boundary',
                           elementType: 'all',
                           stylers: {
                              color: '#fefefe'
                           }
                        },
                        {
                           featureType: 'building',
                           elementType: 'all',
                           stylers: {
                              color: '#d1d1d1'
                           }
                        },
                        {
                           featureType: 'label',
                           elementType: 'labels.text.fill',
                           stylers: {
                              color: '#999999'
                           }
                        }
                     ]
                  }
               },
               series: [{
                     name: 'pm2.5',
                     type: 'scatter',
                     coordinateSystem: 'bmap',
                     data: convertData(data),
                     symbolSize: function(val) {
                        return val[2] / 10;
                     },
                     encode: {
                        value: 2
                     },
                     credits: {
                        enabled: false
                     },
                     label: {
                        formatter: '{b}',
                        position: 'right',
                        show: false
                     },
                     emphasis: {
                        label: {
                           show: true
                        }
                     }
                  },
                  {
                     name: 'Top 5',
                     type: 'effectScatter',
                     coordinateSystem: 'bmap',
                     data: convertData(
                        data
                        .sort(function(a, b) {
                           return b.value - a.value;
                        })
                        .slice(0, 6)
                     ),
                     symbolSize: function(val) {
                        return val[2] / 10;
                     },
                     encode: {
                        value: 2
                     },
                     showEffectOn: 'render',
                     rippleEffect: {
                        brushType: 'stroke'
                     },
                     label: {
                        formatter: '{b}',
                        position: 'right',
                        show: true
                     },
                     itemStyle: {
                        shadowBlur: 10,
                        shadowColor: '#333'
                     },
                     emphasis: {
                        scale: true
                     },
                     zlevel: 1
                  }
               ]
            };


            option && myChart.setOption(option);

         },

      }
   }
      option && myChart.setOption(option);
    }
  }
};
</script>

<style>
   /* Table1表格里面的数据 */
   ::v-deep .is-leaf {
      .cell {
         font-size: .14rem !important;
         height: .4rem !important;
         line-height: .4rem !important;
      }
   }
/* Table1表格里面的数据 */
::v-deep .is-leaf {
  .cell {
    font-size: 0.14rem !important;
    height: 0.4rem !important;
    line-height: 0.4rem !important;
  }
}

   ::v-deep .el-table__body {
      .cell {
         font-size: .14rem !important;
         height: .4rem !important;
         line-height: .4rem !important;
      }
   }
::v-deep .el-table__body {
  .cell {
    font-size: 0.14rem !important;
    height: 0.4rem !important;
    line-height: 0.4rem !important;
  }
}

   /* --------------- */
/* --------------- */

   .BoxLeft ::v-deep.el-card__body {
      padding: .1rem .11rem !important;
   }
.BoxLeft ::v-deep.el-card__body {
  padding: 0.1rem 0.11rem !important;
}

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

/* 个人小传 ------------------*/
::v-deep .el-dialog__header {
  display: none;
}

   /* 个人小传 ------------------*/
   ::v-deep .el-dialog__header {
      display: none;
   }
::v-deep .el-dialog__body {
  padding: 0;
}

   ::v-deep .el-dialog__body {
      padding: 0;
   }
.ProfileNav {
  width: 100%;
  height: 0.7rem;
  background: url(@/static/image/ProfileBg.png);
  background-size: 100% 100%;
  font-size: 0.24rem;
  color: #2c2c2c;
  font-weight: bold;
}

   .ProfileNav {
      width: 100%;
      height: 0.7rem;
      background: url(@/static/image/ProfileBg.png);
      background-size: 100% 100%;
      font-size: .24rem;
      color: #2C2C2C;
      font-weight: bold;
   }
/* ------------------- */

   /* ------------------- */
img {
  width: 100%;
  height: 100%;
}

* {
  box-sizing: border-box;
}

   img {
      width: 100%;
      height: 100%;
   }
.NavTop {
  background-color: #0c274c;
  padding: 15rpx 25rpx;
  color: #fff !important;
}
.NavTop img {
  width: 30rpx;
  height: 30rpx;
  vertical-align: middle;
}

   * {
      box-sizing: border-box;
   }
.NavTop .NavTopr {
  img {
    margin-right: 10rpx;
  }
}

   .NavTop {
      background-color: #0c274c;
      padding: 15rpx 25rpx;
      color: #fff !important;
.mImage {
  width: 100%;
  height: 30rpx;
}
.mImage img {
  vertical-align: top;
}

      img {
         width: 30rpx;
         height: 30rpx;
         vertical-align: middle;
      }
.Midde {
  /* background-color: #dbeafd; */
  background-image: url(@/static/image/yongBg.png);
  background-size: 100% 100%;
  color: #000;
  align-items: flex-start;
  padding: 0.18rem 0.24rem;
}
.Midde view {
  color: #000;
}

      .NavTopr {
         img {
            margin-right: 10rpx;
         }
      }
   }
.Midde .MiddeBack {
  width: 0.6rem;
  height: 0.24rem;
  font-size: 0.12rem;
  padding: 0;
  border: 1px solid #9e9e9e;
}

   .mImage {
      width: 100%;
      height: 30rpx;
.yinyong {
  font-size: 0.12rem;
}
.yinyong img {
  width: 0.12rem;
  height: 0.1rem;
  vertical-align: top;
  margin-right: 0.03rem;
}

      img {
         vertical-align: top;
      }
   }
.el-dialog__wrapper {
  background: rgba(0, 0, 0, 0.3);
}

   .Midde {
      /* background-color: #dbeafd; */
      background-image: url(@/static/image/yongBg.png);
      background-size: 100% 100%;
      color: #000;
      align-items: flex-start;
      padding: .18rem .24rem ;
		
      view {
         color: #000;
      }

      .MiddeBack {
         width: 0.6rem;
         height: 0.24rem;
         font-size: .12rem;
         padding: 0;
         border: 1px solid  #9E9E9E;
      }
   }

   .yinyong {
      font-size: .12rem;

      img {
         width: .12rem;
         height: .1rem;
         vertical-align: top;
         margin-right: .03rem;
      }
   }

   .el-dialog__wrapper {
      background: rgba(0, 0, 0, .3);
   }

   .fz {
      /* line-height: 1.3;
.fz {
  /* line-height: 1.3;
      height: 100rpx;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 4;
      -webkit-box-orient: vertical; */
      color: #2C2C2C;
   }
  color: #2c2c2c;
}

   ::v-deep .el-card__body {
      padding: .1rem !important;
   }
::v-deep .el-card__body {
  padding: 0.1rem !important;
}

   /* echart地图水印 */
   ::v-deep .BMap_cpyCtrl {
      display: none;
   }
/* echart地图水印 */
::v-deep .BMap_cpyCtrl {
  display: none;
}

   ::v-deep .anchorBL {
      display: none;
   }
::v-deep .anchorBL {
  display: none;
}

   ::v-deep .el-tabs__nav-wrap::after {
      background-color: transparent;
   }
::v-deep .el-tabs__nav-wrap::after {
  background-color: transparent;
}

   ::v-deep .el-tabs__nav {
      margin-bottom: .1rem !important;
::v-deep .el-tabs__nav {
  margin-bottom: 0.1rem !important;
}

   }
::v-deep .el-tabs__nav-scroll {
  display: flex;
  justify-content: center;
}

   ::v-deep .el-tabs__nav-scroll {
      display: flex;
      justify-content: center;
   }
::v-deep .el-tabs__item {
  width: 1rem;
  font-size: 0.14rem;
  line-height: 0.4rem;
  height: 0.4rem;
}

   ::v-deep .el-tabs__item {
      width: 1rem;
      font-size: .14rem;
      line-height: .4rem;
      height: .4rem;
   }
::v-deep .el-tabs__header {
  margin: 0 0 10rpx;
}

   ::v-deep .el-tabs__header {
      margin: 0 0 10rpx;
   }
::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 {
      /* 设置滚动条宽度 */
      width: 1rem !important;
      height: .03rem !important;
      background-color: #597AA5;
      transform: translateX(-20px);
      /* margin-top: .09rem; */
   }
::v-deep .el-tabs__active-bar {
  top: 0.37rem !important;
}

   ::v-deep .el-tabs__active-bar {
      top: .37rem !important;
   }
::v-deep .el-table::before {
  background-color: #fff !important;
}

   ::v-deep .el-table::before {
      background-color: #fff !important;
   }
.BoxRight ::v-deep.el-card__body {
  padding: 0.2rem 0.14rem !important;
}

   .BoxRight ::v-deep.el-card__body {
      padding: .2rem .14rem !important;

   }

   .BoxRight .box-card {
      margin-bottom: .2rem !important;
   }
</style>
.BoxRight .box-card {
  margin-bottom: 0.2rem !important;
}
</style>