From 0b6c94b040173fb3d7559bf46857cbcd33c9397b Mon Sep 17 00:00:00 2001
From: BianLzhaoMin <11485688+bianliangzhaomin123@user.noreply.gitee.com>
Date: Mon, 14 Apr 2025 17:11:34 +0800
Subject: [PATCH] =?UTF-8?q?=E6=84=9F=E7=9F=A5=E8=AE=BE=E5=A4=87=20----=20?=
 =?UTF-8?q?=E8=AE=BE=E5=A4=87=E7=AE=A1=E7=90=86=E9=9D=99=E6=80=81=E9=A1=B5?=
 =?UTF-8?q?=E9=9D=A2=E5=8F=8A=E5=9F=BA=E7=A1=80=E9=80=BB=E8=BE=91=E5=88=9D?=
 =?UTF-8?q?=E6=AD=A5=E5=AE=8C=E5=96=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../perception-devices/equipment-manage.js    |  40 ++++
 .../components/add-edit-form.vue              | 168 +++++++++--------
 .../equipment-manage/components/config.js     |  19 ++
 .../components/project-details.vue            | 177 +++++++++++++++---
 .../equipment-manage/index.vue                |  52 +++--
 5 files changed, 332 insertions(+), 124 deletions(-)
 create mode 100644 src/api/perception-devices/equipment-manage.js
 create mode 100644 src/views/perception-devices/equipment-manage/components/config.js

diff --git a/src/api/perception-devices/equipment-manage.js b/src/api/perception-devices/equipment-manage.js
new file mode 100644
index 00000000..1f857740
--- /dev/null
+++ b/src/api/perception-devices/equipment-manage.js
@@ -0,0 +1,40 @@
+import request from '@/utils/request'
+
+/* 感知设备 ----  设备管理接口 */
+
+// 列表接口
+export const getEquipmentManageListAPI = (data) => {
+    return request.post('/xxx', data)
+}
+// 新增接口
+export const addEquipmentManageDataAPI = (data) => {
+    return request.post('/xxx', data)
+}
+// 修改接口
+export const editEquipmentManageDataAPI = (data) => {
+    return request.post('/xxx', data)
+}
+// 详情接口
+export const getEquipmentManageDetailsAPI = (data) => {
+    return request.post('/xxx', data)
+}
+// 删除接口
+export const deleteEquipmentManageDataAPI = (data) => {
+    return request.post('/xxx', data)
+}
+// 详情内列表接口
+export const getEquipmentManageListInDetailsAPI = (data) => {
+    return request.post('/xxx', data)
+}
+// 详情内新增接口
+export const addEquipmentManageDataInDetailsAPI = (data) => {
+    return request.post('/xxx', data)
+}
+// 详情内修改接口
+export const editEquipmentManageDataInDetailsAPI = (data) => {
+    return request.post('/xxx', data)
+}
+// 详情内删除接口
+export const deleteEquipmentManageDataInDetailsAPI = (data) => {
+    return request.post('/xxx', data)
+}
diff --git a/src/views/perception-devices/equipment-manage/components/add-edit-form.vue b/src/views/perception-devices/equipment-manage/components/add-edit-form.vue
index 0528b887..310ab9c3 100644
--- a/src/views/perception-devices/equipment-manage/components/add-edit-form.vue
+++ b/src/views/perception-devices/equipment-manage/components/add-edit-form.vue
@@ -2,70 +2,50 @@
     <!-- 新增修改弹框 -->
     <div>
         <el-form label-width="auto" :model="addOrEditForm" :rules="addOrEditFormRef" ref="addOrEditFormRef">
-            <!-- <TitleTip :titleText="`基本信息`" /> -->
             <el-form-item label="所属工程：" prop="projectName">
-                <el-input v-model="addOrEditForm.projectName" clearable />
+                <el-select v-model="addOrEditForm.projectName" clearable filterable style="width: 100%">
+                    <el-option v-for="type in projectList" :key="type.id" :label="type.label" :value="type.id" />
+                </el-select>
             </el-form-item>
