站点查看数据详情

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: '监控点类型',
filed: 'sttpName',
filed: 'stindx',
visible: true,
type: 'select',
url: ''

View File

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

View File

@ -1085,9 +1085,35 @@ const handleTabs = (modaldata: any) => {
return WETabs;
case 'WVA':
return WATabs;
case 'VD_FBFM':
case 'VD':
case 'VD_FB':
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;
case 'ENG_ALARM_POINT':
return DZGJ;

View File

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

View File

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

View File

@ -135,13 +135,42 @@ 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()];
};
const defaultDateRange = computed<[Dayjs, Dayjs]>(() => {
const cfg = moduleConfig.value;
if (cfg?.isShow && cfg?.tagValue) {
const d = dayjs(cfg.tagValue);
if (d.isValid()) {
return [d, dayjs()];
}
if (cfg?.tagValue) {
const range = parseTagValue(cfg.tagValue);
if (range) return range;
}
return [dayjs().subtract(7, 'day'), dayjs()];
});
@ -157,9 +186,9 @@ const moreSelectConfig = computed(() => ({
minWidth: '240px'
}));
/** 日期范围选择器 */
/** 日期范围选择器isShow 控制整个组件显隐,隐藏时仍使用 tagValue 计算的默认区间) */
const scopeDateConfig = computed(() => ({
show: true,
show: moduleConfig.value?.isShow !== 0,
value: [defaultDateRange.value[0], defaultDateRange.value[1]] as any,
picker: 'date' as const,
format: 'YYYY-MM-DD',
@ -658,12 +687,12 @@ watch(mway, () => {
// ==================== ====================
onMounted(() => {
// : ppbclConfigMap,
// 使 tagValue 退
const cfg = moduleConfig.value;
if (cfg?.isShow && cfg?.tagValue) {
const d = dayjs(cfg.tagValue);
if (d.isValid()) {
dateRange.value = [d, dayjs()];
if (cfg?.tagValue) {
const range = parseTagValue(cfg.tagValue);
if (range) {
dateRange.value = range;
}
}
@ -706,6 +735,10 @@ onUnmounted(() => {
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
// writing-mode: vertical-rl;
// position: relative;
// // line-height: 2em;
}
.tabs_mei {
box-sizing: border-box;
@ -715,6 +748,10 @@ onUnmounted(() => {
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
// writing-mode: vertical-rl;
// position: relative;
// line-height: 2em;
}
.tabs_mei:hover {
color: #2f6b98;

View File

@ -140,14 +140,42 @@ 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()];
};
const defaultDateRange = computed<[Dayjs, Dayjs]>(() => {
const cfg = moduleConfig.value;
if (cfg?.isShow && cfg?.tagValue) {
// tagValue
const d = dayjs(cfg.tagValue);
if (d.isValid()) {
return [d, dayjs()];
}
if (cfg?.tagValue) {
const range = parseTagValue(cfg.tagValue);
if (range) return range;
}
return [dayjs().subtract(1, 'year'), dayjs()];
});
@ -163,10 +191,9 @@ const moreSelectConfig = computed(() => ({
minWidth: '240px'
}));
/** 日期范围选择器 */
/** 日期范围选择器isShow 控制整个组件显隐,隐藏时仍使用 tagValue 计算的默认区间) */
const scopeDateConfig = computed(() => ({
// show: moduleConfig.value?.isShow ?? true,
show: true,
show: moduleConfig.value?.isShow !== 0,
value: [defaultDateRange.value[0], defaultDateRange.value[1]],
picker: 'date' as const,
format: 'YYYY-MM-DD',
@ -670,12 +697,12 @@ onMounted(() => {
// onMounted initChart hasData false display:none 0
// fetchChartData
//
// 使 tagValue 退
const cfg = moduleConfig.value;
if (cfg?.isShow && cfg?.tagValue) {
const d = dayjs(cfg.tagValue);
if (d.isValid()) {
dateRange.value = [d, dayjs()];
if (cfg?.tagValue) {
const range = parseTagValue(cfg.tagValue);
if (range) {
dateRange.value = range;
}
}
@ -719,6 +746,10 @@ onUnmounted(() => {
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
// writing-mode: vertical-rl;
// position: relative;
// // line-height: 2em;
}
.tabs_mei {
box-sizing: border-box;
@ -727,6 +758,10 @@ onUnmounted(() => {
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
// writing-mode: vertical-rl;
// position: relative;
// // line-height: 2em;
}
.tabs_mei:hover {
color: #2f6b98;

View File

@ -61,6 +61,9 @@ defineOptions({ name: 'GuoYuZongLiang' });
// ==================== ====================
const dianZhanStation: any = inject('dianZhanStation', ref(null));
const stcd = computed(() => dianZhanStation.value?.stcd || '');
const ppbclConfigMap: any = inject('ppbclConfigMap', ref({}));
const MODULE_PATH = '@/modules/dianzhanzhuantiMod/guoyuzongliang/index.vue';
// ==================== ====================
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'));
};
// ==================== ====================
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 ====================
/** 设施树选择器 */
@ -109,9 +148,9 @@ const moreSelectConfig = computed(() => ({
minWidth: '200px'
}));
/** 日期范围选择器,格式 YYYY */
/** 日期范围选择器,格式 YYYYisShow 控制整个组件显隐,隐藏时仍使用 tagValue 计算的默认区间) */
const scopeDateConfig = computed(() => ({
show: true,
show: moduleConfig.value?.isShow !== 0,
value: [dateRange.value[0], dateRange.value[1]] as any,
picker: 'year' as const,
format: 'YYYY',
@ -394,6 +433,15 @@ watch(dateRange, () => {
// ==================== ====================
onMounted(() => {
// 使 tagValue 4
const cfg = moduleConfig.value;
if (cfg?.tagValue) {
const range = parseTagValue(cfg.tagValue);
if (range) {
dateRange.value = range;
}
}
if (stcd.value) {
fetchFacilityTree().then(() => {
initChart();

View File

@ -269,7 +269,7 @@ const ZQInfo = [
col: 24
}
];
// 视频
const VDInfo = [
{
label: '监控点名',
@ -297,6 +297,7 @@ const VDInfo = [
col: 24
}
];
//鱼类栖息地
const FHInfo = [
// 栖息地
{
@ -340,6 +341,57 @@ const FHInfo = [
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 {
ENGInfo,
DWInfo,
@ -351,5 +403,7 @@ export {
WQInfo,
ZQInfo,
VDInfo,
FHInfo
FHInfo,
AIVDInfo,
WEInfo
};

View File

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