feat: a屏幕 a3,a4屏幕

src/route/white-list.js

@@ -2,7 +2,7 @@
  * @Author: WangQiBiao
  * @Date: 2019-09-18 09:40:26
  * @LastEditors: wjc
- * @LastEditTime: 2025-12-01 10:03:17
+ * @LastEditTime: 2025-12-02 16:19:44
  * @Description: 白名单菜单
  */
 import _import from './_import'
@@ -78,6 +78,22 @@ export default [
           title: '绘家科技',
           hideInMenu: false
         }
+      },
+      {
+        path: 'a3',
+        component: () => import('@/views/hui-jia/a3-screen/index.vue'),
+        meta: {
+          title: '绘家科技',
+          hideInMenu: false
+        }
+      },
+      {
+        path: 'a4',
+        component: () => import('@/views/hui-jia/a4-screen/index.vue'),
+        meta: {
+          title: '绘家科技',
+          hideInMenu: false
+        }
       }
     ]
   },

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

@@ -0,0 +1,108 @@
+<!--
+ * @Author: wjc
+ * @Date: 2025-11-19 16:09:12
+ * @LastEditors: wjc
+ * @LastEditTime: 2025-12-02 16:32:55
+ * @Description: 
+-->
+<template>
+  <div class="b2-screen">
+    <div class="b2-screen-content">
+      <div class="left-wrap">
+        <Hardware />
+      </div>
+      <div class="right-wrap">
+        <div class="top">
+          <Smart />
+        </div>
+        <WorkCard />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+  import Smart from "../components/smart.vue"
+  import Hardware from "../components/hardware.vue"
+  import WorkCard from "../components/work-card.vue"
+  import OnlineWater from "../components/online-water"
+  import OnlinePay from "../components/online-pay"
+  import OnlinePayWeek from "../components/online-pay-week"
+  import OnlinePayDay from "../components/online-pay-day"
+
+  export default {
+    name: "B1Screen",
+    components: {
+      Smart,
+      Hardware,
+      WorkCard,
+      OnlineWater,
+      OnlinePay,
+      OnlinePayWeek,
+      OnlinePayDay,
+    },
+  }
+</script>
+
+<style lang="scss" scoped>
+  @import "@/assets/css/theme.scss";
+  @import "@/assets/css/screen.scss";
+  $gap-padding: halfW(8);
+  .b2-screen {
+    height: 100vh;
+    width: 100vw;
+    background: var(--page-bg);
+  }
+  .b2-screen-content {
+    height: 100%;
+    width: 100%;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: flex-start;
+    gap: halfW(16);
+    .left-wrap {
+      display: flex;
+      flex-direction: column;
+      gap: halfW(16);
+      width: calc(65% - $gap-padding);
+      .item-1 {
+        width: 100%;
+        height: calc(50% - $gap-padding);
+        background: #f5f5f5;
+      }
+      .online-water {
+        width: 100%;
+        height: calc(50% - $gap-padding);
+      }
+      .smart-door {
+        width: 100%;
+        height: calc(50% - $gap-padding);
+      }
+    }
+    .right-wrap {
+      width: calc(35% - $gap-padding);
+      height: 100%;
+      display: flex;
+      flex-wrap: wrap;
+      gap: halfW(16);
+      justify-content: flex-start;
+      .top {
+        flex: 1 1 0%;
+        display: flex;
+        flex-direction: column;
+        gap: calc($gap-padding * 2);
+        width: 100%;
+        height: calc(60% - $gap-padding);
+      }
+      .work-card-container {
+        width: 100%;
+        height: calc(40% - $gap-padding);
+        ::v-deep.work-card {
+            display: grid !important;
+            grid-template-columns: repeat(3, 1fr) !important;
+            grid-template-rows: repeat(2, 1fr) !important;
+        }
+      }
+    }
+  }
+</style>

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

