1

src/projects/business/main.js

@@ -12,6 +12,7 @@ import {
 import mui from '$project/assets/js/mui.js'
 import '$project/assets/css/mui.min.css'
 import Vconsole from 'vconsole'
+import '$project/assets/css/icons-extra.css'
 
 window.mui = mui;
 window.mui.init();

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

@@ -1,8 +1,406 @@
 <template>
+	<div>
+		<header class="mui-bar mui-bar-nav">
+			<div class="barRight">
+				<i class="mui-icon-extra mui-icon-extra-filter"></i>
+				<a href="#popover" id="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="select">
+					<select>
+					  <option value ="volvo">Volvo</option>
+					  <option value ="saab">Saab</option>
+					  <option value="opel">Opel</option>
+					  <option value="audi">Audi</option>
+					</select>
+				</div>
+				<div class="title">功率</div>
+				<div class="returnCheckbox">
+					<div class="mui-input-row mui-checkbox mui-left">
+						<label>总功率</label>
+						<input name="checkbox1" value="Item 1" type="checkbox" checked>
+					</div>
+					<div class="mui-input-row mui-checkbox mui-left">
+						<label>A相功率</label>
+						<input name="checkbox1" value="Item 1" type="checkbox" checked>
+					</div>
+					<div class="mui-input-row mui-checkbox mui-left">
+						<label>B相功率</label>
+						<input name="checkbox1" value="Item 1" type="checkbox" checked>
+					</div>
+					<div class="mui-input-row mui-checkbox mui-left">
+						<label>C相功率</label>
+						<input name="checkbox1" value="Item 1" 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="checkbox1" value="Item 1" type="checkbox" checked>
+					</div>
+					<div class="mui-input-row mui-checkbox mui-left">
+						<label>B相功率</label>
+						<input name="checkbox1" value="Item 1" type="checkbox" checked>
+					</div>
+					<div class="mui-input-row mui-checkbox mui-left">
+						<label>C相功率</label>
+						<input name="checkbox1" value="Item 1" 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="checkbox1" value="Item 1" type="checkbox" checked>
+					</div>
+					<div class="mui-input-row mui-checkbox mui-left">
+						<label>B相功率</label>
+						<input name="checkbox1" value="Item 1" type="checkbox" checked>
+					</div>
+					<div class="mui-input-row mui-checkbox mui-left">
+						<label>C相功率</label>
+						<input name="checkbox1" value="Item 1" type="checkbox" checked>
+					</div>
+				</div>
+			</div>	
+			<div class="popover-btn">
+				<div class="popover-btn1">重置</div>
+				<div class="popover-btn2">确定</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>
+				</div>
+				<div class="returnData">
+					<div class="returnData-item">0</div>
+					<div class="returnData-item">0</div>
+					<div class="returnData-item">0</div>
+					<div class="returnData-item">0</div>
+					<div class="returnData-item">0</div>
+					<div class="returnData-item">0</div>
+					<div class="returnData-item">0</div>
+					<div class="returnData-item bgRed">2</div>
+					<span>kW·h</span>
+				</div>
+				<div class="returnRadio">
+					<div class="mui-input-row mui-radio mui-left">
+						<label>总用电量</label>
+						<input name="radio1" type="radio">
+					</div>
+					<div class="mui-input-row mui-radio mui-left">
+						<label>当月用电量</label>
+						<input name="radio1" type="radio">
+					</div>
+					<div class="mui-input-row mui-radio mui-left">
+						<label>上月用电量</label>
+						<input name="radio1" type="radio">
+					</div>
+					<div class="mui-input-row mui-radio mui-left">
+						<label>当年用电量</label>
+						<input name="radio1" type="radio">
+					</div>
+					<div class="mui-input-row mui-radio mui-left">
+						<label>当日用电量</label>
+						<input name="radio1" type="radio">
+					</div>
+					<div class="mui-input-row mui-radio mui-left">
+						<label>查询其他月份</label>
+						<input name="radio1" type="radio">
+					</div>
+				</div>
+			</div>
+			<div class="returnScreen">
+				<i class="mui-icon-extra mui-icon-extra-arrowleftcricle active"></i>
+				<div class="returnTime">
+					<p>2022-06-07</p>
+					<i class="mui-icon mui-icon-arrowdown"></i>
+				</div>
+				<i class="mui-icon-extra mui-icon-extra-arrowrightcricle"></i>
+			</div>
+			<dl class="returnChart returnChartBlue">
+				<dt><span>功率监测(kW)</span></dt>
+				<dd></dd>
+			</dl>
+			<dl class="returnChart">
+				<dt><span>电压监测(A)</span></dt>
+				<dd>
+
+				</dd>
+			</dl>
+			<dl class="returnChart">
+				<dt><span>电压监测(V)</span></dt>
+				<dd>
+
+				</dd>
+			</dl>
+		</div>
+	</div>
 </template>
 
 <script>
+	export default {
+		data() {
+			return {}
+		},
+		methods: {}
+	}
+</script>
+<script>
+	mui.init();
+
+	mui.plusReady(function() {
+		//				var view = plus.nativeObj.View.getViewById("title");
+		//				
+		//				var bitmap = new plus.nativeObj.Bitmap("back");
+		//				bitmap.loadBase64Data("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAMAAABg3Am1AAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAb1BMVEUAAAAAev8Aev8Aev8Aev8Aev8Aev8Aev8Aev8Aev8Aev8Aev8Aev8Aev8Aev8Aev8Aev8Aev8Aev8Aev8Aev8Aev8Aev8Aev8Aev8Aev8Aev8Aev8Aev8Aev8Aev8Aev8Aev8Aev8Aev8Aev8AAACubimgAAAAI3RSTlMAGfUTGfQTGPMSGPIYGhgaGBsXGxcbFxwXHBccFhwWHRYdHWufDPQAAAABYktHRACIBR1IAAAAB3RJTUUH4QETEBwooeTlkQAAAJVJREFUSMft1EkSgkAQRNFGUXFWHBDBibr/HTUwD5B/48Ig1y+io7u6MqUhf5hsNEY+j5hMgZ/FJ8Xc9ovos3T96utjbfqN/Nb0O/m96Uv5g+mP8ifTn+Ur01/ka9Nf5RvTt/I309/lH6Z/yr9Mn+Q71/MT8B34K/E58Enzv8R/K98HvnF8p3lr8F7izce7lbf3kJ/lDQp9HdBhgg3PAAAAJXRFWHRkYXRlOmNyZWF0ZQAyMDE3LTAxLTE5VDE2OjI4OjQwKzA4OjAwpTDFwQAAACV0RVh0ZGF0ZTptb2RpZnkAMjAxNy0wMS0xOVQxNjoyODo0MCswODowMNRtfX0AAAAASUVORK5CYII=");
+		//				view.drawBitmap(bitmap, {}, {
+		//					top: "10px",
+		//					left: "10px",
+		//					width: "24px",
+		//					height: "24px"
+		//				});
+		//				
+		//				view.setTouchEventRect({top:"0px",left:"0px",width:"44px",height:"100%"});
+	});
+
+	mui('.mui-scroll-wrapper').scroll();
+	mui('body').on('shown', '.mui-popover', function(e) {
+		//console.log('shown', e.detail.id);//detail为当前popover元素
+	});
+	mui('body').on('hidden', '.mui-popover', function(e) {
+		//console.log('hidden', e.detail.id);//detail为当前popover元素
+	});
 </script>
 
 <style>
-</style>
+	.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: 36px;
+	}
+	
+	.mui-popover {
+		position: absolute;
+		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 0;
+	}
+
+	.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;
+	}
+
+	.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: 36px;
+	}
+
+	.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>