diantou/src_product/iam/kpi/analysis/kpi-analysis-form-echarts.vue

<template>
  <div :class="$style.title">
    <span class="header_sd-header_common"
      ><span :class="['toptitle', $style.toptitle]">{{ title }}</span></span
    >
    <div>
      <div v-show="!hasData">
        <a-empty />
      </div>
      <div v-show="hasData">
        <sd-echart :key="tableKey" :class="$style.echarts" :options="echartsData" autoresize />
      </div>
      <div v-show="hasData">
        <sd-data-table
          :key="tableKey"
          ref="dataTable"
          :class="$style.childTable"
          row-key="indi_id"
          :columns="columns"
          form-id="kpiIndiDef"
          data-url="api/xcoa-mobile/v1/kpi-assay/getKpiAssayList"
          :modal-props="{ class: 'noBottom' }"
          :process-req="processReq"
          :process-res="processRes"
          @dataLoaded="dataLoaded"
        >
        </sd-data-table>
      </div>
    </div>
  </div>
</template>

<script>
import 'echarts/lib/chart/treemap'
import 'echarts/lib/chart/line'
import 'echarts/lib/chart/pictorialBar'
import 'echarts/lib/component/title'
import 'echarts/lib/chart/bar'
import 'echarts/lib/component/legend'
import 'echarts/lib/component/legendScroll'
import 'echarts/lib/component/tooltip'
import kpiAnalysisFormService from './kpi-analysis-form-service'
import components from './_import-components/kpi-analysis-form-echarts-import'

export default {
  name: 'KpiAnalysisFormEcharts',
  metaInfo: {
    title: 'KpiAnalysisFormEcharts',
  },
  components,
  props: {
    title: {
      type: String,
      default: '',
    },
    indiId: {
      type: Number,
      default: -1,
      require: true,
    },
    params: {
      type: Object,
      default: () => {
        return {}
      },
      require: true,
    },
  },
  data() {
    return {
      hasData: false,
      columns: [],
      tableKey: 0,
      echartsData: {
        tooltip: {
          trigger: 'axis',
        },
        legend: {
          selectedMode: false,
          bottom: 15,
          data: [],
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '35',
          containLabel: true,
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: [],
          show: false,
        },
        yAxis: {
          type: 'value',
        },
        series: [],
      },
    }
  },
  created() {
    kpiAnalysisFormService.getKpiAssayHeader(this.params).then((resData) => {
      this.columns = [
        {
          title: '序号',
          customRender: (text, record, index) => `${index + 1}`,
          width: '80px',
        },
        {
          title: '监测单位',
          dataIndex: '监测单位',
        },
      ]
      resData.data.forEach((item) => {
        if (item !== '监测单位') {
          this.echartsData.xAxis.data.push(item)
          this.columns.push({
            title: item,
            dataIndex: item,
          })
        }
      })
      this.tableKey++
    })
  },
  methods: {
    dataLoaded() {
      this.$refs.dataTable.$refs.table.reset()
    },
    processReq(req) {
      req.data = {
        ...req.data,
        ...this.params,
        indiId: this.indiId,
        pageIndex: req.data.startPosition,
        pageSize: req.data.maxResults,
      }
      return req
    },
    processRes(res) {
      this.echartsData.series = []
      this.echartsData.legend.data = []
      this.hasData = true
      if (res.data.length === 0) this.hasData = false
      res.data.forEach((item) => {
        const data = []
        this.echartsData.xAxis.data.forEach((xAxis) => {
          data.push(item[xAxis])
        })
        this.echartsData.series.push({
          name: item['监测单位'],
          type: 'line',
          stack: 'Total',
          data: data,
        })
        this.echartsData.legend.data.push({
          name: item['监测单位'],
          icon: 'roundRect',
        })
      })

      if ((this.columns.length !== 0) | (res.data.length === 0)) return res
      this.tableKey++
      return res
      // if ((this.columns.length !== 0) | (res.data.length === 0)) return res
      // this.columns.push({
      //   title: '序号',
      //   customRender: (text, record, index) => `${index + 1}`,
      //   width: '80px',
      // })
      // const row = res.data[0]
      // for (const key in row) {
      //   this.columns.push({
      //     title: key,
      //     dataIndex: key,
      //   })
      // }
      // this.tableKey++

      // return res
    },
  },
}
</script>

<style module lang="scss">
@use '@/common/design' as *;
.title {
  text-align: center;
}
.toptitle {
  color: #404040;
  font-weight: bold;
  font-size: 22px;
}
.echarts {
  width: 90%;
  margin: auto;
}
.child-table {
  :global(.ant-table-body) {
    overflow: auto;
  }
  table:first-child {
    colgroup {
      :not(col:first-child) {
        width: 150px;
      }
    }
  }
}
</style>