657 lines
15 KiB
Vue
657 lines
15 KiB
Vue
<template>
|
|
<div class="huanbao-ej-container">
|
|
<!-- Tab切换 -->
|
|
<a-tabs v-model:activeKey="tabIndex" @change="handleTabChange">
|
|
<a-tab-pane
|
|
v-for="tab in tabs"
|
|
:key="String(tab.orderInx)"
|
|
:tab="tab.name"
|
|
/>
|
|
</a-tabs>
|
|
<!-- 搜索表单 -->
|
|
<div class="search-form">
|
|
<a-space size="middle">
|
|
<div>所属基地:</div>
|
|
<a-select
|
|
v-model:value="searchData.baseId"
|
|
placeholder="请选择所属基地"
|
|
style="width: 200px"
|
|
show-search
|
|
:filter-option="filterOption"
|
|
:options="jiDiList"
|
|
@change="handleBaseChange"
|
|
/>
|
|
<a-select
|
|
v-model:value="searchData.stcd"
|
|
placeholder=" "
|
|
style="width: 200px"
|
|
show-search
|
|
:filter-option="filterOption"
|
|
:options="rstcdOptions"
|
|
/>
|
|
<a-input
|
|
v-if="tabIndex !== '7'"
|
|
v-model:value="searchData.stnm"
|
|
placeholder="请输入测站名称"
|
|
style="width: 200px"
|
|
allow-clear
|
|
/>
|
|
|
|
<a-button type="primary" @click="handleSearch">查询</a-button>
|
|
<a-tooltip title="重置">
|
|
<a-button @click="handleReset">重置</a-button>
|
|
</a-tooltip>
|
|
</a-space>
|
|
</div>
|
|
<!-- 列表 -->
|
|
<BasicTable
|
|
ref="tableRef"
|
|
:scrollY="400"
|
|
:columns="columns"
|
|
:list-url="vmsstbprptGetKendoList"
|
|
:search-params="searchParams"
|
|
:transform-data="customTransform"
|
|
>
|
|
<template #coenvwState="{ column, record }">
|
|
<a-tag :color="record.coenvwState > 0 ? 'green' : '#999'">
|
|
{{ record.coenvwState > 0 ? '在线' : '离线' }}
|
|
</a-tag>
|
|
</template>
|
|
<template #dvtp="{ column, record }">
|
|
{{ dvtpText(record.dvtp) }}
|
|
</template>
|
|
<template #stindxForEng="{ column, record }">
|
|
{{ record.dvtp == 2 ? '生态流量' : '出库流量' }}
|
|
</template>
|
|
<template #action="{ column, record }">
|
|
<a @click="handleViewDetail(record, 'detail')" class="text-link">
|
|
查看详情
|
|
</a>
|
|
</template>
|
|
</BasicTable>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import { ref, computed, onMounted } from 'vue';
|
|
import { vmsstbprptGetKendoList } from '@/api/home';
|
|
import BasicTable from '@/components/BasicTable/index.vue';
|
|
import { useModelStore } from '@/store/modules/model';
|
|
import { useJidiSelectEventStore } from '@/store/modules/jidiSelectEvent';
|
|
|
|
const JidiSelectEventStore = useJidiSelectEventStore();
|
|
|
|
// ==================== Props 定义 ====================
|
|
const props = defineProps<{
|
|
baseId?: string;
|
|
tabs?: any[];
|
|
activeKey?: string | number;
|
|
}>();
|
|
|
|
// ==================== 状态管理 ====================
|
|
const tabIndex = ref(String(props.activeKey ?? ''));
|
|
const searchData = ref<any>({
|
|
baseId: props.baseId || 'all',
|
|
stnm: null,
|
|
stcd: null
|
|
});
|
|
const modelStore = useModelStore();
|
|
const tableRef = ref();
|
|
|
|
// ==================== 基地列表数据 ====================
|
|
const jiDiList: any = ref([]);
|
|
const rstcdOptions: any = ref([]);
|
|
|
|
// ==================== 表格列定义 ====================
|
|
const columns = computed(() => {
|
|
// 生态流量(tabIndex=7)的列
|
|
if (tabIndex.value === '7') {
|
|
return [
|
|
{
|
|
key: 'baseName',
|
|
title: '所属基地',
|
|
dataIndex: 'baseName',
|
|
width: '150px',
|
|
merge: true
|
|
},
|
|
{
|
|
key: 'stnm',
|
|
title: '电站名称',
|
|
dataIndex: 'stnm',
|
|
width: '176px'
|
|
},
|
|
{
|
|
key: 'dvtp',
|
|
title: '开发方式',
|
|
dataIndex: 'dvtp',
|
|
width: '120px',
|
|
|
|
slots: { customRender: 'dvtp' }
|
|
},
|
|
{
|
|
key: 'stindx',
|
|
title: '生态流量站类型',
|
|
dataIndex: 'stindx',
|
|
|
|
slots: { customRender: 'stindxForEng' }
|
|
},
|
|
{
|
|
key: 'jcdt',
|
|
title: '建成时间',
|
|
dataIndex: 'jcdt',
|
|
width: '150px',
|
|
sort: true
|
|
},
|
|
{
|
|
key: 'coenvwState',
|
|
title: '监测状态',
|
|
dataIndex: 'coenvwState',
|
|
width: '120px',
|
|
|
|
slots: { customRender: 'coenvwState' }
|
|
},
|
|
{
|
|
title: '操作',
|
|
key: 'action',
|
|
width: 100,
|
|
align: 'center' as const,
|
|
fixed: 'right' as const,
|
|
slots: { customRender: 'action' }
|
|
}
|
|
];
|
|
}
|
|
|
|
// 其他类型的列
|
|
const baseColumns = [
|
|
{
|
|
key: 'baseName',
|
|
title: '所属基地',
|
|
dataIndex: 'baseName',
|
|
width: '150px',
|
|
merge: true
|
|
},
|
|
{
|
|
key: 'stnm',
|
|
title: '测站名称',
|
|
dataIndex: 'stnm',
|
|
width: '176px'
|
|
},
|
|
{
|
|
key: 'ennm',
|
|
title: '电站',
|
|
dataIndex: 'ennm',
|
|
width: '150px',
|
|
|
|
slots: { customRender: 'ennm' }
|
|
},
|
|
{
|
|
key: 'jcdt',
|
|
title: '建成时间',
|
|
dataIndex: 'jcdt',
|
|
width: '150px',
|
|
sort: true
|
|
},
|
|
{
|
|
key: 'stindx',
|
|
title: '监测指标',
|
|
dataIndex: 'stindx',
|
|
width: '150px'
|
|
}
|
|
];
|
|
|
|
// 气象站(tabIndex=4)不显示监测状态
|
|
if (tabIndex.value !== '4') {
|
|
baseColumns.push({
|
|
key: 'coenvwState',
|
|
title: '监测状态',
|
|
dataIndex: 'coenvwState',
|
|
width: '120px',
|
|
slots: { customRender: 'coenvwState' }
|
|
} as any);
|
|
}
|
|
|
|
baseColumns.push({
|
|
title: '操作',
|
|
key: 'action',
|
|
width: 100,
|
|
align: 'center' as const,
|
|
fixed: 'right' as const,
|
|
slots: { customRender: 'action' }
|
|
} as any);
|
|
|
|
return baseColumns;
|
|
});
|
|
|
|
// ==================== 搜索参数 ====================
|
|
const searchParams = computed(() => {
|
|
return {
|
|
sort: [
|
|
{
|
|
field: 'baseStepSort',
|
|
dir: 'asc'
|
|
},
|
|
{
|
|
field: 'hbrvcd',
|
|
dir: 'asc'
|
|
},
|
|
{
|
|
field: 'rstcdStepSort',
|
|
dir: 'asc'
|
|
},
|
|
{
|
|
field: 'siteStepSort',
|
|
dir: 'asc'
|
|
}
|
|
],
|
|
group: [],
|
|
select: [
|
|
'baseName',
|
|
'stnm',
|
|
'ennm',
|
|
'jcdt',
|
|
'stindx',
|
|
'coenvwState',
|
|
'sttpCode',
|
|
'stcd',
|
|
'rstcd',
|
|
'stCode',
|
|
'stName',
|
|
'dvtp'
|
|
],
|
|
groupResultFlat: false
|
|
};
|
|
});
|
|
|
|
// ==================== 方法 ====================
|
|
const handleTabChange = (key: string) => {
|
|
tabIndex.value = key;
|
|
handleReset();
|
|
handleSearch();
|
|
};
|
|
|
|
const filterOption = (input: string, option: any) => {
|
|
return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0;
|
|
};
|
|
const getRstcdData = async () => {
|
|
const parmas = {
|
|
filter: {
|
|
logic: 'and',
|
|
filters: [
|
|
searchData.value.baseId != 'all'
|
|
? {
|
|
field: 'baseId',
|
|
operator: 'contains',
|
|
dataType: 'string',
|
|
value: '02'
|
|
}
|
|
: null,
|
|
{
|
|
field: 'sttpCode',
|
|
operator: 'eq',
|
|
dataType: 'string',
|
|
value: 'ENG'
|
|
}
|
|
].filter(Boolean)
|
|
},
|
|
sort: [
|
|
{
|
|
field: 'baseId',
|
|
dir: 'asc'
|
|
},
|
|
{
|
|
field: 'rvcdStepSort',
|
|
dir: 'asc'
|
|
},
|
|
{
|
|
field: 'rstcdStepSort',
|
|
dir: 'asc'
|
|
},
|
|
{
|
|
field: 'siteStepSort',
|
|
dir: 'asc'
|
|
}
|
|
],
|
|
select: ['stcd', 'stnm']
|
|
};
|
|
const res = await vmsstbprptGetKendoList(parmas);
|
|
rstcdOptions.value = res.data.data.map((item) => {
|
|
return {
|
|
value: item.stcd,
|
|
label: item.stnm
|
|
};
|
|
});
|
|
};
|
|
const handleBaseChange = () => {
|
|
searchData.value.stcd = null
|
|
getRstcdData();
|
|
// handleSearch();
|
|
};
|
|
|
|
const dvtpText = (dvtp: number) => {
|
|
if (dvtp === 2) return '引水式';
|
|
if (dvtp === 3) return '混合式';
|
|
return '坝后式';
|
|
};
|
|
|
|
const handleSearch = () => {
|
|
let filters: any[] = [];
|
|
|
|
if (searchData.value.baseId !== 'all') {
|
|
filters.push({
|
|
field: 'baseId',
|
|
operator: 'eq',
|
|
value: searchData.value.baseId
|
|
});
|
|
}
|
|
if(searchData.value.stcd){
|
|
filters.push({
|
|
field: 'stcd',
|
|
operator: 'eq',
|
|
value: searchData.value.stcd
|
|
});
|
|
}
|
|
if (searchData.value.stnm) {
|
|
filters.push({
|
|
field: 'stnm',
|
|
operator: 'contains',
|
|
value: searchData.value.stnm
|
|
});
|
|
}
|
|
|
|
// 根据tabIndex添加不同的过滤条件
|
|
switch (tabIndex.value) {
|
|
case '1': // 水温监测
|
|
filters.push(
|
|
{ field: 'mway', operator: 'eq', dataType: 'string', value: 2 },
|
|
{
|
|
field: 'sttpFullPath',
|
|
operator: 'contains',
|
|
dataType: 'string',
|
|
value: 'ENV,ENVM,WT'
|
|
}
|
|
);
|
|
break;
|
|
case '2': // 国家水质站
|
|
filters.push(
|
|
{ field: 'mway', operator: 'eq', dataType: 'string', value: 2 },
|
|
{
|
|
field: 'sttpFullPath',
|
|
operator: 'contains',
|
|
dataType: 'string',
|
|
value: 'ENV,ENVM,WQ'
|
|
},
|
|
{ field: 'dtinType', operator: 'eq', dataType: 'string', value: 1 }
|
|
);
|
|
break;
|
|
case '9': // 河道水质监测
|
|
filters.push(
|
|
{ field: 'mway', operator: 'eq', dataType: 'string', value: 2 },
|
|
{ field: 'sttpCode', operator: 'eq', dataType: 'string', value: 'WQ' },
|
|
{ field: 'dtinType', operator: 'eq', dataType: 'string', value: 0 }
|
|
);
|
|
break;
|
|
case '10': // 增殖站水质站
|
|
filters.push(
|
|
{ field: 'mway', operator: 'eq', dataType: 'string', value: 2 },
|
|
{
|
|
field: 'sttpCode',
|
|
operator: 'eq',
|
|
dataType: 'string',
|
|
value: 'WQFB'
|
|
},
|
|
{ field: 'dtinType', operator: 'eq', dataType: 'string', value: 0 }
|
|
);
|
|
break;
|
|
case '4': // 气象监测
|
|
filters.push(
|
|
{ field: 'mway', operator: 'eq', dataType: 'string', value: 2 },
|
|
{
|
|
field: 'sttpFullPath',
|
|
operator: 'contains',
|
|
dataType: 'string',
|
|
value: 'MM'
|
|
}
|
|
);
|
|
break;
|
|
case '5': // 国家水文站
|
|
filters.push(
|
|
{
|
|
logic: 'or',
|
|
filters: [
|
|
{
|
|
field: 'sttpFullPath',
|
|
operator: 'contains',
|
|
dataType: 'string',
|
|
value: 'ST,ZQ'
|
|
},
|
|
{
|
|
field: 'sttpFullPath',
|
|
operator: 'contains',
|
|
dataType: 'string',
|
|
value: 'ST,ZZ'
|
|
}
|
|
]
|
|
},
|
|
{ field: 'mway', operator: 'eq', dataType: 'string', value: 2 },
|
|
{ field: 'sttpCode', operator: 'in', value: ['ZZ', 'ZQ'] },
|
|
{ field: 'dtinType', operator: 'eq', dataType: 'string', value: 1 }
|
|
);
|
|
break;
|
|
case '6': // 水文监测
|
|
filters.push(
|
|
{
|
|
logic: 'or',
|
|
filters: [
|
|
{
|
|
field: 'sttpFullPath',
|
|
operator: 'contains',
|
|
dataType: 'string',
|
|
value: 'ST,ZQ'
|
|
},
|
|
{
|
|
field: 'sttpFullPath',
|
|
operator: 'contains',
|
|
dataType: 'string',
|
|
value: 'ST,ZZ'
|
|
}
|
|
]
|
|
},
|
|
{ field: 'sttpCode', operator: 'in', value: ['ZZ', 'ZQ'] },
|
|
{ field: 'mway', operator: 'eq', dataType: 'string', value: 2 },
|
|
{ field: 'dtinType', operator: 'eq', dataType: 'string', value: 0 }
|
|
);
|
|
break;
|
|
case '7': // 生态流量
|
|
filters.push(
|
|
{
|
|
field: 'runState',
|
|
operator: 'eq',
|
|
value: 4
|
|
},
|
|
{ field: 'sttpCode', operator: 'eq', dataType: 'string', value: 'ENG' },
|
|
{ field: 'DTIN', operator: 'eq', dataType: 'string', value: 1 },
|
|
{ field: 'bldsttCcode', operator: 'eq', dataType: 'string', value: 2 }
|
|
);
|
|
break;
|
|
case '8': // 视频监控
|
|
filters.push(
|
|
{
|
|
field: 'sttpFullPath',
|
|
operator: 'contains',
|
|
dataType: 'string',
|
|
value: 'VD,VD'
|
|
},
|
|
{ field: 'dtin', operator: 'eq', dataType: 'string', value: 1 }
|
|
);
|
|
break;
|
|
case '11': // 栖息地
|
|
filters.push({
|
|
field: 'sttpCode',
|
|
operator: 'eq',
|
|
dataType: 'string',
|
|
value: 'FH'
|
|
});
|
|
break;
|
|
}
|
|
let filter = {
|
|
logic: 'and',
|
|
filters: filters
|
|
};
|
|
tableRef.value?.getList(filter);
|
|
};
|
|
|
|
const handleReset = () => {
|
|
searchData.value = {
|
|
baseId: 'all',
|
|
stnm: null,
|
|
stcd: null
|
|
};
|
|
getRstcdData()
|
|
handleSearch();
|
|
};
|
|
|
|
const customTransform = (res: any) => {
|
|
return {
|
|
records: res?.data?.data || [],
|
|
total: res?.data?.total || 0
|
|
};
|
|
};
|
|
|
|
// 获取sttpCode对应的详情类型
|
|
const getSttpCode = (sttpCode: string) => {
|
|
const codeMap: Record<string, string> = {
|
|
DW: 'DW',
|
|
DW_1: 'DW',
|
|
DW_2: 'DW',
|
|
DW_3: 'DW',
|
|
DW_4: 'DW',
|
|
DW_5: 'DW',
|
|
DW_6: 'DW',
|
|
DW_9: 'DW',
|
|
EQS: 'EQS',
|
|
EQ: 'EQ',
|
|
EQ_1: 'EQ',
|
|
EQ_2: 'EQ',
|
|
EQ_3: 'EQ',
|
|
EQ_4: 'EQ',
|
|
EQ_5: 'EQ',
|
|
EQ_6: 'EQ',
|
|
EQ_7: 'EQ',
|
|
FB: 'EQ',
|
|
FPC: 'FP',
|
|
'FPC,': 'FP',
|
|
FP: 'FP',
|
|
FP_1: 'FP',
|
|
FP_2: 'FP',
|
|
FP_3: 'FP',
|
|
FP_4: 'FP',
|
|
FP_5: 'FP',
|
|
FH: 'FH',
|
|
'FH,': 'FH',
|
|
SG: 'SG',
|
|
'SG,': 'SG',
|
|
TE: 'TE',
|
|
'TE,': 'TE',
|
|
VA: 'VA',
|
|
'VA,': 'VA',
|
|
VP: 'VP',
|
|
'VP,': 'VP',
|
|
WE: 'WE',
|
|
'WE,': 'WE',
|
|
WQ: 'WQ',
|
|
'WQ,': 'WQ',
|
|
WQH: 'WQ',
|
|
WT: 'WT',
|
|
'WT,': 'WT',
|
|
WTRV: 'WT',
|
|
'WTRV,': 'WT',
|
|
WTVT: 'WT',
|
|
'WTVT,': 'WT'
|
|
};
|
|
return codeMap[sttpCode] || '';
|
|
};
|
|
|
|
// 查看详情
|
|
const handleViewDetail = (record: any, type: string) => {
|
|
if (type === 'dz') {
|
|
modelStore.modalVisible = true;
|
|
modelStore.params.sttp = 'ENG';
|
|
modelStore.title = record.ennm;
|
|
modelStore.params.stcd = record.rstcd;
|
|
} else {
|
|
const sttpCode = record.sttpCode || '';
|
|
|
|
if (sttpCode === 'MM') {
|
|
modelStore.modalVisible = true;
|
|
modelStore.params.sttp = 'MM';
|
|
modelStore.title = record.stnm;
|
|
modelStore.params.stcd = record.stcd;
|
|
} else if (sttpCode === 'ENG') {
|
|
modelStore.modalVisible = true;
|
|
modelStore.params.sttp = getSttpCode(sttpCode) || sttpCode;
|
|
modelStore.params.eqtp = 'QEC';
|
|
modelStore.params.stcd = record.stcd;
|
|
modelStore.title = record.stnm;
|
|
} else if (sttpCode.includes('VD')) {
|
|
modelStore.modalVisible = true;
|
|
modelStore.params.sttp = 'VD';
|
|
modelStore.params.stcd = record.stcd;
|
|
modelStore.title = record.stnm;
|
|
} else if (sttpCode.includes('WT')) {
|
|
modelStore.modalVisible = true;
|
|
modelStore.params.sttp = getSttpCode(sttpCode) || sttpCode;
|
|
modelStore.params.stcd = record.stcd;
|
|
modelStore.title = record.stnm;
|
|
modelStore.params.enfc =
|
|
sttpCode === 'WTVT' || sttpCode === 'WTVT,' ? '1' : '0';
|
|
} else {
|
|
modelStore.modalVisible = true;
|
|
modelStore.params.sttp = sttpCode;
|
|
modelStore.params.stcd = record.stcd;
|
|
modelStore.title = record.stnm;
|
|
}
|
|
}
|
|
};
|
|
|
|
// ==================== 生命周期 ====================
|
|
onMounted(() => {
|
|
JidiSelectEventStore.jidiData?.forEach((element: any) => {
|
|
jiDiList.value.push({
|
|
label: element.wbsName,
|
|
value: element.wbsCode
|
|
});
|
|
});
|
|
getRstcdData()
|
|
handleSearch();
|
|
});
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.huanbao-ej-container {
|
|
width: 100%;
|
|
height: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
background-color: #ffffff;
|
|
box-sizing: border-box;
|
|
|
|
.search-form {
|
|
margin-bottom: 16px;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
:deep(.ant-table-wrapper) {
|
|
flex: 1;
|
|
overflow: hidden;
|
|
}
|
|
}
|
|
|
|
.text-link {
|
|
color: #2f6b98;
|
|
|
|
&:hover {
|
|
color: #40a9ff;
|
|
}
|
|
}
|
|
</style>
|