1

QYF-GitLab1

2024-07-19 dc1c7947711669dffdf3f1ae0519b378261c559f

 src/pages/academicSchools/index.vue

@@ -48,6 +48,20 @@
        暂无相关数据
      </div>
    </div>
    <div id="customDialog" class="customDialog">
      <div class="title">
        <span>{{ detailData.name }}</span>
        <span @click="closeDom">关闭</span>
      </div>
      <div class="content">
        <p>姓名：{{ detailData.name }}</p>
        <p>别名：{{ detailData.alias }}</p>
        <p>籍贯：{{ detailData.nativePlace }}</p>
        <p>医学分科： {{ detailData.medicalBranch }}</p>
        <p>小传：{{ detailData.biography }}</p>
      </div>
      <div class="btn" @click="spaceTimeArr(detailData.id)">查看更多>>></div>
    </div>
  </view>
</template>

@@ -243,9 +257,12 @@
      // 人物信息
      infoOfPersons: [],
      // 学术流派
      infoOfSchools:[],
      infoOfSchools: [],
      // 当前人物信息
      ownInfo: null,
      detailData: {
        name: "",
      },
    };
  },
  mounted() {
@@ -267,30 +284,96 @@
        const personInfo = this.infoOfPersons.find(
          (item) => item.id == ele.personId
        );
        const obj = {
          personId: ele.personId,
          parentId: parent.id,
          id2: personInfo.id,
          relationTypeId: ele.relationTypeId,
          relationTypeName: ele.relationTypeName,
          parentName: parent?.NAME[0]?.content1 ?? parent.parentName,
          name2: personInfo?.NAME[0]?.content1,
          category: type,
        };
        if (str == "literatureList") {
          obj.relationTypeName = ele.literatureName;
        }
        if (str == "schoolList") {
          const nameData = this.infoOfSchools?.find(i=>i.schoolId == ele.schoolId)
          obj.relationTypeName = nameData?.name[0];
        }
        if (str == "placeList") {
          obj.relationTypeName = ele.ancientName ?? ele.currentName;
        }
        newArr.push(obj);
        if (ele[str] && ele[str]?.length) {
          order++;
          this.getPersonInfo(ele[str], str, newArr, order, type, personInfo);
        if (personInfo?.id) {
          const obj = {
            personId: ele.personId,
            parentId: parent.id,
            id2: personInfo.id,
            relationTypeName: ele.relationTypeName,
            parentName: parent?.NAME[0]?.content1 ?? parent.parentName,
            name2: personInfo?.NAME[0]?.content1,
            category: type,
          };
          if (str == "literatureList") {
            obj.relationTypeName = ele.literatureName;
          }
          if (str == "schoolList") {
            const nameData = this.infoOfSchools?.find(
              (i) => i.schoolId == ele.schoolId
            );
            obj.relationTypeName = nameData?.name[0];
          }
          if (str == "placeList") {
            obj.relationTypeName = ele.ancientName ?? ele.currentName;
          }
          newArr.push(obj);
          if (ele["kinList"] && ele["kinList"]?.length) {
            order++;
            this.getPersonInfo(
              ele["kinList"],
              "kinList",
              newArr,
              order,
              0,
              personInfo
            );
          }
          if (ele["teacherStudentList"] && ele["teacherStudentList"]?.length) {
            order++;
            this.getPersonInfo(
              ele["teacherStudentList"],
              "teacherStudentList",
              newArr,
              order,
              1,
              personInfo
            );
          }
          if (ele["literatureList"] && ele["literatureList"]?.length) {
            const data = this.changeLiterature(
              ele["literatureList"],
              "literatureList"
            );
            order++;
            this.getPersonInfo(
              data,
              "literatureList",
              newArr,
              order,
              2,
              personInfo
            );
          }

          if (ele["socialList"] && ele["socialList"]?.length) {
            const data = this.changeLiterature(ele["socialList"], "socialList");
            order++;
            this.getPersonInfo(
              data,
              "socialList",
              newArr,
              order,
              3,
              personInfo
            );
          }
          if (ele["placeList"] && ele["placeList"]?.length) {
            const data = this.changeLiterature(ele["placeList"], "placeList");
            order++;
            this.getPersonInfo(data, "placeList", newArr, order, 4, personInfo);
          }
          if (ele["schoolList"] && ele["schoolList"]?.length) {
            const data = this.changeLiterature(ele["schoolList"], "schoolList");
            order++;
            this.getPersonInfo(
              data,
              "schoolList",
              newArr,
              order,
              5,
              personInfo
            );
          }
        }
      }
    },
