up

src/api/report/visit.js

@@ -64,3 +64,12 @@ export function detailRpt(params) {
   })
 }
 
+export function teamtotalRpt(params) {
+  return request({
+    url: '/api/admin/chart/team-total',
+    method: 'get',
+    params: params
+  })
+}
+
+

src/views/report/visit/teamRpt.vue

@@ -0,0 +1,147 @@
+<template>
+  <div class="container">
+    <!-- 查询配置 -->
+    <div style="padding: 0px 20px">
+      <div ref="lxHeader">
+        <LxHeader icon="md-apps" text="团队统计报表" style="margin-bottom: 10px; border: 0px; margin-top: 15px">
+          <div slot="content"></div>
+          <slot>
+            <div>
+              <el-date-picker
+                    v-model="searchFields.year"
+                    type="year"
+                    value-format="yyyy"
+                    placeholder="选择年份">
+              </el-date-picker>
+
+              <Button type="primary" @click="load" style="margin-left: 10px">查询</Button>
+              <Button type="primary" @click="viewPart" style="margin-left: 10px">{{btnText}}</Button>
+              <Button type="primary" style="margin-left: 10px" @click="handleGo">导出</Button>
+            </div>
+          </slot>
+        </LxHeader>
+      </div>
+      <div class="table-tree" v-if="showData">
+        <el-table :data="tableData" :height="tableHeight" class="v-table" style="width: 100%">
+          <el-table-column type="index" align="center">
+          </el-table-column>
+          <el-table-column prop="month" label="月份" sortable width="180">
+          </el-table-column>
+          <el-table-column prop="total" label="团队预约数" sortable>
+          </el-table-column>
+          <el-table-column prop="use_total" label="团队核销数" sortable>
+          </el-table-column>
+        </el-table>
+      </div>
+      <div v-else>
+        <line-chart :chartData="rptData" :height="chartHeight"/>
+      </div>
+    </div>
+
+  </div>
+</template>
+<script>
+  import LxHeader from "@/components/LxHeader/index.vue";
+  import LineChart from '../components/LineChart'
+  import { ElMapExportTable } from "table-excel";
+  // import {export_json_to_excel} from '@/Excel/Export2Excel';
+  import {
+    teamtotalRpt
+  } from "@/api/report/visit.js";
+  export default {
+    components: {
+      LxHeader,
+      LineChart
+    },
+    created() {
+      this.initLoad()
+      this.load()
+    },
+    mounted() {},
+    data() {
+      return {
+        showData: false,
+        searchFields: {
+          year:""
+        },
+        tableData: [],
+        tableHeight: 0,
+        chartHeight:"",
+        btnText:"数据展示",
+        rptData: {
+          xArr:[],
+          series:{},
+          legendArr:["预约人数","入场人数"]
+        }
+      }
+    },
+    methods: {
+      /** 导出按钮操作 */
+      handleGo(){
+        var data = this.tableData; // 这里面是数据列表
+        const column = [
+          { title: "月份", dataIndex: "month" }, // dataIndex为数据列表中的数据字段
+          { title: "团队预约数", dataIndex: "total" },
+          { title: "团队核销数", dataIndex: "use_total" },
+        ];
+        const instance = new ElMapExportTable(
+          { column, data },
+          { progress: progress => console.log(progress) }// 进度条回调
+        );
+        instance.download("团队年度统计报表"); // 导出的文件名
+      },
+      viewPart() {
+        this.showData = !this.showData;
+        this.btnText = this.showData ? "图表展示" : "数据展示"
+      },
+      initLoad() {
+        var that = this;
+        var clientHeight = document.documentElement.clientHeight
+        var lxHeader_height = 96.5; //查询 头部
+        var paginationHeight = 37; //分页的高度
+        var topHeight = 50; //页面 头部
+        let tableHeight = clientHeight - lxHeader_height - topHeight - paginationHeight - 20;
+        that.tableHeight = tableHeight;
+        that.chartHeight = tableHeight+"px"
+
+      },
+      load() {
+        // this.showData = true;
+        var xarr = [];
+        var planarr=[];
+        var usearr=[];
+        teamtotalRpt({
+          year:this.searchFields.year
+        }).then((res) => {
+          for (var m of res) {
+            m.month =  m.month;
+            xarr.push(m.month);
+            planarr.push(
+              m.total
+            )
+            usearr.push(
+              m.use_total
+            )
+          }
+
+          this.rptData.xArr = xarr;
+          this.rptData.series=[
+            {
+              name:"团队预约数",
+              type: 'bar',
+              data:planarr
+            },
+            {
+              name:"团队核销数",
+              type: 'bar',
+              data:usearr
+            }
+
+          ]
+          this.tableData = res;
+        }).catch((res) => {})
+      }
+
+    }
+  };
+</script>