|
|
<template>
|
|
|
<div class="card device-component">
|
|
|
<div class="card-header">
|
|
|
<h3 class="card-title">
|
|
|
{{device.displayName}}
|
|
|
</h3>
|
|
|
<div class="card-tools" v-if="hasDevicePermission()">
|
|
|
<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>
|
|
|
export default {
|
|
|
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> |
