jp-xpgj-GA-file/src/projects/business/views/Other/Energy/Info.vue

<template>
	<div>
		<common @asynCallBack="asynCallBack"></common>
		<header class="mui-bar mui-bar-nav">
			<h1 class="mui-title">能源中心</h1>
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
		</header>
		<div class="mui-content">
			<div class="returnTop">
				<div class="returnTop-down">
					<div class="returnTop-down-item" @click="selectMeter">
						<span>{{meterListObj.name}}</span>
						<i class="mui-icon mui-icon-arrowdown"></i>
					</div>
					<div class="returnTop-down-item" @click="selectData">
						<span>{{queryDate==nowDate?'今日':queryDate}}</span>
						<i class="mui-icon mui-icon-arrowdown"></i>
					</div>
				</div>
				<div id="returnTop-chart" class="returnTop-chart" style="width:100%;height: 230px;">

				</div>
				<div class="returnTop-bot">
					<div class="returnTop-bot-item">
						<p>峰值功率({{energyCenterMapObj.peakTime}})</p>
						<span>{{energyCenterMapObj.peakKw&&energyCenterMapObj.peakKw.toFixed(0)}}</span>
					</div>
					<div class="returnTop-bot-item">
						<p>平均功率</p>
						<span>{{energyCenterMapObj.averageKw&&energyCenterMapObj.averageKw.toFixed(0)}}</span>
					</div>
					<div class="returnTop-bot-item">
						<p>低谷功率({{energyCenterMapObj.troughTime}})</p>
						<span>{{energyCenterMapObj.troughKw&&energyCenterMapObj.troughKw.toFixed(0)}}</span>
					</div>
				</div>
			</div>

			<dl class="returnChart">
				<dt><span>用电量统计(kW·h)</span></dt>
				<dd>
					<div class="returnUnit">
						<div class="returnUnit-item">百万</div>
						<div class="returnUnit-item">拾万</div>
						<div class="returnUnit-item">万</div>
						<div class="returnUnit-item">千</div>
						<div class="returnUnit-item">百</div>
						<div class="returnUnit-item">拾</div>
						<div class="returnUnit-item">1</div>
						<div class="returnUnit-item colorRed">0.1</div>
						<span style="min-width: 14px;">&nbsp;</span>
					</div>
					<div class="returnData">
						<div class="returnData-item" v-text="showTop[0]"></div>
						<div class="returnData-item" v-text="showTop[1]"></div>
						<div class="returnData-item" v-text="showTop[2]"></div>
						<div class="returnData-item" v-text="showTop[3]"></div>
						<div class="returnData-item" v-text="showTop[4]"></div>
						<div class="returnData-item" v-text="showTop[5]"></div>
						<div class="returnData-item" v-text="showTop[6]"></div>
						<div class="returnData-item bgRed" v-text="showTop[7]"></div>
						<span>度</span>
					</div>
					<div class="returnRadio">
						<div class="mui-input-row mui-radio mui-left">
							<label>总用电量</label>
							<input name="radio1" value="0" v-model="selectType" @click="ck(0)" type="radio">
						</div>
						<div class="mui-input-row mui-radio mui-left">
							<label>当月用电量</label>
							<input name="radio1" value="1" v-model="selectType" @click="ck(1)" type="radio">
						</div>
						<div class="mui-input-row mui-radio mui-left">
							<label>上月用电量</label>
							<input name="radio1" value="2" v-model="selectType" @click="ck(2)" type="radio">
						</div>
						<div class="mui-input-row mui-radio mui-left">
							<label>当年用电量</label>
							<input name="radio1" value="3" v-model="selectType" @click="ck(3)" type="radio">
						</div>
						<div class="mui-input-row mui-radio mui-left">
							<label>当日用电量</label>
							<input name="radio1" value="4" v-model="selectType" @click="ck(4)" type="radio">
						</div>
						<div class="mui-input-row mui-radio mui-left">
							<label>查询其他</label>
							<input name="radio1" value="9" v-model="selectType" @click="ck(9)" type="radio">
						</div>
					</div>
				</dd>
			</dl>

			<dl class="returnChart">
				<dt><span>能源监测</span></dt>
				<dd>
					<div class="returnChart-icon">
						<div class="returnChart-icon-item" @click="gotoInfo('Info2','P')" >
							<img src="~$project/assets/img/icon-1.png" alt="">
							<span>功率</span>
						</div>
						<div class="returnChart-icon-item"  @click="gotoInfo('Info2','A')"  >
							<img src="~$project/assets/img/icon-2.png" alt="">
							<span>电流</span>
						</div>
						<div class="returnChart-icon-item"  @click="gotoInfo('Info2','V')" >
							<img src="~$project/assets/img/icon-3.png" alt="">
							<span>电压</span>
						</div>
						<div class="returnChart-icon-item">
							<img src="~$project/assets/img/icon-no.png" alt="">
							<span>规划中</span>
						</div>
					</div>
				</dd>
			</dl>
			<dl class="returnChart">
				<dt><span>数据分析</span></dt>
				<dd>
					<div class="returnChart-icon">
						<div class="returnChart-icon-item"  @click="gotoInfo('Info5')">
							<img src="~$project/assets/img/icon-4.png" alt="">
							<span>同比分析</span>
						</div>
						<div class="returnChart-icon-item"  @click="gotoInfo('Info6')" >
							<img src="~$project/assets/img/icon-5.png" alt="">
							<span>环比分析</span>
						</div>
						<!-- <div class="returnChart-icon-item"   @click="gotoInfo('Info7')"  >
							<img src="~$project/assets/img/icon-6.png" alt="">
							<span>异常波动</span>
						</div> -->
						<div class="returnChart-icon-item">
							<img src="~$project/assets/img/icon-no.png" alt="">
							<span>规划中</span>
						</div>
					</div>
				</dd>
			</dl>
		</div>
		<loading :visible="isLoading"></loading>

	</div>
