<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="kdfhzy">
        <div class="imgBox1">
          <img src="../../assets/img/小标题栏.png" class="img" />
          <p>可调负荷资源</p>
        </div>
        <div id="kdfhzy">
          <div class="headers">
            <div id="xf"></div>
            <div id="tg"></div>
          </div>
          <div id="fhzy"></div>
        </div>
      </div>
      <div class="fhdkcl">
        <div class="imgBox2">
          <img src="../../assets/img/小标题栏.png" class="img" />
          <p>负荷调控策略</p>
        </div>
        <div id="fhdkcl">
          <div class="table">
            <el-table
              :data="plan"
              style="width: 100%"
              :row-class-name="tableRowClassName"
            >
              <el-table-column
                prop="LevelRegulation"
                label="调控等级"
                align="center"
              >
              </el-table-column>
              <el-table-column prop="Target" label="目标" align="center">
                <template scope="scope">
                  <span class="count">{{ scope.row.Target }}kW</span>
                </template>
              </el-table-column>
              <el-table-column
                prop="ExecutionTime"
                label="执行时长"
                align="center"
              >
              </el-table-column>
            </el-table>
          </div>
        </div>
      </div>
      <div class="kdfhfx">
        <div class="imgBox3">
          <img src="../../assets/img/小标题栏.png" class="img" />
          <p>可调负荷分析</p>
        </div>
        <div class="fenxi">
          <h2>基线负荷:<span class="title">{{kdfhfxlist.BaseLoad}}</span>kW</h2>
          <div class="one">
            <div class="first_left">
              <h3>{{kdfhfxlist.PeakClipping}}<span>kW</span></h3>
              <p>可参与削锋负荷</p>
            </div>
            <div class="first_center"></div>
            <div class="first_right">
              <h3>{{ kdfhfxlist.PeakingAmount }}<span>元</span></h3>
              <p>单次补贴金额</p>
            </div>
          </div>
          <div class="two">
            <div class="first_left">
              <h3>{{kdfhfxlist.ValleyFilling}}<span>kW</span></h3>
              <p>可参与填谷负荷</p>
            </div>
            <div class="first_center"></div>
            <div class="first_right">
              <h3>{{ kdfhfxlist.ValleyFillingAmount }}<span>元</span></h3>
              <p>单次补贴金额</p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="right">
      <div class="kdsb">
        <div class="imgBox4">
          <img src="../../assets/img/小标题栏.png" class="img" />
          <p>可调设备</p>
        </div>
        <div id="kdsb">
          <div class="table">
            <el-table
              :data="devices"
              style="width: 100%"
              :row-class-name="tableRowClassName"
            >
              <el-table-column prop="date1" label="可调设备名称" align="center">
              </el-table-column>
              <el-table-column prop="date2" label="开关状态" align="center">
                <template scope="scope">
                  <img
                    src="../../assets/KDFH/tongguo.png"
                    v-if="scope.row.date2 == true"
                  />
                  <img src="../../assets/KDFH/jinggao.png" v-else />
                </template>
              </el-table-column>
              <el-table-column prop="date3" label="实时负荷" align="center">
                <template scope="scope">
                  <span class="count">{{ scope.row.date3 }}</span>
                  <span class="danwei">kW</span>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
      </div>
      <div class="gxkdfh">
        <div class="imgBox5">
          <img src="../../assets/img/小标题栏.png" class="img" />
          <p>刚性可调负荷</p>
        </div>
        <div class="five">
          <div id="gang"></div>
          <div class="gang_r">
            <div class="g_one">
              <span class="gang_one"></span>
              <span>设备数量：</span>
              <span class="gang_count">{{ ganglist.QuantityFacility }}</span>
              <span>个</span>
            </div>
            <div class="g_two">
              <span class="gang_two"></span>
              <span>刚性可调负荷：</span>
              <span class="gang_count">{{ganglist.Rigidity}}</span>
              <span>kW</span>
            </div>
            <div class="g_three">
              <span class="gang_three"></span>
              <span>总可调负荷：</span>
              <span class="gang_count">{{ ganglist.GrossValue }}</span>
              <span>kW</span>
            </div>
          </div>
        </div>
      </div>
      <div class="rxkdfh">
        <div class="imgBox6">
          <img src="../../assets/img/小标题栏.png" class="img" />
          <p>软性可调负荷</p>
        </div>
        <div class="six">
          <div id="ruan"></div>
          <div class="gang_r">
            <div class="g_one">
              <span class="gang_one"></span>
              <span>设备数量：</span>
              <span class="gang_count">{{roulist.QuantityFacility}}</span>
              <span>个</span>
            </div>
            <div class="g_two">
              <span class="gang_two"></span>
              <span>刚性可调负荷：</span>
              <span class="gang_count">{{ roulist.Flexible }}</span>
              <span>kW</span>
            </div>
            <div class="g_three">
              <span class="gang_three"></span>
              <span>总可调负荷：</span>
              <span class="gang_count">{{ roulist.GrossValue}}</span>
              <span>kW</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import "../../utils/echarts-liquidfill.min.js";
