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-16 15:25:57 +08:00
parent 0a4cedbd67
commit a0599d077a
9 changed files with 543 additions and 300 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
src/api/perception-devices/attribute-config.js
View File

@ -1,20 +0,0 @@
import request from '@/utils/request'
/* 感知设备 ---- 属性配置接口 */
// 列表接口
export const getAttributeConfigListAPI = (data) => {
return request.post('/xxx', data)
}
// 新增接口
export const addAttributeConfigDataAPI = (data) => {
return request.post('/xxx', data)
}
// 修改接口
export const editAttributeConfigDataAPI = (data) => {
return request.post('/xxx', data)
}
// 删除接口
export const deleteAttributeConfigDataAPI = (data) => {
return request.post('/xxx', data)
}

23
src/api/perception-devices/construction-site.js Normal file
View File

@ -0,0 +1,23 @@
import request from '@/utils/request'
import requestNew from '@/utils/request-new'
/* 感知设备 ---- 施工现场接口 */
// 列表接口
export const getConstructionSiteListAPI = (data) => {
return request.get('/smart-site/constInfo/getPageList', {
params: data,
})
}
// 新增接口
export const addConstructionSiteDataAPI = (data) => {
return requestNew.post('/smart-site/constInfo/insertData', data)
}
// 修改接口
export const editConstructionSiteDataAPI = (data) => {
return requestNew.post('/smart-site/constInfo/updateData', data)
}
// 删除接口
export const deleteConstructionSiteDataAPI = (data) => {
return request.post('/smart-site/constInfo/delData', data)
}

171
src/views/perception-devices/attribute-config/components/add-edit-form.vue
View File

@ -1,171 +0,0 @@
<template>
<!-- 新增修改弹框 -->
<div>
<el-form label-width="auto" :model="addOrEditForm" :rules="addOrEditFormRef" ref="addOrEditFormRef">
<el-form-item label="设备ID：" prop="deviceName">
<el-input placeholder="请输入设备ID" v-model="addOrEditForm.deviceName" clearable />
</el-form-item>
<el-form-item label="属性ID：" prop="deviceCode">
<el-input placeholder="请输入属性ID" v-model="addOrEditForm.deviceCode" clearable />
</el-form-item>
<el-form-item label="属性名称：">
<el-input placeholder="请输入属性名称" v-model="addOrEditForm.casDeviceCode" clearable />
</el-form-item>
<el-form-item label="数据类型：">
<el-input placeholder="请输入数据类型" v-model="addOrEditForm.wifi" clearable />
</el-form-item>
<el-form-item label="单位：">
<el-input placeholder="请输入单位" v-model="addOrEditForm.bd" clearable />
</el-form-item>
<el-form-item label="属性值：">
<el-input placeholder="请输入属性值" v-model="addOrEditForm.sx_data" clearable />
</el-form-item>
<el-form-item label="描述：">
<el-input placeholder="请输入描述" v-model="addOrEditForm.remake" 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>
</div>
</template>
<script>
import { addProjectAPI } from '@/api/project-manage/index.js'
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 {
// 新增或修改接口
addOrEditForm: {
projectName: '', // 所属工程
deviceType: '', // 设备类型
deviceName: '', //设备名称
deviceCode: '', // 设备编码
casDeviceCode: '', // 级联编码
status: '', // 设备状态
wifi: '', // 设备信号
area: '', // 监测区域
bd: '', // 所属边
},
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)
},
},
async mounted() {},
watch: {},
}
</script>
<style lang="scss" scoped></style>

18
src/views/perception-devices/attribute-config/config.js
View File

@ -1,18 +0,0 @@
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: '设备ID' },
{ t_props: 'planStartTime', t_label: '属性ID' },
{ t_props: 'planEndTime', t_label: '属性名称' },
{ t_props: 'ownerUnit', 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,
}

89
src/views/perception-devices/attribute-config/index.vue
View File

