完成统计报表

src/apis/statistics0.js

@@ -19,3 +19,9 @@ export const remove = (id) => {
     url: `/cms/storage/remove/${id}`
   })
 }
+// 获取报表
+export const getReport = () => {
+  return axios({
+    url: '/cms/report/get'
+  })
+}

src/views/statistics/statistics1.vue

@@ -41,43 +41,63 @@
         </div>
         <!-- 图表 -->
         <div class="towRow">
-          <div class="single" v-for="(item,index) in butList" :key="index" v-show="item.sec">
-                          <!-- 图表盒子 -->
-              <div class="echarts" :class="item.calss"></div>
-
+          <div
+            class="single"
+            v-for="(item, index) in butList"
+            :key="index"
+            v-show="item.sec"
+          >
+            <!-- 图表盒子 -->
+            <div class="echarts" :class="item.calss"></div>
             <div class="single_title">
               <!-- 导出按钮 -->
               <div class="export">
-                <el-button>导 出</el-button>
+                <download-excel
+                  class="export-excel-wrapper"
+                  :data="item.data"
+                  :fields="item.fields"
+                  :name="item.name+'.xls'"
+                >
+                  <!-- 上面可以自定义自己的样式，还可以引用其他组件button -->
+                  <el-button>导出</el-button>
+                </download-excel>
               </div>
               <div class="title_left">
-                <p>{{item.name}}分布</p>
+                <p>{{ item.name }}分布</p>
                 <span>每日0：00刷新</span>
               </div>
             </div>
           </div>
         </div>
         <!-- 表格 -->
-          <div class="table">
-            <div class="title">藏品报表</div>
-            <el-table
-              :header-cell-style="{ background: '#fafafa', color: '#000' }"
-              :data="tableData"
-              border
-              style="width: 100%"
-            >
-              <el-table-column prop="name" label="文物类别">
-              </el-table-column>
-              <el-table-column prop="num" label="数量">
-              </el-table-column>
-            </el-table>
-          </div>
+        <div class="table">
+          <div class="title">藏品报表</div>
+          <el-table
+            :header-cell-style="{ background: '#fafafa', color: '#000' }"
+            :data="tableData"
+            border
+            style="width: 100%"
+          >
+            <el-table-column prop="name" label="文物类别">
+              <template #default="{ row }">
+                {{ row.name }}
+              </template>
+            </el-table-column>
+            <el-table-column prop="amount" label="数量"> </el-table-column>
+            <el-table-column prop="percent" label="占比">
+              <template #default="{ row }">
+                {{ Number(row.percent * 100).toFixed(1) + "%" }}
+              </template>
+            </el-table-column>
+          </el-table>
+        </div>
       </div>
     </div>
   </div>
 </template>
 
 <script>
+import { getReport } from '../../apis/statistics0'
 // ---------------------echarts
 import * as echarts from 'echarts/core'
 import { TooltipComponent } from 'echarts/components'
@@ -93,49 +113,45 @@ export default {
   data () {
     // 这里存放数据
     return {
+      json_meta: [
+        [
+          {
+            ' key ': ' charset ',
+            ' value ': ' utf- 8 '
+          }
+        ]
+      ],
       // 表格数据
-      tableData: [{ name: '陶瓷', num: '100' }, { name: '青铜', num: '90' }, { name: '铁', num: '80' }],
+      tableData: [],
       // 图表数据
       butList: [
         {
+          fields: { 文物类别和占比: 'name', 数量: 'amount' },
           name: '文物类别',
           sec: true,
           calss: 'wenwu',
-          data: [
-            { value: 1048, name: '陶瓷 10.00%' },
-            { value: 735, name: '青铜 10.00%' },
-            { value: 580, name: '铁 10.00%' }
-          ]
+          data: []
         },
         {
+          fields: { 藏品级别和占比: 'name', 数量: 'amount' },
           name: '藏品级别',
           sec: true,
           calss: 'jibie',
-          data: [
-            { value: 1048, name: '仿制 10.00%' },
-            { value: 735, name: '修复 10.00%' },
-            { value: 580, name: '损坏 10.00%' }
-          ]
+          data: []
         },
         {
+          fields: { 藏品来源和占比: 'name', 数量: 'amount' },
           name: '藏品来源',
           sec: true,
           calss: 'laiyuan',
-          data: [
-            { value: 1048, name: '陶瓷2 10.00%' },
-            { value: 735, name: '青铜2 10.00%' },
-            { value: 580, name: '铁2 10.00%' }
-          ]
+          data: []
         },
         {
+          fields: { 入馆类型和占比: 'name', 数量: 'amount' },
           name: '入馆类型',
           sec: true,
           calss: 'leixing',
-          data: [
-            { value: 1048, name: '仿制2 10.00%' },
-            { value: 735, name: '修复2 10.00%' },
-            { value: 580, name: '损坏2 10.00%' }
-          ]
+          data: []
         }
       ]
     }
@@ -176,12 +192,46 @@ export default {
   // 生命周期 - 创建完成（可以访问当前this实例）
   created () {},
   // 生命周期 - 挂载完成（可以访问DOM元素）
-  mounted () {
+  async mounted () {
+    const res = await getReport()
+    // console.log(999, res)
+    // 文物类别数据处理
+    const temp1 = res.data.goodsType
+    this.tableData = JSON.parse(JSON.stringify(temp1))
+    temp1.forEach((v) => {
+      v.value = v.amount
+      v.name += Number(v.percent * 100).toFixed(1) + '%'
+    })
+    this.butList[0].data = temp1
+    // 藏品级别分布
+    const temp2 = res.data.goodsLevel
+    temp2.forEach((v) => {
+      v.value = v.amount
+      v.name = this.myWwjb(v.typeId)
+      v.name += Number(v.percent * 100).toFixed(1) + '%'
+    })
+    this.butList[1].data = temp2
+    // 藏品来源数据处理
+    const temp3 = res.data.goodsSource
+    temp3.forEach((v) => {
+      v.value = v.amount
+      v.name += Number(v.percent * 100).toFixed(1) + '%'
+    })
+    this.butList[2].data = temp3
+    // 入馆类型数据处理
+    const temp4 = res.data.goodsStorage
+    temp4.forEach((v) => {
+      v.value = v.amount
+      if (v.typeId === 1) v.name = '藏品'
+      else if (v.typeId === 0) v.name = '征集品'
+      v.name += Number(v.percent * 100).toFixed(1) + '%'
+    })
+    this.butList[3].data = temp4
     // ---------------------echarts
-    this.echartsFu('.wenwu', this.butList[0].data)
-    this.echartsFu('.jibie', this.butList[1].data)
-    this.echartsFu('.laiyuan', this.butList[2].data)
-    this.echartsFu('.leixing', this.butList[3].data)
+    this.echartsFu('.wenwu', temp1)
+    this.echartsFu('.jibie', temp2)
+    this.echartsFu('.laiyuan', temp3)
+    this.echartsFu('.leixing', temp4)
     setTimeout(() => {
       this.butList[2].sec = this.butList[3].sec = false
     }, 100)
@@ -198,6 +248,10 @@ export default {
 <style lang='less' scoped>
 //@import url(); 引入公共css类
 .statistics1 {
+  /deep/.el-table__body-wrapper {
+    max-height: 242px;
+    overflow-y: auto;
+  }
   /deep/#mytitle > span {
     font-weight: 800;
   }
@@ -285,19 +339,19 @@ export default {
             }
           }
         }
-          .echarts{
-            position: absolute;
-            left: 50%;
-            top: 50%;
-            transform: translate(-50%,-50%);
-            width: 65%;
-            height: 90%;
-          }
+        .echarts {
+          position: absolute;
+          left: 50%;
+          top: 50%;
+          transform: translate(-50%, -50%);
+          width: 65%;
+          height: 90%;
+        }
       }
     }
-    .table{
+    .table {
       background-color: #fff;
-      .title{
+      .title {
         height: 50px;
         display: flex;
         align-items: center;