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.
908 lines
59 KiB
908 lines
59 KiB
<!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 title="登录"></f7-navbar>
|
|
<form v-bind:action="Server+'/Account/AppLogin'" v-on:submit.prevent="OnSubmit" class="login">
|
|
<div class="list">
|
|
<ul>
|
|
<li class="item-content item-input item-input-outline">
|
|
<div class="item-inner">
|
|
<div class="item-title item-floating-label">服务器</div>
|
|
<div class="item-input-wrap">
|
|
<input type="text" name="Server" class="" 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 item-input-outline">
|
|
<div class="item-inner">
|
|
<div class="item-title item-floating-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 item-input-outline">
|
|
<div class="item-inner">
|
|
<div class="item-title item-floating-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>
|
|
<div class="item-content item-input-outline">
|
|
<div class="item-inner">
|
|
<div class="item-title">记住我</div>
|
|
<div class="item-after">
|
|
<label class="toggle toggle-init">
|
|
<input type="checkbox" name="RememberMeToggle" class="" v-model="RememberMe">
|
|
<span class="toggle-icon"></span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<input type="hidden" name="RememberMe" class="" :value="RememberMe=='on'?true:false">
|
|
</li>
|
|
<li>
|
|
<div class="item-content">
|
|
<div class="item-inner">
|
|
<button type="submit" class="button button-large button-large button-raised button-fill color-lightblue 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-nav-right>
|
|
<f7-link external panel-open="right" icon-f7="add" href="webqr.html"></f7-link>
|
|
</f7-nav-right>
|
|
</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> </span>
|
|
<span class="badge color-blue" v-if="p.Unit">
|
|
{{p.Unit}}
|
|
</span>
|
|
<span> </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="link"></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="Node.Sences.length">
|
|
<div class="block-title">场景</div>
|
|
<div class="block block-strong">
|
|
<div class="row">
|
|
<div class="col-100 tablet-50 desktop-25" v-for="sence in _.orderBy(Node.Sences,['DisplayOrder','Name'])" v-on:click="callSence(sence.Id)">
|
|
<a href="javascript:;" class="button button-large button-raised button-fill">{{sence.Name}}</a>
|
|
</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 media-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-row">
|
|
<div class="item-title">{{device.DisplayName||device.Name}}</div>
|
|
<div class="item-after"></div>
|
|
</div>
|
|
<div class="item-text">
|
|
<template v-if="device.Name==='温湿度检测器'">
|
|
<span class="badge color-green">{{getData(device,"温度")}}</span>
|
|
<span class="badge color-green">{{getData(device,"湿度")}}</span>
|
|
</template>
|
|
<template class="row" v-else-if="device.Name==='二氧化碳监测器'">
|
|
<span class="badge color-green">{{getData(device,"二氧化碳")}}</span>
|
|
</template>
|
|
<template class="row" v-else-if="device.Name==='光强检测器'">
|
|
<span class="badge color-green">{{getData(device,"光照强度")}}</span>
|
|
</template>
|
|
<template class="row" v-else-if="device.Name==='粉尘检测器'">
|
|
<span class="badge color-green">{{getData(device,"粉尘")}}</span>
|
|
</template>
|
|
<template class="row" v-else>
|
|
<span class="badge color-green">未定义</span>
|
|
</template>
|
|
</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 media-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-row">
|
|
<div class="item-title">{{device.DisplayName||device.Name}}</div>
|
|
<div class="item-after"></div>
|
|
</div>
|
|
<div class="item-text">
|
|
<span class="badge color-green" v-if="getData(device,'状态')==='正常'">正常</span>
|
|
<span class="badge color-red" v-else>警告</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"></div>
|
|
</div>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<a class="button button-large button-raised button-fill" href="javascript: ;" v-on:click="call(device.Id,'21boot')">开</a>
|
|
<a class="button button-large button-raised button-fill" href="javascript: ;" v-on:click="call(device.Id,'23shot')">截图</a>
|
|
<a class="button button-large button-raised button-fill" href="javascript: ;" v-on:click="call(device.Id,'22shutdown')">关</a>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-100 tablet-50 desktop-25"></div>
|
|
<div class="col-100 tablet-50 desktop-25">
|
|
<div class="row">
|
|
<a class="button button-large button-raised button-fill" href="javascript: ;" v-on:click="callAll('主机','21boot')">批量开</a>
|
|
<a class="button button-large button-raised button-fill" href="javascript: ;" v-on:click="callAll('主机','22shutdown')">批量关</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<template v-if="getDevices('AP').length">
|
|
<div class="block-title">无线AP</div>
|
|
<div class="block block-strong">
|
|
<div class="row">
|
|
<div class="col-100 tablet-50 desktop-25" v-for="device in getDevices('AP')">
|
|
<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>
|
|
<a class="button button-large button-raised button-fill" href="javascript: ;" v-on:click="call(device.Id,'21dhcps')">查看连接</a>
|
|
</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>
|
|
<a class="button button-large button-raised button-fill" href="javascript: ;" v-on:click="call(device.Id,'21on')">开</a>
|
|
<a class="button button-large button-raised button-fill" href="javascript: ;" v-on:click="call(device.Id,'23stop')">停</a>
|
|
<a class="button button-large button-raised button-fill" href="javascript: ;" v-on:click="call(device.Id,'22off')">关</a>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-100 tablet-50 desktop-25"></div>
|
|
<div class="col-100 tablet-50 desktop-25">
|
|
<div class="row">
|
|
<a class="button button-large button-raised button-fill" href="javascript: ;" v-on:click="callAll('一路可调窗帘','21on')">批量开</a>
|
|
<a class="button button-large button-raised button-fill" href="javascript: ;" v-on:click="callAll('一路可调窗帘','23stop')">批量停</a>
|
|
<a class="button button-large button-raised button-fill" href="javascript: ;" v-on:click="callAll('一路可调窗帘','22off')">批量关</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>
|
|
<a class="button button-large button-raised button-fill" href="javascript: ;" v-on:click="call(device.Id,'21on')" v-if="getData(device,'状态')==='关'">开</a>
|
|
<a class="button button-large button-raised button-fill" href="javascript: ;" v-on:click="call(device.Id,'22off')" v-else>关</a>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-100 tablet-50 desktop-25"></div>
|
|
<div class="col-100 tablet-50 desktop-25">
|
|
<div class="row">
|
|
<a class="button button-large button-raised button-fill" href="javascript: ;" v-on:click="callAll('计量开关','21on')">批量开</a>
|
|
<a class="button button-large button-raised button-fill" href="javascript: ;" v-on:click="callAll('计量开关','22off')">批量关</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>
|
|
<a class="button button-large button-raised button-fill" href="javascript: ;" v-on:click="call(device.Id,'21on')" v-if="getData(device,'状态')==='关'">开</a>
|
|
<a class="button button-large button-raised button-fill" href="javascript: ;" v-on:click="call(device.Id,'22off')" v-else>关</a>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-100 tablet-50 desktop-25"></div>
|
|
<div class="col-100 tablet-50 desktop-25">
|
|
<div class="row">
|
|
<a class="button button-large button-raised button-fill" href="javascript: ;" v-on:click="callAll('一路照明开关','21on')">批量开</a>
|
|
<a class="button button-large button-raised button-fill" href="javascript: ;" v-on:click="callAll('一路照明开关','22off')">批量关</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>
|
|
<a class="button button-large button-raised button-fill" href="javascript: ;" v-on:click="call(device.Id,'21on')">全开</a>
|
|
<a class="button button-large button-raised button-fill" href="javascript: ;" v-on:click="call(device.Id,'22off')">全关</a>
|
|
<a class="button button-large button-raised button-fill" href="javascript: ;" v-on:click="call(device.Id,'23l1on')" v-if="getData(device,'L1状态')==='关'">开</a>
|
|
<a class="button button-large button-raised button-fill" href="javascript: ;" v-on:click="call(device.Id,'24l1off')" v-else>关</a>
|
|
<a class="button button-large button-raised button-fill" href="javascript: ;" v-on:click="call(device.Id,'25l2on')" v-if="getData(device,'L2状态')==='关'">开</a>
|
|
<a class="button button-large button-raised button-fill" href="javascript: ;" v-on:click="call(device.Id,'26l2off')" v-else>关</a>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-100 tablet-50 desktop-25"></div>
|
|
<div class="col-100 tablet-50 desktop-25">
|
|
<div class="row">
|
|
<a class="button button-large button-raised button-fill" href="javascript: ;" v-on:click="callAll('二路灯开关','21on')">批量开</a>
|
|
<a class="button button-large button-raised button-fill" href="javascript: ;" v-on:click="callAll('二路灯开关','22off')">批量关</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,"状态4")}}</span>
|
|
<span class="badge color-green">{{getData(device,"状态5")}}</span>
|
|
<span class="badge color-green">{{getData(device,"状态6")}}</span>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<a class="button button-large button-raised button-fill" href="javascript: ;" v-on:click="call(device.Id,'21on')">全开</a>
|
|
<a class="button button-large button-raised button-fill" href="javascript: ;" v-on:click="call(device.Id,'22off')">全关</a>
|
|
<a class="button button-large button-raised button-fill" href="javascript: ;" v-on:click="call(device.Id,'23on')" v-if="getData(device,'状态4')==='关'">开</a>
|
|
<a class="button button-large button-raised button-fill" href="javascript: ;" v-on:click="call(device.Id,'24off')" v-else>关</a>
|
|
<a class="button button-large button-raised button-fill" href="javascript: ;" v-on:click="call(device.Id,'25on')" v-if="getData(device,'状态5')==='关'">开</a>
|
|
<a class="button button-large button-raised button-fill" href="javascript: ;" v-on:click="call(device.Id,'26off')" v-else>关</a>
|
|
<a class="button button-large button-raised button-fill" href="javascript: ;" v-on:click="call(device.Id,'27on')" v-if="getData(device,'状态6')==='关'">开</a>
|
|
<a class="button button-large button-raised button-fill" href="javascript: ;" v-on:click="call(device.Id,'28off')" v-else>关</a>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-100 tablet-50 desktop-25"></div>
|
|
<div class="col-100 tablet-50 desktop-25">
|
|
<div class="row">
|
|
<a class="button button-large button-raised button-fill" href="javascript: ;" v-on:click="callAll('三路照明开关','21on')">批量开</a>
|
|
<a class="button button-large button-raised button-fill" href="javascript: ;" v-on:click="callAll('三路照明开关','22off')">批量关</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>
|
|
<a class="button button-large button-raised button-fill" href="javascript: ;" v-on:click="call(device.Id,'21on')" v-if="getData(device,'状态')==='关'">开</a>
|
|
<a class="button button-large button-raised button-fill" href="javascript: ;" v-on:click="call(device.Id,'22off')" v-else>关</a>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-100 tablet-50 desktop-25"></div>
|
|
<div class="col-100 tablet-50 desktop-25">
|
|
<div class="row">
|
|
<a class="button button-large button-raised button-fill" href="javascript: ;" v-on:click="callAll('墙面插座','21on')">批量开</a>
|
|
<a class="button button-large button-raised button-fill" href="javascript: ;" v-on:click="callAll('墙面插座','22off')">批量关</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>
|
|
<a class="button button-large button-raised button-fill" href="javascript: ;" v-on:click="call(device.Id,'21on')" v-if="getData(device,'状态')==='关'">开</a>
|
|
<a class="button button-large button-raised button-fill" href="javascript: ;" v-on:click="call(device.Id,'22off')" v-else>关</a>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-100 tablet-50 desktop-25"></div>
|
|
<div class="col-100 tablet-50 desktop-25">
|
|
<div class="row">
|
|
<a class="button button-large button-raised button-fill" href="javascript: ;" v-on:click="callAll('一路插座','21on')">批量开</a>
|
|
<a class="button button-large button-raised button-fill" href="javascript: ;" v-on:click="callAll('一路插座','22off')">批量关</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>
|
|
<a class="button button-large button-raised button-fill" href="javascript: ;" v-on:click="call(device.Id,'21on')" v-if="getData(device,'状态')==='关'">开</a>
|
|
<a class="button button-large button-raised button-fill" href="javascript: ;" v-on:click="call(device.Id,'22off')" v-else>关</a>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-100 tablet-50 desktop-25"></div>
|
|
<div class="col-100 tablet-50 desktop-25">
|
|
<div class="row">
|
|
<a class="button button-large button-raised button-fill" href="javascript: ;" v-on:click="callAll('二路插座','21on')">批量开</a>
|
|
<a class="button button-large button-raised button-fill" href="javascript: ;" v-on:click="callAll('二路插座','22off')">批量关</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>
|
|
<a class="button button-large button-raised button-fill" href="javascript: ;" v-on:click="call(device.Id,'21open')">开</a>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-100 tablet-50 desktop-25"></div>
|
|
<div class="col-100 tablet-50 desktop-25">
|
|
<div class="row">
|
|
<a class="button button-large button-raised button-fill" href="javascript: ;" v-on:click="callAll('密码门锁','21open')">批量开</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>
|
|
<template v-for="data in _.orderBy(device.Data,['DisplayOrder','Name'])">
|
|
<template v-if="data.Key==='code[]'">
|
|
<div class="col" v-for="(value, key, index) in _.chain(JSON.parse(data.Value)).groupBy(o => o.text.split('-')[0]).value()">
|
|
<div>{{key}}</div>
|
|
<div class="card">
|
|
<a v-for="btn in value" class="button button-large button-raised button-fill" href="javascript: ;" v-on:click="call(device.Id,'send','code='+btn.value)">
|
|
{{btn.text.indexOf('-')>0?btn.text.split('-')[1]:btn.text}}
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</template>
|
|
</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>
|
|
<template v-for="data in _.orderBy(device.Data,['DisplayOrder','Name'])">
|
|
<template v-if="data.Key==='code[]'">
|
|
<div class="col" v-for="(value, key, index) in _.chain(JSON.parse(data.Value)).groupBy(o => o.text.split('-')[0]).value()">
|
|
<div>{{key}}</div>
|
|
<div class="card">
|
|
<a v-for="btn in value" class="button button-large button-raised button-fill" href="javascript: ;" v-on:click="call(device.Id,'send','code='+btn.value)">
|
|
{{btn.text.indexOf('-')>0?btn.text.split('-')[1]:btn.text}}
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</template>
|
|
</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>
|
|
<a class="button button-large button-raised button-fill" href="javascript: ;" v-on:click="call(device.Id,'20shot')">截图</a>
|
|
</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> </span>
|
|
<span class="badge color-blue" v-if="data.Unit">
|
|
{{data.Unit}}
|
|
</span>
|
|
<span> </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="isChart(data)">
|
|
<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" 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 item-input-outline" v-if="parameter.Name!='hidden'">
|
|
<div class="item-inner">
|
|
<div class="item-title item-floating-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('28stopturn')" v-on:mouseleave="call('28stopturn')" 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('28stopturn')" v-on:mouseleave="call('28stopturn')" v-on:mousedown="call('24left')"><img src="images/left.png" /></a></td>
|
|
<td></td>
|
|
<td><a href="javascript:;" v-on:mouseup="call('28stopturn')" v-on:mouseleave="call('28stopturn')" v-on:mousedown="call('25right')"><img src="images/right.png" /></a></td>
|
|
<td></td>
|
|
</tr>
|
|
<tr>
|
|
<td><a href="javascript:;" v-on:mouseup="call('28stopturn')" v-on:mouseleave="call('28stopturn')" v-on:mousedown="call('21zoomin')"><img src="images/zoomin.png" /></a></td>
|
|
<td></td>
|
|
<td><a href="javascript:;" v-on:mouseup="call('28stopturn')" v-on:mouseleave="call('28stopturn')" v-on:mousedown="call('27down')"><img src="images/down.png" /></a></td>
|
|
<td></td>
|
|
<td><a href="javascript:;" v-on:mouseup="call('28stopturn')" v-on:mouseleave="call('28stopturn')" 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> |