首页统计

src/api/big/resource.js

@@ -0,0 +1,9 @@
+import request from '@/utils/request'
+
+export function homepageStatistics(query) {
+  return request({
+    url: '/big/resource/homepageStatistics',
+    method: 'get',
+    params: query
+  })
+}

src/api/resource/land.js

@@ -75,4 +75,4 @@ export function printLand(query) {
     method: 'get',
     params: query
   })
-}
+}

src/views/index.vue

@@ -11,44 +11,44 @@
       <div class="info-cards">
         <div class="info-card">
           <h3>地块总数</h3>
-          <p class="number">12,345</p>
+          <p class="number"><countTo v-if="homepageStatistics" :startVal="0" :endVal="Number(homepageStatistics.dataNum1)" :duration="2000"></countTo> 块</p>
         </div>
         <div class="info-card">
           <h3>承包总金额</h3>
-          <p class="number">¥ 456,789</p>
+          <p class="number">¥ <countTo v-if="homepageStatistics" :startVal="0" :endVal="Number(homepageStatistics.dataNum6)" :duration="2000"></countTo></p>
         </div>
       </div>
 
       <div class="info-cards">
         <div class="info-card">
           <h3>待调查总数</h3>
-          <p class="number">8,642</p>
+          <p class="number"><countTo v-if="homepageStatistics" :startVal="0" :endVal="Number(homepageStatistics.dataNum2)" :duration="2000"></countTo> 块</p>
         </div>
         <div class="info-card">
           <h3>兑现总金额</h3>
-          <p class="number">8,642</p>
+          <p class="number">¥ <countTo v-if="homepageStatistics" :startVal="0" :endVal="Number(homepageStatistics.dataNum7)" :duration="2000"></countTo></p>
         </div>
       </div>
 
       <div class="info-cards">
         <div class="info-card">
           <h3>已调查总数</h3>
-          <p class="number">¥ 456,789</p>
+          <p class="number"><countTo v-if="homepageStatistics" :startVal="0" :endVal="Number(homepageStatistics.dataNum3)" :duration="2000"></countTo> 块</p>
         </div>
         <div class="info-card">
           <h3>尚欠总金额</h3>
-          <p class="number">¥ 456,789</p>
+          <p class="number">¥ <countTo v-if="homepageStatistics" :startVal="0" :endVal="Number(homepageStatistics.dataNum8)" :duration="2000"></countTo></p>
         </div>
       </div>
 
       <div class="info-cards">
         <div class="info-card">
           <h3>地块总面积</h3>
-          <p class="number">8,642</p>
+          <p class="number"><countTo v-if="homepageStatistics" :startVal="0" :endVal="Number(homepageStatistics.dataNum4)" :duration="2000"></countTo> 亩</p>
         </div>
         <div class="info-card">
           <h3>经营总面积</h3>
-          <p class="number">¥ 456,789</p>
+          <p class="number"><countTo v-if="homepageStatistics" :startVal="0" :endVal="Number(homepageStatistics.dataNum9)" :duration="2000"></countTo> 亩</p>
         </div>
 
       </div>
@@ -56,11 +56,11 @@
       <div class="info-cards">
         <div class="info-card">
           <h3>机动地总面积</h3>
-          <p class="number">¥ 456,789</p>
+          <p class="number"><countTo v-if="homepageStatistics" :startVal="0" :endVal="Number(homepageStatistics.dataNum5)" :duration="2000"></countTo> 亩</p>
         </div>
         <div class="info-card">
           <h3>年总收益</h3>
-          <p class="number">8,642</p>
+          <p class="number">¥ <countTo v-if="homepageStatistics" :startVal="0" :endVal="Number(homepageStatistics.dataNum10)" :duration="2000"></countTo></p>
         </div>
       </div>
     </div>
@@ -69,14 +69,32 @@
 
 <script>
   import * as echarts from 'echarts';
+  import { homepageStatistics } from "@/api/big/resource"
+  import countTo from "vue-count-to";
 
   export default {
     name: 'Dashboard',
+    data() {
+        return {
+          homepageStatistics:null,
+          progressResourceInvestigationList:[],
+        }
+    },
+    components: { countTo},
     mounted() {
+      this.progressResourceInvestigation();
       this.initLineChart();
-
     },
     methods: {
+      progressResourceInvestigation(){
+        homepageStatistics().then((res) => {
+          if (res.code == 200) {
+            this.homepageStatistics = res.data.homepageStatistics;
+            this.progressResourceInvestigationList = res.data.progressResourceInvestigation;
+            this.initLineChart();
+          }
+        });
+      },
       initLineChart() {
         const chart = echarts.init(this.$refs.lineChart);
         const option = {
@@ -95,7 +113,7 @@
           xAxis: {
             type: 'category',
             boundaryGap: false,
-            data: ['A市', 'B市', 'C市', 'D市', 'E市', 'F市', 'G市']
+            data: this.progressResourceInvestigationList.map(item => item.deptName)
           },
           yAxis: {
             type: 'value'
@@ -104,7 +122,7 @@
             {
               name: '已调查',
               type: 'line',
-              data: [220, 182, 191, 234, 290, 330, 310],
+              data: this.progressResourceInvestigationList.map(item => item.dataNum1),
               smooth: true,
               lineStyle: {
                 width: 3,
@@ -117,7 +135,7 @@
             {
               name: '待调查',
               type: 'line',
-              data: [150, 232, 201, 154, 190, 330, 410],
+              data: this.progressResourceInvestigationList.map(item => item.dataNum2),
               smooth: true,
               lineStyle: {
                 width: 3,