From 53107ca921c6608329c622a459fd03e123423c74 Mon Sep 17 00:00:00 2001
From: BianLzhaoMin <11485688+bianliangzhaomin123@user.noreply.gitee.com>
Date: Mon, 5 Aug 2024 13:37:12 +0800
Subject: [PATCH] =?UTF-8?q?IOT=E8=AE=BE=E5=A4=87=E7=AE=A1=E7=90=86?=
 =?UTF-8?q?=E9=A1=B5=E9=9D=A2=E5=AE=8C=E5=96=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 sgzb-ui/src/views/iotDevice/config.js |  20 ++
 sgzb-ui/src/views/iotDevice/index.vue | 254 ++++++++++++++++++++++++++
 sgzb-ui/vue.config.js                 |   3 +-
 3 files changed, 276 insertions(+), 1 deletion(-)
 create mode 100644 sgzb-ui/src/views/iotDevice/config.js
 create mode 100644 sgzb-ui/src/views/iotDevice/index.vue

diff --git a/sgzb-ui/src/views/iotDevice/config.js b/sgzb-ui/src/views/iotDevice/config.js
new file mode 100644
index 00000000..70cb8ce4
--- /dev/null
+++ b/sgzb-ui/src/views/iotDevice/config.js
@@ -0,0 +1,20 @@
+export const dialogConfig = {
+    outerWidth: '70%',
+    outerTitle: '',
+    outerVisible: false,
+    handleColShow: false, // 是否显示操作列
+    pageShow: true,  // 是否显示分页组件
+    isSelShow: false,// 表格是否需要复选框
+    isFormShow: true, // 是否显示表单查询组件
+    formLabel: [
+        { f_label: '关键字', f_model: 'keywords', f_type: 'ipt' },
+    ],
+
+    columnsList: [
+        { t_width: '', t_props: 'machineTypeName', t_label: '绑定设备名称' },
+        { t_width: '', t_props: 'specificationType', t_label: '设备编号' },
+        { t_width: '', t_props: 'maCode', t_label: '绑定时间' },
+        { t_width: '', t_props: 'scrapNum', t_label: '解绑时间' },
+    ],
+
+}
\ No newline at end of file
diff --git a/sgzb-ui/src/views/iotDevice/index.vue b/sgzb-ui/src/views/iotDevice/index.vue
new file mode 100644
index 00000000..1532f8ea
--- /dev/null
+++ b/sgzb-ui/src/views/iotDevice/index.vue
@@ -0,0 +1,254 @@
+<template>
+    <div class="app-container">
+        <!-- 查询 -->
+        <el-form inline>
+            <el-form-item>
+                <el-input placeholder="请输入关键字" />
+            </el-form-item>
+            <el-form-item>
+                <el-button size="mini" type="primary">搜索</el-button>
+                <el-button size="mini" type="primary" @click="addDevice()"
+                    >添加设备</el-button
+                >
+                <el-button size="mini" type="primary" @click="uploadCode()"
+                    >下载二维码</el-button
+                >
+            </el-form-item>
+        </el-form>
+
+        <!-- 列表 -->
+        <el-table
+            border
+            :data="deviceList"
+            @selection-change="handleSelectionChange"
+        >
+            <el-table-column align="center" type="selection" width="55" />
+            <el-table-column
+                align="center"
+                type="index"
+                width="55"
+                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="deviceName"
+                align="center"
+                label="绑定状态"
+            />
+            <el-table-column prop="deviceName" align="center" label="操作">
+                <el-button
+                    type="text"
+                    icon="el-icon-tickets"
+                    @click="handleViewRecord()"
+                    >记录</el-button
+                >
+                <el-button
+                    type="text"
+                    icon="el-icon-delete"
+                    style="color: #f56c6c"
+                    @click="handleDelete()"
+                    >删除</el-button
+                >
+                <el-button
+                    type="text"
+                    icon="el-icon-document-delete"
+                    style="color: #e6a23c"
+                    @click="handleUnbind()"
+                    >解绑</el-button
+                >
+            </el-table-column>
+        </el-table>
+
+        <!-- 弹框 -->
+        <DialogModel
+            :dialogConfig="dialogConfig"
+            @closeDialogOuter="closeDialogOuter"
+        >
+            <!-- 设备添加表单 -->
+            <template slot="outerContent">
+                <template v-if="dialogConfig.outerTitle === '添加设备'">
+                    <el-form
+                        label-width="80px"
+                        :model="addDeviceParams"
+                        :rules="addDeviceRules"
+                        ref="addDeviceParamsRef"
+                    >
+                        <el-form-item label="设备类型" prop="deviceType">
+                            <el-select
+                                style="width: 100%"
+                                placeholder="请选择设备类型"
+                                clearable
+                                v-model="addDeviceParams.deviceType"
+                            >
+                                <el-option value="1" label="定位设备" />
+                            </el-select>
+                        </el-form-item>
+                        <el-form-item label="设备编号" prop="deviceCode">
+                            <el-input
+                                placeholder="请输入设备编号"
+                                clearable
+                                v-model="addDeviceParams.deviceCode"
+                            />
+                        </el-form-item>
+                    </el-form>
+
+                    <el-row style="margin-top: 20px; text-align: right">
+                        <el-button
+                            size="mini"
+                            type="primary"
+                            @click="handleSubmit()"
+                            >确 定</el-button
+                        >
+                        <el-button
+                            size="mini"
+                            type="warning"
+                            @click="handleCancel()"
+                            >取 消</el-button
+                        >
+                    </el-row>
+                </template>
+                <TableModel
+                    :config="dialogConfig"
+                    :sendParams="sendParams"
+                    v-else
+                />
+            </template>
+        </DialogModel>
+    </div>
+</template>
+
+<script>
+import DialogModel from '@/components/DialogModel' // 弹框组件
+import TableModel from '@/components/TableModel' // 表格组件
+import { dialogConfig } from './config'
+export default {
+    components: {
+        DialogModel,
+        TableModel,
+    },
+    data() {
+        return {
+            deviceList: [
+                {
+                    deviceName: '测试设备',
+                },
+            ],
+            // 弹框的参数
+            dialogConfig,
+            // 新增给设备数据源
+            addDeviceParams: {
+                deviceType: '',
+                deviceCode: '',
+            },
+            // 新增设备表单校验
+            addDeviceRules: {
+                deviceType: [
+                    {
+                        required: true,
+                        message: '请选择设备类型',
+                        trigger: 'change',
+                    },
+                ],
+                deviceCode: [
+                    {
+                        required: true,
+                        message: '请输入11位的设备编号',
+                        trigger: 'blur',
+                        min: 11,
+                        max: 11,
+                    },
+                ],
+            },
+            // 查看绑定记录时的参数
+            sendParams: {},
+            // 复选框选中的数据
+            selectList: [],
+        }
+    },
+
+    methods: {
+        /** 添加设备 */
+        addDevice() {
+            this.dialogConfig.outerWidth = '40%'
+            this.dialogConfig.outerTitle = '添加设备'
+            this.dialogConfig.outerVisible = true
+        },
+
+        /** 二维码下载 */
+        uploadCode() {
+            if (this.selectList.length < 1) {
+                this.$message.error('请勾选需要下载的设备！')
+                return
+            }
+        },
+        /** 复选框选择事件 */
+        handleSelectionChange(list) {
+            this.selectList = list
+        },
+        /** 确定按钮 */
+        handleSubmit() {
+            this.$refs.addDeviceParamsRef.validate((valid) => {
+                if (valid) {
+                    // 1. 校验通过调后台Api
+                    console.log('走后续逻辑')
+                    this.dialogConfig.outerVisible = false
+                }
+            })
+        },
+        /** 取消按钮 */
+        handleCancel() {
+            this.addDeviceParams.deviceType = ''
+            this.addDeviceParams.deviceCode = ''
+            this.dialogConfig.outerVisible = false
+        },
+
+        /** 查看记录 */
+        handleViewRecord() {
+            this.dialogConfig.outerWidth = '70%'
+            this.dialogConfig.outerTitle = '绑定记录'
+            this.dialogConfig.outerVisible = true
+        },
+
+        /** 关闭弹框 */
+        closeDialogOuter() {
+            this.dialogConfig.outerVisible = false
+        },
+
+        /** 删除按钮 */
+        handleDelete() {
+            this.$confirm('是否确定删除当前设备, 是否继续?', '提示', {
+                confirmButtonText: '确定',
+                cancelButtonText: '取消',
+                type: 'warning',
+            }).then(() => {
+                console.log('删除设备')
+            })
+        },
+        /** 解绑按钮 */
+        handleUnbind() {
+            this.$confirm('是否确定解绑当前设备, 是否继续?', '提示', {
+                confirmButtonText: '确定',
+                cancelButtonText: '取消',
+                type: 'warning',
+            }).then(() => {
+                console.log('解绑设备')
+            })
+        },
+    },
+}
+</script>
diff --git a/sgzb-ui/vue.config.js b/sgzb-ui/vue.config.js
index fbf79469..52b59c1e 100644
--- a/sgzb-ui/vue.config.js
+++ b/sgzb-ui/vue.config.js
@@ -45,9 +45,10 @@ module.exports = {
 
         // target: `http://192.168.2.134:28080`, //超
         // target: `http://10.40.92.81:28080`, //韩/
-        target: `http://192.168.2.82:28080`,//旭/
+        // target: `http://192.168.2.82:28080`,//旭/
         // target: `http://192.168.2.248:28080`, //帅
         // target: `http://192.168.2.209:28080`, //福
+        target: `http://192.168.2.114:39080`, //福
 
         //******** 注意事项  ********* */
         //1.全局替换qrUrl二维码扫码提供的网址-发布服务器的地址target;