页面

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

@@ -26,7 +26,107 @@ const device = [
                    hasBot: false,
                    hasTop: false
                }
            }
            },
            {
                path: "/device/temperature/index",
                name: "temperatureIndex",
                component: () => import('@/views/device/temperature/index.vue'),
                meta: {
                    title: '温度控制',
                    hasBot: false,
                    hasTop: false
                }
            },
            {
                path: "/device/temperature/turnControl",
                name: "temperatureTurnControl",
                component: () => import('@/views/device/temperature/turnControl.vue'),
                meta: {
                    title: '开启温度控制',
                    hasBot: false,
                    hasTop: false
                }
            },
            {
                path: "/device/humidity/index",
                name: "humidityIndex",
                component: () => import('@/views/device/humidity/index.vue'),
                meta: {
                    title: '湿度控制',
                    hasBot: false,
                    hasTop: false
                }
            },
            {
                path: "/device/humidity/turnControl",
                name: "humidityTurnControl",
                component: () => import('@/views/device/humidity/turnControl.vue'),
                meta: {
                    title: '开启湿度控制',
                    hasBot: false,
                    hasTop: false
                }
            },
            {
                path: "/device/cargoLane/index",
                name: "cargoLaneIndex",
                component: () => import('@/views/device/cargoLane/index.vue'),
                meta: {
                    title: '货道状态',
                    hasBot: false,
                    hasTop: false
                }
            },
            {
                path: "/device/cargoLane/setting",
                name: "cargoLaneSetting",
                component: () => import('@/views/device/cargoLane/setting.vue'),
                meta: {
                    title: '货道状态',
                    hasBot: false,
                    hasTop: false
                }
            },
            {
                path: "/device/status",
                name: "deviceStatus",
                component: () => import('@/views/device/status.vue'),
                meta: {
                    title: '设备状态',
                    hasBot: false,
                    hasTop: false
                }
            },
            {
                path: "/device/reboot",
                name: "deviceReboot",
                component: () => import('@/views/device/reboot.vue'),
                meta: {
                    title: '设备重启',
                    hasBot: false,
                    hasTop: false
                }
            },
            {
                path: "/device/infoLog/index",
                name: "infoLogIndex",
                component: () => import('@/views/device/infoLog/index.vue'),
                meta: {
                    title: '信息日志',
                    hasBot: false,
                    hasTop: false
                }
            },
            {
                path: "/device/sell",
                name: "deviceSell",
                component: () => import('@/views/device/sell.vue'),
                meta: {
                    title: '在售停售',
                    hasBot: false,
                    hasTop: false
                }
            },
        ]
    },
]

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

