From 1b27559a90417a6f608be0c61e88a6f9e3ea1b40 Mon Sep 17 00:00:00 2001
From: QYF-GitLab1 <1940665526@qq.com>
Date: 星期五, 26 七月 2024 11:53:31 +0800
Subject: [PATCH] Merge branch 'master' of http://182.92.203.7:2001/r/TCM_CharacterLibrary
---
src/pages/inherit/list.vue | 1267 ++++++++++++++++++++++++++++-----------------------------
1 files changed, 629 insertions(+), 638 deletions(-)
diff --git a/src/pages/inherit/list.vue b/src/pages/inherit/list.vue
index b91593e..9a9bf37 100644
--- a/src/pages/inherit/list.vue
+++ b/src/pages/inherit/list.vue
@@ -1,647 +1,638 @@
<template>
- <view class="">
- <headNav :idIndex="idIndex" :searchBg="false" text="涓尰涓栧尰浼犳壙鏁版嵁搴�" bg="/static/image/topBg1.png"
- bg1="/static/image/line1.png" />
+ <view>
+ <headNav
+ idIndex="2"
+ :searchBg="false"
+ text="瀹跺浼犳壙"
+ bg="/static/image/topBg1.png"
+ bg1="/static/image/line1.png"
+ />
- <view class="flex" style="padding: .24rem 1.21rem ;background-color: #f0f0f0;">
- <view class="flex">
- <el-button class="MiddeBack flex flex-center" @click="goBack">杩斿洖</el-button>
- <h3 style="margin-left: .22rem;font-size: .28erm;font-weight: 500;">閭电櫥鐎�</h3>
- </view>
- <ul class="flex Lists">
- <li style="background-color: #DA7A2B;color: #fff;">涓栧尰浼犳壙</li>
- <!-- /pages/AcademicHistory/AcademicHistory -->
- <li @click="ListClick" style="background-color: #fff;color: #DA7A2B;" >涓栧尰鏂囧寲</li>
- </ul>
- <view class="" style="width: 1rem;"></view>
- </view>
- <!-- echarts鍥� -->
- <div class="barChart" ref="barChart"></div>
- </view>
+ <view
+ class="flex"
+ style="padding: 0.24rem 1.21rem; background-color: #f0f0f0"
+ >
+ <view class="flex">
+ <el-button class="MiddeBack flex flex-center" @click="goBack"
+ >杩斿洖</el-button
+ >
+ <h3 style="margin-left: 0.22rem; font-size: 0.28erm; font-weight: 500">
+ {{ mainName }}
+ </h3>
+ </view>
+ <ul class="flex tabBox">
+ <li
+ :class="['tabItem', showType == 1 ? 'active' : ''].join(' ')"
+ @click="changeType(1)"
+ >
+ 涓栧尰浼犳壙
+ </li>
+ <li
+ :class="['tabItem', showType == 2 ? 'active' : ''].join(' ')"
+ @click="changeType(2)"
+ >
+ 涓栧尰鏂囧寲
+ </li>
+ </ul>
+ <view style="width: 1rem"></view>
+ </view>
+ <view v-if="showType == 1" class="legendBox">
+ <view class="socialMappingBox" @click="showSocialMapping">
+ <view
+ class="icon"
+ :style="{ background: socialMapping ? '#244a7b' : '#9e9e9e' }"
+ ></view>
+ <view>绀句細鍏崇郴锛歿{ socialMapping ? "寮�" : "鍏�" }}</view>
+ </view>
+ <view class="legend">
+ <view class="icon" style="background: #da7a2b"></view>
+ <view>涓栧尰浼犳壙</view>
+ </view>
+ <view class="legend">
+ <view class="icon" style="background: #244a7b"></view>
+ <view>绀句細鍏崇郴</view>
+ </view>
+ <view class="viewChangeBtn">
+ <p>{{ viewType == 1 ? "妯増瑙嗗浘" : "绔栫増瑙嗗浘" }}</p>
+ <view class="imgBox">
+ <img
+ v-if="viewType == 1"
+ src="@/static/image/inherit/1-a.png"
+ alt=""
+ />
+ <img
+ v-else
+ src="@/static/image/inherit/1.png"
+ @click="viewChange(1)"
+ />
+ </view>
+ <view class="imgBox">
+ <img
+ v-if="viewType == 2"
+ src="@/static/image/inherit/2-a.png"
+ alt=""
+ />
+ <img
+ v-else
+ src="@/static/image/inherit/2.png"
+ @click="viewChange(2)"
+ />
+ </view>
+ </view>
+ </view>
+ <!-- echarts鍥� -->
+ <div v-if="showType == 1" class="barChart" id="barChart"></div>
+ <view v-if="showType == 2" class="cultureBox">
+ <view class="cultureItem" v-if="culture1">
+ <view class="imgBox">
+ <img src="@/static/image/inherit/icon1.svg" alt="" />
+ </view>
+ <p>{{ culture1.content }}</p>
+ <h4 v-if="culture1.source">
+ 鈥斺�斻�妠{ culture1.source }}銆婸 {{ culture1.pageNo }}
+ </h4>
+ </view>
+ <view class="cultureItem" v-if="culture2">
+ <view class="imgBox">
+ <img src="@/static/image/inherit/icon2.svg" alt="" />
+ </view>
+ <p>{{ culture2.content }}</p>
+ <h4 v-if="culture2.source">
+ 鈥斺�斻�妠{ culture2.source }}銆婸 {{ culture2.pageNo }}
+ </h4>
+ </view>
+ <view class="cultureItem" v-if="culture3">
+ <view class="imgBox">
+ <img src="@/static/image/inherit/icon3.svg" alt="" />
+ </view>
+ <p>{{ culture3.content }}</p>
+ <h4 v-if="culture3.source">
+ 鈥斺�斻�妠{ culture3.source }}銆婸 {{ culture3.pageNo }}
+ </h4>
+ </view>
+ <div
+ v-if="!culture1 && !culture2 && !culture3"
+ style="color: #666; text-align: center; font-size: 16px"
+ >
+ 涓栧尰鏂囧寲鏃犳暟鎹�
+ </div>
+ </view>
+ </view>
</template>
<script>
- import * as echarts from "echarts";
- export default {
- data() {
- return {
- // 鏍囬椤堕儴鏍忛渶瑕佺殑涓滆タ
- idIndex: 0,
- activeIndex: 1
- }
- },
- onLoad(options) {
- this.idIndex = options.id
- console.log('optionsoptionsoptions', options.id);
- },
- mounted() {
- // 鍒濆鍖� echarts
- this.initBarChart();
- },
- methods: {
- initBarChart() {
- // WMBg
- //閫氳繃 $ref 杩涜鎸傝浇
- let myChart = echarts.init(this.$refs.barChart);
+import * as echarts from "echarts";
+import G6 from "@antv/g6";
- let FontSize = 12; // 瀛椾綋澶у皬
- let BorderWidth = 2; // 杈规澶у皬
- let SymbolSize = 80; // 灏哄璺濈
- 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
- }
+import {
+ inheritMedicalCultureList,
+ inheritMedicalRelationList,
+} from "@/api/index.js";
- let option = {
- title: {
- text: [""],
- },
- backgroundColor: {
- type: 'image',
- image: '/static/image/WMBg.png',
- repeat: 'repeat-x', // 鏄惁骞抽摵锛屽彲浠ユ槸 'repeat-x', 'repeat-y', 'no-repeat'
- size: '100% 100%', // 鑳屾櫙鍥剧墖鐨勫昂瀵革紝鍙互鏄櫨鍒嗘瘮鎴栬�呭儚绱�
- position: 'center center' // 鑳屾櫙鍥剧墖鐨勪綅缃紝鍙互鏄� top, bottom, middle 鎴栬�呯櫨鍒嗘瘮
- },
- tooltip: {},
- animationDurationUpdate: 1500,
- animationEasingUpdate: "quinticInOut",
- series: [{
- type: "graph",
- layout: "none",
- symbolSize: SymbolSize + 20,
- //鏄惁鍏佽鐢ㄦ埛鎷栧姩鍥剧墖
- roam: false,
- label: {
- show: true,
- color: 'black', // 璁剧疆鑺傜偣鏂囧瓧棰滆壊涓洪粦鑹�
- fontSize: FontSize, // 璁剧疆鏂囧瓧澶у皬
- },
- edgeSymbol: ["circle", "arrow"],
- edgeSymbolSize: [4, 10],
+export default {
+ data() {
+ return {
+ // 鏍囬椤堕儴鏍忛渶瑕佺殑涓滆タ
+ idIndex: 0,
+ mainName: "",
+ activeIndex: 1,
+ dataList: [],
+ links: [],
+ socialMapping: true,
+ showType: "1",
+ culture1: null,
+ culture2: null,
+ culture3: null,
+ viewType: 1,
+ };
+ },
+ onLoad(options) {
+ this.idIndex = options.id;
+ this.mainName = decodeURIComponent(options.name);
+ this.type = options.type;
+ },
+ mounted() {
+ if (this.type) {
+ this.changeType(this.type);
+ }
+ this.getData(this.socialMapping);
+ },
+ methods: {
+ getData(socialFlag) {
+ inheritMedicalRelationList({
+ identifier: this.idIndex,
+ socialFlag: socialFlag,
+ }).then((res) => {
+ this.dataList = res.object;
+ // 澶勭悊鑺傜偣棰滆壊
+ // this.links = [];
+ // for (let i = 0; i < data.edgeList.length; i++) {
+ // const linkItem = data.edgeList[i];
+ // const index = data.nodeList.findIndex(
+ // (item) =>
+ // item.identifier ==
+ // (linkItem.endId == this.idIndex
+ // ? linkItem.startId
+ // : linkItem.endId)
+ // );
+ // if (linkItem.relationType == "浜插睘鍏崇郴") {
+ // data.nodeList[index].linkType = 1;
+ // data.nodeList[index].color = "#F8E2D7";
+ // data.nodeList[index].borderColor = "#F3AA78";
+ // }
+ // if (linkItem.relationType == "绀句細鍏崇郴") {
+ // data.nodeList[index].linkType = 2;
+ // data.nodeList[index].color = "#ecf4fe";
+ // data.nodeList[index].borderColor = "#597aa5";
+ // }
+ // this.links.push({
+ // source: data.nodeList.find(
+ // (item) => item.identifier == linkItem.startId
+ // ).name,
+ // target: data.nodeList.find(
+ // (item) => item.identifier == linkItem.endId
+ // ).name,
+ // relationType: linkItem.relationType,
+ // label: {
+ // show: true,
+ // formatter: function (params) {
+ // // 浣跨敤鍑芥暟鍔ㄦ�佺敓鎴愭爣绛惧唴瀹�
+ // // return relationships.find(rel => rel.source === nodes[params.data
+ // // .source] && rel.target === nodes[params.data.target])
+ // // .relation;
+ // return linkItem.relation;
+ // }, // 璁剧疆鍏崇郴鏍囩鍐呭涓�"Child-Parent"
+ // color: "#2C2C2C",
+ // fontSize: 16,
+ // backgroundColor: "rgba(255, 255, 255, 1)",
+ // padding: [3, 8],
+ // borderRadius: 30,
+ // position: "middle", // 璁剧疆鏍囩鏂囨湰鍦ㄧ嚎鐨勪腑闂翠綅缃笂灞呬腑鏄剧ず
+ // // z: -1, // 璁剧疆鏍囩鐨剒杞撮珮搴︼紝浣垮叾姣旇繛鎺ョ嚎鏇撮珮
+ // distance: -10 // 灏嗘爣绛炬斁缃湪杩炴帴绾夸笂
+ // }
+ // });
+ // }
+ // this.dataList = data.nodeList.map((item) => {
+ // return {
+ // ...item,
+ // itemStyle: {
+ // color: item.identifier == this.idIndex ? "#F8E2D7" : item.color,
+ // borderColor:
+ // item.identifier == this.idIndex ? "#F3AA78" : item.borderColor,
+ // borderWidth: "3"
+ // }
+ // };
+ // });
+ setTimeout(() => {
+ // this.initBarChart();
+ document.getElementById("barChart").innerHTML = "";
+ this.initG6Chart();
+ }, 150);
+ });
- edgeLabel: {
- show: true,
- fontSize: FontSize, //鏇存敼涓よ�呭叧绯荤殑瀛椾綋
- position: "middle",
- //杩欓噷璁剧疆鍏崇郴鏂囧瓧鏄惁鍜岀嚎娈甸噸鍙�
- // padding: [0, 0], // 璋冩暣鍐呰竟璺濅互纭繚鏍囩涓庣嚎娈电揣瀵嗚创鍚�
- // verticalAlign: 'middle', // 璁剧疆鏂囨湰鐨勫瀭鐩村榻愭柟寮忎负灞呬腑
- formatter: function(params) {
- // params.data 鏄竟鐨勬暟鎹璞★紝浣犲彲浠ュ湪杩欓噷瀹氫箟鍏崇郴鍚�
- // 渚嬪锛屼綘鍙互鏍规嵁 source 鍜� target 鐨勫悕绉版潵瀹氫箟鍏崇郴鍚�
- return params.data.relationName ||
- "鐖跺瓙"; // 濡傛灉瀹氫箟浜� relationName 鍒欐樉绀哄畠锛屽惁鍒欐樉绀衡�滅埗瀛愨��
- },
- },
- //鍚勪釜鑺傜偣
- data: [{
- name: "钖涢洩",
- x: 300,
- y: 300,
- itemStyle: {
- color: "#F8E2D7",
- borderColor: "#F3AA78",
- borderWidth: "3",
- },
- },
- {
- name: "閭电櫥鐎�",
- x: 400,
- y: 300,
- itemStyle: {
- color: "#F8E2D7",
- borderColor: "#F3AA78",
- borderWidth: "3",
- },
- },
- {
- name: "閭甸瞾鐬�",
- x: 500,
- y: 300,
- itemStyle: {
- color: "#F8E2D7",
- borderColor: "#F3AA78",
- borderWidth: "3",
- },
- },
- {
- name: "閭垫槬娉�",
- x: 600,
- y: 300,
- itemStyle: {
- color: "#F8E2D7",
- borderColor: "#F3AA78",
- borderWidth: "3",
- },
- },
- {
- name: "寰愰敠",
- x: 650,
- y: 400,
- itemStyle: {
- color: "#DCE7EB",
- borderColor: "#5F81A4",
- borderWidth: "3",
- },
- },
- {
- name: "閭典笝鎵�",
- x: 700,
- y: 300,
- itemStyle: {
- color: "#F8E2D7",
- borderColor: "#F3AA78",
- borderWidth: "3",
- },
- },
- {
- name: "鍐鑺�",
- x: 720,
- y: 400,
- itemStyle: {
- color: "#DCE7EB",
- borderColor: "#5F81A4",
- borderWidth: "3",
- },
- },
- {
- name: "鏉庨缚绔�",
- x: 740,
- y: 500,
- itemStyle: {
- color: "#E1E1E1",
- borderColor: "#888888",
- borderWidth: "3",
- },
- },
- {
- name: "閭垫櫙灏�",
- x: 800,
- y: 200,
- itemStyle: {
- color: "#F8E2D7",
- borderColor: "#F3AA78",
- borderWidth: "3",
- },
- },
- {
- name: "閭垫櫙搴�",
- x: 800,
- y: 400,
- itemStyle: {
- color: "#F8E2D7",
- borderColor: "#F3AA78",
- borderWidth: "3",
- },
- },
- {
- name: "椴嶆槆",
- x: 750,
- y: 100,
- itemStyle: {
- color: "#DCE7EB",
- borderColor: "#5F81A4",
- borderWidth: "3",
- },
- },
- {
- name: "鏂囬緳",
- x: 850,
- y: 100,
- itemStyle: {
- color: "#DCE7EB",
- borderColor: "#5F81A4",
- borderWidth: "3",
- },
- },
- {
- name: "鍌呭簡璐�",
- x: 950,
- y: 50,
- itemStyle: {
- color: "#DCE7EB",
- borderColor: "#5F81A4",
- borderWidth: "3",
- },
- },
- {
- name: "鎴愬厑",
- x: 950,
- y: 100,
- itemStyle: {
- color: "#DCE7EB",
- borderColor: "#5F81A4",
- borderWidth: "3",
- },
- },
- {
- name: "鑳＄帀鍧�",
- x: 950,
- y: 150,
- itemStyle: {
- color: "#DCE7EB",
- borderColor: "#5F81A4",
- borderWidth: "3",
- },
- },
- {
- name: "瑁曠",
- x: 950,
- y: 200,
- itemStyle: {
- color: "#DCE7EB",
- borderColor: "#5F81A4",
- borderWidth: "3",
- },
- },
- {
- name: "闄嗕箖鏄�",
- x: 950,
- y: 250,
- itemStyle: {
- color: "#DCE7EB",
- borderColor: "#5F81A4",
- borderWidth: "3",
- },
- },
- {
- name: "鍒樹紶绁�",
- x: 950,
- y: 300,
- itemStyle: {
- color: "#DCE7EB",
- borderColor: "#5F81A4",
- borderWidth: "3",
- },
- },
- {
- name: "閭佃瘹",
- x: 950,
- y: 350,
- itemStyle: {
- color: "#DCE7EB",
- borderColor: "#5F81A4",
- borderWidth: "3",
- },
- },
- {
- name: "鏇惧浗钘�",
- x: 1050,
- y: 200,
- itemStyle: {
- color: "#E1E1E1",
- borderColor: "#888888",
- borderWidth: "3",
- },
- },
- {
- name: "鏇惧浗钘�01",
- x: 1050,
- y: 50,
- itemStyle: {
- color: "#E1E1E1",
- borderColor: "#888888",
- borderWidth: "3",
- },
- },
- {
- name: "鏇惧浗钘�02",
- x: 1050,
- y: 350,
- itemStyle: {
- color: "#E1E1E1",
- borderColor: "#888888",
- borderWidth: "3",
- },
- },
- ],
- //鍏崇郴杩炴帴
- links: [{
- source: "钖涢洩",
- target: "閭电櫥鐎�",
- relationName: "甯堝緬",
- hasArrow: "true",
- },
- {
- source: "閭电櫥鐎�",
- target: "閭甸瞾鐬�",
- relationName: "鐖跺瓙",
- },
- {
- source: "閭甸瞾鐬�",
- target: "閭垫槬娉�",
- relationName: "鐖跺瓙",
- },
- {
- source: "閭垫槬娉�",
- target: "閭典笝鎵�",
- relationName: "鍙斾緞",
- },
- //鏇茬嚎
- {
- source: "閭垫槬娉�",
- target: "寰愰敠",
- relationName: "鏈嬪弸",
- //杩欓噷璁剧疆涓轰笉甯︾澶�
- symbol: ["none", "none"],
- lineStyle: {
- color: "#6584B1",
- curveness: -0.2,
- },
- },
- {
- source: "閭典笝鎵�",
- target: "閭垫櫙灏�",
- relationName: "鐖跺瓙",
- },
- {
- source: "閭典笝鎵�",
- target: "閭垫櫙搴�",
- relationName: "鐖跺瓙",
- },
- //鏇茬嚎
- {
- source: "閭典笝鎵�",
- target: "鍐鑺�",
- relationName: "鏈嬪弸",
- symbol: ["none", "none"],
- lineStyle: {
- color: "#6584B1",
- curveness: -0.2,
- },
- },
- //鏇茬嚎
- {
- source: "閭典笝鎵�",
- target: "椴嶆槆",
- relationName: "甯堝緬",
- symbol: ["none", "none"],
- lineStyle: {
- color: "#6584B1",
- curveness: 0.2,
- },
- },
- //鏇茬嚎
- {
- source: "鍐鑺�",
- target: "鏉庨缚绔�",
- relationName: "鍚屽儦",
- symbol: ["none", "none"],
- lineStyle: {
- color: "#6584B1",
- curveness: -0.2,
- },
- },
- {
- source: "閭垫櫙灏�",
- target: "閭垫櫙搴�",
- relationName: "鍏勫紵",
- },
- {
- source: "閭垫櫙搴�",
- target: "閭垫櫙灏�",
- relationName: "鍏勫紵",
- },
- {
- source: "閭垫櫙灏�",
- target: "椴嶆槆",
- relationName: "濮讳翰",
- symbol: ["none", "none"],
- lineStyle: {
- color: "#6584B1",
- curveness: -0.2,
- },
- },
- {
- source: "閭垫櫙灏�",
- target: "鏂囬緳",
- relationName: "鏈嬪弸",
- symbol: ["none", "none"],
- lineStyle: {
- color: "#6584B1",
- curveness: 0.2,
- },
- },
- {
- source: "閭垫櫙灏�",
- target: "鍌呭簡璐�",
- relationName: "鍚屽儦",
- symbol: ["none", "none"],
- lineStyle: {
- color: "#6584B1",
- curveness: -0.1,
- },
- },
- {
- source: "閭垫櫙灏�",
- target: "鎴愬厑",
- relationName: "鍚屽儦",
- symbol: ["none", "none"],
- lineStyle: {
- color: "#6584B1",
- curveness: -0.2,
- },
- },
- {
- source: "閭垫櫙灏�",
- target: "鑳＄帀鍧�",
- relationName: "鍚屽儦",
- symbol: ["none", "none"],
- lineStyle: {
- color: "#6584B1",
- curveness: -0.2,
- },
- },
- {
- source: "閭垫櫙灏�",
- target: "瑁曠",
- relationName: "鍚屽儦",
- symbol: ["none", "none"],
- lineStyle: {
- color: "#6584B1",
- curveness: -0.2,
- },
- },
- {
- source: "閭垫櫙灏�",
- target: "闄嗕箖鏄�",
- relationName: "鍚屽儦",
- symbol: ["none", "none"],
- lineStyle: {
- color: "#6584B1",
- curveness: -0.2,
- },
- },
- {
- source: "閭垫櫙灏�",
- target: "鍒樹紶绁�",
- relationName: "鍚屽儦",
- symbol: ["none", "none"],
- lineStyle: {
- color: "#6584B1",
- curveness: -0.2,
- },
- },
- {
- source: "閭垫櫙灏�",
- target: "閭佃瘹",
- relationName: "鍚屽儦",
- symbol: ["none", "none"],
- lineStyle: {
- color: "#6584B1",
- curveness: -0.2,
- },
- },
- {
- source: "鎴愬厑",
- target: "鏇惧浗钘�",
- relationName: "鍚屽儦",
- symbol: ["none", "none"],
- lineStyle: {
- color: "#6584B1",
- },
- },
- {
- source: "鑳＄帀鍧�",
- target: "鏇惧浗钘�",
- relationName: "鍚屽儦",
- symbol: ["none", "none"],
- lineStyle: {
- color: "#6584B1",
- },
- },
- {
- source: "瑁曠",
- target: "鏇惧浗钘�",
- relationName: "鍚屽儦",
- symbol: ["none", "none"],
- lineStyle: {
- color: "#6584B1",
- },
- },
- {
- source: "闄嗕箖鏄�",
- target: "鏇惧浗钘�",
- relationName: "鍚屽儦",
- symbol: ["none", "none"],
- lineStyle: {
- color: "#6584B1",
- },
- },
- {
- source: "鍒樹紶绁�",
- target: "鏇惧浗钘�",
- relationName: "鍚屽儦",
- symbol: ["none", "none"],
- lineStyle: {
- color: "#6584B1",
- },
- },
- {
- source: "鎴愬厑",
- target: "鏇惧浗钘�",
- relationName: "鍚屽儦",
- symbol: ["none", "none"],
- lineStyle: {
- color: "#6584B1",
- },
- },
- {
- source: "鎴愬厑",
- target: "鏇惧浗钘�",
- relationName: "鍚屽儦",
- symbol: ["none", "none"],
- lineStyle: {
- color: "#6584B1",
- },
- },
- {
- source: "鎴愬厑",
- target: "鏇惧浗钘�",
- relationName: "鍚屽儦",
- symbol: ["none", "none"],
- lineStyle: {
- color: "#6584B1",
- },
- },
- {
- source: "鍌呭簡璐�",
- target: "鏇惧浗钘�01",
- relationName: "鍚屽儦",
- symbol: ["none", "none"],
- lineStyle: {
- color: "#6584B1",
- },
- },
- {
- source: "閭佃瘹",
- target: "鏇惧浗钘�02",
- relationName: "鍚屽儦",
- symbol: ["none", "none"],
- lineStyle: {
- color: "#6584B1",
- },
- },
- ],
- lineStyle: {
- color: "#000000",
- opacity: 0.9,
- width: 2,
- curveness: 0,
- },
- }, ],
- };
- //杩涜娓叉煋
- myChart.setOption(option);
- },
- // 杩斿洖鎸夐挳
- goBack() {
- // uuni.redirectTo();
- uni.redirectTo({
- url: '/pages/index/index'
- })
- },
- }
- }
+ // 涓栧尰鏂囧寲
+ inheritMedicalCultureList({
+ identifier: this.idIndex,
+ }).then((res) => {
+ this.culture1 = res.list.find((item) => item.typeName == "瀹堕");
+ this.culture2 = res.list.find((item) => item.typeName == "鍖诲痉");
+ this.culture3 = res.list.find((item) => item.typeName == "瀹惰");
+ });
+ },
+ viewChange(data) {
+ this.viewType = data;
+ document.getElementById("barChart").innerHTML = "";
+ this.initG6Chart();
+ },
+ showSocialMapping() {
+ this.socialMapping = !this.socialMapping;
+ if (!this.socialMapping) {
+ this.socialRelationsData(this.dataList.children);
+ console.log(this.dataList, "dataList");
+ document.getElementById("barChart").innerHTML = "";
+ // this.initG6Chart();
+ this.getData(this.socialMapping);
+ } else {
+ this.getData(this.socialMapping);
+ }
+ // this.initBarChart(newDataList, newLinks);
+ },
+ socialRelationsData(data) {
+ if (data && data.length) {
+ for (let i = 0; i < data.length; i++) {
+ const item = data[i];
+ if (item?.relationInfo?.relationType == "绀句細鍏崇郴") {
+ data.splice(i, 1);
+ }
+ if (item.children.length > 0) {
+ this.socialRelationsData(item.children);
+ }
+ }
+ }
+ },
+ changeType(type) {
+ this.showType = type;
+ if (type == 1) {
+ setTimeout(() => {
+ this.socialMapping = true;
+ // this.initBarChart(this.dataList, this.links);
+ document.getElementById("barChart").innerHTML = "";
+ this.initG6Chart();
+ }, 50);
+ }
+ },
+
+ getChartData(dataList) {
+ if (dataList && dataList.length) {
+ const G6Data = dataList.map((f) => {
+ return {
+ id: f.value + "-" + f.name,
+ name: f.name,
+ personId: f.personId,
+ relationInfo: f?.relationInfo?.relation
+ ? f.relationInfo.relation
+ : "",
+ relationType:
+ f?.relationInfo?.relationType == "绀句細鍏崇郴" ? true : false,
+ children:
+ f.children.length > 0 ? this.getChartData(f.children) : [],
+ };
+ });
+ return G6Data;
+ }
+ },
+ initG6Chart() {
+ console.log(this.dataList, "dataList");
+ console.log(this.links, "links");
+ console.log(this.getChartData(this.dataList.children), "123123");
+ var barChart = document.getElementById("barChart");
+ const data = {
+ isRoot: true,
+ id: this.dataList.name,
+ name: this.dataList.name,
+ style: {
+ fill: "red",
+ },
+ children:
+ this.dataList?.children.length > 0
+ ? this.getChartData(this.dataList.children)
+ : [],
+ };
+ const width = barChart.scrollWidth;
+ const height = barChart.scrollHeight || 500;
+ this.graph = new G6.TreeGraph({
+ container: "barChart",
+ width,
+ height,
+ linkCenter: true,
+ modes: {
+ default: ["drag-canvas", "zoom-canvas"],
+ },
+ defaultNode: {
+ size: 30,
+ type: "tree-node",
+ },
+ defaultEdge: {
+ type: this.viewType == 1 ? "cubic-horizontal" : "cubic-vertical",
+ style: {
+ endArrow: {
+ path: G6.Arrow.vee(10, 10, 18), // 浣跨敤鍐呯疆绠ご璺緞鍑芥暟锛屽弬鏁颁负绠ご鐨� 瀹藉害銆侀暱搴︺�佸亸绉婚噺锛堥粯璁や负 0锛屼笌 d 瀵瑰簲锛�
+ d: 15,
+ },
+ },
+ },
+ layout: {
+ type: "compactBox",
+ direction: this.viewType == 1 ? "LR" : "TB",
+ getId: function getId(d) {
+ return d.id;
+ },
+ getHeight: function getHeight() {
+ return 16;
+ },
+ getWidth: function getWidth() {
+ return 16;
+ },
+ getVGap: () => {
+ console.log(this.viewType);
+ return this.viewType == 1 ? 20 : 110;
+ },
+ getHGap: () => {
+ return this.viewType == 1 ? 100 : 50;
+ },
+ },
+ });
+ this.graph.node(function (node) {
+ return {
+ size: 38,
+ anchorPoints: [
+ [0, 0.5],
+ [1, 0.5],
+ ],
+ style: {
+ fill: node.relationType ? "#EDF4FF" : "#FCEFE3",
+ stroke: node.relationType ? "#5E7AA7" : "#D3791E",
+ },
+ label: node.name,
+ labelCfg: {
+ position: "center",
+ offset: 5,
+ style: {
+ fill: "#000",
+ fontSize: 12,
+ },
+ },
+ };
+ });
+ let that = this;
+ const edgeType =
+ this.viewType == 1 ? "cubic-horizontal" : "cubic-vertical";
+ this.graph.edge(function (node) {
+ return {
+ type: edgeType,
+ color: "#A3B1BF",
+ label:
+ that.viewType == 1
+ ? node.target._cfg?.model.relationInfo
+ : that.textStyle(node.target._cfg?.model.relationInfo),
+ };
+ });
+ this.graph.on("node:click", (e) => {
+ const nodeItem = e.item._cfg.model; // 鑾峰彇琚偣鍑荤殑鑺傜偣鍏冪礌瀵硅薄
+ console.log("鍗曞嚮", nodeItem);
+ if (nodeItem?.personId) {
+ uni.navigateTo({
+ url: "/pages/character/detail?id=" + nodeItem?.personId,
+ });
+ } else {
+ uni.navigateTo({
+ url: "/pages/character/detail?id=" + this.idIndex,
+ });
+ }
+ });
+ this.graph.data(data);
+ this.graph.render();
+ this.graph.fitView();
+ },
+ initBarChart() {
+ // WMBg
+ //閫氳繃 $ref 杩涜鎸傝浇
+ var barChart = document.getElementById("barChart");
+ let myChart = echarts.init(barChart);
+
+ let FontSize = 12; // 瀛椾綋澶у皬
+ let BorderWidth = 2; // 杈规澶у皬
+ let SymbolSize = 80; // 灏哄璺濈
+ 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;
+ }
+
+ let option = {
+ backgroundColor: {
+ type: "image",
+ image: "./static/image/WMBg.png",
+ repeat: "repeat-x", // 鏄惁骞抽摵锛屽彲浠ユ槸 'repeat-x', 'repeat-y', 'no-repeat'
+ size: "100% 100%", // 鑳屾櫙鍥剧墖鐨勫昂瀵革紝鍙互鏄櫨鍒嗘瘮鎴栬�呭儚绱�
+ position: "center center", // 鑳屾櫙鍥剧墖鐨勪綅缃紝鍙互鏄� top, bottom, middle 鎴栬�呯櫨鍒嗘瘮
+ },
+ tooltip: {},
+ animationEasingUpdate: "quinticInOut",
+ series: [
+ {
+ type: "tree",
+ symbolSize: SymbolSize + 20,
+ //鏄惁鍏佽鐢ㄦ埛鎷栧姩鍥剧墖
+ roam: true,
+ label: {
+ show: true,
+ color: "black", // 璁剧疆鑺傜偣鏂囧瓧棰滆壊涓洪粦鑹�
+ fontSize: FontSize, // 璁剧疆鏂囧瓧澶у皬
+ },
+ edgeSymbol: ["circle", "arrow"],
+ edgeSymbolSize: [4, 10],
+ data: [this.dataList],
+ lineStyle: {
+ opacity: 0.9,
+ width: 2,
+ curveness: 0.3,
+ },
+ force: {
+ initLayout: null,
+ // gravity: 0
+ repulsion: 600,
+ edgeLength: 400,
+ },
+ expandAndCollapse: false,
+ },
+ ],
+ };
+ //杩涜娓叉煋
+ myChart.setOption(option);
+ },
+
+ textStyle(str) {
+ return str.replace(/(.{4})/g, "$1\n");
+ },
+
+ // 杩斿洖鎸夐挳
+ goBack() {
+ this.$router.go(-1);
+ },
+ },
+};
</script>
<style scoped>
- .Lists {
- li {
- /* background-color: #e4ebf3;
- border: 1rpx solid #5778a2;
- padding: 5rpx 10rpx;
- font-size: 18rpx; */
- width: 0.96rem;
- height: .3rem;
- border: 1px solid #DA7A2B;
- line-height: .3rem;
- text-align: center;
- font-size: .14rem;
- }
- }
- .MiddeBack {
- width: 0.6rem;
- height: 0.24rem;
- font-size: .12rem;
- padding: 0;
-
- }
- .barChart {
- width: 100vw;
- height: 80vh;
- }
-</style>
\ No newline at end of file
+.tabBox .tabItem {
+ width: 0.96rem;
+ height: 0.3rem;
+ border: 1px solid #da7a2b;
+ line-height: 0.3rem;
+ text-align: center;
+ font-size: 0.14rem;
+ background-color: #fff;
+ color: #da7a2b;
+ cursor: pointer;
+}
+
+.tabBox .tabItem.active {
+ background-color: #da7a2b;
+ color: #fff;
+}
+
+.MiddeBack {
+ width: 0.6rem;
+ height: 0.24rem;
+ font-size: 0.12rem;
+ padding: 0;
+ border: 1px solid #9e9e9e;
+ border-radius: 0;
+ color: #000;
+}
+.barChart {
+ width: 100vw;
+ height: 80vh;
+}
+
+/* 鍥句緥 */
+.legendBox {
+ width: 100%;
+ height: 0.6rem;
+ position: relative;
+ padding-top: 0.1rem;
+ display: flex;
+ justify-content: center;
+}
+.socialMappingBox {
+ position: absolute;
+ left: 1.2rem;
+ display: flex;
+ align-items: center;
+ padding: 0.06rem 0.2rem;
+ background: #fff;
+ box-shadow: 0 0 5px -2px rgba(0, 0, 0, 0.5);
+ border-radius: 90px;
+ cursor: pointer;
+}
+
+.socialMappingBox .icon {
+ width: 0.12rem;
+ height: 0.12rem;
+ border-radius: 50%;
+ margin-right: 0.06rem;
+}
+
+.viewChangeBtn {
+ position: absolute;
+ right: 1.2rem;
+ top: 0.17rem;
+ display: flex;
+}
+
+.viewChangeBtn p {
+ line-height: 0.36rem;
+ margin-right: 0.2rem;
+}
+
+.viewChangeBtn .imgBox {
+ width: 0.36rem;
+ height: 0.36rem;
+}
+
+.viewChangeBtn img {
+ width: 100%;
+ height: 100%;
+ cursor: pointer;
+}
+
+.legend {
+ display: flex;
+ align-items: center;
+ margin: 0 0.1rem;
+}
+
+.legend .icon {
+ width: 0.12rem;
+ height: 0.12rem;
+ border-radius: 50%;
+ margin-right: 0.06rem;
+}
+
+.cultureBox {
+ width: 100%;
+ height: 80vh;
+ background: url("@/static/image/WMBg.png");
+ background-size: 100% 100%;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+}
+
+.cultureItem {
+ width: 6.6rem;
+ margin-top: 0.4rem;
+ background: #fff;
+ border: 2px solid #d8d8d8;
+ display: flex;
+ position: relative;
+ padding: 0.16rem 0.16rem 0.4rem;
+}
+
+.cultureItem .imgBox {
+ width: 0.8rem;
+ margin-right: 0.4rem;
+}
+
+.cultureItem img {
+ width: 100%;
+ height: auto;
+}
+
+.cultureItem p {
+ flex: 1;
+ overflow: hidden;
+ line-height: 1.5;
+ font-size: 0.14rem;
+}
+
+.cultureItem h4 {
+ position: absolute;
+ bottom: 0.16rem;
+ right: 0.12rem;
+}
+</style>
--
Gitblit v1.9.1