需改样式框

src/components/mCard/index.vue

@@ -251,8 +251,8 @@
       <div class="m-card-bd-bg" :style="calcWidthHeightStyle">
         <svg
           :width="width"
-          :height="height"
-          :viewBox="`0 0 ${width} ${height}`"
+          :height="height || 200"
+          :viewBox="`0 0 ${width} ${height || 200}`"
           fill="none"
           xmlns="http://www.w3.org/2000/svg"
         >
@@ -295,7 +295,7 @@ const props = defineProps({
   },
   height: {
     type: Number,
-    default: 200,
+    default: null,
   },
   title: {
     type: String,
@@ -381,9 +381,9 @@ const titleStorke = computed(() => {
 // bd的路径
 const bdPath = computed(() => {
   const minHeight = 156
-  let diff = props.height - minHeight
+  let height = props.height || minHeight
+  let diff = height - minHeight
   let width = props.width
-  // if (diff < minHeight) diff = 0
   return `M3.485 ${46.0565 + diff / 2}
   V${45.8735 + diff / 2}
   L3.36682 ${45.7337 + diff / 2}
@@ -406,6 +406,9 @@ const bdPath = computed(() => {
 })
 
 const calcWidthHeightStyle = computed(() => {
+  if (props.height === null) {
+    return `width:${props.width}px;`
+  }
   return `width:${props.width}px;height:${props.height}px;`
 })
 onMounted(() => {
@@ -415,6 +418,7 @@ onMounted(() => {
 <style lang="scss">
 .m-card {
   position: relative;
+  min-height: 100px;
   &-hd {
     position: absolute;
     left: 0;
@@ -464,16 +468,15 @@ onMounted(() => {
     }
   }
   &-bd {
-    position: absolute;
-    left: 0;
-    top: 0;
-
+    position: relative;
+    min-height: 100px;
     z-index: 1;
-
     &-bg {
       position: absolute;
       left: 0;
       top: 0;
+      width: 100%;
+      height: 100%;
     }
     &-bottom-left-arrow {
       position: absolute;
@@ -498,11 +501,9 @@ onMounted(() => {
       margin-top: -35px;
     }
     &-content {
-      position: absolute;
-      left: 0;
+      position: relative;
       top: 36px;
-      right: 0;
-      bottom: 0;
+      min-height: 64px;
       pointer-events: all;
       overflow: hidden;
     }

src/views/map/components/BulkCommoditySalesChart.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="left-card tall-card">
-    <m-card title="中心简介" :height="500">
+    <m-card title="中心简介" :height="550">
       <div class="carousel-container">
         <div class="carousel-wrapper" :style="{ transform: `translateX(-${currentIndex * 100}%)` }">
           <div class="carousel-item" v-for="(item, index) in carouselItems" :key="index">

src/views/map/components/ElectricityUsage.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="right-card">
-    <m-card title="测站名录" :height="500">
+    <m-card title="测站名录" :height="450">
       <div class="station-list">
         <div class="station-list-header">
           <div class="header-item">名称</div>
@@ -126,6 +126,104 @@ const stationData = ref([
     warningLevel: 3.43,
     isExceeded: true,
     time: "2026-02-04 15:20"
+  },
+  {
+    name: "周庄",
+    waterLevel: 2.82,
+    warningLevel: 3.33,
+    isExceeded: false,
+    time: "2026-02-04 15:30"
+  },
+  {
+    name: "锦溪",
+    waterLevel: 2.78,
+    warningLevel: 3.33,
+    isExceeded: false,
+    time: "2026-02-04 15:30"
+  },
+  {
+    name: "甪直",
+    waterLevel: 2.85,
+    warningLevel: 3.33,
+    isExceeded: false,
+    time: "2026-02-04 15:30"
+  },
+  {
+    name: "张浦",
+    waterLevel: 2.91,
+    warningLevel: 3.43,
+    isExceeded: false,
+    time: "2026-02-04 15:30"
+  },
+  {
+    name: "陆家",
+    waterLevel: 2.88,
+    warningLevel: 3.43,
+    isExceeded: false,
+    time: "2026-02-04 15:30"
+  },
+  {
+    name: "花桥",
+    waterLevel: 2.92,
+    warningLevel: 3.43,
+    isExceeded: false,
+    time: "2026-02-04 15:30"
+  },
+  {
+    name: "千灯",
+    waterLevel: 2.86,
+    warningLevel: 3.43,
+    isExceeded: false,
+    time: "2026-02-04 15:30"
+  },
+  {
+    name: "巴城湖",
+    waterLevel: 2.95,
+    warningLevel: 3.43,
+    isExceeded: false,
+    time: "2026-02-04 15:30"
+  },
+  {
+    name: "阳澄湖",
+    waterLevel: 2.97,
+    warningLevel: 3.43,
+    isExceeded: false,
+    time: "2026-02-04 15:30"
+  },
+  {
+    name: "淀山湖",
+    waterLevel: 2.89,
+    warningLevel: 3.33,
+    isExceeded: false,
+    time: "2026-02-04 15:30"
+  },
+  {
+    name: "傀儡湖",
+    waterLevel: 2.93,
+    warningLevel: 3.43,
+    isExceeded: false,
+    time: "2026-02-04 15:30"
+  },
+  {
+    name: "鳗鲡湖",
+    waterLevel: 2.90,
+    warningLevel: 3.43,
+    isExceeded: false,
+    time: "2026-02-04 15:30"
+  },
+  {
+    name: "金鸡湖",
+    waterLevel: 2.88,
+    warningLevel: 3.33,
+    isExceeded: false,
+    time: "2026-02-04 15:30"
+  },
+  {
+    name: "独墅湖",
+    waterLevel: 2.91,
+    warningLevel: 3.33,
+    isExceeded: false,
+    time: "2026-02-04 15:30"
   }
 ])
 </script>
@@ -136,7 +234,7 @@ const stationData = ref([
 }
 
 .station-list {
-  height: calc(500px - 60px);
+  height: 100%;
   display: flex;
   flex-direction: column;
   padding: 0 10px;
@@ -151,6 +249,7 @@ const stationData = ref([
   font-weight: bold;
   color: #30DCFF;
   border-bottom: 1px solid #3F5B73;
+  flex-shrink: 0;
 }
 
 .header-item {
@@ -163,6 +262,7 @@ const stationData = ref([
   flex: 1;
   overflow-y: auto;
   padding: 10px 0;
+  min-height: 0;
 }
 
 .station-item {

src/views/map/components/PurposeSpecialFunds.vue

@@ -131,7 +131,20 @@ const waterSystemTableData = reactive([
   { name: "吴淞江", type: "河道", lengthOrArea: "18.7 km" },
   { name: "淀山湖", type: "湖泊", lengthOrArea: "62 km²" },
   { name: "阳澄湖", type: "湖泊", lengthOrArea: "120 km²" },
-  { name: "青阳港", type: "河道", lengthOrArea: "8.5 km" }
+  { name: "青阳港", type: "河道", lengthOrArea: "8.5 km" },
+  { name: "杨林塘", type: "河道", lengthOrArea: "12.3 km" },
+  { name: "急水港", type: "河道", lengthOrArea: "9.8 km" },
+  { name: "千灯浦", type: "河道", lengthOrArea: "7.6 km" },
+  { name: "大直港", type: "河道", lengthOrArea: "6.9 km" },
+  { name: "小直港", type: "河道", lengthOrArea: "5.4 km" },
+  { name: "茆沙塘", type: "河道", lengthOrArea: "8.2 km" },
+  { name: "张家港河", type: "河道", lengthOrArea: "10.5 km" },
+  { name: "七浦塘", type: "河道", lengthOrArea: "11.7 km" },
+  { name: "白茆塘", type: "河道", lengthOrArea: "9.3 km" },
+  { name: "傀儡湖", type: "湖泊", lengthOrArea: "3.8 km²" },
+  { name: "鳗鲡湖", type: "湖泊", lengthOrArea: "2.5 km²" },
+  { name: "金鸡湖", type: "湖泊", lengthOrArea: "7.4 km²" },
+  { name: "独墅湖", type: "湖泊", lengthOrArea: "11.5 km²" }
 ])
 
 </script>
@@ -146,18 +159,19 @@ const waterSystemTableData = reactive([
 }
 
 .chart-section {
-  flex: 1;
-  min-height: 150px;
-  margin-bottom: 15px;
+  height: 150px;
+  margin-bottom: 10px;
 }
 
 .table-section {
   flex: 1;
-  min-height: 120px;
+  min-height: 100px;
   background-color: rgba(10, 40, 60, 0.3);
   border-radius: 4px;
   border: 1px solid rgba(63, 91, 115, 0.3);
   overflow: hidden;
+  display: flex;
+  flex-direction: column;
 }
 
 .table-header {
@@ -167,6 +181,7 @@ const waterSystemTableData = reactive([
   color: #30DCFF;
   font-weight: bold;
   border-bottom: 1px solid rgba(63, 91, 115, 0.5);
+  flex-shrink: 0;
 }
 
 .header-item {
@@ -176,8 +191,9 @@ const waterSystemTableData = reactive([
 }
 
 .table-body {
-  height: calc(100% - 40px);
+  flex: 1;
   overflow-y: auto;
+  max-height: 120px;
 }
 
 .table-row {

src/views/map/index.vue

@@ -45,7 +45,7 @@
     </div>
     <div class="vignette-overlay"></div>
     <div class="large-screen-wrap" id="large-screen">
-      <m-header title="昆山水务水文系统" sub-text="Hydrological Visualization System">
+      <m-header title="水务水文融合系统" sub-text="Hydrological Visualization System">
         <!--左侧 天气 -->
         <template v-slot:left>
           <div class="m-header-weather"><span>小雪</span><span>-4℃</span></div>
@@ -60,7 +60,7 @@
         <mMenu :default-active="state.activeIndex" @select="handleMenuSelect">
           <mMenuItem index="1">区域总览</mMenuItem>
           <mMenuItem index="2">融合体系</mMenuItem>
-          <mMenuItem index="3">水文测站</mMenuItem>
+          <mMenuItem index="3">综合业务</mMenuItem>
           <div class="top-menu-mid-space"></div>
           <mMenuItem index="4">历史沿革</mMenuItem>
           <mMenuItem index="5">水文科普</mMenuItem>
@@ -566,6 +566,37 @@ function handleMapPlayComplete() {
   opacity: 0;
 }
 
+.right-wrap {
+  position: absolute;
+  right: 32px;
+  top: 180px;
+  width: 398px;
+  bottom: 50px;
+  perspective: 500px;
+  perspective-origin: 50% 50%;
+}
+
+.right-wrap-3d {
+  position: absolute;
+  left: 0;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  transform: translate3d(0px, 0px, 0px) scaleX(1) scaleY(1) rotateX(0deg) rotateY(-6deg) rotateZ(0deg) skewX(0deg) skewY(0deg);
+  z-index: 4;
+}
+
+.right-wrap-3d > div {
+  margin-bottom: 16px;
+}
+
+.right-wrap-3d > div:last-child {
+  margin-bottom: 0;
+}
+
 .bottom-tray {
   transform: translateY(100%);
   opacity: 0;

src/views/waterResource/components/CollaborativeProcess.vue

@@ -1,5 +1,5 @@
 <template>
-  <m-card title="协同业务流程" :width="398" :height="450">
+  <m-card title="协同业务流程" :width="398">
     <div class="collaborative-process">
       <div class="process-tabs">
         <div
@@ -70,16 +70,46 @@ const processData = ref({
       title: "联合巡查",
       desc: "多部门协同巡检重点区域",
     },
+    {
+      icon: "📱",
+      title: "数据采集",
+      desc: "实时采集水位、流量、降雨量等数据",
+    },
+    {
+      icon: "💾",
+      title: "数据传输",
+      desc: "将采集数据传输至中央平台进行处理",
+    },
+    {
+      icon: "📊",
+      title: "数据分析",
+      desc: "对水情数据进行多维度分析与预测",
+    },
     {
       icon: "💬",
       title: "联合会商",
       desc: "多部门在线研判水情，形成调度方案",
     },
+    {
+      icon: "📋",
+      title: "方案审批",
+      desc: "调度方案经过多级审批确认",
+    },
     {
       icon: "📡",
       title: "指令下达",
       desc: "一键下达调度指令，实时跟踪执行",
     },
+    {
+      icon: "✅",
+      title: "执行反馈",
+      desc: "各执行单位实时反馈执行情况",
+    },
+    {
+      icon: "📝",
+      title: "效果评估",
+      desc: "对调度效果进行评估与总结",
+    },
   ],
   1: [
     {
@@ -92,16 +122,46 @@ const processData = ref({
       title: "联合巡查",
       desc: "管网全覆盖巡检，排查异常",
     },
+    {
+      icon: "📡",
+      title: "智能监测",
+      desc: "通过传感器网络实时监测管网状态",
+    },
+    {
+      icon: "🔄",
+      title: "需求预测",
+      desc: "基于历史数据预测水资源需求",
+    },
+    {
+      icon: "⚡",
+      title: "负荷分析",
+      desc: "分析管网负荷，优化供水压力",
+    },
     {
       icon: "🤝",
       title: "联合会商",
       desc: "供需平衡分析，制定调度策略",
     },
+    {
+      icon: "💻",
+      title: "方案模拟",
+      desc: "通过模型模拟调度方案效果",
+    },
     {
       icon: "🎯",
       title: "指令下达",
       desc: "智能调度指令下达，优化配置",
     },
+    {
+      icon: "📱",
+      title: "远程控制",
+      desc: "远程控制水泵、阀门等设施",
+    },
+    {
+      icon: "📈",
+      title: "效果分析",
+      desc: "分析调度效果，持续优化策略",
+    },
   ],
   2: [
     {
@@ -114,16 +174,46 @@ const processData = ref({
       title: "联合巡查",
       desc: "采样检测重点断面水质状况",
     },
+    {
+      icon: "📱",
+      title: "现场采样",
+      desc: "在重点区域进行水质样本采集",
+    },
+    {
+      icon: "🔬",
+      title: "实验室检测",
+      desc: "对采集样本进行详细实验室检测",
+    },
+    {
+      icon: "📊",
+      title: "数据比对",
+      desc: "将检测数据与标准进行比对分析",
+    },
     {
       icon: "📈",
+      title: "趋势分析",
+      desc: "分析水质变化趋势，预测可能风险",
+    },
+    {
+      icon: "💬",
       title: "联合会商",
-      desc: "水质趋势分析，制定管控措施",
+      desc: "多部门会商，制定水质管控措施",
     },
     {
       icon: "⚡",
       title: "指令下达",
       desc: "应急处置指令快速下达",
     },
+    {
+      icon: "🔧",
+      title: "措施落实",
+      desc: "各责任单位落实水质改善措施",
+    },
+    {
+      icon: "✅",
+      title: "效果评估",
+      desc: "对水质改善效果进行评估验收",
+    },
   ],
 })
 

src/views/waterResource/index.vue

@@ -12,12 +12,9 @@
     </div>
     <div class="right-column">
       <div class="right-column-3d">
-        <div class="module-card">
+        <div class="module-card full-height">
           <CollaborativeProcess />
         </div>
-        <div class="module-card">
-          <DemonstrationBase />
-        </div>
       </div>
     </div>
   </div>
@@ -95,7 +92,6 @@ import DemonstrationBase from "./components/DemonstrationBase.vue"
     display: flex;
     flex-direction: column;
     justify-content: flex-start;
-    gap: 20px;
     transform: translate3d(0px, 0px, 0px) scaleX(1) scaleY(1) rotateX(0deg) rotateY(-6deg) rotateZ(0deg) skewX(0deg) skewY(0deg);
   }
   .module-card {
@@ -109,6 +105,20 @@ import DemonstrationBase from "./components/DemonstrationBase.vue"
     &:first-child {
       margin-top: -30px;
     }
+    &.full-height {
+      height: 100%;
+      margin-top: -30px;
+      display: flex;
+      flex-direction: column;
+      .m-card {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        .m-card-bd {
+          flex: 1;
+        }
+      }
+    }
   }
 }
 </style>