能源中心

src/projects/business/apis/Other/energy.js

@@ -2,6 +2,51 @@ import request from '@/utils/request'
 import Qs from 'qs';
 
 
+export function electricityHourByDay(data) {
+	return request({
+		url: '/mobile/electricityMeterApi/electricityHourByDay',
+		data: Qs.stringify(data),
+		method: 'post',
+	})
+}
+export function electricityHourByYear(data) {
+	return request({
+		url: '/mobile/electricityMeterApi/electricityHourByYear',
+		data: Qs.stringify(data),
+		method: 'post',
+	})
+}
+
+export function electricityMonthHB(data) {
+	return request({
+		url: '/mobile/electricityMeterApi/electricityMonthHB',
+		data: Qs.stringify(data),
+		method: 'post',
+	})
+}
+export function electricityMonthTB(data) {
+	return request({
+		url: '/mobile/electricityMeterApi/electricityMonthTB',
+		data: Qs.stringify(data),
+		method: 'post',
+	})
+}
+
+export function electricityStatistics(data) {
+	return request({
+		url: '/mobile/electricityMeterApi/electricityStatistics',
+		data: Qs.stringify(data),
+		method: 'post',
+	})
+}
+
+export function energyCenter(data) {
+	return request({
+		url: '/mobile/electricityMeterApi/energyCenter',
+		data: Qs.stringify(data),
+		method: 'post',
+	})
+}
 export function energyCenterElectricity(data) {
 	return request({
 		url: '/mobile/electricityMeterApi/energyCenterElectricity',
@@ -9,6 +54,9 @@ export function energyCenterElectricity(data) {
 		method: 'post',
 	})
 }
+
+
+
 export function energyCenterMap(data) {
 	return request({
 		url: '/mobile/electricityMeterApi/energyCenterMap',
@@ -16,3 +64,19 @@ export function energyCenterMap(data) {
 		method: 'post',
 	})
 }
+
+export function meterList(data) {
+	return request({
+		url: '/mobile/electricityMeterApi/meterList',
+		data: Qs.stringify(data),
+		method: 'post',
+	})
+}
+
+export function powerDetection(data) {
+	return request({
+		url: '/mobile/electricityMeterApi/powerDetection',
+		data: Qs.stringify(data),
+		method: 'post',
+	})
+}

src/projects/business/router/other.js

@@ -51,7 +51,7 @@ const routesOther = [
 					},
 					{
 						path: 'info5',
-						name: 'OtherEnergyInfo',
+						name: 'OtherEnergyInfo5',
 						component: () => import('../views/Other/Energy/Info5.vue'),
 						meta: {
 							requireAuth: false,

src/projects/business/utils/request.js

@@ -14,6 +14,11 @@ axios.defaults.headers['Content-Type'] = 'application/x-www-form-urlencoded'
 
 //检测是否可以访问通
 var baseApiList = [process.env.VUE_APP_BACKEND_URL, process.env.VUE_APP_MIRROR_BACKEND_URL];
+if (process.env.VUE_APP_NODE_NAME == 'devlopment') {			
+	//baseApiList = ['http://192.168.77.162:8086/jp-housekeeper-server/']
+	//baseApiList = ['http://127.0.0.1:8086/jp-housekeeper-server/']
+	
+}
 var apiTypeIndex = 0;
 var checkApiGetBackendUrl = function(index) {
 	$.ajax({

src/projects/business/views/Other/Energy/Info.vue

@@ -1,773 +1,949 @@
-<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">
-						<span>荆鹏软件园总表</span>
-						<i class="mui-icon mui-icon-arrowdown"></i>
-					</div>
-					<div class="returnTop-down-item">
-						<span>今日</span>
-						<i class="mui-icon mui-icon-arrowdown"></i>
-					</div>
-				</div>
-				<div class="returnTop-chart">
-					
-				</div>
-				<div class="returnTop-bot">
-					<div class="returnTop-bot-item">
-						<p>峰值功率(12:00)</p>
-						<span>140.00</span>
-					</div>
-					<div class="returnTop-bot-item">
-						<p>平均功率</p>
-						<span>80.00</span>
-					</div>
-					<div class="returnTop-bot-item">
-						<p>低谷功率(02:00)</p>
-						<span>10.00</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">
-							<img src="~$project/assets/img/icon-1.png" alt="">
-							<span>功率</span>
-						</div>
-						<div class="returnChart-icon-item">
-							<img src="~$project/assets/img/icon-2.png" alt="">
-							<span>电流</span>
-						</div>
-						<div class="returnChart-icon-item">
-							<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">
-							<img src="~$project/assets/img/icon-4.png" alt="">
-							<span>功率</span>
-						</div>
-						<div class="returnChart-icon-item">
-							<img src="~$project/assets/img/icon-5.png" alt="">
-							<span>电流</span>
-						</div>
-						<div class="returnChart-icon-item">
-							<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: false,
-				showTop:[0,0,0,0,0,0,0,0],
-				nowDate:"",
-				 timeList:[],
-				queryDate:"",
-				queryDate2:"",
-				selectType:"0",
-				energyCenterElectricityObj:{},
-				energyCenterMapObj:{},
-				
-				showlist1:[],
-				showlist2:[],
-				showlist3:[],
+<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;
 			}
-		},
-		mounted() {
-			
-			
-		},
-		created() {
-	
-			//this.init()
-			
-			
- 		},
+			mui.toast('下滑查看更多',{duration:4*1000})
+
+		},
 		methods: {
-			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()
-			},
-			init(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() {
-				mui('#popover').popover('toggle');
-				mui(".mui-scroll-wrapper").scroll()
+			 gotoInfo(path,type){
+				 //跳转首页
+				 this.$router.push({
+				     name: 'OtherEnergy'+path,
+				     query: {
+				         meterNo: this.meterListObj.meterNo,
+						 type:type
+				     }
+				 })
+			 },
+			selectMeter(){
 				var _this = this;
-				var picker = new mui.DtPicker({
-					"type": "date",
-					"beginYear": 2020,
-					"endYear": 2040,
-					"endDate": new Date(),
-					"value": _this.queryDate2
-				});
-				picker.show(function(rs) {
-					_this.queryDate2 = rs.text;
-			
-					mui('#popover').popover('toggle');
-					mui(".mui-scroll-wrapper").scroll()
-					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!=this.selectType){
-					this.selectType=val;
-					this.getEnergyCenterElectricity()
-				}
-			},
-			//获取详情
-			getEnergyCenterMap() {
-				this.isLoading = true;
-				API.energyCenterMap({
-					queryDate:this.queryDate
-				}).then(response => {
-					this.isLoading = false;
-			
-					this.energyCenterMapObj = response;
-				
-					this.setMap();
-					
-				}).catch(error => {
-					this.isLoading = false;
-					mui.toast(error);
-				})
-			},
-			setMap(bl){
-				 this.timeList=[];
-				 for(var i in  this.energyCenterMapObj){
-					
-					 this.timeList.push(i)
-				 }
-				var list1=[];
-				var list2=[];
-				var list3=[];
-				var sz1=['总功率','A相功率','B相功率','C相功率'];
-				var sz2=['A相电流','B相电流','C相电流'];
-				var sz3=['A相电压','B相电压','C相电压'];
-				this.setSz(sz1,['allp','ap','bp','cp'],list1,this.energyCenterMapObj,this.showlist1)
-				this.setSz(sz2,['aa','ba','ca'],list2,this.energyCenterMapObj,this.showlist2)
-				this.setSz(sz3,['av','bv','cv'],list3,this.energyCenterMapObj,this.showlist3)
-				console.log(this.list1)
-				//获取图表数据
-				this.echarts('kwPicture',1,this.showlist1,list1);
-				 
-				//获取图表数据
-				this.echarts('aPicture',0,this.showlist2,list2);
-				//获取图表数据
-				this.echarts('vPicture',0,this.showlist3,list3);
-				
+				var picker = new mui.PopPicker();
 			
-			},
-			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.energyCenterElectricity({
-					queryDate:this.queryDate,
-					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);
+				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();
 				})
-			},
-			asynCallBack(){},
-			echarts(className,color,legenddata,seriesdata){
-				var colorName=""
-				if(color=='1'){
-					colorName="#ECEDF0"
-				}else{
-					colorName="#333"
+			},
+			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 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: 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;
-	}
-	.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;
+				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;
-		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>
+		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>

src/projects/business/views/Other/Energy/Info2.vue

@@ -1,62 +1,308 @@
 <template>
 	<div>
 		<header class="mui-bar mui-bar-nav">
-			<h1 class="mui-title">功率监测</h1>
+			<h1 class="mui-title">{{typeName}}监测</h1>
 			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
 		</header>
 		<div class="mui-content">
 			<dl class="returnChart">
 				<dt>
-					<span>功率监测(kW)</span>
-					<div class="returnChart-drop">
-						<p>今日</p>
+					<span>{{typeName}}监测(kW)</span>
+					<div class="returnChart-drop"  @click="selectData">
+						<p>{{queryDate==nowDate?'今日':queryDate}}</p>
 						<i class="mui-icon mui-icon-arrowdown"></i>
 					</div>
 				</dt>
 				<dd>
+					<div id="kwPicture" style="width:100%;height: 300px;">
 					
+					</div>
 				</dd>
 			</dl>
 			<div class="returnTable">
 				<table>
 					<tr>
 						<th></th>
-						<th>实时功率</th>
-						<th>最大功率</th>
-						<th>最小功率</th>
+						<th>实时{{typeName}}</th>
+						<th>最大{{typeName}}</th>
+						<th>最小{{typeName}}</th>
 					</tr>
-					<tr>
+					<tr v-if="type=='P'">
 						<td class="tableft">总功率</td>
-						<td>$100</td>
-						<td>$100</td>
-						<td>$100</td>
+						<td>{{currentMap.AL1}}</td>
+						<td>{{currentMap.AL2}}</td>
+						<td>{{currentMap.AL3}}</td>
 					</tr>
 					<tr>
 						<td class="tableft">A相</td>
-						<td>$100</td>
-						<td>$100</td>
-						<td>$100</td>
+						<td>{{currentMap.A1}}</td>
+						<td>{{currentMap.A2}}</td>
+						<td>{{currentMap.A3}}</td>
 					</tr>
 					<tr>
 						<td class="tableft">B相</td>
-						<td>$100</td>
-						<td>$100</td>
-						<td>$100</td>
+						<td>{{currentMap.B1}}</td>
+						<td>{{currentMap.B2}}</td>
+						<td>{{currentMap.B3}}</td>
 					</tr>
 					<tr>
 						<td class="tableft">C相</td>
-						<td>$100</td>
-						<td>$100</td>
-						<td>$100</td>
+						<td>{{currentMap.C1}}</td>
+						<td>{{currentMap.C2}}</td>
+						<td>{{currentMap.C3}}</td>
 					</tr>
 				</table>
 			</div>
 		</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 {
+		currentTimeStamp,
+		parseUnixTime,
+		beforeTimeStamp
+	} from '$project/utils'
+	export default {
+		name: 'MasterHealthArchives',
+		components: {
+			Common,
+			Loading,
+		
+		},
+		data() {
+			return {
+				meterNo:'',
+				type:'',
+				isLoading: true,
+				nowDate:"",
+					queryDate:"",
+				graphMap:{},
+				currentMap:{},
+				timeList:[],
+				typeName:'',
+			
+			}
+		},
+		created() {
+			
+			this.meterNo=this.$route.query.meterNo;
+			this.type=this.$route.query.type;
+			if(this.type=='P'){
+				this.typeName='功率'
+				
+			}else if(this.type=='A'){
+				this.typeName='电流'
+				
+			}else if(this.type=='V'){
+				this.typeName='电压'
+				
+			}
+			this.init();
+		},
+		methods: {
+			//选择日期
+			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.getPowerDetection()
+					picker.dispose();
+				});
+			},
+			init(){
+				this.nowDate=parseUnixTime(currentTimeStamp(), '{y}-{m}-{d}');
+				this.queryDate=parseUnixTime(beforeTimeStamp(0), '{y}-{m}-{d}');
+				//this.showlist1=['总功率','A相功率','B相功率','C相功率'];
+				this.getPowerDetection()
+			},
+			getPowerDetection(){
+				this.isLoading = true;
+				API.powerDetection({
+					queryDate:this.queryDate,
+					meterNo:this.meterNo,
+					type:this.type
+				}).then(response => {
+					this.isLoading = false;
+							
+					this.currentMap = response.currentMap;
+					this.graphMap= response.graphMap
+					this.setMap();
+					
+				}).catch(error => {
+					this.isLoading = false;
+					mui.toast(error);
+				})
+			},
+			setMap(){
+				
+				for(var i in  this.graphMap){
+									
+					this.timeList.push(i)
+				}
+				this.showlist1=['总功率','A相功率','B相功率','C相功率'];
+							
+				this.showlist2=['A相电流','B相电流','C相电流'];
+				this.showlist3=['A相电压','B相电压','C相电压'];
+				
+				var sz1=['总功率','A相功率','B相功率','C相功率'];
+				var sz2=['A相电流','B相电流','C相电流'];
+				var sz3=['A相电压','B相电压','C相电压'];
+				var list1=[];
+				var list2=[];
+				var list3=[];
+				this.setSz(sz1,['totalPower','ap','bp','cp'],list1,this.graphMap,this.showlist1)
+				this.setSz(sz2,['aa','ba','ca'],list2,this.graphMap,this.showlist2)
+				this.setSz(sz3,['av','bv','cv'],list3,this.graphMap,this.showlist3)
+				
+				if(this.type=='P'){
+					this.typeName='功率'
+					this.echarts('kwPicture',1,this.showlist1,list1);
+					
+				}else if(this.type=='A'){
+					this.typeName='电流'
+					this.echarts('kwPicture',0,this.showlist2,list2);
+					
+				}else if(this.type=='V'){
+					this.typeName='电压'
+					this.echarts('kwPicture',0,this.showlist3,list3);
+					
+				}
+				
+			},
+			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)
+			 
+				
+			},	echarts(className,color,legenddata,seriesdata){
+				var colorName="#333"
+				// 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 src="$project/assets/css/mui.picker.min.css"></style>
 
 <style>
 	body{

src/projects/business/views/Other/Energy/Info5.vue

@@ -4,25 +4,34 @@
 			<h1 class="mui-title">同比分析</h1>
 			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
 		</header>
+		<loading :visible="isLoading"></loading>
+		
 		<div class="mui-content">
 			<dl class="returnChart">
 				<dt>
 					<span>每月用电量(kW·h)</span>
 				</dt>
 				<dd>
+					<div id="kwPicture1" style="width:100%;height: 300px;">
 					
+					</div>
+				</dd>
+				<dd v-html="description" style="padding-left:20px ;">
+					 
 				</dd>
 			</dl>
 			<dl class="returnChart">
 				<dt>
 					<span>每小时用电量(kW·h)</span>
-					<div class="returnChart-drop">
-						<p>今日</p>
+					<div class="returnChart-drop" @click="selectData">
+						<p>{{queryDate==nowDate?'今日':queryDate}}</p>
 						<i class="mui-icon mui-icon-arrowdown"></i>
 					</div>
 				</dt>
 				<dd>
+					<div id="kwPicture2" style="width:100%;height: 300px;">
 					
+					</div>
 				</dd>
 			</dl>
 		</div>
@@ -30,7 +39,319 @@
 </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 {
+		currentTimeStamp,
+		parseUnixTime,
+		beforeTimeStamp
+	} from '$project/utils'
+	export default {
+		name: 'MasterHealthArchives',
+		components: {
+			Common,
+			Loading,
+		
+		},
+		data() {
+			return {
+				meterNo:'',
+				
+				isLoading: true,
+				nowDate:"",
+				queryDate:"",
+				showlist1:[],
+				graphMap:{},
+				description:"",
+				timeList1:[],
+				timeList2:[],
+			nowYear:'',
+			}
+		},
+		created() {
+			this.nowYear=new Date().getFullYear()
+			this.showlist1=[this.nowYear,this.nowYear-1];
+			
+			this.meterNo=this.$route.query.meterNo;
+		
+			this.init();
+		},
+		methods: {
+			
+			//选择日期
+			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.electricityHourByYear()
+					picker.dispose();
+				});
+			},
+			init(){
+				this.nowDate=parseUnixTime(currentTimeStamp(), '{y}-{m}-{d}');
+				this.queryDate=parseUnixTime(beforeTimeStamp(0), '{y}-{m}-{d}');
+				//this.showlist1=['总功率','A相功率','B相功率','C相功率'];
+				this.electricityMonthTB()
+					
+			},
+			electricityMonthTB(){
+				this.isLoading = true;
+				API.electricityMonthTB({
+					queryDate:this.queryDate,
+					meterNo:this.meterNo,
+			
+				}).then(response => {
+					this.isLoading = false;
+							
+					this.description = response.description;
+					this.graphMap= response.graphMap
+					this.setMap1();
+					this.electricityHourByYear()
+				}).catch(error => {
+					this.isLoading = false;
+					mui.toast(error);
+				})
+			},
+			electricityHourByYear(){
+				this.isLoading = true;
+				API.electricityHourByYear({
+					queryDate:this.queryDate,
+					meterNo:this.meterNo,
+				
+				}).then(response => {
+					this.isLoading = false;
+							
+ 					this.graphMap2= response.graphMap
+					this.setMap2();
+					
+				}).catch(error => {
+					this.isLoading = false;
+					mui.toast(error);
+				})
+			},
+			setMap2(){
+				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.echarts1('kwPicture2',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.echarts1('kwPicture1',list,this.timeList1);
+				
+				
+			},
+			setSz(energyCenterMapObj,type){
+				var ap={
+					 name: this.nowYear,
+					 type: type,
+					 symbol: 'none',
+					 sampling: 'lttb',
+					 data:[]
+				}
+				var ap2={
+					 name: this.nowYear-1,
+					 type: type,
+					 symbol: 'none',
+					 sampling: 'lttb',
+					 data:[]
+				}
+				 for(var i in energyCenterMapObj){
+				 	var sz=energyCenterMapObj[i];
+				 	
+					ap.data.push(sz[0].toFixed(0))
+					ap2.data.push(sz[1].toFixed(0))
+					
+					
+				 }
+				 
+				 return [ap,ap2]
+				
+			},	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)]
+					
+					returnsz.push(obj)
+				 }
+				
+				 return returnsz;
+				
+			},
+			echarts1(className,seriesdata,timeList){
+				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"
+								}
+							  },
+							  legend: {
+								data:  [this.nowYear+'',this.nowYear-1+'', ],
+								textStyle: {
+								    color: colorName
+								  }
+							  },
+							  grid: {
+								left: '3%',
+								right: '4%',
+								bottom: '15%',
+								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
+							};
+							
+					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.nowYear+'',this.nowYear-1+'', ],
+									 ...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' }]
+
+							};
+							 
+					myChart.setOption(option);
+			}
+			
+		}
+		
+	}
+	
 </script>
