<template>
  <div class="">
    <!--实时数据-->
    <el-row v-show="flag" :gutter="10">
      <div style="position: absolute; right:8px;z-index: 10000000;">
        <el-button
          type="primary"
          icon="el-icon-s-platform"
          size="mini"
          @click="gototrendanaly"
          >实时趋势</el-button
        >
        <el-button
          type="primary"
          icon="el-icon-s-operation"
          size="mini"
          @click="gotoharmonics"
          >谐波频谱</el-button
        >
      </div>
    </el-row>
    <el-row id="pl" v-show="flag" :gutter="10">
      <el-col :span="8">
        <el-row :gutter="10">
          <h3 style="text-align: left">电压有效值</h3>
          <el-col :span="24">
            <div id="AB" style="width:100%;height:121px;background: #ccc4ab83;"></div>
          </el-col>
          <el-col :span="24">
            <div id="BC" style="width:100%;height:121px;background: #7ca09783;"></div>
          </el-col>
          <el-col :span="24">
            <div id="CA" style="width:100%;height: 121px;background: #c9a2a285;"></div>
          </el-col>
        </el-row>
      </el-col>
      <el-col :span="8">
        <h3
          style="
            color: #000;
            text-align: center;
            color: #006699;
            margin-top: -5px;
          "
        >
          当前时间:{{ currentTime }}
        </h3>
        <h3 style="text-align: center; margin-top: -15px">
          基波电压/电流幅值(相位)
        </h3>

        <div id="phase" style="width: 100%; height: 363px; background: "></div>
      </el-col>
      <el-col :span="8">
        <el-row :gutter="10">
          <h3 style="text-align: left">电流有效值</h3>
          <el-col :span="24">
            <div id="A" style="width:100%;height:121px;background: #ccc4ab83;"></div>
          </el-col>
          <el-col :span="24">
            <div id="B" style="'width:100%;height:121px;background: #7ca09783;"></div>
          </el-col>
          <el-col :span="24">
            <div id="C" style="'width:100%;height:121px;background: #c9a2a285;"></div>
          </el-col>
        </el-row>
      </el-col>
      <el-col  :span="24" style="margin-top:10px;padding:0px;overflow: auto;height:calc( 100% - '620px')">
       
          <el-table
            stripe
            :data="tableData1"
            style="'width:100%;"
            :height="sixheight + 5 + 'px'"
          >
            <el-table-column align="center" label="电压有效值(kV)">
              <el-table-column
                align="center"
                prop="province"
                label="AB相"
              ></el-table-column>
              <el-table-column
                align="center"
                prop="city"
                label="BC相"
              ></el-table-column>
              <el-table-column
                align="center"
                prop="address"
                label="CA相"
              ></el-table-column>
            </el-table-column>
            <el-table-column align="center" label="电流有效值(A)">
              <el-table-column
                align="center"
                prop="province"
                label="A相"
              ></el-table-column>
              <el-table-column
                align="center"
                prop="city"
                label="B相"
              ></el-table-column>
              <el-table-column
                align="center"
                prop="address"
                label="C相"
              ></el-table-column>
            </el-table-column>
            <el-table-column align="center" label="基波电压幅值(kV)">
              <el-table-column
                align="center"
                prop="province"
                label="A相"
              ></el-table-column>
              <el-table-column
                align="center"
                prop="city"
                label="B相"
              ></el-table-column>
              <el-table-column
                align="center"
                prop="address"
                label="C相"
              ></el-table-column>
            </el-table-column>
            <el-table-column align="center" label="基波电压相位(°)">
              <el-table-column
                align="center"
                prop="province"
                label="A相"
              ></el-table-column>
              <el-table-column
                align="center"
                prop="city"
                label="B相"
              ></el-table-column>
              <el-table-column
                align="center"
                prop="address"
                label="C相"
              ></el-table-column>
            </el-table-column>
            <el-table-column align="center" label="基波电流幅值(A)">
              <el-table-column
                align="center"
                prop="province"
                label="A相"
              ></el-table-column>
              <el-table-column
                align="center"
                prop="city"
                label="B相"
              ></el-table-column>
              <el-table-column
                align="center"
                prop="address"
                label="C相"
              ></el-table-column>
            </el-table-column>
            <el-table-column align="center" label="基波电流相位(°)">
              <el-table-column
                align="center"
                prop="province"
                label="A相"
              ></el-table-column>
              <el-table-column
                align="center"
                prop="city"
                label="B相"
              ></el-table-column>
              <el-table-column
                align="center"
                prop="address"
                label="C相"
              ></el-table-column>
            </el-table-column>
          </el-table>
        
          <el-table
            stripe
            :data="tableData2"
            style="'width:100%;margin-top:10px"
            :height="sixheight + 'px'"
          >
            <el-table-column align="center" label="电压偏差(%)">
              <el-table-column
                align="center"
                prop="province"
                label="AB相"
              ></el-table-column>
              <el-table-column
                align="center"
                prop="city"
                label="BC相"
              ></el-table-column>
              <el-table-column
                align="center"
                prop="address"
                label="CA相"
              ></el-table-column>
            </el-table-column>
            <el-table-column align="center" label="电压总谐波畸变率(%)">
              <el-table-column
                align="center"
                prop="province"
                label="AB相"
              ></el-table-column>
              <el-table-column
                align="center"
                prop="city"
                label="BC相"
              ></el-table-column>
              <el-table-column
                align="center"
                prop="address"
                label="CA相"
              ></el-table-column>
            </el-table-column>
            <el-table-column align="center" label="电流总谐波畸变率(%)">
              <el-table-column
                align="center"
                prop="province"
                label="AB相"
              ></el-table-column>
              <el-table-column
                align="center"
                prop="city"
                label="BC相"
              ></el-table-column>
              <el-table-column
                align="center"
                prop="address"
                label="CA相"
              ></el-table-column>
            </el-table-column>
            <el-table-column align="center" label="电压不平衡度(%)">
              <el-table-column
                align="center"
                prop="province"
                label="AB相"
              ></el-table-column>
              <el-table-column
                align="center"
                prop="city"
                label="BC相"
              ></el-table-column>
              <el-table-column
                align="center"
                prop="address"
                label="CA相"
              ></el-table-column>
            </el-table-column>
            <el-table-column
              align="center"
              label="电流不平衡度(%)"
              min-width="120"
            ></el-table-column>
            <el-table-column align="center" label="频率(Hz)"></el-table-column>
            <el-table-column
              align="center"
              label="基波电流相位(°)"
              min-width="120"
            ></el-table-column>
          </el-table>
    
          <el-table
            stripe
            :data="tableData3"
            style="'width:100%;margin-top:10px"
            :height="sixheight + 5 + 'px'"
          >
            <el-table-column align="center" label="有功功率(kW)">
              <el-table-column
                align="center"
                prop="province"
                label="A相"
              ></el-table-column>
              <el-table-column
                align="center"
                prop="city"
                label="B相"
              ></el-table-column>
              <el-table-column
                align="center"
                prop="address"
                label="C相"
              ></el-table-column>
              <el-table-column
                align="center"
                prop="address"
                label="总有功功率"
                min-width="120"
              ></el-table-column>
            </el-table-column>
            <el-table-column align="center" label="无功功率(kW)">
              <el-table-column
                align="center"
                prop="province"
                label="A相"
              ></el-table-column>
              <el-table-column
                align="center"
                prop="city"
                label="B相"
              ></el-table-column>
              <el-table-column
                align="center"
                prop="address"
                label="C相"
              ></el-table-column>
              <el-table-column
                align="center"
                prop="address"
                label="总无功功率"
                min-width="120"
              ></el-table-column>
            </el-table-column>
            <el-table-column align="center" label="视在功率(kW)">
              <el-table-column
                align="center"
                prop="province"
                label="A相"
              ></el-table-column>
              <el-table-column
                align="center"
                prop="city"
                label="B相"
              ></el-table-column>
              <el-table-column
                align="center"
                prop="address"
                label="C相"
              ></el-table-column>
              <el-table-column
                align="center"
                prop="address"
                label="总视在功率"
                min-width="120"
              ></el-table-column>
            </el-table-column>
            <el-table-column align="center" label="功率因数">
              <el-table-column
                align="center"
                prop="province"
                label="A相"
              ></el-table-column>
              <el-table-column
                align="center"
                prop="city"
                label="B相"
              ></el-table-column>
              <el-table-column
                align="center"
                prop="address"
                label="C相"
              ></el-table-column>
              <el-table-column
                align="center"
                prop="address"
                label="总功率因数"
                min-width="120"
              ></el-table-column>
            </el-table-column>
            <el-table-column align="center" label="基波功率因数">
              <el-table-column
                align="center"
                prop="province"
                label="A相"
              ></el-table-column>
              <el-table-column
                align="center"
                prop="city"
                label="B相"
              ></el-table-column>
              <el-table-column
                align="center"
                prop="address"
                label="C相"
              ></el-table-column>
              <el-table-column
                align="center"
                prop="address"
                label="总基波功率因素"
                min-width="120"
              ></el-table-column>
            </el-table-column>
          </el-table>
     
      </el-col>
    </el-row>
    <!--实时趋势-->
    <el-row v-if="flag1" :gutter="10">
      <RealTimeTrends @back='back'/>
     
     
    </el-row>
    <!--谐波频谱-->
    <el-row v-if="flag2" :gutter="10">
       <spectrum @back='back'/>
      
   
    </el-row>
  </div>