</template>

<script>
	require('$project/assets/js/mui.picker.min.js');

	import * as API from '@/apis/Other/energy'
	import Common from '$project/components/Common.vue'
	import Loading from '$project/components/Loading.vue'
	import {
		mapGetters,
		mapMutations
	} from 'vuex'
	import * as echarts from 'echarts'

	import 'echarts/lib/chart/line'
	import {
		currentTimeStamp,
		parseUnixTime,
		beforeTimeStamp
	} from '$project/utils'
	export default {
		name: 'MasterHealthArchives',
		components: {
			Common,
			Loading,

		},
		data() {
			return {
				isLoading: true,
				showTop: [0, 0, 0, 0, 0, 0, 0, 0],
				nowDate: "",
				timeList: [],
				queryDate: "",
				queryDate2: "",
				selectType: "0",
				energyCenterElectricityObj: {},
				energyCenterMapObj: {},
				isback: false,
				showlist1: [],
				showlist2: [],
				showlist3: [],
				meterList: [],
				meterListObj: {}
			}
		},
		mounted() {


		},
		created() {
			if (this.$route.query.isback) {
				this.isback = true;
			}
			mui.toast('下滑查看更多',{duration:4*1000})

		},
		methods: {
			 gotoInfo(path,type){
				 //跳转首页
				 this.$router.push({
				     name: 'OtherEnergy'+path,
				     query: {
				         meterNo: this.meterListObj.meterNo,
						 type:type
				     }
				 })
			 },
			selectMeter(){
				var _this = this;
				var picker = new mui.PopPicker();
			
				picker.setData(_this.meterList);
				//picker.pickers[0].setSelectedValue(this.attendanceType);
				picker.show(function(selectItems) {
					_this.meterListObj = _this.meterList[selectItems[0].value];
					//_this.approvalPersonName = selectItems[0].text;
					_this.init();
				})
			},
			openPopover() {
				mui('#popover').popover('toggle');
				mui(".mui-scroll-wrapper").scroll()
				this.queryDate2 = this.queryDate;

			},
			submitBtn() {
				this.queryDate = this.queryDate2;

				this.getEnergyCenterMap();
				this.getEnergyCenterElectricity();

				mui('#popover').popover('toggle');
				mui(".mui-scroll-wrapper").scroll()
			},
			initNew() {
				this.nowDate = parseUnixTime(currentTimeStamp(), '{y}-{m}-{d}');
				this.queryDate=parseUnixTime(beforeTimeStamp(0), '{y}-{m}-{d}');
				this.queryDate2=parseUnixTime(beforeTimeStamp(0), '{y}-{m}-{d}');
				this.isLoading = true;
				API.meterList({

				}).then(response => {
					this.isLoading = false;

					this.meterList = response.meterList;
					console.log(response)
					if (this.meterList.length) {
						this.meterListObj = this.meterList[0]
						for(var i in  this.meterList ){
								var obj=this.meterList[i];
								obj.value=i;
								obj.text=obj.name;
						}
						this.nowDate = parseUnixTime(currentTimeStamp(), '{y}-{m}-{d}');

						this.init();

					} else {
						mui.toast("未查询到电表")
					}


				}).catch(error => {
					this.isLoading = false;
					mui.toast(error);
				})
			},
			init(bl) {
				this.getEnergyCenterMap();
				this.getEnergyCenterElectricity();
			},
			initOld(bl) {
				this.nowDate = parseUnixTime(currentTimeStamp(), '{y}-{m}-{d}');
				this.queryDate = parseUnixTime(beforeTimeStamp(0), '{y}-{m}-{d}');
				this.queryDate2 = parseUnixTime(beforeTimeStamp(0), '{y}-{m}-{d}');

				this.showlist1 = ['总功率', 'A相功率', 'B相功率', 'C相功率'];

				this.showlist2 = ['A相电流', 'B相电流', 'C相电流'];
				this.showlist3 = ['A相电压', 'B相电压', 'C相电压'];
				if (bl) {
					mui('#popover').popover('toggle');
					mui(".mui-scroll-wrapper").scroll()
				}
				this.getEnergyCenterMap();
				this.getEnergyCenterElectricity();
			},
			//选择日期
			selectData() {
				var _this = this;
				var picker = new mui.DtPicker({
					"type": "date",
					"beginYear": 2020,
					"endYear": 2040,
					"endDate": new Date(),
					"value": _this.queryDate
				});
				picker.show(function(rs) {
					_this.queryDate = rs.text;

					_this.getEnergyCenterMap()
					picker.dispose();
				});
			},
			//选择日期
			selectData2() {
			
				var _this = this;
				var picker = new mui.DtPicker({
					"type": "month",
					"beginYear": 2020,
					"endYear": 2040,
					"endDate": new Date(),
					"value": _this.queryDate2
				});
				picker.show(function(rs) {
					_this.queryDate2 = rs.text+'-1';
					_this.getEnergyCenterElectricity()
					picker.dispose();
				});
			},
			ckDate(bl) {

				if (bl && this.queryDate == this.nowDate) {
					return
				}
				let dd = new Date(this.queryDate)
				if (bl) {
					dd.setDate(dd.getDate() + 1)
				} else {
					dd.setDate(dd.getDate() - 1)
				}
				let time = dd.getTime()

				this.queryDate = parseUnixTime(time, '{y}-{m}-{d}');
				this.getEnergyCenterMap()

			},
			ck(val) {
				if(val==9){
					this.selectType = val;
					this.selectData2()
				}else if (val != this.selectType) {
					this.selectType = val;
					this.getEnergyCenterElectricity()
				}
			},
			//获取详情
			getEnergyCenterMap() {
				this.isLoading = true;
				API.energyCenter({
					queryDate: this.queryDate
				}).then(response => {
					this.isLoading = false;

					this.energyCenterMapObj = response;

					for (var i in this.energyCenterMapObj) {
						var obj = this.energyCenterMapObj[i];
						if (i != 'peakTime' && i != 'troughTime') {
							if (obj) {
								this.energyCenterMapObj[i] = parseInt(obj);
							}
						}


					}
					this.setMap();

				}).catch(error => {
					this.isLoading = false;
					mui.toast(error);
				})
			},
			setMap(bl) {
				var maxvalue=260;
				var myChart = echarts.init(document.getElementById("returnTop-chart"), 'light');
				if(this.energyCenterMapObj.ampereMax&&this.energyCenterMapObj.voltageMax){
					maxvalue=this.energyCenterMapObj.ampereMax*this.energyCenterMapObj.voltageMax;
				}
				
				var option = {

					series: [{
						   radius:'90%',
						min: 0,
						max: maxvalue,
						type: 'gauge',
						itemStyle: {

							color: '#78f898',
						},
						progress: {
							show: true,
							roundCap: true,
							width: 18
						},
						axisLine: {
							roundCap: true,
							lineStyle: {
								width: 18
							}
						},
						axisTick: {
							show: false
						},
						splitLine: {
							length: 0,
							lineStyle: {
								width: 2,
								color: '#fff'
							}
						},

						axisLabel: {
							distance: 25,
							color: '#fff',
							fontSize: 0
						},
						anchor: {
							show: false,
							showAbove: true,
							size: 25,
							itemStyle: {
								borderWidth: 10
							}
						},
						pointer: {
							show: false
						},
						title: {
							offsetCenter: [0, '-40%'],
							fontSize: 16,
							color: '#e7ebf7',
							show: true
						},
						detail: {
							valueAnimation: true,
							fontSize: 80,
							color: '#fff',
							offsetCenter: [0, '20%'],
							formatter: function(value) {
								return '{value|' + value.toFixed(0) + '}\n{unit|千瓦(kW)}';
							},
							rich: {
								value: {
									fontSize: 50,
									fontWeight: 'bolder',
									color: '#e7ebf7'
								},
								unit: {
									fontSize: 16,
									color: '#e7ebf7',
									padding: [0, 0, -20, 10]
								}
							}
						},
						data: [{
							name: '当前负荷',
							value: this.energyCenterMapObj.nowKw,
						}]
					}]
				};
				myChart.setOption(option);


			},
			setSz(sz1, sz2, list, energyCenterMapObj, showList) {

				for (var j in sz1) {
					var k = showList.indexOf(sz1[j]);
					if (k == -1) {
						continue
					}
					var ap = {
						name: sz1[j],
						type: 'line',
						symbol: 'none',
						sampling: 'lttb',
						// stack: 'Total',
						data: []
					}
					list.push(ap)
					for (var i in energyCenterMapObj) {
						var obj = energyCenterMapObj[i][sz2[j]];
						if (obj) {
							ap.data.push(obj.toFixed(0));
						}

					}
				}
				console.log(list)


			},
			//获取详情
			getEnergyCenterElectricity() {

				//this.isLoading = true;
				API.electricityStatistics({
					queryDate: this.queryDate2,
					meterNo: this.meterListObj.meterNo,
					type: this.selectType
				}).then(response => {
					//this.isLoading = false;
					this.showTop = [0, 0, 0, 0, 0, 0, 0, 0]
					this.energyCenterElectricityObj = response;

					var electricity = this.energyCenterElectricityObj.electricity;
					if (electricity) {
						var sz = electricity.split(".")
						var str1 = sz[0];
						var str2 = [];
						if (sz.length > 1) {
							str2 = sz[1];
							this.showTop[7] = str2[0];
						}
						var j = 0;
						for (var i in str1) {
							if (i != undefined) {
								this.showTop[6 - str1.length + j + 1] = str1[i]
							}
							j++;
						}
						this.$forceUpdate()
					}

					//showTop
				}).catch(error => {
					this.isLoading = false;
					mui.toast(error);
				})
			},
			asynCallBack(bl) {
				this.isLoading = false;
				if (!bl) {
					this.initNew()
				} else {
					mui.toast("请登录后查看");
					window.location.href = '../home/#/select';

				}

			},
			echarts(className, color, legenddata, seriesdata) {
				var colorName = ""
				if (color == '1') {
					colorName = "#ECEDF0"
				} else {
					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"
						}
					},
					legend: {
						data: legenddata,
						textStyle: {
							color: colorName
						}
					},
					grid: {
						left: '3%',
						right: '4%',
						bottom: '15%',
						containLabel: true
					},

					xAxis: {
						type: 'category',
						boundaryGap: false,
						data: this.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
				};
				myChart.setOption(option);
			}
		}
	}
