案例-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="extDialogVisible = true">导出历史数据</el-button> --><el-button size="small" type="primary" @click="historyDataClick">查看历史数据</el-button></div></el-col></el-row><!-- <ul class="infinite-list scroll-content" :style="{ top }" @mouseenter="Stop()" @mouseleave="Up()" style="overflow:auto;overflow-x:hidden;margin-top: 20px;height: 600px;"><li v-for="item in deviceProList" :key="item.id"> --><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><!-- 	</li></ul> --><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 = urla.download = fileNamea.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.vueinitWebSocket() {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>