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-15 11:19:26 +08:00
parent a7e13089d1 3620873560
commit afdec267e8
10 changed files with 599 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -4,11 +4,11 @@ import request from '@/utils/request'
// 列表接口
export const getEquipmentManageListAPI = (data) => {
return request.post('/xxx', data)
return request.get('/smart-site/collect/dev/getPageList', data)
}
// 新增接口
export const addEquipmentManageDataAPI = (data) => {
return request.post('/xxx', data)
return request.post('/smart-site/collect/dev/insertData', data)
}
// 修改接口
export const editEquipmentManageDataAPI = (data) => {

315
src/views/high-formwork/components/add-edit-form.vue Normal file
View File

@ -0,0 +1,315 @@
<template>
<!-- 新增修改弹框 -->
<div>
<el-form label-width="auto" :model="addOrEditForm" :rules="addOrEditFormRef" ref="addOrEditFormRef">
<el-form-item label="分组名称：" prop="deviceName">
<el-input placeholder="请输入分组名称" v-model="addOrEditForm.deviceName" clearable />
</el-form-item>
<el-form-item label="支护状态：" prop="deviceCode">
<el-select
clearable
filterable
style="width: 100%"
placeholder="请选择支护状态"
v-model="addOrEditForm.deviceCode"
>
<el-option label="在建" value="1" />
<el-option label="已拆除" value="2" />
</el-select>
</el-form-item>
<el-form-item label="支护安全等级：">
<el-select
clearable
filterable
style="width: 100%"
placeholder="请选择支护安全等级"
v-model="addOrEditForm.casDeviceCode"
>
<el-option label="一级" value="1" />
<el-option label="二级" value="2" />
<el-option label="三级" value="2" />
</el-select>
</el-form-item>
<el-form-item label="施工开始时间：">
<el-date-picker
type="date"
style="width: 100%"
value-format="yyyy-MM-dd"
v-model="addOrEditForm.wifi"
placeholder="请选择施工开始时间"
/>
</el-form-item>
<el-form-item label="大屏背景：">
<div class="upload-container" v-if="formType != 1">
<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="描述：">
<el-input
clearable
type="textarea"
placeholder="请输入描述"
v-model="addOrEditForm.sx_data"
:autosize="{ minRows: 3, maxRows: 10 }"
/>
</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>
<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 { getToken } from '@/utils/auth'
export default {
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: '', // 所属工程
deviceType: '', // 设备类型
deviceName: '', //设备名称
deviceCode: '', // 设备编码
casDeviceCode: '', // 级联编码
status: '', // 设备状态
wifi: '', // 设备信号
area: '', // 监测区域
bd: '', // 所属边
fileList: [],
},
addOrEditFormRef: {
projectName: [
{
required: true,
message: '请选择所属工程',
trigger: 'change',
},
],
deviceType: [
{
required: true,
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',
},
],
},
// 所属工程数据源
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' },
],
}
},
methods: {
handleClose() {
this.$refs.addOrEditFormRef.resetFields()
// this.$emit('update:formDialogVisible', false)
},
// 表单提交
onSubmitForm() {
this.$refs.addOrEditFormRef.validate(async (valid) => {
if (valid) {
const res = await addProjectAPI(this.addOrEditForm)
if (res.code === 200) {
this.$modal.msgSuccess('新增成功')
}
// this.$emit('update:formDialogVisible', false)
this.$emit('onCloseDialog')
}
})
},
// 取消按钮
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.logo = res.data.url
} else {
this.addOrEditForm.fileList = []
this.addOrEditForm.logo = ''
}
this.$modal.closeLoading()
},
// 详情时预览 LOGO
onViewLogoImg(url) {
this.dialogInnerVisible = true
this.previewUrl = url
},
},
async mounted() {},
watch: {},
}
</script>
<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>

14
src/views/high-formwork/components/config.js Normal file
View File

@ -0,0 +1,14 @@
export const formLabel = [{ f_label: '搜索关键词', f_model: 'proName', f_type: 'ipt', isShow: false }]
export const columnsList = [
{ t_props: 'projectName', t_label: 'ID' },
{ t_props: 'address', t_label: '设备名称' },
{ t_props: 'planStartTime', t_label: '在线状态' },
{ t_props: 'planEndTime', t_label: '位置' },
{ t_props: 'ownerUnit', t_label: '描述' },
]
export const dialogConfig = {
outerWidth: '60%',
outerTitle: '设备新增',
outerVisible: false,
}

128
src/views/high-formwork/components/project-details.vue Normal file
View File

@ -0,0 +1,128 @@
<template>
<!-- 感知设备 ---- 设备管理 -->
<div>
<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="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-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>
<el-row style="margin-top: 10px; text-align: right">
<el-button size="mini"> 取消</el-button>
<el-button size="mini" type="primary"> 确认绑定</el-button>
</el-row>
</template>
</DialogModel>
</div>
</template>
<script>
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>

14
src/views/high-formwork/config.js Normal file
View File

