<template> <!-- 管网管线管理 --> <div class="publicContainer"> <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch"> <el-form-item label="管道类别" prop="pipelineType"> <el-select clearable v-model="queryParams.pipelineType" placeholder="请选择管道类别"> <el-option v-for="dict in pipeline_type" :key="dict.value" :label="dict.label" :value="dict.value" /> </el-select> </el-form-item> <el-form-item label="所在道路名称" prop="roadName"> <el-input v-model="queryParams.roadName" placeholder="请输入所在道路名称" clearable @keyup.enter="handleQuery" /> </el-form-item> <el-form-item label="管道材质" prop="pipelineTexture"> <el-input v-model="queryParams.pipelineTexture" placeholder="请输入管道材质" clearable @keyup.enter="handleQuery" /> </el-form-item> <el-form-item label="设施状态" prop="stateFacilities"> <el-input v-model="queryParams.stateFacilities" placeholder="请输入设施状态" clearable @keyup.enter="handleQuery" /> </el-form-item> <el-form-item label="起点编号" prop="startPointNumber"> <el-input v-model="queryParams.startPointNumber" placeholder="请输入起点编号" clearable @keyup.enter="handleQuery" /> </el-form-item> <el-form-item label="终点编号" prop="endPointNumber"> <el-input v-model="queryParams.endPointNumber" placeholder="请输入终点编号" clearable @keyup.enter="handleQuery" /> </el-form-item> <el-form-item> <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button> <el-button icon="Refresh" @click="resetQuery">重置</el-button> </el-form-item> </el-form> <el-row :gutter="10" class="mb8"> <el-col :span="1.5"> <el-button type="primary" plain icon="Plus" @click="handleAdd" v-hasPermi="['floodMoney:pipelineInfo:add']">新增</el-button> </el-col> <el-col :span="1.5"> <el-button type="success" plain icon="Edit" :disabled="single" @click="handleUpdate" v-hasPermi="['floodMoney:pipelineInfo:edit']"> 修改 </el-button> </el-col> <el-col :span="1.5"> <el-button type="danger" plain icon="Delete" :disabled="multiple" @click="handleDelete" v-hasPermi="['floodMoney:pipelineInfo:remove']" > 删除 </el-button> </el-col> <el-col :span="1.5"> <el-button type="warning" plain icon="Download" @click="handleExport" v-hasPermi="['floodMoney:pipelineInfo:export']"> 导出 </el-button> </el-col> <el-col :span="1.5"> <el-button type="info" plain icon="Upload" @click="handleImport(1)" v-hasPermi="['floodMoney:pipelinePoint:import']"> 新增导入 </el-button> </el-col> <el-col :span="1.5"> <el-button type="info" plain icon="Upload" @click="handleImport(2)" v-hasPermi="['floodMoney:pipelinePoint:import']"> 更新导入 </el-button> </el-col> <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar> </el-row> <el-table v-loading="loading" :data="pipelineInfoList" max-height="550" @selection-change="handleSelectionChange"> <el-table-column type="selection" width="55" /> <el-table-column label="管道类别" prop="pipelineType"> <template #default="scope"> <dict-tag :options="pipeline_type" :value="scope.row.pipelineType" /> </template> </el-table-column> <el-table-column label="起点编号" prop="startPointNumber" /> <el-table-column label="终点编号" prop="endPointNumber" /> <el-table-column label="所在道路名称" prop="roadName" /> <el-table-column label="管道材质" prop="pipelineTexture" /> <el-table-column label="水流方向" prop="flowDirection"> <template #default="scope"> <dict-tag :options="flow_direction" :value="scope.row.flowDirection" /> </template> </el-table-column> <el-table-column label="管道长度(m)" prop="pipelineLength" /> <el-table-column label="起点地面埋深" prop="startGroundDepth" /> <el-table-column label="终点地面埋深" prop="endGroundDepth" /> <el-table-column label="起点管内底高程(m)" prop="startCopNoseElevation" /> <el-table-column label="终点管内底高程(m)" prop="endCopNoseElevation" /> <el-table-column label="操作" width="230" class-name="small-padding fixed-width"> <template #default="scope"> <el-button link type="warning" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['floodMoney:pipelineInfo:edit']"> 修改 </el-button> <el-button link type="danger" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['floodMoney:pipelineInfo:remove']"> 删除 </el-button> <el-button link type="primary" icon="View" @click="handleDetail(scope.row)" v-hasPermi="['floodMoney:pipelineInfo:view']"> 详情 </el-button> </template> </el-table-column> </el-table> <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" @pagination="getList" /> <!-- 添加或修改管线信息对话框 --> <el-dialog :title="title" v-model="open" width="800px" append-to-body> <el-form ref="pipelineInfoRef" :model="form" :rules="rules" label-width="150px"> <el-row> <el-col :span="12"> <el-form-item label="起点编号" prop="startPointNumber"> <el-input v-model="form.startPointNumber" placeholder="请输入起点编号" /> </el-form-item> </el-col> <el-col :span="12"> <el-form-item label="终点编号" prop="endPointNumber"> <el-input v-model="form.endPointNumber" placeholder="请输入终点编号" /> </el-form-item> </el-col> </el-row> <el-row> <el-col :span="12"> <el-form-item label="管道材质" prop="pipelineTexture"> <el-input v-model="form.pipelineTexture" placeholder="请输入管道材质" /> </el-form-item> </el-col> <el-col :span="12"> <el-form-item label="管道类别" prop="pipelineType"> <el-select filterable v-model="form.pipelineType" placeholder="请选择管道类别"> <el-option v-for="dict in pipeline_type" :key="dict.value" :label="dict.label" :value="dict.value" /> </el-select> </el-form-item> </el-col> </el-row> <el-row> <el-col :span="12"> <el-form-item label="权属单位" prop="ownershipUnits"> <el-input v-model="form.ownershipUnits" placeholder="请输入权属单位" /> </el-form-item> </el-col> <el-col :span="12"> <el-form-item label="运维单位" prop="operationalUnits"> <el-input v-model="form.operationalUnits" placeholder="请输入运维单位" /> </el-form-item> </el-col> </el-row> <el-row> <el-col :span="12"> <el-form-item label="起点X坐标" prop="startOriginalX"> <el-input type="number" v-model="form.startOriginalX" placeholder="请输入起点X坐标" /> </el-form-item> </el-col> <el-col :span="12"> <el-form-item label="起点Y坐标" prop="startOriginalY"> <el-input type="number" v-model="form.startOriginalY" placeholder="请输入起点Y坐标" /> </el-form-item> </el-col> </el-row> <el-row> <el-col :span="12"> <el-form-item label="终点X坐标" prop="endOriginalX"> <el-input type="number" v-model="form.endOriginalX" placeholder="请输入终点X坐标" /> </el-form-item> </el-col> <el-col :span="12"> <el-form-item label="终点Y坐标" prop="endOriginalY"> <el-input type="number" v-model="form.endOriginalY" placeholder="请输入终点Y坐标" /> </el-form-item> </el-col> </el-row> <el-row> <el-col :span="12"> <el-form-item label="水流方向" prop="flowDirection"> <el-select filterable v-model="form.flowDirection" placeholder="请选择水流方向"> <el-option v-for="dict in flow_direction" :key="dict.value" :label="dict.label" :value="dict.value" /> </el-select> </el-form-item> </el-col> <el-col :span="12"> <el-form-item label="管道长度(m)" prop="pipelineLength"> <el-input type="number" v-model="form.pipelineLength" placeholder="请输入管道长度(m)" /> </el-form-item> </el-col> </el-row> <el-row> <el-col :span="12"> <el-form-item label="起点地面埋深" prop="startGroundDepth"> <el-input type="number" v-model="form.startGroundDepth" placeholder="请输入起点地面埋深" /> </el-form-item> </el-col> <el-col :span="12"> <el-form-item label="终点地面埋深" prop="endGroundDepth"> <el-input type="number" v-model="form.endGroundDepth" placeholder="请输入终点地面埋深" /> </el-form-item> </el-col> </el-row> <el-row> <el-col :span="12"> <el-form-item label="起点管内底高程(m)" prop="startCopNoseElevation"> <el-input type="number" v-model="form.startCopNoseElevation" placeholder="请输入起点管内底高程(m)" /> </el-form-item> </el-col> <el-col :span="12"> <el-form-item label="终点管内底高程(m)" prop="endCopNoseElevation"> <el-input type="number" v-model="form.endCopNoseElevation" placeholder="请输入终点管内底高程(m)" /> </el-form-item> </el-col> </el-row> <el-row> <el-col :span="12"> <el-form-item label="断面数据1(m)" prop="sectionDataOne"> <el-input type="number" v-model="form.sectionDataOne" placeholder="请输入断面数据1(m)" /> </el-form-item> </el-col> <el-col :span="12"> <el-form-item label="断面数据2(m)" prop="sectionDataTwo"> <el-input type="number" v-model="form.sectionDataTwo" placeholder="请输入断面数据2(m)" /> </el-form-item> </el-col> </el-row> <el-row> <el-col :span="12"> <el-form-item label="建设年代" prop="constructionDate"> <el-date-picker clearable v-model="form.constructionDate" type="datetime" value-format="YYYY-MM-DD HH:mm:ss" placeholder="请选择建设年代" > </el-date-picker> </el-form-item> </el-col> <el-col :span="12"> <el-form-item label="设施状态" prop="stateFacilities"> <el-input v-model="form.stateFacilities" placeholder="请输入设施状态" /> </el-form-item> </el-col> </el-row> </el-form> <template #footer> <div class="dialog-footer"> <el-button type="primary" @click="submitForm">确 定</el-button> <el-button @click="cancel">取 消</el-button> </div> </template> </el-dialog> <!-- 管线信息详情 --> <el-dialog title="管线信息详情" v-model="detailOpen" width="800px" append-to-body class="dialog-detail-box"> <div class="dialog-form-detail flex flex-r flex-wrap"> <div class="flex flex-r"> <div class="detail-label flex flex-align-center">管道类别</div> <div class="detail-value flex flex-align-center"> <dict-tag :options="pipeline_type" :value="dialogFormDetail.pipelineType" /> </div> </div> <div class="flex flex-r"> <div class="detail-label flex flex-align-center">起点编号</div> <div class="detail-value flex flex-align-center"> {{ dialogFormDetail.startPointNumber }} </div> </div> <div class="flex flex-r"> <div class="detail-label flex flex-align-center">终点编号</div> <div class="detail-value flex flex-align-center"> {{ dialogFormDetail.endPointNumber }} </div> </div> <div class="flex flex-r"> <div class="detail-label flex flex-align-center">所在道路名称</div> <div class="detail-value flex flex-align-center"> {{ dialogFormDetail.roadName }} </div> </div> <div class="flex flex-r"> <div class="detail-label flex flex-align-center">敷设方式</div> <div class="detail-value flex flex-align-center"> {{ dialogFormDetail.layingType }} </div> </div> <div class="flex flex-r"> <div class="detail-label flex flex-align-center">断面类型</div> <div class="detail-value flex flex-align-center"> {{ dialogFormDetail.sectionType }} </div> </div> <div class="flex flex-r"> <div class="detail-label flex flex-align-center">管道材质</div> <div class="detail-value flex flex-align-center"> {{ dialogFormDetail.pipelineTexture }} </div> </div> <div class="flex flex-r"> <div class="detail-label flex flex-align-center">权属单位</div> <div class="detail-value flex flex-align-center"> {{ dialogFormDetail.ownershipUnits }} </div> </div> <div class="flex flex-r"> <div class="detail-label flex flex-align-center">运维单位</div> <div class="detail-value flex flex-align-center"> {{ dialogFormDetail.operationalUnits }} </div> </div> <div class="flex flex-r"> <div class="detail-label flex flex-align-center">起点X坐标</div> <div class="detail-value flex flex-align-center"> {{ dialogFormDetail.startOriginalX }} </div> </div> <div class="flex flex-r"> <div class="detail-label flex flex-align-center">起点Y坐标</div> <div class="detail-value flex flex-align-center"> {{ dialogFormDetail.startOriginalY }} </div> </div> <div class="flex flex-r"> <div class="detail-label flex flex-align-center">终点X坐标</div> <div class="detail-value flex flex-align-center"> {{ dialogFormDetail.endOriginalX }} </div> </div> <div class="flex flex-r"> <div class="detail-label flex flex-align-center">终点Y坐标</div> <div class="detail-value flex flex-align-center"> {{ dialogFormDetail.endOriginalY }} </div> </div> <div class="flex flex-r"> <div class="detail-label flex flex-align-center">水流方向</div> <div class="detail-value flex flex-align-center"> <dict-tag :options="flow_direction" :value="dialogFormDetail.flowDirection" /> </div> </div> <div class="flex flex-r"> <div class="detail-label flex flex-align-center">管道长度(m)</div> <div class="detail-value flex flex-align-center"> {{ dialogFormDetail.pipelineLength }} </div> </div> <div class="flex flex-r"> <div class="detail-label flex flex-align-center">起点地面埋深</div> <div class="detail-value flex flex-align-center"> {{ dialogFormDetail.startGroundDepth }} </div> </div> <div class="flex flex-r"> <div class="detail-label flex flex-align-center">终点地面埋深</div> <div class="detail-value flex flex-align-center"> {{ dialogFormDetail.endGroundDepth }} </div> </div> <div class="flex flex-r"> <div class="detail-label flex flex-align-center">起点管内底高程(m)</div> <div class="detail-value flex flex-align-center"> {{ dialogFormDetail.startCopNoseElevation }} </div> </div> <div class="flex flex-r"> <div class="detail-label flex flex-align-center">终点管内底高程(m)</div> <div class="detail-value flex flex-align-center"> {{ dialogFormDetail.endCopNoseElevation }} </div> </div> <div class="flex flex-r"> <div class="detail-label flex flex-align-center">断面数据1(m)</div> <div class="detail-value flex flex-align-center"> {{ dialogFormDetail.sectionDataOne }} </div> </div> <div class="flex flex-r"> <div class="detail-label flex flex-align-center">断面数据2(m)</div> <div class="detail-value flex flex-align-center"> {{ dialogFormDetail.sectionDataTwo }} </div> </div> <div class="flex flex-r"> <div class="detail-label flex flex-align-center">建设年代</div> <div class="detail-value flex flex-align-center"> <span>{{ parseTime(dialogFormDetail.constructionDate, '{y}-{m}-{d}') }}</span> </div> </div> <div class="flex flex-r"> <div class="detail-label flex flex-align-center">设施状态</div> <div class="detail-value flex flex-align-center"> {{ dialogFormDetail.stateFacilities }} </div> </div> <div class="flex flex-r"> <div class="detail-label flex flex-align-center"></div> <div class="detail-value flex flex-align-center"> {{ dialogFormDetail.geometrys }} </div> </div> </div> <template #footer> <div class="dialog-footer"> <el-button @click="cancel">关 闭</el-button> </div> </template> </el-dialog> <!-- 导入对话框 --> <el-dialog :title="upload.title" v-model="upload.open" v-if="upload.open" width="400px" append-to-body> <el-upload ref="uploadRef" :limit="1" accept=".xlsx, .xls" :headers="upload.headers" action="/" :disabled="upload.isUploading" :on-change="uploadFile" :on-progress="handleFileUploadProgress" :on-success="handleFileSuccess" :auto-upload="false" drag > <el-icon class="el-icon--upload"><upload-filled /></el-icon> <div class="el-upload__text">将文件拖到此处,或<em>点击上传</em></div> <template #tip> <div class="el-upload__tip text-center"> <div class="el-upload__tip"></div> <el-link type="primary" :underline="false" style="font-size: 12px; vertical-align: baseline" @click="importTemplate"> 下载模板 </el-link> </div> </template> </el-upload> <template #footer> <div class="dialog-footer"> <el-button type="primary" @click="submitFileForm" :loading="btnloading">确 定</el-button> <el-button @click="upload.open = false">取 消</el-button> </div> </template> </el-dialog> </div> </template> <script setup name="PipelineInfo"> import { pagepipelineInfo, getpipelineInfo, delpipelineInfo, addpipelineInfo, updatepipelineInfo, } from '@/api/drainagePipeline/pipelineInfo'; import { getTypeimportline, getTypeimportlineupdate } from '@/api/drainagePipeline/pipelinePoint'; import { getConfigKey } from '@/api/system/config'; import { getToken } from '@/utils/auth'; import { ElMessage } from 'element-plus'; const { proxy } = getCurrentInstance(); const { flow_direction, pipeline_type } = proxy.useDict('flow_direction', 'pipeline_type'); const pipelineInfoList = ref([]); const open = ref(false); const loading = ref(true); const btnloading = ref(false); const showSearch = ref(true); const ids = ref([]); const single = ref(true); const multiple = ref(true); const total = ref(0); const title = ref(''); const detailOpen = ref(false); const Getfile = ref(''); const selecttype = ref(''); /*** 导入参数 */ const upload = reactive({ // 是否显示弹出层(用户导入) open: false, // 弹出层标题(用户导入) title: '', // 是否禁用上传 isUploading: false, // 是否更新已经存在的用户数据 updateSupport: 0, // 设置上传的请求头部 headers: { Authorization: 'Bearer ' + getToken() }, // 上传的地址 // url: import.meta.env.VITE_APP_BASE_API + "/drainage/pipelineInfo/import", }); const data = reactive({ form: {}, queryParams: { pageNum: 1, pageSize: 10, drainageSystem: null, pipelineType: null, startPointNumber: null, endPointNumber: null, roadName: null, layingType: null, sectionType: null, pipelineTexture: null, ownershipUnits: null, operationalUnits: null, startOriginalX: null, startOriginalY: null, endOriginalX: null, endOriginalY: null, flowDirection: null, pipelineLength: null, startGroundDepth: null, endGroundDepth: null, startCopNoseElevation: null, endCopNoseElevation: null, sectionDataOne: null, sectionDataTwo: null, constructionDate: null, stateFacilities: null, geometrys: null, }, rules: {}, dialogFormDetail: {}, //详情弹框数据 }); const { queryParams, form, rules, dialogFormDetail } = toRefs(data); /** 搜索管线信息列表 */ function getList() { loading.value = true; pagepipelineInfo(queryParams.value).then(response => { pipelineInfoList.value = response.data; total.value = response.total; }); loading.value = false; } // 取消按钮 function cancel() { open.value = false; detailOpen.value = false; reset(); } // 表单重置 function reset() { form.value = { id: null, drainageSystem: null, pipelineType: null, startPointNumber: null, endPointNumber: null, roadName: null, layingType: null, sectionType: null, pipelineTexture: null, ownershipUnits: null, operationalUnits: null, startOriginalX: null, startOriginalY: null, endOriginalX: null, endOriginalY: null, flowDirection: null, pipelineLength: null, startGroundDepth: null, endGroundDepth: null, startCopNoseElevation: null, endCopNoseElevation: null, sectionDataOne: null, sectionDataTwo: null, constructionDate: null, stateFacilities: null, geometrys: null, remark: null, status: null, delFlag: null, createBy: null, createTime: null, updateBy: null, updateTime: null, }; proxy.resetForm('pipelineInfoRef'); } /** 搜索按钮操作 */ function handleQuery() { queryParams.value.pageNum = 1; getList(); } /** 重置按钮操作 */ function resetQuery() { proxy.resetForm('queryRef'); handleQuery(); } // 多选框选中数据 function handleSelectionChange(selection) { ids.value = selection.map(item => item.id); single.value = selection.length != 1; multiple.value = !selection.length; } /** 新增按钮操作 */ function handleAdd() { reset(); open.value = true; title.value = '添加管线信息'; } /** 修改按钮操作 */ function handleUpdate(row) { reset(); const _id = row.id || ids.value; getpipelineInfo(_id).then(response => { form.value = response.data; open.value = true; title.value = '修改管线信息'; }); } /** 提交按钮 */ function submitForm() { proxy.$refs['pipelineInfoRef'].validate(valid => { if (valid) { if (form.value.id != null) { updatepipelineInfo(form.value).then(response => { proxy.$modal.msgSuccess('修改成功'); open.value = false; getList(); }); } else { addpipelineInfo(form.value).then(response => { proxy.$modal.msgSuccess('新增成功'); open.value = false; getList(); }); } } }); } /** 删除按钮操作 */ function handleDelete(row) { const _ids = row.id || ids.value; proxy.$modal .confirm('是否确认删除该数据项?') .then(function () { return delpipelineInfo(_ids); }) .then(() => { getList(); proxy.$modal.msgSuccess('删除成功'); }) .catch(() => {}); } /** 导出按钮操作 */ function handleExport() { proxy.download( '/business/pipelineInfo/export', { ...queryParams.value, }, `pipelineInfo_${new Date().getTime()}.xlsx`, { type: 'POST' } ); } //查看详情操作 function handleDetail(row) { detailOpen.value = true; dialogFormDetail.value = row; } /** 导入按钮操作 */ function handleImport(type) { selecttype.value = type; upload.title = '信息导入'; upload.open = true; } /** 下载模板操作 */ function importTemplate() { getConfigKeyM(); } /**文件上传中处理 */ const handleFileUploadProgress = (event, file, fileList) => { upload.isUploading = true; }; /** 文件上传成功处理 */ const handleFileSuccess = (response, file, fileList) => { upload.open = false; upload.isUploading = false; proxy.$refs['uploadRef'].handleRemove(file); proxy.$alert( "<div style='overflow: auto;overflow-x: hidden;max-height: 70vh;padding: 10px 20px 0;'>" + response.msg + '</div>', '导入结果', { dangerouslyUseHTMLString: true } ); getList(); }; /** 提交上传文件 */ function submitFileForm() { console.log(Getfile.value); ElMessage('正在导入数据请等待'); btnloading.value = true; const _file = Getfile.value.raw; var formData = new FormData(); formData.append('file', _file); let url = ''; if (selecttype.value == 1) { url = getTypeimportline; } else { url = getTypeimportlineupdate; } url(formData) .then(res => { upload.open = false; Getfile.value = ''; ElMessage('操作成功'); getList(); }) .catch(err => { // throw err ElMessage.error(err); }); // proxy.$refs["uploadRef"].submit(); } function uploadFile(file) { Getfile.value = ''; console.log(file); Getfile.value = file; } async function getConfigKeyM() { let { data } = await getConfigKey('pipeline.import.template.url'); const iframe = document.createElement('iframe'); // 创建一个HTML 元素 iframe.style.display = 'none'; // 隐藏iframe 防止影响页面 iframe.style.height = 0; // 高度设置0 防止影响页面 iframe.src = data; // 下载链接 document.body.appendChild(iframe); // 这一行必须,iframe挂在到dom树上才会发请求 // 5分钟之后删除 setTimeout(() => { iframe.remove(); }, 5 * 60 * 1000); } getList(); </script> <style lang="scss" scoped></style>