feat:添加标准化报告

package.json

@@ -19,8 +19,10 @@
     "element-resize-detector": "^1.1.15",
     "element-ui": "^2.10.1",
     "font-awesome": "^4.7.0",
+    "html2canvas": "^1.4.1",
     "jquery": "^3.4.1",
     "js-file-download": "^0.4.8",
+    "jspdf": "^2.5.1",
     "moment": "^2.24.0",
     "popper.js": "^1.15.0",
     "quill-image-drop-module": "^1.0.3",
@@ -90,4 +92,4 @@
     "> 1%",
     "last 2 versions"
   ]
-}
+}

src/api/sceneLibrary.js

@@ -61,6 +61,8 @@ const queryRiskDetail =  basePart + '/ScoringRules/querySceneEvaluationRiskDetai
 
 const batchDeleteSceneReference = basePart + '/sceneReference/batchDeleteSceneReference'; // 批量删除基准库场景
 
+
+
 export default {
     queryScoringRulesList,
     querySceneScoringRulesList,

src/api/workManagement.js

@@ -41,6 +41,7 @@ const deleteRecord = basePart + '/simulationProject/deleteMultiSimulationSceneCa
 const settingsSimulation = basePart + '/simulationProject/setMultiSimulationSceneCarView';//设置仿真视角
 const saveOrUpdateSceneCarList = basePart + '/simulationProject/addOrUpdateMultiSimulationSceneCarList';//设置仿真视角
 const getMultiSimulationSceneDetail = basePart + '/simulationProject/getMultiSimulationSceneDetail';//获取多模式仿真场景详情
+const getStandardTestReport =  basePart + '/simulationProject/getProjectReportForAllReferenceScene'; // 标准化测试报告
 export default {
     addOrUpdateProject,
     selectProjectById,
@@ -82,5 +83,6 @@ export default {
     deleteAutomaticSubProjectByIds,
     updateAutoProjectNowRunState,
     getEvaluationRuleDetail,
-    querySceneEvaluationDetail
+    querySceneEvaluationDetail,
+    getStandardTestReport,
 }

src/router/index.js

@@ -26,6 +26,15 @@ const routes = [{
   component: () => import('../views/index'),
   redirect: '/mainPage',
   children: [
+    {
+      path: "/demo",
+      name: "demo",
+      meta: {
+        tabname: "报告",
+        login: true
+      },
+      component: () => import("@/views/demo.vue")
+    },
     {
       path: "/mainPage",
       name: "mainPage",

src/views/demo.vue

@@ -0,0 +1,2849 @@
+<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">
+          针对{{ info.algorithmName }}算法，进行场景的算法验证，共有{{
+            info.scenePassNum
+          }}例场景通过，通过率{{ Number(info.passRate) * 100 }}%。其中{{
+            info.packageName
+          }}（场景测试包名称）的场景复杂度、危险度分布结果如下图所示。
+        </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">xx算法在xx类场景的详细得分情况见表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>
+    <button @click="down">下载</button>
+  </div>
+</template>
+
+<script>
+import html2canvas from 'html2canvas'
+import jsPDF from 'jspdf'
+import * as echarts from 'echarts'
+export default {
+  data() {
+    return {
+      complexOpt: {
+        xAxis: {
+          type: 'category',
+          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
+        },
+        yAxis: {
+          type: 'value',
+        },
+        series: [
+          {
+            data: [120, 200, 150, 80, 70, 110, 130],
+            type: 'bar',
+          },
+        ],
+      },
+      riskOpt: {
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'cross',
+            crossStyle: {
+              color: '#999',
+            },
+          },
+        },
+        toolbox: {
+          feature: {
+            // dataView: { show: true, readOnly: false },
+            // magicType: { show: true, type: ['line', 'bar'] },
+            // restore: { show: true },
+            // saveAsImage: { show: true },
+          },
+        },
+        legend: {
+          data: ['Evaporation', 'Precipitation', 'Temperature'],
+        },
+        xAxis: [
+          {
+            type: 'category',
+            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
+            axisPointer: {
+              type: 'shadow',
+            },
+          },
+        ],
+        yAxis: [
+          {
+            type: 'value',
+            name: 'Precipitation',
+            min: 0,
+            max: 250,
+            interval: 50,
+            axisLabel: {
+              formatter: '{value} ml',
+            },
+          },
+          {
+            type: 'value',
+            name: 'Temperature',
+            min: 0,
+            max: 25,
+            interval: 5,
+            axisLabel: {
+              formatter: '{value} °C',
+            },
+          },
+        ],
+        series: [
+          {
+            name: 'Precipitation',
+            type: 'bar',
+            tooltip: {
+              valueFormatter: function (value) {
+                return value + ' ml'
+              },
+            },
+            data: [
+              2.6, 25.9, 9.0, 226.4, 128.7, 70.7, 75.6, 12.2, 48.7, 18.8, 6.0,
+              2.3,
+            ],
+          },
+          {
+            name: 'Temperature',
+            type: 'line',
+            yAxisIndex: 1,
+            tooltip: {
+              valueFormatter: function (value) {
+                return value + ' °C'
+              },
+            },
+            data: [
+              2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2,
+            ],
+          },
+        ],
+      },
+      complexScaleOpt: {
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'shadow',
+          },
+        },
+        legend: {},
+        grid: {
+          left: '3%',
+          right: '4%',
+          bottom: '3%',
+          containLabel: true,
+        },
+        xAxis: [
+          {
+            type: 'category',
+            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
+          },
+        ],
+        yAxis: [
+          {
+            type: 'value',
+          },
+        ],
+        series: [
+          {
+            name: 'Direct',
+            type: 'bar',
+            emphasis: {
+              focus: 'series',
+            },
+            data: [320, 332, 301, 334, 390, 330, 320],
+          },
+          {
+            name: 'Email',
+            type: 'bar',
+            stack: 'Ad',
+            emphasis: {
+              focus: 'series',
+            },
+            data: [120, 132, 101, 134, 90, 230, 210],
+          },
+          {
+            name: 'Union Ads',
+            type: 'bar',
+            stack: 'Ad',
+            emphasis: {
+              focus: 'series',
+            },
+            data: [220, 182, 191, 234, 290, 330, 310],
+          },
+          {
+            name: 'Video Ads',
+            type: 'bar',
+            stack: 'Ad',
+            emphasis: {
+              focus: 'series',
+            },
+            data: [150, 232, 201, 154, 190, 330, 410],
+          },
+          {
+            name: 'Search Engine',
+            type: 'bar',
+            data: [862, 1018, 964, 1026, 1679, 1600, 1570],
+            emphasis: {
+              focus: 'series',
+            },
+            markLine: {
+              lineStyle: {
+                type: 'dashed',
+              },
+              data: [[{ type: 'min' }, { type: 'max' }]],
+            },
+          },
+          {
+            name: 'Baidu',
+            type: 'bar',
+            barWidth: 5,
+            stack: 'Search Engine',
+            emphasis: {
+              focus: 'series',
+            },
+            data: [620, 732, 701, 734, 1090, 1130, 1120],
+          },
+          {
+            name: 'Google',
+            type: 'bar',
+            stack: 'Search Engine',
+            emphasis: {
+              focus: 'series',
+            },
+            data: [120, 132, 101, 134, 290, 230, 220],
+          },
+          {
+            name: 'Bing',
+            type: 'bar',
+            stack: 'Search Engine',
+            emphasis: {
+              focus: 'series',
+            },
+            data: [60, 72, 71, 74, 190, 130, 110],
+          },
+          {
+            name: 'Others',
+            type: 'bar',
+            stack: 'Search Engine',
+            emphasis: {
+              focus: 'series',
+            },
+            data: [62, 82, 91, 84, 109, 110, 120],
+          },
+        ],
+      },
+      riskScaleOpt: {
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'shadow',
+          },
+        },
+        legend: {},
+        grid: {
+          left: '3%',
+          right: '4%',
+          bottom: '3%',
+          containLabel: true,
+        },
+        xAxis: [
+          {
+            type: 'category',
+            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
+          },
+        ],
+        yAxis: [
+          {
+            type: 'value',
+          },
+        ],
+        series: [
+          {
+            name: 'Direct',
+            type: 'bar',
+            emphasis: {
+              focus: 'series',
+            },
+            data: [320, 332, 301, 334, 390, 330, 320],
+          },
+          {
+            name: 'Email',
+            type: 'bar',
+            stack: 'Ad',
+            emphasis: {
+              focus: 'series',
+            },
+            data: [120, 132, 101, 134, 90, 230, 210],
+          },
+          {
+            name: 'Union Ads',
+            type: 'bar',
+            stack: 'Ad',
+            emphasis: {
+              focus: 'series',
+            },
+            data: [220, 182, 191, 234, 290, 330, 310],
+          },
+          {
+            name: 'Video Ads',
+            type: 'bar',
+            stack: 'Ad',
+            emphasis: {
+              focus: 'series',
+            },
+            data: [150, 232, 201, 154, 190, 330, 410],
+          },
+          {
+            name: 'Search Engine',
+            type: 'bar',
+            data: [862, 1018, 964, 1026, 1679, 1600, 1570],
+            emphasis: {
+              focus: 'series',
+            },
+            markLine: {
+              lineStyle: {
+                type: 'dashed',
+              },
+              data: [[{ type: 'min' }, { type: 'max' }]],
+            },
+          },
+          {
+            name: 'Baidu',
+            type: 'bar',
+            barWidth: 5,
+            stack: 'Search Engine',
+            emphasis: {
+              focus: 'series',
+            },
+            data: [620, 732, 701, 734, 1090, 1130, 1120],
+          },
+          {
+            name: 'Google',
+            type: 'bar',
+            stack: 'Search Engine',
+            emphasis: {
+              focus: 'series',
+            },
+            data: [120, 132, 101, 134, 290, 230, 220],
+          },
+          {
+            name: 'Bing',
+            type: 'bar',
+            stack: 'Search Engine',
+            emphasis: {
+              focus: 'series',
+            },
+            data: [60, 72, 71, 74, 190, 130, 110],
+          },
+          {
+            name: 'Others',
+            type: 'bar',
+            stack: 'Search Engine',
+            emphasis: {
+              focus: 'series',
+            },
+            data: [62, 82, 91, 84, 109, 110, 120],
+          },
+        ],
+      },
+      othCarScaleOpt: {
+        title: {
+          text: 'World Population',
+        },
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'shadow',
+          },
+        },
+        legend: {},
+        grid: {
+          left: '3%',
+          right: '4%',
+          bottom: '3%',
+          containLabel: true,
+        },
+        xAxis: {
+          type: 'value',
+          boundaryGap: [0, 0.01],
+        },
+        yAxis: {
+          type: 'category',
+          data: ['Brazil', 'Indonesia', 'USA', 'India', 'China', 'World'],
+        },
+        series: [
+          {
+            name: '2011',
+            type: 'bar',
+            data: [18203, 23489, 29034, 104970, 131744, 630230],
+          },
+        ],
+      },
+      riskOthCarScaleOpt: {
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            // Use axis to trigger tooltip
+            type: 'shadow', // 'shadow' as default; can also be 'line' or 'shadow'
+          },
+        },
+        legend: {},
+        grid: {
+          left: '3%',
+          right: '4%',
+          bottom: '3%',
+          containLabel: true,
+        },
+        xAxis: {
+          type: 'value',
+        },
+        yAxis: {
+          type: 'category',
+          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
+        },
+        series: [
+          {
+            name: 'Direct',
+            type: 'bar',
+            stack: 'total',
+            label: {
+              show: true,
+            },
+            emphasis: {
+              focus: 'series',
+            },
+            data: [320, 302, 301, 334, 390, 330, 320],
+          },
+          {
+            name: 'Mail Ad',
+            type: 'bar',
+            stack: 'total',
+            label: {
+              show: true,
+            },
+            emphasis: {
+              focus: 'series',
+            },
+            data: [120, 132, 101, 134, 90, 230, 210],
+          },
+          {
+            name: 'Affiliate Ad',
+            type: 'bar',
+            stack: 'total',
+            label: {
+              show: true,
+            },
+            emphasis: {
+              focus: 'series',
+            },
+            data: [220, 182, 191, 234, 290, 330, 310],
+          },
+          {
+            name: 'Video Ad',
+            type: 'bar',
+            stack: 'total',
+            label: {
+              show: true,
+            },
+            emphasis: {
+              focus: 'series',
+            },
+            data: [150, 212, 201, 154, 190, 330, 410],
+          },
+          {
+            name: 'Search Engine',
+            type: 'bar',
+            stack: 'total',
+            label: {
+              show: true,
+            },
+            emphasis: {
+              focus: 'series',
+            },
+            data: [820, 832, 901, 934, 1290, 1330, 1320],
+          },
+        ],
+      },
+      complexOthCarScaleOpt: {
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            // Use axis to trigger tooltip
+            type: 'shadow', // 'shadow' as default; can also be 'line' or 'shadow'
+          },
+        },
+        legend: {},
+        grid: {
+          left: '3%',
+          right: '4%',
+          bottom: '3%',
+          containLabel: true,
+        },
+        xAxis: {
+          type: 'value',
+        },
+        yAxis: {
+          type: 'category',
+          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
+        },
+        series: [
+          {
+            name: 'Direct',
+            type: 'bar',
+            stack: 'total',
+            label: {
+              show: true,
+            },
+            emphasis: {
+              focus: 'series',
+            },
+            data: [320, 302, 301, 334, 390, 330, 320],
+          },
+          {
+            name: 'Mail Ad',
+            type: 'bar',
+            stack: 'total',
+            label: {
+              show: true,
+            },
+            emphasis: {
+              focus: 'series',
+            },
+            data: [120, 132, 101, 134, 90, 230, 210],
+          },
+          {
+            name: 'Affiliate Ad',
+            type: 'bar',
+            stack: 'total',
+            label: {
+              show: true,
+            },
+            emphasis: {
+              focus: 'series',
+            },
+            data: [220, 182, 191, 234, 290, 330, 310],
+          },
+          {
+            name: 'Video Ad',
+            type: 'bar',
+            stack: 'total',
+            label: {
+              show: true,
+            },
+            emphasis: {
+              focus: 'series',
+            },
+            data: [150, 212, 201, 154, 190, 330, 410],
+          },
+          {
+            name: 'Search Engine',
+            type: 'bar',
+            stack: 'total',
+            label: {
+              show: true,
+            },
+            emphasis: {
+              focus: 'series',
+            },
+            data: [820, 832, 901, 934, 1290, 1330, 1320],
+          },
+        ],
+      },
+      weatherScaleOpt: {
+        tooltip: {
+          trigger: 'item',
+        },
+        legend: {
+          top: '5%',
+          left: 'center',
+        },
+        series: [
+          {
+            name: 'Access From',
+            type: 'pie',
+            radius: ['40%', '70%'],
+            avoidLabelOverlap: false,
+            label: {
+              show: false,
+              position: 'center',
+            },
+            emphasis: {
+              label: {
+                show: true,
+                fontSize: 40,
+                fontWeight: 'bold',
+              },
+            },
+            labelLine: {
+              show: false,
+            },
+            data: [
+              { value: 1048, name: 'Search Engine' },
+              { value: 735, name: 'Direct' },
+              { value: 580, name: 'Email' },
+              { value: 484, name: 'Union Ads' },
+              { value: 300, name: 'Video Ads' },
+            ],
+          },
+        ],
+      },
+      riskWeatherScaleOpt: {
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            // Use axis to trigger tooltip
+            type: 'shadow', // 'shadow' as default; can also be 'line' or 'shadow'
+          },
+        },
+        legend: {},
+        grid: {
+          left: '3%',
+          right: '4%',
+          bottom: '3%',
+          containLabel: true,
+        },
+        xAxis: {
+          type: 'value',
+        },
+        yAxis: {
+          type: 'category',
+          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
+        },
+        series: [
+          {
+            name: 'Direct',
+            type: 'bar',
+            stack: 'total',
+            label: {
+              show: true,
+            },
+            emphasis: {
+              focus: 'series',
+            },
+            data: [320, 302, 301, 334, 390, 330, 320],
+          },
+          {
+            name: 'Mail Ad',
+            type: 'bar',
+            stack: 'total',
+            label: {
+              show: true,
+            },
+            emphasis: {
+              focus: 'series',
+            },
+            data: [120, 132, 101, 134, 90, 230, 210],
+          },
+          {
+            name: 'Affiliate Ad',
+            type: 'bar',
+            stack: 'total',
+            label: {
+              show: true,
+            },
+            emphasis: {
+              focus: 'series',
+            },
+            data: [220, 182, 191, 234, 290, 330, 310],
+          },
+          {
+            name: 'Video Ad',
+            type: 'bar',
+            stack: 'total',
+            label: {
+              show: true,
+            },
+            emphasis: {
+              focus: 'series',
+            },
+            data: [150, 212, 201, 154, 190, 330, 410],
+          },
+          {
+            name: 'Search Engine',
+            type: 'bar',
+            stack: 'total',
+            label: {
+              show: true,
+            },
+            emphasis: {
+              focus: 'series',
+            },
+            data: [820, 832, 901, 934, 1290, 1330, 1320],
+          },
+        ],
+      },
+      complexWeatherScaleOpt: {
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            // Use axis to trigger tooltip
+            type: 'shadow', // 'shadow' as default; can also be 'line' or 'shadow'
+          },
+        },
+        legend: {},
+        grid: {
+          left: '3%',
+          right: '4%',
+          bottom: '3%',
+          containLabel: true,
+        },
+        xAxis: {
+          type: 'value',
+        },
+        yAxis: {
+          type: 'category',
+          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
+        },
+        series: [
+          {
+            name: 'Direct',
+            type: 'bar',
+            stack: 'total',
+            label: {
+              show: true,
+            },
+            emphasis: {
+              focus: 'series',
+            },
+            data: [320, 302, 301, 334, 390, 330, 320],
+          },
+          {
+            name: 'Mail Ad',
+            type: 'bar',
+            stack: 'total',
+            label: {
+              show: true,
+            },
+            emphasis: {
+              focus: 'series',
+            },
+            data: [120, 132, 101, 134, 90, 230, 210],
+          },
+          {
+            name: 'Affiliate Ad',
+            type: 'bar',
+            stack: 'total',
+            label: {
+              show: true,
+            },
+            emphasis: {
+              focus: 'series',
+            },
+            data: [220, 182, 191, 234, 290, 330, 310],
+          },
+          {
+            name: 'Video Ad',
+            type: 'bar',
+            stack: 'total',
+            label: {
+              show: true,
+            },
+            emphasis: {
+              focus: 'series',
+            },
+            data: [150, 212, 201, 154, 190, 330, 410],
+          },
+          {
+            name: 'Search Engine',
+            type: 'bar',
+            stack: 'total',
+            label: {
+              show: true,
+            },
+            emphasis: {
+              focus: 'series',
+            },
+            data: [820, 832, 901, 934, 1290, 1330, 1320],
+          },
+        ],
+      },
+      roadTypeScaleOpt: {
+        tooltip: {
+          trigger: 'item',
+        },
+        legend: {
+          top: '5%',
+          left: 'center',
+        },
+        series: [
+          {
+            name: 'Access From',
+            type: 'pie',
+            radius: ['40%', '70%'],
+            avoidLabelOverlap: false,
+            label: {
+              show: false,
+              position: 'center',
+            },
+            emphasis: {
+              label: {
+                show: true,
+                fontSize: 40,
+                fontWeight: 'bold',
+              },
+            },
+            labelLine: {
+              show: false,
+            },
+            data: [
+              { value: 1048, name: 'Search Engine' },
+              { value: 735, name: 'Direct' },
+              { value: 580, name: 'Email' },
+              { value: 484, name: 'Union Ads' },
+              { value: 300, name: 'Video Ads' },
+            ],
+          },
+        ],
+      },
+      regionScaleOpt: {
+        title: {
+          text: 'World Population',
+        },
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'shadow',
+          },
+        },
+        legend: {},
+        grid: {
+          left: '3%',
+          right: '4%',
+          bottom: '3%',
+          containLabel: true,
+        },
+        xAxis: {
+          type: 'value',
+          boundaryGap: [0, 0.01],
+        },
+        yAxis: {
+          type: 'category',
+          data: ['Brazil', 'Indonesia', 'USA', 'India', 'China', 'World'],
+        },
+        series: [
+          {
+            name: '2011',
+            type: 'bar',
+            data: [18203, 23489, 29034, 104970, 131744, 630230],
+          },
+        ],
+      },
+      roadplaneScaleOpt: {
+        xAxis: {
+          type: 'category',
+          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
+        },
+        yAxis: {
+          type: 'value',
+        },
+        series: [
+          {
+            data: [120, 200, 150, 80, 70, 110, 130],
+            type: 'bar',
+          },
+        ],
+      },
+      roadportraitScaleOpt: {
+        xAxis: {
+          type: 'category',
+          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
+        },
+        yAxis: {
+          type: 'value',
+        },
+        series: [
+          {
+            data: [120, 200, 150, 80, 70, 110, 130],
+            type: 'bar',
+          },
+        ],
+      },
+      riskRegionScaleOpt: {
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            // Use axis to trigger tooltip
+            type: 'shadow', // 'shadow' as default; can also be 'line' or 'shadow'
+          },
+        },
+        legend: {},
+        grid: {
+          left: '3%',
+          right: '4%',
+          bottom: '3%',
+          containLabel: true,
+        },
+        xAxis: {
+          type: 'value',
+        },
+        yAxis: {
+          type: 'category',
+          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
+        },
+        series: [
+          {
+            name: 'Direct',
+            type: 'bar',
+            stack: 'total',
+            label: {
+              show: true,
+            },
+            emphasis: {
+              focus: 'series',
+            },
+            data: [320, 302, 301, 334, 390, 330, 320],
+          },
+          {
+            name: 'Mail Ad',
+            type: 'bar',
+            stack: 'total',
+            label: {
+              show: true,
+            },
+            emphasis: {
+              focus: 'series',
+            },
+            data: [120, 132, 101, 134, 90, 230, 210],
+          },
+          {
+            name: 'Affiliate Ad',
+            type: 'bar',
+            stack: 'total',
+            label: {
+              show: true,
+            },
+            emphasis: {
+              focus: 'series',
+            },
+            data: [220, 182, 191, 234, 290, 330, 310],
+          },
+          {
+            name: 'Video Ad',
+            type: 'bar',
+            stack: 'total',
+            label: {
+              show: true,
+            },
+            emphasis: {
+              focus: 'series',
+            },
+            data: [150, 212, 201, 154, 190, 330, 410],
+          },
+          {
+            name: 'Search Engine',
+            type: 'bar',
+            stack: 'total',
+            label: {
+              show: true,
+            },
+            emphasis: {
+              focus: 'series',
+            },
+            data: [820, 832, 901, 934, 1290, 1330, 1320],
+          },
+        ],
+      },
+      complexRegionScaleOpt: {
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            // Use axis to trigger tooltip
+            type: 'shadow', // 'shadow' as default; can also be 'line' or 'shadow'
+          },
+        },
+        legend: {},
+        grid: {
+          left: '3%',
+          right: '4%',
+          bottom: '3%',
+          containLabel: true,
+        },
+        xAxis: {
+          type: 'value',
+        },
+        yAxis: {
+          type: 'category',
+          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
+        },
+        series: [
+          {
+            name: 'Direct',
+            type: 'bar',
+            stack: 'total',
+            label: {
+              show: true,
+            },
+            emphasis: {
+              focus: 'series',
+            },
+            data: [320, 302, 301, 334, 390, 330, 320],
+          },
+          {
+            name: 'Mail Ad',
+            type: 'bar',
+            stack: 'total',
+            label: {
+              show: true,
+            },
+            emphasis: {
+              focus: 'series',
+            },
+            data: [120, 132, 101, 134, 90, 230, 210],
+          },
+          {
+            name: 'Affiliate Ad',
+            type: 'bar',
+            stack: 'total',
+            label: {
+              show: true,
+            },
+            emphasis: {
+              focus: 'series',
+            },
+            data: [220, 182, 191, 234, 290, 330, 310],
+          },
+          {
+            name: 'Video Ad',
+            type: 'bar',
+            stack: 'total',
+            label: {
+              show: true,
+            },
+            emphasis: {
+              focus: 'series',
+            },
+            data: [150, 212, 201, 154, 190, 330, 410],
+          },
+          {
+            name: 'Search Engine',
+            type: 'bar',
+            stack: 'total',
+            label: {
+              show: true,
+            },
+            emphasis: {
+              focus: 'series',
+            },
+            data: [820, 832, 901, 934, 1290, 1330, 1320],
+          },
+        ],
+      },
+      riskRoadScaleOpt: {
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            // Use axis to trigger tooltip
+            type: 'shadow', // 'shadow' as default; can also be 'line' or 'shadow'
+          },
+        },
+        legend: {},
+        grid: {
+          left: '3%',
+          right: '4%',
+          bottom: '3%',
+          containLabel: true,
+        },
+        xAxis: {
+          type: 'value',
+        },
+        yAxis: {
+          type: 'category',
+          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
+        },
+        series: [
+          {
+            name: 'Direct',
+            type: 'bar',
+            stack: 'total',
+            label: {
+              show: true,
+            },
+            emphasis: {
+              focus: 'series',
+            },
+            data: [320, 302, 301, 334, 390, 330, 320],
+          },
+          {
+            name: 'Mail Ad',
+            type: 'bar',
+            stack: 'total',
+            label: {
+              show: true,
+            },
+            emphasis: {
+              focus: 'series',
+            },
+            data: [120, 132, 101, 134, 90, 230, 210],
+          },
+          {
+            name: 'Affiliate Ad',
+            type: 'bar',
+            stack: 'total',
+            label: {
+              show: true,
+            },
+            emphasis: {
+              focus: 'series',
+            },
+            data: [220, 182, 191, 234, 290, 330, 310],
+          },
+          {
+            name: 'Video Ad',
+            type: 'bar',
+            stack: 'total',
+            label: {
+              show: true,
+            },
+            emphasis: {
+              focus: 'series',
+            },
+            data: [150, 212, 201, 154, 190, 330, 410],
+          },
+          {
+            name: 'Search Engine',
+            type: 'bar',
+            stack: 'total',
+            label: {
+              show: true,
+            },
+            emphasis: {
+              focus: 'series',
+            },
+            data: [820, 832, 901, 934, 1290, 1330, 1320],
+          },
+        ],
+      },
+      complexRoadScaleOpt: {
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            // Use axis to trigger tooltip
+            type: 'shadow', // 'shadow' as default; can also be 'line' or 'shadow'
+          },
+        },
+        legend: {},
+        grid: {
+          left: '3%',
+          right: '4%',
+          bottom: '3%',
+          containLabel: true,
+        },
+        xAxis: {
+          type: 'value',
+        },
+        yAxis: {
+          type: 'category',
+          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
+        },
+        series: [
+          {
+            name: 'Direct',
+            type: 'bar',
+            stack: 'total',
+            label: {
+              show: true,
+            },
+            emphasis: {
+              focus: 'series',
+            },
+            data: [320, 302, 301, 334, 390, 330, 320],
+          },
+          {
+            name: 'Mail Ad',
+            type: 'bar',
+            stack: 'total',
+            label: {
+              show: true,
+            },
+            emphasis: {
+              focus: 'series',
+            },
+            data: [120, 132, 101, 134, 90, 230, 210],
+          },
+          {
+            name: 'Affiliate Ad',
+            type: 'bar',
+            stack: 'total',
+            label: {
+              show: true,
+            },
+            emphasis: {
+              focus: 'series',
+            },
+            data: [220, 182, 191, 234, 290, 330, 310],
+          },
+          {
+            name: 'Video Ad',
+            type: 'bar',
+            stack: 'total',
+            label: {
+              show: true,
+            },
+            emphasis: {
+              focus: 'series',
+            },
+            data: [150, 212, 201, 154, 190, 330, 410],
+          },
+          {
+            name: 'Search Engine',
+            type: 'bar',
+            stack: 'total',
+            label: {
+              show: true,
+            },
+            emphasis: {
+              focus: 'series',
+            },
+            data: [820, 832, 901, 934, 1290, 1330, 1320],
+          },
+        ],
+      },
+      riskRoadPortraitScaleOpt: {
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            // Use axis to trigger tooltip
+            type: 'shadow', // 'shadow' as default; can also be 'line' or 'shadow'
+          },
+        },
+        legend: {},
+        grid: {
+          left: '3%',
+          right: '4%',
+          bottom: '3%',
+          containLabel: true,
+        },
+        xAxis: {
+          type: 'value',
+        },
+        yAxis: {
+          type: 'category',
+          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
+        },
+        series: [
+          {
+            name: 'Direct',
+            type: 'bar',
+            stack: 'total',
+            label: {
+              show: true,
+            },
+            emphasis: {
+              focus: 'series',
+            },
+            data: [320, 302, 301, 334, 390, 330, 320],
+          },
+          {
+            name: 'Mail Ad',
+            type: 'bar',
+            stack: 'total',
+            label: {
+              show: true,
+            },
+            emphasis: {
+              focus: 'series',
+            },
+            data: [120, 132, 101, 134, 90, 230, 210],
+          },
+          {
+            name: 'Affiliate Ad',
+            type: 'bar',
+            stack: 'total',
+            label: {
+              show: true,
+            },
+            emphasis: {
+              focus: 'series',
+            },
+            data: [220, 182, 191, 234, 290, 330, 310],
+          },
+          {
+            name: 'Video Ad',
+            type: 'bar',
+            stack: 'total',
+            label: {
+              show: true,
+            },
+            emphasis: {
+              focus: 'series',
+            },
+            data: [150, 212, 201, 154, 190, 330, 410],
+          },
+          {
+            name: 'Search Engine',
+            type: 'bar',
+            stack: 'total',
+            label: {
+              show: true,
+            },
+            emphasis: {
+              focus: 'series',
+            },
+            data: [820, 832, 901, 934, 1290, 1330, 1320],
+          },
+        ],
+      },
+      complexRoadPortraitScaleOpt: {
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            // Use axis to trigger tooltip
+            type: 'shadow', // 'shadow' as default; can also be 'line' or 'shadow'
+          },
+        },
+        legend: {},
+        grid: {
+          left: '3%',
+          right: '4%',
+          bottom: '3%',
+          containLabel: true,
+        },
+        xAxis: {
+          type: 'value',
+        },
+        yAxis: {
+          type: 'category',
+          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
+        },
+        series: [
+          {
+            name: 'Direct',
+            type: 'bar',
+            stack: 'total',
+            label: {
+              show: true,
+            },
+            emphasis: {
+              focus: 'series',
+            },
+            data: [320, 302, 301, 334, 390, 330, 320],
+          },
+          {
+            name: 'Mail Ad',
+            type: 'bar',
+            stack: 'total',
+            label: {
+              show: true,
+            },
+            emphasis: {
+              focus: 'series',
+            },
+            data: [120, 132, 101, 134, 90, 230, 210],
+          },
+          {
+            name: 'Affiliate Ad',
+            type: 'bar',
+            stack: 'total',
+            label: {
+              show: true,
+            },
+            emphasis: {
+              focus: 'series',
+            },
+            data: [220, 182, 191, 234, 290, 330, 310],
+          },
+          {
+            name: 'Video Ad',
+            type: 'bar',
+            stack: 'total',
+            label: {
+              show: true,
+            },
+            emphasis: {
+              focus: 'series',
+            },
+            data: [150, 212, 201, 154, 190, 330, 410],
+          },
+          {
+            name: 'Search Engine',
+            type: 'bar',
+            stack: 'total',
+            label: {
+              show: true,
+            },
+            emphasis: {
+              focus: 'series',
+            },
+            data: [820, 832, 901, 934, 1290, 1330, 1320],
+          },
+        ],
+      },
+      algorithmOthcarScaleOpt: {
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            // Use axis to trigger tooltip
+            type: 'shadow', // 'shadow' as default; can also be 'line' or 'shadow'
+          },
+        },
+        legend: {},
+        grid: {
+          left: '3%',
+          right: '4%',
+          bottom: '3%',
+          containLabel: true,
+        },
+        xAxis: {
+          type: 'value',
+        },
+        yAxis: {
+          type: 'category',
+          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
+        },
+        series: [
+          {
+            name: 'Direct',
+            type: 'bar',
+            stack: 'total',
+            label: {
+              show: true,
+            },
+            emphasis: {
+              focus: 'series',
+            },
+            data: [320, 302, 301, 334, 390, 330, 320],
+          },
+          {
+            name: 'Mail Ad',
+            type: 'bar',
+            stack: 'total',
+            label: {
+              show: true,
+            },
+            emphasis: {
+              focus: 'series',
+            },
+            data: [120, 132, 101, 134, 90, 230, 210],
+          },
+          {
+            name: 'Affiliate Ad',
+            type: 'bar',
+            stack: 'total',
+            label: {
+              show: true,
+            },
+            emphasis: {
+              focus: 'series',
+            },
+            data: [220, 182, 191, 234, 290, 330, 310],
+          },
+          {
+            name: 'Video Ad',
+            type: 'bar',
+            stack: 'total',
+            label: {
+              show: true,
+            },
+            emphasis: {
+              focus: 'series',
+            },
+            data: [150, 212, 201, 154, 190, 330, 410],
+          },
+          {
+            name: 'Search Engine',
+            type: 'bar',
+            stack: 'total',
+            label: {
+              show: true,
+            },
+            emphasis: {
+              focus: 'series',
+            },
+            data: [820, 832, 901, 934, 1290, 1330, 1320],
+          },
+        ],
+      },
+      algorithmWeatherScaleOpt: {
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            // Use axis to trigger tooltip
+            type: 'shadow', // 'shadow' as default; can also be 'line' or 'shadow'
+          },
+        },
+        legend: {},
+        grid: {
+          left: '3%',
+          right: '4%',
+          bottom: '3%',
+          containLabel: true,
+        },
+        xAxis: {
+          type: 'value',
+        },
+        yAxis: {
+          type: 'category',
+          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
+        },
+        series: [
+          {
+            name: 'Direct',
+            type: 'bar',
+            stack: 'total',
+            label: {
+              show: true,
+            },
+            emphasis: {
+              focus: 'series',
+            },
+            data: [320, 302, 301, 334, 390, 330, 320],
+          },
+          {
+            name: 'Mail Ad',
+            type: 'bar',
+            stack: 'total',
+            label: {
+              show: true,
+            },
+            emphasis: {
+              focus: 'series',
+            },
+            data: [120, 132, 101, 134, 90, 230, 210],
+          },
+          {
+            name: 'Affiliate Ad',
+            type: 'bar',
+            stack: 'total',
+            label: {
+              show: true,
+            },
+            emphasis: {
+              focus: 'series',
+            },
+            data: [220, 182, 191, 234, 290, 330, 310],
+          },
+          {
+            name: 'Video Ad',
+            type: 'bar',
+            stack: 'total',
+            label: {
+              show: true,
+            },
+            emphasis: {
+              focus: 'series',
+            },
+            data: [150, 212, 201, 154, 190, 330, 410],
+          },
+          {
+            name: 'Search Engine',
+            type: 'bar',
+            stack: 'total',
+            label: {
+              show: true,
+            },
+            emphasis: {
+              focus: 'series',
+            },
+            data: [820, 832, 901, 934, 1290, 1330, 1320],
+          },
+        ],
+      },
+      algorithmRoadScaleOpt: {
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            // Use axis to trigger tooltip
+            type: 'shadow', // 'shadow' as default; can also be 'line' or 'shadow'
+          },
+        },
+        legend: {},
+        grid: {
+          left: '3%',
+          right: '4%',
+          bottom: '3%',
+          containLabel: true,
+        },
+        xAxis: {
+          type: 'value',
+        },
+        yAxis: {
+          type: 'category',
+          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
+        },
+        series: [
+          {
+            name: 'Direct',
+            type: 'bar',
+            stack: 'total',
+            label: {
+              show: true,
+            },
+            emphasis: {
+              focus: 'series',
+            },
+            data: [320, 302, 301, 334, 390, 330, 320],
+          },
+          {
+            name: 'Mail Ad',
+            type: 'bar',
+            stack: 'total',
+            label: {
+              show: true,
+            },
+            emphasis: {
+              focus: 'series',
+            },
+            data: [120, 132, 101, 134, 90, 230, 210],
+          },
+          {
+            name: 'Affiliate Ad',
+            type: 'bar',
+            stack: 'total',
+            label: {
+              show: true,
+            },
+            emphasis: {
+              focus: 'series',
+            },
+            data: [220, 182, 191, 234, 290, 330, 310],
+          },
+          {
+            name: 'Video Ad',
+            type: 'bar',
+            stack: 'total',
+            label: {
+              show: true,
+            },
+            emphasis: {
+              focus: 'series',
+            },
+            data: [150, 212, 201, 154, 190, 330, 410],
+          },
+          {
+            name: 'Search Engine',
+            type: 'bar',
+            stack: 'total',
+            label: {
+              show: true,
+            },
+            emphasis: {
+              focus: 'series',
+            },
+            data: [820, 832, 901, 934, 1290, 1330, 1320],
+          },
+        ],
+      },
+      tableColumnA: [
+        {
+          label: '场景名称',
+          key: 'a',
+        },
+        {
+          label: '复杂度分值',
+          key: 'b',
+        },
+        {
+          label: '复杂度等级',
+          key: 'c',
+        },
+        {
+          label: '危险度分值',
+          key: 'd',
+        },
+        {
+          label: '危险度等级',
+          key: 'e',
+        },
+        {
+          label: '算法得分',
+          key: 'f',
+        },
+      ],
+      tableColumnB: [
+        {
+          label: '复杂度分值',
+          key: 'a',
+        },
+        {
+          label: '复杂度等级',
+          key: 'b',
+        },
+      ],
+      tableColumnC: [
+        {
+          label: '危险度分值',
+          key: 'a',
+        },
+        {
+          label: '危险度等级',
+          key: 'b',
+        },
+      ],
+      tableDataA: [
+        {
+          a: 1,
+          b: 2,
+          c: 3,
+          d: 4,
+          e: 5,
+          f: 6,
+        },
+        {
+          a: 1,
+          b: 2,
+          c: 3,
+          d: 4,
+          e: 5,
+          f: 6,
+        },
+      ],
+      tableDataB: [{ a: '>90', b: 'A' }],
+      tableDataC: [{ a: '>90', b: 'A' }],
+      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.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({
+        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: [Number(info.sceneNum)],
+            type: 'bar',
+          },
+        ],
+      })
+
+      chart_risk.setOption({
+        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: [2],
+            type: 'bar',
+          },
+        ],
+      })
+
+      /** */
+      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: ['AA', 'A', 'B', 'C', 'D'],
+        },
+        series: [
+          {
+            name: '不通过',
+            type: 'bar',
+            stack: 'total',
+            label: {
+              show: true,
+            },
+            emphasis: {
+              focus: 'series',
+            },
+            data: [info.compLevelForPassNum['AA']?info.compLevelForPassNum['AA'].unPassNum : null],
+          },
+        ],
+      })
+      chart_risk_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: ['AA', 'A', 'B', 'C', 'D'],
+        },
+        series: [
+          {
+            name: '不通过',
+            type: 'bar',
+            stack: 'total',
+            label: {
+              show: true,
+            },
+            emphasis: {
+              focus: 'series',
+            },
+            data: [info.riskLevelForPassNum['AA']?info.riskLevelForPassNum['AA'].unPassNum : null],
+          },
+        ],
+      })
+      /** */
+
+      chart_othcar_scale.setOption({
+        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({
+        grid: {
+          left: '3%',
+          right: '4%',
+          bottom: '3%',
+          containLabel: true,
+        },
+        xAxis: {
+          type: 'value',
+        },
+        yAxis: {
+          type: 'category',
+          data: Object.keys(info.otherBehaviorForCompLevelNum),
+        },
+        series: [
+          {
+            name: 'AA',
+            type: 'bar',
+            stack: 'total',
+            label: {
+              show: true,
+            },
+            emphasis: {
+              focus: 'series',
+            },
+            data: Object.keys(info.otherBehaviorForCompLevelNum).map(
+              (item) => info.otherBehaviorForCompLevelNum[item].AA
+            ),
+          },
+        ],
+      })
+      chart_complex_othcar_scale.setOption({
+        grid: {
+          left: '3%',
+          right: '4%',
+          bottom: '3%',
+          containLabel: true,
+        },
+        xAxis: {
+          type: 'value',
+        },
+        yAxis: {
+          type: 'category',
+          data: Object.keys(info.otherBehaviorForRiskLevelNum),
+        },
+        series: [
+          {
+            name: 'AA',
+            type: 'bar',
+            stack: 'total',
+            label: {
+              show: true,
+            },
+            barWidth: 15,
+            emphasis: {
+              focus: 'series',
+            },
+            data: Object.keys(info.otherBehaviorForRiskLevelNum).map(
+              (item) => info.otherBehaviorForRiskLevelNum[item].AA
+            ),
+          },
+        ],
+      })
+
+      chart_weather_scale.setOption({
+        tooltip: {
+          trigger: 'item',
+        },
+        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({
+        legend: {},
+        grid: {
+          left: '3%',
+          right: '4%',
+          bottom: '3%',
+          containLabel: true,
+        },
+        xAxis: {
+          type: 'value',
+        },
+        yAxis: {
+          type: 'category',
+          data: Object.keys(info.weatherForCompLevelNum),
+        },
+        series: [
+          {
+            name: 'AA',
+            type: 'bar',
+            stack: 'total',
+            label: {
+              show: true,
+            },
+            barWidth: 30,
+            emphasis: {
+              focus: 'series',
+            },
+            data: Object.keys(info.weatherForCompLevelNum).map(
+              (item) => info.weatherForCompLevelNum[item].AA
+            ),
+          },
+        ],
+      })
+
+      chart_risk_weather_scale.setOption({
+        legend: {},
+        grid: {
+          left: '3%',
+          right: '4%',
+          bottom: '3%',
+          containLabel: true,
+        },
+        xAxis: {
+          type: 'value',
+        },
+        yAxis: {
+          type: 'category',
+          data: Object.keys(info.weatherForRiskLevelNum),
+        },
+        series: [
+          {
+            name: 'AA',
+            type: 'bar',
+            stack: 'total',
+            label: {
+              show: true,
+            },
+            barWidth: 30,
+            emphasis: {
+              focus: 'series',
+            },
+            data: Object.keys(info.weatherForRiskLevelNum).map(
+              (item) => info.weatherForRiskLevelNum[item].AA
+            ),
+          },
+        ],
+      })
+
+      chart_roadtype_scale.setOption({
+        tooltip: {
+          trigger: 'item',
+        },
+        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({
+        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({
+        xAxis: {
+          type: 'category',
+          data: Object.keys(info.roadGeometryPlaneTypeForNum),
+        },
+        yAxis: {
+          type: 'value',
+        },
+        series: [
+          {
+            data: Object.values(info.roadGeometryPlaneTypeForNum),
+            type: 'bar',
+          },
+        ],
+      })
+      chart_roadportrait_scale.setOption({
+        xAxis: {
+          type: 'category',
+          data: Object.keys(info.roadGeometryVerticalTypeForNum),
+        },
+        yAxis: {
+          type: 'value',
+        },
+        series: [
+          {
+            data: Object.values(info.roadGeometryVerticalTypeForNum),
+            type: 'bar',
+          },
+        ],
+      })
+
+      chart_risk_region_scale.setOption({
+        grid: {
+          left: '3%',
+          right: '4%',
+          bottom: '3%',
+          containLabel: true,
+        },
+        legend: {},
+        xAxis: {
+          type: 'value',
+        },
+        yAxis: {
+          type: 'category',
+          data: Object.keys(info.operationAreaForRiskLevelNum),
+        },
+        series: [
+          {
+            name: 'AA',
+            type: 'bar',
+            stack: 'total',
+            label: {
+              show: true,
+            },
+            emphasis: {
+              focus: 'series',
+            },
+            data: Object.keys(info.operationAreaForRiskLevelNum).map(
+              (item) => info.operationAreaForRiskLevelNum[item].AA
+            ),
+          },
+        ]
+      })
+      
+      chart_complex_region_scale.setOption({
+        grid: {
+          left: '3%',
+          right: '4%',
+          bottom: '3%',
+          containLabel: true,
+        },
+        legend: {},
+        xAxis: {
+          type: 'value',
+        },
+        yAxis: {
+          type: 'category',
+          data: Object.keys(info.operationAreaForCompLevelNum),
+        },
+        series: [
+          {
+            name: 'AA',
+            type: 'bar',
+            stack: 'total',
+            label: {
+              show: true,
+            },
+            emphasis: {
+              focus: 'series',
+            },
+            data: Object.keys(info.operationAreaForCompLevelNum).map(
+              (item) => info.operationAreaForCompLevelNum[item].AA
+            ),
+          },
+        ]
+      })
+      
+      
+      chart_risk_road_scale.setOption({
+        grid: {
+          left: '3%',
+          right: '4%',
+          bottom: '3%',
+          containLabel: true,
+        },
+        legend: {},
+        xAxis: {
+          type: 'value',
+        },
+        yAxis: {
+          type: 'category',
+          data: Object.keys(info.roadGeometryPlaneForRiskLevelNum),
+        },
+        series: [
+          {
+            name: 'AA',
+            type: 'bar',
+            stack: 'total',
+            label: {
+              show: true,
+            },
+            emphasis: {
+              focus: 'series',
+            },
+            data: Object.keys(info.roadGeometryPlaneForRiskLevelNum).map(
+              (item) => info.roadGeometryPlaneForRiskLevelNum[item].AA
+            ),
+          },
+        ]
+      })
+      
+      chart_complex_road_scale.setOption({
+        grid: {
+          left: '3%',
+          right: '4%',
+          bottom: '3%',
+          containLabel: true,
+        },
+        legend: {},
+        xAxis: {
+          type: 'value',
+        },
+        yAxis: {
+          type: 'category',
+          data: Object.keys(info.roadGeometryPlaneForCompLevelNum),
+        },
+        series: [
+          {
+            name: 'AA',
+            type: 'bar',
+            stack: 'total',
+            label: {
+              show: true,
+            },
+            emphasis: {
+              focus: 'series',
+            },
+            data: Object.keys(info.roadGeometryPlaneForCompLevelNum).map(
+              (item) => info.roadGeometryPlaneForCompLevelNum[item].AA
+            ),
+          },
+        ]
+      })
+     
+      chart_risk_roadportrait_scale.setOption({
+        grid: {
+          left: '3%',
+          right: '4%',
+          bottom: '3%',
+          containLabel: true,
+        },
+        legend: {},
+        xAxis: {
+          type: 'value',
+        },
+        yAxis: {
+          type: 'category',
+          data: Object.keys(info.roadGeometryVerticalForRiskLevelNum),
+        },
+        series: [
+          {
+            name: 'AA',
+            type: 'bar',
+            stack: 'total',
+            label: {
+              show: true,
+            },
+            emphasis: {
+              focus: 'series',
+            },
+            data: Object.keys(info.roadGeometryVerticalForRiskLevelNum).map(
+              (item) => info.roadGeometryVerticalForRiskLevelNum[item].AA
+            ),
+          },
+        ]
+      })
+      chart_complex_roadportrait_scale.setOption({
+        grid: {
+          left: '3%',
+          right: '4%',
+          bottom: '3%',
+          containLabel: true,
+        },
+        legend: {},
+        xAxis: {
+          type: 'value',
+        },
+        yAxis: {
+          type: 'category',
+          data: Object.keys(info.roadGeometryVerticalForCompLevelNum),
+        },
+        series: [
+          {
+            name: 'AA',
+            type: 'bar',
+            stack: 'total',
+            label: {
+              show: true,
+            },
+            emphasis: {
+              focus: 'series',
+            },
+            data: Object.keys(info.roadGeometryVerticalForCompLevelNum).map(
+              (item) => info.roadGeometryVerticalForCompLevelNum[item].AA
+            ),
+          },
+        ]
+      })
+      chart_algorithm_othcar_scale.setOption({
+        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.roadPlanePassNum),
+        },
+        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({
+        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.roadPlanePassNum),
+        },
+        series: [
+          {
+            name: '不通过',
+            type: 'bar',
+            stack: 'total',
+            label: {
+              show: true,
+            },
+            emphasis: {
+              focus: 'series',
+            },
+            data: Object.keys(info.weatherAndAreaPassNum).map(item=>{
+              return info.weatherAndAreaPassNum[item]?info.weatherAndAreaPassNum[item]['unPassNum'] : null
+            }),
+          },
+          {
+            name: '通过',
+            type: 'bar',
+            stack: 'total',
+            label: {
+              show: true,
+            },
+            emphasis: {
+              focus: 'series',
+            },
+            data: Object.keys(info.weatherAndAreaPassNum).map(item=>{
+              return info.weatherAndAreaPassNum[item]?info.weatherAndAreaPassNum[item]['passNum'] :null
+            }),
+          },
+        ],
+      })
+      chart_algorithm_road_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: Object.keys(info.roadPlanePassNum),
+        },
+        series: [
+          {
+            name: '不通过',
+            type: 'bar',
+            stack: 'total',
+            label: {
+              show: true,
+            },
+            emphasis: {
+              focus: 'series',
+            },
+            data: Object.keys(info.roadPlanePassNum).map(item=>{
+              return info.roadPlanePassNum[item]?info.roadPlanePassNum[item]['unPassNum'] : null
+            }),
+          },
+          {
+            name: '通过',
+            type: 'bar',
+            stack: 'total',
+            label: {
+              show: true,
+            },
+            emphasis: {
+              focus: 'series',
+            },
+            data: Object.keys(info.roadPlanePassNum).map(item=>{
+              return info.roadPlanePassNum[item]?info.roadPlanePassNum[item]['passNum'] : null
+            }),
+          },
+        ],
+      })
+    },
+    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;
+  border: 1px solid #ccc;
+  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: 1500px;
+      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: 250px;
+        font-size: 82px;
+        font-weight: bold;
+        color: #000;
+      }
+      .report_table {
+        margin-top: 200px;
+        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>

src/views/workManagement/projectInfo.vue

@@ -143,6 +143,7 @@
                                 仿真云测试报告
                             </div>
                         </div>
+                        <button @click="jumpReport">跳转</button>
                     </div>
                 </div>
             </div>
@@ -472,6 +473,12 @@ export default {
     },
 
     methods: {
+        jumpReport(){
+            this.$router.push({
+                    path: "/demo",
+                    query: { id: this.id,projectType:this.projectType },
+                });
+        },
         viewRow(row) {
             let path = "/manualRunProjectList/projectInfo/taskInfo";
             if (this.projectType === "2") {