import * as echarts from "echarts";
import { GetKdfhzy, GetKdfhcl } from "@/api/kdfh";
export default {
  name: "FHGL",
  data() {
    return {
      plan: [
        {
          LevelRegulation: "一级",
          Target: "102.00",
          ExecutionTime: "5分钟",
        },
        {
          LevelRegulation: "一级",
          Target: "29.00",
          ExecutionTime: "30分钟",
        },
        {
          LevelRegulation: "一级",
          Target: "45.00",
          ExecutionTime: "1小时",
        },
      ],
      devices: [
        {
          date1: "回转窑",
          date2: true,
          date3: "102.00",
        },
        {
          date1: "熟料收尘",
          date2: true,
          date3: "29.00",
        },
        {
          date1: "篦冷机",
          date2: true,
          date3: "45.00",
        },
        {
          date1: "生料收尘",
          date2: false,
          date3: "102.00",
        },
        {
          date1: "回转窑",
          date2: true,
          date3: "29.00",
        },
        {
          date1: "熟料收尘",
          date2: false,
          date3: "45.00",
        },
      ],
      option: {
        series: [
          {
            // value: 50, //  内容 配合formatter
            type: "liquidFill",
            radius: "70%", // 控制中间圆球的尺寸（此处可以理解为距离外圈圆的距离控制）
            center: ["50%", "50%"],
            data: [
              {
                value: 0.6,
                all:100,
                direction: "left", //波浪方向
              },
            ], // data个数代表波浪数
            backgroundStyle: {
              borderWidth: 1,
              color: "transparent", // 球体本景色
            },
            amplitude: "6%", //波浪的振幅
            // 修改波浪颜色
            color: [
              {
                type: "linear",
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 1,
                    color: "#2EED5C",
                  },
                  {
                    offset: 0,
                    color: "#2EED5C",
                  },
                ],
                globalCoord: false,
              },
            ],
            label: {
              normal: {
                formatter: function(params){
                  console.log(params);
                  return params.value * 100+ "{d|%}";
                },
                rich: {
                  d: {
                    fontSize: 36,
                  },
                },
                textStyle: {
                  fontSize: 48,
                  color: "#fff",
                },
              },
            },
            outline: {
              show: false,
            },
          },
          {
            type: "pie",
            z: 1,
            center: ["50%", "50%"],
            radius: ["72%", "73.5%"], // 控制外圈圆的粗细
            hoverAnimation: false,
            data: [
              {
                name: "",
                value: 500,
                labelLine: {
                  show: false,
                },
                itemStyle: {
                  color: "#2EED5C",
                },
                emphasis: {
                  labelLine: {
                    show: false,
                  },
                  itemStyle: {
                    color: "#2EED5C",
                  },
                },
              },
            ],
          },
          {
            type: "pie",
            zlevel: 0,
            silent: true,
            radius: ["78%", "80%"],
            z: 1,
            label: {
              normal: {
                show: false,
              },
            },
            labelLine: {
              normal: {
                show: false,
              },
            },
            data: this.Pie(),
          },
        ],
      },
      option2: {
        series: [
          {
            // value: 50, //  内容 配合formatter
            type: "liquidFill",
            radius: "70%", // 控制中间圆球的尺寸（此处可以理解为距离外圈圆的距离控制）
            center: ["50%", "50%"],
            data: [
              {
                value: 0.6,
                direction: "left", //波浪方向
              },
            ], // data个数代表波浪数
            backgroundStyle: {
              borderWidth: 1,
              color: "transparent", // 球体本景色
            },
            amplitude: "6%", //波浪的振幅
            // 修改波浪颜色
            color: [
              {
                type: "linear",
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 1,
                    color: "#10A1DD",
                  },
                  {
                    offset: 0,
                    color: "#10A1DD",
                  },
                ],
                globalCoord: false,
              },
            ],
            label: {
              normal: {
                formatter: function(params){
                  console.log(params);
                  return params.value * 100+ "{d|%}";
                },
                rich: {
                  d: {
                    fontSize: 36,
                  },
                },
                textStyle: {
                  fontSize: 48,
                  color: "#fff",
                },
              },
            },
            outline: {
              show: false,
            },
          },
          {
            type: "pie",
            z: 1,
            center: ["50%", "50%"],
            radius: ["72%", "73.5%"], // 控制外圈圆的粗细
            hoverAnimation: false,
            data: [
              {
                name: "",
                value: 500,
                labelLine: {
                  show: false,
                },
                itemStyle: {
                  color: "#10A1DD",
                },
                emphasis: {
                  labelLine: {
                    show: false,
                  },
                  itemStyle: {
                    color: "#10A1DD",
                  },
                },
              },
            ],
          },
          {
            type: "pie",
            zlevel: 0,
            silent: true,
            radius: ["78%", "80%"],
            z: 1,
            label: {
              normal: {
                show: false,
              },
            },
            labelLine: {
              normal: {
                show: false,
              },
            },
            data: this.Pie2(),
          },
        ],
      },

      //可调负荷资源
      xfdata: 53,
      tgdata: 42,
      xflist: [9.3, 7.0, 7.0, 6.0],
      tglist: [9.3, 7.0, 7.0, 6.0],
      //可调负荷分析
      kdfhfxlist: {
        BaseLoad: 19365, //基线负荷
        PeakClipping: 13329, //削峰数值
        ValleyFilling: 6036, //填谷数值
        PeakingAmount: 186472.71, //削峰补贴
        ValleyFillingAmount: 19254.84, //填谷补贴
      },
      // 刚性可调负荷
      ganglist:[],
      // 柔性可调负荷
      roulist:[],
    };
  },
  methods: {
    //U3D交互的绑定
    sendMessageToCSharp() {
      // window.vuplex.postMessage({
      //     type: "Tog",
      //     message: "负荷管理_true",
      // });
      window.vuplex.postMessage("负荷管理-可调负荷");
      this.$router.push("/fhgl");
    },
    tableRowClassName({ row, rowIndex }) {
      if ((rowIndex + 1) % 2 === 0) {
        return "success-row";
      }
      return "";
    },
    Pie() {
      let dataArr = [];
      for (var i = 0; i < 150; i++) {
        if (i % 2 === 0) {
          dataArr.push({
            name: (i + 1).toString(),
            value: 50,
            itemStyle: {
              normal: {
                color: "#2EED5C",
                borderWidth: 0,
                borderColor: "rgba(0,0,0,0)",
              },
            },
          });
        } else {
          dataArr.push({
            name: (i + 1).toString(),
            value: 100,
            itemStyle: {
              normal: {
                color: "rgba(0,0,0,0)",
                borderWidth: 0,
                borderColor: "rgba(0,0,0,0)",
              },
            },
          });
        }
      }
      return dataArr;
    },
    Pie2() {
      let dataArr = [];
      for (var i = 0; i < 150; i++) {
        if (i % 2 === 0) {
          dataArr.push({
            name: (i + 1).toString(),
            value: 50,
            itemStyle: {
              normal: {
                color: "#10A1DD",
                borderWidth: 0,
                borderColor: "rgba(0,0,0,0)",
              },
            },
          });
        } else {
          dataArr.push({
            name: (i + 1).toString(),
            value: 100,
            itemStyle: {
              normal: {
                color: "rgba(0,0,0,0)",
                borderWidth: 0,
                borderColor: "rgba(0,0,0,0)",
              },
            },
          });
        }
      }
      return dataArr;
    },
    xf() {
      const dataArr = [
        {
          value: this.xfdata,
          name: "削锋",
        },
      ];
      const color = new echarts.graphic.LinearGradient(0, 0, 1, 0, [
        {
          offset: 0,
          color: "#136768", // 0% 处的颜色
        },
        {
          offset: 1,
          color: "#28E2EC ", // 100% 处的颜色
        },
      ]);
      const colorSet = [
        [0.81, color],
        [1, "#136768"],
      ];
      const rich = {
        white: {
          fontSize: 40,
          color: "#25D1D9",
          fontWeight: "500",
        },
        bule: {
          fontSize: 60,
          fontFamily: "DINBold",
          color: "#25D1D9",
          fontWeight: "700",
        },
        radius: {
          width: 350,
          height: 80,
          // lineHeight:80,
          borderWidth: 1,
          borderColor: "#0092F2",
          fontSize: 50,
          color: "#fff",
          backgroundColor: "#1B215B",
          borderRadius: 20,
          textAlign: "center",
        },
        size: {
          height: 400,
          padding: [100, 0, 0, 0],
        },
      };
      let option = {
        tooltip: {
          formatter: "{a} <br/>{b} : {c}%",
        },
        series: [
          {
            type: "gauge",
            radius: "70%",
            startAngle: "225",
            endAngle: "-45",
            pointer: {
              show: false,
            },
            detail: {
              formatter: function (value) {
                var num = Math.round(value);
                return "{bule|" + num + "}{white|%}";
              },
              rich: rich,
              offsetCenter: ["0%", "0%"],
            },
            data: dataArr,
            title: {
              show: true,
              color: "#fff",
              offsetCenter: ["0", "75%"],
              fontSize: 30,
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: colorSet,
                width: 24,
                shadowOffsetX: 0,
                shadowOffsetY: 0,
                opacity: 1,
              },
            },
            axisTick: {
              show: false,
            },
            splitLine: {
              show: false,
              length: 35,
              lineStyle: {
                color: "#00377a",
                width: 2,
                type: "solid",
              },
            },
            axisLabel: {
              show: false,
              // label: {
              //     formatter: function (params) {
              //         return "{name|" + params.name + "}"
              //     },
              //     rich: {
              //         name: {
              //             fontSize: 24,
              //             with: 100,
              //             height: 40,
              //             borderRadius: [4, 4, 4, 4],
              //             borderWidth: 1,

              //         }
              //     },
              // },
            },
          },
        ],
      };
      var chartDom = document.getElementById("xf");
      var myChart = echarts.init(chartDom);
      option && myChart.setOption(option);
    },
    tg() {
      const dataArr = [
        {
          value: this.tgdata,
          name: "填谷",
        },
      ];
      const color = new echarts.graphic.LinearGradient(0, 0, 1, 0, [
        {
          offset: 0,
          color: "#00C78B", // 0% 处的颜色
        },
        {
          offset: 1,
          color: "#00FEB4 ", // 100% 处的颜色
        },
      ]);
      const colorSet = [
        [0.7, color],
        [1, "#136768"],
      ];
      const rich = {
        white: {
          fontSize: 40,
          color: "#00FEB4",
          fontWeight: "500",
        },
        bule: {
          fontSize: 60,
          fontFamily: "DINBold",
          color: "#00FEB4",
          fontWeight: "700",
        },
        radius: {
          width: 350,
          height: 80,
          // lineHeight:80,
          borderWidth: 1,
          // borderColor: '#0092F2',
          fontSize: 50,
          color: "#fff",
          // backgroundColor: '#1B215B',
          borderRadius: 20,
          textAlign: "center",
        },
        size: {
          height: 400,
          padding: [100, 0, 0, 0],
        },
      };
      let option = {
        tooltip: {
          formatter: "{a} <br/>{b} : {c}%",
        },
        series: [
          {
            type: "gauge",
            radius: "70%",
            startAngle: "225",
            endAngle: "-45",
            pointer: {
              show: false,
            },
            detail: {
              formatter: function (value) {
                var num = Math.round(value);
                return "{bule|" + num + "}{white|%}";
              },
              rich: rich,
              offsetCenter: ["0%", "0%"],
            },

            data: dataArr,
            title: {
              show: true,
              color: "#fff",
              offsetCenter: ["0", "75%"],
              // width:100,
              // height:4,
              // borderRadius:[4,4,4,4,],
              fontSize: 30,
              // text: '{a|'+ dataArr.value +'}{c|%}',
              // textStyle:{
              //     rich:{
              //         a:{
              //             fontSize:100,
              //         },
              //         c:{

              //         }
              //     }
              // }
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: colorSet,
                width: 24,
                shadowOffsetX: 0,
                shadowOffsetY: 0,
                opacity: 1,
              },
            },
            axisTick: {
              show: false,
            },
            splitLine: {
              show: false,
              length: 35,
              lineStyle: {
                color: "#00377a",
                width: 2,
                type: "solid",
              },
            },
            axisLabel: {
              show: false,
            },
          },
        ],
      };
      var chartDom = document.getElementById("tg");
      var myChart = echarts.init(chartDom);
      option && myChart.setOption(option);
    },
    kdfhzy() {
      let xaxisData = ["秒级", "分钟级", "小时级", "现在"];
      let yaxisData = this.xflist;
      let yaxisData2 = this.tglist;

      const offsetX = 20;
      const offsetY = 10;
      // 绘制左侧面
      const CubeLeft = echarts.graphic.extendShape({
        shape: {
          x: 0,
          y: 0,
        },
        buildPath: function (ctx, shape) {
          // 会canvas的应该都能看得懂，shape是从custom传入的
          const xAxisPoint = shape.xAxisPoint;
          // console.log(shape);
          const c0 = [shape.x, shape.y];
          const c1 = [shape.x - offsetX, shape.y - offsetY];
          const c2 = [xAxisPoint[0] - offsetX, xAxisPoint[1] - offsetY];
          const c3 = [xAxisPoint[0], xAxisPoint[1]];
          ctx
            .moveTo(c0[0], c0[1])
            .lineTo(c1[0], c1[1])
            .lineTo(c2[0], c2[1])
            .lineTo(c3[0], c3[1])
            .closePath();
        },
      });
      // 绘制右侧面
      const CubeRight = echarts.graphic.extendShape({
        shape: {
          x: 0,
          y: 0,
        },
        buildPath: function (ctx, shape) {
          const xAxisPoint = shape.xAxisPoint;
          const c1 = [shape.x, shape.y];
          const c2 = [xAxisPoint[0], xAxisPoint[1]];
          const c3 = [xAxisPoint[0] + offsetX, xAxisPoint[1] - offsetY];
          const c4 = [shape.x + offsetX, shape.y - offsetY];
          ctx
            .moveTo(c1[0], c1[1])
            .lineTo(c2[0], c2[1])
            .lineTo(c3[0], c3[1])
            .lineTo(c4[0], c4[1])
            .closePath();
        },
      });
      // 绘制顶面
      const CubeTop = echarts.graphic.extendShape({
        shape: {
          x: 0,
          y: 0,
        },
        buildPath: function (ctx, shape) {
          const c1 = [shape.x, shape.y];
          const c2 = [shape.x + offsetX, shape.y - offsetY]; // 右点
          const c3 = [shape.x, shape.y - offsetX];
          const c4 = [shape.x - offsetX, shape.y - offsetY];
          ctx
            .moveTo(c1[0], c1[1])
            .lineTo(c2[0], c2[1])
            .lineTo(c3[0], c3[1])
            .lineTo(c4[0], c4[1])
            .closePath();
        },
      });
      // 注册三个面图形
      echarts.graphic.registerShape("CubeLeft", CubeLeft);
      echarts.graphic.registerShape("CubeRight", CubeRight);
      echarts.graphic.registerShape("CubeTop", CubeTop);

      const option = {
        legend: {
          itemWidth: 40,
          itemHeight: 20,
          padding: [0, 10, 0, 10],
          data: [
            {
              name: "削锋",
              textStyle: {
                color: "white",
                fontSize: 24,
              },
            },
            {
              name: "填谷",
              textStyle: {
                color: "white",
                fontSize: 24,
              },
            },
          ],
        },
        // tooltip: {
        //   trigger: "axis",
        //   axisPointer: {
        //     type: "shadow",
        //   },
        //   // formatter: function (params) {
        //   //   const item = params[1]
        //   //   return item.name + ' : ' + item.value
        //   // }
        // },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          data: xaxisData,
          axisLabel: {
            show: true,
            textStyle: {
              color: "#fff",
              fontSize: 20,
            },
            interval: 0, //代表显示所有x轴标签显示
          },
          axisTick: {
            show: true,
          },
        },
        yAxis: {
          type: "value",
          splitArea: false,
          name: "单位:kW",
          nameTextStyle: {
            color: "#fff",
            fontSize: 20,
            padding: 10,
          },
          axisLine: {
            show: false,
            lineStyle: {
              width: 2,
              color: "#CEDDF2",
            },
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: "#fff",
              // type: "dashed",
            },
          },
          axisTick: {
            show: false,
          },
          axisLabel: {
            show: true,
            textStyle: {
              color: "#fff",
              fontSize: 20,
            },
            interval: 0, //代表显示所有x轴标签显示
          },
        },
        series: [
          {
            type: "custom",
            name: "削锋",
            markPoint: {
              data: [],
            },
            renderItem: (params, api) => {
              const location = api.coord([api.value(0), api.value(1)]);
              return {
                type: "group",
                x: 30,
                children: [
                  {
                    type: "CubeLeft",
                    shape: {
                      api,
                      xValue: api.value(0),
                      yValue: api.value(1),
                      x: location[0],
                      y: location[1],
                      xAxisPoint: api.coord([api.value(0), 0]),
                    },
                    style: {
                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        {
                          offset: 0,
                          color: "#4567FF",
                        },
                        {
                          offset: 1,
                          color: "#0CC7FA",
                        },
                      ]),
                    },
                  },
                  {
                    type: "CubeRight",
                    shape: {
                      api,
                      xValue: api.value(0),
                      yValue: api.value(1),
                      x: location[0],
                      y: location[1],
                      xAxisPoint: api.coord([api.value(0), 0]),
                    },
                    style: {
                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        {
                          offset: 0,
                          color: "#115DD5",
                        },
                        {
                          offset: 1,
                          color: "#0574D0",
                        },
                      ]),
                    },
                  },
                  {
                    type: "CubeTop",
                    shape: {
                      api,
                      xValue: api.value(0),
                      yValue: api.value(1),
                      x: location[0],
                      y: location[1],
                      xAxisPoint: api.coord([api.value(0), 0]),
                    },
                    style: {
                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        {
                          offset: 0,
                          color: "#0D7FFB",
                        },
                        {
                          offset: 1,
                          color: "#0440EB",
                        },
                      ]),
                    },
                  },
                ],
              };
            },
            data: yaxisData2,
          },
          {
            type: "custom",
            name: "填谷",
            markPoint: {
              data: [],
            },
            renderItem: (params, api) => {
              const location = api.coord([api.value(0), api.value(1)]);
              return {
                type: "group",
                x: -20,
                children: [
                  {
                    type: "CubeLeft",
                    shape: {
                      api,
                      xValue: api.value(0),
                      yValue: api.value(1),
                      x: location[0],
                      y: location[1],
                      xAxisPoint: api.coord([api.value(0), 0]),
                    },
                    style: {
                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        {
                          offset: 0,
                          color: "#09E63A",
                        },
                        {
                          offset: 1,
                          color: "#39E7C7",
                        },
                      ]),
                    },
                  },
                  {
                    type: "CubeRight",
                    shape: {
                      api,
                      xValue: api.value(0),
                      yValue: api.value(1),
                      x: location[0],
                      y: location[1],
                      xAxisPoint: api.coord([api.value(0), 0]),
                    },
                    style: {
                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        {
                          offset: 0,
                          color: "#00C35A",
                        },
                        {
                          offset: 1,
                          color: "#09C379",
                        },
                      ]),
                    },
                  },
                  {
                    type: "CubeTop",
                    shape: {
                      api,
                      xValue: api.value(0),
                      yValue: api.value(1),
                      x: location[0],
                      y: location[1],
                      xAxisPoint: api.coord([api.value(0), 0]),
                    },
                    style: {
                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        {
                          offset: 0,
                          color: "#05E6A5",
                        },
                        {
                          offset: 1,
                          color: "#12DE63",
                        },
                      ]),
                    },
                  },
                ],
              };
            },
            data: yaxisData,
          },
        ],
      };
      var chartDom = document.getElementById("fhzy");
      var myChart2 = echarts.init(chartDom);
      option && myChart2.setOption(option);
    },
    async getkdfhzy() {
      let res = await GetKdfhzy();
      console.log(res);
    },
    async getkdfhcl() {
      let res = await GetKdfhcl();
      console.log(res);
      this.plan = res.data;
    },
    async getkdfhfx() {
      let res = await GetKdfhfx();
      console.log(res);
      this.kdfhfxlist = res.data[0];
    },
    async getgang() {
      let res = await GetGang();
      console.log(res);
      this.ganglist = res.data[0];
      let percent = (res.data[0].Rigidity /  res.data[0].GrossValue).toFixed(2);
      this.option.series[0].data[0].value =percent;
      this.ganglist=res.data[0];
    },
    async getrou() {
      let res = await GetRou();
      console.log(res);
      this.ganglist = res.data[0];
      let percent = (res.data[0].Flexible /  res.data[0].GrossValue).toFixed(2);
      this.option.series[0].data[0].value =percent;
      this.roulist=res.data[0];
    },
  },
  created() {
    // 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("gang");
    var myChart = echarts.init(chartDom);
    this.option && myChart.setOption(this.option);
    var chartDom2 = document.getElementById("ruan");
    var myChart2 = echarts.init(chartDom2);
    this.option2 && myChart2.setOption(this.option2);
    this.xf();
    this.tg();
    this.kdfhzy();
    // this.getkdfhzy();
  },
};
</script>
<style lang="less" scoped>
.box {
  width: 100%;
  height: 100%;
  padding-top: 400px;
  box-sizing: border-box;
  display: flex;
  position: relative;
  background-image: url(../../assets/img/左遮罩.png),
    url(../../assets/img/右遮罩.png);
  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;
    }
  }
}

