wt_project_web_bak/src/views/dash/compoents/data_show.vue

<template>
  <div class="full-width flex flex-col full-height" v-if="data">
    <div class="flex flex-center flex-justify-between">
      <span class="bold font-16">{{
        data.dept ? data.dept.deptName : ''
      }}</span>
      <span class="font-13 grey-9">数据统计时间：{{ date }}</span>
    </div>
    <div
      class="flex flex-center flex-justify-between mb-15 ml-20"
      style="margin-top: 50px"
    >
      <div class="flex flex-col flex-center">
        <span class="bold">全部项目数</span>
        <span class="mt-15 font-34 main-color"
          >{{ data.projectCount }}<span class="font-13 black"> 个</span></span
        >
      </div>
      <div class="flex flex-col flex-center">
        <span class="bold">全部报告数</span>
        <span class="mt-15 font-34 main-color"
          >{{ data.fileCount }}<span class="font-13 black"> 篇</span></span
        >
      </div>
      <div class="flex flex-col flex-center">
        <span class="bold">我的项目数</span>
        <span class="mt-15 font-34 main-color"
          >{{ data.myProjectCount }}<span class="font-13 black"> 个</span></span
        >
      </div>
      <div class="flex flex-col flex-center mr-20">
        <span class="bold">我的报告数</span>
        <span class="mt-15 font-34 main-color"
          >{{ data.myFileCount }}<span class="font-13 black"> 篇</span></span
        >
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'data_show',
  data() {
    return {
      data: {},
      date: ''
    }
  },
  created() {
    this.fetch()
    // 获取当前日期
    const date = new Date()
    let nowMonth = date.getMonth() + 1
    let strDate = date.getDate()
    const seperator = '-'
    if (nowMonth >= 1 && nowMonth <= 9) {
      nowMonth = '0' + nowMonth
    }
    if (strDate >= 0 && strDate <= 9) {
      strDate = '0' + strDate
    }
    this.date = date.getFullYear() + seperator + nowMonth + seperator + strDate
  },
  methods: {
    fetch() {
      this.$api.dash.dash().then(res => {
        if (res.code === 200) {
          this.data = res.data
        }
      })
    }
  }
}
</script>

<style scoped></style>