bonus
/
bns_zhgd_web
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge branch 'dev-sy'

This commit is contained in:
BianLzhaoMin 2025-04-16 13:27:52 +08:00
parent fae803a160 67d10652ac
commit a287fe7d9e
12 changed files with 731 additions and 192 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
src/api/common.js Normal file
View File

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

15
src/api/high-formwork/index.js
View File

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

21
src/api/perception-devices/equipment-manage.js
View File

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

4
src/components/DialogModel/index.vue
View File

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

18
src/components/TableModel/index.vue
View File

@ -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) {
// Object.assign(this.queryParams, this.sendParams)
// }
if (this.sendParams !== null) {
Object.assign(this.queryParams, this.sendParams)
}
this.getTableList()
},
updated() {

105
src/views/high-formwork/components/project-details.vue
View File

@ -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-column type="selection" width="55" />
<el-table-column label="ID" />
<el-table-column label="产品ID" />
<el-table-column label="设备名称" />
<el-table-column label="描述" />
<el-table-column label="位置" />
<el-table-column label="在线状态" />
<el-table-column label="创建时间" />
<el-table :data="deviceList" border @selection-change="handleSelectionChange" row-key="id">
<el-table-column type="selection" width="45" align="center" />
<el-table-column align="center" show-overflow-tooltip label="ID" prop="id" />
<el-table-column align="center" show-overflow-tooltip label="产品ID" prop="typeCode" />
<el-table-column align="center" show-overflow-tooltip label="设备名称" prop="devName" />
<el-table-column align="center" show-overflow-tooltip label="设备编码" prop="devCode" />
<el-table-column align="center" show-overflow-tooltip label="创建时间" prop="createTime" />
</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>

4
src/views/high-formwork/index.vue
View File

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

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

@ -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-option v-for="type in typeList" :key="type.id" :label="type.label" :value="type.id" />
<el-select
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-input placeholder="请输入设备编码" v-model="addOrEditForm.deviceCode" clearable />
<el-form-item label="设备编码：" prop="devCode">
<el-input placeholder="请输入设备编码" v-model="addOrEditForm.devCode" clearable />
</el-form-item>
<el-form-item label="设备级联编码：">
<el-input placeholder="请输入设备级联编码" v-model="addOrEditForm.casDeviceCode" clearable />
<el-form-item label="是否启用：">
<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-select v-model="addOrEditForm.status" clearable filterable style="width: 100%">
<el-form-item label="在线状态：" prop="isOnline">
<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-input placeholder="请输入设备信号" v-model="addOrEditForm.wifi" clearable />
<el-form-item label="位置：" prop="devLocation">
<el-input placeholder="请输入位置" v-model="addOrEditForm.devLocation" clearable />
</el-form-item>
<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-form-item label="大屏背景：">
<div class="upload-container">
<el-upload
: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-input placeholder="请输入所属边代" v-model="addOrEditForm.bd" clearable />
<el-form-item label="所属边代：" prop="bdId">
<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 } from '@/api/perception-devices/equipment-manage.js'
import { addEquipmentManageDataAPI, editEquipmentManageDataAPI } 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: '', // 设备编码
casDeviceCode: '', // 级联编码
status: '', // 设备状态
wifi: '', // 设备信号
area: '', // 监测区域
bd: '', // 所属边
devCode: '', // 设备编码
isActive: '1', // 是否启用
isOnline: '1', // 设备状态
devLocation: '', // 位置
constId: '', // 监测区域
bdId: '', // 所属边带
backImage: '', // 背景
remark: '', // 描述
configData: '', // 配置
fileList: [],
},
addOrEditFormRef: {
// projectName: [
// {
// required: true,
// message: '请选择所属工程',
// trigger: 'change',
// },
// ],
addOrEditFormRules: {
typeId: [
{
required: true,
@ -105,55 +172,31 @@ export default {
trigger: 'change',
},
],
deviceName: [
devName: [
{
required: true,
message: '请输入设备名称',
trigger: 'blur',
},
],
deviceCode: [
devCode: [
{
required: true,
message: '请输入设备编码',
trigger: 'blur',
},
],
status: [
{
required: true,
message: '请选择设备状态',
trigger: 'change',
},
],
area: [
{
required: true,
message: '请选择监测区域',
trigger: 'change',
},
],
},
// 所属工程数据源
projectList: [
{ id: 1, label: '工程1' },
{ id: 2, label: '工程2' },
{ id: 3, label: '工程3' },
],
projectList: [],
// 设备类型数据源
typeList: [
{ id: 1, label: '测试1' },
{ id: 2, label: '测试2' },
{ id: 3, label: '测试3' },
],
typeList: [],
// 设备类型数据源
areaList: [
{ id: 1, label: '区域1' },
{ id: 2, label: '区域2' },
{ id: 3, label: '区域3' },
],
areaList: [],
// 边代数据源
bdList: [],
}
},
@ -166,12 +209,59 @@ export default {
onSubmitForm() {
this.$refs.addOrEditFormRef.validate(async (valid) => {
if (valid) {
const res = await addProjectAPI(this.addOrEditForm)
if (res.code === 200) {
this.$modal.msgSuccess('新增成功')
const formData = new FormData()
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>

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

@ -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: '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: 'attrName', t_label: '监测名称' },
{ t_props: 'attrVal', t_label: '监测值' },
{ t_props: 'unit', t_label: '单位' },
{ t_props: 'dataType', t_label: '采集值类型' },
{ t_props: 'attrCode', t_label: '编码' },
{ t_props: 'updateTime', t_label: '监测时间', t_width: 180 },
]
export const dialogConfig = {

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

@ -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-input placeholder="请输入监测名称" v-model="addOrEditForm.jc_name" clearable />
<el-form-item label="监测名称：" prop="attrName">
<el-input placeholder="请输入监测名称" v-model="addOrEditForm.attrName" 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 label="编码：" prop="attrCode">
<el-input placeholder="请输入编码" v-model="addOrEditForm.attrCode" clearable />
</el-form-item>
<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-input placeholder="请输入采集值" v-model="addOrEditForm.cj_data" clearable />
<el-form-item label="采集值：" prop="attrVal">
<el-input placeholder="请输入采集值" v-model="addOrEditForm.attrVal" clearable />
</el-form-item>
<el-form-item label="采集值类型" prop="cj_type">
<el-input placeholder="请输入采集值类型" v-model="addOrEditForm.cj_type" clearable />
<el-form-item label="采集值类型：" prop="dataType">
<el-input placeholder="请输入采集值类型" v-model="addOrEditForm.dataType" clearable />
</el-form-item>
<el-form-item label="采集值单位：">
<el-input placeholder="请输入采集值单位" v-model="addOrEditForm.cj_unit" clearable />
<el-form-item label="采集值单位：" prop="unit">
<el-input placeholder="请输入采集值单位" v-model="addOrEditForm.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-form-item label="是否告警：" prop="isWarn">
<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-input placeholder="请输入变化值" v-model="addOrEditForm.change_data" clearable />
<el-form-item label="变化值：" prop="changeVal">
<el-input placeholder="请输入变化值" v-model="addOrEditForm.changeVal" clearable />
</el-form-item>
<el-form-item label="最大阈值：" prop="max_data">
<el-input placeholder="请输入最大阈值" v-model="addOrEditForm.max_data" clearable />
<el-form-item label="最大阈值：" prop="maxVal">
<el-input placeholder="请输入最大阈值" v-model="addOrEditForm.maxVal" clearable />
</el-form-item>
<el-form-item label="最小阈值：" prop="min_data">
<el-input placeholder="请输入最小阈值" v-model="addOrEditForm.min_data" clearable />
<el-form-item label="最小阈值：" prop="minVal">
<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: '', // 监测名称
createTime: '', // 创建时间
cj_data: '', //采集值
cj_type: '', // 采集值类型
cj_unit: '', // 采集值单位
is_warning: '', // 是否告警
change_data: '', // 变化值
max_data: '', // 最大阈值
min_data: '', // 最小阈值
code: '', // 设备级联编码
devId: '', // 外层列表id
attrName: '', // 监测名称
updateTime: '', // 创建时间
attrVal: '', //采集值
dataType: '', // 采集值类型
unit: '', // 采集值单位
isWarn: '', // 是否告警
changeVal: '', // 变化值
maxVal: '', // 最大阈值
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>

12
src/views/perception-devices/equipment-manage/config.js
View File

@ -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: 'typeCode', t_label: '设备级联编码' },
{ t_props: 'isOnline', t_label: '设备状态', t_slot: 'status' },
{ t_props: 'auditStatus', t_label: '设备信号' },
{ t_props: 'bdName', t_label: '所属边带' },
{ t_props: 'auditStatus', t_label: '监测区域' },
{ t_props: 'auditStatus', t_label: '备注' },
{ t_props: 'devName', t_label: '设备名称' },
{ t_props: 'isActive', t_label: '是否启用', t_slot: 'isActive' },
{ t_props: 'isOnline', t_label: '在线状态', t_slot: 'isOnline' },
{ t_props: 'constName', t_label: '监测区域' },
{ t_props: 'remark', t_label: '备注' },
]
export const dialogConfig = {

80
src/views/perception-devices/equipment-manage/index.vue
View File

@ -25,8 +25,13 @@
</el-button>
</template>
<template slot="status" slot-scope="{ data }">
<el-tag size="mini">状态 </el-tag>
<template slot="isActive" slot-scope="{ data }">
<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 } from '@/api/perception-devices/equipment-manage.js'
import { getEquipmentManageListAPI, deleteEquipmentManageDataAPI } 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
},
},