wip: b1 部分接口调试

src/api/hui-jia.js

@@ -0,0 +1,67 @@
+/*
+ * @Author: wjc
+ * @Date: 2025-11-21 10:08:08
+ * @LastEditors: wjc
+ * @LastEditTime: 2025-11-24 15:43:45
+ * @Description:
+ */
+import axios from "../assets/js/api.request"
+export default {
+  getImplementaryData(data) {
+    return axios.request({
+      url: "/platform/bigData/screen/statistics",
+      params: data,
+      method: "get",
+    })
+  },
+  /**
+   * 部分业务 http://yapi.wisdomcity.com.cn/project/25/interface/api/26531
+   */
+  getBusinessData(data) {
+    return axios.request({
+      url: "/platform/bigData/business/statistics",
+      params: data,
+      method: "get",
+    })
+  },
+  /**
+   * 智能门禁 http://yapi.wisdomcity.com.cn/project/25/interface/api/26522
+   */
+  getFaceDeviceData(data) {
+    return axios.request({
+      url: "/platform/bigData/faceDeviceManage/statistics",
+      params: data,
+      method: "get",
+    })
+  },
+  /**
+   * 智能电表 http://yapi.wisdomcity.com.cn/project/25/interface/api/26504
+   */
+  getElectricData(data) {
+    return axios.request({
+      url: "/platform/bigData/meterHouse/electricMeter/monthStats",
+      params: data,
+      method: "get",
+    })
+  },
+  /**
+   * 智能水表 http://yapi.wisdomcity.com.cn/project/25/interface/api/26513
+   */
+  getWaterData(data) {
+    return axios.request({
+      url: "/platform/bigData/meterHouse/waterMeter/monthStats",
+      params: data,
+      method: "get",
+    })
+  },
+  /**
+   * 实施相关数据 http://yapi.wisdomcity.com.cn/project/25/interface/api/26576
+   */
+  getScreenData(data) {
+    return axios.request({
+      url: "/platform/bigData/screen/statistics",
+      params: data,
+      method: "get",
+    })
+  },
+}

src/api/index.js

@@ -1,16 +1,18 @@
 /*
  * @Author: mozhuangru
- * @LastEditors: wangjiacheng
+ * @LastEditors: wjc
  * @Description: api
  * @Date: 2019-10-09 09:21:46
- * @LastEditTime: 2021-10-14 12:04:06
+ * @LastEditTime: 2025-11-21 10:10:57
  */
 import api from './api'
 import totalSum from './total-sum'
 import screen from './screen'
+import huiJiaApi from './hui-jia'
 
 export {
   api,
   totalSum,
-  screen
+  screen,
+  huiJiaApi
 }

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

@@ -28,6 +28,8 @@
   import implementationNowYear from "../components/implementary/now-year.vue"
   import Market from "../components/market.vue"
 
+  import { huiJiaApi } from "@/api"
+
   export default {
     name: "B1Screen",
     components: {
@@ -36,6 +38,21 @@
       implementationNowYear,
       Market,
     },
+    data () {
+      return {
+        implementationData: {
+          ing: {},
+          nowYear: {},
+          total: {},
+        },
+      }
+    },
+    mounted() {
+      huiJiaApi.getImplementaryData().then((res) => {
+        this.implementationData = res.data.data
+        console.log('123----', this.implementationData)
+      })
+    },
   }
 </script>
 

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

@@ -2,7 +2,7 @@
  * @Author: wjc
  * @Date: 2025-11-19 16:09:12
  * @LastEditors: wjc
- * @LastEditTime: 2025-11-20 10:58:02
+ * @LastEditTime: 2025-11-24 09:52:05
  * @Description: 
 -->
 <template>
@@ -42,6 +42,12 @@
       Hardware,
       WorkCard,
     },
+    data () {
+      return {
+      }
+    },
+    methods: {
+    },
   }
 </script>
 

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