</script>


<style scoped>
	.mui-bar {
		background: #1F55FF;
		box-shadow: none;
	}

	.returnTop-bot {
		display: flex;
		justify-content: space-between;
		padding: 0  20px 20px;
	}

	.returnTop-bot-item {
		color: #fff;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.returnTop-bot-item p {
		color: #fff;
	}

	.returnTop-bot-item span {
		color: #fff;
		font-size: 24px;
	}

	.mui-bar a,
	.mui-bar h1 {
		color: #fff;
	}

	.returnTop {
		background-image: linear-gradient(180deg, #1F55FF, #27ABFF);
	}

	.returnTop-down {
		color: #fff;
		display: flex;
		justify-content: space-around;
	}

	.returnChart-icon {
		display: flex;
		padding: 0 16px;
		/* justify-content: space-between; */
	}

	.returnChart-icon-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-left: 5px;
	}

	.returnChart-icon-item img {
		height: 64px;
		width: 64px;
		margin-bottom: 3px;
	}

	.selectBtn {
		background-color: #f2f5fa;
		line-height: 20px;
		font-size: 16px;
		padding: 5px 5px 5px 15px;
		color: #333333;
	}

	.popover-form {
		padding: 20px;
	}

	.popover-btn {
		display: flex;
		height: 48px;

	}

	.popover-btn1 {
		width: 100px;
		border: 1px solid #eee;
		text-align: center;
		line-height: 50px;
	}

	.popover-btn2 {
		flex: 1;
		background-color: #1677FF;
		text-align: center;
		line-height: 50px;
		color: #fff;
	}

	.select select {
		background-color: #eee;
		margin-top: 6px;
	}

	.mui-popover .title {
		margin-top: 12px;
	}

	.returnCheckbox {
		display: flex;
		flex-wrap: wrap;
	}

	.returnCheckbox .mui-input-row {
		width: 33%;
	}

	.mui-checkbox.mui-left input[type=checkbox] {
		left: 0;
	}

	.mui-checkbox.mui-left label {
		padding-left: 24px;
	}

	.mui-checkbox input[type=checkbox]:before {
		content: '\e413';
	}

	.mui-checkbox input[type=checkbox]:checked:before {
		content: '\e443';
	}

	.mui-checkbox input[type=checkbox]:before,
	.mui-radio input[type=radio]:before {
		font-size: 20px;
	}

	.mui-checkbox input[type=checkbox],
	.mui-radio input[type=radio] {
		top: 5px;
	}

	.mui-popover {
		position: fixed;
		background-color: #fff;
		z-index: 999;
		left: 0 !important;
		right: 0 !important;
		top: 44px !important;
		border-top: 1px solid #eee;
		border-radius: 0;
		width: 100%;
		box-shadow: none;
	}

	.mui-backdrop {
		top: 44px;
	}

	.barRight {
		float: right;
		display: flex;
		align-items: center;
		height: 44px;
	}

	.barRight a {
		margin-left: 3px;
	}

	.barRight i {
		font-size: 16px;
	}

	.returnScreen {
		margin-top: 14px;
		background-color: #fff;
		display: flex;
		justify-content: space-between;
		padding: 12px;
	}

	.returnScreen i {
		color: #D4D6D9;
	}

	.returnScreen .active {
		color: #1677FF;
	}

	.returnTime {
		display: flex;
		align-items: center;
	}

	.returnTime p {
		font-size: 18px;
		margin-right: 6px;
	}

	.returnChart {
		/* 	//padding: 0 16px; */
		background-color: #fff;
	}

	.returnChart dt {
		padding: 16px 16px;
	}

	.returnChart dt span {
		position: relative;
		padding-left: 15px;
		font-size: 18px;
	}

	.returnChart dt span:before {
		content: '';
		position: absolute;
		width: 4px;
		height: 14px;
		background-color: #1677FF;
		border-radius: 2px;
		left: 0;
		top: 2px;
	}

	.returnChart dd {
		padding-bottom: 16px;
		margin: 0;

	}

	.returnHead {
		padding: 20px;
		background-color: #fff;
	}

	.returnUnit {
		display: flex;
		align-items: center;
		padding: 0 20px;
	}

	.returnData {
		display: flex;
		align-items: center;
		padding: 0 20px;
	}

	.returnUnit .returnUnit-item {
		width: 36px;
		text-align: center;
		line-height: 48px;
		margin-right: 1px;
	}

	.returnData .returnData-item {
		height: 48px;
		width: 36px;
		background-color: #101010;
		text-align: center;
		line-height: 48px;
		color: #fff;
		font-size: 36px;
		margin-right: 1px;
	}

	.returnData span {
		margin-left: 5px;
	}

	.colorRed {
		color: #900005;
	}

	.bgRed {
		background-color: #900005 !important;
	}

	.returnRadio {
		display: flex;
		flex-wrap: wrap;
		margin-top: 12px;
		padding: 0 20px;
	}

	.returnRadio .mui-input-row {
		width: 33%;
	}

	.mui-radio.mui-left input[type=radio] {
		left: 0;
	}

	.mui-radio.mui-left label {
		padding-left: 24px;
		padding-top: 5px;
		padding-bottom: 5px;
	}

	.returnChartBlue {
		background-image: linear-gradient(0deg, #034373, #007BD3);
		margin-top: 0;
	}

	.returnChartBlue dt span {
		color: #fff;
	}

	.returnChartBlue dt span:before {
		content: '';
		position: absolute;
		width: 4px;
		height: 14px;
		background-color: #fff;
		border-radius: 2px;
		left: 0;
		top: 2px;
	}
</style>
<style src="$project/assets/css/mui.picker.min.css"></style>