报告修改：样式加总的雷达图

src/components/ComplexRadarChart/index copy 2.vue

@@ -0,0 +1,250 @@
+<template>
+    <div ref="chartRef" style="width: 100%; height: 800px;"></div>
+  </template>
+  
+  <script setup>
+  import { ref, onMounted, onUnmounted } from 'vue';
+  import * as echarts from 'echarts';
+  
+  const chartRef = ref(null);
+  let chartInstance = null;
+  
+  // --- 数据定义 ---
+  const indicators = [
+    // 目的与动机 (5)
+    { name: '享受', max: 50 }, { name: '对齐', max: 50 }, { name: '清晰度', max: 50 }, { name: '支持与协作', max: 50 }, { name: '热情与贡献', max: 50 },
+    // 领导力 (5)
+    { name: '启发性领导力', max: 50 }, { name: '领导勇气', max: 50 }, { name: '人际领导力', max: 50 }, { name: '协作赋能型领导力', max: 50 }, { name: '愿景与背景', max: 50 },
+    // 学习 (5)
+    { name: '反思性学习', max: 50 }, { name: '发展导向', max: 50 }, { name: '嵌入式学习', max: 50 }, { name: '学习相关性', max: 50 }, { name: '发展规划', max: 50 },
+    // 内部流程及系统与架构 (5)
+    { name: '合理资源配置', max: 50 }, { name: '团队决策', max: 50 }, { name: '问责机制', max: 50 }, { name: '系统效能', max: 50 }, { name: '团队效能', max: 50 },
+    // 关系 (5)
+    { name: '技能与专业知识', max: 50 }, { name: '价值观多样性与包容性', max: 50 }, { name: '尊重与信任', max: 50 }, { name: '安全沟通', max: 50 }, { name: '团队精神与凝聚力', max: 50 },
+    // 外部流程及系统与架构 (5)
+    { name: '环境意识', max: 50 }, { name: '利益相关者与客户协同', max: 50 }, { name: '人才与资源获取', max: 50 }, { name: '利益相关者与客户沟通', max: 50 }, { name: '关系中的信任与诚信', max: 50 },
+  ].reverse();
+  
+  const categoryData = [
+        { name: '目的与动机', color: '#823479' },
+      { name: '领导力', color: '#898989' },
+      { name: '学习', color: '#AECDF3' },
+      { name: '内部流程及系统与架构', color: '#FFD64E' },
+      { name: '关系', color: '#193D59' },
+      { name: '外部流程及系统与架构', color: '#009191' },
+  ];
+  const reversedCategoryData = [...categoryData].reverse();
+  
+  const teamData = [
+    {
+      name: '团队A',
+      value: [42, 38, 45, 30, 35, 48, 32, 25, 40, 33, 22, 38, 41, 36, 29, 45, 31, 39, 27, 43, 25, 47, 33, 46, 28, 37, 44, 26, 49, 34].reverse(),
+      lineStyle: { color: '#FDD13A' },
+      itemStyle: { color: '#FDD13A' },
+      areaStyle: { color: 'rgba(255, 255, 255, 0.6)' },
+    },
+    {
+      name: '团队B',
+      value: [35, 45, 33, 42, 28, 30, 41, 46, 29, 38, 48, 27, 39, 43, 31, 36, 47, 25, 40, 32, 44, 26, 49, 34, 37, 22, 41, 30, 45, 38].reverse(),
+      lineStyle: { color: '#01949A' },
+      itemStyle: { color: '#01949A' },
+      areaStyle: { color: 'rgba(255, 255, 255, 0.6)' },
+    },
+  ];
+  
+  // --- 辅助函数 ---
+  const generateBackgroundSeries = () => {
+      const series = [];
+      let current = 0;
+      reversedCategoryData.forEach((cat) => {
+          const data = new Array(indicators.length).fill('-');
+          for (let i = 0; i < 5; i++) {
+              data[current + i] = 50;
+          }
+          series.push({
+              type: 'bar', 
+              coordinateSystem: 'polar', 
+              stack: 'background',
+              silent: true, data: data,
+              barCategoryGap: '0%',
+              itemStyle: {
+                  color: cat.color,
+                  opacity: 0.8,
+                  borderColor: '#FFFFFF',
+                  borderWidth: 0
+              }
+          });
+          current += 5;
+      });
+      return series;
+  };
+  
+  const initChart = () => {
+    if (chartRef.value) {
+      chartInstance = echarts.init(chartRef.value);
+  
+      const radarChartRadius = '60%';
+      const outerRingRadius = ['60%', '75%'];
+      const angleOffset = 360 / (indicators.length * 2);
+  
+      const baseOption = {
+        tooltip: { trigger: 'item' },
+        legend: { bottom: 20, data: teamData.map(d => d.name) },
+        polar: { center: ['50%', '50%'], radius: radarChartRadius },
+        radar: {
+          indicator: indicators,
+          shape: 'circle',
+          center: ['50%', '50%'],
+          radius: radarChartRadius,
+          startAngle: 90,
+          splitNumber: 5,
+          axisName: { show: false }, // 隐藏默认的 axisName，我们将使用 graphic 自定义
+          splitArea: { show: false },
+          axisLine: { lineStyle: { color: 'rgba(0,0,0,0.1)' } },
+          splitLine: { lineStyle: { color: 'rgba(0,0,0,0.1)' } },
+        },
+        angleAxis: {
+          type: 'category',
+          data: indicators.map(i => i.name),
+          boundaryGap: false,
+          axisTick: { show: false }, axisLabel: { show: false }, axisLine: { show: false },
+        },
+        radiusAxis: {
+          min: 0, max: 50, interval: 10,
+          axisLine: { show: false }, axisTick: { show: false }, axisLabel: { show: false },
+          splitLine: { lineStyle: { color: 'rgba(0,0,0,0.1)' } },
+        },
+        // **优化3: 使用 graphic 组件在中心添加带阴影的白色圆形**
+        graphic: {
+            elements: [
+                {
+                    type: 'group',
+                    left: 'center',
+                    top: 'center',
+                    children: [
+                        {
+                            type: 'circle',
+                            shape: { r: 30 }, // 圆形按钮的半径
+                            style: {
+                                fill: '#FFFFFF',
+                                shadowBlur: 20,
+                                shadowColor: 'rgba(0, 0, 0, 0.25)',
+                                shadowOffsetX: 0,
+                                shadowOffsetY: 4
+                            },
+                            z: 20
+                        }
+                    ]
+                }
+            ]
+        },
+        series: [
+          {
+            name: '外部环', type: 'pie', 
+            radius: outerRingRadius, center: ['50%', '50%'],
+            silent: true,
+            startAngle: 90 + angleOffset,
+            data: reversedCategoryData.map((item, index) => {
+              const total = reversedCategoryData.length;
+              const anglePerItem = 360 / total;
+              const centerAngle = -anglePerItem * index - anglePerItem / 2;
+              let rotation = centerAngle+5;
+              if (centerAngle < -90 && centerAngle > -270) {
+                rotation += 180;
+              }
+              return {
+                value: 1, name: item.name, itemStyle: { color: item.color },
+                label: { rotate: rotation }
+              };
+            }),
+            label: {
+              show: true, position: 'inside', formatter: '{b}',
+              color: '#FFFFFF', fontSize: 14, fontWeight: 'bold',
+            },
+            labelLine: { show: false },
+            itemStyle: { borderWidth: 0 },
+            z: 5,
+          },
+          { name: '能力评估', type: 'radar', data: teamData, symbol: 'circle', symbolSize: 8, z: 10 },
+          ...generateBackgroundSeries()
+        ],
+      };
+  
+      chartInstance.setOption(baseOption);
+  
+      // **优化1: 重写指标文字的旋转和对齐逻辑，确保文字始终正向易读**
+      const graphicLabels = indicators.map((indicator, index) => {
+          // 将文字放在半径为47的位置，比雷达图最大值50略小，比数据区大
+          const point = chartInstance.convertToPixel({ polarIndex: 0 }, [22, index]);
+          const x = point[0];
+          const y = point[1];
+  
+          const total = indicators.length;
+          const angleStep = 360 / total;
+          // 计算当前指标的角度, 90度为顶部, 顺时针递减
+          const angleInDegrees = 90 - (index * angleStep);
+  
+          let rotationAngle = angleInDegrees;
+          let textAlign = 'left';
+          
+          // 判断指标在圆的左半部分还是右半部分
+          // 左半部分: 角度 > 90 或 < -90
+          if (angleInDegrees <= -90 || angleInDegrees >= 90) {
+              // 左侧文字，旋转180度使其正向，并设置为右对齐
+              rotationAngle = angleInDegrees + 180;
+              textAlign = 'right';
+          } else if (angleInDegrees === 90 || angleInDegrees === -90) {
+              // 顶部或底部文字，居中对齐
+              textAlign = 'center';
+          }
+          // 右侧文字，保持默认左对齐即可
+  
+          // ECharts 的 rotation 是弧度制，需要转换
+          const rotationInRadians = rotationAngle * (Math.PI / 180);
+  
+          return {
+              type: 'text',
+              style: {
+                  text: indicator.name,
+                  font: '10px "Microsoft YaHei"',
+                  fill: '#333',
+                  align: textAlign, // 根据位置动态设置对齐方式
+                  verticalAlign: 'middle',
+              },
+              x: x, y: y,
+              rotation: rotationInRadians, // 应用计算好的旋转角度
+              z: 15
+          };
+      });
+  
+      // 将计算好的文字元素添加到图表中
+      chartInstance.setOption({
+          graphic: {
+              elements: [
+                  ...baseOption.graphic.elements, // 保留中心的圆形按钮
+                  ...graphicLabels // 添加指标文字
+              ]
+          }
+      });
+    }
+  };
+  
+  const resizeChart = () => {
+    // dispose后重建，确保graphic元素能重新计算位置
+    chartInstance?.dispose();
+    initChart();
+  };
+  
+  onMounted(() => {
+    // 使用 Promise.resolve().then() 确保 DOM 已完全渲染
+    Promise.resolve().then(() => {
+      initChart();
+      window.addEventListener('resize', resizeChart);
+    });
+  });
+  
+  onUnmounted(() => {
+    chartInstance?.dispose();
+    window.removeEventListener('resize', resizeChart);
+  });
+  </script>

src/components/ComplexRadarChart/index copy.vue

