<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 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: 160rpx;">
{{item.name}}
</view>
<view class="center-info" style="width: 140rpx;text-align: center;">
{{item.longdu}}
</view>
<view class="center-info" style="width: 160rpx;text-align: center;">
{{item.dianliang}}
</view>
<view class="center-info" style="width: 160rpx;">
{{item.time}}
</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 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: 160rpx;">
{{item.name}}
</view>
<view class="center-info" style="width: 160rpx;text-align: center;">
{{item.dianliang}}
</view>
<view class="center-info" style="width: 160rpx;">
{{item.time}}
</view>
</view>
</view>
</view>
<view class="check-table-content" v-if="type === '3'">
<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: 160rpx;">
{{item.name}}
</view>
<view class="center-info" style="width: 140rpx;text-align: center;">
{{item.longdu}}
</view>
<view class="center-info" style="width: 160rpx;text-align: center;">
{{item.dianliang}}
</view>
<view class="center-info" style="width: 160rpx;">
{{item.time}}
</view>
</view>
</view>
</view>
<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-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>
</view>
</template>
<script>
export default {
data() {
return {
time: "筛选时间",
startTimeShow: false, // 开始时间开关
endTimeShow: false, // 结束时间开关
lastMonth: Number(new Date()) - 25920000000, // 默认开始时间
isTimeZ: "",
isTimeQ: "",
isExportShow: false, // 控制导出弹窗
coumsGas:[
{name: '设备信息', width:'160rpx'},
{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: [
{name: '设备信息1', longdu: '122', dianliang: '88', time: '2022-10-29 12:25:00'},
{name: '设备信息2', longdu: '122', dianliang: '88', time: '2022-10-29 12:25:00'},
{name: '设备信息3', longdu: '122', dianliang: '88', time: '2022-10-29 12:25:00'},
{name: '设备信息4', longdu: '122', dianliang: '88', time: '2022-10-29 12:25:00'},
],
type: '' // 控制表格展示
}
},
onLoad(option){
this.type = option.type
},
methods: {
// 确认导出
exportQr() {
// this.exportClick();
this.isExportShow = false;
},
// 导出的取消按钮
close() {
this.isExportShow = false
} ,
//确定选择结束时间
async confirmEndTime(e) {
// this.queryList.endTime = await this.shijianc(e.value);
this.isTimeZ = await this.yueFen(e.value);
this.time = `${this.isTimeQ}${this.isTimeZ}`;
this.endTimeShow = false;
},
//确定选择开始时间
async confirmTime(e) {
// this.queryList.startTime = await this.shijianc(e.value);
this.isTimeQ = await this.yueFen(e.value);
this.startTimeShow = false;
this.endTimeShow = true;
},
//取消选择时间
closeTime() {
this.time = "筛选时间";
},
//确定导出
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 = [];
},
//格式化时间
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-top {
display: flex;
align-items: center;
justify-content: space-between;
padding: 10rpx 50rpx;
margin: 20rpx 10rpx;
background-color: #fff;
.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;
.table-content-top {
display: flex;
align-items: center;
justify-content: space-around;
}
.table-content-center {
margin-top: 20rpx;
.content-center-info {
display: flex;
align-items: center;
justify-content: space-around;
margin-bottom: 16rpx;
.center-info {
font-size: 26rpx;
}
}
}
}
.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>
