wip: b2 布局

src/views/hui-jia/b1-screen/index.vue

@@ -1,11 +1,19 @@
 <template>
   <div class="b1-screen">
-    <div>1</div>
-    <div>2</div>
-    <implementationTotal />
-    <Market />
-    <implementationIng />
-    <implementationNowYear />
+    <div style="color: #fff" class="item-1">1</div>
+    <div class="middle-wrap">
+      <div style="color: #fff" class="item-2">2</div>
+      <div style="color: #fff" class="item-3">3</div>
+      <div style="color: #fff" class="item-4">4</div>
+    </div>
+    <div class="right-wrap">
+      <Market />
+      <implementationTotal />
+    </div>
+    <div class="bottom-wrap">
+      <implementationIng />
+      <implementationNowYear />
+    </div>
   </div>
 </template>
 
@@ -27,16 +35,73 @@
 </script>
 
 <style lang="scss" scoped>
+  $gap-padding: 8px;
+
   .b1-screen {
     height: 100vh;
     width: 100vw;
-    display: grid;
-    grid-template-columns: repeat(4, 1fr);
-    grid-template-rows: repeat(3, 1fr);
-    gap: 20px;
-    .now-year-container {
-      grid-column: 1 / span 2;
-      grid-row: 1 / span 2;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: flex-start;
+    gap: 16px;
+    .item-1 {
+      width: calc(25% - $gap-padding);
+      height: calc(64% - $gap-padding);
+      background: #f5f5f5;
+    }
+    .middle-wrap {
+      width: calc(50% - $gap-padding - $gap-padding);
+      height: calc(64% - $gap-padding);
+      display: flex;
+      flex-wrap: wrap;
+      gap: 16px;
+      justify-content: flex-start;
+      .item-2 {
+        flex: 0 0 100%;
+        width: 100%;
+        height: calc(50% - $gap-padding);
+        background: #f5f5f5;
+      }
+      .item-3 {
+        background: green;
+        flex: 0 0 calc(50% - $gap-padding);
+        width: calc(50% - $gap-padding);
+        height: calc(50% - $gap-padding);
+      }
+      .item-4 {
+        flex: 0 0 calc(50% - $gap-padding);
+        width: calc(50% - $gap-padding);
+        height: calc(50% - $gap-padding);
+        background: green;
+      }
+    }
+    .right-wrap {
+      display: flex;
+      flex-direction: column;
+      width: calc(25% - $gap-padding);
+      height: calc(64% - $gap-padding);
+      gap: calc($gap-padding * 2);
+      .total-container {
+        height: calc(50% - $gap-padding);
+      }
+      .market-container {
+        height: calc(50% - $gap-padding);
+      }
+    }
+    .bottom-wrap {
+      display: flex;
+      justify-content: space-around;
+      gap: 16px;
+      width: 100%;
+      height: calc(36% - $gap-padding);
+      .now-year-container {
+        width: 50%;
+        // height: 100%;
+      }
+      .implementing-container {
+        width: 50%;
+        // height: 100%;
+      }
     }
   }
 </style>

src/views/hui-jia/components/implementary/ing.vue

@@ -168,57 +168,33 @@
   @import "@/assets/css/theme.scss";
 
   .implementing-container {
-    background: var(--title-bg);
+    background: var(--content-bg);
     border-radius: 4px;
-    padding: 20px;
-    height: 100%;
     display: flex;
     flex-direction: column;
   }
 
   .implementing-title {
+    background: var(--title-bg);
     font-size: 18px;
     font-weight: 500;
     color: var(--title-primary);
-    margin-bottom: 20px;
+    padding: 4px 10px;
+    border-radius: 4px;
     display: flex;
     align-items: center;
-
-    .iconfont {
-      margin-right: 8px;
-      font-size: 20px;
-    }
   }
 
   .implementing-list {
     flex: 1;
     overflow-y: auto;
-
-    // 自定义滚动条样式
-    &::-webkit-scrollbar {
-      width: 6px;
-    }
-
-    &::-webkit-scrollbar-track {
-      background: rgba(64, 158, 255, 0.1);
-      border-radius: 3px;
-    }
-
-    &::-webkit-scrollbar-thumb {
-      background: rgba(64, 158, 255, 0.3);
-      border-radius: 3px;
-    }
-
-    &::-webkit-scrollbar-thumb:hover {
-      background: rgba(64, 158, 255, 0.5);
-    }
+    padding: 0px 10px;
+    height: calc(100% - 36px);
   }
 
   .implementing-item {
     background: var(--content-bg); // 第一个项目使用--content-bg
     padding: 16px;
-    margin-bottom: 12px;
-
     &:last-child {
       margin-bottom: 0;
     }
@@ -319,44 +295,4 @@
       flex: 1;
     }
   }
