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>
|