站点查看数据详情

This commit is contained in:
王兴凯 2026-08-21 16:36:43 +08:00
parent d03b6e7cbf
commit 003a6f8228
10 changed files with 310 additions and 57 deletions

View File

@ -2733,7 +2733,7 @@ const StinfoAiVidoPointColumns: Array<any> = [
}, },
{ {
name: '监控点类型', name: '监控点类型',
filed: 'sttpName', filed: 'stindx',
visible: true, visible: true,
type: 'select', type: 'select',
url: '' url: ''

View File

@ -869,6 +869,7 @@ watch(
params.sttp = params.sttpMap; params.sttp = params.sttpMap;
} }
tabsConfig.value = handleTabs({ ...params }); tabsConfig.value = handleTabs({ ...params });
debugger
let value = tabsConfig.value.find((item: any) => item.default); let value = tabsConfig.value.find((item: any) => item.default);
currentActiveKey.value = value?.key; currentActiveKey.value = value?.key;

View File

@ -1085,9 +1085,35 @@ const handleTabs = (modaldata: any) => {
return WETabs; return WETabs;
case 'WVA': case 'WVA':
return WATabs; return WATabs;
case 'VD_FBFM': case 'VD_FB':
case 'VD':
case 'VD_FP': case 'VD_FP':
case 'VD_SG':
case 'VD_VP':
case 'VD_EQ':
case 'VD_DW':
case 'VD_FH':
case 'VD_OTWE':
case 'VD_OTTE':
case 'VD_FBP':
case 'VD_FC':
case 'VD_WQ':
case 'VD_TE':
case 'VD_WE':
case 'VD_EQS':
case 'VD_WT':
case 'VD_FBFM':
case 'VD_FBI':
case 'VD_PR':
case 'VD_FPB':
case 'VD_GZFC':
case 'VD_FPC':
case 'VD_VA':
case 'VD':
// case 'VD_FBFM':
// case 'VD_EQ':
// case 'AIVD':
// case 'VD':
// case 'VD_FP':
return videoTabs; return videoTabs;
case 'ENG_ALARM_POINT': case 'ENG_ALARM_POINT':
return DZGJ; return DZGJ;

View File

@ -155,7 +155,11 @@ const DRAWER_STTP_CODES = [
'VP', 'VP',
'VA', 'VA',
'EQ', 'EQ',
'FB' 'FB',
'VD',
'AIVD',
'DW',
'WE',
]; ];
const siteRangePicker = [ const siteRangePicker = [
{ label: '全部', value: 'all' }, { label: '全部', value: 'all' },

View File

@ -23,8 +23,17 @@
</div> </div>
</div> </div>
<div class="tabs_body"> <div class="tabs_body">
<a-spin :spinning="loading" tip="加载中..." class="chart-container chart_baowei"> <a-spin
<div v-show="hasData" ref="chartRef" class="chart" style="height: 100%" ></div> :spinning="loading"
tip="加载中..."
class="chart-container chart_baowei"
>
<div
v-show="hasData"
ref="chartRef"
class="chart"
style="height: 100%"
></div>
<a-empty <a-empty
v-show="!hasData && !loading" v-show="!hasData && !loading"
description="暂无数据" description="暂无数据"
@ -64,8 +73,18 @@ const stcd = computed(() => dianZhanStation.value?.stcd || '');
// ==================== ==================== // ==================== ====================
const MONTH_LABELS = [ const MONTH_LABELS = [
'1月', '2月', '3月', '4月', '5月', '6月', '1月',
'7月', '8月', '9月', '10月', '11月', '12月' '2月',
'3月',
'4月',
'5月',
'6月',
'7月',
'8月',
'9月',
'10月',
'11月',
'12月'
]; ];
// ==================== ==================== // ==================== ====================
@ -188,7 +207,10 @@ const buildOption = () => ({
areaStyle: { areaStyle: {
color: { color: {
type: 'linear', type: 'linear',
x: 0, y: 0, x2: 0, y2: 1, x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [ colorStops: [
{ offset: 0, color: '#d5e0eb' }, { offset: 0, color: '#d5e0eb' },
{ offset: 1, color: '#fbfcfd' } { offset: 1, color: '#fbfcfd' }
@ -210,7 +232,6 @@ const initChart = () => {
// //
chartInstance.on('click', (params: any) => { chartInstance.on('click', (params: any) => {
if (params.componentType === 'series') { if (params.componentType === 'series') {
const stnm = selectValue.value?.label || ''; const stnm = selectValue.value?.label || '';
modelStore.modalVisible = true; modelStore.modalVisible = true;
modelStore.params.sttp = 'WQ'; modelStore.params.sttp = 'WQ';
@ -269,7 +290,10 @@ const fetchStationList = async () => {
if (mway.value === 1) { if (mway.value === 1) {
const firstLeaf = findFirstLeaf(optionsList.value); const firstLeaf = findFirstLeaf(optionsList.value);
if (firstLeaf) { if (firstLeaf) {
selectValue.value = { value: firstLeaf.value, label: firstLeaf.title }; selectValue.value = {
value: firstLeaf.value,
label: firstLeaf.title
};
} }
} else { } else {
await fetchDefaultStcd(list); await fetchDefaultStcd(list);
@ -299,7 +323,12 @@ const fetchDefaultStcd = async (stationList: any[]) => {
const params: any = { const params: any = {
logic: 'and', logic: 'and',
filters: [ filters: [
{ field: 'drYear', operator: 'eq', dataType: 'string', value: yearValue.value.format('YYYY') }, {
field: 'drYear',
operator: 'eq',
dataType: 'string',
value: yearValue.value.format('YYYY')
},
{ field: 'TYPE', operator: 'eq', dataType: 'string', value: 'MON' }, { field: 'TYPE', operator: 'eq', dataType: 'string', value: 'MON' },
{ field: 'mway', operator: 'eq', dataType: 'number', value: mway.value }, { field: 'mway', operator: 'eq', dataType: 'number', value: mway.value },
{ field: 'rstcd', operator: 'eq', dataType: 'string', value: stcd.value } { field: 'rstcd', operator: 'eq', dataType: 'string', value: stcd.value }
@ -347,8 +376,18 @@ const fetchChartData = async () => {
const params: any = { const params: any = {
logic: 'and', logic: 'and',
filters: [ filters: [
{ field: 'drYear', operator: 'eq', dataType: 'string', value: yearValue.value.format('YYYY') }, {
{ field: 'stcd', operator: 'eq', dataType: 'string', value: selectValue.value.value }, field: 'drYear',
operator: 'eq',
dataType: 'string',
value: yearValue.value.format('YYYY')
},
{
field: 'stcd',
operator: 'eq',
dataType: 'string',
value: selectValue.value.value
},
{ field: 'TYPE', operator: 'eq', dataType: 'string', value: 'MON' } { field: 'TYPE', operator: 'eq', dataType: 'string', value: 'MON' }
] ]
}; };
@ -434,7 +473,7 @@ watch(mway, () => {
}); });
/** 监听 selectValue → 图表初始化和数据请求 */ /** 监听 selectValue → 图表初始化和数据请求 */
watch(selectValue, (val) => { watch(selectValue, val => {
if (val?.value) { if (val?.value) {
if (!chartInstance) { if (!chartInstance) {
nextTick(() => initChart()); nextTick(() => initChart());
@ -485,6 +524,8 @@ onUnmounted(() => {
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
overflow: hidden;
// line-height: 15px;
} }
.tabs_mei { .tabs_mei {
@ -494,6 +535,8 @@ onUnmounted(() => {
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
overflow: hidden;
// line-height: 15px;
} }
.tabs_mei:hover { .tabs_mei:hover {

View File

@ -135,13 +135,42 @@ const moduleConfig = computed(
() => ppbclConfigMap.value?.[MODULE_PATH] || { isShow: false, tagValue: '' } () => ppbclConfigMap.value?.[MODULE_PATH] || { isShow: false, tagValue: '' }
); );
/**
* 解析相对时间表达式 tagValue 7d / 1M / a1M / 3M / a3M / 1y / 3y / 5y
* 规则结束 = 今天开始 = 今天往前推 N 个单位a 前缀表示对齐到所在月的 1
* 解析失败返回 null
*/
const parseTagValue = (tagValue: string): [Dayjs, Dayjs] | null => {
const match = /^a?(\d+)([dMy])$/.exec((tagValue || '').trim());
if (!match) return null;
const n = Number(match[1]);
const unit = match[2];
let start: Dayjs;
switch (unit) {
case 'd':
start = dayjs().subtract(n, 'day');
break;
case 'M':
start = dayjs().subtract(n, 'month');
break;
case 'y':
start = dayjs().subtract(n, 'year');
break;
default:
return null;
}
// a / 1
if (tagValue.startsWith('a')) {
start = start.startOf('month');
}
return [start, dayjs()];
};
const defaultDateRange = computed<[Dayjs, Dayjs]>(() => { const defaultDateRange = computed<[Dayjs, Dayjs]>(() => {
const cfg = moduleConfig.value; const cfg = moduleConfig.value;
if (cfg?.isShow && cfg?.tagValue) { if (cfg?.tagValue) {
const d = dayjs(cfg.tagValue); const range = parseTagValue(cfg.tagValue);
if (d.isValid()) { if (range) return range;
return [d, dayjs()];
}
} }
return [dayjs().subtract(7, 'day'), dayjs()]; return [dayjs().subtract(7, 'day'), dayjs()];
}); });
@ -157,9 +186,9 @@ const moreSelectConfig = computed(() => ({
minWidth: '240px' minWidth: '240px'
})); }));
/** 日期范围选择器 */ /** 日期范围选择器isShow 控制整个组件显隐,隐藏时仍使用 tagValue 计算的默认区间) */
const scopeDateConfig = computed(() => ({ const scopeDateConfig = computed(() => ({
show: true, show: moduleConfig.value?.isShow !== 0,
value: [defaultDateRange.value[0], defaultDateRange.value[1]] as any, value: [defaultDateRange.value[0], defaultDateRange.value[1]] as any,
picker: 'date' as const, picker: 'date' as const,
format: 'YYYY-MM-DD', format: 'YYYY-MM-DD',
@ -658,12 +687,12 @@ watch(mway, () => {
// ==================== ==================== // ==================== ====================
onMounted(() => { onMounted(() => {
// : ppbclConfigMap, // 使 tagValue 退
const cfg = moduleConfig.value; const cfg = moduleConfig.value;
if (cfg?.isShow && cfg?.tagValue) { if (cfg?.tagValue) {
const d = dayjs(cfg.tagValue); const range = parseTagValue(cfg.tagValue);
if (d.isValid()) { if (range) {
dateRange.value = [d, dayjs()]; dateRange.value = range;
} }
} }
@ -706,6 +735,10 @@ onUnmounted(() => {
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
overflow: hidden;
// writing-mode: vertical-rl;
// position: relative;
// // line-height: 2em;
} }
.tabs_mei { .tabs_mei {
box-sizing: border-box; box-sizing: border-box;
@ -715,6 +748,10 @@ onUnmounted(() => {
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
overflow: hidden;
// writing-mode: vertical-rl;
// position: relative;
// line-height: 2em;
} }
.tabs_mei:hover { .tabs_mei:hover {
color: #2f6b98; color: #2f6b98;

View File

@ -140,14 +140,42 @@ const moduleConfig = computed(
() => ppbclConfigMap.value?.[MODULE_PATH] || { isShow: false, tagValue: '' } () => ppbclConfigMap.value?.[MODULE_PATH] || { isShow: false, tagValue: '' }
); );
/**
* 解析相对时间表达式 tagValue 7d / 1M / a1M / 3M / a3M / 1y / 3y / 5y
* 规则结束 = 今天开始 = 今天往前推 N 个单位a 前缀表示对齐到所在月的 1
* 解析失败返回 null
*/
const parseTagValue = (tagValue: string): [Dayjs, Dayjs] | null => {
const match = /^a?(\d+)([dMy])$/.exec((tagValue || '').trim());
if (!match) return null;
const n = Number(match[1]);
const unit = match[2];
let start: Dayjs;
switch (unit) {
case 'd':
start = dayjs().subtract(n, 'day');
break;
case 'M':
start = dayjs().subtract(n, 'month');
break;
case 'y':
start = dayjs().subtract(n, 'year');
break;
default:
return null;
}
// a / 1
if (tagValue.startsWith('a')) {
start = start.startOf('month');
}
return [start, dayjs()];
};
const defaultDateRange = computed<[Dayjs, Dayjs]>(() => { const defaultDateRange = computed<[Dayjs, Dayjs]>(() => {
const cfg = moduleConfig.value; const cfg = moduleConfig.value;
if (cfg?.isShow && cfg?.tagValue) { if (cfg?.tagValue) {
// tagValue const range = parseTagValue(cfg.tagValue);
const d = dayjs(cfg.tagValue); if (range) return range;
if (d.isValid()) {
return [d, dayjs()];
}
} }
return [dayjs().subtract(1, 'year'), dayjs()]; return [dayjs().subtract(1, 'year'), dayjs()];
}); });
@ -163,10 +191,9 @@ const moreSelectConfig = computed(() => ({
minWidth: '240px' minWidth: '240px'
})); }));
/** 日期范围选择器 */ /** 日期范围选择器isShow 控制整个组件显隐,隐藏时仍使用 tagValue 计算的默认区间) */
const scopeDateConfig = computed(() => ({ const scopeDateConfig = computed(() => ({
// show: moduleConfig.value?.isShow ?? true, show: moduleConfig.value?.isShow !== 0,
show: true,
value: [defaultDateRange.value[0], defaultDateRange.value[1]], value: [defaultDateRange.value[0], defaultDateRange.value[1]],
picker: 'date' as const, picker: 'date' as const,
format: 'YYYY-MM-DD', format: 'YYYY-MM-DD',
@ -670,12 +697,12 @@ onMounted(() => {
// onMounted initChart hasData false display:none 0 // onMounted initChart hasData false display:none 0
// fetchChartData // fetchChartData
// // 使 tagValue 退
const cfg = moduleConfig.value; const cfg = moduleConfig.value;
if (cfg?.isShow && cfg?.tagValue) { if (cfg?.tagValue) {
const d = dayjs(cfg.tagValue); const range = parseTagValue(cfg.tagValue);
if (d.isValid()) { if (range) {
dateRange.value = [d, dayjs()]; dateRange.value = range;
} }
} }
@ -719,6 +746,10 @@ onUnmounted(() => {
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
overflow: hidden;
// writing-mode: vertical-rl;
// position: relative;
// // line-height: 2em;
} }
.tabs_mei { .tabs_mei {
box-sizing: border-box; box-sizing: border-box;
@ -727,6 +758,10 @@ onUnmounted(() => {
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
overflow: hidden;
// writing-mode: vertical-rl;
// position: relative;
// // line-height: 2em;
} }
.tabs_mei:hover { .tabs_mei:hover {
color: #2f6b98; color: #2f6b98;

View File

@ -61,6 +61,9 @@ defineOptions({ name: 'GuoYuZongLiang' });
// ==================== ==================== // ==================== ====================
const dianZhanStation: any = inject('dianZhanStation', ref(null)); const dianZhanStation: any = inject('dianZhanStation', ref(null));
const stcd = computed(() => dianZhanStation.value?.stcd || ''); const stcd = computed(() => dianZhanStation.value?.stcd || '');
const ppbclConfigMap: any = inject('ppbclConfigMap', ref({}));
const MODULE_PATH = '@/modules/dianzhanzhuantiMod/guoyuzongliang/index.vue';
// ==================== ==================== // ==================== ====================
const loading = ref(false); const loading = ref(false);
@ -98,6 +101,42 @@ const generateRandomColor = (names: string[]): string[] => {
return names.map(() => '#' + Math.floor(Math.random() * 16777215).toString(16).padStart(6, '0')); return names.map(() => '#' + Math.floor(Math.random() * 16777215).toString(16).padStart(6, '0'));
}; };
// ==================== ====================
const moduleConfig = computed(
() => ppbclConfigMap.value?.[MODULE_PATH] || { isShow: false, tagValue: '' }
);
/**
* 解析相对时间表达式 tagValue 7d / 1M / a1M / 3M / a3M / 1y / 3y / 5y
* 规则结束 = 今天开始 = 今天往前推 N 个单位a 前缀表示对齐到所在月的 1
* 解析失败返回 null
*/
const parseTagValue = (tagValue: string): [Dayjs, Dayjs] | null => {
const match = /^a?(\d+)([dMy])$/.exec((tagValue || '').trim());
if (!match) return null;
const n = Number(match[1]);
const unit = match[2];
let start: Dayjs;
switch (unit) {
case 'd':
start = dayjs().subtract(n, 'day');
break;
case 'M':
start = dayjs().subtract(n, 'month');
break;
case 'y':
start = dayjs().subtract(n, 'year');
break;
default:
return null;
}
// a / 1
if (tagValue.startsWith('a')) {
start = start.startOf('month');
}
return [start, dayjs()];
};
// ==================== SidePanelItem ==================== // ==================== SidePanelItem ====================
/** 设施树选择器 */ /** 设施树选择器 */
@ -109,9 +148,9 @@ const moreSelectConfig = computed(() => ({
minWidth: '200px' minWidth: '200px'
})); }));
/** 日期范围选择器,格式 YYYY */ /** 日期范围选择器,格式 YYYYisShow 控制整个组件显隐,隐藏时仍使用 tagValue 计算的默认区间) */
const scopeDateConfig = computed(() => ({ const scopeDateConfig = computed(() => ({
show: true, show: moduleConfig.value?.isShow !== 0,
value: [dateRange.value[0], dateRange.value[1]] as any, value: [dateRange.value[0], dateRange.value[1]] as any,
picker: 'year' as const, picker: 'year' as const,
format: 'YYYY', format: 'YYYY',
@ -394,6 +433,15 @@ watch(dateRange, () => {
// ==================== ==================== // ==================== ====================
onMounted(() => { onMounted(() => {
// 使 tagValue 4
const cfg = moduleConfig.value;
if (cfg?.tagValue) {
const range = parseTagValue(cfg.tagValue);
if (range) {
dateRange.value = range;
}
}
if (stcd.value) { if (stcd.value) {
fetchFacilityTree().then(() => { fetchFacilityTree().then(() => {
initChart(); initChart();

View File

@ -269,7 +269,7 @@ const ZQInfo = [
col: 24 col: 24
} }
]; ];
// 视频
const VDInfo = [ const VDInfo = [
{ {
label: '监控点名', label: '监控点名',
@ -297,6 +297,7 @@ const VDInfo = [
col: 24 col: 24
} }
]; ];
//鱼类栖息地
const FHInfo = [ const FHInfo = [
// 栖息地 // 栖息地
{ {
@ -340,6 +341,57 @@ const FHInfo = [
col: 24 col: 24
} }
]; ];
// ai视频
const AIVDInfo = [
{
label: '监控点名',
value: 'stnm',
col: 24
},
{
label: '监控点类型',
value: 'stindx',
col: 12
},
{
label: '监控内容类型',
value: 'sttpName',
col: 12
},
{
label: '所属行政区',
value: 'addvcdName',
col: 24
},
{
label: '所属流域',
value: 'hbrvcdName',
col: 24
},
{
label: '监控点站址',
value: 'stlc',
col: 24
}
]
////调查断面
const WEInfo = [
{
label: '断面名称',
value: 'stnm',
col: 24
},
{
label: '站址',
value: 'stlc',
col: 24
},
{
label: '所在河段',
value: 'hbrvcdName',
col: 24
},
]
export { export {
ENGInfo, ENGInfo,
DWInfo, DWInfo,
@ -351,5 +403,7 @@ export {
WQInfo, WQInfo,
ZQInfo, ZQInfo,
VDInfo, VDInfo,
FHInfo FHInfo,
AIVDInfo,
WEInfo
}; };

View File

@ -47,8 +47,10 @@ import {
WTInfo, WTInfo,
WQInfo, WQInfo,
ZQInfo, ZQInfo,
VDInfo, VDInfo,//
FHInfo FHInfo, //
AIVDInfo, // AI
WEInfo//
} from './config.js'; } from './config.js';
import { getStcdDetail } from '@/api/mapModal'; import { getStcdDetail } from '@/api/mapModal';
@ -74,7 +76,9 @@ const moduleMap = {
WTVTInfo: WTInfo, WTVTInfo: WTInfo,
WQFBInfo: WQInfo, WQFBInfo: WQInfo,
WQFPInfo: WQInfo, WQFPInfo: WQInfo,
FHInfo: FHInfo FHInfo: FHInfo,
AIVDInfo:AIVDInfo,
WEInfo:WEInfo,
} as const; } as const;
watch( watch(
() => modelStore.selectedAnchorPoint, () => modelStore.selectedAnchorPoint,
@ -99,6 +103,7 @@ watch(
if (data.sttp && data.sttp.includes('_')) { if (data.sttp && data.sttp.includes('_')) {
const code = data.sttp.split('_')[0]; const code = data.sttp.split('_')[0];
formDiv.value = moduleMap[code + 'Info'] || null; formDiv.value = moduleMap[code + 'Info'] || null;
// debugger
} else { } else {
// 线 // 线
formDiv.value = moduleMap[data.sttp + 'Info']; formDiv.value = moduleMap[data.sttp + 'Info'];