<template>
  <div style="padding: 0.5%">
    <el-row :gutter="10">
      <el-col :span="24" style='display: flex'>
          <el-form :inline="true" :model="ruleForm" class="demo-form-inline" style='margin-left: 15px'>
              <el-form-item label="统计指标:">
                  <el-select
                      v-model="formData.loadType"
                      placeholder="请选择"
                      @change="changeload"
                  >
                      <el-option
                          v-for="item in options"
                          :key="item.id"
                          :label="item.name"
                          :value="item.id"
                      >
                      </el-option>
                  </el-select>
              </el-form-item>
          </el-form>



        <!-- <el-button type="primary" style="float:right" @click="Indexstrategy">指标策略</el-button>
                <el-button type="primary" style="float:right;margin-right:1%" @click="loadtype">负荷策略</el-button> -->

          <timepicker
              v-if="falg"
              @querfromdata="querfromdata"
              :interval="interval"
          ></timepicker>
      </el-col>
      <el-col :span="24">
        <el-tabs
          v-model="activeName"
          type="border-card"
          @tab-click="handleClick"
        >
          <el-tab-pane label="负荷趋势分析" name="tab1">
            <div
              id="load"
              v-if="activeName == 'tab1'"
              :style="'width:100%;height:' + tableheight + 'px' "
              ref="fhfx"
            ></div>
          </el-tab-pane>
          <el-tab-pane label="负荷功率因数分析" name="tab2">
            <div
              id="zload"
              v-if="activeName == 'tab2'"
              :style="'width:100%;height:' + tableheight + 'px'"
              ref="zhfh"
            ></div>
          </el-tab-pane>
        </el-tabs>
      </el-col>
    </el-row>
    <el-dialog
      :close-on-click-modal="false"
      title="负荷对比分析"
      :visible.sync="dialogVisibledd"
      width="70%"
      :before-close="handleClose"
    >
      <el-row :gutter="20">
        <el-col :span="12">
          <span style="font-size: 14px; font-weight: bold">统计时间:</span
          ><span style="color: green; font-weight: bold">{{ time }}</span>
          <span style="font-size: 14px; font-weight: bold; margin-left: 1%"
            >统计指标:</span
          ><span style="color: #0066cc; font-weight: bold">{{ title }}</span>
        </el-col>
        <el-col :span="24">
          <div
            id="fxdb"
            :style="
              'width:100%;height:' + (tableheight ) + 'px;' 
            "
            ref="fxdb"
          ></div>
        </el-col>
      </el-row>
    </el-dialog>
  </div>
