<template>
<view class="list">
<view class="list-top">
<u-input
placeholder="关键字搜索"
prefixIcon="search"
border="none"
v-model="queryList.keywords"
@change="change"
prefixIconStyle="font-size: 52rpx;color: #000"
></u-input>
<view class="tab-th">
<text class="dressingTime" @click="startTimeShow = true">{{
time
}}</text>
<text class="dressingStatusInfo" @click="statusShow = true">{{
statusInfo
}}</text>
<view class="icon">
<text class="close-circle" ></text>
<text class="share-square" @click="isExportShow = true"></text>
</view>
</view>
</view>
<view class="list-content">
<view class="list-content-top">
<view class="list-content-info" style="width: 130rpx;">
设备信息
</view>
<view class="list-content-info" style="width: 140rpx;">
告警原因
</view>
<view class="list-content-info" style="width: 130rpx;">
告警数值
</view>
<view class="list-content-info" style="width: 150rpx;">
告警时间
</view>
<view class="list-content-info" style="width: 100rpx;">
操作
</view>
</view>
<view class="list-content-center">
<view class="list-content-center-info" v-for="(item, index) in list" :key="index">
<view class="" style="width: 130rpx;font-size: 22rpx;text-align: center;" @click="eyeLoock(!item.show ? '1' : '2')">
<text>{{item.name}}</text>
<text>({{item.numberNo}})</text>
</view>
<view class="" style="width: 140rpx;font-size: 22rpx;text-align: center;" @click="eyeLoock(!item.show ? '1' : '2')">
{{item.yy}}
</view>
<view class="" style="width: 100rpx;font-size: 22rpx;text-align: center;" @click="eyeLoock(!item.show ? '1' : '2')">
{{item.sz}}
</view>
<view class="" style="width: 150rpx;font-size: 22rpx;text-align: center;" @click="eyeLoock(!item.show ? '1' : '2')">
{{item.time}}
</view>
<view class="error-report error-report-red" v-if="!item.show" style="width: 100rpx;font-size: 22rpx;" @click="ispassShow = true">
取消告警
</view>
<view class="error-report error-report-orange" v-else style="width: 100rpx;font-size: 22rpx;" @click="eyeLoock('2')">
历史告警
</view>
</view>
</view>
</view>
<u-popup
:show="isExportShow"
mode="bottom"
:round="10"
:closeOnClickOverlay="false"
@close="close"
>
<view class="popup">
<view class="title">提示</view>
<view class="content">
确认将所有的数据导出吗？
</view>
<view class="footer">
<button class="allow refuse" @click="isExportShow = false">取消</button>
<button class="allow" @click="exportQr"> 确认</button>
</view>
</view>
</u-popup>
<u-popup
:show="ispassShow"
mode="bottom"
:round="10"
:closeOnClickOverlay="false"
@close="close"
>
<view class="popup">
<view class="title">取消告警</view>
<u-form
labelPosition="left"
labelWidth="200rpx"
:model="model1"
:rules="rules"
ref="form1"
>
<u-form-item
label="告警取消原因"
prop="userInfo.sex"
borderBottom
@click="showSex = true;"
ref="item1"
>
<u-input
v-model="model1.userInfo.sex"
disabled
placeholder="请选择告警取消原因"
border="none"
suffixIcon="arrow-right"
></u-input>
</u-form-item>
<u-form-item
label="备注"
prop="userInfo.name"
borderBottom
ref="item1"
>
<u-input
v-model="model1.userInfo.name"
border="none"
></u-input>
</u-form-item>
</u-form>
<view class="footer">
<button class="allow refuse" @click="ispassShow = false"> 取消</button>
<button class="allow" @click="possQr"> 确认</button>
</view>
</view>
</u-popup>
<u-action-sheet
:show="showSex"
:actions="actions"
title="请选择处理状态"
@close="showSex = false"
@select="sexSelect"
>
</u-action-sheet>
<u-datetime-picker
:show="startTimeShow"
mode="datetime"
title="请选择开始时间"
:formatter="formatter"
:minDate="lastMonth"
@cancel="closeTime"
@confirm="confirmTime"
>
</u-datetime-picker>
<u-datetime-picker
:show="endTimeShow"
mode="datetime"
title="请选择结束时间"
:formatter="formatter"
:minDate="Number(new Date())"
@cancel="endTimeShow = false"
@confirm="confirmEndTime"
>
</u-datetime-picker>
<u-action-sheet
:show="statusShow"
:actions="statusList"
title="请选择状态"
description="只能单选"
@close="statusShow = false"
@select="statusSelect"
>
</u-action-sheet>
<!-- 获取手机号popup组件 -->
<GetPhonePopup :popShow="popShow" @closePop="closePop"/>
<LoadingList :loading="loading" :nothingMore="nothingMore" />
</view>
</template>
<script>
import { getList } from "@/api/list.js";
import { debounce } from "@/common/utils.js";
import { getLastMonth } from "@/common/formatTime.js";
import { solveStatus } from "@/api/message.js";
import { verifyPhone } from "@/api/index.js";
import { getLogin, getUserProfile } from "@/utils/auth.js";
import GetPhonePopup from "@/components/base/getphonePopup.vue"
import BASE_URL from "@/api/base.js";
import LoadingList from '@/components/base/LoadingList.vue';
export default {
components: {
GetPhonePopup, LoadingList
},
data() {
return {
queryList: {
keywords: "",
startTime: "",
endTime: "",
status: "",
offset: this.offset,
limit: this.limit
},
model1: {
userInfo: {
name: '',
sex: '',
},
},
actions: [{
name: '已处理',
},
{
name: '无需处理',
},
],
list: [
{name:'智能燃气终端',show: true, sz: '90', yy: '浓度超限', numberNo:'312022040441', time: '2022-10-29 12:25:00'},
{name:'智能燃气终端',show: true,sz: '90', yy: '浓度超限', numberNo:'312022040441', time: '2022-10-29 12:25:00'},
{name:'智能燃气终端',show: false,sz: '90', yy: '浓度超限', numberNo:'312022040441', time: '2022-10-29 12:25:00'},
{name:'智能燃气终端',show: true,sz: '90', yy: '浓度超限', numberNo:'312022040441', time: '2022-10-29 12:25:00'},
{name:'智能燃气终端',show: false,sz: '90', yy: '浓度超限', numberNo:'312022040441', time: '2022-10-29 12:25:00'},
],
coums:[
{name:'设备信息',width: '140rpx'},
{name:'告警原因',width: '140rpx'},
{name:'告警数值',width: '140rpx'},
{name:'告警时间',width: '140rpx'},
{name:'操作',width: '140rpx'}],
rules: {
'userInfo.name': {
type: 'string',
required: true,
message: '请填写备注',
trigger: ['blur', 'change']
},
'userInfo.sex': {
type: 'string',
required: true,
message: '请选择如何处理',
trigger: ['blur', 'change']
},
},
isExportShow: false, // 导出提示框开关
ispassShow: false,
statusShow: false, // 控制处理状态开关
showSex:false, // 选择具体处理情况开关
startTimeShow: false,
lastMonth: Number(new Date()) - 25920000000,
endTimeShow: false,
TimeNextShow: false,
statusList: [
{ name: "全部", id: "1" },
{ name: "告警中", id: "2" },
{ name: "历史告警", id: "3" },
],
time: "筛选时间",
isTimeQ: "",
isTimeZ: "",
statusInfo: "筛选状态",
popShow: false, //控制授权手机号弹出框
offset: 1, //页数
limit: 10, //一页几条数据
nothingMore: false, //上拉加载-没有数据了
loading: false, //是否显示上拉加载-加载中
};
},
async onShow() {
this.offset = 1;
let pages = getCurrentPages();
const curPage = pages[pages.length - 1];
this.currentPagePath = curPage.route;
uni.setStorageSync("currentPagePath", this.currentPagePath);
//验证手机号
this.phone = uni.getStorageSync("registerPhone");
this.checkphone();
this.queryList = {
keywords: "",
startTime: "",
endTime: "",
status: "",
offset: this.offset,
limit: this.limit
};
const param = {
offset: 1,
limit: this.limit
}
},
//下拉刷新
onPullDownRefresh() {
this.offset = 1;
this.queryList = {
keywords: "",
startTime: "",
endTime: "",
status: "",
offset: this.offset,
limit: this.limit
};
this.statusInfo = "筛选状态";
this.time = "筛选时间";
this.searchList(false).then(() => {
uni.stopPullDownRefresh();
});
this.checkboxList = [];
},
//上滑加载
onReachBottom() {
this.getLoadingList();
},
methods: {
sexSelect(e) {
this.model1.userInfo.sex = e.name
this.$refs.form1.validateField('userInfo.sex')
},
//选中的数据
checkboxChange(item) {
item.value = !item.value
if (this.checkboxList.indexOf(item) == -1) {
this.checkboxList.push(item);
} else {
this.checkboxList.splice(this.checkboxList.indexOf(item), 1);
}
this.checkExport = this.checkboxList.length > 0 ? "选中的" : "所有";
},
//搜索框发生改变
async change(e) {
this.offset = 1;
if (e.trim() === "") {
const param = {
offset: this.offset,
limit: this.limit
}
const res = await getList(param);
return (this.list = res.records.map((item) => {
if (item.visitorApplyStatus == "1") {
item.status = "申请已提交";
item.color = "blue";
} else if (item.visitorApplyStatus == "2") {
item.status = "申请已通过";
item.color = "green";
} else {
item.status = "申请未通过";
item.color = "red";
}
return item;
}));
}
debounce(this.searchList(false), 10000);
},
//确定导出
async exportClick() {
const sessionId = uni.getStorageSync("sessionId");
let filePath = `${wx.env.USER_DATA_PATH}/${+new Date()}.xlsx`;
let ids = "";
ids =
this.checkboxList.length === 0
? this.list.map((item) => item.id).join()
: this.checkboxList.map((item) => item.id).join();
uni.request({
url: `https://visitor.gd.smartlog.work/visitor/exportMessage?ids=${ids}`,
responseType: "arraybuffer",
header: {
token: sessionId, //自定义请求头信息
},
success: ({ data }) => {
let fm = wx.getFileSystemManager();
fm.writeFile({
filePath,
data,
success: (res) => {
uni.openDocument({
filePath,
fileType: "xlsx",
showMenu: true,
});
},
});
},
});
this.checkboxList = [];
},
//根据条件搜索
async searchList(is) {
if(!this.loading) {
this.list = [];
}
if(!is) {
this.offset = 1
}
this.queryList.offset = this.offset;
const res = await getList(this.queryList);
if(res.records && res.records.length) {
this.nothingMore = false;
const resData = res.records.map((item) => {
if (item.visitorApplyStatus == "1") {
item.status = "申请已提交";
item.color = "blue";
} else if (item.visitorApplyStatus == "2") {
item.status = "申请已通过";
item.color = "green";
} else {
item.status = "申请未通过";
item.color = "red";
}
return item;
});
this.list = this.list.concat(resData);
} else {
this.nothingMore = true;
}
},
//选中状态
statusSelect(e) {
this.offset = 1;
this.statusInfo = e.name;
this.queryList.status = e.id;
this.searchList(false);
},
// 点击取消告警弹窗中的确认按钮
async possQr() {
},
// 确认导出
exportQr() {
this.exportClick();
this.isExportShow = false;
},
eyeLoock(messageId) {
wx.navigateTo({
url: `/pages/reportInfo/reportInfo?messageId=${messageId}`,
});
},
//取消选择时间
closeTime() {
this.offset = 1;
this.startTimeShow = false;
this.time = "筛选时间";
this.queryList = {
keywords: "",
startTime: "",
endTime: "",
status: "",
offset: this.offset,
limit: this.limit
};
},
//确定选择结束时间
async confirmEndTime(e) {
this.offset = 1;
this.queryList.endTime = await this.shijianc(e.value);
this.isTimeZ = await this.yueFen(e.value);
this.time = `${this.isTimeQ}${this.isTimeZ}`;
this.endTimeShow = false;
this.searchList(false);
},
//确定选择开始时间
async confirmTime(e) {
this.offset = 1;
this.queryList.startTime = await this.shijianc(e.value);
this.isTimeQ = await this.yueFen(e.value);
this.startTimeShow = false;
this.endTimeShow = true;
},
shijianc(time) {
let date = new Date(time);
let Y = date.getFullYear() + "-";
let M =
(date.getMonth() + 1 < 10
? "0" + (date.getMonth() + 1)
: date.getMonth() + 1) + "-";
let D =
(date.getDate() < 10 ? "0" + date.getDate() : date.getDate()) + " ";
let h =
(date.getHours() < 10 ? "0" + date.getHours() : date.getHours()) + ":";
let m =
(date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes()) +
":";
let s =
date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
return Y + M + D + h + m + s;
},
yueFen(time) {
let date = new Date(time);
let M =
(date.getMonth() + 1 < 10
? "0" + (date.getMonth() + 1)
: date.getMonth() + 1) + "-";
let D =
(date.getDate() < 10 ? "0" + date.getDate() : date.getDate()) + " ";
return M + D;
},
//格式化时间
formatter(type, value) {
if (type === "year") {
return `${value}年`;
}
if (type === "month") {
return `${value}月`;
}
if (type === "day") {
return `${value}日`;
}
return value;
},
async checkphone() {
//有电话就去验证
if (this.phone) {
const res = await verifyPhone(this.phone);
if (res === "用户未注册") {
wx.reLaunch({
url: "/pages/register/register",
});
} else {
uni.setStorageSync("registerPhone", this.phone);
getUserProfile();
}
} else {
//没有电话就弹出授权
this.popShow = true;
}
},
closePop() {
this.popShow = false;
},
//上拉加载
async getLoadingList() {
if (this.nothingMore) return;
this.offset = this.offset + 1;
this.loading = true;
await this.searchList(true);
this.loading = false;
}
},
};
</script>
<style scoped lang="scss">
.list {
box-sizing: border-box;
padding: 20rpx;
padding-bottom: 180rpx;
.popup {
.title {
font-size: 36rpx;
color: #000;
font-weight: 600;
margin-bottom: 32rpx;
text-align: center;
}
.content {
font-size: 32rpx;
color: #000;
margin-bottom: 42rpx;
text-align: center;
}
.footer {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: flex-end;
.allow {
color: rgba(197, 0, 10, 1);
height: 68rpx;
padding: 16px 19px;
line-height: 0;
border: 1rpx solid rgba(197, 0, 10, 1);
margin: 0 40rpx;
}
.refuse {
color: rgba(142, 142, 142, 1.0);
border: 1rpx solid rgba(142, 142, 142, 1.0);
background-color: transparent;
}
}
}
.list-top {
border-radius: 20rpx;
padding: 20rpx 20rpx 5rpx;
background-color: #fff;
}
.list-content {
border-radius: 20rpx;
margin-top: 20rpx;
padding: 20rpx;
background-color: #fff;
}
.tab-th {
margin-top: 16rpx;
margin-bottom: 10rpx;
display: flex;
.dressingTime {
width: 260rpx;
height: 72rpx;
background-color: #f0f0f0;
text-align: center;
line-height: 72rpx;
color: #837d7d;
border-radius: 72rpx;
}
.dressingStatusInfo {
margin-left: 30rpx;
width: 260rpx;
height: 72rpx;
background-color: #f0f0f0;
text-align: center;
line-height: 72rpx;
color: #837d7d;
border-radius: 72rpx;
}
.icon {
margin-left: 30rpx;
width: 210rpx;
display: flex;
justify-content: space-between;
align-items: center;
.close-circle {
width: 55rpx;
height: 55rpx;
background: url(@/static/listIcon/noNext.png) no-repeat;
background-size: contain;
}
.share-square {
width: 55rpx;
height: 55rpx;
background: url(@/static/listIcon/export.png) no-repeat;
background-size: contain;
}
}
}
}
/deep/.u-input__content {
background-color: #f0f0f0;
border-radius: 10rpx;
height: 80rpx;
}
.list-content-top {
height: 80rpx;
display: flex;
align-items: center;
justify-content: space-between;
.list-content-info {
font-weight: 500;
}
}
.list-content-center-info {
display: flex;
align-items: center;
justify-content: space-between;
height: 80rpx;
margin-bottom: 20rpx;
}
.error-report {
width: 150rpx;
height: 50rpx;
color: #fff;
line-height: 50rpx;
text-align: center;
border-radius: 20rpx;
}
.error-report-red {
background-color: red;
}
.error-report-orange {
background-color: orange;
}
</style>
<style lang="scss">
.list {
.u-popup__content {
padding: 30rpx 40rpx;
// padding-bottom: 0;
}
}
</style>
