页面实现类似新闻滚动效果

雨点打透心脏的1/2处 2022-12-07 04:25 225阅读 0赞

案例-1

<template>
    	<div class="scroll-wrap">
    		<div class="scroll-content" :style="{ top }" @mouseenter="Stop()" @mouseleave="Up()">
    			<p v-for="item in 10">
    				<svg width="150px" height="150px" class="svg">
    					<circle r="70" cy="75" cx="75" stroke-width="8" stroke="#EAEFF4" stroke-linejoin="round" stroke-linecap="round" fill="none" />
    					<circle class="progress" r="70" cy="75" cx="75" stroke-width="8" stroke="#AE40FB" stroke-linejoin="round" stroke-linecap="round" fill="none" stroke-dashoffset="0px" stroke-dasharray="471px" />
    				</svg>
    			</p>
    		</div>
    	</div>
    </template>
    
    <script> export default { name: 'complexTable', data() { return { activeIndex: 0, intnum: undefined } }, computed: { top() { return -this.activeIndex * 50 + 'px' } }, created() { this.ScrollUp() }, methods: { ScrollUp() { this.intnum = setInterval(_ => { if (this.activeIndex < 10) { this.activeIndex += 1 } else { this.activeIndex = 0 } }, 1000) }, Stop() { clearInterval(this.intnum) }, Up() { this.ScrollUp() } } } </script>
    <style> .scroll-wrap { height: 700px; overflow: hidden; } .scroll-content { position: relative; transition: top 0.5s; } .scroll-content p { line-height: 50px; text-align: center; } </style>

案例-2

