simulation-front/src/views/workManagement/sceneReport.vue

<template>
  <div class="report_box">
    <div class="pdf_box" ref="pdfContent">
      <!-- 报告封面 -->
      <div class="report_banner">
        <h1>场景评价报告</h1>
        <div class="report_table">
          <div class="table_item">
            <p>场景测试包：</p>
            <span>{{ info.projectName }}</span>
          </div>
          <div class="table_item">
            <p>场景数量：</p>
            <span>{{ info.sceneNum }}</span>
          </div>
          <div class="table_item">
            <p>算法名称：</p>
            <span>{{ info.algorithmName }}</span>
          </div>
          <div class="table_item tiem-last">
            <p>报告时间：</p>
            <span>{{ info.finishTime }}</span>
          </div>
        </div>
        <h4>国汽（北京）智能网联汽车研究院有限公司</h4>
      </div>
      <!-- 评价报告 -->
      <div class="report_content">
        <h3>评价报告</h3>
        <p class="subtitle">一、测试得分说明</p>
        <p class="text">
          针对<span style="border-bottom: 2px solid red">{{
            info.algorithmName
          }}</span
          >，进行场景的算法验证，共有{{
            Number(info.scenePassNum)
          }}例场景通过，通过率{{ Number(info.passRate) * 100 }}%。其中<span
            style="border-bottom: 2px solid red"
            >{{ info.packageName }}</span
          >的场景复杂度、危险度分布结果如下图所示。
        </p>
        <!-- 复杂度图表 -->
        <div class="echart-box" ref="myChart_complex"></div>
        <p class="echart_desc">图1-1 复杂度分布图</p>
        <!-- 危险度图表 -->
        <div class="echart-box" ref="myChart_risk"></div>
        <p class="echart_desc">图1-2 危险度分布图</p>
        <p class="text">
          复杂度/危险度分数与复杂度/危险度等级的对应关系见附录。算法在不同复杂度/危险度等级的结果分布图如下。正常情况下评价等级越高则算法通过的数量越少，该图可判断场景评价和算法评价的合理性。
        </p>
        <!-- 算法不同复杂度等级分布图表 -->
        <div class="echart-box" ref="myChart_complex_scale"></div>
        <p class="echart_desc">图1-3 算法在不同复杂度等级的结果分布图</p>
        <!-- 算法不同危险度等级分布图表 -->
        <div class="echart-box" ref="myChart_risk_scale"></div>
        <p class="echart_desc">图1-4 算法在不同危险度等级的结果分布图</p>
        <p class="subtitle">二、场景分布情况</p>
        <p class="text">
          本次场景评价涉及场景{{ Number(info.sceneNum) }}例，共{{
            Number(info.sceneNum)
          }}类基准场景类别。具体参数分布情况如下：
        </p>
        <p class="text">1）他车动作</p>
        <p class="text">他车动作共涵盖直行、汇入等，分布图如下：</p>
        <!-- 他车动作分布图表 -->
        <div class="echart-box" ref="myChart_othcar_scale"></div>
        <p class="echart_desc">图2-1 他车动作类别分布图</p>
        <p class="text">
          危险度或复杂度在不同他车动作类别的结果分布如下图所示，根据分布图可对场景生成算法进行调整。例如对于全部是复杂度高或者复杂度低的场景，需要对参数或类别有所调整，使生成的场景更加合理，更好的服务于算法迭代。
        </p>
        <!-- 危险度他车分布图表 -->
        <div class="echart-box" ref="myChart_risk_othcar_scale"></div>
        <p class="echart_desc">图2-2 危险度在不同他车动作类别的结果分布图</p>
        <!-- 复杂度他车分布图表 -->
        <div class="echart-box" ref="myChart_complex_othcar_scale"></div>
        <p class="echart_desc">图2-3 复杂度在不同他车动作类别的结果分布图</p>
        <p class="text">2）天气条件</p>
        <p class="text">
          天气包含晴天、雨天共{{
            Object.keys(info.weatherTypeForNum || {}).length || ''
          }}类，分布图如下：
        </p>
        <!-- 天气分布 -->
        <div class="echart-box" ref="myChart_weather_scale"></div>
        <p class="echart_desc">图2-4 天气分布图</p>
        <p class="text">
          危险度或复杂度在不同他车动作类别的结果分布如下图所示，根据分布图可对场景生成算法进行调整。例如对于全部是复杂度高或者复杂度低的场景，可对参数或类别有所调整，使生成的场景更加合理，更好的服务于算法迭代。
        </p>
        <!-- 危险度天气分布图表 -->
        <div class="echart-box" ref="myChart_risk_weather_scale"></div>
        <p class="echart_desc">图2-5 危险度在不同天气类别下的结果分布图</p>
        <!-- 复杂度天气分布图表 -->
        <div class="echart-box" ref="myChart_complex_weather_scale"></div>
        <p class="echart_desc">图2-6 复杂度在不同天气下的结果分布图</p>
        <p class="text">3）道路条件</p>
        <p class="text">
          覆盖道路类型为城市普通道路、高速道路，运行区域主要为主路…，道路类型、运行区域、平面几何和纵断面几何的场景分布情况如下：
        </p>
        <!-- 道路类型分布 -->
        <div class="echart-box" ref="myChart_roadtype_scale"></div>
        <p class="echart_desc">图2-7 道路类型分布图</p>
        <!-- 运行区域分布图 -->
        <div class="echart-box" ref="myChart_region_scale"></div>
        <p class="echart_desc">图2-8 运行区域分布图</p>
        <!-- 道路几何-平面分布图 -->
        <div class="echart-box" ref="myChart_roadplane_scale"></div>
        <p class="echart_desc">图2-9 道路几何-平面分布图</p>
        <!-- 道路几何-纵断面分布图 -->
        <div class="echart-box" ref="myChart_roadportrait_scale"></div>
        <p class="echart_desc">图2-10 道路几何-纵断面分布图</p>
        <p class="text">
          危险度或复杂度在不同他车动作类别的结果分布如下图所示，根据分布图可对场景生成算法进行调整。例如对于全部是复杂度高或者复杂度低的场景，可对参数或类别有所调整，使生成的场景更加合理，更好的服务于算法迭代。
        </p>
        <!-- 危险度不同运行区域分布图 -->
        <div class="echart-box" ref="myChart_risk_region_scale"></div>
        <p class="echart_desc">图2-11危险度在不同运行区域下的结果分布图</p>
        <!-- 复杂度不同运行区域分布图 -->
        <div class="echart-box" ref="myChart_complex_region_scale"></div>
        <p class="echart_desc">图2-12 复杂度在不同运行区域下的结果分布图</p>
        <!-- 危险度不同运行区域分布图 -->
        <div class="echart-box" ref="myChart_risk_road_scale"></div>
        <p class="echart_desc">图2-13 危险度在不同道路平面下的结果分布图</p>
        <!-- 复杂度不同运行区域分布图 -->
        <div class="echart-box" ref="myChart_complex_road_scale"></div>
        <p class="echart_desc">图2-14复杂度在不同道路平面下的结果分布图</p>
        <!-- 危险度不同纵断面分布图 -->
        <div class="echart-box" ref="myChart_risk_roadportrait_scale"></div>
        <p class="echart_desc">图2-15 危险度在不同道路纵断面下的结果分布图</p>
        <!-- 复杂度不同纵断面分布图 -->
        <div class="echart-box" ref="myChart_complex_roadportrait_scale"></div>
        <p class="echart_desc">图2-16 复杂度在不同道路纵断面下的结果分布图</p>
        <p class="subtitle">三、算法表现分析</p>
        <p class="text">
          算法在不同他车动作类别的结果分布，主要是看在不同类别下算法的表现是否会不同，通过性场景的多少对于算法以后选择场景类型有指导性意义。
        </p>
        <!-- 算法在不同他车动作结果分布图 -->
        <div class="echart-box" ref="myChart_algorithm_othcar_scale"></div>
        <p class="echart_desc">
          图3-1 算法在不同他车动作类别与运行区域的结果分布
        </p>
        <!-- 算法在不同天气类型结果分布图 -->
        <div class="echart-box" ref="myChart_algorithm_weather_scale"></div>
        <p class="echart_desc">图3-2 算法在不同天气类别与运行区域的结果分布</p>
        <!-- 算法在不同道路结果分布图 -->
        <div class="echart-box" ref="myChart_algorithm_road_scale"></div>
        <p class="echart_desc">图3-3 算法在不同道路平面与纵断面的结果分布</p>
        <p class="subtitle">四、详细评分情况</p>
        <p class="text">
          {{ info.algorithmName }}算法在{{
            Number(info.sceneNum)
          }}类场景的详细得分情况见表4-1
        </p>
        <p class="echart_desc">表4-1 评价结果表</p>
        <el-table :data="tableDataA" border style="width: 100%">
          <el-table-column
            v-for="item in tableColumnA"
            :prop="item.key"
            :label="item.label"
          >
          </el-table-column>
        </el-table>
        <p class="subtitle">附录</p>
        <p class="echart_desc">表5-1 评价结果表</p>
        <el-table :data="tableDataB" border style="width: 100%">
          <el-table-column
            v-for="item in tableColumnB"
            :prop="item.key"
            :label="item.label"
          >
          </el-table-column>
        </el-table>
        <el-table
          :data="tableDataC"
          border
          style="width: 100%; margin-top: 50px"
        >
          <el-table-column
            v-for="item in tableColumnC"
            :prop="item.key"
            :label="item.label"
          >
          </el-table-column>
        </el-table>
      </div>
    </div>
    <el-button @click="down" type="primary">下载</el-button>
  </div>