-            <el-form-item label="设备类型：" prop="ownerUnit">
-                <!-- <el-input v-model="addOrEditForm.ownerUnit" clearable /> -->
-
-                <el-select v-model="addOrEditForm.ownerUnit" clearable filterable>
+            <el-form-item label="设备类型：" prop="deviceType">
+                <el-select v-model="addOrEditForm.deviceType" clearable filterable style="width: 100%">
                     <el-option v-for="type in typeList" :key="type.id" :label="type.label" :value="type.id" />
                 </el-select>
             </el-form-item>
-            <!-- <el-form-item label="计划开工日期：" prop="planStartTime">
-                <el-date-picker
-                    type="date"
-                    style="width: 100%"
-                    placeholder="选择日期"
-                    value-format="yyyy-MM-dd"
-                    v-model="addOrEditForm.planStartTime"
-                />
-            </el-form-item>
-            <el-form-item label="计划竣工日期：" prop="planEndTime">
-                <el-date-picker
-                    type="date"
-                    style="width: 100%"
-                    placeholder="选择日期"
-                    value-format="yyyy-MM-dd"
-                    v-model="addOrEditForm.planEndTime"
-                />
-            </el-form-item> -->
 
-            <!-- <TitleTip :titleText="`其他信息`" /> -->
-            <el-form-item label="设备名称：">
-                <el-input v-model="addOrEditForm.address" clearable />
+            <el-form-item label="设备名称：" prop="deviceName">
+                <el-input placeholder="请输入设备名称" v-model="addOrEditForm.deviceName" clearable />
             </el-form-item>
 
-            <el-form-item label="设备编码：">
-                <el-input v-model="addOrEditForm.projectAmount" clearable />
+            <el-form-item label="设备编码：" prop="deviceCode">
+                <el-input placeholder="请输入设备编码" v-model="addOrEditForm.deviceCode" clearable />
             </el-form-item>
             <el-form-item label="设备级联编码：">
-                <el-input v-model="addOrEditForm.projectManager" clearable />
+                <el-input placeholder="请输入设备级联编码" v-model="addOrEditForm.casDeviceCode" clearable />
             </el-form-item>
-            <el-form-item label="设备状态：">
-                <el-input
-                    clearable
-                    type="textarea"
-                    :autosize="{ minRows: 3, maxRows: 10 }"
-                    v-model="addOrEditForm.projectScale"
-                />
+            <el-form-item label="设备状态：" prop="status">
+                <el-select v-model="addOrEditForm.status" clearable filterable style="width: 100%">
+                    <el-option label="在线" value="1" />
+                    <el-option label="离线" value="2" />
+                </el-select>
             </el-form-item>
 
             <el-form-item label="设备信号：">
-                <el-input v-model="addOrEditForm.projectAmount" clearable />
+                <el-input placeholder="请输入设备信号" v-model="addOrEditForm.wifi" clearable />
             </el-form-item>
 
-            <el-form-item label="监测区域：">
-                <el-input v-model="addOrEditForm.projectAmount" clearable />
+            <el-form-item label="监测区域：" prop="area">
+                <el-select v-model="addOrEditForm.area" clearable filterable style="width: 100%">
+                    <el-option v-for="type in areaList" :key="type.id" :label="type.label" :value="type.id" />
+                </el-select>
             </el-form-item>
 
             <el-form-item label="所属边代：">
-                <el-input v-model="addOrEditForm.projectAmount" clearable />
+                <el-input placeholder="请输入所属边代" v-model="addOrEditForm.bd" clearable />
             </el-form-item>
 
             <el-form-item class="handle">
-                <el-button> 取消 </el-button>
+                <el-button @click="onCancel"> 取消 </el-button>
                 <el-button type="primary" @click="onSubmitForm"> 保存 </el-button>
             </el-form-item>
         </el-form>
