<template>
  <div id="body">
    <!-- 顶部 -->
    <div class="pageHeader">
      <div class="pageHeaderLogo">
        <img :src="gjdwLogo" class="hjdw" alt="国家电网公司" srcset="" />
        <img :src="xykjLogo" class="xykj" alt="欣影科技" srcset="" />
        <span class="pageTitle">状态监测数据汇集系统</span>
        <!-- <img :src="zghLogo" class="ygh" alt="央广核" srcset="" /> -->
      </div>
      <div class="pageHeaderMenu">
        <ul>
          <li
            :style="'background-image:url(' + menuBj + ');'"
            v-for="(item, key) in menuList"
            :key="key"
            @click="loginCAC(key + 1)"
          >
            {{ item.lable }}
          </li>
        </ul>
      </div>
      <div class="pageHeaderLogout">
        <div class="currentTime">{{ currentTime }}</div>
        <el-dropdown>
          <span class="el-dropdown-link">
            系统<i class="el-icon-arrow-down el-icon--right"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item @click.native="logout">退出</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
    </div>
    <!-- 内容 -->
    <div class="pageBody">
      <el-row :gutter="20">
        <el-col :span="5">
          <div class="pageLeft">
            <!-- 1#主变 油色谱 -->
            <!-- 标题和内容 -->
            <oilChromatographyTemplate
              @dataDispose="dataDispose"
            ></oilChromatographyTemplate>
            <!-- #1主变 铁芯/夹件 -->
            <clampTemplate @dataDispose="dataDispose"></clampTemplate>
            <!-- 1#主变 绕阻测温 -->
            <windingTemperatureTemplate
              class="windingTemperatureTemplate"
              @dataDispose="dataDispose"
            ></windingTemperatureTemplate>
          </div>
        </el-col>
        <el-col :span="14">
          <div class="pageMid">
            <!-- 1#主变-实时数据趋势图 -->
            <div class="tendencyChart backgroundTitle">
              <div class="cardTitle">
                {{ tendencyChartTitle }}-实时数据趋势图
              </div>
              <div class="cardContent">
                <RadarChart :echartData="echartData"></RadarChart>
              </div>
            </div>
            <!-- 1# - 电缆环流 -->
            <pageMidSecondTemplate
              @dataDispose="dataDispose"
            ></pageMidSecondTemplate>
            <warnMessageTemplate></warnMessageTemplate>
          </div>
        </el-col>
        <el-col :span="5"
          ><div class="pageLeft">
            <!-- 监测装置总数 -->
            <monitoringDeviceTemplate
              @dataDispose="dataDispose"
            ></monitoringDeviceTemplate>
            <!-- SF6-5001 断路器 -->
            <breakerTemplate
              @dataDispose="dataDispose"
              class="breakerTemplate"
            ></breakerTemplate>
            <!-- 避雷器 - 黑纱线 -->
            <arrester @dataDispose="dataDispose" class="arrester"></arrester>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import axios from "axios";