@@ -0,0 +1,249 @@
+<template>
+    <div ref="chartRef" style="width: 100%; height: 800px;"></div>
+  </template>
+  
+  <script setup>
+  import { ref, onMounted, onUnmounted } from 'vue';
+  import * as echarts from 'echarts';
+  
+  const chartRef = ref(null);
+  let chartInstance = null;
+  
+  // --- 数据定义 ---
+  const indicators = [
+    // 目的与动机 (5)
+    { name: '享受', max: 50 }, { name: '对齐', max: 50 }, { name: '清晰度', max: 50 }, { name: '支持与协作', max: 50 }, { name: '热情与贡献', max: 50 },
+    // 领导力 (5)
+    { name: '启发性领导力', max: 50 }, { name: '领导勇气', max: 50 }, { name: '人际领导力', max: 50 }, { name: '协作赋能型领导力', max: 50 }, { name: '愿景与背景', max: 50 },
+    // 学习 (5)
+    { name: '反思性学习', max: 50 }, { name: '发展导向', max: 50 }, { name: '嵌入式学习', max: 50 }, { name: '学习相关性', max: 50 }, { name: '发展规划', max: 50 },
+    // 内部流程及系统与架构 (5)
+    { name: '合理资源配置', max: 50 }, { name: '团队决策', max: 50 }, { name: '问责机制', max: 50 }, { name: '系统效能', max: 50 }, { name: '团队效能', max: 50 },
+    // 关系 (5)
+    { name: '技能与专业知识', max: 50 }, { name: '价值观多样性与包容性', max: 50 }, { name: '尊重与信任', max: 50 }, { name: '安全沟通', max: 50 }, { name: '团队精神与凝聚力', max: 50 },
+    // 外部流程及系统与架构 (5)
+    { name: '环境意识', max: 50 }, { name: '利益相关者与客户协同', max: 50 }, { name: '人才与资源获取', max: 50 }, { name: '利益相关者与客户沟通', max: 50 }, { name: '关系中的信任与诚信', max: 50 },
+  ].reverse();
+  
+  const categoryData = [
+        { name: '目的与动机', color: '#823479',color2: '#5B2454' },
+      { name: '领导力', color: '#898989',color2: '#606060' },
+      { name: '学习', color: '#AECDF3',color2: '#7A8FAB' },
+      { name: '内部流程及系统与架构', color: '#FFD64E',color2: '#B29638' },
+      { name: '关系', color: '#193D59',color2: '#112B3E' },
+      { name: '外部流程及系统与架构', color: '#009191',color2: '#006464' },
+  ];
+  const reversedCategoryData = [...categoryData].reverse();
+  
+  const teamData = [
+    {
+      name: '团队A',
+      value: [42, 38, 45, 30, 35, 48, 32, 25, 40, 33, 22, 38, 41, 36, 29, 45, 31, 39, 27, 43, 25, 47, 33, 46, 28, 37, 44, 26, 49, 34].reverse(),
+      lineStyle: { color: '#FDD13A' },
+      itemStyle: { color: '#FDD13A' },
+      areaStyle: { color: 'rgba(255, 255, 255, 0.5)' },
+    },
+    {
+      name: '团队B',
+      value: [35, 45, 33, 42, 28, 30, 41, 46, 29, 38, 48, 27, 39, 43, 31, 36, 47, 25, 40, 32, 44, 26, 49, 34, 37, 22, 41, 30, 45, 38].reverse(),
+      lineStyle: { color: '#01949A' },
+      itemStyle: { color: '#01949A' },
+      areaStyle: { color: 'rgba(255, 255, 255, 0.5)' },
+    },
+  ];
+  
+  // --- 辅助函数 ---
+  const generateBackgroundSeries = () => {
+      const series = [];
+      let current = 0;
+      reversedCategoryData.forEach((cat) => {
+          const data = new Array(indicators.length).fill('-');
+          for (let i = 0; i < 5; i++) {
+              data[current + i] = 50;
+          }
+          series.push({
+              type: 'bar', 
+              coordinateSystem: 'polar', 
+              stack: 'background',
+              silent: true, data: data,
+              barCategoryGap: '0%',
+              itemStyle: {
+                  color: cat.color2,
+                  borderColor: 'transparent',
+                  borderWidth: 0
+              }
+          });
+          current += 5;
+      });
+      return series;
+  };
+  
+  const initChart = () => {
+    if (chartRef.value) {
+      chartInstance = echarts.init(chartRef.value);
+  
+      const radarChartRadius = '60%';
+      const outerRingRadius = ['60%', '75%'];
+      const angleOffset = 360 / (indicators.length * 2);
+  
+      const baseOption = {
+        tooltip: { trigger: 'item' },
+        legend: { bottom: 20, data: teamData.map(d => d.name) },
+        polar: { center: ['50%', '50%'], radius: radarChartRadius },
+        radar: {
+          indicator: indicators,
+          shape: 'circle',
+          center: ['50%', '50%'],
+          radius: radarChartRadius,
+          startAngle: 90,
+          splitNumber: 5,
+          axisName: { show: false }, // 隐藏默认的 axisName，我们将使用 graphic 自定义
+          splitArea: { show: false },
+          axisLine: { lineStyle: { color: 'rgba(0,0,0,0.1)' } },
+          splitLine: { lineStyle: { color: 'rgba(0,0,0,0.1)' } },
+        },
+        angleAxis: {
+          type: 'category',
+          data: indicators.map(i => i.name),
+          boundaryGap: false,
+          axisTick: { show: false }, axisLabel: { show: false }, axisLine: { show: false },
+        },
+        radiusAxis: {
+          min: 0, max: 50, interval: 10,
+          axisLine: { show: false }, axisTick: { show: false }, axisLabel: { show: false },
+          splitLine: { lineStyle: { color: 'rgba(0,0,0,0.1)' } },
+        },
+        // **优化3: 使用 graphic 组件在中心添加带阴影的白色圆形**
+        graphic: {
+            elements: [
+                {
+                    type: 'group',
+                    left: 'center',
+                    top: 'center',
+                    children: [
+                        {
+                            type: 'circle',
+                            shape: { r: 30 }, // 圆形按钮的半径
+                            style: {
+                                fill: '#FFFFFF',
+                                shadowBlur: 20,
+                                shadowColor: 'rgba(0, 0, 0, 0.25)',
+                                shadowOffsetX: 0,
+                                shadowOffsetY: 4
+                            },
+                            z: 20
+                        }
+                    ]
+                }
+            ]
+        },
+        series: [
+          {
+            name: '外部环', type: 'pie', 
+            radius: outerRingRadius, center: ['50%', '50%'],
+            silent: true,
+            startAngle: 90 + angleOffset,
+            data: reversedCategoryData.map((item, index) => {
+              const total = reversedCategoryData.length;
+              const anglePerItem = 360 / total;
+              const centerAngle = -anglePerItem * index - anglePerItem / 2;
+              let rotation = centerAngle+5;
+              if (centerAngle < -90 && centerAngle > -270) {
+                rotation += 180;
+              }
+              return {
+                value: 1, name: item.name, itemStyle: { color: item.color },
+                label: { rotate: rotation }
+              };
+            }),
+            label: {
+              show: true, position: 'inside', formatter: '{b}',
+              color: '#FFFFFF', fontSize: 14, fontWeight: 'bold',
+            },
+            labelLine: { show: false },
+            itemStyle: { borderWidth: 0 },
+            z: 5,
+          },
+          { name: '能力评估', type: 'radar', data: teamData, symbol: 'circle', symbolSize: 8, z: 10 },
+          ...generateBackgroundSeries()
+        ],
+      };
+  
+      chartInstance.setOption(baseOption);
+  
+      // **优化1: 重写指标文字的旋转和对齐逻辑，确保文字始终正向易读**
+      const graphicLabels = indicators.map((indicator, index) => {
+          // 将文字放在半径为47的位置，比雷达图最大值50略小，比数据区大
+          const point = chartInstance.convertToPixel({ polarIndex: 0 }, [22, index]);
+          const x = point[0];
+          const y = point[1];
+  
+          const total = indicators.length;
+          const angleStep = 360 / total;
+          // 计算当前指标的角度, 90度为顶部, 顺时针递减
+          const angleInDegrees = 90 - (index * angleStep);
+  
+          let rotationAngle = angleInDegrees;
+          let textAlign = 'left';
+          
+          // 判断指标在圆的左半部分还是右半部分
+          // 左半部分: 角度 > 90 或 < -90
+          if (angleInDegrees <= -90 || angleInDegrees >= 90) {
+              // 左侧文字，旋转180度使其正向，并设置为右对齐
+              rotationAngle = angleInDegrees + 180;
+              textAlign = 'right';
+          } else if (angleInDegrees === 90 || angleInDegrees === -90) {
+              // 顶部或底部文字，居中对齐
+              textAlign = 'center';
+          }
+          // 右侧文字，保持默认左对齐即可
+  
+          // ECharts 的 rotation 是弧度制，需要转换
+          const rotationInRadians = rotationAngle * (Math.PI / 180);
+  
+          return {
+              type: 'text',
+              style: {
+                  text: indicator.name,
+                  font: '10px "Microsoft YaHei"',
+                  fill: '#333',
+                  align: textAlign, // 根据位置动态设置对齐方式
+                  verticalAlign: 'middle',
+              },
+              x: x, y: y,
+              rotation: rotationInRadians, // 应用计算好的旋转角度
+              z: 15
+          };
+      });
+  
+      // 将计算好的文字元素添加到图表中
+      chartInstance.setOption({
+          graphic: {
+              elements: [
+                  ...baseOption.graphic.elements, // 保留中心的圆形按钮
+                  ...graphicLabels // 添加指标文字
+              ]
+          }
+      });
+    }
+  };
+  
+  const resizeChart = () => {
+    // dispose后重建，确保graphic元素能重新计算位置
+    chartInstance?.dispose();
+    initChart();
+  };
+  
+  onMounted(() => {
+    // 使用 Promise.resolve().then() 确保 DOM 已完全渲染
+    Promise.resolve().then(() => {
+      initChart();
+      window.addEventListener('resize', resizeChart);
+    });
+  });
+  
+  onUnmounted(() => {
+    chartInstance?.dispose();
+    window.removeEventListener('resize', resizeChart);
+  });
+  </script>

src/components/ComplexRadarChart/index.vue

@@ -0,0 +1,250 @@
+<template>
+    <div ref="chartRef" style="width: 100%; height: 600px;"></div>
+  </template>
+  
+  <script setup>
+  import { ref, onMounted, onUnmounted } from 'vue';
+  import * as echarts from 'echarts';
+  
+  const chartRef = ref(null);
+  let chartInstance = null;
+  
+  // --- 数据定义 ---
+  const indicators = [
+    // 目的与动机 (5)
+    { name: '享受', max: 50 }, { name: '对齐', max: 50 }, { name: '清晰度', max: 50 }, { name: '支持与协作', max: 50 }, { name: '热情与贡献', max: 50 },
+    // 领导力 (5)
+    { name: '启发性领导力', max: 50 }, { name: '领导勇气', max: 50 }, { name: '人际领导力', max: 50 }, { name: '协作赋能型领导力', max: 50 }, { name: '愿景与背景', max: 50 },
+    // 学习 (5)
+    { name: '反思性学习', max: 50 }, { name: '发展导向', max: 50 }, { name: '嵌入式学习', max: 50 }, { name: '学习相关性', max: 50 }, { name: '发展规划', max: 50 },
+    // 内部流程及系统与架构 (5)
+    { name: '合理资源配置', max: 50 }, { name: '团队决策', max: 50 }, { name: '问责机制', max: 50 }, { name: '系统效能', max: 50 }, { name: '团队效能', max: 50 },
+    // 关系 (5)
+    { name: '技能与专业知识', max: 50 }, { name: '价值观多样性与包容性', max: 50 }, { name: '尊重与信任', max: 50 }, { name: '安全沟通', max: 50 }, { name: '团队精神与凝聚力', max: 50 },
+    // 外部流程及系统与架构 (5)
+    { name: '环境意识', max: 50 }, { name: '利益相关者与客户协同', max: 50 }, { name: '人才与资源获取', max: 50 }, { name: '利益相关者与客户沟通', max: 50 }, { name: '关系中的信任与诚信', max: 50 },
+  ].reverse();
+  
+  const categoryData = [
+        { name: '目的与动机', color: '#823479' },
+      { name: '领导力', color: '#898989' },
+      { name: '学习', color: '#AECDF3' },
+      { name: '内部流程及系统与架构', color: '#FFD64E' },
+      { name: '关系', color: '#193D59' },
+      { name: '外部流程及系统与架构', color: '#009191' },
+  ];
+  const reversedCategoryData = [...categoryData].reverse();
+  
+  const teamData = [
+    {
+      name: '团队A',
+      value: [42, 38, 45, 30, 35, 48, 32, 25, 40, 33, 22, 38, 41, 36, 29, 45, 31, 39, 27, 43, 25, 47, 33, 46, 28, 37, 44, 26, 49, 34].reverse(),
+      lineStyle: { color: '#FDD13A' },
+      itemStyle: { color: '#FDD13A' },
+      areaStyle: { color: 'rgba(255, 255, 255, 0.6)' },
+    },
+    {
+      name: '团队B',
+      value: [35, 45, 33, 42, 28, 30, 41, 46, 29, 38, 48, 27, 39, 43, 31, 36, 47, 25, 40, 32, 44, 26, 49, 34, 37, 22, 41, 30, 45, 38].reverse(),
+      lineStyle: { color: '#01949A' },
+      itemStyle: { color: '#01949A' },
+      areaStyle: { color: 'rgba(255, 255, 255, 0.6)' },
+    },
+  ];
+  
+  // --- 辅助函数 ---
+  const generateBackgroundSeries = () => {
+      const series = [];
+      let current = 0;
+      reversedCategoryData.forEach((cat) => {
+          const data = new Array(indicators.length).fill('-');
+          for (let i = 0; i < 5; i++) {
+              data[current + i] = 50;
+          }
+          series.push({
+              type: 'bar', 
+              coordinateSystem: 'polar', 
+              stack: 'background',
+              silent: true, data: data,
+              barCategoryGap: '0%',
+              itemStyle: {
+                  color: cat.color,
+                  opacity: 0.8,
+                  borderColor: '#FFFFFF',
+                  borderWidth: 0
+              }
+          });
+          current += 5;
+      });
+      return series;
+  };
+  
+  const initChart = () => {
+    if (chartRef.value) {
+      chartInstance = echarts.init(chartRef.value);
+  
+      const radarChartRadius = '60%';
+      const outerRingRadius = ['60%', '75%'];
+      const angleOffset = 360 / (indicators.length * 2);
+  
+      const baseOption = {
+        tooltip: { trigger: 'item' },
+        // legend: { bottom: 20, data: teamData.map(d => d.name) },
+        polar: { center: ['50%', '50%'], radius: radarChartRadius },
+        radar: {
+          indicator: indicators,
+          shape: 'circle',
+          center: ['50%', '50%'],
+          radius: radarChartRadius,
+          startAngle: 90,
+          splitNumber: 5,
+          axisName: { show: false }, // 隐藏默认的 axisName，我们将使用 graphic 自定义
+          splitArea: { show: false },
+          axisLine: { lineStyle: { color: 'rgba(0,0,0,0.1)' } },
+          splitLine: { lineStyle: { color: 'rgba(0,0,0,0.1)' } },
+        },
+        angleAxis: {
+          type: 'category',
+          data: indicators.map(i => i.name),
+          boundaryGap: false,
+          axisTick: { show: false }, axisLabel: { show: false }, axisLine: { show: false },
+        },
+        radiusAxis: {
+          min: 0, max: 50, interval: 10,
+          axisLine: { show: false }, axisTick: { show: false }, axisLabel: { show: false },
+          splitLine: { lineStyle: { color: 'rgba(0,0,0,0.1)' } },
+        },
+        // **优化3: 使用 graphic 组件在中心添加带阴影的白色圆形**
+        graphic: {
+            elements: [
+                {
+                    type: 'group',
+                    left: 'center',
+                    top: 'center',
+                    children: [
+                        {
+                            type: 'circle',
+                            shape: { r: 30 }, // 圆形按钮的半径
+                            style: {
+                                fill: '#FFFFFF',
+                                shadowBlur: 20,
+                                shadowColor: 'rgba(0, 0, 0, 0.25)',
+                                shadowOffsetX: 0,
+                                shadowOffsetY: 4
+                            },
+                            z: 20
+                        }
+                    ]
+                }
+            ]
+        },
+        series: [
+          {
+            name: '外部环', type: 'pie', 
+            radius: outerRingRadius, center: ['50%', '50%'],
+            silent: true,
+            startAngle: 90 + angleOffset,
+            data: reversedCategoryData.map((item, index) => {
+              const total = reversedCategoryData.length;
+              const anglePerItem = 360 / total;
+              const centerAngle = -anglePerItem * index - anglePerItem / 2;
+              let rotation = centerAngle+5;
+              if (centerAngle < -90 && centerAngle > -270) {
+                rotation += 180;
+              }
+              return {
+                value: 1, name: item.name, itemStyle: { color: item.color },
+                label: { rotate: rotation }
+              };
+            }),
+            label: {
+              show: true, position: 'inside', formatter: '{b}',
+              color: '#FFFFFF', fontSize: 13, fontWeight: 'bold',
+            },
+            labelLine: { show: false },
+            itemStyle: { borderWidth: 0 },
+            z: 5,
+          },
+          { name: '能力评估', type: 'radar', data: teamData, symbol: 'circle', symbolSize: 8, z: 10 },
+          ...generateBackgroundSeries()
+        ],
+      };
+  
+      chartInstance.setOption(baseOption);
+  
+      // **优化1: 重写指标文字的旋转和对齐逻辑，确保文字始终正向易读**
+      const graphicLabels = indicators.map((indicator, index) => {
+          // 将文字放在半径为47的位置，比雷达图最大值50略小，比数据区大
+          const point = chartInstance.convertToPixel({ polarIndex: 0 }, [22, index]);
+          const x = point[0];
+          const y = point[1];
+  
+          const total = indicators.length;
+          const angleStep = 360 / total;
+          // 计算当前指标的角度, 90度为顶部, 顺时针递减
+          const angleInDegrees = 90 - (index * angleStep);
+  
+          let rotationAngle = angleInDegrees;
+          let textAlign = 'left';
+          
+          // 判断指标在圆的左半部分还是右半部分
+          // 左半部分: 角度 > 90 或 < -90
+          if (angleInDegrees <= -90 || angleInDegrees >= 90) {
+              // 左侧文字，旋转180度使其正向，并设置为右对齐
+              rotationAngle = angleInDegrees + 180;
+              textAlign = 'right';
+          } else if (angleInDegrees === 90 || angleInDegrees === -90) {
+              // 顶部或底部文字，居中对齐
+              textAlign = 'center';
+          }
+          // 右侧文字，保持默认左对齐即可
+  
+          // ECharts 的 rotation 是弧度制，需要转换
+          const rotationInRadians = rotationAngle * (Math.PI / 180);
+  
+          return {
+              type: 'text',
+              style: {
+                  text: indicator.name,
+                  font: '8px "Microsoft YaHei"',
+                  fill: '#333',
+                  align: textAlign, // 根据位置动态设置对齐方式
+                  verticalAlign: 'middle',
+              },
+              x: x, y: y,
+              rotation: rotationInRadians, // 应用计算好的旋转角度
+              z: 15
+          };
+      });
+  
+      // 将计算好的文字元素添加到图表中
+      chartInstance.setOption({
+          graphic: {
+              elements: [
+                  ...baseOption.graphic.elements, // 保留中心的圆形按钮
+                  ...graphicLabels // 添加指标文字
+              ]
+          }
+      });
+    }
+  };
+  
+  const resizeChart = () => {
+    // dispose后重建，确保graphic元素能重新计算位置
+    chartInstance?.dispose();
+    initChart();
+  };
+  
+  onMounted(() => {
+    // 使用 Promise.resolve().then() 确保 DOM 已完全渲染
+    Promise.resolve().then(() => {
+      initChart();
+      window.addEventListener('resize', resizeChart);
+    });
+  });
+  
+  onUnmounted(() => {
+    chartInstance?.dispose();
+    window.removeEventListener('resize', resizeChart);
+  });
+  </script>

