|
@@ -7,6 +7,15 @@
|
|
|
</view>
|
|
</view>
|
|
|
<view class="graph">
|
|
<view class="graph">
|
|
|
<view class="canvasbox">
|
|
<view class="canvasbox">
|
|
|
|
|
+ <view class="" style="display: flex;justify-content: flex-end;">
|
|
|
|
|
+ <view class="schedule" @click="pickertfone=!pickertfone">
|
|
|
|
|
+ <p class="schedule_value">{{titletext[indexone]}}</p>
|
|
|
|
|
+ <p class="schedule_icon">
|
|
|
|
|
+ <u-icon name="arrow-down"></u-icon>
|
|
|
|
|
+ </p>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ <u-picker v-model="pickertfone" mode="selector" @confirm="confirmFun" :default-selector="[indexone]" :range="titletext"></u-picker>
|
|
|
<view class="canvastishi" v-if="!canvastishiTF">
|
|
<view class="canvastishi" v-if="!canvastishiTF">
|
|
|
暂无数据
|
|
暂无数据
|
|
|
</view>
|
|
</view>
|
|
@@ -41,17 +50,17 @@
|
|
|
</view>
|
|
</view>
|
|
|
</view>
|
|
</view>
|
|
|
</view>
|
|
</view>
|
|
|
- <view class="condition">
|
|
|
|
|
|
|
+ <view class="condition" v-if="scrollTF">
|
|
|
<scroll-view scroll-top="0" scroll-x="true" class="scroll-X">
|
|
<scroll-view scroll-top="0" scroll-x="true" class="scroll-X">
|
|
|
<!-- @scrolltoupper="upper" @scrolltolower="lower" @scroll="scroll" -->
|
|
<!-- @scrolltoupper="upper" @scrolltolower="lower" @scroll="scroll" -->
|
|
|
- <table class="table">
|
|
|
|
|
|
|
+ <table class="table" :style="{width:300+240*datalength+'rpx'}">
|
|
|
<tr class="tr">
|
|
<tr class="tr">
|
|
|
<th class="th">日期</th>
|
|
<th class="th">日期</th>
|
|
|
- <th class="th" v-for="key,index in historydatas.conf" :key="'a'+index" v-if="key">{{key.replace("#","(")+")"}}</th>
|
|
|
|
|
|
|
+ <th class="th" v-for="key,index in historydatas.conf" :key="index" v-if="key">{{key.replace("#","(")+")"}}</th>
|
|
|
</tr>
|
|
</tr>
|
|
|
- <tr class="tr" v-for="(items,index) in historydatas.data" :key="'b'+index" v-if="!forbidden">
|
|
|
|
|
|
|
+ <tr class="tr" v-for="(items,index) in historydatas.data" :key="index" v-if="!forbidden">
|
|
|
<td class="td">{{items.time|timeFormat()}}</td>
|
|
<td class="td">{{items.time|timeFormat()}}</td>
|
|
|
- <td class="td" v-for="keys in items.dat" v-if="keys">{{parseFloat(keys)==-99.99?"N/A":parseFloat(keys)}}</td>
|
|
|
|
|
|
|
+ <td class="td" v-for="item,indexss in datalength" :key="indexss">{{parseFloat(items.dat["e"+(indexss+1)])==-99.99?"N/A":parseFloat(items.dat["e"+(indexss+1)])}}</td>
|
|
|
</tr>
|
|
</tr>
|
|
|
<tr class="tr" v-if="forbidden">
|
|
<tr class="tr" v-if="forbidden">
|
|
|
<td class="td" v-for="item in 10">暂无数据</td>
|
|
<td class="td" v-for="item in 10">暂无数据</td>
|
|
@@ -88,7 +97,7 @@
|
|
|
id: "",
|
|
id: "",
|
|
|
begintime: '', //开始时间
|
|
begintime: '', //开始时间
|
|
|
end: '', //结束时间
|
|
end: '', //结束时间
|
|
|
- titletext: ["24小时", "近一个月", "近半年", "近一年"],
|
|
|
|
|
|
|
+ titletext: [],//折线图数据切换列表数据
|
|
|
titleidnex: 0,
|
|
titleidnex: 0,
|
|
|
pickshow: false, //选择时间一
|
|
pickshow: false, //选择时间一
|
|
|
picktwoshow: false, //选择时间二
|
|
picktwoshow: false, //选择时间二
|
|
@@ -104,7 +113,12 @@
|
|
|
historydatas: [],
|
|
historydatas: [],
|
|
|
page: 1,
|
|
page: 1,
|
|
|
forbidden: false,
|
|
forbidden: false,
|
|
|
- pagesum: null
|
|
|
|
|
|
|
+ pagesum: null,
|
|
|
|
|
+ datalength:0,
|
|
|
|
|
+ scrollTF:true,
|
|
|
|
|
+ indexone:0,//折线图数据切换列表下标
|
|
|
|
|
+ pickertfone:false,//折线图数据切换列表
|
|
|
|
|
+ chartdata:{}//折线图数据
|
|
|
}
|
|
}
|
|
|
},
|
|
},
|
|
|
methods: { //weather.weather.qxz_detail
|
|
methods: { //weather.weather.qxz_detail
|
|
@@ -120,6 +134,18 @@
|
|
|
})
|
|
})
|
|
|
this.historydatas = res
|
|
this.historydatas = res
|
|
|
console.log(res)
|
|
console.log(res)
|
|
|
|
|
+ this.datalength=0
|
|
|
|
|
+ for(var key in res.conf){
|
|
|
|
|
+ if(res.conf[key]!=""){
|
|
|
|
|
+ this.datalength++
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+ console.log(this.datalength)
|
|
|
|
|
+ if(this.datalength==0){
|
|
|
|
|
+ this.scrollTF = false
|
|
|
|
|
+ }else{
|
|
|
|
|
+ this.scrollTF = true
|
|
|
|
|
+ }
|
|
|
this.pagesum = Math.ceil(res.nums / 10) + 1
|
|
this.pagesum = Math.ceil(res.nums / 10) + 1
|
|
|
if (res.data.length == 0) {
|
|
if (res.data.length == 0) {
|
|
|
this.forbidden = true
|
|
this.forbidden = true
|
|
@@ -137,39 +163,51 @@
|
|
|
}
|
|
}
|
|
|
})
|
|
})
|
|
|
console.log(res)
|
|
console.log(res)
|
|
|
|
|
+ this.chartdata = res
|
|
|
if (res.data.length == 0) {
|
|
if (res.data.length == 0) {
|
|
|
this.canvastishiTF = false
|
|
this.canvastishiTF = false
|
|
|
} else {
|
|
} else {
|
|
|
this.canvastishiTF = true
|
|
this.canvastishiTF = true
|
|
|
- var xtitle = []
|
|
|
|
|
- var linearr = []
|
|
|
|
|
- for (var i = 0; i < res.data.length; i++) {
|
|
|
|
|
- var times = new Date(res.data[i].time * 1000)
|
|
|
|
|
- xtitle.unshift(times.getMonth() + 1 + "/" + times.getDate() + "-" + times.getHours() + ":" + times.getMinutes())
|
|
|
|
|
- }
|
|
|
|
|
for (var key in res.conf) {
|
|
for (var key in res.conf) {
|
|
|
- var obj = {}
|
|
|
|
|
- if (res.conf[key] != "") {
|
|
|
|
|
- obj.name = res.conf[key]
|
|
|
|
|
- }
|
|
|
|
|
- var arr = []
|
|
|
|
|
- for (var i = 0; i < res.data.length; i++) {
|
|
|
|
|
- if (parseFloat(res.data[i].dat[key]) != -99.99) {
|
|
|
|
|
- arr.push(parseFloat(res.data[i].dat[key]))
|
|
|
|
|
- }
|
|
|
|
|
- }
|
|
|
|
|
- obj.data = arr
|
|
|
|
|
- if (obj.name) {
|
|
|
|
|
- linearr.push(obj)
|
|
|
|
|
|
|
+ if(res.conf[key]!=""){
|
|
|
|
|
+ this.titletext.push(res.conf[key])
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
|
- this.canvastishiTF = linearr.some((item) => {
|
|
|
|
|
- return item.data.length != 0;
|
|
|
|
|
- })
|
|
|
|
|
- console.log(this.canvastishiTF)
|
|
|
|
|
- this.showColumn("canvasColumnA", xtitle, linearr)
|
|
|
|
|
|
|
+ this.conflist(res,"e1")
|
|
|
}
|
|
}
|
|
|
},
|
|
},
|
|
|
|
|
+ conflist(res,eindex){
|
|
|
|
|
+ var xtitle = []
|
|
|
|
|
+ var linearr = []
|
|
|
|
|
+ for (var i = 0; i < res.data.length; i++) {
|
|
|
|
|
+ var times = new Date(res.data[i].time * 1000)
|
|
|
|
|
+ xtitle.unshift(times.getMonth() + 1 + "/" + times.getDate() + "-" + times.getHours() + ":" + times.getMinutes())
|
|
|
|
|
+ }
|
|
|
|
|
+ var obj = {}
|
|
|
|
|
+ obj.name = res.conf[eindex]
|
|
|
|
|
+ var arr = []
|
|
|
|
|
+ for (var i = 0; i < res.data.length; i++) {
|
|
|
|
|
+ if (parseFloat(res.data[i].dat[eindex]) != -99.99) {
|
|
|
|
|
+ arr.push(parseFloat(res.data[0].dat[eindex]))
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+ obj.data = arr
|
|
|
|
|
+ if (obj.name) {
|
|
|
|
|
+ linearr.push(obj)
|
|
|
|
|
+ }
|
|
|
|
|
+ this.canvastishiTF = linearr.some((item) => {
|
|
|
|
|
+ return item.data.length != 0;
|
|
|
|
|
+ })
|
|
|
|
|
+ console.log(this.canvastishiTF)
|
|
|
|
|
+ this.showColumn("canvasColumnA", xtitle, linearr)
|
|
|
|
|
+ },
|
|
|
|
|
+ confirmFun(index){
|
|
|
|
|
+ console.log(index)
|
|
|
|
|
+ this.indexone = index[0]
|
|
|
|
|
+ var str = 'e'+(index[0]+1)
|
|
|
|
|
+ console.log(str)
|
|
|
|
|
+ this.conflist(this.chartdata,str)
|
|
|
|
|
+ },
|
|
|
pickone(e) { //开始时间
|
|
pickone(e) { //开始时间
|
|
|
this.begintime = +new Date(e.year, e.month - 1, e.day, e.hour, e.minute) / 1000
|
|
this.begintime = +new Date(e.year, e.month - 1, e.day, e.hour, e.minute) / 1000
|
|
|
if (this.newtime < this.oldtime) {
|
|
if (this.newtime < this.oldtime) {
|
|
@@ -289,6 +327,7 @@
|
|
|
height: 550rpx;
|
|
height: 550rpx;
|
|
|
position: relative;
|
|
position: relative;
|
|
|
box-shadow: 0 0 10rpx #bcb9ca;
|
|
box-shadow: 0 0 10rpx #bcb9ca;
|
|
|
|
|
+ padding-top: 20px;
|
|
|
.charts{
|
|
.charts{
|
|
|
}
|
|
}
|
|
|
.canvastishi {
|
|
.canvastishi {
|
|
@@ -299,6 +338,26 @@
|
|
|
margin-left: -64rpx;
|
|
margin-left: -64rpx;
|
|
|
margin-top: -21rpx;
|
|
margin-top: -21rpx;
|
|
|
}
|
|
}
|
|
|
|
|
+ .schedule {
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ width: 280rpx;
|
|
|
|
|
+ height: 50rpx;
|
|
|
|
|
+ border: 2rpx solid #F0F0F0;
|
|
|
|
|
+ margin-right: 40rpx;
|
|
|
|
|
+ .schedule_value {
|
|
|
|
|
+ width: 70%;
|
|
|
|
|
+ text-align: center;
|
|
|
|
|
+ line-height: 50rpx;
|
|
|
|
|
+ font-size: 24rpx;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .schedule_icon {
|
|
|
|
|
+ width: 30%;
|
|
|
|
|
+ background-color: #F2F2F2;
|
|
|
|
|
+ text-align: center;
|
|
|
|
|
+ line-height: 50rpx;
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.none_hint {
|
|
.none_hint {
|
|
@@ -402,12 +461,11 @@
|
|
|
width: 95%;
|
|
width: 95%;
|
|
|
margin: 20rpx auto;
|
|
margin: 20rpx auto;
|
|
|
.table{
|
|
.table{
|
|
|
- width: 1042px;
|
|
|
|
|
|
|
+ // width: 10420px;
|
|
|
}
|
|
}
|
|
|
.tr {
|
|
.tr {
|
|
|
display: flex;
|
|
display: flex;
|
|
|
overflow: hidden;
|
|
overflow: hidden;
|
|
|
-
|
|
|
|
|
.th,
|
|
.th,
|
|
|
.td {
|
|
.td {
|
|
|
display: inline-block;
|
|
display: inline-block;
|