首页样式更改

colorui/main.css

@@ -3428,6 +3428,18 @@ scroll-view.cu-steps .cu-item {
 	color: #ffffff;
 }
 
+.bg-cuigreen{
+	background-color: #4BD663;
+}
+
+.bg-angrey{
+	background-color: #D5D8DD;
+}
+
+.bg-redred{
+	background-color: #E93131;
+}
+
 .bg-cyan {
 	background-color: #1cbbb4;
 	color: #ffffff;

pages/index/Index.vue

@@ -34,21 +34,37 @@
 		<!--电量卡片-->
 		<view class="InformationCard">
 			<view class="informationCardAll">
-			<view class="informationCardTextOne">
-				<view class="informationCardText"><view class="textSilver">安全天数</view><view class="textWhite">(天)</view>:15</view>
-				<view class="informationCardTextzj"><view class="textSilver">装机容量</view><view class="textWhite">(MV)</view>:15</view>
-			</view>
-			<view class="informationCardTextTwo">
-				<view class="informationCardText2"><view class="textSilver">日发电量</view><view class="textWhite">(kwh)</view>:150</view>
-				<view class="informationCardText2"><view class="textSilver">预测发电量</view><view class="textWhite">(kwh)</view>:15</view>
-				<view class="informationCardText2"><view class="textSilver">上网电量</view><view class="textWhite">(kwh)</view>:15</view>
-			</view>
+				<view class="informationCardTextOne">
+					<view class="informationCardText">
+						<view class="textSilver">安全天数</view>
+						<view class="textWhite">(天)</view>:15
+					</view>
+					<view class="informationCardTextzj">
+						<view class="textSilver">装机容量</view>
+						<view class="textWhite">(MV)</view>:15
+					</view>
+				</view>
+				<view class="informationCardTextTwo">
+					<view class="informationCardText2">
+						<view class="textSilver">日发电量</view>
+						<view class="textWhite">(kwh)</view>:150
+					</view>
+					<view class="informationCardText2">
+						<view class="textSilver">预测发电量</view>
+						<view class="textWhite">(kwh)</view>:15
+					</view>
+					<view class="informationCardText2">
+						<view class="textSilver">上网电量</view>
+						<view class="textWhite">(kwh)</view>:15
+					</view>
+				</view>
 			</view>
 		</view>
 		<!--风速卡片-->
 		<view class="speedPower">
 			<view class="cardinstallredSpeed">
-				<view class="cardinstalltitlegreen">平均风速<view class="textWhitekuangSpeed">(km/h)</view></view>
+				<view class="cardinstalltitlegreen">平均风速<view class="textWhitekuangSpeed">(km/h)</view>
+				</view>
 				<view class="cardinstallnumbergreen">5</view>
 				<view class="cardinstallnumbergreenmin">
 					<view class="greenMinText">min: 5</view>
@@ -58,7 +74,8 @@
 				</view>
 			</view>
 			<view class="cardinstallredSpeed">
-				<view class="cardinstalltitlegreen">预测风速<view class="textWhitekuangSpeed">(km/h)</view></view>
+				<view class="cardinstalltitlegreen">预测风速<view class="textWhitekuangSpeed">(km/h)</view>
+				</view>
 				<view class="cardinstallnumbergreen">48</view>
 				<view class="cardinstallnumbergreenmin">
 					<view class="greenMinText">min: 4</view>
@@ -68,7 +85,8 @@
 				</view>
 			</view>
 			<view class="cardinstallredSpeed">
-				<view class="cardinstalltitleRed">实际功率<view class="textWhitekuang">(kw)</view></view>
+				<view class="cardinstalltitleRed">实际功率<view class="textWhitekuang">(kw)</view>
+				</view>
 				<view class="cardinstallnumberred">15</view>
 				<view class="cardinstallnumberredmin">
 					<view class="redMinText">min: 566</view>
@@ -78,7 +96,8 @@
 				</view>
 			</view>
 			<view class="cardinstallredSpeed">
-				<view class="cardinstalltitleRed">理论功率<view class="textWhitekuang">(kw)</view></view>
+				<view class="cardinstalltitleRed">理论功率<view class="textWhitekuang">(kw)</view>
+				</view>
 				<view class="cardinstallnumberred">14</view>
 				<view class="cardinstallnumberredmin">
 					<view class="redMinText">min: 589</view>
@@ -88,14 +107,121 @@
 				</view>
 			</view>
 		</view>
+		<!--接入卡片-->
+		<view class="interfaceCard">
+			<view class="interfaceCardSmallTop">
+				<view class="interfaceCardSmall">
+					<view class="AccessCardimage">
+						<image src="../../static/picture/001.png" style="width: 18px;height:18px;margin-top: 9px;margin-left: 7px;"></image>
+					</view>
+					<view class="AccessCardText">接入</view>
+					<view class="AccessCardNumber">59</view>
+				</view>
+				<view class="interfaceCardSmall">
+					<view class="AccessCardimage">
+						<image src="../../static/picture/002.png" style="width: 18px;height:18px;margin-top: 9px;margin-left: 7px;"></image>
+					</view>
+					<view class="AccessCardText">运行</view>
+					<view class="AccessCardNumber">29</view>
+				</view>
+				<view class="interfaceCardSmall">
+					<view class="AccessCardimage">
+						<image src="../../static/picture/003.png" style="width: 18px;height:18px;margin-top: 9px;margin-left: 7px;"></image>
+					</view>
+					<view class="AccessCardText">故障</view>
+					<view class="AccessCardNumber">18</view>
+				</view>
+			</view>
+			<view class="interfaceCardSmallTop">
+				<view class="interfaceCardSmall">
+					<view class="AccessCardimage">
+						<image src="../../static/picture/004.png" style="width: 18px;height:18px;margin-top: 9px;margin-left: 7px;"></image>
+					</view>
+					<view class="AccessCardText">待机</view>
+					<view class="AccessCardNumber">10</view>
+				</view>
+				<view class="interfaceCardSmall">
+					<view class="AccessCardimage">
+						<image src="../../static/picture/005.png" style="width: 18px;height:18px;margin-top: 9px;margin-left: 7px;"></image>
+					</view>
+					<view class="AccessCardText">维护</view>
+					<view class="AccessCardNumber">8</view>
+				</view>
+				<view class="interfaceCardSmall">
+					<view class="AccessCardimage">
+						<image src="../../static/picture/006.png" style="width: 18px;height:19px;margin-top: 9px;margin-left: 7px;"></image>
+					</view>
+					<view class="AccessCardText">离线</view>
+					<view class="AccessCardNumber">8</view>
+				</view>
+			</view>
+		</view>
+		<!--进度条-->
+		<view class="progressBar">
+			<view class="progressBarAll">
+				<view class="progressBarOne">
+					<view class="progressBarLeft">
+						<view class="progressBarLeftText">
+							35kwh
+						</view>
+					</view>
+					<view class="progressBarText">月计划发电量进度条</view>
+					<view class="progressBarRight">
+						<view class="progressBarRightText">
+							100kwh
+						</view>
+					</view>
+				</view>
+				<view class="cu-progress round radius striped active">
+					<view class="bg-olive" :style="[{ width:loading?'61.8%':''}]"></view>
+					<view class="bg-angrey" :style="[{ width:loading?'38.2%':''}]"></view>
+				</view>
+			</view>
+			<view class="progressBarAll">
+				<view class="progressBarOne">
+					<view class="progressBarLeft">
+						<view class="progressBarLeftText">
+							135kwh
+						</view>
+					</view>
+					<view class="progressBarText">年计划发电量进度条</view>
+					<view class="progressBarRight">
+						<view class="progressBarRightText">
+							200kwh
+						</view>
+					</view>
+				</view>
+				<view class="cu-progress round radius striped active">
+					<view class="bg-olive" :style="[{ width:loading?'70%':''}]"></view>
+					<view class="bg-angrey" :style="[{ width:loading?'30%':''}]"></view>
+				</view>
+			</view>
+		</view>
+		<!--折线图-->
+		<view class="lineChart">
+			<view class="qiun-charts">
+				<view class="speedPowerDiagram">风速功率曲线图</view>
+				<canvas canvas-id="canvasLineA" id="canvasLineA" class="charts" @touchstart="touchLineA"></canvas>
+			</view>
+		</view>
+		<!-- 柱状图 -->
+		<view class="Histogram">
+			<view class="qiun-charts">
+				<canvas canvas-id="canvasColumnStack" id="canvasColumnStack" class="charts" @touchstart="touchColumn"></canvas>
+			</view>
+		</view>
 	</view>
 </template>
 
 <script>
-	import drawer from '../../components/drawer/threeLineDrawer.vue'
+	import drawer from '../../components/drawer/threeLineDrawer.vue';
+	import uCharts from '../../components/tools/u-charts/u-charts.js';
+	var _self;
+	var canvaLineA = null;
+	var canvaColumn = null;
 	export default {
 		components: {
-			"drawer": drawer
+			"drawer": drawer,
 		},
 		data: function() {
 			return {
@@ -103,128 +229,334 @@
 				drawerList: ["状态监视", "矩阵监视", "风场监视", "人员监视"],
 				inconList: ["form", "favor", "question", "edit"],
 				minaverageSpeed: '12',
-				maxaverageSpeed: '25'
+				maxaverageSpeed: '25',
+				loading: false,
+				cWidth: '',
+				cHeight: '',
+				pixelRatio: 1,
+				serverData: ''
 			}
 		},
+
+		onLoad: function() {
+			let that = this;
+			setTimeout(function() {
+				that.loading = true
+			}, 500);
+			_self = this;
+			this.cWidth = uni.upx2px(750);
+			this.cHeight = uni.upx2px(400);
+			this.getServerData();
+			this.getColumnData();
+		},
+
 		methods: {
 			openDrawer: function() {
 				this.$refs.drawer.openDrawer(250, this.drawerList, this.inconList);
 			},
 			closeDrawer: function() {
 				this.drawerIsShow = false;
-			}
+			},
+			getServerData() {
+				// 折线图
+				let LineA = {
+					categories: ['          17:26', '18:56', '19:56', '20:56', '21:56', '22:56', '23:56',
+						'00:56', '01:56', '02:56', '03:56', '04:56', '05:56', '06:56', '07:56', '08:56',
+						'09:56',
+						'10:56', '11:56', '12:56', '13:56', '14:56', '15:56', '16:56', '17:56            '
+					],
+					series: [{
+							name: '功率',
+							data: [11, 12, 14, 12, 13, 12, 16, 14, 11, 13, 10, 14, 11, 13, 11, 12, 11, 12.1, 12.2, 11.5, 11.7, 11.3, 12.7,
+								13, 12.8
+							],
+							color: '#4BB94B',
+							textColor: '#FFFFFF',
+							textSize: this.seriesTextSize,
+							format: (val) => {
+								return val + "kwh"
+							},
+							index: 0,
+							legendShape: "circle"
+						},
+						{
+							name: '风速',
+							data: [21, 22, 21, 22, 21, 22, 21, 22, 21, 22, 21, 22, 21, 22, 21, 22, 21, 22.1, 22.2, 21.5, 21.7, 21.3, 22.7,
+								23, 22.8
+							],
+							color: '#E82E2F',
+							textColor: '#FFFFFF',
+							textSize: this.seriesTextSize,
+							format: (val) => {
+								return val + 'km/h'
+							},
+							index: 1,
+							legendShape: "circle"
+						}, {
+							name: '理论功率',
+							data: [31, 32, 31, 32, 31, 32, 31, 32, 31, 32, 31, 32, 31, 32, 31, 32, 31, 32.1, 32.2, 31.5, 31.7, 31.3, 32.7,
+								33, 32.8
+							],
+							color: '#F5A83C',
+							textColor: '#FFFFFF',
+							textSize: this.seriesTextSize,
+							format: (val) => {
+								return val + 'kwh'
+							},
+							index: 0,
+							legendShape: "circle"
+						},
+						{
+							name: '预测功率',
+							data: [1, 2, 1, 2, 1, 2, 1, 2, 1, 2, 1, 2, 1, 2, 1, 2, 1, 2.1, 2.2, 1.5, 1.7, 1.3, 2.7, 3, 2.8],
+							color: '#4A80B1',
+							textColor: '#FFFFFF',
+							textSize: this.seriesTextSize,
+							format: (val) => {
+								return val + 'kwh'
+							},
+							index: 1,
+							legendShape: "circle"
+						}
+					]
+				};
+
+				this.showLineA("canvasLineA", LineA);
+			},
+			
+			showLineA(canvasId, chartData) {
+				canvaLineA = new uCharts({
+					$this: _self,
+					canvasId: canvasId,
+					type: 'line',
+
+					fontSize: 11,
+					legend: {
+						show: true,
+						position: "top",
+						float: "right",
+						fontColor: "silver",
+						itemGap: "4",
+						itemWidth: "3"
+					},
+					dataLabel: false,
+					dataPointShape: false,
+					background: '#FFFFFF',
+					pixelRatio: _self.pixelRatio,
+					categories: chartData.categories,
+					series: chartData.series,
+					animation: true,
+					xAxis: {
+						type: 'grid',
+						gridColor: 'silver',
+						fontColor: 'silver',
+						gridType: 'solid',
+						gridColor: '#2E2E2E',
+						axisLineColor: "#2E2E2E",
+						labelCount: "3",
+						// itemCount:"3"
+					},
+					yAxis: {
+						data: [{
+								type: "value",
+								fontColor: 'silver',
+								disabled: false, //y轴轴线
+								min: 0,
+								max: 40,
+								position: "left",
+								axisLineColor: "#2E2E2E",
+								title: "         风速:(km/h)",
+								titleFontColor: "silver"
+							},
+							{
+								fontColor: "silver",
+								disabled: false, //y轴轴线	
+								min: 0,
+								max: 40,
+								position: "right",
+								axisLineColor: "#2E2E2E",
+								title: "功率:(kwh)",
+								titleFontColor: "silver"
+							}
+						],
+
+						gridColor: "#2E2E2E",
+						splitNumber: 4,
+						gridType: 'solid',
+						dashLength: 8,
+						showTitle: "true",
+						format: (val) => {
+							return val.toFixed(0) + '元'
+						},
+
+					},
+					width: _self.cWidth * _self.pixelRatio,
+					height: _self.cHeight * _self.pixelRatio,
+					extra: {
+						line: {
+							type: 'line',
+							width: '1',
+						}
+					}
+				});
+
+			},
+			getColumnData() {
+				let ColumnStack = {
+					"categories": ["04/12", "04/13", "04/14", "04/15", "04/16", "04/17","04/18","04/19","04/20"],
+					"series": [{
+						"name": "类别一",
+						"data": [18, 13, 12, 17, 13, 7,11,15,13]
+					}, {
+						"name": "类别二",
+						"data": [17, 15, 17, 21, 6, 8,10,17,11]
+					}, {
+						"name": "类别三",
+						"data": [14, 17, 19, 20, 6, 4,12,4,5]
+					},
+					{
+						"name": "类别三",
+						"data": [14, 17, 19, 20, 6, 4,12,4,5]
+					},
+					{
+						"name": "类别三",
+						"data": [14, 17, 19, 20, 6, 4,12,4,5]
+					}]
+				}
+				this.showColumnStack("canvasColumnStack", ColumnStack);
+			},
+			showColumnStack(canvasId, chartData) {
+				canvaColumn = new uCharts({
+					$this: _self,
+					canvasId: canvasId,
+					type: 'column',
+					legend: {
+						show:false
+					},
+					fontSize: 11,
+					background: '#FFFFFF',
+					pixelRatio: _self.pixelRatio,
+					animation: true,
+					categories: chartData.categories,
+					series: chartData.series,
+					xAxis: {
+						disableGrid: true,
+					},
+					yAxis: {
+						data: [{
+								type: "value",
+								fontColor: 'silver',
+								disabled: false, //y轴轴线
+								min: 0,
+								max: 60,
+								position: "left",
+								axisLineColor: "#2E2E2E",
+								title: "         风速:(km/h)",
+								titleFontColor: "silver"
+							}
+						],
+						gridColor: "#2E2E2E",
+						splitNumber: 4,
+						gridType: 'solid',
+						dashLength: 8,
+						showTitle: "true",
+						//disabled:true
+					},
+					dataLabel: true,
+					width: _self.cWidth * _self.pixelRatio,
+					height: _self.cHeight * _self.pixelRatio,
+					extra: {
+						column: {
+							type: 'stack',
+							width: _self.cWidth * _self.pixelRatio * 0.5 / chartData.categories.length
+						}
+					}
+				});
+			},
+			touchColumn(e) {
+				canvaColumn.showToolTip(e, {
+					format: function(item, category) {
+						return category + ' ' + item.name + ':' + item.data
+					}
+				});
+			},
+			touchLineA(e) {
+				canvaLineA.showToolTip(e, {
+					format: function(item, category) {
+						return category + ' ' + item.name + ':' + item.data
+					}
+				});
+			},
+			moveLineA(e) {
+				canvaLineA.scroll(e);
+			},
 		}
 	};
 </script>
 
 <style>