@@ -0,0 +1,186 @@
+<template>
+  <div class="b1-screen">
+    <div class="b1-screen-content">
+      <div class="top-wrap">
+        <implementationTotal :data="state.summary" />
+        <implementationIng :data="state.data" />
+      </div>
+      <div class="bottom-wrap">
+        <implementationNowYear :data="serviceData" />
+        <Market :data="state.market_vs_month" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+  import implementationTotal from "../components/implementary/total.vue"
+  import implementationIng from "../components/implementary/ing.vue"
+  import implementationNowYear from "../components/implementary/now-year.vue"
+  import Market from "../components/market.vue"
+
+  import { huiJiaApi } from "@/api"
+
+  export default {
+    name: "B1Screen",
+    components: {
+      implementationTotal,
+      implementationIng,
+      implementationNowYear,
+      Market,
+    },
+    data() {
+      return {
+        state: {
+          data: [], // 进行中的实施服务列表
+          market_vs_month: {
+            customer: {
+              // 新增企业
+              last_month: 0,
+              this_month: 0,
+            },
+            followup: {
+              // 新增企业
+              last_month: 0,
+              this_month: 0,
+            },
+            contact: {
+              // 新增联系人
+              last_month: 0,
+              this_month: 0,
+            },
+            residence: {
+              // 新增小区
+              last_month: 0,
+              this_month: 0,
+            },
+            contract: {
+              // 新增合同
+              last_month: 0,
+              this_month: 0,
+            },
+            household: {
+              // 新增户数
+              last_month: 0,
+              this_month: 1,
+            },
+          }, // 市场拓展数据
+          summary: {
+            cities: 0, // 城市总数
+            customers: 0, // 企业总数
+            contracts: 0, // 合同总数
+            perform_times: 0, // 履约次数
+            service_time: 0, // 服务时长
+            residences: 0, // 小区总数
+            contracted_households: 0, // 签约户数
+            actual_households: 0, // 实施户数
+          }, // 实施服务，汇总
+          year_summary: {
+            cities: 0, // 履约城市
+            customers: 0, // 服务企业
+            residences: 0, // 服务小区
+            contracts: 0, // 合同份数
+            contracted_households: "0", // 签约户数
+            actual_households: "0", // 实施户数
+          },
+          service_ing: {
+            // 实施服务，进行中
+            cities: 0,
+            customers: 0,
+            contracts: 0,
+            residences: 0,
+            contracted_households: "0",
+            plan: 0,
+          },
+          service_last_month: {
+            // 实施服务，上月
+            cities: 0,
+            customers: 0,
+            contracts: 0,
+            residences: 0,
+            contracted_households: 0,
+            actual_households: 0,
+          },
+        },
+        serviceData: {},
+      }
+    },
+    mounted() {
+      this.getData()
+    },
+    methods: {
+      getServiceData() {
+        // 图表字段顺序
+        const properties = [
+          "contracted_households",
+          "contracts",
+          "residences",
+          "customers",
+          "cities",
+        ]
+        const result = {
+          year_summary: properties.map((key) => this.state.year_summary[key]),
+          service_ing: properties.map((key) => this.state.service_ing[key]),
+          service_last_month: properties.map(
+            (key) => this.state.service_last_month[key]
+          ),
+        }
+        this.serviceData = result
+      },
+      getData() {
+        huiJiaApi.getScreenData().then((res) => {
+          if (res && res.data) {
+            this.state = res.data.data
+            this.getServiceData()
+          }
+        })
+      },
+    },
+  }
+</script>
+
+<style lang="scss" scoped>
+  @import "@/assets/css/theme.scss";
+
+  $gap-padding: halfW(8);
+  .b1-screen {
+    height: 100vh;
+    width: 100vw;
+    background: var(--page-bg);
+  }
+  .b1-screen-content {
+    height: 100%;
+    width: 100%;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    align-items: center;
+    gap: halfW(16);
+    .top-wrap {
+      display: flex;
+      justify-content: space-around;
+      gap: halfW(16);
+      width: 100%;
+      height: calc(50% - $gap-padding);
+      .total-container {
+        width: calc(35% - $gap-padding);
+      }
+      .implementing-container {
+        width: calc(65% - $gap-padding);
+      }
+    }
+    .bottom-wrap {
+      display: flex;
+      justify-content: space-around;
+      gap: halfW(16);
+      width: 100%;
+      height: calc(50% - $gap-padding);
+      .now-year-container {
+   width: calc(65% - $gap-padding);
+      }
+      .market-container {
+        width: calc(35% - $gap-padding);
+      }
+    }
+  }
+</style>

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

