ox_zhiNengZhuShou/src/subpackage/device/pages/index/index.vue

<template>
    <view class="index-container">
		<view class="ic-top-box">
			<image class="custom-back" @click="goBack()" src="../../static/images/arrow_back.png" :style="{top:getTop(18) + 'px'}" mode=""></image>
			<view class="brand-name" :style="{marginTop:getTop(30) + 'px'}">{{curStoreInfo.brand_name}}</view>
			<store-name :theme="'light'"></store-name>
			
			<view class="device-info">
				<text class="device-name">欧轩智能中控</text>
				<text>设备id: {{curStoreInfo.device_name||"-"}}</text>
				<text>最后上线时间：{{deviceInfo.LastOfflineTimeStr||"-"}}</text>
				<view class="">
					<view class="">状态：{{deviceInfo.Online==1?'在线':'离线'}}</view>
					<view class="" @click="goTimingList">
						<image src="../../static/images/icon_clock.png" mode=""></image>
						定时列表</view>
				</view>
			</view>
		</view>
		
        <view class="ic-section">
            <view class="is-list">
                <view class="il-item" v-for="(e,i) in tabArr" :key="i" @click="routeTo(e)">
                    <view><image mode="aspectFit" :src="getImgPath(e.id) || ''"></image></view>
                    <view>{{e.name || ''}}</view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
import util from '../../../../utils/util';
import store_name from '../../components/store_name/store_name';
import deviceServer from '../../js/device_server';
import deviceApi from '../../js/device_api';

const rootPage = '/subpackage/device'
const tabArr = [
	
    {id: 1, name: '照明', path: `/pages/switch_manage/switch_manage`},
    {id: 2, name: '空调', path: `/pages/switch_manage/switch_manage`},
    {id: 3, name: '风扇', path: `/pages/switch_manage/switch_manage`},
    {id: 4, name: '门禁', path: `/pages/switch_manage/switch_manage`},
    {id: 5, name: '门闸', path: `/pages/switch_manage/switch_manage`},
    // {id: 6, name: '平板', path: `/pages/switch_manage/switch_manage`},
    {id: 7, name: '售货柜', path: `/pages/device_manage/device_manage`},
    {id: 8, name: '租售柜', path: `/pages/device_manage/device_manage`},
    {id: 9, name: '储物柜', path: `/pages/device_manage/device_manage`},
    {id: 10, name: '咖啡机', path: `/pages/device_manage/device_manage`},
    {id: 11, name: '水阀', path: `/pages/switch_manage/switch_manage`},
    // {id: 12, name: '互动设备', path: `/pages/switch_manage/switch_manage`},
    // {id: 13, name: '监控', path: `/pages/switch_manage/switch_manage`},
    {id: 14, name: '音响', path: `/pages/audio_manage/audio_manage`}, //audio_manage
    // {id: 15, name: '机器人', path: ``},
    // {id: 16, name: '租球机', path: ``},
    // {id: 17, name: '窗帘', path: `/pages/switch_manage/switch_manage`},
	{id: 18, name: '路由器', path: `/pages/switch_manage/switch_manage`},
	{id: 19, name: '物联卡', path: `/pages/switch_manage/switch_manage`},
   
];
import { mapState } from 'vuex'
export default {
    components: {
        'store-name': store_name
    },
	computed: {
	    ...mapState({
	        storeList: state => state.device.storeList,
	        curStoreInfo: state => state.device.curStoreInfo,
	    }),
		
		getTop(){
			return (lineHeight)=>{
				// #ifdef MP-WEIXIN
				let wxBtn = wx.getMenuButtonBoundingClientRect()
				// #endif
				let txt_line_height = lineHeight //该参数为自定义参数brand_name 的 lineHeight
				let top = (wxBtn?wxBtn.top:30 ) + (wxBtn.height-txt_line_height )/2
				return top
			}
		},
	},
    data(){
        return {
            tabArr,
			deviceInfo:""
			}
    },
    async onLoad(){
        try{
            util.showLoad();
            let _brandInfo = await this.$store.dispatch('getBrandInfo');
            await this.$store.dispatch('getStoreList');
			this.updateAC();
            util.hideLoad();
        }catch(err){
            util.hideLoad();
        }
        
    },
	onShow() {
		this.updateAC()//更新中控信息
	},
    methods: {
		updateAC(){
			if(!this.curStoreInfo.device_name)return
			util.showLoad();
			// 	id:"00-de-47-e9-3a-fc"
			deviceServer.get({
			    url: deviceApi.acUpdate,
			    data: {id:this.curStoreInfo.device_name},
			    failMsg: '加载失败！'
			})
			.then(res=>{
			    util.hideLoad()
			    this.deviceInfo = res
				uni.setStorageSync("deviceInfo",res)
			})
			.catch(util.hideLoad)
		},
		goBack(){
			uni.navigateBack({
				delta:1
			})
		},
		goTimingList(){
			let timing_list = "/subpackage/device/pages/timing/timing_list"
			util.routeTo(`${timing_list}`, 'nT');
		},
        getImgPath(id){
            if(!id)return '';
            return `/subpackage/device/static/images/devices/${id || 14}.png`
        },
        routeTo(e){
            if(e.path == '')return util.showNone('开发中！');
            if(
                e.id == 1  ||    // 照明
                e.id == 2  ||    // 空调
                e.id == 3  ||    // 风扇
                e.id == 4  ||    // 门禁
                e.id == 5  ||　  // 门闸
                e.id == 6  ||　  // 平板
                e.id == 8  ||　  // 租售柜
                e.id == 9  ||　  // 储物柜
                e.id == 10 ||　  // 咖啡机
                e.id == 11 ||　  // 水阀
				e.id == 13 ||　  // 监控
				e.id == 14 ||　  // 音响
				e.id == 17 ||　  // 窗帘
				e.id == 18 ||　  // 路由
				e.id == 19 ||　  // 物联卡
                e.id == 7 　     // 售货柜
            )return util.routeTo(`${rootPage}${e.path}?sid=${e.id}`, 'nT');
            util.showNone(`开发中！`);
        }
    }
}
</script>

