<template>
  <div class="app-container" v-loading="loading">
    <div class="overview-top">
      <div class="overview-top-left">
        <div class="special-div">
          <div class="special-top">
            <div class="special-title">项目概况</div>
          </div>
          <div class="overview-data">
            <div class="overview-data-li">
              <img
                class="overview-img"
                src="../../../assets/images/overview1.png"
                alt=""
              />
              <div class="overview-num">{{ useHotWater }}</div>
              <div class="overview-title">昨日用水量(吨)</div>
            </div>
            <div class="overview-data-li">
              <img
                class="overview-img"
                src="../../../assets/images/overview2.png"
                alt=""
              />
              <div class="overview-num">{{ electValue }}</div>
              <div class="overview-title">昨日用电量(度)</div>
            </div>
            <div class="overview-data-li">
              <img
                class="overview-img"
                src="../../../assets/images/overview3.png"
                alt=""
              />
              <div class="overview-num">{{ electWater }}</div>
              <div class="overview-title">昨日单耗(度/吨)</div>
            </div>
            <div class="overview-data-li">
              <img
                class="overview-img"
                src="../../../assets/images/overview4.png"
                alt=""
              />
              <div class="overview-num">{{ allData }}</div>
              <div class="overview-title">通讯设备设备总数(台)</div>
            </div>
          </div>
        </div>
      </div>
      <div class="overview-top-right">
        <div class="special-div">
          <div class="special-top">
            <div class="special-title">热泵运行状态</div>
          </div>
          <div class="pump-charts" ref="pumpChart_ref"></div>
        </div>
      </div>
    </div>
    <div class="overview-bottom">
      <div class="overview-top-left">
        <div class="special-div">
          <div class="special-top">
            <div class="special-title">当月数据统计</div>
          </div>
          <div class="choice">
            <div
              class="mr20"
              v-for="(item, index) in timeData2"
              :key="index"
              @click="handleEnter(index, $event)"
              :class="{ timeStyle: currentIndex == index }"
            >
              {{ item.title }}
            </div>
          </div>
          <div class="brokenEcharts" ref="analyse_ref"></div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import * as echarts from "echarts";
