Former-commit-id: c73593544a54e8219fb851c490f02bdfa40c80de
TangShanKaiPing
wanggang 6 years ago
parent 623f3babaa
commit 2566932874

@ -720,6 +720,15 @@ ul {
border-radius: unset; border-radius: unset;
} }
/*bootstrap4+weui*/ /*bootstrap4+weui*/
.row{
margin-left:auto;
margin-right:auto;
}
.col{
padding-left:initial;
padding-right:initial;
}
[class^="weui"]{ [class^="weui"]{
box-sizing:initial; box-sizing:initial;
} }
@ -731,4 +740,16 @@ a:hover{
} }
label,h1{ label,h1{
margin-bottom:initial; margin-bottom:initial;
}
img{
margin:auto;
}
.img.icon {
width: 48px;
height: 48px;
}
.img.button{
width:48px;
height:48px;
cursor:pointer;
} }

@ -12,7 +12,7 @@
<title>首屏</title> <title>首屏</title>
</head> </head>
<body> <body>
<div id="app" class="container-fluid"> <div id="app">
<router-view class="view"></router-view> <router-view class="view"></router-view>
</div> </div>
<div id="loading"> <div id="loading">

@ -14,22 +14,35 @@ connection.on('Connected', function (id) {
connectionId = id; connectionId = id;
console.log('signalR 连接Id:' + connectionId); console.log('signalR 连接Id:' + connectionId);
}); });
connection.on("ServerToClient", function (method, json, to, from) { connection.on("ServerToClient", function (method, message, to, from) {
console.log(method+' from:'+from+' to:'+to); console.log(method);
console.log(json); console.log(message);
var model = JSON.parse(json); var event = method.substr(0, 1).toLowerCase() + method.substr(1);
if (method === 'NodeEntityUpdated') { var model = JSON.parse(message);
store.commit('updateNode', model); store.dispatch('update', {event,model,to,from});
} //store.commit('update', method,message,to,from);
//else if (method === 'NodeEntityInserted') {} //store.commit('update',method,message,to,from)
//else if (method === 'NodeEntityDeleted') {} //if (method === 'NodeEntityUpdated') {
else if (method === 'DeviceEntityInserted') { // store.commit('updateNode', model);
store.commit('insertDevice', model); //}
} ////else if (method === 'NodeEntityInserted') {}
else if (method === 'DeviceEntityUpdated') { ////else if (method === 'NodeEntityDeleted') {}
store.commit('updateDevice', model); //else if (method === 'DeviceEntityInserted') {
} // store.commit('insertDevice', model);
else if (method === 'DeviceEntityDeleted') { //}
store.commit('deleteDevice', model); //else if (method === 'DeviceEntityUpdated') {
} // store.commit('updateDevice', model);
//}
//else if (method === 'DeviceEntityDeleted') {
// store.commit('deleteDevice', model);
//}
//else if (method === 'DataEntityInserted') {
// store.commit('insertData', model);
//}
//else if (method === 'DataEntityUpdated') {
// store.commit('updateData', model);
//}
//else if (method === 'DataEntityDeleted') {
// store.commit('deleteData', model);
//}
}); });

