- <template>
- <!-- 易涝积水点详情 -->
- <div class="publicContainer">
- <el-tabs v-model="activeName" class="demo-tabs">
- <el-tab-pane label="基本信息" name="1">
- <!-- 基本信息 -->
- <div class="publicDetail">
- <div class="part" v-for="(item, index) in baseInfo" :key="index">
- <p class="title">{{ item.name }}:</p>
- <p
- class="content"
- v-if="
- item.value == 'isEngineeringRenovation' ||
- item.value == 'isPlanRectification' ||
- item.value == 'isCameraInstall' ||
- item.value == 'isClearDredg' ||
- item.value == 'isPersonDuty' ||
- item.value == 'isProjectAdminister' ||
- item.value == 'isStandbyEquipment'
- "
- >
- {{ props.detailObj[item.value] == 0 ? '是' : '否' }}
- </p>
- <p class="content" v-else-if="item.value == 'waterlogging'">
- <dict-tag :options="waterlogging_type" :value="props.detailObj['waterlogging']" />
- </p>
- <p class="content" v-else-if="item.value == 'originType'">
- <dict-tag :options="waterlogging_origin" :value="props.detailObj['originType']" />
- </p>
- <p class="content" v-else>{{ props.detailObj[item.value] }}</p>
- </div>
- </div>
- </el-tab-pane>
- <el-tab-pane label="GIS地图位置" name="2">
- <!-- GIS地图位置 -->
- GIS地图位置
- </el-tab-pane>
- <el-tab-pane label="历史积水深度" name="3">
- <!-- 历史积水深度 -->
- <el-form :model="queryParams" :inline="true" ref="queryRef">
- <el-row>
- <!-- <el-col :span="12">
- <el-form-item label="积水点监测站点名称"
- prop="postCode">
- <el-input v-model="queryParams.postCode"
- placeholder="请输入"
- clearable
- @keyup.enter="handleQuery"
- style="width:160px" />
- </el-form-item>
- </el-col> -->
- <el-col :span="10">
- <el-form-item label="积水发生时间" prop="daterange">
- <el-date-picker
- type="daterange"
- v-model="queryParams.daterange"
- value-format="YYYY-MM-DD"
- start-placeholder="开始日期"
- end-placeholder="结束日期"
- placeholder="请选择日期"
- style="width: 240px"
- >
- </el-date-picker>
- </el-form-item>
- </el-col>
- <el-col :span="8">
- <el-form-item label="积水深度" prop="postCode">
- <el-select v-model="queryParams.postCode" placeholder="请选择" clearable style="width: 180px">
- <el-option v-for="item in flowType" :key="item.value" :label="item.label" :value="item.value" />
- </el-select>
- </el-form-item>
- </el-col>
- <!-- <el-col :span="12">
- <el-form-item label="退水时长"
- prop="postCode"
- style="width:360px">
- <el-select v-model="queryParams.postCode"
- placeholder="请选择"
- clearable>
- <el-option v-for="item in hourType"
- :key="item.value"
- :label="item.label"
- :value="item.value" />
- </el-select>
- </el-form-item>
- </el-col> -->
- <el-col :span="6">
- <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-col>
- </el-row>
- </el-form>
- <el-table :data="tableData">
- <el-table-column label="场次降雨编号" prop="postCode" />
- <el-table-column label="降雨开始时间" prop="postCode" />
- <el-table-column label="降雨结束时间" prop="postCode" />
- <el-table-column label="累计降雨量" prop="postCode" />
- <el-table-column label="降雨强度" prop="postCode" />
- <el-table-column label="最大积水深度" prop="postCode" />
- <el-table-column label="操作" width="160" class-name="small-padding fixed-width">
- <template #default="scope">
- <el-button link type="primary" icon="Edit" @click="handleEdit(scope.row)">编辑</el-button>
- </template>
- </el-table-column>
- </el-table>
- </el-tab-pane>
- <el-tab-pane label="工程整治" name="4">
- <!-- 工程整治 -->
- <el-form :model="queryParams2" :inline="true" ref="queryRef2">
- <el-form-item label="工程名称" prop="postCode">
- <el-input v-model="queryParams2.postCode" placeholder="请输入" clearable @keyup.enter="handleQuery2" />
- </el-form-item>
- <el-form-item label="开工时间" prop="date">
- <el-date-picker type="date" v-model="queryParams2.date" value-format="YYYY-MM-DD" placeholder="请选择日期"> </el-date-picker>
- </el-form-item>
- <el-form-item label="资金来源" prop="postCode">
- <el-select v-model="queryParams2.postCode" placeholder="请选择" clearable>
- <el-option v-for="item in moneyType" :key="item.value" :label="item.label" :value="item.value" />
- </el-select>
- </el-form-item>
- <el-form-item>
- <el-button type="primary" icon="Search" @click="handleQuery2">搜索</el-button>
- <el-button icon="Refresh" @click="resetQuery2">重置</el-button>
- </el-form-item>
- </el-form>
- <el-table :data="tableData2">
- <el-table-column label="工程名称" prop="postCode" />
- <el-table-column label="治理内容" prop="postCode" />
- <el-table-column label="开工时间" prop="postCode" />
- <el-table-column label="计划完工时间" prop="postCode" />
- <el-table-column label="详细工程进展情况" prop="postCode" />
- <el-table-column label="投资金额" prop="postCode" />
- <el-table-column label="资金来源" prop="postCode" />
- <el-table-column label="治理前效果图" prop="postCode" />
- <el-table-column label="治理后效果图" prop="postCode" />
- </el-table>
- </el-tab-pane>
- <el-tab-pane label="关联视频监控" name="5">
- <!-- 关联视频监控 -->
- <VideosHK videoHeightCus="500" v-if="activeName == '5'"></VideosHK>
- </el-tab-pane>
- </el-tabs>
- <!-- 历史积水深度编辑 -->
- <el-dialog title="编辑内涝治理情况" v-model="dialogShow" width="500px" append-to-body>
- <el-form ref="formRef" :model="formData" :rules="rulesForm" label-width="120px" class="publicForm">
- <el-form-item label="雨停后退水时长" prop="hour">
- <el-input type="number" :min="0" v-model="formData.hour" placeholder="请输入" />
- </el-form-item>
- <el-form-item label="断交时长" prop="hour">
- <el-input type="number" :min="0" v-model="formData.hour" placeholder="请输入" />
- </el-form-item>
- <el-form-item label="积水原因类别" prop="jinjiType">
- <el-select v-model="formData.jinjiType" placeholder="请选择" clearable>
- <el-option v-for="item in statusType" :key="item.value" :label="item.label" :value="item.value" />
- </el-select>
- </el-form-item>
- <el-form-item label="具体原因" prop="hour">
- <el-input type="textarea" v-model="formData.hour" placeholder="请输入" />
- </el-form-item>
- </el-form>
- <template #footer>
- <div class="dialog-footer">
- <el-button type="info" @click="cancelForm">取 消</el-button>
- <el-button type="primary" @click="submitForm">确 定</el-button>
- </div>
- </template>
- </el-dialog>
- </div>
- </template>
-
- <script setup name="易涝积水点详情">
- import VideosHK from '@/components/videoHK/index.vue'; //查看海康视频
-
- const props = defineProps({
- detailObj: {
- type: Object,
- default: {},
- },
- });
-
- const { proxy } = getCurrentInstance();
- const activeName = ref('1');
- const { waterlogging_type } = proxy.useDict('waterlogging_type'); //易涝点类型 字典数据
- const { waterlogging_origin } = proxy.useDict('waterlogging_origin'); // 易涝点原因 字典数据
- const baseInfo = ref([
- { name: '积水点名称', value: 'name' },
- { name: '积水点类型', value: 'waterlogging' },
- { name: '积水原因', value: 'originType' },
- { name: '易涝点位置', value: 'address' },
- { name: '所属街道', value: 'belongsStreet' },
- { name: '行政辖区', value: 'jurisdiction' },
- { name: '风险类别', value: 'riskLevel' },
- { name: '是否为内涝点专项行动方案工程整治点位', value: 'isEngineeringRenovation' },
- { name: '是否为易涝点整治专项行动方案点位', value: 'isPlanRectification' },
- { name: '视频监控等设备安装情况', value: 'isCameraInstall' },
- { name: '是否提前清掏疏浚', value: 'isClearDredg' },
- { name: '是否专人值守', value: 'isPersonDuty' },
- { name: '是否提前备置排涝设备', value: 'isStandbyEquipment' },
- { name: '是否实施工程治理', value: 'isProjectAdminister' },
- { name: '积水点联系人', value: 'contactsPerson' },
- { name: '联系电话', value: 'telephone' },
- { name: '备注', value: 'remark' },
- { name: '本年度发生积水次数', value: 'yearHappenCount' },
- { name: '本年度积水最大深度(mm)', value: 'yearMaxDepth' },
- { name: '本年度积水最大深度退水时长(h)', value: 'yearMaxHour' },
- ]);
- const flowType = ref([
- { label: '小于15cm', value: '1' },
- { label: '大于15cm小于30cm', value: '2' },
- { label: '大于30cm小于50cm', value: '3' },
- ]);
- const hourType = ref([
- { label: '小于0.5h', value: '1' },
- { label: '大于0.5h小于1.5h', value: '2' },
- { label: '大于1.5h小于2h', value: '3' },
- ]);
- const statusType = ref([
- { label: '设施过流能力', value: '1' },
- { label: '设施结构功能', value: '2' },
- { label: '日常运维', value: '3' },
- ]);
- const moneyType = ref([
- { label: '区财政资金', value: '1' },
- { label: '国家专项资金', value: '2' },
- { label: '抢险救灾专项资金', value: '3' },
- { label: '社会资金', value: '4' },
- ]);
- const tableData = ref([]);
- const tableData2 = ref([]);
- const dialogShow = ref(false);
- const allData = reactive({
- formData: {
- hour: 0,
- },
- queryParams: {
- postCode: '',
- daterange: [proxy.moment(new Date()).subtract(30, 'days').format('YYYY-MM-DD'), proxy.moment().format('YYYY-MM-DD')],
- },
- queryParams2: {
- postCode: '',
- date: proxy.moment(new Date()).subtract(30, 'days').format('YYYY-MM-DD'),
- },
- rulesForm: {
- hour: [{ required: true, message: '请输入', trigger: 'blur' }],
- },
- });
- const { queryParams, queryParams2, formData, rulesForm } = toRefs(allData);
- // 历史积水深度搜索
- function handleQuery() {}
- /** 重置按钮操作 */
- function resetQuery() {
- proxy.resetForm('queryRef');
- handleQuery();
- }
- // 历史积水深度编辑
- function handleEdit() {
- dialogShow.value = true;
- }
- /** 取消按钮 */
- function cancelForm() {
- dialogShow.value = false;
- }
- // 工程整治搜索
- function handleQuery2() {}
- /** 工程整治操作 */
- function resetQuery2() {
- proxy.resetForm('queryRef2');
- handleQuery2();
- }
- /** 提交按钮 */
- function submitForm() {
- proxy.$refs['formRef'].validate(valid => {
- if (valid) {
- updatePost(formData.value).then(response => {
- proxy.$modal.msgSuccess('修改成功');
- dialogShow.value = false;
- getDataList();
- });
- }
- });
- }
- onMounted(() => {});
- </script>
- <style lang="scss"></style>