@@ -11,7 +11,7 @@
       <div class="device-info">
         <img src="@/assets/images/dblxzhb.png" class="title-icon" />
         <div>
-          <div class="device-count">8921</div>
+          <div class="device-count">{{ electricState.deviceCount }}</div>
           <div class="device-name">智能电表</div>
         </div>
       </div>
@@ -19,28 +19,28 @@
         <div class="data-card">
           <div class="data-label">年度用电</div>
           <div>
-            <div class="data-value">428921</div>
+            <div class="data-value">{{ electricState.annualUsage }}</div>
             <div class="data-unit">kW·h</div>
           </div>
         </div>
         <div class="data-card">
           <div class="data-label">月均用电</div>
           <div>
-            <div class="data-value">18921</div>
+            <div class="data-value">{{ electricState.monthlyAvgUsage }}</div>
             <div class="data-unit">kW·h</div>
           </div>
         </div>
         <div class="data-card">
           <div class="data-label">日均用电</div>
           <div>
-            <div class="data-value">8921</div>
+            <div class="data-value">{{ electricState.dailyAvgUsage }}</div>
             <div class="data-unit">kW·h</div>
           </div>
         </div>
         <div class="data-card">
           <div class="data-label">开关次数</div>
           <div>
-            <div class="data-value">887</div>
+            <div class="data-value">{{ electricState.switchCount }}</div>
             <div class="data-unit">近12个月</div>
           </div>
         </div>
@@ -57,7 +57,7 @@
       <div class="device-info">
         <img src="@/assets/images/zhnmj.png" class="title-icon" />
         <div>
-          <div class="device-count">8921</div>
+          <div class="device-count">{{ waterState.deviceCount }}</div>
           <div class="water-device-name">智能水表</div>
         </div>
       </div>
@@ -65,28 +65,28 @@
         <div class="data-card">
           <div class="data-label">年度用水</div>
           <div>
-            <div class="data-value">89321</div>
+            <div class="data-value">{{ waterState.annualUsage }}</div>
             <div class="water-data-unit">m³</div>
           </div>
         </div>
         <div class="data-card">
           <div class="data-label">月均用水</div>
           <div>
-            <div class="data-value">9212</div>
+            <div class="data-value">{{ waterState.monthlyAvgUsage }}</div>
             <div class="water-data-unit">m³</div>
           </div>
         </div>
         <div class="data-card">
           <div class="data-label">日均用水</div>
           <div>
-            <div class="data-value">921</div>
+            <div class="data-value">{{ waterState.dailyAvgUsage }}</div>
             <div class="water-data-unit">m³</div>
           </div>
         </div>
         <div class="data-card">
           <div class="data-label">开关次数</div>
           <div>
-            <div class="data-value">887</div>
+            <div class="data-value">{{ waterState.switchCount }}</div>
             <div class="water-data-unit">近12个月</div>
           </div>
         </div>
@@ -96,268 +96,105 @@
 </template>
 
 <script>
