初次提交
This commit is contained in:
344
pages/home-page/device-detail/index.vue
Normal file
344
pages/home-page/device-detail/index.vue
Normal file
@ -0,0 +1,344 @@
|
||||
<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>
|
||||
Reference in New Issue
Block a user