1

QYF-GitLab1

2024-07-18 f1a0db5232be76d93dcaad38b2bfdb524868731d

1

 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">查看更多>>></div>
    </div>
  </view>
</template>

@@ -243,9 +257,12 @@
      // 人物信息
      infoOfPersons: [],
      // 学术流派
      infoOfSchools:[],
      infoOfSchools: [],
      // 当前人物信息
      ownInfo: null,
      detailData: {
        name: "",
      },
    };
  },
  mounted() {
@@ -281,7 +298,9 @@
          obj.relationTypeName = ele.literatureName;
        }
        if (str == "schoolList") {
          const nameData = this.infoOfSchools?.find(i=>i.schoolId == ele.schoolId)
          const nameData = this.infoOfSchools?.find(
            (i) => i.schoolId == ele.schoolId
          );
          obj.relationTypeName = nameData?.name[0];
        }
        if (str == "placeList") {
@@ -557,7 +576,7 @@
      var option;
      option = {
        title: {
          text: "学术流派",
          text: "",
          // subtext: '',
          left: "center",
          top: FontSize + 10,
@@ -619,11 +638,48 @@
      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 = {
        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 +689,6 @@
      } else {
        this.hotAciveIndex = "";
      }
      // this.searchKey = val.text;
      this.getData(val.text);
    },
    // 高级搜索
@@ -717,7 +772,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 +853,5 @@
.hotSearch {
  font-size: 0.12rem;
  color: #2c2c2c;

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