Former-commit-id: c322e147ecdd186be3620b391863e3e1e0ac90bd
TangShanKaiPing
wanggang 6 years ago
parent 8cb7fa7956
commit a7293757c1

@ -179,51 +179,85 @@
</div>
</div>
</div>
<div class="row" v-if="model.Product.Apis.length>0">
<template v-if="model.Product.Apis.length>0">
<!--接口-->
<div class="col-md-12">
<div class="card">
</div>
<div class="card">
<div class="card-header">
<h3 class="card-title">接口</h3>
<template v-if="model.Name!=='调色灯'">
<div class="row">
<div class="col-md-12">
<button class="btn btn-success" v-for="api in Enumerable.from(model.Product.Apis).orderBy('o=>o.Name')" v-if="api.Parameters.length<=1">{{api.Name}}</button>
</div>
<div class="card-body">
<template v-if="model.Name==='摄像头'">
</template>
<template v-else-if="model.Name==='调色灯'">
</div>
<form class="form-horizontal" v-for="api in Enumerable.from(model.Product.Apis).orderBy('o=>o.Name')" v-if="api.Parameters.length>1">
<input type="hidden" name="Number" :value="model.Number" />
<input type="hidden" name="Method" :value="api.Method" />
<div class="form-group" v-for="item in api.Parameters" v-if="item.Name!=='number'">
<label :for="item.Name">{{item.Description}}:</label>
<template v-if="item.Type==='string'">
<input type="text" class="form-control" :name="item.Name" :value="GetDataValueByKey(item.Name)" />
</template>
<template v-else-if="model.Name==='红外转发器'">
<template v-else>
<input type="text" class="form-control" :name="item.Name" :value="GetDataValueByKey(item.Name)" />
</template>
<template>
<div class="row">
<div class="col-md-12">
<button class="btn btn-success" v-for="api in Enumerable.from(model.Product.Apis).orderBy('o=>o.Name')" v-if="api.Parameters.length<=1">{{api.Name}}</button>
</div>
<div class="row">
<div class="col-sm-12">
<button class="btn btn-success">{{api.Name}}</button>
</div>
</div>
</form>
</template>
<template v-else-if="model.Name==='调色灯'">
<div class="row">
<div class="col-md-12">
<div class="card btns">
<div class="card-header">
<h3 class="card-title">
<img src="/images/light.png" />{{model.DisplayName||model.Name}}
</h3>
<div class="card-tools">
<img v-if="GetDataValue('状态')=='开'" v-on:click="CallApi(model.Number,'/ColorLight/Off')" src="/images/on.png" />
<img v-if="GetDataValue('状态')=='关'" v-on:click="CallApi(model.Number,'/ColorLight/On')" src="/images/off.png" />
</div>
</div>
<form class="form-horizontal" v-for="api in Enumerable.from(model.Product.Apis).orderBy('o=>o.Name')" v-if="api.Parameters.length>1">
<input type="hidden" name="Number" :value="model.Number" />
<input type="hidden" name="Method" :value="api.Method" />
<div class="form-group" v-for="item in api.Parameters" v-if="item.Name!=='number'">
<label :for="item.Name">{{item.Description}}:</label>
<template v-if="item.Type==='string'">
<input type="text" class="form-control" :name="item.Name" :value="GetDataValueByKey(item.Name)" />
</template>
<template v-else>
<input type="text" class="form-control" :name="item.Name" :value="GetDataValueByKey(item.Name)" />
</template>
</div>
<div class="row">
<div class="col-sm-12">
<button class="btn btn-success">{{api.Name}}</button>
<div class="card-body">
<form method="get" action="/App/ExecApi">
<input type="hidden" name="Number" :value="model.Number" />
<input type="hidden" name="Method" value="/ColorLight/SetColor" />
<div class="row">
<div class="col-md-3 col-xs-4">
<label class="btn">色调</label>
</div>
<div class="col-md-9 col-xs-8">
<input v-on:change="AjaxSubmit($event,model.Number,'色调')" type="range" min="0" step="1" max="255" name="Hue" class="hue" :value="GetDataValue(model.Number,'色调')" />
</div>
</div>
</div>
</form>
</template>
<div class="row">
<div class="col-md-3 col-xs-4">
<label class="btn">饱和度</label>
</div>
<div class="col-md-9 col-xs-8">
<input v-on:change="AjaxSubmit($event,model.Number,'饱和度')" type="range" min="0" step="1" max="254" name="Saturation" class="saturation" :value="GetDataValue(model.Number,'饱和度')" />
</div>
</div>
</form>
<form method="get" action="/App/ExecApi">
<input type="hidden" name="Number" :value="model.Number" />
<input type="hidden" name="Method" value="/ColorLight/SetBrightness" />
<div class="row">
<div class="col-md-3 col-xs-4">
<label class="btn">亮度</label>
</div>
<div class="col-md-9 col-xs-8">
<input v-on:change="AjaxSubmit($event,model.Number,'亮度')" type="range" min="0" step="1" max="254" name="Brightness" class="brightness" :value="GetDataValue(model.Number,'亮度')" />
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
</template>
</template>
</div>
@section scripts{

@ -15,5 +15,6 @@
<ItemGroup>
<None Remove="wwwroot\js\device.js" />
<None Remove="wwwroot\js\index.js" />
<None Remove="wwwroot\js\page.js" />
</ItemGroup>
</Project>

@ -44,53 +44,44 @@
</f7-view>
</f7-app>
</div>
<script type="text/javascript" src="lib/signalr/signalr.min.js"></script>
<script type="text/javascript" src="lib/axios/axios.min.js"></script>
<script type="text/javascript" src="lib/urijs/URI.min.js"></script>
<script type="text/javascript" src="lib/linq/linq.min.js"></script>
<script type="text/javascript" src="lib/jquery/jquery.min.js"></script>
<script type="text/javascript" src="lib/jquery-validation/jquery.validate.min.js"></script>
<script type="text/javascript" src="lib/jquery-validation-unobtrusive/jquery.validate.unobtrusive.min.js"></script>
<script type="text/javascript" src="lib/vue/vue.min.js"></script>
<script type="text/javascript" src="lib/framework7/js/framework7.bundle.min.js"></script>
<script type="text/javascript" src="lib/framework7/js/framework7-vue.bundle.min.js"></script>
<script type="text/javascript" src="lib/flv.js/flv.min.js"></script>
<script type="text/javascript" src="lib/toastr/toastr.min.js"></script>
<script type="text/javascript">
Framework7.use(Framework7Vue);
var app;
var vm = new Vue({
el: '#app',
data() {
return {
f7params: {
root: '#app',
id: 'io.framework7.testapp',
name: 'Framework7',
theme: 'ios',
},
server: localStorage.getItem('server')
};
},
mounted() {
this.$f7ready((f7) => {
app = this.$f7;
$.validator.unobtrusive.parse('form');
});
},
methods: {
submit: function (e) {
if (!$(e.target).valid()) {
return;
}
localStorage.setItem('server', vm.server);
var url = e.target.action;
axios.post(url)
.then(function (response) {
console.log(response);
location.href = "login.html";
})
.catch(function (error) {
app.dialog.alert(error, '警告', function () { })
});
isDebug = true;
useSingalR = false;
function data() {
return {
server: localStorage.getItem('server')
};
}
var methods = {
submit: function (e) {
if (!$(e.target).valid()) {
return;
}
localStorage.setItem('server', vm.server);
var url = e.target.action;
axios.post(url)
.then(function (response) {
console.log(response);
location.href = "login.html";
})
.catch(function (error) {
app.dialog.alert(error, '警告', function () { })
});
}
})
};
</script>
<script type="text/javascript" src="js/page.js"></script>
</body>
</html>

@ -32,7 +32,7 @@
<f7-list-item title="没有匹配的结果"></f7-list-item>
</f7-list>
<f7-list class="search-list searchbar-found">
<li style="width:33.3%;display:inline-block;" v-if="model" v-for="n in model">
<li style="width:33.3%;display:inline-block;" v-if="model" v-for="n in model.Products">
<a :href="'product.html?number='+n.Number" class="card external" style="display:block;text-align:center;">
<div class="card-header">
<span class="item-title">{{n.Name}}</span>

@ -399,6 +399,15 @@ function init() {
GetDatas() {
return Enumerable.from(this.model.Data).orderBy('o=>o.Key').toArray();
},
GetDataValue(name) {
var data = Enumerable.from(this.model.Data)
.where(function (o) { return o.Name == name })
.firstOrDefault();
if (data != null) {
return data.Value;
}
return null;
},
HasDevices(name) {
return Enumerable
.from(this.model.Devices)

@ -0,0 +1,138 @@
//
var isDebug = isDebug || false;
var useSignalR = useSignalR || false;
var isApp = location.href.indexOf('http') !== 0;
//
var wsUrl = iotCenter + '/hub?group=page';
var server = isApp ? localStorage.getItem('server') : null;
var iotCenter = isApp ? server + '/IoTCenter' : '';
var templateUrl = templateUrl || null;
var dataUrl = dataUrl||null;
var token = isApp ? localStorage.getItem('token') : null;
//
var connection = useSignalR? new signalR.HubConnectionBuilder().withUrl(wsUrl).build():null;
var vm;
var app;
//
var livePlayer;
var timer;
var decodedFrames;
var muted = true;
var volume = 0.5;
//
if (isApp) {
Framework7.use(Framework7Vue);
}
toastr.options.timeOut = 500;
toastr.options.positionClass = "toast-top-center";
//
//log
function debug(message) {
if (isDebug) {
console.log(message);
}
}
//signalr
function connect() {
debug('start connect to server:' + Date());
if (connection.state === signalR.HubConnectionState.Disconnected) {
connection.start().then(function () {
toastr.success('客户端与服务器连接成功!');
}).catch(function (err) {
toastr.error('客户端与服务器连接失败!');
setTimeout(connect, 15 * 1000);
});
}
}
function signalRInit() {
connection.on('Connected', function (id) {
connectionId = id;
debug(connectionId);
});
connection.onclose(function (err) {
setTimeout(connect, 15 * 1000);
});
connection.on("ServerToClient", function (method, json, from) {
debug(method + ':' + json);
onMessage(method, json, from);
});
}
//加载模板
function loadTemplate() {
axios.post(templateUrl, { crossDomain: true })
.then(function (response) {
var html = response.data;
$('#template').html(html);
init();
})
.catch(function (error) {
toastr.error('模板加载失败');
debug(error);
});
}
//加载数据
function loadData() {
var formData = new FormData();
formData.append('number', new URI().search(true).number);
if (isApp) {
formData.append('token', token);
}
axios.post(dataUrl, formData)
.then(function (response) {
debug(response);
data.model = response.data;
toastr.success('数据加载成功!');
})
.catch(function (error) {
toastr.error('数据加载失败');
debug(error);
});
}
//
//开始
function start() {
if (useSignalR) {
signalRInit();
connect();
}
if (templateUrl) {
loadTemplate();
}
else {
init();
}
}
//初始化vue
var mounted = mounted || function () { };
function init() {
$('#template style').each(function (i, n) {
$('head').append(n);
});
if (isApp) {
data['f7params'] = {
root: '#app',
id: 'io.framework7.testapp',
name: 'Framework7',
theme: 'ios',
};
}
vm = new Vue({
el: '#app',
data: data,
mounted: function () {
mounted();
if (isApp) {
this.$f7ready((f7) => {
app = this.$f7;
$.validator.unobtrusive.parse('form');
});
}
if (dataUrl) {
loadData();
}
},
methods:methods
});
}
//
start();

@ -56,65 +56,57 @@
</f7-view>
</f7-app>
</div>
<script type="text/javascript" src="lib/signalr/signalr.min.js"></script>
<script type="text/javascript" src="lib/axios/axios.min.js"></script>
<script type="text/javascript" src="lib/urijs/URI.min.js"></script>
<script type="text/javascript" src="lib/linq/linq.min.js"></script>
<script type="text/javascript" src="lib/jquery/jquery.min.js"></script>
<script type="text/javascript" src="lib/jquery-validation/jquery.validate.min.js"></script>
<script type="text/javascript" src="lib/jquery-validation-unobtrusive/jquery.validate.unobtrusive.min.js"></script>
<script type="text/javascript" src="lib/vue/vue.min.js"></script>
<script type="text/javascript" src="lib/framework7/js/framework7.bundle.min.js"></script>
<script type="text/javascript" src="lib/framework7/js/framework7-vue.bundle.min.js"></script>
<script type="text/javascript" src="lib/flv.js/flv.min.js"></script>
<script type="text/javascript" src="lib/toastr/toastr.min.js"></script>
<script type="text/javascript">
Framework7.use(Framework7Vue);
var app;
var vm = new Vue({
el: '#app',
data() {
return {
f7params: {
routes: [],
name: 'My App',
id: 'com.myapp.test',
theme: 'ios',
},
server: localStorage.getItem('server'),
username: localStorage.getItem('username')
};
},
mounted() {
if (!this.server) {
location.href = "config.html";
}
this.$f7ready((f7) => {
app = this.$f7;
$.validator.unobtrusive.parse('form');
});
},
methods: {
submit: function (e) {
if (!$(e.target).valid()) {
return;
}
localStorage.setItem("username", vm.username);
var url = e.target.action;
var data = $(e.target).serialize();
axios.post(url, data)
.then(function (response) {
console.log(response);
var data = response.data;
if (data.Code === 0) {
localStorage.setItem("token", data.Token);
window.location.href = "index.html";
}
else {
app.dialog.alert(data.Message, '警告', function () { });
}
})
.catch(function (error) {
app.dialog.alert(error, '警告', function () { })
});
isDebug = true;
function data() {
return {
server: localStorage.getItem('server'),
username: localStorage.getItem('username')
};
}
function mounted() {
if (isApp && !this.server) {
location.href = "config.html";
}
}
var methods = {
submit: function (e) {
if (!$(e.target).valid()) {
return;
}
localStorage.setItem("username", vm.username);
var url = e.target.action;
var data = $(e.target).serialize();
axios.post(url, data)
.then(function (response) {
console.log(response);
var data = response.data;
if (data.Code === 0) {
localStorage.setItem("token", data.Token);
window.location.href = "index.html";
}
else {
app.dialog.alert(data.Message, '警告', function () { });
}
})
.catch(function (error) {
app.dialog.alert(error, '警告', function () { })
});
}
})
};
</script>
<script type="text/javascript" src="js/page.js"></script>
</body>
</html>
Loading…
Cancel
Save