@@ -99,59 +79,80 @@ export default {
         return {
             // 新增或修改接口
             addOrEditForm: {
-                projectName: '', // 项目名称
-                ownerUnit: '', // 业主单位
-                planStartTime: '', //计划开工日期
-                planEndTime: '', // 计划竣工日期
-                address: '', // 项目地址
-                projectAmount: '', // 项目金额
-                projectManager: '', // 项目负责任人
-                projectScale: '', // 工程规格
+                projectName: '', // 所属工程
+                deviceType: '', // 设备类型
+                deviceName: '', //设备名称
+                deviceCode: '', // 设备编码
+                casDeviceCode: '', // 级联编码
+                status: '', // 设备状态
+                wifi: '', // 设备信号
+                area: '', // 监测区域
+                bd: '', // 所属边
             },
             addOrEditFormRef: {
                 projectName: [
                     {
                         required: true,
-                        message: '项目名称',
-                        trigger: 'blur',
-                    },
-                    {
-                        min: 1,
-                        max: 30,
-                        message: '长度在 1 到 30 个字符',
-                        trigger: 'blur',
-                    },
-                ],
-                ownerUnit: [
-                    {
-                        required: true,
-                        message: '请输入业主单位',
-                        trigger: 'blur',
-                    },
-                    {
-                        min: 1,
-                        max: 20,
-                        message: '长度在 1 到 20 个字符',
-                        trigger: 'blur',
-                    },
-                ],
-                planStartTime: [
-                    {
-                        required: true,
-                        message: '请选择计划开工日期',
+                        message: '请选择所属工程',
                         trigger: 'change',
                     },
-                    { validator: validatePlanStartTime, trigger: 'change' },
                 ],
-                planEndTime: [
+                deviceType: [
                     {
                         required: true,
-                        message: '请选择计划竣工日期',
+                        message: '请选择设备类型',
+                        trigger: 'change',
+                    },
+                ],
+                deviceName: [
+                    {
+                        required: true,
+                        message: '请输入设备名称',
+                        trigger: 'blur',
+                    },
+                ],
+
+                deviceCode: [
+                    {
+                        required: true,
+                        message: '请输入设备编码',
+                        trigger: 'blur',
+                    },
+                ],
+                status: [
+                    {
+                        required: true,
+                        message: '请选择设备状态',
+                        trigger: 'change',
+                    },
+                ],
+                area: [
+                    {
+                        required: true,
+                        message: '请选择监测区域',
                         trigger: 'change',
                     },
-                    { validator: validatePlanEndTime, trigger: 'change' },
                 ],
             },
+
+            // 所属工程数据源
+            projectList: [
+                { id: 1, label: '工程1' },
+                { id: 2, label: '工程2' },
+                { id: 3, label: '工程3' },
+            ],
+            // 设备类型数据源
+            typeList: [
+                { id: 1, label: '测试1' },
+                { id: 2, label: '测试2' },
+                { id: 3, label: '测试3' },
+            ],
+            // 设备类型数据源
+            areaList: [
+                { id: 1, label: '区域1' },
+                { id: 2, label: '区域2' },
+                { id: 3, label: '区域3' },
+            ],
         }
     },
 
@@ -173,6 +174,11 @@ export default {
                 }
             })
         },
+
+        // 取消按钮
+        onCancel() {
+            this.$emit('onCloseDialog', false)
+        },
     },
     async mounted() {},
     watch: {},