@ -0,0 +1,14 @@
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: '描述' },
]
export const dialogConfig = {
outerWidth: '50%',
outerTitle: '新增',
outerVisible: false,
}

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

@ -1,9 +1,99 @@
<template>
<div class="app-container"> 高支模分组管理 </div>
<!-- 高支模分组管理 -->
<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-help" @click="handleDeleteData(data)">
删除
</el-button>
<el-button size="mini" type="success" @click="handleAddOrOther(data, 3)" icon="el-icon-info">
设备
</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">
<!-- 新增以及修改弹框 -->
<AddEditForm @onCloseDialog="closeDialogOuter" v-if="dialogType === 1 || dialogType === 2" />
<!-- 详情弹框 -->
<ProjectDetails v-else />
</template>
</DialogModel>
</div>
</template>
<script>
export default {}
import TableModel from '@/components/TableModel'
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'
export default {
components: {
TableModel,
DialogModel,
AddEditForm,
ProjectDetails,
},
data() {
return {
formLabel,
columnsList,
dialogConfig,
getProjectListAPI,
dialogType: 1,
}
},
methods: {
handleExport() {
console.log('导出')
},
handleAddOrOther(data, type) {
const titleType = {
1: '新增',
2: '修改',
3: '设备列表',
}
if (type === 3) {
this.dialogConfig.outerWidth = '90%'
} else {
this.dialogConfig.outerWidth = '50%'
}
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.dialogConfig.outerVisible = false
},
},
}
</script>
<style></style>

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

@ -2,19 +2,19 @@
<!-- 新增修改弹框 -->
<div>
<el-form label-width="auto" :model="addOrEditForm" :rules="addOrEditFormRef" ref="addOrEditFormRef">
<el-form-item label="所属工程：" prop="projectName">
<!-- <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="deviceType">
<el-select v-model="addOrEditForm.deviceType" clearable filterable style="width: 100%">
</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>
</el-form-item>
<el-form-item label="设备名称：" prop="deviceName">
<el-input placeholder="请输入设备名称" v-model="addOrEditForm.deviceName" clearable />
<el-form-item label="设备名称：" prop="devName">
<el-input placeholder="请输入设备名称" v-model="addOrEditForm.devName" clearable />
</el-form-item>
<el-form-item label="设备编码：" prop="deviceCode">
@ -54,6 +54,7 @@
<script>
import { addProjectAPI } from '@/api/project-manage/index.js'
import { addEquipmentManageDataAPI } from '@/api/perception-devices/equipment-manage.js'
export default {
data() {
const validatePlanStartTime = (rule, value, callback) => {
@ -80,8 +81,8 @@ export default {
// 新增或修改接口
addOrEditForm: {
projectName: '', // 所属工程
deviceType: '', // 设备类型
deviceName: '', //设备名称
typeId: '', // 设备类型
devName: '', //设备名称
deviceCode: '', // 设备编码
casDeviceCode: '', // 级联编码
status: '', // 设备状态
@ -90,14 +91,14 @@ export default {
bd: '', // 所属边
},
addOrEditFormRef: {
projectName: [
{
required: true,
message: '请选择所属工程',
trigger: 'change',
},
],
deviceType: [
// projectName: [
// {
// required: true,
// message: '请选择所属工程',
// trigger: 'change',
// },
// ],
typeId: [
{
required: true,
message: '请选择设备类型',

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

@ -9,7 +9,6 @@ export const columnsList = [
{ t_props: 'auditStatus', t_label: '最小阈值' },
{ t_props: 'auditStatus', t_label: '采集值类型' },
{ t_props: 'auditStatus', t_label: '设备级联编码' },
{ t_props: 'auditStatus', t_label: '操作' },
]
export const dialogConfig = {

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

@ -4,17 +4,16 @@ export const formLabel = [
{ f_label: '设备启用', f_model: 'relUser', f_type: 'sel', 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_slot: 'status' },
// { 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: 'auditStatus', t_label: '所属边带' },
{ t_props: 'bdName', t_label: '所属边带' },
{ t_props: 'auditStatus', t_label: '监测区域' },
{ t_props: 'auditStatus', t_label: '备注' },
{ t_props: 'auditStatus', t_label: '操作' },
]
export const dialogConfig = {

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

@ -1,7 +1,12 @@
<template>
<!-- 感知设备 ---- 设备管理 -->
<div class="app-container">
<TableModel :formLabel="formLabel" :columnsList="columnsList" :request-api="getProjectListAPI" ref="tableRef">
<TableModel
:formLabel="formLabel"
:columnsList="columnsList"
:request-api="getEquipmentManageListAPI"
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="handleAddOrOther(null, 1)">
@ -44,6 +49,8 @@ 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'
export default {
components: {
TableModel,
@ -56,7 +63,8 @@ export default {
formLabel,
columnsList,
dialogConfig,
getProjectListAPI,
// getProjectListAPI,
getEquipmentManageListAPI,
dialogType: 1,
}
},