446 lines
12 KiB
Vue
446 lines
12 KiB
Vue
<style lang="scss" scoped>
|
|
.realTime{
|
|
width: 100%;
|
|
background-color: #F9F9F9;
|
|
:not(not) {
|
|
box-sizing: border-box;
|
|
}
|
|
&-header{
|
|
// position: fixed;
|
|
// top: 0;
|
|
// left: 0;
|
|
// z-index: 100;
|
|
// width: 100%;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
border-bottom: 1px solid #eee;
|
|
background-color: #fff;
|
|
padding: 0 $paddingLR;
|
|
&-screening{
|
|
width: 140rpx;
|
|
text-align: center;
|
|
}
|
|
&-input{
|
|
width: calc(100% - 140rpx);
|
|
}
|
|
.slot-content{
|
|
background-color: #FFFFFF;padding: 0 30rpx 20rpx;
|
|
&-btn{margin-top: 20rpx;}
|
|
}
|
|
}
|
|
&-info-list{
|
|
background-color: #F9F9F9;
|
|
padding: $paddingTB $paddingLR;
|
|
}
|
|
&-info-box{
|
|
width: 100%;
|
|
border-radius: $uni-border-radius-lg;
|
|
background-color: #fff;
|
|
box-shadow: $box-shadow;
|
|
margin-bottom: 20rpx;
|
|
font-size: 24rpx;
|
|
&:last-child{
|
|
margin-bottom: 0;
|
|
}
|
|
&-msg{
|
|
padding: 20rpx;
|
|
/* border-bottom: 2px dotted #A1A1A1; */
|
|
border-bottom: 1px dashed #A1A1A1;
|
|
position: relative;
|
|
}
|
|
.box-checkbox{
|
|
position: absolute;
|
|
right: -16rpx;
|
|
top: 14rpx;
|
|
}
|
|
.box-dealwith{
|
|
position: absolute;
|
|
right: 20rpx;
|
|
bottom: 20rpx;
|
|
z-index: 1;
|
|
padding-left: 50rpx;
|
|
padding-top: 50rpx;
|
|
}
|
|
.box-left-line{
|
|
width: 8rpx;
|
|
height: 180rpx;
|
|
background: #93CDFC;
|
|
position: absolute;
|
|
z-index: 1;
|
|
left: 20rpx;
|
|
top: 4rpx;
|
|
// left: 40rpx;
|
|
// top: 20rpx;
|
|
}
|
|
&-msg-row{
|
|
display: flex;
|
|
align-items: center;
|
|
margin-bottom: 20rpx;
|
|
&:last-child{
|
|
margin-bottom: 0;
|
|
}
|
|
.msg-row-icon{
|
|
border-radius: $uni-border-radius-circle;
|
|
/* padding: 10rpx; */
|
|
width: 50rpx;
|
|
height: 50rpx;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
background-color: $main-color;
|
|
z-index: 10;
|
|
}
|
|
.msg-row-text{
|
|
color: #000;
|
|
}
|
|
}
|
|
&-bottom{
|
|
display: flex;
|
|
justify-content: space-between;
|
|
padding: 20rpx;
|
|
}
|
|
}
|
|
&-info-box-msg-row-ctn{
|
|
position: relative;
|
|
}
|
|
&-info-box-msg-content{
|
|
display: flex;
|
|
.realTime-info-box-msg-warning{
|
|
width: 120rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: #FF3F3F;
|
|
font-size: 36rpx;
|
|
}
|
|
}
|
|
.bottom-btn-ctn{
|
|
position: fixed;
|
|
bottom: 0;
|
|
left: 0;
|
|
z-index: 100;
|
|
width: 100%;
|
|
display: flex;
|
|
justify-content: space-around;
|
|
.bottom-btn{
|
|
width: 50%;
|
|
|
|
}
|
|
}
|
|
|
|
.alarmInfo-content{
|
|
padding: 70rpx $paddingLR;
|
|
padding-bottom: 40rpx;
|
|
&-row{
|
|
padding-bottom: 10rpx;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
&-bottom-btn{
|
|
padding: 0 30rpx;
|
|
padding-top: 20rpx;
|
|
}
|
|
}
|
|
}
|
|
</style>
|
|
<template>
|
|
<view class="realTime">
|
|
<view class="realTime-header" :style="{height:isShowDropdown?'100%':''}">
|
|
<u-dropdown ref="uDropdown" @open="isShowDropdown = true" @close="isShowDropdown = false" >
|
|
<u-dropdown-item title="筛选" v-model="value1">
|
|
<view class="slot-content">
|
|
<u-cell-group>
|
|
<u-cell-item :arrow="false" title="包含预警">
|
|
<u-switch v-model="switchYj"></u-switch>
|
|
</u-cell-item>
|
|
<u-cell-item :arrow="false" title="只显示未处理">
|
|
<u-switch v-model="switchWcl"></u-switch>
|
|
</u-cell-item>
|
|
</u-cell-group>
|
|
<view class="slot-content-btn">
|
|
<u-button type="primary" @click="filterCommit">确定</u-button>
|
|
</view>
|
|
</view>
|
|
</u-dropdown-item>
|
|
<!-- <u-dropdown-item title="状态" v-model="value2" :options="options2"> -->
|
|
<!-- <view class="slot-content">
|
|
<u-cell-group>
|
|
<u-cell-item :arrow="false" title="夕阳无限好">
|
|
<u-switch v-model="yj"></u-switch>
|
|
</u-cell-item>
|
|
<u-cell-item :arrow="false" title="只显示离线报警"></u-cell-item>
|
|
</u-cell-group>
|
|
</view> -->
|
|
<!-- </u-dropdown-item> -->
|
|
</u-dropdown>
|
|
<u-search :show-action="false" class="realTime-header-input" height="60" placeholder="请输入设备名称" v-model="searchVal" @search="searchFn" @change="changeFn"></u-search>
|
|
<!-- <u-input class="realTime-header-input" :border="true" /> -->
|
|
</view>
|
|
<!-- <u-popup v-model="showFlag" mode="top">
|
|
<view>出淤泥而不染，濯清涟而不妖</view>
|
|
</u-popup> -->
|
|
<view class="realTime-info-list">
|
|
<mescroll-body ref="mescrollRef" top="0" @init="mescrollInit" @down="downCallback" @up="upCallback" >
|
|
<view class="realTime-info-box" v-for="(item,index) in lineRoadList" :key="index">
|
|
<view class="realTime-info-box-msg">
|
|
<!-- <u-checkbox class="box-checkbox" v-if="checkboxShowFlag" v-model="item.checkedFlag"></u-checkbox> -->
|
|
<view class="box-dealwith" @click="openDealwithFn(item)">
|
|
<tuiIcon :name="item.processStatus == 'UNPROCESS'? 'weichuli':'yichuli'" size="80" :color="item.processStatus == 'UNPROCESS'? '#BE2D08': '#71B943'"></tuiIcon>
|
|
</view>
|
|
<view class="realTime-info-box-msg-content">
|
|
<view class="realTime-info-box-msg-warning">{{item.alarmDivide | alarmType}}</view>
|
|
<view class="realTime-info-box-msg-row-ctn">
|
|
<view class="box-left-line"></view>
|
|
<view class="realTime-info-box-msg-row">
|
|
<view class="msg-row-icon">
|
|
<tui-icon color="#fff" name="xiangmu" size="26"></tui-icon>
|
|
</view>
|
|
<text class="msg-row-text pl20">项目：{{item.projectName}}</text>
|
|
</view>
|
|
<view class="realTime-info-box-msg-row">
|
|
<view class="msg-row-icon">
|
|
<tui-icon color="#fff" name="ditu2" size="26"></tui-icon>
|
|
</view>
|
|
<text class="msg-row-text pl20">地点：{{item.projectAddress}}</text>
|
|
</view>
|
|
<view class="realTime-info-box-msg-row">
|
|
<view class="msg-row-icon">
|
|
<tui-icon color="#fff" name="xinpian" size="26"></tui-icon>
|
|
</view>
|
|
<text class="msg-row-text pl20">线路：{{item.deviceName}}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="realTime-info-box-bottom">
|
|
<text>时间：{{item.alarmTime}}</text>
|
|
<text>报警类型：{{item.typeName}}</text>
|
|
</view>
|
|
</view>
|
|
</mescroll-body>
|
|
</view>
|
|
<u-popup v-model="alarmShowFlag" mode="center" :closeable="true" width="80%">
|
|
<view class="alarmInfo-content">
|
|
<view class="alarmInfo-content-row">项目：{{currentPickInfoData.projectName}}</view>
|
|
<view class="alarmInfo-content-row">地址：{{currentPickInfoData.projectAddress}}</view>
|
|
<view class="alarmInfo-content-row">线路：{{currentPickInfoData.deviceName}}</view>
|
|
<view class="alarmInfo-content-row">报警类型：{{currentPickInfoData.typeName}}</view>
|
|
<view class="alarmInfo-content-row">报警时间：{{currentPickInfoData.alarmTime}}</view>
|
|
<!-- <view class="alarmInfo-content-row">联系人：{{}}</view>
|
|
<view class="alarmInfo-content-row">联系电话：{{}}</view> -->
|
|
<view class="alarmInfo-content-bottom-btn">
|
|
<u-button type="primary" shape="circle" @click="projectHandleNowFn(currentPickInfoData)">立即处理</u-button>
|
|
<!-- <view class="pt20"></view>
|
|
<u-button type="primary" shape="circle" @click="fiilMaintenanceFn">填写维保</u-button> -->
|
|
</view>
|
|
</view>
|
|
</u-popup>
|
|
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
|
|
export default {
|
|
data() {
|
|
return {
|
|
alarmShowFlag:false,
|
|
checkboxShowFlag:false,
|
|
value1:"",
|
|
value2:1,
|
|
options2:[{
|
|
label:"全部",
|
|
value:1,
|
|
},{
|
|
label:"已处理",
|
|
value:2,
|
|
},{
|
|
label:"未处理",
|
|
value:3,
|
|
}],
|
|
switchYj:false,
|
|
switchWcl: false,
|
|
isShowDropdown:false,
|
|
showFlag:false,
|
|
searchVal:"",
|
|
params:{
|
|
year: true,
|
|
month: true,
|
|
day: true,
|
|
timestamp: true, // 1.3.7版本提供
|
|
},
|
|
beginDatePickerShow:false,
|
|
endDatePickerShow:false,
|
|
beginDate:"",
|
|
endDate:"",
|
|
lineRoadList:[],
|
|
currentPickInfoData: {},
|
|
where: {
|
|
alarmDivide: 'ALARM'
|
|
}
|
|
}
|
|
},
|
|
mixins:[MescrollMixin],
|
|
created() {
|
|
this.beginDate = this.$u.timeFormat(new Date().getTime(), 'yyyy-mm-dd');
|
|
this.endDate = this.$u.timeFormat(new Date().getTime(), 'yyyy-mm-dd');
|
|
},
|
|
methods: {
|
|
upCallback(page) {
|
|
const _this = this;
|
|
let pageNum = page.num; // 页码, 默认从1开始
|
|
let pageSize = page.size; // 页长, 默认每页10条
|
|
this.where['pageNum'] = pageNum;
|
|
this.where['pageSize'] = pageSize;
|
|
|
|
this.$get('/iot/record/list', this.where).then(res => {
|
|
if(res.code === 200){
|
|
console.log('报警信息列表res: ', res)
|
|
if(res.rows && res.rows.length > 0){
|
|
let curPageData = res.rows;
|
|
let curPageLen = curPageData.length;
|
|
let totalSize = res.total;
|
|
|
|
_this.$nextTick(()=>{
|
|
// 隐藏下拉刷新和上拉加载的状态;
|
|
_this.mescroll.endBySize(curPageLen, totalSize);
|
|
})
|
|
if(pageNum == 1) this.lineRoadList = []; //如果是第一页需手动置空列表
|
|
_this.lineRoadList = this.lineRoadList.concat(curPageData); //追加新数据
|
|
_this.mescroll.endBySize(curPageLen, totalSize); // 推荐
|
|
} else {
|
|
_this.lineRoadList = [];
|
|
_this.mescroll.endErr();
|
|
_this.mescroll.showEmpty();
|
|
}
|
|
}
|
|
})
|
|
},
|
|
switchYjFn(flag) {
|
|
if(flag){
|
|
this.switchBj = false;
|
|
}
|
|
},
|
|
switchBjFn(flag) {
|
|
if(flag){
|
|
this.switchYj = false;
|
|
}
|
|
},
|
|
filterCommit() {
|
|
if(this.switchYj && !this.switchWcl) { //包含预警
|
|
this.where = {};
|
|
} else if (!this.switchYj && this.switchWcl) { //只显示未处理
|
|
this.where = {
|
|
alarmDivide: 'ALARM',
|
|
processStatus: 'UNPROCESS'
|
|
};
|
|
} else if (this.switchYj && this.switchWcl) {
|
|
this.where = {
|
|
processStatus: 'UNPROCESS'
|
|
};
|
|
} else {
|
|
this.where = {
|
|
alarmDivide: 'ALARM'
|
|
}
|
|
}
|
|
this.mescroll.resetUpScroll();
|
|
this.$refs.uDropdown.close();
|
|
},
|
|
searchFn(value) {
|
|
this.where = {
|
|
deviceName: value
|
|
}
|
|
this.mescroll.resetUpScroll();
|
|
},
|
|
changeFn(value) {
|
|
if(value == '') {
|
|
this.where = {
|
|
alarmDivide: 'ALARM'
|
|
}
|
|
this.mescroll.resetUpScroll();
|
|
}
|
|
},
|
|
fiilMaintenanceFn(){
|
|
let queryDataStr = JSON.stringify(this.currentPickInfoData);
|
|
uni.navigateTo({
|
|
url:`/pages/home/wisdomElectricity/wbjl/addRecord?alrmData=${queryDataStr}`,
|
|
success: () => {
|
|
this.alarmShowFlag = false;
|
|
}
|
|
})
|
|
},
|
|
openDealwithFn(item){
|
|
console.log(item,"item");
|
|
if(item.processStatus == 'UNPROCESS'){
|
|
this.alarmShowFlag = true;
|
|
this.currentPickInfoData = item;
|
|
}
|
|
},
|
|
headerBtnHandleFn(){
|
|
if (this.checkboxShowFlag) {
|
|
let falseChecked = this.lineRoadList.filter((o)=>{
|
|
return o.checkedFlag == false;
|
|
})
|
|
console.log(falseChecked,"falseChecked");
|
|
if(falseChecked.length === 0){
|
|
this.lineRoadList.forEach((item)=>{
|
|
item.checkedFlag = false;
|
|
})
|
|
} else{
|
|
this.lineRoadList.forEach((item)=>{
|
|
item.checkedFlag = true;
|
|
})
|
|
}
|
|
} else{
|
|
this.checkboxShowFlag = true
|
|
}
|
|
|
|
},
|
|
cancelDealWithFn(){
|
|
this.lineRoadList.forEach((item)=>{
|
|
item.checkedFlag = false;
|
|
})
|
|
this.checkboxShowFlag = false;
|
|
},
|
|
beginDateConfirmFn(e){
|
|
console.log(e,"e")
|
|
this.beginDate = this.$u.timeFormat(e.timestamp, 'yyyy-mm-dd')
|
|
},
|
|
endDateConfirmFn(e){
|
|
console.log(e,"e")
|
|
this.endDate = this.$u.timeFormat(e.timestamp, 'yyyy-mm-dd')
|
|
},
|
|
projectHandleNowFn(data) {
|
|
this.$post('/app/alarm/batch-update', {recordIds: [data.recordId]}).then(res => {
|
|
if(res.code == 200) {
|
|
this.$tui.toast('处理成功', 3000, true);
|
|
this.updateState(data.recordId);
|
|
this.alarmShowFlag = false;
|
|
}
|
|
})
|
|
},
|
|
updateState(id) {
|
|
this.lineRoadList.forEach(item => {
|
|
if(item.recordId == id) {
|
|
item.processStatus = 'PROCESSED';
|
|
}
|
|
})
|
|
}
|
|
},
|
|
filters: {
|
|
alarmType(val) {
|
|
if(val == 'ALARM'){
|
|
return '报警';
|
|
} else if (val == 'WARNING') {
|
|
return '预警';
|
|
} else {
|
|
return '异常';
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|