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

IOT设备管理页面搭建

This commit is contained in:
binbin_pan 2024-07-02 17:59:58 +08:00
parent 684f41e399
commit 9adc2a5528
5 changed files with 668 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

112
sgzb-ui/src/views/warehouseManage/machinery/IOTequipment/component/BindDetails.vue Normal file
View File

@ -0,0 +1,112 @@
<template>
<div class="app-container" v-if="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">
<el-input v-model="queryForm.keyWord" clearable placeholder="请输入关键字" @keyup.enter.native="handleQuery" />
</el-form-item>
<el-form-item>
<el-button type="primary" size="small" @click="handleQuery">搜索</el-button>
</el-form-item>
</el-form>
<el-row :gutter="10" class="mb8">
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
</el-row>
<el-table :data="tableData" style="width: 100%">
<el-table-column
type="index"
label="序号"
align="center"
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="bindTime" align="center" />
<el-table-column label="解绑日期" prop="unbindTime" align="center" />
</el-table>
<pagination
:total="total"
:page.sync="queryParams.pageNum"
:limit.sync="queryParams.pageSize"
@pagination="getList"
/>
</div>
</template>
<script>
import PageHeader from '@/components/pageHeader'
export default {
name: 'BindDetails',
props: {
isShow: {
type: Boolean,
default: false,
},
},
components: {
PageHeader,
},
data() {
return {
showSearch: true, // 是否显示搜索
queryForm: {
keyWord: '',
},
total: 0,
queryParams: {
pageNum: 1,
pageSize: 10,
},
tableData: [
{
name: '设备1',
code: '001',
bindTime: '2021-08-01',
unbindTime: '2021-08-02',
},
],
pageContent: '绑定详情',
}
},
created() {
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)
// 接口(params)
// .then(res => {
// this.tableData = res.data
// this.total = res.total
// })
// .catch(err => {
// console.log('🚀 ~ getList ~ err:', err)
// })
},
goBack() {
this.$tab.refreshPage()
},
},
}
</script>
<style lang="scss" scoped>
.maCode {
margin-top: 15px;
font-size: 18px;
}
</style>

307
sgzb-ui/src/views/warehouseManage/machinery/IOTequipment/index.vue Normal file
View File