@@ -1,172 +1,69 @@
+<!--
+ * @Author: wjc
+ * @Date: 2025-11-19 16:09:12
+ * @LastEditors: wjc
+ * @LastEditTime: 2025-12-02 16:36:59
+ * @Description: 
+-->
 <template>
-  <div class="b1-screen">
+  <div class="b2-screen">
     <div class="logo">
       <img src="@/assets/images/hjkj1.png" class="logo-img" />
     </div>
-    <div class="b1-screen-content">
-      <div class="item-1">
-        <CommunityMap :center="[105,34]" :zoom="4" />
+    <div class="b2-screen-content">
+      <div class="left-wrap">
+        <OnlineWater :showOnlineInfo="true" />
+        <Smart />
       </div>
       <div class="middle-wrap">
-        <div class="item-2"><User />></div>
-        <div class="item-3">
-          <Resident :showOperate="false" class="b1-resident" />
+        <div class="top">
+          <div class="top-left">
+            <div class="item-2">
+              <OnlinePay :showLegend="false" :showTitle="false" :showOnlineInfo="true" />
+            </div>
+            <div class="item-3">
+              <OnlinePayWeek :showMarkPoint="false" :showInfo="false" />
+            </div>
+            <div class="item-4">
+              <OnlinePayDay :showMarkPoint="false" :showInfo="false" />
+            </div>
+          </div>
+          <Hardware />
         </div>
-        <div class="item-4">
-          <CommunityType :showBar="false" class="b1-community-type" />
-        </div>
-      </div>
-      <div class="right-wrap">
-        <Market :data="state.market_vs_month" />
-        <implementationTotal :data="state.summary" />
-      </div>
-      <div class="bottom-wrap">
-        <implementationIng :data="state.data" />
-        <implementationNowYear :data="serviceData" />
+        <WorkCard />
       </div>
     </div>
   </div>
 </template>
 
 <script>
-  import implementationTotal from "../components/implementary/total.vue"
-  import implementationIng from "../components/implementary/ing.vue"
-  import implementationNowYear from "../components/implementary/now-year.vue"
-  import Market from "../components/market.vue"
-  import CommunityMap from "../components/community-map"
-  import CommunityType from "../components/community-type"
-  import Resident from "../components/resident"
-  import User from "../components/user"
-
-  import { huiJiaApi } from "@/api"
+import Smart from '../components/smart.vue'
+import Hardware from '../components/hardware.vue'
+import WorkCard from '../components/work-card.vue'
+import OnlineWater from '../components/online-water'
+import OnlinePay from '../components/online-pay'
+import OnlinePayWeek from '../components/online-pay-week'
+import OnlinePayDay from '../components/online-pay-day'
 
