354 lines
8.0 KiB
Vue
354 lines
8.0 KiB
Vue
<template>
|
||
<view class="device-warp">
|
||
<u-navbar :is-back="true" :background="background" :border-bottom="false">
|
||
<view class="slot-wrap">
|
||
{{stationName}}
|
||
</view>
|
||
</u-navbar>
|
||
|
||
<view class="site-footer">
|
||
<u-tabs style="width: 100%;" :list="list" :is-scroll="false" :offset="[10,0]" active-color="#009458"
|
||
:current="type" @change="changeTab"></u-tabs>
|
||
<view class="navigation">
|
||
<text v-for="(item,index) in deviceNavArr" :key="index">
|
||
<text class="null-text">{{item.name}}</text>
|
||
<text class="img"></text>
|
||
</text>
|
||
<text class="text" style="color: #009458;">{{deviceName ? deviceName : ''}}</text>
|
||
</view>
|
||
|
||
</view>
|
||
|
||
|
||
<view class="components-box" :style="{height:`calc(100% - ${safeHeight}rpx)`}">
|
||
<JKPCS ref="PCS" v-if="type === 0 && Devicetype === 'pcs' && stationId === 484" />
|
||
<PCS ref="PCS" v-if="type === 0 && Devicetype === 'pcs' && stationId !== 484" />
|
||
<MPPT ref="MPPT" v-if="type === 0 && Devicetype === 'mttp' && stationId !== 484" />
|
||
<Cluster ref="Cluster" v-if="type === 0 && Devicetype === 'cluster'" />
|
||
<Pack ref="Pack" v-if="type === 0 && Devicetype === 'pack'" />
|
||
<Stack ref="Stack" v-if="type === 0 && Devicetype === 'stack' && stationId !== 484 " />
|
||
<JKStack ref="JKStack" v-if="type === 0 && Devicetype === 'stack' && stationId === 484" />
|
||
|
||
<Air ref="Air" v-if="type === 0 && Devicetype === 'air'" />
|
||
<Ammeter ref="Ammeter" v-if="type === 0 && Devicetype === 'ammeter'" />
|
||
<Emu ref="Emu" v-if="type === 0 && Devicetype === 'emu'" />
|
||
<DeviceYX ref="YX" v-if=" list.length === 3 && type === 1 " />
|
||
<DeviceYC ref="YC" v-if=" list.length === 3 &&type === 2 " />
|
||
<DeviceYX ref="YX" v-if=" list.length === 2 && type === 0" />
|
||
<DeviceYC ref="YC" v-if=" list.length === 2 && type === 1" />
|
||
</view>
|
||
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import JKPCS from './components/jingke-pcs.vue'
|
||
import JKStack from './components/jingke-stack.vue'
|
||
import PCS from './components/pcs.vue'
|
||
import MPPT from './components/mppt.vue'
|
||
import Cluster from './components/cluster.vue'
|
||
import Stack from './components/stack.vue'
|
||
import Pack from './components/pack.vue'
|
||
import DeviceYC from './components/yc.vue'
|
||
import DeviceYX from './components/yx.vue'
|
||
import Air from './components/air.vue'
|
||
import Ammeter from './components/ammeter.vue'
|
||
import Emu from './components/emu.vue'
|
||
|
||
export default {
|
||
created() {
|
||
const self = this
|
||
uni.getStorage({
|
||
key: 'deviceNavArr', //本地缓存中的指定的 key
|
||
success(res) { //接口调用的回调函数，res = {data: key对应的内容}
|
||
self.deviceNavArr = res.data
|
||
}
|
||
})
|
||
uni.getStorage({
|
||
key: 'deviceName', //本地缓存中的指定的 key
|
||
success(res) { //接口调用的回调函数，res = {data: key对应的内容}
|
||
self.deviceName = res.data
|
||
}
|
||
})
|
||
},
|
||
watch: {
|
||
currentStation: {
|
||
handler(val) {
|
||
this.stationId = val.id
|
||
this.stationName = val.name
|
||
},
|
||
deep: true,
|
||
immediate: true,
|
||
},
|
||
},
|
||
computed: {
|
||
currentStation() {
|
||
return this.vuex_currentStation;
|
||
}
|
||
},
|
||
onLoad(options) {
|
||
|
||
this.Devicetype = options.type
|
||
if (this.Devicetype === 'storage' || this.Devicetype === 'anything') {
|
||
this.list = [{
|
||
name: this.$t('homePage.device.yx')
|
||
}, {
|
||
name: this.$t('homePage.device.yc'),
|
||
}],
|
||
this.type = 0
|
||
}
|
||
this.srcId = options.srcId
|
||
},
|
||
mounted() {
|
||
this.$nextTick(() => {
|
||
if (this.$refs.JKPCS) {
|
||
this.$refs.JKPCS.getData(this.srcId)
|
||
}
|
||
if (this.$refs.JKStack) {
|
||
this.$refs.JKStack.getData(this.srcId)
|
||
}
|
||
if (this.$refs.PCS) {
|
||
this.$refs.PCS.getData(this.srcId)
|
||
}
|
||
// 新增mppt
|
||
if (this.$refs.MPPT) {
|
||
this.$refs.MPPT.getData(this.srcId)
|
||
}
|
||
if (this.$refs.Stack) {
|
||
this.$refs.Stack.getData(this.srcId)
|
||
}
|
||
if (this.$refs.YC) {
|
||
this.$refs.YC.getData(this.srcId)
|
||
}
|
||
if (this.$refs.YX) {
|
||
this.$refs.YX.getData(this.srcId)
|
||
}
|
||
if (this.$refs.Cluster) {
|
||
this.$refs.Cluster.getData(this.srcId)
|
||
}
|
||
if (this.$refs.Pack) {
|
||
this.$refs.Pack.getData(this.srcId)
|
||
}
|
||
if (this.$refs.Air) {
|
||
this.$refs.Air.getData(this.srcId)
|
||
}
|
||
if (this.$refs.Ammeter) {
|
||
this.$refs.Ammeter.getData(this.srcId)
|
||
}
|
||
if (this.$refs.Emu) {
|
||
this.$refs.Emu.getData(this.srcId)
|
||
}
|
||
})
|
||
},
|
||
components: {
|
||
JKPCS,
|
||
PCS,
|
||
MPPT,
|
||
DeviceYC,
|
||
DeviceYX,
|
||
Cluster,
|
||
Stack,
|
||
Pack,
|
||
Air,
|
||
Ammeter,
|
||
Emu,
|
||
JKStack
|
||
},
|
||
data() {
|
||
return {
|
||
type: 0,
|
||
srcId: null,
|
||
Devicetype: null,
|
||
deviceNavArr: [],
|
||
deviceName: null,
|
||
list: [{
|
||
name: this.$t('homePage.device.data')
|
||
}, {
|
||
name: this.$t('homePage.device.yx')
|
||
}, {
|
||
name: this.$t('homePage.device.yc'),
|
||
}],
|
||
background: {
|
||
backgroundColor: "#0EA17E",
|
||
},
|
||
stationId: null,
|
||
stationName: null,
|
||
safeHeight: 225
|
||
};
|
||
},
|
||
onShow() {
|
||
uni.getSystemInfo({
|
||
success: res => {
|
||
this.safeHeight = this.safeHeight + (res.screenHeight - res.safeArea.bottom) + 60;
|
||
|
||
},
|
||
fail(err) {
|
||
console.log(err);
|
||
}
|
||
})
|
||
},
|
||
onReachBottom() {
|
||
|
||
|
||
},
|
||
|
||
methods: {
|
||
device(val) {
|
||
this.Devicetype = val
|
||
},
|
||
changeTab(type) {
|
||
this.type = type
|
||
|
||
this.$nextTick(() => {
|
||
if (this.$refs.JKPCS) {
|
||
this.$refs.JKPCS.getData(this.srcId)
|
||
}
|
||
if (this.$refs.JKStack) {
|
||
this.$refs.JKStack.getData(this.srcId)
|
||
}
|
||
if (this.$refs.PCS) {
|
||
this.$refs.PCS.getData(this.srcId)
|
||
}
|
||
if (this.$refs.MPPT) {
|
||
this.$refs.MPPT.getData(this.srcId)
|
||
}
|
||
if (this.$refs.Stack) {
|
||
this.$refs.Stack.getData(this.srcId)
|
||
}
|
||
|
||
if (this.$refs.YC) {
|
||
this.$refs.YC.getData(this.srcId)
|
||
}
|
||
if (this.$refs.YX) {
|
||
this.$refs.YX.getData(this.srcId)
|
||
}
|
||
if (this.$refs.Cluster) {
|
||
this.$refs.Cluster.getData(this.srcId)
|
||
}
|
||
if (this.$refs.Pack) {
|
||
this.$refs.Pack.getData(this.srcId)
|
||
}
|
||
if (this.$refs.Air) {
|
||
this.$refs.Air.getData(this.srcId)
|
||
}
|
||
if (this.$refs.Ammeter) {
|
||
this.$refs.Ammeter.getData(this.srcId)
|
||
}
|
||
if (this.$refs.Emu) {
|
||
this.$refs.Emu.getData(this.srcId)
|
||
}
|
||
|
||
})
|
||
|
||
}
|
||
},
|
||
};
|
||
</script>
|
||
<style lang="scss" >
|
||
page{
|
||
height: 100%!important;
|
||
}
|
||
</style>
|
||
|
||
<style lang="scss" scoped>
|
||
.device-warp {
|
||
height: 100%;
|
||
background-color: #f5f5f5;
|
||
padding-top: 0;
|
||
|
||
}
|
||
|
||
::v-deep .u-tabs {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
|
||
.components-box {
|
||
padding: 20rpx;
|
||
// height: calc(100% - 225rpx);
|
||
// overflow: auto;
|
||
margin-top: 20rpx;
|
||
}
|
||
|
||
.slot-wrap {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
color: #fff;
|
||
/* 如果您想让slot内容占满整个导航栏的宽度 */
|
||
flex: 1;
|
||
/* 如果您想让slot内容与导航栏左右有空隙 */
|
||
/* padding: 0 30rpx; */
|
||
}
|
||
|
||
.site-footer {
|
||
width: 100%;
|
||
height: 120rpx;
|
||
margin-bottom: 10rpx;
|
||
display: flex;
|
||
flex-direction: column;
|
||
// flex-direction: row;
|
||
align-items: center;
|
||
justify-content: space-around;
|
||
background-color: #fff;
|
||
z-index: 98;
|
||
|
||
.navigation {
|
||
width: 100%;
|
||
padding-top: 20rpx;
|
||
padding-left: 20rpx;
|
||
background-color: #f5f5f5;
|
||
|
||
.img {
|
||
display: inline-block;
|
||
width: 24rpx;
|
||
height: 24rpx;
|
||
margin-left: 10rpx;
|
||
margin-right: 10rpx;
|
||
background-image: url(/static/aidex/images/arrow-right.png);
|
||
background-size: 100% 120%;
|
||
}
|
||
|
||
.null-text {
|
||
height: 24rpx;
|
||
border-radius: 8rpx;
|
||
padding: 5rpx 10rpx 5rpx 10rpx;
|
||
color: #666666;
|
||
font-size: 20rpx;
|
||
background-color: rgba(217, 217, 217, 0.2);
|
||
padding-left: 5rpx;
|
||
}
|
||
|
||
.text {
|
||
height: 22rpx;
|
||
border: 1rpx solid #009458;
|
||
border-radius: 8rpx;
|
||
padding: 5rpx 10rpx 5rpx 10rpx;
|
||
color: #666666;
|
||
font-size: 20rpx;
|
||
background:#e2fff3;
|
||
padding-left: 5rpx;
|
||
}
|
||
}
|
||
|
||
.footer-item {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
color: #979797;
|
||
|
||
.footer-icon {
|
||
font-size: 48rpx;
|
||
}
|
||
|
||
.footer-title {
|
||
font-size: 28rpx;
|
||
margin-top: 10rpx;
|
||
}
|
||
|
||
&.active {
|
||
color: #24d1a9;
|
||
}
|
||
}
|
||
}
|
||
</style> |