@@ -10,6 +10,7 @@ import Login from '@/views/login/Login'
import Register from '@/views/login/Register'
import FotgetPassword from '@/views/login/FotgetPassword'
import Index from '@/views/index/Index'
import device from './device'
Vue.use(VueRouter)
const routes = [
@@ -69,7 +70,7 @@ const whiteList = [
const router = new VueRouter({
    mode: 'history',
    base: process.env.BASE_URL,
    routes: routes.concat( [] )
    routes: routes.concat( device )
})
@@ -84,6 +85,8 @@ function redirectToLogin(to, from, next) {
if(process.env.NODE_ENV==='production') {
    router.beforeEach(async (to, from, next) => {
        next()
        return
        if((store.getters.user && store.getters.user.accessToken)) {
          next()
        } else {
@@ -96,6 +99,8 @@ if(process.env.NODE_ENV==='production') {
    })
} else {
    router.beforeEach(async (to, from, next) => {
        next()
        return
        if ((!store.getters.user || !store.getters.user.accessToken) && whiteList.indexOf(to.path) == -1) {
            next('/login')
            return

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

@@ -1,34 +0,0 @@
<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/cargoLane/index.vue

@@ -0,0 +1,97 @@
<template>
    <div class='cargoLaneIndex'>
        <div class='grid-4 c-f14 c-border-b c-333 ptb15 bgc-fff'>
            <div class="c-t-center">
                <div class='c-ff5e6c c-f16 mb5'>{{rows}}</div>
                <span>层数</span>
            </div>
            <div class="c-t-center">
                <div class='c-ff5e6c c-f16 mb5'>{{number}}</div>
                <span>货道数</span>
            </div>
            <div class="c-t-center">
                <div class='c-ff5e6c c-f16 mb5'>{{playNum}}</div>
                <span>启用</span>
            </div>
            <div class="c-t-center">
                <div class='c-ff5e6c c-f16 mb5'>{{disableNum}}</div>
                <span>禁用</span>
            </div>
        </div>
        <div class='bgc-fff p10'>
            <div class='flex f_y_c f_x_s'>
                <div>
                    <van-button type="info" class='mr10 c-border-r-5'>货道开启</van-button>
                    <van-button type="info" class='c-border-r-5'>货道关闭</van-button>
                </div>
                <div>
                    <van-button type="info" class='mr10 c-border-r-5'>售卖</van-button>
                    <van-button type="info" class='c-border-r-5'>停售</van-button>
                </div>
            </div>
            <div class='mt10'><van-button type="info" style='width:100%;' class='c-border-r-5'>获取货道状态</van-button></div>
            <div class='mt20 c-f14'>
                <div class='flex f_y_c x-overflow'>
                    <div v-for='(item, index) in (Math.ceil(number/6))'>
                        <div>
                            <div class='c-t-center w50 ptb10 bgc-ccc' :class='(Math.ceil(number/6))!=index+1?"mr10":""'>{{index+1}}</div>
                            <div v-for='(item, index) in rows'>
                                <div class='c-t-center w50 ptb10 mt10 bgc-fff c-border c-position-r' :class='(Math.ceil(number/6))!=index+1?"mr10":""'>
                                    <div>
                                        <div v-if='true' class='c-20d7ad'>正常</div>
                                        <div v-else class='c-ff9526'>故障</div>
                                    </div>
                                    <div>
                                        <div v-if='true' class='c-20d7ad'>已停用</div>
                                        <div v-else class='c-ff5e6c'>停售</div>
                                    </div>
                                    <div>
                                        <div v-if='true' class='c-20d7ad'>售卖</div>
                                        <div v-else class='c-ff5e6c'>停售</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
    </div>
</template>
<script>
export default{
    name: 'cargoLaneIndex',
    data(){
        return {
            rows: 6,
            number: 240,
            playNum: 240,
            disableNum: 0,
            list: []
        }
    },
    methods:{
    },
    created(){
        
    }
}
</script>
<style scoped lang='scss'>
.cargoLaneIndex{
    .grid-4{
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr;
    }
    .x-overflow{
        overflow-x: auto;
        -ms-overflow-style: none;
        overflow: -moz-scrollbars-none
    }
    .x-overflow::-webkit-scrollbar{
        display:none;
    }
}
</style>

mini-pro-web/src/views/device/cargoLane/setting.vue

@@ -0,0 +1,84 @@
<template>
    <div class='deviceDetail'>
        <div class='grid-3 c-f14 c-333 bgc-fff ptb10 c-border-b'>
            <div class='c-t-center'>
                <div class='mb5'><div class='bgc-17b3ec w60 h30' style='display:inline-block'></div></div>
                <span>正常</span>
            </div>
            <div class='c-t-center'>
                <div class='mb5'><div class='bgc-ff9526 w60 h30' style='display:inline-block'></div></div>
                <span>故障</span>
            </div>
            <div class='c-t-center'>
                <div class='mb5'><div class='bgc-ccc w60 h30' style='display:inline-block'></div></div>
                <span>关闭</span>
            </div>
        </div>
        <div v-for='(item, index) in rows'>
            <div class='mt10 bgc-fff ptb10 c-border-tb plr15 c-f14'>
                <div class='flex f_y_c f_x_s'>
                    <span>第{{index+1}}层</span>
                    <van-radio v-model="checkAll">选择整行</van-radio>
                </div>
                <div class='flex mt10 x-overflow'>
                    <div v-for='(citem, cindex) in cols'>
                        <div class='c-t-center w30 c-position-r' :class='cindex!=cols.length-1?"mr10":""'>
                            <div>{{cindex+1}}</div>
                            <div class='c-t-center'><div class='c-cirlce-17b3ec'></div></div>
                            <div class='c-border ptb5'>5</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class='mt20 plr15'>
            <van-button class='c-border-r-5' style='width:100%' type="info">设置货道容量</van-button>
        </div>
        <div class='mt20 plr15'>
            <van-button class='c-border-r-5' style='width:100%' type="info">货道合并</van-button>
        </div>
        <div class='mt20 plr15 mb30'>
            <van-button class='c-border-r-5' style='width:100%' type="info">货道拆分</van-button>
        </div>
    </div>
</template>
<script>
export default{
    name: 'deviceDetail',
    data(){
        return {
            rows: 6,
            cols: 40,
            checkAll: []
        }
    },
    methods:{
    },
    created(){
        
    }
}
</script>
<style scoped lang='scss'>
.deviceDetail{
    .grid-3{
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
    }
    .c-cirlce-17b3ec{
        background: #17b3ec;
        width: 7px;
        height: 7px;
        border-radius: 50%;
        display: inline-block;
    }
    .x-overflow{
        overflow-x: auto;
        -ms-overflow-style: none;
    }
    .x-overflow::-webkit-scrollbar{
        display:none;
    }
}
</style>

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

@@ -25,49 +25,49 @@
            </div>
        </div>
        <div class='mt20 grid-4 c-f14 c-333 bgc-fff c-border-tb ptb15'>
            <div class='c-t-center'>
            <div class='c-t-center' @click='gotoUrl("/device/temperature/index")'>
                <div>
                    <van-image class='ability' src=''/>
                </div>
                <div>温度控制</div>
            </div>
            <div class='c-t-center'>
            <div class='c-t-center' @click='gotoUrl("/device/humidity/index")'>
                <div>
                    <van-image class='ability' src=''/>
                </div>
                <div>湿度控制</div>
            </div>
            <div class='c-t-center'>
            <div class='c-t-center' @click='gotoUrl("/device/cargoLane/index")'>
                <div>
                    <van-image class='ability' src=''/>
                </div>
                <div>货道状态</div>
            </div>
            <div class='c-t-center'>
            <div class='c-t-center' @click='gotoUrl("/device/cargoLane/setting")'>
                <div>
                    <van-image class='ability' src=''/>
                </div>
                <div>货道设置</div>
            </div>
            <div class='c-t-center'>
            <div class='c-t-center' @click='gotoUrl("/device/status")'>
                <div>
                    <van-image class='ability' src=''/>
                </div>
                <div>设备状态</div>
            </div>
            <div class='c-t-center'>
            <div class='c-t-center' @click='gotoUrl("/device/reboot")'>
                <div>
                    <van-image class='ability' src=''/>
                </div>
                <div>设备重启</div>
            </div>
            <div class='c-t-center'>
            <div class='c-t-center' @click='gotoUrl("/device/infoLog/index")'>
                <div>
                    <van-image class='ability' src=''/>
                </div>
                <div>信息日志</div>
            </div>
            <div class='c-t-center'>
            <div class='c-t-center' @click='gotoUrl("/device/sell")'>
                <div>
                    <van-image class='ability' src=''/>
                </div>

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

@@ -0,0 +1,43 @@
<template>
    <div class='humidityIndex'>
        <div class='bgc-17b3ec ptb10 plr15 c-fff c-f14'>
            <div class='flex f_y_c f_x_s'>
                <span>设备实时湿度</span>
                <van-button plain size="small" type="info" class='tbtn'>获取</van-button>
            </div>
            <div class='c-f20'>22°</div>
            <div class='mt10'>设备实时温度每10分钟会从设备端返回一次</div>
        </div>
        <div class='mt10 p10 bgc-fff c-f14 c-333 c-border-tb'>
            <div class='flex f_y_c'>
                <span>湿度控制：</span>
                <van-switch @click="gotoUrl('/device/humidity/turnControl')" inactive-color='#ccc' active-color='#17b3ec' v-model="checked" />
            </div>
            <div class='mt10' v-show='checked'>湿度控制值为  {{'22°'}}</div>
        </div>
    </div>
</template>
<script>
export default{
    name: 'humidityIndex',
    data(){
        return {
            checked: false
        }
    },
    methods:{
    },
    created(){
        
    }
}
</script>
<style scoped lang='scss'>
.humidityIndex{
    .tbtn{
        border: 0;
        border-radius: 5px;
    }
}
</style>

mini-pro-web/src/views/device/humidity/turnControl.vue

@@ -0,0 +1,53 @@
<template>
    <div class='temperature-turnControl'>
        <div class='c-333 c-f14 bgc-fff p15'>
            <div>请设置目标湿度值:</div>
            <div class='flex f_y_c mt20 pl15'>
                <van-slider button-size='30px' v-model="sd" @change="onChange" />
                <div class='ml15'>{{sd}}%</div>
            </div>
            <div class='mt20'>最后一次发送的湿度调整值为%</div>
            <div class='mt10 c-999'>指令发送成功后，请等待设备生效，设备每隔十分钟左右会返回一次最新实时湿度值</div>
            <div class='flex mt20'>
                <div class='c-t-center' style='flex:1'>
                    <van-button class='w100 c-border-r-5' type="info" @click="confirm">确认</van-button>
                </div>
                <div class='c-t-center' style='flex:1'>
                    <van-button class='bgc-ccc w100 c-border-r-5' style='border:0' type="info" @click="cancel">取消</van-button>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
export default{
    name: 'temperature-turnControl',
    data(){
        return {
            model: 0,
            sd: '',
        }
    },
    watch:{
        model(){
            this.sd = ''
        }
    },
    methods:{
        confirm(){
            this.goBack();
        },
        cancel(){
            this.goBack();
        }
    },
    created(){
        
    }
}
</script>
<style scoped lang='scss'>
.temperature-turnControl{
}
</style>

mini-pro-web/src/views/device/infoLog/deviceLog.vue

@@ -0,0 +1,75 @@
<template>
    <div class='deviceLog'>
        <div class='flex f_y_c p10 c-f14 c-border-b'>
            <div style='flex:1' class='flex f_y_c'>
                <div class='bgc-fff c-border lh44 h44 plr15 cbr' @click="show1=true">{{$moment(beginDate).format('YYYY-MM-DD')}}</div>
                <div class='mlr15 c-333'>至</div>
                <div class='bgc-fff c-border lh44 h44 plr15 cbr' @click="show2=true">{{$moment(endDate).format('YYYY-MM-DD')}}</div>
            </div>
            <van-button class='c-border-r-5 w80' type="info" @click="onSearch">搜索</van-button>
        </div>
        <div v-for='(item, index) in list'>
            <div class='c-border-b bgc-fff p10 c-333 c-f14 flex f_y_c'>
                <div style='flex: 1' class='flex f_y_c f_x_s mr30'>
                    <div>{{item.content}}</div>
                    <div>{{item.title}}</div>
                </div>
                <div>{{item.time}}</div>
            </div>
        </div>
        <van-overlay :show="show1||show2" @click="show1=false,show2 = false" >
            <van-datetime-picker
                class='c-position-a'
                style='bottom:0;width:100%'
                v-show='show1'
                v-model="beginDate"
                type="date"
                title="选择开始日期"
                :min-date="minDate"
                :max-date="maxDate"
            />
            <van-datetime-picker
                class='c-position-a'
                style='bottom:0;width:100%'
                v-show='show2'
                v-model="endDate"
                type="date"
                title="选择截止日期"
                :min-date="minDate"
                :max-date="maxDate"
            />
        </van-overlay>
    </div>
</template>
<script>
export default{
    name: 'deviceLog',
    data(){
        return {
            beginDate: new Date(),
            endDate: new Date(),
            minDate: this.$moment().add(-1,'years').toDate(),
            maxDate: new Date(),
            currentDate: '',
            list: [],
            show1: false,
            show2: false,
        }
    },
    methods:{
        onSearch(){
        },
    },
    created(){
        this.list = [{content:'改变设备销售状态',title:'设备补货',time:'2020/09/01 10:03:00'},{content:'改变设备销售状态',title:'设备补货',time:'2020/09/01 10:03:00'}]
    }
}
</script>
<style scoped lang='scss'>
.deviceLog{
    .cbr{
        border-radius: 22px;
    }
}
</style>

mini-pro-web/src/views/device/infoLog/faultInfo.vue

@@ -0,0 +1,91 @@
<template>
    <div class='faultInfo'>
        <div class='p15 c-f14 bgc-fff c-333 grid-2 c-border-b'>
            <van-field
                v-model="f_event"
                readonly
                class='c-border'
                placeholder="请选择"
                @click="show1 = true">
                <template #right-icon>
                    <van-icon name="arrow-down" />
                </template>
            </van-field>
            <van-cell class='c-border' @click="show2 = true">
                <template #default>
                    <div class='c-t-center'>{{$moment(currenDate).format('YYYY-MM-DD')}}</div>
                </template>
            </van-cell>
        </div>
        <div v-for='(item, index) in list'>
            <div class='flex c-border-b c-333 c-f14 p10 bgc-fff f_y_c f_x_s'>
                <div style='flex:1;width:0' class='text-overhidd mr20'>{{item.content}}</div>
                <div>{{item.time}}</div>
            </div>
        </div>
        <van-overlay :show="show1||show2" @click="show1=false,show2 = false" >
            <van-picker
                class='c-position-a'
                style='bottom:0;width:100%'
                v-show='show1'
                show-toolbar
                :columns="eventList"
                value-key='dictValue'
                @confirm="onConfirm"
                @cancel="show1=false"
            />
            <van-datetime-picker
                class='c-position-a'
                style='bottom:0;width:100%'
                v-show='show2'
                v-model="endDate"
                type="date"
                :min-date="minDate"
                :max-date="maxDate"
            />
        </van-overlay>
    </div>
</template>
<script>
export default{
    name: 'faultInfo',
    data(){
        return {
            f_event: '',
            eventList: [],
            show1: false,
            show2: false,
            currenDate: new Date(),
            minDate: this.$moment().add(-1,'years').toDate(),
            maxDate: new Date(),
            list: [{content:'货道电机超时',time:'10:03:00'}]
        }
    },
    methods:{
        onConfirm(obj, index){
        },
        initMain(){
        }
    },
    created(){
        this.eventList = [{dictValue:'全部事件',dictCode:'all'}]
    }
}
</script>
<style scoped lang='scss'>
.faultInfo{
    .grid-2{
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-column-gap: 20px;
    }
    .text-overhidd{
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        word-break: break-all;
    }
}
</style>

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

@@ -0,0 +1,41 @@
<template>
    <div class='device-infoLog-index'>
        <van-tabs v-model="active">
            <van-tab title="设备日志"></van-tab>
            <van-tab title="故障信息"></van-tab>
            <van-tab title="离线日志"></van-tab>
        </van-tabs>
        <device-log v-show='active==0'></device-log>
        <fault-info v-show='active==1'></fault-info>
        <offline-log v-show='active==2'></offline-log>
    </div>
</template>
<script>
import deviceLog from './deviceLog';
import faultInfo from './faultInfo';
import offlineLog from './offlineLog';
export default{
    name: 'device-infoLog-index',
    components:{
        deviceLog,
        faultInfo,
        offlineLog
    },
    data(){
        return {
            active: 0,
        }
    },
    methods:{
    },
    created(){
        
    }
}
</script>
<style scoped lang='scss'>
.device-infoLog-index{
}
</style>

mini-pro-web/src/views/device/infoLog/offlineLog.vue

@@ -0,0 +1,74 @@
<template>
    <div class='offlineLog'>
        <div class='flex f_y_c p10 c-f14 c-border-b'>
            <div style='flex:1' class='flex f_y_c'>
                <div class='bgc-fff c-border lh44 h44 plr15 cbr' @click="show1=true">{{$moment(beginDate).format('YYYY-MM-DD')}}</div>
                <div class='mlr15 c-333'>至</div>
                <div class='bgc-fff c-border lh44 h44 plr15 cbr' @click="show2=true">{{$moment(endDate).format('YYYY-MM-DD')}}</div>
            </div>
            <van-button class='c-border-r-5 w80' type="info" @click="onSearch">搜索</van-button>
        </div>
        <div v-for='(item, index) in list'>
            <div class='c-border-b bgc-fff p10 c-333 c-f14 flex f_y_c'>
                <div style='flex: 1;width:0;' class='mr20'>
                    <div>{{item.time}}</div>
                </div>
                <div>{{item.online}}</div>
            </div>
        </div>
        <van-overlay :show="show1||show2" @click="show1=false,show2 = false" >
            <van-datetime-picker
                class='c-position-a'
                style='bottom:0;width:100%'
                v-show='show1'
                v-model="beginDate"
                type="date"
                title="选择开始日期"
                :min-date="minDate"
                :max-date="maxDate"
            />
            <van-datetime-picker
                class='c-position-a'
                style='bottom:0;width:100%'
                v-show='show2'
                v-model="endDate"
                type="date"
                title="选择截止日期"
                :min-date="minDate"
                :max-date="maxDate"
            />
        </van-overlay>
    </div>
</template>
<script>
export default{
    name: 'offlineLog',
    data(){
        return {
            beginDate: new Date(),
            endDate: new Date(),
            minDate: this.$moment().add(-1,'years').toDate(),
            maxDate: new Date(),
            currentDate: '',
            list: [],
            show1: false,
            show2: false,
        }
    },
    methods:{
        onSearch(){
        },
    },
    created(){
        this.list = [{online:'离线',time:'2020/09/01 10:03:00'},{online:'离线',time:'2020/09/01 10:03:00'}]
    }
}
</script>
<style scoped lang='scss'>
.offlineLog{
    .cbr{
        border-radius: 22px;
    }
}
</style>

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

@@ -0,0 +1,34 @@
<template>
    <div class='deviceReboot'>
        <div class='c-333 c-f14 p15 bgc-fff c-border-b'>
            <div>设置重连时间</div>
            <van-field class='mt10 c-border' v-model="time"  placeholder="请输入重连时间" />
        </div>
        <div class='mt30 plr15'>
            <van-button style='width:100%' class='c-border-r-5' type="info" @click="reboot">立即重启</van-button>
        </div>
    </div>
</template>
<script>
export default{
    name: 'deviceReboot',
    data(){
        return {
            time: '',
        }
    },
    methods:{
        reboot(){
        }
    },
    created(){
        
    }
}
</script>
<style scoped lang='scss'>
.deviceReboot{
}
</style>

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

@@ -0,0 +1,31 @@
<template>
    <div class='deviceSell'>
        <div class='plr15 ptb20 c-333 c-f14 bgc-fff c-border-b flex f_y_c f_x_s'>
            <div>当前售货状态：<span>{{'在售'}}</span></div>
            <van-switch @click="switchSell" inactive-color='#ccc' active-color='#17b3ec' v-model="status" />
        </div>
    </div>
</template>
<script>
export default{
    name: 'deviceSell',
    data(){
        return {
            status: false
        }   
    },
    methods:{
        switchSell(){
            this.status = true
        }
    },
    created(){
        
    }
}
</script>
<style scoped lang='scss'>
.deviceSell{
}
</style>

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

@@ -0,0 +1,33 @@
<template>
    <div class='deviceStatus'>
        <div class='c-t-center ptb30 c-f20 c-333 c-border-b bgc-fff'>
            <span>当前设备状态：</span><span class='c-17b3ec'>{{'在线'}}</span>
        </div>
        <div class='mt30 plr15'>
            <van-button style='width:100%' class='c-border-r-5' type="info" @click="refresh">刷新设备状态</van-button>
        </div>
    </div>
</template>
<script>
export default{
    name: 'deviceStatus',
    data(){
        return {
        }
    },
    methods:{
        refresh(){
        }
    },
    created(){
        
    }
}
</script>
<style scoped lang='scss'>
.deviceStatus{
}
</style>

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

@@ -0,0 +1,43 @@
<template>
    <div class='temperatureIndex'>
        <div class='bgc-17b3ec ptb10 plr15 c-fff c-f14'>
            <div class='flex f_y_c f_x_s'>
                <span>设备实时温度</span>
                <van-button plain size="small" type="info" class='tbtn'>获取</van-button>
            </div>
            <div class='c-f20'>22°</div>
            <div class='mt10'>设备实时温度每10分钟会从设备端返回一次</div>
        </div>
        <div class='mt10 p10 bgc-fff c-f14 c-333 c-border-tb'>
            <div class='flex f_y_c'>
                <span>温度控制：</span>
                <van-switch @click="gotoUrl('/device/temperature/turnControl')" inactive-color='#ccc' active-color='#17b3ec' v-model="checked" />
            </div>
            <div class='mt10' v-show='checked'>温度控制值为  {{'22°'}}</div>
        </div>
    </div>
</template>
<script>
export default{
    name: 'temperatureIndex',
    data(){
        return {
            checked: false
        }
    },
    methods:{
    },
    created(){
        
    }
}
</script>
<style scoped lang='scss'>
.temperatureIndex{
    .tbtn{
        border: 0;
        border-radius: 5px;
    }
}
</style>

mini-pro-web/src/views/device/temperature/turnControl.vue

@@ -0,0 +1,86 @@
<template>
    <div class='temperature-turnControl'>
        <div class='c-333 c-f14 bgc-fff p15'>
            <div class='flex f_y_c'>
                <span>请设定模式：</span>
                <van-radio-group class='ml20' v-model="model" direction="horizontal">
                    <van-radio :name="1">制冷</van-radio>
                    <van-radio :name="2">制热</van-radio>
                </van-radio-group>
            </div>
            <div class='flex mt20'>
                <div class='lh46'>请设置目标温度值：</div>
                <div style='flex:1' class='ml10'>
                    <div class='flex f_y_c'><van-field class='c-border w50' v-model="wd" maxlength='2' @blur='filterWD' @input="checkWD" type="digit" /><span class='ml10'>度</span></div>
                    <van-notice-bar class='bgc-fff pl0' wrapable :scrollable="false" >可输入的值范围为: {{model==1?'2-25°':model==2?'20-40°':''}}</van-notice-bar>
                </div>
            </div>
            <div class='mt10'>最后一次发送的温度值为 22°</div>
            <div class='mt10 c-999'>指令发送成功后，请等待设备生效，设备每隔十分钟左右会返回一次最新实时温度值</div>
            <div class='flex mt20'>
                <div class='c-t-center' style='flex:1'>
                    <van-button class='w100 c-border-r-5' type="info" @click="confirm">确认</van-button>
                </div>
                <div class='c-t-center' style='flex:1'>
                    <van-button class='bgc-ccc w100 c-border-r-5' style='border:0' type="info" @click="cancel">取消</van-button>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
export default{
    name: 'temperature-turnControl',
    data(){
        return {
            model: 0,
            wd: '',
        }
    },
    watch:{
        model(){
            this.wd = ''
        }
    },
    methods:{
        checkWD(wd){
            if(this.model==1){
                if((wd<=25&&wd>=2)||!wd){
                    return;
                }
                if(this.wd > 25){
                    this.wd = 25;
                }
            }else if(this.model==2){
                if((wd<=40&&wd>=20)||!wd){
                    return;
                }
                if(this.wd > 40){
                    this.wd = 40;
                }
            }
        },
        filterWD(){
            if(this.model==1&&this.wd<2){
                this.wd = 2
            }else if(this.model==2&&this.wd<20){
                this.wd = 20
            }
        },
        confirm(){
            this.goBack();
        },
        cancel(){
            this.goBack();
        }
    },
    created(){
        
    }
}
</script>
<style scoped lang='scss'>
.temperature-turnControl{
}
</style>