From 6a7fe3910a91355467295b4f81f71405fb1b1e75 Mon Sep 17 00:00:00 2001 From: YM <479443481@qq.com> Date: 星期二, 23 七月 2024 16:00:56 +0800 Subject: [PATCH] 1 --- src/pages/academicSchools/index.vue | 188 ++++++++++++++++++++++++++++++++++------------ 1 files changed, 138 insertions(+), 50 deletions(-) diff --git a/src/pages/academicSchools/index.vue b/src/pages/academicSchools/index.vue index 45652ba..f47fabd 100644 --- a/src/pages/academicSchools/index.vue +++ b/src/pages/academicSchools/index.vue @@ -37,7 +37,7 @@ @click="onSearch({ text: item }, index)" :class="{ cursor: true, active: hotAciveIndex === index }" v-for="(item, index) in hotKeyList" - :key="item" + :key="item.name" > {{ item.name }} </li> @@ -45,7 +45,12 @@ </view> <view v-if="isAdvancedSearch" class="searchDialog"> <h3 style="margin-bottom: 0.2rem">楂樼骇鎼滅储</h3> - <el-form label-width="100px" :model="formData" size="mini"> + <el-form + label-width="100px" + :model="formData" + ref="searchForm" + size="mini" + > <el-row> <el-col :span="8"> <el-form-item label="濮撳悕/鍒悕锛�"> @@ -54,14 +59,16 @@ </el-col> <el-col :span="8"> <el-form-item label="娲诲姩鍦帮細"> - <el-select - style="width: 100%" - v-model="formData.actively" - placeholder="璇烽�夋嫨娲诲姩鍦�" - > - <!-- <el-option label="鍖哄煙涓�" value="shanghai"></el-option> --> - <!-- <el-option label="鍖哄煙浜�" value="beijing"></el-option> --> - </el-select> + <div class="selectActivelyBox" @click="selectActively"> + <p v-if="formData.actively.length == 0">璇烽�夋嫨娲诲姩鍦�</p> + <el-tag + v-for="item in formData.actively" + :key="item.id" + size="small" + closable + >{{ item.name }}</el-tag + > + </div> </el-form-item> </el-col> <el-col :span="8"> @@ -74,45 +81,62 @@ <el-col :span="8"> <el-form-item label="浜虹墿鏍囩锛�"> <el-select + multiple style="width: 100%" v-model="formData.personTags" placeholder="璇烽�夋嫨浜虹墿鏍囩" > - <!-- <el-option label="鍖哄煙涓�" value="shanghai"></el-option> --> - <!-- <el-option label="鍖哄煙浜�" value="beijing"></el-option> --> + <el-option + v-for="item in personTag" + :key="item.id" + :label="item.name" + :value="item.id" + ></el-option> </el-select> </el-form-item> </el-col> <el-col :span="8"> <el-form-item label="绀句細韬唤锛�"> <el-select + multiple style="width: 100%" v-model="formData.socialIdentity" placeholder="璇烽�夋嫨绀句細韬唤" > - <!-- <el-option label="鍖哄煙涓�" value="shanghai"></el-option> --> - <!-- <el-option label="鍖哄煙浜�" value="beijing"></el-option> --> + <el-option + v-for="item in socialDistinction" + :key="item.id" + :label="item.name" + :value="item.id" + ></el-option> </el-select> </el-form-item> </el-col> <el-col :span="8"> <el-form-item label="鏃舵湡锛�"> <el-select + multiple style="width: 100%" v-model="formData.period" placeholder="璇烽�夋嫨鏃舵湡" > - <!-- <el-option label="鍖哄煙涓�" value="shanghai"></el-option> --> - <!-- <el-option label="鍖哄煙浜�" value="beijing"></el-option> --> + <el-option + v-for="item in dynastyData" + :key="item.dynastyId" + :label="item.name" + :value="item.dynastyId" + ></el-option> </el-select> </el-form-item> </el-col> </el-row> + <div style="text-align: right"> + <el-button type="primary" size="mini" @click="searchFun" + >鎼滅储</el-button + > + <el-button size="mini" @click="resetForm">閲嶇疆</el-button> + </div> </el-form> - <div style="text-align: right"> - <el-button type="primary" size="mini">鎼滅储</el-button> - <el-button size="mini">閲嶇疆</el-button> - </div> </view> <div v-if="showPerson" class="personDialog"> <i @@ -193,6 +217,14 @@ </div> <div class="btn" @click="spaceTimeArr(detailData.id)">鏌ョ湅鏇村>>></div> </div> + <el-drawer + title="鍦板潃鍒楄〃" + :visible.sync="drawer" + direction="rtl" + :before-close="handleClose" + > + <span>鎴戞潵鍟�!</span> + </el-drawer> </view> </template> @@ -202,6 +234,9 @@ getHotSearch, getPDataStatistics, academicSearch, + getPersonTag, + getSocialDistinction, + getDynastyAll } from "@/api/index.js"; import * as echarts from "echarts"; import MyForm from "@/components/form/form.vue"; @@ -228,12 +263,12 @@ // 褰撳墠浜虹墿淇℃伅 ownInfo: null, detailData: { - name: "", + name: "" }, isAdvancedSearch: false, formData: { name: "", - actively: "", + actively: [], works: "", personTags: "", socialIdentity: "", @@ -244,14 +279,19 @@ personPageInfo: { totalCount: 0, page: 1, - limit: 10, + limit: 10 }, + personTag: [], + socialDistinction: [], + dynastyData: [], + drawer:false, }; }, mounted() { this.getData(); - // this.echartsArr(); this.hotSearch(); + // 鑾峰彇浜虹墿鏍囩銆佺ぞ浼氳韩浠� + this.getOptionInfo(); // 鐩戝惉绐楀彛澶у皬鍙樺寲 window.addEventListener("resize", this.relation); }, @@ -259,6 +299,36 @@ this.searchKey = options.keyword; }, methods: { + getOptionInfo() { + getDynastyAll().then((res) => { + this.dynastyData = res.list; + }); + getPersonTag().then((res) => { + this.personTag = res.list; + }); + getSocialDistinction().then((res) => { + this.socialDistinction = res.list; + }); + }, + resetForm(formName) { + this.formData = { + name: "", + actively: [], + works: "", + personTags: "", + socialIdentity: "", + period: "" + }; + }, + searchFun() { + console.log(this.formData); + }, + selectActively() { + this.drawer = true; + }, + handleClose(done) { + done(); + }, // 鑾峰彇浜虹墿鍏崇郴 getPersonInfo(arr, str, newArr, order, type, parent) { for (let i = 0; i < arr.length; i++) { @@ -274,7 +344,7 @@ parentName: parent?.NAME[0]?.content1 ?? parent.parentName, name: personInfo?.NAME[0]?.content1, category: type, - symbolSize: 15, + symbolSize: 15 }; if (order > 80) { order = 80; @@ -376,7 +446,7 @@ const data = item[str]?.map((e) => { return { ...e, - personId: item.personId, + personId: item.personId }; }); if (ele[str] && data?.length) { @@ -519,19 +589,19 @@ ...literature, ...social, ...place, - ...school, + ...school ]; personData.forEach((item) => { this.nodes.push({ name: item.name, id: item.personId, - ...item, + ...item }); let obj = { source: item.parentName, target: item.name, - relation: item.relationTypeName || "", // 濡傛灉瀛樺湪 relationName 瀛楁鍒欎娇鐢紝鍚﹀垯涓虹┖瀛楃涓� + relation: item.relationTypeName || "" // 濡傛灉瀛樺湪 relationName 瀛楁鍒欎娇鐢紝鍚﹀垯涓虹┖瀛楃涓� }; this.relationships.push(obj); }); @@ -561,7 +631,7 @@ } return { ...item, - symbolSize: size > 80 ? 80 : size, + symbolSize: size > 80 ? 80 : size }; }); @@ -616,8 +686,8 @@ borderRadius: 30, position: "middle", // 璁剧疆鏍囩鏂囨湰鍦ㄧ嚎鐨勪腑闂翠綅缃笂灞呬腑鏄剧ず // z: -1, // 璁剧疆鏍囩鐨剒杞撮珮搴︼紝浣垮叾姣旇繛鎺ョ嚎鏇撮珮 - distance: -10, // 灏嗘爣绛炬斁缃湪杩炴帴绾夸笂 - }, + distance: -10 // 灏嗘爣绛炬斁缃湪杩炴帴绾夸笂 + } }); } } @@ -640,8 +710,8 @@ orient: "vertical", data: this.categories.map(function (a) { return a.name; - }), - }, + }) + } ], series: [ { @@ -656,28 +726,28 @@ label: { show: true, position: "right", - formatter: "{b}", + formatter: "{b}" }, scaleLimit: { min: 0.4, - max: 2, + max: 2 }, lineStyle: { color: "source", - curveness: 0.2, + curveness: 0.2 }, emphasis: { focus: "adjacency", lineStyle: { - width: 5, - }, + width: 5 + } }, force: { repulsion: 600, - edgeLength: 300, - }, - }, - ], + edgeLength: 300 + } + } + ] }; // 璁剧疆鐐瑰嚮浜嬩欢鐩戝惉 myChart.off("click"); @@ -719,7 +789,7 @@ i += 1; return e["content" + i]; }).join("銆�") ?? "", - biography: data?.BIOGRAPHY ?? "", + biography: data?.BIOGRAPHY ?? "" }; this.detailData = obj; }, @@ -748,7 +818,7 @@ academicSearch({ keyword: key, page: this.personPageInfo.page, - pageSize: this.personPageInfo.limit, + pageSize: this.personPageInfo.limit }).then((res) => { this.personList = res.list.map((item) => { return { @@ -769,7 +839,7 @@ division: item.medicalBranchList && item.medicalBranchList.length ? item.medicalBranchList[0].content1 - : "-", + : "-" }; }); this.showPerson = true; @@ -779,7 +849,7 @@ spaceTimeArr(id) { // 鍏崇郴鍥剧殑鏁版嵁 uni.navigateTo({ - url: "/pages/character/detail?id=" + id, + url: "/pages/character/detail?id=" + id }); }, // 鑾峰彇鏈濅唬echarts鐨勬暟鎹� @@ -803,7 +873,7 @@ this.hotKeyList = indexList.map((item) => { return { id: item, - name: res.object[item], + name: res.object[item] }; }); }); @@ -818,8 +888,8 @@ // document.querySelector(".fbox1").style.height = box1Height + "px"; // } // }); - }, - }, + } + } }; </script> @@ -956,4 +1026,22 @@ cursor: pointer; } } + +.selectActivelyBox { + cursor: pointer; + border: 1px solid #dcdfe6; + border-radius: 4px; + padding: 0 0.12rem; + font-size: 12px; + color: #c0c4cc; +} + +.el-drawer__wrapper{ + top: 0.86rem; +} + +::v-deep .el-drawer__open .el-drawer.rtl{ + width: 50% !important; +} + </style> -- Gitblit v1.9.1