From c56935d7085725e609d926b064c146f3ffc29e6e Mon Sep 17 00:00:00 2001 From: YM <479443481@qq.com> Date: 星期四, 06 六月 2024 19:33:48 +0800 Subject: [PATCH] 1 --- src/pages/inherit/index.vue | 142 ++++++++++++++++++++++++++++++++-------------- 1 files changed, 98 insertions(+), 44 deletions(-) diff --git a/src/pages/inherit/index.vue b/src/pages/inherit/index.vue index 44f026c..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,12 +131,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 +151,11 @@ toolTop: 0, toolLeft: 0, toolInfo: {}, + totalCount: 0 }; }, onLoad(options) { this.idIndex = options.id; - console.log("optionsoptionsoptions", options.id); }, mounted() { this.getStatistics(); @@ -118,44 +164,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 +234,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 +256,7 @@ label: { show: true, color: "black", // 璁剧疆鑺傜偣鏂囧瓧棰滆壊涓洪粦鑹� - fontSize: FontSize, // 璁剧疆鏂囧瓧澶у皬 + fontSize: FontSize // 璁剧疆鏂囧瓧澶у皬 }, edgeSymbol: ["circle", "arrow"], edgeSymbolSize: [4, 10], @@ -218,7 +271,7 @@ // params.data 鏄竟鐨勬暟鎹璞★紝浣犲彲浠ュ湪杩欓噷瀹氫箟鍏崇郴鍚� // 渚嬪锛屼綘鍙互鏍规嵁 source 鍜� target 鐨勫悕绉版潵瀹氫箟鍏崇郴鍚� return params.data.relationName; // 濡傛灉瀹氫箟浜� relationName 鍒欐樉绀哄畠锛屽惁鍒欐樉绀衡�滅埗瀛愨�� - }, + } }, //鍚勪釜鑺傜偣 data: this.nodeData, @@ -226,17 +279,18 @@ 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 + } + } + ] }; //杩涜娓叉煋 myChart.setOption(option); @@ -246,14 +300,13 @@ } }); 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), + name: encodeURIComponent(params.data.name) }; } else { this.showTool = false; @@ -264,7 +317,7 @@ 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 +328,7 @@ "&id=" + this.toolInfo.id + "&name=" + - this.toolInfo.name, + this.toolInfo.name }); break; case 3: @@ -286,7 +339,7 @@ "&id=" + this.toolInfo.id + "&name=" + - this.toolInfo.name, + this.toolInfo.name }); break; } @@ -326,8 +379,8 @@ this.keyword = ""; } this.getData(); - }, - }, + } + } }; </script> <style scoped> @@ -352,7 +405,7 @@ height: 80vh; position: relative; } -.barChart { +#barChart { width: 100%; height: 100%; } @@ -388,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; -- Gitblit v1.9.1