添加左右框组件及饼图

WebVue/TaiHufenglang/package-lock.json

@@ -12,6 +12,7 @@
         "@jiaminghi/data-view": "^2.10.0",
         "@jiaminghi/data-view-react": "^1.2.5",
         "autofit.js": "^3.2.8",
+        "echarts": "^5.6.0",
         "vue": "^3.5.13"
       },
       "devDependencies": {
@@ -1812,6 +1813,15 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/echarts": {
+      "version": "5.6.0",
+      "resolved": "https://registry.npmjs.org/echarts/-/echarts-5.6.0.tgz",
+      "integrity": "sha512-oTbVTsXfKuEhxftHqL5xprgLoc0k7uScAwtryCgWF6hPYFLRwOUHiFmHGCBKP5NPFNkDVopOieyUqYGH8Fa3kA==",
+      "dependencies": {
+        "tslib": "2.3.0",
+        "zrender": "5.6.1"
+      }
+    },
     "node_modules/electron-to-chromium": {
       "version": "1.5.167",
       "resolved": "https://mirrors.huaweicloud.com/repository/npm/electron-to-chromium/-/electron-to-chromium-1.5.167.tgz",
@@ -2703,6 +2713,11 @@
         "node": ">=6"
       }
     },
+    "node_modules/tslib": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.0.tgz",
+      "integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg=="
+    },
     "node_modules/unicorn-magic": {
       "version": "0.3.0",
       "resolved": "https://mirrors.huaweicloud.com/repository/npm/unicorn-magic/-/unicorn-magic-0.3.0.tgz",
@@ -2976,6 +2991,14 @@
       "funding": {
         "url": "https://github.com/sponsors/sindresorhus"
       }
+    },
+    "node_modules/zrender": {
+      "version": "5.6.1",
+      "resolved": "https://registry.npmjs.org/zrender/-/zrender-5.6.1.tgz",
+      "integrity": "sha512-OFXkDJKcrlx5su2XbzJvj/34Q3m6PvyCZkVPHGYpcCJ52ek4U/ymZyfuV1nKE23AyBJ51E/6Yr0mhZ7xGTO4ag==",
+      "dependencies": {
+        "tslib": "2.3.0"
+      }
     }
   }
 }

WebVue/TaiHufenglang/package.json

@@ -13,6 +13,7 @@
     "@jiaminghi/data-view": "^2.10.0",
     "@jiaminghi/data-view-react": "^1.2.5",
     "autofit.js": "^3.2.8",
