|
|
@@ -1,122 +1,131 @@
|
|
|
<template>
|
|
|
- <div class="app-container">
|
|
|
+ <div class="water-page facility-page">
|
|
|
<div v-if="errorMessage" class="facility-error">
|
|
|
<el-alert :title="errorMessage" type="error" show-icon :closable="false" />
|
|
|
<el-button type="primary" link size="small" @click="retryRequest">重试</el-button>
|
|
|
</div>
|
|
|
- <!-- 搜索区域 -->
|
|
|
- <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="78px">
|
|
|
- <el-form-item label="管网编号" prop="pipeCode">
|
|
|
- <el-input v-model="queryParams.pipeCode" placeholder="请输入管网编号" clearable size="small" @keyup.enter="handleQuery" />
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="管网名称" prop="pipeName">
|
|
|
- <el-input v-model="queryParams.pipeName" placeholder="请输入管网名称" clearable size="small" @keyup.enter="handleQuery" />
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="管道材质" prop="pipeMaterial">
|
|
|
- <el-select v-model="queryParams.pipeMaterial" placeholder="请选择材质" clearable size="small" style="width: 120px">
|
|
|
- <el-option label="铸铁" value="铸铁" />
|
|
|
- <el-option label="PE" value="PE" />
|
|
|
- <el-option label="钢管" value="钢管" />
|
|
|
- <el-option label="球墨铸铁" value="球墨铸铁" />
|
|
|
- <el-option label="PVC" value="PVC" />
|
|
|
- <el-option label="混凝土" value="混凝土" />
|
|
|
- </el-select>
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="管径(mm)" prop="pipeDiameter">
|
|
|
- <el-input-number v-model="queryParams.pipeDiameter" :min="0" :precision="0" controls-position="right" size="small" />
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="铺设年份" prop="layingYear">
|
|
|
- <el-date-picker v-model="queryParams.layingYear" type="year" value-format="YYYY" placeholder="选择年份" size="small" />
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="状态" prop="status">
|
|
|
- <el-select v-model="queryParams.status" placeholder="管网状态" clearable size="small" style="width: 120px">
|
|
|
- <el-option
|
|
|
- v-for="dict in sysNormalDisable"
|
|
|
- :key="dict.value"
|
|
|
- :label="dict.label"
|
|
|
- :value="dict.value"
|
|
|
+ <!-- 页头 -->
|
|
|
+ <div class="page-heading">
|
|
|
+ <div class="page-title">
|
|
|
+ <span class="page-title-icon"><el-icon><Share /></el-icon></span>
|
|
|
+ <div><h2>管网信息查询</h2><span class="muted">管线档案、属性与状态查询</span></div>
|
|
|
+ </div>
|
|
|
+ <el-button class="heading-refresh" :icon="Refresh" :loading="loading" @click="getList">刷新</el-button>
|
|
|
+ </div>
|
|
|
+ <!-- 筛选卡 -->
|
|
|
+ <el-card shadow="never" class="filter-card">
|
|
|
+ <template #header>
|
|
|
+ <div class="filter-card-header">
|
|
|
+ <div class="card-title"><el-icon><Search /></el-icon><span>筛选</span></div>
|
|
|
+ <div class="card-actions">
|
|
|
+ <el-button type="primary" plain icon="Plus" size="small" @click="handleAdd" v-hasPermi="['waterSupply:pipeInfo:add']">新增</el-button>
|
|
|
+ <el-button type="danger" plain icon="Delete" size="small" :disabled="multiple" @click="handleDelete" v-hasPermi="['waterSupply:pipeInfo:remove']">删除</el-button>
|
|
|
+ <el-button type="success" plain icon="Download" size="small" @click="handleExport" v-hasPermi="['waterSupply:waterPipe:export']">导出</el-button>
|
|
|
+ <el-button type="info" plain icon="Upload" size="small" @click="importVisible = true" v-hasPermi="['waterSupply:waterPipe:import']">导入</el-button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ <el-form :model="queryParams" ref="queryForm" :inline="true" label-width="78px">
|
|
|
+ <el-form-item label="管网编号" prop="pipeCode">
|
|
|
+ <el-input v-model="queryParams.pipeCode" placeholder="请输入管网编号" clearable size="small" @keyup.enter="handleQuery" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="管网名称" prop="pipeName">
|
|
|
+ <el-input v-model="queryParams.pipeName" placeholder="请输入管网名称" clearable size="small" @keyup.enter="handleQuery" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="管道材质" prop="pipeMaterial">
|
|
|
+ <el-select v-model="queryParams.pipeMaterial" placeholder="请选择材质" clearable size="small" style="width: 120px">
|
|
|
+ <el-option label="铸铁" value="铸铁" />
|
|
|
+ <el-option label="PE" value="PE" />
|
|
|
+ <el-option label="钢管" value="钢管" />
|
|
|
+ <el-option label="球墨铸铁" value="球墨铸铁" />
|
|
|
+ <el-option label="PVC" value="PVC" />
|
|
|
+ <el-option label="混凝土" value="混凝土" />
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="管径(mm)" prop="pipeDiameter">
|
|
|
+ <el-input-number v-model="queryParams.pipeDiameter" :min="0" :precision="0" controls-position="right" size="small" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="铺设年份" prop="layingYear">
|
|
|
+ <el-date-picker v-model="queryParams.layingYear" type="year" value-format="YYYY" placeholder="选择年份" size="small" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="状态" prop="status">
|
|
|
+ <el-select v-model="queryParams.status" placeholder="管网状态" clearable size="small" style="width: 120px">
|
|
|
+ <el-option
|
|
|
+ v-for="dict in sysNormalDisable"
|
|
|
+ :key="dict.value"
|
|
|
+ :label="dict.label"
|
|
|
+ :value="dict.value"
|
|
|
+ />
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="创建时间">
|
|
|
+ <el-date-picker
|
|
|
+ v-model="dateRange"
|
|
|
+ size="small"
|
|
|
+ style="width: 240px"
|
|
|
+ value-format="YYYY-MM-DD HH:mm:ss"
|
|
|
+ type="datetimerange"
|
|
|
+ range-separator="-"
|
|
|
+ start-placeholder="开始日期"
|
|
|
+ end-placeholder="结束日期"
|
|
|
/>
|
|
|
- </el-select>
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="创建时间">
|
|
|
- <el-date-picker
|
|
|
- v-model="dateRange"
|
|
|
- size="small"
|
|
|
- style="width: 240px"
|
|
|
- value-format="YYYY-MM-DD HH:mm:ss"
|
|
|
- type="datetimerange"
|
|
|
- range-separator="-"
|
|
|
- start-placeholder="开始日期"
|
|
|
- end-placeholder="结束日期"
|
|
|
- />
|
|
|
- </el-form-item>
|
|
|
- <el-form-item>
|
|
|
- <el-button type="primary" icon="Search" size="small" @click="handleQuery">搜索</el-button>
|
|
|
- <el-button icon="Refresh" size="small" @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" size="small" @click="handleAdd" v-hasPermi="['waterSupply:pipeInfo:add']">新增</el-button>
|
|
|
- </el-col>
|
|
|
- <el-col :span="1.5">
|
|
|
- <el-button type="danger" plain icon="Delete" size="small" :disabled="multiple" @click="handleDelete" v-hasPermi="['waterSupply:pipeInfo:remove']">删除</el-button>
|
|
|
- </el-col>
|
|
|
- <el-col :span="1.5">
|
|
|
- <el-button type="success" plain icon="Download" size="small" @click="handleExport" v-hasPermi="['waterSupply:waterPipe:export']">导出</el-button>
|
|
|
- </el-col>
|
|
|
- <el-col :span="1.5">
|
|
|
- <el-button type="info" plain icon="Upload" size="small" @click="importVisible = true" v-hasPermi="['waterSupply:waterPipe:import']">导入</el-button>
|
|
|
- </el-col>
|
|
|
- <right-toolbar v-model:showSearch="showSearch" @queryTable="getList" />
|
|
|
- </el-row>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item>
|
|
|
+ <el-button type="primary" icon="Search" size="small" @click="handleQuery">搜索</el-button>
|
|
|
+ <el-button icon="Refresh" size="small" @click="resetQuery">重置</el-button>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ </el-card>
|
|
|
|
|
|
- <!-- 数据表格 -->
|
|
|
- <el-table v-loading="loading" :data="tableData" @selection-change="handleSelectionChange">
|
|
|
- <el-table-column type="selection" width="55" align="center" />
|
|
|
- <el-table-column label="管网编号" align="center" prop="pipeCode" :show-overflow-tooltip="true" min-width="120" />
|
|
|
- <el-table-column label="管网名称" align="center" prop="pipeName" :show-overflow-tooltip="true" min-width="140" />
|
|
|
- <el-table-column label="管道材质" align="center" prop="pipeMaterial" width="100">
|
|
|
- <template #default="{ row }">
|
|
|
- <el-tag :type="materialTagType(row.pipeMaterial)" size="small">{{ row.pipeMaterial || '-' }}</el-tag>
|
|
|
- </template>
|
|
|
- </el-table-column>
|
|
|
- <el-table-column label="管径(mm)" align="center" prop="pipeDiameter" width="100" />
|
|
|
- <el-table-column label="长度(m)" align="center" prop="pipeLength" width="100" />
|
|
|
- <el-table-column label="起点位置" align="center" prop="startPoint" :show-overflow-tooltip="true" min-width="140" />
|
|
|
- <el-table-column label="终点位置" align="center" prop="endPoint" :show-overflow-tooltip="true" min-width="140" />
|
|
|
- <el-table-column label="起点经度" align="center" prop="startLongitude" width="120" />
|
|
|
- <el-table-column label="起点纬度" align="center" prop="startLatitude" width="120" />
|
|
|
- <el-table-column label="终点经度" align="center" prop="endLongitude" width="120" />
|
|
|
- <el-table-column label="终点纬度" align="center" prop="endLatitude" width="120" />
|
|
|
- <el-table-column label="铺设年份" align="center" prop="layingYear" width="100" />
|
|
|
- <el-table-column label="设计压力(MPa)" align="center" prop="pressureRating" width="130" />
|
|
|
- <el-table-column label="状态" align="center" width="80">
|
|
|
- <template #default="{ row }">
|
|
|
- <el-tag
|
|
|
- :type="String(row.status) === '0' ? 'success' : 'danger'"
|
|
|
- size="small"
|
|
|
- >
|
|
|
- {{ String(row.status) === '0' ? '正常' : '停用' }}
|
|
|
- </el-tag>
|
|
|
- </template>
|
|
|
- </el-table-column>
|
|
|
- <el-table-column label="创建时间" align="center" prop="createTime" width="160" />
|
|
|
- <el-table-column label="操作" align="center" width="168" fixed="right">
|
|
|
- <template #default="{ row }">
|
|
|
- <div class="facility-row-actions">
|
|
|
- <el-tooltip content="查看详情" placement="top"><el-button class="facility-row-action is-detail" aria-label="查看详情" size="small" type="primary" plain circle icon="View" @click="handleDetail(row)" /></el-tooltip>
|
|
|
- <el-tooltip content="修改信息" placement="top"><el-button class="facility-row-action is-edit" aria-label="修改信息" size="small" type="warning" plain circle icon="Edit" @click="handleUpdate(row)" v-hasPermi="['waterSupply:pipeInfo:edit']" /></el-tooltip>
|
|
|
- <el-tooltip content="删除记录" placement="top"><el-button class="facility-row-action is-delete" aria-label="删除记录" size="small" type="danger" plain circle icon="Delete" @click="handleDelete(row)" v-hasPermi="['waterSupply:pipeInfo:remove']" /></el-tooltip>
|
|
|
- </div>
|
|
|
- </template>
|
|
|
- </el-table-column>
|
|
|
- </el-table>
|
|
|
+ <!-- 表格卡 -->
|
|
|
+ <el-card shadow="never" class="table-card">
|
|
|
+ <template #header>
|
|
|
+ <div class="card-title"><el-icon><List /></el-icon><span>管网清单</span></div>
|
|
|
+ </template>
|
|
|
+ <el-table v-loading="loading" :data="tableData" @selection-change="handleSelectionChange">
|
|
|
+ <el-table-column type="selection" width="55" align="center" />
|
|
|
+ <el-table-column label="管网编号" align="center" prop="pipeCode" :show-overflow-tooltip="true" min-width="120" />
|
|
|
+ <el-table-column label="管网名称" align="center" prop="pipeName" :show-overflow-tooltip="true" min-width="140" />
|
|
|
+ <el-table-column label="管道材质" align="center" prop="pipeMaterial" width="100">
|
|
|
+ <template #default="{ row }">
|
|
|
+ <el-tag :type="materialTagType(row.pipeMaterial)" size="small">{{ row.pipeMaterial || '-' }}</el-tag>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="管径(mm)" align="center" prop="pipeDiameter" width="100" />
|
|
|
+ <el-table-column label="长度(m)" align="center" prop="pipeLength" width="100" />
|
|
|
+ <el-table-column label="起点位置" align="center" prop="startPoint" :show-overflow-tooltip="true" min-width="140" />
|
|
|
+ <el-table-column label="终点位置" align="center" prop="endPoint" :show-overflow-tooltip="true" min-width="140" />
|
|
|
+ <el-table-column label="起点经度" align="center" prop="startLongitude" width="120" />
|
|
|
+ <el-table-column label="起点纬度" align="center" prop="startLatitude" width="120" />
|
|
|
+ <el-table-column label="终点经度" align="center" prop="endLongitude" width="120" />
|
|
|
+ <el-table-column label="终点纬度" align="center" prop="endLatitude" width="120" />
|
|
|
+ <el-table-column label="铺设年份" align="center" prop="layingYear" width="100" />
|
|
|
+ <el-table-column label="设计压力(MPa)" align="center" prop="pressureRating" width="130" />
|
|
|
+ <el-table-column label="状态" align="center" width="80">
|
|
|
+ <template #default="{ row }">
|
|
|
+ <el-tag
|
|
|
+ :type="String(row.status) === '0' ? 'success' : 'danger'"
|
|
|
+ size="small"
|
|
|
+ >
|
|
|
+ {{ String(row.status) === '0' ? '正常' : '停用' }}
|
|
|
+ </el-tag>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="创建时间" align="center" prop="createTime" width="160" />
|
|
|
+ <el-table-column label="操作" align="center" width="168" fixed="right">
|
|
|
+ <template #default="{ row }">
|
|
|
+ <div class="facility-row-actions">
|
|
|
+ <el-tooltip content="查看详情" placement="top"><el-button class="facility-row-action is-detail" aria-label="查看详情" size="small" type="primary" plain circle icon="View" @click="handleDetail(row)" /></el-tooltip>
|
|
|
+ <el-tooltip content="修改信息" placement="top"><el-button class="facility-row-action is-edit" aria-label="修改信息" size="small" type="warning" plain circle icon="Edit" @click="handleUpdate(row)" v-hasPermi="['waterSupply:pipeInfo:edit']" /></el-tooltip>
|
|
|
+ <el-tooltip content="删除记录" placement="top"><el-button class="facility-row-action is-delete" aria-label="删除记录" size="small" type="danger" plain circle icon="Delete" @click="handleDelete(row)" v-hasPermi="['waterSupply:pipeInfo:remove']" /></el-tooltip>
|
|
|
+ </div>
|
|
|
+ </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" />
|
|
|
+ <!-- 分页 -->
|
|
|
+ <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" @pagination="getList" />
|
|
|
+ </el-card>
|
|
|
|
|
|
<!-- 新增/修改抽屉 -->
|
|
|
<el-drawer :title="dialogTitle" v-model="dialogVisible" class="facility-form-drawer" direction="rtl" size="720px" append-to-body>
|
|
|
@@ -531,3 +540,7 @@ export default {
|
|
|
}
|
|
|
}
|
|
|
</script>
|
|
|
+
|
|
|
+<style scoped lang="scss">
|
|
|
+@use '../../waterSupply/components/waterFacilityPageTheme.scss';
|
|
|
+</style>
|
