const { color } = require("echarts")

<template>
  <div class="energy">
    <div class="left">
      <div class="leftOne">
        <div class="title">
          设备用能统计数据
          <!-- <img src="../assets/images/moreBg.png" @click="equipmentMore" /> -->
          <img src="../assets/images/moreBg.png" />
        </div>
        <!-- <div
            class="equipmentEnergy"
            v-for="(item, index) in equipmentList"
            :key="index"
          >
            <div class="equipmentList">
              <span>{{ item.count }}</span>
              <span style="color: rgb(225, 177, 25); font-size: 0.4rem"
                >KWH</span
              >
            </div>
            <div class="equipmentName">
              {{ item.name }}
            </div>
          </div> -->
        <el-carousel class="equipment" :autoplay="true" trigger="click" :interval="7000">
          <el-carousel-item
            v-for="(item, index) in equipmentList1"
            :key="index"
            class="equipmentEnergy"
          >
            <div v-for="(i, k) in item" :key="k" class="equipmentEnergyChild">
              <div class="equipmentList">
                <span>{{ i.data }}</span>
                <span style="color: rgb(225, 177, 25); font-size: 0.4rem">KWH</span>
              </div>
              <div class="equipmentName">
                {{ i.name }}
              </div>
            </div>
          </el-carousel-item>
        </el-carousel>
      </div>
      <div class="leftTwo">
        <div class="title" style="height: 8%">设备预警信息列表</div>
        <div class="equipmentWarning">
          <div class="equipmentBtn">
            <div
              class="equipmentBtnList"
              v-for="(item, index) in equipmentBtnList"
              :key="index"
              :class="{ equipmentBtnAc: equipmentBtnAc == index }"
              @click="changeWarn(index)"
            >
              {{ item.name }}
            </div>
          </div>
          <div
            class="equipmentWarnList"
            id="equipmentWarnList"
            @mouseenter="mouseOver"
            @mouseleave="mouseLeave"
          >
            <div class="warnList" v-for="(item, index) in warnList" :key="index">
              <span>{{ item.id }}</span>
              <img :src="item.icon" />
              <div
                style="
                  display: flex;
                  flex-direction: column;
                  align-items: flex-start;
                  width: 65%;
                "
              >
                <span style="display: flex; width: 100%; justify-content: flex-start"
                  >报警时间:<span style="margin-left: 5%">{{ item.time }}</span></span
                >
                <span
                  style="
                    margin-top: 3%;
                    display: flex;
                    width: 100%;
                    justify-content: flex-start;
                  "
                  >报警原因:<span style="color: red; margin-left: 5%">{{
                    item.case
                  }}</span></span
                >
                <span
                  style="
                    margin-top: 3%;
                    display: flex;
                    width: 100%;
                    justify-content: flex-start;
                  "
                  >报警等级:<span style="color: red; margin-left: 5%">{{
                    item.grade
                  }}</span></span
                >
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="right">
      <div class="rightOne">
        <div class="title">能耗计量环比分析</div>
        <div id="calculateEcharts"></div>
      </div>
      <div class="rightThree">
        <div class="title" style="height: 16%">能耗计量同比分析</div>
        <!-- <div class="video">
          <img
            src="../assets/images/camera.png"
            style="width: 100%; height: 100%"
          />
        </div> -->
        <div id="calculateEchartsTwo"></div>
      </div>
      <div class="rightTwo">
        <div class="title">太阳能光伏发电系统数据</div>
        <div class="sun">
          <div class="sunList" v-for="(item, index) in sunList" :key="index">
            <img :src="item.icon" />
            <div
              style="
                display: flex;
                flex-direction: column;
                align-items: flex-start;
                margin-left: 5%;
              "
            >
              <span>{{ item.name }}</span>
              <span style="margin-top: 5%"
                >{{ item.count }}&nbsp;&nbsp;<span style="color: rgb(225, 177, 25)">{{
                  item.unit
                }}</span></span
              >
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="equipmentShow" v-show="equipmentShow">
      <div class="equipContent">
        <div class="equipmentEnergy" v-for="(item, index) in equipmentList" :key="index">
          <div class="equipmentList">
            <span>{{ item.count }}</span>
            <span style="color: rgb(225, 177, 25); font-size: 0.4rem">KWH</span>
          </div>
          <div class="equipmentName">
            {{ item.name }}
            <el-input v-model="item.value" placeholder="请输入阈值"></el-input>
          </div>
        </div>
      </div>

      <div class="close" @click="closeEquipmentShow"></div>
      <div class="subCommit">
        <el-button type="primary">提交</el-button>
        <el-button type="info">清空</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import { GetLevelAlarm, getAllDevices, getRealData, getAreaList } from "../api/index";
