IOT设备管理联调

This commit is contained in:
binbin_pan 2024-07-11 18:33:09 +08:00
parent 40eb75962a
commit 89f3c6f39c
6 changed files with 430 additions and 204 deletions

View File

@ -0,0 +1,81 @@
import request from '@/utils/request'
// 新增或修改IOT
export function addOrUpdate(data) {
return request({
url: '/material/iotMachine/addOrUpdate',
method: 'post',
data,
})
}
// IOT列表
export function getIotList(params = {}) {
return request({
url: '/material/iotMachine/getIotList',
method: 'get',
params,
})
}
// 删除IOT /iotMachine/deleteById/{iotId}
export function deleteIotById(params) {
return request({
url: '/material/iotMachine/deleteById/' + params,
method: 'delete',
})
}
// IOT下拉列表 /iotMachine/selectList
export function selectList(params = {}) {
return request({
url: '/material/iotMachine/selectList',
method: 'get',
params,
})
}
// 绑定IOT /iotMachine/bind
export function bindIot(data) {
return request({
url: '/material/iotMachine/bind',
method: 'post',
data,
})
}
// 解绑IOT /iotMachine/unbind
export function unbindIot(data) {
return request({
url: '/material/iotMachine/unbind',
method: 'post',
data,
})
}
// 获取绑定IOT列表 /iotMachine/getTypeList
export function getTypeList(params = {}) {
return request({
url: '/material/iotMachine/getTypeList',
method: 'get',
params,
})
}
// 绑定详情 /iotMachine/getRecordList
export function getRecordList(params = {}) {
return request({
url: '/material/iotMachine/getRecordList',
method: 'get',
params,
})
}
// 所有绑定详情 /iotMachine/getRecordListAll
export function getRecordListAll(params = {}) {
return request({
url: '/material/iotMachine/getRecordListAll',
method: 'get',
params,
})
}

View File

