up

3 years ago · 2fb0b76aaa
parent 9800ae7fef
commit 2fb0b76aaa
2 changed files with 134 additions and 109 deletions
--- a/src/views/login/index.vue
+++ b/src/views/login/index.vue
@ -25,7 +25,7 @@
              <svg-icon icon-class="password" />
            </span>
            <el-input :key="passwordType" ref="password" v-model="loginForm.password" :type="passwordType"
-              placeholder="请输入密码" auto-complete="off" name="password" tabindex="2" auto-complete="off" @keyup.enter.native="handleLogin" />
+              placeholder="请输入密码" name="password" tabindex="2" auto-complete="off" @keyup.enter.native="handleLogin" />

          </el-form-item>

--- a/src/views/report/visit/periodRpt.vue
+++ b/src/views/report/visit/periodRpt.vue
@ -7,16 +7,12 @@
          <div slot="content"></div>
          <slot>
            <div>
-             <el-date-picker
-                   v-model="searchFields.date"
-                   value-format="yyyy-MM-dd"
-                   type="date"
-                   placeholder="选择日期">
-                 </el-date-picker>
+              <el-date-picker v-model="searchFields.date" value-format="yyyy-MM-dd" type="date" 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>
+              <Button type="primary" @click="viewPart" style="margin-left: 10px">{{btnText}}</Button>
+              <Button type="primary" style="margin-left: 10px" @click="handleGo">导出</Button>

            </div>
          </slot>
@ -31,17 +27,17 @@
          <el-table-column prop="plan_total" label="预约人数" sortable>
          </el-table-column>
          <el-table-column prop="use_total" label="入场人数" sortable>
-          </el-table-column>
-          <el-table-column prop="man_total" label="性别男" sortable>
-          </el-table-column>
-          <el-table-column prop="woman_total" label="性别女" sortable>
+          </el-table-column>
+          <el-table-column prop="man_total" label="性别男" sortable>
+          </el-table-column>
+          <el-table-column prop="woman_total" label="性别女" sortable>
          </el-table-column>
          <el-table-column prop="per" label="核销比" sortable>
          </el-table-column>
        </el-table>
      </div>
      <div v-else>
-        <line-chart :chartData="periodData" :height="chartHeight"/>
+        <line-chart :chartData="periodData" :height="chartHeight" />
      </div>
    </div>

@ -49,9 +45,11 @@
 </template>
 <script>
  import LxHeader from "@/components/LxHeader/index.vue";
