|
|
@@ -7,7 +7,8 @@
|
|
|
</view>
|
|
|
<view class="statistics">
|
|
|
<view class="top_text">
|
|
|
- <view :class="topindex==index?'title_text_color':'tltle_text'" v-for="(item,index) in toptext" :key="index" @click="changeindex(index)">
|
|
|
+ <view :class="topindex==index?'title_text_color':'tltle_text'" v-for="(item,index) in toptext"
|
|
|
+ :key="index" @click="changeindex(index)">
|
|
|
{{item}}
|
|
|
</view>
|
|
|
</view>
|
|
|
@@ -21,28 +22,48 @@
|
|
|
<u-icon name="arrow-down"></u-icon>
|
|
|
</p>
|
|
|
</view>
|
|
|
- <u-picker v-model="pickertfone" mode="selector" @confirm="confirmFun" :default-selector="[indexone]" :range="titletext"></u-picker>
|
|
|
+ <u-picker v-model="pickertfone" mode="selector" @confirm="confirmFun"
|
|
|
+ :default-selector="[indexone]" :range="titletext"></u-picker>
|
|
|
<view class="schedule" @click="pickertftwo=!pickertftwo" v-if="tishitf">
|
|
|
<p class="schedule_value">{{wormdata[indextwo]}}</p>
|
|
|
<p class="schedule_icon">
|
|
|
<u-icon name="arrow-down"></u-icon>
|
|
|
</p>
|
|
|
- <u-picker v-model="pickertftwo" mode="selector" @confirm="confirmFun2" :default-selector="[indextwo]" :range="wormdata"></u-picker>
|
|
|
+ <u-picker v-model="pickertftwo" mode="selector" @confirm="confirmFun2"
|
|
|
+ :default-selector="[indextwo]" :range="wormdata"></u-picker>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
<view class="canvastishi" v-if="!canvastishiTF">
|
|
|
暂无数据
|
|
|
</view>
|
|
|
- <canvas v-if="canvastishiTF" canvas-id="canvasColumnA" id="canvasColumnA" class="charts" @touchstart="touchLineA($event)"
|
|
|
- @touchmove="moveLineA($event)" @touchend="touchEndLineA($event)" disable-scroll=true :style="{'width':cWidth*pixelRatio+'px','height':cHeight*pixelRatio+'px', 'transform': 'scale('+(1/pixelRatio)+')','margin-left':-cWidth*(pixelRatio-1)/2+'px','margin-top':-cHeight*(pixelRatio-1)/2+'px'}"></canvas>
|
|
|
+ <canvas v-if="canvastishiTF" canvas-id="canvasColumnA" id="canvasColumnA" class="charts"
|
|
|
+ @touchstart="touchLineA($event)" @touchmove="moveLineA($event)"
|
|
|
+ @touchend="touchEndLineA($event)" disable-scroll=true
|
|
|
+ :style="{'width':cWidth*pixelRatio+'px','height':cHeight*pixelRatio+'px', 'transform': 'scale('+(1/pixelRatio)+')','margin-left':-cWidth*(pixelRatio-1)/2+'px','margin-top':-cHeight*(pixelRatio-1)/2+'px'}"></canvas>
|
|
|
</view>
|
|
|
<view class="shuju_two">
|
|
|
<p class="shuju_one_title">害虫比例</p>
|
|
|
<view class="canvastishi" v-if="!canvastishiTF">
|
|
|
暂无数据
|
|
|
- </view>
|
|
|
- <canvas v-if="canvastishiTF" canvas-id="canvasRing" id="canvasRing" class="charts" @touchstart="touchRing" :style="{'width':cWidth*pixelRatio+'px','height':cHeight*pixelRatio+'px', 'transform': 'scale('+(1/pixelRatio)+')','margin-left':-cWidth*(pixelRatio-1)/2+'px','margin-top':-cHeight*(pixelRatio-1)/2+'px'}"></canvas>
|
|
|
+ </view>
|
|
|
+ <canvas v-if="canvastishiTF" canvas-id="canvasRing" id="canvasRing" class="charts"
|
|
|
+ @touchstart="touchRing"
|
|
|
+ :style="{'width':cWidth*pixelRatio+'px','height':cHeight*pixelRatio+'px', 'transform': 'scale('+(1/pixelRatio)+')','margin-left':-cWidth*(pixelRatio-1)/2+'px','margin-top':-cHeight*(pixelRatio-1)/2+'px'}"></canvas>
|
|
|
+ </view>
|
|
|
+ <view class="shuju_table" v-if="tableval.length">
|
|
|
+ <table class="table">
|
|
|
+ <tr class="tr">
|
|
|
+ <th class="th">害虫名称</th>
|
|
|
+ <th class="th">害虫数量</th>
|
|
|
+ <th class="th">害虫比例</th>
|
|
|
+ </tr>
|
|
|
+ <tr class="tr" v-for="(item,index) in tableval" :key="index">
|
|
|
+ <td class="td">{{item.name}}</td>
|
|
|
+ <td class="td">{{item.data}}</td>
|
|
|
+ <td class="td">{{(item.prop*100).toFixed(2)+"%"}}</td>
|
|
|
+ </tr>
|
|
|
+ </table>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
@@ -145,7 +166,8 @@
|
|
|
tishitf: false,
|
|
|
tishi: false,
|
|
|
toptext: ["自动统计", "手动统计"],
|
|
|
- topindex: 0
|
|
|
+ topindex: 0,
|
|
|
+ tableval: []
|
|
|
}
|
|
|
},
|
|
|
methods: {
|
|
|
@@ -178,18 +200,47 @@
|
|
|
var ringarr = []
|
|
|
for (var i = 0; i < res.date.length; i++) {
|
|
|
var times = new Date(res.date[i].addtime * 1000)
|
|
|
- xtitle.unshift(times.getMonth() + 1 + "/" + times.getDate() + "-" + times.getHours() + ":" + times.getSeconds())
|
|
|
+ xtitle.unshift(times.getMonth() + 1 + "/" + times.getDate() + "-" + times.getHours() + ":" +
|
|
|
+ times.getSeconds())
|
|
|
arr1.unshift(res.date[i].temperature == "" ? "0" : res.date[i].temperature)
|
|
|
arr2.unshift(res.date[i].humidity == "" ? "0" : res.date[i].humidity)
|
|
|
arr3.unshift(res.date[i]._sums == "" ? "0" : res.date[i]._sums)
|
|
|
}
|
|
|
- for(var i = 0; i < res.percentage.length; i++){
|
|
|
+ var maxnumarr = []
|
|
|
+ for (var i = 0; i < res.percentage.length; i++) {
|
|
|
var obj = {}
|
|
|
obj.name = res.percentage[i].name_num
|
|
|
obj.data = Number(res.percentage[i].num)
|
|
|
- ringarr.unshift(obj)
|
|
|
+ maxnumarr.unshift(obj)
|
|
|
}
|
|
|
console.log(ringarr)
|
|
|
+ var temp;
|
|
|
+ for (var i = 0; i < maxnumarr.length - 1; i++) {
|
|
|
+ for (var j = 0; j < maxnumarr.length - 1; j++) {
|
|
|
+ if (maxnumarr[j].data < maxnumarr[j + 1].data) {
|
|
|
+ temp = maxnumarr[j];
|
|
|
+ maxnumarr[j] = maxnumarr[j + 1];
|
|
|
+ maxnumarr[j + 1] = temp;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ if (maxnumarr.length < 20) {
|
|
|
+ ringarr = maxnumarr
|
|
|
+ } else {
|
|
|
+ ringarr = maxnumarr.splice(0, 20)
|
|
|
+ this.tableval = maxnumarr.splice(20)
|
|
|
+ }
|
|
|
+ var tablevalsum = 0
|
|
|
+ for (var i = 0; i < maxnumarr.length; i++) {
|
|
|
+ tablevalsum += maxnumarr[i].data
|
|
|
+ }
|
|
|
+ for (var i = 0; i < this.tableval.length; i++) {
|
|
|
+ this.tableval[i].prop = this.tableval[i].data / tablevalsum
|
|
|
+ }
|
|
|
+ console.log(this.tableval)
|
|
|
+ console.log(maxnumarr)
|
|
|
+
|
|
|
var obj = [{
|
|
|
name: '温度',
|
|
|
data: arr1,
|
|
|
@@ -231,7 +282,8 @@
|
|
|
var xtitle = []
|
|
|
for (var i = 0; i < res.date.length; i++) {
|
|
|
var times = new Date(res.date[i].addtime * 1000)
|
|
|
- xtitle.unshift(times.getMonth() + 1 + "/" + times.getDate() + "-" + times.getHours() + ":" + times.getSeconds())
|
|
|
+ xtitle.unshift(times.getMonth() + 1 + "/" + times.getDate() + "-" + times.getHours() + ":" +
|
|
|
+ times.getSeconds())
|
|
|
arr1.unshift(res.date[i].temperature == "" ? "0" : res.date[i].temperature)
|
|
|
arr2.unshift(res.date[i].humidity == "" ? "0" : res.date[i].humidity)
|
|
|
arr3.unshift(res.date[i]._sums == "" ? "0" : res.date[i]._sums)
|
|
|
@@ -278,9 +330,10 @@
|
|
|
var ringarr = []
|
|
|
for (var i = 0; i < res.date.length; i++) {
|
|
|
var times = new Date(res.date[i].add_time * 1000)
|
|
|
- xtitle.unshift(times.getMonth() + 1 + "/" + times.getDate() + "-" + times.getHours() + ":" + times.getSeconds())
|
|
|
+ xtitle.unshift(times.getMonth() + 1 + "/" + times.getDate() + "-" + times.getHours() + ":" +
|
|
|
+ times.getSeconds())
|
|
|
arr1.unshift(res.date[i].pest_num == "" ? "0" : res.date[i].pest_num)
|
|
|
- var obj ={}
|
|
|
+ var obj = {}
|
|
|
obj.name = res.date[i].pest_name
|
|
|
obj.data = Number(res.date[i].pest_num)
|
|
|
ringarr.unshift(obj)
|
|
|
@@ -316,7 +369,8 @@
|
|
|
var xtitle = []
|
|
|
for (var i = 0; i < res.pests.pest_list.length; i++) {
|
|
|
var times = new Date(res.pests.pest_list[i].add_time * 1000)
|
|
|
- xtitle.unshift(times.getMonth() + 1 + "/" + times.getDate() + "-" + times.getHours() + ":" + times.getSeconds())
|
|
|
+ xtitle.unshift(times.getMonth() + 1 + "/" + times.getDate() + "-" + times.getHours() + ":" +
|
|
|
+ times.getSeconds())
|
|
|
arr1.unshift(res.pests.pest_list[i].pest_num == "" ? "0" : res.pests.pest_list[i].pest_num)
|
|
|
}
|
|
|
var obj = [{
|
|
|
@@ -413,6 +467,7 @@
|
|
|
}
|
|
|
},
|
|
|
changeindex(index) {
|
|
|
+ this.tableval = []
|
|
|
this.topindex = index
|
|
|
if (this.topindex == 0) {
|
|
|
this.pest_name = ''
|
|
|
@@ -519,7 +574,7 @@
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss">
|
|
|
- .shuju_one{
|
|
|
+ .shuju_one {
|
|
|
position: absolute;
|
|
|
top: 84px;
|
|
|
width: 90%;
|
|
|
@@ -538,7 +593,8 @@
|
|
|
margin-top: -21rpx;
|
|
|
}
|
|
|
}
|
|
|
- .shuju_two{
|
|
|
+
|
|
|
+ .shuju_two {
|
|
|
position: absolute;
|
|
|
top: 840rpx;
|
|
|
width: 90%;
|
|
|
@@ -548,6 +604,7 @@
|
|
|
box-sizing: border-box;
|
|
|
height: 650rpx;
|
|
|
margin-bottom: 40rpx;
|
|
|
+
|
|
|
.canvastishi {
|
|
|
font-size: 32rpx;
|
|
|
position: absolute;
|
|
|
@@ -556,7 +613,35 @@
|
|
|
margin-left: -64rpx;
|
|
|
margin-top: -21rpx;
|
|
|
}
|
|
|
- }
|
|
|
+ }
|
|
|
+
|
|
|
+ .shuju_table {
|
|
|
+ position: absolute;
|
|
|
+ top: 1510rpx;
|
|
|
+ width: 90%;
|
|
|
+ left: 5%;
|
|
|
+ box-shadow: 0 0 10rpx #bcb9ca;
|
|
|
+ padding-top: 20rpx;
|
|
|
+ box-sizing: border-box;
|
|
|
+ margin-bottom: 40rpx;
|
|
|
+
|
|
|
+ .table {
|
|
|
+ tr {
|
|
|
+ display: flex;
|
|
|
+ }
|
|
|
+
|
|
|
+ .th,
|
|
|
+ .td {
|
|
|
+ padding: 5rpx;
|
|
|
+ width: 240rpx;
|
|
|
+ text-align: center;
|
|
|
+ height: 52rpx;
|
|
|
+ line-height: 52rpx;
|
|
|
+ font-size: 28rpx !important;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
.condition {
|
|
|
position: absolute;
|
|
|
top: 600rpx;
|