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

sgzb-ui/src/api/iotDevice/index.js

@@ -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',
+
+    })
+}

sgzb-ui/src/views/iotDevice/index.vue

@@ -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
+            <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="操作">
+                <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: [
+            deviceList: [],
-                {
+            total: 0,
-                    deviceName: '测试设备',
-                },
-            ],
             // 弹框的参数
             dialogConfig,
+            // 列表查询参数
+            queryParams: {
+                pageNum: 1,
+                pageSize: 10,
+                keyWords: '',
+            },
             // 新增给设备数据源
             addDeviceParams: {
-                deviceType: '',
+                iotType: '',
-                deviceCode: '',
+                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.iotType = ''
-            this.addDeviceParams.deviceCode = ''
+            this.addDeviceParams.iotCode = ''
             this.dialogConfig.outerVisible = false
         },
 
@@ -230,23 +296,50 @@ export default {
         },
 
         /** 删除按钮 */
-        handleDelete() {
+        handleDelete(id) {
             this.$confirm('是否确定删除当前设备, 是否继续?', '提示', {
                 confirmButtonText: '确定',
                 cancelButtonText: '取消',
                 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('是否确定解绑当前设备, 是否继续?', '提示', {
                 confirmButtonText: '确定',
                 cancelButtonText: '取消',
                 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()
+                }
             })
         },
     },