<template>
  <div class="box">
    <div class="left">
      <img class="title" :src="src" />
      <div class="pdsssdh">
        <div class="imgBox">
          <img src="../../../assets/img/小标题栏.png" class="img" />
          <!-- <p>一号生产线实时负荷</p> -->

          <p>{{ $route.query.type }}实时电荷</p>
        </div>
        <div class="data">
          <span :class="res == '年' ? 'active' : ''" @click="res = '年'"
            >年</span
          >
          <span :class="res == '月' ? 'active' : ''" @click="res = '月'"
            >月</span
          >
          <span :class="res == '日' ? 'active' : ''" @click="res = '日'"
            >日</span
          >
        </div>
        <div id="pdsssdh"></div>
      </div>
      <div class="pdsydl">
        <div class="imgBox">
          <img src="../../../assets/img/小标题栏.png" class="img" />
          <!-- <p>一号生产线用电量</p> -->
          <p>{{ $route.query.type }}用电量</p>
        </div>
        <div class="data">
          <span
            :class="type == '总用电' ? 'active' : ''"
            @click="type = '总用电'"
            >总用电</span
          >
          <span
            :class="type == '分时段' ? 'active' : ''"
            @click="type = '分时段'"
            >分时段</span
          >
        </div>
        <div id="pdsydl"></div>
      </div>
      <div class="pdstpt">
        <div class="imgBox">
          <img src="../../../assets/img/小标题栏.png" class="img" />
          <!-- <p>一号生产线用电量对比</p> -->
          <p>{{ $route.query.type }}用电量对比</p>
        </div>
        <div id="pdstpt">
          <div class="data">
            <span :class="res1 == '年' ? 'active' : ''" @click="res1 = '年'"
              >年</span
            >
            <span :class="res1 == '月' ? 'active' : ''" @click="res1 = '月'"
              >月</span
            >
            <span :class="res1 == '日' ? 'active' : ''" @click="res1 = '日'"
              >日</span
            >
          </div>
        </div>
      </div>
    </div>
    <div class="right">
      <div class="pdsjk">
        <div class="imgBox">
          <img src="../../../assets/img/小标题栏.png" class="img" />
          <!-- <p>一号生产线监控</p> -->
          <p>{{ $route.query.type }}监控</p>
        </div>
        <div class="chartBox">
          <div id="pdsjk">
            <div class="title">
              <p>设备数量：</p>
              <span>5</span>
              <p>个</p>
            </div>
            <el-table
              :data="tableData"
              :row-class-name="tableRowClassName"
              style="width: 100%"
              header-cell-style="background-color: #1969A8; color: white"
            >
              <el-table-column label="序号" align="center">
                <template slot-scope="scope">
                  {{ scope.$index + 1 }}
                </template>
              </el-table-column>
              <el-table-column
                prop="date1"
                label="生产工艺名称"
                align="center"
                width="300px"
              >
              </el-table-column>
              <el-table-column prop="date2" label="实时电荷" align="center"
                ><template slot-scope="scope">
                  <span style="color: #58ff70"> {{ scope.row.date2 }}</span
                  ><span>kW</span>
                </template>
              </el-table-column>
              <el-table-column prop="date3" label="今日用电量" align="center"
                ><template slot-scope="scope">
                  <span style="color: #58caff"> {{ scope.row.date3 }}</span
                  ><span>kWh</span>
                </template>
              </el-table-column>
              <el-table-column prop="date2" label="设备状态" align="center"
                ><template slot-scope="scope">
                  <span v-if="scope.row.date4"
                    ><img src="../../../assets/KDFH/tongguo.png"
                  /></span>
                  <span v-else
                    ><img src="../../../assets/KDFH/jinggao.png"
                  /></span>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
      </div>
      <div class="pdsjk">
        <div class="imgBox">
          <img src="../../../assets/img/小标题栏.png" class="img" />
          <!-- <p>一号生产线监控</p> -->
          <p>负荷占比</p>
        </div>
        <div class="chartBox">
          <div id="fhzb"></div>
          <!-- 饼图下面的底座 -->
          <div class="buttomCharts"></div>
        </div>
      </div>
      <div class="pdsjk">
        <div class="imgBox">
          <img src="../../../assets/img/小标题栏.png" class="img" />
          <!-- <p>一号生产线用电排名</p> -->
          <p>{{ $route.query.type }}用电排名</p>
        </div>
        <div class="chartBox">
          <div id="pdsjk">
            <el-table
              :data="tableData1"
              :row-class-name="tableRowClassName"
              style="width: 100%"
              :header-cell-style="getHeaderCellStyle"
            >
              <el-table-column label="序号" align="center">
                <template slot-scope="scope">
                  {{ scope.$index + 1 }}
                </template>
              </el-table-column>
              <el-table-column
                prop="date1"
                label="配电室名称"
                align="center"
                width="300px"
              >
              </el-table-column>
              <el-table-column prop="date2" label="用电量" align="center"
                ><template slot-scope="scope">
                  <span style="color: #58caff"> {{ scope.row.date2 }}</span
                  ><span>kWh</span>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import * as echarts from "echarts";
