LightingSystemApp-serial/.svn/pristine/65/6512942919a4f1005df5cec83b85c71473ad92cc.svn-base

<template>
  <view class="page">
    <u-navbar back-text="能效分析">

    </u-navbar>
    
    <view>
      <view class="card">
        <view class="title">近30天用电量情况(KW/h)</view>
        <canvas
		  v-if="day.length > 0"
          canvas-id="dayCharts"
          class="charts"
          @touchstart="touch"
          @touchmove="move"
          @touchend="touchEnd"
        />
		<u-empty v-else class="charts" />
      </view>
      <view class="card">
        <view class="title">近30天用电量统计(KW/h)</view>
        <view class="table">
          <view class="tr th">
            <view class="th" style="width: 60rpx">序号</view>
            <view class="th" style="width: 178rpx">日期</view>
            <view class="th" style="width: 132rpx">用电量</view>
          </view>
          <scroll-view scroll-y="true" class="scrollDay">
            <view v-for="(item, index) in day" :key="index" class="tr-item">
              <view class="tr">
                <view class="td" style="width: 60rpx">{{index+1}}</view>
                <view class="td" style="width: 178rpx">{{item.time }}</view>
                <view class="td" style="width: 132rpx">{{item.value1 }}</view>
              </view>
              <view class="border" />
            </view>
            <view v-for="item in (30-day.length)" :key="item+day.length" class="tr-item">
              <view class="tr">
                <view class="td" style="width: 60rpx">{{item+day.length}}</view>
                <view class="td" style="width: 178rpx"></view>
                <view class="td" style="width: 132rpx"></view>
              </view>
              <view class="border" />
            </view>
          </scroll-view>
        </view>
        <view />
      </view>
      <view style="height: 1px" />
    </view>
    <u-toast ref="uToast" />
  </view>
</template>

<script>
import {
  getPropertyLimit,
  getPropertyDay,
  setPropertyData,
} from "@/common/network/equipment/property";

import {
  getEnergyinfoEchart,
} from "@/common/network/equipment/device";
import uCharts from "@/components/u-charts/u-charts";

export default {
  data() {
    return {
      showMonth: true,
      device: {},
      month: [],
      day: [],
      base: "",
      charts: [{}, {}, {}],
    };
  },
  created() {},
  mounted() {},
  methods: {
	getechartvalue1(data){
	  	const _self = this;
	  	getEnergyinfoEchart(data)
	  	  .then((res) => {
			debugger
	  		if(res.data.totalCount > 0)
	  		{
				_self.day = res.data.list;
	  			
	  			_self.charts[2] = new uCharts({
	  			  $this: _self,
	  			  canvasId: "dayCharts",
	  			  type: "area",
	  			  enableScroll: true,
				  scrollAlign:'left',//滚动条初始位置
	  			  dataLabel: false,
	  			  dataPointShape: false,
	  			  padding: [15, 5, 0, 0],
	  			  colors: ["#4E73DF"],
	  			  legend: {
	  			    show: false,
	  			  },
	  			  categories: _self.day.map((item) =>
	  			    //_self.$u.timeFormat(item.ts, "mm-dd")
	  			  			item.time
	  			  ),
	  			  series: [
	  			    {
	  			      data: _self.day.map((item) => item.value1),
	  			      name: "用电量",
	  			    },
	  			  ],
	  			  animation: true,
	  			  xAxis: {
	  			    disableGrid: true,
	  			    itemCount: 3,
	  			  },
	  			  yAxis: {
	  			    data: [
	  			      {
	  			        axisLine: false,
	  			        format: (val) => {
	  			          return val.toFixed(2);
	  			        },
	  			      },
	  			    ],
	  			  },
	  			  width: uni.upx2px(654),
	  			  height: uni.upx2px(380),
	  			  extra: {
	  			    area: {
	  			      type: "curve",
	  			      addLine: true,
	  			      width: 1,
	  			      opacity: 0.5,
	  			      gradient: true,
	  			    },
	  			  },
	  			});
	  		}
	  	 })
	  
	},
	touchCharts(index, e) {
	  this.charts[index].showToolTip(e, {
	    format: function (item, category) {
	      if (index !== 1) {
	        return item.name + ":" + item.data.toFixed(2);
	      } else {
	        return item.name + ":" + item.data + "%";
	      }
	    },
	  });
	},
	touch(e) {
	  this.charts[2].scrollStart(e);
	},
	move(e) {
	  this.charts[2].scroll(e);
	},
	touchEnd(e) {
	  this.charts[2].scrollEnd(e);
	  this.touchCharts(2, e);
	},
  },
 
  onLoad(option) {
    this.device = option;
	const end = new Date();
	const start = new Date();
	start.setTime(start.getTime() - 3600 * 1000 * 24* 30 );
	this.device.endtime = this.FormatDate(end, "yyyy-MM-dd")
	this.device.starttime = this.FormatDate(start, "yyyy-MM-dd")
	
	this.getechartvalue1(this.device);
	//this.getechartvalue2(this.device);
  },
  onShow() {},
};
</script>

<style scoped>
.page {
  background: linear-gradient(
    180deg,
    rgba(235, 241, 255, 0.5) 0%,
    #e4ebff 100%
  );
}

.base {
  display: flex;
  justify-content: space-between;
  align-items: center;

  padding: 32rpx 24rpx;
}

.u-field {
  padding: 16rpx 20rpx;
  width: 420rpx;
  background: rgba(141, 146, 166, 0.13);
  border-radius: 4px;
}
.uni-input-placeholder.input-placeholder {
  color: #8d92a6;
}

.u-btn {
  margin: 0;
  padding: 0 32rpx;
  height: 56rpx;
}

.card {
  margin: 32rpx 24rpx;
  padding: 32rpx 24rpx 0;

  background: #ffffff;
  border-radius: 8px;
}

.card > .title {
  font-size: 36rpx;
  font-weight: bolder;
}

.swiper {
  height: calc(100vh - var(--status-bar-height) - 44px - 144rpx);
}

.table {
  margin-top: 24rpx;

  font-size: 30rpx;
  border: 1px solid rgba(78, 115, 223, 0.4);
  border-radius: 5px;
}
.table + * {
  height: 30rpx;
}
.tr {
  display: flex;
  justify-content: space-around;
  align-items: center;

  height: 2.1em;
  text-align: center;
}
.tr + .border {
  margin: 0 auto;
  width: 560rpx;
  height: 1px;
  background: rgba(141, 146, 166, 0.2);
}
.table .tr-item:last-child > .border {
  height: 0;
}
.tr.th {
  background: rgba(78, 115, 223, 0.4);
}

.scrollDay {
  height: calc(100vh - var(--status-bar-height) - 44px - 780rpx);
}

.charts {
  width: 100%;
  height: 400rpx;
}
</style>