<template>
|
<div class="page">
|
<div class="page-header">
|
<p>王永炎院士年谱</p>
|
</div>
|
<div class="pageBox">
|
<div class="tagBox">
|
<div class="tagItem">
|
<div style="background-color: #87a7b9" class="item-tag"></div>
|
<div>期刊</div>
|
</div>
|
<div class="tagItem">
|
<div style="background-color: #c48787" class="item-tag"></div>
|
<div>图书</div>
|
</div>
|
<div class="tagItem">
|
<div style="background-color: #6f8f5a" class="item-tag"></div>
|
<div>视频</div>
|
</div>
|
<div class="tagItem">
|
<div style="background-color: #b9a587" class="item-tag"></div>
|
<div>音频</div>
|
</div>
|
<div class="tagItem">
|
<div style="background-color: #8d77b3" class="item-tag"></div>
|
<div>报纸</div>
|
</div>
|
<div class="tagItem">
|
<div style="background-color: #009f9f" class="item-tag"></div>
|
<div>其他</div>
|
</div>
|
</div>
|
<div class="contentBox">
|
<div class="chartsBox" v-if="showList">
|
<div
|
class="chartsItemBox"
|
v-for="(item, index) in contentList"
|
:key="index"
|
>
|
<div class="chartsItem">
|
<div class="item-grad">
|
<div
|
class="gradchild"
|
v-for="(citem, cindex) in item.list"
|
:style="{ background: citem.color }"
|
@mouseover="showDetail(index, cindex, 1)"
|
: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" @click="showYearWindow(index, 1)"></div>
|
|
<div class="item-text">
|
<div class="">
|
{{ item.name.split("，")[0] }}
|
</div>
|
<div style="margin-top: 10px">
|
{{ 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>
|
</template>
|
|
<script>
|
import moment from "moment";
|
import floatingWindow from "./floatingWindow.vue";
|
import yearWindow from "./yearWindow.vue";
|
|
export default {
|
components: {
|
floatingWindow,
|
yearWindow,
|
},
|
data() {
|
return {
|
contentList: [],
|
currentYear: null,
|
showList: false,
|
colorList: {
|
journal: "#87a7b9",
|
books: "#c48787",
|
video: "#6f8f5a",
|
audio: "#b9a587",
|
newspaper: "#8d77b3",
|
other: "#009f9f",
|
},
|
};
|
},
|
|
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(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);
|
}
|
}
|
}
|
this.contentList[index].list[cindex].showDetail = false;
|
},
|
showDetail(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);
|
}
|
}
|
}
|
if (this.contentList[index].list[cindex].type) {
|
this.contentList[index].list[cindex].showDetail = true;
|
} else {
|
this.contentList[index].list[cindex].showDetail = false;
|
}
|
},
|
},
|
};
|
</script>
|
|
<style lang="less" scoped>
|
.page {
|
width: 100%;
|
height: 100%;
|
box-sizing: border-box;
|
background-color: #e9e1d4;
|
display: flex;
|
flex-direction: column;
|
overflow: auto;
|
}
|
|
.pageBox {
|
flex: 1;
|
overflow: hidden;
|
display: flex;
|
flex-direction: column;
|
.tagBox {
|
display: flex;
|
margin-top: 20px;
|
.item-tag {
|
width: 20px;
|
height: 20px;
|
margin-right: 10px;
|
}
|
.tagItem {
|
display: flex;
|
line-height: 20px;
|
margin-left: 30px;
|
}
|
}
|
.contentBox {
|
flex: 1;
|
padding-bottom: 100px;
|
width: 100%;
|
height: 100%;
|
display: flex;
|
align-items: end;
|
overflow: auto;
|
.chartsBox {
|
white-space: nowrap;
|
padding: 0 80px;
|
width: calc(100vw - 400px);
|
padding-bottom: 100px;
|
}
|
// &::-webkit-scrollbar {
|
// width: 0 !important;
|
// height: 0 !important;
|
// }
|
/* 对于WebKit浏览器和Blink引擎（如Chrome, Opera） */
|
::-webkit-scrollbar {
|
width: 16px; /* 滚动条的宽度 */
|
height: 16px; /* 滚动条的高度 */
|
}
|
|
::-webkit-scrollbar-track {
|
background: #ebe5d6; /* 滚动条轨道的颜色 */
|
}
|
|
::-webkit-scrollbar-thumb {
|
background: #b9a587; /* 滚动条滑块的颜色 */
|
border-radius: 16px; /* 滚动条滑块的圆角 */
|
}
|
|
::-webkit-scrollbar-thumb:hover {
|
background: #b9a587; /* 鼠标悬停在滚动条滑块上的颜色 */
|
}
|
}
|
}
|
.page-header {
|
height: 9.4%;
|
width: 100%;
|
text-align: left;
|
margin-bottom: 8px;
|
border-bottom: 2px solid #937950;
|
|
p {
|
padding: 1.6% 0 1.55% 0;
|
font-family: Alimama DongFangDaKai;
|
font-size: 30px;
|
text-indent: 1em;
|
border-bottom: 1px solid #937950;
|
}
|
}
|
.chartsItemBox {
|
display: inline-block;
|
width: 105px;
|
height: 100%;
|
position: relative;
|
margin-right: 30px;
|
}
|
|
.chartsItem {
|
width: 100%;
|
height: 100%;
|
position: relative;
|
}
|
|
.item-grad {
|
width: 80px;
|
display: flex;
|
flex-wrap: wrap-reverse;
|
}
|
|
.gradchild {
|
width: 20px;
|
height: 20px;
|
margin-top: 2px;
|
margin-right: 2px;
|
cursor: pointer;
|
position: relative;
|
}
|
|
.item-circle {
|
width: 100%;
|
height: 20px;
|
margin-top: 20px;
|
position: relative;
|
}
|
|
.item-circle::after {
|
content: "";
|
position: absolute;
|
top: 9px;
|
display: block;
|
width: 135px;
|
height: 2px;
|
background-color: #b9a587;
|
z-index: 1;
|
}
|
.item-circle::before {
|
content: "";
|
display: block;
|
width: 18px;
|
height: 18px;
|
border-radius: 50%;
|
border: 1px solid #b9a587;
|
position: absolute;
|
top: 0;
|
left: 50%;
|
margin-left: -9px;
|
z-index: 99;
|
background: #fff;
|
}
|
|
.item-text {
|
margin-top: 16px;
|
font-size: 18px;
|
color: #b9a587;
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
}
|
.detailDialog {
|
position: absolute;
|
// left: -54px;
|
// bottom: 50px;
|
top: -550%;
|
width: 400px;
|
z-index: 9999;
|
cursor: pointer;
|
background: #fff;
|
border: 2px solid #cbbeaa;
|
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: 5px;
|
z-index: 20;
|
box-sizing: border-box;
|
}
|
.closeBtn {
|
position: absolute;
|
width: 20px;
|
height: 20px;
|
top: 10px;
|
right: 5px;
|
z-index: 999;
|
}
|
</style>
|
