chuangte/gateway-ui
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

提交

Browse Source
This commit is contained in:
磷叶 2025-04-19 17:45:50 +08:00
parent 12a11c2bd1
commit bd06951627
10 changed files with 854 additions and 204 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/api/bst/device.js
View File

@ -47,6 +47,7 @@ export function delDevice(id) {
export function sendDeviceCommand(data) {
return request({
url: '/bst/device/send',
timeout: 60000,
method: 'post',
data: data
})

44
src/api/bst/dsLog.js Normal file
View File

@ -0,0 +1,44 @@
import request from '@/utils/request'
// 查询数据日志列表
export function listDsLog(query) {
return request({
url: '/bst/dsLog/list',
method: 'get',
params: query
})
}
// 查询数据日志详细
export function getDsLog(id) {
return request({
url: '/bst/dsLog/' + id,
method: 'get'
})
}
// 新增数据日志
export function addDsLog(data) {
return request({
url: '/bst/dsLog',
method: 'post',
data: data
})
}
// 修改数据日志
export function updateDsLog(data) {
return request({
url: '/bst/dsLog',
method: 'put',
data: data
})
}
// 删除数据日志
export function delDsLog(id) {
return request({
url: '/bst/dsLog/' + id,
method: 'delete'
})
}

153
src/views/bst/device/components/DeviceEditDialog.vue Normal file
View File

@ -0,0 +1,153 @@
<template>
<el-dialog
:title="title"
:visible.sync="dialogVisible"
width="500px"
append-to-body
:close-on-click-modal="false"
@open="handleOpen"
>
<el-form ref="form" :model="form" :rules="rules" label-width="80px">
<el-row>
<form-col :span="span" label="MAC" prop="mac">
<el-input v-model="form.mac" placeholder="请输入MAC号" />
</form-col>
<form-col :span="span" label="类型" prop="type">
<el-radio-group v-model="form.type" placeholder="请选择设备类型" style="width: 100%">
<el-radio
v-for="dict in dict.type.device_type"
:key="dict.value"
:label="dict.value"
>{{dict.label}}</el-radio>
</el-radio-group>
</form-col>
<form-col :span="span" label="备注" prop="remark">
<el-input v-model="form.remark" placeholder="请输入备注" type="textarea" :rows="3"/>
</form-col>
</el-row>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="submitForm" :loading="submitLoading">确 定</el-button>
<el-button @click="cancel">取 消</el-button>
</div>
</el-dialog>
</template>
<script>
import FormCol from "@/components/FormCol/index.vue";
import { getDevice, addDevice, updateDevice } from "@/api/bst/device";
export default {
name: 'DeviceEditDialog',
dicts: ['device_type'],
components: { FormCol },
props: {
visible: {
type: Boolean,
default: false
},
id: {
type: [Number, String],
default: null
}
},
data() {
return {
// 弹出层标题
title: "",
// 表单参数
form: {},
span: 24,
// 表单校验
rules: {
mac: [
{ required: true, message: "MAC号不能为空", trigger: "blur" }
],
type: [
{ required: true, message: "设备类型不能为空", trigger: "change" }
],
createTime: [
{ required: true, message: "创建时间不能为空", trigger: "blur" }
],
onlineStatus: [
{ required: true, message: "在线状态不能为空", trigger: "change" }
],
},
submitLoading: false
};
},
computed: {
dialogVisible: {
get() {
return this.visible;
},
set(val) {
this.$emit('update:visible', val);
}
}
},
methods: {
handleOpen() {
this.reset();
if (this.id != null) {
this.title = "修改设备";
this.getInfo();
} else {
this.title = "添加设备";
}
},
/** 获取设备详细信息 */
getInfo() {
getDevice(this.id).then(response => {
this.form = response.data;
});
},
// 表单重置
reset() {
this.form = {
id: null,
mac: null,
type: null,
createTime: null,
onlineStatus: null,
lastOnlineTime: null,
dataPoints: null,
remark: null
};
this.$nextTick(() => {
this.$refs.form && this.$refs.form.clearValidate();
});
},
/** 提交按钮 */
submitForm() {
this.$refs.form.validate(valid => {
if (valid) {
this.submitLoading = true;
if (this.id != null) {
updateDevice(this.form).then(response => {
this.$modal.msgSuccess("修改成功");
this.dialogVisible = false;
this.$emit('success');
}).finally(() => {
this.submitLoading = false;
});
} else {
addDevice(this.form).then(response => {
this.$modal.msgSuccess("新增成功");
this.dialogVisible = false;
this.$emit('success');
}).finally(() => {
this.submitLoading = false;
});
}
}
});
},
// 取消按钮
cancel() {
this.dialogVisible = false;
this.reset();
}
}
};
</script>

70
src/views/bst/device/components/DeviceSendCommandDialog.vue
View File

@ -2,7 +2,7 @@
<el-dialog
title="发送命令"
:visible.sync="dialogVisible"
width="500px"
width="600px"
append-to-body
:close-on-click-modal="false"
@open="handleOpen"
@ -13,28 +13,21 @@
<el-input v-model="form.mac" placeholder="请输入MAC" disabled/>
</form-col>
<form-col label="命令" prop="command">
<el-input v-model="form.command" placeholder="请输入命令" />
<el-input v-model="form.command" placeholder="请输入命令" type="textarea" :rows="3"/>
</form-col>
<form-col label="超时时间" prop="timeout">
<el-input-number
v-model="form.timeout"
:min="1"
:max="60"
placeholder="请输入超时时间(秒)"
/>
<form-col :span="12" label="超时时间" prop="timeout">
<el-input-number v-model="form.timeout" :min="1":max="60" placeholder="请输入超时时间(秒)" controls-position="right" style="width: calc(100% - 2em);" /> 秒
</form-col>
<form-col label="尝试次数" prop="tryCount">
<el-input-number
v-model="form.tryCount"
:min="1"
:max="10"
placeholder="请输入尝试次数"
/>
<form-col :span="12" label="尝试次数" prop="tryCount">
<el-input-number v-model="form.tryCount" :min="1" :max="10" placeholder="请输入尝试次数" controls-position="right" style="width: calc(100% - 2em);"/> 次
</form-col>
<form-col label="返回结果">
<el-input v-model="resData" placeholder="发送命令后，结果将在此处显示" type="textarea" :rows="10" readonly/>
</form-col>
</el-row>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="submitForm">确 定</el-button>
<el-button type="primary" @click="submitForm" :loading="submitLoading">确 定</el-button>
<el-button @click="cancel">取 消</el-button>
</div>
</el-dialog>
@ -46,22 +39,36 @@ import { sendDeviceCommand } from '@/api/bst/device';
export default {
name: 'DeviceSendCommandDialog',
components: { FormCol, AreaRemoteSelect },
components: { FormCol },
props: {
visible: {
type: Boolean,
default: false
},
ids: {
type: Array,
default: () => []
mac: {
type: String,
default: null,
},
},
data() {
return {
form: {},
rules: {
}
mac: [
{ required: true, message: '请输入MAC', trigger: 'blur' }
],
command: [
{ required: true, message: '请输入命令', trigger: 'blur' }
],
timeout: [
{ required: true, message: '请输入超时时间', trigger: 'blur' }
],
tryCount: [
{ required: true, message: '请输入尝试次数', trigger: 'blur' }
],
},
resData: null,
submitLoading: false,
}
},
computed: {
@ -80,10 +87,12 @@ export default {
},
reset() {
this.form = {
mac: this.ids,
mac: this.mac,
command: null,
timeout: 10,
tryCount: 1,
};
this.resData = null;
this.$nextTick(() => {
this.$refs.form && this.$refs.form.clearValidate();
});
@ -91,11 +100,16 @@ export default {
submitForm() {
this.$refs.form.validate(valid => {
if (valid) {
this.form.ids = this.ids;
this.submitLoading = true;
sendDeviceCommand(this.form).then(res => {
this.$message.success("划拨成功");
this.dialogVisible = false;
this.$emit('success');
if (res.data == null) {
this.resData = '响应数据为空';
} else {
this.resData = JSON.stringify(res.data);
}
this.$message.success('发送成功');
}).finally(() => {
this.submitLoading = false;
})
}
});

121
src/views/bst/device/index.vue
View File

@ -89,10 +89,7 @@
{{d.row[column.key]}}
</template>
<template v-else-if="column.key === 'type'">
<dict-tag :options="dict.type.device_type" :value="d.row[column.key]"/>
</template>
<template v-else-if="column.key === 'onlineStatus'">
<dict-tag :options="dict.type.online_status" :value="d.row[column.key]"/>
<dict-tag :options="dict.type.device_type" :value="d.row[column.key]" size="small"/>
</template>
<template v-else>
{{d.row[column.key]}}
@ -105,7 +102,7 @@
<el-button
size="mini"
type="text"
icon="el-icon-edit"
icon="el-icon-message"
@click="handleSendCommand(scope.row)"
v-has-permi="['bst:device:send']"
>发送命令</el-button>
@ -135,36 +132,20 @@
@pagination="getList"
/>
<!-- 添加或修改设备对话框 -->
<el-dialog :title="title" :visible.sync="open" width="500px" append-to-body :close-on-click-modal="false">
<el-form ref="form" :model="form" :rules="rules" label-width="80px">
<el-row>
<form-col :span="span" label="MAC" prop="mac">
<el-input v-model="form.mac" placeholder="请输入MAC号" />
</form-col>
<form-col :span="span" label="类型" prop="type">
<el-radio-group v-model="form.type" placeholder="请选择设备类型" style="width: 100%">
<el-radio
v-for="dict in dict.type.device_type"
:key="dict.value"
:label="dict.value"
>{{dict.label}}</el-radio>
</el-radio-group>
</form-col>
</el-row>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="submitForm">确 定</el-button>
<el-button @click="cancel">取 消</el-button>
</div>
</el-dialog>
<!-- 设备编辑对话框 -->
<device-edit-dialog :visible.sync="editDialogVisible" :id="editId" @success="getList" />
<!-- 发送命令对话框 -->
<device-send-command-dialog :visible.sync="sendCommandDialogVisible" :mac="row.mac" />
</div>
</template>
<script>
import { listDevice, getDevice, delDevice, addDevice, updateDevice } from "@/api/bst/device";
import { listDevice, delDevice} from "@/api/bst/device";
import { $showColumns } from '@/utils/mixins';
import FormCol from "@/components/FormCol/index.vue";
import DeviceSendCommandDialog from '@/views/bst/device/components/DeviceSendCommandDialog.vue';
import DeviceEditDialog from '@/views/bst/device/components/DeviceEditDialog.vue';
// 默认排序字段
const defaultSort = {
@ -176,10 +157,12 @@ export default {
name: "Device",
mixins: [$showColumns],
dicts: ['device_type', 'online_status'],
components: {FormCol},
components: {FormCol, DeviceSendCommandDialog, DeviceEditDialog},
data() {
return {
row: {},
editId: null,
editDialogVisible: false,
sendCommandDialogVisible: false,
span: 24,
// 字段列表
@ -187,8 +170,9 @@ export default {
{key: 'id', visible: true, label: 'ID', minWidth: null, sortable: true, overflow: false, align: 'center', width: "80"},
{key: 'mac', visible: true, label: 'MAC', minWidth: null, sortable: true, overflow: false, align: 'center', width: null},
{key: 'type', visible: true, label: '类型', minWidth: null, sortable: true, overflow: false, align: 'center', width: null},
{key: 'onlineStatus', visible: true, label: '在线状态', minWidth: null, sortable: true, overflow: false, align: 'center', width: null},
{key: 'lastOnlineTime', visible: true, label: '最后在线', minWidth: null, sortable: false, overflow: false, align: 'center', width: null},
{key: 'onlineGatewayCount', visible: true, label: '在线网关', minWidth: null, sortable: false, overflow: false, align: 'center', width: null},
{key: 'offlineGatewayCount', visible: true, label: '离线网关', minWidth: null, sortable: false, overflow: false, align: 'center', width: null},
{key: 'remark', visible: true, label: '备注', minWidth: null, sortable: false, overflow: true, align: 'center', width: null},
{key: 'createTime', visible: true, label: '创建时间', minWidth: null, sortable: true, overflow: false, align: 'center', width: null},
],
// 排序方式
@ -207,10 +191,6 @@ export default {
total: 0,
// 设备表格数据
deviceList: [],
// 弹出层标题
title: "",
// 是否显示弹出层
open: false,
defaultSort,
// 查询参数
queryParams: {
@ -222,23 +202,6 @@ export default {
mac: null,
type: null,
onlineStatus: null,
},
// 表单参数
form: {},
// 表单校验
rules: {
mac: [
{ required: true, message: "MAC号不能为空", trigger: "blur" }
],
type: [
{ required: true, message: "设备类型不能为空", trigger: "change" }
],
createTime: [
{ required: true, message: "创建时间不能为空", trigger: "blur" }
],
onlineStatus: [
{ required: true, message: "在线状态不能为空", trigger: "change" }
],
}
};
},
@ -270,24 +233,6 @@ export default {
this.loading = false;
});
},
// 取消按钮
cancel() {
this.open = false;
this.reset();
},
// 表单重置
reset() {
this.form = {
id: null,
mac: null,
type: null,
createTime: null,
onlineStatus: null,
lastOnlineTime: null,
dataPoints: null
};
this.resetForm("form");
},
/** 搜索按钮操作 */
handleQuery() {
this.queryParams.pageNum = 1;
@ -306,39 +251,13 @@ export default {
},
/** 新增按钮操作 */
handleAdd() {
this.reset();
this.open = true;
this.title = "添加设备";
this.editId = null;
this.editDialogVisible = true;
},
/** 修改按钮操作 */
handleUpdate(row) {
this.reset();
const id = row.id || this.ids
getDevice(id).then(response => {
this.form = response.data;
this.open = true;
this.title = "修改设备";
});
},
/** 提交按钮 */
submitForm() {
this.$refs["form"].validate(valid => {
if (valid) {
if (this.form.id != null) {
updateDevice(this.form).then(response => {
this.$modal.msgSuccess("修改成功");
this.open = false;
this.getList();
});
} else {
addDevice(this.form).then(response => {
this.$modal.msgSuccess("新增成功");
this.open = false;
this.getList();
});
}
}
});
this.editId = row.id || this.ids;
this.editDialogVisible = true;
},
/** 删除按钮操作 */
handleDelete(row) {

284
src/views/bst/dsLog/index.vue Normal file
View File

@ -0,0 +1,284 @@
<template>
<div class="app-container">
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
<el-form-item label="网关MAC" prop="gatewayMac" label-width="6em">
<el-input
v-model="queryParams.gatewayMac"
placeholder="请输入网关MAC"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="设备MAC" prop="deviceMac" label-width="6em">
<el-input
v-model="queryParams.deviceMac"
placeholder="请输入实际设备MAC"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="数据点" prop="ds">
<el-input
v-model="queryParams.ds"
placeholder="请输入数据点"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item>
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
</el-form-item>
</el-form>
<el-row :gutter="10" class="mb8">
<el-col :span="1.5">
<el-button
type="danger"
plain
icon="el-icon-delete"
size="mini"
:disabled="multiple"
@click="handleDelete"
v-has-permi="['bst:dsLog:remove']"
>删除</el-button>
</el-col>
<el-col :span="1.5">
<el-button
type="warning"
plain
icon="el-icon-download"
size="mini"
@click="handleExport"
v-has-permi="['bst:dsLog:export']"
>导出</el-button>
</el-col>
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList" :columns="columns"></right-toolbar>
</el-row>
<el-table v-loading="loading" :data="dsLogList" @selection-change="handleSelectionChange" :default-sort="defaultSort" @sort-change="onSortChange">
<el-table-column type="selection" width="55" align="center" />
<template v-for="column of showColumns">
<el-table-column
:key="column.key"
:label="column.label"
:prop="column.key"
:align="column.align"
:min-width="column.minWidth"
:sort-orders="orderSorts"
:sortable="column.sortable"
:show-overflow-tooltip="column.overflow"
:width="column.width"
>
<template slot-scope="d">
<template v-if="column.key === 'id'">
{{d.row[column.key]}}
</template>
<template v-else>
{{d.row[column.key]}}
</template>
</template>
</el-table-column>
</template>
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
<template slot-scope="scope">
<el-button
size="mini"
type="text"
icon="el-icon-delete"
@click="handleDelete(scope.row)"
v-has-permi="['bst:dsLog:remove']"
>删除</el-button>
</template>
</el-table-column>
</el-table>
<pagination
v-show="total>0"
:total="total"
:page.sync="queryParams.pageNum"
:limit.sync="queryParams.pageSize"
@pagination="getList"
/>
</div>
</template>
<script>
import { listDsLog, getDsLog, delDsLog, addDsLog, updateDsLog } from "@/api/bst/dsLog";
import { $showColumns } from '@/utils/mixins';
import FormCol from "@/components/FormCol/index.vue";
// 默认排序字段
const defaultSort = {
prop: "at",
order: "descending"
}
export default {
name: "DsLog",
mixins: [$showColumns],
components: {FormCol},
data() {
return {
span: 24,
// 字段列表
columns: [
{key: 'id', visible: true, label: 'ID', minWidth: null, sortable: true, overflow: false, align: 'center', width: "80"},
{key: 'gatewayMac', visible: true, label: '网关MAC', minWidth: null, sortable: true, overflow: false, align: 'center', width: null},
{key: 'deviceMac', visible: true, label: '设备MAC', minWidth: null, sortable: true, overflow: false, align: 'center', width: null},
{key: 'ds', visible: true, label: '数据点', minWidth: null, sortable: true, overflow: false, align: 'center', width: null},
{key: 'at', visible: true, label: '上报时间', minWidth: null, sortable: false, overflow: false, align: 'center', width: null},
{key: 'data', visible: true, label: '数据', minWidth: "300", sortable: true, overflow: false, align: 'left', width: null},
],
// 排序方式
orderSorts: ['ascending', 'descending', null],
// 遮罩层
loading: true,
// 选中数组
ids: [],
// 非单个禁用
single: true,
// 非多个禁用
multiple: true,
// 显示搜索条件
showSearch: true,
// 总条数
total: 0,
// 数据日志表格数据
dsLogList: [],
// 弹出层标题
title: "",
// 是否显示弹出层
open: false,
defaultSort,
// 查询参数
queryParams: {
pageNum: 1,
pageSize: 20,
orderByColumn: defaultSort.prop,
isAsc: defaultSort.order,
id: null,
gatewayMac: null,
deviceMac: null,
ds: null,
},
// 表单参数
form: {},
// 表单校验
rules: {
}
};
},
created() {
this.getList();
},
methods: {
/** 当排序按钮被点击时触发 **/
onSortChange(column) {
if (column.order == null) {
this.queryParams.orderByColumn = defaultSort.prop;
this.queryParams.isAsc = defaultSort.order;
} else {
this.queryParams.orderByColumn = column.prop;
this.queryParams.isAsc = column.order;
}
this.getList();
},
/** 查询数据日志列表 */
getList() {
this.loading = true;
listDsLog(this.queryParams).then(response => {
this.dsLogList = response.rows;
this.total = response.total;
this.loading = false;
});
},
// 取消按钮
cancel() {
this.open = false;
this.reset();
},
// 表单重置
reset() {
this.form = {
id: null,
gatewayMac: null,
deviceMac: null,
ds: null,
data: null,
at: null
};
this.resetForm("form");
},
/** 搜索按钮操作 */
handleQuery() {
this.queryParams.pageNum = 1;
this.getList();
},
/** 重置按钮操作 */
resetQuery() {
this.resetForm("queryForm");
this.handleQuery();
},
// 多选框选中数据
handleSelectionChange(selection) {
this.ids = selection.map(item => item.id)
this.single = selection.length!==1
this.multiple = !selection.length
},
/** 新增按钮操作 */
handleAdd() {
this.reset();
this.open = true;
this.title = "添加数据日志";
},
/** 修改按钮操作 */
handleUpdate(row) {
this.reset();
const id = row.id || this.ids
getDsLog(id).then(response => {
this.form = response.data;
this.open = true;
this.title = "修改数据日志";
});
},
/** 提交按钮 */
submitForm() {
this.$refs["form"].validate(valid => {
if (valid) {
if (this.form.id != null) {
updateDsLog(this.form).then(response => {
this.$modal.msgSuccess("修改成功");
this.open = false;
this.getList();
});
} else {
addDsLog(this.form).then(response => {
this.$modal.msgSuccess("新增成功");
this.open = false;
this.getList();
});
}
}
});
},
/** 删除按钮操作 */
handleDelete(row) {
const ids = row.id || this.ids;
this.$modal.confirm('是否确认删除数据日志编号为"' + ids + '"的数据项？').then(function() {
return delDsLog(ids);
}).then(() => {
this.getList();
this.$modal.msgSuccess("删除成功");
}).catch(() => {});
},
/** 导出按钮操作 */
handleExport() {
this.download('bst/dsLog/export', {
...this.queryParams
}, `dsLog_${new Date().getTime()}.xlsx`)
}
}
};
</script>

131
src/views/bst/gateway/components/GatewayEditDialog.vue Normal file
View File

@ -0,0 +1,131 @@
<template>
<el-dialog
:title="title"
:visible.sync="dialogVisible"
width="500px"
append-to-body
:close-on-click-modal="false"
@open="handleOpen"
>
<el-form ref="form" :model="form" :rules="rules" label-width="80px">
<el-row>
<form-col :span="span" label="MAC" prop="mac">
<el-input v-model="form.mac" placeholder="请输入MAC" />
</form-col>
<form-col :span="span" label="备注" prop="remark">
<el-input v-model="form.remark" type="textarea" placeholder="请输入备注" :rows="3" maxlength="200" show-word-limit />
</form-col>
</el-row>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="submitForm" :loading="submitLoading">确 定</el-button>
<el-button @click="cancel">取 消</el-button>
</div>
</el-dialog>
</template>
<script>
import FormCol from "@/components/FormCol/index.vue";
import { getGateway, addGateway, updateGateway } from "@/api/bst/gateway";
export default {
name: 'GatewayEditDialog',
components: { FormCol },
props: {
visible: {
type: Boolean,
default: false
},
id: {
type: [Number, String],
default: null
}
},
data() {
return {
// 弹出层标题
title: "",
// 表单参数
form: {},
span: 24,
// 表单校验
rules: {
mac: [
{ required: true, message: "MAC不能为空", trigger: "blur" }
]
},
submitLoading: false
};
},
computed: {
dialogVisible: {
get() {
return this.visible;
},
set(val) {
this.$emit('update:visible', val);
}
}
},
methods: {
handleOpen() {
this.reset();
if (this.id != null) {
this.title = "修改网关";
this.getInfo();
} else {
this.title = "添加网关";
}
},
/** 获取网关详细信息 */
getInfo() {
getGateway(this.id).then(response => {
this.form = response.data;
});
},
// 表单重置
reset() {
this.form = {
id: null,
mac: null,
onlineStatus: null,
createTime: null,
lastOnlineTime: null
};
this.$nextTick(() => {
this.$refs.form && this.$refs.form.clearValidate();
});
},
/** 提交按钮 */
submitForm() {
this.$refs.form.validate(valid => {
if (valid) {
this.submitLoading = true;
if (this.id != null) {
updateGateway(this.form).then(response => {
this.$modal.msgSuccess("修改成功");
this.dialogVisible = false;
this.$emit('success');
}).finally(() => {
this.submitLoading = false;
});
} else {
addGateway(this.form).then(response => {
this.$modal.msgSuccess("新增成功");
this.dialogVisible = false;
this.$emit('success');
}).finally(() => {
this.submitLoading = false;
});
}
}
});
},
// 取消按钮
cancel() {
this.dialogVisible = false;
this.reset();
}
}
};
</script>

60
src/views/bst/gateway/index.vue
View File

@ -122,27 +122,20 @@
@pagination="getList"
/>
<!-- 添加或修改网关对话框 -->
<el-dialog :title="title" :visible.sync="open" width="500px" append-to-body :close-on-click-modal="false">
<el-form ref="form" :model="form" :rules="rules" label-width="80px">
<el-row>
<form-col :span="span" label="MAC" prop="mac">
<el-input v-model="form.mac" placeholder="请输入MAC" />
</form-col>
</el-row>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="submitForm">确 定</el-button>
<el-button @click="cancel">取 消</el-button>
</div>
</el-dialog>
<!-- 网关编辑对话框 -->
<gateway-edit-dialog
:visible.sync="open"
:id="selectedId"
@success="getList"
/>
</div>
</template>
<script>
import { listGateway, getGateway, delGateway, addGateway, updateGateway } from "@/api/bst/gateway";
import { listGateway, delGateway } from "@/api/bst/gateway";
import { $showColumns } from '@/utils/mixins';
import FormCol from "@/components/FormCol/index.vue";
import GatewayEditDialog from './components/GatewayEditDialog.vue';
// 默认排序字段
const defaultSort = {
@ -154,7 +147,7 @@ export default {
name: "Gateway",
mixins: [$showColumns],
dicts: ['online_status'],
components: {FormCol},
components: {FormCol, GatewayEditDialog},
data() {
return {
span: 24,
@ -165,6 +158,7 @@ export default {
{key: 'onlineStatus', visible: true, label: '在线状态', minWidth: null, sortable: true, overflow: false, align: 'center', width: null},
{key: 'lastOnlineTime', visible: true, label: '最后在线', minWidth: null, sortable: true, overflow: false, align: 'center', width: null},
{key: 'imei', visible: true, label: '物联网卡', minWidth: null, sortable: true, overflow: false, align: 'center', width: null},
{key: 'remark', visible: true, label: '备注', minWidth: null, sortable: true, overflow: false, align: 'center', width: null},
{key: 'createTime', visible: true, label: '创建时间', minWidth: null, sortable: true, overflow: false, align: 'center', width: null},
],
// 排序方式
@ -187,6 +181,8 @@ export default {
title: "",
// 是否显示弹出层
open: false,
// 选中的ID
selectedId: null,
defaultSort,
// 查询参数
queryParams: {
@ -276,39 +272,13 @@ export default {
},
/** 新增按钮操作 */
handleAdd() {
this.reset();
this.selectedId = null;
this.open = true;
this.title = "添加网关";
},
/** 修改按钮操作 */
handleUpdate(row) {
this.reset();
const id = row.id || this.ids
getGateway(id).then(response => {
this.form = response.data;
this.open = true;
this.title = "修改网关";
});
},
/** 提交按钮 */
submitForm() {
this.$refs["form"].validate(valid => {
if (valid) {
if (this.form.id != null) {
updateGateway(this.form).then(response => {
this.$modal.msgSuccess("修改成功");
this.open = false;
this.getList();
});
} else {
addGateway(this.form).then(response => {
this.$modal.msgSuccess("新增成功");
this.open = false;
this.getList();
});
}
}
});
this.selectedId = row.id || this.ids;
this.open = true;
},
/** 删除按钮操作 */
handleDelete(row) {

139
src/views/bst/gatewayDevice/components/GatewayDeviceEditDialog.vue Normal file
View File

@ -0,0 +1,139 @@
<template>
<el-dialog
:title="title"
:visible.sync="dialogVisible"
width="500px"
append-to-body
:close-on-click-modal="false"
@open="handleOpen"
>
<el-form ref="form" :model="form" :rules="rules" label-width="80px">
<el-row>
<form-col :span="span" label="网关MAC" prop="gatewayMac">
<el-input v-model="form.gatewayMac" placeholder="请输入网关MAC" />
</form-col>
<form-col :span="span" label="设备MAC" prop="deviceMac">
<el-input v-model="form.deviceMac" placeholder="请输入设备MAC" />
</form-col>
<form-col :span="span" label="心跳间隔" prop="heartBeat">
<el-input v-model="form.heartBeat" placeholder="请输入心跳间隔" />
</form-col>
</el-row>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="submitForm" :loading="submitLoading">确 定</el-button>
<el-button @click="cancel">取 消</el-button>
</div>
</el-dialog>
</template>
<script>
import FormCol from "@/components/FormCol/index.vue";
import { getGatewayDevice, addGatewayDevice, updateGatewayDevice } from "@/api/bst/gatewayDevice";
export default {
name: 'GatewayDeviceEditDialog',
components: { FormCol },
props: {
visible: {
type: Boolean,
default: false
},
id: {
type: [Number, String],
default: null
}
},
data() {
return {
// 弹出层标题
title: "",
// 表单参数
form: {},
span: 24,
// 表单校验
rules: {
gatewayMac: [
{ required: true, message: "网关MAC不能为空", trigger: "blur" }
],
deviceMac: [
{ required: true, message: "设备MAC不能为空", trigger: "blur" }
],
heartBeat: [
{ required: true, message: "心跳间隔不能为空", trigger: "blur" }
],
},
submitLoading: false
};
},
computed: {
dialogVisible: {
get() {
return this.visible;
},
set(val) {
this.$emit('update:visible', val);
}
}
},
methods: {
handleOpen() {
this.reset();
if (this.id != null) {
this.title = "修改网关设备";
this.getInfo();
} else {
this.title = "绑定网关设备";
}
},
/** 获取网关设备详细信息 */
getInfo() {
getGatewayDevice(this.id).then(response => {
this.form = response.data;
});
},
// 表单重置
reset() {
this.form = {
id: null,
gatewayMac: null,
deviceMac: null,
heartBeat: null,
};
this.$nextTick(() => {
this.$refs.form && this.$refs.form.clearValidate();
});
},
/** 提交按钮 */
submitForm() {
this.$refs.form.validate(valid => {
if (valid) {
this.submitLoading = true;
if (this.id != null) {
updateGatewayDevice(this.form).then(response => {
this.$modal.msgSuccess("修改成功");
this.dialogVisible = false;
this.$emit('success');
}).finally(() => {
this.submitLoading = false;
});
} else {
addGatewayDevice(this.form).then(response => {
this.$modal.msgSuccess("绑定成功");
this.dialogVisible = false;
this.$emit('success');
}).finally(() => {
this.submitLoading = false;
});
}
}
});
},
// 取消按钮
cancel() {
this.dialogVisible = false;
this.reset();
}
}
};
</script>

55
src/views/bst/gatewayDevice/index.vue
View File

@ -79,6 +79,13 @@
<template v-else-if="column.key === 'deviceType'">
<dict-tag :options="dict.type.device_type" :value="d.row[column.key]" size="small"/>
</template>
<template v-else-if="column.key === 'heartBeat'">
{{d.row[column.key] | dv}} 秒
</template>
<template v-else-if="column.key === 'gatewayMac'">
{{d.row.gatewayMac | dv }}
<dict-tag :options="dict.type.online_status" :value="d.row.gatewayOnlineStatus" size="small"/>
</template>
<template v-else>
{{d.row[column.key]}}
</template>
@ -106,23 +113,12 @@
@pagination="getList"
/>
<!-- 添加或修改网关设备对话框 -->
<el-dialog :title="title" :visible.sync="open" width="500px" append-to-body :close-on-click-modal="false">
<el-form ref="form" :model="form" :rules="rules" label-width="80px">
<el-row>
<form-col :span="span" label="网关ID" prop="gatewayId">
<el-input v-model="form.gatewayId" placeholder="请输入网关ID" />
</form-col>
<form-col :span="span" label="设备ID" prop="deviceId">
<el-input v-model="form.deviceId" placeholder="请输入设备ID" />
</form-col>
</el-row>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="submitForm">确 定</el-button>
<el-button @click="cancel">取 消</el-button>
</div>
</el-dialog>
<!-- 添加网关设备对话框组件 -->
<gateway-device-edit-dialog
:visible.sync="open"
:id="id"
@success="getList"
/>
</div>
</template>
@ -130,6 +126,7 @@
import { listGatewayDevice, getGatewayDevice, delGatewayDevice, addGatewayDevice, updateGatewayDevice } from "@/api/bst/gatewayDevice";
import { $showColumns } from '@/utils/mixins';
import FormCol from "@/components/FormCol/index.vue";
import GatewayDeviceEditDialog from './components/GatewayDeviceEditDialog.vue';
// 默认排序字段
const defaultSort = {
@ -139,9 +136,9 @@ const defaultSort = {
export default {
name: "GatewayDevice",
dicts: ['device_type'],
dicts: ['device_type', 'online_status'],
mixins: [$showColumns],
components: {FormCol},
components: {FormCol, GatewayDeviceEditDialog},
props: {
query: {
type: Object,
@ -158,7 +155,9 @@ export default {
{key: 'deviceMac', visible: true, label: '设备MAC', minWidth: null, sortable: true, overflow: false, align: 'center', width: null},
{key: 'deviceType', visible: true, label: '设备类型', minWidth: null, sortable: true, overflow: false, align: 'center', width: null},
{key: 'lastHeartTime', visible: true, label: '最后心跳', minWidth: null, sortable: true, overflow: false, align: 'center', width: null},
{key: 'createTime', visible: true, label: '连接时间', minWidth: null, sortable: true, overflow: false, align: 'center', width: null},
{key: 'gatewayLastOnlineTime', visible: true, label: '网关最后在线', minWidth: null, sortable: true, overflow: false, align: 'center', width: null},
{key: 'heartBeat', visible: true, label: '心跳间隔', minWidth: null, sortable: true, overflow: false, align: 'center', width: null},
{key: 'createTime', visible: true, label: '绑定时间', minWidth: null, sortable: true, overflow: false, align: 'center', width: null},
],
// 排序方式
orderSorts: ['ascending', 'descending', null],
@ -207,7 +206,9 @@ export default {
lastHeartTime: [
{ required: true, message: "最后一次心跳时间不能为空", trigger: "blur" }
]
}
},
// 选中的ID
id: null,
};
},
created() {
@ -269,19 +270,13 @@ export default {
},
/** 新增按钮操作 */
handleAdd() {
this.reset();
this.id = null;
this.open = true;
this.title = "添加网关设备";
},
/** 修改按钮操作 */
handleUpdate(row) {
this.reset();
const id = row.id || this.ids
getGatewayDevice(id).then(response => {
this.form = response.data;
this.open = true;
this.title = "修改网关设备";
});
this.id = row.id || this.ids[0];
this.open = true;
},
/** 提交按钮 */
submitForm() {