- <template>
- <div id="paikouxiangqing">
- <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" :title="dialogFormDetail.sewageSource">
- <span class="ellipsis">{{ dialogFormDetail.sewageSource }}</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.traceabilitySituation">
- <span class="ellipsis">{{ dialogFormDetail.traceabilitySituation }}</span>
- </div>
- </div>
-
- <el-divider />
- <div class="bottombox">
- <div class="boxitem">
- <div class="boxtitle">采样监测</div>
- <div class="boxcontentPK">
- <div class="leftment">
- <div
- class="items"
- @click="itemclick(item)"
- :class="itemactived == item.id ? 'actived' : ''"
- v-for="item in menuList"
- :key="item.id"
- >
-
- <span :title="item.monitorTime">{{ item.monitorTime }}</span>
- <span class="PKshuizhi">
- {{ getpaikouInfo(item.waterQualityLevel,water_quality_target) }}
- </span>
- </div>
- </div>
- <div class="rightbox">
- <div class="item" >
- <div class="itemname">pH</div>
- <div class="itemvalue">{{ leftboxList.ph }}</div>
- </div>
- <div class="item" >
- <div class="itemname">氨氮(mg/L)</div>
- <div class="itemvalue">{{ leftboxList.nh3n }}</div>
- </div>
- <div class="item" >
- <div class="itemname">化学需氧量(mg/L)</div>
- <div class="itemvalue">{{ leftboxList.oxygen }}</div>
- </div>
- <div class="item" >
- <div class="itemname">总磷(mg/L)</div>
- <div class="itemvalue">{{ leftboxList.p }}</div>
- </div>
- <div class="item" >
- <div class="itemname">总氮(mg/L)</div>
- <div class="itemvalue">{{ leftboxList.n }}</div>
- </div>
- <div class="item" >
- <div class="itemname">水温(℃)</div>
- <div class="itemvalue">{{ leftboxList.temperature }}</div>
- </div>
- <div class="item" >
- <div class="itemname">BOD</div>
- <div class="itemvalue">{{ leftboxList.bod }}</div>
- </div>
- <div class="item" >
- <div class="itemname">挥发酚</div>
- <div class="itemvalue">{{ leftboxList.volatilePhenol }}</div>
- </div>
- <div class="item" >
- <div class="itemname">流量(m³/天)</div>
- <div class="itemvalue">{{ leftboxList.q }}</div>
- </div>
- <div class="item" >
- <div class="itemname">检测方式</div>
- <div class="itemvalue">{{ getpaikouInfo(leftboxList.detection.rujianghe) }}</div>
- </div>
- <div class="item" >
- <div class="itemname">备注</div>
- <div class="itemvalue">{{ leftboxList.remark }}</div>
- </div>
-
-
- </div>
- </div>
- </div>
- <div class="boxitem">
- <div class="boxtitle">整治情况</div>
- <div class="twocontent">
- <div class="item item2">
- <div class="itemnametwo">整治时间</div>
- <div class="itemvaluetwo">{{ rightboxlist.regulateTime }}</div>
- </div>
- <div class="item item2">
- <div class="itemnametwo">整治类型</div>
- <div class="itemvaluetwo">{{ rightboxlist.regulateType }}</div>
- </div>
- <div class="item item2">
- <div class="itemnametwo">整治进展</div>
- <div class="itemvaluetwo">{{ getpaikouInfo(rightboxlist.regulateState,zhengzhijinzhan) }}</div>
- </div>
- <div class="item item2">
- <div class="itemnametwo">整治标准及措施</div>
- <div class="itemvaluetwo">{{ rightboxlist.regulateMeasure }}</div>
- </div>
- </div>
- </div>
- </div>
- </div>
- </div>
- </div>
- </template>
-
- <script setup name="paikouxiangqing">
-
- const { proxy } = getCurrentInstance();
- import { getChineseFun } from '@/utils/ruoyi';
- const rujianghe = proxy.fixDict['rujianghe'];
- const zhengzhijinzhan = proxy.fixDict['zhengzhijinzhan'];
- const { lake_level, project_scale, isNumberState, ownership, pump_station_type, usage_status, gate_type ,water_quality_target} = proxy.useDict(
- 'lake_level',
- 'project_scale',
- 'isNumberState',
- 'ownership',
- 'pump_station_type',
- 'usage_status',
- 'gate_type',
- 'water_quality_target'
- );
-
- const props = defineProps({
- // 数据id
- dataID: {
- type: String,
- },
- dataCode: {
- type: String,
- },
- // 默认打开tabs的key
- RefreshName: {
- type: String,
- },
- tabsType: {
- type: String,
- },
- typeName: {
- type: String,
- },
- });
-
- import { listwaterRegionInfo,getBaseDetail,outletMonitorList,outletRegulateList } from '@/api/MonitorAssetsOnMap';
-
-
- const alllist = ref([]);
- function getListlast() {
- listwaterRegionInfo().then(response => {
- alllist.value = response.data;
- });
- }
-
- const setnamobj = ref([]);
- const dialogFormDetail = ref([]);
-
- const menuList = ref();
-
- const leftboxList = ref({});
-
- const rightboxlist = ref({});
-
- const itemactived = ref('1');
-
- function switchPropsName() {
- switch (props.typeName) {
- case 'hupo':
- setnamobj.value = [
- { name: '湖泊名称', value: '' },
- { name: '湖泊类型', value: '' },
- { name: '所属水系', value: '' },
- { name: '境内面积km²', value: '' },
- { name: '总面积km²', value: '' },
- { name: '湖泊库容(万m³)', value: '' },
- { name: '总库容(万m³)', value: '' },
- { name: '岸线长度km', value: '' },
- { name: '水质目标', value: '' },
- { name: '常水位(m)', value: '' },
- { name: '生态水位(m)', value: '' },
- { name: '控制水位(m)', value: '' },
- { name: '管理部门', value: '', type: '' },
- { name: '描述', value: '', type: 'textarea' },
- { name: '图片', value: '1,2', type: 'img' },
- ];
-
- break;
- case 'bengzhan':
- setnamobj.value = [
- { name: '泵站名称', value: '' },
- { name: '泵站类型', value: '' },
- { name: '泵机个数', value: '' },
- { name: '设计流量(m/s)', value: '' },
- { name: '装机功率', value: '' },
- { name: '权属', value: '' },
- { name: '泵站状态', value: '' },
- { name: '建成日期', value: '' },
- { name: '使用年限', value: '' },
- { name: '维护日期', value: '' },
- { name: '运维单位', value: '' },
- { name: '管理负责人', value: '' },
- { name: '负责人联系方式', value: '' },
- { name: '泵站图片', value: '1,2', type: 'img' },
- ];
- break;
-
- case 'shuiku':
- setnamobj.value = [
- { name: '水库名称', value: '' },
- { name: '水库编号', value: '' },
- { name: '所属水系', value: '' },
- { name: '水库类型', value: '' },
- { name: '所在(村/街道)', value: '' },
- { name: '集水面积(km2)', value: '' },
- { name: '总库容(万m³)', value: '' },
- { name: '调洪库容(万)', value: '' },
- { name: '水质目标', value: '' },
- { name: '常水位(m)', value: '' },
- { name: '生态水位(m)', value: '' },
- { name: '控制水位(m)', value: '' },
- { name: '管理部门', value: '', type: '' },
- { name: '描述', value: '', type: 'textarea' },
- { name: '图片', value: '1,2', type: 'img' },
- ];
-
- break;
- }
- }
-
- function itemclick(item) {
- itemactived.value = item.id;
- leftboxList.value=item
- }
-
- // 获取排口详情
- function getDetailBycodeAndDataid() {
- let params = {
- dataId: props.dataID,
- dataCode: props.dataCode,
- };
- getBaseDetail(params).then(res => {
- console.log('排口详情', res);
- dialogFormDetail.value = res.data;
- });
- }
- // 获取排口监测数据
- function getMonitorPK() {
- let params = {
- id: props.dataID,
- };
- outletMonitorList(params).then(res => {
- console.log('排口监测列表详情', res);
- menuList.value = res.data;
- if(res.data?.length>0){
- itemactived.value=res.data[0].id
- leftboxList.value=res.data[0]
-
- }
- });
- }
- function getRenovatePK() {
- let params = {
- outletId: props.dataID,
- };
- outletRegulateList(params).then(res => {
- console.log('排口整治列表详情', res);
- if(res.data?.length>0){
- rightboxlist.value=res.data[0]
-
- }
- });
- }
- // 排口相关name
- const getpaikouInfo = (id,data) => {
- return getChineseFun(data, 'value', id, 'label');
- };
- onMounted(() => {
- getDetailBycodeAndDataid()
- getMonitorPK()
- getRenovatePK()
- // getListlast();
-
- // switchPropsName();
- console.log('props', props);
- });
- </script>
-
- <style lang="scss" scoped>
- #paikouxiangqing {
- width: 100%;
- height: 100%;
- color: #ccefff;
-
- .dialog-detail-box {
- width: 100%;
- height: 100%;
- display: flex;
- padding: 0 10px;
- flex-wrap: wrap;
- overflow: hidden;
- overflow-y: auto;
- font-weight: bold;
-
- .detail-label {
- font-size: 12px;
- text-align: left;
- width: 140px;
- background: transparent;
- color: #ccefff;
- border: none;
- }
-
- .dialog-form-detail {
- border: none;
- }
-
- .dialog-form-detail .flex-r {
- border: none;
- }
- }
- }
-
- .width100 {
- width: 100% !important;
- }
- .img,
- .textarea {
- width: 100% !important;
- }
-
- .bottombox {
- display: flex;
- width: 100%;
-
- .boxitem {
- width: 50%;
-
- .boxtitle {
- text-align: center;
- width: 100%;
- font-size: 18px;
- padding-bottom: 10px;
- color: #2faeff;
- }
-
- .twocontent {
- height: 180px;
- overflow: hidden;
- overflow-y: auto;
- }
-
- .boxcontentPK {
- height: 280px;
- display: flex;
- // overflow: hidden;
- // overflow-y: auto;
-
- .leftment {
- height: 100%;
- width: 180px;
- overflow: hidden;
- overflow: auto;
- background: #304b7d;
- padding: 5px;
- box-sizing: border-box;
-
- .items {
- cursor: pointer;
- width: 100%;
- // text-align: center;
- position: relative;
- margin: 12px 0 ;
- box-sizing: border-box;
-
- .PKshuizhi {
- display: inline-block;
- position: absolute;
- right: -5px;
- top: -8px;
- padding: 5px 10px;
- background: red;
- color: #fff;
- border-radius: 10px;
- box-sizing: border-box;
- }
- &.actived {
- color: #2faeff;
- }
- }
- }
-
- .rightbox {
- // width: calc(100% - 180px);
- flex: 1;
- height: 100%;
- overflow: auto;
- .item {
- margin-bottom: 5px;
- }
- }
- }
- }
-
- .item {
- display: flex;
- justify-content: center;
- color: #ccefff;
-
- .itemname {
- width: 100px;
- text-align: left;
- }
-
- .itemvalue {
- width: 100px;
- }
-
- .itemnametwo {
- width: 140px;
- text-align: left;
- }
-
- .itemvaluetwo {
- width: calc(100% - 140px);
- }
- }
-
- .item2 {
- min-height: 40px;
- }
- }
- </style>