559 lines
14 KiB
Vue
559 lines
14 KiB
Vue
<template>
|
|
<view class="u-page">
|
|
<!-- <zero-loading v-if="loading"></zero-loading> -->
|
|
<!-- 顶部电站 -->
|
|
<view class="new-nav">
|
|
<image type="image" src="../../static/aidex/images/nav-bg.png"
|
|
style="width: 100%; height: 100%; z-index: 0" />
|
|
<view class="station-box">
|
|
<stationDropdow style="width: 100%" ref="dropdow" />
|
|
</view>
|
|
</view>
|
|
<!-- 菜单 -->
|
|
<u-notice-bar mode="horizontal" type="primary" :list="list" style="margin-bottom: 20rpx;"
|
|
@click="toMsg"></u-notice-bar>
|
|
<view class="menu-box">
|
|
<view class="box" @click="changeMenu('device-list')">
|
|
<view class="icon device" />
|
|
<view class="title"> {{ this.$t("homePage.home.device") }} </view>
|
|
</view>
|
|
<view class="box" @click="changeMenu('earningSelect')">
|
|
<view class="icon earning" />
|
|
<view class="title"> {{ this.$t("homePage.home.earning") }} </view>
|
|
</view>
|
|
<view class="box" @click="changeMenu('alarm')">
|
|
<view class="icon alarm" />
|
|
<view class="title"> {{ this.$t("homePage.home.alarm") }} </view>
|
|
</view>
|
|
<view class="box" @click="changeMenu('policy-management')">
|
|
<view class="icon policy" />
|
|
<view class="title"> {{ this.$t("homePage.home.policy") }} </view>
|
|
</view>
|
|
</view>
|
|
<!-- 内容 -->
|
|
<view class="content-box">
|
|
|
|
<view class="box">
|
|
<Section :title="$t('homePage.home.stationTopo')" />
|
|
<cixi v-if="topologyType === 0" ref="tuopu" />
|
|
<kejiyuan v-else-if="topologyType === 2" ref="tuopu" />
|
|
<lingchao v-else-if="topologyType === 3" ref="tuopu" />
|
|
<jingke v-else-if="topologyType === 4" ref="tuopu" />
|
|
<weishanhu v-else-if="topologyType === 5" ref="tuopu" />
|
|
<zhongzihuanbao v-else-if="topologyType === 6" ref="tuopu" />
|
|
<sanmenxia v-else-if="topologyType === 7" ref="tuopu" />
|
|
<second v-else-if="topologyType === 8" ref="tuopu" />
|
|
<fire v-else-if="topologyType === 9" ref="tuopu" />
|
|
<runda100 v-else-if="topologyType === 10" ref="tuopu" />
|
|
<runda230 v-else-if="topologyType === 11" ref="tuopu" />
|
|
<runda215 v-else-if="topologyType === 12" ref="tuopu" />
|
|
<third v-else-if="topologyType === 13" ref="tuopu" />
|
|
<mdPviese v-else-if="topologyType === 14" ref="tuopu" />
|
|
<ceshi-t v-else-if="topologyType === 1" />
|
|
<standard v-else ref="tuopu" />
|
|
</view>
|
|
<view class="box">
|
|
<Section title="测试01" />
|
|
<view class="marginT20" >
|
|
<!-- <iframe :src="src" frameborder="0"></iframe> -->
|
|
<web-view :src="src" :fullscreen="false" style="height: 200rpx;"></web-view>
|
|
</view>
|
|
</view>
|
|
<!-- <view class="box">
|
|
<Section title="测试02" />
|
|
<view class="marginT20">
|
|
<ceshi-l />
|
|
</view>
|
|
</view>
|
|
<view class="box">
|
|
<Section title="测试03" />
|
|
当前组件有数据处理示例
|
|
<view class="marginT20">
|
|
<ceshi-s />
|
|
</view>
|
|
</view> -->
|
|
<view v-if="topologyType === 9" class="box">
|
|
<Section :title="$t('homePage.home.deviceMonitor')" />
|
|
<devicemonitoring ref="deviceFire" />
|
|
</view>
|
|
|
|
<view class="box">
|
|
<Section :title="$t('homePage.home.runCurve')" />
|
|
<runChart ref="runChart" />
|
|
</view>
|
|
|
|
<view class="box">
|
|
<Section :title="$t('homePage.home.chargeDisData')">
|
|
<view slot="right" style="flex: 1">
|
|
<view class="top-right-box">
|
|
<view class="top-right-item" :class="{ active: activeTime === 'day' }"
|
|
@click="changeTime('day')">{{this.$t('homePage.home.sevenDay')}}
|
|
</view>
|
|
<view class="top-right-item" :class="{ active: activeTime === 'month' }"
|
|
@click="changeTime('month')">{{this.$t('homePage.home.monthDay')}}
|
|
</view>
|
|
<view class="top-right-item" :class="{ active: activeTime === 'year' }"
|
|
@click="changeTime('year')">{{this.$t('homePage.home.yearDay')}}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</Section>
|
|
<dischargeChart ref="dischargeChart" :activeTime="activeTime" />
|
|
</view>
|
|
|
|
<view class="box">
|
|
<Section :title="$t('homePage.home.stationData')" />
|
|
<wshStationData v-if="topologyType === 5" />
|
|
<zzhbStationData v-else-if="topologyType === 6" />
|
|
<commonStationData v-else />
|
|
</view>
|
|
<view class="box" v-if="topologyType === 1">
|
|
<Section :title="$t('homePage.home.pvKpi')" />
|
|
<view class="">
|
|
<my-grid imgHeight="40rpx" imgWidth="40rpx" :list="lightArr" />
|
|
</view>
|
|
</view>
|
|
<view class="box" v-if="topologyType === 1">
|
|
<Section :title="$t('homePage.home.environmentalData')" />
|
|
<environmentalControlPosition v-if="rightCenter === 'dispositionRightCenter'" />
|
|
<environmentalControl v-else />
|
|
</view>
|
|
<view class="box">
|
|
<Section :title="$t('homePage.home.socialContribution')" />
|
|
<view class="">
|
|
<my-grid :col="3" imgHeight="72rpx" imgWidth="82rpx" :list="society" />
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
|
|
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import myGrid from './components/grid/index.vue'
|
|
import stationDropdow from '@/components/station-dropdow/index'
|
|
import Section from "@/components/section/index";
|
|
import charts from "@/components/charts/index";
|
|
import cixi from './components/topology/cixi'
|
|
import ceshiT from './components/topology/ceshiT.vue'
|
|
import ceshiL from './components/topology/ceshiL.vue'
|
|
import ceshiS from './components/topology/ceshiS.vue'
|
|
import weishanhu from './components/topology/weishanhu.vue'
|
|
import sanmenxia from './components/topology/sanmenxia.vue'
|
|
import lingchao from './components/topology/lingchao.vue'
|
|
import zhongzihuanbao from './components/topology/zhongzihuanbao.vue'
|
|
import kejiyuan from './components/topology/kejiyuan.vue'
|
|
import standard from './components/topology/standard.vue'
|
|
import jingke from './components/topology/jingke.vue'
|
|
import second from './components/topology/second.vue'
|
|
import third from './components/topology/third.vue'
|
|
import fire from './components/topology/fire.vue'
|
|
import runda100 from './components/topology/runda100.vue'
|
|
import runda215 from './components/topology/runda215.vue'
|
|
import runda230 from './components/topology/runda230.vue'
|
|
import runChart from './components/runChart/index'
|
|
import dischargeChart from './components/dischargeChart/index'
|
|
import environmentalControl from './components/environmentalControl/index'
|
|
import environmentalControlPosition from './components/environmentalControl/position.vue'
|
|
import commonStationData from './components/stationData/common'
|
|
import zzhbStationData from './components/stationData/zzhb'
|
|
import wshStationData from './components/stationData/wsh'
|
|
import devicemonitoring from './components/topology/devicemonitoring.vue'
|
|
import mdPviese from './components/topology/mdPvdieseTopCenter.vue'
|
|
|
|
export default {
|
|
components: {
|
|
ceshiT,
|
|
ceshiL,
|
|
ceshiS,
|
|
myGrid,
|
|
stationDropdow,
|
|
Section,
|
|
environmentalControlPosition,
|
|
charts,
|
|
runda100,
|
|
runda215,
|
|
runda230,
|
|
second,
|
|
cixi,
|
|
fire,
|
|
third,
|
|
weishanhu,
|
|
sanmenxia,
|
|
mdPviese,
|
|
lingchao,
|
|
zhongzihuanbao,
|
|
kejiyuan,
|
|
standard,
|
|
jingke,
|
|
runChart,
|
|
dischargeChart,
|
|
environmentalControl,
|
|
commonStationData,
|
|
zzhbStationData,
|
|
wshStationData,
|
|
devicemonitoring
|
|
},
|
|
data() {
|
|
return {
|
|
// #ifdef APP
|
|
src: '/static/html/demo.html',
|
|
// #endif
|
|
// #ifdef H5
|
|
src: '/static/html/demo.html',
|
|
// #endif
|
|
loading: false,
|
|
curve_option: {},
|
|
charge_option: {},
|
|
activeTime: 'day',
|
|
topologyType: 0,
|
|
list: [],
|
|
messageList: [],
|
|
timer: null,
|
|
tuopuTimer: null,
|
|
rightCenter: null,
|
|
society: [{
|
|
label: this.$t('homePage.home.saveStandardCoal'),
|
|
value: '15.00',
|
|
image: require('@/static/aidex/images/ll01.png'),
|
|
},
|
|
{
|
|
label: this.$t('homePage.home.equivalentCo2Reduction'),
|
|
value: '20.50',
|
|
image: require('@/static/aidex/images/ll02.png'),
|
|
},
|
|
{
|
|
label: this.$t('homePage.home.equivalentTreePlantings'),
|
|
value: '1.50',
|
|
image: require('@/static/aidex/images/ll03.png'),
|
|
},
|
|
],
|
|
lightArr: [{
|
|
label: this.$t('homePage.home.totalCapacity') + '(kW)',
|
|
value: '100.00',
|
|
image: require('@/static/aidex/images/ll05.png'),
|
|
},
|
|
{
|
|
label: this.$t('homePage.home.currentPower') + '(kW)',
|
|
value: '47.00',
|
|
image: require('@/static/aidex/images/ll06.png'),
|
|
},
|
|
{
|
|
label: this.$t('homePage.home.dailyPowerGeneration') + '(kWh)',
|
|
value: '85.00',
|
|
image: require('@/static/aidex/images/ll07.png'),
|
|
showMark: true
|
|
},
|
|
{
|
|
label: this.$t('homePage.home.cumulativePowerGeneration') + '(kWh)',
|
|
value: '496.00',
|
|
image: require('@/static/aidex/images/ll07.png'),
|
|
showMark: true
|
|
},
|
|
]
|
|
};
|
|
},
|
|
computed: {
|
|
currentStation() {
|
|
return this.vuex_currentStation;
|
|
},
|
|
userData() {
|
|
return this.vuex_user
|
|
},
|
|
language() {
|
|
return this.vuex_language
|
|
}
|
|
},
|
|
onHide() {
|
|
if (this.timer) {
|
|
clearInterval(this.timer)
|
|
}
|
|
if (this.tuopuTimer) {
|
|
clearInterval(this.tuopuTimer)
|
|
}
|
|
},
|
|
watch: {
|
|
currentStation: {
|
|
handler(val) {
|
|
if (val && val.id) {
|
|
|
|
this.stationId = val.id
|
|
this.userId = this.userData.userId
|
|
console.log('拓扑图',val)
|
|
this.topologyType = val.topologyType
|
|
this.getComponents()
|
|
this.$nextTick(() => {
|
|
if (this.$refs.tuopu) {
|
|
this.$refs.tuopu.getData(val.id)
|
|
}
|
|
|
|
if (this.$refs.deviceFire) {
|
|
this.$refs.deviceFire.getData(this.stationId)
|
|
}
|
|
})
|
|
}
|
|
},
|
|
deep: true,
|
|
immediate: true,
|
|
},
|
|
|
|
},
|
|
created() {
|
|
|
|
uni.setTabBarItem({
|
|
index: 0,
|
|
text: this.$t('homePage.home.station'),
|
|
})
|
|
uni.setTabBarItem({
|
|
index: 1,
|
|
text: this.$t('homePage.home.electricityPrice'),
|
|
})
|
|
uni.setTabBarItem({
|
|
index: 2,
|
|
text: this.$t('homePage.home.mine'),
|
|
})
|
|
uni.showLoading({
|
|
title: this.$t('homePage.home.loading')
|
|
})
|
|
},
|
|
onShow() {
|
|
this.getComponents()
|
|
this.getMessage()
|
|
if (this.$refs.runChart && this.stationId) {
|
|
this.$refs.runChart.getData()
|
|
}
|
|
if (this.$refs.dischargeChart && this.stationId) {
|
|
this.$refs.dischargeChart.getData()
|
|
}
|
|
this.$nextTick(() => {
|
|
|
|
if (this.$refs.tuopu) {
|
|
this.$refs.tuopu.changeEnglish()
|
|
this.$refs.tuopu.getData(this.stationId)
|
|
}
|
|
|
|
if (this.$refs.deviceFire) {
|
|
this.$refs.deviceFire.getData(this.stationId)
|
|
}
|
|
})
|
|
this.timer = setInterval(() => {
|
|
this.getMessage()
|
|
}, 5000)
|
|
this.$nextTick(() => {
|
|
this.tuopuTimer = setInterval(() => {
|
|
if (this.$refs.tuopu) {
|
|
this.$refs.tuopu.getData(this.stationId)
|
|
}
|
|
if (this.$refs.deviceFire) {
|
|
this.$refs.deviceFire.getData(this.stationId)
|
|
}
|
|
}, 1000 * 10 * 60)
|
|
})
|
|
|
|
},
|
|
methods: {
|
|
async getComponents() {
|
|
const {
|
|
data
|
|
} = await this.$u.api.homePageData.GetHomePageComponents(this.stationId)
|
|
if (data && data.length > 0) {
|
|
this.rightCenter = data[0]?.rightCenter
|
|
}
|
|
},
|
|
openTimer() {
|
|
|
|
},
|
|
closeTimer() {
|
|
|
|
},
|
|
toMsg() {
|
|
uni.navigateTo({
|
|
url: `/pages/sys/user/message`,
|
|
});
|
|
},
|
|
tagVal(val) {
|
|
if (+val === 1) {
|
|
return `[${this.$t('homePage.home.environmentalData')}]:`
|
|
} else if (+val === 2) {
|
|
return `[${this.$t('homePage.home.fault')}]:`
|
|
} else if (+val === 3) {
|
|
return `[${this.$t('homePage.home.alarm')}]:`
|
|
}
|
|
},
|
|
getMessage() {
|
|
this.$u.api.GetMessage({
|
|
receivingUser: this.userId,
|
|
stationId: this.stationId,
|
|
createstatus: 3,
|
|
readStatus: 0
|
|
}).then((res) => {
|
|
this.messageList = res.data
|
|
this.list = []
|
|
this.messageList.forEach((item, index) => {
|
|
this.list.push(this.tagVal(item.messageType) + item.messageContent)
|
|
})
|
|
})
|
|
},
|
|
changeTime(val) {
|
|
if (this.activeTime !== val) {
|
|
this.activeTime = val;
|
|
}
|
|
},
|
|
changeMenu(url) {
|
|
uni.navigateTo({
|
|
url: `/pages/home-page/${url}/index`,
|
|
});
|
|
}
|
|
|
|
},
|
|
};
|
|
</script>
|
|
<style>
|
|
page {
|
|
height: 100%;
|
|
}
|
|
</style>
|
|
<style lang="scss" scoped>
|
|
.u-page {
|
|
|
|
height: 100% !important;
|
|
background-color: #f5f5f5;
|
|
overflow: hidden;
|
|
|
|
.new-nav {
|
|
width: 100%;
|
|
height: 440rpx;
|
|
background-size: 100% 100%;
|
|
margin-bottom: -15rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
position: relative;
|
|
|
|
image {
|
|
position: absolute;
|
|
top: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
}
|
|
|
|
.station-box {
|
|
width: 580rpx;
|
|
margin-top: -160rpx;
|
|
// border: 1px solid #fff;
|
|
margin-left: 85rpx;
|
|
border-radius: 44rpx;
|
|
z-index: 1;
|
|
|
|
::v-deep .u-input__input {
|
|
color: #000 !important;
|
|
}
|
|
|
|
::v-deep .uicon-arrow-down-fill {
|
|
color: #000 !important;
|
|
}
|
|
|
|
// backdrop-filter: blur(4rpx);
|
|
}
|
|
}
|
|
|
|
.menu-box {
|
|
width: 100%;
|
|
height: 140rpx;
|
|
padding-left: 20rpx;
|
|
padding-right: 20rpx;
|
|
margin-bottom: 20rpx;
|
|
margin-top: 20rpx;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
|
|
.box {
|
|
width: 140rpx;
|
|
height: 140rpx;
|
|
border-radius: 8rpx;
|
|
box-shadow: 2rpx 4rpx 8rpx 0rpx rgba(0, 0, 0, 0.08);
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background-color: #fff;
|
|
|
|
.icon {
|
|
width: 64rpx;
|
|
height: 64rpx;
|
|
}
|
|
|
|
.device {
|
|
background-image: url(/static/aidex/images/menu-device.png);
|
|
background-size: 100% 100%;
|
|
}
|
|
|
|
.earning {
|
|
background-image: url(/static/aidex/images/menu-earnings.png);
|
|
background-size: 100% 100%;
|
|
}
|
|
|
|
.alarm {
|
|
background-image: url(/static/aidex/images/menu-alarm.png);
|
|
background-size: 100% 100%;
|
|
}
|
|
|
|
.policy {
|
|
background-image: url(/static/aidex/images/menu-policy.png);
|
|
background-size: 100% 100%;
|
|
}
|
|
|
|
.title {
|
|
margin-top: 16rpx;
|
|
font-size: 24rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
.content-box {
|
|
height: calc(100% - 640rpx);
|
|
overflow-y: auto;
|
|
|
|
|
|
.box {
|
|
background: #ffffff;
|
|
border-radius: 16rpx;
|
|
padding: 30rpx;
|
|
width: 710rpx;
|
|
border: 16rpx;
|
|
margin: 20rpx;
|
|
margin-top: 30rpx;
|
|
box-shadow: 0px 4rpx 16rpx rgba(0, 0, 0, 0.08);
|
|
|
|
.top-right-box {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
flex: 1;
|
|
justify-content: flex-end;
|
|
|
|
.top-right-item {
|
|
padding: 5rpx 10rpx;
|
|
border: 1rpx solid #009458;
|
|
font-size: 24rpx;
|
|
color: #009458;
|
|
cursor: pointer;
|
|
margin-right: 10rpx;
|
|
border-radius: 8rpx;
|
|
|
|
&.active {
|
|
background: #07976E;
|
|
color: #ffffff;
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
}
|
|
}
|
|
|
|
|
|
}
|
|
</style> |