From 571e12ca122d12f20689e3040a0f368ef1ae8850 Mon Sep 17 00:00:00 2001
From: YM <479443481@qq.com>
Date: 星期五, 26 七月 2024 11:16:08 +0800
Subject: [PATCH] 1

---
 src/pages/academicGenres/chart.vue |  179 +++++++++++++++++++++++++++++++++++++++++------------------
 1 files changed, 124 insertions(+), 55 deletions(-)

diff --git a/src/pages/academicGenres/chart.vue b/src/pages/academicGenres/chart.vue
index 4e8faa4..3cc5b8c 100644
--- a/src/pages/academicGenres/chart.vue
+++ b/src/pages/academicGenres/chart.vue
@@ -3,7 +3,7 @@
     style="width: 100%; height: 100%; display: flex; flex-direction: column"
   >
     <!-- 椤堕儴瀵艰埅 -->
-    <headNav :idIndex="3 + ''" text="鍘嗕唬瀛︽湳娴佹淳" />
+    <headNav :idIndex="3 + ''" text="瀛︽湳娴佹淳" />
     <view class="Midde flex">
       <!-- <view class="MiddeBack">杩斿洖</view> -->
       <el-button class="MiddeBack flex flex-center" @click="goBack"
@@ -11,7 +11,6 @@
       >
       <view class="flex flex-center flex-column">
         <view
-          class=""
           style="
             font-weight: 900;
             margin-bottom: 0.2rem;
@@ -51,7 +50,6 @@
             "
           >
             <view
-              class=""
               :style="{ background: item.color }"
               style="
                 margin-right: 0.07rem;
@@ -60,21 +58,39 @@
                 border-radius: 50%;
               "
             ></view>
-            <view class="" style="color: #2c2c2c; font-size: 0.12rem">{{
+            <view style="color: #2c2c2c; font-size: 0.12rem">{{
               item.name
             }}</view>
           </view>
         </li>
       </ul>
     </view>
-    <view class="contentBox">
-      <view id="main" style="width: 100%; height: 100%"></view>
+    <view class="contentBox" style="position: relative">
+      <div
+        v-if="nodeData.length == 0"
+        style="
+          color: #666;
+          text-align: center;
+          font-size: 16px;
+          position: absolute;
+          top: 1rem;
+          left: 0;
+          right: 0;
+        "
+      >
+        鏆傛棤鏁版嵁
+      </div>
+      <view id="main" style="width: 100%; height: 100%"> </view>
     </view>
   </view>
 </template>
 
 <script>
-import { getIntroduction, searchSchoolPerson } from "@/api/index.js";
+import {
+  getIntroduction,
+  searchSchoolPerson,
+  schoolAtlas
+} from "@/api/index.js";
 import * as echarts from "echarts";
 export default {
   data() {
@@ -136,11 +152,15 @@
                 return {
                   content: item.content,
                   source:
-                    "鍑哄锛氥��" +
+                    res.object.bookList &&
                     res.object.bookList.find((citem) => citem.id == item.bookId)
-                      .name +
-                    "銆� P" +
-                    item.pageNo
+                      ? "鍑哄锛氥��" +
+                        res.object.bookList.find(
+                          (citem) => citem.id == item.bookId
+                        ).name +
+                        "銆� " +
+                        (item.pageNo ? "P " + item.pageNo : "")
+                      : ""
                 };
               })
             : [],
@@ -149,11 +169,15 @@
                 return {
                   content: item.content,
                   source:
-                    "鍑哄锛氥��" +
+                    res.object.bookList &&
                     res.object.bookList.find((citem) => citem.id == item.bookId)
-                      .name +
-                    "銆� P" +
-                    item.pageNo
+                      ? "鍑哄锛氥��" +
+                        res.object.bookList.find(
+                          (citem) => citem.id == item.bookId
+                        ).name +
+                        "銆� " +
+                        (item.pageNo ? "P " + item.pageNo : "")
+                      : ""
                 };
               })
             : [],
@@ -162,11 +186,15 @@
                 return {
                   content: item.content,
                   source:
-                    "鍑哄锛氥��" +
+                    res.object.bookList &&
                     res.object.bookList.find((citem) => citem.id == item.bookId)
-                      .name +
-                    "銆� P" +
-                    item.pageNo
+                      ? "鍑哄锛氥��" +
+                        res.object.bookList.find(
+                          (citem) => citem.id == item.bookId
+                        ).name +
+                        "銆� " +
+                        (item.pageNo ? "P " + item.pageNo : "")
+                      : ""
                 };
               })
             : [],
@@ -175,11 +203,15 @@
                 return {
                   content: item.content,
                   source:
-                    "鍑哄锛氥��" +
+                    res.object.bookList &&
                     res.object.bookList.find((citem) => citem.id == item.bookId)
-                      .name +
-                    "銆� P" +
-                    item.pageNo
+                      ? "鍑哄锛氥��" +
+                        res.object.bookList.find(
+                          (citem) => citem.id == item.bookId
+                        ).name +
+                        "銆� " +
+                        (item.pageNo ? "P " + item.pageNo : "")
+                      : ""
                 };
               })
             : []