@ -22,13 +22,14 @@
width="55"
:index="indexContinuation(queryParams.pageNum, queryParams.pageSize)"
/>
<el-table-column label="绑定设备名称" prop="name" align="center" />
<el-table-column label="设备编号" prop="code" align="center" />
<el-table-column label="绑定设备名称" prop="typeName" align="center" />
<el-table-column label="设备编号" prop="maCode" align="center" />
<el-table-column label="绑定日期" prop="bindTime" align="center" />
<el-table-column label="解绑日期" prop="unbindTime" align="center" />
<el-table-column label="解绑日期" prop="unBindTime" align="center" />
</el-table>
<pagination
v-show="total > 0"
:total="total"
:page.sync="queryParams.pageNum"
:limit.sync="queryParams.pageSize"
@ -39,6 +40,8 @@
<script>
import PageHeader from '@/components/pageHeader'
import { getRecordList } from '@/api/store/iotManagement'
export default {
name: 'BindDetails',
props: {
@ -46,6 +49,10 @@ export default {
type: Boolean,
default: false,
},
iotId: {
type: Number,
default: '',
},
},
components: {
PageHeader,
@ -61,14 +68,7 @@ export default {
pageNum: 1,
pageSize: 10,
},
tableData: [
{
name: '设备1',
code: '001',
bindTime: '2021-08-01',
unbindTime: '2021-08-02',
},
],
tableData: [],
pageContent: '绑定详情',
}
},
@ -80,22 +80,20 @@ export default {
console.log('🚀 ~ handleQuery ~ 查询:', this.queryForm.keyWord)
this.getList()
},
getList() {
const params = {
keyWord: this.queryForm.keyWord || '',
pageNum: this.queryParams.pageNum,
pageSize: this.queryParams.pageSize,
async getList() {
try {
const params = {
keyWord: this.queryForm.keyWord,
iotId: this.iotId,
...this.queryParams
}
console.log('🚀 ~ getList ~ 获取列表', params)
const res = await getRecordList(params)
this.tableData = res.rows
this.total = res.total
} catch (err) {
console.log('🚀 ~ getList ~ err', err)
}
console.log('🚀 ~ getList ~ 获取列表', params)
// (params)
// .then(res => {
// this.tableData = res.data
// this.total = res.total
// })
// .catch(err => {
// console.log('🚀 ~ getList ~ err:', err)
// })
},
goBack() {
this.$tab.refreshPage()

View File

@ -24,31 +24,55 @@
width="55"
:index="indexContinuation(queryParams.pageNum, queryParams.pageSize)"
/>
<el-table-column label="设备类型" prop="type" align="center" />
<el-table-column label="设备编号" prop="code" align="center" />
<el-table-column label="设备状态" prop="equipmentStatus" align="center" />
<el-table-column label="二维码" align="center">
<el-table-column label="设备类型" prop="iotTypeName" align="center" />
<el-table-column label="设备编号" prop="iotCode" align="center" />
<el-table-column label="设备状态" prop="iotStatus" align="center">
<template v-slot="{ row }">
<el-tag v-if="row.iotStatus == 0" type="success">在线</el-tag>
<el-tag v-else type="danger">掉线</el-tag>
</template>
</el-table-column>
<el-table-column prop="prCode" label="二维码" align="center">
<template v-slot="{ row }">
<el-button type="text" size="small" @click="showQrCode(row)">查看</el-button>
</template>
</el-table-column>
<el-table-column label="状态" align="center">
<template v-slot="{ row }">
<el-tag v-if="row.status == '已绑定'" type="success">{{ row.status }}</el-tag>
<el-tag v-else type="danger">{{ row.status }}</el-tag>
<el-tag v-if="row.bindStatus == 0" type="success">已绑定</el-tag>
<el-tag v-else type="danger">未绑定</el-tag>
</template>
</el-table-column>
<el-table-column label="操作" align="center">
<template v-slot="{ row }">
<el-button type="text" size="small" @click="handleCheck(row)">记录</el-button>
<el-button type="text" size="small" @click="handleEdit(row)">修改</el-button>
<el-button type="text" size="small" style="color: red" @click="handleDelete(row)">删除</el-button>
<el-button type="text" size="small" style="color: red" @click="handleUnbind(row)">解绑</el-button>
<el-button type="text" size="small" @click="handleCheck(row)" icon="el-icon-view">记录</el-button>
<el-button type="text" size="small" @click="handleEdit(row)" icon="el-icon-edit-outline">修改</el-button>
<el-button
type="text"
size="small"
style="color: red"
@click="handleDelete(row)"
v-if="row.bindStatus == 1"
icon="el-icon-delete"
>
删除
</el-button>
<el-button
type="text"
size="small"
style="color: red"
@click="handleUnbind(row)"
v-if="row.bindStatus == 0"
icon="el-icon-connection"
>
解绑
</el-button>
</template>
</el-table-column>
</el-table>
<pagination
v-show="total > 0"
:total="total"
:page.sync="queryParams.pageNum"
:limit.sync="queryParams.pageSize"
@ -69,13 +93,23 @@
<!-- 添加/修改 设备弹框 -->
<el-dialog :title="title" :visible.sync="IOTOpen" width="500px" append-to-body>
<el-form :model="IOTForm" ref="IOTForm" label-width="120px" size="small" :rules="rules">
<el-form-item label="设备类型" prop="type">
<el-select v-model="IOTForm.type" filterable clearable placeholder="请选择设备类型" style="width: 280px">
<el-form-item label="设备类型: " prop="iotType">
<el-select v-model="IOTForm.iotType" filterable clearable placeholder="请选择设备类型" style="width: 280px">
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
</el-select>
</el-form-item>
<el-form-item label="设备编号" prop="code">
<el-input v-model="IOTForm.code" clearable placeholder="请输入设备编号" style="width: 280px" />
<el-form-item label="设备编号: " prop="iotCode">
<el-input v-model="IOTForm.iotCode" clearable placeholder="请输入设备编号" style="width: 280px" />
</el-form-item>
<!-- 修改设备状态: 使用Switch开关 -->
<el-form-item label="设备状态: " prop="iotStatus" v-if="isEdit">
<el-switch
v-model="IOTForm.iotStatus"
active-text="在线"
inactive-text="掉线"
:active-value="0"
:inactive-value="1"
/>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
@ -85,13 +119,14 @@
</el-dialog>
</div>
<div v-else>
<BindDetails ref="bindDetails" :isShow="isShow" />
<BindDetails ref="bindDetails" :isShow="isShow" :iotId="iotId" />
</div>
</template>
<script>
import BindDetails from './component/BindDetails'
import QRCode from 'qrcodejs2'
import { addOrUpdate, getIotList, deleteIotById, getRecordListAll, unbindIot } from '@/api/store/iotManagement.js'
export default {
name: 'IOTequipment',
components: {
@ -113,44 +148,28 @@ export default {
pageNum: 1,
pageSize: 10,
},
tableData: [
{
id: 1,
type: '设备1',
code: '001',
equipmentStatus: '正常',
qrCode: '2024-0701',
status: '已绑定',
},
{
id: 2,
type: '设备2',
code: '002',
equipmentStatus: '正常',
qrCode: '2024-0702',
status: '未绑定',
},
],
tableData: [],
IOTForm: {
type: '',
code: '',
iotType: '',
iotCode: '',
iotStatus: '',
},
options: [
{
value: '1',
label: '设备1',
value: '125',
label: '定位设备',
},
{
value: '2',
label: '设备2',
value: '126',
label: '检测设备',
},
],
title: '',
IOTOpen: false,
//
rules: {
type: [{ required: true, message: '请选择设备类型', trigger: 'change' }],
code: [
iotType: [{ required: true, message: '请选择设备类型', trigger: 'change' }],
iotCode: [
{ required: true, message: '请输入设备编号', trigger: 'blur' },
{
// 线(-) 线(_)
@ -160,6 +179,8 @@ export default {
},
],
},
isEdit: false,
iotId: undefined,
}
},
created() {
@ -178,14 +199,14 @@ export default {
}
console.log('🚀 ~ getList ~ 获取列表', params)
// (params)
// .then(res => {
// this.tableData = res.data
// this.total = res.total
// })
// .catch(err => {
// console.log('🚀 ~ getList ~ err:', err)
// })
getIotList(params)
.then(res => {
this.tableData = res.rows
this.total = res.total
})
.catch(err => {
console.log('🚀 ~ getList ~ err:', err)
})
},
//
getDeviceType() {
@ -200,11 +221,12 @@ export default {
addIOT() {
this.title = '添加设备'
this.IOTOpen = true
this.isEdit = false
this.getDeviceType()
this.$nextTick(() => {
this.IOTForm = {
type: '',
code: '',
iotType: '',
iotCode: '',
}
this.$refs.IOTForm.resetFields()
})
@ -215,10 +237,10 @@ export default {
cancelButtonText: '取消',
type: 'warning',
}).then(() => {
this.$message({
type: 'success',
message: '下载成功',
})
// this.$message({
// type: 'success',
// message: '',
// })
})
},
showQrCode(row) {
@ -231,6 +253,7 @@ export default {
this.uploadOpen = true
this.qrCode = row.qrCode
let str = this.qrUrl + row.qrCode
console.log('🚀 ~ showQrCode ~ str:', str)
this.$nextTick(() => {
this.$refs.codeItem.innerHTML = ''
var qrcode = new QRCode(this.$refs.codeItem, {
@ -247,32 +270,87 @@ export default {
handleCheck(row) {
console.log('🚀 ~ handleCheck ~ 记录:', row)
this.isShow = true
this.iotId = row.iotId
},
handleEdit(row) {
console.log('🚀 ~ handleEdit ~ 修改:', row)
// IOT
this.title = '修改设备'
this.IOTOpen = true
this.isEdit = true
this.getDeviceType()
this.IOTForm = {
type: row.type,
code: row.code,
}
this.$nextTick(() => {
this.$refs.IOTForm.resetFields()
this.IOTForm = {
iotId: row.iotId,
iotType: row.iotType,
iotCode: row.iotCode,
iotStatus: row.iotStatus,
}
})
},
handleDelete(row) {
console.log('🚀 ~ handleDelete ~ 删除:', row)
const params = {
id: row.id,
}
// (params).then(res => {
// this.getList()
// })
//
this.$confirm('是否删除该设备?', '系统提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
})
.then(() => {
//
deleteIotById(row.iotId).then(res => {
//
this.$message({
type: 'success',
message: '删除成功',
})
this.getList()
})
})
.catch(() => {
this.$message({
type: 'info',
message: '已取消删除',
})
})
},
handleUnbind(row) {
const params = {
id: row.id,
try {
const params = {
id: undefined,
iotId: row.iotId,
maCode: '',
typeId: undefined,
}
console.log('🚀 ~ handleUnbind ~ 解绑', row)
this.$confirm('确定解绑设备吗?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
})
.then(async () => {
let { data } = await getRecordListAll({ iotId: params.iotId })
console.log('🚀 ~ .then ~ res:', data)
data.forEach(item => {
if (!item.unBindTime) {
params.maCode = item.maCode
params.typeId = item.typeId
params.id = item.id
}
})
console.log('🚀 ~ .then ~ maCode:', params)
await unbindIot(params)
this.$message.success('解绑成功')
this.getList()
})
.catch((err) => {
console.log('🚀 ~ handleUnbind ~ err:', err)
this.$message.info('已取消解绑')
})
} catch (err) {
console.log('🚀 ~ handleUnbind ~ error', err)
}
console.log('🚀 ~ handleUnbind ~ 解绑', row)
},
selectionChange(val) {
console.log('🚀 ~ selectionChange ~ val:', val)
@ -282,18 +360,31 @@ export default {
this.$refs.IOTForm.validate(valid => {
if (valid) {
console.log('🚀 ~ submit ~ 确认提交', this.IOTForm)
const params = {
type: this.IOTForm.type,
code: this.IOTForm.code,
let params = {}
if (this.isEdit) {
//
params = {
...this.IOTForm,
}
} else {
//
params = {
...this.IOTForm,
}
}
// (params)
// .then(res => {
// this.IOTOpen = false
// this.getList()
// })
// .catch(err => {
// console.log('🚀 ~ submit ~ err:', err
// })
addOrUpdate(params)
.then(res => {
this.IOTOpen = false
// isEdit ? '' : ''
this.$message({
type: 'success',
message: this.isEdit ? '修改成功' : '添加成功',
})
this.getList()
})
.catch(err => {
console.log('🚀 ~ submit ~ err:', err)
})
}
})
},

View File

@ -1,5 +1,5 @@
<template>
<div class="app-container" v-if="isShow">
<div class="app-container" v-if="props.isShow">
<PageHeader :pageContent="pageContent" @goBack="goBack" />
<el-form :model="queryForm" ref="queryForm" size="small" :inline="true" label-width="68px" v-show="showSearch">
<el-form-item label="关键字" prop="keyWord">
@ -23,19 +23,26 @@
width="55"
:index="indexContinuation(queryParams.pageNum, queryParams.pageSize)"
/>
<el-table-column label="设备类型" prop="type" align="center" />
<el-table-column label="设备编号" prop="code" align="center" />
<el-table-column label="设备状态" prop="bindTime" align="center" />
<el-table-column label="绑定日期" prop="unbindTime" align="center" />
<el-table-column label="设备类型" prop="iotTypeName" align="center" />
<el-table-column label="设备编号" prop="iotCode" align="center" />
<el-table-column label="设备状态" prop="iotStatus" align="center">
<!-- iotStatus 0 在线 1 掉线 -->
<template v-slot="{ row }">
<el-tag v-if="row.iotStatus == 0" type="success">在线</el-tag>
<el-tag v-else type="danger">掉线</el-tag>
</template>
</el-table-column>
<el-table-column label="绑定日期" prop="bindTime" align="center" />
<el-table-column label="操作" align="center">
<template v-slot="{ row }">
<el-button type="text" size="small" @click="handleUnbind(row)" style="color: red;">解绑</el-button>
<el-button type="text" size="small" @click="handleUnbind(row)" style="color: red" icon="el-icon-connection">解绑</el-button>
</template>
</el-table-column>
</el-table>
<pagination
v-show="total > 0"
:total="total"
:page.sync="queryParams.pageNum"
:limit.sync="queryParams.pageSize"
@ -45,20 +52,32 @@
<!-- 绑定设备 -->
<el-dialog title="绑定设备" :visible.sync="IOTOpen" width="500px" append-to-body :rules="rules">
<el-form :model="IOTForm" ref="IOTForm" label-width="120px" size="small" :rules="rules">
<el-form-item label="设备类型" prop="type">
<el-select v-model="IOTForm.type" filterable clearable placeholder="请选择" style="width: 280px">
<el-option v-for="item in typeOptions" :key="item.value" :label="item.label" :value="item.value" />
<el-form-item label="设备类型" prop="iotType">
<el-select
v-model="IOTForm.iotType"
filterable
clearable
placeholder="请选择"
style="width: 280px"
@change="changeIotType"
>
<el-option
v-for="item in typeOptions"
:key="item.iotTypeId"
:label="item.iotTypeName"
:value="item.iotTypeId"
/>
</el-select>
</el-form-item>
<el-form-item label="设备编号" prop="code">
<el-select v-model="IOTForm.code" filterable clearable placeholder="请选择" style="width: 280px">
<el-option v-for="item in codeOptions" :key="item.value" :label="item.label" :value="item.value" />
<el-form-item label="设备编号" prop="iotId">
<el-select v-model="IOTForm.iotId" filterable clearable placeholder="请选择" style="width: 280px">
<el-option v-for="item in codeOptions" :key="item.iotId" :label="item.iotCode" :value="item.iotId" />
</el-select>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="IOTOpen = false"> </el-button>
<el-button type="primary" @click="submit"> </el-button>
<el-button type="primary" @click="submit" :loading="loading"> </el-button>
</div>
</el-dialog>
</div>
@ -66,12 +85,14 @@
<script>
import PageHeader from '@/components/pageHeader'
import { selectList, bindIot, getTypeList, unbindIot } from '@/api/store/iotManagement'
export default {
name: 'BindIOT',
props: {
isShow: {
type: Boolean,
default: false,
props: {
type: Object,
default: () => {},
},
},
components: {
@ -79,6 +100,7 @@ export default {
},
data() {
return {
loading: false,
showSearch: true, //
queryForm: {
keyWord: '',
@ -88,116 +110,140 @@ export default {
pageNum: 1,
pageSize: 10,
},
tableData: [
{
name: '设备1',
code: '001',
bindTime: '2021-08-01',
unbindTime: '2021-08-02',
},
],
tableData: [],
pageContent: 'IOT设备查看',
IOTForm: {
type: '',
code: '',
iotType: '',
iotId: '',
},
IOTOpen: false,
typeOptions: [
{
value: '1',
label: '设备1',
},
{
value: '2',
label: '设备2',
},
],
codeOptions: [
{
value: '001',
label: '001',
},
{
value: '002',
label: '002',
},
],
typeOptions: [], //
codeOptions: [], //
rules: {
type: [{ required: true, message: '请选择设备类型', trigger: 'change' }],
code: [{ required: true, message: '请选择设备编号', trigger: 'change' }],
iotType: [{ required: true, message: '请选择设备类型', trigger: 'change' }],
iotId: [{ required: true, message: '请选择设备编号', trigger: 'change' }],
},
}
},
created() {
console.log('🚀 ~ created ~ BindIOT', this.props)
this.getList()
},
methods: {
//
handleQuery() {
console.log('🚀 ~ handleQuery ~ 查询:', this.queryForm.keyWord)
this.getList()
},
getList() {
const params = {
keyWord: this.queryForm.keyWord || '',
pageNum: this.queryParams.pageNum,
pageSize: this.queryParams.pageSize,
}
console.log('🚀 ~ getList ~ 获取列表', params)
//
async getList() {
try {
const params = {
maCode: this.props.maCode,
...this.queryForm,
...this.queryParams,
}
console.log('🚀 ~ getList ~ 获取列表', params)
// (params)
// .then(res => {
// this.tableData = res.data
// this.total = res.total
// })
// .catch(err => {
// console.log('🚀 ~ getList ~ err:', err)
// })
const res = await getTypeList(params)
this.tableData = res.rows
this.total = res.total
} catch (err) {
console.log('🚀 ~ getList ~ err:', err)
}
},
//
goBack() {
this.$tab.refreshPage()
},
//
bindNewIOT() {
console.log('🚀 ~ bindNewIOT ~ 绑定新设备')
this.IOTOpen = true
this.getOptions()
this.getIotType()
this.$nextTick(() => {
this.$refs.IOTForm.resetFields()
})
},
handleUnbind() {
console.log('🚀 ~ handleUnbind ~ 解绑')
},
submit() {
console.log('🚀 ~ submit ~ 提交绑定设备')
const params = {
type: this.IOTForm.type,
code: this.IOTForm.code,
}
//
this.$refs.IOTForm.validate(valid => {
if (valid) {
console.log('🚀 ~ submit ~ 提交绑定设备', params)
// (params)
// .then(res => {
// this.IOTOpen = false
// this.getList()
// })
// .catch(err => {
// console.log('🚀 ~ submit ~ err:', err)
// })
} else {
return false
//
handleUnbind(row) {
console.log('🚀 ~ handleUnbind ~ 解绑', row)
try {
const params = {
maCode: this.props.maCode,
typeId: this.props.typeId,
id: row.id,
iotId: row.iotId,
}
})
this.$confirm('确定解绑设备吗?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
})
.then(async () => {
await unbindIot(params)
this.$message.success('解绑成功')
this.getList()
})
.catch(() => {
this.$message.info('已取消解绑')
})
} catch (err) {
console.log('🚀 ~ handleUnbind ~ err:', err)
}
},
//
submit() {
try {
//
this.$refs.IOTForm.validate(async valid => {
if (valid) {
this.loading = true
const params = {
iotTypeId: this.IOTForm.iotType,
iotId: this.IOTForm.iotId,
maCode: this.props.maCode,
typeId: this.props.typeId,
}
console.log('🚀 ~ submit ~ 提交绑定设备', params, this.props)
await bindIot(params)
this.$message.success('绑定成功')
this.IOTOpen = false
this.loading = false
this.getList()
} else {
return false
}
})
} catch (err) {
console.log('🚀 ~ submit ~ err:', err)
this.loading = false
}
},
//
getOptions() {
// ().then(res => {
// this.typeOptions = res.typeOptions
// this.codeOptions = res.codeOptions
// }).catch(err => {
// console.log('🚀 ~ getOptions ~ err:', err)
// })
async getIotType() {
try {
const res = await selectList()
this.typeOptions = res.data
} catch (err) {
console.log('🚀 ~ getIotType ~ err:', err)
}
},
//
async changeIotType(iotTypeId) {
try {
this.codeOptions = []
this.IOTForm.iotId = ''
if (!iotTypeId) return
const params = {
iotTypeId,
}
//
const res = await selectList(params)
this.codeOptions = res.data
} catch (err) {
console.log('🚀 ~ changeIotType ~ err:', err)
}
},
},
}

View File

@ -1,6 +1,6 @@
<template>
<!-- 编码设备管理 -->
<div class="app-container" id="devices" v-if="!isShow">
<div class="app-container" id="devices" v-if="!props.isShow">
<el-form
:model="queryParams"
ref="queryForm"
@ -547,7 +547,7 @@
<MapDialog ref="mapDialog" @getList="getList" />
</div>
<div v-else>
<BindIOT :isShow="isShow" />
<BindIOT :props="props" />
</div>
</template>
@ -579,6 +579,11 @@ export default {
return {
openMap: false,
isShow: false,
props: {
isShow: false,
typeId: '',
maCode: '',
},
//
loading: true,
//
@ -827,7 +832,12 @@ export default {
}, `编码设备管理_${new Date().getTime()}.xlsx`)
},
handleBindIOT(row) {
this.isShow = true
console.log('🚀 ~ handleBindIOT ~ row:', row)
this.props = {
isShow: true,
typeId: row.typeId,
maCode: row.maCode,
}
},
handleMap(row) {
console.log('~ handleMap ~ 地图', row)

View File

@ -46,7 +46,7 @@ module.exports = {
// target: `http://10.40.92.8:8080`, //超
// target: `http://10.40.92.81:8080`, //韩/
// target: `http://10.40.92.74:8080`,//旭/
target: `http://192.168.2.246:28080`, //帅
target: `http://192.168.2.248:28080`, //帅
// target: `http://10.40.92.253:28080`, //福
//******** 注意事项 ********* */