data_governance/src/login/DownAppQualityReport.vue

<template>
  <div class="quality-report">
    <nav style="" class="nav-content">
      <a class="nav-list" v-for="(item, index) in navList" :key="index" @click="jump(index)" :class="index==currentIndex?'current-item':''">{{item}}</a>
    </nav>
    <div class="report-container" id="report" ref="downReport">
      <div class="report-header">
        <div class="header-title">数据质量报告</div>
        <div class="header-subtitle">
          <span>数据范围：{{queryParams.appName}}</span>
          <span>报告类型：{{queryParams.reportClassName}}</span>
          <span v-if="queryParams.reportClassName == '日报' || queryParams.reportClassName == '年报'">时间范围：{{queryParams.beginDate}}</span>
          <span v-else>时间范围：{{queryParams.beginDate}}~{{queryParams.endDate}}</span>
        </div>
      </div>
      <div class="report-content">
        <div class="report-section">
          <div class="title-content">
            <div class="title-line">
              <span></span>综合数据质量分析
            </div>
          </div>
          <div class="report-echarts">
            <Row :gutter="16" class-name="report-echarts-row">
              <Col :span="12">
                <div class="report-echarts-main">
                  <div class="echarts-title">1. 综合得分</div>
                  <div id="appGuage" class="echart-detail"></div>
                </div>
             </Col>
              <Col :span="12">
                <div class="report-echarts-main">
                  <div class="echarts-title">2. 评估维度</div>
                  <div id="appRadar" class="echart-detail"></div>
                </div>
              </Col>
            </Row>
            <Row :gutter="16" class-name="report-echarts-row">
              <Col :span="24">
                <div class="report-echarts-main">
                  <div class="echarts-title">3. 综合数据质量趋势</div>
                  <div id="appLine3" class="echart-detail"></div>
                </div>
             </Col>
            </Row>
             <Row :gutter="16" class-name="report-echarts-row">
              <Col :span="24">
                <div class="report-echarts-main no-truncation">
                  <div class="echarts-title">4. 综合数据质量分析-按规则类型</div>
                  <div id="appLBar4" class="echart-detail"></div>
                  <div class="report-echarts-table">
                    <Table :columns="columns4" :data="tableData4" class="common-table report-table-detail" no-data-text="" :row-class-name="rowClassName">
                      <template slot-scope="{row,index}" slot="paramDou01">
                        <span :style="index==0 ? 'color:#5EB6FC': ''">{{row.paramDou01+'%'}}</span>
                      </template>
                      <template slot-scope="{row,index}" slot="paramDou02">
                        <span :style="index==0 ? 'color:#5EB6FC': ''">{{row.paramDou02+'%'}}</span>
                      </template>
                      <template slot-scope="{row}" slot="paramDou04">
                        <Icon type="md-arrow-up" style="color: #09CB09;font-size:20px" v-show="row.paramDou04>0"/>
                        <Icon type="md-arrow-down" style="color: #F32F2F;font-size:20px" v-show="row.paramDou04<0" />
                        {{Math.abs(row.paramDou04)+'%'}}
                      </template>
                    </Table>
                  </div>
                </div>
             </Col>
            </Row>
          </div>
        </div>
         <div class="report-section">
          <div class="title-content no-truncation">
            <div class="title-line">
              <span></span>数据异常分析
            </div>
          </div>
          <div class="report-echarts">
            <Row :gutter="16" class-name="report-echarts-row">
                <Col :span="24">
                  <div class="report-echarts-main no-truncation">
                    <div class="echarts-title">5. 数据异常分析 - 按规则类型</div>
                    <div class="echarts-sub-title">数据质量检测异常，按来源规则类型区分数据如下：</div>
                    <Row :gutter="16" align="middle">
                      <Col :span="8">
                        <div id="appPie5" class="echart-detail"></div>
                      </Col>
                      <Col :span="16">
                         <div class="report-echarts-table report-echarts-right-table">
                           <Table :columns="columnsRule" :data="tableData5" class="common-table report-table-detail" no-data-text="" :row-class-name="rowClassName" ref="appTable5">
                            <template slot-scope="{ index }" slot="xAxis">
                              <span class="table-legend" :style="'background:'+tableColumnColor5[index]" v-show="index>0"></span>
                            </template>
                             <template slot-scope="{row,index}" slot="paramDou01">
                                <span :style="index==0 ? 'color:#ECCF0C': ''">{{row.paramDou01}}%</span>
                              </template>
                           </Table>
                        </div>
                      </Col>
                    </Row>
                  </div>
               </Col>
            </Row>
            <Row :gutter="16" class-name="report-echarts-row">
                <Col :span="24">
                  <div class="report-echarts-main no-truncation">
                    <div class="echarts-title">6. 异常数来源 - 质量规则 TOP10</div>
                    <div class="echarts-sub-title">数据质量检查错数按规则排名如下：</div>
                    <Row :gutter="16">
                      <Col :span="24">
                         <div id="appBar6" class="echart-detail"></div>
                         <div class="report-echarts-table">
                          <Table :columns="columnsException" :data="tableData6" class="common-table report-table-detail" no-data-text="" :row-class-name="rowClassName">
                            <template slot-scope="{row,index}" slot="paramDou01">
                              <span :style="index==0 ? 'color:#5EB6FC': ''">{{row.paramDou01+'%'}}</span>
                            </template>
                            <template slot-scope="{row,index}" slot="paramDou02">
                              <span :style="index==0 ? 'color:#5EB6FC': ''">{{row.paramDou02+'%'}}</span>
                            </template>
                          </Table>
                        </div>
                      </Col>
                    </Row>
                  </div>
               </Col>
            </Row>
          </div>
         <div class="report-section">
          <div class="title-content no-truncation">
            <div class="title-line">
              <div class="num-title">
                <span></span>规则配置状况
              </div>
            </div>
          </div>
          <div class="report-echarts">
            <Row :gutter="16" class-name="report-echarts-row">
                <Col :span="24">
                  <div class="report-echarts-main no-truncation">
                    <div class="echarts-title">7.规则配置状况</div>
                    <div class="echarts-sub-title">规则配置数量级及占比</div>
                    <Row :gutter="16" align="middle">
                      <Col :span="8">
                        <div id="appPie7" class="echart-detail"></div>
                      </Col>
                      <Col :span="16">
                        <div class="report-echarts-table report-echarts-right-table">
                           <Table :columns="columnsConfig" :data="tableData7" class="common-table report-table-detail" no-data-text="" :row-class-name="rowClassName">
                             <template slot-scope="{ index }" slot="xAxis">
                              <span class="table-legend" :style="'background:'+tableColumnColor7[index]" v-show="index>0"></span>
                            </template>
                            <template slot-scope="{row,index}" slot="paramDou05">
                              <span :style="index==0 ? 'color:#5EB6FC': ''">{{row.paramDou05+'%'}}</span>
                            </template>
                            <template slot-scope="{row}" slot="paramDou04">
                              <Icon type="md-arrow-up" style="color: #09CB09;font-size:20px" v-show="row.paramDou04>0"/>
                              <Icon type="md-arrow-down" style="color: #F32F2F;font-size:20px" v-show="row.paramDou04<0" />
                              {{Math.abs(row.paramDou04)+'%'}}
                            </template>
                          </Table>
                        </div>
                      </Col>
                    </Row>
                  </div>
               </Col>
            </Row>
          </div>
        </div>
      </div>
      </div>
    </div>
  </div>
