diff --git a/projects/IoTClient/Assets/StreamingAssets/IoT.Resources.csproj b/projects/IoTClient/Assets/StreamingAssets/IoT.Resources.csproj
index 1692dab5..cd818903 100644
--- a/projects/IoTClient/Assets/StreamingAssets/IoT.Resources.csproj
+++ b/projects/IoTClient/Assets/StreamingAssets/IoT.Resources.csproj
@@ -11,5 +11,7 @@
   </ItemGroup>
    <ItemGroup>
     <EmbeddedResource Include="wwwroot\**\*" />
+  </ItemGroup><ItemGroup>
+    <None Remove="wwwroot\images\temperature.png" />
   </ItemGroup>
 </Project>
\ No newline at end of file
diff --git a/projects/IoTClient/Assets/StreamingAssets/wwwroot/images/temperature.png b/projects/IoTClient/Assets/StreamingAssets/wwwroot/images/temperature.png
new file mode 100644
index 00000000..775fd69d
Binary files /dev/null and b/projects/IoTClient/Assets/StreamingAssets/wwwroot/images/temperature.png differ
diff --git a/projects/IoTClient/Assets/StreamingAssets/wwwroot/index2.html b/projects/IoTClient/Assets/StreamingAssets/wwwroot/index2.html
index c08ab415..d8418f59 100644
--- a/projects/IoTClient/Assets/StreamingAssets/wwwroot/index2.html
+++ b/projects/IoTClient/Assets/StreamingAssets/wwwroot/index2.html
@@ -26,6 +26,7 @@
             </f7-view>
         </f7-app>
     </div>
+    <!--login-->
     <template id="page-login">
         <f7-page>
             <f7-navbar>
@@ -88,6 +89,7 @@
             </form>
         </f7-page>
     </template>
+    <!--home-->
     <template id="page-home">
         <f7-page :page-content="false">
             <f7-navbar>
@@ -99,6 +101,7 @@
                 <f7-link tab-link="#tab-user" icon-ios="f7:person" icon-md="f7:person" text="我的"></f7-link>
             </f7-toolbar>
             <f7-tabs>
+                <!--message-->
                 <f7-tab id="tab-message" class="page-content">
                     <template v-for="message in vm.Messages">
                         <template v-if="message&&message.Data.length">
@@ -133,6 +136,7 @@
                         </template>
                     </template>
                 </f7-tab>
+                <!--nodes-->
                 <f7-tab id="tab-nodes" class="page-content" tab-active>
                     <f7-list>
                         <f7-list-item icon-ios="f7:chat" icon-md="f7:chat" v-for="node in vm.NodeList" :title="node.Name" :badge="node.Count" :link="'/node/'+node.Number+'/name/'+node.Name">
@@ -140,6 +144,7 @@
                         </f7-list-item>
                     </f7-list>
                 </f7-tab>
+                <!--user-->
                 <f7-tab id="tab-user" class="page-content">
                     <f7-list>
                         <f7-list-item title="用户名" :after="vm.Home.UserName"></f7-list-item>
@@ -150,10 +155,11 @@
             </f7-tabs>
         </f7-page>
     </template>
+    <!--node-->
     <template id="page-node">
         <f7-page>
             <f7-navbar>
-                <f7-navbar :title="Node.Name" back-link="Back"></f7-navbar>
+                <f7-navbar v-if="vm.Node" :title="vm.Node.Name" back-link="Back"></f7-navbar>
             </f7-navbar>
 
             <template v-if="getDevices('光强检测器').length">
@@ -750,142 +756,12 @@
             </template>
         </f7-page>
     </template>
+    <!--device-->
     <template id="page-device">
         <f7-page>
             <f7-navbar>
-                <f7-navbar :title="Device.DisplayName||Device.Name" back-link="Back"></f7-navbar>
+                <f7-navbar v-if="vm.Device" :title="vm.Device.DisplayName||vm.Device.Name" back-link="Back"></f7-navbar>
             </f7-navbar>