<style lang="scss">
    @import '~style/public.scss';
	.ic-top-box{
		position: fixed;
		top: 0;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: flex-start;
		background-color: lightgray;
		background-image:url(../../static/images/index_bg.png);
		background-size: 100% 100%;
		width: 100%;
		height: 560rpx;
		.custom-back{
			width: 18px;
			height: 18px;
			padding:0 20rpx;
			position: fixed;
			left: 10rpx;
		}
		.brand-name{
			line-height: 30px;
			font-size: 32rpx;
			text-align: center;
			color: white;
		}
		store-name{
			align-self: flex-start;
		}
		.device-info{
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			> text:first-child{
				font-weight: 900;
				margin-top: 20rpx;
			}
			> text:nth-child(2){
				margin-top: 30rpx;
				color: #FFFFFF;font-size: 24rpx;
			}
			> text:nth-child(3){
				margin-top: 20rpx;
				font-size: 24rpx;
			}

			> view:last-child{
				margin-top: 55rpx;
				width: 100%;font-size: 28rpx;
				@include centerFlex(space-between);
				> view{
					@include centerFlex(center);
					image{
						width: 30rpx;
						height: 30rpx;
						margin-right: 10rpx;
					}
				}
			}
		}
		
	}
    .ic-section{
        padding: 60upx 30upx 0;
		margin-top: 560rpx;//自定义导航.ic-top-box固定高度
        .is-list{
            display: flex;
            flex-wrap: wrap;
            .il-item{
                margin-bottom: 60upx;
                flex-shrink: 0;
                flex-grow: 0;
                width: 25%;
                >view{
                    &:first-child{
                        margin: 0 auto 18upx;
                        width: 108upx;
                        height: 108upx;
                        border-radius: 30upx;
                        background-color: #fff;
                        @include centerFlex(center);
                        >image{
                            width: 80upx;
                            height: 80upx;
                        }
                    }
                    &:nth-child(2){
                        padding: 0 10upx;
                        line-height: 40upx;
                        text-align: center;
                        font-size: 28upx;
                        color: #333;
                        @include textHide(1);
                    }
                }
            }
        }
    }
</style>