From c423765d8a5ff0c58d23bb0a31af7df6c1fad95c Mon Sep 17 00:00:00 2001 From: YM <479443481@qq.com> Date: 星期五, 26 七月 2024 16:10:25 +0800 Subject: [PATCH] 1 --- src/pages/character/detail.vue | 412 ++++++++++++++++++++++++++-------------------------------- 1 files changed, 187 insertions(+), 225 deletions(-) diff --git a/src/pages/character/detail.vue b/src/pages/character/detail.vue index 7b1881c..97c1b0f 100644 --- a/src/pages/character/detail.vue +++ b/src/pages/character/detail.vue @@ -1,6 +1,6 @@ <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 @@ -239,7 +239,7 @@ 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="tableData1" @@ -289,7 +289,7 @@ <span>鐩稿叧闄勮〃/鍥惧儚</span> </div> <view> - <div style="overflow: auto;display: flex;"> + <div style="overflow: auto; display: flex"> <div v-for="item in imageList" :key="item" :title="item.name"> <el-image :title="item.name" @@ -418,7 +418,7 @@ getPersonWritings, getPersonRelationAtSchool, getSpaceTime, - getDynastyData, + getDynastyData } from "@/api/index.js"; import { getImg } from "@/static/tool.js"; import L from "leaflet"; @@ -426,7 +426,7 @@ export default { components: { - Table1, + Table1 }, data() { return { @@ -447,62 +447,62 @@ 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", width: 300, showOverflowTooltip: true, - label: "鍑哄", - }, + label: "鍑哄" + } ], tableColumns3: [ { prop: "a", - label: "娲诲姩鏃堕棿鍖洪棿", + label: "娲诲姩鏃堕棿鍖洪棿" }, { prop: "b", - label: "娲诲姩鍚嶇О", + label: "娲诲姩鍚嶇О" }, { prop: "c", - label: "娲诲姩鍦扮偣", + label: "娲诲姩鍦扮偣" }, { prop: "d", - label: "娲诲姩鎻忚堪", - }, + label: "娲诲姩鎻忚堪" + } ], tableData1: [], tableData2: [], @@ -512,7 +512,7 @@ nodes: [], relationships: [], personResearchList: [], - markerList: [], + markerList: [] }; }, onLoad(options) { @@ -534,13 +534,13 @@ // 鑾峰彇鏃剁┖鍦板浘 this.getMapInfo(); - this.$nextTick(() => { - // 鑾峰彇绗竴涓�夐」鍗$殑 DOM 鍏冪礌 - const firstTab = this.$refs.tabs.$el.querySelector( - ".el-tabs__active-bar" - ); - firstTab.style.transform = "translateX(" + "-.2rem" + ")"; - }); + // this.$nextTick(() => { + // // 鑾峰彇绗竴涓�夐」鍗$殑 DOM 鍏冪礌 + // const firstTab = this.$refs.tabs.$el.querySelector( + // ".el-tabs__active-bar" + // ); + // firstTab.style.transform = "translateX(" + "-.2rem" + ")"; + // }); // 鐩戝惉绐楀彛澶у皬鍙樺寲 window.addEventListener("resize", this.relation); @@ -557,7 +557,7 @@ document.body.removeChild(textarea); this.$message({ message: "澶嶅埗鎴愬姛锛�", - type: "success", + type: "success" }); }, toLink(item) { @@ -572,7 +572,7 @@ // 鍩烘湰淇℃伅 getPersonInfo({ id: this.detailId, - type: "PERSON_BASIC", + type: "PERSON_BASIC" }).then((res) => { const obj = {}; if ( @@ -590,7 +590,7 @@ this.detailInfo = obj; getDynastyAll().then((dynastyData) => { getWebBasic({ - personId: this.detailId, + personId: this.detailId }).then((res) => { const obj = res.object; if (obj.school) { @@ -609,7 +609,7 @@ //鐜颁唬鐮旂┒ getPersonInfo({ id: this.detailId, - type: "PERSON_RESEARCH", + type: "PERSON_RESEARCH" }).then((res) => { this.personResearchList = res.object.personResearchList; }); @@ -617,7 +617,7 @@ // 娲诲姩骞磋氨 getPersonInfo({ id: this.detailId, - type: "PERSON_SPACE_TIME", + type: "PERSON_SPACE_TIME" }).then((res) => { if (res.object.personSpaceTimeList) { this.tableData5 = res.object.personSpaceTimeList.map((item) => { @@ -625,7 +625,7 @@ a: item.time, b: item.activityName, c: item.activityAddrOld, - d: item.desc, + d: item.desc }; }); } @@ -637,15 +637,15 @@ list: [ { name: "濮撳悕", - value: obj.name || "-", + value: obj.name || "-" }, { name: "瀛�", - value: obj.zi || "-", + value: obj.zi || "-" }, { name: "鍙�", - value: obj.hao || "-", + value: obj.hao || "-" }, { name: "鎵�澶勬椂鏈�", @@ -656,25 +656,25 @@ uni.navigateTo({ url: "/pages/knowledgeBase/knowledgeBase?dynasty=" + - obj.dynastyId, + obj.dynastyId }); - }, + } }, { name: "姘戞棌", - value: obj.ethnic || "-", - }, - ], + value: obj.ethnic || "-" + } + ] }, { list: [ { name: "绫嶈疮", - value: obj.native || "-", + value: obj.native || "-" }, { name: "鎬у埆", - value: obj.gender || "-", + value: obj.gender || "-" }, { name: "鑱屽畼", @@ -683,9 +683,9 @@ uni.navigateTo({ url: "/pages/knowledgeBase/knowledgeBase?isAdvancedSearch=1&official=" + - obj.official, + obj.official }); - }, + } }, { name: "娴佹淳", @@ -695,38 +695,38 @@ 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) => { return { src: getImg(item.filePath), - name: item.desc, + name: item.desc }; }); }); }, getBiog() { getPersonBiog({ - personId: this.detailId, + personId: this.detailId }).then((res) => { this.biogData = res.list.map((item) => { return { @@ -735,14 +735,14 @@ "銆�" + item.bookName + "銆� " + - (item.pageNo ? "P " + item.pageNo : ""), // 杩欓噷鍙湁bookid鏃犳硶鍖归厤鍒颁功鍚� + (item.pageNo ? "P " + item.pageNo : "") // 杩欓噷鍙湁bookid鏃犳硶鍖归厤鍒颁功鍚� }; }); }); }, getBiog() { getPersonBiog({ - personId: this.detailId, + personId: this.detailId }).then((res) => { this.biogData = res.list.map((item) => { return { @@ -751,14 +751,14 @@ "銆�" + item.bookName + "銆� " + - (item.pageNo ? "P " + item.pageNo : ""), // 杩欓噷鍙湁bookid鏃犳硶鍖归厤鍒颁功鍚� + (item.pageNo ? "P " + item.pageNo : "") // 杩欓噷鍙湁bookid鏃犳硶鍖归厤鍒颁功鍚� }; }); }); }, getWritings() { getPersonWritings({ - personId: this.detailId, + personId: this.detailId }).then((res) => { this.tableData1 = res.list.map((item) => { return { @@ -766,7 +766,7 @@ b: item.dynasty, c: item.writeWay, d: item.classify, - e: this.detailInfo.NAME, + e: this.detailInfo.NAME }; }); }); @@ -774,7 +774,7 @@ getRelationship() { getPersonInfo({ id: this.detailId, - type: "PERSON_RELATIONS", + type: "PERSON_RELATIONS" }).then((res) => { this.tableData4; if (res.object.personRelationMap.kin.length) { @@ -791,7 +791,7 @@ .name + "銆� P" + f.pageNo - : "", + : "" }; }); } @@ -810,7 +810,7 @@ .name + "銆� P" + f.pageNo - : "", + : "" }; } ); @@ -829,7 +829,7 @@ .name + "銆� P" + f.pageNo - : "", + : "" }; }); } @@ -837,7 +837,7 @@ }, getMappingData() { getFuzzySearch({ - personId: this.detailId, + personId: this.detailId }).then((res) => { this.nodes = []; this.relationships = []; @@ -853,19 +853,19 @@ if (item.name1 && exists1 !== true) { this.nodes.push({ name: item.name1, - id: item.identifier1, + id: item.identifier1 }); } if (item.name2 && 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); }); @@ -875,7 +875,7 @@ }, getMapInfo() { getSpaceTime({ - personId: this.detailId, + personId: this.detailId }).then((res) => { if (res.list && res.list.length) { const data = []; @@ -884,7 +884,7 @@ if (item.xcoord && item.ycoord) { const obj = { name: item.activityName, - value: [item.xcoord, item.ycoord], + value: [item.xcoord, item.ycoord] }; data.push(obj); } @@ -905,36 +905,36 @@ initMap(markerList) { var map = L.map("spaceTime", { preferCanvas: true, - attributionControl: false, + attributionControl: false }).setView([markerList[0].value[1], markerList[0].value[0]], 13); L.tileLayer .chinaProvider("TianDiTu.Normal.Map", { key: "76bc34ead7e30e663a4eded8aeaf5860", maxZoom: 18, - minZoom: 3, + minZoom: 3 }) .addTo(map); L.tileLayer .chinaProvider("TianDiTu.Normal.Annotion", { key: "76bc34ead7e30e663a4eded8aeaf5860", maxZoom: 18, - minZoom: 3, + minZoom: 3 }) .addTo(map); let icon = L.divIcon({ html: "<div class='map-circle-name ripple'></div>", iconSize: [80, 80], - className: "map-circle", + className: "map-circle" }); this.map = map; const temp_mark = L.marker([markerList.value[1], markerList.value[0]], { - icon: icon, + 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, + icon: icon }).addTo(map); } } @@ -943,11 +943,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 }); } }, @@ -963,13 +963,13 @@ scrollToTop() { window.scrollTo({ top: 0, - behavior: "smooth", // 浣跨敤骞虫粦婊氬姩 + behavior: "smooth" // 浣跨敤骞虫粦婊氬姩 }); }, openFileClick(index) { let obj = { id: this.detailId, - type: "Person", + type: "Person" }; switch (index) { case 1: @@ -991,30 +991,6 @@ ) .join("&"); window.open(`#/pages/fileDetail/index?${queryString}`); - }, - 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)"; - } - }); }, // 鍏崇郴鍥捐氨 relation() { @@ -1055,8 +1031,8 @@ position: "middle", // 璁剧疆鏍囩鏂囨湰鍦ㄧ嚎鐨勪腑闂翠綅缃笂灞呬腑鏄剧ず // bottom: -(FontSize+10), z: 10, // 璁剧疆鏍囩鐨剒杞撮珮搴︼紝浣垮叾姣旇繛鎺ョ嚎鏇撮珮 - distance: -(Distance + 1), // 灏嗘爣绛炬斁缃湪杩炴帴绾夸笂 - }, + distance: -(Distance + 1) // 灏嗘爣绛炬斁缃湪杩炴帴绾夸笂 + } }); } } @@ -1071,8 +1047,8 @@ itemStyle: { color: "#eae0eb", // 鍙互鏍规嵁绱㈠紩璁剧疆涓嶅悓鐨勯鑹� borderWidth: BorderWidth, - borderColor: "#996f9f", - }, + borderColor: "#996f9f" + } }; }); var option; @@ -1082,14 +1058,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, @@ -1103,7 +1079,7 @@ label: { show: true, color: "black", // 璁剧疆鑺傜偣鏂囧瓧棰滆壊涓洪粦鑹� - fontSize: FontSize, // 璁剧疆鏂囧瓧澶у皬 + fontSize: FontSize // 璁剧疆鏂囧瓧澶у皬 }, edgeSymbol: ["circle"], edgeSymbolSize: [4, 10], @@ -1112,16 +1088,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; @@ -1145,10 +1121,10 @@ text: "", subtext: "", sublink: "", - left: "center", + left: "center" }, tooltip: { - trigger: "item", + trigger: "item" }, bmap: { center: data[0].value, @@ -1160,123 +1136,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: [ { @@ -1286,18 +1262,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: "", @@ -1306,51 +1282,47 @@ 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> <style> /* Table1琛ㄦ牸閲岄潰鐨勬暟鎹� */ -::v-deep .is-leaf { - .cell { - font-size: 0.14rem !important; - height: 0.4rem !important; - line-height: 0.4rem !important; - } +::v-deep .is-leaf .cell { + font-size: 0.14rem !important; + height: 0.4rem !important; + line-height: 0.4rem !important; } -::v-deep .el-table__body { - .cell { - font-size: 0.14rem !important; - height: 0.4rem !important; - line-height: 0.4rem !important; - } +::v-deep .el-table__body .cell { + font-size: 0.14rem !important; + height: 0.4rem !important; + line-height: 0.4rem !important; } /* --------------- */ @@ -1365,10 +1337,6 @@ } .BoxRight { width: 70%; -} - -::v-deep .el-tabs__content { - line-height: 1; } /* 涓汉灏忎紶 ------------------*/ @@ -1399,27 +1367,25 @@ background-color: #0c274c; padding: 15rpx 25rpx; color: #fff !important; +} +.NavTop img { + width: 30rpx; + height: 30rpx; + vertical-align: middle; +} +.NavTop .NavTopr { img { - width: 30rpx; - height: 30rpx; - vertical-align: middle; - } - - .NavTopr { - img { - margin-right: 10rpx; - } + margin-right: 10rpx; } } .mImage { width: 100%; height: 30rpx; - - img { - vertical-align: top; - } +} +.mImage img { + vertical-align: top; } .Midde { @@ -1429,29 +1395,27 @@ color: #000; align-items: flex-start; padding: 0.18rem 0.24rem; +} +.Midde view { + color: #000; +} - view { - color: #000; - } - - .MiddeBack { - width: 0.6rem; - height: 0.24rem; - font-size: 0.12rem; - padding: 0; - border: 1px solid #9e9e9e; - } +.Midde .MiddeBack { + width: 0.6rem; + height: 0.24rem; + font-size: 0.12rem; + padding: 0; + border: 1px solid #9e9e9e; } .yinyong { font-size: 0.12rem; - - img { - width: 0.12rem; - height: 0.1rem; - vertical-align: top; - margin-right: 0.03rem; - } +} +.yinyong img { + width: 0.12rem; + height: 0.1rem; + vertical-align: top; + margin-right: 0.03rem; } .el-dialog__wrapper { @@ -1496,10 +1460,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 { @@ -1507,12 +1473,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 { -- Gitblit v1.9.1