<template>
    	<div class="container monitor-11">
    		<el-row>
    			<el-col :span="12">
    				<el-select v-model="query.workshop" placeholder="请选择车间" size="small" @change="workshopChange">
    					<el-option v-for="item in workshopList" :key="item.value" :label="item.label" :value="item.value"></el-option>
    				</el-select>
    				<el-select style="margin-left: 10px;" v-model="query.proLine" placeholder="请选择产线" size="small" @change="proLineChange">
    					<el-option v-for="item in proLineList" :key="item.value" :label="item.label" :value="item.value"></el-option>
    				</el-select>
    			</el-col>
    			<el-col :span="12">
    				<div style="text-align: right;">
    					
    					<el-button size="small" type="primary" @click="historyDataClick">查看历史数据</el-button>
    				</div>
    			</el-col>
    		</el-row>
    
    		
    		<div ref="scrollWrap" class="scroll-wrap">
    			<div class="scroll-content" :style="{ top }">
    				<div ref="divContent" class="div-content" style="display: inline-block;position:relative;" v-for="item in deviceProList" :key="item.id">
    					<svg width="150px" height="150px" class="svg">
    						<circle r="70" cy="75" cx="75" stroke-width="8" stroke="#EAEFF4" stroke-linejoin="round" stroke-linecap="round" fill="none" />
    						<circle class="progress" r="70" cy="75" cx="75" stroke-width="8" stroke="#AE40FB" stroke-linejoin="round" stroke-linecap="round" fill="none" stroke-dashoffset="0px" stroke-dasharray="471px" />
    					</svg>
    					<div class="div-svg-content">
    						<div style="font-size: 9px;">
    							<div>{
       {item.nickname}}</div>
    							<div style=" display: flex;justify-content: center;align-items: center;">
    								<label v-if="item.bootUpDur==null" style="width: 25px;text-align: center;">------</label>
    								<label v-if="item.bootUpDur!=null" style="width: 25px;text-align: center;">{
       {formatDurHour(item.bootUpDur)}}<br />{
       {formatDurMinute(item.bootUpDur)}}</label>
    								<img style="width: 80px;height: 80px;border-radius:100%;" :src="item.avatarUrl==undefined?require('../../assets/img/img.jpg'):item.avatarUrl"></img>
    								<label style="width: 25px;text-align: center;">{
       { parseInt(item.useEff*100) }}<br />%</label>
    							</div>
    							<div>{
       {item.bootUpTime==null?'------':new Date(item.bootUpTime).format('hh:mm')}}</div>
    						</div>
    					</div>
    				</div>
    			</div>
    		</div>
    		
    
    		<el-dialog title="请选择导出的日期" :visible.sync="extDialogVisible">
    			<el-date-picker v-model="extDate" type="date" placeholder="选择日期">
    			</el-date-picker><br />
    			<el-button style="margin-top: 10px;" size="small" type="primary" @click="exportDataClick">导出</el-button>
    
    		</el-dialog>
    	</div>
    </template>
    
    <script> import http from "../../utils/http/http.js"; import api from "../../utils/http/api.js"; import CommonUtils from '../../utils/js/common-utils.js' import { createSocket, sendWSPush, closeWS } from "../../utils/js/websocket.js"; var mTimer = null; export default { data() { return { user: null, query: { pageNum: 0, pageSize: 50, workshop: null, proLine: '全部产线', }, deviceProList: [], workshopList: [], proLineList: [], extDialogVisible: false, extDate: new Date(), activeIndex: 0, intnum: undefined }; }, computed: { top() { return -this.activeIndex * 170 + 'px' } }, methods: { historyDataClick() { this.$router.push('/monitor-5'); }, exportDataClick() { this.extDialogVisible = false; // window.location.href = api.baseURL + api.EXT_DEVICE_PRO_DATA; this.download(api.baseURL + api.EXT_DEVICE_PRO_DATA + '&adminId=' + this.user.id + '&createTime=' + this.extDate.format( 'yyyy-MM-dd'), '设备运行数据-' + this.extDate.format('yyyy-MM-dd') + '.xlsx') }, download(url, fileName) { let x = new XMLHttpRequest(); x.open("GET", url, true); x.responseType = 'blob'; x.onload = function(e) { let url = window.URL.createObjectURL(x.response) let a = document.createElement('a'); a.href = url a.download = fileName a.click() } x.send(); }, workshopChange() { this.getAdminDevicePro(true); }, proLineChange() { this.getAdminDevicePro(true); }, getWorkshopList() { http.post(api.GET_WORKSHOP, { adminId: this.user.id }, data => { let workshopAry = []; for (let workshop of data.data) { var workshopItem = { }; workshopItem.value = workshop.name; workshopItem.label = workshop.name; workshopAry.push(workshopItem); } this.workshopList = workshopAry; if (workshopAry.length > 0) { this.query.workshop = workshopAry[0].value; } this.getAdminDevicePro(); }); }, getProLineList() { http.post(api.GET_PRO_LINE, { adminId: this.user.id }, data => { let proLineAry = []; proLineAry.push({ value: "全部产线", label: "全部产线" }); for (let proLine of data.data) { var proLineItem = { }; proLineItem.value = proLine.name; proLineItem.label = proLine.name; proLineAry.push(proLineItem); } this.proLineList = proLineAry; }); }, getAdminDevicePro(isClear) { http.post(api.GET_ADMIN_DEVICE_PRO, { adminId: this.user.id, pageNum: this.query.pageNum, pageSize: this.query.pageSize, workshop: this.query.workshop, proLine: this.query.proLine == '全部产线' ? null : this.query.proLine, createTime: new Date().format('yyyy-MM-dd') }, data => { this.deviceProList = data.data; }); }, formatIntValue: function(value) { return parseInt(value); }, formatDurHour(dur) { dur = dur / 1000; if (dur == 0) { return "0m"; } var hour = parseInt(dur / 3600); var minute = Math.round((dur - hour * 3600) / 60); var hourStr = ""; if (hour != 0) { hourStr = hour + "h"; } var minuteStr = ""; if (minute != 0) { minuteStr = minute + "m"; } return hourStr; }, formatDurMinute(dur) { dur = dur / 1000; if (dur == 0) { return "0m"; } var hour = parseInt(dur / 3600); var minute = Math.round((dur - hour * 3600) / 60); var hourStr = ""; if (hour != 0) { hourStr = hour + "h"; } var minuteStr = ""; if (minute != 0) { minuteStr = minute + "m"; } return minuteStr; }, dateFormat(dateTime, format) { return CommonUtils.dateFormat(dateTime, format); }, formatUseEff(useEff) { //当前时间 毫秒 return (useEff * 100).toFixed(2) + "%"; }, //app.vue initWebSocket() { var _this = this; createSocket(); //创建 var loginCmd = { /*定义对象的属性*/ reqCode: 1001, userId: this.user.id }; sendWSPush(loginCmd); //发送数据 const getDataFunc = function(e) { console.log(e.detail.data.data); var dataJson = JSON.parse(e.detail.data.data); let deviceAry = new Array(); for (var deviceObj of _this.deviceProList) { if (deviceObj.id == dataJson.deviceId) { if (dataJson.cmd == "updateDeviceData") { deviceObj.bootUpTime = dataJson.bootUpTime; deviceObj.bootUpDur = dataJson.bootUpDur; deviceObj.workDur = dataJson.workDur; deviceObj.idleDur = dataJson.idleDur; deviceObj.useEff = dataJson.useEff; deviceObj.jxNum = dataJson.jxNum; deviceObj.tyjNum = dataJson.tyjNum; deviceObj.needleNum = dataJson.needleNum; } else if (dataJson.cmd == "updateWorkState") { deviceObj.workState = dataJson.workState; } else if (dataJson.cmd == "updateOnline") { deviceObj.online = dataJson.online; } } deviceAry.push(deviceObj); } _this.deviceProList = deviceAry; }; window.addEventListener("onmessageWS", getDataFunc); }, ScrollUp() { this.intnum = setInterval(() => { let offsetWidth = this.$refs.scrollWrap.offsetWidth; let clientWidth = this.$refs.scrollWrap.clientWidth; console.log("==offsetWidth====" + offsetWidth); console.log("==clientWidth====" + clientWidth); console.log("==line==size====" + (offsetWidth) / 170); console.log("====count====" + parseInt((offsetWidth) / 170)); var lineCount = this.deviceProList.length / (parseInt((offsetWidth) / 170)); if (this.deviceProList.length % parseInt((offsetWidth) / 170) != 0) { lineCount = Math.ceil(lineCount); } console.log("==lineCount====" + lineCount); var index = lineCount - 4; console.log("==index====" + index); if (this.activeIndex < index) { this.activeIndex += 1 } else { this.activeIndex = 0 } }, 1000) }, Stop() { clearInterval(this.intnum) }, Up() { this.ScrollUp() } }, created() { this.user = this.$store.state.user; // this.initWebSocket(); this.getProLineList(); this.getWorkshopList(); mTimer = setInterval(() => { this.getAdminDevicePro(); }, 60000); this.ScrollUp(); }, beforeDestroy() { clearInterval(mTimer); // 清除定时器 console.log("=====定时器清除==="); } }; </script>
    <style> .monitor-11 ul li { float: left; list-style-type: none; } .monitor-11 ul { padding-inline-start: 0px; } .monitor-11 li { text-align: left; margin-top: 5px; margin-left: 5px; } .monitor-11 { /* background-color: #324157; */ } #box::-webkit-scrollbar { display: none; } .img-device { width: 60px; height: 60px; border: "0"; } .monitor-1 ul li { float: left; list-style-type: none; } .monitor-1 ul { padding-inline-start: 0px; } .monitor-1 li { text-align: left; margin-top: 5px; margin-left: 5px; } .div-svg-content { position: absolute; left: 0px; top: 0px; width: 150px; height: 150px; text-align: center; display: flex; justify-content: center; align-items: center; } .svg { position: absolute; left: 0px; top: 0px; width: 150px; height: 150px; text-align: center; display: flex; justify-content: center; align-items: center; } .div-content { position: relative; width: 150px; height: 150px; margin: 10px; position: absolute; margin-top: 6px; } svg { transform: rotate(-90deg); } .progress { animation: rotate 1500ms linear both; } @keyframes rotate { from { stroke-dashoffset: 0px; } to { stroke-dashoffset: 350px; } } .scroll-wrap { height: 700px; overflow: hidden; background-color: #1184CE; } .scroll-content { position: relative; transition: top 0.5s; } </style>