From 4080ad2cdbef1a870c4e095dd687ae76d38659d2 Mon Sep 17 00:00:00 2001
From: zhengpengju <zhengpengju4905@dingtalk.com>
Date: Fri, 11 Sep 2020 09:11:33 +0800
Subject: [PATCH] fix ui

Former-commit-id: ca7a5e700998b30ec2118c87a84d6bcdfd6673ab
Former-commit-id: 6219ddd5492f16d80a0fc2fb92db69044ae83a51
---
 projects/IoTCenter/wwwroot/index.html         |  4 ++-
 projects/WebSPA/wwwroot/images/switch3.svg    | 21 +++++++++++++
 .../wwwroot/pages/iot/device/color-light.html |  4 +--
 .../wwwroot/pages/iot/device/socket.html      |  4 +--
 .../wwwroot/pages/iot/device/switch.html      |  4 +--
 .../wwwroot/pages/iot/device/switch3-1.html   | 31 +++++++++++++++++++
 .../wwwroot/pages/iot/device/switch3.html     | 12 +++----
 projects/WebSPA/wwwroot/pages/iot/node.html   |  4 +--
 8 files changed, 69 insertions(+), 15 deletions(-)
 create mode 100644 projects/WebSPA/wwwroot/images/switch3.svg
 create mode 100644 projects/WebSPA/wwwroot/pages/iot/device/switch3-1.html
