1

src/projects/business/views/Other/Energy/Info - 副本.vue

@@ -0,0 +1,750 @@
+<template>
+	<div>
+		<common @asynCallBack="asynCallBack"></common>
+		
+		<header class="mui-bar mui-bar-nav">
+			<div class="barRight">
+				<i class="mui-icon-extra mui-icon-extra-filter"></i>
+				<a  @click="openPopover" >过滤</a>
+			</div>
+			<h1 class="mui-title">能源中心</h1>
+			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
+		</header>
+		<div id="popover" class="mui-popover">
+			<div class="popover-form">
+				<div class="title">查询日期</div>
+				<div class="selectBtn" @click="selectData2" >
+					{{queryDate2}}
+					<i class="mui-icon mui-icon-arrowdown" style=" float: right;"></i>
+				</div>
+				
+				<div class="title">功率</div>
+				<div class="returnCheckbox">
+					<div class="mui-input-row mui-checkbox mui-left">
+						<label>总功率</label>
+						<input name="checkbox1" v-model="showlist1" value="总功率" type="checkbox"  >
+					</div>
+					<div class="mui-input-row mui-checkbox mui-left">
+						<label>A相功率</label>
+						<input name="checkbox1"  v-model="showlist1" value="A相功率" type="checkbox"  >
+					</div>
+					<div class="mui-input-row mui-checkbox mui-left">
+						<label>B相功率</label>
+						<input name="checkbox1"  v-model="showlist1" value="B相功率" type="checkbox"  >
+					</div>
+					<div class="mui-input-row mui-checkbox mui-left">
+						<label>C相功率</label>
+						<input name="checkbox1"  v-model="showlist1" value="C相功率" type="checkbox"  >
+					</div>
+				</div>
+				<div class="title">电流</div>
+				<div class="returnCheckbox">
+					<div class="mui-input-row mui-checkbox mui-left">
+						<label>A相电流</label>
+						<input name="checkbox2" v-model="showlist2" value="A相电流" type="checkbox" checked>
+					</div>
+					<div class="mui-input-row mui-checkbox mui-left">
+						<label>B相电流</label>
+						<input name="checkbox2" v-model="showlist2" value="B相电流" type="checkbox" checked>
+					</div>
+					<div class="mui-input-row mui-checkbox mui-left">
+						<label>C相电流</label>
+						<input name="checkbox2" v-model="showlist2" value="C相电流" type="checkbox" checked>
+					</div>
+				</div>
+				<div class="title">电压</div>
+				<div class="returnCheckbox">
+					<div class="mui-input-row mui-checkbox mui-left">
+						<label>A相电压</label>
+						<input name="checkbox3" v-model="showlist3" value="A相电压" type="checkbox" checked>
+					</div>
+					<div class="mui-input-row mui-checkbox mui-left">
+						<label>B相电压</label>
+						<input name="checkbox3"  v-model="showlist3" value="B相电压" type="checkbox" checked>
+					</div>
+					<div class="mui-input-row mui-checkbox mui-left">
+						<label>C相电压</label>
+						<input name="checkbox3"  v-model="showlist3" value="C相电压" type="checkbox" checked>
+					</div>
+				</div>
+			</div>	
+			<div class="popover-btn">
+				<div class="popover-btn1" @click="init(true)">重置</div>
+				<div class="popover-btn2" @click="submitBtn()">确定</div>
+			</div>
+		</div>
+		<div class="mui-content">
+			<div class="returnHead">
+				<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>
+			</div>
+			<div class="returnScreen">
+				<i class="mui-icon-extra mui-icon-extra-arrowleftcricle active"
+				
+				 @click="ckDate(0)"></i>
+				<div class="returnTime" @click="selectData">
+					<p>{{queryDate}}</p>
+					<i class="mui-icon mui-icon-arrowdown"></i>
+				</div>
+				<i class="mui-icon-extra mui-icon-extra-arrowrightcricle"
+				 :class="{
+				 					 active:queryDate!=nowDate
+				 }"
+				 @click="ckDate(1)" ></i>
+			</div>
+			<dl class="returnChart returnChartBlue">
+				<dt><span>功率监测(KW)</span></dt>
+				<dd>
+					<div id="kwPicture" style="width:100%;height: 300px;">
+					
+					</div>
+					
+				</dd>
+			</dl>
+			<dl class="returnChart">
+				<dt><span>电流监测(A)</span></dt>
+				<dd>
+					<div id="aPicture" style="width:100%;height: 300px;">
+					
+					</div>
+				</dd>
+			</dl>
+			<dl class="returnChart">
+				<dt><span>电压监测(V)</span></dt>
+				<dd>
+					<div id="vPicture" style="width:100%;height: 300px;">
+					
+					</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:[],
+			}
+		},
+		mounted() {
+			
+			
+		},
+		created() {
+	
+			//this.init()
+			
+			
+ 		},
+		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()
+				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);
+				
+			
+			},
+			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);
+				})
+			},
+			asynCallBack(){},
+			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 >
+	.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:11px;
+	}
+	.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;
+	}
+
+	.returnData {
+		display: flex;
+		align-items: center;
+	}
+
+	.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;
+	}
+
+	.returnRadio .mui-input-row {
+		width: 50%;
+	}
+
+	.mui-radio.mui-left input[type=radio] {
+		left: 0;
+	}
+
+	.mui-radio.mui-left label {
+		padding-left: 24px;
+	}
+
+	.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/Info.vue

