boss/pages/main/index/data.vue

<template>
<div style="padding: 20px">
    <div style="padding-bottom: 20px">
      <el-tag @click="getData_(0,'全部数据')">全部数据</el-tag>
      <el-tag @click="getData_(1,'实名认证')" type="info">实名认证</el-tag>
      <el-tag @click="getData_(2,'技术认证')" type="info">技术认证</el-tag>
      <el-tag @click="getData_(3,'注册用户')" type="info">注册用户</el-tag>
      <el-tag @click="getData_(4,'签约数量')" type="info">签约数量</el-tag>
      <el-tag @click="getData_(5,'云端数量')" type="info">云端数量</el-tag>
      <el-tag @click="getData_(7,'雇佣数量')" type="info">雇佣数量</el-tag>
      <el-tag @click="getData_(6,'整包数量')" type="info">整包数量</el-tag>
    </div>

  <div style="padding-bottom: 20px">
    <el-select v-model="time_type" placeholder="请选择">
      <el-option
        v-for="item in time_type_data"
        :key="item.value"
        :label="item.label"
        :value="item.value">
      </el-option>
    </el-select>
    <el-date-picker
      v-if="time_type==1"
      v-model="date"
      type="daterange"
      style="width: 400px"
      range-separator="至"
      start-placeholder="开始日期"
      end-placeholder="结束日期">
    </el-date-picker>

    <el-date-picker
      v-if="time_type==2"
      v-model="month"
      style="width: 400px"
      type="monthrange"
      range-separator="至"
      start-placeholder="开始月份"
      end-placeholder="结束月份">
    </el-date-picker>

    <el-button @click="search" type="primary">查询</el-button>
  </div>

  <el-row>
    <el-col :span="24">
      <div class="grid-content bg-purple">
        <Line-Chart :source="source" :title="title" :width="1200" :height="400"></Line-Chart>
      </div>
    </el-col>
  </el-row>


  <el-table
    :data="source.rows"
    :default-sort = "{prop: 'date', order: 'descending'}"
    style="width: 100%">
    <el-table-column
      prop="date"
      label="日期">
      <template slot-scope="scope">
        {{scope.row}}
      </template>
    </el-table-column>
    <el-table-column
      v-for="(value, index) in source.data"
      :label="value.title">
      <template slot-scope="scope">
        {{source.data[index].data[source.rows.length-scope.$index-1]}}
      </template>
    </el-table-column>
  </el-table>

</div>
</template>

<script>
import LineChart from "@/components/Echart/line"
let firstDayOfThisMonth = new Date();
firstDayOfThisMonth.setDate(1);
firstDayOfThisMonth.setHours(0);
firstDayOfThisMonth.setMinutes(0);
firstDayOfThisMonth.setSeconds(0);
const startMonth = new Date();
startMonth.setMonth(startMonth.getMonth() - 12);
export default {
    inheritAttrs: false,
    components: {
        LineChart
    },
    props: [],
    data() {
        return {
            title: "实名认证数据面板",
            source: {
                rows: [],
                data: []
            },
            time_type_data: [{
              value: '1',
              label: '按日'
            }, {
              value: '2',
              label: '按月'
            }],
            time_type: '1',
            date:[firstDayOfThisMonth, new Date()],
            month:[startMonth,firstDayOfThisMonth],
            type:"0",
        };
    },
    computed: {},
    watch: {},
    created() {},
     mounted() {
        this.getData_(0,"全部数据");
    },
    methods: {
      async search()
      {
        this.getData_(this.type,this.title)
      },
      async getData_(type,title) {
        this.title=title;

        let url="";
        if(type==1)
        {
          url="/uapi/data/day/real_card";
        }
        else if(type==0)
        {
          url="/uapi/data/day/all";
        }
        else if(type==2)
        {
          url="/uapi/data/day/freework_level";
        }
        else if(type==3)
        {
          url="/uapi/data/day/user_register";
        }
        else if(type==4)
        {
          url="/uapi/data/day/user_sign";
        }
        else if(type==5)
        {
          url="/uapi/data/day/job?job_form_type=2";
        }
        else if(type==7)
        {
          url="/uapi/data/day/job?job_form_type=1";
        }
        else if(type==6)
        {
          url="/uapi/data/day/project";
        }

        let stime="";
        let etime="";
        if(this.time_type==1)
        {
          stime=this.formatDate(this.date[0]/1000);
          etime=this.formatDate(this.date[1]/1000);
        }
        else
        {
          stime=this.formatDate(this.month[0]/1000);
          etime=this.formatDate(this.month[1]/1000);
        }

        let res = await this.$post(url,{time_type:this.time_type,stime:stime,etime:etime});
        if(res.status==1)
        {
          this.source = {
            rows: res.data.day,
            data: res.data.data,
          }
        }
      },
      formatDate(time) {
        if (time === "0") {
          return "--";
        }
        let now = new Date(time * 1000);
        let year = now.getFullYear();
        let month = now.getMonth() + 1;
        let date = now.getDate();
        let hour = now.getHours();
        let minute = now.getMinutes();
        let second = now.getSeconds();

        if (date < 10) {
          date = "0" + date;
        }

        if (month < 10) {
          month = "0" + month;
        }

        if (hour < 10) {
          hour = "0" + hour;
        }
        if (minute < 10) {
          minute = "0" + minute;
        }
        if (second < 10) {
          second = "0" + second;
        }
        return (
          year +
          "-" +
          month +
          "-" +
          date +
          " " +
          hour +
          ":" +
          minute +
          ":" +
          second
        );
      },
    }
};
</script>


<style scoped>
  .el-tag{cursor: pointer}
</style>