|
@@ -0,0 +1,428 @@
|
|
|
+<template>
|
|
|
+ <view class="home">
|
|
|
+ <view class="box-bg">
|
|
|
+ <uni-nav-bar :fixed="true" dark left-icon="left" background-color='#202246' :title="stationName"
|
|
|
+ @clickLeft="back" />
|
|
|
+ </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>
|
|
|
+ <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="matrix">
|
|
|
+ <view class="matrixItem" v-for="(item,index) in 2" :key="index">
|
|
|
+ <view class="matrixText">乌力吉一期</view>
|
|
|
+ <uni-row class="matrixItemRow">
|
|
|
+ <uni-col :span="3" v-for="(item,index) in 45" :key="index">
|
|
|
+ <view class="matrixItemRowOne">A01</view>
|
|
|
+ </uni-col>
|
|
|
+ </uni-row>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <station-bar @stationTab="stationTabXY"></station-bar>
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+</template>
|
|
|
+<script>
|
|
|
+ import stationBar from '../common/stationTab.vue'
|
|
|
+ export default {
|
|
|
+ onLoad: function(e) {
|
|
|
+ this.stationName = e.stationName
|
|
|
+ },
|
|
|
+ components: {
|
|
|
+ stationBar
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ stationName: '',
|
|
|
+ stationTab: '',
|
|
|
+ mesExData: [],
|
|
|
+ windPowerData: []
|
|
|
+ }
|
|
|
+ },
|
|
|
+ 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')
|
|
|
+ },
|
|
|
+ back() {
|
|
|
+ this.$tab.switchTab('/pages/home/index')
|
|
|
+ },
|
|
|
+ changeStation() {
|
|
|
+ this.$tab.navigateTo('/pages/common/stationListPage')
|
|
|
+ },
|
|
|
+ stationTabXY(it) {
|
|
|
+ this.stationTab = it
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+</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;
|
|
|
+
|
|
|
+ .box-bg {
|
|
|
+ width: 100vw;
|
|
|
+ padding: 5px 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .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 {
|
|
|
+ padding-bottom: 60px;
|
|
|
+
|
|
|
+ .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;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ .windMsg {
|
|
|
+ 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;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .matrix {
|
|
|
+ .matrixItem {
|
|
|
+ margin-top: 10px;
|
|
|
+
|
|
|
+ .matrixText {
|
|
|
+ font-size: 32upx;
|
|
|
+ color: #9A9BA6;
|
|
|
+ }
|
|
|
+
|
|
|
+ .matrixItemRow {
|
|
|
+ .matrixItemRowOne {
|
|
|
+ width: 100%;
|
|
|
+ height: 30px;
|
|
|
+ background-color: #2675F6;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 30px;
|
|
|
+ color: #fff;
|
|
|
+ font-size: 24upx;
|
|
|
+ border-radius: 5px;
|
|
|
+ // margin: 1px 2px;
|
|
|
+ border: 1px solid #202246;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+</style>
|