import mqtt from "mqtt"; // mqtt协议
export default {
  name: "energySaving",
  data() {
    return {
      equipmentList: [
        {
          name: "热回收机组1",
          count: "28.4",
          value: "",
        },
        {
          name: "热回收机组1",
          count: "28.4",
          value: "",
        },
        {
          name: "热回收机组1",
          count: "28.4",
          value: "",
        },
        {
          name: "热回收机组1",
          count: "28.4",
          value: "",
        },
        {
          name: "热回收机组1",
          count: "28.4",
          value: "",
        },
        {
          name: "热回收机组1",
          count: "28.4",
          value: "",
        },
        {
          name: "热回收机组1",
          count: "28.4",
          value: "",
        },
        {
          name: "热回收机组1",
          count: "28.4",
          value: "",
        },

        {
          name: "热回收机组1",
          count: "28.4",
          value: "",
        },
        {
          name: "热回收机组1",
          count: "28.4",
          value: "",
        },
        {
          name: "热回收机组1",
          count: "28.4",
          value: "",
        },
        {
          name: "热回收机组1",
          count: "28.4",
          value: "",
        },
        {
          name: "热回收机组1",
          count: "28.4",
          value: "",
        },
        {
          name: "热回收机组1",
          count: "28.4",
          value: "",
        },
        {
          name: "热回收机组1",
          count: "28.4",
          value: "",
        },
        {
          name: "热回收机组1",
          count: "28.4",
          value: "",
        },

        {
          name: "热回收机组1",
          count: "28.4",
          value: "",
        },
        {
          name: "热回收机组1",
          count: "28.4",
          value: "",
        },
        {
          name: "热回收机组1",
          count: "28.4",
          value: "",
        },
        {
          name: "热回收机组1",
          count: "28.4",
          value: "",
        },
      ], //设备用能数据
      equipmentBtnList: [
        {
          name: "热回收空调",
        },
        {
          name: "电梯系统",
        },
        {
          name: "光伏发电系统",
        },
        {
          name: "多联空调系统",
        },
        {
          name: "恒温恒湿空调",
        },
      ],
      equipmentBtnAc: "", //点击预警
      warnList: [
        {
          id: "1",
          icon: require("../assets/images/jieNengImg/warnRed.png"),
          time: "2023年03月12日 15:45:10",
          case: "设备故障",
          grade: "三级",
        },
        {
          id: "2",
          icon: require("../assets/images/jieNengImg/warnBlue.png"),
          time: "2023年03月12日 15:45:10",
          case: "设备故障",
          grade: "三级",
        },
        {
          id: "3",
          icon: require("../assets/images/jieNengImg/warnWhite.png"),
          time: "2023年03月12日 15:45:10",
          case: "设备故障",
          grade: "三级",
        },
        {
          id: "4",
          icon: require("../assets/images/jieNengImg/warnRed.png"),
          time: "2023年03月12日 15:45:10",
          case: "设备故障",
          grade: "三级",
        },
      ], //故障数组
      sunList: [
        {
          name: "今日发电量",
          icon: require("../assets/images/jieNengImg/energy.png"),
          count: "0",
          unit: "kWh",
        },
        {
          name: "总发电量",
          icon: require("../assets/images/jieNengImg/energy.png"),
          count: "0",
          unit: "kWh",
        },
        {
          name: "有功功率",
          icon: require("../assets/images/jieNengImg/power.png"),
          count: "0",
          unit: "kWh",
        },
        {
          name: "运行状态",
          icon: require("../assets/images/jieNengImg/runStatus.png"),
          count: "正常",
          unit: "",
        },
        {
          name: "运行时间",
          icon: require("../assets/images/jieNengImg/runTime.png"),
          count: "0",
          unit: "h",
        },
        {
          name: "故障报警",
          icon: require("../assets/images/jieNengImg/warning.png"),
          count: "无",
          unit: "",
        },
      ],
      equipmentShow: false,
      equipmentList1: [],
      alarmFirstLevel: [],
      alarmSecondLevel: [],
      alarmThirdLevel: [],
      equipmentList2: [],
      interval: null, //定时器
    };
  },
  mounted() {
    // setTimeout(() => {
      this.getAllDevicesInfo();

      //   setInterval(() => {

      //   this.getAllDevicesInfo();
      //  }, 10000);
      setTimeout(() => {
        this.getAllDevicesInfo();
      }, 10000);
      this.getMqttData();
      window.alarmSecondLevel = this.alarmSecondLevel;
      window.alarmThirdLevel = this.alarmThirdLevel;
      window.alarmAllLevel = this.alarmAllLevel;
      this.changeWarn(0);
      //轮播八个一页
      // for (let i = 0; i < this.equipmentList.length; i += 8) {
      //   this.equipmentList1.push(this.equipmentList.slice(i, i + 8));
      // }
      // this.calculateEcharts();
      this.getQOQ();
      this.getYOY();
      // window.createMqtt = this.createMqtt();
      this.autoScrollenergySaving(67, 50, 0, document.getElementById("equipmentWarnList"));
    // }, 1000);
  },
  watch: {
    alarmFirstLevel(val) {
      // 为了避免频繁触发resize函数导致页面卡顿，使用定时器
      // console.log("alarmFirstLevel",val)
      if (val.length != 0) {
        this.upmqttData(val);
      }
    },
    alarmSecondLevel(val) {
      // 为了避免频繁触发resize函数导致页面卡顿，使用定时器
      //console.log("alarmSecondLevel",val)
      this.upmqttData(val);
    },
    alarmThirdLevel(val) {
      // 为了避免频繁触发resize函数导致页面卡顿，使用定时器
      //console.log("alarmThirdLevel",val)
      this.upmqttData(val);
    },
  },
  methods: {
    //获取能耗计量环比分析
    getQOQ() {
      let dataList = {
        pbuildingId: "79",
        customerId: "12345678",
        date: this.$moment().format("YYYYMM"),
        dateType: "2",
        meterType: "1",
        // pbuildingId: "-1",
      };
      getAreaList(dataList)
        .then((res) => {
          this.calculateEcharts(res.data.data.child);
        })
        .catch((err) => {});
    },
    //获取能耗计量同比分析
    getYOY() {
      let dataList = {
        buildingId: "79",
        customerId: "12345678",
        date: this.$moment().format("YYYYMM"),
        dateType: "2",
        meterType: "1",
        pbuildingId: "-1",
      };
      //接口调用
      getAreaList(dataList)
        .then((res) => {
          this.calculateEchartsTwo(res.data.data.values);
        })
        .catch((err) => {});
    },
    // //mqtt订阅数据
    // createMqtt() {
    //   //创建链接，接收数据
    //   let topicSends = ["device/publish/FB80"];
    // //   let topicSends = ["FirstLevel"];
    //   window.PubScribe(topicSends, this.realInfo);
    // },
    // /** 实时数据分类 */

    //  realInfo(topic, message) {
    //   let that = this;
    //   switch (topic) {
    //     // 接收托片
    //     case "device/publish/FB80":
    //       try {
    //         const utf8decoder = new TextDecoder();
    //         const u8arr = new Uint8Array(message);
    //         const temp = utf8decoder.decode(u8arr); // 将二进制数据转为字符串
    //         const msg = JSON.parse(temp); //这一步报错则返回的是二进制流图片，不报错则返回的是JSON的错误提示数据
    //         console.log("msg", msg);
    //         if (msg.params.设备运行状态 == 1) {
    //           msg.params.设备运行状态 = "正常";
    //         } else {
    //           msg.params.设备运行状态 = "异常";
    //         }
    //         that.sunList[0].count = msg.params.光伏逆变器日发电量;
    //         that.sunList[1].count = msg.params.光伏逆变器总发电量;
    //         that.sunList[2].count = msg.params.有功功率;
    //         that.sunList[3].count = msg.params.设备运行状态;
    //         that.sunList[4].count = msg.params.机器总运行时间;
    //         that.sunList[5].count = msg.params.警告信息;
    //       } catch (error) {}
    //       console.log(error);
    //       break;
    //        case "FirstLevel":
    //       try {
    //           console.log("message", message);
    //         const utf8decoder = new TextDecoder();
    //         const u8arr = new Uint8Array(message);
    //         const temp = utf8decoder.decode(u8arr); // 将二进制数据转为字符串
    //         const msg = JSON.parse(temp); //这一步报错则返回的是二进制流图片，不报错则返回的是JSON的错误提示数据
    //         console.log("msg", msg);

    //       } catch (error) {}
    //       console.log(error);
    //       break;
    //   }
    // },
    getMqttData() {
      this.getDataByMqtt("ws://138.227.111.141:8083/mqtt", "device/publish/FB80");
    },
    // mqtt订阅（独立）
    getDataByMqtt(url, topic) {
      const clientId = Number(new Date()).toString(); // 用户名
      // const host = url; // 一个测试用url，改成给的，ws://broker.emqx.io:8083/mqtt
      const options = {
        endpoint: "/mqtt",
        clean: true, // 保留会话
        cleanSession: true,
        connectTimeout: 7000, // 超时时间
        reconnectPeriod: 7000, // 重连时间间隔
        host: "138.227.111.141",
        port: "8083",
        // 认证信息
        clientId: Number(new Date()).toString(),
        // clientId: 'JBFY',
        username: "admin",
        password: "123456",
      };
      if (this.mqttClient == undefined) {
        this.mqttClient = mqtt.connect(url, options); // 连接
        // const client = mqtt.connect(host, options); // 连接
        // const client = mqtt.connect(host)  // 连接
        // 错误回调
        this.mqttClient.on("error", (err) => {
          // console.log("[MQTT-TEST] 连接错误：", this.models[cIdNum].cName);
          this.mqttClient.end();
        });
        // 重连回调
        this.mqttClient.on("reconnect", () => {
          // console.log("[MQTT-TEST] 重连中……");
        });
        // 连接回调
        this.mqttClient.on("connect", () => {});
        // 接收回调
        this.mqttClient.on("message", (topic, message, packet) => {
          // 解析后端数据
          let that = this;
          if (topic.indexOf("device/publish/FB80") != -1) {
            const utf8decoder = new TextDecoder();
            const u8arr = new Uint8Array(message);
            const temp = utf8decoder.decode(u8arr); // 将二进制数据转为字符串
            const msg = JSON.parse(temp); //这一步报错则返回的是二进制流图片，不报错则返回的是JSON的错误提示数据
            if (msg.params.设备运行状态 == 1) {
              msg.params.设备运行状态 = "正常";
            } else {
              msg.params.设备运行状态 = "异常";
            }
            that.sunList[0].count = msg.params.光伏逆变器日发电量;
            that.sunList[1].count = msg.params.光伏逆变器总发电量;
            that.sunList[2].count = msg.params.有功功率;
            that.sunList[3].count = msg.params.设备运行状态;
            that.sunList[4].count = msg.params.机器总运行时间;
            that.sunList[5].count = msg.params.警告信息;
          } else if (topic.indexOf("InConvoyor") != -1) {
          }
        });
      }
      // 订阅
      this.mqttClient.subscribe(topic, { qos: 0 });
    },
    //获取所有设备信息
    getAllDevicesInfo() {
      //调用接口数据
      let allDevicesCode = [];
      getAllDevices()
        .then((res) => {
          this.equipmentList = Object.keys(res.data.dataResults).map((item, index) => {
            return {
              name: res.data.dataResults[index].metername,
              code: res.data.dataResults[index].metercode,
            };
          });
          res.data.dataResults.forEach((item, index) => {
            allDevicesCode.push(item.metercode);
          });
          getRealData({
            metercodes: allDevicesCode,
          })
            .then((response) => {
              let resList = [];
              // console.log(allDevicesCode,response.data.dataResults, "实时设备数据ssssssssssss");
              for (const key in response.data.dataResults) {
                resList = response.data.dataResults[1];
              }
              for (let i = 0; i < this.equipmentList.length; i++) {
                resList.forEach((is, k) => {
                  if (this.equipmentList[i].code == is.id) {
                    this.equipmentList2.push({
                      data: parseInt(is.idata),
                      name: this.equipmentList[i].name,
                      value: "",
                    });
                  }
                });
              }
              //分页
              for (let i = 0; i < this.equipmentList2.length; i += 8) {
                this.equipmentList1.push(this.equipmentList2.slice(i, i + 8));
              }
            })
            .catch((err) => {});
        })
        .catch((err) => {});
    },
    //预警点击
    changeWarn(index) {
      this.equipmentBtnAc = index;
      if (index == 0) {
        let params = {
          AlarmLevel: "",
          DeviceTypes: "热回收",
        };
        GetLevelAlarm(params)
          .then((res) => {
            this.upWainData(res);
          })
          .catch((err) => {});
      }
      if (index == 1) {
        let params = {
          AlarmLevel: "",
          DeviceTypes: "电梯",
        };
        GetLevelAlarm(params)
          .then((res) => {
            this.upWainData(res);
          })
          .catch((err) => {});
      } else if (index == 2) {
        let params = {
          AlarmLevel: "",
          DeviceTypes: "光伏",
        };
        GetLevelAlarm(params)
          .then((res) => {
            this.upWainData(res);
          })
          .catch((err) => {});
      } else if (index == 3) {
        let params = {
          AlarmLevel: "",
          DeviceTypes: "VRV",
        };
        GetLevelAlarm(params)
          .then((res) => {
            this.upWainData(res);
          })
          .catch((err) => {});
      } else if (index == 4) {
        let params = {
          AlarmLevel: "",
          DeviceTypes: "恒温恒湿",
        };
        GetLevelAlarm(params)
          .then((res) => {
            this.upWainData(res);
          })
          .catch((err) => {});
      }
    },
    //获取mqtt数据
    upmqttData(val) {
      let icon = null;
      var warnListMqtt = [];
      warnListMqtt = Object.keys(val).map((item, index) => {
        if (val[index].AlarmLevel == 1) {
          val[index].AlarmLevel = "一级";
        } else if (val[index].AlarmLevel == 2) {
          val[index].AlarmLevel = "二级";
        } else if (val[index].AlarmLevel == 3) {
          val[index].AlarmLevel = "三级";
        }
        return {
          id: index + 1,
          icon: require("../assets/images/jieNengImg/warnRed.png"),
          time: this.$moment(val[index].AlarmTime).format("YYYY-MM-DD HH:mm:ss"),
          case: val[index].AlarmName,
          grade: val[index].AlarmLevel,
          DeviceTypes: val[index].DeviceTypes,
        };
      });
      //console.log("warnListMqtt",warnListMqtt)
      for (let i = 0; i < warnListMqtt.length; i++) {
        if (warnListMqtt[i].DeviceTypes == this.warnList[0].DeviceTypes) {
          this.warnList.splice(0, 0, warnListMqtt[i]);
        }
      }
    },
    //更新预警数据
    upWainData(res) {
      this.warnList = Object.keys(res.data.data).map((item, index) => {
        if (res.data.data[index].AlarmLevel == 1) {
          res.data.data[index].AlarmLevel = "一级";
        } else if (res.data.data[index].AlarmLevel == 2) {
          res.data.data[index].AlarmLevel = "二级";
        } else if (res.data.data[index].AlarmLevel == 3) {
          res.data.data[index].AlarmLevel = "三级";
        }
        return {
          id: index + 1,
          icon: require("../assets/images/jieNengImg/warnRed.png"),
          time: this.$moment(res.data.data[index].AlarmTime).format(
            "YYYY-MM-DD HH:mm:ss"
          ),
          case: res.data.data[index].AlarmName,
          grade: res.data.data[index].AlarmLevel,
          DeviceTypes: res.data.data[index].DeviceTypes,
        };
      });
    },
    calculateEcharts(val) {
      let imgSrc = "/img/car.png";
      let chartData = [];
      chartData = Object.keys(val).map((item, index) => {
        return { value: val[item].val, name: val[item].buildName };
      });
      let colorList = ["red", "rgb(255,122,0)", "rgb(3, 255, 150)", "rgb(0,215,245)"];
      let sum = chartData.reduce((per, cur) => per + cur.value, 0);
      let gap = (1 * sum) / 100;
      let pieData1 = [];
      let pieData2 = [];
      let gapData = {
        name: "",
        value: gap,
        itemStyle: {
          color: "transparent",
        },
      };
      for (let i = 0; i < chartData.length; i++) {
        // 第一圈数据
        pieData1.push({
          ...chartData[i],
          itemStyle: {
            borderRadius: 0,
          },
        });
        pieData1.push(gapData);
        // 第二圈数据
        pieData2.push({
          ...chartData[i],
          itemStyle: {
            color: colorList[i],
            opacity: 0.1,
          },
        });
        pieData2.push(gapData);
      }
      var myChart = this.$echarts.init(document.getElementById("calculateEcharts"));

      let option = {
        tooltip: {
          show: true,
          backgroundColor: "rgba(17,95,234,0.5)",
          textStyle: {
            color: "#F0F0F0",
          },
        },
        legend: {
          show: true,
          right: "10%",
          top: "center",
          icon: "rect",
          itemWidth: 15,
          itemHeight: 15,
          itemGap: 20,
          textStyle: {
            color: "auto",
            rich: {
              name: {
                padding: [0, 10, 0, 8],
                color: "auto",
                fontSize: "0.9rem",
              },
              percent: {
                padding: [0, 0, 0, 8],
                color: "auto",
                fontSize: "0.9rem",
              },
            },
          },
          formatter: (name) => {
            let item = chartData.find((i) => {
              return i.name == name;
            });
            let p = ((item.value / sum) * 100).toFixed(0);
            return "{name|" + name + "}" + "{percent|" + p + "}" + "%";
          },
        },
        graphic: {
          elements: [
            {
              type: "image",
              z: 3,
              style: {
                image: imgSrc,
                width: 30,
                height: 30,
              },
              top: "middle",
              left: "25%",
              scale: [1.5, 1.5],
            },
          ],
        },
        grid: {
          top: 35,
          right: 30,
          bottom: 20,
          left: 30,
        },
        color: colorList,
        series: [
          {
            name: "消息来源",
            type: "pie",
            // roundCap: true,
            radius: ["70%", "80%"],
            center: ["30%", "50%"],
            // avoidLabelOverlap: true,
            label: {
              show: false,
            },
            labelLine: {
              show: false,
            },
            data: pieData1,
          },
          {
            type: "pie",
            radius: ["70%", "60%"],
            center: ["30%", "50%"],
            gap: 1.71,
            label: {
              show: false,
            },
            labelLine: {
              show: false,
            },
            silent: true,
            data: pieData2,
          },
          {
            type: "pie",
            center: ["30%", "50%"],
            radius: [0, "45.6%"],
            label: {
              show: false,
            },
            labelLine: {
              show: false,
            },
            itemStyle: {
              color: "rgba(5,37,95,0.3)",
            },
            silent: true,
            data: [
              {
                value: 100,
                name: "",
              },
            ],
          },
          {
            name: "",
            type: "gauge",
            detail: false,
            splitNumber: 10, //刻度数量
            radius: "65%", //图表尺寸
            center: ["30%", "50%"],
            startAngle: 0, //开始刻度的角度
            endAngle: -356, //结束刻度的角度
            axisLine: {
              show: false,
              lineStyle: {
                width: 0,
                shadowBlur: 0,
              },
            },
            axisTick: {
              show: true,
              lineStyle: {
                color: "#fff",
                width: 1,
              },
              length: 2,
              splitNumber: 3,
            },
            splitLine: {
              show: false,
              length: 5,
              lineStyle: {
                color: "#194482",
              },
            },
            axisLabel: {
              show: false,
            },
          },
        ],
      };
      myChart.setOption(option);
    },
    calculateEchartsTwo(val) {
      // console.log(val,'----------------');
      let dataX = [];
      let tqData = [];
      let bqData = [];
      let tbData = [];
      val.forEach((item, index) => {
        dataX.push(item.dateDetail);
        tqData.push(item.tqVal);
        bqData.push(item.hqVal);
        tbData.push(item.val);
      });
      var myChart = this.$echarts.init(document.getElementById("calculateEchartsTwo"));

      let option = {
        //你的代码
        grid: { containLabel: true, top: 30, right: 15, bottom: 0, left: 15 },
        legend: {
          show: true,
          // data: ["同期", "本期", "同比"],
          data: ["同期", "环期", "用量数值"],
          textStyle: { fontSize: "0.7rem", color: "#ffffff" },
        },
        tooltip: {
          trigger: "axis",
          axisPointer: { type: "shadow" },
        },
        xAxis: {
          type: "category",
          data: dataX,
          axisLine: {
            show: true,
            lineStyle: { color: "#ffffff", type: "solid" },
          },
          axisTick: {
            show: false,
          },
          axisLabel: {
            // interval: 0,
            show: true,
            fontSize: "0.9rem",
            color: "#ffffff",
            fontFamily: "SourceHanSansCN-Normal, SourceHanSansCN",
          },
        },
        yAxis: [
          {
            name: "单位kWh",
            axisLine: { show: false },
            axisTick: { show: false },
            axisLabel: {
              show: true,
              fontSize: "0.9rem",
              color: "#ffffff",
              fontFamily: "SourceHanSansCN-Normal, SourceHanSansCN",
              formatter: "{value}",
            },
            splitLine: { show: false },
          },
          {
            name: "比率",
            textStyle: {
              color: "#fff",
            },
            axisLine: { show: false },
            axisTick: { show: false },
            axisLabel: {
              show: true,
              fontSize: "0.9rem",
              color: "#ffffff",
              fontFamily: "SourceHanSansCN-Normal, SourceHanSansCN",
              formatter: "{value}",
            },
            splitLine: { show: false },
          },
        ],
        series: [
          {
            name: "同期",
            type: "bar",
            barWidth: "25%",
            showBackground: true,
            backgroundStyle: {
              color: "rgba(14,58,99, .5)",
            },
            itemStyle: {
              color: "rgba(0,215,245,1)",
            },
            emphasis: {
              itemStyle: {
                color: "rgba(0,215,245,1)",
              },
            },
            data: tqData,
          },
          {
            name: "环期",
            type: "bar",
            barWidth: "25%",
            showBackground: true,
            backgroundStyle: {
              color: "rgba(14,58,99, .5)",
            },
            itemStyle: {
              color: this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: "rgba(3, 255, 150, 1)" },
                { offset: 1, color: "rgba(0, 251, 255, 0)" },
              ]),
            },
            emphasis: {
              itemStyle: {
                color: this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 0, color: "rgba(28,159,97,1)" },
                  { offset: 1, color: "rgba(28,214,108,0)" },
                ]),
              },
            },
            data: bqData,
          },
          {
            name: "用量数值",
            type: "line",
            yAxisIndex: 1,
            itemStyle: {
              normal: {
                lineStyle: {
                  color: "#FFA600", //改变折线颜色
                },
              },
            },
            areaStyle: {
              color: {
                type: "linear",
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  // 渐变颜色
                  {
                    offset: 0,
                    color: "rgba(255, 166, 0, 0.3)",
                  },
                  {
                    offset: 1,
                    color: "rgba(255, 166, 0, 0.5)",
                  },
                ],
                global: false,
              },
            },
            smooth: true,
            showAllSymbol: true,
            symbol: "emptyCircle",
            symbolSize: 6,
            data: tbData,
          },
        ],
      };
      myChart.setOption(option);
    },
    //设备更多
    equipmentMore() {
      this.equipmentShow = true;
    },
    closeEquipmentShow() {
      this.equipmentShow = false;
    },
    //自动滚动
    autoScrollenergySaving(stepLength, speed, delay, element) {
      let that = this;
      let step = 1;
      element.scrollTop = 0;
      function start() {
        that.interval = setInterval(scrolling, speed);
        element.scrollTop += step;
      }

      function scrolling() {
        if (
          element.scrollTop % stepLength !== 0 &&
          element.scrollTop === element.scrollHeight - element.offsetHeight
        ) {
          // element.scrollTop += step
          step = 1;
          element.scrollTop = 0;
        } else {
          if (
            element.scrollTop === 0 ||
            element.scrollTop === element.scrollHeight - element.offsetHeight
          ) {
            // 触顶或触底\
            // step *= -1; // 转换方向
          }
          clearInterval(that.interval);
          setTimeout(start, delay);
        }
      }

      if (element.offsetHeight !== element.scrollHeight) {
        // 元素内容没有溢出时，不触发
        setTimeout(start, delay);
      }
    },
    //鼠标移入事件
    mouseOver() {
      let that = this
      clearInterval(that.interval);
      that.interval = null;
    },
    mouseLeave() {
      if (this.interval == null) {
         this.autoScrollenergySaving(67, 50, 0, document.getElementById("equipmentWarnList"));
      }
    },
  },
   beforeDestroy() {
      let that = this
    // 离开当前路由前的操作
    clearInterval(that.interval);
    that.interval = null;
  },
  components: {},
};
</script>

