452 lines
11 KiB
Vue
452 lines
11 KiB
Vue
<template>
|
||
<view class="fullHeight">
|
||
<headers :showBack="true" class="fixedHeaderBox">
|
||
<view class="headerName">
|
||
数据台账
|
||
</view>
|
||
</headers>
|
||
<view class="menuBox" :style="{ 'top': (statusBarHeight+52) * 1.5 + 'rpx' }">
|
||
<view class="menuItem" @click="changeMenu(0)" :class="tabIndex==0?'active':''">
|
||
历史数据台账
|
||
</view>
|
||
<view class="menuItem" @click="changeMenu(1)" :class="tabIndex==1?'active':''">
|
||
环境统计分析
|
||
</view>
|
||
</view>
|
||
<view class="" v-if="tabIndex==0">
|
||
<view class="searchBox" :style="{ 'padding-top': (statusBarHeight+52+44) + 'px' }">
|
||
<view class="input" @click="showFilterDialog">
|
||
{{searchForm.startTime}} ~ {{searchForm.endTime}}
|
||
</view>
|
||
</view>
|
||
<view class="listBox" :style="{ 'padding-top': (statusBarHeight+52+40+44) + 'px' }">
|
||
<view class="listItem" v-for="(item,index) in list" :key="index" @click="goAdd(item.id)">
|
||
<view class="title">
|
||
{{item.receiveTime}}
|
||
</view>
|
||
<view class="bottom">
|
||
温度：{{item.temperature}}°C
|
||
</view>
|
||
<view class="bottom">
|
||
湿度：{{item.humidity}}%RH
|
||
</view>
|
||
<view class="bottom">
|
||
设备名称：{{item.laboratoryName}}
|
||
</view>
|
||
</view>
|
||
<view class="placeholderBox" v-show="list.length==0">
|
||
<image src="/static/noData.png" class="noDataImg"></image>
|
||
<view class="text">
|
||
暂无数据
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="loadMoreBox" v-if="isLoadMore&&list.length>0">
|
||
<uni-load-more :status="loadStatus" iconType="auto"></uni-load-more>
|
||
</view>
|
||
</view>
|
||
<view class="" v-if="tabIndex==1">
|
||
<view class="searchBox" :style="{ 'padding-top': (statusBarHeight+52+44) + 'px' }">
|
||
<view class="input" @click="showFilterDialog">
|
||
{{analysisStartDate}} ~ {{analysisEndDate}}
|
||
</view>
|
||
</view>
|
||
<view :style="{ 'padding-top': (statusBarHeight+52+44+40) + 'px' }">
|
||
<view class="chartTitle">
|
||
<!-- 温度 (°C) -->
|
||
环境分析报告
|
||
</view>
|
||
</view>
|
||
<u-charts canvas-id="lineChart1" chartType="line" :opts="lineChartData1" ref="lineChart1"
|
||
:legends="false" />
|
||
<view class="chartTitle">
|
||
报警趋势
|
||
</view>
|
||
<u-charts canvas-id="lineChart2" chartType="line" :opts="lineChartData2" ref="lineChart2"
|
||
:legends="false" />
|
||
</view>
|
||
<dialogs ref="dialogs">
|
||
<!-- <template v-slot:title>
|
||
{{isAdd?'添加':'编辑'}}
|
||
</template> -->
|
||
<template v-slot:content>
|
||
<view class="formBox2" :class="tabIndex==1?'analysisForm':''">
|
||
<form @submit="initData">
|
||
<view class="uni-form-item">
|
||
<view class="uni-form-label">
|
||
<text class="star">*</text>开始时间
|
||
</view>
|
||
<view class="uni-form-input">
|
||
<picker class="datePickerBox" mode="date" :value="startDate" @change="bindDateChange">
|
||
<view class="dateInput">{{startDate?startDate:'请选择日期'}}</view>
|
||
</picker>
|
||
<picker class="timePickerBox" mode="time" :value="startTime" @change="bindTimeChange" v-show="tabIndex==0">
|
||
<view class="timeInput">{{startTime?startTime:'请选择时间'}}</view>
|
||
</picker>
|
||
</view>
|
||
</view>
|
||
<view class="uni-form-item">
|
||
<view class="uni-form-label">
|
||
<text class="star">*</text>结束时间
|
||
</view>
|
||
<view class="uni-form-input">
|
||
<picker class="datePickerBox" mode="date" :value="endDate" @change="bindDateChange2">
|
||
<view class="dateInput">{{endDate?endDate:'请选择日期'}}</view>
|
||
</picker>
|
||
<picker class="timePickerBox" mode="time" :value="endTime" @change="bindTimeChange2" v-show="tabIndex==0">
|
||
<view class="timeInput">{{endTime?endTime:'请选择时间'}}</view>
|
||
</picker>
|
||
</view>
|
||
</view>
|
||
<button form-type="submit" type="primary" class="btn submitBtn">搜索</button>
|
||
<view class="closeBtn" @click="closeDialogFn">
|
||
关闭
|
||
</view>
|
||
</form>
|
||
</view>
|
||
</template>
|
||
|
||
</dialogs>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import dialogs from "@/components/dialog/dialog.vue"
|
||
import headers from "@/components/headers/headers.vue"
|
||
import uniLoadMore from "@/components/uni-load-more/uni-load-more.vue"
|
||
import {GetDateStr,timestampToTime} from "@/static/js/util.js"
|
||
import uCharts from '@/components/u-charts/component.vue';
|
||
export default {
|
||
components:{dialogs,headers,uniLoadMore,uCharts},
|
||
data() {
|
||
return {
|
||
searchForm:{
|
||
startTime: "",
|
||
endTime:"",
|
||
devSn: "",
|
||
pageNo: 1,
|
||
pageSize: 10,
|
||
projectSn: ""
|
||
},
|
||
projectDetail:{},
|
||
list:[],
|
||
statusBarHeight:0,
|
||
loadStatus:'more',
|
||
isLoadMore:false,
|
||
startTime: "00:00:00",
|
||
endTime:"23:59:59",
|
||
startDate: "",
|
||
endDate:"",
|
||
tabIndex:0,
|
||
lineChartData1:{
|
||
categories: [],
|
||
series: [{
|
||
name: "温度",
|
||
data: []
|
||
},{
|
||
name: "湿度",
|
||
data: []
|
||
}]
|
||
},
|
||
lineChartData2:{
|
||
categories: [],
|
||
series: [{
|
||
name: "报警次数",
|
||
data: []
|
||
}]
|
||
},
|
||
analysisStartDate:'',
|
||
analysisEndDate:'',
|
||
};
|
||
},
|
||
onLoad(options) {
|
||
this.startDate=GetDateStr(0,'-')
|
||
this.endDate=GetDateStr(0,'-')
|
||
this.searchForm.devSn=options.devSn
|
||
const start = new Date();
|
||
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
|
||
this.analysisStartDate=timestampToTime(start.getTime(), "date")
|
||
this.analysisEndDate=this.endDate
|
||
this.statusBarHeight=uni.getStorageSync('systemInfo').statusBarHeight
|
||
this.projectDetail=JSON.parse(uni.getStorageSync('projectDetail'))
|
||
this.searchForm.projectSn=this.projectDetail.projectSn
|
||
this.loadData()
|
||
},
|
||
|
||
onReachBottom() {
|
||
if(this.tabIndex==0){
|
||
if(!this.isLoadMore){ //此处判断，上锁，防止重复请求
|
||
this.isLoadMore=true
|
||
this.searchForm.pageNo+=1
|
||
this.loadData()
|
||
}
|
||
}
|
||
|
||
},
|
||
onPullDownRefresh() {
|
||
if(this.tabIndex==0){
|
||
this.searchForm.pageNo=1
|
||
this.list=[]
|
||
this.loadData()
|
||
}
|
||
|
||
},
|
||
methods:{
|
||
initData(){
|
||
if(this.tabIndex==0){
|
||
this.list=[]
|
||
this.loadData()
|
||
}else{
|
||
this.getAnalysisReportData()
|
||
this.getAlarmData()
|
||
}
|
||
},
|
||
changeMenu(index){
|
||
this.tabIndex=index;
|
||
this.initData()
|
||
},
|
||
bindDateChange: function(e) {
|
||
if(this.tabIndex==0){
|
||
this.startDate = e.target.value
|
||
}else{
|
||
this.analysisStartDate = e.target.value
|
||
}
|
||
|
||
},
|
||
bindTimeChange: function(e) {
|
||
this.startTime = e.target.value+':00'
|
||
},
|
||
bindDateChange2: function(e) {
|
||
if(this.tabIndex==0){
|
||
this.endDate = e.target.value
|
||
}else{
|
||
this.analysisEndDate = e.target.value
|
||
}
|
||
},
|
||
bindTimeChange2: function(e) {
|
||
this.endTime = e.target.value+':59'
|
||
},
|
||
showFilterDialog(){
|
||
if(this.tabIndex==0){
|
||
this.startDate=this.searchForm.startTime.split(' ')[0];
|
||
this.endDate=this.searchForm.endTime.split(' ')[0];
|
||
}else{
|
||
this.startDate=this.analysisStartDate;
|
||
this.endDate=this.analysisEndDate
|
||
}
|
||
this.$refs.dialogs.showFn()
|
||
},
|
||
closeDialogFn(){
|
||
this.$refs.dialogs.hideFn()
|
||
},
|
||
loadData(){
|
||
var that = this
|
||
this.searchForm.startTime=this.startDate+' '+this.startTime
|
||
this.searchForm.endTime=this.endDate+' '+this.endTime
|
||
this.sendRequest({
|
||
url: 'xmgl/standardCurrentData/list',
|
||
data: this.searchForm,
|
||
method: "POST",
|
||
success(res){
|
||
that.list=that.list.concat(res.result.records)
|
||
if(res.result.records.length<that.searchForm.pageSize){ //判断接口返回数据量小于请求数据量，则表示此为最后一页
|
||
that.isLoadMore=true
|
||
that.loadStatus='nomore'
|
||
}else{
|
||
that.isLoadMore=false
|
||
// that.loadStatus='more'
|
||
}
|
||
that.closeDialogFn()
|
||
uni.stopPullDownRefresh()
|
||
console.log('that.isLoadMore',that.isLoadMore)
|
||
}
|
||
})
|
||
},
|
||
getAnalysisReportData(){
|
||
var that = this
|
||
var json = {
|
||
devSn:this.searchForm.devSn,
|
||
endTime:this.analysisEndDate,
|
||
projectSn:this.projectDetail.projectSn,
|
||
startTime:this.analysisStartDate,
|
||
type:3
|
||
}
|
||
this.sendRequest({
|
||
url: 'xmgl/standardCurrentData/selectStandardAnalysisReport',
|
||
data: json,
|
||
method: "POST",
|
||
success(res){
|
||
var DATA = res.result
|
||
var xdata = [],
|
||
ydata1 = [],
|
||
ydata2 = [];
|
||
DATA.forEach(element => {
|
||
xdata.push(element.dayTitle.substring(5))
|
||
ydata1.push(element.avgTemperature)
|
||
ydata2.push(element.avgHumidity)
|
||
})
|
||
that.lineChartData1.categories = xdata
|
||
// that.lineChartData2.categories = xdata
|
||
|
||
that.lineChartData1.series = [{
|
||
name: "温度",
|
||
data: ydata1
|
||
},{
|
||
name: "湿度",
|
||
data: ydata2
|
||
}]
|
||
// that.lineChartData2.series = [{
|
||
// name: "湿度",
|
||
// data: ydata2
|
||
// }]
|
||
|
||
that.$refs.lineChart1.changeData('lineChart1', that.lineChartData1)
|
||
// that.$refs.lineChart2.changeData('lineChart2', that.lineChartData2)
|
||
|
||
that.closeDialogFn()
|
||
}
|
||
})
|
||
},
|
||
getAlarmData(){
|
||
var that = this
|
||
var json = {
|
||
devSn:this.searchForm.devSn,
|
||
endTime:this.analysisEndDate,
|
||
projectSn:this.projectDetail.projectSn,
|
||
startTime:this.analysisStartDate
|
||
}
|
||
this.sendRequest({
|
||
url: 'xmgl/standardAlarm/selectDevAlarmList',
|
||
data: json,
|
||
method: "POST",
|
||
success(res){
|
||
var DATA = res.result
|
||
var xdata = [],
|
||
ydata1 = [],
|
||
ydata2 = [];
|
||
DATA.forEach(element => {
|
||
xdata.push(element.titleTime.substring(5))
|
||
// ydata1.push(element.avgTemperature)
|
||
ydata2.push(element.num)
|
||
})
|
||
that.lineChartData2.categories = xdata
|
||
|
||
that.lineChartData2.series = [{
|
||
name: "报警次数",
|
||
data: ydata2
|
||
}]
|
||
|
||
that.$refs.lineChart2.changeData('lineChart2', that.lineChartData2)
|
||
|
||
that.closeDialogFn()
|
||
}
|
||
})
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.menuBox {
|
||
display: flex;
|
||
align-items: center;
|
||
height: 36px;
|
||
font-size: 30rpx;
|
||
background-color: white;
|
||
margin-top: -1px;
|
||
position: relative;
|
||
z-index: 99;
|
||
position: fixed;
|
||
left: 0;
|
||
width: 100%;
|
||
border-bottom: 1px solid rgba(194, 194, 194, 0.2);
|
||
|
||
.menuItem {
|
||
flex: 1;
|
||
text-align: center;
|
||
|
||
&.active {
|
||
color: rgba(43, 141, 243, 1);
|
||
}
|
||
}
|
||
}
|
||
.searchBox{
|
||
// background-color: #2b8df3;
|
||
padding: 0 30rpx 10rpx;
|
||
position: fixed;
|
||
left: 0;
|
||
width: calc(100% - 60rpx);
|
||
top: 0;
|
||
z-index: 1;
|
||
.input{
|
||
border-radius: 36rpx;
|
||
height: 70rpx;
|
||
text-align: center;
|
||
background-color: #f5f5f5;
|
||
line-height: 70rpx;
|
||
font-size: 28rpx;
|
||
}
|
||
}
|
||
|
||
.listBox{
|
||
margin: 30rpx;
|
||
}
|
||
.listItem{
|
||
box-shadow: 0px 4px 26rpx 0px rgba(212, 220, 236, 0.53);
|
||
position: relative;
|
||
margin-bottom: 10rpx;
|
||
padding: 30rpx;
|
||
border-radius: 16rpx;
|
||
.title{
|
||
font-size: 30rpx;
|
||
font-weight: bold;
|
||
margin-bottom: 20rpx;
|
||
}
|
||
.bottom{
|
||
// color: rgba(55, 45, 102, 0.5);
|
||
font-size: 28rpx;
|
||
}
|
||
.time{
|
||
margin-right: 24rpx;
|
||
}
|
||
}
|
||
.timePickerBox,.datePickerBox{
|
||
display: inline-block;
|
||
margin-top: 20rpx;
|
||
}
|
||
.dateInput,.timeInput{
|
||
background-color: #F5F5F5;
|
||
border-radius: 30rpx;
|
||
height: 60rpx;
|
||
line-height: 60rpx;
|
||
text-align: center;
|
||
width: 100%;
|
||
font-size: 28rpx;
|
||
}
|
||
.analysisForm{
|
||
.datePickerBox{
|
||
width: 100%;
|
||
margin-right: 0;
|
||
}
|
||
}
|
||
.datePickerBox{
|
||
width: 55%;
|
||
margin-right: 5%;
|
||
}
|
||
.timePickerBox{
|
||
width: 40%;
|
||
}
|
||
.closeBtn{
|
||
font-size: 30rpx;
|
||
color: rgba(42, 43, 91, 0.5);
|
||
padding: 20rpx 0;
|
||
text-align: center;
|
||
}
|
||
.chartTitle {
|
||
font-size: 28rpx;
|
||
font-weight: 500;
|
||
margin: 20rpx 0 30rpx;
|
||
padding-left: 30rpx;
|
||
}
|
||
</style>
|