thoth-frontend-test/src/views/projectManage/taskList/components/dataStatistics.vue

<template>
  <div class="data-main">
    <article>
      <div class="data-num">
        <div class="data-add red">
          <img :src="bugImg">
        </div>
        <div class="data-detail">
          <b v-if="bugData">{{ bugData.total }}</b>
          <span>缺陷数量</span>
        </div>
      </div>
      <div class="data-line" />
      <div class="data-chart">
        <normal-echart :chart-id="'chartThird'" :option="echartsOption3" />
      </div>
    </article>
    <createdBug v-if="bug_open" ref="createdBug" />
  </div>
</template>
<script>
import normalEchart from '@/components/chart/normalEchart'
import createdBug from '@/views/projectManage/bugList/file/createdBug'
import { getTaskSumData } from '@/api/taskIndex'
import bugImg from '@/assets/detailPage/缺陷修复@2x.png'
export default {
  components: {
    normalEchart,
    createdBug
  },
  data() {
    return {
      bugImg: bugImg,
      edit: false,
      dataChart1: false,
      echartsOption3: null,
      requirement: {},
      bug_open: false, // 新建缺陷
      bugData: null // 缺陷数据
    }
  },
  mounted() {
    this.getProjectSumData()
  },
  methods: {
    async getProjectSumData() { // 获取数据
      const res = await getTaskSumData(this.$route.query.id)
      if (res.code === 200) {
        this.bugData = res.data.bugData
        this.setDataChart(this.bugData.detail, 'echartsOption3')
      }
    },
    setDataChart(data, obj) {
      this[obj] = {
        color: ['#3AA1FF'],
        tooltip: { trigger: 'axis', axisPointer: { type: 'line' }}, // 默认为直线，可选为：'line' | 'shadow'
        grid: { left: '15%', right: '15%', top: '15%', bottom: '10%', containLabel: true },
        xAxis: [{ type: 'category', data: data.xaxis, axisTick: { alignWithLabel: true }}],
        yAxis: [{ type: 'value', axisLine: { show: false }, splitLine: { lineStyle: { type: 'dashed' }}}],
        series: [
          {
            name: data.yaxis[0].name, type: 'bar', barWidth: '20px', data: data.yaxis[0].data || [],
            itemStyle: { normal: { label: { show: true, formatter: '{c}', position: 'top' }}}
          }
        ]
      }
    },
    created_bug() { // 缺陷创建
      this.bug_open = true
      this.$nextTick(() => {
        this.$refs.createdBug.init(1)
      })
    },
    change() {
      this.$emit('change')
    }
  }
}
</script>
<style scoped lang="scss">
.data-main {
  padding: 61px 0 41px 0;
}
article{
  width: 85%;
  height: 260px;
  min-width: 1043px;
  margin: 0 auto 20px auto;
  box-shadow:0px 0px 11px rgba(238,240,245,1);
  border-radius:7px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  .data-num {
    width: 41%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 127px 0 62px;
    .data-add {
      height: 92px;
      width: 92px;
      border-radius: 50%;
      position: relative;
      display: flex;
      justify-content: center;
      align-items: center;
      img {
        height: 36px;
        width: 36px;
      }
    }
    .blue {
      background-color:rgba(64,158,255,0.15);
    }
    .green {
      background-color:rgba(126,211,33,0.15);
    }
    .red {
      background-color: rgba(245,108,108, 0.15);
    }
    .data-detail {
      color: #333333;
      display: flex;
      width: 70px;
      flex-direction: column;
      align-items: center;
      b{
        font-size: 75px;
      }
      span {
        font-size: 16px;
      }
    }
  }
  .data-line {
    width:0px;
    height:156px;
    border:1px solid rgba(112,112,112,1);
    opacity:0.15;
  }
  .data-chart {
    width: 58%;
    height: 100%;
  }
}
</style>