/deep/.table {
  // width: 100%;
  // height: 500px;
  margin-top: 50px;

  .count {
    color: #05f0ff;
    font-size: 28px;
    font-weight: 700;
  }
  .danwei {
    margin-left: 10px;
  }
  //表体颜色
  /deep/ .el-table__body-wrapper {
          overflow-y: auto;
          height: 300px;
        }
        //隐藏滚动条
        /deep/ .el-table__body-wrapper::-webkit-scrollbar {
          display: none;
        }
  .el-table tr {
    background: #16253b;
    color: #fff;
    font-size: 30px;
    height: 50px;

    .cell {
      line-height: 50px;
    }
  }

  // 去掉eltable的hover效果
  .el-table tbody tr:hover > td {
    background-color: #0b679e !important;
  }

  //修改表头颜色
  .has-gutter {
    background-color: #1969a8;

    th {
      background-color: #1969a8;
    }
  }

  //奇偶行颜色
  .el-table .success-row {
    background: #184167;
  }

  //去掉边框白线
  .el-table__row > td {
    border: none;
  }

  .el-table::before {
    height: 0px;
  }

  /* 移除表头的下边框 */
  .el-table__header th {
    border-bottom: none;
  }
}

.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;
  }

  .kdfhzy {
    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";
      }
    }

    #kdfhzy {
      width: 100%;
      height: 900px;

      .headers {
        width: 100%;
        height: 320px;
        display: flex;
        justify-content: space-around;

        #xf {
          width: 400px;
          height: 300px;
        }

        #tg {
          width: 400px;
          height: 300px;
        }
      }

      #fhzy {
        width: 100%;
        height: 500px;
      }
    }
  }

  .fhdkcl {
    position: relative;
    margin-top: 56px;

    .imgBox2 {
      height: 93px;
      width: 1156px;

      p {
        position: absolute;
        color: #fff;
        top: 20px;
        left: 50px;
        font-size: 30px;
        font-family: "MicrosoftYaHei";
      }
    }

    #fhdkcl {
      width: 100%;
      height: 360px;
    }
  }

  .kdfhfx {
    position: relative;
    margin-top: 56px;

    .imgBox3 {
      height: 93px;
      width: 1156px;
      margin-bottom: 50px;

      p {
        position: absolute;
        color: #fff;
        top: 20px;
        left: 50px;
        font-size: 30px;
        font-family: "MicrosoftYaHei";
      }
    }

    .fenxi {
      width: 100%;
      height: 600px;

      h2 {
        width: 446px;
        height: 35px;
        font-size: 22px;
        font-family: SourceHanSansCN, SourceHanSansCN;
        font-weight: bold;
        color: #ffffff;
        line-height: 20px;
      }

      span.title {
        margin-left: 20px;
        width: 186px;
        height: 41px;
        font-size: 42px;
        color: #56f671;
        line-height: 20px;
        padding-right: 9px;
      }

      .one {
        width: 100%;
        height: 210px;
        display: flex;
        justify-content: space-around;
        align-items: center;

        .first_left {
          width: 482px;
          height: 167px;
          background: url(../../assets/KDFH/组\ 966.png);
          opacity: 1;

          h3 {
            width: 97px;
            height: 53px;
            margin-left: 208px;
            margin-top: 20px;
            font-size: 59px;
            font-family: Impact;
            color: #58fd64;
            // line-height: 322px;
          }

          p {
            margin-top: 15px;
            margin-left: 200px;
            width: 482px;
            height: 67px;
            color: #fff;
            font-size: 36px;
            opacity: 1;
          }

          span {
            width: 50px;
            height: 27px;
            font-size: 33px;
            margin-left: 18px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            color: #ffffff;
          }
        }

        .first_center {
          width: 89px;
          height: 54px;
          background: url(../../assets/KDFH/箭头\ 9\ 1443.png);
          opacity: 1;
        }

        .first_right {
          width: 487px;
          height: 168px;
          background: url(../../assets/KDFH/组\ 965.png);
          border-radius: 24px 3px 3px 24px;
          opacity: 1;

          h3 {
            // width: 353px;
            height: 53px;
            margin-left: 160px;
            margin-top: 20px;
            font-size: 48px;
            font-family: Impact;
            text-align: center;
            color: #03ffd8;
            // line-height: 322px;
          }

          p {
            margin-top: 15px;
            margin-left: 240px;
            width: 482px;
            height: 67px;
            color: #fff;
            font-size: 36px;
            opacity: 1;
            // line-height: 185px;
          }

          span {
            width: 50px;
            height: 27px;
            font-size: 33px;
            margin-left: 12px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            color: #ffffff;
            // line-height: 341px;
          }
        }
      }
    }

    .two {
      width: 100%;
      height: 210px;
      display: flex;
      justify-content: space-around;
      align-items: center;

      .first_left {
        width: 482px;
        height: 167px;
        background: url(../../assets/KDFH/组\ 967.png);
        opacity: 1;

        h3 {
          width: 97px;
          height: 53px;
          margin-left: 240px;
          margin-top: 20px;
          font-size: 59px;
          font-family: Impact;
          color: #36b1ff;
          // line-height: 322px;
        }

        p {
          margin-top: 15px;
          margin-left: 200px;
          width: 482px;
          height: 67px;
          color: #fff;
          font-size: 36px;
          opacity: 1;
        }

        span {
          width: 50px;
          height: 27px;
          font-size: 33px;
          margin-left: 18px;
          font-family: Microsoft YaHei;
          font-weight: 400;
          color: #ffffff;
        }
      }

      .first_center {
        width: 89px;
        height: 54px;
        background: url(../../assets/KDFH/箭头\ 9\ 1443.png);
        opacity: 1;
      }

      .first_right {
        width: 487px;
        height: 168px;
        background: url(../../assets/KDFH/组\ 965.png);
        border-radius: 24px 3px 3px 24px;
        opacity: 1;

        h3 {
          width: 353px;
          height: 53px;
          margin-left: 160px;
          margin-top: 20px;
          font-size: 48px;
          font-family: Impact;
          text-align: center;
          color: #03ffd8;
          // line-height: 322px;
        }

        p {
          margin-top: 15px;
          margin-left: 240px;
          width: 482px;
          height: 67px;
          color: #fff;
          font-size: 36px;
          opacity: 1;
          // line-height: 185px;
        }

        span {
          width: 50px;
          height: 27px;
          font-size: 33px;
          margin-left: 12px;
          font-family: Microsoft YaHei;
          font-weight: 400;
          color: #ffffff;
          // line-height: 341px;
        }
      }
    }
  }
}

