338 lines
8.8 KiB
Vue
338 lines
8.8 KiB
Vue
<template>
|
||
<view class="work-container">
|
||
<!-- 站点选择列表 -->
|
||
<uni-section title="业态选择" type="line" :titleFontSize="titleFontSize" class="sections-list">
|
||
<uni-row>
|
||
<uni-col :span="10" :offset='1'>
|
||
<uni-section title="业态列表" titleFontSize="14px">
|
||
<uni-data-select :clear="false" :value="siteType" :localdata="siteTypeOptions"
|
||
@change="selectedSiteType"></uni-data-select>
|
||
</uni-section>
|
||
</uni-col>
|
||
<uni-col :span="10" :offset='2'>
|
||
<uni-section title="可选清单" titleFontSize="14px">
|
||
<uni-data-select ref="siteListSelect" :clear="false" :value="siteId"
|
||
:localdata="siteType ===1 ? siteList : []" @change="selectedSite"></uni-data-select>
|
||
</uni-section>
|
||
</uni-col>
|
||
</uni-row>
|
||
</uni-section>
|
||
<!-- 静态信息 -->
|
||
<uni-section title="静态信息" type="line" :titleFontSize="titleFontSize" 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>
|
||
</uni-section>
|
||
<!-- 工作台 -->
|
||
<uni-section title="工作台" type="line" :titleFontSize="titleFontSize" class="sections-list">
|
||
<view class="grid-body">
|
||
<uni-grid :column="4" :showBorder="false" @change="toDetail">
|
||
<uni-grid-item v-for="(item,index) in gridList" :index="index" :key="index+'work'">
|
||
<view class="grid-item-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" :titleFontSize="titleFontSize" class="sections-list">
|
||
<date-range-select ref="weekChartDateRangeSelect" @updateDate="updateWeekChartDate" />
|
||
<view style="width:100%;height: 250px;">
|
||
<qiun-data-charts type="line" :chartData="weekChartData" :optsWatch='false' :inScrollView="true"
|
||
:canvas2d="true" canvasId="scrollcolumnid" :pageScrollTop="pageScrollTop" :opts="options"
|
||
:ontouch="true" />
|
||
</view>
|
||
</uni-section>
|
||
<!-- 当日功率曲线 uchart的组件最好放在同级-->
|
||
<uni-section title="当日功率曲线" type="line" :titleFontSize="titleFontSize" class="sections-list">
|
||
<date-range-select ref="activeChartDateRangeSelect" @updateDate="updateActiveChartDate" />
|
||
<view style="width:100%;height: 250px;">
|
||
<qiun-data-charts type="line" :chartData="activeChartData" :optsWatch='false' :inScrollView="true"
|
||
:canvas2d="true" canvasId="scrollcolumnid" :pageScrollTop="pageScrollTop" :opts="options"
|
||
:ontouch="true" />
|
||
</view>
|
||
</uni-section>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import WeekChart from './WeekChart.vue'
|
||
import DateRangeSelect from './DateRangeSelect.vue'
|
||
import {
|
||
getAllSites,
|
||
getSingleSiteBaseInfo,
|
||
getSevenChargeData,
|
||
} from '@/api/ems/site.js'
|
||
export default {
|
||
components: {
|
||
WeekChart,
|
||
DateRangeSelect
|
||
},
|
||
data() {
|
||
return {
|
||
// 图表数据
|
||
weekChartTimeRange: [],
|
||
activeChartTimeRange: [],
|
||
weekChartData: {},
|
||
activeChartData: {},
|
||
pageScrollTop: 0,
|
||
options: {
|
||
enableScroll: true,
|
||
xAxis: {
|
||
scrollShow: true,
|
||
itemCount: 7,
|
||
disableGrid: true
|
||
},
|
||
update: true,
|
||
// duration: 2,
|
||
// animation: false,
|
||
// enableScroll: true,
|
||
// padding: [10, 15, 10, 15]
|
||
},
|
||
|
||
// 图表数据结束
|
||
|
||
titleFontSize: '16px',
|
||
siteType: 1,
|
||
siteTypeOptions: [{
|
||
text: '储能',
|
||
value: 1,
|
||
},
|
||
{
|
||
text: '光能',
|
||
value: 2,
|
||
},
|
||
{
|
||
text: '岸电',
|
||
value: 3,
|
||
}
|
||
],
|
||
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',
|
||
text: 'BMS总览',
|
||
},
|
||
{
|
||
page: 'bmsdcc',
|
||
icon: 'icon-a-dianchicunengliangkuai',
|
||
text: 'BMS电池簇',
|
||
},
|
||
{
|
||
page: 'pcs',
|
||
icon: 'icon-PCS',
|
||
text: 'PCS',
|
||
},
|
||
{
|
||
page: 'db',
|
||
icon: 'icon-dianbiao4',
|
||
text: '电表',
|
||
},
|
||
{
|
||
page: 'dtdc',
|
||
icon: 'icon-dantidianchi',
|
||
text: '单体电池',
|
||
}
|
||
]
|
||
}
|
||
},
|
||
methods: {
|
||
// 更新一周冲放曲线时间范围 重置图表
|
||
updateWeekChartDate(data) {
|
||
this.weekChartTimeRange = data || []
|
||
this.siteId && this.getWeekChartData()
|
||
},
|
||
// 更新当日功率曲线时间范围 重置图表
|
||
updateActiveChartDate(data) {
|
||
this.weekChartTimeRange = data || []
|
||
//todo 更新当日功率曲线 接口还没定
|
||
// this.siteId && this.getWeekChartData()
|
||
},
|
||
toDetail(e) {
|
||
if (!this.siteId) return uni.showToast({
|
||
title: "请选择清单",
|
||
icon: 'none'
|
||
})
|
||
const {
|
||
index
|
||
} = 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.getSiteBaseInfo()
|
||
this.getWeekChartData()
|
||
//todo 更新当日功率曲线
|
||
}
|
||
},
|
||
selectedSiteType(id) {
|
||
if (id === this.siteType) return
|
||
this.siteType = id
|
||
this.siteId = ''
|
||
this.baseInfo = {}
|
||
this.weekChartData = {}
|
||
this.activeChartData = {}
|
||
},
|
||
getSiteBaseInfo() {
|
||
getSingleSiteBaseInfo({
|
||
siteId: this.siteId
|
||
}).then(response => {
|
||
console.log('获取站点基本信息', response)
|
||
this.baseInfo = response?.data || {}
|
||
})
|
||
},
|
||
getSiteList() {
|
||
getAllSites().then(response => {
|
||
const data = response?.data || []
|
||
this.siteList = data.map(item => {
|
||
return {
|
||
text: item.siteName,
|
||
value: item.siteId,
|
||
id: item.id
|
||
}
|
||
})
|
||
// 设置默认展示的站点
|
||
if (data.length > 0) {
|
||
this.siteId = data[0].siteId
|
||
this.getSiteBaseInfo()
|
||
this.getWeekChartData()
|
||
//todo 更新当日功率曲线
|
||
}
|
||
})
|
||
},
|
||
getWeekChartData() {
|
||
this.$refs.weekChartDateRangeSelect.showBtnLoading(true)
|
||
getSevenChargeData({
|
||
siteId: this.siteId,
|
||
startDate: this.weekChartTimeRange[0],
|
||
endDate: this.weekChartTimeRange[1]
|
||
}).then(response => {
|
||
console.log('一周功率曲线', response)
|
||
let data = response?.data || [],
|
||
categories = [],
|
||
chargedCap = [],
|
||
disChargedCap = []
|
||
data.forEach(item => {
|
||
categories.push(item.ammeterDate || undefined)
|
||
chargedCap.push(item.chargedCap || undefined)
|
||
disChargedCap.push(item.disChargedCap || undefined)
|
||
})
|
||
this.weekChartData = JSON.parse(JSON.stringify({
|
||
categories,
|
||
series: [{
|
||
"name": '充电量',
|
||
"data": chargedCap
|
||
},
|
||
{
|
||
"name": '放电量',
|
||
"data": disChargedCap
|
||
}
|
||
]
|
||
}))
|
||
}).finally(() => this.$refs.weekChartDateRangeSelect.showBtnLoading(false))
|
||
}
|
||
},
|
||
// 页面切换不会重新调用，如果希望每次切换页面都重新调接口，使用onShow
|
||
mounted() {
|
||
this.$nextTick(() => {
|
||
this.$refs.weekChartDateRangeSelect.init()
|
||
this.$refs.activeChartDateRangeSelect.init()
|
||
if (this.siteType === 1) {
|
||
this.getSiteList()
|
||
}
|
||
})
|
||
},
|
||
// 页面滚动 设置pageScrollTop chart显示需要
|
||
onPageScroll(e) {
|
||
this.pageScrollTop = e.scrollTop
|
||
},
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
/* #ifndef APP-NVUE */
|
||
page {
|
||
display: flex;
|
||
flex-direction: column;
|
||
box-sizing: border-box;
|
||
background-color: #fff;
|
||
min-height: 100%;
|
||
height: auto;
|
||
}
|
||
|
||
view {
|
||
font-size: 14px;
|
||
line-height: inherit;
|
||
}
|
||
|
||
/* #endif */
|
||
|
||
.text {
|
||
text-align: center;
|
||
font-size: 26rpx;
|
||
margin-top: 10rpx;
|
||
}
|
||
|
||
.sections-list:not(:first-child) {
|
||
margin-top: 40rpx;
|
||
}
|
||
|
||
.grid-item-box {
|
||
flex: 1;
|
||
/* #ifndef APP-NVUE */
|
||
display: flex;
|
||
/* #endif */
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
padding: 30rpx 0;
|
||
}
|
||
|
||
.icon {
|
||
font-size: 52rpx;
|
||
color: #3a98ff;
|
||
}
|
||
|
||
.base-lists {
|
||
font-size: 28rpx;
|
||
line-height: 40rpx;
|
||
padding: 10rpx 20rpx;
|
||
padding-left: 40rpx;
|
||
|
||
.left {
|
||
width: 220rpx;
|
||
display: inline-block;
|
||
color: #666;
|
||
}
|
||
|
||
.right {
|
||
color: #333;
|
||
}
|
||
}
|
||
|
||
@media screen and (min-width: 500px) {}
|
||
</style> |