施工现场代码初步完善
This commit is contained in:
BianLzhaoMin
parent
0a4cedbd67
commit
a0599d077a
|
|
@ -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)
|
|
||||||
}
|
|
||||||
|
|
@ -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)
|
||||||
|
}
|
||||||
|
|
@ -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>
|
|
||||||
|
|
@ -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,
|
|
||||||
}
|
|
||||||
|
|
@ -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>
|
|
||||||
|
|
@ -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>
|
||||||
|
|
@ -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,
|
||||||
|
}
|
||||||
|
|
@ -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>
|
||||||
|
|
@ -1,7 +1,25 @@
|
||||||
export const formLabel = [
|
export const formLabel = [
|
||||||
{ f_label: '搜索关键词', f_model: 'proName', f_type: 'ipt', isShow: false },
|
{ 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 = [
|
export const columnsList = [
|
||||||
// { t_props: 'projectName', t_label: '所属工程' },
|
// { t_props: 'projectName', t_label: '所属工程' },
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue