From caeb2c4b5fa88f6fe8799b67c790d8ad8b4d98e8 Mon Sep 17 00:00:00 2001 From: QYF-GitLab1 <1940665526@qq.com> Date: 星期三, 24 七月 2024 16:41:27 +0800 Subject: [PATCH] 1 --- src/pages/academicSchools/index.vue | 253 ++++++++++++++++++++++++++++++++++++++------------ 1 files changed, 193 insertions(+), 60 deletions(-) diff --git a/src/pages/academicSchools/index.vue b/src/pages/academicSchools/index.vue index b77bb62..85406aa 100644 --- a/src/pages/academicSchools/index.vue +++ b/src/pages/academicSchools/index.vue @@ -62,10 +62,11 @@ <div class="selectActivelyBox" @click="selectActively"> <p v-if="formData.actively.length == 0">璇烽�夋嫨娲诲姩鍦�</p> <el-tag + style="margin-right: 5px" v-for="item in formData.actively" - :key="item.id" + :key="item.index" size="small" - closable + type="info" >{{ item.name }}</el-tag > </div> @@ -131,12 +132,68 @@ </el-col> </el-row> <div style="text-align: right"> - <el-button type="primary" size="mini" @click="searchFun" + <el-button + size="mini" + style="background-color: #244a7b; color: #fff" + @click="searchFun" >鎼滅储</el-button > <el-button size="mini" @click="resetForm">閲嶇疆</el-button> </div> </el-form> + <div class="fromTable"> + <el-table + :data="tableData" + class="lightBo" + style="width: 100%" + empty-text="鏆傛棤鎼滅储淇℃伅" + size="small" + :border="true" + > + <el-table-column + prop="id" + label="搴忓彿" + width="70" + ></el-table-column> + <el-table-column prop="personName" width="120" label="濮撳悕"> + <template slot-scope="scope"> + <a + style="cursor: pointer; color: #027edc" + @click="gotoDetail(scope.row.id)" + >{{ scope.row.personName }}</a + > + </template> + </el-table-column> + <el-table-column prop="personAlias" label="鍒悕"></el-table-column> + <el-table-column prop="palce" label="娲诲姩鍦�"></el-table-column> + <el-table-column + prop="birthYear" + label="鍖诲鍒嗙" + width="120" + ></el-table-column> + <el-table-column prop="deathYear" label="浣滃搧"></el-table-column> + <el-table-column + prop="nativePlace" + width="120" + label="浜虹墿鏍囩" + ></el-table-column> + <el-table-column + prop="socialDistinction" + label="绀句細韬唤" + width="120" + ></el-table-column> + <el-table-column + prop="official" + width="120" + label="鏃舵湡" + ></el-table-column> + </el-table> + <div style="text-align: right;padding-top: 20px;"> + <el-button style="width: 120px;background-color: #244a7b; color: #fff" + >纭</el-button + > + </div> + </div> </view> <div v-if="showPerson" class="personDialog"> <i @@ -185,6 +242,7 @@ text-align: center; font-size: 0.2rem; color: #666; + z-index: 99; " > 鏆傛棤鐩稿叧鏁版嵁 @@ -200,6 +258,7 @@ text-align: center; font-size: 0.2rem; color: #666; + z-index: 99; " ></div> </div> @@ -231,7 +290,6 @@ </div> <div class="btn" @click="spaceTimeArr(detailData.id)">鏌ョ湅鏇村>>></div> </div> - <el-drawer title="鍦板潃鍒楄〃" :visible.sync="drawer" @@ -272,14 +330,14 @@ <el-table ref="multipleTable" :data="gridData" - tooltip-effect="dark" style="width: 100%" height="530" @selection-change="handleSelectionChange" + row-key="index" > <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> + <el-table-column width="250" label="骞翠唬鍗�闁�"> <template slot-scope="scope">{{ scope.row.start + "-" + scope.row.end }}</template> @@ -295,6 +353,8 @@ </div> <div class="drawerPage"> <el-pagination + class="paging flex" + background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" @@ -308,7 +368,7 @@ <div class="drawerBtn"> <el-button @click="setCurrent">鍏ㄩ伕鐣跺墠闋�</el-button> <el-button @click="setCurrent('cancle')">鍙栨秷鍏ㄩ伕</el-button> - <el-button @click="onOkAddress" type="primary">纰哄畾</el-button> + <el-button @click="drawer = false" type="primary">纰哄畾</el-button> </div> </div> </el-drawer> @@ -319,7 +379,6 @@ import { getPersonData, getHotSearch, - getPDataStatistics, academicSearch, getPersonTag, getSocialDistinction, @@ -330,6 +389,8 @@ export default { data() { return { + // 楂樼礆鎼滅储琛ㄦ牸 + tableData: [], loading: true, hotAciveIndex: "", currentId: 21682, @@ -343,23 +404,23 @@ // 鍒嗙被 categories: [ { - name: "浜插睘鍏崇郴" + name: "浜插睘鍏崇郴", }, { - name: "甯堟壙鍏崇郴" + name: "甯堟壙鍏崇郴", }, { - name: "鏂囩尞浣滃搧" + name: "鏂囩尞浣滃搧", }, { - name: "绀句細鍏崇郴" + name: "绀句細鍏崇郴", }, { - name: "娲诲姩鍦�" + name: "娲诲姩鍦�", }, { - name: "瀛︽湳娴佹淳" - } + name: "瀛︽湳娴佹淳", + }, ], // 褰撳墠浜虹墿淇℃伅 ownInfo: null, @@ -391,10 +452,10 @@ currentPage: 1, pageSize: 10, total: 0, - multipleSelection: [], drawer: false, dynastyId: "", tableKey: "", + multipleTableSelection: [], // echarts infoOfPersons: [], infoOfSchools: [], @@ -432,7 +493,15 @@ }, // 琛ㄦ牸閫夋嫨 handleSelectionChange(val) { - this.multipleSelection = val; + const data = val.map((item) => { + return { + ...item, + name: item.currentName, + id: item.dynastyId, + }; + }); + this.formData.actively = data; + this.multipleTableSelection = this.formData.actively; }, // 鍏ㄩ伕 setCurrent(str) { @@ -441,23 +510,20 @@ return false; } if (this.gridData.length) { + this.$refs.multipleTable.clearSelection(); this.gridData.forEach((row) => { this.$refs.multipleTable.toggleRowSelection(row); }); - this.multipleSelection = this.gridData; + const data = this.gridData.map((item) => { + return { + ...item, + name: item.currentName, + id: item.dynastyId, + }; + }); + this.formData.actively = data; + this.multipleTableSelection = this.formData.actively; } - }, - // 纰鸿獚鍦板潃 - onOkAddress() { - const data = this.multipleSelection.map((item) => { - return { - ...item, - name: item.currentName, - id: item.dynastyId, - }; - }); - this.formData.actively = data; - this.drawer = false; }, // 鐛插彇鍦板潃鍒楄〃 getAddressList() { @@ -472,8 +538,22 @@ data["keyword"] = this.tableKey; } getPlaceInfo(data).then((res) => { + if (res?.success && res?.npage) { + this.total = res.npage.totalCount; + } if (res?.success && res?.list.length) { - this.gridData = res?.list; + this.gridData = res?.list?.map((item, i) => { + return { + ...item, + index: i, + }; + }); + setTimeout(() => { + this.multipleTableSelection.forEach((row) => { + this.$refs.multipleTable.toggleRowSelection(row); + }); + this.formData.actively = this.multipleTableSelection; + }, 2000); } else { this.gridData = []; } @@ -668,16 +748,19 @@ getData() { this.loading = true; getPersonData(this.currentId).then((res) => { - console.log("1111111111111", res); - this.infoOfPersons = res.object.infoOfPersons; - this.infoOfSchools = res.object.infoOfSchools; - this.nodeDatas = []; - this.links = []; - this.handleData([res.object.personChain], null); - console.log("this.nodeDatas", this.nodeDatas); - console.log("this.links", this.links); - this.loading = false; - this.relation(); + if (res && res.object) { + this.infoOfPersons = res?.object?.infoOfPersons; + this.infoOfSchools = res?.object?.infoOfSchools; + this.nodeDatas = []; + this.links = []; + this.handleData([res.object.personChain], null); + this.loading = false; + this.relation(); + } else { + this.loading = false; + this.nodeDatas = []; + this.links = []; + } // this.nodes = []; // this.relationships = []; // let kinData = []; @@ -835,7 +918,7 @@ this.nodeDatas.push({ category: 0, id: item.mainId, - name: p.NAME[0].content1 + name: p.NAME[0].content1, }); } } @@ -864,7 +947,7 @@ this.nodeDatas.push({ category: 2, id: item.mainId, - name: item.literatureName + name: item.literatureName, }); } this.links.push({ @@ -881,7 +964,7 @@ this.nodeDatas.push({ category: 4, id: item.mainId, - name: item.ancientName + name: item.ancientName, }); } this.links.push({ @@ -902,7 +985,7 @@ this.nodeDatas.push({ category: 5, id: item.mainId, - name: s.name[0] + name: s.name[0], }); } } @@ -924,7 +1007,7 @@ this.nodeDatas.push({ category: 3, id: item.mainId, - name: p.NAME[0].content1 + name: p.NAME[0].content1, }); } } @@ -957,7 +1040,7 @@ this.nodeDatas.push({ category: 1, id: item.mainId, - name: p.NAME[0].content1 + name: p.NAME[0].content1, }); } } @@ -1093,9 +1176,9 @@ }, force: { repulsion: 600, - edgeLength: 300 - } - } + edgeLength: 300, + }, + }, ], color: [ "#5470c6", @@ -1103,8 +1186,8 @@ "#fac858", "#ee6666", "#ea7ccc", - "#9a60b4" - ] + "#9a60b4", + ], }; // 璁剧疆鐐瑰嚮浜嬩欢鐩戝惉 myChart.off("click"); @@ -1126,9 +1209,7 @@ div.style.display = "block"; div.style.left = e.offsetX + 50 + "px"; div.style.top = e.offsetY - 50 + "px"; - const data = this.infoOfPersons?.find( - (i) => i.id == id - ); + const data = this.infoOfPersons?.find((i) => i.id == id); const obj = { id: id, name: @@ -1151,7 +1232,7 @@ i += 1; return e["content" + i]; }).join("銆�") ?? "", - biography: data?.BIOGRAPHY ?? "" + biography: data?.BIOGRAPHY ?? "", }; this.detailData = obj; } @@ -1162,9 +1243,7 @@ div.style.display = "block"; div.style.left = e.offsetX + 50 + "px"; div.style.top = e.offsetY - 50 + "px"; - const data = this.infoOfPersons?.find( - (i) => i.id == id - ); + const data = this.infoOfPersons?.find((i) => i.id == id); const obj = { id: params.data.id, name: @@ -1187,7 +1266,7 @@ i += 1; return e["content" + i]; }).join("銆�") ?? "", - biography: data?.BIOGRAPHY ?? "" + biography: data?.BIOGRAPHY ?? "", }; this.detailData = obj; } @@ -1294,11 +1373,28 @@ </script> <style> +.fromTable { + width: 100%; + padding: 40px 0; + box-sizing: border-box; +} + +.fromTable >>> .el-table thead th.el-table__cell { + background-color: rgb(194 208 217) !important; + color: #333; + font-weight: normal; + font-size: 14px; +} + .customDrawer >>> .el-drawer__header { margin-bottom: 20px; border-bottom: 1px solid #eee; padding: 20px; box-sizing: border-box; +} + +.headerClassBg { + background-color: rgb(95, 127, 168); } .drawerTips { @@ -1310,9 +1406,16 @@ width: 100%; } +.drawerTable >>> .el-table thead th.el-table__cell { + background-color: rgb(231, 236, 239) !important; + color: #333; + font-weight: normal; +} + .tableTabs { width: 100%; display: flex; + margin-bottom: 20px; } .inputItem { @@ -1338,6 +1441,36 @@ box-sizing: border-box; } +/* 鍒嗛〉 */ +.paging ::v-deep .btn-prev, +.paging ::v-deep .btn-next { + border: 0; + height: 30px; +} + +.paging ::v-deep .btn-prev span, +.paging ::v-deep .btn-next span { + font-size: 0.12rem; + height: 0.3rem; + line-height: 0.3rem; + background-color: #fff; + color: #9e9e9e; + text-align: center; + border: 1px solid #9e9e9e; + padding: 0 0.1rem; +} + +.paging ::v-deep .el-pager li { + font-size: 0.1rem; + width: 0.28rem; + height: 0.3rem; + line-height: 0.3rem; + background-color: #fff; + color: #9e9e9e; + text-align: center; + border: 1px solid #9e9e9e; +} + #relation { width: 100%; height: 100%; -- Gitblit v1.9.1