优化
This commit is contained in:
白菜
@ -1,58 +1,67 @@
|
||||
<template>
|
||||
<view class="work-container">
|
||||
<!-- 站点选择列表 -->
|
||||
<uni-section title="业态选择" type="line" class="sections-list">
|
||||
<uni-row>
|
||||
<uni-col :span="10" :offset='1'>
|
||||
<uni-section title="业态列表">
|
||||
<uni-data-select :clear="false" :value="siteType" wrap :localdata="siteTypeOptions"
|
||||
@change="selectedSiteType"></uni-data-select>
|
||||
</uni-section>
|
||||
</uni-col>
|
||||
<uni-col :span="10" :offset='2'>
|
||||
<uni-section title="可选清单">
|
||||
<uni-data-select ref="siteListSelect" :clear="false" :value="siteId" wrap
|
||||
:localdata="siteType ===1 ? siteList : []" @change="selectedSite"></uni-data-select>
|
||||
</uni-section>
|
||||
</uni-col>
|
||||
</uni-row>
|
||||
</uni-section>
|
||||
<!-- 静态信息 -->
|
||||
<uni-section title="静态信息" type="line" class="sections-list">
|
||||
<view class="base-lists" v-for="(item,index) in singleZdInfo" :key="index+'zdBaseInfo'">
|
||||
<text class="left">{{item.title}}：</text>
|
||||
<text class="right">{{baseInfo[item.attr]}}</text>
|
||||
<view class="site-sections-list">
|
||||
<uni-data-picker placeholder="请选择" popup-title="业态选择" :step-searh="true" :value="siteId" :clear-icon="false"
|
||||
:localdata="siteTypeOptions" :ellipsis="false" @change="selectedSite">
|
||||
</uni-data-picker>
|
||||
<view class="info">
|
||||
<view class="list"> <uni-icons type="location" color="#fff" size="20"></uni-icons>
|
||||
{{baseInfo.siteAddress || '-'}}
|
||||
</view>
|
||||
<view class="list">
|
||||
<uni-icons type="calendar" color="#fff" size="20"></uni-icons>
|
||||
{{baseInfo.runningTime || '-'}}
|
||||
</view>
|
||||
</view>
|
||||
</uni-section>
|
||||
<!-- 工作台 -->
|
||||
<uni-section title="工作台" type="line" class="sections-list">
|
||||
<view class="grid-body">
|
||||
<uni-grid :column="4" :showBorder="false" @change="toDetail">
|
||||
<uni-grid-item v-for="(item,index) in siteGirdList" :index="index" :key="index+'work'">
|
||||
</view>
|
||||
<!-- 静态信息 -->
|
||||
<view class="base-info">
|
||||
<uni-group mode="card" class="install-data">
|
||||
<uni-grid :column="2" :showBorder="false" :square="false" :highlight="false">
|
||||
<uni-grid-item>
|
||||
<view class="grid-item-box">
|
||||
<view class="icon iconfont" :class="item.icon" size="30"></view>
|
||||
<text class="text">{{item.text}}</text>
|
||||
<view class="title">装机功率(MW)</view>
|
||||
<view class="text">{{baseInfo.installPower}}</view>
|
||||
</view>
|
||||
</uni-grid-item>
|
||||
<uni-grid-item>
|
||||
<view class="grid-item-box">
|
||||
<view class="title">装机容量(MW)</view>
|
||||
<view class="text">{{baseInfo.installCapacity}}</view>
|
||||
</view>
|
||||
</uni-grid-item>
|
||||
</uni-grid>
|
||||
</view>
|
||||
</uni-section>
|
||||
<!-- 一周充放曲线 uchart的组件最好放在同级-->
|
||||
<uni-section title="一周充放曲线" type="line" class="sections-list">
|
||||
<date-range-select ref="weekChartDateRangeSelect" @updateDate="updateWeekChartDate" />
|
||||
<view style="width:100%;height: 250px;">
|
||||
<qiun-data-charts type="area" :chartData="weekChartData" :optsWatch='false' :inScrollView="true"
|
||||
:pageScrollTop="pageScrollTop" :opts="options" :ontouch="true" />
|
||||
</view>
|
||||
</uni-section>
|
||||
<!-- 当日功率曲线 uchart的组件最好放在同级-->
|
||||
<uni-section title="当日功率曲线" type="line" class="sections-list">
|
||||
<date-range-select ref="activeChartDateRangeSelect" @updateDate="updateActiveChartDate" />
|
||||
<view style="width:100%;height: 250px;">
|
||||
<qiun-data-charts type="area" :chartData="activeChartData" :optsWatch='false' :inScrollView="true"
|
||||
:pageScrollTop="pageScrollTop" :opts="glqxOptions" :ontouch="true" />
|
||||
</view>
|
||||
</uni-section>
|
||||
</uni-group>
|
||||
<!-- 工作台 -->
|
||||
<uni-section title="工作台" type="line" class="sections-list">
|
||||
<view class="grid-body">
|
||||
<uni-grid :column="4" :showBorder="false" @change="toDetail">
|
||||
<uni-grid-item v-for="(item,index) in siteGirdList" :index="index" :key="index+'work'">
|
||||
<view class="grid-item-box work-box">
|
||||
<view class="icon iconfont" :class="item.icon" size="30"></view>
|
||||
<text class="text">{{item.text}}</text>
|
||||
</view>
|
||||
</uni-grid-item>
|
||||
</uni-grid>
|
||||
</view>
|
||||
</uni-section>
|
||||
<!-- 一周充放曲线 uchart的组件最好放在同级-->
|
||||
<uni-section title="一周充放曲线" type="line" class="sections-list">
|
||||
<date-range-select ref="weekChartDateRangeSelect" @updateDate="updateWeekChartDate" />
|
||||
<view style="width:100%;height: 250px;">
|
||||
<qiun-data-charts type="area" :chartData="weekChartData" :optsWatch='false' :inScrollView="true"
|
||||
:pageScrollTop="pageScrollTop" :opts="options" :ontouch="true" />
|
||||
</view>
|
||||
</uni-section>
|
||||
<!-- 当日功率曲线 uchart的组件最好放在同级-->
|
||||
<uni-section title="当日功率曲线" type="line" class="sections-list">
|
||||
<date-range-select ref="activeChartDateRangeSelect" @updateDate="updateActiveChartDate" />
|
||||
<view style="width:100%;height: 250px;">
|
||||
<qiun-data-charts type="area" :chartData="activeChartData" :optsWatch='false' :inScrollView="true"
|
||||
:pageScrollTop="pageScrollTop" :opts="glqxOptions" :ontouch="true" />
|
||||
</view>
|
||||
</uni-section>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
@ -129,40 +138,27 @@
|
||||
},
|
||||
// 图表数据结束
|
||||
deviceCategoryOptions: [], //当前站点包含的设备类别
|
||||
siteType: 1,
|
||||
siteTypeOptions: [{
|
||||
text: '储能',
|
||||
value: 1,
|
||||
value: 'cn',
|
||||
children: []
|
||||
},
|
||||
{
|
||||
text: '光能',
|
||||
value: 2,
|
||||
value: 'gn',
|
||||
disable: true,
|
||||
children: []
|
||||
},
|
||||
{
|
||||
text: '岸电',
|
||||
value: 3,
|
||||
value: 'ad',
|
||||
disable: true,
|
||||
children: []
|
||||
}
|
||||
],
|
||||
siteList: [],
|
||||
siteId: '', //选择的站点ID
|
||||
baseInfo: {}, //站点基本信息
|
||||
singleZdInfo: [{
|
||||
title: "电站位置",
|
||||
attr: "siteAddress",
|
||||
},
|
||||
{
|
||||
title: "投运时间",
|
||||
attr: "runningTime",
|
||||
},
|
||||
{
|
||||
title: "装机功率(MW)",
|
||||
attr: "installPower",
|
||||
},
|
||||
{
|
||||
title: "装机容量(MW)",
|
||||
attr: "installCapacity",
|
||||
},
|
||||
],
|
||||
gridList: [{
|
||||
page: 'bmszl',
|
||||
icon: 'icon-BMS',
|
||||
@ -222,12 +218,15 @@
|
||||
} = e.detail
|
||||
this.$tab.navigateTo(`/pages/work/${this.gridList[index].page}/index?siteId=${this.siteId}`)
|
||||
},
|
||||
selectedSite(id) {
|
||||
if (id === this.siteId) return
|
||||
this.siteId = id
|
||||
if (this.siteType === 1) {
|
||||
this.updateSiteInfo()
|
||||
}
|
||||
selectedSite(data) {
|
||||
const [typeObj, siteObj] = data.detail.value
|
||||
const {
|
||||
text,
|
||||
value
|
||||
} = siteObj
|
||||
if (value === this.siteId) return
|
||||
this.siteId = value
|
||||
this.updateSiteInfo()
|
||||
},
|
||||
updateSiteInfo() {
|
||||
if (!this.siteId) return
|
||||
@ -236,18 +235,10 @@
|
||||
this.getGVQXData()
|
||||
this.getSiteDeviceCategory()
|
||||
},
|
||||
selectedSiteType(id) {
|
||||
if (id === this.siteType) return
|
||||
this.siteType = id
|
||||
this.siteId = ''
|
||||
this.baseInfo = {}
|
||||
this.weekChartData = {}
|
||||
this.activeChartData = {}
|
||||
},
|
||||
getSiteList() {
|
||||
getAllSites().then(response => {
|
||||
const data = response?.data || []
|
||||
this.siteList = data.map(item => {
|
||||
this.siteTypeOptions.find(i => i.value === 'cn').children = data.map(item => {
|
||||
return {
|
||||
text: item.siteName,
|
||||
value: item.siteId,
|
||||
@ -374,13 +365,11 @@
|
||||
}
|
||||
},
|
||||
// 页面切换不会重新调用，如果希望每次切换页面都重新调接口，使用onShow
|
||||
mounted() {
|
||||
onLoad() {
|
||||
this.$nextTick(() => {
|
||||
this.getSiteList()
|
||||
this.$refs.weekChartDateRangeSelect.init()
|
||||
this.$refs.activeChartDateRangeSelect.init(true)
|
||||
if (this.siteType === 1) {
|
||||
this.getSiteList()
|
||||
}
|
||||
})
|
||||
},
|
||||
// 页面滚动 设置pageScrollTop chart显示需要
|
||||
@ -414,80 +403,172 @@
|
||||
margin-top: 10rpx;
|
||||
}
|
||||
|
||||
.sections-list {
|
||||
margin-bottom: 10rpx;
|
||||
// 站点选择
|
||||
.site-sections-list {
|
||||
background: linear-gradient(to right, #547ef4, #679ff5);
|
||||
padding: 30rpx 30rpx;
|
||||
padding-bottom: 100rpx;
|
||||
|
||||
::v-deep &>.uni-section-header {
|
||||
font-weight: 700;
|
||||
.info {
|
||||
color: #fff;
|
||||
font-size: 26rpx;
|
||||
line-height: 30rpx;
|
||||
}
|
||||
}
|
||||
vertical-align: middle;
|
||||
margin-top: 20rpx;
|
||||
|
||||
.sections-list:not(:first-child) {
|
||||
margin-top: 40rpx;
|
||||
}
|
||||
>.list {
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
|
||||
::v-deep {
|
||||
.uni-section__content-title {
|
||||
font-size: 26rpx !important;
|
||||
}
|
||||
&:not(:last-child) {
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
.uni-select__input-box {
|
||||
width: 100%;
|
||||
>.uni-icons {
|
||||
margin-right: 10rpx;
|
||||
}
|
||||
|
||||
.uni-select__input-text {
|
||||
font-size: 24rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.uni-select__selector-empty,
|
||||
.uni-select__selector-item {
|
||||
font-size: 24rpx;
|
||||
line-height: 36rpx;
|
||||
padding-top: 10rpx;
|
||||
padding-bottom: 10rpx;
|
||||
text-align: left;
|
||||
.uni-data-tree {
|
||||
|
||||
::v-deep {
|
||||
.input-value {
|
||||
border: none;
|
||||
padding-left: 0;
|
||||
|
||||
.selected-area {
|
||||
width: 90%;
|
||||
flex: none;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
|
||||
.selected-list {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
// 选择中的文字样式
|
||||
.text-color {
|
||||
color: #fff;
|
||||
font-size: 34rpx;
|
||||
font-weight: bolder;
|
||||
}
|
||||
|
||||
// 右侧箭头
|
||||
.arrow-area {
|
||||
transform: rotate(-135deg);
|
||||
|
||||
.input-arrow {
|
||||
border-color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.grid-item-box {
|
||||
flex: 1;
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
/* #endif */
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 30rpx 0;
|
||||
// 基本信息
|
||||
.base-info {
|
||||
margin-top: -80rpx;
|
||||
border-radius: 80rpx 80rpx 0 0;
|
||||
padding: 30rpx;
|
||||
background-color: #fff;
|
||||
|
||||
// 装机功率
|
||||
.install-data {
|
||||
.grid-item-box {
|
||||
padding-top: 6rpx;
|
||||
padding-bottom: 6rpx;
|
||||
|
||||
.text {
|
||||
margin-top: 20rpx;
|
||||
color: #000;
|
||||
}
|
||||
}
|
||||
|
||||
.icon {
|
||||
font-size: 52rpx;
|
||||
color: #3a98ff;
|
||||
}
|
||||
|
||||
.text {
|
||||
|
||||
.sections-list {
|
||||
margin-bottom: 10rpx;
|
||||
|
||||
::v-deep &>.uni-section-header {
|
||||
font-weight: 700;
|
||||
font-size: 26rpx;
|
||||
line-height: 30rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.sections-list:not(:first-child) {
|
||||
margin-top: 40rpx;
|
||||
}
|
||||
|
||||
::v-deep {
|
||||
.uni-section__content-title {
|
||||
font-size: 26rpx !important;
|
||||
}
|
||||
|
||||
.uni-select__input-box {
|
||||
width: 100%;
|
||||
|
||||
.uni-select__input-text {
|
||||
font-size: 24rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.uni-select__selector-empty,
|
||||
.uni-select__selector-item {
|
||||
font-size: 24rpx;
|
||||
line-height: 36rpx;
|
||||
padding-top: 10rpx;
|
||||
padding-bottom: 10rpx;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
// .uni-date__x-input {
|
||||
// height: 50rpx;
|
||||
// line-height: 50rpx;
|
||||
// font-size: 26rpx;
|
||||
// }
|
||||
}
|
||||
|
||||
.work-box {
|
||||
|
||||
.icon {
|
||||
font-size: 52rpx;
|
||||
color: #547ef4;
|
||||
}
|
||||
|
||||
.text {
|
||||
font-size: 26rpx;
|
||||
padding-top: 10rpx;
|
||||
color: #000;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
.base-lists {
|
||||
font-size: 24rpx;
|
||||
padding-top: 10rpx;
|
||||
}
|
||||
}
|
||||
line-height: 40rpx;
|
||||
padding: 10rpx 20rpx;
|
||||
padding-left: 40rpx;
|
||||
|
||||
.left {
|
||||
width: 220rpx;
|
||||
display: inline-block;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
|
||||
.base-lists {
|
||||
font-size: 24rpx;
|
||||
line-height: 40rpx;
|
||||
padding: 10rpx 20rpx;
|
||||
padding-left: 40rpx;
|
||||
|
||||
.left {
|
||||
width: 220rpx;
|
||||
display: inline-block;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.right {
|
||||
color: #333;
|
||||
.right {
|
||||
color: #333;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user