@@ -1,166 +1,138 @@
 <template>
 	<div>
 		<common @asynCallBack="asynCallBack"></common>
-		
 		<header class="mui-bar mui-bar-nav">
-			<div class="barRight">
-				<i class="mui-icon-extra mui-icon-extra-filter"></i>
-				<a  @click="openPopover" >过滤</a>
-			</div>
 			<h1 class="mui-title">能源中心</h1>
 			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
 		</header>
-		<div id="popover" class="mui-popover">
-			<div class="popover-form">
-				<div class="title">查询日期</div>
-				<div class="selectBtn" @click="selectData2" >
-					{{queryDate2}}
-					<i class="mui-icon mui-icon-arrowdown" style=" float: right;"></i>
-				</div>
-				
-				<div class="title">功率</div>
-				<div class="returnCheckbox">
-					<div class="mui-input-row mui-checkbox mui-left">
-						<label>总功率</label>
-						<input name="checkbox1" v-model="showlist1" value="总功率" type="checkbox"  >
-					</div>
-					<div class="mui-input-row mui-checkbox mui-left">
-						<label>A相功率</label>
-						<input name="checkbox1"  v-model="showlist1" value="A相功率" type="checkbox"  >
-					</div>
-					<div class="mui-input-row mui-checkbox mui-left">
-						<label>B相功率</label>
-						<input name="checkbox1"  v-model="showlist1" value="B相功率" type="checkbox"  >
-					</div>
-					<div class="mui-input-row mui-checkbox mui-left">
-						<label>C相功率</label>
-						<input name="checkbox1"  v-model="showlist1" value="C相功率" type="checkbox"  >
-					</div>
-				</div>
-				<div class="title">电流</div>
-				<div class="returnCheckbox">
-					<div class="mui-input-row mui-checkbox mui-left">
-						<label>A相电流</label>
-						<input name="checkbox2" v-model="showlist2" value="A相电流" type="checkbox" checked>
-					</div>
-					<div class="mui-input-row mui-checkbox mui-left">
-						<label>B相电流</label>
-						<input name="checkbox2" v-model="showlist2" value="B相电流" type="checkbox" checked>
-					</div>
-					<div class="mui-input-row mui-checkbox mui-left">
-						<label>C相电流</label>
-						<input name="checkbox2" v-model="showlist2" value="C相电流" type="checkbox" checked>
-					</div>
-				</div>
-				<div class="title">电压</div>
-				<div class="returnCheckbox">
-					<div class="mui-input-row mui-checkbox mui-left">
-						<label>A相电压</label>
-						<input name="checkbox3" v-model="showlist3" value="A相电压" type="checkbox" checked>
-					</div>
-					<div class="mui-input-row mui-checkbox mui-left">
-						<label>B相电压</label>
-						<input name="checkbox3"  v-model="showlist3" value="B相电压" type="checkbox" checked>
+		<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="mui-input-row mui-checkbox mui-left">
-						<label>C相电压</label>
-						<input name="checkbox3"  v-model="showlist3" value="C相电压" type="checkbox" checked>
+					<div class="returnTop-down-item">
+						<span>今日</span>
+						<i class="mui-icon mui-icon-arrowdown"></i>
 					</div>
 				</div>