@ -0,0 +1,307 @@
<template>
<div class="app-container" v-if="!isShow">
<el-form :model="queryForm" ref="queryForm" size="small" :inline="true" label-width="68px" v-show="showSearch">
<el-form-item label="关键字" prop="keyWord">
<el-input v-model="queryForm.keyWord" clearable placeholder="请输入关键字" @keyup.enter.native="handleQuery" />
</el-form-item>
<el-form-item>
<el-button type="primary" size="small" @click="handleQuery">搜索</el-button>
<el-button type="primary" size="small" @click="addIOT">添加设备</el-button>
<el-button type="primary" size="small" @click="downloadQRCord">下载二维码</el-button>
</el-form-item>
</el-form>
<el-row :gutter="10" class="mb8">
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
</el-row>
<el-table :data="tableData" style="width: 100%" @selection-change="selectionChange">
<el-table-column type="selection" width="55" align="center" />
<el-table-column
type="index"
label="序号"
align="center"
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">
<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>
</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>
</template>
</el-table-column>
</el-table>
<pagination
:total="total"
:page.sync="queryParams.pageNum"
:limit.sync="queryParams.pageSize"
@pagination="getList"
/>
<!-- 二维码弹框 -->
<el-dialog title="查看二维码" :visible.sync="uploadOpen" width="500px" append-to-body>
<div style="text-align: center">
<div class="qrCodeImg">
<div id="qrcode" class="qrcode" ref="codeItem"></div>
</div>
<div class="maCode">二维码编号：{{ rowObj.qrCode }}</div>
</div>
<div slot="footer" class="dialog-footer" style="text-align: center"></div>
</el-dialog>
<!-- 添加/修改 设备弹框 -->
<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-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>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="IOTOpen = false">取 消</el-button>
<el-button type="primary" @click="submit">确 定</el-button>
</div>
</el-dialog>
</div>
<div v-else>
<BindDetails ref="bindDetails" :isShow="isShow" />
</div>
</template>
<script>
import BindDetails from './component/BindDetails'
import QRCode from 'qrcodejs2'
export default {
name: 'IOTequipment',
components: {
BindDetails,
},
data() {
return {
isShow: false,
showSearch: true, // 是否显示搜索
uploadOpen: false, // 二维码弹框
rowObj: {},
qrCode: '',
qrUrl: this.globalUrl.qrUrl,
queryForm: {
keyWord: '',
},
total: 0,
queryParams: {
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: '未绑定',
},
],
IOTForm: {
type: '',
code: '',
},
options: [
{
value: '1',
label: '设备1',
},
{
value: '2',
label: '设备2',
},
],
title: '',
IOTOpen: false,
// 校验
rules: {
type: [{ required: true, message: '请选择设备类型', trigger: 'change' }],
code: [
{ required: true, message: '请输入设备编号', trigger: 'blur' },
{
// 限制输入字母数字 短横线(-) 下划线(_)
pattern: /^[a-zA-Z0-9_-]+$/,
message: '请输入正确的设备编码',
trigger: 'blur',
},
],
},
}
},
created() {
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)
// 接口(params)
// .then(res => {
// this.tableData = res.data
// this.total = res.total
// })
// .catch(err => {
// console.log('🚀 ~ getList ~ err:', err)
// })
},
// 获取设备类型
getDeviceType() {
// 接口()
// .then(res => {
// this.options = res.data
// })
// .catch(err => {
// console.log('🚀 ~ getDeviceType ~ err:', err)
// })
},
addIOT() {
this.title = '添加设备'
this.IOTOpen = true
this.getDeviceType()
this.$nextTick(() => {
this.IOTForm = {
type: '',
code: '',
}
this.$refs.IOTForm.resetFields()
})
},
downloadQRCord() {
this.$confirm('是否下载二维码？', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
}).then(() => {
this.$message({
type: 'success',
message: '下载成功',
})
})
},
showQrCode(row) {
console.log(row)
if (row.qrCode == null) {
this.$message.error('当前设备没有二维码')
return
}
this.rowObj = row
this.uploadOpen = true
this.qrCode = row.qrCode
let str = this.qrUrl + row.qrCode
this.$nextTick(() => {
this.$refs.codeItem.innerHTML = ''
var qrcode = new QRCode(this.$refs.codeItem, {
text: str, //二维码内容
width: 256,
height: 256,
colorDark: '#000000',
colorLight: '#ffffff',
correctLevel: QRCode.CorrectLevel.H,
})
// console.log('🚀 ~ showQrCode ~ qrcode:', qrcode)
}, 500)
},
handleCheck(row) {
console.log('🚀 ~ handleCheck ~ 记录:', row)
this.isShow = true
},
handleEdit(row) {
console.log('🚀 ~ handleEdit ~ 修改:', row)
// 修改IOT设备
this.title = '修改设备'
this.IOTOpen = true
this.getDeviceType()
this.IOTForm = {
type: row.type,
code: row.code,
}
},
handleDelete(row) {
console.log('🚀 ~ handleDelete ~ 删除:', row)
const params = {
id: row.id,
}
// 接口(params).then(res => {
// this.getList()
// })
},
selectionChange(val) {
console.log('🚀 ~ selectionChange ~ val:', val)
},
// 确认提交
submit() {
this.$refs.IOTForm.validate(valid => {
if (valid) {
console.log('🚀 ~ submit ~ 确认提交', this.IOTForm)
const params = {
type: this.IOTForm.type,
code: this.IOTForm.code,
}
// 接口(params)
// .then(res => {
// this.IOTOpen = false
// this.getList()
// })
// .catch(err => {
// console.log('🚀 ~ submit ~ err:', err
// })
}
})
},
},
}
</script>
<style lang="scss" scoped>
.qrCodeImg {
display: flex;
align-items: center;
justify-content: center;
}
.maCode {
margin-top: 15px;
font-size: 18px;
}
</style>

211
sgzb-ui/src/views/warehouseManage/machinery/coding/component/BindIOT.vue Normal file
View File