src/components/reportPdf/pdf-修改之前版.scss

@@ -0,0 +1,784 @@
+.cd_box{
+    padding: 20px 0 30px;
+    box-sizing: border-box;
+    position: relative;
+    border-top: 1px solid rgba(0,0,0,.4);
+    height: 890px;
+    color: #111111;
+    .cb_db{
+        .cb_db_l{
+            font-family: STSongti-SC, STSongti-SC;
+            font-weight: 400;
+            font-size: 10px;
+            color: #FFFFFF;
+            line-height: 16px;
+            padding-left: 32px;
+            &.cdl{
+                color: #111111;
+                padding-left: 0;
+            }
+        }
+    }
+
+    .cd_page{
+        width: 100%;
+        font-family: STSongti-SC, STSongti-SC;
+        font-weight: 400;
+        font-size: 10px;
+        color: #111111;
+        line-height: 16px;
+        text-align: center;
+        position: absolute;
+        bottom: 20px;
+    }
+
+    p{
+        font-family: STSongti-SC, STSongti-SC;
+        font-weight: 400;
+        font-size: 10px;
+        color: #252525;
+        line-height: 14px;
+        margin-top: 20px;
+        &.p2{
+            font-size: 12px;
+            line-height: 16px;
+        }
+        &.p3{
+            font-size: 12px;
+            line-height: 16px;
+            color: #761E6A;
+        }
+    }
+
+    .bp{
+        font-family: PingFangSC, PingFang SC;
+        font-weight: 600;
+        font-size: 20px;
+        color: #111111;
+        line-height: 24px;
+    }
+
+    .big_title{
+        font-family: STSongti-SC, STSongti-SC;
+        font-weight: 400;
+        font-size: 32px;
+        color: #761E6A;
+        line-height: 45px;
+        margin-top: 20px;
+    }
+
+    &.fm{
+        background: url('@/assets/images/agent/pdf_fmbg.png') no-repeat;
+        background-size: 100% 100%;
+    }
+
+    .fm_img{
+        width: 166px;
+        height: 48px;
+        margin: 48px 0 0 62px
+    }
+    .fm_title{
+        margin: 74px 0 0 72px;
+        .pt_p{
+            font-size: 64px;
+            font-weight: bold;
+            color: #00B7ED;
+            line-height: 90px;
+        }
+        .pt_name{
+            font-size: 64px;
+            font-weight: bold;
+            color: #FFFFFF;
+            line-height: 90px;
+        }
+        .pt_tip{
+            font-family: PingFangSC, PingFang SC;
+            font-weight: 400;
+            font-size: 16px;
+            color: #FFFFFF;
+            line-height: 22px;
+            margin-top: 9px;
+        }
+    }
+    .fm_pre{
+        padding-left:72px;
+        margin-top: 14px;
+        font-size: 16px;
+        color: #FFFFFF;
+        .fmp_l{
+            width: 104px;
+        }
+    }
+
+    .cb_content{
+        padding: 28px 32px 0;
+        &.jxpjmddj{
+            padding: 28px 0 0;
+        }
+    }
+
+    &.js{
+        .js_boxs{
+            margin-top: 26px;
+            display: flex;
+            justify-content: space-between;
+            .jb_pre{
+                width: calc(20% - 10px);
+                height: 302px;
+                border-radius: 0px 18px 0px 18px;
+                border: 2px solid #761E6A;
+                padding-left: 10px;
+                box-sizing: border-box;
+                position: relative;
+                .jbp_zm{
+                    width: 32px;
+                    height: 32px;
+                    background: #761E6A;
+                    font-family: PingFang-SC, PingFang-SC;
+                    font-weight: bold;
+                    font-size: 22px;
+                    color: #FFFFFF;
+                    line-height: 32px;
+                    text-align: center;
+                    position: absolute;
+                    left: 0;
+                    right: 0;
+                }
+                img{
+                    width: 48px;
+                    height: 48px;
+                    margin: 35px 32px 0 15px;
+                }
+                .jbp_title{
+                    width: 100%;
+                    height: 30px;
+                    padding: 0 20px 7px 0;
+                    border-bottom: 2px solid #761E6A;
+                    box-sizing: border-box;
+                    font-family: STSongti-SC, STSongti-SC;
+                    font-weight: bold;
+                    font-size: 9px;
+                    color: #111111;
+                    line-height: 16px;
+                    margin-top: 10px;
+                }
+                p{
+                    font-family: STSongti-SC, STSongti-SC;
+                    font-weight: 400;
+                    font-size: 9px;
+                    color: #111111;
+                    line-height: 14px;
+                    padding: 7px 0 0 0;
+                    &:last-child{
+                        margin-top: 14px;
+                    }
+                }
+                &.jp1{
+                    border: 2px solid #9374B5;
+                    .jbp_zm{
+                        background: #9374B5;
+                    }
+                    .jbp_title{
+                        border-bottom: 2px solid #9374B5;
+                    }
+                }
+                &.jp2{
+                    border: 2px solid #8C95DC;
+                    .jbp_zm{
+                        background: #8C95DC;
+                    }
+                    .jbp_title{
+                        border-bottom: 2px solid #8C95DC;
+                    }
+                }
+                &.jp3{
+                    border: 2px solid #5D7EE5;
+                    .jbp_zm{
+                        background: #5D7EE5;
+                    }
+                    .jbp_title{
+                        border-bottom: 2px solid #5D7EE5;
+                    }
+                }
+                &.jp4{
+                    border: 2px solid #61B7C8;
+                    .jbp_zm{
+                        background: #61B7C8;
+                    }
+                    .jbp_title{
+                        border-bottom: 2px solid #61B7C8;
+                    }
+                }
+                &.jp5{
+                    border: 2px solid #B6C38D;
+                    .jbp_zm{
+                        background: #B6C38D;
+                    }
+                    .jbp_title{
+                        border-bottom: 2px solid #B6C38D;
+                    }
+                }
+            }
+        }
+        .js_single_box{
+            margin-top: 20px;
+            width: 100%;
+            height: 112px;
+            border-radius: 0px 18px 0px 18px;
+            border: 2px solid #484EAE;
+            padding-bottom: 10px;
+            position: relative;
+            .jsb_zm{
+                width: 32px;
+                height: 32px;
+                background: #484EAE;
+                font-family: PingFang-SC, PingFang-SC;
+                font-weight: bold;
+                font-size: 22px;
+                color: #FFFFFF;
+                line-height: 32px;
+                text-align: center;
+                position: absolute;
+                left: 0;
+                right: 0;
+            }
+            .jsb_l{
+                width: 111px;
+                img{
+                    width: 48px;
+                    height: 48px;
+                    margin-top: 30px;
+                }
+                p{
+                    font-family: STSongti-SC, STSongti-SC;
+                    font-weight: 400;
+                    font-size: 10px;
+                    color: #111111;
+                    line-height: 16px;
+                    margin-top: 9px;
+                }
+            }
+            .jsb_r{
+                border-left: 2px solid #484EAE;
+                padding: 10px 22px;
+                flex: 1;
+                font-family: STSongti-SC, STSongti-SC;
+                font-weight: 400;
+                font-size: 10px;
+                color: #111111;
+                line-height: 16px;
+            }
+
+        }
+    }
+
+
+    .mddj_title{
+        img{
+            width: 65px;
+            height: 45px;
+        }
+        span{
+            font-family: PingFang-SC, PingFang-SC;
+            font-weight: 800;
+            font-size: 32px;
+            color: #761E6A;
+            line-height: 32px;
+            margin-left: 8px;
+        }
+    }
+    .mddj_tip{
+        font-size: 12px;
+        margin-top: 30px;
+    }
+    .mddj_top{
+        justify-content: space-between;
+        margin-top: 42px;
+        .tt_pre{
+            width: calc(100% / 3 - 5px);
+            .ttp_l{
+                width: 27px;
+                height: 48px;
+                &.tl1{
+                    background: #EBA1A7;
+                }
+                &.tl2{
+                    background: #FBD999;
+                }
+                &.tl3{
+                    background: #D7E5A5;
+                }
+            }
+            .ttp_r{
+                width: calc(100% - 27px);
+                font-family: PingFangSC, PingFang SC;
+                font-weight: 400;
+                font-size: 10px;
+                color: #252525;
+                line-height: 14px;
+                padding-left: 4px;
+                box-sizing: border-box;
+            }
+        }
+    }
+    .mddj_table{
+        margin-top: 33px;
+        .mt_l{
+            flex: 1;
+            box-sizing: border-box;
+        }
+        .mt_r{
+            .mr_pre{
+                font-size: 10px;
+                color: #FFFFFF;
+                width: 27px;
+                padding: 0 4px;
+                box-sizing: border-box;
+                height: 100px;
+                display: flex;
+                flex-direction: column;
+                justify-content: center;
+                align-items: center;
+            }
+        }
+        .mt_top{
+            background: #761E6A;
+            .mt_l{
+                font-family: PingFangSC, PingFang SC;
+                font-weight: 400;
+                font-size: 20px;
+                color: #FFFFFF;
+                line-height: 20px;
+                padding-left: 14px;
+            }
+        }
+        .mt_list{
+            border: 3px solid #761E6A;
+            .ml_pre{
+                border-bottom: 1px solid #E5E7EB;
+                &:last-child{
+                    border: none;
+                }
+                &:nth-child(odd){
+                    background: #DCECFD;
+                }
+                &:nth-child(even){
+                    background: #FFFFFF;
+                }
+
+                .mt_l{
+                    padding: 10px 12px;
+                    font-family: PingFangSC, PingFang SC;
+                    font-weight: 400;
+                    font-size: 10px;
+                    color: #252525;
+                    line-height: 16px;
+                    box-sizing: border-box;
+                }
+
+                .mp_pre{
+                    width: 27px;
+                    height: 100%;
+                    font-family: PingFangSC, PingFang SC;
+                    font-weight: 400;
+                    font-size: 10px;
+                    color: #1D2129;
+                    line-height: 13px;
+                    display: flex;
+                    flex-direction: column;
+                    align-items: center;
+                    justify-content: center;
+                    &.mp1{
+                        background: #EBA1A7;
+                    }
+                    &.mp2{
+                        background: #FBD999;
+                    }
+                    &.mp3{
+                        background: #D7E5A5; 
+                    }
+                }
+            }
+        }
+    }
+
+    .pjgx_title{
+        font-size: 32px;
+        color: #F09216;
+        margin-top: 20px;
+    }
+
+    .mddj_boxs{
+        margin-top: 10px;
+        .mb_item{
+            padding: 20px 0;
+            border-bottom: 1px dotted #833478;
+
+            .mbi_title{
+                background: rgba(131,52,120,0.12);
+                font-family: PingFang-SC, PingFang-SC;
+                font-weight: bold;
+                font-size: 10px;
+                color: #761E6A;
+                line-height: 14px;
+                padding: 5px;
+                display: inline;
+            }
+            .mbi_text{
+                font-family: PingFangSC, PingFang SC;
+                font-weight: 400;
+                font-size: 10px;
+                color: #111111;
+                line-height: 14px;
+                margin-top: 10px;
+            }
+        }
+    }
+
+    .cyfx_boxs{
+        margin-top: 25px;
+        display: flex;
+        .cyfxb_box{
+            width: calc(100% / 4 - 1px);
+            border-left: 1px dotted #C1C7D2;
+            padding: 0 5px;
+            box-sizing: border-box;
+            .cbb_top{
+                padding: 9px 0;
+                border-bottom: 1px dotted #C1C7D2;
+                font-family: PingFangSC, PingFang SC;
+                font-weight: 600;
+                font-size: 20px;
+                color: #93C000;
+                line-height: 24px;
+                text-align: right;
+                &.red{
+                    color: #F31616;
+                }
+            }
+            .cbb_bottom{
+                .cbbb_item{
+                    width: 100%;
+                    display: flex;
+                    align-items: center;
+                    justify-content: space-between;
+                    margin-top: 10px;
+                    min-height: 64px;
+                    .ci_l{
+                        width: calc(100% - 42px);
+                        font-family: PingFangSC, PingFang SC;
+                        font-weight: 400;
+                        font-size: 10px;
+                        color: #252525;
+                        line-height: 16px;
+                        padding-right: 10px;
+                        box-sizing: border-box;
+                    }
+                    .ci_r{
+                        width: 42px;
+                        height: 42px;
+                        .circle {
+                            position: relative;
+                            width: 39px;
+                            height: 39px;
+                            border-radius: 50%;
+                            border: 3px solid #E5E5E5;
+                            background-color: transparent;
+                        }
+                
+                        .semi-circle {
+                            position: absolute;
+                            top: -3px;
+                            right: -3px;
+                            width: 39px;
+                            height: 39px;
+                            border-radius: 100%;
+                            background: conic-gradient(
+                                #93C000 0deg,                          /* 起始点 */
+                                #93C000 calc(var(--percentage, 0) * 3.6deg), /* 切割范围 */
+                                transparent calc(var(--percentage, 0) * 3.6deg), /* 切割的部分，使用透明 */
+                                transparent 360deg                 /* 圆的结束 */
+                            );
+                            z-index: 2;
+                            &.red{
+                                background: conic-gradient(
+                                    #F31616 0deg,                          /* 起始点 */
+                                    #F31616 calc(var(--percentage, 0) * 3.6deg), /* 切割范围 */
+                                    transparent calc(var(--percentage, 0) * 3.6deg), /* 切割的部分，使用透明 */
+                                    transparent 360deg                 /* 圆的结束 */
+                                );
+                            }
+                        }
+                
+                        .number {
+                            position: absolute;
+                            width: 100%;
+                            height: 100%;
+                            left: 0;
+                            top: 0;
+                            background: #FFFFFF;
+                            font-family: PingFang-SC, PingFang-SC;
+                            font-weight: 800;
+                            font-size: 18px;
+                            color: #93C000;
+                            z-index: 3;
+                            display: flex;
+                            flex-direction: column;
+                            align-items: center;
+                            justify-content: center;
+                            border-radius: 50%;
+                            &.red{
+                                color: #F31616;
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
+    
+    .jxpjmddj_box{
+        border-radius: 0px 6px 0px 6px;
+        border: 1px solid #E5E7EB;
+        margin-top: 20px;
+        padding: 8px;
+        .jb_title{
+            font-family: PingFangSC, PingFang SC;
+            font-weight: 400;
+            font-size: 12px;
+            color: #252525;
+            line-height: 16px;
+        }
+        .jb_title2{
+            margin-top: 12px;
+            font-family: PingFangSC, PingFang SC;
+            font-weight: 400;
+            font-size: 20px;
+            color: #761E6A;
+            line-height: 16px;
+        }
+        .jb_text{
+            font-family: PingFangSC, PingFang SC;
+            font-weight: 400;
+            font-size: 10px;
+            color: #252525;
+            line-height: 16px;
+            margin-top: 10px;
+        }
+    }
+
+    .xxfx_title{
+        margin-top: 40px;
+        .xt_pre{
+            width: 58px;
+            font-family: PingFang-SC, PingFang-SC;
+            font-weight: bold;
+            font-size: 16px;
+            color: #666666;
+            line-height: 16px;
+            text-align: center;
+        }
+    }
+    .xxfx_list{
+        .xl_item{
+            margin-top: 20px;
+            .xli_l{
+                width: 177px;
+                .xl_pre{
+                    width: 58px;
+                    font-family: PangMenZhengDaoBiaoTiTiMianFeiBan, PangMenZhengDaoBiaoTiTiMianFeiBan;
+                    font-weight: normal;
+                    font-size: 20px;
+                    color: #666666;
+                    line-height: 16px;
+                    text-align: center;
+                    &.red{
+                        color: #833478;
+                    }
+                }
+            }
+            .xli_r{
+                width: calc(100% - 177px);
+                .xr_p{
+                    font-family: PingFangSC, PingFang SC;
+                    font-weight: 400;
+                    font-size: 10px;
+                    color: #252525;
+                    line-height: 10px;
+                }
+                .xr_tb{
+                    width: 100%;
+                    height: 4px;
+                    margin-top: 26px;
+                    position: relative;
+                    .xt_pre{
+                        width: calc(100% / 3);
+                        height: 100%;
+                        &.p1{
+                            background: #761E6A;
+                        }
+                        &.p2{
+                            background: rgba(118,30,106,0.6);;
+                        }
+                        &.p3{
+                            background: #00AAA8;
+                        }
+                    }
+                    .xt_score{
+                        position: absolute;
+                        left: 14px;
+                        top: -20px;
+                        .xts_num{
+                            background: #FFFFFF;
+                            box-shadow: 0px 4px 10px 0px rgba(118,30,106,0.08);
+                            border-radius: 8px;
+                            border: 1px solid rgba(131,52,120,0.19);
+                            font-family: PangMenZhengDao, PangMenZhengDao;
+                            font-weight: normal;
+                            font-size: 12px;
+                            line-height: 16px;
+                            padding: 10px 8px;
+                            white-space: nowrap;
+                            &.red{
+                                color: #761E6A;
+                            }
+                            &.green{
+                                color: #00AAA8;
+                            }
+                        }
+                        .xts_box{
+                            flex: 1;
+                            height: 13px;
+                            background: #8F2E7C;
+                        }
+                    }
+                }
+            }
+        }
+    }
+
+    .next_box{
+        margin-top: 10px;
+        background: rgba(118,30,106,0.05);
+        border-radius: 0px 6px 0px 6px;
+        padding: 8px 8px;
+        .nb_title{
+            font-family: PingFang-SC, PingFang-SC;
+            font-weight: bold;
+            font-size: 12px;
+            color: #761E6A;
+            line-height: 16px;
+        }
+        .nb_p{
+            font-family: PingFangSC, PingFang SC;
+            font-weight: 400;
+            font-size: 10px;
+            color: #111111;
+            line-height: 16px;
+            margin-top: 6px;
+        }
+        .nb_sj{
+            font-family: PingFangSC, PingFang SC;
+            font-weight: 400;
+            font-size: 10px;
+            color: #252525;
+            line-height: 20px;
+            padding-left: 18px;
+        }
+    }
+    .next_tip{
+        font-family: PingFang-SC, PingFang-SC;
+        font-weight: bold;
+        font-size: 10px;
+        color: #761E6A;
+        line-height: 16px;
+        margin-top: 9px;
+        text-align: center;
+    }
+
+    .team_title{
+        margin-top: 20px;
+        font-size: 20px;
+        font-weight: bold;
+        line-height: 24px;
+        color: #111111;
+    }
+    .team_p{
+        font-size: 10px;
+        line-height: 16px;
+        color: #111111;
+        margin-top: 6px;
+    }
+
+    .cc_table{
+        margin-top: 11px;
+        table{
+            width: 100%;
+            border-collapse: separate;
+            border-spacing: 1px;
+            background-color: #EFEFEF;
+            tr{
+                td{
+                    font-family: PingFangSC, PingFang SC;
+                    font-weight: 400;
+                    font-size: 10px;
+                    color: #111111;
+                    line-height: 16px;
+                    min-height: 28px;
+                    background: #FFFFFF;
+                    padding: 5px 5px;
+                    &.red{
+                        background: #761E6A;
+                        color: #FFFFFF;
+                    }
+                    &.pink{
+                        width: 58px;
+                        background: #DCBAD4;
+                    }
+                    &.yellow{
+                        background: #FFD750;
+                    }
+                    &.th{
+                        text-align: center;
+                    }
+                    &.title{
+                        width: 27px;
+                        text-align: center;
+                    }
+                }
+            }
+        }
+    }
+
+    .team_table{
+        margin-top: 10px;
+        table{
+            width: 100%;
+            border-collapse: separate;
+            border-spacing: 1px;
+            background-color: #EFEFEF;
+            tr{
+                td{
+                    font-family: PingFangSC, PingFang SC;
+                    font-weight: 400;
+                    font-size: 10px;
+                    color: #252525;
+                    line-height: 16px;
+                    padding: 6px 10px;
+                    background: #FFFFFF;
+                    &.mw{
+                        width: 50px;
+                        padding: 5px;
+                    }
+                    &.tc{
+                        height: 140px;
+                    }
+                }
+                &.th td{
+                    background: #761E6A;
+                    color: #FFFFFF;
+                }
+            }
+        }
+    }
+}

src/components/reportPdf/pdf-修改之前版.vue

@@ -0,0 +1,916 @@
+<template>
+    <div>
+        <div class="cb_box">
+            <ComplexRadarChart />
+        </div>
+        <!-- 封面 -->
+        <div class="cd_box fm" style="border: none;margin-top: 20px;height: 868px;">
+            <div class="cb_db adf">
+                <div class="cb_db_l">{{ datetime }}</div>
+            </div>
+            <img class="fm_img" src="@/assets/images/agent/logo4.png">
+            <div class="fm_title">
+                <div class="pt_p" style="font-size: 60px;">PERILL</div>
+                <div class="pt_name" style="font-size: 50px;">团队诊断报告-教练版</div>
+                <div class="pt_tip">{{ reportData?.cover?.title }}</div>
+            </div>
+            <div class="fm_pre adfac" style="margin-top: 165px;">
+                <div class="fmp_l">报告撰写人:</div>
+                <!-- <div class="fmp_r">{{ reportData?.cover?.realName }}</div> -->
+                <div class="fmp_r">创衡AI教练助手</div>
+            </div>
+            <div class="fm_pre adfac">
+                <div class="fmp_l">项目名称:</div>
+                <div class="fmp_r">{{ reportData?.cover?.programName }}</div>
+            </div>
+            <div class="fm_pre adfac">
+                <div class="fmp_l">客户名称:</div>
+                <div class="fmp_r">{{ reportData?.cover?.enterpriseName }}</div>
+            </div>
+            <div class="fm_pre adfac">
+                <div class="fmp_l">团队名称:</div>
+                <div class="fmp_r">{{ reportData?.cover?.teamName }}</div>
+            </div>
+            <div class="fm_pre adfac">
+                <div class="fmp_l">成员人数:</div>
+                <div class="fmp_r">{{ reportData?.cover?.userNum }}</div>
+            </div>
+            <div class="fm_pre adfac">
+                <div class="fmp_l">报告时间:</div>
+                <div class="fmp_r">{{ reportData?.cover?.genDate }}</div>
+            </div>
+            <div class="cd_page" style="color: #FFFFFF;">1/{{ pageNum }}</div>
+        </div>
+        <!-- 介绍 -->
+        <div class="cd_box js" style="border: none;">
+            <div class="cb_db adf">
+                <div class="cb_db_l cdl">{{ datetime }}</div>
+            </div>
+            <div class="cb_content">
+                <div class="mddj_title adfac">
+                    <img src="@/assets/images/agent/pdf_title.png">
+                    <span>介绍</span>
+                </div>
+                <p>PERILL模型由发展辅导领域的先驱、全球顶尖教练以及管理思维与团队绩效领域的权威David Clutterbuck教授研发。该模型运用复杂、适应性思维，通过 PERILL 六大支柱对团队进行分析。这六大支柱概括了相互作用、推动或阻碍团队绩效的六大关键影响因素。</p>
+                <p>以下报告提取了参与 PERILL 诊断问卷的团队成员提供的评分，并将其应用于 PERILL 模型。报告旨在总结团队的高绩效领域与潜在功能失调领域，以助力提升团队整体绩效。</p>
+                <p>这份 PERILL 报告的结果可帮助企业与团队更好地了解自身优势、存在的问题、差距或需要克服的潜在挑战，从而提升团队绩效、声誉与协作能力。</p>
+                <div class="big_title">PERILL的六大支柱</div>
+                <p>PERILL 诊断提供了一个复杂的团队系统概览，它并非针对孤立的问题，也不是简单的优缺点，而是着眼于团队系统的复杂性。它通过 6 个影响因素（如下所述）提出问题，以揭示团队系统各要素之间的联系，以及这些联系如何影响团队的高效运作能力。</p>
+                <div class="js_boxs">
+                    <div class="jb_pre jp1">
+                        <div class="jbp_zm">P</div>
+                        <img src="@/assets/images/agent/pdf_img_p.png">
+                        <div class="jbp_title" style="line-height: 30px;">目的与动机</div>
+                        <p style="margin-top: 0;">是否存在一个明确的存在理由和清晰的方向，能够激发团队成员的动力并抓住他们的想象力？</p>
+                        <p>个人身份和集体身份是否围绕共同目标达成一致？</p>
+                    </div>
+                    <div class="jb_pre jp2">
+                        <div class="jbp_zm">E</div>
+                        <img src="@/assets/images/agent/pdf_img_e.png">
+                        <div class="jbp_title" style="line-height: 12px;">外部流程及系统与架构</div>
+                        <p style="margin-top: 0;">团队如何与其各类利益相关者互动？</p>
+                        <p>团队如何理解这些利益相关者以及利益相关者如何理解团队？此外，团队又该如何管理相互冲突的期望、获取资源等？</p>
+                    </div>
+                    <div class="jb_pre jp3">
+                        <div class="jbp_zm">R</div>
+                        <img src="@/assets/images/agent/pdf_img_r.png">
+                        <div class="jbp_title" style="line-height: 30px;">关系</div>
+                        <p style="margin-top: 0;">团队成员之间是否相互信任和尊重？</p>
+                        <p>团队成员之间是否相互信任和尊重？</p>
+                        <p>团队成员之间的关系是否有助于实现真正紧密的协作？</p>
+                    </div>
+                    <div class="jb_pre jp4">
+                        <div class="jbp_zm">I</div>
+                        <img src="@/assets/images/agent/pdf_img_i.png">
+                        <div class="jbp_title" style="line-height: 12px;">内部流程及系统与架构</div>
+                        <p style="margin-top: 0;">团队在平衡责任与自主权方面是如何实现功能性协作的？</p>
+                        <p>它的敏捷性如何，沟通方式怎样，决策流程的运作效果有多好？</p>
+                    </div>
+                    <div class="jb_pre jp5">
+                        <div class="jbp_zm">L</div>
+                        <img src="@/assets/images/agent/pdf_img_l.png">
+                        <div class="jbp_title" style="line-height: 30px;">学习</div>
+                        <p style="margin-top: 0;">团队如何提高绩效，提高技能和资源，以应对当前和未来的任务？</p>
+                        <p>它如何管理能力和提高效率？</p>
+                    </div>
+                </div>
+                <div class="js_single_box adf">
+                    <div class="jsb_zm">L</div>
+                    <div class="jsb_l adffcacjc">
+                        <img src="@/assets/images/agent/pdf_img_l.png">
+                        <p>领导力</p>
+                    </div>
+                    <div class="jsb_r adffcacjc">
+                        领导力的特质与行为如何对团队运作及其他因素产生调节影响，且这种影响是正向还是负向的？
+                    </div>
+                </div>
+            </div>
+            <div class="cd_page">2/{{ pageNum }}</div>
+        </div>
+        <!-- 总体诊断分析 -->
+        <div class="cd_box">
+            <div class="cb_db adf">
+                <div class="cb_db_l cdl">{{ datetime }}</div>
+            </div>
+            <div class="cb_content">
+                <div class="mddj_title adfac">
+                    <img src="@/assets/images/agent/pdf_title.png">
+                    <span>总体诊断分析</span>
+                </div>
+                <p class="p2" style="margin-top: 43px;">{{ reportData?.overall?.diagResult }}</p>
+                <div class="pdfEchart" id="zttdznRef" ref="zttdznRef" style="width: 100%; height: 350px;margin-top: 20px;"></div>
+                <div class="bp" style="margin-top: 40px;">诊断结果</div>
+                <p style="margin-top: 10px;">{{ reportData?.overall?.overall_analysis }}</p>
+            </div>
+            <div class="cd_page">3/{{ pageNum }}</div>
+        </div>
+        <!-- 多维度 -->
+        <template v-if="reportData?.dimensionAnalysis?.length">
+            <div v-for="(rd,ridx) in reportData.dimensionAnalysis" :key="ridx">
+                <!-- 第四页 目的与动机 -->
+                <div class="cd_box">
+                    <div class="cb_db adf">
+                        <div class="cb_db_l cdl">{{ datetime }}</div>
+                    </div>
+                    <div class="cb_content">
+                        <div class="mddj_title adfac">
+                            <img src="@/assets/images/agent/pdf_title.png">
+                            <span>{{ rd?.performanceRatings?.title }}</span>
+                        </div>
+                        <p class="p2" style="margin-top: 43px;">在目标与动机支柱中，我们旨在探究是否存在一个清晰的存在理由和明确的方向，能够激发团队成员的动力并吸引他们的想象力，以及个人与集体的身份认同是否围绕共同目标达成一致。</p>
+                        <p class="p3" style="margin-top: 42px;">为了帮助我们理解这一点，我们将从 5 个关键主题的角度审视团队的运作情况，具体如下：</p>
+                        <div class="mddj_boxs" v-if="rd?.performanceRatings?.title=='目的和动机'">
+                            <div class="mb_item" style="border-top: 1px dotted #833478;">
+                                <div class="mbi_title">一致性：</div>
+                                <div class="mbi_text">存在共同的目标和使命意识。个人目标与集体目标之间具有凝聚力。团队成员共享价值观，且集体议程优先于个人议程。</div>
+                            </div>
+                            <div class="mb_item">
+                                <div class="mbi_title">清晰度：</div>
+                                <div class="mbi_text">团队对个人及集体的角色和职责有高度清晰的认知。他们清楚地理解自身未来的方向、目标和使命。</div>
+                            </div>
+                            <div class="mb_item">
+                                <div class="mbi_title">热情与贡献：</div>
+                                <div class="mbi_text">团队对自身的工作目的有强烈的认同感，并展现出高昂的热情，以应对既定的挑战和目标。他们认为自己的工作富有意义，并感觉正在为世界贡献特殊的价值。</div>
+                            </div>
+                            <div class="mb_item">
+                                <div class="mbi_title">愉悦感：</div>
+                                <div class="mbi_text">团队从工作角色中获得快乐和 / 或满足感，欣赏并与团队中的同事保持联结。</div>
+                            </div>
+                            <div class="mb_item">
+                                <div class="mbi_title">支持与协作：</div>
+                                <div class="mbi_text">团队成员拥有团结感和高度的同志情谊。他们对团队目标有着共同的承诺，并愿意相互支持以实现这些目标。</div>
+                            </div>
+                        </div>
+                        <div class="mddj_boxs" v-else-if="rd?.performanceRatings?.title=='外部流程及系统与架构'">
+                            <div class="mb_item" style="border-top: 1px dotted #833478;">
+                                <div class="mbi_title">环境意识：</div>
+                                <div class="mbi_text">该团队拥有环境扫描和竞争对手监控的流程，并对相关情况有强烈的意识。在更广泛的环境中正在发生的事情。他们对更广泛市场背景下的宏观和微观趋势有所了解，这有助于团队做出明智、合理且富有成效的商业决策。</div>
+                            </div>
+                            <div class="mb_item">
+                                <div class="mbi_title">利益相关者与客户协同：</div>
+                                <div class="mbi_text">该团队拥有良好的系统，使他们能够与客户保持良好且定期的互动利益相关者，并确保他们的优先事项、目标和价值观保持一致。</div>
+                            </div>
+                            <div class="mb_item">
+                                <div class="mbi_title">人才与资源获取：</div>
+                                <div class="mbi_text">团队在需要时能够获取额外或替代的人才和资源，并且他们了解这一流程他们需要遵循这些规则才能获得成功。这有助于团队实现平稳高效的运营。</div>
+                            </div>
+                            <div class="mb_item">
+                                <div class="mbi_title">利益相关者与客户沟通：</div>
+                                <div class="mbi_text">该团队建立了强大的系统，以便随时向利益相关者和客户通报其工作进展，以及为什么。他们愿意倾听并从利益相关者和客户那里学习，以支持他们实现目标目标并提升绩效。</div>
+                            </div>
+                            <div class="mb_item">
+                                <div class="mbi_title">关系中的信任与诚信：</div>
+                                <div class="mbi_text">利益相关者对团队及其能力充满信心，团队也因其行事方式而受到尊重他们自己的行为。</div>
+                            </div>
+                        </div>
+                        <div class="mddj_boxs" v-else-if="rd?.performanceRatings?.title=='关系'">
+                            <div class="mb_item" style="border-top: 1px dotted #833478;">
+                                <div class="mbi_title">技能和专业知识：</div>
+                                <div class="mbi_text">团队具备恰当的技能与专业能力平衡，以实现团队目标。成员彼此信任，认为各自具备互补的优势与劣势，能支持目标达成。<br/>尊重与信任团队成员无论在私下还是公开场合都高度尊重彼此。他们信任对方会言行一致，并相互欣赏。</div>
+                            </div>
+                            <div class="mb_item">
+                                <div class="mbi_title">情谊与凝聚力</div>
+                                <div class="mbi_text">团队成员彼此关怀，情谊深厚。任何冲突或挑战都具有建设性，成员期望彼此获得成功。</div>
+                            </div>
+                            <div class="mb_item">
+                                <div class="mbi_title">人才与资源获取：</div>
+                                <div class="mbi_text">团队在需要时能够获取额外或替代的人才和资源，并且他们了解这一流程他们需要遵循这些规则才能获得成功。这有助于团队实现平稳高效的运营。</div>
+                            </div>
+                            <div class="mb_item">
+                                <div class="mbi_title">安全沟通环境：</div>
+                                <div class="mbi_text">团队内部具备高度的心理安全感。成员之间能坦诚相待、善于倾听，敢于暴露自身脆弱之处并承认错误。</div>
+                            </div>
+                            <div class="mb_item">
+                                <div class="mbi_title">重视多样性与包容性：</div>
+                                <div class="mbi_text">团队高度重视多样性与包容性。所有成员都认为自己的声音被倾听与尊重，可自由提问与质疑，并在适当情况下欣然认同彼此的技能、价值观与经验。</div>
+                            </div>
+                        </div>
+                        <div class="mddj_boxs" v-else-if="rd?.performanceRatings?.title=='内部流程及系统与架构'">
+                            <div class="mb_item" style="border-top: 1px dotted #833478;">
+                                <div class="mbi_title">合理资源配置：</div>
+                                <div class="mbi_text">团队拥有实现目标所需的合理资源配置，具备恰当的能力与知识平衡，并能在必要时补充额外技能。<br/>尊重与信任团队成员无论在私下还是公开场合都高度尊重彼此。他们信任对方会言行一致，并相互欣赏。</div>
+                            </div>
+                            <div class="mb_item">
+                                <div class="mbi_title">团队敏捷性：</div>
+                                <div class="mbi_text">团队能够高效且迅速地响应外部变化，并实现快速创新。必要时，团队可分担责任，相互支持以减轻任务负担。</div>
+                            </div>
+                            <div class="mb_item">
+                                <div class="mbi_title">问责机制：</div>
+                                <div class="mbi_text">团队内部在问责制与自主权之间实现了良好平衡。成员可在自身专业领域承担领导角色，并负责相互同步信息（而非依赖团队领导者）。</div>
+                            </div>
+                            <div class="mb_item">
+                                <div class="mbi_title">系统效能：</div>
+                                <div class="mbi_text">团队建立了完善的系统，并定期审视系统背后的假设及其有效性。团队通过可靠的流程支持科学决策，避免决策偏差。</div>
+                            </div>
+                            <div class="mb_item">
+                                <div class="mbi_title">团队保护：</div>
+                                <div class="mbi_text">团队领导者助力成员专注于工作，确保将外部干扰降至最低，团队韧性较强。</div>
+                            </div>
+                        </div>
+                        <div class="mddj_boxs" v-else-if="rd?.performanceRatings?.title=='学习'">
+                            <div class="mb_item" style="border-top: 1px dotted #833478;">
+                                <div class="mbi_title">发展规划：</div>
+                                <div class="mbi_text">团队认识到学习与成长的重要性，所有成员均制定了个人发展计划。团队还制定了全员认同的团队发展计划，聚焦团队在未来 12-24 个月需实现的整体进化方向。</div>
+                            </div>
+                            <div class="mb_item">
+                                <div class="mbi_title">学习相关性：</div>
+                                <div class="mbi_text">团队重视根据环境变化的需求持续提升技能和重新学习技能。发展方向反映了市场和业务战略的演变。</div>
+                            </div>
+                            <div class="mb_item">
+                                <div class="mbi_title">嵌入式学习：</div>
+                                <div class="mbi_text">团队内部拥有根深蒂固的学习文化，并高度重视持续学习。他们开展相互辅导，并将学习作为团队会议议程的常规议题。</div>
+                            </div>
+                            <div class="mb_item">
+                                <div class="mbi_title">发展导向：</div>
+                                <div class="mbi_text">团队频繁挑战自身假设，并主动邀请外部挑战。他们专注于效能与创新，并投资构建支持这一目标的网络。</div>
+                            </div>
+                            <div class="mb_item">
+                                <div class="mbi_title">反思性学习：</div>
+                                <div class="mbi_text">团队分配时间进行反思性学习，拥有完善的流程和实践，可对错误和挫折进行回顾、反思与学习，并利用所学主动实施积极变革。</div>
+                            </div>
+                        </div>
+                        <div class="mddj_boxs" v-else-if="rd?.performanceRatings?.title=='领导力'">
+                            <div class="mb_item" style="border-top: 1px dotted #833478;">
+                                <div class="mbi_title">愿景与背景：</div>
+                                <div class="mbi_text">团队明确自身的发展方向及原因。团队领导者专注于阐释目标背后的背景，并帮助每位成员理解自身目标。协作赋能型领导力团队与领导者就合适的管理风格达成共识。成员被赋予自主权与问责制，且在需要时可承担领导角色。</div>
+                            </div>
+                            <div class="mb_item">
+                                <div class="mbi_title">协作赋能型领导力：</div>
+                                <div class="mbi_text">团队与领导者就合适的管理风格达成共识。成员被赋予自主权与问责制，且在需要时可承担领导角色。</div>
+                            </div>
+                            <div class="mb_item">
+                                <div class="mbi_title">人际领导力：</div>
+                                <div class="mbi_text">团队成员与领导者沟通时感到自在，他们关心并尊重领导者，而领导者也展现出对成员的关怀。</div>
+                            </div>
+                            <div class="mb_item">
+                                <div class="mbi_title">领导勇气：</div>
+                                <div class="mbi_text">领导者展现出勇气，具备即便面临个人风险也坚持做正确之事的能力。他们保护团队免受外部过度干扰，专注于提升团队声誉与公信力。</div>
+                            </div>
+                            <div class="mb_item">
+                                <div class="mbi_title">启发性领导力：</div>
+                                <div class="mbi_text">团队领导者是成员的榜样，以身作则践行团队的价值观与行为准则。领导者关注团队的使命与目标，其经验与才智深受成员尊敬与重视。</div>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="cd_page">{{ridx*7+4}}/{{ pageNum }}</div>
+                </div>
+                <!-- 第五页 绩效评级目的与动机 -->
+                <div class="cd_box">
+                    <div class="cb_db adf">
+                        <div class="cb_db_l cdl">{{ datetime }}</div>
+                    </div>
+                    <div class="cb_content jxpjmddj">
+                        <div class="mddj_title adfac">
+                            <img src="@/assets/images/agent/pdf_title.png">
+                            <span>{{ rd?.performanceRatings?.title }}</span>
+                        </div>
+                        <div class="bp" style="margin-top: 24px;">评分总体分布</div>
+                        <div :id="'pfztfbRef'+ridx" style="width: 100%; height: 200px;" class="pdfEchart"></div>
+                        <div class="bp" style="margin-top: 7px;">均分及差异分析</div>
+                        <div class="cyfx_boxs">
+                            <div class="cyfxb_box" style="border-left: none;">
+                                <div class="cbb_top">均分前五</div>
+                                <div class="cbb_bottom">
+                                    <div class="cbbb_item" v-for="rph in rd?.performanceRatings?.highestMeanScores">
+                                        <div class="ci_l">{{ rph?.question }}</div>
+                                        <div class="ci_r">
+                                            <div class="circle">
+                                                <div class="semi-circle" :style="{'--percentage': rph?.score}"></div>
+                                                <div class="number">{{ rph?.score }}</div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="cyfxb_box">
+                                <div class="cbb_top red">均分后五</div>
+                                <div class="cbb_bottom">
+                                    <div class="cbbb_item" v-for="rph in rd?.performanceRatings?.lowestMeanScores">
+                                        <div class="ci_l">{{ rph?.question }}</div>
+                                        <div class="ci_r">
+                                            <div class="circle">
+                                                <div class="semi-circle red" :style="{'--percentage': rph?.score}"></div>
+                                                <div class="number red">{{ rph?.score }}</div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="cyfxb_box">
+                                <div class="cbb_top">方差前五</div>
+                                <div class="cbb_bottom">
+                                    <div class="cbbb_item" v-for="rph in rd?.performanceRatings?.highestVarianceScores">
+                                        <div class="ci_l">{{ rph?.question }}</div>
+                                        <div class="ci_r">
+                                            <div class="circle">
+                                                <div class="semi-circle" :style="{'--percentage': rph?.score}"></div>
+                                                <div class="number">{{ rph?.score }}</div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="cyfxb_box">
+                                <div class="cbb_top red">方差后五</div>
+                                <div class="cbb_bottom">
+                                    <div class="cbbb_item" v-for="rph in rd?.performanceRatings?.lowestVarianceScores">
+                                        <div class="ci_l">{{ rph?.question }}</div>
+                                        <div class="ci_r">
+                                            <div class="circle">
+                                                <div class="semi-circle red" :style="{'--percentage': rph?.score}"></div>
+                                                <div class="number red">{{ rph?.score }}</div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="cd_page">{{ridx*7+5}}/{{ pageNum }}</div>
+                </div>
+                <!-- 第六页 绩效评级目的与动机 -->
+                <div class="cd_box">
+                    <div class="cb_db adf">
+                        <div class="cb_db_l cdl">{{ datetime }}</div>
+                    </div>
+                    <div class="cb_content">
+                        <div class="mddj_title adfac">
+                            <img src="@/assets/images/agent/pdf_title.png">
+                            <span>{{ rd?.performanceRatings?.title }}</span>
+                        </div>
+                        <div class="bp" style="margin-top: 44px;">诊断分析</div>
+                        <p style="margin-top: 17px;">{{ rd?.diagAnalysis?.summary }}</p>
+                        <div class="jxpjmddj_box">
+                            <div class="jb_title">主题：纬度评价分：{{ rd?.diagAnalysis?.avgScore }}<span style="margin-left: 17px;">标准方差：{{ rd?.diagAnalysis?.variance }}</span></div>
+                        </div>
+                        <div class="jxpjmddj_box">
+                            <div class="jb_title2">诊断结果：</div>
+                            <div class="jb_text" v-html="rd?.diagAnalysis?.diagResult.replace(/(\r\n|\n|\r)+/g, '<br>')"></div>
+                        </div>
+                        <div class="jxpjmddj_box">
+                            <div class="jb_title2">建议：</div>
+                            <div class="jb_text" v-for="(t,i) in rd?.diagAnalysis?.suggestion" :key="i">{{ t }}</div><br>
+                        </div>
+                    </div>
+                    <div class="cd_page">{{ridx*7+6}}/{{ pageNum }}</div>
+                </div>
+                <!-- 第七页 问卷题目详细分析 -->
+                <div class="cd_box">
+                    <div class="cb_db adf">
+                        <div class="cb_db_l cdl">{{ datetime }}</div>
+                    </div>
+                    <div class="cb_content">
+                        <div class="mddj_title adfac">
+                            <img src="@/assets/images/agent/pdf_title.png">
+                            <span>{{ rd?.performanceRatings?.title }}</span>
+                        </div>
+                        <div class="bp" style="margin-top: 20px;">问卷题目详细分析</div>
+                        <p class="p2" style="margin-top: 21px;padding-left: 8px;">以下问题均与 “{{rd?.performanceRatings?.title}}” 这一核心支柱以及上述分析中强调的主题紧密相关。</p>
+                        <p class="p3" style="margin-top: 10px;padding-left: 8px;">此处的线性图示将从总体上展示团队的绩效得分情况、得分之间的差异百分比，同时以可视化方式呈现这些分数及其范围。</p>
+                        <div class="xxfx_title adfac">
+                            <div class="xt_pre">问题</div>
+                            <div class="xt_pre">平均分</div>
+                            <div class="xt_pre">方差</div>
+                        </div>
+                        <div class="xxfx_list">
+                            <div class="xl_item adfac" v-for="(rda,index) in rd?.dataAnalysis?.slice(0,9)" :key="index">
+                                <div class="xli_l adfac">
+                                    <div class="xl_pre">{{ index+1 }}</div>
+                                    <div class="xl_pre red">{{ rda?.avgScore }}</div>
+                                    <div class="xl_pre">{{ rda?.variance }}</div>
+                                </div>
+                                <div class="xli_r">
+                                    <div class="xr_p">{{ rda?.question }}</div>
+                                    <div class="xr_tb adfac">
+                                        <div class="xt_pre p1"></div>
+                                        <div class="xt_pre p2"></div>
+                                        <div class="xt_pre p3"></div>
+                                        <div class="xt_score adfac" :style="{'left':rda?.lowestScore==50?'calc(100% - 63px)':rda?.lowestScore*2+'%','width':((rda?.highestScore-rda?.lowestScore)*2)+'%'}">
+                                            <div class="xts_num red">{{ rda?.lowestScore }}</div>
+                                            <div class="xts_box"></div>
+                                            <div class="xts_num green">{{ rda?.highestScore }}</div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="cd_page">{{ridx*7+7}}/{{ pageNum }}</div>
+                </div>
+                <!-- 第八页 问卷题目详细分析 -->
+                <div class="cd_box">
+                    <div class="cb_db adf">
+                        <div class="cb_db_l cdl">{{ datetime }}</div>
+                    </div>
+                    <div class="cb_content">
+                        <div class="xxfx_list">
+                            <div class="xl_item adfac" v-for="(rda,index) in rd?.dataAnalysis?.slice(9,rd?.dataAnalysis?.length)" :key="index">
+                                <div class="xli_l adfac">
+                                    <div class="xl_pre">{{ index+10 }}</div>
+                                    <div class="xl_pre red">{{ rda?.avgScore }}</div>
+                                    <div class="xl_pre">{{ rda?.variance }}</div>
+                                </div>
+                                <div class="xli_r">
+                                    <div class="xr_p">{{ rda?.question }}</div>
+                                    <div class="xr_tb adfac">
+                                        <div class="xt_pre p1"></div>
+                                        <div class="xt_pre p2"></div>
+                                        <div class="xt_pre p3"></div>
+                                        <div class="xt_score adfac" :style="{'left':rda?.lowestScore==50?'calc(100% - 63px)':rda?.lowestScore*2+'%','width':((rda?.highestScore-rda?.lowestScore)*2)+'%'}">
+                                            <div class="xts_num red">{{ rda?.lowestScore }}</div>
+                                            <div class="xts_box"></div>
+                                            <div class="xts_num green">{{ rda?.highestScore }}</div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="cd_page">{{ridx*7+8}}/{{ pageNum }}</div>
+                </div>
+                <!-- 第九页 团队成员回答分数 -->
+                <div class="cd_box">
+                    <div class="cb_db adf">
+                        <div class="cb_db_l cdl">{{ datetime }}</div>
+                    </div>
+                    <div class="cb_content">
+                        <div class="mddj_title adfac">
+                            <img src="@/assets/images/agent/pdf_title.png">
+                            <span>{{ rd?.performanceRatings?.title }}</span>
+                        </div>
+                        <div class="bp" style="margin-top: 20px;">团队成员回答分数</div>
+                        <p style="margin-top: 28px;font-size: 14px;font-weight: bold;" >下表向您展示了每位团队成员在每个问题上的得分情况，以及由此得出的总分和方差。</p>
+                        <div class="mddj_top adf">
+                            <div class="tt_pre adf">
+                                <div class="ttp_l tl1"></div>
+                                <div class="ttp_r">在个人得分和总分方面，这表明功能得分为低。在方差方面，这表明个人得分之间的方差较高。</div>
+                            </div>
+                            <div class="tt_pre adf">
+                                <div class="ttp_l tl2"></div>
+                                <div class="ttp_r">在个人得分和总分方面，这表明功能得分为中等。在方差方面，这表明个人得分之间的方差为中等。</div>
+                            </div>
+                            <div class="tt_pre adf">
+                                <div class="ttp_l tl3"></div>
+                                <div class="ttp_r">在个人得分和总分方面，这表明功能得分为高。在方差方面，这表明个人得分之间的方差较低。</div>
+                            </div>
+                        </div>
+                        <div class="mddj_table">
+                            <div class="mt_top adf">
+                                <div class="mt_l adfac">问题</div>
+                                <div class="mt_r adf">
+                                    <div class="mr_pre" v-for="(name,index) in rd?.userNames" :key="index">{{ name }}</div>
+                                    <!-- <div class="mr_pre">总评分</div> -->
+                                    <div class="mr_pre">均分</div>
+                                    <div class="mr_pre">方差</div>
+                                </div>
+                            </div>
+                            <div class="mt_list">
+                                <div class="ml_pre adf" v-for="(tms,index) in rd?.teamMemberScores?.slice(0,7)" :key="index">
+                                    <div class="mt_l adfac">{{ tms.question }}</div>
+                                    <div class="mt_r adfac">
+                                        <div class="mp_pre adffcacjc" :class="{'mp1':score<16,'mp2':(score<36&&score>=15),'mp3':score>35}" v-for="(score,idx) in tms.scores" :key="idx">{{ score }}</div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="cd_page">{{ridx*7+9}}/{{ pageNum }}</div>
+                </div>
+                <!-- 第十页 团队成员回答分数 -->
+                <div class="cd_box">
+                    <div class="cb_db adf">
+                        <div class="cb_db_l cdl">{{ datetime }}</div>
+                    </div>
+                    <div class="cb_content">
+                        <div class="mddj_table" style="margin-top: 0;">
+                            <div class="mt_top adf">
+                                <div class="mt_l adfac">问题</div>
+                                <div class="mt_r adf">
+                                    <div class="mr_pre" v-for="(name,index) in rd?.userNames" :key="index">{{ name }}</div>
+                                    <!-- <div class="mr_pre">总评分</div> -->
+                                    <div class="mr_pre">均分</div>
+                                    <div class="mr_pre">方差</div>
+                                </div>
+                            </div>
+                            <div class="mt_list">
+                                <div class="ml_pre adf" v-for="(tms,index) in rd?.teamMemberScores?.slice(7,rd?.teamMemberScores?.length)" :key="index">
+                                    <div class="mt_l adfac">{{ tms.question }}</div>
+                                    <div class="mt_r adfac">
+                                        <div class="mp_pre adffcacjc" :class="{'mp1':score<16,'mp2':(score<36&&score>=15),'mp3':score>35}" v-for="(score,idx) in tms.scores" :key="idx">{{ score }}</div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="cd_page">{{ridx*7+10}}/{{ pageNum }}</div>
+                </div>
+            </div>
+        </template>
+        <!-- 下一步措施 -->
+        <div class="cd_box">
+            <div class="cb_db adf">
+                <div class="cb_db_l cdl">{{ datetime }}</div>
+            </div>
+            <div class="cb_content" style="padding: 18px 22px 0">
+                <div class="mddj_title adfac">
+                    <img src="@/assets/images/agent/pdf_title.png">
+                    <span>团队总结分析及教练建议</span>
+                </div>
+                <p style="margin-top: 18px;">综合上述PERILL六大维度的诊断分析，相信您对团队的情况已经有了初步的了解。</p>
+                <p style="margin-top: 10px;">至此，PERILL团队诊断流程已初步完成，团队成员均以反馈各自评分，并已生成了诊断报告。</p>
+                <p style="margin-top: 10px;">您是本次诊断评估的发起方，我们诚挚地建议您结合此次PERILL诊断流程对于团队当下的现状，可能存在的问题以及机遇，与团队共同启动下一阶段的团队教练实践。</p>
+                <p style="margin-top: 10px;">最终的推进方向需要由团队决策，我们也相信您作为为始终在支持这个团队的团队教练，对于团队的风格、问题、机遇也一定很了解。但我们也基于创衡对于PERILL模型以及团队教练的深厚理解，通过创衡AI教练助手为您生成了一份教练方案建议，供您参考。</p>
+                <div class="next_box">
+                    <div class="nb_title">指导原则：</div>
+                    <div class="nb_p">1.您可以根据需要，将PERILL诊断报告中的主要诊断结果，有选择的发送团队成员研读，以便其有时间思考诊断结果，以及下一步团队教练的目标和宗旨。</div>
+                    <div class="nb_p">2.我们建议的团队教练方案是以1天（8小时）线下工作坊为目标做的设计，你也可以根据实际需要做调整，更短的工作坊、线上的团队教练会议等形式都是可选的，一切以最合适团队的需要为归依；但我们建议这一教练过程不少于1小时，确保团队可以通过这一过程：</div>
+                    <div class="nb_sj">a.对PERILL诊断成果做深度剖析，审视、了解团队当前面临的挑战与机遇；</div>
+                    <div class="nb_sj">b.促成团队共识，明确优先级最高的核心攻坚目标（建议采用分阶段推进的策略，合理规划，避免全量多任务并行）</div>
+                    <div class="nb_p">3.在下一次的团队教练中，我们建议应当完成如下的议程：</div>
+                    <div class="nb_sj">a.制定团队层面的行动计划及责任承诺；</div>
+                    <div class="nb_sj">b.构建双向监督机制并达成共识；</div>
+                    <div class="nb_sj">c.编制可落地执行的协同工作方案；</div>
+                    <div class="nb_sj">d.定义清晰、量化的成功验证标准。</div>
+                    <div class="nb_p">4.在初始会议后，需要定期安排进度跟进时间，回顾和评估工作成效，确保PERILL行动计划融入正常工作流程。</div>
+                    <div class="nb_p">5.建议在6个月周期后重启诊断评估，对表团队效能提升目标与协作生态改善成效，并同步收集相关方反馈以验证改进成果。</div>
+                </div>
+                <div class="next_box">
+                    <div class="nb_title">如何推动与PERILL相关的工作会议：</div>
+                    <div class="nb_p">确保所有团队成员明确团队教练目标，并提前研读相关材料，以便在会前预留思考时间。</div>
+                    <div class="nb_p">重申团队教练的基本原则，支持团队回顾团队教练契约。</div>
+                    <div class="nb_p">团队教练进程中，应确保每次聚焦单一议题，维持讨论的专注度。</div>
+                    <div class="nb_p">合理调控讨论节奏，确保每位成员的观点均被听取，尤其需引导发言较少的成员表达意见。</div>
+                    <div class="nb_p">践行积极倾听原则，支持团队清晰梳理并总结讨论要点，支持团队共同确认每一个团队成员的总结内容建立共识，为后续制定行动计划奠定基础。</div>
+                    <div class="nb_p">通过认可团队成员的各自观点及其视角，协助团队化解冲突议题。</div>
+                    <div class="nb_p">运用适用性工具辅助头脑风暴及想法记录（例如：在核心议题下以便利贴分类记录观点、设置专项区域记录待跟进的旁支议题；只要教练与团队意见一致，可以灵活采取小组讨论、世界咖啡等工具和形式）。</div>
+                    <div class="nb_p">高效管理会议时间分配。</div>
+                    <div class="nb_p">请确保形成关于行动和决策的书面跟进记录。</div>
+                </div>
+                <div class="next_tip">如需了解更多背景和细节，可以向创衡团队寻求支持。联系：William@transcend-intl.cn</div>
+            </div>
+            <div class="cd_page">{{(((reportData?.dimensionAnalysis?.length)*7)||0)+4}}/{{ pageNum }}</div>
+        </div>
+        <!-- 团队情况概述 -->
+        <div class="cd_box">
+            <div class="cb_db adf">
+                <div class="cb_db_l cdl">{{ datetime }}</div>
+            </div>
+            <div class="cb_content">
+                <div class="mddj_title adfac">
+                    <img src="@/assets/images/agent/pdf_title.png">
+                    <span>团队情况概述</span>
+                </div>
+                <div class="team_title">公司名称：</div>
+                <div class="team_p">{{ reportData?.nextSteps?.teamInfo?.company }}</div>
+                <div class="team_title">公司背景：</div>
+                <div class="team_p" style="min-height: 60px;">{{ reportData?.nextSteps?.teamInfo?.company_brief }}</div>
+                <div class="team_title">团队类型：</div>
+                <div class="team_p">{{ reportData?.nextSteps?.teamInfo?.team }}</div>
+                <div class="team_title">团队故事：</div>
+                <div class="team_p" style="min-height: 180px;">{{ reportData?.nextSteps?.teamInfo?.teamStory }}</div>
+                <div class="team_title">团队诊断总结：</div>
+                <div class="team_p" style="min-height: 80px;">{{ reportData?.nextSteps?.teamInfo?.overall_analysis }}</div>
+                <!-- <div class="team_title">团队教练：</div>
+                <div class="team_p">{{ '' }}</div> -->
+            </div>
+            <div class="cd_page">{{(((reportData?.dimensionAnalysis?.length)*7)||0)+5}}/{{ pageNum }}</div>
+        </div>
+        <!-- 团队情况概述2 -->
+        <div class="cd_box">
+            <div class="cb_db adf">
+                <div class="cb_db_l cdl">{{ datetime }}</div>
+            </div>
+            <div class="cb_content">
+                <div class="bp">团队成员</div>
+                <div class="team_table">
+                    <table>
+                        <tr class="th">
+                            <td>姓名</td>
+                            <td>类型</td>
+                            <td>人物简介</td>
+                            <td>人物故事</td>
+                        </tr>
+                        <tr v-for="(item,index) in reportData?.nextSteps?.teamInfo?.team_info?.slice(0,4)" :key="index">
+                            <td class="mw">{{ item.name }}</td>
+                            <td class="mw">{{ UserCategory.find(u=>u.value==item.type)?.label }}</td>
+                            <td class="tc">{{item.brief}}</td>
+                            <td class="tc">{{item.story}}</td>
+                        </tr>
+                    </table>
+                </div>
+            </div>
+            <div class="cd_page">{{(((reportData?.dimensionAnalysis?.length)*7)||0)+6}}/{{ pageNum }}</div>
+        </div>
+        <template v-if="membersPageCount>1">
+            <div class="cd_box" v-for="(n,i) in membersPageCount-1" :key="i">
+                <div class="cb_db adf">
+                    <div class="cb_db_l cdl">{{ datetime }}</div>
+                </div>
+                <div class="cb_content">
+                    <div class="bp">团队成员</div>
+                    <div class="team_table">
+                        <table>
+                            <tr class="th">
+                                <td>姓名</td>
+                                <td>类型</td>
+                                <td>人物简介</td>
+                                <td>人物故事</td>
+                            </tr>
+                            <tr v-for="(item,index) in reportData?.nextSteps?.teamInfo?.team_info?.slice(4*n,4*(n+1))" :key="index">
+                                <td class="mw">{{ item.name }}</td>
+                                <td class="mw">{{ UserCategory.find(u=>u.value==item.type)?.label }}</td>
+                                <td class="tc">{{item.brief}}</td>
+                                <td class="tc">{{item.story}}</td>
+                            </tr>
+                        </table>
+                    </div>
+                </div>
+                <div class="cd_page">{{(((reportData?.dimensionAnalysis?.length)*7)||0)+6+n}}/{{ pageNum }}</div>
+            </div>
+        </template>
+        <!-- 团队教练目标及方案 -->
+        <div class="cd_box">
+            <div class="cb_db adf">
+                <div class="cb_db_l cdl">{{ datetime }}</div>
+            </div>
+            <div class="cb_content" style="padding: 22px 10px;">
+                <div class="mddj_title adfac">
+                    <img src="@/assets/images/agent/pdf_title.png">
+                    <span>团队教练目标及方案</span>
+                </div>
+                <div class="bp" style="margin-top: 20px;">团队教练目标</div>
+                <p style="margin-top: 10px;" v-html="reportData?.nextSteps?.coachGoal?.summary.replace(/(\r\n|\n|\r)+/g, '<br>').replaceAll('；', ';<br>')"></p>
+                <p class="bp">教练计划建议</p>
+                <div class="cc_table">
+                    <table>
+                        <tr>
+                            <td colspan="2" class="red th">教练阶段</td>
+                            <td class="red th">阶段教练方案详述</td>
+                            <td class="red th">备注</td>
+                        </tr>
+                        <template v-for="(rncc,ridx) in reportData?.nextSteps?.coachPlans?.slice(0,5)">
+                            <tr v-if="!rncc.format&&!rncc.purpose&!rncc.questions">
+                                <td colspan="4" class="yellow">{{ rncc?.stagename }} {{ rncc?.duration }}</td>
+                            </tr>
+                            <template v-else>
+                                <tr>
+                                    <td rowspan="4" class="pink" style="width: 80px;">{{ rncc?.stagename }}</td>
+                                    <td class="pink" style="width: 70px;">阶段教练目标</td>
+                                    <td>{{ rncc?.purpose }}</td>
+                                    <!-- 备注暂时为空 -->
+                                    <td style="width: 150px;">{{ '' }}</td>
+                                </tr>
+                                <tr>
+                                    <td class="pink">环节时长建议</td>
+                                    <td>{{ rncc?.duration }}</td>
+                                    <!-- 备注暂时为空 -->
+                                    <td>{{ '' }}</td>
+                                </tr>
+                                <tr>
+                                    <td class="pink">教练形式建议</td>
+                                    <td>{{ rncc?.format }}</td>
+                                    <!-- 备注暂时为空 -->
+                                    <td>{{ '' }}</td>
+                                </tr>
+                                <tr>
+                                    <td class="pink">推荐教练问题</td>
+                                    <td>
+                                        <div v-for="(rq,ri) in rncc?.questions" :key="ri">
+                                            <div v-html="rq.replace(/(\r\n|\n|\r)+/g, '<br>')"></div>
+                                        </div>
+                                    </td>
+                                    <!-- 备注暂时为空 -->
+                                    <td>{{ '' }}</td>
+                                </tr>
+                            </template>
+                        </template>
+                    </table>
+                </div>
+            </div>
+            <div class="cd_page">{{(((reportData?.dimensionAnalysis?.length)*7)||0)+7+(membersPageCount-1)}}/{{ pageNum }}</div>
+        </div>
+        <!-- 团队教练目标及方案2 -->
+        <div class="cd_box">
+            <div class="cb_db adf">
+                <div class="cb_db_l cdl">{{ datetime }}</div>
+            </div>
+            <div class="cb_content" style="padding: 22px 10px;">
+                <div class="mddj_title adfac">
+                    <img src="@/assets/images/agent/pdf_title.png">
+                    <span>团队教练目标及方案</span>
+                </div>
+                <p class="bp">教练计划建议</p>
+                <div class="cc_table">
+                    <table>
+                        <tr>
+                            <td colspan="2" class="red th">教练阶段</td>
+                            <td class="red th">阶段教练方案详述</td>
+                            <td class="red th">备注</td>
+                        </tr>
+                        <template v-for="(rncc,ridx) in reportData?.nextSteps?.coachPlans?.slice(5,reportData?.nextSteps?.coachPlans?.length)">
+                            <tr v-if="!rncc.format&&!rncc.purpose&!rncc.questions">
+                                <td colspan="4" class="yellow">{{ rncc?.stagename }} {{ rncc?.duration }}</td>
+                            </tr>
+                            <template v-else>
+                                <tr>
+                                    <td rowspan="4" class="pink" style="width: 80px;">{{ rncc?.stagename }}</td>
+                                    <td class="pink" style="width: 70px;">阶段教练目标</td>
+                                    <td>{{ rncc?.purpose }}</td>
+                                    <!-- 备注暂时为空 -->
+                                    <td style="width: 150px;">{{ '' }}</td>
+                                </tr>
+                                <tr>
+                                    <td class="pink">环节时长建议</td>
+                                    <td>{{ rncc?.duration }}</td>
+                                    <!-- 备注暂时为空 -->
+                                    <td>{{ '' }}</td>
+                                </tr>
+                                <tr>
+                                    <td class="pink">教练形式建议</td>
+                                    <td>{{ rncc?.format }}</td>
+                                    <!-- 备注暂时为空 -->
+                                    <td>{{ '' }}</td>
+                                </tr>
+                                <tr>
+                                    <td class="pink">推荐教练问题</td>
+                                    <td>
+                                        <!-- <span v-for="(rq,ridx) in rncc?.questions" :key="ridx">{{ rq }}<br/></span> -->
+                                        <div v-for="(rq,ri) in rncc?.questions" :key="ri">
+                                            <div v-html="rq.replace(/(\r\n|\n|\r)+/g, '<br>')"></div>
+                                        </div>
+                                    </td>
+                                    <!-- 备注暂时为空 -->
+                                    <td>{{ '' }}</td>
+                                </tr>
+                            </template>
+                        </template>
+                    </table>
+                </div>
+            </div>
+            <div class="cd_page">{{(((reportData?.dimensionAnalysis?.length)*7)||0)+8+(membersPageCount-1)}}/{{ pageNum }}</div>
+        </div>
+    </div>
+</template>
+
+<script setup name="">
+    import ComplexRadarChart from "@/components/ComplexRadarChart/index.vue";
+
+    const props = defineProps({
+        reportData:{
+            type: Object,
+            default: () => {}
+        }
+    })
+    import * as echarts from "echarts";
+    import { ref, getCurrentInstance, onMounted, nextTick } from 'vue'
+    const { proxy } = getCurrentInstance();
+    const reportData = ref(null);
+    const zttdznRef = ref(null)
+    const pjgxRef = ref(null);
+    const pageNum = ref('');
+    const membersPageCount = ref(0);
+    const optionsMap = new Map();
+    const datetime = proxy.parseTime(new Date(), '{yy}-{mm}-{dd} {hh}:{ii}');
+    const { UserCategory} = proxy.useDict("UserCategory");
+    const emits = defineEmits(['optionsMaps']);
+
+    const initZttdznChart = () => {
+        let myChart = echarts.init(zttdznRef.value);
+        let option = {
+            tooltip: {
+                trigger: 'axis',
+                axisPointer: {
+                type: 'shadow'
+                }
+            },
+            legend: {},
+            grid: {
+                left: '3%',
+                right: '8%',
+                bottom: '1%',
+                containLabel: true
+            },
+            xAxis: {
+                type: 'value',
+                boundaryGap: [0, 0.01]
+            },
+            yAxis: {
+                type: 'category',
+                data: reportData.value?.overall?.aggregateTeamScore.map(d=>d.dimension)||[]
+            },
+            series: [
+                {
+                name: '团队总分',
+                type: 'bar',
+                data: reportData.value?.overall?.aggregateTeamScore.map(d=>d.score)||[],
+                itemStyle:{
+                    color: function(params) {
+                        var colorList = ['#484EAE','#B6C38D', '#61B7C8', '#5D7EE5', '#8C95DC','#9374B5'];
+                        return colorList[params.dataIndex]
+                    }
+                }
+                }
+            ]
+        };
+        optionsMap.set("zttdznRef_copy", option);
+        myChart.setOption(option)
+    }
+    
+    const initPfztfbChart = (dom,report,id) => {
+        let myChart = echarts.init(dom);
+        let option = {
+            tooltip: {
+                trigger: 'axis',
+                axisPointer: {
+                type: 'shadow'
+                }
+            },
+            legend: {},
+            grid: {
+                left: '8%',
+                right: '13%',
+                bottom: '5%',
+                top: '10%',
+                containLabel: true
+            },
+            xAxis: {
+                type: 'value',
+                boundaryGap: [0, 0.01]
+            },
+            yAxis: {
+                type: 'category',
+                data: report?.performanceRatings?.avgByTheme.map(d=>d.theme)||[]
+            },
+            series: [
+                {
+                name: '',
+                type: 'bar',
+                data: report?.performanceRatings?.avgByTheme.map(d=>d.score)||[],
+                itemStyle:{
+                    color: function(params) {
+                        var colorList = ['#484EAE','#B6C38D', '#61B7C8', '#5D7EE5', '#8C95DC'];
+                        return colorList[params.dataIndex]
+                    }
+                }
+                }
+            ]
+        };
+        optionsMap.set(id+'_copy', option);
+        myChart.setOption(option)
+    }
+
+    onMounted(() => {
+        reportData.value = props.reportData;
+        membersPageCount.value = Math.ceil(reportData.value?.nextSteps?.teamInfo?.team_info?.length/4);
+        pageNum.value = reportData.value?.dimensionAnalysis?.length*7+7+(membersPageCount.value);
+        reportData.value?.dimensionAnalysis?.forEach(item=>{
+            item.userNames = item?.teamMemberScores[0]?.memberScores?.map(d=>d.realName)||[];
+            item?.teamMemberScores.forEach((tms,idx)=>{
+                tms.scores = tms?.memberScores?.map(d=>d.score)||[];
+                tms.scores = [...tms.scores,tms.avgScore,tms.variance]
+            })
+        })
+        initZttdznChart();
+        if(reportData.value?.dimensionAnalysis?.length){
+            nextTick(()=>{
+                reportData.value?.dimensionAnalysis?.forEach((item,index)=>{
+                    let dom = document.getElementById(`pfztfbRef${index}`)
+                    initPfztfbChart(dom,item,`pfztfbRef${index}`);
+                    if(index===reportData.value?.dimensionAnalysis?.length-1){
+                        emits('optionsMaps', optionsMap);
+                    }
+                })
+            })
+        } 
+    })
+</script>
+
+<style scoped lang="scss">
+    @import url(./pdf.scss);
+
+    .cd_box{
+        width: 100%;
+        height: 891px;
+        color: #A1A1A1;
+    }
+</style>

src/components/reportPdf/pdf.scss

@@ -60,53 +60,72 @@
 
     .big_title{
         font-family: STSongti-SC, STSongti-SC;
-        font-weight: 400;
+        font-weight: bold;
         font-size: 32px;
-        color: #761E6A;
+        color: #009191;
         line-height: 45px;
         margin-top: 20px;
     }
 
     &.fm{
-        background: url('@/assets/images/agent/pdf_fmbg.png') no-repeat;
+        background: url('@/assets/images/report/fm_bg.png') no-repeat;
         background-size: 100% 100%;
+        position: relative;
     }
 
     .fm_img{
-        width: 166px;
+        width: 178px;
         height: 48px;
-        margin: 48px 0 0 62px
+        margin: 20px 0 0 28px
     }
-    .fm_title{
-        margin: 74px 0 0 72px;
-        .pt_p{
-            font-size: 64px;
-            font-weight: bold;
-            color: #00B7ED;
-            line-height: 90px;
+
+    .fm_info{
+        width: 100%;
+        padding: 0 51px 41px 51px;
+        position: absolute;
+        bottom: 0;
+        .fi_p{
+            font-family: Helvetica;
+            font-size: 48px;
+            color: #FFD750;
+            line-height: 58px;
+            text-align: left;
         }
-        .pt_name{
-            font-size: 64px;
-            font-weight: bold;
+        .fi_line{
+            width: 161px;
+            height: 2px;
+            background: #FFFFFF;
+            margin-top: 5px;
+        }
+        .fi_title{
+            font-family: PingFang-SC, PingFang-SC;
+            font-weight: 500;
+            font-size: 48px;
             color: #FFFFFF;
-            line-height: 90px;
+            line-height: 67px;
+            text-align: left;
+            margin-top: 10px;
         }
-        .pt_tip{
-            font-family: PingFangSC, PingFang SC;
-            font-weight: 400;
-            font-size: 16px;
+        .fi_tip{
+            font-family: PingFang-SC, PingFang-SC;
+            font-weight: 500;
+            font-size: 14px;
             color: #FFFFFF;
-            line-height: 22px;
-            margin-top: 9px;
+            line-height: 20px;
+            margin-top: 2px;
         }
-    }
-    .fm_pre{
-        padding-left:72px;
-        margin-top: 14px;
-        font-size: 16px;
-        color: #FFFFFF;
-        .fmp_l{
-            width: 104px;
+        .fi_xx{
+            margin-top: 15px;
+            .fi_xx_pre{
+                font-family: PingFang-SC, PingFang-SC;
+                font-weight: 500;
+                font-size: 10px;
+                color: #99D3D3;
+                line-height: 14px;
+                &.ml{
+                    margin-left: 16px;
+                }
+            }
         }
     }
 
@@ -138,7 +157,7 @@
                     font-weight: bold;
                     font-size: 22px;
                     color: #FFFFFF;
-                    line-height: 32px;
+                    line-height: 27px;
                     text-align: center;
                     position: absolute;
                     left: 0;
@@ -174,48 +193,56 @@
                     }
                 }
                 &.jp1{
-                    border: 2px solid #9374B5;
+                    border: 2px solid #833479;
                     .jbp_zm{
-                        background: #9374B5;
+                        background: #833479;
                     }
                     .jbp_title{
-                        border-bottom: 2px solid #9374B5;
+                        color: #833479;
+                        border-bottom: 2px solid #833479;
+                    }
+                    .jbp_title{
+                        color: #833479;
                     }
                 }
                 &.jp2{
-                    border: 2px solid #8C95DC;
+                    border: 2px solid #009191;
                     .jbp_zm{
-                        background: #8C95DC;
+                        background: #009191;
                     }
                     .jbp_title{
-                        border-bottom: 2px solid #8C95DC;
+                        color: #009191;
+                        border-bottom: 2px solid #009191;
                     }
                 }
                 &.jp3{
-                    border: 2px solid #5D7EE5;
+                    border: 2px solid #193D59;
                     .jbp_zm{
-                        background: #5D7EE5;
+                        background: #193D59;
                     }
                     .jbp_title{
-                        border-bottom: 2px solid #5D7EE5;
+                        color: #193D59;
+                        border-bottom: 2px solid #193D59;
                     }
                 }
                 &.jp4{
-                    border: 2px solid #61B7C8;
+                    border: 2px solid #FFD750;
                     .jbp_zm{
-                        background: #61B7C8;
+                        background: #FFD750;
                     }
                     .jbp_title{
-                        border-bottom: 2px solid #61B7C8;
+                        color: #FFD750;
+                        border-bottom: 2px solid #FFD750;
                     }
                 }
                 &.jp5{
-                    border: 2px solid #B6C38D;
+                    border: 2px solid #AFCDF5;
                     .jbp_zm{
-                        background: #B6C38D;
+                        background: #AFCDF5;
                     }
                     .jbp_title{
-                        border-bottom: 2px solid #B6C38D;
+                        color: #AFCDF5;
+                        border-bottom: 2px solid #AFCDF5;
                     }
                 }
             }
@@ -225,13 +252,13 @@
             width: 100%;
             height: 112px;
             border-radius: 0px 18px 0px 18px;
-            border: 2px solid #484EAE;
+            border: 2px solid #898989;
             padding-bottom: 10px;
             position: relative;
             .jsb_zm{
                 width: 32px;
                 height: 32px;
-                background: #484EAE;
+                background: #898989;
                 font-family: PingFang-SC, PingFang-SC;
                 font-weight: bold;
                 font-size: 22px;
@@ -253,13 +280,13 @@
                     font-family: STSongti-SC, STSongti-SC;
                     font-weight: 400;
                     font-size: 10px;
-                    color: #111111;
+                    color: #898989;
                     line-height: 16px;
-                    margin-top: 9px;
+                    margin-top: 0px;
                 }
             }
             .jsb_r{
-                border-left: 2px solid #484EAE;
+                border-left: 2px solid #898989;
                 padding: 10px 22px;
                 flex: 1;
                 font-family: STSongti-SC, STSongti-SC;
@@ -282,8 +309,8 @@
             font-family: PingFang-SC, PingFang-SC;
             font-weight: 800;
             font-size: 32px;
-            color: #761E6A;
-            line-height: 32px;
+            color: #009191;
+            line-height: 40px;
             margin-left: 8px;
         }
     }
@@ -300,13 +327,13 @@
                 width: 27px;
                 height: 48px;
                 &.tl1{
-                    background: #EBA1A7;
+                    background: #D6BBD2;
                 }
                 &.tl2{
-                    background: #FBD999;
+                    background: #FFE796;
                 }
                 &.tl3{
-                    background: #D7E5A5;
+                    background: #AD78A6;
                 }
             }
             .ttp_r{
@@ -342,7 +369,7 @@
             }
         }
         .mt_top{
-            background: #761E6A;
+            background: #833479;
             .mt_l{
                 font-family: PingFangSC, PingFang SC;
                 font-weight: 400;
@@ -353,14 +380,14 @@
             }
         }
         .mt_list{
-            border: 3px solid #761E6A;
+            border: 3px solid #833479;
             .ml_pre{
                 border-bottom: 1px solid #E5E7EB;
                 &:last-child{
                     border: none;
                 }
                 &:nth-child(odd){
-                    background: #DCECFD;
+                    background: #F4F4F4;
                 }
                 &:nth-child(even){
                     background: #FFFFFF;
@@ -389,13 +416,13 @@
                     align-items: center;
                     justify-content: center;
                     &.mp1{
-                        background: #EBA1A7;
+                        background: #D6BBD2;
                     }
                     &.mp2{
-                        background: #FBD999;
+                        background: #FFE796;
                     }
                     &.mp3{
-                        background: #D7E5A5; 
+                        background: #AD78A6; 
                     }
                 }
             }
@@ -449,11 +476,11 @@
                 font-family: PingFangSC, PingFang SC;
                 font-weight: 600;
                 font-size: 20px;
-                color: #93C000;
+                color: #761E6A;
                 line-height: 24px;
                 text-align: right;
                 &.red{
-                    color: #F31616;
+                    color: #AD78A6;
                 }
             }
             .cbb_bottom{
@@ -482,7 +509,7 @@
                             width: 39px;
                             height: 39px;
                             border-radius: 50%;
-                            border: 3px solid #E5E5E5;
+                            border: 3px solid #FFE796;
                             background-color: transparent;
                         }
                 
@@ -494,16 +521,16 @@
                             height: 39px;
                             border-radius: 100%;
                             background: conic-gradient(
-                                #93C000 0deg,                          /* 起始点 */
-                                #93C000 calc(var(--percentage, 0) * 3.6deg), /* 切割范围 */
+                                #761E6A 0deg,                          /* 起始点 */
+                                #761E6A calc(var(--percentage, 0) * 3.6deg), /* 切割范围 */
                                 transparent calc(var(--percentage, 0) * 3.6deg), /* 切割的部分，使用透明 */
                                 transparent 360deg                 /* 圆的结束 */
                             );
                             z-index: 2;
                             &.red{
                                 background: conic-gradient(
-                                    #F31616 0deg,                          /* 起始点 */
-                                    #F31616 calc(var(--percentage, 0) * 3.6deg), /* 切割范围 */
+                                    #AD78A6 0deg,                          /* 起始点 */
+                                    #AD78A6 calc(var(--percentage, 0) * 3.6deg), /* 切割范围 */
                                     transparent calc(var(--percentage, 0) * 3.6deg), /* 切割的部分，使用透明 */
                                     transparent 360deg                 /* 圆的结束 */
                                 );
@@ -520,7 +547,7 @@
                             font-family: PingFang-SC, PingFang-SC;
                             font-weight: 800;
                             font-size: 18px;
-                            color: #93C000;
+                            color: #761E6A;
                             z-index: 3;
                             display: flex;
                             flex-direction: column;
@@ -528,7 +555,7 @@
                             justify-content: center;
                             border-radius: 50%;
                             &.red{
-                                color: #F31616;
+                                color: #AD78A6;
                             }
                         }
                     }
@@ -552,9 +579,9 @@
         .jb_title2{
             margin-top: 12px;
             font-family: PingFangSC, PingFang SC;
-            font-weight: 400;
+            font-weight: bold;
             font-size: 20px;
-            color: #761E6A;
+            color: #833479;
             line-height: 16px;
         }
         .jb_text{
@@ -587,7 +614,7 @@
                 .xl_pre{
                     width: 58px;
                     font-family: PangMenZhengDaoBiaoTiTiMianFeiBan, PangMenZhengDaoBiaoTiTiMianFeiBan;
-                    font-weight: normal;
+                    font-weight: bolder;
                     font-size: 20px;
                     color: #666666;
                     line-height: 16px;
@@ -618,10 +645,10 @@
                             background: #761E6A;
                         }
                         &.p2{
-                            background: rgba(118,30,106,0.6);;
+                            background: rgba(118,30,106,0.6);
                         }
                         &.p3{
-                            background: #00AAA8;
+                            background: #FFE796;
                         }
                     }
                     .xt_score{
@@ -634,16 +661,16 @@
                             border-radius: 8px;
                             border: 1px solid rgba(131,52,120,0.19);
                             font-family: PangMenZhengDao, PangMenZhengDao;
-                            font-weight: normal;
+                            font-weight: bold;
                             font-size: 12px;
                             line-height: 16px;
                             padding: 10px 8px;
                             white-space: nowrap;
                             &.red{
-                                color: #761E6A;
+                                color: #833478;
                             }
                             &.green{
-                                color: #00AAA8;
+                                color: #AD78A6;
                             }
                         }
                         .xts_box{
@@ -690,10 +717,10 @@
         font-family: PingFang-SC, PingFang-SC;
         font-weight: bold;
         font-size: 10px;
-        color: #761E6A;
+        color: #252525;
         line-height: 16px;
         margin-top: 9px;
-        text-align: center;
+        padding-left: 8px;
     }
 
     .team_title{
@@ -781,4 +808,207 @@
             }
         }
     }
+
+    .ztzdfx_box{
+        width: 320px;
+        margin-top: 16px;
+        .zb_text{
+            font-family: PingFang-SC, PingFang-SC;
+            font-weight: bold;
+            font-size: 12px;
+            color: #009191;
+            line-height: 24px;
+        }
+        .zb_title{
+            font-family: PingFang-SC, PingFang-SC;
+            font-weight: bold;
+            font-size: 10px;
+            color: #252525;
+            line-height: 10px;
+            margin-top: 6px;
+        }
+        .zb_line{
+            width: 100%;
+            height: 1px;
+            background: #1D2129;
+            margin-top: 9px;
+        }
+        .zb_pre{
+            margin-top: 8px;
+            .zbp_dian{
+                width: 10px;
+                height: 10px;
+                border-radius: 5px;
+                &.zd1{
+                    background: #FFD650;
+                }
+                &.zd2{
+                    background: #751E6A;
+                }
+                &.zd3{
+                    background: #012846;
+                }
+            }
+            span{
+                font-family: PingFang-SC, PingFang-SC;
+                font-weight: bold;
+                font-size: 10px;
+                color: #252525;
+                line-height: 10px;
+                margin-left: 8px;
+            }
+        }
+        .zb_memo{
+            font-family: PingFang-SC, PingFang-SC;
+            font-weight: bold;
+            font-size: 10px;
+            color: #252525;
+            line-height: 14px;
+            margin-top: 7px;
+        }
+    }
+
+    
+    .cb_content{
+        &.box_dj{
+            .mddj_title span{
+                color: #833479;
+            }
+            .p3{
+                color: #833479;
+            }
+            .mbi_title{
+                background: #833479;
+                font-weight: bold;
+                font-size: 10px;
+                color: #FFFFFF;
+                line-height: 14px;
+            }
+            .mb_item{
+                border-bottom: 1px dotted #833479;
+            }
+        }
+
+        &.box_wbjg{
+            .mddj_title span{
+                color: #009191;
+            }
+            .p3{
+                color: #111111;
+            }
+            .mbi_title{
+                background: #009191;
+                font-weight: bold;
+                font-size: 10px;
+                color: #FFFFFF;
+                line-height: 14px;
+            }
+            .mb_item{
+                border-bottom: 1px dotted #009191;
+            }
+        }
+
+        &.box_gx{
+            .mddj_title span{
+                color: #002846;
+            }
+            .p3{
+                color: #111111;
+            }
+            .mbi_title{
+                background: #002846;
+                font-weight: bold;
+                font-size: 10px;
+                color: #FFFFFF;
+                line-height: 14px;
+            }
+            .mb_item{
+                border-bottom: 1px dotted #002846;
+            }
+        }
+
+        &.box_nbjg{
+            .mddj_title span{
+                color: #FFD750;
+            }
+            .p3{
+                color: #111111;
+            }
+            .mbi_title{
+                background: #FFD750;
+                font-weight: bold;
+                font-size: 10px;
+                color: #FFFFFF;
+                line-height: 14px;
+            }
+            .mb_item{
+                border-bottom: 1px dotted #FFD750;
+            }
+            .mbi_title{
+                color: #252525;
+            }
+        }
+
+        &.box_xx{
+            .mddj_title span{
+                color: #AFCDF5;
+            }
+            .p3{
+                color: #111111;
+            }
+            .mbi_title{
+                background: #AFCDF5;
+                font-weight: bold;
+                font-size: 10px;
+                color: #FFFFFF;
+                line-height: 14px;
+            }
+            .mb_item{
+                border-bottom: 1px dotted #AFCDF5;
+            }
+            .mbi_title{
+                color: #252525;
+            }
+        }
+
+        &.box_ldl{
+            .mddj_title span{
+                color: #898989;
+            }
+            .p3{
+                color: #111111;
+            }
+            .mbi_title{
+                background: #898989;
+                font-weight: bold;
+                font-size: 10px;
+                color: #FFFFFF;
+                line-height: 14px;
+            }
+            .mb_item{
+                border-bottom: 1px dotted #898989;
+            }
+            .mbi_title{
+                color: #FFF;
+            }
+        }
+
+        &.other{
+            .mddj_title span{
+                font-weight: 800;
+                font-size: 32px;
+                color: #252525;
+                line-height: 32px;
+            }
+            .nb_title{
+                font-weight: bold;
+                font-size: 12px;
+                color: #252525;
+                line-height: 16px;
+            }
+            .next_box{
+                background: #F7FAFE;
+            }
+        }
+    }
 }