|
|
@@ -0,0 +1,2037 @@
|
|
|
+<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>数据范围：全部</span>
|
|
|
+ <span>报告类型：{{queryParams.reportClassName}}</span>
|
|
|
+ <span v-if="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="guage" class="echart-detail"></div>
|
|
|
+ </div>
|
|
|
+ </Col>
|
|
|
+ <Col :span="12">
|
|
|
+ <div class="report-echarts-main">
|
|
|
+ <div class="echarts-title">2. 评估维度</div>
|
|
|
+ <div id="radar" 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="line3" 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="bar4" 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>
|
|
|
+ <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 id="bar5" class="echart-detail"></div>
|
|
|
+ <div class="report-echarts-table">
|
|
|
+ <Table :columns="columns5" :data="tableData5" 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">6. 数据异常分析 - 按应用</div>
|
|
|
+ <div class="echarts-sub-title">数据质量检测异常，按来源应用区分数据如下：</div>
|
|
|
+ <Row :gutter="16" align="middle">
|
|
|
+ <Col :span="8">
|
|
|
+ <div id="pie6" class="echart-detail echart-pie"></div>
|
|
|
+ </Col>
|
|
|
+ <Col :span="16">
|
|
|
+ <div class="report-echarts-table report-echarts-right-table">
|
|
|
+ <Table :columns="columnsRule" :data="tableData6" 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:'+tableColumnColor6[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">7. 数据异常分析 - 按规则类型</div>
|
|
|
+ <div class="echarts-sub-title">数据质量检测异常，按来源规则类型区分数据如下：</div>
|
|
|
+ <Row :gutter="16" align="middle">
|
|
|
+ <Col :span="8">
|
|
|
+ <div id="pie7" class="echart-detail"></div>
|
|
|
+ </Col>
|
|
|
+ <Col :span="16">
|
|
|
+ <div class="report-echarts-table report-echarts-right-table">
|
|
|
+ <Table :columns="columnsRule" :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="paramDou01">
|
|
|
+ <span :style="index==0 ? 'color:#ECCF0C': ''">{{row.paramDou01}}%</span>
|
|
|
+ </template>
|
|
|
+ </Table>
|
|
|
+ </div>
|
|
|
+ </Col>
|
|
|
+ </Row>
|
|
|
+ </div>
|
|
|
+ </Col>
|
|
|
+ </Row>
|
|
|
+ </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">8. 分规则数据质量分析 - 一致性</div>
|
|
|
+ <div class="echarts-sub-title">数据一致性检测异常，按来源应用区分数据如下：</div>
|
|
|
+ <Row :gutter="16" align="middle">
|
|
|
+ <Col :span="8">
|
|
|
+ <div id="pie8" class="echart-detail"></div>
|
|
|
+ </Col>
|
|
|
+ <Col :span="16">
|
|
|
+ <div class="report-echarts-table report-echarts-right-table">
|
|
|
+ <Table :columns="columnsRule" :data="tableData8" 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:'+tableColumnColor8[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">9. 分规则数据质量分析 - 完整性</div>
|
|
|
+ <div class="echarts-sub-title">数据完整性检测异常，按来源应用区分数据如下：</div>
|
|
|
+ <Row :gutter="16" align="middle">
|
|
|
+ <Col :span="8">
|
|
|
+ <div id="pie9" class="echart-detail"></div>
|
|
|
+ </Col>
|
|
|
+ <Col :span="16">
|
|
|
+ <div class="report-echarts-table report-echarts-right-table">
|
|
|
+ <Table :columns="columnsRule" :data="tableData9" 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:'+tableColumnColor9[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">10. 分规则数据质量分析 - 准确性</div>
|
|
|
+ <div class="echarts-sub-title">数据准确性检测异常，按来源应用区分数据如下：</div>
|
|
|
+ <Row :gutter="16" align="middle">
|
|
|
+ <Col :span="8">
|
|
|
+ <div id="pie10" class="echart-detail"></div>
|
|
|
+ </Col>
|
|
|
+ <Col :span="16">
|
|
|
+ <div class="report-echarts-table report-echarts-right-table">
|
|
|
+ <Table :columns="columnsRule" :data="tableData10" 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:'+tableColumnColor10[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">11. 分规则数据质量分析 - 及时性（数据采集）</div>
|
|
|
+ <div class="echarts-sub-title">数据采集及时性检测异常，按来源应用区分数据如下：</div>
|
|
|
+ <Row :gutter="16" align="middle">
|
|
|
+ <Col :span="8">
|
|
|
+ <div id="pie11" class="echart-detail"></div>
|
|
|
+ </Col>
|
|
|
+ <Col :span="16">
|
|
|
+ <div class="report-echarts-table report-echarts-right-table">
|
|
|
+ <Table :columns="columnsRule" :data="tableData11" 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:'+tableColumnColor11[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">12. 分规则数据质量分析 - 及时性（数据入库）</div>
|
|
|
+ <div class="echarts-sub-title">数据入库及时性检测异常，按来源应用区分数据如下：</div>
|
|
|
+ <Row :gutter="16" align="middle">
|
|
|
+ <Col :span="8">
|
|
|
+ <div id="pie12" class="echart-detail"></div>
|
|
|
+ </Col>
|
|
|
+ <Col :span="16">
|
|
|
+ <div class="report-echarts-table report-echarts-right-table">
|
|
|
+ <Table :columns="columnsRule" :data="tableData12" 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:'+tableColumnColor12[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>
|
|
|
+ </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">13. 异常数来源 - 应用排名 TOP10</div>
|
|
|
+ <div class="echarts-sub-title">数据质量检查错数按来源应用排名如下：</div>
|
|
|
+ <Row :gutter="16">
|
|
|
+ <Col :span="24">
|
|
|
+ <div id="bar13" class="echart-detail"></div>
|
|
|
+ <div class="report-echarts-table">
|
|
|
+ <Table :columns="columnsQuality" :data="tableData13" 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>
|
|
|
+ <Row :gutter="16" class-name="report-echarts-row">
|
|
|
+ <Col :span="24">
|
|
|
+ <div class="report-echarts-main no-truncation">
|
|
|
+ <div class="echarts-title">14. 异常数来源 - 质量规则 TOP10</div>
|
|
|
+ <div class="echarts-sub-title">数据质量检查错数按规则排名如下：</div>
|
|
|
+ <Row :gutter="16">
|
|
|
+ <Col :span="24">
|
|
|
+ <div id="bar14" class="echart-detail"></div>
|
|
|
+ <div class="report-echarts-table">
|
|
|
+ <Table :columns="columnsException" :data="tableData14" 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>
|
|
|
+ <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">15.规则配置状况</div>
|
|
|
+ <div class="echarts-sub-title">规则配置数量级及占比</div>
|
|
|
+ <Row :gutter="16" align="middle">
|
|
|
+ <Col :span="8">
|
|
|
+ <div id="pie15" class="echart-detail"></div>
|
|
|
+ </Col>
|
|
|
+ <Col :span="16">
|
|
|
+ <div class="report-echarts-table report-echarts-right-table">
|
|
|
+ <Table :columns="columnsConfig" :data="tableData15" 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:'+tableColumnColor15[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: "DownQualityReport",
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ scroll: '',
|
|
|
+ navList: ['综合数据质量分析', '数据异常分析', '分规则数据质量分析', '数据质量排名统计', '规则配置状况'],
|
|
|
+ currentIndex:0,
|
|
|
+ listBoxState: true,//点击导航栏时，暂时停止监听页面滚动
|
|
|
+ queryParams: {reportClassName:'',beginDate:'',endDate: ''},
|
|
|
+ columns4: [
|
|
|
+ {
|
|
|
+ title: '来源应用',
|
|
|
+ key: 'xAxis',
|
|
|
+ align: 'center',
|
|
|
+ ellipsis: true,
|
|
|
+ tooltip: true
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '记录总数',
|
|
|
+ key: 'paramNum01',
|
|
|
+ align: 'center',
|
|
|
+ ellipsis: true,
|
|
|
+ tooltip: true
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '本期质量',
|
|
|
+ slot: 'paramDou01',
|
|
|
+ align: 'center',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '上期质量',
|
|
|
+ slot: 'paramDou02',
|
|
|
+ align: 'center',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '趋势',
|
|
|
+ slot: 'paramDou04',
|
|
|
+ align: 'center',
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ columns5: [
|
|
|
+ {
|
|
|
+ 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: [],
|
|
|
+ tableData8: [],
|
|
|
+ tableData9: [],
|
|
|
+ tableData10: [],
|
|
|
+ tableData11: [],
|
|
|
+ tableData12: [],
|
|
|
+ tableData13: [],
|
|
|
+ tableData14: [],
|
|
|
+ tableData15: [],
|
|
|
+ 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',
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ columnsQuality: [
|
|
|
+ {
|
|
|
+ title: '来源应用',
|
|
|
+ key: 'xAxis',
|
|
|
+ align: 'center',
|
|
|
+ ellipsis: true,
|
|
|
+ tooltip: true
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '本期质量',
|
|
|
+ slot: 'paramDou01',
|
|
|
+ align: 'center',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '异常总数',
|
|
|
+ key: 'paramLong02',
|
|
|
+ align: 'center',
|
|
|
+ ellipsis: true,
|
|
|
+ tooltip: true
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '异常数\n总体占比',
|
|
|
+ slot: 'paramDou02',
|
|
|
+ align: 'center',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '准确性策略\n异常总数',
|
|
|
+ key: 'paramNum01',
|
|
|
+ align: 'center',
|
|
|
+ ellipsis: true,
|
|
|
+ tooltip: true
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '一致性策略\n异常总数',
|
|
|
+ key: 'paramNum02',
|
|
|
+ align: 'center',
|
|
|
+ ellipsis: true,
|
|
|
+ tooltip: true
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '完整性策略\n异常总数',
|
|
|
+ key: 'paramNum03',
|
|
|
+ align: 'center',
|
|
|
+ ellipsis: true,
|
|
|
+ tooltip: true
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '及时性\n(数据采集）异常',
|
|
|
+ key: 'paramNum04',
|
|
|
+ align: 'center',
|
|
|
+ ellipsis: true,
|
|
|
+ tooltip: true
|
|
|
+ },{
|
|
|
+ title: '及时性\n(数据入库）异常',
|
|
|
+ key: 'paramNum05',
|
|
|
+ align: 'center',
|
|
|
+ ellipsis: true,
|
|
|
+ tooltip: true
|
|
|
+ }],
|
|
|
+ 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',
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ pieColumnColor6: ['#58D9F9','#4992FF','#7CFFB2','#FF6E76','#FDDD60','#646AD9'],
|
|
|
+ tableColumnColor6: ['','#58D9F9','#4992FF','#7CFFB2','#FF6E76','#FDDD60'],
|
|
|
+ pieColumnColor7: ['#646AD9','#FDDD60','#FF6E76','#7CFFB2','#4992FF','#58D9F9'],
|
|
|
+ tableColumnColor7: ['','#646AD9','#FDDD60','#FF6E76','#7CFFB2','#4992FF'],
|
|
|
+ pieColumnColor8: ['#FDDD60','#FF6E76','#7CFFB2','#4992FF','#58D9F9','#646AD9'],
|
|
|
+ tableColumnColor8: ['','#FDDD60','#FF6E76','#7CFFB2','#4992FF','#58D9F9'],
|
|
|
+ pieColumnColor9: ['#FF6E76','#7CFFB2','#4992FF','#58D9F9','#646AD9','#FDDD60'],
|
|
|
+ tableColumnColor9: ['','#FF6E76','#7CFFB2','#4992FF','#58D9F9','#646AD9'],
|
|
|
+ pieColumnColor10: ['#7CFFB2','#4992FF','#58D9F9','#646AD9','#FDDD60','#FF6E76'],
|
|
|
+ tableColumnColor10: ['','#7CFFB2','#4992FF','#58D9F9','#646AD9','#FDDD60'],
|
|
|
+ pieColumnColor11: ['#4992FF','#58D9F9','#646AD9','#FDDD60','#FF6E76','#7CFFB2'],
|
|
|
+ tableColumnColor11: ['','#4992FF','#58D9F9','#646AD9','#FDDD60','#FF6E76'],
|
|
|
+ pieColumnColor12: ['#4992FF','#7CFFB2','#FF6E76','#FDDD60','#646AD9','#58D9F9'],
|
|
|
+ tableColumnColor12: ['','#4992FF','#7CFFB2','#FF6E76','#FDDD60','#646AD9'],
|
|
|
+ pieColumnColor15: ['#FF6E76','#646AD9','#FDDD60','#7CFFB2','#4992FF','#58D9F9'],
|
|
|
+ tableColumnColor15: ['','#FF6E76','#646AD9','#FDDD60','#7CFFB2','#4992FF'],
|
|
|
+ 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
|
|
|
+ }
|
|
|
+ this.downloadStatus = false
|
|
|
+ // this.getEchartData(parmasObj)
|
|
|
+ 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;
|
|
|
+ // if (this.scroll >= 400) { //滚动条滚动的距离大于等于400时，显示BackTop组件
|
|
|
+ // this.$refs.BackTop.backTop = true
|
|
|
+ // } else {
|
|
|
+ // this.$refs.BackTop.backTop = false
|
|
|
+ // }
|
|
|
+ },
|
|
|
+ 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 = {
|
|
|
+ // title: {
|
|
|
+ // text: '单位：'+lineData.unit,
|
|
|
+ // top: '5%',
|
|
|
+ // right: 10,
|
|
|
+ // textStyle: {
|
|
|
+ // color: '#666666',
|
|
|
+ // fontSize: 14
|
|
|
+ // }
|
|
|
+ // },
|
|
|
+ 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)
|
|
|
+ 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,
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ },
|
|
|
+ // legend: {
|
|
|
+ // orient: "horizontal",
|
|
|
+ // top: '4%',
|
|
|
+ // x: "center",
|
|
|
+ // itemWidth: 10,
|
|
|
+ // itemHeight: 10,
|
|
|
+ // textStyle: {
|
|
|
+ // color: "#ffffff",
|
|
|
+ // fontSize: 12
|
|
|
+ // },
|
|
|
+ // data: pieData.legend
|
|
|
+ // },
|
|
|
+ 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: [{
|
|
|
+ color: pieData.color,
|
|
|
+ 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 ''
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ 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 = 'guage'
|
|
|
+ this.$nextTick(() => this.creatGauge(obj))
|
|
|
+ }
|
|
|
+ })
|
|
|
+ this.$get('metroapi/dataQuality/report/difDimScores',params).then(res => {
|
|
|
+ if (res.httpCode == 1) {
|
|
|
+ let obj2 = res.data
|
|
|
+ obj2.id = 'radar'
|
|
|
+ this.$nextTick(() => this.creatSolidRadar(obj2))
|
|
|
+ }
|
|
|
+ })
|
|
|
+ this.$get('metroapi/dataQuality/report/comScoresTrend',params).then(res => {
|
|
|
+ if (res.httpCode == 1) {
|
|
|
+ let obj3 = res.data
|
|
|
+ obj3.id = 'line3'
|
|
|
+ obj3.unit = '%'
|
|
|
+ obj3.lineColor = ['#31A4FD', '#86BE73']
|
|
|
+ this.$nextTick(() => this.creatLine(obj3))
|
|
|
+ }
|
|
|
+ })
|
|
|
+ this.$get('metroapi/dataQuality/report/comScores/appType/bar',params).then(res => {
|
|
|
+ if (res.httpCode == 1) {
|
|
|
+ let obj4 = res.data
|
|
|
+ obj4.id = 'bar4'
|
|
|
+ obj4.unit = '%'
|
|
|
+ obj4.color = [['#0874E2','#62BAFD'], ['#86BE73', '#42A76D']]
|
|
|
+ this.$nextTick(() => this.creatBar(obj4))
|
|
|
+ }
|
|
|
+ })
|
|
|
+ this.$get('metroapi/dataQuality/report/comScores/appType/list',params).then(res => {
|
|
|
+ if (res.httpCode == 1) {
|
|
|
+ this.tableData4 = res[4].data.data
|
|
|
+ this.tableData4.forEach((item,index)=> {
|
|
|
+ if (index == 0) {
|
|
|
+ item.cellClassName = {
|
|
|
+ paramNum01: 'total-records-table-cell',
|
|
|
+ paramDou01: 'quality-table-cell',
|
|
|
+ paramDou02: 'quality-table-cell',
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ })
|
|
|
+ this.$get('metroapi/dataQuality/report/comScores/model/bar',params).then(res => {
|
|
|
+ if (res.httpCode == 1) {
|
|
|
+ let obj5 = res.data
|
|
|
+ obj5.id = 'bar5'
|
|
|
+ obj5.unit = '%'
|
|
|
+ obj5.color = [['#0874E2','#62BAFD'], ['#86BE73', '#42A76D']]
|
|
|
+ this.$nextTick(() => this.creatBar(obj5))
|
|
|
+ }
|
|
|
+ })
|
|
|
+
|
|
|
+ },
|
|
|
+ downReport(row) {
|
|
|
+ this.downloadStatus = true
|
|
|
+ this.queryParams = row
|
|
|
+ let paramsObj = {
|
|
|
+ beginDate: row.beginDate,
|
|
|
+ endDate: row.endDate
|
|
|
+ }
|
|
|
+ this.getData(paramsObj)
|
|
|
+ },
|
|
|
+ async getEchartData1(url,params) { //async 函数返回的是一个 Promise 对象，所以在最外层不能用 await 获取其返回值的情况下，我们当然应该用原来的方式：then() 链来处理这个 Promise 对象
|
|
|
+ let rtnData
|
|
|
+ await this.$get( url, params).then(res=>{ //await让被调用的函数都完成后并返回结果 （await只在 async 函数中有效）
|
|
|
+ rtnData = res
|
|
|
+ })
|
|
|
+ return rtnData
|
|
|
+ },
|
|
|
+ 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/appType/bar',params)
|
|
|
+ let interfaceTable4 = this.getEchartData1('metroapi/dataQuality/report/comScores/appType/list',params)
|
|
|
+ let interface5 = this.getEchartData1('metroapi/dataQuality/report/comScores/model/bar',params)
|
|
|
+ let interfaceTable5 = this.getEchartData1('metroapi/dataQuality/report/comScores/model/list',params)
|
|
|
+ let interface6 = this.getEchartData1('metroapi/dataQuality/report/abnDataAnalysis/appType/pie',params)
|
|
|
+ let interfaceTable6 = this.getEchartData1('metroapi/dataQuality/report/abnDataAnalysis/appType/list',params)
|
|
|
+ let interface7 = this.getEchartData1('metroapi/dataQuality/report/abnDataAnalysis/model/pie',params)
|
|
|
+ let interfaceTable7 = this.getEchartData1('metroapi/dataQuality/report/abnDataAnalysis/model/list',params)
|
|
|
+ let params8 = params
|
|
|
+ params8.modelType = '一致性'
|
|
|
+ let interface8 = this.getEchartData1('metroapi/dataQuality/report/abnDataAnalysis/appType/model/pie',params8)
|
|
|
+ let interfaceTable8 = this.getEchartData1('metroapi/dataQuality/report/abnDataAnalysis/appType/model/list',params8)
|
|
|
+ let params9 = params
|
|
|
+ params9.modelType = '完整性'
|
|
|
+ let interface9 = this.getEchartData1('metroapi/dataQuality/report/abnDataAnalysis/appType/model/pie',params9)
|
|
|
+ let interfaceTable9 = this.getEchartData1('metroapi/dataQuality/report/abnDataAnalysis/appType/model/list',params9)
|
|
|
+ let params10 = params
|
|
|
+ params10.modelType = '准确性'
|
|
|
+ let interface10 = this.getEchartData1('metroapi/dataQuality/report/abnDataAnalysis/appType/model/pie',params10)
|
|
|
+ let interfaceTable10 = this.getEchartData1('metroapi/dataQuality/report/abnDataAnalysis/appType/model/list',params10)
|
|
|
+ let params11 = params
|
|
|
+ params11.modelType = '及时性（数据采集）'
|
|
|
+ let interface11 = this.getEchartData1('metroapi/dataQuality/report/abnDataAnalysis/appType/model/pie',params11)
|
|
|
+ let interfaceTable11 = this.getEchartData1('metroapi/dataQuality/report/abnDataAnalysis/appType/model/list',params11)
|
|
|
+ let params12 = params
|
|
|
+ params12.modelType = '及时性（数据入库）'
|
|
|
+ let interface12 = this.getEchartData1('metroapi/dataQuality/report/abnDataAnalysis/appType/model/pie',params12)
|
|
|
+ let interfaceTable12 = this.getEchartData1('metroapi/dataQuality/report/abnDataAnalysis/appType/model/list',params12)
|
|
|
+ let interface13 = this.getEchartData1('metroapi/dataQuality/report/abnSource/appType/bar',params)
|
|
|
+ let interfaceTable13 = this.getEchartData1('metroapi/dataQuality/report/abnSource/appType/list',params)
|
|
|
+ let interface14 = this.getEchartData1('metroapi/dataQuality/report/abnSource/rule/bar',params)
|
|
|
+ let interfaceTable14 = this.getEchartData1('metroapi/dataQuality/report/abnSource/rule/list',params)
|
|
|
+ let interface15 = this.getEchartData1('metroapi/dataQuality/report/ruleConf/pie',params)
|
|
|
+ let interfaceTable15 = this.getEchartData1('metroapi/dataQuality/report/ruleConf/list',params)
|
|
|
+ this.$axiosAll([interface1,interface2,interface3,interface4,interfaceTable4,interface5,interfaceTable5,interface6,interfaceTable6,interface7,interfaceTable7,interface8,interfaceTable8,interface9,interfaceTable9,interface10,interfaceTable10,interface11,interfaceTable11,interface12,interfaceTable12,interface13,interfaceTable13,interface14,interfaceTable14,interface15,interfaceTable15]).then(res=> {
|
|
|
+ if (res[0].httpCode == 1) {
|
|
|
+ let obj = res[0].data
|
|
|
+ obj.id = 'guage'
|
|
|
+ this.$nextTick(() => this.creatGauge(obj))
|
|
|
+ }
|
|
|
+ if (res[1].httpCode == 1) {
|
|
|
+ let obj2 = res[1].data
|
|
|
+ obj2.id = 'radar'
|
|
|
+ this.$nextTick(() => this.creatSolidRadar(obj2))
|
|
|
+ }
|
|
|
+ if (res[2].httpCode == 1) {
|
|
|
+ let obj3 = res[2].data
|
|
|
+ obj3.id = 'line3'
|
|
|
+ obj3.unit = '%'
|
|
|
+ obj3.lineColor = ['#31A4FD', '#86BE73']
|
|
|
+ this.$nextTick(() => this.creatLine(obj3))
|
|
|
+ }
|
|
|
+ if (res[3].httpCode == 1) {
|
|
|
+ let obj4 = res[3].data
|
|
|
+ obj4.id = 'bar4'
|
|
|
+ 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 = {
|
|
|
+ paramNum01: 'total-records-table-cell',
|
|
|
+ paramDou01: 'quality-table-cell',
|
|
|
+ paramDou02: 'quality-table-cell',
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ if (res[5].httpCode == 1) {
|
|
|
+ let obj5 = res[5].data
|
|
|
+ obj5.id = 'bar5'
|
|
|
+ obj5.unit = '%'
|
|
|
+ obj5.color = [['#0874E2','#62BAFD'], ['#86BE73', '#42A76D']]
|
|
|
+ this.$nextTick(() => this.creatBar(obj5))
|
|
|
+ }
|
|
|
+ if (res[6].httpCode == 1) {
|
|
|
+ this.tableData5 = res[6].data.data
|
|
|
+ this.tableData5.forEach((item,index)=> {
|
|
|
+ if (index == 0) {
|
|
|
+ item.cellClassName = {
|
|
|
+ paramLong01: 'total-records-table-cell',
|
|
|
+ paramDou01: 'quality-table-cell',
|
|
|
+ paramDou02: 'quality-table-cell',
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ if (res[7].httpCode == 1) {
|
|
|
+ let obj6 = res[7].data
|
|
|
+ obj6.id = 'pie6'
|
|
|
+ obj6.unit = '条'
|
|
|
+ obj6.color = this.pieColumnColor6
|
|
|
+ this.$nextTick(() => this.creatPie(obj6))
|
|
|
+ }
|
|
|
+ if (res[8].httpCode == 1) {
|
|
|
+ this.tableData6 = res[8].data.data
|
|
|
+ this.tableData6.forEach((item,index)=> {
|
|
|
+ if (index == 0) {
|
|
|
+ item.cellClassName = {
|
|
|
+ paramNum01: 'total-records-table-cell',
|
|
|
+ paramNum02: 'total-exceptions-table-cell',
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ if (res[9].httpCode == 1) {
|
|
|
+ let obj7 = res[9].data
|
|
|
+ obj7.id = 'pie7'
|
|
|
+ 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: 'total-records-table-cell',
|
|
|
+ paramNum02: 'total-exceptions-table-cell',
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ if (res[11].httpCode == 1) {
|
|
|
+ let obj8 = res[11].data
|
|
|
+ obj8.id = 'pie8'
|
|
|
+ obj8.unit = '条'
|
|
|
+ obj8.color = this.pieColumnColor8
|
|
|
+ this.$nextTick(() => this.creatPie(obj8))
|
|
|
+ }
|
|
|
+ if (res[12].httpCode == 1) {
|
|
|
+ this.tableData8 = res[12].data.data
|
|
|
+ this.tableData8.forEach((item,index)=> {
|
|
|
+ if (index == 0) {
|
|
|
+ item.cellClassName = {
|
|
|
+ paramNum01: 'total-records-table-cell',
|
|
|
+ paramNum02: 'total-exceptions-table-cell',
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ if (res[13].httpCode == 1) {
|
|
|
+ let obj9 = res[13].data
|
|
|
+ obj9.id = 'pie9'
|
|
|
+ obj9.unit = '条'
|
|
|
+ obj9.color = this.pieColumnColor9
|
|
|
+ this.$nextTick(() => this.creatPie(obj9))
|
|
|
+ }
|
|
|
+ if (res[14].httpCode == 1) {
|
|
|
+ this.tableData9 = res[14].data.data
|
|
|
+ this.tableData9.forEach((item,index)=> {
|
|
|
+ if (index == 0) {
|
|
|
+ item.cellClassName = {
|
|
|
+ paramNum01: 'total-records-table-cell',
|
|
|
+ paramNum02: 'total-exceptions-table-cell',
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ if (res[15].httpCode == 1) {
|
|
|
+ let obj10 = res[15].data
|
|
|
+ obj10.id = 'pie10'
|
|
|
+ obj10.unit = '条'
|
|
|
+ obj10.color = this.pieColumnColor10
|
|
|
+ this.$nextTick(() => this.creatPie(obj10))
|
|
|
+ }
|
|
|
+ if (res[16].httpCode == 1) {
|
|
|
+ this.tableData10 = res[16].data.data
|
|
|
+ this.tableData10.forEach((item,index)=> {
|
|
|
+ if (index == 0) {
|
|
|
+ item.cellClassName = {
|
|
|
+ paramNum01: 'total-records-table-cell',
|
|
|
+ paramNum02: 'total-exceptions-table-cell',
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ if (res[17].httpCode == 1) {
|
|
|
+ let obj11 = res[17].data
|
|
|
+ obj11.id = 'pie11'
|
|
|
+ obj11.unit = '条'
|
|
|
+ obj11.color = this.pieColumnColor11
|
|
|
+ this.$nextTick(() => this.creatPie(obj11))
|
|
|
+ }
|
|
|
+ if (res[18].httpCode == 1) {
|
|
|
+ this.tableData11 = res[18].data.data
|
|
|
+ this.tableData11.forEach((item,index)=> {
|
|
|
+ if (index == 0) {
|
|
|
+ item.cellClassName = {
|
|
|
+ paramNum01: 'total-records-table-cell',
|
|
|
+ paramNum02: 'total-exceptions-table-cell',
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ if (res[19].httpCode == 1) {
|
|
|
+ let obj12 = res[19].data
|
|
|
+ obj12.id = 'pie12'
|
|
|
+ obj12.unit = '条'
|
|
|
+ obj12.color = this.pieColumnColor12
|
|
|
+ this.$nextTick(() => this.creatPie(obj12))
|
|
|
+ }
|
|
|
+ if (res[20].httpCode == 1) {
|
|
|
+ this.tableData12 = res[20].data.data
|
|
|
+ this.tableData12.forEach((item,index)=> {
|
|
|
+ if (index == 0) {
|
|
|
+ item.cellClassName = {
|
|
|
+ paramNum01: 'total-records-table-cell',
|
|
|
+ paramNum02: 'total-exceptions-table-cell',
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ if (res[21].httpCode == 1) {
|
|
|
+ let obj13 = res[21].data
|
|
|
+ obj13.id = 'bar13'
|
|
|
+ obj13.unit = '条'
|
|
|
+ obj13.showStack = true
|
|
|
+ obj13.color = ['#31A4FD','#62BAFD','#646AD9', '#58D9F9','#d5affb']
|
|
|
+ this.$nextTick(() => this.creatBar(obj13))
|
|
|
+ }
|
|
|
+ if (res[22].httpCode == 1) {
|
|
|
+ this.tableData13 = res[22].data.data
|
|
|
+ this.tableData13.forEach((item,index)=> {
|
|
|
+ if (index == 0) {
|
|
|
+ item.cellClassName = {
|
|
|
+ paramNum01: 'quality-table-cell',
|
|
|
+ paramNum02: 'quality-table-cell',
|
|
|
+ paramNum03: 'quality-table-cell',
|
|
|
+ paramNum04: 'quality-table-cell',
|
|
|
+ paramNum05: 'quality-table-cell',
|
|
|
+ paramLong02: 'quality-table-cell',
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ if (res[23].httpCode == 1) {
|
|
|
+ let obj14 = res[23].data
|
|
|
+ obj14.id = 'bar14'
|
|
|
+ obj14.unit = '条'
|
|
|
+ obj14.legend = ['']
|
|
|
+ obj14.color = [['#0874E2','#62BAFD']]
|
|
|
+ this.$nextTick(() => this.creatBar(obj14))
|
|
|
+ }
|
|
|
+ if (res[24].httpCode == 1) {
|
|
|
+ this.tableData14 = res[24].data.data
|
|
|
+ this.tableData14.forEach((item,index)=> {
|
|
|
+ if (index == 0) {
|
|
|
+ item.cellClassName = {
|
|
|
+ paramLong01: 'total-records-table-cell',
|
|
|
+ paramNum01: 'total-exceptions-table-cell'
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ if (res[25].httpCode == 1) {
|
|
|
+ let obj15 = res[25].data
|
|
|
+ obj15.id = 'pie15'
|
|
|
+ obj15.unit = '条'
|
|
|
+ obj15.color = this.pieColumnColor15
|
|
|
+ this.$nextTick(() => this.creatPie(obj15))
|
|
|
+ }
|
|
|
+ if (res[26].httpCode == 1) {
|
|
|
+ this.tableData15 = res[26].data.data
|
|
|
+ this.tableData15.forEach((item,index)=> {
|
|
|
+ if (index == 0) {
|
|
|
+ item.cellClassName = {
|
|
|
+ paramNum01: 'quality-table-cell',
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ this.$nextTick(()=> {
|
|
|
+ if (this.downloadStatus) {
|
|
|
+ setTimeout(() => {
|
|
|
+ this.downPdf()
|
|
|
+ }, 1000)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ })
|
|
|
+ },
|
|
|
+ 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')
|
|
|
+ })
|
|
|
+ })
|
|
|
+ },
|
|
|
+ }
|
|
|
+};
|
|
|
+</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;
|
|
|
+ // height: 100%;
|
|
|
+}
|
|
|
+// .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>
|