diff --git a/src/views/perception-devices/equipment-manage/components/config.js b/src/views/perception-devices/equipment-manage/components/config.js
new file mode 100644
index 00000000..0c665469
--- /dev/null
+++ b/src/views/perception-devices/equipment-manage/components/config.js
@@ -0,0 +1,19 @@
+export const formLabel = [{ f_label: '搜索关键词', f_model: 'proName', f_type: 'ipt', isShow: false }]
+export const columnsList = [
+    { t_props: 'projectName', t_label: '监测名称' },
+    { t_props: 'address', t_label: '监测值' },
+    { t_props: 'planStartTime', t_label: '单位' },
+    { t_props: 'planEndTime', t_label: '监测时间' },
+    { t_props: 'ownerUnit', t_label: '变化值' },
+    { t_props: 'projectStatus', t_label: '最大阈值' },
+    { t_props: 'auditStatus', t_label: '最小阈值' },
+    { t_props: 'auditStatus', t_label: '采集值类型' },
+    { t_props: 'auditStatus', t_label: '设备级联编码' },
+    { t_props: 'auditStatus', t_label: '操作' },
+]
+
+export const dialogConfig = {
+    outerWidth: '50%',
+    outerTitle: '设备新增',
+    outerVisible: false,
+}
diff --git a/src/views/perception-devices/equipment-manage/components/project-details.vue b/src/views/perception-devices/equipment-manage/components/project-details.vue
index 3f0c08cf..39c48429 100644
--- a/src/views/perception-devices/equipment-manage/components/project-details.vue
+++ b/src/views/perception-devices/equipment-manage/components/project-details.vue
@@ -1,31 +1,162 @@
 <template>
-    <div>
-        <el-descriptions :column="2" border>
-            <el-descriptions-item label="项目名称"></el-descriptions-item>
-            <el-descriptions-item label="业主单位"></el-descriptions-item>
-            <el-descriptions-item label="项目地址">苏州市</el-descriptions-item>
-            <el-descriptions-item label="项目金额(万元)">
-            </el-descriptions-item>
-            <el-descriptions-item
-                label="计划开工日期"
-                :contentStyle="{ 'text-align': 'right' }"
-                >江苏省苏州市吴中区吴中大道 1188 号</el-descriptions-item
-            >
-            <el-descriptions-item label="计划竣工日期"
-                >苏州市</el-descriptions-item
-            >
-            <el-descriptions-item label="计划竣工日期"
-                >项目负责人</el-descriptions-item
-            >
-            <el-descriptions-item label="计划竣工日期"
-                >项目规模</el-descriptions-item
-            >
-        </el-descriptions>
+    <!-- 感知设备 ---- 设备管理  -->
+    <div class="app-container">
+        <TableModel :formLabel="formLabel" :columnsList="columnsList" :request-api="getProjectListAPI" ref="tableRef">
+            <template slot="btn">
+                <el-button size="mini" type="primary" icon="el-icon-plus" @click="handleAddOrOther(null, 1)">
+                    新增
+                </el-button>
+            </template>
+            <template slot="handle" slot-scope="{ data }">
+                <el-button size="mini" type="primary" @click="handleAddOrOther(data, 2)" icon="el-icon-edit">
+                    修改
+                </el-button>
+                <el-button size="mini" type="danger" icon="el-icon-delete" @click="handleDeleteData(data)">
+                    删除
+                </el-button>
+            </template>
+
+            <template slot="status" slot-scope="{ data }">
+                <el-tag size="mini">状态 </el-tag>
+            </template>
+        </TableModel>
+
+        <!-- 弹框 -->
+        <DialogModel :dialogConfig="dialogConfig" @closeDialogOuter="closeDialogOuter">
+            <template slot="outerContent">
+                <el-form label-width="auto" :model="addOrEditForm" :rules="addOrEditFormRules" ref="addOrEditFormRef">
+                    <el-form-item label="监测名称" prop="jc_name">
+                        <el-input placeholder="请输入监测名称" v-model="addOrEditForm.jc_name" clearable />
+                    </el-form-item>
+                    <el-form-item label="设备类型：" prop="deviceType">
+                        <el-select v-model="addOrEditForm.deviceType" clearable filterable style="width: 100%">
+                            <el-option v-for="type in typeList" :key="type.id" :label="type.label" :value="type.id" />
+                        </el-select>
+                    </el-form-item>
+
+                    <el-form-item label="采集值" prop="cj_data">
+                        <el-input placeholder="请输入采集值" v-model="addOrEditForm.cj_data" clearable />
+                    </el-form-item>
+
+                    <el-form-item label="采集值类型" prop="cj_type">
+                        <el-input placeholder="请输入采集值类型" v-model="addOrEditForm.cj_type" clearable />
+                    </el-form-item>
+                    <el-form-item label="采集值单位：">
+                        <el-input placeholder="请输入采集值单位" v-model="addOrEditForm.cj_unit" clearable />
+                    </el-form-item>
+                    <el-form-item label="是否告警" prop="is_warning">
+                        <el-select v-model="addOrEditForm.is_warning" clearable filterable style="width: 100%">
+                            <el-option label="是" value="1" />
+                            <el-option label="否" value="2" />
+                        </el-select>
+                    </el-form-item>
+
+                    <el-form-item label="变化值：" prop="change_data">
+                        <el-input placeholder="请输入变化值" v-model="addOrEditForm.change_data" clearable />
+                    </el-form-item>
+
+                    <el-form-item label="最大阈值：" prop="max_data">
+                        <el-input placeholder="请输入最大阈值" v-model="addOrEditForm.max_data" clearable />
+                    </el-form-item>
+                    <el-form-item label="最小阈值：" prop="min_data">
+                        <el-input placeholder="请输入最小阈值" v-model="addOrEditForm.min_data" clearable />
+                    </el-form-item>
+                    <el-form-item label="设备级联编码：" prop="code">
+                        <el-input placeholder="请输入设备级联编码" v-model="addOrEditForm.code" clearable />
+                    </el-form-item>
+
+                    <el-form-item class="handle">
+                        <el-button @click="onCancel"> 取消 </el-button>
+                        <el-button type="primary" @click="onSubmitForm"> 保存 </el-button>
+                    </el-form-item>
+                </el-form>
+            </template>
+        </DialogModel>
     </div>
 </template>
 
 <script>