.right {
  width: 1237px;
  height: 2500px;
  margin-right: 61px;
  background-image: url("../../assets/img/侧边.png");
  padding-left: 59px;
  padding-right: 45px;
  box-sizing: border-box;

  .kdsb {
    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";
      }
    }

    #kdsb {
      width: 100%;
      height: 500px;
    }
  }

  .gxkdfh {
    position: relative;
    margin-top: 158px;

    .imgBox5 {
      height: 93px;
      width: 1156px;

      p {
        position: absolute;
        color: #fff;
        top: 20px;
        left: 50px;
        font-size: 30px;
        font-family: "MicrosoftYaHei";
      }
    }

    .five {
      display: flex;
      justify-content: space-around;

      #gang {
        width: 100%;
        height: 540px;
      }

      .gang_r {
        margin-top: 100px;

        .g_one {
          width: 600px;
          height: auto;
          height: 34px;
          font-size: 22px;
          font-family: MicrosoftYaHei, MicrosoftYaHei;
          font-weight: bold;
          display: flex;
          margin-bottom: 100px;
          color: #ffffff;

          .gang_one {
            width: 34px;
            height: 34px;
            display: block;
            background: #2eedaf;
            border-radius: 3px 3px 3px 3px;
            margin-right: 20px;
            opacity: 1;
          }

          .gang_count {
            width: 55px;
            height: 43px;
            font-size: 34px;
            font-family: TRENDS;
            color: #2eedaf;
            line-height: 22px;
          }
        }

        .g_two {
          width: 600px;
          height: auto;
          height: 34px;
          font-size: 22px;
          font-family: MicrosoftYaHei, MicrosoftYaHei;
          font-weight: bold;
          display: flex;
          margin-bottom: 100px;
          color: #ffffff;

          .gang_two {
            width: 34px;
            height: 34px;
            display: block;
            margin-right: 20px;
            background: #2eedd8;
            border-radius: 3px 3px 3px 3px;
            opacity: 1;
          }

          .gang_count {
            width: 55px;
            height: 43px;
            font-size: 34px;
            margin-left: 10px;
            margin-right: 40px;
            font-family: TRENDS;
            color: #2eedd8;
            line-height: 22px;
          }
        }

        .g_three {
          width: 600px;
          height: auto;
          height: 34px;
          font-size: 22px;
          font-family: MicrosoftYaHei, MicrosoftYaHei;
          font-weight: bold;
          display: flex;
          margin-bottom: 100px;
          color: #ffffff;

          .gang_three {
            width: 34px;
            height: 34px;
            margin-right: 20px;
            display: block;
            background: #9acafd;
            border-radius: 3px 3px 3px 3px;
            opacity: 1;
          }

          .gang_count {
            width: 55px;
            height: 43px;
            font-size: 34px;
            margin-left: 10px;
            margin-right: 40px;
            font-family: TRENDS;
            color: #9acafd;
            line-height: 22px;
          }
        }
      }
    }
  }

  .rxkdfh {
    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";
      }
    }

    .six {
      display: flex;
      justify-content: space-around;

      #ruan {
        width: 100%;
        height: 540px;
      }

      .gang_r {
        margin-top: 100px;

        .g_one {
          width: 600px;
          height: auto;
          height: 34px;
          font-size: 22px;
          font-family: MicrosoftYaHei, MicrosoftYaHei;
          font-weight: bold;
          display: flex;
          margin-bottom: 100px;
          color: #ffffff;

          .gang_one {
            width: 34px;
            height: 34px;
            display: block;
            background: #2eedaf;
            border-radius: 3px 3px 3px 3px;
            margin-right: 20px;
            opacity: 1;
          }

          .gang_count {
            width: 55px;
            height: 43px;
            font-size: 34px;
            font-family: TRENDS;
            color: #2eedaf;
            line-height: 22px;
          }
        }

        .g_two {
          width: 600px;
          height: auto;
          height: 34px;
          font-size: 22px;
          font-family: MicrosoftYaHei, MicrosoftYaHei;
          font-weight: bold;
          display: flex;
          margin-bottom: 100px;
          color: #ffffff;

          .gang_two {
            width: 34px;
            height: 34px;
            display: block;
            margin-right: 20px;
            background: #2eedd8;
            border-radius: 3px 3px 3px 3px;
            opacity: 1;
          }

          .gang_count {
            width: 55px;
            height: 43px;
            font-size: 34px;
            margin-left: 10px;
            margin-right: 40px;
            font-family: TRENDS;
            color: #2eedd8;
            line-height: 22px;
          }
        }

        .g_three {
          width: 600px;
          height: auto;
          height: 34px;
          font-size: 22px;
          font-family: MicrosoftYaHei, MicrosoftYaHei;
          font-weight: bold;
          display: flex;
          margin-bottom: 100px;
          color: #ffffff;

          .gang_three {
            width: 34px;
            height: 34px;
            margin-right: 20px;
            display: block;
            background: #9acafd;
            border-radius: 3px 3px 3px 3px;
            opacity: 1;
          }

          .gang_count {
            width: 55px;
            height: 43px;
            font-size: 34px;
            margin-left: 10px;
            margin-right: 40px;
            font-family: TRENDS;
            color: #9acafd;
            line-height: 22px;
          }
        }
      }
    }

    // p {
    //     position: absolute;
    //     color: #fff;
    //     top: 20px;
    //     right: 1008px;
    //     font-size: 30px;
    //     font-family: "MicrosoftYaHei";
    // }
  }
}
</style>
