[fix]调整电站首页

main
huyuanxiang 2 years ago
parent 710d92e9c4
commit 7eb8c6ab48

@ -28,7 +28,7 @@ export const us = {
icon: icon_prefix + "richeng.png", icon: icon_prefix + "richeng.png",
description: "分布式光伏电站", description: "分布式光伏电站",
useCount: 10000, useCount: 10000,
page: 'helloWorld' page: 'stationList'
}, { }, {
title: "垃圾热解", title: "垃圾热解",
icon: icon_prefix + "qingjia1.png", icon: icon_prefix + "qingjia1.png",

@ -37,9 +37,8 @@
}, },
watch: { watch: {
option(newValue, oldValue) { option(newValue, oldValue) {
if(Object.keys(newValue).length){
this.initChart(newValue) this.initChart(newValue)
}
} }
}, },
data() { data() {
@ -128,6 +127,9 @@
chartList[this.canvasId].dispose() chartList[this.canvasId].dispose()
chartList[this.canvasId] = null chartList[this.canvasId] = null
} }
if(!Object.keys(option).length){
return
}
chartList[this.canvasId] = echarts.init(document.getElementById(this.canvasId)); chartList[this.canvasId] = echarts.init(document.getElementById(this.canvasId));
chartList[this.canvasId].setOption(option?option:this.option); chartList[this.canvasId].setOption(option?option:this.option);
}, },

File diff suppressed because one or more lines are too long

