jn_app/pages/home/index.vue

<template>
	<view class="home">
		<view class="home_header">
			<view class="header_message" @click="changeMsg">
				<image src="../../static/jnImage/indexPage/alarmSet.png"></image>
			</view>
			<view class="header_title">
				<text class="titleName">发电场站生产实时运营管理平台</text>
			</view>
			<view class="header_more">
				<image src="../../static/jnImage/indexPage/moreNew.png"></image>
			</view>
		</view>
		<view class="home_main">
			<view class="main_time">
				<view class="mesTime">
					<image src="../../static/jnImage/indexPage/time.png"></image>
					<text>2023年11月20日</text>
					<text>星期一</text>
					<text>09:19</text>
				</view>
				<view class="mesAll">
					<uni-row class="mesEx">
						<uni-col :span="12" v-for="(item,index) in mesExData" :key="index">
							<view class="mesEx_left flex">
								<view class="mesEx_left_top">
									<text class="nameSty">{{item.leftName}}</text>
								</view>
								<view class="mesEx_left_end">
									<text>{{item.leftValue}}</text>
									<text>{{item.leftCode}}</text>
								</view>
							</view>
						</uni-col>
					</uni-row>
					<uni-row class="windpowerCl">
						<uni-col :span="12" v-for="(item,index) in windPowerData" :key="index">
							<view class="windpowerMsg">
								<view class="windpowerMsg_com flex justify-between">
									<text style="font-size: 28upx">{{item.name}}</text>
									<text>{{item.code}}</text>
								</view>
								<view class="windpowerMsg_Data">
									<text>{{item.value}}</text>
								</view>
								<view class="windpowerMsg_com flex justify-between">
									<text>min:{{item.min}}</text>
									<text>max:{{item.max}}</text>
								</view>
							</view>
						</uni-col>
					</uni-row>
					<view class="windMsg">
						<view class="flex justify-center" style="margin-bottom: 6px;">
							<view class="windMsg_title">
								<image src="../../static/jnImage/indexPage/wancheng.png" mode=""></image>
								<text>风机状态</text>
							</view>
						</view>
						<view class="windMsg_main">
							<view class="windMsg_main_msg flex justify-between">
								<view class="windMsgSty flex">
									<view class="windMsgSty_left">
										<image src="../../static/jnImage/indexPage/yunxingNew.png" mode=""></image>
										<!-- <view class="windMsgCom" style="background-color: #c2c2c2">
										</view> -->
										<text>接入</text>
									</view>
									<view class="windMsgSty_right flex justify-between">
										<text>600</text>
										<text>台</text>
									</view>
								</view>
								<view class="windMsgSty flex">
									<view class="windMsgSty_left">
										<image src="../../static/jnImage/indexPage/daijiNew.png" mode=""></image>
										<text>待机</text>
									</view>
									<view class="windMsgSty_right flex justify-between">
										<text>600</text>
										<text>台</text>
									</view>
								</view>
							</view>
							<view class="windMsg_main_msg flex justify-between">
								<view class="windMsgSty flex">
									<view class="windMsgSty_left">
										<image src="../../static/jnImage/indexPage/qidongNew.png" mode=""></image>
										<text>启动</text>
									</view>
									<view class="windMsgSty_right flex justify-between">
										<text>600</text>
										<text>台</text>
									</view>
								</view>
								<view class="windMsgSty flex">
									<view class="windMsgSty_left">
										<image src="../../static/jnImage/indexPage/gzdjNew.png" mode=""></image>
										<text class="fourFont">故障\n待机</text>
									</view>
									<view class="windMsgSty_right flex justify-between">
										<text>600</text>
										<text>台</text>
									</view>
								</view>
							</view>
							<view class="windMsg_main_msg flex justify-between">
								<view class="windMsgSty flex">
									<view class="windMsgSty_left">
										<image src="../../static/jnImage/indexPage/tingjiNew.png" mode=""></image>
										<text>停机</text>
									</view>
									<view class="windMsgSty_right flex justify-between">
										<text>600</text>
										<text>台</text>
									</view>
								</view>
								<view class="windMsgSty flex">
									<view class="windMsgSty_left">
										<image src="../../static/jnImage/indexPage/lixianNew.png" mode=""></image>
										<text>离线</text>
									</view>
									<view class="windMsgSty_right flex justify-between">
										<text>600</text>
										<text>台</text>
									</view>
								</view>
							</view>
						</view>
					</view>
					<view class="powerMsg">
						<view class="flex justify-center" style="margin-bottom: 6px;">
							<view class="windMsg_title">
								<image src="../../static/jnImage/indexPage/wancheng.png" mode=""></image>
								<text>光伏状态</text>
							</view>
						</view>
						<view class="windMsg_main">
							<view class="windMsg_main_msg flex justify-between">
								<view class="windMsgSty flex">
									<view class="windMsgSty_left">
										<image src="../../static/jnImage/indexPage/yunxingGFNew.png" mode=""></image>
										<text>接入</text>
									</view>
									<view class="windMsgSty_right flex justify-between">
										<text>600</text>
										<text>台</text>
									</view>
								</view>
								<view class="windMsgSty flex">
									<view class="windMsgSty_left">
										<image src="../../static/jnImage/indexPage/daijiP.png" mode=""></image>
										<text>待机</text>
									</view>
									<view class="windMsgSty_right flex justify-between">
										<text>600</text>
										<text>台</text>
									</view>
								</view>
							</view>
							<view class="windMsg_main_msg flex justify-between">
								<view class="windMsgSty flex">
									<view class="windMsgSty_left">
										<image src="../../static/jnImage/indexPage/yunxingP.png" mode=""></image>
										<text>运行</text>
									</view>
									<view class="windMsgSty_right flex justify-between">
										<text>600</text>
										<text>台</text>
									</view>
								</view>
								<view class="windMsgSty flex">
									<view class="windMsgSty_left">
										<image src="../../static/jnImage/indexPage/guzhangNew.png" mode=""></image>
										<text>故障</text>
									</view>
									<view class="windMsgSty_right flex justify-between">
										<text>600</text>
										<text>台</text>
									</view>
								</view>
							</view>
							<view class="windMsg_main_msg flex justify-between">
								<view class="windMsgSty flex">
									<view class="windMsgSty_left">
										<image src="../../static/jnImage/indexPage/gzwhNew.png" mode=""></image>
										<text>维护</text>
									</view>
									<view class="windMsgSty_right flex justify-between">
										<text>600</text>
										<text>台</text>
									</view>
								</view>
								<view class="windMsgSty flex">
									<view class="windMsgSty_left">
										<image src="../../static/jnImage/indexPage/lixianNew.png" mode=""></image>
										<text>离线</text>
									</view>
									<view class="windMsgSty_right flex justify-between">
										<text>600</text>
										<text>台</text>
									</view>
								</view>
							</view>
						</view>
					</view>
					<view class="ssjk">
						<view class="ssjk_title flex justify-center">
							<image src="../../static/jnImage/indexPage/timeNow.png" mode=""></image>
							<text>实时监控</text>
						</view>
						<view class="ssjk_main">
							<view class="ssjk_main_msg">
								<view class="ssjk_main_msg_tit flex">
									<image src="../../static/jnImage/indexPage/windIcon.png" mode=""></image>
									<text>宝龙山</text>
								</view>
								<view class="ssjk_main_msg_data flex">
									<view class="msg_data_sty flex">
										<view class="msg_data_name">
											<text>风速</text>
										</view>
										<view class="dataSty flex">
											<text>0.00</text>
											<text>m/s</text>
										</view>
									</view>
									<view class="msg_data_sty flex">
										<view class="msg_data_name">
											<text>有功功率</text>
										</view>
										<view class="dataSty flex">
											<text>0.00</text>
											<text>MW</text>
										</view>
									</view>
									<view class="msg_data_sty flex">
										<view class="msg_data_name">
											<text>AGC指令</text>
										</view>
										<view class="dataSty flex">
											<text>0.00</text>
											<text>MW</text>
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>
</template>
<script>
	import leftIcon from '../../static/jnImage/indexPage/alarmSet.png'
	export default {
		onLoad: function() {},
		data() {
			return {
				mesExData: [],
				windPowerData: [],
				leftIcon: leftIcon
			}
		},
		created() {
			this.windPowerData = [{
					name: '实际风速',
					value: 7,
					code: '(m/s)',
					min: 6,
					max: 8
				},
				{
					name: '预测风速',
					value: 10,
					code: '(m/s)',
					min: 6,
					max: 20
				},
				{
					name: '实际功率',
					value: 191,
					code: '(万kW)',
					min: 0,
					max: 200
				},
				{
					name: '理论功率',
					value: 459,
					code: '(万kW)',
					min: 0,
					max: 500
				}
			]
			this.mesExData = [{
					leftName: '容量',
					leftValue: 282.3,
					leftCode: '(WM)',
				},
				{
					leftName: '安全天数',
					leftValue: 20,
					leftCode: '(天)',
				},
				{
					leftName: '日发电量',
					leftValue: 282.3,
					leftCode: '(万kWh)'
				},
				{
					leftName: '预测电量',
					leftValue: 282.3,
					leftCode: '(万kWh)'
				},
				{
					leftName: '月发电量',
					leftValue: 282.3,
					leftCode: '(万kWh)'
				},
				{
					leftName: '年发电量',
					leftValue: 282.3,
					leftCode: '(万kWh)'
				},
			]
		},
		methods: {
			changeMsg() {
				this.$tab.navigateTo('/pages/common/uniNavBar')
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #202246;
	}

	.home {
		width: 100vw;
		background: url('../../static/jnImage/loginPage/windBack.png'), url('../../static/jnImage/loginPage/backWav.png');
		background-repeat: no-repeat, repeat;
		background-size: 100% 260px, 100% 5px;

		.home_header {
			width: calc(100% -32px);
			display: flex;
			justify-content: space-between;
			height: 60px;
			padding-top: 16px;
			// position: fixed;

			.header_message {
				width: 15%;

				image {
					position: relative;
					top: 5px;
					left: 10px;
					width: 25px;
					height: 25px;
				}
			}

			.header_title {
				width: 70%;
				position: relative;
				left: 5px;

				image {
					width: 28px;
					height: 22px;
					position: relative;
					top: 5px;
				}

				.titleName {
					line-height: 20px;
					font-size: 36upx;
					font-family: FZZhengHeiS-M-GB;
					font-weight: 600;
					color: #fff;
					position: relative;
					top: 8px;
				}
			}

			.header_more {
				width: 15%;
				position: relative;
				top: 10px;
				left: 10px;

				image {
					width: 25px;
					height: 18px;
				}
			}
		}

		.home_main {
			padding: 0 20px;

			.main_time {
				margin-top: 10px;

				.mesTime {
					display: flex;
					padding: 3px 0;
					border-bottom: 1px solid rgba(255, 255, 255, 0.25);

					image {
						width: 20px;
						height: 20px;
					}

					text {
						font-size: 34upx;
						color: #fff;
						margin-left: 15px;
					}

					text:nth-of-type(3) {
						position: relative;
						top: 3px;
					}

				}

				.mesAll {
					.mesEx {
						// display: flex;
						line-height: 30px;
						color: #fff;

						.mesEx_left {
							width: 100%;
							border-bottom: 1px solid rgba(255, 255, 255, 0.25);
							padding: 3px 0;

							.mesEx_left_top {
								width: 40%;
								font-size: 28upx;

								.nameSty {
									width: 100%;
									display: inline-block;
									position: relative;
									text-align-last: justify;
									text-align: justify;

								}
							}

							.mesEx_left_end {
								width: 56%;
								margin: 0 10px;
								display: flex;
								justify-content: space-between;

								text:nth-of-type(1) {
									font-size: 34upx;
								}

								text:nth-of-type(2) {
									font-size: 20upx;
									color: #92949B;
								}
							}

						}


					}

					.windpowerCl {
						.windpowerMsg {
							margin-top: 10px;
							padding: 5px 10px;
							color: #fff;
							background-image: url('../../static/jnImage/indexPage/windpower.png');
							background-repeat: no-repeat;
							background-size: cover;

							.windpowerMsg_com {
								text {
									font-size: 24upx;
									color: #AFB2C1;
								}
							}

							.windpowerMsg_Data {
								margin: 5px;
								text-align: center;
								font-size: 40upx;
							}
						}
					}

					.windMsg,
					.powerMsg {
						margin-top: 15px;

						.windMsg_title {
							width: 40%;
							height: 30px;
							display: flex;
							justify-content: center;
							align-items: center;
							padding: 6px 13px;
							background: rgba(51, 57, 118, 0.7);
							border-radius: 5px;

							image {
								width: 18px;
								height: 18px;
							}

							text {
								margin-left: 5px;
								font-size: 34upx;
								color: #fff;

							}
						}

						.windMsg_main {
							.windMsg_main_msg {
								margin-bottom: 8px;

								.windMsgSty {
									padding: 5px 8px;
									width: 49%;
									background: #3F4572;
									border-radius: 5px;

									.windMsgSty_left {
										width: 49%;
										height: 32px;

										image {
											width: 32px;
											height: 32px;
										}

										text {
											width: 100px;
											display: inline-block;
											color: #9A9BA6;
											font-size: 28upx;
											margin-left: 10px;
											position: relative;
											top: -26px;
											left: 28px;
										}

										.fourFont {
											top: -38px;
										}
									}

									.windMsgSty_right {
										width: 49%;
										position: relative;
										top: 9px;

										text:nth-of-type(1) {
											margin-left: 5px;
											width: 50%;
											font-size: 34upx;
											color: #fff;
										}

										text:nth-of-type(2) {
											font-size: 28upx;
											color: #9A9BA6;
										}
									}
								}
							}
						}
					}

					.ssjk {
						margin-top: 15px;
						margin-bottom: 30px;

						.ssjk_title {
							width: 120px;
							height: 45px;
							// background: #333976;
							background: linear-gradient(90deg, #333976, #202246);
							align-items: center;

							image {
								width: 22px;
								height: 22px;
							}

							text {
								margin-left: 10px;
								font-size: 16px;
								color: #fff;
							}
						}

						.ssjk_main {
							.ssjk_main_msg {
								margin-top: 15px;

								.ssjk_main_msg_tit {
									image {
										width: 18px;
										height: 18px;
									}

									text {
										margin-left: 10px;
										font-size: 14px;
										color: #A49EAC;
										position: relative;
										top: -2px;
									}
								}

								.ssjk_main_msg_data {
									width: 100%;
									color: #fff;
									font-size: 10px;

									.msg_data_sty {
										width: 33%;
										margin-right: 2px;
										background: #2E336D;

										.msg_data_name {
											width: 50%;
											padding: 3px 0;
											display: inline-block;
											background: #3F4572;
											text-align: center;
										}

										.dataSty {
											width: 50%;
											background: #2E336D;
											padding: 0 3px;
											justify-content: space-between;

											text {
												position: relative;
												top: 5px;
											}
										}
									}
								}
							}
						}
					}
				}
			}
		}
	}
</style>