KindergartenUI/src/views/system/Statisticspark/index.vue

<template>
  <div class="app-container">
    <el-form size="small" :inline="true" v-show="showSearch">
      <el-form-item label="所属区县" prop="orderStatus" label-width="80px">
        <treeselect
          :normalizer="normalizer"
          :options="areaList"
          placeholder="请选择所属区县"
          v-model="areaCode2"
          style="width: 230px"
        />
      </el-form-item>
    </el-form>
    <kindergarlog @kinbatlist="kinbatlist" style="width: 500px; display: inline;" ref="kinresets"></kindergarlog>
    <el-form size="small" :inline="true" v-show="showSearch">
      <el-form-item label="日期" prop="orderStatus" label-width="60px">
        <el-date-picker
          v-model="valuetime"
          type="daterange"
          align="right"
          @change="monthStartEndTimechange"
          unlink-panels
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :picker-options="pickerOptions"
        ></el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="getlist">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>
    <el-table v-loading="loading" :data="list">
      <el-table-column label="幼儿园名称" align="center" prop="kindergartenName"></el-table-column>
      <el-table-column label="登录次数" align="center" prop="loginCount" />
      <el-table-column label="运动处方查看次数" align="center" prop="prescriptionCount" />
      <el-table-column label="处方视频查看次数" align="center" prop="prescriptionVideoCount" />
    </el-table>
    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="pageNum"
      :limit.sync="pageSize"
      @pagination="getlist"
    />
  </div>
</template>
<script>
import { appletKindergartenCount } from "@/api/system/Statisticspark";
import { listArea } from "@/api/system/area.js";
import kindergarlog from "../../assembly/kindergarlog.vue";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
export default {
  name: "Statisticspark",
  components: { kindergarlog, Treeselect },
  data() {
    return {
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            }
          }
        ]
      },
      valuetime: "",
      loading: false,
      showSearch: true, // 显示搜索条件
      pageNum: 1,
      pageSize: 10,
      startDate: "",
      endDate: "",
      list: [],
      total: 0,
      areaCode: "",
      areaCode2: null,
      kindergartenId: "",
      areaList: []
    };
  },
  created() {
    this.areainfo();
    this.newtime();
    this.getlist();
  },
  mounted() {},
  methods: {
    //幼儿园传值
    kinbatlist(e) {
      this.kindergartenId = e;
    },
    //获取list
    getlist() {
      if (this.areaCode2) {
        this.areaCode = this.areaCode2;
      }
      appletKindergartenCount(
        this.pageNum,
        this.pageSize,
        this.areaCode,
        this.kindergartenId,
        this.startDate,
        this.endDate
      ).then(res => {
        this.list = res.rows;
        this.total = res.total;
      });
    },
    //区县list
    areainfo() {
      listArea().then(response => {
        this.areaList = this.handleTree(response.data);
      });
    },
    //今天的时间
    newtime() {
      let nowDate = new Date();
      let dates = {
        year: nowDate.getFullYear(), // 获取当前年份
        month: nowDate.getMonth() + 1, //获取当前月份
        date: nowDate.getDate() //获取当前日期
      };
      // //拼接
      if (dates.month < 10) {
        this.startDate = dates.year + "-0" + dates.month;
        this.endDate = dates.year + "-0" + dates.month;
      } else {
        this.startDate = dates.year + "." + dates.month;
        this.endDate = dates.year + "-" + dates.month;
      }
      if (dates.date < 10) {
        this.startDate = this.startDate + "-0" + dates.date;
        this.endDate = this.endDate + "-0" + dates.date;
      } else {
        this.startDate = this.startDate + "-" + dates.date;
        this.endDate = this.endDate + "-" + dates.date;
      }
    },
    //重置
    resetQuery() {
      this.newtime();
      this.areaCode = "";
      this.areaCode2 = null;
      this.valuetime = "";
      this.startDate = "";
      this.endDate = "";
      this.kindergartenId = "";
      this.$refs.kinresets.reset();
      this.newtime();
      this.getlist();
    },
    //选择时期区间
    monthStartEndTimechange(e) {
      this.startDate = this.formatDate(new Date(e[0]).getTime());
      this.endDate = this.formatDate(new Date(e[1]).getTime());
    },
    formatDate(time, timetype) {
      let date = new Date(time); //13位时间戳
      //let date = new Date(parseInt(time) * 1000); //10位时间戳
      let y = date.getFullYear();
      let MM = date.getMonth() + 1;
      MM = MM < 10 ? "0" + MM : MM;
      let d = date.getDate();
      d = d < 10 ? "0" + d : d;
      return y + "-" + MM + "-" + d;
    },
    normalizer(node) {
      if (node.children && !node.children.length) {
        delete node.children;
      }
      return {
        id: node.code,
        label: node.name,
        children: node.children
      };
    }
  }
};
</script>
<style lang='scss' scoped>
.app-container {
  padding: 20px 0 20px 10px;
}
::v-deep .el-card__header {
  border: none;
}
::v-deep .el-form {
  display: inline;
}
</style>