@ -10,6 +10,11 @@ const store = new Vuex.Store({
node: null, node: null,
device:null device:null
}, },
actions: {
update(context,model) {
context.commit(model.event,model);
}
},
mutations: { mutations: {
setToken(state, data) { setToken(state, data) {
state.accessToken = data.accessToken; state.accessToken = data.accessToken;
@ -41,33 +46,49 @@ const store = new Vuex.Store({
setNode(state, model) { setNode(state, model) {
state.node = model; state.node = model;
}, },
updateNode(state, model) { nodeEntityUpdated(state, data) {
updateByNumber(state.nodes, model); var model = data.model;
}, if (state.nodes) {
insertDevice(state, model) { updateByNumber(state.nodes, model);
updateByNumber(state.devices, model);
var node = Enumerable.from(state.nodes).where(function (o) { return o.id === model.nodeId; }).firstOrDefault();
if (node) {
node.count += 1;
} }
var product = Enumerable.from(state.products).where(function (o) { return o.id === model.nodeId; }).firstOrDefault(); if (state.node) {
if (product) { copy(data.model, state.node);
product.count += 1;
} }
}, },
updateDevice(state, model) {
updateByNumber(state.devices, model); //update(state,method,message,to,from) {
}, // alert(1);
deleteDevice(state, model) { //},
deleteByNumber(state.devices, model); //updateNode(state, model) {
var node = Enumerable.from(state.nodes).where(function (o) { return o.id === model.nodeId; }).firstOrDefault(); // updateByNumber(state.nodes, model);
if (node) { //},
node.count -= 1; //insertDevice(state, model) {
} // updateByNumber(state.devices, model);
var product = Enumerable.from(state.products).where(function (o) { return o.id === model.productId; }).firstOrDefault(); // var node = Enumerable.from(state.nodes).where(function (o) { return o.id === model.nodeId; }).firstOrDefault();
if (product) { // if (node) {
product.count -= 1; // node.count += 1;
} // }
} // var product = Enumerable.from(state.products).where(function (o) { return o.id === model.nodeId; }).firstOrDefault();
// if (product) {
// product.count += 1;
// }
//},
//updateDevice(state, model) {
// updateByNumber(state.devices, model);
// if (device) {
// //update device
// }
//},
//deleteDevice(state, model) {
// deleteByNumber(state.devices, model);
// var node = Enumerable.from(state.nodes).where(function (o) { return o.id === model.nodeId; }).firstOrDefault();
// if (node) {
// node.count -= 1;
// }
// var product = Enumerable.from(state.products).where(function (o) { return o.id === model.productId; }).firstOrDefault();
// if (product) {
// product.count -= 1;
// }
//}
}, },
}) })

@ -1,7 +1,9 @@
function copy(from, to) { function copy(from, to) {
for (var attr in to) { for (var attr in to) {
if (from.hasOwnProperty(attr)) { if (from.hasOwnProperty(attr)) {
to[attr] = from[attr]; if (!(from[attr] instanceof Array)) {
to[attr] = from[attr];
}
} }
} }
} }