-            <div class="block-title" v-if="Device.Data.length">属性</div>
-            <div class="list">
-                <ul v-if="Device.Data.length">
-                    <template v-for="data in Device.Data">
-                        <li v-if="showData(data.Name)">
-                            <div class="item-content">
-                                <div class="item-media"><i class="f7-icons">info</i></div>
-                                <div class="item-inner">
-                                    <div class="item-title">{{data.Name}}</div>
-                                    <div class="item-after">
-                                        <span class="badge color-blue">
-                                            {{data.Value}}
-                                        </span>
-                                        <span>&nbsp;</span>
-                                        <span class="badge color-blue" v-if="data.Unit">
-                                            {{data.Unit}}
-                                        </span>
-                                        <span>&nbsp;</span>
-                                        <span class="badge color-blue" v-if="data.Description">
-                                            {{data.Description}}
-                                        </span>
-                                    </div>
-                                </div>
-                            </div>
-                        </li>
-                    </template>
-                </ul>
-            </div>
-            <template v-for="data in Device.Data">
-                <div class="block" v-if="data.Type === 'Int' || data.Type === 'Float'">
-                    <div class="col">
-                        <canvas :id="data.Key" :data-label="data.Name" class="chart"></canvas>
-                    </div>
-                </div>
-            </template>
-            <div class="block-title" v-if="Device.Apis.length">操作</div>
-            <div class="list no-hairlines-md" v-if="Device.Apis.length">
-                <ul v-if="Device.Name==='摄像头'">
-                    <li>
-                        <div class="block">
-                            <a v-if="isApp" class="button button-large button-fill button-outline color-green external" :href="getUrl('rtmp')">预览</a>
-                            <a v-else class="button button-large button-fill button-outline color-green" href="javascript:;" v-on:click="flv()">预览</a>
-                        </div>
-                    </li>
-                </ul>
-                <template v-for="api in  _.orderBy(Device.Apis,['Command'])">
-                    <form method="get" action="/Command/Exec" v-on:submit.prevent="call" class="command" v-if="showApi(api)">
-                        <input type="hidden" name="cmd" :value="api.Command" />
-                        <input type="hidden" name="id" :value="Device.Id" />
-                        <ul>
-                            <template v-for="parameter in api.Parameters">
-                                <template>
-                                    <li class="item-content item-input" v-if="parameter.Name!='hidden'">
-                                        <div class="item-inner">
-                                            <div class="item-title item-label">{{parameter.Description}}</div>
-                                            <div class="item-input-wrap">
-                                                <template v-if="isSelect(Device,parameter.Name)">
-                                                    <select :name="parameter.Name"
-                                                            data-val="true"
-                                                            :data-val-required="'请选择'+parameter.Description">
-                                                        <option value="">请选择</option>
-                                                        <option v-for="option in getSelect(Device,parameter.Name)" :value="option.value">{{option.text}}</option>
-                                                    </select>
-                                                    <span class="input-clear-button"></span>
-                                                </template>
-                                                <template v-else>
-                                                    <template v-if="parameter.Minimum||parameter.Maximnu">
-                                                        <input :name="parameter.Name" :value="getParameter(parameter.Name)" data-val="true" data-val-required="请输入"
-                                                               data-val-number="必须输入数字" :data-val-range="'范围:'+parameter.Minimum+'~'+parameter.Maximnu" :data-val-range-min="parameter.Minimum" :data-val-range-max="parameter.Maximnu"
-                                                               type="text" />
-                                                        <span class="input-clear-button"></span>
-                                                    </template>
-                                                    <template v-else>
-                                                        <input :name="parameter.Name"
-                                                               :value="getParameter(parameter.Name)"
-                                                               data-val="true"
-                                                               :data-val-required="'请输入'+parameter.Description"
-                                                               type="text" />
-                                                        <span class="input-clear-button"></span>
-                                                    </template>
-                                                </template>
-                                            </div>
-                                            <span class="field-validation-valid text-danger" :data-valmsg-for="parameter.Name" data-valmsg-replace="true"> </span>
-                                        </div>
-                                    </li>
-                                </template>
-                            </template>
-                            <li>
-                                <div class="block">
-                                    <button class="button button-large button-fill button-outline" type="submit">{{api.Name}}</button>
-                                </div>
-                            </li>
-                        </ul>
-                    </form>
-                </template>
-            </div>
-        </f7-page>
-    </template>
-    <template id="page-camera">
-        <f7-page>
-            <f7-navbar>
-                <f7-navbar :title="name" back-link="Back"></f7-navbar>
-            </f7-navbar>
-            <div class="videoContainer">
-                <video id="flvPlayer" class="video" muted controls autoplay></video>
-                <div id="ptz" v-if="ptz">
-                    <table>
-                        <tr>
-                            <td></td>
-                            <td></td>
-                            <td><a href="javascript:;" v-on:mouseup="call('23stop')" v-on:mouseleave="call('23stop')" v-on:mousedown="call('26up')"><img src="images/up.png" /></a></td>
-                            <td></td>
-                            <td></td>
-                        </tr>
-                        <tr>
-                            <td></td>
-                            <td><a href="javascript:;" v-on:mouseup="call('23stop')" v-on:mouseleave="call('23stop')" v-on:mousedown="call('24left')"><img src="images/left.png" /></a></td>
-                            <td></td>
-                            <td><a href="javascript:;" v-on:mouseup="call('23stop')" v-on:mouseleave="call('23stop')" v-on:mousedown="call('25right')"><img src="images/right.png" /></a></td>
-                            <td></td>
-                        </tr>
-                        <tr>
-                            <td><a href="javascript:;" v-on:mouseup="call('23stop')" v-on:mouseleave="call('23stop')" v-on:mousedown="call('21zoomin')"><img src="images/zoomin.png" /></a></td>
-                            <td></td>
-                            <td><a href="javascript:;" v-on:mouseup="call('23stop')" v-on:mouseleave="call('23stop')" v-on:mousedown="call('27down')"><img src="images/down.png" /></a></td>
-                            <td></td>
-                            <td><a href="javascript:;" v-on:mouseup="call('23stop')" v-on:mouseleave="call('23stop')" v-on:mousedown="call('22zoomout')"><img src="images/zoomout.png" /></a></td>
-                        </tr>
-                    </table>
-                </div>
-            </div>
         </f7-page>
     </template>
     <template id="page-not-found">
