From c9830c2b2baf0ec176b073f0cad6246f5ad38242 Mon Sep 17 00:00:00 2001
From: lll <you@example.com>
Date: Thu, 23 Nov 2023 12:22:36 +0800
Subject: [PATCH] 1

---
 package-lock.json       |    4 +-
 src/views/Index.vue     |   69 +-
 src/views/Zhou/FHGL.vue | 1956 +++++++++++++++++++--------------------
 src/views/Zhou/KDFH.vue |  838 +++++++++--------
 src/views/lll/NYJCD.vue |    1 +
 src/views/lll/PDS.vue   |    1 +
 src/views/lll/ZNYW.vue  |    1 +
 7 files changed, 1450 insertions(+), 1420 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index a010de4..c342df4 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -6011,7 +6011,7 @@
     },
     "node_modules/echarts-gl": {
       "version": "2.0.9",
-      "resolved": "https://registry.npmmirror.com/echarts-gl/-/echarts-gl-2.0.9.tgz",
+      "resolved": "https://registry.npmjs.org/echarts-gl/-/echarts-gl-2.0.9.tgz",
       "integrity": "sha512-oKeMdkkkpJGWOzjgZUsF41DOh6cMsyrGGXimbjK2l6Xeq/dBQu4ShG2w2Dzrs/1bD27b2pLTGSaUzouY191gzA==",
       "dependencies": {
         "claygl": "^1.2.1",
@@ -17548,7 +17548,7 @@
     },
     "echarts-gl": {
       "version": "2.0.9",
-      "resolved": "https://registry.npmmirror.com/echarts-gl/-/echarts-gl-2.0.9.tgz",
+      "resolved": "https://registry.npmjs.org/echarts-gl/-/echarts-gl-2.0.9.tgz",
       "integrity": "sha512-oKeMdkkkpJGWOzjgZUsF41DOh6cMsyrGGXimbjK2l6Xeq/dBQu4ShG2w2Dzrs/1bD27b2pLTGSaUzouY191gzA==",
       "requires": {
         "claygl": "^1.2.1",
diff --git a/src/views/Index.vue b/src/views/Index.vue
index 1bbecdf..75d8912 100644
--- a/src/views/Index.vue
+++ b/src/views/Index.vue
@@ -9,15 +9,27 @@
         <p>生产工艺</p>
       </div>
       <div class="box1" v-else>
-        <img src="../assets/img/生产工艺按钮选中_hover.png" alt="" class="tabbars1" />
+        <img
+          src="../assets/img/生产工艺按钮选中_hover.png"
+          alt=""
+          class="tabbars1"
+        />
         <p>生产工艺</p>
       </div>
       <div class="box2" v-if="isShow">
-        <img src="../assets/img/能源监测按钮  拷贝.png" alt="" class="tabbars2" />
+        <img
+          src="../assets/img/能源监测按钮  拷贝.png"
+          alt=""
+          class="tabbars2"
+        />
         <p>能源监测</p>
       </div>
       <div class="box2" v-else>
-        <img src="../assets/img/能源监测按钮 _hover.png" alt="" class="tabbars2" />
+        <img
+          src="../assets/img/能源监测按钮 _hover.png"
+          alt=""
+          class="tabbars2"
+        />
         <p>能源监测</p>
       </div>
       <div class="box3" v-if="isShow">
@@ -25,19 +37,35 @@
         <p>负荷管理</p>
       </div>
       <div class="box3" v-else>
-        <img src="../assets/img/负荷管理按钮  拷贝_hover.png" alt="" class="tabbars3" />
+        <img
+          src="../assets/img/负荷管理按钮  拷贝_hover.png"
+          alt=""
+          class="tabbars3"
+        />
         <p>负荷管理</p>
       </div>
       <div class="box4" v-if="isShow">
-        <img src="../assets/img/能效管理按钮  拷贝.png" alt="" class="tabbars4" />
+        <img
+          src="../assets/img/能效管理按钮  拷贝.png"
+          alt=""
+          class="tabbars4"
+        />
         <p>能效管理</p>
       </div>
       <div class="box4" v-else>
-        <img src="../assets/img/能效管理按钮_hover.png" alt="" class="tabbars4" />
+        <img
+          src="../assets/img/能效管理按钮_hover.png"
+          alt=""
+          class="tabbars4"
+        />
         <p>能效管理</p>
       </div>
       <div class="box5" v-if="isShow">
-        <img src="../assets/img/智能运维按钮   拷贝.png" alt="" class="tabbars5" />
+        <img
+          src="../assets/img/智能运维按钮   拷贝.png"
+          alt=""
+          class="tabbars5"
+        />
         <p>智能运维</p>
       </div>
       <div class="box5" v-else>
@@ -49,10 +77,14 @@
         <p>碳资产管理</p>
       </div>
       <div class="box6" v-else>
-        <img src="../assets/img/碳资产管理 拷贝_hover.png" alt="" class="tabbars6" />
+        <img
+          src="../assets/img/碳资产管理 拷贝_hover.png"
+          alt=""
+          class="tabbars6"
+        />
         <p>碳资产管理</p>
       </div>
-    </div> -->
+    </div>
   </div>
 </template>
 
@@ -65,7 +97,7 @@ export default {
   data() {
     return {
       isShow: true,
-    }
+    };
   },
 };
 </script>
@@ -99,7 +131,7 @@ export default {
       font-size: 50px;
       font-family: FZZhengHeiS-B-GB;
       font-weight: 400;
-      color: #FFFFFF;
+      color: #ffffff;
       line-height: 20px;
     }
   }
@@ -120,7 +152,7 @@ export default {
       font-size: 50px;
       font-family: FZZhengHeiS-B-GB;
       font-weight: 400;
-      color: #FFFFFF;
+      color: #ffffff;
       line-height: 20px;
     }
   }
@@ -141,7 +173,7 @@ export default {
       font-size: 50px;
       font-family: FZZhengHeiS-B-GB;
       font-weight: 400;
-      color: #FFFFFF;
+      color: #ffffff;
       line-height: 20px;
     }
   }
@@ -162,7 +194,7 @@ export default {
       font-size: 50px;
       font-family: FZZhengHeiS-B-GB;
       font-weight: 400;
-      color: #FFFFFF;
+      color: #ffffff;
       line-height: 20px;
     }
   }
@@ -183,7 +215,7 @@ export default {
       font-size: 50px;
       font-family: FZZhengHeiS-B-GB;
       font-weight: 400;
-      color: #FFFFFF;
+      color: #ffffff;
       line-height: 20px;
     }
   }
@@ -204,7 +236,7 @@ export default {
       font-size: 50px;
       font-family: FZZhengHeiS-B-GB;
       font-weight: 400;
-      color: #FFFFFF;
+      color: #ffffff;
       line-height: 20px;
     }
   }
@@ -225,7 +257,7 @@ export default {
       font-size: 50px;
       font-family: FZZhengHeiS-B-GB;
       font-weight: 400;
-      color: #FFFFFF;
+      color: #ffffff;
       line-height: 20px;
     }
   }
@@ -241,4 +273,5 @@ export default {
   width: 100%;
   height: 100%;
   background-color: transparent;
-}</style>
+}
+</style>
diff --git a/src/views/Zhou/FHGL.vue b/src/views/Zhou/FHGL.vue
index ff5a348..6e76d6b 100644
--- a/src/views/Zhou/FHGL.vue
+++ b/src/views/Zhou/FHGL.vue
@@ -1,1031 +1,1029 @@
 <template>
-    <div class="box">
-        <div class="left">
-            <img src="../../assets/img/标题/负荷管理.png" class="title" />
-            <div class="fhgl">
-                <div class="imgBox1">
-                    <img src="../../assets/img/小标题栏.png" class="img" />
-                    <p>负荷管理</p>
-                </div>
-                <div class="controls">
-                    <div class="con1">
-                        <div class="con_r1">
-                            <h2>10300<span>kW</span></h2>
-                            <p>可监测负荷</p>
-                        </div>
-                    </div>
-                    <div class="con2">
-                        <div class="con_r1">
-                            <h2>5100<span>kW</span></h2>
-                            <p>实时负荷</p>
-                        </div>
-                    </div>
-                    <div class="con3">
-                        <div class="con_r1">
-                            <h2>87<span>%</span></h2>
-                            <p>可监测负荷占比</p>
-                        </div>
-                    </div>
-                    <div class="con4">
-                        <div class="con_r1">
-                            <h2>52<span>%</span></h2>
-                            <p>实时负荷占比</p>
-                        </div>
-                    </div>
-                </div>
-                <div class="imgBox2">
-                    <img src="../../assets/img/小标题栏.png" class="img" />
-                    <p>负荷分析</p>
-                </div>
-                <div id="main"></div>
-                <div class="imgBox3">
-                    <img src="../../assets/img/小标题栏.png" class="img" />
-                    <p>变压器负载率</p>
-                </div>
-                <div class="fuzailv">
-                    <ul>
-                        <li class="ji">
-                            <p class="p_l">1#变压器</p>
-                            <p class="p_r">15.9%</p>
-                        </li>
-                        <li class="ou">
-                            <p class="p_l">5#变压器</p>
-                            <p class="p_r">14.4%</p>
-                        </li>
-                        <li class="ji">
-                            <p class="p_l">3#变压器</p>
-                            <p class="p_r">13.9%</p>
-                        </li>
-                        <li class="ou">
-                            <p class="p_l">2#变压器</p>
-                            <p class="p_r">13.8%</p>
-                        </li>
-                        <li class="ji">
-                            <p class="p_l">4#变压器</p>
-                            <p class="p_r">12.2%</p>
-                        </li>
-                    </ul>
-                </div>
-            </div>
+  <div class="box">
+    <div class="left">
+      <img src="../../assets/img/标题/负荷管理.png" class="title" />
+      <div class="fhgl">
+        <div class="imgBox1">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>负荷管理</p>
         </div>
-        <div class="right">
-            <div class="fhgl2">
-                <div class="imgBox4">
-                    <img src="../../assets/img/小标题栏.png" class="img" />
-                    <p>负荷分类</p>
-                </div>
-                <div id="bingtu"></div>
-                <div class="imgBox5">
-                    <img src="../../assets/img/小标题栏.png" class="img" />
-                    <p>生产线负荷占比</p>
-                </div>
-                <div class="chart-container">
-                    <div class="chart" ref="chart"></div>
-                    <!-- 底座背景 -->
-                    <div class="bg"></div>
-                </div>
-                <div class="imgBox6">
-                    <img src="../../assets/img/小标题栏.png" class="img" />
-                    <p>生产线负荷</p>
-                </div>
-                <div>
-                    <div></div>
-                </div>
+        <div class="controls">
+          <div class="con1">
+            <div class="con_r1">
+              <h2>10300<span>kW</span></h2>
+              <p>可监测负荷</p>
             </div>