<style lang="less" scoped>
.energy {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-between;
  padding: 0 0.3% 0 0.3%;
  box-sizing: border-box;
  .left {
    width: 24.7%;
    height: 95%;
    padding: 0.5% 0.3% 1% 0.3%;
    box-sizing: border-box;
    display: flex;
    flex-wrap: wrap;
    background: url(../assets/images/leftKuang.png) no-repeat;
    background-size: 100% 100%;
    -webkit-animation-name: leftAnimation;
    -webkit-animation-timing-function: ease-in-out;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-duration: 1s;
    .leftOne {
      width: 100%;
      height: 35%;
      .equipment {
        height: calc(100% - 14%);
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        overflow: auto;
        position: relative;
        /deep/ .el-carousel__container {
          height: 100%;
          width: 100%;
        }
        /deep/ .el-carousel__indicators--horizontal {
          display: none;
        }
        .equipmentEnergy {
          width: 100%;
          height: 100%;
          // white-space: nowrap;
          // animation: 10s wordsLoop linear infinite normal;
          display: flex;
          flex-wrap: wrap;
          .equipmentEnergyChild {
            width: 25%;
            height: 50%;
            .equipmentList {
              width: 100%;
              height: 80%;
              background: url("../assets/images/jieNengImg/energyBack.png") no-repeat;
              background-size: 100% 100%;
              color: #fff;
              font-size: 1.3rem;
              font-weight: 500;
              display: flex;
              flex-direction: column;
              justify-content: center;
            }
            .equipmentName {
              height: calc(100% - 80%);
              width: 100%;
              color: #fff;
            }
          }
        }
      }
      ::-webkit-scrollbar {
        display: none;
      }
    }
    // @keyframes wordsLoop {
    //   0% {
    //     transform: translateY(100%);
    //     -webkit-transform: translateY(100%);
    //   }
    //   100% {
    //     transform: translateY(-100%);
    //     -webkit-transform: translateY(-100%);
    //   }
    // }
    // @-webkit-keyframes wordsLoop {
    //   0% {
    //     transform: translateY(100%);
    //     -webkit-transform: translateY(100%);
    //   }
    //   100% {
    //     transform: translateY(-100%);
    //     -webkit-transform: translateY(-100%);
    //   }
    // }
    .leftTwo {
      width: 100%;
      height: calc(100% - 35%);
      .equipmentWarning {
        height: calc(100% - 8%);
        width: 100%;
        .equipmentBtn {
          width: 100%;
          height: 30%;
          display: flex;
          flex-wrap: wrap;
          align-items: center;
          justify-content: flex-start;
          .equipmentBtnList {
            width: 26.4%;
            height: 29%;
            background: url("../assets/images/jieNengImg/eqBtn.png") no-repeat;
            background-size: 100% 100%;
            color: #fff;
            display: flex;
            justify-content: center;
            align-items: center;
            margin-left: 6%;
            font-size: 0.7rem;
          }
          .equipmentBtnAc {
            width: 26.4%;
            height: 29%;
            background: url("../assets/images/jieNengImg/eqBtnAc.png") no-repeat;
            background-size: 100% 100%;
            color: rgb(225, 177, 25);
            display: flex;
            justify-content: center;
            align-items: center;
            margin-left: 6%;
          }
        }
        .equipmentWarnList {
          width: 100%;
          height: calc(100% - 30%);
          overflow: auto;
          .warnList {
            height: 32%;
            width: 100%;
            display: flex;
            flex-wrap: nowrap;
            align-items: center;
            justify-content: space-around;
            padding-right: 20%;
            box-sizing: border-box;
            color: #fff;
            font-size: 0.7rem;
          }
        }
        ::-webkit-scrollbar {
          display: none;
        }
      }
    }
  }
  @keyframes leftAnimation {
    0% {
      position: relative;
      left: 38%;
      transform: scale(0);
    }
    100% {
      position: relative;
      left: 0%;
      transform: scale(1);
    }
  }
  .right {
    width: 24.7%;
    height: 95%;
    padding: 0.5% 0.3% 0.5% 0.3%;
    box-sizing: border-box;
    display: flex;
    flex-wrap: wrap;
    background: url(../assets/images/leftKuang.png) no-repeat;
    background-size: 100% 100%;
    -webkit-animation-name: rightAnimation;
    -webkit-animation-timing-function: ease-in-out;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-duration: 1s;
    .rightOne {
      width: 100%;
      height: 30%;
      #calculateEcharts {
        width: 100%;
        height: calc(100% - 14%);
      }
    }
    .rightTwo {
      width: 100%;
      height: 37%;
      .sun {
        width: 100%;
        height: calc(100% - 14%);
        display: flex;
        flex-wrap: wrap;
        justify-content: space-around;
        align-items: center;
        .sunList {
          width: 40%;
          height: 25%;
          display: flex;
          align-items: center;
          color: #fff;
          justify-content: center;
        }
      }
    }
    .rightThree {
      width: 100%;
      height: 30%;
      display: flex;
      flex-wrap: wrap;
      .video {
        height: calc(100% - 23%);
        width: 98%;
        border: 3px solid rgb(1, 176, 202);
      }
      #calculateEchartsTwo {
        height: calc(100% - 23%);
        width: 98%;
      }
    }
  }
  @keyframes rightAnimation {
    0% {
      position: relative;
      right: 38%;
      transform: scale(0);
    }
    100% {
      position: relative;
      right: 0%;
      transform: scale(1);
    }
  }
}
.title {
  width: 100%;
  height: 14%;
  background: url("../assets/images/title.png") no-repeat;
  background-size: 100% 100%;
  color: #fff;
  font-size: 0.9rem;
  display: flex;
  align-items: center;
  padding-left: 12%;
  box-sizing: border-box;
  justify-content: space-between;
}
.equipmentShow {
  position: fixed;
  top: 21%;
  left: 26%;
  width: 47.4%;
  height: 60%;
  border: 5px solid #01b0ca;
  background: rgba(1, 1, 7, 0.5);
  .equipContent {
    width: 100%;
    height: 90%;
    display: flex;
    flex-wrap: wrap;
    overflow: auto;
    .equipmentEnergy {
      width: 20%;
      height: 35%;
      margin-left: 4%;
      margin-top: 3%;
      .equipmentList {
        width: 100%;
        height: 80%;
        background: url("../assets/images/jieNengImg/energyBack.png") no-repeat;
        background-size: 100% 100%;
        color: #fff;
        font-size: 1rem;
        font-weight: 500;
        display: flex;
        flex-direction: column;
        justify-content: center;
      }
      .equipmentName {
        height: calc(100% - 80%);
        width: 100%;
        color: #fff;
        /deep/ .el-input__inner {
          background: rgba(1, 99, 137, 0.6);
          margin-top: 3%;
          color: #fff;
        }
      }
    }
  }
  ::-webkit-scrollbar {
    display: none;
  }
  .subCommit {
    width: 100%;
    height: calc(100% - 90%);
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
  }
  .close {
    width: 3%;
    height: 5%;
    z-index: 999;
    position: absolute;
    top: 1%;
    right: 1%;
    background: url("../assets/images/close.png") no-repeat;
    background-size: 100% 100%;
    cursor: pointer;
  }
}
</style>