</template>
<script>
import { gettwoechartsheight, getreal } from "../../assets/commjs/common";
import { A, B, C, AB, BC, CA } from "../../assets/commjs/color";
import timepicker from "../components/TimePicker/index2";
import RealTimeTrends from './RealTimeTrends.vue';
import spectrum from './spectrum.vue';

import TreeSelect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import echarts, { color } from "echarts";
export default {
  name: "sssj",
  components: {
    timepicker,
    TreeSelect,

    RealTimeTrends,spectrum
  },

  watch: {
    id: function (a, b) {
      //a是id的新值，b是旧值
      //alert('父组件监听'+a)
    },
  },
  data() {
    return {
      echartsheight: undefined,
      echartswidth: undefined,
      sixheight: 100,
      device: 1,
      flag: true,
      flag1: false,
      flag2: false,
  
      currentTime: "",
      id: 1,

      tableData1: [],
      tableData2: [],
      tableData3: [],
 
    };
  },
  props: {
    treenode: {
      type: Object,
      default: undefined,
    },
    dataTree: {
      type: Array,
      default: undefined,
    },
  },
  created() {
    var _this = this; //声明一个变量指向Vue实例this，保证作用域一致
    this.timer = setInterval(function () {
      _this.currentTime = //修改数据date
        new Date().getFullYear() +
        "-" +
        (new Date().getMonth() + 1) +
        "-" +
        new Date().getDate() +
        " " +
        new Date().getHours() +
        ":" +
        new Date().getMinutes() +
        ": " +
        new Date().getSeconds();
    }, 1000);
  },
  mounted() {
    // this.echartsheight = gettwoechartsheight()
    this.device = window.devicePixelRatio;
    //    if(this.device==1) {
    //     this.sixheight = (getreal()-(getreal()*0.1))/3
    //    }
    //     if(this.device==1.25){
    //      this.sixheight = (((getreal())/3)-10)
    //    }
    //     if(this.device==1.5){
    //      this.sixheight = ((getreal())/3)+10
    //    }
    // const restheight = getreal()
    //this.sixheight = (restheight-(restheight*0.09))/3

    // this.sixheight = (restheight)/3
    this.$nextTick(() => {
      this.getabcvoltage();
      this.abcphase();
    });
  },
  methods: {
    querfromdata(data) {
      this.timeValue = data;
      alert("父组件条件查询触发方法" + this.timeValue);
    },
  
    //时间格式化函数，此处仅针对yyyy-MM-dd hh:mm:ss 的格式进行格式化
    dateFormat() {
      var date = new Date();
      var year = date.getFullYear();
      /* 在日期格式中，月份是从0开始的，因此要加0
       * 使用三元表达式在小于10的前面加0，以达到格式统一  如 09:11:05
       * */
      var month =
        date.getMonth() + 1 < 10
          ? "0" + (date.getMonth() + 1)
          : date.getMonth() + 1;
      var day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
      var hours =
        date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
      var minutes =
        date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
      var seconds =
        date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
      // 拼接
      return (
        year +
        "-" +
        month +
        "-" +
        day +
        " " +
        hours +
        ":" +
        minutes +
        ":" +
        seconds
      );
    },
    //日期组件触发事件
    querfromdata(data) {
      this.timeValue = data;
      alert("父组件条件查询触发方法" + this.timeValue);
    },
    //相位
    abcphase() {
      const echarts = require("echarts");
      var myChartes = echarts.init(document.getElementById("phase"));
      var option = {
        //backgroundColor:'rgba(12, 0, 0, 0.85)',
        title: {
          text: "",
          x: "center",
        },
        tooltip: {
          formatter: "{a} <br/>{c} {b}",
        },
        series: [
          {
            name: "基波电流相位",
            type: "gauge",
            // 表盘最小值
            min: 180,
            // 表盘最大值
            max: -180,
            // 表盘分割数
            splitNumber: 12,
            // 圆心位置
            center: ["50%", "50%"],
            // 半径
            radius: "65%",
            startAngle: 180,
            endAngle: -179.99,
            // 指针方向
            clockWise: true,
            title: false,
            // 表盘外框
            axisLine: {
              show: false,
              lineStyle: {
                color: [
                  [0.25, "#DAA520"],
                  [0.5, "#DAA520"],
                  [0.75, "#DAA520"],
                  [1, "#DAA520"],
                ],
                width: 12,
              },
            },
            // 表盘细分数
            axisTick: {
              show: false,
              splitNumber: 5,
              length: 6,
              lineStyle: {
                color: "#00E1FD",
                width: 1,
                type: "solid",
              },
            },
            // 分割线
            splitLine: {
              show: true,
              length: 10,
              lineStyle: {
                color: "#eee",
                width: 2,
                type: "solid",
              },
            },
            // 分割线标识
            axisLabel: {
              show: true,
              distance: 5,
              formatter: function (v) {
                switch (v + "") {
                  case "-180":
                    return "";
                  default:
                    return v;
                }
              },
            },

            // 指针设置
            pointer: {
              length: "45%",
              width: 8,
            },
            itemStyle: {
                  normal: {
                    color: '#DAA520',
                    shadowColor: 'rgba(0, 0, 0, 0.2)',
                    shadowBlur: 10,
                    shadowOffsetX: 2,
                    shadowOffsetY: 2
                  }
                },
            detail: {
              show: false,
            },
            data: [
              {
                value: 120,
                name: "A相",
              },
            ],
          },
          {
            name: "基波电流相位",
            type: "gauge",
            // 表盘最小值
            min: 180,
            // 表盘最大值
            max: -180,
            // 表盘分割数
            splitNumber: 12,
            // 圆心位置
            center: ["50%", "50%"],
            // 半径
            radius: "65%",
            startAngle: 180,
            endAngle: -179.99,
            // 指针方向
            clockWise: true,
            title: false,
            // 表盘外框
            axisLine: {
              show: true,
              lineStyle: {
                color: [
                  [0.25, "#2E8B57"],
                  [0.5, "#2E8B57"],
                  [0.75, "#2E8B57"],
                  [1, "#2E8B57"],
                ],
                width: 2,
              },
            },
            // 表盘细分数
            axisTick: {
              show: true,
              splitNumber: 5,
              length: 6,
              lineStyle: {
                color: "#00E1FD",
                width: 1,
                type: "solid",
              },
            },
            // 分割线
            splitLine: {
              show: true,
              length: 10,
              lineStyle: {
                color: "#eee",
                width: 2,
                type: "solid",
              },
            },
            // 分割线标识
            axisLabel: {
              show: false,
            },

            // 指针设置
            pointer: {
              length: "65%",
              width: 8,
            },
            itemStyle: {
                  normal: {
                    color: '#2E8B57',
                    shadowColor: 'rgba(0, 0, 0, 0.2)',
                    shadowBlur: 10,
                    shadowOffsetX: 2,
                    shadowOffsetY: 2
                  }
                },
            detail: {
              show: false,
            },
            data: [
              {
                value: 90,
                name: "B相",
              },
            ],
          },
          {
            name: "基波电流相位",
            type: "gauge",
            // 表盘最小值
            min: 180,
            // 表盘最大值
            max: -180,
            // 表盘分割数
            splitNumber: 12,
            // 圆心位置
            center: ["50%", "50%"],
            // 半径
            radius: "65%",
            startAngle: 180,
            endAngle: -179.99,
            // 指针方向
            clockWise: true,
            title: false,
            // 表盘外框
            axisLine: {
              show: true,
              lineStyle: {
                color: [
                  [0.25, "#0099FF"],
                  [0.5, "#0099FF"],
                  [0.75, "#0099FF"],
                  [1, "#0099FF"],
                ],
                width: 2,
              },
            },
            // 表盘细分数
            axisTick: {
              show: true,
              splitNumber: 5,
              length: 6,
              lineStyle: {
                color: "#00E1FD",
                width: 1,
                type: "solid",
              },
            },
            // 分割线
            splitLine: {
              show: true,
              length: 10,
              lineStyle: {
                color: "#eee",
                width: 2,
                type: "solid",
              },
            },
            // 分割线标识
            axisLabel: {
              show: false,
            },

            // 指针设置
            pointer: {
              length: "85%",
              width:8,
            },
            itemStyle: {
                  normal: {
                    color: '#A52a2a',
                    shadowColor: 'rgba(0, 0, 0, 0.2)',
                    shadowBlur: 10,
                    shadowOffsetX: 2,
                    shadowOffsetY: 2
                  }
                },
            detail: {
              show: false,
            },
            data: [
              {
                value: -90,
                name: "C相",
              },
            ],
          },
          {
            name: "基波电压相位",
            type: "gauge",
            // 表盘最小值
            min: 180,
            // 表盘最大值
            max: -180,
            // 表盘分割数
            splitNumber: 12,
            // 圆心位置
            center: ["50%", "50%"],
            // 半径
            radius: "98%",
            startAngle: 180,
            endAngle: -179.99,
            // 指针方向
            clockWise: true,
            title: false,
            // 表盘外框
            axisLine: {
              show: true,
              lineStyle: {
                color: [
                  [0.25, "#DAA520"],
                  [0.5, "#DAA520"],
                  [0.75, "#DAA520"],
                  [1, "#DAA520"],
                ],
                width: 1.5,
              },
            },
            // 表盘细分数
            axisTick: {
              show: true,
              splitNumber: 5,
              length: 6,
              lineStyle: {
                color: "#00E1FD",
                width: 1,
                type: "solid",
              },
            },
            // 分割线
            splitLine: {
              show: true,
              length: 10,
              lineStyle: {
                color: "#eee",
                width: 2,
                type: "solid",
              },
            },
            // 分割线标识
            axisLabel: {
              show: true,
              distance: 5,
              formatter: function (v) {
                switch (v + "") {
                  case "-180":
                    return "";
                  default:
                    return v;
                }
              },
            },

            // 指针设置
            pointer: {
              length: "95%",
              width: 4,
            },
            itemStyle: {
                  normal: {
                    color: '#DAA520',
                    shadowColor: 'rgba(0, 0, 0, 0.2)',
                    shadowBlur: 10,
                    shadowOffsetX: 2,
                    shadowOffsetY: 2
                  }
                },
            detail: {
              show: false,
            },
            data: [
              {
                value: -130,
                name: "A相",
              },
            ],
          },
          {
            name: "基波电压相位",
            type: "gauge",
            // 表盘最小值
            min: 180,
            // 表盘最大值
            max: -180,
            // 表盘分割数
            splitNumber: 12,
            // 圆心位置
            center: ["50%", "50%"],
            // 半径
            radius: "98%",
            startAngle: 180,
            endAngle: -179.99,
            // 指针方向
            clockWise: true,
            title: false,
            // 表盘外框
            axisLine: {
              show: true,
              lineStyle: {
                color: [
                  [0.25, "#2E8B57"],
                  [0.5, "#2E8B57"],
                  [0.75, "#2E8B57"],
                  [1, "#2E8B57"],
                ],
                width: 1.5,
              },
            },
            // 表盘细分数
            axisTick: {
              show: true,
              splitNumber: 5,
              length: 6,
              lineStyle: {
                color: "#00E1FD",
                width: 1,
                type: "solid",
              },
            },
            // 分割线
            splitLine: {
              show: true,
              length: 10,
              lineStyle: {
                color: "#eee",
                width: 2,
                type: "solid",
              },
            },
            // 分割线标识
            axisLabel: {
              show: false,
            },

            // 指针设置
            pointer: {
              length: "80%",
              width: 4,
            },
            itemStyle: {
                  normal: {
                    color: '#2E8B57',
                    shadowColor: 'rgba(0, 0, 0, 0.2)',
                    shadowBlur: 10,
                    shadowOffsetX: 2,
                    shadowOffsetY: 2
                  }
                },
            detail: {
              show: false,
            },
            data: [
              {
                value: 150,
                name: "B相",
              },
            ],
          },
          {
            name: "基波电压相位",
            type: "gauge",
            // 表盘最小值
            min: 180,
            // 表盘最大值
            max: -180,
            // 表盘分割数
            splitNumber: 12,
            // 圆心位置
            center: ["50%", "50%"],
            // 半径
            radius: "98%",
            startAngle: 180,
            endAngle: -179.99,
            // 指针方向
            clockWise: true,
            title: false,
            // 表盘外框
            axisLine: {
              show: true,
              lineStyle: {
                color: [
                  [0.25, "#FF0033"],
                  [0.5, "#FF0033"],
                  [0.75, "#FF0033"],
                  [1, "#FF0033"],
                ],
                width: 1.5,
              },
            },
            // 表盘细分数
            axisTick: {
              show: false,
              splitNumber: 5,
              length: 6,
              lineStyle: {
                color: "#00E1FD",
                width: 1,
                type: "solid",
              },
            },
            // 分割线
            splitLine: {
              show: true,
              length: 10,
              lineStyle: {
                color: "green",
                width: 2,
                type: "solid",
              },
              textStyle: {
                color: "red",
              },
            },
            // 分割线标识
            axisLabel: {
              show: false,
            },

            // 指针设置
            pointer: {
              length: "95%",
              width: 4,
            },
            itemStyle: {
                  normal: {
                    color: '#A52a2a',
                    shadowColor: 'rgba(0, 0, 0, 0.2)',
                    shadowBlur: 10,
                    shadowOffsetX: 2,
                    shadowOffsetY: 2
                  }
                },
            detail: {
              show: false,
            },
            data: [
              {
                value: 30,
                name: "C相",
              },
            ],
          },
        ],
      };
      myChartes.setOption(option)
window.echartsArr.push(myChartes);
    },
    //实时数据
    getabcvoltage() {
      const echarts = require("echarts");
      var myChartes1 = echarts.init(document.getElementById("AB"));
      var myChartes2 = echarts.init(document.getElementById("BC"));
      var myChartes3 = echarts.init(document.getElementById("CA"));
      var myChartes4 = echarts.init(document.getElementById("A"));
      var myChartes5 = echarts.init(document.getElementById("B"));
      var myChartes6 = echarts.init(document.getElementById("C"));
      //电压
      var option1 = {
      
        title: {
            text: '',
            x: 'center'
        },
        tooltip: {
            formatter: "{a} <br/>{c} {b}"
        },
        series: [
        {
                name: '电压有效值',
                type: 'gauge',
                center: ['60%', '90%'], // 默认全局居中
                radius: '170%',
                min: 0,
                max: 50,
                startAngle: 180,
                endAngle: 90,
                splitNumber: 2,
                axisLine: { // 坐标轴线
                    lineStyle: { // 属性lineStyle控制线条样式
                        color: [[0.25, '#DAA520'], [0.5, '#DAA520'],
                            [0.75, '#DAA520'], [1, '#DAA520']],
                        width: 5
                    }
                },
                axisTick: { // 坐标轴小标记
                    length: 12, // 属性length控制线长
                    lineStyle: { // 属性lineStyle控制线条样式
                        color: 'auto'
                    }
                },
                splitLine: { // 分隔线
                    length: 20, // 属性length控制线长
                    lineStyle: { // 属性lineStyle（详见lineStyle）控制线条样式
                        color: 'auto'
                    }
                },
                pointer: {
                    width: 5
                },
                itemStyle: {
                  normal: {
                    color: '#DAA520',
                    shadowColor: 'rgba(0, 0, 0, 0.5)',
                    shadowBlur: 10,
                    shadowOffsetX: 2,
                    shadowOffsetY: 2
                  }
                },
                title: {
                    offsetCenter: ['-125%', '-55%'], // x, y，单位px
                },
                detail: {
                    // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                    fontWeight: 'bolder',
                    offsetCenter: ['40%', '-35%'],
                    fontSize: '20px',
                    fontWeight: 'bolder'
                },
                data: [{
                    value: [0],
                    name: 'AB(kV)'
                }]
            }],
      };
      var option2 = {
        title: {
            text: '',
            x: 'center'
        },
        tooltip: {
            formatter: "{a} <br/>{c} {b}"
        },
        series: [
        {
                name: '电压有效值',
                type: 'gauge',
                center: ['60%', '90%'], // 默认全局居中
                radius: '170%',
                min: 0,
                max: 50,
                startAngle: 180,
                endAngle: 90,
                splitNumber: 2,
                axisLine: { // 坐标轴线
                    lineStyle: { // 属性lineStyle控制线条样式
                        color: [[0.25, '#2E8B57'], [0.5, '#2E8B57'],
                            [0.75, '#2E8B57'], [1, '#2E8B57']],
                        width: 5
                    }
                },
                axisTick: { // 坐标轴小标记
                    length: 12, // 属性length控制线长
                    lineStyle: { // 属性lineStyle控制线条样式
                        color: 'auto'
                    }
                },
                splitLine: { // 分隔线
                    length: 20, // 属性length控制线长
                    lineStyle: { // 属性lineStyle（详见lineStyle）控制线条样式
                        color: 'auto'
                    }
                },
                pointer: {
                    width: 5
                },
                itemStyle: {
                  normal: {
                    color: '#2E8B57',
                    shadowColor: 'rgba(0, 0, 0, 0.5)',
                    shadowBlur: 10,
                    shadowOffsetX: 2,
                    shadowOffsetY: 2
                  }
                },
                title: {
                    offsetCenter: ['-125%', '-55%'], // x, y，单位px
                },
                detail: {
                    // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                    fontWeight: 'bolder',
                    offsetCenter: ['40%', '-35%'],
                    fontSize: '20px',
                    fontWeight: 'bolder'
                },
                data: [{
                    value: [0],
                    name: 'BC(kV)'
                }]
            },
        ],
      };
      var option3 = {
        title: {
            text: '',
            x: 'center'
        },
        tooltip: {
            formatter: "{a} <br/>{c} {b}"
        },

        series: [
        {
                name: '电压有效值',
                type: 'gauge',
                center: ['60%', '90%'], // 默认全局居中
                radius: '170%',
                min: 0,
                max: 50,
                startAngle: 180,
                endAngle: 90,
                splitNumber: 2,
                axisLine: { // 坐标轴线
                    lineStyle: { // 属性lineStyle控制线条样式
                        color: [[0.25, '#A52a2a'], [0.5, '#A52a2a'],
                            [0.75, '#A52a2a'], [1, '#A52a2a']],
                        width: 5
                    }
                },
                axisTick: { // 坐标轴小标记
                    length: 12, // 属性length控制线长
                    lineStyle: { // 属性lineStyle控制线条样式
                        color: 'auto'
                    }
                },
                splitLine: { // 分隔线
                    length: 20, // 属性length控制线长
                    lineStyle: { // 属性lineStyle（详见lineStyle）控制线条样式
                        color: 'auto'
                    }
                },
                pointer: {
                    width: 5
                },
                itemStyle: {
                  normal: {
                    color: '#A52a2a',
                    shadowColor: 'rgba(0, 0, 0, 0.5)',
                    shadowBlur: 10,
                    shadowOffsetX: 2,
                    shadowOffsetY: 2
                  }
                },
                title: {
                    offsetCenter: ['-125%', '-55%'], // x, y，单位px
                },
                detail: {
                    // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                    fontWeight: 'bolder',
                    offsetCenter: ['40%', '-35%'],
                    fontSize: '20px',
                    fontWeight: 'bolder'
                },
                data: [{
                    value: [0],
                    name:  'CA(kV)'
                }]
            },
        ],
      };
      //电流
      var option4 = {
        title: {
            text: '',
            x: 'center'
        },
        tooltip: {
            formatter: "{a} <br/>{c} {b}"
        },


        series: [
        {
                name: 'A相电流有效值',
                type: 'gauge',
                center: ['40%', '90%'], // 默认全局居中
                radius: '170%',
                min: 0,
                max: 300,
                startAngle: 90,
                endAngle: 0,
                splitNumber: 2,
                axisLine: { // 坐标轴线
                    lineStyle: { // 属性lineStyle控制线条样式
                        color: [[0.25, '#DAA520'], [0.5, '#DAA520'],
                            [0.75, '#DAA520'], [1, '#DAA520']],
                        width: 5
                    }
                },
                axisTick: { // 坐标轴小标记
                    length: 12, // 属性length控制线长
                    lineStyle: { // 属性lineStyle控制线条样式
                        color: 'auto'
                    }
                },
                splitLine: { // 分隔线
                    length: 20, // 属性length控制线长
                    lineStyle: { // 属性lineStyle（详见lineStyle）控制线条样式
                        color: 'auto'
                    }
                },
                pointer: {
                    width: 5
                },
                itemStyle: {
                  normal: {
                    color: '#DAA520',
                    shadowColor: 'rgba(0, 0, 0, 0.5)',
                    shadowBlur: 10,
                    shadowOffsetX: 2,
                    shadowOffsetY: 2
                  }
                },
                title: {
                    offsetCenter: ['125%', '-55%'], // x, y，单位px
                },
                detail: {
                    // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                    fontWeight: 'bolder',
                    offsetCenter: ['-45%', '-35%'],
                    fontSize: '20px',
                    fontWeight: 'bolder'
                },
                data: [{
                    value: [0],
                    name: 'A相(A)'
                }]
            },
        ],
      };
      var option5 = {
       
        title: {
            text: '',
            x: 'center'
        },
        tooltip: {
            formatter: "{a} <br/>{c} {b}"
        },

        series: [
        {
                name: 'B相电流有效值',
                type: 'gauge',
                center: ['40%', '90%'], // 默认全局居中
                radius: '170%',
                min: 0,
                max: 300,
                startAngle: 90,
                endAngle: 0,
                splitNumber: 2,
                axisLine: { // 坐标轴线
                    lineStyle: { // 属性lineStyle控制线条样式
                        color: [[0.25, '#2E8B57'], [0.5, '#2E8B57'],
                            [0.75, '#2E8B57'], [1, '#2E8B57']],
                        width: 5
                    }
                },
                axisTick: { // 坐标轴小标记
                    length: 12, // 属性length控制线长
                    lineStyle: { // 属性lineStyle控制线条样式
                        color: 'auto'
                    }
                },
                splitLine: { // 分隔线
                    length: 20, // 属性length控制线长
                    lineStyle: { // 属性lineStyle（详见lineStyle）控制线条样式
                        color: 'auto'
                    }
                },
                pointer: {
                    width: 5
                },
                itemStyle: {
                  normal: {
                    color: '#2E8B57',
                    shadowColor: 'rgba(0, 0, 0, 0.5)',
                    shadowBlur: 10,
                    shadowOffsetX: 2,
                    shadowOffsetY: 2
                  }
                },
                title: {
                    offsetCenter: ['125%', '-55%'], // x, y，单位px
                },
                detail: {
                    // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                    fontWeight: 'bolder',
                    offsetCenter: ['-45%', '-35%'],
                    fontSize: '20px',
                    fontWeight: 'bolder'
                },
                data: [{
                    value: [0],
                    name: 'B相(A)'
                }]
            },
        ],
      };
      var option6 = {
        title: {
            text: '',
            x: 'center'
        },
        tooltip: {
            formatter: "{a} <br/>{c} {b}"
        },
        series: [
        {
                name: 'C相电流有效值',
                type: 'gauge',
                center: ['40%', '90%'], // 默认全局居中
                radius: '170%',
                min: 0,
                max: 300,
                startAngle: 90,
                endAngle: 0,
                splitNumber: 2,
                axisLine: { // 坐标轴线
                    lineStyle: { // 属性lineStyle控制线条样式
                        color: [[0.25, '#A52a2a'], [0.5, '#A52a2a'],
                            [0.75, '#A52a2a'], [1, '#A52a2a']],
                        width: 5
                    }
                },
                axisTick: { // 坐标轴小标记
                    length: 12, // 属性length控制线长
                    lineStyle: { // 属性lineStyle控制线条样式
                        color: 'auto'
                    }
                },
                splitLine: { // 分隔线
                    length: 20, // 属性length控制线长
                    lineStyle: { // 属性lineStyle（详见lineStyle）控制线条样式
                        color: 'auto'
                    }
                },
                pointer: {
                    width: 5,
                    color:'red'
                },
                itemStyle: {
                  normal: {
                    color: '#A52a2a',
                    shadowColor: 'rgba(0, 0, 0, 0.5)',
                    shadowBlur: 10,
                    shadowOffsetX: 2,
                    shadowOffsetY: 2
                  }
                },
                title: {
                    offsetCenter: ['125%', '-55%'], // x, y，单位px
                },
                detail: {
                    // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                    fontWeight: 'bolder',
                    offsetCenter: ['-45%', '-35%'],
                    fontSize: '20px',
                    fontWeight: 'bolder'
                },
                data: [{
                    value: [0],
                    name: 'C相(A)'
                }]
            },
        ],
      };
      myChartes1.setOption(option1)
window.echartsArr.push(myChartes1);
      myChartes2.setOption(option2)
window.echartsArr.push(myChartes2);
      myChartes3.setOption(option3)
window.echartsArr.push(myChartes3);
      myChartes4.setOption(option4)
window.echartsArr.push(myChartes4);
      myChartes5.setOption(option5)
window.echartsArr.push(myChartes5);
      myChartes6.setOption(option6)
window.echartsArr.push(myChartes6);
    },

    gototrendanaly() {
      this.flag = false;
      this.flag1 = true;
      this.flag2 = false;
  
    },
    gotoharmonics() {
      this.flag2 = true;
      this.flag1 = false;
      this.flag = false;
    },
    back() {
      this.flag = true;
      this.flag1 = false;
      this.flag2 = false;
      this.$nextTick(() => {
        this.getabcvoltage();
      });
    },
  },
};
</script>
<style lang="less" scoped>

</style>