diff --git a/projects/WebApp/wwwroot/js/iot.js b/projects/WebApp/wwwroot/js/iot.js
index 1bcc977a..f426d294 100644
--- a/projects/WebApp/wwwroot/js/iot.js
+++ b/projects/WebApp/wwwroot/js/iot.js
@@ -22,7 +22,7 @@ function getDeviceDataUnit(device, name) {
 function getDeviceData(device, name) {
     var data = Enumerable.from(device.data).where(o => o.name === name).firstOrDefault();
     if (data) {
-        return data['value'] + data['unit'] ? ' ' + data['unit']:'';
+        return data['value'] + ' ' + data['unit'];
     }
     return null;
 }
@@ -92,4 +92,9 @@ 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/WebApp/wwwroot/pages/iot/device.html b/projects/WebApp/wwwroot/pages/iot/device.html
index 823bfa25..b626c31b 100644
--- a/projects/WebApp/wwwroot/pages/iot/device.html
+++ b/projects/WebApp/wwwroot/pages/iot/device.html
@@ -17,6 +17,7 @@
             <iot-ir v-else-if="device.name==='红外转发器'" v-bind:device="device" v-bind:edit="true"></iot-ir>
             <iot-color-light v-else-if="device.name==='调色灯'" v-bind:device="device" v-bind:edit="true"></iot-color-light>
             <iot-camera v-else-if="device.name==='摄像头'" v-bind:device="device" v-bind:edit="true"></iot-camera>
+            <iot-serial-port v-else-if="device.name==='串口控制器'" v-bind:device="device" v-bind:edit="true"></iot-serial-port>
         </div>
     </div>
 </div>
\ No newline at end of file
diff --git a/projects/WebApp/wwwroot/pages/iot/device/color-light.html b/projects/WebApp/wwwroot/pages/iot/device/color-light.html
index aca9885c..f7dc5057 100644
--- a/projects/WebApp/wwwroot/pages/iot/device/color-light.html
+++ b/projects/WebApp/wwwroot/pages/iot/device/color-light.html
@@ -8,13 +8,13 @@
         <div class="card-body">
             <div class="row" style="height:100%;width:300px;margin: 0 auto;">
                 <div class="col col-md-4 col-sm-4 align-self-center">
-                    <div class="mh-100" :style="'width:48px;height:48px;background:'+hsl"></div>
+                    <div class="mh-100" :style="'width:48px;height:48px;border-radius: 10px;background:'+hsl"></div>
                 </div>
                 <div class="col col-md-8 col-sm-8 align-self-center">
                     <div class="row" style="height:58px;">
-                        <input v-on:change="changeHue($event.target.value)" type="range" min="0" step="1" max="255" name="hue" :value="hue" style="height:10px;-webkit-appearance:none;background: -webkit-linear-gradient(left, #F00 0%, #FF0 16.66%, #0F0 33.33%, #0FF 50%,#00F 66.66%, #F0F 83.33%, #F00 100%);" />
-                        <input v-on:change="changeSaturation($event.target.value)" type="range" min="0" step="1" max="254" name="saturation" :value="saturation" :style="'height:10px;-webkit-appearance:none;background: -webkit-linear-gradient(left, #fff 0%, '+color+' 100%);'"/>
-                        <input v-on:change="changeBrightness($event.target.value)" type="range" min="0" step="1" max="254" name="brightness" :value="brightness" style="height:10px;-webkit-appearance:none;background: -webkit-linear-gradient(left, #000 0%, #fff 100%);"/>
+                        <input v-on:change="changeHue($event.target.value)" type="range" min="0" step="1" max="255" name="hue" :value="hue" style="height:16px;-webkit-appearance:none;background: -webkit-linear-gradient(left, #F00 0%, #FF0 16.66%, #0F0 33.33%, #0FF 50%,#00F 66.66%, #F0F 83.33%, #F00 100%);" />
+                        <input v-on:change="changeSaturation($event.target.value)" type="range" min="0" step="1" max="254" name="saturation" :value="saturation" :style="'height:16px;-webkit-appearance:none;background: -webkit-linear-gradient(left, #fff 0%, '+color+' 100%);'"/>
+                        <input v-on:change="changeBrightness($event.target.value)" type="range" min="0" step="1" max="254" name="brightness" :value="brightness" style="height:16px;-webkit-appearance:none;background: -webkit-linear-gradient(left, #000 0%, #fff 100%);"/>
                     </div>
                 </div>
             </div>
diff --git a/projects/WebApp/wwwroot/pages/iot/device/ir.html b/projects/WebApp/wwwroot/pages/iot/device/ir.html
index 80464433..be964e8e 100644
--- a/projects/WebApp/wwwroot/pages/iot/device/ir.html
+++ b/projects/WebApp/wwwroot/pages/iot/device/ir.html
@@ -353,13 +353,30 @@
                 </div>
             </div>
             <div class="card-body">
-                <div class="row p-2" v-for="button in getCustomButtons()">
-                    <input class="form-control col" type="text" name="name" :value="button.name" placeholder="名称" />
-                    <input class="form-control col" type="text" name="value" :value="button.value" placeholder="按键" />
-                    <input class="form-control col" type="text" name="order" :value="button.order" placeholder="序号" />
-                    <button type="button" class="weui-btn weui-btn_mini weui-btn_default px-2 mx-2" v-on:click="study(button.value)">学习</button>
-                    <button type="button" class="weui-btn weui-btn_mini weui-btn_default px-2 mx-2" v-on:click="test(button.value)">测试</button>
-                    <button type="button" class="weui-btn weui-btn_mini weui-btn_default px-2 mx-2" v-on:click="remove(button.name)">移除</button>
+                <div class="weui-cells weui-cells_form" v-for="button in getCustomButtons()">
+                    <div class="weui-cell">
+                        <div class="weui-cell__hd"><label class="weui-label">名称</label></div>
+                        <div class="weui-cell__bd">
+                            <input class="weui-input" type="text" name="name" placeholder="名称" :value="button.name">
+                        </div>
+                    </div>
+                    <div class="weui-cell">
+                        <div class="weui-cell__hd"><label class="weui-label">按键</label></div>
+                        <div class="weui-cell__bd">
+                            <input class="weui-input" type="text" name="value" placeholder="名称" :value="button.value">
+                        </div>
+                    </div>
+                    <div class="weui-cell">
+                        <div class="weui-cell__hd"><label class="weui-label">序号</label></div>
+                        <div class="weui-cell__bd">
+                            <input class="weui-input" type="text" name="order" placeholder="名称" :value="button.order">
+                        </div>
+                    </div>
+                    <div class="text-center">
+                        <a href="javascript:;" class="weui-btn weui-btn_mini weui-btn_default px-2" v-on:click="study(button.value)">学习</a>
+                        <a href="javascript:;" class="weui-btn weui-btn_mini weui-btn_default px-2" v-on:click="test(button.value)">测试</a>
+                        <a href="javascript:;" class="weui-btn weui-btn_mini weui-btn_default px-2" v-on:click="remove(button.name)">移除</a>
+                    </div>
                 </div>
             </div>
         </div>
diff --git a/projects/WebApp/wwwroot/pages/iot/device/serial-port.html b/projects/WebApp/wwwroot/pages/iot/device/serial-port.html
new file mode 100644
index 00000000..2ae05a1a
--- /dev/null
+++ b/projects/WebApp/wwwroot/pages/iot/device/serial-port.html
@@ -0,0 +1,245 @@
+<template>
+    <div>
+        <div class="card" style="box-sizing:border-box;height:550px;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" style="padding:0;">
+                <div class="button-sp-area cell" style="width:100%;height:450px;overflow:auto;">
+                    <button v-for="button in getCustomButtons()" type="button" class="weui-btn weui-btn_mini weui-btn_default px-2 m-2" :value="button.value" v-on:click="send($event.target.value,5)">{{button.name}}</button>
+                </div>
+            </div>
+        </div>
+        <div v-if="edit" class="card" style="box-sizing:border-box;margin:10px;">
+            <div class="card-header">
+                自定义指令
+                <div class="float-right">
+                    <button type="button" class="weui-btn weui-btn_mini weui-btn_default px-2" v-on:click="add()">添加</button>
+                    <button type="button" class="weui-btn weui-btn_mini weui-btn_default px-2" v-on:click="save($event)">保存</button>
+                </div>
+            </div>
+            <div class="card-body">
+                <div class="weui-cells weui-cells_form" v-for="button in getCustomButtons()">
+                    <div class="weui-cell">
+                        <div class="weui-cell__hd"><label class="weui-label">名称</label></div>
+                        <div class="weui-cell__bd">
+                            <input class="weui-input" type="text" name="name" placeholder="名称" :value="button.name">
+                        </div>
+                    </div>
+                    <div class="weui-cell">
+                        <div class="weui-cell__hd"><label class="weui-label">串口</label></div>
+                        <div class="weui-cell__bd">
+                            <input class="weui-input" type="text" name="portName" :value="button.portName" placeholder="串口" />
+                        </div>
+                    </div>
+                    <div class="weui-cell">
+                        <div class="weui-cell__hd"><label class="weui-label">波特率</label></div>
+                        <div class="weui-cell__bd">
+                            <input class="weui-input" type="text" name="baudRate" :value="button.baudRate" placeholder="波特率" />
+                        </div>
+                    </div>
+                    <div class="weui-cell">
+                        <div class="weui-cell__hd"><label class="weui-label">数据位</label></div>
+                        <div class="weui-cell__bd">
+                            <input class="weui-input" type="text" name="dataBits" :value="button.dataBits" placeholder="数据位" />
+                        </div>
+                    </div>
+                    <div class="weui-cell">
+                        <div class="weui-cell__hd"><label class="weui-label">校验位</label></div>
+                        <div class="weui-cell__bd">
+                            <input class="weui-input" type="text" name="parity" :value="button.parity" placeholder="校验位" />
+                        </div>
+                    </div>
+                    <div class="weui-cell">
+                        <div class="weui-cell__hd"><label class="weui-label">停止位</label></div>
+                        <div class="weui-cell__bd">
+                            <input class="weui-input" type="text" name="stopBits" :value="button.stopBits" placeholder="停止位" />
+                        </div>
+                    </div>
+                    <div class="weui-cell">
+                        <div class="weui-cell__hd"><label class="weui-label">消息</label></div>
+                        <div class="weui-cell__bd">
+                            <input class="weui-input" type="text" name="message" :value="button.message" placeholder="消息" />
+                        </div>
+                    </div>
+                    <div class="weui-cell">
+                        <div class="weui-cell__hd"><label class="weui-label">序号</label></div>
+                        <div class="weui-cell__bd">
+                            <input class="weui-input" type="text" name="order" :value="button.order" placeholder="序号" />
+                        </div>
+                    </div>
+                    <div class="text-center">
+                        <a href="javascript:;" class="weui-btn weui-btn_mini weui-btn_default" v-on:click="test(button.value)">测试</a>
+                        <a href="javascript:;" class="weui-btn weui-btn_mini weui-btn_default" v-on:click="remove(button.name)">移除</a>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+<script>
+    ({
+        props: ['device', 'edit'],
+        mounted: function () {
+            weui.tab('.weui-tab');
+        },
+        methods: {
+            changePattern: function (v) {
+                this.change(v, 0, 480, 120);
+            },
+            changeDirection(v) {
+                this.change(v, 0, 60, 60);
+            },
+            changeWind(v) {
+                this.change(v, 0, 45, 15);
+            },
+            changePower: function (v) {
+                var oldValue = parseInt(v);
+                if (oldValue === 1) {
+                    this.send(3, 1);
+                    getData(this.device, '按键').value = 3;
+                }
+                else if (oldValue === 2) {
+                    this.send(1, 1);
+                    getData(this.device, '按键').value = 1;
+                }
+            },
+            changeTemperature: function (v, step) {
+                var oldValue = parseInt(v);
+                var min = 1;
+                var max = 15;
+                var newValue = oldValue + step;
+                if (step > 0 && newValue > max) {
+                    newValue = max;
+                }
+                else if (step < 0 && newValue < min) {
+                    newValue = min;
+                }
+                var newCode = this.code - oldValue + newValue;
+                this.send(newCode, 1);
+                getData(this.device, '按键').value = newCode;
+            },
+            change: function (v, min, max, step) {
+                alert(v);
+                var oldValue = parseInt(v);
+                var newValue = oldValue + step;
+                if (newValue > max) {
+                    newValue = min;
+                }
+                var newCode = this.code - oldValue + newValue;
+                this.send(newCode, 1);
+                getData(this.device, '按键').value = newCode;
+            },
+            send: function (value, type) {
+                execApi(this.device.number, '/Ir/Send', 'type=' + type + '&code=' + value);
+            },
+            getCustomButtons: function () {
+                return Enumerable.from(JSON.parse(getDeviceDataValue(this.device, "指令")))
+                    .orderBy(function (o) { return o.order; })
+                    .toArray();
+            },
+            add: function () {
+                var data = Enumerable.from(this.device.data)
+                    .where(function (o) { return o.name === "指令"; })
+                    .firstOrDefault();
+                var buttons = this.getCustomButtons();
+                var newBtn = { name: "测试", value: "603", order: 100 };
+                buttons.push(newBtn);
+                data.value = JSON.stringify(buttons);
+            },
+            remove: function (name) {
+                var data = Enumerable.from(this.device.data)
+                    .where(function (o) { return o.name === "指令"; })
+                    .firstOrDefault();
+                var buttons = this.getCustomButtons();
+                for (var i = buttons.length - 1; i >= 0; i--) {
+                    if (buttons[i].name === name) {
+                        buttons.splice(i, 1);
+                        break;
+                    }
+                }
+                data.value = JSON.stringify(buttons);
+            },
+            study: function (code) {
+                execApi(this.device.number, '/Ir/Study', 'type=' + 5 + '&code=' + code);
+            },
+            test: function (code) {
+                execApi(this.device.number, '/Ir/Send', 'type=' + 5 + '&code=' + code);
+            },
+            save: function (e) {
+                var buttons = [];
+                $(e.target).parents('.card').find('.row').each(function () {
+                    buttons.push({
+                        name: $(this).find("input[name='name']").val(),
+                        value: $(this).find("input[name='value']").val(),
+                        order: $(this).find("input[name='order']").val()
+                    });
+                });
+                var value = JSON.stringify(buttons);
+                execApi(this.device.number, '/Ir/Buttons', 'buttons=' + value);
+            }
+        },
+        computed: {
+            code: function () {
+                return getDeviceDataValue(this.device, '按键');
+            },
+            pattern: function () {
+                var code = this.code;
+                var pattern = { name: '制冷', value: 0 };
+                if (code > 480 + 2) {
+                    pattern = { name: '通风', value: 480 };
+                }
+                else if (code > 360 + 2) {
+                    pattern = { name: '抽湿', value: 360 };
+                }
+                else if (code > 240 + 2) {
+                    pattern = { name: '制热', value: 240 };
+                }
+                else if (code > 120 + 2) {
+                    pattern = { name: '自动', value: 120 };
+                }
+                return pattern;
+            },
+            direction: function () {
+                var code = this.code - this.pattern.value;
+                var direction = { name: '自动', value: 0 };;
+                if (code > 60 + 2) {
+                    direction = { name: '手动', value: 60 };
+                }
+                return direction;
+            },
+            wind: function () {
+                var code = this.code - this.pattern.value - this.direction.value;
+                var wind = { name: '自动', value: 0 };
+                if (code > 45 + 2) {
+                    wind = { name: '低', value: 45 };
+                }
+                else if (code > 30 + 2) {
+                    wind = { name: '中', value: 30 };
+                }
+                else if (code > 15 + 2) {
+                    wind = { name: '高', value: 15 };
+                }
+                return wind;
+            },
+            power: function () {
+                var code = this.code - this.pattern.value - this.direction.value - this.wind.value;
+                var power = { name: '关', value: 1 };
+                if (code > 1) {
+                    power = { name: '开', value: 2 };
+                }
+                return power;
+            },
+            temperature: function () {
+                var code = this.code - this.pattern.value - this.direction.value - this.wind.value - this.power.value;
+                var temperature = { name: '16℃', value: 1 };
+                if (code > 1) {
+                    temperature = { name: parseInt(code + 15) + '℃', value: code };
+                }
+                return temperature;
+            }
+        }
+    });
+</script>
\ No newline at end of file
diff --git a/projects/WebApp/wwwroot/pages/iot/node.html b/projects/WebApp/wwwroot/pages/iot/node.html
index 9e336d66..300cedfd 100644
--- a/projects/WebApp/wwwroot/pages/iot/node.html
+++ b/projects/WebApp/wwwroot/pages/iot/node.html
@@ -68,6 +68,12 @@
             <iot-camera v-bind:device="device"></iot-camera>
         </div>
     </div>
+    <!--串口控制器-->
+    <div class="row">
+        <div v-for="device in getDevices('串口控制器')" class="col" style="min-width:320px;">
+            <iot-serial-port v-bind:device="device"></iot-serial-port>
+        </div>
+    </div>
     <!--test-->
     <!--<hr />
     <div class="row" v-if="node">