|
|
@@ -0,0 +1,214 @@
|
|
|
+<template>
|
|
|
+ <div>
|
|
|
+ <div class="text-container" :style="{height:height,width:width}">
|
|
|
+ <div class="inner-container">
|
|
|
+ <p class="text"
|
|
|
+ v-for="(text, index) in arr"
|
|
|
+ :key="index"
|
|
|
+ v-on:mouseover="changeActive"
|
|
|
+ v-on:mouseout="removeActive"
|
|
|
+ @click="chooseWarn(text)">
|
|
|
+ {{text}}</p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import {devApproveData} from "@/api/sems/home";
|
|
|
+ const totalDuration = 2000;
|
|
|
+
|
|
|
+ export default {
|
|
|
+ name: "WarnChart",
|
|
|
+ props: {
|
|
|
+ width: {
|
|
|
+ type: String,
|
|
|
+ default: '100%'
|
|
|
+ },
|
|
|
+ height: {
|
|
|
+ type: String,
|
|
|
+ default: '160px'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ arr: [],
|
|
|
+ number: 0,
|
|
|
+ // 查询参数
|
|
|
+ queryParams: {},
|
|
|
+ }
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ text() {
|
|
|
+ return {
|
|
|
+ id: this.number,
|
|
|
+ val: this.arr[this.number]
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ this.startMove()
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ /** 查询报警记录管理列表 */
|
|
|
+ devCenterData(plantIds ,unitIds) {
|
|
|
+ this.loading = true;
|
|
|
+ let params = {
|
|
|
+ 'plantIds': plantIds,
|
|
|
+ 'unitIds': unitIds
|
|
|
+ }
|
|
|
+ devApproveData(params).then(response => {
|
|
|
+ this.arr = response.data;
|
|
|
+ //设置文字滚动一轮时间
|
|
|
+ let elem = document.querySelector('.inner-container');
|
|
|
+ let state = elem.style['animation'];
|
|
|
+ let time = this.arr.length * 1.5 + 5
|
|
|
+ elem.style['animation'] = 'myMove ' + time + 's linear infinite';
|
|
|
+ //设置文字无缝滚动高度
|
|
|
+ let param = this.arr.length * 60
|
|
|
+ let myFirstkeyframes = "@keyframes myMove{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);
|
|
|
+ this.loading = false;
|
|
|
+ });
|
|
|
+ },
|
|
|
+ // 鼠标移入
|
|
|
+ changeActive() {
|
|
|
+ let elem = document.querySelector('.inner-container');
|
|
|
+ let state = elem.style['animationPlayState'];
|
|
|
+ elem.style['animationPlayState'] = 'paused';
|
|
|
+ },
|
|
|
+ // 鼠标移出
|
|
|
+ removeActive() {
|
|
|
+ let elem = document.querySelector('.inner-container');
|
|
|
+ let state = elem.style['animationPlayState'];
|
|
|
+ elem.style['animationPlayState'] = 'running';
|
|
|
+ },
|
|
|
+ //点击事件
|
|
|
+ chooseWarn(data) {
|
|
|
+ var warnType = data.split("（")
|
|
|
+ var type = warnType[0];
|
|
|
+ if (type === '安全阀清单') {
|
|
|
+ this.$router.push("/reliability/safetyvavle");
|
|
|
+ }else if (type === "环保批文清单") {
|
|
|
+ this.$router.push("/ehs/environapproval");
|
|
|
+ }else if (type === "消防批文清单") {
|
|
|
+ this.$router.push("/ehs/fireapproval");
|
|
|
+ }else if (type === "安全批文清单") {
|
|
|
+ this.$router.push("/ehs/safetyapproval");
|
|
|
+ }else if (type === "故障管理跟踪") {
|
|
|
+ this.$router.push("/reliability/list");
|
|
|
+ }else if (type === "MSDS管理") {
|
|
|
+ this.$router.push("/ehs/msds");
|
|
|
+ }else if (type === "管线清单") {
|
|
|
+ this.$router.push("/reliability/pipe");
|
|
|
+ }else if (type === "装置程序清单") {
|
|
|
+ this.$router.push("/document/plantproglist");
|
|
|
+ }else if (type === "PPE发放登记") {
|
|
|
+ this.$router.push("/affair/ppe");
|
|
|
+ }else if (type === "压力管道" || type === "锅炉证" || type === "加氢工艺" || type === "裂化工艺") {
|
|
|
+ this.$router.push("/training/workcertificate");
|
|
|
+ }else if (type === "上岗证一览表") {
|
|
|
+ this.$router.push("/training/worklicense");
|
|
|
+ }else if (type === "灭火器") {
|
|
|
+ this.$router.push("/ehs/fireextinguisher");
|
|
|
+ }else if (type === "洗眼器") {
|
|
|
+ this.$router.push("/ehs/eyewasher");
|
|
|
+ }else if (type === "消防水带箱") {
|
|
|
+ this.$router.push("/ehs/firehose");
|
|
|
+ }else if (type === "消防栓") {
|
|
|
+ this.$router.push("/ehs/firehydrant");
|
|
|
+ }else if (type === "高压消防炮") {
|
|
|
+ this.$router.push("/ehs/highpresfire");
|
|
|
+ }else if (type === "自动喷淋系统") {
|
|
|
+ this.$router.push("/ehs/autosprinkler");
|
|
|
+ }else if (type === "消防竖管") {
|
|
|
+ this.$router.push("/ehs/firestandpipe");
|
|
|
+ }
|
|
|
+ },
|
|
|
+ startMove() {
|
|
|
+ if (this.remove === true) {
|
|
|
+ let timer = setTimeout(() => {
|
|
|
+ if (this.number === 3) {
|
|
|
+ this.number = 0;
|
|
|
+ } else {
|
|
|
+ this.number += 1;
|
|
|
+ }
|
|
|
+ this.startMove();
|
|
|
+ }, totalDuration)
|
|
|
+ }
|
|
|
+ },
|
|
|
+ },
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped>
|
|
|
+ .text-container {
|
|
|
+ line-height: 30px;
|
|
|
+ /*border: 1px solid cornflowerblue;*/
|
|
|
+ overflow: hidden;
|
|
|
+ }
|
|
|
+ .text {
|
|
|
+ margin: 0 0 0 10px;
|
|
|
+ cursor: pointer; /*鼠标悬停变小手*/
|
|
|
+ color: #ffffff;
|
|
|
+ }
|
|
|
+ p:hover {
|
|
|
+ background-color: #296b9bb5;
|
|
|
+ }
|
|
|
+ .inner-container {
|
|
|
+ /*animation: myMove 10s linear infinite;*/
|
|
|
+ animation-fill-mode: forwards;
|
|
|
+ }
|
|
|
+ /*文字无缝滚动*/
|
|
|
+ /*@keyframes myMove {
|
|
|
+ 0% {
|
|
|
+ transform: translateY(200px);
|
|
|
+ }
|
|
|
+ 100% {
|
|
|
+ transform: translateY(-400px);
|
|
|
+ }
|
|
|
+ }*/
|
|
|
+ /*文字停顿滚动*/
|
|
|
+ @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>
|
shi'sen'yuan