fix: b1 栅格处理

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

@@ -41,7 +41,32 @@
     data() {
       return {
         state: {
-          market_vs_month: {}, // 市场拓展数据
+          market_vs_month: {
+            customer: { // 新增企业
+              last_month: 3,
+              this_month: 2,
+            },
+            followup: { // 新增企业
+              last_month: 0,
+              this_month: 0,
+            },
+            contact: { // 新增联系人
+              last_month: 1,
+              this_month: 0,
+            },
+            residence: { // 新增小区
+              last_month: 3,
+              this_month: 4,
+            },
+            contract: { // 新增合同
+              last_month: 5,
+              this_month: 3,
+            },
+            household: { // 新增户数
+              last_month: 0,
+              this_month: 1,
+            },
+          }, // 市场拓展数据
         },
         implementationData: {
           ing: {},
@@ -89,20 +114,23 @@
     width: 100%;
     display: flex;
     flex-wrap: wrap;
-    justify-content: flex-start;
+    justify-content: center;
+    align-items: center;
     gap: halfW(16);
+    // padding: 0px halfW(16) halfW(16);
     .item-1 {
-      width: calc(25% - $gap-padding);
-      height: calc(64% - $gap-padding);
+      width: calc(25% - $gap-padding - $gap-padding);
+      height: calc(64% - $gap-padding - $gap-padding);
       background: #f5f5f5;
     }
     .middle-wrap {
-      width: calc(50% - $gap-padding - $gap-padding);
-      height: calc(64% - $gap-padding);
+      width: calc(50% - $gap-padding - $gap-padding - $gap-padding - $gap-padding);
+      height: calc(64% - $gap-padding - $gap-padding);
       display: flex;
       flex-wrap: wrap;
       gap: halfW(16);
       justify-content: flex-start;
+      align-items: center;
       .item-2 {
         flex: 0 0 100%;
         width: 100%;
@@ -111,12 +139,10 @@
       }
       .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;
@@ -125,7 +151,7 @@
     .right-wrap {
       display: flex;
       flex-direction: column;
-      width: calc(25% - $gap-padding);
+      width: calc(25% - $gap-padding - $gap-padding);
       height: calc(64% - $gap-padding);
       gap: calc($gap-padding * 2);
       .total-container {
@@ -139,7 +165,7 @@
       display: flex;
       justify-content: space-around;
       gap: halfW(16);
-      width: 100%;
+      width: calc(100% - $gap-padding - $gap-padding - $gap-padding - $gap-padding);
       height: calc(36% - $gap-padding);
       .now-year-container {
         width: 50%;

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

@@ -8,8 +8,10 @@
       <div class="legend-item">上月</div>
       <div class="legend-item">本月</div>
     </div>
-    <div id="marketChart" class="chart"></div>
-    <div id="marketChart2" class="chart2"></div>
+    <div class="chart-wrap">
+      <div id="marketChart" class="chart"></div>
+      <div id="marketChart2" class="chart2"></div>
+    </div>
   </div>
 </template>
 
@@ -28,31 +30,42 @@
     },
     data() {
       return {
-        chartInstance: null,
+        chartInstanceA: null,
+        chartInstanceB: null,
         chartData: {
           categories: [
-            "新增企业",
-            "跟进项目",
-            "新增联系人",
-            "新增合同",
-            "新增项目",
             "新增户数",
+            "新增项目",
+            "新增合同",
+            "新增联系人",
+            "跟进企业",
+            "新增企业",
           ],
-          lastMonthData: [-9, -9, -9, -9, -3, -12], // 上月数据
-          thisMonthData: [9, 9, 1, 1, 9, 10], // 本月数据
         },
       }
     },
     computed: {
       ...mapState(["entCode", "communityId"]),
+      lastMonthData() {
+        const data = this.data || {}
+        return Object.keys(data).map((key, index) => {
+          return -data[key].last_month
+        }).reverse()
+      },
+      thisMonthData() {
+        const data = this.data || {}
+        return Object.keys(data).map((key, index) => {
+          return data[key].this_month
+        }).reverse()
+      }
     },
     mounted() {
       this.init()
       window.addEventListener("resize", this.handleResize)
     },
     beforeDestroy() {
-      if (this.chartInstance) {
-        this.chartInstance.dispose()
+      if (this.chartInstanceA) {
+        this.chartInstanceA.dispose()
       }
       window.removeEventListener("resize", this.handleResize)
     },
@@ -60,16 +73,18 @@
       // 初始化组件
       init() {
         this.initChart()
-        this.loadData()
       },
 
       // 初始化图表
       initChart() {
-        this.chartInstance = echarts.init(
+        this.chartInstanceA = echarts.init(
           document.getElementById("marketChart")
         )
+        this.chartInstanceB = echarts.init(
+          document.getElementById("marketChart2")
+        )
 
-        const option = {
+        const optionA = {
           tooltip: {
             trigger: "axis",
             axisPointer: {
@@ -96,7 +111,7 @@
           },
           grid: {
             left: "10%",
-            right: "10%",
+            right: "1%",
             bottom: "5%",
             top: "5%",
             containLabel: true,
@@ -125,30 +140,13 @@
                 show: false,
               },
             },
-            {
-              type: "category",
-              data: this.chartData.categories,
-              axisLine: {
-                show: false,
-              },
-              axisTick: {
-                show: false,
-              },
-              axisLabel: {
-                show: false,
-                color: "#a0b3d6",
-                fontSize: 14,
-              },
-            },
           ],
           series: [
             {
               name: "上月",
               type: "bar",
-                stack: "sameStack",
-              // stack: "Total",
-              barMinHeight: 4,
-              data: this.chartData.lastMonthData,
+              barMinHeight: 20,
+              data: this.lastMonthData,
               barWidth: 16,
               itemStyle: {
                 // 左侧渐变色：从#F66757到#FCE2B4
@@ -169,13 +167,75 @@
                 },
               },
             },
+          ],
+        }
+
+        const optionB = {
+          tooltip: {
+            trigger: "axis",
+            axisPointer: {
+              type: "shadow",
+            },
+            backgroundColor: "rgba(17, 28, 49, 0.9)",
+            borderColor: "rgba(64, 158, 255, 0.2)",
+            textStyle: {
+              color: "#ffffff",
+            },
+            formatter: (params) => {
+              // 自定义tooltip格式
+              let result = params[0].name + "<br/>"
+              params.forEach((item) => {
+                result +=
+                  item.marker +
+                  item.seriesName +
+                  ": " +
+                  Math.abs(item.value) +
+                  "<br/>"
+              })
+              return result
+            },
+          },
+          grid: {
+            left: "1%",
+            right: "10%",
+            bottom: "5%",
+            top: "5%",
+            containLabel: true,
+          },
+          xAxis: {
+            type: "value",
+            axisLabel: {
+              formatter: (value) => {
+                if (value < 0) return -value //这里是针对取负值
+                else return value
+              },
+            },
+            show: false, // 隐藏x轴
+          },
+          yAxis: [
+            {
+              type: "category",
+              data: this.chartData.categories,
+              axisLine: {
+                show: false,
+              },
+              axisTick: {
+                show: false,
+              },
+              axisLabel: {
+                show: true,
+                color: "#a0b3d6",
+                fontSize: 14,
+                align: "right",
+              },
+            },
+          ],
+          series: [
             {
               name: "本月",
               type: "bar",
-                stack: "sameStack",
-              // stack: "Total",
-              barMinHeight: 4,
-              data: this.chartData.thisMonthData,
+              barMinHeight: 2,
+              data: this.thisMonthData,
               barWidth: 16,
               itemStyle: {
                 // 右侧渐变色：从#1620D4到#3AB3E3
@@ -196,56 +256,19 @@
           ],
         }
 
-        this.chartInstance.setOption(option)
-        this.chartInstance.resize()
-      },
-
-      // 加载数据
-      async loadData() {
-        try {
-          const params = {
-            entCode: this.entCode,
-            communityId: this.communityId,
-          }
-          // 这里应该调用实际的API获取数据
-          // const res = await api.getMarketExpansionData(params)
-          // this.chartData = res.data || this.chartData
-
-          // 暂时使用模拟数据
-          this.updateChart()
-        } catch (error) {
-          console.error("获取市场拓展数据失败:", error)
-        }
-      },
-
-      // 更新图表
-      updateChart() {
-        if (this.chartInstance) {
-          this.chartInstance.setOption({
-            yAxis: [
-              {
-                data: this.chartData.categories,
-              },
-              {
-                data: this.chartData.categories,
-              },
-            ],
-            series: [
-              {
-                data: this.chartData.lastMonthData,
-              },
-              {
-                data: this.chartData.thisMonthData,
-              },
-            ],
-          })
-        }
+        this.chartInstanceA.setOption(optionA)
+        this.chartInstanceA.resize()
+        this.chartInstanceB.setOption(optionB)
+        this.chartInstanceB.resize()
       },
 
       // 处理窗口大小变化
       handleResize() {
-        if (this.chartInstance) {
-          this.chartInstance.resize()
+        if (this.chartInstanceA) {
+          this.chartInstanceA.resize()
+        }
+        if (this.chartInstanceB) {
+          this.chartInstanceB.resize()
         }
       },
     },
@@ -285,9 +308,20 @@
     border-bottom: 1px solid rgba(64, 158, 255, 0.2);
   }
 
-  .chart {
+  .chart-wrap {
+    display: flex;
+    align-items: center;
     width: 100%;
     height: 100%;
-    background: var(--content-bg);
+    .chart {
+      width: 40%;
+      height: 100%;
+      background: var(--content-bg);
+    }
+    .chart2 {
+      width: 60%;
+      height: 100%;
+      background: var(--content-bg);
+    }
   }
 </style>