update

Former-commit-id: 58fad84103c6cdbfec85c6f143a4c4bb440d97de

projects/WebApp/wwwroot/css/app.css

@@ -765,7 +765,7 @@ img {
     width: 100%;
 }
 
-.ir table,.ir .table {
+.ir table {
     border-collapse: separate;
     margin: 5px auto;
     padding: 5px;
@@ -777,11 +777,12 @@ img {
         padding: 2px;
         text-align: center;
     }
-    .ir .table button{
-        margin:2px;
-    }
+
 .weui-grid__icon {
     width: 48px;
     height: 48px;
-    margin: 0 auto;
+    margin: 5px auto;
+}
+.card .weui-bar__item_on{
+    background-color:#eee;
 }

projects/WebApp/wwwroot/index.html

@@ -32,6 +32,8 @@
     <script src="lib/vuex/vuex.min.js"></script>
     <script src="lib/mint-ui/index.js"></script>
     <script src="lib/signalr/signalr.min.js"></script>
+    <script src="lib/flv.js/flv.min.js"></script>
+    <script src="lib/WXInlinePlayer/index.js"></script>
     <script src="js/util.js"></script>
     <script src="js/store.js"></script>
     <script src="js/message.js"></script>

projects/WebApp/wwwroot/js/iot.js

@@ -82,4 +82,9 @@ Vue.component('iot-ir', function (resolve, reject) {
     axios.get("/pages/iot/device/ir.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));
+    });
 });

projects/WebApp/wwwroot/pages/iot/device.html

@@ -5,7 +5,7 @@
         </router-link>
     </mt-header>
     <div class="row">
-        <div class="col col-md-12" v-if="device">
+        <div class="col" v-if="device">
             <iot-gateway v-if="device.name==='网关'" v-bind:device="device"></iot-gateway>
             <iot-light v-else-if="device.name==='光强检测器'" v-bind:device="device"></iot-light>
             <iot-humiture v-else-if="device.name==='温湿度传感器'" v-bind:device="device"></iot-humiture>
@@ -15,6 +15,7 @@
             <iot-switch3 v-else-if="device.name==='三路开关'" v-bind:device="device"></iot-switch3>
             <iot-socket v-else-if="device.name==='智能插座'" v-bind:device="device"></iot-socket>
             <iot-ir v-else-if="device.name==='红外转发器'" v-bind:device="device"></iot-ir>
+            <iot-camera v-else-if="device.name==='摄像头'" v-bind:device="device"></iot-camera>
         </div>
     </div>
 </div>

projects/WebApp/wwwroot/pages/iot/device/camera.html

@@ -0,0 +1,47 @@
+<template>
+    <div class="card" style="box-sizing:border-box;height:150px;margin:10px;">
+        <div class="card-header">
+            {{device.displayName}}
+        </div>
+        <div class="card-body" style="padding:0;">
+            <div class="row" style="height:240px;width:320px;margin: 0 auto;">
+                <div class="col">
+                    <video :data-number="device.number" v-if="flvjs.isSupported()"></video>
+                    <canvas :data-number="device.number" v-else></canvas>
+                </div>
+                <div class="col col-md-8 col-sm-8 align-self-center">
+                    <div class="row" style="line-height:28px;">
+                        <img style="height:32px;" v-on:click="execApi(device.number,'/Curtain/On')" src="/IoTCenter/images/left.png" />
+                        <img style="height:32px;" v-on:click="execApi(device.number,'/Curtain/Stop')" src="/IoTCenter/images/stop.png" />
+                        <img style="height:32px;" v-on:click="execApi(device.number,'/Curtain/Off')" src="/IoTCenter/images/right.png" />
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+<script>
+    ({
+        props: ['device'],
+        mounted: function () {
+            if (flvjs.isSupported()) {
+                playByFlvJs();
+            }
+            else {
+                playByWXInlinePlayer();
+            }
+        },
+        methods: {
+            playByFlvJs: function () {
+
+            },
+            playByWXInlinePlayer: function () {
+            }
+        },
+        computed: {
+            url: function () {
+                return getDeviceDataValue(this.device,'flv');
+            }
+        }
+    });
+</script>

projects/WebApp/wwwroot/pages/iot/device/ir.html

@@ -1,5 +1,5 @@
 <template>
-    <div class="card"  style="min-height:200px;">
+    <div class="card" style="box-sizing:border-box;height:600px;margin:10px;">
         <div class="card-header">
             {{device.displayName}}
             <span class="float-right text-success" v-if="device.isOnline"><i class="ion ion-ios-wifi"></i></span>
@@ -327,9 +327,7 @@
                         </table>
                     </div>
                     <div class="weui-tab__content">
-                        <div class="table">
-                            <button type="button" class="weui-btn weui-btn_mini weui-btn_default">btn</button>
-                        </div>
+                        <button type="button" class="weui-btn weui-btn_mini weui-btn_default m-2">btn</button>
                     </div>
                 </div>
             </div>

projects/WebApp/wwwroot/pages/iot/node.html

@@ -23,15 +23,15 @@
             <iot-light v-bind:device="device"></iot-light>
         </div>
         <!--温湿度传感器-->
-        <div v-for="device in getDevices('温湿度传感器')" class="col"  style="min-width:320px;">
+        <div v-for="device in getDevices('温湿度传感器')" class="col" style="min-width:320px;">
             <iot-humiture v-bind:device="device"></iot-humiture>
         </div>
         <!--烟雾报警器-->
-        <div v-for="device in getDevices('烟雾报警器')" class="col"  style="min-width:320px;">
+        <div v-for="device in getDevices('烟雾报警器')" class="col" style="min-width:320px;">
             <iot-smoke v-bind:device="device"></iot-smoke>
         </div>
         <!--人体感应器-->
-        <div v-for="device in getDevices('人体感应器')" class="col"  style="min-width:320px;">
+        <div v-for="device in getDevices('人体感应器')" class="col" style="min-width:320px;">
             <iot-person v-bind:device="device"></iot-person>
         </div>
     </div>
@@ -51,8 +51,15 @@
             <iot-socket v-bind:device="device"></iot-socket>
         </div>
     </div>
+    <div class="col col-md-12 my-2 px-3">遥控器</div>
+    <!--红外转发器-->
+    <div class="row">
+        <div v-for="device in getDevices('红外转发器')" class="col" style="min-width:320px;">
+            <iot-ir v-bind:device="device"></iot-ir>
+        </div>
+    </div>
     <!--test-->
-    <hr />
+    <!--<hr />
     <div class="row" v-if="node">
         <div v-for="device in node.devices" class="col-lg-3 col col-md-4 col-sm-6">
             <div class="weui-grid__icon">
@@ -60,5 +67,5 @@
             </div>
             <p class="weui-grid__label">{{device.displayName}}</p>
         </div>
-    </div>
+    </div>-->
 </div>

projects/WebApp/wwwroot/pages/iot/product.html

@@ -4,8 +4,8 @@
             <mt-button icon="back">back</mt-button>
         </router-link>
     </mt-header>
-    <div class="row">
-        <router-link v-if="product" v-for="device in product.devices" :to="{path:'/pages/iot/device',query:{number:device.number}}" class="col-lg-3 col-md-4 col-sm-6 p-3">
+    <div class="row" v-if="product">
+        <router-link v-for="device in product.devices" :to="{path:'/pages/iot/device',query:{number:device.number}}" class="col-lg-3 col-md-4 col-sm-6 p-3">
             <div class="weui-grid__icon">
                 <img :src="'/IoTCenter'+product.image" />
             </div>