-export default {}
+import TableModel from '@/components/TableModel'
+import DialogModel from '@/components/DialogModel'
+
+import { formLabel, columnsList, dialogConfig } from './config'
+import { getProjectListAPI } from '@/api/project-manage/index.js'
+export default {
+    components: {
+        TableModel,
+        DialogModel,
+    },
+    data() {
+        return {
+            formLabel,
+            columnsList,
+            dialogConfig,
+            getProjectListAPI,
+            dialogType: 1,
+            // 新增或修改接口
+            addOrEditForm: {
+                jc_name: '', // 监测名称
+                createTime: '', // 创建时间
+                cj_data: '', //采集值
+                cj_type: '', // 采集值类型
+                cj_unit: '', // 采集值单位
+                is_warning: '', // 是否告警
+                change_data: '', // 变化值
+                max_data: '', // 最大阈值
+                min_data: '', // 最小阈值
+                code: '', // 设备级联编码
+            },
+            addOrEditFormRules: {
+                jc_name: [
+                    {
+                        required: true,
+                        message: '请输入监测名称',
+                        trigger: 'blur',
+                    },
+                ],
+            },
+        }
+    },
+    methods: {
+        handleAddOrOther(data, type) {
+            const titleType = {
+                1: '新增',
+                2: '修改',
+            }
+            this.dialogType = type
+            this.dialogConfig.outerTitle = titleType[type]
+            this.dialogConfig.outerVisible = true
+        },
+        handleDeleteData(data) {
+            this.$modal
+                .confirm(`是否确认删除该条数据`)
+                .then(async () => {
+                    this.$refs.tableRef.getTableList()
+                })
+                .catch(() => {})
+        },
+        /** 关闭外侧弹框 */
+        closeDialogOuter() {
+            this.$refs.addOrEditFormRef.resetFields()
+            this.dialogConfig.outerVisible = false
+        },
+
+        // 表单提交
+        onSubmitForm() {
+            this.$refs.addOrEditFormRef.validate(async (valid) => {
+                if (valid) {
+                    this.dialogConfig.outerVisible = false
+                }
+            })
+        },
+
+        // 取消按钮
+        onCancel() {
+            this.$refs.addOrEditFormRef.resetFields()
+            this.dialogConfig.outerVisible = false
+        },
+    },
+}
 </script>
 
 <style></style>
