IOT设备管理页面搭建

sgzb-ui/src/views/warehouseManage/machinery/IOTequipment/component/BindDetails.vue

@@ -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>

sgzb-ui/src/views/warehouseManage/machinery/IOTequipment/index.vue

@@ -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>

sgzb-ui/src/views/warehouseManage/machinery/coding/component/BindIOT.vue

@@ -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>

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

@@ -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>

sgzb-ui/vue.config.js

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