@ -1,89 +0,0 @@
<template>
<!-- 感知设备 ---- 属性配置 -->
<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-download" @click="handleExport()"> 导出 </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="handleAddOrOther(data, 2)" icon="el-icon-edit">
修改
</el-button>
<!-- <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)">
删除
</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" />
</template>
</DialogModel>
</div>
</template>
<script>
import TableModel from '@/components/TableModel'
import DialogModel from '@/components/DialogModel'
import AddEditForm from './components/add-edit-form'
import { formLabel, columnsList, dialogConfig } from './config'
import { getProjectListAPI } from '@/api/project-manage/index.js'
export default {
components: {
TableModel,
DialogModel,
AddEditForm,
},
data() {
return {
formLabel,
columnsList,
dialogConfig,
getProjectListAPI,
dialogType: 1,
}
},
methods: {
handleExport() {
console.log('导出')
},
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.dialogConfig.outerVisible = false
},
},
}
</script>
<style></style>

341
src/views/perception-devices/construction-site/components/add-edit-form.vue Normal file
View File

@ -0,0 +1,341 @@
<template>
<!-- 新增修改弹框 -->
<div>
<el-form label-width="auto" :model="addOrEditForm" :rules="addOrEditFormRules" ref="addOrEditFormRef">
<el-form-item label="施工信息：" prop="name">
<el-input placeholder="请输入设备名称" v-model="addOrEditForm.name" clearable />
</el-form-item>
<el-form-item label="设备类型：" prop="typeId">
<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>
<el-form-item label="设备编码：" prop="code">
<el-input placeholder="请输入设备编码" v-model="addOrEditForm.code" clearable />
</el-form-item>
<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="大屏背景：">
<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="描述：">
<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">
<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 { addConstructionSiteDataAPI, editConstructionSiteDataAPI } from '@/api/perception-devices/construction-site.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() {
return {
uploadFileUrl: process.env.VUE_APP_BASE_API + '/file/upload',
headers: {
Authorization: 'Bearer ' + getToken(),
},
dialogInnerVisible: false,
previewUrl: '',
fileType: ['png', 'jpg', 'jpeg'],
// 新增或修改接口
addOrEditForm: {
name: '', // 施工信息
typeId: '', // 设备类型
code: '', // 设备编码
isActive: '1', // 是否启用
backImage: '', // 背景
remark: '', // 描述
configData: '', // 配置
fileList: [],
id: '',
},
addOrEditFormRules: {
typeId: [
{
required: true,
message: '请选择设备类型',
trigger: 'change',
},
],
name: [
{
required: true,
message: '请输入施工信息',
trigger: 'blur',
},
],
devCode: [
{
required: true,
message: '请输入设备编码',
trigger: 'blur',
},
],
},
// 所属工程数据源
projectList: [],
// 设备类型数据源
typeList: [],
// 设备类型数据源
areaList: [],
// 边代数据源
bdList: [],
}
},
methods: {
handleClose() {
this.$refs.addOrEditFormRef.resetFields()
// this.$emit('update:formDialogVisible', false)
},
// 表单提交
onSubmitForm() {
this.$refs.addOrEditFormRef.validate(async (valid) => {
if (valid) {
const formData = new FormData()
const {
name, // 施工信息
typeId, // 设备类型
code, // 设备编码
isActive, // 是否启用
backImage, // 背景
remark, // 描述
configData, // 配置
id,
} = this.addOrEditForm
const params = {
name, // 施工信息
typeId, // 设备类型
code, // 设备编码
isActive, // 是否启用
backImage, // 背景
remark, // 描述
configData, // 配置
}
// 当修改表单时需要传递列表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 ? addConstructionSiteDataAPI : editConstructionSiteDataAPI
const res = await API(formData)
if (res.code === 200) {
this.$modal.msgSuccess(this.dialogType === 1 ? '新增成功' : '修改成功')
}
this.$refs.addOrEditFormRef.resetFields()
this.$emit('onCloseDialog', true)
}
})
},
// 取消按钮
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,
},
},
}
</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>

17
src/views/perception-devices/construction-site/config.js Normal file
View File

