|
|
@@ -1,519 +1,434 @@
|
|
|
<template>
|
|
|
- <view>
|
|
|
- <view class="status_bar"></view>
|
|
|
- <view class="" style="position: relative; top: 44px">
|
|
|
- <view
|
|
|
- style="
|
|
|
- position: fixed;
|
|
|
- z-index: 10000000;
|
|
|
- width: 100%;
|
|
|
- background-color: #000000;
|
|
|
- "
|
|
|
- >
|
|
|
- <uni-nav-bar
|
|
|
- @clickLeft="clickLeft"
|
|
|
- left-icon="back"
|
|
|
- left-text="返回"
|
|
|
- title="历史数据"
|
|
|
- ></uni-nav-bar>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class="his_box">
|
|
|
- <view class="selecttimes" @click="tiemshow = !tiemshow">
|
|
|
- <view class="timesbox">
|
|
|
- <image
|
|
|
- :src="$imageURL+'/bigdata_app/image/prevention/1acfe2751c01d3786cdc49b83d7e505.png'"
|
|
|
- mode=""
|
|
|
- ></image>
|
|
|
- <p>{{ timetab(begintime) }}</p>
|
|
|
- <p class="or">~</p>
|
|
|
- <p>{{ timetab(end) }}</p>
|
|
|
- <u-icon name="rili" custom-prefix="custom-icon" class="icon"></u-icon>
|
|
|
- </view>
|
|
|
- <u-calendar
|
|
|
- v-model="tiemshow"
|
|
|
- mode="range"
|
|
|
- @change="tiemchange"
|
|
|
- range-color="#999"
|
|
|
- btn-type="success"
|
|
|
- active-bg-color="#0BBC58"
|
|
|
- range-bg-color="rgba(11,188,88,0.13)"
|
|
|
- ></u-calendar>
|
|
|
- </view>
|
|
|
- <view class="shuju_one">
|
|
|
- <view class="canvastishi" v-if="!canvastishiTF && !dataloadingtf">
|
|
|
- 暂无数据
|
|
|
- </view>
|
|
|
- <view class="canvastishi" v-if="dataloadingtf">
|
|
|
- <p class="dataloading">加载中</p>
|
|
|
- </view>
|
|
|
- <canvas
|
|
|
- v-show="!tiemshow"
|
|
|
- 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="condition">
|
|
|
- <scroll-view scroll-top="0" scroll-x="true" class="scroll-X">
|
|
|
- <table class="table">
|
|
|
- <tr class="tr">
|
|
|
- <th class="th" v-for="(item, index) in thdata" :key="'a' + index">
|
|
|
- {{ item }}
|
|
|
- </th>
|
|
|
- </tr>
|
|
|
- <tr
|
|
|
- class="tr"
|
|
|
- v-for="(items, indexs) in historylistdata"
|
|
|
- :key="'b' + indexs"
|
|
|
- v-if="!forbidden"
|
|
|
- >
|
|
|
- <td class="td">{{ items.uptime | timeFormat() }}</td>
|
|
|
- <!-- <td class="td">{{ items.ats }}</td>
|
|
|
- <td class="td">{{ items.at }}</td> -->
|
|
|
- <td
|
|
|
- class="td"
|
|
|
- v-for="(item, index) in items.temp"
|
|
|
- :key="'c' + index"
|
|
|
- >
|
|
|
- {{ item }}
|
|
|
- </td>
|
|
|
- <td
|
|
|
- class="td"
|
|
|
- v-for="(item, index) in items.swc"
|
|
|
- :key="'d' + index"
|
|
|
- >
|
|
|
- {{ item }}
|
|
|
- </td>
|
|
|
- <td
|
|
|
- class="td"
|
|
|
- v-for="(item, index) in items.ecs"
|
|
|
- :key="'e' + index"
|
|
|
- >
|
|
|
- {{ item }}
|
|
|
- </td>
|
|
|
- <!-- <td class="td">{{ items.atm }}</td> -->
|
|
|
- </tr>
|
|
|
- <tr class="tr" v-if="forbidden">
|
|
|
- <td class="td" v-for="item in 13">暂无数据</td>
|
|
|
- </tr>
|
|
|
- </table>
|
|
|
- </scroll-view>
|
|
|
- <view class="pagenumber">
|
|
|
- <button @click="prev">上一页</button>
|
|
|
- <view class="pagenumber_page"> 第 {{ page }} 页 </view>
|
|
|
- <view class="pagenumber_page"> 共 {{ pagesum }} 页 </view>
|
|
|
- <button @click="next">下一页</button>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
+ <view>
|
|
|
+ <view class="status_bar"></view>
|
|
|
+ <view class="" style="position: relative;top: 40px;">
|
|
|
+ <view style="position: fixed;z-index: 10000000;width: 100%;background-color: #000000;">
|
|
|
+ <uni-nav-bar @clickLeft="clickLeft" left-icon="back" left-text="返回" title="历史数据"></uni-nav-bar>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="" style="position: relative;top: 100px;">
|
|
|
+ <view class="selecttimes" @click="tiemshow=!tiemshow">
|
|
|
+ <view class="timesbox">
|
|
|
+ <image
|
|
|
+ :src="$imageURL+'/bigdata_app/image/prevention/1acfe2751c01d3786cdc49b83d7e505.png'"
|
|
|
+ mode=""></image>
|
|
|
+ <p>{{timetab(begintime)}}</p>
|
|
|
+ <p class="or">~</p>
|
|
|
+ <p>{{timetab(end)}}</p>
|
|
|
+ <u-icon name="rili" custom-prefix="custom-icon" class="icon"></u-icon>
|
|
|
+ </view>
|
|
|
+ <u-calendar v-model="tiemshow" mode="range" @change="tiemchange"
|
|
|
+ range-color="#999"
|
|
|
+ btn-type="success"
|
|
|
+ active-bg-color="#0BBC58"
|
|
|
+ range-bg-color="rgba(11,188,88,0.13)"></u-calendar>
|
|
|
+ </view>
|
|
|
+ <view class="shuju_one">
|
|
|
+ <view class="canvastishi" v-if="!canvastishiTF && !dataloadingtf">
|
|
|
+ 暂无数据
|
|
|
+ </view>
|
|
|
+ <view class="canvastishi" v-if="dataloadingtf">
|
|
|
+ <p class="dataloading">加载中</p>
|
|
|
+ </view>
|
|
|
+ <canvas v-show="!tiemshow" 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="condition">
|
|
|
+ <scroll-view scroll-top="0" scroll-x="true" class="scroll-X">
|
|
|
+ <table class="table" :style="{width:300*thdata.length+'rpx'}">
|
|
|
+ <tr class="tr">
|
|
|
+ <th class="th" v-for="(item,index) in thdata" :key="'a'+index">{{item}}</th>
|
|
|
+ </tr>
|
|
|
+ <tr class="tr" v-for="(items,indexs) in historylistdata" :key="'b'+indexs" v-if="!forbidden">
|
|
|
+ <td class="td">{{items.upl_time|timeFormat()}}</td>
|
|
|
+ <td class="td">{{items.ats}}</td>
|
|
|
+ <td class="td">{{items.at}}</td>
|
|
|
+ <td class="td" v-for="(item,index) in items.temp" :key="'c'+index">{{item}}</td>
|
|
|
+ <td class="td" v-for="(item,index) in items.swc" :key="'d'+index">{{item}}</td>
|
|
|
+ <td class="td">{{items.atm}}</td>
|
|
|
+ </tr>
|
|
|
+ <tr class="tr" v-if="forbidden">
|
|
|
+ <td class="td" v-for="item in 13">暂无数据</td>
|
|
|
+ </tr>
|
|
|
+ </table>
|
|
|
+ </scroll-view>
|
|
|
+ <view class="pagenumber">
|
|
|
+ <button @click="prev">上一页</button>
|
|
|
+ <view class="pagenumber_page">
|
|
|
+ 第 {{page}} 页
|
|
|
+ </view>
|
|
|
+ <view class="pagenumber_page">
|
|
|
+ 共 {{pagesum}} 页
|
|
|
+ </view>
|
|
|
+ <button @click="next">下一页</button>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
-import uCharts from '../../components/js_sdk/u-charts/u-charts/u-charts.js';
|
|
|
-var canvaColumnA = null;
|
|
|
-export default {
|
|
|
- data() {
|
|
|
- return {
|
|
|
- tiemshow: false, //时间筛选弹框
|
|
|
- begintime: '', //开始时间
|
|
|
- end: '', //结束时间
|
|
|
- dataloadingtf: true,
|
|
|
- canvastishiTF: false,
|
|
|
- device_id: '', //设备ID
|
|
|
- thdata: [
|
|
|
- '上传时间',
|
|
|
- // "空气湿度(%RH)",
|
|
|
- // "空气温度(℃)",
|
|
|
- '10cm土壤温度(%RH)',
|
|
|
- '20cm土壤温度(%RH)',
|
|
|
- '30cm土壤温度(%RH)',
|
|
|
- '10cm土壤湿度(%RH)',
|
|
|
- '20cm土壤湿度(%RH)',
|
|
|
- '30cm土壤湿度(%RH)',
|
|
|
- // "大气压强(Pa)",
|
|
|
- ], //表格抬头
|
|
|
- forbidden: false,
|
|
|
- historylistdata: [], //历史数据
|
|
|
- pagesum: 1,
|
|
|
- page: 1,
|
|
|
- cWidth: '',
|
|
|
- cHeight: '',
|
|
|
- pixelRatio: 1,
|
|
|
- };
|
|
|
- },
|
|
|
- methods: {
|
|
|
- tiemchange(e) {
|
|
|
- //切换时间
|
|
|
- this.begintime = parseInt(+new Date(e.startDate) / 1000);
|
|
|
- this.end = parseInt(+new Date(e.endDate) / 1000);
|
|
|
- this.histprydatas();
|
|
|
- },
|
|
|
- timetab(e) {
|
|
|
- //时间转换
|
|
|
- e = new Date(e * 1000);
|
|
|
- var year = e.getFullYear();
|
|
|
- var month =
|
|
|
- e.getMonth() + 1 < 10 ? '0' + (e.getMonth() + 1) : e.getMonth() + 1;
|
|
|
- var day = e.getDate() < 10 ? '0' + e.getDate() : e.getDate();
|
|
|
- var time = year + '/' + month + '/' + day;
|
|
|
- return time;
|
|
|
- },
|
|
|
- async histprydatas() {
|
|
|
- //历史数据
|
|
|
- this.dataloadingtf = true;
|
|
|
- const res = await this.$myRequest({
|
|
|
- url: '/api/api_gateway?method=weather.weather.nd_data',
|
|
|
- data: {
|
|
|
- device_id: this.device_id,
|
|
|
- page: this.page,
|
|
|
- begin: this.begintime,
|
|
|
- end: this.end,
|
|
|
- },
|
|
|
- });
|
|
|
- this.dataloadingtf = false;
|
|
|
- console.log(res.nums);
|
|
|
- this.pagesum = Math.ceil(res.nums / 10) || 1;
|
|
|
- this.historylistdata = res.dat_list;
|
|
|
- for (var i = 0; i < this.historylistdata.length; i++) {
|
|
|
- this.historylistdata[i].temp = this.historylistdata[i].temp.split(',');
|
|
|
- this.historylistdata[i].swc = this.historylistdata[i].swc.split(',');
|
|
|
- this.historylistdata[i].ecs = this.historylistdata[i].ecs.split(',');
|
|
|
- }
|
|
|
- var arr1 = [];
|
|
|
- var arr2 = [];
|
|
|
- var xtitle = [];
|
|
|
- var obj = [
|
|
|
- {
|
|
|
- name: '空气温度',
|
|
|
- data: [],
|
|
|
- color: '#00E29D',
|
|
|
- },
|
|
|
- {
|
|
|
- name: '空气湿度',
|
|
|
- data: [],
|
|
|
- color: '#6CBBFF',
|
|
|
- },
|
|
|
- ];
|
|
|
- var arr3 = [];
|
|
|
- var k = 0;
|
|
|
- for (var i = 0; i < res.dat_char.length; i++) {
|
|
|
- var times = new Date(res.dat_char[i].uptime * 1000);
|
|
|
- xtitle.unshift(
|
|
|
- times.getMonth() +
|
|
|
- 1 +
|
|
|
- '/' +
|
|
|
- times.getDate() +
|
|
|
- '-' +
|
|
|
- times.getHours() +
|
|
|
- ':' +
|
|
|
- times.getMinutes()
|
|
|
- );
|
|
|
- arr1.unshift(res.dat_char[i].at == '' ? '0' : res.dat_char[i].at); //空气温度
|
|
|
- arr2.unshift(res.dat_char[i].ats == '' ? '0' : res.dat_char[i].ats); //空气湿度
|
|
|
- res.dat_char[i].temp = res.dat_char[i].temp.split(',');
|
|
|
- res.dat_char[i].swc = res.dat_char[i].swc.split(',');
|
|
|
- res.dat_char[i].ecs = res.dat_char[i].ecs.split(',');
|
|
|
- for (var j = 0; j < res.dat_char[i].temp.length; j++) {
|
|
|
- arr3.unshift(
|
|
|
- res.dat_char[i].temp[j] == '' ? '0' : res.dat_char[i].temp[j]
|
|
|
- ); //10cm土壤温度
|
|
|
- }
|
|
|
- this.thdata.length = 1;
|
|
|
- res.depth.split(',').forEach((dep, index) => {
|
|
|
- this.thdata.push(`${dep}cm土壤温度(℃)`);
|
|
|
- res.dat_char[i].temp.forEach((items, indexs) => {
|
|
|
- var tempdata = [];
|
|
|
- var tempdatas = [];
|
|
|
- var ecsarr = [];
|
|
|
- tempdata.push(Number(items));
|
|
|
- tempdatas.push(Number(res.dat_char[i].swc[indexs]));
|
|
|
- if (res.dat_char[i].ecs[indexs]) {
|
|
|
- ecsarr.push(Number(res.dat_char[i].ecs[indexs]));
|
|
|
- }
|
|
|
- var temparrs = {
|
|
|
- name: dep + 'cm土壤温度(℃)',
|
|
|
- data: tempdata,
|
|
|
- };
|
|
|
- var temparr = {
|
|
|
- name: dep + 'cm土壤湿度(%RH)',
|
|
|
- data: tempdatas,
|
|
|
- };
|
|
|
- var ecsparr = {
|
|
|
- name: dep + 'cm电导率(ms/cm)',
|
|
|
- data: ecsarr,
|
|
|
- };
|
|
|
- obj.push(temparr);
|
|
|
- obj.push(temparrs);
|
|
|
- if (ecsarr.length > 0) {
|
|
|
- obj.push(ecsparr);
|
|
|
- }
|
|
|
- });
|
|
|
- });
|
|
|
- res.depth.split(',').forEach((dep, index) => {
|
|
|
- this.thdata.push(`${dep}cm土壤湿度(%RH)`);
|
|
|
- });
|
|
|
- res.depth.split(',').forEach((dep, index) => {
|
|
|
- this.thdata.push(`${dep}cm电导率(ms/cm)`);
|
|
|
- });
|
|
|
- }
|
|
|
- obj[0].data = arr1;
|
|
|
- obj[1].data = arr2;
|
|
|
- var listArr = [];
|
|
|
- obj.forEach(function (el, index) {
|
|
|
- for (var i = 0; i < listArr.length; i++) {
|
|
|
- // 对比相同的字段key，相同放入对应的数组中
|
|
|
- if (listArr[i].name == el.name && el.data !== undefined) {
|
|
|
- listArr[i].data.unshift(el.data[0]);
|
|
|
- return;
|
|
|
- }
|
|
|
- }
|
|
|
- // 第一次对比没有参照，放入参照
|
|
|
- listArr.push({
|
|
|
- name: el.name,
|
|
|
- data: el.data,
|
|
|
- });
|
|
|
- });
|
|
|
- console.log(listArr);
|
|
|
- if (listArr.length == 0) {
|
|
|
- this.canvastishiTF = false;
|
|
|
- } else {
|
|
|
- this.canvastishiTF = true;
|
|
|
- }
|
|
|
- this.showColumn('canvasColumnA', xtitle, listArr);
|
|
|
- // console.log(this.historylistdata)
|
|
|
- },
|
|
|
- prev() {
|
|
|
- //上一页
|
|
|
- if (this.page > 1) {
|
|
|
- this.page--;
|
|
|
- this.histprydatas();
|
|
|
- }
|
|
|
- },
|
|
|
- next() {
|
|
|
- //下一页
|
|
|
- if (this.page < this.pagesum) {
|
|
|
- this.page++;
|
|
|
- this.histprydatas();
|
|
|
- }
|
|
|
- },
|
|
|
- clickLeft() {
|
|
|
- uni.navigateBack({
|
|
|
- delta: 1,
|
|
|
- });
|
|
|
- },
|
|
|
- showColumn(id, xtitle, xinfo) {
|
|
|
- var _self = this;
|
|
|
- const ctx = uni.createCanvasContext(id, this);
|
|
|
- canvaColumnA = new uCharts({
|
|
|
- context: ctx,
|
|
|
- type: 'line',
|
|
|
- legend: {
|
|
|
- position: 'top',
|
|
|
- },
|
|
|
- fontSize: 11,
|
|
|
- background: '#FFFFFF',
|
|
|
- pixelRatio: 1,
|
|
|
- animation: true,
|
|
|
- dataLabel: false,
|
|
|
- categories: xtitle,
|
|
|
- series: xinfo,
|
|
|
- enableScroll: true, //开启图表拖拽功能
|
|
|
- xAxis: {
|
|
|
- disableGrid: true,
|
|
|
- type: 'grid',
|
|
|
- gridType: 'dash',
|
|
|
- itemCount: 4, //x轴单屏显示数据的数量，默认为5个
|
|
|
- scrollShow: true, //新增是否显示滚动条，默认false
|
|
|
- // scrollAlign: 'left', //滚动条初始位置
|
|
|
- scrollBackgroundColor: '#F7F7FF', //默认为 #EFEBEF
|
|
|
- scrollColor: '#DEE7F7', //默认为 #A6A6A6
|
|
|
- },
|
|
|
- yAxis: {},
|
|
|
- width: _self.cWidth * 1,
|
|
|
- height: _self.cHeight * 1,
|
|
|
- extra: {
|
|
|
- line: {
|
|
|
- type: 'curve',
|
|
|
- },
|
|
|
- },
|
|
|
- });
|
|
|
- },
|
|
|
- touchLineA(e) {
|
|
|
- console.log(e);
|
|
|
- canvaColumnA.scrollStart(e);
|
|
|
- },
|
|
|
- moveLineA(e) {
|
|
|
- canvaColumnA.scroll(e);
|
|
|
- },
|
|
|
- touchEndLineA(e) {
|
|
|
- canvaColumnA.scrollEnd(e);
|
|
|
- //下面是toolTip事件，如果滚动后不需要显示，可不填写
|
|
|
- canvaColumnA.showToolTip(e, {
|
|
|
- format: function (item, category) {
|
|
|
- return category + ' ' + item.name + ':' + item.data;
|
|
|
- },
|
|
|
- });
|
|
|
- },
|
|
|
- },
|
|
|
- onLoad(option) {
|
|
|
- this.cWidth = uni.upx2px(650);
|
|
|
- this.cHeight = uni.upx2px(500);
|
|
|
- this.device_id = option.id;
|
|
|
- this.end = parseInt(+new Date() / 1000);
|
|
|
- this.begintime = parseInt(this.end - 24 * 60 * 60);
|
|
|
- this.histprydatas();
|
|
|
- },
|
|
|
-};
|
|
|
+ import uCharts from '../../components/js_sdk/u-charts/u-charts/u-charts.js';
|
|
|
+ var canvaColumnA = null;
|
|
|
+ export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ tiemshow: false, //时间筛选弹框
|
|
|
+ begintime: "", //开始时间
|
|
|
+ end: "", //结束时间
|
|
|
+ dataloadingtf: true,
|
|
|
+ canvastishiTF: false,
|
|
|
+ device_id: '', //设备ID
|
|
|
+ thdata: ["上传时间", "空气湿度(%RH)", "空气温度(℃)", "10cm土壤温度(%RH)", "20cm土壤温度(%RH)", "30cm土壤温度(%RH)", "10cm土壤湿度(%RH)", "20cm土壤湿度(%RH)", "30cm土壤湿度(%RH)",
|
|
|
+ "大气压强(Pa)"
|
|
|
+ ], //表格抬头
|
|
|
+ forbidden: false,
|
|
|
+ historylistdata: [], //历史数据
|
|
|
+ pagesum: 1,
|
|
|
+ page: 1,
|
|
|
+ cWidth: '',
|
|
|
+ cHeight: '',
|
|
|
+ pixelRatio: 1,
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ tiemchange(e) { //切换时间
|
|
|
+ this.begintime = parseInt(+new Date(e.startDate) / 1000)
|
|
|
+ this.end = parseInt(+new Date(e.endDate) / 1000)
|
|
|
+ this.histprydatas()
|
|
|
+ },
|
|
|
+ timetab(e) { //时间转换
|
|
|
+ e = new Date(e * 1000)
|
|
|
+ var year = e.getFullYear()
|
|
|
+ var month = e.getMonth() + 1 < 10 ? "0" + (e.getMonth() + 1) : e.getMonth() + 1
|
|
|
+ var day = e.getDate() < 10 ? "0" + e.getDate() : e.getDate()
|
|
|
+ var time = year + "/" + month + "/" + day
|
|
|
+ return time
|
|
|
+ },
|
|
|
+ async histprydatas() { //历史数据
|
|
|
+ this.dataloadingtf = true
|
|
|
+ const res = await this.$myRequest({
|
|
|
+ url: '/api/api_gateway?method=weather.weather.nd_data',
|
|
|
+ data: {
|
|
|
+ device_id: this.device_id,
|
|
|
+ page: this.page,
|
|
|
+ begin: this.begintime,
|
|
|
+ end: this.end
|
|
|
+ }
|
|
|
+ })
|
|
|
+ this.dataloadingtf = false
|
|
|
+ console.log(res.nums)
|
|
|
+ this.pagesum = Math.ceil(res.nums / 10) || 1
|
|
|
+ this.historylistdata = res.dat_list
|
|
|
+ for (var i = 0; i < this.historylistdata.length; i++) {
|
|
|
+ this.historylistdata[i].temp = this.historylistdata[i].temp.split(",")
|
|
|
+ this.historylistdata[i].swc = this.historylistdata[i].swc.split(",")
|
|
|
+ this.historylistdata[i].ecs = this.historylistdata[i].ecs.split(",");
|
|
|
+ }
|
|
|
+ var arr1 = []
|
|
|
+ var arr2 = []
|
|
|
+ var xtitle = []
|
|
|
+ var obj = [{
|
|
|
+ name: '空气温度',
|
|
|
+ data: [],
|
|
|
+ color: '#00E29D'
|
|
|
+ }, {
|
|
|
+ name: '空气湿度',
|
|
|
+ data: [],
|
|
|
+ color: '#6CBBFF'
|
|
|
+ }]
|
|
|
+ var arr3 = []
|
|
|
+ var k = 0
|
|
|
+ for (var i = 0; i < res.dat_char.length; i++) {
|
|
|
+ var times = new Date(res.dat_char[i].upl_time * 1000)
|
|
|
+ xtitle.unshift(times.getMonth() + 1 + "/" + times.getDate() + "-" + times.getHours() + ":" + times
|
|
|
+ .getMinutes())
|
|
|
+ arr1.unshift(res.dat_char[i].at == "" ? "0" : res.dat_char[i].at) //空气温度
|
|
|
+ arr2.unshift(res.dat_char[i].ats == "" ? "0" : res.dat_char[i].ats) //空气湿度
|
|
|
+ res.dat_char[i].temp = res.dat_char[i].temp.split(",")
|
|
|
+ res.dat_char[i].swc = res.dat_char[i].swc.split(",")
|
|
|
+ res.dat_char[i].ecs = res.dat_char[i].ecs.split(",")
|
|
|
+ for (var j = 0; j < res.dat_char[i].temp.length; j++) {
|
|
|
+ arr3.unshift(res.dat_char[i].temp[j] == "" ? "0" : res.dat_char[i].temp[j]) //10cm土壤温度
|
|
|
+ }
|
|
|
+ this.thdata.length = 1;
|
|
|
+ res.depth.split(',').forEach((dep, index) => {
|
|
|
+ this.thdata.push(`${dep}cm土壤温度(℃)`)
|
|
|
+ res.dat_char[i].temp.forEach((items, indexs) => {
|
|
|
+ var tempdata = [];
|
|
|
+ var tempdatas = [];
|
|
|
+ var ecsarr = [];
|
|
|
+ tempdata.push(Number(items));
|
|
|
+ tempdatas.push(Number(res.dat_char[i].swc[indexs]));
|
|
|
+ if((res.dat_char[i]).ecs[indexs]) {
|
|
|
+ ecsarr.push(Number(res.dat_char[i].ecs[indexs]));
|
|
|
+ }
|
|
|
+ var temparrs = {
|
|
|
+ name: dep + "cm土壤温度(℃)",
|
|
|
+ data: tempdata,
|
|
|
+ };
|
|
|
+ var temparr = {
|
|
|
+ name: dep + "cm土壤湿度(%RH)",
|
|
|
+ data: tempdatas,
|
|
|
+ };
|
|
|
+ var ecsparr = {
|
|
|
+ name: dep + "cm电导率(ms/cm)",
|
|
|
+ data: ecsarr,
|
|
|
+ };
|
|
|
+ obj.push(temparr);
|
|
|
+ obj.push(temparrs);
|
|
|
+ if(ecsarr.length > 0) {
|
|
|
+ obj.push(ecsparr);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ })
|
|
|
+ res.depth.split(',').forEach((dep, index) => {
|
|
|
+ this.thdata.push(`${dep}cm土壤湿度(%RH)`)
|
|
|
+ })
|
|
|
+ res.depth.split(',').forEach((dep, index) => {
|
|
|
+ this.thdata.push(`${dep}cm电导率(ms/cm)`)
|
|
|
+ })
|
|
|
+ }
|
|
|
+ obj[0].data = arr1
|
|
|
+ obj[1].data = arr2
|
|
|
+ var listArr = [];
|
|
|
+ obj.forEach(function(el, index) {
|
|
|
+ for (var i = 0; i < listArr.length; i++) {
|
|
|
+ // 对比相同的字段key，相同放入对应的数组中
|
|
|
+ if (listArr[i].name == el.name && el.data !== undefined) {
|
|
|
+ listArr[i].data.unshift(el.data[0]);
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ // 第一次对比没有参照，放入参照
|
|
|
+ listArr.push({
|
|
|
+ name: el.name,
|
|
|
+ data: el.data,
|
|
|
+ });
|
|
|
+ });
|
|
|
+ console.log(listArr)
|
|
|
+ if(listArr.length==0){
|
|
|
+ this.canvastishiTF = false
|
|
|
+ }else{
|
|
|
+ this.canvastishiTF = true
|
|
|
+ }
|
|
|
+ this.showColumn("canvasColumnA", xtitle, listArr)
|
|
|
+ // console.log(this.historylistdata)
|
|
|
+ },
|
|
|
+ prev() { //上一页
|
|
|
+ if (this.page > 1) {
|
|
|
+ this.page--
|
|
|
+ this.histprydatas()
|
|
|
+ }
|
|
|
+ },
|
|
|
+ next() { //下一页
|
|
|
+ if (this.page < this.pagesum) {
|
|
|
+ this.page++
|
|
|
+ this.histprydatas()
|
|
|
+ }
|
|
|
+ },
|
|
|
+ clickLeft() {
|
|
|
+ uni.navigateBack({
|
|
|
+ delta: 1
|
|
|
+ })
|
|
|
+ },
|
|
|
+ showColumn(id, xtitle, xinfo) {
|
|
|
+ var _self = this
|
|
|
+ const ctx = uni.createCanvasContext(id, this);
|
|
|
+ canvaColumnA = new uCharts({
|
|
|
+ context: ctx,
|
|
|
+ type: 'line',
|
|
|
+ legend: {
|
|
|
+ position: "top"
|
|
|
+ },
|
|
|
+ fontSize: 11,
|
|
|
+ background: '#FFFFFF',
|
|
|
+ pixelRatio: 1,
|
|
|
+ animation: true,
|
|
|
+ dataLabel: false,
|
|
|
+ categories: xtitle,
|
|
|
+ series: xinfo,
|
|
|
+ enableScroll: true, //开启图表拖拽功能
|
|
|
+ xAxis: {
|
|
|
+ disableGrid: true,
|
|
|
+ type: 'grid',
|
|
|
+ gridType: 'dash',
|
|
|
+ itemCount: 4, //x轴单屏显示数据的数量，默认为5个
|
|
|
+ scrollShow: true, //新增是否显示滚动条，默认false
|
|
|
+ // scrollAlign: 'left', //滚动条初始位置
|
|
|
+ scrollBackgroundColor: '#F7F7FF', //默认为 #EFEBEF
|
|
|
+ scrollColor: '#DEE7F7', //默认为 #A6A6A6
|
|
|
+ },
|
|
|
+ yAxis: {},
|
|
|
+ width: _self.cWidth * 1,
|
|
|
+ height: _self.cHeight * 1,
|
|
|
+ extra: {
|
|
|
+ line: {
|
|
|
+ type: 'curve'
|
|
|
+ }
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ touchLineA(e) {
|
|
|
+ console.log(e)
|
|
|
+ canvaColumnA.scrollStart(e);
|
|
|
+ },
|
|
|
+ moveLineA(e) {
|
|
|
+ canvaColumnA.scroll(e);
|
|
|
+ },
|
|
|
+ touchEndLineA(e) {
|
|
|
+ canvaColumnA.scrollEnd(e);
|
|
|
+ //下面是toolTip事件，如果滚动后不需要显示，可不填写
|
|
|
+ canvaColumnA.showToolTip(e, {
|
|
|
+ format: function(item, category) {
|
|
|
+ return category + ' ' + item.name + ':' + item.data
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ },
|
|
|
+ onLoad(option) {
|
|
|
+ this.cWidth = uni.upx2px(650);
|
|
|
+ this.cHeight = uni.upx2px(500);
|
|
|
+ this.device_id = option.id
|
|
|
+ this.end = parseInt(+new Date() / 1000)
|
|
|
+ this.begintime = parseInt(this.end - 24 * 60 * 60)
|
|
|
+ this.histprydatas()
|
|
|
+ }
|
|
|
+ }
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss">
|
|
|
-.his_box {
|
|
|
- width: 100%;
|
|
|
- top: 200rpx;
|
|
|
- position: relative;
|
|
|
-}
|
|
|
+ .selecttimes {
|
|
|
+ width: 90%;
|
|
|
+ box-shadow: 0 0 10rpx #bcb9ca;
|
|
|
+ padding: 10rpx 20rpx;
|
|
|
+ box-sizing: border-box;
|
|
|
+ margin: 0 auto;
|
|
|
+ font-size: 28rpx;
|
|
|
|
|
|
-.selecttimes {
|
|
|
- width: 90%;
|
|
|
- box-shadow: 0 0 10rpx #bcb9ca;
|
|
|
- padding: 10rpx 20rpx;
|
|
|
- box-sizing: border-box;
|
|
|
- margin: 0 auto;
|
|
|
- font-size: 28rpx;
|
|
|
+ .timesbox {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-around;
|
|
|
|
|
|
- .timesbox {
|
|
|
- display: flex;
|
|
|
- justify-content: space-around;
|
|
|
+ image {
|
|
|
+ width: 30rpx;
|
|
|
+ height: 30rpx;
|
|
|
+ margin-top: 6rpx;
|
|
|
+ }
|
|
|
|
|
|
- image {
|
|
|
- width: 30rpx;
|
|
|
- height: 30rpx;
|
|
|
- margin-top: 6rpx;
|
|
|
- }
|
|
|
+ .icon {
|
|
|
+ color: #949494;
|
|
|
+ text-align: right;
|
|
|
+ margin-left: 30rpx;
|
|
|
|
|
|
- .icon {
|
|
|
- color: #949494;
|
|
|
- text-align: right;
|
|
|
- margin-left: 30rpx;
|
|
|
- }
|
|
|
- }
|
|
|
+ }
|
|
|
+ }
|
|
|
|
|
|
- ::v-deep .u-calendar__action {
|
|
|
- display: flex;
|
|
|
- justify-content: space-around;
|
|
|
+ /deep/.u-calendar__action {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-around;
|
|
|
|
|
|
- .u-calendar__action__text {
|
|
|
- line-height: 25px;
|
|
|
- }
|
|
|
- }
|
|
|
-}
|
|
|
+ .u-calendar__action__text {
|
|
|
+ line-height: 25px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
|
|
|
-.shuju_one {
|
|
|
- width: 90%;
|
|
|
- margin: 20px auto;
|
|
|
- box-shadow: 0 0 10rpx #bcb9ca;
|
|
|
- padding-top: 20rpx;
|
|
|
- height: 550rpx;
|
|
|
+ .shuju_one {
|
|
|
+ width: 90%;
|
|
|
+ left: 5%;
|
|
|
+ box-shadow: 0 0 10rpx #bcb9ca;
|
|
|
+ padding-top: 20rpx;
|
|
|
+ height: 550rpx;
|
|
|
+ margin: 20rpx auto;
|
|
|
+ .canvastishi {
|
|
|
+ font-size: 32rpx;
|
|
|
+ position: absolute;
|
|
|
+ top: 50%;
|
|
|
+ left: 50%;
|
|
|
+ margin-left: -64rpx;
|
|
|
+ margin-top: -21rpx;
|
|
|
|
|
|
- .canvastishi {
|
|
|
- font-size: 32rpx;
|
|
|
- position: absolute;
|
|
|
- top: 50%;
|
|
|
- left: 50%;
|
|
|
- margin-left: -64rpx;
|
|
|
- margin-top: -21rpx;
|
|
|
+ .dataloading:after {
|
|
|
+ overflow: hidden;
|
|
|
+ display: inline-block;
|
|
|
+ vertical-align: bottom;
|
|
|
+ animation: ellipsis 2s infinite;
|
|
|
+ content: "\2026";
|
|
|
+ }
|
|
|
|
|
|
- .dataloading:after {
|
|
|
- overflow: hidden;
|
|
|
- display: inline-block;
|
|
|
- vertical-align: bottom;
|
|
|
- animation: ellipsis 2s infinite;
|
|
|
- content: '\2026';
|
|
|
- }
|
|
|
+ @keyframes ellipsis {
|
|
|
+ from {
|
|
|
+ width: 2px;
|
|
|
+ }
|
|
|
|
|
|
- @keyframes ellipsis {
|
|
|
- from {
|
|
|
- width: 2px;
|
|
|
- }
|
|
|
+ to {
|
|
|
+ width: 15px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
|
|
|
- to {
|
|
|
- width: 15px;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-}
|
|
|
+ .condition {
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ width: 90%;
|
|
|
+ left: 5%;
|
|
|
+ box-shadow: 0 0 10rpx #bcb9ca;
|
|
|
+ margin-bottom: 30rpx;
|
|
|
+ margin: 20rpx auto;
|
|
|
+ .scroll-X {
|
|
|
+ width: 95%;
|
|
|
+ margin: 20rpx auto;
|
|
|
|
|
|
-.condition {
|
|
|
- display: flex;
|
|
|
- flex-wrap: wrap;
|
|
|
- width: 90%;
|
|
|
- box-shadow: 0 0 10rpx #bcb9ca;
|
|
|
- margin: 0 auto 30rpx;
|
|
|
+ .tr {
|
|
|
+ display: flex;
|
|
|
+ overflow: hidden;
|
|
|
|
|
|
- .scroll-X {
|
|
|
- width: 95%;
|
|
|
- margin: 20rpx auto;
|
|
|
+ .th,
|
|
|
+ .td {
|
|
|
+ display: inline-block;
|
|
|
+ padding: 5rpx;
|
|
|
+ width: 300rpx;
|
|
|
+ text-align: center;
|
|
|
+ height: 52rpx;
|
|
|
+ line-height: 52rpx;
|
|
|
+ border: 2rpx solid #F1F1F1;
|
|
|
+ }
|
|
|
+ }
|
|
|
|
|
|
- .tr {
|
|
|
- display: flex;
|
|
|
- overflow: hidden;
|
|
|
+ .tr:nth-child(2n-1) {
|
|
|
+ background-color: #f5fff8;
|
|
|
+ }
|
|
|
|
|
|
- .th,
|
|
|
- .td {
|
|
|
- display: inline-block;
|
|
|
- padding: 5rpx;
|
|
|
- width: 300rpx;
|
|
|
- text-align: center;
|
|
|
- height: 52rpx;
|
|
|
- line-height: 52rpx;
|
|
|
- border: 2rpx solid #f1f1f1;
|
|
|
- }
|
|
|
- }
|
|
|
+ .tr:first-child {
|
|
|
+ background-color: #57c878;
|
|
|
+ color: #fff;
|
|
|
+ }
|
|
|
+ }
|
|
|
|
|
|
- .tr:nth-child(2n-1) {
|
|
|
- background-color: #f5fff8;
|
|
|
- }
|
|
|
+ .pagenumber {
|
|
|
+ display: flex;
|
|
|
+ margin: 20rpx auto;
|
|
|
|
|
|
- .tr:first-child {
|
|
|
- background-color: #57c878;
|
|
|
- color: #fff;
|
|
|
- }
|
|
|
- }
|
|
|
+ button {
|
|
|
+ width: 150rpx;
|
|
|
+ height: 50rpx;
|
|
|
+ line-height: 50rpx;
|
|
|
+ font-size: 26rpx;
|
|
|
+ text-align: center;
|
|
|
+ background-color: #57c878;
|
|
|
+ color: #FFFFFF;
|
|
|
+ }
|
|
|
|
|
|
- .pagenumber {
|
|
|
- display: flex;
|
|
|
- margin: 20rpx auto;
|
|
|
-
|
|
|
- button {
|
|
|
- width: 150rpx;
|
|
|
- height: 50rpx;
|
|
|
- line-height: 50rpx;
|
|
|
- font-size: 26rpx;
|
|
|
- text-align: center;
|
|
|
- background-color: #57c878;
|
|
|
- color: #ffffff;
|
|
|
- }
|
|
|
-
|
|
|
- .pagenumber_page {
|
|
|
- width: 100rpx;
|
|
|
- height: 50rpx;
|
|
|
- line-height: 50rpx;
|
|
|
- font-size: 26rpx;
|
|
|
- text-align: center;
|
|
|
- }
|
|
|
- }
|
|
|
-}
|
|
|
+ .pagenumber_page {
|
|
|
+ width: 100rpx;
|
|
|
+ height: 50rpx;
|
|
|
+ line-height: 50rpx;
|
|
|
+ font-size: 26rpx;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
</style>
|
