<template>
|
<vue-seamless-scroll :data="listData" :class-option="classOption" ref="seamlessScroll" class="my-outbox">
|
<div class="my-inbox">
|
<div v-for="(item,index) in listData" :key='index' ref='list' @click="clickItem(item)" class="my-list">
|
<div v-if="!item.isEmpty" class="item">
|
<div class="station-name" :title="item.stationName3">{{item.stationName3}}</div> <div class="alarm-time">{{item.almStartTime}}</div> <div class="alarm-name">{{item.almSignalIdName ||'未知'}}</div>
|
</div>
|
<div class="item empty" v-else :style="{'width':item.width+'px'}"></div>
|
</div>
|
</div>
|
<!-- <div class="my-inbox" slot="copy">
|
<div v-for="(item,index) in listData" :key='index' ref='list' @click="clickItem(item)" class="my-list">
|
<div v-if="!item.isEmpty">
|
{{item.stationName}}在{{item.almStartTime}}出现了{{item.alarmName||'未知'}}
|
<img src="../../assets/images/new.png" class="img" v-if="item.isNew">
|
</div>
|
<div v-else :style="{'width':item.width+'px'}"></div>
|
</div>
|
</div> -->
|
</vue-seamless-scroll>
|
</template>
|
|
<script>
|
import vueSeamlessScroll from '@/layout/components/FooterScroll.vue';
|
export default {
|
name: 'marquee-left',
|
components: {
|
vueSeamlessScroll
|
},
|
props: {
|
sendVal: {
|
type: Array,
|
default() {
|
return [];
|
}
|
},
|
},
|
data() {
|
return {
|
listData: [],
|
classOption: {
|
limitMoveNum: 0,
|
direction: 1,
|
step: 0.3,
|
},
|
startDis: window.screen.width,
|
sstationObj: {},
|
alarmId: "",
|
emptyIndex: null,
|
distanceWid: null,
|
// 每一个内容的宽度
|
disArr: [],
|
}
|
},
|
watch: {
|
'sendVal': {
|
handler(val) {
|
this.$nextTick(() => {
|
this.listData = JSON.parse(JSON.stringify(val))
|
var item = this.$refs.list
|
var arr = []
|
// 因为设置的margin值一样，所以取第一个就行。
|
var margin = 0
|
if (item && item.length > 0) {
|
margin = this.getMargin(item[0])
|
}
|
if (this.listData.length > 0) {
|
this.listData.map((jtem, i) => {
|
if (item && item.length > 0) {
|
arr.push(item[i]?.clientWidth + margin) // 把宽度和 margin 加起来就是每一个元素需要移动的距离
|
}
|
})
|
}
|
this.disArr = arr
|
// listData length无变化，仅仅是属性变更，手动调用下组件内部的reset方法
|
this.$refs.seamlessScroll.reset()
|
})
|
},
|
immediate: true,
|
},
|
},
|
mounted() {
|
|
},
|
beforeDestroy() {
|
|
},
|
computed: {
|
search() {
|
let list = this.stationObj;
|
let id = this.alarmId;
|
return '?province=' + list.stationName1 + '&city=' + list.stationName2 + '&county=' + list.stationName5 +
|
'&home=' + list.stationName3 + '&alamId=' + id + "&stationName=" + list.stationName
|
},
|
},
|
methods: {
|
clickItem(val) {
|
this.stationObj = val.stationObj;
|
this.alarmId = val.almId;
|
let pageFlag = Math.random();
|
if (val.alarmType == '1') {
|
//设备实时告警
|
this.$router.push('/alarmMager/deviceTimequery' + this.search + '&fromType=fromIndex&'+"pageFlag="+pageFlag)
|
}else if(val.alarmType=='2') {
|
let strNum = RegExp('^1150');
|
// 通信电源设备告警
|
if(strNum.test(val.battGroupId)) {
|
this.$router.push('/alarmMager/powerBoxAlarm' + this.search + '&fromType=fromIndex&'+"pageFlag="+pageFlag)
|
}else {
|
//电源实时告警-国网页面
|
this.$router.push('/alarmMager/powerRealtimeInfo' + this.search + '&fromType=fromIndex&'+"pageFlag="+pageFlag)
|
}
|
|
} else {
|
//电池实时告警
|
this.$router.push('/alarmMager/batteryrTimequery' + this.search + '&fromType=fromIndex&'+"pageFlag="+pageFlag)
|
}
|
},
|
// 获取margin属性
|
getMargin(obj) {
|
var marg = window.getComputedStyle(obj, null)['margin-right']
|
marg = marg.replace('px', '')
|
return Number(marg) // 强制转化成数字
|
},
|
}
|
}
|
</script>
|
|
<style scoped lang="less">
|
.my-outbox {
|
/*color: #D7BC8D;*/
|
overflow: hidden;
|
color: #ffffff;
|
/* height: 35px; */
|
/*background: #422b02;*/
|
}
|
|
.my-inbox {
|
white-space: nowrap;
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
}
|
|
.my-list {
|
margin-right: 25px;
|
display: inline-block;
|
font-size: 0.6rem;
|
height: 40px;
|
line-height: 40px;
|
cursor: pointer;
|
position: relative;
|
}
|
|
.my-list .img {
|
width: 32px;
|
height: 14px;
|
}
|
.item {
|
display: flex;
|
.station-name {
|
display: inline-block;
|
color: #fff;
|
max-width: 14em;
|
overflow: hidden;
|
white-space: nowrap;
|
text-overflow: ellipsis;
|
margin-right: 0.4em;
|
}
|
.alarm-time {
|
display: inline-block;
|
color: #ebf006;
|
margin-left: 0.4em;
|
margin-right: 0.4em;
|
}
|
.alarm-name {
|
display: inline-block;
|
color: #fc0303;
|
margin-left: 0.4em;
|
}
|
}
|
|
.my-uname {
|
/*color: #FF8900;*/
|
color: #ffffff;
|
}
|
</style>
|
