You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
269 lines
10 KiB
269 lines
10 KiB
@{
|
|
HtmlTitle = "设备详情";
|
|
}
|
|
<div id="template">
|
|
<style>
|
|
h3 img {
|
|
height: 32px;
|
|
margin: -8px 8px -8px -8px;
|
|
}
|
|
|
|
.card-tools img, .card-body img {
|
|
height: 32px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.content-wrapper {
|
|
/*background-color: lightblue;*/
|
|
}
|
|
|
|
input.switch {
|
|
display: none;
|
|
}
|
|
|
|
label.switch {
|
|
display: inline-block;
|
|
width: 60px;
|
|
height: 30px;
|
|
border-radius: 30px;
|
|
}
|
|
|
|
label.switch.on {
|
|
background-color: green;
|
|
}
|
|
|
|
label.switch.off {
|
|
background-color: grey;
|
|
}
|
|
|
|
label.switch.on::before {
|
|
content: '';
|
|
display: block;
|
|
width: 30px;
|
|
height: 30px;
|
|
border-radius: 30px;
|
|
background-color: white;
|
|
position: absolute;
|
|
left: 0;
|
|
}
|
|
|
|
label.switch.off::after {
|
|
content: '';
|
|
display: block;
|
|
width: 30px;
|
|
height: 30px;
|
|
border-radius: 30px;
|
|
background-color: white;
|
|
position: absolute;
|
|
right: 0;
|
|
}
|
|
|
|
.ir label input {
|
|
display: none;
|
|
}
|
|
|
|
.danger {
|
|
color: red;
|
|
}
|
|
|
|
.normal {
|
|
color: green;
|
|
}
|
|
|
|
.ptz {
|
|
width: 100%;
|
|
}
|
|
|
|
.ptz td {
|
|
text-align: center;
|
|
height: 46px;
|
|
}
|
|
|
|
.ir td {
|
|
width: 11%;
|
|
text-align: center;
|
|
}
|
|
|
|
.keyboard {
|
|
table-layout: fixed;
|
|
}
|
|
|
|
input[type='range'] {
|
|
-webkit-appearance: none;
|
|
outline: none;
|
|
background: cadetblue;
|
|
display: inline-block;
|
|
width: 100%;
|
|
height: 15px;
|
|
margin: 10px 0;
|
|
}
|
|
|
|
input[type='range'].hue {
|
|
background: -webkit-linear-gradient(left, #F00 0%, #FF0 16.66%, #0F0 33.33%, #0FF 50%,#00F 66.66%, #F0F 83.33%, #F00 100%);
|
|
}
|
|
|
|
input[type='range'].saturation {
|
|
background: -webkit-linear-gradient(left, #fff 0%, green 100%);
|
|
}
|
|
|
|
input[type='range'].brightness {
|
|
background: -webkit-linear-gradient(left, #000 0%, #fff 100%);
|
|
}
|
|
|
|
input[type='range']::-webkit-slider-thumb {
|
|
-webkit-appearance: none;
|
|
background-color: transparent;
|
|
height: 30px;
|
|
width: 30px;
|
|
border: 15px solid rgba(230,230,230,0.8);
|
|
border-radius: 50%;
|
|
}
|
|
|
|
canvas {
|
|
width: 100%;
|
|
height: 215px;
|
|
}
|
|
|
|
.ir label {
|
|
margin: 2px 0 2px 2px;
|
|
}
|
|
|
|
.card-body button.btn {
|
|
margin-right: 5px;
|
|
}
|
|
|
|
.card {
|
|
margin-bottom: 20px;
|
|
}
|
|
</style>
|
|
<template v-if="model">
|
|
<div class="row">
|
|
<!--命令-->
|
|
<div class="col-md-12">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h3 class="card-title"><img :src="iotCenter+model.Product.Image" />{{model.DisplayName}}</h3>
|
|
<div class="card-tools">命令</div>
|
|
</div>
|
|
<div class="card-body" v-if="model.Commands.length>0">
|
|
<button class="btn btn-success" v-for="command in GetCommands()" v-on:click="CallCommand(command.Id)">{{command.Name}}</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<!--属性-->
|
|
<div class="col-md-12">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h3 class="card-title">属性</h3>
|
|
</div>
|
|
<div class="card-body" v-if="model.Data.length>0">
|
|
<div class="row" v-for="data in GetDatas()">
|
|
<div class="col-md-3">{{data.Name}}</div>
|
|
<div class="col-md-9">{{data.Value}}{{data.Unit}}{{data.Description}}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row" v-if="HasChart()">
|
|
<div class="col-md-12">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h3 class="card-title">趋势</h3>
|
|
</div>
|
|
<div class="card-body">
|
|
<canvas class="chart" :id="model.Number"></canvas>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<template v-if="model.Product.Apis.length>0">
|
|
<!--接口-->
|
|
<template v-if="model.Name!=='调色灯'">
|
|
<div class="row">
|
|
<div class="col-md-12">
|
|
<button class="btn btn-success" v-for="api in Enumerable.from(model.Product.Apis).orderBy('o=>o.Name')" v-if="api.Parameters.length<=1">{{api.Name}}</button>
|
|
</div>
|
|
</div>
|
|
<form class="form-horizontal" v-for="api in Enumerable.from(model.Product.Apis).orderBy('o=>o.Name')" v-if="api.Parameters.length>1">
|
|
<input type="hidden" name="Number" :value="model.Number" />
|
|
<input type="hidden" name="Method" :value="api.Method" />
|
|
<div class="form-group" v-for="item in api.Parameters" v-if="item.Name!=='number'">
|
|
<label :for="item.Name">{{item.Description}}:</label>
|
|
<template v-if="item.Type==='string'">
|
|
<input type="text" class="form-control" :name="item.Name" :value="GetDataValueByKey(item.Name)" />
|
|
</template>
|
|
<template v-else>
|
|
<input type="text" class="form-control" :name="item.Name" :value="GetDataValueByKey(item.Name)" />
|
|
</template>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-sm-12">
|
|
<button class="btn btn-success">{{api.Name}}</button>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</template>
|
|
<template v-else-if="model.Name==='调色灯'">
|
|
<div class="row">
|
|
<div class="col-md-12">
|
|
<div class="card btns">
|
|
<div class="card-header">
|
|
<h3 class="card-title">
|
|
<img src="/images/light.png" />{{model.DisplayName||model.Name}}
|
|
</h3>
|
|
<div class="card-tools">
|
|
<img v-if="GetDataValue('状态')=='开'" v-on:click="CallApi(model.Number,'/ColorLight/Off')" src="/images/on.png" />
|
|
<img v-if="GetDataValue('状态')=='关'" v-on:click="CallApi(model.Number,'/ColorLight/On')" src="/images/off.png" />
|
|
</div>
|
|
</div>
|
|
<div class="card-body">
|
|
<form method="get" action="/App/ExecApi">
|
|
<input type="hidden" name="Number" :value="model.Number" />
|
|
<input type="hidden" name="Method" value="/ColorLight/SetColor" />
|
|
<div class="row">
|
|
<div class="col-md-3 col-xs-4">
|
|
<label class="btn">色调</label>
|
|
</div>
|
|
<div class="col-md-9 col-xs-8">
|
|
<input v-on:change="AjaxSubmit($event,model.Number,'色调')" type="range" min="0" step="1" max="255" name="Hue" class="hue" :value="GetDataValue(model.Number,'色调')" />
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-md-3 col-xs-4">
|
|
<label class="btn">饱和度</label>
|
|
</div>
|
|
<div class="col-md-9 col-xs-8">
|
|
<input v-on:change="AjaxSubmit($event,model.Number,'饱和度')" type="range" min="0" step="1" max="254" name="Saturation" class="saturation" :value="GetDataValue(model.Number,'饱和度')" />
|
|
</div>
|
|
</div>
|
|
</form>
|
|
<form method="get" action="/App/ExecApi">
|
|
<input type="hidden" name="Number" :value="model.Number" />
|
|
<input type="hidden" name="Method" value="/ColorLight/SetBrightness" />
|
|
<div class="row">
|
|
<div class="col-md-3 col-xs-4">
|
|
<label class="btn">亮度</label>
|
|
</div>
|
|
<div class="col-md-9 col-xs-8">
|
|
<input v-on:change="AjaxSubmit($event,model.Number,'亮度')" type="range" min="0" step="1" max="254" name="Brightness" class="brightness" :value="GetDataValue(model.Number,'亮度')" />
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</template>
|
|
</template>
|
|
</div>
|
|
@section scripts{
|
|
<script src="/js/device.js"></script>
|
|
<script>
|
|
var debug = true;
|
|
loadData();
|
|
</script>
|
|
} |