@@ -206,34 +238,58 @@
           },
           symbolSize: 100
         });
-        searchSchoolPerson({
-          keyword: item
-        }).then((res) => {
-          console.log(res.list, i);
-          for (let i = 0; i < res.list.length; i++) {
-            const citem = res.list[i];
-            // 鑺傜偣
-            this.nodeData.push({
-              name: citem.name2,
-              x: Math.random() * 1000,
-              y: Math.random() * 600,
-              itemStyle: {
-                color: citem.relationType == "浜虹墿钁椾綔" ? "#eee" : "#FDEFE4",
-                borderWidth: 4,
-                borderColor:
-                  citem.relationType == "浜虹墿钁椾綔" ? "#9e9e9e" : "#DA7A2B",
-                borderRadius: 30
-              },
-              symbolSize: 100
-            });
-            // 鍏崇郴
-            this.links.push({
-              source: item,
-              target: citem.name2,
-              label: {
-                show: false
+        schoolAtlas(Number(this.idIndex)).then((res) => {
+          if (res.list) {
+            for (let i = 0; i < res.list.length; i++) {
+              const citem = res.list[i];
+              if (
+                citem.relationType != "浠h〃浜虹墿" &&
+                citem.relationType != "浜虹墿鍏崇郴"
+              ) {
+                // 鑺傜偣
+                if (citem.name1) {
+                  this.nodeData.push({
+                    name: citem.name1,
+                    x: Math.random() * 1000,
+                    y: Math.random() * 600,
+                    itemStyle: {
+                      color:
+                        citem.relationType == "鍏崇郴鏂囩尞" ? "#eee" : "#FDEFE4",
+                      borderWidth: 4,
+                      borderColor:
+                        citem.relationType == "鍏崇郴鏂囩尞"
+                          ? "#9e9e9e"
+                          : "#DA7A2B",
+                      borderRadius: 30
+                    },
+                    symbolSize: 100
+                  });
+                  // 鍏崇郴
+                  this.links.push({
+                    source: item,
+                    target: citem.name1,
+                    label: {
+                      show: true,
+                      formatter: function (params) {
+                        // 浣跨敤鍑芥暟鍔ㄦ�佺敓鎴愭爣绛惧唴瀹�
+                        // return relationships.find(rel => rel.source === nodes[params.data
+                        // 		.source] && rel.target === nodes[params.data.target])
+                        // 	.relation;
+                        return citem.name2;
+                      }, // 璁剧疆鍏崇郴鏍囩鍐呭涓�"Child-Parent"
+                      color: "#2C2C2C",
+                      fontSize: 14,
+                      backgroundColor: "rgba(255, 255, 255, 1)",
+                      padding: [3, 8],
+                      borderRadius: 30,
+                      position: "middle", // 璁剧疆鏍囩鏂囨湰鍦ㄧ嚎鐨勪腑闂翠綅缃笂灞呬腑鏄剧ず
+                      // z: -1, // 璁剧疆鏍囩鐨剒杞撮珮搴︼紝浣垮叾姣旇繛鎺ョ嚎鏇撮珮
+                      distance: -10 // 灏嗘爣绛炬斁缃湪杩炴帴绾夸笂
+                    }
+                  });
+                }
               }
-            });
+            }
           }
           this.init();
         });
@@ -271,7 +327,8 @@
         series: [
           {
             type: "graph",
-            layout: "none",
+            layout: "force",
+            roam: true,
             symbolSize: SymbolSize + 20,
             //鏄惁鍏佽鐢ㄦ埛鎷栧姩鍥剧墖
             roam: true,
@@ -282,7 +339,12 @@
             },
             edgeSymbol: ["circle", "arrow"],
             edgeSymbolSize: [4, 10],
-
+            emphasis: {
+              focus: "adjacency",
+              lineStyle: {
+                width: 10
+              }
+            },
             edgeLabel: {
               show: true,
               fontSize: FontSize, //鏇存敼涓よ�呭叧绯荤殑瀛椾綋
@@ -300,10 +362,14 @@
             data: this.nodeData, //鍏崇郴杩炴帴
             links: this.links,
             lineStyle: {
-              color: "#000000",
               opacity: 0.9,
-              width: 2,
-              curveness: 0
+              width: 2
+            },
+            force: {
+              // layoutAnimation: false,
+              // friction: 1,
+              repulsion: 800,
+              edgeLength: 400
             }
           }
         ]
@@ -355,6 +421,9 @@
     height: 0.24rem;
     font-size: 0.12rem;
     padding: 0;
+    border-radius: 0;
+    border: 1px solid #9e9e9e;
+    color: #000;
   }
 
   .Lists {

--
Gitblit v1.9.1