From 3eba8102f54dba44758865df0cccf4aae8aea2da Mon Sep 17 00:00:00 2001 From: 杨磊 <505174330@qq.com> Date: 星期一, 21 四月 2025 18:28:25 +0800 Subject: [PATCH] 年谱接口 --- src/views/chronology/index.vue | 915 ++++++++++----------------------------------------------- 1 files changed, 161 insertions(+), 754 deletions(-) diff --git a/src/views/chronology/index.vue b/src/views/chronology/index.vue index b2f7689..f60bbfb 100644 --- a/src/views/chronology/index.vue +++ b/src/views/chronology/index.vue @@ -31,7 +31,7 @@ </div> </div> <div class="contentBox"> - <div class="chartsBox"> + <div class="chartsBox" v-if="showList"> <div class="chartsItemBox" v-for="(item, index) in contentList" @@ -44,24 +44,36 @@ v-for="(citem, cindex) in item.list" :style="{ background: citem.color }" @mouseover="showDetail(index, cindex, 1)" - @mouseout="closeDetail(index, cindex, 0)" :key="cindex" > <div class="detailDialog" v-if="citem.showDetail"> <!-- <div class="dialogContent" @click="gotoDetail(citem)"> --> + <div + class="closeBtn" + @click="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> @@ -72,772 +84,147 @@ </template> <script> +import moment from "moment"; import floatingWindow from "./floatingWindow.vue"; +import yearWindow from "./yearWindow.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", + }, }; }, - methods: { - gotoDetail(item) {}, + mounted() { + this.getListData(); + }, + methods: { + showYearWindow(item) { + console.log(item, "item"); + for (let i = 0; i < this.contentList.length; i++) { + const item = this.contentList[i]; + 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); + console.log(item, "item"); + } + } + + console.log(this.contentList, "this.contentList"); + this.contentList = res.datas.reverse(); + 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); + console.log(item.fileLink, "item.fileLink"); + } + this.$set(item, "showDetail", false); + this.$set(item, "color", this.colorList[item.cmsItemType]); + } + } + return filterList; + }, 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); - // } - // } - + console.log(index, cindex, type); + for (let i = 0; i < this.contentList.length; i++) { + const item = this.contentList[i]; + if (item && item.length > 0) { + for (let j = 0; j < item.list.length; j++) { + const citem = item.list[j]; + this.$set(citem, "showDetail", false); + } + } + } }, showDetail(index, cindex, type) { 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); + if (item && item.length > 0) { + for (let j = 0; j < item.list.length; j++) { + const citem = item.list[j]; + this.$set(citem, "showDetail", false); + } } } - if (this.contentList[index].list[cindex].type) { this.contentList[index].list[cindex].showDetail = true; } else { @@ -942,6 +329,7 @@ .chartsItem { width: 100%; height: 100%; + position: relative; } .item-grad { @@ -1012,13 +400,32 @@ box-shadow: 2px 2px 4px 1px rgba(0, 0, 0, 0.5); } +.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: 15px; + padding: 5px; z-index: 20; box-sizing: border-box; } +.closeBtn { + position: absolute; + width: 20px; + height: 20px; + top: 10px; + right: 5px; + z-index: 999; +} </style> -- Gitblit v1.9.1