From e00361c6bcbb1a56f6dcda22b91bdfcb2736e263 Mon Sep 17 00:00:00 2001
From: YM <479443481@qq.com>
Date: 星期五, 26 七月 2024 15:56:27 +0800
Subject: [PATCH] 1

---
 src/pages/character/detail.vue |  346 ++++++++++++++++++++++++++-------------------------------
 1 files changed, 159 insertions(+), 187 deletions(-)

diff --git a/src/pages/character/detail.vue b/src/pages/character/detail.vue
index e2f199c..d4c28cb 100644
--- a/src/pages/character/detail.vue
+++ b/src/pages/character/detail.vue
@@ -1,6 +1,6 @@
 <template>
   <view class="relative">
-    <headNav :idIndex="1 + ''" text="涓尰浜虹墿鏁版嵁搴�" />
+    <headNav :idIndex="1 + ''" text="鍘嗕唬浜虹墿" />
     <view class="Midde flex">
       <el-button class="MiddeBack flex flex-center" @click="goBack"
         >杩斿洖</el-button
@@ -100,7 +100,6 @@
             >
           </view>
           <view
-            v-if="biogData.length > 1"
             style="font-size: 0.12rem; color: #244a7b; cursor: pointer"
             @click="ProfileClick"
             >闃呰鏇村></view
@@ -240,7 +239,7 @@
             class="box-card"
             style="min-height: 1.91rem; margin: 0.2rem 0"
           >
-            <el-tabs ref="tabs" v-model="activeName" @tab-click="handleClick">
+            <el-tabs ref="tabs" v-model="activeName">
               <el-tab-pane label="浠h〃钁椾綔" data-id="1" name="representative">
                 <Table1
                   :data="tableData1"
@@ -290,19 +289,22 @@
               <span>鐩稿叧闄勮〃/鍥惧儚</span>
             </div>
             <view>
-              <div style="overflow: auto">
-                <el-image
-                  v-for="item in imageList"
-                  :key="item"
-                  style="
-                    width: 2.05rem;
-                    height: 2.4rem;
-                    margin-right: 0.2rem;
-                    margin-bottom: 0.1rem;
-                  "
-                  :src="item"
-                  fit="fill"
-                ></el-image>
+              <div style="overflow: auto; display: flex">
+                <div v-for="item in imageList" :key="item" :title="item.name">
+                  <el-image
+                    :title="item.name"
+                    :alt="item.name"
+                    style="
+                      width: 2.05rem;
+                      height: 2.4rem;
+                      margin-right: 0.2rem;
+                      margin-bottom: 0.1rem;
+                    "
+                    :src="item.src"
+                    :preview-src-list="imageList.map((item) => item.src)"
+                    fit="contain"
+                  ></el-image>
+                </div>
               </div>
               <div
                 v-if="imageList.length == 0"
@@ -408,13 +410,15 @@
   getPersonInfo,
   getRelationTypeTreeList,
   getWebBasic,
+  getDynastyAll,
   getIntroduction,
   getSource,
   getPersonImages,
   getPersonBiog,
   getPersonWritings,
   getPersonRelationAtSchool,
-  getSpaceTime
+  getSpaceTime,
+  getDynastyData
 } from "@/api/index.js";
 import { getImg } from "@/static/tool.js";
 import L from "leaflet";
@@ -477,6 +481,8 @@
         },
         {
           prop: "d",
+          width: 300,
+          showOverflowTooltip: true,
           label: "鍑哄"
         }
       ],
@@ -528,13 +534,13 @@
     // 鑾峰彇鏃剁┖鍦板浘
     this.getMapInfo();
 
-    this.$nextTick(() => {
-      // 鑾峰彇绗竴涓�夐」鍗$殑 DOM 鍏冪礌
-      const firstTab = this.$refs.tabs.$el.querySelector(
-        ".el-tabs__active-bar"
-      );
-      firstTab.style.transform = "translateX(" + "-.2rem" + ")";
-    });
+    // this.$nextTick(() => {
+    //   // 鑾峰彇绗竴涓�夐」鍗$殑 DOM 鍏冪礌
+    //   const firstTab = this.$refs.tabs.$el.querySelector(
+    //     ".el-tabs__active-bar"
+    //   );
+    //   firstTab.style.transform = "translateX(" + "-.2rem" + ")";
+    // });
 
     // 鐩戝惉绐楀彛澶у皬鍙樺寲
     window.addEventListener("resize", this.relation);
