Former-commit-id: 315aa4734f793c161f881bc92383b9fddd13cddd
TangShanKaiPing
wanggang 6 years ago
parent 57bb3f82eb
commit ce2e0ac3b0

@ -161,6 +161,7 @@
</div>
</div>
<!--环境-->
<!--温湿度传感器-->
<template v-for="device in GetDevices('温湿度传感器')">
<div class="col-md-3 col-xs-6">
<div class="box box-solid">
@ -197,7 +198,8 @@
</div>
</div>
</template>
<template v-for="device in GetDevices('光强检测器')">
<!--粉尘检测器-->
<template v-for="device in GetDevices('粉尘检测器')">
<div class="col-md-3 col-xs-6">
<div class="box box-solid">
<div class="row">
@ -215,24 +217,8 @@
</div>
</div>
</div>
<div class="col-md-3 col-xs-6">
<div class="box box-solid">
<div class="row">
<div class="col-md-4 col-xs-4" style="text-align:center;">
<img src="/images/pm25.png" style="max-width:48px;margin-top:19px;" />
</div>
<div class="col-md-8 col-xs-8" style="height:100px;">
<h3 style="line-height:100px;margin:0;" :class="GetDeviceDataValue(device.Number,'PM10','Description')==='污染'?'danger':'normal'">
{{GetDeviceDataValue(device.Number,'PM10','Description')}}
</h3>
</div>
</div>
<div class="row">
<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>
</template>
<!--光强检测器-->
<div class="col-md-3 col-xs-6" v-for="device in GetDevices('光强检测器')" :data-device-number="device.Number">
<div class="box box-solid">
<div class="row">
@ -250,6 +236,7 @@
</div>
</div>
</div>
<!--红外感应器-->
<div class="col-md-3 col-xs-6" v-for="device in GetDevices('红外感应器')" :data-device-number="device.Number">
<div class="box box-solid">
<div class="row">
@ -266,6 +253,7 @@
</div>
</div>
</div>
<!--烟雾感应器-->
<div class="col-md-3 col-xs-6" v-for="device in GetDevices('烟雾传感器')" :data-device-number="device.Number">
<div class="box box-solid">
<div class="row">

Binary file not shown.

@ -0,0 +1,7 @@
fileFormatVersion: 2
guid: 86212a52db4fe8149a82b643fc08c9b1
DefaultImporter:
externalObjects: {}
userData:
assetBundleName:
assetBundleVariant:

