<template> <div style="position: relative;"><p class="spans"><img src="../../assets/img/block-title-icon.png" alt=""><span class="tit">预警信息</span></p><div v-if="!chuxians" ref="message" class="messages"><div ref="infobord1" class="content-issue"><p v-if="chuxian" @click="geti(index)"v-bind:class="getInfoClass(item.type)" v-for="(item,index) in messages"> <span> {{item.info}}</span> <span><span class="icon"><i class="el-icon-arrow-right"></i></span></span> </p></div><div ref="infobord1" class="content-issue"><p v-if="chuxian" @click="geti(index)"v-bind:class="getInfoClass(item.type)" v-for="(item,index) in messages"> <span> {{item.info}}</span> <span><span class="icon"><i class="el-icon-arrow-right"></i></span></span> </p></div></div><div v-else ref="chuxians" class="chuxians"><i @click="go" class="el-icon-back" style="left:280px;top:30px;position: absolute"></i><div class="content-text"> {{nei}} </div><div class="foot">紧急联系人：周峰<br/>联系人电话：15515554312</div></div></div></template><script>export default {data() {return {chuxian: true,chuxians: false,nei: "",messages: [{type: "报警",deviceId: 12,info: "温度传感器西特Setra STC温度读数异常"},{type: "报警",deviceId: 12,info: "西特Setra 230湿/ 湿差压传感器异常"},{type: "警告",deviceId: 12,info: "江森VG1000系列电动球阀异常"},{type: "警告",deviceId: 12,info: "压力传感器西特Setra 231 型读数异常"},{type: "警告",deviceId: 12,info: "传感器西特Setra SRIM2 型温度异常"},{type: "警告",deviceId: 12,info: "NS系统温控异常"},{type: "报警",deviceId: 12,info: "J651-T智能感温探测器读数异常"},{type: "警告",deviceId: 12,info: "机械温控面板 T2000AAC-0C0有问题"},{ type: "报警", deviceId: 1, info: "监测到有害气体，请尽快疏散" }]};},methods: {go() {this.chuxian = true;this.chuxians = false;},geti(i) {this.chuxian = false;this.chuxians = true;this.nei = this.messages[i].info;// this.$refs.chuxians.innerHTML(this.messages[i].info);console.log(this.messages[i].info);},getInfoClass: function(type) {if (type === "警告") {return "warn";} else if (type === "报警") {return "alert";} else {return "info";}},rollText: function() {var speed = 50;var that = this;function Marquee() {//that.rollContainer.offsetHeight - that.rollContainer.scrollTop <=// -(that.rollContainer.scrollTop / 2)if (that.message.scrollTop == 80) {that.message.scrollTop = 0;} else {that.message.scrollTop++;// console.log(that.message.scrollTop);// console.log(that.infobord1.offsetTop);}}var MyMar = setInterval(Marquee, speed); //设置定时器//鼠标移上时清除定时器达到滚动停止的目的this.message.addEventListener("mouseover", function() {clearInterval(MyMar);});//鼠标移开时重设定时器this.message.addEventListener("mouseout", function() {MyMar = setInterval(Marquee, speed);});}},mounted() {this.message = this.$refs.message;this.infobord1 = this.$refs.infobord1;this.infobord2 = this.$refs.infobord2;this.rollText();}};</script><style lang="scss" scoped>.chuxians{width: 305px;height: 200px;position: absolute;background: url("../../assets/img/station-detail-bg.png") center no-repeat;background-size: 100% 90%;}.foot{margin-left: 20px;width: 300px;text-align: left;position: absolute;line-height: 20px;bottom: 10%;}.spans{height: 30px;vertical-align: middle;line-height: 30px;}.text-info{max-width: 240px;text-align: left;overflow: hidden;text-overflow: ellipsis;background: none;}.content-text{float: left;text-align: left;padding-top: 100px;margin-left: 20px;width: 290px;text-indent:35px;line-height: 23px;}.content-issue {width: 88%;margin: 0 auto;/*margin-top: 20px;*/}.content-issue p {color: white;width: 100%;margin-top: 4px;// margin: 5px 12px;font-size: 14px;cursor: pointer;display: flex;justify-content: flex-start;background: #011d49;margin-top: 2px;padding: 6px 6px 6px 0;// border-radius: 4px;position: relative;white-space: nowrap;position: relative;}.content-issue p span:nth-child(1) {// position: absolute;// left: 0;// top: 0;// height: 12px;}.icon {position: absolute;right: 10px;top: 6px;/*width: 95%;*/}.content-issue p:hover {// color: white;// margin: 5px 12px;// font-size: 14px;// cursor: pointer;// display: flex;// justify-content: flex-start;background: #ff5454;// margin-top: 2px;// padding: 6px;// border-radius: 4px;// white-space: nowrap;}.content-issue span {color: #fff;margin-left: 5px;margin-right: 5px;}.content-issue span.alert {color: red;background: red;}.content-issue span.warn {color: orange;background: orange;}.content-issue p.warn {border-left: orange 4px solid;}.content-issue p.alert {border-left: #ff5454 4px solid;}.content-issue span.info {color: #39d6fe;background: #39d6fe;}.messages {position: relative;width: 305px;height: 200px;margin-top: 10px;border-bottom: 1px solid #032a69;border-top: 1px solid #032a6a;overflow: hidden;}</style>

实现的效果

文字列表轮番滚动，鼠标悬停事件，点击消息可查看详情