iot/projects/WebMVC/wwwroot/components/device/serial-port.html

<template>
    <div>
        <div class="card" style="box-sizing:border-box;height:490px;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="width:100%;overflow:auto;">
                    <button v-for="button in getCustomButtons()" type="button" class="btn btn-sm btn-success" :value="button.name" v-on:click="send($event.target.value)">{{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="btn btn-sm btn-success" v-on:click="add()">添加</button>
                    <button type="button" class="btn btn-sm btn-success" v-on:click="save($event)">保存</button>
                </div>
            </div>
            <div class="card-body">
                <div class="weui-cells weui-cells_form item" 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="btn btn-sm btn-success" v-on:click="test(button.name)">测试</a>
                        <a href="javascript:;" class="btn btn-sm btn-success" v-on:click="remove(button.name)">移除</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
    export default {
        props: ['device', 'edit'],
        mounted: function () {
            //weui.tab('.weui-tab');
        },
        methods: {
            send: function (name) {
                execApi(this.device.number, '/SerialPort/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": "测试", "portName": "/dev/ttyS0", "baudRate": 9600, "parity": 0, "dataBits": 8, "stopBits": 1, "message": "0123456789ABCDEF", "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);
            },
            test: function (name) {
                var button = Enumerable.from(this.getCustomButtons()).where(function (o) { return o.name === name; }).firstOrDefault();
                var query = 'port=' + button.portName;
                query += '&baud=' + button.baudRate;
                query += '&parity=' + button.parity;
                query += '&dataBits=' + button.dataBits;
                query += '&stopBits=' + button.stopBits;
                query += '&message=' + button.message;
                execApi(this.device.number, '/SerialPort/Test', query);
            },
            save: function (e) {
                var buttons = [];
                $(e.target).parents('.card').find('.item').each(function () {
                    buttons.push({
                        name: $(this).find("input[name='name']").val(),
                        portName: $(this).find("input[name='portName']").val(),
                        baudRate: $(this).find("input[name='baudRate']").val(),
                        parity: $(this).find("input[name='parity']").val(),
                        dataBits: $(this).find("input[name='dataBits']").val(),
                        stopBits: $(this).find("input[name='stopBits']").val(),
                        message: $(this).find("input[name='message']").val(),
                        order: $(this).find("input[name='order']").val()
                    });
                });
                var value = JSON.stringify(buttons);
                execApi(this.device.number, '/SerialPort/Buttons', 'buttons=' + value);
            }
        }
    };
</script>