diff --git a/src/views/perception-devices/equipment-manage/index.vue b/src/views/perception-devices/equipment-manage/index.vue
index 195df3cd..bbf9b1ed 100644
--- a/src/views/perception-devices/equipment-manage/index.vue
+++ b/src/views/perception-devices/equipment-manage/index.vue
@@ -1,24 +1,21 @@
 <template>
     <!-- 感知设备 ---- 设备管理  -->
     <div class="app-container">
-        <TableModel :formLabel="formLabel" :columnsList="columnsList" :request-api="getProjectListAPI">
+        <TableModel :formLabel="formLabel" :columnsList="columnsList" :request-api="getProjectListAPI" ref="tableRef">
             <template slot="btn">
                 <el-button size="mini" type="primary" icon="el-icon-download" @click="handleExport()"> 导出 </el-button>
-                <el-button size="mini" type="primary" icon="el-icon-plus" @click="handleAddData()"> 新增 </el-button>
+                <el-button size="mini" type="primary" icon="el-icon-plus" @click="handleAddOrOther(null, 1)">
+                    新增
+                </el-button>
             </template>
             <template slot="handle" slot-scope="{ data }">
-                <el-button size="mini" type="primary" @click="handleEditData(data)" icon="el-icon-edit">
+                <el-button size="mini" type="primary" @click="handleAddOrOther(data, 2)" icon="el-icon-edit">
                     修改
                 </el-button>
-                <el-button size="mini" type="success" @click="handleDetails(data)" icon="el-icon-info">
+                <el-button size="mini" type="success" @click="handleAddOrOther(data, 3)" icon="el-icon-info">
                     详情
                 </el-button>
-                <el-button
-                    size="mini"
-                    type="danger"
-                    icon="el-icon-delete"
-                    @click="handleDeleteData(data.id, deleteWarningApi)"
-                >
+                <el-button size="mini" type="danger" icon="el-icon-delete" @click="handleDeleteData(data)">
                     删除
                 </el-button>
             </template>
@@ -28,9 +25,12 @@
             </template>
         </TableModel>
 
+        <!-- 弹框 -->
         <DialogModel :dialogConfig="dialogConfig" @closeDialogOuter="closeDialogOuter">
             <template slot="outerContent">
+                <!-- 新增以及修改弹框 -->
                 <AddEditForm @onCloseDialog="closeDialogOuter" v-if="dialogType === 1 || dialogType === 2" />
+                <!-- 详情弹框 -->
                 <ProjectDetails v-else />
             </template>
         </DialogModel>
@@ -64,19 +64,31 @@ export default {
         handleExport() {
             console.log('导出')
         },
-        handleAddData() {
-            console.log('新增')
-            this.dialogType = 1
-            this.dialogConfig.outerTitle = '设备新增'
+
+        handleAddOrOther(data, type) {
+            const titleType = {
+                1: '设备新增',
+                2: '设备修改',
+                3: '设备详情列表',
+            }
+            this.dialogType = type
+            this.dialogConfig.outerTitle = titleType[type]
             this.dialogConfig.outerVisible = true
+
+            if (type === 3) {
+                this.dialogConfig.outerWidth = '90%'
+            } else {
+                this.dialogConfig.outerWidth = '50%'
+            }
         },
-        handleDetails() {},
-        handleEditData() {
-            this.dialogType = 2
-            this.dialogConfig.outerTitle = '设备修改'
-            this.dialogConfig.outerVisible = true
+        handleDeleteData(data) {
+            this.$modal
+                .confirm(`是否确认删除该条数据`)
+                .then(async () => {
+                    this.$refs.tableRef.getTableList()
+                })
+                .catch(() => {})
         },
-        handleDeleteData() {},
         /** 关闭外侧弹框 */
         closeDialogOuter() {
             this.dialogConfig.outerVisible = false