-
-  // 响应式设计
-  @media (max-width: 1200px) {
-    .item-content {
-      .content-main {
-        flex-direction: column;
-        gap: 12px;
-      }
-
-      .project-info {
-        margin-right: 0;
-        margin-bottom: 8px;
-      }
-
-      .project-stats {
-        width: 100%;
-        justify-content: space-between;
-      }
-    }
-  }
-
-  @media (max-width: 768px) {
-    .implementing-container {
-      padding: 16px;
-    }
-
-    .implementing-title {
-      font-size: 16px;
-    }
-
-    .item-content {
-      .project-stats {
-        gap: 12px;
-      }
-
-      .stat-item {
-        font-size: 12px;
-      }
-    }
-  }
 </style>

src/views/hui-jia/components/implementary/now-year.vue

@@ -4,9 +4,7 @@
       <img src="@/assets/images/shb.png" class="title-icon" />
       实施服务（今年数据）
     </div>
-    <div class="chart-container">
-      <div id="nowYearChart" class="chart"></div>
-    </div>
+    <div id="nowYearChart" class="chart"></div>
   </div>
 </template>
 
@@ -33,7 +31,6 @@
           yearTotal: [88888, 88888, 888888, 88888, 88888], // 今年累计
           totalNumbers: [8888, 8888, 8888, 8888, 8888], // 左侧显示的总数
         },
-        timer: null,
       }
     },
     computed: {
@@ -42,20 +39,12 @@
     mounted() {
       this.init()
       window.addEventListener("resize", this.handleResize)
-
-      // 设置定时刷新
-      this.timer = setInterval(() => {
-        this.loadData()
-      }, 30000) // 每30秒刷新一次
     },
     beforeDestroy() {
       if (this.chartInstance) {
         this.chartInstance.dispose()
       }
       window.removeEventListener("resize", this.handleResize)
-      if (this.timer) {
-        clearInterval(this.timer)
-      }
     },
     methods: {
       // 初始化组件
@@ -147,7 +136,7 @@
               },
               label: {
                 show: true,
-                color: '#fff'
+                color: "#fff",
               },
               barWidth: 30,
               barGap: "0%",
@@ -170,7 +159,7 @@
               },
               label: {
                 show: true,
-                color: '#fff'
+                color: "#fff",
               },
               barWidth: 30,
               barGap: "0%",
@@ -185,7 +174,7 @@
               },
               label: {
                 show: true,
-                color: '#fff'
+                color: "#fff",
               },
               itemStyle: {
                 color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
@@ -202,24 +191,12 @@
         }
 
         this.chartInstance.setOption(option)
+        this.chartInstance.resize()
       },
 
       // 加载数据
       async loadData() {
-        try {
-          const params = {
-            entCode: this.entCode,
-            communityId: this.communityId,
-          }
-          // 这里应该调用实际的API获取数据
-          // const res = await api.getNowYearServices(params)
-          // this.chartData = res.data || this.chartData
-
-          // 暂时使用模拟数据
-          this.updateChart()
-        } catch (error) {
-          console.error("获取今年实施服务数据失败:", error)
-        }
+        this.updateChart()
       },
 
       // 更新图表
@@ -258,10 +235,8 @@
   @import "@/assets/css/theme.scss";
 
   .now-year-container {
-    background: var(--title-bg);
+    background: var(--content-bg);
     border-radius: 4px;
-    padding: 20px;
-    height: 100%;
     display: flex;
     flex-direction: column;
   }
