添加新功能菜单，添加右侧抽屉新功能，迁移数据分析菜单
This commit is contained in:
扈兆增
parent
a948f0bb8d
commit
cb2ea9f29f
6
frontend/src/assets/svg/basicInfo.svg
Normal file
6
frontend/src/assets/svg/basicInfo.svg
Normal file
@ -0,0 +1,6 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="16px" height="16px" xmlns="http://www.w3.org/2000/svg">
|
||||
<g transform="matrix(1 0 0 1 -1858 -108 )">
|
||||
<path d="M 0.89038789844335 0 L 10.9513354812796 0 C 11.1287252776408 0 11.2174193247947 0.0886947998772105 11.3061150796195 0.177389650310463 L 11.3948099806087 0.266084455805011 L 14.4104339965652 3.45909741428739 C 14.5878237929264 3.6364869971898 14.6765186939158 3.81387679916839 14.6765186939158 4.07996106960125 L 14.6765186939158 8.69209156199027 C 14.6765186939158 9.0468711603301 14.4104339965652 9.31295500384528 14.0556543982254 9.31295500384528 C 13.7008747998855 9.31295500384528 13.4347909563703 9.0468711603301 13.4347909563703 8.69209156199027 L 13.4347909563703 5.23299390615734 L 10.5965567423925 5.23299390615734 C 10.1530822430634 5.23299390615734 9.70960946263972 4.87821473473519 9.62091456165035 4.34604576695179 L 9.62091456165035 1.33042209927024 L 1.24516733949781 1.33042209927024 L 1.24516733949781 14.6346450355716 L 9.00004994577171 14.6346450355716 C 9.35482954411145 14.6346450355716 9.62091338762662 14.9007280196341 9.62091338762662 15.2555076179739 L 9.62091338762662 15.3442025189632 C 9.62091338762662 15.698982117303 9.35482954411145 15.9650668146536 9.08874399292563 15.9650668146536 L 0.979082855606066 15.9650668146536 C 0.535608732638593 15.9650668146536 0.092134716400551 15.6102872163137 0 15.0781195349007 L 0 0.975642933465427 C 0.00343992214061473 0.443474044324756 0.35821911603216 0 0.89038789844335 0 Z M 13.1687062590199 3.99126662361633 L 10.9513354868971 1.59650647643252 L 10.9513354868971 3.99126662361633 L 13.1687054051845 3.99126662361633 Z M 12.7252317596908 10.2885980608921 C 13.6121798988963 10.2885980608921 14.4991288919373 10.7320725602213 14.9426033912664 11.5303257984375 C 15.3860778905955 12.3285790366538 15.3860778905955 13.3042220768486 14.9426033912664 14.1024753150649 L 15.7408557756471 14.9007276994458 C 16.0069404729977 15.1668123967963 16.0069404729977 15.5215919951362 15.7408557756471 15.7876766924867 C 15.4747727915847 16.0537596765492 15.1199914799568 16.0537596765492 14.8539084958943 15.8763698801879 L 14.7652135949052 15.7876766924867 L 13.9669603566888 14.9894225948178 C 13.080013076936 15.5215919895188 11.9269802403799 15.4328970941469 11.0400312417216 14.8120327984565 C 10.2417780035053 14.1024753150649 9.88699840516551 13.0381373794981 10.2417780035053 11.9738002977667 C 10.6852525028344 10.9981581170245 11.6608946835765 10.2885980608921 12.725233478596 10.2885980608921 Z M 13.9669594972361 12.7720535416003 C 13.9669594972361 12.0624952043733 13.3460960553812 11.5303257984375 12.7252317596908 11.5303257984375 C 12.2817581198142 11.5303257984375 11.8382844799378 11.7964096419527 11.6608938241238 12.1511892402925 C 11.3948099806087 12.5059688386324 11.3948099806087 13.0381373794981 11.6608938241238 13.3929169778379 C 11.9269785214744 13.7476965761778 12.2817581198142 14.0137804196929 12.7252317596908 14.0137804196929 C 13.4347909563703 14.0137804196929 13.9669594972361 13.4816118788272 13.9669594972361 12.7720535416003 Z M 3.12549730248907 5.36519114038518 C 3.21419198440231 4.92030965519137 3.39158199983967 4.69786826379193 3.83505563971607 4.69786826379193 L 7.95345164763125 4.69786826379193 C 8.39692528750766 4.69786826379193 8.66300998485826 4.92030964957403 8.66300998485826 5.36519114038518 C 8.66300998485826 5.81007263119633 8.39692528750766 6.03251444389611 7.95345164763125 6.03251444389611 L 3.83505563971607 6.03251444389611 C 3.39158199983967 6.03251444389611 3.12549730248907 5.81007305811402 3.12549730248907 5.36519114038518 Z M 3.21419199001957 8.14570312899906 C 3.21419198440231 7.81204254734647 3.39158199983967 7.47838025240581 3.74636117126192 7.47838025240581 L 10.3482113678974 7.47838025240581 C 10.7029909662372 7.47838025240581 10.8803807625984 7.70082035181753 10.8803807625984 8.14570312899906 C 10.8803807625984 8.5905859061806 10.7029909662372 8.81302600559231 10.3482113678974 8.81302600559231 L 3.74636117126192 8.81302600559231 C 3.39158199983967 8.81302600559231 3.21419199001957 8.5905859061806 3.21419199001957 8.14570312899906 Z M 3.12549730248907 11.0374355942365 C 3.21419198440231 10.592553682125 3.39158199983967 10.3701127176432 3.83505563971607 10.3701127176432 L 7.95345164763125 10.3701127176432 C 8.39692528750766 10.3701127176432 8.66300998485826 10.5925536765076 8.66300998485826 11.0374355942365 C 8.66300998485826 11.482318371418 8.39692528750766 11.7047593302824 7.95345164763125 11.7047593302824 L 3.83505563971607 11.7047593302824 C 3.39158199983967 11.7047593302824 3.12549730248907 11.482318371418 3.12549730248907 11.0374355942365 Z " fill-rule="nonzero" fill="#005293" stroke="none" transform="matrix(1 0 0 1 1858 108 )" />
|
||||
</g>
|
||||
</svg>
|
||||
@ -83,32 +83,32 @@ const BasicColumns: Array<any> = [
|
||||
url: '',
|
||||
value: '国家电投集团'
|
||||
},
|
||||
{
|
||||
key: '2950C68264BF494B9C5E1748569D026C',
|
||||
name: '坝址经度(°)',
|
||||
filed: 'lgtd',
|
||||
visible: true,
|
||||
ruleTips: 'a4d3b02a466677324278a9a153fb4adb',
|
||||
type: 'number',
|
||||
toFixed: 6,
|
||||
url: '',
|
||||
unitConfig: ['Other', 'LGTD'],
|
||||
value: '101.184969',
|
||||
vlsr: '大中型电站图册、全国水雨情信息网（黄河中游水电基地）'
|
||||
},
|
||||
{
|
||||
key: '70423E92994B4620A73BA6DCF3861669',
|
||||
name: '坝址纬度(°)',
|
||||
filed: 'lttd',
|
||||
visible: true,
|
||||
ruleTips: 'a4d3b02a466677324278a9a153fb4adb',
|
||||
type: 'number',
|
||||
toFixed: 6,
|
||||
url: '',
|
||||
unitConfig: ['Other', 'LTTD'],
|
||||
value: '36.070816',
|
||||
vlsr: '大中型电站图册、全国水雨情信息网（黄河中游水电基地）'
|
||||
},
|
||||
// {
|
||||
// key: '2950C68264BF494B9C5E1748569D026C',
|
||||
// name: '坝址经度(°)',
|
||||
// filed: 'lgtd',
|
||||
// visible: true,
|
||||
// ruleTips: 'a4d3b02a466677324278a9a153fb4adb',
|
||||
// type: 'number',
|
||||
// toFixed: 6,
|
||||
// url: '',
|
||||
// unitConfig: ['Other', 'LGTD'],
|
||||
// value: '101.184969',
|
||||
// vlsr: '大中型电站图册、全国水雨情信息网（黄河中游水电基地）'
|
||||
// },
|
||||
// {
|
||||
// key: '70423E92994B4620A73BA6DCF3861669',
|
||||
// name: '坝址纬度(°)',
|
||||
// filed: 'lttd',
|
||||
// visible: true,
|
||||
// ruleTips: 'a4d3b02a466677324278a9a153fb4adb',
|
||||
// type: 'number',
|
||||
// toFixed: 6,
|
||||
// url: '',
|
||||
// unitConfig: ['Other', 'LTTD'],
|
||||
// value: '36.070816',
|
||||
// vlsr: '大中型电站图册、全国水雨情信息网（黄河中游水电基地）'
|
||||
// },
|
||||
{
|
||||
key: '3EAC90E681014714A32E425A7C691D7D',
|
||||
name: '建设状态',
|
||||
@ -1910,6 +1910,7 @@ const FPPointColumns2: Array<any> = [
|
||||
filed: 'inv',
|
||||
visible: true,
|
||||
type: 'number',
|
||||
toFixed: 4,
|
||||
url: ''
|
||||
},
|
||||
{
|
||||
@ -2115,6 +2116,7 @@ const FPPointColumns4: Array<any> = [
|
||||
filed: 'inv',
|
||||
visible: true,
|
||||
type: 'number',
|
||||
toFixed: 4,
|
||||
url: ''
|
||||
},
|
||||
{
|
||||
@ -3325,7 +3327,7 @@ const DwPointColumnsyuan: Array<any> = [
|
||||
visible: true,
|
||||
type: 'select',
|
||||
url: ''
|
||||
},
|
||||
}
|
||||
];
|
||||
//夹岩双层取水
|
||||
const DwOnePointColumns: Array<any> = [
|
||||
@ -4871,13 +4873,14 @@ const tableColumns5: Array<any> = [
|
||||
];
|
||||
//气象监测
|
||||
const MMColumns: Array<any> = [
|
||||
{
|
||||
{
|
||||
name: '基本属性',
|
||||
visible: false,
|
||||
ruleTips: '',
|
||||
type: '',
|
||||
url: ''
|
||||
}, {
|
||||
},
|
||||
{
|
||||
name: '测站名称',
|
||||
filed: 'stnm',
|
||||
visible: true,
|
||||
@ -4905,7 +4908,7 @@ const MMColumns: Array<any> = [
|
||||
type: 'select',
|
||||
url: ''
|
||||
},
|
||||
{
|
||||
{
|
||||
name: '所在水系',
|
||||
filed: 'addvcdName',
|
||||
visible: true,
|
||||
@ -4919,7 +4922,7 @@ const MMColumns: Array<any> = [
|
||||
type: 'date',
|
||||
format: 'YYYY-MM-DD',
|
||||
url: ''
|
||||
},
|
||||
}
|
||||
];
|
||||
|
||||
//生态流量
|
||||
|
||||
@ -425,8 +425,8 @@ const getData = async () => {
|
||||
}
|
||||
return stcdItem.attrKey == str;
|
||||
});
|
||||
if (stcdItem && stcdItem.attrKey == 'rgcp') {
|
||||
}
|
||||
// if (stcdItem && stcdItem.attrKey == 'rgcp') {
|
||||
// }
|
||||
if (stcdItem && stcdItem.vlsr) {
|
||||
item.vlsr = stcdItem.vlsr;
|
||||
}
|
||||
|
||||
@ -23,7 +23,7 @@
|
||||
<div class="tab-content">
|
||||
<div class="content-body">
|
||||
<div class="chart-wrapper">
|
||||
<div ref="chartRef" class="chart-container"></div>
|
||||
<MonitorInfoEcharts :data="chartData" :is-active="isActive" />
|
||||
<a-empty
|
||||
v-if="!chartData || chartData.length === 0"
|
||||
description="暂无数据"
|
||||
@ -45,12 +45,12 @@
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref, watch, onBeforeUnmount, onMounted, nextTick } from 'vue';
|
||||
import { ref, watch } from 'vue';
|
||||
import dayjs, { Dayjs } from 'dayjs';
|
||||
import * as echarts from 'echarts';
|
||||
import { getMonitorData } from '@/api/mapModal';
|
||||
import { useModelStore } from '@/store/modules/model';
|
||||
import BasicTable from '@/components/BasicTable/index.vue';
|
||||
import MonitorInfoEcharts from '../componentsEcharts/MonitorInfoEcharts.vue';
|
||||
import { DateSetting } from '@/utils/enumeration';
|
||||
|
||||
const modelStore = useModelStore();
|
||||
@ -63,8 +63,6 @@ const hasLoaded = ref(false);
|
||||
const isLoading = ref(false);
|
||||
const tableData = ref<any[]>([]);
|
||||
const chartData = ref<any[]>([]);
|
||||
const chartRef = ref<HTMLElement>();
|
||||
let chartInstance: echarts.ECharts | null = null;
|
||||
|
||||
const tabsList = [{ name: '电站运行过程线', key: 'dzxq.tabs.jcsj' }];
|
||||
const activeTabKey = ref('dzxq.tabs.jcsj');
|
||||
@ -139,283 +137,6 @@ const tableColumns = [
|
||||
];
|
||||
const tableScrollX = tableColumns.reduce((s, c) => s + (c.width || 100), 0);
|
||||
|
||||
// 初始化图表
|
||||
const initChart = () => {
|
||||
if (!chartRef.value) return;
|
||||
if (chartInstance) chartInstance.dispose();
|
||||
chartInstance = echarts.init(chartRef.value);
|
||||
updateChart(chartData.value);
|
||||
};
|
||||
|
||||
// 更新图表
|
||||
const updateChart = (data: any[]) => {
|
||||
if (!chartInstance) return;
|
||||
if (!data || data.length === 0) {
|
||||
chartInstance.clear();
|
||||
return;
|
||||
}
|
||||
|
||||
const sorted = [...data].sort(
|
||||
(a, b) => new Date(a.tm).getTime() - new Date(b.tm).getTime()
|
||||
);
|
||||
|
||||
const xAxisData = sorted.map(item => {
|
||||
const hm = dayjs(item.tm).format('HH:mm');
|
||||
if (hm === '00:00') {
|
||||
const date = dayjs(item.tm).format('MM-DD');
|
||||
return `${hm}\n${date}`;
|
||||
}
|
||||
return hm;
|
||||
});
|
||||
|
||||
const rzData = sorted.map(item => item.rz);
|
||||
const dzData = sorted.map(item => item.dz);
|
||||
const qiData = sorted.map(item => item.qi);
|
||||
const qoData = sorted.map(item => item.qo);
|
||||
const qecData = sorted.map(item => item.qec);
|
||||
const qecLimitData = sorted.map(item => item.qecLimit);
|
||||
|
||||
const waterValues = [...rzData, ...dzData].filter(
|
||||
v => v !== null && v !== undefined
|
||||
);
|
||||
const waterMin = waterValues.length > 0 ? Math.min(...waterValues) : 0;
|
||||
const waterMax = waterValues.length > 0 ? Math.max(...waterValues) : 10;
|
||||
|
||||
const flowValues = [...qiData, ...qoData, ...qecData, ...qecLimitData].filter(
|
||||
v => v !== null && v !== undefined
|
||||
);
|
||||
const flowMin = flowValues.length > 0 ? Math.min(...flowValues) : 0;
|
||||
const flowMax = flowValues.length > 0 ? Math.max(...flowValues) : 10;
|
||||
|
||||
const formatRules: Record<
|
||||
string,
|
||||
{ format: (v: number) => string; unit: string }
|
||||
> = {
|
||||
坝上水位: { format: v => v.toFixed(2), unit: '(m)' },
|
||||
坝下水位: { format: v => v.toFixed(2), unit: '(m)' },
|
||||
入库流量: { format: v => String(Math.round(v)), unit: '(m³/s)' },
|
||||
出库流量: { format: v => String(Number(v)), unit: '(m³/s)' },
|
||||
生态流量: { format: v => v.toFixed(1), unit: '(m³/s)' },
|
||||
生态流量限值: { format: v => v.toFixed(1), unit: '(m³/s)' }
|
||||
};
|
||||
|
||||
const option = {
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
backgroundColor: 'rgba(50, 50, 50, 0.9)',
|
||||
textStyle: { color: '#fff', fontSize: 12 },
|
||||
axisPointer: { type: 'cross' },
|
||||
formatter: (params: any) => {
|
||||
if (!params || params.length === 0) return '';
|
||||
const dataIndex = params[0].dataIndex;
|
||||
const fullTime = sorted[dataIndex]?.tm
|
||||
? dayjs(sorted[dataIndex].tm).format('YYYY-MM-DD HH:mm:ss')
|
||||
: '';
|
||||
let html = `<div style="font-size:16px;margin-bottom:8px;">${fullTime}</div>`;
|
||||
params.forEach((param: any) => {
|
||||
if (param.value == null) return;
|
||||
const rule = Object.entries(formatRules).find(([key]) =>
|
||||
param.seriesName.includes(key)
|
||||
);
|
||||
const displayValue = rule
|
||||
? rule[1].format(Number(param.value))
|
||||
: param.value;
|
||||
const unit = rule ? rule[1].unit : '';
|
||||
html += `
|
||||
<div style="display:flex;align-items:center;justify-content:space-between;margin:4px 0;">
|
||||
<span style="display:inline-block;width:10px;height:10px;border-radius:50%;background:${param.color};margin-right:8px;"></span>
|
||||
<span style="flex:1;font-size:14px;text-align:left;margin-right:6px;">${param.seriesName}: </span>
|
||||
<span style="font-size:14px;min-width:60px;text-align:right;"><strong>${displayValue}</strong> ${unit}</span>
|
||||
</div>
|
||||
`;
|
||||
});
|
||||
return html;
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
type: 'scroll',
|
||||
top: 10,
|
||||
data: [
|
||||
'坝上水位',
|
||||
'坝下水位',
|
||||
'入库流量',
|
||||
'出库流量',
|
||||
'生态流量',
|
||||
'生态流量限值'
|
||||
],
|
||||
textStyle: { fontSize: 12 },
|
||||
selected: {
|
||||
坝上水位: false,
|
||||
坝下水位: false,
|
||||
入库流量: true,
|
||||
出库流量: true,
|
||||
生态流量: false,
|
||||
生态流量限值: false
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
left: 60,
|
||||
right: 60,
|
||||
top: 80,
|
||||
bottom: 60
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: xAxisData,
|
||||
axisLine: { lineStyle: { color: '#000000' } },
|
||||
axisTick: { show: false },
|
||||
axisLabel: { fontSize: 12 },
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: { color: '#bfbfbf', type: 'solid' }
|
||||
}
|
||||
},
|
||||
yAxis: [
|
||||
{
|
||||
name: '水位(m)',
|
||||
type: 'value',
|
||||
position: 'left',
|
||||
axisLine: { lineStyle: { color: '#000000' } },
|
||||
alignTicks: true,
|
||||
scale: true,
|
||||
splitNumber: 9
|
||||
// boundaryGap: ['10%', 0]
|
||||
},
|
||||
{
|
||||
name: '流量(m³/s)',
|
||||
type: 'value',
|
||||
position: 'right',
|
||||
axisLine: { lineStyle: { color: '#000000' } },
|
||||
splitNumber: 9
|
||||
// boundaryGap: ['10%', 0]
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: '坝上水位',
|
||||
type: 'line',
|
||||
yAxisIndex: 0,
|
||||
data: rzData,
|
||||
smooth: true,
|
||||
symbol: 'circle',
|
||||
symbolSize: 4,
|
||||
lineStyle: { color: '#56C2E3', width: 2 },
|
||||
itemStyle: { color: '#56C2E3' },
|
||||
markPoint: {
|
||||
data: [
|
||||
{ type: 'max', name: 'Max' },
|
||||
{ type: 'min', name: 'Min' }
|
||||
]
|
||||
}
|
||||
},
|
||||
{
|
||||
name: '坝下水位',
|
||||
type: 'line',
|
||||
yAxisIndex: 0,
|
||||
data: dzData,
|
||||
smooth: true,
|
||||
symbol: 'circle',
|
||||
symbolSize: 4,
|
||||
lineStyle: { color: '#7399C6', width: 2 },
|
||||
itemStyle: { color: '#7399C6' },
|
||||
markPoint: {
|
||||
data: [
|
||||
{ type: 'max', name: 'Max' },
|
||||
{ type: 'min', name: 'Min' }
|
||||
]
|
||||
}
|
||||
},
|
||||
{
|
||||
name: '入库流量',
|
||||
type: 'line',
|
||||
yAxisIndex: 1,
|
||||
data: qiData,
|
||||
smooth: true,
|
||||
symbol: 'circle',
|
||||
symbolSize: 4,
|
||||
lineStyle: { color: '#4B79AB', width: 2 },
|
||||
itemStyle: { color: '#4B79AB' },
|
||||
markPoint: {
|
||||
data: [
|
||||
{ type: 'max', name: 'Max' },
|
||||
{ type: 'min', name: 'Min' }
|
||||
]
|
||||
}
|
||||
},
|
||||
{
|
||||
name: '出库流量',
|
||||
type: 'line',
|
||||
yAxisIndex: 1,
|
||||
data: qoData,
|
||||
smooth: true,
|
||||
symbol: 'circle',
|
||||
symbolSize: 4,
|
||||
lineStyle: { color: '#78C300', width: 2 },
|
||||
itemStyle: { color: '#78C300' },
|
||||
markPoint: {
|
||||
data: [
|
||||
{ type: 'max', name: 'Max' },
|
||||
{ type: 'min', name: 'Min' }
|
||||
]
|
||||
}
|
||||
},
|
||||
{
|
||||
name: '生态流量',
|
||||
type: 'line',
|
||||
yAxisIndex: 1,
|
||||
data: qecData,
|
||||
smooth: true,
|
||||
symbol: 'circle',
|
||||
symbolSize: 4,
|
||||
lineStyle: { color: '#00A050', width: 2 },
|
||||
itemStyle: { color: '#00A050' },
|
||||
markPoint: {
|
||||
data: [
|
||||
{ type: 'max', name: 'Max' },
|
||||
{ type: 'min', name: 'Min' }
|
||||
]
|
||||
}
|
||||
},
|
||||
{
|
||||
name: '生态流量限值',
|
||||
type: 'line',
|
||||
yAxisIndex: 1,
|
||||
data: qecLimitData,
|
||||
smooth: true,
|
||||
symbol: 'circle',
|
||||
symbolSize: 4,
|
||||
lineStyle: { color: '#F7A737', width: 2 },
|
||||
itemStyle: { color: '#F7A737' },
|
||||
markPoint: {
|
||||
data: [
|
||||
{ type: 'max', name: 'Max' },
|
||||
{ type: 'min', name: 'Min' }
|
||||
]
|
||||
}
|
||||
}
|
||||
],
|
||||
dataZoom: [
|
||||
{
|
||||
type: 'inside',
|
||||
xAxisIndex: [0],
|
||||
throttle: 50,
|
||||
start: 0,
|
||||
end: 100
|
||||
}
|
||||
],
|
||||
toolbox: {
|
||||
show: true,
|
||||
feature: {
|
||||
saveAsImage: { title: '保存为图片', type: 'png', pixelRatio: 2 }
|
||||
},
|
||||
right: 20,
|
||||
top: 10
|
||||
}
|
||||
};
|
||||
|
||||
chartInstance.setOption(option, true);
|
||||
};
|
||||
|
||||
// 数据请求
|
||||
const fetchData = async () => {
|
||||
if (!dateRange.value) return;
|
||||
@ -454,12 +175,10 @@ const fetchData = async () => {
|
||||
|
||||
tableData.value = [...rawData].reverse();
|
||||
chartData.value = rawData;
|
||||
nextTick(() => updateChart(rawData));
|
||||
} catch (error) {
|
||||
console.error('获取数据失败:', error);
|
||||
tableData.value = [];
|
||||
chartData.value = [];
|
||||
if (chartInstance) chartInstance.clear();
|
||||
} finally {
|
||||
isLoading.value = false;
|
||||
}
|
||||
@ -469,7 +188,6 @@ const handleSearch = () => fetchData();
|
||||
|
||||
const initData = () => {
|
||||
if (hasLoaded.value) return;
|
||||
nextTick(() => initChart());
|
||||
fetchData();
|
||||
hasLoaded.value = true;
|
||||
};
|
||||
@ -489,52 +207,21 @@ watch(
|
||||
}
|
||||
);
|
||||
|
||||
let resizeObserver: ResizeObserver | null = null;
|
||||
|
||||
// 激活时同步全局时间范围到本地日期选择器
|
||||
watch(
|
||||
() => props.isActive,
|
||||
active => {
|
||||
if (active && chartRef.value) {
|
||||
console.log(modelStore.filter.rangeTm);
|
||||
if (!active) return;
|
||||
console.log(modelStore.filter.rangeTm);
|
||||
|
||||
if (modelStore.filter.rangeTm.length > 0) {
|
||||
dateRange.value = [
|
||||
dayjs(modelStore.filter.rangeTm[0]),
|
||||
dayjs(modelStore.filter.rangeTm[1])
|
||||
];
|
||||
}
|
||||
setTimeout(() => {
|
||||
if (chartInstance) chartInstance.resize();
|
||||
}, 200);
|
||||
if (!resizeObserver) {
|
||||
resizeObserver = new ResizeObserver(() => {
|
||||
if (chartInstance) chartInstance.resize();
|
||||
});
|
||||
resizeObserver.observe(chartRef.value);
|
||||
}
|
||||
if (modelStore.filter.rangeTm.length > 0) {
|
||||
dateRange.value = [
|
||||
dayjs(modelStore.filter.rangeTm[0]),
|
||||
dayjs(modelStore.filter.rangeTm[1])
|
||||
];
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
const handleResize = () => {
|
||||
if (chartInstance) chartInstance.resize();
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
window.addEventListener('resize', handleResize);
|
||||
});
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
if (chartInstance) {
|
||||
chartInstance.dispose();
|
||||
chartInstance = null;
|
||||
}
|
||||
window.removeEventListener('resize', handleResize);
|
||||
if (resizeObserver) {
|
||||
resizeObserver.disconnect();
|
||||
resizeObserver = null;
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@ -574,11 +261,6 @@ onBeforeUnmount(() => {
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
padding-top: 10px;
|
||||
|
||||
.chart-container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.chart-empty {
|
||||
|
||||
@ -0,0 +1,340 @@
|
||||
<template>
|
||||
<div ref="chartRef" class="chart-container"></div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref, watch, onBeforeUnmount, onMounted, nextTick } from 'vue';
|
||||
import dayjs from 'dayjs';
|
||||
import * as echarts from 'echarts';
|
||||
|
||||
const props = defineProps({
|
||||
data: { type: Array as () => any[], default: () => [] },
|
||||
isActive: { type: Boolean, default: false }
|
||||
});
|
||||
|
||||
const chartRef = ref<HTMLElement>();
|
||||
let chartInstance: echarts.ECharts | null = null;
|
||||
let resizeObserver: ResizeObserver | null = null;
|
||||
|
||||
// 初始化图表
|
||||
const initChart = () => {
|
||||
if (!chartRef.value) return;
|
||||
if (chartInstance) chartInstance.dispose();
|
||||
chartInstance = echarts.init(chartRef.value);
|
||||
updateChart(props.data);
|
||||
};
|
||||
|
||||
// 更新图表
|
||||
const updateChart = (data: any[]) => {
|
||||
if (!chartInstance) return;
|
||||
if (!data || data.length === 0) {
|
||||
chartInstance.clear();
|
||||
return;
|
||||
}
|
||||
|
||||
const sorted = [...data].sort(
|
||||
(a, b) => new Date(a.tm).getTime() - new Date(b.tm).getTime()
|
||||
);
|
||||
|
||||
const xAxisData = sorted.map(item => {
|
||||
const hm = dayjs(item.tm).format('HH:mm');
|
||||
if (hm === '00:00') {
|
||||
const date = dayjs(item.tm).format('MM-DD');
|
||||
return `${hm}\n${date}`;
|
||||
}
|
||||
return hm;
|
||||
});
|
||||
|
||||
const rzData = sorted.map(item => item.rz);
|
||||
const dzData = sorted.map(item => item.dz);
|
||||
const qiData = sorted.map(item => item.qi);
|
||||
const qoData = sorted.map(item => item.qo);
|
||||
const qecData = sorted.map(item => item.qec);
|
||||
const qecLimitData = sorted.map(item => item.qecLimit);
|
||||
|
||||
const formatRules: Record<
|
||||
string,
|
||||
{ format: (v: number) => string; unit: string }
|
||||
> = {
|
||||
坝上水位: { format: v => v.toFixed(2), unit: '(m)' },
|
||||
坝下水位: { format: v => v.toFixed(2), unit: '(m)' },
|
||||
入库流量: { format: v => String(Math.round(v)), unit: '(m³/s)' },
|
||||
出库流量: { format: v => String(Number(v)), unit: '(m³/s)' },
|
||||
生态流量: { format: v => v.toFixed(1), unit: '(m³/s)' },
|
||||
生态流量限值: { format: v => v.toFixed(1), unit: '(m³/s)' }
|
||||
};
|
||||
|
||||
const option = {
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
backgroundColor: 'rgba(50, 50, 50, 0.9)',
|
||||
textStyle: { color: '#fff', fontSize: 12 },
|
||||
axisPointer: { type: 'cross' },
|
||||
formatter: (params: any) => {
|
||||
if (!params || params.length === 0) return '';
|
||||
const dataIndex = params[0].dataIndex;
|
||||
const fullTime = sorted[dataIndex]?.tm
|
||||
? dayjs(sorted[dataIndex].tm).format('YYYY-MM-DD HH:mm:ss')
|
||||
: '';
|
||||
let html = `<div style="font-size:16px;margin-bottom:8px;">${fullTime}</div>`;
|
||||
params.forEach((param: any) => {
|
||||
if (param.value == null) return;
|
||||
const rule = Object.entries(formatRules).find(([key]) =>
|
||||
param.seriesName.includes(key)
|
||||
);
|
||||
const displayValue = rule
|
||||
? rule[1].format(Number(param.value))
|
||||
: param.value;
|
||||
const unit = rule ? rule[1].unit : '';
|
||||
html += `
|
||||
<div style="display:flex;align-items:center;justify-content:space-between;margin:4px 0;">
|
||||
<span style="display:inline-block;width:10px;height:10px;border-radius:50%;background:${param.color};margin-right:8px;"></span>
|
||||
<span style="flex:1;font-size:14px;text-align:left;margin-right:6px;">${param.seriesName}: </span>
|
||||
<span style="font-size:14px;min-width:60px;text-align:right;"><strong>${displayValue}</strong> ${unit}</span>
|
||||
</div>
|
||||
`;
|
||||
});
|
||||
return html;
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
type: 'scroll',
|
||||
top: 10,
|
||||
right: 60,
|
||||
width: '80%',
|
||||
data: [
|
||||
'坝上水位',
|
||||
'坝下水位',
|
||||
'入库流量',
|
||||
'出库流量',
|
||||
'生态流量',
|
||||
'生态流量限值'
|
||||
],
|
||||
textStyle: { fontSize: 12 },
|
||||
selected: {
|
||||
坝上水位: false,
|
||||
坝下水位: false,
|
||||
入库流量: true,
|
||||
出库流量: true,
|
||||
生态流量: false,
|
||||
生态流量限值: false
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
left: 60,
|
||||
right: 60,
|
||||
top: 80,
|
||||
bottom: 60
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: xAxisData,
|
||||
axisLine: { lineStyle: { color: '#000000' } },
|
||||
axisTick: { show: false },
|
||||
axisLabel: { fontSize: 12 },
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: { color: '#bfbfbf', type: 'solid' }
|
||||
}
|
||||
},
|
||||
yAxis: [
|
||||
{
|
||||
name: '水位(m)',
|
||||
type: 'value',
|
||||
position: 'left',
|
||||
axisLine: { lineStyle: { color: '#000000' } },
|
||||
alignTicks: true,
|
||||
scale: true,
|
||||
splitNumber: 9
|
||||
// boundaryGap: ['10%', 0]
|
||||
},
|
||||
{
|
||||
name: '流量(m³/s)',
|
||||
type: 'value',
|
||||
position: 'right',
|
||||
axisLine: { lineStyle: { color: '#000000' } },
|
||||
splitNumber: 9
|
||||
// boundaryGap: ['10%', 0]
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: '坝上水位',
|
||||
type: 'line',
|
||||
yAxisIndex: 0,
|
||||
data: rzData,
|
||||
smooth: true,
|
||||
symbol: 'circle',
|
||||
symbolSize: 4,
|
||||
lineStyle: { color: '#56C2E3', width: 2 },
|
||||
itemStyle: { color: '#56C2E3' },
|
||||
markPoint: {
|
||||
data: [
|
||||
{ type: 'max', name: 'Max' },
|
||||
{ type: 'min', name: 'Min' }
|
||||
]
|
||||
}
|
||||
},
|
||||
{
|
||||
name: '坝下水位',
|
||||
type: 'line',
|
||||
yAxisIndex: 0,
|
||||
data: dzData,
|
||||
smooth: true,
|
||||
symbol: 'circle',
|
||||
symbolSize: 4,
|
||||
lineStyle: { color: '#7399C6', width: 2 },
|
||||
itemStyle: { color: '#7399C6' },
|
||||
markPoint: {
|
||||
data: [
|
||||
{ type: 'max', name: 'Max' },
|
||||
{ type: 'min', name: 'Min' }
|
||||
]
|
||||
}
|
||||
},
|
||||
{
|
||||
name: '入库流量',
|
||||
type: 'line',
|
||||
yAxisIndex: 1,
|
||||
data: qiData,
|
||||
smooth: true,
|
||||
symbol: 'circle',
|
||||
symbolSize: 4,
|
||||
lineStyle: { color: '#4B79AB', width: 2 },
|
||||
itemStyle: { color: '#4B79AB' },
|
||||
markPoint: {
|
||||
data: [
|
||||
{ type: 'max', name: 'Max' },
|
||||
{ type: 'min', name: 'Min' }
|
||||
]
|
||||
}
|
||||
},
|
||||
{
|
||||
name: '出库流量',
|
||||
type: 'line',
|
||||
yAxisIndex: 1,
|
||||
data: qoData,
|
||||
smooth: true,
|
||||
symbol: 'circle',
|
||||
symbolSize: 4,
|
||||
lineStyle: { color: '#78C300', width: 2 },
|
||||
itemStyle: { color: '#78C300' },
|
||||
markPoint: {
|
||||
data: [
|
||||
{ type: 'max', name: 'Max' },
|
||||
{ type: 'min', name: 'Min' }
|
||||
]
|
||||
}
|
||||
},
|
||||
{
|
||||
name: '生态流量',
|
||||
type: 'line',
|
||||
yAxisIndex: 1,
|
||||
data: qecData,
|
||||
smooth: true,
|
||||
symbol: 'circle',
|
||||
symbolSize: 4,
|
||||
lineStyle: { color: '#00A050', width: 2 },
|
||||
itemStyle: { color: '#00A050' },
|
||||
markPoint: {
|
||||
data: [
|
||||
{ type: 'max', name: 'Max' },
|
||||
{ type: 'min', name: 'Min' }
|
||||
]
|
||||
}
|
||||
},
|
||||
{
|
||||
name: '生态流量限值',
|
||||
type: 'line',
|
||||
yAxisIndex: 1,
|
||||
data: qecLimitData,
|
||||
smooth: true,
|
||||
symbol: 'circle',
|
||||
symbolSize: 4,
|
||||
lineStyle: { color: '#F7A737', width: 2 },
|
||||
itemStyle: { color: '#F7A737' },
|
||||
markPoint: {
|
||||
data: [
|
||||
{ type: 'max', name: 'Max' },
|
||||
{ type: 'min', name: 'Min' }
|
||||
]
|
||||
}
|
||||
}
|
||||
],
|
||||
dataZoom: [
|
||||
{
|
||||
type: 'inside',
|
||||
xAxisIndex: [0],
|
||||
throttle: 50,
|
||||
start: 0,
|
||||
end: 100
|
||||
}
|
||||
],
|
||||
toolbox: {
|
||||
show: true,
|
||||
feature: {
|
||||
saveAsImage: { title: '保存为图片', type: 'png', pixelRatio: 2 }
|
||||
},
|
||||
right: 20,
|
||||
top: 10
|
||||
}
|
||||
};
|
||||
|
||||
chartInstance.setOption(option, true);
|
||||
};
|
||||
|
||||
// 激活时初始化图表并处理自适应，数据变化时动态刷新
|
||||
watch(
|
||||
() => props.isActive,
|
||||
active => {
|
||||
if (!active) return;
|
||||
nextTick(() => {
|
||||
initChart();
|
||||
setTimeout(() => {
|
||||
if (chartInstance) chartInstance.resize();
|
||||
}, 200);
|
||||
if (!resizeObserver && chartRef.value) {
|
||||
resizeObserver = new ResizeObserver(() => {
|
||||
if (chartInstance) chartInstance.resize();
|
||||
});
|
||||
resizeObserver.observe(chartRef.value);
|
||||
}
|
||||
});
|
||||
},
|
||||
{ immediate: true }
|
||||
);
|
||||
|
||||
watch(
|
||||
() => props.data,
|
||||
newData => {
|
||||
updateChart(newData);
|
||||
}
|
||||
);
|
||||
|
||||
const handleResize = () => {
|
||||
if (chartInstance) chartInstance.resize();
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
window.addEventListener('resize', handleResize);
|
||||
});
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
if (chartInstance) {
|
||||
chartInstance.dispose();
|
||||
chartInstance = null;
|
||||
}
|
||||
window.removeEventListener('resize', handleResize);
|
||||
if (resizeObserver) {
|
||||
resizeObserver.disconnect();
|
||||
resizeObserver = null;
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.chart-container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
@ -51,6 +51,7 @@
|
||||
<img v-if="isExpand" src="@/assets/components/arrow-up.png" alt="" />
|
||||
<img v-else src="@/assets/components/arrow-down.png" alt="" />
|
||||
</div>
|
||||
<slot name="title-right-content"></slot>
|
||||
<div v-if="moreSelect.show">
|
||||
<a-tree-select
|
||||
v-model:value="moreSelectValue"
|
||||
|
||||
@ -2130,7 +2130,7 @@ export class MapCesium implements MapInterface {
|
||||
if (!this.viewer || !layerConfig?.key) return;
|
||||
|
||||
// 基地裁切配置存储（与 2D 对齐：layer.type === 'vector' && layer.key === 'hydropBase'）
|
||||
if (layerConfig.type === 'vector' && layerConfig.key === 'hydropBase') {
|
||||
if (layerConfig.type === 'vector' && layerConfig.id === 'hydropBase') {
|
||||
this.hydropBaseConfig = layerConfig;
|
||||
return;
|
||||
}
|
||||
@ -2598,16 +2598,19 @@ export class MapCesium implements MapInterface {
|
||||
_regionId: string,
|
||||
isAll: boolean
|
||||
): Promise<void> {
|
||||
console.log(_regionId, isAll);
|
||||
if (!this.viewer || !this.hydropBaseConfig) {
|
||||
console.warn('地图未初始化或 hydropBaseConfig 未配置');
|
||||
return;
|
||||
}
|
||||
console.log(_regionId, isAll);
|
||||
|
||||
// 取消正在进行的裁切请求
|
||||
if (this.clipRequestController) {
|
||||
this.clipRequestController.abort();
|
||||
this.clipRequestController = null;
|
||||
}
|
||||
console.log(this.BASEID);
|
||||
|
||||
this.BASEID = _regionId;
|
||||
|
||||
|
||||
@ -205,7 +205,6 @@ export class MapOl implements MapInterface {
|
||||
}
|
||||
this.popupManager.showPopup(undefined, undefined);
|
||||
this.popupManager.handleMapClick(evt.pixel, detectedFeature => {
|
||||
console.log(detectedFeature);
|
||||
if (detectedFeature.values_.sttpMap == 'ylfb') {
|
||||
modelStore.ylfbModalVisible = true;
|
||||
modelStore.params = detectedFeature.values_;
|
||||
@ -1876,6 +1875,8 @@ export class MapOl implements MapInterface {
|
||||
this.layerRegistry.delete(layer.key);
|
||||
}
|
||||
|
||||
console.log(layer);
|
||||
|
||||
if (layer.type === 'wmts') {
|
||||
if (!layer.url) return;
|
||||
const url = !isCache ? layer.url : layer.url_3d;
|
||||
@ -1993,7 +1994,8 @@ export class MapOl implements MapInterface {
|
||||
this.layerRegistry.set(layer.key, tileLayer);
|
||||
this.map.addLayer(tileLayer);
|
||||
} else if (layer.type === 'vector') {
|
||||
if (layer.key === 'hydropBase') {
|
||||
console.log(layer);
|
||||
if (layer.id === 'hydropBase') {
|
||||
this.hydropBaseConfig = layer;
|
||||
}
|
||||
}
|
||||
@ -2089,15 +2091,19 @@ export class MapOl implements MapInterface {
|
||||
_regionId: string,
|
||||
isAll: boolean
|
||||
): Promise<void> {
|
||||
console.log(_regionId, isAll);
|
||||
console.log(_regionId, this.hydropBaseConfig);
|
||||
if (!this.map || !this.hydropBaseConfig) {
|
||||
console.warn('地图未初始化或 hydropBaseConfig 未配置');
|
||||
return;
|
||||
}
|
||||
console.log(123, 444);
|
||||
|
||||
if (this.clipRequestController) {
|
||||
this.clipRequestController.abort();
|
||||
this.clipRequestController = null;
|
||||
}
|
||||
console.log(this.BASEID);
|
||||
|
||||
this.BASEID = _regionId;
|
||||
|
||||
|
||||
@ -125,6 +125,7 @@ import { useMapViewStore } from '@/modules/map/stores/map-view.store';
|
||||
import { useJidiSelectEventStore } from '@/store/modules/jidiSelectEvent';
|
||||
import { useUiStore } from '@/store/modules/ui';
|
||||
import { useMapStore } from '@/store/modules/map';
|
||||
import { useModelStore } from '@/store/modules/model';
|
||||
import { DateSetting } from '@/utils/enumeration';
|
||||
import { getFishList, getFishPointList } from '@/api/map';
|
||||
|
||||
@ -135,6 +136,7 @@ const mapViewStore = useMapViewStore();
|
||||
const uiStore = useUiStore();
|
||||
const jidiSelectEventStore = useJidiSelectEventStore();
|
||||
const mapStore = useMapStore();
|
||||
const modelStore = useModelStore();
|
||||
const mapClass = MapClass.getInstance();
|
||||
const ENG_POINT_LAYER_KEY = 'eng_point';
|
||||
const YLFB_POINT_LAYER_KEY = 'ylfb_point';
|
||||
@ -206,6 +208,15 @@ const anchorPointSelectValue = computed({
|
||||
}
|
||||
});
|
||||
|
||||
// 备注：下拉检索选中点位后同步到 modelStore.selectedAnchorPoint，供基本信息等面板消费。
|
||||
watch(anchorPointSelectValue, value => {
|
||||
if (!value) return;
|
||||
const matched = anchorPointOptions.value.find(item => item.stcd === value);
|
||||
if (matched) {
|
||||
modelStore.selectedAnchorPoint = matched;
|
||||
}
|
||||
});
|
||||
|
||||
// 备注：切页时只重置本地表单输入，并通过编排器复位时间范围，不再直接改运行态 store。
|
||||
watch(
|
||||
() => route.path,
|
||||
@ -220,6 +231,7 @@ watch(
|
||||
anchorPointSelect: null,
|
||||
fishSurveyZhuanZhi: false
|
||||
};
|
||||
handleSearch(false);
|
||||
resetFishSurveyState();
|
||||
}
|
||||
);
|
||||
@ -587,6 +599,7 @@ watch(
|
||||
return;
|
||||
}
|
||||
formModel.value.anchorPointSelect = null;
|
||||
handleSearch(false);
|
||||
},
|
||||
{ immediate: true }
|
||||
);
|
||||
@ -628,6 +641,7 @@ watch(
|
||||
|
||||
const handleCapacityChange = (value: string) => {
|
||||
formModel.value.anchorPointSelect = null;
|
||||
handleSearch(false);
|
||||
mapOrchestrator.changeEngPointCapacity(value);
|
||||
};
|
||||
|
||||
@ -645,19 +659,32 @@ const focusSelectedAnchorPoint = () => {
|
||||
return;
|
||||
}
|
||||
|
||||
mapOrchestrator.focusPoint(
|
||||
selectedValue,
|
||||
uiStore.mapType === '3D' ? 8 : 14,
|
||||
isFishSurveyMode.value ? anchorPointOptions.value : undefined
|
||||
);
|
||||
// mapOrchestrator.focusPoint(
|
||||
// selectedValue,
|
||||
// uiStore.mapType === '3D' ? 8 : 14,
|
||||
// isFishSurveyMode.value ? anchorPointOptions.value : undefined
|
||||
// );
|
||||
};
|
||||
|
||||
// 备注：搜索定位只分发定位命令，不在筛选组件里直接操作地图实例。
|
||||
const handleAnchorPointChange = (value: string) => {
|
||||
if (value == null) handleSearch(false);
|
||||
if (!value) return;
|
||||
focusSelectedAnchorPoint();
|
||||
handleSearch(true);
|
||||
};
|
||||
|
||||
// 备注：用 function 声明以提升到作用域顶部，供上方 immediate watch 安全调用。
|
||||
function handleSearch(open: boolean) {
|
||||
if (uiStore.searchDrawerOpen === open) {
|
||||
return;
|
||||
}
|
||||
uiStore.setDrawerOpen(false);
|
||||
setTimeout(() => {
|
||||
uiStore.setSearchDrawerOpen(open);
|
||||
uiStore.setDrawerOpen(true);
|
||||
}, 500);
|
||||
}
|
||||
watch(
|
||||
() => uiStore.mapSwitchCompletedTick,
|
||||
async (newVal, oldVal) => {
|
||||
|
||||
@ -133,6 +133,7 @@ export const useMapOrchestrator = () => {
|
||||
}
|
||||
|
||||
if (!initializedBaseLayerKeys.has(item.key)) {
|
||||
console.log(item.config);
|
||||
mapClass.addBaseDataLayer(item.config, item.checked === 1);
|
||||
initializedBaseLayerKeys.add(item.key);
|
||||
}
|
||||
|
||||
382
frontend/src/modules/rightSearchDrawer/basicInfo/config.ts
Normal file
382
frontend/src/modules/rightSearchDrawer/basicInfo/config.ts
Normal file
@ -0,0 +1,382 @@
|
||||
const ENGInfo = [
|
||||
{
|
||||
label: '电站名称',
|
||||
value: 'ennm',
|
||||
col: 12
|
||||
},
|
||||
{
|
||||
label: '所属基地',
|
||||
value: 'baseName',
|
||||
col: 12
|
||||
},
|
||||
{
|
||||
label: '所在河段',
|
||||
value: 'hbrvcdName',
|
||||
col: 24
|
||||
},
|
||||
{
|
||||
label: '详细地址',
|
||||
value: 'stlc',
|
||||
col: 24
|
||||
},
|
||||
{
|
||||
label: '所属集团',
|
||||
value: 'topHynm',
|
||||
col: 24
|
||||
},
|
||||
{
|
||||
label: '所属公司',
|
||||
value: 'hynm',
|
||||
col: 24
|
||||
},
|
||||
{
|
||||
label: '装机容量(万kW)',
|
||||
value: 'ttpwr',
|
||||
col: 24
|
||||
},
|
||||
{
|
||||
label: '多年平均年发电量(亿kW·h)',
|
||||
value: 'yrge',
|
||||
col: 24
|
||||
},
|
||||
{
|
||||
label: '建设时间',
|
||||
value: 'jcdt',
|
||||
type: 'date',
|
||||
col: 24
|
||||
}
|
||||
];
|
||||
|
||||
const DWInfo = [
|
||||
{
|
||||
label: '设施名称',
|
||||
value: 'stnm',
|
||||
col: 12
|
||||
},
|
||||
{
|
||||
label: '设施类型',
|
||||
value: 'sttpName',
|
||||
col: 12
|
||||
},
|
||||
{
|
||||
label: '所属基地',
|
||||
value: 'baseName',
|
||||
col: 24
|
||||
},
|
||||
{
|
||||
label: '所属流域',
|
||||
value: 'hbrvcdName',
|
||||
col: 24
|
||||
}
|
||||
];
|
||||
|
||||
const EQInfo = [
|
||||
{
|
||||
label: '设施名称',
|
||||
value: 'stnm',
|
||||
col: 24
|
||||
},
|
||||
{
|
||||
label: '所属基地',
|
||||
value: 'baseName',
|
||||
col: 24
|
||||
},
|
||||
{
|
||||
label: '所属电站',
|
||||
value: 'ennm',
|
||||
col: 24
|
||||
}
|
||||
];
|
||||
const FBInfo = [
|
||||
{
|
||||
label: '增殖站名称',
|
||||
value: 'stnm',
|
||||
col: 24
|
||||
},
|
||||
{
|
||||
label: '所属基地',
|
||||
value: 'baseName',
|
||||
col: 24
|
||||
},
|
||||
{
|
||||
label: '所属流域',
|
||||
value: 'hbrvcdName',
|
||||
col: 24
|
||||
},
|
||||
{
|
||||
label: '建成日期',
|
||||
value: 'jcdt',
|
||||
type: 'date',
|
||||
col: 24
|
||||
}
|
||||
];
|
||||
const VPInfo = [
|
||||
{
|
||||
label: '植物园名称',
|
||||
value: 'stnm',
|
||||
col: 24
|
||||
},
|
||||
{
|
||||
label: '站址',
|
||||
value: 'stlc',
|
||||
col: 24
|
||||
},
|
||||
{
|
||||
label: '所属流域',
|
||||
value: 'hbrvcdName',
|
||||
col: 24
|
||||
},
|
||||
{
|
||||
label: '建成日期',
|
||||
value: 'jcdt',
|
||||
type: 'date',
|
||||
col: 12
|
||||
},
|
||||
{
|
||||
label: '面积(km²)',
|
||||
value: 'area',
|
||||
col: 12
|
||||
},
|
||||
{
|
||||
label: '保护对象',
|
||||
value: 'protObj',
|
||||
col: 24
|
||||
},
|
||||
{
|
||||
label: '保护方式',
|
||||
value: 'bhfs',
|
||||
col: 24
|
||||
}
|
||||
];
|
||||
const VAInfo = [
|
||||
{
|
||||
label: '救助站名称',
|
||||
value: 'stnm',
|
||||
col: 24
|
||||
},
|
||||
{
|
||||
label: '站址',
|
||||
value: 'stlc',
|
||||
col: 24
|
||||
},
|
||||
{
|
||||
label: '所属流域',
|
||||
value: 'hbrvcdName',
|
||||
col: 24
|
||||
},
|
||||
{
|
||||
label: '建成日期',
|
||||
value: 'jcdt',
|
||||
type: 'date',
|
||||
col: 12
|
||||
},
|
||||
{
|
||||
label: '保护对象',
|
||||
value: 'protobj',
|
||||
col: 24
|
||||
},
|
||||
{
|
||||
label: '保护方式',
|
||||
value: 'bhfs',
|
||||
col: 24
|
||||
}
|
||||
];
|
||||
const WTInfo = [
|
||||
{
|
||||
label: '测站名称',
|
||||
value: 'stnm',
|
||||
col: 12
|
||||
},
|
||||
{
|
||||
label: '测站类型',
|
||||
value: 'sttpName',
|
||||
col: 12
|
||||
},
|
||||
{
|
||||
label: '建成日期',
|
||||
value: 'jcdt',
|
||||
type: 'date',
|
||||
col: 12
|
||||
},
|
||||
{
|
||||
label: '监测方式',
|
||||
value: 'mwayName',
|
||||
col: 12
|
||||
},
|
||||
{
|
||||
label: '所属流域',
|
||||
value: 'hbrvcdName',
|
||||
col: 24
|
||||
},
|
||||
{
|
||||
label: '所属电站',
|
||||
value: 'ennm',
|
||||
col: 24
|
||||
}
|
||||
];
|
||||
|
||||
const WQInfo = [
|
||||
{
|
||||
label: '测站名称',
|
||||
value: 'stnm',
|
||||
col: 12
|
||||
},
|
||||
{
|
||||
label: '测站类型',
|
||||
value: 'sttpName',
|
||||
col: 12
|
||||
},
|
||||
{
|
||||
label: '水质要求',
|
||||
value: 'wwqtgName',
|
||||
col: 12
|
||||
},
|
||||
{
|
||||
label: '监测方式',
|
||||
value: 'mwayName',
|
||||
col: 12
|
||||
},
|
||||
{
|
||||
label: '类别',
|
||||
value: 'dtinTypeName',
|
||||
col: 12
|
||||
},
|
||||
{
|
||||
label: '建成日期',
|
||||
value: 'jcdt',
|
||||
type: 'date',
|
||||
col: 12
|
||||
},
|
||||
{
|
||||
label: '所属流域',
|
||||
value: 'hbrvcdName',
|
||||
col: 24
|
||||
},
|
||||
{
|
||||
label: '所属电站',
|
||||
value: 'ennm',
|
||||
col: 24
|
||||
},
|
||||
{
|
||||
label: '站址',
|
||||
value: 'stlc',
|
||||
col: 24
|
||||
}
|
||||
];
|
||||
const ZQInfo = [
|
||||
{
|
||||
label: '测站名称',
|
||||
value: 'stnm',
|
||||
col: 12
|
||||
},
|
||||
{
|
||||
label: '测站类型',
|
||||
value: 'sttpName',
|
||||
col: 12
|
||||
},
|
||||
{
|
||||
label: '建成日期',
|
||||
value: 'jcdt',
|
||||
type: 'date',
|
||||
col: 12
|
||||
},
|
||||
{
|
||||
label: '监测方式',
|
||||
value: 'mwayName',
|
||||
col: 12
|
||||
},
|
||||
{
|
||||
label: '所属流域',
|
||||
value: 'hbrvcdName',
|
||||
col: 24
|
||||
},
|
||||
{
|
||||
label: '站址',
|
||||
value: 'stlc',
|
||||
col: 24
|
||||
}
|
||||
];
|
||||
|
||||
const VDInfo = [
|
||||
{
|
||||
label: '监控点名',
|
||||
value: 'stnm',
|
||||
col: 24
|
||||
},
|
||||
{
|
||||
label: '监控内容类型',
|
||||
value: 'sttpName',
|
||||
col: 12
|
||||
},
|
||||
{
|
||||
label: '所属行政区',
|
||||
value: 'addvcdName',
|
||||
col: 24
|
||||
},
|
||||
{
|
||||
label: '所属流域',
|
||||
value: 'hbrvcdName',
|
||||
col: 24
|
||||
},
|
||||
{
|
||||
label: '监控点站址',
|
||||
value: 'stlc',
|
||||
col: 24
|
||||
}
|
||||
];
|
||||
const FHInfo = [
|
||||
// 栖息地
|
||||
{
|
||||
label: '栖息地名称',
|
||||
value: 'stnm',
|
||||
col: 24
|
||||
},
|
||||
{
|
||||
label: '保护对象',
|
||||
value: 'protobj',
|
||||
col: 24
|
||||
},
|
||||
{
|
||||
label: '保护范围',
|
||||
value: 'qxdbhfw',
|
||||
col: 24
|
||||
},
|
||||
{
|
||||
label: '保护方式',
|
||||
value: 'bhfs',
|
||||
col: 24
|
||||
},
|
||||
{
|
||||
label: '保护河流',
|
||||
value: 'bhhl',
|
||||
col: 12
|
||||
},
|
||||
{
|
||||
label: '保护河段',
|
||||
value: 'bhhd',
|
||||
col: 12
|
||||
},
|
||||
{
|
||||
label: '所属流域',
|
||||
value: 'hbrvcdName',
|
||||
col: 24
|
||||
},
|
||||
{
|
||||
label: '站址',
|
||||
value: 'stlc',
|
||||
col: 24
|
||||
}
|
||||
];
|
||||
export {
|
||||
ENGInfo,
|
||||
DWInfo,
|
||||
EQInfo,
|
||||
FBInfo,
|
||||
VPInfo,
|
||||
VAInfo,
|
||||
WTInfo,
|
||||
WQInfo,
|
||||
ZQInfo,
|
||||
VDInfo,
|
||||
FHInfo
|
||||
};
|
||||
139
frontend/src/modules/rightSearchDrawer/basicInfo/index.vue
Normal file
139
frontend/src/modules/rightSearchDrawer/basicInfo/index.vue
Normal file
@ -0,0 +1,139 @@
|
||||
<template>
|
||||
<SidePanelItem title="基本信息" :shrink="false">
|
||||
<template #title-right-content>
|
||||
<img
|
||||
class="w-[15px] h-[15px] cursor-pointer"
|
||||
src="@/assets/svg/basicInfo.svg"
|
||||
@click="iconClick"
|
||||
alt=""
|
||||
/>
|
||||
</template>
|
||||
<a-spin :spinning="loading" style="width: 100%; text-align: center">
|
||||
<a-image v-if="logo" width="100%" height="250px" :src="logo" />
|
||||
<a-form>
|
||||
<a-row class="px-2">
|
||||
<a-col :span="item.col" v-for="(item, index) in formDiv" :key="index">
|
||||
<a-form-item :label="item.label" :title="info[item.value]">
|
||||
<span v-if="item.type == 'date'">
|
||||
{{
|
||||
info[item.value]
|
||||
? dayjs(info[item.value]).format('YYYY-MM-DD')
|
||||
: '-'
|
||||
}}
|
||||
</span>
|
||||
<span v-else>{{ info[item.value] || '-' }} </span>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-form>
|
||||
</a-spin>
|
||||
</SidePanelItem>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import dayjs from 'dayjs';
|
||||
import { ref, watch } from 'vue';
|
||||
import { useModelStore } from '@/store/modules/model';
|
||||
import SidePanelItem from '@/components/SidePanelItem/index.vue';
|
||||
import {
|
||||
ENGInfo,
|
||||
DWInfo,
|
||||
EQInfo,
|
||||
FBInfo,
|
||||
VPInfo,
|
||||
VAInfo,
|
||||
WTInfo,
|
||||
WQInfo,
|
||||
ZQInfo,
|
||||
VDInfo,
|
||||
FHInfo
|
||||
} from './config.js';
|
||||
import { getStcdDetail } from '@/api/mapModal';
|
||||
|
||||
const baseUrl = import.meta.env.VITE_APP_ATTACHMENT_URL;
|
||||
const modelStore = useModelStore();
|
||||
const info = ref({});
|
||||
const formDiv = ref(null);
|
||||
const logo = ref('');
|
||||
const loading = ref(false);
|
||||
const moduleMap = {
|
||||
ENGInfo: ENGInfo,
|
||||
DWInfo: DWInfo,
|
||||
FPInfo: DWInfo,
|
||||
EQInfo: EQInfo,
|
||||
FBInfo: FBInfo,
|
||||
VPInfo: VPInfo,
|
||||
VAInfo: VAInfo,
|
||||
WTInfo: WTInfo,
|
||||
WQInfo: WQInfo,
|
||||
ZQInfo: ZQInfo,
|
||||
VDInfo: VDInfo,
|
||||
WTRVInfo: WTInfo,
|
||||
WTVTInfo: WTInfo,
|
||||
WQFBInfo: WQInfo,
|
||||
WQFPInfo: WQInfo,
|
||||
FHInfo: FHInfo
|
||||
} as const;
|
||||
watch(
|
||||
() => modelStore.selectedAnchorPoint,
|
||||
async newVal => {
|
||||
if (!newVal?.stcd) return;
|
||||
loading.value = true;
|
||||
console.log(newVal);
|
||||
try {
|
||||
logo.value = '';
|
||||
const res = await getStcdDetail(
|
||||
'eng/base/msstbprpt/getStcdInfo',
|
||||
newVal.stcd
|
||||
);
|
||||
const data = res.data.msStbprpT || {};
|
||||
console.log(data);
|
||||
if (data.logo) {
|
||||
logo.value = baseUrl + '/?' + data.logo;
|
||||
} else {
|
||||
logo.value = '';
|
||||
}
|
||||
if (data.sttpCode == 'ENG') {
|
||||
data.sttp = data.sttpCode;
|
||||
}
|
||||
const code = data.sttp.split('_')[0];
|
||||
formDiv.value = moduleMap[code + 'Info'];
|
||||
|
||||
if (data.ttpwr) {
|
||||
data.ttpwr = data.ttpwr / 1000;
|
||||
}
|
||||
console.log(data);
|
||||
info.value = data;
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
},
|
||||
{ immediate: true, deep: true }
|
||||
);
|
||||
const iconClick = () => {
|
||||
if (info.value.sttpMap == 'ylfb') {
|
||||
modelStore.ylfbModalVisible = true;
|
||||
modelStore.params = info.value;
|
||||
} else {
|
||||
modelStore.modalVisible = true;
|
||||
modelStore.params = info.value;
|
||||
modelStore.title = info.value.titleName || info.value.stnm;
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
:deep(.ant-form-item) {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
:deep(.ant-form-item-label) {
|
||||
& > label {
|
||||
color: #949494 !important;
|
||||
}
|
||||
}
|
||||
:deep(.ant-form-item-control-input-content) {
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
}
|
||||
</style>
|
||||
151
frontend/src/modules/rightSearchDrawer/monitorInfo/index.vue
Normal file
151
frontend/src/modules/rightSearchDrawer/monitorInfo/index.vue
Normal file
@ -0,0 +1,151 @@
|
||||
<template>
|
||||
<SidePanelItem title="电站运行过程线" :shrink="false">
|
||||
<template #title-right-content>
|
||||
<a-range-picker
|
||||
class="w-[220px]"
|
||||
v-model:value="dateRange"
|
||||
format="YYYY-MM-DD"
|
||||
:show-time="showTimeConfig"
|
||||
:allowClear="false"
|
||||
:presets="DateSetting.RangeButton.month1"
|
||||
:disabled-date="disabledDate"
|
||||
size="small"
|
||||
@change="handleSearch"
|
||||
/>
|
||||
</template>
|
||||
<a-spin :spinning="isLoading" tip="加载中...">
|
||||
<div class="monitor-chart">
|
||||
<MonitorInfoEcharts :data="chartData" :is-active="true" />
|
||||
<a-empty
|
||||
v-if="!chartData || chartData.length === 0"
|
||||
description="暂无数据"
|
||||
class="chart-empty"
|
||||
/>
|
||||
</div>
|
||||
</a-spin>
|
||||
</SidePanelItem>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref, watch, onUpdated } from 'vue';
|
||||
import dayjs, { Dayjs } from 'dayjs';
|
||||
import { useUiStore } from '@/store/modules/ui';
|
||||
import { getMonitorData } from '@/api/mapModal';
|
||||
import { useModelStore } from '@/store/modules/model';
|
||||
import SidePanelItem from '@/components/SidePanelItem/index.vue';
|
||||
import MonitorInfoEcharts from '@/components/MapModal/componentsEcharts/MonitorInfoEcharts.vue';
|
||||
import { DateSetting } from '@/utils/enumeration';
|
||||
|
||||
const uiStore = useUiStore();
|
||||
const modelStore = useModelStore();
|
||||
|
||||
const isLoading = ref(false);
|
||||
const chartData = ref<any[]>([]);
|
||||
|
||||
// 时间选择器配置（默认参数与 MonitorInfo 保持一致）
|
||||
const showTimeConfig = {
|
||||
format: 'HH:mm',
|
||||
hourStep: 1,
|
||||
minuteStep: 5,
|
||||
secondStep: 60
|
||||
};
|
||||
const disabledDate = (current: Dayjs) =>
|
||||
current && current.isAfter(dayjs(), 'day');
|
||||
|
||||
const initDateRange = (): [Dayjs, Dayjs] => {
|
||||
return [dayjs().subtract(1, 'month'), dayjs()];
|
||||
};
|
||||
const dateRange = ref<[Dayjs, Dayjs] | undefined>(initDateRange());
|
||||
|
||||
// 数据请求（查询参数取 modelStore.selectedAnchorPoint）
|
||||
const fetchData = async () => {
|
||||
const stcd = modelStore.selectedAnchorPoint?.stcd;
|
||||
if (!dateRange.value || !stcd) return;
|
||||
isLoading.value = true;
|
||||
|
||||
try {
|
||||
const filterParams = {
|
||||
filter: {
|
||||
logic: 'and',
|
||||
filters: [
|
||||
{
|
||||
field: 'stcd',
|
||||
operator: 'eq',
|
||||
dataType: 'string',
|
||||
value: stcd
|
||||
},
|
||||
{
|
||||
field: 'tm',
|
||||
operator: 'gte',
|
||||
dataType: 'date',
|
||||
value: dateRange.value[0].format('YYYY-MM-DD HH:mm:ss')
|
||||
},
|
||||
{
|
||||
field: 'tm',
|
||||
operator: 'lte',
|
||||
dataType: 'date',
|
||||
value: dateRange.value[1].format('YYYY-MM-DD HH:mm:ss')
|
||||
}
|
||||
]
|
||||
},
|
||||
sort: [{ field: 'tm', dir: 'asc' }]
|
||||
};
|
||||
|
||||
const res = await getMonitorData(filterParams);
|
||||
const rawData = res?.data?.data || res?.data?.records || [];
|
||||
|
||||
chartData.value = rawData;
|
||||
} catch (error) {
|
||||
console.error('获取数据失败:', error);
|
||||
chartData.value = [];
|
||||
} finally {
|
||||
isLoading.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
// 时间选择器 change 触发查询
|
||||
const handleSearch = () => fetchData();
|
||||
watch(
|
||||
() => uiStore.searchDrawerOpen,
|
||||
newVal => {
|
||||
if (!newVal) {
|
||||
dateRange.value = initDateRange();
|
||||
}
|
||||
}
|
||||
);
|
||||
// 选中点位变化时刷新；初始已有点位时立即加载
|
||||
watch(
|
||||
() => modelStore.selectedAnchorPoint?.stcd,
|
||||
(newStcd, oldStcd) => {
|
||||
if (!newStcd) return;
|
||||
if (newStcd !== oldStcd) fetchData();
|
||||
},
|
||||
{ immediate: true }
|
||||
);
|
||||
|
||||
// 全局时间范围变化时同步本地日期选择器（默认参数联动）
|
||||
watch(
|
||||
() => modelStore.filter.rangeTm,
|
||||
newRange => {
|
||||
if (Array.isArray(newRange) && newRange.length > 0) {
|
||||
dateRange.value = [dayjs(newRange[0]), dayjs(newRange[1])];
|
||||
}
|
||||
},
|
||||
{ deep: true }
|
||||
);
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.monitor-chart {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 400px;
|
||||
}
|
||||
|
||||
.chart-empty {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
</style>
|
||||
@ -21,6 +21,7 @@ export const useModelStore = defineStore('model', () => {
|
||||
const wtConfig = ref<{ ioWtrv?: boolean; hasRstcdWtvt?: boolean }>({}); // 水温配置
|
||||
const wqShow = ref<boolean>(false); // 水质 AI 预测显示
|
||||
const fishTabInfo = ref<any>(null); // 鱼类监测数据信息
|
||||
const selectedAnchorPoint = ref<any>(null); // 地图筛选下拉选中的点位对象（供基本信息等面板消费）
|
||||
|
||||
const params = ref<{
|
||||
sttp: string;
|
||||
@ -47,14 +48,14 @@ export const useModelStore = defineStore('model', () => {
|
||||
sttpMap: '',
|
||||
dtinType: '',
|
||||
bldstt: '',
|
||||
bldsttCcode:''
|
||||
bldsttCcode: ''
|
||||
});
|
||||
const filter = ref({
|
||||
stllgzlx: '', // 生态流量 - 规则类型
|
||||
stllTmType: '', // 生态流量 - 时间类型
|
||||
tm: '',
|
||||
rangeTm: [],
|
||||
year:'',
|
||||
year: ''
|
||||
});
|
||||
return {
|
||||
params,
|
||||
@ -75,6 +76,7 @@ export const useModelStore = defineStore('model', () => {
|
||||
aiSites,
|
||||
wtConfig,
|
||||
wqShow,
|
||||
fishTabInfo
|
||||
fishTabInfo,
|
||||
selectedAnchorPoint
|
||||
};
|
||||
});
|
||||
|
||||
@ -10,16 +10,23 @@ export const useUiStore = defineStore('ui', () => {
|
||||
const isRoaming = ref(false);
|
||||
// dim 切换时跳过漫游相机还原（由地图模式切换自行处理）
|
||||
const skipRoamCameraRestore = ref(false);
|
||||
// 搜索抽屉状态
|
||||
const searchDrawerOpen = ref(false);
|
||||
|
||||
// 切换抽屉状态
|
||||
const toggleDrawer = () => {
|
||||
drawerOpen.value = !drawerOpen.value;
|
||||
};
|
||||
|
||||
// 设置抽屉状态
|
||||
const setDrawerOpen = (open: boolean) => {
|
||||
drawerOpen.value = open;
|
||||
};
|
||||
// 设置搜索抽屉状态
|
||||
const setSearchDrawerOpen = (open: boolean) => {
|
||||
console.log(open);
|
||||
|
||||
searchDrawerOpen.value = open;
|
||||
};
|
||||
|
||||
const markMapSwitchCompleted = () => {
|
||||
mapSwitchCompletedTick.value += 1;
|
||||
@ -31,6 +38,8 @@ export const useUiStore = defineStore('ui', () => {
|
||||
skipRoamCameraRestore,
|
||||
toggleDrawer,
|
||||
setDrawerOpen,
|
||||
setSearchDrawerOpen,
|
||||
searchDrawerOpen,
|
||||
mapType,
|
||||
mapSwitchCompletedTick,
|
||||
markMapSwitchCompleted
|
||||
|
||||
@ -1,20 +1,23 @@
|
||||
<script setup lang="ts">
|
||||
import JidiSelectorMod from "@/modules/jidiSelectorMod.vue";
|
||||
import RightDrawer from "@/components/RightDrawer/index.vue";
|
||||
import GuoYuSheShiJieShao from "@/modules/guoyusheshijieshao/index.vue"
|
||||
import GuoYuSheShiJianSheQingKuang from "@/modules/guoyusheshijiansheqingkuang/index.vue"
|
||||
import GuoYuJianCeTJ from "@/modules/guoyujiance/index.vue"
|
||||
import GYZLLB from "@/modules/GYZLLB/index.vue"
|
||||
import { useJidiSelectEventStore } from "@/store/modules/jidiSelectEvent";
|
||||
import { ref,watch} from 'vue';
|
||||
import { useUiStore } from '@/store/modules/ui';
|
||||
import basicInfoMod from '@/modules/rightSearchDrawer/basicInfo/index.vue';
|
||||
import JidiSelectorMod from '@/modules/jidiSelectorMod.vue';
|
||||
import RightDrawer from '@/components/RightDrawer/index.vue';
|
||||
import GuoYuSheShiJieShao from '@/modules/guoyusheshijieshao/index.vue';
|
||||
import GuoYuSheShiJianSheQingKuang from '@/modules/guoyusheshijiansheqingkuang/index.vue';
|
||||
import GuoYuJianCeTJ from '@/modules/guoyujiance/index.vue';
|
||||
import GYZLLB from '@/modules/GYZLLB/index.vue';
|
||||
import { useJidiSelectEventStore } from '@/store/modules/jidiSelectEvent';
|
||||
import { ref, watch } from 'vue';
|
||||
const JidiSelectEventStore = useJidiSelectEventStore();
|
||||
const baseid = ref('')
|
||||
const uiStore = useUiStore();
|
||||
const baseid = ref('');
|
||||
watch(
|
||||
() => JidiSelectEventStore.selectedItem,
|
||||
(newVal) => {
|
||||
baseid.value = newVal.wbsCode;
|
||||
},
|
||||
{ deep: true, immediate: true }
|
||||
() => JidiSelectEventStore.selectedItem,
|
||||
newVal => {
|
||||
baseid.value = newVal.wbsCode;
|
||||
},
|
||||
{ deep: true, immediate: true }
|
||||
);
|
||||
</script>
|
||||
|
||||
@ -25,10 +28,15 @@ watch(
|
||||
</div>
|
||||
<div class="rightContent">
|
||||
<RightDrawer>
|
||||
<GuoYuSheShiJieShao v-if="baseid != 'all'" />
|
||||
<GuoYuSheShiJianSheQingKuang v-if="baseid == 'all'" />
|
||||
<GuoYuJianCeTJ />
|
||||
<GYZLLB title="过鱼总量" />
|
||||
<div v-show="uiStore.searchDrawerOpen">
|
||||
<basicInfoMod />
|
||||
</div>
|
||||
<div v-show="!uiStore.searchDrawerOpen">
|
||||
<GuoYuSheShiJieShao v-if="baseid != 'all'" />
|
||||
<GuoYuSheShiJianSheQingKuang v-if="baseid == 'all'" />
|
||||
<GuoYuJianCeTJ />
|
||||
<GYZLLB title="过鱼总量" />
|
||||
</div>
|
||||
</RightDrawer>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1,21 +1,31 @@
|
||||
<script setup lang="ts">
|
||||
import JidiSelectorMod from "@/modules/jidiSelectorMod.vue";
|
||||
import RightDrawer from "@/components/RightDrawer/index.vue";
|
||||
import HuanbaoMod from "@/modules/huanbaoMod/index.vue" // 环保设施建设情况
|
||||
import Dianxingcuoshijieshao from "@/modules/dianxingcuoshijieshao/index.vue" // 环保设施建设情况
|
||||
import { useUiStore } from '@/store/modules/ui';
|
||||
import JidiSelectorMod from '@/modules/jidiSelectorMod.vue';
|
||||
import RightDrawer from '@/components/RightDrawer/index.vue';
|
||||
import HuanbaoMod from '@/modules/huanbaoMod/index.vue'; // 环保设施建设情况
|
||||
import Dianxingcuoshijieshao from '@/modules/dianxingcuoshijieshao/index.vue'; // 环保设施建设情况
|
||||
import basicInfoMod from '@/modules/rightSearchDrawer/basicInfo/index.vue';
|
||||
import monitorInfoMod from '@/modules/rightSearchDrawer/monitorInfo/index.vue';
|
||||
const uiStore = useUiStore();
|
||||
</script>
|
||||
|
||||
|
||||
<template>
|
||||
<div class="moduleContent">
|
||||
<div class="leftContent">
|
||||
<JidiSelectorMod />
|
||||
</div>
|
||||
<div class="rightContent">
|
||||
<RightDrawer>
|
||||
<HuanbaoMod />
|
||||
<Dianxingcuoshijieshao />
|
||||
</RightDrawer>
|
||||
</div>
|
||||
<div class="moduleContent">
|
||||
<div class="leftContent">
|
||||
<JidiSelectorMod />
|
||||
</div>
|
||||
<div class="rightContent">
|
||||
<RightDrawer>
|
||||
<div v-show="uiStore.searchDrawerOpen">
|
||||
<basicInfoMod />
|
||||
<!-- <monitorInfoMod /> -->
|
||||
</div>
|
||||
<div v-show="!uiStore.searchDrawerOpen">
|
||||
<HuanbaoMod />
|
||||
<Dianxingcuoshijieshao />
|
||||
</div>
|
||||
</RightDrawer>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<style scoped lang="scss"></style>
|
||||
|
||||
@ -1,32 +1,40 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, watch } from "vue";
|
||||
import JidiSelectorMod from "@/modules/jidiSelectorMod.vue";
|
||||
import RightDrawer from "@/components/RightDrawer/index.vue";
|
||||
import HuanbaozdjcgzkzQK from "@/modules/huanbaozdjcgzkzQK/index.vue";
|
||||
import SZYCBH from "@/modules/waterQuality/index.vue"
|
||||
import { useJidiSelectEventStore } from "@/store/modules/jidiSelectEvent";
|
||||
import { ref, watch } from 'vue';
|
||||
import { useUiStore } from '@/store/modules/ui';
|
||||
import basicInfoMod from '@/modules/rightSearchDrawer/basicInfo/index.vue';
|
||||
import JidiSelectorMod from '@/modules/jidiSelectorMod.vue';
|
||||
import RightDrawer from '@/components/RightDrawer/index.vue';
|
||||
import HuanbaozdjcgzkzQK from '@/modules/huanbaozdjcgzkzQK/index.vue';
|
||||
import SZYCBH from '@/modules/waterQuality/index.vue';
|
||||
import { useJidiSelectEventStore } from '@/store/modules/jidiSelectEvent';
|
||||
const JidiSelectEventStore = useJidiSelectEventStore();
|
||||
const wbsCode = ref('')
|
||||
const wbsCode = ref('');
|
||||
const uiStore = useUiStore();
|
||||
watch(
|
||||
() => JidiSelectEventStore.selectedItem,
|
||||
(newVal) => {
|
||||
wbsCode.value = newVal.wbsCode
|
||||
newVal => {
|
||||
wbsCode.value = newVal.wbsCode;
|
||||
},
|
||||
{ deep: true, immediate: true }
|
||||
{ deep: true, immediate: true }
|
||||
);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="moduleContent">
|
||||
<div class="leftContent">
|
||||
<JidiSelectorMod />
|
||||
</div>
|
||||
<div class="rightContent">
|
||||
<RightDrawer>
|
||||
<div class="moduleContent">
|
||||
<div class="leftContent">
|
||||
<JidiSelectorMod />
|
||||
</div>
|
||||
<div class="rightContent">
|
||||
<RightDrawer>
|
||||
<div v-show="uiStore.searchDrawerOpen">
|
||||
<basicInfoMod />
|
||||
</div>
|
||||
<div v-show="!uiStore.searchDrawerOpen">
|
||||
<HuanbaozdjcgzkzQK />
|
||||
<SZYCBH v-if="wbsCode != 'all'" />
|
||||
</RightDrawer>
|
||||
</div>
|
||||
</div>
|
||||
</RightDrawer>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<style scoped lang="scss"></style>
|
||||
|
||||
@ -1,10 +1,12 @@
|
||||
<script setup lang="ts">
|
||||
import { onActivated, onMounted, ref } from 'vue';
|
||||
import { useUiStore } from '@/store/modules/ui';
|
||||
import JidiSelectorMod from '@/modules/jidiSelectorMod.vue';
|
||||
import RightDrawer from '@/components/RightDrawer/index.vue';
|
||||
import jidiInfoMod from '@/modules/jidiInfoMod/index.vue';
|
||||
import shuidianhuangjingjieruMod from '@/modules/shuidianhuangjingjieruMod/index.vue';
|
||||
import { useModelStore } from '@/store/modules/model';
|
||||
import basicInfoMod from '@/modules/rightSearchDrawer/basicInfo/index.vue';
|
||||
import monitorInfoMod from '@/modules/rightSearchDrawer/monitorInfo/index.vue';
|
||||
const uiStore = useUiStore();
|
||||
</script>
|
||||
|
||||
<template>
|
||||
@ -14,8 +16,14 @@ import { useModelStore } from '@/store/modules/model';
|
||||
</div>
|
||||
<div class="rightContent">
|
||||
<RightDrawer>
|
||||
<jidiInfoMod />
|
||||
<shuidianhuangjingjieruMod />
|
||||
<div v-show="uiStore.searchDrawerOpen">
|
||||
<basicInfoMod />
|
||||
<monitorInfoMod />
|
||||
</div>
|
||||
<div v-show="!uiStore.searchDrawerOpen">
|
||||
<jidiInfoMod />
|
||||
<shuidianhuangjingjieruMod />
|
||||
</div>
|
||||
</RightDrawer>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -0,0 +1,7 @@
|
||||
<template>
|
||||
<div class="moduleContent" style="color: red; z-index: 1000">
|
||||
目标检测模型管理
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts"></script>
|
||||
@ -0,0 +1,7 @@
|
||||
<template>
|
||||
<div class="moduleContent" style="color: red; z-index: 1000">
|
||||
时序模型管理
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts"></script>
|
||||
@ -1,10 +1,13 @@
|
||||
<script setup lang="ts">
|
||||
import { useUiStore } from '@/store/modules/ui';
|
||||
import basicInfoMod from '@/modules/rightSearchDrawer/basicInfo/index.vue';
|
||||
import JidiSelectorMod from '@/modules/jidiSelectorMod.vue';
|
||||
import RightDrawer from '@/components/RightDrawer/index.vue';
|
||||
import QiXiDiBaoHuGongZuoKaiZhan from '@/modules/qixidibaohugongzuokaizhanQK/index.vue';
|
||||
import QixidijchuXx from '@/modules/qixidijchuXx/index.vue';
|
||||
import QiXiDiShuiWenBianHua from '@/modules/qixidishuiwenbianhua/index.vue';
|
||||
import QiXiDiLiuLiangBianHua from '@/modules/qixidiliuliangbianhua/index.vue';
|
||||
const uiStore = useUiStore();
|
||||
</script>
|
||||
|
||||
<template>
|
||||
@ -14,10 +17,15 @@ import QiXiDiLiuLiangBianHua from '@/modules/qixidiliuliangbianhua/index.vue';
|
||||
</div>
|
||||
<div class="rightContent">
|
||||
<RightDrawer>
|
||||
<QiXiDiBaoHuGongZuoKaiZhan />
|
||||
<QiXiDiShuiWenBianHua />
|
||||
<QiXiDiLiuLiangBianHua />
|
||||
<QixidijchuXx />
|
||||
<div v-show="uiStore.searchDrawerOpen">
|
||||
<basicInfoMod />
|
||||
</div>
|
||||
<div v-show="!uiStore.searchDrawerOpen">
|
||||
<QiXiDiBaoHuGongZuoKaiZhan />
|
||||
<QiXiDiShuiWenBianHua />
|
||||
<QiXiDiLiuLiangBianHua />
|
||||
<QixidijchuXx />
|
||||
</div>
|
||||
</RightDrawer>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
5
frontend/src/views/sanWeiFangZhen/index.vue
Normal file
5
frontend/src/views/sanWeiFangZhen/index.vue
Normal file
@ -0,0 +1,5 @@
|
||||
<template>
|
||||
<div class="moduleContent" style="color: red; z-index: 1000">三维仿真</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts"></script>
|
||||
@ -1,12 +1,15 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, watch } from 'vue';
|
||||
import { useUiStore } from '@/store/modules/ui';
|
||||
import JidiSelectorMod from '@/modules/jidiSelectorMod.vue';
|
||||
import RightDrawer from '@/components/RightDrawer/index.vue';
|
||||
import basicInfoMod from '@/modules/rightSearchDrawer/basicInfo/index.vue';
|
||||
import XFFS from '@/modules/shengTaiLiuLiangXieFangSheShiMod/xieFangFangShi/index.vue'; //
|
||||
import XFFB from '@/modules/shengTaiLiuLiangXieFangSheShiMod/xieFangFenBu/index.vue'; //
|
||||
import STLLXZYCBH from "@/modules/shengTaiLiuLiangXieFangSheShiMod/xianZhiYanChenBianHua/index.vue"
|
||||
import STLLXZYCBH from '@/modules/shengTaiLiuLiangXieFangSheShiMod/xianZhiYanChenBianHua/index.vue';
|
||||
import { useJidiSelectEventStore } from '@/store/modules/jidiSelectEvent';
|
||||
const JidiSelectEventStore = useJidiSelectEventStore();
|
||||
const uiStore = useUiStore();
|
||||
let wbsCode = ref('');
|
||||
watch(
|
||||
() => JidiSelectEventStore.selectedItem,
|
||||
@ -27,9 +30,14 @@ watch(
|
||||
</div>
|
||||
<div class="rightContent">
|
||||
<RightDrawer>
|
||||
<XFFS></XFFS>
|
||||
<XFFB v-if="wbsCode == 'all'"> </XFFB>
|
||||
<STLLXZYCBH v-if="wbsCode != 'all'" ></STLLXZYCBH>
|
||||
<div v-show="uiStore.searchDrawerOpen">
|
||||
<basicInfoMod />
|
||||
</div>
|
||||
<div v-show="!uiStore.searchDrawerOpen">
|
||||
<XFFS></XFFS>
|
||||
<XFFB v-if="wbsCode == 'all'"> </XFFB>
|
||||
<STLLXZYCBH v-if="wbsCode != 'all'"></STLLXZYCBH>
|
||||
</div>
|
||||
</RightDrawer>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1,8 +1,11 @@
|
||||
<script setup lang="ts">
|
||||
import JidiSelectorMod from "@/modules/jidiSelectorMod.vue";
|
||||
import RightDrawer from "@/components/RightDrawer/index.vue";
|
||||
import DiWenSJHSSLXZCJJRQK from "@/modules/diwenshuijianhuansheshileixingzuchengjijieruqingkuang/index.vue"
|
||||
import SheShiLeiXingJieShao from "@/modules/sheshileixingjieshao/index.vue"
|
||||
import { useUiStore } from '@/store/modules/ui';
|
||||
import basicInfoMod from '@/modules/rightSearchDrawer/basicInfo/index.vue';
|
||||
import JidiSelectorMod from '@/modules/jidiSelectorMod.vue';
|
||||
import RightDrawer from '@/components/RightDrawer/index.vue';
|
||||
import DiWenSJHSSLXZCJJRQK from '@/modules/diwenshuijianhuansheshileixingzuchengjijieruqingkuang/index.vue';
|
||||
import SheShiLeiXingJieShao from '@/modules/sheshileixingjieshao/index.vue';
|
||||
const uiStore = useUiStore();
|
||||
</script>
|
||||
|
||||
<template>
|
||||
@ -12,8 +15,13 @@ import SheShiLeiXingJieShao from "@/modules/sheshileixingjieshao/index.vue"
|
||||
</div>
|
||||
<div class="rightContent">
|
||||
<RightDrawer>
|
||||
<SheShiLeiXingJieShao />
|
||||
<DiWenSJHSSLXZCJJRQK />
|
||||
<div v-show="uiStore.searchDrawerOpen">
|
||||
<basicInfoMod />
|
||||
</div>
|
||||
<div v-show="!uiStore.searchDrawerOpen">
|
||||
<SheShiLeiXingJieShao />
|
||||
<DiWenSJHSSLXZCJJRQK />
|
||||
</div>
|
||||
</RightDrawer>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1,8 +1,11 @@
|
||||
<script setup lang="ts">
|
||||
import JidiSelectorMod from "@/modules/jidiSelectorMod.vue";
|
||||
import RightDrawer from "@/components/RightDrawer/index.vue";
|
||||
import MonthlyAvgWaterTemCompareHistory from "@/modules/monthlyAvgWaterTemCompareHistory/index.vue"; // 月平均水温历史对比
|
||||
import ShuiWenNianNeiFenBu from "@/modules/shuiWenNianNeiFenBu/index.vue"; // 水温年内分布
|
||||
import { useUiStore } from '@/store/modules/ui';
|
||||
import basicInfoMod from '@/modules/rightSearchDrawer/basicInfo/index.vue';
|
||||
import JidiSelectorMod from '@/modules/jidiSelectorMod.vue';
|
||||
import RightDrawer from '@/components/RightDrawer/index.vue';
|
||||
import MonthlyAvgWaterTemCompareHistory from '@/modules/monthlyAvgWaterTemCompareHistory/index.vue'; // 月平均水温历史对比
|
||||
import ShuiWenNianNeiFenBu from '@/modules/shuiWenNianNeiFenBu/index.vue'; // 水温年内分布
|
||||
const uiStore = useUiStore();
|
||||
</script>
|
||||
|
||||
<template>
|
||||
@ -12,8 +15,13 @@ import ShuiWenNianNeiFenBu from "@/modules/shuiWenNianNeiFenBu/index.vue"; //
|
||||
</div>
|
||||
<div class="rightContent">
|
||||
<RightDrawer>
|
||||
<MonthlyAvgWaterTemCompareHistory />
|
||||
<ShuiWenNianNeiFenBu />
|
||||
<div v-show="uiStore.searchDrawerOpen">
|
||||
<basicInfoMod />
|
||||
</div>
|
||||
<div v-show="!uiStore.searchDrawerOpen">
|
||||
<MonthlyAvgWaterTemCompareHistory />
|
||||
<ShuiWenNianNeiFenBu />
|
||||
</div>
|
||||
</RightDrawer>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1,10 +1,13 @@
|
||||
<script setup lang="ts">
|
||||
import JidiSelectorMod from "@/modules/jidiSelectorMod.vue";
|
||||
import RightDrawer from "@/components/RightDrawer/index.vue";
|
||||
import ChuixiangshuiwenChangeMod from "@/modules/chuixiangshuiwenChangeMod/index.vue" // 垂向水温变化
|
||||
import ChurukushuiwenMod from "@/modules/churukushuiwenMod/index.vue" // 出入库水温变化
|
||||
import YanchengshuiwenChangeMod from "@/modules/yanchengshuiwenChangeMod/index.vue" // 沿程水温变化
|
||||
import ShuiwenJCGZKZQK from "@/modules/shuiwenjiancegongzuokaizhangqingkuang/index.vue"
|
||||
import { useUiStore } from '@/store/modules/ui';
|
||||
import basicInfoMod from '@/modules/rightSearchDrawer/basicInfo/index.vue';
|
||||
import JidiSelectorMod from '@/modules/jidiSelectorMod.vue';
|
||||
import RightDrawer from '@/components/RightDrawer/index.vue';
|
||||
import ChuixiangshuiwenChangeMod from '@/modules/chuixiangshuiwenChangeMod/index.vue'; // 垂向水温变化
|
||||
import ChurukushuiwenMod from '@/modules/churukushuiwenMod/index.vue'; // 出入库水温变化
|
||||
import YanchengshuiwenChangeMod from '@/modules/yanchengshuiwenChangeMod/index.vue'; // 沿程水温变化
|
||||
import ShuiwenJCGZKZQK from '@/modules/shuiwenjiancegongzuokaizhangqingkuang/index.vue';
|
||||
const uiStore = useUiStore();
|
||||
</script>
|
||||
|
||||
<template>
|
||||
@ -14,10 +17,15 @@ import ShuiwenJCGZKZQK from "@/modules/shuiwenjiancegongzuokaizhangqingkuang/ind
|
||||
</div>
|
||||
<div class="rightContent">
|
||||
<RightDrawer>
|
||||
<ShuiwenJCGZKZQK />
|
||||
<YanchengshuiwenChangeMod />
|
||||
<ChuixiangshuiwenChangeMod />
|
||||
<ChurukushuiwenMod />
|
||||
<div v-show="uiStore.searchDrawerOpen">
|
||||
<basicInfoMod />
|
||||
</div>
|
||||
<div v-show="!uiStore.searchDrawerOpen">
|
||||
<ShuiwenJCGZKZQK />
|
||||
<YanchengshuiwenChangeMod />
|
||||
<ChuixiangshuiwenChangeMod />
|
||||
<ChurukushuiwenMod />
|
||||
</div>
|
||||
</RightDrawer>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1,5 +1,7 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, watch } from 'vue';
|
||||
import { useUiStore } from '@/store/modules/ui';
|
||||
import basicInfoMod from '@/modules/rightSearchDrawer/basicInfo/index.vue';
|
||||
import JidiSelectorMod from '@/modules/jidiSelectorMod.vue';
|
||||
import RightDrawer from '@/components/RightDrawer/index.vue';
|
||||
import ShuiZhiJianCeGongZuoQingKuang from '@/modules/shuizhijiancegongzuoQK/index.vue';
|
||||
@ -7,6 +9,7 @@ import EnvironmentalQuality from '@/modules/EnvironmentalQuality/index.vue'; //
|
||||
import { useJidiSelectEventStore } from '@/store/modules/jidiSelectEvent';
|
||||
import SZYCBH from '@/modules/waterQuality/index.vue';
|
||||
const JidiSelectEventStore = useJidiSelectEventStore();
|
||||
const uiStore = useUiStore();
|
||||
const wbsCode = ref('');
|
||||
watch(
|
||||
() => JidiSelectEventStore.selectedItem,
|
||||
@ -26,9 +29,14 @@ watch(
|
||||
</div>
|
||||
<div class="rightContent">
|
||||
<RightDrawer>
|
||||
<ShuiZhiJianCeGongZuoQingKuang />
|
||||
<EnvironmentalQuality />
|
||||
<SZYCBH v-if="wbsCode != 'all'"></SZYCBH>
|
||||
<div v-show="uiStore.searchDrawerOpen">
|
||||
<basicInfoMod />
|
||||
</div>
|
||||
<div v-show="!uiStore.searchDrawerOpen">
|
||||
<ShuiZhiJianCeGongZuoQingKuang />
|
||||
<EnvironmentalQuality />
|
||||
<SZYCBH v-if="wbsCode != 'all'"></SZYCBH>
|
||||
</div>
|
||||
</RightDrawer>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -585,7 +585,9 @@ onMounted(() => {
|
||||
mode="horizontal"
|
||||
@select="handleSelect"
|
||||
>
|
||||
<el-menu-item index="1">水电水利建设项目全过程环境管理信息平台</el-menu-item>
|
||||
<el-menu-item index="1"
|
||||
>水电水利建设项目全过程环境管理信息平台</el-menu-item
|
||||
>
|
||||
<el-menu-item index="2">全过程数据管理子系统</el-menu-item>
|
||||
<el-menu-item index="4">填报管理子系统</el-menu-item>
|
||||
</el-menu>
|
||||
@ -630,7 +632,6 @@ onMounted(() => {
|
||||
v-loading="loading"
|
||||
ref="multipleTable"
|
||||
:data="tableData"
|
||||
default-expand-all
|
||||
tooltip-effect="dark"
|
||||
style="width: 100%; height: calc(104vh - 290px)"
|
||||
row-key="id"
|
||||
@ -679,8 +680,12 @@ onMounted(() => {
|
||||
align="center"
|
||||
>
|
||||
<template #default="scope">
|
||||
<span v-if="scope.row.systemcode == '1'">水电水利建设项目全过程环境管理信息平台</span>
|
||||
<span v-else-if="scope.row.systemcode == '2'">全过程数据管理子系统</span>
|
||||
<span v-if="scope.row.systemcode == '1'"
|
||||
>水电水利建设项目全过程环境管理信息平台</span
|
||||
>
|
||||
<span v-else-if="scope.row.systemcode == '2'"
|
||||
>全过程数据管理子系统</span
|
||||
>
|
||||
<span v-else>填报管理子系统</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
@ -1,19 +1,22 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, watch } from "vue";
|
||||
import JidiSelectorMod from "@/modules/jidiSelectorMod.vue";
|
||||
import RightDrawer from "@/components/RightDrawer/index.vue";
|
||||
import { ref, watch } from 'vue';
|
||||
import JidiSelectorMod from '@/modules/jidiSelectorMod.vue';
|
||||
import RightDrawer from '@/components/RightDrawer/index.vue';
|
||||
import { useUiStore } from '@/store/modules/ui';
|
||||
import basicInfoMod from '@/modules/rightSearchDrawer/basicInfo/index.vue';
|
||||
|
||||
import ZengZhiJiHuaWanChengQingKuang from "@/modules/zengZhiJiHuaWanChengQingKuang/index.vue"
|
||||
import ZengZhiZhanJieShaoMod from "@/modules/zengZhiZhanJieShaoMod/index.vue"
|
||||
import ZZZJSYXQKTT from "@/modules/zengzhizhanjiansheyunxing/index.vue"
|
||||
import ZZZYXSJTJ from "@/modules/zengzhizhanyunxingsjtj/index.vue"
|
||||
import FLZLLB from "@/modules/GYZLLB/index.vue"
|
||||
import { useJidiSelectEventStore } from "@/store/modules/jidiSelectEvent";
|
||||
import ZengZhiJiHuaWanChengQingKuang from '@/modules/zengZhiJiHuaWanChengQingKuang/index.vue';
|
||||
import ZengZhiZhanJieShaoMod from '@/modules/zengZhiZhanJieShaoMod/index.vue';
|
||||
import ZZZJSYXQKTT from '@/modules/zengzhizhanjiansheyunxing/index.vue';
|
||||
import ZZZYXSJTJ from '@/modules/zengzhizhanyunxingsjtj/index.vue';
|
||||
import FLZLLB from '@/modules/GYZLLB/index.vue';
|
||||
import { useJidiSelectEventStore } from '@/store/modules/jidiSelectEvent';
|
||||
const JidiSelectEventStore = useJidiSelectEventStore();
|
||||
const uiStore = useUiStore();
|
||||
const wbsCode = ref('all');
|
||||
watch(
|
||||
() => JidiSelectEventStore.selectedItem,
|
||||
(newVal) => {
|
||||
newVal => {
|
||||
console.log(newVal);
|
||||
if (newVal.wbsCode == 'all') {
|
||||
wbsCode.value = 'all';
|
||||
@ -21,7 +24,7 @@ watch(
|
||||
wbsCode.value = newVal.wbsCode;
|
||||
}
|
||||
},
|
||||
{ deep: true, immediate: true }
|
||||
{ deep: true, immediate: true }
|
||||
);
|
||||
</script>
|
||||
|
||||
@ -32,11 +35,16 @@ watch(
|
||||
</div>
|
||||
<div class="rightContent">
|
||||
<RightDrawer>
|
||||
<ZZZJSYXQKTT />
|
||||
<ZengZhiZhanJieShaoMod v-if="wbsCode != 'all'" />
|
||||
<ZengZhiJiHuaWanChengQingKuang v-if="wbsCode != 'all'" />
|
||||
<FLZLLB title="放流总量" />
|
||||
<ZZZYXSJTJ />
|
||||
<div v-show="uiStore.searchDrawerOpen">
|
||||
<basicInfoMod />
|
||||
</div>
|
||||
<div v-show="!uiStore.searchDrawerOpen">
|
||||
<ZZZJSYXQKTT />
|
||||
<ZengZhiZhanJieShaoMod v-if="wbsCode != 'all'" />
|
||||
<ZengZhiJiHuaWanChengQingKuang v-if="wbsCode != 'all'" />
|
||||
<FLZLLB title="放流总量" />
|
||||
<ZZZYXSJTJ />
|
||||
</div>
|
||||
</RightDrawer>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1,16 +1,19 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, watch } from "vue";
|
||||
import JidiSelectorMod from "@/modules/jidiSelectorMod.vue";
|
||||
import RightDrawer from "@/components/RightDrawer/index.vue";
|
||||
import ZhiWuYuanJianSheJiJieRuQingKuangBar from "@/modules/ZhenXiZhiWuYuanMod/ZhiWuYuanJianSheJiJieRuQingKuangBar/index.vue"; // 植物园建设及接入情况
|
||||
import Dwjzqk from "@/modules/ZhenXiZhiWuYuanMod/Dwjzqk/index.vue"
|
||||
import JZZQKJS from "@/modules/DongWuJiuZhuZhan/JiuZhuZhanQingKuangJieShao.vue"; // 救助站情况介绍
|
||||
import { useJidiSelectEventStore } from "@/store/modules/jidiSelectEvent";
|
||||
import { ref, watch } from 'vue';
|
||||
import { useUiStore } from '@/store/modules/ui';
|
||||
import basicInfoMod from '@/modules/rightSearchDrawer/basicInfo/index.vue';
|
||||
import JidiSelectorMod from '@/modules/jidiSelectorMod.vue';
|
||||
import RightDrawer from '@/components/RightDrawer/index.vue';
|
||||
import ZhiWuYuanJianSheJiJieRuQingKuangBar from '@/modules/ZhenXiZhiWuYuanMod/ZhiWuYuanJianSheJiJieRuQingKuangBar/index.vue'; // 植物园建设及接入情况
|
||||
import Dwjzqk from '@/modules/ZhenXiZhiWuYuanMod/Dwjzqk/index.vue';
|
||||
import JZZQKJS from '@/modules/DongWuJiuZhuZhan/JiuZhuZhanQingKuangJieShao.vue'; // 救助站情况介绍
|
||||
import { useJidiSelectEventStore } from '@/store/modules/jidiSelectEvent';
|
||||
const JidiSelectEventStore = useJidiSelectEventStore();
|
||||
const wbsCode = ref('all')
|
||||
const uiStore = useUiStore();
|
||||
const wbsCode = ref('all');
|
||||
watch(
|
||||
() => JidiSelectEventStore.selectedItem,
|
||||
(newVal) => {
|
||||
newVal => {
|
||||
console.log(newVal);
|
||||
if (newVal.wbsCode == 'all') {
|
||||
wbsCode.value = 'all';
|
||||
@ -29,9 +32,14 @@ watch(
|
||||
</div>
|
||||
<div class="rightContent">
|
||||
<RightDrawer>
|
||||
<JZZQKJS v-if="wbsCode!='all'" />
|
||||
<ZhiWuYuanJianSheJiJieRuQingKuangBar v-if="wbsCode=='all'" />
|
||||
<Dwjzqk />
|
||||
<div v-show="uiStore.searchDrawerOpen">
|
||||
<basicInfoMod />
|
||||
</div>
|
||||
<div v-show="!uiStore.searchDrawerOpen">
|
||||
<JZZQKJS v-if="wbsCode != 'all'" />
|
||||
<ZhiWuYuanJianSheJiJieRuQingKuangBar v-if="wbsCode == 'all'" />
|
||||
<Dwjzqk />
|
||||
</div>
|
||||
</RightDrawer>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
31
frontend/src/views/zhiHuiZhuangBei/index.vue
Normal file
31
frontend/src/views/zhiHuiZhuangBei/index.vue
Normal file
@ -0,0 +1,31 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, watch } from 'vue';
|
||||
import { useUiStore } from '@/store/modules/ui';
|
||||
import basicInfoMod from '@/modules/rightSearchDrawer/basicInfo/index.vue';
|
||||
import JidiSelectorMod from '@/modules/jidiSelectorMod.vue';
|
||||
import RightDrawer from '@/components/RightDrawer/index.vue';
|
||||
import ZhiWuYuanJianSheJiJieRuQingKuangBar from '@/modules/ZhenXiZhiWuYuanMod/ZhiWuYuanJianSheJiJieRuQingKuangBar/index.vue'; // 植物园建设及接入情况
|
||||
import Dwjzqk from '@/modules/ZhenXiZhiWuYuanMod/Dwjzqk/index.vue';
|
||||
import JZZQKJS from '@/modules/DongWuJiuZhuZhan/JiuZhuZhanQingKuangJieShao.vue'; // 救助站情况介绍
|
||||
import { useJidiSelectEventStore } from '@/store/modules/jidiSelectEvent';
|
||||
const JidiSelectEventStore = useJidiSelectEventStore();
|
||||
const uiStore = useUiStore();
|
||||
const wbsCode = ref('all');
|
||||
watch(
|
||||
() => JidiSelectEventStore.selectedItem,
|
||||
newVal => {
|
||||
console.log(newVal);
|
||||
if (newVal.wbsCode == 'all') {
|
||||
wbsCode.value = 'all';
|
||||
} else {
|
||||
wbsCode.value = newVal.wbsCode;
|
||||
}
|
||||
},
|
||||
{ deep: true }
|
||||
);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="moduleContent" style="color: red; z-index: 100">888123</div>
|
||||
</template>
|
||||
<style scoped lang="scss"></style>
|
||||
@ -0,0 +1,5 @@
|
||||
<template>
|
||||
<div class="moduleContent" style="color: red; z-index: 1000">过鱼设施</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts"></script>
|
||||
5
frontend/src/views/zhiNengFenXi/yuCeYuJing/index.vue
Normal file
5
frontend/src/views/zhiNengFenXi/yuCeYuJing/index.vue
Normal file
@ -0,0 +1,5 @@
|
||||
<template>
|
||||
<div class="moduleContent" style="color: red; z-index: 1000">预测预警</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts"></script>
|
||||
@ -0,0 +1,7 @@
|
||||
<template>
|
||||
<div class="moduleContent" style="color: red; z-index: 1000">
|
||||
智能报告生成
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts"></script>
|
||||
5
frontend/src/views/zhiNengFenXi/zhiNengGaoJing/index.vue
Normal file
5
frontend/src/views/zhiNengFenXi/zhiNengGaoJing/index.vue
Normal file
@ -0,0 +1,5 @@
|
||||
<template>
|
||||
<div class="moduleContent" style="color: red; z-index: 1000">智能告警</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts"></script>
|
||||
Loading…
Reference in New Issue
Block a user