From f3e5b489e30a921c03ef8b97e1cd845b65ea5d9d Mon Sep 17 00:00:00 2001 From: YM <479443481@qq.com> Date: 星期三, 05 六月 2024 18:17:16 +0800 Subject: [PATCH] 1 --- src/pages/character/detail.vue | 771 +++++++++++++++++++++++++++++++++++++++-------------------- 1 files changed, 511 insertions(+), 260 deletions(-) diff --git a/src/pages/character/detail.vue b/src/pages/character/detail.vue index c2a8b37..2333598 100644 --- a/src/pages/character/detail.vue +++ b/src/pages/character/detail.vue @@ -11,7 +11,6 @@ }}</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; @@ -21,18 +20,70 @@ 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; " > {{ biogData.length ? biogData[0].content : "-" }} @@ -48,8 +99,8 @@ <img src="@/static/image/yinyong.png" alt="" />寮曠敤</el-button > </view> - <!-- v-if="biogData.length > 1" --> <view + v-if="biogData.length > 1" style="font-size: 0.12rem; color: #244a7b; cursor: pointer" @click="ProfileClick" >闃呰鏇村></view @@ -58,9 +109,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" @@ -108,6 +159,7 @@ <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; cursor: pointer" @@ -116,7 +168,19 @@ <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 @@ -145,12 +209,18 @@ > {{ 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 @@ -185,12 +255,13 @@ :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> <el-tab-pane label="绀句細鍏崇郴" data-id="4" name="society"> <Table1 :data="tableData4" @@ -218,14 +289,22 @@ > <span>鐩稿叧闄勮〃/鍥惧儚</span> </div> - <view class="flex"> - <el-image - v-for="item in imageList" - :key="item" - style="width: 2.05rem; height: 1.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"> @@ -237,35 +316,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. + <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" @@ -274,9 +359,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 in biogData" + v-for="(item, index) in biogData" + :key="index" style=" margin-bottom: 0.2rem; background-color: #f0f0f0; @@ -292,11 +381,14 @@ <view class="flex"> <view></view> <view style="font-weight: 700; color: #2c2c2c" - >鈥斺�攞{ item.pageNo }}</view + >鈥斺�攞{ item.bookName }}</view > </view> </view> </view> + <div v-else> + <el-empty description="鏆傛棤鏁版嵁"></el-empty> + </div> </el-dialog> </view> </template> @@ -309,6 +401,7 @@ import { getFuzzySearch, getPersonInfo, + getRelationTypeTreeList, getWebBasic, getIntroduction, getSource, @@ -316,13 +409,15 @@ getPersonBiog, getPersonWritings, getPersonRelationAtSchool, - getSpaceTime, + getSpaceTime } from "@/api/index.js"; -import { getImg } from "@/static/tool.js"; +import { getImg, getFile } from "@/static/tool.js"; +import L from "leaflet"; +import "leaflet.chinatmsproviders"; export default { components: { - Table1, + Table1 }, data() { return { @@ -343,56 +438,60 @@ tableColumns1: [ { prop: "a", - label: "姝d功鍚�", + label: "姝d功鍚�" + }, + { + prop: "e", + 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: [], @@ -401,6 +500,8 @@ tableData5: [], nodes: [], relationships: [], + personResearchList: [], + markerList: [] }; }, onLoad(options) { @@ -435,19 +536,32 @@ }, methods: { copyText() { - var textToCopy = document.getElementById("copyBox").innerText; - console.log(textToCopy, "textToCopy"); - navigator.clipboard.writeText(textToCopy).then(); + 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) { + console.log(item); + if (item.url) { + window.open(item.url); + } + if (item.filePath) { + window.open(getFile(item.filePath)); + } }, getData() { // 鍩烘湰淇℃伅 getPersonInfo({ id: this.detailId, - type: "PERSON_BASIC", + type: "PERSON_BASIC" }).then((res) => { const obj = {}; if ( @@ -467,116 +581,131 @@ // 鍏崇郴鍥捐氨 this.getMappingData(this.detailInfo.NAME); }); + //鐜颁唬鐮旂┒ + getPersonInfo({ + id: this.detailId, + type: "PERSON_RESEARCH" + }).then((res) => { + this.personResearchList = res.object.personResearchList; + }); getWebBasic({ 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) => { + this.handleData(obj, sres); + }); + } else { + this.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, // 杩欓噷缂哄皯娲诲姩鎻忚堪瀛楁 - }; - }); + 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) { + 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鏃犳硶鍖归厤鍒颁功鍚� + bookName: "銆�" + item.bookName + "銆� " + "P " + item.pageNo // 杩欓噷鍙湁bookid鏃犳硶鍖归厤鍒颁功鍚� }; }); }); }, getWritings() { getPersonWritings({ - personId: this.detailId, + personId: this.detailId }).then((res) => { this.tableData1 = res.list.map((item) => { return { @@ -584,22 +713,82 @@ b: item.dynasty, c: item.writeWay, d: item.classify, + e: this.detailInfo.NAME }; }); }); }, getRelationship() { + getRelationTypeTreeList().then(res=>{ + console.log(res,"getRelationTypeTreeList"); + console.log(res); + }) + // getPersonRelationAtSchool({ + // personId: this.detailId, + // }).then((res) => { + // this.personRelationList = res.object.personRelationList; + // if (this.personRelationList.length) { + // this.tableData4 = this.personRelationList.map((f) => { + // return { + // a: f.nodeName, + // b: f.relationTypeName, + // }; + // }); + // } + // }); + getPersonInfo({ + id: this.detailId, + type: "PERSON_RELATIONS" + }).then((res) => { + this.tableData4 + console.log(res,"PERSON_RELATIONS"); + }); + // 绀句細鍏崇郴 getPersonRelationAtSchool({ personId: this.detailId, - // relationSearchTypeEO: "SOCIAL" + relationSearchTypeEO: "SOCIAL" }).then((res) => { - console.log(res, "getPersonRelationAtSchool"); - // 杩欓噷鎺ュ彛鏈夐棶棰� + if (res.list && res.list.length) { + this.tableData4 = res.list.map((f) => { + return { + a: f.name1, + b: f.relationName + }; + }); + } + }); + // 浜插睘鍏崇郴 + getPersonRelationAtSchool({ + personId: this.detailId, + relationSearchTypeEO: "KINSHIP" + }).then((res) => { + if (res.list && res.list.length) { + this.tableData2 = res.list.map((f) => { + return { + a: f.name1, + b: f.relationName + }; + }); + } + }); + // 甯堟壙鍏崇郴 + getPersonRelationAtSchool({ + personId: this.detailId, + relationSearchTypeEO: "INHERITANCE" + }).then((res) => { + if (res.list && res.list.length) { + this.tableData3 = res.list.map((f) => { + return { + a: f.name1, + b: f.relationName + }; + }); + } }); }, getMappingData(name) { getFuzzySearch({ - keyword: name, + keyword: name }).then((res) => { this.nodes = []; this.relationships = []; @@ -612,22 +801,22 @@ (node) => node.id === item.identifier2 && node.name === item.name2 ); // 璇佹槑涓嶅瓨鍦� - if (exists1 !== true) { + if (item.name1 && exists1 !== true) { this.nodes.push({ name: item.name1, - id: item.identifier1, + id: item.identifier1 }); } - if (exists2 !== true) { + 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); }); @@ -637,31 +826,56 @@ }, 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] - }; - }); - // 鏃剁┖鍦板浘 - loadBMap("1NJdwrI1CfT6lrykVhDkmWgsO6O2bjQK").then(() => { - this.spaceTime(data); - }); + if (res.list && res.list.length) { + const data = res.list.map((item) => { + return { + name: item.activityName, + value: [item.xcoord, item.ycoord] + }; + }); + this.markerList = data; + // 鏃剁┖鍦板浘 + this.initMap(data[0]); + } + + // loadBMap("1NJdwrI1CfT6lrykVhDkmWgsO6O2bjQK").then(() => { + // this.spaceTime(data); + // }); }); }, - + initMap(markerList) { + var map = L.map("spaceTime", { + preferCanvas: true, + attributionControl: false + }).setView([markerList.value[1], markerList.value[0]], 13); + L.tileLayer + .chinaProvider("TianDiTu.Normal.Map", { + 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); + }, // 鏀惧ぇ鍦板浘璺宠浆 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 }); } }, @@ -677,8 +891,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; @@ -760,8 +1000,8 @@ position: "middle", // 璁剧疆鏍囩鏂囨湰鍦ㄧ嚎鐨勪腑闂翠綅缃笂灞呬腑鏄剧ず // bottom: -(FontSize+10), z: 10, // 璁剧疆鏍囩鐨剒杞撮珮搴︼紝浣垮叾姣旇繛鎺ョ嚎鏇撮珮 - distance: -(Distance + 1), // 灏嗘爣绛炬斁缃湪杩炴帴绾夸笂 - }, + distance: -(Distance + 1) // 灏嗘爣绛炬斁缃湪杩炴帴绾夸笂 + } }); } } @@ -776,8 +1016,8 @@ itemStyle: { color: "#eae0eb", // 鍙互鏍规嵁绱㈠紩璁剧疆涓嶅悓鐨勯鑹� borderWidth: BorderWidth, - borderColor: "#996f9f", - }, + borderColor: "#996f9f" + } }; }); var option; @@ -787,14 +1027,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, @@ -808,7 +1048,7 @@ label: { show: true, color: "black", // 璁剧疆鑺傜偣鏂囧瓧棰滆壊涓洪粦鑹� - fontSize: FontSize, // 璁剧疆鏂囧瓧澶у皬 + fontSize: FontSize // 璁剧疆鏂囧瓧澶у皬 }, edgeSymbol: ["circle"], edgeSymbolSize: [4, 10], @@ -817,16 +1057,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; @@ -845,37 +1085,15 @@ var myChart = echarts.init(chartDom); var option; - // const data = [ - // { - // name: "娴烽棬", - // value: [121.15, 31.89] - // }, - // { - // name: "閯傚皵澶氭柉", - // value: [109.781327, 39.608266] - // }, - // { - // name: "鎷涜繙", - // value: [120.38, 37.35] - // }, - // { - // name: "鑸熷北", - // value: [122.207216, 29.985295] - // }, - // { - // name: "榻愰綈鍝堝皵", - // value: [123.97, 47.33] - // } - // ]; option = { title: { text: "", subtext: "", sublink: "", - left: "center", + left: "center" }, tooltip: { - trigger: "item", + trigger: "item" }, bmap: { center: data[0].value, @@ -887,123 +1105,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: [ { @@ -1013,18 +1231,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: "", @@ -1033,32 +1251,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> @@ -1087,6 +1305,12 @@ .BoxLeft ::v-deep.el-card__body { padding: 0.1rem 0.11rem !important; } +.BoxLeft { + width: 30%; +} +.BoxRight { + width: 70%; +} ::v-deep .el-tabs__content { line-height: 1; @@ -1099,10 +1323,6 @@ ::v-deep .el-dialog__body { padding: 0; -} - -::v-deep .el-dialog__wrapper { - z-index: 999999999999999 !important; } .ProfileNav { @@ -1261,4 +1481,35 @@ .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; + } +} </style> -- Gitblit v1.9.1