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

<template>
  <div class="box-content">
    <div class="headerText"
         :title="this.$t('redSchedule') + this.$t('yellowSchedule')+this.$t('greenRequirements')+this.$t('blueUndeterminedState')">
      {{this.$t('redSchedule')}};
      {{this.$t('yellowSchedule')}};
      {{this.$t('greenRequirements')}};
      {{this.$t('blueUndeterminedState')}};
    </div>
    <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')}}:{{currentProjectStatusTotal}}
          </template>
        </a-table>
      </div>
    </div>
    <responsibilityList @responsibility="responsibility" ref="responsibilityListRef"/>
  </div>
</template>

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

  export default {
    name: 'CurrentStatusOfTheProjectEcharts',
    components: {
      responsibilityList
    },
    props: {
      idList: {
        type: Array,
        default: []
      }
    },
    data() {
      return {
        loading: false,
        dataSource: [],
        currentProjectStatusTotal: 0,
        url: {
          getProjectDetailsStatistics: '/project/projectLibraryBase/getProjectDetailsStatistics'
        },
        columns: [
          {
            title: this.$t('red'),
            align: 'center',
            dataIndex: 'redCount'
          },
          {
            title: this.$t('yellow'),
            align: 'center',
            dataIndex: 'yellowCount'
          },
          {
            title: this.$t('green'),
            align: 'center',
            dataIndex: 'greenCount'
          },
          {
            title: this.$t('blue'),
            align: 'center',
            dataIndex: 'blueCount'
          }
        ]
      }
    },
    mounted() {
      this.getData()
    },
    methods: {
      getData() {
        let id = ''
        if (this.idList && this.idList.length > 0) {
          id = this.idList.join(',')
        } else {
          id = this.$route.query.id
        }
        getAction(this.url.getProjectDetailsStatistics, { id: id }).then((res) => {
          if (res.success) {
            if (res.result) {
              let dataSource = res.result.currentProjectStatusMap ? res.result.currentProjectStatusMap.currentProjectStatusMapList : []
              this.mainLeftEcharts(dataSource)
              this.currentProjectStatusTotal = res.result.currentProjectStatusMap ? res.result.currentProjectStatusMap.currentProjectStatusTotal : 0
            }
          }
        })
      },
      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
            }
          ]
        })
        myChart.on('click', (params) => {
          let query = {
            title: params.seriesName,
            projectLibraryId: this.$route.query.id,
            operatorType: 'queryCurrentProjectStatusStatistics',
            conditionAssessment: params.data.color
          }
          this.$refs.responsibilityListRef.getData(query)
        })
      },
      mainLeftEcharts(dataSource) {
        let data = []
        let color = []
        if (dataSource && dataSource.length > 0) {
          this.dataSource = [{}]
          dataSource.forEach(res => {
            if (res.color == '4') {
              data.push({
                value: res.conditionAssessmentCount,
                name: this.$t('blue'),
                color: res.color
              })
              color.push('#00B3BE')
              this.dataSource[0].blueCount = res.conditionAssessmentCount
            } else if (res.color == '1') {
              data.push({
                value: res.conditionAssessmentCount,
                name: this.$t('red'),
                color: res.color
              })
              color.push('#E83030')
              this.dataSource[0].redCount = res.conditionAssessmentCount
            } else if (res.color == '2') {
              data.push({
                value: res.conditionAssessmentCount,
                name: this.$t('yellow'),
                color: res.color
              })
              color.push('#FDA71C')
              this.dataSource[0].yellowCount = res.conditionAssessmentCount
            } else if (res.color == '3') {
              data.push({
                value: res.conditionAssessmentCount,
                name: this.$t('green'),
                color: res.color
              })
              this.dataSource[0].greenCount = res.conditionAssessmentCount
              color.push('#26BD4B')
            }
          })
        }
        this.getEcharts('main-left', this.$t('CurrentStatusOfTheProject'), color, data)
      },
      responsibility(item) {
        this.$emit('currentStatus', item)
      }
    }
  }
</script>

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

    .box-content-left {
      width: calc(50% - 12px);
      margin-top: 30px;
      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);
      margin-top: 30px;
      height: 398px;
      border: 2px #eff1f3 solid;

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

  .headerText {
    margin-left: 30px;
    color: #040B29;
    font-weight: 400;
    position: absolute;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
</style>