-			</div>	
-			<div class="popover-btn">
-				<div class="popover-btn1" @click="init(true)">重置</div>
-				<div class="popover-btn2" @click="submitBtn()">确定</div>
-			</div>
-		</div>
-		<div class="mui-content">
-			<div class="returnHead">
-				<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 class="returnTop-chart">
+					
 				</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 class="returnTop-bot">
+					<div class="returnTop-bot-item">
+						<p>峰值功率(12:00)</p>
+						<span>140.00</span>
 					</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 class="returnTop-bot-item">
+						<p>平均功率</p>
+						<span>80.00</span>
 					</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 class="returnTop-bot-item">
+						<p>低谷功率(02:00)</p>
+						<span>10.00</span>
 					</div>
 				</div>
 			</div>
-			<div class="returnScreen">
-				<i class="mui-icon-extra mui-icon-extra-arrowleftcricle active"
 				
-				 @click="ckDate(0)"></i>
-				<div class="returnTime" @click="selectData">
-					<p>{{queryDate}}</p>
-					<i class="mui-icon mui-icon-arrowdown"></i>
-				</div>
-				<i class="mui-icon-extra mui-icon-extra-arrowrightcricle"
-				 :class="{
-				 					 active:queryDate!=nowDate
-				 }"
-				 @click="ckDate(1)" ></i>
-			</div>
-			<dl class="returnChart returnChartBlue">
-				<dt><span>功率监测(KW)</span></dt>
+			<dl class="returnChart">
+				<dt><span>用电量统计(kW·h)</span></dt>
 				<dd>
-					<div id="kwPicture" style="width:100%;height: 300px;">
-					
+					<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>电流监测(A)</span></dt>
+				<dt><span>能源监测</span></dt>
 				<dd>
-					<div id="aPicture" style="width:100%;height: 300px;">
-					
+					<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>电压监测(V)</span></dt>
+				<dt><span>数据分析</span></dt>
 				<dd>
-					<div id="vPicture" style="width:100%;height: 300px;">
-					
+					<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>
@@ -508,12 +480,60 @@
 
 
 <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;