@ -0,0 +1,17 @@
export const formLabel = [
{ f_label: '搜索关键词', f_model: 'keyWord', f_type: 'ipt', isShow: false },
{ f_label: '设备类型', f_model: 'deviceType', f_type: 'sel', isShow: false },
]
export const columnsList = [
{ t_props: 'name', t_label: '施工信息' },
{ t_props: 'typeName', t_label: '设备名称' },
{ t_props: 'code', t_label: '设备编码' },
{ t_props: 'isActive', t_label: '是否启用', t_slot: 'isActive' },
{ t_props: 'remark', t_label: '备注' },
]
export const dialogConfig = {
outerWidth: '50%',
outerTitle: '设备新增',
outerVisible: false,
}

142
src/views/perception-devices/construction-site/index.vue Normal file
View File

@ -0,0 +1,142 @@
<template>
<!-- 感知设备 ---- 施工现场 -->
<div class="app-container">
<TableModel
:formLabel="formLabel"
:columnsList="columnsList"
:request-api="getConstructionSiteListAPI"
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)">
新增
</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="isActive" slot-scope="{ data }">
<el-tag size="mini" v-if="data.isActive == 1">启用 </el-tag>
<el-tag size="mini" v-if="data.isActive == 0" type="warning">禁用 </el-tag>
</template>
</TableModel>
<!-- 弹框 -->
<DialogModel :dialogConfig="dialogConfig" @closeDialogOuter="closeDialogOuter">
<template slot="outerContent">
<!-- 新增以及修改弹框 -->
<AddEditForm
:dialogType="dialogType"
:editFormModel="editFormModel"
@onCloseDialog="closeDialogOuter"
v-if="dialogType === 1 || dialogType === 2"
/>
<!-- 详情弹框 -->
<ProjectDetails v-else :detailsId="detailsId" />
</template>
</DialogModel>
</div>
</template>
<script>
import TableModel from '@/components/TableModel'
import DialogModel from '@/components/DialogModel'
import AddEditForm from './components/add-edit-form'
import { formLabel, columnsList, dialogConfig } from './config'
import {
getConstructionSiteListAPI,
deleteConstructionSiteDataAPI,
} from '@/api/perception-devices/construction-site.js'
export default {
components: {
TableModel,
DialogModel,
AddEditForm,
},
data() {
return {
formLabel,
columnsList,
dialogConfig,
// getProjectListAPI,
getConstructionSiteListAPI,
dialogType: 1,
// 修改时数据源
editFormModel: null,
detailsId: '',
}
},
methods: {
handleExport() {
console.log('导出')
},
handleAddOrOther(data, type) {
const titleType = {
1: '设备新增',
2: '设备修改',
}
if (type === 2) {
const {
name, // 施工信息
typeId, // 设备类型
code, // 设备编码
isActive, // 是否启用
backImage, // 背景
remark, // 描述
configData, // 配置
id,
} = data
this.editFormModel = {
name, // 施工信息
typeId, // 设备类型
code, // 设备编码
isActive, // 是否启用
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 () => {
const res = await deleteConstructionSiteDataAPI({ id: data.id })
if (res.code === 200) {
this.$modal.msgSuccess('删除成功')
this.$refs.tableRef.getTableList()
}
})
.catch(() => {})
},
/** 关闭外侧弹框 */
closeDialogOuter(isChange) {
// isChange 判断是否触发修改或者新增逻辑
if (isChange) {
this.$refs.tableRef.getTableList()
}
this.dialogConfig.outerVisible = false
},
},
}
</script>
<style></style>

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

@ -1,7 +1,25 @@
export const formLabel = [
{ f_label: '搜索关键词', f_model: 'proName', f_type: 'ipt', isShow: false },
{ f_label: '设备状态', f_model: 'relUser', f_type: 'sel', isShow: false },
{ f_label: '设备启用', f_model: 'relUser', f_type: 'sel', isShow: false },
{
f_label: '设备状态',
f_model: 'isOnline',
f_type: 'sel',
isShow: false,
f_selList: [
{ label: '在线', value: '1' },
{ label: '离线', value: '0' },
],
},
{
f_label: '是否启用',
f_model: 'isActive',
f_type: 'sel',
isShow: false,
f_selList: [
{ label: '启用', value: '1' },
{ label: '禁用', value: '0' },
],
},
]
export const columnsList = [
// { t_props: 'projectName', t_label: '所属工程' },