</template>
<script>
import ElInputGroup from "@/components/ElInputGroup/el-input-group.vue";
import { getappheight, getheight } from "../../../assets/commjs/common";
import api from "@/api/energy/sysconfig";
import timepicker from "../../components/TimePicker/index4";
import echarts from "echarts";
import FileSaver from "file-saver";
import XLSX from "xlsx";
import json2csv from "json2csv";
export default {
  components: {
    timepicker,
  },
  data() {
    return {
      falg: false,
      activeName: "tab1",
      title: "",
      dw: "kW",
      time: "2022-03-11 11:45",
      tabname: "tab1",
      //统计指标
      bindshuju: "",
      options: [],
      dialogVisibledd: false,
      dialogVisible2: false,
      interval: 4,
      tableData: [],
      checkList: [],
      device: 1,
      tableheight: undefined,
      treedata: [
        {
          id: 0,
          label: "空调负荷",
          children: [
            {
              id: 1,
              label: "1层1号监测点",
            },
            {
              id: 2,
              label: "1层2号监测点",
            },
          ],
        },
        {
          label: "办公负荷",
          id: 11,
          children: [
            {
              id: 12,
              label: "1号楼电梯",
            },
            {
              id: 13,
              label: "1号楼照明",
            },
          ],
        },
        {
          label: "厨房负荷",
          id: 3,
          children: [
            {
              id: 31,
              label: "厨房",
            },
            {
              id: 32,
              label: "保安室",
            },
          ],
        },
      ],
      defaultProps: {
        children: "children",
        label: "label",
      },
      form: {
        name: "",
        region: "",
      },
      formData: {
        loadType: "",
      },
      ydata1: [],
      ydata2: [],
      ydata3: [],
      ydata4: [],
      ydata5: [],
      ydata6: [],
      ydata7: [],

      ydata8: [],
      ydata9: [],
      ydata10: [],
      ydata11: [],
      ydata12: [],
      ydata13: [],
      ydata14: [],

      fhdata: [],
      fhvalue: [],
    };
  },
  created() {
    this.getTarget();
    // this.formData.loadType = this.bindshuju
  },
  beforeMount() {},
  mounted() {
    // this.tableheight = getheight();
    this.device = window.devicePixelRatio;
    // if (this.device == 1) {
    //   this.tableheight = this.tableheight * 2.05;
    // }
    // if (this.device == 1.25) {
    //   this.tableheight = this.tableheight * 1.64;
    // }
    // if (this.device == 1.5) {
    //   this.tableheight = this.tableheight * 1.93;
    // }
    this.tableheight =  window.sessionStorage.getItem('appheight') - 120
    this.ininData();
  },
  methods: {
    changeload(val) {
      for (var i = 0; i < this.options.length; i++) {
        if (val == this.options[i].id && this.options[i].name == "有功功率") {
          this.dw = "kW";
          this.loadData();
          this.Powefactor();
        } else if (
          val == this.options[i].id &&
          this.options[i].name == "无功功率"
        ) {
          this.dw = "kVar";
          this.loadData();
          this.Powefactor();
        }
      }
    },
    ininData() {
      this.$nextTick(() => {
        this.loadtypeEcharts();
        this.constloadtypeEcharts();
      });
    },
    //获取指标数据
    getTarget() {
      var p = {
        statisticalName: "负荷统计",
      };
      api.getEleStatisticalTree(p).then((res) => {
        if (res.code == "A0000") {
          this.options = res.data.binds;
          this.formData.loadType = this.options[0].id;
        }
        this.falg = true;
      });
    },
    //tab标签触发切换事件
    handleClick(tab, event) {
      if (tab.name == "tab1") {
        this.tabname = "tab1";
        this.$nextTick(() => {
          this.loadtypeEcharts();
        });
      } else {
        this.tabname = "tab2";
        this.$nextTick(() => {
          this.constloadtypeEcharts();
        });
      }
    },
    //指标策略触发事件
    Indexstrategy() {
      // this.dialogVisible = true
    },
    //树节点触发事件
    handleNodeClick(data) {
      console.log(data);
    },
    //时间格式转化
    dateFormat(dateData1, dateData2) {
      var timearr = [];
      var date = new Date(dateData1);
      var y = date.getFullYear();
      var m = date.getMonth() + 1;
      m = m < 10 ? "0" + m : m;
      var d = date.getDate();
      d = d < 10 ? "0" + d : d;
      var h = date.getHours();
      h = h < 10 ? "0" + h : h;
      var f = date.getMinutes();
      f = f < 10 ? "0" + f : f;
      var s = date.getSeconds();
      s = s < 10 ? "0" + s : s;
      this.formData.startTime = y + "-" + m + "-" + d;
      timearr.push(this.formData.startTime);
      var date = new Date(dateData2);
      var y = date.getFullYear();
      var m = date.getMonth() + 1;
      m = m < 10 ? "0" + m : m;
      var d = date.getDate();
      d = d < 10 ? "0" + d : d;
      var h = date.getHours();
      h = h < 10 ? "0" + h : h;
      var f = date.getMinutes();
      f = f < 10 ? "0" + f : f;
      var s = date.getSeconds();
      s = s < 10 ? "0" + s : s;
      this.formData.endTime = y + "-" + m + "-" + d;
      timearr.push(this.formData.endTime);
      return timearr;
    },
    formatDate(date) {
      console.log(date);
      // date = new Date();
      date = new Date(Date.parse(date.replace(/-/g, "/"))); //转换成Data();
      console.log(date);
      var y = date.getFullYear();
      console.log(y);
      var m = date.getMonth() + 1;
      m = m < 10 ? "0" + m : m;
      var d = date.getDate();
      d = d < 10 ? "0" + d : d;
      return y + "-" + m + "-" + d;
    },
    //查询触发事件
    querfromdata(data, timehbValue, interval) {
      this.interval = interval;
      this.dateFormat(data[0], data[1]);

      this.loadData();
      this.Powefactor();
    },
    //处理
    chuli(data) {
      var m = [];
      for (var j = 0; j < data.length; j++) {
        var name = data[j][0];
        var value = Number(data[j][1]).toFixed(2);
        var arr = [name, value];
        m.push(arr);
      }
      return m;
    },
    //获取负荷数据
    loadData() {
      api.getLoadTendency(this.formData).then((res) => {
        if (res.code == "A0000") {
          for (var i = 0; i < res.data.length; i++) {
            if (res.data[i].loadName == "高压进线") {
              this.ydata6 = this.chuli(res.data[i].value);
            } else if (res.data[i].loadName == "光伏发电") {
              this.ydata5 = this.chuli(res.data[i].value);
            } else if (res.data[i].loadName == "空调负荷") {
              this.ydata1 = this.chuli(res.data[i].value);
            } else if (res.data[i].loadName == "办公负荷") {
              this.ydata2 = this.chuli(res.data[i].value);
            } else if (res.data[i].loadName == "厨房负荷") {
              this.ydata3 = this.chuli(res.data[i].value);
            } else if (res.data[i].loadName == "宿舍负荷") {
              this.ydata4 = this.chuli(res.data[i].value);
            } else if (res.data[i].loadName == "总负荷") {
              this.ydata7 = this.chuli(res.data[i].value);
            }
          }
          this.loadtypeEcharts();
          // this.Powefactor()
        }
      });
    },

    //负荷策略触发事件
    loadtype() {
      this.dialogVisible2 = true;
    },
    //获取功率因素
    Powefactor() {
      api.getLoadDetail(this.formData).then((res) => {
        if (res.code == "A0000") {
          if (res.data.length > 0) {
            for (var i = 0; i < res.data.length; i++) {
              if (res.data[i].loadName == "使用总负荷") {
                this.ydata8 = this.chuli(res.data[i].value);
              } else if (res.data[i].loadName == "进线负荷") {
                this.ydata10 = this.chuli(res.data[i].value);
              } else if (res.data[i].loadName == "进线功率因素") {
                this.ydata9 = this.chuli(res.data[i].value);
                console.log("进线:" + this.ydata9);
              } else if (res.data[i].loadName == "光伏发电") {
                this.ydata11 = this.chuli(res.data[i].value);
              } else if (res.data[i].loadName == "A相进线电压有效值") {
                this.ydata12 = this.chuli(res.data[i].value);
              } else if (res.data[i].loadName == "B相进线电压有效值") {
                this.ydata13 = this.chuli(res.data[i].value);
              } else if (res.data[i].loadName == "C相进线电压有效值") {
                this.ydata14 = this.chuli(res.data[i].value);
              }
            }
          } else if (res.data.length == 0) {
            this.ydata8 = [];
            this.ydata9 = [];
            this.ydata10 = [];
            this.ydata11 = [];
          }
          this.constloadtypeEcharts();
        }
      });
    },
    //关闭事件
    handleClose() {
      this.dialogVisibledd = false;
      this.dialogVisible2 = false;
    },
    //负荷分析
    loadtypeEcharts() {
      let echarts = require("echarts");
      var myChart = echarts.init(document.getElementById("load"));
      var option = {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "cross", // 默认为直线，可选为：'line' | 'shadow'
          },
          formatter: function (params) {
            // console.log(params)
            var tips = "";
            tips += params[0].data[0] + "</br/>";

            for (var i = 0; i < params.length; i++) {
              tips += params[i].seriesName + ":" + params[i].value[1] + "<br/>";
            }
            return tips;
          },
        },
        grid: {
          left: "2%",
          right: "6%",
          bottom: "6%",
          top: "10%",
          containLabel: true,
        },
        legend: {
          data: [
            "空调负荷",
            "办公负荷",
            "厨房负荷",
            "宿舍负荷",
            "光伏发电",
            "高压进线",
            "总负荷",
          ],
        },
        dataZoom: [
          {
            type: "inside",
            start: 0,
            end: 100,
          },
          {
            start: 0,
            end: 100,
          },
        ],
        xAxis: [
          {
            type: "time",
            axisLine: {
              show: true,
              lineStyle: {
                color: "#999999",
              },
            },
          },
        ],
        toolbox: {
          show: true,
          feature: {
            dataZoom: {
              yAxisIndex: "none",
            },
            //      dataView: {
            // show: true,
            // lang: ['数据视图', '关闭', '导出Excel','导出csv'],
            // //optionToContent为重画表格的函数
            // optionToContent: function(opt){
            //   console.log(opt)
            //     var series = opt.series;
            //     var tdBodys =''
            //         for(var j=0;j<series[0].data.length;j++){
            //            tdBodys +='<tr>'
            //                     + '<td style="border:1px solid;margin:auto;text-align:center;background-color:#99CCCC">'+series[0].data[j][0]+'</td>'
            //                     + '<td style="border:1px solid;margin:auto;text-align:center;background-color:#99CCCC">'+series[0].data[j][1]+'</td>'
            //                     + '<td style="border:1px solid;margin:auto;text-align:center;background-color:#99CCCC">'+series[1].data[j][1]+'</td>'
            //                     + '<td style="border:1px solid;margin:auto;text-align:center;background-color:#99CCCC">'+series[2].data[j][1]+'</td>'
            //                     + '<td style="border:1px solid;margin:auto;text-align:center;background-color:#99CCCC">'+series[3].data[j][1]+'</td>'
            //                     + '<td style="border:1px solid;margin:auto;text-align:center;background-color:#99CCCC">'+series[4].data[j][1]+'</td>'
            //                     + '<td style="border:1px solid;margin:auto;text-align:center;background-color:#99CCCC">'+series[5].data[j][1]+'</td>'
            //                     + '<td style="border:1px solid;margin:auto;text-align:center;background-color:#99CCCC">'+series[6].data[j][1]+'</td>'
            //                     +'</tr>'
            //         }

            //     var table ='<table id="Mytable" style="width:100%;border:0;margin:auto;text-align:center;border: 1px solid;border-collapse:collapse;">'
            //                +'<caption style="font-weight:bold;font-size:20px;height:25px">负荷趋势分析信息表</caption>'
            //                +'<tr>'
            //                +'<th style="text-align: center;border: 1px solid;padding:0 10px;font-weight:bold;background-color:#ccc;height:25px">时间</th>'
            //                +'<th style="text-align: center;border: 1px solid;padding:0 10px;font-weight:bold;background-color:#ccc;height:25px">空调负荷(kW)</th>'
            //                +'<th style="text-align: center;border: 1px solid;font-weight:bold;background-color:#ccc;height:25px">办公负荷(kW)</th>'
            //                +'<th style="text-align: center;border: 1px solid;padding:0 10px;font-weight:bold;background-color:#ccc;height:25px">厨房负荷(kW)</th>'
            //                +'<th style="text-align: center;border: 1px solid;padding:0 10px;font-weight:bold;background-color:#ccc;height:25px">宿舍负荷(kW)</th>'
            //                +'<th style="text-align: center;border: 1px solid;padding:0 10px;font-weight:bold;background-color:#ccc;height:25px">光伏发电(kW)</th>'
            //                +'<th style="text-align: center;border: 1px solid;padding:0 10px;font-weight:bold;background-color:#ccc;height:25px">高压进线(kW)</th>'
            //                +'<th style="text-align: center;border: 1px solid;padding:0 10px;font-weight:bold;background-color:#ccc;height:25px">总负荷(kW)</th>'
            //                +'</tr>'
            //                +tdBodys+
            //                +'</table>'

            //     return table;
            // },
            // //contentToOption为重写“刷新”按钮的语句
            //  contentToOption: function (HTMLDomElement, opt) {
            //     let et = XLSX.utils.table_to_book(
            //            document.getElementById("Mytable")
            //          );
            //          let etout = XLSX.write(et, {
            //           bookType: "xlsx",
            //           bookSST: true,
            //            type: "array",
            //          });
            //          try {
            //            FileSaver.saveAs(
            //              new Blob([etout], {
            //                type: "application/octet-stream",
            //             }),
            //             "头部文件名" + "-" + new Date().toLocaleString() +".xlsx"
            //           );
            //         } catch (e) {
            //         }
            //         return etout;
            //  },
            //      },
            //magicType: { type: ['line', 'bar'] },
            restore: {
              show: true,
            },
            saveAsImage: {},
          },
        },
        yAxis: [
          {
            type: "value",
            name: "单位(" + this.dw + ")",
            // min:0,
            axisLabel: {
              //  formatter:function (value, index) {
              //          return value.toFixed(2)+'kW';
              //  }
              formatter: "{value}",
            },

            axisLine: {
              show: true,
              lineStyle: {
                color: "#999999",
              },
            },
          },
        ],
        series: [
          {
            name: "空调负荷",
            // symbol: "none",
            symbol: "circle",
            symbolSize: 5,
            type: "line",
            smooth: true,
            barWidth: 22,
            stack: "空调负荷",
            itemStyle: {
              normal: {
                color: "#00CCFF",
              },
            },
            markPoint: {
              data: [
                {
                  type: "max",
                  name: "Max",
                  label: {
                    color: "#000", // 文字颜色
                    padding: [0, 0, 5, 0], // 可用padding调整图片内文字距离
                    show: true,
                    formatter: "max", // 自定义文字内容
                  },
                },
                {
                  type: "min",
                  name: "Min",
                  label: {
                    color: "#000", // 文字颜色
                    padding: [0, 0, 5, 0], // 可用padding调整图片内文字距离
                    show: true,
                    formatter: "min", // 自定义文字内容
                  },
                },
              ],
            },
            markLine: {
              data: [
                {
                  type: "average",
                  name: "Avg",
                  label: {
                    color: "#000", // 文字颜色
                    padding: [0, 0, 5, 0], // 可用padding调整图片内文字距离
                    show: true,
                    formatter: function (params) {
                      // alert(params)
                      var tips = "";
                      tips += "平均值" + params.value;
                      console.log(params);
                      return tips;
                    },
                  },
                },
              ],
            },
            data: this.ydata1,
          },
          {
            name: "办公负荷",
            //symbol: "none",
            symbol: "circle",
            symbolSize: 5,
            type: "line",
            smooth: true,
            barWidth: 22,
            stack: "办公负荷",
            itemStyle: {
              normal: {
                color: "#006699",
              },
            },
            markPoint: {
              data: [
                {
                  type: "max",
                  name: "Max",
                  label: {
                    color: "#000", // 文字颜色
                    padding: [0, 0, 5, 0], // 可用padding调整图片内文字距离
                    show: true,
                    formatter: "max", // 自定义文字内容
                  },
                },
                {
                  type: "min",
                  name: "Min",
                  label: {
                    color: "#000", // 文字颜色
                    padding: [0, 0, 5, 0], // 可用padding调整图片内文字距离
                    show: true,
                    formatter: "min", // 自定义文字内容
                  },
                },
              ],
            },
            markLine: {
              data: [
                {
                  type: "average",
                  name: "Avg",
                  label: {
                    color: "#000", // 文字颜色
                    padding: [0, 0, 5, 0], // 可用padding调整图片内文字距离
                    show: true,
                    formatter: function (params) {
                      // alert(params)
                      var tips = "";
                      tips += "平均值" + params.value;
                      console.log(params);
                      return tips;
                    },
                  },
                },
              ],
            },
            data: this.ydata2,
          },
          {
            name: "厨房负荷",
            //symbol: "none",
            symbol: "circle",
            symbolSize: 5,
            type: "line",
            smooth: true,
            barWidth: 22,
            stack: "厨房负荷",
            itemStyle: {
              normal: {
                color: "#996600",
              },
            },
            markPoint: {
              data: [
                {
                  type: "max",
                  name: "Max",
                  label: {
                    color: "#000", // 文字颜色
                    padding: [0, 0, 5, 0], // 可用padding调整图片内文字距离
                    show: true,
                    formatter: "max", // 自定义文字内容
                  },
                },
                {
                  type: "min",
                  name: "Min",
                  label: {
                    color: "#000", // 文字颜色
                    padding: [0, 0, 5, 0], // 可用padding调整图片内文字距离
                    show: true,
                    formatter: "min", // 自定义文字内容
                  },
                },
              ],
            },
            markLine: {
              data: [
                {
                  type: "average",
                  name: "Avg",
                  label: {
                    color: "#000", // 文字颜色
                    padding: [0, 0, 5, 0], // 可用padding调整图片内文字距离
                    show: true,
                    formatter: function (params) {
                      // alert(params)
                      var tips = "";
                      tips += "平均值" + params.value;
                      console.log(params);
                      return tips;
                    },
                  },
                },
              ],
            },
            data: this.ydata3,
          },
          {
            name: "宿舍负荷",
            //symbol: "none",
            symbol: "circle",
            symbolSize: 5,
            type: "line",
            smooth: true,
            barWidth: 22,
            stack: "宿舍负荷",
            itemStyle: {
              normal: {
                color: "#CC00FF",
              },
            },
            markPoint: {
              data: [
                {
                  type: "max",
                  name: "Max",
                  label: {
                    color: "#000", // 文字颜色
                    padding: [0, 0, 5, 0], // 可用padding调整图片内文字距离
                    show: true,
                    formatter: "max", // 自定义文字内容
                  },
                },
                {
                  type: "min",
                  name: "Min",
                  label: {
                    color: "#000", // 文字颜色
                    padding: [0, 0, 5, 0], // 可用padding调整图片内文字距离
                    show: true,
                    formatter: "min", // 自定义文字内容
                  },
                },
              ],
            },
            markLine: {
              data: [
                {
                  type: "average",
                  name: "Avg",
                  label: {
                    color: "#000", // 文字颜色
                    padding: [0, 0, 5, 0], // 可用padding调整图片内文字距离
                    show: true,
                    formatter: function (params) {
                      // alert(params)
                      var tips = "";
                      tips += "平均值" + params.value;
                      console.log(params);
                      return tips;
                    },
                  },
                },
              ],
            },
            data: this.ydata4,
          },
          {
            name: "光伏发电",
            // symbol: "none",
            symbol: "circle",
            symbolSize: 5,
            type: "line",
            smooth: true,
            barWidth: 22,
            stack: "光伏发电",
            itemStyle: {
              normal: {
                color: "#66FF00",
              },
            },
            markPoint: {
              data: [
                {
                  type: "max",
                  name: "Max",
                  label: {
                    color: "#000", // 文字颜色
                    padding: [0, 0, 5, 0], // 可用padding调整图片内文字距离
                    show: true,
                    formatter: "max", // 自定义文字内容
                  },
                },
                {
                  type: "min",
                  name: "Min",
                  label: {
                    color: "#000", // 文字颜色
                    padding: [0, 0, 5, 0], // 可用padding调整图片内文字距离
                    show: true,
                    formatter: "min", // 自定义文字内容
                  },
                },
              ],
            },
            markLine: {
              data: [
                {
                  type: "average",
                  name: "Avg",
                  label: {
                    color: "#000", // 文字颜色
                    padding: [0, 0, 5, 0], // 可用padding调整图片内文字距离
                    show: true,
                    formatter: function (params) {
                      // alert(params)
                      var tips = "";
                      tips += "平均值" + params.value;
                      console.log(params);
                      return tips;
                    },
                  },
                },
              ],
            },
            data: this.ydata5,
          },
          {
            name: "高压进线",
            //symbol: "none",
            symbol: "circle",
            symbolSize: 5,
            type: "line",
            smooth: true,
            barWidth: 22,
            stack: "高压进线",
            itemStyle: {
              normal: {
                color: "#CC3333",
              },
            },
            markPoint: {
              data: [
                {
                  type: "max",
                  name: "Max",
                  label: {
                    color: "#000", // 文字颜色
                    padding: [0, 0, 5, 0], // 可用padding调整图片内文字距离
                    show: true,
                    formatter: "max", // 自定义文字内容
                  },
                },
                {
                  type: "min",
                  name: "Min",
                  label: {
                    color: "#000", // 文字颜色
                    padding: [0, 0, 5, 0], // 可用padding调整图片内文字距离
                    show: true,
                    formatter: "min", // 自定义文字内容
                  },
                },
              ],
            },
            markLine: {
              data: [
                {
                  type: "average",
                  name: "Avg",
                  label: {
                    color: "#000", // 文字颜色
                    padding: [0, 0, 5, 0], // 可用padding调整图片内文字距离
                    show: true,
                    formatter: function (params) {
                      // alert(params)
                      var tips = "";
                      tips += "平均值" + params.value;
                      console.log(params);
                      return tips;
                    },
                  },
                },
              ],
            },

            data: this.ydata6,
          },
          {
            name: "总负荷",
            //symbol: "none",
            symbol: "circle",
            symbolSize: 5,
            type: "line",
            smooth: true,
            barWidth: 22,
            stack: "总负荷",
            itemStyle: {
              normal: {
                color: "#FFCC33",
              },
            },
            markPoint: {
              data: [
                {
                  type: "max",
                  name: "Max",
                  label: {
                    color: "#000", // 文字颜色
                    padding: [0, 0, 5, 0], // 可用padding调整图片内文字距离
                    show: true,
                    formatter: "max", // 自定义文字内容
                  },
                },
                {
                  type: "min",
                  name: "Min",
                  label: {
                    color: "#000", // 文字颜色
                    padding: [0, 0, 5, 0], // 可用padding调整图片内文字距离
                    show: true,
                    formatter: "min", // 自定义文字内容
                  },
                },
              ],
            },
            markLine: {
              data: [
                {
                  type: "average",
                  name: "Avg",
                  label: {
                    color: "#000", // 文字颜色
                    padding: [0, 0, 5, 0], // 可用padding调整图片内文字距离
                    show: true,
                    formatter: function (params) {
                      // alert(params)
                      var tips = "";
                      tips += "平均值" + params.value;
                      console.log(params);
                      return tips;
                    },
                  },
                },
              ],
            },
            data: this.ydata7,
          },
        ],
      };
      // var app = {
      //   currentIndex: -1,
      // };
      // setInterval(function () {
      //   var dataLen = option.series[0].data.length;

      //   // 取消之前高亮的图形
      //   myChart.dispatchAction({
      //     type: 'downplay',
      //     seriesIndex: 0,
      //     dataIndex: app.currentIndex
      //   });
      //   app.currentIndex = (app.currentIndex + 1) % dataLen;
      //   //console.log(app.currentIndex);
      //   // 高亮当前图形
      //   myChart.dispatchAction({
      //     type: 'highlight',
      //     seriesIndex: 0,
      //     dataIndex: app.currentIndex,
      //   });
      //   // 显示 tooltip
      //   myChart.dispatchAction({
      //     type: 'showTip',
      //     seriesIndex: 0,
      //     dataIndex: app.currentIndex
      //   });

      // }, 5000);
      //  myChart.clear()
      option && myChart.setOption(option, true)
window.echartsArr.push(myChart);
      const _this = this;
      myChart.on("click", function (params) {
        //param.event.stopPropagation()
        console.log(params);
        for (var i = 0; i < _this.options.length; i++) {
          if (_this.formData.loadType == _this.options[i].id) {
            _this.title = _this.options[i].name;
          }
        }
        // if(params.data.coord[0]){
        //   var time = _this.timeFormate(params.data.coord[0])
        //  }else{
        var time = params.data[0];
        // }

        _this.time = time;
        var data = {
          loadType: _this.formData.loadType,
          startTime: time,
        };
        api.getLoadRate(data).then((res) => {
          if (res.code == "A0000") {
            var fhdata = [];
            var fhvalue = [];
            for (var i = 0; i < res.data.length; i++) {
              fhdata.push(res.data[i].name);
              fhvalue.push((res.data[i].value * 100).toFixed(2));
            }
            _this.fhdata = fhdata;
            _this.fhvalue = fhvalue;
            console.log(_this.fhdata);
          }
          _this.dialogVisibledd = true;
          _this.$nextTick(() => {
            _this.loadProportion();
          });
        });
        // alert(params.value)
      });
    },
    timeFormate(timeStamp) {
      let year = new Date(timeStamp).getFullYear();
      let month =
        new Date(timeStamp).getMonth() + 1 < 10
          ? "0" + (new Date(timeStamp).getMonth() + 1)
          : new Date(timeStamp).getMonth() + 1;
      let date =
        new Date(timeStamp).getDate() < 10
          ? "0" + new Date(timeStamp).getDate()
          : new Date(timeStamp).getDate();
      let hh =
        new Date(timeStamp).getHours() < 10
          ? "0" + new Date(timeStamp).getHours()
          : new Date(timeStamp).getHours();
      let mm =
        new Date(timeStamp).getMinutes() < 10
          ? "0" + new Date(timeStamp).getMinutes()
          : new Date(timeStamp).getMinutes();
      let ss =
        new Date(timeStamp).getSeconds() < 10
          ? "0" + new Date(timeStamp).getSeconds()
          : new Date(timeStamp).getSeconds();
      return (
        year + "-" + month + "-" + date + "" + " " + hh + ":" + mm + ":" + ss
      );
      // return year + "-" + month + "-" + date
    },
    //总负荷分析
    constloadtypeEcharts() {
      let echarts = require("echarts");
      var myChart = echarts.init(document.getElementById("zload"));

      const colors = ["#FFCC33", "#91CC75"];
      var option = {
        color: colors,
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
          },
          formatter: function (params) {
            console.log(params);
            var tips = "";
            tips += params[0].data[0] + "</br/>";

            for (var i = 0; i < params.length; i++) {
              if (params[i].seriesName == "进线功率因数") {
                tips +=
                  params[i].seriesName + ":" + params[i].value[1] + "<br/>";
              } else if (
                params[i].seriesName == "A相进线电压有效值" ||
                params[i].seriesName == "B相进线电压有效值" ||
                params[i].seriesName == "C相进线电压有效值"
              ) {
                tips +=
                  params[i].seriesName + ":" + params[i].value[1] + "V<br/>";
              } else {
                tips +=
                  params[i].seriesName + ":" + params[i].value[1] + "<br/>";
              }
            }
            return tips;
          },
        },
        grid: {
          left: "2%",
          right: "4%",
          bottom: "6%",
          top: "10%",
          containLabel: true,
        },
        toolbox: {
          show: true,
          feature: {
            dataZoom: {
              yAxisIndex: "none",
            },
            dataView: {
              show: true,
              lang: ["数据视图", "关闭", "导出Excel", "导出csv"],
              //optionToContent为重画表格的函数
              optionToContent: function (opt) {
                console.log(opt);
                var series = opt.series;
                var tdBodys = "";
                for (var j = 0; j < series[0].data.length; j++) {
                  if (j == 0) {
                    console.log(series[0].data[j][1]);
                    console.log(series[1].data[j]);
                    console.log(series[2].data[j]);
                  }
                  tdBodys +=
                    "<tr>" +
                    '<td style="border:1px solid;margin:auto;text-align:center;background-color:#99CCCC">' +
                    series[0].data[j][0] +
                    "</td>" +
                    '<td style="border:1px solid;margin:auto;text-align:center;background-color:#99CCCC">' +
                    series[0].data[j][1] +
                    "</td>" +
                    '<td style="border:1px solid;margin:auto;text-align:center;background-color:#99CCCC">' +
                    series[1].data[j][1] +
                    "</td>" +
                    '<td style="border:1px solid;margin:auto;text-align:center;background-color:#99CCCC">' +
                    series[2].data[j][1] +
                    "</td>" +
                    '<td style="border:1px solid;margin:auto;text-align:center;background-color:#99CCCC">' +
                    series[3].data[j][1] +
                    "</td>" +
                    '<td style="border:1px solid;margin:auto;text-align:center;background-color:#99CCCC">' +
                    series[4].data[j][1] +
                    "</td>" +
                    '<td style="border:1px solid;margin:auto;text-align:center;background-color:#99CCCC">' +
                    series[5].data[j][1] +
                    "</td>" +
                    '<td style="border:1px solid;margin:auto;text-align:center;background-color:#99CCCC">' +
                    series[6].data[j][1] +
                    "</td>" +
                    "</tr>";
                }
                var table =
                  '<table id="Mytable" style="width:100%;border:0;margin:auto;text-align:center;border: 1px solid;border-collapse:collapse;">' +
                  '<caption style="font-weight:bold;font-size:20px;height:25px">负荷功率因数分析表</caption>' +
                  "<tr>" +
                  '<th style="text-align: center;border: 1px solid;padding:0 10px;font-weight:bold;background-color:#ccc;height:25px">时间</th>' +
                  '<th style="text-align: center;border: 1px solid;padding:0 10px;font-weight:bold;background-color:#ccc;height:25px">进线功率因数</th>' +
                  '<th style="text-align: center;border: 1px solid;font-weight:bold;background-color:#ccc;height:25px">总负荷(kW)</th>' +
                  '<th style="text-align: center;border: 1px solid;padding:0 10px;font-weight:bold;background-color:#ccc;height:25px">高压进线(kW)</th>' +
                  '<th style="text-align: center;border: 1px solid;padding:0 10px;font-weight:bold;background-color:#ccc;height:25px">光伏发电(kW)</th>' +
                  '<th style="text-align: center;border: 1px solid;padding:0 10px;font-weight:bold;background-color:#ccc;height:25px">A相进线电压有效值(V)</th>' +
                  '<th style="text-align: center;border: 1px solid;padding:0 10px;font-weight:bold;background-color:#ccc;height:25px">B相进线电压有效值(V)</th>' +
                  '<th style="text-align: center;border: 1px solid;padding:0 10px;font-weight:bold;background-color:#ccc;height:25px">C相进线电压有效值(V)</th>' +
                  "</tr>" +
                  tdBodys +
                  +"</table>";

                return table;
              },
              //contentToOption为重写“刷新”按钮的语句
              contentToOption: function (HTMLDomElement, opt) {
                let et = XLSX.utils.table_to_book(
                  document.getElementById("Mytable")
                );
                let etout = XLSX.write(et, {
                  bookType: "xlsx",
                  bookSST: true,
                  type: "array",
                });
                try {
                  FileSaver.saveAs(
                    new Blob([etout], {
                      type: "application/octet-stream",
                    }),
                    "头部文件名" + "-" + new Date().toLocaleString() + ".xlsx"
                  );
                } catch (e) {}
                return etout;
              },
            },
            //  magicType: { type: ['line', 'bar'] },
            //restore: {},
            saveAsImage: {},
          },
        },
        legend: {
          data: [
            "进线功率因数",
            "总负荷",
            "高压进线",
            "光伏发电",
            "A相进线电压有效值",
            "B相进线电压有效值",
            "C相进线电压有效值",
          ],
        },
        dataZoom: [
          {
            type: "inside",
            start: 0,
            end: 100,
          },
          {
            start: 0,
            end: 100,
          },
        ],
        xAxis: [
          {
            type: 'time',
            // axisTick: {
            //   alignWithLabel: true
            // },
            // prettier-ignore
            //  data: ['2022-03-11 11:45', '12:45', '13:45', '14:45', '15:45', '16:45', '17:45']
          },
        ],
        yAxis: [
          {
            type: "value",
            //min:0,
            name: "负荷(单位:" + this.dw + ")",
            position: "right",
            alignTicks: true,
            axisLine: {
              show: true,
              lineStyle: {
                color: "#FFCC33",
              },
            },
            axisLabel: {
              formatter: "{value}",
            },
            // splitLine:{
            //     show:true,
            //     background:'#000',
            //     lineStyle:{
            //       type:'dashed',
            //       color:'#55b9b4'
            //     }
            //   },
            //   splitArea:{
            //       show:true,
            //       areaStyle:{
            //         color:'#999999',
            //         opacity:0.5
            //     }
            //   }
          },

          {
            type: "value",
            name: "电压有效值",
            position: "right",
            alignTicks: true,
            offset: 80,
            axisLine: {
              show: true,
              lineStyle: {
                color: "#0033FF",
              },
            },
            axisLabel: {
              formatter: "{value}V",
            },
          },
          {
            type: "value",
            name: "功率因数",
            max: 1,
            position: "left",
            alignTicks: true,
            axisLine: {
              show: true,
              lineStyle: {
                color: "#FF00FF",
              },
            },
            axisLabel: {
              formatter: function (value, index) {
                return value.toFixed(1);
              },
            },
          },
        ],
        series: [
          {
            name: "总负荷",
            symbol: "circle",
            symbolSize: 5,
            type: "line",
            smooth: true,
            yAxisIndex: 0,
            data: this.ydata8,
            itemStyle: {
              normal: {
                color: "#FFCC33",
              },
            },
          },
          {
            name: "进线功率因数",
            symbol: "circle",
            symbolSize: 5,
            type: "line",
            smooth: true,
            yAxisIndex: 2,
            data: this.ydata9,
            itemStyle: {
              normal: {
                color: "#FF00FF",
              },
            },
          },
          {
            name: "高压进线",
            type: "line",
            symbol: "circle",
            symbolSize: 5,
            smooth: true,
            yAxisIndex: 0,
            data: this.ydata10,
            itemStyle: {
              normal: {
                color: "#663300",
              },
            },
          },
          {
            name: "光伏发电",
            type: "line",
            symbol: "circle",
            symbolSize: 5,
            smooth: true,
            yAxisIndex: 0,
            data: this.ydata11,
            itemStyle: {
              normal: {
                color: "#33CCFF",
              },
            },
          },
          {
            name: "A相进线电压有效值",
            type: "line",
            symbol: "circle",
            symbolSize: 5,
            smooth: true,
            yAxisIndex: 1,
            data: this.ydata12,
            itemStyle: {
              normal: {
                color: "#FFFF00",
              },
            },
          },
          {
            name: "B相进线电压有效值",
            type: "line",
            symbol: "circle",
            symbolSize: 5,
            smooth: true,
            yAxisIndex: 1,
            data: this.ydata13,
            itemStyle: {
              normal: {
                color: "#009900",
              },
            },
          },
          {
            name: "C相进线电压有效值",
            type: "line",
            symbol: "circle",
            symbolSize: 5,
            smooth: true,
            yAxisIndex: 1,
            data: this.ydata14,
            itemStyle: {
              normal: {
                color: "#CC3300",
              },
            },
          },
        ],
      };
      myChart.clear();

      option && myChart.setOption(option, true)