@ -0,0 +1,211 @@
<template>
<div class="app-container" v-if="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">
<el-input v-model="queryForm.keyWord" clearable placeholder="请输入关键字" @keyup.enter.native="handleQuery" />
</el-form-item>
<el-form-item>
<el-button type="primary" size="small" @click="handleQuery">搜索</el-button>
<el-button type="primary" size="small" @click="bindNewIOT">绑定新设备</el-button>
</el-form-item>
</el-form>
<el-row :gutter="10" class="mb8">
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
</el-row>
<el-table :data="tableData" style="width: 100%">
<el-table-column
type="index"
label="序号"
align="center"
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="操作" align="center">
<template v-slot="{ row }">
<el-button type="text" size="small" @click="handleUnbind(row)" style="color: red;">解绑</el-button>
</template>
</el-table-column>
</el-table>
<pagination
:total="total"
:page.sync="queryParams.pageNum"
:limit.sync="queryParams.pageSize"
@pagination="getList"
/>
<!-- 绑定设备 -->
<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-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-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>
</div>
</el-dialog>
</div>
</template>
<script>
import PageHeader from '@/components/pageHeader'
export default {
name: 'BindIOT',
props: {
isShow: {
type: Boolean,
default: false,
},
},
components: {
PageHeader,
},
data() {
return {
showSearch: true, // 是否显示搜索
queryForm: {
keyWord: '',
},
total: 0,
queryParams: {
pageNum: 1,
pageSize: 10,
},
tableData: [
{
name: '设备1',
code: '001',
bindTime: '2021-08-01',
unbindTime: '2021-08-02',
},
],
pageContent: 'IOT设备查看',
IOTForm: {
type: '',
code: '',
},
IOTOpen: false,
typeOptions: [
{
value: '1',
label: '设备1',
},
{
value: '2',
label: '设备2',
},
],
codeOptions: [
{
value: '001',
label: '001',
},
{
value: '002',
label: '002',
},
],
rules: {
type: [{ required: true, message: '请选择设备类型', trigger: 'change' }],
code: [{ required: true, message: '请选择设备编号', trigger: 'change' }],
},
}
},
created() {
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)
// 接口(params)
// .then(res => {
// this.tableData = res.data
// 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.$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
}
})
},
// 获取下拉
getOptions() {
// 接口().then(res => {
// this.typeOptions = res.typeOptions
// this.codeOptions = res.codeOptions
// }).catch(err => {
// console.log('🚀 ~ getOptions ~ err:', err)
// })
},
},
}
</script>
<style lang="scss" scoped>
.maCode {
margin-top: 15px;
font-size: 18px;
}
</style>

38
sgzb-ui/src/views/warehouseManage/machinery/coding/index.vue
View File

@ -1,6 +1,6 @@
<template>
<!-- 编码设备管理 -->
<div class="app-container" id="devices">
<div class="app-container" id="devices" v-if="!isShow">
<el-form
:model="queryParams"
ref="queryForm"
@ -204,6 +204,29 @@
>
</template>
</el-table-column>
<el-table-column
label="IOT设备"
align="center"
prop="equipment"
>
<template slot-scope="scope">
<el-button
size="mini"
type="text"
@click="handleBindIOT(scope.row)"
>{{ scope.row.equipment || '未绑定' }}</el-button
>
</template>
</el-table-column>
<el-table-column
label="位置信息"
align="center"
prop="location"
>
<template v-slot="{row}">
<i class="el-icon-location-information" style="color: #459BD4; font-size: 24px;" @click="handleMap(row)"></i>
</template>
</el-table-column>
<el-table-column
label="所在仓库"
align="center"
@ -510,6 +533,9 @@
</div>
</el-dialog>
</div>
<div v-else>
<BindIOT :isShow="isShow" />
</div>
</template>
<script>
@ -529,13 +555,15 @@ import { listHouseTree } from '@/api/store/shelves'
import Treeselect from '@riophae/vue-treeselect'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
import QRCode from 'qrcodejs2'
import BindIOT from './component/BindIOT.vue'
export default {
name: 'Devices',
dicts: ['sys_normal_disable'],
components: { Treeselect },
components: { Treeselect, BindIOT },
data() {
return {
isShow: false,
// 遮罩层
loading: true,
// 选中数组
@ -783,6 +811,12 @@ export default {
dataCondition: this.ids
}, `编码设备管理_${new Date().getTime()}.xlsx`)
},
handleBindIOT(row) {
this.isShow = true
},
handleMap(row) {
console.log('~ handleMap ~ 地图', row)
}
},
}
</script>

4
sgzb-ui/vue.config.js
View File

@ -46,8 +46,8 @@ 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://10.40.92.148:28080`, //帅
target: `http://10.40.92.253:28080`, //福
target: `http://192.168.2.246:28080`, //帅
// target: `http://10.40.92.253:28080`, //福
//******** 注意事项 ********* */
//1.全局替换qrUrl二维码扫码提供的网址-发布服务器的地址target;