+<style src="$project/assets/css/mui.picker.min.css"></style>
 
 <style>
 

src/projects/business/views/Other/Energy/Info6.vue

@@ -4,33 +4,367 @@
 			<h1 class="mui-title">环比分析</h1>
 			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
 		</header>
+		<loading :visible="isLoading"></loading>
+		
 		<div class="mui-content">
 			<dl class="returnChart">
 				<dt>
 					<span>每月用电量(kW·h)</span>
 				</dt>
+				
 				<dd>
+					<div id="kwPicture1" style="width:100%;height: 300px;">
 					
+					</div>
+				</dd>
+				<dd v-html="description" style="padding-left:20px ;">
+					 
 				</dd>
 			</dl>
 			<dl class="returnChart">
 				<dt>
 					<span>每小时用电量(kW·h)</span>
-					<div class="returnChart-drop">
-						<p>今日</p>
+					<div class="returnChart-drop" @click="selectData">
+						<p>{{queryDate==nowDate?'今日':queryDate}}</p>
 						<i class="mui-icon mui-icon-arrowdown"></i>
 					</div>
 				</dt>
 				<dd>
+					<div id="kwPicture2" style="width:100%;height: 300px;">
 					
+					</div>
 				</dd>
 			</dl>
 		</div>
 	</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 {
+		unixTimeStamp,
+		currentTimeStamp,
+		parseUnixTime,
+		beforeTimeStamp
+	} from '$project/utils'
+	export default {
+		name: 'MasterHealthArchives',
+		components: {
+			Common,
+			Loading,
+		
+		},
+		data() {
+			return {
+				meterNo:'',
+				
+				isLoading: true,
+				nowDate:"",
+				queryDate:"",
+				showlist1:[],
+				graphMap:{},
+				description:"",
+				timeList1:[],
+				timeList2:[],
+			nowYear:'',
+			}
+		},
+		created() {
+		
+			
+			this.meterNo=this.$route.query.meterNo;
+		
+			this.init();
+		},
+		methods: {
+			
+			//选择日期
+			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.electricityHourByYear()
+					picker.dispose();
+				});
+			},
+			init(){
+				this.nowDate=parseUnixTime(currentTimeStamp(), '{y}-{m}-{d}');
+				this.queryDate=parseUnixTime(beforeTimeStamp(0), '{y}-{m}-{d}');
+				//this.showlist1=['总功率','A相功率','B相功率','C相功率'];
+				this.electricityMonthTB()
+					
+			},
+			electricityMonthTB(){
+				this.isLoading = true;
+				API.electricityMonthHB({
+					queryDate:this.queryDate,
+					meterNo:this.meterNo,
+			
+				}).then(response => {
+					this.isLoading = false;
+							
+					this.description = response.description;
+					this.graphMap= response.graphMap
+					this.setMap1();
+					this.electricityHourByYear()
+				}).catch(error => {
+					this.isLoading = false;
+					mui.toast(error);
+				})
+			},
+			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];
+				
+				this.isLoading = true;
+				API.electricityHourByDay({
+					queryDate:this.queryDate,
+					meterNo:this.meterNo,
+				
+				}).then(response => {
+					this.isLoading = false;
+							
+ 					this.graphMap2= response.graphMap
+					this.setMap2();
+					
+				}).catch(error => {
+					this.isLoading = false;
+					mui.toast(error);
+				})
+			},
+			setMap2(){
+				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)
+				this.echarts1('kwPicture2',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('kwPicture1',list,this.timeList1,null);
+				
+				
+			},
+			setSz(energyCenterMapObj,type,showsz){
+				var returnsz=[]
+				
+				for(var j in showsz){
+					
+					var ap={
+						 name: showsz[j],
+						 type: type,
+						 symbol: 'none',
+						 sampling: 'lttb',
+						 data:[]
+					}
+					for(var i in energyCenterMapObj){
+										 
+										 
+						var sz=energyCenterMapObj[i];
+						
+						 
+						ap.data.push(sz[j].toFixed(0))
+										
+					}
+					returnsz.push(ap)
+				}
+				
+				 console.log(returnsz);
+				 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),sz[2].toFixed(0)]
+					 
+				 	
+					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: '15%',
+								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 src="$project/assets/css/mui.picker.min.css"></style>
+
 
 <style>
 

src/projects/business/views/Other/Energy/Info7.vue

@@ -4,6 +4,7 @@
 			<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">
 			<ul class="mui-table-view returnList">
 				<li class="mui-table-view-cell">

src/utils/request.js

@@ -14,6 +14,12 @@ axios.defaults.headers['Content-Type'] = 'application/x-www-form-urlencoded'
 
 //检测是否可以访问通
 var baseApiList = [process.env.VUE_APP_BACKEND_URL, process.env.VUE_APP_MIRROR_BACKEND_URL];
+
+if (process.env.VUE_APP_NODE_NAME == 'devlopment') {			
+	//baseApiList = ['http://192.168.77.162:8086/jp-housekeeper-server/']
+	//baseApiList = ['http://127.0.0.1:8086/jp-housekeeper-server/']
+	
+}
 var apiTypeIndex = 0;
 var checkApiGetBackendUrl = function(index) {
 	$.ajax({