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 v-for="(item,index) in statisticsList" :key="title+'-statistics-'+index" class="data-item" :class="{'active': clickItem === index }" @click="changeData(item.idList,item.label);clickItem=index">
              <label>
                {{ item.label }}
                <template v-if="(title === '需求' || title ==='任务') && index<7">
                  <el-tooltip class="item" effect="dark" :content="tips[title][index]" placement="top">
                    <i class="el-icon-info" />
                  </el-tooltip>
                </template>
              </label>
              <div
                class="number"
                :class="{'color-red': (index === 0 || index === 1) && item.total>0}"
              >
                {{ item.total }}
              </div>
            </div>
          </div>
        </div>
        <div v-if="title !=='缺陷'" class="statistics-chart">
          <!-- <h2>未上线{{ title }}状态分布</h2> -->
          <el-radio-group v-model="itemType" @change="onChangeTagRadio">
            <el-radio-button label="0">未上线{{ title }}状态分布</el-radio-button>
            <el-radio-button label="1">本周{{ title }}状态流入图</el-radio-button>
          </el-radio-group>
          <h3 @click="getAll()">总数：<span>{{ totalTask }}</span></h3>
          <div class="chart-contain">
            <status-stay-chart :chart-data="echartsOption" @onClick="chartChange" />
            <!-- <normal-echart v-if="echartsOption" :chart-id="type+title" :option="echartsOption" @onClick="chartChange" /> -->
          </div>
        </div>
        <div v-if="title ==='缺陷'" class="statistics-chart">
          <div class="two-title">
            <h2 v-if="type === 'person'">我提报的-未完成缺陷状态分布</h2>
            <h2 v-if="type === 'person'">提给我的-未完成缺陷状态分布</h2>
            <h2 v-if="type === 'team'">团队提报的-未完成缺陷状态分布</h2>
            <h2 v-if="type === 'team'">提给团队的-未完成缺陷状态分布</h2>
          </div>
          <div class="two-chart-contain">
            <div class="chart-contain">
              <normal-echart v-if="echartsOption" :chart-id="type+title+'1'" :option="echartsOption" @onClick="chartChange" />
            </div>
            <div class="chart-contain">
              <normal-echart v-if="echartsOption2" :chart-id="type+title+'2'" :option="echartsOption2" @onClick="chartChange" />
            </div>
          </div>
        </div>
      </div>
    </transition>
    <div class="drawer" @click="show = !show">
      <i v-show="show" class="el-icon-arrow-up" />
      <i v-show="!show" class="el-icon-arrow-down" />
    </div>
  </div>
</template>

