From 5e73d562bae941a7658c3c13fdb585461f1a24e4 Mon Sep 17 00:00:00 2001 From: zhongshujie <2862698242@qq.com> Date: 星期一, 28 四月 2025 21:21:07 +0800 Subject: [PATCH] Merge branch 'master' of http://182.92.203.7:2001/r/wyyDatabase --- src/assets/js/middleGround/api/resource.js | 1 src/views/home/index.vue | 14 src/views/achievements/index.vue | 330 ++++++++++++++++--------- src/assets/js/middleGround/tool.js | 21 + src/views/chronology/yearWindow.vue | 52 +++ src/components/form/form.vue | 2 src/views/chronology/index.vue | 135 +++++++-- src/views/directory/index.vue | 213 ++++++++++----- 8 files changed, 520 insertions(+), 248 deletions(-) diff --git a/src/assets/js/middleGround/api/resource.js b/src/assets/js/middleGround/api/resource.js index eeca636..112b320 100644 --- a/src/assets/js/middleGround/api/resource.js +++ b/src/assets/js/middleGround/api/resource.js @@ -89,7 +89,6 @@ }).then((resp) => { if (resp.length > 0) { const data = resp[0]; - console.log(data,'datas'); 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/components/form/form.vue b/src/components/form/form.vue index b6bd958..a6a3a84 100644 --- a/src/components/form/form.vue +++ b/src/components/form/form.vue @@ -4,7 +4,7 @@ " :model="from" class="row demo-form-inline col-xs-12"> <el-row :gutter="10"> <el-form-item style="width: 33%" v-for="(item, i) in from.from" :key="i" :label="item.label"> - <el-input v-if="item.type === 'input'" v-model="item.value" :placeholder="item.label"></el-input> + <el-input v-if="item.type === 'input'" v-model="item.value" :placeholder="item.label" :type="item.name == 'year' ? 'number' : 'text'"></el-input> </el-form-item> <!-- 鍏朵粬琛ㄥ崟椤圭渷鐣� --> <!-- <el-form-item style="display:block; "> --> diff --git a/src/views/achievements/index.vue b/src/views/achievements/index.vue index 9658632..c5fd0fa 100644 --- a/src/views/achievements/index.vue +++ b/src/views/achievements/index.vue @@ -19,12 +19,17 @@ </ul> <!-- 楂樼骇鎼滅储 --> <div v-if="isDisplay" class="page-search"> - <MyForm class="myfrom" @submit=" - (data) => { - CurrentPage = 1; - onSubmit(data); - } - " @reset="resetForm" :from="from" /> + <MyForm + class="myfrom" + @submit=" + (data) => { + CurrentPage = 1; + onSubmit(data); + } + " + @reset="resetForm" + :from="from" + /> </div> <!-- 鎼滅储缁撴灉 --> <div class="page-content"> @@ -34,15 +39,31 @@ <li class="left-title"> <span>{{ category.title }}</span> <p @click="category.isDisplay = !category.isDisplay"> - <img :src="[category.isDisplay ? topIcon : bottomIcon]" alt="" /> + <img + :src="[category.isDisplay ? topIcon : bottomIcon]" + alt="" + /> </p> </li> <li class="left-main" v-if="category.isDisplay"> - <div class="category-main" v-for="(item, index) in category.list" :key="index"> - <el-checkbox class="el-checkbox" v-model="item.checked" :title="item.name" - @change="categoryChange(item)" style="display: inline-block; vertical-align: middle">{{ item.name - }}</el-checkbox> - <span class="" style="display: inline-block; vertical-align: middle">{{ item.num }}</span> + <div + class="category-main" + v-for="(item, index) in category.list" + :key="index" + > + <el-checkbox + class="el-checkbox" + v-model="item.checked" + :title="item.name" + @change="categoryChange(item)" + style="display: inline-block; vertical-align: middle" + >{{ item.name }}</el-checkbox + > + <span + class="" + style="display: inline-block; vertical-align: middle" + >{{ item.num }}</span + > </div> </li> </ul> @@ -53,25 +74,50 @@ <span>{{ annual.title }}</span> <span> 鏃堕棿 - <img class="sort-Icon" :src="[isDisplay ? sortTop : sortBottom]" alt="" /> + <img + class="sort-Icon" + :src="[isDisplay ? sortTop : sortBottom]" + alt="" + /> </span> - <span>鏂囩尞閲� - <img class="sort-Icon" :src="[isDisplay ? sortBottom : sortTop]" alt="" /> + <span + >鏂囩尞閲� + <img + class="sort-Icon" + :src="[isDisplay ? sortBottom : sortTop]" + alt="" + /> </span> </div> <p @click="annual.isDisplay = !annual.isDisplay"> - <img :src="[annual.isDisplay ? topIcon : bottomIcon]" alt="" /> + <img + :src="[annual.isDisplay ? topIcon : bottomIcon]" + alt="" + /> </p> </li> <li class="left-main" v-if="annual.isDisplay"> - <div class="annual-main" :style="{ - display: index + 1 > professionIndex ? 'none' : '', - }" v-for="(item, index) in annual.list" :key="index"> - <el-checkbox class="el-checkbox" v-model="item.checked" :title="item.years">{{ item.years - }}</el-checkbox> + <div + class="annual-main" + :style="{ + display: index + 1 > professionIndex ? 'none' : '', + }" + v-for="(item, index) in annual.list" + :key="index" + > + <el-checkbox + class="el-checkbox" + v-model="item.checked" + :title="item.years" + >{{ item.years }}</el-checkbox + > <span class="">{{ item.num }}</span> </div> - <p class="annual-footer" v-if="annual.list && annual.list.length > 5" @click="shrinkClick('a', '骞村害')"> + <p + class="annual-footer" + v-if="annual.list && annual.list.length > 5" + @click="shrinkClick('a', '骞村害')" + > {{ activeBox !== "a" ? "鏇村 鈭�" : "鏀惰捣 鈭�" }} </p> </li> @@ -83,23 +129,42 @@ <span>{{ sources.title }}</span> <span> 鏂囩尞閲� - <img class="sort-Icon" :src="[isDisplay ? sortBottom : sortTop]" alt="" /> + <img + class="sort-Icon" + :src="[isDisplay ? sortBottom : sortTop]" + alt="" + /> </span> </div> <p @click="sources.isDisplay = !sources.isDisplay"> - <img :src="[sources.isDisplay ? topIcon : bottomIcon]" alt="" /> + <img + :src="[sources.isDisplay ? topIcon : bottomIcon]" + alt="" + /> </p> </li> <li class="left-main" v-if="sources.isDisplay"> - <div class="sources-main" v-for="(item, index) in sources.list" :key="index" :style="{ - display: index + 1 > dynastyIndex ? 'none' : '', - }"> - <el-checkbox class="el-checkbox" :title="item.name" v-model="item.checked">{{ item.name - }}</el-checkbox> + <div + class="sources-main" + v-for="(item, index) in sources.list" + :key="index" + :style="{ + display: index + 1 > dynastyIndex ? 'none' : '', + }" + > + <el-checkbox + class="el-checkbox" + :title="item.name" + v-model="item.checked" + >{{ item.name }}</el-checkbox + > <span class="">{{ item.num }}</span> </div> - <p class="sources-footer" v-if="sources.list && sources.list.length > 5" - @click="shrinkClick('b', '鏂囩尞鏉ユ簮')"> + <p + class="sources-footer" + v-if="sources.list && sources.list.length > 5" + @click="shrinkClick('b', '鏂囩尞鏉ユ簮')" + > {{ activeBox !== "b" ? "鏇村 鈭�" : "鏀惰捣 鈭�" }} </p> </li> @@ -121,27 +186,43 @@ </li> </ul> --> </div> - <div class="content-right" v-loading="loading" element-loading-text="妫�绱㈢粨鏋滃姞杞戒腑" - element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0)"> + <div + class="content-right" + v-loading="loading" + element-loading-text="妫�绱㈢粨鏋滃姞杞戒腑" + element-loading-spinner="el-icon-loading" + element-loading-background="rgba(0, 0, 0, 0)" + > <!-- title閮ㄥ垎 --> <ul class="right-header"> <li v-for="(item, index) in associationList" :key="index"> <p>{{ item.type }} : {{ item.content }}</p> - <img @click="removeAssociationList(item.content)" :src="errorIcon" alt="" /> + <img + @click="removeAssociationList(item.content)" + :src="errorIcon" + alt="" + /> </li> </ul> <!-- 鍏眡x鏉� --> <ul class="right-number"> <ul class="number-number"> - 鍏辨壘鍒�<span>{{ this.total }}</span>鏉$粨鏋� + 鍏辨壘鍒�<span>{{ this.total }}</span + >鏉$粨鏋� </ul> <ul class="number-time"> 鍙戣〃鏃堕棿 - <span @click="sortChange()"><img :src="!postedSortInfo ? sortBottom : sortTop" alt="" /></span> + <span @click="sortChange()" + ><img :src="!postedSortInfo ? sortBottom : sortTop" alt="" + /></span> </ul> </ul> <!-- 缁撴灉灞曠ず --> - <ul class="right-main" v-for="(item, index) in resultList" :key="index"> + <ul + class="right-main" + v-for="(item, index) in resultList" + :key="index" + > <li class="main-name"> <p>{{ item.name }}</p> <p> @@ -150,7 +231,9 @@ </p> </li> <li class="main-sources"> - <span :class="getResourceTypeClass(item.cmsItemType)">{{ item.resourceTypeName }}</span> + <span :class="getResourceTypeClass(item.cmsItemType)">{{ + item.resourceTypeName + }}</span> <span>{{ item.source }}</span> <span>{{ item.year }}</span> <span v-if="item.DOI">doi锛歿{ item.DOI }}</span> @@ -158,28 +241,46 @@ <li class="main-author"> {{ item.author }} </li> - <li class="main-title" :title="item.cleanAbstract" v-if="item.abstract"> + <li + class="main-title" + :title="item.cleanAbstract" + v-if="item.abstract" + > <span>鎽樿: </span> <span class="page-main-abstract" v-html="item.cleanAbstract"></span> </li> - <li class="main-keyword" v-if="item.keyWords && item.keyWords.length > 0"> + <li + class="main-keyword" + v-if="item.keyWords && item.keyWords.length > 0" + > <span>鍏抽敭璇嶏細</span> - <span class="keyWord" v-for="(citem, cindex) in item.keyWords" :key="cindex" @click=" - () => - handleSearch({ - text: citem, - type: 'keyWords', - label: '鍏抽敭璇�', - }) - "> + <span + class="keyWord" + v-for="(citem, cindex) in item.keyWords" + :key="cindex" + @click=" + () => + handleSearch({ + text: citem, + type: 'keyWords', + label: '鍏抽敭璇�', + }) + " + > {{ citem }} </span> </li> </ul> <!-- 鍒嗛〉 --> <div class="pagination" v-if="total > 6"> - <el-pagination @current-change="handleCurrentChange" class="msg-pagination-container" - :background="isBackground" layout="prev, pager, next" :total="total" :page-size="10"> + <el-pagination + @current-change="handleCurrentChange" + class="msg-pagination-container" + :background="isBackground" + layout="prev, pager, next" + :total="total" + :page-size="10" + > </el-pagination> </div> <el-dialog v-model="dialogVisible" :title="aIName" width="60vw" top="3vh" bottom="2vh" @@ -288,7 +389,7 @@ { type: "input", label: "鍏抽敭璇�", - name: "keyword", + name: "keyWords", value: "", }, { @@ -347,37 +448,32 @@ 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, - check: false, - }, - { - years: "2025", - num: 20, + years: "2020", + num: 24, check: false, }, ], @@ -395,28 +491,23 @@ 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, - check: false, - }, - { - name: "鍖椾含涓尰鑽ぇ瀛﹀ぇ瀛﹀鎶�", - num: 190, - check: false, - }, - { - name: "鍖椾含涓尰鑽ぇ瀛﹀ぇ瀛﹀鎶�", - num: 190, + name: "骞垮窞涓尰鑽ぇ瀛�", + num: 25, check: false, }, ], @@ -471,7 +562,7 @@ labelList: { abstract: "鎽樿", author: "浣滆��", - keyword: "鍏抽敭璇�", + keyWords: "鍏抽敭璇�", source: "鏉ユ簮", Name: "鏍囬", year: "骞翠唤", @@ -530,7 +621,7 @@ value: key, }); } else { - hasKey.content = val[key] + hasKey.content = val[key]; } } } @@ -658,18 +749,20 @@ } } } - // if (this.associationList && this.associationList.length) { - // this.associationList.forEach((item) => { - // if (item.value == "year") { - // const endDate = item.content.split("/")[0] + "/12/31 23:59:59"; - // const startDate = item.content.split("/")[0] + "/01/01 00:00:00"; - // searchData[item.value + ">="] = startDate; - // searchData[item.value + "<="] = endDate; - // } else { - // searchData["||" + item.value + "*"] = item.content; - // } - // }); - // } + if (this.associationList && this.associationList.length) { + this.associationList.forEach((item) => { + if (item.value == "year") { + const endDate = item.content.split("/")[0] + "/12/31 23:59:59"; + const startDate = item.content.split("/")[0] + "/01/01 00:00:00"; + searchData[item.value + ">="] = startDate; + searchData[item.value + "<="] = endDate; + } else if (item.value) { + searchData[item.value + "*"] = item.content; + } else { + searchData["||" + item.value + "*"] = item.content; + } + }); + } console.log(searchData, "searchData"); MG.resource .getItem({ @@ -763,18 +856,18 @@ }, getResourceTypeClass(typeName) { switch (typeName) { - case 'journal': - return 'journal-color'; - case 'books': - return 'books-color'; - case 'video': - return 'video-color'; - case 'audio': - return 'audio-color'; - case 'newspaper': - return 'newspaper-color'; + case "journal": + return "journal-color"; + case "books": + return "books-color"; + case "video": + return "video-color"; + case "audio": + return "audio-color"; + case "newspaper": + return "newspaper-color"; default: - return 'other-color'; + return "other-color"; } }, @@ -1070,12 +1163,15 @@ border-color: #d1d1d1; } - ::v-deep .el-checkbox .el-checkbox__input.is-checked+.el-checkbox__label { + ::v-deep .el-checkbox .el-checkbox__input.is-checked + .el-checkbox__label { color: #2c2c2c; } ::v-deep .el-checkbox .el-checkbox__input.is-checked .el-checkbox__inner, - ::v-deep .el-checkbox .el-checkbox__input.is-indeterminate .el-checkbox__inner { + ::v-deep + .el-checkbox + .el-checkbox__input.is-indeterminate + .el-checkbox__inner { border-color: #8f7a5a; background-color: #8f7a5a; } @@ -1207,11 +1303,11 @@ } .books-color { - background-color: #C48787; + background-color: #c48787; } .video-color { - background-color: #6F8F5A; + background-color: #6f8f5a; } .audio-color { @@ -1219,14 +1315,12 @@ } .newspaper-color { - background-color: #8D77B3; + background-color: #8d77b3; } .other-color { - background-color: #009F9F; + background-color: #009f9f; } - - .main-sources { span:nth-child(1) { @@ -1375,7 +1469,9 @@ border: 1px solid #cccccc; } -:deep.msg-pagination-container.is-background .el-pager li:not(.disabled).active { +:deep.msg-pagination-container.is-background + .el-pager + li:not(.disabled).active { /*褰撳墠閫変腑椤垫暟鐨勬牱寮忚繘琛屼慨鏀�*/ background-color: #937950; color: #fff; @@ -1384,7 +1480,7 @@ } :deep.el-pagination.is-background .el-pager li:not(.disabled):hover { - color: #937950 + color: #937950; } :deep.el-button--primary { 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 5bb9db0..7af5d22 100644 --- a/src/views/directory/index.vue +++ b/src/views/directory/index.vue @@ -7,18 +7,33 @@ </div> <div class="page-main-father"> <div class="page-main-title"> - <p @click="changeTab('chart')" :class="[activeTabs == 'chart' ? 'active-tab' : '']"> - <img :src="[activeTabs == 'chart' ? chartIcon : noChartIcon]" alt="" /> + <p + @click="changeTab('chart')" + :class="[activeTabs == 'chart' ? 'active-tab' : '']" + > + <img + :src="[activeTabs == 'chart' ? chartIcon : noChartIcon]" + alt="" + /> <span>鍥捐〃鏄剧ず</span> </p> - <p @click="changeTab('list')" :class="[activeTabs == 'list' ? 'active-tab' : '']"> + <p + @click="changeTab('list')" + :class="[activeTabs == 'list' ? 'active-tab' : '']" + > <img :src="[activeTabs == 'list' ? listIcon : noListIcon]" alt="" /> <span>鍒楄〃鏄剧ず</span> </p> </div> <!-- 鍥捐〃鏄剧ず --> - <div class="charts-main" v-show="activeTabs == 'chart'" v-loading="loading" element-loading-text="鍥捐〃鍔犺浇涓�" - element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0)"> + <div + class="charts-main" + v-show="activeTabs == 'chart'" + v-loading="loading" + element-loading-text="鍥捐〃鍔犺浇涓�" + element-loading-spinner="el-icon-loading" + element-loading-background="rgba(0, 0, 0, 0)" + > <div class="radial-tree-container" v-show="!loading"> <div ref="chart" style="width: 100%; height: 70vh"></div> </div> @@ -33,36 +48,49 @@ </div> <transition name="el-fade-in-linear"> <div class="tooltipBox" v-show="tooltipShow"> - <div style=" + <div + style=" padding: 10px; background: #fdf8f0; border-radius: 5px; width: 100%; max-height: 500px; text-align: center; - "> + " + > <div class="closeBtn" @click="tooltipShow = false"> <i class="el-icon-close"></i> </div> <div style="display: flex"> - <div style=" + <div + style=" width: 80px; height: 80px; position: relative; margin-bottom: 10px; background: #d8d8d8; - "> - <img class="autoImg" :src="currentNodeInfo.icon - ? currentNodeInfo.icon - : '@/assets/images/directory/touxiang.png' - " alt="" /> + " + > + <img + class="autoImg" + :src=" + currentNodeInfo.icon + ? currentNodeInfo.icon + : '@/assets/images/directory/touxiang.png' + " + alt="" + /> </div> - <div style="padding-top: 20px; text-align: left; margin-left: 20px"> - <div style=" + <div + style="padding-top: 20px; text-align: left; margin-left: 20px" + > + <div + style=" font-size: 16px; font-weight: bold; margin-bottom: 5px; - "> + " + > {{ currentNodeInfo.name }} </div> <div style="margin-top: 20px"> @@ -83,13 +111,15 @@ </div> </div> - <div style=" + <div + style=" font-size: 16px; font-weight: bold; margin-bottom: 5px; text-align: left; margin-top: 10px; - "> + " + > <p style="margin-bottom: 15px"> 瀛︿範鏃堕棿锛歿{ currentNodeInfo.studyTime || "-" }} </p> @@ -104,13 +134,15 @@ 鑱岀О锛歿{ currentNodeInfo.professionalTitle || "-" }} </p> </div> - <div style=" + <div + style=" text-align: left; line-height: 22px; max-height: 200px; overflow-y: auto; padding: 10px; - "> + " + > <div v-html="currentNodeInfo.studentProfile"></div> </div> <!-- <div @@ -135,21 +167,36 @@ </div> <!-- 鍒楄〃鏄剧ず --> <div class="page-main" v-show="activeTabs == 'list'"> - <div v-loading="loading" style="min-height: 550px" element-loading-background="rgba(0, 0, 0, 0)" - element-loading-text="瀛︾敓鍒楄〃鍔犺浇涓�" element-loading-spinner="el-icon-loading"> + <div + v-loading="loading" + style="min-height: 550px" + element-loading-background="rgba(0, 0, 0, 0)" + element-loading-text="瀛︾敓鍒楄〃鍔犺浇涓�" + element-loading-spinner="el-icon-loading" + > <div v-for="(item, index) in universityList" :key="index"> - <div class="table-title" v-if="item.agreelist && item.agreelist.length > 0"> + <div + class="table-title" + v-if="item.agreelist && item.agreelist.length > 0" + > <div class="table-title-left"> <p class="table-title-name">{{ item.unitName }}</p> </div> - <div class="table-title-right" @click="item.isShow = !item.isShow"> + <div + class="table-title-right" + @click="item.isShow = !item.isShow" + > <img :src="[item.isShow ? topIcon : bottomIcon]" alt="" /> </div> </div> - <div v-if="item.agreelist && item.agreelist.length > 0 && item.isShow"> + <div + v-if="item.agreelist && item.agreelist.length > 0 && item.isShow" + > <div v-for="(citem, cindex) in item.agreelist" :key="cindex"> <div class="agree-title"> - <p class="table-title-degree">{{ citem.academicDegreeName }}</p> + <p class="table-title-degree"> + {{ citem.academicDegreeName }} + </p> <p class="table-title-number"> {{ citem.studentList.length }}浜� </p> @@ -163,7 +210,10 @@ <th>鑱屽姟</th> <th>鑱岀О</th> </tr> - <tr v-for="(ditem, dindex) in citem.studentList" :key="dindex"> + <tr + v-for="(ditem, dindex) in citem.studentList" + :key="dindex" + > <td> {{ ditem.name }} </td> @@ -182,7 +232,7 @@ <td> {{ ditem.professionalTitle === undefined || - ditem.professionalTitle === "" + ditem.professionalTitle === "" ? "-" : ditem.professionalTitle }} @@ -286,7 +336,7 @@ backgroundColor: "#FDF8F0", formatter: (params) => { const data = params.data; - this.currentNodeInfo = data; + // this.currentNodeInfo = data; // console.log(data, "data"); if (data.cmsItemType == "student") { return ` @@ -299,50 +349,59 @@ text-align: center; "> <div style="width: 80px;height: 80px;position: relative; margin: 0 auto; margin-bottom: 10px;background: #D8D8D8;"> - <img class="autoImg" src="${data.icon - ? data.icon - : require("@/assets/images/directory/touxiang.png") - }" alt=""> + <img class="autoImg" src="${ + data.icon + ? data.icon + : require("@/assets/images/directory/touxiang.png") + }" alt=""> </div> - <div style="font-size: 16px; font-weight: bold; margin-bottom: 5px;">${data.name || "-" + <div style="font-size: 16px; font-weight: bold; margin-bottom: 5px;">${ + data.name || "-" }</div> - <div> <span> ${data.gender == "male" ? "鐢�" : "濂�" || "-" - } </span> <span> ${data.academicName || "-"} </span> <span> ${this.legendList.find((item) => item.value == data.unit)?.name || + <div> <span> ${ + data.gender == "male" ? "鐢�" : "濂�" || "-" + } </span> <span> ${data.academicName || "-"} </span> <span> ${ + this.legendList.find((item) => item.value == data.unit)?.name || "-" - } </span></div> + } </span></div> <div style="font-size: 16px; font-weight: bold; margin-bottom: 5px;text-align: left;margin-top: 10px;overflow: hidden;"> - <p style="margin-bottom: 5px;">瀛︿範鏃堕棿锛�${data.studyTime || "-" - }</p> - <p style="margin-bottom: 5px; white-space: pre-wrap" >鐜板伐浣滃崟浣嶏細${data.currentEmployer_secondary || "-" - }</p> - <p style="margin-bottom: 5px;">鑱屽姟锛�${data.jobTitle || "-" - }</p> - <p style="margin-bottom: 5px;">鑱岀О锛�${data.professionalTitle || "-" - }</p> + <p style="margin-bottom: 5px;">瀛︿範鏃堕棿锛�${ + data.studyTime || "-" + }</p> + <p style="margin-bottom: 5px; white-space: pre-wrap" >鐜板伐浣滃崟浣嶏細${ + data.currentEmployer_secondary || "-" + }</p> + <p style="margin-bottom: 5px;">鑱屽姟锛�${ + data.jobTitle || "-" + }</p> + <p style="margin-bottom: 5px;">鑱岀О锛�${ + data.professionalTitle || "-" + }</p> </div> </div> `; - } else { - return ` - <div style=" - padding: 10px; - background: #FDF8F0; - border-radius: 5px; - max-width: 300px; - width: 360px; - text-align: center; - "> - <div style="width: 80px;height: 80px;position: relative; margin: 0 auto; margin-bottom: 10px;background: #D8D8D8;"> - <img class="autoImg" src="${require("@/assets/images/directory/touxiang.png")}" alt=""> - </div> - <div style="font-size: 16px; font-weight: bold; margin-bottom: 5px;">${data.name - }</div> - <div> <span> ${data.academicDegreeName || "-"} </span></div> - - </div> - `; } + // } else { + // return ` + // <div style=" + // padding: 10px; + // background: #FDF8F0; + // border-radius: 5px; + // max-width: 300px; + // width: 360px; + // text-align: center; + // "> + // <div style="width: 80px;height: 80px;position: relative; margin: 0 auto; margin-bottom: 10px;background: #D8D8D8;"> + // <img class="autoImg" src="${require("@/assets/images/directory/touxiang.png")}" alt=""> + // </div> + // <div style="font-size: 16px; font-weight: bold; margin-bottom: 5px;">${data.name + // }</div> + // <div> <span> ${data.academicDegreeName || "-"} </span></div> + + // </div> + // `; + // } }, }, textStyle: { @@ -369,10 +428,10 @@ }, label: { - position: "top", //鏍囩鐨勪綅缃�� + // position: "left", //鏍囩鐨勪綅缃�� verticalAlign: "middle", //鏂囧瓧鍨傜洿瀵归綈鏂瑰紡锛岄粯璁よ嚜鍔ㄣ�� fontSize: 12, //鏂囧瓧鐨勫瓧浣撳ぇ灏� - color: "#bc1c00", + // color: "#bc1c00", }, // leaves: { // symbol: "emptyCircle", @@ -382,7 +441,6 @@ // }, expandAndCollapse: false, lineStyle: { - color: "#bc1c00", width: 1, }, itemStyle: { @@ -401,7 +459,11 @@ this.chart.setOption(option); this.chart.on("click", (params) => { // console.log("鐐瑰嚮鏃剁殑鍥炶皟", params); + console.log(params, "params"); + if (params.data?.cmsItemType && params.data?.cmsItemType == "student") { this.tooltipShow = true; + this.currentNodeInfo = params.data; + } }); }, handleResize() { @@ -492,7 +554,7 @@ studentList: [], }); }); - }) + }); console.log(schoolList, "schoolList"); this.unitList.forEach((item) => { this.academicDegreeList.forEach((citem) => { @@ -509,7 +571,7 @@ this.legendList.find( (legendItem) => legendItem.value === item.value )?.color || "#000000", - }, + }, children: [], }); }); @@ -525,6 +587,7 @@ (f) => f.value == item.academicDegree )?.name; citem.studentList.push(item); + item['itemStyle'] = citem.itemStyle; citem.children.push(item); } }); @@ -533,7 +596,10 @@ res.datas.forEach((item) => { schoolList.forEach((citem) => { citem.agreelist.forEach((ditem) => { - if (item.unit == citem.unitValue && item.academicDegree == ditem.academicDegreeValue) { + if ( + item.unit == citem.unitValue && + item.academicDegree == ditem.academicDegreeValue + ) { ditem.studentList.push(item); } }); @@ -544,7 +610,9 @@ // 浣跨敤filter鏂规硶杩囨护schoolList锛屽垹闄greelist闀垮害涓�0鐨刬tem schoolList = schoolList.filter((item) => { // 鍏堣繃婊ゆ帀閭d簺studentList闀垮害涓�0鐨刢item - item.agreelist = item.agreelist.filter((citem) => citem.studentList.length > 0); + item.agreelist = item.agreelist.filter( + (citem) => citem.studentList.length > 0 + ); // 鐒跺悗妫�鏌ヨ繃婊ゅ悗鐨刟greelist闀垮害鏄惁澶т簬0 return item.agreelist.length > 0; }); @@ -672,7 +740,6 @@ line-height: 20px; } - th { font-family: Source Han Serif CN; font-size: 14px; @@ -720,7 +787,6 @@ margin-top: 2px; line-height: 35px; - .table-title-left { display: flex; align-items: center; @@ -746,7 +812,6 @@ height: auto; } } - .agree-title { display: flex; diff --git a/src/views/home/index.vue b/src/views/home/index.vue index 9259896..f4a952d 100644 --- a/src/views/home/index.vue +++ b/src/views/home/index.vue @@ -23,7 +23,7 @@ </div> <div class="menuTitle">{{ item.title }}</div> <div class="menuSubTitle">{{ item.subTitle }}</div> - <div class="menuLine"><i class="el-icon-right"></i></div> + <div class="menuLine"><img class="autoImg" :src="arrow" alt="" /></div> </div> </div> </div> @@ -47,7 +47,7 @@ import rongyu from "@/assets/images/menuIcon/rongyu.png"; import xueshu from "@/assets/images/menuIcon/xueshu.png"; import homeBg from "@/assets/images/homeBg1.jpg"; - +import arrow from "@/assets/images/right_arrow.svg"; export default { components: { SearchBox, @@ -55,6 +55,7 @@ data() { return { + arrow, menuList: [ { icon: nianpu1, @@ -130,7 +131,6 @@ position: relative; box-sizing: border-box; font-family: siyuan; - } .bgBox { width: 100%; @@ -214,9 +214,11 @@ font-size: 28px; margin-top: 20px; font-family: siyuan; - } .menuLine { + width: 30px; + height: 30px; + position: relative; margin-top: 40px; font-size: 40px; } @@ -251,10 +253,10 @@ text-align: center; } -@media screen and (min-width: 1950px) { +/* @media screen and (min-width: 1950px) { .textInfo { font-size: 20px; line-height: 24px; } -} +} */ </style> -- Gitblit v1.9.1