diff --git a/projects/IoTCenter/Views/Home/Index.cshtml b/projects/IoTCenter/Views/Home/Index.cshtml
index 50c668ca..f5cec7c1 100644
--- a/projects/IoTCenter/Views/Home/Index.cshtml
+++ b/projects/IoTCenter/Views/Home/Index.cshtml
@@ -6,30 +6,28 @@
 </div>
 <br />
 <div class="row overlay-wrapper">
-    <template v-if="model">
-        <div class="col-md-2 col-sm-4 col-xs-6" v-for="item in GetProducts()">
-            <div class="card">
-                <div class="card-header">
-                    <h3 class="card-title">{{item.name}}</h3>
-                    <div class="card-tools"><span data-toggle="tooltip" class="badge bg-green">{{item.DeviceCount}}</span></div>
-                </div>
-                <a class="card-body" :href="'@Url.Content("~")/Home/Product/?number='+item.number" style="display:block;text-align:center;">
-                    <img :alt="item.Name" :src="'@Url.Content("~")'+item.image" style="margin:0 auto;width:64px;" />
-                </a>
+    <div class="col-md-2 col-sm-4 col-xs-6" v-for="item in products">
+        <div class="card">
+            <div class="card-header">
+                <h3 class="card-title">{{item.name}}</h3>
+                <div class="card-tools"><span data-toggle="tooltip" class="badge bg-green">{{item.count}}</span></div>
             </div>
+            <a class="card-body" :href="'@Url.Content("~")/Home/Product/?number='+item.number" style="display:block;text-align:center;">
+                <img :alt="item.Name" :src="'@Url.Content("~")'+item.image" style="margin:0 auto;width:64px;" />
+            </a>
         </div>
-        <div class="col-md-12" v-if="model.scenes.length">
-            <div class="card">
-                <div class="card-header">
-                    <h3 class="card-title">全局场景</h3>
-                    <div class="card-tools"><span data-toggle="tooltip" class="badge bg-green">{{model.scenes.length}}</span></div>
-                </div>
-                <div class="card-body">
-                    <button class="btn btn-success" v-for="scene in GetScenes()" v-on:click="CallScene(scene.id)">{{scene.name}}</button>
-                </div>
+    </div>
+    <div class="col-md-12" v-if="scenes.length">
+        <div class="card">
+            <div class="card-header">
+                <h3 class="card-title">全局场景</h3>
+                <div class="card-tools"><span data-toggle="tooltip" class="badge bg-green">{{scenes.length}}</span></div>
+            </div>
+            <div class="card-body">
+                <button class="btn btn-success" v-for="scene in scenes" v-on:click="execScene(scene.id)">{{scene.name}}</button>
             </div>
         </div>