@@ -555,7 +561,6 @@
       });
     },
     toLink(item) {
-      console.log(item);
       if (item.url) {
         window.open(item.url);
       }
@@ -582,30 +587,31 @@
               : fieldItem.content1;
           }
         }
-        console.log(obj);
         this.detailInfo = obj;
+        getDynastyAll().then((dynastyData) => {
+          getWebBasic({
+            personId: this.detailId
+          }).then((res) => {
+            const obj = res.object;
+            if (obj.school) {
+              getIntroduction(Number(obj.school)).then((sres) => {
+                this.handleData(obj, sres, dynastyData.list);
+              });
+            } else {
+              this.handleData(obj, null, dynastyData.list);
+            }
+          });
+        });
         // 鍏崇郴鍥捐氨
-        this.getMappingData(this.detailInfo.NAME);
+        this.getMappingData();
       });
+
       //鐜颁唬鐮旂┒
       getPersonInfo({
         id: this.detailId,
         type: "PERSON_RESEARCH"
       }).then((res) => {
         this.personResearchList = res.object.personResearchList;
-      });
-
-      getWebBasic({
-        personId: this.detailId
-      }).then((res) => {
-        const obj = res.object;
-        if (obj.school) {
-          getIntroduction(Number(obj.school)).then((sres) => {
-            this.handleData(obj, sres);
-          });
-        } else {
-          this.handleData(obj);
-        }
       });
 
       // 娲诲姩骞磋氨
@@ -619,19 +625,19 @@
               a: item.time,
               b: item.activityName,
               c: item.activityAddrOld,
-              d: item.desc // 杩欓噷缂哄皯娲诲姩鎻忚堪瀛楁
+              d: item.desc
             };
           });
         }
       });
     },
