@yangyongtao/gaea 1.1.9 → 1.1.11

package/src/components/HydrologicStationDialog.vue

@@ -0,0 +1,435 @@
+<template>
+  <CommonDialog
+    :modelValue="show"
+    :title="title"
+    :showFooter="false"
+    closable
+    @close="show = false"
+    @update:modelValue="show = $event"
+  >
+    <div class="hydrologic-container">
+      <!-- 图表模式 -->
+      <div v-show="tab === 'chart'">
+        <div class="hydrologic-stat-bar">
+          <div class="stat-item">
+            <span class="stat-label">累计雨量</span>
+            <span class="stat-value">{{ totalRain.toFixed(1) }}</span>
+            <span class="stat-unit">mm</span>
+          </div>
+          <div class="stat-item">
+            <span class="stat-label">当前水位</span>
+            <span class="stat-value">{{ waterLevel.toFixed(2) }}</span>
+            <span class="stat-unit">m</span>
+          </div>
+        </div>
+        <div class="second-row">
+          <div class="time-range-area">
+            <div class="time-range-tabs">
+              <span class="time-tab" :class="{ active: timeRange === '24h' }" @click="switchRange('24h')">前24小时</span>
+              <span class="time-tab" :class="{ active: timeRange === '48h' }" @click="switchRange('48h')">前48小时</span>
+              <span class="time-tab" :class="{ active: timeRange === '72h' }" @click="switchRange('72h')">前72小时</span>
+              <span class="time-tab" :class="{ active: timeRange === 'custom' }" @click="timeRange = 'custom'">自定义</span>
+              <div class="custom-time-picker" v-show="timeRange === 'custom'">
+                <input type="datetime-local" v-model="customStartTime" class="custom-input" />
+                <span class="time-separator">至</span>
+                <input type="datetime-local" v-model="customEndTime" class="custom-input" />
+                <button class="query-btn" @click="queryCustomTimeRange">查询</button>
+              </div>
+            </div>
+          </div>
+          <div class="tab-switch">
+            <span class="tab-item" :class="{ active: tab === 'chart' }" @click="tab = 'chart'">图表</span>
+            <span class="tab-item" :class="{ active: tab === 'table' }" @click="tab = 'table'">表格</span>
+          </div>
+        </div>
+      </div>
+      <!-- 表格模式 -->
+      <div v-show="tab === 'table'" class="table-header">
+        <div class="tab-switch">
+          <span class="tab-item" :class="{ active: tab === 'chart' }" @click="tab = 'chart'">图表</span>
+          <span class="tab-item" :class="{ active: tab === 'table' }" @click="tab = 'table'">表格</span>
+        </div>
+      </div>
+      <!-- 内容区域 -->
+      <div class="content-area">
+        <div class="hydrologic-charts" v-show="tab === 'chart'">
+          <div class="chart-box" ref="chartRef"></div>
+        </div>
+        <div class="table-section" v-show="tab === 'table'">
+          <table class="hydrologic-table">
+            <thead>
+              <tr>
+                <th>时间</th>
+                <th>雨量 (mm)</th>
+                <th>水位 (m)</th>
+                <th>流量 (m³/s)</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr v-for="(row, idx) in tableData" :key="idx">
+                <td>{{ row.time }}</td>
+                <td>{{ row.rain }}</td>
+                <td>{{ row.waterLevel }}</td>
+                <td>{{ row.flow }}</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </div>
+    </div>
+  </CommonDialog>
+</template>
+
+<script setup>
+import { ref, watch, onMounted, onBeforeUnmount, nextTick } from 'vue';
+import CommonDialog from './CommonDialog.vue';
+
+const show = ref(false);
+const title = ref('');
+const tab = ref('chart');
+const timeRange = ref('24h');
+const totalRain = ref(0);
+const waterLevel = ref(0);
+const tableData = ref([]);
+const customStartTime = ref('');
+const customEndTime = ref('');
+const chartRef = ref(null);
+let chartInstance = null;
+let echartsModule = null;
+
+function fmt(d) {
+  const mm = String(d.getMonth() + 1).padStart(2, '0');
+  const dd = String(d.getDate()).padStart(2, '0');
+  const hh = String(d.getHours()).padStart(2, '0');
+  return `${mm}-${dd} ${hh}:00`;
+}
+
+function genData(count) {
+  const now = new Date();
+  const hours = [];
+  const rainValues = [];
+  const waterLevels = [];
+  const flowValues = [];
+  const table = [];
+  for (let i = count - 1; i >= 0; i--) {
+    const t = new Date(now.getTime() - i * 3600000);
+    const timeStr = fmt(t);
+    hours.push(timeStr);
+    const rain = +(Math.random() * 20).toFixed(1);
+    const wl = +(10 + Math.random() * 20).toFixed(2);
+    const flow = +(50 + Math.random() * 250).toFixed(1);
+    rainValues.push(rain);
+    waterLevels.push(wl);
+    flowValues.push(flow);
+    table.push({ time: timeStr, rain, waterLevel: wl, flow });
+  }
+  return { hours, rainValues, waterLevels, flowValues, table };
+}
+
+function getChartOption(hours, rainValues, waterLevels, flowValues) {
+  return {
+    tooltip: { trigger: 'axis' },
+    legend: { data: ['雨量', '水位', '流量'], top: 5, textStyle: { color: '#fff', fontSize: 11 } },
+    grid: [
+      { top: 45, right: 60, bottom: '58%', left: 50 },
+      { top: '50%', right: 100, bottom: 40, left: 50 },
+    ],
+    xAxis: [
+      { type: 'category', data: hours, gridIndex: 0, axisLabel: { show: false }, axisTick: { show: false }, axisLine: { show: false } },
+      { type: 'category', data: hours, gridIndex: 1 },
+    ],
+    yAxis: [
+      { type: 'value', name: '雨量 (mm)', gridIndex: 0, inverse: true, nameLocation: 'middle', nameRotate: 90, nameTextStyle: { color: '#8AB8E6', fontSize: 11 } },
+      { type: 'value', name: '水位(m)', gridIndex: 1, nameLocation: 'middle', nameRotate: 90, nameTextStyle: { color: '#8AB8E6', fontSize: 11 } },
+      { type: 'value', name: '流量(m³/s)', gridIndex: 1, position: 'right', offset: 60, nameLocation: 'middle', nameRotate: 90, nameTextStyle: { color: '#8AB8E6', fontSize: 11 } },
+    ],
+    series: [
+      { name: '雨量', type: 'bar', data: rainValues, xAxisIndex: 0, yAxisIndex: 0 },
+      { name: '水位', type: 'line', data: waterLevels, xAxisIndex: 1, yAxisIndex: 1 },
+      { name: '流量', type: 'line', data: flowValues, xAxisIndex: 1, yAxisIndex: 2 },
+    ],
+  };
+}
+
+function updateData(count) {
+  const { hours, rainValues, waterLevels, flowValues, table } = genData(count);
+  totalRain.value = rainValues.reduce((sum, v) => sum + parseFloat(v), 0);
+  waterLevel.value = waterLevels[waterLevels.length - 1] || 0;
+  tableData.value = table;
+  if (chartInstance) {
+    chartInstance.setOption(getChartOption(hours, rainValues, waterLevels, flowValues), true);
+  }
+}
+
+function switchRange(range) {
+  timeRange.value = range;
+}
+
+function queryCustomTimeRange() {
+  if (!customStartTime.value || !customEndTime.value) return;
+  const start = new Date(customStartTime.value);
+  const end = new Date(customEndTime.value);
+  if (end <= start) return;
+  const hours = [];
+  const rainValues = [];
+  const waterLevels = [];
+  const flowValues = [];
+  const table = [];
+  let cur = new Date(start);
+  while (cur <= end) {
+    const timeStr = fmt(cur);
+    hours.push(timeStr);
+    const rain = +(Math.random() * 20).toFixed(1);
+    const wl = +(10 + Math.random() * 20).toFixed(2);
+    const flow = +(50 + Math.random() * 250).toFixed(1);
+    rainValues.push(rain);
+    waterLevels.push(wl);
+    flowValues.push(flow);
+    table.push({ time: timeStr, rain, waterLevel: wl, flow });
+    cur = new Date(cur.getTime() + 3600000);
+  }
+  totalRain.value = rainValues.reduce((sum, v) => sum + parseFloat(v), 0);
+  waterLevel.value = waterLevels[waterLevels.length - 1] || 0;
+  tableData.value = table;
+  if (chartInstance) {
+    chartInstance.setOption(getChartOption(hours, rainValues, waterLevels, flowValues), true);
+  }
+}
+
+watch(timeRange, (r) => {
+  if (r === 'custom') return;
+  const map = { '24h': 24, '48h': 48, '72h': 72 };
+  updateData(map[r] || 24);
+});
+
+function handleIconClick(event) {
+  const detail = event.detail || event;
+  if (detail.category !== 'hydrometricStations') return;
+  title.value = detail.name;
+  tab.value = 'chart';
+  timeRange.value = '24h';
+  show.value = true;
+  nextTick(async () => {
+    if (!echartsModule) {
+      echartsModule = (await import('echarts')).default || (await import('echarts'));
+    }
+    if (chartRef.value && !chartInstance) {
+      chartInstance = echartsModule.init(chartRef.value);
+    }
+    updateData(24);
+  });
+}
+
+onBeforeUnmount(() => {
+  window.removeEventListener('gaea-icon-click', handleIconClick);
+  if (chartInstance) { chartInstance.dispose(); chartInstance = null; }
+});
+
+onMounted(() => {
+  window.addEventListener('gaea-icon-click', handleIconClick);
+});
+</script>
+
+<style scoped>
+.hydrologic-container {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  min-height: 0;
+}
+
+.hydrologic-stat-bar {
+  background-image: linear-gradient(269deg, rgba(0, 135, 255, 0) 2%, rgba(0, 130, 255, 0.26) 100%);
+  border-radius: 4px 2px 2px 4px;
+  padding: 8px 14px;
+  flex-shrink: 0;
+  display: flex;
+  justify-content: space-around;
+}
+.stat-item {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+.stat-label {
+  color: #A8D4FF;
+  font-size: 14px;
+}
+.stat-value {
+  color: #00D2FF;
+  font-size: 18px;
+  font-weight: bold;
+}
+.stat-unit {
+  color: #8AB8E6;
+  font-size: 13px;
+  margin-left: -6px;
+}
+
+.second-row {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-top: 8px;
+  padding-bottom: 8px;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
+}
+.time-range-area {
+  display: flex;
+  align-items: center;
+}
+.time-range-tabs {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+.custom-time-picker {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-left: 8px;
+  padding-left: 8px;
+  border-left: 1px solid rgba(255, 255, 255, 0.1);
+}
+.custom-input {
+  width: 150px;
+  padding: 4px 8px;
+  background: rgba(0, 102, 204, 0.2);
+  border: 1px solid rgba(0, 102, 204, 0.5);
+  color: #fff;
+  font-size: 12px;
+  border-radius: 3px;
+  outline: none;
+}
+.custom-input:focus {
+  border-color: #00D2FF;
+}
+.time-separator {
+  color: #8AB8E6;
+  font-size: 12px;
+}
+.query-btn {
+  background: rgba(0, 102, 204, 0.4);
+  border: 1px solid #0066CC;
+  color: #00D2FF;
+  font-size: 12px;
+  padding: 4px 14px;
+  border-radius: 3px;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+.query-btn:hover {
+  background: rgba(0, 102, 204, 0.6);
+  border-color: #00D2FF;
+}
+
+.time-tab {
+  padding: 4px 12px;
+  font-size: 12px;
+  color: #8AB8E6;
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  border-radius: 3px;
+  cursor: pointer;
+  transition: all 0.2s;
+  user-select: none;
+}
+.time-tab:hover {
+  border-color: #0066CC;
+  color: #fff;
+}
+.time-tab.active {
+  background: rgba(0, 102, 204, 0.4);
+  border-color: #0066CC;
+  color: #00D2FF;
+}
+
+.tab-switch {
+  display: flex;
+  gap: 4px;
+  margin-bottom: 6px;
+  flex-shrink: 0;
+}
+.tab-item {
+  padding: 4px 18px;
+  font-size: 13px;
+  color: #8AB8E6;
+  border: 1px solid rgba(255, 255, 255, 0.15);
+  border-radius: 4px;
+  cursor: pointer;
+  transition: all 0.2s;
+  user-select: none;
+}
+.tab-item:hover {
+  border-color: #0066CC;
+  color: #fff;
+}
+.tab-item.active {
+  background: rgba(0, 102, 204, 0.3);
+  border-color: #0066CC;
+  color: #00D2FF;
+}
+
+.table-header {
+  padding: 8px 0;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
+}
+
+.content-area {
+  flex: 1;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+}
+
+.hydrologic-charts {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  min-height: 0;
+}
+
+.chart-box {
+  width: 100%;
+  flex: 1;
+  min-height: 0;
+}
+
+.table-section {
+  flex: 1;
+  overflow-y: auto;
+  position: relative;
+}
+
+.table-section::-webkit-scrollbar {
+  width: 4px;
+}
+.table-section::-webkit-scrollbar-thumb {
+  background: #0088FF;
+  border-radius: 2px;
+}
+
+.hydrologic-table {
+  width: 100%;
+  border-collapse: collapse;
+  color: #8AB8E6;
+  font-size: 13px;
+}
+.hydrologic-table th,
+.hydrologic-table td {
+  padding: 8px 12px;
+  text-align: center;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
+}
+.hydrologic-table th {
+  color: #00D2FF;
+  font-weight: bold;
+  background: rgba(0, 30, 60, 0.95);
+  position: sticky;
+  top: 0;
+  z-index: 1;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
+}
+.hydrologic-table tbody tr:hover {
+  background: rgba(0, 102, 204, 0.1);
+}
+</style>

package/src/components/LayerTree.vue

@@ -0,0 +1,264 @@
+<template>
+  <div class="layer-tree-dialog" v-drag>
+    <div class="title">
+      <div class="title_text">图层控制</div>
+      <div class="closeIcon" @click="$emit('close')"></div>
+    </div>
+
+    <div class="search-container">
+      <input type="text" class="search-input" v-model="searchKey" placeholder="搜索图层..." />
+    </div>
+
+    <div class="layer-tree-container">
+      <div class="layer-tree-content">
+        <div v-for="rootNode in filteredData" :key="rootNode.key" class="layer-tree-node">
+          <div class="node-header" @click.stop="rootNode.isExpanded = !rootNode.isExpanded">
+            <span class="expand-icon">
+              <span v-if="!rootNode.isExpanded">▸</span>
+              <span v-else>▾</span>
+            </span>
+            <span class="node-text" :class="{ 'expanded-yellow': rootNode.isExpanded }">{{ rootNode.text }}</span>
+          </div>
+
+          <div class="node-children" v-if="rootNode.isExpanded">
+            <div v-for="childNode in rootNode.filteredChildren" :key="childNode.text + (childNode.stcd || '')" class="child-node">
+              <div class="node-header" @click.stop="$emit('node-click', { category: rootNode, node: childNode })">
+                <span class="empty-icon"></span>
+                <span class="node-text">{{ childNode.text }}</span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted, onBeforeUnmount, computed } from 'vue';
+import vDrag from '../directives/vDrag.js';
+
+const props = defineProps({
+  appInstance: { type: Object, required: true },
+});
+
+const emit = defineEmits(['close', 'node-click']);
+
+const categories = ref([]);
+const searchKey = ref('');
+
+function handleHideLayerTree() {
+  emit('close');
+}
+
+onMounted(() => {
+  const raw = props.appInstance?.layerCategories || [];
+  categories.value = raw
+    .filter(c => c.visible !== false)
+    .map(c => ({ ...c, isExpanded: false }));
+  window.addEventListener('gaea-hide-layertree', handleHideLayerTree);
+});
+
+onBeforeUnmount(() => {
+  window.removeEventListener('gaea-hide-layertree', handleHideLayerTree);
+});
+
+const filteredData = computed(() => {
+  const kw = searchKey.value.trim().toLowerCase();
+  return categories.value.map(rootNode => {
+    if (!kw) {
+      rootNode.filteredChildren = rootNode.children || [];
+      return rootNode;
+    }
+    const matchRoot = rootNode.text.toLowerCase().includes(kw);
+    const matchedChildren = (rootNode.children || []).filter(c => c.text.toLowerCase().includes(kw));
+    rootNode.filteredChildren = matchedChildren;
+    if (matchRoot || matchedChildren.length) return rootNode;
+    return null;
+  }).filter(Boolean);
+});
+
+</script>
+
+<style scoped>
+.layer-tree-dialog {
+  position: fixed;
+  top: 10px;
+  left: 10px;
+  width: 300px;
+  background: rgba(1, 79, 152, 0.85);
+  border-radius: 8px;
+  overflow: hidden;
+  z-index: 10000;
+}
+
+.title {
+  height: 42px;
+  line-height: 42px;
+  padding: 0 14px;
+  color: #fff;
+  font-size: 15px;
+  font-weight: 500;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  cursor: move;
+  user-select: none;
+  background-size: 100% 100%;
+}
+
+.title .title_text {
+  font-size: 20px;
+  width: 100px;
+  text-align: left;
+}
+
+.closeIcon {
+  width: 22px;
+  height: 22px;
+  position: relative;
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.closeIcon::before,
+.closeIcon::after {
+  content: '';
+  position: absolute;
+  top: 25%;
+  left: 50%;
+  width: 14px;
+  height: 2px;
+  background-color: #fff;
+  border-radius: 1px;
+  transition: background-color 0.2s ease;
+}
+
+.closeIcon::before {
+  transform: translate(-50%, -50%) rotate(45deg);
+}
+
+.closeIcon::after {
+  transform: translate(-50%, -50%) rotate(-45deg);
+}
+
+.closeIcon:hover {
+  transform: scale(1.05);
+}
+
+.closeIcon:hover::before,
+.closeIcon:hover::after {
+  background-color: #f0f9ff;
+}
+
+.search-container {
+  padding: 10px 14px 0 14px;
+}
+
+.search-input {
+  width: 100%;
+  padding: 7px 12px;
+  border: none;
+  border-radius: 6px;
+  font-size: 14px;
+  outline: none;
+  box-sizing: border-box;
+  transition: all 0.2s ease;
+  background: rgba(0,0,0,0.25);
+  color: #fff;
+}
+
+.search-input::placeholder {
+  color: #adb5bd;
+  font-size: 13px;
+}
+
+.layer-tree-container {
+  padding: 6px 0;
+  max-height: 390px;
+  overflow-y: auto;
+}
+
+.layer-tree-container::-webkit-scrollbar {
+  width: 5px;
+  height: 5px;
+}
+
+.layer-tree-container::-webkit-scrollbar-track {
+  background: #f8f9fa;
+  border-radius: 3px;
+}
+
+.layer-tree-container::-webkit-scrollbar-thumb {
+  background: #ced4da;
+  border-radius: 3px;
+  transition: background 0.2s ease;
+}
+
+.layer-tree-container::-webkit-scrollbar-thumb:hover {
+  background: #adb5bd;
+}
+
+.layer-tree-node {
+  margin-left: 6px;
+  line-height: 1.7;
+  color: #fff;
+}
+
+.node-header {
+  display: flex;
+  align-items: center;
+  gap: 5px;
+  padding: 3px 8px;
+  border-radius: 4px;
+  cursor: pointer;
+  transition: background-color 0.15s ease;
+}
+
+.node-header:hover {
+  background-color: #007ffd;
+}
+
+.expand-icon {
+  font-size: 11px;
+  color: #6c757d;
+  width: 12px;
+  height: 12px;
+  text-align: center;
+  user-select: none;
+  cursor: pointer;
+}
+
+.empty-icon {
+  width: 12px;
+  height: 12px;
+  display: inline-block;
+}
+
+.node-icon {
+  font-size: 13px;
+  width: 14px;
+  text-align: center;
+}
+
+.node-text {
+  flex: 1;
+  font-size: 13.5px;
+  text-align: left;
+  transition: color 0.15s ease;
+}
+
+.expanded-yellow {
+  color: #FDB144 !important;
+}
+
+.node-children {
+  margin-left: 14px;
+  padding-left: 4px;
+  border-left: 1px dashed #dee2e6;
+}
+
+.child-node {
+  margin-left: 2px;
+}
+</style>