|
|
<!DOCTYPE html>
|
|
|
<html>
|
|
|
<head>
|
|
|
<meta charset="utf-8">
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui, viewport-fit=cover">
|
|
|
<meta name="apple-mobile-web-app-capable" content="yes">
|
|
|
<link rel="stylesheet" href="lib/framework7/css/framework7.bundle.min.css">
|
|
|
<link rel="stylesheet" href="css/framework7-icons.css">
|
|
|
<link rel="stylesheet" href="css/app.css">
|
|
|
<style>
|
|
|
table.ptz {
|
|
|
padding-top: 7px;
|
|
|
}
|
|
|
|
|
|
table.ptz td {
|
|
|
padding: 0 12px;
|
|
|
}
|
|
|
</style>
|
|
|
</head>
|
|
|
<body>
|
|
|
<div class="statusbar"></div>
|
|
|
<div id="app">
|
|
|
<f7-app :params="$root.f7params">
|
|
|
<f7-view main>
|
|
|
<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 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">
|
|
|
<div class="item-input-wrap input-dropdown-wrap" style="width:100%;">
|
|
|
<select class="input-with-value" id="camera" @change="CameraSelected" style="width:100%;">
|
|
|
<option v-for="c in GetDevices('摄像头')" :value="c.Number">{{c.DisplayName||c.Name}}</option>
|
|
|
</select>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="card-content">
|
|
|
<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>
|
|
|
</div>
|
|
|
<div class="card" id="ptz">
|
|
|
<div class="card-header with-border">云台</div>
|
|
|
<div class="card-content" style="height:178px;text-align:center;">
|
|
|
<table class="ptz" style="margin:0 auto;">
|
|
|
<tr>
|
|
|
<td></td>
|
|
|
<td></td>
|
|
|
<td><img class="ajax camera Up" :src="server+'/IoTCenter/images/up.png'" /></td>
|
|
|
<td></td>
|
|
|
<td></td>
|
|
|
</tr>
|
|
|
<tr>
|
|
|
<td><img class="ajax camera Zoomin" :src="server+'/IoTCenter/images/zoomin.png'" /></td>
|
|
|
<td><img class="ajax camera Left" :src="server+'/IoTCenter/images/left.png'" /></td>
|
|
|
<td><img class="ajax camera Stop" :src="server+'/IoTCenter/images/stop.png'" /></td>
|
|
|
<td><img class="ajax camera Right" :src="server+'/IoTCenter/images/right.png'" /></td>
|
|
|
<td><img class="ajax camera Zoomout" :src="server+'/IoTCenter/images/zoomout.png'" /></td>
|
|
|
</tr>
|
|
|
<tr>
|
|
|
<td></td>
|
|
|
<td></td>
|
|
|
<td><img class="ajax camera Down" :src="server+'/IoTCenter/images/down.png'" /></td>
|
|
|
<td></td>
|
|
|
<td></td>
|
|
|
</tr>
|
|
|
</table>
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
</template>
|
|
|
</div>
|
|
|
</f7-page>
|
|
|
</f7-view>
|
|
|
</f7-app>
|
|
|
</div>
|
|
|
<script type="text/javascript" src="lib/signalr/signalr.min.js"></script>
|
|
|
<script type="text/javascript" src="lib/axios/axios.min.js"></script>
|
|
|
<script type="text/javascript" src="lib/URI.js/URI.min.js"></script>
|
|
|
<script type="text/javascript" src="lib/linq.js/linq.min.js"></script>
|
|
|
<script type="text/javascript" src="lib/jquery/jquery.min.js"></script>
|
|
|
<script type="text/javascript" src="lib/jquery.validation/jquery.validate.min.js"></script>
|
|
|
<script type="text/javascript" src="lib/jquery.validation.unobtrusive/jquery.validate.unobtrusive.min.js"></script>
|
|
|
<script type="text/javascript" src="lib/vue/vue.min.js"></script>
|
|
|
<script type="text/javascript" src="lib/framework7/js/framework7.bundle.min.js"></script>
|
|
|
<script type="text/javascript" src="lib/framework7/js/framework7-vue.bundle.min.js"></script>
|
|
|
<script type="text/javascript" src="lib/flv.js/flv.min.js"></script>
|
|
|
<script type="text/javascript" src="js/node.js"></script>
|
|
|
<script>
|
|
|
var debug = true;
|
|
|
loadData();
|
|
|
</script>
|
|
|
</body>
|
|
|
</html> |