@@ -269,74 +244,16 @@
   .now-year-title {
     font-size: 18px;
     font-weight: 500;
+    border-radius: 4px;
     color: var(--title-primary);
-    margin-bottom: 20px;
+    background: var(--title-bg);
+    padding: 4px 10px;
     display: flex;
     align-items: center;
-
-    .iconfont {
-      margin-right: 8px;
-      font-size: 20px;
-    }
-  }
-
-  .chart-container {
-    flex: 1;
-    min-height: 0;
-    position: relative;
-    // 添加自定义内容显示
-    &::before {
-      content: "";
-      display: flex;
-      flex-direction: column;
-      justify-content: space-around;
-      position: absolute;
-      left: 20px;
-      top: 20px;
-      bottom: 20px;
-      width: 120px;
-      z-index: 1;
-    }
   }
 
   .chart {
     width: 100%;
     height: 100%;
-    min-height: 400px;
-  }
-
-  // 添加自定义标签显示
-  .chart-container::before {
-    content: "";
-  }
-
-  // 响应式设计
-  @media (max-width: 1200px) {
-    .now-year-container {
-      padding: 16px;
-    }
-
-    .now-year-title {
-      font-size: 16px;
-      margin-bottom: 16px;
-    }
-
-    .chart {
-      min-height: 350px;
-    }
-  }
-
-  @media (max-width: 768px) {
-    .now-year-container {
-      padding: 12px;
-    }
-
-    .now-year-title {
-      font-size: 14px;
-    }
-
-    .chart {
-      min-height: 300px;
-    }
   }
 </style>

src/views/hui-jia/components/implementary/total.vue

@@ -119,51 +119,36 @@
   @import "@/assets/css/theme.scss";
 
   .total-container {
-    background: var(--title-bg);
+    background: var(--content-bg);
     border-radius: 4px;
-    padding: 20px;
     position: relative;
     overflow: hidden;
 
-    &::before {
-      content: "";
-      position: absolute;
-      top: 0;
-      left: 0;
-      right: 0;
-      height: 2px;
-      background: linear-gradient(90deg, transparent, #409eff, transparent);
-    }
-
     .total-title {
+      padding:  4px 10px;
       display: flex;
       align-items: center;
       font-size: 18px;
       font-weight: 500;
       color: var(--title-primary);
+      background: var(--title-bg);
       margin-bottom: 20px;
     }
 
     .total-grid {
+      padding: 10px 10px;
       display: grid;
       grid-template-columns: repeat(2, 1fr);
       grid-template-rows: repeat(4, 1fr);
       gap: 16px;
+      height: calc(100% - 84px);
+      align-items: center;
     }
 
     .total-item {
+      flex: 1 1 0%;
       background: var(--content-bg);
-      border-radius: 6px;
-      padding: 16px;
       text-align: center;
-      transition: all 0.3s ease;
-      border: 1px solid rgba(64, 158, 255, 0.1);
-
-      &:hover {
-        transform: translateY(-2px);
-        box-shadow: 0 4px 12px rgba(64, 158, 255, 0.2);
-        border-color: rgba(64, 158, 255, 0.3);
-      }
 
       .total-label {
         font-size: 14px;
@@ -175,48 +160,7 @@
         font-size: 28px;
         font-weight: bold;
         color: #ffffff;
-        line-height: 1.2;
-        // 添加数字闪烁动画
-        animation: pulse 2s infinite;
       }
     }
   }
-
-  @keyframes pulse {
-    0% {
-      opacity: 1;
-      transform: scale(1);
-    }
-    50% {
-      opacity: 0.9;
-      transform: scale(1.02);
-    }
-    100% {
-      opacity: 1;
-      transform: scale(1);
-    }
-  }
-
-  // 响应式设计
-  @media (max-width: 1200px) {
-    .total-grid {
-      grid-template-columns: repeat(3, 1fr);
-      grid-template-rows: repeat(3, 1fr);
-    }
-
-    .total-value {
-      font-size: 24px !important;
-    }
-  }
-
-  @media (max-width: 768px) {
-    .total-grid {
-      grid-template-columns: repeat(2, 1fr);
-      grid-template-rows: repeat(4, 1fr);
-    }
-
-    .total-value {
-      font-size: 20px !important;
-    }
-  }
 </style>

src/views/hui-jia/components/market.vue

@@ -1,18 +1,14 @@
 <template>
   <div class="market-container">
     <div class="market-title">
-      <i class="iconfont icon-enterprise"></i>
+      <img src="@/assets/images/shb.png" class="title-icon" />
       市场拓展
     </div>
-    <div class="chart-content">
-      <div class="legend">
-        <div class="legend-item">上月</div>
-        <div class="legend-item">本月</div>
-      </div>
-      <div class="chart-container">
-        <div id="marketChart" class="chart"></div>
-      </div>
+    <div class="legend">
+      <div class="legend-item">上月</div>
+      <div class="legend-item">本月</div>
     </div>
+    <div id="marketChart" class="chart"></div>
   </div>
 </template>
 
@@ -38,7 +34,6 @@
           lastMonthData: [-9, -9, -9, -9, -3, -12], // 上月数据
           thisMonthData: [9, 9, 1, 1, 9, 10], // 本月数据
         },
