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