<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", "","06: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,325,370,90],
            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,367,287,360],
            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, 240, 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%;
   background-image: url(../../assets/img/左遮罩.png), url(../../assets/img/右遮罩.png);
  //   background-color: transparent;
  padding-top: 400px;
  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>
