- <template>
- <!-- 排水防涝子系统 长效运维 易涝点治理-->
- <div class="publicContainer">
- <!-- 搜索区域 -->
- <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch">
- <el-form-item label="易涝点名称" prop="name">
- <el-input v-model="queryParams.name" placeholder="请输入" clearable @keyup.enter="handleQuery" />
- </el-form-item>
- <el-form-item label="易涝点类型" prop="waterlogging">
- <el-select v-model="queryParams.waterlogging" placeholder="请选择" clearable>
- <el-option v-for="item in waterlogging_type" :key="item.value" :label="item.label" :value="item.value" />
- </el-select>
- </el-form-item>
- <el-form-item label="风险级别" prop="riskLevel">
- <el-select v-model="queryParams.riskLevel" placeholder="请选择" clearable>
- <el-option v-for="item in levelType" :key="item.value" :label="item.label" :value="item.value" />
- </el-select>
- </el-form-item>
- <el-form-item label="是否安装视频监控" prop="isCameraInstall">
- <el-select v-model="queryParams.isCameraInstall" placeholder="请选择" clearable>
- <el-option v-for="item in flowType" :key="item.value" :label="item.label" :value="item.value" />
- </el-select>
- </el-form-item>
- <el-form-item label="积水原因选择" prop="originType">
- <el-select v-model="queryParams.originType" placeholder="请选择" clearable>
- <el-option v-for="item in waterlogging_origin" :key="item.value" :label="item.label" :value="item.value" />
- </el-select>
- </el-form-item>
- <el-form-item label="是否专人值守" prop="isPersonDuty">
- <el-select v-model="queryParams.isPersonDuty" placeholder="请选择" clearable>
- <el-option v-for="item in flowType" :key="item.value" :label="item.label" :value="item.value" />
- </el-select>
- </el-form-item>
- <el-form-item label="是否实施工程治理" prop="isProjectAdminister">
- <el-select v-model="queryParams.isProjectAdminister" placeholder="请选择" clearable>
- <el-option v-for="item in flowType" :key="item.value" :label="item.label" :value="item.value" />
- </el-select>
- </el-form-item>
- <el-form-item>
- <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
- <el-button type="success" 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">新增</el-button>
- </el-col>
- <right-toolbar v-model:showSearch="showSearch" @queryTable="getDataList"></right-toolbar>
- </el-row>
- <!-- 表格 -->
- <el-table v-loading="tableLoading" :data="tableData" max-height="650">
- <el-table-column label="易涝点名称" prop="name" width="200" />
- <el-table-column label="积水原因" prop="originType" width="200">
- <template #default="scope">
- <dict-tag :options="waterlogging_origin" :value="scope.row.originType" />
- </template>
- </el-table-column>
- <el-table-column label="风险级别" prop="riskLevel">
- <template #default="scope">
- <dict-tag :options="levelType" :value="scope.row.riskLevel" />
- </template>
- </el-table-column>
- <el-table-column label="易涝点位置" prop="address" width="300" />
- <el-table-column label="易涝点经度" prop="longitude" width="100" />
- <el-table-column label="易涝点纬度" prop="latitude" width="100" />
- <el-table-column label="行政辖区" prop="jurisdiction" width="200" />
- <el-table-column label="所属街道" prop="belongsStreet" width="200" />
- <el-table-column label="是否为易涝点专项行动方案工程整治点位" prop="isEngineeringRenovation" width="200">
- <template #default="scope">
- <dict-tag :options="flowType" :value="scope.row.isEngineeringRenovation" />
- </template>
- </el-table-column>
- <el-table-column label="是否为易涝点整治专项行动方案点位" prop="isPlanRectification" width="200">
- <template #default="scope">
- <dict-tag :options="flowType" :value="scope.row.isPlanRectification" />
- </template>
- </el-table-column>
- <el-table-column label="视频监控等设备安装情况" prop="isCameraInstall" width="150">
- <template #default="scope">
- <dict-tag :options="flowType" :value="scope.row.isCameraInstall" />
- </template>
- </el-table-column>
- <el-table-column label="本年度发生积水次数" prop="yearHappenCount" width="120" />
- <el-table-column label="联系人" prop="contactsPerson" width="100" />
- <el-table-column label="联系手机号" prop="telephone" width="100" />
- <el-table-column label="操作" width="220" fixed="right">
- <template #default="scope">
- <el-button type="warning" link icon="Edit" @click="handleEdit(scope.row)">修改</el-button>
- <el-button type="danger" link icon="Delete" @click="handleDelete(scope.row)">删除</el-button>
- <el-button link type="primary" icon="Edit" @click="handleDetail(scope.row)">详情</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="getDataList"
- />
- <!-- 内涝治理点详情 -->
- <el-dialog title="内涝治理点详情" v-model="dialogDetail" width="1000px" append-to-body>
- <WaterPointDetail v-if="dialogDetail" :detailObj="detailObj"></WaterPointDetail>
- </el-dialog>
- <!-- 易涝点新增修改弹窗 -->
- <el-dialog :title="dialogTitle" v-model="dialogAdd" width="1200px" append-to-body>
- <el-form ref="formRef" :model="formData" :rules="rulesForm" label-width="280px" class="publicForm flex50">
- <el-form-item label="易涝点名称" prop="name">
- <el-input v-model="formData.name" placeholder="请输入" />
- </el-form-item>
- <el-form-item label="易涝点类型" prop="waterlogging">
- <el-select v-model="formData.waterlogging" placeholder="请选择" clearable>
- <el-option v-for="item in waterlogging_type" :key="item.value" :label="item.label" :value="item.value" />
- </el-select>
- </el-form-item>
- <el-form-item label="行政辖区" prop="jurisdiction">
- <el-input v-model="formData.jurisdiction" placeholder="请输入" />
- </el-form-item>
- <el-form-item label="所属街道" prop="belongsStreet">
- <el-input v-model="formData.belongsStreet" placeholder="请输入" />
- </el-form-item>
- <el-form-item label="易涝点位置" prop="address">
- <el-input v-model="formData.address" controls-position="right" placeholder="请输入">
- <template #append>
- <el-button type="primary" @click="showMap = true">获取经纬度</el-button>
- </template>
- </el-input>
- </el-form-item>
- <el-form-item label="联系人" prop="contactsPerson">
- <el-input v-model="formData.contactsPerson" placeholder="请输入" />
- </el-form-item>
- <el-form-item label="联系人手机号" prop="telephone">
- <el-input v-model="formData.telephone" placeholder="请输入" maxlength="11" />
- </el-form-item>
- <el-form-item label="积水原因" prop="originType">
- <el-select v-model="formData.originType" placeholder="请选择" clearable>
- <el-option v-for="item in waterlogging_origin" :key="item.value" :label="item.label" :value="item.value" />
- </el-select>
- </el-form-item>
- <el-form-item label="风险级别" prop="riskLevel">
- <el-select v-model="formData.riskLevel" placeholder="请选择" clearable>
- <el-option v-for="item in levelType" :key="item.value" :label="item.label" :value="item.value" />
- </el-select>
- </el-form-item>
- <el-form-item label="是否为易涝点专项行动方案工程整治点位" prop="isEngineeringRenovation">
- <el-select v-model="formData.isEngineeringRenovation" placeholder="请选择" clearable>
- <el-option v-for="item in flowType" :key="item.value" :label="item.label" :value="item.value" />
- </el-select>
- </el-form-item>
- <el-form-item label="是否为易涝点专项行动方案整治点位" prop="isPlanRectification">
- <el-select v-model="formData.isPlanRectification" placeholder="请选择" clearable>
- <el-option v-for="item in flowType" :key="item.value" :label="item.label" :value="item.value" />
- </el-select>
- </el-form-item>
- <el-form-item label="是否提前清掏疏浚" prop="isClearDredg">
- <el-select v-model="formData.isClearDredg" placeholder="请选择" clearable>
- <el-option v-for="item in flowType" :key="item.value" :label="item.label" :value="item.value" />
- </el-select>
- </el-form-item>
- <el-form-item label="是否消除点位" prop="isEliminate">
- <el-select v-model="formData.isEliminate" placeholder="请选择" clearable>
- <el-option v-for="item in flowType" :key="item.value" :label="item.label" :value="item.value" />
- </el-select>
- </el-form-item>
- <el-form-item label="是否专人值守" prop="isPersonDuty">
- <el-select v-model="formData.isPersonDuty" placeholder="请选择" clearable>
- <el-option v-for="item in flowType" :key="item.value" :label="item.label" :value="item.value" />
- </el-select>
- </el-form-item>
- <el-form-item label="是否实施工程治理" prop="isProjectAdminister">
- <el-select v-model="formData.isProjectAdminister" placeholder="请选择" clearable @change="clearChange">
- <el-option v-for="item in flowType" :key="item.value" :label="item.label" :value="item.value" />
- </el-select>
- </el-form-item>
- <el-form-item label="工程项目选择项" prop="projectInfoIds">
- <el-select v-model="formData.projectInfoIds" placeholder="请选择" clearable :disabled="formData.isProjectAdminister == 0">
- <el-option v-for="item in projectList" :key="item.id" :label="item.projectName" :value="item.id" />
- </el-select>
- </el-form-item>
- <el-form-item label="是否提前备置排涝设备" prop="isStandbyEquipment">
- <el-select v-model="formData.isStandbyEquipment" placeholder="请选择" clearable @change="clearChange1">
- <el-option v-for="item in flowType" :key="item.value" :label="item.label" :value="item.value" />
- </el-select>
- </el-form-item>
- <el-form-item label="内涝积水电监测站" prop="stCodes">
- <el-select v-model="formData.stCodes" placeholder="请选择" clearable :disabled="formData.isStandbyEquipment == 0">
- <el-option v-for="item in stCodesList" :key="item.stCode" :label="item.stName" :value="item.stCode" />
- </el-select>
- </el-form-item>
- <el-form-item label="是否安装视频监控" prop="isCameraInstall">
- <el-select v-model="formData.isCameraInstall" placeholder="请选择" @change="clearChange2">
- <el-option v-for="item in flowType" :key="item.value" :label="item.label" :value="item.value" />
- </el-select>
- </el-form-item>
- <el-form-item label="视频监控点选择项" prop="cameraInfoIndexList" v-if="formData.isCameraInstall == 2">
- <el-select v-model="formData.cameraInfoIndexList" placeholder="请选择" clearable filterable multiple>
- <el-option v-for="item in cameraList" :key="item.indexCode" :label="item.name" :value="item.indexCode" />
- </el-select>
- </el-form-item>
- <el-form-item label="本年度发生积水次数" prop="yearHappenCount">
- <el-input v-model="formData.yearHappenCount" placeholder="请输入" />
- </el-form-item>
- <el-form-item label="本年度积水最大深度(mm)" prop="yearMaxDepth">
- <el-input-number v-model="formData.yearMaxDepth" placeholder="请输入" style="width: 100%" controls-position="right" />
- </el-form-item>
- <el-form-item label="本年度积水最大深度退水时长(h)" prop="yearMaxHour">
- <el-input v-model="formData.yearMaxHour" placeholder="请输入" />
- </el-form-item>
- </el-form>
- <template #footer>
- <div class="dialog-footer">
- <el-button type="info" @click="dialogAdd = false">取 消</el-button>
- <el-button type="primary" @click="submitForm">确 定</el-button>
- </div>
- </template>
- </el-dialog>
- <!-- 地图选取位置 -->
- <el-dialog title="地图选取位置(可搜索可直接点击获取)" v-model="showMap" width="800px" append-to-body>
- <MapPosition v-if="showMap" :isShowSearch="true" :isShowTool="false" :isSelectAddress="true" @getPlace="getAddress"></MapPosition>
- <template #footer>
- <div class="dialog-footer">
- <el-button type="primary" @click="showMap = false">确 定</el-button>
- </div>
- </template>
- </el-dialog>
- </div>
- </template>
-
- <script setup name="易涝点治理">
- import { waterPointPage, waterPointEdit, waterPointAdd, waterPointDetail, waterPointDelete } from '@/api/floodSys/repair';
- import { pagecameraResource } from '@/api/cameraResource/cameraResource';
- import { getProjectInfoNewPage } from '@/api/project/projectInformationNew';
- // import { pagertuSiteInfo } from '@/api/dataAnalysis/rtuSiteInfo';
- import { rtuSiteInfolist } from '@/api/cameraResource/siteCameraRelation';
- import WaterPointDetail from './waterPointDetail.vue'; //详情
- import MapPosition from '@/components/Map/index.vue'; //获取地图点位信息
-
- const { proxy } = getCurrentInstance();
-
- const tableData = ref([]);
- const tableLoading = ref(true);
- const total = ref(0);
- const dialogDetail = ref(false);
- const showSearch = ref(true);
- const dialogTitle = ref('');
- const dialogAdd = ref(false);
- const showMap = ref(false);
- const detailObj = ref({});
- const stCodesList = ref([]);
- const projectList = ref([]);
- const cameraList = ref([]);
-
- const allData = reactive({
- queryParams: {
- pageNum: 1,
- pageSize: 10,
- riskLevel: '',
- name: '',
- waterlogging: '',
- originType: '',
- isProjectAdminister: '',
- isPersonDuty: '',
- isCameraInstall: '',
- },
- formData: {
- address: '',
- longitude: '',
- latitude: '',
- name: '',
- belongsStreet: '',
- cameraIndexs: '',
- contactsPerson: '',
- isCameraInstall: '',
- isClearDredg: '',
- isEliminate: '',
- isEngineeringRenovation: '',
- isPersonDuty: '',
- isPlanRectification: '',
- isProjectAdminister: '',
- isStandbyEquipment: '',
- originType: '',
- jurisdiction: '',
- riskLevel: '',
- telephone: '',
- waterlogging: '',
- yearHappenCount: '',
- yearMaxDepth: '',
- yearMaxHour: '',
- },
- rulesForm: {
- name: [{ required: true, message: '请输入', trigger: 'blur' }],
- isCameraInstall: [{ required: true, message: '请选择', trigger: 'change' }],
- isClearDredg: [{ required: true, message: '请选择', trigger: 'change' }],
- isEliminate: [{ required: true, message: '请选择', trigger: 'change' }],
- isEngineeringRenovation: [{ required: true, message: '请选择', trigger: 'change' }],
- isPersonDuty: [{ required: true, message: '请选择', trigger: 'change' }],
- isPlanRectification: [{ required: true, message: '请选择', trigger: 'change' }],
- isProjectAdminister: [{ required: true, message: '请选择', trigger: 'change' }],
- isStandbyEquipment: [{ required: true, message: '请选择', trigger: 'change' }],
- originType: [{ required: true, message: '请选择', trigger: 'change' }],
- waterlogging: [{ required: true, message: '请选择', trigger: 'change' }],
- telephone: [{ pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/, message: '请输入正确的手机号码', trigger: 'blur' }],
- },
- });
- const { queryParams, formData, rulesForm } = toRefs(allData);
- const { waterlogging_type } = proxy.useDict('waterlogging_type'); //易涝点类型 字典数据
- const { waterlogging_origin } = proxy.useDict('waterlogging_origin'); // 易涝点原因 字典数据
-
- const levelType = ref([
- { label: 'I级', value: 'one' },
- { label: 'II级', value: 'two' },
- { label: 'III级', value: 'three' },
- ]);
- const flowType = ref([
- { label: '是', value: 2 },
- { label: '否', value: 0 },
- ]);
-
- /** 获取查询数据列表 */
- function getDataList() {
- tableLoading.value = true;
- waterPointPage(queryParams.value).then(response => {
- tableData.value = response.data;
- total.value = response.total;
- tableLoading.value = false;
- });
- }
-
- /** 搜索按钮操作 */
- function handleQuery() {
- queryParams.value.pageNum = 1;
- getDataList();
- }
- /** 重置按钮操作 */
- function resetQuery() {
- proxy.resetForm('queryRef');
- handleQuery();
- }
- // 新增
- function handleAdd() {
- proxy.resetForm('formRef'); //清空表单
- dialogTitle.value = '新增易涝积水点';
- dialogAdd.value = true;
- }
- // 修改
- function handleEdit(row) {
- const postId = row.id;
- waterPointDetail(postId).then(response => {
- dialogAdd.value = true;
- dialogTitle.value = '修改易涝积水点';
- nextTick(() => {
- formData.value = response.data;
- });
- });
- }
- /** 提交按钮 */
- function submitForm() {
- proxy.$refs['formRef'].validate(valid => {
- if (valid) {
- if (formData.value.isCameraInstall == 0) formData.value.cameraInfoIndexList = [];
- if (dialogTitle.value == '修改易涝积水点') {
- waterPointEdit(formData.value).then(response => {
- proxy.$modal.msgSuccess('修改成功');
- dialogAdd.value = false;
- getDataList();
- });
- } else {
- waterPointAdd(formData.value).then(response => {
- proxy.$modal.msgSuccess('新增成功');
- dialogAdd.value = false;
- getDataList();
- });
- }
- }
- });
- }
- // 删除
- function handleDelete(row) {
- const postIds = row.id;
- proxy.$modal
- .confirm('是否确认删除该数据项?')
- .then(function () {
- return waterPointDelete(postIds);
- })
- .then(() => {
- getDataList();
- proxy.$modal.msgSuccess('删除成功');
- })
- .catch(() => {});
- }
- // 获取位置
- function getAddress(val) {
- formData.value.address = val.caseAddress;
- formData.value.longitude = val.lonLat[0];
- formData.value.latitude = val.lonLat[1];
- }
- /** 详情按钮操作 */
- function handleDetail(row) {
- waterPointDetail(row.id).then(response => {
- detailObj.value = response.data;
- dialogDetail.value = true;
- });
- }
-
- /** 查询RTU站点列表 */
- function getList() {
- let param = {
- monitorTargetType: 'waterlogging',
- };
- rtuSiteInfolist(param).then(response => {
- stCodesList.value = response.data;
- });
- }
-
- function getList2() {
- let param = {
- pageNum: 1,
- pageSize: 9999,
- };
- getProjectInfoNewPage(param).then(response => {
- projectList.value = response.data;
- });
- }
-
- function getList3() {
- let param = {
- pageNum: 1,
- pageSize: 9999,
- };
- pagecameraResource(param).then(response => {
- cameraList.value = response.data;
- });
- }
-
- function clearChange() {
- if (formData.value.isProjectAdminister == 0) {
- formData.value.projectInfoIds = '';
- }
- }
-
- function clearChange1() {
- if (formData.value.isStandbyEquipment == 0) {
- formData.value.stCodes = '';
- }
- }
-
- function clearChange2() {
- if (formData.value.isCameraInstall == 0) {
- formData.value.cameraInfoIndexList = [];
- }
- }
-
- onMounted(() => {
- getDataList();
- getList();
- getList2();
- getList3();
- });
- </script>