@@ -1300,6 +1176,92 @@
             }
         });
 
+        Vue.component('page-device', {
+            template: '#page-device',
+            data() {
+                return {
+                    Device: {
+                        Number: null,
+                        Name: null,
+                        Data: [],
+                        Apis: []
+                    }
+                }
+            },
+            mounted() {
+                var number = this.$f7route.params.number;
+                vm.Device = _.first(_.filter(vm.Node.Devices, function (o) { return o.Number == number; }));
+            },
+            methods: {
+                isSelect: function (device, key) {
+                    return _.filter(device.Data, function (o) { return o.Key == key + '[]' }).length > 0;
+                },
+                getSelect: function (device, key) {
+                    var data = _.first(_.filter(device.Data, function (o) { return o.Key == key + '[]' })).Value;
+                    var result = JSON.parse(data);
+                    return result;
+                },
+                getParameter: function (name) {
+                    console.log(name);
+                    var prop = _.chain(this.Device.Data).filter(function (o) { return o.Key == name; }).first().value();
+                    return prop ? prop.Value : '';
+                },
+                call: function (e) {
+                    if (!$(e.target).valid()) {
+                        return;
+                    }
+                    var url = vm.IoTServer + '/App/Exec/?connectionId=' + vm.ConnectionId + '&node=' + this.getNodeNumber(this.Device.NodeId) + '&' + $(e.target).serialize();
+                    ajax(url);
+                },
+                getNodeNumber(nodeId) {
+                    return _.chain(vm.Nodes).filter(function (o) {
+                        return o.Id === nodeId;
+                    }).first().value().Number;
+                },
+                showData(name) {
+                    if (name === 'hidden' || name.indexOf('rtsp') != -1 || name.indexOf('rtmp') != -1 || name.indexOf('flv') != -1 || name.indexOf('hls') != -1) {
+                        return false;
+                    }
+                    return true;
+                },
+                showApi(api) {
+                    if (this.Device.Name === '摄像头') {
+                        if (this.getParameter('Ptz3DZoomSupport') === '否') {
+                            if (api.Name !== '截屏') {
+                                return false;
+                            }
+                        }
+                    }
+                    return true;
+                },
+                getUrl(type) {
+                    var url = _.chain(this.Device.Data).filter(function (o) { return o.Name === (type + '2'); }).first().value().Value;
+                    url += '?id=' + this.Device.Id;
+                    url += '&host=' + encodeURIComponent(vm.IoTServer);
+                    url += '&node=' + _.chain(vm.Nodes).filter(function (o) { return o.Id === device.Device.NodeId; }).first().value().Number;
+                    if (this.getParameter('Ptz3DZoomSupport') !== '否') {
+                        url += '&ptz=true';
+                    }
+                    return url;
+                },
+                flv() {
+                    this.$f7router.navigate('/camera/', {
+                        props: {
+                            name: this.Device.DisplayName || this.Device.Name,
+                            url: this.getParameter('flv2'),
+                            ptz: this.getParameter('Ptz3DZoomSupport') !== '否',
+                            node: this.getNodeNumber(this.Device.NodeId),
+                            id: this.Device.Id,
+                            hls: this.getParameter('hls2')
+                        }
+                    });
+                }
+            },
+            destroyed() {
+                device = null;
+            },
+        });
+
         Vue.component('page-not-found', {
             template: '#page-not-found'
         });
@@ -1326,6 +1288,10 @@
                                 path: '/node/:number/name/:name',
                                 component: 'page-node'
                             },
+                            {
+                                path: '/device/:number/name/:name',
+                                component: 'page-device'
+                            },
                             {
                                 path: '(.*)',
                                 component: 'page-not-found',