+		background-color: #f2f5fa;
+		line-height: 20px;
+		font-size: 16px;
+		padding: 5px 5px 5px 15px;
+		color: #333333;
 	}
 	.popover-form{
 		padding: 20px;
@@ -562,17 +582,14 @@
 	.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:11px;
+		top:5px;
 	}
 	.mui-popover {
 		position: fixed;
@@ -661,6 +678,7 @@
 	.returnChart dd {
 		padding-bottom: 16px;
 		margin: 0;
+		
 	}
 
 	.returnHead {
@@ -671,11 +689,13 @@
 	.returnUnit {
 		display: flex;
 		align-items: center;
+		padding: 0 20px;
 	}
 
 	.returnData {
 		display: flex;
 		align-items: center;
+		padding: 0 20px;
 	}
 
 	.returnUnit .returnUnit-item {
@@ -712,10 +732,11 @@
 		display: flex;
 		flex-wrap: wrap;
 		margin-top: 12px;
+		padding: 0 20px;
 	}
 
 	.returnRadio .mui-input-row {
-		width: 50%;
+		width: 33%;
 	}
 
 	.mui-radio.mui-left input[type=radio] {
@@ -724,6 +745,8 @@
 
 	.mui-radio.mui-left label {
 		padding-left: 24px;
+		padding-top:5px;
+		padding-bottom:5px;
 	}
 
 	.returnChartBlue {

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

@@ -1,9 +1,130 @@
 <template>
-	<div></div>
+	<div>
+		<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">
+			<dl class="returnChart">
+				<dt>
+					<span>功率监测(kW)</span>
+					<div class="returnChart-drop">
+						<p>今日</p>
+						<i class="mui-icon mui-icon-arrowdown"></i>
+					</div>
+				</dt>
+				<dd>
+					
+				</dd>
+			</dl>
+			<div class="returnTable">
+				<table>
+					<tr>
+						<th></th>
+						<th>实时功率</th>
+						<th>最大功率</th>
+						<th>最小功率</th>
+					</tr>
+					<tr>
+						<td class="tableft">总功率</td>
+						<td>$100</td>
+						<td>$100</td>
+						<td>$100</td>
+					</tr>
+					<tr>
+						<td class="tableft">A相</td>
+						<td>$100</td>
+						<td>$100</td>
+						<td>$100</td>
+					</tr>
+					<tr>
+						<td class="tableft">B相</td>
+						<td>$100</td>
+						<td>$100</td>
+						<td>$100</td>
+					</tr>
+					<tr>
+						<td class="tableft">C相</td>
+						<td>$100</td>
+						<td>$100</td>
+						<td>$100</td>
+					</tr>
+				</table>
+			</div>
+		</div>
+	</div>
 </template>
 
 <script>
 </script>
 
 <style>
-</style>
+	body{
+		background-color: #fff;
+	}
+	.mui-content{
+		background-color: #fff;
+	}
+	.returnTable{
+		background-color: #EEF0F3;
+		border-radius: 8px;
+		padding: 16px;
+		margin: 16px;
+	}
+	.returnTable table{
+		width: 100%;
+		background: none;
+		text-align: center;
+	}
+	.returnTable table td{
+		padding: 5px 0;
+	}
+	.tableft{
+		text-align: left;
+	}
+	.returnChart {
+		/* 	//padding: 0 16px; */
+		background-color: #fff;
+		margin: 0;
+	}
+
+	.returnChart dt {
+		padding: 16px 16px;
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+	}
+
+	.returnChart-drop {
+		display: flex;
+		align-items: center;
+	}
+
+	.returnChart-drop p {
+		font-size: 14px;
+		margin-right: 3px;
+	}
+
+	.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;
+
+	}
+</style>

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

@@ -1,9 +1,130 @@
 <template>
-	<div></div>
+	<div>
+		<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">
+			<dl class="returnChart">
+				<dt>
+					<span>电流监测(A)</span>
+					<div class="returnChart-drop">
+						<p>今日</p>
+						<i class="mui-icon mui-icon-arrowdown"></i>
+					</div>
+				</dt>
+				<dd>
+					
+				</dd>
+			</dl>
+			<div class="returnTable">
+				<table>
+					<tr>
+						<th></th>
+						<th>实时电流</th>
+						<th>最大电流</th>
+						<th>最小电流</th>
+					</tr>
+					<tr>
+						<td class="tableft">总功率</td>
+						<td>$100</td>
+						<td>$100</td>
+						<td>$100</td>
+					</tr>
+					<tr>
+						<td class="tableft">A相</td>
+						<td>$100</td>
+						<td>$100</td>
+						<td>$100</td>
+					</tr>
+					<tr>
+						<td class="tableft">B相</td>
+						<td>$100</td>
+						<td>$100</td>
+						<td>$100</td>
+					</tr>
+					<tr>
+						<td class="tableft">C相</td>
+						<td>$100</td>
+						<td>$100</td>
+						<td>$100</td>
+					</tr>
+				</table>
+			</div>
+		</div>
+	</div>
 </template>
 
 <script>
 </script>
 
 <style>
-</style>
+	body{
+		background-color: #fff;
+	}
+	.mui-content{
+		background-color: #fff;
+	}
+	.returnTable{
+		background-color: #EEF0F3;
+		border-radius: 8px;
+		padding: 16px;
+		margin: 16px;
+	}
+	.returnTable table{
+		width: 100%;
+		background: none;
+		text-align: center;
+	}
+	.returnTable table td{
+		padding: 5px 0;
+	}
+	.tableft{
+		text-align: left;
+	}
+	.returnChart {
+		/* 	//padding: 0 16px; */
+		background-color: #fff;
+		margin: 0;
+	}
+
+	.returnChart dt {
+		padding: 16px 16px;
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+	}
+
+	.returnChart-drop {
+		display: flex;
+		align-items: center;
+	}
+
+	.returnChart-drop p {
+		font-size: 14px;
+		margin-right: 3px;
+	}
+
+	.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;
+
+	}
+</style>

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

@@ -1,9 +1,130 @@
 <template>
-	<div></div>
+	<div>
+		<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">
+			<dl class="returnChart">
+				<dt>
+					<span>电压监测(V)</span>
+					<div class="returnChart-drop">
+						<p>今日</p>
+						<i class="mui-icon mui-icon-arrowdown"></i>
+					</div>
+				</dt>
+				<dd>
+					
+				</dd>
+			</dl>
+			<div class="returnTable">
+				<table>
+					<tr>
+						<th></th>
+						<th>实时电压</th>
+						<th>最大电压</th>
+						<th>最小电压</th>
+					</tr>
+					<tr>
+						<td class="tableft">总功率</td>
+						<td>$100</td>
+						<td>$100</td>
+						<td>$100</td>
+					</tr>
+					<tr>
+						<td class="tableft">A相</td>
+						<td>$100</td>
+						<td>$100</td>
+						<td>$100</td>
+					</tr>
+					<tr>
+						<td class="tableft">B相</td>
+						<td>$100</td>
+						<td>$100</td>
+						<td>$100</td>
+					</tr>
+					<tr>
+						<td class="tableft">C相</td>
+						<td>$100</td>
+						<td>$100</td>
+						<td>$100</td>
+					</tr>
+				</table>
+			</div>
+		</div>
+	</div>
 </template>
 
 <script>
 </script>
 
 <style>
-</style>
+	body{
+		background-color: #fff;
+	}
+	.mui-content{
+		background-color: #fff;
+	}
+	.returnTable{
+		background-color: #EEF0F3;
+		border-radius: 8px;
+		padding: 16px;
+		margin: 16px;
+	}
+	.returnTable table{
+		width: 100%;
+		background: none;
+		text-align: center;
+	}
+	.returnTable table td{
+		padding: 5px 0;
+	}
+	.tableft{
+		text-align: left;
+	}
+	.returnChart {
+		/* 	//padding: 0 16px; */
+		background-color: #fff;
+		margin: 0;
+	}
+
+	.returnChart dt {
+		padding: 16px 16px;
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+	}
+
+	.returnChart-drop {
+		display: flex;
+		align-items: center;
+	}
+
+	.returnChart-drop p {
+		font-size: 14px;
+		margin-right: 3px;
+	}
+
+	.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;
+
+	}
+</style>

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

@@ -1,9 +1,100 @@
 <template>
-	<div></div>
+	<div>
+		<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">
+			<dl class="returnChart">
+				<dt>
+					<span>每月用电量(kW·h)</span>
+				</dt>
+				<dd>
+					
+				</dd>
+			</dl>
+			<dl class="returnChart">
+				<dt>
+					<span>每小时用电量(kW·h)</span>
+					<div class="returnChart-drop">
+						<p>今日</p>
+						<i class="mui-icon mui-icon-arrowdown"></i>
+					</div>
+				</dt>
+				<dd>
+					
+				</dd>
+			</dl>
+		</div>
+	</div>
 </template>
 
 <script>
 </script>
 
 <style>
-</style>
+
+	.returnTable{
+		background-color: #EEF0F3;
+		border-radius: 8px;
+		padding: 16px;
+		margin: 16px;
+	}
+	.returnTable table{
+		width: 100%;
+		background: none;
+		text-align: center;
+	}
+	.returnTable table td{
+		padding: 5px 0;
+	}
+	.tableft{
+		text-align: left;
+	}
+	.returnChart {
+		/* 	//padding: 0 16px; */
+		background-color: #fff;
+		margin: 0;
+		margin-bottom: 16px;
+	}
+
+	.returnChart dt {
+		padding: 16px 16px;
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+	}
+
+	.returnChart-drop {
+		display: flex;
+		align-items: center;
+	}
+
+	.returnChart-drop p {
+		font-size: 14px;
+		margin-right: 3px;
+	}
+
+	.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;
+
+	}
+</style>

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

