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