|
|
@@ -0,0 +1,492 @@
|
|
|
+<template>
|
|
|
+ <view>
|
|
|
+ <view class="timeandtype">
|
|
|
+ <view class="timebox">
|
|
|
+ <view class="firsttime" @click="timeshow=true">
|
|
|
+ <view class="" v-if="start_time!=''">
|
|
|
+ {{start_time/1000|timeFormat()}}
|
|
|
+ </view>
|
|
|
+ <view class="" v-else>
|
|
|
+ {{start_time==""?'请选择开始时间':start_time}}
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="jiange">
|
|
|
+ -
|
|
|
+ </view>
|
|
|
+ <view class="endtime" @click="timeshow=true">
|
|
|
+ <view class="" v-if="end_time!=''">
|
|
|
+ {{end_time/1000|timeFormat()}}
|
|
|
+ </view>
|
|
|
+ <view class="" v-else>
|
|
|
+ {{end_time==""?'请选择结束时间':end_time}}
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="shuju_one">
|
|
|
+ <view class="canvastishi" v-if="!canvastishiTF2">
|
|
|
+ 暂无数据
|
|
|
+ </view>
|
|
|
+ <view class="canvastishi" v-if="dataloadingtf2">
|
|
|
+ <p class="dataloading">加载中</p>
|
|
|
+ </view>
|
|
|
+ <canvas v-if="canvastishiTF2" canvas-id="canvasColumnB" id="canvasColumnB" class="charts"
|
|
|
+ @touchstart="touchLineB($event)" @touchmove="moveLineB($event)" @touchend="touchEndLineB($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[0]}}</th>
|
|
|
+ </tr>
|
|
|
+ <tr class="tr" v-for="(items,indexs) in historylistdata" :key="'b'+indexs">
|
|
|
+ <td class="td" v-for="head in thdata" :key="'head'+ head[1]" >
|
|
|
+ <view v-if="head[1] == 'addtime'">{{items.d_h_t.addtime|timeFormat()}}</view>
|
|
|
+ <view v-else>
|
|
|
+ {{items.d_h_t[head[1]]}}
|
|
|
+ </view>
|
|
|
+ </td>
|
|
|
+ </tr>
|
|
|
+ <tr class="tr" v-if="forbidden">
|
|
|
+ <td class="td" v-for="item in 7">暂无数据</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" :disabled="forbidden">下一页</button>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <u-calendar v-model="timeshow" :mode="mode" @change="timechange"></u-calendar>
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ import uCharts from '../../../components/js_sdk/u-charts/u-charts/u-charts.js';
|
|
|
+ import Circulation from "../../../static/js/equipState_dict.json"
|
|
|
+ var canvaColumnA = null;
|
|
|
+ var canvaColumnB = null
|
|
|
+ export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ start_time: "",
|
|
|
+ end_time: "",
|
|
|
+ timeshow: false,
|
|
|
+ mode: 'range',
|
|
|
+ cWidth: '400',
|
|
|
+ cHeight: '400',
|
|
|
+ pixelRatio: 1,
|
|
|
+ canvastishiTF: false,
|
|
|
+ dataloadingtf: false,
|
|
|
+ canvastishiTF2: false,
|
|
|
+ dataloadingtf2: false,
|
|
|
+ equipInfo: {},
|
|
|
+ historylistdata: [],
|
|
|
+ thdata: [
|
|
|
+ ['上报时间', 'addtime'],
|
|
|
+ ['电池功率', 'battery_p'],
|
|
|
+ ['太阳能板电流', 'solar_c'],
|
|
|
+ ['太阳能板功率', 'solar_p'],
|
|
|
+ ['电池电压', 'battery_v'],
|
|
|
+ ['太阳能板电压', 'solar_v'],
|
|
|
+ ['电池电流', 'battery_c'],
|
|
|
+ ],
|
|
|
+ page: 1,
|
|
|
+ pagesum: "10",
|
|
|
+ Circulation: Circulation,
|
|
|
+ forbidden: false
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ timechange(e) {
|
|
|
+ this.start_time = +new Date(e.startDate)
|
|
|
+ this.end_time = +new Date(e.endDate)
|
|
|
+ this.page = 1;
|
|
|
+ this.history()
|
|
|
+ this.getworm()
|
|
|
+ this.getwind()
|
|
|
+ },
|
|
|
+ async history() { //历史数据列表折线图
|
|
|
+ this.dataloadingtf = true
|
|
|
+ const res = await this.$myRequest({
|
|
|
+ url: '/api/api_gateway?method=forecast.worm_lamp.xy_three_at_ah',
|
|
|
+ data: {
|
|
|
+ device_type_id: 8,
|
|
|
+ d_id: this.equipInfo.d_id,
|
|
|
+ start_time: Math.floor(+new Date(this.start_time) / 1000),
|
|
|
+ end_time: Math.floor(+new Date(this.end_time) / 1000),
|
|
|
+ }
|
|
|
+ })
|
|
|
+ console.log(res)
|
|
|
+ this.dataloadingtf = false
|
|
|
+ this.historydatas = res
|
|
|
+ },
|
|
|
+ async getworm() {
|
|
|
+ const res = await this.$myRequest({
|
|
|
+ url: '/api/api_gateway?method=forecast.worm_lamp.xycb_pest_chart_new',
|
|
|
+ data: {
|
|
|
+ d_id: this.equipInfo.d_id,
|
|
|
+ start_time: Math.floor(+new Date(this.start_time) / 1000),
|
|
|
+ end_time: Math.floor(+new Date(this.end_time) / 1000),
|
|
|
+ device_type_id: 29,
|
|
|
+ years: new Date().getFullYear()
|
|
|
+ }
|
|
|
+ })
|
|
|
+ console.log(res)
|
|
|
+ this.dataloadingtf2 = false
|
|
|
+ var data = res.pest_data
|
|
|
+ if (data.length == 0) {
|
|
|
+ this.canvastishiTF2 = false
|
|
|
+ } else {
|
|
|
+ this.canvastishiTF2 = true
|
|
|
+ // console.log(arr1)
|
|
|
+ var obj = [{
|
|
|
+ name: '诱虫次数',
|
|
|
+ data: res.pest_data[0],
|
|
|
+ color: '#00E29D'
|
|
|
+ }]
|
|
|
+ this.showColumn2("canvasColumnB", res.md_lst, obj)
|
|
|
+ }
|
|
|
+ },
|
|
|
+ async getwind() {
|
|
|
+ const res = await this.$myRequest({
|
|
|
+ url: '/api/api_gateway?method=forecast.worm_lamp.xy_three_history_data',
|
|
|
+ data: {
|
|
|
+ d_id: this.equipInfo.d_id,
|
|
|
+ start_time: Math.floor(+new Date(this.start_time) / 1000),
|
|
|
+ end_time: Math.floor(+new Date(this.end_time) / 1000),
|
|
|
+ device_id: this.equipInfo.device_id,
|
|
|
+ page: this.page,
|
|
|
+ }
|
|
|
+ })
|
|
|
+ console.log(res.data)
|
|
|
+ this.historylistdata = res.data
|
|
|
+ this.pagesum = Math.ceil(res.counts / 10)
|
|
|
+ if (res.data.length > 0) {
|
|
|
+ this.forbidden = false
|
|
|
+ } else {
|
|
|
+ this.forbidden = true
|
|
|
+ }
|
|
|
+ },
|
|
|
+ prev() { //上一页
|
|
|
+ if (this.page > 1) {
|
|
|
+ this.page--
|
|
|
+ this.getwind()
|
|
|
+ }
|
|
|
+ },
|
|
|
+ next() { //下一页
|
|
|
+ if (this.page < this.pagesum) {
|
|
|
+ this.page++
|
|
|
+ this.getwind()
|
|
|
+ }
|
|
|
+ },
|
|
|
+ showColumn(id, xtitle, xinfo) {
|
|
|
+ var _self = this
|
|
|
+ canvaColumnA = new uCharts({
|
|
|
+ canvasId: id,
|
|
|
+ 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'
|
|
|
+ }
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ showColumn2(id, xtitle, xinfo) {
|
|
|
+ var _self = this
|
|
|
+ canvaColumnB = new uCharts({
|
|
|
+ canvasId: id,
|
|
|
+ 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
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ touchLineB(e) {
|
|
|
+ console.log(e)
|
|
|
+ canvaColumnB.scrollStart(e);
|
|
|
+ },
|
|
|
+ moveLineB(e) {
|
|
|
+ canvaColumnB.scroll(e);
|
|
|
+ },
|
|
|
+ touchEndLineB(e) {
|
|
|
+ canvaColumnB.scrollEnd(e);
|
|
|
+ //下面是toolTip事件,如果滚动后不需要显示,可不填写
|
|
|
+ canvaColumnB.showToolTip(e, {
|
|
|
+ format: function(item, category) {
|
|
|
+ return category + ' ' + item.name + ':' + item.data
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ },
|
|
|
+ onLoad(option) {
|
|
|
+ this.equipInfo = option
|
|
|
+ console.log(option)
|
|
|
+ this.end_time = +new Date()
|
|
|
+ this.start_time = +new Date() - 30 * 24 * 60 * 60 * 1000
|
|
|
+ this.cWidth = uni.upx2px(650);
|
|
|
+ this.cHeight = uni.upx2px(500);
|
|
|
+ this.history()
|
|
|
+ this.getworm()
|
|
|
+ this.getwind()
|
|
|
+ }
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="less">
|
|
|
+ .timeandtype {
|
|
|
+ // background-color: #F6F6FB;
|
|
|
+ // padding: 20rpx;
|
|
|
+ box-sizing: border-box;
|
|
|
+ width: 90%;
|
|
|
+ margin: 40rpx auto 0;
|
|
|
+
|
|
|
+ .timebox {
|
|
|
+ box-shadow: 0 0 10rpx #bcb9ca;
|
|
|
+ display: flex;
|
|
|
+ background-color: #fff;
|
|
|
+ padding: 10px;
|
|
|
+ border-top-right-radius: 5px;
|
|
|
+ border-top-left-radius: 5px;
|
|
|
+
|
|
|
+ .jiange {
|
|
|
+ width: 5%;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ .firsttime,
|
|
|
+ .endtime {
|
|
|
+ width: 45%;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .warntypebox {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ background-color: #fff;
|
|
|
+ padding: 10px;
|
|
|
+ border-top: 1px solid #F6F6FB;
|
|
|
+ border-bottom-right-radius: 5px;
|
|
|
+ border-bottom-left-radius: 5px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .shuju_one {
|
|
|
+ position: relative;
|
|
|
+ width: 90%;
|
|
|
+ margin: 30rpx auto;
|
|
|
+ box-shadow: 0 0 10rpx #bcb9ca;
|
|
|
+ padding-top: 20rpx;
|
|
|
+ height: 550rpx;
|
|
|
+
|
|
|
+ .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";
|
|
|
+ }
|
|
|
+
|
|
|
+ @keyframes ellipsis {
|
|
|
+ from {
|
|
|
+ width: 2px;
|
|
|
+ }
|
|
|
+
|
|
|
+ to {
|
|
|
+ width: 15px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .shuju_one_title {
|
|
|
+ width: 70%;
|
|
|
+ margin: 0 auto;
|
|
|
+ display: flex;
|
|
|
+
|
|
|
+ .tltle_text {
|
|
|
+ width: 25%;
|
|
|
+ border: 2rpx solid #B2B2B2;
|
|
|
+ color: #57c878;
|
|
|
+ text-align: center;
|
|
|
+ font-size: 24rpx;
|
|
|
+ height: 50rpx;
|
|
|
+ line-height: 50rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .title_text_color {
|
|
|
+ width: 25%;
|
|
|
+ border: 2rpx solid #57c878;
|
|
|
+ background-color: #57c878;
|
|
|
+ color: #fff;
|
|
|
+ text-align: center;
|
|
|
+ font-size: 24rpx;
|
|
|
+ height: 50rpx;
|
|
|
+ line-height: 50rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ /deep/.u-calendar__action {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-around;
|
|
|
+
|
|
|
+ .u-calendar__action__text {
|
|
|
+ line-height: 25px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .condition {
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ width: 90%;
|
|
|
+ margin: 30rpx auto;
|
|
|
+ box-shadow: 0 0 10rpx #bcb9ca;
|
|
|
+ margin-bottom: 30rpx;
|
|
|
+
|
|
|
+ .scroll-X {
|
|
|
+ width: 95%;
|
|
|
+ margin: 20rpx auto;
|
|
|
+
|
|
|
+ .table {
|
|
|
+ width: 1740rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .tr {
|
|
|
+ display: flex;
|
|
|
+ overflow: hidden;
|
|
|
+
|
|
|
+ .th,
|
|
|
+ .td {
|
|
|
+ display: inline-block;
|
|
|
+ padding: 5rpx;
|
|
|
+ width: 240rpx;
|
|
|
+ text-align: center;
|
|
|
+ height: 52rpx;
|
|
|
+ line-height: 52rpx;
|
|
|
+ border: 2rpx solid #F1F1F1;
|
|
|
+ }
|
|
|
+
|
|
|
+ .th:first-child,
|
|
|
+ .td:first-child {
|
|
|
+ width: 300rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .tr:nth-child(2n-1) {
|
|
|
+ background-color: #f5fff8;
|
|
|
+ }
|
|
|
+
|
|
|
+ .tr:first-child {
|
|
|
+ background-color: #57c878;
|
|
|
+ color: #fff;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .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;
|
|
|
+ margin: 0 20rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+</style>
|