-  export default {
-    name: "B1Screen",
-    components: {
-      implementationTotal,
-      implementationIng,
-      implementationNowYear,
-      Market,
-      CommunityType,
-      Resident,
-      User,
-      CommunityMap,
-    },
-    data() {
-      return {
-        state: {
-          data: [], // 进行中的实施服务列表
-          market_vs_month: {
-            customer: {
-              // 新增企业
-              last_month: 0,
-              this_month: 0,
-            },
-            followup: {
-              // 新增企业
-              last_month: 0,
-              this_month: 0,
-            },
-            contact: {
-              // 新增联系人
-              last_month: 0,
-              this_month: 0,
-            },
-            residence: {
-              // 新增小区
-              last_month: 0,
-              this_month: 0,
-            },
-            contract: {
-              // 新增合同
-              last_month: 0,
-              this_month: 0,
-            },
-            household: {
-              // 新增户数
-              last_month: 0,
-              this_month: 1,
-            },
-          }, // 市场拓展数据
-          summary: {
-            cities: 0, // 城市总数
-            customers: 0, // 企业总数
-            contracts: 0, // 合同总数
-            perform_times: 0, // 履约次数
-            service_time: 0, // 服务时长
-            residences: 0, // 小区总数
-            contracted_households: 0, // 签约户数
-            actual_households: 0, // 实施户数
-          }, // 实施服务，汇总
-          year_summary: {
-            cities: 0, // 履约城市
-            customers: 0, // 服务企业
-            residences: 0, // 服务小区
-            contracts: 0, // 合同份数
-            contracted_households: "0", // 签约户数
-            actual_households: "0", // 实施户数
-          },
-          service_ing: {
-            // 实施服务，进行中
-            cities: 0,
-            customers: 0,
-            contracts: 0,
-            residences: 0,
-            contracted_households: "0",
-            plan: 0,
-          },
-          service_last_month: {
-            // 实施服务，上月
-            cities: 0,
-            customers: 0,
-            contracts: 0,
-            residences: 0,
-            contracted_households: 0,
-            actual_households: 0,
-          },
-        },
-        serviceData: {},
-      }
-    },
-    mounted() {
-      this.getData()
-    },
-    methods: {
-      getServiceData() {
-        // 图表字段顺序
-        const properties = [
-          "contracted_households",
-          "contracts",
-          "residences",
-          "customers",
-          "cities",
-        ]
-        const result = {
-          year_summary: properties.map((key) => this.state.year_summary[key]),
-          service_ing: properties.map((key) => this.state.service_ing[key]),
-          service_last_month: properties.map(
-            (key) => this.state.service_last_month[key]
-          ),
-        }
-        this.serviceData = result
-      },
-      getData() {
-        huiJiaApi.getScreenData().then((res) => {
-          if (res && res.data) {
-            this.state = res.data.data
-            this.getServiceData()
-          }
-        })
-      },
-    },
+export default {
+  name: 'B1Screen',
+  components: {
+    Smart,
+    Hardware,
+    WorkCard,
+    OnlineWater,
+    OnlinePay,
+    OnlinePayWeek,
+    OnlinePayDay
   }
+}
 </script>
 
 <style lang="scss" scoped>
   @import "@/assets/css/theme.scss";
-
+  @import "@/assets/css/screen.scss";
   $gap-padding: halfW(8);
-  .b1-screen {
+  .b2-screen {
     height: 100vh;
     width: 100vw;
     background: var(--page-bg);
@@ -178,68 +75,79 @@
       }
     }
   }
