gy-app-shop/pages/tabBar/alarm.vue

706 lines
24 KiB
Vue

<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>
<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-tabs :list="tabList" :is-scroll="false" bg-color="transparent" active-color="#1c9aff" :current="tabCurrent" @change="changeTab"></u-tabs>
<view class="realTime-info-list">
<mescroll-body ref="mescrollRef" top="0" @init="mescrollInit" @down="downCallback" @up="upCallback" >
<!-- 报警列表 -->
<view v-if="tabCurrent==0" 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)"> -->
<view class="box-dealwith" @click="openDealwithFn(item)">
<tuiIcon :name="item.processStatus == 'UNPROCESS'? 'weichuli':'yichuli'" size="80" :color="item.processStatus == 'UNPROCESS'? '#BE2D08': '#71B943'"></tuiIcon>
</view>
<u-button v-if="item.processStatus == 'UNPROCESS'" size="mini" type="primary" class="deal-with-btn" @click="openDealwithFn(item)">立即处理</u-button>
<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 pr128">项目:{{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>
<!-- 我的工单 -->
<view v-if="tabCurrent == 1" class="realTime-info-box" v-for="(item,index) in workWrderList" :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="openworkWrderFn(item)">
<tuiIcon v-if="item.maintenanceStatus==0" name="weiqueren" size="80" color="grey"></tuiIcon>
<tuiIcon v-if="item.maintenanceStatus==1" name="yibohui" size="80" color="#ff522a"></tuiIcon>
<tuiIcon v-if="item.maintenanceStatus==2" name="weichuli" size="80" color="red"></tuiIcon>
<tuiIcon v-if="item.maintenanceStatus==6" name="zanhuan" size="80" color="orange"></tuiIcon>
<tuiIcon v-if="item.maintenanceStatus==3" name="yichuli" size="80" color="#1c9aff"></tuiIcon>
<tuiIcon v-if="item.maintenanceStatus==4" name="shenhebohui" size="80" color="purple"></tuiIcon>
<tuiIcon v-if="item.maintenanceStatus==5" name="shenhetongguo" size="80" color="green"></tuiIcon>
</view>
<view class="realTime-info-box-msg-content">
<view class="realTime-info-box-msg-warning" v-if="tabCurrent==1">工单</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.createTime}}</text>
<text>工单类型:{{item.faultTypeName}}</text>
</view>
</view>
</mescroll-body>
</view>
<!-- 报警处理 -->
<u-popup v-model="alarmListShowFlag" mode="center" :closeable="true" width="80%">
<view class="alarmListInfo-content">
<view class="alarmListInfo-content-row">项目:{{currentPickInfoData.projectName}}</view>
<view class="alarmListInfo-content-row">地址:{{currentPickInfoData.projectAddress}}</view>
<view class="alarmListInfo-content-row">设备名:{{currentPickInfoData.deviceName}}</view>
<view class="alarmListInfo-content-row">报警类型:{{currentPickInfoData.typeName}}</view>
<view class="alarmListInfo-content-row">报警时间:{{currentPickInfoData.alarmTime}}</view>
<!-- <view class="alarmListInfo-content-row">联系人:{{}}</view>
<view class="alarmListInfo-content-row">联系电话:{{}}</view> -->
<view class="alarmListInfo-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>
<!-- 工单确认 -->
<u-popup v-model="workWrderShow" mode="center" :closeable="true" width="80%">
<view class="alarmInfo-title flex-center">{{workWrderSelectData.maintenanceStatus==0?'工单确认':'驳回工单'}}</view>
<view class="alarmInfo-content">
<view class="alarmInfo-content-row">项目:{{workWrderSelectData.projectName}}</view>
<view class="alarmInfo-content-row">地址:{{workWrderSelectData.projectAddress}}</view>
<view class="alarmInfo-content-row">设备名:{{workWrderSelectData.deviceName}}</view>
<view class="alarmInfo-content-row">工单类型:{{workWrderSelectData.faultTypeName}}</view>
<view class="alarmInfo-content-row">工单时间:{{workWrderSelectData.createTime}}</view>
<view class="alarmInfo-content-row">工单内容:{{workWrderSelectData.maintenanceContext}}</view>
<view class="alarmInfo-content-row">工单反馈:{{workWrderSelectData.feedbackInformation}}</view>
<view class="alarmInfo-content-row">工单建议:{{workWrderSelectData.advice}}</view>
<view class="alarmInfo-content-title flex-center" v-if="workWrderSelectData.maintenanceStatus==0">反馈</view>
<u-input v-model="feedbackInformation" cursor-spacing="60" :fixed="true" v-if="workWrderSelectData.maintenanceStatus==0" type="textarea" border="true" height="100" auto-height="true" placeholder="请输入反馈"/>
<view class="alarmInfo-content-bottom-btn" v-if="workWrderSelectData.maintenanceStatus==0">
<u-button type="error" @click="workWrderBtn('1')">驳回</u-button>
<u-button type="primary" @click="workWrderBtn('2')">确认</u-button>
</view>
</view>
</u-popup>
<!-- 工单处理 -->
<u-popup v-model="alarmShowFlag" mode="center" :closeable="true" width="80%">
<view class="alarmInfo-title flex-center" v-if="workWrderSelectData.maintenanceStatus==2">工单处理</view>
<view class="alarmInfo-title flex-center" v-if="workWrderSelectData.maintenanceStatus==6">工单暂缓</view>
<view class="alarmInfo-title flex-center" v-if="workWrderSelectData.maintenanceStatus==3">工单已处理</view>
<view class="alarmInfo-title flex-center" v-if="workWrderSelectData.maintenanceStatus==4">工单审核驳回</view>
<view class="alarmInfo-title flex-center" v-if="workWrderSelectData.maintenanceStatus==5">工单审核通过</view>
<view class="alarmInfo-content">
<view class="alarmInfo-content-row">项目:{{workWrderSelectData.projectName}}</view>
<view class="alarmInfo-content-row">地址:{{workWrderSelectData.projectAddress}}</view>
<view class="alarmInfo-content-row">设备名:{{workWrderSelectData.deviceName}}</view>
<view class="alarmInfo-content-row">工单时间:{{workWrderSelectData.createTime}}</view>
<view class="alarmInfo-content-row">工单内容:{{workWrderSelectData.maintenanceContext}}</view>
<view class="alarmInfo-content-row">工单反馈:{{workWrderSelectData.feedbackInformation}}</view>
<view class="alarmInfo-content-row">工单建议:{{workWrderSelectData.advice}}</view>
<view class="alarmInfo-content-row" v-if="workWrderSelectData.maintenanceStatus==4||workWrderSelectData.maintenanceStatus==5">审核意见:{{checkOpinion}}</view>
<view class="alarmInfo-content-title flex-center" v-if="workWrderSelectData.maintenanceStatus!=3&&workWrderSelectData.maintenanceStatus!=5">反馈</view>
<u-input v-model="feedbackInformation" cursor-spacing="60" :fixed="true" type="textarea" v-if="workWrderSelectData.maintenanceStatus!=3&&workWrderSelectData.maintenanceStatus!=5" border="true" height="100" auto-height="true" placeholder="请输入反馈"/>
<view class="alarmInfo-content-title flex-center" v-if="workWrderSelectData.maintenanceStatus!=3&&workWrderSelectData.maintenanceStatus!=5">建议</view>
<u-input v-model="advice" cursor-spacing="60" :fixed="true" v-if="workWrderSelectData.maintenanceStatus!=3&&workWrderSelectData.maintenanceStatus!=5" type="textarea" border="true" height="100" auto-height="true" placeholder="请输入建议"/>
<view class="alarmInfo-content-bottom-btn" v-if="workWrderSelectData.maintenanceStatus!=3&&workWrderSelectData.maintenanceStatus!=5">
<u-button type="error" @click="workWrderBtn('6')">暂缓修复</u-button>
<u-button type="primary" @click="workWrderBtn('3')">已修复</u-button>
<!-- <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 {
alarmListShowFlag:false,
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'
},
workWrderList:[], //工单列表
workWrderSelectData:{}, //点击工单
// 标签类型列表
tabList: [{
name: '报警列表',
}, {
name: '我的工单'
}],
tabCurrent: 0,
// 反馈
feedbackInformation:null,
// 建议
advice:null,
// 工单弹窗状态
workWrderShow:false,
//审核意见
checkOpinion:null,
}
},
mixins:[MescrollMixin],
onLoad() {
this.beginDate = this.$u.timeFormat(new Date().getTime(), 'yyyy-mm-dd');
this.endDate = this.$u.timeFormat(new Date().getTime(), 'yyyy-mm-dd');
},
methods: {
// tab切换
changeTab(index){
console.log("当前点击tab",index)
this.tabCurrent = index;
if(index == 0){
this.lineRoadList = [];
}else{
this.workWrderList = [];
}
// 重置列表为第一页 (常用于列表筛选条件变化或切换菜单时重新刷新列表数据)
this.mescroll.resetUpScroll( false );
},
upCallback(page) {
const _this = this;
let pageNum = page.num; // 页码, 默认从1开始
let pageSize = page.size; // 页长, 默认每页10条
this.where['pageNum'] = pageNum;
this.where['pageSize'] = pageSize;
if(this.tabCurrent == 0){
this.$get('/app/alarm/table', this.where).then(res => {
if(res.code === 200){
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();
}
}
})
}else{
this.$get('/app/maintenance/my-list', {pageNum:page.num,pageSize:page.size}).then(res => {
console.log("获取我的工单列表",res);
if(res.code === 200){
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.workWrderList = []; //如果是第一页需手动置空列表
_this.workWrderList = this.workWrderList.concat(curPageData); //追加新数据
_this.mescroll.endBySize(curPageLen, totalSize); // 推荐
} else {
_this.workWrderList = [];
_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.alarmListShowFlag = true;
this.currentPickInfoData = item;
}
},
/*
maintenanceStatus 维保状态
-1=告警生成维保,0=上报人创建维保,
1=驳回上报人维保,2=处理人确认维保,
3=处理人完成维保,4=驳回处理人维保,
5=领导审批通过流程结束,6=暂缓处理
*/
openworkWrderFn(item){
console.log(item,"item");
this.workWrderSelectData = item;
this.feedbackInformation = null;
this.advice = null;
if(item.maintenanceStatus==0){
console.log("当前工单为未确认")
this.workWrderShow = true;
}else if(item.maintenanceStatus==1){
this.workWrderShow = true;
console.log("当前工单为驳回")
}else if(item.maintenanceStatus==2){
this.alarmShowFlag = true;
console.log("当前工单为未处理")
}else if(item.maintenanceStatus==6){
this.alarmShowFlag = true;
console.log("当前工单为暂缓")
}else if(item.maintenanceStatus==3){
this.alarmShowFlag = true;
console.log("当前工单为已处理")
}else if(item.maintenanceStatus==4){
this.getCheckDetail()
console.log("当前工单为审核驳回")
}else if(item.maintenanceStatus==5){
this.getCheckDetail()
console.log("当前工单为审核通过")
}
},
// 获取审核详情
getCheckDetail(){
this.$get('/app/maintenance/'+this.workWrderSelectData.maintenanceId, {}).then(res => {
console.log("获取审核详情",res)
if(res.code === 200){
this.checkOpinion = res.data.maintenanceNodeList[res.data.maintenanceNodeList.length-1].auditOpinion;
console.log("审核意见",this.checkOpinion);
this.alarmShowFlag = true;
}else{
this.$u.toast("获取审核详情失败")
}
})
},
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')
},
// 工单处理
workWrderBtn(status){
if(status==6&&this.feedbackInformation==null){
this.$u.toast("请输入反馈");
return;
}
let params={
"maintenanceId": this.workWrderSelectData.maintenanceId,
"maintenanceStatus": status,
"feedbackInformation": this.feedbackInformation,
"advice": this.advice,
"scenePictures": ""
}
this.$put('/app/maintenance', params).then(res => {
console.log("工单处理",res)
if(res.code === 200){
// 关闭弹窗
this.workWrderShow = false;
this.alarmShowFlag = false;
this.mescroll.resetUpScroll( false );
this.$u.toast(res.msg)
}else{
this.$u.toast(res.msg)
}
})
},
projectHandleNowFn(status) {
if(status){
this.$post('/app/alarm/batch-update', {recordIds: [this.currentPickInfoData.recordId]}).then(res => {
if(res.code == 200) {
this.$tui.toast('处理成功', 3000, true);
this.updateState(this.currentPickInfoData.recordId);
this.alarmListShowFlag = false;
}
})
}else{
if(!this.receipt){
this.$tui.toast("请输入回执");
}else{
console.log("工单处理数据",this.currentPickInfoData,this.receipt)
}
}
},
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>
<style lang="scss" scoped>
.realTime{
width: 100%;
:not(not) {
box-sizing: border-box;
}
&-header{
display: flex;
justify-content: center;
align-items: center;
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{
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: 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;
}
.pr128{
padding-right: 128rpx;
}
.deal-with-btn{
position: absolute;
top: 20rpx;
right: 20rpx;
z-index: 1;
// width: 128rpx;
}
.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;
flex: 1;
}
}
&-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-title{
color: white;
height: 90rpx;
background-color: #2979ff;
font-size: 36rpx;
font-weight: bold;
}
.alarmListInfo-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;
}
}
.alarmInfo-content{
padding: 20rpx $paddingLR;
padding-bottom: 40rpx;
&-row{
padding-bottom: 10rpx;
// overflow: hidden;
// text-overflow: ellipsis;
// white-space: nowrap;
}
&-bottom-btn{
display: flex;
justify-content: space-around;
// padding: 0 30rpx;
padding-top: 20rpx;
}
&-title{
font-size: 28rpx;
font-weight: bold;
height: 40rpx;
margin-bottom: 10rpx;
}
}
}
// 改变下拉菜单的内容
::v-deep .u-dropdown__content {
width: 100vw !important; // 将下拉菜单的内容宽度等效于屏宽
left: -40rpx !important; // 调整cell,使得文字显示偏左
}
</style>