From f65eb0dfefd593058abaf51404a7472677c4473e Mon Sep 17 00:00:00 2001 From: YM <479443481@qq.com> Date: 星期一, 20 五月 2024 16:54:40 +0800 Subject: [PATCH] 地图层级 --- src/pages/character/detail.vue | 417 ++++++++++++++++++++++++++++++++++++----------------------- 1 files changed, 256 insertions(+), 161 deletions(-) diff --git a/src/pages/character/detail.vue b/src/pages/character/detail.vue index 73265c0..857b0fa 100644 --- a/src/pages/character/detail.vue +++ b/src/pages/character/detail.vue @@ -1,15 +1,25 @@ <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 + <el-button + class="MiddeBack flex flex-center" + @click="goBack" + >杩斿洖</el-button> + <view + style="width: 70%" + class="flex flex-center flex-column" > - <view style="width: 70%" class="flex flex-center flex-column"> <view style="font-weight: bold; font-size: 0.2rem">{{ detailInfo.NAME }}</view> - <ul class="flex" style="line-height: 1.2; margin: 0.15rem 0"> + <ul + class="flex" + style="line-height: 1.2; margin: 0.15rem 0" + > <li style=" background-color: #fff; @@ -20,6 +30,7 @@ text-align: center; margin-right: 0.15rem; " + @click="openFileClick(1)" > RDF </li> @@ -32,7 +43,9 @@ font-size: 0.12rem; text-align: center; margin-right: 0.15rem; + cursor: pointer; " + @click="openFileClick(2)" > NT </li> @@ -45,7 +58,9 @@ font-size: 0.12rem; text-align: center; margin-right: 0.15rem; + cursor: pointer; " + @click="openFileClick(3)" > XML </li> @@ -58,7 +73,9 @@ font-size: 0.12rem; text-align: center; margin-right: 0.15rem; + cursor: pointer; " + @click="openFileClick(4)" > JSON </li> @@ -71,11 +88,15 @@ font-weight: normal; line-height: 0.2rem; letter-spacing: 0.03rem; + cursor: pointer; " > {{ biogData.length ? biogData[0].content : "-" }} </view> - <view class="flex" style="width: 100%; margin: 0.25rem 0 0.15rem 0"> + <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 @@ -83,15 +104,16 @@ class="yinyong flex" @click="copyText" > - <img src="@/static/image/yinyong.png" alt="" />寮曠敤</el-button - > + <img + src="@/static/image/yinyong.png" + alt="" + />寮曠敤</el-button> </view> <!-- v-if="biogData.length > 1" --> <view style="font-size: 0.12rem; color: #244a7b; cursor: pointer" @click="ProfileClick" - >闃呰鏇村></view - > + >闃呰鏇村></view> </view> </view> <view style="width: 5%"></view> @@ -104,7 +126,10 @@ style="padding-right: 0.2rem; width: 2.8rem" > <div class="grid-content bg-purple-dark flex flex-column"> - <el-card class="box-card" style="width: 100%; height: 2.06rem"> + <el-card + class="box-card" + style="width: 100%; height: 2.06rem" + > <div class="clearfix flex" style=" @@ -113,14 +138,11 @@ padding-bottom: 0.1rem; " > - <span - style=" + <span style=" margin-left: 0.12rem; font-size: 0.14rem; font-weight: 900; - " - >鍏崇郴鍥捐氨</span - > + ">鍏崇郴鍥捐氨</span> <!-- <el-button icon="el-icon-rank" style="float: right; padding: 3px 0;" type="text"></el-button> --> <img src="@/static/image/fangda.png" @@ -129,7 +151,10 @@ alt="" /> </div> - <view id="relation" style="height: 1.51rem; width: 100%"></view> + <view + id="relation" + style="height: 1.51rem; width: 100%" + ></view> </el-card> <el-card class="box-card" @@ -194,9 +219,18 @@ </div> </div> <!-- 鍙充晶 --> - <div :span="18" class="BoxRight"> - <div class="grid-content bg-purple-dark" style="width: 100%"> - <el-card class="box-card" style="padding: 0"> + <div + :span="18" + class="BoxRight" + > + <div + class="grid-content bg-purple-dark" + style="width: 100%" + > + <el-card + class="box-card" + style="padding: 0" + > <div class="clearfix" style=" @@ -214,35 +248,60 @@ class="box-card" style="min-height: 1.91rem; margin: 0.2rem 0" > - <el-tabs ref="tabs" v-model="activeName" @tab-click="handleClick"> - <el-tab-pane label="浠h〃钁椾綔" data-id="1" name="representative"> + <el-tabs + ref="tabs" + v-model="activeName" + @tab-click="handleClick" + > + <el-tab-pane + label="浠h〃钁椾綔" + data-id="1" + name="representative" + > <Table1 :data="tableData1" :columns="tableColumns1" :height="400" /> </el-tab-pane> - <el-tab-pane label="浜插睘鍏崇郴" data-id="2" name="family "> + <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 " - ><Table1 + <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"> + /> + </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"> + <el-tab-pane + label="娲诲姩骞磋氨" + data-id="5" + name="activity" + > <Table1 :data="tableData5" :columns="tableColumns3" @@ -291,7 +350,10 @@ > <span>鐜颁唬鐮旂┒</span> </div> - <ul class="font-family" style="font-size: 0.13rem; line-height: 2"> + <ul + class="font-family" + style="font-size: 0.13rem; line-height: 2" + > <li v-for="(item, index) in personResearchList" :key="index" @@ -321,7 +383,10 @@ ></el-button> </el-col> <!-- 涓汉灏忎紶 --> - <el-dialog :visible.sync="isProfile" :modal-append-to-body="false"> + <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" @@ -344,9 +409,7 @@ </view> <view class="flex"> <view></view> - <view style="font-weight: 700; color: #2c2c2c" - >鈥斺�攞{ item.pageNo }}</view - > + <view style="font-weight: 700; color: #2c2c2c">鈥斺�攞{ item.pageNo }}</view> </view> </view> </view> @@ -372,13 +435,13 @@ getPersonBiog, getPersonWritings, getPersonRelationAtSchool, - getSpaceTime + getSpaceTime, } from "@/api/index.js"; import { getImg } from "@/static/tool.js"; export default { components: { - Table1 + Table1, }, data() { return { @@ -399,60 +462,60 @@ tableColumns1: [ { prop: "a", - label: "姝d功鍚�" + label: "姝d功鍚�", }, { prop: "e", - label: "浣滆��" + label: "浣滆��", }, { prop: "b", - label: "钁椾綔骞�" + label: "钁椾綔骞�", }, { prop: "c", - label: "钁椾綔鏂瑰紡" + label: "钁椾綔鏂瑰紡", }, { prop: "d", - label: "鎬荤洰鍒嗙被" - } + label: "鎬荤洰鍒嗙被", + }, ], tableColumns2: [ { prop: "a", - label: "鍏崇郴浜�" + label: "鍏崇郴浜�", }, { prop: "b", - label: "鍏崇郴绫诲瀷" + label: "鍏崇郴绫诲瀷", }, { prop: "c", - label: "鑰冩嵁" + label: "鑰冩嵁", }, { prop: "d", - label: "鍑哄" - } + label: "鍑哄", + }, ], tableColumns3: [ { prop: "a", - label: "娲诲姩鏃堕棿鍖洪棿" + label: "娲诲姩鏃堕棿鍖洪棿", }, { prop: "b", - label: "娲诲姩鍚嶇О" + label: "娲诲姩鍚嶇О", }, { prop: "c", - label: "娲诲姩鍦扮偣" + label: "娲诲姩鍦扮偣", }, { prop: "d", - label: "娲诲姩鎻忚堪" - } + label: "娲诲姩鎻忚堪", + }, ], tableData1: [], tableData2: [], @@ -461,7 +524,7 @@ tableData5: [], nodes: [], relationships: [], - personResearchList: [] + personResearchList: [], }; }, onLoad(options) { @@ -496,11 +559,17 @@ }, methods: { copyText() { - const txt = this.biogData[0].content + ";鏉ユ簮锛氫腑鍖诲尰瀛︿汉鐗╂暟鎹簱"; - navigator.clipboard.writeText(txt).then(); + console.log(navigator.clipboard); + const textToCopy = this.biogData[0].content + ";鏉ユ簮锛氫腑鍖诲尰瀛︿汉鐗╂暟鎹簱"; + 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" + type: "success", }); }, toLink(item) { @@ -510,7 +579,7 @@ // 鍩烘湰淇℃伅 getPersonInfo({ id: this.detailId, - type: "PERSON_BASIC" + type: "PERSON_BASIC", }).then((res) => { const obj = {}; if ( @@ -533,13 +602,13 @@ //鐜颁唬鐮旂┒ getPersonInfo({ id: this.detailId, - type: "PERSON_RESEARCH" + type: "PERSON_RESEARCH", }).then((res) => { this.personResearchList = res.object.personResearchList; }); getPersonInfo({ id: this.detailId, - type: "PERSON_RELATIONS" + type: "PERSON_RELATIONS", }).then((res) => { console.log(res, "PERSON_RELATIONS"); this.personRelationList = res.object.personRelationList; @@ -547,13 +616,13 @@ this.tableData4 = this.personRelationList.map((f) => { return { a: f.nodeName, - b: f.relationTypeName + b: f.relationTypeName, }; }); } }); getWebBasic({ - personId: this.detailId + personId: this.detailId, }).then((res) => { console.log(res, "resres"); const obj = res.object; @@ -570,14 +639,14 @@ // 娲诲姩骞磋氨 getPersonInfo({ id: this.detailId, - type: "PERSON_SPACE_TIME" + type: "PERSON_SPACE_TIME", }).then((res) => { this.tableData5 = res.object.personSpaceTimeList.map((item) => { return { a: item.time, b: item.activityName, c: item.activityAddrOld, - d: item.desc // 杩欓噷缂哄皯娲诲姩鎻忚堪瀛楁 + d: item.desc, // 杩欓噷缂哄皯娲诲姩鎻忚堪瀛楁 }; }); }); @@ -588,39 +657,39 @@ list: [ { name: "鍒悕", - value: obj.alias || "-" + value: obj.alias || "-", }, { name: "瀛�", - value: obj.zi || "-" + value: obj.zi || "-", }, { name: "鍙�", - value: obj.hao || "-" + value: obj.hao || "-", }, { name: "鎵�澶勬椂鏈�", - value: obj.dynastyDesc || "-" + value: obj.dynastyDesc || "-", }, { name: "姘戞棌", - value: obj.ethnic || "-" - } - ] + value: obj.ethnic || "-", + }, + ], }, { list: [ { name: "绫嶈疮", - value: obj.native || "-" + value: obj.native || "-", }, { name: "鎬у埆", - value: obj.gender || "-" + value: obj.gender || "-", }, { name: "鑱屽畼", - value: obj.official || "-" + value: obj.official || "-", }, { name: "娴佹淳", @@ -630,45 +699,45 @@ sres.object.school_NAME && sres.object.school_NAME.length ? sres.object.school_NAME[0].content - : "-" + : "-", }, { name: "瀛︽湳鐗圭偣", - value: obj.features || "-" - } - ] - } + value: obj.features || "-", + }, + ], + }, ]; }, getSourceData() { getSource({ - personId: this.detailId + personId: this.detailId, }).then((res) => { this.sourceDataList = res.list; }); }, getImages() { getPersonImages({ - personId: this.detailId + personId: this.detailId, }).then((res) => { this.imageList = res.list.map((item) => getImg(item.filePath)); }); }, getBiog() { getPersonBiog({ - personId: this.detailId + personId: this.detailId, }).then((res) => { this.biogData = res.list.map((item) => { return { content: item.content1, - pageNo: "銆�" + item.pageNo + "銆� " + "P " + item.pageNo // 杩欓噷鍙湁bookid鏃犳硶鍖归厤鍒颁功鍚� + pageNo: "銆�" + item.pageNo + "銆� " + "P " + item.pageNo, // 杩欓噷鍙湁bookid鏃犳硶鍖归厤鍒颁功鍚� }; }); }); }, getWritings() { getPersonWritings({ - personId: this.detailId + personId: this.detailId, }).then((res) => { this.tableData1 = res.list.map((item) => { return { @@ -676,14 +745,14 @@ b: item.dynasty, c: item.writeWay, d: item.classify, - e: this.detailInfo.NAME + e: this.detailInfo.NAME, }; }); }); }, getRelationship() { getPersonRelationAtSchool({ - personId: this.detailId + personId: this.detailId, // relationSearchTypeEO: "SOCIAL" }).then((res) => { console.log(res, "getPersonRelationAtSchool"); @@ -692,7 +761,7 @@ }, getMappingData(name) { getFuzzySearch({ - keyword: name + keyword: name, }).then((res) => { this.nodes = []; this.relationships = []; @@ -708,19 +777,19 @@ if (exists1 !== true) { this.nodes.push({ name: item.name1, - id: item.identifier1 + id: item.identifier1, }); } if (exists2 !== true) { this.nodes.push({ name: item.name2, - id: item.identifier2 + id: item.identifier2, }); } let obj = { source: item.name1, target: item.name2, - relation: item.relationName || "" // 濡傛灉瀛樺湪 relationName 瀛楁鍒欎娇鐢紝鍚﹀垯涓虹┖瀛楃涓� + relation: item.relationName || "", // 濡傛灉瀛樺湪 relationName 瀛楁鍒欎娇鐢紝鍚﹀垯涓虹┖瀛楃涓� }; this.relationships.push(obj); }); @@ -730,13 +799,13 @@ }, getMapInfo() { getSpaceTime({ - personId: this.detailId + personId: this.detailId, }).then((res) => { console.log(res, "getSpaceTime"); const data = res.list.map((item) => { return { name: item.activityName, - value: [item.xcoord, item.ycoord] + value: [item.xcoord, item.ycoord], }; }); // 鏃剁┖鍦板浘 @@ -750,11 +819,11 @@ fangdaClick(index) { if (index == 1) { uni.navigateTo({ - url: "/pages/character/index?keyword=" + this.detailInfo.NAME + url: "/pages/character/index?keyword=" + this.detailInfo.NAME, }); } else if (index == 2) { uni.navigateTo({ - url: "/pages/characterMap/characterMap?id=" + this.detailId + url: "/pages/characterMap/characterMap?id=" + this.detailId, }); } }, @@ -770,8 +839,34 @@ scrollToTop() { window.scrollTo({ top: 0, - behavior: "smooth" // 浣跨敤骞虫粦婊氬姩 + behavior: "smooth", // 浣跨敤骞虫粦婊氬姩 }); + }, + 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}`); }, handleClick(tab) { let index = tab.$attrs["data-id"] - 1; @@ -853,8 +948,8 @@ position: "middle", // 璁剧疆鏍囩鏂囨湰鍦ㄧ嚎鐨勪腑闂翠綅缃笂灞呬腑鏄剧ず // bottom: -(FontSize+10), z: 10, // 璁剧疆鏍囩鐨剒杞撮珮搴︼紝浣垮叾姣旇繛鎺ョ嚎鏇撮珮 - distance: -(Distance + 1) // 灏嗘爣绛炬斁缃湪杩炴帴绾夸笂 - } + distance: -(Distance + 1), // 灏嗘爣绛炬斁缃湪杩炴帴绾夸笂 + }, }); } } @@ -869,8 +964,8 @@ itemStyle: { color: "#eae0eb", // 鍙互鏍规嵁绱㈠紩璁剧疆涓嶅悓鐨勯鑹� borderWidth: BorderWidth, - borderColor: "#996f9f" - } + borderColor: "#996f9f", + }, }; }); var option; @@ -880,14 +975,14 @@ top: FontSize + 10, subtextStyle: { fontSize: FontSize, // 璁剧疆鍓爣棰樻枃瀛楀ぇ灏忎负 14px - color: "#2C2C2C" - } + color: "#2C2C2C", + }, }, backgroundColor: { type: "image", image: "/static/image/characterRelationBg.png", size: "100% 100%", // 鑳屾櫙鍥剧墖鐨勫昂瀵革紝鍙互鏄櫨鍒嗘瘮鎴栬�呭儚绱� - position: "center center" // 鑳屾櫙鍥剧墖鐨勪綅缃紝鍙互鏄� top, bottom, middle 鎴栬�呯櫨鍒嗘瘮 + position: "center center", // 鑳屾櫙鍥剧墖鐨勪綅缃紝鍙互鏄� top, bottom, middle 鎴栬�呯櫨鍒嗘瘮 }, tooltip: {}, animationDurationUpdate: 1500, @@ -901,7 +996,7 @@ label: { show: true, color: "black", // 璁剧疆鑺傜偣鏂囧瓧棰滆壊涓洪粦鑹� - fontSize: FontSize // 璁剧疆鏂囧瓧澶у皬 + fontSize: FontSize, // 璁剧疆鏂囧瓧澶у皬 }, edgeSymbol: ["circle"], edgeSymbolSize: [4, 10], @@ -910,16 +1005,16 @@ lineStyle: { opacity: 0.9, width: 2, - curveness: 0.3 + curveness: 0.3, }, emphasis: { focus: "adjacency", lineStyle: { - width: 10 - } - } - } - ] + width: 10, + }, + }, + }, + ], }; // 灏嗙敓鎴愮殑杩炴帴绾挎坊鍔犲埌echarts鍥捐〃鐨刼ption涓� option.series[0].links = links; @@ -965,10 +1060,10 @@ text: "", subtext: "", sublink: "", - left: "center" + left: "center", }, tooltip: { - trigger: "item" + trigger: "item", }, bmap: { center: data[0].value, @@ -980,123 +1075,123 @@ featureType: "water", elementType: "all", stylers: { - color: "#86a1ac" - } + color: "#86a1ac", + }, }, { featureType: "land", elementType: "all", stylers: { - color: "#f1d99d" - } + color: "#f1d99d", + }, }, { featureType: "railway", elementType: "all", stylers: { - visibility: "off" - } + visibility: "off", + }, }, { featureType: "highway", elementType: "all", stylers: { - color: "#f1d99d" - } + color: "#f1d99d", + }, }, { featureType: "highway", elementType: "labels", stylers: { - visibility: "off" - } + visibility: "off", + }, }, { featureType: "arterial", elementType: "geometry", stylers: { - color: "#f1d99d" - } + color: "#f1d99d", + }, }, { featureType: "arterial", elementType: "geometry.fill", stylers: { - color: "#f1d99d" - } + color: "#f1d99d", + }, }, { featureType: "poi", elementType: "all", stylers: { - visibility: "off" - } + visibility: "off", + }, }, { featureType: "green", elementType: "all", stylers: { - visibility: "off" - } + visibility: "off", + }, }, { featureType: "subway", elementType: "all", stylers: { - visibility: "off" - } + visibility: "off", + }, }, { featureType: "manmade", elementType: "all", stylers: { - color: "#f1d99d" - } + color: "#f1d99d", + }, }, { featureType: "local", elementType: "all", stylers: { - color: "#f1d99d" - } + color: "#f1d99d", + }, }, { featureType: "local", elementType: "labels", stylers: { - visibility: "off" - } + visibility: "off", + }, }, { featureType: "arterial", elementType: "labels", stylers: { - visibility: "off" - } + visibility: "off", + }, }, { featureType: "boundary", elementType: "all", stylers: { - color: "#f1d99d" - } + color: "#f1d99d", + }, }, { featureType: "building", elementType: "all", stylers: { - color: "#f1d99d" - } + color: "#f1d99d", + }, }, { featureType: "label", elementType: "labels.text.fill", stylers: { - color: "#000" - } - } - ] - } + color: "#000", + }, + }, + ], + }, }, series: [ { @@ -1106,18 +1201,18 @@ data: data, symbolSize: 0, encode: { - value: 2 + value: 2, }, label: { formatter: "{b}", position: "right", - show: false + show: false, }, emphasis: { label: { - show: true - } - } + show: true, + }, + }, }, { name: "", @@ -1126,32 +1221,32 @@ data: data, symbolSize: 20, encode: { - value: 2 + value: 2, }, showEffectOn: "render", rippleEffect: { - brushType: "stroke" + brushType: "stroke", }, label: { formatter: "{b}", position: "right", - show: false + show: false, }, itemStyle: { color: "#ec7b43", shadowBlur: 10, - shadowColor: "#333" + shadowColor: "#333", }, emphasis: { - scale: false + scale: false, }, - zlevel: 1 - } - ] + zlevel: 1, + }, + ], }; option && myChart.setOption(option); - } - } + }, + }, }; </script> -- Gitblit v1.9.1