import highcharts from "highcharts";
export default {
  data() {
    return {
      res: "月",
      res1: "月",
      type: "总用电",
      src: "",
      option1: {
        xAxis: {
          type: "category",
          data: ["1月", "2月", "3月", "4月", "5月"],
          axisLabel: {
            show: true,
            textStyle: {
              color: "#fff",
              fontSize: 20,
            },
            interval: 0, //代表显示所有x轴标签显示
          },
        },
        yAxis: {
          type: "value",
          name: "单位:KW",
          nameTextStyle: {
            color: "#fff",
            fontSize: 20,
            padding: 10,
          },
          min: 0,
          max: 500,
          interval: 100, // 指定刻度间隔
          axisLabel: {
            show: true,
            textStyle: {
              color: "#fff",
              fontSize: 20,
            },
          },
        },
        grid: {
          // 让图表占满容器
          //   top: "5%",
          left: "8%",
          right: "5%",
          bottom: "8%",
        },
        series: [
          {
            type: "line",
            symbol: "circle",
            symbolSize: 20,
            data: [200, 300, 500, 400, 334],
            itemStyle: {
              normal: {
                color: "#00FF00",
                lineStyle: {
                  width: 5, //折线宽度
                  color: "#21FF55", //折线颜色
                },
              },
            },
          },
        ],
      },
      //   option2: {
      //     legend: {
      //       data: [
      //         { icon: "rect", name: "昨日" },
      //         { icon: "rect", name: "今日" },
      //       ],
      //       textStyle: {
      //         color: "#fff",
      //         fontSize: "20px",
      //       },
      //     },
      //     xAxis: {
      //       type: "category",
      //       data: ["1月", "2月", "3月", "4月", "5月"],
      //       axisLabel: {
      //         show: true,
      //         textStyle: {
      //           color: "#fff",
      //           fontSize: 20,
      //         },
      //         interval: 0, //代表显示所有x轴标签显示
      //       },
      //     },
      //     yAxis: {
      //       type: "value",
      //       name: "单位:kWh",
      //       nameTextStyle: {
      //         color: "#fff",
      //         fontSize: 20,
      //         padding: 10,
      //       },
      //       min: 0,
      //       max: 500,
      //       interval: 100, // 指定刻度间隔
      //       axisLabel: {
      //         show: true,
      //         textStyle: {
      //           color: "#fff",
      //           fontSize: 20,
      //         },
      //       },
      //     },
      //     grid: {
      //       // 让图表占满容器
      //       //   top: "5%",
      //       left: "8%",
      //       right: "5%",
      //       bottom: "8%",
      //     },
      //     series: [
      //       {
      //         type: "bar",
      //         name: "昨日",
      //         data: [200, 300, 500, 400, 334],
      //         itemStyle: {
      //           normal: {
      //             color: "#11C3FF",
      //             lineStyle: {
      //               width: 5, //折线宽度
      //               color: "#11C3FF", //折线颜色
      //             },
      //           },
      //         },
      //       },
      //       {
      //         type: "bar",
      //         name: "今日",
      //         data: [200, 300, 500, 400, 334],
      //         itemStyle: {
      //           normal: {
      //             color: "#09E83E",
      //             lineStyle: {
      //               width: 5, //折线宽度
      //               color: "#09E83E", //折线颜色
      //             },
      //           },
      //         },
      //       },
      //     ],
      //   },
      option3: {
        legend: {
          data: [
            { icon: "rect", name: "昨日" },
            { icon: "rect", name: "今日" },
          ],
          textStyle: {
            color: "#fff",
            fontSize: "20px",
          },
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: {
          type: "value",
          boundaryGap: [0, 0.01],
          axisLabel: {
            show: true,
            textStyle: {
              color: "#fff",
              fontSize: 20,
            },
            interval: 0, //代表显示所有x轴标签显示
          },
        },
        yAxis: {
          type: "category",
          data: ["生料磨", "生料收尘", "篦冷机", "熟料收尘", "回转窑"],
          axisLabel: {
            show: true,
            textStyle: {
              color: "#fff",
              fontSize: 20,
            },
          },
        },
        series: [
          {
            name: "昨日",
            type: "bar",
            data: [45, 55, 17, 60, 12],
            itemStyle: {
              color: "#3AF0FF", //折线颜色
            },
          },
          {
            name: "今日",
            type: "bar",
            data: [65, 65, 36, 19, 30],
            itemStyle: {
              color: "#5BFAB1", //折线颜色
            },
          },
        ],
      },
      tableData: [
        {
          date1: "回转窑",
          date2: "20.34",
          date3: "20.34",
          date4: true,
        },
        {
          date1: "熟料收尘",
          date2: "17.42",
          date3: "17.42",
          date4: true,
        },
        {
          date1: "篦冷机",
          date2: "12.22",
          date3: "12.22",
          date4: true,
        },
        {
          date1: "生料收尘",
          date2: "19.19",
          date3: "19.19",
          date4: false,
        },
      ],
      tableData1: [
        {
          date1: "总降电力室",
          date2: "20.34",
        },
        {
          date1: "矿山电力室",
          date2: "17.42",
        },
        {
          date1: "原材料电力室",
          date2: "12.22",
        },
        {
          date1: "一线生料磨电力室",
          date2: "19.19",
        },
        {
          date1: "二线生料磨电力室",
          date2: "17.42",
        },
        {
          date1: "窑尾电力室",
          date2: "12.22",
        },
      ],
      optionData: [
        {
          name: "破碎系统",
          value: 38,
          itemStyle: {
            color: "rgba(1, 224, 239,0.9)",
          },
        },
        {
          name: "生料系统", //名称
          value: 41, //值
          itemStyle: {
            //颜色
            color: "rgba(26, 166, 228,0.9)",
          },
        },
        {
          name: "水泥磨系统",
          value: 21,
          itemStyle: {
            color: "rgba(81, 244, 193,0.9)",
          },
        },
      ],
      option: {},
    };
  },
  watch: {
    // 监听,当路由发生变化的时候执行
    $route: {
      // $route可以用引号，也可以不用引号
      handler(to, from) {
        this.src = require(`../../../assets/img/标题/能源监测-电-${this.$route.query.type}.png`);
      },
      deep: true, // 深度观察监听
      immediate: true, // 第一次初始化渲染就可以监听到
    },
  },
  methods: {
    defineEcharts(dom, option) {
      var chartDom = document.getElementById(dom);
      var myChart = this.$echarts.init(chartDom);
      myChart.setOption(option);
    },
    tableRowClassName({ row, rowIndex }) {
      if ((rowIndex + 1) % 2 === 0) {
        return "success-row";
      }
      return "";
    },
    //配电室用电量  3d
    pdsydl() {
      let xaxisData = ["1月", "2月", "3月", "4月", "5月"];
      let yaxisData = [90, 80, 100, 70, 65];
      let yaxisData2 = [60, 56, 34, 69, 79];

      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: {
          data: [
            {
              name: "昨日",
              textStyle: {
                color: "white",
              },
            },
            {
              name: "今日",
              textStyle: {
                color: "white",
              },
            },
          ],
        },
        // 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: "单位:kWh",
          nameTextStyle: {
            color: "#fff",
            fontSize: 20,
            padding: 10,
          },
          axisLine: {
            show: false,
            lineStyle: {
              width: 2,
              color: "#CEDDF2",
            },
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: "#2A353F",
              type: "dashed",
            },
          },
          axisTick: {
            show: false,
          },
          axisLabel: {
            show: true,
            textStyle: {
              color: "#fff",
              fontSize: 20,
            },
            interval: 0, //代表显示所有x轴标签显示
          },
        },
        series: [
          {
            type: "custom",
            name: "昨日",
            markPoint: {
              data: [
                {
                  type: "max",
                  name: "Max",
                  symbolOffset: [-20, 0],
                  itemStyle: {
                    color: "transparent", // 标注点颜色
                  },
                  // label 用于设置标注点上的文本标签样式
                  label: {
                    color: "#0BE73B", // 文本颜色
                    fontSize: 25,
                  },
                },
              ],
            },
            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,
          },
          {
            type: "custom",
            name: "今日",
            markPoint: {
              data: [
                {
                  type: "max",
                  name: "Max",
                  symbolOffset: [25, 0],
                  itemStyle: {
                    color: "transparent", // 标注点颜色
                  },
                  // label 用于设置标注点上的文本标签样式
                  label: {
                    color: "#24BDF2", // 文本颜色
                    fontSize: 25,
                  },
                },
              ],
            },
            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,
          },
        ],
      };
      this.defineEcharts("pdsydl", option);
    },
    // 监听鼠标事件，实现饼图选中效果（单选），近似实现高亮（放大）效果。
    bindListen(myChart) {
      let that = this;
      let selectedIndex = "";
      let hoveredIndex = "";
      // 监听点击事件，实现选中效果（单选）
      myChart.on("click", function (params) {
        // 从 option.series 中读取重新渲染扇形所需的参数，将是否选中取反。
        let isSelected =
          !that.option.series[params.seriesIndex].pieStatus.selected;
        let isHovered =
          that.option.series[params.seriesIndex].pieStatus.hovered;
        let k = that.option.series[params.seriesIndex].pieStatus.k;
        let startRatio =
          that.option.series[params.seriesIndex].pieData.startRatio;
        let endRatio = that.option.series[params.seriesIndex].pieData.endRatio;
        // 如果之前选中过其他扇形，将其取消选中（对 option 更新）
        if (selectedIndex !== "" && selectedIndex !== params.seriesIndex) {
          that.option.series[selectedIndex].parametricEquation =
            that.getParametricEquation(
              that.option.series[selectedIndex].pieData.startRatio,
              that.option.series[selectedIndex].pieData.endRatio,
              false,
              false,
              k,
              that.option.series[selectedIndex].pieData.value
            );
          that.option.series[selectedIndex].pieStatus.selected = false;
        }
        // 对当前点击的扇形，执行选中/取消选中操作（对 option 更新）
        that.option.series[params.seriesIndex].parametricEquation =
          that.getParametricEquation(
            startRatio,
            endRatio,
            isSelected,
            isHovered,
            k,
            that.option.series[params.seriesIndex].pieData.value
          );
        that.option.series[params.seriesIndex].pieStatus.selected = isSelected;
        // 如果本次是选中操作，记录上次选中的扇形对应的系列号 seriesIndex
        isSelected ? (selectedIndex = params.seriesIndex) : null;
        // 使用更新后的 option，渲染图表
        myChart.setOption(that.option);
      });
      // 监听 mouseover，近似实现高亮（放大）效果
      myChart.on("mouseover", function (params) {
        // 准备重新渲染扇形所需的参数
        let isSelected;
        let isHovered;
        let startRatio;
        let endRatio;
        let k;
        // 如果触发 mouseover 的扇形当前已高亮，则不做操作
        if (hoveredIndex === params.seriesIndex) {
          return;
          // 否则进行高亮及必要的取消高亮操作
        } else {
          // 如果当前有高亮的扇形，取消其高亮状态（对 option 更新）
          if (hoveredIndex !== "") {
            // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 false。
            isSelected = that.option.series[hoveredIndex].pieStatus.selected;
            isHovered = false;
            startRatio = that.option.series[hoveredIndex].pieData.startRatio;
            endRatio = that.option.series[hoveredIndex].pieData.endRatio;
            k = that.option.series[hoveredIndex].pieStatus.k;
            // 对当前点击的扇形，执行取消高亮操作（对 option 更新）
            that.option.series[hoveredIndex].parametricEquation =
              that.getParametricEquation(
                startRatio,
                endRatio,
                isSelected,
                isHovered,
                k,
                that.option.series[hoveredIndex].pieData.value
              );
            that.option.series[hoveredIndex].pieStatus.hovered = isHovered;
            // 将此前记录的上次选中的扇形对应的系列号 seriesIndex 清空
            hoveredIndex = "";
          }
          // 如果触发 mouseover 的扇形不是透明圆环，将其高亮（对 option 更新）
          if (
            params.seriesName !== "mouseoutSeries" &&
            params.seriesName !== "pie2d"
          ) {
            // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 true。
            isSelected =
              that.option.series[params.seriesIndex].pieStatus.selected;
            isHovered = true;
            startRatio =
              that.option.series[params.seriesIndex].pieData.startRatio;
            endRatio = that.option.series[params.seriesIndex].pieData.endRatio;
            k = that.option.series[params.seriesIndex].pieStatus.k;
            // 对当前点击的扇形，执行高亮操作（对 option 更新）
            that.option.series[params.seriesIndex].parametricEquation =
              that.getParametricEquation(
                startRatio,
                endRatio,
                isSelected,
                isHovered,
                k,
                that.option.series[params.seriesIndex].pieData.value + 5
              );
            that.option.series[params.seriesIndex].pieStatus.hovered =
              isHovered;
            // 记录上次高亮的扇形对应的系列号 seriesIndex
            hoveredIndex = params.seriesIndex;
          }
          // 使用更新后的 option，渲染图表
          myChart.setOption(that.option);
        }
      });
      // 修正取消高亮失败的 bug
      myChart.on("globalout", function () {
        // 准备重新渲染扇形所需的参数
        let isSelected;
        let isHovered;
        let startRatio;
        let endRatio;
        let k;
        if (hoveredIndex !== "") {
          // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 true。
          isSelected = that.option.series[hoveredIndex].pieStatus.selected;
          isHovered = false;
          k = that.option.series[hoveredIndex].pieStatus.k;
          startRatio = that.option.series[hoveredIndex].pieData.startRatio;
          endRatio = that.option.series[hoveredIndex].pieData.endRatio;
          // 对当前点击的扇形，执行取消高亮操作（对 option 更新）
          that.option.series[hoveredIndex].parametricEquation =
            that.getParametricEquation(
              startRatio,
              endRatio,
              isSelected,
              isHovered,
              k,
              that.option.series[hoveredIndex].pieData.value
            );
          that.option.series[hoveredIndex].pieStatus.hovered = isHovered;
          // 将此前记录的上次选中的扇形对应的系列号 seriesIndex 清空
          hoveredIndex = "";
        }
        // 使用更新后的 option，渲染图表
        myChart.setOption(that.option);
      });
    },
    //这是一个自定义计算的方法
    fomatFloat(num, n) {
      var f = parseFloat(num);
      if (isNaN(f)) {
        return false;
      }
      f = Math.round(num * Math.pow(10, n)) / Math.pow(10, n); // n 幂
      var s = f.toString();
      var rs = s.indexOf(".");
      //判定如果是整数，增加小数点再补0
      if (rs < 0) {
        rs = s.length;
        s += ".";
      }
      while (s.length <= rs + n) {
        s += "0";
      }
      return s;
    },
    // 生成扇形的曲面参数方程，用于 series-surface.parametricEquation
    getParametricEquation(startRatio, endRatio, isSelected, isHovered, k, h) {
      // 计算
      const midRatio = (startRatio + endRatio) / 2;
      const startRadian = startRatio * Math.PI * 2;
      const endRadian = endRatio * Math.PI * 2;
      const midRadian = midRatio * Math.PI * 2;
      // 如果只有一个扇形，则不实现选中效果。
      if (startRatio === 0 && endRatio === 1) {
        isSelected = false;
      }
      // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
      k = 1;
      // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
      const offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
      const offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
      // 计算高亮效果的放大比例（未高亮，则比例为 1）
      const hoverRate = isHovered ? 1.05 : 1;
      // 返回曲面参数方程
      return {
        u: {
          min: -Math.PI,
          max: Math.PI * 3,
          step: Math.PI / 32,
        },
        v: {
          min: 0,
          max: Math.PI * 2,
          step: Math.PI / 20,
        },
        x: function (u, v) {
          if (u < startRadian) {
            return (
              offsetX +
              Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate
            );
          }
          if (u > endRadian) {
            return (
              offsetX + Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate
            );
          }
          return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
        },
        y: function (u, v) {
          if (u < startRadian) {
            return (
              offsetY +
              Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate
            );
          }
          if (u > endRadian) {
            return (
              offsetY + Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate
            );
          }
          return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
        },
        z: function (u, v) {
          if (u < -Math.PI * 0.5) {
            return Math.sin(u);
          }
          if (u > Math.PI * 2.5) {
            return Math.sin(u) * h * 0.1;
          }
          return Math.sin(v) > 0 ? 1 * h * 0.1 : -1;
        },
      };
    },

    getPie3D(
      pieData,
      internalDiameterRatio,
      distance,
      alpha,
      pieHeight,
      opacity = 1
    ) {
      const series = [];
      let sumValue = 0;
      let startValue = 0;
      let endValue = 0;
      const legendData = [];
      const k =
        typeof internalDiameterRatio !== "undefined"
          ? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
          : 1 / 3;
      // 为每一个饼图数据，生成一个 series-surface 配置
      for (let i = 0; i < pieData.length; i += 1) {
        sumValue += pieData[i].value;
        const seriesItem = {
          name:
            typeof pieData[i].name === "undefined"
              ? `series${i}`
              : pieData[i].name,
          type: "surface",
          parametric: true,
          wireframe: {
            show: false,
          },
          pieData: pieData[i],
          pieStatus: {
            selected: false,
            hovered: false,
            k: k,
          },
        };
        if (typeof pieData[i].itemStyle !== "undefined") {
          const itemStyle = {};
          if (typeof pieData[i].itemStyle.color !== "undefined") {
            itemStyle.color = pieData[i].itemStyle.color;
          }
          if (typeof pieData[i].itemStyle.opacity !== "undefined") {
            itemStyle.opacity = pieData[i].itemStyle.opacity;
          }
          seriesItem.itemStyle = itemStyle;
        }
        series.push(seriesItem);
      }
      // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
      // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
      for (let i = 0; i < series.length; i += 1) {
        endValue = startValue + series[i].pieData.value;
        series[i].pieData.startRatio = startValue / sumValue;
        series[i].pieData.endRatio = endValue / sumValue;
        series[i].parametricEquation = this.getParametricEquation(
          series[i].pieData.startRatio,
          series[i].pieData.endRatio,
          false,
          false,
          k,
          series[i].pieData.value
        );
        startValue = endValue;
        legendData.push(series[i].name);
      }
      return series;
    },
    getbing() {
      const optionsData = [
        {
          name: "生料系统",
          value: 11,
          itemStyle: {
            color: "#0BA0E3",
          },
        },
        {
          name: "水泥磨系统",
          value: 33,
          itemStyle: {
            color: "#01E3F4",
          },
        },
        {
          name: "破碎系统",
          value: 22,
          itemStyle: {
            color: "#50F4C1",
          },
        },
      ];
      const series = this.getPie3D(optionsData, 0.8, 240, 28, 26, 0.5);
      series.push({
        name: "pie2d",
        type: "pie",
        label: {
          opacity: 1,
          fontSize: 14,
          lineHeight: 20,
        },
        labelLine: {
          length: 60,
          length2: 60,
        },
        startAngle: -30, //起始角度，支持范围[0, 360]。
        clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
        radius: ["20%", "50%"],
        center: ["45%", "50%"],
        data: optionsData,
        itemStyle: {
          opacity: 0,
        },
      });
      let option = {
        labelLine: {
          show: true,
          lineStyle: {
            color: "#7BC0CB",
          },
        },

        label: {
          show: true,
          color: "#",
          position: "outside",
          formatter: (params) => {
            var total = 0;
            optionsData.forEach((item, index) => {
              total += item.value;
            });
            let percent = ((params.value / total) * 100).toFixed(2);
            return (
              `{colors|${percent}%}` + "\n" + "\n" + `{name|${params.name}}`
            );
          },
          rich: {
            name: {
              fontSize: 24,
            },
            colors: {
              fontSize: 30,
              color: "#fff",
              fontWeight: 700,
            },
          },
        },
        xAxis3D: {
          min: -1,
          max: 1,
        },
        yAxis3D: {
          min: -1,
          max: 1,
        },
        zAxis3D: {
          min: -1,
          max: 1,
        },
        grid3D: {
          show: false,
          boxHeight: 20, // 三维笛卡尔坐标系在三维场景中的高度
          left: "-15%",
          top: "10%",
          distance: 800,
          viewControl: {
            alpha: 40,
            beta: 40,
            distance: 800, //调整视角到主体的距离，类似调整zoom
            rotateSensitivity: 0, // 设置为0无法旋转
            zoomSensitivity: 0, // 设置为0无法缩放
            panSensitivity: 0, // 设置为0无法平移
            autoRotate: false, // 自动旋转
          },
        },
        series: series,
      };
      this.defineEcharts("fhzb", option);
    },
    defineEcharts(dom, option) {
      var chartDom = document.getElementById(dom);
      var myChart = this.$echarts.init(chartDom, null, {
        devicePixelRatio: 10, // 设置为2或更高的值
      });
      myChart.setOption(option);
    },
    getEchart() {
      var chartDom = document.getElementById("pdsydl");
      var myChart = echarts.init(chartDom);
      var option;
      const sideData = [220, 182, 191, 234, 290];
      const sideData1 = [100, 110, 120, 134, 190];

      option = {
        tooltip: {
          trigger: "axis",
        },
        legend: {
          data: [
            {
              name: "今日",
              textStyle: {
                color: "white",
              },
            },
            {
              name: "昨日",
              textStyle: {
                color: "white",
              },
            },
          ],
        },
        grid: {
          top: "10%",
          bottom: "62%",
          right: "15%",
          containLabel: true,
        },
        toolbox: {
          show: true,
        },
        calculable: true,
        xAxis: [
          {
            type: "category",
            splitLine: {
              show: false,
            },
            data: ["1月", "2月", "3月", "4月", "5月"],
            axisLabel: {
              show: true,
              textStyle: {
                color: "#fff", //X轴文字颜色
              },
            },
          },
        ],
        yAxis: [
          {
            type: "value",
            splitLine: {
              show: false,
            },
            axisLabel: {
              show: true,
              textStyle: {
                color: "#fff", //X轴文字颜色
              },
            },
          },
        ],
        series: [
          {
            name: "昨日",
            tooltip: {
              show: false,
            },
            type: "bar",
            barWidth: 10,
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(
                  0,
                  1,
                  0,
                  0,
                  [
                    {
                      offset: 0,
                      color: "#2d8cf0", // 0% 处的颜色
                    },
                    {
                      offset: 0.6,
                      color: "#2d8cf0", // 60% 处的颜色
                    },
                    {
                      offset: 1,
                      color: "#2d8cf0", // 100% 处的颜色
                    },
                  ],
                  false
                ),
              },
            },
            data: sideData,
            barGap: 10,
          },
          {
            name: "昨日",
            type: "bar",
            barWidth: 10,
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(
                  0,
                  1,
                  0,
                  0,
                  [
                    {
                      offset: 0,
                      color: "#09337C", // 0% 处的颜色
                    },
                    {
                      offset: 0.6,
                      color: "#0761C0", // 60% 处的颜色
                    },
                    {
                      offset: 1,
                      color: "#0575DE", // 100% 处的颜色
                    },
                  ],
                  false
                ),
              },
            },
            barGap: 0,
            data: sideData,
            label: {
              show: true,
              position: "top",
              textStyle: {
                color: "white",
                fontSize: 10,
              },
            },
          },
          {
            name: "昨日",
            tooltip: {
              show: false,
            },
            type: "pictorialBar",
            itemStyle: {
              borderWidth: 1,
              borderColor: "#0571D5",
              color: "#288ef3", // 控制顶部方形的颜色
            },
            symbol: "path://M 0,0 l 90,0 l -60,60 l -90,0 z",
            symbolSize: ["20", "7"], // 第一个值控制顶部方形大小
            symbolOffset: ["-10", "-4"], // 控制顶部放行 左右和上下
            symbolRotate: -16,
            symbolPosition: "end",
            data: sideData,
            z: 3,
          },
          {
            name: "今日",
            tooltip: {
              show: false,
            },
            type: "bar",
            barWidth: 10,
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(
                  0,
                  1,
                  0,
                  0,
                  [
                    {
                      offset: 0,
                      color: "#15a00f", // 0% 处的颜色
                    },
                    {
                      offset: 0.6,
                      color: "#11ad0a", // 60% 处的颜色
                    },
                    {
                      offset: 1,
                      color: "#19c213", // 100% 处的颜色
                    },
                  ],
                  false
                ),
              },
            },
            data: sideData1,
            barGap: 0,
          },
          {
            name: "今日",
            type: "bar",
            barWidth: 10,
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(
                  0,
                  1,
                  0,
                  0,
                  [
                    {
                      offset: 0,
                      color: "#26ec10", // 0% 处的颜色
                    },
                    {
                      offset: 0.6,
                      color: "#26ec10", // 60% 处的颜色
                    },
                    {
                      offset: 1,
                      color: "#26ec10", // 100% 处的颜色
                    },
                  ],
                  false
                ),
              },
            },
            barGap: 0,
            data: sideData1,
            label: {
              show: true,
              position: "top",
              textStyle: {
                color: "white",
                fontSize: 10,
              },
            },
          },
          {
            name: "今日",
            tooltip: {
              show: false,
            },
            type: "pictorialBar",
            itemStyle: {
              borderWidth: 1,
              borderColor: "#fff",
              color: "#26ec10", // 顶部方块的颜色
            },
            symbol: "path://M 0,0 l 90,0 l -60,60 l -90,0 z",
            symbolSize: ["20", "7"], // 第一个值控制顶部方形大小
            symbolOffset: ["10", "-4"], // 控制顶部放行 左右和上下
            symbolRotate: -16,
            symbolPosition: "end",
            data: sideData1,
            z: 3,
          },
        ],
      };

      myChart.setOption(option, true);
    },
  },
  mounted() {
    this.defineEcharts("pdsssdh", this.option1);
    // this.defineEcharts("pdsydl", this.option2);
    this.pdsydl();
    // this.getEchart();
    this.defineEcharts("pdstpt", this.option3);
    // this.init();
    this.getbing();
  },
};
</script>
<style scoped lang="less">
//饼图底座（我也想给你们底座图片 可是我不知道咋给）
.buttomCharts {
  background: center top url("../../../assets/img/底盘.png") no-repeat;
  background-size: 100% 100%;
  height: 280px;
  width: 600px;
  margin-top: -300px;
  margin-left: 22%;
}

