|
|
|
@ -44,6 +44,14 @@
|
|
|
|
|
right: 0;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.danger {
|
|
|
|
|
color: red;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.normal {
|
|
|
|
|
color: green;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.ptz {
|
|
|
|
|
width: 100%;
|
|
|
|
|
}
|
|
|
|
@ -341,7 +349,9 @@
|
|
|
|
|
<img src="/images/temperature.png" style="width:48px;height:48px;margin:19px;" />
|
|
|
|
|
</div>
|
|
|
|
|
<div class="col-md-4 col-xs-4" style="height:100px;">
|
|
|
|
|
<h3 style="line-height:100px;margin:0;">{{GetDeviceDataValue(device.Number,'温度','Description')}}</h3>
|
|
|
|
|
<h3 style="line-height:100px;margin:0;" :class="GetDeviceDataValue(device.Number,'温度','Description')==='适中'?'normal':'danger'">
|
|
|
|
|
{{GetDeviceDataValue(device.Number,'温度','Description')}}
|
|
|
|
|
</h3>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="col-md-4 col-xs-4" style="height:100px;">
|
|
|
|
|
<span style="display:inline-block;position:absolute;right:20px;bottom:5px;white-space: nowrap;">温度:{{GetDeviceDataValue(device.Number,'温度','Value')}}{{ GetDeviceDataValue(device.Number,'温度','Unit')}}</span>
|
|
|
|
@ -356,7 +366,9 @@
|
|
|
|
|
<img src="/images/humidity.png" style="width:48px;height:48px;margin:19px;" />
|
|
|
|
|
</div>
|
|
|
|
|
<div class="col-md-4 col-xs-4" style="height:100px;">
|
|
|
|
|
<h3 style="line-height:100px;margin:0;">{{GetDeviceDataValue(device.Number,'湿度','Description')}}</h3>
|
|
|
|
|
<h3 style="line-height:100px;margin:0;" :class="GetDeviceDataValue(device.Number,'湿度','Description')==='适中'?'normal':'danger'">
|
|
|
|
|
{{GetDeviceDataValue(device.Number,'湿度','Description')}}
|
|
|
|
|
</h3>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="col-md-4 col-xs-4" style="height:100px;">
|
|
|
|
|
<span style="display:inline-block;position:absolute;right:20px;bottom:5px;white-space: nowrap;">湿度:{{GetDeviceDataValue(device.Number,'湿度','Value')}}{{ GetDeviceDataValue(device.Number,'温度','Unit')}}</span>
|
|
|
|
@ -371,7 +383,9 @@
|
|
|
|
|
<img src="/images/pm25.png" style="width:48px;height:48px;margin:19px;" />
|
|
|
|
|
</div>
|
|
|
|
|
<div class="col-md-4 col-xs-4" style="height:100px;">
|
|
|
|
|
<h3 style="line-height:100px;margin:0;">{{GetDeviceDataValue(device.Number,'PM2.5','Description')}}</h3>
|
|
|
|
|
<h3 style="line-height:100px;margin:0;" :class="GetDeviceDataValue(device.Number,'PM2.5','Description')==='污染'?'danger':'normal'">
|
|
|
|
|
{{GetDeviceDataValue(device.Number,'PM2.5','Description')}}
|
|
|
|
|
</h3>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="col-md-4 col-xs-4" style="height:100px;">
|
|
|
|
|
<span style="display:inline-block;position:absolute;right:20px;bottom:5px;white-space: nowrap;">PM2.5:{{GetDeviceDataValue(device.Number,'PM2.5','Value')}}{{ GetDeviceDataValue(device.Number,'PM2.5','Unit')}}</span>
|
|
|
|
@ -379,21 +393,23 @@
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<!--<div class="col-md-6 col-xs-6">
|
|
|
|
|
<div class="col-md-6 col-xs-6">
|
|
|
|
|
<div class="box box-solid">
|
|
|
|
|
<div class="row">
|
|
|
|
|
<div class="col-md-4 col-xs-4">
|
|
|
|
|
<img src="/images/pm25.png" style="width:48px;height:48px;margin:19px;" />
|
|
|
|
|
</div>
|
|
|
|
|
<div class="col-md-4 col-xs-4" style="height:100px;">
|
|
|
|
|
<h3 style="line-height:100px;margin:0;">{{GetDeviceDataValue(device.Number,'PM100','Description')}}</h3>
|
|
|
|
|
<h3 style="line-height:100px;margin:0;" :class="GetDeviceDataValue(device.Number,'PM10','Description')==='污染'?'danger':'normal'">
|
|
|
|
|
{{GetDeviceDataValue(device.Number,'PM10','Description')}}
|
|
|
|
|
</h3>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="col-md-4 col-xs-4" style="height:100px;">
|
|
|
|
|
<span style="display:inline-block;position:absolute;right:20px;bottom:5px;white-space: nowrap;">PM10:{{GetDeviceDataValue(device.Number,'PM100','Value')}}{{ GetDeviceDataValue(device.Number,'PM100','Unit')}}</span>
|
|
|
|
|
<span style="display:inline-block;position:absolute;right:20px;bottom:5px;white-space: nowrap;">PM10:{{GetDeviceDataValue(device.Number,'PM10','Value')}}{{ GetDeviceDataValue(device.Number,'PM10','Unit')}}</span>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>-->
|
|
|
|
|
</div>
|
|
|
|
|
<div class="col-md-6 col-xs-6" v-for="device in GetDevices('光强检测器')" :data-device-number="device.Number">
|
|
|
|
|
<div class="box box-solid">
|
|
|
|
|
<div class="row">
|
|
|
|
@ -401,7 +417,9 @@
|
|
|
|
|
<img src="/images/light.png" style="width:48px;height:48px;margin:19px;" />
|
|
|
|
|
</div>
|
|
|
|
|
<div class="col-md-4 col-xs-4" style="height:100px;">
|
|
|
|
|
<h3 style="line-height:100px;margin:0;">{{GetDeviceDataValue(device.Number,'光照度','Description')}}</h3>
|
|
|
|
|
<h3 style="line-height:100px;margin:0;" :class="GetDeviceDataValue(device.Number,'光照度','Description')==='适中'?'normal':'danger'">
|
|
|
|
|
{{GetDeviceDataValue(device.Number,'光照度','Description')}}
|
|
|
|
|
</h3>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="col-md-4 col-xs-4" style="height:100px;">
|
|
|
|
|
<span style="display:inline-block;position:absolute;right:20px;bottom:5px;white-space: nowrap;">{{device.DisplayName||device.Name}} 光照 {{GetDeviceDataValue(device.Number,'光照度','Value')}}{{ GetDeviceDataValue(device.Number,'光照度','Unit')}}</span>
|
|
|
|
@ -417,6 +435,7 @@
|
|
|
|
|
</div>
|
|
|
|
|
<div class="col-md-4 col-xs-4" style="height:100px;">
|
|
|
|
|
<img src="/images/warn.png" style="width:36px;height:36px;margin:32px 0 0 0;" v-if="GetDeviceDataValue(device.Number,'状态','Value')==='警报'" />
|
|
|
|
|
<h3 style="line-height:100px;margin:0;" class="normal" v-else>正常</h3>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="col-md-4 col-xs-4" style="height:100px;">
|
|
|
|
|
<span style="display:inline-block;position:absolute;right:20px;bottom:5px;white-space: nowrap;">{{device.DisplayName||device.Name}} {{GetDeviceDataValue(device.Number,'状态','Value') }}</span>
|
|
|
|
@ -432,6 +451,7 @@
|
|
|
|
|
</div>
|
|
|
|
|
<div class="col-md-4 col-xs-4" style="height:100px;">
|
|
|
|
|
<img src="/images/warn.png" style="width:36px;height:36px;margin:32px 0 0 0;" v-if="GetDeviceDataValue(device.Number,'状态','Value')==='警报'" />
|
|
|
|
|
<h3 style="line-height:100px;margin:0;" class="normal" v-else>正常</h3>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="col-md-4 col-xs-4" style="height:100px;">
|
|
|
|
|
<span style="display:inline-block;position:absolute;right:20px;bottom:5px;white-space: nowrap;">{{device.DisplayName||device.Name}} {{GetDeviceDataValue(device.Number,'状态','Value') }}</span>
|
|
|
|
@ -441,11 +461,31 @@
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="col-md-3 col-xs-6 control" v-for="device in GetDevices('窗帘')" :data-device-number="device.Number">
|
|
|
|
|
<div class="box box-solid">
|
|
|
|
|
<div class="box-header with-border">
|
|
|
|
|
<h3 class="box-title"><img src="/images/curtain.png" style="height:16px;margin-right:10px;" />{{device.DisplayName||device.Name}}</h3>
|
|
|
|
|
<div class="box-tools pull-right">
|
|
|
|
|
{{GetDataValue(device.Number,'状态')}}
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="box-body">
|
|
|
|
|
<div class="row">
|
|
|
|
|
<div class="col-md-12">
|
|
|
|
|
<div class="row" style="text-align:center;padding:3px 0;">
|
|
|
|
|
<img @click="CallApi(device.Number,'/Curtain/On')" src="/images/on.png" />
|
|
|
|
|
<img @click="CallApi(device.Number,'/Curtain/Stop')" src="/images/stop32.png" />
|
|
|
|
|
<img @click="CallApi(device.Number,'/Curtain/Off')" src="/images/off.png" />
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="col-md-3 col-xs-6 control" v-for="device in GetDevices('一路开关')" :data-device-number="device.Number">
|
|
|
|
|
<div class="box box-solid">
|
|
|
|
|
<div class="box-header with-border">
|
|
|
|
|
<h3 class="box-title"><img src="/images/switch2.png" style="height:16px;margin-right:10px;" />{{device.DisplayName||device.Name}}</h3>
|
|
|
|
|
<h3 class="box-title"><img src="/images/switch.png" style="height:16px;margin-right:10px;" />{{device.DisplayName||device.Name}}</h3>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="box-body">
|
|
|
|
|
<div class="row">
|
|
|
|
@ -462,7 +502,7 @@
|
|
|
|
|
<div class="col-md-3 col-xs-6 control" v-for="device in GetDevices('二路开关')" :data-device-number="device.Number">
|
|
|
|
|
<div class="box box-solid">
|
|
|
|
|
<div class="box-header with-border">
|
|
|
|
|
<h3 class="box-title"><img src="/images/switch2.png" style="height:16px;margin-right:10px;" />{{device.DisplayName||device.Name}}</h3>
|
|
|
|
|
<h3 class="box-title"><img src="/images/switch.png" style="height:16px;margin-right:10px;" />{{device.DisplayName||device.Name}}</h3>
|
|
|
|
|
<div class="box-tools pull-right">
|
|
|
|
|
<button class="btn btn-sm bg-olive" @click="CallApi(device.Number,'/Switch3/On')" :data-node-number="ViewModel.Number">一键开</button>
|
|
|
|
|
<button class="btn btn-sm bg-olive" @click="CallApi(device.Number,'/Switch3/Off')" :data-node-number="ViewModel.Number">一键关</button>
|
|
|
|
@ -510,7 +550,7 @@
|
|
|
|
|
<div class="col-md-3 col-xs-6 control" v-for="device in GetDevices('智能插座')" :data-device-number="device.Number">
|
|
|
|
|
<div class="box box-solid">
|
|
|
|
|
<div class="box-header with-border">
|
|
|
|
|
<h3 class="box-title"><img src="/images/switch2.png" style="height:16px;margin-right:10px;" />{{device.DisplayName||device.Name}}</h3>
|
|
|
|
|
<h3 class="box-title"><img src="/images/socket.png" style="height:16px;margin-right:10px;" />{{device.DisplayName||device.Name}}</h3>
|
|
|
|
|
<div class="box-tools pull-right">
|
|
|
|
|
{{parseFloat(GetDataValue(device.Number,'电量')).toFixed(2)}} kWh
|
|
|
|
|
</div>
|
|
|
|
@ -530,7 +570,7 @@
|
|
|
|
|
<div class="col-md-3 col-xs-6 control" v-for="device in GetDevices('插座')" :data-device-number="device.Number">
|
|
|
|
|
<div class="box box-solid">
|
|
|
|
|
<div class="box-header with-border">
|
|
|
|
|
<h3 class="box-title"><img src="/images/switch2.png" style="height:16px;margin-right:10px;" />{{device.DisplayName||device.Name}}</h3>
|
|
|
|
|
<h3 class="box-title"><img src="/images/socket.png" style="height:16px;margin-right:10px;" />{{device.DisplayName||device.Name}}</h3>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="box-body">
|
|
|
|
|
<div class="row">
|
|
|
|
|