@@ -1,9 +1,100 @@
 <template>
-	<div></div>
+	<div>
+		<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">
+			<dl class="returnChart">
+				<dt>
+					<span>每月用电量(kW·h)</span>
+				</dt>
+				<dd>
+					
+				</dd>
+			</dl>
+			<dl class="returnChart">
+				<dt>
+					<span>每小时用电量(kW·h)</span>
+					<div class="returnChart-drop">
+						<p>今日</p>
+						<i class="mui-icon mui-icon-arrowdown"></i>
+					</div>
+				</dt>
+				<dd>
+					
+				</dd>
+			</dl>
+		</div>
+	</div>
 </template>
 
 <script>
 </script>
 
 <style>
-</style>
+
+	.returnTable{
+		background-color: #EEF0F3;
+		border-radius: 8px;
+		padding: 16px;
+		margin: 16px;
+	}
+	.returnTable table{
+		width: 100%;
+		background: none;
+		text-align: center;
+	}
+	.returnTable table td{
+		padding: 5px 0;
+	}
+	.tableft{
+		text-align: left;
+	}
+	.returnChart {
+		/* 	//padding: 0 16px; */
+		background-color: #fff;
+		margin: 0;
+		margin-bottom: 16px;
+	}
+
+	.returnChart dt {
+		padding: 16px 16px;
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+	}
+
+	.returnChart-drop {
+		display: flex;
+		align-items: center;
+	}
+
+	.returnChart-drop p {
+		font-size: 14px;
+		margin-right: 3px;
+	}
+
+	.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;
+
+	}
+</style>

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

