From d5f572496c5fb12fec2fe346b847bf58331299c9 Mon Sep 17 00:00:00 2001
From: YM <479443481@qq.com>
Date: 星期三, 17 七月 2024 15:56:51 +0800
Subject: [PATCH] 1
---
src/pages/inherit/index.vue | 241 +++++++++++++++++++++++++++++++++++-------------
1 files changed, 175 insertions(+), 66 deletions(-)
diff --git a/src/pages/inherit/index.vue b/src/pages/inherit/index.vue
index 44f026c..ead04a9 100644
--- a/src/pages/inherit/index.vue
+++ b/src/pages/inherit/index.vue
@@ -1,19 +1,58 @@
<template>
- <view class="">
+ <view>
<headNav
idIndex="2"
:searchBg="false"
- text="涓尰涓栧尰浼犳壙鏁版嵁搴�"
+ text="瀹跺浼犳壙"
bg="/static/image/topBg1.png"
bg1="/static/image/line1.png"
/>
<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>
+ <span
+ class="openSearch"
+ @click="
+ () => {
+ openSearch = !openSearch;
+ }
+ "
+ >楂樼骇鎼滅储{{ openSearch ? "鈭�" : "鈭�" }}</span
+ >
</div>
- <div class="dynasty">
+ <div class="dynasty" v-if="openSearch">
<div style="font-weight: 700; line-height: 0.25rem">绛涢�夋湞浠�</div>
<div class="filterList">
<div
@@ -32,7 +71,7 @@
</div>
</div>
</div>
- <div class="condition">
+ <div class="condition" v-if="openSearch">
<div style="font-weight: 700; line-height: 0.25rem">鏉′欢閫夋嫨</div>
<div class="filterList">
<div class="conditionItem" @click="changeCondition(3)">
@@ -65,20 +104,40 @@
</div>
</div>
</div>
- <div style="padding-left: 0.5rem; margin-top: 20px">
- 鍏� {{ this.nodeData.length }}涓笘鍖�
+ <div style="padding-left: 0.5rem; margin-top: 0.1rem">
+ 鍏� {{ 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"
:style="{ top: toolTop, left: toolLeft }"
>
<div class="toolItem" @click="gotoDetail(1)">涓汉淇℃伅</div>
- <div class="toolItem" @click="gotoDetail(2)">涓栧尰鏂囧寲</div>
+ <div
+ class="toolItem"
+ style="position: relative; top: -40px"
+ @click="gotoDetail(2)"
+ >
+ 涓栧尰鏂囧寲
+ </div>
<div class="toolItem" @click="gotoDetail(3)">涓栧尰浼犳壙</div>
</div>
</div>
@@ -87,12 +146,14 @@
<script>
import * as echarts from "echarts";
import {
+ getNodeCount,
inheritMedicalSataStatistics,
- inheritMedicalList,
+ inheritMedicalList
} from "@/api/index.js";
export default {
data() {
return {
+ loading: true,
// 鏍囬椤堕儴鏍忛渶瑕佺殑涓滆タ
keyword: "",
idIndex: 0,
@@ -105,11 +166,12 @@
toolTop: 0,
toolLeft: 0,
toolInfo: {},
+ totalCount: 0,
+ openSearch: false
};
},
onLoad(options) {
this.idIndex = options.id;
- console.log("optionsoptionsoptions", options.id);
},
mounted() {
this.getStatistics();
@@ -118,44 +180,51 @@
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.activeId = defaultDynasty.dynastyId
+ this.showTool = false;
inheritMedicalList({
keywords: this.keyword,
dynastyId: this.activeId,
searchType: this.searchType,
- path: this.conditionId,
+ 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 = 18; // 瀛椾綋澶у皬
let BorderWidth = 2; // 杈规澶у皬
@@ -181,14 +250,14 @@
let option = {
title: {
- text: [""],
+ 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 鎴栬�呯櫨鍒嗘瘮
+ position: "center center" // 鑳屾櫙鍥剧墖鐨勪綅缃紝鍙互鏄� top, bottom, middle 鎴栬�呯櫨鍒嗘瘮
},
tooltip: {},
animationDurationUpdate: 1500,
@@ -203,7 +272,7 @@
label: {
show: true,
color: "black", // 璁剧疆鑺傜偣鏂囧瓧棰滆壊涓洪粦鑹�
- fontSize: FontSize, // 璁剧疆鏂囧瓧澶у皬
+ fontSize: FontSize // 璁剧疆鏂囧瓧澶у皬
},
edgeSymbol: ["circle", "arrow"],
edgeSymbolSize: [4, 10],
@@ -218,7 +287,7 @@
// params.data 鏄竟鐨勬暟鎹璞★紝浣犲彲浠ュ湪杩欓噷瀹氫箟鍏崇郴鍚�
// 渚嬪锛屼綘鍙互鏍规嵁 source 鍜� target 鐨勫悕绉版潵瀹氫箟鍏崇郴鍚�
return params.data.relationName; // 濡傛灉瀹氫箟浜� relationName 鍒欐樉绀哄畠锛屽惁鍒欐樉绀衡�滅埗瀛愨��
- },
+ }
},
//鍚勪釜鑺傜偣
data: this.nodeData,
@@ -226,45 +295,75 @@
color: "#000000",
opacity: 0.9,
width: 2,
- curveness: 0,
+ curveness: 0
},
force: {
+ layoutAnimation: false,
// initLayout: 'circular',
- // gravity: 0
+ // gravity: 0,
friction: 0.1,
repulsion: 500,
- edgeLength: 6,
+ edgeLength: 6
},
- },
- ],
+ selectedMode: "single",
+ select: {
+ itemStyle: {
+ color: "#e8f3ff",
+ borderColor: "#284e74",
+ borderWidth: "3"
+ }
+ }
+ }
+ ]
};
+ let selectData = [];
//杩涜娓叉煋
myChart.setOption(option);
- myChart.getZr().on("click", (params) => {
- if (!params.target) {
+ // myChart.getZr().on("click", (params) => {
+ // console.log(params);
+ // console.log(selectData);
+ // if (!params.target) {
+ // this.showTool = false;
+ // }
+ // });
+ myChart.on("click", (params) => {
+ if (selectData.length > 0) {
+ let x = params.event.target.transform[4];
+ let y = params.event.target.transform[5];
+ if (params.componentType === "series") {
+ this.showTool = true;
+ this.toolTop = y - 70 + "px";
+ this.toolLeft = x - 163 + "px";
+ this.toolInfo = {
+ id: params.data.identifier,
+ name: encodeURIComponent(params.data.name)
+ };
+ } else {
+ this.showTool = false;
+ }
+ }
+ });
+ myChart.on("selectchanged", (params) => {
+ if (params.fromAction == "select") {
+ selectData = params.selected[0].dataIndex;
+ } else {
+ selectData = [];
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;
- }
+ myChart.on("graphroam", (params) => {
+ this.showTool = false;
+ myChart.dispatchAction({
+ type: "unselect",
+ dataIndex: selectData
+ });
});
},
gotoDetail(type) {
switch (type) {
case 1:
uni.navigateTo({
- url: "/pages/character/detail?id=" + this.toolInfo.id,
+ url: "/pages/character/detail?id=" + this.toolInfo.id
});
break;
case 2:
@@ -275,7 +374,7 @@
"&id=" +
this.toolInfo.id +
"&name=" +
- this.toolInfo.name,
+ this.toolInfo.name
});
break;
case 3:
@@ -286,7 +385,7 @@
"&id=" +
this.toolInfo.id +
"&name=" +
- this.toolInfo.name,
+ this.toolInfo.name
});
break;
}
@@ -326,8 +425,8 @@
this.keyword = "";
}
this.getData();
- },
- },
+ }
+ }
};
</script>
<style scoped>
@@ -352,7 +451,7 @@
height: 80vh;
position: relative;
}
-.barChart {
+#barChart {
width: 100%;
height: 100%;
}
@@ -368,6 +467,7 @@
font-size: 0.12rem;
cursor: pointer;
background-color: #fff;
+ display: inline-block;
}
.toolItem:hover {
background-color: #efefef;
@@ -388,17 +488,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;
@@ -406,16 +507,24 @@
border-radius: 50px;
margin-right: 10rpx;
}
+
+.searchBox .openSearch {
+ position: absolute;
+ right: -100px;
+ font-size: 14px;
+ cursor: pointer;
+}
+
.dynasty {
display: flex;
margin-top: 0.2rem;
width: 100%;
- padding: 0.1rem 0.5rem;
+ padding: 0 0.5rem;
}
.condition {
display: flex;
width: 100%;
- padding: 0.1rem 0.5rem;
+ padding: 0 0.5rem;
}
.filterList {
flex: 1;
@@ -428,7 +537,6 @@
box-shadow: 1px 1px 5px #888888;
align-items: center;
justify-content: center;
- width: 1.4rem;
height: 0.3rem;
margin-left: 0.2rem;
border-radius: 0.13rem;
@@ -436,13 +544,14 @@
margin-top: 0.02rem;
margin-bottom: 0.1rem;
cursor: pointer;
+ padding: 0 0.1rem;
}
.conditionItem {
display: flex;
box-shadow: 1px 1px 5px #888888;
align-items: center;
justify-content: center;
- width: 1.6rem;
+ padding: 0 0.1rem;
height: 0.3rem;
float: left;
margin-left: 0.2rem;
@@ -463,7 +572,7 @@
}
.filterText {
margin-left: 10px;
- font-size: 0.16rem;
+ font-size: 0.14rem;
}
.fontColor {
color: #827e44 !important;
--
Gitblit v1.9.1