From 87ffd0cfa17415acee6d0e520c311e9c2e2808a7 Mon Sep 17 00:00:00 2001
From: unknown <1535852499@qq.com>
Date: Fri, 1 Dec 2023 18:18:32 +0800
Subject: [PATCH] zyh

---
 .../src/views/Zhou/FHGL_20231201181815.vue    | 1208 +++++++++++++++++
 .../src/views/Zhou/FHGL_20231201181819.vue    | 1208 +++++++++++++++++
 2 files changed, 2416 insertions(+)
 create mode 100644 .history/src/views/Zhou/FHGL_20231201181815.vue
 create mode 100644 .history/src/views/Zhou/FHGL_20231201181819.vue

diff --git a/.history/src/views/Zhou/FHGL_20231201181815.vue b/.history/src/views/Zhou/FHGL_20231201181815.vue
new file mode 100644
index 0000000..9d62c41
--- /dev/null
+++ b/.history/src/views/Zhou/FHGL_20231201181815.vue
@@ -0,0 +1,1208 @@
+<template>
+  <div class="box">
+    <div class="a">
+      <img src="../../assets/img/可调图标--未选中.png" alt="" @click="sendMessageToCSharp" />
+    </div>
+    <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>
+      <div class="fhfx">
+        <div class="imgBox2">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>负荷分析</p>
+        </div>
+        <div id="main"></div>
+      </div>
+      <div class="byqfzl">
+        <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="fhfl">
+        <div class="imgBox4">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>负荷分类</p>
+        </div>
+        <div id="bingtu"></div>
+        <div class="fhzb">
+          <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>
+        <div class="scxfh">
+          <div class="imgBox6">
+            <img src="../../assets/img/小标题栏.png" class="img" />
+            <p>生产线负荷</p>
+          </div>
+          <div>
+            <div class="chartBox">
+              <div class="chartbox" v-for="item in list">
+                <span class="chartname">{{ item.name }}</span>
+                <div class="bigBox">
+                  <div class="smallBox" :style="{ width: `${54 * item.value}px` }"></div>
+                </div>
+                <span>{{ item.value * 100 }}kW</span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import * as echarts from "echarts";
+import "echarts-gl";
+import { getPie3D, getParametricEquation } from "../../utils/fhgl";
+const color = ["#099FE3", "#00DBEB", "#50F4C1"];
+export default {
+  name: "FHGL",
+  data() {
+    return {
+      list: [
+        {
+          name: "1号生产线",
+          value: "15.20",
+        },
+        {
+          name: "2号生产线",
+          value: "9.27",
+        },
+        {
+          name: "3号生产线",
+          value: "6.28",
+        },
+      ],a
+      option: {
+        // tooltip: {
+        //     trigger: 'axis',
+        // },
+        grid: {
+          left: "5%",
+          right: "5%",
+          bottom: "5%",
+          // containLabel: true
+        },
+        // toolbox: {
+        //     feature: {
+        //         saveAsImage: {}
+        //     }
+        // },
+        xAxis: {
+          type: "category",
+          // boundaryGap: false,
+          data: ["02:30", "03:30", "04:30", "05:30", "05:30"],
+          axisLine: {
+            show: true,
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            fontSize: 20,
+            color: "#fff",
+            margin: 15,
+          },
+        },
+        yAxis: {
+          type: "value",
+          // boundaryGap: true,
+          name: "单位:kW",
+          data: ["100", "200", "300", "400", "500"],
+          nameTextStyle: {
+            color: "#fff",
+            fontSize: 20,
+            padding: 10,
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {},
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 20,
+            },
+          },
+        },
+        legend: {
+          data: [
+            {
+              icon: "rect",
+              name: "可调负荷",
+            },
+            {
+              icon: "rect",
+              name: "实时负荷",
+            },
+          ],
+          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",
+            },
+          },
+        ],
+      },
+      optionData: [
+        {
+          name: "1号生产线",
+          value: 176,
+        },
+        {
+          name: "3号生产线",
+          value: 288,
+        },
+        {
+          name: "2号生产线",
+          value: 88,
+        },
+      ],
+      statusChart: null,
+      option1: {},
+    };
+  },
+  methods: {
+    //U3D交互的绑定
+    sendMessageToCSharp() {
+      window.vuplex.postMessage("负荷管理");
+      this.$router.push('/kdfh');
+    },
+    BingTu() {
+      // 复制代码
+      const color = ["#00FF9C", "#2CB2C5", "#00D2FF"];
+      const chartData = [
+        {
+          value: 380,
+          name: "二级",
+          itemStyle: {
+            color: color[0],
+          },
+        },
+        {
+          value: 142,
+          name: "三级",
+          itemStyle: {
+            color: color[1],
+          },
+        },
+        {
+          value: 694,
+          name: "一级",
+          itemStyle: {
+            color: color[2],
+          },
+        },
+      ];
+      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 = {
+        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,
+            label: {
+              show: true,
+              // 这里需要进行修改
+              formatter: function (params) {
+                console.log(params.dataIndex);
+                if (params.name) {
+                  // const col = color[params.dataIndex];
+                  // 样式可以根据需要进行调整
+                  // return '<div style="color: ' + color + '; font-weight: bold; font-size: 14px;">' + params.value + '</div>';
+                  return '{name|' + params.name + "}" + `\n` + "\n" + '{myStyle|' + params.value + "}" + "\t" + "{name|" + "kw" + "}"
+                }
+              },
+              rich: {
+                name: {
+                  color: "#fff",
+                  fontSize: 28,
+                },
+                myStyle: {
+                  color: color[0],
+                  fontWeight: 'bold',
+                  fontSize: 40,
+                },
+              }
+            },
+            labelLine: {
+              length: 88,
+              length2: 20,
+              lineStyle: {
+                width: 2,
+              },
+            },
+          },
+          {
+            type: "pie",
+            radius: ["32%", "34%"],
+            center: ["40%", "50%"],
+            animation: false,
+            hoverAnimation: false,
+            data: [
+              {
+                value: 100,
+              },
+            ],
+            label: {
+              show: false,
+              // 这里需要进行修改
+              // formatter: function (params) {
+              //   return params.chartData1.name + "/n" + params.chartData1.value + "kw"
+              // }
+            },
+            labelLine: {
+              //label线的长度
+              show: true, //数据标签引导线
+              showAbove: true,
+              length: 40,
+              length2: 20,
+              lineStyle: { cap: "round" },
+            },
+            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: {
+                lineHeight: 25,
+                align: "left",
+                fontSize: 30,
+                color: "#fff",
+              },
+              c: {
+                fontSize: 22,
+                // color: '#fff',
+                textShadowColor: "#1c90a6",
+                textShadowOffsetX: 0,
+                textShadowOffsetY: 2,
+                textShadowBlur: 5,
+                color: color[index],
+              },
+              d: {
+                color: color[index],
+                fontSize: 40,
+                align: "left",
+              },
+            },
+          },
+        };
+        item.labelLine = {
+          normal: {
+            length2: 200,
+            lineStyle: {
+              width: 2,
+              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();
+    if (window.vuplex) {
+      addMessageListener();
+    } else {
+      window.addEventListener("vuplexready", addEventListener);
+    } function addEventListener() {
+      window.vuplex.addEventListener("message", function (event) {
+        let json = event.data;
+        console.log("JSON received" + json);
+      })
+    }
+  },
+  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;
+  position: relative;
+  background-color: transparent;
+  justify-content: space-between;
+
+  .a {
+    position: absolute;
+    width: 1300px;
+    z-index: 2;
+    top: 420px;
+    right: 480px;
+    z-index: 100;
+
+    img {
+      margin-right: 102px;
+      pointer-events: all;
+      cursor: pointer;
+    }
+  }
+}
+
+.left {
+  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;
+  }
+
+  .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";
+      }
+    }
+
+    // 左边的第一个
+    .controls {
+      width: 100%;
+      display: flex;
+      justify-content: space-around;
+      flex-wrap: wrap;
+      align-items: center;
+      margin-top: 113px;
+
+      .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;
+        }
+      }
+    }
+  }
+
+  .fhfx {
+    position: relative;
+    margin-top: 56px;
+
+    .imgBox2 {
+      height: 93px;
+      width: 1156px;
+      margin-bottom: 50px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    #main {
+      width: 1098px;
+      height: 600px;
+    }
+  }
+
+  .byqfzl {
+    position: relative;
+    margin-top: 56px;
+
+    .imgBox3 {
+      height: 93px;
+      width: 1156px;
+      margin-bottom: 80px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        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: 1237px;
+  height: 2500px;
+  margin-right: 61px;
+  background-image: url("../../assets/img/侧边.png");
+  padding-left: 59px;
+  padding-right: 45px;
+  box-sizing: border-box;
+
+  .fhfl {
+    position: relative;
+    margin-top: 128px;
+
+    .imgBox4 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    #bingtu {
+      width: 100%;
+      height: 600px;
+    }
+  }
+
+  .fhzb {
+    position: relative;
+    margin-top: 128px;
+
+    .imgBox5 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    // #bingtu2 {
+    //   width: 100%;
+    //   height: 600px;
+    //   // background-color: red;
+    // }
+  }
+
+  .scxfh {
+    position: relative;
+    margin-top: 128px;
+
+    .imgBox6 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    .chartBox {
+      width: 1155px;
+      margin-top: 50px;
+      margin-left: 60px;
+
+      .chartbox {
+        width: 1000%;
+        color: #fff;
+        font-size: 30px;
+        position: relative;
+        align-items: center;
+        display: flex;
+        margin-top: 100px;
+
+        .chartname {
+          position: absolute;
+          left: 24px;
+          top: 10px;
+        }
+
+        .bigBox {
+          width: 961px;
+          height: 65px;
+          background-color: #273546;
+
+          .smallBox {
+            width: 100px;
+            height: 65px;
+            background: linear-gradient(to right,
+                rgba(1, 191, 249, 1) 20%,
+                rgba(68, 161, 201, 1) 100%,
+                rgba(42, 196, 243, 1) 20%);
+          }
+        }
+
+        span:nth-of-type(1) {
+          width: 231px;
+        }
+
+        span:nth-of-type(2) {
+          font-size: 32px;
+          color: #43fff1;
+          margin-left: 20px;
+        }
+      }
+    }
+  }
+}
+
+.chart-container {
+  position: relative;
+  width: 100%;
+  height: 600px;
+
+  .chart {
+    z-index: 1;
+  }
+
+  .chart,
+  .bg {
+    width: 100%;
+    height: 100%;
+  }
+
+  .bg {
+    position: absolute;
+    bottom: 38px;
+    left: 50%;
+    z-index: 0;
+    height: 400px;
+    width: 720px;
+    background: no-repeat center;
+    // background-image: url("~@/assets/imgs/piebg.png");
+    background: center top url("../../assets/img/底盘.png") no-repeat;
+    background-size: 100% 100%;
+    transform: translateX(-50%);
+  }
+}
+</style>
diff --git a/.history/src/views/Zhou/FHGL_20231201181819.vue b/.history/src/views/Zhou/FHGL_20231201181819.vue
new file mode 100644
index 0000000..9c8bd8c
--- /dev/null
+++ b/.history/src/views/Zhou/FHGL_20231201181819.vue
@@ -0,0 +1,1208 @@
+<template>
+  <div class="box">
+    <div class="a">
+      <img src="../../assets/img/可调图标--未选中.png" alt="" @click="sendMessageToCSharp" />
+    </div>
+    <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>
+      <div class="fhfx">
+        <div class="imgBox2">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>负荷分析</p>
+        </div>
+        <div id="main"></div>
+      </div>
+      <div class="byqfzl">
+        <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="fhfl">
+        <div class="imgBox4">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>负荷分类</p>
+        </div>
+        <div id="bingtu"></div>
+        <div class="fhzb">
+          <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>
+        <div class="scxfh">
+          <div class="imgBox6">
+            <img src="../../assets/img/小标题栏.png" class="img" />
+            <p>生产线负荷</p>
+          </div>
+          <div>
+            <div class="chartBox">
+              <div class="chartbox" v-for="item in list">
+                <span class="chartname">{{ item.name }}</span>
+                <div class="bigBox">
+                  <div class="smallBox" :style="{ width: `${54 * item.value}px` }"></div>
+                </div>
+                <span>{{ item.value * 100 }}kW</span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import * as echarts from "echarts";
+import "echarts-gl";
+import { getPie3D, getParametricEquation } from "../../utils/fhgl";
+const color = ["#099FE3", "#00DBEB", "#50F4C1"];
+export default {
+  name: "FHGL",
+  data() {
+    return {
+      list: [
+        {
+          name: "1号生产线",
+          value: "15.20",
+        },
+        {
+          name: "2号生产线",
+          value: "9.27",
+        },
+        {
+          name: "3号生产线",
+          value: "6.28",
+        },
+      ],
+      option: {
+        // tooltip: {
+        //     trigger: 'axis',
+        // },
+        grid: {
+          left: "5%",
+          right: "5%",
+          bottom: "5%",
+          // containLabel: true
+        },
+        // toolbox: {
+        //     feature: {
+        //         saveAsImage: {}
+        //     }
+        // },
+        xAxis: {
+          type: "category",
+          // boundaryGap: false,
+          data: ["02:30", "03:30", "04:30", "05:30", "05:30"],
+          axisLine: {
+            show: true,
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            fontSize: 20,
+            color: "#fff",
+            margin: 15,
+          },
+        },
+        yAxis: {
+          type: "value",
+          // boundaryGap: true,
+          name: "单位:kW",
+          data: ["100", "200", "300", "400", "500"],
+          nameTextStyle: {
+            color: "#fff",
+            fontSize: 20,
+            padding: 10,
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {},
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 20,
+            },
+          },
+        },
+        legend: {
+          data: [
+            {
+              icon: "rect",
+              name: "可调负荷",
+            },
+            {
+              icon: "rect",
+              name: "实时负荷",
+            },
+          ],
+          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",
+            },
+          },
+        ],
+      },
+      optionData: [
+        {
+          name: "1号生产线",
+          value: 176,
+        },
+        {
+          name: "3号生产线",
+          value: 288,
+        },
+        {
+          name: "2号生产线",
+          value: 88,
+        },
+      ],
+      statusChart: null,
+      option1: {},
+    };
+  },
+  methods: {
+    //U3D交互的绑定
+    sendMessageToCSharp() {
+      window.vuplex.postMessage("负荷管理");
+      this.$router.push('/kdfh');
+    },
+    BingTu() {
+      // 复制代码
+      const color = ["#00FF9C", "#2CB2C5", "#00D2FF"];
+      const chartData = [
+        {
+          value: 380,
+          name: "二级",
+          itemStyle: {
+            color: color[0],
+          },
+        },
+        {
+          value: 142,
+          name: "三级",
+          itemStyle: {
+            color: color[1],
+          },
+        },
+        {
+          value: 694,
+          name: "一级",
+          itemStyle: {
+            color: color[2],
+          },
+        },
+      ];
+      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 = {
+        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,
+            label: {
+              show: true,
+              // 这里需要进行修改
+              formatter: function (params) {
+                console.log(params.dataIndex);
+                if (params.name) {
+                  // const col = color[params.dataIndex];
+                  // 样式可以根据需要进行调整
+                  // return '<div style="color: ' + color + '; font-weight: bold; font-size: 14px;">' + params.value + '</div>';
+                  return '{name|' + params.name + "}" + `\n` + "\n" + '{myStyle|' + params.value + "}" + "\t" + "{name|" + "kw" + "}"
+                }
+              },
+              rich: {
+                name: {
+                  color: "#fff",
+                  fontSize: 28,
+                },
+                myStyle: {
+                  color: color[0],
+                  fontWeight: 'bold',
+                  fontSize: 40,
+                },
+              }
+            },
+            labelLine: {
+              length: 88,
+              length2: 20,
+              lineStyle: {
+                width: 2,
+              },
+            },
+          },
+          {
+            type: "pie",
+            radius: ["32%", "34%"],
+            center: ["40%", "50%"],
+            animation: false,
+            hoverAnimation: false,
+            data: [
+              {
+                value: 100,
+              },
+            ],
+            label: {
+              show: false,
+              // 这里需要进行修改
+              // formatter: function (params) {
+              //   return params.chartData1.name + "/n" + params.chartData1.value + "kw"
+              // }
+            },
+            labelLine: {
+              //label线的长度
+              show: true, //数据标签引导线
+              showAbove: true,
+              length: 40,
+              length2: 20,
+              lineStyle: { cap: "round" },
+            },
+            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: {
+                lineHeight: 25,
+                align: "left",
+                fontSize: 30,
+                color: "#fff",
+              },
+              c: {
+                fontSize: 22,
+                // color: '#fff',
+                textShadowColor: "#1c90a6",
+                textShadowOffsetX: 0,
+                textShadowOffsetY: 2,
+                textShadowBlur: 5,
+                color: color[index],
+              },
+              d: {
+                color: color[index],
+                fontSize: 40,
+                align: "left",
+              },
+            },
+          },
+        };
+        item.labelLine = {
+          normal: {
+            length2: 200,
+            lineStyle: {
+              width: 2,
+              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();
+    if (window.vuplex) {
+      addMessageListener();
+    } else {
+      window.addEventListener("vuplexready", addEventListener);
+    } function addEventListener() {
+      window.vuplex.addEventListener("message", function (event) {
+        let json = event.data;
+        console.log("JSON received" + json);
+      })
+    }
+  },
+  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;
+  position: relative;
+  background-color: transparent;
+  justify-content: space-between;
+
+  .a {
+    position: absolute;
+    width: 1300px;
+    z-index: 2;
+    top: 420px;
+    right: 480px;
+    z-index: 100;
+
+    img {
+      margin-right: 102px;
+      pointer-events: all;
+      cursor: pointer;
+    }
+  }
+}
+
+.left {
+  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;
+  }
+
+  .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";
+      }
+    }
+
+    // 左边的第一个
+    .controls {
+      width: 100%;
+      display: flex;
+      justify-content: space-around;
+      flex-wrap: wrap;
+      align-items: center;
+      margin-top: 113px;
+
+      .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;
+        }
+      }
+    }
+  }
+
+  .fhfx {
+    position: relative;
+    margin-top: 56px;
+
+    .imgBox2 {
+      height: 93px;
+      width: 1156px;
+      margin-bottom: 50px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    #main {
+      width: 1098px;
+      height: 600px;
+    }
+  }
+
+  .byqfzl {
+    position: relative;
+    margin-top: 56px;
+
+    .imgBox3 {
+      height: 93px;
+      width: 1156px;
+      margin-bottom: 80px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        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: 1237px;
+  height: 2500px;
+  margin-right: 61px;
+  background-image: url("../../assets/img/侧边.png");
+  padding-left: 59px;
+  padding-right: 45px;
+  box-sizing: border-box;
+
+  .fhfl {
+    position: relative;
+    margin-top: 128px;
+
+    .imgBox4 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    #bingtu {
+      width: 100%;
+      height: 600px;
+    }
+  }
+
+  .fhzb {
+    position: relative;
+    margin-top: 128px;
+
+    .imgBox5 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    // #bingtu2 {
+    //   width: 100%;
+    //   height: 600px;
+    //   // background-color: red;
+    // }
+  }
+
+  .scxfh {
+    position: relative;
+    margin-top: 128px;
+
+    .imgBox6 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    .chartBox {
+      width: 1155px;
+      margin-top: 50px;
+      margin-left: 60px;
+
+      .chartbox {
+        width: 1000%;
+        color: #fff;
+        font-size: 30px;
+        position: relative;
+        align-items: center;
+        display: flex;
+        margin-top: 100px;
+
+        .chartname {
+          position: absolute;
+          left: 24px;
+          top: 10px;
+        }
+
+        .bigBox {
+          width: 961px;
+          height: 65px;
+          background-color: #273546;
+
+          .smallBox {
+            width: 100px;
+            height: 65px;
+            background: linear-gradient(to right,
+                rgba(1, 191, 249, 1) 20%,
+                rgba(68, 161, 201, 1) 100%,
+                rgba(42, 196, 243, 1) 20%);
+          }
+        }
+
+        span:nth-of-type(1) {
+          width: 231px;
+        }
+
+        span:nth-of-type(2) {
+          font-size: 32px;
+          color: #43fff1;
+          margin-left: 20px;
+        }
+      }
+    }
+  }
+}
+
+.chart-container {
+  position: relative;
+  width: 100%;
+  height: 600px;
+
+  .chart {
+    z-index: 1;
+  }
+
+  .chart,
+  .bg {
+    width: 100%;
+    height: 100%;
+  }
+
+  .bg {
+    position: absolute;
+    bottom: 38px;
+    left: 50%;
+    z-index: 0;
+    height: 400px;
+    width: 720px;
+    background: no-repeat center;
+    // background-image: url("~@/assets/imgs/piebg.png");
+    background: center top url("../../assets/img/底盘.png") no-repeat;
+    background-size: 100% 100%;
+    transform: translateX(-50%);
+  }
+}
+</style>