feat: 接口字段对接

.eslintrc.js

@@ -1,10 +1,16 @@
+/*
+ * @Author: wjc
+ * @Date: 2021-05-31 09:36:11
+ * @LastEditors: wjc
+ * @LastEditTime: 2025-11-25 10:07:44
+ * @Description: 
+ */
 module.exports = {
   root: true,
   env: {
     node: true
   },
   'extends': [
-    'plugin:vue/essential',
     '@vue/standard'
   ],
   rules: {

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

@@ -12,11 +12,11 @@
       </div>
       <div class="right-wrap">
         <Market :data="state.market_vs_month" />
-        <implementationTotal />
+        <implementationTotal :data="state.summary" />
       </div>
       <div class="bottom-wrap">
-        <implementationIng />
-        <implementationNowYear />
+        <implementationIng :data="state.data" />
+        <implementationNowYear :data="serviceData" />
       </div>
     </div>
   </div>
@@ -41,32 +41,76 @@
     data() {
       return {
         state: {
+          data: [
+          ], // 进行中的实施服务列表
           market_vs_month: {
-            customer: { // 新增企业
+            customer: {
+              // 新增企业
               last_month: 3,
               this_month: 2,
             },
-            followup: { // 新增企业
+            followup: {
+              // 新增企业
               last_month: 0,
               this_month: 0,
             },
-            contact: { // 新增联系人
+            contact: {
+              // 新增联系人
               last_month: 1,
               this_month: 0,
             },
-            residence: { // 新增小区
+            residence: {
+              // 新增小区
               last_month: 3,
               this_month: 4,
             },
-            contract: { // 新增合同
+            contract: {
+              // 新增合同
               last_month: 5,
               this_month: 3,
             },
-            household: { // 新增户数
+            household: {
+              // 新增户数
               last_month: 0,
               this_month: 1,
             },
           }, // 市场拓展数据
+          summary: {
+            cities: 35, // 城市总数
+            customers: 270, // 企业总数
+            contracts: 349, // 合同总数
+            perform_times: 815, // 履约次数
+            service_time: 163990350, // 服务时长
+            residences: 806, // 小区总数
+            contracted_households: 473652, // 签约户数
+            actual_households: 459667, // 实施户数
+          }, // 实施服务，汇总
+          year_summary: {
+            cities: 14, // 履约城市
+            customers: 35, // 服务企业
+            residences: 71, // 服务小区
+            contracts: 44, // 合同份数
+            contracted_households: "24107", // 签约户数
+            actual_households: "22808", // 实施户数
+          },
+          service_ing: {
+            // 实施服务，进行中
+            cities: 7,
+            customers: 11,
+            contracts: 11,
+            residences: 9,
+            contracted_households: "3040",
+            plan: 0,
+          },
+          service_last_month: {
+            // 实施服务，上月
+            cities: 0,
+            customers: 0,
+            contracts: 0,
+            residences: 0,
+            contracted_households: 0,
+            actual_households: 0,
+          },
         },
         implementationData: {
           ing: {},
@@ -75,10 +119,30 @@
         },
       }
     },
+    computed: {
+      serviceData() {
+        // 图表字段顺序
+        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]
+          )
+        }
+
+        return result
+      },
+    },
     mounted() {
       huiJiaApi.getImplementaryData().then((res) => {
         this.implementationData = res.data.data
-        console.log("123----", this.implementationData)
       })
     },
     methods: {
@@ -124,7 +188,9 @@
       background: #f5f5f5;
     }
     .middle-wrap {
-      width: calc(50% - $gap-padding - $gap-padding - $gap-padding - $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;
@@ -165,7 +231,9 @@
       display: flex;
       justify-content: space-around;
       gap: halfW(16);
-      width: calc(100% - $gap-padding - $gap-padding - $gap-padding - $gap-padding);
+      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/implementary/ing.vue

@@ -9,7 +9,6 @@
       :class-option="optionScroll"
       class="implementing-list"
     >
-      <!-- <div class="implementing-list"> -->
       <div
         v-for="(item, index) in implementingList"
         :key="index"
@@ -17,11 +16,11 @@
         :class="{ 'even-item': index % 2 === 1 }"
       >
         <div class="item-content">
-          <div class="item-date">{{ item.date }}</div>
-          <div class="item-city">{{ item.city }}</div>
+          <div class="item-date">{{ dayjs(item.created_at).format("YYYY-MM-DD") }}</div>
+          <div class="item-city">{{ item.residence.location.region_name }}</div>
           <div class="project-info">
-            <div class="project-name">{{ item.projectName }}</div>
-            <div class="company-name">{{ item.companyName }}</div>
+            <div class="project-name">{{ item.residence.residence_name }}</div>
+            <div class="company-name">{{ item.service.customer.customer_name }}</div>
           </div>
           <div class="project-stats">
             <div class="stat-item">
@@ -29,41 +28,45 @@
               <span class="stat-label">户</span>
             </div>
             <div class="stat-item">
-              <span class="stat-value">{{ item.area }}</span>
+              <span class="stat-value">{{ item.service.liable_person.real_name }}</span>
             </div>
             <div class="stat-item">
               <div class="progress-wrapper">
-                <span class="progress-text">{{ item.progress }}%</span>
+                <span class="progress-text">{{ item.service.perform_ratio }}%</span>
               </div>
             </div>
             <div class="stat-item service-item">
-              <span class="service-content">{{ item.serviceContent }}</span>
+              <span class="service-content">{{ item.service.work_template.display_name }}</span>
             </div>
             <div class="stat-item">
-              <span class="period">{{ item.period }}</span>
+              <span class="period">{{ item.updated_at }}</span>
             </div>
           </div>
         </div>
       </div>
-      <!-- </div> -->
     </vueSeamless>
   </div>
 </template>
 
 <script>
+  import dayjs from "dayjs"
   import { mapState } from "vuex"
   import vueSeamless from "vue-seamless-scroll"
-  import { api } from "@/api"
 
   export default {
     name: "ImplementingServices",
     components: {
       vueSeamless,
     },
+    props: {
+      data: {
+        type: Object,
+        default: () => ({}),
+      },
+    },
     data() {
       return {
         implementingList: [],
-        timer: null,
       }
     },
     computed: {
@@ -74,107 +77,7 @@
         }
       },
     },
-    mounted() {
-      this.init()
-      // 设置定时刷新
-      this.timer = setInterval(() => {
-        this.init()
-      }, 30000) // 每30秒刷新一次
-    },
-    beforeDestroy() {
-      if (this.timer) {
-        clearInterval(this.timer)
-      }
-    },
     methods: {
-      // 初始化数据
-      async init() {
-        try {
-          const params = {
-            entCode: this.entCode,
-            communityId: this.communityId,
-          }
-          // 这里应该调用实际的API获取数据
-          // const res = await api.getImplementingServices(params)
-          // this.implementingList = res.data || []
-
-          // 暂时使用模拟数据
-          this.loadMockData()
-        } catch (error) {
-          console.error("获取进行中实施服务数据失败:", error)
-        }
-      },
-      // 加载模拟数据
-      loadMockData() {
-        this.implementingList = [
-          {
-            date: "2025-11-19",
-            city: "五指山市",
-            projectName: "项目名称",
-            companyName: "物业公司名称",
-            householdCount: "999",
-            area: "北滨端",
-            progress: 90,
-            serviceContent: "数据清单模板填写培训",
-            period: "3周前",
-          },
-          {
-            date: "2025-11-19",
-            city: "五指山市",
-            projectName: "项目名称",
-            companyName: "物业公司名称",
-            householdCount: "999",
-            area: "北滨端",
-            progress: 90,
-            serviceContent: "数据清单模板填写培训",
-            period: "3周前",
-          },
-          {
-            date: "2025-11-19",
-            city: "五指山市",
-            projectName: "项目名称",
-            companyName: "物业公司名称",
-            householdCount: "999",
-            area: "北滨端",
-            progress: 90,
-            serviceContent: "数据清单模板填写培训",
-            period: "3周前",
-          },
-          {
-            date: "2025-11-19",
-            city: "五指山市",
-            projectName: "项目名称",
-            companyName: "物业公司名称",
-            householdCount: "999",
-            area: "北滨端",
-            progress: 90,
-            serviceContent: "数据清单模板填写培训",
-            period: "3周前",
-          },
-          {
-            date: "2025-11-19",
-            city: "五指山市",
-            projectName: "项目名称",
-            companyName: "物业公司名称",
-            householdCount: "999",
-            area: "北滨端",
-            progress: 90,
-            serviceContent: "数据清单模板填写培训",
-            period: "3周前",
-          },
-          {
-            date: "2025-11-19",
-            city: "五指山市",
-            projectName: "项目名称",
-            companyName: "物业公司名称",
-            householdCount: "999",
-            area: "北滨端",
-            progress: 90,
-            serviceContent: "数据清单模板填写培训",
-            period: "3周前",
-          },
-        ]
-      },
     },
   }
 </script>

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

@@ -15,6 +15,12 @@
 
   export default {
     name: "NowYearServices",
+    props: {
+      data: {
+        type: Object,
+        default: () => ({}),
+      },
+    },
     data() {
       return {
         chartInstance: null,
@@ -22,14 +28,13 @@
           categories: [
             "签约户数",
             "合同份数",
-            "服务项目",
+            "服务小区",
             "服务企业",
             "履约城市",
           ],
-          ongoing: [88888, 88888, 88888, 88888, 88888], // 进行中
+          ongoing: [999, 88888, 88888, 88888, 88888], // 进行中
           lastMonthCompleted: [88888, 88888, 88888, 88888, 88888], // 上月完成
           yearTotal: [88888, 88888, 888888, 88888, 88888], // 今年累计
-          totalNumbers: [8888, 8888, 8888, 8888, 8888], // 左侧显示的总数
         },
       }
     },
@@ -50,7 +55,6 @@
       // 初始化组件
       init() {
         this.initChart()
-        this.loadData()
       },
 
       // 初始化图表
@@ -88,7 +92,7 @@
             containLabel: true,
           },
           xAxis: {
-            type: "value",
+            type: "log",
             show: false, // 隐藏x轴
             axisLine: {
               show: false,
@@ -124,9 +128,7 @@
               name: "进行中",
               type: "bar",
               stack: "total",
-              emphasis: {
-                focus: "series",
-              },
+              barMinHeight: 10,
               itemStyle: {
                 color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                   { offset: 0, color: "#1620D4" },
@@ -141,15 +143,13 @@
               barWidth: 30,
               barGap: "0%",
               barCategoryGap: "20%",
-              data: this.chartData.ongoing,
+              data: this.data.service_ing,
             },
             {
               name: "上月完成",
               type: "bar",
               stack: "total",
-              emphasis: {
-                focus: "series",
-              },
+              barMinHeight: 10,
               itemStyle: {
                 color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                   { offset: 0, color: "#192FC9" },
@@ -163,15 +163,13 @@
               },
               barWidth: 30,
               barGap: "0%",
-              data: this.chartData.lastMonthCompleted,
+              data: this.data.service_last_month,
             },
             {
               name: "今年累计",
               type: "bar",
               stack: "total",
-              emphasis: {
-                focus: "series",
-              },
+              barMinHeight: 10,
               label: {
                 show: true,
                 color: "#fff",
@@ -185,7 +183,7 @@
               },
               barWidth: 30,
               barGap: "0%",
-              data: this.chartData.yearTotal,
+              data: this.data.year_summary,
             },
           ],
         }
@@ -194,33 +192,6 @@
         this.chartInstance.resize()
       },
 
-      // 加载数据
-      async loadData() {
-        this.updateChart()
-      },
-
-      // 更新图表
-      updateChart() {
-        if (this.chartInstance) {
-          this.chartInstance.setOption({
-            yAxis: {
-              data: this.chartData.categories,
-            },
-            series: [
-              {
-                data: this.chartData.ongoing,
-              },
-              {
-                data: this.chartData.lastMonthCompleted,
-              },
-              {
-                data: this.chartData.yearTotal,
-              },
-            ],
-          })
-        }
-      },
-
       // 处理窗口大小变化
       handleResize() {
         if (this.chartInstance) {

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

@@ -7,35 +7,35 @@
     <div class="total-grid">
       <div class="total-item">
         <div class="total-label">城市总数</div>
-        <div class="total-value">{{ cityCount }}</div>
+        <div class="total-value">{{ formatNumber(data.cities) }}</div>
       </div>
       <div class="total-item">
         <div class="total-label">企业总数</div>
-        <div class="total-value">{{ enterpriseCount }}</div>
+        <div class="total-value">{{ data.customers }}</div>
       </div>
       <div class="total-item">
         <div class="total-label">合同总数</div>
-        <div class="total-value">{{ contractCount }}</div>
+        <div class="total-value">{{ formatNumber(data.contracts) }}</div>
       </div>
       <div class="total-item">
         <div class="total-label">履约次数</div>
-        <div class="total-value">{{ performanceCount }}</div>
+        <div class="total-value">{{ formatNumber(data.perform_times) }}</div>
       </div>
       <div class="total-item">
         <div class="total-label">服务时长</div>
-        <div class="total-value">{{ serviceHours }}</div>
+        <div class="total-value">{{ formatNumber(data.service_time) }}</div>
       </div>
       <div class="total-item">
         <div class="total-label">项目总数</div>
-        <div class="total-value">{{ projectCount }}</div>
+        <div class="total-value">{{ formatNumber(data.residences) }}</div>
       </div>
       <div class="total-item">
         <div class="total-label">签约户数</div>
-        <div class="total-value">{{ signedUserCount }}</div>
+        <div class="total-value">{{ formatNumber(data.contracted_households) }}</div>
       </div>
       <div class="total-item">
         <div class="total-label">实施户数</div>
-        <div class="total-value">{{ implementationUserCount }}</div>
+        <div class="total-value">{{ formatNumber(data.actual_households) }}</div>
       </div>
     </div>
   </div>
@@ -43,73 +43,27 @@
 
 <script>
   import { mapState } from "vuex"
-  import { api } from "@/api"
 
   export default {
     name: "ImplementationTotal",
+    props: {
+      data: {
+        type: Object,
+        default: () => ({}),
+      },
+    },
     data() {
-      return {
-        cityCount: 99,
-        enterpriseCount: 99,
-        contractCount: 99,
-        performanceCount: 99,
-        serviceHours: 99,
-        projectCount: 99,
-        signedUserCount: 99,
-        implementationUserCount: 99,
-        timer: null,
-      }
+      return {}
     },
     computed: {
       ...mapState(["entCode", "communityId"]),
     },
-    mounted() {
-      this.init()
-      // 设置定时刷新
-      this.timer = setInterval(() => {
-        this.init()
-      }, 60000) // 每分钟刷新一次
-    },
-    beforeDestroy() {
-      if (this.timer) {
-        clearInterval(this.timer)
-      }
-    },
     methods: {
-      // 初始化数据
-      async init() {
-        try {
-          const params = {
-            entCode: this.entCode,
-            communityId: this.communityId,
-          }
-          // 这里应该调用实际的API获取数据
-          // const res = await api.getImplementationTotal(params)
-          // 暂时使用模拟数据
-          this.updateData()
-        } catch (error) {
-          console.error("获取实施服务汇总数据失败:", error)
-        }
-      },
-      // 更新数据
-      updateData() {
-        // 这里可以根据实际API返回的数据进行更新
-        // 目前使用固定值展示
-        this.cityCount = 99
-        this.enterpriseCount = 99
-        this.contractCount = 99
-        this.performanceCount = 99
-        this.serviceHours = 99
-        this.projectCount = 99
-        this.signedUserCount = 99
-        this.implementationUserCount = 99
-      },
       // 格式化数字显示
       formatNumber(num) {
-        if (num >= 10000) {
-          return (num / 10000).toFixed(1) + "万"
-        }
-        return num.toString()
+        return num.toLocaleString("zh", {
+          maximumFractionDigits: 2,
+        })
       },
     },
   }
@@ -125,7 +79,7 @@
     overflow: hidden;
 
     .total-title {
-      padding:  halfH(4) halfW(10);
+      padding: halfH(4) halfW(10);
       display: flex;
       align-items: center;
       font-size: halfW(18);
@@ -157,7 +111,7 @@
       }
 
       .total-value {
-        font-size: halfW(28);
+        font-size: halfW(24);
         font-weight: bold;
         color: #ffffff;
       }