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 '0a379251fa'
${ noResults }
iot/projects/Demo/Demo/wwwroot/index.html

577 lines
36 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" main class="safe-areas">
<f7-page name="page-index" :page-content="false" @page:beforein="init">
<f7-navbar>
<f7-nav-title>{{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 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 v-for="node in Nodes" :title="node.Name" :badge="node.Count" :link="'/node/'+node.Number+'/name/'+node.Name"></f7-list-item>
</f7-list>
</f7-tab>
<f7-tab id="tab-user" class="page-content">
<f7-list>
<f7-list-item title="用户名" :after="UserName"></f7-list-item>
<f7-list-item title="昵称" :after="NickName"></f7-list-item>
<f7-list-item link="/login/" title="注销"></f7-list-item>
</f7-list>
</f7-tab>
</f7-tabs>
</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">
<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-raised button-fill color-lightblue submit">确定</button>
</div>
</div>
</li>
</ul>
</div>
</form>
</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-33 tablet-20 desktop-10" v-for="sence in _.orderBy(Node.Sences,['DisplayOrder','Name'])" v-on:click="callSence(sence.Id)">
<a href="javascript:;" class="button 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-33 tablet-20 desktop-10" v-for="device in getDevices('检测器','监测器')">
<div class="row">
<a class="button button-raised">{{device.Name||device.DisplayName}}</a>
</div>
<div class="row" v-if="device.Name==='温湿度检测器'">
<div class="col">{{getData(device,"温度")}}</div>
<div class="col">{{getData(device,"湿度")}}</div>
</div>
<div class="row" v-else-if="device.Name==='二氧化碳监测器'">
<div class="col">{{getData(device,"二氧化碳")}}</div>
</div>
<div class="row" v-else-if="device.Name==='光强检测器'">
<div class="col">{{getData(device,"光照强度")}}</div>
</div>
<div class="row" v-else-if="device.Name==='粉尘检测器'">
<div class="col">{{getData(device,"粉尘")}}</div>
</div>
<div class="row" v-else>
<div class="col">未定义</div>
</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-33 tablet-20 desktop-10" v-for="device in getDevices('感应器')">
<div class="row">
<a class="button button-raised">{{device.Name||device.DisplayName}}</a>
</div>
<div class="row">
<div class="col">{{getData(device,"状态")}}</div>
</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-33 tablet-20 desktop-10" v-for="device in getDevices('主机')">
<div class="row">
<a class="button button-raised">{{device.Name||device.DisplayName}}</a>
</div>
<div class="row">
<div class="col">{{getData(device,"计算机名")}}</div>
</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-33 tablet-20 desktop-10" v-for="device in getDevices('AP')">
<div class="row">
<a class="button button-raised">{{device.Name||device.DisplayName}}</a>
</div>
<div class="row">
<div class="col">{{getData(device,"连接数")}}</div>
</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-33 tablet-20 desktop-10" v-for="device in getDevices('一路可调窗帘')">
<div class="row">
<a class="button button-raised">{{device.Name||device.DisplayName}}</a>
</div>
<div class="row">
<div class="col">{{getData(device,"状态")}}</div>
</div>
<div class="row">
<a class="button button-raised button-fill" href="javascript: ;" v-on:click="call(device.Id,'21on')">开</a>
<a class="button button-raised button-fill" href="javascript: ;" v-on:click="call(device.Id,'23stop')">停</a>
<a class="button button-raised button-fill" href="javascript: ;" v-on:click="call(device.Id,'22off')">关</a>
</div>
</div>
</div>
<div class="row">
<div class="col-33 tablet-20 desktop-10"></div>
<div class="col-33 tablet-20 desktop-10"></div>
<div class="col-33 tablet-20 desktop-10">
<div class="row">
<a class="button button-raised button-fill" href="javascript: ;" v-on:click="callAll('一路可调窗帘','21on')">开</a>
<a class="button button-raised button-fill" href="javascript: ;" v-on:click="callAll('一路可调窗帘','23stop')">停</a>
<a class="button 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-33 tablet-20 desktop-10" v-for="device in getDevices('计量开关')">
<div class="row">
<a class="button button-raised">{{device.Name||device.DisplayName}}</a>
</div>
<template v-if="device.Name==='计量开关'">
<div class="row">
<a class="button button-raised button-fill" href="javascript: ;" v-on:click="call(device.Id,'21on')" v-if="getData(device,'状态')==='关'">开</a>
<a class="button button-raised button-fill" href="javascript: ;" v-on:click="call(device.Id,'22off')" v-else>关</a>
</div>
</template>
</div>
</div>
<div class="row">
<div class="col-33 tablet-20 desktop-10"></div>
<div class="col-33 tablet-20 desktop-10"></div>
<div class="col-33 tablet-20 desktop-10">
<div class="row">
<a class="button button-raised button-fill" href="javascript: ;" v-on:click="callAll('计量开关','21on')">全开</a>
<a class="button 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-33 tablet-20 desktop-10" v-for="device in getDevices('一路照明开关')">
<div class="row">
<a class="button button-raised">{{device.Name||device.DisplayName}}</a>
</div>
<template v-if="device.Name==='一路照明开关'">
<div class="row">
<a class="button button-raised button-fill" href="javascript: ;" v-on:click="call(device.Id,'21on')" v-if="getData(device,'状态')==='关'">开</a>
<a class="button button-raised button-fill" href="javascript: ;" v-on:click="call(device.Id,'22off')" v-else>关</a>
</div>
</template>
</div>
</div>
<div class="row">
<div class="col-33 tablet-20 desktop-10"></div>
<div class="col-33 tablet-20 desktop-10"></div>
<div class="col-33 tablet-20 desktop-10">
<div class="row">
<a class="button button-raised button-fill" href="javascript: ;" v-on:click="callAll('一路照明开关','21on')">全开</a>
<a class="button 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-33 tablet-20 desktop-10" v-for="device in getDevices('二路灯开关')">
<div class="row">
<a class="button button-raised">{{device.Name||device.DisplayName}}</a>
</div>
<template v-else-if="device.Name==='二路灯开关'">
<div class="row">
<a class="button button-raised button-fill" href="javascript: ;" v-on:click="call(device.Id,'21on')">全开</a>
<a class="button button-raised button-fill" href="javascript: ;" v-on:click="call(device.Id,'22off')">全关</a>
</div>
<div class="row">
<a class="button button-raised button-fill" href="javascript: ;" v-on:click="call(device.Id,'23l1on')" v-if="getData(device,'L1状态')==='关'">开</a>
<a class="button button-raised button-fill" href="javascript: ;" v-on:click="call(device.Id,'24l1off')" v-else>关</a>
</div>
<div class="row">
<a class="button button-raised button-fill" href="javascript: ;" v-on:click="call(device.Id,'25l2on')" v-if="getData(device,'L2状态')==='关'">开</a>
<a class="button button-raised button-fill" href="javascript: ;" v-on:click="call(device.Id,'26l2off')" v-else>关</a>
</div>
</template>
</div>
</div>
<div class="row">
<div class="col-33 tablet-20 desktop-10"></div>
<div class="col-33 tablet-20 desktop-10"></div>
<div class="col-33 tablet-20 desktop-10">
<div class="row">
<a class="button button-raised button-fill" href="javascript: ;" v-on:click="callAll('二路灯开关','21on')">全开</a>
<a class="button 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-33 tablet-20 desktop-10" v-for="device in getDevices('三路照明开关')">
<div class="row">
<a class="button button-raised">{{device.Name||device.DisplayName}}</a>
</div>
<template v-if="device.Name==='三路照明开关'">
<div class="row">
<a class="button button-raised button-fill" href="javascript: ;" v-on:click="call(device.Id,'21on')">全开</a>
<a class="button button-raised button-fill" href="javascript: ;" v-on:click="call(device.Id,'22off')">全关</a>
</div>
<div class="row">
<a class="button button-raised button-fill" href="javascript: ;" v-on:click="call(device.Id,'23on')" v-if="getData(device,'状态4')==='关'">开</a>
<a class="button button-raised button-fill" href="javascript: ;" v-on:click="call(device.Id,'24off')" v-else>关</a>
<a class="button button-raised button-fill" href="javascript: ;" v-on:click="call(device.Id,'25on')" v-if="getData(device,'状态5')==='关'">开</a>
<a class="button button-raised button-fill" href="javascript: ;" v-on:click="call(device.Id,'26off')" v-else>关</a>
<a class="button button-raised button-fill" href="javascript: ;" v-on:click="call(device.Id,'27on')" v-if="getData(device,'状态6')==='关'">开</a>
<a class="button button-raised button-fill" href="javascript: ;" v-on:click="call(device.Id,'28off')" v-else>关</a>
</div>
</template>
</div>
</div>
<div class="row">
<div class="col-33 tablet-20 desktop-10"></div>
<div class="col-33 tablet-20 desktop-10"></div>
<div class="col-33 tablet-20 desktop-10">
<div class="row">
<a class="button button-raised button-fill" href="javascript: ;" v-on:click="callAll('三路照明开关','21on')">全开</a>
<a class="button 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-33 tablet-20 desktop-10" v-for="device in getDevices('墙面插座')">
<div class="row">
<a class="button button-raised">{{device.Name||device.DisplayName}}</a>
</div>
<template v-if="device.Name==='墙面插座'">
<div class="row">
<a class="button button-raised button-fill" href="javascript: ;" v-on:click="call(device.Id,'21on')" v-if="getData(device,'状态')==='关'">开</a>
<a class="button button-raised button-fill" href="javascript: ;" v-on:click="call(device.Id,'22off')" v-else>关</a>
</div>
</template>
</div>
</div>
<div class="row">
<div class="col-33 tablet-20 desktop-10"></div>
<div class="col-33 tablet-20 desktop-10"></div>
<div class="col-33 tablet-20 desktop-10">
<div class="row">
<a class="button button-raised button-fill" href="javascript: ;" v-on:click="callAll('墙面插座','21on')">全开</a>
<a class="button 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-33 tablet-20 desktop-10" v-for="device in getDevices('一路插座')">
<div class="row">
<a class="button button-raised">{{device.Name||device.DisplayName}}</a>
</div>
<template v-if="device.Name==='一路插座'">
<div class="row">
<a class="button button-raised button-fill" href="javascript: ;" v-on:click="call(device.Id,'21on')" v-if="getData(device,'状态')==='关'">开</a>
<a class="button button-raised button-fill" href="javascript: ;" v-on:click="call(device.Id,'22off')" v-else>关</a>
</div>
</template>
</div>
</div>
<div class="row">
<div class="col-33 tablet-20 desktop-10"></div>
<div class="col-33 tablet-20 desktop-10"></div>
<div class="col-33 tablet-20 desktop-10">
<div class="row">
<a class="button button-raised button-fill" href="javascript: ;" v-on:click="callAll('一路插座','21on')">全开</a>
<a class="button 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-33 tablet-20 desktop-10" v-for="device in getDevices('二路插座')">
<div class="row">
<a class="button button-raised">{{device.Name||device.DisplayName}}</a>
</div>
<template v-if="device.Name==='二路插座'">
<div class="row">
<a class="button button-raised button-fill" href="javascript: ;" v-on:click="call(device.Id,'21on')" v-if="getData(device,'状态')==='关'">开</a>
<a class="button button-raised button-fill" href="javascript: ;" v-on:click="call(device.Id,'22off')" v-else>关</a>
</div>
</template>
</div>
</div>
<div class="row">
<div class="col-33 tablet-20 desktop-10"></div>
<div class="col-33 tablet-20 desktop-10"></div>
<div class="col-33 tablet-20 desktop-10">
<div class="row">
<a class="button button-raised button-fill" href="javascript: ;" v-on:click="callAll('二路插座','21on')">全开</a>
<a class="button 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-33 tablet-20 desktop-10" v-for="device in getDevices('密码门锁')">
<div class="row">
<a class="button button-raised">{{device.Name||device.DisplayName}}</a>
</div>
<template v-if="device.Name==='密码门锁'">
<div class="row">
<a class="button button-raised button-fill" href="javascript: ;" v-on:click="call(device.Id,'21open')">开</a>
</div>
</template>
</div>
</div>
<div class="row">
<div class="col-33 tablet-20 desktop-10"></div>
<div class="col-33 tablet-20 desktop-10"></div>
<div class="col-33 tablet-20 desktop-10">
<div class="row">
<a class="button 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" v-for="device in getDevices('红外转发器')">
<div class="row">
<a class="button button-raised">{{device.Name||device.DisplayName}}</a>
</div>
<div class="row">
<template v-for="data in _.orderBy(device.Data,['DisplayOrder','Name'])">
<template v-if="data.Key==='code[]'">
<a v-for="key in JSON.parse(data.Value)" class="button button-raised button-fill" href="javascript: ;" v-on:click="call(device.Id,'22call','code='+key.value)">{{key.text}}</a>
</template>
</template>
</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" v-for="device in getDevices('串口控制器')">
<div class="row">
<a class="button button-raised">{{device.Name||device.DisplayName}}</a>
</div>
<div class="row">
<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="row">
<a v-for="btn in value" class="button 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>
</div>
</template>
<template v-if="getDevices('摄像头').length">
<div class="block-title">摄像头</div>
<div class="block block-strong">
<div class="row">
<div class="col" v-for="device in getDevices('摄像头')">
<div class="row">
<a class="button button-raised">{{device.Name||device.DisplayName}}</a>
</div>
<div class="row">
<a class="button button-raised button-fill" href="javascript: ;" v-on:click="call(device.Id,'20shot')">截图</a>
</div>
</div>
</div>
</div>
</template>
</f7-page>
</template>
<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="js/app.js"></script>
</body>
</html>
Reference in new issue View Git Blame Copy Permalink