344 lines
7.7 KiB
Vue
344 lines
7.7 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="#009C77"
|
|||
|
|
: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: #009C77;">{{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" />
|
|||
|
|
<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 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)
|
|||
|
|
}
|
|||
|
|
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,
|
|||
|
|
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.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 rgba(0, 156, 119, 1);
|
|||
|
|
border-radius: 8rpx;
|
|||
|
|
padding: 5rpx 10rpx 5rpx 10rpx;
|
|||
|
|
color: #666666;
|
|||
|
|
font-size: 20rpx;
|
|||
|
|
background-color: rgba(0, 156, 119, 0.1);
|
|||
|
|
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>
|