wanggang
/
iot
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
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.
Branches Tags
${ item.name }
Create tag ${ searchTerm }
Create branch ${ searchTerm }
from '6cd75eb04b'
${ noResults }
iot/projects/IoTClient/Assets/StreamingAssets/wwwroot/index.html

771 lines
50 KiB
Raw Blame History

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="Content-Security-Policy" content="default-src * 'self' 'unsafe-inline' 'unsafe-eval' data: gap: content:">
<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">
<meta name="apple-mobile-web-app-status-bar-style" content="default">
<meta name="theme-color" content="#2196f3">
<meta name="format-detection" content="telephone=no">
<meta name="msapplication-tap-highlight" content="no">
<title>首页</title>
<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">
</head>
<body>
<div id="app">
<f7-app :params="f7params">
<f7-statusbar></f7-statusbar>
<f7-view id="main-view" url="/" main class="safe-areas">
</f7-view>
</f7-app>
</div>
<template id="page-login">
<f7-page>
<f7-navbar>
<f7-nav-title>登录</f7-nav-title>
<f7-nav-right>
<f7-link external panel-open="right" icon-f7="add" v-on:click="FaceLogin(Server,RememberMe)"></f7-link>
</f7-nav-right>
</f7-navbar>
<form v-bind:action="Server+'/Account/AppLogin'" v-on:submit.prevent="OnSubmit" class="login">
<div class="list no-hairlines-md">
<ul>
<li class="item-content item-input">
<div class="item-media">
<i class="f7-icons">link</i>
</div>
<div class="item-inner">
<div class="item-title item-label">服务器</div>
<div class="item-input-wrap">
<input type="text" name="Server" v-model="Server" data-val="true" data-val-required="请输入服务器地址">
<span class="input-clear-button"></span>
</div>
<span class="field-validation-valid text-danger" data-valmsg-for="Server" data-valmsg-replace="true"></span>
</div>
</li>
<li class="item-content item-input">
<div class="item-media">
<i class="f7-icons">person</i>
</div>
<div class="item-inner">
<div class="item-title item-label">用户名</div>
<div class="item-input-wrap">
<input type="text" name="UserName" v-model="UserName" data-val="true" data-val-required="请输入用户名">
<span class="input-clear-button"></span>
</div>
<span class="field-validation-valid text-danger" data-valmsg-for="UserName" data-valmsg-replace="true"></span>
</div>
</li>
<li class="item-content item-input">
<div class="item-media">
<i class="f7-icons">lock</i>
</div>
<div class="item-inner">
<div class="item-title item-label">密码</div>
<div class="item-input-wrap">
<input type="password" name="Password" v-model="Password" data-val="true" data-val-required="请输入密码">
<span class="input-clear-button"></span>
</div>
<span class="field-validation-valid text-danger" data-valmsg-for="Password" data-valmsg-replace="true"></span>
</div>
</li>
<li class="item-content">
<div class="item-media">
<i class="f7-icons">tag</i>
</div>
<div class="item-inner">
<span>记住我</span>
<label class="toggle toggle-init">
<input type="checkbox" name="RememberMeToggle" class="" v-model="RememberMe">
<span class="toggle-icon"></span>
</label>
<input type="hidden" name="RememberMe" class="" :value="RememberMe=='on'?true:false">
</div>
</li>
<li>
<div class="item-content">
<div class="item-inner">
<button type="submit" class="button button-large button-large button-raised button-fill color-blue submit">确定</button>
</div>
</div>
</li>
</ul>
</div>
</form>
</f7-page>
</template>
<template id="page-home">
<f7-page :page-content="false" @page:reinit="vm.init">
<f7-navbar>
<f7-nav-title>{{vm.Title}}</f7-nav-title>
</f7-navbar>
<f7-toolbar tabbar labels bottom>
<f7-link tab-link="#tab-message" icon-ios="f7:chat" icon-md="f7:chat" text="消息"></f7-link>
<f7-link tab-link="#tab-nodes" icon-ios="f7:data" icon-md="f7:data" text="智慧教室" tab-link-active></f7-link>
<f7-link tab-link="#tab-user" icon-ios="f7:person" icon-md="f7:person" text="我的"></f7-link>
</f7-toolbar>
<f7-tabs>
<f7-tab id="tab-message" class="page-content">
<template v-for="message in vm.Messages">
<template v-if="message&&message.Data.length">
<div class="block-title">{{message.DisplayName||message.Name}}</div>
<div class="list">
<ul v-if="message.Data.length">
<template v-for="p in message.Data">
<li v-if="p.Name!=='hidden'">
<div class="item-content">
<div class="item-media"><i class="f7-icons">info</i></div>
<div class="item-inner">
<div class="item-title">{{p.Name}}</div>
<div class="item-after">
<span class="badge color-blue">
{{p.Value}}
</span>
<span>&nbsp;</span>
<span class="badge color-blue" v-if="p.Unit">
{{p.Unit}}
</span>
<span>&nbsp;</span>
<span class="badge color-blue" v-if="p.Description">
{{p.Description}}
</span>
</div>
</div>
</div>
</li>
</template>
</ul>
</div>
</template>
</template>
</f7-tab>
<f7-tab id="tab-nodes" class="page-content" tab-active>
<f7-list>
<f7-list-item icon-ios="f7:chat" icon-md="f7:chat" v-for="node in vm.Nodes" :title="node.Name" :badge="node.Count" :link="'/node/'+node.Number+'/name/'+node.Name">
<f7-icon slot="media" f7="home"></f7-icon>
</f7-list-item>
</f7-list>
</f7-tab>
<f7-tab id="tab-user" class="page-content">
<f7-list>
<f7-list-item title="用户名" :after="vm.UserName"></f7-list-item>
<f7-list-item title="昵称" :after="vm.NickName"></f7-list-item>
<f7-list-item link="/login/" title="注销"></f7-list-item>
</f7-list>
</f7-tab>
</f7-tabs>
</f7-page>
</template>
<template id="page-node">
<f7-page>
<f7-navbar>
<f7-navbar :title="Node.Name" back-link="Back"></f7-navbar>
</f7-navbar>
<template v-if="getDevices('光强检测器').length">
<div class="block-title">光强检测器</div>
<div class="block block-strong">
<div class="row">
<div class="col-100 tablet-50 desktop-25" v-for="device in getDevices('光强检测器')">
<div class="list links-list">
<ul>
<li>
<a class="item-content"
:href="'/device/'+device.Number+'/name/'+device.Name">
<div class="item-media"> <img :src="'images/'+device.Icon+'.png'" /></div>
<div class="item-inner">
<div class="item-title">{{device.DisplayName||device.Name}}</div>
<div class="item-after">
<span v-if="getData(device,'光照度')" class="badge color-green">{{getData(device,'光照度')}}</span>
</div>
</div>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</template>
<template v-if="getDevices('粉尘检测器').length">
<div class="block-title">粉尘检测器</div>
<div class="block block-strong">
<div class="row">
<div class="col-100 tablet-50 desktop-25" v-for="device in getDevices('粉尘检测器')">
<div class="list links-list">
<ul>
<li>
<a class="item-content"
:href="'/device/'+device.Number+'/name/'+device.Name">
<div class="item-media"> <img :src="'images/'+device.Icon+'.png'" /></div>
<div class="item-inner">
<div class="item-title">{{device.DisplayName||device.Name}}</div>
<div class="item-after">
<span v-if="getData(device,'温度')" class="badge color-green">{{getData(device,'温度')}}</span>
<span v-if="getData(device,'湿度')" class="badge color-green">{{getData(device,'湿度')}}</span>
<span v-if="getData(device,'PM1.0')" class="badge color-green">{{getData(device,'PM1.0')}}</span>
<span v-if="getData(device,'PM2.5')" class="badge color-green">{{getData(device,'PM2.5')}}</span>
<span v-if="getData(device,'PM10')" class="badge color-green">{{getData(device,'PM10')}}</span>
</div>
</div>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</template>
<template v-if="getDevices('烟雾传感器').length">
<div class="block-title">烟雾传感器</div>
<div class="block block-strong">
<div class="row">
<div class="col-100 tablet-50 desktop-25" v-for="device in getDevices('烟雾传感器')">
<div class="list links-list">
<ul>
<li>
<a class="item-content"
:href="'/device/'+device.Number+'/name/'+device.Name">
<div class="item-media"> <img :src="'images/'+device.Icon+'.png'" /></div>
<div class="item-inner">
<div class="item-title">{{device.DisplayName||device.Name}}</div>
<div class="item-after">
<span v-if="getData(device,'状态')" class="badge color-green">{{getData(device,'状态')}}</span>
</div>
</div>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</template>
<template v-if="getDevices('红外感应器').length">
<div class="block-title">红外感应器</div>
<div class="block block-strong">
<div class="row">
<div class="col-100 tablet-50 desktop-25" v-for="device in getDevices('红外感应器')">
<div class="list links-list">
<ul>
<li>
<a class="item-content"
:href="'/device/'+device.Number+'/name/'+device.Name">
<div class="item-media"> <img :src="'images/'+device.Icon+'.png'" /></div>
<div class="item-inner">
<div class="item-title">{{device.DisplayName||device.Name}}</div>
<div class="item-after">
<span v-if="getData(device,'状态')" class="badge color-green">{{getData(device,'状态')}}</span>
</div>
</div>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</template>
<template v-if="getDevices('窗帘').length">
<div class="block-title">窗帘</div>
<div class="block block-strong">
<div class="row">
<div class="col-100 tablet-50 desktop-25" v-for="device in getDevices('窗帘')">
<div class="list">
<ul>
<li>
<a class="item-link item-content"
:href="'/device/'+device.Number+'/name/'+device.Name">
<div class="item-media"> <img :src="'images/'+device.Icon+'.png'" /></div>
<div class="item-inner">
<div class="item-title">{{device.DisplayName||device.Name}}</div>
<div class="item-after"><span class="badge color-green">{{getData(device,"状态")}}</span></div>
</div>
</a>
</li>
</ul>
</div>
<div class="row">
<a class="button button-large button-raised button-fill" href="javascript: ;" v-on:click="call(device.GatewayNumber,device.Number,'/Curtain/On')">开</a>
<a class="button button-large button-raised button-fill" href="javascript: ;" v-on:click="call(device.GatewayNumber,device.Number,'/Curtain/Stop')">停</a>
<a class="button button-large button-raised button-fill" href="javascript: ;" v-on:click="call(device.GatewayNumber,device.Number,'/Curtain/Off')">关</a>
</div>
</div>
</div>
</div>
</template>
<template v-if="getDevices('插座').length">
<div class="block-title">插座</div>
<div class="block block-strong">
<div class="row">
<div class="col-100 tablet-50 desktop-25" v-for="device in getDevices('插座')">
<div class="list">
<ul>
<li>
<a class="item-link item-content"
:href="'/device/'+device.Number+'/name/'+device.Name">
<div class="item-media"> <img :src="'images/'+device.Icon+'.png'" /></div>
<div class="item-inner">
<div class="item-title">{{device.DisplayName||device.Name}}</div>
<div class="item-after">
<span class="badge color-green">{{getData(device,"状态")}}</span>
</div>
</div>
</a>
</li>
</ul>
</div>
<div class="row">
<a class="button button-large button-raised button-fill" href="javascript: ;" v-on:click="call(device.GatewayNumber,device.Number,'/Socket/On')" v-if="getData(device,'状态')==='关'">开</a>
<a class="button button-large button-raised button-fill" href="javascript: ;" v-on:click="call(device.GatewayNumber,device.Number,'/Socket/Off')" v-else>关</a>
</div>
</div>
</div>
</div>
</template>
<template v-if="getDevices('一路开关').length">
<div class="block-title">一路开关</div>
<div class="block block-strong">
<div class="row">
<div class="col-100 tablet-50 desktop-25" v-for="device in getDevices('一路开关')">
<div class="list">
<ul>
<li>
<a class="item-link item-content"
:href="'/device/'+device.Number+'/name/'+device.Name">
<div class="item-media"> <img :src="'images/'+device.Icon+'.png'" /></div>
<div class="item-inner">
<div class="item-title">{{device.DisplayName||device.Name}}</div>
<div class="item-after">
<span class="badge color-green">{{getData(device,"状态")}}</span>
</div>
</div>
</a>
</li>
</ul>
</div>
<div class="row">
<a class="button button-large button-raised button-fill" href="javascript: ;" v-on:click="call(device.GatewayNumber,device.Number,'/Switch/On')" v-if="getData(device,'状态')==='关'">开</a>
<a class="button button-large button-raised button-fill" href="javascript: ;" v-on:click="call(device.GatewayNumber,device.Number,'/Switch/Off')" v-else>关</a>
</div>
</div>
</div>
</div>
</template>
<template v-if="getDevices('二路开关').length">
<div class="block-title">二路开关</div>
<div class="block block-strong">
<div class="row">
<div class="col-100 tablet-50 desktop-25" v-for="device in getDevices('二路开关')">
<div class="list">
<ul>
<li>
<a class="item-link item-content"
:href="'/device/'+device.Number+'/name/'+device.Name">
<div class="item-media"> <img :src="'images/'+device.Icon+'.png'" /></div>
<div class="item-inner">
<div class="item-title">{{device.DisplayName||device.Name}}</div>
<div class="item-after">
<span class="badge color-green">{{getData(device,"L1状态")}}</span>
<span class="badge color-green">{{getData(device,"L2状态")}}</span>
</div>
</div>
</a>
</li>
</ul>
</div>
<div class="row">
<a class="button button-large button-raised button-fill" href="javascript: ;" v-on:click="call(device.GatewayNumber,device.Number,'/Switch2/On')">全开</a>
<a class="button button-large button-raised button-fill" href="javascript: ;" v-on:click="call(device.GatewayNumber,device.Number,'/Switch2/Off')">全关</a>
</div>
<div class="row">
<a class="button button-large button-raised button-fill" href="javascript: ;" v-on:click="call(device.GatewayNumber,device.Number,'/Switch2/L1On')" v-if="getData(device,'L1状态')==='关'">开</a>
<a class="button button-large button-raised button-fill" href="javascript: ;" v-on:click="call(device.GatewayNumber,device.Number,'/Switch2/L1Off')" v-else>关</a>
<a class="button button-large button-raised button-fill" href="javascript: ;" v-on:click="call(device.GatewayNumber,device.Number,'/Switch2/L2On')" v-if="getData(device,'L2状态')==='关'">开</a>
<a class="button button-large button-raised button-fill" href="javascript: ;" v-on:click="call(device.GatewayNumber,device.Number,'/Switch2/L2Off')" v-else>关</a>
</div>
</div>
</div>
</div>
</template>
<template v-if="getDevices('三路开关').length">
<div class="block-title">三路开关</div>
<div class="block block-strong">
<div class="row">
<div class="col-100 tablet-50 desktop-25" v-for="device in getDevices('三路开关')">
<div class="list">
<ul>
<li>
<a class="item-link item-content"
:href="'/device/'+device.Number+'/name/'+device.Name">
<div class="item-media"> <img :src="'images/'+device.Icon+'.png'" /></div>
<div class="item-inner">
<div class="item-title">{{device.DisplayName||device.Name}}</div>
<div class="item-after">
<span class="badge color-green">{{getData(device,"L1状态")}}</span>
<span class="badge color-green">{{getData(device,"L2状态")}}</span>
<span class="badge color-green">{{getData(device,"L3状态")}}</span>
</div>
</div>
</a>
</li>
</ul>
</div>
<div class="row">
<a class="button button-large button-raised button-fill" href="javascript: ;" v-on:click="call(device.GatewayNumber,device.Number,'/Switch3/On')">全开</a>
<a class="button button-large button-raised button-fill" href="javascript: ;" v-on:click="call(device.GatewayNumber,device.Number,'/Switch3/Off')">全关</a>
</div>
<div class="row">
<a class="button button-large button-raised button-fill" href="javascript: ;" v-on:click="call(device.GatewayNumber,device.Number,'/Switch3/L1On')" v-if="getData(device,'L1状态')==='关'">开</a>
<a class="button button-large button-raised button-fill" href="javascript: ;" v-on:click="call(device.GatewayNumber,device.Number,'/Switch3/L1Off')" v-else>关</a>
<a class="button button-large button-raised button-fill" href="javascript: ;" v-on:click="call(device.GatewayNumber,device.Number,'/Switch3/L2On')" v-if="getData(device,'L2状态')==='关'">开</a>
<a class="button button-large button-raised button-fill" href="javascript: ;" v-on:click="call(device.GatewayNumber,device.Number,'/Switch3/L2Off')" v-else>关</a>
<a class="button button-large button-raised button-fill" href="javascript: ;" v-on:click="call(device.GatewayNumber,device.Number,'/Switch3/L3On')" v-if="getData(device,'L3状态')==='关'">开</a>
<a class="button button-large button-raised button-fill" href="javascript: ;" v-on:click="call(device.GatewayNumber,device.Number,'/Switch3/L3Off')" v-else>关</a>
</div>
</div>
</div>
</div>
</template>
<template v-if="getDevices('调色灯').length">
<div class="block-title">调色灯</div>
<div class="block block-strong">
<div class="row">
<div class="col-100 tablet-50 desktop-25" v-for="device in getDevices('调色灯')">
<div class="list">
<ul>
<li>
<a class="item-link item-content"
:href="'/device/'+device.Number+'/name/'+device.Name">
<div class="item-media"> <img :src="'images/'+device.Icon+'.png'" /></div>
<div class="item-inner">
<div class="item-title">{{device.DisplayName||device.Name}}</div>
<div class="item-after"><span class="badge color-green">{{getData(device,"状态")}}</span></div>
</div>
</a>
</li>
</ul>
</div>
<div class="row">
<a class="button button-large button-raised button-fill" href="javascript: ;" v-on:click="call(device.GatewayNumber,device.Number,'/ColorLight/On')" v-if="getData(device,'状态')==='关'">开</a>
<a class="button button-large button-raised button-fill" href="javascript: ;" v-on:click="call(device.GatewayNumber,device.Number,'/ColorLight/Off')" v-else>关</a>
</div>
<div class="row">
<form class="ajax" method="get" :action="vm.IoTServer+'/App/Exec'">
<input type="hidden" name="ConnectionId" :value="vm.ConnectionId" />
<input type="hidden" name="Gateway" :value="device.GatewayNumber" />
<input type="hidden" name="Number" :value="device.Number" />
<input type="hidden" name="Method" value="/ColorLight/SetBrightness" />
<div class="list inline-labels no-hairlines-md">
<ul>
<li class="item-content item-input">
<div class="item-media">
<i class="f7-icons">info</i>
</div>
<div class="item-inner">
<div class="item-title item-label">亮度</div>
<div class="item-input-wrap">
<input class="ajax" type="range" min="0" step="1" max="255" name="Brightness" :value="getValue(device,'亮度')" />
</div>
</div>
</li>
</ul>
</div>
</form>
</div>
<div class="row">
<form class="ajax" method="get" :action="vm.IoTServer+'/App/Exec'">
<input type="hidden" name="ConnectionId" :value="vm.ConnectionId" />
<input type="hidden" name="Gateway" :value="device.GatewayNumber" />
<input type="hidden" name="Number" :value="device.Number" />
<input type="hidden" name="Method" value="/ColorLight/SetColor" />
<div class="list inline-labels no-hairlines-md">
<ul>
<li class="item-content item-input">
<div class="item-media">
<i class="f7-icons">info</i>
</div>
<div class="item-inner">
<div class="item-title item-label">色调</div>
<div class="item-input-wrap">
<input class="ajax" type="range" min="0" step="1" max="255" name="Hue" :value="getValue(device,'色调')" />
</div>
</div>
</li>
<li class="item-content item-input">
<div class="item-media">
<i class="f7-icons">info</i>
</div>
<div class="item-inner">
<div class="item-title item-label">饱和度</div>
<div class="item-input-wrap">
<input class="ajax" type="range" min="0" step="1" max="255" name="Saturation" :value="getValue(device,'饱和度')" />
</div>
</div>
</li>
</ul>
</div>
</form>
</div>
<div class="row">
<form class="ajax" method="get" :action="vm.IoTServer+'/App/Exec'">
<input type="hidden" name="ConnectionId" :value="vm.ConnectionId" />
<input type="hidden" name="Gateway" :value="device.GatewayNumber" />
<input type="hidden" name="Number" :value="device.Number" />
<input type="hidden" name="Method" value="/ColorLight/SetColorTemperature" />
<div class="list inline-labels no-hairlines-md">
<ul>
<li class="item-content item-input">
<div class="item-media">
<i class="f7-icons">info</i>
</div>
<div class="item-inner">
<div class="item-title item-label">色温</div>
<div class="item-input-wrap">
<input class="ajax" type="range" min="2700" step="1" max="6500" name="ColorTemperature" :value="getValue(device,'色温')" />
</div>
</div>
</li>
</ul>
</div>
</form>
</div>
</div>
</div>
</div>
</template>
<template v-if="getDevices('红外转发器').length">
<div class="block-title">红外转发器</div>
<div class="block block-strong">
<div class="row">
<div class="col-100 tablet-50 desktop-25" v-for="device in getDevices('红外转发器')">
<div class="list">
<ul>
<li>
<a class="item-link item-content"
:href="'/device/'+device.Number+'/name/'+device.Name">
<div class="item-media"> <img :src="'images/'+device.Icon+'.png'" /></div>
<div class="item-inner">
<div class="item-title">{{device.DisplayName||device.Name}}</div>
<div class="item-after"></div>
</div>
</a>
</li>
</ul>
</div>
<div class="row">
<a class="button button-large button-raised button-fill" href="javascript: ;" v-on:click="call(device.GatewayNumber,device.Number,'/Ir/KeyCodeType1On')" v-if="getData(device,'空调')==='关'">启用空调</a>
<a class="button button-large button-raised button-fill" href="javascript: ;" v-on:click="call(device.GatewayNumber,device.Number,'/Ir/KeyCodeType1Off')" v-else>禁用空调</a>
<a class="button button-large button-raised button-fill" href="javascript: ;" v-on:click="call(device.GatewayNumber,device.Number,'/Ir/KeyCodeType2On')" v-if="getData(device,'电视')==='关'">启用电视</a>
<a class="button button-large button-raised button-fill" href="javascript: ;" v-on:click="call(device.GatewayNumber,device.Number,'/Ir/KeyCodeType2Off')" v-else>禁用电视</a>
<a class="button button-large button-raised button-fill" href="javascript: ;" v-on:click="call(device.GatewayNumber,device.Number,'/Ir/KeyCodeType5On')" v-if="getData(device,'电视')==='关'">启用自定义</a>
<a class="button button-large button-raised button-fill" href="javascript: ;" v-on:click="call(device.GatewayNumber,device.Number,'/Ir/KeyCodeType5Off')" v-else>禁用自定义</a>
</div>
<div class="row" v-if="getData(device,'空调')==='开'">
<form class="ajax" method="get" :action="vm.IoTServer+'/App/Exec'">
<input type="hidden" name="ConnectionId" :value="vm.ConnectionId" />
<input type="hidden" name="Gateway" :value="device.GatewayNumber" />
<input type="hidden" name="Number" :value="device.Number" />
<input type="hidden" name="Type" value="1" />
<div class="row">
<input name="power" type="button" value="2" class="ajax" />
</div>
</form>
</div>
</div>
</div>
</div>
</template>
</f7-page>
</template>
<template id="page-device">
<f7-page>
<f7-navbar>
<f7-navbar :title="Device.DisplayName||Device.Name" back-link="Back"></f7-navbar>
</f7-navbar>
<div class="block-title" v-if="Device.Data.length">属性</div>
<div class="list">
<ul v-if="Device.Data.length">
<template v-for="data in Device.Data">
<li v-if="showData(data.Name)">
<div class="item-content">
<div class="item-media"><i class="f7-icons">info</i></div>
<div class="item-inner">
<div class="item-title">{{data.Name}}</div>
<div class="item-after">
<span class="badge color-blue">
{{data.Value}}
</span>
<span>&nbsp;</span>
<span class="badge color-blue" v-if="data.Unit">
{{data.Unit}}
</span>
<span>&nbsp;</span>
<span class="badge color-blue" v-if="data.Description">
{{data.Description}}
</span>
</div>
</div>
</div>
</li>
</template>
</ul>
</div>
<template v-for="data in Device.Data">
<div class="block" v-if="data.Type === 'Int' || data.Type === 'Float'">
<div class="col">
<canvas :id="data.Key" :data-label="data.Name" class="chart"></canvas>
</div>
</div>
</template>
<div class="block-title" v-if="Device.Apis.length">操作</div>
<div class="list no-hairlines-md" v-if="Device.Apis.length">
<ul v-if="Device.Name==='摄像头'">
<li>
<div class="block">
<a v-if="isApp" class="button button-large button-fill button-outline color-green external" :href="getUrl('rtmp')">预览</a>
<a v-else class="button button-large button-fill button-outline color-green" href="javascript:;" v-on:click="flv()">预览</a>
</div>
</li>
</ul>
<template v-for="api in _.orderBy(Device.Apis,['Command'])">
<form method="get" action="/Command/Exec" v-on:submit.prevent="call" class="command" v-if="showApi(api)">
<input type="hidden" name="cmd" :value="api.Command" />
<input type="hidden" name="id" :value="Device.Id" />
<ul>
<template v-for="parameter in api.Parameters">
<template>
<li class="item-content item-input" v-if="parameter.Name!='hidden'">
<div class="item-inner">
<div class="item-title item-label">{{parameter.Description}}</div>
<div class="item-input-wrap">
<template v-if="isSelect(Device,parameter.Name)">
<select :name="parameter.Name"
data-val="true"
:data-val-required="'请选择'+parameter.Description">
<option value="">请选择</option>
<option v-for="option in getSelect(Device,parameter.Name)" :value="option.value">{{option.text}}</option>
</select>
<span class="input-clear-button"></span>
</template>
<template v-else>
<template v-if="parameter.Minimum||parameter.Maximnu">
<input :name="parameter.Name" :value="getParameter(parameter.Name)" data-val="true" data-val-required="请输入"
data-val-number="必须输入数字" :data-val-range="'范围:'+parameter.Minimum+'~'+parameter.Maximnu" :data-val-range-min="parameter.Minimum" :data-val-range-max="parameter.Maximnu"
type="text" />
<span class="input-clear-button"></span>
</template>
<template v-else>
<input :name="parameter.Name"
:value="getParameter(parameter.Name)"
data-val="true"
:data-val-required="'请输入'+parameter.Description"
type="text" />
<span class="input-clear-button"></span>
</template>
</template>
</div>
<span class="field-validation-valid text-danger" :data-valmsg-for="parameter.Name" data-valmsg-replace="true"> </span>
</div>
</li>
</template>
</template>
<li>
<div class="block">
<button class="button button-large button-fill button-outline" type="submit">{{api.Name}}</button>
</div>
</li>
</ul>
</form>
</template>
</div>
</f7-page>
</template>
<template id="page-camera">
<f7-page>
<f7-navbar>
<f7-navbar :title="name" back-link="Back"></f7-navbar>
</f7-navbar>
<div class="videoContainer">
<video id="flvPlayer" class="video" muted controls autoplay></video>
<div id="ptz" v-if="ptz">
<table>
<tr>
<td></td>
<td></td>
<td><a href="javascript:;" v-on:mouseup="call('23stop')" v-on:mouseleave="call('23stop')" v-on:mousedown="call('26up')"><img src="images/up.png" /></a></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td><a href="javascript:;" v-on:mouseup="call('23stop')" v-on:mouseleave="call('23stop')" v-on:mousedown="call('24left')"><img src="images/left.png" /></a></td>
<td></td>
<td><a href="javascript:;" v-on:mouseup="call('23stop')" v-on:mouseleave="call('23stop')" v-on:mousedown="call('25right')"><img src="images/right.png" /></a></td>
<td></td>
</tr>
<tr>
<td><a href="javascript:;" v-on:mouseup="call('23stop')" v-on:mouseleave="call('23stop')" v-on:mousedown="call('21zoomin')"><img src="images/zoomin.png" /></a></td>
<td></td>
<td><a href="javascript:;" v-on:mouseup="call('23stop')" v-on:mouseleave="call('23stop')" v-on:mousedown="call('27down')"><img src="images/down.png" /></a></td>
<td></td>
<td><a href="javascript:;" v-on:mouseup="call('23stop')" v-on:mouseleave="call('23stop')" v-on:mousedown="call('22zoomout')"><img src="images/zoomout.png" /></a></td>
</tr>
</table>
</div>
</div>
</f7-page>
</template>
<template id="page-not-found">
<f7-page>
<f7-navbar title="Not found" back-link="Back"></f7-navbar>
<f7-block strong>
<p>Sorry</p>
<p>Requested content not found.</p>
</f7-block>
</f7-page>
</template>
<div id="callback" class="popup popup-tablet-fullscreen">
<div class="page">
<div class="navbar">
<div class="navbar-inner">
<div class="left">
</div>
<div class="title">API调用结果</div>
<div class="right"><a href="#" class="link popup-close">关闭</a></div>
</div>
</div>
<div class="page-content">
</div>
</div>
</div>
<script src="lib/mobile.detect/mobile-detect.min.js"></script>
<script src="lib/lodash/lodash.min.js"></script>
<script src="lib/jquery/jquery.min.js"></script>
<script src="lib/jquery.validation/jquery.validate.min.js"></script>
<script src="lib/jquery.validation.unobtrusive/jquery.validate.unobtrusive.min.js"></script>
<script src="lib/jquery.ajax.unobtrusive/jquery.unobtrusive-ajax.min.js"></script>
<script src="lib/framework7/js/framework7.bundle.min.js"></script>
<script src="lib/vue/vue.min.js"></script>
<script src="lib/framework7/js/framework7-vue.bundle.min.js"></script>
<script src="lib/signalr/signalr.min.js"></script>
<script src="lib/dayjs/dayjs.min.js"></script>
<script src="lib/URI.js/URI.min.js"></script>
<script src="lib/flv.js/flv.min.js"></script>
<script src="lib/Chart.js/Chart.bundle.min.js"></script>
<script src="js/app.js"></script>
</body>
</html>
Reference in new issue View Git Blame Copy Permalink