thoth-frontend-test/src/views/workbench/components/statisticsSection.vue

<template>
  <div class="drawer-statistics" :class="{'drawer-padding': show}">
    <transition name="fade-drawer">
      <div v-show="show" class="statistics">
        <div class="statistics-data">
          <h2>{{ title }}统计</h2>
          <div class="data-main">
            <div class="data-item">
              <label>交付已延期</label>
              <div class="number">1</div>
            </div>
            <div class="data-item" />
            <div class="data-item" />
            <div class="data-item" />
            <div class="data-item" />
            <div class="data-item" />
          </div>
        </div>
        <div v-if="title !=='缺陷'" class="statistics-chart">
          <h2>未上线{{ title }}状态分布</h2>
          <div class="chart-contain">
            <normal-echart v-if="echartsOption" :chart-id="type+title" :option="echartsOption" />
          </div>
        </div>
        <div v-if="title ==='缺陷'" class="statistics-chart">
          <div class="two-title">
            <h2>我提报的-未完成缺陷状态分布</h2>
            <h2>提给我的-未完成缺陷状态分布</h2>
          </div>
          <div class="two-chart-contain">
            <div class="chart-contain">
              <normal-echart v-if="echartsOption" :chart-id="type+title+'1'" :option="echartsOption" />
            </div>
            <div class="chart-contain">
              <normal-echart v-if="echartsOption" :chart-id="type+title+'2'" :option="echartsOption2" />
            </div>
          </div>
        </div>
      </div>
    </transition>
    <div v-show="show" class="drawer" @click="show = !show">
      <i class="el-icon-arrow-up" />
    </div>
    <div v-show="!show" class="drawer drawer-pull" @click="show = !show">
      <i class="el-icon-arrow-down" />
    </div>
  </div>
</template>

<script>
import normalEchart from '@/components/chart/normalEchart'
export default {
  name: 'StatisticsSectionVue',
  components: { normalEchart },
  props: {
    searchForm: { // 搜索项的信息
      type: Object,
      default: () => {
        return {
          teamId: null,
          bizId: null
        }
      },
      required: true
    },
    type: { // 个人还是团队
      type: String,
      default: 'person',
      required: false
    },
    title: {
      type: String,
      default: '需求',
      required: false
    },
    requestObj: { // 请求的接口
      type: Object,
      default: () => null,
      required: false
    }
  },
  data() {
    return {
      show: true,
      echartsOption: null,
      echartsOption2: null,
      tips: {
        '需求': [
          '交付日期为今天，且状态仍未变更为“已上线”的需求数量。',
          '已过交付日期，状态仍未变更为“已上线”的需求数量。',
          '交付日期在本周内的需求数量。',
          '交付日期在本周，且状态仍未变更为“已上线”的需求数量。',
          '交付日期在下周的需求数量。'
        ],
        '任务': [
          '交付日期为今天，且状态仍未变更为“已上线”的任务数量。',
          '已过交付日期，状态仍未变更为“已上线”的任务数量。',
          '交付日期在本周内的任务数量。',
          '交付日期在本周，且状态仍未变更为“已上线”的任务数量。',
          '交付日期在下周任务数量。'
        ]
      }
    }
  },
  watch: {
    searchForm: {
      handler(newV) {

      },
      deep: true
    }
  },
  methods: {
    initData() {
      if (this.requestObj) {
        const { requestData, requestChart } = this.requestObj
        this.getData(requestData)
        this.getChart(requestChart)
      }
    },
    async getData(requestUrl) {
      const res = await requestUrl()
    },
    async getChart(requestUrl) {
      const res = await requestUrl()
    },
    changeData() {
      this.$emit('change', this.title)
    }
  }
}
</script>

<style scoped lang="scss">
.drawer-statistics {
  position: relative;
  width: 100%;
  padding-bottom: 1px;
}
.drawer-padding {
  padding-bottom: 14px;
}
//.fade-drawer-enter-active {
//  transition: all 1.5s ease
//}
//.fade-drawer-leave-active {s
//  transition: all 1.5s ease
//}
//.fade-drawer-enter, .fade-drawer-leave-to {
//  transition: all 1.5s ease;
//}
.statistics {
  position: relative;
  width: 100%;
  height: 474px;
  padding: 27px 35px;
  display: grid;
  grid-template-columns: repeat(2,50%);
  h2 {
    color: #333333;
    font-size: 16px;
    margin-bottom: 20px;
    font-weight: bold;
  }
}
.statistics-data {
  .data-main{
    width: 80%;
    display: grid;
    grid-template-columns: repeat(2,188px);
    grid-column-gap: 30px;
    grid-template-rows: repeat(3,111px);
    grid-row-gap: 20px;
  }
  .data-item {
    box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.2);
    border-radius: 5px;
    display: grid;
    grid-template-rows: repeat(2,50%);
    align-items: center;
    padding: 5px 11px;
    label {
      font-weight: 400;
      color: #666666;
    }
    .number {
      font-weight: 500;
      color: #333333;
      font-size: 26px;
    }
  }
}
.statistics-chart {
  .two-title {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2,50%);
  }
  .two-chart-contain {
    width: 100%;
    height: 100%;
    display: grid;
    grid-template-columns: repeat(2,50%);
  }
  .chart-contain {
    width: 100%;
    height: 350px;
  }
}
.drawer-statistics:after {
  content: '';
  width: 100%;
  height: 14px;
  background-color: #F2F3F6;
  position: absolute;
  left: 0;
  bottom: 0;
}
.drawer {
  width: 26px;
  height: 13px;
  left: 50%;
  position: absolute;
  bottom: 1px;
  transform: translateX(-50%);
  z-index: 98;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #666666;
  font-weight: bold;
  background-color: #ffffff;
  border-bottom: 1px solid #999999;
  border-left: 1px solid #999999;
  border-right: 1px solid #999999;
  border-bottom-left-radius: 2px;
  border-bottom-right-radius: 2px;
}
.drawer-pull {
  top: 1px;
}
</style>