Merge branch 'dev-sy'

src/api/common.js

@@ -0,0 +1,26 @@
+import request from '@/utils/request'
+
+/* 下拉等公共接口 */
+
+// 获取设备类型
+export const getDeviceTypeAPI = () => {
+    return request({
+        url: '/smart-site/devType/querySelected',
+        method: 'post',
+    })
+}
+// 获取监测区域
+export const getMonitoringAreaAPI = (data) => {
+    return request({
+        url: '/smart-site/constInfo/querySelected',
+        method: 'post',
+        data,
+    })
+}
+// 获取所属边代
+export const getBelongToBdAPI = () => {
+    return request({
+        url: '/smart-site/collect/dev/queryBdSelected',
+        method: 'post',
+    })
+}

src/api/high-formwork/index.js

@@ -20,3 +20,18 @@ export const editHighFormworkDataAPI = (data) => {
 export const deleteHighFormworkDataAPI = (data) => {
     return request.post('/smart-site/devModel/deleteData', data)
 }
+
+// 弹框内设备绑定数据接口
+export const getHighFormworkListInDeviceAPI = (data) => {
+    return request.get('/smart-site/devModel/getDevList', {
+        params: data,
+    })
+}
+// 弹框内设备绑定接口
+export const bindHighFormworkListInDeviceAPI = (data) => {
+    return request.post('/smart-site/devModel/bindDevice', data)
+}
+// 弹框内设备解绑接口
+export const unBindHighFormworkListInDeviceAPI = (data) => {
+    return request.post('/smart-site/devModel/unBindDev', data)
+}

src/api/perception-devices/equipment-manage.js

@@ -1,18 +1,21 @@
 import request from '@/utils/request'
+import requestNew from '@/utils/request-new'
 
 /* 感知设备 ----  设备管理接口 */
 
 // 列表接口
 export const getEquipmentManageListAPI = (data) => {
-    return request.get('/smart-site/collect/dev/getPageList', data)
+    return request.get('/smart-site/collect/dev/getPageList', {
+        params: data,
+    })
 }
 // 新增接口
 export const addEquipmentManageDataAPI = (data) => {
-    return request.post('/smart-site/collect/dev/insertData', data)
+    return requestNew.post('/smart-site/collect/dev/insertData', data)
 }
 // 修改接口
 export const editEquipmentManageDataAPI = (data) => {
-    return request.post('/xxx', data)
+    return requestNew.post('/smart-site/collect/dev/updateData', data)
 }
 // 详情接口
 export const getEquipmentManageDetailsAPI = (data) => {
@@ -20,21 +23,23 @@ export const getEquipmentManageDetailsAPI = (data) => {
 }
 // 删除接口
 export const deleteEquipmentManageDataAPI = (data) => {
-    return request.post('/xxx', data)
+    return request.post('/smart-site/collect/dev/delData', data)
 }
 // 详情内列表接口
 export const getEquipmentManageListInDetailsAPI = (data) => {
-    return request.post('/xxx', data)
+    return request.get('/smart-site/collect/dev/getAttrPageList', {
+        params: data,
+    })
 }
 // 详情内新增接口
 export const addEquipmentManageDataInDetailsAPI = (data) => {
-    return request.post('/xxx', data)
+    return request.post('/smart-site/collect/dev/addAttrData', data)
 }
 // 详情内修改接口
 export const editEquipmentManageDataInDetailsAPI = (data) => {
-    return request.post('/xxx', data)
+    return request.post('/smart-site/collect/dev/updateAttrData', data)
 }
 // 详情内删除接口
 export const deleteEquipmentManageDataInDetailsAPI = (data) => {
-    return request.post('/xxx', data)
+    return request.post('/smart-site/collect/dev/delDataAttr', data)
 }

src/components/DialogModel/index.vue

@@ -64,12 +64,10 @@ export default {
     left: 50% !important;
     transform: translate(-50%, -50%) !important;
     max-height: 100vh !important;
+    min-height: 100vh;
     .el-dialog__body {
         flex: 1;
         overflow-y: scroll !important;
-        .el-table__header-wrapper .el-checkbox {
-            display: none !important;
-        }
     }
     .dialog-content {
         padding: 20px;

src/components/TableModel/index.vue

@@ -114,7 +114,13 @@
             @selection-change="handleSelectionChange"
         >
             >
-            <el-table-column type="selection" width="45" align="center" v-if="selectionShow" :selectable="selectable" />
+            <el-table-column
+                type="selection"
+                width="45"
+                align="center"
+                :selectable="selectable"
+                v-if="selectionShow && isSelectShow"
+            />
             <el-table-column
                 width="55"
                 align="center"
@@ -240,6 +246,10 @@ export default {
             type: Boolean,
             default: true,
         },
+        isSelectShow: {
+            type: Boolean,
+            default: true,
+        },
     },
     computed: {
         /* 根据操作栏控制表头是否显示 */
@@ -322,9 +332,9 @@ export default {
                 this.$set(this.queryParams, e.f_model, '')
             }
         })
-        // if (this.sendParams !== null) {
+        if (this.sendParams !== null) {
-        //     Object.assign(this.queryParams, this.sendParams)
+            Object.assign(this.queryParams, this.sendParams)
-        // }
+        }
         this.getTableList()
     },
     updated() {

src/views/high-formwork/components/project-details.vue

@@ -1,7 +1,13 @@
 <template>
     <!-- 感知设备 ---- 设备管理  -->
     <div>
-        <TableModel :formLabel="formLabel" :columnsList="columnsList" :request-api="getProjectListAPI" ref="tableRef">
+        <TableModel
+            ref="tableRef"
+            :formLabel="formLabel"
+            :columnsList="columnsList"
+            :request-api="getHighFormworkListInDeviceAPI"
+            :sendParams="sendParams"
+        >
             <template slot="btn">
                 <el-button size="mini" type="primary" icon="el-icon-plus" @click="handleAddOrOther(null, 1)">
                     新增
@@ -21,20 +27,18 @@
         <!-- 弹框 -->
         <DialogModel :dialogConfig="dialogConfig" @closeDialogOuter="closeDialogOuter">
             <template slot="outerContent">
-                <el-table>
+                <el-table :data="deviceList" border @selection-change="handleSelectionChange" row-key="id">
-                    <el-table-column type="selection" width="55" />
+                    <el-table-column type="selection" width="45" align="center" />
-                    <el-table-column label="ID" />
+                    <el-table-column align="center" show-overflow-tooltip label="ID" prop="id" />
-                    <el-table-column label="产品ID" />
+                    <el-table-column align="center" show-overflow-tooltip label="产品ID" prop="typeCode" />
-                    <el-table-column label="设备名称" />
+                    <el-table-column align="center" show-overflow-tooltip label="设备名称" prop="devName" />
-                    <el-table-column label="描述" />
+                    <el-table-column align="center" show-overflow-tooltip label="设备编码" prop="devCode" />
-                    <el-table-column label="位置" />
+                    <el-table-column align="center" show-overflow-tooltip label="创建时间" prop="createTime" />
-                    <el-table-column label="在线状态" />
-                    <el-table-column label="创建时间" />
                 </el-table>
 
                 <el-row style="margin-top: 10px; text-align: right">
                     <el-button size="mini"> 取消</el-button>
-                    <el-button size="mini" type="primary"> 确认绑定</el-button>
+                    <el-button size="mini" type="primary" @click="onHandleBind"> 确认绑定</el-button>
                 </el-row>
             </template>
         </DialogModel>
@@ -47,7 +51,18 @@ import DialogModel from '@/components/DialogModel'
 
 import { formLabel, columnsList, dialogConfig } from './config'
 import { getProjectListAPI } from '@/api/project-manage/index.js'
+import {
+    getHighFormworkListInDeviceAPI,
+    bindHighFormworkListInDeviceAPI,
+    unBindHighFormworkListInDeviceAPI,
+} from '@/api/high-formwork/index.js'
 export default {
+    props: {
+        detailsId: {
+            type: [Number, String],
+            default: () => '',
+        },
+    },
     components: {
         TableModel,
         DialogModel,
@@ -57,7 +72,7 @@ export default {
             formLabel,
             columnsList,
             dialogConfig,
-            getProjectListAPI,
+            getHighFormworkListInDeviceAPI,
             dialogType: 1,
             // 新增或修改接口
             addOrEditForm: {
@@ -81,6 +96,11 @@ export default {
                     },
                 ],
             },
+            sendParams: {
+                id: '',
+            },
+            deviceList: [],
+            selectionList: [],
         }
     },
     methods: {
@@ -89,6 +109,10 @@ export default {
                 1: '新增',
                 2: '修改',
             }
+
+            if (type === 1) {
+                this.getHighFormworkListInDeviceData()
+            }
             this.dialogType = type
             this.dialogConfig.outerTitle = titleType[type]
             this.dialogConfig.outerVisible = true
@@ -97,13 +121,26 @@ export default {
             this.$modal
                 .confirm(`是否确认解绑设备`)
                 .then(async () => {
-                    this.$refs.tableRef.getTableList()
+                    const res = await unBindHighFormworkListInDeviceAPI({
+                        id: this.detailsId,
+                        devId: data.id,
+                    })
+
+                    if (res.code === 200) {
+                        this.$modal.msgSuccess('解绑成功')
+                        this.$refs.tableRef.getTableList()
+                    }
                 })
                 .catch(() => {})
         },
+
+        // 获取绑定的数据源
+        async getHighFormworkListInDeviceData() {
+            const res = await getHighFormworkListInDeviceAPI()
+            this.deviceList = res.rows
+        },
         /** 关闭外侧弹框 */
         closeDialogOuter() {
-            this.$refs.addOrEditFormRef.resetFields()
             this.dialogConfig.outerVisible = false
         },
 
@@ -116,11 +153,51 @@ export default {
             })
         },
 
+        // 确认绑定
+        async onHandleBind() {
+            if (this.selectionList.length < 1) {
+                this.$modal.msgError('请勾选需要绑定的数据')
+            } else {
+                const bingParams = {
+                    id: this.detailsId,
+                    devId: this.selectionList.join(',').slice(0, -1),
+                }
+
+                const res = await bindHighFormworkListInDeviceAPI(bingParams)
+
+                if (res.code === 200) {
+                    this.$modal.msgSuccess('绑定成功')
+                    this.dialogConfig.outerVisible = false
+                    this.$refs.tableRef.getTableList()
+                }
+
+                console.log('res', res)
+            }
+        },
+
         // 取消按钮
         onCancel() {
             this.$refs.addOrEditFormRef.resetFields()
             this.dialogConfig.outerVisible = false
         },
+
+        // 列表勾选事件
+        handleSelectionChange(val) {
+            console.log(val)
+            if (val.length > 0) {
+                this.selectionList = val.map((e) => e.id)
+            }
+        },
+    },
+
+    watch: {
+        detailsId: {
+            handler(newValue) {
+                this.sendParams.id = newValue
+            },
+            deep: true,
+            immediate: true,
+        },
     },
 }
 </script>

