统计图接口调用

src/api/modules/count/index.js

@@ -0,0 +1,28 @@
+import { httpApi } from '../../request/httpApi'
+export default {
+        //结算统计面积进度
+        async getStatArea(form, msg = true) {
+            return httpApi({
+                url: '/api/blade-land/clearingAgreementInfo/statArea',
+                method: 'get',
+                params: form,
+            }, msg)
+        },
+        //结算统计-面积进度柱状图
+        async getstatAreaPicture(form, msg = true) {
+            return httpApi({
+                url: '/api/blade-land/clearingAgreementInfo/statAreaPicture',
+                method: 'get',
+                params: form,
+            }, msg)
+        },
+        //结算统计-金额进度
+        async getStatMoney(form, msg = true) {
+        return httpApi({
+            url: '/api/blade-land/clearingAgreementInfo/statMoney',
+            method: 'get',
+            params: form,
+        }, msg)
+    },
+     
+}

src/components/echarts/BarLabel.vue

@@ -1,5 +1,5 @@
 <template>
-    <echartsBase :option="setOption"/>
+    <echartsBase :option="setOption" />
 </template>
 
 <script setup>
@@ -9,19 +9,19 @@ import { nextTick, onMounted, ref, watch } from 'vue'
 const props = defineProps({
     color: {
         type: Array,
-        default: () => ([])
+        default: () => ([]),
     },
     datas: {
         type: Array,
-        default: () => ([])
+        default: () => ([]),
     },
     lables: {
         type: Array,
-        default: () => ([])
+        default: () => ([]),
     },
     isMonth: {
         type: Boolean,
-        default: false
+        default: false,
     },
 })
 
