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

<template>
  <div class="container main">
    <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" :lg="12" :xl="8">
        <studentbaseinfo :data="dataInfo" />
      </el-col>
      <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="8">
        <operate :data="dataInfo" />
      </el-col>
      <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="8">
        <hrdata :data="dataInfo" />
      </el-col>
      <!-- <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
        <surplusCourse :data="dataInfo" />
      </el-col>
      <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
        <useCourse :data="dataInfo" />
      </el-col> -->
      <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
        <management
          ref="management"
          :data="dataInfo"
          :search="search"
          @resetDate="resetDate"
        />
      </el-col>
      <el-col
        :xs="24"
        :sm="24"
        :md="24"
        :lg="24"
        :xl="24"
        v-if="$helpers.tanentId == 1"
      >
        <business
          ref="business"
          :data="dataInfo"
          :search="search"
          @resetDate="resetDate"
        />
      </el-col>
      <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
        <curriculum
          :data="dataInfo"
          ref="curriculum"
          :search="search"
          @resetDate="resetDate"
        />
      </el-col>
      <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
        <student
          :data="dataInfo"
          ref="student"
          :search="search"
          @resetDate="resetDate"
        />
      </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";

export default {
  components: {
    operate,
    business,
    management,
    hrdata,
    student,
    curriculum,
    studentbaseinfo,
    surplusCourse,
    useCourse,
  },
  data() {
    return {
      pickerOptions: {
        firstDayOfWeek: 1,
        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: {},
      loading: false,
    };
  },
  computed: {
    isEmpty() {
      return !Object.keys(this.dataInfo).length;
    },
  },
  created() {},
  async mounted() {
    this.$set(this.search, "dates", this.getInitDate());
   await this.$store.dispatch("setBranchs");
    this.FetchDetail();
  },
  methods: {
    getInitDate() {
      const end = this.$helpers
        .dayjs(new Date())
        .subtract(1, "day")
        .format("YYYY-MM-DD");
      const start = this.$helpers
        .dayjs(new Date())
        .subtract(1, "day")
        .set("date", 1)
        .format("YYYY-MM-DD");
      return [start, end];
    },
    reset() {
      this.$set(this.search, "dates", this.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;
      if (this.$refs.business) {
        this.$refs["business"].init();
      }
      if (this.$refs.management) {
        this.$refs["management"].init();
      }
    },
    resetDate(data) {
      let arr = null;
      for (let item in data) {
        // console.log(item)
        if (item == "VIP_GROUP_COURSE") {
          arr = data[item].indexMonthData;
        }
        this.dataInfo[item] = data[item];
      }
      this.dataInfo = { ...this.dataInfo };
    },
  },
};
</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">
.main {
  .statistic {
    .statistic-content > span {
      font-size: 22px !important;
      &:first-child {
        font-size: 14px !important;
      }
    }
  }
}

.box {
  display: flex;
  flex-direction: row;
  align-items: center;
  height: 55px;
  line-height: 55px;
  .shape {
    margin-right: 10px;
    height: 18px;
    width: 4px;
    background-color: var(--color-primary);
  }
}
.wall {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  color: #888;
  font-size: 14px;
}
</style>