-	.cardinstalltitleRed{
-		width: 100%;
-		height: 25px;
-		margin-left: 45px;
-		user-select: text;
-		   -webkit-user-select: text;
-		   -moz-user-select: text;
-		   -ms-user-select: text;
-		font-size:14px;
-		color: silver;
-		line-height: 25px;
-		float: left;
-	}
-	.textWhitekuangSpeed{
-		color: white;
-		float: right;
-		margin-right: 70px;
-	}
-	.textWhitekuang{
-		color: white;
-		float: right;
-		margin-right: 85px;
-	}
-	.textWhite{
-		color: white;
-		float: left;
-		
-	}
-	.textSilver{
+	.speedPowerDiagram {
+		width: 100px;
+		height: 30px;
 		user-select: text;
 		-webkit-user-select: text;
 		-moz-user-select: text;
 		-ms-user-select: text;
 		color: silver;
 		float: left;
+		margin-top: 18px;
+		margin-left: 9px;
+		font-size: 11px;
 	}
-	.InformationCard{
-		margin-top: 10px;
-		width: 100%;
-		height: 70px;
-		background-color: #242424;
-		float: left;
-	}
-	.informationCardAll{
-		width: 100%;
-		margin-top: 10px;
-		height: 60px;
-		float: left;
+
+	.qiun-charts {
+		width: 750upx;
+		height: 500upx;
 	}
-	.informationCardTextOne{
-		width: 100%;
-		height: 35px;
-		float: left;
+
+	.charts {
+		width: 750upx;
+		height: 500upx;
 	}
-	.informationCardText{
-		margin-left: 15px;
-		width: 110px;
-		height: 35px;
-		line-height: 35px;
+
+	.uchartTitle {
+		position: absolute;
+		left: 9px;
+		top: 605px;
 		user-select: text;
 		-webkit-user-select: text;
 		-moz-user-select: text;
 		-ms-user-select: text;
 		color: silver;
 		font-size: 12px;
-		float: left;
 	}
-	.informationCardTextzj{
-		margin-left: 141px;
-		width: 100px;
-		height: 35px;
-		line-height: 35px;
-		user-select: text;
-		-webkit-user-select: text;
-		-moz-user-select: text;
-		-ms-user-select: text;
-		color: silver;
-		font-size: 12px;
+
+	.Histogram {
+		width: 100%;
+		height: 250px;
+		background-color: #242424;
+		margin-top: 10px;
 		float: left;
 	}
-	.informationCardTextTwo{
+
+	.lineChart {
 		width: 100%;
-		height: 35px;
+		height: 200px;
+		background-color: #242424;
+		margin-top: 10px;
 		float: left;
-		user-select: text;
-		-webkit-user-select: text;
-		-moz-user-select: text;
-		-ms-user-select: text;
-		color: silver;
 	}
-	.informationCardText2{
-		margin-left: 15px;
-		width: 110px;
-		height: 35px;
-		font-size: 12px;
-		line-height: 35px;
-		float: left;
+
+	body {
+		font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Helvetica Neue", STHeiti, "Microsoft Yahei", Tahoma, Simsun, sans-serif;
+		font-size: 20px;
+		color: silver;
+		background: #000;
 	}
-	body{
-	font-family: -apple-system, BlinkMacSystemFont, "PingFang SC","Helvetica Neue",STHeiti,"Microsoft Yahei",Tahoma,Simsun,sans-serif;
-	font-size:20px;
-	color: silver;
-	background: #000; 
-	 }
-	
+
 	page {
 		background-color: #1F1F1F;
+		overflow-x: hidden;
 	}
 
 	.top {
@@ -245,9 +577,9 @@
 		height: 45px;
 		float: left;
 		user-select: text;
-		   -webkit-user-select: text;
-		   -moz-user-select: text;
-		   -ms-user-select: text;
+		-webkit-user-select: text;
+		-moz-user-select: text;
+		-ms-user-select: text;
 		color: silver;
 		line-height: 45px;
 		text-align: center;
@@ -293,9 +625,9 @@
 		font-size: 15px;
 		margin-left: 15px;
 		user-select: text;
-		   -webkit-user-select: text;
-		   -moz-user-select: text;
-		   -ms-user-select: text;
+		-webkit-user-select: text;
+		-moz-user-select: text;
+		-ms-user-select: text;
 		color: silver;
 	}
 
@@ -318,192 +650,210 @@
 		text-align: center;
 		font-size: 12px;
 	}
-	.cardinstallgreenSecurity{
+
+	.cardinstallgreenSecurity {
 		margin-left: 9px;
 		margin-top: 9px;
 		margin-bottom: 9px;
 		width: 30%;
 		height: 78px;
-		background: -webkit-linear-gradient(top, rgba(133,145,132,0.1)0%,rgba(66,130,61,0.2)100%);
+		background: -webkit-linear-gradient(top, rgba(133, 145, 132, 0.1)0%, rgba(66, 130, 61, 0.2)100%);
 		border-radius: 5px;
 		float: left;
 		/* font-family: "STKaiti"; */
 	}
-	.cardinstalltitle{
+
+	.cardinstalltitle {
 		width: 100%;
 		height: 40px;
 		text-align: center;
 		user-select: text;
-		   -webkit-user-select: text;
-		   -moz-user-select: text;
-		   -ms-user-select: text;
-		font-size:14px;
+		-webkit-user-select: text;
+		-moz-user-select: text;
+		-ms-user-select: text;
+		font-size: 14px;
 		color: silver;
 		line-height: 40px;
 		float: left;
-		
+
 	}
-	.cardinstallnumber{
+
+	.cardinstallnumber {
 		/* font-weight: bold; */
 		width: 100%;
 		height: 40px;
 		text-align: center;
 		user-select: text;
-		   -webkit-user-select: text;
-		   -moz-user-select: text;
-		   -ms-user-select: text;
+		-webkit-user-select: text;
+		-moz-user-select: text;
+		-ms-user-select: text;
 		color: silver;
-		font-size:16px;
+		font-size: 16px;
 		/* color: #449618; */
 		line-height: 40px;
 	}
-	.cardinstallgreenEquipment{
+
+	.cardinstallgreenEquipment {
 		margin-right: 11px;
 		margin-top: 10px;
 		width: 30%;
 		height: 78px;
-		background: -webkit-linear-gradient(top, rgba(159,131,111,0.1)0%,rgba(193,94,21,0.2)100%);
+		background: -webkit-linear-gradient(top, rgba(159, 131, 111, 0.1)0%, rgba(193, 94, 21, 0.2)100%);
 		border-radius: 5px;
 		float: right;
 		/* font-family: "STKaiti"; */
 	}
-	.cardinstallgreen{
+
+	.cardinstallgreen {
 		margin-left: 9px;
 		width: 30%;
 		height: 78px;
-		background: -webkit-linear-gradient(top, rgba(133,145,132,0.1)0%,rgba(66,130,61,0.2)100%);
+		background: -webkit-linear-gradient(top, rgba(133, 145, 132, 0.1)0%, rgba(66, 130, 61, 0.2)100%);
 		border-radius: 5px;
 		float: left;
 	}
-	.cardinstallblue{
+
+	.cardinstallblue {
 		margin-top: 9px;
 		margin-left: 9px;
 		width: 30%;
 		height: 78px;
-		background: -webkit-linear-gradient(top, rgba(159,131,111,0.1)0%,rgba(10,82,156,0.2)100%);
+		background: -webkit-linear-gradient(top, rgba(159, 131, 111, 0.1)0%, rgba(10, 82, 156, 0.2)100%);
 		border-radius: 5px;
 		float: left;
 	}
-	.cardinstallblueright{
+
+	.cardinstallblueright {
 		margin-right: 11px;
 		margin-top: 10px;
 		width: 30%;
 		height: 78px;
-		background: -webkit-linear-gradient(top, rgba(159,131,111,0.1)0%,rgba(10,82,156,0.2)100%);
+		background: -webkit-linear-gradient(top, rgba(159, 131, 111, 0.1)0%, rgba(10, 82, 156, 0.2)100%);
 		border-radius: 5px;
 		float: right;
 	}
-	.cardinstalltitlegreen{
+
+	.cardinstalltitlegreen {
 		width: 100%;
 		height: 25px;
 		margin-left: 37px;
 		user-select: text;
-		   -webkit-user-select: text;
-		   -moz-user-select: text;
-		   -ms-user-select: text;
-		font-size:14px;
+		-webkit-user-select: text;
+		-moz-user-select: text;
+		-ms-user-select: text;
+		font-size: 14px;
 		color: silver;
 		line-height: 25px;
 		float: left;
 	}
-	.cardinstallnumbergreen{
+
+	.cardinstallnumbergreen {
 		width: 100%;
 		height: 25px;
 		text-align: center;
 		user-select: text;
-		   -webkit-user-select: text;
-		   -moz-user-select: text;
-		   -ms-user-select: text;
-		font-size:20px;
+		-webkit-user-select: text;
+		-moz-user-select: text;
+		-ms-user-select: text;
+		font-size: 20px;
 		color: silver;
 		/* color: #449618; */
 		line-height: 25px;
 		float: left;
 	}
-	.cardinstallnumbergreenmin{
+
+	.cardinstallnumbergreenmin {
 		margin-left: 2px;
 		width: 45%;
 		height: 20px;
 		user-select: text;
-		   -webkit-user-select: text;
-		   -moz-user-select: text;
-		   -ms-user-select: text;
-		font-size:12px;
+		-webkit-user-select: text;
+		-moz-user-select: text;
+		-ms-user-select: text;
+		font-size: 12px;
 		color: silver;
 		/* color: #449618; */
 		float: left;
 	}
-	.cardinstallnumbergreenmax{
+
+	.cardinstallnumbergreenmax {
 		/* font-weight: bold; */
 		margin-right: 2px;
 		width: 45%;
 		height: 20px;
 		user-select: text;
-		   -webkit-user-select: text;
-		   -moz-user-select: text;
-		   -ms-user-select: text;
-		font-size:12px;
+		-webkit-user-select: text;
+		-moz-user-select: text;
+		-ms-user-select: text;
+		font-size: 12px;
 		color: silver;
 		/* color: #449618; */
 		float: right;
 	}
-	.greenMinText{
+
+	.greenMinText {
 		line-height: 20px;
 		float: right;
 	}
-	.greenMaxText{
+
+	.greenMaxText {
 		line-height: 20px;
 		float: left;
 	}
 
-	.cardinstallnumberred{
+	.cardinstallnumberred {
 		width: 100%;
 		height: 25px;
 		text-align: center;
 		user-select: text;
-		   -webkit-user-select: text;
-		   -moz-user-select: text;
-		   -ms-user-select: text;
-		font-size:20px;
+		-webkit-user-select: text;
+		-moz-user-select: text;
+		-ms-user-select: text;
+		font-size: 20px;
 		color: silver;
 		/* color: #E93131; */
 		line-height: 25px;
 		float: left;
 	}
-	.cardinstallnumberredmin{
+
+	.cardinstallnumberredmin {
 		margin-left: 2px;
 		width: 45%;
 		height: 20px;
 		user-select: text;
-		   -webkit-user-select: text;
-		   -moz-user-select: text;
-		   -ms-user-select: text;
-		font-size:12px;
+		-webkit-user-select: text;
+		-moz-user-select: text;
+		-ms-user-select: text;
+		font-size: 12px;
 		color: silver;
 		/* color: #E93131; */
 		float: left;
 	}
-	.cardinstallnumberredmax{
+
+	.cardinstallnumberredmax {
 		margin-right: 2px;
 		width: 45%;
 		height: 20px;
 		user-select: text;
-		   -webkit-user-select: text;
-		   -moz-user-select: text;
-		   -ms-user-select: text;
-		font-size:12px;
+		-webkit-user-select: text;
+		-moz-user-select: text;
+		-ms-user-select: text;
+		font-size: 12px;
 		color: silver;
 		/* color: #E93131; */
 		float: right;
 	}
-	.redMinText{
+
+	.redMinText {
 		line-height: 20px;
 		float: right;
 	}
-	.redMaxText{
+
+	.redMaxText {
 		line-height: 20px;
 		float: left;
 	}
+
 	.electricityCard {
 		width: 100%;
 		height: 100px;
@@ -511,32 +861,284 @@
 		/* height: 185px; */
 		float: left;
 		margin-top: 20rpx;
-		
+
 	}
-	.speedPower{
+
+	.speedPower {
 		width: 100%;
 		height: 180px;
 		background-color: #242424;
 		float: left;
 		margin-top: 20rpx;
 	}
-	.cardinstallgreenSpeed{
+
+	.cardinstallgreenSpeed {
 		margin-top: 9px;
 		margin-left: 9px;
 		width: 46%;
 		height: 78px;
-		background: -webkit-linear-gradient(top, rgba(133,145,132,0.1)0%,rgba(66,130,61,0.2)100%);
+		background: -webkit-linear-gradient(top, rgba(133, 145, 132, 0.1)0%, rgba(66, 130, 61, 0.2)100%);
 		border-radius: 5px;
 		float: left;
 	}
-	.cardinstallredSpeed{
+
+	.cardinstallredSpeed {
 		margin-top: 8px;
 		margin-left: 9px;
 		width: 46%;
 		height: 78px;
-		background: -webkit-linear-gradient(top, rgba(159,131,111,0.1)0%,rgba(193,94,21,0.2)100%);
+		background: -webkit-linear-gradient(top, rgba(159, 131, 111, 0.1)0%, rgba(193, 94, 21, 0.2)100%);
 		border-radius: 5px;
 		float: left;
 	}
-	
+
+	.cardinstalltitleRed {
+		width: 100%;
+		height: 25px;
+		margin-left: 45px;
+		user-select: text;
+		-webkit-user-select: text;
+		-moz-user-select: text;
+		-ms-user-select: text;
+		font-size: 14px;
+		color: silver;
+		line-height: 25px;
+		float: left;
+	}
+
+	.textWhitekuangSpeed {
+		color: white;
+		float: right;
+		margin-right: 70px;
+	}
+
+	.textWhitekuang {
+		color: white;
+		float: right;
+		margin-right: 85px;
+	}
+
+	.textWhite {
+		color: white;
+		float: left;
+
+	}
+
+	.textSilver {
+		user-select: text;
+		-webkit-user-select: text;
+		-moz-user-select: text;
+		-ms-user-select: text;
+		color: silver;
+		float: left;
+	}
+
+	.InformationCard {
+		margin-top: 10px;
+		width: 100%;
+		height: 70px;
+		background-color: #242424;
+		float: left;
+	}
+
+	.informationCardAll {
+		width: 100%;
+		margin-top: 10px;
+		height: 60px;
+		float: left;
+	}
+
+	.informationCardTextOne {
+		width: 100%;
+		height: 35px;
+		float: left;
+	}
+
+	.informationCardText {
+		margin-left: 15px;
+		width: 110px;
+		height: 35px;
+		line-height: 35px;
+		user-select: text;
+		-webkit-user-select: text;
+		-moz-user-select: text;
+		-ms-user-select: text;
+		color: silver;
+		font-size: 12px;
+		float: left;
+	}
+
+	.informationCardTextzj {
+		margin-left: 141px;
+		width: 100px;
+		height: 35px;
+		line-height: 35px;
+		user-select: text;
+		-webkit-user-select: text;
+		-moz-user-select: text;
+		-ms-user-select: text;
+		color: silver;
+		font-size: 12px;
+		float: left;
+	}
+
+	.informationCardTextTwo {
+		width: 100%;
+		height: 35px;
+		float: left;
+		user-select: text;
+		-webkit-user-select: text;
+		-moz-user-select: text;
+		-ms-user-select: text;
+		color: silver;
+	}
+
+	.informationCardText2 {
+		margin-left: 15px;
+		width: 110px;
+		height: 35px;
+		font-size: 12px;
+		line-height: 35px;
+		float: left;
+	}
+
+	.AccessCardNumber {
+		width: 30%;
+		height: 35px;
+		float: left;
+		line-height: 35px;
+		text-align: center;
+		font-size: 12px;
+		user-select: text;
+		-webkit-user-select: text;
+		-moz-user-select: text;
+		-ms-user-select: text;
+		color: silver;
+	}
+
+	.AccessCardText {
+		width: 30%;
+		height: 35px;
+		float: left;
+		line-height: 35px;
+		text-align: center;
+		font-size: 12px;
+		user-select: text;
+		-webkit-user-select: text;
+		-moz-user-select: text;
+		-ms-user-select: text;
+		color: silver;
+	}
+
+	.AccessCardimage {
+		margin-left: 5px;
+		width: 30%;
+		height: 35px;
+		float: left;
+	}
+
+	.interfaceCard {
+		margin-top: 10px;
+		width: 100%;
+		height: 85px;
+		background-color: #242424;
+		float: left;
+	}
+
+	.interfaceCardSmallTop {
+		margin-top: 5px;
+		width: 100%;
+		height: 35px;
+		float: left;
+	}
+
+	.interfaceCardSmall {
+		margin-left: 8px;
+		width: 30%;
+		height: 35px;
+		float: left;
+	}
+
+	.progressBarLeftText {
+		user-select: text;
+		-webkit-user-select: text;
+		-moz-user-select: text;
+		-ms-user-select: text;
+		color: silver;
+		font-size: 12px;
+		float: left;
+		margin-left: 5px;
+	}
+
+	.progressBarRightText {
+		user-select: text;
+		-webkit-user-select: text;
+		-moz-user-select: text;
+		-ms-user-select: text;
+		color: silver;
+		font-size: 12px;
+		float: right;
+		margin-right: 5px;
+	}
+
+	.progressBar {
+		margin-top: 10px;
+		width: 100%;
+		height: 115px;
+		background-color: #242424;
+		float: left;
+	}
+
+	.progressBarAll {
+		margin-left: 9px;
+		width: 355px;
+		height: 60px;
+		float: left;
+	}
+
+	.progressBarText {
+		text-align: center;
+		width: 50%;
+		height: 30px;
+		line-height: 30px;
+		user-select: text;
+		-webkit-user-select: text;
+		-moz-user-select: text;
+		-ms-user-select: text;
+		color: silver;
+		font-size: 12px;
+		float: left;
+	}
+
+	.progressBarOne {
+		width: 100%;
+		height: 30px;
+		float: left;
+	}
+
+	.progressBarLeft {
+		width: 25%;
+		height: 30px;
+		line-height: 30px;
+		user-select: text;
+		-webkit-user-select: text;
+		-moz-user-select: text;
+		-ms-user-select: text;
+		color: silver;
+		font-size: 12px;
+		float: left;
+	}
+
+	.progressBarRight {
+		width: 25%;
+		height: 30px;
+		user-select: text;
+		-webkit-user-select: text;
+		-moz-user-select: text;
+		-ms-user-select: text;
+		color: silver;
+		font-size: 12px;
+		line-height: 30px;
+		float: right;
+	}
 </style>