|
@@ -0,0 +1,165 @@
|
|
|
+<template>
|
|
|
+ <div>
|
|
|
+ <div :style="{height:height,width:width}" class="text-container">
|
|
|
+ <ul class="allNotice" @mouseleave="handleMouseLeave" @mouseover="handleMouseOver">
|
|
|
+ <li v-for="(item,index) in noticeList" class="info">
|
|
|
+ <span
|
|
|
+ style="padding-left: 20px; display: inline-block; width: 30%">截止日期:{{
|
|
|
+ parseTime(item.deadline, '{yyyy}-{mm}-{dd}')
|
|
|
+ }}</span>
|
|
|
+ <span style="padding-left: 20px; display: inline-block; width: 60%">{{ item.planName }}</span>
|
|
|
+ <span style="padding-left: 20px; display: inline-block; width: 10%">
|
|
|
+ <el-tag v-if="item.status==0" effect="dark" type="danger">未完成</el-tag>
|
|
|
+ <el-tag v-if="item.status==1" effect="dark" type="success">已完成</el-tag>
|
|
|
+ </span>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import {listAllPlan} from "@/api/patrol/patrol/plan";
|
|
|
+
|
|
|
+export default {
|
|
|
+ name: "NoticeChart",
|
|
|
+ props: {
|
|
|
+ width: {
|
|
|
+ type: String,
|
|
|
+ default: '100%'
|
|
|
+ },
|
|
|
+ height: {
|
|
|
+ type: String,
|
|
|
+ default: '570px'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ // 查询参数
|
|
|
+ queryParams: {
|
|
|
+ planQuarter: new Date().getMonth() + 1, planYear: new Date().getFullYear()
|
|
|
+ },
|
|
|
+ // 公示公告列表
|
|
|
+ noticeList: null,
|
|
|
+ }
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ this.listNoticeNoPage();
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ handleMouseOver() {
|
|
|
+ let elem = document.querySelector('.allNotice');
|
|
|
+ elem.style['animation-play-state'] = 'paused';
|
|
|
+ },
|
|
|
+ handleMouseLeave() {
|
|
|
+ let elem = document.querySelector('.allNotice');
|
|
|
+ elem.style['animation-play-state'] = 'running';
|
|
|
+ },
|
|
|
+ listNoticeNoPage() {
|
|
|
+ listAllPlan(this.queryParams).then(response => {
|
|
|
+ this.noticeList = response.data;
|
|
|
+ //判断是否需要滚动
|
|
|
+ if (this.noticeList.length > 4) {
|
|
|
+ //设置文字滚动一轮时间
|
|
|
+ let elem = document.querySelector('.allNotice');
|
|
|
+ let state = elem.style['animation'];
|
|
|
+ let time = this.noticeList.length * 2
|
|
|
+ elem.style['animation'] = 'myMove2 ' + time + 's linear infinite';
|
|
|
+ let state1 = elem.style['animation-fill-mode'];
|
|
|
+ elem.style['animation-fill-mode'] = 'forwards';
|
|
|
+ //设置文字无缝滚动高度
|
|
|
+ let param = this.noticeList.length * 50
|
|
|
+ let myFirstkeyframes = "@keyframes myMove2{0% {transform: translateY(200px);}100% {transform: translateY(-" + param + "px);}}";
|
|
|
+ let style = document.createElement("style");
|
|
|
+ style.setAttribute("type", "text/css");
|
|
|
+ document.head.appendChild(style);
|
|
|
+ const sheet = style.sheet;
|
|
|
+ sheet.insertRule(myFirstkeyframes, 0);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped>
|
|
|
+.text-container {
|
|
|
+ line-height: 30px;
|
|
|
+ overflow: hidden;
|
|
|
+ background-color: rgba(255, 255, 255, 0.6);
|
|
|
+ padding-top: 10px;
|
|
|
+}
|
|
|
+
|
|
|
+.dangao {
|
|
|
+ width: 40px !important;
|
|
|
+ height: 40px !important;
|
|
|
+}
|
|
|
+
|
|
|
+.info {
|
|
|
+ //font-weight: bold;
|
|
|
+ list-style: none;
|
|
|
+ display: flex;
|
|
|
+ margin: 10px 0 0 0;
|
|
|
+ align-items: center; /* 垂直居中 */
|
|
|
+ /*border-radius:5px 5px 5px 5px ;*/
|
|
|
+ /*border: 2px solid rgba(41, 107, 155, 0.71);*/
|
|
|
+ background-color: transparent;
|
|
|
+ border-bottom: 1px dashed #C0C0C0;
|
|
|
+}
|
|
|
+
|
|
|
+.allNotice {
|
|
|
+ margin: -10px 0 0 0;
|
|
|
+ padding: 0 20px 0 20px;
|
|
|
+ /*animation: myMove 10s linear infinite;
|
|
|
+ animation-fill-mode: forwards;*/
|
|
|
+}
|
|
|
+
|
|
|
+/*文字无缝滚动*/
|
|
|
+/*@keyframes myMove {
|
|
|
+ 0% {
|
|
|
+ transform: translateY(200px);
|
|
|
+ }
|
|
|
+ 100% {
|
|
|
+ transform: translateY(-300px);
|
|
|
+ }
|
|
|
+}*/
|
|
|
+
|
|
|
+/*文字停顿滚动*/
|
|
|
+@keyframes myMove2 {
|
|
|
+ 0% {
|
|
|
+ transform: translateY(0);
|
|
|
+ }
|
|
|
+ 10% {
|
|
|
+ transform: translateY(-30px);
|
|
|
+ }
|
|
|
+ 20% {
|
|
|
+ transform: translateY(-30px);
|
|
|
+ }
|
|
|
+ 30% {
|
|
|
+ transform: translateY(-60px);
|
|
|
+ }
|
|
|
+ 40% {
|
|
|
+ transform: translateY(-60px);
|
|
|
+ }
|
|
|
+ 50% {
|
|
|
+ transform: translateY(-90px);
|
|
|
+ }
|
|
|
+ 60% {
|
|
|
+ transform: translateY(-90px);
|
|
|
+ }
|
|
|
+ 70% {
|
|
|
+ transform: translateY(-120px);
|
|
|
+ }
|
|
|
+ 80% {
|
|
|
+ transform: translateY(-120px);
|
|
|
+ }
|
|
|
+ 90% {
|
|
|
+ transform: translateY(-150px);
|
|
|
+ }
|
|
|
+ 100% {
|
|
|
+ transform: translateY(-150px);
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+</style>
|