@ -6,7 +6,7 @@
</mt-header> </mt-header>
<!--场景--> <!--场景-->
<div class="row"> <div class="row">
<div class="col-md-12"> <div class="col col-md-12">
<div class="card"> <div class="card">
<div class="card-header">场景</div> <div class="card-header">场景</div>
<div class="card-body"> <div class="card-body">
@ -16,22 +16,22 @@
</div> </div>
</div> </div>
<!--环境--> <!--环境-->
<div class="col-md-12 my-2">环境</div> <div class="col col-md-12 my-2 px-3">环境</div>
<div class="row"> <div class="row">
<!--光强检测器--> <!--光强检测器-->
<div class="col-md-2 col-sm-3 col-4" v-for="device in getDevices('光强检测器')"> <div class="col col-md-2 col-sm-3 col-4 " v-for="device in getDevices('光强检测器')">
<div class="card mb-4"> <div class="card">
<div class="card-header"> <div class="card-header">
{{device.displayName}} {{device.displayName}}
<span class="float-right text-success" v-if="device.isOnline"><i class="ion ion-ios-wifi"></i></span> <span class="float-right text-success" v-if="device.isOnline"><i class="ion ion-ios-wifi"></i></span>
<span class="float-right text-danger" v-else><i class="ion ion-ios-wifi"></i></span> <span class="float-right text-danger" v-else><i class="ion ion-ios-wifi"></i></span>
</div> </div>
<div class="card-body"> <div class="card-body">
<div class="row" style="height:100px;"> <div class="row media" style="height:100px;">
<div class="col-md-6 col-sm-6 text-center"> <div class="col col-md-4 col-sm-4 align-self-center">
<img class="mh-100" src="/IoTCenter/images/light.png" style="width:48px;" /> <img class="mh-100" src="/IoTCenter/images/light.png" style="width:48px;" />
</div> </div>
<div class="col-md-6 col-sm-6"> <div class="col col-md-8 col-sm-8 align-self-center">
<div class="row" style="line-height:28px;"> <div class="row" style="line-height:28px;">
<span> <span>
光照度: 光照度:
@ -50,19 +50,19 @@
</div> </div>
</div> </div>
<!--温湿度传感器--> <!--温湿度传感器-->
<div class="col-md-2 col-sm-3 col-4 p-1" v-for="device in getDevices('温湿度传感器')"> <div class="col col-md-2 col-sm-3 col-4 " v-for="device in getDevices('温湿度传感器')">
<div class="card mb-4"> <div class="card">
<div class="card-header"> <div class="card-header">
{{device.displayName}} {{device.displayName}}
<span class="float-right text-success" v-if="device.isOnline"><i class="ion ion-ios-wifi"></i></span> <span class="float-right text-success" v-if="device.isOnline"><i class="ion ion-ios-wifi"></i></span>
<span class="float-right text-danger" v-else><i class="ion ion-ios-wifi"></i></span> <span class="float-right text-danger" v-else><i class="ion ion-ios-wifi"></i></span>
</div> </div>
<div class="card-body"> <div class="card-body">
<div class="row" style="height:100px;"> <div class="row media" style="height:100px;">
<div class="col-md-6 col-sm-6 text-center"> <div class="col col-md-4 col-sm-4 align-self-center">
<img class="mh-100" src="/IoTCenter/images/humiture.png" /> <img class="mh-100" src="/IoTCenter/images/humiture.png" />
</div> </div>
<div class="col-md-6 col-sm-6"> <div class="col col-md-8 col-sm-8 align-self-center">
<div class="row" style="height:50px;line-height:28px;"> <div class="row" style="height:50px;line-height:28px;">
<span> <span>
温度: 温度:
@ -93,19 +93,19 @@
</div> </div>
</div> </div>
<!--烟雾报警器--> <!--烟雾报警器-->
<div class="col-md-2 col-sm-3 col-4 p-1" v-for="device in getDevices('烟雾报警器')"> <div class="col col-md-2 col-sm-3 col-4 " v-for="device in getDevices('烟雾报警器')">
<div class="card mb-4"> <div class="card">
<div class="card-header"> <div class="card-header">
{{device.displayName}} {{device.displayName}}
<span class="float-right text-success" v-if="device.isOnline"><i class="ion ion-ios-wifi"></i></span> <span class="float-right text-success" v-if="device.isOnline"><i class="ion ion-ios-wifi"></i></span>
<span class="float-right text-danger" v-else><i class="ion ion-ios-wifi"></i></span> <span class="float-right text-danger" v-else><i class="ion ion-ios-wifi"></i></span>
</div> </div>
<div class="card-body"> <div class="card-body">
<div class="row" style="height:100px;"> <div class="row media" style="height:100px;">
<div class="col-md-6 col-sm-6 text-center"> <div class="col col-md-4 col-sm-4 align-self-center">
<img class="mh-100" src="/IoTCenter/images/smoke.png" style="width:48px;" /> <img class="mh-100" src="/IoTCenter/images/smoke.png" style="width:48px;" />
</div> </div>
<div class="col-md-6 col-sm-6"> <div class="col col-md-8 col-sm-8 align-self-center">
<div class="row" style="line-height:28px;"> <div class="row" style="line-height:28px;">
<span> <span>
状态: 状态:
@ -123,19 +123,19 @@
</div> </div>
</div> </div>
<!--人体感应器--> <!--人体感应器-->
<div class="col-md-2 col-sm-3 col-4 p-1" v-for="device in getDevices('人体感应器')"> <div class="col col-md-2 col-sm-3 col-4 " v-for="device in getDevices('人体感应器')">
<div class="card mb-4"> <div class="card">
<div class="card-header"> <div class="card-header">
{{device.displayName}} {{device.displayName}}
<span class="float-right text-success" v-if="device.isOnline"><i class="ion ion-ios-wifi"></i></span> <span class="float-right text-success" v-if="device.isOnline"><i class="ion ion-ios-wifi"></i></span>
<span class="float-right text-danger" v-else><i class="ion ion-ios-wifi"></i></span> <span class="float-right text-danger" v-else><i class="ion ion-ios-wifi"></i></span>
</div> </div>
<div class="card-body"> <div class="card-body">
<div class="row" style="height:100px;"> <div class="row media" style="height:100px;">
<div class="col-md-6 col-sm-6 text-center"> <div class="col col-md-4 col-sm-4 align-self-center">
<img class="mh-100" src="/IoTCenter/images/person.png" style="width:48px;" /> <img class="mh-100" src="/IoTCenter/images/person.png" style="width:48px;" />
</div> </div>
<div class="col-md-6 col-sm-6"> <div class="col col-md-8 col-sm-8 align-self-center">
<div class="row" style="line-height:28px;"> <div class="row" style="line-height:28px;">
<span> <span>
状态: 状态:
@ -154,22 +154,22 @@
</div> </div>
</div> </div>
<!--电器--> <!--电器-->
<div class="col-md-12 my-2">用电</div> <div class="col col-md-12 my-2 px-3">用电</div>
<div class="row"> <div class="row">
<!--窗帘电机--> <!--窗帘电机-->
<div class="col-md-2 col-sm-3 col-4 p-1" v-for="device in getDevices('窗帘电机')"> <div class="col col-md-2 col-sm-3 col-4 " v-for="device in getDevices('窗帘电机')">
<div class="card mb-4"> <div class="card">
<div class="card-header"> <div class="card-header">
{{device.displayName}} {{device.displayName}}
<span class="float-right text-success" v-if="device.isOnline"><i class="ion ion-ios-wifi"></i></span> <span class="float-right text-success" v-if="device.isOnline"><i class="ion ion-ios-wifi"></i></span>
<span class="float-right text-danger" v-else><i class="ion ion-ios-wifi"></i></span> <span class="float-right text-danger" v-else><i class="ion ion-ios-wifi"></i></span>
</div> </div>
<div class="card-body"> <div class="card-body">
<div class="row" style="height:100px;"> <div class="row media" style="height:100px;">
<div class="col-md-6 col-sm-6 text-center"> <div class="col col-md-4 col-sm-4 align-self-center">
<img class="mh-100" src="/IoTCenter/images/switch1.png" style="width:48px;" /> <img class="mh-100" src="/IoTCenter/images/switch1.png" style="width:48px;" />
</div> </div>
<div class="col-md-6 col-sm-6"> <div class="col col-md-8 col-sm-8 align-self-center">
<div class="row" style="line-height:28px;"> <div class="row" style="line-height:28px;">
<img style="height:32px;" v-on:click="callApi(device.number,'/Curtain/On')" src="/IoTCenter/images/left.png" /> <img style="height:32px;" v-on:click="callApi(device.number,'/Curtain/On')" src="/IoTCenter/images/left.png" />
<img style="height:32px;" v-on:click="callApi(device.number,'/Curtain/Stop')" src="/IoTCenter/images/stop.png" /> <img style="height:32px;" v-on:click="callApi(device.number,'/Curtain/Stop')" src="/IoTCenter/images/stop.png" />
@ -181,19 +181,19 @@
</div> </div>
</div> </div>
<!--一路开关--> <!--一路开关-->
<div class="col-md-2 col-sm-3 col-4 p-1" v-for="device in getDevices('三路开关')"> <div class="col col-md-2 col-sm-3 col-4 " v-for="device in getDevices('三路开关')">
<div class="card mb-4"> <div class="card">
<div class="card-header"> <div class="card-header">
{{device.displayName}} {{device.displayName}}
<span class="float-right text-success" v-if="device.isOnline"><i class="ion ion-ios-wifi"></i></span> <span class="float-right text-success" v-if="device.isOnline"><i class="ion ion-ios-wifi"></i></span>
<span class="float-right text-danger" v-else><i class="ion ion-ios-wifi"></i></span> <span class="float-right text-danger" v-else><i class="ion ion-ios-wifi"></i></span>
</div> </div>
<div class="card-body"> <div class="card-body">
<div class="row" style="height:100px;"> <div class="row media" style="height:100px;">
<div class="col-md-6 col-sm-6 text-center"> <div class="col col-md-4 col-sm-4 align-self-center">
<img class="mh-100" src="/IoTCenter/images/switch1.png" style="width:48px;" /> <img class="mh-100" src="/IoTCenter/images/switch1.png" style="width:48px;" />
</div> </div>
<div class="col-md-6 col-sm-6"> <div class="col col-md-8 col-sm-8 align-self-center">
<div class="row" style="line-height:28px;"> <div class="row" style="line-height:28px;">
<img v-if="getDataValue(device.number,'L1状态')=='开'" v-on:click="callApi(device.number,'/Switch3/L1Off')" src="/IoTCenter/images/on.png" /> <img v-if="getDataValue(device.number,'L1状态')=='开'" v-on:click="callApi(device.number,'/Switch3/L1Off')" src="/IoTCenter/images/on.png" />
<img v-if="getDataValue(device.number,'L1状态')=='关'" v-on:click="callApi(device.number,'/Switch3/L1On')" src="/IoTCenter/images/off.png" /> <img v-if="getDataValue(device.number,'L1状态')=='关'" v-on:click="callApi(device.number,'/Switch3/L1On')" src="/IoTCenter/images/off.png" />
@ -208,19 +208,19 @@
</div> </div>
</div> </div>
<!--智能插座--> <!--智能插座-->
<div class="col-md-2 col-sm-3 col-4 p-1" v-for="device in getDevices('智能插座')"> <div class="col col-md-2 col-sm-3 col-4 " v-for="device in getDevices('智能插座')">
<div class="card mb-4"> <div class="card">
<div class="card-header"> <div class="card-header">
{{device.displayName}} {{device.displayName}}
<span class="float-right text-success" v-if="device.isOnline"><i class="ion ion-ios-wifi"></i></span> <span class="float-right text-success" v-if="device.isOnline"><i class="ion ion-ios-wifi"></i></span>
<span class="float-right text-danger" v-else><i class="ion ion-ios-wifi"></i></span> <span class="float-right text-danger" v-else><i class="ion ion-ios-wifi"></i></span>
</div> </div>
<div class="card-body"> <div class="card-body">
<div class="row" style="height:100px;"> <div class="row media" style="height:100px;">
<div class="col-md-6 col-sm-6 text-center"> <div class="col col-md-4 col-sm-4 align-self-center">
<img class="mh-100" src="/IoTCenter/images/switch1.png" style="width:48px;" /> <img class="mh-100" src="/IoTCenter/images/switch1.png" style="width:48px;" />
</div> </div>
<div class="col-md-6 col-sm-6"> <div class="col col-md-8 col-sm-8 align-self-center">
<div class="row" style="line-height:28px;"> <div class="row" style="line-height:28px;">
<img v-if="getDataValue(device.number,'状态')==='开'" v-on:click="CallApi(device.number,'/Socket/Off')" src="/IoTCenter/images/on.png" :data-status="getDataValue(device.number,'状态')" /> <img v-if="getDataValue(device.number,'状态')==='开'" v-on:click="CallApi(device.number,'/Socket/Off')" src="/IoTCenter/images/on.png" :data-status="getDataValue(device.number,'状态')" />
<img v-if="getDataValue(device.number,'状态')==='关'" v-on:click="CallApi(device.number,'/Socket/On')" src="/IoTCenter/images/off.png" :data-status="getDataValue(device.number,'状态')" /> <img v-if="getDataValue(device.number,'状态')==='关'" v-on:click="CallApi(device.number,'/Socket/On')" src="/IoTCenter/images/off.png" :data-status="getDataValue(device.number,'状态')" />
@ -231,19 +231,14 @@
</div> </div>
</div> </div>
</div> </div>
<!--test--> <!--test-->
<hr /> <hr />
<div class="col-md-12" v-if="node"> <div class="row" v-if="node">
<div class="row"> <div v-for="device in node.devices" class="col-lg-3 col col-md-4 col-sm-6">
<template v-if="node"> <div class="weui-grid__icon">
<div v-for="device in node.devices" class="col-lg-3 col-md-4 col-sm-6 p-1"> <img :src="'/IoTCenter'+device.product.image" />
<div class="weui-grid__icon"> </div>
<img :src="'/IoTCenter'+device.product.image" /> <p class="weui-grid__label">{{device.displayName}}</p>
</div>
<p class="weui-grid__label">{{device.displayName}}</p>
</div>
</template>
</div> </div>
</div> </div>
</div> </div>

@ -6,7 +6,7 @@
</mt-header> </mt-header>
<div class="col-md-12"> <div class="col-md-12">
<div class="row"> <div class="row">
<router-link v-for="node in nodes" :to="{path:'/pages/iot/node',query:{number:node.number}}" class="col-md-2 col-sm-3 col-4 p-1"> <router-link v-for="node in nodes" :to="{path:'/pages/iot/node',query:{number:node.number}}" class="col-md-2 col-sm-3 col-4 m-2">
<div class="weui-grid__icon"> <div class="weui-grid__icon">
<img :src="'/IoTCenter'+node.image" /> <img :src="'/IoTCenter'+node.image" />
</div> </div>

Loading…
Cancel
Save