@@ -1,9 +1,52 @@
 <template>
-	<div></div>
+	<div>
+		<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">
+			<ul class="mui-table-view returnList">
+				<li class="mui-table-view-cell">
+					<a class="mui-navigate-right">
+						<div class="returnList-text">
+							<h4>功率曲线出现异常波动，超出本月平均值<span>50%</span>，查看详情。</h4>
+							<p>2022-06-04 12:00:01</p>
+						</div>
+					</a>
+				</li>
+				<li class="mui-table-view-cell">
+					<a class="mui-navigate-right">
+						<h4>功率曲线出现异常波动，超出本月平均值<span>50%</span>，查看详情。</h4>
+						<p>2022-06-04 12:00:01</p>
+					</a>
+				</li>
+				<li class="mui-table-view-cell">
+					<a class="mui-navigate-right">
+						<h4>功率曲线出现异常波动，超出本月平均值<span>50%</span>，查看详情。</h4>
+						<p>2022-06-04 12:00:01</p>
+					</a>
+				</li>
+			</ul>
+		</div>
+	</div>
 </template>
 
 <script>
 </script>
 
 <style>
-</style>
+	.mui-table-view-cell>a:not(.mui-btn){
+		white-space: pre-wrap;
+	}
+	.returnList li h4{
+		font-size: 16px;
+		line-height: 22px;
+		width: 90%;
+	}
+	.returnList li h4 span{
+		color:#ff0000
+	}
+	.returnList li p{
+		color:#999;
+	}
+</style>