页面

mini-pro-web/src/router/device.js

@@ -0,0 +1,34 @@
import NavLayout from "@/components/layout/NavLayout"
const device = [
    {
        path: '/device',
        name: 'device',
        component: NavLayout,
        redirect: "/device/index",
        children: [
            {
                path: "/device/index",
                name: "deviceIndex",
                component: () => import('@/views/device/index.vue'),
                meta: {
                    title: '设备管理',
                    hasBot: false,
                    hasTop: false
                }
            },
            {
                path: "/device/detail",
                name: "deviceDetail",
                component: () => import('@/views/device/detail.vue'),
                meta: {
                    title: '设备',
                    hasBot: false,
                    hasTop: false
                }
            }
        ]
    },
]
export default device;

mini-pro-web/src/views/device/ability/temperatureControl.vue

@@ -0,0 +1,34 @@
<template>
    <div class='temperatureControl'>
        <div>
            <div class='flex f_y_c f_x_s'>
                <span>设备实时温度</span>
                <van-button plain type="info">获取</van-button>
            </div>
            <div></div>
            <div>设备实时温度每10分钟会从设备端返回一次</div>
        </div>
    </div>
    <div></div>
</template>
<script>
export default{
    name: 'temperatureControl',
    data(){
        return {
        }
    },
    methods:{
    },
    created(){
        
    }
}
</script>
<style scoped lang='scss'>
.temperatureControl{
}
</style>

mini-pro-web/src/views/device/detail copy.vue

@@ -0,0 +1,26 @@
<template>
    <div class='deviceDetail'>
    </div>
</template>
<script>
export default{
    name: 'deviceDetail',
    data(){
        return {
        }
    },
    methods:{
    },
    created(){
        
    }
}
</script>
<style scoped lang='scss'>
.deviceDetail{
}
</style>

mini-pro-web/src/views/device/detail.vue

@@ -0,0 +1,109 @@
<template>
    <div class="deviceDetail">
        <div class="c-border-tb c-f14 c-999 mt10 plr15 ptb10 bgc-fff">
            <div class="c-f16 c-333">{{info.name}}</div>
            <div class="mt10">
                <span>设备所属：</span>
                <span>{{info.belong}}</span>
            </div>
            <div>
                <span>设备编号：</span>
                <span>{{info.id}}</span>
            </div>
            <div>
                <span>信号强度：</span>
                <span>{{info.signalStrength}}</span>
            </div>
            <div>
                <span>网<i class="mr2em"></i>络：
                </span>
                <span>{{info.network}}</span>
            </div>
            <div>
                <span>设备地址：</span>
                <span>{{info.address}}</span>
            </div>
        </div>
        <div class='mt20 grid-4 c-f14 c-333 bgc-fff c-border-tb ptb15'>
            <div class='c-t-center'>
                <div>
                    <van-image class='ability' src=''/>
                </div>
                <div>温度控制</div>
            </div>
            <div class='c-t-center'>
                <div>
                    <van-image class='ability' src=''/>
                </div>
                <div>湿度控制</div>
            </div>
            <div class='c-t-center'>
                <div>
                    <van-image class='ability' src=''/>
                </div>
                <div>货道状态</div>
            </div>
            <div class='c-t-center'>
                <div>
                    <van-image class='ability' src=''/>
                </div>
                <div>货道设置</div>
            </div>
            <div class='c-t-center'>
                <div>
                    <van-image class='ability' src=''/>
                </div>
                <div>设备状态</div>
            </div>
            <div class='c-t-center'>
                <div>
                    <van-image class='ability' src=''/>
                </div>
                <div>设备重启</div>
            </div>
            <div class='c-t-center'>
                <div>
                    <van-image class='ability' src=''/>
                </div>
                <div>信息日志</div>
            </div>
            <div class='c-t-center'>
                <div>
                    <van-image class='ability' src=''/>
                </div>
                <div>在售停售</div>
            </div>
        </div>
    </div>
</template>
<script>
export default {
  name: "deviceDetail",
  data() {
    return {
      info: {}
    };
  },
  methods: {},
  created() {
    this.info = this.$route.query.deviceInfo;
    console.log(this.info);
  }
};
</script>
<style scoped lang='scss'>
.deviceDetail {
    .mr2em{
        margin-right: 2em;
    }
    .grid-4{
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr;
        grid-row-gap: 20px;
    }
    .ability{
        width: 50px;
        height: 50px;
    }
}
</style>

mini-pro-web/src/views/device/index.vue

@@ -0,0 +1,81 @@
<template>
    <div class='deviceIndex'>
        <van-field
            v-model="id"
            center
            clearable
            placeholder="请输入设备名或编号">
            <template #button>
                <van-button size="small" type="info" @click="onSearch()">搜索</van-button>
            </template>
        </van-field>
        <div class='p15'>
            <van-swipe-cell v-for='(item, index) in list'>
                <div class='c-f14 bgc-fff ptb15 c-999 plr10' @click="gotoUrl('/device/detail',{deviceInfo: item})">
                    <div class='f_y_c flex f_x_s'>
                        <span class='c-f16 c-333'>{{item.name||'众健信联1号'}}</span>
                        <div>
                            <van-tag :type="true?'success':'danger'" class='mr10'>在线</van-tag>
                            <van-tag :type="true?'success':'danger'">在售</van-tag>
                        </div>
                    </div>
                    <div class='mt10'>
                        <span>设备所属：</span>
                        <span>{{item.belong}}</span>
                    </div>
                    <div>
                        <span>设备编号：</span>
                        <span>{{item.id}}</span>
                    </div>
                    <div>
                        <span>信号强度：</span>
                        <span>{{item.signalStrength}}</span>
                    </div>
                    <div>
                        <span>网<i class='mr2em'></i>络：</span>
                        <span>{{item.network}}</span>
                    </div>
                </div>
                <template #right>
                    <van-button square text="解绑" type="danger" class="delete-button" @click='unBind(item)'/>
                    <van-button square text="停售" type="warning" class="delete-button" @click="stopSell(item)"/>
                </template>
            </van-swipe-cell>
        </div>
    </div>
</template>
<script>
export default{
    name: 'deviceIndex',
    data(){
        return {
            id: '',
            list: [{name:'众健信联1号'}]
        }
    },
    methods:{
        onSearch(){
        },
        unBind(item){
        },
        stopSell(item){
        }
    },
    created(){
    }
}
</script>
<style scoped lang='scss'>
.deviceIndex{
    .mr2em{
        margin-right: 2em;
    }
    .delete-button{
        height: 100%;
    }
}
</style>