</template>
<script>
import * as echarts from "echarts"
import html2canvas from 'html2canvas';
import JsPDF from 'jspdf'
export default {
  name: "DownAppQualityReport",
  data() {
    return {
        scroll: '',
        navList: ['综合数据质量分析', '数据异常分析','规则配置状况'],
        currentIndex:0,
        listBoxState: true,//点击导航栏时，暂时停止监听页面滚动
        queryParams: {reportClassName:'',beginDate:'',endDate: '',appId:0,appName: ''},
        columns4: [
           {
            title: '规则类型',
            key: 'xAxis',
            align: 'center',
            ellipsis: true,
            tooltip: true
          },
          {
            title: '记录总数',
            key: 'paramLong01',
            align: 'center',
            ellipsis: true,
            tooltip: true
          },
          {
            title: '本期质量',
            slot: 'paramDou01',
            align: 'center',
          },
          {
            title: '上期质量',
            slot: 'paramDou02',
            align: 'center',
          },
          {
            title: '趋势',
            slot: 'paramDou04',
            align: 'center',
          },
        ],
        tableData4: [],
        tableData5: [],
        tableData6: [],
        tableData7: [],
        pieColumnColor5: ['#646AD9','#FDDD60','#FF6E76','#7CFFB2','#4992FF','#58D9F9'],
        tableColumnColor5: ['','#646AD9','#FDDD60','#FF6E76','#7CFFB2','#4992FF'],
        pieColumnColor7: ['#FF6E76','#646AD9','#FDDD60','#7CFFB2','#4992FF','#58D9F9'],
        tableColumnColor7: ['','#FF6E76','#646AD9','#FDDD60','#7CFFB2','#4992FF'],
        columnsRule: [
        {
          title: '图例颜色',
          slot: 'xAxis',
          align: 'right',
          width: 70,
          className: 'table-legend-list',
        },
        {
          title: '规则类型',
          key: 'xAxis',
          align: 'center',
          ellipsis: true,
          tooltip: true
        },
        {
          title: '记录总数',
          key: 'paramNum01',
          align: 'center',
          ellipsis: true,
          tooltip: true
        },
        {
          title: '异常总数',
          key: 'paramNum02',
          align: 'center',
          ellipsis: true,
          tooltip: true
        },
        {
          title: '异常占比',
          slot: 'paramDou01',
          align: 'center',
        }],
        columnsException: [
          {
          title: '来源规则名称',
          key: 'xAxis',
          align: 'center',
          ellipsis: true,
          tooltip: true
        },
        {
          title: '记录总数',
          key: 'paramLong01',
          align: 'center',
          ellipsis: true,
          tooltip: true
        },
        {
          title: '异常总数',
          key: 'paramNum01',
          align: 'center',
          ellipsis: true,
          tooltip: true
        },
        {
          title: '本期质量',
          slot: 'paramDou01',
          align: 'center',
        },
        {
          title: '异常数\n总体占比', // iview的table表头文字换行需要\n和.ivu-table-cell {white-space: pre;}
          slot: 'paramDou02',
          align: 'center',
        },
       ],
        columnsConfig: [
          {
            title: '图例颜色',
            slot: 'xAxis',
            align: 'right',
            width: 70,
            className: 'table-legend-list',
          },
         {
            title: '规则类型',
            key: 'xAxis',
            align: 'center',
            ellipsis: true,
            tooltip: true
          },
          {
            title: '数量',
            key: 'paramNum01',
            align: 'center',
            ellipsis: true,
            tooltip: true
          },
          {
            title: '占比',
            slot: 'paramDou05',
            align: 'center',
          },
          {
            title: '趋势',
            slot: 'paramDou04',
            align: 'center',
          },
        ],
        downloadStatus: false,
    };
  },
  watch: {
      scroll: function () {
        this.loadSroll()
      }
    },
  created () {
    if (this.$route.query.reportClassName) {
      this.queryParams = this.$route.query
      let parmasObj = {
        beginDate: this.queryParams.beginDate,
        endDate: this.queryParams.endDate,
        appId: this.queryParams.appId
      }
      this.downloadStatus = false
      this.getData(parmasObj)
    }
  },
  mounted() {
    //vue通过window.addEventListener('scroll', XXXX)无法监听屏幕滚动事件,上一个页面可以,换了一个页面，却不行了，后来百度，往后面加了一个true
    window.addEventListener('scroll', this.dataScroll,true)
  },
  methods: {
    // js 节流浏览器性能优化
    dataScroll: function () {                           
      this.scroll = document.documentElement.scrollTop || document.body.scrollTop;
    },
    jump(index) {
    let jump = document.getElementsByClassName('report-section');
    // 获取需要滚动的距离
    let total = jump[index].offsetTop;
    // Chrome
    document.body.scrollTop  = total;
    // Firefox
    document.documentElement.scrollTop = total;
    // Safari
    window.pageYOffset = total;
    this.currentIndex = index
    this.listBoxState = false
    let timeId;
    clearTimeout(timeId);
    timeId = setTimeout(() => {
      this.listBoxState = true
    },100)
    // $('html, body').animate({
    // 'scrollheader': total
    // }, 400);
    },
    loadSroll: function () {
      var self = this;
      var sections = document.getElementsByClassName('report-section');
      if (this.listBoxState) {
        for (var i = sections.length - 1; i >= 0; i--) {
          if (self.scroll >= sections[i].offsetTop-100) {
            this.currentIndex = i
            break;
          }
        }
      } 
    },
    rowClassName(row, index) {
      if (index % 2 == 0) {
        return "ivu-table-stripe-even";
      } else {
        return "ivu-table-stripe-odd";
      }
    },
    creatGauge(gaugeData) {
      let myChart = echarts.init(document.getElementById(gaugeData.id))
      let option = {
        series: [
          {
            type: 'gauge',
            center: ['50%', '68%'],
            radius:'90%',
            startAngle: 200,
            endAngle: -20,
            min: 0,
            max: 100,
            splitNumber: 10,
            itemStyle: {
              color: '#FFAB91'
            },
            progress: {
              show: true,
              width: 15
            },
            pointer: {
              show: false
            },
            axisLine: {
              lineStyle: {
                color:[[1, '#284677']],
                width: 15
              }
            },
            axisTick: {
              distance: -35,
              splitNumber: 5,
              lineStyle: {
                width: 2,
                color: '#4D5F7D'
              }
            },
            splitLine: {
              distance: -52,
              length: 14,
              lineStyle: {
                width: 3,
                color: '#4D5F7D'
              }
            },
            axisLabel: {
              distance: -20,
              color: '#5D6B82',
              fontSize: 12
            },
            anchor: {
              show: false
            },
            title: {
              show: false
            },
            detail: {
              valueAnimation: true,
              width: '60%',
              lineHeight: 40,
              borderRadius: 8,
              offsetCenter: [0, '-15%'],
              fontSize: 30,
              fontWeight: 'bolder',
              formatter: '{value} %',
              color: 'auto'
            },
            data: [
              {
                value: gaugeData.scores
              }
            ]
          },
          {
            type: 'gauge',
            center: ['50%', '68%'],
            radius:'90%',
            startAngle: 200,
            endAngle: -20,
            min: 0,
            max: 100,
            itemStyle: {
              color: '#FD6636'
            },
            progress: {
              show: true,
              width: 5
            },
            pointer: {
              show: false
            },
            axisLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            splitLine: {
              show: false
            },
            axisLabel: {
              show: false
            },
            detail: {
              show: false
            },
            data: [
              {
                value: gaugeData.scores
              }
            ]
          }
        ]
      }
      myChart.resize()
      myChart.clear()
      myChart.setOption(option)
      window.addEventListener("resize", function() {
        myChart.resize()
      })
    },
    //雷达图显示文字
    contains(arr, val) {
      var i = arr.length;
      while (i--) {
          if (arr[i].name === val) {
              return i;
          }
      }
      return false;
    },
    creatSolidRadar (SolidRadarData) {
        if (echarts.init(document.getElementById(SolidRadarData.id))) {
          let  myChart = echarts.init(document.getElementById(SolidRadarData.id));
          myChart.clear()
          const createSvg = ({width, height, shadowColor, shadowBlur, points}) => {
              const ret = [`M${points[0][0]} ${points[0][1]}`];
              for (let i = 1; i < points.length; i++) {
                  ret.push(`L${points[i][0]} ${points[i][1]}`);
              }
              ret.push('Z');
              const rectPath = ret.join(' ');
              return (`
                  <svg version="1.1" xmlns="http://www.w3.org/2000/svg" 
                      x="0px" y="0px" 
                      width="${width}"
                      height="${height}"
                  >
                      <style>
                          .st1 {
                              fill: transparent;
                              stroke: ${shadowColor};
                              stroke-width: ${shadowBlur}px;
                              filter: url(#chart-inset-shadow);
                              clip-path: url(#chart-clip);
                          }

                      </style>
                      <defs>
                      
                          <clipPath id="chart-clip">
                              <path d="${rectPath}" />
                          </clipPath>
                          
                          <filter id="chart-inset-shadow" width="200%" height="200%" x="-50%" y="-50%">
                              <feGaussianBlur in="SourceGraphic" result="gass" stdDeviation="${shadowBlur * 0.75}" />
                              <feMerge>
                                  <feMergeNode in="gass" />
                              </feMerge>
                          </filter>

                      </defs>
                      <g>
                          <path class="st1" d="${rectPath}" />
                      </g>
                  </svg>
              `);        
            };
          const cretateSvgUrl = (svgOption) => {
              const svgString = createSvg(svgOption);
              const svg = new Blob([svgString], {type: "image/svg+xml;charset=utf-8"});              
              const DOMURL = window.URL || window.webkitURL || window;
              const insetShadowUrl = DOMURL.createObjectURL(svg);               
              return insetShadowUrl;
          };
          const dataSet = [], nameArr  = []
          SolidRadarData.category[0].forEach((item,index)=> {
           nameArr.push(item.name)
          })
          dataSet[0] = nameArr
          dataSet[1] = [100,100,100,100,100]
          dataSet[2] = SolidRadarData.data[0].value
          const maxValue = [...dataSet[1], ...dataSet[2]].reduce((m, v) => Math.max(m, v), -Infinity);
          const radius = 0.8;
          const theta = Math.PI * 2 / dataSet[2].length
          const getPoints = (R, ps, max) => ps.map((v, i) => {
              const t = i * theta;
              const d = v / max;
              const x = R - Math.sin(t) * R * d;    
              const y = R - Math.cos(t) * R * d;
              return [x, y];
          });
          // let i = -1;
          let option = {
              polar: {
                  radius: radius * 100 + '%',
                  // center: ['50%', '58%'],
                  center: ['50%', '50%'],
              },
              angleAxis: {
                  type: 'category',
                  clockwise: false,
                  boundaryGap: false,
                  splitLine: {
                      show: false,
                  },
                  axisLine: {
                      show: false
                  }
              },
              radiusAxis: {
                  type: 'value',
                  min: 0,
                  max: 100,
                  splitLine: {
                      show: false,
                  },
                  axisTick: {
                      show: false,
                  },
                  axisLabel: {
                      show: false,
                      color:'#fff',
                      formatter: '{value} %'
                  },
              },
              radar: {
                  indicator: SolidRadarData.category[0],
                  radius: radius * 100 + '%',
                  center: ['50%', '50%'],
                  shape: 'polygon',
                  splitNumber: 5,
                  // nameGap : 1,
                  name: {
                    // rich: {
                    //   a: {
                    //       color: '#fff',
                    //       lineHeight: 20,
                    //   },
                    //   b: {
                    //       color: '#fff',
                    //       align: 'center',
                    //       padding: 2,
                    //       borderRadius: 4
                    //    }
                    //   },
                    //   formatter: (value)=>{
                    //     let i = this.contains(SolidRadarData.category[0], value); // 处理对应要显示的样式
                    //     return `{a|${value}}{b|${dataSet[2][i]}%}`
                    //   },
                      textStyle: {
                          color: '#fff',
                          fontSize: 12,
                          padding: [-10, -10]
                      }
                  },
                  splitArea: {
                      areaStyle: {
                          color: [
                              'rgba(8,20,58,0.1)',
                              'rgba(,20,58,0.03)',
                              'rgba(,20,58,0.1)',
                              'rgba(,20,58,0.03)',
                          ]
                      }
                  },
                  splitLine: {
                      lineStyle: {
                          color: [
                              '#2A3A6E', '#2A3A6E',
                              '#2A3A6E', '#2A3A6E',
                              '#2A3A6E'
                          ].reverse(),
                          width: 3
                      }
                  },
                  axisLine: {
                      lineStyle: {
                          color: '#264474'
                      }
                  }
              },
              animationDuration: 3000,
              series: [
                  {
                      type: 'custom',
                      name: 's1-inset-shadow',
                      silent: true,
                      coordinateSystem : 'polar', 
                      // data: [0],
                      renderItem: (params,api) => {
                          const R = params.coordSys.r;
                          const cx = params.coordSys.cx;
                          const cy = params.coordSys.cy;
                          const x = cx - R;
                          const y = cy - R;
                          const width = 2 * R;
                          const height = 2 * R;                         
                          return {
                              type: 'image',
                              style: {
                                  image: cretateSvgUrl({
                                      width, height,
                                      shadowColor: '#00A0E9',
                                      shadowBlur: 6, 
                                      points: getPoints(R, dataSet[1], 100)
                                  }),
                                  x,
                                  y,
                                  width, 
                                  height,
                              },
                          };
                      },
                  },
                  {
                      name: 's2',
                      type: 'radar',
                      data: [
                          { value: dataSet[2] }
                      ],
                      // symbol: 'none',
                      label: {
                          show: true,
                          formatter: function(params) {
                              return params.value + '%';
                          },
                          color: '#fff',
                          position: [-10, -10],
                          // align: 'left',
                          // distance: -25,
                          
                      },
                      symbolSize: [6, 6],
                      itemStyle: {
                          shadowColor: 'rgba(0, 0, 0, 0.5)',
                          shadowBlur: 20,
                          normal: {
                              color: 'rgba(87,201,255,0.8)',
                              borderColor: 'rgba(87,201,255,0.2)',
                              borderWidth: 12,
                              
                          }
                      },
                      areaStyle: {
                          normal: {
                              color: '#383F2F',
                          }
                      },
                      lineStyle: {
                          normal: {
                              color: '#FAEC05',
                              width: 2,
                              
                          }
                      },
                      z: 3,
                  },
              ]
          };
          myChart.resize()
          myChart.setOption(option)
          window.addEventListener("resize", function () {
              myChart.resize()  
            })
        }
    },
    creatLine (lineData) {
      let toplinechart = echarts.init(document.getElementById(lineData.id));
      let seriesData = _.map(lineData.data, (item,index)=>({
          name: lineData.legend[index], type: 'line', symbol: 'circle', symbolSize: 2,smooth: true, // 平滑曲线
          lineStyle: { normal: { color: lineData.lineColor[index], width: 2 } },
          itemStyle: { normal: { color: lineData.lineColor[index], borderColor: lineData.lineColor[index], borderWidth: 2 },
          emphasis: { color: '#fff' }
        },
        areaStyle: { opacity:0.4,color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0.3, color: lineData.lineColor[index]}, { offset: 1, color: 'rgba(0,0,0,0)' }])},
        data: item
      }))
      let toplineoption = {
        legend: {
          top: '5%', left: 'center', itemWidth: 10, itemHeight: 10, itemGap: 25,
          textStyle: { color: '#fff', fontSize: 12 },
          data: lineData.legend
        },
        tooltip: { trigger: "axis",
          confine: true,
          backgroundColor: '#011235',
          borderWidth: 0,
          extraCssText: 'opacity:0.8',
          textStyle: {
            color: '#fff'
          },
        formatter: function (params) {
          let res = ''
          params.forEach((item,i) => {
            res += '<div style="display: flex;align-items:center;justify-content:space-between"><span>'+ item.marker + item.seriesName + '：</span><span>' +  item.value + lineData.unit+'</span></div> '
          })
          return params[0].name + res
        }
        },
        grid: {
          top: '18%', 
          left: "4%",
          right: "4%",
          bottom: "4%",
          containLabel: true
        },
        xAxis: [{
          type: 'category',
          data: lineData.category,
          boundaryGap: false,
          axisLine: {
            lineStyle: {
              color: '#00479D',
              width: 1
            }
          },
          axisLabel: {
            color: '#fff',
          },
          axisTick: {
            alignWithLabel: true
          }
        }],
        yAxis: [{
          type: 'value',
          axisLine: {
            show: true,
            lineStyle: {
              color: '#00479D',
              width: 1
            }
          },
          axisTick: {
            show: true
          },
          splitLine: {
            show: true,
            lineStyle: {
              type: "solid",
              width: 1,
              color: "#153068"
            }
          },
          axisLabel: {
            show: true,
            color: '#fff'
          }
        }],
        series: seriesData
      }
      toplinechart.resize()
      toplinechart.clear()
      toplinechart.setOption(toplineoption)
      console.log('line')
      window.addEventListener("resize", function () { toplinechart.resize() })
    },
    creatBar(botmLeftBarData) {
			let botmLeftChart = echarts.init(document.getElementById(botmLeftBarData.id))
      let barseries = []
      for (var i = 0; i < botmLeftBarData.legend.length; i++) {
        let itemStyle = {}
        if (botmLeftBarData.showStack) {
          itemStyle = {
            normal: {
              color:botmLeftBarData.color[i]
            }
          }
        } else {
          itemStyle = {
            normal: {
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [{
                  offset: 0,
                  color: botmLeftBarData.color[i][0]
                }, {
                  offset: 1,
                  color: botmLeftBarData.color[i][1]
                }],
                globalCoord: false // 缺省为 false
              },
            }
          }
        }
        barseries.push({
          name: botmLeftBarData.legend[i],
          type: 'bar',
          stack: botmLeftBarData.showStack ? 'total' : false,
          barMaxWidth: 28,
          itemStyle: itemStyle,
          data: botmLeftBarData.data[i]
        })
      }
      let botmLeftOption = {
        tooltip: {
          trigger: botmLeftBarData.legend.length==1 ? 'item' : 'axis',
          axisPointer: { type: 'shadow' },
          confine: true,
          backgroundColor: '#011235',
          borderWidth: 0,
          extraCssText: 'opacity:0.8',
          textStyle: {
            color: '#fff'
          },
          formatter: function(params) {
            if (Array.isArray(params)) {
             let res = ''
              params.forEach((item,i) => {
                res += '<div style="display: flex;align-items:center;justify-content:space-between"><span>'+ item.marker + item.seriesName + '：</span><span>' +  item.value + botmLeftBarData.unit+'</span></div> '
              })
              return params[0].name + res
            } else {
              return params.marker + params.name+'：'+ params.value + botmLeftBarData.unit
            }
          }
        },
        legend: {
          show: botmLeftBarData.legend.length>1 ? true : false,
          orient: 'horizontal', left: 'center', top: 2, itemWidth: 10, itemHeight: 10,
          textStyle: { color: '#ffffff', fontSize: 12 },
          data: botmLeftBarData.legend
        },
        grid: {
          top: '14%',
          left: "4%",
          right: "8%",
          bottom: "2%",
          containLabel: true
        },
        xAxis: [{
          type: 'category',
          axisLine: {
            show: true,
            lineStyle: {
              color: '#00479D'
            }
          },
          axisLabel: {
            textStyle: {
              color: '#ffffff',
              fontSize: 12
            },
          },
          axisTick: {
            alignWithLabel: true
          },
          data: botmLeftBarData.category
        }],
        yAxis: [{
          type: 'value',
          splitLine: {
            show: true,
            lineStyle: {
              type: "solid",
              width: 1,
              color: "#153068"
            }
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: '#00479D',
              width: 1
            }
          },
          axisLabel: {
            textStyle: {
              color: '#ffffff',
              fontSize: 12
            }
          },
          axisTick: {
            show: true
          },
        }],
        series: barseries
      }
      botmLeftChart.resize()
      botmLeftChart.clear()
      botmLeftChart.setOption(botmLeftOption)
      window.addEventListener("resize", function() {
        botmLeftChart.resize()
      })
		},
    creatPie(pieData) {
      let sum = pieData.data.reduce((prev, current) => prev + current.value, 0) // 数组求和
      pieData.data.forEach((item)=> {
        if (item.name == '其他') {
          item.labelLine = {
            lineStyle: {
              color: pieData.color[pieData.color.length-1]
            }
          }
        } else {
           item.labelLine = {
            lineStyle: {
              color: 'transparent'
            }
          }
        }
      })
      let myChart = echarts.init(document.getElementById(pieData.id))
      let option = {
        title: {
          text: '{a|' + sum + '}{c|条}',
          x: 'center',
          y: 'center',
          textStyle: {
            rich: {
              a: {
                padding: [10, 0],
                color: '#1EAFF5',
                fontSize: 20,
                align: 'center',
                fontWeight: 'bold'
              },
              c: {
                color: "#fff",
                fontSize: 12, 
              }
            }
          },
        },
        tooltip: {
          trigger: "item",
          labelLine: false,
          confine: true,
          backgroundColor: '#011235',
          borderWidth: 0,
          extraCssText: 'opacity:0.8',
          textStyle: {
            color: '#fff'
          },
          formatter: function(params) {
            return params.name + '：' + params.percent + '% (' + params.value + pieData.unit + ')'
          }
        },
        series: [{
          type: 'pie',
          radius: ['50%', '70%'],
          center: ['50%', '50%'],
          label: {
              position: 'outer',
              alignTo: 'none',
              bleedMargin: 0,
              color: '#FFFFFF',
              fontSize: 12,
              formatter: function(params) {
                if (params.data.name == '其他') {
                  return params.name + '：' + params.percent + '% (' + params.value + pieData.unit + ')'
                } else {
                  return ''
                }
              }
          },
          itemStyle: {
            normal: {
              color: function (params) {
               return pieData.color[params.dataIndex]
              }
            }
          },
          data: pieData.data,
        }, ]
      };
      myChart.resize();
      myChart.clear();
      myChart.setOption(option);
      window.addEventListener("resize", function() {
        myChart.resize();
      })
    },
    // getEchartData (params) {
    //   this.$get('metroapi/dataQuality/report/comScores',params).then(res => {
    //     if (res.httpCode == 1) {
    //       let obj = res.data
    //       obj.id = 'appGuage'
    //       this.$nextTick(() => this.creatGauge(obj))
    //     }
    //   })
    //   this.$get('metroapi/dataQuality/report/difDimScores',params).then(res => {
    //     if (res.httpCode == 1) {
    //       let obj2 = res.data
    //       obj2.id = 'appRadar'
    //       this.$nextTick(() => this.creatSolidRadar(obj2))
    //     }
    //   })
    // },
    async getEchartData1(url,params) {
      let rtnData 
      await this.$get( url, params).then(res=>{
        rtnData = res         
      })
      return rtnData
    },
    downReport(row) {
      this.downloadStatus = true
      this.queryParams = row
      let paramsObj = {
        beginDate: row.beginDate,
        endDate: row.endDate,
        appId: row.appId
      }
      this.getData(paramsObj)
    },
    downPdf () {
     this.$nextTick(()=> {
        let title = this.queryParams.reportName+'-'+this.queryParams.appName
        // 如果这个页面有左右移动,canvas 也要做响应的移动，不然会出现canvas 内容不全
        const xOffset = window.pageXOffset
        // 避免笔下误 灯下黑 统一写
        const A4_WIDTH = 592.28
        // const A4_HEIGHT = 841.89
        const A4_HEIGHT = 841.89
        let printDom = this.$refs.downReport
        // 根据A4的宽高计算DOM页面一页应该对应的高度
        let pageHeight = printDom.offsetWidth / A4_WIDTH * A4_HEIGHT
        // 将所有不允许被截断的元素进行处理
        let wholeNodes = document.querySelectorAll('.no-truncation') //pdf加分页防止内容截断
        for (let i = 0; i < wholeNodes.length; i++) {
          //1、 判断当前的不可分页元素是否在两页显示
          const topPageNum = Math.ceil((wholeNodes[i].offsetTop) / pageHeight) // wholeNodes[i].offsetTop 它返回当前元素相对于其 offsetParent 元素的顶部内边距的距离 如果算距离对顶部的距离它的父级不能设置定位，，否则结果为0
          const bottomPageNum = Math.ceil((wholeNodes[i].offsetTop + wholeNodes[i].offsetHeight) / pageHeight)
          if (topPageNum !== bottomPageNum) {
            //说明该dom会被截断
            // 2、插入空白块使被截断元素下移
            let divParent = wholeNodes[i].parentNode
            let newBlock = document.createElement('div')
            newBlock.className = 'emptyDiv'
            newBlock.style.background = '#06214d'
            // 3、计算插入空白块的高度 可以适当流出空间使得内容太靠边，根据自己需求而定
            let _H = topPageNum * pageHeight - wholeNodes[i].offsetTop
            newBlock.style.height = _H + 30 + 'px'
            divParent.insertBefore(newBlock, wholeNodes[i])
          }
        }
          // 以上完成dom层面的分页 可以转为图片进一步处理了
          html2canvas(printDom, { height: printDom.offsetHeight, width: printDom.offsetWidth, scrollX: -xOffset,backgroundColor: "#fff",allowTaint: true ,}).then(canvas => {
            //dom 已经转换为canvas 对象，可以将插入的空白块删除了
            let emptyDivs = document.querySelectorAll('.emptyDiv')
            for (let i = 0; i < emptyDivs.length; i++) {
              emptyDivs[i].parentNode.removeChild(emptyDivs[i])
            }
            // 有一点重复的代码
            let contentWidth = canvas.width
            let contentHeight = canvas.height
            let pageHeight = contentWidth / A4_WIDTH * A4_HEIGHT
            let leftHeight = contentHeight
            let position = 0
  
            let imgWidth = A4_WIDTH
            let imgHeight = A4_WIDTH / contentWidth * contentHeight
            let pageData = canvas.toDataURL('image/jpeg', 1.0)
            // if (isPrint) {
            //   //如果是打印，可以拿着分号页的数据 直接使用
            //   printJs({ printable: pageData, type: 'image', base64: true, documentTitle: '\u200E' })
            //   return
            // }
            //计算分页的pdf 
            let PDF = new JsPDF('', 'pt', 'a4')
            if (leftHeight <= pageHeight) {
              PDF.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight)
            } else {
              while (leftHeight > 0) {
                PDF.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight)
                leftHeight -= pageHeight
                position -= A4_HEIGHT
                if (leftHeight > 0) {
                  PDF.addPage()
                }
              }
            }
            this.downloadStatus = false
            PDF.save(title + '.pdf')
          })
       })
    },
    getData(params){
      let interface1 = this.getEchartData1('metroapi/dataQuality/report/comScores',params)
      let interface2 = this.getEchartData1('metroapi/dataQuality/report/difDimScores',params)
      let interface3 = this.getEchartData1('metroapi/dataQuality/report/comScoresTrend',params)
      let interface4 = this.getEchartData1('metroapi/dataQuality/report/comScores/model/bar',params)
      let interfaceTable4 = this.getEchartData1('metroapi/dataQuality/report/comScores/model/list',params)
      let interface5 = this.getEchartData1('metroapi/dataQuality/report/abnDataAnalysis/model/pie',params)
      let interfaceTable5 = this.getEchartData1('metroapi/dataQuality/report/abnDataAnalysis/model/list',params)
      let interface6 = this.getEchartData1('metroapi/dataQuality/report/abnSource/rule/bar',params)
      let interfaceTable6 = this.getEchartData1('metroapi/dataQuality/report/abnSource/rule/list',params)
      let interface7 = this.getEchartData1('metroapi/dataQuality/report/ruleConf/pie',params)
      let interfaceTable7 = this.getEchartData1('metroapi/dataQuality/report/ruleConf/list',params)
      this.$axiosAll([interface1,interface2,interface3,interface4,interfaceTable4,interface5,interfaceTable5,interface6,interfaceTable6,interface7,interfaceTable7]).then(res=> {
        if (res[0].httpCode == 1) {
          let obj = res[0].data
          obj.id = 'appGuage'
          this.$nextTick(() => this.creatGauge(obj))
        }
        if (res[1].httpCode == 1) {
          let obj2 = res[1].data
          obj2.id = 'appRadar'
          this.$nextTick(() => this.creatSolidRadar(obj2))
        }
        if (res[2].httpCode == 1) {
          let obj3 = res[2].data
          obj3.id = 'appLine3'
          obj3.unit = '%'
          obj3.lineColor = ['#31A4FD', '#86BE73']
          this.$nextTick(() => this.creatLine(obj3))
        }
        if (res[3].httpCode == 1) {
          let obj4 = res[3].data
          obj4.id = 'appLBar4'
          obj4.unit = '%'
          obj4.color = [['#0874E2','#62BAFD'], ['#86BE73', '#42A76D']]
          this.$nextTick(() => this.creatBar(obj4))
        }
        if (res[4].httpCode == 1) {
          this.tableData4 = res[4].data.data
          this.tableData4.forEach((item,index)=> {
            if (index == 0) {
              item.cellClassName = {
                paramLong01: 'total-records-table-cell',
                paramDou01: 'quality-table-cell',
                paramDou02: 'quality-table-cell',
              }
            }
          })
        }
         if (res[5].httpCode == 1) {
          let obj5 = res[5].data
          obj5.id = 'appPie5'
          obj5.unit = '条'
          obj5.color = this.pieColumnColor5
          this.$nextTick(() => this.creatPie(obj5))
        }
        if (res[6].httpCode == 1) {
          this.tableData5 = res[6].data.data
          this.tableData5.forEach((item,index)=> {
            if (index == 0) {
              item.cellClassName = {
                paramNum01: 'total-records-table-cell',
                paramNum02: 'total-exceptions-table-cell',
              }
            }
          })
        }
        if (res[7].httpCode == 1) {
          let obj6 = res[7].data
          obj6.id = 'appBar6'
          obj6.unit = '条'
          obj6.legend = ['']
          obj6.color = [['#0874E2','#62BAFD']]
          this.$nextTick(() => this.creatBar(obj6))
        }
        if (res[8].httpCode == 1) {
          this.tableData6 = res[8].data.data
          this.tableData6.forEach((item,index)=> {
          if (index == 0) {
            item.cellClassName = {
              paramLong01: 'total-records-table-cell',
              paramNum01: 'total-exceptions-table-cell'  
            }
          }
         })
        }
        if (res[9].httpCode == 1) {
          let obj7 = res[9].data
          obj7.id = 'appPie7'
          obj7.unit = '条'
          obj7.color = this.pieColumnColor7
          this.$nextTick(() => this.creatPie(obj7))
        }
         if (res[10].httpCode == 1) {
          this.tableData7 = res[10].data.data
          this.tableData7.forEach((item,index)=> {
            if (index == 0) {
              item.cellClassName = {
                paramNum01: 'quality-table-cell',
              }
            }
          })
        }
        this.$nextTick(()=> {
          if (this.downloadStatus) {
            setTimeout(() => {
              this.downPdf()
            }, 1000)
          }
        })
      })
    }
  }
};
</script>
<style lang="stylus">
* {
  margin: 0;
  padding: 0;
}
.quality-report {
  // z-index:9999;
  width: 100%;
  position: relative;
  display: flex;
  justify-content: center;
  background: #06214D;
}
</style>
<style lang="stylus" scoped>
.nav-content {
  position:fixed;
  right: 10PX;
  top: 164px;
  display: flex;
  flex-direction: column;
  z-index: 99;
  // width: 108px;
  /* height: 44px; */
  // background: #214388;
  // header:300px;
} 
.nav-list {
  height: 48px;
  line-height: 48px;
  text-align: center;
  color: #FFFFFF;
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 20px;
  background: linear-gradient(-79deg, #062D6F, #0185EA);
  opacity: 0.6;
  padding: 0 10px;
}
.report-container {
  width: 70%;
  margin-bottom: 20px;
  position: relative;
}
.report-header {
  text-align: center;
  background: url('../assets/images/reportBg.png') no-repeat center;
  background-size: 100% 100%;
  height: 132px;
}
.header-title {
  font-size: 36px;
  font-weight: bold;
  color: #FFFFFF;
  padding-top: 32px;
  line-height: 38px;
}
.header-subtitle {
  font-size: 14px;
  font-weight: 400;
  color: #FFFFFF;
  margin: 28px 0 22px;
  line-height: 14px;
  display: flex;
  justify-content: space-around;
}
.report-content {
  background: #0F2D5E;
  padding: 0 16px;
}
.report-section {
  margin: 18px 0;
}
.report-section:first-child {
  margin-top: 0;
  padding-top: 18px;
}
.title-content{
  width: 100%;
  height: 33px;
  padding-bottom: 20px;
  border-bottom: 2px solid #E5E5E5;
  margin-bottom: 24px;
}
.title-line {
  background: #1E58B8;
  border-radius: 4px;
  height: 45px;
  padding-left: 20px;
  display: flex;
  align-items: center;
  font-size: 14px;
  color: #FFFFFF;
  span {
    height: 18px;
    border-left: 1PX solid #FFFFFF;
    padding-left: 10px;
  }
}
.report-echarts {
  .report-echarts-row {
    margin-top: 10px;
    margin-bottom: 10px;
  }
  .report-echarts-main {
    // height: 310px;
    border: 1px solid #2259B3;
    border-radius: 4px;
  }
  .echarts-title {
    font-size: 16px;
    font-weight: 400;
    color: #31A4FD;
    line-height: 16px;
    padding: 18px 18px 0 18px;
  }
  .echarts-sub-title {
    font-size: 12px;
    color: #fff;
    padding: 20px 18px 0 18px;
  }
}
.echart-detail {
  width: 100%;
  height: 290px;
}
// .echart-pie {
//   width: 100%;
//   height: 350px;
// }
.current-item {
  background: linear-gradient(-79deg, #0185EA, #9FD0F5);
}
>>> .table-legend-list .ivu-table-cell{
    display: flex;
    align-items: center;
    justify-content: center;
}
.table-legend {
  width: 12px;
  height: 12px;
  border-radius: 4px;
  display:inline-block;
}
.report-echarts-table {
  padding: 20px 40px;
}
.report-echarts-right-table {
  padding-top: 0;
  padding-left: 0;
}
>>> .report-table-detail .ivu-table-stripe-even td {
  background-color: #0F2D5E;
  height: 40px;
}
>>> .report-table-detail .ivu-table-stripe-odd td {
  background-color: #15376F;
  height: 40px;
}
>>> .report-echarts-table .ivu-table .ivu-table-header .ivu-table-cell {
 white-space: pre;
}
>>> .ivu-row .ivu-col {
 position: static;
}
>>> .quality-table-cell span{
  color:#5EB6FC;
}
>>> .total-records-table-cell span {
  color: #42C151;
}
>>> .total-exceptions-table-cell span {
  color: #D70101;
}
</style>