添加新功能菜单，添加右侧抽屉新功能，迁移数据分析菜单
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: '',
|
url: '',
|
||||||
value: '国家电投集团'
|
value: '国家电投集团'
|
||||||
},
|
},
|
||||||
{
|
// {
|
||||||
key: '2950C68264BF494B9C5E1748569D026C',
|
// key: '2950C68264BF494B9C5E1748569D026C',
|
||||||
name: '坝址经度(°)',
|
// name: '坝址经度(°)',
|
||||||
filed: 'lgtd',
|
// filed: 'lgtd',
|
||||||
visible: true,
|
// visible: true,
|
||||||
ruleTips: 'a4d3b02a466677324278a9a153fb4adb',
|
// ruleTips: 'a4d3b02a466677324278a9a153fb4adb',
|
||||||
type: 'number',
|
// type: 'number',
|
||||||
toFixed: 6,
|
// toFixed: 6,
|
||||||
url: '',
|
// url: '',
|
||||||
unitConfig: ['Other', 'LGTD'],
|
// unitConfig: ['Other', 'LGTD'],
|
||||||
value: '101.184969',
|
// value: '101.184969',
|
||||||
vlsr: '大中型电站图册、全国水雨情信息网（黄河中游水电基地）'
|
// vlsr: '大中型电站图册、全国水雨情信息网（黄河中游水电基地）'
|
||||||
},
|
// },
|
||||||
{
|
// {
|
||||||
key: '70423E92994B4620A73BA6DCF3861669',
|
// key: '70423E92994B4620A73BA6DCF3861669',
|
||||||
name: '坝址纬度(°)',
|
// name: '坝址纬度(°)',
|
||||||
filed: 'lttd',
|
// filed: 'lttd',
|
||||||
visible: true,
|
// visible: true,
|
||||||
ruleTips: 'a4d3b02a466677324278a9a153fb4adb',
|
// ruleTips: 'a4d3b02a466677324278a9a153fb4adb',
|
||||||
type: 'number',
|
// type: 'number',
|
||||||
toFixed: 6,
|
// toFixed: 6,
|
||||||
url: '',
|
// url: '',
|
||||||
unitConfig: ['Other', 'LTTD'],
|
// unitConfig: ['Other', 'LTTD'],
|
||||||
value: '36.070816',
|
// value: '36.070816',
|
||||||
vlsr: '大中型电站图册、全国水雨情信息网（黄河中游水电基地）'
|
// vlsr: '大中型电站图册、全国水雨情信息网（黄河中游水电基地）'
|
||||||
},
|
// },
|
||||||
{
|
{
|
||||||
key: '3EAC90E681014714A32E425A7C691D7D',
|
key: '3EAC90E681014714A32E425A7C691D7D',
|
||||||
name: '建设状态',
|
name: '建设状态',
|
||||||
@ -1910,6 +1910,7 @@ const FPPointColumns2: Array<any> = [
|
|||||||
filed: 'inv',
|
filed: 'inv',
|
||||||
visible: true,
|
visible: true,
|
||||||
type: 'number',
|
type: 'number',
|
||||||
|
toFixed: 4,
|
||||||
url: ''
|
url: ''
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
@ -2115,6 +2116,7 @@ const FPPointColumns4: Array<any> = [
|
|||||||
filed: 'inv',
|
filed: 'inv',
|
||||||
visible: true,
|
visible: true,
|
||||||
type: 'number',
|
type: 'number',
|
||||||
|
toFixed: 4,
|
||||||
url: ''
|
url: ''
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
@ -3325,7 +3327,7 @@ const DwPointColumnsyuan: Array<any> = [
|
|||||||
visible: true,
|
visible: true,
|
||||||
type: 'select',
|
type: 'select',
|
||||||
url: ''
|
url: ''
|
||||||
},
|
}
|
||||||
];
|
];
|
||||||
//夹岩双层取水
|
//夹岩双层取水
|
||||||
const DwOnePointColumns: Array<any> = [
|
const DwOnePointColumns: Array<any> = [
|
||||||
@ -4871,13 +4873,14 @@ const tableColumns5: Array<any> = [
|
|||||||
];
|
];
|
||||||
//气象监测
|
//气象监测
|
||||||
const MMColumns: Array<any> = [
|
const MMColumns: Array<any> = [
|
||||||
{
|
{
|
||||||
name: '基本属性',
|
name: '基本属性',
|
||||||
visible: false,
|
visible: false,
|
||||||
ruleTips: '',
|
ruleTips: '',
|
||||||
type: '',
|
type: '',
|
||||||
url: ''
|
url: ''
|
||||||
}, {
|
},
|
||||||
|
{
|
||||||
name: '测站名称',
|
name: '测站名称',
|
||||||
filed: 'stnm',
|
filed: 'stnm',
|
||||||
visible: true,
|
visible: true,
|
||||||
@ -4905,7 +4908,7 @@ const MMColumns: Array<any> = [
|
|||||||
type: 'select',
|
type: 'select',
|
||||||
url: ''
|
url: ''
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: '所在水系',
|
name: '所在水系',
|
||||||
filed: 'addvcdName',
|
filed: 'addvcdName',
|
||||||
visible: true,
|
visible: true,
|
||||||
@ -4919,7 +4922,7 @@ const MMColumns: Array<any> = [
|
|||||||
type: 'date',
|
type: 'date',
|
||||||
format: 'YYYY-MM-DD',
|
format: 'YYYY-MM-DD',
|
||||||
url: ''
|
url: ''
|
||||||
},
|
}
|
||||||
];
|
];
|
||||||
|
|
||||||
//生态流量
|
//生态流量
|
||||||
|
|||||||
@ -425,8 +425,8 @@ const getData = async () => {
|
|||||||
}
|
}
|
||||||
return stcdItem.attrKey == str;
|
return stcdItem.attrKey == str;
|
||||||
});
|
});
|
||||||
if (stcdItem && stcdItem.attrKey == 'rgcp') {
|
// if (stcdItem && stcdItem.attrKey == 'rgcp') {
|
||||||
}
|
// }
|
||||||
if (stcdItem && stcdItem.vlsr) {
|
if (stcdItem && stcdItem.vlsr) {
|
||||||
item.vlsr = stcdItem.vlsr;
|
item.vlsr = stcdItem.vlsr;
|
||||||
}
|
}
|
||||||
|
|||||||
@ -23,7 +23,7 @@
|
|||||||
<div class="tab-content">
|
<div class="tab-content">
|
||||||
<div class="content-body">
|
<div class="content-body">
|
||||||
<div class="chart-wrapper">
|
<div class="chart-wrapper">
|
||||||
<div ref="chartRef" class="chart-container"></div>
|
<MonitorInfoEcharts :data="chartData" :is-active="isActive" />
|
||||||
<a-empty
|
<a-empty
|
||||||
v-if="!chartData || chartData.length === 0"
|
v-if="!chartData || chartData.length === 0"
|
||||||
description="暂无数据"
|
description="暂无数据"
|
||||||
@ -45,12 +45,12 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
import { ref, watch, onBeforeUnmount, onMounted, nextTick } from 'vue';
|
import { ref, watch } from 'vue';
|
||||||
import dayjs, { Dayjs } from 'dayjs';
|
import dayjs, { Dayjs } from 'dayjs';
|
||||||
import * as echarts from 'echarts';
|
|
||||||
import { getMonitorData } from '@/api/mapModal';
|
import { getMonitorData } from '@/api/mapModal';
|
||||||
import { useModelStore } from '@/store/modules/model';
|
import { useModelStore } from '@/store/modules/model';
|
||||||
import BasicTable from '@/components/BasicTable/index.vue';
|
import BasicTable from '@/components/BasicTable/index.vue';
|
||||||
|
import MonitorInfoEcharts from '../componentsEcharts/MonitorInfoEcharts.vue';
|
||||||
import { DateSetting } from '@/utils/enumeration';
|
import { DateSetting } from '@/utils/enumeration';
|
||||||
|
|
||||||
const modelStore = useModelStore();
|
const modelStore = useModelStore();
|
||||||
@ -63,8 +63,6 @@ const hasLoaded = ref(false);
|
|||||||
const isLoading = ref(false);
|
const isLoading = ref(false);
|
||||||
const tableData = ref<any[]>([]);
|
const tableData = ref<any[]>([]);
|
||||||
const chartData = ref<any[]>([]);
|
const chartData = ref<any[]>([]);
|
||||||
const chartRef = ref<HTMLElement>();
|
|
||||||
let chartInstance: echarts.ECharts | null = null;
|
|
||||||
|
|
||||||
const tabsList = [{ name: '电站运行过程线', key: 'dzxq.tabs.jcsj' }];
|
const tabsList = [{ name: '电站运行过程线', key: 'dzxq.tabs.jcsj' }];
|
||||||
const activeTabKey = ref('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 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 () => {
|
const fetchData = async () => {
|
||||||
if (!dateRange.value) return;
|
if (!dateRange.value) return;
|
||||||
@ -454,12 +175,10 @@ const fetchData = async () => {
|
|||||||
|
|
||||||
tableData.value = [...rawData].reverse();
|
tableData.value = [...rawData].reverse();
|
||||||
chartData.value = rawData;
|
chartData.value = rawData;
|
||||||
nextTick(() => updateChart(rawData));
|
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
console.error('获取数据失败:', error);
|
console.error('获取数据失败:', error);
|
||||||
tableData.value = [];
|
tableData.value = [];
|
||||||
chartData.value = [];
|
chartData.value = [];
|
||||||
if (chartInstance) chartInstance.clear();
|
|
||||||
} finally {
|
} finally {
|
||||||
isLoading.value = false;
|
isLoading.value = false;
|
||||||
}
|
}
|
||||||
@ -469,7 +188,6 @@ const handleSearch = () => fetchData();
|
|||||||
|
|
||||||
const initData = () => {
|
const initData = () => {
|
||||||
if (hasLoaded.value) return;
|
if (hasLoaded.value) return;
|
||||||
nextTick(() => initChart());
|
|
||||||
fetchData();
|
fetchData();
|
||||||
hasLoaded.value = true;
|
hasLoaded.value = true;
|
||||||
};
|
};
|
||||||
@ -489,52 +207,21 @@ watch(
|
|||||||
}
|
}
|
||||||
);
|
);
|
||||||
|
|
||||||
let resizeObserver: ResizeObserver | null = null;
|
// 激活时同步全局时间范围到本地日期选择器
|
||||||
|
|
||||||
watch(
|
watch(
|
||||||
() => props.isActive,
|
() => props.isActive,
|
||||||
active => {
|
active => {
|
||||||
if (active && chartRef.value) {
|
if (!active) return;
|
||||||
console.log(modelStore.filter.rangeTm);
|
console.log(modelStore.filter.rangeTm);
|
||||||
|
|
||||||
if (modelStore.filter.rangeTm.length > 0) {
|
if (modelStore.filter.rangeTm.length > 0) {
|
||||||
dateRange.value = [
|
dateRange.value = [
|
||||||
dayjs(modelStore.filter.rangeTm[0]),
|
dayjs(modelStore.filter.rangeTm[0]),
|
||||||
dayjs(modelStore.filter.rangeTm[1])
|
dayjs(modelStore.filter.rangeTm[1])
|
||||||
];
|
];
|
||||||
}
|
|
||||||
setTimeout(() => {
|
|
||||||
if (chartInstance) chartInstance.resize();
|
|
||||||
}, 200);
|
|
||||||
if (!resizeObserver) {
|
|
||||||
resizeObserver = new ResizeObserver(() => {
|
|
||||||
if (chartInstance) chartInstance.resize();
|
|
||||||
});
|
|
||||||
resizeObserver.observe(chartRef.value);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
);
|
);
|
||||||
|
|
||||||
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>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
@ -574,11 +261,6 @@ onBeforeUnmount(() => {
|
|||||||
position: relative;
|
position: relative;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
padding-top: 10px;
|
padding-top: 10px;
|
||||||
|
|
||||||
.chart-container {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.chart-empty {
|
.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-if="isExpand" src="@/assets/components/arrow-up.png" alt="" />
|
||||||
<img v-else src="@/assets/components/arrow-down.png" alt="" />
|
<img v-else src="@/assets/components/arrow-down.png" alt="" />
|
||||||
</div>
|
</div>
|
||||||
|
<slot name="title-right-content"></slot>
|
||||||
<div v-if="moreSelect.show">
|
<div v-if="moreSelect.show">
|
||||||
<a-tree-select
|
<a-tree-select
|
||||||
v-model:value="moreSelectValue"
|
v-model:value="moreSelectValue"
|
||||||
|
|||||||
@ -2130,7 +2130,7 @@ export class MapCesium implements MapInterface {
|
|||||||
if (!this.viewer || !layerConfig?.key) return;
|
if (!this.viewer || !layerConfig?.key) return;
|
||||||
|
|
||||||
// 基地裁切配置存储（与 2D 对齐：layer.type === 'vector' && layer.key === 'hydropBase'）
|
// 基地裁切配置存储（与 2D 对齐：layer.type === 'vector' && layer.key === 'hydropBase'）
|
||||||
if (layerConfig.type === 'vector' && layerConfig.key === 'hydropBase') {
|
if (layerConfig.type === 'vector' && layerConfig.id === 'hydropBase') {
|
||||||
this.hydropBaseConfig = layerConfig;
|
this.hydropBaseConfig = layerConfig;
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
@ -2598,16 +2598,19 @@ export class MapCesium implements MapInterface {
|
|||||||
_regionId: string,
|
_regionId: string,
|
||||||
isAll: boolean
|
isAll: boolean
|
||||||
): Promise<void> {
|
): Promise<void> {
|
||||||
|
console.log(_regionId, isAll);
|
||||||
if (!this.viewer || !this.hydropBaseConfig) {
|
if (!this.viewer || !this.hydropBaseConfig) {
|
||||||
console.warn('地图未初始化或 hydropBaseConfig 未配置');
|
console.warn('地图未初始化或 hydropBaseConfig 未配置');
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
console.log(_regionId, isAll);
|
||||||
|
|
||||||
// 取消正在进行的裁切请求
|
// 取消正在进行的裁切请求
|
||||||
if (this.clipRequestController) {
|
if (this.clipRequestController) {
|
||||||
this.clipRequestController.abort();
|
this.clipRequestController.abort();
|
||||||
this.clipRequestController = null;
|
this.clipRequestController = null;
|
||||||
}
|
}
|
||||||
|
console.log(this.BASEID);
|
||||||
|
|
||||||
this.BASEID = _regionId;
|
this.BASEID = _regionId;
|
||||||
|
|
||||||
|
|||||||
@ -205,7 +205,6 @@ export class MapOl implements MapInterface {
|
|||||||
}
|
}
|
||||||
this.popupManager.showPopup(undefined, undefined);
|
this.popupManager.showPopup(undefined, undefined);
|
||||||
this.popupManager.handleMapClick(evt.pixel, detectedFeature => {
|
this.popupManager.handleMapClick(evt.pixel, detectedFeature => {
|
||||||
console.log(detectedFeature);
|
|
||||||
if (detectedFeature.values_.sttpMap == 'ylfb') {
|
if (detectedFeature.values_.sttpMap == 'ylfb') {
|
||||||
modelStore.ylfbModalVisible = true;
|
modelStore.ylfbModalVisible = true;
|
||||||
modelStore.params = detectedFeature.values_;
|
modelStore.params = detectedFeature.values_;
|
||||||
@ -1876,6 +1875,8 @@ export class MapOl implements MapInterface {
|
|||||||
this.layerRegistry.delete(layer.key);
|
this.layerRegistry.delete(layer.key);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
console.log(layer);
|
||||||
|
|
||||||
if (layer.type === 'wmts') {
|
if (layer.type === 'wmts') {
|
||||||
if (!layer.url) return;
|
if (!layer.url) return;
|
||||||
const url = !isCache ? layer.url : layer.url_3d;
|
const url = !isCache ? layer.url : layer.url_3d;
|
||||||
@ -1993,7 +1994,8 @@ export class MapOl implements MapInterface {
|
|||||||
this.layerRegistry.set(layer.key, tileLayer);
|
this.layerRegistry.set(layer.key, tileLayer);
|
||||||
this.map.addLayer(tileLayer);
|
this.map.addLayer(tileLayer);
|
||||||
} else if (layer.type === 'vector') {
|
} else if (layer.type === 'vector') {
|
||||||
if (layer.key === 'hydropBase') {
|
console.log(layer);
|
||||||
|
if (layer.id === 'hydropBase') {
|
||||||
this.hydropBaseConfig = layer;
|
this.hydropBaseConfig = layer;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -2089,15 +2091,19 @@ export class MapOl implements MapInterface {
|
|||||||
_regionId: string,
|
_regionId: string,
|
||||||
isAll: boolean
|
isAll: boolean
|
||||||
): Promise<void> {
|
): Promise<void> {
|
||||||
|
console.log(_regionId, isAll);
|
||||||
|
console.log(_regionId, this.hydropBaseConfig);
|
||||||
if (!this.map || !this.hydropBaseConfig) {
|
if (!this.map || !this.hydropBaseConfig) {
|
||||||
console.warn('地图未初始化或 hydropBaseConfig 未配置');
|
console.warn('地图未初始化或 hydropBaseConfig 未配置');
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
console.log(123, 444);
|
||||||
|
|
||||||
if (this.clipRequestController) {
|
if (this.clipRequestController) {
|
||||||
this.clipRequestController.abort();
|
this.clipRequestController.abort();
|
||||||
this.clipRequestController = null;
|
this.clipRequestController = null;
|
||||||
}
|
}
|
||||||
|
console.log(this.BASEID);
|
||||||
|
|
||||||
this.BASEID = _regionId;
|
this.BASEID = _regionId;
|
||||||
|
|
||||||
|
|||||||
@ -125,6 +125,7 @@ import { useMapViewStore } from '@/modules/map/stores/map-view.store';
|
|||||||
import { useJidiSelectEventStore } from '@/store/modules/jidiSelectEvent';
|
import { useJidiSelectEventStore } from '@/store/modules/jidiSelectEvent';
|
||||||
import { useUiStore } from '@/store/modules/ui';
|
import { useUiStore } from '@/store/modules/ui';
|
||||||
import { useMapStore } from '@/store/modules/map';
|
import { useMapStore } from '@/store/modules/map';
|
||||||
|
import { useModelStore } from '@/store/modules/model';
|
||||||
import { DateSetting } from '@/utils/enumeration';
|
import { DateSetting } from '@/utils/enumeration';
|
||||||
import { getFishList, getFishPointList } from '@/api/map';
|
import { getFishList, getFishPointList } from '@/api/map';
|
||||||
|
|
||||||
@ -135,6 +136,7 @@ const mapViewStore = useMapViewStore();
|
|||||||
const uiStore = useUiStore();
|
const uiStore = useUiStore();
|
||||||
const jidiSelectEventStore = useJidiSelectEventStore();
|
const jidiSelectEventStore = useJidiSelectEventStore();
|
||||||
const mapStore = useMapStore();
|
const mapStore = useMapStore();
|
||||||
|
const modelStore = useModelStore();
|
||||||
const mapClass = MapClass.getInstance();
|
const mapClass = MapClass.getInstance();
|
||||||
const ENG_POINT_LAYER_KEY = 'eng_point';
|
const ENG_POINT_LAYER_KEY = 'eng_point';
|
||||||
const YLFB_POINT_LAYER_KEY = 'ylfb_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。
|
// 备注：切页时只重置本地表单输入，并通过编排器复位时间范围，不再直接改运行态 store。
|
||||||
watch(
|
watch(
|
||||||
() => route.path,
|
() => route.path,
|
||||||
@ -220,6 +231,7 @@ watch(
|
|||||||
anchorPointSelect: null,
|
anchorPointSelect: null,
|
||||||
fishSurveyZhuanZhi: false
|
fishSurveyZhuanZhi: false
|
||||||
};
|
};
|
||||||
|
handleSearch(false);
|
||||||
resetFishSurveyState();
|
resetFishSurveyState();
|
||||||
}
|
}
|
||||||
);
|
);
|
||||||
@ -587,6 +599,7 @@ watch(
|
|||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
formModel.value.anchorPointSelect = null;
|
formModel.value.anchorPointSelect = null;
|
||||||
|
handleSearch(false);
|
||||||
},
|
},
|
||||||
{ immediate: true }
|
{ immediate: true }
|
||||||
);
|
);
|
||||||
@ -628,6 +641,7 @@ watch(
|
|||||||
|
|
||||||
const handleCapacityChange = (value: string) => {
|
const handleCapacityChange = (value: string) => {
|
||||||
formModel.value.anchorPointSelect = null;
|
formModel.value.anchorPointSelect = null;
|
||||||
|
handleSearch(false);
|
||||||
mapOrchestrator.changeEngPointCapacity(value);
|
mapOrchestrator.changeEngPointCapacity(value);
|
||||||
};
|
};
|
||||||
|
|
||||||
@ -645,19 +659,32 @@ const focusSelectedAnchorPoint = () => {
|
|||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
mapOrchestrator.focusPoint(
|
// mapOrchestrator.focusPoint(
|
||||||
selectedValue,
|
// selectedValue,
|
||||||
uiStore.mapType === '3D' ? 8 : 14,
|
// uiStore.mapType === '3D' ? 8 : 14,
|
||||||
isFishSurveyMode.value ? anchorPointOptions.value : undefined
|
// isFishSurveyMode.value ? anchorPointOptions.value : undefined
|
||||||
);
|
// );
|
||||||
};
|
};
|
||||||
|
|
||||||
// 备注：搜索定位只分发定位命令，不在筛选组件里直接操作地图实例。
|
// 备注：搜索定位只分发定位命令，不在筛选组件里直接操作地图实例。
|
||||||
const handleAnchorPointChange = (value: string) => {
|
const handleAnchorPointChange = (value: string) => {
|
||||||
|
if (value == null) handleSearch(false);
|
||||||
if (!value) return;
|
if (!value) return;
|
||||||
focusSelectedAnchorPoint();
|
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(
|
watch(
|
||||||
() => uiStore.mapSwitchCompletedTick,
|
() => uiStore.mapSwitchCompletedTick,
|
||||||
async (newVal, oldVal) => {
|
async (newVal, oldVal) => {
|
||||||
|
|||||||
@ -133,6 +133,7 @@ export const useMapOrchestrator = () => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
if (!initializedBaseLayerKeys.has(item.key)) {
|
if (!initializedBaseLayerKeys.has(item.key)) {
|
||||||
|
console.log(item.config);
|
||||||
mapClass.addBaseDataLayer(item.config, item.checked === 1);
|
mapClass.addBaseDataLayer(item.config, item.checked === 1);
|
||||||
initializedBaseLayerKeys.add(item.key);
|
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 wtConfig = ref<{ ioWtrv?: boolean; hasRstcdWtvt?: boolean }>({}); // 水温配置
|
||||||
const wqShow = ref<boolean>(false); // 水质 AI 预测显示
|
const wqShow = ref<boolean>(false); // 水质 AI 预测显示
|
||||||
const fishTabInfo = ref<any>(null); // 鱼类监测数据信息
|
const fishTabInfo = ref<any>(null); // 鱼类监测数据信息
|
||||||
|
const selectedAnchorPoint = ref<any>(null); // 地图筛选下拉选中的点位对象（供基本信息等面板消费）
|
||||||
|
|
||||||
const params = ref<{
|
const params = ref<{
|
||||||
sttp: string;
|
sttp: string;
|
||||||
@ -47,14 +48,14 @@ export const useModelStore = defineStore('model', () => {
|
|||||||
sttpMap: '',
|
sttpMap: '',
|
||||||
dtinType: '',
|
dtinType: '',
|
||||||
bldstt: '',
|
bldstt: '',
|
||||||
bldsttCcode:''
|
bldsttCcode: ''
|
||||||
});
|
});
|
||||||
const filter = ref({
|
const filter = ref({
|
||||||
stllgzlx: '', // 生态流量 - 规则类型
|
stllgzlx: '', // 生态流量 - 规则类型
|
||||||
stllTmType: '', // 生态流量 - 时间类型
|
stllTmType: '', // 生态流量 - 时间类型
|
||||||
tm: '',
|
tm: '',
|
||||||
rangeTm: [],
|
rangeTm: [],
|
||||||
year:'',
|
year: ''
|
||||||
});
|
});
|
||||||
return {
|
return {
|
||||||
params,
|
params,
|
||||||
@ -75,6 +76,7 @@ export const useModelStore = defineStore('model', () => {
|
|||||||
aiSites,
|
aiSites,
|
||||||
wtConfig,
|
wtConfig,
|
||||||
wqShow,
|
wqShow,
|
||||||
fishTabInfo
|
fishTabInfo,
|
||||||
|
selectedAnchorPoint
|
||||||
};
|
};
|
||||||
});
|
});
|
||||||
|
|||||||
@ -10,16 +10,23 @@ export const useUiStore = defineStore('ui', () => {
|
|||||||
const isRoaming = ref(false);
|
const isRoaming = ref(false);
|
||||||
// dim 切换时跳过漫游相机还原（由地图模式切换自行处理）
|
// dim 切换时跳过漫游相机还原（由地图模式切换自行处理）
|
||||||
const skipRoamCameraRestore = ref(false);
|
const skipRoamCameraRestore = ref(false);
|
||||||
|
// 搜索抽屉状态
|
||||||
|
const searchDrawerOpen = ref(false);
|
||||||
|
|
||||||
// 切换抽屉状态
|
// 切换抽屉状态
|
||||||
const toggleDrawer = () => {
|
const toggleDrawer = () => {
|
||||||
drawerOpen.value = !drawerOpen.value;
|
drawerOpen.value = !drawerOpen.value;
|
||||||
};
|
};
|
||||||
|
|
||||||
// 设置抽屉状态
|
// 设置抽屉状态
|
||||||
const setDrawerOpen = (open: boolean) => {
|
const setDrawerOpen = (open: boolean) => {
|
||||||
drawerOpen.value = open;
|
drawerOpen.value = open;
|
||||||
};
|
};
|
||||||
|
// 设置搜索抽屉状态
|
||||||
|
const setSearchDrawerOpen = (open: boolean) => {
|
||||||
|
console.log(open);
|
||||||
|
|
||||||
|
searchDrawerOpen.value = open;
|
||||||
|
};
|
||||||
|
|
||||||
const markMapSwitchCompleted = () => {
|
const markMapSwitchCompleted = () => {
|
||||||
mapSwitchCompletedTick.value += 1;
|
mapSwitchCompletedTick.value += 1;
|
||||||
@ -31,6 +38,8 @@ export const useUiStore = defineStore('ui', () => {
|
|||||||
skipRoamCameraRestore,
|
skipRoamCameraRestore,
|
||||||
toggleDrawer,
|
toggleDrawer,
|
||||||
setDrawerOpen,
|
setDrawerOpen,
|
||||||
|
setSearchDrawerOpen,
|
||||||
|
searchDrawerOpen,
|
||||||
mapType,
|
mapType,
|
||||||
mapSwitchCompletedTick,
|
mapSwitchCompletedTick,
|
||||||
markMapSwitchCompleted
|
markMapSwitchCompleted
|
||||||
|
|||||||
@ -1,20 +1,23 @@
|
|||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import JidiSelectorMod from "@/modules/jidiSelectorMod.vue";
|
import { useUiStore } from '@/store/modules/ui';
|
||||||
import RightDrawer from "@/components/RightDrawer/index.vue";
|
import basicInfoMod from '@/modules/rightSearchDrawer/basicInfo/index.vue';
|
||||||
import GuoYuSheShiJieShao from "@/modules/guoyusheshijieshao/index.vue"
|
import JidiSelectorMod from '@/modules/jidiSelectorMod.vue';
|
||||||
import GuoYuSheShiJianSheQingKuang from "@/modules/guoyusheshijiansheqingkuang/index.vue"
|
import RightDrawer from '@/components/RightDrawer/index.vue';
|
||||||
import GuoYuJianCeTJ from "@/modules/guoyujiance/index.vue"
|
import GuoYuSheShiJieShao from '@/modules/guoyusheshijieshao/index.vue';
|
||||||
import GYZLLB from "@/modules/GYZLLB/index.vue"
|
import GuoYuSheShiJianSheQingKuang from '@/modules/guoyusheshijiansheqingkuang/index.vue';
|
||||||
import { useJidiSelectEventStore } from "@/store/modules/jidiSelectEvent";
|
import GuoYuJianCeTJ from '@/modules/guoyujiance/index.vue';
|
||||||
import { ref,watch} from 'vue';
|
import GYZLLB from '@/modules/GYZLLB/index.vue';
|
||||||
|
import { useJidiSelectEventStore } from '@/store/modules/jidiSelectEvent';
|
||||||
|
import { ref, watch } from 'vue';
|
||||||
const JidiSelectEventStore = useJidiSelectEventStore();
|
const JidiSelectEventStore = useJidiSelectEventStore();
|
||||||
const baseid = ref('')
|
const uiStore = useUiStore();
|
||||||
|
const baseid = ref('');
|
||||||
watch(
|
watch(
|
||||||
() => JidiSelectEventStore.selectedItem,
|
() => JidiSelectEventStore.selectedItem,
|
||||||
(newVal) => {
|
newVal => {
|
||||||
baseid.value = newVal.wbsCode;
|
baseid.value = newVal.wbsCode;
|
||||||
},
|
},
|
||||||
{ deep: true, immediate: true }
|
{ deep: true, immediate: true }
|
||||||
);
|
);
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
@ -25,10 +28,15 @@ watch(
|
|||||||
</div>
|
</div>
|
||||||
<div class="rightContent">
|
<div class="rightContent">
|
||||||
<RightDrawer>
|
<RightDrawer>
|
||||||
<GuoYuSheShiJieShao v-if="baseid != 'all'" />
|
<div v-show="uiStore.searchDrawerOpen">
|
||||||
<GuoYuSheShiJianSheQingKuang v-if="baseid == 'all'" />
|
<basicInfoMod />
|
||||||
<GuoYuJianCeTJ />
|
</div>
|
||||||
<GYZLLB title="过鱼总量" />
|
<div v-show="!uiStore.searchDrawerOpen">
|
||||||
|
<GuoYuSheShiJieShao v-if="baseid != 'all'" />
|
||||||
|
<GuoYuSheShiJianSheQingKuang v-if="baseid == 'all'" />
|
||||||
|
<GuoYuJianCeTJ />
|
||||||
|
<GYZLLB title="过鱼总量" />
|
||||||
|
</div>
|
||||||
</RightDrawer>
|
</RightDrawer>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -1,21 +1,31 @@
|
|||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import JidiSelectorMod from "@/modules/jidiSelectorMod.vue";
|
import { useUiStore } from '@/store/modules/ui';
|
||||||
import RightDrawer from "@/components/RightDrawer/index.vue";
|
import JidiSelectorMod from '@/modules/jidiSelectorMod.vue';
|
||||||
import HuanbaoMod from "@/modules/huanbaoMod/index.vue" // 环保设施建设情况
|
import RightDrawer from '@/components/RightDrawer/index.vue';
|
||||||
import Dianxingcuoshijieshao from "@/modules/dianxingcuoshijieshao/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>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div class="moduleContent">
|
<div class="moduleContent">
|
||||||
<div class="leftContent">
|
<div class="leftContent">
|
||||||
<JidiSelectorMod />
|
<JidiSelectorMod />
|
||||||
</div>
|
|
||||||
<div class="rightContent">
|
|
||||||
<RightDrawer>
|
|
||||||
<HuanbaoMod />
|
|
||||||
<Dianxingcuoshijieshao />
|
|
||||||
</RightDrawer>
|
|
||||||
</div>
|
|
||||||
</div>
|
</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>
|
</template>
|
||||||
<style scoped lang="scss"></style>
|
<style scoped lang="scss"></style>
|
||||||
|
|||||||
@ -1,32 +1,40 @@
|
|||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { ref, watch } from "vue";
|
import { ref, watch } from 'vue';
|
||||||
import JidiSelectorMod from "@/modules/jidiSelectorMod.vue";
|
import { useUiStore } from '@/store/modules/ui';
|
||||||
import RightDrawer from "@/components/RightDrawer/index.vue";
|
import basicInfoMod from '@/modules/rightSearchDrawer/basicInfo/index.vue';
|
||||||
import HuanbaozdjcgzkzQK from "@/modules/huanbaozdjcgzkzQK/index.vue";
|
import JidiSelectorMod from '@/modules/jidiSelectorMod.vue';
|
||||||
import SZYCBH from "@/modules/waterQuality/index.vue"
|
import RightDrawer from '@/components/RightDrawer/index.vue';
|
||||||
import { useJidiSelectEventStore } from "@/store/modules/jidiSelectEvent";
|
import HuanbaozdjcgzkzQK from '@/modules/huanbaozdjcgzkzQK/index.vue';
|
||||||
|
import SZYCBH from '@/modules/waterQuality/index.vue';
|
||||||
|
import { useJidiSelectEventStore } from '@/store/modules/jidiSelectEvent';
|
||||||
const JidiSelectEventStore = useJidiSelectEventStore();
|
const JidiSelectEventStore = useJidiSelectEventStore();
|
||||||
const wbsCode = ref('')
|
const wbsCode = ref('');
|
||||||
|
const uiStore = useUiStore();
|
||||||
watch(
|
watch(
|
||||||
() => JidiSelectEventStore.selectedItem,
|
() => JidiSelectEventStore.selectedItem,
|
||||||
(newVal) => {
|
newVal => {
|
||||||
wbsCode.value = newVal.wbsCode
|
wbsCode.value = newVal.wbsCode;
|
||||||
},
|
},
|
||||||
{ deep: true, immediate: true }
|
{ deep: true, immediate: true }
|
||||||
);
|
);
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div class="moduleContent">
|
<div class="moduleContent">
|
||||||
<div class="leftContent">
|
<div class="leftContent">
|
||||||
<JidiSelectorMod />
|
<JidiSelectorMod />
|
||||||
</div>
|
</div>
|
||||||
<div class="rightContent">
|
<div class="rightContent">
|
||||||
<RightDrawer>
|
<RightDrawer>
|
||||||
|
<div v-show="uiStore.searchDrawerOpen">
|
||||||
|
<basicInfoMod />
|
||||||
|
</div>
|
||||||
|
<div v-show="!uiStore.searchDrawerOpen">
|
||||||
<HuanbaozdjcgzkzQK />
|
<HuanbaozdjcgzkzQK />
|
||||||
<SZYCBH v-if="wbsCode != 'all'" />
|
<SZYCBH v-if="wbsCode != 'all'" />
|
||||||
</RightDrawer>
|
</div>
|
||||||
</div>
|
</RightDrawer>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<style scoped lang="scss"></style>
|
<style scoped lang="scss"></style>
|
||||||
|
|||||||
@ -1,10 +1,12 @@
|
|||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { onActivated, onMounted, ref } from 'vue';
|
import { useUiStore } from '@/store/modules/ui';
|
||||||
import JidiSelectorMod from '@/modules/jidiSelectorMod.vue';
|
import JidiSelectorMod from '@/modules/jidiSelectorMod.vue';
|
||||||
import RightDrawer from '@/components/RightDrawer/index.vue';
|
import RightDrawer from '@/components/RightDrawer/index.vue';
|
||||||
import jidiInfoMod from '@/modules/jidiInfoMod/index.vue';
|
import jidiInfoMod from '@/modules/jidiInfoMod/index.vue';
|
||||||
import shuidianhuangjingjieruMod from '@/modules/shuidianhuangjingjieruMod/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>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
@ -14,8 +16,14 @@ import { useModelStore } from '@/store/modules/model';
|
|||||||
</div>
|
</div>
|
||||||
<div class="rightContent">
|
<div class="rightContent">
|
||||||
<RightDrawer>
|
<RightDrawer>
|
||||||
<jidiInfoMod />
|
<div v-show="uiStore.searchDrawerOpen">
|
||||||
<shuidianhuangjingjieruMod />
|
<basicInfoMod />
|
||||||
|
<monitorInfoMod />
|
||||||
|
</div>
|
||||||
|
<div v-show="!uiStore.searchDrawerOpen">
|
||||||
|
<jidiInfoMod />
|
||||||
|
<shuidianhuangjingjieruMod />
|
||||||
|
</div>
|
||||||
</RightDrawer>
|
</RightDrawer>
|
||||||
</div>
|
</div>
|
||||||
</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">
|
<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 JidiSelectorMod from '@/modules/jidiSelectorMod.vue';
|
||||||
import RightDrawer from '@/components/RightDrawer/index.vue';
|
import RightDrawer from '@/components/RightDrawer/index.vue';
|
||||||
import QiXiDiBaoHuGongZuoKaiZhan from '@/modules/qixidibaohugongzuokaizhanQK/index.vue';
|
import QiXiDiBaoHuGongZuoKaiZhan from '@/modules/qixidibaohugongzuokaizhanQK/index.vue';
|
||||||
import QixidijchuXx from '@/modules/qixidijchuXx/index.vue';
|
import QixidijchuXx from '@/modules/qixidijchuXx/index.vue';
|
||||||
import QiXiDiShuiWenBianHua from '@/modules/qixidishuiwenbianhua/index.vue';
|
import QiXiDiShuiWenBianHua from '@/modules/qixidishuiwenbianhua/index.vue';
|
||||||
import QiXiDiLiuLiangBianHua from '@/modules/qixidiliuliangbianhua/index.vue';
|
import QiXiDiLiuLiangBianHua from '@/modules/qixidiliuliangbianhua/index.vue';
|
||||||
|
const uiStore = useUiStore();
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
@ -14,10 +17,15 @@ import QiXiDiLiuLiangBianHua from '@/modules/qixidiliuliangbianhua/index.vue';
|
|||||||
</div>
|
</div>
|
||||||
<div class="rightContent">
|
<div class="rightContent">
|
||||||
<RightDrawer>
|
<RightDrawer>
|
||||||
<QiXiDiBaoHuGongZuoKaiZhan />
|
<div v-show="uiStore.searchDrawerOpen">
|
||||||
<QiXiDiShuiWenBianHua />
|
<basicInfoMod />
|
||||||
<QiXiDiLiuLiangBianHua />
|
</div>
|
||||||
<QixidijchuXx />
|
<div v-show="!uiStore.searchDrawerOpen">
|
||||||
|
<QiXiDiBaoHuGongZuoKaiZhan />
|
||||||
|
<QiXiDiShuiWenBianHua />
|
||||||
|
<QiXiDiLiuLiangBianHua />
|
||||||
|
<QixidijchuXx />
|
||||||
|
</div>
|
||||||
</RightDrawer>
|
</RightDrawer>
|
||||||
</div>
|
</div>
|
||||||
</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">
|
<script setup lang="ts">
|
||||||
import { ref, watch } from 'vue';
|
import { ref, watch } from 'vue';
|
||||||
|
import { useUiStore } from '@/store/modules/ui';
|
||||||
import JidiSelectorMod from '@/modules/jidiSelectorMod.vue';
|
import JidiSelectorMod from '@/modules/jidiSelectorMod.vue';
|
||||||
import RightDrawer from '@/components/RightDrawer/index.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 XFFS from '@/modules/shengTaiLiuLiangXieFangSheShiMod/xieFangFangShi/index.vue'; //
|
||||||
import XFFB from '@/modules/shengTaiLiuLiangXieFangSheShiMod/xieFangFenBu/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';
|
import { useJidiSelectEventStore } from '@/store/modules/jidiSelectEvent';
|
||||||
const JidiSelectEventStore = useJidiSelectEventStore();
|
const JidiSelectEventStore = useJidiSelectEventStore();
|
||||||
|
const uiStore = useUiStore();
|
||||||
let wbsCode = ref('');
|
let wbsCode = ref('');
|
||||||
watch(
|
watch(
|
||||||
() => JidiSelectEventStore.selectedItem,
|
() => JidiSelectEventStore.selectedItem,
|
||||||
@ -27,9 +30,14 @@ watch(
|
|||||||
</div>
|
</div>
|
||||||
<div class="rightContent">
|
<div class="rightContent">
|
||||||
<RightDrawer>
|
<RightDrawer>
|
||||||
<XFFS></XFFS>
|
<div v-show="uiStore.searchDrawerOpen">
|
||||||
<XFFB v-if="wbsCode == 'all'"> </XFFB>
|
<basicInfoMod />
|
||||||
<STLLXZYCBH v-if="wbsCode != 'all'" ></STLLXZYCBH>
|
</div>
|
||||||
|
<div v-show="!uiStore.searchDrawerOpen">
|
||||||
|
<XFFS></XFFS>
|
||||||
|
<XFFB v-if="wbsCode == 'all'"> </XFFB>
|
||||||
|
<STLLXZYCBH v-if="wbsCode != 'all'"></STLLXZYCBH>
|
||||||
|
</div>
|
||||||
</RightDrawer>
|
</RightDrawer>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -1,8 +1,11 @@
|
|||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import JidiSelectorMod from "@/modules/jidiSelectorMod.vue";
|
import { useUiStore } from '@/store/modules/ui';
|
||||||
import RightDrawer from "@/components/RightDrawer/index.vue";
|
import basicInfoMod from '@/modules/rightSearchDrawer/basicInfo/index.vue';
|
||||||
import DiWenSJHSSLXZCJJRQK from "@/modules/diwenshuijianhuansheshileixingzuchengjijieruqingkuang/index.vue"
|
import JidiSelectorMod from '@/modules/jidiSelectorMod.vue';
|
||||||
import SheShiLeiXingJieShao from "@/modules/sheshileixingjieshao/index.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>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
@ -12,8 +15,13 @@ import SheShiLeiXingJieShao from "@/modules/sheshileixingjieshao/index.vue"
|
|||||||
</div>
|
</div>
|
||||||
<div class="rightContent">
|
<div class="rightContent">
|
||||||
<RightDrawer>
|
<RightDrawer>
|
||||||
<SheShiLeiXingJieShao />
|
<div v-show="uiStore.searchDrawerOpen">
|
||||||
<DiWenSJHSSLXZCJJRQK />
|
<basicInfoMod />
|
||||||
|
</div>
|
||||||
|
<div v-show="!uiStore.searchDrawerOpen">
|
||||||
|
<SheShiLeiXingJieShao />
|
||||||
|
<DiWenSJHSSLXZCJJRQK />
|
||||||
|
</div>
|
||||||
</RightDrawer>
|
</RightDrawer>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -1,8 +1,11 @@
|
|||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import JidiSelectorMod from "@/modules/jidiSelectorMod.vue";
|
import { useUiStore } from '@/store/modules/ui';
|
||||||
import RightDrawer from "@/components/RightDrawer/index.vue";
|
import basicInfoMod from '@/modules/rightSearchDrawer/basicInfo/index.vue';
|
||||||
import MonthlyAvgWaterTemCompareHistory from "@/modules/monthlyAvgWaterTemCompareHistory/index.vue"; // 月平均水温历史对比
|
import JidiSelectorMod from '@/modules/jidiSelectorMod.vue';
|
||||||
import ShuiWenNianNeiFenBu from "@/modules/shuiWenNianNeiFenBu/index.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>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
@ -12,8 +15,13 @@ import ShuiWenNianNeiFenBu from "@/modules/shuiWenNianNeiFenBu/index.vue"; //
|
|||||||
</div>
|
</div>
|
||||||
<div class="rightContent">
|
<div class="rightContent">
|
||||||
<RightDrawer>
|
<RightDrawer>
|
||||||
<MonthlyAvgWaterTemCompareHistory />
|
<div v-show="uiStore.searchDrawerOpen">
|
||||||
<ShuiWenNianNeiFenBu />
|
<basicInfoMod />
|
||||||
|
</div>
|
||||||
|
<div v-show="!uiStore.searchDrawerOpen">
|
||||||
|
<MonthlyAvgWaterTemCompareHistory />
|
||||||
|
<ShuiWenNianNeiFenBu />
|
||||||
|
</div>
|
||||||
</RightDrawer>
|
</RightDrawer>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -1,10 +1,13 @@
|
|||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import JidiSelectorMod from "@/modules/jidiSelectorMod.vue";
|
import { useUiStore } from '@/store/modules/ui';
|
||||||
import RightDrawer from "@/components/RightDrawer/index.vue";
|
import basicInfoMod from '@/modules/rightSearchDrawer/basicInfo/index.vue';
|
||||||
import ChuixiangshuiwenChangeMod from "@/modules/chuixiangshuiwenChangeMod/index.vue" // 垂向水温变化
|
import JidiSelectorMod from '@/modules/jidiSelectorMod.vue';
|
||||||
import ChurukushuiwenMod from "@/modules/churukushuiwenMod/index.vue" // 出入库水温变化
|
import RightDrawer from '@/components/RightDrawer/index.vue';
|
||||||
import YanchengshuiwenChangeMod from "@/modules/yanchengshuiwenChangeMod/index.vue" // 沿程水温变化
|
import ChuixiangshuiwenChangeMod from '@/modules/chuixiangshuiwenChangeMod/index.vue'; // 垂向水温变化
|
||||||
import ShuiwenJCGZKZQK from "@/modules/shuiwenjiancegongzuokaizhangqingkuang/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>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
@ -14,10 +17,15 @@ import ShuiwenJCGZKZQK from "@/modules/shuiwenjiancegongzuokaizhangqingkuang/ind
|
|||||||
</div>
|
</div>
|
||||||
<div class="rightContent">
|
<div class="rightContent">
|
||||||
<RightDrawer>
|
<RightDrawer>
|
||||||
<ShuiwenJCGZKZQK />
|
<div v-show="uiStore.searchDrawerOpen">
|
||||||
<YanchengshuiwenChangeMod />
|
<basicInfoMod />
|
||||||
<ChuixiangshuiwenChangeMod />
|
</div>
|
||||||
<ChurukushuiwenMod />
|
<div v-show="!uiStore.searchDrawerOpen">
|
||||||
|
<ShuiwenJCGZKZQK />
|
||||||
|
<YanchengshuiwenChangeMod />
|
||||||
|
<ChuixiangshuiwenChangeMod />
|
||||||
|
<ChurukushuiwenMod />
|
||||||
|
</div>
|
||||||
</RightDrawer>
|
</RightDrawer>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -1,5 +1,7 @@
|
|||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { ref, watch } from 'vue';
|
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 JidiSelectorMod from '@/modules/jidiSelectorMod.vue';
|
||||||
import RightDrawer from '@/components/RightDrawer/index.vue';
|
import RightDrawer from '@/components/RightDrawer/index.vue';
|
||||||
import ShuiZhiJianCeGongZuoQingKuang from '@/modules/shuizhijiancegongzuoQK/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 { useJidiSelectEventStore } from '@/store/modules/jidiSelectEvent';
|
||||||
import SZYCBH from '@/modules/waterQuality/index.vue';
|
import SZYCBH from '@/modules/waterQuality/index.vue';
|
||||||
const JidiSelectEventStore = useJidiSelectEventStore();
|
const JidiSelectEventStore = useJidiSelectEventStore();
|
||||||
|
const uiStore = useUiStore();
|
||||||
const wbsCode = ref('');
|
const wbsCode = ref('');
|
||||||
watch(
|
watch(
|
||||||
() => JidiSelectEventStore.selectedItem,
|
() => JidiSelectEventStore.selectedItem,
|
||||||
@ -26,9 +29,14 @@ watch(
|
|||||||
</div>
|
</div>
|
||||||
<div class="rightContent">
|
<div class="rightContent">
|
||||||
<RightDrawer>
|
<RightDrawer>
|
||||||
<ShuiZhiJianCeGongZuoQingKuang />
|
<div v-show="uiStore.searchDrawerOpen">
|
||||||
<EnvironmentalQuality />
|
<basicInfoMod />
|
||||||
<SZYCBH v-if="wbsCode != 'all'"></SZYCBH>
|
</div>
|
||||||
|
<div v-show="!uiStore.searchDrawerOpen">
|
||||||
|
<ShuiZhiJianCeGongZuoQingKuang />
|
||||||
|
<EnvironmentalQuality />
|
||||||
|
<SZYCBH v-if="wbsCode != 'all'"></SZYCBH>
|
||||||
|
</div>
|
||||||
</RightDrawer>
|
</RightDrawer>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -585,7 +585,9 @@ onMounted(() => {
|
|||||||
mode="horizontal"
|
mode="horizontal"
|
||||||
@select="handleSelect"
|
@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="2">全过程数据管理子系统</el-menu-item>
|
||||||
<el-menu-item index="4">填报管理子系统</el-menu-item>
|
<el-menu-item index="4">填报管理子系统</el-menu-item>
|
||||||
</el-menu>
|
</el-menu>
|
||||||
@ -630,7 +632,6 @@ onMounted(() => {
|
|||||||
v-loading="loading"
|
v-loading="loading"
|
||||||
ref="multipleTable"
|
ref="multipleTable"
|
||||||
:data="tableData"
|
:data="tableData"
|
||||||
default-expand-all
|
|
||||||
tooltip-effect="dark"
|
tooltip-effect="dark"
|
||||||
style="width: 100%; height: calc(104vh - 290px)"
|
style="width: 100%; height: calc(104vh - 290px)"
|
||||||
row-key="id"
|
row-key="id"
|
||||||
@ -679,8 +680,12 @@ onMounted(() => {
|
|||||||
align="center"
|
align="center"
|
||||||
>
|
>
|
||||||
<template #default="scope">
|
<template #default="scope">
|
||||||
<span v-if="scope.row.systemcode == '1'">水电水利建设项目全过程环境管理信息平台</span>
|
<span v-if="scope.row.systemcode == '1'"
|
||||||
<span v-else-if="scope.row.systemcode == '2'">全过程数据管理子系统</span>
|
>水电水利建设项目全过程环境管理信息平台</span
|
||||||
|
>
|
||||||
|
<span v-else-if="scope.row.systemcode == '2'"
|
||||||
|
>全过程数据管理子系统</span
|
||||||
|
>
|
||||||
<span v-else>填报管理子系统</span>
|
<span v-else>填报管理子系统</span>
|
||||||
</template>
|
</template>
|
||||||
</el-table-column>
|
</el-table-column>
|
||||||
|
|||||||
@ -1,19 +1,22 @@
|
|||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { ref, watch } from "vue";
|
import { ref, watch } from 'vue';
|
||||||
import JidiSelectorMod from "@/modules/jidiSelectorMod.vue";
|
import JidiSelectorMod from '@/modules/jidiSelectorMod.vue';
|
||||||
import RightDrawer from "@/components/RightDrawer/index.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 ZengZhiJiHuaWanChengQingKuang from '@/modules/zengZhiJiHuaWanChengQingKuang/index.vue';
|
||||||
import ZengZhiZhanJieShaoMod from "@/modules/zengZhiZhanJieShaoMod/index.vue"
|
import ZengZhiZhanJieShaoMod from '@/modules/zengZhiZhanJieShaoMod/index.vue';
|
||||||
import ZZZJSYXQKTT from "@/modules/zengzhizhanjiansheyunxing/index.vue"
|
import ZZZJSYXQKTT from '@/modules/zengzhizhanjiansheyunxing/index.vue';
|
||||||
import ZZZYXSJTJ from "@/modules/zengzhizhanyunxingsjtj/index.vue"
|
import ZZZYXSJTJ from '@/modules/zengzhizhanyunxingsjtj/index.vue';
|
||||||
import FLZLLB from "@/modules/GYZLLB/index.vue"
|
import FLZLLB from '@/modules/GYZLLB/index.vue';
|
||||||
import { useJidiSelectEventStore } from "@/store/modules/jidiSelectEvent";
|
import { useJidiSelectEventStore } from '@/store/modules/jidiSelectEvent';
|
||||||
const JidiSelectEventStore = useJidiSelectEventStore();
|
const JidiSelectEventStore = useJidiSelectEventStore();
|
||||||
|
const uiStore = useUiStore();
|
||||||
const wbsCode = ref('all');
|
const wbsCode = ref('all');
|
||||||
watch(
|
watch(
|
||||||
() => JidiSelectEventStore.selectedItem,
|
() => JidiSelectEventStore.selectedItem,
|
||||||
(newVal) => {
|
newVal => {
|
||||||
console.log(newVal);
|
console.log(newVal);
|
||||||
if (newVal.wbsCode == 'all') {
|
if (newVal.wbsCode == 'all') {
|
||||||
wbsCode.value = 'all';
|
wbsCode.value = 'all';
|
||||||
@ -21,7 +24,7 @@ watch(
|
|||||||
wbsCode.value = newVal.wbsCode;
|
wbsCode.value = newVal.wbsCode;
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
{ deep: true, immediate: true }
|
{ deep: true, immediate: true }
|
||||||
);
|
);
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
@ -32,11 +35,16 @@ watch(
|
|||||||
</div>
|
</div>
|
||||||
<div class="rightContent">
|
<div class="rightContent">
|
||||||
<RightDrawer>
|
<RightDrawer>
|
||||||
<ZZZJSYXQKTT />
|
<div v-show="uiStore.searchDrawerOpen">
|
||||||
<ZengZhiZhanJieShaoMod v-if="wbsCode != 'all'" />
|
<basicInfoMod />
|
||||||
<ZengZhiJiHuaWanChengQingKuang v-if="wbsCode != 'all'" />
|
</div>
|
||||||
<FLZLLB title="放流总量" />
|
<div v-show="!uiStore.searchDrawerOpen">
|
||||||
<ZZZYXSJTJ />
|
<ZZZJSYXQKTT />
|
||||||
|
<ZengZhiZhanJieShaoMod v-if="wbsCode != 'all'" />
|
||||||
|
<ZengZhiJiHuaWanChengQingKuang v-if="wbsCode != 'all'" />
|
||||||
|
<FLZLLB title="放流总量" />
|
||||||
|
<ZZZYXSJTJ />
|
||||||
|
</div>
|
||||||
</RightDrawer>
|
</RightDrawer>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -1,16 +1,19 @@
|
|||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { ref, watch } from "vue";
|
import { ref, watch } from 'vue';
|
||||||
import JidiSelectorMod from "@/modules/jidiSelectorMod.vue";
|
import { useUiStore } from '@/store/modules/ui';
|
||||||
import RightDrawer from "@/components/RightDrawer/index.vue";
|
import basicInfoMod from '@/modules/rightSearchDrawer/basicInfo/index.vue';
|
||||||
import ZhiWuYuanJianSheJiJieRuQingKuangBar from "@/modules/ZhenXiZhiWuYuanMod/ZhiWuYuanJianSheJiJieRuQingKuangBar/index.vue"; // 植物园建设及接入情况
|
import JidiSelectorMod from '@/modules/jidiSelectorMod.vue';
|
||||||
import Dwjzqk from "@/modules/ZhenXiZhiWuYuanMod/Dwjzqk/index.vue"
|
import RightDrawer from '@/components/RightDrawer/index.vue';
|
||||||
import JZZQKJS from "@/modules/DongWuJiuZhuZhan/JiuZhuZhanQingKuangJieShao.vue"; // 救助站情况介绍
|
import ZhiWuYuanJianSheJiJieRuQingKuangBar from '@/modules/ZhenXiZhiWuYuanMod/ZhiWuYuanJianSheJiJieRuQingKuangBar/index.vue'; // 植物园建设及接入情况
|
||||||
import { useJidiSelectEventStore } from "@/store/modules/jidiSelectEvent";
|
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 JidiSelectEventStore = useJidiSelectEventStore();
|
||||||
const wbsCode = ref('all')
|
const uiStore = useUiStore();
|
||||||
|
const wbsCode = ref('all');
|
||||||
watch(
|
watch(
|
||||||
() => JidiSelectEventStore.selectedItem,
|
() => JidiSelectEventStore.selectedItem,
|
||||||
(newVal) => {
|
newVal => {
|
||||||
console.log(newVal);
|
console.log(newVal);
|
||||||
if (newVal.wbsCode == 'all') {
|
if (newVal.wbsCode == 'all') {
|
||||||
wbsCode.value = 'all';
|
wbsCode.value = 'all';
|
||||||
@ -29,9 +32,14 @@ watch(
|
|||||||
</div>
|
</div>
|
||||||
<div class="rightContent">
|
<div class="rightContent">
|
||||||
<RightDrawer>
|
<RightDrawer>
|
||||||
<JZZQKJS v-if="wbsCode!='all'" />
|
<div v-show="uiStore.searchDrawerOpen">
|
||||||
<ZhiWuYuanJianSheJiJieRuQingKuangBar v-if="wbsCode=='all'" />
|
<basicInfoMod />
|
||||||
<Dwjzqk />
|
</div>
|
||||||
|
<div v-show="!uiStore.searchDrawerOpen">
|
||||||
|
<JZZQKJS v-if="wbsCode != 'all'" />
|
||||||
|
<ZhiWuYuanJianSheJiJieRuQingKuangBar v-if="wbsCode == 'all'" />
|
||||||
|
<Dwjzqk />
|
||||||
|
</div>
|
||||||
</RightDrawer>
|
</RightDrawer>
|
||||||
</div>
|
</div>
|
||||||
</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