<template>
  <div class="fullHeight greenPage">
    <div class="headerBox">
      <h1 class="title">
        {{ $store.state.currentProDetail.projectName }} -
        {{ $t('message.electricBox.switchBox')
        }}{{ $t('message.electricBox.statistics') }}
      </h1>
      <closePage v-if="closeShow"></closePage>
    </div>
    <div class="leftLine"></div>
    <div class="rightLine"></div>
    <div class="bottomLine"></div>
    <div class="greenContent">
      <div class="top">
        <div class="smallDiv smallDiv1 fullHeight">
          <div class="blockBox fullHeight">
            <div class="title">
              <p class="e1">{{ $t('message.electricBox.condition') }}</p>
            </div>
            <div class="blockContent">
              <div class="fullHeight echarts" ref="monitor"></div>
              <div class="content">
                <div>
                  {{ $t('message.electricBox.totalNumber') }}：{{
                    devStatistics.devTotalNum
                  }}
                </div>
                <div>
                  {{ $t('message.electricBox.online')
                  }}{{ $t('message.electricBox.facility') }}：{{
                    devStatistics.onlineNum
                  }}
                </div>
                <div>
                  {{ $t('message.electricBox.offline')
                  }}{{ $t('message.electricBox.facility') }}：{{
                    devStatistics.offlineNum
                  }}
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="centerDiv fullHeight">
          <div class="title">
            <p class="e2">
              {{ $t('message.electricBox.switchBox')
              }}{{ $t('message.electricBox.realTimeData') }}
            </p>
          </div>
          <div class="greenBtn selectDev">
            <img
              v-for="item in 4"
              :key="item"
              :class="'arrow' + item"
              class="arrow"
              src="@/assets/images/greenOverview/arrow.png"
            />
            <el-select
              v-model="devSn"
              placeholder="请选择"
              size="mini"
              @change="checkedData"
              style="background-color: inherit"
            >
              <el-option
                v-for="item in devList"
                :key="item.id"
                :label="item.devName"
                :value="item.devSn"
              >
              </el-option>
            </el-select>
          </div>
          <div
            class="centerChart"
            style="box-sizing: border-box; padding: 50px 70px"
          >
            <div
              v-for="(item, index) in realTimeData"
              :key="index"
              class="center_realTimeData"
            >
              <img :src="item.url" />
              <div style="width: 85px">
                <div
                  style="
                    text-align: center;
                    margin-bottom: 10px;
                    font-size: 16px;
                    color: #fff;
                  "
                >
                  {{ item.number }}
                  {{
                    item.type == 1
                      ? $t('message.electricBox.volt')
                      : item.type == 2
                      ? '℃'
                      : $t('message.electricBox.milliampere')
                  }}
                </div>
                <div
                  style="color: #bfa348; font-size: 14px; text-align: center"
                >
                  {{ item.title }}
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="smallDiv fullHeight">
          <div class="blockBox fullHeight">
            <div class="title">
              <p class="e3">
                {{ $t('message.electricBox.alarm')
                }}{{ $t('message.electricBox.list') }}
              </p>
            </div>
            <div class="blockContent alarmBlockContent">
              <div style="width: 100%; height: 120px" ref="alarmList"></div>
              <vue-scroll>
                <table class="greenTable">
                  <thead>
                    <tr>
                      <th>
                        {{ $t('message.electricBox.alarm')
                        }}{{ $t('message.electricBox.facility') }}
                      </th>
                      <th>
                        {{ $t('message.electricBox.alarm')
                        }}{{ $t('message.electricBox.time') }}
                      </th>
                      <th>
                        {{ $t('message.electricBox.alarm')
                        }}{{ $t('message.electricBox.type') }}
                      </th>
                    </tr>
                  </thead>

                  <tbody>
                    <tr
                      v-for="item in alarmListData.list"
                      :key="item.id"
                      style="height: 30px"
                    >
                      <td>{{ item.devName }}</td>
                      <td>{{ item.creatTime }}</td>
                      <td>{{ item.alarmType }}</td>
                    </tr>
                  </tbody>
                  <div
                    class="placeholderBox placeholderBox2"
                    v-if="alarmListData.list.length == 0"
                    style="top: 28%"
                  >
                    <img src="@/assets/images/noData3.png" alt="" srcset="" />
                    <p>{{ $t('message.electricBox.noData') }}</p>
                  </div>
                </table>
              </vue-scroll>
            </div>
          </div>
        </div>
      </div>
      <div class="bottom">
        <div class="blockBox fullHeight">
          <div class="title">
            <p class="e6">{{ $t('message.electricBox.hours24Data') }}</p>
          </div>
          <div>
            <div class="operateBar">
              <span
                class="greenBtn"
                @click="greenBtn(1)"
                :class="checkedBtn == 1 ? 'checkedBtn' : ''"
              >
                <img
                  v-for="item in 4"
                  :key="item"
                  :class="'arrow' + item"
                  class="arrow"
                  src="@/assets/images/greenOverview/arrow.png"
                />
                {{ $t('message.electricBox.voltage') }}
              </span>
              <span
                class="greenBtn"
                @click="greenBtn(2)"
                :class="checkedBtn == 2 ? 'checkedBtn' : ''"
              >
                <img
                  v-for="item in 4"
                  :key="item"
                  :class="'arrow' + item"
                  class="arrow"
                  src="@/assets/images/greenOverview/arrow.png"
                />
                {{ $t('message.electricBox.electricity') }}
              </span>
              <span
                class="greenBtn"
                @click="greenBtn(3)"
                :class="checkedBtn == 3 ? 'checkedBtn' : ''"
              >
                <img
                  v-for="item in 4"
                  :key="item"
                  :class="'arrow' + item"
                  class="arrow"
                  src="@/assets/images/greenOverview/arrow.png"
                />
                {{ $t('message.electricBox.leakCurrent') }}
              </span>
              <span
                class="greenBtn"
                @click="greenBtn(4)"
                :class="checkedBtn == 4 ? 'checkedBtn' : ''"
              >
                <img
                  v-for="item in 4"
                  :key="item"
                  :class="'arrow' + item"
                  class="arrow"
                  src="@/assets/images/greenOverview/arrow.png"
                />
                {{ $t('message.electricBox.cableTemperature') }}
              </span>
              <span
                class="greenBtn"
                @click="greenBtn(5)"
                :class="checkedBtn == 5 ? 'checkedBtn' : ''"
              >
                <img
                  v-for="item in 4"
                  :key="item"
                  :class="'arrow' + item"
                  class="arrow"
                  src="@/assets/images/greenOverview/arrow.png"
                />
                {{ $t('message.electricBox.temperature') }}
              </span>
            </div>
          </div>
          <div class="boxEcharts" v-if="allHourData.length > 0">
            <div class="near24hChart" ref="near24hChart"></div>
          </div>
          <div
            v-else
            class="notaDataStlye"
            style="
              position: absolute;
              width: 92px;
              height: 25px;
              top: 80%;
              left: 23%;
            "
          >
            <img src="@/assets/images/noData3.png" alt="" srcset="" />
            <p style="color: #ccc; margin-left: 10px">暂无数据</p>
          </div>
        </div>
        <div class="blockBox fullHeight">
          <div class="title">
            <p class="e7">
              {{ $t('message.electricBox.facility')
              }}{{ $t('message.electricBox.console') }}
            </p>
          </div>
          <vue-scroll>
            <div
              class="blockContent flex2"
              style="padding: 15px 0; box-sizing: border-box"
            >
              <div
                class="facility_info"
                v-if="devStatistics.list.length > 0"
                v-for="(item, index) in devStatistics.list"
                :key="index"
              >
                <div class="title">
                  {{ item.devName }}
                </div>
                <div class="flex">
                  <div class="left">
                    <div>
                      {{ $t('message.electricBox.facility')
                      }}{{ $t('message.electricBox.state') }}
                    </div>
                    <div :class="item.isClosed == 1 ? 'state2' : 'state'">
                      {{ item.isClosed == 1 ? '离线' : '在线' }}
                    </div>
                  </div>
                  <div class="right">
                    <div>
                      {{ $t('message.electricBox.facility')
                      }}{{ $t('message.electricBox.control') }}
                    </div>
                    <div class="switch">
                      <el-switch
                        v-model="item.switchState"
                        class="demo"
                        :disabled="true"
                        active-color="#FEC34A"
                        inactive-color="#858584"
                        :active-text="$t('message.electricBox.open')"
                        :inactive-text="$t('message.electricBox.close')"
                      ></el-switch>
                    </div>
                  </div>
                </div>
              </div>
              <!-- <div
                class="placeholderBox placeholderBox2"
                v-else
                style="top: 28%"
              >
                <img src="@/assets/images/noData3.png" alt="" srcset="" />
                <p>{{ $t('message.electricBox.noData') }}</p>
              </div> -->
            </div>
          </vue-scroll>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import echarts from 'echarts4';;
