<!--
|
* @Author: daidai
|
* @Date: 2022-03-01 15:27:58
|
* @LastEditors: Please set LastEditors
|
* @LastEditTime: 2022-05-07 11:24:14
|
* @FilePath: \web-pc\src\pages\big-screen\view\indexs\right-center.vue
|
-->
|
<template>
|
<div v-if="pageflag" class="right_center_wrap beautify-scroll-def" :class="{ 'overflow-y-auto': !sbtxSwiperFlag }">
|
<component :is="components" :data="list" :class-option="defaultOption">
|
<ul class="right_center ">
|
<li class="right_center_item" v-for="(item, i) in list" :key="i">
|
<span class="orderNum">{{ i + 1 }}</span>
|
<div class="inner_right">
|
<div class="dibu"></div>
|
<div class="flex">
|
<div class="info">
|
<span class="labels ">设备ID：</span>
|
<span class="contents zhuyao"> {{ item.gatewayno }}</span>
|
</div>
|
<div class="info">
|
<span class="labels">型号：</span>
|
<span class="contents "> {{ item.terminalno }}</span>
|
</div>
|
<div class="info">
|
<span class="labels">告警值：</span>
|
<span class="contents warning"> {{ item.alertvalue | montionFilter }}</span>
|
</div>
|
</div>
|
|
|
<div class="flex">
|
|
<div class="info">
|
<span class="labels"> 地址：</span>
|
<span class="contents ciyao" style="font-size:12px"> {{ item.provinceName }}/{{ item.cityName }}/{{ item.countyName }}</span>
|
</div>
|
<div class="info time">
|
<span class="labels">时间：</span>
|
<span class="contents" style="font-size:12px"> {{ item.createtime }}</span>
|
</div>
|
|
</div>
|
<div class="flex">
|
|
<div class="info">
|
<span class="labels">报警内容：</span>
|
<span class="contents ciyao" :class="{ warning: item.alertdetail }"> {{ item.alertdetail || '无'
|
}}</span>
|
</div>
|
</div>
|
</div>
|
</li>
|
</ul>
|
</component>
|
</div>
|
<Reacquire v-else @onclick="getData" style="line-height:200px" />
|
|
</template>
|
|
<script>
|
import { currentGET } from 'api/modules'
|
import vueSeamlessScroll from 'vue-seamless-scroll' // vue2引入方式
|
import Kong from '../../components/kong.vue'
|
export default {
|
components: { vueSeamlessScroll, Kong },
|
|
data() {
|
return {
|
list: [],
|
pageflag: true,
|
defaultOption: {
|
...this.$store.state.setting.defaultOption,
|
limitMoveNum: 3,
|
singleHeight: 250,
|
step:0,
|
}
|
|
};
|
},
|
computed: {
|
sbtxSwiperFlag() {
|
let ssyjSwiper = this.$store.state.setting.ssyjSwiper
|
if (ssyjSwiper) {
|
this.components = vueSeamlessScroll
|
} else {
|
this.components = Kong
|
}
|
return ssyjSwiper
|
}
|
},
|
created() {
|
this.getData()
|
},
|
|
mounted() { },
|
methods: {
|
getData() {
|
this.pageflag = true
|
// this.pageflag =false
|
currentGET('big5', { limitNum: 50 }).then(res => {
|
console.log('实时预警', res);
|
if (res.success) {
|
this.list = res.data.list
|
let timer = setTimeout(() => {
|
clearTimeout(timer)
|
this.defaultOption.step=this.$store.state.setting.defaultOption.step
|
}, this.$store.state.setting.defaultOption.waitTime);
|
} else {
|
this.pageflag = false
|
this.$Message.warning(res.msg)
|
}
|
})
|
},
|
|
},
|
};
|
</script>
|
<style lang='scss' scoped>
|
.right_center {
|
width: 100%;
|
height: 100%;
|
|
.right_center_item {
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
height: auto;
|
padding: 10px;
|
font-size: 14px;
|
color: #fff;
|
|
.orderNum {
|
margin: 0 20px 0 -20px;
|
}
|
|
|
.inner_right {
|
position: relative;
|
height: 100%;
|
width: 400px;
|
flex-shrink: 0;
|
line-height: 1.5;
|
|
.dibu {
|
position: absolute;
|
height: 2px;
|
width: 104%;
|
background-image: url("../../assets/img/zuo_xuxian.png");
|
bottom: -12px;
|
left: -2%;
|
background-size: cover;
|
}
|
}
|
|
.info {
|
margin-right: 10px;
|
display: flex;
|
align-items: center;
|
|
.labels {
|
flex-shrink: 0;
|
font-size: 12px;
|
color: rgba(255, 255, 255, 0.6);
|
}
|
|
.zhuyao {
|
color: $primary-color;
|
font-size: 15px;
|
}
|
|
.ciyao {
|
color: rgba(255, 255, 255, 0.8);
|
}
|
|
.warning {
|
color: #E6A23C;
|
font-size: 15px;
|
}
|
}
|
|
}
|
}
|
|
.right_center_wrap {
|
overflow: hidden;
|
width: 100%;
|
height: 250px;
|
}
|
|
.overflow-y-auto {
|
overflow-y: auto;
|
}
|
</style>
|
