| | |
| | | }).then((resp) => { |
| | | if (resp.length > 0) { |
| | | const data = resp[0]; |
| | | console.log(data,'datas'); |
| | | debugger |
| | | const datas = handleQueryResourceListData({ |
| | | datas: data.datas, |
| | | fields, |
| | |
| | | for (let fieldKey in fields) { |
| | | if (item.datas[fieldKey]) { |
| | | const values = JSON.parse(item.datas[fieldKey]); |
| | | |
| | | |
| | | |
| | | if (values.length > 0) { |
| | | //特殊处理动态行字段 |
| | | if (fieldKey == "eventPictures") { |
| | | _fields[fieldKey] = values.map(citem => citem.Value); |
| | | }else{ |
| | | // 用字段名处理返回的字段值 |
| | | if (values[0].Value) { |
| | | _fields[fieldKey] = values[0].Value; |
| | |
| | | } |
| | | item.datas[fieldKey] = values[0]; |
| | | } |
| | | |
| | | } |
| | | } |
| | | } |
| | | } |
| | |
| | | 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, |
| | | }, |
| | | |
| | | ], |
| | | }, |
| | | // 文献来源 |
| | |
| | | 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, |
| | | }, |
| | | |
| | | ], |
| | | }, |
| | | // 学科 |
| | |
| | | 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)" |
| | |
| | | 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: { |
| | |
| | | audio: "#b9a587", |
| | | newspaper: "#8d77b3", |
| | | other: "#009f9f", |
| | | }, |
| | | popupStyle: { |
| | | left: "0", |
| | | top: "0", |
| | | }, |
| | | }; |
| | | }, |
| | |
| | | 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; |
| | | }); |
| | |
| | | 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); |
| | |
| | | } |
| | | 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]" |
| | | ); |
| | | }, |
| | | }, |
| | | }; |
| | |
| | | display: flex; |
| | | flex-direction: column; |
| | | overflow: auto; |
| | | font-family: Source Han Sans; |
| | | } |
| | | |
| | | .pageBox { |
| | |
| | | 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; |
| | |
| | | background: #fff; |
| | | cursor: pointer; |
| | | } |
| | | .item-circle:hover:before { |
| | | background-color: #b9a587; |
| | | border: 1px solid #8f7a5a; |
| | | } |
| | | |
| | | .item-text { |
| | | margin-top: 16px; |
| | |
| | | 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 { |
| | |
| | | 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; |
| | |
| | | color: #937950; |
| | | } |
| | | } |
| | | |
| | | </style> |
| | |
| | | <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"> |
| | | <div class="arrowBox" @click="rightArrow"> |
| | | <img class="autoImg" :src="arrow" alt="" /> |
| | | </div> |
| | | </div> |
| | |
| | | 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]; |
| | | 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); |
| | | console.log(this.imgLink); |
| | | } |
| | | }, |
| | | }; |
| | | </script> |
| | |
| | | position: "top", //标签的位置。 |
| | | verticalAlign: "middle", //文字垂直对齐方式,默认自动。 |
| | | fontSize: 12, //文字的字体大小 |
| | | color: "#bc1c00", |
| | | // color: "#bc1c00", |
| | | }, |
| | | // leaves: { |
| | | // symbol: "emptyCircle", |
| | |
| | | // }, |
| | | expandAndCollapse: false, |
| | | lineStyle: { |
| | | color: "#bc1c00", |
| | | // color: "#bc1c00", |
| | | width: 1, |
| | | }, |
| | | itemStyle: { |