-  import LineChart from '../components/LineChart'
-  import { ElMapExportTable } from "table-excel";
-  import {
+  import LineChart from '../components/LineChart'
+  import {
+    ElMapExportTable
+  } from "table-excel";
+  import {
    detailRpt
  } from "@/api/report/visit.js";
  export default {
@ -67,40 +65,60 @@
    data() {
      return {
        showData: false,
-        searchFields: {
-          date:"",
+        searchFields: {
+          date: "",
        },
        tableData: [],
-        tableHeight: 0,
-        chartHeight:"",
-        btnText:"数据展示",
-        periodData: {
-          xArr:[],
-          series:{},
-          legendArr:["预约人数","入场人数","男性人数","女性人数"]
+        tableHeight: 0,
+        chartHeight: "",
+        btnText: "数据展示",
+        periodData: {
+          xArr: [],
+          series: {},
+          legendArr: ["预约人数", "入场人数", "男性人数", "女性人数"]
        }
      }
    },
-    methods: {
-      /** 导出按钮操作 */
-      handleGo(){
-        var data = this.tableData; // 这里面是数据列表
-        const column = [
-          { title: "时段", dataIndex: "daterange" }, // dataIndex为数据列表中的数据字段
-          { title: "预约人数", dataIndex: "plan_total" },
-          { title: "入场人数", dataIndex: "use_total" },
-          { title: "性别男", dataIndex: "man_total" },
-          { title: "性别女", dataIndex: "woman_total" },
-          { title: "核销比", dataIndex: "per" },
-        ];
-        const instance = new ElMapExportTable(
-          { column, data },
-          { progress: progress => console.log(progress) }// 进度条回调
-        );
-        instance.download("时段统计报表"); // 导出的文件名
+    methods: {
+      /** 导出按钮操作 */
+      handleGo() {
+        var data = this.tableData; // 这里面是数据列表
+        const column = [{
+            title: "时段",
+            dataIndex: "daterange"
+          }, // dataIndex为数据列表中的数据字段
+          {
+            title: "预约人数",
+            dataIndex: "plan_total"
+          },
+          {
+            title: "入场人数",
+            dataIndex: "use_total"
+          },
+          {
+            title: "性别男",
+            dataIndex: "man_total"
+          },
+          {
+            title: "性别女",
+            dataIndex: "woman_total"
+          },
+          {
+            title: "核销比",
+            dataIndex: "per"
+          },
+        ];
+        const instance = new ElMapExportTable({
+            column,
+            data
+          }, {
+            progress: progress => console.log(progress)
+          } // 进度条回调
+        );
+        instance.download("时段统计报表"); // 导出的文件名
      },
      viewPart() {
-        this.showData = !this.showData;
+        this.showData = !this.showData;
        this.btnText = this.showData ? "图表展示" : "数据展示"
      },
      initLoad() {
@ -110,76 +128,83 @@
        var paginationHeight = 37; //分页的高度
        var topHeight = 50; //页面 头部
        let tableHeight = clientHeight - lxHeader_height - topHeight - paginationHeight - 20;
-        that.tableHeight = tableHeight;
-        that.chartHeight = tableHeight+"px";
-        this.searchFields.date = this.getToday();
+        that.tableHeight = tableHeight;
+        that.chartHeight = tableHeight + "px";
+        this.searchFields.date = this.getToday();

      },
      load() {
-        // this.showData = true;
-        var planarr=[];
-        var xArr=[];
-        var usearr=[];
-        var manarr = [];
-        var womanarr = [];
+        // this.showData = true;
+        var planarr = [];
+        var xArr = [];
+        var usearr = [];
+        var manarr = [];
+        var womanarr = [];
+
+        detailRpt({
+          date: this.searchFields.date
+        }).then((res) => {
+          console.log(res)
+          var _res = [];
+          Object.keys(res).map((key, item) => {
+            _res.push(res[key])
+          });
+          for (var m of _res) {
+            console.log(m)
+            m.per = ((m.use_total / (m.plan_total == 0 ? 1 : m.plan_total)) * 100).toFixed(2) + "%"
+            m.daterange = m.time;
+            xArr.push(m.daterange);
+            planarr.push(
+              m.plan_total
+            )
+            usearr.push(
+              m.use_total
+            )
+            manarr.push(
+              m.man_total
+            )
+            womanarr.push(
+              m.woman_total
+            )

-        detailRpt({
-          date:this.searchFields.date
-        }).then((res) => {
-          for (var m of res) {
-            m.per = ((m.use_total / (m.plan_total == 0 ? 1 : m.plan_total)) * 100).toFixed(2) + "%"
-            m.daterange =  m.start_time+"-"+m.end_time;
-            xArr.push(m.daterange);
-            planarr.push(
-              m.plan_total
-            )
-            usearr.push(
-              m.use_total
-            )
-            manarr.push(
-              m.man_total
-            )
-            womanarr.push(
-              m.woman_total
-            )
-
-          }
-          this.periodData.xArr = xArr;
-          this.periodData.series=[
-            {
-              name:"预约人数",
-              type: 'bar',
-              data:planarr
-            },
-            {
-              name:"入场人数",
-              type: 'bar',
-              data:usearr
-            },
-            {
-              name:"男性人数",
-              type: 'bar',
-              data:manarr
-            },
-            {
-              name:"女性人数",
-              type: 'bar',
-              data:womanarr
-            },
-          ]
-
-          this.tableData = res
+          }
+          this.periodData.xArr = xArr;
+          this.periodData.series = [{
+              name: "预约人数",
+              type: 'bar',
+              data: planarr
+            },
+            {
+              name: "入场人数",
+              type: 'bar',
+              data: usearr
+            },
+            {
+              name: "男性人数",
+              type: 'bar',
+              data: manarr
+            },
+            {
+              name: "女性人数",
+              type: 'bar',
+              data: womanarr
+            },
+          ]

-        }).catch((res) => {})
-      },
-      getToday(){
-        let date =new Date()
-        var y = date.getFullYear();
-        var m = date.getMonth()+1;
-              m = m <10?'0'+ m : m;
-        var d = date.getDate();
-              d = d <10?'0'+ d : d;
-        return y +'-'+ m +'-'+ d;
+          this.tableData = _res
+
+        }).catch((res) => {
+          console.log(res)
+        })
+      },
+      getToday() {
+        let date = new Date()
+        var y = date.getFullYear();
+        var m = date.getMonth() + 1;
+        m = m < 10 ? '0' + m : m;
+        var d = date.getDate();
+        d = d < 10 ? '0' + d : d;
+        return y + '-' + m + '-' + d;
      },

    }