-import * as echarts from 'echarts'
-export default {
-  name: 'HardwareData',
-  data () {
-    return {
-      powerChartInstance: null,
-      waterChartInstance: null,
-      // 模拟月度数据
-      monthlyData: [
-        { month: '十二月', power: 220000, water: 180000 },
-        { month: '一月', power: 210000, water: 170000 },
-        { month: '二月', power: 230000, water: 190000 },
-        { month: '三月', power: 225000, water: 185000 },
-        { month: '四月', power: 215000, water: 175000 },
-        { month: '五月', power: 200000, water: 160000 },
-        { month: '六月', power: 205000, water: 165000 },
-        { month: '七月', power: 210000, water: 170000 },
-        { month: '八月', power: 215000, water: 175000 },
-        { month: '九月', power: 220000, water: 180000 },
-        { month: '十月', power: 225000, water: 185000 },
-        { month: '十一月', power: 230000, water: 190000 }
-      ]
-    }
-  },
-  mounted () {
-    this.initPowerChart()
-    this.initWaterChart()
-    window.addEventListener('resize', this.handleResize)
-  },
-  beforeDestroy () {
-    window.removeEventListener('resize', this.handleResize)
-    if (this.powerChartInstance) {
-      this.powerChartInstance.dispose()
-    }
-    if (this.waterChartInstance) {
-      this.waterChartInstance.dispose()
-    }
-  },
-  methods: {
-    // 初始化用电量柱状图
-    initPowerChart () {
-      this.powerChartInstance = echarts.init(this.$refs.powerChart)
+  import { huiJiaApi } from "@/api"
+  import * as echarts from "echarts"
 
-      const option = {
-        tooltip: {
-          trigger: 'axis',
-          backgroundColor: 'rgba(0, 0, 0, 0.8)',
-          borderColor: 'rgba(64, 158, 255, 0.3)',
-          textStyle: {
-            color: '#fff'
-          },
-          formatter: (params) => {
-            let result = ``
-            params.forEach((param) => {
-              result += `${param.name}<br/>${
-                param.seriesName
-              }: ${param.value.toLocaleString()}<br/>`
-            })
-            return result
-          }
-        },
-        grid: {
-          left: '1%',
-          right: '1%',
-          top: '5%',
-          bottom: '2%',
-          containLabel: true
-        },
-        xAxis: {
-          type: 'category',
-          data: this.monthlyData.map((item) => item.month),
-          axisLine: {
-            lineStyle: {
-              color: 'rgba(160, 179, 214, 0.3)',
-              type: 'dashed'
-            }
-          },
-          axisLabel: {
-            color: 'rgba(160, 179, 214, 0.7)',
-            fontSize: 11,
-            interval: 0
-          },
-          axisTick: {
-            show: false
-          },
-          splitLine: {
-            show: true,
-            // 将坐标轴内的线设置为虚线
-            lineStyle: {
-              color: 'rgba(160, 179, 214, 0.3)',
-              type: 'dashed'
-            }
-          }
+  export default {
+    name: "HardwareData",
+    data() {
+      return {
+        electricState: {
+          deviceCount: 8921, // 设备数量
+          annualUsage: 428921, // 年度用量 近12月的用量之和
+          monthlyAvgUsage: 18921, // 月均用量 近12月用量月平均数
+          dailyAvgUsage: 8921, // 日均用量 近12月用量日平均数
+          switchCount: 887, // 开关次数 近12月成功开启、关闭次数
+          list: [
+            {
+              statData: "2024-01", // 时间段
+              count: 8921, // 总数
+            },
+            {
+              statData: "2024-02", // 时间段
+              count: 7891, // 总数
+            },
+            {
+              statData: "2024-03", // 时间段
+              count: 8931, // 总数
+            },
+            {
+              statData: "2024-04", // 时间段
+              count: 6131, // 总数
+            },
+            {
+              statData: "2024-05", // 时间段
+              count: 1891, // 总数
+            },
+          ],
         },
-        yAxis: {
-          type: 'value',
-          axisLine: {
-            show: false
-          },
-          axisLabel: {
-            color: 'rgba(160, 179, 214, 0.7)',
-            fontSize: 11
-          },
-          axisTick: {
-            show: false
-          },
-          splitLine: {
-            lineStyle: {
-              color: 'rgba(160, 179, 214, 0.1)',
-              type: 'dashed',
-              width: 1
-            }
-          }
+        waterState: {
+          deviceCount: 8921, // 设备数量
+          annualUsage: 428921, // 年度用量 近12月的用量之和
+          monthlyAvgUsage: 18921, // 月均用量 近12月用量月平均数
+          dailyAvgUsage: 8921, // 日均用量 近12月用量日平均数
+          switchCount: 887, // 开关次数 近12月成功开启、关闭次数
+          list: [
+            {
+              statData: "2024-01", // 时间段
+              count: 8921, // 总数
+            },
+            {
+              statData: "2024-02", // 时间段
+              count: 7891, // 总数
+            },
+            {
+              statData: "2024-03", // 时间段
+              count: 8931, // 总数
+            },
+            {
+              statData: "2024-04", // 时间段
+              count: 6131, // 总数
+            },
+            {
+              statData: "2024-05", // 时间段
+              count: 1891, // 总数
+            },
+          ],
         },
-        series: [
-          {
-            name: '用电量',
-            type: 'bar',
-            data: this.monthlyData.map((item) => item.power),
-            barWidth: '30%',
-            itemStyle: {
-              color: new echarts.graphic.LinearGradient(1, 1, 0, 0, [
-                { offset: 0, color: '#FCE2B4' },
-                { offset: 1, color: '#F66757' }
-              ]),
-              borderRadius: [20, 20, 0, 0]
-            },
-            label: {
-              show: true,
-              position: 'top',
-              color: '#fff',
-              fontSize: 10,
-              formatter: (params) =>
-                params.value >= 10000
-                  ? (params.value / 10000).toFixed(1) + '万'
-                  : params.value
-            }
-          }
-        ]
+        powerChartInstance: null,
+        waterChartInstance: null,
       }
-
-      this.powerChartInstance.setOption(option)
     },
-
-    // 初始化用水量柱状图
-    initWaterChart () {
-      this.waterChartInstance = echarts.init(this.$refs.waterChart)
-
-      const option = {
-        tooltip: {
-          trigger: 'axis',
-          backgroundColor: 'rgba(0, 0, 0, 0.8)',
-          borderColor: 'rgba(64, 158, 255, 0.3)',
-          textStyle: {
-            color: '#fff'
-          },
-          formatter: (params) => {
-            let result = ``
-            params.forEach((param) => {
-              result += `${param.name}<br/>${
-                param.seriesName
-              }: ${param.value.toLocaleString()}<br/>`
-            })
-            return result
-          }
-        },
-        grid: {
-          left: '1%',
-          right: '1%',
-          top: '2%',
-          bottom: '5%',
-          containLabel: true
-        },
-        xAxis: {
-          type: 'category',
-          data: this.monthlyData.map((item) => item.month),
-          axisLine: {
-            lineStyle: {
-              color: 'rgba(160, 179, 214, 0.3)',
-              type: 'dashed'
-            }
-          },
-          axisLabel: {
-            color: 'rgba(160, 179, 214, 0.7)',
-            fontSize: 11,
-            interval: 0,
-            show: false
-          },
-          axisTick: {
-            show: false
-          },
-          splitLine: {
-            show: true,
-            // 将坐标轴内的线设置为虚线
-            lineStyle: {
-              color: 'rgba(160, 179, 214, 0.3)',
-              type: 'dashed'
-            }
-          }
-        },
-        yAxis: {
-          type: 'value',
-          // 反转 y 轴的 min 和 max，实现“倒立”
-          min: 400000,
-          max: 0,
-          axisLine: {
-            show: false
-          },
-          axisLabel: {
-            color: 'rgba(160, 179, 214, 0.7)',
-            fontSize: 11
-          },
-          axisTick: {
-            show: false
-          },
-          splitLine: {
-            lineStyle: {
-              color: 'rgba(160, 179, 214, 0.1)',
-              type: 'dashed',
-              width: 1
-            }
-          }
-        },
-        series: [
-          {
-            name: '用水量',
-            type: 'bar',
-            data: this.monthlyData.map((item) => item.water),
-            barWidth: '30%',
-            itemStyle: {
-              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-                { offset: 0, color: '#3AB3E3' },
-                { offset: 1, color: '#1620D4' }
-              ]),
-              borderRadius: [0, 0, 20, 20]
-            },
-            label: {
-              show: true,
-              position: 'bottom',
-              color: '#fff',
-              fontSize: 10,
-              formatter: (params) =>
-                params.value >= 10000
-                  ? (params.value / 10000).toFixed(1) + '万'
-                  : params.value
-            }
-          }
-        ]
-      }
-
-      this.waterChartInstance.setOption(option)
+    mounted() {
+      this.initPowerChart()
+      this.initWaterChart()
+      window.addEventListener("resize", this.handleResize)
+      this.getData()
     },
-
-    handleResize () {
+    beforeDestroy() {
+      window.removeEventListener("resize", this.handleResize)
       if (this.powerChartInstance) {
-        this.powerChartInstance.resize()
+        this.powerChartInstance.dispose()
       }
       if (this.waterChartInstance) {
-        this.waterChartInstance.resize()
+        this.waterChartInstance.dispose()
       }
     },
     methods: {
+      getData() {
+        huiJiaApi.getElectricData().then((res) => {
+          if (res && res.data) {
+            this.state = res.data.data
+          }
+          console.log("业务数据----", res.data.data)
+        })
+        huiJiaApi.getWaterData().then((res) => {
+          if (res && res.data) {
+            this.state = res.data.data
+          }
+          console.log("业务数据----", res.data.data)
+        })
+      },
       // 初始化用电量柱状图
       initPowerChart() {
         this.powerChartInstance = echarts.init(this.$refs.powerChart)
@@ -389,7 +226,7 @@ export default {
           },
           xAxis: {
             type: "category",
-            data: this.monthlyData.map((item) => item.month),
+            data: this.electricState.list.map((item) => item.statData),
             axisLine: {
               lineStyle: {
                 color: "rgba(160, 179, 214, 0.3)",
@@ -415,6 +252,8 @@ export default {
           },
           yAxis: {
             type: "value",
+            min: 0,
+            max: 40000,
             axisLine: {
               show: false,
             },
@@ -437,7 +276,7 @@ export default {
             {
               name: "用电量",
               type: "bar",
-              data: this.monthlyData.map((item) => item.power),
+              data: this.electricState.list.map((item) => item.count),
               barWidth: "30%",
               itemStyle: {
                 color: new echarts.graphic.LinearGradient(1, 1, 0, 0, [
@@ -495,7 +334,7 @@ export default {
           },
           xAxis: {
             type: "category",
-            data: this.monthlyData.map((item) => item.month),
+            data: this.waterState.list.map((item) => item.statData),
             axisLine: {
               lineStyle: {
                 color: "rgba(160, 179, 214, 0.3)",
@@ -523,7 +362,7 @@ export default {
           yAxis: {
             type: "value",
             // 反转 y 轴的 min 和 max，实现“倒立”
-            min: 400000,
+            min: 40000,
             max: 0,
             axisLine: {
               show: false,
@@ -547,7 +386,7 @@ export default {
             {
               name: "用水量",
               type: "bar",
-              data: this.monthlyData.map((item) => item.water),
+              data: this.waterState.list.map((item) => item.count),
               barWidth: "30%",
               itemStyle: {
                 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
@@ -584,7 +423,6 @@ export default {
       },
     },
   }
-}
 </script>
 
 <style lang="scss" scoped>

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

@@ -88,10 +88,10 @@
             },
           },
           grid: {
-            left: "25%",
-            right: "25%",
-            bottom: "3%",
-            top: 50,
+            left: "10%",
+            right: "10%",
+            bottom: "5%",
+            top: '5%',
             containLabel: true,
           },
           xAxis: {

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

@@ -9,17 +9,17 @@
     <!-- 数据卡片 -->
     <div class="data-cards">
       <div class="data-card">
-        <div class="data-value">{{ doorDevices }}</div>
+        <div class="data-value">{{ state.count }}</div>
         <div class="data-label">门禁设备</div>
       </div>
 
       <div class="data-card">
-        <div class="data-value">{{ activeProjects }}</div>
+        <div class="data-value">{{ state.accessControlProjectCount }}</div>
         <div class="data-label">开通项目</div>
       </div>
 
       <div class="data-card">
-        <div class="data-value">{{ accessTimes }}</div>
+        <div class="data-value">{{ state.openCount }}</div>
         <div class="data-label">出入次数</div>
       </div>
     </div>
@@ -33,30 +33,35 @@
 </template>
 
 <script>
+import { huiJiaApi } from "@/api"
+
 export default {
   name: 'SmartDoor',
   data () {
     return {
-      doorDevices: '921',
-      activeProjects: '92',
-      accessTimes: '900000',
-      chartInstance: null,
-      // 模拟的通行流量数据
-      trafficData: [
-        { time: '01:00', count: 150 },
-        { time: '04:00', count: 250 },
-        { time: '07:00', count: 420 },
-        { time: '10:00', count: 380 },
-        { time: '13:00', count: 320 },
-        { time: '16:00', count: 230 },
-        { time: '19:00', count: 220 },
-        { time: '22:00', count: 300 }
-      ]
+      state: {
+        count: '921',
+        accessControlProjectCount: '92',
+        openCount: '900000',
+        chartInstance: null,
+        // 模拟的通行流量数据
+        list: [
+          { statData: '01:00', count: 150 },
+          { statData: '04:00', count: 250 },
+          { statData: '07:00', count: 420 },
+          { statData: '10:00', count: 380 },
+          { statData: '13:00', count: 320 },
+          { statData: '16:00', count: 230 },
+          { statData: '19:00', count: 220 },
+          { statData: '22:00', count: 300 }
+        ]
+      }
     }
   },
   mounted () {
     this.initChart()
     window.addEventListener('resize', this.handleResize)
+    this.getData()
   },
   beforeDestroy () {
     window.removeEventListener('resize', this.handleResize)
@@ -65,6 +70,14 @@ export default {
     }
   },
   methods: {
+    getData () {
+      huiJiaApi.getFaceDeviceData().then((res) => {
+        if (res && res.data) {
+          this.state = res.data.data
+        }
+        console.log("业务数据----", res.data.data)
+      })
+    },
     initChart () {
       const echarts = require('echarts')
       this.chartInstance = echarts.init(this.$refs.trafficChart)
@@ -98,7 +111,7 @@ export default {
         },
         xAxis: {
           type: 'category',
-          data: this.trafficData.map((item) => item.time),
+          data: this.state.list.map((item) => item.statData),
           axisLine: {
             lineStyle: {
               color: 'rgba(160, 179, 214, 0.6)'
@@ -144,7 +157,7 @@ export default {
           {
             name: '开门次数',
             type: 'bar',
-            data: this.trafficData.map((item) => item.count),
+            data: this.state.list.map((item) => item.count),
             barWidth: '30%',
             // 添加标签配置，设置颜色为白色
             label: {
@@ -190,6 +203,7 @@ export default {
   .module-title {
     display: flex;
     border-radius: halfW(4);
+    font-size: halfW(18);
     align-items: center;
     color: var(--title-primary);
     background: var(--title-bg);

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

@@ -5,14 +5,72 @@
       部分业务统计
     </div>
     <div class="work-card">
-      <div class="work-card-item" v-for="item in dataList" :key="item.title">
+      <div class="work-card-item">
         <div class="card-header">
-          <img :src="item.icon" class="title-icon" />
-          <span class="card-title">{{ item.title }}</span>
+          <img src="@/assets/images/jgxx.png" class="title-icon" />
+          <span class="card-title">数电票业务</span>
         </div>
         <div class="card-content">
-          <div class="card-subtitle">{{ item.subtitle }}</div>
-          <div class="card-value">{{ formatNumber(item.value) }}</div>
+          <div class="card-subtitle">已开发票数</div>
+          <div class="card-value">
+            {{ formatNumber(state.issuedInvoiceCount) }}
+          </div>
+        </div>
+      </div>
+      <div class="work-card-item">
+        <div class="card-header">
+          <img src="@/assets/images/glgd.png" class="title-icon" />
+          <span class="card-title">道闸系统</span>
+        </div>
+        <div class="card-content">
+          <div class="card-subtitle">设备数量</div>
+          <div class="card-value">
+            {{ formatNumber(state.gateDeviceCount) }}
+          </div>
+        </div>
+      </div>
+      <div class="work-card-item">
+        <div class="card-header">
+          <img src="@/assets/images/ewm.png" class="title-icon" />
+          <span class="card-title">智慧二维码</span>
+        </div>
+        <div class="card-content">
+          <div class="card-subtitle">配置数量</div>
+          <div class="card-value">{{ formatNumber(state.qrCount) }}</div>
+        </div>
+      </div>
+      <div class="work-card-item">
+        <div class="card-header">
+          <img src="@/assets/images/zhxggd.png" class="title-icon" />
+          <span class="card-title">短信业务</span>
+        </div>
+        <div class="card-content">
+          <div class="card-subtitle">销售数量</div>
+          <div class="card-value">{{ formatNumber(state.smsSalesQty) }}</div>
+        </div>
+      </div>
+      <div class="work-card-item">
+        <div class="card-header">
+          <img src="@/assets/images/gwxx.png" class="title-icon" />
+          <span class="card-title">房屋租售</span>
+        </div>
+        <div class="card-content">
+          <div class="card-subtitle">发布资产数</div>
+          <div class="card-value">
+            {{ formatNumber(state.rentalPublishCount) }}
+          </div>
+        </div>
+      </div>
+      <div class="work-card-item">
+        <div class="card-header">
+          <img src="@/assets/images/ryzb.png" class="title-icon" />
+          <span class="card-title">业委会</span>
+        </div>
+        <div class="card-content">
+          <div class="card-subtitle">开通数量</div>
+          <div class="card-value">
+            {{ formatNumber(state.ownerCommitteeOpenCount) }}
+          </div>
         </div>
       </div>
     </div>
@@ -20,156 +78,121 @@
 </template>
 
 <script>
-  import ewm from "@/assets/images/ewm.png"
-  import ryzb from "@/assets/images/ryzb.png"
-  import gwxx from "@/assets/images/gwxx.png"
-  import jgxx from "@/assets/images/jgxx.png"
-  import glgd from "@/assets/images/glgd.png"
-  import zhxggd from "@/assets/images/zhxggd.png"
+import { huiJiaApi } from "@/api"
 
-  export default {
-    name: "WorkCard",
-    props: {
-      title: {
-        type: String,
-        required: true,
-      },
-      subtitle: {
-        type: String,
-        required: true,
-      },
-      value: {
-        type: [Number, String],
-        required: true,
-        default: 0,
+export default {
+  name: "WorkCard",
+  props: {},
+  data() {
+    return {
+      state: {
+        issuedInvoiceCount: "", // 数电票业务
+        gateDeviceCount: "", // 闸道设备数量
+        qrCount: "", // 二维码数量
+        smsSalesQty: "", // 短信销售数量
+        rentalPublishCount: "", // 房屋租赁发布数量
+        ownerCommitteeOpenCount: "", // 业委会开通数量
       },
-    },
-    data() {
-      return {
-        dataList: [
-          {
-            title: "数电票业务",
-            subtitle: "已开发票数",
-            value: 345345,
-            icon: jgxx,
-          },
-          {
-            title: "道闸系统",
-            subtitle: "设备数量",
-            value: 453,
-            icon: glgd,
-          },
-          {
-            title: "智慧二维码",
-            subtitle: "配置数量",
-            value: 45,
-            icon: ewm,
-          },
-          {
-            title: "短信业务",
-            subtitle: "销售数量",
-            value: 3456,
-            icon: zhxggd,
-          },
-          {
-            title: "房屋租售",
-            subtitle: "发布资产数",
-            value: 887,
-            icon: gwxx,
-          },
-          {
-            title: "业委会",
-            subtitle: "开通数量",
-            value: 34,
-            icon: ryzb,
-          },
-        ],
-      }
-    },
-    methods: {
-      // 格式化数字显示
-      formatNumber(num) {
-        if (typeof num === "string") {
-          return num
+    }
+  },
+  mounted() {
+    this.getData()
+  },
+  methods: {
+    getData() {
+      huiJiaApi.getBusinessData().then((res) => {
+        if (res && res.data) {
+          this.state = res.data.data
         }
-        // 如果数字是整数，直接返回字符串形式
-        return num.toString()
-      },
+        console.log("业务数据----", res.data.data)
+      })
     },
-  }
+    // 格式化数字显示
+    formatNumber(num) {
+      return num.toLocaleString("zh", {
+        maximumFractionDigits: 2,
+      })
+    },
+  },
+}
 </script>
 
 <style lang="scss" scoped>
-  @import "@/assets/css/theme.scss";
-  .work-card-container {
-    background: var(--content-bg);
-    border-radius: halfW(4);
-    height: 100%;
-    width: 100%;
-    display: flex;
-    flex-direction: column;
-    .title {
-      display: flex;
-      border-radius: halfW(4);
-      align-items: center;
-      color: var(--title-primary);
-      background: var(--title-bg);
-      padding: halfH(4) halfW(10);
-    }
-  }
-  .work-card {
-    flex: 1 1 0%;
-    padding: 0px halfW(20);
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    gap: halfW(10);
-  }
+@import "@/assets/css/theme.scss";
 
-  .work-card-item {
-    background: var(--title-bg);
-    border-radius: halfW(4);
-    display: flex;
-    flex-direction: column;
-    justify-content: space-between;
-  }
+.work-card-container {
+  background: var(--content-bg);
+  border-radius: halfW(4);
+  height: 100%;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
 
-  .card-header {
+  .title {
+    font-size: halfW(18);
     display: flex;
+    border-radius: halfW(4);
     align-items: center;
-    margin-bottom: halfH(10);
-    padding: halfH(4) halfW(10);
+    color: var(--title-primary);
     background: var(--title-bg);
+    padding: halfH(4) halfW(10);
+  }
+}
 
-    .iconfont {
-      font-size: halfH(24);
-      margin-right: halfW(10);
-      // 根据不同图标使用不同颜色
-      color: var(--primary-color, #409eff);
-    }
+.work-card {
+  flex: 1 1 0%;
+  padding: 0px halfW(20);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: halfW(10);
+}
 
-    .card-title {
-      font-size: halfW(16);
-      font-weight: 500;
-      color: var(--title-primary);
-    }
+.work-card-item {
+  background: var(--title-bg);
+  border-radius: halfW(4);
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+}
+
+.card-header {
+  display: flex;
+  align-items: center;
+  margin-bottom: halfH(10);
+  padding: halfH(4) halfW(10);
+  background: var(--title-bg);
+
+  .iconfont {
+    font-size: halfH(24);
+    margin-right: halfW(10);
+    // 根据不同图标使用不同颜色
+    color: var(--primary-color, #409eff);
   }
 
-  .card-content {
-    display: flex;
-    align-items: center;
-    padding: halfH(20) halfW(20);
-    .card-subtitle {
-      font-size: halfW(14);
-      color: #82d1f6;
-    }
+  .card-title {
+    font-size: halfW(16);
+    font-weight: 500;
+    color: var(--title-primary);
+  }
+}
 
-    .card-value {
-      margin-left: halfW(12);
-      font-size: halfW(18);
-      font-weight: 600;
-      color: #fff;
-      letter-spacing: 1px;
-    }
+.card-content {
+  display: flex;
+  align-items: center;
+  padding: halfH(20) halfW(20);
+
+  .card-subtitle {
+    font-size: halfW(14);
+    color: #82d1f6;
+  }
+
+  .card-value {
+    margin-left: halfW(12);
+    font-size: halfW(18);
+    font-weight: 600;
+    color: #fff;
+    letter-spacing: 1px;
   }
+}
 </style>