src/views/high-formwork/index.vue

@@ -48,7 +48,7 @@
                     v-if="dialogType === 1 || dialogType === 2"
                 />
                 <!-- 详情弹框 -->
-                <ProjectDetails v-else />
+                <ProjectDetails v-else :detailsId="detailsId" />
             </template>
         </DialogModel>
     </div>
@@ -76,6 +76,7 @@ export default {
             dialogType: 1,
             getHighFormworkListAPI,
             editFormModel: null,
+            detailsId: '',
         }
     },
     methods: {
@@ -91,6 +92,7 @@ export default {
             }
 
             if (type === 3) {
+                this.detailsId = data.id
                 this.dialogConfig.outerWidth = '90%'
             } else {
                 this.dialogConfig.outerWidth = '50%'

src/views/perception-devices/equipment-manage/components/add-edit-form.vue

@@ -1,15 +1,21 @@
 <template>
     <!-- 新增修改弹框 -->
     <div>
-        <el-form label-width="auto" :model="addOrEditForm" :rules="addOrEditFormRef" ref="addOrEditFormRef">
+        <el-form label-width="auto" :model="addOrEditForm" :rules="addOrEditFormRules" ref="addOrEditFormRef">
             <!-- <el-form-item label="所属工程：" prop="projectName">
                 <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="typeId">
-                <el-select v-model="addOrEditForm.typeId" clearable filterable style="width: 100%">
+                <el-select
-                    <el-option v-for="type in typeList" :key="type.id" :label="type.label" :value="type.id" />
+                    clearable
+                    filterable
+                    style="width: 100%"
+                    @change="onChangeType"
+                    v-model="addOrEditForm.typeId"
+                >
+                    <el-option v-for="type in typeList" :key="type.id" :label="type.typeName" :value="type.id" />
                 </el-select>
             </el-form-item>
 
@@ -17,31 +23,82 @@
                 <el-input placeholder="请输入设备名称" v-model="addOrEditForm.devName" clearable />
             </el-form-item>
 
-            <el-form-item label="设备编码：" prop="deviceCode">
+            <el-form-item label="设备编码：" prop="devCode">
-                <el-input placeholder="请输入设备编码" v-model="addOrEditForm.deviceCode" clearable />
+                <el-input placeholder="请输入设备编码" v-model="addOrEditForm.devCode" clearable />
             </el-form-item>
-            <el-form-item label="设备级联编码：">
+            <el-form-item label="是否启用：">
-                <el-input placeholder="请输入设备级联编码" v-model="addOrEditForm.casDeviceCode" clearable />
+                <el-select v-model="addOrEditForm.isActive" clearable filterable style="width: 100%">
+                    <el-option label="是" value="1" />
+                    <el-option label="否" value="0" />
+                </el-select>
             </el-form-item>
-            <el-form-item label="设备状态：" prop="status">
+            <el-form-item label="在线状态：" prop="isOnline">
-                <el-select v-model="addOrEditForm.status" clearable filterable style="width: 100%">
+                <el-select v-model="addOrEditForm.isOnline" clearable filterable style="width: 100%">
                     <el-option label="在线" value="1" />
-                    <el-option label="离线" value="2" />
+                    <el-option label="离线" value="0" />
                 </el-select>
             </el-form-item>
 
-            <el-form-item label="设备信号：">
+            <el-form-item label="位置：" prop="devLocation">
-                <el-input placeholder="请输入设备信号" v-model="addOrEditForm.wifi" clearable />
+                <el-input placeholder="请输入位置" v-model="addOrEditForm.devLocation" clearable />
             </el-form-item>
-
+            <el-form-item label="大屏背景：">
-            <el-form-item label="监测区域：" prop="area">
+                <div class="upload-container">
-                <el-select v-model="addOrEditForm.area" clearable filterable style="width: 100%">
+                    <el-upload
-                    <el-option v-for="type in areaList" :key="type.id" :label="type.label" :value="type.id" />
+                        :limit="1"
+                        :action="uploadFileUrl"
+                        list-type="picture-card"
+                        :file-list="addOrEditForm.fileList"
+                        :headers="headers"
+                        :on-remove="handleRemove"
+                        :on-preview="handlePreview"
+                        :on-success="handleSuccess"
+                        :before-upload="handleBeforeUpload"
+                        :show-file-list="true"
+                        :on-exceed="handleExceed"
+                    >
+                        <i class="el-icon-plus"></i>
+                    </el-upload>
+                    <div>
+                        1、上传图片文件格式支持PNG、JPG、JPEG； <br />
+                        2、图片大小不超过10MB； <br />
+                    </div>
+                </div>
+            </el-form-item>
+            <el-form-item label="监测区域：" prop="constId">
+                <el-select v-model="addOrEditForm.constId" clearable filterable style="width: 100%">
+                    <el-option v-for="type in areaList" :key="type.id" :label="type.name" :value="type.id" />
                 </el-select>
             </el-form-item>
 
-            <el-form-item label="所属边代：">
+            <el-form-item label="所属边代：" prop="bdId">
-                <el-input placeholder="请输入所属边代" v-model="addOrEditForm.bd" clearable />
+                <el-select
+                    clearable
+                    filterable
+                    style="width: 100%"
+                    placeholder="请选择所属边代"
+                    v-model="addOrEditForm.bdId"
+                >
+                    <el-option v-for="type in bdList" :key="type.bdId" :label="type.bdName" :value="type.bdId" />
+                </el-select>
+            </el-form-item>
+            <el-form-item label="描述：">
+                <el-input
+                    type="textarea"
+                    clearable
+                    placeholder="请输入描述"
+                    v-model="addOrEditForm.remark"
+                    :autosize="{ minRows: 2, maxRows: 10 }"
+                />
+            </el-form-item>
+            <el-form-item label="配置：">
+                <el-input
+                    clearable
+                    type="textarea"
+                    placeholder="请输入配置"
+                    v-model="addOrEditForm.configData"
+                    :autosize="{ minRows: 2, maxRows: 10 }"
+                />
             </el-form-item>
 
             <el-form-item class="handle">
@@ -49,55 +106,65 @@
                 <el-button type="primary" @click="onSubmitForm"> 保存 </el-button>
             </el-form-item>
         </el-form>
+
+        <el-dialog
+            width="30%"
+            :visible.sync="dialogInnerVisible"
+            append-to-body
+            :before-close="
+                () => {
+                    dialogInnerVisible = false
+                }
+            "
+        >
+            <img :src="previewUrl" style="display: block; max-width: 100%; margin: 0 auto" />
+        </el-dialog>
     </div>
 </template>
 
 <script>
-import { addProjectAPI } from '@/api/project-manage/index.js'
+import { addEquipmentManageDataAPI, editEquipmentManageDataAPI } from '@/api/perception-devices/equipment-manage.js'
-import { addEquipmentManageDataAPI } from '@/api/perception-devices/equipment-manage.js'
+import { getDeviceTypeAPI, getMonitoringAreaAPI, getBelongToBdAPI } from '@/api/common.js'
+import { getToken } from '@/utils/auth'
 export default {
+    props: {
+        // 修改时的数据源
+        editFormModel: {
+            type: Object,
+            default: () => null,
+        },
+        // 1. 新增表单 2. 修改表单
+        dialogType: {
+            type: Number,
+            default: () => 1,
+        },
+    },
     data() {
-        const validatePlanStartTime = (rule, value, callback) => {
-            if (!value) {
-                return callback(new Error('请选择计划开工日期'))
-            }
-            const endTime = this.addOrEditForm.planEndTime
-            if (endTime && new Date(value) >= new Date(endTime)) {
-                return callback(new Error('计划开工日期必须小于计划竣工日期'))
-            }
-            callback()
-        }
-        const validatePlanEndTime = (rule, value, callback) => {
-            if (!value) {
-                return callback(new Error('请选择计划竣工日期'))
-            }
-            const endTime = this.addOrEditForm.planStartTime
-            if (endTime && new Date(value) <= new Date(endTime)) {
-                return callback(new Error('计划竣工日期必须大于计划开工日期'))
-            }
-            callback()
-        }
         return {
+            uploadFileUrl: process.env.VUE_APP_BASE_API + '/file/upload',
+            headers: {
+                Authorization: 'Bearer ' + getToken(),
+            },
+            dialogInnerVisible: false,
+            previewUrl: '',
+            fileType: ['png', 'jpg', 'jpeg'],
             // 新增或修改接口
             addOrEditForm: {
                 projectName: '', // 所属工程
                 typeId: '', // 设备类型
                 devName: '', //设备名称
-                deviceCode: '', // 设备编码
+                devCode: '', // 设备编码
-                casDeviceCode: '', // 级联编码
+                isActive: '1', // 是否启用
-                status: '', // 设备状态
+                isOnline: '1', // 设备状态
-                wifi: '', // 设备信号
+                devLocation: '', // 位置
-                area: '', // 监测区域
+                constId: '', // 监测区域
-                bd: '', // 所属边
+                bdId: '', // 所属边带
+                backImage: '', // 背景
+                remark: '', // 描述
+                configData: '', // 配置
+                fileList: [],
             },
-            addOrEditFormRef: {
+            addOrEditFormRules: {
-                // projectName: [
-                //     {
-                //         required: true,
-                //         message: '请选择所属工程',
-                //         trigger: 'change',
-                //     },
-                // ],
                 typeId: [
                     {
                         required: true,
@@ -105,55 +172,31 @@ export default {
                         trigger: 'change',
                     },
                 ],
-                deviceName: [
+                devName: [
                     {
                         required: true,
                         message: '请输入设备名称',
                         trigger: 'blur',
                     },
                 ],
-
+                devCode: [
-                deviceCode: [
                     {
                         required: true,
                         message: '请输入设备编码',
                         trigger: 'blur',
                     },
                 ],
-                status: [
-                    {
-                        required: true,
-                        message: '请选择设备状态',
-                        trigger: 'change',
-                    },
-                ],
-                area: [
-                    {
-                        required: true,
-                        message: '请选择监测区域',
-                        trigger: 'change',
-                    },
-                ],
             },
 
             // 所属工程数据源
-            projectList: [
+            projectList: [],
-                { id: 1, label: '工程1' },
-                { id: 2, label: '工程2' },
-                { id: 3, label: '工程3' },
-            ],
             // 设备类型数据源
-            typeList: [
+            typeList: [],
-                { id: 1, label: '测试1' },
-                { id: 2, label: '测试2' },
-                { id: 3, label: '测试3' },
-            ],
             // 设备类型数据源
-            areaList: [
+            areaList: [],
-                { id: 1, label: '区域1' },
+
-                { id: 2, label: '区域2' },
+            // 边代数据源
-                { id: 3, label: '区域3' },
+            bdList: [],
-            ],
         }
     },
 
@@ -166,12 +209,59 @@ export default {
         onSubmitForm() {
             this.$refs.addOrEditFormRef.validate(async (valid) => {
                 if (valid) {
-                    const res = await addProjectAPI(this.addOrEditForm)
+                    const formData = new FormData()
-                    if (res.code === 200) {
+
-                        this.$modal.msgSuccess('新增成功')
+                    const {
+                        typeId, // 设备类型
+                        devName, //设备名称
+                        devCode, // 设备编码
+                        isActive, // 是否启用
+                        isOnline, // 设备状态
+                        devLocation, // 位置
+                        constId, // 监测区域
+                        bdId, // 所属边带
+                        backImage, // 背景
+                        remark, // 描述
+                        configData, // 配置
+                        id,
+                    } = this.addOrEditForm
+                    const params = {
+                        typeId, // 设备类型
+                        devName, //设备名称
+                        devCode, // 设备编码
+                        isActive, // 是否启用
+                        isOnline, // 设备状态
+                        devLocation, // 位置
+                        constId, // 监测区域
+                        bdId, // 所属边带
+                        backImage, // 背景
+                        remark, // 描述
+                        configData, // 配置
                     }
-                    // this.$emit('update:formDialogVisible', false)
+
-                    this.$emit('onCloseDialog')
+                    // 当修改表单时需要传递列表id
+                    if (this.dialogType === 2) {
+                        params.id = id
+                    }
+                    for (const key in params) {
+                        formData.append(key, params[key])
+                    }
+
+                    console.log(
+                        `%c🔍 感知设备${this.dialogType === 1 ? '新增' : '修改'}入参 %c`,
+                        'background: linear-gradient(90deg, #FF6B6B, #4ECDC4); color: white; padding: 5px 10px; border-radius: 5px; font-weight: bold;',
+                        '',
+                        params,
+                    )
+
+                    const API = this.dialogType === 1 ? addEquipmentManageDataAPI : editEquipmentManageDataAPI
+
+                    const res = await API(formData)
+                    if (res.code === 200) {
+                        this.$modal.msgSuccess(this.dialogType === 1 ? '新增成功' : '修改成功')
+                    }
+                    this.$refs.addOrEditFormRef.resetFields()
+                    this.$emit('onCloseDialog', true)
                 }
             })
         },
@@ -180,10 +270,115 @@ export default {
         onCancel() {
             this.$emit('onCloseDialog', false)
         },
+
+        // 上传之前
+        handleBeforeUpload(file) {
+            const isSvg = this.fileType.some((e) => file.type.includes(e))
+            if (!isSvg) {
+                this.$modal.msgError(`文件格式不正确, 请上传${this.fileType.join('、')}格式的文件!`)
+                return false
+            }
+            const isLt = file.size / 1024 / 1024 < 10
+            if (!isLt) {
+                this.$modal.msgError(`背景图片大小不能超过 10 MB`)
+
+                return false
+            }
+
+            this.$modal.loading('图片正在上传，请稍候...')
+        },
+        // 文件个数超出限制
+        handleExceed() {
+            this.$modal.msgError(`上传的背景图片数量不能超过 1 个`)
+        },
+
+        // 移除
+        handleRemove(file) {
+            this.addOrEditForm.fileList = this.addOrEditForm.fileList.filter((item) => item.uid !== file.uid)
+            this.addOrEditForm.logo = ''
+        },
+        // 预览
+        handlePreview(file) {
+            this.dialogInnerVisible = true
+            this.previewUrl = file.url
+        },
+        // 上传成功
+        handleSuccess(res) {
+            if (res.code === 200) {
+                this.addOrEditForm.backImage = res.data.name
+            } else {
+                this.addOrEditForm.fileList = []
+                this.addOrEditForm.backImage = ''
+            }
+            this.$modal.closeLoading()
+        },
+
+        // 设备类型change时查询监测区域
+        onChangeType(id) {
+            this.getMonitoringAreaData(id)
+        },
+        // 获取设备类型
+        async getDeviceTypeData() {
+            const { data: res } = await getDeviceTypeAPI()
+            this.typeList = res
+        },
+        // 获取监测区域
+        async getMonitoringAreaData(typeId) {
+            const { data: res } = await getMonitoringAreaAPI({ typeId })
+            this.areaList = res
+        },
+        // 获取所属边代
+        async getBelongToBdData() {
+            const { data: res } = await getBelongToBdAPI()
+            this.bdList = res
+        },
+    },
+    mounted() {
+        this.getDeviceTypeData()
+        this.getBelongToBdData()
+    },
+    watch: {
+        editFormModel: {
+            handler(newValue) {
+                if (this.dialogType === 2) {
+                    Object.assign(this.addOrEditForm, newValue)
+                    this.addOrEditForm.fileList.push({ url: newValue.backImage })
+                }
+            },
+            deep: true,
+            immediate: true,
+        },
     },
-    async mounted() {},
-    watch: {},
 }
 </script>
 
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+.upload-container {
+    display: flex;
+    align-items: center;
+
+    & div:last-child {
+        font-size: 13px;
+        padding-left: 20px;
+        line-height: 2.2;
+
+        a {
+            color: #1890ff;
+        }
+    }
+}
+
+::v-deep .el-upload {
+    width: 120px;
+    height: 120px;
+}
+
+::v-deep .el-upload--picture-card {
+    line-height: 130px;
+}
+
+::v-deep .el-upload-list--picture-card .el-upload-list__item {
+    width: 120px;
+    height: 120px;
+}
+</style>

src/views/perception-devices/equipment-manage/components/config.js

@@ -1,14 +1,11 @@
-export const formLabel = [{ f_label: '搜索关键词', f_model: 'proName', f_type: 'ipt', isShow: false }]
+export const formLabel = [{ f_label: '搜索关键词', f_model: 'keyWord', f_type: 'ipt', isShow: false }]
 export const columnsList = [
-    { t_props: 'projectName', t_label: '监测名称' },
+    { t_props: 'attrName', t_label: '监测名称' },
-    { t_props: 'address', t_label: '监测值' },
+    { t_props: 'attrVal', t_label: '监测值' },
-    { t_props: 'planStartTime', t_label: '单位' },
+    { t_props: 'unit', t_label: '单位' },
-    { t_props: 'planEndTime', t_label: '监测时间' },
+    { t_props: 'dataType', t_label: '采集值类型' },
-    { t_props: 'ownerUnit', t_label: '变化值' },
+    { t_props: 'attrCode', t_label: '编码' },
-    { t_props: 'projectStatus', t_label: '最大阈值' },
+    { t_props: 'updateTime', t_label: '监测时间', t_width: 180 },
-    { t_props: 'auditStatus', t_label: '最小阈值' },
-    { t_props: 'auditStatus', t_label: '采集值类型' },
-    { t_props: 'auditStatus', t_label: '设备级联编码' },
 ]
 
 export const dialogConfig = {

src/views/perception-devices/equipment-manage/components/project-details.vue

@@ -1,7 +1,14 @@
 <template>
     <!-- 感知设备 ---- 设备管理  -->
     <div class="app-container">
-        <TableModel :formLabel="formLabel" :columnsList="columnsList" :request-api="getProjectListAPI" ref="tableRef">
+        <TableModel
+            ref="tableRef"
+            :formLabel="formLabel"
+            :sendParams="sendParams"
+            :columnsList="columnsList"
+            :isSelectShow="false"
+            :request-api="getEquipmentManageListInDetailsAPI"
+        >
             <template slot="btn">
                 <el-button size="mini" type="primary" icon="el-icon-plus" @click="handleAddOrOther(null, 1)">
                     新增
@@ -25,44 +32,52 @@
         <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-form-item label="监测名称：" prop="attrName">
-                        <el-input placeholder="请输入监测名称" v-model="addOrEditForm.jc_name" clearable />
+                        <el-input placeholder="请输入监测名称" v-model="addOrEditForm.attrName" clearable />
                     </el-form-item>
-                    <el-form-item label="设备类型：" prop="deviceType">
+                    <el-form-item label="编码：" prop="attrCode">
-                        <el-select v-model="addOrEditForm.deviceType" clearable filterable style="width: 100%">
+                        <el-input placeholder="请输入编码" v-model="addOrEditForm.attrCode" clearable />
-                            <el-option v-for="type in typeList" :key="type.id" :label="type.label" :value="type.id" />
+                    </el-form-item>
-                        </el-select>
+                    <el-form-item label="监测时间：" prop="updateTime">
+                        <el-date-picker
+                            type="datetime"
+                            style="width: 100%"
+                            value-format="yyyy-MM-dd HH:mm:ss"
+                            v-model="addOrEditForm.updateTime"
+                            placeholder="请选择监测时间"
+                        />
                     </el-form-item>
 
-                    <el-form-item label="采集值" prop="cj_data">
+                    <el-form-item label="采集值：" prop="attrVal">
-                        <el-input placeholder="请输入采集值" v-model="addOrEditForm.cj_data" clearable />
+                        <el-input placeholder="请输入采集值" v-model="addOrEditForm.attrVal" clearable />
                     </el-form-item>
 
-                    <el-form-item label="采集值类型" prop="cj_type">
+                    <el-form-item label="采集值类型：" prop="dataType">
-                        <el-input placeholder="请输入采集值类型" v-model="addOrEditForm.cj_type" clearable />
+                        <el-input placeholder="请输入采集值类型" v-model="addOrEditForm.dataType" clearable />
                     </el-form-item>
-                    <el-form-item label="采集值单位：">
+                    <el-form-item label="采集值单位：" prop="unit">
-                        <el-input placeholder="请输入采集值单位" v-model="addOrEditForm.cj_unit" clearable />
+                        <el-input placeholder="请输入采集值单位" v-model="addOrEditForm.unit" clearable />
                     </el-form-item>
-                    <el-form-item label="是否告警" prop="is_warning">
+                    <el-form-item label="是否告警：" prop="isWarn">
-                        <el-select v-model="addOrEditForm.is_warning" clearable filterable style="width: 100%">
+                        <el-select v-model="addOrEditForm.isWarn" clearable filterable style="width: 100%">
                             <el-option label="是" value="1" />
-                            <el-option label="否" value="2" />
+                            <el-option label="否" value="0" />
                         </el-select>
                     </el-form-item>
 
-                    <el-form-item label="变化值：" prop="change_data">
+                    <el-form-item label="变化值：" prop="changeVal">
-                        <el-input placeholder="请输入变化值" v-model="addOrEditForm.change_data" clearable />
+                        <el-input placeholder="请输入变化值" v-model="addOrEditForm.changeVal" clearable />
                     </el-form-item>
 
-                    <el-form-item label="最大阈值：" prop="max_data">
+                    <el-form-item label="最大阈值：" prop="maxVal">
-                        <el-input placeholder="请输入最大阈值" v-model="addOrEditForm.max_data" clearable />
+                        <el-input placeholder="请输入最大阈值" v-model="addOrEditForm.maxVal" clearable />
                     </el-form-item>
-                    <el-form-item label="最小阈值：" prop="min_data">
+                    <el-form-item label="最小阈值：" prop="minVal">
-                        <el-input placeholder="请输入最小阈值" v-model="addOrEditForm.min_data" clearable />
+                        <el-input placeholder="请输入最小阈值" v-model="addOrEditForm.minVal" clearable />
                     </el-form-item>
-                    <el-form-item label="设备级联编码：" prop="code">
+
-                        <el-input placeholder="请输入设备级联编码" v-model="addOrEditForm.code" clearable />
+                    <el-form-item label="备注：" prop="remark">
+                        <el-input placeholder="请输入编码" v-model="addOrEditForm.remark" clearable />
                     </el-form-item>
 
                     <el-form-item class="handle">
@@ -80,8 +95,19 @@ import TableModel from '@/components/TableModel'
 import DialogModel from '@/components/DialogModel'
 
 import { formLabel, columnsList, dialogConfig } from './config'
-import { getProjectListAPI } from '@/api/project-manage/index.js'
+import {
+    getEquipmentManageListInDetailsAPI,
+    addEquipmentManageDataInDetailsAPI,
+    editEquipmentManageDataInDetailsAPI,
+    deleteEquipmentManageDataInDetailsAPI,
+} from '@/api/perception-devices/equipment-manage.js'
 export default {
+    props: {
+        detailsId: {
+            type: [Number, String],
+            default: () => '',
+        },
+    },
     components: {
         TableModel,
         DialogModel,
@@ -91,29 +117,44 @@ export default {
             formLabel,
             columnsList,
             dialogConfig,
-            getProjectListAPI,
+            getEquipmentManageListInDetailsAPI,
             dialogType: 1,
             // 新增或修改接口
             addOrEditForm: {
-                jc_name: '', // 监测名称
+                devId: '', // 外层列表id
-                createTime: '', // 创建时间
+                attrName: '', // 监测名称
-                cj_data: '', //采集值
+                updateTime: '', // 创建时间
-                cj_type: '', // 采集值类型
+                attrVal: '', //采集值
-                cj_unit: '', // 采集值单位
+                dataType: '', // 采集值类型
-                is_warning: '', // 是否告警
+                unit: '', // 采集值单位
-                change_data: '', // 变化值
+                isWarn: '', // 是否告警
-                max_data: '', // 最大阈值
+                changeVal: '', // 变化值
-                min_data: '', // 最小阈值
+                maxVal: '', // 最大阈值
-                code: '', // 设备级联编码
+                minVal: '', // 最小阈值
+                attrCode: '', // 设备级联编码
+                remark: '', // 备注
+                attrId: '',
             },
             addOrEditFormRules: {
-                jc_name: [
+                attrName: [
                     {
                         required: true,
                         message: '请输入监测名称',
                         trigger: 'blur',
                     },
                 ],
+                attrCode: [
+                    {
+                        required: true,
+                        message: '请输入编码',
+                        trigger: 'blur',
+                    },
+                ],
+            },
+
+            // 列表查询参数
+            sendParams: {
+                devId: '',
             },
         }
     },
@@ -123,15 +164,69 @@ export default {
                 1: '新增',
                 2: '修改',
             }
+
+            if (type === 2) {
+                const {
+                    devId, // 外层列表id
+                    attrName, // 监测名称
+                    updateTime, // 创建时间
+                    attrVal, //采集值
+                    dataType, // 采集值类型
+                    unit, // 采集值单位
+                    isWarn, // 是否告警
+                    changeVal, // 变化值
+                    maxVal, // 最大阈值
+                    minVal, // 最小阈值
+                    attrCode, // 设备级联编码
+                    remark, // 备注
+                    attrId, // 列表id
+                } = data
+
+                Object.assign(this.addOrEditForm, {
+                    devId, // 外层列表id
+                    attrName, // 监测名称
+                    updateTime, // 创建时间
+                    attrVal, //采集值
+                    dataType, // 采集值类型
+                    unit, // 采集值单位
+                    isWarn, // 是否告警
+                    changeVal, // 变化值
+                    maxVal, // 最大阈值
+                    minVal, // 最小阈值
+                    attrCode, // 设备级联编码
+                    remark, // 备注
+                    attrId, // 列表id
+                })
+            } else {
+                this.addOrEditForm = {
+                    devId: '', // 外层列表id
+                    attrName: '', // 监测名称
+                    updateTime: '', // 创建时间
+                    attrVal: '', //采集值
+                    dataType: '', // 采集值类型
+                    unit: '', // 采集值单位
+                    isWarn: '', // 是否告警
+                    changeVal: '', // 变化值
+                    maxVal: '', // 最大阈值
+                    minVal: '', // 最小阈值
+                    attrCode: '', // 设备级联编码
+                    remark: '', // 备注
+                    attrId: '',
+                }
+            }
             this.dialogType = type
-            this.dialogConfig.outerTitle = titleType[type]
             this.dialogConfig.outerVisible = true
+            this.dialogConfig.outerTitle = titleType[type]
         },
         handleDeleteData(data) {
             this.$modal
                 .confirm(`是否确认删除该条数据`)
                 .then(async () => {
-                    this.$refs.tableRef.getTableList()
+                    const res = await deleteEquipmentManageDataInDetailsAPI({ attrId: data.attrId })
+                    if (res.code === 200) {
+                        this.$modal.msgSuccess('删除成功')
+                        this.$refs.tableRef.getTableList()
+                    }
                 })
                 .catch(() => {})
         },
@@ -145,6 +240,61 @@ export default {
         onSubmitForm() {
             this.$refs.addOrEditFormRef.validate(async (valid) => {
                 if (valid) {
+                    // this.dialogConfig.outerVisible = false
+
+                    const {
+                        devId, // 外层列表id
+                        attrName, // 监测名称
+                        updateTime, // 创建时间
+                        attrVal, //采集值
+                        dataType, // 采集值类型
+                        unit, // 采集值单位
+                        isWarn, // 是否告警
+                        changeVal, // 变化值
+                        maxVal, // 最大阈值
+                        minVal, // 最小阈值
+                        attrCode, // 设备级联编码
+                        remark, // 备注
+                        attrId,
+                    } = this.addOrEditForm
+                    const params = {
+                        devId, // 外层列表id
+                        attrName, // 监测名称
+                        updateTime, // 创建时间
+                        attrVal, //采集值
+                        dataType, // 采集值类型
+                        unit, // 采集值单位
+                        isWarn, // 是否告警
+                        changeVal, // 变化值
+                        maxVal, // 最大阈值
+                        minVal, // 最小阈值
+                        attrCode, // 设备级联编码
+                        remark, // 备注
+                    }
+
+                    // 当修改表单时需要传递列表id
+                    if (this.dialogType === 2) {
+                        params.attrId = attrId
+                    }
+
+                    params.devId = this.detailsId
+                    console.log(
+                        `%c🔍 感知设备详情属性${this.dialogType === 1 ? '新增' : '修改'}入参 %c`,
+                        'background: linear-gradient(90deg, #FF6B6B, #4ECDC4); color: white; padding: 5px 10px; border-radius: 5px; font-weight: bold;',
+                        '',
+                        params,
+                    )
+
+                    const API =
+                        this.dialogType === 1 ? addEquipmentManageDataInDetailsAPI : editEquipmentManageDataInDetailsAPI
+
+                    const res = await API(params)
+
+                    if (res.code === 200) {
+                        this.$modal.msgSuccess(this.dialogType === 1 ? '新增成功' : '修改成功')
+                        this.$refs.tableRef.getTableList()
+                    }
+                    this.$refs.addOrEditFormRef.resetFields()
                     this.dialogConfig.outerVisible = false
                 }
             })
@@ -156,6 +306,16 @@ export default {
             this.dialogConfig.outerVisible = false
         },
     },
+
+    watch: {
+        detailsId: {
+            handler(newValue) {
+                this.sendParams.devId = newValue
+            },
+            deep: true,
+            immediate: true,
+        },
+    },
 }
 </script>
 

src/views/perception-devices/equipment-manage/config.js

@@ -7,13 +7,11 @@ export const columnsList = [
     // { t_props: 'projectName', t_label: '所属工程' },
     { t_props: 'devType', t_label: '设备类型' },
     { t_props: 'devCode', t_label: '设备编码' },
-    { t_props: 'typeName', t_label: '设备名称' },
+    { t_props: 'devName', t_label: '设备名称' },
-    { t_props: 'typeCode', t_label: '设备级联编码' },
+    { t_props: 'isActive', t_label: '是否启用', t_slot: 'isActive' },
-    { t_props: 'isOnline', t_label: '设备状态', t_slot: 'status' },
+    { t_props: 'isOnline', t_label: '在线状态', t_slot: 'isOnline' },
-    { t_props: 'auditStatus', t_label: '设备信号' },
+    { t_props: 'constName', t_label: '监测区域' },
-    { t_props: 'bdName', t_label: '所属边带' },
+    { t_props: 'remark', t_label: '备注' },
-    { t_props: 'auditStatus', t_label: '监测区域' },
-    { t_props: 'auditStatus', t_label: '备注' },
 ]
 
 export const dialogConfig = {

src/views/perception-devices/equipment-manage/index.vue

@@ -25,8 +25,13 @@
                 </el-button>
             </template>
 
-            <template slot="status" slot-scope="{ data }">
+            <template slot="isActive" slot-scope="{ data }">
-                <el-tag size="mini">状态 </el-tag>
+                <el-tag size="mini" v-if="data.isActive == 1">启用 </el-tag>
+                <el-tag size="mini" v-if="data.isActive == 0">禁用 </el-tag>
+            </template>
+            <template slot="isOnline" slot-scope="{ data }">
+                <el-tag size="mini" v-if="data.isOnline == 1">在线 </el-tag>
+                <el-tag size="mini" v-if="data.isOnline == 0">离线 </el-tag>
             </template>
         </TableModel>
 
@@ -34,9 +39,14 @@
         <DialogModel :dialogConfig="dialogConfig" @closeDialogOuter="closeDialogOuter">
             <template slot="outerContent">
                 <!-- 新增以及修改弹框 -->
-                <AddEditForm @onCloseDialog="closeDialogOuter" v-if="dialogType === 1 || dialogType === 2" />
+                <AddEditForm
+                    :dialogType="dialogType"
+                    :editFormModel="editFormModel"
+                    @onCloseDialog="closeDialogOuter"
+                    v-if="dialogType === 1 || dialogType === 2"
+                />
                 <!-- 详情弹框 -->
-                <ProjectDetails v-else />
+                <ProjectDetails v-else :detailsId="detailsId" />
             </template>
         </DialogModel>
     </div>
@@ -48,9 +58,7 @@ import DialogModel from '@/components/DialogModel'
 import AddEditForm from './components/add-edit-form'
 import ProjectDetails from './components/project-details'
 import { formLabel, columnsList, dialogConfig } from './config'
-import { getProjectListAPI } from '@/api/project-manage/index.js'
+import { getEquipmentManageListAPI, deleteEquipmentManageDataAPI } from '@/api/perception-devices/equipment-manage.js'
-
-import { getEquipmentManageListAPI } from '@/api/perception-devices/equipment-manage.js'
 export default {
     components: {
         TableModel,
@@ -66,6 +74,10 @@ export default {
             // getProjectListAPI,
             getEquipmentManageListAPI,
             dialogType: 1,
+
+            // 修改时数据源
+            editFormModel: null,
+            detailsId: '',
         }
     },
     methods: {
@@ -79,26 +91,70 @@ export default {
                 2: '设备修改',
                 3: '设备详情列表',
             }
-            this.dialogType = type
-            this.dialogConfig.outerTitle = titleType[type]
-            this.dialogConfig.outerVisible = true
 
             if (type === 3) {
                 this.dialogConfig.outerWidth = '90%'
+                this.detailsId = data.id
             } else {
                 this.dialogConfig.outerWidth = '50%'
             }
+
+            if (type === 2) {
+                const {
+                    typeId, // 设备类型
+                    devName, //设备名称
+                    devCode, // 设备编码
+                    isActive, // 是否启用
+                    isOnline, // 设备状态
+                    devLocation, // 位置
+                    constId, // 监测区域
+                    bdId, // 所属边带
+                    backImage, // 背景
+                    remark, // 描述
+                    configData, // 配置
+                    id,
+                } = data
+
+                this.editFormModel = {
+                    typeId, // 设备类型
+                    devName, //设备名称
+                    devCode, // 设备编码
+                    isActive, // 是否启用
+                    isOnline, // 设备状态
+                    devLocation, // 位置
+                    constId, // 监测区域
+                    bdId, // 所属边带
+                    backImage, // 背景
+                    remark, // 描述
+                    configData, // 配置
+                    id,
+                }
+            } else {
+                this.editFormModel = null
+            }
+
+            this.dialogType = type
+            this.dialogConfig.outerTitle = titleType[type]
+            this.dialogConfig.outerVisible = true
         },
         handleDeleteData(data) {
             this.$modal
                 .confirm(`是否确认删除该条数据`)
                 .then(async () => {
-                    this.$refs.tableRef.getTableList()
+                    const res = await deleteEquipmentManageDataAPI({ id: data.id })
+                    if (res.code === 200) {
+                        this.$modal.msgSuccess('删除成功')
+                        this.$refs.tableRef.getTableList()
+                    }
                 })
                 .catch(() => {})
         },
         /** 关闭外侧弹框 */
-        closeDialogOuter() {
+        closeDialogOuter(isChange) {
+            // isChange 判断是否触发修改或者新增逻辑
+            if (isChange) {
+                this.$refs.tableRef.getTableList()
+            }
             this.dialogConfig.outerVisible = false
         },
     },