首页样式修改

pages/index/Index.vue

@@ -137,15 +137,15 @@
 					<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 class="AccessCardText">待机</view>
+					<view class="AccessCardNumber">10</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 class="AccessCardText">运行</view>
+					<view class="AccessCardNumber">29</view>
 				</view>
 			</view>
 			<view class="interfaceCardSmallTop">
@@ -153,8 +153,8 @@
 					<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 class="AccessCardText">故障</view>
+					<view class="AccessCardNumber">18</view>
 				</view>
 				<view class="interfaceCardSmall">
 					<view class="AccessCardimage">
@@ -268,7 +268,7 @@
 		<view class="windStation">
 			<scroll-view scroll-x class="scrollWindStationCard">
 				<view class="windStationCardContainer">
-					<view class="windStationCard" @tap="common.navTo('/components/windStationCardDetail/WindStationCardDetail?option=' + '麻黄山风电场')">
+					<view class="windStationCard" @tap="common.navTo('/components/windStationCardDetail/WindStationCardDetail?option=' + '麻黄山')">
 						<view class="windStationTitle">麻黄山风电场</view>
 						<view class="powerAndSpeedContainer">
 							<view class="powerAndSpeedRed">
@@ -298,8 +298,9 @@
 								</view> -->
 						<view class="UChartContainer">
 							<view class="windStationUChart">
-								<view class="windStationQiun-charts"><canvas canvas-id="windStationCanvasLineA" id="windStationCanvasLineA"
-									 class="windStationCharts"></canvas></view>
+								<view class="windStationQiun-charts">
+									<canvas canvas-id="windStationCanvasLineA" id="windStationCanvasLineA" class="windStationCharts" @touchstart="touchLineB1"></canvas>
+								</view>
 							</view>
 							<view class="UChartTitle">风速功率曲线图</view>
 							<!-- <view class="xTime">时间</view> -->
@@ -316,19 +317,19 @@
 								<view class="statusIcon">
 									<image src="../../static/picture/002.png" style="width: 16px;height: 16px;margin-top: 7px;"></image>
 								</view>
-								<span>运行&nbsp;&nbsp;99</span>
+								<span>待机&nbsp;&nbsp;99</span>
 							</view>
 							<view class="fanStatus">
 								<view class="statusIcon">
 									<image src="../../static/picture/003.png" style="width: 16px;height: 16px;margin-top: 7px;"></image>
 								</view>
-								<span>故障&nbsp;&nbsp;99</span>
+								<span>运行&nbsp;&nbsp;99</span>
 							</view>
 							<view class="fanStatus">
 								<view class="statusIcon">
 									<image src="../../static/picture/004.png" style="width: 16px;height: 16px;margin-top: 7px;"></image>
 								</view>
-								<span>待机&nbsp;&nbsp;99</span>
+								<span>故障&nbsp;&nbsp;99</span>
 							</view>
 							<view class="fanStatus">
 								<view class="statusIcon">
@@ -376,7 +377,7 @@
 						<view class="UChartContainer">
 							<view class="windStationUChart">
 								<view class="windStationQiun-charts"><canvas canvas-id="windStationCanvasLineB" id="windStationCanvasLineB"
-									 class="windStationCharts"></canvas></view>
+									 class="windStationCharts" @touchstart="touchLineB2"></canvas></view>
 							</view>
 							<view class="UChartTitle">风速功率曲线图</view>
 							<!-- <view class="xTime">时间</view> -->
@@ -393,19 +394,19 @@
 								<view class="statusIcon">
 									<image src="../../static/picture/002.png" style="width: 16px;height: 16px;margin-top: 7px;"></image>
 								</view>
-								<span>运行&nbsp;&nbsp;99</span>
+								<span>待机&nbsp;&nbsp;99</span>
 							</view>
 							<view class="fanStatus">
 								<view class="statusIcon">
 									<image src="../../static/picture/003.png" style="width: 16px;height: 16px;margin-top: 7px;"></image>
 								</view>
-								<span>故障&nbsp;&nbsp;99</span>
+								<span>运行&nbsp;&nbsp;99</span>
 							</view>
 							<view class="fanStatus">
 								<view class="statusIcon">
 									<image src="../../static/picture/004.png" style="width: 16px;height: 16px;margin-top: 7px;"></image>
 								</view>
-								<span>待机&nbsp;&nbsp;99</span>
+								<span>故障&nbsp;&nbsp;99</span>
 							</view>
 							<view class="fanStatus">
 								<view class="statusIcon">
@@ -453,7 +454,7 @@
 						<view class="UChartContainer">
 							<view class="windStationUChart">
 								<view class="windStationQiun-charts"><canvas canvas-id="windStationCanvasLineC" id="windStationCanvasLineC"