import { getDay } from "@/utils/datetime";
import { deviceState, hotEnergyQuery } from "@/api/hotWater/overview";
export default {
  data() {
    return {
      electWater: "",
      electValue: "",
      useHotWater: "",
      loading: false,
      chartInstance: null,
      option: {},
      chartData1: "",
      chartData2: "",
      allData: "",

      timeData2: [{ title: "用水量" }, { title: "用电量" }, { title: "单耗" }],
      currentIndex: 0,
      brokenOption: "",
      brokenInstanc: null,
      brokenData1: [],
      brokenData2: [],
      brokenData3: [],
      brokenTime: [],
    };
  },
  mounted() {
    this.initChart();
    this.initChart2();
    this.getTableData();
    window.addEventListener("resize", this.screenAdapter);
    window.addEventListener("resize", this.screenAdapter2);
    this.screenAdapter();
    // this.screenAdapter2();
    this.pumpEchartsData();
  },
  destroyed() {
    //取消监听器
    window.removeEventListener("resize", this.screenAdapter);
    window.removeEventListener("resize", this.screenAdapter2);
  },
  methods: {
    // 饼图自适应
    screenAdapter() {
      //自己定义的比较合适的适配大小,2.6  mes_ref是图表盒子
      const titleFontSize = this.$refs.pumpChart_ref.offsetWidth / 30;
      //因为option可以多次配置的，所以这里的option只需要写 需要配置大小的相关数据
      const adapterOption = {
        title: {
          subtextStyle: {
            fontSize: titleFontSize,
          },
        },
      };
      //记得重新给配置项给实例对象。只要实例对象.chartInstance不变，option就可以多次配置不同的条件。也可以配置一个dataoption只写需要从后台请求的数据相关
      this.chartInstance.setOption(adapterOption);
      //手动的调用图标对象的resize才能产生效果
      this.chartInstance.resize();
    },

    // 获取热泵运行状态
    pumpEchartsData() {
      let data = {
        systemType: 1,
      };
      deviceState(data).then((res) => {
        if (res.rows) {
          console.log("进行赋值", res.rows);
          this.chartData1 = res.rows[0].pumpOnline;
          this.chartData2 = parseInt(
            res.rows[0].pumpNum - res.rows[0].pumpOnline
          );
          this.allData = res.rows[0].pumpNum;
          const titleFontSize =
            (this.$refs.pumpChart_ref.offsetWidth / 100) * 2;
          const colorList = ["#ffe21e", "#08c8ff"]; // 提取颜色列表
          const adapterOption = {
            tooltip: {
              trigger: "item",
              formatter: "{a} <br/>{b} : {c} ({d}%)",
            },
            //环形图中间文字
            title: {
              subtext: this.allData,
            },
            legend: {
              itemWidth: titleFontSize,
              itemHeight: titleFontSize,
              itemGap: titleFontSize * 2,
              formatter: function (name) {
                var arr = [];
                let data = adapterOption.series[0].data;
                var index = 0;
                var total = 0;
                for (var i = 0; i < data.length; i++) {
                  total += data[i].value;
                  if (data[i].name == name) {
                    index = i;
                  }
                }
                arr.push(
                  "{name|" + name + "}",
                  "{text|" + " " + ":" + " " + "}",
                  "{value|" + data[index].value + "}",
                  "{text|" + " " + "台" + "}"
                );
                return arr.join("");
              },
              textStyle: {
                color: function (name) {
                  const dataSeries = adapterOption.series[1].data; // 数据圆的data
                  const index = dataSeries.findIndex(
                    (item) => item.name === name
                  );
                  const colorList = ["#2df499", "#08c8ff"]; // 数据圆的颜色列表
                  return colorList[index];
                },
                rich: {
                  name: {
                    align: "left",
                    fontSize: titleFontSize * 1.6,
                  },
                  text: {
                    align: "left",
                    fontSize: titleFontSize * 1.6,
                  },
                  value: {
                    align: "left",
                    fontSize: titleFontSize * 1.6,
                    // color: function (params) {
                    //   let data = adapterOption.series[1].data;
                    //   return data.itemStyle.color({ dataIndex: params.dataIndex });
                    // },
                  },
                  percentage: {
                    align: "left",
                    fontSize: titleFontSize * 2,
                    // color: function (params) {
                    //   let data = adapterOption.series[1].data;
                    //   return data.itemStyle.color({ dataIndex: params.dataIndex });
                    // },
                  },
                },
              },
            },
            series: [
              {
                name: "热泵运行状态:",
                data: [
                  { value: this.chartData1, name: "运行" },
                  { value: this.chartData2, name: "不运行" },
                ],
                itemStyle: {
                  color: function (params) {
                    var colorList = ["#2df499", "#08c8ff"];
                    return colorList[params.dataIndex];
                  },
                  // borderWidth: 5,
                  borderColor: "#002a56",
                },
              },
              {
                data: [
                  { value: this.chartData1, name: "运行" },
                  { value: this.chartData2, name: "不运行" },
                ],
              },
            ],
          };
          this.chartInstance.setOption(adapterOption);
          this.chartInstance.resize();
        } else {
          this.allData = 0;
          const titleFontSize =
            (this.$refs.pumpChart_ref.offsetWidth / 100) * 2;
          const adapterOption = {
            tooltip: {
              trigger: "item",
              formatter: "{a} <br/>{b} : {c} ({d}%)",
            },
            //环形图中间文字
            title: {
              subtext: 0,
            },
            legend: {
              itemWidth: titleFontSize,
              itemHeight: titleFontSize,
              itemGap: titleFontSize * 2,
              formatter: function (name) {
                var arr = [];
                let data = adapterOption.series[0].data;
                var index = 0;
                var total = 0;
                for (var i = 0; i < data.length; i++) {
                  total += data[i].value;
                  if (data[i].name == name) {
                    index = i;
                  }
                }
                arr.push(
                  "{name|" + name + "}",
                  "{text|" + " " + ":" + " " + "}",
                  "{value|" + data[index].value + "}",
                  "{text|" + " " + "台" + "}"
                );
                return arr.join("");
              },
              textStyle: {
                color: function (name) {
                  const dataSeries = adapterOption.series[1].data; // 数据圆的data
                  const index = dataSeries.findIndex(
                    (item) => item.name === name
                  );
                  const colorList = ["#2df499", "#08c8ff"]; // 数据圆的颜色列表
                  return colorList[index];
                },
                rich: {
                  name: {
                    align: "left",
                    fontSize: titleFontSize * 1.6,
                  },
                  text: {
                    align: "left",
                    fontSize: titleFontSize * 1.6,
                  },
                  value: {
                    align: "left",
                    fontSize: titleFontSize * 1.6,
                    // color: function (params) {
                    //   let data = adapterOption.series[1].data;
                    //   return data.itemStyle.color({ dataIndex: params.dataIndex });
                    // },
                  },
                  percentage: {
                    align: "left",
                    fontSize: titleFontSize * 1.6,
                    // color: function (params) {
                    //   let data = adapterOption.series[1].data;
                    //   return data.itemStyle.color({ dataIndex: params.dataIndex });
                    // },
                  },
                },
              },
            },
            series: [
              {
                name: "热泵运行状态:",
                data: [
                  { value: 0, name: "运行" },
                  { value: 0, name: "不运行" },
                ],
                itemStyle: {
                  color: function (params) {
                    var colorList = ["#2df499", "#08c8ff"];
                    return colorList[params.dataIndex];
                  },
                  // borderWidth: 5,
                  borderColor: "#002a56",
                },
              },
              {
                data: [
                  { value: 0, name: "运行" },
                  { value: 0, name: "不运行" },
                ],
              },
            ],
          };
          this.chartInstance.setOption(adapterOption);
          this.chartInstance.resize();
        }
      });
    },
    //初始化chartInstance对象-饼图
    initChart() {
      this.chartInstance = echarts.init(this.$refs.pumpChart_ref);
      this.option = {
        //环形图中间文字
        title: {
          subtext: this.allData,
          textStyle: {
            color: "#ffffff",
            fontSize: 20,
          },
          subtextStyle: {
            color: "#ffffff",
          },
          textAlign: "center",
          x: "28.5%",
          y: "35%", //距离上边的距离
        },
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b} : {c} ({d}%)",
        },
        //图例
        legend: {
          orient: "vertical", // 垂直分布
          right: "10%", // 位于最右边
          top: "center", // 垂直居中
          //图例文字颜色
          textStyle: {
            color: "#ffffff",
            // fontSize: 18,
          },
        },
        series: [
          // 数据圆
          {
            name: "热泵运行状态:",
            type: "pie",
            radius: ["50%", "62%"],
            center: ["30%", "44%"],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: "center",
            },
            labelLine: {
              show: false,
            },
            itemStyle: {
              color: function (params) {
                var colorList = ["#2df499", "#08c8ff"];
                return colorList[params.dataIndex];
              },
              borderWidth: 5,
              borderColor: "#002a56",
            },
            z: 10, //设置层级更高,否则会被阴影圆遮住
          },
          // 阴影圆
          {
            type: "pie",
            radius: ["40%", "52%"],
            center: ["30%", "44%"],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: "center",
            },
            silent: true,
            labelLine: {
              show: false,
            },
            //颜色
            itemStyle: {
              color: function (colors) {
                var colorList = ["#09596b", "#024e7d"];
                return colorList[colors.dataIndex];
              },
            },
            z: 15,
          },
          // 内圈边框
          {
            // 颜色
            color: ["#305376"],
            type: "pie",
            silent: true, //鼠标移入不显示内容，不触发鼠标事件
            // hoverAnimation: false, //鼠标移入不放大，此属性已被废弃
            // 使用emphasis.scale 是否开启高亮后扇区的放大效果，默认true
            // 这里开启silent: true, 就达到效果了
            // center与非内圈一致
            radius: ["28%", "29%"],
            center: ["30%", "44%"],
            label: {
              show: false,
            },
            data: [
              {
                value: 0,
                name: "",
                itemStyle: {},
              },
            ],
          },
          //  最里面渐变小圆
          {
            // 颜色
            type: "pie",
            silent: true, //鼠标移入不显示内容，不触发鼠标事件
            // hoverAnimation: false, //鼠标移入不放大，此属性已被废弃
            // 使用emphasis.scale 是否开启高亮后扇区的放大效果，默认true
            // 这里开启silent: true, 就达到效果了
            // center与非内圈一致
            radius: ["0%", "29%"],
            center: ["30%", "44%"],
            label: {
              show: false,
            },
            data: [
              {
                value: 0,
                name: "",
                itemStyle: {},
              },
            ],
            itemStyle: {
              color: {
                type: "linear",
                x: 0,
                y: 0,
                x2: 1,
                y2: 1,
                colorStops: [
                  { offset: 0, color: "#002a55" }, // 0% 处的颜色
                  { offset: 1, color: "#0a457a" }, // 100% 处的颜色
                ],
                global: false, // 缺省为 false
              },
            },
          },
        ],
      };
      //把配置项给实例对象
      this.chartInstance.setOption(this.option, true);
    },
    handleEnter(index) {
      this.currentIndex = index;
      this.renderingBroken();
    },
    //初始化chartInstance2对象 折线图
    initChart2() {
      this.brokenInstanc = echarts.init(this.$refs.analyse_ref);
      this.brokenOption = {
        tooltip: {
          trigger: "axis",
        },
        legend: {
          show: false,
          selectedMode: false, // 是否允许图例进行点击
          icon: "cricle", //图例样式，可以自行查看样式选择
          //图例文字颜色
          textStyle: {
            color: "#ffff",
            fontSize: 16, //这里改字体大小
          },
          // left: "73%",
          left: "66%",
          top: "0",
          //图例距离饼图的距离
          itemGap: 5,
          itemWidth: 10,
          itemHeight: 5,
        },

        grid: {
          top: "4%",
          left: "3%",
          right: "4%",
          bottom: "5%",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          //设置为true代表离零刻度间隔一段距离
          boundaryGap: true,
          // 修饰刻度标签的颜色即x坐标数据
          axisLabel: {
            // interval: 0, //强制显示所有x轴数据
            // rotate: 30, //x轴坐标字体倾斜30度
            color: "rgba(255, 255, 255, 1)",
            fontSize: 14, // 设置字体大小，可根据需要调整
          },
          axisTick: {
            show: false, // 不显示坐标轴刻度线
          },
          // x坐标轴的颜色
          axisLine: {
            show: true,
            lineStyle: {
              color: "#365576",
            },
          },
          splitLine: {
            lineStyle: {
              color: "#e2e6f0",
            },
          }, //x轴分割线
          data: this.brokenTime,
        },
        yAxis: {
          min: 0,
          // max:20,
          // // // min:'dataMin',
          // // // max:'dataMax',
          // name: "kwh", // 第一个 y 轴的单位描述
          // 设置 name 的样式
          nameTextStyle: {
            color: "rgba(255, 255, 255, 1)",
            fontSize: 12,
          },
          miniInterval: 5,
          type: "value",
          // 修饰刻度标签的颜色即y坐标数据
          axisLabel: {
            color: "rgba(255, 255, 255, 1)",
          },
          // 显示y坐标轴
          axisLine: {
            show: true,
            lineStyle: {
              color: "#365576", // 设置 y 轴线的颜色
            },
            fontSize: 14, // 设置字体大小，可根据需要调整
          },
          //y轴分割线段数
          // splitNumber: 10,
          // 修改y轴分割线的颜色
          splitLine: {
            lineStyle: {
              color: "#1a3d62", // 设置分割线的颜色
              type: "dashed", // 设置分割线为虚线
            },
          },
        },
        series: [
          {
            type: "line",
            // 拐点大小
            symbolSize: 8,
            data: this.brokenData1,
            //折线颜色
            itemStyle: {
              color: "#d48e17", //折线点的颜色
              lineStyle: {
                color: "#d48e17", //折线的颜色
              },
            },
          },
        ],
      };
      //把配置项给实例对象
      this.brokenInstanc.setOption(this.brokenOption, true);
    },
    //折线图自适应
    screenAdapter2() {
      console.log("没有数据吗", this.brokenData1);
      //自己定义的比较合适的适配大小,2.6  mes_ref是图表盒子
      const titleFontSize = this.$refs.analyse_ref.offsetWidth / 130;
      const adapterOption = {};
      //记得重新给配置项给实例对象。只要实例对象.chartInstance不变，option就可以多次配置不同的条件。也可以配置一个dataoption只写需要从后台请求的数据相关
      this.brokenInstanc.setOption(adapterOption);
      //手动的调用图标对象的resize才能产生效果
      this.brokenInstanc.resize();
    },
    // 获取折线图数据
    getTableData() {
      let date = new Date();
      let year = date.getFullYear().toString();
      let month =
        date.getMonth() + 1 < 10
          ? "0" + (date.getMonth() + 1).toString()
          : (date.getMonth() + 1).toString();
      let day =
        date.getDate() < 10
          ? "0" + date.getDate().toString()
          : date.getDate().toString();
      let start = year + "-" + month + "-01"; //当月第一天
      let end = year + "-" + month + "-" + day; //当天

      const dailyParams = {
        type: 1,
        buildingId: "所有",
        page: 1,
        limit: 31,
        startDate: getDay(-1),
        endDate: getDay(-1),
      };
      const monthlyParams = {
        type: 1,
        buildingId: "所有",
        page: 1,
        limit: 31,
        startDate: start,
        endDate: end,
      };

      // 并发请求日数据和月数据
      Promise.all([hotEnergyQuery(dailyParams), hotEnergyQuery(monthlyParams)])
        .then(([dailyResponse, monthlyResponse]) => {
          console.log("昨日数据", dailyResponse);
          if (
            dailyResponse.code == 200 &&
            dailyResponse.rows !== null &&
            dailyResponse.rows.length > 0
          ) {
            this.electWater = dailyResponse.rows[0].electWater;
            this.electValue = dailyResponse.rows[0].electValue;
            this.useHotWater = dailyResponse.rows[0].useHotWater;
          } else {
            this.electWater = 0;
            this.electValue = 0;
            this.useHotWater = 0;
          }
          console.log("当月数据", monthlyResponse);
          this.brokenData1 = [];
          this.brokenData2 = [];
          this.brokenData3 = [];
          this.brokenTime = [];
          if (monthlyResponse.code == 200) {
            monthlyResponse.rows.forEach((item) => {
              this.brokenData1.push(item.useHotWater);
              this.brokenData2.push(item.electValue);
              this.brokenData3.push(item.electWater);
              if (item.curDate.includes("-")) {
                var oneStr = item.curDate.split("-");
                this.brokenTime.push(
                  oneStr[oneStr.length - 2] + "-" + oneStr[oneStr.length - 1]
                );
              }
            });
            // 对数组进行反转操作
            this.brokenData1.reverse();
            this.brokenData2.reverse();
            this.brokenData3.reverse();
            this.brokenTime.reverse();
            this.renderingBroken();
          } else {
            this.brokenData1 = [];
            this.brokenData2 = [];
            this.brokenData3 = [];
            this.brokenTime = [];
            this.renderingBroken();
          }
        })
        .catch((error) => {
          console.error("请求数据时出错:", error);
        });
    },
    renderingBroken() {
      if (this.currentIndex === 0) {
        this.brokenOption.series[0].data = this.brokenData1;
        this.brokenOption.series[0].itemStyle.color = "#d48e17";
      } else if (this.currentIndex === 1) {
        this.brokenOption.series[0].data = this.brokenData2;
        this.brokenOption.series[0].itemStyle.color = "#1ab395";
      } else if (this.currentIndex === 2) {
        this.brokenOption.series[0].data = this.brokenData3;
        this.brokenOption.series[0].itemStyle.color = "#1f8dee";
      }
      // 保存当前索引用于闭包
      const currentIndex = this.currentIndex;
      // 动态设置 tooltip 格式化函数
      this.brokenOption.tooltip = {
        trigger: "axis",
        formatter: function (params) {
          // 获取当前数据点信息
          const data = params[0];
          const month = data.name;
          const value = data.value;

          // 根据索引返回不同内容
          if (currentIndex === 0) {
            return `${month}<br/>用水量: ${value} 吨`;
          } else if (currentIndex === 1) {
            return `${month}<br/>用电量: ${value} 度`;
          } else if (currentIndex === 2) {
            return `${month}<br/>单耗: ${value} 度/吨`;
          }
        },
      };
      this.brokenOption.xAxis.data = this.brokenTime;
      this.brokenInstanc.setOption(this.brokenOption);
    },
  },
};
</script>
<style lang="scss" scoped>
.overview-top {
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: stretch;
  justify-content: space-between;
  margin-bottom: 0.2rem;
  .overview-top-left {
    width: 65%;
    .overview-data {
      width: 100%;
      padding: 0.5rem;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
      .overview-data-li {
        width: 1.8rem;
        height: 1.65rem;
        position: relative;
        .overview-img {
          width: 1.8rem;
          height: 1.65rem;
          position: absolute;
          top: 0;
        }
        .overview-num {
          font-family: DIN-Bold;
          font-size: 0.3rem;
          font-weight: bold;
          font-stretch: normal;
          line-height: 0.5rem;
          letter-spacing: 0px;
          color: #ffffff;
          position: absolute;
          top: 0.28rem;
          right: 0;
        }
        .overview-title {
          font-family: SourceHanSansCN-Regular;
          font-size: 0.18rem;
          font-weight: normal;
          font-stretch: normal;
          line-height: 0.22rem;
          letter-spacing: 0px;
          color: #ffffff;
          position: absolute;
          top: 0.77rem;
          right: 0;
        }
      }
    }
  }
  .overview-top-right {
    width: 33%;
    .pump-charts {
      width: 100%;
      height: 2.65rem;
    }
  }
}
.overview-bottom {
  .choice {
    margin: 20px;
    .mr20 {
      padding: 0.05rem 0.2rem;
      white-space: nowrap;
      width: auto;
    }
  }
  .brokenEcharts {
    width: 100%;
    height: 4rem;
  }
}
</style>
