jp-housekeep-manage/pages/equipmentDataMonitoring/chartMoM.vue

<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>
						环比分析-每月用电量(kW·h)

					</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>
						环比分析-每小时用电量(kW·h)

					</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/electricityMeter.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.electricityMonthTB()
			this.electricityHourByYear()
		},
		methods: {
			selector2reset(e){
				this.queryDate = parseUnixTime(beforeTimeStamp(0), '{y}-{m}-{d}');
				this.queryDateStr = parseUnixTime(new Date(this.queryDate), '{y}年{m}月{d}日');
				this.electricityHourByYear()
			},
			selector2confirm(e){
				this.queryDate=e.year+"-"+e.month+'-'+e.day	
				this.queryDateStr = parseUnixTime(new Date(this.queryDate), '{y}年{m}月{d}日');
				
				this.electricityHourByYear()
			},
			
			electricityMonthTB() {
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				API.electricityMonthHB({
					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"
					})
				})
			},
			electricityHourByYear() {
				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.electricityHourByDay({
					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>