sisMobilePhone/pages/index/Index.vue

<template>
	<view class="content">
		<view class="top">
			<view class="threeLine" @tap="openDrawer">
				<image src="../../static/picture/fourLine.png" style="width: 30px;height: 30px;margin-top: 8px;margin-left: 10px;"></image>
			</view>
			<view class="text">
				<view class="notice">
					<view class="icon cuIcon-notice text-white" v-if="badge != 0">
						<view class="cu-tag looknumber">
							<block v-if="badge != 1">{{ badge > 99 ? '99+' : badge }}</block>
						</view>
					</view>
				</view>
				宁夏新能源公司
			</view>
			<view class="plus">+</view>
		</view>
		<!-- 抽屉组件 -->
		<div>
			<drawer ref="drawer"></drawer>
		</div>
		<!--时间组件-->
		<view class="time">
			<view class="timeimageshizhong">
				<image src="../../static/picture/dafeng.png" style="width: 20px;height: 20px;margin-left: 10px;"></image>
			</view>
			<view class="timeText">
				推荐时间：2020年4月15日ㅤ19:31</view>
			<view class="timeIcon">
				<image src="../../static/picture/qingwhite.png" style="width: 25px;height: 25px;margin-left: 54px;"></image>
			</view>
		</view>
		<!--电量卡片-->
		<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>
		</view>
		<!--风速卡片-->
		<view class="speedPower">
			<view class="cardinstallredSpeed">
				<view class="cardinstalltitlegreen">平均风速<view class="textWhitekuangSpeed">(km/h)</view>
				</view>
				<view class="cardinstallnumbergreen">5</view>
				<view class="cardinstallnumbergreenmin">
					<view class="greenMinText">min: 5</view>
				</view>
				<view class="cardinstallnumbergreenmax">
					<view class="greenMaxText">max: 25</view>
				</view>
			</view>
			<view class="cardinstallredSpeed">
				<view class="cardinstalltitlegreen">预测风速<view class="textWhitekuangSpeed">(km/h)</view>
				</view>
				<view class="cardinstallnumbergreen">48</view>
				<view class="cardinstallnumbergreenmin">
					<view class="greenMinText">min: 4</view>
				</view>
				<view class="cardinstallnumbergreenmax">
					<view class="greenMaxText">max: 26</view>
				</view>
			</view>
			<view class="cardinstallredSpeed">
				<view class="cardinstalltitleRed">实际功率<view class="textWhitekuang">(kw)</view>
				</view>
				<view class="cardinstallnumberred">15</view>
				<view class="cardinstallnumberredmin">
					<view class="redMinText">min: 566</view>
				</view>
				<view class="cardinstallnumberredmax">
					<view class="redMaxText">max: 656</view>
				</view>
			</view>
			<view class="cardinstallredSpeed">
				<view class="cardinstalltitleRed">理论功率<view class="textWhitekuang">(kw)</view>
				</view>
				<view class="cardinstallnumberred">14</view>
				<view class="cardinstallnumberredmin">
					<view class="redMinText">min: 589</view>
				</view>
				<view class="cardinstallnumberredmax">
					<view class="redMaxText">max: 674</view>
				</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>
		<scroll-view scroll-x class="horizontalSlider">
			<view class="slide">
			<view class="monthlyUtilizationHours">月利用小时（h）：13</view>
			<view class="yearlyUtilizationHours">年利用小时（h）：13</view>
			<view class="comprehensiveServicePowerConsumptionRate">综合厂用电率(%)：20</view>
			<view class="equipmentAvailability">设备可利用率(%)：90</view>
			<view class="sulfurDioxideEmissionReduction">减排二氧化硫(吨)：21</view>
			<view class="carbonDioxideReduction">减排二氧化碳(吨)：5</view>
			<view class="waterSaving">节约用水(吨)：15</view>
			<view class="saveStandardCoal">节约标煤(吨)：35</view>
			<view class="mttr">mttr(h)：22</view>
			<view class="mtbf">mtbf(h)：24</view>
			</view>
		</scroll-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 uCharts from '../../components/tools/u-charts/u-charts.js';
	var _self;
	var canvaLineA = null;
	var canvaColumn = null;
	export default {
		components: {
			"drawer": drawer,
		},
		data: function() {
			return {
				badge: 22,
				drawerList: ["状态监视", "矩阵监视", "风场监视", "人员监视"],
				inconList: ["form", "favor", "question", "edit"],
				minaverageSpeed: '12',
				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>
	.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;
	}
	.monthlyUtilizationHours{
		width: 160px;
		height: 30px;
		margin-top: 20px;
		/* background-color: #161616; */
		background: -webkit-linear-gradient(top, rgba(159, 131, 111, 0.1)0%, rgba(193, 94, 21, 0.2)100%);
		color: silver;
		margin-left: 20px;
		text-align: center;
		padding-top: 5px;
	}
	.yearlyUtilizationHours{
		width: 160px;
		height: 30px;
		margin-top: 10px;
		/* background-color: #161616; */
		background: -webkit-linear-gradient(top, rgba(159, 131, 111, 0.1)0%, rgba(193, 94, 21, 0.2)100%);
		color: silver;
		margin-left: 20px;
		text-align: center;
		padding-top: 5px;
	}
	.comprehensiveServicePowerConsumptionRate{
		width: 160px;
		height: 30px;
		/* margin-top: 10px; */
		/* background-color: #161616; */
		background: -webkit-linear-gradient(top, rgba(159, 131, 111, 0.1)0%, rgba(193, 94, 21, 0.2)100%);
		color: silver;
		margin-left: 200px;
		margin-top: -70px;
		text-align: center;
		padding-top: 5px;
		float: left;
	}
	.equipmentAvailability{
		width: 160px;
		height: 30px;
		/* margin-top: 10px; */
		/* background-color: #161616; */
		background: -webkit-linear-gradient(top, rgba(159, 131, 111, 0.1)0%, rgba(193, 94, 21, 0.2)100%);
		color: silver;
		margin-left: 200px;
		margin-top: -30px;
		text-align: center;
		padding-top: 5px;
		float: left;
	}
	.sulfurDioxideEmissionReduction{
		width: 160px;
		height: 30px;
		/* margin-top: 10px; */
		/* background-color: #161616; */
		background: -webkit-linear-gradient(top, rgba(159, 131, 111, 0.1)0%, rgba(193, 94, 21, 0.2)100%);
		color: silver;
		margin-left: 380px;
		margin-top: -70px;
		text-align: center;
		padding-top: 5px;
		float: left;
	}
	.carbonDioxideReduction{
		width: 160px;
		height: 30px;
		/* margin-top: 10px; */
		/* background-color: #161616; */
		background: -webkit-linear-gradient(top, rgba(159, 131, 111, 0.1)0%, rgba(193, 94, 21, 0.2)100%);
		color: silver;
		margin-left: 380px;
		margin-top: -30px;
		text-align: center;
		padding-top: 5px;
		float: left;
		}
		.waterSaving{
			width: 160px;
			height: 30px;
			/* margin-top: 10px; */
			/* background-color: #161616; */
			background: -webkit-linear-gradient(top, rgba(159, 131, 111, 0.1)0%, rgba(193, 94, 21, 0.2)100%);
			color: silver;
			margin-left: 560px;
			margin-top: -70px;
			text-align: center;
			padding-top: 5px;
			float: left;
		}
		.saveStandardCoal{
			width: 160px;
			height: 30px;
			/* margin-top: 10px; */
			/* background-color: #161616; */
			background: -webkit-linear-gradient(top, rgba(159, 131, 111, 0.1)0%, rgba(193, 94, 21, 0.2)100%);
			color: silver;
			margin-left: 560px;
			margin-top: -30px;
			text-align: center;
			padding-top: 5px;
			float: left;
		}
		.mttr{
			width: 160px;
			height: 30px;
			/* margin-top: 10px; */
			/* background-color: #161616; */
			background: -webkit-linear-gradient(top, rgba(159, 131, 111, 0.1)0%, rgba(193, 94, 21, 0.2)100%);
			color: silver;
			margin-left: 740px;
			margin-top: -70px;
			text-align: center;
			padding-top: 5px;
			float: left;
			
		}
		.mtbf{
			width: 160px;
			height: 30px;
			/* margin-top: 10px; */
			/* background-color: #161616; */
			background: -webkit-linear-gradient(top, rgba(159, 131, 111, 0.1)0%, rgba(193, 94, 21, 0.2)100%);
			color: silver;
			margin-left: 740px;
			margin-top: -30px;
			text-align: center;
			padding-top: 5px;
			float: left;
		}
.horizontalSlider{
	white-space: nowrap;
	width: 100%;
	height: 100px;
	background-color: #242424;
	margin-top: 540px;
}
.slide{
	width: 920px;
	height: 100px;
	background-color: #242424;
}
	.qiun-charts {
		width: 750upx;
		height: 500upx;
	}

	.charts {
		width: 750upx;
		height: 500upx;
	}

	.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;
	}

	.Histogram {
		width: 100%;
		height: 250px;
		background-color: #242424;
		margin-top: 10px;
		float: left;
	}

	.lineChart {
		width: 100%;
		height: 200px;
		background-color: #242424;
		margin-top: 10px;
		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;
	}

	page {
		background-color: #1F1F1F;
		overflow-x: hidden;
	}

	.top {
		width: 100%;
		height: 95upx;
		padding-top: 5upx;
		background-color: #1F1F1F;
	}

	.threeLine {
		width: 50px;
		height: 45px;
		float: left;
	}

	.text {
		width: calc(100% - 100px);
		height: 45px;
		float: left;
		user-select: text;
		-webkit-user-select: text;
		-moz-user-select: text;
		-ms-user-select: text;
		color: silver;
		line-height: 45px;
		text-align: center;
		font-size: 18px;
	}

	.notice {
		width: 50px;
		height: 45px;
		float: left;
	}

	.plus {
		width: 50px;
		height: 45px;
		float: right;
		color: white;
		font-size: 35px;
		line-height: 45px;
		text-align: center;
	}

	.time {
		background-color: #242424;
		margin-top: 10px;
		width: 100%;
		height: 30px;
		float: left;
	}

	.timeimageshizhong {
		width: 30px;
		height: 20px;
		margin-top: 5px;
		float: left;
	}

	.timeText {
		width: 62%;
		height: 30px;
		float: left;
		line-height: 30px;
		font-size: 15px;
		margin-left: 15px;
		user-select: text;
		-webkit-user-select: text;
		-moz-user-select: text;
		-ms-user-select: text;
		color: silver;
	}

	.timeIcon {
		width: 21%;
		height: 30px;
		float: left;
		margin-left: 5px;
	}

	.timeIconImage {
		width: 100%;
		height: 25px;
		margin-top: 1px;
	}

	.timeIconText {
		width: 100%;
		height: 25px;
		text-align: center;
		font-size: 12px;
	}

	.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%);
		border-radius: 5px;
		float: left;
		/* font-family: "STKaiti"; */
	}

	.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;
		color: silver;
		line-height: 40px;
		float: left;

	}

	.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;
		color: silver;
		font-size: 16px;
		/* color: #449618; */
		line-height: 40px;
	}

	.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%);
		border-radius: 5px;
		float: right;
		/* font-family: "STKaiti"; */
	}

	.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%);
		border-radius: 5px;
		float: left;
	}

	.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%);
		border-radius: 5px;
		float: left;
	}

	.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%);
		border-radius: 5px;
		float: right;
	}

	.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;
		color: silver;
		line-height: 25px;
		float: left;
	}

	.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;
		color: silver;
		/* color: #449618; */
		line-height: 25px;
		float: left;
	}

	.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;
		color: silver;
		/* color: #449618; */
		float: left;
	}

	.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;
		color: silver;
		/* color: #449618; */
		float: right;
	}

	.greenMinText {
		line-height: 20px;
		float: right;
	}

	.greenMaxText {
		line-height: 20px;
		float: left;
	}

	.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;
		color: silver;
		/* color: #E93131; */
		line-height: 25px;
		float: left;
	}

	.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;
		color: silver;
		/* color: #E93131; */
		float: left;
	}

	.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;
		color: silver;
		/* color: #E93131; */
		float: right;
	}

	.redMinText {
		line-height: 20px;
		float: right;
	}

	.redMaxText {
		line-height: 20px;
		float: left;
	}

	.electricityCard {
		width: 100%;
		height: 100px;
		background-color: #242424;
		/* height: 185px; */
		float: left;
		margin-top: 20rpx;

	}

	.speedPower {
		width: 100%;
		height: 180px;
		background-color: #242424;
		float: left;
		margin-top: 20rpx;
	}

	.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%);
		border-radius: 5px;
		float: left;
	}

	.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%);
		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>