大屏 toggle

src/components/MineMonitor/LeftDeviceStatus.vue

+<template>
+  <n-card :bordered="false" class="device-status-card">
+    <div class="card-header">
+      <h2 class="card-title">设备状态总览</h2>
+    </div>
+    <div class="status-grid">
+      <!-- 在线监测 -->
+      <div class="status-item">
+        <div class="percent blue">100%</div>
+        <div class="name">在线监测</div>
+        <div class="detail">在线: 56 离线: 0</div>
+      </div>
+      <!-- 视频监测 -->
+      <div class="status-item">
+        <div class="percent yellow">82%</div>
+        <div class="name">视频监测</div>
+        <div class="detail">在线: 87 离线: 2</div>
+      </div>
+      <!-- 人员定位 -->
+      <div class="status-item">
+        <div class="percent cyan">88%</div>
+        <div class="name">人员定位</div>
+        <div class="detail">在线: 16 离线: 2</div>
+      </div>
+      <!-- 车辆定位 -->
+      <div class="status-item">
+        <div class="percent green">100%</div>
+        <div class="name">车辆定位</div>
+        <div class="detail">在线: 7 离线: 2</div>
+      </div>
+    </div>
+  </n-card>
+</template>
+
+<script setup lang="ts"></script>
+
+<style scoped lang="scss">
+.device-status-card {
+  padding: 0.15rem;
+  background: var(--n-bg-color-secondary);
+
+  .card-header {
+    margin-bottom: 0.15rem;
+    .card-title {
+      font-size: 0.18rem;
+      font-weight: 600;
+      color: var(--n-text-color-primary);
+    }
+  }
+
+  .status-grid {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 0.1rem;
+
+    .status-item {
+      text-align: center;
+      padding: 0.1rem;
+      background: rgba(10, 25, 71, 0.6);
+      border-radius: 0.05rem;
+
+      .percent {
+        font-size: 0.24rem;
+        font-weight: bold;
+        margin-bottom: 0.05rem;
+        &.blue { color: #36a2eb; }
+        &.yellow { color: #facc15; }
+        &.cyan { color: #4bc0c0; }
+        &.green { color: #6dd230; }
+      }
+
+      .name {
+        font-size: 0.14rem;
+        color: var(--n-text-color-secondary);
+        margin-bottom: 0.03rem;
+      }
+
+      .detail {
+        font-size: 0.12rem;
+        color: var(--n-text-color-tertiary);
+      }
+    }
+  }
+}
+</style>
\ No newline at end of file

src/components/MineMonitor/LeftOnlineMonitor.vue

+<template>
+  <n-card :bordered="false" class="online-monitor-card">
+    <div class="card-header">
+      <h2 class="card-title">在线监测实时数据</h2>
+    </div>
+    <n-table
+      :columns="columns"
+      :data="tableData"
+      size="small"
+      :pagination="false"
+      class="monitor-table"
+    />
+  </n-card>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+
+const columns = ref([
+  { title: '设备名称', key: 'name', align: 'left' },
+  { title: '监测值', key: 'value', align: 'center' },
+  { title: '监测时间', key: 'time', align: 'center' },
+]);
+
+const tableData = ref([
+  { name: '边坡表面位移01', value: '0.0047mm', time: '2025-01-10 14:21:31', status: '正常' },
+  { name: '降雨量', value: '0.0047mm', time: '2025-01-10 14:21:31', status: '正常' },
+  { name: '排土场表面位移03', value: '0.0047mm', time: '2025-01-10 14:21:31', status: '预警' },
+  { name: '边坡表面位移01', value: '0.0047mm', time: '2025-01-10 14:21:31', status: '正常' }
+]);
+</script>
+
+<style scoped lang="scss">
+.online-monitor-card {
+  padding: 0.15rem;
+  background: var(--n-bg-color-secondary);
+
+  .card-header {
+    margin-bottom: 0.15rem;
+    .card-title {
+      font-size: 0.18rem;
+      font-weight: 600;
+      color: var(--n-text-color-primary);
+    }
+  }
+
+  .monitor-table {
+    max-height: 1.5rem;
+    overflow-y: auto;
+    --n-table-row-hover-bg-color: rgba(10, 25, 71, 0.4);
+
+    .normal { color: #6dd230; }
+    .warning { color: #facc15; }
+  }
+}
+</style>
\ No newline at end of file

src/components/MineMonitor/LeftRainfallTrend.vue

+<template>
+  <n-card :bordered="false" class="rainfall-trend-card">
+    <div class="card-header">
+      <h2 class="card-title">近24小时降雨量变化趋势图</h2>
+      <n-button size="small" type="text" class="collapse-btn">
+        <n-icon><ChevronUp /></n-icon> 收起
+      </n-button>
+    </div>
+    <div class="chart-container" ref="chartRef"></div>
+  </n-card>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted, onUnmounted, nextTick } from 'vue';
+import * as echarts from 'echarts';
+import { ChevronUp } from '@vicons/ionicons5';
+
+const chartRef = ref<HTMLDivElement | null>(null);
+let chartInstance: echarts.ECharts | null = null;
+
+// 初始化ECharts
+const initChart = () => {
+  if (!chartRef.value) return;
+  chartInstance = echarts.init(chartRef.value);
+  const hours = Array.from({ length: 24 }, (_, i) => `${i}:00`);
+  const data = hours.map(() => Math.floor(Math.random() * 150) + 20);
+  
+  chartInstance.setOption({
+    grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true },
+    xAxis: {
+      type: 'category', data: hours,
+      axisLine: { lineStyle: { color: '#4f6b95' } },
+      axisLabel: { color: '#a0b3d6', interval: 2 }
+    },
+    yAxis: {
+      type: 'value', max: 300,
+      axisLine: { lineStyle: { color: '#4f6b95' } },
+      axisLabel: { color: '#a0b3d6' },
+      splitLine: { lineStyle: { color: 'rgba(79, 107, 149, 0.2)' } }
+    },
+    series: [{
+      data, type: 'line', smooth: true,
+      areaStyle: {
+        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+          { offset: 0, color: 'rgba(54, 162, 235, 0.4)' },
+          { offset: 1, color: 'rgba(54, 162, 235, 0)' }
+        ])
+      },
+      lineStyle: { color: 'rgba(54, 162, 235, 1)', width: 2 }
+    }]
+  });
+};
+
+// 窗口缩放适配
+const resizeChart = () => chartInstance?.resize();
+
+onMounted(() => {
+  nextTick(initChart);
+  window.addEventListener('resize', resizeChart);
+});
+
+onUnmounted(() => {
+  window.removeEventListener('resize', resizeChart);
+  chartInstance?.dispose();
+});
+</script>
+
+<style scoped lang="scss">
+.rainfall-trend-card {
+  flex: 1;
+  padding: 0.15rem;
+  background: var(--n-bg-color-secondary);
+
+  .card-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 0.15rem;
+
+    .card-title {
+      font-size: 0.18rem;
+      font-weight: 600;
+      color: var(--n-text-color-primary);
+    }
+
+    .collapse-btn {
+      font-size: 0.14rem;
+      color: var(--n-primary-color);
+    }
+  }
+
+  .chart-container {
+    width: 100%;
+    height: calc(100% - 0.4rem);
+    min-height: 1.2rem;
+  }
+}
+</style>
\ No newline at end of file

src/components/MineMonitor/MapContainer.vue

+<template>
+  <div class="map-container">
+
+  </div>
+</template>
+
+<script setup lang="ts">
+// import { VideoCamera, MapMarker, Person, AlertCircle, ChevronDown } from '@vicons/ionicons5';
+</script>
+
+<style scoped lang="scss">
+.map-container {
+  position: relative;
+  width: 100%;
+  height: 100%;
+
+  .map-bg {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+
+  .map-svg {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+  }
+
+  .marker {
+    position: absolute;
+    width: 0.3rem;
+    height: 0.3rem;
+    border-radius: 50%;
+    background: rgba(54, 162, 235, 0.8);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    transition: transform 0.2s;
+
+    &:hover { transform: scale(1.2); }
+
+    .label {
+      position: absolute;
+      top: 100%;
+      left: 50%;
+      transform: translateX(-50%);
+      background: rgba(10, 25, 71, 0.9);
+      color: #fff;
+      font-size: 0.12rem;
+      padding: 0.03rem 0.05rem;
+      border-radius: 0.03rem;
+      margin-top: 0.05rem;
+    }
+
+    // 标记点位置
+    &.warehouse-cam { top: 30%; left: 55%; }
+    &.slope-displacement { top: 60%; left: 50%; }
+    &.person-position { top: 45%; left: 35%; }
+    &.warning-point {
+      top: 55%; left: 30%;
+      background: rgba(255, 99, 132, 0.8);
+      animation: pulse 2s infinite;
+    }
+  }
+
+  .filter-dropdown {
+    position: absolute;
+    top: 0.2rem;
+    right: 0.2rem;
+    z-index: 10;
+  }
+
+  @keyframes pulse {
+    0% { box-shadow: 0 0 0 0 rgba(255, 99, 132, 0.7); }
+    70% { box-shadow: 0 0 0 0.1rem rgba(255, 99, 132, 0); }
+    100% { box-shadow: 0 0 0 0 rgba(255, 99, 132, 0); }
+  }
+}
+</style>
\ No newline at end of file

src/components/MineMonitor/RightAiWarning.vue

+<template>
+  <n-card :bordered="false" class="ai-warning-card">
+    <div class="card-header">
+      <h2 class="card-title">当月司机AI预警分析</h2>
+    </div>
+    <div class="chart-container" ref="chartRef"></div>
+    <div class="legend">
+      <div class="item"><span class="dot blue"></span> 疲劳闭眼: 10</div>
+      <div class="item"><span class="dot cyan"></span> 疲劳打哈欠: 5</div>
+      <div class="item"><span class="dot green"></span> 违规打电话: 15</div>
+      <div class="item"><span class="dot yellow"></span> 违规抽烟: 0</div>
+      <div class="item"><span class="dot orange"></span> 左顾右盼: 2</div>
+      <div class="item"><span class="dot red"></span> 人脸丢失: 0</div>
+    </div>
+  </n-card>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted, onUnmounted, nextTick } from 'vue';
+import * as echarts from 'echarts';
+
+const chartRef = ref<HTMLDivElement | null>(null);
+let chartInstance: echarts.ECharts | null = null;
+
+const initChart = () => {
+  if (!chartRef.value) return;
+  chartInstance = echarts.init(chartRef.value);
+  chartInstance.setOption({
+    series: [{
+      name: '预警类型', type: 'pie', radius: ['30%', '70%'],
+      itemStyle: { borderRadius: 4, borderColor: 'var(--n-bg-color-secondary)', borderWidth: 2 },
+      label: { show: false },
+      data: [
+        { value: 10, name: '疲劳闭眼', itemStyle: { color: '#36a2eb' } },
+        { value: 5, name: '疲劳打哈欠', itemStyle: { color: '#4bc0c0' } },
+        { value: 15, name: '违规打电话', itemStyle: { color: '#6dd230' } },
+        { value: 0, name: '违规抽烟', itemStyle: { color: '#facc15' } },
+        { value: 2, name: '左顾右盼', itemStyle: { color: '#ff9f40' } },
+        { value: 0, name: '人脸丢失', itemStyle: { color: '#ff6384' } }
+      ]
+    }]
+  });
+};
+
+const resizeChart = () => chartInstance?.resize();
+
+onMounted(() => {
+  nextTick(initChart);
+  window.addEventListener('resize', resizeChart);
+});
+
+onUnmounted(() => {
+  window.removeEventListener('resize', resizeChart);
+  chartInstance?.dispose();
+});
+</script>
+
+<style scoped lang="scss">
+.ai-warning-card {
+  padding: 0.15rem;
+  background: var(--n-bg-color-secondary);
+
+  .card-header {
+    margin-bottom: 0.15rem;
+    .card-title {
+      font-size: 0.18rem;
+      font-weight: 600;
+      color: var(--n-text-color-primary);
+    }
+  }
+
+  .chart-container {
+    width: 100%;
+    height: 1.2rem;
+  }
+
+  .legend {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 0.05rem;
+    margin-top: 0.1rem;
+    font-size: 0.12rem;
+    color: var(--n-text-color-secondary);
+
+    .item { display: flex; align-items: center; gap: 0.05rem; }
+    .dot {
+      width: 0.1rem; height: 0.1rem; border-radius: 50%; display: inline-block;
+      &.blue { background: #36a2eb; }
+      &.cyan { background: #4bc0c0; }
+      &.green { background: #6dd230; }
+      &.yellow { background: #facc15; }
+      &.orange { background: #ff9f40; }
+      &.red { background: #ff6384; }
+    }
+  }
+}
+</style>
\ No newline at end of file

src/components/MineMonitor/RightEnvMonitor.vue

+<template>
+  <n-card :bordered="false" class="env-monitor-card">
+    <div class="card-header">
+      <h2 class="card-title">环境监测实时数据</h2>
+      <n-button size="small" type="text" class="collapse-btn">
+        <n-icon><ChevronUp /></n-icon> 收起
+      </n-button>
+    </div>
+    <div class="env-grid">
+      <div class="item">
+        <n-icon color="#6dd230" size="0.25rem"><CheckCircle /></n-icon>
+        <div class="name">在线</div>
+      </div>
+      <div class="item">
+        <n-icon color="#ff6384" size="0.25rem"><ThermometerHalf /></n-icon>
+        <div class="name">温度</div>
+        <div class="value">25°C</div>
+      </div>
+      <div class="item">
+        <n-icon color="#36a2eb" size="0.25rem"><Tint /></n-icon>
+        <div class="name">湿度</div>
+        <div class="value">25%RH</div>
+      </div>
+      <div class="item">
+        <n-icon color="#a0b3d6" size="0.25rem"><Cloud /></n-icon>
+        <div class="name">PM2.5</div>
+        <div class="value">2.5μg/m³</div>
+      </div>
+      <div class="item">
+        <n-icon color="#4bc0c0" size="0.25rem"><LocationArrow /></n-icon>
+        <div class="name">风向</div>
+        <div class="value">东</div>
+      </div>
+      <div class="item">
+        <n-icon color="#9c27b0" size="0.25rem"><Wind /></n-icon>
+        <div class="name">风速</div>
+        <div class="value">25m/s</div>
+      </div>
+      <div class="item">
+        <n-icon color="#facc15" size="0.25rem"><Speedometer /></n-icon>
+        <div class="name">气压</div>
+        <div class="value">8Kpa</div>
+      </div>
+      <div class="item">
+        <n-icon color="#ff9f40" size="0.25rem"><Cloud /></n-icon>
+        <div class="name">PM10</div>
+        <div class="value">10μg/m³</div>
+      </div>
+    </div>
+  </n-card>
+</template>
+
+<script setup lang="ts">
+// import { CheckCircle, ThermometerHalf, Tint, Cloud, LocationArrow, Wind, Speedometer, ChevronUp } from '@vicons/ionicons5';
+</script>
+
+<style scoped lang="scss">
+.env-monitor-card {
+  flex: 1;
+  padding: 0.15rem;
+  background: var(--n-bg-color-secondary);
+
+  .card-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 0.15rem;
+
+    .card-title {
+      font-size: 0.18rem;
+      font-weight: 600;
+      color: var(--n-text-color-primary);
+    }
+
+    .collapse-btn {
+      font-size: 0.14rem;
+      color: var(--n-primary-color);
+    }
+  }
+
+  .env-grid {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 0.1rem;
+
+    .item {
+      text-align: center;
+      padding: 0.1rem;
+      background: rgba(10, 25, 71, 0.6);
+      border-radius: 0.05rem;
+
+      .name {
+        font-size: 0.14rem;
+        color: var(--n-text-color-secondary);
+        margin: 0.05rem 0;
+      }
+
+      .value {
+        font-size: 0.18rem;
+        font-weight: bold;
+        color: var(--n-text-color-primary);
+      }
+    }
+  }
+}
+</style>
\ No newline at end of file

src/components/MineMonitor/RightTodayAlarm.vue

+<template>
+  <n-card :bordered="false" class="today-alarm-card">
+    <div class="card-header">
+      <h2 class="card-title">今日报警信息</h2>
+    </div>
+    <div class="alarm-tabs">
+      <n-tag type="error" ghost>SO5报警(0)</n-tag>
+      <n-tag type="warning" ghost>车辆报警(3)</n-tag>
+      <n-tag type="info" ghost>越界开采(4)</n-tag>
+      <n-tag type="primary" ghost>在线监测(4)</n-tag>
+    </div>
+    <div class="alarm-list">
+      <div class="item orange">
+        <div class="content">
+          <div class="device">边坡表面位移01</div>
+          <div class="level">橙色预警</div>
+        </div>
+        <div class="detail">
+          <div class="value">0.0047mm</div>
+          <div class="time">2025-01-10 14:21:31</div>
+        </div>
+      </div>
+      <div class="item blue">
+        <div class="content">
+          <div class="device">降雨量</div>
+          <div class="level">蓝色预警</div>
+        </div>
+        <div class="detail">
+          <div class="value">0.0047mm</div>
+          <div class="time">2025-01-10 14:21:31</div>
+        </div>
+      </div>
+      <div class="item yellow">
+        <div class="content">
+          <div class="device">边坡表面位移01</div>
+          <div class="level">黄色预警</div>
+        </div>
+        <div class="detail">
+          <div class="value">0.0047mm</div>
+          <div class="time">2025-01-10 14:21:31</div>
+        </div>
+      </div>
+    </div>
+  </n-card>
+</template>
+
+<script setup lang="ts"></script>
+
+<style scoped lang="scss">
+.today-alarm-card {
+  padding: 0.15rem;
+  background: var(--n-bg-color-secondary);
+
+  .card-header {
+    margin-bottom: 0.15rem;
+    .card-title {
+      font-size: 0.18rem;
+      font-weight: 600;
+      color: var(--n-text-color-primary);
+    }
+  }
+
+  .alarm-tabs {
+    display: flex;
+    gap: 0.05rem;
+    margin-bottom: 0.15rem;
+    flex-wrap: wrap;
+  }
+
+  .alarm-list {
+    display: flex;
+    flex-direction: column;
+    gap: 0.1rem;
+    max-height: 1.2rem;
+    overflow-y: auto;
+
+    .item {
+      padding: 0.1rem;
+      background: rgba(10, 25, 71, 0.6);
+      border-radius: 0.05rem;
+      display: flex;
+      justify-content: space-between;
+      font-size: 0.14rem;
+
+      &.orange { border-left: 0.03rem solid #ff9f40; }
+      &.blue { border-left: 0.03rem solid #36a2eb; }
+      &.yellow { border-left: 0.03rem solid #facc15; }
+
+      .content {
+        .device { color: var(--n-text-color-primary); }
+        .level { font-size: 0.12rem; margin-top: 0.03rem; }
+      }
+
+      .detail {
+        text-align: right;
+        font-size: 0.12rem;
+        color: var(--n-text-color-secondary);
+        .value { margin-bottom: 0.03rem; }
+      }
+    }
+  }
+}
+</style>
\ No newline at end of file

src/typings/components.d.ts

@@ -19,80 +19,50 @@ declare module 'vue' {
     DarkModeContainer: typeof import('./../components/common/dark-mode-container.vue')['default']
     ExceptionBase: typeof import('./../components/common/exception-base.vue')['default']
     FullScreen: typeof import('./../components/common/full-screen.vue')['default']
-    IconAntDesignEnterOutlined: typeof import('~icons/ant-design/enter-outlined')['default']
     IconAntDesignReloadOutlined: typeof import('~icons/ant-design/reload-outlined')['default']
     IconGridiconsFullscreen: typeof import('~icons/gridicons/fullscreen')['default']
     IconGridiconsFullscreenExit: typeof import('~icons/gridicons/fullscreen-exit')['default']
-    'IconIc:baselinePlus': typeof import('~icons/ic/baseline-plus')['default']
-    IconLocalBanner: typeof import('~icons/local/banner')['default']
-    IconLocalLogo: typeof import('~icons/local/logo')['default']
-    IconMdiArrowDownThin: typeof import('~icons/mdi/arrow-down-thin')['default']
-    IconMdiArrowUpThin: typeof import('~icons/mdi/arrow-up-thin')['default']
-    IconMdiKeyboardEsc: typeof import('~icons/mdi/keyboard-esc')['default']
-    IconMdiKeyboardReturn: typeof import('~icons/mdi/keyboard-return')['default']
     IconTooltip: typeof import('./../components/common/icon-tooltip.vue')['default']
-    IconUilSearch: typeof import('~icons/uil/search')['default']
     LangSwitch: typeof import('./../components/common/lang-switch.vue')['default']
+    LeftDeviceStatus: typeof import('./../components/MineMonitor/LeftDeviceStatus.vue')['default']
+    LeftOnlineMonitor: typeof import('./../components/MineMonitor/LeftOnlineMonitor.vue')['default']
+    LeftRainfallTrend: typeof import('./../components/MineMonitor/LeftRainfallTrend.vue')['default']
     LookForward: typeof import('./../components/custom/look-forward.vue')['default']
+    MapContainer: typeof import('./../components/MineMonitor/MapContainer.vue')['default']
     MenuToggler: typeof import('./../components/common/menu-toggler.vue')['default']
-    NAlert: typeof import('naive-ui')['NAlert']
     NBadge: typeof import('naive-ui')['NBadge']
     NBreadcrumb: typeof import('naive-ui')['NBreadcrumb']
     NBreadcrumbItem: typeof import('naive-ui')['NBreadcrumbItem']
     NButton: typeof import('naive-ui')['NButton']
     NCard: typeof import('naive-ui')['NCard']
     NCheckbox: typeof import('naive-ui')['NCheckbox']
-    NCol: typeof import('naive-ui')['NCol']
     NColorPicker: typeof import('naive-ui')['NColorPicker']
-    NDataTable: typeof import('naive-ui')['NDataTable']
-    NDatePicker: typeof import('naive-ui')['NDatePicker']
     NDialogProvider: typeof import('naive-ui')['NDialogProvider']
     NDivider: typeof import('naive-ui')['NDivider']
     NDrawer: typeof import('naive-ui')['NDrawer']
     NDrawerContent: typeof import('naive-ui')['NDrawerContent']
     NDropdown: typeof import('naive-ui')['NDropdown']
-    NEmpty: typeof import('naive-ui')['NEmpty']
-    NFlex: typeof import('naive-ui')['NFlex']
-    NForm: typeof import('naive-ui')['NForm']
-    NFormItem: typeof import('naive-ui')['NFormItem']
-    NGi: typeof import('naive-ui')['NGi']
-    NGrid: typeof import('naive-ui')['NGrid']
     NIcon: typeof import('naive-ui')['NIcon']
-    NInfiniteScroll: typeof import('naive-ui')['NInfiniteScroll']
     NInput: typeof import('naive-ui')['NInput']
-    NInputGroup: typeof import('naive-ui')['NInputGroup']
     NInputNumber: typeof import('naive-ui')['NInputNumber']
-    NList: typeof import('naive-ui')['NList']
-    NListItem: typeof import('naive-ui')['NListItem']
     NLoadingBarProvider: typeof import('naive-ui')['NLoadingBarProvider']
     NMenu: typeof import('naive-ui')['NMenu']
     NMessageProvider: typeof import('naive-ui')['NMessageProvider']
     NModal: typeof import('naive-ui')['NModal']
     NNotificationProvider: typeof import('naive-ui')['NNotificationProvider']
-    NPagination: typeof import('naive-ui')['NPagination']
-    NPopover: typeof import('naive-ui')['NPopover']
-    NRadio: typeof import('naive-ui')['NRadio']
-    NRadioGroup: typeof import('naive-ui')['NRadioGroup']
-    NRow: typeof import('naive-ui')['NRow']
-    NSc: typeof import('naive-ui')['NSc']
-    NScord: typeof import('naive-ui')['NScord']
-    NScrollbar: typeof import('naive-ui')['NScrollbar']
     NSelect: typeof import('naive-ui')['NSelect']
-    NSpace: typeof import('naive-ui')['NSpace']
-    NSpaceNCOl: typeof import('naive-ui')['NSpaceNCOl']
-    NSpin: typeof import('naive-ui')['NSpin']
-    NStatistic: typeof import('naive-ui')['NStatistic']
     NSwitch: typeof import('naive-ui')['NSwitch']
     NTab: typeof import('naive-ui')['NTab']
+    NTable: typeof import('naive-ui')['NTable']
     NTabs: typeof import('naive-ui')['NTabs']
-    NThing: typeof import('naive-ui')['NThing']
+    NTag: typeof import('naive-ui')['NTag']
     NTooltip: typeof import('naive-ui')['NTooltip']
-    NTree: typeof import('naive-ui')['NTree']
-    NTreeSelect: typeof import('naive-ui')['NTreeSelect']
-    NUpload: typeof import('naive-ui')['NUpload']
     NWatermark: typeof import('naive-ui')['NWatermark']
     PinToggler: typeof import('./../components/common/pin-toggler.vue')['default']
     ReloadButton: typeof import('./../components/common/reload-button.vue')['default']
+    RightAiWarning: typeof import('./../components/MineMonitor/RightAiWarning.vue')['default']
+    RightEnvMonitor: typeof import('./../components/MineMonitor/RightEnvMonitor.vue')['default']
+    RightTodayAlarm: typeof import('./../components/MineMonitor/RightTodayAlarm.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
     SoybeanAvatar: typeof import('./../components/custom/soybean-avatar.vue')['default']
@@ -114,80 +84,50 @@ declare global {
   const DarkModeContainer: typeof import('./../components/common/dark-mode-container.vue')['default']
   const ExceptionBase: typeof import('./../components/common/exception-base.vue')['default']
   const FullScreen: typeof import('./../components/common/full-screen.vue')['default']
-  const IconAntDesignEnterOutlined: typeof import('~icons/ant-design/enter-outlined')['default']
   const IconAntDesignReloadOutlined: typeof import('~icons/ant-design/reload-outlined')['default']
   const IconGridiconsFullscreen: typeof import('~icons/gridicons/fullscreen')['default']
   const IconGridiconsFullscreenExit: typeof import('~icons/gridicons/fullscreen-exit')['default']
-  const 'IconIc:baselinePlus': typeof import('~icons/ic/baseline-plus')['default']
-  const IconLocalBanner: typeof import('~icons/local/banner')['default']
-  const IconLocalLogo: typeof import('~icons/local/logo')['default']
-  const IconMdiArrowDownThin: typeof import('~icons/mdi/arrow-down-thin')['default']
-  const IconMdiArrowUpThin: typeof import('~icons/mdi/arrow-up-thin')['default']
-  const IconMdiKeyboardEsc: typeof import('~icons/mdi/keyboard-esc')['default']
-  const IconMdiKeyboardReturn: typeof import('~icons/mdi/keyboard-return')['default']
   const IconTooltip: typeof import('./../components/common/icon-tooltip.vue')['default']
-  const IconUilSearch: typeof import('~icons/uil/search')['default']
   const LangSwitch: typeof import('./../components/common/lang-switch.vue')['default']
+  const LeftDeviceStatus: typeof import('./../components/MineMonitor/LeftDeviceStatus.vue')['default']
+  const LeftOnlineMonitor: typeof import('./../components/MineMonitor/LeftOnlineMonitor.vue')['default']
+  const LeftRainfallTrend: typeof import('./../components/MineMonitor/LeftRainfallTrend.vue')['default']
   const LookForward: typeof import('./../components/custom/look-forward.vue')['default']
+  const MapContainer: typeof import('./../components/MineMonitor/MapContainer.vue')['default']
   const MenuToggler: typeof import('./../components/common/menu-toggler.vue')['default']
-  const NAlert: typeof import('naive-ui')['NAlert']
   const NBadge: typeof import('naive-ui')['NBadge']
   const NBreadcrumb: typeof import('naive-ui')['NBreadcrumb']
   const NBreadcrumbItem: typeof import('naive-ui')['NBreadcrumbItem']
   const NButton: typeof import('naive-ui')['NButton']
   const NCard: typeof import('naive-ui')['NCard']
   const NCheckbox: typeof import('naive-ui')['NCheckbox']
-  const NCol: typeof import('naive-ui')['NCol']
   const NColorPicker: typeof import('naive-ui')['NColorPicker']
-  const NDataTable: typeof import('naive-ui')['NDataTable']
-  const NDatePicker: typeof import('naive-ui')['NDatePicker']
   const NDialogProvider: typeof import('naive-ui')['NDialogProvider']
   const NDivider: typeof import('naive-ui')['NDivider']
   const NDrawer: typeof import('naive-ui')['NDrawer']
   const NDrawerContent: typeof import('naive-ui')['NDrawerContent']
   const NDropdown: typeof import('naive-ui')['NDropdown']
-  const NEmpty: typeof import('naive-ui')['NEmpty']
-  const NFlex: typeof import('naive-ui')['NFlex']
-  const NForm: typeof import('naive-ui')['NForm']
-  const NFormItem: typeof import('naive-ui')['NFormItem']
-  const NGi: typeof import('naive-ui')['NGi']
-  const NGrid: typeof import('naive-ui')['NGrid']
   const NIcon: typeof import('naive-ui')['NIcon']
-  const NInfiniteScroll: typeof import('naive-ui')['NInfiniteScroll']
   const NInput: typeof import('naive-ui')['NInput']
-  const NInputGroup: typeof import('naive-ui')['NInputGroup']
   const NInputNumber: typeof import('naive-ui')['NInputNumber']
-  const NList: typeof import('naive-ui')['NList']
-  const NListItem: typeof import('naive-ui')['NListItem']
   const NLoadingBarProvider: typeof import('naive-ui')['NLoadingBarProvider']
   const NMenu: typeof import('naive-ui')['NMenu']
   const NMessageProvider: typeof import('naive-ui')['NMessageProvider']
   const NModal: typeof import('naive-ui')['NModal']
   const NNotificationProvider: typeof import('naive-ui')['NNotificationProvider']
-  const NPagination: typeof import('naive-ui')['NPagination']
-  const NPopover: typeof import('naive-ui')['NPopover']
-  const NRadio: typeof import('naive-ui')['NRadio']
-  const NRadioGroup: typeof import('naive-ui')['NRadioGroup']
-  const NRow: typeof import('naive-ui')['NRow']
-  const NSc: typeof import('naive-ui')['NSc']
-  const NScord: typeof import('naive-ui')['NScord']
-  const NScrollbar: typeof import('naive-ui')['NScrollbar']
   const NSelect: typeof import('naive-ui')['NSelect']
-  const NSpace: typeof import('naive-ui')['NSpace']
-  const NSpaceNCOl: typeof import('naive-ui')['NSpaceNCOl']
-  const NSpin: typeof import('naive-ui')['NSpin']
-  const NStatistic: typeof import('naive-ui')['NStatistic']
   const NSwitch: typeof import('naive-ui')['NSwitch']
   const NTab: typeof import('naive-ui')['NTab']
+  const NTable: typeof import('naive-ui')['NTable']
   const NTabs: typeof import('naive-ui')['NTabs']
-  const NThing: typeof import('naive-ui')['NThing']
+  const NTag: typeof import('naive-ui')['NTag']
   const NTooltip: typeof import('naive-ui')['NTooltip']
-  const NTree: typeof import('naive-ui')['NTree']
-  const NTreeSelect: typeof import('naive-ui')['NTreeSelect']
-  const NUpload: typeof import('naive-ui')['NUpload']
   const NWatermark: typeof import('naive-ui')['NWatermark']
   const PinToggler: typeof import('./../components/common/pin-toggler.vue')['default']
   const ReloadButton: typeof import('./../components/common/reload-button.vue')['default']
+  const RightAiWarning: typeof import('./../components/MineMonitor/RightAiWarning.vue')['default']
+  const RightEnvMonitor: typeof import('./../components/MineMonitor/RightEnvMonitor.vue')['default']
+  const RightTodayAlarm: typeof import('./../components/MineMonitor/RightTodayAlarm.vue')['default']
   const RouterLink: typeof import('vue-router')['RouterLink']
   const RouterView: typeof import('vue-router')['RouterView']
   const SoybeanAvatar: typeof import('./../components/custom/soybean-avatar.vue')['default']

src/views/_builtin/cesiumDeom/index.vue

 <script setup lang="ts">
+  import { ref } from 'vue'
 import { onMounted, onUnmounted } from 'vue';
 import * as Cesium from 'cesium';
 import '../../../../Cesium/Widgets/widgets.css';
 
+// 引入拆分的组件
+// import LeftDeviceStatus from '@/components/MineMonitor/LeftDeviceStatus.vue';
+
 let viewer: Cesium.Viewer | null = null;
 
 // REM自适应配置
@@ -28,6 +32,33 @@ const setRemUnit = () => {
   document.documentElement.style.fontSize = `${fontSize}px`;
 };
 
+// 控制左右模块显示状态的响应式变量
+const isLeftModulesVisible = ref(true)
+const isRightModulesVisible = ref(true)
+
+// 切换左侧模块显示状态
+const toggleLeftModules = () => {
+  isLeftModulesVisible.value = !isLeftModulesVisible.value
+}
+
+// 切换右侧模块显示状态
+const toggleRightModules = () => {
+  isRightModulesVisible.value = !isRightModulesVisible.value
+}
+
+// 切换两侧模块显示状态
+const toggleBothModules = () => {
+  isLeftModulesVisible.value = !isLeftModulesVisible.value
+  isRightModulesVisible.value = !isRightModulesVisible.value
+}
+
+
+// 导入所需的图片资源
+import arrowLeftImg from '@/assets/jinrun/arrow-left.png'
+import arrowRightImg from '@/assets/jinrun/arrow-right.png'
+
+
+
 onMounted(() => {
   // 配置Cesium资源路径
   window.CESIUM_BASE_URL = '/Cesium';
@@ -154,21 +185,63 @@ const navTo = () => {
 
 
         <!-- 非地图相关 开始 -->
-    <div class="mine-monitor-page">
 
-      <!-- 左侧3个模块 -->
-      <div class="left-modules">
+        <!-- 左侧收起按钮 -->
+  <div 
+    class="toggle-btn left-toggle" 
+    :class="{ 'collapsed': !isLeftModulesVisible }"
+    @click="toggleBothModules"
+  >
+    <div class="btn-arrow1">
+      <div>
+        
+          <img :src="isLeftModulesVisible ? arrowLeftImg : arrowRightImg" alt="" srcset=""><br>
+          <span class="arrow-font">收</span>
+          <br>
+          <span class="arrow-font">起</span>
+          
+      </div>
+    </div>
+  </div>
+  
+  <!-- 右侧收起按钮 -->
+  <div 
+    class="toggle-btn right-toggle" 
+    :class="{ 'collapsed': !isRightModulesVisible }"
+    @click="toggleBothModules"
+  >
+    <!-- <div class="btn-arrow1"><img src="@/assets/jinrun/arrow-right.png" alt="" srcset=""><br>收<br>起</div> -->
+     <div class="btn-arrow1">
+      <div>
+        
+          <img :src="isLeftModulesVisible ? arrowRightImg : arrowLeftImg" alt="" srcset=""><br>
+          <span class="arrow-font">收</span>
+          <br>
+          <span class="arrow-font">起</span>
+          
+      </div>
+    </div>
+  </div>
+
+    <!-- 左侧模块容器 -->
+  <transition name="slide-left">
+    <div class="left-modules" v-show="isLeftModulesVisible">
       <LeftDeviceStatus />
-        <LeftRainfallTrend />
-        <LeftOnlineMonitor />
+      <!-- <LeftDeviceStatus />
+      <LeftDeviceStatus /> -->
+      <!-- <LeftRainfallTrend />
+      <LeftOnlineMonitor /> -->
     </div>
+  </transition>
 
-      <div class="right-modules">
-        <RightAiWarning />
+  <!-- 右侧模块容器 -->
+  <transition name="slide-right">
+    <div class="right-modules" v-show="isRightModulesVisible">
+      <!-- <RightAiWarning />
       <RightEnvMonitor />
-        <RightTodayAlarm />
-      </div>
+      <RightTodayAlarm /> -->
     </div>
+  </transition>
  <!-- 非地图相关 结束 -->
   
 </template>
@@ -255,75 +328,166 @@ const navTo = () => {
         background-size: contain;
         background-position-x: right;
 }
-// .mine-monitor-page {
-//   width: 100%;
-//   height: 100vh;
-//   overflow: hidden;
-//   // background-color: var(--n-bg-color);
-//   // background-image: url('@/assets/jinrun/border.png');
-//   // background-size: cover;
-//   // background-position: center;
-//     background-image: url('@/assets/jinrun/top.png'),
-//                     url('@/assets/jinrun/bottom.png'),
-//                     url('@/assets/jinrun/left.png'),
-//                     url('@/assets/jinrun/right.png');
-//   background-size: 100% auto, 100% auto, auto 100%, auto 100%;
-//   background-position: top center, bottom center, left center, right center;
-//   background-repeat: no-repeat;
-//   position: absolute;
-//   position: absolute;
-
-//   .page-header {
-//     height: 0.8rem;
-//     margin-bottom: 0.2rem;
-//     background: var(--n-bg-color-secondary);
-
-//     .header-content {
-//       display: flex;
-//       justify-content: center;
-//       align-items: center;
-//       height: 100%;
-      
-
-//       // .title {
-//       //   font-size: 0.32rem;
-//       //   font-weight: bold;
-//       //   color: var(--n-primary-color);
-//       //   background-image: url('@/assets/jinrun/title.png');
-//       //   width: 100%;
-//       //   text-align: center;
-//       //   // line-height: 0.8rem;
-//       // }
-
-//       .header-operate {
-//         font-size: 0.16rem;
-//         display: flex;
-//         align-items: center;
-//       }
-//     }
-//   }
 
-//   .content-container {
-//     display: grid;
-//     grid-template-columns: 2.8rem 1fr 2.8rem;
-//     grid-gap: 0.2rem;
-//     height: calc(100vh - 1rem);
-//     padding: 0 0.2rem;
-
-//     .left-modules, .right-modules {
-//       display: flex;
-//       flex-direction: column;
-//       gap: 0.2rem;
-//     }
 
-//     .middle-map {
-//       border-radius: 0.1rem;
-//       overflow: hidden;
-//       background: var(--n-bg-color-secondary);
-//     }
-//   }
-// }
+// 收起按钮样式
+.toggle-btn {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  width: .71rem;
+  height: 1.87rem;
+  // background: rgba(0, 138, 255, 0.8);
+  background-image: url('@/assets/jinrun/toggle-left.png');
+  background-size: cover;
+    background-repeat: no-repeat;
+  border-radius: 0 10px 10px 0;
+  cursor: pointer;
+  z-index: 100;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.3s ease;
+  
+  &.left-toggle {
+    left: 4.65rem; /* 与左侧模块宽度一致 */
+  background-image: url('@/assets/jinrun/toggle-left.png');
+
+  }
+  &.left-toggle:hover {
+  background-image: url('@/assets/jinrun/toggle-left_click.png');
+
+  }
+  
+  &.right-toggle {
+    right: 4.65rem;; /* 与右侧模块宽度一致 */
+  background-image: url('@/assets/jinrun/toggle-right.png');
+
+  }
+   &.right-toggle:hover {
+  background-image: url('@/assets/jinrun/toggle-right_click.png');
+
+  }
+  
+  
+  &.collapsed {
+    &.left-toggle {
+      left: .55rem;
+      border-radius: 0 10px 10px 0;
+    }
+    
+    &.right-toggle {
+      right: .55rem;
+      border-radius: 10px 0 0 10px;
+    }
+  }
+
+  .btn-arrow1{
+    img{
+      width: 0.18rem;
+      // height: 0.21rem;
+      // margin-bottom:.1rem;
+      // margin-bottom: -.15rem;
+    }
+  }
+  
+  .btn-arrow {
+    width: 10px;
+    height: 10px;
+    border-top: 2px solid #fff;
+    border-right: 2px solid #fff;
+    transition: transform 0.3s ease;
+    
+    &::before {
+      content: '';
+      position: absolute;
+      width: 2px;
+      height: 10px;
+      background: #fff;
+      top: -4px;
+      right: 4px;
+    }
+  }
+  
+  &.left-toggle .btn-arrow {
+    transform: rotate(135deg);
+  }
+  
+  &.right-toggle .btn-arrow {
+    transform: rotate(-45deg);
+  }
+  
+  &.collapsed {
+    &.left-toggle .btn-arrow {
+      transform: rotate(-45deg);
+    }
+    
+    &.right-toggle .btn-arrow {
+      transform: rotate(135deg);
+    }
+  }
+  
+  &:hover {
+    // background: rgba(0, 138, 255, 1);
+  }
+}
+
+// 左侧模块滑动动画
+.slide-left-enter-active,
+.slide-left-leave-active {
+  transition: transform 0.5s ease, opacity 0.5s ease;
+}
+
+.slide-left-enter-from {
+  transform: translateX(-100%);
+  opacity: 0;
+}
+
+.slide-left-leave-to {
+  transform: translateX(-100%);
+  opacity: 0;
+}
+
+// 右侧模块滑动动画
+.slide-right-enter-active,
+.slide-right-leave-active {
+  transition: transform 0.5s ease, opacity 0.5s ease;
+}
+
+.slide-right-enter-from {
+  transform: translateX(100%);
+  opacity: 0;
+}
+
+.slide-right-leave-to {
+  transform: translateX(100%);
+  opacity: 0;
+}
+
+
+
+// 当模块隐藏时调整收起按钮位置
+.left-modules:not(.v-enter-active):not(.v-leave-active) ~ .left-toggle:not(.collapsed) {
+  left: 0;
+  border-radius: 0 10px 10px 0;
+}
+
+.right-modules:not(.v-enter-active):not(.v-leave-active) ~ .right-toggle:not(.collapsed) {
+  right: 0;
+  border-radius: 10px 0 0 10px;
+}
+
+.left-modules, .right-modules {
+  width: 4.65rem;
+  background: pink;
+}
+
+.arrow-font{
+  color:#fff; font-size:0.18rem;
+}
+
 
+// 地图相关
 
 .cesium-container {
   width: 100%;