-        timer: null,
       }
     },
     computed: {
@@ -47,20 +42,12 @@
     mounted() {
       this.init()
       window.addEventListener("resize", this.handleResize)
-
-      // 设置定时刷新
-      this.timer = setInterval(() => {
-        this.loadData()
-      }, 30000) // 每30秒刷新一次
     },
     beforeDestroy() {
       if (this.chartInstance) {
         this.chartInstance.dispose()
       }
       window.removeEventListener("resize", this.handleResize)
-      if (this.timer) {
-        clearInterval(this.timer)
-      }
     },
     methods: {
       // 初始化组件
@@ -91,7 +78,11 @@
               let result = params[0].name + "<br/>"
               params.forEach((item) => {
                 result +=
-                  item.marker + item.seriesName + ": " + item.value + "<br/>"
+                  item.marker +
+                  item.seriesName +
+                  ": " +
+                  Math.abs(item.value) +
+                  "<br/>"
               })
               return result
             },
@@ -112,18 +103,6 @@
               },
             },
             show: false, // 隐藏x轴
-            // axisLine: {
-            //   show: false,
-            // },
-            // axisTick: {
-            //   show: false,
-            // },
-            // axisLabel: {
-            //   show: false,
-            // },
-            // splitLine: {
-            //   show: false,
-            // },
           },
           yAxis: [
             {
@@ -217,6 +196,7 @@
         }
 
         this.chartInstance.setOption(option)
+        this.chartInstance.resize()
       },
 
       // 加载数据
@@ -277,53 +257,36 @@
   .market-container {
     background: #0d1629;
     border-radius: 4px;
-    border: 1px solid rgba(64, 158, 255, 0.2);
     height: 100%;
     display: flex;
     flex-direction: column;
+    background: var(--content-bg);
   }
 
   .market-title {
     border-radius: 4px;
     background: var(--title-bg);
-    padding: 20px;
+    padding: 4px 10px;
     font-size: 18px;
     font-weight: 500;
     color: var(--title-primary);
     display: flex;
     align-items: center;
-
-    .iconfont {
-      margin-right: 8px;
-      font-size: 20px;
-    }
   }
-
-  .chart-content {
-    margin: 20px;
-    background: var(--title-bg);
-    .legend {
-      display: flex;
-      justify-content: space-around;
-      align-items: center;
-      padding: 20px;
-      margin: 0px 10px;
-      font-size: 14px;
-      font-weight: 500;
-      color: #fff;
-      border-bottom: 1px solid rgba(64, 158, 255, 0.2);
-    }
-  }
-
-  .chart-container {
-    flex: 1;
-    min-height: 0;
-    position: relative;
+  .legend {
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+    padding: 10px 20px;
+    font-size: 14px;
+    font-weight: 500;
+    color: #fff;
+    border-bottom: 1px solid rgba(64, 158, 255, 0.2);
   }
 
   .chart {
     width: 100%;
     height: 100%;
-    min-height: 400px;
+    background: var(--content-bg);
   }
 </style>