bonus
/
devicesmgt
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

iot设备列表新增等接口调试完成

This commit is contained in:
BianLzhaoMin 2024-08-05 14:41:51 +08:00
parent e7d790e423
commit 6eb8d87bfa
2 changed files with 199 additions and 64 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
sgzb-ui/src/api/iotDevice/index.js Normal file
View File

@ -0,0 +1,42 @@
import request from '@/utils/request'
// 新增设备
export function addDeviceInfoApi(data) {
return request({
url: '/material/iotMachine/addOrUpdate',
method: 'post',
data
})
}
// 获取设备列表
export function getDeviceListApi(query) {
return request({
url: '/material/iotMachine/getIotList',
method: 'get',
params: query
})
}
// 查询绑定记录
export function getDeviceBindRecordApi(query) {
return request({
url: '/material/xxxx',
method: 'get',
params: query
})
}
// 解绑设备
export function unbindDeviceApi(data) {
return request({
url: '/material/iotMachine/unbind ',
method: 'post',
data
})
}
// 删除设备
export function deleteDeviceApi(id) {
return request({
url: `/material/iotMachine/deleteById/${id}`,
method: 'delete',
})
}

221
sgzb-ui/src/views/iotDevice/index.vue
View File

@ -3,10 +3,15 @@
<!-- 查询 --> <!-- 查询 -->
<el-form inline> <el-form inline>
<el-form-item> <el-form-item>
<el-input placeholder="请输入关键字" /> <el-input
placeholder="请输入关键字"
v-model="queryParams.keyWords"
/>
</el-form-item> </el-form-item>
<el-form-item> <el-form-item>
<el-button size="mini" type="primary">搜索</el-button> <el-button size="mini" type="primary" @click="handelQuery()"
>搜索</el-button
>
<el-button size="mini" type="primary" @click="addDevice()" <el-button size="mini" type="primary" @click="addDevice()"
>添加设备</el-button >添加设备</el-button
> >
@ -30,50 +35,79 @@
label="序号" label="序号"
/> />
<el-table-column <el-table-column
prop="deviceName" prop="iotTypeName"
align="center" align="center"
label="设备类型" label="设备类型"
/> />
<el-table-column <el-table-column prop="iotCode" align="center" label="设备编号" />
prop="deviceName" <el-table-column align="center" label="设备状态">
align="center" <template slot-scope="{ row }">
label="设备编号" <el-tag
/> size="mini"
<el-table-column type="success"
prop="deviceName" v-if="row.iotStatus === 0"
align="center" >在线</el-tag
label="设备状态" >
/> <el-tag
<el-table-column prop="deviceName" align="center" label="二维码" /> size="mini"
<el-table-column type="warning"
prop="deviceName" v-if="row.iotStatus === 1"
align="center" >离线</el-tag
label="绑定状态" >
/> </template>
</el-table-column>
<el-table-column prop="qrCode" align="center" label="二维码" />
<el-table-column align="center" label="绑定状态">
<template slot-scope="{ row }">
<el-tag
size="mini"
type="success"
v-if="row.bindStatus === 0"
>已绑定</el-tag
>
<el-tag
size="mini"
type="warning"
v-if="row.bindStatus === 1"
>未绑定</el-tag
>
</template>
</el-table-column>
<el-table-column prop="deviceName" align="center" label="操作"> <el-table-column prop="deviceName" align="center" label="操作">
<el-button <template slot-scope="{ row }">
type="text" <el-button
icon="el-icon-tickets" type="text"
@click="handleViewRecord()" icon="el-icon-tickets"
>记录</el-button @click="handleViewRecord()"
> >记录</el-button
<el-button >
type="text" <el-button
icon="el-icon-delete" type="text"
style="color: #f56c6c" icon="el-icon-delete"
@click="handleDelete()" style="color: #f56c6c"
>删除</el-button @click="handleDeleteAndUnbind(row.iotId, 1)"
> >删除</el-button
<el-button >
type="text" <el-button
icon="el-icon-document-delete" type="text"
style="color: #e6a23c" icon="el-icon-document-delete"
@click="handleUnbind()" style="color: #e6a23c"
>解绑</el-button @click="handleDeleteAndUnbind(row.iotId, 2)"
> v-if="row.bindStatus === 0"
>解绑</el-button
>
</template>
</el-table-column> </el-table-column>
</el-table> </el-table>
<!-- 分页 -->
<pagination
:total="total"
:page.sync="queryParams.pageNum"
:limit.sync="queryParams.pageSize"
@pagination="getDeviceList"
/>
<!-- 弹框 --> <!-- 弹框 -->
<DialogModel <DialogModel
:dialogConfig="dialogConfig" :dialogConfig="dialogConfig"
@ -88,21 +122,23 @@
:rules="addDeviceRules" :rules="addDeviceRules"
ref="addDeviceParamsRef" ref="addDeviceParamsRef"
> >
<el-form-item label="设备类型" prop="deviceType"> <el-form-item label="设备类型" prop="iotType">
<el-select <el-select
style="width: 100%" style="width: 100%"
placeholder="请选择设备类型" placeholder="请选择设备类型"
clearable clearable
v-model="addDeviceParams.deviceType" v-model="addDeviceParams.iotType"
> >
<el-option value="1" label="定位设备" /> <el-option :value="125" label="定位设备" />
<el-option :value="126" label="其他设备" />
<el-option :value="127" label="其他设备" />
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-form-item label="设备编号" prop="deviceCode"> <el-form-item label="设备编号" prop="iotCode">
<el-input <el-input
placeholder="请输入设备编号" placeholder="请输入设备编号"
clearable clearable
v-model="addDeviceParams.deviceCode" v-model="addDeviceParams.iotCode"
/> />
</el-form-item> </el-form-item>
</el-form> </el-form>
@ -136,6 +172,12 @@
import DialogModel from '@/components/DialogModel' // 弹框组件 import DialogModel from '@/components/DialogModel' // 弹框组件
import TableModel from '@/components/TableModel' // 表格组件 import TableModel from '@/components/TableModel' // 表格组件
import { dialogConfig } from './config' import { dialogConfig } from './config'
import {
addDeviceInfoApi,
getDeviceListApi,
deleteDeviceApi,
unbindDeviceApi,
} from '@/api/iotDevice'
export default { export default {
components: { components: {
DialogModel, DialogModel,
@ -143,28 +185,31 @@ export default {
}, },
data() { data() {
return { return {
deviceList: [ deviceList: [],
{ total: 0,
deviceName: '测试设备',
},
],
// 弹框的参数 // 弹框的参数
dialogConfig, dialogConfig,
// 列表查询参数
queryParams: {
pageNum: 1,
pageSize: 10,
keyWords: '',
},
// 新增给设备数据源 // 新增给设备数据源
addDeviceParams: { addDeviceParams: {
deviceType: '', iotType: '',
deviceCode: '', iotCode: '',
}, },
// 新增设备表单校验 // 新增设备表单校验
addDeviceRules: { addDeviceRules: {
deviceType: [ iotType: [
{ {
required: true, required: true,
message: '请选择设备类型', message: '请选择设备类型',
trigger: 'change', trigger: 'change',
}, },
], ],
deviceCode: [ iotCode: [
{ {
required: true, required: true,
message: '请输入11位的设备编号', message: '请输入11位的设备编号',
@ -181,7 +226,21 @@ export default {
} }
}, },
created() {
this.getDeviceList()
},
methods: { methods: {
/** 获取设备列表 */
async getDeviceList() {
const res = await getDeviceListApi()
this.deviceList = res.rows
this.total = res.total
},
/** 搜索按钮 */
handelQuery() {
this.getDeviceList()
},
/** 添加设备 */ /** 添加设备 */
addDevice() { addDevice() {
this.dialogConfig.outerWidth = '40%' this.dialogConfig.outerWidth = '40%'
@ -202,18 +261,25 @@ export default {
}, },
/** 确定按钮 */ /** 确定按钮 */
handleSubmit() { handleSubmit() {
this.$refs.addDeviceParamsRef.validate((valid) => { this.$refs.addDeviceParamsRef.validate(async (valid) => {
if (valid) { if (valid) {
// 1. 校验通过调后台Api // 1. 校验通过调后台Api
console.log('走后续逻辑') const res = await addDeviceInfoApi(this.addDeviceParams)
this.dialogConfig.outerVisible = false
if (res.code === 200) {
this.$message.success('新增成功！')
this.dialogConfig.outerVisible = false
this.addDeviceParams.iotType = ''
this.addDeviceParams.iotCode = ''
this.getDeviceList()
}
} }
}) })
}, },
/** 取消按钮 */ /** 取消按钮 */
handleCancel() { handleCancel() {
this.addDeviceParams.deviceType = '' this.addDeviceParams.iotType = ''
this.addDeviceParams.deviceCode = '' this.addDeviceParams.iotCode = ''
this.dialogConfig.outerVisible = false this.dialogConfig.outerVisible = false
}, },
@ -230,23 +296,50 @@ export default {
}, },
/** 删除按钮 */ /** 删除按钮 */
handleDelete() { handleDelete(id) {
this.$confirm('是否确定删除当前设备, 是否继续?', '提示', { this.$confirm('是否确定删除当前设备, 是否继续?', '提示', {
confirmButtonText: '确定', confirmButtonText: '确定',
cancelButtonText: '取消', cancelButtonText: '取消',
type: 'warning', type: 'warning',
}).then(() => { }).then(async () => {
console.log('删除设备') const res = await deleteDeviceApi(id)
if (res.code === 200) {
this.$message.success('删除成功！')
this.getDeviceList()
}
}) })
}, },
/** 解绑按钮 */ /** 解绑按钮 */
handleUnbind() { handleUnbind(iotId) {
this.$confirm('是否确定解绑当前设备, 是否继续?', '提示', { this.$confirm('是否确定解绑当前设备, 是否继续?', '提示', {
confirmButtonText: '确定', confirmButtonText: '确定',
cancelButtonText: '取消', cancelButtonText: '取消',
type: 'warning', type: 'warning',
}).then(() => { }).then(async () => {
console.log('解绑设备') const res = await unbindDeviceApi({ iotId })
console.log('解绑设备', res)
if (res.code === 200) {
this.$message.success('解绑成功！')
this.getDeviceList()
}
})
},
/** 删除和解绑设备 */
handleDeleteAndUnbind(id, type) {
const title = type === 1 ? '删除' : '解绑'
this.$confirm(`是否确定${title}当前设备, 是否继续?`, '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
}).then(async () => {
let ApiFun = type === 1 ? deleteDeviceApi : unbindDeviceApi
let params = type === 1 ? id : { iotId: id }
const res = await ApiFun(params)
if (res.code === 200) {
this.$message.success(`${title}成功！`)
this.getDeviceList()
}
}) })
}, },
}, },