dy-admin-manager/src/views/main/baseinfo/index.vue

<template>
  <div class="container">
    <save-form inline :model="search" @submit="FetchDetail" @reset="reset" saveKey="/main/main/baseInfo">
      <!-- <el-form-item prop="year">
        <el-date-picker
          v-model="search.dates"
          type="daterange"
          align="right"
          unlink-panels
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :picker-options="pickerOptions">
        </el-date-picker>
      </el-form-item> -->
      <el-form-item prop="organId">
        <el-select
          clearable
          filterable
          placeholder="请选择分部"
          v-model="search.organId"
        >
          <el-option v-for="(item,index) in selects.branchs"
            :key="index"
            :label="item.name"
            :value="item.id"></el-option>
        </el-select>
      </el-form-item>
      <el-button native-type="submit" type="primary">搜索</el-button>
      <el-button native-type="reset" type="danger">重置</el-button>
    </save-form>
    <!-- <el-alert type="info" :closable="false" style="margin-bottom: 20px;">
      每日0点更新前一日数据
    </el-alert> -->
    <!-- 这里显示选项卡 -->
    <empty desc="暂无统计数据" v-if="isEmpty"/>
    <el-row v-else class="rows" :gutter="20">
      <el-col :xs="24" :sm="24" :md="24" :xl="9">
        <studentbaseinfo :data="dataInfo" />
      </el-col>
      <el-col :xs="24" :sm="24" :md="24" :xl="6">
          <operate :data="dataInfo"/>
      </el-col>
      <el-col :xs="24" :sm="24" :md="24" :xl="9">
        <hrdata :data="dataInfo"/>
      </el-col>
        <el-col :xs="24" :sm="24" :md="24" :xl="12">
        <surplusCourse :data="dataInfo"/>
      </el-col>
        <el-col :xs="24" :sm="24" :md="24" :xl="12">
        <useCourse :data="dataInfo"/>
      </el-col>
      <el-col :xs="24" :sm="24" :md="24" :xl="12">
        <management :data="dataInfo"/>
      </el-col>
      <el-col :xs="24" :sm="24" :md="24" :xl="12">
        <business :data="dataInfo"/>
      </el-col>
      <el-col :xs="24" :sm="24" :md="24" :xl="12">
        <curriculum :data="dataInfo"/>
      </el-col>
       <el-col :xs="24" :sm="24" :md="24" :xl="12">
        <student :data="dataInfo"/>
      </el-col>
      <!-- <el-col :xs="24" :sm="24" :md="12">
        <operate :data="dataInfo"/>
      </el-col> -->
      <!-- <el-col :xs="24" :sm="24" :md="12">
        <hrdata :data="dataInfo"/>
      </el-col> -->
    </el-row>
  </div>
</template>
<script>
import { getIndex } from '../api'
import operate from './operate'
import business from './business'
import management from './management'
import hrdata from './hr'
import student from './student'
import curriculum from './curriculum'
import studentbaseinfo from './studentBaseinfo'
import surplusCourse from './surplusCourse'
import useCourse from './useCourse'
import { getTimes } from '@/utils'
import { descs } from '../constant'


const getInitDate = () => {
  const end = new Date();
  const start = new Date();
  end.setTime(end.getTime() - 3600 * 1000 * 24 * 1);
  start.setTime(start.getTime() - 3600 * 1000 * 24 * 8);
  return [start, end]
}
export default {
  components: {
    operate,
    business,
    management,
    hrdata,
    student,
    curriculum,
    studentbaseinfo,
    surplusCourse,
    useCourse
  },
  data () {
    return {
      pickerOptions: {
        disabledDate: a => {
          const { dayjs } = this.$helpers
          return dayjs(a).isAfter(dayjs().subtract(1, 'day'))
        },
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            end.setTime(end.getTime() - 3600 * 1000 * 24 * 1);
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 8);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            end.setTime(end.getTime() - 3600 * 1000 * 24 * 1);
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 31);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            end.setTime(end.getTime() - 3600 * 1000 * 24 * 1);
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 91);
            picker.$emit('pick', [start, end]);
          }
        }]
      },
      search: {
        dates: [],
        organId: null
      },
      dataInfo: {},
      business: {},
    }
  },
  computed: {
    isEmpty() {
      return !Object.keys(this.dataInfo).length
    }
  },
  created(){
    this.$set(this.search, 'dates', getInitDate())
  },
  mounted () {
    this.FetchDetail()
     this.reset()
    this.$store.dispatch('setBranchs')
  },
  methods: {
    reset() {
      this.$set(this.search, 'dates', getInitDate())
      this.$set(this.search, 'organId', null)
      this.FetchDetail()
    },
    async FetchDetail() {
      const data = {}
      try {
        const {dates, ...rest} = this.search
        const res = await getIndex({
          ...rest,
          ...getTimes(dates, ['startDate', 'endDate'])
        })
        for (const item of res.data) {
          data[item.dataType] = {
            ...item,
            desc: descs[item.dataType]
          }
        }
      } catch (error) {
        console.log(error)
      }
      this.dataInfo = data
    },
  }
}
</script>
<style lang="less" scoped>
  .container{
    overflow: hidden;
    .rows{
      >div{
        margin-bottom: 20px;
      }
    }
    /deep/ .el-card__body .statistic {
      margin-bottom: 15px;
      padding: 0;
    }
  }
  /deep/.el-card__header{
    padding: 0 20px!important
  }
</style>
<style lang="scss">
  .box {
  display: flex;
  flex-direction: row;
  align-items: center;
  height: 55px; line-height: 55px;
  .shape {
      margin-right: 10px;
      height: 18px;
      width: 4px;
      background-color: #14928a;
}
}
</style>