GitBucket
Newer
<template>
<!-- 雨水系统 -->
<div id="yushuixitongHeHu">
<!-- <div class="eachInfo">
<div class="name">雨水泵站:</div>
<div class="text">
<span v-for="item in bengzhan" :key="item.id">{{ item.name }}</span>
</div>
</div> -->
<div class="eachInfo">
<div class="name">雨水泵站:</div>
<div class="flex flex-wrap">
<span class="eachName" v-for="item in bengzhan" :key="item.id" @click="toinfo(item)">{{ item.name }}</span>
</div>
</div>
<div class="eachInfo">
<div class="name">节制闸:</div>
<div class="text">
<span v-for="item in zhazhan" :key="item.id">{{ item.name }}</span>
</div>
</div>
<div class="tableBox">
<div class="name">雨水排口:</div>
<div class="text popUpTable">
<el-table :data="paikou" class="w100" stripe>
<el-table-column prop="outletName" label="排口名称">
<!-- <template #default="scope">
{{ moment(scope.row.time).format("YYYY年MM月DD日") }}
</template> -->
</el-table-column>
<el-table-column prop="outletCode" label="排口编号" />
<el-table-column prop="diameter" label="排口尺寸(米)" />
<el-table-column prop="oneLevelType" label="排口类型">
<template #default="scope">
<span v-if="scope.row.oneLevelType">{{ getpaikouInfo(scope.row.oneLevelType, leixingyi) }}</span>
</template>
</el-table-column>
</el-table>
</div>
</div>
<!-- <div class="eachInfo">
<div class="name">流域分区:</div>
<div>
<el-image v-if="listData.imgArr?.length>0"
style="width: 80px; height: 80px"
:zoom-rate="1.2"
:max-scale="7"
:min-scale="0.2"
:src="listData.imgArr[0]"
fit="cover"
:preview-src-list="listData.imgArr"
></el-image>
</div>
</div> -->
<div class="posInfoBox" v-if="isinfo">
<div class="ClosePos" @click="isinfo = false">
<el-icon><CloseBold /></el-icon>
</div>
<div class="conBox">
<div 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">
{{ dialogFormDetail.name }}
</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="usage_status" :value="dialogFormDetail.usageStatus" />
</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.completeDate, '{y}-{m}-{d} {h}:{i}:{s}') }}</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.usedYear }}
</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.pumpNumber }}
</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.elevation }}
</div>
</div>
<div class="flex flex-r">
<div class="detail-label flex flex-align-center">开关运行方案</div>
<div class="detail-value flex flex-align-center" :title="dialogFormDetail.plan">
{{ dialogFormDetail.plan }}
</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 v-if="dialogFormDetail.waterRegionCode">{{
selectArrListLabel(alllist, dialogFormDetail.waterRegionCode, 'id', 'name')
}}</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" :title="dialogFormDetail.address">
<span class="ellipsis">{{ dialogFormDetail.address }}</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">
<dict-tag :options="pump_station_type" :value="dialogFormDetail.type" />
</div>
</div>
<div class="flex flex-r">
<div class="detail-label flex flex-align-center">设计流量(m/s)</div>
<div class="detail-value flex flex-align-center">
{{ dialogFormDetail.designFlowRate }}
</div>
</div>
<div class="flex flex-r">
<div class="detail-label flex flex-align-center">街道</div>
<div class="detail-value flex flex-align-center" :title="dialogFormDetail.street">
<span class="ellipsis">{{ dialogFormDetail.street }}</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">
<dict-tag :options="ownership" :value="dialogFormDetail.ownership" />
</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.ownershipUnit }}
</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.dutyPerson }}
</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.dutyPersonPhone }}
</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.maintenanceDate, '{y}-{m}-{d} {h}:{i}:{s}') }}</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.startLevel }}
</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.controlLevel }}
</div>
</div>
<div class="flex flex-r">
<div class="detail-label flex flex-align-center">装机功率(kw)</div>
<div class="detail-value flex flex-align-center">
{{ dialogFormDetail.power }}
</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="isNumberState" :value="dialogFormDetail.isCross" />
</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.section }}
</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.pileNumber }}
</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.defensiveUnit }}
</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.waterBodies }}
</div>
</div>
<div class="flex flex-r textarea" v-if="dialogFormDetail.fileUrl">
<div class="detail-label flex flex-align-center">图片</div>
<div class="detail-value flex flex-align-center">
<el-image
style="width: 80px; height: 80px"
:zoom-rate="1.2"
:max-scale="7"
:min-scale="0.2"
:src="dialogFormDetail.fileUrl"
fit="cover"
:preview-src-list="[dialogFormDetail.fileUrl]"
></el-image>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script setup name="yushuixitongHeHu">
const { proxy } = getCurrentInstance();
import { outletInfoList, waterGateInfoList, rainWaterPumpStationInfoList } from '@/api/FloodControlAndDrainage.js';
import { getChineseFun } from '@/utils/ruoyi';
import { listwaterRegionInfo } from '@/api/MonitorAssetsOnMap';
const leixingyi = proxy.fixDict['leixingyi'];
const isNumberState = proxy.fixDict['isNumberState']; //是否字典
const {
ownership,
pump_station_type,
usage_status
} = proxy.useDict(
'pump_station_type',
'ownership',
'usage_status'
);
const props = defineProps({
// 数据id
dataID: {
type: String,
},
dataCode: {
type: String,
},
arrstcode: {
type: Array,
},
arrid: {
type: Array,
},
Getproperties: {
type: Object,
},
});
const alllist = ref([]);
const isinfo = ref(false);
const dialogFormDetail = ref({});
// 获取数据
const bengzhan = ref([]);
const zhazhan = ref([]);
const paikou = ref([]);
function gitDataFun() {
let params = {
waterRegionCode: props.Getproperties.waterRegionCode,
};
rainWaterPumpStationInfoList(params).then(
res => {
console.log('河湖水情弹框 雨水系统数据泵站', res);
if (res && res.code == 200) {
let data = res.data;
bengzhan.value = data;
}
},
error => {}
);
let params2 = {
waterBody: props.Getproperties.id,
};
waterGateInfoList(params2).then(
res => {
console.log('河湖水情弹框 雨水系统数据闸站', res);
if (res && res.code == 200) {
let data = res.data;
zhazhan.value = data;
}
},
error => {}
);
let params3 = {
waterBodyType: 'lake',
waterBodyId: props.Getproperties.id,
};
outletInfoList(params3).then(
res => {
console.log('河湖水情弹框 雨水系统数据排口', res);
if (res && res.code == 200) {
let data = res.data;
paikou.value = data;
}
},
error => {}
);
}
// 排口相关name
const getpaikouInfo = (id, data) => {
return getChineseFun(data, 'value', id, 'label');
};
const toinfo = item => {
dialogFormDetail.value = item;
isinfo.value = true;
};
function getListlast() {
listwaterRegionInfo().then(response => {
alllist.value = response.data;
});
}
onMounted(() => {
gitDataFun();
getListlast();
});
</script>
<style lang="scss" scoped>
#yushuixitongHeHu {
width: 100%;
height: 100%;
color: #ccefff;
padding: 20px 30px;
overflow-y: auto;
position: relative;
.eachInfo {
display: flex;
align-items: center;
font-weight: bold;
font-size: 14px;
margin-bottom: 20px;
.name {
color: #ccdfff;
min-width: 100px;
text-align: right;
padding-right: 10px;
}
.text {
min-height: 37px;
min-width: 200px;
flex: 1;
color: #8fbffe;
background: #0d2359;
border-radius: 6px;
border: 1px solid #0b9bff;
padding: 7px 12px;
span {
padding-right: 10px;
}
}
}
.eachName {
height: 35px;
line-height: 35px;
padding: 0 6px;
font-size: 16px;
border: 1px solid #8fbffe;
border-radius: 6px;
margin-right: 5px;
margin-bottom: 10px;
cursor: pointer;
}
.tableBox {
display: flex;
font-size: 14px;
margin-bottom: 10px;
color: #ccefff;
.name {
color: #ccdfff;
min-width: 100px;
text-align: right;
padding-right: 10px;
}
.text {
width: calc(100% - 100px);
}
:deep(.el-scrollbar__wrap) {
max-height: 440px;
overflow-y: auto;
}
}
.posInfoBox {
position: absolute;
left: 50%;
top: 0px;
transform: translate(-50%);
width: 1000px;
height: 600px;
background: #0d2359;
z-index: 9999;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2), 0 8px 16px rgba(0, 0, 0, 0.2);
padding: 30px 15px;
.conBox {
width: 100%;
height: 100%;
overflow: auto;
}
.ClosePos {
position: absolute;
right: 5px;
top: 5px;
font-size: 22px;
cursor: pointer;
}
.dialog-detail-box {
.dialog-form-detail .detail-value {
color: #fff;
}
.dialog-form-detail .detail-label {
color: #8fbffe;
}
.dialog-form-detail {
border: 0;
}
.detail-label {
background: none;
border: 0;
}
.dialog-form-detail .flex-r {
border: 0;
}
}
}
}
</style>