+          </div>
+          <div class="con2">
+            <div class="con_r1">
+              <h2>5100<span>kW</span></h2>
+              <p>实时负荷</p>
+            </div>
+          </div>
+          <div class="con3">
+            <div class="con_r1">
+              <h2>87<span>%</span></h2>
+              <p>可监测负荷占比</p>
+            </div>
+          </div>
+          <div class="con4">
+            <div class="con_r1">
+              <h2>52<span>%</span></h2>
+              <p>实时负荷占比</p>
+            </div>
+          </div>
         </div>
+        <div class="imgBox2">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>负荷分析</p>
+        </div>
+        <div id="main"></div>
+        <div class="imgBox3">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>变压器负载率</p>
+        </div>
+        <div class="fuzailv">
+          <ul>
+            <li class="ji">
+              <p class="p_l">1#变压器</p>
+              <p class="p_r">15.9%</p>
+            </li>
+            <li class="ou">
+              <p class="p_l">5#变压器</p>
+              <p class="p_r">14.4%</p>
+            </li>
+            <li class="ji">
+              <p class="p_l">3#变压器</p>
+              <p class="p_r">13.9%</p>
+            </li>
+            <li class="ou">
+              <p class="p_l">2#变压器</p>
+              <p class="p_r">13.8%</p>
+            </li>
+            <li class="ji">
+              <p class="p_l">4#变压器</p>
+              <p class="p_r">12.2%</p>
+            </li>
+          </ul>
+        </div>
+      </div>
     </div>
+    <div class="right">
+      <div class="fhgl2">
+        <div class="imgBox4">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>负荷分类</p>
+        </div>
+        <div id="bingtu"></div>
+        <div class="imgBox5">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>生产线负荷占比</p>
+        </div>
+        <div class="chart-container">
+          <div class="chart" ref="chart"></div>
+          <!-- 底座背景 -->
+          <div class="bg"></div>
+        </div>
+        <div class="imgBox6">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>生产线负荷</p>
+        </div>
+        <div>
+          <div></div>
+        </div>
+      </div>
+    </div>
+  </div>
 </template>
 <script>