import {
  getDevListApi,
  getRealTimeDataApi,
  getBoxAlarmStatisticsApi,
  getDevStatisticsApi,
  getSelectDataListApi,
} from "@/assets/js/api/electricBox";
import closePage from "@/components/closePage"
export default {
  components: { closePage },
  data() {
    return {
      closeShow: true,
      projectSn: "",
      devList: [],
      devSn: "",
      devName: "",
      realTimeData: [
        {
          url: require("../../../assets/images/electricOverview/dy.png"),
          title:
            "A" +
            this.$t("message.electricBox.mutually") +
            this.$t("message.electricBox.voltage"),
          number: "0",
          type: 1,
        },
        {
          url: require("../../../assets/images/electricOverview/dy.png"),
          title:
            "B" +
            this.$t("message.electricBox.mutually") +
            this.$t("message.electricBox.voltage"),
          number: "0",
          type: 1,
        },
        {
          url: require("../../../assets/images/electricOverview/dy.png"),
          title:
            "C" +
            this.$t("message.electricBox.mutually") +
            this.$t("message.electricBox.voltage"),
          number: "0",
          type: 1,
        },
        {
          url: require("../../../assets/images/electricOverview/wd.png"),
          title:
            "A" +
            this.$t("message.electricBox.mutually") +
            this.$t("message.electricBox.cableTemperature"),
          number: "0",
          type: 2,
        },
        {
          url: require("../../../assets/images/electricOverview/wd.png"),
          title:
            "B" +
            this.$t("message.electricBox.mutually") +
            this.$t("message.electricBox.cableTemperature"),
          number: "0",
          type: 2,
        },
        {
          url: require("../../../assets/images/electricOverview/wd.png"),
          title:
            "C" +
            this.$t("message.electricBox.mutually") +
            this.$t("message.electricBox.cableTemperature"),
          number: "0",
          type: 2,
        },
        {
          url: require("../../../assets/images/electricOverview/dl.png"),
          title:
            "A" +
            this.$t("message.electricBox.mutually") +
            this.$t("message.electricBox.electricity"),
          number: "0",
          type: 1,
        },
        {
          url: require("../../../assets/images/electricOverview/dl.png"),
          title:
            "B" +
            this.$t("message.electricBox.mutually") +
            this.$t("message.electricBox.electricity"),
          number: "0",
          type: 1,
        },
        {
          url: require("../../../assets/images/electricOverview/dl.png"),
          title:
            "C" +
            this.$t("message.electricBox.mutually") +
            this.$t("message.electricBox.electricity"),
          number: "0",
          type: 1,
        },
        {
          url: require("../../../assets/images/electricOverview/wd.png"),
          title: this.$t("message.electricBox.temperature"),
          number: "0",
          type: 2,
        },
        {
          url: require("../../../assets/images/electricOverview/dl.png"),
          title: this.$t("message.electricBox.leakCurrent"),
          number: "0",
          type: 3,
        },
      ],
      alarmListData: {},
      totalAlarmNum: "",
      monthAlarmNum: "",
      dayAlarmNum: "",
      devStatistics: {},
      checkedBtn: 1,
      timeArr: [],
      allHourData: [],
      showDataA: [],
      showDataB: [],
      showDataC: [],
      electricLeakage: [],
      ambientTemperature: [],
      near24hChart: [],
    };
  },
  created() {
    this.projectSn = this.$store.state.projectSn;
    this.getDevList();
  },
  mounted() {
    if (window.history.length != 1) {
      this.closeShow = true
    } else {
      this.closeShow = false
    }
    this.getDevStatisticsData();
    this.getBoxAlarmStatistics();
    this.createdEcharts2([], [], [], []);

  },
  methods: {
    //获取 配电箱实时数据  设备下拉列表
    getDevList() {
      console.log('调用了吗');
      let data = {
        projectSn: this.projectSn,
      };
      getDevListApi(data).then((res) => {
        if (res.code == 200) {
          if (res.result.length > 0) {
            this.devList = res.result;
            this.devSn = res.result[0].devSn;
            this.devName = res.result[0].devName;
            this.getSelectDataList();
            this.getRealTimeData();
          }
        }
      });
    },

    //  切换设备
    checkedData(value) {
      this.devSn = value
      console.log('切换设备', value);
      this.getRealTimeData();
      this.getSelectDataList();
      this.near24hChart.clear();
      this.$refs.near24hChart = ''
    },

    //获取设备的实时数据
    getRealTimeData() {
      let data = {
        devSn: this.devSn,
        projectSn: this.projectSn,
      };
      getRealTimeDataApi(data).then((res) => {
        if (res.code == 200) {
          this.realTimeData[0].number = res.result ? res.result.voltageA : 0;
          this.realTimeData[1].number = res.result ? res.result.voltageB : 0;
          this.realTimeData[2].number = res.result ? res.result.voltageC : 0;
          this.realTimeData[3].number = res.result
            ? res.result.cableTemperatureA
            : 0;
          this.realTimeData[4].number = res.result
            ? res.result.cableTemperatureB
            : 0;
          this.realTimeData[5].number = res.result
            ? res.result.cableTemperatureC
            : 0;
          this.realTimeData[6].number = res.result
            ? res.result.phaseCurrentA
            : 0;
          this.realTimeData[7].number = res.result
            ? res.result.phaseCurrentB
            : 0;
          this.realTimeData[8].number = res.result
            ? res.result.phaseCurrentC
            : 0;
          this.realTimeData[9].number = res.result
            ? res.result.ambientTemperature
            : 0;
          this.realTimeData[10].number = res.result
            ? res.result.electricLeakage
            : 0;
        }
      });
    },

    //报警列表
    getBoxAlarmStatistics() {
      let data = {
        projectSn: this.projectSn,
      };
      getBoxAlarmStatisticsApi(data).then((res) => {
        if (res.code == 200) {
          this.alarmListData = res.result;
          this.totalAlarmNum = res.result.alarmNum.totalAlarmNum
            ? res.result.alarmNum.totalAlarmNum
            : 0;
          this.monthAlarmNum = res.result.alarmNum.totalAlarmNum
            ? res.result.alarmNum.monthAlarmNum
            : 0;
          this.dayAlarmNum = res.result.alarmNum.totalAlarmNum
            ? res.result.alarmNum.dayAlarmNum
            : 0;
          this.createdEcharts1();
        }
      });
    },

    //创建图表 --- 配电箱
    createdEcharts3() {
      let that = this;
      //项目进度
      let monitor = echarts.init(this.$refs.monitor);
      monitor.clear();

      var text;

      var dataArr = [
        {
          value: this.devStatistics.grade,
          name: this.$t("message.electricBox.healthScore"),
        },
      ];
      var color = new echarts.graphic.LinearGradient(0, 0, 1, 0, [
        {
          offset: 0,
          color: "#654C27", // 0% 处的颜色
        },
        {
          offset: 0.2,
          color: "#846A42", // 100% 处的颜色
        },
        {
          offset: 0.6,
          color: "#F9DB9E", // 100% 处的颜色
        },
        {
          offset: 1,
          color: "#FEC34B", // 100% 处的颜色
        },
      ]);
      var colorSet = [
        [0.91, color],
        [1, "#342B18"],
      ];
      var rich = {
        white: {
          fontSize: 14,
          color: "#fff",
          fontWeight: "500",
          padding: [-93, 0, 0, 3],
        },
        bule: {
          fontSize: 30,
          fontFamily: "DINBold",
          color: "#fff",
          fontWeight: "700",
          padding: [-88, 0, 0, 0],
        },
        radius: {
          width: 350,
          height: 80,
          lineHeight: 80,
          borderWidth: 1,
          fontSize: 14,
          color: "#fff",
          borderRadius: 20,
          textAlign: "center",
          padding: [-100, 0, 0, 0],
        },
      };
      var option = {
        // backgroundColor: "#0E1327",
        tooltip: {
          formatter: "{a} <br/>{b} : {c}%",
        },

        series: [
          {
            //内圆
            type: "pie",
            radius: "100%",
            center: ["50%", "50%"],
            z: 0,
            itemStyle: {
              normal: {
                color: "#11100F",
                label: {
                  show: false,
                },
                labelLine: {
                  show: false,
                },
              },
            },
            hoverAnimation: false,
            label: {
              show: false,
            },
            tooltip: {
              show: false,
            },
            data: this.devStatistics.grade,
          },
          {
            //内圆
            type: "pie",
            radius: "92%",
            center: ["50%", "50%"],
            z: 0,
            itemStyle: {
              normal: {
                color: "#15130F",
                label: {
                  show: false,
                },
                labelLine: {
                  show: false,
                },
              },
            },
            hoverAnimation: false,
            label: {
              show: false,
            },
            tooltip: {
              show: false,
            },
            data: [0],
          },
          {
            //内圆
            type: "pie",
            radius: "84%",
            center: ["50%", "50%"],
            z: 0,
            itemStyle: {
              normal: {
                color: "#1E1910",
                label: {
                  show: false,
                },
                labelLine: {
                  show: false,
                },
              },
            },
            hoverAnimation: false,
            label: {
              show: false,
            },
            tooltip: {
              show: false,
            },
            data: [0],
          },
          {
            type: "gauge",
            name: this.$t("message.electricBox.outerAuxiliary"),
            radius: "74%",
            startAngle: "225",
            endAngle: "-45",
            splitNumber: "100",
            pointer: {
              show: false,
            },
            detail: {
              show: false,
            },
            data: [
              {
                value: 1,
              },
            ],
            // data: [{value: 1, name: 90}],
            title: {
              show: true,
              offsetCenter: [0, 30],
              textStyle: {
                color: "#fff",
                fontStyle: "normal",
                fontWeight: "normal",
                fontFamily: "微软雅黑",
                fontSize: 20,
              },
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: [[1, "#806841"]],
                width: 2,
                opacity: 1,
              },
            },
            axisTick: {
              show: false,
            },
            splitLine: {
              show: true,
              length: 20,
              lineStyle: {
                color: "#051932",
                width: 0,
                type: "solid",
              },
            },
            axisLabel: {
              show: false,
            },
          },
          {
            type: "gauge",
            radius: "65%",
            startAngle: "225",
            endAngle: "-45",
            pointer: {
              show: false,
            },
            detail: {
              formatter: function (value) {
                var num = Math.round(value);
                return (
                  "{bule|" +
                  num +
                  "}{white|分}" +
                  "{size|" +
                  "}\n{radius|" +
                  that.$t("message.electricBox.healthScore") +
                  "}"
                );
              },
              rich: rich,
              offsetCenter: ["0%", "0%"],
            },
            data: dataArr,
            title: {
              show: false,
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: colorSet,
                width: 5,
                shadowOffsetX: 0,
                shadowOffsetY: 0,
                opacity: 1,
              },
            },
            axisTick: {
              show: false,
            },
            splitLine: {
              show: false,
              length: 25,
              lineStyle: {
                color: "#846B42",
                width: 2,
                type: "solid",
              },
            },
            axisLabel: {
              show: false,
            },
          },
          {
            name: "灰色内圈", //刻度背景
            type: "gauge",
            z: 2,
            radius: "52%",
            startAngle: "225",
            endAngle: "-45",
            //center: ["50%", "75%"], //整体的位置设置
            axisLine: {
              // 坐标轴线
              lineStyle: {
                // 属性lineStyle控制线条样式
                color: [[1, "#9F865A"]],
                width: 2,
                opacity: 1, //刻度背景宽度
              },
            },
            splitLine: {
              show: false,
            },
            // data: [{
            //     show: false,
            //     value: '80'
            // }], //作用不清楚
            axisLabel: {
              show: false,
            },
            pointer: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            detail: {
              show: 0,
            },
          },
          {
            name: "白色圈刻度",
            type: "gauge",
            radius: "52%",
            startAngle: 225, //刻度起始
            endAngle: -45, //刻度结束
            z: 4,
            axisTick: {
              show: false,
            },
            splitLine: {
              length: 8, //刻度节点线长度
              lineStyle: {
                width: 2,
                color: "#E5B34A",
              }, //刻度节点线
            },
            axisLabel: {
              color: "rgba(255,255,255,0)",
              fontSize: 12,
            }, //刻度节点文字颜色
            pointer: {
              show: false,
            },
            axisLine: {
              lineStyle: {
                opacity: 0,
              },
            },
            detail: {
              show: false,
            },
            data: [
              {
                value: 0,
                name: "",
              },
            ],
          },
          {
            //内圆
            type: "pie",
            radius: "40%",
            center: ["50%", "50%"],
            z: 1,
            itemStyle: {
              normal: {
                color: new echarts.graphic.RadialGradient(
                  0.5,
                  0.5,
                  0.8,
                  [
                    {
                      offset: 0,
                      color: "#FEC758",
                    },

                    {
                      offset: 0.8,
                      color: "#000000",
                    },
                  ],
                  false
                ),
                label: {
                  show: false,
                },
                labelLine: {
                  show: false,
                },
              },
            },
            hoverAnimation: false,
            label: {
              show: false,
            },
            tooltip: {
              show: false,
            },
            data: [0],
          },
        ],
      };
      monitor.setOption(option);
    },

    //报警列表
    createdEcharts1() {
      let that = this;
      var color = new echarts.graphic.LinearGradient(0, 1, 1, 0, [
        {
          offset: 0,
          color: "#EFD49F", // 0% 处的颜色
        },
        {
          offset: 0.2,
          color: "#846A42", // 100% 处的颜色
        },
        {
          offset: 0.6,
          color: "#F9DB9E", // 100% 处的颜色
        },
        {
          offset: 1,
          color: "#FEC34B", // 100% 处的颜色
        },
      ]);

      let alarmList = echarts.init(this.$refs.alarmList);
      alarmList.clear();

      let option = {
        series: [
          {
            type: "pie",
            center: ["16%", "50%"],
            hoverAnimation: false,
            radius: [38, 43],
            x: "0%", // for funnel
            data: [
              {
                name: "other",
                value: 0,
                label: {
                  normal: {
                    show: false,
                  },
                },
                labelLine: {
                  normal: {
                    show: false,
                  },
                },
                itemStyle: {
                  normal: {
                    color: "#6E4D0A",
                  },
                },
              },
              {
                name: this.$t("message.electricBox.totalAlarm"),
                value: this.totalAlarmNum,
                label: {
                  normal: {
                    position: "center",
                    color: "#989899",
                    fontSize: 12,
                    padding: [0, 0, 20, 0],
                    formatter: function (params) {
                      return (
                        "{percent|" +
                        params.value +
                        "}\n" +
                        that.$t("message.electricBox.totalAlarm")
                      );
                    },
                    rich: {
                      percent: {
                        color: "#D2B34F",
                        fontSize: 20,
                        padding: [5, 0, 20, 0],
                      },
                    },
                  },
                },
                labelLine: {
                  normal: {
                    show: false,
                  },
                },
                itemStyle: {
                  normal: {
                    color: color,
                  },
                },
              },
            ],
          },
          {
            type: "pie",
            center: ["50%", "50%"],
            radius: [38, 43],
            hoverAnimation: false,

            x: "0%", // for funnel
            data: [
              {
                name: "other",
                value: 0,
                label: {
                  normal: {
                    show: false,
                  },
                },
                labelLine: {
                  normal: {
                    show: false,
                  },
                },
                itemStyle: {
                  normal: {
                    color: "#6E4D0A",
                  },
                },
              },
              {
                name: this.$t("message.electricBox.monthAlarm"),
                value: this.monthAlarmNum,
                label: {
                  normal: {
                    position: "center",
                    color: "#989899",
                    fontSize: 12,
                    padding: [0, 0, 20, 0],
                    formatter: function (params) {
                      return (
                        "{percent|" +
                        params.value +
                        "}\n" +
                        that.$t("message.electricBox.monthAlarm")
                      );
                    },
                    rich: {
                      percent: {
                        color: "#D2B34F",
                        fontSize: 20,
                        padding: [5, 0, 20, 0],
                      },
                    },
                  },
                },
                labelLine: {
                  normal: {
                    show: false,
                  },
                },
                itemStyle: {
                  normal: {
                    color: color,
                  },
                },
              },
            ],
          },
          {
            type: "pie",
            center: ["84%", "50%"],
            hoverAnimation: false,
            radius: [38, 43],
            x: "0%", // for funnel
            data: [
              {
                name: "other",
                value: 0,
                label: {
                  normal: {
                    show: false,
                  },
                },
                labelLine: {
                  normal: {
                    show: false,
                  },
                },
                itemStyle: {
                  normal: {
                    color: "#6E4D0A",
                  },
                },
              },
              {
                name: this.$t("message.electricBox.todayAlarm"),
                value: this.dayAlarmNum,
                label: {
                  normal: {
                    position: "center",
                    color: "#989899",
                    fontSize: 12,
                    padding: [0, 0, 20, 0],
                    formatter: function (params) {
                      return (
                        "{percent|" +
                        params.value +
                        "}\n" +
                        that.$t("message.electricBox.todayAlarm")
                      );
                    },
                    rich: {
                      percent: {
                        color: "#D2B34F",
                        fontSize: 20,
                        padding: [5, 0, 20, 0],
                      },
                    },
                  },
                },
                labelLine: {
                  normal: {
                    show: false,
                  },
                },
                itemStyle: {
                  normal: {
                    color: color,
                  },
                },
              },
            ],
          },
        ],
      };
      alarmList.setOption(option);
    },
    //获取 近24小时数据
    getSelectDataList() {
      let data = {
        devSn: this.devSn,
        projectSn: this.projectSn,
        order:'asc'
      };
      getSelectDataListApi(data).then((res) => {
        if (res.code == 200) {
          this.allHourData = res.result;
          this.showDataA = [];
          this.showDataB = [];
          this.showDataC = [];
          this.timeArr = []
          console.log('看看数据', this.allHourData);
          console.log('看看数据长度', this.allHourData.length);
          if (res.result.length > 0) {
            for (let i = 0; i < res.result.length; i++) {
              let time = res.result[i].uploadTime.split(" ")[1];
              this.timeArr.push(time);
              this.showDataA.push(res.result[i].voltageA);
              this.showDataB.push(res.result[i].voltageB);
              this.showDataC.push(res.result[i].voltageC);
            }
          }
          this.$nextTick(() => {
            this.createdEcharts2(this.showDataA, this.showDataB, this.showDataC, this.timeArr);
          })
        }
      });
    },

    //创建图表 --- 近24小时数据
    createdEcharts2(dataA, dataB, dataC, timerArr) {
      console.log('dataA', dataA);
      console.log('dataB', dataB);
      console.log('dataC', dataC);
      console.log('timerArr', timerArr);
      // if (this.allHourData.length == 0) {
      //   return;
      // }
      this.near24hChart = echarts.init(this.$refs.near24hChart);
      this.near24hChart.clear();
      console.log();
      var option1 = {
        grid: {
          top: 20,
          left: 50,
          bottom: 20,
          right: 25,
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            lineStyle: {
              color: "#FDC34A",
              type : 'line'
            },
          },
        },
        color: ["#FDC34A"],
        xAxis: {
          type: "category",
          data: timerArr,
          boundaryGap: false,
          axisTick: {
            show: false,
          },
          axisLine: {
            show: false,
          },
          axisLabel: {
            color: "rgba(255,255,255,0.3)",
          },
        },
        yAxis: {
          type: "value",
          axisTick: {
            show: false,
          },
          axisLine: {
            show: false,
          },
          splitLine: {
            lineStyle: {
              type: "dashed",
              color: "rgba(255,255,255,0.1)",
            },
          },
          axisLabel: {
            color: "rgba(255,255,255,0.3)",
          },
        },
        series: [
          {
            name:
              this.checkedBtn == 1
                ? "A相电压"
                : this.checkedBtn == 2
                  ? "A相电流"
                  : this.checkedBtn == 4 && "A相线缆温度",
            data: dataA,
            type: "line",
            // smooth: true,
            lineStyle: {
              width: 2,
              color: '#be8209', // 线条颜色
              type: 'solid' // 线条类型: 'solid', 'dashed', 'dotted'
            },
            // symbol: "none",
            // areaStyle: {
            //   color: "#292017",
            // },
            show: true // 显示线条
          },
          {
            name:
              this.checkedBtn == 1
                ? "B相电压"
                : this.checkedBtn == 2
                  ? "B相电流"
                  : this.checkedBtn == 4 && "B相线缆温度",
            data: dataB,
            type: "line",
            // smooth: true,
            lineStyle: {
              width: 2,
              color: '#be8209', // 线条颜色
              type: 'solid' // 线条类型: 'solid', 'dashed', 'dotted'
            },
            // symbol: "none",
            areaStyle: {
              color: "#292017",
            },
            show: true // 显示线条
          },
          {
            name:
              this.checkedBtn == 1
                ? "C相电压"
                : this.checkedBtn == 2
                  ? "C相电流"
                  : this.checkedBtn == 4 && "C相线缆温度",
            data: dataC,
            type: "line",
            // smooth: true,
            lineStyle: {
              width: 2,
              color: '#be8209', // 线条颜色
              type: 'solid' // 线条类型: 'solid', 'dashed', 'dotted'
            },
            // symbol: "none",
            areaStyle: {
              color: "#292017",
            },
            show: true // 显示线条
          },
        ],
      };
      var option2 = {
        grid: {
          top: 20,
          left: 50,
          bottom: 20,
          right: 25,
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            lineStyle: {
              color: "#FDC34A",
            },
          },
        },
        color: ["#FDC34A"],
        xAxis: {
          type: "category",
          data: timerArr,
          boundaryGap: false,
          axisTick: {
            show: false,
          },
          axisLine: {
            show: false,
          },
          axisLabel: {
            color: "rgba(255,255,255,0.3)",
          },
        },
        yAxis: {
          type: "value",
          axisTick: {
            show: false,
          },
          axisLine: {
            show: false,
          },
          splitLine: {
            lineStyle: {
              type: "dashed",
              color: "rgba(255,255,255,0.1)",
            },
          },
          axisLabel: {
            color: "rgba(255,255,255,0.3)",
          },
        },
        series: [
          {
            name:
              this.checkedBtn == 3
                ? "漏电流"
                : this.checkedBtn == 5 && "环境温度",
            data:
              this.checkedBtn == 3
                ? this.electricLeakage
                : this.checkedBtn == 5 && this.ambientTemperature,
            type: "line",
            smooth: true,
            lineStyle: {
              width: 2,
              type: 'solid', // 线条类型: 'solid', 'dashed', 'dotted'
              color: '#be8209', // 线条颜色
            },
            symbol: "none",
            areaStyle: {
              color: "#292017",
            },
            show: true // 显示线条
          },
        ],
      };
      var option =
        this.checkedBtn == 1 || this.checkedBtn == 2 || this.checkedBtn == 4
          ? option1
          : option2;
      this.near24hChart.setOption(option);
    },

    //获取所有设备统计
    getDevStatisticsData() {
      let data = {
        projectSn: this.projectSn,
      };
      getDevStatisticsApi(data).then((res) => {
        if (res.code == 200) {
          this.devStatistics = res.result;
          setTimeout(() => {
            this.createdEcharts3();
          }, 500)
        }
      });
    },
    //切换24小时数据的按钮   电压电流漏电流线缆温度环境温度
    greenBtn(type) {
      this.checkedBtn = type;
      if (this.allHourData.length > 0) {
        let data = this.allHourData;
        this.showDataA = [];
        this.showDataB = [];
        this.showDataC = [];
        this.timeArr = [];
        let showData1 = [];
        let showData2 = [];
        let showData3 = [];
        this.electricLeakage = [];
        this.ambientTemperature = [];
        for (let i = 0; i < data.length; i++) {
          let time2 = data[i].uploadTime.split(" ")[1];
          this.timeArr.push(time2);
          if (type == 1) {
            showData1.push(data[i].voltageA);
            showData2.push(data[i].voltageB);
            showData3.push(data[i].voltageC);
          } else if (type == 2) {
            showData1.push(data[i].phaseCurrentA);
            showData2.push(data[i].phaseCurrentB);
            showData3.push(data[i].phaseCurrentC);
          } else if (type == 3) {
            this.electricLeakage.push(data[i].electricLeakage);
          } else if (type == 4) {
            showData1.push(data[i].cableTemperatureA);
            showData2.push(data[i].cableTemperatureB);
            showData3.push(data[i].cableTemperatureC);
          } else if (type == 5) {
            this.ambientTemperature.push(data[i].ambientTemperature);
          }
        }
        this.showDataA = showData1;
        this.showDataB = showData2;
        this.showDataC = showData3;
      }
      this.createdEcharts2(this.showDataA, this.showDataB, this.showDataC, this.timeArr);
    },
  },
};
</script>
<style lang="less" scoped>
@import url('./style.less');
.centerChart {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  justify-content: flex-start;
  .center_realTimeData {
    background-image: url('../../../assets/images/electricOverview/bg2.png');
    background-repeat: no-repeat;
    background-size: 100%;
    height: 75px;
    width: 195px;
    margin-left: 45px;
    display: flex;
    align-items: center;
    justify-content: space-around;
    padding: 0 20px;
    box-sizing: border-box;
  }
}
.flex {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.flex2 {
  display: flex;
  align-items: center;
}

/deep/ .demo .el-switch__label {
  position: absolute;
  display: none;
  color: #fff;
}
/*打开时文字位置设置*/
/deep/ .demo .el-switch__label--right {
  z-index: 1;
  left: 3px;
}
/*关闭时文字位置设置*/
/deep/ .demo .el-switch__label--left {
  z-index: 1;
  right: 3px;
}
/*显示文字*/
/deep/ .demo .el-switch__label.is-active {
  display: block;
}
/deep/ .demo.el-switch .el-switch__core,
.el-switch .el-switch__label {
  width: 50px !important;
}
.facility_info {
  width: 200px;
  margin: 0 5px;
  height: 100%;
  padding: 0 20px 20px;
  box-sizing: border-box;
  background-image: linear-gradient(
    rgba(21, 25, 33, 0.2),
    rgba(101, 76, 39, 0.2)
  );
  .state {
    width: 46px;
    height: 46px;
    line-height: 46px;
    text-align: center;
    color: #fff;
    border: 8px solid #265045;
    background: #3dbc9f;
    border-radius: 50%;
    margin: 10px auto 0;
    font-size: 14px;
    opacity: 1;
  }
  .state2 {
    width: 46px;
    height: 46px;
    line-height: 46px;
    text-align: center;
    color: #fff;
    border: 8px solid #393936;
    background: #858584;
    border-radius: 50%;
    margin: 10px auto 0;
    font-size: 14px;
    opacity: 1;
  }
  .title {
    font-family: PingFangSC-Semibold;
    font-size: 15px;
    color: #fffeff;
    letter-spacing: 0;
  }

  .left {
    width: 50%;
    text-align: center;
    font-size: 13px;
    color: #fff;
    opacity: 0.8;
    border-right: 1px dashed #403422;
    box-sizing: border-box;
    padding-right: 20px;
  }
  .right {
    width: 50%;
    text-align: center;
    font-size: 13px;
    color: #fff;
    opacity: 0.8;
    padding-left: 10px;
  }
  .switch {
    margin-top: 4px;
    height: 66px;
    line-height: 66px;
  }
}
.boxEcharts {
  width: 100%;
  height: 100%;
}
.near24hChart {
  width: 100%;
  height: 80%;
}
.checkedBtn {
  background: #be8209;
}
.centerDiv {
  .greenBtn {
    height: 28px;
    padding: 0;
    z-index: 999;
    /deep/ .el-input__inner {
      background-color: rgba(108, 94, 46, 0);
      border: none;
      color: #e2c154;
    }
  }
}
</style>