-									 class="windStationCharts"></canvas></view>
+									 class="windStationCharts" @touchstart="touchLineB3"></canvas></view>
 							</view>
 							<view class="UChartTitle">风速功率曲线图</view>
 							<!-- <view class="xTime">时间</view> -->
@@ -470,19 +471,19 @@
 								<view class="statusIcon">
 									<image src="../../static/picture/002.png" style="width: 16px;height: 16px;margin-top: 7px;"></image>
 								</view>
-								<span>运行&nbsp;&nbsp;99</span>
+								<span>待机&nbsp;&nbsp;99</span>
 							</view>
 							<view class="fanStatus">
 								<view class="statusIcon">
 									<image src="../../static/picture/003.png" style="width: 16px;height: 16px;margin-top: 7px;"></image>
 								</view>
-								<span>故障&nbsp;&nbsp;99</span>
+								<span>运行&nbsp;&nbsp;99</span>
 							</view>
 							<view class="fanStatus">
 								<view class="statusIcon">
 									<image src="../../static/picture/004.png" style="width: 16px;height: 16px;margin-top: 7px;"></image>
 								</view>
-								<span>待机&nbsp;&nbsp;99</span>
+								<span>故障&nbsp;&nbsp;99</span>
 							</view>
 							<view class="fanStatus">
 								<view class="statusIcon">
@@ -530,7 +531,7 @@
 						<view class="UChartContainer">
 							<view class="windStationUChart">
 								<view class="windStationQiun-charts"><canvas canvas-id="windStationCanvasLineD" id="windStationCanvasLineD"
-									 class="windStationCharts"></canvas></view>
+									 class="windStationCharts" @touchstart="touchLineB4"></canvas></view>
 							</view>
 							<view class="UChartTitle">风速功率曲线图</view>
 							<!-- <view class="xTime">时间</view> -->
@@ -547,19 +548,19 @@
 								<view class="statusIcon">
 									<image src="../../static/picture/002.png" style="width: 16px;height: 16px;margin-top: 7px;"></image>
 								</view>
-								<span>运行&nbsp;&nbsp;99</span>
+								<span>待机&nbsp;&nbsp;99</span>
 							</view>
 							<view class="fanStatus">
 								<view class="statusIcon">
 									<image src="../../static/picture/003.png" style="width: 16px;height: 16px;margin-top: 7px;"></image>
 								</view>
-								<span>故障&nbsp;&nbsp;99</span>
+								<span>运行&nbsp;&nbsp;99</span>
 							</view>
 							<view class="fanStatus">
 								<view class="statusIcon">
 									<image src="../../static/picture/004.png" style="width: 16px;height: 16px;margin-top: 7px;"></image>
 								</view>
-								<span>待机&nbsp;&nbsp;99</span>
+								<span>故障&nbsp;&nbsp;99</span>
 							</view>
 							<view class="fanStatus">
 								<view class="statusIcon">
@@ -607,7 +608,7 @@
 						<view class="UChartContainer">
 							<view class="windStationUChart">
 								<view class="windStationQiun-charts"><canvas canvas-id="windStationCanvasLineE" id="windStationCanvasLineE"
-									 class="windStationCharts"></canvas></view>
+									 class="windStationCharts" @touchstart="touchLineB5"></canvas></view>
 							</view>
 							<view class="UChartTitle">风速功率曲线图</view>
 							<!-- <view class="xTime">时间</view> -->
@@ -624,19 +625,19 @@
 								<view class="statusIcon">
 									<image src="../../static/picture/002.png" style="width: 16px;height: 16px;margin-top: 7px;"></image>
 								</view>
-								<span>运行&nbsp;&nbsp;99</span>
+								<span>待机&nbsp;&nbsp;99</span>
 							</view>
 							<view class="fanStatus">
 								<view class="statusIcon">
 									<image src="../../static/picture/003.png" style="width: 16px;height: 16px;margin-top: 7px;"></image>
 								</view>
-								<span>故障&nbsp;&nbsp;99</span>
+								<span>运行&nbsp;&nbsp;99</span>
 							</view>
 							<view class="fanStatus">
 								<view class="statusIcon">
 									<image src="../../static/picture/004.png" style="width: 16px;height: 16px;margin-top: 7px;"></image>
 								</view>
-								<span>待机&nbsp;&nbsp;99</span>
+								<span>故障&nbsp;&nbsp;99</span>
 							</view>
 							<view class="fanStatus">
 								<view class="statusIcon">
@@ -671,7 +672,11 @@
 	var _self;
 	var canvaLineA = null;
 	var canvaColumn = null;