-import * as echarts from 'echarts';
+import * as echarts from "echarts";
 import "echarts-gl";
 import { getPie3D, getParametricEquation } from "../../utils/fhgl";
 const color = ["#3cd6b7", "#fe9326", "#124fb7", "#383893"];
 export default {
-    name: "FHGL",
-    data() {
-        return {
-            option: {
-                title: {
-                    text: '单位:kW'
-                },
-                // tooltip: {
-                //     trigger: 'axis',
-                // },
-                grid: {
-                    left: '3%',
-                    right: '4%',
-                    bottom: '3%',
-                    // containLabel: true
-                },
-                // toolbox: {
-                //     feature: {
-                //         saveAsImage: {}
-                //     }
-                // },
-                xAxis: {
-                    type: 'category',
-                    // boundaryGap: false,
-                    data: ['0', '02:30', '03:30', '04:30', '05:30', '05:30']
-                },
-                yAxis: {
-                    type: 'value',
-                    // boundaryGap: true,
-                    data: ['100', '200', '300', '400', '500']
-                },
-                legend: {
-                    data: ['可调负荷', '实时负荷'],
-                    x: "center",
-                    y: "top",
-                    itemGap: 200,
-                    textStyle: {
-                        color: "#fff",
-                        fontSize: "28px",
-                    },
-                    fontSize: "28px"
-                },
-                series: [
-                    {
-                        name: '实时负荷',
-                        type: 'line',
-                        symbol: "circle",
-                        symbolSize: 20,
-                        data: [450, 120, 450, 428, 540, 100, 520],
-                        lineStyle: {
-                            width: 5,
-                            color: "#3FFF5A"
-                        },
-                        itemStyle: {
-                            color: "#3FFF5A"
-                        }
-                    },
-                    {
-                        name: '可调负荷',
-                        type: 'line',
-                        // stack: 'Total',
-                        symbol: "circle",
-                        symbolSize: 20,
-                        data: [180, 420, 90, 470, 500, 90, 280],
-                        lineStyle: {
-                            width: 5,
-                            color: "#43FFF4"
-                        },
-                        itemStyle: {
-                            color: "#43FFF4"
-                        }
-                    },
-                ]
+  name: "FHGL",
+  data() {
+    return {
+      option: {
+        title: {
+          text: "单位:kW",
+        },
+        // tooltip: {
+        //     trigger: 'axis',
+        // },
+        grid: {
+          left: "3%",
+          right: "4%",
+          bottom: "3%",
+          // containLabel: true
+        },
+        // toolbox: {
+        //     feature: {
+        //         saveAsImage: {}
+        //     }
+        // },
+        xAxis: {
+          type: "category",
+          // boundaryGap: false,
+          data: ["0", "02:30", "03:30", "04:30", "05:30", "05:30"],
+        },
+        yAxis: {
+          type: "value",
+          // boundaryGap: true,
+          data: ["100", "200", "300", "400", "500"],
+        },
+        legend: {
+          data: ["可调负荷", "实时负荷"],
+          x: "center",
+          y: "top",
+          itemGap: 200,
+          textStyle: {
+            color: "#fff",
+            fontSize: "28px",
+          },
+          fontSize: "28px",
+        },
+        series: [
+          {
+            name: "实时负荷",
+            type: "line",
+            symbol: "circle",
+            symbolSize: 20,
+            data: [450, 120, 450, 428, 540, 100, 520],
+            lineStyle: {
+              width: 5,
+              color: "#3FFF5A",
             },
-            optionData: [
-                {
-                    name: "A类企业",
-                    value: 176,
-                },
-                {
-                    name: "B类企业",
-                    value: 288,
-                },
-                {
-                    name: "C类企业",
-                    value: 88,
-                },
-                {
-                    name: "D类企业",
-                    value: 78,
-                },
+            itemStyle: {
+              color: "#3FFF5A",
+            },
+          },
+          {
+            name: "可调负荷",
+            type: "line",
+            // stack: 'Total',
+            symbol: "circle",
+            symbolSize: 20,
+            data: [180, 420, 90, 470, 500, 90, 280],
+            lineStyle: {
+              width: 5,
+              color: "#43FFF4",
+            },
+            itemStyle: {
+              color: "#43FFF4",
+            },
+          },
+        ],
+      },
+      optionData: [
+        {
+          name: "A类企业",
+          value: 176,
+        },
+        {
+          name: "B类企业",
+          value: 288,
+        },
+        {
+          name: "C类企业",
+          value: 88,
+        },
+        {
+          name: "D类企业",
+          value: 78,
+        },
+      ],
+      statusChart: null,
+      option1: {},
+    };
+  },
+  methods: {
+    BingTu() {
+      let data = {
+        one: 30,
+        two: 50,
+        three: 20,
+        // one: "380kW",
+        // two: "142kW",
+        // three: "694kW",
+      };
+      // 复制代码
+      const chartData = [
+        {
+          value: data.one,
+          name: "二级",
+          // label:"170kW",
+          itemStyle: {
+            // shadowBlur: 20,
+            // shadowColor: "#3C4039",
+            // shadowOffsetx: 25,
+            // shadowOffsety: 20,
+            color: "#00FF9C",
+          },
+        },
+        {
+          value: data.two,
+          name: "三级",
+          itemStyle: {
+            // shadowBlur: 20,
+            // shadowColor: "#0C3E4E",
+            // shadowOffsetx: 25,
+            // shadowOffsety: 20,
+            color: "#2CB2C5",
+          },
+        },
+        {
+          value: data.three,
+          name: "一级",
+          itemStyle: {
+            // shadowBlur: 20,
+            // shadowColor: "#043E39",
+            // shadowOffsetx: 25,
+            // shadowOffsety: 20,
+            color: "#00D2FF",
+          },
+        },
+      ];
+      const sum = chartData.reduce((per, cur) => per + cur.value, 0);
+      const gap = (1 * sum) / 100;
+      const pieData1 = [];
+      const gapData = {
+        name: "",
+        value: gap,
+        itemStyle: {
+          color: "transparent",
+        },
+      };
+      for (let i = 0; i < chartData.length; i++) {
+        // 第一圈数据
+        pieData1.push({
+          ...chartData[i],
+        });
+        pieData1.push(gapData);
+      }
+      let option = {
+        backgroundColor: "#102146",
+        title: {
+          show: true,
+          text: "1694kW",
+          subtext: "总负荷",
+          x: "39.5%",
+          y: "43%",
+          itemGap: 6,
+          textStyle: {
+            color: "#fff",
+            fontSize: 30,
+            fontWeight: "400",
+            lineHeight: 60,
+          },
+          subtextStyle: {
+            color: "#fff",
+            fontSize: 26,
+            fontWeight: "400",
+            lineHeight: 36,
+          },
+          textAlign: "center",
+        },
+        series: [
+          {
+            name: "",
+            type: "pie",
+            roundCap: true,
+            radius: ["40%", "56%"],
+            center: ["40%", "50%"],
+            data: pieData1,
+            labelLine: {
+              length: 8,
+              length2: 16,
+              lineStyle: {
+                width: 1,
+              },
+            },
+          },
+          {
+            type: "pie",
+            radius: ["32%", "34%"],
+            center: ["40%", "50%"],
+            animation: false,
+            hoverAnimation: false,
+            data: [
+              {
+                value: 100,
+              },
             ],
-            statusChart: null,
-            option1: {},
+            label: {
+              show: false,
+            },
+            itemStyle: {
+              normal: {
+                color: "#3BC5EF",
+              },
+            },
+          },
+          {
+            name: "",
+            type: "pie",
+            startAngle: 90,
+            radius: "32%",
+            animation: false,
+            hoverAnimation: false,
+            center: ["40%", "50%"],
+            itemStyle: {
+              normal: {
+                labelLine: {
+                  show: false,
+                },
+                color: new echarts.graphic.RadialGradient(0.5, 0.5, 1, [
+                  {
+                    offset: 1,
+                    color: "rgba(50,171,241, 0)",
+                  },
+                  {
+                    offset: 0.5,
+                    color: "rgba(50,171,241, .4)",
+                  },
+                  {
+                    offset: 0,
+                    color: "rgba(55,70,130, 0)",
+                  },
+                ]),
+                shadowBlur: 60,
+              },
+            },
+            data: [
+              {
+                value: 100,
+              },
+            ],
+          },
+        ],
+      };
+      var chartDom2 = document.getElementById("bingtu");
+      var myChart = echarts.init(chartDom2);
+      option && myChart.setOption(option);
+    },
+    // 初始化label样式
+    setLabel() {
+      this.optionData.forEach((item, index) => {
+        item.itemStyle = {
+          color: color[index],
+        };
+        item.label = {
+          normal: {
+            show: true,
+            color: color[index],
+            position: "right",
+            // distance:-10,
+            offset: [0, 3],
+            formatter: [
+              "{d|{d}%}",
+              "————",
+              //   '{c|{c}}{b|台}',
+              "{b|{b}}",
+            ].join("\n"), // 用\n来换行
+            rich: {
+              b: {
+                // color: '#fff',
+                lineHeight: 25,
+                align: "left",
+                color: color[index],
+              },
+              c: {
+                fontSize: 22,
+                // color: '#fff',
+                textShadowColor: "#1c90a6",
+                textShadowOffsetX: 0,
+                textShadowOffsetY: 2,
+                textShadowBlur: 5,
+                color: color[index],
+              },
+              d: {
+                color: color[index],
+                align: "left",
+              },
+            },
+          },
+        };
+        item.labelLine = {
+          normal: {
+            length2: 30,
+            lineStyle: {
+              width: 1,
+              color: color[index],
+            },
+          },
+        };
+      });
+    },
+    // 图表初始化
+    initChart() {
+      this.statusChart = echarts.init(this.$refs.chart);
+      // 传入数据生成 option, 构建3d饼状图, 参数工具文件已经备注的很详细
+      this.option = getPie3D(this.optionData, 0.6, 180, 26, 18, 1);
+      this.statusChart.setOption(this.option);
+      // 是否需要label指引线，如果要就添加一个透明的2d饼状图并调整角度使得labelLine和3d的饼状图对齐，并再次setOption
+      this.option.series.push({
+        name: "信用评价", //自己根据场景修改
+        backgroundColor: "transparent",
+        type: "pie",
+        label: {
+          opacity: 1,
+          fontSize: 13,
+          lineHeight: 20,
+        },
+        startAngle: -40, // 起始角度，支持范围[0, 360]。
+        clockwise: false, // 饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
+        radius: ["20%", "60%"],
+        center: ["50%", "50%"],
+        data: this.optionData,
+        itemStyle: {
+          opacity: 0, //这里必须是0，不然2d的图会覆盖在表面
+        },
+      });
+      this.statusChart.setOption(this.option);
+      this.bindListen(this.statusChart);
+    },
+    // 监听鼠标事件，实现饼图选中效果（单选），近似实现高亮（放大）效果。
+    // optionName是防止有多个图表进行定向option传递，单个图表可以不传，默认是opiton
+    bindListen(myChart, optionName = "option") {
+      let selectedIndex = "";
+      let hoveredIndex = "";
+      // 监听点击事件，实现选中效果（单选）
+      // myChart.on("click", (params) => {
+      //   console.log(this[optionName].series[params.seriesIndex],'this[optionName].series[params.seriesIndex].pieStatus');
+      //   // 从 option.series 中读取重新渲染扇形所需的参数，将是否选中取反。
+      //   const isSelected =
+      //     !this[optionName].series[params.seriesIndex].pieStatus.selected;
+      //   const isHovered =
+      //     this[optionName].series[params.seriesIndex].pieStatus.hovered;
+      //   const k = this[optionName].series[params.seriesIndex].pieStatus.k;
+      //   const startRatio =
+      //     this[optionName].series[params.seriesIndex].pieData.startRatio;
+      //   const endRatio =
+      //     this[optionName].series[params.seriesIndex].pieData.endRatio;
+      //   // 如果之前选中过其他扇形，将其取消选中（对 option 更新）
+      //   if (selectedIndex !== "" && selectedIndex !== params.seriesIndex) {
+      //     this[optionName].series[selectedIndex].parametricEquation =
+      //       getParametricEquation(
+      //         this[optionName].series[selectedIndex].pieData.startRatio,
+      //         this[optionName].series[selectedIndex].pieData.endRatio,
+      //         false,
+      //         false,
+      //         k,
+      //         this[optionName].series[selectedIndex].pieData.value
+      //       );
+      //     this[optionName].series[selectedIndex].pieStatus.selected = false;
+      //   }
+      //   // 对当前点击的扇形，执行选中/取消选中操作（对 option 更新）
+      //   this[optionName].series[params.seriesIndex].parametricEquation =
+      //     getParametricEquation(
+      //       startRatio,
+      //       endRatio,
+      //       isSelected,
+      //       isHovered,
+      //       k,
+      //       this[optionName].series[params.seriesIndex].pieData.value
+      //     );
+      //   this[optionName].series[params.seriesIndex].pieStatus.selected =
+      //     isSelected;
+      //   // 如果本次是选中操作，记录上次选中的扇形对应的系列号 seriesIndex
+      //   selectedIndex = isSelected ? params.seriesIndex : null;
+      //   // 使用更新后的 option，渲染图表
+      //   myChart.setOption(this[optionName]);
+      // });
+      // 监听 mouseover，近似实现高亮（放大）效果
+      myChart.on("mouseover", (params) => {
+        // 准备重新渲染扇形所需的参数
+        let isSelected;
+        let isHovered;
+        let startRatio;
+        let endRatio;
+        let k;
+        // 如果触发 mouseover 的扇形当前已高亮，则不做操作
+        if (hoveredIndex === params.seriesIndex) {
+          // 否则进行高亮及必要的取消高亮操作
+        } else {
+          // 如果当前有高亮的扇形，取消其高亮状态（对 option 更新）
+          if (hoveredIndex !== "") {
+            // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 false。
+            isSelected =
+              this[optionName].series[hoveredIndex].pieStatus.selected;
+            isHovered = false;
+            startRatio =
+              this[optionName].series[hoveredIndex].pieData.startRatio;
+            endRatio = this[optionName].series[hoveredIndex].pieData.endRatio;
+            k = this[optionName].series[hoveredIndex].pieStatus.k;
+            // 对当前点击的扇形，执行取消高亮操作（对 option 更新）
+            this[optionName].series[hoveredIndex].parametricEquation =
+              getParametricEquation(
+                startRatio,
+                endRatio,
+                isSelected,
+                isHovered,
+                k,
+                this[optionName].series[hoveredIndex].pieData.value
+              );
+            this[optionName].series[hoveredIndex].pieStatus.hovered = isHovered;
+            // 将此前记录的上次选中的扇形对应的系列号 seriesIndex 清空
+            hoveredIndex = "";
+          }
+          // 如果触发 mouseover 的扇形不是透明圆环，将其高亮（对 option 更新）
+          if (
+            params.seriesName !== "mouseoutSeries" &&
+            params.seriesName !== "信用评价"
+          ) {
+            // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 true。
+            isSelected =
+              this[optionName].series[params.seriesIndex].pieStatus.selected;
+            isHovered = true;
+            startRatio =
+              this[optionName].series[params.seriesIndex].pieData.startRatio;
+            endRatio =
+              this[optionName].series[params.seriesIndex].pieData.endRatio;
+            k = this[optionName].series[params.seriesIndex].pieStatus.k;
+            // 对当前点击的扇形，执行高亮操作（对 option 更新）
+            this[optionName].series[params.seriesIndex].parametricEquation =
+              getParametricEquation(
+                startRatio,
+                endRatio,
+                isSelected,
+                isHovered,
+                k,
+                this[optionName].series[params.seriesIndex].pieData.value + 60
+              );
+            this[optionName].series[params.seriesIndex].pieStatus.hovered =
+              isHovered;
+            // 记录上次高亮的扇形对应的系列号 seriesIndex
+            hoveredIndex = params.seriesIndex;
+          }
+          // 使用更新后的 option，渲染图表
+          myChart.setOption(this[optionName]);
         }
+      });
+      // 修正取消高亮失败的 bug
+      myChart.on("globalout", () => {
+        // 准备重新渲染扇形所需的参数
+        let isSelected;
+        let isHovered;
+        let startRatio;
+        let endRatio;
+        let k;
+        if (hoveredIndex !== "") {
+          // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 true。
+          isSelected = this[optionName].series[hoveredIndex].pieStatus.selected;
+          isHovered = false;
+          k = this[optionName].series[hoveredIndex].pieStatus.k;
+          startRatio = this[optionName].series[hoveredIndex].pieData.startRatio;
+          endRatio = this[optionName].series[hoveredIndex].pieData.endRatio;
+          // 对当前点击的扇形，执行取消高亮操作（对 option 更新）
+          this[optionName].series[hoveredIndex].parametricEquation =
+            getParametricEquation(
+              startRatio,
+              endRatio,
+              isSelected,
+              isHovered,
+              k,
+              this[optionName].series[hoveredIndex].pieData.value
+            );
+          this[optionName].series[hoveredIndex].pieStatus.hovered = isHovered;
+          // 将此前记录的上次选中的扇形对应的系列号 seriesIndex 清空
+          hoveredIndex = "";
+        }
+        // 使用更新后的 option，渲染图表
+        myChart.setOption(this[optionName]);
+      });
     },
-    methods: {
-        BingTu() {
-            let data = {
-                one: 30,
-                two: 50,
-                three: 20,
-                // one: "380kW",
-                // two: "142kW",
-                // three: "694kW",
-            };
-            // 复制代码
-            const chartData = [
-                {
-                    value: data.one,
-                    name: "二级",
-                    // label:"170kW",
-                    itemStyle: {
-                        // shadowBlur: 20,
-                        // shadowColor: "#3C4039",
-                        // shadowOffsetx: 25,
-                        // shadowOffsety: 20,
-                        color: "#00FF9C",
-                    },
-                },
-                {
-                    value: data.two,
-                    name: "三级",
-                    itemStyle: {
-                        // shadowBlur: 20,
-                        // shadowColor: "#0C3E4E",
-                        // shadowOffsetx: 25,
-                        // shadowOffsety: 20,
-                        color: "#2CB2C5",
-                    },
-                },
-                {
-                    value: data.three,
-                    name: "一级",
-                    itemStyle: {
-                        // shadowBlur: 20,
-                        // shadowColor: "#043E39",
-                        // shadowOffsetx: 25,
-                        // shadowOffsety: 20,
-                        color: "#00D2FF",
-                    },
-                }];
-            const sum = chartData.reduce((per, cur) => per + cur.value, 0);
-            const gap = (1 * sum) / 100;
-            const pieData1 = [];
-            const gapData = {
-                name: "",
-                value: gap,
-                itemStyle: {
-                    color: "transparent",
-                },
-            };
-            for (let i = 0; i < chartData.length; i++) {
-                // 第一圈数据
-                pieData1.push({
-                    ...chartData[i],
-                });
-                pieData1.push(gapData);
-            }
-            let option = {
-                backgroundColor: "#102146",
-                title: {
-                    show: true,
-                    text: "1694kW",
-                    subtext: "总负荷",
-                    x: "39.5%",
-                    y: "43%",
-                    itemGap: 6,
-                    textStyle: {
-                        color: "#fff",
-                        fontSize: 30,
-                        fontWeight: "400",
-                        lineHeight: 60
-                    },
-                    subtextStyle: {
-                        color: "#fff",
-                        fontSize: 26,
-                        fontWeight: "400",
-                        lineHeight: 36
-                    },
-                    textAlign: "center",
-                },
-                series: [
-                    {
-                        name: "",
-                        type: "pie",
-                        roundCap: true,
-                        radius: ["40%", "56%"],
-                        center: ["40%", "50%"],
-                        data: pieData1,
-                        labelLine: {
-                            length: 8,
-                            length2: 16,
-                            lineStyle: {
-                                width: 1,
-                            },
-                        },
-                    },
-                    {
-                        type: "pie",
-                        radius: ["32%", "34%"],
-                        center: ["40%", "50%"],
-                        animation: false,
-                        hoverAnimation: false,
-                        data: [
-                            {
-                                value: 100,
-                            },
-                        ],
-                        label: {
-                            show: false,
-                        },
-                        itemStyle: {
-                            normal: {
-                                color: "#3BC5EF",
-                            },
-                        },
-                    },
-                    {
-                        name: "",
-                        type: "pie",
-                        startAngle: 90,
-                        radius: "32%",
-                        animation: false,
-                        hoverAnimation: false,
-                        center: ["40%", "50%"],
-                        itemStyle: {
-                            normal: {
-                                labelLine: {
-                                    show: false,
-                                },
-                                color: new echarts.graphic.RadialGradient(0.5, 0.5, 1, [
-                                    {
-                                        offset: 1,
-                                        color: "rgba(50,171,241, 0)",
-                                    },
-                                    {
-                                        offset: 0.5,
-                                        color: "rgba(50,171,241, .4)",
-                                    },
-                                    {
-                                        offset: 0,
-                                        color: "rgba(55,70,130, 0)",
-                                    },
-                                ]),
-                                shadowBlur: 60,
-                            },
-                        },
-                        data: [
-                            {
-                                value: 100,
-                            },
-                        ],
-                    },
-                ],
-            };
-            var chartDom2 = document.getElementById('bingtu');
-            var myChart = echarts.init(chartDom2);
-            option && myChart.setOption(option);
-        },
-        // 初始化label样式
-        setLabel() {
-            this.optionData.forEach((item, index) => {
-                item.itemStyle = {
-                    color: color[index],
-                };
-                item.label = {
-                    normal: {
-                        show: true,
-                        color: color[index],
-                        position: 'right',
-                        // distance:-10,
-                        offset: [0, 3],
-                        formatter: [
-                            "{d|{d}%}",
-                            "————",
-                            //   '{c|{c}}{b|台}',
-                            "{b|{b}}",
-                        ].join("\n"), // 用\n来换行
-                        rich: {
-                            b: {
-                                // color: '#fff',
-                                lineHeight: 25,
-                                align: "left",
-                                color: color[index],
-                            },
-                            c: {
-                                fontSize: 22,
-                                // color: '#fff',
-                                textShadowColor: "#1c90a6",
-                                textShadowOffsetX: 0,
-                                textShadowOffsetY: 2,
-                                textShadowBlur: 5,
-                                color: color[index],
-                            },
-                            d: {
-                                color: color[index],
-                                align: "left",
-                            },
-                        },
-                    },
-                };
-                item.labelLine = {
-                    normal: {
-                        length2: 30,
-                        lineStyle: {
-                            width: 1,
-                            color: color[index],
-                        },
-                    },
-                };
-            });
-        },
-        // 图表初始化
-        initChart() {
-            this.statusChart = echarts.init(this.$refs.chart);
-            // 传入数据生成 option, 构建3d饼状图, 参数工具文件已经备注的很详细
-            this.option = getPie3D(this.optionData, 0.6, 180, 26, 18, 1);
-            this.statusChart.setOption(this.option);
-            // 是否需要label指引线，如果要就添加一个透明的2d饼状图并调整角度使得labelLine和3d的饼状图对齐，并再次setOption
-            this.option.series.push({
-                name: "信用评价", //自己根据场景修改
-                backgroundColor: "transparent",
-                type: "pie",
-                label: {
-                    opacity: 1,
-                    fontSize: 13,
-                    lineHeight: 20,
-                },
-                startAngle: -40, // 起始角度，支持范围[0, 360]。
-                clockwise: false, // 饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
-                radius: ["20%", "60%"],
-                center: ["50%", "50%"],
-                data: this.optionData,
-                itemStyle: {
-                    opacity: 0, //这里必须是0，不然2d的图会覆盖在表面
-                },
-            });
-            this.statusChart.setOption(this.option);
-            this.bindListen(this.statusChart);
-        },
-        // 监听鼠标事件，实现饼图选中效果（单选），近似实现高亮（放大）效果。
-        // optionName是防止有多个图表进行定向option传递，单个图表可以不传，默认是opiton
-        bindListen(myChart, optionName = "option") {
-            let selectedIndex = "";
-            let hoveredIndex = "";
-            // 监听点击事件，实现选中效果（单选）
-            // myChart.on("click", (params) => {
-            //   console.log(this[optionName].series[params.seriesIndex],'this[optionName].series[params.seriesIndex].pieStatus');
-            //   // 从 option.series 中读取重新渲染扇形所需的参数，将是否选中取反。
-            //   const isSelected =
-            //     !this[optionName].series[params.seriesIndex].pieStatus.selected;
-            //   const isHovered =
-            //     this[optionName].series[params.seriesIndex].pieStatus.hovered;
-            //   const k = this[optionName].series[params.seriesIndex].pieStatus.k;
-            //   const startRatio =
-            //     this[optionName].series[params.seriesIndex].pieData.startRatio;
-            //   const endRatio =
-            //     this[optionName].series[params.seriesIndex].pieData.endRatio;
-            //   // 如果之前选中过其他扇形，将其取消选中（对 option 更新）
-            //   if (selectedIndex !== "" && selectedIndex !== params.seriesIndex) {
-            //     this[optionName].series[selectedIndex].parametricEquation =
-            //       getParametricEquation(
-            //         this[optionName].series[selectedIndex].pieData.startRatio,
-            //         this[optionName].series[selectedIndex].pieData.endRatio,
-            //         false,
-            //         false,
-            //         k,
-            //         this[optionName].series[selectedIndex].pieData.value
-            //       );
-            //     this[optionName].series[selectedIndex].pieStatus.selected = false;
-            //   }
-            //   // 对当前点击的扇形，执行选中/取消选中操作（对 option 更新）
-            //   this[optionName].series[params.seriesIndex].parametricEquation =
-            //     getParametricEquation(
-            //       startRatio,
-            //       endRatio,
-            //       isSelected,
-            //       isHovered,
-            //       k,
-            //       this[optionName].series[params.seriesIndex].pieData.value
-            //     );
-            //   this[optionName].series[params.seriesIndex].pieStatus.selected =
-            //     isSelected;
-            //   // 如果本次是选中操作，记录上次选中的扇形对应的系列号 seriesIndex
-            //   selectedIndex = isSelected ? params.seriesIndex : null;
-            //   // 使用更新后的 option，渲染图表
-            //   myChart.setOption(this[optionName]);
-            // });
-            // 监听 mouseover，近似实现高亮（放大）效果
-            myChart.on("mouseover", (params) => {
-                // 准备重新渲染扇形所需的参数
-                let isSelected;
-                let isHovered;
-                let startRatio;
-                let endRatio;
-                let k;
-                // 如果触发 mouseover 的扇形当前已高亮，则不做操作
-                if (hoveredIndex === params.seriesIndex) {
-                    // 否则进行高亮及必要的取消高亮操作
-                } else {
-                    // 如果当前有高亮的扇形，取消其高亮状态（对 option 更新）
-                    if (hoveredIndex !== "") {
-                        // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 false。
-                        isSelected =
-                            this[optionName].series[hoveredIndex].pieStatus.selected;
-                        isHovered = false;
-                        startRatio =
-                            this[optionName].series[hoveredIndex].pieData.startRatio;
-                        endRatio = this[optionName].series[hoveredIndex].pieData.endRatio;
-                        k = this[optionName].series[hoveredIndex].pieStatus.k;
-                        // 对当前点击的扇形，执行取消高亮操作（对 option 更新）
-                        this[optionName].series[hoveredIndex].parametricEquation =
-                            getParametricEquation(
-                                startRatio,
-                                endRatio,
-                                isSelected,
-                                isHovered,
-                                k,
-                                this[optionName].series[hoveredIndex].pieData.value
-                            );
-                        this[optionName].series[hoveredIndex].pieStatus.hovered = isHovered;
-                        // 将此前记录的上次选中的扇形对应的系列号 seriesIndex 清空
-                        hoveredIndex = "";
-                    }
-                    // 如果触发 mouseover 的扇形不是透明圆环，将其高亮（对 option 更新）
-                    if (
-                        params.seriesName !== "mouseoutSeries" &&
-                        params.seriesName !== "信用评价"
-                    ) {
-
-                        // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 true。
-                        isSelected =
-                            this[optionName].series[params.seriesIndex].pieStatus.selected;
-                        isHovered = true;
-                        startRatio =
-                            this[optionName].series[params.seriesIndex].pieData.startRatio;
-                        endRatio =
-                            this[optionName].series[params.seriesIndex].pieData.endRatio;
-                        k = this[optionName].series[params.seriesIndex].pieStatus.k;
-                        // 对当前点击的扇形，执行高亮操作（对 option 更新）
-                        this[optionName].series[params.seriesIndex].parametricEquation =
-                            getParametricEquation(
-                                startRatio,
-                                endRatio,
-                                isSelected,
-                                isHovered,
-                                k,
-                                this[optionName].series[params.seriesIndex].pieData.value + 60
-                            );
-                        this[optionName].series[params.seriesIndex].pieStatus.hovered =
-                            isHovered;
-                        // 记录上次高亮的扇形对应的系列号 seriesIndex
-                        hoveredIndex = params.seriesIndex;
-                    }
-                    // 使用更新后的 option，渲染图表
-                    myChart.setOption(this[optionName]);
-                }
-            });
-            // 修正取消高亮失败的 bug
-            myChart.on("globalout", () => {
-                // 准备重新渲染扇形所需的参数
-                let isSelected;
-                let isHovered;
-                let startRatio;
-                let endRatio;
-                let k;
-                if (hoveredIndex !== "") {
-                    // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 true。
-                    isSelected = this[optionName].series[hoveredIndex].pieStatus.selected;
-                    isHovered = false;
-                    k = this[optionName].series[hoveredIndex].pieStatus.k;
-                    startRatio = this[optionName].series[hoveredIndex].pieData.startRatio;
-                    endRatio = this[optionName].series[hoveredIndex].pieData.endRatio;
-                    // 对当前点击的扇形，执行取消高亮操作（对 option 更新）
-                    this[optionName].series[hoveredIndex].parametricEquation =
-                        getParametricEquation(
-                            startRatio,
-                            endRatio,
-                            isSelected,
-                            isHovered,
-                            k,
-                            this[optionName].series[hoveredIndex].pieData.value
-                        );
-                    this[optionName].series[hoveredIndex].pieStatus.hovered = isHovered;
-                    // 将此前记录的上次选中的扇形对应的系列号 seriesIndex 清空
-                    hoveredIndex = "";
-                }
-                // 使用更新后的 option，渲染图表
-                myChart.setOption(this[optionName]);
-            });
-        },
-    },
-    created() {
-        this.setLabel();
-    },
-    mounted() {
-        var chartDom = document.getElementById('main');
-        var myChart = echarts.init(chartDom);
-        this.option && myChart.setOption(this.option);
-        this.$nextTick(() => {
-            this.BingTu();
-            this.initChart();
-        })
-    }
-}
+  },
+  created() {
+    this.setLabel();
+  },
+  mounted() {
+    var chartDom = document.getElementById("main");
+    var myChart = echarts.init(chartDom);
+    this.option && myChart.setOption(this.option);
+    this.$nextTick(() => {
+      this.BingTu();
+      this.initChart();
+    });
+  },
+};
 </script>
 <style lang="less" scoped>
 .box {
-    width: 100%;
-    height: 100%;
-    padding-top: 500px;
-    box-sizing: border-box;
-    display: flex;
-    justify-content: space-between;
+  width: 100%;
+  height: 100%;
+  padding-top: 500px;
+  box-sizing: border-box;
+  display: flex;
+  background-color: transparent;
+  justify-content: space-between;
 }
 
 .left {
-    width: 1237px;
-    height: 2500px;
-    margin-left: 61px;
-    background-image: url("../../assets/img/侧边.png");
-    padding-left: 59px;
-    padding-right: 45px;
-    box-sizing: border-box;
+  width: 1237px;
+  height: 2500px;
+  margin-left: 61px;
+  background-image: url("../../assets/img/侧边.png");
+  padding-left: 59px;
+  padding-right: 45px;
+  box-sizing: border-box;
 
-    .title {
-        margin-top: 15px;
-        margin-left: 60px;
+  .title {
+    margin-top: 15px;
+    margin-left: 60px;
+  }
+
+  .fhgl {
+    position: relative;
+    margin-top: 56px;
+
+    .imgBox1 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
     }
 
-    .fhgl {
-        position: relative;
-        margin-top: 56px;
+    // 左边的第一个
+    .controls {
+      width: 100%;
+      display: flex;
+      justify-content: space-around;
+      flex-wrap: wrap;
+      align-items: center;
+      margin-top: 113px;
 
-        .imgBox1 {
-            height: 93px;
-            width: 1156px;
+      .con1 {
+        width: 510px;
+        height: 177px;
+        // background: rgba(37, 31, 1, 0.1);
+        border-radius: 24px 3px 3px 24px;
+        background: url(../../assets/FHGL/11.png);
+        background-size: cover;
+        margin-bottom: 82px;
 
-            p {
-                position: absolute;
-                color: #fff;
-                top: 20px;
-                left: 50px;
-                font-size: 30px;
-                font-family: "MicrosoftYaHei";
-            }
+        .con_r1 {
+          margin: 41px 108px 79px 236px;
         }
 
-        // 左边的第一个
-        .controls {
-            width: 100%;
-            display: flex;
-            justify-content: space-around;
-            flex-wrap: wrap;
-            align-items: center;
-            margin-top: 113px;
+        h2 {
+          width: 166px;
+          height: 57px;
+          font-size: 54px;
+          font-family: Impact;
+          font-weight: 400;
+          color: #58fd64;
 
-            .con1 {
-                width: 510px;
-                height: 177px;
-                // background: rgba(37, 31, 1, 0.1);
-                border-radius: 24px 3px 3px 24px;
-                background: url(../../assets/FHGL/11.png);
-                background-size: cover;
-                margin-bottom: 82px;
-
-                .con_r1 {
-                    margin: 41px 108px 79px 236px;
-                }
-
-                h2 {
-                    width: 166px;
-                    height: 57px;
-                    font-size: 54px;
-                    font-family: Impact;
-                    font-weight: 400;
-                    color: #58FD64;
-
-                    // line-height: 341px;
-                    span {
-                        width: 50px;
-                        height: 27px;
-                        font-size: 33px;
-                        margin-left: 18px;
-                        font-family: Microsoft YaHei;
-                        font-weight: 400;
-                        color: #FFFFFF;
-                        // line-height: 341px;
-                    }
-                }
-
-                p {
-                    margin-top: 18px;
-                    width: 208px;
-                    height: 41px;
-                    font-size: 36px;
-                    font-family: Microsoft YaHei;
-                    font-weight: 400;
-                    color: #FFFFFF;
-                    // line-height: 196px;
-                }
-            }
-
-            .con2 {
-                width: 510px;
-                height: 177px;
-                // background: rgba(37, 31, 1, 0.1);
-                // border: 1px solid;
-                // border-image: linear-gradient(180deg, #83FFEC, #00FFD8) 10 10;
-                border-radius: 24px 3px 3px 24px;
-                background: url(../../assets/FHGL/12.png);
-                background-size: cover;
-                margin-bottom: 82px;
-
-                .con_r1 {
-                    margin: 41px 108px 79px 236px;
-                }
-
-                h2 {
-                    width: 166px;
-                    height: 57px;
-                    font-size: 54px;
-                    font-family: Impact;
-                    font-weight: 400;
-                    color: #03FFD8;
-
-                    // line-height: 341px;
-                    span {
-                        width: 50px;
-                        height: 27px;
-                        margin-left: 18px;
-                        font-size: 33px;
-                        font-family: Microsoft YaHei;
-                        font-weight: 400;
-                        color: #FFFFFF;
-                    }
-                }
-
-                p {
-                    margin-top: 18px;
-                    width: 208px;
-                    height: 41px;
-                    font-size: 36px;
-                    font-family: Microsoft YaHei;
-                    font-weight: 400;
-                    color: #FFFFFF;
-                    // line-height: 196px;
-                }
-            }
-
-            .con3 {
-                width: 510px;
-                height: 177px;
-                // background: rgba(37, 31, 1, 0.1);
-                // border: 1px solid;
-                // border-image: linear-gradient(180deg, #83FFEC, #00FFD8) 10 10;
-                border-radius: 24px 3px 3px 24px;
-                background: url(../../assets/FHGL/13.png);
-                background-size: cover;
-                margin-bottom: 102px;
-
-                .con_r1 {
-                    margin: 41px 108px 79px 236px;
-                }
-
-                h2 {
-                    width: 166px;
-                    height: 57px;
-                    font-size: 54px;
-                    text-align: center;
-                    font-family: Impact;
-                    font-weight: 400;
-                    color: #36B1FF;
-
-                    // line-height: 341px;
-                    span {
-                        width: 50px;
-                        height: 27px;
-                        margin-left: 18px;
-                        font-size: 33px;
-                        font-family: Microsoft YaHei;
-                        font-weight: 400;
-                        color: #FFFFFF;
-                    }
-                }
-
-                p {
-                    margin-top: 18px;
-                    width: 291px;
-                    height: 42px;
-                    font-size: 36px;
-                    font-family: Microsoft YaHei;
-                    font-weight: 400;
-                    color: #FFFFFF;
-                    // line-height: 196px;
-                }
-            }
-
-            .con4 {
-                width: 510px;
-                height: 177px;
-                // background: rgba(37, 31, 1, 0.1);
-                // border: 1px solid;
-                // border-image: linear-gradient(180deg, #83FFEC, #00FFD8) 10 10;
-                border-radius: 24px 3px 3px 24px;
-                background: url(../../assets/FHGL/14.png);
-                background-size: cover;
-                margin-bottom: 102px;
-
-                .con_r1 {
-                    margin: 41px 108px 79px 236px;
-                }
-
-                h2 {
-                    width: 166px;
-                    height: 57px;
-                    font-size: 54px;
-                    font-family: Impact;
-                    font-weight: 400;
-                    color: #03FFD8;
-
-                    // line-height: 341px;
-                    span {
-                        width: 50px;
-                        height: 27px;
-                        font-size: 33px;
-                        margin-left: 18px;
-                        font-family: Microsoft YaHei;
-                        font-weight: 400;
-                        color: #FFFFFF;
-                        // line-height: 341px;
-                    }
-                }
-
-                p {
-                    margin-top: 18px;
-                    width: 291px;
-                    height: 42px;
-                    font-size: 36px;
-                    font-family: Microsoft YaHei;
-                    font-weight: 400;
-                    color: #FFFFFF;
-                    // line-height: 196px;
-                }
-            }
+          // line-height: 341px;
+          span {
+            width: 50px;
+            height: 27px;
+            font-size: 33px;
+            margin-left: 18px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #ffffff;
+            // line-height: 341px;
+          }
         }
 
-        .imgBox2 {
-            height: 93px;
-            width: 1156px;
-            margin-bottom: 143px;
-
-            p {
-                position: absolute;
-                color: #fff;
-                top: 768px;
-                left: 50px;
-                font-size: 30px;
-                font-family: "MicrosoftYaHei";
-            }
-        }
-    }
-
-    #main {
-        width: 1098px;
-        height: 600px;
-    }
-
-    .imgBox3 {
-        height: 93px;
-        width: 1156px;
-        margin-bottom: 106px;
-
         p {
-            position: absolute;
-            color: #fff;
-            top: 1600px;
-            left: 50px;
-            font-size: 30px;
-            font-family: "MicrosoftYaHei";
+          margin-top: 18px;
+          width: 208px;
+          height: 41px;
+          font-size: 36px;
+          font-family: Microsoft YaHei;
+          font-weight: 400;
+          color: #ffffff;
+          // line-height: 196px;
         }
+      }
+
+      .con2 {
+        width: 510px;
+        height: 177px;
+        // background: rgba(37, 31, 1, 0.1);
+        // border: 1px solid;
+        // border-image: linear-gradient(180deg, #83FFEC, #00FFD8) 10 10;
+        border-radius: 24px 3px 3px 24px;
+        background: url(../../assets/FHGL/12.png);
+        background-size: cover;
+        margin-bottom: 82px;
+
+        .con_r1 {
+          margin: 41px 108px 79px 236px;
+        }
+
+        h2 {
+          width: 166px;
+          height: 57px;
+          font-size: 54px;
+          font-family: Impact;
+          font-weight: 400;
+          color: #03ffd8;
+
+          // line-height: 341px;
+          span {
+            width: 50px;
+            height: 27px;
+            margin-left: 18px;
+            font-size: 33px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #ffffff;
+          }
+        }
+
+        p {
+          margin-top: 18px;
+          width: 208px;
+          height: 41px;
+          font-size: 36px;
+          font-family: Microsoft YaHei;
+          font-weight: 400;
+          color: #ffffff;
+          // line-height: 196px;
+        }
+      }
+
+      .con3 {
+        width: 510px;
+        height: 177px;
+        // background: rgba(37, 31, 1, 0.1);
+        // border: 1px solid;
+        // border-image: linear-gradient(180deg, #83FFEC, #00FFD8) 10 10;
+        border-radius: 24px 3px 3px 24px;
+        background: url(../../assets/FHGL/13.png);
+        background-size: cover;
+        margin-bottom: 102px;
+
+        .con_r1 {
+          margin: 41px 108px 79px 236px;
+        }
+
+        h2 {
+          width: 166px;
+          height: 57px;
+          font-size: 54px;
+          text-align: center;
+          font-family: Impact;
+          font-weight: 400;
+          color: #36b1ff;
+
+          // line-height: 341px;
+          span {
+            width: 50px;
+            height: 27px;
+            margin-left: 18px;
+            font-size: 33px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #ffffff;
+          }
+        }
+
+        p {
+          margin-top: 18px;
+          width: 291px;
+          height: 42px;
+          font-size: 36px;
+          font-family: Microsoft YaHei;
+          font-weight: 400;
+          color: #ffffff;
+          // line-height: 196px;
+        }
+      }
+
+      .con4 {
+        width: 510px;
+        height: 177px;
+        // background: rgba(37, 31, 1, 0.1);
+        // border: 1px solid;
+        // border-image: linear-gradient(180deg, #83FFEC, #00FFD8) 10 10;
+        border-radius: 24px 3px 3px 24px;
+        background: url(../../assets/FHGL/14.png);
+        background-size: cover;
+        margin-bottom: 102px;
+
+        .con_r1 {
+          margin: 41px 108px 79px 236px;
+        }
+
+        h2 {
+          width: 166px;
+          height: 57px;
+          font-size: 54px;
+          font-family: Impact;
+          font-weight: 400;
+          color: #03ffd8;
+
+          // line-height: 341px;
+          span {
+            width: 50px;
+            height: 27px;
+            font-size: 33px;
+            margin-left: 18px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #ffffff;
+            // line-height: 341px;
+          }
+        }
+
+        p {
+          margin-top: 18px;
+          width: 291px;
+          height: 42px;
+          font-size: 36px;
+          font-family: Microsoft YaHei;
+          font-weight: 400;
+          color: #ffffff;
+          // line-height: 196px;
+        }
+      }
     }
 
-    .fuzailv {
-        ul {
-            // margin: 0px 38px 0px 43px;
-            width: 1236px;
-            height: 2477px;
+    .imgBox2 {
+      height: 93px;
+      width: 1156px;
+      margin-bottom: 143px;
 
-            li {
-                width: 1155px;
-                height: 102px;
-                display: flex;
-                align-items: center;
-                justify-content: space-around;
-                align-items: center;
-
-                p.p_l {
-                    width: 275px;
-                    height: 102px;
-                    font-size: 42px;
-                    font-family: Microsoft YaHei;
-                    font-weight: 400;
-                    color: #FFFFFF;
-                    line-height: 98px;
-                }
-
-                p.p_r {
-                    width: 123px;
-                    height: 102px;
-                    font-size: 42px;
-                    font-family: Microsoft YaHei;
-                    font-weight: bold;
-                    color: #40FFF1;
-                    line-height: 98px;
-                }
-            }
-
-            li.ji {
-                background: rgba(25, 105, 168, 0.4);
-            }
-        }
+      p {
+        position: absolute;
+        color: #fff;
+        top: 768px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
     }
+  }
+
+  #main {
+    width: 1098px;
+    height: 600px;
+  }
+
+  .imgBox3 {
+    height: 93px;
+    width: 1156px;
+    margin-bottom: 106px;
+
+    p {
+      position: absolute;
+      color: #fff;
+      top: 1600px;
+      left: 50px;
+      font-size: 30px;
+      font-family: "MicrosoftYaHei";
+    }
+  }
+
+  .fuzailv {
+    ul {
+      // margin: 0px 38px 0px 43px;
+      width: 1236px;
+      height: 2477px;
+
+      li {
+        width: 1155px;
+        height: 102px;
+        display: flex;
+        align-items: center;
+        justify-content: space-around;
+        align-items: center;
+
+        p.p_l {
+          width: 275px;
+          height: 102px;
+          font-size: 42px;
+          font-family: Microsoft YaHei;
+          font-weight: 400;
+          color: #ffffff;
+          line-height: 98px;
+        }
+
+        p.p_r {
+          width: 123px;
+          height: 102px;
+          font-size: 42px;
+          font-family: Microsoft YaHei;
+          font-weight: bold;
+          color: #40fff1;
+          line-height: 98px;
+        }
+      }
+
+      li.ji {
+        background: rgba(25, 105, 168, 0.4);
+      }
+    }
+  }
 }
 
 .right {
-    width: 1236px;
-    height: 2477px;
-    margin-right: 61px;
-    background-image: url("../../assets/img/侧边.png");
-    padding-right: 59px;
-    padding-right: 45px;
-    box-sizing: border-box;
+  width: 1236px;
+  height: 2477px;
+  margin-right: 61px;
+  background-image: url("../../assets/img/侧边.png");
+  padding-right: 59px;
+  padding-right: 45px;
+  box-sizing: border-box;
 
-    .fhgl2 {
-        position: relative;
-        margin-top: 128px;
+  .fhgl2 {
+    position: relative;
+    margin-top: 128px;
 
-        .imgBox4 {
-            height: 93px;
-            width: 1156px;
-
-            p {
-                position: absolute;
-                color: #fff;
-                top: 20px;
-                right: 1008px;
-                font-size: 30px;
-                font-family: "MicrosoftYaHei";
-            }
-        }
-
-        #bingtu {
-            width: 100%;
-            height: 600px;
-        }
-
-        .imgBox5 {
-            height: 93px;
-            width: 1156px;
-
-            p {
-                width: 240px;
-                position: absolute;
-                color: #fff;
-                top: 718px;
-                right: 896px;
-                font-size: 30px;
-                font-family: "MicrosoftYaHei";
-            }
-
-        }
-
-        #bingtu2 {
-            width: 100%;
-            height: 600px;
-            // background-color: red;
-        }
-
-        .imgBox6 {
-            height: 93px;
-            width: 1156px;
-            margin-bottom: 125px;
-
-            p {
-                position: absolute;
-                color: #fff;
-                top: 1600px;
-                right: 1008px;
-                font-size: 30px;
-                font-family: "MicrosoftYaHei";
-            }
-        }
+    .imgBox4 {
+      height: 93px;
+      width: 1156px;
 
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        right: 1008px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
     }
+
+    #bingtu {
+      width: 100%;
+      height: 600px;
+    }
+
+    .imgBox5 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        width: 240px;
+        position: absolute;
+        color: #fff;
+        top: 718px;
+        right: 896px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    #bingtu2 {
+      width: 100%;
+      height: 600px;
+      // background-color: red;
+    }
+
+    .imgBox6 {
+      height: 93px;
+      width: 1156px;
+      margin-bottom: 125px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 1600px;
+        right: 1008px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+  }
 }
 
 .chart-container {
-    position: relative;
+  position: relative;
+  width: 100%;
+  height: 100%;
+
+  .chart {
+    z-index: 1;
+  }
+
+  .chart,
+  .bg {
     width: 100%;
     height: 100%;
+  }
 
-    .chart {
-        z-index: 1;
-    }
-
-    .chart,
-    .bg {
-        width: 100%;
-        height: 100%;
-    }
-
-    .bg {
-        position: absolute;
-        bottom: -10px;
-        left: 50%;
-        z-index: 0;
-        height: calc(200 / 1080 * 100vh);
-        width: calc(240 / 1920 * 100vw);
-        background: no-repeat center;
-        // background-image: url("~@/assets/imgs/piebg.png");
-        background-size: 100% 100%;
-        transform: translateX(-50%);
-    }
+  .bg {
+    position: absolute;
+    bottom: -10px;
+    left: 50%;
+    z-index: 0;
+    height: calc(200 / 1080 * 100vh);
+    width: calc(240 / 1920 * 100vw);
+    background: no-repeat center;
+    // background-image: url("~@/assets/imgs/piebg.png");
+    background-size: 100% 100%;
+    transform: translateX(-50%);
+  }
 }
 </style>
-  
\ No newline at end of file
diff --git a/src/views/Zhou/KDFH.vue b/src/views/Zhou/KDFH.vue
index b1d8b81..9c6c2a6 100644
--- a/src/views/Zhou/KDFH.vue
+++ b/src/views/Zhou/KDFH.vue
@@ -1,457 +1,453 @@
 <template>
-    <div class="box">
-        <div class="left">
-            <img src="../../assets/img/标题/负荷管理-可调负荷.png" class="title" />
-            <div class="fhgl">
-                <div class="imgBox1">
-                    <img src="../../assets/img/小标题栏.png" class="img" />
-                    <p>可调负荷资源</p>
-                </div>
-
-                <div class="imgBox2">
-                    <img src="../../assets/img/小标题栏.png" class="img" />
-                    <p>负荷调控策略</p>
-                    <div class="table">
-                        <!-- :row-class-name="tableRowClassName" -->
-                        <el-table :data="plan" style="width: 100%">
-                            <el-table-column prop="date1" label="调控等级" align="center">
-                            </el-table-column>
-                            <el-table-column prop="date2" label="目标" align="center">
-                            </el-table-column>
-                            <el-table-column prop="date3" label="执行时长" align="center">
-                            </el-table-column>
-                        </el-table>
-                    </div>
-                </div>
-
-                <div id="main"></div>
-                <div class="imgBox3">
-                    <img src="../../assets/img/小标题栏.png" class="img" />
-                    <p>可调负荷分析</p>
-                </div>
-                <div class="fenxi">
-                    <h2>基线负荷:<span class="title">3138</span>kW</h2>
-                    <div class="one">
-                        <div class="first_left">
-                            <h3>500<span>kW</span></h3>
-                            <p>可参与削锋负荷</p>
-                        </div>
-                        <div class="first_center"></div>
-                        <div class="first_right">
-                            <h3>5100<span>元</span></h3>
-                            <p>单次补贴金额</p>
-                        </div>
-                    </div>
-                    <div class="two">
-                        <div class="first_left">
-                            <h3>300<span>kW</span></h3>
-                            <p>可参与填谷负荷</p>
-                        </div>
-                        <div class="first_center"></div>
-                        <div class="first_right">
-                            <h3>1540<span>元</span></h3>
-                            <p>单次补贴金额</p>
-                        </div>
-                    </div>
-                </div>
-            </div>
+  <div class="box">
+    <div class="left">
+      <img src="../../assets/img/标题/负荷管理-可调负荷.png" class="title" />
+      <div class="fhgl">
+        <div class="imgBox1">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>可调负荷资源</p>
         </div>
-        <div class="right">
-            <div class="fhgl">
-                <div class="imgBox4">
-                    <img src="../../assets/img/小标题栏.png" class="img" />
-                    <p>可调设备</p>
-                </div>
-            </div>
+
+        <div class="imgBox2">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>负荷调控策略</p>
+          <div class="table">
+            <!-- :row-class-name="tableRowClassName" -->
+            <el-table :data="plan" style="width: 100%">
+              <el-table-column prop="date1" label="调控等级" align="center">
+              </el-table-column>
+              <el-table-column prop="date2" label="目标" align="center">
+              </el-table-column>
+              <el-table-column prop="date3" label="执行时长" align="center">
+              </el-table-column>
+            </el-table>
+          </div>
         </div>
+
+        <div id="main"></div>
+        <div class="imgBox3">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>可调负荷分析</p>
+        </div>
+        <div class="fenxi">
+          <h2>基线负荷:<span class="title">3138</span>kW</h2>
+          <div class="one">
+            <div class="first_left">
+              <h3>500<span>kW</span></h3>
+              <p>可参与削锋负荷</p>
+            </div>
+            <div class="first_center"></div>
+            <div class="first_right">
+              <h3>5100<span>元</span></h3>
+              <p>单次补贴金额</p>
+            </div>
+          </div>
+          <div class="two">
+            <div class="first_left">
+              <h3>300<span>kW</span></h3>
+              <p>可参与填谷负荷</p>
+            </div>
+            <div class="first_center"></div>
+            <div class="first_right">
+              <h3>1540<span>元</span></h3>
+              <p>单次补贴金额</p>
+            </div>
+          </div>
+        </div>
+      </div>
     </div>
+    <div class="right">
+      <div class="fhgl">
+        <div class="imgBox4">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>可调设备</p>
+        </div>
+      </div>
+    </div>
+  </div>
 </template>
 <script>
-import * as echarts from 'echarts';
+import * as echarts from "echarts";
 export default {
-    name: "FHGL",
-    data() {
-        return {
-            plan: [
-                {
-                    date1: "一级",
-                    date2: "102.00kW",
-                    date3: "5分钟",
-                },
-                {
-                    date1: "一级",
-                    date2: "29.00kW",
-                    date3: "30分钟",
-                },
-                {
-                    date1: "一级",
-                    date2: "45.00kW",
-                    date3: "1小时",
-                }],
-        }
-    },
-    mounted() {
-    }
-}
+  name: "FHGL",
+  data() {
+    return {
+      plan: [
+        {
+          date1: "一级",
+          date2: "102.00kW",
+          date3: "5分钟",
+        },
+        {
+          date1: "一级",
+          date2: "29.00kW",
+          date3: "30分钟",
+        },
+        {
+          date1: "一级",
+          date2: "45.00kW",
+          date3: "1小时",
+        },
+      ],
+    };
+  },
+  mounted() {},
+};
 </script>
 <style lang="less" scoped>
 .box {
-    width: 100%;
-    height: 100%;
-    padding-top: 500px;
-    box-sizing: border-box;
-    display: flex;
-    justify-content: space-between;
+  width: 100%;
+  height: 100%;
+  padding-top: 500px;
+  box-sizing: border-box;
+  display: flex;
+  background-color: transparent;
+  justify-content: space-between;
 }
 
 /deep/ .left {
-    width: 1237px;
-    height: 2500px;
-    margin-left: 61px;
-    background-image: url("../../assets/img/侧边.png");
-    padding-left: 59px;
-    padding-right: 45px;
-    box-sizing: border-box;
+  width: 1237px;
+  height: 2500px;
+  margin-left: 61px;
+  background-image: url("../../assets/img/侧边.png");
+  padding-left: 59px;
+  padding-right: 45px;
+  box-sizing: border-box;
 
-    .title {
-        margin-top: 15px;
-        margin-left: 60px;
+  .title {
+    margin-top: 15px;
+    margin-left: 60px;
+  }
+
+  .fhgl {
+    position: relative;
+    margin-top: 56px;
+
+    .imgBox1 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
     }
 
-    .fhgl {
-        position: relative;
-        margin-top: 56px;
+    .table {
+      .el-table {
+        background-color: transparent;
+        height: 300px;
+      }
 
-        .imgBox1 {
-            height: 93px;
-            width: 1156px;
+      .el-table::before {
+        background-color: transparent;
+      }
 
-            p {
-                position: absolute;
-                color: #fff;
-                top: 20px;
-                left: 50px;
-                font-size: 30px;
-                font-family: "MicrosoftYaHei";
-            }
+      /deep/.el-table__body {
+        height: 100px;
+      }
+
+      /deep/.table__header thead colgroup {
+        color: #fff;
+        background-color: transparent !important;
+      }
+
+      /deep/.el-table__row {
+        background-color: #102b44 !important;
+        color: #fff;
+      }
+
+      /deep/ .el-table__row--current,
+      .el-table__row--selected {
+        background-color: transparent !important;
+      }
+
+      //表体颜色
+      /deep/.el-table tr {
+        background: #16253b;
+        color: #fff;
+        font-size: 30px;
+        height: 50px;
+
+        .cell {
+          line-height: 50px;
         }
+      }
 
-        .table {
-            .el-table {
-                background-color: transparent;
-                height: 300px;
-            }
+      // 去掉eltable的hover效果
+      ::v-deep .el-table tbody tr:hover > td {
+        background-color: #102b49 !important;
+      }
 
-            .el-table::before {
-                background-color: transparent;
-            }
+      //修改表头颜色
+      ::v-deep .has-gutter {
+        background-color: #102b49;
 
-            /deep/.el-table__body {
-                height: 100px;
-            }
-
-            /deep/.table__header thead colgroup {
-                color: #fff;
-                background-color: transparent !important;
-            }
-
-            /deep/.el-table__row {
-                background-color: #102b44 !important;
-                color: #fff;
-            }
-
-            /deep/ .el-table__row--current,
-            .el-table__row--selected {
-                background-color: transparent !important;
-            }
-
-            //表体颜色
-            /deep/.el-table tr {
-                background: #16253b;
-                color: #fff;
-                font-size: 30px;
-                height: 50px;
-
-                .cell {
-                    line-height: 50px;
-                }
-            }
-
-            // 去掉eltable的hover效果
-            ::v-deep .el-table tbody tr:hover>td {
-                background-color: #102b49 !important;
-            }
-
-            //修改表头颜色
-            ::v-deep .has-gutter {
-                background-color: #102b49;
-
-                th {
-                    background-color: #102b49;
-                }
-            }
-
-            //去掉边框白线
-            ::v-deep .el-table__row>td {
-                border: none;
-            }
-
-            ::v-deep .el-table::before {
-                height: 0px;
-            }
-
-            /* 移除表头的下边框 */
-            ::v-deep .el-table__header th {
-                border-bottom: none;
-            }
+        th {
+          background-color: #102b49;
         }
+      }
 
-        .fenxi {
-            width: 100%;
-            height: auto;
+      //去掉边框白线
+      ::v-deep .el-table__row > td {
+        border: none;
+      }
 
-            h2 {
-                width: 446px;
-                height: 35px;
-                font-size: 22px;
-                font-family: SourceHanSansCN, SourceHanSansCN;
-                font-weight: bold;
-                color: #FFFFFF;
-                line-height: 20px;
-            }
+      ::v-deep .el-table::before {
+        height: 0px;
+      }
 
-            span.title {
-                margin-left: 20px;
-                width: 186px;
-                height: 41px;
-                font-size: 42px;
-                color: #56F671;
-                line-height: 20px;
-                padding-right: 9px;
-            }
-
-            .one {
-                width: 100%;
-                height: 210px;
-                display: flex;
-                justify-content: space-around;
-                align-items: center;
-
-                .first_left {
-                    width: 482px;
-                    height: 167px;
-                    background: url(../../assets/KDFH/组\ 966.png);
-                    opacity: 1;
-
-                    h3 {
-                        width: 97px;
-                        height: 53px;
-                        margin-left: 240px;
-                        margin-top: 20px;
-                        font-size: 59px;
-                        font-family: Impact;
-                        color: #58FD64;
-                        // line-height: 322px;
-                    }
-
-                    p {
-                        margin-top: 15px;
-                        margin-left: 200px;
-                        width: 482px;
-                        height: 67px;
-                        color: #fff;
-                        font-size: 36px;
-                        opacity: 1;
-                        ;
-                    }
-
-                    span {
-                        width: 50px;
-                        height: 27px;
-                        font-size: 33px;
-                        margin-left: 18px;
-                        font-family: Microsoft YaHei;
-                        font-weight: 400;
-                        color: #FFFFFF;
-                    }
-                }
-
-                .first_center {
-                    width: 89px;
-                    height: 54px;
-                    background: url(../../assets/KDFH/箭头\ 9\ 1443.png);
-                    opacity: 1;
-                }
-
-                .first_right {
-                    width: 487px;
-                    height: 168px;
-                    background: url(../../assets/KDFH/组\ 965.png);
-                    border-radius: 24px 3px 3px 24px;
-                    opacity: 1;
-
-                    h3 {
-                        width: 353px;
-                        height: 53px;
-                        margin-left: 240px;
-                        margin-top: 20px;
-                        font-size: 59px;
-                        font-family: Impact;
-                        color: #03FFD8;
-                        // line-height: 322px;
-                    }
-
-                    p {
-                        margin-top: 15px;
-                        margin-left: 240px;
-                        width: 482px;
-                        height: 67px;
-                        color: #fff;
-                        font-size: 36px;
-                        opacity: 1;
-                        ;
-                        // line-height: 185px;
-                    }
-
-                    span {
-                        width: 50px;
-                        height: 27px;
-                        font-size: 33px;
-                        margin-left: 18px;
-                        font-family: Microsoft YaHei;
-                        font-weight: 400;
-                        color: #FFFFFF;
-                        // line-height: 341px;
-                    }
-                }
-            }
-
-            .two {
-                width: 100%;
-                height: 210px;
-                display: flex;
-                justify-content: space-around;
-                align-items: center;
-
-                .first_left {
-                    width: 482px;
-                    height: 167px;
-                    background: url(../../assets/KDFH/组\ 967.png);
-                    opacity: 1;
-
-                    h3 {
-                        width: 97px;
-                        height: 53px;
-                        margin-left: 240px;
-                        margin-top: 20px;
-                        font-size: 59px;
-                        font-family: Impact;
-                        color: #36B1FF;
-                        // line-height: 322px;
-                    }
-
-                    p {
-                        margin-top: 15px;
-                        margin-left: 200px;
-                        width: 482px;
-                        height: 67px;
-                        color: #fff;
-                        font-size: 36px;
-                        opacity: 1;
-                        ;
-                    }
-
-                    span {
-                        width: 50px;
-                        height: 27px;
-                        font-size: 33px;
-                        margin-left: 18px;
-                        font-family: Microsoft YaHei;
-                        font-weight: 400;
-                        color: #FFFFFF;
-                    }
-                }
-
-                .first_center {
-                    width: 89px;
-                    height: 54px;
-                    background: url(../../assets/KDFH/箭头\ 9\ 1443.png);
-                    opacity: 1;
-                }
-
-                .first_right {
-                    width: 487px;
-                    height: 168px;
-                    background: url(../../assets/KDFH/组\ 965.png);
-                    border-radius: 24px 3px 3px 24px;
-                    opacity: 1;
-
-                    h3 {
-                        width: 353px;
-                        height: 53px;
-                        margin-left: 240px;
-                        margin-top: 20px;
-                        font-size: 59px;
-                        font-family: Impact;
-                        color: #03FFD8;
-                        // line-height: 322px;
-                    }
-
-                    p {
-                        margin-top: 15px;
-                        margin-left: 240px;
-                        width: 482px;
-                        height: 67px;
-                        color: #fff;
-                        font-size: 36px;
-                        opacity: 1;
-                        ;
-                        // line-height: 185px;
-                    }
-
-                    span {
-                        width: 50px;
-                        height: 27px;
-                        font-size: 33px;
-                        margin-left: 18px;
-                        font-family: Microsoft YaHei;
-                        font-weight: 400;
-                        color: #FFFFFF;
-                        // line-height: 341px;
-                    }
-                }
-            }
-        }
+      /* 移除表头的下边框 */
+      ::v-deep .el-table__header th {
+        border-bottom: none;
+      }
     }
+
+    .fenxi {
+      width: 100%;
+      height: auto;
+
+      h2 {
+        width: 446px;
+        height: 35px;
+        font-size: 22px;
+        font-family: SourceHanSansCN, SourceHanSansCN;
+        font-weight: bold;
+        color: #ffffff;
+        line-height: 20px;
+      }
+
+      span.title {
+        margin-left: 20px;
+        width: 186px;
+        height: 41px;
+        font-size: 42px;
+        color: #56f671;
+        line-height: 20px;
+        padding-right: 9px;
+      }
+
+      .one {
+        width: 100%;
+        height: 210px;
+        display: flex;
+        justify-content: space-around;
+        align-items: center;
+
+        .first_left {
+          width: 482px;
+          height: 167px;
+          background: url(../../assets/KDFH/组\ 966.png);
+          opacity: 1;
+
+          h3 {
+            width: 97px;
+            height: 53px;
+            margin-left: 240px;
+            margin-top: 20px;
+            font-size: 59px;
+            font-family: Impact;
+            color: #58fd64;
+            // line-height: 322px;
+          }
+
+          p {
+            margin-top: 15px;
+            margin-left: 200px;
+            width: 482px;
+            height: 67px;
+            color: #fff;
+            font-size: 36px;
+            opacity: 1;
+          }
+
+          span {
+            width: 50px;
+            height: 27px;
+            font-size: 33px;
+            margin-left: 18px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #ffffff;
+          }
+        }
+
+        .first_center {
+          width: 89px;
+          height: 54px;
+          background: url(../../assets/KDFH/箭头\ 9\ 1443.png);
+          opacity: 1;
+        }
+
+        .first_right {
+          width: 487px;
+          height: 168px;
+          background: url(../../assets/KDFH/组\ 965.png);
+          border-radius: 24px 3px 3px 24px;
+          opacity: 1;
+
+          h3 {
+            width: 353px;
+            height: 53px;
+            margin-left: 240px;
+            margin-top: 20px;
+            font-size: 59px;
+            font-family: Impact;
+            color: #03ffd8;
+            // line-height: 322px;
+          }
+
+          p {
+            margin-top: 15px;
+            margin-left: 240px;
+            width: 482px;
+            height: 67px;
+            color: #fff;
+            font-size: 36px;
+            opacity: 1;
+            // line-height: 185px;
+          }
+
+          span {
+            width: 50px;
+            height: 27px;
+            font-size: 33px;
+            margin-left: 18px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #ffffff;
+            // line-height: 341px;
+          }
+        }
+      }
+
+      .two {
+        width: 100%;
+        height: 210px;
+        display: flex;
+        justify-content: space-around;
+        align-items: center;
+
+        .first_left {
+          width: 482px;
+          height: 167px;
+          background: url(../../assets/KDFH/组\ 967.png);
+          opacity: 1;
+
+          h3 {
+            width: 97px;
+            height: 53px;
+            margin-left: 240px;
+            margin-top: 20px;
+            font-size: 59px;
+            font-family: Impact;
+            color: #36b1ff;
+            // line-height: 322px;
+          }
+
+          p {
+            margin-top: 15px;
+            margin-left: 200px;
+            width: 482px;
+            height: 67px;
+            color: #fff;
+            font-size: 36px;
+            opacity: 1;
+          }
+
+          span {
+            width: 50px;
+            height: 27px;
+            font-size: 33px;
+            margin-left: 18px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #ffffff;
+          }
+        }
+
+        .first_center {
+          width: 89px;
+          height: 54px;
+          background: url(../../assets/KDFH/箭头\ 9\ 1443.png);
+          opacity: 1;
+        }
+
+        .first_right {
+          width: 487px;
+          height: 168px;
+          background: url(../../assets/KDFH/组\ 965.png);
+          border-radius: 24px 3px 3px 24px;
+          opacity: 1;
+
+          h3 {
+            width: 353px;
+            height: 53px;
+            margin-left: 240px;
+            margin-top: 20px;
+            font-size: 59px;
+            font-family: Impact;
+            color: #03ffd8;
+            // line-height: 322px;
+          }
+
+          p {
+            margin-top: 15px;
+            margin-left: 240px;
+            width: 482px;
+            height: 67px;
+            color: #fff;
+            font-size: 36px;
+            opacity: 1;
+            // line-height: 185px;
+          }
+
+          span {
+            width: 50px;
+            height: 27px;
+            font-size: 33px;
+            margin-left: 18px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #ffffff;
+            // line-height: 341px;
+          }
+        }
+      }
+    }
+  }
 }
 
 .right {
-    width: 1236px;
-    height: 2477px;
-    margin-right: 61px;
-    background-image: url("../../assets/img/侧边.png");
-    padding-right: 59px;
-    padding-right: 45px;
-    box-sizing: border-box;
+  width: 1236px;
+  height: 2477px;
+  margin-right: 61px;
+  background-image: url("../../assets/img/侧边.png");
+  padding-right: 59px;
+  padding-right: 45px;
+  box-sizing: border-box;
 
-    .fhgl {
-        position: relative;
-        margin-top: 56px;
+  .fhgl {
+    position: relative;
+    margin-top: 56px;
 
-        .imgBox4 {
-            height: 93px;
-            width: 1156px;
+    .imgBox4 {
+      height: 93px;
+      width: 1156px;
 
-            p {
-                position: absolute;
-                color: #fff;
-                top: 20px;
-                right: 1008px;
-                font-size: 30px;
-                font-family: "MicrosoftYaHei";
-            }
-        }
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        right: 1008px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
     }
+  }
 }
 </style>
-  
\ No newline at end of file
diff --git a/src/views/lll/NYJCD.vue b/src/views/lll/NYJCD.vue
index 595198f..4e66e16 100644
--- a/src/views/lll/NYJCD.vue
+++ b/src/views/lll/NYJCD.vue
@@ -220,6 +220,7 @@ export default {
   height: 100%;
   padding-top: 500px;
   box-sizing: border-box;
+  background-color: transparent;
   display: flex;
   justify-content: space-between;
 }
diff --git a/src/views/lll/PDS.vue b/src/views/lll/PDS.vue
index 8ae3e80..95fb8e3 100644
--- a/src/views/lll/PDS.vue
+++ b/src/views/lll/PDS.vue
@@ -42,6 +42,7 @@ export default {
   padding-top: 500px;
   box-sizing: border-box;
   display: flex;
+  background-color: transparent;
   justify-content: space-between;
   .left {
     width: 1237px;
diff --git a/src/views/lll/ZNYW.vue b/src/views/lll/ZNYW.vue
index cc54f3a..ce25f82 100644
--- a/src/views/lll/ZNYW.vue
+++ b/src/views/lll/ZNYW.vue
@@ -498,6 +498,7 @@ export default {
   box-sizing: border-box;
   display: flex;
   justify-content: space-between;
+  background-color: transparent;
 }
 .left {
   width: 1237px;