- <template>
- <!-- 管点管理 -->
- <div class="publicContainer">
- <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch">
- <el-form-item label="管点类型" prop="pointType">
- <el-select clearable v-model="queryParams.pointType" placeholder="请选择管点材质">
- <el-option v-for="dict in point_type" :key="dict.value" :label="dict.label" :value="dict.value" />
- </el-select>
- </el-form-item>
- <el-form-item label="管点编码" prop="pointNumber">
- <el-input v-model="queryParams.pointNumber" placeholder="请输入管点编码" clearable @keyup.enter="handleQuery" />
- </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="pointTexture">
- <el-input v-model="queryParams.pointTexture" 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:pipelinePoint:add']">新增</el-button>
- </el-col>
- <!-- <el-col :span="1.5">
- <el-button type="success" plain icon="Edit" :disabled="single" @click="handleUpdate" v-hasPermi="['floodMoney:pipelinePoint:edit']">
- 修改
- </el-button>
- </el-col> -->
- <el-col :span="1.5">
- <el-button
- type="danger"
- plain
- icon="Delete"
- :disabled="multiple"
- @click="handleDelete"
- v-hasPermi="['floodMoney:pipelinePoint:remove']"
- >
- 批量删除
- </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="pipelinePointList" max-height="650" @selection-change="handleSelectionChange">
- <el-table-column type="selection" width="55" />
- <el-table-column label="管点类型" prop="pointType">
- <template #default="scope">
- <dict-tag :options="point_type" :value="scope.row.pointType" />
- </template>
- </el-table-column>
- <el-table-column label="排水分区" prop="areaWater">
- <template #default="scope">
- <dict-tag :options="drainage_partition" :value="scope.row.areaWater" />
- </template>
- </el-table-column>
- <el-table-column label="管点编码" prop="pointNumber" />
- <el-table-column label="所在道路" prop="roadName" />
- <el-table-column label="权属单位" prop="ownershipUnits" />
- <el-table-column label="运维单位" prop="operationalUnits" />
- <el-table-column label="管点材质" prop="pointTexture" />
- <el-table-column label="地面高程(m)" prop="groundElevation" />
- <el-table-column label="备注" prop="remark" />
- <el-table-column label="操作" width="220" class-name="small-padding fixed-width">
- <template #default="scope">
- <el-button link type="primary" icon="View" @click="handleDetail(scope.row)" v-hasPermi="['floodMoney:pipelinePoint:view']">
- 详情
- </el-button>
- <el-button link type="warning" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['floodMoney:pipelinePoint:edit']">
- 修改
- </el-button>
- <el-button link type="danger" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['floodMoney:pipelinePoint:remove']">
- 删除
- </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="pipelinePointRef" :model="form" :rules="rules" label-width="120px" class="flex50">
- <el-form-item label="管点编码" prop="pointNumber">
- <el-input v-model="form.pointNumber" placeholder="请输入" />
- </el-form-item>
- <el-form-item label="坐标X" prop="originalX">
- <el-input v-model="form.originalX" placeholder="请输入" />
- </el-form-item>
- <el-form-item label="坐标Y" prop="originalY">
- <el-input v-model="form.originalY" placeholder="请输入" />
- </el-form-item>
- <el-form-item label="所在道路" prop="roadName">
- <el-input v-model="form.roadName" placeholder="请输入" />
- </el-form-item>
- <el-form-item label="权属单位" prop="ownershipUnits">
- <el-input v-model="form.ownershipUnits" placeholder="请输入" />
- </el-form-item>
- <el-form-item label="运维单位" prop="operationalUnits">
- <el-input v-model="form.operationalUnits" placeholder="请输入" />
- </el-form-item>
- <el-form-item label="管点材质" prop="pointTexture">
- <el-input v-model="form.pointTexture" placeholder="请输入" />
- </el-form-item>
- <el-form-item label="管点类型" prop="pointType">
- <el-select filterable v-model="form.pointType" placeholder="请选择" style="width: 100%">
- <el-option v-for="dict in point_type" :key="dict.value" :label="dict.label" :value="dict.value" />
- </el-select>
- </el-form-item>
- <el-form-item label="管径(m)" prop="pipelineDiameter">
- <el-input-number :min="0" v-model="form.pipelineDiameter" placeholder="请输入" style="width: 100%" />
- </el-form-item>
- <el-form-item label="井深(m)" prop="bottomBuriedDepth">
- <el-input type="number" v-model="form.bottomBuriedDepth" placeholder="请输入" />
- </el-form-item>
- <el-form-item label="排水分区" prop="areaWater">
- <el-select filterable clearable v-model="form.areaWater" placeholder="请选择" style="width: 100%">
- <el-option v-for="dict in drainage_partition" :key="dict.value" :label="dict.label" :value="dict.value" />
- </el-select>
- </el-form-item>
- <el-form-item label="地面高程(m)" prop="groundElevation">
- <el-input type="number" v-model="form.groundElevation" placeholder="请输入" />
- </el-form-item>
- <el-form-item label="监测站点" prop="stCode">
- <el-select filterable v-model="form.stCode" placeholder="请选择" style="width: 100%">
- <el-option v-for="item in jczdList" :key="item.stCode" :label="item.label" :value="item.stCode" />
- </el-select>
- </el-form-item>
-
- <el-col :span="24">
- <el-form-item label="备注" prop="remark" style="width: 98%">
- <el-input type="textarea" v-model="form.remark" placeholder="请输入" />
- </el-form-item>
- </el-col>
- </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="point_type" :value="dialogFormDetail.pointType" />
- </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="drainage_partition" :value="dialogFormDetail.areaWater" />
- </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.pointNumber }}
- </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.originalX }}
- </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.originalY }}
- </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.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">管点材质</div>
- <div class="detail-value flex flex-align-center">
- {{ dialogFormDetail.pointTexture }}
- </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.groundElevation }}
- </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.remark }}
- </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">
- <el-select filterable v-model="pointCategory" placeholder="请选择上传文件类型">
- <el-option v-for="dict in typeList" :key="dict.value" :label="dict.label" :value="dict.value"></el-option>
- </el-select>
- </div>
- <!-- <span>仅允许导入xls、xlsx格式文件。</span> -->
- <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="PipelinePoint">
- import {
- pagepipelinePoint,
- getpipelinePoint,
- delpipelinePoint,
- addpipelinePoint,
- updatepipelinePoint,
- getstatistic,
- getTypeimport,
- getTypeimportupdate,
- } from '@/api/drainagePipeline/pipelinePoint';
- import { getConfigKey } from '@/api/system/config';
- import { ElMessage } from 'element-plus';
- import { rtuSiteInfolist } from '@/api/cameraResource/siteCameraRelation';
- import { getToken } from '@/utils/auth';
-
- const { proxy } = getCurrentInstance();
-
- const { point_type, drainage_partition } = proxy.useDict('point_type', 'drainage_partition');
- const pipelinePointList = 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 statisticdic = ref([]);
- const pointCategory = ref('');
- const Getfile = ref('');
- const selecttype = ref('');
- const jczdList = ref([]);
- const typeList = ref([
- { label: '检查井', value: 'CheckWell' },
- { label: '雨水篦子', value: 'RainGrates' },
- ]);
-
- /*** 导入参数 */
- const upload = reactive({
- // 是否显示弹出层(用户导入)
- open: false,
- // 弹出层标题(用户导入)
- title: '',
- // 是否禁用上传
- isUploading: false,
- // 是否更新已经存在的用户数据
- updateSupport: 0,
- // 设置上传的请求头部
- headers: { Authorization: 'Bearer ' + getToken() },
- // 上传的地址
- // url: import.meta.env.VITE_APP_BASE_API + "/drainage/pipelinePoint/import",
- });
-
- const data = reactive({
- form: {},
- queryParams: {
- pageNum: 1,
- pageSize: 10,
- pointType: null,
- pointNumber: null,
- originalX: null,
- originalY: null,
- roadName: null,
- ownershipUnits: null,
- operationalUnits: null,
- pointTexture: null,
- groundElevation: null,
- // status: null,
- geometrys: null,
- },
- rules: {
- pointType: [{ required: true, message: '管点类型不能为空', trigger: 'blur' }],
- pointNumber: [{ required: true, message: '管点编码不能为空', trigger: 'blur' }],
- originalX: [{ required: true, message: '坐标X不能为空', trigger: 'blur' }],
- originalY: [{ required: true, message: '坐标Y不能为空', trigger: 'blur' }],
- // roadName: [{ required: true, message: '所在道路/河道不能为空', trigger: 'blur' }],
- // ownershipUnits: [{ required: true, message: '权属单位不能为空', trigger: 'blur' }],
- // operationalUnits: [{ required: true, message: '运维单位不能为空', trigger: 'blur' }],
- pointTexture: [{ required: true, message: '管点材质不能为空', trigger: 'blur' }],
- groundElevation: [{ required: true, message: '地面高程不能为空', trigger: 'blur' }],
- },
- dialogFormDetail: {}, //详情弹框数据
- });
-
- const { queryParams, form, rules, dialogFormDetail } = toRefs(data);
-
- /** 搜索管点信息列表 */
- function getList() {
- loading.value = true;
- pagepipelinePoint(queryParams.value).then(response => {
- pipelinePointList.value = response.data;
- total.value = response.total;
- loading.value = false;
- });
- }
-
- // 取消按钮
- function cancel() {
- detailOpen.value = false;
- open.value = false;
- reset();
- }
-
- // 表单重置
- function reset() {
- form.value = {
- id: null,
- pointType: null,
- areaWater: null,
- pointNumber: null,
- originalX: null,
- originalY: null,
- roadName: null,
- ownershipUnits: null,
- operationalUnits: null,
- pointTexture: null,
- groundElevation: null,
- remark: null,
- // status: null,
- delFlag: null,
- createBy: null,
- createTime: null,
- updateBy: null,
- updateTime: null,
- geometrys: null,
- };
- proxy.resetForm('pipelinePointRef');
- }
-
- /** 搜索按钮操作 */
- 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;
- getpipelinePoint(_id).then(response => {
- form.value = response.data;
- open.value = true;
- title.value = '修改管点信息';
- });
- }
-
- /** 提交按钮 */
- function submitForm() {
- proxy.$refs['pipelinePointRef'].validate(valid => {
- if (valid) {
- if (form.value.id != null) {
- updatepipelinePoint(form.value).then(response => {
- proxy.$modal.msgSuccess('修改成功');
- open.value = false;
- getList();
- });
- } else {
- addpipelinePoint(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 delpipelinePoint(_ids);
- })
- .then(() => {
- getList();
- proxy.$modal.msgSuccess('删除成功');
- })
- .catch(() => {});
- }
-
- /** 导出按钮操作 */
- function handleExport() {
- proxy.download(
- 'floodMoney/pipelinePoint/export',
- {
- ...queryParams.value,
- },
- `pipelinePoint_${new Date().getTime()}.xlsx`
- );
- }
-
- /** 导入按钮操作 */
- function handleImport(type) {
- selecttype.value = type;
- upload.title = '信息导入';
- upload.open = true;
- }
- /** 下载模板操作 */
- function importTemplate() {
- getConfigKeyM();
- // proxy.download(
- // "system/user/importTemplate",
- // {},
- // `user_template_${new Date().getTime()}.xlsx`
- // );
- }
- /**文件上传中处理 */
- 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() {
- if (pointCategory.value) {
- ElMessage('正在导入数据请等待');
- btnloading.value = true;
-
- const _file = Getfile.value.raw;
- var formData = new FormData();
- formData.append('file', _file);
- formData.append('pointCategory', pointCategory.value);
-
- let url = '';
- if (selecttype.value == 1) {
- url = getTypeimport;
- } else {
- url = getTypeimportupdate;
- }
-
- url(formData)
- .then(res => {
- upload.open = false;
- pointCategory.value = '';
- Getfile.value = '';
- ElMessage('操作成功');
- getList();
- })
- .catch(err => {
- // throw err
- ElMessage.error(err);
- });
- } else {
- ElMessage.error('请选择你上传文件对应的类型!');
- }
- // proxy.$refs["uploadRef"].submit();
- }
-
- function uploadFile(file) {
- pointCategory.value = '';
- Getfile.value = '';
- Getfile.value = file;
- }
-
- //查看详情操作
- function handleDetail(row) {
- detailOpen.value = true;
- dialogFormDetail.value = row;
- }
-
- // 获取管点材质
- function Getstatisticdic() {
- getstatistic().then(res => {
- statisticdic.value = res.data;
- });
- }
- async function getConfigKeyM() {
- let { data } = await getConfigKey('pipepoint.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);
- }
-
- function getList2() {
- jczdList.value = [];
- let params = {
- monitorTargetType: '',
- monitorTargetTypeList: 'pipeline,drain_outlet',
- };
- rtuSiteInfolist(params).then(response => {
- response.data.map(item => {
- jczdList.value.push({
- value: item.id,
- label: item.stName,
- stCode: item.stCode,
- });
- // console.log(jczdList.value, 'jczdList.value');
- });
- });
- }
-
- getList();
- Getstatisticdic();
- getList2();
- </script>
-
- <style lang="scss" scoped>
- .el-upload__tip {
- padding: 10px 0;
- }
- </style>