@ -1,6 +1,6 @@
<template> <template>
<view> <view>
<uni-nav-bar left-icon="left" fixed="true" title="" @clickLeft="handleClickLeft"></uni-nav-bar> <uni-nav-bar left-icon="left" fixed="true" title="子阵视图" @clickLeft="handleClickLeft"></uni-nav-bar>
<view class="station-box"> <view class="station-box">
<view class="station-search-box"> <view class="station-search-box">
<uni-section title="选择电站" type="line" padding="10px" > <uni-section title="选择电站" type="line" padding="10px" >
@ -462,11 +462,12 @@
align-items: center; align-items: center;
} }
/deep/ .u-collapse-item__content__text { /deep/ .u-collapse-item__content__text {
background-color: rgba(0,0,0, .8); background-color: rgba(0,0,0, 1);
} }
/deep/ .second-class .u-collapse-item__content { /deep/ .second-class .u-collapse-item__content {
height: auto !important; height: auto !important;
} }
/deep/ .u-action-sheet { /deep/ .u-action-sheet {
background: #000; background: #000;

@ -1,6 +1,6 @@
<template> <template>
<view> <view>
<uni-nav-bar left-icon="left" fixed="true" title="" @clickLeft="handlerBack"></uni-nav-bar> <uni-nav-bar left-icon="left" fixed="true" title="逆变器视图" @clickLeft="handlerBack"></uni-nav-bar>
<view class="container"> <view class="container">
<view class="search-box"> <view class="search-box">
<uni-section title="选择电站" type="line" > <uni-section title="选择电站" type="line" >
@ -33,12 +33,7 @@
<div class="report-status"> <div class="report-status">
<div class="report-status-item"> <div class="report-status-item">
<div class="flex flex-column flex-col-center"> <div class="flex flex-column flex-col-center">
<div class="flex flex-row-center"> <div style="margin-bottom: 10px;">
关闭<u-switch v-model="value4" size="20"
inactiveColor="#ff0000"
activeColor="#00a403" style="margin: 0 10px;"></u-switch>
</div>
<div style="margin-top: 10px;">
<!-- <div>状态</div --> <!-- <div>状态</div -->
<div class="flex"> <div class="flex">
<div class="item flex flex-center"> <div class="item flex flex-center">
@ -59,6 +54,11 @@
</div> </div>
</div> </div>
</div> </div>
<div class="flex flex-row-center">
关闭<u-switch v-model="value4" size="20"
inactiveColor="#ff0000"
activeColor="#00a403" style="margin: 0 10px;"></u-switch>
</div>
</div> </div>
</div> </div>
</div> </div>
@ -462,7 +462,7 @@
handleCanceTime() { handleCanceTime() {
this.show = false this.show = false
}, },
getChartDataList() { getChartDataList() {
const data = { const data = {
createTime: this.timer, createTime: this.timer,
id: this.secondValue, id: this.secondValue,
@ -521,7 +521,11 @@
}) })
}, },
setChartData(chartData = {}, type = '') { setChartData(chartData = {}, type = '') {
if (!Object.keys(chartData).length) return console.log(chartData)
if (!Object.keys(chartData).length) {
this.option = option
return
}
const option = this.getChartOption(chartData) const option = this.getChartOption(chartData)
this.option = option this.option = option

@ -3,22 +3,21 @@
<uni-nav-bar left-icon="left" fixed="true" title="" @clickLeft="handleClickLeft"></uni-nav-bar> <uni-nav-bar left-icon="left" fixed="true" title="" @clickLeft="handleClickLeft"></uni-nav-bar>
<scroll-view :scroll-y="modalName==null" class="page" :class="modalName!=null?'show':''"> <scroll-view :scroll-y="modalName==null" class="page" :class="modalName!=null?'show':''">
<view class="station-box"> <view class="station-box">
<view> <!-- <view>
选择电站<picker mode="selector" :range="stationData" 选择电站<picker mode="selector" :range="stationData"
range-key="stationName" range-key="stationName"
:value="index" @change="handlerChangeStation"> :value="index" @change="handlerChangeStation">
<view style="color: royalblue;">{{ stationData[index].stationName }}</view> <view style="color: royalblue;">{{ stationData[index].stationName }}</view>
</picker> </picker>
</view> </view> -->
<view class="card-box"> <view class="card-box">
<uni-section title="电站信息" type="line" padding="0 0 5px 0"> <uni-section title="电站列表" type="line" padding="0 0 5px 0">
<uni-card title="" padding="10px" > <!-- <uni-card title="">
<template v-slot:title> <template v-slot:title>
<uni-list> <uni-list>
<uni-list-item showArrow clickable :title="station.stationName" @click="goNext" /> <uni-list-item showArrow clickable :title="station.stationName" @click="goNext" />
</uni-list> </uni-list>
</template> </template>
<!-- <image style="width: 100%;" :src="cover"></image> -->
<view class="station-info"> <view class="station-info">
<view class="flex station-info-item"> <view class="flex station-info-item">
<text class="left">装机容量(MW)</text> <text class="left">装机容量(MW)</text>
@ -41,7 +40,41 @@
<text>{{ station.irradiationLevel }}</text> <text>{{ station.irradiationLevel }}</text>
</view> </view>
</view> </view>
</uni-card> </uni-card> -->
<view class="station-box-list">
<uni-card title="" v-for="item in stationData" :key="item.id">
<template v-slot:title>
<uni-list>
<uni-list-item showArrow clickable :title="item.stationName" @click="goNext(item.id)" />
</uni-list>
</template>
<!-- <image style="width: 100%;" :src="cover"></image> -->
<view class="station-info">
<view class="flex station-info-item">
<text class="left">装机容量(MW)</text>
<text class="right">{{ item.capacity }}</text>
</view>
<view class="flex station-info-item">
<text class="left">当日发电(kWh)</text>
<text class="right">{{ item.dayElectricity }}</text>
</view>
<view class="flex station-info-item">
<text class="left">当日功率(kW)</text>
<text >{{ item.dayPower }}</text>
</view>
<view class="flex station-info-item">
<text class="left">累计发电(kWh)</text>
<text>{{ item.totalElectricity }}</text>
</view>
<!-- <view class="flex station-info-item">
<text class="left">光照强度(W/m^2)</text>
<text>{{ station.irradiationLevel }}</text>
</view> -->
</view>
</uni-card>
</view>
</uni-section> </uni-section>
</view> </view>
</view> </view>
@ -203,11 +236,11 @@
this.index = e.detail.value this.index = e.detail.value
this.station = this.stationData[this.index] this.station = this.stationData[this.index]
}, },
goNext() { goNext(id) {
this.$router.push({ this.$router.push({
name: 'stationListItem1', name: 'stationListItem1',
query: { query: {
id: this.station.id id
} }
}) })
} }
@ -218,26 +251,50 @@
<style lang="scss"> <style lang="scss">
.station-box { .station-box {
position: relative; position: relative;
padding: 10px; padding: 10px 0;
color: #333; color: #333;
} }
.station-box-list {
position: relative;
width: 100%;
max-height: 85vh;
overflow-y: scroll;
}
.card-box { .card-box {
margin-top: 50px; // margin-top: 50px;
// max-height: 90vh;
// overflow-y: scroll;
} }
.station-info { .station-info {
margin-top: 20px; // margin-top: 20px;
display: flex;
// flex-direction:column;
flex-wrap: wrap;
color: #888;
.station-info-item { .station-info-item {
color: #666;
&:not(:first-child) { font-size: 12px;
// margin-top: 10px; width: 50%;
vertical-align: middle;
line-height: 2.5;
// &:not(:first-child) {
// // margin-top: 10px;
// border-top: 1px dashed #cedefb;
// vertical-align: middle;
// line-height: 2.5;
// }
&:nth-child(3), &:nth-child(4) {
width: 100%;
border-top: 1px dashed #cedefb; border-top: 1px dashed #cedefb;
vertical-align: middle; }
line-height: 2.5;
}
.left { .left {
width: 130px; // width: 130px;
text-align: justify; text-align: justify;
} }
.right {
color: #4aaf0b;
font-weight: 600;
}
} }
} }

Loading…
Cancel
Save