</template>

<script>
import html2canvas from 'html2canvas'
import jsPDF from 'jspdf'
import * as echarts from 'echarts'
export default {
  name:'sceneReport',
  data() {
    return {
      tableColumnA: [
        {
          label: '场景名称',
          key: 'sceneName',
        },
        {
          label: '复杂度分值',
          key: 'complexity',
        },
        {
          label: '复杂度等级',
          key: 'complexityLevel',
        },
        {
          label: '危险度分值',
          key: 'risk',
        },
        {
          label: '危险度等级',
          key: 'riskLevel',
        },
        {
          label: '算法得分',
          key: 'scoreResult',
        },
      ],
      tableColumnB: [
        {
          label: '复杂度分值',
          key: 'a',
        },
        {
          label: '复杂度等级',
          key: 'b',
        },
      ],
      tableColumnC: [
        {
          label: '危险度分值',
          key: 'a',
        },
        {
          label: '危险度等级',
          key: 'b',
        },
      ],
      tableDataA: [],
      tableDataB: [
        { a: '(75,inf]', b: 'A' },
        { a: '(50,75]', b: 'B' },
        { a: '(25,50]', b: 'C' },
        { a: '[0,25]', b: 'D' },
      ],
      tableDataC: [
        { a: '(75,inf]', b: 'A' },
        { a: '(50,75]', b: 'B' },
        { a: '(25,50]', b: 'C' },
        { a: '[0,25]', b: 'D' },
      ],
      info: {}, // 报告数据
    }
  },
  mounted() {
    const { id, projectType } = this.$route.query
    this.getReportDetail(id, projectType)
  },
  methods: {
    // 获取报告
    getReportDetail(id, projectType) {
      this.$axios({
        method: 'post',
        url: this.$api.workManagement.getStandardTestReport,
        data: { id, projectType },
      }).then((res) => {
        if (res.code == 200) {
          this.info = res.info
          this.tableDataA = res.info.manualProjectTaskVos
          this.echartInit(res.info)
        } else {
          this.$message.error('获取失败', res.message)
        }
      })
    },
    // 图表初始化
    echartInit(info) {
      const chart_complex = echarts.init(this.$refs.myChart_complex) // 复杂度分布图
      const chart_risk = echarts.init(this.$refs.myChart_risk) // 危险度分布图
      const chart_complex_scale = echarts.init(this.$refs.myChart_complex_scale) // 算法复杂度分布
      const chart_risk_scale = echarts.init(this.$refs.myChart_risk_scale) // 算法危险度分布
      const chart_othcar_scale = echarts.init(this.$refs.myChart_othcar_scale) // 他车动作类别分布图
      const chart_risk_othcar_scale = echarts.init(
        this.$refs.myChart_risk_othcar_scale
      ) // 危险度他车动作分布
      const chart_complex_othcar_scale = echarts.init(
        this.$refs.myChart_complex_othcar_scale
      ) // 复杂度他车动作分布
      const chart_weather_scale = echarts.init(this.$refs.myChart_weather_scale) // 天气分布
      const chart_complex_weather_scale = echarts.init(
        this.$refs.myChart_complex_weather_scale
      ) // 复杂度天气分布
      const chart_risk_weather_scale = echarts.init(
        this.$refs.myChart_risk_weather_scale
      ) // 危险度天气分布
      const chart_roadtype_scale = echarts.init(
        this.$refs.myChart_roadtype_scale
      ) // 道路类型分布
      const chart_region_scale = echarts.init(this.$refs.myChart_region_scale) // 运行区域分布图
      const chart_roadplane_scale = echarts.init(
        this.$refs.myChart_roadplane_scale
      ) // 道路平面分布
      const chart_roadportrait_scale = echarts.init(
        this.$refs.myChart_roadportrait_scale
      ) // 道路纵断分布
      const chart_risk_region_scale = echarts.init(
        this.$refs.myChart_risk_region_scale
      ) // 危险度不同运行区域分布
      const chart_complex_region_scale = echarts.init(
        this.$refs.myChart_complex_region_scale
      ) // 复杂度不同运行区域分布
      const chart_risk_road_scale = echarts.init(
        this.$refs.myChart_risk_road_scale
      ) // 危险度不同道路分布
      const chart_complex_road_scale = echarts.init(
        this.$refs.myChart_complex_road_scale
      ) // 复杂度不同道路分布
      const chart_risk_roadportrait_scale = echarts.init(
        this.$refs.myChart_risk_roadportrait_scale
      ) // 危险度不同道路分布
      const chart_complex_roadportrait_scale = echarts.init(
        this.$refs.myChart_complex_roadportrait_scale
      ) // 复杂度不同道路分布

      const chart_algorithm_othcar_scale = echarts.init(
        this.$refs.myChart_algorithm_othcar_scale
      ) // 算法在不同他车动作类别分布

      const chart_algorithm_weather_scale = echarts.init(
        this.$refs.myChart_algorithm_weather_scale
      ) // 算法在不同天气类别分布

      const chart_algorithm_road_scale = echarts.init(
        this.$refs.myChart_algorithm_road_scale
      ) // 算法在不同道路类别分布
      /*************************************/
      chart_complex.setOption({
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow',
          },
        },
        legend: {},
        xAxis: {
          type: 'category',
          data: [
            '0-10',
            '10-20',
            '20-30',
            '30-40',
            '40-50',
            '50-60',
            '60-70',
            '70-80',
            '80-90',
            '90-100',
          ],
        },
        yAxis: {
          type: 'value',
        },
        series: [
          {
            data: [
              info.compRange['[0,10]'] || null,
              info.compRange['(10,20]'] || null,
              info.compRange['(20,30]'] || null,
              info.compRange['(30,40]'] || null,
              info.compRange['(40,50]'] || null,
              info.compRange['(50,60]'] || null,
              info.compRange['(60,70]'] || null,
              info.compRange['(70,80]'] || null,
              info.compRange['(80,90]'] || null,
              info.compRange['(90,100]'] || null,
            ],
            type: 'bar',
            label: {
              show: true, // 显示数值
              position: 'top', // 数值显示的位置
            },
          },
        ],
      })

      chart_risk.setOption({
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow',
          },
        },
        legend: {},
        xAxis: {
          type: 'category',
          data: [
            '0-10',
            '10-20',
            '20-30',
            '30-40',
            '40-50',
            '50-60',
            '60-70',
            '70-80',
            '80-90',
            '90-100',
            '100-inf',
          ],
        },
        yAxis: {
          type: 'value',
        },
        series: [
          {
            data: [
              info.riskRange['[0,10]'] || null,
              info.riskRange['(10,20]'] || null,
              info.riskRange['(20,30]'] || null,
              info.riskRange['(30,40]'] || null,
              info.riskRange['(40,50]'] || null,
              info.riskRange['(50,60]'] || null,
              info.riskRange['(60,70]'] || null,
              info.riskRange['(70,80]'] || null,
              info.riskRange['(80,90]'] || null,
              info.riskRange['(90,100]'] || null,
              info.riskRange['(100,+∞)'] || null,
            ],
            type: 'bar',
            label: {
              show: true, // 显示数值
              position: 'top', // 数值显示的位置
            },
          },
        ],
      })

      /** */
      chart_complex_scale.setOption({
        legend: {},
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow',
          },
        },
        legend: {},
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true,
        },
        yAxis: {
          type: 'value',
        },
        xAxis: {
          type: 'category',
          data: ['A', 'B', 'C', 'D'],
        },
        series: [
          {
            name: '不通过',
            type: 'bar',
            stack: 'total',
            label: {
              show: true,
            },
            emphasis: {
              focus: 'series',
            },
            data: [
              info.compLevelForPassNum['A']
                ? info.compLevelForPassNum['A'].unPassNum
                : null,
              info.compLevelForPassNum['B']
                ? info.compLevelForPassNum['B'].unPassNum
                : null,
              info.compLevelForPassNum['C']
                ? info.compLevelForPassNum['C'].unPassNum
                : null,
              info.compLevelForPassNum['D']
                ? info.compLevelForPassNum['D'].unPassNum
                : null,
            ],
          },
          {
            name: '通过',
            type: 'bar',
            stack: 'total',
            label: {
              show: true,
            },
            emphasis: {
              focus: 'series',
            },
            data: [
              info.compLevelForPassNum['A']
                ? info.compLevelForPassNum['A'].passNum
                : null,
              info.compLevelForPassNum['B']
                ? info.compLevelForPassNum['B'].passNum
                : null,
              info.compLevelForPassNum['C']
                ? info.compLevelForPassNum['C'].passNum
                : null,
              info.compLevelForPassNum['D']
                ? info.compLevelForPassNum['D'].passNum
                : null,
            ],
          },
        ],
      })
      chart_risk_scale.setOption({
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow',
          },
        },
        legend: {},
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true,
        },
        yAxis: {
          type: 'value',
        },
        xAxis: {
          type: 'category',
          data: ['A', 'B', 'C', 'D'],
        },
        series: [
          {
            name: '不通过',
            type: 'bar',
            stack: 'total',
            label: {
              show: true,
            },
            emphasis: {
              focus: 'series',
            },
            data: [
              info.riskLevelForPassNum['A']
                ? info.riskLevelForPassNum['A'].unPassNum
                : null,
              info.riskLevelForPassNum['B']
                ? info.riskLevelForPassNum['B'].unPassNum
                : null,
              info.riskLevelForPassNum['C']
                ? info.riskLevelForPassNum['C'].unPassNum
                : null,
              info.riskLevelForPassNum['D']
                ? info.riskLevelForPassNum['D'].unPassNum
                : null,
            ],
          },
          {
            name: '通过',
            type: 'bar',
            stack: 'total',
            label: {
              show: true,
            },
            emphasis: {
              focus: 'series',
            },
            data: [
              info.riskLevelForPassNum['A']
                ? info.riskLevelForPassNum['A'].passNum
                : null,
              info.riskLevelForPassNum['B']
                ? info.riskLevelForPassNum['B'].passNum
                : null,
              info.riskLevelForPassNum['C']
                ? info.riskLevelForPassNum['C'].passNum
                : null,
              info.riskLevelForPassNum['D']
                ? info.riskLevelForPassNum['D'].passNum
                : null,
            ],
          },
        ],
      })
      /** */

      chart_othcar_scale.setOption({
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow',
          },
        },
        xAxis: {
          type: 'value',
          boundaryGap: [0, 0.01],
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true,
        },
        yAxis: {
          type: 'category',
          data: Object.keys(info.otherBehaviorTypeForNum),
        },
        series: {
          type: 'bar',
          data: Object.values(info.otherBehaviorTypeForNum),
        },
      })

      chart_risk_othcar_scale.setOption({
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow',
          },
        },
        legend: {},
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true,
        },
        xAxis: {
          type: 'value',
        },
        yAxis: {
          type: 'category',
          data: Object.keys(info.otherBehaviorForCompLevelNum),
        },
        series: [
          {
            name: 'A',
            type: 'bar',
            stack: 'total',
            label: {
              show: true,
            },
            emphasis: {
              focus: 'series',
            },
            data: Object.keys(info.otherBehaviorForCompLevelNum).map(
              (item) => info.otherBehaviorForCompLevelNum[item].A
            ),
          },
          {
            name: 'B',
            type: 'bar',
            stack: 'total',
            label: {
              show: true,
            },
            emphasis: {
              focus: 'series',
            },
            data: Object.keys(info.otherBehaviorForCompLevelNum).map(
              (item) => info.otherBehaviorForCompLevelNum[item].B
            ),
          },
          {
            name: 'C',
            type: 'bar',
            stack: 'total',
            label: {
              show: true,
            },
            emphasis: {
              focus: 'series',
            },
            data: Object.keys(info.otherBehaviorForCompLevelNum).map(
              (item) => info.otherBehaviorForCompLevelNum[item].C
            ),
          },
          {
            name: 'D',
            type: 'bar',
            stack: 'total',
            label: {
              show: true,
            },
            emphasis: {
              focus: 'series',
            },
            data: Object.keys(info.otherBehaviorForCompLevelNum).map(
              (item) => info.otherBehaviorForCompLevelNum[item].D
            ),
          },
        ],
      })
      chart_complex_othcar_scale.setOption({
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow',
          },
        },
        legend: {},
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true,
        },
        xAxis: {
          type: 'value',
        },
        yAxis: {
          type: 'category',
          data: Object.keys(info.otherBehaviorForRiskLevelNum),
        },
        series: [
          {
            name: 'A',
            type: 'bar',
            stack: 'total',
            label: {
              show: true,
            },
            emphasis: {
              focus: 'series',
            },
            data: Object.keys(info.otherBehaviorForRiskLevelNum).map(
              (item) => info.otherBehaviorForRiskLevelNum[item].A
            ),
          },
          {
            name: 'B',
            type: 'bar',
            stack: 'total',
            label: {
              show: true,
            },
            emphasis: {
              focus: 'series',
            },
            data: Object.keys(info.otherBehaviorForRiskLevelNum).map(
              (item) => info.otherBehaviorForRiskLevelNum[item].B
            ),
          },
          {
            name: 'C',
            type: 'bar',
            stack: 'total',
            label: {
              show: true,
            },
            emphasis: {
              focus: 'series',
            },
            data: Object.keys(info.otherBehaviorForRiskLevelNum).map(
              (item) => info.otherBehaviorForRiskLevelNum[item].C
            ),
          },
          {
            name: 'D',
            type: 'bar',
            stack: 'total',
            label: {
              show: true,
            },
            emphasis: {
              focus: 'series',
            },
            data: Object.keys(info.otherBehaviorForRiskLevelNum).map(
              (item) => info.otherBehaviorForRiskLevelNum[item].D
            ),
          },
        ],
      })

      chart_weather_scale.setOption({
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow',
          },
        },
        legend: {
          top: '5%',
          left: 'center',
        },
        series: [
          {
            name: '天气类型',
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: 'center',
            },
            emphasis: {
              label: {
                show: true,
                fontSize: 20,
                fontWeight: 'bold',
              },
            },
            labelLine: {
              show: false,
            },
            data: Object.keys(info.weatherTypeForNum).map((item) => {
              return {
                value: info.weatherTypeForNum[item],
                name: item,
              }
            }),
          },
        ],
      })

      chart_complex_weather_scale.setOption({
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow',
          },
        },
        legend: {},
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true,
        },
        xAxis: {
          type: 'value',
        },
        yAxis: {
          type: 'category',
          data: Object.keys(info.weatherForCompLevelNum),
        },
        series: [
          {
            name: 'A',
            type: 'bar',
            stack: 'total',
            label: {
              show: true,
            },
            emphasis: {
              focus: 'series',
            },
            data: Object.keys(info.weatherForCompLevelNum).map(
              (item) => info.weatherForCompLevelNum[item].A
            ),
          },
          {
            name: 'B',
            type: 'bar',
            stack: 'total',
            label: {
              show: true,
            },
            emphasis: {
              focus: 'series',
            },
            data: Object.keys(info.weatherForCompLevelNum).map(
              (item) => info.weatherForCompLevelNum[item].B
            ),
          },
          {
            name: 'C',
            type: 'bar',
            stack: 'total',
            label: {
              show: true,
            },
            emphasis: {
              focus: 'series',
            },
            data: Object.keys(info.weatherForCompLevelNum).map(
              (item) => info.weatherForCompLevelNum[item].C
            ),
          },
          {
            name: 'D',
            type: 'bar',
            stack: 'total',
            label: {
              show: true,
            },
            emphasis: {
              focus: 'series',
            },
            data: Object.keys(info.weatherForCompLevelNum).map(
              (item) => info.weatherForCompLevelNum[item].D
            ),
          },
        ],
      })

      chart_risk_weather_scale.setOption({
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow',
          },
        },
        legend: {},
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true,
        },
        xAxis: {
          type: 'value',
        },
        yAxis: {
          type: 'category',
          data: Object.keys(info.weatherForRiskLevelNum),
        },
        series: [
          {
            name: 'A',
            type: 'bar',
            stack: 'total',
            label: {
              show: true,
            },
            emphasis: {
              focus: 'series',
            },
            data: Object.keys(info.weatherForRiskLevelNum).map(
              (item) => info.weatherForRiskLevelNum[item].A
            ),
          },
          {
            name: 'B',
            type: 'bar',
            stack: 'total',
            label: {
              show: true,
            },
            emphasis: {
              focus: 'series',
            },
            data: Object.keys(info.weatherForRiskLevelNum).map(
              (item) => info.weatherForRiskLevelNum[item].B
            ),
          },
          {
            name: 'C',
            type: 'bar',
            stack: 'total',
            label: {
              show: true,
            },
            emphasis: {
              focus: 'series',
            },
            data: Object.keys(info.weatherForRiskLevelNum).map(
              (item) => info.weatherForRiskLevelNum[item].C
            ),
          },
          {
            name: 'D',
            type: 'bar',
            stack: 'total',
            label: {
              show: true,
            },
            emphasis: {
              focus: 'series',
            },
            data: Object.keys(info.weatherForRiskLevelNum).map(
              (item) => info.weatherForRiskLevelNum[item].D
            ),
          },
        ],
      })

      chart_roadtype_scale.setOption({
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow',
          },
        },
        legend: {
          top: '5%',
          left: 'center',
        },
        series: [
          {
            name: '道路类型',
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: 'center',
            },
            emphasis: {
              label: {
                show: true,
                fontSize: 20,
                fontWeight: 'bold',
              },
            },
            labelLine: {
              show: false,
            },
            data: Object.keys(info.roadTypeForNum).map((item) => {
              return {
                value: info.roadTypeForNum[item],
                name: item,
              }
            }),
          },
        ],
      })

      chart_region_scale.setOption({
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow',
          },
        },
        xAxis: {
          type: 'value',
          boundaryGap: [0, 0.01],
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true,
        },
        yAxis: {
          type: 'category',
          data: Object.keys(info.operationAreaTypeForNum),
        },
        series: {
          type: 'bar',
          data: Object.values(info.operationAreaTypeForNum),
        },
      })

      chart_roadplane_scale.setOption({
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow',
          },
        },
        xAxis: {
          type: 'category',
          data: Object.keys(info.roadGeometryPlaneTypeForNum),
        },
        yAxis: {
          type: 'value',
        },
        series: [
          {
            data: Object.values(info.roadGeometryPlaneTypeForNum),
            type: 'bar',
          },
        ],
      })
      chart_roadportrait_scale.setOption({
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow',
          },
        },
        xAxis: {
          type: 'category',
          data: Object.keys(info.roadGeometryVerticalTypeForNum),
        },
        yAxis: {
          type: 'value',
        },
        series: [
          {
            data: Object.values(info.roadGeometryVerticalTypeForNum),
            type: 'bar',
          },
        ],
      })

      chart_risk_region_scale.setOption({
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow',
          },
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true,
        },
        legend: {},
        xAxis: {
          type: 'value',
        },
        yAxis: {
          type: 'category',
          data: Object.keys(info.operationAreaForRiskLevelNum),
        },
        series: [
          {
            name: 'A',
            type: 'bar',
            stack: 'total',
            label: {
              show: true,
            },
            emphasis: {
              focus: 'series',
            },
            data: Object.keys(info.operationAreaForRiskLevelNum).map(
              (item) => info.operationAreaForRiskLevelNum[item].A
            ),
          },
          {
            name: 'B',
            type: 'bar',
            stack: 'total',
            label: {
              show: true,
            },
            emphasis: {
              focus: 'series',
            },
            data: Object.keys(info.operationAreaForRiskLevelNum).map(
              (item) => info.operationAreaForRiskLevelNum[item].B
            ),
          },
          {
            name: 'C',
            type: 'bar',
            stack: 'total',
            label: {
              show: true,
            },
            emphasis: {
              focus: 'series',
            },
            data: Object.keys(info.operationAreaForRiskLevelNum).map(
              (item) => info.operationAreaForRiskLevelNum[item].C
            ),
          },
          {
            name: 'D',
            type: 'bar',
            stack: 'total',
            label: {
              show: true,
            },
            emphasis: {
              focus: 'series',
            },
            data: Object.keys(info.operationAreaForRiskLevelNum).map(
              (item) => info.operationAreaForRiskLevelNum[item].D
            ),
          },
        ],
      })

      chart_complex_region_scale.setOption({
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow',
          },
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true,
        },
        legend: {},
        xAxis: {
          type: 'value',
        },
        yAxis: {
          type: 'category',
          data: Object.keys(info.operationAreaForCompLevelNum),
        },
        series: [
          {
            name: 'A',
            type: 'bar',
            stack: 'total',
            label: {
              show: true,
            },
            emphasis: {
              focus: 'series',
            },
            data: Object.keys(info.operationAreaForCompLevelNum).map(
              (item) => info.operationAreaForCompLevelNum[item].A
            ),
          },
          {
            name: 'B',
            type: 'bar',
            stack: 'total',
            label: {
              show: true,
            },
            emphasis: {
              focus: 'series',
            },
            data: Object.keys(info.operationAreaForCompLevelNum).map(
              (item) => info.operationAreaForCompLevelNum[item].B
            ),
          },
          {
            name: 'C',
            type: 'bar',
            stack: 'total',
            label: {
              show: true,
            },
            emphasis: {
              focus: 'series',
            },
            data: Object.keys(info.operationAreaForCompLevelNum).map(
              (item) => info.operationAreaForCompLevelNum[item].C
            ),
          },
          {
            name: 'D',
            type: 'bar',
            stack: 'total',
            label: {
              show: true,
            },
            emphasis: {
              focus: 'series',
            },
            data: Object.keys(info.operationAreaForCompLevelNum).map(
              (item) => info.operationAreaForCompLevelNum[item].D
            ),
          },
        ],
      })

      chart_risk_road_scale.setOption({
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow',
          },
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true,
        },
        legend: {},
        xAxis: {
          type: 'value',
        },
        yAxis: {
          type: 'category',
          data: Object.keys(info.roadGeometryPlaneForRiskLevelNum),
        },
        series: [
          {
            name: 'A',
            type: 'bar',
            stack: 'total',
            label: {
              show: true,
            },
            emphasis: {
              focus: 'series',
            },
            data: Object.keys(info.roadGeometryPlaneForRiskLevelNum).map(
              (item) => info.roadGeometryPlaneForRiskLevelNum[item].A
            ),
          },
          {
            name: 'B',
            type: 'bar',
            stack: 'total',
            label: {
              show: true,
            },
            emphasis: {
              focus: 'series',
            },
            data: Object.keys(info.roadGeometryPlaneForRiskLevelNum).map(
              (item) => info.roadGeometryPlaneForRiskLevelNum[item].B
            ),
          },
          {
            name: 'C',
            type: 'bar',
            stack: 'total',
            label: {
              show: true,
            },
            emphasis: {
              focus: 'series',
            },
            data: Object.keys(info.roadGeometryPlaneForRiskLevelNum).map(
              (item) => info.roadGeometryPlaneForRiskLevelNum[item].C
            ),
          },
          {
            name: 'D',
            type: 'bar',
            stack: 'total',
            label: {
              show: true,
            },
            emphasis: {
              focus: 'series',
            },
            data: Object.keys(info.roadGeometryPlaneForRiskLevelNum).map(
              (item) => info.roadGeometryPlaneForRiskLevelNum[item].D
            ),
          },
        ],
      })

      chart_complex_road_scale.setOption({
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow',
          },
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true,
        },
        legend: {},
        xAxis: {
          type: 'value',
        },
        yAxis: {
          type: 'category',
          data: Object.keys(info.roadGeometryPlaneForCompLevelNum),
        },
        series: [
          {
            name: 'A',
            type: 'bar',
            stack: 'total',
            label: {
              show: true,
            },
            emphasis: {
              focus: 'series',
            },
            data: Object.keys(info.roadGeometryPlaneForCompLevelNum).map(
              (item) => info.roadGeometryPlaneForCompLevelNum[item].A
            ),
          },
          {
            name: 'B',
            type: 'bar',
            stack: 'total',
            label: {
              show: true,
            },
            emphasis: {
              focus: 'series',
            },
            data: Object.keys(info.roadGeometryPlaneForCompLevelNum).map(
              (item) => info.roadGeometryPlaneForCompLevelNum[item].B
            ),
          },
          {
            name: 'C',
            type: 'bar',
            stack: 'total',
            label: {
              show: true,
            },
            emphasis: {
              focus: 'series',
            },
            data: Object.keys(info.roadGeometryPlaneForCompLevelNum).map(
              (item) => info.roadGeometryPlaneForCompLevelNum[item].C
            ),
          },
          {
            name: 'D',
            type: 'bar',
            stack: 'total',
            label: {
              show: true,
            },
            emphasis: {
              focus: 'series',
            },
            data: Object.keys(info.roadGeometryPlaneForCompLevelNum).map(
              (item) => info.roadGeometryPlaneForCompLevelNum[item].D
            ),
          },
        ],
      })

      chart_risk_roadportrait_scale.setOption({
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow',
          },
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true,
        },
        legend: {},
        xAxis: {
          type: 'value',
        },
        yAxis: {
          type: 'category',
          data: Object.keys(info.roadGeometryVerticalForRiskLevelNum),
        },
        series: [
          {
            name: 'A',
            type: 'bar',
            stack: 'total',
            label: {
              show: true,
            },
            emphasis: {
              focus: 'series',
            },
            data: Object.keys(info.roadGeometryVerticalForRiskLevelNum).map(
              (item) => info.roadGeometryVerticalForRiskLevelNum[item].A
            ),
          },
          {
            name: 'B',
            type: 'bar',
            stack: 'total',
            label: {
              show: true,
            },
            emphasis: {
              focus: 'series',
            },
            data: Object.keys(info.roadGeometryVerticalForRiskLevelNum).map(
              (item) => info.roadGeometryVerticalForRiskLevelNum[item].B
            ),
          },
          {
            name: 'C',
            type: 'bar',
            stack: 'total',
            label: {
              show: true,
            },
            emphasis: {
              focus: 'series',
            },
            data: Object.keys(info.roadGeometryVerticalForRiskLevelNum).map(
              (item) => info.roadGeometryVerticalForRiskLevelNum[item].C
            ),
          },
          {
            name: 'D',
            type: 'bar',
            stack: 'total',
            label: {
              show: true,
            },
            emphasis: {
              focus: 'series',
            },
            data: Object.keys(info.roadGeometryVerticalForRiskLevelNum).map(
              (item) => info.roadGeometryVerticalForRiskLevelNum[item].D
            ),
          },
        ],
      })
      chart_complex_roadportrait_scale.setOption({
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow',
          },
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true,
        },
        legend: {},
        xAxis: {
          type: 'value',
        },
        yAxis: {
          type: 'category',
          data: Object.keys(info.roadGeometryVerticalForCompLevelNum),
        },
        series: [
          {
            name: 'A',
            type: 'bar',
            stack: 'total',
            label: {
              show: true,
            },
            emphasis: {
              focus: 'series',
            },
            data: Object.keys(info.roadGeometryVerticalForCompLevelNum).map(
              (item) => info.roadGeometryVerticalForCompLevelNum[item].A
            ),
          },
          {
            name: 'B',
            type: 'bar',
            stack: 'total',
            label: {
              show: true,
            },
            emphasis: {
              focus: 'series',
            },
            data: Object.keys(info.roadGeometryVerticalForCompLevelNum).map(
              (item) => info.roadGeometryVerticalForCompLevelNum[item].B
            ),
          },
          {
            name: 'C',
            type: 'bar',
            stack: 'total',
            label: {
              show: true,
            },
            emphasis: {
              focus: 'series',
            },
            data: Object.keys(info.roadGeometryVerticalForCompLevelNum).map(
              (item) => info.roadGeometryVerticalForCompLevelNum[item].C
            ),
          },
          {
            name: 'D',
            type: 'bar',
            stack: 'total',
            label: {
              show: true,
            },
            emphasis: {
              focus: 'series',
            },
            data: Object.keys(info.roadGeometryVerticalForCompLevelNum).map(
              (item) => info.roadGeometryVerticalForCompLevelNum[item].D
            ),
          },
        ],
      })
      chart_algorithm_othcar_scale.setOption(
        {
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow',
            },
          },
          legend: {},
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true,
          },
          legend: {},
          xAxis: {
            type: 'value',
          },
          yAxis: {
            type: 'category',
            data: Object.keys(info.otherBehaviorAndAreaPassNum),
          },
          series: [
            {
              name: '通过',
              type: 'bar',
              stack: 'total',
              label: {
                show: true,
              },
              emphasis: {
                focus: 'series',
              },
              data: Object.keys(info.otherBehaviorAndAreaPassNum).map(
                (item) => info.otherBehaviorAndAreaPassNum[item].passNum
              ),
            },
            {
              name: '不通过',
              type: 'bar',
              stack: 'total',
              label: {
                show: true,
              },
              emphasis: {
                focus: 'series',
              },
              data: Object.keys(info.otherBehaviorAndAreaPassNum).map(
                (item) => info.otherBehaviorAndAreaPassNum[item].unPassNum
              ),
            },
          ],
        }
        //   {
        //   legend: {},
        //   tooltip: {
        //     trigger: 'axis',
        //     axisPointer: {
        //       type: 'shadow',
        //     },
        //   },
        //   grid: {
        //     left: '3%',
        //     right: '4%',
        //     bottom: '3%',
        //     containLabel: true,
        //   },
        //   yAxis: {
        //     type: 'value',
        //   },
        //   xAxis: {
        //     type: 'category',
        //     data: Object.keys(info.otherBehaviorAndAreaPassNum),
        //   },
        //   series: [
        //     {
        //       name: '不通过',
        //       type: 'bar',
        //       stack: 'total',
        //       label: {
        //         show: true,
        //       },
        //       emphasis: {
        //         focus: 'series',
        //       },
        //       data: Object.keys(info.otherBehaviorAndAreaPassNum).map(item=>{
        //         return info.otherBehaviorAndAreaPassNum[item]?info.otherBehaviorAndAreaPassNum[item]['unPassNum'] :null
        //       }),
        //     },
        //     {
        //       name: '通过',
        //       type: 'bar',
        //       stack: 'total',
        //       label: {
        //         show: true,
        //       },
        //       emphasis: {
        //         focus: 'series',
        //       },
        //       data: Object.keys(info.otherBehaviorAndAreaPassNum).map(item=>{
        //         return info.otherBehaviorAndAreaPassNum[item]?info.otherBehaviorAndAreaPassNum[item]['passNum'] : null
        //       }),
        //     },
        //   ],
        // }
      )
      chart_algorithm_weather_scale.setOption({
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow',
          },
        },
        legend: {},
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true,
        },
        legend: {},
        xAxis: {
          type: 'value',
        },
        yAxis: {
          type: 'category',
          data: Object.keys(info.weatherAndAreaPassNum),
        },
        series: [
          {
            name: '通过',
            type: 'bar',
            stack: 'total',
            label: {
              show: true,
            },
            emphasis: {
              focus: 'series',
            },
            data: Object.keys(info.weatherAndAreaPassNum).map(
              (item) => info.weatherAndAreaPassNum[item].passNum
            ),
          },
          {
            name: '不通过',
            type: 'bar',
            stack: 'total',
            label: {
              show: true,
            },
            emphasis: {
              focus: 'series',
            },
            data: Object.keys(info.weatherAndAreaPassNum).map(
              (item) => info.weatherAndAreaPassNum[item].unPassNum
            ),
          },
        ],
      })
      chart_algorithm_road_scale.setOption({
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow',
          },
        },
        legend: {},
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true,
        },
        legend: {},
        xAxis: {
          type: 'value',
        },
        yAxis: {
          type: 'category',
          data: Object.keys(info.roadPlanePassNum),
        },
        series: [
          {
            name: '通过',
            type: 'bar',
            stack: 'total',
            label: {
              show: true,
            },
            emphasis: {
              focus: 'series',
            },
            data: Object.keys(info.roadPlanePassNum).map(
              (item) => info.roadPlanePassNum[item].passNum
            ),
          },
          {
            name: '不通过',
            type: 'bar',
            stack: 'total',
            label: {
              show: true,
            },
            emphasis: {
              focus: 'series',
            },
            data: Object.keys(info.roadPlanePassNum).map(
              (item) => info.roadPlanePassNum[item].unPassNum
            ),
          },
        ],
      })
    },
    // 下载报告
    down() {
      const content = this.$refs.pdfContent
      html2canvas(content).then((canvas) => {
        var contentWidth = canvas.width
        var contentHeight = canvas.height
        //一页pdf显示html页面生成的canvas高度;
        var pageHeight = (contentWidth / 592.28) * 841.89
        //未生成pdf的html页面高度
        var leftHeight = contentHeight
        //页面偏移
        var position = 0
        //a4纸的尺寸[595.28,841.89]，html页面生成的canvas在pdf中图片的宽高
        var imgWidth = 595.28
        var imgHeight = (592.28 / contentWidth) * contentHeight

        var pageData = canvas.toDataURL('image/jpeg', 1.0)

        var pdf = new jsPDF('', 'pt', 'a4')

        //有两个高度需要区分，一个是html页面的实际高度，和生成pdf的页面高度(841.89)
        //当内容未超过pdf一页显示的范围，无需分页

        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 -= 841.89
            //避免添加空白页
            if (leftHeight > 0) {
              pdf.addPage()
            }
          }
        }
        pdf.save('报告.pdf')
      })
    },
  },
}
</script>

