<template>
<div>
<!-- <div id="filePageNotice" class="filePageNotice" v-show="!filePageToolFlag">
<button @click="changeShowBtn">
<img src="@/assets/img/gonggaoguanli@2x.png" width="25px" alt="通知公告" />
</button>
</div> -->
<div id="filePageTool" class="filePageTool" v-show="filePageToolFlag">
<div
class="ftitle"
@click="
changeShowBtn;
fbodyShow = !fbodyShow;
"
>
<img
src="@/assets/img/gonggaoguanli@2x.png"
width="20px"
style="padding-left: 15px"
alt=""
/>
<span> 通知公告</span>
</div>
<div
@click="
changeShowBtn;
fbodyShow = !fbodyShow;
"
>
<img
:src="
fbodyShow
? require('@/assets/img/收起@2x.png')
: require('@/assets/img/展开@2x.png')
"
width="18px"
style="position: absolute; right: 10px; top: 11px"
alt=""
/>
</div>
<div class="notice-body" v-if="fbodyShow">
<div class="fbody">
<el-scrollbar style="height: 100%" ref="scroball">
<table>
<tr
class="pageList"
v-for="m in tableDataList"
@mouseleave="mouseTableLeave"
@mouseover="mouseTableOver"
:key="m.id"
:title="m.fileTitle"
>
<td>
<!-- :href="downloadFileServer + m.src" -->
<div style="width: 100%" class="noticeActiveDiv">
<a
target="_blank"
class="noticeActive"
@click="toDetail(m)"
>
<div
class="notice"
style="
line-height: 35px;
font-size: 14px;
font-weight: 500;
"
>
{{ m.fileTitle }}
</div>
<div style="line-height: 15px; color: #dbfdf9">
{{ m.publishingTime }}
</div>
</a>
</div>
</td>
</tr>
<!-- <tr>
<td>
<div style="float: right; line-height: 30px">
<a href="#" style="color: #fff"> 更多 >></a>
</div>
</td>
</tr> -->
</table>
</el-scrollbar>
</div>
</div>
<p class="more-notice" @click="more" v-show="tableDataList.length > 1">
更多>>
</p>
</div>
</div>
</template>
<script>
import { mapActions } from "vuex";
import http from "@/service/interface.js";
export default {
name: "layout",
data() {
return {
filePageToolFlag: true,
activeMenuList: undefined,
fbodyShow: true,
tableDataList: [],
menuList: [],
scrolHeight: 0,
};
},
methods: {
async initPolicy() {
let params = {
pageNum: 1,
pageSize: 999999,
// userId: localStorage.getItem("userId"),
userId: localStorage.getItem("id"),
fileType: "通知公告",
key: "",
};
let res = await http.getPolicyPageList(params);
if (res.status === 200) {
this.tableDataList = res.data.records;
localStorage.setItem("recordsInfo", this.tableDataList);
this.tableDataList.forEach((item) => {
item.src = `通知公告/${item.filePath}`;
});
if (this.tableDataList.length == 0) {
this.tableDataList = [
{
fileTitle: "暂无公告",
publishingTime: "",
src: "",
},
];
}
console.log(this.tableDataList, "通知公告====");
}
},
toDetail(row) {
console.log(row,'=====row');
if (this.tableDataList.length > 1) {
localStorage.setItem("detailsParam", JSON.stringify(row));
this.$router.push("/policyAnnouncements/details");
}
},
more() {
let routeUrl = this.$router.resolve({
name: "policyAnnouncements",
});
window.open(routeUrl.href, "_blank");
},
// 关闭公告
changeShowBtn() {
this.filePageToolFlag = !this.filePageToolFlag;
},
creteTableInterval(scrolHeight) {
if (this.tableInterval) {
clearInterval(this.tableInterval);
}
let scrolMax;
this.$nextTick(() => {
if (this.$refs.scroball?.wrap) {
scrolMax = this.$refs.scroball.wrap.scrollHeight;
}
});
this.tableInterval = setInterval(() => {
this.$nextTick(() => {
this.scrolHeight++;
if (scrolMax - this.scrolHeight < 220) {
this.scrolHeight = 0;
}
if (this.$refs.scroball?.wrap) {
this.$refs.scroball.wrap.scrollTop = this.scrolHeight;
}
});
}, 50);
},
mouseTableLeave() {
setTimeout(() => {
this.creteTableInterval(this.scrolHeight);
}, 1000);
},
mouseTableOver() {
clearInterval(this.tableInterval);
this.$nextTick(() => {debugger
this.scrolHeight = this.$refs.scroball?.wrap.scrollTop;
});
},
},
mounted() {
this.creteTableInterval(0);
this.initPolicy();
},
watch: {},
};
</script>
<style scoped>
.filePageNotice {
position: absolute;
top: 15px;
right: 15px;
width: 25px;
height: 25px;
background-color: rgba(92, 87, 87, 0.3);
background: rgba(0, 23, 46, 0.8);
border: 1px solid #15d0ba;
border-radius: 2px;
color: #fff;
}
.filePageNotice button {
background: linear-gradient(180deg, #006b6e 0%, #00a771 100%);
}
.filePageTool {
position: absolute;
top: 15px;
right: 15px;
background-color: rgba(92, 87, 87, 0.3);
width: 239px;
/* height: 337px; */
background: rgba(0, 23, 46, 0.8);
border-radius: 1px;
border: 1px solid #15d0ba;
border-radius: 2px;
cursor: default;
}
.filePageTool .ftitle {
width: 239px;
line-height: 38px;
background: linear-gradient(180deg, #006b6e 0%, #00a771 100%);
border-radius: 1px;
color: aliceblue;
font-size: 15px;
font-weight: 700;
color: #fff;
}
.notice-body {
padding: 15px;
}
.filePageTool .fbody {
height: 270px;
}
.filePageTool .fbody table .pageList td .noticeActiveDiv .noticeActive .notice {
line-height: 35px;
font-size: 14px;
font-weight: 500;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
width: 200px;
}
.more-notice {
height: 30px;
line-height: 30px;
color: #fff;
text-align: right;
margin-right: 10px;
cursor: pointer;
}
.pageList {
height: 40px;
border-bottom: 1px solid #000;
color: #fff;
}
.filePageTool .text {
color: aliceblue;
width: 100px;
font-size: 25px;
line-height: 40px;
text-align: center;
font-weight: 800;
}
.filePageTool ul {
padding-top: 100px;
}
.noticeActive {
color: white;
text-decoration: none;
}
.noticeActive:link {
color: #fff;
text-decoration: none;
}
/* 未访问的链接 */
.noticeActive:visited {
color: #fff;
text-decoration: none;
}
/* 已访问的链接 */
.noticeActive:hover {
color: greenyellow;
text-decoration: underline;
}
/* 鼠标移动到链接上 */
.noticeActive:active {
color: #f00;
}
/* 选定的链接 */
</style>