434 lines
13 KiB
Vue
434 lines
13 KiB
Vue
<style lang="scss" scoped>
|
||
.alarmRecord{
|
||
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;
|
||
}
|
||
&-info-list{
|
||
background-color: #F9F9F9;
|
||
padding: $paddingTB $paddingLR;
|
||
margin-top: 72rpx;
|
||
}
|
||
.scrollbtm{
|
||
margin-bottom: 110rpx;
|
||
}
|
||
&-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;
|
||
left: 14rpx;
|
||
top: 14rpx;
|
||
z-index: 1;
|
||
}
|
||
.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;
|
||
width: calc(100% - 50rpx);
|
||
}
|
||
}
|
||
&-bottom{
|
||
display: flex;
|
||
justify-content: space-between;
|
||
padding: 20rpx;
|
||
}
|
||
}
|
||
&-info-box-msg-row-ctn{
|
||
position: relative;
|
||
}
|
||
&-info-box-msg-content{
|
||
display: flex;
|
||
.alarmRecord-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-between;
|
||
align-items: center;
|
||
background-color: #FFFFFF;
|
||
padding: 20rpx 30rpx;
|
||
box-shadow: $box-shadow;
|
||
// .bottom-btn{
|
||
// width: 50%;
|
||
// }
|
||
&-lf{
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
}
|
||
.alarmInfo-content{
|
||
padding: 70rpx $paddingLR;
|
||
padding-bottom: 40rpx;
|
||
&-row{
|
||
padding-bottom: 10rpx;
|
||
}
|
||
&-bottom-btn{
|
||
padding: 0 30rpx;
|
||
padding-top: 20rpx;
|
||
}
|
||
}
|
||
}
|
||
</style>
|
||
<template>
|
||
<view class="alarmRecord">
|
||
<view class="alarmRecord-header">
|
||
<u-input :disabled="true" style="width: 240rpx;" input-align="center" v-model="beginDate" @click="beginDatePickerShow = true" />
|
||
<view class="">至</view>
|
||
<u-input :disabled="true" style="width: 240rpx;" input-align="center" v-model="endDate" @click="endDatePickerShow = true" />
|
||
<u-button type="primary" size="mini" :ripple="true" :disabled="toalLen === 0" @click="headerBtnHandleFn">{{checkboxShowFlag | checkBtnName}}</u-button>
|
||
</view>
|
||
<view class="alarmRecord-info-list" :class="{'scrollbtm': checkboxShowFlag}">
|
||
<mescroll-body ref="mescrollRef" top="0" @init="mescrollInit" @down="downCallback" @up="upCallback">
|
||
<checkbox-group @change="checkboxChange">
|
||
<view class="alarmRecord-info-box" v-for="(item,index) in lineRoadList" :key="index">
|
||
<view class="alarmRecord-info-box-msg">
|
||
<!-- <u-checkbox class="box-checkbox" v-if="checkboxShowFlag && item.processStatus == 'UNPROCESS'" @change="checkboxChange($event, item.projectId)"></u-checkbox> -->
|
||
<view class="box-checkbox" v-if="checkboxShowFlag && item.processStatus == 'UNPROCESS'">
|
||
<checkbox :value="item.recordId" :checked="selCheck.includes(item.recordId)" color="#1C9AFF"/>
|
||
</view>
|
||
<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="alarmRecord-info-box-msg-content">
|
||
<view class="alarmRecord-info-box-msg-warning">{{item.alarmDivide=='ALARM'?"报警":"预警"}}</view>
|
||
<view class="alarmRecord-info-box-msg-row-ctn">
|
||
<view class="box-left-line"></view>
|
||
<view class="alarmRecord-info-box-msg-row">
|
||
<view class="msg-row-icon">
|
||
<tui-icon color="#fff" name="xiangmu" size="26"></tui-icon>
|
||
</view>
|
||
<view class="msg-row-text pl20">项目：{{item.projectName}}</view>
|
||
</view>
|
||
<view class="alarmRecord-info-box-msg-row">
|
||
<view class="msg-row-icon">
|
||
<tui-icon color="#fff" name="ditu2" size="26"></tui-icon>
|
||
</view>
|
||
<view class="msg-row-text pl20">地点：{{item.projectAddress}}</view>
|
||
</view>
|
||
<view class="alarmRecord-info-box-msg-row">
|
||
<view class="msg-row-icon">
|
||
<tui-icon color="#fff" name="xinpian" size="26"></tui-icon>
|
||
</view>
|
||
<view class="msg-row-text pl20">线路：{{item.deviceName}}</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="alarmRecord-info-box-bottom">
|
||
<text>时间：{{item.alarmTime}}</text>
|
||
<text>报警类型：{{item.typeName}}</text>
|
||
</view>
|
||
</view>
|
||
</checkbox-group>
|
||
</mescroll-body>
|
||
</view>
|
||
<view class="bottom-btn-ctn" v-if="checkboxShowFlag">
|
||
<!-- <u-button type="warning" class="bottom-btn" @click="cancelDealWithFn">取消</u-button> -->
|
||
<view class="bottom-btn-ctn-lf">
|
||
<checkbox color="#1C9AFF" :checked="checkedAll" @click="checkedAllClick"/>
|
||
<text>全选</text>
|
||
<text style="margin-left: 20rpx;">{{chckLen}}/{{toalLen}}</text>
|
||
</view>
|
||
<u-button type="primary" size="medium " :ripple="true" class="bottom-btn" @click="handleNowFn">立即处理</u-button>
|
||
</view>
|
||
<u-picker mode="time" :params="params" v-model="beginDatePickerShow" @confirm="beginDateConfirmFn"></u-picker>
|
||
<u-picker mode="time" :params="params" v-model="endDatePickerShow" @confirm="endDateConfirmFn"></u-picker>
|
||
<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" :ripple="true" @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 {
|
||
checkboxShowFlag:false, // 按钮开关
|
||
alarmShowFlag:false, // 报警信息弹框开关
|
||
// currentPickInfoData:null, // 当前选择的报警信息
|
||
params:{
|
||
year: true,
|
||
month: true,
|
||
day: true,
|
||
timestamp: true, // 1.3.7版本提供
|
||
},
|
||
beginDatePickerShow:false,
|
||
endDatePickerShow:false,
|
||
beginDate:"",
|
||
endDate:"",
|
||
deviceId:"",
|
||
lineRoadList:[],
|
||
currentPickInfoData: {},
|
||
selCheck: [],
|
||
checkedAll: false
|
||
}
|
||
},
|
||
mixins:[MescrollMixin],
|
||
onLoad(e) {
|
||
this.beginDate = this.$u.timeFormat(new Date().getTime(), 'yyyy-mm-dd');
|
||
this.endDate = this.$u.timeFormat(new Date().getTime(), 'yyyy-mm-dd');
|
||
this.deviceId = e.deviceId;
|
||
},
|
||
methods: {
|
||
subtractOneDay(dateStr) {
|
||
// 将字符串转换为Date对象
|
||
const date = new Date(dateStr);
|
||
|
||
// 减去一天
|
||
date.setDate(date.getDate() - 1);
|
||
|
||
// 格式化为yyyy-mm-dd
|
||
const year = date.getFullYear();
|
||
const month = String(date.getMonth() + 1).padStart(2, '0'); // 月份从0开始，所以+1
|
||
const day = String(date.getDate()).padStart(2, '0');
|
||
|
||
return `${year}-${month}-${day}`;
|
||
},
|
||
/*上拉加载的回调*/
|
||
upCallback(page) {
|
||
let pageNum = page.num; // 页码, 默认从1开始
|
||
let pageSize = page.size; // 页长, 默认每页10条
|
||
let beginTime = this.subtractOneDay(this.beginDate);
|
||
let obj = {
|
||
pageSize:pageSize,
|
||
pageNum:pageNum,
|
||
deviceId:this.deviceId,
|
||
beginTime:beginTime,
|
||
endTime:this.endDate,
|
||
}
|
||
this.$get("/app/alarm/table",obj).then((res)=>{
|
||
// console.log(res,"ressssssssssss");
|
||
if (res.rows && res.rows.length>0) {
|
||
// 接口返回的当前页数据列表 (数组)
|
||
let curPageData = res.rows;
|
||
// 接口返回的当前页数据长度 (如列表有26个数据,当前页返回8个,则curPageLen=8)
|
||
let curPageLen = curPageData.length;
|
||
//设置列表数据
|
||
if(pageNum == 1) this.lineRoadList = []; //如果是第一页需手动置空列表
|
||
this.lineRoadList = this.lineRoadList.concat(curPageData); //追加新数据
|
||
this.handleCheck(curPageData);
|
||
this.mescroll.endBySize(curPageLen, res.total); // 推荐
|
||
// this.mescroll.endByPage(curPageLen, res.data.total)
|
||
// this.mescroll.endSuccess(curPageData.length);
|
||
} else{
|
||
this.lineRoadList = [];
|
||
this.mescroll.endErr();
|
||
this.mescroll.showEmpty();
|
||
// this.mescroll.endUpScroll(true);
|
||
}
|
||
}).catch(()=>{
|
||
//联网失败, 结束加载
|
||
this.mescroll.endErr();
|
||
})
|
||
},
|
||
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(this.checkboxShowFlag) {
|
||
this.$tui.toast('当前为批处理，请先取消批处理', 3000);
|
||
return false;
|
||
}
|
||
if(item.processStatus == 'UNPROCESS'){
|
||
this.alarmShowFlag = true;
|
||
this.currentPickInfoData = item;
|
||
}
|
||
},
|
||
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')
|
||
this.mescroll.resetUpScroll()
|
||
},
|
||
endDateConfirmFn(e){
|
||
console.log(e,"e")
|
||
this.endDate = this.$u.timeFormat(e.timestamp, 'yyyy-mm-dd')
|
||
this.mescroll.resetUpScroll()
|
||
},
|
||
headerBtnHandleFn(){
|
||
if (this.checkboxShowFlag) {
|
||
this.checkboxShowFlag = false;
|
||
this.selCheck = [];
|
||
this.checkAll = false;
|
||
} else{
|
||
this.checkboxShowFlag = true;
|
||
}
|
||
},
|
||
checkboxChange(e) {
|
||
this.selCheck = e.detail.value;
|
||
},
|
||
checkedAllClick(){
|
||
const _this = this;
|
||
this.checkedAll = !this.checkedAll;
|
||
if(this.checkedAll){
|
||
this.selCheck = [];
|
||
this.lineRoadList.forEach(item => {
|
||
if(item.processStatus == 'UNPROCESS'){
|
||
if(!_this.selCheck.includes(item.recordId)){
|
||
_this.selCheck.push(item.recordId);
|
||
}
|
||
}
|
||
})
|
||
}else{
|
||
this.selCheck = [];
|
||
}
|
||
},
|
||
handleCheck(data) {
|
||
if(this.checkedAll){
|
||
data.forEach(item => {
|
||
if(item.processStatus == 'UNPROCESS'){
|
||
if(!this.selCheck.includes(item.recordId)){
|
||
this.selCheck.push(item.recordId);
|
||
}
|
||
}
|
||
})
|
||
}
|
||
},
|
||
handleNowFn() {
|
||
this.$post('/app/alarm/batch-update', {recordIds: this.selCheck}).then(res => {
|
||
if(res.code == 200) {
|
||
this.$tui.toast('处理成功', 3000, true);
|
||
this.updateState(this.selCheck);
|
||
this.selCheck = [];
|
||
this.checkboxShowFlag = false;
|
||
}
|
||
})
|
||
},
|
||
projectHandleNowFn(data) {
|
||
this.selCheck = [data.recordId];
|
||
this.handleNowFn();
|
||
this.alarmShowFlag = false;
|
||
},
|
||
updateState(selCheck) {
|
||
this.lineRoadList.forEach(item => {
|
||
if(selCheck.includes(item.recordId)) {
|
||
item.processStatus = 'PROCESSED';
|
||
}
|
||
})
|
||
}
|
||
},
|
||
computed: {
|
||
checkAll() {
|
||
return this.lineRoadList.every(item => {
|
||
return item.processStatus == 'UNPROCESS' && this.selCheck.includes(item.recordId);
|
||
});
|
||
},
|
||
toalLen() {
|
||
return this.lineRoadList.length || 0;
|
||
},
|
||
chckLen() {
|
||
return this.selCheck.length || 0;
|
||
}
|
||
},
|
||
filters: {
|
||
checkBtnName(flag) {
|
||
if(flag) {
|
||
return '取消批量处理';
|
||
} else {
|
||
return '批量处理';
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|