From 7a7608d68227404c2cee81589a0f53bd0d9a4c78 Mon Sep 17 00:00:00 2001
From: YM <479443481@qq.com>
Date: 星期一, 20 五月 2024 18:43:04 +0800
Subject: [PATCH] 调整时空地图
---
src/pages/inherit/index.vue | 430 ++++++++++++++++++++++++++++++-----------------------
1 files changed, 242 insertions(+), 188 deletions(-)
diff --git a/src/pages/inherit/index.vue b/src/pages/inherit/index.vue
index 9dc0569..fcb2093 100644
--- a/src/pages/inherit/index.vue
+++ b/src/pages/inherit/index.vue
@@ -1,7 +1,7 @@
<template>
<view class="">
<headNav
- :idIndex="idIndex"
+ idIndex="2"
:searchBg="false"
text="涓尰涓栧尰浼犳壙鏁版嵁搴�"
bg="/static/image/topBg1.png"
@@ -10,16 +10,24 @@
<div class="filterBox font-family">
<div class="searchBox">
- <input type="text" placeholder="杈撳叆濮撳悕/鍒悕/鏈濅唬" />
- <button>鎼滅储</button>
+ <input type="text" v-model="keyword" placeholder="璇疯緭鍏ュ叧閿瓧" />
+ <button @click="search">鎼滅储</button>
</div>
<div class="dynasty">
<div style="font-weight: 700; line-height: 0.25rem">绛涢�夋湞浠�</div>
<div class="filterList">
- <div class="filterItem" v-for="(item, index) in dynasty" :key="index">
- <div class="circleBox" :class="{ bgcColor: item.isColor }"></div>
- <div class="filterText" :class="{ fontColor: item.isColor }">
- {{ item.name + " " + item.number }}
+ <div
+ class="filterItem"
+ v-for="(item, index) in dynasty"
+ :key="index"
+ @click="changeDynasty(item)"
+ >
+ <div
+ class="circleBox"
+ :class="{ active: item.dynastyId === activeId }"
+ ></div>
+ <div class="filterText">
+ {{ item.dynasty + " " + item.count }}
</div>
</div>
</div>
@@ -27,81 +35,76 @@
<div class="condition">
<div style="font-weight: 700; line-height: 0.25rem">鏉′欢閫夋嫨</div>
<div class="filterList">
- <div class="conditionItem">
- <div class="circleBox"></div>
+ <div class="conditionItem" @click="changeCondition(3)">
+ <div
+ class="circleBox"
+ :style="{ background: conditionId === 3 ? '#bacd66' : '#9e9e9e' }"
+ ></div>
<div class="filterText">3浠ｄ紶鎵夸笘鍖�</div>
</div>
- <div class="conditionItem">
- <div class="circleBox"></div>
+ <div class="conditionItem" @click="changeCondition(4)">
+ <div
+ class="circleBox"
+ :style="{ background: conditionId === 4 ? '#6d9346' : '#9e9e9e' }"
+ ></div>
<div class="filterText">4浠ｄ紶鎵夸笘鍖�</div>
</div>
- <div class="conditionItem">
- <div class="circleBox"></div>
+ <div class="conditionItem" @click="changeCondition(5)">
+ <div
+ class="circleBox"
+ :style="{ background: conditionId === 5 ? '#da7a2b' : '#9e9e9e' }"
+ ></div>
<div class="filterText">5浠ｄ紶鎵夸笘鍖�</div>
</div>
- <div class="conditionItem">
- <div class="circleBox"></div>
+ <div class="conditionItem" @click="changeCondition(6)">
+ <div
+ class="circleBox"
+ :style="{ background: conditionId === 6 ? '#bc321d' : '#9e9e9e' }"
+ ></div>
<div class="filterText">5浠ｄ互涓婁紶鎵夸笘鍖�</div>
</div>
</div>
</div>
- <div style="padding-left: 0.5rem; margin-top: 20px">鍏� 1983涓笘鍖�</div>
+ <div style="padding-left: 0.5rem; margin-top: 20px">
+ 鍏� {{ this.nodeData.length }}涓笘鍖�
+ </div>
</div>
-
- <!-- echarts鍥� -->
- <div class="barChart" ref="barChart"></div>
+ <div class="contentBox">
+ <!-- echarts鍥� -->
+ <div class="barChart" ref="barChart" ></div>
+ <div
+ class="toolBox"
+ v-if="showTool"
+ :style="{ top: toolTop, left: toolLeft }"
+ >
+ <div class="toolItem" @click="gotoDetail(1)">涓汉淇℃伅</div>
+ <div class="toolItem" @click="gotoDetail(2)">涓栧尰鏂囧寲</div>
+ <div class="toolItem" @click="gotoDetail(3)">涓栧尰浼犳壙</div>
+ </div>
+ </div>
</view>
</template>
<script>
import * as echarts from "echarts";
+import {
+ inheritMedicalSataStatistics,
+ inheritMedicalList,
+} from "@/api/index.js";
export default {
data() {
return {
// 鏍囬椤堕儴鏍忛渶瑕佺殑涓滆タ
+ keyword: "",
idIndex: 0,
- activeIndex: 1,
- dynasty: [
- {
- name: "鍞�",
- number: "4910",
- isColor: false,
- },
- {
- name: "浜斾唬",
- number: "494",
- isColor: true,
- },
- {
- name: "瀹�",
- number: "51273",
- isColor: false,
- },
- {
- name: "鍖楀畫",
- number: "15",
- isColor: true,
- },
- {
- name: "鍗楀畫",
- number: "4910",
- isColor: false,
- },
- {
- name: "鍏�",
- number: "299",
- isColor: true,
- },
- {
- name: "鏄�",
- number: "1830",
- isColor: false,
- },
- {
- name: "娓�",
- number: "1000",
- isColor: true,
- },
- ],
+ activeId: 28,
+ conditionId: "",
+ searchType: "DYNASTY",
+ dynasty: [],
+ nodeData: [],
+ showTool: false,
+ toolTop: 0,
+ toolLeft: 0,
+ toolInfo: {},
};
},
onLoad(options) {
@@ -109,27 +112,62 @@
console.log("optionsoptionsoptions", options.id);
},
mounted() {
- // 鍒濆鍖� echarts
- this.initBarChart();
+ this.getStatistics();
},
methods: {
+ getStatistics() {
+ inheritMedicalSataStatistics().then((res) => {
+ this.dynasty = res.object;
+ this.getData();
+ });
+ },
+ getData() {
+ this.nodeData = [];
+ // const defaultDynasty = this.dynasty.find(f.dynasty == "瀹�");
+ // this.activeId = defaultDynasty.dynastyId
+ inheritMedicalList({
+ keywords: this.keyword,
+ dynastyId: this.activeId,
+ searchType: this.searchType,
+ path: this.conditionId,
+ }).then((res) => {
+ for (let i = 0; i < res.object.nodeList.length; i++) {
+ const node = res.object.nodeList[i];
+ if (
+ this.nodeData.findIndex((citem) => citem.name == node.name) == -1
+ ) {
+ this.nodeData.push({
+ ...node,
+ itemStyle: {
+ color: "#F8E2D7",
+ borderColor: "#F3AA78",
+ borderWidth: "3",
+ },
+ });
+ }
+ }
+ console.log(this.nodeData);
+ // 鍒濆鍖� echarts
+ this.initBarChart();
+ });
+ },
initBarChart() {
// WMBg
//閫氳繃 $ref 杩涜鎸傝浇
let myChart = echarts.init(this.$refs.barChart);
- let FontSize = 12; // 瀛椾綋澶у皬
+ let FontSize = 18; // 瀛椾綋澶у皬
let BorderWidth = 2; // 杈规澶у皬
let SymbolSize = 80; // 灏哄璺濈
let Distance = 10;
// 涓嶅悓灏哄涓嬩慨鏀筫charts鐨勫瓧浣�
if (window.innerWidth > 2560 && window.innerWidth <= 3840) {
- FontSize = 28;
+ FontSize = 20;
BorderWidth = 5;
SymbolSize = 100;
Distance = 33;
} else if (window.innerWidth > 1920 && window.innerWidth <= 2560) {
- FontSize = 28;
+ FontSize = 20;
BorderWidth = 4;
SymbolSize = 90;
Distance = 22;
@@ -157,10 +195,10 @@
series: [
{
type: "graph",
- layout: "none",
- symbolSize: SymbolSize + 20,
+ layout: "force",
+ symbolSize: 100,
//鏄惁鍏佽鐢ㄦ埛鎷栧姩鍥剧墖
- roam: false,
+ roam: true,
label: {
show: true,
color: "black", // 璁剧疆鑺傜偣鏂囧瓧棰滆壊涓洪粦鑹�
@@ -168,7 +206,6 @@
},
edgeSymbol: ["circle", "arrow"],
edgeSymbolSize: [4, 10],
-
edgeLabel: {
show: true,
fontSize: FontSize, //鏇存敼涓よ�呭叧绯荤殑瀛椾綋
@@ -179,128 +216,115 @@
formatter: function (params) {
// params.data 鏄竟鐨勬暟鎹璞★紝浣犲彲浠ュ湪杩欓噷瀹氫箟鍏崇郴鍚�
// 渚嬪锛屼綘鍙互鏍规嵁 source 鍜� target 鐨勫悕绉版潵瀹氫箟鍏崇郴鍚�
- return params.data.relationName || "鐖跺瓙"; // 濡傛灉瀹氫箟浜� relationName 鍒欐樉绀哄畠锛屽惁鍒欐樉绀衡�滅埗瀛愨��
+ return params.data.relationName; // 濡傛灉瀹氫箟浜� relationName 鍒欐樉绀哄畠锛屽惁鍒欐樉绀衡�滅埗瀛愨��
},
},
//鍚勪釜鑺傜偣
- data: [
- {
- name: "钖涢洩",
- 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",
- },
- },
- ],
+ data: this.nodeData,
lineStyle: {
color: "#000000",
opacity: 0.9,
width: 2,
curveness: 0,
},
+ force: {
+ // initLayout: 'circular',
+ // gravity: 0
+ friction: 0.1,
+ repulsion: 500,
+ edgeLength: 6,
+ },
},
],
};
//杩涜娓叉煋
myChart.setOption(option);
+ myChart.getZr().on("click", (params) => {
+ if (!params.target) {
+ this.showTool = false;
+ }
+ });
+ myChart.on("click", (params) => {
+ console.log(params.event.offsetX, params.event.offsetY);
+ if (params.componentType === "series") {
+ this.showTool = true;
+ this.toolTop = params.event.offsetY + "px";
+ this.toolLeft = params.event.offsetX + "px";
+ this.toolInfo = {
+ id: params.data.identifier,
+ name: encodeURIComponent(params.data.name),
+ };
+ } else {
+ this.showTool = false;
+ }
+ });
+ },
+ gotoDetail(type) {
+ switch (type) {
+ case 1:
+ uni.navigateTo({
+ url: "/pages/character/detail?id=" + this.toolInfo.id,
+ });
+ break;
+ case 2:
+ uni.navigateTo({
+ url:
+ "/pages/inherit/list?type=" +
+ 2 +
+ "&id=" +
+ this.toolInfo.id +
+ "&name=" +
+ this.toolInfo.name,
+ });
+ break;
+ case 3:
+ uni.navigateTo({
+ url:
+ "/pages/inherit/list?type=" +
+ 1 +
+ "&id=" +
+ this.toolInfo.id +
+ "&name=" +
+ this.toolInfo.name,
+ });
+ break;
+ }
},
// 杩斿洖鎸夐挳
goBack() {
- // uuni.redirectTo();
- uni.redirectTo({
- url: "/pages/index/index",
- });
+ this.$router.go(-1);
+ },
+ search() {
+ this.searchType = "KEYWORD";
+ this.activeId = "";
+ this.conditionId = "";
+ this.getData();
+ },
+ changeDynasty(item) {
+ if (item.dynastyId === this.activeId) {
+ this.activeId = "";
+ if (this.conditionId === "") {
+ this.searchType = "KEYWORD";
+ }
+ } else {
+ this.searchType = "DYNASTY";
+ this.activeId = item.dynastyId;
+ this.keyword = "";
+ }
+ this.getData();
+ },
+ changeCondition(index) {
+ if (index === this.conditionId) {
+ this.conditionId = "";
+ if (this.activeId === "") {
+ this.searchType = "KEYWORD";
+ }
+ } else {
+ this.searchType = "DYNASTY";
+ this.conditionId = index;
+ this.keyword = "";
+ }
+ this.getData();
},
},
};
@@ -322,12 +346,32 @@
font-size: 0.12rem;
padding: 0;
}
-.barChart {
+.contentBox {
width: 100vw;
height: 80vh;
+ position: relative;
+}
+.barChart {
+ width: 100%;
+ height: 100%;
+}
+.toolBox {
+ padding: 0.1rem;
+ position: absolute;
+}
+.toolItem {
+ padding: 0.04rem 0.2rem;
+ border: 1px solid #333;
+ border-radius: 1rem;
+ margin: 0.06rem;
+ font-size: 0.12rem;
+ cursor: pointer;
+ background-color: #fff;
+}
+.toolItem:hover {
+ background-color: #efefef;
}
.filterBox {
- height: 2.2rem;
width: 90%;
border-bottom: 1px solid #ccc;
padding: 20px;
@@ -373,42 +417,52 @@
padding: 0.1rem 0.5rem;
}
.filterList {
+ flex: 1;
+ overflow: hidden;
margin-left: 0.4rem;
- display: flex;
+ overflow: hidden;
}
.filterItem {
display: flex;
box-shadow: 1px 1px 5px #888888;
align-items: center;
justify-content: center;
- width: 1rem;
- height: 0.25rem;
- flex: 1;
+ width: 1.4rem;
+ height: 0.3rem;
margin-left: 0.2rem;
border-radius: 0.13rem;
+ float: left;
+ margin-top: 0.02rem;
+ margin-bottom: 0.1rem;
+ cursor: pointer;
}
.conditionItem {
display: flex;
box-shadow: 1px 1px 5px #888888;
align-items: center;
justify-content: center;
- width: 1.3rem;
- height: 0.25rem;
- flex: 1;
+ width: 1.6rem;
+ height: 0.3rem;
+ float: left;
margin-left: 0.2rem;
border-radius: 0.13rem;
+ margin-top: 0.02rem;
+ margin-bottom: 0.1rem;
+ cursor: pointer;
}
.circleBox {
width: 20px;
height: 20px;
border-radius: 50%;
- background-color: #326350;
+ background-color: #9e9e9e;
+}
+.circleBox.active {
+ background-color: #da7a2b;
}
.filterText {
margin-left: 10px;
- font-size: 16px;
- color: #326350;
+ font-size: 0.16rem;
}
.fontColor {
color: #827e44 !important;
--
Gitblit v1.9.1