From 2b8cbeec005f8ac6f65818da28fc239cf82fc716 Mon Sep 17 00:00:00 2001 From: 杨磊 <505174330@qq.com> Date: 星期一, 28 四月 2025 10:50:31 +0800 Subject: [PATCH] 字体文件 --- src/views/chronology/index.vue | 1035 ++++++++++++++------------------------------------------- 1 files changed, 257 insertions(+), 778 deletions(-) diff --git a/src/views/chronology/index.vue b/src/views/chronology/index.vue index 30f7a07..e202f0f 100644 --- a/src/views/chronology/index.vue +++ b/src/views/chronology/index.vue @@ -30,7 +30,13 @@ <div>鍏朵粬</div> </div> </div> - <div class="contentBox"> + <div + class="contentBox" + element-loading-text="骞磋氨鍔犺浇涓�" + element-loading-spinner="el-icon-loading" + element-loading-background="rgba(0, 0, 0, 0)" + v-loading="!showList" + > <div class="chartsBox"> <div class="chartsItemBox" @@ -43,806 +49,239 @@ class="gradchild" v-for="(citem, cindex) in item.list" :style="{ background: citem.color }" - @mouseover="showDetail(index, cindex, 1)" - @mouseout="closeDetail(index, cindex, 0)" + @click.self="showDetail(index, cindex, 1, $event)" :key="cindex" > - <div class="detailDialog" v-if="citem.showDetail"> - <!-- <div class="dialogContent" @click="gotoDetail(citem)"> --> + <div + class="detailDialog" + :style="popupStyle" + v-if="citem.showChildDetail" + > + <div + class="closeBtn" + @click.stop="closeDetail(index, cindex, 0)" + > + <i class="el-icon-close"></i> + </div> <floatingWindow :info="citem" /> - <!-- </div> --> </div> </div> </div> - <div class="item-circle"></div> + <div class="item-circle" @click="showYearWindow(index, 1)"></div> <div class="item-text"> <div class=""> - {{ item.year }} + {{ item.name.split("锛�")[0] }} </div> <div style="margin-top: 10px"> - {{ item.name }} + {{ item.age }} </div> + </div> + <div class="yaerWindow" v-if="item.showDetail"> + <div class="closeBtn" @click="closeYearWindow(index, 0)"> + <i class="el-icon-close"></i> + </div> + <yearWindow :info="item" /> </div> </div> </div> </div> + <div></div> </div> </div> </div> </template> <script> -import echarts from "@/assets/js/echarts.min.js"; +import moment from "moment"; import floatingWindow from "./floatingWindow.vue"; +import yearWindow from "./yearWindow.vue"; +import { nextTick } from "vue"; + export default { components: { floatingWindow, + yearWindow, }, data() { return { - contentList: [ - { - list: [ - { - color: "#87A7B9", - showDetail: false, - name: "鐜嬫案鐐�", - year: "1938", - type: "journal", - id: "1", - }, - ], - name: "鍑虹敓", - year: "1938", - }, - { - list: [ - { - color: "#87A7B9", - showDetail: false, - name: "鐜嬫案鐐�", - year: "1937", - type: "image", - id: "1", - }, - { - color: "#87A7B9", - showDetail: false, - name: "鐜嬫案鐐�", - year: "1937", - type: "book", - id: "2", - }, - ], - name: "涓�宀�", - year: "1939", - }, - { - list: [ - { - color: "#87A7B9", - showDetail: false, - name: "鐜嬫案鐐�", - year: "1937", - id: "2", - }, - { - color: "#87A7B9", - showDetail: false, - name: "鐜嬫案鐐�", - type: "video", - id: "3", - }, - { - color: "#87A7B9", - showDetail: false, - name: "鐜嬫案鐐�", - type: "audio", - id: "4", - }, - { - color: "#87A7B9", - showDetail: false, - name: "鐜嬫案鐐�", - id: "5", - }, - ], - name: "3宀�", - year: "1941", - }, - { - list: [ - { - color: "#87A7B9", - showDetail: false, - name: "鐜嬫案鐐�", - year: "1937", - id: "1", - }, - { - color: "#6F8F5A", - showDetail: false, - name: "鐜嬫案鐐�", - year: "1937", - id: "2", - }, - { - color: "#87A7B9", - showDetail: false, - name: "鐜嬫案鐐�", - id: "3", - }, - { - color: "#87A7B9", - showDetail: false, - name: "鐜嬫案鐐�", - id: "4", - }, - { - color: "#B9A587", - showDetail: false, - name: "鐜嬫案鐐�", - id: "5", - }, - ], - name: "4宀�", - year: "1941", - }, - { - list: [ - { - color: "#87A7B9", - showDetail: false, - name: "鐜嬫案鐐�", - year: "1937", - id: "1", - }, - { - color: "#87A7B9", - showDetail: false, - name: "鐜嬫案鐐�", - year: "1937", - id: "1", - }, - { - color: "#87A7B9", - showDetail: false, - name: "鐜嬫案鐐�", - year: "1937", - id: "1", - }, - { - color: "#CB9D9D", - showDetail: false, - name: "鐜嬫案鐐�", - year: "1937", - id: "1", - }, - { - color: "#87A7B9", - showDetail: false, - name: "鐜嬫案鐐�", - year: "1937", - id: "1", - }, - { - color: "#CB9D9D", - showDetail: false, - name: "鐜嬫案鐐�", - year: "1937", - id: "1", - }, - ], - name: "5宀�", - year: "1942", - }, - { - list: [ - { - color: "#87A7B9", - showDetail: false, - name: "鐜嬫案鐐�", - year: "1937", - id: "1", - }, - { - color: "#87A7B9", - showDetail: false, - name: "鐜嬫案鐐�", - year: "1937", - id: "1", - }, - { - color: "#87A7B9", - showDetail: false, - name: "鐜嬫案鐐�", - year: "1937", - id: "1", - }, - { - color: "#CB9D9D", - showDetail: false, - name: "鐜嬫案鐐�", - year: "1937", - id: "1", - }, - { - color: "#87A7B9", - showDetail: false, - name: "鐜嬫案鐐�", - year: "1937", - id: "1", - }, - { - color: "#CB9D9D", - showDetail: false, - name: "鐜嬫案鐐�", - year: "1937", - id: "1", - }, - ], - name: "5宀�", - year: "1942", - }, - { - list: [ - { - color: "#87A7B9", - showDetail: false, - name: "鐜嬫案鐐�", - year: "1937", - id: "1", - }, - { - color: "#87A7B9", - showDetail: false, - name: "鐜嬫案鐐�", - year: "1937", - id: "1", - }, - { - color: "#87A7B9", - showDetail: false, - name: "鐜嬫案鐐�", - year: "1937", - id: "1", - }, - { - color: "#CB9D9D", - showDetail: false, - name: "鐜嬫案鐐�", - year: "1937", - id: "1", - }, - { - color: "#87A7B9", - showDetail: false, - name: "鐜嬫案鐐�", - year: "1937", - id: "1", - }, - { - color: "#CB9D9D", - showDetail: false, - name: "鐜嬫案鐐�", - year: "1937", - id: "1", - }, - ], - name: "5宀�", - year: "1942", - }, - { - list: [ - { - color: "#87A7B9", - showDetail: false, - name: "鐜嬫案鐐�", - year: "1937", - id: "1", - }, - { - color: "#87A7B9", - showDetail: false, - name: "鐜嬫案鐐�", - year: "1937", - id: "1", - }, - { - color: "#87A7B9", - showDetail: false, - name: "鐜嬫案鐐�", - year: "1937", - id: "1", - }, - { - color: "#CB9D9D", - showDetail: false, - name: "鐜嬫案鐐�", - year: "1937", - id: "1", - }, - { - color: "#87A7B9", - showDetail: false, - name: "鐜嬫案鐐�", - year: "1937", - id: "1", - }, - { - color: "#CB9D9D", - showDetail: false, - name: "鐜嬫案鐐�", - year: "1937", - id: "1", - }, - ], - name: "5宀�", - year: "1942", - }, - { - list: [ - { - color: "#87A7B9", - showDetail: false, - name: "鐜嬫案鐐�", - year: "1937", - id: "1", - }, - { - color: "#87A7B9", - showDetail: false, - name: "鐜嬫案鐐�", - year: "1937", - id: "1", - }, - { - color: "#87A7B9", - showDetail: false, - name: "鐜嬫案鐐�", - year: "1937", - id: "1", - }, - { - color: "#CB9D9D", - showDetail: false, - name: "鐜嬫案鐐�", - year: "1937", - id: "1", - }, - { - color: "#87A7B9", - showDetail: false, - name: "鐜嬫案鐐�", - year: "1937", - id: "1", - }, - { - color: "#CB9D9D", - showDetail: false, - name: "鐜嬫案鐐�", - year: "1937", - id: "1", - }, - ], - name: "5宀�", - year: "1942", - }, - { - list: [ - { - color: "#87A7B9", - showDetail: false, - name: "鐜嬫案鐐�", - year: "1937", - id: "1", - }, - { - color: "#87A7B9", - showDetail: false, - name: "鐜嬫案鐐�", - year: "1937", - id: "1", - }, - { - color: "#87A7B9", - showDetail: false, - name: "鐜嬫案鐐�", - year: "1937", - id: "1", - }, - { - color: "#CB9D9D", - showDetail: false, - name: "鐜嬫案鐐�", - year: "1937", - id: "1", - }, - { - color: "#87A7B9", - showDetail: false, - name: "鐜嬫案鐐�", - year: "1937", - id: "1", - }, - { - color: "#CB9D9D", - showDetail: false, - name: "鐜嬫案鐐�", - year: "1937", - id: "1", - }, - ], - name: "5宀�", - year: "1942", - }, - { - list: [ - { - color: "#87A7B9", - showDetail: false, - name: "鐜嬫案鐐�", - year: "1937", - id: "1", - }, - { - color: "#87A7B9", - showDetail: false, - name: "鐜嬫案鐐�", - year: "1937", - id: "1", - }, - { - color: "#87A7B9", - showDetail: false, - name: "鐜嬫案鐐�", - year: "1937", - id: "1", - }, - { - color: "#CB9D9D", - showDetail: false, - name: "鐜嬫案鐐�", - year: "1937", - id: "1", - }, - { - color: "#87A7B9", - showDetail: false, - name: "鐜嬫案鐐�", - year: "1937", - id: "1", - }, - { - color: "#CB9D9D", - showDetail: false, - name: "鐜嬫案鐐�", - year: "1937", - id: "1", - }, - ], - name: "5宀�", - year: "1942", - }, - { - list: [ - { - color: "#87A7B9", - showDetail: false, - name: "鐜嬫案鐐�", - year: "1937", - id: "1", - }, - { - color: "#87A7B9", - showDetail: false, - name: "鐜嬫案鐐�", - year: "1937", - id: "1", - }, - { - color: "#87A7B9", - showDetail: false, - name: "鐜嬫案鐐�", - year: "1937", - id: "1", - }, - { - color: "#CB9D9D", - showDetail: false, - name: "鐜嬫案鐐�", - year: "1937", - id: "1", - }, - { - color: "#87A7B9", - showDetail: false, - name: "鐜嬫案鐐�", - year: "1937", - id: "1", - }, - { - color: "#CB9D9D", - showDetail: false, - name: "鐜嬫案鐐�", - year: "1937", - id: "1", - }, - ], - name: "5宀�", - year: "1942", - }, - { - list: [ - { - color: "#87A7B9", - showDetail: false, - name: "鐜嬫案鐐�", - year: "1937", - id: "1", - }, - { - color: "#87A7B9", - showDetail: false, - name: "鐜嬫案鐐�", - year: "1937", - id: "1", - }, - { - color: "#87A7B9", - showDetail: false, - name: "鐜嬫案鐐�", - year: "1937", - id: "1", - }, - { - color: "#CB9D9D", - showDetail: false, - name: "鐜嬫案鐐�", - year: "1937", - id: "1", - }, - { - color: "#87A7B9", - showDetail: false, - name: "鐜嬫案鐐�", - year: "1937", - id: "1", - }, - { - color: "#CB9D9D", - showDetail: false, - name: "鐜嬫案鐐�", - year: "1937", - id: "1", - }, - ], - name: "5宀�", - year: "1942", - }, - { - list: [ - { - color: "#87A7B9", - showDetail: false, - name: "鐜嬫案鐐�", - year: "1937", - id: "1", - }, - { - color: "#87A7B9", - showDetail: false, - name: "鐜嬫案鐐�", - year: "1937", - id: "1", - }, - { - color: "#87A7B9", - showDetail: false, - name: "鐜嬫案鐐�", - year: "1937", - id: "1", - }, - { - color: "#CB9D9D", - showDetail: false, - name: "鐜嬫案鐐�", - year: "1937", - id: "1", - }, - { - color: "#87A7B9", - showDetail: false, - name: "鐜嬫案鐐�", - year: "1937", - id: "1", - }, - { - color: "#CB9D9D", - showDetail: false, - name: "鐜嬫案鐐�", - year: "1937", - id: "1", - }, - ], - name: "5宀�", - year: "1942", - }, - { - list: [ - { - color: "#87A7B9", - showDetail: false, - name: "鐜嬫案鐐�", - year: "1937", - id: "1", - }, - { - color: "#87A7B9", - showDetail: false, - name: "鐜嬫案鐐�", - year: "1937", - id: "1", - }, - { - color: "#87A7B9", - showDetail: false, - name: "鐜嬫案鐐�", - year: "1937", - id: "1", - }, - { - color: "#CB9D9D", - showDetail: false, - name: "鐜嬫案鐐�", - year: "1937", - id: "1", - }, - { - color: "#87A7B9", - showDetail: false, - name: "鐜嬫案鐐�", - year: "1937", - id: "1", - }, - { - color: "#CB9D9D", - showDetail: false, - name: "鐜嬫案鐐�", - year: "1937", - id: "1", - }, - ], - name: "5宀�", - year: "1942", - }, - { - list: [ - { - color: "#87A7B9", - showDetail: false, - name: "鐜嬫案鐐�", - year: "1937", - id: "1", - }, - { - color: "#87A7B9", - showDetail: false, - name: "鐜嬫案鐐�", - year: "1937", - id: "1", - }, - { - color: "#87A7B9", - showDetail: false, - name: "鐜嬫案鐐�", - year: "1937", - id: "1", - }, - { - color: "#CB9D9D", - showDetail: false, - name: "鐜嬫案鐐�", - year: "1937", - id: "1", - }, - { - color: "#87A7B9", - showDetail: false, - name: "鐜嬫案鐐�", - year: "1937", - id: "1", - }, - { - color: "#CB9D9D", - showDetail: false, - name: "鐜嬫案鐐�", - year: "1937", - id: "1", - }, - ], - name: "5宀�", - year: "1942", - }, - { - list: [ - { - color: "#87A7B9", - showDetail: false, - name: "鐜嬫案鐐�", - year: "1937", - id: "1", - }, - { - color: "#87A7B9", - showDetail: false, - name: "鐜嬫案鐐�", - year: "1937", - id: "1", - }, - { - color: "#87A7B9", - showDetail: false, - name: "鐜嬫案鐐�", - year: "1937", - id: "1", - }, - { - color: "#CB9D9D", - showDetail: false, - name: "鐜嬫案鐐�", - year: "1937", - id: "1", - }, - { - color: "#87A7B9", - showDetail: false, - name: "鐜嬫案鐐�", - year: "1937", - id: "1", - }, - { - color: "#CB9D9D", - showDetail: false, - name: "鐜嬫案鐐�", - year: "1937", - id: "1", - }, - ], - name: "5宀�", - year: "1942", - }, - ], + contentList: [], + currentYear: null, + showList: false, + colorList: { + journal: "#87a7b9", + books: "#c48787", + video: "#6f8f5a", + audio: "#b9a587", + newspaper: "#8d77b3", + other: "#009f9f", + }, + popupStyle: { + left: "0", + top: "0", + }, }; }, - methods: { - gotoDetail(item) {}, + mounted() { + this.getListData(); + }, - closeDetail(index, cindex, type) { - // console.log(cindex, "cindex"); - // for (let i = 0; i < this.contentList.length; i++) { - // const item = this.contentList[i]; - // for (let j = 0; j < item.list.length; j++) { - // const citem = item.list[j]; - // this.$set(citem, "showDetail", false); - // } - // } - - }, - showDetail(index, cindex, type) { + methods: { + showYearWindow(item, event) { + console.log(item, "item"); for (let i = 0; i < this.contentList.length; i++) { const item = this.contentList[i]; - for (let j = 0; j < item.list.length; j++) { - const citem = item.list[j]; - this.$set(citem, "showDetail", false); + this.$set(item, "showDetail", false); + } + this.contentList[item].showDetail = true; + }, + closeYearWindow(item) { + for (let i = 0; i < this.contentList.length; i++) { + const item = this.contentList[i]; + this.$set(item, "showDetail", false); + } + }, + gotoDetail(item) {}, + getListData() { + this.MG.resource + .getItem({ + path: "WYY_chronology", + fields: { + year: [], + age: [], + eventOverview: [], + eventPictures: [], + }, + paging: { + start: 0, + size: 999, + }, + }) + .then(async (res) => { + for (let i = 0; i < res.datas.length; i++) { + const item = res.datas[i]; + this.$set(item, "showDetail", false); + const listData = await this.getYearResource(item); + if (listData.length > 0) { + this.$set(item, "list", listData); + for (let j = 0; j < listData.length; j++) { + const element = listData[j]; + this.$set(element, "showChildDetail", false); + } + console.log(item, "item"); + } + } + + console.log(this.contentList, "this.contentList"); + this.contentList = res.datas; + this.showList = true; + }); + }, + + async getYearResource(item) { + const endDate = item.year.split("/")[0] + "/12/31 23:59:59"; + const startDate = item.year.split("/")[0] + "/01/01 00:00:00"; + const yearDataList = await this.MG.resource.getItem({ + path: "*", + queryType: "*", + fields: { + "year>=": startDate, + "year<=": endDate, + source: [], + IssueNumber: [], + author: [], + authorsUnits: [], + abstract: [], + keyWords: [], + subjectAffiliation: [], + file: [], + }, + SysType: "CmsItem", + paging: { + start: 0, + size: 999, + }, + }); + const filterList = yearDataList.datas.filter((item) => { + return item.cmsItemType != "chronology" && item.cmsItemType != "AWARD"; + }); + + if (filterList && filterList.length > 0) { + 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}`; + this.$set(item, "fileLink", requestCtx); + } + this.$set(item, "showDetail", false); + this.$set(item, "color", this.colorList[item.cmsItemType]); } } - if (this.contentList[index].list[cindex].type) { - this.contentList[index].list[cindex].showDetail = true; + if (filterList.length > 0) { + console.log(filterList, "filterList"); + } + return filterList; + }, + closeDetail(index, cindex, type) { + for (let i = 0; i < this.contentList.length; i++) { + const item = this.contentList[i]; + if (item && item.list?.length > 0) { + for (let j = 0; j < item.list.length; j++) { + const citem = item.list[j]; + this.$set(citem, "showChildDetail", false); + } + } + } + this.contentList[index].list[cindex].showDetail = false; + + console.log( + this.contentList[index].list, + "this.contentList[index].list[cindex]" + ); + }, + 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.contentList[index].list[cindex].showDetail = false; + // 鍙充晶鏄剧ず寮规鍦ㄥ乏渚� + 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`; + // } + for (let i = 0; i < this.contentList.length; i++) { + const item = this.contentList[i]; + if (item && item.list?.length > 0) { + for (let j = 0; j < item.list.length; j++) { + const citem = item.list[j]; + 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].showChildDetail = true; } }, }, @@ -887,6 +326,12 @@ display: flex; align-items: end; overflow: auto; + + ::v-deep .el-loading-spinner .el-loading-text { + font-size: 14px; + color: #937950; + } + .chartsBox { white-space: nowrap; padding: 0 80px; @@ -899,7 +344,7 @@ // } /* 瀵逛簬WebKit娴忚鍣ㄥ拰Blink寮曟搸锛堝Chrome, Opera锛� */ ::-webkit-scrollbar { - width: 16px; /* 婊氬姩鏉$殑瀹藉害 */ + width: 4px; /* 婊氬姩鏉$殑瀹藉害 */ height: 16px; /* 婊氬姩鏉$殑楂樺害 */ } @@ -909,7 +354,8 @@ ::-webkit-scrollbar-thumb { background: #b9a587; /* 婊氬姩鏉℃粦鍧楃殑棰滆壊 */ - border-radius: 16px; /* 婊氬姩鏉℃粦鍧楃殑鍦嗚 */ + border-radius: 2px; /* 婊氬姩鏉℃粦鍧楃殑鍦嗚 */ + width: 4px; } ::-webkit-scrollbar-thumb:hover { @@ -943,6 +389,7 @@ .chartsItem { width: 100%; height: 100%; + position: relative; } .item-grad { @@ -960,6 +407,19 @@ position: relative; } +// .gradchild :hover { +// transform: scale(1.1); +// z-index: 999; +// } + +/* 閲嶇疆瀛愬厓绱犵殑鏍峰紡 */ +// .gradchild:hover .detailDialog { +// transform: scale(1); +// z-index: 999; +// } +.item-circle :hover ::before { + background-color: #b9a587 !important; +} .item-circle { width: 100%; height: 20px; @@ -1001,11 +461,8 @@ align-items: center; } .detailDialog { - position: absolute; - // left: -54px; - // bottom: 50px; - top: -550%; - width: 400px; + position: fixed; + width: 524px; z-index: 9999; cursor: pointer; background: #fff; @@ -1013,13 +470,35 @@ box-shadow: 2px 2px 4px 1px rgba(0, 0, 0, 0.5); } -.detailDialog .dialogContent { - width: 100%; - height: 100%; - background-color: #fff; - position: relative; - padding: 15px; - z-index: 20; - box-sizing: border-box; +.yaerWindow { + position: absolute; + left: -54px; + bottom: 50px; + width: 700px; + z-index: 9999; + cursor: pointer; + background: #fff; + 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; +// } +.closeBtn { + position: absolute; + width: 20px; + height: 20px; + top: 10px; + right: 5px; + z-index: 999; +} +::v-deep .el-loading-spinner { + color: #937950 !important; } </style> -- Gitblit v1.9.1