+    "echarts": "^5.6.0",
     "vue": "^3.5.13"
   },
   "devDependencies": {

WebVue/TaiHufenglang/src/assets/css/index.css

@@ -1,139 +1,225 @@
-.TX{
-    position: fixed;
-    z-index: 300;
-  }
-  
-  .map-container {
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    z-index: 0;
-  }
-  
-  /* 导航栏样式 */
-  .main-nav {
-    position: fixed;
-    top: 0;
-    left: 0;
-    right: 0;
-    height: 90px;
-    align-items: center;
-    justify-content: space-between;
-    padding: 0 20px;
-    z-index: 100;
-    background-image: url('@/assets/icon/标题.png');
-    /* 请确保路径正确 */
-    background-size: cover;
-  }
-  
-  .nav-group {
-    z-index:4;
-    left: 0;
-    display: flex;
-    flex-direction: row;
-    gap: 320px;
-  }
-  
-  
-  .system-title {
-    text-align: center;
-    color: white;
-    font-size: 2.5em;
-    text-shadow: 0 2px 4px rgba(0,0,0,0.2);
-    line-height: 30px;
+.TX {
+  position: fixed;
+  z-index: 300;
+}
+
+.map-container {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 0;
+}
+
+/* 导航栏样式 */
+.main-nav {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  width: 100%;
+  height: 120px;
+  align-items: center;
+  justify-content: space-between;
+  /* padding: 0 20px; */
+  z-index: 100;
+  background-image: url('@/assets/icon/标题.png');
+  /* 请确保路径正确 */
+  background-size: cover;
+}
+
+/* 大标题 */
+.system-title {
+  text-align: center;
+  color: white;
+  font-size: 2.5em;
+  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+  line-height: 30px;
+}
+
+/* 左侧导航栏按钮 */
+.nav-buttons-l {
+  display: flex;
+  width: 500px;
+  height: 80px;
+  position: absolute;
+  top: 35px;
+  left: 250px;
+}
+
+.nav-buttons-r {
+  display: flex;
+  width: 500px;
+  height: 80px;
+  position: absolute;
+  top: 35px;
+  left: 1180px;
+}
+
+.nav-btn-left {
+  background-image: url('@/assets/icon/按钮左.png');
+  background-size: cover;
+  width: 50%;
+  height: 50px;
+  font-size: 24px;
+  color: white;
+  font-weight: bold;
+  text-align: center;
+  line-height: 25px;
+}
+
+.nav-btn-right {
+  background-image: url('@/assets/icon/按钮右.png');
+  background-size: cover;
+  width: 50%;
+  height: 50px;
+  font-size: 24px;
+  color: white;
+  font-weight: bold;
+  text-align: center;
+  line-height: 25px;
+}
+
+
+/* 主面板布局 */
+.main {
+  position: fixed;
+  top: 120px;
+  left: 0;
+  right: 0;
+  bottom: 120px;
+  width: 100%;
+  display: flex;
+  height: calc(100% - 240px);
+  gap: 10px;
+  z-index: 102;
+  pointer-events: none;  
+  opacity: 0.9;         
+}
+.modul-box {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+  gap: 20px;
+  z-index: 105;
+  pointer-events: auto
+}
+
+/* 标题 */
+.title {
+  height: 45px;
+  background-image: url('@/assets/icon/标题背景.png');
+  background-size: cover;
+  font-size: 25px;
+  font-weight: 600;
+  line-height: 22px;
+  padding-left: 30px;
+  color: #fff;
+  padding-top: 10px;
+}
+.boxstyle {
+  position: relative;
+  left: 12px;
+  background-image: url('@/assets/icon/大屏模块框内容栏2.png');
+  background-size: cover; 
+  height: calc(100% - 45px);
+  width: calc(100% - 12px);
+}
+.overlay-layer {
+  pointer-events: none;  /* 关键属性 */
+  opacity: 0.5;          /* 保持可见但不阻挡操作 */
+}
+
+
+/* 面板容器 */
+.panel-container {
+  position: fixed;
+  top: 120px;
+  left: 0;
+  right: 0;
+  display: flex;
+  justify-content: space-between;
+  padding: 0 20px;
+  gap: 20px;
+  z-index: 2;
+}
+
+.panel-column {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+  max-width: 480px;
+  width: 100%;
+}
+
+/* 信息面板 */
+.info-panel {
+  background: var(--panel-bg);
+  border-radius: var(--border-radius);
+  padding: 20px;
+  backdrop-filter: blur(15px);
+  box-shadow: var(--box-shadow);
+  transition: transform 0.3s ease;
+  border: 1px solid rgba(255, 255, 255, 0.3);
+}
+
+.info-panel:hover {
+  transform: translateY(-5px);
+}
+
+.panel-title {
+  margin: 0 0 15px;
+  padding-bottom: 8px;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+  color: #2c3e50;
+  font-size: 1.1em;
+}
+
+.panel-content p {
+  margin: 8px 0;
+  color: #34495e;
+  font-size: 0.95em;
+  line-height: 1.6;
+}
+
+.value {
+  color: var(--primary-color);
+  font-weight: 600;
+}
+
+.status {
+  padding: 2px 8px;
+  border-radius: 4px;
+  font-size: 0.85em;
+}
+
+.online {
+  background: #e8f5e9;
+  color: #2e7d32;
+}
+
+.offline {
+  background: #ffebee;
+  color: #c62828;
+}
+
+/* 响应式设计 */
+@media (max-width: 1440px) {
+  .panel-column {
+    max-width: 400px;
   }
-  
+}
 
-  
-  /* 面板容器 */
+@media (max-width: 1024px) {
   .panel-container {
-    position: fixed;
-    top: 120px;
-    left: 0;
-    right: 0;
-    display: flex;
-    justify-content: space-between;
-    padding: 0 20px;
-    gap: 20px;
-    z-index: 2;
-  }
-  
-  .panel-column {
-    display: flex;
     flex-direction: column;
-    gap: 20px;
-    max-width: 480px;
-    width: 100%;
-  }
-  
-  /* 信息面板 */
-  .info-panel {
-    background: var(--panel-bg);
-    border-radius: var(--border-radius);
-    padding: 20px;
-    backdrop-filter: blur(15px);
-    box-shadow: var(--box-shadow);
-    transition: transform 0.3s ease;
-    border: 1px solid rgba(255,255,255,0.3);
-  }
-  
-  .info-panel:hover {
-    transform: translateY(-5px);
-  }
-  
-  .panel-title {
-    margin: 0 0 15px;
-    padding-bottom: 8px;
-    border-bottom: 1px solid rgba(0,0,0,0.1);
-    color: #2c3e50;
-    font-size: 1.1em;
-  }
-  
-  .panel-content p {
-    margin: 8px 0;
-    color: #34495e;
-    font-size: 0.95em;
-    line-height: 1.6;
-  }
-  
-  .value {
-    color: var(--primary-color);
-    font-weight: 600;
-  }
-  
-  .status {
-    padding: 2px 8px;
-    border-radius: 4px;
-    font-size: 0.85em;
-  }
-  
-  .online {
-    background: #e8f5e9;
-    color: #2e7d32;
-  }
-  
-  .offline {
-    background: #ffebee;
-    color: #c62828;
+    align-items: center;
+    top: 140px;
   }
-  
-  /* 响应式设计 */
-  @media (max-width: 1440px) {
-    .panel-column {
-      max-width: 400px;
-    }
+
+  .panel-column {
+    max-width: 90%;
   }
-  
-  @media (max-width: 1024px) {
-    .panel-container {
-      flex-direction: column;
-      align-items: center;
-      top: 140px;
-    }
-    
-    .panel-column {
-      max-width: 90%;
-    }
-  }
+}

WebVue/TaiHufenglang/src/components/MapContainer.vue

@@ -1,9 +1,17 @@
 <template>
+  <div class="content">
+    <Header />
+    <Gradientoverlay />
+    <div class="main">
+      <Leftmoudle />
+      <Middlemoudle />
+      <Rightmoudle />
+    </div>
+  </div>
+
   <!-- 地图容器 -->
   <div id="map-container" class="map-container"></div>
 
-  <Header />
-  <Gradientoverlay />
 
 </template>
 
@@ -13,6 +21,9 @@ import { ref, onMounted, onUnmounted } from 'vue'
 import AMapLoader from '@amap/amap-jsapi-loader'
 import Header from './header.vue'
 import Gradientoverlay from './gradient-overlay.vue'
+import Leftmoudle from './leftmodul.vue'
+import Rightmoudle from './rightmodul.vue'
+import Middlemoudle from './middlemodul.vue'
 
 
 
@@ -73,6 +84,4 @@ onUnmounted(() => map.value?.destroy())
   --border-radius: 12px;
   --box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
 }
-
-
 </style>

WebVue/TaiHufenglang/src/components/charts/chart1.vue

@@ -0,0 +1,63 @@
+<script setup>
+import { ref, onMounted } from 'vue'
+import * as echarts from 'echarts';
+
+const chart = ref();
+onMounted(() => {    //加载图表
+    chartInit()
+})
+function chartInit() {
+    var myChart = echarts.init(chart.value);
+    // 指定图表的配置项和数据
+    var option = {
+
+        tooltip: {
+            trigger: 'item'
+        },
+        legend: {
+            orient: 'horizontal',     // 修改为横向排列 ★ 
+            top: 'top',               // 定位在顶部 ★ 
+            padding: [5, 0],          // 上下边距优化 
+            itemGap: 20,              // 图例项间距 
+            textStyle: {
+                fontSize: 12 ,           // 字体大小适配 
+                color: '#fff'            // 字体颜色适配
+
+            }
+        },
+        series: [
+            {
+                name: '站点统计',
+                type: 'pie',
+                radius: '50%',
+                data: [
+                    { value: 1048, name: '水位站' },
+                    { value: 735, name: '雨量站' },
+                    { value: 580, name: '水质站' },
+                    { value: 484, name: '风情站' },
+                ],
+                emphasis: {
+                    itemStyle: {
+                        shadowBlur: 10,
+                        shadowOffsetX: 0,
+                        shadowColor: 'rgba(0, 0, 0, 0.5)'
+                    }
+                }
+            }
+        ]
+    }
+    // 使用刚指定的配置项和数据显示图表。
+    myChart.setOption(option);
+}
+</script>
+
+<template>
+    <div class="box" style="flex:0 1 30%;">
+        <div class="title">站点统计</div>
+        <div class="boxstyle">
+            <div ref="chart" style="width: 100%;height:100%;top: 20px;"></div>
+        </div>
+    </div>
+</template>
+
+<style scoped></style>

WebVue/TaiHufenglang/src/components/charts/chart2.vue

@@ -0,0 +1,10 @@
+<script></script>
+
+<template>
+    <div class="box" style="flex:0 1 70%;">
+        <div class="title">站点清单</div>
+        <div class="boxstyle"></div>
+    </div>
+</template>
+
+<style scoped></style>

WebVue/TaiHufenglang/src/components/charts/chart3.vue

@@ -0,0 +1,10 @@
+<script></script>
+
+<template>
+    <div class="box" style="flex:0 1 33.33%;">
+        <div class="title">超警超保统计</div>
+        <div class="boxstyle"></div>
+    </div>
+</template>
+
+<style scoped></style>

WebVue/TaiHufenglang/src/components/charts/chart4.vue

@@ -0,0 +1,10 @@
+<script></script>
+
+<template>
+    <div class="box" style="flex:0 1 33.33%;">
+        <div class="title">水情分析</div>
+        <div class="boxstyle"></div>
+    </div>
+</template>
+
+<style scoped></style>

WebVue/TaiHufenglang/src/components/charts/chart5.vue

@@ -0,0 +1,10 @@
+<script></script>
+
+<template>
+    <div class="box" style="flex:0 1 33.33%;">
+        <div class="title">水质分析</div>
+        <div class="boxstyle"></div>
+    </div>
+</template>
+
+<style scoped></style>

WebVue/TaiHufenglang/src/components/header.vue

@@ -1,20 +1,20 @@
-<script></script>
+<script setup></script>
 
 <template>
-      <!-- 仪表盘系统 -->
-  <div class="dashboar">
+
     <!-- 导航栏 -->
     <div class="main-nav">
       <h1 class="system-title">大屏监测系统</h1>
+      <div class="nav-buttons-l">
+        <div class="nav-btn-left">总览</div>
+        <div class="nav-btn-left">数据查询</div>
+      </div>
+      <div class="nav-buttons-r">
+        <div class="nav-btn-right">智慧运维</div>
+        <div class="nav-btn-right">个人中心</div>
+      </div>
     </div>
-    <!-- <div class="AnNiu">
-      <h1 class="TX">大屏监测系统</h1>
-    </div> -->
-    <!-- 仪表盘内容 -->
-  
-    <!-- 渐变装饰层 -->
-    <div class="gradient-overlay"></div>
-  </div>
+
 </template>
 
 <style scoped></style>

WebVue/TaiHufenglang/src/components/leftmodul.vue

@@ -0,0 +1,14 @@
+<script setup>
+import { ref } from 'vue'
+import Chart1 from './charts/chart1.vue'
+import Chart2 from './charts/chart2.vue'
+</script>
+
+<template>
+    <div class="modul-box" style="flex: 0 1 25%;">
+        <Chart1 />
+        <Chart2 />        
+    </div>
+</template>
+
+<style scoped></style>

WebVue/TaiHufenglang/src/components/middlemodul.vue

@@ -0,0 +1,11 @@
+<script setup>
+
+</script>
+
+<template>
+    <div class="overlay-layer" style="flex: 0 1 50%;">
+
+    </div>
+</template>
+
+<style scoped></style>

WebVue/TaiHufenglang/src/components/rightmodul.vue

@@ -0,0 +1,15 @@
+<script setup>
+import Chart3 from './charts/chart3.vue'
+import Chart4 from './charts/chart4.vue'
+import Chart5 from './charts/chart5.vue'
+</script>
+
+<template>
+    <div class="modul-box" style="flex: 0 1 25%;">
+        <Chart3 />
+        <Chart4 />
+        <Chart5 />
+    </div>
+</template>
+
+<style scoped></style>