| | |
| | | <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> |
| | |
| | | </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 |
| | |
| | | text-align: center; |
| | | font-size: 0.2rem; |
| | | color: #666; |
| | | z-index: 99; |
| | | " |
| | | > |
| | | 暂无相关数据 |
| | |
| | | text-align: center; |
| | | font-size: 0.2rem; |
| | | color: #666; |
| | | z-index: 99; |
| | | " |
| | | ></div> |
| | | </div> |
| | |
| | | </div> |
| | | <div class="btn" @click="spaceTimeArr(detailData.id)">查看更多>>></div> |
| | | </div> |
| | | |
| | | <el-drawer |
| | | title="地址列表" |
| | | :visible.sync="drawer" |
| | |
| | | <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> |
| | |
| | | </div> |
| | | <div class="drawerPage"> |
| | | <el-pagination |
| | | class="paging flex" |
| | | background |
| | | @size-change="handleSizeChange" |
| | | @current-change="handleCurrentChange" |
| | | :current-page="currentPage" |
| | |
| | | <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> |
| | |
| | | import { |
| | | getPersonData, |
| | | getHotSearch, |
| | | getPDataStatistics, |
| | | academicSearch, |
| | | getPersonTag, |
| | | getSocialDistinction, |
| | |
| | | export default { |
| | | data() { |
| | | return { |
| | | // 高級搜索表格 |
| | | tableData: [], |
| | | loading: true, |
| | | hotAciveIndex: "", |
| | | currentId: 21682, |
| | |
| | | // 分类 |
| | | categories: [ |
| | | { |
| | | name: "亲属关系" |
| | | name: "亲属关系", |
| | | }, |
| | | { |
| | | name: "师承关系" |
| | | name: "师承关系", |
| | | }, |
| | | { |
| | | name: "文献作品" |
| | | name: "文献作品", |
| | | }, |
| | | { |
| | | name: "社会关系" |
| | | name: "社会关系", |
| | | }, |
| | | { |
| | | name: "活动地" |
| | | name: "活动地", |
| | | }, |
| | | { |
| | | name: "学术流派" |
| | | } |
| | | name: "学术流派", |
| | | }, |
| | | ], |
| | | // 当前人物信息 |
| | | ownInfo: null, |
| | |
| | | currentPage: 1, |
| | | pageSize: 10, |
| | | total: 0, |
| | | multipleSelection: [], |
| | | drawer: false, |
| | | dynastyId: "", |
| | | tableKey: "", |
| | | multipleTableSelection: [], |
| | | // echarts |
| | | infoOfPersons: [], |
| | | infoOfSchools: [], |
| | |
| | | }, |
| | | // 表格选择 |
| | | 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) { |
| | |
| | | return false; |
| | | } |
| | | if (this.gridData.length) { |
| | | this.$refs.multipleTable.clearSelection(); |
| | | this.gridData.forEach((row) => { |
| | | this.$refs.multipleTable.toggleRowSelection(row); |
| | | }); |
| | | this.multipleSelection = this.gridData; |
| | | } |
| | | }, |
| | | // 確認地址 |
| | | onOkAddress() { |
| | | const data = this.multipleSelection.map((item) => { |
| | | const data = this.gridData.map((item) => { |
| | | return { |
| | | ...item, |
| | | name: item.currentName, |
| | |
| | | }; |
| | | }); |
| | | this.formData.actively = data; |
| | | this.drawer = false; |
| | | this.multipleTableSelection = this.formData.actively; |
| | | } |
| | | }, |
| | | // 獲取地址列表 |
| | | getAddressList() { |
| | |
| | | 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 = []; |
| | | } |
| | |
| | | getData() { |
| | | this.loading = true; |
| | | getPersonData(this.currentId).then((res) => { |
| | | console.log("1111111111111", res); |
| | | this.infoOfPersons = res.object.infoOfPersons; |
| | | this.infoOfSchools = res.object.infoOfSchools; |
| | | if (res && res.object) { |
| | | 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(); |
| | | } else { |
| | | this.loading = false; |
| | | this.nodeDatas = []; |
| | | this.links = []; |
| | | } |
| | | // this.nodes = []; |
| | | // this.relationships = []; |
| | | // let kinData = []; |
| | |
| | | this.nodeDatas.push({ |
| | | category: 0, |
| | | id: item.mainId, |
| | | name: p.NAME[0].content1 |
| | | name: p.NAME[0].content1, |
| | | }); |
| | | } |
| | | } |
| | |
| | | this.nodeDatas.push({ |
| | | category: 2, |
| | | id: item.mainId, |
| | | name: item.literatureName |
| | | name: item.literatureName, |
| | | }); |
| | | } |
| | | this.links.push({ |
| | |
| | | this.nodeDatas.push({ |
| | | category: 4, |
| | | id: item.mainId, |
| | | name: item.ancientName |
| | | name: item.ancientName, |
| | | }); |
| | | } |
| | | this.links.push({ |
| | |
| | | this.nodeDatas.push({ |
| | | category: 5, |
| | | id: item.mainId, |
| | | name: s.name[0] |
| | | name: s.name[0], |
| | | }); |
| | | } |
| | | } |
| | |
| | | this.nodeDatas.push({ |
| | | category: 3, |
| | | id: item.mainId, |
| | | name: p.NAME[0].content1 |
| | | name: p.NAME[0].content1, |
| | | }); |
| | | } |
| | | } |
| | |
| | | this.nodeDatas.push({ |
| | | category: 1, |
| | | id: item.mainId, |
| | | name: p.NAME[0].content1 |
| | | name: p.NAME[0].content1, |
| | | }); |
| | | } |
| | | } |
| | |
| | | }, |
| | | force: { |
| | | repulsion: 600, |
| | | edgeLength: 300 |
| | | } |
| | | } |
| | | edgeLength: 300, |
| | | }, |
| | | }, |
| | | ], |
| | | color: [ |
| | | "#5470c6", |
| | |
| | | "#fac858", |
| | | "#ee6666", |
| | | "#ea7ccc", |
| | | "#9a60b4" |
| | | ] |
| | | "#9a60b4", |
| | | ], |
| | | }; |
| | | // 设置点击事件监听 |
| | | myChart.off("click"); |
| | |
| | | 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: |
| | |
| | | i += 1; |
| | | return e["content" + i]; |
| | | }).join("、") ?? "", |
| | | biography: data?.BIOGRAPHY ?? "" |
| | | biography: data?.BIOGRAPHY ?? "", |
| | | }; |
| | | this.detailData = obj; |
| | | } |
| | |
| | | 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: |
| | |
| | | i += 1; |
| | | return e["content" + i]; |
| | | }).join("、") ?? "", |
| | | biography: data?.BIOGRAPHY ?? "" |
| | | biography: data?.BIOGRAPHY ?? "", |
| | | }; |
| | | this.detailData = obj; |
| | | } |
| | |
| | | </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 { |
| | |
| | | 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 { |
| | |
| | | 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%; |