|
|
|
|
@ -25,47 +25,164 @@
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<!--环境-->
|
|
|
|
|
<!--<div class="col col-md-12 my-2 px-3">环境</div>-->
|
|
|
|
|
<div class="row">
|
|
|
|
|
<div class="row" style="background-color: #35A9FE">
|
|
|
|
|
<!--光强检测器-->
|
|
|
|
|
<div v-for="device in getDevices('光强检测器')" class="col" style="min-width:320px;">
|
|
|
|
|
<iot-light v-bind:device="device"></iot-light>
|
|
|
|
|
<div v-for="device in getDevices('光强检测器')" class="col-3" style="padding:5px">
|
|
|
|
|
<template>
|
|
|
|
|
<div class="light align-self-center" style="box-sizing:border-box;">
|
|
|
|
|
<div class="row" style="height:100%;margin: 0 auto;padding:0px;">
|
|
|
|
|
<div class="col-12 align-self-center " style="text-align:center; padding-bottom:15px;">
|
|
|
|
|
<img class="mh-100" src="/images/white-light.svg" style="width:24px;" />
|
|
|
|
|
</div>
|
|
|
|
|
<div class="col-12 align-self-center" style="line-height:14px;text-align:center;font-size:12px;padding:5px;color: #ffffff;">
|
|
|
|
|
<span style="display: block; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; word-break: break-all;">{{getDeviceData(device,'光照度')}}</span>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
<script>
|
|
|
|
|
({
|
|
|
|
|
props: ['device']
|
|
|
|
|
});
|
|
|
|
|
</script>
|
|
|
|
|
</div>
|
|
|
|
|
<!--温湿度传感器-->
|
|
|
|
|
<div v-for="device in getDevices('温湿度传感器')" class="col" style="min-width:320px;">
|
|
|
|
|
<iot-humiture v-bind:device="device"></iot-humiture>
|
|
|
|
|
<div v-for="device in getDevices('温湿度传感器')" class="col-3" style="padding:5px">
|
|
|
|
|
<template>
|
|
|
|
|
<div class="light align-self-center" style="box-sizing:border-box;">
|
|
|
|
|
<div class="row" style="height:100%;margin: 0 auto; padding:0px;">
|
|
|
|
|
<div class="col-12 align-self-center " style="text-align:center; padding-bottom:15px;">
|
|
|
|
|
<img class="mh-100" src="/images/white-humiture.svg" style="width:24px" />
|
|
|
|
|
</div>
|
|
|
|
|
<div class="col-12 align-self-center" style="line-height:14px;text-align:center;font-size:12px;padding:5px;color: #ffffff;">
|
|
|
|
|
<span>
|
|
|
|
|
{{getDeviceData(device,'温度')}}
|
|
|
|
|
</span>
|
|
|
|
|
<span>
|
|
|
|
|
{{getDeviceData(device,'湿度')}}
|
|
|
|
|
</span>
|
|
|
|
|
</span>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
<script>
|
|
|
|
|
({
|
|
|
|
|
props: ['device']
|
|
|
|
|
});
|
|
|
|
|
</script>
|
|
|
|
|
</div>
|
|
|
|
|
<!--烟雾报警器-->
|
|
|
|
|
<div v-for="device in getDevices('烟雾报警器')" class="col" style="min-width:320px;">
|
|
|
|
|
<!--<div v-for="device in getDevices('烟雾报警器')" class="col" style="min-width:320px;">
|
|
|
|
|
<iot-smoke v-bind:device="device"></iot-smoke>
|
|
|
|
|
</div>
|
|
|
|
|
</div>-->
|
|
|
|
|
<!--人体感应器-->
|
|
|
|
|
<div v-for="device in getDevices('人体感应器')" class="col" style="min-width:320px;">
|
|
|
|
|
<iot-person v-bind:device="device"></iot-person>
|
|
|
|
|
<div v-for="device in getDevices('人体感应器')" class="col-3" style="padding:5px">
|
|
|
|
|
<template>
|
|
|
|
|
<div class="light align-self-center" style="box-sizing:border-box;">
|
|
|
|
|
<div class="row" style="height:100%;margin: 0 auto;padding:0px;">
|
|
|
|
|
<div class="col-12 align-self-center " style="text-align:center; padding-bottom:15px;">
|
|
|
|
|
<img src="/images/white-person.svg" class="mh-100" style="width:24px;" />
|
|
|
|
|
</div>
|
|
|
|
|
<div class="col-12 align-self-center" style="line-height:14px;text-align:center;font-size:12px;padding:5px;color: #ffffff;">
|
|
|
|
|
<span>
|
|
|
|
|
<span v-if="getDeviceDataValue(device,'状态')==='正常'">
|
|
|
|
|
{{getDeviceDataValue(device,'状态')}}
|
|
|
|
|
</span>
|
|
|
|
|
<span v-else>
|
|
|
|
|
{{getDeviceDataValue(device,'状态')}}
|
|
|
|
|
</span>
|
|
|
|
|
</span>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
<script>
|
|
|
|
|
({
|
|
|
|
|
props: ['device']
|
|
|
|
|
});
|
|
|
|
|
</script>
|
|
|
|
|
</div>
|
|
|
|
|
<!--</div>
|
|
|
|
|
<div class="col col-md-12 my-2 px-3">用电</div>
|
|
|
|
|
<div class="row">-->
|
|
|
|
|
</div>
|
|
|
|
|
<!--控制-->
|
|
|
|
|
<div class="row">
|
|
|
|
|
<!--调色灯-->
|
|
|
|
|
<div v-for="device in getDevices('调色灯')" class="col" style="min-width:320px;">
|
|
|
|
|
<div v-for="device in getDevices('调色灯')" class="col" style="padding:5px">
|
|
|
|
|
<iot-color-light v-bind:device="device"></iot-color-light>
|
|
|
|
|
</div>
|
|
|
|
|
<!--窗帘电机-->
|
|
|
|
|
<div v-for="device in getDevices('窗帘电机')" class="col" style="min-width:320px;">
|
|
|
|
|
<div v-for="device in getDevices('窗帘电机')" class="col" style="padding:5px">
|
|
|
|
|
<iot-curtain v-bind:device="device"></iot-curtain>
|
|
|
|
|
</div>
|
|
|
|
|
<!--一路开关-->
|
|
|
|
|
<div v-for="device in getDevices('一路开关')" class="col" style="min-width:320px;">
|
|
|
|
|
<iot-switch v-bind:device="device"></iot-switch>
|
|
|
|
|
<div v-for="device in getDevices('一路开关')" class="col-6" style="padding:5px">
|
|
|
|
|
<template>
|
|
|
|
|
<div class="card switch" style="box-sizing:border-box;height:130px;">
|
|
|
|
|
<div class="card-header" style="background-color: #fff;border-bottom-color: #fff; font-size: 14px;padding:10px 15px;">
|
|
|
|
|
{{device.displayName}}
|
|
|
|
|
<span class="float-right text-success" v-if="device.isOnline"><i class="ion ion-ios-wifi"></i></span>
|
|
|
|
|
<span class="float-right text-danger" v-else><i class="ion ion-ios-wifi"></i></span>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="card-body" style="padding:0px">
|
|
|
|
|
<div class="row" style="height:100%;margin: 0 auto;">
|
|
|
|
|
<div class="col-7 align-self-center">
|
|
|
|
|
<img class="mh-100" src="/images/switch1.svg" style="width:32px;" />
|
|
|
|
|
</div>
|
|
|
|
|
<div class="col-5 align-self-center">
|
|
|
|
|
<div class="row" style="line-height:28px; text-align: right;">
|
|
|
|
|
<img style="height:32px;width:32px;padding:5px;border:solid #cccccc 1px;border-radius:50%;margin-left: 10px;" v-if="getDeviceDataValue(device,'状态')=='开'" v-on:click="execApi(device.number,'/Switch/Off')" src="/images/on.svg" />
|
|
|
|
|
<img style="height:32px;width:32px;padding:5px;border:solid #cccccc 1px;border-radius:50%;margin-left: 10px;" v-if="getDeviceDataValue(device,'状态')=='关'" v-on:click="execApi(device.number,'/Switch/On')" src="/images/off.svg" />
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
<script>
|
|
|
|
|
({
|
|
|
|
|
props: ['device']
|
|
|
|
|
});
|
|
|
|
|
</script>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<!--三路开关-->
|
|
|
|
|
<div v-for="device in getDevices('三路开关')" class="col" style="min-width:320px;">
|
|
|
|
|
<div v-for="device in getDevices('三路开关')" class="col" style="padding:5px">
|
|
|
|
|
<iot-switch3 v-bind:device="device"></iot-switch3>
|
|
|
|
|
</div>
|
|
|
|
|
<!--智能插座-->
|
|
|
|
|
<div v-for="device in getDevices('智能插座')" class="col" style="min-width:320px;">
|
|
|
|
|
<iot-socket v-bind:device="device"></iot-socket>
|
|
|
|
|
<div v-for="device in getDevices('智能插座')" class="col-6" style="padding:5px">
|
|
|
|
|
<template>
|
|
|
|
|
<div class="card socket" style="box-sizing:border-box;height:130px;">
|
|
|
|
|
<div class="card-header" style="background-color: #fff;border-bottom-color: #fff; font-size: 14px;padding:10px 15px;">
|
|
|
|
|
{{device.displayName}}
|
|
|
|
|
<span class="float-right text-success" v-if="device.isOnline"><i class="ion ion-ios-wifi"></i></span>
|
|
|
|
|
<span class="float-right text-danger" v-else><i class="ion ion-ios-wifi"></i></span>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="card-body"style="padding:0px">
|
|
|
|
|
<div class="row" style="height:50%;margin: 0 auto;">
|
|
|
|
|
<div class="col-7 align-self-center">
|
|
|
|
|
<img class="mh-100" src="/images/socket.svg" style="width:32px;" />
|
|
|
|
|
</div>
|
|
|
|
|
<div class="col-5 align-self-center">
|
|
|
|
|
<div class="row" style="line-height:28px;">
|
|
|
|
|
<img style="height:32px;width:32px;padding:5px;border:solid #cccccc 1px;border-radius:50%;margin-left: 10px;" v-if="getDeviceDataValue(device,'状态')==='开'" v-on:click="execApi(device.number,'/Socket/Off')" :src="config.apigateway+'/IoTCenter/images/on.png'" />
|
|
|
|
|
<img style="height:32px;width:32px;padding:5px;border:solid #cccccc 1px;border-radius:50%;margin-left: 10px;" v-else="getDeviceDataValue(device,'状态')==='关'" v-on:click="execApi(device.number,'/Socket/On')" :src="config.apigateway+'/IoTCenter/images/off.png'" />
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="row" style="margin: 0 auto;">
|
|
|
|
|
<span class="badge badge-info" style="line-height:14px;margin: 10px 0px 5px 15px;color: #666;background-color: #f5f5f5;font-weight: normal;" v-if="getDeviceDataValue(device, '电量')">{{parseFloat(getDeviceDataValue(device, '电量')||0).toFixed(2)}} kW‧h</span>
|
|
|
|
|
<span class="badge badge-info" style="line-height:14px;margin: 10px 0px 5px 15px;color: #666;background-color: #f5f5f5;font-weight: normal;" >{{parseFloat(getDeviceDataValue(device, '功率')||0).toFixed(2)}} W</span>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
<script>
|
|
|
|
|
({
|
|
|
|
|
props: ['device'],
|
|
|
|
|
});
|
|
|
|
|
</script>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<!--<div class="col col-md-12 my-2 px-3">遥控器</div>-->
|
|
|
|
|
|
zhengpengju
5 years ago