.box {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  background-color: transparent;
  background-image: url(../../../assets/img/左遮罩.png),
    url(../../../assets/img/右遮罩.png);
  margin-top: -800px;
  display: flex;
  justify-content: space-between;
  position: relative;
}

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

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

    .data {
      position: absolute;
      font-size: 20px;
      font-family: "DOUYU";
      color: #ffffff;
      line-height: 18px;
      display: flex;
      right: 0;
      top: 120px;
      z-index: 1;
      cursor: pointer;

      span {
        width: 122px;
        height: 38px;
        margin: 10px;
        display: block;
        line-height: 38px;
        text-align: center;
      }

      .active {
        background: linear-gradient(
          to right,
          rgba(33, 76, 124, 0.3) 20%,
          rgba(152, 207, 230, 0.3) 100%,
          rgba(33, 76, 124, 0.3) 20%
        );
      }
    }

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

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

    #pdsssdh {
      width: 1155px;
      height: 500px;
      margin-top: 50px;
    }
  }

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

    .data {
      position: absolute;
      font-size: 20px;
      font-family: "DOUYU";
      color: #ffffff;
      line-height: 18px;
      display: flex;
      right: 0;
      top: 120px;
      z-index: 1;
      cursor: pointer;

      span {
        width: 122px;
        height: 38px;
        margin: 10px;
        display: block;
        line-height: 38px;
        text-align: center;
      }

      .active {
        background: linear-gradient(
          to right,
          rgba(33, 76, 124, 0.3) 20%,
          rgba(152, 207, 230, 0.3) 100%,
          rgba(33, 76, 124, 0.3) 20%
        );
      }
    }

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

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

    #pdsydl {
      width: 1155px;
      height: 600px;
      margin-top: 50px;
    }
  }

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

    .data {
      position: absolute;
      font-size: 20px;
      font-family: "DOUYU";
      color: #ffffff;
      line-height: 18px;
      display: flex;
      right: 0;
      top: 120px;
      z-index: 1;
      cursor: pointer;

      span {
        width: 122px;
        height: 38px;
        margin: 10px;
        display: block;
        line-height: 38px;
        text-align: center;

        .active {
          background: linear-gradient(
            to right,
            rgba(33, 76, 124, 0.3) 20%,
            rgba(152, 207, 230, 0.3) 100%,
            rgba(33, 76, 124, 0.3) 20%
          );
        }
      }
    }

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

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

    #pdstpt {
      width: 1155px;
      height: 600px;
      margin-top: 50px;

      .data {
        position: absolute;
        font-size: 20px;
        font-family: "DOUYU";
        color: #ffffff;
        line-height: 18px;
        display: flex;
        right: 0;
        top: 120px;
        z-index: 1;
        cursor: pointer;

        span {
          width: 122px;
          height: 38px;
          margin: 10px;
          display: block;
          line-height: 38px;
          text-align: center;
        }

        .active {
          background: linear-gradient(
            to right,
            rgba(33, 76, 124, 0.3) 20%,
            rgba(152, 207, 230, 0.3) 100%,
            rgba(33, 76, 124, 0.3) 20%
          );
        }
      }
    }
  }
}

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

  .pdsjk {
    position: relative;
    margin-top: 130px;

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

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

    .chartBox {
      margin-top: 50px;

      #pdsjk {
        width: 1156px;
        height: 400px;

        .title {
          display: flex;
          align-items: center;
          color: #fff;
          font-size: 20px;
          margin-left: 50px;
          margin-bottom: 20px;

          span {
            margin: 0 20px;
            font-size: 30px;
            color: #56f671;
          }
        }

        /deep/.el-table tr {
          background: #16253b;
          color: #fff;
          font-size: 30px;
          height: 50px;

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

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

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

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

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

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

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

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

      #fhzb {
        width: 1156px;
        height: 500px;
      }
    }
  }
}
</style>