window.echartsArr.push(myChart);
    },
    //负荷占比分析
    loadProportion() {
      let echarts = require("echarts");
      var myChart = echarts.init(document.getElementById("fxdb"));
      var option = {
        //backgroundColor:"#000a3f",
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
          backgroundColor: "rgba(9, 24, 48, 0.5)",
          borderColor: "rgba(75, 253, 238, 0.4)",
          textStyle: {
            color: "#CFE3FC",
          },
          borderWidth: 1,
        },
        grid: {
          top: "15%",
          right: "5%",
          left: "5%",
          bottom: "22%",
        },
        toolbox: {
          show: true,
          feature: {
            dataZoom: {
              yAxisIndex: "none",
            },
            dataView: { readOnly: false },
            // magicType: { type: ['line', 'bar'] },
            restore: {
              show: true,
            },
            saveAsImage: {},
          },
        },
        xAxis: [
          {
            name: "",
            type: "category",
            data: this.fhdata,
            axisLine: {
              lineStyle: {
                show: true,
                color: "#000",
              },
            },
            axisLabel: {
              margin: 10,
              color: "#000",
              textStyle: {
                show: true,
                fontSize: 12,
              },
            },
            axisTick: {
              show: false,
            },
          },
        ],
        yAxis: [
          {
            name: "负荷占比",
            min: 0,
            max: 100,
            axisLabel: {
              show: true,
              formatter: "{value}%",
              color: "blue",
            },
            axisTick: {
              show: false,
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: "blue",
              },
            },
            splitLine: {
              lineStyle: {
                color: "#ccc",
              },
            },
          },
        ],
        series: [
          {
            type: "bar",
            data: this.fhvalue,
            barWidth: 45,
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                    {
                      offset: 0,
                      color: "#FF9900", // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: "#FF9900", // 100% 处的颜色
                    },
                  ],
                  false
                ),
                shadowColor: "#FF9900",
                shadowBlur: 0,
              },
            },
            label: {
              normal: {
                show: true,
                lineHeight: 10,
                formatter: "{c}",
                position: "top",
                textStyle: {
                  color: "#000",
                  fontSize: 12,
                },
              },
            },
          },
        ],
      };
      myChart.clear();
      option && myChart.setOption(option, true)
window.echartsArr.push(myChart);

    },
  },
};
</script>
<style lang='scss' scoped>
.spantext {
  font-size: 14px;
  font-weight: bold;
}
.border {
  border: 1px solid rgb(15, 15, 15);
  height: 20vh;
  width: 100%;
  margin: 0 auto;
}
.check {
  margin-top: 2%;
  margin-left: 25%;
}
.border2 {
  border: 1px solid rgb(15, 15, 15);
}
::v-deep .el-tree {
  color: rgb(1, 15, 27);
  font-weight: bold;
  // background: rgba(46, 64, 70, 0.26);
}
</style>