-    handleData(obj, sres) {
+    handleData(obj, sres, dynastyData) {
       this.tableArr = [
         {
           list: [
             {
-              name: "鍒悕",
-              value: obj.alias || "-"
+              name: "濮撳悕",
+              value: obj.name || "-"
             },
             {
               name: "瀛�",
@@ -643,7 +649,9 @@
             },
             {
               name: "鎵�澶勬椂鏈�",
-              value: obj.dynastyDesc || "-",
+              value:
+                dynastyData.find((item) => item.dynastyId == obj.dynastyId)
+                  .name || "-",
               valueClick: () => {
                 uni.navigateTo({
                   url:
@@ -708,7 +716,28 @@
       getPersonImages({
         personId: this.detailId
       }).then((res) => {
-        this.imageList = res.list.map((item) => getImg(item.filePath));
+        this.imageList = res.list.map((item) => {
+          return {
+            src: getImg(item.filePath),
+            name: item.desc
+          };
+        });
+      });
+    },
+    getBiog() {
+      getPersonBiog({
+        personId: this.detailId
+      }).then((res) => {
+        this.biogData = res.list.map((item) => {
+          return {
+            content: item.content1,
+            bookName:
+              "銆�" +
+              item.bookName +
+              "銆� " +
+              (item.pageNo ? "P " + item.pageNo : "") // 杩欓噷鍙湁bookid鏃犳硶鍖归厤鍒颁功鍚�
+          };
+        });
       });
     },
     getBiog() {
@@ -743,76 +772,72 @@
       });
     },
     getRelationship() {
-      getRelationTypeTreeList().then((res) => {
-        console.log(res, "getRelationTypeTreeList");
-        console.log(res);
-      });
-      // getPersonRelationAtSchool({
-      //   personId: this.detailId,
-      // }).then((res) => {
-      //   this.personRelationList = res.object.personRelationList;
-      //   if (this.personRelationList.length) {
-      //     this.tableData4 = this.personRelationList.map((f) => {
-      //       return {
-      //         a: f.nodeName,
-      //         b: f.relationTypeName,
-      //       };
-      //     });
-      //   }
-      // });
       getPersonInfo({
         id: this.detailId,
         type: "PERSON_RELATIONS"
       }).then((res) => {
         this.tableData4;
-        console.log(res, "PERSON_RELATIONS");
-      });
-      // 绀句細鍏崇郴
-      getPersonRelationAtSchool({
-        personId: this.detailId,
-        relationSearchTypeEO: "SOCIAL"
-      }).then((res) => {
-        if (res.list && res.list.length) {
-          this.tableData4 = res.list.map((f) => {
+        if (res.object.personRelationMap.kin.length) {
+          this.tableData2 = res.object.personRelationMap.kin.map((f) => {
             return {
-              a: f.name1,
-              b: f.relationName
+              a: f.nodeName,
+              b: f.relationTypeName,
+              c: f.textualResearch,
+              d:
+                res.object.bookList &&
+                res.object.bookList.find((citem) => citem.id == f.bookId)
+                  ? "銆�" +
+                    res.object.bookList.find((citem) => citem.id == f.bookId)
+                      .name +
+                    "銆� P" +
+                    f.pageNo
+                  : ""
             };
           });
         }
-      });
-      // 浜插睘鍏崇郴
-      getPersonRelationAtSchool({
-        personId: this.detailId,
-        relationSearchTypeEO: "KINSHIP"
-      }).then((res) => {
-        if (res.list && res.list.length) {
-          this.tableData2 = res.list.map((f) => {
-            return {
-              a: f.name1,
-              b: f.relationName
-            };
-          });
+        if (res.object.personRelationMap.teacherStudent.length) {
+          this.tableData3 = res.object.personRelationMap.teacherStudent.map(
+            (f) => {
+              return {
+                a: f.nodeName,
+                b: f.relationTypeName,
+                c: f.textualResearch,
+                d:
+                  res.object.bookList &&
+                  res.object.bookList.find((citem) => citem.id == f.bookId)
+                    ? "銆�" +
+                      res.object.bookList.find((citem) => citem.id == f.bookId)
+                        .name +
+                      "銆� P" +
+                      f.pageNo
+                    : ""
+              };
+            }
+          );
         }
-      });
-      // 甯堟壙鍏崇郴
-      getPersonRelationAtSchool({
-        personId: this.detailId,
-        relationSearchTypeEO: "INHERITANCE"
-      }).then((res) => {
-        if (res.list && res.list.length) {
-          this.tableData3 = res.list.map((f) => {
+        if (res.object.personRelationMap.social.length) {
+          this.tableData4 = res.object.personRelationMap.social.map((f) => {
             return {
-              a: f.name1,
-              b: f.relationName
+              a: f.nodeName,
+              b: f.relationTypeName,
+              c: f.textualResearch,
+              d:
+                res.object.bookList &&
+                res.object.bookList.find((citem) => citem.id == f.bookId)
+                  ? "銆�" +
+                    res.object.bookList.find((citem) => citem.id == f.bookId)
+                      .name +
+                    "銆� P" +
+                    f.pageNo
+                  : ""
             };
           });
         }
       });
     },
-    getMappingData(name) {
+    getMappingData() {
       getFuzzySearch({
-        keyword: name
+        personId: this.detailId
       }).then((res) => {
         this.nodes = [];
         this.relationships = [];
@@ -967,30 +992,6 @@
         .join("&");
       window.open(`#/pages/fileDetail/index?${queryString}`);
     },
-    handleClick(tab) {
-      let index = tab.$attrs["data-id"] - 1;
-      this.$nextTick(() => {
-        let firstTab = this.$refs.tabs.$el.querySelector(
-          ".el-tabs__active-bar"
-        );
-        if (index == 0) {
-          firstTab.style.transform = "translateX(-" + 0.2 + "rem)";
-        } else if (index == 1) {
-          firstTab.style.transform = "translateX(" + 0.85 * index + "rem)";
-        } else if (index == 2) {
-          firstTab.style.transform = "translateX(" + 0.93 * index + "rem)";
-        } else if (index == 3) {
-          firstTab.style.transform = "translateX(" + 0.95 * index + "rem)";
-        } else if (index == 4) {
-          firstTab.style.transform = "translateX(" + 0.97 * index + "rem)";
-        } else {
-          let firstTab = this.$refs.tabs.$el.querySelector(
-            ".el-tabs__active-bar"
-          );
-          firstTab.style.transform = "translateX(" + "-.2" + "rem)";
-        }
-      });
-    },
     // 鍏崇郴鍥捐氨
     relation() {
       var chartDom = document.getElementById("relation");
@@ -1001,25 +1002,8 @@
 
       let FontSize = 12; // 瀛椾綋澶у皬
       let BorderWidth = 2; // 杈规澶у皬
-      let SymbolSize = 80; // 灏哄璺濈
+      let SymbolSize = 50; // 灏哄璺濈
       let Distance = 10;
-      // 涓嶅悓灏哄涓嬩慨鏀筫charts鐨勫瓧浣�
-      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) => {
@@ -1329,16 +1313,14 @@
 
 <style>
 /* Table1琛ㄦ牸閲岄潰鐨勬暟鎹� */
-::v-deep .is-leaf {
-  .cell {
+::v-deep .is-leaf .cell {
     font-size: 0.14rem !important;
     height: 0.4rem !important;
     line-height: 0.4rem !important;
   }
 }
 
-::v-deep .el-table__body {
-  .cell {
+::v-deep .el-table__body .cell {
     font-size: 0.14rem !important;
     height: 0.4rem !important;
     line-height: 0.4rem !important;
@@ -1359,9 +1341,7 @@
   width: 70%;
 }
 
-::v-deep .el-tabs__content {
-  line-height: 1;
-}
+
 
 /* 涓汉灏忎紶 ------------------*/
 ::v-deep .el-dialog__header {
@@ -1383,12 +1363,6 @@
 }
 
 /* ------------------- */
-
-img {
-  width: 100%;
-  height: 100%;
-}
-
 * {
   box-sizing: border-box;
 }
@@ -1398,16 +1372,16 @@
   padding: 15rpx 25rpx;
   color: #fff !important;
 
-  img {
-    width: 30rpx;
-    height: 30rpx;
-    vertical-align: middle;
-  }
+}
+.NavTop img {
+  width: 30rpx;
+  height: 30rpx;
+  vertical-align: middle;
+}
 
-  .NavTopr {
-    img {
-      margin-right: 10rpx;
-    }
+.NavTop .NavTopr {
+  img {
+    margin-right: 10rpx;
   }
 }
 
@@ -1415,9 +1389,9 @@
   width: 100%;
   height: 30rpx;
 
-  img {
-    vertical-align: top;
-  }
+}
+.mImage img {
+  vertical-align: top;
 }
 
 .Midde {
@@ -1428,28 +1402,28 @@
   align-items: flex-start;
   padding: 0.18rem 0.24rem;
 
-  view {
-    color: #000;
-  }
+}
+.Midde view {
+  color: #000;
+}
 
-  .MiddeBack {
-    width: 0.6rem;
-    height: 0.24rem;
-    font-size: 0.12rem;
-    padding: 0;
-    border: 1px solid #9e9e9e;
-  }
+.Midde .MiddeBack {
+  width: 0.6rem;
+  height: 0.24rem;
+  font-size: 0.12rem;
+  padding: 0;
+  border: 1px solid #9e9e9e;
 }
 
 .yinyong {
   font-size: 0.12rem;
 
-  img {
-    width: 0.12rem;
-    height: 0.1rem;
-    vertical-align: top;
-    margin-right: 0.03rem;
-  }
+}
+.yinyong img {
+  width: 0.12rem;
+  height: 0.1rem;
+  vertical-align: top;
+  margin-right: 0.03rem;
 }
 
 .el-dialog__wrapper {
@@ -1494,10 +1468,12 @@
 }
 
 ::v-deep .el-tabs__item {
-  width: 1rem;
+  width: 1.4rem;
   font-size: 0.14rem;
   line-height: 0.4rem;
   height: 0.4rem;
+  padding: 0 20px !important;
+  text-align: center;
 }
 
 ::v-deep .el-tabs__header {
@@ -1505,12 +1481,8 @@
 }
 
 ::v-deep .el-tabs__active-bar {
-  /* 璁剧疆婊氬姩鏉″搴� */
-  width: 1rem !important;
   height: 0.03rem !important;
   background-color: #597aa5;
-  transform: translateX(-20px);
-  /* margin-top: .09rem; */
 }
 
 ::v-deep .el-tabs__active-bar {

--
Gitblit v1.9.1