人物详情和地图

YM

2024-04-29 13a727c58400a256af3f7582b62d8237b227329e

人物详情和地图

 src/api/index.js

@@ -87,7 +87,7 @@
  return req1({
    url: "/person/source",
    method: "post",
    data: data
    params: data
  });
};
// 人物相关的 个人时空地图
@@ -95,7 +95,7 @@
  return req1({
    url: "/person/spaceTime",
    method: "post",
    data: data
    params: data
  });
};

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

@@ -129,7 +129,7 @@
  return req1({
    url: "/person/writings",
    method: "post",
    data: data
    params: data
  });
};
// 医学人物知识库 人物详情
@@ -137,14 +137,17 @@
  return req1({
    url: "/person/getPersonInfo",
    method: "post",
    data: Obj
    params: Obj
  });
};
// 医学人物知识库 基础检索
export const getFuzzySearch = (requestData) => {
  return req1({
    url: "/person/fuzzySearch?keyword=" + requestData?.keyword,
    method: "post"
    url: "/person/fuzzySearch",
    method: "post",
    params: {
      keyword: requestData?.keyword
    }
  });
};


 src/components/table1/table1.vue

@@ -1,23 +1,48 @@
<template>
  <div>
    <el-table  :min-height="height" :data="data" >
      <el-table-column min-width="110"  :sort-method="sortAge" v-for="column in columns" :key="column.prop" :label="column.label" header-align="center">
    <el-table :height="height" :data="data" style="width: 100%">
      <el-table-column
        :sort-method="sortAge"
        v-for="column in columns"
        :key="column.prop"
        :label="column.label"
        header-align="center"
      >
        <template slot-scope="scope" class="font-family">
          <template v-if="column.type === 'image'">
            <el-image :src="scope.row[column.prop]" alt="加载失败"></el-image>
          </template>
          <template v-else-if="column.type === 'button'">
            <el-button @click="handleButtonClick(column.action, scope.row)" size="small">{{ column.label }}</el-button>
            <el-button
              @click="handleButtonClick(column.action, scope.row)"
              size="small"
              >{{ column.label }}</el-button
            >
          </template>
          <template v-else>
            {{ scope.row[column.prop] }}
          </template>
        </template>
      </el-table-column>
      <el-table-column v-if="isHandle" label="操作" header-align="center" width="120">
      <el-table-column
        v-if="isHandle"
        label="操作"
        header-align="center"
        width="120"
      >
        <template slot-scope="scope">
          <el-button @click="handleAction1( scope.row)" type="success" size="mini" icon="el-icon-edit"></el-button>
          <el-button @click="handleAction2( scope.row)" type="danger" size="mini" icon="el-icon-delete"></el-button>
          <el-button
            @click="handleAction1(scope.row)"
            type="success"
            size="mini"
            icon="el-icon-edit"
          ></el-button>
          <el-button
            @click="handleAction2(scope.row)"
            type="danger"
            size="mini"
            icon="el-icon-delete"
          ></el-button>
        </template>
      </el-table-column>
    </el-table>
