From 37ce456998cb4cba8d88fa3db0a1a3738e52fb3a Mon Sep 17 00:00:00 2001 From: QYF-GitLab1 <1940665526@qq.com> Date: 星期三, 24 七月 2024 11:18:29 +0800 Subject: [PATCH] 1 --- src/pages/academicSchools/index.vue | 308 ++++++++++++++++++++++++++++++++++++++++++--------- src/api/index.js | 9 + 2 files changed, 261 insertions(+), 56 deletions(-) diff --git a/src/api/index.js b/src/api/index.js index adfd9c3..5ae3f05 100644 --- a/src/api/index.js +++ b/src/api/index.js @@ -310,6 +310,14 @@ }); }; +export const getPlaceInfo = (data) => { + return req1({ + url: "/person/search/place", + method: "post", + params: data, + }); +}; + export const searchSchoolPerson = (data) => { return req1({ url: "/person/searchSchoolPerson", @@ -410,4 +418,3 @@ method: "post", }); }; - diff --git a/src/pages/academicSchools/index.vue b/src/pages/academicSchools/index.vue index a369d13..39e8061 100644 --- a/src/pages/academicSchools/index.vue +++ b/src/pages/academicSchools/index.vue @@ -222,8 +222,80 @@ :visible.sync="drawer" direction="rtl" :before-close="handleClose" + class="customDrawer" > - <span>鎴戞潵鍟�!</span> + <div class="drawerContent"> + <div class="drawerTips">閬镐腑鐨勫湴鍧�锛�</div> + <div class="drawerTable"> + <div class="tableTabs"> + <div class="inputItem"> + <el-input + placeholder="璜嬭几鍏ュ湴鍚嶆悳绱�" + v-model="tableKey" + class="input-with-select" + @keyup.enter="searchAddress" + > + <el-button + @click="searchAddress" + type="primary" + slot="append" + icon="el-icon-search" + ></el-button> + </el-input> + </div> + <div class="selectItem"> + <el-select v-model="dynastyId" placeholder="璜嬮伕鎿囨檪鏈�"> + <el-option + v-for="item in dynastyData" + :key="item.dynastyId + '0'" + :label="item.name" + :value="item.dynastyId" + ></el-option> + </el-select> + </div> + </div> + <el-table + ref="multipleTable" + :data="gridData" + tooltip-effect="dark" + style="width: 100%" + height="530" + @selection-change="handleSelectionChange" + > + <el-table-column type="selection" width="55"> </el-table-column> + <el-table-column prop="currentName" label="鍦板悕"> </el-table-column> + <el-table-column width="250" label="骞翠唬鍗�闁�" show-overflow-tooltip> + <template slot-scope="scope">{{ + scope.row.start + "-" + scope.row.end + }}</template> + </el-table-column> + <el-table-column + prop="dynastyName" + label="鏅傛湡" + width="250" + show-overflow-tooltip + > + </el-table-column> + </el-table> + </div> + <div class="drawerPage"> + <el-pagination + @size-change="handleSizeChange" + @current-change="handleCurrentChange" + :current-page="currentPage" + :page-sizes="[10, 20, 60, 100]" + :page-size="pageSize" + layout="total, sizes, prev, pager, next, jumper" + :total="total" + > + </el-pagination> + </div> + <div class="drawerBtn"> + <el-button @click="setCurrent">鍏ㄩ伕鐣跺墠闋�</el-button> + <el-button @click="setCurrent('cancle')">鍙栨秷鍏ㄩ伕</el-button> + <el-button @click="onOkAddress" type="primary">纰哄畾</el-button> + </div> + </div> </el-drawer> </view> </template> @@ -236,7 +308,8 @@ academicSearch, getPersonTag, getSocialDistinction, - getDynastyAll + getDynastyAll, + getPlaceInfo, } from "@/api/index.js"; import * as echarts from "echarts"; export default { @@ -257,7 +330,7 @@ // 褰撳墠浜虹墿淇℃伅 ownInfo: null, detailData: { - name: "" + name: "", }, isAdvancedSearch: false, formData: { @@ -266,23 +339,33 @@ works: "", personTags: "", socialIdentity: "", - period: "" + period: "", }, showPerson: false, personList: [], personPageInfo: { totalCount: 0, page: 1, - limit: 10 + limit: 10, }, personTag: [], socialDistinction: [], dynastyData: [], + // 鎶藉眽 + gridData: [], + page: 1, + currentPage: 1, + pageSize: 10, + total: 0, + multipleSelection: [], drawer: false, + dynastyId: "", + tableKey: "", + // echarts infoOfPersons: [], infoOfSchools: [], nodeDatas: [], - links: [] + links: [], }; }, mounted() { @@ -290,6 +373,8 @@ this.hotSearch(); // 鑾峰彇浜虹墿鏍囩銆佺ぞ浼氳韩浠� this.getOptionInfo(); + // 鐛插彇鍦板潃鍒楄〃 + this.getAddressList(); // 鐩戝惉绐楀彛澶у皬鍙樺寲 window.addEventListener("resize", this.relation); }, @@ -297,6 +382,70 @@ this.searchKey = options.keyword; }, methods: { + // 鎼滅储鍦板潃 + searchAddress() { + this.gridData = []; + this.getAddressList(); + }, + // 鍒嗛〉 + handleSizeChange(val) { + this.pageSize = val; + this.getAddressList(); + }, + handleCurrentChange(val) { + this.page = val; + this.getAddressList(); + }, + // 琛ㄦ牸閫夋嫨 + handleSelectionChange(val) { + this.multipleSelection = val; + }, + // 鍏ㄩ伕 + setCurrent(str) { + if (str == "cancle") { + this.$refs.multipleTable.clearSelection(); + return false; + } + if (this.gridData.length) { + this.gridData.forEach((row) => { + this.$refs.multipleTable.toggleRowSelection(row); + }); + this.multipleSelection = this.gridData; + } + }, + // 纰鸿獚鍦板潃 + onOkAddress() { + const data = this.multipleSelection.map((item) => { + return { + ...item, + name: item.currentName, + id: item.dynastyId, + }; + }); + this.formData.actively = data; + this.drawer = false; + }, + // 鐛插彇鍦板潃鍒楄〃 + getAddressList() { + const data = { + page: this.page, + pageSize: this.pageSize, + }; + if (this.dynastyId != "") { + data["dynastyId"] = this.dynastyId; + } + if (this.tableKey != "") { + data["keyword"] = this.tableKey; + } + getPlaceInfo(data).then((res) => { + if (res?.success && res?.list.length) { + this.gridData = res?.list; + } else { + this.gridData = []; + } + }); + }, + getOptionInfo() { getDynastyAll().then((res) => { this.dynastyData = res.list; @@ -308,6 +457,7 @@ this.socialDistinction = res.list; }); }, + resetForm(formName) { this.formData = { name: "", @@ -315,18 +465,22 @@ works: "", personTags: "", socialIdentity: "", - period: "" + 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++) { @@ -342,7 +496,7 @@ parentName: parent?.NAME[0]?.content1 ?? parent.parentName, name: personInfo?.NAME[0]?.content1, category: type, - symbolSize: 15 + symbolSize: 15, }; if (order > 80) { order = 80; @@ -444,7 +598,7 @@ const data = item[str]?.map((e) => { return { ...e, - personId: item.personId + personId: item.personId, }; }); if (ele[str] && data?.length) { @@ -611,9 +765,9 @@ // this.relationships.push(obj); // }); // } - }); }, + // 閫掑綊澶勭悊鎵�鏈夊眰绾ф暟鎹� handleData(data, parent) { for (let i = 0; i < data.length; i++) { @@ -629,8 +783,8 @@ id: item.mainId, name: mainPerson.NAME[0].content1, itemStyle: { - color: "#244a7b" - } + color: "#244a7b", + }, }); } else { switch (parent.thisType) { @@ -648,8 +802,8 @@ id: item.mainId, name: p.NAME[0].content1, itemStyle: { - color: "#5470c6" - } + color: "#5470c6", + }, }); } } @@ -665,8 +819,8 @@ padding: [3, 8], borderRadius: 30, position: "middle", // 璁剧疆鏍囩鏂囨湰鍦ㄧ嚎鐨勪腑闂翠綅缃笂灞呬腑鏄剧ず - distance: -10 // 灏嗘爣绛炬斁缃湪杩炴帴绾夸笂 - } + distance: -10, // 灏嗘爣绛炬斁缃湪杩炴帴绾夸笂 + }, }); break; case 2: @@ -679,13 +833,13 @@ id: item.mainId, name: item.literatureName, itemStyle: { - color: "#fac858" - } + color: "#fac858", + }, }); } this.links.push({ source: item.mainId, - target: parent.mainId + target: parent.mainId, }); break; case 3: @@ -698,13 +852,13 @@ id: item.mainId, name: item.ancientName, itemStyle: { - color: "#ea7ccc" - } + color: "#ea7ccc", + }, }); } this.links.push({ source: item.mainId, - target: parent.mainId + target: parent.mainId, }); break; case 4: @@ -724,14 +878,14 @@ id: item.mainId, name: s.name[0], itemStyle: { - color: "#9a60b4" - } + color: "#9a60b4", + }, }); } } this.links.push({ source: item.mainId, - target: parent.mainId + target: parent.mainId, }); break; case 5: @@ -748,8 +902,8 @@ id: item.mainId, name: p.NAME[0].content1, itemStyle: { - color: "#ee6666" - } + color: "#ee6666", + }, }); } } @@ -765,8 +919,8 @@ padding: [3, 8], borderRadius: 30, position: "middle", // 璁剧疆鏍囩鏂囨湰鍦ㄧ嚎鐨勪腑闂翠綅缃笂灞呬腑鏄剧ず - distance: -10 // 灏嗘爣绛炬斁缃湪杩炴帴绾夸笂 - } + distance: -10, // 灏嗘爣绛炬斁缃湪杩炴帴绾夸笂 + }, }); break; case 6: @@ -783,8 +937,8 @@ id: item.mainId, name: p.NAME[0].content1, itemStyle: { - color: "#3dae7b" - } + color: "#3dae7b", + }, }); } } @@ -800,8 +954,8 @@ padding: [3, 8], borderRadius: 30, position: "middle", // 璁剧疆鏍囩鏂囨湰鍦ㄧ嚎鐨勪腑闂翠綅缃笂灞呬腑鏄剧ず - distance: -10 // 灏嗘爣绛炬斁缃湪杩炴帴绾夸笂 - } + distance: -10, // 灏嗘爣绛炬斁缃湪杩炴帴绾夸笂 + }, }); break; } @@ -852,7 +1006,7 @@ } return { ...item, - symbolSize: size > 80 ? 80 : size + symbolSize: size > 80 ? 80 : size, }; }); @@ -886,8 +1040,8 @@ orient: "vertical", data: this.categories.map(function (a) { return a.name; - }) - } + }), + }, ], series: [ { @@ -897,35 +1051,33 @@ symbolSize: 15, data: this.nodeDatas, links: this.links, - categories: [{ - - }], + categories: [{}], roam: true, 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"); @@ -936,6 +1088,7 @@ }); myChart.setOption(option); }, + creatDom(params) { const e = params.event; const div = document.getElementById("customDialog"); @@ -967,10 +1120,11 @@ i += 1; return e["content" + i]; }).join("銆�") ?? "", - biography: data?.BIOGRAPHY ?? "" + biography: data?.BIOGRAPHY ?? "", }; this.detailData = obj; }, + closeDom() { const div = document.getElementById("customDialog"); div.style.display = "none"; @@ -996,7 +1150,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 { @@ -1017,7 +1171,7 @@ division: item.medicalBranchList && item.medicalBranchList.length ? item.medicalBranchList[0].content1 - : "-" + : "-", }; }); this.showPerson = true; @@ -1027,7 +1181,7 @@ spaceTimeArr(id) { // 鍏崇郴鍥剧殑鏁版嵁 uni.navigateTo({ - url: "/pages/character/detail?id=" + id + url: "/pages/character/detail?id=" + id, }); }, // 鑾峰彇鏈濅唬echarts鐨勬暟鎹� @@ -1051,7 +1205,7 @@ this.hotKeyList = indexList.map((item) => { return { id: item, - name: res.object[item] + name: res.object[item], }; }); }); @@ -1066,12 +1220,56 @@ // document.querySelector(".fbox1").style.height = box1Height + "px"; // } // }); - } - } + }, + }, }; </script> <style> +.customDrawer >>> .el-drawer__header { + margin-bottom: 20px; + border-bottom: 1px solid #eee; + padding: 20px; + box-sizing: border-box; +} + +.drawerTips { + margin-bottom: 20px; + color: #666; +} + +.drawerTable { + width: 100%; +} + +.tableTabs { + width: 100%; + display: flex; +} + +.inputItem { + width: 80%; +} + +.drawerPage { + display: flex; + justify-content: flex-end; + padding: 20px 0; + box-sizing: border-box; +} + +.drawerBtn { + display: flex; + justify-content: flex-end; +} + +.drawerContent { + width: 100%; + height: 100%; + padding: 0 20px; + box-sizing: border-box; +} + #relation { width: 100%; height: 100%; -- Gitblit v1.9.1