@ -22,12 +22,131 @@
<div id="app">
<f7-app :params="$root.f7params">
<f7-view main>
<f7-page page-content="false">
<f7-page>
<f7-navbar :title="model?model.Name:'节点'">
<a href="nodes.html" slot="nav-left" class="link external"><i class="icon icon-back"></i></a>
</f7-navbar>
<div class="page-content" id="template">
<div id="template">
<template v-if="model">
<!--场景-->
<div class="card">
<div class="card-header">场景</div>
<div class="card-content card-content-padding">
<div class="row">
<button class="col button button-large button-raised" v-for="scene in model.Scenes" :data-scene-id="scene.Id">{{scene.Name}}</button>
</div>
</div>
</div>
<!--环境-->
<div class="row">
<!--温湿度传感器-->
<template class="row" v-for="device in GetDevices('温湿度传感器')">
<div class="col-50">
<div class="card">
<div class="card-content card-content-padding">
<div class="row">
<div class="col-40" style="text-align:center;">
<img :src="iotCenter+'/images/temperature.png'" style="max-width:48px;margin-top:19px;" />
</div>
<div class="col-60" style="height:100px;">
<h3 style="line-height:100px;margin:0;" :class="GetDeviceDataValue(device.Number,'温度','Description')==='适中'?'normal':'danger'">
{{GetDeviceDataValue(device.Number,'温度','Description')}}
</h3>
</div>
<span style="display:inline-block;position:absolute;right:20px;bottom:5px;white-space: nowrap;">温度:{{GetDeviceDataValue(device.Number,'温度','Value')}}{{ GetDeviceDataValue(device.Number,'温度','Unit')}}</span>
</div>
</div>
</div>
</div>
<div class="col-50">
<div class="card">
<div class="card-content card-content-padding">
<div class="row">
<div class="col-40" style="text-align:center;">
<img :src="iotCenter+'/images/humidity.png'" style="max-width:48px;margin-top:19px;" />
</div>
<div class="col-60" style="height:100px;">
<h3 style="line-height:100px;margin:0;" :class="GetDeviceDataValue(device.Number,'湿度','Description')==='适中'?'normal':'danger'">
{{GetDeviceDataValue(device.Number,'湿度','Description')}}
</h3>
</div>
<span style="display:inline-block;position:absolute;right:20px;bottom:5px;white-space: nowrap;">湿度:{{GetDeviceDataValue(device.Number,'湿度','Value')}}{{ GetDeviceDataValue(device.Number,'温度','Unit')}}</span>
</div>
</div>
</div>
</div>
</template>
<!--粉尘检测器-->
<div class="col-50" v-for="device in GetDevices('粉尘检测器')">
<div class="card">
<div class="card-content card-content-padding">
<div class="row">
<div class="col-40" style="text-align:center;">
<img :src="iotCenter+'/images/pm25.png'" style="max-width:48px;margin-top:19px;" />
</div>
<div class="col-60" style="height:100px;">
<h3 style="line-height:100px;margin:0;" :class="GetDeviceDataValue(device.Number,'PM2.5','Description')==='污染'?'danger':'normal'">
{{GetDeviceDataValue(device.Number,'PM2.5','Description')}}
</h3>
</div>
<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>
</div>
</div>
</div>
</div>
<!--光强检测器-->
<div class="col-50" v-for="device in GetDevices('光强检测器')">
<div class="card">
<div class="card-content card-content-padding">
<div class="row">
<div class="col-40" style="text-align:center;">
<img :src="iotCenter+'/images/light.png'" style="max-width:48px;margin-top:19px;" />
</div>
<div class="col-60" style="height:100px;">
<h3 style="line-height:100px;margin:0;" :class="GetDeviceDataValue(device.Number,'光照度','Description')==='适中'?'normal':'danger'">
{{GetDeviceDataValue(device.Number,'光照度','Description')}}
</h3>
</div>
<span style="display:inline-block;position:absolute;right:20px;bottom:5px;white-space: nowrap;">光照 {{GetDeviceDataValue(device.Number,'光照度','Value')}}{{ GetDeviceDataValue(device.Number,'光照度','Unit')}}</span>
</div>
</div>
</div>
</div>
<!--红外感应器-->
<div class="col-50" v-for="device in GetDevices('红外感应器')">
<div class="card">
<div class="card-content card-content-padding">
<div class="row">
<div class="col-40" style="text-align:center;">
<img :src="iotCenter+'/images/person.png'" style="max-width:48px;margin-top:19px;" />
</div>
<div class="col-60" style="height:100px;">
<img :src="iotCenter+'/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>
<span style="display:inline-block;position:absolute;right:20px;bottom:5px;white-space: nowrap;">红外 {{GetDeviceDataValue(device.Number,'状态','Value') }}</span>
</div>
</div>
</div>
</div>
<!--烟雾感应器-->
<div class="col-50" v-for="device in GetDevices('烟雾传感器')">
<div class="card">
<div class="card-content card-content-padding">
<div class="row">
<div class="col-40" style="text-align:center;">
<img :src="iotCenter+'/images/smoke.png'" style="max-width:48px;margin-top:19px;" />
</div>
<div class="col-60" style="height:100px;">
<img :src="iotCenter+'/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>
<span style="display:inline-block;position:absolute;right:20px;bottom:5px;white-space: nowrap;">烟雾 {{GetDeviceDataValue(device.Number,'状态','Value') }}</span>
</div>
</div>
</div>
</div>
</div>
<template v-if="HasDevices('摄像头')">
<div class="card">
<div class="card-header">
@ -38,7 +157,7 @@
</div>
</div>
<div class="card-content">
<div style="width:100%;height:186px;margin:0;padding:0;background:#000;text-align:center;">
<div style="width:100%;height:30vw;margin:0;padding:0;background:#000;text-align:center;">
<video id="liveVideo" class="video" controls autoplay muted style="width:100%;max-width:100%;height:100%;" v-on:volumechange="VolumeChange($event)"></video>
</div>
</div>
@ -72,53 +191,6 @@
</div>
</div>
</template>
<template v-for="device in GetDevices('色暖灯')">
<div class="row">
<div class="col-md-12">
<div class="box box-solid btns">
<div class="box-header with-border">
<h3 class="box-title">
<img :src="server+'/IoTCenter/images/light2.png'" style="height:16px;margin-right:10px;" />{{device.DisplayName||device.Name}}<span :style="{
display:'inline-block',
color:'#eee',
backgroundColor:getLightColor(GetDataValue(device.Number,'色调'),GetDataValue(device.Number,'饱和度'),GetDataValue(device.Number,'亮度'))}">{{getLightColor(GetDataValue(device.Number,'色调'),GetDataValue(device.Number,'饱和度'),GetDataValue(device.Number,'亮度'))}}</span>
</h3>
<div class="box-tools pull-right">
<img v-if="GetDataValue(device.Number,'状态')=='开'" @click="CallApi(device.Number,'/WarmLight/Off')" :src="server+'/IoTCenter/images/on.png'" />
<img v-if="GetDataValue(device.Number,'状态')=='关'" @click="CallApi(device.Number,'/WarmLight/On')" :src="server+'/IoTCenter/images/off.png'" />
</div>
</div>
<div class="box-body" style="height:178px;">
<form method="get" action="/App/ExecApi">
<input type="hidden" name="Number" :value="device.Number" />
<input type="hidden" name="Method" value="/WarmLight/SetBrightness" />
<div class="row">
<div class="col-md-2 col-xs-4">
<span class="label1">亮度</span>
</div>
<div class="col-md-10 col-xs-8">
<input @change="AjaxSubmit($event,device.Number,'亮度')" type="range" min="0" step="1" max="255" name="Brightness" :value="GetDataValue(device.Number,'亮度')" />
</div>
</div>
</form>
<form method="get" action="/App/ExecApi">
<input type="hidden" name="Number" :value="device.Number" />
<input type="hidden" name="Method" value="/WarmLight/SetColor" />
<input type="hidden" name="Saturation" :value="GetDataValue(device.Number,'饱和度')" />
<div class="row">
<div class="col-md-2 col-xs-4">
<span class="label1">色调</span>
</div>
<div class="col-md-10 col-xs-8">
<input @change="AjaxSubmit($event,device.Number,'色调')" type="range" min="0" step="1" max="255" name="Hue" :value="GetDataValue(device.Number,'色调')" />
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</template>
</template>
</div>
</f7-page>

Binary file not shown.
Loading…
Cancel
Save