diff --git a/projects/IoTCenter/wwwroot/index.html b/projects/IoTCenter/wwwroot/index.html
index 9678e057..a9b1409c 100644
--- a/projects/IoTCenter/wwwroot/index.html
+++ b/projects/IoTCenter/wwwroot/index.html
@@ -13,6 +13,8 @@ html{
 }
 body{
   height:100%;
+  margin: 0;
+  padding:0;
 }
 .Center-Container {
   background-color: #35A9FE;
@@ -33,7 +35,7 @@ body{
 </head>
 <body class="Center-Container">
 <img src="loading.svg?v=202004211141" class="Absolute-Center" />
-<p style="display:block;position:absolute;text-align:center;padding:30px;color:#FFF;">Version 202009010853</p>
+<p style="display:block;position:absolute;width:100%;text-align:center;padding:0px;color:#FFF;bottom:0;">Version 202009010853</p>
 </body>
 <script>
 /**
diff --git a/projects/WebSPA/wwwroot/images/switch3.svg b/projects/WebSPA/wwwroot/images/switch3.svg
new file mode 100644
index 00000000..39383667
--- /dev/null
+++ b/projects/WebSPA/wwwroot/images/switch3.svg
@@ -0,0 +1,21 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 21.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 768 665.6" style="enable-background:new 0 0 768 665.6;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#35A9FE;}
+</style>
+<g>
+	<path class="st0" d="M716.8,0H51.2C23,0,0,23,0,51.2v563.2c0,28.2,23,51.2,51.2,51.2h665.6c28.2,0,51.2-23,51.2-51.2V51.2
+		C768,23,745,0,716.8,0L716.8,0z M51.2,614.4V51.2h665.6l0.1,563.2H51.2z M51.2,614.4"/>
+	<path class="st0" d="M640,76.8H128c-28.2,0-51.2,23-51.2,51.2v409.6c0,28.2,23,51.2,51.2,51.2h512c28.2,0,51.2-23,51.2-51.2V128
+		C691.2,99.8,668.2,76.8,640,76.8L640,76.8z M128,537.6V128h512l0.1,409.6H128z M128,537.6"/>
+	<path class="st0" d="M257.8,120.6v425.7c0,23.5,11.5,42.6,25.6,42.6c14.1,0,25.6-19.1,25.6-42.6V120.6c0-23.5-11.5-42.6-25.6-42.6
+		C269.3,78,257.8,97.1,257.8,120.6L257.8,120.6z M283.4,182.2"/>
+	<path class="st0" d="M449.8,119.6v425.7c0,23.5,11.5,42.6,25.6,42.6c14.1,0,25.6-19.1,25.6-42.6V119.6c0-23.5-11.5-42.6-25.6-42.6
+		C461.3,77,449.8,96.1,449.8,119.6L449.8,119.6z M475.4,181.2"/>
+	<rect x="158.1" y="149" class="st0" width="62.8" height="37"/>
+	<rect x="352.6" y="149" class="st0" width="62.8" height="37"/>
+	<rect x="541.6" y="149" class="st0" width="62.8" height="37"/>
+</g>
+</svg>
diff --git a/projects/WebSPA/wwwroot/pages/iot/device/color-light.html b/projects/WebSPA/wwwroot/pages/iot/device/color-light.html
index ebc9aa89..b7f1358d 100644
--- a/projects/WebSPA/wwwroot/pages/iot/device/color-light.html
+++ b/projects/WebSPA/wwwroot/pages/iot/device/color-light.html
@@ -18,8 +18,8 @@
                     </div>
                 </div>
                 <div class="col-2 align-self-center text-center">
-                    <img style="height:32px;" v-if="getDeviceDataValue(device,'状态')==='开'" v-on:click="execApi(device.number,'/Socket/Off')" src="config.apigateway+'/IoTCenter/images/on.png'" />
-                    <img style="height:32px;" v-else="getDeviceDataValue(device,'状态')==='关'" v-on:click="execApi(device.number,'/Socket/On')" src="config.apigateway+'/IoTCenter/images/off.png'" />
+                    <img style="height:32px;" v-if="getDeviceDataValue(device,'状态')==='开'" v-on:click="execApi(device.number,'/Socket/Off')" src="config.apigateway+'/IoTCenter/images/on.svg'" />
+                    <img style="height:32px;" v-else="getDeviceDataValue(device,'状态')==='关'" v-on:click="execApi(device.number,'/Socket/On')" src="config.apigateway+'/IoTCenter/images/off.svg'" />
                 </div>
             </div>
         </div>
diff --git a/projects/WebSPA/wwwroot/pages/iot/device/socket.html b/projects/WebSPA/wwwroot/pages/iot/device/socket.html
index d82f037d..45c7a9c7 100644
--- a/projects/WebSPA/wwwroot/pages/iot/device/socket.html
+++ b/projects/WebSPA/wwwroot/pages/iot/device/socket.html
@@ -14,8 +14,8 @@
                     <div class="row" style="line-height:28px;">
                         <span class="badge badge-info" style="line-height:26px; margin:0 10px 0 0" v-if="getDeviceDataValue(this.device, '电量')">{{electricity}} kW‧h</span>
                         <span class="badge badge-info" style="line-height:26px; margin:0 10px 0 0" >{{power}} W</span>
-                        <img style="height:32px;" v-if="getDeviceDataValue(device,'状态')==='开'" v-on:click="execApi(device.number,'/Socket/Off')" :src="config.apigateway+'/IoTCenter/images/on.png'" />
-                        <img style="height:32px;" v-else="getDeviceDataValue(device,'状态')==='关'" v-on:click="execApi(device.number,'/Socket/On')" :src="config.apigateway+'/IoTCenter/images/off.png'" />
+                        <img style="height:32px;" v-if="getDeviceDataValue(device,'状态')==='开'" v-on:click="execApi(device.number,'/Socket/Off')" :src="config.apigateway+'/IoTCenter/images/on.svg'" />
+                        <img style="height:32px;" v-else="getDeviceDataValue(device,'状态')==='关'" v-on:click="execApi(device.number,'/Socket/On')" :src="config.apigateway+'/IoTCenter/images/off.svg'" />
                     </div>
                 </div>
             </div>
diff --git a/projects/WebSPA/wwwroot/pages/iot/device/switch.html b/projects/WebSPA/wwwroot/pages/iot/device/switch.html
index 9d2df4f8..c04360f6 100644
--- a/projects/WebSPA/wwwroot/pages/iot/device/switch.html
+++ b/projects/WebSPA/wwwroot/pages/iot/device/switch.html
@@ -12,8 +12,8 @@
                 </div>
                 <div class="col-9 align-self-center">
                     <div class="row" style="line-height:28px;">
-                        <img style="height:32px;" v-if="getDeviceDataValue(device,'状态')=='开'" v-on:click="execApi(device.number,'/Switch/Off')" :src="config.apigateway+'/IoTCenter/images/on.png'" />
-                        <img style="height:32px;" v-if="getDeviceDataValue(device,'状态')=='关'" v-on:click="execApi(device.number,'/Switch/On')" :src="config.apigateway+'/IoTCenter/images/off.png'" />
+                        <img style="height:32px;" v-if="getDeviceDataValue(device,'状态')=='开'" v-on:click="execApi(device.number,'/Switch/Off')" :src="config.apigateway+'/IoTCenter/images/on.svg'" />
+                        <img style="height:32px;" v-if="getDeviceDataValue(device,'状态')=='关'" v-on:click="execApi(device.number,'/Switch/On')" :src="config.apigateway+'/IoTCenter/images/off.svg'" />
                     </div>
                 </div>
             </div>
diff --git a/projects/WebSPA/wwwroot/pages/iot/device/switch3-1.html b/projects/WebSPA/wwwroot/pages/iot/device/switch3-1.html
new file mode 100644
index 00000000..bdab8e33
--- /dev/null
+++ b/projects/WebSPA/wwwroot/pages/iot/device/switch3-1.html
@@ -0,0 +1,31 @@
+﻿<template>
+    <div class="card" style="box-sizing:border-box;height:150px;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>
+            <span class="float-right text-danger" v-else><i class="ion ion-ios-wifi"></i></span>
+        </div>
+        <div class="card-body">
+            <div class="row" style="height:100%;width:300px;margin: 0 auto;">
+                <div class="col-4 align-self-center">
+                    <img class="mh-100" :src="urlContent(device.product.image)" style="width:48px;" />
+                </div>
+                <div class="col-8 align-self-center">
+                    <div class="row" style="line-height:28px;">
+                        <img style="height:32px;" v-if="getDeviceDataValue(device,'L1状态')=='开'" v-on:click="execApi(device.number,'/Switch3/L1Off')" src="/IoTCenter/images/on.svg" />
+                        <img style="height:32px;" v-if="getDeviceDataValue(device,'L1状态')=='关'" v-on:click="execApi(device.number,'/Switch3/L1On')" src="/IoTCenter/images/off.svg" />
+                        <img style="height:32px;" v-if="getDeviceDataValue(device,'L2状态')=='开'" v-on:click="execApi(device.number,'/Switch3/L2Off')" src="/IoTCenter/images/on.svg" />
+                        <img style="height:32px;" v-if="getDeviceDataValue(device,'L2状态')=='关'" v-on:click="execApi(device.number,'/Switch3/L2On')" src="/IoTCenter/images/off.svg" />
+                        <img style="height:32px;" v-if="getDeviceDataValue(device,'L3状态')=='开'" v-on:click="execApi(device.number,'/Switch3/L3Off')" src="/IoTCenter/images/on.svg" />
+                        <img style="height:32px;" v-if="getDeviceDataValue(device,'L3状态')=='关'" v-on:click="execApi(device.number,'/Switch3/L3On')" src="/IoTCenter/images/off.svg" />
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+<script>
+    ({
+        props: ['device']
+    });
+</script>
\ No newline at end of file
diff --git a/projects/WebSPA/wwwroot/pages/iot/device/switch3.html b/projects/WebSPA/wwwroot/pages/iot/device/switch3.html
index f8f6b08c..82bf9690 100644
--- a/projects/WebSPA/wwwroot/pages/iot/device/switch3.html
+++ b/projects/WebSPA/wwwroot/pages/iot/device/switch3.html
@@ -12,12 +12,12 @@
                 </div>
                 <div class="col-4 align-self-center">
                     <div class="row" style="line-height:28px;">
-                        <img style="height:32px;" v-if="getDeviceDataValue(device,'L1状态')=='开'" v-on:click="execApi(device.number,'/Switch3/L1Off')" :src="config.apigateway+'/IoTCenter/images/on.png'" />
-                        <img style="height:32px;" v-if="getDeviceDataValue(device,'L1状态')=='关'" v-on:click="execApi(device.number,'/Switch3/L1On')" :src="config.apigateway+'/IoTCenter/images/off.png'" />
-                        <img style="height:32px;" v-if="getDeviceDataValue(device,'L2状态')=='开'" v-on:click="execApi(device.number,'/Switch3/L2Off')" :src="config.apigateway+'/IoTCenter/images/on.png'" />
-                        <img style="height:32px;" v-if="getDeviceDataValue(device,'L2状态')=='关'" v-on:click="execApi(device.number,'/Switch3/L2On')" :src="config.apigateway+'/IoTCenter/images/off.png'" />
-                        <img style="height:32px;" v-if="getDeviceDataValue(device,'L3状态')=='开'" v-on:click="execApi(device.number,'/Switch3/L3Off')" :src="config.apigateway+'/IoTCenter/images/on.png'" />
-                        <img style="height:32px;" v-if="getDeviceDataValue(device,'L3状态')=='关'" v-on:click="execApi(device.number,'/Switch3/L3On')" :src="config.apigateway+'/IoTCenter/images/off.png'" />
+                        <img style="height:32px;" v-if="getDeviceDataValue(device,'L1状态')=='开'" v-on:click="execApi(device.number,'/Switch3/L1Off')" :src="config.apigateway+'/IoTCenter/images/on.svg'" />
+                        <img style="height:32px;" v-if="getDeviceDataValue(device,'L1状态')=='关'" v-on:click="execApi(device.number,'/Switch3/L1On')" :src="config.apigateway+'/IoTCenter/images/off.svg'" />
+                        <img style="height:32px;" v-if="getDeviceDataValue(device,'L2状态')=='开'" v-on:click="execApi(device.number,'/Switch3/L2Off')" :src="config.apigateway+'/IoTCenter/images/on.svg'" />
+                        <img style="height:32px;" v-if="getDeviceDataValue(device,'L2状态')=='关'" v-on:click="execApi(device.number,'/Switch3/L2On')" :src="config.apigateway+'/IoTCenter/images/off.svg'" />
+                        <img style="height:32px;" v-if="getDeviceDataValue(device,'L3状态')=='开'" v-on:click="execApi(device.number,'/Switch3/L3Off')" :src="config.apigateway+'/IoTCenter/images/on.svg'" />
+                        <img style="height:32px;" v-if="getDeviceDataValue(device,'L3状态')=='关'" v-on:click="execApi(device.number,'/Switch3/L3On')" :src="config.apigateway+'/IoTCenter/images/off.svg'" />
                     </div>
                 </div>
             </div>
diff --git a/projects/WebSPA/wwwroot/pages/iot/node.html b/projects/WebSPA/wwwroot/pages/iot/node.html
index 61bb8804..4b4640d1 100644
--- a/projects/WebSPA/wwwroot/pages/iot/node.html
+++ b/projects/WebSPA/wwwroot/pages/iot/node.html
@@ -166,8 +166,8 @@
                                 </div>
                                 <div class="col-5 align-self-center">
                                     <div class="row" style="line-height:28px;">
-                                        <img style="height:32px;width:32px;padding:5px;border:solid #cccccc 1px;border-radius:50%;margin-left: 0px;" v-if="getDeviceDataValue(device,'状态')==='开'" v-on:click="execApi(device.number,'/Socket/Off')" :src="config.apigateway+'/IoTCenter/images/on.png'" />
-                                        <img style="height:32px;width:32px;padding:5px;border:solid #cccccc 1px;border-radius:50%;margin-left: 0px;" v-else="getDeviceDataValue(device,'状态')==='关'" v-on:click="execApi(device.number,'/Socket/On')" :src="config.apigateway+'/IoTCenter/images/off.png'" />
+                                        <img style="height:32px;width:32px;padding:5px;border:solid #cccccc 1px;border-radius:50%;margin-left: 0px;" v-if="getDeviceDataValue(device,'状态')==='开'" v-on:click="execApi(device.number,'/Socket/Off')" :src="/images/on.svg'" />
+                                        <img style="height:32px;width:32px;padding:5px;border:solid #cccccc 1px;border-radius:50%;margin-left: 0px;" v-else="getDeviceDataValue(device,'状态')==='关'" v-on:click="execApi(device.number,'/Socket/On')" :src="/images/off.svg'" />
                                     </div>
                                 </div>
                             </div>
