iot/projects/WebMVC/wwwroot/components/devices/serialport.html

<template>
    <div class="card device-component">
        <div class="card-header">
            <h3 class="card-title">
                {{device.displayName}}
            </h3>
            <div class="card-tools">
                <span @click="visible = true" title="操作"><i class="ion ion-md-settings"></i></span>
            </div>
        </div>
        <div class="card-body">
            <div class="row">
                <div class="col-4 align-self-center">
                    <img class="device-image" :src="device.ioTProduct.image" style="width:48px;" />
                </div>
                <div class="col-8 align-self-center">
                    <div class="row">
                        <span>指令：{{getCustomButtons().length}}</span>
                    </div>
                </div>
            </div>
        </div>
        <a-modal v-model="visible" :title="device.displayName" :footer="null" width="60%">
            <a-tabs default-active-key="1">
                <a-tab-pane key="1" tab="操作">
                    <div class="row">
                        <div class="col-12">
                            <button v-for="button in getCustomButtons()" type="button" class="btn btn-sm btn-success px-2 m-2" :value="button.Name" @click="send($event.target.value)">{{button.Name}}</button>
                        </div>
                    </div>
                </a-tab-pane>
                <a-tab-pane key="2" tab="配置">
                    <div class="row">
                        <div class="col-12" style="overflow:auto;text-align:left;">
                            <table class="table table-sm table-bordered">
                                <tr>
                                    <th>#</th>
                                    <th>名称</th>
                                    <th>端口</th>
                                    <th>波特率</th>
                                    <th>数据位</th>
                                    <th>校验位</th>
                                    <th>停止位</th>
                                    <th>消息</th>
                                    <th>序号</th>
                                    <th>删除</th>
                                </tr>
                                <tr v-for="(button,index) in getCustomButtons()">
                                    <td>{{index+1}}</td>
                                    <td>{{button.Name}}</td>
                                    <td>{{button.PortName}}</td>
                                    <td>{{button.BaudRate}}</td>
                                    <td>{{button.DataBits}}</td>
                                    <td>{{button.Parity}}</td>
                                    <td>{{button.StopBits}}</td>
                                    <td style="max-width:10em;overflow:hidden;" title="button.Message">{{button.Message}}</td>
                                    <td>{{button.Order}}</td>
                                    <td><button class="btn btn-sm btn-success" @click="remove(button.name)">删除</button></td>
                                </tr>
                            </table>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-12">
                            <form class="form-horizontal">
                                <div class="form-group row">
                                    <label class="col-sm-2 col-form-label">名称</label>
                                    <div class="col-sm-10">
                                        <input type="text" class="form-control" name="Name" value="指令名称">
                                    </div>
                                </div>
                                <div class="form-group row">
                                    <label class="col-sm-2 col-form-label">序号</label>
                                    <div class="col-sm-10">
                                        <input type="text" class="form-control" name="Order" value="100">
                                    </div>
                                </div>
                                <div class="form-group row">
                                    <label class="col-sm-2 col-form-label">端口</label>
                                    <div class="col-sm-10">
                                        <input type="text" class="form-control" name="PortName" value="/dev/ttyS0">
                                    </div>
                                </div>
                                <div class="form-group row">
                                    <label class="col-sm-2 col-form-label">波特率</label>
                                    <div class="col-sm-10">
                                        <input type="text" class="form-control" name="BaudRate" value="9600">
                                    </div>
                                </div>
                                <div class="form-group row">
                                    <label class="col-sm-2 col-form-label">数据位</label>
                                    <div class="col-sm-10">
                                        <input type="text" class="form-control" name="DataBits" value="8">
                                    </div>
                                </div>
                                <div class="form-group row">
                                    <label class="col-sm-2 col-form-label">校验位</label>
                                    <div class="col-sm-10">
                                        <input type="text" class="form-control" name="Parity" value="0">
                                    </div>
                                </div>
                                <div class="form-group row">
                                    <label class="col-sm-2 col-form-label">停止位</label>
                                    <div class="col-sm-10">
                                        <input type="text" class="form-control" name="StopBits" value="1">
                                    </div>
                                </div>
                                <div class="form-group row">
                                    <label class="col-sm-2 col-form-label">消息</label>
                                    <div class="col-sm-10">
                                        <input type="text" class="form-control" name="Message" value="0123456789ABCDEF">
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-sm-2"></div>
                                    <div class="col-sm-10" style="text-align:left;">
                                        <button class="btn btn-sm btn-success" @click.prevent="test">测试</button>
                                        <button class="btn btn-sm btn-success" @click.prevent="add">保存</button>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </a-tab-pane>
            </a-tabs>
        </a-modal>
    </div>
</template>
<script>
    ({
        props: ['device'],
        data: function () {
            return {
                visible: false,
                model:null
            }
        },
        methods: {
            getCustomButtons: function () {
                return Enumerable.from(JSON.parse(getIoTDataValue(this.device, "指令")))
                    .orderBy(function (o) { return o.Order; })
                    .toArray();
            },
            send: function (name) {
                execApi(this.device.number, '/SerialPort/Send', 'type=' + type + '&code=' + value);
            },
            add: function (event) {
                var array = $(event.target).parents('form').serializeArray();
                var button = {};
                $.map(array, function (n, i) {
                    button[n['name']] = n['value'];
                });
                var list = this.getCustomButtons();
                list.push(button);
                var value = JSON.stringify(list);
                execApi(this.device.number, '/SerialPort/Buttons', 'buttons=' + value);
            },
            remove: function (name) {
                var buttons = this.getCustomButtons();
                for (var i = buttons.length - 1; i >= 0; i--) {
                    if (buttons[i].name === name) {
                        buttons.splice(i, 1);
                        break;
                    }
                }
                var value = JSON.stringify(buttons);
                execApi(this.device.number, '/SerialPort/Buttons', 'buttons=' + value);
            },
            test: function (event) {
                var query = decodeURIComponent($(event.target).parents('form').serialize());
                execApi(this.device.number, '/SerialPort/Test', query);
            }
        }
    });
</script>