<template>
<view class="check-table">
<view class="check-table-top">
<view class="dressingTime" @click="startTimeShow = true">{{
time
}}</view>
<text class="share-square" @click="isExportShow = true"></text>
</view>
<view class="check-table-content" v-if="type === '1'">
<view class="table-content-top">
<view class="list-content-info" v-for="(item, index) in coumsManhole" :key="index" :style="{width: item.width}">
{{item.name}}
</view>
</view>
<view class="table-content-center">
<view class="content-center-info" v-for="(item, index) in list" :key="index">
<view class="center-info" style="width: 180rpx;">
{{item.deviceTypeName}}
</view>
<view class="center-info" style="width: 160rpx;text-align: center;">
{{item.descn}}
</view>
<view class="center-info" style="width: 160rpx;">
{{item.logtime}}
</view>
</view>
</view>
</view>
<view class="check-table-content" v-if="type === '2'">
<view class="table-content-top">
<view class="list-content-info" v-for="(item, index) in coumsLevel" :key="index" :style="{width: item.width}">
{{item.name}}
</view>
</view>
<view class="table-content-center">
<view class="content-center-info" v-for="(item, index) in list" :key="index">
<view class="center-info" style="width: 140rpx;">
{{item.deviceTypeName}}
</view>
<view class="center-info" style="width: 140rpx;text-align: center;">
{{item.descn ? item.descn : '--'}}
</view>
<view class="center-info" style="width: 160rpx;text-align: center;">
{{item.cell}}
</view>
<view class="center-info" style="width: 160rpx;">
{{item.logtime}}
</view>
</view>
</view>
</view>
<view class="check-table-content" v-if="type === '10'">
<view class="table-content-top">
<view class="list-content-info" v-for="(item, index) in coumsGas" :key="index" :style="{width: item.width}">
{{item.name}}
</view>
</view>
<view class="table-content-center">
<view class="content-center-info" v-for="(item, index) in list" :key="index">
<view class="center-info" style="width: 220rpx;">
{{item.deviceTypeName}}
</view>
<view class="center-info" style="width: 140rpx;text-align: center;">
{{item.strength}}
</view>
<!-- <view class="center-info" style="width: 160rpx;text-align: center;">
{{item.cell}}
</view> -->
<view class="center-info" style="width: 160rpx;">
{{item.logtime}}
</view>
</view>
</view>
</view>
<u-datetime-picker
:show="startTimeShow"
mode="datetime"
title="请选择开始时间"
v-model="beginTime"
:formatter="formatter"
@cancel="closeTime"
@confirm="confirmTime"
>
</u-datetime-picker>
<u-datetime-picker
:show="endTimeShow"
mode="datetime"
title="请选择结束时间"
v-model="endTime"
:formatter="formatter"
@cancel="endTimeShow = false"
@confirm="confirmEndTime"
>
</u-datetime-picker>
<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>
<!-- 分页加载 -->
<LoadingList :loading="loading" :nothingMore="nothingMore" />
<!-- 返回顶部 -->
<u-back-top
:scroll-top="scrollTop"
icon="arrow-up"
duration="200"
></u-back-top>
</view>
</template>
<script>
import { getWelldata, getLiquiddata, getGasdata } from '@/api/check.js'
import LoadingList from '@/components/base/LoadingList.vue';
export default {
components: {
LoadingList
},
data() {
return {
time: "筛选时间",
startTimeShow: false, // 开始时间开关
endTimeShow: false, // 结束时间开关
lastMonth: '', // 默认开始时间
isTimeZ: "",
isTimeQ: "",
beginTime: Number(new Date()),
endTime: Number(new Date()),
isExportShow: false, // 控制导出弹窗
queryList:{ // 查询条件
keywords:'',
deptid: '',
beginTime: '',
endTime: '',
offset: 1,
limit: 20,
sort:'',
order:'logtime'
},
coumsGas:[
{name: '设备信息', width:'220rpx'},
{name: '燃气浓度(%LEL)', width:'140rpx'},
// {name: '电量(%)', width:'160rpx'},
{name: '上传时间', width:'160rpx'},
],
coumsManhole:[
{name: '设备信息', width:'160rpx'},
{name: '状态描述', width:'140rpx'},
{name: '上传时间', width:'160rpx'},
],
coumsLevel:[
{name: '设备信息', width:'160rpx'},
{name: '液位值(m)', width:'140rpx'},
{name: '电量(%)', width:'160rpx'},
{name: '上传时间', width:'160rpx'},
],
list: [],
type: '' ,// 控制表格展示
nothingMore: false, //上拉加载-没有数据了
loading: false, //是否显示上拉加载-加载中
scrollTop: 0,
}
},
async onLoad(option){
this.type = option.type
this.getList()
console.log('type', this.type)
},
// 监听滚动条位置
onPageScroll(e) {
this.scrollTop = e.scrollTop;
},
//上滑加载
onReachBottom() {
this.getLoadingList();
},
methods: {
//取消选择时间
closeTime() {
this.queryList = { // 查询条件
keywords:'',
deptid: '',
beginTime: '',
endTime: '',
offset: 1,
limit: 20,
sort:'',
order:'logtime'
}
this.startTimeShow = false; // 开始时间开关
this.endTimeShow = false; // 结束时间开关
this.time = "筛选时间";
this.getList(false)
},
//上拉加载
async getLoadingList() {
if (this.nothingMore) return;
this.queryList.offset = this.queryList.offset + 1;
this.loading = true;
await this.getList(true);
this.loading = false;
},
async getList() { // 获取到数据
let res = []
if (this.type === '1') {
res = await getWelldata(this.queryList)
} else if (this.type === '2'){
res = await getLiquiddata(this.queryList)
} else {
res = await getGasdata(this.queryList)
console.log('0000000', res)
}
if (res.rows && res.rows) {
if (this.queryList.offset === 1) {
this.list = res.rows
} else {
this.list = this.list.concat(res.rows);
}
} else {
this.nothingMore = true;
}
},
// 确认导出
exportQr() {
this.exportClick();
this.isExportShow = false;
},
// 导出的取消按钮
close() {
this.isExportShow = false
} ,
//确定选择结束时间
async confirmEndTime(e) {
this.queryList.offset = 1;
this.queryList.endTime = await this.shijianc(e.value);
this.isTimeZ = await this.yueFen(e.value);
this.time = `${this.isTimeQ}${this.isTimeZ}`;
this.getList()
this.endTimeShow = false;
},
//确定选择开始时间
async confirmTime(e) {
this.queryList.beginTime = await this.shijianc(e.value);
this.isTimeQ = await this.yueFen(e.value);
this.startTimeShow = false;
this.endTimeShow = true;
},
//确定导出
async exportClick() {
const sessionId = uni.getStorageSync("token");
let filePath = `${wx.env.USER_DATA_PATH}/${+new Date()}.xlsx`;
let url = ''
if(this.type === '1') {
url = 'welldata'
}else if(this.type === '2') {
url = 'liquiddata'
}else {
url = 'gasdata'
}
uni.request({
url: `https://smartwell.gd.smartlog.work/${url}/export`,
params:this.queryList,
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 = [];
},
//格式化时间
formatter(type, value) {
if (type === "year") {
return `${value}年`;
}
if (type === "month") {
return `${value}月`;
}
if (type === "day") {
return `${value}日`;
}
return value;
},
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;
},
}
}
</script>
<style scoped lang="scss">
.check-table {
box-sizing: border-box;
padding: 20rpx;
padding-bottom: 100rpx;
}
.list-content-info {
text-align: center;
}
.check-table-top {
display: flex;
align-items: center;
justify-content: space-between;
padding: 10rpx 50rpx;
// margin: 20rpx 10rpx;
background-color: #fff;
border-radius: 8px;
.dressingTime {
width: 260rpx;
height: 70rpx;
background-color: #f0f0f0;
text-align: center;
line-height: 70rpx;
color: #837d7d;
border-radius: 72rpx;
}
.share-square {
width: 55rpx;
height: 55rpx;
background: url(@/static/listIcon/export.png) no-repeat;
background-size: contain;
}
}
.check-table-content {
// margin: 10rpx;
padding: 10rpx;
background-color: #fff;
border-radius: 8px;
margin-top: 20rpx;
.table-content-top {
display: flex;
align-items: center;
justify-content: space-around;
font-weight: 600;
}
.table-content-center {
margin-top: 20rpx;
.content-center-info {
display: flex;
align-items: center;
justify-content: space-around;
// margin-bottom: 16rpx;
padding: 8rpx;
text-align: center;
.center-info {
font-size: 24rpx;
}
&:nth-child(2n) {
background-color: #f2f6ff;
}
}
}
}
.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;
}
}
}
</style>
<style lang="scss">
.u-popup__content {
padding: 30rpx 40rpx;
}
</style>
