重构
This commit is contained in:
153
pages/index.vue
153
pages/index.vue
@ -1,20 +1,7 @@
|
||||
<template>
|
||||
<view class="home-container">
|
||||
<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>
|
||||
</view>
|
||||
<site-switch-header :site-id="siteId" :site-type-options="siteTypeOptions" :site-address="baseInfo.siteAddress"
|
||||
:running-time="baseInfo.runningTime" @change="selectedSite" />
|
||||
|
||||
<view class="base-info">
|
||||
<view class="map-card">
|
||||
@ -63,34 +50,37 @@
|
||||
import {
|
||||
getAllSites,
|
||||
getSingleSiteBaseInfo,
|
||||
getDzjkHomeView,
|
||||
getDzjkHomeTotalView,
|
||||
getProjectDisplayData,
|
||||
getAmmeterRevenueData
|
||||
} from '@/api/ems/site.js'
|
||||
import SiteSwitchHeader from '@/components/SiteSwitchHeader/index.vue'
|
||||
const createSiteTypeOptions = () => ([{
|
||||
text: '储能',
|
||||
value: 'cn',
|
||||
children: []
|
||||
},
|
||||
{
|
||||
text: '光能',
|
||||
value: 'gn',
|
||||
children: []
|
||||
},
|
||||
{
|
||||
text: '岸电',
|
||||
value: 'ad',
|
||||
children: []
|
||||
}
|
||||
])
|
||||
|
||||
export default {
|
||||
components: {
|
||||
SiteSwitchHeader
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
pageScrollTop: 0,
|
||||
siteOptions: [],
|
||||
siteTypeOptions: [{
|
||||
text: '储能',
|
||||
value: 'cn',
|
||||
children: []
|
||||
},
|
||||
{
|
||||
text: '光能',
|
||||
value: 'gn',
|
||||
disable: true,
|
||||
children: []
|
||||
},
|
||||
{
|
||||
text: '岸电',
|
||||
value: 'ad',
|
||||
disable: true,
|
||||
children: []
|
||||
}
|
||||
],
|
||||
siteTypeOptions: createSiteTypeOptions(),
|
||||
siteId: '',
|
||||
mapUrl: '',
|
||||
baseInfo: {},
|
||||
@ -251,21 +241,29 @@
|
||||
getSiteList() {
|
||||
getAllSites().then(response => {
|
||||
const data = response?.data || []
|
||||
const children = data.map(item => {
|
||||
return {
|
||||
const canAccessAll = !this.belongSite || this.belongSite.length === 0 || this.belongSite.includes('all')
|
||||
const siteTypeOptions = createSiteTypeOptions().map(item => ({
|
||||
...item,
|
||||
children: []
|
||||
}))
|
||||
data.forEach(item => {
|
||||
if (!canAccessAll && !this.belongSite.includes(item.siteId)) return
|
||||
const siteType = (item.siteType || item.type || 'cn').toString().toLowerCase()
|
||||
const typeOption = siteTypeOptions.find(i => i.value === siteType) || siteTypeOptions.find(i => i.value === 'cn')
|
||||
if (!typeOption) return
|
||||
typeOption.children.push({
|
||||
text: item.siteName,
|
||||
value: item.siteId,
|
||||
id: item.id,
|
||||
longitude: Number(item.longitude || 0),
|
||||
latitude: Number(item.latitude || 0),
|
||||
disable: !this.belongSite || this.belongSite.length === 0 || this.belongSite.includes('all') ? false : !this
|
||||
.belongSite.includes(item.siteId)
|
||||
}
|
||||
latitude: Number(item.latitude || 0)
|
||||
})
|
||||
})
|
||||
this.siteTypeOptions.find(i => i.value === 'cn').children = children
|
||||
this.siteOptions = children
|
||||
const defaultSiteId = this.isAvailableSite(this.currentSiteId) ? this.currentSiteId : (children.find(item => !item
|
||||
.disable)?.value || '')
|
||||
this.siteTypeOptions = siteTypeOptions.filter(item => (item.children || []).length > 0)
|
||||
this.siteOptions = this.siteTypeOptions.reduce((result, typeItem) => {
|
||||
return result.concat(typeItem.children || [])
|
||||
}, [])
|
||||
const defaultSiteId = this.isAvailableSite(this.currentSiteId) ? this.currentSiteId : (this.siteOptions[0]?.value || '')
|
||||
if (defaultSiteId) {
|
||||
this.siteId = defaultSiteId
|
||||
this.$store.commit('SET_CURRENTSITEID', defaultSiteId)
|
||||
@ -290,7 +288,7 @@
|
||||
},
|
||||
getRunningInfo() {
|
||||
return Promise.all([
|
||||
getDzjkHomeView(this.siteId),
|
||||
getDzjkHomeTotalView(this.siteId),
|
||||
getProjectDisplayData(this.siteId)
|
||||
]).then(([homeResponse, displayResponse]) => {
|
||||
this.runningInfo = homeResponse?.data || {}
|
||||
@ -416,71 +414,6 @@
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
.site-sections-list {
|
||||
background: linear-gradient(to right, #547ef4, #679ff5);
|
||||
padding: 30rpx 30rpx;
|
||||
padding-bottom: 100rpx;
|
||||
color: #fff;
|
||||
|
||||
.info {
|
||||
color: #fff;
|
||||
font-size: 26rpx;
|
||||
line-height: 30rpx;
|
||||
vertical-align: middle;
|
||||
margin-top: 20rpx;
|
||||
|
||||
>.list {
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
|
||||
&:not(:last-child) {
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
>.uni-icons {
|
||||
margin-right: 10rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.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;
|
||||
line-height: 36rpx;
|
||||
font-weight: bolder;
|
||||
}
|
||||
|
||||
.arrow-area {
|
||||
transform: rotate(-135deg);
|
||||
|
||||
.input-arrow {
|
||||
border-color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.base-info {
|
||||
margin-top: -80rpx;
|
||||
border-radius: 80rpx 80rpx 0 0;
|
||||
|
||||
Reference in New Issue
Block a user