<script>
import normalEchart from '@/components/chart/normalEchart'
import statusStayChart from '@/components/chart/statusStayChart'
export default {
  name: 'StatisticsSectionVue',
  components: {
    normalEchart,
    statusStayChart
  },
  props: {
    searchForm: { // 搜索项的信息
      type: Object,
      default: () => {
        return {
          teamId: null,
          bizId: null
        }
      },
      required: true
    },
    type: { // 个人还是团队
      type: String,
      default: 'team',
      required: false
    },
    title: {
      type: String,
      default: '需求',
      required: false
    },
    requestObj: { // 请求的接口
      type: Object,
      default: () => null,
      required: false
    }
  },
  data() {
    return {
      show: true,
      statisticsList: [],
      echartsOption: null,
      echartsOption2: null,
      totalTask: 0, // 所有总数
      totalIdList: 0, // 所有总数的idList
      itemType: '0', // 0: 未上线的需求分布  1: 本周状态流入图
      tips: {
        '需求': [
          '交付日期为今天，且状态仍未变更为“已上线”的需求数量（不包含当前状态为hold的需求）。',
          '已过交付日期，状态仍未变更为“已上线”的需求数量（不包含当前状态为hold的需求）。',
          '交付日期在本周内的需求数量（不包含当前状态为hold的需求）。',
          '交付日期在本周，且状态仍未变更为“已上线”的需求数量（不包含当前状态为hold的需求）。',
          '最近一次变更状态为“已上线”是在本周，且当前状态为“已上线”或“已完成”的需求',
          '交付日期在下周的需求数量（不包含当前状态为hold的需求）。',
          '当前状态为“已上线”及后续状态的需求'
        ],
        '任务': [
          '交付日期为今天，且状态仍未变更为“已上线”的任务数量（不包含当前状态为hold的任务）。',
          '已过交付日期，状态仍未变更为“已上线”的任务数量（不包含当前状态为hold的任务）。',
          '交付日期在本周内的任务数量（不包含当前状态为hold的任务）。',
          '交付日期在本周，且状态仍未变更为“已上线”的任务数量（不包含当前状态为hold的任务）。',
          '最近一次变更状态为“已上线”是在本周，且当前状态为“已上线”的任务',
          '交付日期在下周任务数量（不包含当前状态为hold的任务）。',
          '当前状态为“已上线”的任务'
        ]
      },
      clickItem: 0
    }
  },
  watch: {
    searchForm: {
      handler(newV) {
        this.initData()
      },
      deep: true,
      immediate: true
    },
    title: {
      handler(newV) {
        this.clickItem = 0
        this.initData()
      }
      // immediate: true
    }
  },
  methods: {
    initData() { // 初始化
      if (this.requestObj) {
        const { requestData, requestChart } = this.requestObj
        this.getData(requestData)
        if (this.title === '缺陷') {
          this.getChart(requestChart, '3')
          this.getChart(requestChart, '5')
        } else {
          this.getChart(requestChart, this.itemType)
        }
      }
    },
    onChangeTagRadio(e) {
      const { requestChart } = this.requestObj
      this.getChart(requestChart, this.itemType)
    },
    async getData(requestUrl) { // 获取顶部数据
      const res = await requestUrl({ teamSearchInfo: this.searchForm })
      if (res.code === 200) {
        this.statisticsList = res.data || []
        if (this.statisticsList.length > 0) {
          const show = this.statisticsList[0].total + this.statisticsList[1].total > 0
          this.$emit('showTips', this.title, show)
        }
        // 如果是点击左边6个区域的，保留idList，如果点击是图表，默认回到左边第一个区域中的idList
        if (this.clickItem < 0) {
          this.clickItem = 0
          this.changeData(this.statisticsList[0].idList, this.statisticsList[0].label)
        } else {
          this.changeData(this.statisticsList[this.clickItem].idList, this.statisticsList[this.clickItem].label)
        }
      }
    },
    async getChart(requestUrl, type) { // 获取图表数据
      const res = await requestUrl({ teamSearchInfo: this.searchForm, type: type })
      if (type === '3') {
        this.echartsOption = this.setChart(res.data)
      } else if (type === '5') {
        this.echartsOption2 = this.setChart(res.data)
      } else {
        const res = await requestUrl({ teamSearchInfo: this.searchForm, type })
        this.totalTask = res.data.total
        this.totalIdList = res.data.idList
        this.echartsOption = { ...res.data, type: this.itemType }
      }
    },
    setChart(chartData) { // 设置图表options
      const childArr = chartData.xaxis.map((item, index) => {
        return {
          value: chartData.yaxis[0] && chartData.yaxis[0].data[index] || 0,
          idList: chartData.yaxis[0] && chartData.yaxis[0].idList[index] || []
        }
      })
      const option = {
        color: ['#3AA1FF'],
        tooltip: { trigger: 'axis', axisPointer: { type: 'line' }}, // 默认为直线，可选为：'line' | 'shadow'
        grid: { left: '0', right: '0', top: '10%', bottom: '0', containLabel: true },
        xAxis: [{ type: 'category', data: chartData.xaxis, axisLabel: { interval: 0, rotate: 15 }, axisTick: { alignWithLabel: true }}],
        yAxis: [{ type: 'value', axisLine: { show: false }, splitLine: { lineStyle: { type: 'dashed' }}}],
        series: [{
          name: '数量', type: 'bar', barWidth: '20px', data: childArr,
          itemStyle: { normal: { label: { show: true, formatter: '{c}', position: 'top' }}}
        }]
      }
      return option
    },
    getAll() {
      this.clickItem = -1
      this.changeData(this.totalIdList, `未上线的`)
    },
    chartChange(params) { // 点击图表产生触发列表更改
      let idList = params.data.idList || []
      // 本周需求状态流入图需要特殊处理。循环出对应下标的idlist
      if (this.itemType === '1') {
        // console.log(this.echartsOption.xaxis)
        const dataIndex = params.dataIndex
        this.echartsOption.yaxis.forEach(t => {
          idList = [...idList, ...t.idList[dataIndex]]
        })
      }
      this.clickItem = -1
      this.changeData(idList, params.name)
    },
    changeData(idList, name) { // 点击顶部数据触发列表更改
      this.$emit('change', this.title, idList, name)
    }
  }
}
</script>

<style scoped lang="scss">
.drawer-statistics {
  position: relative;
  width: 100%;
  padding-bottom: 1px;
}
.drawer-padding {
  padding-bottom: 13px;
}
//.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: 40% 60%;
  h2 {
    color: #333333;
    font-size: 16px;
    margin-bottom: 15px;
    font-weight: bold;
  }
  h3 {
    cursor: pointer;
    color: #999999;
    font-size: 18px;
    margin-bottom: 0px;
    span {
      color:#409EFF;
      font-size: 26px;
    }
  }
}
.statistics-data {
  .data-main{
    width: 80%;
    display: grid;
    grid-template-columns: repeat(2,190px);
    grid-column-gap: 30px;
    grid-template-rows: repeat(4,80px);
    grid-row-gap: 20px;
  }
  .data-item {
    cursor:pointer;
    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 3px 5px 11px;
    label {
      font-weight: 400;
      color: #666666;
      cursor:pointer;
    }
    .number {
      font-weight: 500;
      color: #333333;
      font-size: 26px;
    }
    .color-red {
      color:#E02020;
    }
  }
  .active {
    border: 1px solid #409EFF;
    box-shadow: 0px 6px 12px rgba(64, 158, 255, 0.2);
  }
}
.statistics-chart {
  .two-title {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2,47.5%);
    grid-column-gap: 5%;
  }
  .two-chart-contain {
    width: 100%;
    height: 100%;
    display: grid;
    grid-template-columns: repeat(2,47.5%);
    grid-column-gap: 5%;
  }
  .chart-contain {
    width: 100%;
    height: 360px;
  }
}
.drawer-statistics:after {
  content: '';
  width: 100%;
  height: 14px;
  background-color: #F2F3F6;
  position: absolute;
  left: 0;
  bottom: 0;
}
.drawer {
  width: 26px;
  height: 12px;
  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;
  box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.2);
  border-bottom-left-radius: 2px;
  border-bottom-right-radius: 2px;
}
.drawer-pull {
  top: 1px;
}
</style>