14 changed files with 1723 additions and 61 deletions
@ -0,0 +1,52 @@ |
|||||||
|
import request from '@/config/axios' |
||||||
|
|
||||||
|
// 空气质量采集 VO
|
||||||
|
export interface QualityCollectionVO { |
||||||
|
id: number // 主键
|
||||||
|
siteName: string // 站点名称
|
||||||
|
city: string // 城市
|
||||||
|
type: number // 数据类型
|
||||||
|
pm25: number // PM2.s(ugim3)
|
||||||
|
pm10: number // PMo(ug/m3
|
||||||
|
so2: number // sOz(ug/m3)
|
||||||
|
no2: number // NOz(ug/m3)
|
||||||
|
no: number // NO(Hg/m3)
|
||||||
|
nOx: number // NOx(Hg/m3)
|
||||||
|
co: number // CO(mg/m3)
|
||||||
|
o3: number // 0з(ug/m3)
|
||||||
|
remark: string // 备用1
|
||||||
|
remark2: string // 备用2
|
||||||
|
} |
||||||
|
|
||||||
|
// 空气质量采集 API
|
||||||
|
export const QualityCollectionApi = { |
||||||
|
// 查询空气质量采集分页
|
||||||
|
getQualityCollectionPage: async (params: any) => { |
||||||
|
return await request.get({ url: `/system/quality-collection/page`, params }) |
||||||
|
}, |
||||||
|
|
||||||
|
// 查询空气质量采集详情
|
||||||
|
getQualityCollection: async (id: number) => { |
||||||
|
return await request.get({ url: `/system/quality-collection/get?id=` + id }) |
||||||
|
}, |
||||||
|
|
||||||
|
// 新增空气质量采集
|
||||||
|
createQualityCollection: async (data: QualityCollectionVO) => { |
||||||
|
return await request.post({ url: `/system/quality-collection/create`, data }) |
||||||
|
}, |
||||||
|
|
||||||
|
// 修改空气质量采集
|
||||||
|
updateQualityCollection: async (data: QualityCollectionVO) => { |
||||||
|
return await request.put({ url: `/system/quality-collection/update`, data }) |
||||||
|
}, |
||||||
|
|
||||||
|
// 删除空气质量采集
|
||||||
|
deleteQualityCollection: async (id: number) => { |
||||||
|
return await request.delete({ url: `/system/quality-collection/delete?id=` + id }) |
||||||
|
}, |
||||||
|
|
||||||
|
// 导出空气质量采集 Excel
|
||||||
|
exportQualityCollection: async (params) => { |
||||||
|
return await request.download({ url: `/system/quality-collection/export-excel`, params }) |
||||||
|
}, |
||||||
|
} |
||||||
@ -0,0 +1,159 @@ |
|||||||
|
<template> |
||||||
|
<Dialog :title="dialogTitle" v-model="dialogVisible"> |
||||||
|
<el-form |
||||||
|
ref="formRef" |
||||||
|
:model="formData" |
||||||
|
:rules="formRules" |
||||||
|
label-width="100px" |
||||||
|
v-loading="formLoading" |
||||||
|
> |
||||||
|
<el-form-item label="站点名称" prop="siteName"> |
||||||
|
<el-input v-model="formData.siteName" placeholder="请输入站点名称" /> |
||||||
|
</el-form-item> |
||||||
|
<el-form-item label="城市" prop="city"> |
||||||
|
<el-input v-model="formData.city" placeholder="请输入城市" /> |
||||||
|
</el-form-item> |
||||||
|
<el-form-item label="数据类型" prop="type"> |
||||||
|
<el-select v-model="formData.type" placeholder="请选择数据类型"> |
||||||
|
<el-option |
||||||
|
v-for="dict in getIntDictOptions(DICT_TYPE.AIR_COLLECTION_TYPE)" |
||||||
|
:key="dict.value" |
||||||
|
:label="dict.label" |
||||||
|
:value="dict.value" |
||||||
|
/> |
||||||
|
</el-select> |
||||||
|
</el-form-item> |
||||||
|
<el-form-item label="PM2.s(ugim3)" prop="pm25"> |
||||||
|
<el-input v-model="formData.pm25" placeholder="请输入PM2.s(ugim3)" /> |
||||||
|
</el-form-item> |
||||||
|
<el-form-item label="PMo(ug/m3" prop="pm10"> |
||||||
|
<el-input v-model="formData.pm10" placeholder="请输入PMo(ug/m3" /> |
||||||
|
</el-form-item> |
||||||
|
<el-form-item label="sOz(ug/m3)" prop="so2"> |
||||||
|
<el-input v-model="formData.so2" placeholder="请输入sOz(ug/m3)" /> |
||||||
|
</el-form-item> |
||||||
|
<el-form-item label="NOz(ug/m3)" prop="no2"> |
||||||
|
<el-input v-model="formData.no2" placeholder="请输入NOz(ug/m3)" /> |
||||||
|
</el-form-item> |
||||||
|
<el-form-item label="NO(Hg/m3)" prop="no"> |
||||||
|
<el-input v-model="formData.no" placeholder="请输入NO(Hg/m3)" /> |
||||||
|
</el-form-item> |
||||||
|
<el-form-item label="NOx(Hg/m3)" prop="nOx"> |
||||||
|
<el-input v-model="formData.nOx" placeholder="请输入NOx(Hg/m3)" /> |
||||||
|
</el-form-item> |
||||||
|
<el-form-item label="CO(mg/m3)" prop="co"> |
||||||
|
<el-input v-model="formData.co" placeholder="请输入CO(mg/m3)" /> |
||||||
|
</el-form-item> |
||||||
|
<el-form-item label="0з(ug/m3)" prop="o3"> |
||||||
|
<el-input v-model="formData.o3" placeholder="请输入0з(ug/m3)" /> |
||||||
|
</el-form-item> |
||||||
|
<el-form-item label="备用1" prop="remark"> |
||||||
|
<el-input v-model="formData.remark" placeholder="请输入备用1" /> |
||||||
|
</el-form-item> |
||||||
|
<el-form-item label="备用2" prop="remark2"> |
||||||
|
<el-input v-model="formData.remark2" placeholder="请输入备用2" /> |
||||||
|
</el-form-item> |
||||||
|
</el-form> |
||||||
|
<template #footer> |
||||||
|
<el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button> |
||||||
|
<el-button @click="dialogVisible = false">取 消</el-button> |
||||||
|
</template> |
||||||
|
</Dialog> |
||||||
|
</template> |
||||||
|
<script setup lang="ts"> |
||||||
|
import { getIntDictOptions, DICT_TYPE } from '@/utils/dict' |
||||||
|
import { QualityCollectionApi, QualityCollectionVO } from '@/api/airqualitycollection' |
||||||
|
|
||||||
|
/** 空气质量采集 表单 */ |
||||||
|
defineOptions({ name: 'QualityCollectionForm' }) |
||||||
|
|
||||||
|
const { t } = useI18n() // 国际化 |
||||||
|
const message = useMessage() // 消息弹窗 |
||||||
|
|
||||||
|
const dialogVisible = ref(false) // 弹窗的是否展示 |
||||||
|
const dialogTitle = ref('') // 弹窗的标题 |
||||||
|
const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用 |
||||||
|
const formType = ref('') // 表单的类型：create - 新增；update - 修改 |
||||||
|
const formData = ref({ |
||||||
|
id: undefined, |
||||||
|
siteName: undefined, |
||||||
|
city: undefined, |
||||||
|
type: undefined, |
||||||
|
pm25: undefined, |
||||||
|
pm10: undefined, |
||||||
|
so2: undefined, |
||||||
|
no2: undefined, |
||||||
|
no: undefined, |
||||||
|
nOx: undefined, |
||||||
|
co: undefined, |
||||||
|
o3: undefined, |
||||||
|
remark: undefined, |
||||||
|
remark2: undefined, |
||||||
|
}) |
||||||
|
const formRules = reactive({ |
||||||
|
}) |
||||||
|
const formRef = ref() // 表单 Ref |
||||||
|
|
||||||
|
/** 打开弹窗 */ |
||||||
|
const open = async (type: string, id?: number) => { |
||||||
|
dialogVisible.value = true |
||||||
|
dialogTitle.value = t('action.' + type) |
||||||
|
formType.value = type |
||||||
|
resetForm() |
||||||
|
// 修改时，设置数据 |
||||||
|
if (id) { |
||||||
|
formLoading.value = true |
||||||
|
try { |
||||||
|
formData.value = await QualityCollectionApi.getQualityCollection(id) |
||||||
|
} finally { |
||||||
|
formLoading.value = false |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
defineExpose({ open }) // 提供 open 方法，用于打开弹窗 |
||||||
|
|
||||||
|
/** 提交表单 */ |
||||||
|
const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调 |
||||||
|
const submitForm = async () => { |
||||||
|
// 校验表单 |
||||||
|
await formRef.value.validate() |
||||||
|
// 提交请求 |
||||||
|
formLoading.value = true |
||||||
|
try { |
||||||
|
const data = formData.value as unknown as QualityCollectionVO |
||||||
|
if (formType.value === 'create') { |
||||||
|
await QualityCollectionApi.createQualityCollection(data) |
||||||
|
message.success(t('common.createSuccess')) |
||||||
|
} else { |
||||||
|
await QualityCollectionApi.updateQualityCollection(data) |
||||||
|
message.success(t('common.updateSuccess')) |
||||||
|
} |
||||||
|
dialogVisible.value = false |
||||||
|
// 发送操作成功的事件 |
||||||
|
emit('success') |
||||||
|
} finally { |
||||||
|
formLoading.value = false |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
/** 重置表单 */ |
||||||
|
const resetForm = () => { |
||||||
|
formData.value = { |
||||||
|
id: undefined, |
||||||
|
siteName: undefined, |
||||||
|
city: undefined, |
||||||
|
type: undefined, |
||||||
|
pm25: undefined, |
||||||
|
pm10: undefined, |
||||||
|
so2: undefined, |
||||||
|
no2: undefined, |
||||||
|
no: undefined, |
||||||
|
nOx: undefined, |
||||||
|
co: undefined, |
||||||
|
o3: undefined, |
||||||
|
remark: undefined, |
||||||
|
remark2: undefined, |
||||||
|
} |
||||||
|
formRef.value?.resetFields() |
||||||
|
} |
||||||
|
</script> |
||||||
@ -0,0 +1,259 @@ |
|||||||
|
<template> |
||||||
|
|
||||||
|
<!-- 列表 --> |
||||||
|
<ContentWrap> |
||||||
|
<div class="tabs"> |
||||||
|
<el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick"> |
||||||
|
<el-tab-pane |
||||||
|
v-for="dict in getIntDictOptions(DICT_TYPE.AIR_COLLECTION_TYPE)" |
||||||
|
:key="dict.value" |
||||||
|
:label="dict.label" |
||||||
|
:name="dict.value" |
||||||
|
> |
||||||
|
|
||||||
|
<el-form |
||||||
|
:model="queryParams" |
||||||
|
ref="queryFormRef" |
||||||
|
:inline="true" |
||||||
|
size="large" |
||||||
|
label-width="68px" |
||||||
|
label-position="right" |
||||||
|
> |
||||||
|
<el-form-item label="站点" prop="siteName"> |
||||||
|
<el-input |
||||||
|
v-model="queryParams.siteName" |
||||||
|
placeholder="请输入站点名称" |
||||||
|
clearable |
||||||
|
@keyup.enter="handleQuery" |
||||||
|
class="!w-240px" |
||||||
|
/> |
||||||
|
</el-form-item> |
||||||
|
|
||||||
|
<el-form-item label="时间" prop="createTime"> |
||||||
|
<el-date-picker |
||||||
|
v-model="queryParams.createTime" |
||||||
|
value-format="YYYY-MM-DD HH:mm:ss" |
||||||
|
type="daterange" |
||||||
|
start-placeholder="开始日期" |
||||||
|
end-placeholder="结束日期" |
||||||
|
:default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]" |
||||||
|
class="!w-220px" |
||||||
|
/> |
||||||
|
</el-form-item> |
||||||
|
<el-form-item> |
||||||
|
<el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button> |
||||||
|
<el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> 重置</el-button> |
||||||
|
<el-button |
||||||
|
type="primary" |
||||||
|
plain |
||||||
|
@click="openForm('create')" |
||||||
|
v-hasPermi="['system:quality-collection:create']" |
||||||
|
> |
||||||
|
<Icon icon="ep:plus" class="mr-5px" /> 新增 |
||||||
|
</el-button> |
||||||
|
<el-button |
||||||
|
type="success" |
||||||
|
plain |
||||||
|
@click="handleExport" |
||||||
|
:loading="exportLoading" |
||||||
|
v-hasPermi="['system:quality-collection:export']" |
||||||
|
> |
||||||
|
<Icon icon="ep:download" class="mr-5px" /> 导出 |
||||||
|
</el-button> |
||||||
|
</el-form-item> |
||||||
|
</el-form> |
||||||
|
|
||||||
|
<el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true"> |
||||||
|
<template #empty> |
||||||
|
<el-empty description="暂无数据" /> |
||||||
|
</template> |
||||||
|
<el-table-column label="站点名称" align="center" prop="siteName" /> |
||||||
|
<el-table-column |
||||||
|
label="时间" |
||||||
|
align="center" |
||||||
|
prop="createTime" |
||||||
|
:formatter="dateFormatter" |
||||||
|
width="180px" |
||||||
|
:cell-style="{ borderBottom: '1px solid #EBEEF5' }" |
||||||
|
:header-cell-style="{ |
||||||
|
borderBottom: '1px solid #EBEEF5', |
||||||
|
backgroundColor: '#F5F7FA' |
||||||
|
}" |
||||||
|
/> |
||||||
|
<el-table-column label="数据类型" align="center" prop="type"> |
||||||
|
<template #default="scope"> |
||||||
|
<dict-tag :type="DICT_TYPE.AIR_COLLECTION_TYPE" :value="scope.row.type" /> |
||||||
|
</template> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column label="PM2.s(ugim3)" align="center" prop="pm25" /> |
||||||
|
<el-table-column label="PMo(ug/m3)" align="center" prop="pm10" /> |
||||||
|
<el-table-column label="sOz(ug/m3)" align="center" prop="so2" /> |
||||||
|
<el-table-column label="NOz(ug/m3)" align="center" prop="no2" /> |
||||||
|
<el-table-column label="NO(Hg/m3)" align="center" prop="no" /> |
||||||
|
<el-table-column label="NOx(Hg/m3)" align="center" prop="nOx" /> |
||||||
|
<el-table-column label="CO(mg/m3)" align="center" prop="co" /> |
||||||
|
<el-table-column label="0з(ug/m3)" align="center" prop="o3" /> |
||||||
|
<!-- <el-table-column label="操作" align="center" min-width="120px"> |
||||||
|
<template #default="scope"> |
||||||
|
<el-button |
||||||
|
link |
||||||
|
type="primary" |
||||||
|
@click="openForm('update', scope.row.id)" |
||||||
|
v-hasPermi="['system:quality-collection:update']" |
||||||
|
> |
||||||
|
编辑 |
||||||
|
</el-button> |
||||||
|
<el-button |
||||||
|
link |
||||||
|
type="danger" |
||||||
|
@click="handleDelete(scope.row.id)" |
||||||
|
v-hasPermi="['system:quality-collection:delete']" |
||||||
|
> |
||||||
|
删除 |
||||||
|
</el-button> |
||||||
|
</template> |
||||||
|
</el-table-column> --> |
||||||
|
</el-table> |
||||||
|
<!-- 分页 --> |
||||||
|
<Pagination |
||||||
|
:total="total" |
||||||
|
v-model:page="queryParams.pageNo" |
||||||
|
v-model:limit="queryParams.pageSize" |
||||||
|
@pagination="getList" |
||||||
|
/> |
||||||
|
</el-tab-pane> |
||||||
|
</el-tabs> |
||||||
|
</div> |
||||||
|
</ContentWrap> |
||||||
|
|
||||||
|
<!-- 表单弹窗：添加/修改 --> |
||||||
|
<QualityCollectionForm ref="formRef" @success="getList" /> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script setup lang="ts"> |
||||||
|
import { getIntDictOptions, DICT_TYPE } from '@/utils/dict' |
||||||
|
import { dateFormatter } from '@/utils/formatTime' |
||||||
|
import download from '@/utils/download' |
||||||
|
import { QualityCollectionApi, QualityCollectionVO } from '@/api/airqualitycollection' |
||||||
|
import QualityCollectionForm from './QualityCollectionForm.vue' |
||||||
|
const activeName = ref(1) |
||||||
|
|
||||||
|
|
||||||
|
/** 空气质量采集 列表 */ |
||||||
|
defineOptions({ name: 'QualityCollection' }) |
||||||
|
|
||||||
|
const message = useMessage() // 消息弹窗 |
||||||
|
const { t } = useI18n() // 国际化 |
||||||
|
|
||||||
|
const loading = ref(true) // 列表的加载中 |
||||||
|
const list = ref<QualityCollectionVO[]>([]) // 列表的数据 |
||||||
|
const total = ref(0) // 列表的总页数 |
||||||
|
const queryParams = reactive({ |
||||||
|
pageNo: 1, |
||||||
|
pageSize: 10, |
||||||
|
siteName: undefined, |
||||||
|
city: undefined, |
||||||
|
type: undefined, |
||||||
|
pm25: undefined, |
||||||
|
pm10: undefined, |
||||||
|
so2: undefined, |
||||||
|
no2: undefined, |
||||||
|
no: undefined, |
||||||
|
nOx: undefined, |
||||||
|
co: undefined, |
||||||
|
o3: undefined, |
||||||
|
remark: undefined, |
||||||
|
remark2: undefined, |
||||||
|
createTime: [], |
||||||
|
}) |
||||||
|
const queryFormRef = ref() // 搜索的表单 |
||||||
|
const exportLoading = ref(false) // 导出的加载中 |
||||||
|
|
||||||
|
/** 查询列表 */ |
||||||
|
const getList = async () => { |
||||||
|
loading.value = true |
||||||
|
try { |
||||||
|
const data = await QualityCollectionApi.getQualityCollectionPage(queryParams) |
||||||
|
list.value = data.list |
||||||
|
total.value = data.total |
||||||
|
} finally { |
||||||
|
loading.value = false |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
const handleClick = (tab: TabsPaneContext, event: Event) => { |
||||||
|
console.log(tab, event) |
||||||
|
} |
||||||
|
|
||||||
|
/** 搜索按钮操作 */ |
||||||
|
const handleQuery = () => { |
||||||
|
queryParams.pageNo = 1 |
||||||
|
getList() |
||||||
|
} |
||||||
|
|
||||||
|
/** 重置按钮操作 */ |
||||||
|
const resetQuery = () => { |
||||||
|
queryFormRef.value.resetFields() |
||||||
|
handleQuery() |
||||||
|
} |
||||||
|
|
||||||
|
/** 添加/修改操作 */ |
||||||
|
const formRef = ref() |
||||||
|
const openForm = (type: string, id?: number) => { |
||||||
|
formRef.value.open(type, id) |
||||||
|
} |
||||||
|
|
||||||
|
/** 删除按钮操作 */ |
||||||
|
const handleDelete = async (id: number) => { |
||||||
|
try { |
||||||
|
// 删除的二次确认 |
||||||
|
await message.delConfirm() |
||||||
|
// 发起删除 |
||||||
|
await QualityCollectionApi.deleteQualityCollection(id) |
||||||
|
message.success(t('common.delSuccess')) |
||||||
|
// 刷新列表 |
||||||
|
await getList() |
||||||
|
} catch {} |
||||||
|
} |
||||||
|
|
||||||
|
/** 导出按钮操作 */ |
||||||
|
const handleExport = async () => { |
||||||
|
try { |
||||||
|
// 导出的二次确认 |
||||||
|
await message.exportConfirm() |
||||||
|
// 发起导出 |
||||||
|
exportLoading.value = true |
||||||
|
const data = await QualityCollectionApi.exportQualityCollection(queryParams) |
||||||
|
download.excel(data, '空气质量采集.xls') |
||||||
|
} catch { |
||||||
|
} finally { |
||||||
|
exportLoading.value = false |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
/** 初始化 **/ |
||||||
|
onMounted(() => { |
||||||
|
getList() |
||||||
|
}) |
||||||
|
</script> |
||||||
|
<style> |
||||||
|
.tabs { |
||||||
|
display: flex; |
||||||
|
flex-direction: column; |
||||||
|
|
||||||
|
::v-deep(.el-form-item__label) { |
||||||
|
display: inline-flex; |
||||||
|
|
||||||
|
} |
||||||
|
|
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
.demo-tabs > .el-tabs__content { |
||||||
|
color: #6b778c; |
||||||
|
font-size: 32px; |
||||||
|
font-weight: 600; |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
</style> |
||||||
@ -0,0 +1,397 @@ |
|||||||
|
<template> |
||||||
|
|
||||||
|
<el-dialog |
||||||
|
v-model="visible" |
||||||
|
title="筛选企业" |
||||||
|
width="1200px" |
||||||
|
style="padding: 40px; " |
||||||
|
:close-on-click-modal="false" |
||||||
|
append-to-body |
||||||
|
> |
||||||
|
<template #header > |
||||||
|
<span style="font-size: 20px; font-weight: bold;">筛选企业</span> |
||||||
|
</template> |
||||||
|
<div class="enterprise-container"> |
||||||
|
<!-- 搜索区域 --> |
||||||
|
<div class="search-area"> |
||||||
|
<el-form |
||||||
|
:model="enterprise.queryParams" |
||||||
|
ref="queryFormRef" |
||||||
|
:inline="true" |
||||||
|
label-width="0" |
||||||
|
size="large" |
||||||
|
class="search-form" |
||||||
|
> |
||||||
|
<div class="form-container"> |
||||||
|
<el-form-item label="" prop="region" class="form-item"> |
||||||
|
<el-select v-model="enterprise.queryParams.region" placeholder="请选择所属区域" clearable> |
||||||
|
<el-option |
||||||
|
v-for="dict in getStrDictOptions(DICT_TYPE.ENTERPRISES_AREA)" |
||||||
|
:key="dict.value" |
||||||
|
:label="dict.label" |
||||||
|
:value="dict.value" |
||||||
|
|
||||||
|
/> |
||||||
|
</el-select> |
||||||
|
</el-form-item> |
||||||
|
|
||||||
|
<el-form-item label="" prop="type" class="form-item"> |
||||||
|
<el-select v-model="enterprise.queryParams.hy" placeholder="请选择行业" clearable> |
||||||
|
<el-option |
||||||
|
v-for="dict in hyList" |
||||||
|
:key="dict.id" |
||||||
|
:label="dict.tagName" |
||||||
|
:value="dict.id" |
||||||
|
/> |
||||||
|
</el-select> |
||||||
|
</el-form-item> |
||||||
|
|
||||||
|
<el-form-item label="" prop="region" class="form-item"> |
||||||
|
<el-select v-model="enterprise.queryParams.st" placeholder="请选择生态" clearable> |
||||||
|
<el-option |
||||||
|
v-for="dict in stList" |
||||||
|
:key="dict.id" |
||||||
|
:label="dict.tagName" |
||||||
|
:value="dict.id" |
||||||
|
/> |
||||||
|
</el-select> |
||||||
|
</el-form-item> |
||||||
|
|
||||||
|
<el-form-item label="" prop="type" class="form-item"> |
||||||
|
<el-select v-model="enterprise.queryParams.wr" placeholder="请选择污染程度" clearable> |
||||||
|
<el-option |
||||||
|
v-for="dict in wrList" |
||||||
|
:key="dict.id" |
||||||
|
:label="dict.tagName" |
||||||
|
:value="dict.id" |
||||||
|
/> |
||||||
|
</el-select> |
||||||
|
</el-form-item> |
||||||
|
|
||||||
|
<el-form-item label="" prop="type" class="form-item"> |
||||||
|
<el-select v-model="enterprise.queryParams.userId" placeholder="请选择执法人员" filterable clearable> |
||||||
|
<el-option |
||||||
|
v-for="dict in userList" |
||||||
|
:key="dict.id" |
||||||
|
:label="dict.deptName +'_'+ dict.realName" |
||||||
|
:value="dict.id" |
||||||
|
/> |
||||||
|
</el-select> |
||||||
|
</el-form-item> |
||||||
|
|
||||||
|
<el-form-item label="" prop="enterprisesName" class="form-item"> |
||||||
|
<el-input v-model="enterprise.queryParams.enterprisesName" placeholder="请输入企业名称" /> |
||||||
|
</el-form-item> |
||||||
|
|
||||||
|
<el-form-item class="form-item"> |
||||||
|
<el-button @click="handleQuery" type="primary" plain> |
||||||
|
<Icon icon="ep:search" class="mr-5px" /> 搜索 |
||||||
|
</el-button> |
||||||
|
<el-button @click="resetQuery" class="mr-10px" type="primary" plain> |
||||||
|
<Icon icon="ep:refresh" class="mr-5px" /> 重置 |
||||||
|
</el-button> |
||||||
|
</el-form-item> |
||||||
|
</div> |
||||||
|
</el-form> |
||||||
|
</div> |
||||||
|
|
||||||
|
<!-- 表格区域 --> |
||||||
|
<el-table |
||||||
|
ref="multipleTableRef" |
||||||
|
:data="enterprise.list" |
||||||
|
@select="handleSelectionChange" |
||||||
|
@select-all="selectAll" |
||||||
|
style="width: 100%; border: 1px solid #ebeef5" |
||||||
|
:cell-style="{ borderBottom: '1px solid #EBEEF5', textAlign: 'left'}" |
||||||
|
height="400px" |
||||||
|
row-key="id" |
||||||
|
:header-cell-style="{ |
||||||
|
borderBottom: '1px solid #EBEEF5', |
||||||
|
backgroundColor: '#F5F7FA' |
||||||
|
}" |
||||||
|
> |
||||||
|
<el-table-column type="selection" :reserve-selection="true" /> |
||||||
|
|
||||||
|
<el-table-column property="enterprisesName" label="企业名称" /> |
||||||
|
<el-table-column property="region" label="区域"> |
||||||
|
<template #default="scope"> |
||||||
|
{{ |
||||||
|
getStrDictOptions(DICT_TYPE.ENTERPRISES_AREA).find( |
||||||
|
(dict) => dict.value == scope.row.region |
||||||
|
)?.label || '未知区域' |
||||||
|
}} |
||||||
|
</template> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column property="enterprisesName" label="行业"> |
||||||
|
<template #default="scope"> |
||||||
|
{{ |
||||||
|
scope.row.tagListName && |
||||||
|
scope.row.tagListName |
||||||
|
.filter((item) => item.value == 1) |
||||||
|
.map((item) => item.label) |
||||||
|
.join(', ') |
||||||
|
}} |
||||||
|
</template> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column property="enterprisesName" label="生态"> |
||||||
|
<template #default="scope"> |
||||||
|
{{ |
||||||
|
scope.row.tagListName && |
||||||
|
scope.row.tagListName |
||||||
|
.filter((item) => item.value == 2) |
||||||
|
.map((item) => item.label) |
||||||
|
.join(', ') |
||||||
|
}} |
||||||
|
</template> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column property="enterprisesName" label="类型"> |
||||||
|
<template #default="scope"> |
||||||
|
{{ |
||||||
|
scope.row.tagListName && |
||||||
|
scope.row.tagListName |
||||||
|
.filter((item) => item.value == 4) |
||||||
|
.map((item) => item.label) |
||||||
|
.join(', ') |
||||||
|
}} |
||||||
|
</template> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column property="inviterName" label="执法人员" /> |
||||||
|
</el-table> |
||||||
|
|
||||||
|
<!-- 分页 --> |
||||||
|
<div class="pagination-container"> |
||||||
|
<div class="selected">已选择 {{ selectedEnterprises.length }} / {{ enterprise.total }}</div> |
||||||
|
<el-pagination |
||||||
|
v-show="enterprise.total > 0" |
||||||
|
:total="enterprise.total" |
||||||
|
:show-page-size="false" |
||||||
|
layout="total, prev, pager, next" |
||||||
|
size="small" |
||||||
|
v-model:current-page="enterprise.queryParams.pageNo" |
||||||
|
@update:current-page="getEnterPriseList" |
||||||
|
v-model:page-size="enterprise.queryParams.pageSize" |
||||||
|
@pagination="getEnterPriseList" |
||||||
|
/> |
||||||
|
</div> |
||||||
|
|
||||||
|
<!-- 底部按钮 --> |
||||||
|
<div class="footer"> |
||||||
|
<el-button type="primary" @click="confirmSelect">确认选择</el-button> |
||||||
|
<el-button @click="handleClose">关闭窗口</el-button> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</el-dialog> |
||||||
|
</template> |
||||||
|
<script setup lang="ts"> |
||||||
|
import { DICT_TYPE, getStrDictOptions } from '@/utils/dict' |
||||||
|
import { EnterprisesApi, EnterprisesVO } from '@/api/enterprises' |
||||||
|
import { TagLibraryVO, TagLibraryApi } from '@/api/system/taglibrary' |
||||||
|
import { getSimpleUserZGList } from '@/api/system/user' |
||||||
|
const loading = ref(true) // 列表的加载中 |
||||||
|
const emit = defineEmits(['update:modelValue', 'success']) |
||||||
|
const props = defineProps({ |
||||||
|
modelValue: { |
||||||
|
type: Boolean, |
||||||
|
default: false |
||||||
|
} |
||||||
|
}) |
||||||
|
const enterprise = ref({ |
||||||
|
list: ref<EnterprisesVO[]>(), |
||||||
|
queryParams: reactive({ |
||||||
|
pageNo: 1, |
||||||
|
pageSize: 20, |
||||||
|
enterprisesName: undefined, |
||||||
|
region: undefined, |
||||||
|
hy: undefined, |
||||||
|
st: undefined, |
||||||
|
wr: undefined, |
||||||
|
inviterName: undefined, |
||||||
|
id: undefined, |
||||||
|
userId: undefined, |
||||||
|
tagList: [] |
||||||
|
}), |
||||||
|
total: ref(0) |
||||||
|
}) |
||||||
|
const queryParams = ref({ |
||||||
|
enterprisesName: undefined, |
||||||
|
hy: undefined, |
||||||
|
st: undefined, |
||||||
|
wr: undefined, |
||||||
|
region: undefined, |
||||||
|
userId: undefined, |
||||||
|
// registrationNumber: undefined, |
||||||
|
id: undefined |
||||||
|
}) |
||||||
|
|
||||||
|
// 控制弹窗显示 |
||||||
|
const visible = ref(false) // 弹窗的是否展示 |
||||||
|
// ... 其他变量保持不变 ... |
||||||
|
// 关闭弹窗 |
||||||
|
const handleClose = () => { |
||||||
|
visible.value = false |
||||||
|
} |
||||||
|
const selectedEnterprises = ref<EnterprisesVO[]>([]) |
||||||
|
const handleSelectionChange = (selectedItems: EnterprisesVO[]) => { |
||||||
|
selectedEnterprises.value = selectedItems |
||||||
|
} |
||||||
|
|
||||||
|
const selectAll = (selection) => { |
||||||
|
selectedEnterprises.value = selection |
||||||
|
} |
||||||
|
|
||||||
|
//确认选择 |
||||||
|
const confirmSelect = () => { |
||||||
|
emit('success', selectedEnterprises.value) |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
// 分页数据选中事件 |
||||||
|
// const handleSelectionChange = (selection) => { |
||||||
|
// const currentPageIds = selection.map(item => item.id); |
||||||
|
// currentPageIds.forEach(id => selectedIds.value.add(id)); |
||||||
|
// }; |
||||||
|
|
||||||
|
/** |
||||||
|
* 获取企业列表 |
||||||
|
*/ |
||||||
|
async function getEnterPriseList() { |
||||||
|
loading.value = true |
||||||
|
|
||||||
|
console.log('enterprise.value.queryParams', enterprise.value.queryParams) |
||||||
|
|
||||||
|
if (enterprise.value.queryParams.hy || |
||||||
|
enterprise.value.queryParams.st || |
||||||
|
enterprise.value.queryParams.wr |
||||||
|
) { |
||||||
|
enterprise.value.queryParams.tagList.push(enterprise.value.queryParams.hy) |
||||||
|
enterprise.value.queryParams.tagList.push(enterprise.value.queryParams.st) |
||||||
|
enterprise.value.queryParams.tagList.push(enterprise.value.queryParams.wr) |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
try { |
||||||
|
const data = await EnterprisesApi.getEnterpriseByUserId(enterprise.value.queryParams) |
||||||
|
enterprise.value.list = data.list |
||||||
|
enterprise.value.total = data.total |
||||||
|
} finally { |
||||||
|
loading.value = false |
||||||
|
enterprise.value.queryParams.tagList = [] |
||||||
|
} |
||||||
|
} |
||||||
|
// 打开弹窗时的初始化 |
||||||
|
const open = async () => { |
||||||
|
// TODO: 初始化数据，例如获取列表等 |
||||||
|
visible.value = true |
||||||
|
} |
||||||
|
|
||||||
|
/** 搜索按钮操作 */ |
||||||
|
const handleQuery = () => { |
||||||
|
enterprise.value.queryParams.pageNo = 1 |
||||||
|
getEnterPriseList() |
||||||
|
} |
||||||
|
/** 重置按钮操作 */ |
||||||
|
const resetQuery = () => { |
||||||
|
// queryFormRef.value.resetFields() |
||||||
|
// handleQuery() |
||||||
|
} |
||||||
|
|
||||||
|
//行业 |
||||||
|
const hyList: any = ref([]) |
||||||
|
//生态 |
||||||
|
const stList: any = ref([]) |
||||||
|
//污染程度 |
||||||
|
const wrList: any = ref([]) |
||||||
|
//执法人员列表 |
||||||
|
const userList:any = ref() |
||||||
|
|
||||||
|
async function init() { |
||||||
|
try { |
||||||
|
const codeList = 'codeList=hy&codeList=st&codeList=wr' |
||||||
|
const data = await TagLibraryApi.tagLibraryList(codeList) |
||||||
|
hyList.value = data[0].children |
||||||
|
stList.value = data[1].children |
||||||
|
wrList.value = data[2].children |
||||||
|
} finally { |
||||||
|
} |
||||||
|
|
||||||
|
const userData = await getSimpleUserZGList() |
||||||
|
|
||||||
|
userList.value = userData |
||||||
|
|
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
getEnterPriseList() |
||||||
|
onMounted(() => { |
||||||
|
init() |
||||||
|
}) |
||||||
|
defineExpose({ open }) |
||||||
|
</script> |
||||||
|
<style scoped lang="scss"> |
||||||
|
|
||||||
|
::v-deep(.el-dialog) { |
||||||
|
padding: 40px; |
||||||
|
} |
||||||
|
|
||||||
|
::v-deep(.el-dialog__title) { |
||||||
|
font-weight: bold !important; |
||||||
|
font-size: 20px; |
||||||
|
} |
||||||
|
|
||||||
|
.enterprise-container { |
||||||
|
// ... 样式保持不变 ... |
||||||
|
.search-form { |
||||||
|
background-color: #fff; |
||||||
|
padding: 20px 20px 0px 0; |
||||||
|
border-radius: 4px; |
||||||
|
position: relative; |
||||||
|
.form-container { |
||||||
|
display: grid; |
||||||
|
grid-template-columns: repeat(4, 1fr); |
||||||
|
gap: 24px; |
||||||
|
margin-bottom: 20px; |
||||||
|
} |
||||||
|
|
||||||
|
.form-item { |
||||||
|
margin: 0; |
||||||
|
width: 100%; |
||||||
|
|
||||||
|
:deep(.el-input), |
||||||
|
:deep(.el-select) { |
||||||
|
width: 100%; |
||||||
|
} |
||||||
|
} |
||||||
|
.action-buttons { |
||||||
|
position: absolute; |
||||||
|
right: 10px; |
||||||
|
bottom: 0px; |
||||||
|
} |
||||||
|
|
||||||
|
.button-container { |
||||||
|
display: flex; |
||||||
|
justify-content: center; |
||||||
|
gap: 8px; |
||||||
|
} |
||||||
|
} |
||||||
|
.pagination-container { |
||||||
|
display: flex; |
||||||
|
flex-direction: row; |
||||||
|
|
||||||
|
justify-content: space-between; |
||||||
|
margin-top: 20px; // 确保分页和按钮之间有间距 |
||||||
|
|
||||||
|
.selected { |
||||||
|
font-size: 12px; |
||||||
|
margin-left: 10px; |
||||||
|
font-weight: bold; |
||||||
|
} |
||||||
|
} |
||||||
|
.footer { |
||||||
|
display: flex; |
||||||
|
justify-content: center; // 将按钮居中 |
||||||
|
gap: 8px; // 按钮之间的间距 |
||||||
|
padding-top: 20px; |
||||||
|
margin-top: 20px; // 添 |
||||||
|
} |
||||||
|
} |
||||||
|
</style> |
||||||
Loading…
Reference in new issue