@@ -37,41 +62,42 @@
    },
    height: {
      type: Number,
      default () {
          return 96;
      }
    }, 
    isHandle: {
      default() {
        return 96;
      }
    },
    isHandle: {
      type: Boolean,
      default () {
          return false;
      }
      default() {
        return false;
      }
    }
  },
  methods: {
    sortAge (a, b) {
    sortAge(a, b) {
      // 自定义排序方法
      return a.age - b.age
      return a.age - b.age;
    },
    handleButtonClick (action, row) {
    handleButtonClick(action, row) {
      // 处理按钮点击事件
      // 在这里可以根据传入的 action 值执行相应的逻辑
      console.log('Button Clicked', action, row)
      console.log("Button Clicked", action, row);
    },
    handleAction1 (row) {
    handleAction1(row) {
      // 处理操作事件
      // 判断row中是否存在 describe 这个属性
      if ('describe' in row) {
        row.describe = row.describe !== '' ? decodeURIComponent(row.describe) : ''
      if ("describe" in row) {
        row.describe =
          row.describe !== "" ? decodeURIComponent(row.describe) : "";
      }
      this.$emit('amend', JSON.parse(JSON.stringify(row))) // 修改用户信息
      this.$emit("amend", JSON.parse(JSON.stringify(row))); // 修改用户信息
    },
    // 删除按钮
    async handleAction2 (row) {
      this.$emit('deleteClick', row)
    async handleAction2(row) {
      this.$emit("deleteClick", row);
    }
  }
}
};
</script>

<style scoped>
@@ -79,39 +105,40 @@
  display: flex;
  justify-content: flex-start;
}
::v-deep .el-table th,::v-deep .el-table td {
::v-deep .el-table th,
::v-deep .el-table td {
  text-align: center;
}
::v-deep .el-image__inner{
::v-deep .el-image__inner {
  width: 70px;
  height: 70px;
}
/* 表头 */
::v-deep .el-table__header{
    margin-bottom: .02rem;
::v-deep .el-table__header {
  margin-bottom: 0.02rem;
}
::v-deep .el-table__header th {
    height: .3rem;
    line-height: .3rem;
    font-size: .14rem;
  background-color: #597AA5;
  height: 0.3rem;
  line-height: 0.3rem;
  font-size: 0.14rem;
  background-color: #597aa5;
  color: white; /* 表头文字颜色为白色，增加对比度 */
  margin-bottom: .02rem !important;
  margin-bottom: 0.02rem !important;
}
/* 表格 */
::v-deep .el-table__body td {
    background-color:#DDE8F6;
    height: .3rem;
    line-height: .3rem;
    font-size: .14rem;
 color: #2C2C2C !important;
 border-bottom: .02rem solid #fff;
  background-color: #dde8f6;
  height: 0.3rem;
  line-height: 0.3rem;
  font-size: 0.14rem;
  color: #2c2c2c !important;
  border-bottom: 0.02rem solid #fff;
}
/* ::v-deep .el-table__body    {
    border-bottom: .02rem solid #fff !important;
} */
::v-deep .el-table .el-table__cell{
    font-size: 9px;
    padding: 0;
::v-deep .el-table .el-table__cell {
  font-size: 9px;
  padding: 0;
}
</style>

 src/pages/TcmSystem/TcmSystem.vue

@@ -406,6 +406,7 @@
      // 显示多少条职官数据
      institutionIndex: 4,
      // 机构和职官的类型 取值：OFFICIAL->职官 INSTITUTION->机构 ALL->职官、机构
      searchType: "ALL",
      classifyType: "ALL",
      // 机构和职官的id
      classifyId: "",
@@ -516,7 +517,7 @@
    getMList(obj) {
      this.pageLoading = true;
      let Obj = {
        medicalSearchType: "ALL",
        medicalSearchType: this.searchType,
        type: this.classifyType, //查询类型 取值：OFFICIAL->职官 INSTITUTION->机构 ALL->职官、机构
        name: this.SearchValue, //搜索框检索
        dynastyId: this.classifyId, //点击朝代查询数据时，带上此参数
@@ -544,14 +545,19 @@
    },
    // list数组 获取list里面的详情shuju
    ListClick(item) {
      console.log(item,this.searchType);
      let Obj = {
        id: item.dataId,
        type: item.type
        rowId: this.searchType == "ALL" ? item.id : item.rowId,
        medicalSearchType: this.searchType,
        type: this.classifyType, //查询类型 取值：OFFICIAL->职官 INSTITUTION->机构 ALL->职官、机构
        name: this.SearchValue, //搜索框检索
        dynastyId: this.classifyId, //点击朝代查询数据时，带上此参数
        sort: this.rankVal, //排序方式 取值：CREATE创建时间，NAME名称
      };
      getMedicalDetails(Obj).then((res) => {
        this.ListDetails = {
          ...item,
          ...res.object
          ...res.object.curr
        };
      });
      this.dialogVisible = !this.dialogVisible;

 src/pages/character/detail.vue

@@ -1,12 +1,14 @@
<template>
  <view class="relative">
    <headNav :idIndex="1" text="中医人物数据库" />
    <headNav :idIndex="1 + ''" text="中医人物数据库" />
    <view class="Midde flex">
      <el-button class="MiddeBack flex flex-center" @click="goBack"
        >返回</el-button
      >
      <view style="width: 70%" class="flex flex-center flex-column">
        <view style="font-weight: bold; font-size: 0.2rem">李时珍</view>
        <view style="font-weight: bold; font-size: 0.2rem">{{
          detailInfo.NAME
        }}</view>
        <ul class="flex" style="line-height: 1.2; margin: 0.15rem 0">
          <li
            v-for="item in 4"
@@ -32,8 +34,7 @@
            letter-spacing: 0.03rem;
          "
        >
          李时珍(1518年-1593年)，字:
          东璧，时人谓之:李东璧。号濒湖，晚年自号濒湖山人，湖北薪州(今湖北省黄冈市薪春县薪州镇)人，汉族，生于明武宗正德十三年(公元1518年)，卒于神宗万历二十二年(公元1593年)。是中国明代与万密斋齐名的医学家、药物学家、博物学家、著述家。李时珍对道家医学的继承是多方面的，曾参考历代有关医药及其学术书籍八百余种，结合自身经验和调查研究，历时27年编成《本草纲目》一书，是我国古代药物学的总结性巨著，在国内外均有很高的评价，已有几种文字的译本或节译本，其著有《濒湖脉学》
          {{ biogData.length ? biogData[0].content : "-" }}
        </view>
        <view class="flex" style="width: 100%; margin: 0.25rem 0 0.15rem 0">
          <view>
@@ -42,6 +43,7 @@
              <img src="@/static/image/yinyong.png" alt="" />引用</el-button
            >
          </view>
          <!-- v-if="biogData.length > 1" -->
          <view
            style="font-size: 0.12rem; color: #244a7b; cursor: pointer"
            @click="ProfileClick"
@@ -80,7 +82,7 @@
              <img
                src="@/static/image/fangda.png"
                @click="fangdaClick(1)"
                style="width: 0.18rem; height: 0.18rem"
                style="width: 0.18rem; height: 0.18rem; cursor: pointer"
                alt=""
              />
            </div>
@@ -103,8 +105,7 @@
              <img
                src="@/static/image/fangda.png"
                @click="fangdaClick(2)"
                style="width: 0.18rem; height: 0.18rem"
                alt=""
                style="width: 0.18rem; height: 0.18rem; cursor: pointer"
              />
            </div>
            <view
@@ -127,8 +128,18 @@
              class="font-family"
              style="height: 300rpx; font-size: 0.12rem; line-height: 0.3rem"
            >
              <li>1.《明史·卷二百九十九·列作品. p52</li>
              <li>2.《进(本草纲目)疏》 p52</li>
              <li
                style="
                  overflow: hidden;
                  text-overflow: ellipsis;
                  white-space: nowrap;
                "
                v-for="(item, index) in sourceDataList"
                :key="index"
                :title="item"
              >
                {{ index + 1 }}.{{ item }}
              </li>
            </ul>
          </el-card>
        </div>
@@ -156,20 +167,39 @@
          >
            <el-tabs ref="tabs" v-model="activeName" @tab-click="handleClick">
              <el-tab-pane label="代表著作" data-id="1" name="representative">
                <Table1 :data="tableData" :columns="tableColumns" />
                <Table1
                  :data="tableData1"
                  :columns="tableColumns1"
                  :height="400"
                />
              </el-tab-pane>
              <el-tab-pane label="亲属关系" data-id="2" name="family ">
                亲属关系
                <Table1
                  :data="tableData2"
                  :columns="tableColumns2"
                  :height="400"
                />
              </el-tab-pane>
              <el-tab-pane label="师承关系" data-id="3" name="mentoring "
                >师承关系</el-tab-pane
              >
              <el-tab-pane label="社会关系" data-id="4" name="society"
                >社会关系</el-tab-pane
              >
              <el-tab-pane label="活动年谱" data-id="5" name="activity"
                >活动年谱</el-tab-pane
              >
                ><Table1
                  :data="tableData3"
                  :columns="tableColumns2"
                  :height="400"
              /></el-tab-pane>
              <el-tab-pane label="社会关系" data-id="4" name="society">
                <Table1
                  :data="tableData4"
                  :columns="tableColumns2"
                  :height="400"
                />
              </el-tab-pane>
              <el-tab-pane label="活动年谱" data-id="5" name="activity">
                <Table1
                  :data="tableData5"
                  :columns="tableColumns3"
                  :height="400"
                />
              </el-tab-pane>
            </el-tabs>
          </el-card>
          <el-card style="margin-bottom: 0.2rem">
@@ -185,10 +215,10 @@
            </div>
            <view class="flex">
              <el-image
                v-for="item in 4"
                v-for="item in imageList"
                :key="item"
                style="width: 2.05rem; height: 1.4rem"
                src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"
                :src="item"
                fit="fill"
              ></el-image>
            </view>
@@ -241,6 +271,7 @@
      <view class="ProfileNav flex flex-center"> 个人小传 </view>
      <view style="padding: 0.44rem 0.3rem; min-height: 7.32rem">
        <view
          v-for="item in biogData"
          style="
            margin-bottom: 0.2rem;
            background-color: #f0f0f0;
@@ -251,12 +282,12 @@
          "
        >
          <view style="color: #2c2c2c">
            蕙展丁丑同里日岩额序先考月池翁著《四彭酸明》八卷，皆精指奥室，茂犀未能疯造，珍因撮粹想菜，僵撰此唐，以便智睛，服指南。世之雷病雨家，咸以服焉首务，不知派乃四能之末，谓之巧者雨。上士欲舍其全，非四不可。
            {{ item.content }}
          </view>
          <view class="flex">
            <view></view>
            <view style="font-weight: 700; color: #2c2c2c"
              >——《奇八服考》P 3</view
              >——{{ item.pageNo }}</view
            >
          </view>
        </view>
@@ -271,6 +302,7 @@
import { loadBMap } from "@/static/map.js";
import Table1 from "@/components/table1/table1.vue";
import {
  getFuzzySearch,
  getPersonInfo,
  getSource,
  getPersonImages,
@@ -279,6 +311,8 @@
  getPersonRelationAtSchool,
  getSpaceTime
} from "@/api/index.js";
import { getImg } from "@/static/tool.js";

export default {
  components: {
    Table1
@@ -290,107 +324,76 @@
      detailInfo: {},
      sourceDataList: [],
      imageList: [],
      biogData: "",
      writingsList: [],
      relationshipData: [],
      biogData: [],
      // -------
      // 小传
      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: "考古证今、穷究物理"
            }
          ]
        }
      ],
      tableArr: [],
      // 代表著作
      tableColumns: [
      tableColumns1: [
        {
          prop: "worksName",
          label: "作品名"
          prop: "a",
          label: "正书名"
        },
        {
          prop: "works",
          label: "作品"
          prop: "b",
          label: "著作年"
        },
        {
          prop: "literature",
          label: "文献关系"
          prop: "c",
          label: "著作方式"
        },
        {
          prop: "epoch",
          label: "著作时代"
        },
        {
          prop: "category",
          label: "类别"
          prop: "d",
          label: "总目分类"
        }
        // { type: 'button', action: 'edit', label: 'Edit' }
      ],
      tableData: [
      tableColumns2: [
        {
          worksName: "本草纲目",
          works: "李二牛",
          literature: "作者",
          epoch: "现代",
          category: "中医学",
          id: 1
          prop: "a",
          label: "关系人"
        },
        {
          worksName: "本草纲目",
          works: "李二牛",
          literature: "作者",
          epoch: "现代",
          category: "中医学",
          id: 1
          prop: "b",
          label: "关系类型"
        },
        {
          prop: "c",
          label: "考据"
        },
        {
          prop: "d",
          label: "出处"
        }
      ]
      ],
      tableColumns3: [
        {
          prop: "a",
          label: "活动时间区间"
        },
        {
          prop: "b",
          label: "活动名称"
        },
        {
          prop: "c",
          label: "活动地点"
        },
        {
          prop: "d",
          label: "活动描述"
        }
      ],
      tableData1: [],
      tableData2: [],
      tableData3: [],
      tableData4: [],
      tableData5: [],
      nodes: [],
      relationships: []
    };
  },
  onLoad(options) {
@@ -398,25 +401,20 @@
  },
  mounted() {
    // 获取人物详情
    // this.getData();
    this.getData();
    // 获取来源
    // this.getSourceData();
    this.getSourceData();
    // 获取相关图表
    // this.getImages();
    this.getImages();
    // 获取个人事迹
    // this.getBiog();
    this.getBiog();
    // 获取著作
    // this.getWritings();
    this.getWritings();
    // 获取人物关系
    // this.getRelationship();
    this.getRelationship();
    // 获取时空地图
    // this.getMapInfo();
    // 关系图谱
    this.relation();
    // 时空地图
    loadBMap("5USVDAhhS4ssz44HLq3gNPZai7naXf4Q").then(() => {
      this.spaceTime();
    });
    this.getMapInfo();

    this.$nextTick(() => {
      // 获取第一个选项卡的 DOM 元素
      const firstTab = this.$refs.tabs.$el.querySelector(
@@ -430,58 +428,200 @@
  },
  methods: {
    getData() {
      // 基本信息
      getPersonInfo({
        id: this.detailId
        id: this.detailId,
        type: "PERSON_BASIC"
      }).then((res) => {
        console.log(res);
        this.detailInfo = res;
        const obj = {};
        if (
          res.object &&
          res.object.personFieldList &&
          res.object.personFieldList.length
        ) {
          for (let i = 0; i < res.object.personFieldList.length; i++) {
            const fieldItem = res.object.personFieldList[i];
            obj[fieldItem.fieldName] = fieldItem.content2
              ? fieldItem.content2
              : fieldItem.content1;
          }
        }
        console.log(obj);
        this.tableArr = [
          {
            list: [
              {
                name: "别名",
                value: obj.WEAK_NAME || "-"
              },
              {
                name: "字",
                value: obj.ALIAS || "-"
              },
              {
                name: "号",
                value: obj.ALIAS || "-"
              },
              {
                name: "所处时期",
                value: obj.PERIOD || "-"
              },
              {
                name: "民族",
                value: obj.ETHNIC || "-"
              }
            ]
          },
          {
            list: [
              {
                name: "籍贯",
                value: obj.NATIVE_PLACE || "-"
              },
              {
                name: "性别",
                value: obj.GENDER
                  ? obj.GENDER == "UNKNOWN"
                    ? "未知"
                    : "-"
                  : "-"
              },
              {
                name: "职官",
                value: obj.MEDICAL_BRANCH || "-"
              },
              {
                name: "流派",
                value: obj.MEDICAL_BRANCH || "-"
              },
              {
                name: "学术特点",
                value: obj.MEDICAL_EXPERTISE || "-"
              }
            ]
          }
        ];
        this.detailInfo = obj;
        // 关系图谱
        this.getMappingData(this.detailInfo.NAME);
      });
      // 活动年谱
      getPersonInfo({
        id: this.detailId,
        type: "PERSON_SPACE_TIME"
      }).then((res) => {
        this.tableData5 = res.object.personSpaceTimeList.map((item) => {
          return {
            a: item.time,
            b: item.activityName,
            c: item.activityAddrOld,
            d: "-" // 这里缺少活动描述字段
          };
        });
      });
    },
    getSourceData() {
      getSource({
        personId: this.detailId
      }).then((res) => {
        console.log(res);
        this.sourceDataList = res;
        this.sourceDataList = res.list;
      });
    },
    getImages() {
      getPersonImages({
        personId: this.detailId
      }).then((res) => {
        console.log(res);
        this.imageList = res;
        this.imageList = res.list.map((item) => getImg(item.filePath));
      });
    },
    getBiog() {
      getPersonBiog({
        personId: this.detailId
      }).then((res) => {
        console.log(res);
        this.biogData = res;
        this.biogData = res.list.map((item) => {
          return {
            content: item.content1,
            pageNo: "《" + item.pageNo + "》 " + "P " + item.pageNo // 这里只有bookid无法匹配到书名
          };
        });
      });
    },
    getWritings() {
      getPersonWritings({
        personId: this.detailId
      }).then((res) => {
        console.log(res);
        this.writingsList = res;
        this.tableData1 = res.list.map((item) => {
          return {
            a: item.name,
            b: item.dynasty,
            c: item.writeWay,
            d: item.classify
          };
        });
      });
    },
    getRelationship() {
      getPersonRelationAtSchool({
        personId: this.detailId
        // relationSearchTypeEO: "SOCIAL"
      }).then((res) => {
        console.log(res);
        this.relationshipData = res;
        console.log(res, "getPersonRelationAtSchool");
        // 这里接口有问题
      });
    },
    getMappingData(name) {
      getFuzzySearch({
        keyword: name
      }).then((res) => {
        this.nodes = [];
        this.relationships = [];
        if (res.success && res.list) {
          res.list.forEach((item, index) => {
            let exists1 = this.nodes.some(
              (node) => node.id === item.identifier1 && node.name === item.name1
            );
            let exists2 = this.nodes.some(
              (node) => node.id === item.identifier2 && node.name === item.name2
            );
            // 证明不存在
            if (exists1 !== true) {
              this.nodes.push({
                name: item.name1,
                id: item.identifier1
              });
            }
            if (exists2 !== true) {
              this.nodes.push({
                name: item.name2,
                id: item.identifier2
              });
            }
            let obj = {
              source: item.name1,
              target: item.name2,
              relation: item.relationName || "" // 如果存在 relationName 字段则使用，否则为空字符串
            };
            this.relationships.push(obj);
          });
        }
        this.relation();
      });
    },
    getMapInfo() {
      getSpaceTime({
        personId: this.detailId
      }).then((res) => {
        console.log(res);
        console.log(res,'getSpaceTime');
        const data = res.list.map(item=>{
          return {
            name: item.activityName,
            value: [item.xcoord,item.ycoord]
          }
        })
        // 时空地图
        loadBMap("1NJdwrI1CfT6lrykVhDkmWgsO6O2bjQK").then(() => {
          this.spaceTime(data);
        });
      });
    },

@@ -489,7 +629,7 @@
    fangdaClick(index) {
      if (index == 1) {
        uni.navigateTo({
          url: "/pages/character/index"
          url: "/pages/character/index?keyword=" + this.detailInfo.NAME
        });
      } else if (index == 2) {
        uni.navigateTo({
@@ -540,79 +680,94 @@
    relation() {
      var chartDom = document.getElementById("relation");
      var myChart = echarts.init(chartDom);

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

      // 根据关系数据生成连接线
      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; // 尺寸距离
      let Distance = 10;
      // 不同尺寸下修改echarts的字体
      if (window.innerWidth > 2560 && window.innerWidth <= 3840) {
        FontSize = 28;
        BorderWidth = 5;
        SymbolSize = 100;
        Distance = 33;
      } else if (window.innerWidth > 1920 && window.innerWidth <= 2560) {
        FontSize = 28;
        BorderWidth = 4;
        SymbolSize = 90;
        Distance = 22;
      } else if (window.innerWidth >= 1366 && window.innerWidth <= 1920) {
        FontSize = 18;
        BorderWidth = 4;
        SymbolSize = 70;
        Distance = 22;
      }
      // 根据关系数据生成连接线
      var links = [];
      relationships.forEach((relationship, i) => {
        var sourceIndex = nodes.findIndex(
          (node) => node.name === relationship.source
        );
        var targetIndex = nodes.findIndex(
          (node) => node.name === relationship.target
        );
        if (relationship.relation) {
          if (sourceIndex !== -1 && targetIndex !== -1) {
            links.push({
              source: sourceIndex,
              target: targetIndex,
              label: {
                show: true,
                formatter: function (params) {
                  return relationship.relation;
                }, // 设置关系标签内容为"Child-Parent"
                color: "#2C2C2C",
                fontSize: FontSize - 2,
                backgroundColor: "rgba(255, 255, 255, 1)",
                padding: [3, 8],
                borderRadius: 30,
                position: "middle", // 设置标签文本在线的中间位置上居中显示
                // bottom: -(FontSize+10),
                z: 10, // 设置标签的z轴高度，使其比连接线更高
                distance: -(Distance + 1) // 将标签放置在连接线上
              }
            });
          }
        }
      });
      // 根据nodes动态生成节点数据
      var nodeData = nodes.map(function (node, index) {
        return {
          name: node,
          x: Math.random() * 1000, // 设置随机x坐标位置
          name: node.name,
          id: node.id,
          x: Math.random() * 2000, // 设置随机x坐标位置
          y: Math.random() * 600, // 设置随机y坐标位置
          itemStyle: {
            color: getColorByIndex(index), // 可以根据索引设置不同的颜色
            color: "#eae0eb", // 可以根据索引设置不同的颜色
            borderWidth: BorderWidth,
            borderColor: getColorByIndex(index + 1)
            borderColor: "#996f9f"
          }
        };
      });
      // 设置颜色
      function getColorByIndex(index) {
        var colors = ["#ecf4ff", "#dd9795", "#f1edbe", "#ecf4ff", "#c5dbd8"]; // 可以根据实际情况设置颜色数组
        return colors[index % colors.length];
      }

      var option;
      option = {
        title: {
          left: "center",
          top: FontSize + 10,
          subtextStyle: {
            fontSize: FontSize, // 设置副标题文字大小为 14px
            color: "#2C2C2C"
          }
        },
        backgroundColor: {
          type: "image",
          image: "/static/image/characterRelationBg.png",
          size: "100% 100%", // 背景图片的尺寸，可以是百分比或者像素
          position: "center center" // 背景图片的位置，可以是 top, bottom, middle 或者百分比
        },
        tooltip: {},
        animationDurationUpdate: 1500,
        animationEasingUpdate: "quinticInOut",
@@ -620,6 +775,7 @@
          {
            type: "graph",
            layout: "none",
            roam: true,
            symbolSize: SymbolSize, // 调整节点大小
            label: {
              show: true,
@@ -628,144 +784,74 @@
            },
            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"
              }
            ],
            links: links,
            lineStyle: {
              opacity: 0.9,
              width: 2,
              curveness: 0
              curveness: 0.3
            },
            emphasis: {
              focus: "adjacency",
              lineStyle: {
                width: 10
              }
            }
          }
        ]
      };

      // 将生成的连接线添加到echarts图表的option中
      option.series[0].links = links;
      // 设置点击事件监听
      myChart.on("click", (params) => {
        // menuNav2 = !menuNav1
        if (params.componentType === "series") {
          this.spaceTimeArr(params.data.id);
        }
      });
      option && myChart.setOption(option);
    },
    // 时空地图
    spaceTime() {
    spaceTime(data) {
      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;
      };
      // const data = [
      //   {
      //     name: "海门",
      //     value: [121.15, 31.89]
      //   },
      //   {
      //     name: "鄂尔多斯",
      //     value: [109.781327, 39.608266]
      //   },
      //   {
      //     name: "招远",
      //     value: [120.38, 37.35]
      //   },
      //   {
      //     name: "舟山",
      //     value: [122.207216, 29.985295]
      //   },
      //   {
      //     name: "齐齐哈尔",
      //     value: [123.97, 47.33]
      //   }
      // ];
      option = {
        title: {
          text: "",
          subtext: "",
          sublink: "",
          left: "center"
        },
        tooltip: {
          trigger: "item"
        },
        bmap: {
          center: [104.114129, 37.550339],
          zoom: 1,
          center: data[0].value,
          zoom: 8,
          roam: true,
          mapStyle: {
            styleJson: [
@@ -773,28 +859,91 @@
                featureType: "water",
                elementType: "all",
                stylers: {
                  color: "#d1d1d1"
                  color: "#86a1ac"
                }
              },
              {
                featureType: "land",
                elementType: "all",
                stylers: {
                  color: "#f3f3f3"
                  color: "#f1d99d"
                }
              },
              {
                featureType: "railway",
                elementType: "all",
                stylers: {
                  visibility: "off"
                }
              },
              {
                featureType: "highway",
                elementType: "all",
                stylers: {
                  color: "#f1d99d"
                }
              },
              {
                featureType: "highway",
                elementType: "labels",
                stylers: {
                  visibility: "off"
                }
              },
              {
                featureType: "arterial",
                elementType: "geometry",
                stylers: {
                  color: "#f1d99d"
                }
              },
              {
                featureType: "arterial",
                elementType: "geometry.fill",
                stylers: {
                  color: "#f1d99d"
                }
              },
              {
                featureType: "poi",
                elementType: "all",
                stylers: {
                  visibility: "off"
                }
              },
              {
                featureType: "green",
                elementType: "all",
                stylers: {
                  visibility: "off"
                }
              },
              {
                featureType: "subway",
                elementType: "all",
                stylers: {
                  visibility: "off"
                }
              },
              {
                featureType: "manmade",
                elementType: "all",
                stylers: {
                  color: "#d1d1d1"
                  color: "#f1d99d"
                }
              },
              {
                featureType: "local",
                elementType: "all",
                stylers: {
                  color: "#d1d1d1"
                  color: "#f1d99d"
                }
              },
              {
                featureType: "local",
                elementType: "labels",
                stylers: {
                  visibility: "off"
                }
              },
              {
@@ -808,21 +957,21 @@
                featureType: "boundary",
                elementType: "all",
                stylers: {
                  color: "#fefefe"
                  color: "#f1d99d"
                }
              },
              {
                featureType: "building",
                elementType: "all",
                stylers: {
                  color: "#d1d1d1"
                  color: "#f1d99d"
                }
              },
              {
                featureType: "label",
                elementType: "labels.text.fill",
                stylers: {
                  color: "#999999"
                  color: "#000"
                }
              }
            ]
@@ -830,18 +979,13 @@
        },
        series: [
          {
            name: "pm2.5",
            name: "",
            type: "scatter",
            coordinateSystem: "bmap",
            data: convertData(data),
            symbolSize: function (val) {
              return val[2] / 10;
            },
            data: data,
            symbolSize: 0,
            encode: {
              value: 2
            },
            credits: {
              enabled: false
            },
            label: {
              formatter: "{b}",
@@ -855,19 +999,11 @@
            }
          },
          {
            name: "Top 5",
            name: "",
            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;
            },
            data: data,
            symbolSize: 20,
            encode: {
              value: 2
            },
@@ -878,20 +1014,20 @@
            label: {
              formatter: "{b}",
              position: "right",
              show: true
              show: false
            },
            itemStyle: {
              color: "#ec7b43",
              shadowBlur: 10,
              shadowColor: "#333"
            },
            emphasis: {
              scale: true
              scale: false
            },
            zlevel: 1
          }
        ]
      };

      option && myChart.setOption(option);
    }
  }

 src/pages/character/index.vue

@@ -269,24 +269,46 @@
    // window.addEventListener("resize", this.relation);
    this.innt();
  },
  onLoad(options) {
    this.searchKey = options.keyword;
  },
  methods: {
    getData() {
      getPersonList({
        keywords: "", //搜索框检索
        name: "", //姓名
        alias: "", //别名
        nativePlace: "", //机关
        tagId: null, //职业id
        official: "", //职官
        genderType: null, //性别
        dynasty: null, //朝代名
        dynastyId: null, //朝代id
        institution: "", //机构
        bookId: null, //来源id
        page: 1,
        pageSize: 100
      getFuzzySearch({
        keyword: this.searchKey ? this.searchKey : ""
      }).then((res) => {
        console.log(res);
        this.nodes = [];
        this.relationships = [];
        if (res.success && res.list) {
          res.list.forEach((item, index) => {
            let exists1 = this.nodes.some(
              (node) => node.id === item.identifier1 && node.name === item.name1
            );
            let exists2 = this.nodes.some(
              (node) => node.id === item.identifier2 && node.name === item.name2
            );
            // 证明不存在
            if (exists1 !== true) {
              this.nodes.push({
                name: item.name1,
                id: item.identifier1
              });
            }
            if (exists2 !== true) {
              this.nodes.push({
                name: item.name2,
                id: item.identifier2
              });
            }
            let obj = {
              source: item.name1,
              target: item.name2,
              relation: item.relationName || "" // 如果存在 relationName 字段则使用，否则为空字符串
            };
            this.relationships.push(obj);
          });
        }
        this.relation();
      });
    },
    // 关系图谱
@@ -364,9 +386,9 @@
          x: Math.random() * 2000, // 设置随机x坐标位置
          y: Math.random() * 600, // 设置随机y坐标位置
          itemStyle: {
            color: getColorByIndex(), // 可以根据索引设置不同的颜色
            color: "#eae0eb", // 可以根据索引设置不同的颜色
            borderWidth: BorderWidth,
            borderColor: getColorByIndex()
            borderColor: "#996f9f"
          }
        };
      });
@@ -384,8 +406,6 @@
        var color = "#" + hexR + hexG + hexB;
        return color;
      }
      console.log(links);
      console.log(nodeData);
      var option;
      option = {
        title: {
@@ -430,6 +450,12 @@
              opacity: 0.9,
              width: 2,
              curveness: 0.3
            },
            emphasis: {
              focus: "adjacency",
              lineStyle: {
                width: 10
              }
            }
          }
        ]
@@ -448,40 +474,7 @@
    // 基础搜索
    onSearch(val) {
      this.searchKey = val.text;
      getFuzzySearch({ keyword: val.text }).then((res) => {
        if (res.list) {
          this.nodes = [];
          this.relationships = [];
          res.list.forEach((item, index) => {
            let exists1 = this.nodes.some(
              (node) => node.id === item.identifier1 && node.name === item.name1
            );
            let exists2 = this.nodes.some(
              (node) => node.id === item.identifier2 && node.name === item.name2
            );
            // 证明不存在
            if (exists1 !== true) {
              this.nodes.push({
                name: item.name1,
                id: item.identifier1
              });
            }
            if (exists2 !== true) {
              this.nodes.push({
                name: item.name2,
                id: item.identifier2
              });
            }
            let obj = {
              source: item.name1,
              target: item.name2,
              relation: item.relationName || "" // 如果存在 relationName 字段则使用，否则为空字符串
            };
            this.relationships.push(obj);
          });
        }
        this.relation();
      });
      this.getData();
    },
    // 高级搜索
    onSubmit(val) {

 src/pages/territory/territory.vue

@@ -1,1592 +1,758 @@
<template>
    <view>
        <!-- 顶部导航 -->
        <headNav :idIndex="idIndex" text="中医地域医谱" />
        <view class="flex flex-center" style="width: 100%; margin: .2rem 0 .34rem;justify-content: flex-start;">
            <advancedSearch class="Search" placehold="输入姓名/别名/朝代/传主职业搜索" @onSearch="onSearch" :isAvancedTrue="false" />
            <ul class="flex">
                <li style="" v-for="(item,index) in dynasty" :key="item.id">
                    <view @click="SchoolClick(item.id)" class="flex flex-center font-family school"
                        :style="{'marginRight': index === dynasty.length - 1 ? '0' : '0.03rem'}"
                        style="font-weight: 500; border-radius: .3rem; padding: .06rem .15rem; color: #2C2C2C; font-size: .12rem; margin-top: .03rem;margin-right: .1rem;background-color: #fff;">
                        <view class="" :style="{background:item.color}"
                            style="margin-right: .07rem; width: .12rem;height: .12rem;border-radius: 50%;"></view>
                        <view class="" style="color: #2C2C2C;font-size: .12rem;">{{item.name}}</view>
                    </view>
                </li>
            </ul>
        </view>
        <!-- 搜索后的弹框 -->
        <el-card class="box-card " v-if="isSearch"
            style=" height: 3.2rem; width: 3rem;position: fixed;z-index: 999999999999;left: 1rem;top: 2.2rem;">
            <div slot="header" class="clearfix">
                <span>人物 ({{SearchArr.length}})</span>
                <el-button style="float: right; padding: 3px 0;font-size: .12rem;color: #597AA5;"
                    @click="isSearch=false" type="text">关闭</el-button>
            </div>
            <view class="" style="overflow: auto;height: 2.5rem;">
                <ul class="information" v-for="(item,index) in SearchArr" :key="index">
                    <li style="font-size: .18rem;font-weight: 700;">{{item.name}}</li>
                    <li>生卒年: {{item.birthAndDeath}}</li>
                    <li>来源: {{item.source}}</li>
                    <li v-if="SearchArr.length-1!==index" style="margin: .1rem 0; border-bottom: 1px solid #D8D8D8;"></li>
                </ul>
            </view>
			
        </el-card>
        <!-- echarts里面的数据点击后弹框 -->
        <el-card class="box-card echartsTrue" v-if="isEchTrue"
            style="overflow: inherit; width: 3rem; position: fixed;z-index: 999999999999;"
            :style="{top:isTop,left:isLeft}">
            <div slot="header" class="clearfix">
                <span>{{information[0].content}}</span>
                <el-button style="float: right; padding: 3px 0;font-size: .12rem;color: #597AA5;"
                    @click="isEchTrue=false" type="text">关闭</el-button>
            </div>
            <ul class="information">
                <li v-for="(item,index) in information" :key="index">
                    {{item.label}}: {{item.content}}
                </li>
            </ul>
            <el-button class="flex" @click="viewMoreClick"
                style="width: 100%; padding: 3px 0;font-size: .12rem;color: #597AA5;" type="text">查看更多>></el-button>
        </el-card>
        <!-- echarts地图 -->
        <view id="main" style="width: 100vw;position: relative;"></view>
  <view class="pageBox">
    <!-- 顶部导航 -->
    <headNav :idIndex="idIndex" text="中医地域医谱" />
    <view
      class="flex flex-center"
      style="width: 100%; margin: 0.2rem 0 0.34rem; justify-content: flex-start"
    >
      <advancedSearch
        class="Search"
        placehold="输入姓名/别名/朝代/传主职业搜索"
        @onSearch="onSearch"
        :isAvancedTrue="false"
      />
      <ul class="flex">
        <li style="" v-for="(item, index) in dynasty" :key="item.id">
          <view
            @click="SchoolClick(item.id)"
            class="flex flex-center font-family school"
            :style="{
              marginRight: index === dynasty.length - 1 ? '0' : '0.03rem'
            }"
            style="
              font-weight: 500;
              border-radius: 0.3rem;
              padding: 0.06rem 0.15rem;
              color: #2c2c2c;
              font-size: 0.12rem;
              margin-top: 0.03rem;
              margin-right: 0.1rem;
              background-color: #fff;
            "
          >
            <view
              class=""
              :style="{ background: item.color }"
              style="
                margin-right: 0.07rem;
                width: 0.12rem;
                height: 0.12rem;
                border-radius: 50%;
              "
            ></view>
            <view class="" style="color: #2c2c2c; font-size: 0.12rem">{{
              item.name
            }}</view>
          </view>
        </li>
      </ul>
    </view>
    <!-- 搜索后的弹框 -->
    <el-card
      class="box-card"
      v-if="isSearch"
      style="
        height: 3.2rem;
        width: 3rem;
        position: fixed;
        z-index: 999999999999;
        left: 1rem;
        top: 2.2rem;
      "
    >
      <div slot="header" class="clearfix">
        <span>人物 ({{ SearchArr.length }})</span>
        <el-button
          style="
            float: right;
            padding: 3px 0;
            font-size: 0.12rem;
            color: #597aa5;
          "
          @click="isSearch = false"
          type="text"
          >关闭</el-button
        >
      </div>
      <view class="" style="overflow: auto; height: 2.5rem">
        <ul class="information" v-for="(item, index) in SearchArr" :key="index">
          <li style="font-size: 0.18rem; font-weight: 700">{{ item.name }}</li>
          <li>生卒年: {{ item.birthAndDeath }}</li>
          <li>来源: {{ item.source }}</li>
          <li
            v-if="SearchArr.length - 1 !== index"
            style="margin: 0.1rem 0; border-bottom: 1px solid #d8d8d8"
          ></li>
        </ul>
      </view>
    </el-card>
    <!-- echarts里面的数据点击后弹框 -->
    <el-card
      class="box-card echartsTrue"
      v-if="isEchTrue"
      style="
        overflow: inherit;
        width: 3rem;
        position: fixed;
        z-index: 999999999999;
      "
      :style="{ top: isTop, left: isLeft }"
    >
      <div slot="header" class="clearfix">
        <span>{{ information[0].content }}</span>
        <el-button
          style="
            float: right;
            padding: 3px 0;
            font-size: 0.12rem;
            color: #597aa5;
          "
          @click="isEchTrue = false"
          type="text"
          >关闭</el-button
        >
      </div>
      <ul class="information">
        <li v-for="(item, index) in information" :key="index">
          {{ item.label }}: {{ item.content }}
        </li>
      </ul>
      <el-button
        class="flex"
        @click="viewMoreClick"
        style="width: 100%; padding: 3px 0; font-size: 0.12rem; color: #597aa5"
        type="text"
        >查看更多>></el-button
      >
    </el-card>
    <!-- echarts地图 -->
    <view id="main" style="width: 100vw; position: relative"></view>

        <!-- 朝代 -->
        <view class="flex flex-center" style="width: 100%; position: fixed;bottom: .33rem;left: 0;">
            <ul class="flex">
                <li @click="dynastyBottomClick(item.id)" v-for="(item,index) in dynasty1" :key="item.id">
                    <view class="flex flex-center" style="height: .35rem; background-color: #fff; color:#244A7B ;">
                        {{item.coord}}
                    </view>
                    <view class="flex flex-center font-family"
                        style="padding: .05rem .19rem; height: .3rem;line-height: .3rem; color: #fff; font-size: .14rem; margin-top: .03rem;margin-right: .03rem;background-color: #597AA5;"
                        :style="{'marginRight': index === dynasty1.length - 1 ? '0' : '0.03rem','background':dynasty1Color==item.id?'#244A7B':'#597AA5'}">
                        {{item.name}}
                    </view>
                </li>
            </ul>
        </view>
    </view>
    <!-- 朝代 -->
    <view
      class="flex flex-center"
      style="width: 100%; position: fixed; bottom: 0.33rem; left: 0"
    >
      <ul class="flex">
        <li
          @click="dynastyBottomClick(item.id)"
          v-for="(item, index) in dynasty1"
          :key="item.id"
        >
          <view
            class="flex flex-center"
            style="height: 0.35rem; background-color: #fff; color: #244a7b"
          >
            {{ item.coord }}
          </view>
          <view
            class="flex flex-center font-family"
            style="
              padding: 0.05rem 0.19rem;
              height: 0.3rem;
              line-height: 0.3rem;
              color: #fff;
              font-size: 0.14rem;
              margin-top: 0.03rem;
              margin-right: 0.03rem;
              background-color: #597aa5;
            "
            :style="{
              marginRight: index === dynasty1.length - 1 ? '0' : '0.03rem',
              background: dynasty1Color == item.id ? '#244A7B' : '#597AA5'
            }"
          >
            {{ item.name }}
          </view>
        </li>
      </ul>
    </view>
  </view>
</template>
<!-- <script src="https://api.map.baidu.com/api?v=3.0&ak=5USVDAhhS4ssz44HLq3gNPZai7naXf4Q&callback=initializeMap"></script> -->
<!-- 5USVDAhhS4ssz44HLq3gNPZai7naXf4Q -->
<script>
    import {
        loadBMap
    } from "@/static/map.js"
    import * as echarts from 'echarts';
    import 'echarts/extension/bmap/bmap';
    export default {
        data() {
            return {
                // echarts元素点击时出来的弹窗和坐标
                isEchTrue: false,
                isLeft: 0,
                isTop: 0,
                // 用户信息
                information: [{
                        label: '姓名',
                        content: '李时珍'
                    },
                    {
                        label: '别名',
                        content: '东丽先生'
                    },
                    {
                        label: '籍贯',
                        content: '湖北'
                    },
                    {
                        label: '医学分科',
                        content: '中药,针灸'
                    },
                    {
                        label: '小传',
                        content: '李时珍(约1518年~1593 年)， 字东璧， 晚年自号濒湖山人， 湖广黄州府薪州(今湖北省薪春县) 人， 明代著名医药学家。 与“ 医圣” 万密斋齐名， 古有“ 万密斋的方， 李时珍的药” 之说。 后为楚干府...'
                    }
                ],
                // 下面的朝代1 
                dynasty1Color: 1,
                dynasty1: [{
                        name: '夏朝',
                        coord: '2070BC',
                        id: 1
                    },
                    {
                        name: '商朝',
                        id: 2,
                        coord: '1600BC',
                    },
                    {
                        name: '西周',
                        id: 3,
                        coord: '1600BC'
                    },
                    {
                        name: '春秋战国',
                        id: 4,
                        coord: '770BC'
                    },
                    {
                        name: '秦朝',
                        id: 5,
                        coord: '221BC'
                    }, {
                        name: '汉朝',
                        id: 6,
                        coord: '202BC'
                    },
                    {
                        name: '三国两晋南北朝',
                        id: 7,
                        coord: '184'
                    },
                    {
                        name: '隋朝',
                        id: 8,
                        coord: '581'
                    },
                    {
                        name: '唐朝',
                        id: 9,
                        coord: '618'
                    },
                    {
                        name: '五代十国',
                        id: 10,
                        coord: '907'
                    },
                    {
                        name: '辽夏金',
                        id: 11,
                        coord: '907'
                    },
                    {
                        name: '宋朝',
                        id: 12,
                        coord: '960'
                    },
                    {
                        name: '元朝',
                        id: 13,
                        coord: '1271'
                    },
                    {
                        name: '明朝',
                        id: 14,
                        coord: '1368'
                    },
                    {
                        name: '清朝',
                        id: 15,
                        coord: '1636'
                    },
                ],
                // 标题顶部栏需要的东西
                idIndex: 0,
                // 朝代
                dynasty: [{
                    name: '夏朝',
                    color: '#90BBD8',
                    id: 1
                }, {
                    name: '商朝',
                    color: '#EDD28B',
                    id: 2
                }, {
                    name: '西周',
                    color: '#CF746D',
                    id: 3
                }, {
                    name: '秦朝',
                    color: '#9CC27A',
                    id: 4
                }, {
                    name: '汉朝',
                    color: '#5B6CB9',
                    id: 5
                }, {
                    name: '隋朝',
                    color: '#8860A8',
                    id: 6
                }, {
                    name: '唐朝',
                    color: '#DE8E66',
                    id: 7
                }],
                // 搜索后是否显示弹框
                isSearch:false,
                SearchArr:[
                    {
                        id:1,
                        name:'李时珍',
                        birthAndDeath:'1518-1593',
                        source:'国图规范档，CBDB，上图古籍数据库 籍贯：湖北'
                    },{
                        id:2,
                        name:'李时珍',
                        birthAndDeath:'1518-1593',
                        source:'国图规范档，CBDB，上图古籍数据库 籍贯：湖北'
                    }
                ]
            }
        },
        onLoad(options) {
            this.idIndex = options.id
            console.log('optionsoptionsoptions', options.id);
        },
        mounted() {
            console.log('ss');
            // this.$nextTick(() => {
            loadBMap('5USVDAhhS4ssz44HLq3gNPZai7naXf4Q').then(() => {
                this.innt()
            })
            // })
        },
        methods: {
            // 点击下面的朝代按钮
            dynastyBottomClick(id) {
                console.log(id);
                this.dynasty1Color = id
            },
            onSearch(val) {
                console.log(val);
                // 
                this.isSearch= true
            },
            // 点击上面的朝代按钮
            SchoolClick(id){
                console.log(id);
            },
            innt() {
                this.$nextTick(() => {
import { loadBMap } from "@/static/map.js";
import * as echarts from "echarts";
import "echarts/extension/bmap/bmap";
export default {
  data() {
    return {
      // echarts元素点击时出来的弹窗和坐标
      isEchTrue: false,
      isLeft: 0,
      isTop: 0,
      // 用户信息
      information: [
        {
          label: "姓名",
          content: "李时珍"
        },
        {
          label: "别名",
          content: "东丽先生"
        },
        {
          label: "籍贯",
          content: "湖北"
        },
        {
          label: "医学分科",
          content: "中药,针灸"
        },
        {
          label: "小传",
          content:
            "李时珍(约1518年~1593 年)， 字东璧， 晚年自号濒湖山人， 湖广黄州府薪州(今湖北省薪春县) 人， 明代著名医药学家。 与“ 医圣” 万密斋齐名， 古有“ 万密斋的方， 李时珍的药” 之说。 后为楚干府..."
        }
      ],
      // 下面的朝代1
      dynasty1Color: 1,
      dynasty1: [
        {
          name: "夏朝",
          coord: "2070BC",
          id: 1
        },
        {
          name: "商朝",
          id: 2,
          coord: "1600BC"
        },
        {
          name: "西周",
          id: 3,
          coord: "1600BC"
        },
        {
          name: "春秋战国",
          id: 4,
          coord: "770BC"
        },
        {
          name: "秦朝",
          id: 5,
          coord: "221BC"
        },
        {
          name: "汉朝",
          id: 6,
          coord: "202BC"
        },
        {
          name: "三国两晋南北朝",
          id: 7,
          coord: "184"
        },
        {
          name: "隋朝",
          id: 8,
          coord: "581"
        },
        {
          name: "唐朝",
          id: 9,
          coord: "618"
        },
        {
          name: "五代十国",
          id: 10,
          coord: "907"
        },
        {
          name: "辽夏金",
          id: 11,
          coord: "907"
        },
        {
          name: "宋朝",
          id: 12,
          coord: "960"
        },
        {
          name: "元朝",
          id: 13,
          coord: "1271"
        },
        {
          name: "明朝",
          id: 14,
          coord: "1368"
        },
        {
          name: "清朝",
          id: 15,
          coord: "1636"
        }
      ],
      // 标题顶部栏需要的东西
      idIndex: 0,
      // 朝代
      dynasty: [
        {
          name: "夏朝",
          color: "#90BBD8",
          id: 1
        },
        {
          name: "商朝",
          color: "#EDD28B",
          id: 2
        },
        {
          name: "西周",
          color: "#CF746D",
          id: 3
        },
        {
          name: "秦朝",
          color: "#9CC27A",
          id: 4
        },
        {
          name: "汉朝",
          color: "#5B6CB9",
          id: 5
        },
        {
          name: "隋朝",
          color: "#8860A8",
          id: 6
        },
        {
          name: "唐朝",
          color: "#DE8E66",
          id: 7
        }
      ],
      // 搜索后是否显示弹框
      isSearch: false,
      SearchArr: [
        {
          id: 1,
          name: "李时珍",
          birthAndDeath: "1518-1593",
          source: "国图规范档，CBDB，上图古籍数据库 籍贯：湖北"
        },
        {
          id: 2,
          name: "李时珍",
          birthAndDeath: "1518-1593",
          source: "国图规范档，CBDB，上图古籍数据库 籍贯：湖北"
        }
      ]
    };
  },
  onLoad(options) {
    this.idIndex = options.id;
    console.log("optionsoptionsoptions", options.id);
  },
  mounted() {
    console.log("ss");
    // this.$nextTick(() => {
    loadBMap("1NJdwrI1CfT6lrykVhDkmWgsO6O2bjQK").then(() => {
      this.innt();
    });
    // })
  },
  methods: {
    // 点击下面的朝代按钮
    dynastyBottomClick(id) {
      console.log(id);
      this.dynasty1Color = id;
    },
    onSearch(val) {
      console.log(val);
      //
      this.isSearch = true;
    },
    // 点击上面的朝代按钮
    SchoolClick(id) {
      console.log(id);
    },
    innt() {
      this.$nextTick(() => {
        var chartDom = document.getElementById("main");
        var myChart = echarts.init(chartDom);
        var option;

                    var chartDom = document.getElementById('main');
                    var myChart = echarts.init(chartDom);
                    var option;
        const data = [
          {
            name: "海门",
            value: [121.15, 31.89]
          },
          {
            name: "鄂尔多斯",
            value: [109.781327, 39.608266]
          },
          {
            name: "招远",
            value: [120.38, 37.35]
          },
          {
            name: "舟山",
            value: [122.207216, 29.985295]
          },
          {
            name: "齐齐哈尔",
            value: [123.97, 47.33]
          }
        ];
        option = {
          title: {
            text: "",
            subtext: "",
            sublink: "",
            left: "center"
          },
          tooltip: {
            trigger: "item"
          },
          bmap: {
            center: [104.114129, 37.550339],
            zoom: 5,
            roam: true,
            mapStyle: {
              styleJson: [
                {
                  featureType: "water",
                  elementType: "all",
                  stylers: {
                    color: "#86a1ac"
                  }
                },
                {
                  featureType: "land",
                  elementType: "all",
                  stylers: {
                    color: "#f1d99d"
                  }
                },
                {
                  featureType: "railway",
                  elementType: "all",
                  stylers: {
                    visibility: "off"
                  }
                },
                {
                  featureType: "highway",
                  elementType: "all",
                  stylers: {
                    color: "#f1d99d"
                  }
                },
                {
                  featureType: "highway",
                  elementType: "labels",
                  stylers: {
                    visibility: "off"
                  }
                },
                {
                  featureType: "arterial",
                  elementType: "geometry",
                  stylers: {
                    color: "#f1d99d"
                  }
                },
                {
                  featureType: "arterial",
                  elementType: "geometry.fill",
                  stylers: {
                    color: "#f1d99d"
                  }
                },
                {
                  featureType: "poi",
                  elementType: "all",
                  stylers: {
                    visibility: "off"
                  }
                },
                {
                  featureType: "green",
                  elementType: "all",
                  stylers: {
                    visibility: "off"
                  }
                },
                {
                  featureType: "subway",
                  elementType: "all",
                  stylers: {
                    visibility: "off"
                  }
                },
                {
                  featureType: "manmade",
                  elementType: "all",
                  stylers: {
                    color: "#f1d99d"
                  }
                },
                {
                  featureType: "local",
                  elementType: "all",
                  stylers: {
                    color: "#f1d99d"
                  }
                },
                {
                  featureType: "local",
                  elementType: "labels",
                  stylers: {
                    visibility: "off"
                  }
                },
                {
                  featureType: "arterial",
                  elementType: "labels",
                  stylers: {
                    visibility: "off"
                  }
                },
                {
                  featureType: "boundary",
                  elementType: "all",
                  stylers: {
                    color: "#f1d99d"
                  }
                },
                {
                  featureType: "building",
                  elementType: "all",
                  stylers: {
                    color: "#f1d99d"
                  }
                },
                {
                  featureType: "label",
                  elementType: "labels.text.fill",
                  stylers: {
                    color: "#000"
                  }
                }
              ]
            }
          },
          series: [
            {
              name: "",
              type: "scatter",
              coordinateSystem: "bmap",
              data: data,
              symbolSize: 0,
              encode: {
                value: 2
              },
              label: {
                formatter: "{b}",
                position: "right",
                show: false
              },
              emphasis: {
                label: {
                  show: true
                }
              }
            },
            {
              name: "",
              type: "effectScatter",
              coordinateSystem: "bmap",
              data: data,
              symbolSize: 20,
              encode: {
                value: 2
              },
              showEffectOn: "render",
              rippleEffect: {
                brushType: "stroke"
              },
              label: {
                formatter: "{b}",
                position: "right",
                show: false
              },
              itemStyle: {
                color: "#ec7b43",
                shadowBlur: 10,
                shadowColor: "#333"
              },
              emphasis: {
                scale: false
              },
              zlevel: 1
            }
          ]
        };
        // 设置点击事件监听
        myChart.on("click", (params) => {
          console.log(params.event.offsetX, params.event.offsetY);
          if (params.componentType === "series") {
            var dataName = params.data.name; // 获取点击的数据名称
            var dataValue = params.data.value; // 获取点击的数据值
            // 在这里可以根据需要处理点击事件，比如弹出对应数据的详细信息等操作
            console.log("点击了", dataName, "数据，数值为", dataValue);
            // 这里可以编写触发时间获取对应数据信息的逻辑
            this.spaceTimeArr(params);
          }
        });

                    const data = [{
                            name: '海门',
                            value: 9
                        },
                        {
                            name: '鄂尔多斯',
                            value: 12
                        },
                        {
                            name: '招远',
                            value: 12
                        },
                        {
                            name: '舟山',
                            value: 12
                        },
                        {
                            name: '齐齐哈尔',
                            value: 14
                        },
                        {
                            name: '盐城',
                            value: 15
                        },
                        {
                            name: '赤峰',
                            value: 16
                        },
                        {
                            name: '青岛',
                            value: 18
                        },
                        {
                            name: '乳山',
                            value: 18
                        },
                        {
                            name: '金昌',
                            value: 19
                        },
                        {
                            name: '泉州',
                            value: 21
                        },
                        {
                            name: '莱西',
                            value: 21
                        },
                        {
                            name: '日照',
                            value: 21
                        },
                        {
                            name: '胶南',
                            value: 22
                        },
                        {
                            name: '南通',
                            value: 23
                        },
                        {
                            name: '拉萨',
                            value: 24
                        },
                        {
                            name: '云浮',
                            value: 24
                        },
                        {
                            name: '梅州',
                            value: 25
                        },
                        {
                            name: '文登',
                            value: 25
                        },
                        {
                            name: '上海',
                            value: 25
                        },
                        {
                            name: '攀枝花',
                            value: 25
                        },
                        {
                            name: '威海',
                            value: 25
                        },
                        {
                            name: '承德',
                            value: 25
                        },
                        {
                            name: '厦门',
                            value: 26
                        },
                        {
                            name: '汕尾',
                            value: 26
                        },
                        {
                            name: '潮州',
                            value: 26
                        },
                        {
                            name: '丹东',
                            value: 27
                        },
                        {
                            name: '太仓',
                            value: 27
                        },
                        {
                            name: '曲靖',
                            value: 27
                        },
                        {
                            name: '烟台',
                            value: 28
                        },
                        {
                            name: '福州',
                            value: 29
                        },
                        {
                            name: '瓦房店',
                            value: 30
                        },
                        {
                            name: '即墨',
                            value: 30
                        },
                        {
                            name: '抚顺',
                            value: 31
                        },
                        {
                            name: '玉溪',
                            value: 31
                        },
                        {
                            name: '张家口',
                            value: 31
                        },
                        {
                            name: '阳泉',
                            value: 31
                        },
                        {
                            name: '莱州',
                            value: 32
                        },
                        {
                            name: '湖州',
                            value: 32
                        },
                        {
                            name: '汕头',
                            value: 32
                        },
                        {
                            name: '昆山',
                            value: 33
                        },
                        {
                            name: '宁波',
                            value: 33
                        },
                        {
                            name: '湛江',
                            value: 33
                        },
                        {
                            name: '揭阳',
                            value: 34
                        },
                        {
                            name: '荣成',
                            value: 34
                        },
                        {
                            name: '连云港',
                            value: 35
                        },
                        {
                            name: '葫芦岛',
                            value: 35
                        },
                        {
                            name: '常熟',
                            value: 36
                        },
                        {
                            name: '东莞',
                            value: 36
                        },
                        {
                            name: '河源',
                            value: 36
                        },
                        {
                            name: '淮安',
                            value: 36
                        },
                        {
                            name: '泰州',
                            value: 36
                        },
                        {
                            name: '南宁',
                            value: 37
                        },
                        {
                            name: '营口',
                            value: 37
                        },
                        {
                            name: '惠州',
                            value: 37
                        },
                        {
                            name: '江阴',
                            value: 37
                        },
                        {
                            name: '蓬莱',
                            value: 37
                        },
                        {
                            name: '韶关',
                            value: 38
                        },
                        {
                            name: '嘉峪关',
                            value: 38
                        },
                        {
                            name: '广州',
                            value: 38
                        },
                        {
                            name: '延安',
                            value: 38
                        },
                        {
                            name: '太原',
                            value: 39
                        },
                        {
                            name: '清远',
                            value: 39
                        },
                        {
                            name: '中山',
                            value: 39
                        },
                        {
                            name: '昆明',
                            value: 39
                        },
                        {
                            name: '寿光',
                            value: 40
                        },
                        {
                            name: '盘锦',
                            value: 40
                        },
                        {
                            name: '长治',
                            value: 41
                        },
                        {
                            name: '深圳',
                            value: 41
                        },
                        {
                            name: '珠海',
                            value: 42
                        },
                        {
                            name: '宿迁',
                            value: 43
                        },
                        {
                            name: '咸阳',
                            value: 43
                        },
                        {
                            name: '铜川',
                            value: 44
                        },
                        {
                            name: '平度',
                            value: 44
                        },
                        {
                            name: '佛山',
                            value: 44
                        },
                        {
                            name: '海口',
                            value: 44
                        },
                        {
                            name: '江门',
                            value: 45
                        },
                        {
                            name: '章丘',
                            value: 45
                        },
                        {
                            name: '肇庆',
                            value: 46
                        },
                        {
                            name: '大连',
                            value: 47
                        },
                        {
                            name: '临汾',
                            value: 47
                        },
                        {
                            name: '吴江',
                            value: 47
                        },
                        {
                            name: '石嘴山',
                            value: 49
                        },
                        {
                            name: '沈阳',
                            value: 50
                        },
                        {
                            name: '苏州',
                            value: 50
                        },
                        {
                            name: '茂名',
                            value: 50
                        },
                        {
                            name: '嘉兴',
                            value: 51
                        },
                        {
                            name: '长春',
                            value: 51
                        },
                        {
                            name: '胶州',
                            value: 52
                        },
                        {
                            name: '银川',
                            value: 52
                        },
                        {
                            name: '张家港',
                            value: 52
                        },
                        {
                            name: '三门峡',
                            value: 53
                        },
                        {
                            name: '锦州',
                            value: 54
                        },
                        {
                            name: '南昌',
                            value: 54
                        },
                        {
                            name: '柳州',
                            value: 54
                        },
                        {
                            name: '三亚',
                            value: 54
                        },
                        {
                            name: '自贡',
                            value: 56
                        },
                        {
                            name: '吉林',
                            value: 56
                        },
                        {
                            name: '阳江',
                            value: 57
                        },
                        {
                            name: '泸州',
                            value: 57
                        },
                        {
                            name: '西宁',
                            value: 57
                        },
                        {
                            name: '宜宾',
                            value: 58
                        },
                        {
                            name: '呼和浩特',
                            value: 58
                        },
                        {
                            name: '成都',
                            value: 58
                        },
                        {
                            name: '大同',
                            value: 58
                        },
                        {
                            name: '镇江',
                            value: 59
                        },
                        {
                            name: '桂林',
                            value: 59
                        },
                        {
                            name: '张家界',
                            value: 59
                        },
                        {
                            name: '宜兴',
                            value: 59
                        },
                        {
                            name: '北海',
                            value: 60
                        },
                        {
                            name: '西安',
                            value: 61
                        },
                        {
                            name: '金坛',
                            value: 62
                        },
                        {
                            name: '东营',
                            value: 62
                        },
                        {
                            name: '牡丹江',
                            value: 63
                        },
                        {
                            name: '遵义',
                            value: 63
                        },
                        {
                            name: '绍兴',
                            value: 63
                        },
                        {
                            name: '扬州',
                            value: 64
                        },
                        {
                            name: '常州',
                            value: 64
                        },
                        {
                            name: '潍坊',
                            value: 65
                        },
                        {
                            name: '重庆',
                            value: 66
                        },
                        {
                            name: '台州',
                            value: 67
                        },
                        {
                            name: '南京',
                            value: 67
                        },
                        {
                            name: '滨州',
                            value: 70
                        },
                        {
                            name: '贵阳',
                            value: 71
                        },
                        {
                            name: '无锡',
                            value: 71
                        },
                        {
                            name: '本溪',
                            value: 71
                        },
                        {
                            name: '克拉玛依',
                            value: 72
                        },
                        {
                            name: '渭南',
                            value: 72
                        },
                        {
                            name: '马鞍山',
                            value: 72
                        },
                        {
                            name: '宝鸡',
                            value: 72
                        },
                        {
                            name: '焦作',
                            value: 75
                        },
                        {
                            name: '句容',
                            value: 75
                        },
                        {
                            name: '北京',
                            value: 79
                        },
                        {
                            name: '徐州',
                            value: 79
                        },
                        {
                            name: '衡水',
                            value: 80
                        },
                        {
                            name: '包头',
                            value: 80
                        },
                        {
                            name: '绵阳',
                            value: 80
                        },
                        {
                            name: '乌鲁木齐',
                            value: 84
                        },
                        {
                            name: '枣庄',
                            value: 84
                        },
                        {
                            name: '杭州',
                            value: 84
                        },
                        {
                            name: '淄博',
                            value: 85
                        },
                        {
                            name: '鞍山',
                            value: 86
                        },
                        {
                            name: '溧阳',
                            value: 86
                        },
                        {
                            name: '库尔勒',
                            value: 86
                        },
                        {
                            name: '安阳',
                            value: 90
                        },
                        {
                            name: '开封',
                            value: 90
                        },
                        {
                            name: '济南',
                            value: 92
                        },
                        {
                            name: '德阳',
                            value: 93
                        },
                        {
                            name: '温州',
                            value: 95
                        },
                        {
                            name: '九江',
                            value: 96
                        },
                        {
                            name: '邯郸',
                            value: 98
                        },
                        {
                            name: '临安',
                            value: 99
                        },
                        {
                            name: '兰州',
                            value: 99
                        },
                        {
                            name: '沧州',
                            value: 100
                        },
                        {
                            name: '临沂',
                            value: 103
                        },
                        {
                            name: '南充',
                            value: 104
                        },
                        {
                            name: '天津',
                            value: 105
                        },
                        {
                            name: '富阳',
                            value: 106
                        },
                        {
                            name: '泰安',
                            value: 112
                        },
                        {
                            name: '诸暨',
                            value: 112
                        },
                        {
                            name: '郑州',
                            value: 113
                        },
                        {
                            name: '哈尔滨',
                            value: 114
                        },
                        {
                            name: '聊城',
                            value: 116
                        },
                        {
                            name: '芜湖',
                            value: 117
                        },
                        {
                            name: '唐山',
                            value: 119
                        },
                        {
                            name: '平顶山',
                            value: 119
                        },
                        {
                            name: '邢台',
                            value: 119
                        },
                        {
                            name: '德州',
                            value: 120
                        },
                        {
                            name: '济宁',
                            value: 120
                        },
                        {
                            name: '荆州',
                            value: 127
                        },
                        {
                            name: '宜昌',
                            value: 130
                        },
                        {
                            name: '义乌',
                            value: 132
                        },
                        {
                            name: '丽水',
                            value: 133
                        },
                        {
                            name: '洛阳',
                            value: 134
                        },
                        {
                            name: '秦皇岛',
                            value: 136
                        },
                        {
                            name: '株洲',
                            value: 143
                        },
                        {
                            name: '石家庄',
                            value: 147
                        },
                        {
                            name: '莱芜',
                            value: 148
                        },
                        {
                            name: '常德',
                            value: 152
                        },
                        {
                            name: '保定',
                            value: 153
                        },
                        {
                            name: '湘潭',
                            value: 154
                        },
                        {
                            name: '金华',
                            value: 157
                        },
                        {
                            name: '岳阳',
                            value: 169
                        },
                        {
                            name: '长沙',
                            value: 175
                        },
                        {
                            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],
                        舟山: [122.207216, 29.985295],
                        齐齐哈尔: [123.97, 47.33],
                        盐城: [120.13, 33.38],
                        赤峰: [118.87, 42.28],
                        青岛: [120.33, 36.07],
                        乳山: [121.52, 36.89],
                        金昌: [102.188043, 38.520089],
                        泉州: [118.58, 24.93],
                        莱西: [120.53, 36.86],
                        日照: [119.46, 35.42],
                        胶南: [119.97, 35.88],
                        南通: [121.05, 32.08],
                        拉萨: [91.11, 29.97],
                        云浮: [112.02, 22.93],
                        梅州: [116.1, 24.55],
                        文登: [122.05, 37.2],
                        上海: [121.48, 31.22],
                        攀枝花: [101.718637, 26.582347],
                        威海: [122.1, 37.5],
                        承德: [117.93, 40.97],
                        厦门: [118.1, 24.46],
                        汕尾: [115.375279, 22.786211],
                        潮州: [116.63, 23.68],
                        丹东: [124.37, 40.13],
                        太仓: [121.1, 31.45],
                        曲靖: [103.79, 25.51],
                        烟台: [121.39, 37.52],
                        福州: [119.3, 26.08],
                        瓦房店: [121.979603, 39.627114],
                        即墨: [120.45, 36.38],
                        抚顺: [123.97, 41.97],
                        玉溪: [102.52, 24.35],
                        张家口: [114.87, 40.82],
                        阳泉: [113.57, 37.85],
                        莱州: [119.942327, 37.177017],
                        湖州: [120.1, 30.86],
                        汕头: [116.69, 23.39],
                        昆山: [120.95, 31.39],
                        宁波: [121.56, 29.86],
                        湛江: [110.359377, 21.270708],
                        揭阳: [116.35, 23.55],
                        荣成: [122.41, 37.16],
                        连云港: [119.16, 34.59],
                        葫芦岛: [120.836932, 40.711052],
                        常熟: [120.74, 31.64],
                        东莞: [113.75, 23.04],
                        河源: [114.68, 23.73],
                        淮安: [119.15, 33.5],
                        泰州: [119.9, 32.49],
                        南宁: [108.33, 22.84],
                        营口: [122.18, 40.65],
                        惠州: [114.4, 23.09],
                        江阴: [120.26, 31.91],
                        蓬莱: [120.75, 37.8],
                        韶关: [113.62, 24.84],
                        嘉峪关: [98.289152, 39.77313],
                        广州: [113.23, 23.16],
                        延安: [109.47, 36.6],
                        太原: [112.53, 37.87],
                        清远: [113.01, 23.7],
                        中山: [113.38, 22.52],
                        昆明: [102.73, 25.04],
                        寿光: [118.73, 36.86],
                        盘锦: [122.070714, 41.119997],
                        长治: [113.08, 36.18],
                        深圳: [114.07, 22.62],
                        珠海: [113.52, 22.3],
                        宿迁: [118.3, 33.96],
                        咸阳: [108.72, 34.36],
                        铜川: [109.11, 35.09],
                        平度: [119.97, 36.77],
                        佛山: [113.11, 23.05],
                        海口: [110.35, 20.02],
                        江门: [113.06, 22.61],
                        章丘: [117.53, 36.72],
                        肇庆: [112.44, 23.05],
                        大连: [121.62, 38.92],
                        临汾: [111.5, 36.08],
                        吴江: [120.63, 31.16],
                        石嘴山: [106.39, 39.04],
                        沈阳: [123.38, 41.8],
                        苏州: [120.62, 31.32],
                        茂名: [110.88, 21.68],
                        嘉兴: [120.76, 30.77],
                        长春: [125.35, 43.88],
                        胶州: [120.03336, 36.264622],
                        银川: [106.27, 38.47],
                        张家港: [120.555821, 31.875428],
                        三门峡: [111.19, 34.76],
                        锦州: [121.15, 41.13],
                        南昌: [115.89, 28.68],
                        柳州: [109.4, 24.33],
                        三亚: [109.511909, 18.252847],
                        自贡: [104.778442, 29.33903],
                        吉林: [126.57, 43.87],
                        阳江: [111.95, 21.85],
                        泸州: [105.39, 28.91],
                        西宁: [101.74, 36.56],
                        宜宾: [104.56, 29.77],
                        呼和浩特: [111.65, 40.82],
                        成都: [104.06, 30.67],
                        大同: [113.3, 40.12],
                        镇江: [119.44, 32.2],
                        桂林: [110.28, 25.29],
                        张家界: [110.479191, 29.117096],
                        宜兴: [119.82, 31.36],
                        北海: [109.12, 21.49],
                        西安: [108.95, 34.27],
                        金坛: [119.56, 31.74],
                        东营: [118.49, 37.46],
                        牡丹江: [129.58, 44.6],
                        遵义: [106.9, 27.7],
                        绍兴: [120.58, 30.01],
                        扬州: [119.42, 32.39],
                        常州: [119.95, 31.79],
                        潍坊: [119.1, 36.62],
                        重庆: [106.54, 29.59],
                        台州: [121.420757, 28.656386],
                        南京: [118.78, 32.04],
                        滨州: [118.03, 37.36],
                        贵阳: [106.71, 26.57],
                        无锡: [120.29, 31.59],
                        本溪: [123.73, 41.3],
                        克拉玛依: [84.77, 45.59],
                        渭南: [109.5, 34.52],
                        马鞍山: [118.48, 31.56],
                        宝鸡: [107.15, 34.38],
                        焦作: [113.21, 35.24],
                        句容: [119.16, 31.95],
                        北京: [116.46, 39.92],
                        徐州: [117.2, 34.26],
                        衡水: [115.72, 37.72],
                        包头: [110, 40.58],
                        绵阳: [104.73, 31.48],
                        乌鲁木齐: [87.68, 43.77],
                        枣庄: [117.57, 34.86],
                        杭州: [120.19, 30.26],
                        淄博: [118.05, 36.78],
                        鞍山: [122.85, 41.12],
                        溧阳: [119.48, 31.43],
                        库尔勒: [86.06, 41.68],
                        安阳: [114.35, 36.1],
                        开封: [114.35, 34.79],
                        济南: [117, 36.65],
                        德阳: [104.37, 31.13],
                        温州: [120.65, 28.01],
                        九江: [115.97, 29.71],
                        邯郸: [114.47, 36.6],
                        临安: [119.72, 30.23],
                        兰州: [103.73, 36.03],
                        沧州: [116.83, 38.33],
                        临沂: [118.35, 35.05],
                        南充: [106.110698, 30.837793],
                        天津: [117.2, 39.13],
                        富阳: [119.95, 30.07],
                        泰安: [117.13, 36.18],
                        诸暨: [120.23, 29.71],
                        郑州: [113.65, 34.76],
                        哈尔滨: [126.63, 45.75],
                        聊城: [115.97, 36.45],
                        芜湖: [118.38, 31.33],
                        唐山: [118.02, 39.63],
                        平顶山: [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 = {
                        title: {
                            // text: '全国主要城市空气质量 - 百度地图',
                            // subtext: 'data from PM25.in',
                            // sublink: 'http://www.pm25.in',
                            left: 'center'
                        },
                        // legend: {
                        //     icon: 'image://https://img2.baidu.com/it/u=2771395776,2060749722&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1710694800&t=c85f997454c2a2b3f2e7919ba9c194a3'
                        // },
                        // color:['#000'],
                        tooltip: {
                            trigger: 'item'
                        },
                        bmap: {
                            // center: [104.114129, 37.550339],
                            zoom: 4, // 这里可以根据需要调整缩放级别
                            roam: true,
                            mapStyle: {
                                styleJson: [{
                                        featureType: 'water',
                                        elementType: 'all',
                                        stylers: {
                                            color: '#d1d1d1'
                                        }
                                    },
                                    {
                                        featureType: 'land',
                                        elementType: 'all',
                                        stylers: {
                                            color: '#f3f3f3'
                                        }
                                    },
                                    {
                                        featureType: 'railway',
                                        elementType: 'all',
                                        stylers: {
                                            visibility: 'off'
                                        }
                                    },
                                    {
                                        featureType: 'highway',
                                        elementType: 'all',
                                        stylers: {
                                            color: '#fdfdfd'
                                        }
                                    },
                                    {
                                        featureType: 'highway',
                                        elementType: 'labels',
                                        stylers: {
                                            visibility: 'off'
                                        }
                                    },
                                    {
                                        featureType: 'arterial',
                                        elementType: 'geometry',
                                        stylers: {
                                            color: '#fefefe'
                                        }
                                    },
                                    {
                                        featureType: 'arterial',
                                        elementType: 'geometry.fill',
                                        stylers: {
                                            color: '#fefefe'
                                        }
                                    },
                                    {
                                        featureType: 'poi',
                                        elementType: 'all',
                                        stylers: {
                                            visibility: 'off'
                                        }
                                    },
                                    {
                                        featureType: 'green',
                                        elementType: 'all',
                                        stylers: {
                                            visibility: 'off'
                                        }
                                    },
                                    {
                                        featureType: 'subway',
                                        elementType: 'all',
                                        stylers: {
                                            visibility: 'off'
                                        }
                                    },
                                    {
                                        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
                                },
                                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);
      });
    },
    // 时空地图点击时获取的数据
    spaceTimeArr(Arr) {
      // 修改 Vue 组件的数据，例如显示菜单导航
      // 时空地图的数据
      console.log(Arr);


                    // 设置点击事件监听
                    myChart.on('click', (params) => {
                        console.log(params.event.offsetX, params.event.offsetY);
                        if (params.componentType === 'series') {

                            var dataName = params.data.name; // 获取点击的数据名称
                            var dataValue = params.data.value; // 获取点击的数据值
                            // 在这里可以根据需要处理点击事件，比如弹出对应数据的详细信息等操作
                            console.log('点击了', dataName, '数据，数值为', dataValue);
                            // 这里可以编写触发时间获取对应数据信息的逻辑
                            this.spaceTimeArr(params)
                        }
                    })

                    option && myChart.setOption(option);

                })
            },
            // 时空地图点击时获取的数据
            spaceTimeArr(Arr) {
                // 修改 Vue 组件的数据，例如显示菜单导航
                // 时空地图的数据
                console.log(Arr);

                this.isEchTrue = true
                this.$nextTick(() => {
                    this.isTop = (Arr.event.offsetY ) - .18 - (document.querySelector('.echartsTrue')
                        .offsetHeight / 2.1 ) + 'px'
                    this.isLeft = Arr.event.offsetX  - (document.querySelector('.echartsTrue').offsetWidth /
                        2.1 ) + 'px'
                    console.log((document.querySelector('.echartsTrue').offsetHeight / 2 / 100));
                })

            },
            // 查看更多>>
            viewMoreClick() {
                uni.navigateTo({
                    url: '/pages/character/detail'
                })
            },
        }
    }
      this.isEchTrue = true;
      this.$nextTick(() => {
        this.isTop =
          Arr.event.offsetY -
          0.18 -
          document.querySelector(".echartsTrue").offsetHeight / 2.1 +
          "px";
        this.isLeft =
          Arr.event.offsetX -
          document.querySelector(".echartsTrue").offsetWidth / 2.1 +
          "px";
        console.log(
          document.querySelector(".echartsTrue").offsetHeight / 2 / 100
        );
      });
    },
    // 查看更多>>
    viewMoreClick() {
      uni.navigateTo({
        url: "/pages/character/detail"
      });
    }
  }
};
</script>

<style>
    * {
        box-sizing: border-box;
    }
.pageBox {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}

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

    ::v-deep .el-card__header {
        border: 0;
        background-color: #DDE8F6;
        height: .36rem;
        padding: .08rem .13rem;
        font-size: .14rem;
        font-weight: 600;
    }
::v-deep .el-card__header {
  border: 0;
  background-color: #dde8f6;
  height: 0.36rem;
  padding: 0.08rem 0.13rem;
  font-size: 0.14rem;
  font-weight: 600;
}

    .information li {
        font-size: .12rem;
        color: #2C2C2C;
        line-height: 2;
    }
.information li {
  font-size: 0.12rem;
  color: #2c2c2c;
  line-height: 2;
}

    /* 地图上的左下角 */
    ::v-deep .anchorBL {
        display: none;
    }
/* 地图上的左下角 */
::v-deep .anchorBL {
  display: none;
}

    @media screen and (min-width:2560px)and (max-width:3840px) {
        .Search {
            /* width: 30%; */
            justify-content: flex-end;
            margin-right: .26rem;
            width: 4rem;
        }
@media screen and (min-width: 2560px) and (max-width: 3840px) {
  .Search {
    /* width: 30%; */
    justify-content: flex-end;
    margin-right: 0.26rem;
    width: 4rem;
  }

        .Search ::v-deep .ffff {
            width: 3rem;
            height: .36rem;
            padding: .01rem;
            border-radius: .3rem !important;
        }
  .Search ::v-deep .ffff {
    width: 3rem;
    height: 0.36rem;
    padding: 0.01rem;
    border-radius: 0.3rem !important;
  }

        .Search ::v-deep .widget_button {
            width: 1rem;
            /* height: .3rem; */
            font-size: .14rem;
            padding: 0;
            border-radius: .3rem !important;
        }
  .Search ::v-deep .widget_button {
    width: 1rem;
    /* height: .3rem; */
    font-size: 0.14rem;
    padding: 0;
    border-radius: 0.3rem !important;
  }

        .Search ::v-deep .widget_style {
            display: flex;
            justify-content: flex-end;
        }
  .Search ::v-deep .widget_style {
    display: flex;
    justify-content: flex-end;
  }

        .Search ::v-deep .uni-input-placeholder {
            font-size: .13rem;
            /* height: 100%; */
            line-height: 1;
        }
  .Search ::v-deep .uni-input-placeholder {
    font-size: 0.13rem;
    /* height: 100%; */
    line-height: 1;
  }

        .Search ::v-deep .uni-input-input {
            margin-left: .19rem;
        }
    }
  .Search ::v-deep .uni-input-input {
    margin-left: 0.19rem;
  }
}

    #main {
        height: 6.2rem;
    }
#main {
  flex: 1;
}

    .Search {
        /* width: 30%; */
        justify-content: flex-end;
        margin-right: .26rem;
        width: 4rem;
    }
.Search {
  /* width: 30%; */
  justify-content: flex-end;
  margin-right: 0.26rem;
  width: 4rem;
}

    .Search ::v-deep .ffff {
        width: 3rem;
        height: .36rem;
        padding: .01rem;
    }
.Search ::v-deep .ffff {
  width: 3rem;
  height: 0.36rem;
  padding: 0.01rem;
}

    .Search ::v-deep .widget_button {
        width: 1rem;
        /* height: .3rem; */
        font-size: .14rem;
        padding: 0;
        background-color: #597AA5;
    }
.Search ::v-deep .widget_button {
  width: 1rem;
  /* height: .3rem; */
  font-size: 0.14rem;
  padding: 0;
  background-color: #597aa5;
}

    .Search ::v-deep .widget_style {
        display: flex;
        justify-content: flex-end;
    }
.Search ::v-deep .widget_style {
  display: flex;
  justify-content: flex-end;
}

    .Search ::v-deep .uni-input-placeholder {
        font-size: .13rem;
        /* height: 100%; */
        line-height: 1;
        margin-left: .19rem;
    }
</style>
.Search ::v-deep .uni-input-placeholder {
  font-size: 0.13rem;
  /* height: 100%; */
  line-height: 1;
  margin-left: 0.19rem;
}
</style>

 src/static/map.js

@@ -9,8 +9,10 @@
    }
    let script = document.createElement('script')
    script.type = 'text/javascript'
    script.src = 'http://api.map.baidu.com/api?v=2.0&ak=' + ak + '&__ec_v__=20190126&callback=onBMapCallback'
    script.src = 'http://api.map.baidu.com/api?v=3.0&ak=' + ak + '&__ec_v__=20190126&callback=onBMapCallback'
    script.onerror = reject
    document.head.appendChild(script)
  })
}
}



 src/static/tool.js

New file
@@ -0,0 +1,6 @@
import {
    baseUrl,
} from "../utils/request/req1"
export const getImg = (path) => {
    return baseUrl + "/picture/getImageByFilePath?filePath=" + path
}

 src/uni_modules/cc-defineTable/components/cc-defineTable/cc-defineTable.vue

@@ -1,86 +1,90 @@
    <template>
        <view>
            <view class="tabContent " :class="{'flex': !isTrue }" v-show="true">
                <view style="width: 50%;" v-for="(item, index) in tableData" :key="index">
                    <view class="paramBox ">
                        <!-- <view class="param-title">{{item.name}}</view> -->
                        <view v-for="(subItem, subIndex) in item.list" :key="subIndex">
                            <view class="param-item">
                                <label style="padding-left: .1rem;background-color: #5879a4;color: #fff;">{{subItem.name}}</label>
                                <text  class="font-family" style="padding-left: .2rem;background-color: #ebf3fe;flex-grow: 1;">{{subItem.value}}</text>
                            </view>
                        </view>
                    </view>
                </view>
                <!-- <view v-if="isTrue " style="height: 30rpx;"></view> -->
            </view>
        </view>
    </template>
    <script>
        export default {
            props: {
                tableData: {
                    type: Array,
                    default () {
                        return []
                    }
                },
                isTrue: {
                    true: Boolean,
                    defalut() {
                        return false;
                    }
                }
<template>
  <view>
    <view class="tabContent" :class="{ flex: !isTrue }" v-show="true">
      <view style="width: 50%" v-for="(item, index) in tableData" :key="index">
        <view class="paramBox">
          <!-- <view class="param-title">{{item.name}}</view> -->
          <view v-for="(subItem, subIndex) in item.list" :key="subIndex">
            <view class="param-item">
              <label>{{ subItem.name }}</label>
              <text class="font-family" :title="subItem.value">{{ subItem.value }}</text>
            </view>
          </view>
        </view>
      </view>
      <!-- <view v-if="isTrue " style="height: 30rpx;"></view> -->
    </view>
  </view>
</template>
<script>
export default {
  props: {
    tableData: {
      type: Array,
      default() {
        return [];
      }
    },
    isTrue: {
      true: Boolean,
      defalut() {
        return false;
      }
    }
  },
  data() {
    return {};
  },
  methods: {}
};
</script>

            },
            data() {
                return {
<style scoped>
view {
  box-sizing: border-box;
}

                }
            },
            methods: {
.tabContent {
  background: #fff;
  overflow: hidden;
}

.param-title {
  background: #f5f5f5;
  height: 80rpx;
  line-height: 80rpx;
  margin: 20rpx 30rpx 0;
  font-size: 28rpx;
  text-indent: 30rpx;
}

            }

        }
    </script>

    <style scoped>
        view {

            box-sizing: border-box;
        }

        .tabContent {
            background: #fff;
            overflow: hidden;
        }

        .param-title {
            background: #f5f5f5;
            height: 80rpx;
            line-height: 80rpx;
            margin: 20rpx 30rpx 0;
            font-size: 28rpx;
            text-indent: 30rpx;
        }

        .param-item {
            height: .3rem;
            line-height: .3rem;
            font-size: .14rem;
            border-bottom: .02rem solid #fff;
            margin: 0 4rpx;
        /*     border-left: 1rpx solid #f5f5f5;
.param-item {
  height: 0.3rem;
  line-height: 0.3rem;
  font-size: 0.14rem;
  border-bottom: 0.02rem solid #fff;
  margin: 0 4rpx;
  /*     border-left: 1rpx solid #f5f5f5;
            border-right: 1rpx solid #f5f5f5; */
            /* padding: 0 30rpx; */
            display: flex;
        }
  /* padding: 0 30rpx; */
  display: flex;
}

        .param-item label {
            width: 1.55rem;
            color: #999;
            margin-right: .03rem !important;
        }
    </style>
.param-item label {
  width: 1.55rem;
  color: #999;
  margin-right: 0.03rem !important;
  padding-left: 0.1rem;
  background-color: #5879a4;
  color: #fff;
}

.param-item text {
  padding-left: 0.2rem;
  background-color: #ebf3fe;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</style>