From a971d0c13ab9cd5107152f6eba5e1e724a37fa0b Mon Sep 17 00:00:00 2001
From: 杨磊 <505174330@qq.com>
Date: 星期五, 07 六月 2024 17:20:31 +0800
Subject: [PATCH] Merge branch 'master' of http://182.92.203.7:2001/r/TCM_CharacterLibrary
---
src/pages/inherit/index.vue | 141 ++++++++++++++++++++++++++++++++++-------------
1 files changed, 102 insertions(+), 39 deletions(-)
diff --git a/src/pages/inherit/index.vue b/src/pages/inherit/index.vue
index 615cdc6..370cf29 100644
--- a/src/pages/inherit/index.vue
+++ b/src/pages/inherit/index.vue
@@ -1,5 +1,5 @@
<template>
- <view class="">
+ <view>
<headNav
idIndex="2"
:searchBg="false"
@@ -10,7 +10,37 @@
<div class="filterBox font-family">
<div class="searchBox">
- <input type="text" v-model="keyword" placeholder="璇疯緭鍏ュ叧閿瓧" />
+ <input
+ type="text"
+ v-model="keyword"
+ @confirm="search"
+ placeholder="璇疯緭鍏ュ叧閿瓧"
+ style="padding-right: 54px; box-sizing: border-box"
+ />
+ <span
+ class="cleanupBtn"
+ v-if="keyword"
+ @click="keyword = ''"
+ style="
+ position: absolute;
+ top: 50%;
+ margin-top: -10px;
+ right: 84px;
+ color: #fff;
+ z-index: 2;
+ display: inline-block;
+ width: 20px;
+ height: 20px;
+ text-align: center;
+ line-height: 20px;
+ background-color: #a5a5a5;
+ font-weight: bold;
+ border-radius: 50%;
+ font-size: 12px;
+ cursor: pointer;
+ "
+ >鉁�</span
+ >
<button @click="search">鎼滅储</button>
</div>
<div class="dynasty">
@@ -66,12 +96,26 @@
</div>
</div>
<div style="padding-left: 0.5rem; margin-top: 20px">
- 鍏� {{ this.nodeData.length }}涓笘鍖�
+ 鍏� {{ totalCount }}涓笘鍖�
</div>
</div>
<div class="contentBox">
<!-- echarts鍥� -->
- <div class="barChart" ref="barChart"></div>
+ <div id="barChart" ref="barChart"></div>
+ <div
+ v-if="!loading && nodeData.length == 0"
+ style="
+ position: absolute;
+ top: 30%;
+ left: 0;
+ right: 0;
+ text-align: center;
+ font-size: 0.2rem;
+ color: #666;
+ "
+ >
+ 鏆傛棤鎼滅储鏁版嵁
+ </div>
<div
class="toolBox"
v-if="showTool"
@@ -87,86 +131,97 @@
<script>
import * as echarts from "echarts";
import {
+ getNodeCount,
inheritMedicalSataStatistics,
inheritMedicalList
} from "@/api/index.js";
export default {
data() {
return {
+ loading: true,
// 鏍囬椤堕儴鏍忛渶瑕佺殑涓滆タ
keyword: "",
idIndex: 0,
- activeId: "",
+ activeId: 28,
conditionId: "",
- searchType: "KEYWORD",
+ searchType: "DYNASTY",
dynasty: [],
nodeData: [],
showTool: false,
toolTop: 0,
toolLeft: 0,
- toolInfo: {}
+ toolInfo: {},
+ totalCount: 0
};
},
onLoad(options) {
this.idIndex = options.id;
- console.log("optionsoptionsoptions", options.id);
},
mounted() {
this.getStatistics();
- this.getData();
},
methods: {
getStatistics() {
inheritMedicalSataStatistics().then((res) => {
this.dynasty = res.object;
+ this.activeId = this.dynasty[0].dynastyId;
+ this.getData();
});
},
getData() {
+ this.loading = true;
this.nodeData = [];
+ // const defaultDynasty = this.dynasty.find(f.dynasty == "瀹�");
+ this.showTool = false;
inheritMedicalList({
keywords: this.keyword,
dynastyId: this.activeId,
searchType: this.searchType,
path: this.conditionId
}).then((res) => {
- console.log(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"
- }
- });
- }
+ this.nodeData.push({
+ ...node,
+ id: node.identifier,
+ itemStyle: {
+ color: "#F8E2D7",
+ borderColor: "#F3AA78",
+ borderWidth: "3"
+ }
+ });
}
- console.log(this.nodeData);
+ getNodeCount({
+ keywords: this.keyword,
+ dynastyId: this.activeId,
+ searchType: this.searchType,
+ path: this.conditionId
+ }).then((res) => {
+ this.totalCount = res.object.totalCount;
+ });
+ console.log(this.nodeData, "this.nodeData");
+ this.loading = false;
// 鍒濆鍖� echarts
this.initBarChart();
});
},
initBarChart() {
- // WMBg
//閫氳繃 $ref 杩涜鎸傝浇
- let myChart = echarts.init(this.$refs.barChart);
+ var chartDom = document.getElementById("barChart");
+ let myChart = echarts.init(chartDom);
- 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;
@@ -195,7 +250,7 @@
{
type: "graph",
layout: "force",
- symbolSize: 120,
+ symbolSize: 100,
//鏄惁鍏佽鐢ㄦ埛鎷栧姩鍥剧墖
roam: true,
label: {
@@ -227,8 +282,9 @@
curveness: 0
},
force: {
+ layoutAnimation: false,
// initLayout: 'circular',
- // gravity: 0
+ // gravity: 0,
friction: 0.1,
repulsion: 500,
edgeLength: 6
@@ -238,8 +294,12 @@
};
//杩涜娓叉煋
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";
@@ -248,6 +308,8 @@
id: params.data.identifier,
name: encodeURIComponent(params.data.name)
};
+ } else {
+ this.showTool = false;
}
});
},
@@ -343,7 +405,7 @@
height: 80vh;
position: relative;
}
-.barChart {
+#barChart {
width: 100%;
height: 100%;
}
@@ -379,17 +441,18 @@
align-items: center;
margin: 0 auto;
margin-top: 0.2rem;
+ position: relative;
}
.searchBox > input {
border: none;
outline: none;
margin: auto;
- width: 100%;
+ flex: 1;
+ overflow: hidden;
padding-left: 20px;
}
.searchBox > button {
- width: 10%;
color: white;
height: 40px;
line-height: 40px;
@@ -419,8 +482,8 @@
box-shadow: 1px 1px 5px #888888;
align-items: center;
justify-content: center;
- width: 1rem;
- height: 0.25rem;
+ width: 1.4rem;
+ height: 0.3rem;
margin-left: 0.2rem;
border-radius: 0.13rem;
float: left;
@@ -433,8 +496,8 @@
box-shadow: 1px 1px 5px #888888;
align-items: center;
justify-content: center;
- width: 1.3rem;
- height: 0.25rem;
+ width: 1.6rem;
+ height: 0.3rem;
float: left;
margin-left: 0.2rem;
border-radius: 0.13rem;
@@ -454,7 +517,7 @@
}
.filterText {
margin-left: 10px;
- font-size: 16px;
+ font-size: 0.16rem;
}
.fontColor {
color: #827e44 !important;
--
Gitblit v1.9.1