-    </template>
+    </div>
 </div>
 @section styles{
     <style>
@@ -41,7 +39,56 @@
 @section scripts{
     <script>
         var baseUrl = '@Url.Content("~")';
+        var hubUrl = "@Url.Content("~")/hub?group=page";
+        var onMessage = null;
+    </script>
+    <script src="~/lib/WXInlinePlayer/index.js"></script>
+    <script src="~/js/util.js"></script>
+    <script src="~/js/iot.js"></script>
+    <script src="~/js/message.js"></script>
+    <script>
+        var app = new Vue({
+            el: '#app',
+            data() {
+                return {
+                    title: "产品",
+                    url: '/api/v1/product/getProducts',
+                    products: [],
+                    scenes: []
+                };
+            },
+            mounted: function () {
+                connect();
+                this.load();
+            },
+            methods: {
+                load: function () {
+                    var vm = this;
+                    axios.post(baseUrl + '/api/v1/product/getProducts').then(function (response) {
+                        vm.products = response.data;
+                    });
+                    axios.post(baseUrl + '/api/v1/Scene/GetScenes').then(function (response) {
+                        vm.scenes = response.data;
+                    });
+                }
+            }
+        });
+        onMessage = function (method, json, to, from) {
+            var item = JSON.parse(json);
+            if (method === 'ProductEntityInserted' ||
+                method === 'ProductEntityUpdated' ||
+                method === 'ProductEntityDeleted' ||
+                method === 'DeviceEntityInserted' ||
+                method === 'DeviceEntityDeleted') {
+                app.load();
+            }
+            else if (method === 'SceneEntityInserted' ||
+                method === 'SceneEntityUpdated' ||
+                method === 'SceneEntityDeleted') {
+                if (item.nodeId === null) {
+                    app.load();
+                }
+            }
+        }
     </script>
-    <script src="~/js/page.js"></script>
-    <script src="~/js/index.js"></script>
 }
\ No newline at end of file
diff --git a/projects/IoTCenter/wwwroot/js/index.js b/projects/IoTCenter/wwwroot/js/index.js
index 2fddc513..b55c8283 100644
--- a/projects/IoTCenter/wwwroot/js/index.js
+++ b/projects/IoTCenter/wwwroot/js/index.js
@@ -24,7 +24,6 @@ methods = {
     }
 };
 function onMessage(method, json, to, from) {
-    debug(method + ':' + json);
     var item = JSON.parse(json);
     if (method === 'ProductEntityInserted' ||
         method === 'ProductEntityUpdated' ||
diff --git a/projects/IoTCenter/wwwroot/js/iot.js b/projects/IoTCenter/wwwroot/js/iot.js
new file mode 100644
index 00000000..5dc513ef
--- /dev/null
+++ b/projects/IoTCenter/wwwroot/js/iot.js
@@ -0,0 +1,112 @@
+var time = '1d';
+if (WXInlinePlayer.isSupport()) {
+    WXInlinePlayer.init({
+        asmUrl: '/lib/WXInlinePlayer/prod.all.asm.combine.js',
+        wasmUrl: '/lib/WXInlinePlayer/prod.all.wasm.combine.js'
+    });
+}
+function getDeviceDataValue(device, name) {
+    var data = Enumerable.from(device.data).where(o => o.name === name).firstOrDefault();
+    if (data) {
+        return data['value'];
+    }
+    return null;
+}
+function getDeviceDataDescription(device, name) {
+    var data = Enumerable.from(device.data).where(o => o.name === name).firstOrDefault();
+    if (data) {
+        return data['description'];
+    }
+    return null;
+}
+function getDeviceDataUnit(device, name) {
+    var data = Enumerable.from(device.data).where(o => o.name === name).firstOrDefault();
+    if (data) {
+        return data['unit'];
+    }
+    return null;
+}
+function getDeviceData(device, name) {
+    var data = Enumerable.from(device.data).where(o => o.name === name).firstOrDefault();
+    if (data) {
+        return data['value'] + ' ' + data['unit'];
+    }
+    return null;
+}
+function getData(device, name) {
+    return Enumerable.from(device.data).where(o => o.name === name).firstOrDefault();
+}
+//devices
+function parseModel(response) {
+    var html = new DOMParser().parseFromString(response.data, 'text/html');
+    var template = html.getElementsByTagName('template')[0].innerHTML;
+    var script = html.getElementsByTagName('script')[0].innerHTML;
+    var model = eval(script);
+    model.template = template;
+    return model;
+}
+Vue.component('iot-gateway', function (resolve, reject) {
+    axios.get("/pages/iot/device/gateway.html").then(function (response) {
+        resolve(parseModel(response));
+    });
+});
+Vue.component('iot-light', function (resolve, reject) {
+    axios.get("/pages/iot/device/light.html").then(function (response) {
+        resolve(parseModel(response));
+    });
+});
+Vue.component('iot-humiture', function (resolve, reject) {
+    axios.get("/pages/iot/device/humiture.html").then(function (response) {
+        resolve(parseModel(response));
+    });
+});
+Vue.component('iot-smoke', function (resolve, reject) {
+    axios.get("/pages/iot/device/smoke.html").then(function (response) {
+        resolve(parseModel(response));
+    });
+});
+Vue.component('iot-person', function (resolve, reject) {
+    axios.get("/pages/iot/device/person.html").then(function (response) {
+        resolve(parseModel(response));
+    });
+});
+Vue.component('iot-curtain', function (resolve, reject) {
+    axios.get("/pages/iot/device/curtain.html").then(function (response) {
+        resolve(parseModel(response));
+    });
+});
+Vue.component('iot-switch', function (resolve, reject) {
+    axios.get("/pages/iot/device/switch.html").then(function (response) {
+        resolve(parseModel(response));
+    });
+});
+Vue.component('iot-switch3', function (resolve, reject) {
+    axios.get("/pages/iot/device/switch3.html").then(function (response) {
+        resolve(parseModel(response));
+    });
+});
+Vue.component('iot-socket', function (resolve, reject) {
+    axios.get("/pages/iot/device/socket.html").then(function (response) {
+        resolve(parseModel(response));
+    });
+});
+Vue.component('iot-ir', function (resolve, reject) {
+    axios.get("/pages/iot/device/ir.html").then(function (response) {
+        resolve(parseModel(response));
+    });
+});
+Vue.component('iot-color-light', function (resolve, reject) {
+    axios.get("/pages/iot/device/color-light.html").then(function (response) {
+        resolve(parseModel(response));
+    });
+});
+Vue.component('iot-camera', function (resolve, reject) {
+    axios.get("/pages/iot/device/camera.html").then(function (response) {
+        resolve(parseModel(response));
+    });
+});
+Vue.component('iot-serial-port', function (resolve, reject) {
+    axios.get("/pages/iot/device/serial-port.html").then(function (response) {
+        resolve(parseModel(response));
+    });
+});
\ No newline at end of file
diff --git a/projects/IoTCenter/wwwroot/js/message.js b/projects/IoTCenter/wwwroot/js/message.js
new file mode 100644
index 00000000..56650ebd
--- /dev/null
+++ b/projects/IoTCenter/wwwroot/js/message.js
@@ -0,0 +1,20 @@
+var connection = new signalR.HubConnectionBuilder().withUrl(hubUrl).build();
+var connectionId;
+function connect() {
+    if (connection.state === signalR.HubConnectionState.Disconnected) {
+        connection.start().then(function () {
+            console.log('signalR 连接成功');
+        }).catch(function (err) {
+            console.log(err);
+            setTimeout(connect, 15 * 1000);
+        });
+    }
+}
+connection.on('Connected', function (id) {
+    connectionId = id;
+    console.log('signalR 连接Id:' + connectionId);
+});
+connection.on("ServerToClient", function (method, message, to, from) {
+    console.log(method + ':' + message);
+    onMessage(method, message, to, from);
+});
\ No newline at end of file
diff --git a/projects/IoTCenter/wwwroot/js/store.js b/projects/IoTCenter/wwwroot/js/store.js
new file mode 100644
index 00000000..98df8913
--- /dev/null
+++ b/projects/IoTCenter/wwwroot/js/store.js
@@ -0,0 +1,125 @@
+Vue.use(Vuex);
+const store = new Vuex.Store({
+    state: {
+        accessToken: localStorage.getItem("accessToken"),
+        refreshToken: localStorage.getItem("refreshToken"),
+        user: null,
+        products: [],
+        nodes: [],
+        scenes: [],
+        product: null,
+        node: null,
+        device: null,
+        messages:[]
+    },
+    actions: {
+        update(context, model) {
+            context.commit(model.event, model);
+        }
+    },
+    mutations: {
+        setToken(state, data) {
+            state.accessToken = data.accessToken;
+            localStorage.setItem("accessToken", state.accessToken);
+            state.refreshToken = data.refreshToken;
+            localStorage.setItem("refreshToken", state.refreshToken);
+        },
+        logout(state) {
+            state.accessToken = null;
+            state.refreshToken = null;
+            localStorage.removeItem('accessToken');
+            localStorage.removeItem('refreshToken');
+        },
+        setUser(state, user) {
+            state.user = user;
+        },
+        setProducts(state, model) {
+            state.products = model;
+        },
+        setNodes(state, model) {
+            state.nodes = model;
+        },
+        setProduct(state, model) {
+            state.product = model;
+        },
+        setDevice(state, model) {
+            state.device = model;
+        },
+        setNode(state, model) {
+            state.node = model;
+        },
+        setScenes(state, model) {
+            state.scenes = model;
+        },
+        nodeEntityUpdated(state, data) {
+            var model = data.model;
+            if (state.nodes) {
+                updateByNumber(state.nodes, model);
+            }
+            if (state.node) {
+                if (state.node.number === model.number) {
+                    copy(model, state.node);
+                }
+            }
+        },
+        dataEntityUpdated(state, data) {
+            var model = data.model;
+            if (state.node) {
+                let device = Enumerable.from(state.node.devices).where(function (o) { return o.id === model.deviceId; }).firstOrDefault();
+                if (device) {
+                    updateByKey(device.data, model);
+                }
+            }
+            if (state.product) {
+                let device = Enumerable.from(state.product.devices).where(function (o) { return o.id === model.deviceId; }).firstOrDefault();
+                if (device) {
+                    updateByKey(device.data, model);
+                }
+            }
+            if (state.device) {
+                let device = state.device.id === model.deviceId ? state.device : null;
+                if (device) {
+                    updateByKey(device.data, model);
+                }
+            }
+            //state.messages.push(model);
+            //while (state.messages.length > 10) {
+            //    state.messages.unshift();
+            //}
+        }
+        //update(state,method,message,to,from) {
+        //    alert(1);
+        //},
+        //updateNode(state, model) {
+        //    updateByNumber(state.nodes, model);
+        //},
+        //insertDevice(state, 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 (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;
+        //    }
+        //}
+    }
+});
\ No newline at end of file
diff --git a/projects/IoTCenter/wwwroot/js/util.js b/projects/IoTCenter/wwwroot/js/util.js
new file mode 100644
index 00000000..b8ddfecb
--- /dev/null
+++ b/projects/IoTCenter/wwwroot/js/util.js
@@ -0,0 +1,90 @@
+//update
+function updateById(list, item) {
+    return update(list, item, 'id');
+}
+
+function updateByNumber(list, item) {
+    return update(list, item, 'number');
+}
+
+function updateByKey(list, item) {
+    return update(list, item, 'key');
+}
+
+function update(list, item, key) {
+    key = key || 'number';
+    var result = false;
+    var to = Enumerable.from(list).where(function (o) { return o[key] === item[key]; }).firstOrDefault();
+    if (to) {
+        copy(item, to);
+    }
+    else {
+        list.push(item);
+        result = true;
+    }
+    console.log(result?'insert':'update'+' data by '+key);
+    return result;
+}
+//delete
+function remove(list, item,key) {
+    var result = false;
+    for (var i = 0; i < list.length; i++) {
+        if (list[i][key] === item[key]) {
+            list.splice(i, 1);
+            result = true;
+            break;
+        }
+    }
+    return result;
+}
+//util
+function copy(from, to) {
+    for (var attr in to) {
+        if (from.hasOwnProperty(attr)) {
+            if (!(from[attr] instanceof Array)) {
+                to[attr] = from[attr];
+            }
+        }
+    }
+}
+//
+toastr.options = {
+    "positionClass": "toast-top-center",
+    "timeOut": "1000"
+};
+var loading = {
+    show: function (msg) {
+        toastr.info(msg || "loading");
+    },
+    hide: function () {
+        toastr.remove();
+    }
+};
+//
+function execApi(number, method, query) {
+    loading.show();
+    axios.post('/IoTCenter/api/v1/api/execApi', { connectionId, number, method, query })
+        .then(function (response) {
+            console.log(response);
+        })
+        .catch(function (error) {
+            console.log(error);
+        })
+        .finally(function () {
+            loading.hide();
+        });
+}
+
+function execScene(id) {
+    loading.show();
+    axios.post('/IoTCenter/api/v1/api/execScene', '"' + id + '"', { headers: { 'Content-Type': 'application/json;charset=UTF-8' } })
+        .then(function (response) {
+            console.log(response);
+        })
+        .catch(function (error) {
+            console.log(error);
+        })
+        .finally(function () {
+            loading.show();
+        });
+}
\ No newline at end of file