// API
import { decrypt } from "@/utils/jsencrypt";
// 顶部
import gjdwLogo from "@/assets/page_logo/stateGridCorporation.png";
import xykjLogo from "@/assets/page_logo/hinFilmTechnology.png";
import zghLogo from "@/assets/page_logo/CGNPC.png";
import menuBj from "@/assets/page_logo/menu.png";
// 引入echart组件
import RadarChart from "@/components/Echarts/index";
// 页面组成部分
import oilChromatographyTemplate from "./oilChromatography/index";
import clampTemplate from "./clamp/index";
import windingTemperatureTemplate from "./windingTemperature/index";
import pageMidSecondTemplate from "./pageMidSecond/index";
import warnMessageTemplate from "./warnMessage/index";
import monitoringDeviceTemplate from "./monitoringDevice/index";
import breakerTemplate from "./breaker/index";
import arrester from "./arrester/index";
export default {
  name: "home",
  components: {
    RadarChart,
    oilChromatographyTemplate,
    clampTemplate,
    windingTemperatureTemplate,
    pageMidSecondTemplate,
    warnMessageTemplate,
    monitoringDeviceTemplate,
    breakerTemplate,
    arrester,
  },
  data() {
    return {
      hostName: "",
      echartData: {
        // 默认的图表数据
        legendData: [],
        xAxisData: [],
        yAxisData: [],
        seriesData: [],
      },
      // 顶部
      gjdwLogo: gjdwLogo,
      xykjLogo: xykjLogo,
      zghLogo: zghLogo,
      menuBj: menuBj,
      currentTime: "",
      // 卡片标题
      tendencyChartTitle: "1#主变 油色谱",
      // 顶部导航菜单
      menuList: [
        { lable: "数据报表", url: "" },
        { lable: "设备台账管理", url: "" },
        // { lable: "icd配置", url: "" },
        { lable: "系统管理", url: "" },
        // { lable: "声级振动", url: "" },
      ],
      chartBackground: [
        "238,102,102",
        "145,204,117",
        "250,200,88",
        "115,192,222",
        "59,162,114",
        "252,132,82",
        "154,96,180",
        "234,124,204",
        "3,188,255",
      ],
    };
  },
  created() {
    this.nowTimes();
  },
  mounted() {
    console.log(window.location);
    console.log(process.env.NODE_ENV);
    const isProduction = process.env.NODE_ENV === "production";
    if (isProduction) {
      // 使用服务器IP或域名作为图片地址
      this.hostName = window.location.origin + window.location.pathname;
      console.log("aaaaaaaaaaaa");
    } else {
      // 使用代理的 target 作为图片地址（开发环境）
      console.log("开发环境");
      this.hostName = "http://192.168.1.190:88/"; // 这里使用你的本地 target 地址
    }
  },
  destroyed() {
    // 销毁监听
    this.clear();
  },
  methods: {
    // 点击模块切换趋势图
    dataDispose(legendData, xAxisData, seriesData, title) {
      console.log(legendData);
      console.log(xAxisData);
      console.log(seriesData);
      this.tendencyChartTitle = title;
      let arr = [];
      let echartDataObj = {
        legendData: legendData,
        xAxisData: xAxisData,
        seriesData: [],
      };
      for (let index = 0; index < seriesData.length; index++) {
        const element = seriesData[index];
        arr.push({
          name: element.name,
          type: "line",
          data: element.data,
          areaStyle: {
            normal: {
              // 填充色渐变

              color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: "rgba(" + this.chartBackground[index] + ",0.3)",
                },
                {
                  offset: 0.5,
                  color: "rgba(" + this.chartBackground[index] + ",0.1)",
                },
                { offset: 1, color: "rgba(58, 167, 255,0)" },
              ]),
            },
          },
          // 曲线柔和
          smooth: true,
          itemStyle: {
            normal: {
              lineStyle: {
                width: 3,
              },
            },
          },
        });
      }
      echartDataObj.seriesData = arr;
      this.echartData = echartDataObj;
      console.log(echartDataObj);
    },
    // 页面跳转
    loginCAC(page) {
      console.log(page);
      console.log(this.hostName);
      // if (page == 1) {
      //   window.location.href = this.hostName + "newcac/index.html#/dataReport";
      //   //window.open(this.hostName + "/newcac/#/dataReport");
      // } else if (page == 2) {
      //   window.location.href = this.hostName + "newcac/index.html#/equipment";
      //   // window.open(this.hostName + "/newcac/#/equipment");
      // } else if (page == 3) {
      //   window.location.href = this.hostName + "newcac/index.html#/icdConfig";
      //   //window.open(this.hostName + "/newcac/#/icdConfig");
      // }
      const userName = sessionStorage.getItem("userName");
      const password = decrypt(sessionStorage.getItem("password"));
      const passwordSJZD = "123456";
      if (page != 4) {
        window.open(
          // "http://192.168.145.147/index.php/index/login/index.html?name=" +
          //"http://192.168.128.32/index.php/index/login/index.html?name=" +
          "http://192.168.1.190/index.php/index/login/index.html?name=" +
            userName +
            "&password=" +
            password +
            "&page=" +
            page,
          "_blank"
        );
      } else {
        const params = {
          userName: userName,
          password: passwordSJZD,
        };
        // 声级振动登录方法
        axios.post("/sysLoginRemoteController/login", params).then((res) => {
          if (res && res.data.code === 200) {
            //声级震动前端页面访问地址
            window.open(
              //"http://192.168.135.81:88/login?token=" + res.data.token,
              //"http://192.168.128.32/login?token=" + res.data.token,
              "http://192.168.50.200/login?token=" + res.data.token,
              "_blank"
            );
            return;
          }
        });
      }
    },
    // 退出系统
    logout() {
      this.$confirm("确定注销并退出系统吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        this.$store.dispatch("LogOut").then(() => {
          // Cookies.remove("username");
          // Cookies.remove("password");
          location.reload();
        });
      });
    },
    getCurrentTime(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();
      this.currentTime =
        year + "-" + month + "-" + date + "" + " " + hh + ":" + mm + ":" + ss;
    },
    nowTimes() {
      this.getCurrentTime(new Date());
      setInterval(this.nowTimes, 1000);
      this.clear();
    },
    clear() {
      clearInterval(this.nowTimes);
      this.nowTimes = null;
    },
    // 下拉框点击选择
    cancel() {
      this.dialogOpen = false;
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only " -->

<style rel="stylesheet/scss" lang="scss" scoped>
.pageTitle {
  font-size: 24px;
  color: #fff;
  margin-left: 30px;
}
li {
  list-style: none;
}
.el-row {
  margin-left: 0px;
  margin-right: 0px;
}
#body {
  width: 100%;
}
.el-dropdown-menu {
  background: #106cde;
}
.el-dropdown-menu__item {
  color: #fff;
}
.el-dropdown {
  color: #fff !important;
  font-size: 16px;
}
/* 顶部内容 */
.pageHeader {
  height: 82px;
  padding: 0px 30px;
  box-sizing: border-box;
  background: linear-gradient(180deg, #15244aff 0%, #184b7099 100%);
  backdrop-filter: blur(8px);
  box-shadow: inset 0px 2px 9.77px 0px #003c5066;
  justify-content: space-between;
  display: flex;
  flex-flow: row;
  align-content: center;
  .pageHeaderLogo {
    height: 82px;
    line-height: 82px;
    align-content: center;
    justify-content: center;
  }
  img {
    margin-left: 15px;
    vertical-align: middle;
  }
  .pageHeaderMenu ul {
    height: 100%;
    flex-flow: row;
    display: flex;
    padding: 0;
    margin: 0;
    align-items: center;
  }
  .pageHeaderMenu ul li {
    list-style: none;
    color: #6de1ff;
    width: 120px;
    height: 47px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 15px;
    cursor: pointer;
    background-size: 100% 100%;
    background-repeat: no-repeat;
  }
  .pageHeaderLogout {
    height: 100%;
    flex-flow: row;
    display: flex;
    padding: 0;
    margin: 0;
    align-items: center;
    color: #66e6ff;
  }
  .currentTime {
    margin-right: 15px;
  }
}
/* 内容部分 */
.pageBody {
  padding: 10px 10px 0px 10px;
}

.tendencyChart {
  height: 380px;
  background: #08092419;
  backdrop-filter: blur(10px);
  box-shadow: inset 0px 4px 44px 0px #106cdeff;
  margin-bottom: 10px;
}
.backgroundTitle {
  background-size: 100% 100%;
  background-repeat: no-repeat;
  position: relative;
}
.pageMid {
  // margin-bottom: 10px;
}
/* 卡片标题 */
.cardTitle {
  height: 50px;
  line-height: 50px;
  padding-left: 27px;
  color: #03bcff;
  text-align: left;
  display: flex;
  justify-content: space-between;
  align-items: center;
  .unfoldCloseIcon {
    font-size: 18px;
    color: #03bcff;
    font-weight: bolder;
    cursor: pointer;
  }
}

/* 卡片内容 */
.cardContent {
  padding: 20px;
  box-sizing: border-box;
}
/* 趋势图 */
.tendencyChart {
  // height: 493px;
}
.tendencyChart .cardContent {
  padding: 0 20px;
  box-sizing: border-box;
}
.windingTemperatureTemplate {
  margin-top: 20px;
}
.breakerTemplate,
.arrester {
  margin-top: 20px;
}
@media screen and (max-width: 1440px) {
  .pageHeaderMenu ul li,
  .currentTime,
  .cardTitle {
    font-size: 12px;
  }
}
</style>