<style lang="less" scoped>
.report_box {
  width: 100% !important;
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  .pdf_box {
    box-sizing: border-box;
    width: 80%;
    height: 100%;
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-content: center;
    .report_banner {
      width: 100%;
      height: 2000px;
      background-image: url('../../assets/common/image/report_banner.png');
      background-repeat: no-repeat;
      background-position: center;
      display: flex;
      flex-direction: column;
      align-items: center;
      h1 {
        margin-top: 350px;
        font-size: 82px;
        font-weight: bold;
        color: #000;
      }
      .report_table {
        margin-top: 250px;
        width: 500px;
        height: auto;
        .table_item {
          width: 100%;
          height: 40px;
          border-bottom: none;
          display: flex;
          align-items: center;
          p {
            width: 200px;
            text-align: center;
            font-size: 18px;
          }
          span {
            width: 100%;
            text-align: left;
            padding-left: 50px;
            font-size: 18px;
          }
        }
      }
      h4 {
        margin-top: 100px;
        font-size: 18px;
      }
    }
    .report_content {
      box-sizing: border-box;
      padding: 0 30px;
      width: 100%;
      min-height: 500px;
      h3 {
        margin-top: 50px;
        text-align: center;
        font-size: 26px;
        color: #3397ff;
      }
    }
  }

  .subtitle {
    font-size: 18px;
    font-weight: bold;
    color: #000;
    margin: 30px 0 30px;
  }
  .text {
    font-size: 16px;
    text-indent: 36px;
    margin-bottom: 10px;
  }
  .echart-box {
    width: 100%;
    min-height: 300px;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 30px;
  }
  .echart_desc {
    font-size: 12px;
    text-align: center;
    margin-bottom: 30px;
  }
}
</style>