laws_weilai/jero-web/src/views/projectManagement/components/certificationProgressEchart.vue

<template>
  <div class="box-content">
    <div class="box-content-left">
      <div id="main-left"></div>
    </div>
    <div class="box-content-right">
      <div id="main-right">
        <a-table
          ref="table"
          :loading="loading"
          :pagination="false"
          :scroll="{x: true}"
          :data-source="dataSource"
          :columns="columns"
        >
          <template slot="footer" slot-scope="currentPageData">
            {{$t('totalTable')}}:{{certificationProgressTotal}}
          </template>
        </a-table>
      </div>
    </div>
  </div>
</template>

<script>
  import * as echarts from 'echarts'
  import { getAction, postAction, deleteAction, downloadFile } from '@/api/manage'

  export default {
    name: 'certificationProgress',
    data() {
      return {
        loading: false,
        dataSource: [],
        certificationProgressTotal: 0,
        url: {
          getProjectDetailsStatistics: '/project/projectLibraryBase/getProjectDetailsStatistics'
        },
        columns: [
          {
            title: this.$t('notInvolved'),
            align: 'center',
            dataIndex: 'notInvolved'
          },
          {
            title: this.$t('toBeStarted'),
            align: 'center',
            dataIndex: 'toBeStarted'
          },
          {
            title: this.$t('inProgress'),
            align: 'center',
            dataIndex: 'inProgress'
          },
          {
            title: this.$t('experimentFailed'),
            align: 'center',
            dataIndex: 'experimentFailed'
          },
          {
            title: this.$t('experimentPassed'),
            align: 'center',
            dataIndex: 'experimentPassed'
          }
        ]
      }
    },
    mounted() {
      this.mainLeftEcharts()
      this.getData()
    },
    methods: {
      getData() {
        getAction(this.url.getProjectDetailsStatistics, { id: this.$route.query.id }).then((res) => {
          if (res.success) {
            let certificationProgressMap = res.result.certificationProgressMap.certificationProgressMapList || []
            this.certificationProgressTotal = res.result.certificationProgressMap.certificationProgressTotal
            this.dataEcharts(certificationProgressMap)
          }
        })
      },
      dataEcharts(val) {
        let data = []
        let color = []
        this.dataSource = []
        if (val && val.length > 0) {
          this.dataSource = [{}]
          val.forEach(res => {
            if (res.certificationProgress == 'NA') {
              data.push({
                value: res.certificationProgressCount,
                name: this.$t('notInvolved')
              })
              color.push('#9DB9D4')
              this.dataSource[0].notInvolved = res.certificationProgressCount
            } else if (res.certificationProgress == 'Not start') {
              data.push({
                value: res.certificationProgressCount,
                name: this.$t('toBeStarted')
              })
              color.push('#FDB033')
              this.dataSource[0].toBeStarted = res.certificationProgressCount
            } else if (res.certificationProgress == 'In progress') {
              data.push({
                value: res.certificationProgressCount,
                name: this.$t('inProgress')
              })
              color.push('#FF8543')
              this.dataSource[0].inProgress = res.certificationProgressCount
            } else if (res.certificationProgress == 'Test failed') {
              data.push({
                value: res.certificationProgressCount,
                name: this.$t('experimentFailed')
              })
              color.push('#FF8543')
              this.dataSource[0].experimentFailed = res.certificationProgressCount
            } else if (res.certificationProgress == 'Test passed') {
              data.push({
                value: res.certificationProgressCount,
                name: this.$t('experimentPassed')
              })
              color.push('#2F8DF3')
              this.dataSource[0].experimentPassed = res.certificationProgressCount
            }
          })
        }
        this.mainLeftEcharts(data, color)
      },
      getEcharts(chart, title, color, data) {
        var myChart = echarts.init(document.getElementById(chart))
        myChart.setOption({
          title: {
            text: title
          },
          tooltip: {
            trigger: 'item'
          },
          legend: {
            itemWidth: 12,
            itemHeight: 12,
            bottom: '0',
            left: 'center',
            itemGap: 30,
            icon: 'circle'
          },
          series: [
            {
              name: title,
              type: 'pie',
              radius: ['40%', '54%'],
              avoidLabelOverlap: false,
              label: {
                show: false,
                position: 'center'
              },
              labelLine: {
                show: false
              },
              color: color,
              data: data
            }
          ]
        })
      },
      mainLeftEcharts(data, color) {
        this.getEcharts('main-left', this.$t('CertificationProgress'), color, data)
      }
    }
  }
</script>

<style scoped lang="less">
  .box-content {
    width: 100%;
    display: flex;
    justify-content: space-between;

    .box-content-left {
      width: calc(50% - 12px);
      height: 398px;
      border: 2px #eff1f3 solid;

      #main-left {
        width: 100%;
        height: 100%;
        padding: 24px;
        box-sizing: border-box;
      }
    }

    .box-content-right {
      width: calc(50% - 12px);
      height: 398px;
      border: 2px #eff1f3 solid;

      #main-right {
        width: 100%;
        height: 100%;
        padding: 24px;
        box-sizing: border-box;
      }
    }
  }
</style>