@@ -354,7 +437,7 @@
        let place = [];
        let school = [];
        if (res && res.success && res.object) {
          console.log(res.object);
          // console.log(res.object);
          this.infoOfPersons = res.object?.infoOfPersons;
          this.infoOfSchools = res.object?.infoOfSchools;
          if (res.object?.personChain) {
@@ -404,6 +487,7 @@
                this.ownInfo
              );
              literature = [...newArr];
              // console.log(literature, "literature");
            }
            if (obj.socialList?.length) {
              let newArr = [];
@@ -425,7 +509,6 @@
              const data = this.changeLiterature(obj.placeList, "placeList");
              this.getPersonInfo(data, "placeList", newArr, 1, 4, this.ownInfo);
              place = [...newArr];
              // console.log(place, "placeList");
            }
            if (obj.schoolList?.length) {
              this.categories.push({ name: "学术流派" });
@@ -436,11 +519,10 @@
                "schoolList",
                newArr,
                1,
                3,
                5,
                this.ownInfo
              );
              school = [...newArr];
              // console.log(school, "schoolList");
            }
          }
          const personData = [
@@ -451,7 +533,14 @@
            ...place,
            ...school,
          ];
          // console.log(personData)
          // const k = personData.filter((item) => item.category == 0);
          // const t = personData.filter((item) => item.category == 1);
          // const l = personData.filter((item) => item.category == 2);
          // const o = personData.filter((item) => item.category == 3);
          // const p = personData.filter((item) => item.category == 4);
          // const s = personData.filter((item) => item.category == 5);
          // const nodesList = [...k, ...t, ...l, ...o, ...p, ...s];
          // console.log(nodesList);
          personData.forEach((item) => {
            let exists1 = this.nodes.some(
              (node) =>
@@ -556,74 +645,109 @@
      var nodeData = nodes;
      var option;
      option = {
        title: {
          text: "学术流派",
          // subtext: '',
          left: "center",
          top: FontSize + 10,
          textStyle: {
            fontSize: FontSize, // 设置标题文字大小为 18px
          },
          subtextStyle: {
            fontSize: FontSize, // 设置副标题文字大小为 14px
            color: "#2C2C2C",
          },
        },
        backgroundColor: {
          type: "image",
          image: "/static/image/characterRelationBg.png",
          // repeat: 'repeat-x', // 是否平铺，可以是 'repeat-x', 'repeat-y', 'no-repeat'
          size: "100% 100%", // 背景图片的尺寸，可以是百分比或者像素
          position: "center center", // 背景图片的位置，可以是 top, bottom, middle 或者百分比
        },
        tooltip: {},
        legend: [
          {
            // selectedMode: 'single',
            left: 20,
            top: 20,
            orient: "vertical",
            data: this.categories.map(function (a) {
              return a.name;
            }),
          },
        ],
        animationDurationUpdate: 1500,
        animationEasingUpdate: "quinticInOut",
        series: [
          {
            type: "graph",
            legendHoverLink: false,
            legendHoverLink: true,
            layout: "force",
            symbolSize: 40,
            data: nodeData,
            links: links,
            categories: this.categories,
            roam: true,
            label: {
              show: true,
              position: "right",
              formatter: "{b}",
            },
            labelLayout: {
              hideOverlap: true,
            },
            scaleLimit: {
              min: 0.4,
              max: 2,
            },
            lineStyle: {
              color: "source",
              curveness: 0.3,
              curveness: 0.2,
            },
            emphasis: {
              focus: "adjacency",
              lineStyle: {
                width: 10,
                width: 5,
              },
            },
            force: {
              repulsion: 600,
              edgeLength: 300,
            },
          },
        ],
      };
      // 将生成的连接线添加到echarts图表的option中
      // option.series[0].links = links;
      // 设置点击事件监听
      myChart.off("click");
      myChart.on("click", (params) => {
        if (params.dataType === "node") {
          this.spaceTimeArr(params.data.id);
          this.creatDom(params);
        }
      });
      console.log(option, "option");
      myChart.setOption(option);
    },
    creatDom(params) {
      const e = params.event;
      const div = document.getElementById("customDialog");
      div.style.display = "block";
      div.style.left = e.offsetX + 50 + "px";
      div.style.top = e.offsetY - 50 + "px";
      const data = this.infoOfPersons?.find(
        (i) => i.id == params.data.personId
      );
      const obj = {
        id: params.data.id,
        name:
          data?.NAME?.map((e, i) => {
            i += 1;
            return e["content" + i];
          }).join("、") ?? "",
        alias:
          data?.ALIAS?.map((e, i) => {
            i += 1;
            return e["content" + i];
          }).join("、") ?? "",
        nativePlace:
          data?.NATIVE_PLACE?.map((e, i) => {
            i += 1;
            return e["content" + i];
          }).join("、") ?? "",
        medicalBranch:
          data?.MEDICAL_BRANCH?.map((e, i) => {
            i += 1;
            return e["content" + i];
          }).join("、") ?? "",
        biography: data?.BIOGRAPHY ?? "",
      };
      this.detailData = obj;
    },
    closeDom() {
      const div = document.getElementById("customDialog");
      div.style.display = "none";
    },
    // 基础搜索
    onSearch(val, index) {
@@ -633,7 +757,6 @@
      } else {
        this.hotAciveIndex = "";
      }
      // this.searchKey = val.text;
      this.getData(val.text);
    },
    // 高级搜索
@@ -717,7 +840,64 @@
#relatio {
  width: 100%;
  height: 100%;
  position: relative;
}

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

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

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

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

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

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

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

@@ -741,15 +921,5 @@
.hotSearch {
  font-size: 0.12rem;
  color: #2c2c2c;

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