|
@@ -0,0 +1,469 @@
|
|
|
+<template>
|
|
|
+ <view>
|
|
|
+ <u-navbar :title="title" title-color="#101010">
|
|
|
+ </u-navbar>
|
|
|
+
|
|
|
+ <u-picker-select :noselect="false" @confirm="selector2confirm" @reset="selector2reset" :defaultTime="queryDate"
|
|
|
+ title="日期选择" v-model="show" mode="time" :params="params"></u-picker-select>
|
|
|
+
|
|
|
+ <view class="main">
|
|
|
+ <view class="title">
|
|
|
+
|
|
|
+ <view class="text">
|
|
|
+
|
|
|
+ <view class="icon">
|
|
|
+
|
|
|
+ </view>
|
|
|
+ <span>
|
|
|
+ 环比分析-每月用水量( m³)
|
|
|
+
|
|
|
+ </span>
|
|
|
+
|
|
|
+ </view>
|
|
|
+
|
|
|
+ </view>
|
|
|
+ <view class="chat">
|
|
|
+ <view id="barEcharts1" style="min-height:440rpx;">
|
|
|
+
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view v-html="description">
|
|
|
+
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="main">
|
|
|
+ <view class="title">
|
|
|
+
|
|
|
+ <view class="text">
|
|
|
+
|
|
|
+ <view class="icon">
|
|
|
+
|
|
|
+ </view>
|
|
|
+ <span>
|
|
|
+ 环比分析-每小时用水量( m³)
|
|
|
+
|
|
|
+ </span>
|
|
|
+
|
|
|
+ </view>
|
|
|
+ <view class="text1" @click="show=true">
|
|
|
+ {{queryDate==nowDate?'今日':queryDateStr}}<u-icon name="arrow-down"></u-icon>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="chat">
|
|
|
+ <view id="barEcharts2" style="min-height:440rpx;">
|
|
|
+
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+
|
|
|
+ import * as API from '@/apis/pagejs/water.js'
|
|
|
+
|
|
|
+ import * as echarts from 'echarts';
|
|
|
+ import {
|
|
|
+ unixTimeStamp,
|
|
|
+ currentTimeStamp,
|
|
|
+ parseUnixTime,
|
|
|
+ beforeTimeStamp
|
|
|
+ } from '@/apis/utils'
|
|
|
+
|
|
|
+ export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ params: {
|
|
|
+ year: true,
|
|
|
+ month: true,
|
|
|
+ day: true,
|
|
|
+ hour: false,
|
|
|
+ minute: false,
|
|
|
+ second: false
|
|
|
+ },
|
|
|
+ show: false,
|
|
|
+ meterNo: '',
|
|
|
+ type: '',
|
|
|
+ typeName: '',
|
|
|
+ nowDate: "",
|
|
|
+ queryDate: "",
|
|
|
+ queryDateStr: "",
|
|
|
+ showlist1: [],
|
|
|
+ graphMap: {},
|
|
|
+ graphMap2: {},
|
|
|
+ description: "",
|
|
|
+ timeList1: [],
|
|
|
+ timeList2: [],
|
|
|
+ nowYear: '',
|
|
|
+ title:"",
|
|
|
+
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onLoad(op) {
|
|
|
+ this.meterNo = op.id
|
|
|
+ //this.type=op.type
|
|
|
+ //this.typeName=op.typeName
|
|
|
+ this.title=op.title
|
|
|
+ this.nowDate = parseUnixTime(currentTimeStamp(), '{y}-{m}-{d}');
|
|
|
+ this.queryDate = parseUnixTime(beforeTimeStamp(0), '{y}-{m}-{d}');
|
|
|
+ this.queryDateStr = parseUnixTime(new Date(this.queryDate), '{y}-{m}-{d}');
|
|
|
+
|
|
|
+ this.nowYear = new Date().getFullYear()
|
|
|
+ //this.showlist1 = [];
|
|
|
+
|
|
|
+
|
|
|
+ this.waterMonthHB()
|
|
|
+ this.waterHourByDay()
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ selector2reset(e){
|
|
|
+ this.queryDate = parseUnixTime(beforeTimeStamp(0), '{y}-{m}-{d}');
|
|
|
+ this.queryDateStr = parseUnixTime(new Date(this.queryDate), '{y}-{m}-{d}');
|
|
|
+ this.waterHourByDay()
|
|
|
+ },
|
|
|
+ selector2confirm(e){
|
|
|
+ this.queryDate=e.year+"-"+e.month+'-'+e.day
|
|
|
+ this.queryDateStr = parseUnixTime(new Date(this.queryDate), '{y}-{m}-{d}');
|
|
|
+
|
|
|
+ this.waterHourByDay()
|
|
|
+ },
|
|
|
+
|
|
|
+ waterMonthHB() {
|
|
|
+ uni.showLoading({
|
|
|
+ title: "加载中",
|
|
|
+ mask: true,
|
|
|
+ })
|
|
|
+ API.waterMonthHB({
|
|
|
+ queryDate: this.queryDate,
|
|
|
+ meterId: this.meterNo,
|
|
|
+
|
|
|
+ }).then(response => {
|
|
|
+ uni.hideLoading();
|
|
|
+
|
|
|
+ this.description = response.data.description;
|
|
|
+
|
|
|
+ console.log(this.description)
|
|
|
+ this.graphMap = response.data.graphMap
|
|
|
+ this.setMap1();
|
|
|
+
|
|
|
+ }).catch(error => {
|
|
|
+ uni.hideLoading();
|
|
|
+ uni.showToast({
|
|
|
+ title: error,
|
|
|
+ icon: "none"
|
|
|
+ })
|
|
|
+ })
|
|
|
+ },
|
|
|
+ waterHourByDay() {
|
|
|
+ var time1=parseUnixTime(unixTimeStamp(this.queryDate)-1000*60*60*24, '{y}-{m}-{d}')
|
|
|
+ var time2=parseUnixTime(unixTimeStamp(this.queryDate)-2000*60*60*24, '{y}-{m}-{d}')
|
|
|
+
|
|
|
+ this.nowYear=new Date().getFullYear()
|
|
|
+ this.showlist1=[this.queryDate,time1,time2];
|
|
|
+
|
|
|
+ uni.showLoading({
|
|
|
+ title: "加载中",
|
|
|
+ mask: true,
|
|
|
+ })
|
|
|
+ API.waterHourByDay({
|
|
|
+ queryDate: this.queryDate,
|
|
|
+ meterId: this.meterNo,
|
|
|
+
|
|
|
+ }).then(response => {
|
|
|
+ uni.hideLoading();
|
|
|
+
|
|
|
+ this.graphMap2 = response.data.graphMap
|
|
|
+ this.setMap2();
|
|
|
+
|
|
|
+ }).catch(error => {
|
|
|
+ uni.hideLoading();
|
|
|
+ uni.showToast({
|
|
|
+ title: error,
|
|
|
+ icon: "none"
|
|
|
+ })
|
|
|
+ })
|
|
|
+ },
|
|
|
+ setMap2() {
|
|
|
+ this.timeList2 = [];
|
|
|
+ for (var i in this.graphMap2) {
|
|
|
+
|
|
|
+ this.timeList2.push(parseInt(i) + '时')
|
|
|
+ }
|
|
|
+
|
|
|
+ var list1 = [];
|
|
|
+ var list2 = [];
|
|
|
+ // var list= this.setSz2(this.graphMap2,'bar')
|
|
|
+ // this.echarts2('kwPicture2',list);
|
|
|
+
|
|
|
+ var list = this.setSz(this.graphMap2, 'line',this.showlist1)
|
|
|
+ console.log(list)
|
|
|
+ this.echarts1('barEcharts2', list, this.timeList2,{});
|
|
|
+ },
|
|
|
+ setMap1() {
|
|
|
+
|
|
|
+ for (var i in this.graphMap) {
|
|
|
+
|
|
|
+ this.timeList1.push(parseInt(i) + 1 + '月')
|
|
|
+ }
|
|
|
+
|
|
|
+ var list1 = [];
|
|
|
+ var list2 = [];
|
|
|
+ var list = this.setSz(this.graphMap, 'line',[this.nowYear+''])
|
|
|
+
|
|
|
+ this.echarts1('barEcharts1', list, this.timeList1,null);
|
|
|
+
|
|
|
+
|
|
|
+ },
|
|
|
+ setSz(energyCenterMapObj,type,showsz){
|
|
|
+ var returnsz=[]
|
|
|
+
|
|
|
+ for(var j in showsz){
|
|
|
+
|
|
|
+ var ap={
|
|
|
+ name: showsz[j],
|
|
|
+ type: type,
|
|
|
+ symbol: 'circle',
|
|
|
+ data:[]
|
|
|
+ }
|
|
|
+ for(var i in energyCenterMapObj){
|
|
|
+
|
|
|
+
|
|
|
+ var sz=energyCenterMapObj[i];
|
|
|
+
|
|
|
+
|
|
|
+ ap.data.push((sz[j]))
|
|
|
+
|
|
|
+ }
|
|
|
+ returnsz.push(ap)
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ return returnsz
|
|
|
+
|
|
|
+ },
|
|
|
+ setSz2(energyCenterMapObj, type) {
|
|
|
+ var returnsz = [];
|
|
|
+
|
|
|
+ for (var i in energyCenterMapObj) {
|
|
|
+ var sz = energyCenterMapObj[i];
|
|
|
+
|
|
|
+ //var obj=[i+'时',sz[0].toFixed(0),sz[1].toFixed(0)]
|
|
|
+ var obj = [i + '时', parseInt(sz[0]), parseInt(sz[1]), parseInt(sz[2])]
|
|
|
+
|
|
|
+ returnsz.push(obj)
|
|
|
+ }
|
|
|
+
|
|
|
+ return returnsz;
|
|
|
+
|
|
|
+ },
|
|
|
+ echarts1(className, seriesdata, timeList,legend) {
|
|
|
+ var colorName="#333"
|
|
|
+
|
|
|
+
|
|
|
+ var myChart = echarts.init(document.getElementById(className), 'light');
|
|
|
+ myChart.clear()
|
|
|
+ var option = {
|
|
|
+
|
|
|
+ tooltip: {
|
|
|
+ trigger: 'axis',
|
|
|
+ borderColor:"#F0F0F0",
|
|
|
+ borderWidth:1,
|
|
|
+ backgroundColor:"#ffffff",
|
|
|
+ textStyle:{
|
|
|
+ color:"#333"
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ grid: {
|
|
|
+
|
|
|
+ left: '3%',
|
|
|
+ right: '4%',
|
|
|
+ bottom: '5%',
|
|
|
+ containLabel: true
|
|
|
+ },
|
|
|
+
|
|
|
+ xAxis: {
|
|
|
+ type: 'category',
|
|
|
+ boundaryGap: false,
|
|
|
+ data: timeList,
|
|
|
+ axisLabel:{
|
|
|
+ textStyle:{
|
|
|
+ color:colorName
|
|
|
+ }
|
|
|
+ },
|
|
|
+ axisLine:{
|
|
|
+ show:true,
|
|
|
+ lineStyle:{
|
|
|
+ color:colorName
|
|
|
+ }
|
|
|
+ },
|
|
|
+ },
|
|
|
+ yAxis: {
|
|
|
+ type: 'value',
|
|
|
+
|
|
|
+ axisLabel:{
|
|
|
+ textStyle:{
|
|
|
+ color:colorName
|
|
|
+ }
|
|
|
+ }, axisLine:{
|
|
|
+ show:true,
|
|
|
+ lineStyle:{
|
|
|
+ color:colorName
|
|
|
+ }
|
|
|
+ },
|
|
|
+ },
|
|
|
+ // dataZoom: [
|
|
|
+ // {
|
|
|
+ // type: 'inside',
|
|
|
+ // start: 0,
|
|
|
+ // end: 100
|
|
|
+ // },
|
|
|
+ // {
|
|
|
+ // start: 0,
|
|
|
+ // end: 100
|
|
|
+ // }
|
|
|
+ // ],
|
|
|
+ series: seriesdata
|
|
|
+ };
|
|
|
+ if(legend){
|
|
|
+ option.legend={}
|
|
|
+ }else{
|
|
|
+ option.grid.top='3%'
|
|
|
+ }
|
|
|
+ //console.log(option)
|
|
|
+ myChart.setOption(option);
|
|
|
+ },
|
|
|
+ echarts2(className, seriesdata) {
|
|
|
+ var colorName="#333"
|
|
|
+
|
|
|
+
|
|
|
+ var myChart = echarts.init(document.getElementById(className), 'light');
|
|
|
+ myChart.clear()
|
|
|
+ var option = {
|
|
|
+ dataset: {
|
|
|
+
|
|
|
+ source:[
|
|
|
+ ['product',...this.showlist1 ],
|
|
|
+ ...seriesdata
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ grid: {
|
|
|
+ left: '3%',
|
|
|
+
|
|
|
+ right: '4%',
|
|
|
+ bottom: '15%',
|
|
|
+ containLabel: true
|
|
|
+ },
|
|
|
+ legend: {
|
|
|
+
|
|
|
+ },
|
|
|
+
|
|
|
+ tooltip: {
|
|
|
+ trigger: 'axis',
|
|
|
+ axisPointer: {
|
|
|
+ type: 'shadow'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ xAxis: {
|
|
|
+ type: 'category',
|
|
|
+
|
|
|
+ },
|
|
|
+ yAxis: {
|
|
|
+
|
|
|
+ },
|
|
|
+ // dataZoom: [
|
|
|
+ // {
|
|
|
+ // type: 'inside',
|
|
|
+ // start: 0,
|
|
|
+ // end: 100
|
|
|
+ // },
|
|
|
+ // {
|
|
|
+ // start: 0,
|
|
|
+ // end: 100
|
|
|
+ // }
|
|
|
+ // ],
|
|
|
+
|
|
|
+ series: [{ type: 'bar' }, { type: 'bar' }, { type: 'bar' }]
|
|
|
+
|
|
|
+ };
|
|
|
+
|
|
|
+ myChart.setOption(option);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+
|
|
|
+
|
|
|
+ .slot {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ .img {
|
|
|
+ width: 48rpx;
|
|
|
+ height: 48rpx;
|
|
|
+ margin-right: 4rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .main {
|
|
|
+ background-color: #fff;
|
|
|
+ padding: 32rpx 8rpx 32rpx 32rpx;
|
|
|
+ margin-bottom: 30rpx;
|
|
|
+ .title {
|
|
|
+
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ .icon {
|
|
|
+ width: 8rpx;
|
|
|
+ margin-right: 8rpx;
|
|
|
+ height: 32rpx;
|
|
|
+ background-color: rgba(22, 119, 255, 1);
|
|
|
+ }
|
|
|
+
|
|
|
+ .text {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ color: rgb(16, 16, 16);
|
|
|
+ font-size: 36rpx;
|
|
|
+ margin-left: 12rpx;
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .chat {
|
|
|
+ width: 100%;
|
|
|
+ //height: 480rpx;
|
|
|
+ margin-top: 32rpx;
|
|
|
+
|
|
|
+ .img {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ // 表格
|
|
|
+ .table {
|
|
|
+ margin-top: 60rpx;
|
|
|
+ border-radius: 8px;
|
|
|
+
|
|
|
+ z-index: 999;
|
|
|
+
|
|
|
+ table {
|
|
|
+ background-color: #f1f2f5;
|
|
|
+ color: #101010;
|
|
|
+ padding: 20rpx 10rpx;
|
|
|
+
|
|
|
+ width: 100%;
|
|
|
+
|
|
|
+ td {
|
|
|
+ text-align: right;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+</style>
|