-	var canvaLineB = null;
+	var canvaLineB1 = null;
+	var canvaLineB2 = null;
+	var canvaLineB3 = null;
+	var canvaLineB4 = null;
+	var canvaLineB5 = null;
 	export default {
 		components: {
 			drawer: drawer,
@@ -1053,11 +1058,11 @@ created: function() {
 						}, {
 							"name": "故障损失电量(万kwh)",
 							"data": [17, 15, 17, 21, 16, 8, 10],
-							color: '#F76E6C',
+							color: '#F14E51',
 						}, {
 							"name": "检修损失电量(万kwh)",
 							"data": [14, 17, 19, 20, 6, 14, 12],
-							color: '#FF8F3E',
+							color: '#FF6B3E',
 						},
 						{
 							"name": "限电损失电量(万kwh)",
@@ -1103,7 +1108,7 @@ created: function() {
 						"series": [{
 							"name": "故障损失电量(万kwh)",
 							"data": [17, 15, 17, 21, 16, 8, 10, 17, 11],
-							color: '#F76E6C',
+							color: '#F14E51',
 						}, ],
 					};
 					ColumnStack.categories = [];
@@ -1121,7 +1126,7 @@ created: function() {
 						"series": [{
 								"name": "检修损失电量(万kwh)",
 								"data": [14, 17, 19, 20, 6, 14, 12, 14, 10],
-								color: '#FF8F3E',
+								color: '#FF6B3E',
 							}
 
 						],
@@ -1267,6 +1272,41 @@ created: function() {
 					}
 				});
 			},
+			touchLineB1(e) {
+				canvaLineB1.showToolTip(e, {
+					format: function(item, category) {
+						return category + ' ' + item.name + ':' + item.data;
+					}
+				});
+			},
+			touchLineB2(e) {
+				canvaLineB2.showToolTip(e, {
+					format: function(item, category) {
+						return category + ' ' + item.name + ':' + item.data;
+					}
+				});
+			},
+			touchLineB3(e) {
+				canvaLineB3.showToolTip(e, {
+					format: function(item, category) {
+						return category + ' ' + item.name + ':' + item.data;
+					}
+				});
+			},
+			touchLineB4(e) {
+				canvaLineB4.showToolTip(e, {
+					format: function(item, category) {
+						return category + ' ' + item.name + ':' + item.data;
+					}
+				});
+			},
+			touchLineB5(e) {
+				canvaLineB5.showToolTip(e, {
+					format: function(item, category) {
+						return category + ' ' + item.name + ':' + item.data;
+					}
+				});
+			},
 			moveLineA(e) {
 				canvaLineA.scroll(e);
 			},
@@ -1696,15 +1736,15 @@ created: function() {
 					]
 				};
 
-				this.showWindStationCardLineA('windStationCanvasLineA', LineA1);
-				this.showWindStationCardLineA('windStationCanvasLineB', LineB);
-				this.showWindStationCardLineA('windStationCanvasLineC', LineC);
-				this.showWindStationCardLineA('windStationCanvasLineD', LineD);
-				this.showWindStationCardLineA('windStationCanvasLineE', LineE);
+				this.showWindStationCardLineA1('windStationCanvasLineA', LineA1);
+				this.showWindStationCardLineA2('windStationCanvasLineB', LineB);
+				this.showWindStationCardLineA3('windStationCanvasLineC', LineC);
+				this.showWindStationCardLineA4('windStationCanvasLineD', LineD);
+				this.showWindStationCardLineA5('windStationCanvasLineE', LineE);
 			},
