From d5f572496c5fb12fec2fe346b847bf58331299c9 Mon Sep 17 00:00:00 2001 From: YM <479443481@qq.com> Date: 星期三, 17 七月 2024 15:56:51 +0800 Subject: [PATCH] 1 --- src/pages/character/detail.vue | 1378 +++++++++++++++++++++++++++++++++++++++-------------------- 1 files changed, 909 insertions(+), 469 deletions(-) diff --git a/src/pages/character/detail.vue b/src/pages/character/detail.vue index 3fa9ea9..1ba522f 100644 --- a/src/pages/character/detail.vue +++ b/src/pages/character/detail.vue @@ -1,15 +1,16 @@ <template> <view class="relative"> - <headNav :idIndex="1" text="涓尰浜虹墿鏁版嵁搴�" /> + <headNav :idIndex="1 + ''" text="鍘嗕唬浜虹墿" /> <view class="Midde flex"> <el-button class="MiddeBack flex flex-center" @click="goBack" >杩斿洖</el-button > <view style="width: 70%" class="flex flex-center flex-column"> - <view style="font-weight: bold; font-size: 0.2rem">鏉庢椂鐝�</view> + <view style="font-weight: bold; font-size: 0.2rem">{{ + detailInfo.NAME + }}</view> <ul class="flex" style="line-height: 1.2; margin: 0.15rem 0"> <li - v-for="item in 4" style=" background-color: #fff; padding: 0 0.08rem; @@ -19,26 +20,82 @@ text-align: center; margin-right: 0.15rem; " + @click="openFileClick(1)" > - VSDS + RDF + </li> + <li + style=" + background-color: #fff; + padding: 0 0.08rem; + border: 0.01rem solid #000; + border-radius: 0.1rem; + font-size: 0.12rem; + text-align: center; + margin-right: 0.15rem; + cursor: pointer; + " + @click="openFileClick(2)" + > + NT + </li> + <li + style=" + background-color: #fff; + padding: 0 0.08rem; + border: 0.01rem solid #000; + border-radius: 0.1rem; + font-size: 0.12rem; + text-align: center; + margin-right: 0.15rem; + cursor: pointer; + " + @click="openFileClick(3)" + > + XML + </li> + <li + style=" + background-color: #fff; + padding: 0 0.08rem; + border: 0.01rem solid #000; + border-radius: 0.1rem; + font-size: 0.12rem; + text-align: center; + margin-right: 0.15rem; + cursor: pointer; + " + @click="openFileClick(4)" + > + JSON </li> </ul> <view + id="copyBox" class="fz font-family" + :title="biogData.length ? biogData[0].content : ''" style=" - font-size: 0.13rem; + font-size: 0.14rem; font-weight: normal; - line-height: 0.2rem; + line-height: 2; letter-spacing: 0.03rem; + cursor: pointer; + display: -webkit-box; + -webkit-box-orient: vertical; + -webkit-line-clamp: 4; + overflow: hidden; " > - 鏉庢椂鐝�(1518骞�-1593骞�)锛屽瓧: - 涓滅挧锛屾椂浜鸿皳涔�:鏉庝笢鐠с�傚彿婵掓箹锛屾櫄骞磋嚜鍙锋繏婀栧北浜猴紝婀栧寳钖窞(浠婃箹鍖楃渷榛勫唸甯傝柂鏄ュ幙钖窞闀�)浜猴紝姹夋棌锛岀敓浜庢槑姝﹀畻姝e痉鍗佷笁骞�(鍏厓1518骞�)锛屽崚浜庣瀹椾竾鍘嗕簩鍗佷簩骞�(鍏厓1593骞�)銆傛槸涓浗鏄庝唬涓庝竾瀵嗘枊榻愬悕鐨勫尰瀛﹀銆佽嵂鐗╁瀹躲�佸崥鐗╁瀹躲�佽憲杩板銆傛潕鏃剁弽瀵归亾瀹跺尰瀛︾殑缁ф壙鏄鏂归潰鐨勶紝鏇惧弬鑰冨巻浠f湁鍏冲尰鑽強鍏跺鏈功绫嶅叓鐧句綑绉嶏紝缁撳悎鑷韩缁忛獙鍜岃皟鏌ョ爺绌讹紝鍘嗘椂27骞寸紪鎴愩�婃湰鑽夌翰鐩�嬩竴涔︼紝鏄垜鍥藉彜浠h嵂鐗╁鐨勬�荤粨鎬у法钁楋紝鍦ㄥ浗鍐呭鍧囨湁寰堥珮鐨勮瘎浠凤紝宸叉湁鍑犵鏂囧瓧鐨勮瘧鏈垨鑺傝瘧鏈紝鍏惰憲鏈夈�婃繏婀栬剦瀛︺�� + {{ biogData.length ? biogData[0].content : "-" }} </view> <view class="flex" style="width: 100%; margin: 0.25rem 0 0.15rem 0"> <view> <!-- <el-button style="padding: 10rpx;" size="mini" icon="el-icon-folder-add">鏀惰棌</el-button> --> - <el-button style="padding: 0.05rem 0.085rem" class="yinyong flex"> + <el-button + style="padding: 0.05rem 0.085rem" + class="yinyong flex" + @click="copyText" + > <img src="@/static/image/yinyong.png" alt="" />寮曠敤</el-button > </view> @@ -51,9 +108,9 @@ </view> <view style="width: 5%"></view> </view> - <el-row style="padding: 0 1.2rem 0; padding-top: 0.24rem"> + <div style="padding: 0 1.2rem 0; padding-top: 0.24rem; display: flex"> <!-- 宸︿晶 --> - <el-col + <div :span="5" class="BoxLeft" style="padding-right: 0.2rem; width: 2.8rem" @@ -80,7 +137,7 @@ <img src="@/static/image/fangda.png" @click="fangdaClick(1)" - style="width: 0.18rem; height: 0.18rem" + style="width: 0.18rem; height: 0.18rem; cursor: pointer" alt="" /> </div> @@ -101,16 +158,28 @@ <span>鏃剁┖鍦板浘</span> <!-- <el-button icon="el-icon-rank" style="float: right; padding: 3px 0" type="text"></el-button> --> <img + v-if="markerList && markerList.length > 0" src="@/static/image/fangda.png" @click="fangdaClick(2)" - style="width: 0.18rem; height: 0.18rem" - alt="" + style="width: 0.18rem; height: 0.18rem; cursor: pointer" /> </div> <view id="spaceTime" style="height: 1.51rem; width: 100%; position: relative" - ></view> + > + <p + v-if="markerList && markerList.length == 0" + style=" + margin-top: 0.5rem; + color: #666; + text-align: center; + font-size: 12px; + " + > + 鏆傛棤鏁版嵁 + </p> + </view> </el-card> <el-card style="width: 100%; height: 2.06rem"> <div @@ -127,14 +196,30 @@ class="font-family" style="height: 300rpx; font-size: 0.12rem; line-height: 0.3rem" > - <li>1.銆婃槑鍙猜峰嵎浜岀櫨涔濆崄涔澛峰垪浣滃搧. p52</li> - <li>2.銆婅繘(鏈崏绾茬洰)鐤忋�� p52</li> + <li + style=" + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + " + v-for="(item, index) in sourceDataList" + :key="index" + :title="item" + > + {{ index + 1 }}.{{ item }} + </li> + <div + v-if="sourceDataList.length == 0" + style="color: #666; text-align: center; font-size: 16px" + > + 鏆傛棤鏁版嵁 + </div> </ul> </el-card> </div> - </el-col> + </div> <!-- 鍙充晶 --> - <el-col :span="18" class="BoxRight"> + <div :span="18" class="BoxRight"> <div class="grid-content bg-purple-dark" style="width: 100%"> <el-card class="box-card" style="padding: 0"> <div @@ -154,22 +239,42 @@ class="box-card" style="min-height: 1.91rem; margin: 0.2rem 0" > - <el-tabs ref="tabs" v-model="activeName" @tab-click="handleClick"> + <el-tabs ref="tabs" v-model="activeName"> <el-tab-pane label="浠h〃钁椾綔" data-id="1" name="representative"> - <Table1 :data="tableData" :columns="tableColumns" /> + <Table1 + :data="tableData1" + :columns="tableColumns1" + :height="400" + /> </el-tab-pane> <el-tab-pane label="浜插睘鍏崇郴" data-id="2" name="family "> - 浜插睘鍏崇郴 + <Table1 + :data="tableData2" + :columns="tableColumns2" + :height="400" + /> </el-tab-pane> - <el-tab-pane label="甯堟壙鍏崇郴" data-id="3" name="mentoring " - >甯堟壙鍏崇郴</el-tab-pane - > - <el-tab-pane label="绀句細鍏崇郴" data-id="4" name="society" - >绀句細鍏崇郴</el-tab-pane - > - <el-tab-pane label="娲诲姩骞磋氨" data-id="5" name="activity" - >娲诲姩骞磋氨</el-tab-pane - > + <el-tab-pane label="甯堟壙鍏崇郴" data-id="3" name="mentoring "> + <Table1 + :data="tableData3" + :columns="tableColumns2" + :height="400" + /> + </el-tab-pane> + <el-tab-pane label="绀句細鍏崇郴" data-id="4" name="society"> + <Table1 + :data="tableData4" + :columns="tableColumns2" + :height="400" + /> + </el-tab-pane> + <el-tab-pane label="娲诲姩骞磋氨" data-id="5" name="activity"> + <Table1 + :data="tableData5" + :columns="tableColumns3" + :height="400" + /> + </el-tab-pane> </el-tabs> </el-card> <el-card style="margin-bottom: 0.2rem"> @@ -183,14 +288,30 @@ > <span>鐩稿叧闄勮〃/鍥惧儚</span> </div> - <view class="flex"> - <el-image - v-for="item in 4" - :key="item" - style="width: 2.05rem; height: 1.4rem" - src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg" - fit="fill" - ></el-image> + <view> + <div style="overflow: auto;display: flex;"> + <div v-for="item in imageList" :key="item" :title="item.name"> + <el-image + :title="item.name" + :alt="item.name" + style=" + width: 2.05rem; + height: 2.4rem; + margin-right: 0.2rem; + margin-bottom: 0.1rem; + " + :src="item.src" + :preview-src-list="imageList.map((item) => item.src)" + fit="contain" + ></el-image> + </div> + </div> + <div + v-if="imageList.length == 0" + style="color: #666; text-align: center; font-size: 16px" + > + 鏆傛棤鏁版嵁 + </div> </view> </el-card> <el-card class="box-card"> @@ -202,35 +323,41 @@ padding-bottom: 0.1rem; " > - <span>鐩稿叧闄勮〃/鍥惧儚</span> + <span>鐜颁唬鐮旂┒</span> </div> - <ul class="font-family" style="font-size: 0.13rem; line-height: 2"> - <li> - [1|鍒樼倻,璋㈣搲,寮犵,绛�.鍚戜汉鏂囩爺绌剁殑鍥藉鏁版嵁鍩虹璁炬柦寤鸿[J|.涓浗鍥句功棣嗗鎶�,2016,42(5):29-39. + <ul class="fileul" style="font-size: 0.13rem; line-height: 2"> + <li + style="cursor: pointer" + v-for="(item, index) in personResearchList" + :key="index" + @click="toLink(item)" + > + {{ "[" + Number(index + 1) + "]" + item.achievementName }} </li> - <li> - [2|鍛ㄦ櫒.鍥介檯鏁板瓧浜烘枃鐮旂┒鐗瑰緛涓庣煡璇嗙粨鏋剕J鍥句功棣嗚鍧�2017.37(4):1-8. - </li> - <li> - [3]鍌呭痉鍗�,浜庣繝鑹�,鏉庢槬鍗�,鍏充簬鍒涘缓鈥�20 - 涓栫邯涓浗浜虹墿浼犺璧勬枡鍏ㄦ枃鏁版嵁搴撴不鐨勬瀯鎯砙宸�,涓浗鑰呭紩,2009,714):24-26. - </li> - <li> - [4|浜庣繝鑹�,鍌呭痉鍗�,鏉庢槬鍗�,鍏充簬鈥�20涓栫邯涓浗浜虹墿浼犺璧勬枡鍏ㄦ枃鏁版嵁搴撴不鐨勮繘灞曚笌鍥版儜[J1.涓浗甯稿紩,2012.10111:20-22 - </li> - <li> - [5]璐炬銆傘�婃箹鍗楄繎浠d汉鐗╂暟鎹巼銆嬭祫婧愭敹褰曡寖鍥寸爺绌秥J娌冲崡鍥句功棣嗗鍒�,2015,35(7):126.127.140. - </li> + <div + v-if="!personResearchList || personResearchList.length == 0" + style="color: #666; text-align: center; font-size: 16px" + > + 鏆傛棤鏁版嵁 + </div> </ul> </el-card> </div> - </el-col> - </el-row> + </div> + </div> <!-- 杩斿洖椤堕儴 --> - <el-col style="position: absolute; bottom: 1rem; left: 1.2rem"> + <el-col + style=" + position: absolute; + bottom: 1rem; + left: 1.2rem; + width: 0.6rem; + height: 0.6rem; + " + > <el-button - style="width: 0.5rem; height: 0.5rem; font-size: 0.3rem" + style="font-size: 0.3rem" icon="el-icon-top" circle @click="scrollToTop" @@ -239,8 +366,13 @@ <!-- 涓汉灏忎紶 --> <el-dialog :visible.sync="isProfile" :modal-append-to-body="false"> <view class="ProfileNav flex flex-center"> 涓汉灏忎紶 </view> - <view style="padding: 0.44rem 0.3rem; min-height: 7.32rem"> + <view + style="padding: 0.44rem 0.3rem; min-height: 7.32rem" + v-if="biogData.length > 0" + > <view + v-for="(item, index) in biogData" + :key="index" style=" margin-bottom: 0.2rem; background-color: #f0f0f0; @@ -251,16 +383,19 @@ " > <view style="color: #2c2c2c"> - 钑欏睍涓佷笐鍚岄噷鏃ュ博棰濆簭鍏堣�冩湀姹犵縼钁椼�婂洓褰吀鏄庛�嬪叓鍗凤紝鐨嗙簿鎸囧ゥ瀹わ紝鑼傜妧鏈兘鐤�狅紝鐝嶅洜鎾补鎯宠彍锛屽兊鎾版鍞愶紝浠ヤ究鏅虹潧锛屾湇鎸囧崡銆備笘涔嬮浄鐥呴洦瀹讹紝鍜镐互鏈嶇剦棣栧姟锛屼笉鐭ユ淳涔冨洓鑳戒箣鏈紝璋撲箣宸ц�呴洦銆備笂澹鑸嶅叾鍏紝闈炲洓涓嶅彲銆� + {{ item.content }} </view> <view class="flex"> <view></view> <view style="font-weight: 700; color: #2c2c2c" - >鈥斺�斻�婂鍏湇鑰冦�婸 3</view + >鈥斺�攞{ item.bookName }}</view > </view> </view> </view> + <div v-else> + <el-empty description="鏆傛棤鏁版嵁"></el-empty> + </div> </el-dialog> </view> </template> @@ -271,17 +406,27 @@ import { loadBMap } from "@/static/map.js"; import Table1 from "@/components/table1/table1.vue"; import { + getFuzzySearch, getPersonInfo, + getRelationTypeTreeList, + getWebBasic, + getDynastyAll, + getIntroduction, getSource, getPersonImages, getPersonBiog, getPersonWritings, getPersonRelationAtSchool, - getSpaceTime + getSpaceTime, + getDynastyData, } from "@/api/index.js"; +import { getImg } from "@/static/tool.js"; +import L from "leaflet"; +import "leaflet.chinatmsproviders"; + export default { components: { - Table1 + Table1, }, data() { return { @@ -290,107 +435,84 @@ detailInfo: {}, sourceDataList: [], imageList: [], - biogData: "", - writingsList: [], - relationshipData: [], + biogData: [], // ------- // 灏忎紶 isProfile: false, // 鍏崇郴鍥捐氨 activeName: "representative", // 鍩虹淇℃伅 - tableArr: [ - { - list: [ - { - name: "鍒悕", - value: "鏉庝笢鐠с�佽嵂鍦c�佹潕涓変竷" - }, - { - name: "瀛�", - value: "涓滅挧" - }, - { - name: "鍙�", - value: "棰戞箹灞变汉" - }, - { - name: "鎵�澶勬椂鏈�", - value: "鏄庢湞" - }, - { - name: "姘戞棌", - value: "166g" - } - ] - }, - { - list: [ - { - name: "绫嶈疮", - value: "榛勫窞搴滆柂宸� (浠婃箹鍖楃渷钖槬鍘�)" - }, - { - name: "鎬у埆", - value: "鐢�" - }, - { - name: "鑱屽畼", - value: "澶尰闄㈠垽" - }, - { - name: "娴佹淳", - value: "鍖荤粡瀛︽淳" - }, - { - name: "瀛︽湳鐗圭偣", - value: "鑰冨彜璇佷粖銆佺┓绌剁墿鐞�" - } - ] - } - ], + tableArr: [], // 浠h〃钁椾綔 - tableColumns: [ + tableColumns1: [ { - prop: "worksName", - label: "浣滃搧鍚�" + prop: "a", + label: "姝d功鍚�", }, { - prop: "works", - label: "浣滃搧" + prop: "e", + label: "浣滆��", }, { - prop: "literature", - label: "鏂囩尞鍏崇郴" + prop: "b", + label: "钁椾綔骞�", }, { - prop: "epoch", - label: "钁椾綔鏃朵唬" + prop: "c", + label: "钁椾綔鏂瑰紡", }, { - prop: "category", - label: "绫诲埆" - } - // { type: 'button', action: 'edit', label: 'Edit' } + prop: "d", + label: "鎬荤洰鍒嗙被", + }, ], - tableData: [ + tableColumns2: [ { - worksName: "鏈崏绾茬洰", - works: "鏉庝簩鐗�", - literature: "浣滆��", - epoch: "鐜颁唬", - category: "涓尰瀛�", - id: 1 + prop: "a", + label: "鍏崇郴浜�", }, { - worksName: "鏈崏绾茬洰", - works: "鏉庝簩鐗�", - literature: "浣滆��", - epoch: "鐜颁唬", - category: "涓尰瀛�", - id: 1 - } - ] + prop: "b", + label: "鍏崇郴绫诲瀷", + }, + { + prop: "c", + label: "鑰冩嵁", + }, + { + prop: "d", + width: 300, + showOverflowTooltip: true, + label: "鍑哄", + }, + ], + tableColumns3: [ + { + prop: "a", + label: "娲诲姩鏃堕棿鍖洪棿", + }, + { + prop: "b", + label: "娲诲姩鍚嶇О", + }, + { + prop: "c", + label: "娲诲姩鍦扮偣", + }, + { + prop: "d", + label: "娲诲姩鎻忚堪", + }, + ], + tableData1: [], + tableData2: [], + tableData3: [], + tableData4: [], + tableData5: [], + nodes: [], + relationships: [], + personResearchList: [], + markerList: [], }; }, onLoad(options) { @@ -398,102 +520,434 @@ }, mounted() { // 鑾峰彇浜虹墿璇︽儏 - // this.getData(); + this.getData(); // 鑾峰彇鏉ユ簮 - // this.getSourceData(); + this.getSourceData(); // 鑾峰彇鐩稿叧鍥捐〃 - // this.getImages(); + this.getImages(); // 鑾峰彇涓汉浜嬭抗 - // this.getBiog(); + this.getBiog(); // 鑾峰彇钁椾綔 - // this.getWritings(); + this.getWritings(); // 鑾峰彇浜虹墿鍏崇郴 - // this.getRelationship(); + this.getRelationship(); // 鑾峰彇鏃剁┖鍦板浘 - // this.getMapInfo(); - // 鍏崇郴鍥捐氨 - this.relation(); - // 鏃剁┖鍦板浘 - loadBMap("5USVDAhhS4ssz44HLq3gNPZai7naXf4Q").then(() => { - this.spaceTime(); - }); - this.$nextTick(() => { - // 鑾峰彇绗竴涓�夐」鍗$殑 DOM 鍏冪礌 - const firstTab = this.$refs.tabs.$el.querySelector( - ".el-tabs__active-bar" - ); - firstTab.style.transform = "translateX(" + "-.2rem" + ")"; - }); + this.getMapInfo(); + + // this.$nextTick(() => { + // // 鑾峰彇绗竴涓�夐」鍗$殑 DOM 鍏冪礌 + // const firstTab = this.$refs.tabs.$el.querySelector( + // ".el-tabs__active-bar" + // ); + // firstTab.style.transform = "translateX(" + "-.2rem" + ")"; + // }); // 鐩戝惉绐楀彛澶у皬鍙樺寲 window.addEventListener("resize", this.relation); }, methods: { - getData() { - getPersonInfo({ - id: this.detailId - }).then((res) => { - console.log(res); - this.detailInfo = res; + copyText() { + const textToCopy = + this.biogData[0].content + "\n鏉ユ簮锛氫腑鍖诲尰瀛︿汉鐗╃煡璇嗗簱"; + const textarea = document.createElement("textarea"); + textarea.value = textToCopy; + document.body.appendChild(textarea); + textarea.select(); + document.execCommand("copy"); + document.body.removeChild(textarea); + this.$message({ + message: "澶嶅埗鎴愬姛锛�", + type: "success", }); + }, + toLink(item) { + if (item.url) { + window.open(item.url); + } + if (item.filePath) { + window.open(getImg(item.filePath)); + } + }, + getData() { + // 鍩烘湰淇℃伅 + getPersonInfo({ + id: this.detailId, + type: "PERSON_BASIC", + }).then((res) => { + const obj = {}; + if ( + res.object && + res.object.personFieldList && + res.object.personFieldList.length + ) { + for (let i = 0; i < res.object.personFieldList.length; i++) { + const fieldItem = res.object.personFieldList[i]; + obj[fieldItem.fieldName] = fieldItem.content2 + ? fieldItem.content2 + : fieldItem.content1; + } + } + this.detailInfo = obj; + getDynastyAll().then((dynastyData) => { + getWebBasic({ + personId: this.detailId, + }).then((res) => { + const obj = res.object; + if (obj.school) { + getIntroduction(Number(obj.school)).then((sres) => { + this.handleData(obj, sres, dynastyData.list); + }); + } else { + this.handleData(obj, null, dynastyData.list); + } + }); + }); + // 鍏崇郴鍥捐氨 + this.getMappingData(); + }); + + //鐜颁唬鐮旂┒ + getPersonInfo({ + id: this.detailId, + type: "PERSON_RESEARCH", + }).then((res) => { + this.personResearchList = res.object.personResearchList; + }); + + // 娲诲姩骞磋氨 + getPersonInfo({ + id: this.detailId, + type: "PERSON_SPACE_TIME", + }).then((res) => { + if (res.object.personSpaceTimeList) { + this.tableData5 = res.object.personSpaceTimeList.map((item) => { + return { + a: item.time, + b: item.activityName, + c: item.activityAddrOld, + d: item.desc, + }; + }); + } + }); + }, + handleData(obj, sres, dynastyData) { + this.tableArr = [ + { + list: [ + { + name: "濮撳悕", + value: obj.name || "-", + }, + { + name: "瀛�", + value: obj.zi || "-", + }, + { + name: "鍙�", + value: obj.hao || "-", + }, + { + name: "鎵�澶勬椂鏈�", + value: + dynastyData.find((item) => item.dynastyId == obj.dynastyId) + .name || "-", + valueClick: () => { + uni.navigateTo({ + url: + "/pages/knowledgeBase/knowledgeBase?dynasty=" + + obj.dynastyId, + }); + }, + }, + { + name: "姘戞棌", + value: obj.ethnic || "-", + }, + ], + }, + { + list: [ + { + name: "绫嶈疮", + value: obj.native || "-", + }, + { + name: "鎬у埆", + value: obj.gender || "-", + }, + { + name: "鑱屽畼", + value: obj.official || "-", + valueClick: () => { + uni.navigateTo({ + url: + "/pages/knowledgeBase/knowledgeBase?isAdvancedSearch=1&official=" + + obj.official, + }); + }, + }, + { + name: "娴佹淳", + value: + sres && + sres.object && + sres.object.school_NAME && + sres.object.school_NAME.length + ? sres.object.school_NAME[0].content + : "-", + }, + { + name: "瀛︽湳鐗圭偣", + value: obj.features || "-", + }, + ], + }, + ]; }, getSourceData() { getSource({ - personId: this.detailId + personId: this.detailId, }).then((res) => { - console.log(res); - this.sourceDataList = res; + this.sourceDataList = res.list; }); }, getImages() { getPersonImages({ - personId: this.detailId + personId: this.detailId, }).then((res) => { - console.log(res); - this.imageList = res; + this.imageList = res.list.map((item) => { + return { + src: getImg(item.filePath), + name: item.desc, + }; + }); }); }, getBiog() { getPersonBiog({ - personId: this.detailId + personId: this.detailId, }).then((res) => { - console.log(res); - this.biogData = res; + this.biogData = res.list.map((item) => { + return { + content: item.content1, + bookName: + "銆�" + + item.bookName + + "銆� " + + (item.pageNo ? "P " + item.pageNo : ""), // 杩欓噷鍙湁bookid鏃犳硶鍖归厤鍒颁功鍚� + }; + }); + }); + }, + getBiog() { + getPersonBiog({ + personId: this.detailId, + }).then((res) => { + this.biogData = res.list.map((item) => { + return { + content: item.content1, + bookName: + "銆�" + + item.bookName + + "銆� " + + (item.pageNo ? "P " + item.pageNo : ""), // 杩欓噷鍙湁bookid鏃犳硶鍖归厤鍒颁功鍚� + }; + }); }); }, getWritings() { getPersonWritings({ - personId: this.detailId + personId: this.detailId, }).then((res) => { - console.log(res); - this.writingsList = res; + this.tableData1 = res.list.map((item) => { + return { + a: item.name, + b: item.dynasty, + c: item.writeWay, + d: item.classify, + e: this.detailInfo.NAME, + }; + }); }); }, getRelationship() { - getPersonRelationAtSchool({ - personId: this.detailId + getPersonInfo({ + id: this.detailId, + type: "PERSON_RELATIONS", }).then((res) => { - console.log(res); - this.relationshipData = res; + this.tableData4; + if (res.object.personRelationMap.kin.length) { + this.tableData2 = res.object.personRelationMap.kin.map((f) => { + return { + a: f.nodeName, + b: f.relationTypeName, + c: f.textualResearch, + d: + res.object.bookList && + res.object.bookList.find((citem) => citem.id == f.bookId) + ? "銆�" + + res.object.bookList.find((citem) => citem.id == f.bookId) + .name + + "銆� P" + + f.pageNo + : "", + }; + }); + } + if (res.object.personRelationMap.teacherStudent.length) { + this.tableData3 = res.object.personRelationMap.teacherStudent.map( + (f) => { + return { + a: f.nodeName, + b: f.relationTypeName, + c: f.textualResearch, + d: + res.object.bookList && + res.object.bookList.find((citem) => citem.id == f.bookId) + ? "銆�" + + res.object.bookList.find((citem) => citem.id == f.bookId) + .name + + "銆� P" + + f.pageNo + : "", + }; + } + ); + } + if (res.object.personRelationMap.social.length) { + this.tableData4 = res.object.personRelationMap.social.map((f) => { + return { + a: f.nodeName, + b: f.relationTypeName, + c: f.textualResearch, + d: + res.object.bookList && + res.object.bookList.find((citem) => citem.id == f.bookId) + ? "銆�" + + res.object.bookList.find((citem) => citem.id == f.bookId) + .name + + "銆� P" + + f.pageNo + : "", + }; + }); + } + }); + }, + getMappingData() { + getFuzzySearch({ + personId: this.detailId, + }).then((res) => { + this.nodes = []; + this.relationships = []; + if (res.success && res.list) { + res.list.forEach((item, index) => { + let exists1 = this.nodes.some( + (node) => node.id === item.identifier1 && node.name === item.name1 + ); + let exists2 = this.nodes.some( + (node) => node.id === item.identifier2 && node.name === item.name2 + ); + // 璇佹槑涓嶅瓨鍦� + if (item.name1 && exists1 !== true) { + this.nodes.push({ + name: item.name1, + id: item.identifier1, + }); + } + if (item.name2 && exists2 !== true) { + this.nodes.push({ + name: item.name2, + id: item.identifier2, + }); + } + let obj = { + source: item.name1, + target: item.name2, + relation: item.relationName || "", // 濡傛灉瀛樺湪 relationName 瀛楁鍒欎娇鐢紝鍚﹀垯涓虹┖瀛楃涓� + }; + this.relationships.push(obj); + }); + } + this.relation(); }); }, getMapInfo() { getSpaceTime({ - personId: this.detailId + personId: this.detailId, }).then((res) => { - console.log(res); + if (res.list && res.list.length) { + const data = []; + for (let i = 0; i < res.list.length; i++) { + const item = res.list[i]; + if (item.xcoord && item.ycoord) { + const obj = { + name: item.activityName, + value: [item.xcoord, item.ycoord], + }; + data.push(obj); + } + } + this.markerList = data; + // 鏃剁┖鍦板浘 + // 杩欓噷鍙彇浜嗙涓�鏉★紝闇�瑕佸叏閮ㄦ暟鎹� + if (data && data.length) { + this.initMap(data); + } + } + + // loadBMap("1NJdwrI1CfT6lrykVhDkmWgsO6O2bjQK").then(() => { + // this.spaceTime(data); + // }); }); }, - + initMap(markerList) { + var map = L.map("spaceTime", { + preferCanvas: true, + attributionControl: false, + }).setView([markerList[0].value[1], markerList[0].value[0]], 13); + L.tileLayer + .chinaProvider("TianDiTu.Normal.Map", { + key: "76bc34ead7e30e663a4eded8aeaf5860", + maxZoom: 18, + minZoom: 3, + }) + .addTo(map); + L.tileLayer + .chinaProvider("TianDiTu.Normal.Annotion", { + key: "76bc34ead7e30e663a4eded8aeaf5860", + maxZoom: 18, + minZoom: 3, + }) + .addTo(map); + let icon = L.divIcon({ + html: "<div class='map-circle-name ripple'></div>", + iconSize: [80, 80], + className: "map-circle", + }); + this.map = map; + const temp_mark = L.marker([markerList.value[1], markerList.value[0]], { + icon: icon, + }).addTo(map); + if (markerList.length) { + for (let i = 0; i < markerList.length; i++) { + const item = markerList[i]; + const temp_mark = L.marker([item.value[1], item.value[0]], { + icon: icon, + }).addTo(map); + } + } + }, // 鏀惧ぇ鍦板浘璺宠浆 fangdaClick(index) { if (index == 1) { uni.navigateTo({ - url: "/pages/character/index" + url: "/pages/character/index?keyword=" + this.detailInfo.NAME, }); } else if (index == 2) { uni.navigateTo({ - url: "/pages/characterMap/characterMap" + url: "/pages/characterMap/characterMap?id=" + this.detailId, }); } }, @@ -509,110 +963,110 @@ scrollToTop() { window.scrollTo({ top: 0, - behavior: "smooth" // 浣跨敤骞虫粦婊氬姩 + behavior: "smooth", // 浣跨敤骞虫粦婊氬姩 }); }, - handleClick(tab) { - let index = tab.$attrs["data-id"] - 1; - this.$nextTick(() => { - let firstTab = this.$refs.tabs.$el.querySelector( - ".el-tabs__active-bar" - ); - if (index == 0) { - firstTab.style.transform = "translateX(-" + 0.2 + "rem)"; - } else if (index == 1) { - firstTab.style.transform = "translateX(" + 0.85 * index + "rem)"; - } else if (index == 2) { - firstTab.style.transform = "translateX(" + 0.93 * index + "rem)"; - } else if (index == 3) { - firstTab.style.transform = "translateX(" + 0.95 * index + "rem)"; - } else if (index == 4) { - firstTab.style.transform = "translateX(" + 0.97 * index + "rem)"; - } else { - let firstTab = this.$refs.tabs.$el.querySelector( - ".el-tabs__active-bar" - ); - firstTab.style.transform = "translateX(" + "-.2" + "rem)"; - } - }); + openFileClick(index) { + let obj = { + id: this.detailId, + type: "Person", + }; + switch (index) { + case 1: + obj.outputType = "RDF"; + break; + case 2: + obj.outputType = "NT"; + break; + case 3: + obj.outputType = "XML"; + break; + case 4: + obj.outputType = "JSON"; + break; + } + let queryString = Object.keys(obj) + .map( + (key) => `${encodeURIComponent(key)}=${encodeURIComponent(obj[key])}` + ) + .join("&"); + window.open(`#/pages/fileDetail/index?${queryString}`); }, // 鍏崇郴鍥捐氨 relation() { var chartDom = document.getElementById("relation"); var myChart = echarts.init(chartDom); - // 鍋囪鎮ㄦ湁鑺傜偣鍚嶇О鍜屽畠浠箣闂寸殑鍏崇郴鏁版嵁 - var nodes = ["鏉庢椂鐝�", "鎴愬氨", "浼犳壙", "浜插弸", "钁椾綔"]; - var relationships = [ - { - source: "鏉庢椂鐝�", - target: "鎴愬氨" - }, - { - source: "鏉庢椂鐝�", - target: "浼犳壙" - }, - { - source: "鏉庢椂鐝�", - target: "浜插弸" - }, - { - source: "鏉庢椂鐝�", - target: "钁椾綔" - } - // 鍏朵粬鍏崇郴... - ]; + var nodes = this.nodes; + var relationships = this.relationships; - // 鏍规嵁鍏崇郴鏁版嵁鐢熸垚杩炴帴绾� - var links = []; - relationships.forEach(function (relationship) { - var sourceIndex = nodes.indexOf(relationship.source); - var targetIndex = nodes.indexOf(relationship.target); - if (sourceIndex !== -1 && targetIndex !== -1) { - links.push({ - source: sourceIndex, - target: targetIndex - }); - } - }); let FontSize = 12; // 瀛椾綋澶у皬 let BorderWidth = 2; // 杈规澶у皬 - let SymbolSize = 80; // 灏哄璺濈 - // 涓嶅悓灏哄涓嬩慨鏀筫charts鐨勫瓧浣� - if (window.innerWidth > 2560 && window.innerWidth <= 3840) { - FontSize = 28; - BorderWidth = 5; - SymbolSize = 100; - } else if (window.innerWidth > 1920 && window.innerWidth <= 2560) { - FontSize = 28; - BorderWidth = 4; - SymbolSize = 90; - } else if (window.innerWidth >= 1366 && window.innerWidth <= 1920) { - FontSize = 18; - BorderWidth = 4; - SymbolSize = 70; - } + let SymbolSize = 50; // 灏哄璺濈 + let Distance = 10; + // 鏍规嵁鍏崇郴鏁版嵁鐢熸垚杩炴帴绾� + var links = []; + relationships.forEach((relationship, i) => { + var sourceIndex = nodes.findIndex( + (node) => node.name === relationship.source + ); + var targetIndex = nodes.findIndex( + (node) => node.name === relationship.target + ); + if (relationship.relation) { + if (sourceIndex !== -1 && targetIndex !== -1) { + links.push({ + source: sourceIndex, + target: targetIndex, + label: { + show: true, + formatter: function (params) { + return relationship.relation; + }, // 璁剧疆鍏崇郴鏍囩鍐呭涓�"Child-Parent" + color: "#2C2C2C", + fontSize: FontSize - 2, + backgroundColor: "rgba(255, 255, 255, 1)", + padding: [3, 8], + borderRadius: 30, + position: "middle", // 璁剧疆鏍囩鏂囨湰鍦ㄧ嚎鐨勪腑闂翠綅缃笂灞呬腑鏄剧ず + // bottom: -(FontSize+10), + z: 10, // 璁剧疆鏍囩鐨剒杞撮珮搴︼紝浣垮叾姣旇繛鎺ョ嚎鏇撮珮 + distance: -(Distance + 1), // 灏嗘爣绛炬斁缃湪杩炴帴绾夸笂 + }, + }); + } + } + }); // 鏍规嵁nodes鍔ㄦ�佺敓鎴愯妭鐐规暟鎹� var nodeData = nodes.map(function (node, index) { return { - name: node, - x: Math.random() * 1000, // 璁剧疆闅忔満x鍧愭爣浣嶇疆 + name: node.name, + id: node.id, + x: Math.random() * 2000, // 璁剧疆闅忔満x鍧愭爣浣嶇疆 y: Math.random() * 600, // 璁剧疆闅忔満y鍧愭爣浣嶇疆 itemStyle: { - color: getColorByIndex(index), // 鍙互鏍规嵁绱㈠紩璁剧疆涓嶅悓鐨勯鑹� + color: "#eae0eb", // 鍙互鏍规嵁绱㈠紩璁剧疆涓嶅悓鐨勯鑹� borderWidth: BorderWidth, - borderColor: getColorByIndex(index + 1) - } + borderColor: "#996f9f", + }, }; }); - // 璁剧疆棰滆壊 - function getColorByIndex(index) { - var colors = ["#ecf4ff", "#dd9795", "#f1edbe", "#ecf4ff", "#c5dbd8"]; // 鍙互鏍规嵁瀹為檯鎯呭喌璁剧疆棰滆壊鏁扮粍 - return colors[index % colors.length]; - } - var option; option = { + title: { + left: "center", + top: FontSize + 10, + subtextStyle: { + fontSize: FontSize, // 璁剧疆鍓爣棰樻枃瀛楀ぇ灏忎负 14px + color: "#2C2C2C", + }, + }, + backgroundColor: { + type: "image", + image: "/static/image/characterRelationBg.png", + size: "100% 100%", // 鑳屾櫙鍥剧墖鐨勫昂瀵革紝鍙互鏄櫨鍒嗘瘮鎴栬�呭儚绱� + position: "center center", // 鑳屾櫙鍥剧墖鐨勪綅缃紝鍙互鏄� top, bottom, middle 鎴栬�呯櫨鍒嗘瘮 + }, tooltip: {}, animationDurationUpdate: 1500, animationEasingUpdate: "quinticInOut", @@ -620,152 +1074,61 @@ { type: "graph", layout: "none", + roam: true, symbolSize: SymbolSize, // 璋冩暣鑺傜偣澶у皬 label: { show: true, color: "black", // 璁剧疆鑺傜偣鏂囧瓧棰滆壊涓洪粦鑹� - fontSize: FontSize // 璁剧疆鏂囧瓧澶у皬 + fontSize: FontSize, // 璁剧疆鏂囧瓧澶у皬 }, edgeSymbol: ["circle"], edgeSymbolSize: [4, 10], - edgeLabel: { - fontSize: 40 - }, data: nodeData, - links: [ - { - source: 0, - target: 1, - symbolSize: [5, 20] - }, - { - source: "Node 2", - target: "Node 1" - }, - { - source: "Node 1", - target: "Node 3" - }, - { - source: "Node 2", - target: "Node 3" - }, - { - source: "Node 2", - target: "Node 4" - }, - { - source: "Node 1", - target: "Node 4" - } - ], + links: links, lineStyle: { opacity: 0.9, width: 2, - curveness: 0 - } - } - ] + curveness: 0.3, + }, + emphasis: { + focus: "adjacency", + lineStyle: { + width: 10, + }, + }, + }, + ], }; - // 灏嗙敓鎴愮殑杩炴帴绾挎坊鍔犲埌echarts鍥捐〃鐨刼ption涓� option.series[0].links = links; + // 璁剧疆鐐瑰嚮浜嬩欢鐩戝惉 + myChart.on("click", (params) => { + // menuNav2 = !menuNav1 + if (params.componentType === "series") { + this.spaceTimeArr(params.data.id); + } + }); option && myChart.setOption(option); }, // 鏃剁┖鍦板浘 - spaceTime() { + spaceTime(data) { var chartDom = document.getElementById("spaceTime"); var myChart = echarts.init(chartDom); var option; - const data = [ - { - name: "娴烽棬", - value: 9 - }, - { - name: "閲戞槍", - value: 19 - }, - { - name: "娉夊窞", - value: 21 - }, - { - name: "琛㈠窞", - value: 177 - }, - { - name: "寤婂潑", - value: 193 - }, - { - name: "鑿忔辰", - value: 194 - }, - { - name: "鍚堣偉", - value: 229 - }, - { - name: "姝︽眽", - value: 273 - }, - { - name: "澶у簡", - value: 279 - } - ]; - const geoCoordMap = { - 娴烽棬: [121.15, 31.89], - 閯傚皵澶氭柉: [109.781327, 39.608266], - 鎷涜繙: [120.38, 37.35], - 骞抽《灞�: [113.29, 33.75], - 閭㈠彴: [114.48, 37.05], - 寰峰窞: [116.29, 37.45], - 娴庡畞: [116.59, 35.38], - 鑽嗗窞: [112.239741, 30.335165], - 瀹滄槍: [111.3, 30.7], - 涔変箤: [120.06, 29.32], - 涓芥按: [119.92, 28.45], - 娲涢槼: [112.44, 34.7], - 绉︾殗宀�: [119.57, 39.95], - 鏍床: [113.16, 27.83], - 鐭冲搴�: [114.48, 38.03], - 鑾辫姕: [117.67, 36.19], - 甯稿痉: [111.69, 29.05], - 淇濆畾: [115.48, 38.85], - 婀樻江: [112.91, 27.87], - 閲戝崕: [119.64, 29.12], - 宀抽槼: [113.09, 29.37], - 闀挎矙: [113, 28.21], - 琛㈠窞: [118.88, 28.97], - 寤婂潑: [116.7, 39.53], - 鑿忔辰: [115.480656, 35.23375], - 鍚堣偉: [117.27, 31.86], - 姝︽眽: [114.31, 30.52], - 澶у簡: [125.03, 46.58] - }; - const convertData = function (data) { - var res = []; - for (var i = 0; i < data.length; i++) { - var geoCoord = geoCoordMap[data[i].name]; - if (geoCoord) { - res.push({ - name: data[i].name, - value: geoCoord.concat(data[i].value) - }); - } - } - return res; - }; option = { + title: { + text: "", + subtext: "", + sublink: "", + left: "center", + }, tooltip: { - trigger: "item" + trigger: "item", }, bmap: { - center: [104.114129, 37.550339], - zoom: 1, + center: data[0].value, + zoom: 8, roam: true, mapStyle: { styleJson: [ @@ -773,128 +1136,178 @@ featureType: "water", elementType: "all", stylers: { - color: "#d1d1d1" - } + color: "#86a1ac", + }, }, { featureType: "land", elementType: "all", stylers: { - color: "#f3f3f3" - } + color: "#f1d99d", + }, + }, + { + featureType: "railway", + elementType: "all", + stylers: { + visibility: "off", + }, + }, + { + featureType: "highway", + elementType: "all", + stylers: { + color: "#f1d99d", + }, + }, + { + featureType: "highway", + elementType: "labels", + stylers: { + visibility: "off", + }, + }, + { + featureType: "arterial", + elementType: "geometry", + stylers: { + color: "#f1d99d", + }, + }, + { + featureType: "arterial", + elementType: "geometry.fill", + stylers: { + color: "#f1d99d", + }, + }, + { + featureType: "poi", + elementType: "all", + stylers: { + visibility: "off", + }, + }, + { + featureType: "green", + elementType: "all", + stylers: { + visibility: "off", + }, + }, + { + featureType: "subway", + elementType: "all", + stylers: { + visibility: "off", + }, }, { featureType: "manmade", elementType: "all", stylers: { - color: "#d1d1d1" - } + color: "#f1d99d", + }, }, { featureType: "local", elementType: "all", stylers: { - color: "#d1d1d1" - } + color: "#f1d99d", + }, + }, + { + featureType: "local", + elementType: "labels", + stylers: { + visibility: "off", + }, }, { featureType: "arterial", elementType: "labels", stylers: { - visibility: "off" - } + visibility: "off", + }, }, { featureType: "boundary", elementType: "all", stylers: { - color: "#fefefe" - } + color: "#f1d99d", + }, }, { featureType: "building", elementType: "all", stylers: { - color: "#d1d1d1" - } + color: "#f1d99d", + }, }, { featureType: "label", elementType: "labels.text.fill", stylers: { - color: "#999999" - } - } - ] - } + color: "#000", + }, + }, + ], + }, }, series: [ { - name: "pm2.5", + name: "", type: "scatter", coordinateSystem: "bmap", - data: convertData(data), - symbolSize: function (val) { - return val[2] / 10; - }, + data: data, + symbolSize: 0, encode: { - value: 2 - }, - credits: { - enabled: false + value: 2, }, label: { formatter: "{b}", position: "right", - show: false + show: false, }, emphasis: { label: { - show: true - } - } + show: true, + }, + }, }, { - name: "Top 5", + name: "", type: "effectScatter", coordinateSystem: "bmap", - data: convertData( - data - .sort(function (a, b) { - return b.value - a.value; - }) - .slice(0, 6) - ), - symbolSize: function (val) { - return val[2] / 10; - }, + data: data, + symbolSize: 20, encode: { - value: 2 + value: 2, }, showEffectOn: "render", rippleEffect: { - brushType: "stroke" + brushType: "stroke", }, label: { formatter: "{b}", position: "right", - show: true + show: false, }, itemStyle: { + color: "#ec7b43", shadowBlur: 10, - shadowColor: "#333" + shadowColor: "#333", }, emphasis: { - scale: true + scale: false, }, - zlevel: 1 - } - ] + zlevel: 1, + }, + ], }; - option && myChart.setOption(option); - } - } + }, + }, }; </script> @@ -923,10 +1336,14 @@ .BoxLeft ::v-deep.el-card__body { padding: 0.1rem 0.11rem !important; } - -::v-deep .el-tabs__content { - line-height: 1; +.BoxLeft { + width: 30%; } +.BoxRight { + width: 70%; +} + + /* 涓汉灏忎紶 ------------------*/ ::v-deep .el-dialog__header { @@ -935,10 +1352,6 @@ ::v-deep .el-dialog__body { padding: 0; -} - -::v-deep .el-dialog__wrapper { - z-index: 999999999999999 !important; } .ProfileNav { @@ -952,12 +1365,6 @@ } /* ------------------- */ - -img { - width: 100%; - height: 100%; -} - * { box-sizing: border-box; } @@ -1063,10 +1470,12 @@ } ::v-deep .el-tabs__item { - width: 1rem; + width: 1.4rem; font-size: 0.14rem; line-height: 0.4rem; height: 0.4rem; + padding: 0 20px !important; + text-align: center; } ::v-deep .el-tabs__header { @@ -1074,12 +1483,8 @@ } ::v-deep .el-tabs__active-bar { - /* 璁剧疆婊氬姩鏉″搴� */ - width: 1rem !important; height: 0.03rem !important; background-color: #597aa5; - transform: translateX(-20px); - /* margin-top: .09rem; */ } ::v-deep .el-tabs__active-bar { @@ -1097,4 +1502,39 @@ .BoxRight .box-card { margin-bottom: 0.2rem !important; } +::v-deep .map-circle-name { + width: 20px; + height: 20px; + border-radius: 50%; + background-color: rgb(222, 142, 102); +} +::v-deep .ripple { + border-radius: 50%; + position: relative; + overflow: hidden; +} + +::v-deep .ripple::before { + content: ""; + position: absolute; + top: 50%; + left: 50%; + width: 150%; /* Ensure it covers the entire parent */ + height: 150%; + background: rgba(255, 255, 255, 0.5); + border-radius: 50%; + transform: translate(-50%, -50%) scale(1); + animation: ripple-animation 1s infinite linear; +} + +@keyframes ripple-animation { + to { + transform: translate(-50%, -50%) scale(0); + opacity: 0; + } +} + +.fileul li:hover { + color: #597aa5; +} </style> -- Gitblit v1.9.1