替换为framework7-vue

TangShanKaiPing
wanggang 6 years ago
parent 2b866e674a
commit 010fc88e05

@ -20,8 +20,9 @@
<EmbeddedResource Include="wwwroot\**\*" Exclude="**\*.css" />
</ItemGroup><ItemGroup>
<None Remove="wwwroot\images\icon_tabbar.png" />
<None Remove="wwwroot\index-weui.html" />
<None Remove="wwwroot\index - 复制.html" />
<None Remove="wwwroot\lib\URI.js\URI.min.js" />
<None Remove="wwwroot\lib\weui\weui.min.js" />
<None Remove="wwwroot\weui.html" />
</ItemGroup>
</Project>

@ -6,520 +6,6 @@
src: local('Material Icons'), local('MaterialIcons-Regular'), url(../fonts/MaterialIcons-Regular.woff2) format('woff2'), url(../fonts/MaterialIcons-Regular.woff) format('woff'), url(../fonts/MaterialIcons-Regular.ttf) format('truetype');
}
.material-icons {
font-family: 'Material Icons';
font-weight: normal;
font-style: normal;
font-size: 24px; /* Preferred icon size */
display: inline-block;
line-height: 1;
text-transform: none;
letter-spacing: normal;
word-wrap: normal;
white-space: nowrap;
direction: ltr;
/* Support for all WebKit browsers. */
-webkit-font-smoothing: antialiased;
/* Support for Safari and Chrome. */
text-rendering: optimizeLegibility;
/* Support for Firefox. */
-moz-osx-font-smoothing: grayscale;
/* Support for IE. */
font-feature-settings: 'liga';
}
@font-face {
font-family: 'Framework7 Icons';
font-style: normal;
font-weight: 400;
src: url("../fonts/Framework7Icons-Regular.eot");
src: url("../fonts/Framework7Icons-Regular.woff2") format("woff2"), url("../fonts/Framework7Icons-Regular.woff") format("woff"), url("../fonts/Framework7Icons-Regular.ttf") format("truetype");
}
.f7-icons {
font-family: 'Framework7 Icons';
font-weight: normal;
font-style: normal;
font-size: 25px;
line-height: 1;
letter-spacing: normal;
text-transform: none;
display: inline-block;
white-space: nowrap;
word-wrap: normal;
direction: ltr;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
-moz-osx-font-smoothing: grayscale;
-webkit-font-feature-settings: "liga";
-moz-font-feature-settings: "liga=1";
-moz-font-feature-settings: "liga";
font-feature-settings: "liga";
text-align: center;
}
.demo-list-icon, .icon-f7 {
background: #ccc;
display: block;
position: relative;
}
.theme-dark .demo-list-icon {
background-color: #555;
}
.icon-f7 {
background: url(../img/f7-icon.png) no-repeat center;
background-size: cover;
}
.icon-vi {
background: url(../img/vi-icon.png) no-repeat center;
background-size: cover;
}
.ios .demo-list-icon, .ios .icon-f7, .ios .icon-vi {
width: 29px;
height: 29px;
border-radius: 6px;
box-sizing: border-box;
}
.md .demo-list-icon, .md .icon-f7, .md .icon-vi {
width: 24px;
height: 24px;
border-radius: 4px;
}
/* Lazy Demo */
img.demo-lazy {
display: block;
width: 100%;
height: auto;
}
div.demo-lazy {
background: #aaa;
-webkit-background-size: cover;
background-size: cover;
height: 300px;
height: 60vw;
}
/* Tab Bar */
.ios .tabbar .tab-link:not(.tab-link-active) .icon-fill {
display: none;
}
.ios .tabbar .tab-link.tab-link-active .icon:not(.icon-fill) {
display: none;
}
/* FAB Morph */
.demo-fab-sheet {
position: absolute;
left: 16px;
bottom: 80px;
width: 140px;
background: #fff;
box-shadow: 0px 3px 30px rgba(0,0,0,0.4);
border-radius: 5px;
z-index: 1600;
margin: 0 !important;
}
.ios .demo-fab-sheet {
bottom: 15px;
}
.md .demo-fab-sheet {
bottom: 16px;
}
.demo-fab-fullscreen-sheet {
position: absolute;
left: 10px;
right: 10px;
top: 64px;
bottom: 0;
background: #fff;
z-index: 1600;
border-radius: 5px 5px 0 0;
box-shadow: 0px 3px 30px rgba(0,0,0,0.4);
overflow: hidden;
}
@media (min-width: 768px) {
.demo-fab-fullscreen-sheet {
left: 20%;
width: 60%;
right: auto;
height: 80%;
top: auto;
}
}
.demo-fab-fullscreen-sheet .page {
background: #fff;
}
/* Demo Messagebar */
.ios a.demo-send-message-link i {
font-size: 26px;
}
.ios .messagebar:not(.messagebar-with-value):not(.messagebar-attachments-visible) a.demo-send-message-link {
pointer-events: none;
color: #8e8e8e;
}
.md .messagebar:not(.messagebar-with-value):not(.messagebar-attachments-visible) a.demo-send-message-link {
pointer-events: none;
opacity: 0.5;
}
/* Grid demo */
.grid-demo div[class*="col"] {
background: #fff;
text-align: center;
color: #000;
border: 1px solid #ddd;
padding: 5px;
margin-bottom: 15px;
font-size: 12px;
}
.theme-dark .grid-demo div[class*="col"] {
background-color: #000;
color: #fff;
border-color: #444;
}
/* Cards Demo */
.demo-card-header-pic .card-header {
height: 40vw;
background-size: cover;
background-position: center;
color: #fff;
}
.demo-card-header-pic .card-content-padding .date {
color: #8e8e93;
}
.demo-facebook-card .card-header {
display: block;
padding: 10px;
}
.demo-facebook-card .demo-facebook-avatar {
float: left;
}
.demo-facebook-card .demo-facebook-name {
margin-left: 44px;
font-size: 14px;
font-weight: 500;
}
.demo-facebook-card .demo-facebook-date {
margin-left: 44px;
font-size: 13px;
color: #8e8e93;
}
.demo-facebook-card .card-footer {
background: #fafafa;
}
.theme-dark .demo-facebook-card .card-footer {
background-color: transparent;
}
.demo-facebook-card .card-footer a {
color: #81848b;
font-weight: 500;
}
.demo-facebook-card .card-content img {
display: block;
}
.demo-facebook-card .card-content-padding {
padding: 15px 10px;
}
.demo-facebook-card .card-content-padding .likes {
color: #8e8e93;
}
/* Panels Demo */
.ios .panel-right.panel-active ~ .view-main:after,
.ios .panel-right.panel-closing ~ .view-main:after {
content: '';
height: 100%;
width: 1px;
position: absolute;
right: 0;
top: 0;
background: #ddd;
z-index: 1000;
}
.ios .theme-dark .panel-right.panel-active ~ .view-main:after,
.ios .theme-dark .panel-right.panel-closing ~ .view-main:after {
background: #282828;
}
.ios .panel-left:after {
content: '';
height: 100%;
width: 1px;
position: absolute;
right: 0;
top: 0;
background: #ddd;
z-index: 1000;
}
.ios .theme-dark .panel-left:after {
background: #282828;
}
/* Swipers Demo */
.demo-swiper {
width: 100%;
height: 100%;
}
.demo-swiper .swiper-slide,
.demo-swiper-multiple .swiper-slide {
font-size: 25px;
font-weight: 300;
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
background: #fff;
color: #000;
}
.demo-swiper-multiple .swiper-slide {
box-sizing: border-box;
border: 1px solid #ccc;
background: #fff;
}
.demo-swiper-multiple {
margin: 0px 0 35px;
font-size: 18px;
height: 120px;
}
.demo-swiper-multiple.demo-swiper-multiple-auto .swiper-slide {
width: 85%;
}
.demo-swiper-multiple.demo-swiper-multiple-auto .swiper-slide:nth-child(2n) {
width: 70%;
}
.demo-swiper-multiple.demo-swiper-multiple-auto .swiper-slide:nth-child(3n) {
width: 30%;
}
.demo-swiper-custom {
height: 100%;
}
.demo-swiper-custom .swiper-container {
background: #000;
height: 100%;
}
.demo-swiper-custom .swiper-slide {
background-size: cover;
background-position: center;
}
.demo-swiper-custom .swiper-pagination .swiper-pagination-bullet {
cursor: pointer;
width: 10px;
height: 10px;
background: rgba(255, 255, 255, 0);
opacity: 1;
border-radius: 0;
transition: 200ms;
position: relative;
transform: scale(0.9);
box-sizing: border-box;
border: 1px solid rgba(255, 255, 255, 0.8);
}
.demo-swiper-custom .swiper-pagination .swiper-pagination-bullet-active {
z-index: 1;
border: 1px solid #007aff;
transform: scale(1.4);
}
.demo-swiper-cube {
width: 80%;
height: 70%;
top: 15%;
}
.demo-swiper-coverflow {
height: 60%;
top: 20%;
}
.demo-swiper-coverflow .swiper-slide {
width: 65%;
}
.demo-swiper-cube .swiper-slide,
.demo-swiper-coverflow .swiper-slide {
background-size: cover;
color: #fff;
-webkit-backface-visibility: hidden;
}
.demo-swiper-fade .swiper-slide {
background-size: cover;
background-position: center;
}
.demo-swiper-gallery-top {
height: 70%;
}
.demo-swiper-gallery-thumbs {
margin-top: 10px;
height: 20%;
height: -webkit-calc(30% - 20px);
height: -moz-calc(30% - 20px);
height: -ms-calc(30% - 20px);
height: calc(30% - 20px);
}
.demo-swiper-gallery-thumbs .swiper-slide {
width: 25%;
}
.demo-swiper-gallery-thumbs .swiper-slide-pic {
height: 100%;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
opacity: 0.35;
transition: 300ms;
}
.demo-swiper-gallery-thumbs .swiper-slide-active .swiper-slide-pic {
opacity: 1;
}
.demo-swiper-gallery-top .swiper-slide,
.demo-swiper-gallery-thumbs .swiper-slide-pic {
background-size: cover;
background-position: center;
}
.demo-swiper-parallax {
height: 100%;
}
.demo-swiper-parallax .swiper-parallax-bg {
position: absolute;
left: 0;
top: 0;
width: 130%;
height: 100%;
-webkit-background-size: cover;
background-size: cover;
background-position: center;
}
.demo-swiper-parallax .swiper-slide {
-webkit-box-sizing: border-box;
box-sizing: border-box;
padding: 40px 60px;
color: #fff;
}
.demo-swiper-parallax .swiper-slide-title {
font-size: 41px;
font-weight: 300;
}
.demo-swiper-parallax .swiper-slide-subtitle {
font-size: 21px;
}
.demo-swiper-parallax .swiper-slide-text {
font-size: 14px;
max-width: 400px;
line-height: 1.3;
}
.demo-swiper-lazy {
height: 100%;
}
.demo-swiper-lazy .swiper-slide {
position: relative;
}
.demo-swiper-lazy .swiper-slide img {
width: auto;
height: auto;
max-width: 100%;
max-height: 100%;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
/* Icons Demo */
code {
background: #f3f3f3;
padding: 5px;
font-size: 12px;
}
.theme-dark code {
background: #000;
}
.demo-icon {
text-align: center;
margin-top: 15px;
margin-bottom: 15px;
color: #333;
}
.theme-dark .demo-icon {
color: #fff;
}
.demo-icon .demo-icon-name {
margin-top: 5px;
font-size: 11px;
color: #666;
}
.theme-dark .demo-icon .demo-icon-name {
color: #aaa;
}
/*customer css*/
.c-home-menu-list col {
text-align: center;
}
@ -538,5 +24,6 @@ code {
color:red;
display:inline-block;
height:20px;
padding-right:1px;
font-size:small;
}

@ -1,31 +1,61 @@
/* Material Icons Font (for MD theme) */
@font-face {
font-family: 'Framework7 Icons';
font-style: normal;
font-weight: 400;
src: url("../fonts/Framework7Icons-Regular.eot");
src: url("../fonts/Framework7Icons-Regular.woff2") format("woff2"),
url("../fonts/Framework7Icons-Regular.woff") format("woff"),
url("../fonts/Framework7Icons-Regular.ttf") format("truetype");
font-family: 'Material Icons';
font-style: normal;
font-weight: 400;
src: url(../fonts/MaterialIcons-Regular.eot); /* For IE6-8 */
src: local('Material Icons'), local('MaterialIcons-Regular'), url(../fonts/MaterialIcons-Regular.woff2) format('woff2'), url(../fonts/MaterialIcons-Regular.woff) format('woff'), url(../fonts/MaterialIcons-Regular.ttf) format('truetype');
}
.f7-icons, .framework7-icons {
font-family: 'Framework7 Icons';
font-weight: normal;
font-style: normal;
font-size: 28px;
line-height: 1;
letter-spacing: normal;
text-transform: none;
display: inline-block;
white-space: nowrap;
word-wrap: normal;
direction: ltr;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
-moz-osx-font-smoothing: grayscale;
-webkit-font-feature-settings: "liga";
-moz-font-feature-settings: "liga=1";
-moz-font-feature-settings: "liga";
font-feature-settings: "liga";
text-align: center;
}
.material-icons {
font-family: 'Material Icons';
font-weight: normal;
font-style: normal;
font-size: 24px; /* Preferred icon size */
display: inline-block;
line-height: 1;
text-transform: none;
letter-spacing: normal;
word-wrap: normal;
white-space: nowrap;
direction: ltr;
/* Support for all WebKit browsers. */
-webkit-font-smoothing: antialiased;
/* Support for Safari and Chrome. */
text-rendering: optimizeLegibility;
/* Support for Firefox. */
-moz-osx-font-smoothing: grayscale;
/* Support for IE. */
font-feature-settings: 'liga';
}
/* Framework7 Icons Font (for iOS theme) */
@font-face {
font-family: 'Framework7 Icons';
font-style: normal;
font-weight: 400;
src: url("../fonts/Framework7Icons-Regular.eot");
src: url("../fonts/Framework7Icons-Regular.woff2") format("woff2"), url("../fonts/Framework7Icons-Regular.woff") format("woff"), url("../fonts/Framework7Icons-Regular.ttf") format("truetype");
}
.f7-icons {
font-family: 'Framework7 Icons';
font-weight: normal;
font-style: normal;
font-size: 25px;
line-height: 1;
letter-spacing: normal;
text-transform: none;
display: inline-block;
white-space: nowrap;
word-wrap: normal;
direction: ltr;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
-moz-osx-font-smoothing: grayscale;
-webkit-font-feature-settings: "liga";
-moz-font-feature-settings: "liga=1";
-moz-font-feature-settings: "liga";
font-feature-settings: "liga";
text-align: center;
}

@ -0,0 +1,508 @@
<!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>
<f7-view id="app">
<f7-app :params="f7params">
<f7-statusbar></f7-statusbar>
</f7-app>
<f7-view id="main-view" main class="safe-areas">
<f7-page>
<f7-navbar>
<f7-nav-title>科学技术学院</f7-nav-title>
</f7-navbar>
<div class="toolbar tabbar tabbar-labels toolbar-bottom">
<div class="toolbar-inner">
<a href="#tab-1" class="tab-link">
<i class="f7-icons">chat</i>
<span class="tabbar-label">消息</span>
</a>
<a href="#tab-2" class="tab-link tab-link-active">
<i class="f7-icons">data</i>
<span class="tabbar-label">智慧教室</span>
</a>
<a href="#tab-3" class="tab-link">
<i class="f7-icons">person</i>
<span class="tabbar-label">我的</span>
</a>
</div>
</div>
<div class="tabs page page-current">
<div id="tab-1" class="page-content tab">
<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>
</div>
<div id="tab-2" class="page-content tab tab-active">
<div class="list links-list">
<ul id="nodeList">
<li v-for="node in model">
<a class="item-content popup-open node" href="#" data-popup=".node-popup" :data-node-Id="node.Id">
<div class="item-media"><i class="f7-icons">link</i></div>
<div class="item-inner">
<div class="item-title">{{node.Name}}</div>
<div class="item-after"><span class="badge color-blue">{{node.Devices.length}}</span></div>
</div>
</a>
</li>
</ul>
</div>
</div>
<div id="tab-3" class="page-content tab">
<div class="list links-list">
<ul>
<li>
<div class="item-content">
<div class="item-inner">
<div class="item-title">用户名</div>
<div class="item-after">{{UserName}}</div>
</div>
</div>
</li>
<li>
<div class="item-content">
<div class="item-inner">
<div class="item-title">昵称</div>
<div class="item-after">{{NickName}}</div>
</div>
</div>
</li>
<li>
<a href="login.html?action=logout" class="external">退出</a>
</li>
<li>
<a href="#test">test</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</f7-view>
<div class="popup node-popup popup-tablet-fullscreen">
<div class="page">
<div class="navbar">
<div class="navbar-inner">
<div class="title">
<template v-if="node">
{{node.Name}}
</template>
</div>
<div class="right"><a href="#" class="link" onclick="app.popup.get('.node-popup').close();"><i class="f7-icons">close</i></a></div>
</div>
</div>
<div class="page-content">
<div class="block-title">场景</div>
<div class="block" v-if="node">
<div class="row">
<div class="col-33 tablet-15 demo-icon" v-for="sence in _.orderBy(node.Sences,['DisplayOrder','Name'])" v-on:click="sendSence(sence.Id)">
<a href="javascript:;" class="col button button-large button-raised">{{sence.Name}}</a>
</div>
</div>
</div>
<div class="block-title">设备</div>
<div class="list links-list" v-if="node">
<ul>
<li v-for="d in _.orderBy(node.Devices,['DisplayOrder','Name'])">
<a class="item-content popup-open device" href="#" data-popup=".device-popup" :data-device-id="d.Id">
<div class="item-media"><i class="f7-icons">link</i></div>
<div class="item-inner">
<div class="item-title">{{d.DisplayName||d.Name}}</div>
<div class="item-after">
<template v-if="d.Name==='温湿度检测器'">
<span class="badge color-blue">{{getDeviceDataValue(d,"温度")}}</span>
<span class="badge color-blue">{{getDeviceDataValue(d,"湿度")}}</span>
</template>
<template v-else-if="d.Name==='二氧化碳监测器'">
<span class="badge color-blue">{{getDeviceDataValue(d,"二氧化碳")}}</span>
</template>
<template v-else-if="d.Name==='光强检测器'">
<span class="badge color-blue">{{getDeviceDataValue(d,"光照强度")}}</span>
</template>
<template v-else-if="d.Name==='粉尘检测器'">
<span class="badge color-blue">{{getDeviceDataValue(d,"粉尘")}}</span>
</template>
<template v-else-if="d.Name==='烟雾感应器'">
<span class="badge color-blue">{{getDeviceDataValue(d,"状态")}}</span>
</template>
<template v-else-if="d.Name==='红外感应器'">
<span class="badge color-blue">{{getDeviceDataValue(d,"状态")}}</span>
</template>
<template v-else-if="d.Name==='主机'">
<span class="badge color-blue">{{getDeviceDataValue(d,"接收")}}</span>
</template>
<template v-else-if="d.Name==='AP'">
<span class="badge color-blue">{{getDeviceDataValue(d,"连接数")}}</span>
</template>
<template v-else-if="d.Name==='一路可调窗帘'">
<span class="badge color-blue">{{getDeviceDataValue(d,"状态")}}</span>
</template>
<template v-else-if="d.Name==='计量开关'">
<span class="badge color-blue">{{getDeviceDataValue(d,"状态")}}</span>
</template>
<template v-else-if="d.Name==='一路照明开关'">
<span class="badge color-blue">{{getDeviceDataValue(d,"状态")}}</span>
</template>
<template v-else-if="d.Name==='二路灯开关'">
<span class="badge color-blue">{{getDeviceDataValue(d,"L1状态")}}</span>
<span class="badge color-blue">{{getDeviceDataValue(d,"L2状态")}}</span>
</template>
<template v-else-if="d.Name==='三路照明开关'">
<span class="badge color-blue">{{getDeviceDataValue(d,"状态4")}}</span>
<span class="badge color-blue">{{getDeviceDataValue(d,"状态5")}}</span>
<span class="badge color-blue">{{getDeviceDataValue(d,"状态6")}}</span>
</template>
<template v-else-if="d.Name==='墙面插座'">
<span class="badge color-blue">{{getDeviceDataValue(d,"状态")}}</span>
</template>
<template v-else-if="d.Name==='一路插座'">
<span class="badge color-blue">{{getDeviceDataValue(d,"状态")}}</span>
</template>
<template v-else-if="d.Name==='二路插座'">
<span class="badge color-blue">{{getDeviceDataValue(d,"状态")}}</span>
</template>
<template v-else-if="d.Name==='密码门锁'">
<span class="badge color-blue">{{getDeviceDataValue(d,"状态")}}</span>
</template>
<template v-else-if="d.Name==='红外转发器'">
</template>
<template v-else-if="d.Name==='串口控制器'">
</template>
<template v-else-if="d.Name==='摄像头'">
</template>
<template v-else>
<template v-for="p in d.Data">
<span v-if="p.Name!=='hidden'" class="badge color-blue">
{{p.Name}}:{{p.Value}}{{p.Unit}}
</span>
</template>
</template>
</div>
</div>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="popup device-popup popup-tablet-fullscreen">
<div class="page">
<div class="navbar">
<div class="navbar-inner">
<div class="title">
<template v-if="device">
{{device.Name}}
</template>
</div>
<div class="right"><a href="#" class="link" onclick="app.popup.get('.device-popup').close();"><i class="f7-icons">close</i></a></div>
</div>
</div>
<div class="page-content">
<div class="block-title">属性</div>
<div class="list" v-if="device">
<ul v-if="device.Data.length">
<template v-for="p in device.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>
<div class="block-title">操作</div>
<div class="list links-list" v-if="device">
<ul>
<li v-for="a in _.orderBy(device.Apis,['DisplayOrder','Name'])">
<a class="item-content" href="#">
<div class="item-media"><i class="f7-icons">link</i></div>
<div class="item-inner">
<div class="item-title">{{a.Name}}</div>
</div>
</a>
</li>
</ul>
</div>
</div>
</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/framework7/js/framework7.bundle.min.js"></script>
<script src="lib/vue/vue.min.js"></script>
<script src="lib/framework7-vue/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>
<!--<script>
function getJsonExt(url) {
console.log('send:' + url);
app.dialog.progress();
$.getJSON(url, function (result) {
console.log(result);
app.dialog.close();
if (result.code === 0) {
if (result.type === 0) {
if (result.format === 1) {
console.log('format/1/base64 jpeg image');
$('#callback .page-content .block').html('<img class="shot" src="' + result.data + '">');
}
else {
console.log('format/0/json object');
$('#callback .page-content .block').html(result.data);
}
app.popup.open('#callback');
}
}
else {
app.dialog.alert(result.message, "消息", function () {
setTimeout(function () { app.dialog.close(); }, 3000);
});
}
}).fail(function () {
console.log('error');
app.dialog.close();
});;
}
</script>
<script>
var baseUrl = localStorage.getItem('iotServer');
var wsUrl = baseUrl + "/hub?group=nodes";
var ajaxUrl = baseUrl + "/Home/GetNodes";
var $$ = Dom7;
var username = localStorage.getItem("username");
var server = localStorage.getItem("server");
var iotPageIndex = 1;
function init() {
Framework7.request.json(ajaxUrl, null, function (response) {
vm.model = response;
}, null, 'json');
}
</script>
<script>
const connection = new signalR.HubConnectionBuilder()
.withUrl(wsUrl)
.build();
function connect() {
if (connection && connection.connection.connectionState === 1) {
console.log('has connected');
}
else {
console.log('start connect to server:' + Date());
connection.start().then(function () {
console.log('signalR>start');
}).catch(function (err) {
console.error(err.toString());
setTimeout(connect, 10 * 1000);
});
}
}
connection.on("UpdateNode", (message) => {
var node = JSON.parse(message);
var oldNode = _.chain(vm.model).filter(o => o.Number === node.Number).first().value();
oldNode.Name = node.Name;
console.log('update:' + node.Name);
});
connection.on("UpdateDevice", (message) => {
var device = JSON.parse(message);
var update = false;
var node = _.chain(vm.model).filter(o => o.Number === device.Node.Number).first().value();
for (var i = 0; i < node.Devices.length; i++) {
if (node.Devices[i].Number == device.Number) {
update = true;
break;
}
}
if (update) {
node.Devices.splice(i, 1, device);
}
else {
node.Devices.push(device);
}
console.log('update:' + device.DisplayName);
vm.message = device;
});
connection.on("DeleteDevice", (message) => {
var number = message;
for (var i = 0; i < vm.model.length; i++) {
var node = vm.model[i];
for (var j = 0; j < node.Devices.length; j++) {
if (node.Devices[j].Number == number) {
node.Devices.splice(j, 1);
break;
}
}
}
console.log('delete:' + number);
});
connection.onclose(function () {
setTimeout(connect, 10 * 1000);
});
</script>
<script>
var app;
var vm = new Vue({
el: '#app',
data: {
model: [],
message: null,
node: null,
device: null,
UserName: localStorage.getItem('username'),
NickName: localStorage.getItem('nickName')
},
mounted: function () {
console.log('vue>mounted');
var os = new MobileDetect(navigator.userAgent).os();
var theme = os == "AndroidOS" ? "md" : "ios";
if (document.location.search.indexOf('theme=') >= 0) {
theme = document.location.search.split('theme=')[1].split('&')[0];
}
app = new Framework7({
root: '#app',
theme: theme,
routes: [
{
path: '(.*)',
async: function (routeTo, routeFrom, resolve, reject) {
resolve({ url: routeTo.url });
}
}
],
on: {
pageInit: function (page) {
console.log('f7>page init');
}
}
});
var mainView = app.views.create('.view-main', {
stackPages: true
});
init();
connect();
},
methods: {
sendSence: function (id) {
var url = baseUrl + '/Command/Sence/?node=' + this.model.Number + '&id=' + id;
getJsonExt(url);
},
getDeviceDataValue: function (device, dataName) {
if (device != null) {
var data = _.first(_.filter(device.Data, function (o) { return o.Name === dataName }));
if (data != null) {
if (data.Value) {
var value = data.Value;
if (data.Unit) {
value += " " + data.Unit;
}
if (data.Description) {
value += " " + data.Description;
}
return value;
}
else {
console.log('值为空:' + device.Name + '/' + dataName);
}
}
else {
console.log('无法找到:' + device.Name + '/' + dataName);
}
}
else {
console.log('无法找到:' + dataName);
}
return "";
}
}
});
</script>
<script>
$(document).on('click', 'a.popup-open.node', function () {
var id = $(this).attr('data-node-id');
vm.node = _.chain(vm.model).filter(function (o) { return o.Id == id; }).first().value();
});
$(document).on('click', 'a.popup-open.device', function () {
var id = $(this).attr('data-device-id');
vm.device = _.chain(vm.node.Devices).filter(function (o) { return o.Id == id; }).first().value();
});
$$('.node-popup').on('popup:open', function (e, popup) {
console.log('node popup open');
});
$$('.node-popup').on('popup:close', function (e, popup) {
console.log('node popup close');
});
$$('.device-popup').on('popup:open', function (e, popup) {
console.log('device popup open');
});
$$('.device-popup').on('popup:close', function (e, popup) {
console.log('device popup close');
});
</script>-->
</body>
</html>

@ -2,309 +2,173 @@
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, viewport-fit=cover">
<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">
<title>首页</title>
</head>
<body>
<div id="app">
<div class="view view-main view-init">
<div class="page page-current" data-page="index">
<div class="navbar">
<div class="navbar-inner">
<div class="left">
</div>
<div class="title sliding">科学技术学院</div>
<div class="right">
</div>
</div>
</div>
<div class="toolbar tabbar tabbar-labels toolbar-bottom">
<div class="toolbar-inner">
<a href="#tab-1" class="tab-link">
<i class="f7-icons">chat</i>
<span class="tabbar-label">消息</span>
</a>
<a href="#tab-2" class="tab-link tab-link-active">
<i class="f7-icons">data</i>
<span class="tabbar-label">智慧教室</span>
</a>
<a href="#tab-3" class="tab-link">
<i class="f7-icons">person</i>
<span class="tabbar-label">我的</span>
</a>
</div>
</div>
<div class="tabs page page-current">
<div id="tab-1" class="page-content tab">
<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>
<f7-app :params="f7params">
<f7-statusbar></f7-statusbar>
<f7-view id="main-view" main class="safe-areas">
<f7-page name="page-index" @page:beforein="init">
<f7-navbar>
<f7-nav-title>title</f7-nav-title>
</f7-navbar>
<f7-toolbar tabbar labels bottom>
<f7-link tab-link="#tab-1" icon-ios="f7:chat" icon-md="f7:chat" text="消息"></f7-link>
<f7-link tab-link="#tab-2" icon-ios="f7:data" icon-md="f7:data" text="智慧教室" tab-link-active></f7-link>
<f7-link tab-link="#tab-3" icon-ios="f7:person" icon-md="f7:person" text="我的"></f7-link>
</f7-toolbar>
<f7-tabs>
<f7-tab id="tab-1" class="page-content">
<f7-block>
<!--<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>-->
</f7-block>
</f7-tab>
<f7-tab id="tab-2" class="page-content" tab-active>
<f7-block>
<div class="list links-list">
<ul id="nodeList">
<li v-for="node in Nodes">
<a class="item-content popup-open node" href="#" data-popup=".node-popup" :data-node-number="node.Number">
<div class="item-media"><i class="f7-icons">link</i></div>
<div class="item-inner">
<div class="item-title">{{node.Name}}</div>
<div class="item-after"><span class="badge color-blue">{{node.Count}}</span></div>
</div>
</div>
</a>
</li>
</template>
</ul>
</ul>
</div>
</f7-block>
</f7-tab>
<f7-tab id="tab-3" class="page-content">
<f7-block>
<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-block>
</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>
</template>
</div>
<div id="tab-2" class="page-content tab tab-active">
<div class="list links-list">
<ul id="nodeList">
<li v-for="node in model">
<a class="item-content popup-open node" href="#" data-popup=".node-popup" :data-node-Id="node.Id">
<div class="item-media"><i class="f7-icons">link</i></div>
<div class="item-inner">
<div class="item-title">{{node.Name}}</div>
<div class="item-after"><span class="badge color-blue">{{node.Devices.length}}</span></div>
</div>
</a>
</li>
</ul>
</div>
</div>
<div id="tab-3" class="page-content tab">
<div class="list links-list">
<ul>
<li>
<div class="item-content">
<div class="item-inner">
<div class="item-title">用户名</div>
<div class="item-after">{{UserName}}</div>
</div>
</div>
</li>
<li>
<div class="item-content">
<div class="item-inner">
<div class="item-title">昵称</div>
<div class="item-after">{{NickName}}</div>
</div>
</div>
</li>
<li>
<a href="login.html?action=logout" class="external">退出</a>
</li>
<li>
<a href="#test">test</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="page stacked" data-page="test">
<div class="navbar">
<div class="navbar-inner">
<div class="title">test</div>
<div class="right"></div>
</div>
</div>
<div class="page-content">
<div class="block-title">test</div>
</div>
</div>
</div>
<div class="popup node-popup popup-tablet-fullscreen">
<div class="page">
<div class="navbar">
<div class="navbar-inner">
<div class="title">
<template v-if="node">
{{node.Name}}
</template>
</div>
<div class="right"><a href="#" class="link" onclick="app.popup.get('.node-popup').close();"><i class="f7-icons">close</i></a></div>
</div>
</div>
<div class="page-content">
<div class="block-title">场景</div>
<div class="block" v-if="node">
<div class="row">
<div class="col-33 tablet-15 demo-icon" v-for="sence in _.orderBy(node.Sences,['DisplayOrder','Name'])" v-on:click="sendSence(sence.Id)">
<a href="javascript:;" class="col button button-large button-raised">{{sence.Name}}</a>
</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>
</div>
</div>
<div class="block-title">设备</div>
<div class="list links-list" v-if="node">
<ul>
<li v-for="d in _.orderBy(node.Devices,['DisplayOrder','Name'])">
<a class="item-content popup-open device" href="#" data-popup=".device-popup" :data-device-id="d.Id">
<div class="item-media"><i class="f7-icons">link</i></div>
<div class="item-inner">
<div class="item-title">{{d.DisplayName||d.Name}}</div>
<div class="item-after">
<template v-if="d.Name==='温湿度检测器'">
<span class="badge color-blue">{{getDeviceDataValue(d,"温度")}}</span>
<span class="badge color-blue">{{getDeviceDataValue(d,"湿度")}}</span>
</template>
<template v-else-if="d.Name==='二氧化碳监测器'">
<span class="badge color-blue">{{getDeviceDataValue(d,"二氧化碳")}}</span>
</template>
<template v-else-if="d.Name==='光强检测器'">
<span class="badge color-blue">{{getDeviceDataValue(d,"光照强度")}}</span>
</template>
<template v-else-if="d.Name==='粉尘检测器'">
<span class="badge color-blue">{{getDeviceDataValue(d,"粉尘")}}</span>
</template>
<template v-else-if="d.Name==='烟雾感应器'">
<span class="badge color-blue">{{getDeviceDataValue(d,"状态")}}</span>
</template>
<template v-else-if="d.Name==='红外感应器'">
<span class="badge color-blue">{{getDeviceDataValue(d,"状态")}}</span>
</template>
<template v-else-if="d.Name==='主机'">
<span class="badge color-blue">{{getDeviceDataValue(d,"接收")}}</span>
</template>
<template v-else-if="d.Name==='AP'">
<span class="badge color-blue">{{getDeviceDataValue(d,"连接数")}}</span>
</template>
<template v-else-if="d.Name==='一路可调窗帘'">
<span class="badge color-blue">{{getDeviceDataValue(d,"状态")}}</span>
</template>
<template v-else-if="d.Name==='计量开关'">
<span class="badge color-blue">{{getDeviceDataValue(d,"状态")}}</span>
</template>
<template v-else-if="d.Name==='一路照明开关'">
<span class="badge color-blue">{{getDeviceDataValue(d,"状态")}}</span>
</template>
<template v-else-if="d.Name==='二路灯开关'">
<span class="badge color-blue">{{getDeviceDataValue(d,"L1状态")}}</span>
<span class="badge color-blue">{{getDeviceDataValue(d,"L2状态")}}</span>
</template>
<template v-else-if="d.Name==='三路照明开关'">
<span class="badge color-blue">{{getDeviceDataValue(d,"状态4")}}</span>
<span class="badge color-blue">{{getDeviceDataValue(d,"状态5")}}</span>
<span class="badge color-blue">{{getDeviceDataValue(d,"状态6")}}</span>
</template>
<template v-else-if="d.Name==='墙面插座'">
<span class="badge color-blue">{{getDeviceDataValue(d,"状态")}}</span>
</template>
<template v-else-if="d.Name==='一路插座'">
<span class="badge color-blue">{{getDeviceDataValue(d,"状态")}}</span>
</template>
<template v-else-if="d.Name==='二路插座'">
<span class="badge color-blue">{{getDeviceDataValue(d,"状态")}}</span>
</template>
<template v-else-if="d.Name==='密码门锁'">
<span class="badge color-blue">{{getDeviceDataValue(d,"状态")}}</span>
</template>
<template v-else-if="d.Name==='红外转发器'">
</template>
<template v-else-if="d.Name==='串口控制器'">
</template>
<template v-else-if="d.Name==='摄像头'">
</template>
<template v-else>
<template v-for="p in d.Data">
<span v-if="p.Name!=='hidden'" class="badge color-blue">
{{p.Name}}:{{p.Value}}{{p.Unit}}
</span>
</template>
</template>
</div>
</div>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="popup device-popup popup-tablet-fullscreen">
<div class="page">
<div class="navbar">
<div class="navbar-inner">
<div class="title">
<template v-if="device">
{{device.Name}}
</template>
</div>
<div class="right"><a href="#" class="link" onclick="app.popup.get('.device-popup').close();"><i class="f7-icons">close</i></a></div>
</div>
</div>
<div class="page-content">
<div class="block-title">属性</div>
<div class="list" v-if="device">
<ul v-if="device.Data.length">
<template v-for="p in device.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>
<div class="block-title">操作</div>
<div class="list links-list" v-if="device">
<ul>
<li v-for="a in _.orderBy(device.Apis,['DisplayOrder','Name'])">
<a class="item-content" href="#">
<div class="item-media"><i class="f7-icons">link</i></div>
<div class="item-inner">
<div class="item-title">{{a.Name}}</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>
</a>
</li>
</ul>
</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>
</div>
</div>
</div>
</form>
</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/signalr/signalr.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>
<script>
<!--<script>
function getJsonExt(url) {
console.log('send:' + url);
app.dialog.progress();
@ -513,6 +377,6 @@
$$('.device-popup').on('popup:close', function (e, popup) {
console.log('device popup close');
});
</script>
</script>-->
</body>
</html>

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

@ -29,11 +29,9 @@ namespace IoTCenter.Controllers
public IActionResult GetNodes()
{
var model = this._nodeRepo.ReadOnlyTable()
.Include(o => o.Sences)
.Include(o => o.Devices).ThenInclude(o => o.Data)
.Include(o => o.Devices).ThenInclude(o => o.Apis).ThenInclude(o => o.Parameters)
.Select(o => new { o.Number, o.Name, o.DisplayOrder, Count = o.Devices.Count })
.ToList();
return Json(model, new JsonSerializerSettings { ReferenceLoopHandling = ReferenceLoopHandling.Ignore });
return Json(model);
}
[Authorize]

Loading…
Cancel
Save