wbc
2 weeks ago
26 changed files with 1266 additions and 29 deletions
@ -0,0 +1,209 @@ |
|||
<template> |
|||
<a-modal v-model:open="visible" :title="title" @ok="handleOk" width="50%"> |
|||
<a-form :model="form" layout="vertical" ref="formRef" :rules="rules"> |
|||
<a-row :gutter="[16, 16]"> |
|||
<a-col :span="24"> |
|||
<a-form-item label="站点名称" name="station"> |
|||
<a-select v-model:value="form.station" :options="stationOptions" placeholder="请选择" /> |
|||
</a-form-item> |
|||
</a-col> |
|||
</a-row> |
|||
<a-row :gutter="[16, 16]"> |
|||
<a-col :span="24"> |
|||
<a-form-item label="监测项目" name="monitorProject"> |
|||
<a-select |
|||
v-model:value="form.monitorProject" |
|||
:options="monitorProjectOptions" |
|||
placeholder="请选择" |
|||
/> |
|||
</a-form-item> |
|||
</a-col> |
|||
</a-row> |
|||
<a-row :gutter="[16, 16]"> |
|||
<a-col :span="24"> |
|||
<a-form-item label="参数名称" name="arguments"> |
|||
<a-input v-model:value="form.arguments" placeholder="请输入" /> |
|||
</a-form-item> |
|||
</a-col> |
|||
</a-row> |
|||
<a-row :gutter="[16, 16]"> |
|||
<a-col :span="24"> |
|||
<a-form-item label="发现时间" name="foundDate"> |
|||
<a-date-picker v-model:value="form.foundDate" /> |
|||
</a-form-item> |
|||
</a-col> |
|||
</a-row> |
|||
<a-row :gutter="[16, 16]"> |
|||
<a-col :span="24"> |
|||
<a-form-item label="监理人员" name="monitorPerson"> |
|||
<a-select |
|||
v-model:value="form.monitorPerson" |
|||
:options="monitorPersonOptions" |
|||
placeholder="请选择" |
|||
/> |
|||
</a-form-item> |
|||
</a-col> |
|||
</a-row> |
|||
<a-row :gutter="[16, 16]"> |
|||
<a-col :span="24"> |
|||
<a-form-item label="所属公司" name="ioCompany"> |
|||
<a-select |
|||
v-model:value="form.ioCompany" |
|||
:options="ioCompanyOptions" |
|||
placeholder="请选择" |
|||
/> |
|||
</a-form-item> |
|||
</a-col> |
|||
</a-row> |
|||
<a-row :gutter="[16, 16]"> |
|||
<a-col :span="24"> |
|||
<a-form-item label="监理公司" name="monitorCompany"> |
|||
<a-select |
|||
v-model:value="form.monitorCompany" |
|||
:options="monitorCompanyOptions" |
|||
placeholder="请选择" |
|||
/> |
|||
</a-form-item> |
|||
</a-col> |
|||
</a-row> |
|||
<a-row :gutter="[16, 16]"> |
|||
<a-col :span="24"> |
|||
<a-form-item label="备注" name="remark"> |
|||
<a-textarea v-model:value="form.remark" :rows="4" placeholder="请输入" /> |
|||
</a-form-item> |
|||
</a-col> |
|||
</a-row> |
|||
</a-form> |
|||
</a-modal> |
|||
</template> |
|||
|
|||
<script> |
|||
import { reactive, ref } from 'vue'; |
|||
import { message } from 'ant-design-vue'; |
|||
import { getInfo, add, update } from './api'; |
|||
import { getStationList } from '@/api/common/index'; |
|||
export default { |
|||
setup(props, { emit }) { |
|||
const title = ref('新增'); |
|||
const visible = ref(false); |
|||
const form = reactive({ |
|||
station: null, |
|||
monitorProject: null, |
|||
arguments: '', |
|||
foundDate: '', |
|||
monitorPerson: null, |
|||
ioCompany: null, |
|||
monitorCompany: null, |
|||
remark: '', |
|||
id: null, |
|||
}); |
|||
//下拉框 |
|||
const ioCompanyOptions = [ |
|||
{ |
|||
value: '杭州聚光', |
|||
}, |
|||
]; |
|||
const monitorProjectOptions = [ |
|||
{ |
|||
value: 'PM2.5', |
|||
}, |
|||
{ |
|||
value: 'O3', |
|||
}, |
|||
]; |
|||
const monitorCompanyOptions = [ |
|||
{ |
|||
value: '宁波国研信息科技有限公司', |
|||
}, |
|||
]; |
|||
const stationOptions = ref([]); |
|||
const monitorPersonOptions = ref([ |
|||
{ |
|||
value:'吴昊' |
|||
}, |
|||
{ |
|||
value:'梁涛' |
|||
} |
|||
]); |
|||
const showModal = async (type, id, projectId) => { |
|||
visible.value = true; |
|||
const res = await getStationList(); |
|||
stationOptions.value = res; |
|||
if (type == 1) { |
|||
title.value = '新增'; |
|||
} else if (type == 2) { |
|||
title.value = '编辑'; |
|||
const data = await getInfo(id); |
|||
for (let i in form) { |
|||
form[i] = data[i]; |
|||
} |
|||
} |
|||
}; |
|||
|
|||
const handleOk = () => { |
|||
formRef.value.validate().then((valid) => { |
|||
if (valid) { |
|||
if (title.value == '新增') { |
|||
let params = {}; |
|||
for (let i in form) { |
|||
params[i] = form[i]; |
|||
} |
|||
delete params.id; |
|||
add(params).then((_) => { |
|||
message.success('新增成功'); |
|||
emit('success'); |
|||
closeModal(); |
|||
}); |
|||
} else { |
|||
let params = {}; |
|||
for (let i in form) { |
|||
params[i] = form[i]; |
|||
} |
|||
update(params).then((_) => { |
|||
message.success('编辑成功'); |
|||
emit('success'); |
|||
closeModal(); |
|||
}); |
|||
} |
|||
} |
|||
}); |
|||
}; |
|||
const closeModal = () => { |
|||
formRef.value.resetFields(); |
|||
visible.value = false; |
|||
}; |
|||
const formRef = ref(); |
|||
const rules = { |
|||
station: [{ required: true, message: '请选择' }], |
|||
monitorProject: [{ required: true, message: '请选择' }], |
|||
arguments: [{ required: true, message: '请输入' }], |
|||
foundDate: [{ required: true, message: '请选择' }], |
|||
monitorCompany: [{ required: true, message: '请选择' }], |
|||
ioCompany: [{ required: true, message: '请选择' }], |
|||
}; |
|||
return { |
|||
visible, |
|||
title, |
|||
form, |
|||
showModal, |
|||
handleOk, |
|||
stationOptions, |
|||
monitorProjectOptions, |
|||
monitorCompanyOptions, |
|||
ioCompanyOptions, |
|||
monitorPersonOptions, |
|||
closeModal, |
|||
formRef, |
|||
rules, |
|||
}; |
|||
}, |
|||
}; |
|||
</script> |
|||
|
|||
<style scoped> |
|||
/* 可选样式调整 */ |
|||
.ant-modal-body { |
|||
max-width: 600px; |
|||
margin: 0 auto; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,28 @@ |
|||
import { ID, IDS } from '@/api/base'; |
|||
import { defHttp } from '@/utils/http/axios'; |
|||
|
|||
enum Api { |
|||
root = '/air/partsInfo', |
|||
list = '/air/partsInfo/list', |
|||
} |
|||
|
|||
export function list(params: any) { |
|||
return defHttp.get({ url: Api.list, params }); |
|||
} |
|||
|
|||
export function getInfo(id: ID) { |
|||
return defHttp.get({ url: `${Api.root}/${id}` }); |
|||
} |
|||
|
|||
export function add(data: any) { |
|||
return defHttp.post({ url: Api.root, data }); |
|||
} |
|||
|
|||
export function update(data: any) { |
|||
return defHttp.put({ url: Api.root, data }); |
|||
} |
|||
|
|||
export function removeByIds(ids: IDS) { |
|||
return defHttp.deleteWithMsg({ url: `${Api.root}/${ids.join(',')}` }); |
|||
} |
|||
|
|||
@ -0,0 +1,39 @@ |
|||
import { BasicColumn } from '@/components/Table'; |
|||
import { FormSchema } from '@/components/Form'; |
|||
|
|||
export const formSchemas: FormSchema[] = []; |
|||
|
|||
export const columns: BasicColumn[] = [ |
|||
{ |
|||
title: '站点', |
|||
dataIndex: 'station', |
|||
}, |
|||
{ |
|||
title: '监测项目', |
|||
dataIndex: 'monitorProject', |
|||
}, |
|||
{ |
|||
title: '参数名称', |
|||
dataIndex: 'arguments', |
|||
}, |
|||
{ |
|||
title: '发现时间', |
|||
dataIndex: 'foundDate', |
|||
}, |
|||
{ |
|||
title: '监理人员', |
|||
dataIndex: 'monitorPerson', |
|||
}, |
|||
{ |
|||
title: '监理单位', |
|||
dataIndex: 'monitorCompany', |
|||
}, |
|||
{ |
|||
title: '运维单位', |
|||
dataIndex: 'ioCompany', |
|||
}, |
|||
{ |
|||
title: '备注', |
|||
dataIndex: 'remark', |
|||
}, |
|||
]; |
|||
@ -0,0 +1,53 @@ |
|||
<template> |
|||
<PageWrapper dense> |
|||
<BasicTable @register="registerTable"> |
|||
<template #toolbar> |
|||
<a-button type="primary" @click="showModal(1)">新增</a-button> |
|||
</template> |
|||
</BasicTable> |
|||
<addModal ref="addModalRef" /> |
|||
</PageWrapper> |
|||
</template> |
|||
|
|||
<script setup lang="ts"> |
|||
import { PageWrapper } from '@/components/Page'; |
|||
import { BasicTable, useTable } from '@/components/Table'; |
|||
import { list, removeByIds } from './api'; |
|||
import { formSchemas, columns } from './data'; |
|||
import addModal from './addModal.vue'; |
|||
import { ref } from 'vue'; |
|||
defineOptions({ name: 'arguments' }); |
|||
const [registerTable, { reload }] = useTable({ |
|||
title: '站点参数变更分析', |
|||
api: list, |
|||
showIndexColumn: true, |
|||
rowKey: 'id', |
|||
useSearchForm: true, |
|||
formConfig: { |
|||
schemas: formSchemas, |
|||
name: 'arguments', |
|||
baseColProps: { |
|||
xs: 24, |
|||
sm: 24, |
|||
md: 24, |
|||
lg: 6, |
|||
}, |
|||
}, |
|||
immediate: true, |
|||
columns: columns, |
|||
actionColumn: { |
|||
width: 300, |
|||
title: '操作', |
|||
key: 'action', |
|||
fixed: 'right', |
|||
}, |
|||
}); |
|||
//新增编辑弹窗 |
|||
//详情，跳转 |
|||
const addModalRef = ref(); |
|||
const showModal = (type: any) => { |
|||
addModalRef.value.showModal(type); |
|||
}; |
|||
</script> |
|||
|
|||
<style scoped></style> |
|||
@ -0,0 +1,218 @@ |
|||
<template> |
|||
<a-modal v-model:open="visible" :title="title" @ok="handleOk" width="50%"> |
|||
<a-form :model="form" layout="vertical" ref="formRef" :rules="rules"> |
|||
<a-row :gutter="[16, 16]"> |
|||
<a-col :span="24"> |
|||
<a-form-item label="站点名称" name="station"> |
|||
<a-select v-model:value="form.station" :options="stationOptions" placeholder="请选择" /> |
|||
</a-form-item> |
|||
</a-col> |
|||
</a-row> |
|||
<a-row :gutter="[16, 16]"> |
|||
<a-col :span="24"> |
|||
<a-form-item label="监测项目" name="monitorProject"> |
|||
<a-select |
|||
v-model:value="form.monitorProject" |
|||
:options="monitorProjectOptions" |
|||
placeholder="请选择" |
|||
/> |
|||
</a-form-item> |
|||
</a-col> |
|||
</a-row> |
|||
<a-row :gutter="[16, 16]"> |
|||
<a-col :span="24"> |
|||
<a-form-item label="故障开始时间" name="faultStartDate"> |
|||
<a-date-picker v-model:value="form.faultStartDate" /> |
|||
</a-form-item> |
|||
</a-col> |
|||
</a-row> |
|||
<a-row :gutter="[16, 16]"> |
|||
<a-col :span="24"> |
|||
<a-form-item label="运维响应时间" name="ioResponseDate"> |
|||
<a-date-picker v-model:value="form.ioResponseDate" /> |
|||
</a-form-item> |
|||
</a-col> |
|||
</a-row> |
|||
<a-row :gutter="[16, 16]"> |
|||
<a-col :span="24"> |
|||
<a-form-item label="故障结束时间" name="faultEndDate"> |
|||
<a-date-picker v-model:value="form.faultEndDate" /> |
|||
</a-form-item> |
|||
</a-col> |
|||
</a-row> |
|||
<a-row :gutter="[16, 16]"> |
|||
<a-col :span="24"> |
|||
<a-form-item label="监理人员" name="monitorPerson"> |
|||
<a-select |
|||
v-model:value="form.monitorPerson" |
|||
:options="monitorPersonOptions" |
|||
placeholder="请选择" |
|||
/> |
|||
</a-form-item> |
|||
</a-col> |
|||
</a-row> |
|||
<a-row :gutter="[16, 16]"> |
|||
<a-col :span="24"> |
|||
<a-form-item label="所属公司" name="ioCompany"> |
|||
<a-select |
|||
v-model:value="form.ioCompany" |
|||
:options="ioCompanyOptions" |
|||
placeholder="请选择" |
|||
/> |
|||
</a-form-item> |
|||
</a-col> |
|||
</a-row> |
|||
<a-row :gutter="[16, 16]"> |
|||
<a-col :span="24"> |
|||
<a-form-item label="监理公司" name="monitorCompany"> |
|||
<a-select |
|||
v-model:value="form.monitorCompany" |
|||
:options="monitorCompanyOptions" |
|||
placeholder="请选择" |
|||
/> |
|||
</a-form-item> |
|||
</a-col> |
|||
</a-row> |
|||
<a-row :gutter="[16, 16]"> |
|||
<a-col :span="24"> |
|||
<a-form-item label="备注" name="remark"> |
|||
<a-textarea v-model:value="form.remark" :rows="4" placeholder="请输入" /> |
|||
</a-form-item> |
|||
</a-col> |
|||
</a-row> |
|||
</a-form> |
|||
</a-modal> |
|||
</template> |
|||
|
|||
<script> |
|||
import { reactive, ref } from 'vue'; |
|||
import { message } from 'ant-design-vue'; |
|||
import { getInfo, add, update } from './api'; |
|||
import { getStationList } from '@/api/common/index'; |
|||
export default { |
|||
setup(props, { emit }) { |
|||
const title = ref('新增'); |
|||
const visible = ref(false); |
|||
const form = reactive({ |
|||
station: null, |
|||
monitorProject: null, |
|||
faultStartDate: '', |
|||
ioResponseDate: '', |
|||
faultEndDate: '', |
|||
monitorPerson:null, |
|||
ioCompany: null, |
|||
monitorCompany: null, |
|||
remark:'', |
|||
id: null, |
|||
}); |
|||
//下拉框 |
|||
const ioCompanyOptions = [ |
|||
{ |
|||
value: '杭州聚光', |
|||
}, |
|||
]; |
|||
const monitorProjectOptions = [ |
|||
{ |
|||
value: 'PM2.5', |
|||
}, |
|||
{ |
|||
value: 'O3', |
|||
}, |
|||
]; |
|||
const monitorCompanyOptions = [ |
|||
{ |
|||
value: '宁波国研信息科技有限公司', |
|||
}, |
|||
]; |
|||
const stationOptions = ref([]); |
|||
const monitorPersonOptions = ref([ |
|||
{ |
|||
value:'吴昊' |
|||
}, |
|||
{ |
|||
value:'梁涛' |
|||
} |
|||
]); |
|||
const showModal = async (type, id, projectId) => { |
|||
visible.value = true; |
|||
const res = await getStationList(); |
|||
stationOptions.value = res; |
|||
if (type == 1) { |
|||
title.value = '新增'; |
|||
} else if (type == 2) { |
|||
title.value = '编辑'; |
|||
const data = await getInfo(id); |
|||
for (let i in form) { |
|||
form[i] = data[i]; |
|||
} |
|||
} |
|||
}; |
|||
|
|||
const handleOk = () => { |
|||
formRef.value.validate().then((valid) => { |
|||
if (valid) { |
|||
if (title.value == '新增') { |
|||
let params = {}; |
|||
for (let i in form) { |
|||
params[i] = form[i]; |
|||
} |
|||
delete params.id; |
|||
add(params).then((_) => { |
|||
message.success('新增成功'); |
|||
emit('success'); |
|||
closeModal(); |
|||
}); |
|||
} else { |
|||
let params = {}; |
|||
for (let i in form) { |
|||
params[i] = form[i]; |
|||
} |
|||
update(params).then((_) => { |
|||
message.success('编辑成功'); |
|||
emit('success'); |
|||
closeModal(); |
|||
}); |
|||
} |
|||
} |
|||
}); |
|||
}; |
|||
const closeModal = () => { |
|||
formRef.value.resetFields(); |
|||
visible.value = false; |
|||
}; |
|||
const formRef = ref(); |
|||
const rules = { |
|||
station: [{ required: true, message: '请选择' }], |
|||
monitorProject: [{ required: true, message: '请选择' }], |
|||
faultStartDate: [{ required: true, message: '请选择' }], |
|||
ioResponseDate: [{ required: true, message: '请选择' }], |
|||
faultEndDate: [{ required: true, message: '请选择' }], |
|||
ioCompany: [{ required: true, message: '请选择' }], |
|||
monitorCompany: [{ required: true, message: '请选择' }], |
|||
}; |
|||
return { |
|||
visible, |
|||
title, |
|||
form, |
|||
showModal, |
|||
handleOk, |
|||
stationOptions, |
|||
monitorProjectOptions, |
|||
monitorCompanyOptions, |
|||
ioCompanyOptions, |
|||
monitorPersonOptions, |
|||
closeModal, |
|||
formRef, |
|||
rules, |
|||
}; |
|||
}, |
|||
}; |
|||
</script> |
|||
|
|||
<style scoped> |
|||
/* 可选样式调整 */ |
|||
.ant-modal-body { |
|||
max-width: 600px; |
|||
margin: 0 auto; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,28 @@ |
|||
import { ID, IDS } from '@/api/base'; |
|||
import { defHttp } from '@/utils/http/axios'; |
|||
|
|||
enum Api { |
|||
root = '/air/partsInfo', |
|||
list = '/air/partsInfo/list', |
|||
} |
|||
|
|||
export function list(params: any) { |
|||
return defHttp.get({ url: Api.list, params }); |
|||
} |
|||
|
|||
export function getInfo(id: ID) { |
|||
return defHttp.get({ url: `${Api.root}/${id}` }); |
|||
} |
|||
|
|||
export function add(data: any) { |
|||
return defHttp.post({ url: Api.root, data }); |
|||
} |
|||
|
|||
export function update(data: any) { |
|||
return defHttp.put({ url: Api.root, data }); |
|||
} |
|||
|
|||
export function removeByIds(ids: IDS) { |
|||
return defHttp.deleteWithMsg({ url: `${Api.root}/${ids.join(',')}` }); |
|||
} |
|||
|
|||
@ -0,0 +1,52 @@ |
|||
import { BasicColumn } from '@/components/Table'; |
|||
import { FormSchema } from '@/components/Form'; |
|||
|
|||
export const formSchemas: FormSchema[] = []; |
|||
|
|||
export const columns: BasicColumn[] = [ |
|||
{ |
|||
title: '站点', |
|||
dataIndex: 'station', |
|||
}, |
|||
{ |
|||
title: '监测项目', |
|||
dataIndex: 'monitorProject', |
|||
}, |
|||
{ |
|||
title: '故障开始时间', |
|||
dataIndex: 'faultStartDate', |
|||
}, |
|||
{ |
|||
title: '故障结束时间', |
|||
dataIndex: 'faulteEndDate', |
|||
}, |
|||
{ |
|||
title: '运维响应时间', |
|||
dataIndex: 'ioResponseDate', |
|||
}, |
|||
{ |
|||
title: '响应时间跨度', |
|||
dataIndex: 'responseDuration', |
|||
}, |
|||
|
|||
{ |
|||
title: '故障时间跨度', |
|||
dataIndex: 'faultDuration', |
|||
}, |
|||
{ |
|||
title: '监理人员', |
|||
dataIndex: 'monitorPerson', |
|||
}, |
|||
{ |
|||
title: '监理单位', |
|||
dataIndex: 'monitorCompany', |
|||
}, |
|||
{ |
|||
title: '运维单位', |
|||
dataIndex: 'ioCompany', |
|||
}, |
|||
{ |
|||
title: '备注', |
|||
dataIndex: 'remark', |
|||
}, |
|||
]; |
|||
@ -0,0 +1,53 @@ |
|||
<template> |
|||
<PageWrapper dense> |
|||
<BasicTable @register="registerTable"> |
|||
<template #toolbar> |
|||
<a-button type="primary" @click="showModal(1)">新增</a-button> |
|||
</template> |
|||
</BasicTable> |
|||
<addModal ref="addModalRef" /> |
|||
</PageWrapper> |
|||
</template> |
|||
|
|||
<script setup lang="ts"> |
|||
import { PageWrapper } from '@/components/Page'; |
|||
import { BasicTable, useTable } from '@/components/Table'; |
|||
import { list, removeByIds } from './api'; |
|||
import { formSchemas, columns } from './data'; |
|||
import addModal from './addModal.vue'; |
|||
import { ref } from 'vue'; |
|||
defineOptions({ name: 'io' }); |
|||
const [registerTable, { reload }] = useTable({ |
|||
title: '站点运维故障分析', |
|||
api: list, |
|||
showIndexColumn: true, |
|||
rowKey: 'id', |
|||
useSearchForm: true, |
|||
formConfig: { |
|||
schemas: formSchemas, |
|||
name: 'io', |
|||
baseColProps: { |
|||
xs: 24, |
|||
sm: 24, |
|||
md: 24, |
|||
lg: 6, |
|||
}, |
|||
}, |
|||
immediate: true, |
|||
columns: columns, |
|||
actionColumn: { |
|||
width: 300, |
|||
title: '操作', |
|||
key: 'action', |
|||
fixed: 'right', |
|||
}, |
|||
}); |
|||
//新增编辑弹窗 |
|||
//详情，跳转 |
|||
const addModalRef = ref(); |
|||
const showModal = (type: any) => { |
|||
addModalRef.value.showModal(type); |
|||
}; |
|||
</script> |
|||
|
|||
<style scoped></style> |
|||
@ -0,0 +1,32 @@ |
|||
import { ID, IDS } from '@/api/base'; |
|||
import { defHttp } from '@/utils/http/axios'; |
|||
|
|||
enum Api { |
|||
root = '/air/deviceInfo', |
|||
list = '/air/deviceInfo/list', |
|||
getStationList = '/air/deviceInfo/getStationList', |
|||
} |
|||
|
|||
export function list(params: any) { |
|||
return defHttp.get({ url: Api.list, params }); |
|||
} |
|||
|
|||
export function getInfo(id: ID) { |
|||
return defHttp.get({ url: `${Api.root}/${id}` }); |
|||
} |
|||
|
|||
export function add(data: any) { |
|||
return defHttp.post({ url: Api.root, data }); |
|||
} |
|||
|
|||
export function update(data: any) { |
|||
return defHttp.put({ url: Api.root, data }); |
|||
} |
|||
|
|||
export function removeByIds(ids: IDS) { |
|||
return defHttp.deleteWithMsg({ url: `${Api.root}/${ids.join(',')}` }); |
|||
} |
|||
|
|||
export function getStationList() { |
|||
return defHttp.get({ url: Api.getStationList }); |
|||
} |
|||
@ -0,0 +1,67 @@ |
|||
import { BasicColumn } from '@/components/Table'; |
|||
import { FormSchema } from '@/components/Form'; |
|||
|
|||
export const formSchemas: FormSchema[] = [ |
|||
{ |
|||
field: 'area', |
|||
label: '所在区域', |
|||
component: 'Select', |
|||
componentProps: { |
|||
options: [], |
|||
}, |
|||
}, |
|||
{ |
|||
field: 'monitorCompany', |
|||
label: '监理公司', |
|||
component: 'Select', |
|||
componentProps: { |
|||
options: [ |
|||
{ |
|||
value: '宁波国研信息科技有限公司', |
|||
}, |
|||
], |
|||
}, |
|||
}, |
|||
]; |
|||
|
|||
export const columns: BasicColumn[] = [ |
|||
{ |
|||
title: '站点', |
|||
dataIndex: 'station', |
|||
}, |
|||
{ |
|||
title: '所属区域', |
|||
dataIndex: 'area', |
|||
}, |
|||
{ |
|||
title: '状态', |
|||
dataIndex: 'status', |
|||
}, |
|||
{ |
|||
title: '运维单位', |
|||
dataIndex: 'ioCompany', |
|||
}, |
|||
{ |
|||
title: '本月应收数据', |
|||
dataIndex: 'planIncome', |
|||
}, |
|||
{ |
|||
title: '本月实收数据', |
|||
dataIndex: 'actualIncome', |
|||
}, |
|||
{ |
|||
title: '数据完整率', |
|||
dataIndex: 'completionRate', |
|||
customRender({ record }) { |
|||
if(record.actualIncome){ |
|||
return record.actualIncome/record.planIncome; |
|||
} |
|||
return null; |
|||
|
|||
}, |
|||
}, |
|||
{ |
|||
title: '监理单位', |
|||
dataIndex: 'monitorCompany', |
|||
}, |
|||
]; |
|||
@ -0,0 +1,69 @@ |
|||
<template> |
|||
<PageWrapper dense> |
|||
<BasicTable @register="registerTable"> |
|||
<template #bodyCell="{ column, record }"> |
|||
<template v-if="column && record && column.key === 'action'"> |
|||
<a-popconfirm |
|||
title="确定要删除吗?" |
|||
ok-text="是" |
|||
cancel-text="否" |
|||
@confirm="handleDelete(record.id)" |
|||
> |
|||
<a-button type="link">删除</a-button> |
|||
</a-popconfirm> |
|||
</template> |
|||
</template> |
|||
</BasicTable> |
|||
</PageWrapper> |
|||
</template> |
|||
|
|||
<script setup lang="ts"> |
|||
import { PageWrapper } from '@/components/Page'; |
|||
import { BasicTable, useTable } from '@/components/Table'; |
|||
import { list, removeByIds } from './api'; |
|||
import { formSchemas, columns } from './data'; |
|||
import {getHangzhouRegions} from '@/api/common/index' |
|||
defineOptions({ name: 'net' }); |
|||
|
|||
const [registerTable, { reload }] = useTable({ |
|||
title: '站点联网数据分析', |
|||
api: list, |
|||
showIndexColumn: true, |
|||
rowKey: 'id', |
|||
useSearchForm: true, |
|||
formConfig: { |
|||
schemas: formSchemas, |
|||
name: 'net', |
|||
baseColProps: { |
|||
xs: 24, |
|||
sm: 24, |
|||
md: 24, |
|||
lg: 6, |
|||
}, |
|||
}, |
|||
immediate: true, |
|||
columns: columns, |
|||
actionColumn: { |
|||
width: 300, |
|||
title: '操作', |
|||
key: 'action', |
|||
fixed: 'right', |
|||
}, |
|||
}); |
|||
//新增编辑删除 |
|||
const handleDelete = async (id: any) => { |
|||
await removeByIds([id]); |
|||
reload(); |
|||
}; |
|||
|
|||
//详情，跳转 |
|||
//下拉框 |
|||
const getHangzhouOptions =async()=>{ |
|||
const res = await getHangzhouRegions() |
|||
formSchemas[0].componentProps.options = res |
|||
} |
|||
getHangzhouOptions() |
|||
|
|||
</script> |
|||
|
|||
<style scoped></style> |
|||
@ -0,0 +1,234 @@ |
|||
<template> |
|||
<a-modal v-model:open="visible" :title="title" @ok="handleOk" width="50%"> |
|||
<a-form :model="form" layout="vertical" ref="formRef" :rules="rules"> |
|||
<a-row :gutter="[16, 16]"> |
|||
<a-col :span="24"> |
|||
<a-form-item label="站点名称" name="station"> |
|||
<a-select v-model:value="form.station" :options="stationOptions" placeholder="请选择" /> |
|||
</a-form-item> |
|||
</a-col> |
|||
</a-row> |
|||
<a-row :gutter="[16, 16]"> |
|||
<a-col :span="24"> |
|||
<a-form-item label="监测项目" name="monitorProject"> |
|||
<a-select |
|||
v-model:value="form.monitorProject" |
|||
:options="monitorProjectOptions" |
|||
placeholder="请选择" |
|||
/> |
|||
</a-form-item> |
|||
</a-col> |
|||
</a-row> |
|||
<a-row :gutter="[16, 16]"> |
|||
<a-col :span="24"> |
|||
<a-form-item label="上次校零校准时间" name="toZeroDate"> |
|||
<a-date-picker v-model:value="form.toZeroDate" /> |
|||
</a-form-item> |
|||
</a-col> |
|||
</a-row> |
|||
<a-row :gutter="[16, 16]"> |
|||
<a-col :span="24"> |
|||
<a-form-item label="核查开始时间" name="checkStartDate"> |
|||
<a-date-picker v-model:value="form.checkStartDate" /> |
|||
</a-form-item> |
|||
</a-col> |
|||
</a-row> |
|||
<a-row :gutter="[16, 16]"> |
|||
<a-col :span="24"> |
|||
<a-form-item label="核查结束时间" name="checkEndDate"> |
|||
<a-date-picker v-model:value="form.checkEndDate" /> |
|||
</a-form-item> |
|||
</a-col> |
|||
</a-row> |
|||
<a-row :gutter="[16, 16]"> |
|||
<a-col :span="24"> |
|||
<a-form-item label="实际校零校准次数" name="actualTimes"> |
|||
<a-input v-model:value="form.actualTimes" placeholder="请输入" /> |
|||
</a-form-item> |
|||
</a-col> |
|||
</a-row> |
|||
<a-row :gutter="[16, 16]"> |
|||
<a-col :span="24"> |
|||
<a-form-item label="应校零校准次数" name="planTimes"> |
|||
<a-input v-model:value="form.planTimes" placeholder="请输入" /> |
|||
</a-form-item> |
|||
</a-col> |
|||
</a-row> |
|||
<a-row :gutter="[16, 16]"> |
|||
<a-col :span="24"> |
|||
<a-form-item label="监理人员" name="monitorPerson"> |
|||
<a-select |
|||
v-model:value="form.monitorPerson" |
|||
:options="monitorPersonOptions" |
|||
placeholder="请选择" |
|||
/> |
|||
</a-form-item> |
|||
</a-col> |
|||
</a-row> |
|||
<a-row :gutter="[16, 16]"> |
|||
<a-col :span="24"> |
|||
<a-form-item label="所属公司" name="ioCompany"> |
|||
<a-select |
|||
v-model:value="form.ioCompany" |
|||
:options="ioCompanyOptions" |
|||
placeholder="请选择" |
|||
/> |
|||
</a-form-item> |
|||
</a-col> |
|||
</a-row> |
|||
<a-row :gutter="[16, 16]"> |
|||
<a-col :span="24"> |
|||
<a-form-item label="监理公司" name="monitorCompany"> |
|||
<a-select |
|||
v-model:value="form.monitorCompany" |
|||
:options="monitorCompanyOptions" |
|||
placeholder="请选择" |
|||
/> |
|||
</a-form-item> |
|||
</a-col> |
|||
</a-row> |
|||
<a-row :gutter="[16, 16]"> |
|||
<a-col :span="24"> |
|||
<a-form-item label="备注" name="remark"> |
|||
<a-textarea v-model:value="form.remark" :rows="4" placeholder="请输入" /> |
|||
</a-form-item> |
|||
</a-col> |
|||
</a-row> |
|||
</a-form> |
|||
</a-modal> |
|||
</template> |
|||
|
|||
<script> |
|||
import { reactive, ref } from 'vue'; |
|||
import { message } from 'ant-design-vue'; |
|||
import { getInfo, add, update } from './api'; |
|||
import { getStationList } from '@/api/common/index'; |
|||
export default { |
|||
setup(props, { emit }) { |
|||
const title = ref('新增'); |
|||
const visible = ref(false); |
|||
const form = reactive({ |
|||
station: null, |
|||
monitorProject: null, |
|||
toZeroDate: '', |
|||
checkStartDate: '', |
|||
checkEndDate: '', |
|||
actualTimes:null, |
|||
planTimes:null, |
|||
monitorPerson:null, |
|||
ioCompany: null, |
|||
monitorCompany: null, |
|||
remark:'', |
|||
id: null, |
|||
}); |
|||
//下拉框 |
|||
const ioCompanyOptions = [ |
|||
{ |
|||
value: '杭州聚光', |
|||
}, |
|||
]; |
|||
const monitorProjectOptions = [ |
|||
{ |
|||
value: 'PM2.5', |
|||
}, |
|||
{ |
|||
value: 'O3', |
|||
}, |
|||
]; |
|||
const monitorCompanyOptions = [ |
|||
{ |
|||
value: '宁波国研信息科技有限公司', |
|||
}, |
|||
]; |
|||
const stationOptions = ref([]); |
|||
const monitorPersonOptions = ref([ |
|||
{ |
|||
value:'吴昊' |
|||
}, |
|||
{ |
|||
value:'梁涛' |
|||
} |
|||
]); |
|||
const showModal = async (type, id, projectId) => { |
|||
visible.value = true; |
|||
const res = await getStationList(); |
|||
stationOptions.value = res; |
|||
if (type == 1) { |
|||
title.value = '新增'; |
|||
} else if (type == 2) { |
|||
title.value = '编辑'; |
|||
const data = await getInfo(id); |
|||
for (let i in form) { |
|||
form[i] = data[i]; |
|||
} |
|||
} |
|||
}; |
|||
|
|||
const handleOk = () => { |
|||
formRef.value.validate().then((valid) => { |
|||
if (valid) { |
|||
if (title.value == '新增') { |
|||
let params = {}; |
|||
for (let i in form) { |
|||
params[i] = form[i]; |
|||
} |
|||
delete params.id; |
|||
add(params).then((_) => { |
|||
message.success('新增成功'); |
|||
emit('success'); |
|||
closeModal(); |
|||
}); |
|||
} else { |
|||
let params = {}; |
|||
for (let i in form) { |
|||
params[i] = form[i]; |
|||
} |
|||
update(params).then((_) => { |
|||
message.success('编辑成功'); |
|||
emit('success'); |
|||
closeModal(); |
|||
}); |
|||
} |
|||
} |
|||
}); |
|||
}; |
|||
const closeModal = () => { |
|||
formRef.value.resetFields(); |
|||
visible.value = false; |
|||
}; |
|||
const formRef = ref(); |
|||
const rules = { |
|||
station: [{ required: true, message: '请选择' }], |
|||
monitorProject: [{ required: true, message: '请选择' }], |
|||
toZeroDate: [{ required: true, message: '请选择' }], |
|||
checkStartDate: [{ required: true, message: '请选择' }], |
|||
checkEndDate: [{ required: true, message: '请选择' }], |
|||
planTimes: [{ required: true, message: '请输入' }], |
|||
actualTimes: [{ required: true, message: '请输入' }], |
|||
}; |
|||
return { |
|||
visible, |
|||
title, |
|||
form, |
|||
showModal, |
|||
handleOk, |
|||
stationOptions, |
|||
monitorProjectOptions, |
|||
monitorCompanyOptions, |
|||
ioCompanyOptions, |
|||
monitorPersonOptions, |
|||
closeModal, |
|||
formRef, |
|||
rules, |
|||
}; |
|||
}, |
|||
}; |
|||
</script> |
|||
|
|||
<style scoped> |
|||
/* 可选样式调整 */ |
|||
.ant-modal-body { |
|||
max-width: 600px; |
|||
margin: 0 auto; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,28 @@ |
|||
import { ID, IDS } from '@/api/base'; |
|||
import { defHttp } from '@/utils/http/axios'; |
|||
|
|||
enum Api { |
|||
root = '/air/partsInfo', |
|||
list = '/air/partsInfo/list', |
|||
} |
|||
|
|||
export function list(params: any) { |
|||
return defHttp.get({ url: Api.list, params }); |
|||
} |
|||
|
|||
export function getInfo(id: ID) { |
|||
return defHttp.get({ url: `${Api.root}/${id}` }); |
|||
} |
|||
|
|||
export function add(data: any) { |
|||
return defHttp.post({ url: Api.root, data }); |
|||
} |
|||
|
|||
export function update(data: any) { |
|||
return defHttp.put({ url: Api.root, data }); |
|||
} |
|||
|
|||
export function removeByIds(ids: IDS) { |
|||
return defHttp.deleteWithMsg({ url: `${Api.root}/${ids.join(',')}` }); |
|||
} |
|||
|
|||
@ -0,0 +1,59 @@ |
|||
import { BasicColumn } from '@/components/Table'; |
|||
import { FormSchema } from '@/components/Form'; |
|||
|
|||
export const formSchemas: FormSchema[] = []; |
|||
|
|||
export const columns: BasicColumn[] = [ |
|||
{ |
|||
title: '站点', |
|||
dataIndex: 'station', |
|||
}, |
|||
{ |
|||
title: '所属区域', |
|||
dataIndex: 'area', |
|||
}, |
|||
{ |
|||
title: '监测项目', |
|||
dataIndex: 'monitorProject', |
|||
}, |
|||
{ |
|||
title: '上次校零校准时间', |
|||
dataIndex: 'toZeroDate', |
|||
}, |
|||
{ |
|||
title: '时间跨度', |
|||
dataIndex: 'duration', |
|||
}, |
|||
{ |
|||
title: '核查开始日期', |
|||
dataIndex: 'checkStartDate', |
|||
}, |
|||
{ |
|||
title: '核查结束日期', |
|||
dataIndex: 'checkEndDate', |
|||
}, |
|||
{ |
|||
title: '实际校零校准次数', |
|||
dataIndex: 'actualTimes', |
|||
}, |
|||
{ |
|||
title: '应校零校准次数', |
|||
dataIndex: 'planTimes', |
|||
}, |
|||
{ |
|||
title: '监理人员', |
|||
dataIndex: 'monitorPerson', |
|||
}, |
|||
{ |
|||
title: '监理单位', |
|||
dataIndex: 'monitorCompany', |
|||
}, |
|||
{ |
|||
title: '环保知情人', |
|||
dataIndex: 'insider', |
|||
}, |
|||
{ |
|||
title: '备注', |
|||
dataIndex: 'remark', |
|||
}, |
|||
]; |
|||
@ -0,0 +1,53 @@ |
|||
<template> |
|||
<PageWrapper dense> |
|||
<BasicTable @register="registerTable"> |
|||
<template #toolbar> |
|||
<a-button type="primary" @click="showModal(1)">新增</a-button> |
|||
</template> |
|||
</BasicTable> |
|||
<addModal ref="addModalRef" /> |
|||
</PageWrapper> |
|||
</template> |
|||
|
|||
<script setup lang="ts"> |
|||
import { PageWrapper } from '@/components/Page'; |
|||
import { BasicTable, useTable } from '@/components/Table'; |
|||
import { list, removeByIds } from './api'; |
|||
import { formSchemas, columns } from './data'; |
|||
import addModal from './addModal.vue'; |
|||
import { ref } from 'vue'; |
|||
defineOptions({ name: 'zero' }); |
|||
const [registerTable, { reload }] = useTable({ |
|||
title: '站点校零校准分析', |
|||
api: list, |
|||
showIndexColumn: true, |
|||
rowKey: 'id', |
|||
useSearchForm: true, |
|||
formConfig: { |
|||
schemas: formSchemas, |
|||
name: 'zero', |
|||
baseColProps: { |
|||
xs: 24, |
|||
sm: 24, |
|||
md: 24, |
|||
lg: 6, |
|||
}, |
|||
}, |
|||
immediate: true, |
|||
columns: columns, |
|||
actionColumn: { |
|||
width: 300, |
|||
title: '操作', |
|||
key: 'action', |
|||
fixed: 'right', |
|||
}, |
|||
}); |
|||
//新增编辑弹窗 |
|||
//详情，跳转 |
|||
const addModalRef = ref(); |
|||
const showModal = (type: any) => { |
|||
addModalRef.value.showModal(type); |
|||
}; |
|||
</script> |
|||
|
|||
<style scoped></style> |
|||
Loading…
Reference in new issue