园区动态数据统计卡片

src/api/estate/article.js

@@ -48,3 +48,11 @@ export const update = (row) => {
   })
 }
 
+export const getArticleCount = (row) => {
+  return request({
+    url:'/api/cyzh-estate/article/getArticleCount',
+    method: 'get',
+  })
+}
+
+

src/views/estate/article.vue

@@ -1,5 +1,12 @@
 <template>
   <basic-container>
+    <!--    卡片数据展示-->
+    <el-card style="background: #f5f5f5;margin-bottom: 20px">
+      <el-tabs type="border-card">
+        <el-tab-pane label="数据统计"><avue-data-box :option="ArticleCount"></avue-data-box></el-tab-pane>
+      </el-tabs>
+    </el-card>
+
     <avue-crud :option="option"
                :table-loading="loading"
                :data="data"
@@ -61,12 +68,41 @@
 </template>
 
 <script>
-  import {getList, getDetail, add, update, remove} from "@/api/estate/article";
+  import {getList, getDetail, add, update, remove,getArticleCount} from "@/api/estate/article";
   import {mapGetters} from "vuex";
 
   export default {
     data() {
       return {
+        ArticleCount:{
+          span:6,
+          data: [
+            {
+              title: '今日浏览量',
+              count: 0,
+              icon: 'el-icon-view',
+              color: 'rgb(49, 180, 141)',
+            },
+            {
+              title: '本周浏览量',
+              count: 0,
+              icon: 'el-icon-view',
+              color: 'rgb(56, 161, 242)',
+            },
+            {
+              title: '本月浏览量',
+              count: 0,
+              icon: 'el-icon-view',
+              color: 'rgb(117, 56, 199)',
+            },
+            {
+              title: '今年浏览量',
+              count: 0,
+              icon: 'el-icon-view',
+              color: 'rgb(143,119,0)',
+            },
+          ]
+        },
         form: {},
         query: {},
         loading: true,
@@ -284,6 +320,13 @@
       },
       onLoad(page, params = {}) {
         this.loading = true;
+        getArticleCount().then(res=>{
+          console.log(res,"打印res")
+          this.ArticleCount.data[0].count = res.data.dayCount;
+          this.ArticleCount.data[1].count = res.data.weekCount;
+          this.ArticleCount.data[2].count = res.data.monthCount;
+          this.ArticleCount.data[3].count = res.data.yearCount;
+        });
         getList(page.currentPage, page.pageSize, Object.assign(params, this.query)).then(res => {
           const data = res.data.data;
           this.page.total = data.total;