From c6189f35d8744bf9c90bc15fd132ceb2a51d902c Mon Sep 17 00:00:00 2001 From: 杨磊 <505174330@qq.com> Date: 星期一, 28 四月 2025 19:29:52 +0800 Subject: [PATCH] bug修改 --- src/assets/js/middleGround/api/resource.js | 2 src/views/achievements/index.vue | 54 ++++------ src/assets/js/middleGround/tool.js | 21 +++- src/views/chronology/yearWindow.vue | 52 ++++++++-- src/views/chronology/index.vue | 135 ++++++++++++++++++++------ src/views/directory/index.vue | 4 6 files changed, 184 insertions(+), 84 deletions(-) diff --git a/src/assets/js/middleGround/api/resource.js b/src/assets/js/middleGround/api/resource.js index 78e69fb..112b320 100644 --- a/src/assets/js/middleGround/api/resource.js +++ b/src/assets/js/middleGround/api/resource.js @@ -89,8 +89,6 @@ }).then((resp) => { if (resp.length > 0) { const data = resp[0]; - console.log(data,'datas'); - debugger const datas = handleQueryResourceListData({ datas: data.datas, fields, diff --git a/src/assets/js/middleGround/tool.js b/src/assets/js/middleGround/tool.js index 2b08cc2..55e85b7 100644 --- a/src/assets/js/middleGround/tool.js +++ b/src/assets/js/middleGround/tool.js @@ -19,14 +19,23 @@ for (let fieldKey in fields) { if (item.datas[fieldKey]) { const values = JSON.parse(item.datas[fieldKey]); + + + if (values.length > 0) { - // 鐢ㄥ瓧娈靛悕澶勭悊杩斿洖鐨勫瓧娈靛�� - if (values[0].Value) { - _fields[fieldKey] = values[0].Value; - } else if (values[0].Data) { - _fields[fieldKey] = values[0].Data.Value; + //鐗规畩澶勭悊鍔ㄦ�佽瀛楁 + if (fieldKey == "eventPictures") { + _fields[fieldKey] = values.map(citem => citem.Value); + }else{ + // 鐢ㄥ瓧娈靛悕澶勭悊杩斿洖鐨勫瓧娈靛�� + if (values[0].Value) { + _fields[fieldKey] = values[0].Value; + } else if (values[0].Data) { + _fields[fieldKey] = values[0].Data.Value; + } + item.datas[fieldKey] = values[0]; } - item.datas[fieldKey] = values[0]; + } } } diff --git a/src/views/achievements/index.vue b/src/views/achievements/index.vue index a69ae53..42bb078 100644 --- a/src/views/achievements/index.vue +++ b/src/views/achievements/index.vue @@ -450,39 +450,35 @@ list: [ { years: "2025", - num: 20, + num: 10, check: false, }, { - years: "2025", - num: 20, + years: "2024", + num: 18, check: false, }, { - years: "2025", - num: 20, + years: "2023", + num: 21, check: false, }, { - years: "2025", - num: 20, + years: "2022", + num: 19, check: false, }, { - years: "2025", - num: 20, + years: "2021", + num: 22, check: false, }, { - years: "2025", - num: 20, + years: "2020", + num: 24, check: false, }, - { - years: "2025", - num: 20, - check: false, - }, + ], }, // 鏂囩尞鏉ユ簮 @@ -498,30 +494,26 @@ check: false, }, { - name: "鍖椾含涓尰鑽ぇ瀛﹀ぇ瀛﹀鎶�", - num: 190, + name: "鍖椾含甯堣寖澶у", + num: 19, + check: false, + }, + { + name: "涓浗涓尰绉戝闄�", + num: 22, check: false, }, { name: "鍖椾含涓尰鑽ぇ瀛﹀ぇ瀛﹀鎶�", - num: 190, + num: 31, check: false, }, { - name: "鍖椾含涓尰鑽ぇ瀛﹀ぇ瀛﹀鎶�", - num: 190, + name: "骞垮窞涓尰鑽ぇ瀛�", + num: 25, check: false, }, - { - name: "鍖椾含涓尰鑽ぇ瀛﹀ぇ瀛﹀鎶�", - num: 190, - check: false, - }, - { - name: "鍖椾含涓尰鑽ぇ瀛﹀ぇ瀛﹀鎶�", - num: 190, - check: false, - }, + ], }, // 瀛︾ diff --git a/src/views/chronology/index.vue b/src/views/chronology/index.vue index d2af371..9e8b18a 100644 --- a/src/views/chronology/index.vue +++ b/src/views/chronology/index.vue @@ -49,10 +49,14 @@ class="gradchild" v-for="(citem, cindex) in item.list" :style="{ background: citem.color }" - @click.stop="showDetail(index, cindex, 1, $event)" + @click.self="showDetail(index, cindex, 1, $event)" :key="cindex" > - <div class="detailDialog" v-if="citem.showDetail"> + <div + class="detailDialog" + :style="popupStyle" + v-if="citem.showChildDetail" + > <div class="closeBtn" @click.stop="closeDetail(index, cindex, 0)" @@ -91,6 +95,9 @@ import moment from "moment"; import floatingWindow from "./floatingWindow.vue"; import yearWindow from "./yearWindow.vue"; +import { nextTick } from "vue"; +import fileApi from "@/assets/js/middleGround/api/file"; +import { requestCtx, appRefCode } from "@/assets/js/config"; export default { components: { @@ -109,6 +116,10 @@ audio: "#b9a587", newspaper: "#8d77b3", other: "#009f9f", + }, + popupStyle: { + left: "0", + top: "0", }, }; }, @@ -155,11 +166,12 @@ const listData = await this.getYearResource(item); if (listData.length > 0) { this.$set(item, "list", listData); - console.log(item, "item"); + for (let j = 0; j < listData.length; j++) { + const element = listData[j]; + this.$set(element, "showChildDetail", false); + } } } - - console.log(this.contentList, "this.contentList"); this.contentList = res.datas; this.showList = true; }); @@ -197,8 +209,7 @@ for (let i = 0; i < filterList.length; i++) { const item = filterList[i]; if (item.file) { - const requestCtx = - this.config.requestCtx + `/file/api/ApiDownload?md5=${item.file}`; + const requestCtx = await this.getResourcePath(item.file); this.$set(item, "fileLink", requestCtx); } this.$set(item, "showDetail", false); @@ -211,35 +222,81 @@ } return filterList; }, + + // 鑾峰彇闃块噷浜戝姞閫熷湴鍧� (瑙嗛锛岄煶棰�) + async getResourcePath(md5) { + try { + // 濡傛灉杩斿洖鐨勬暟鎹负绌烘垨鏈畾涔夛紝鍒欐嫾鎺ラ粯璁や笅杞借矾寰� + return requestCtx + "/file/api/ApiDownload?md5=" + md5; + } catch (error) { + // 鎹曡幏寮傚父骞舵墦鍗伴敊璇棩蹇� + console.error("鑾峰彇璧勬簮璺緞澶辫触:", error); + // 杩斿洖涓�涓粯璁ゅ�兼垨鎶涘嚭閿欒锛堟牴鎹笟鍔¢渶姹傦級 + return requestCtx + "/file/api/ApiDownload?md5=" + md5; + } + }, + closeDetail(index, cindex, type) { for (let i = 0; i < this.contentList.length; i++) { const item = this.contentList[i]; - if (item && item.length > 0) { + if (item && item.list?.length > 0) { for (let j = 0; j < item.list.length; j++) { const citem = item.list[j]; - this.$set(citem, "showDetail", false); + this.$set(citem, "showChildDetail", false); } } } this.contentList[index].list[cindex].showDetail = false; }, showDetail(index, cindex, type, event) { + const rect = event.target.getBoundingClientRect(); + const screenWidth = window.innerWidth; + const popupWidth = 542; // 鍋囪寮规瀹藉害涓�200px + // 鍒ゆ柇瑙﹀彂鍏冪礌浣嶇疆 + if (rect.left + rect.width / 2 < screenWidth / 2) { + // 宸︿晶鏄剧ず寮规鍦ㄥ彸渚� + this.popupStyle = { + left: `${rect.right}px`, + top: `${rect.bottom - 150}px`, + }; + } else { + // 鍙充晶鏄剧ず寮规鍦ㄥ乏渚� + this.popupStyle = { + left: `${rect.left - popupWidth}px`, + top: `${rect.bottom - 150}px`, + }; + } + console.log(this.popupStyle.top, "this.top"); + console.log(this.popupStyle.left, "this.left"); + // if (rect.left - popupWidth < 0) { + // // 宸︿晶绌洪棿涓嶈冻鏃跺己鍒跺彸渚ф樉绀� + // this.popupStyle.left = `${rect.right}px`; + // } else if (rect.right + popupWidth > screenWidth) { + // // 鍙充晶绌洪棿涓嶈冻鏃跺己鍒跺乏渚ф樉绀� + // this.popupStyle.left = `${rect.left - popupWidth}px`; + // } + console.log(event, "event"); for (let i = 0; i < this.contentList.length; i++) { const item = this.contentList[i]; - if (item && item.length > 0) { + if (item && item.list?.length > 0) { for (let j = 0; j < item.list.length; j++) { const citem = item.list[j]; - this.$set(citem, "showDetail", false); - item.showDetail = false; + if (citem.showChildDetail) { + this.contentList[i].list[j].showDetail = false; + citem.showChildDetail = false; + } } } } if (this.contentList[index].list[cindex].type) { - this.contentList[index].list[cindex].showDetail = true; + this.contentList[index].list[cindex].showChildDetail = true; } - console.log(this.contentList[index].list, "this.contentList[index].list[cindex]"); + console.log( + this.contentList[index].list, + "this.contentList[index].list[cindex]" + ); }, }, }; @@ -254,6 +311,7 @@ display: flex; flex-direction: column; overflow: auto; + font-family: Source Han Sans; } .pageBox { @@ -363,15 +421,20 @@ cursor: pointer; position: relative; } - .gradchild:hover { - width: 25px; - height: 25px; - margin-top: 2px; - margin-right: 2px; + // transform: scale(1.1); + width: 23px; + height: 23px; cursor: pointer; position: relative; } + +/* 閲嶇疆瀛愬厓绱犵殑鏍峰紡 */ +// .gradchild:hover .detailDialog { +// transform: scale(1); +// z-index: 999; +// } + .item-circle { width: 100%; height: 20px; @@ -404,6 +467,10 @@ background: #fff; cursor: pointer; } +.item-circle:hover:before { + background-color: #b9a587; + border: 1px solid #8f7a5a; +} .item-text { margin-top: 16px; @@ -414,16 +481,19 @@ align-items: center; } .detailDialog { - position: absolute; - top: -700%; - transform: translateY(20%); - transform: translateX(-50%); + position: fixed; width: 524px; z-index: 9999; cursor: pointer; background: #fff; border: 2px solid #cbbeaa; box-shadow: 2px 2px 4px 1px rgba(0, 0, 0, 0.5); +} + +video { + border-radius: 10px; + border: 1px solid #dcdcdc; + box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1); } .yaerWindow { @@ -437,15 +507,15 @@ border: 2px solid #cbbeaa; box-shadow: 2px 2px 4px 1px rgba(0, 0, 0, 0.5); } -.detailDialog .dialogContent { - width: 100%; - height: 100%; - background-color: #fff; - position: relative; - padding: 5px; - z-index: 20; - box-sizing: border-box; -} +// .detailDialog .dialogContent { +// width: 100%; +// height: 100%; +// background-color: #fff; +// position: relative; +// padding: 5px; +// z-index: 20; +// box-sizing: border-box; +// } .closeBtn { position: absolute; width: 20px; @@ -466,5 +536,4 @@ color: #937950; } } - </style> diff --git a/src/views/chronology/yearWindow.vue b/src/views/chronology/yearWindow.vue index 3c12b53..e62f3c1 100644 --- a/src/views/chronology/yearWindow.vue +++ b/src/views/chronology/yearWindow.vue @@ -5,14 +5,14 @@ <div class="leftTxt" v-html="info.eventOverview"></div> <div class="rightimg"> <div class="imgBox" style="text-align: center" v-if="imgLink != ''"> - <div class="arrowBox leftArrowBox"> + <div class="arrowBox leftArrowBox" @click="leftArrow"> <img class="autoImg" :src="arrow" alt="" /> </div> <div class="imgBox"> <img class="autoImg" :src="imgLink" alt="" /> </div> - <div class="arrowBox"> - <img class="autoImg" :src="arrow" alt="" /> + <div class="arrowBox" @click="rightArrow"> + <img class="autoImg" :src="arrow" alt="" /> </div> </div> <div style="text-align: center; font-size: 18px; color: #999" v-else> @@ -39,15 +39,47 @@ title: "", imgLink: "", arrow, + currentIndex: 0, + imgList: [], }; }, - methods: {}, + methods: { + leftArrow() { + if (this.currentIndex == 0) { + this.currentIndex = this.imgList.length - 1; + this.imgLink = this.imgList[this.currentIndex]; + } else { + this.currentIndex--; + this.imgLink = this.imgList[this.currentIndex]; + } + }, + rightArrow() { + if (this.currentIndex == this.imgList.length - 1) { + this.currentIndex = 0; + this.imgLink = this.imgList[this.currentIndex]; + } else { + this.currentIndex++; + this.imgLink = this.imgList[this.currentIndex]; + } + }, + }, mounted() { - console.log(this.info); this.title = this.info.name.split("锛�")[0] + " " + this.info.name.split("锛�")[1]; - this.imgLink = getPublicImage(this.info.eventPictures); - console.log(this.imgLink); + console.log( + Array.isArray(this.info.eventPictures), + "Array.isArray(this.info.eventPictures)" + ); + if (Array.isArray(this.info.eventPictures)) { + console.log(1); + + this.imgList = this.info.eventPictures.map((item) => + getPublicImage(item) + ); + this.imgLink = this.imgList[0]; + } else { + this.imgLink = getPublicImage(this.info.eventPictures); + } }, }; </script> @@ -96,16 +128,16 @@ height: 30px; position: relative; } -.imgBox{ +.imgBox { display: flex; justify-content: center; align-items: center; } -.arrowBox{ +.arrowBox { margin: 0 5px; } -.leftArrowBox{ +.leftArrowBox { transform: rotate(180deg); } </style> diff --git a/src/views/directory/index.vue b/src/views/directory/index.vue index a953a4a..5ed4e5c 100644 --- a/src/views/directory/index.vue +++ b/src/views/directory/index.vue @@ -368,7 +368,7 @@ position: "top", //鏍囩鐨勪綅缃�� verticalAlign: "middle", //鏂囧瓧鍨傜洿瀵归綈鏂瑰紡锛岄粯璁よ嚜鍔ㄣ�� fontSize: 12, //鏂囧瓧鐨勫瓧浣撳ぇ灏� - color: "#bc1c00", + // color: "#bc1c00", }, // leaves: { // symbol: "emptyCircle", @@ -378,7 +378,7 @@ // }, expandAndCollapse: false, lineStyle: { - color: "#bc1c00", + // color: "#bc1c00", width: 1, }, itemStyle: { -- Gitblit v1.9.1