From 5adb70f8f046e2de37c4984a454503c5daaf08b3 Mon Sep 17 00:00:00 2001 From: YM <479443481@qq.com> Date: 星期五, 17 五月 2024 22:26:20 +0800 Subject: [PATCH] 1 --- src/pages/character/detail.vue | 393 ++++++++++++++++++++++++++++++-------------------------- 1 files changed, 210 insertions(+), 183 deletions(-) diff --git a/src/pages/character/detail.vue b/src/pages/character/detail.vue index 4226957..73265c0 100644 --- a/src/pages/character/detail.vue +++ b/src/pages/character/detail.vue @@ -96,7 +96,7 @@ </view> <view style="width: 5%"></view> </view> - <div style="padding: 0 1.2rem 0; padding-top: 0.24rem;display: flex;"> + <div style="padding: 0 1.2rem 0; padding-top: 0.24rem; display: flex"> <!-- 宸︿晶 --> <div :span="5" @@ -183,6 +183,12 @@ > {{ index + 1 }}.{{ item }} </li> + <div + v-if="sourceDataList.length == 0" + style="color: #666; text-align: center; font-size: 16px" + > + 鏆傛棤鏁版嵁 + </div> </ul> </el-card> </div> @@ -256,14 +262,22 @@ > <span>鐩稿叧闄勮〃/鍥惧儚</span> </div> - <view class="flex"> - <el-image - v-for="item in imageList" - :key="item" - style="width: 2.05rem; height: 2.4rem" - :src="item" - fit="fill" - ></el-image> + <view> + <div class="flex"> + <el-image + v-for="item in imageList" + :key="item" + style="width: 2.05rem; height: 2.4rem" + :src="item" + fit="fill" + ></el-image> + </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"> @@ -285,6 +299,12 @@ > {{ "[" + Number(index + 1) + "]" + item.achievementName }} </li> + <div + v-if="personResearchList.length == 0" + style="color: #666; text-align: center; font-size: 16px" + > + 鏆傛棤鏁版嵁 + </div> </ul> </el-card> </div> @@ -352,13 +372,13 @@ getPersonBiog, getPersonWritings, getPersonRelationAtSchool, - getSpaceTime, + getSpaceTime } from "@/api/index.js"; import { getImg } from "@/static/tool.js"; export default { components: { - Table1, + Table1 }, data() { return { @@ -379,60 +399,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: [], @@ -441,7 +461,7 @@ tableData5: [], nodes: [], relationships: [], - personResearchList: [], + personResearchList: [] }; }, onLoad(options) { @@ -476,11 +496,11 @@ }, methods: { copyText() { - const txt = this.biogData[0].content+";鏉ユ簮锛氫腑鍖诲尰瀛︿汉鐗╂暟鎹簱" + const txt = this.biogData[0].content + ";鏉ユ簮锛氫腑鍖诲尰瀛︿汉鐗╂暟鎹簱"; navigator.clipboard.writeText(txt).then(); this.$message({ message: "澶嶅埗鎴愬姛锛�", - type: "success", + type: "success" }); }, toLink(item) { @@ -490,7 +510,7 @@ // 鍩烘湰淇℃伅 getPersonInfo({ id: this.detailId, - type: "PERSON_BASIC", + type: "PERSON_BASIC" }).then((res) => { const obj = {}; if ( @@ -513,14 +533,13 @@ //鐜颁唬鐮旂┒ getPersonInfo({ id: this.detailId, - type: "PERSON_RESEARCH", + type: "PERSON_RESEARCH" }).then((res) => { - console.log(res, "123123123"); 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; @@ -528,120 +547,128 @@ 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; - getIntroduction(Number(obj.school)).then((sres) => { - console.log(sres, "sres"); - this.tableArr = [ - { - list: [ - { - name: "鍒悕", - value: obj.alias || "-", - }, - { - name: "瀛�", - value: obj.zi || "-", - }, - { - name: "鍙�", - value: obj.hao || "-", - }, - { - name: "鎵�澶勬椂鏈�", - value: obj.dynastyDesc || "-", - }, - { - name: "姘戞棌", - value: obj.ethnic || "-", - }, - ], - }, - { - list: [ - { - name: "绫嶈疮", - value: obj.native || "-", - }, - { - name: "鎬у埆", - value: obj.gender || "-", - }, - { - name: "鑱屽畼", - value: 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 || "-", - }, - ], - }, - ]; - }); + if (obj.school) { + getIntroduction(Number(obj.school)).then((sres) => { + console.log(sres, "sres"); + handleData(obj, sres); + }); + } else { + handleData(obj); + } }); + // 娲诲姩骞磋氨 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 // 杩欓噷缂哄皯娲诲姩鎻忚堪瀛楁 }; }); }); }, + handleData(obj, sres) { + this.tableArr = [ + { + list: [ + { + name: "鍒悕", + value: obj.alias || "-" + }, + { + name: "瀛�", + value: obj.zi || "-" + }, + { + name: "鍙�", + value: obj.hao || "-" + }, + { + name: "鎵�澶勬椂鏈�", + value: obj.dynastyDesc || "-" + }, + { + name: "姘戞棌", + value: obj.ethnic || "-" + } + ] + }, + { + list: [ + { + name: "绫嶈疮", + value: obj.native || "-" + }, + { + name: "鎬у埆", + value: obj.gender || "-" + }, + { + name: "鑱屽畼", + value: 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) => { 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 { @@ -649,14 +676,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"); @@ -665,7 +692,7 @@ }, getMappingData(name) { getFuzzySearch({ - keyword: name, + keyword: name }).then((res) => { this.nodes = []; this.relationships = []; @@ -681,19 +708,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); }); @@ -703,13 +730,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] }; }); // 鏃剁┖鍦板浘 @@ -723,11 +750,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 }); } }, @@ -743,7 +770,7 @@ scrollToTop() { window.scrollTo({ top: 0, - behavior: "smooth", // 浣跨敤骞虫粦婊氬姩 + behavior: "smooth" // 浣跨敤骞虫粦婊氬姩 }); }, handleClick(tab) { @@ -826,8 +853,8 @@ position: "middle", // 璁剧疆鏍囩鏂囨湰鍦ㄧ嚎鐨勪腑闂翠綅缃笂灞呬腑鏄剧ず // bottom: -(FontSize+10), z: 10, // 璁剧疆鏍囩鐨剒杞撮珮搴︼紝浣垮叾姣旇繛鎺ョ嚎鏇撮珮 - distance: -(Distance + 1), // 灏嗘爣绛炬斁缃湪杩炴帴绾夸笂 - }, + distance: -(Distance + 1) // 灏嗘爣绛炬斁缃湪杩炴帴绾夸笂 + } }); } } @@ -842,8 +869,8 @@ itemStyle: { color: "#eae0eb", // 鍙互鏍规嵁绱㈠紩璁剧疆涓嶅悓鐨勯鑹� borderWidth: BorderWidth, - borderColor: "#996f9f", - }, + borderColor: "#996f9f" + } }; }); var option; @@ -853,14 +880,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, @@ -874,7 +901,7 @@ label: { show: true, color: "black", // 璁剧疆鑺傜偣鏂囧瓧棰滆壊涓洪粦鑹� - fontSize: FontSize, // 璁剧疆鏂囧瓧澶у皬 + fontSize: FontSize // 璁剧疆鏂囧瓧澶у皬 }, edgeSymbol: ["circle"], edgeSymbolSize: [4, 10], @@ -883,16 +910,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; @@ -938,10 +965,10 @@ text: "", subtext: "", sublink: "", - left: "center", + left: "center" }, tooltip: { - trigger: "item", + trigger: "item" }, bmap: { center: data[0].value, @@ -953,123 +980,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: [ { @@ -1079,18 +1106,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: "", @@ -1099,32 +1126,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> @@ -1153,10 +1180,10 @@ .BoxLeft ::v-deep.el-card__body { padding: 0.1rem 0.11rem !important; } -.BoxLeft{ +.BoxLeft { width: 30%; } -.BoxRight{ +.BoxRight { width: 70%; } -- Gitblit v1.9.1