-			showWindStationCardLineA(canvasId, chartData) {
+			showWindStationCardLineA1(canvasId, chartData) {
 				var _self = this;
-				canvaLineB = new uCharts({
+				canvaLineB1 = new uCharts({
 					$this: _self,
 					canvasId: canvasId,
 					type: 'line',
@@ -1714,7 +1754,7 @@ created: function() {
 						position: 'top',
 						float: 'right',
 						fontColor: 'silver',
-						itemGap: '4',
+						itemGap: '9',
 						itemWidth: '3'
 					},
 					dataLabel: false,
@@ -1757,7 +1797,311 @@ created: function() {
 								titleFontColor: 'silver'
 							}
 						],
-
+						disabled:true,
+						gridColor: '#2E2E2E',
+						splitNumber: 4,
+						gridType: 'solid',
+						dashLength: 8,
+						showTitle: 'true',
+						format: val => {
+							return val.toFixed(0) + '元';
+						}
+					},
+					width: _self.windStationCardCWidth * _self.windStationCardPixelRatio,
+					height: _self.windStationCardCHeight * _self.windStationCardPixelRatio,
+					padding:[10,0,0,0],//画布填充边距，顺序为上右下左，同css，但必须4位
+					extra: {
+						line: {
+							type: 'line',
+							width: '1'
+						}
+					}
+				});
+			},
+			showWindStationCardLineA2(canvasId, chartData) {
+				var _self = this;
+				canvaLineB2 = new uCharts({
+					$this: _self,
+					canvasId: canvasId,
+					type: 'line',
+					fontSize: 11,
+					legend: {
+						show: true,
+						position: 'top',
+						float: 'right',
+						fontColor: 'silver',
+						itemGap: '9',
+						itemWidth: '3'
+					},
+					dataLabel: false,
+					dataPointShape: false,
+					background: '#FFFFFF',
+					pixelRatio: _self.windStationCardPixelRatio,
+					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'
+							}
+						],
+						disabled:true,
+						gridColor: '#2E2E2E',
+						splitNumber: 4,
+						gridType: 'solid',
+						dashLength: 8,
+						showTitle: 'true',
+						format: val => {
+							return val.toFixed(0) + '元';
+						}
+					},
+					width: _self.windStationCardCWidth * _self.windStationCardPixelRatio,
+					height: _self.windStationCardCHeight * _self.windStationCardPixelRatio,
+					padding:[10,0,0,0],//画布填充边距，顺序为上右下左，同css，但必须4位
+					extra: {
+						line: {
+							type: 'line',
+							width: '1'
+						}
+					}
+				});
+			},
+			showWindStationCardLineA3(canvasId, chartData) {
+				var _self = this;
+				canvaLineB3 = new uCharts({
+					$this: _self,
+					canvasId: canvasId,
+					type: 'line',
+					fontSize: 11,
+					legend: {
+						show: true,
+						position: 'top',
+						float: 'right',
+						fontColor: 'silver',
+						itemGap: '9',
+						itemWidth: '3'
+					},
+					dataLabel: false,
+					dataPointShape: false,
+					background: '#FFFFFF',
+					pixelRatio: _self.windStationCardPixelRatio,
+					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'
+							}
+						],
+						disabled:true,
+						gridColor: '#2E2E2E',
+						splitNumber: 4,
+						gridType: 'solid',
+						dashLength: 8,
+						showTitle: 'true',
+						format: val => {
+							return val.toFixed(0) + '元';
+						}
+					},
+					width: _self.windStationCardCWidth * _self.windStationCardPixelRatio,
+					height: _self.windStationCardCHeight * _self.windStationCardPixelRatio,
+					padding:[10,0,0,0],//画布填充边距，顺序为上右下左，同css，但必须4位
+					extra: {
+						line: {
+							type: 'line',
+							width: '1'
+						}
+					}
+				});
+			},
+			showWindStationCardLineA4(canvasId, chartData) {
+				var _self = this;
+				canvaLineB4 = new uCharts({
+					$this: _self,
+					canvasId: canvasId,
+					type: 'line',
+					fontSize: 11,
+					legend: {
+						show: true,
+						position: 'top',
+						float: 'right',
+						fontColor: 'silver',
+						itemGap: '9',
+						itemWidth: '3'
+					},
+					dataLabel: false,
+					dataPointShape: false,
+					background: '#FFFFFF',
+					pixelRatio: _self.windStationCardPixelRatio,
+					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'
+							}
+						],
+						disabled:true,
+						gridColor: '#2E2E2E',
+						splitNumber: 4,
+						gridType: 'solid',
+						dashLength: 8,
+						showTitle: 'true',
+						format: val => {
+							return val.toFixed(0) + '元';
+						}
+					},
+					width: _self.windStationCardCWidth * _self.windStationCardPixelRatio,
+					height: _self.windStationCardCHeight * _self.windStationCardPixelRatio,
+					padding:[10,0,0,0],//画布填充边距，顺序为上右下左，同css，但必须4位
+					extra: {
+						line: {
+							type: 'line',
+							width: '1'
+						}
+					}
+				});
+			},
+			showWindStationCardLineA5(canvasId, chartData) {
+				var _self = this;
+				canvaLineB5 = new uCharts({
+					$this: _self,
+					canvasId: canvasId,
+					type: 'line',
+					fontSize: 11,
+					legend: {
+						show: true,
+						position: 'top',
+						float: 'right',
+						fontColor: 'silver',
+						itemGap: '9',
+						itemWidth: '3'
+					},
+					dataLabel: false,
+					dataPointShape: false,
+					background: '#FFFFFF',
+					pixelRatio: _self.windStationCardPixelRatio,
+					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'
+							}
+						],
+						disabled:true,
 						gridColor: '#2E2E2E',
 						splitNumber: 4,
 						gridType: 'solid',
@@ -1769,6 +2113,7 @@ created: function() {
 					},
 					width: _self.windStationCardCWidth * _self.windStationCardPixelRatio,
 					height: _self.windStationCardCHeight * _self.windStationCardPixelRatio,
+					padding:[10,0,0,0],//画布填充边距，顺序为上右下左，同css，但必须4位
 					extra: {
 						line: {
 							type: 'line',