<template>
  <div class="energy_content">
    <div class="sys_charts" ref="sys_charts"></div>
    <div class="eer">
      <div>用电量:{{ energyMes.totalEle }}kw/h</div>
      <div>用水量:{{ energyMes.totalWater }}吨</div>
    </div>
  </div>
</template>

<script>
import * as echarts from "echarts";
import { eventBus } from "@/utils/evenBus";
import { overView } from "@/api/bigScreen";
import { getDay, getMonth, getYear } from "@/utils/datetime";
export default {
  data() {
    return {
      chartInstance: null,
      option: {},
      isShowModule: false,
      energyCostText: "eer数据",
      dateUse: "",
      useForm: {
        useData: 5,
        maxData: 10, //最大的刻度值
      },
      queryType: "day", //默认页面为day
      dataTime: "",
      energyMes: {},
    };
  },
  created() {
    eventBus.$on("data-sent-queryType", (data) => {
      this.queryType = data;
      console.log("得到的queryType为", this.queryType);
      this.getChartsData();
    });
  },
  mounted() {
    this.initChart();
    this.screenAdapter();
    window.addEventListener("resize", this.screenAdapter);
    this.getChartsData();
  },
  destroyed() {
    //与mounted中的监听对应，在组件销毁的时候，需要将监听器取消掉
    window.removeEventListener("resize", this.screenAdapter);
  },
  methods: {
    // 计算颜色设置的函数
    getAxisLineColor(useData, maxData) {
      // 计算阈值
      // 真实值大于最大值的0.75才使用颜色渐变
      const threshold = maxData * 0.75;

      // 判断实际值是否超过阈值
      if (useData > threshold) {
        return [
          [
            useData / maxData,
            new echarts.graphic.LinearGradient(0, 0, 1, 0, [
              { offset: 0, color: "rgba(0,127,208,1)" },
              { offset: 0.6, color: "rgba(0,127,208,1)" },
              { offset: 1, color: "rgba(69, 235, 167,0.5)" },
            ]),
          ],
          [1, "rgba(28,128,245,.0)"],
        ];
      } else {
        return [
          [
            useData / maxData,
            new echarts.graphic.LinearGradient(0, 0, 1, 0, [
              { offset: 0, color: "rgba(0,127,208,1)" },
              { offset: 0.5, color: "rgba(0,127,208,1)" },
              { offset: 1, color: "rgba(0,127,208,1)" },
            ]),
          ],
          [1, "rgba(28,128,245,.0)"],
        ];
      }
    },
    //初始化chartInstance2对象 折线图
    initChart() {
      // 使用配置函数
      const axisLineColor = this.getAxisLineColor(
        this.useForm.useData,
        this.useForm.maxData
      );
      this.chartInstance = echarts.init(this.$refs.sys_charts);
      // var dataArr = 80;
      this.option = {
        backgroundColor: "transparent",
        tooltip: {
          formatter: "{a} <br/>{b} : {c}",
        },
        series: [
          {
            name: "内部动态阴影",
            type: "gauge",
            center: ["50%", "100%"],
            startAngle: 180,
            endAngle: -0,
            radius: "155%",
            z: 1,
            splitNumber: 10,
            axisLine: {
              lineStyle: {
                color: axisLineColor,
                // 相当于阴影部分的直径
                // width: 80,
              },
            },
            axisLabel: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            splitLine: {
              show: false,
            },
            itemStyle: {
              show: false,
            },
            textStyle: {
              formatter: function (value) {
                if (value !== 0) {
                  return parseInt(value);
                } else {
                  return 0;
                }
              },
              offsetCenter: [0, 5],
              detail: {
                padding: [0, 0, 0, 0],
                // fontSize: titleFontSize * 1.2,
                color: "#EDFFFD",
              },
            },
            title: {
              //标题
              show: false,
            },
            pointer: {
              show: false,
            },
          },
          {
            // 新增的蓝色背景
            name: "蓝色背景",
            type: "gauge",
            center: ["50%", "100%"],
            // 自定义起始角度
            startAngle: 200,
            // 自定义结束角度
            endAngle: -20,
            radius: "155%",
            z: 0, // 确保它在最底层
            splitNumber: 10,
            axisLine: {
              lineStyle: {
                color: [
                  [1, "#01366d"], // 设置背景颜色为蓝色
                ],
              },
            },
            axisLabel: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            splitLine: {
              show: false,
            },
            itemStyle: {
              show: false,
            },
            textStyle: {
              show: false,
            },
            title: {
              show: false,
            },
            pointer: {
              show: false,
            },
          },
          {
            name: "内部大边框",
            type: "gauge",
            z: 2,
            min: 0,
            max: this.useForm.maxData,
            splitNumber: 10,
            radius: "180%",
            center: ["50%", "100%"],
            startAngle: 180,
            endAngle: -0,
            axisLine: {
              lineStyle: {
                color: [[1, "#023B80"]],
                width: 3,
                // 阴影
                shadowColor: "rgba(14,31,73)",
                shadowBlur: 6,
                shadowOffsetX: 0,
              },
            },
            tooltip: {
              show: false,
            },
            axisLabel: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            splitLine: {
              show: false,
            },
            itemStyle: {
              show: false,
            },
            detail: {
              show: false,
            },
            title: {
              //标题
              show: false,
            },
            pointer: {
              show: false,
            },
          },
          {
            name: "指针上的圆",
            //指针上的圆
            type: "pie",
            tooltip: {
              show: false,
            },
            emphasis: {
              scale: false, // 新版的配置
            },
            legendHoverLink: false,
            radius: ["0%", "70%"],
            center: ["50%", "100%"],
            startAngle: 120,
            endAngle: -0,
            labelLine: {
              show: false,
            },
            axisLine: {
              lineStyle: {
                color: [[1, "#F2BF59"]],
                width: 3,
                // 阴影
                shadowColor: "rgba(14,31,73)",
                shadowBlur: 60,
                shadowOffsetX: 0,
              },
            },
            label: {
              show: false,
            },
            data: [
              {
                value: 120,
                itemStyle: {
                  color: "#00223a",
                },
              },
            ],
            z: 4,
          },
          {
            name: "指针上的渐变圆",
            //指针上的圆-渐变
            type: "pie",
            tooltip: {
              show: false,
            },
            emphasis: {
              scale: false, // 新版的配置
            },
            legendHoverLink: false,
            radius: ["0%", "70%"],
            center: ["50%", "100%"],
            startAngle: 120,
            endAngle: 0,
            labelLine: {
              show: false,
            },
            axisLine: {
              lineStyle: {
                color: [[1, "#F2BF59"]],
                width: 3,
                // 阴影
                shadowColor: "rgba(14,31,73)",
                shadowBlur: 60,
                shadowOffsetX: 0,
              },
            },
            z: 5,
          },
          {
            // 指针 数据
            name: this.energyCostText,
            type: "gauge",
            radius: "175%",
            center: ["50%", "100%"],
            min: 0, //最小刻度
            max: this.useForm.maxData, //最大刻度
            splitNumber: 0, //刻度数量
            startAngle: 180,
            endAngle: -0,
            axisLine: {
              show: false,
            }, //仪表盘轴线
            axisLabel: {
              show: true,
              color: "rgba(4,112,212,1)",
              // distance: 16,
              // fontSize: 12,
              formatter: (value) => {
                // 仅显示 0 和最大值
                if (value === 0 || value == this.useForm.maxData) {
                  // 替换 100 为你的最大值
                  return value;
                }
                return "";
              },
            }, //刻度标签-数字。
            axisTick: {
              show: true,
              // splitNumber: 5,
              lineStyle: {
                color: "rgba(4,112,212,1)", //用颜色渐变函数不起作用
                // width: 3,
              },
              // length: 6,
            }, //刻度样式
            splitLine: {
              show: true,
              // length: 6,
              lineStyle: {
                color: "rgba(106, 104, 228, 0.5)", //用颜色渐变函数不起作用
              },
            }, //分隔线样式
            itemStyle: {
              show: false,
            },
            detail: {
              show: false,
            },
            title: {
              //标题
              show: false,
            },
            data: [
              {
                name: this.dateUse,
                value: this.useForm.useData,
              },
            ],
            itemStyle: {
              color: "#EDF85B",
            },
            pointer: {
              show: true,
              length: "60%",
              radius: "30%",
              shape: "triangle", // 使用内置的箭头形状
              //   width: 15, //指针粗细
              itemStyle: {
                color: "rgb(3, 105, 206,0.5)", // 指针的颜色
                // shadowColor: "rgb(104, 194, 247, 1)", // 朦胧光的颜色
                shadowBlur: 20, // 朦胧光的模糊度
              },
            },
            animationDuration: 4000,
            z: 2,
          },
        ],
      };
      //把配置项给实例对象
      this.chartInstance.setOption(this.option, true);
    },
    screenAdapter() {
      const titleFontSize = this.$refs.sys_charts.offsetWidth / 18;
      const adapterOption = {
        series: [
          {
            name: "内部动态阴影",
            type: "gauge",
            axisLine: {
              lineStyle: {
                width: titleFontSize * 1,
              },
            },
          },
          {
            name: "蓝色背景",
            type: "gauge",
            axisLine: {
              lineStyle: {
                width: titleFontSize * 1,
              },
            },
          },
          {
            // 指针 数据
            name: this.energyCostText,
            axisLabel: {
              distance: titleFontSize,
              fontSize: titleFontSize / 4,
            },
            axisTick: {
              distance: -(titleFontSize / 70),
              lineStyle: {
                width: titleFontSize / 20,
              },
              length: titleFontSize / 5,
            }, //刻度样式
            splitLine: {
              distance: -(titleFontSize / 70),
              lineStyle: {
                width: titleFontSize / 20,
              },
              length: titleFontSize / 3.6,
            }, //分隔线样式
            pointer: {
              width: titleFontSize / 2, //指针粗细
            },
          },
        ],
      };
      this.chartInstance.setOption(adapterOption);
      this.chartInstance.resize();
    },
    // 请求的数据
    getChartsData() {
      if (this.queryType === "day") {
        this.dataTime = getDay(0);
      } else if (this.queryType === "month") {
        this.dataTime = getMonth(0);
      } else if (this.queryType === "year") {
        this.dataTime = getYear(0);
      }
      let data = {
        timeType: this.queryType,
        startTime: this.dataTime,
        endTime: this.dataTime,
        systemType: "1",
      };
      overView(data).then((res) => {
        console.log("两个系统参数返回", res);
        if (res.code == 200) {
          this.energyMes = res.rows[0];
          this.useForm.maxData = 50; //最大值
          const { totalEle, totalWater } = res.rows[0];
          if (totalEle === 0 || totalWater === 0) {
            this.useForm.useData = 0;
          } else {
            const result = totalEle / totalWater;
            if (Number.isInteger(result)) {
              this.useForm.useData = result;
            } else {
              this.useForm.useData = parseFloat(result.toFixed(2));
            }
          }
          console.log("热水的eer", this.useForm.useData);
          let that = this;
          // 使用配置函数
          const axisLineColor = this.getAxisLineColor(
            this.useForm.useData,
            this.useForm.maxData
          );
          const titleFontSize = this.$refs.sys_charts.offsetWidth / 25;
          const adapterOption = {
            series: [
              {
                name: "内部动态阴影",
                axisLine: {
                  lineStyle: {
                    color: axisLineColor,
                    // 相当于阴影部分的直径
                    // width: 80,
                  },
                },
              },
              {
                name: "内部大边框",
                min: 0,
                max: this.useForm.maxData,
              },
              {
                name: "指针上的圆",
                data: [
                  {
                    value: 5,
                  },
                ],
              },
              {
                name: "指针上的渐变圆",
                label: {
                  show: true,
                  position: "center", // 文字显示在中心位置
                  offset: [0, -25], // 向上偏移 10 个单位
                  formatter: function () {
                    // 返回 HTML 标签，使用 rich 里定义的样式
                    return `{line1|${that.useForm.useData}}\n{line2| kwh/吨}`;
                  },
                  rich: {
                    line1: {
                      color: "#39dd4f", // 第一行文字颜色
                      fontSize: 20, // 第一行文字大小
                      lineHeight: 34, // 行高，实现间距
                    },
                    line2: {
                      color: "#fff", // 第二行文字颜色
                      fontSize: 14, // 第二行文字大小
                      lineHeight: 24, // 行高，实现间距
                    },
                  },
                },
                data: [
                  {
                    value: 0,
                    itemStyle: {
                      // 设置渐变颜色
                      color: {
                        type: "linear",
                        x: 0,
                        y: 0,
                        x2: 0,
                        y2: 1,
                        colorStops: [
                          {
                            offset: 0,
                            color: "rgb(4,112,212)", // 顶部颜色
                          },
                          {
                            offset: 0.3,
                            color: "rgba(0, 46, 93)", // 底部透明
                          },
                        ],
                        global: false, // 缺省为 false
                      },
                    },
                  },
                ],
              },
              {
                // 指针 数据
                name: this.energyCostText,
                max: this.useForm.maxData, //最大刻度
                axisLabel: {
                  formatter: (value) => {
                    // 仅显示 0 和最大值
                    if (value === 0 || value == this.useForm.maxData) {
                      // 替换 100 为你的最大值
                      return value;
                    }
                    return "";
                  },
                },
                data: [
                  {
                    name: this.dateUse,
                    value: this.useForm.useData,
                  },
                ],
              },
            ],
          };
          this.chartInstance.setOption(adapterOption);
          //手动的调用图标对象的resize才能产生效果
          this.chartInstance.resize();
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.energy_content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100% !important;
  height: 100%;
  padding: 10px 0;
  .sys_charts {
    width: 100%;
    height: 160px;
  }
  .eer {
    width: 80%;
    color: #fff;
    font-size: 18px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    margin: 10px 0;
  }
}
// 媒体查询，适配大于2000px分辨率的大屏样式
@media (min-width: 2000px) {
  .energy_content {
    padding: 0.1rem 0 !important;
    .sys_charts {
      height: 1.6rem !important;
    }
    .eer {
      font-size: 0.18rem !important;
      margin: 0.2rem 0 !important;
    }
  }
}
</style>
