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

感知设备 ---- 设备管理静态页面及基础逻辑初步完善

This commit is contained in:
BianLzhaoMin 2025-04-14 17:11:34 +08:00
parent a7b5eb355f
commit 0b6c94b040
5 changed files with 332 additions and 124 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
src/api/perception-devices/equipment-manage.js Normal file
View File

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

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

@ -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: {},

19
src/views/perception-devices/equipment-manage/components/config.js Normal file
View File

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

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

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

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

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