@@ -37,6 +37,7 @@ watch(() => [
     props.color,
     props.isMonth,
     props.lables,
+
 ], ([color, isMonth, lables]) => {
     colors.value = color
     isMonths.value = isMonth
@@ -47,7 +48,7 @@ watch(() => [
 
 //深度监听数据变化
 watch(() => [
-    props.datas
+    props.datas,
 ], ([data]) => {
     datas.value = data
     setDataFormat()
@@ -55,7 +56,7 @@ watch(() => [
 
 //处理数据
 const setDataFormat = () => {
-    let series = [], lables = xAxis.value, data = datas.value;
+    let series = [], lables = xAxis.value, data = datas.value
     let isLables = lables.length > 0
     //处理数据
     for (let i = 0; i < data.length; i++) {
@@ -66,7 +67,7 @@ const setDataFormat = () => {
             series.push({
                 name: data[i].name,
                 type: 'bar',
-                data: data[i].value
+                data: data[i].value,
             })
         }
     }
@@ -80,29 +81,29 @@ const setOptions = (lables = [], series = []) => {
         tooltip: {
             trigger: 'axis',
             axisPointer: {
-                type: 'shadow'
-            }
+                type: 'shadow',
+            },
         },
         grid: {
             top: '50px',
             left: '0',
             right: '4px',
             bottom: '0',
-            containLabel: true
+            containLabel: true,
         },
         xAxis: [
             {
                 type: 'category',
                 data: lables,
-            }
+            },
         ],
         yAxis: [{
             type: 'value',
             axisLabel: {
-                formatter: '{value}'
+                formatter: '{value}',
             },
         }],
-        series: series
+        series: series,
     }
 }
 

src/components/echarts/index.vue

@@ -1,28 +1,28 @@
 <template>
     <div class="hac-echarts-box">
-        <div ref="echart" class="hac-echarts" :style="`width : ${chart?.clientWidth}px`"/>
+        <div ref="echart" class="hac-echarts" :style="`width : ${chart?.clientWidth}px`" />
     </div>
 </template>
 
 <script setup>
 import * as echarts from 'echarts'
-import { getObjValue } from "js-fast-way"
+import { getObjValue } from 'js-fast-way'
 import { nextTick, onMounted, onUnmounted, ref, watch } from 'vue'
 const props = defineProps({
     option: {
         type: Object,
-        default: () => ({})
-    }
+        default: () => ({}),
+    },
 })
 
 //初始变量
-let chart = null;
+let chart = null
 const echart = ref(null)
 const options = ref(getObjValue(props.option))
 
 //深度监听
 watch(() => [
-    props.option
+    props.option,
 ], ([option]) => {
     options.value = getObjValue(option)
     setOptions(options.value)
@@ -36,18 +36,19 @@ const initChart = () => {
 
 //监听浏览器窗口变化
 const windowResize = () => {
-    window.addEventListener("resize", resizeEvent);
+    window.addEventListener('resize', resizeEvent)
 }
 
 const resizeEvent = () => {
     window.requestAnimationFrame(() => {
-        chart.resize();
+        chart.resize()
     })
 }
 
 //设置图表
 const setOptions = (option) => {
     nextTick(() => {
+        chart.clear()
         chart.setOption(option)
     })
 }
@@ -62,20 +63,20 @@ onMounted(() => {
 
 //被卸载
 onUnmounted(() => {
-    window.removeEventListener("resize",resizeEvent);
+    window.removeEventListener('resize', resizeEvent)
     chart.dispose()
     chart = null
 })
 
 const onResize = () => {
     nextTick(() => {
-        chart.resize();
+        chart.resize()
     })
 }
 
 // 暴露出去
 defineExpose({
-    onResize
+    onResize,
 })
 </script>
 

src/views/count/index.vue

@@ -1,17 +1,17 @@
 <template>
-    <HcCard ui="hc-count-card-ui" bodyUi="hc-count-card">
-        <div class="hc-count-tree" id="hc-count-tree">
+    <HcCard ui="hc-count-card-ui" body-ui="hc-count-card">
+        <div id="hc-count-tree" class="hc-count-tree">
             <el-scrollbar>
-                <HcTreeData :isMenu="false" @nodeTap="treeNodeTap"/>
+                <HcTreeData :is-menu="false" @nodeTap="treeNodeTap" />
             </el-scrollbar>
         </div>
-        <div class="hc-count-body" id="hc-count-body">
+        <div id="hc-count-body" class="hc-count-body">
             <el-scrollbar>
                 <div class="hc-count-echarts-1">
                     <el-row :gutter="14">
                         <el-col :span="10">
                             <HcCardItem title="面积进度柱状图统计" style="height: 440px">
-                                <BarLabelEcharts :lables="planLables" :color="planColors" :datas="planDatas"/>
+                                <BarLabelEcharts :lables="planLables" :color="planColors" :datas="planDatas" />
                             </HcCardItem>
                         </el-col>
                         <el-col :span="14">
@@ -19,38 +19,54 @@
                                 <el-row :gutter="20" class="h-full">
                                     <el-col :span="6">
                                         <div class="hc-count-area-progress">
-                                            <div class="num">23123123.12</div>
-                                            <div class="text">已签协议面积(亩)</div>
+                                            <div class="num">
+                                                {{ progress[0] || 0 }}
+                                            </div>
+                                            <div class="text">
+                                                已签协议面积(亩)
+                                            </div>
                                         </div>
                                     </el-col>
                                     <el-col :span="6">
                                         <div class="hc-count-area-progress">
-                                            <div class="num">26.12%</div>
-                                            <div class="text">已签协议比例</div>
+                                            <div class="num">
+                                                {{ progress[1] || 0 }}
+                                            </div>
+                                            <div class="text">
+                                                已签协议比例
+                                            </div>
                                         </div>
                                     </el-col>
                                     <el-col :span="6">
                                         <div class="hc-count-area-progress">
-                                            <div class="num">23123.12</div>
-                                            <div class="text">已结算面积(亩)</div>
+                                            <div class="num">
+                                                {{ progress[2] || 0 }}
+                                            </div>
+                                            <div class="text">
+                                                已结算面积(亩)
+                                            </div>
                                         </div>
                                     </el-col>
                                     <el-col :span="6">
                                         <div class="hc-count-area-progress">
-                                            <div class="num">26.36%</div>
-                                            <div class="text">已结算比例</div>
+                                            <div class="num">
+                                                {{ progress[3] || 0 }}
+                                            </div>
+                                            <div class="text">
+                                                已结算比例
+                                            </div>
                                         </div>
                                     </el-col>
                                 </el-row>
                             </HcCardItem>
                             <HcCardItem title="金额进度" style="height: 266px; margin-top: 14px">
-                                <BarLabelEcharts :lables="planLables1" :color="planColors1" :datas="planDatas1"/>
+                                <BarLabelEcharts :lables="planLables1" :color="planColors1" :datas="planDatas1" />
                             </HcCardItem>
                         </el-col>
                     </el-row>
                 </div>
                 <HcCardItem title="结算统计图（单位：元）" style="height: 440px; margin-top: 14px">
-                    <stackEcharts/>
+                    <stackEcharts />
                 </HcCardItem>
             </el-scrollbar>
         </div>
@@ -58,33 +74,56 @@
 </template>
 
 <script setup>
-import {ref, onUnmounted, onMounted} from "vue";
-import BarLabelEcharts from "~com/echarts/BarLabel.vue";
-import stackEcharts from "~com/echarts/stackEcharts.vue";
-import split from "split.js";
+import { nextTick, onActivated, onMounted, onUnmounted, ref } from 'vue'
+import BarLabelEcharts from '~com/echarts/BarLabel.vue'
+import stackEcharts from '~com/echarts/stackEcharts.vue'
+import split from 'split.js'
+import countApi from '~api/count/index.js'
+import { getArrValue, getObjValue } from 'js-fast-way'
+import { useAppStore } from '~src/store'
+const useAppState = useAppStore()
+const projectId = ref(useAppState.getProjectId)
 
 //树节点被点击
-const treeNodeTap = ({node, data}) => {
-
+const treeNodeTap = ({ node, data }) => {
+    areaId.value = data.id
+    getAreProgress()
+    getPlanDatas()
+    getPlanDatas1()
 }
 
 //渲染完成
 onMounted(() => {
     setSplitDom()
 })
-
+//获取面积进度
+const areaId = ref('')
+const progress = ref([])
+const getAreProgress = async () => {
+    const { error, code, data } = await countApi.getStatArea({
+        projectId: projectId.value,
+        areaId:areaId.value,
+    })
+    if (!error && code === 200) {
+        progress.value = getArrValue(data)
+      
+    } else {
+        progress.value = []
+     
+    }
+}
 // 初始化设置拖动分割线
-const splitvar = ref(null);
+const splitvar = ref(null)
 const setSplitDom = () => {
     try {
         //配置参考： https://split.js.org/#/?direction=vertical&snapOffset=0
         splitvar.value = split([
             '#hc-count-tree',
-            '#hc-count-body'
+            '#hc-count-body',
         ], {
             sizes: [20, 80],
             minSize: [200, 900],
-        });
+        })
     } catch (e) {
         setTimeout(() => {
             setSplitDom()
@@ -96,15 +135,28 @@ const setSplitDom = () => {
 const planColors = ['#D97558', '#E4C476']
 const planLables = ref(['农用地', '建设用地', '未利用地'])
 const planDatas = ref([
-    {
-        name: '已签面积',
-        value: [1200, 132, 501]
-    },
-    {
-        name: '设计面积',
-        value: [120, 432, 1001]
-    }
+    // {
+    //     name: '已签面积',
+    //     value: [1200, 132, 501],
+    // },
+    // {
+    //     name: '设计面积',
+    //     value: [120, 432, 1001],
+    // },
 ])
+//获取面积柱状图统计
+const getPlanDatas = async () => {
+    const { error, code, data } = await countApi.getstatAreaPicture({
+        projectId: projectId.value,
+        areaId:areaId.value,
+    })
+    if (!error && code === 200) {
+        planDatas.value = getArrValue(data) 
+    } else {
+        planDatas.value = []
+     
+    }
+}
 
 //金额进度
 const planColors1 = ['#7F83F6', '#81B336', '#E99D43']
@@ -112,18 +164,31 @@ const planLables1 = ref(['征地补偿', '专项设施', '青苗', '坟地补偿
 const planDatas1 = ref([
     {
         name: '实际补助总金额',
-        value: [1200, 132, 501, 323, 654]
+        value: [1200, 132, 501, 323, 654],
     },
     {
         name: '设计补助总金额',
-        value: [120, 432, 1001, 111, 987]
+        value: [120, 432, 1001, 111, 987],
     },
     {
         name: '已结算总金额',
-        value: [120, 432, 1001, 323, 654]
-    }
+        value: [120, 432, 1001, 323, 654],
+    },
 ])
-
+//获取金额进度
+const getPlanDatas1 = async () => {
+    const { error, code, data } = await countApi.getStatMoney({
+        projectId: projectId.value,
+        areaId:areaId.value,
+    })
+    if (!error && code === 200) {
+        planDatas1.value = getArrValue(data)
+      
+    } else {
+        planDatas1.value = []
+     
+    }
+}
 //销毁
 onUnmounted(() => {
     if (splitvar.value) {

src/views/settle/index.vue

@@ -225,7 +225,7 @@
 import { nextTick, onUnmounted, ref } from 'vue'
 import split from 'split.js'
 import settleApi from '~api/settle/index.js'
-import { arrToId, getArrValue } from 'js-fast-way'
+import { getArrValue } from 'js-fast-way'
 import { useAppStore } from '~src/store'
 const useAppState = useAppStore()
 const projectId = ref(useAppState.getProjectId)