-  .b1-screen-content {
+  .b2-screen-content {
     height: calc(100% - halfH(64) - halfH(28));
     width: 100%;
     display: flex;
     flex-wrap: wrap;
-    justify-content: center;
-    align-items: center;
+    justify-content: flex-start;
     gap: halfW(16);
-    .item-1 {
-      width: calc(25% - $gap-padding - $gap-padding);
-      height: calc(64% - $gap-padding - $gap-padding);
-    }
-    .middle-wrap {
-      width: calc(
-        50% - $gap-padding - $gap-padding - $gap-padding - $gap-padding
-      );
-      height: calc(64% - $gap-padding - $gap-padding);
+    .left-wrap {
       display: flex;
-      flex-wrap: wrap;
+      flex-direction: column;
       gap: halfW(16);
-      justify-content: flex-start;
-      align-items: center;
-      .item-2 {
-        flex: 0 0 100%;
+      width: calc(25% - $gap-padding);
+      .item-1 {
         width: 100%;
-        height: calc(37% - $gap-padding);
-      }
-      .item-3 {
-        width: calc(50% - $gap-padding);
-        height: calc(63% - $gap-padding);
-      }
-      .item-4 {
-        width: calc(50% - $gap-padding);
-        height: calc(63% - $gap-padding);
+        height: calc(50% - $gap-padding);
+        background: #f5f5f5;
       }
-    }
-    .right-wrap {
-      display: flex;
-      flex-direction: column;
-      width: calc(25% - $gap-padding - $gap-padding);
-      height: calc(64% - $gap-padding);
-      gap: calc($gap-padding * 2);
-      .total-container {
+      .online-water {
+        width: 100%;
         height: calc(50% - $gap-padding);
       }
-      .market-container {
+      .smart-door {
+        width: 100%;
         height: calc(50% - $gap-padding);
       }
     }
-    .bottom-wrap {
+    .middle-wrap {
+      width: calc(75% - $gap-padding);
+      height: 100%;
       display: flex;
-      justify-content: space-around;
+      flex-wrap: wrap;
       gap: halfW(16);
-      width: calc(
-        100% - $gap-padding - $gap-padding - $gap-padding - $gap-padding
-      );
-      height: calc(36% - $gap-padding);
-      .now-year-container {
-        width: 50%;
+      justify-content: flex-start;
+      .top {
+        flex: 1 1 0%;
+        display: flex;
+        gap: calc($gap-padding * 2);
+        width: 100%;
+        height: calc(80% - $gap-padding);
+        .top-left {
+          display: flex;
+          flex-direction: column;
+          width: 50%;
+          height: 100%;
+          gap: halfW(16);
+          .item-2{
+            flex: 1 1 0%;
+            width: 100%;
+            // max-height: halfH(200);
+            // background: #f5f5f5;
+          }
+          .item-3 {
+            flex: 1 1 0%;
+            // background: green;
+            width: 100%;
+            // max-height: halfH(200);
+          }
+          .item-4 {
+            flex: 1 1 0%;
+            width: 100%;
+
+            // max-height: halfH(200);
+            // background: green;
+          }
+        }
+        .hardware-data {
+          width: 50%;
+          height: 100%;
+        }
       }
-      .implementing-container {
-        width: 50%;
+      .work-card-container {
+        width: 100%;
+        height: calc(20% - $gap-padding);
       }
     }
   }

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

@@ -1,69 +1,172 @@
-<!--
- * @Author: wjc
- * @Date: 2025-11-19 16:09:12
- * @LastEditors: wjc
- * @LastEditTime: 2025-11-25 10:25:53
- * @Description: 
--->
 <template>
-  <div class="b2-screen">
+  <div class="b1-screen">
     <div class="logo">
       <img src="@/assets/images/hjkj2.png" class="logo-img" />
     </div>
-    <div class="b2-screen-content">
-      <div class="left-wrap">
-        <OnlineWater :showOnlineInfo="true" />
-        <Smart />
+    <div class="b1-screen-content">
+      <div class="item-1">
+        <CommunityMap :center="[105,34]" :zoom="4" />
       </div>
       <div class="middle-wrap">
-        <div class="top">
-          <div class="top-left">
-            <div class="item-2">
-              <OnlinePay :showLegend="false" :showTitle="false" :showOnlineInfo="true" />
-            </div>
-            <div class="item-3">
-              <OnlinePayWeek :showMarkPoint="false" :showInfo="false" />
-            </div>
-            <div class="item-4">
-              <OnlinePayDay :showMarkPoint="false" :showInfo="false" />
-            </div>
-          </div>
-          <Hardware />
+        <div class="item-2"><User />></div>
+        <div class="item-3">
+          <Resident :showOperate="false" class="b1-resident" />
         </div>
-        <WorkCard />
+        <div class="item-4">
+          <CommunityType :showBar="false" class="b1-community-type" />
+        </div>
+      </div>
+      <div class="right-wrap">
+        <Market :data="state.market_vs_month" />
+        <implementationTotal :data="state.summary" />
+      </div>
+      <div class="bottom-wrap">
+        <implementationIng :data="state.data" />
+        <implementationNowYear :data="serviceData" />
       </div>
     </div>
   </div>
 </template>
 
 <script>
-import Smart from '../components/smart.vue'
-import Hardware from '../components/hardware.vue'
-import WorkCard from '../components/work-card.vue'
-import OnlineWater from '../components/online-water'
-import OnlinePay from '../components/online-pay'
-import OnlinePayWeek from '../components/online-pay-week'
-import OnlinePayDay from '../components/online-pay-day'
+  import implementationTotal from "../components/implementary/total.vue"
+  import implementationIng from "../components/implementary/ing.vue"
+  import implementationNowYear from "../components/implementary/now-year.vue"
+  import Market from "../components/market.vue"
+  import CommunityMap from "../components/community-map"
+  import CommunityType from "../components/community-type"
+  import Resident from "../components/resident"
+  import User from "../components/user"
+
+  import { huiJiaApi } from "@/api"
 
-export default {
-  name: 'B1Screen',
-  components: {
-    Smart,
-    Hardware,
-    WorkCard,
-    OnlineWater,
-    OnlinePay,
-    OnlinePayWeek,
-    OnlinePayDay
+  export default {
+    name: "B1Screen",
+    components: {
+      implementationTotal,
+      implementationIng,
+      implementationNowYear,
+      Market,
+      CommunityType,
+      Resident,
+      User,
+      CommunityMap,
+    },
+    data() {
+      return {
+        state: {
+          data: [], // 进行中的实施服务列表
+          market_vs_month: {
+            customer: {
+              // 新增企业
+              last_month: 0,
+              this_month: 0,
+            },
+            followup: {
+              // 新增企业
+              last_month: 0,
+              this_month: 0,
+            },
+            contact: {
+              // 新增联系人
+              last_month: 0,
+              this_month: 0,
+            },
+            residence: {
+              // 新增小区
+              last_month: 0,
+              this_month: 0,
+            },
+            contract: {
+              // 新增合同
+              last_month: 0,
+              this_month: 0,
+            },
+            household: {
+              // 新增户数
+              last_month: 0,
+              this_month: 1,
+            },
+          }, // 市场拓展数据
+          summary: {
+            cities: 0, // 城市总数
+            customers: 0, // 企业总数
+            contracts: 0, // 合同总数
+            perform_times: 0, // 履约次数
+            service_time: 0, // 服务时长
+            residences: 0, // 小区总数
+            contracted_households: 0, // 签约户数
+            actual_households: 0, // 实施户数
+          }, // 实施服务，汇总
+          year_summary: {
+            cities: 0, // 履约城市
+            customers: 0, // 服务企业
+            residences: 0, // 服务小区
+            contracts: 0, // 合同份数
+            contracted_households: "0", // 签约户数
+            actual_households: "0", // 实施户数
+          },
+          service_ing: {
+            // 实施服务，进行中
+            cities: 0,
+            customers: 0,
+            contracts: 0,
+            residences: 0,
+            contracted_households: "0",
+            plan: 0,
+          },
+          service_last_month: {
+            // 实施服务，上月
+            cities: 0,
+            customers: 0,
+            contracts: 0,
+            residences: 0,
+            contracted_households: 0,
+            actual_households: 0,
+          },
+        },
+        serviceData: {},
+      }
+    },
+    mounted() {
+      this.getData()
+    },
+    methods: {
+      getServiceData() {
+        // 图表字段顺序
+        const properties = [
+          "contracted_households",
+          "contracts",
+          "residences",
+          "customers",
+          "cities",
+        ]
+        const result = {
+          year_summary: properties.map((key) => this.state.year_summary[key]),
+          service_ing: properties.map((key) => this.state.service_ing[key]),
+          service_last_month: properties.map(
+            (key) => this.state.service_last_month[key]
+          ),
+        }
+        this.serviceData = result
+      },
+      getData() {
+        huiJiaApi.getScreenData().then((res) => {
+          if (res && res.data) {
+            this.state = res.data.data
+            this.getServiceData()
+          }
+        })
+      },
+    },
   }
-}
 </script>
 
 <style lang="scss" scoped>
   @import "@/assets/css/theme.scss";
-  @import "@/assets/css/screen.scss";
+
   $gap-padding: halfW(8);
-  .b2-screen {
+  .b1-screen {
     height: 100vh;
     width: 100vw;
     background: var(--page-bg);
@@ -75,80 +178,69 @@ export default {
       }
     }
   }
-  .b2-screen-content {
+  .b1-screen-content {
     height: calc(100% - halfH(64) - halfH(28));
     width: 100%;
     display: flex;
     flex-wrap: wrap;
-    justify-content: flex-start;
+    justify-content: center;
+    align-items: center;
     gap: halfW(16);
-    .left-wrap {
+    .item-1 {
+      width: calc(25% - $gap-padding - $gap-padding);
+      height: calc(64% - $gap-padding - $gap-padding);
+    }
+    .middle-wrap {
+      width: calc(
+        50% - $gap-padding - $gap-padding - $gap-padding - $gap-padding
+      );
+      height: calc(64% - $gap-padding - $gap-padding);
       display: flex;
-      flex-direction: column;
+      flex-wrap: wrap;
       gap: halfW(16);
-      width: calc(25% - $gap-padding);
-      .item-1 {
+      justify-content: flex-start;
+      align-items: center;
+      .item-2 {
+        flex: 0 0 100%;
         width: 100%;
-        height: calc(50% - $gap-padding);
-        background: #f5f5f5;
+        height: calc(37% - $gap-padding);
       }
-      .online-water {
-        width: 100%;
+      .item-3 {
+        width: calc(50% - $gap-padding);
+        height: calc(63% - $gap-padding);
+      }
+      .item-4 {
+        width: calc(50% - $gap-padding);
+        height: calc(63% - $gap-padding);
+      }
+    }
+    .right-wrap {
+      display: flex;
+      flex-direction: column;
+      width: calc(25% - $gap-padding - $gap-padding);
+      height: calc(64% - $gap-padding);
+      gap: calc($gap-padding * 2);
+      .total-container {
         height: calc(50% - $gap-padding);
       }
-      .smart-door {
-        width: 100%;
+      .market-container {
         height: calc(50% - $gap-padding);
       }
     }
-    .middle-wrap {
-      width: calc(75% - $gap-padding);
-      height: 100%;
+    .bottom-wrap {
       display: flex;
-      flex-wrap: wrap;
+      justify-content: space-around;
       gap: halfW(16);
-      justify-content: flex-start;
-      .top {
-        flex: 1 1 0%;
-        display: flex;
-        gap: calc($gap-padding * 2);
-        width: 100%;
-        height: calc(80% - $gap-padding);
-        .top-left {
-          display: flex;
-          flex-direction: column;
-          width: 50%;
-          height: 100%;
-          gap: halfW(16);
-          .item-2{
-            flex: 1 1 0%;
-            width: 100%;
-            // max-height: halfH(200);
-            // background: #f5f5f5;
-          }
-          .item-3 {
-            flex: 1 1 0%;
-            // background: green;
-            width: 100%;
-            // max-height: halfH(200);
-          }
-          .item-4 {
-            flex: 1 1 0%;
-            width: 100%;
-
-            // max-height: halfH(200);
-            // background: green;
-          }
-        }
-        .hardware-data {
-          width: 50%;
-          height: 100%;
-        }
+      width: calc(
+        100% - $gap-padding - $gap-padding - $gap-padding - $gap-padding
+      );
+      height: calc(36% - $gap-padding);
+      .now-year-container {
+        width: 50%;
       }
-      .work-card-container {
-        width: 100%;
-        height: calc(20% - $gap-padding);
+      .implementing-container {
+        width: 50%;
       }
     }
   }
-</style>
+</style>

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

@@ -117,7 +117,7 @@
           monthlyAvgUsage: 18921, // 月均用量 近12月用量月平均数
           dailyAvgUsage: 8921, // 日均用量 近12月用量日平均数
           switchCount: 887, // 开关次数 近12月成功开启、关闭次数
-          list: [],
+          monthStatisticsList: [],
         },
         powerChartInstance: null,
         waterChartInstance: null,

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

@@ -134,7 +134,7 @@
               name: "进行中",
               type: "bar",
               stack: "total",
-              // barMinHeight: 10,
+              barMaxWidth: 30,
               itemStyle: {
                 color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                   { offset: 0, color: "#1620D4" },
@@ -154,7 +154,7 @@
               name: "上月完成",
               type: "bar",
               stack: "total",
-              // barMinHeight: 10,
+              barMaxWidth: 30,
               itemStyle: {
                 color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                   { offset: 0, color: "#192FC9" },
@@ -173,7 +173,7 @@
               name: "今年累计",
               type: "bar",
               stack: "total",
-              // barMinHeight: 10,
+              barMaxWidth: 30,
               label: {
                 show: true,
                 color: "#fff",

src/views/hui-jia/components/work-card.vue

@@ -142,8 +142,9 @@ export default {
   flex: 1 1 0%;
   padding: 0px halfW(20);
   display: flex;
+  flex-wrap: wrap;
   align-items: center;
-  justify-content: space-between;
+  justify-content: space-evenly;
   gap: halfW(10);
 }
 
@@ -153,6 +154,7 @@ export default {
   display: flex;
   flex-direction: column;
   justify-content: space-between;
+  align-items: center;
 }
 
 .card-header {