ims-gyee/src/views/layout/economicsOperation/homePage/indexGF.vue

<template>
  <div class="photovoltaicStation matrix-body">
    <div style="display: flex; margin-top: 10px">
      <div style="margin-right: 10px">
        <eselect
          :data="levels1Data"
          v-model="typeNode"
          placeholder="请选择"
          labelKey="name"
          valueKey="type"
          @change="levels1DataChang"
          style="margin-right: 8px; width: 132px"
        />
      </div>
      <div class="provice-data">
        <img
          src="@assets/img/images/area.png"
          style="width: 14px; display: inline-block; margin-right: 10px"
        />
        <span>{{ province && province.name }}</span>
      </div>
    </div>
    <div class="photovoltaic-chart3">
      <div class="chart-card power-statistics">
        <div class="chart-card-title-wrapper">
          <div class="chart-card-title">发电统计</div>
          <div class="right-bar">
            <div
              :class="datetype === 'r' ? 'type-button-on' : 'day-button'"
              @click="handleChangeDay('r')"
            >
              <div class="day-name">日</div>
            </div>
            <div
              :class="datetype === 'y' ? 'type-button-on' : 'day-button'"
              @click="handleChangeDay('y')"
            >
              <div class="day-name">月</div>
            </div>
            <div
              :class="datetype === 'n' ? 'type-button-on' : 'day-button'"
              @click="handleChangeDay('n')"
            >
              <div class="day-name">年</div>
            </div>
          </div>
        </div>
        <div class="chart-content">
          <div class="chart-img">
            <div class="img">
              <img src="../../../../assets/img/images/equipment-progress.png" />
              <div class="img-unit">
                <div class="information">
                  {{ companyPowerStationData?.fdtj?.gnlyl?.toFixed(2) || 0 }}
                </div>
              </div>
            </div>
            <p>光能利用率(%)</p>
          </div>
          <ul class="chart-list">
            <li class="statistics-li">
              <span class="statistics-name">发电量</span>

              <div>
                <span class="statistics-data">{{
                  companyPowerStationData?.fdtj?.rfdl?.toFixed(2) || 0
                }}</span>
              </div>

              <span class="statistics-unit">万kWh</span>
            </li>
            <li class="statistics-li">
              <span class="statistics-name">理论发电量</span>

              <div>
                <span class="statistics-data">{{
                  companyPowerStationData?.fdtj?.llfdl?.toFixed(2) || 0
                }}</span>
              </div>

              <span class="statistics-unit">万kWh</span>
            </li>
            <li class="statistics-li">
              <span class="statistics-name">损失电量</span>

              <div>
                <span class="statistics-data">{{
                  companyPowerStationData?.fdtj?.ssdl?.toFixed(2) || 0
                }}</span>
              </div>

              <span class="statistics-unit">万kWh</span>
            </li>
          </ul>
        </div>
      </div>
      <div class="chart-card station-status">
        <div class="chart-card-title">五项损失</div>
        <div class="chart-content">
          <div class="chart-pie">
            <div class="chart-total"></div>
            <!-- <pie-chart width="100%" height="100%" :lossPower="dayWindPieData" /> -->
            <pie-chart width="100%" height="100%" :series="dayWindPieData" />
          </div>
          <ul class="chart-list">
            <li
              v-for="item in dayWindPieData"
              :key="item.name"
              class="state-li"
              :class="item.class"
            >
              <span class="station-state">{{ item?.name }}</span>
              <span class="station-data"
                >{{
                  item?.value
                    ? ((item?.value / wxssTotal) * 100)?.toFixed(2)
                    : 0
                }}
                <i class="unit">%</i></span
              >
            </li>
          </ul>
        </div>
      </div>
      <div class="chart-card">
        <div class="chart-card-title">场站损失(前5)</div>
        <div class="chart-content">
          <div class="chart-online">
            <div class="chart-total"></div>
            <pie-chart width="100%" height="100%" :series="stationTop5" />
          </div>
          <ul class="chart-list">
            <li
              class="online-li"
              v-for="(item, index) in stationTop5"
              :key="item.index"
              :class="'online' + index"
            >
              <span class="online-name">{{ item?.name }}</span>
              <div>
                <span class="online-data">{{
                  item?.value
                    ? ((item?.value / stationTopTotal) * 100)?.toFixed(2)
                    : 0
                }}</span>
                <span class="online-percent">%</span>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <div class="photovoltaic-filter">
      <div class="photovoltaic-left">
        <!-- <span>排序方式：</span>
        <el-select
          v-model="sortCode"
          placeholder="请选择"
          collapse-tags
          size="mini"
          clearable
          @change="sortFilterchange"
        >
          <el-option
            v-for="(item, indexe) in sortArrData"
            :key="indexe"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select> -->
        <eselect
          v-model="sortCode"
          placeholder="排序方式"
          clearable
          :data="sortArrData"
          labelKey="label"
          valueKey="value"
          @change="sortFilterchange"
          style="width: 165px"
        />
        <div
          class="photovoltaic-sort"
          v-show="sortCode"
          @click="sortTypechange"
        >
          <i
            :class="sortType ? 'icon-descending-order' : 'icon-ascending-order'"
          ></i>
        </div>
        <div class="search-form">
          <div class="form-box">
            <eselect
              v-model="checkNode"
              placeholder="请选择公司"
              multiple
              clearable
              :data="OrganizationLists"
              labelKey="aname"
              valueKey="id"
              @change="areaChange"
              style="width: 165px"
            />
          </div>
          <div class="form-box">
            <ebtn
              style="margin-right: 16px"
              @click="themeChange('maintenance')"
              :actived="themeType === 'maintenance'"
            >
              <template #img>
                <i class="icon-operate"></i>
              </template>
              光能利用率
            </ebtn>
            <ebtn
              style="margin-right: 12px"
              @click="themeChange('operate')"
              :actived="themeType === 'operate'"
            >
              损失明细
              <template #img>
                <i class="icon-maintenance"></i>
              </template>
            </ebtn>
            <eselect
              v-show="themeType === 'maintenance'"
              v-model="benchmarkingVal"
              placeholder="对标方式"
              clearable
              :data="benchmarking"
              @change="changeNum"
              style="width: 165px"
            />

            <el-badge
              v-if="
                themeType === 'maintenance' &&
                benchNum !== 0 &&
                benchmarkingVal !== ''
              "
              @click="hidenBenchList"
              :value="benchNum"
              style="margin-left: 20px; cursor: pointer"
            >
              <ebtn style="padding: 0 16px">
                <template #img>
                  <i
                    :class="
                      sortType
                        ? 'icon-descending-order'
                        : 'icon-ascending-order'
                    "
                  ></i>
                </template>
              </ebtn>
            </el-badge>
            <div
              style="z-index: 999; width: 305px; background: #0c0f15"
              class="window"
              v-if="themeType === 'maintenance' && displaycheck === true"
            >
              <div class="stitBorder"></div>
              <p class="ststTit header">
                <span v-if="benchmarkingVal === 'bench2'"> 公司对标 </span>
                (<span style="color: #d8d8d9">{{ benchNum }}</span
                >)
              </p>
              <div class="lines"></div>
              <div class="overHidd" v-if="benchmarkingVal === 'bench2'">
                <ul
                  v-for="(item, index) in cardBench"
                  :key="index"
                  class="stations"
                >
                  <li
                    style="
                      width: 60%;
                      white-space: nowrap;
                      overflow: hidden;
                      text-overflow: ellipsis;
                    "
                  >
                    {{ item }}
                  </li>

                  <li @click="removeTable(index)" style="cursor: pointer">
                    <i class="el-icon-close"></i>
                  </li>
                </ul>
              </div>
              <el-row
                class="footerButton"
                style="position: absolute; bottom: 19px; left: 15px"
              >
                <el-button
                  type="primary"
                  :disabled="cardBench.length < 2"
                  round
                  @click="openCurvDatased"
                  >开始对标</el-button
                >
                <div class="footTitle" @click="clearTable">
                  <p>清空</p>
                  <Delete
                    style="
                      width: 17px;
                      height: 17px;
                      margin-top: 6px;
                      margin-left: 5px;
                      color: rgba(255, 102, 0, 1);
                    "
                  />
                </div>
              </el-row>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="photovoltaic-data">
      <Card
        :dataSource="cardData"
        ref="childCard"
        :typeStr="typeNode"
        :theme="themeType"
        :benchmarkingVal="benchmarkingVal"
        :electTarget="electTarget"
      />

      <!-- <List
        v-show="isActive === 'list'"
        :dataSource="companyPowerStationData?.wxsslb"
        :theme="themeType"
        :typeStr="typeNode"
      /> -->
    </div>
    <el-dialog
      class="dialogs"
      width="100%"
      fullscreen
      v-model="displaybench"
      :show-close="true"
      :destroy-on-close="true"
    >
      <template #title>
        <div class="dialog-title">
          <img
            class="dialog-title-img"
            src="@assets/img/images/dialog-title.png"
          />
          <div v-if="benchmarkingVal === 'bench2'" class="title">公司对标</div>
        </div>
      </template>
      <div class="dialog-body">
        <img class="dialog-img" src="@assets/img/images/dialog.png" />
        <companyBench v-if="benchmarkingVal === 'bench2'" ref="companyBench" />
      </div>
    </el-dialog>
  </div>
</template>

<script>
import Card from "./components/card.vue";
import List from "./components/list.vue";
import PieChart from "@/components/chart/pie/dual-pie-chart-econey.vue";
import companyBench from "@/views/layout/economicsOperation/benchmarkingManagement/companyBenchmarking/index.vue";
import { homePage } from "@/api/economy-homepage.js";
import { GetOrganization } from "@/api/econ-headerNav.js";
import eselect from "@/components/eselect";
import ebtn from "@/components/ebtn";
import { GetRegionInfo } from "@/api/home.js";
export default {
  name: "homePageGf", // 区域分析
  components: {
    Card,
    List,
    PieChart,
    eselect,
    ebtn,
    companyBench,
  },
  data() {
    return {
      benchmarking: [{ label: "公司对标", value: "bench2" }],
      benchNum: 0,
      benchChang: "",
      //风光类型
      levels1Data: [
        { type: -1, flag: true, id: "F", name: "风电", icon: -1 },
        { type: -2, flag: true, id: "G", name: "光伏", icon: -2 },
      ], //类型
      typeNode: "-2",
      windSpeedRota: null, // 发电统计仪表盘转动角度
      areaCode: null,
      province: {
        name: "",
        code: "",
      },
      timer: null, // 3秒调一次
      OrganizationLists: null,
      checkNode: [], // 选中区域
      themeType: "maintenance", // 主题模式  光能利用率类：maintenance 损失明细类：operate，
      isActive: "card", // 切换卡片或列表
      dayWindPieData: [],
      stationTop5: [],
      cardData: [],
      listData: [],
      allListData: [],
      companyPowerStationData: {},
      sortCode: "",
      sortType: true,
      datetype: "r",
      wxssTotal: 0,
      stationTopTotal: 0,
      displaycheck: false,
      displaybench: false,
      cardBench: [],
      a_benchmarkingVal: "",
    };
  },

  methods: {
    // 切换对标方式
    changeNum(val) {
      this.$refs.childCard.changenums();
      this.benchChang = val;
    },
    // 打开对标框
    async hidenBenchList(event) {
      this.displaycheck = !this.displaycheck;
    },

    // 点击确认后添加数据
    setdata(data) {
      this.cardBench = data;
      this.benchNum = data.length;
      if (data.length === 0) {
        this.displaycheck = false;
      }
    },
    // 开始对标框弹窗
    openCurvDatased() {
      this.displaycheck = false;
      this.displaybench = true;
      this.curvData();
    },
    curvData() {
      let arr = [];
      this.cardData.forEach((s) => {
        this.cardBench.forEach((d) => {
          if (s.name === d) {
            arr.push(s.id);
          }
        });
      });
      this.$nextTick(() => {
        this.$refs.companyBench &&
          this.$refs.companyBench.init(arr, this.typeNode);
      });
    },
    // 删除购物车内容
    removeTable(index) {
      if (this.benchmarkingVal === "bench2") {
        this.cardBench.splice(index, 1);
        this.benchNum = this.cardBench.length;
        if (this.cardBench.length === 0) {
          this.displaycheck = false;
        }
        this.$refs.childCard.changenBench(this.cardBench);
      }
    },

    // 清空购物车
    clearTable() {
      this.cardBench = [];
      this.benchNum = this.cardBench.length;

      this.displaycheck = false;
      if (this.benchmarkingVal === "bench2") {
        this.$refs.childCard.changenBench(this.cardBench);
      }
    },
    //初加载数据
    init() {
      let province = JSON.parse(localStorage.getItem("GlobalConfig"));
      if (!province) {
        this.getProvinceCode();
      } else {
        this.province = {
          name: province.name,
          code: province.code,
        };
      }
      this.typeNode = this.levels1Data[1].type;
      this.getOrganizationList();
      this.getDataDetial();
    },
    async getProvinceCode() {
      const data = await GetRegionInfo();
      this.province = {
        name: data.name,
        code: data.code,
      };
      localStorage.setItem("GlobalConfig", JSON.stringify(data));
    },
    //切换类型
    levels1DataChang() {
      this.checkNode = [];
      this.resetFilter();
      this.$router.push({ path: "/economicsOperation/homePage" });
    },
    //调接口获取数据
    async getDataDetial() {
      clearInterval(this.timer);
      this.timer = null;

      let { data: res } = await homePage({
        companyId: this.province.code,
        type: this.typeNode,
        statype: 0,
        datetype: this.datetype,
      });
      this.companyPowerStationData = res; //所有页面数据
      this.listData = this.companyPowerStationData?.wxsslb; //列表数据
      this.allListData = this.companyPowerStationData?.wxsslb; //存储备用列表(筛选使用)
      this.cardData = this.getSortList(this.listData, this.sortCode);
      // 五项损失统计饼图
      this.dayWindPieData = [
        {
          name: "性能损失",
          value: this.companyPowerStationData?.wxsstb?.xnss,
          class: "state-xn",
        },
        {
          name: "故障损失",
          value: this.companyPowerStationData?.wxsstb?.gzss,
          class: "state-gz",
        },
        {
          name: "维护损失",
          value: this.companyPowerStationData?.wxsstb?.whss,
          class: "state-wh",
        },
        {
          name: "限电损失",
          value: this.companyPowerStationData?.wxsstb?.xdss,
          class: "state-xd",
        },
        {
          name: "受累损失",
          value: this.companyPowerStationData?.wxsstb?.slss,
          class: "state-sl",
        },
      ];
      this.wxssTotal = this.dayWindPieData?.reduce((a, b) => {
        return a + b.value * 1;
      }, 0);
      this.stationTop5 = this.companyPowerStationData?.czwxss?.map((item) => {
        return { name: item.name, value: item.wxss };
      });
      this.stationTopTotal = this.stationTop5?.reduce((a, b) => {
        return a + b.value * 1;
      }, 0);
    },
    // 获取公司列表
    getOrganizationList() {
      GetOrganization({ type: this.typeNode }).then(({ data }) => {
        this.OrganizationLists = data.filter(
          (item) => item.id != this.province.code
        );
      });
    },
    //排序方式改变(升序降序)
    sortTypechange() {
      this.sortType = !this.sortType;
      this.cardData = this.getSortList(this.listData, this.sortCode);
    },
    //排序条件改变
    sortFilterchange(val) {
      this.sortCode = val;
      this.cardData = this.getSortList(this.listData, this.sortCode);
    },
    //切换日月年
    handleChangeDay(val) {
      this.datetype = val;
      this.getDataDetial();
    },
    // 切换公司
    areaChange(val) {
      clearInterval(this.timer);
      this.timer = null;
      this.resetFilter();
      if (val && val.length) {
        this.checkNode = val;
        let allListData = this.allListData;
        const params = val.length > 0 ? val : this.areaCode;
        let listData1 = allListData.filter((item) =>
          params.some((i) => i == item.id)
        );
        this.listData = listData1;
        this.cardData = this.getSortList(this.listData, this.sortCode);
      } else {
        this.checkNode = [];
        this.listData = this.allListData;
        this.cardData = this.getSortList(this.listData, this.sortCode);
      }
    },
    // 切换主题
    themeChange(type) {
      this.sortCode = "";
      this.themeType = type;
    },
    // 重置筛选条件
    resetFilter() {
      this.sortCode = "";
      this.sortType = true;
    },
    //列表排序
    getSortList(list, sort) {
      const _this = this;
      if (sort) {
        let cloneArr = JSON.parse(JSON.stringify(list));
        let sortArr = cloneArr.sort(function (a, b) {
          if (_this.sortType) {
            return Number(b[sort]) - Number(a[sort]);
          } else {
            return Number(a[sort]) - Number(b[sort]);
          }
        });
        return sortArr;
      } else {
        return this.listData;
      }
    },
  },
  created() {
    this.init();
  },
  mounted() {},
  unmounted() {
    clearInterval(this.timer);
    this.timer = null;
  },
  computed: {
    benchmarkingVal: {
      get() {
        return this.a_benchmarkingVal;
      },
      set(v) {
        if (
          v != this.a_benchmarkingVal &&
          this.benchNum != 0 &&
          this.benchChang !== ""
        ) {
          let t;
          if (!v) {
            t = "清空";
          } else {
            t = "切换";
          }
          this.$confirm(`是否${t}对标方式?`, "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          })
            .then(async () => {
              this.$message({
                type: "success",
                message: `${t}成功!`,
                offset: 200,
                center: true,
                customClass: "s",
              });
              this.selectTime = "";
              this.a_benchmarkingVal = v;
              this.benchChang = v;
              this.$refs.childCard.changenums();
              this.displaycheck = false;
            })
            .catch(() => {
              if (!v) {
                const te = this.a_benchmarkingVal;
                this.a_benchmarkingVal = "";
                this.$nextTick(() => {
                  this.a_benchmarkingVal = te;
                });
              }
            });
        } else {
          this.a_benchmarkingVal = v;
          this.benchChang = v;
        }
      },
    },
    sortArrData() {
      if (this.themeType === "operate") {
        return [
          { label: "故障损失", value: "gzssdl" },
          { label: "维护损失", value: "whssdl" },
          { label: "限电损失", value: "xdssdl" },
          { label: "性能损失", value: "xnssdl" },
          { label: "受累损失", value: "slssdl" },
        ];
      } else {
        return [
          { label: "光能利用率", value: "gnlyl" },
          { label: "发电量", value: "fdl" },
          { label: "理论发电量", value: "llfdl" },
          { label: "损失电量", value: "ssdl" },
        ];
      }
    },
  },
  watch: {},
};
</script>

<style lang="less" scoped>
.search-form {
  /deep/ .el-badge__content--danger {
    background: #ff6600;
    border: 1px solid #a5a5a5;
  }

  /deep/ .el-badge__content.is-fixed {
    top: 5px;
    right: 10px;
  }
}
.window {
  position: absolute;
  top: 88%;
  right: -60%;
  height: 350px;
  border: 1px solid #094493;
  border-image: linear-gradient(
      0deg,
      rgba(28, 156, 255, 0),
      rgba(28, 156, 255, 0.6),
      rgba(28, 156, 255, 0.8)
    )
    1 1;
  background: rgba(29, 34, 43, 0.9) !important;
  border-radius: 3px;
  box-shadow: 0 0 22px rgba(0, 70, 199, 0.2) inset !important;

  .stitBorder {
    position: absolute;
    width: 70%;
    height: 2px;
    top: 0;
    background-image: linear-gradient(to right, #1c99ff, rgba(0, 70, 199, 0));
  }

  //box-shadow: 0 0 22px rgb(0 70 199 / 20%) inset !important;
}
.ststTit {
  width: 100%;
  text-align: center;
  height: 44px;
  color: #1c99ff;
  font-size: 16px;
  line-height: 44px;
  box-sizing: border-box;

  //cursor: move;
}

.lines {
  width: 99%;
  height: 1px;
  margin-left: 1px;
  position: relative;
  background: #3a3f43;

  &:after {
    content: "";
    display: block;
    width: 9px;
    height: 1px;
    background-color: #fff;
    position: absolute;
    right: 0;
  }

  &:before {
    content: "";
    display: block;
    width: 8px;
    height: 1px;
    background-color: #fff;
    position: absolute;
    left: 0;
  }
}

.overHidd {
  overflow: scroll;
  height: 70%;
  width: 100%;
}

.footerButton {
  display: flex;
  justify-content: space-between;
  width: 90%;

  .footTitle {
    height: 30px;
    line-height: 30px;
    display: flex;

    p {
      font-size: 14px;
      font-family: Microsoft YaHei;
      font-weight: 300;
      color: #d3d3d3;
    }
  }

  .el-button:last-of-type {
    width: 88px;
    color: rgba(28, 108, 255, 1);
    border-radius: 3px;
    background: rgba(28, 108, 255, 0);
    border: 1px solid !important;
    border-image: linear-gradient(0deg, rgba(28, 156, 255, 0), #1d74eb, #1d74eb)
      1 1 !important;
  }

  /deep/ .el-button.is-round {
    padding: 0 10px !important;
  }
}
.stations {
  height: 39px;
  line-height: 39px;
  width: 100%;
  display: flex;
  border-bottom: 1px solid rgba(76, 85, 90, 1);
  justify-content: space-between;
  font-size: 13px;
  padding-right: 20px;
  padding-left: 20px;
  color: rgba(211, 211, 211, 1);
}
// :deep(.el-input) {
//   .el-input__inner {
//     background: #222832 !important;
//     border: 1px solid #465166 !important;
//     height: 25px !important;
//     width: 140px;
//   }
// }
.photovoltaicStation {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 0 20px;

  .provice-data {
    padding: 0 12px;
    height: 28px;
    line-height: 28px;
    background: #1b6bff66;
    border-radius: 4px;
    // text-align: center;
    // margin-right: 15px;
    // cursor: pointer;

    span {
      font-size: 14px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #fff;
    }

    img {
      vertical-align: top;
      height: 14px;
      margin-top: 6px;
    }
  }

  .photovoltaic-chart3 {
    margin-top: 20px;
    display: flex;

    .chart-card {
      height: 284px;
      flex: 1;
      margin-right: 25px;
      background: rgba(11, 11, 11, 0.45);
      border-radius: 8px;
      padding: 25px 15px;
      .chart-card-title-wrapper {
        display: flex;
        justify-content: space-between;
      }
      .chart-card-title {
        position: relative;
        top: -8px;
        left: 7px;
        font-size: 16px;
        color: #fff;
      }
      .right-bar {
        display: flex;
        flex-direction: row;
        align-items: center;
        margin-top: -8px;
      }
      .day-button {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        border: 1px solid #5e6778;
        border-radius: 16px;
        text-align: center;
        margin-right: 20px;
        cursor: pointer;
        color: #b3b3b3;
        font-size: 16px;
        height: 32px;
        min-width: 54px;

        .type-name {
          font-size: 14px;
          font-family: Microsoft YaHei;
          font-weight: 400;
          line-height: 32px;
        }
      }

      .type-button {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        padding: 0 14px;
        background: rgba(0, 70, 199, 0.2);
        border-radius: 16px;
        text-align: center;
        margin-right: 20px;
        cursor: pointer;
        color: #b3b3b3;
        font-size: 16px;
        height: 32px;
        min-width: 54px;

        .type-name {
          margin-left: 9px;
          font-size: 14px;
          font-family: Microsoft YaHei;
          font-weight: 400;
          line-height: 32px;
        }
      }

      .type-button-on {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        padding: 0 14px;
        background: rgba(0, 70, 199, 0.5);
        border-radius: 16px;
        text-align: center;
        margin-right: 20px;
        cursor: pointer;
        color: #1c99ff;
        font-size: 16px;
        height: 32px;
        min-width: 54px;

        .type-name {
          margin-left: 9px;
          color: #ffffff;
          font-size: 14px;
          font-family: Microsoft YaHei;
          font-weight: 400;
          line-height: 32px;
        }

        .day-name {
          color: #ffffff;
          font-size: 14px;
          font-family: Microsoft YaHei;
          font-weight: 400;
          line-height: 32px;
        }
      }
      .chart-content {
        display: flex;
        align-items: center;
        // justify-content: space-around;
        height: 200px;

        .chart-pie {
          position: relative;
          // flex: 1;
          width: 52%;
          height: 100%;

          .chart-total {
            position: absolute;
            text-align: center;
            z-index: 0;
            background: url("../../../../assets/img/images/piaBack.png")
              no-repeat;
            width: 80px;
            height: 80px;
            background-size: cover;
            left: 50%;
            margin-left: -40px;
            top: 50%;
            margin-top: -40px;

            .chart-num {
              font-family: Bicubik;
              font-size: 22px;
              color: #fff;
              margin-top: 16px;
            }

            .chart-name {
              color: #b3b3b3;
              font-size: 14px;
            }
          }
        }

        .chart-img {
          position: relative;
          width: 173px;
          height: 156px;
          background: url("../../../../assets/img/images/equipment-dashboard.png")
            no-repeat;
          background-size: cover;

          .img-unit {
            font-family: Bicubik;
            display: flex;
            position: absolute;
            top: 44%;
            left: 19%;
            color: #fff;
            align-items: baseline;
            width: 110px;
            justify-content: center;

            .information {
              font-size: 20px;
            }
          }

          img {
            position: absolute;
            top: 53%;
            left: 9%;
            transform: rotateZ(360deg);
            transform-origin: right top;
          }

          p {
            position: absolute;
            bottom: 0;
            width: 100%;
            text-align: center;
            color: #fff;
            font-size: 12px;
          }
        }

        .chart-online {
          position: relative;
          width: 52%;
          height: 100%;
          .chart-total {
            position: absolute;
            text-align: center;
            z-index: 0;
            background: url("../../../../assets/img/images/piaBack.png")
              no-repeat;
            width: 80px;
            height: 80px;
            background-size: cover;
            left: 50%;
            margin-left: -40px;
            top: 50%;
            margin-top: -40px;

            .chart-num {
              font-family: Bicubik;
              font-size: 22px;
              color: #fff;
              margin-top: 16px;
            }

            .chart-name {
              color: #b3b3b3;
              font-size: 14px;
            }
          }
        }

        .chart-list {
          width: 45%;
          display: flex;
          flex-direction: column;
          text-align: center;
          color: #b3b3b3;

          span {
            display: inline-block;
          }

          .statistics-li {
            display: flex;
            align-items: center;
            margin-bottom: 25px;
            font-size: 14px;

            .statistics-name {
              width: 80px;
              text-align: left;
            }

            .statistics-data {
              font-family: Bicubik;
              color: #fff;
              margin: 0 10px 0 20px;
              width: 90px;
              text-align: right;
              font-size: 16px;
            }

            .statistics-unit {
              color: #fff;
              white-space: nowrap;
              font-size: 12px;
            }
          }
          .state-li {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding-bottom: 5px;
            border-bottom: 1px solid #4c545a;
            margin-bottom: 10px;

            .station-state {
              display: flex;
              align-items: center;
              font-size: 16px;
            }

            .station-state:before {
              content: "";
              width: 10px;
              height: 10px;
              display: inline-block;
              background: #1c99ff;
              margin-right: 10px;
              border: 2px solid rgba(20, 24, 27, 0.25);
            }

            .station-data {
              font-family: Bicubik;
              color: #1c99ff;
              font-size: 16px;
              .unit {
                color: #b3b3b3;
                font-size: 12px;
                font-family: PingFangSC-Regular, PingFang SC;
              }
            }
          }
          .state-xn {
            .station-state:before {
              background: #1986e0;
            }

            .station-data {
              color: #1986e0;
            }
          }
          .state-gz {
            .station-state:before {
              background: #ba3237;
            }

            .station-data {
              color: #ba3237;
            }
          }
          .state-wh {
            .station-state:before {
              background: #e17d24;
            }

            .station-data {
              color: #e17d24;
            }
          }

          .state-xd {
            .station-state:before {
              background: #c531cb;
            }

            .station-data {
              color: #c531cb;
            }
          }

          .state-sl {
            .station-state:before {
              background: #a7a7a7;
            }

            .station-data {
              color: #a7a7a7;
            }
          }

          .online-li {
            display: flex;
            font-size: 15px;
            margin-bottom: 15px;
            align-items: center;
            justify-content: space-between;

            .online-name:before {
              content: "";
              display: inline-block;
              width: 5px;
              height: 5px;
              background: #a7a7a7;
              margin-right: 5px;
            }

            .online-name {
              display: flex;
              align-items: center;
              font-size: 16px;
            }

            .online-data {
              font-family: Bicubik;
              min-width: 67px;
              text-align: right;
              margin-right: 10px;
              color: #a7a7a7;
              font-size: 16px;
            }

            .online-percent {
              min-width: 55px;
              font-size: 12px;
              color: #b3b3b3;
              text-align: left;
              font-family: PingFangSC-Regular, PingFang SC;
            }
            &.online0 {
              .online-name:before {
                background: #1986e0;
              }

              .online-data {
                color: #1986e0;
              }
            }

            &.online1 {
              .online-name:before {
                background: #ba3237;
              }

              .online-data {
                color: #ba3237;
              }
            }

            &.online2 {
              .online-name:before {
                background: #e17d24;
              }

              .online-data {
                color: #e17d24;
              }
            }
            &.online3 {
              .online-name:before {
                background: #c531cb;
              }

              .online-data {
                color: #c531cb;
              }
            }
            &.online4 {
              .online-name:before {
                background: #a7a7a7;
              }

              .online-data {
                color: #a7a7a7;
              }
            }
          }

          .online-li:last-child {
            margin-bottom: 0;
          }
        }
      }
    }

    .chart-card:last-child {
      margin-right: 0;
    }

    .power-statistics {
      .chart-content {
        margin-left: 66px;
        .chart-img {
          margin-right: 52px;
          position: relative;
          top: -13px;
        }
        .chart-list {
          width: auto;
        }
      }
    }
  }

  .photovoltaic-filter {
    display: flex;
    justify-content: space-between;
    align-items: center;

    .photovoltaic-left {
      display: flex;
      height: 50px;
      align-items: center;
      color: #b3b3b3;

      .photovoltaic-sort {
        //display: flex;
        //margin-right: 10px;
        padding: 0 4px;
        color: #1b99ff;
        cursor: pointer;

        //.active-sort {
        //  cursor: pointer;
        //  margin-right: 10px;
        //
        //  i {
        //    font-size: 14px;
        //  }
        //}
        //
        //.actived-sort {
        //  color: rgb(27, 124, 204);
        //}
      }

      .search-form {
        display: flex;
        align-items: center;
        margin-left: 10px;

        .form-box {
          display: flex;
          height: 50px;
          align-items: center;
          margin-right: 10px;
          position: relative;
          .theme-change {
            display: flex;
            align-items: center;
            cursor: pointer;
            margin-right: 10px;
            i {
              margin-right: 5px;
              font-size: 16px;
            }
            span {
              font-size: 14px;
            }
          }
          .active-theme {
            color: #1b99ff;
          }
          :deep(.el-input__inner) {
            color: #b3b3b3;
          }

          .label {
            white-space: nowrap;
            margin-right: 5px;
          }
        }

        .search-btn {
          background: rgba(0, 69, 199, 0.45);
          width: 100px;
          height: 25px;
          line-height: 25px;
          text-align: center;
          border-radius: 10px;
        }
      }
    }

    .photovoltaic-toggle {
      display: flex;
      align-items: center;
      border: 1px solid #455066;
      border-radius: 13px;
      height: 25px;
      box-sizing: border-box;

      div:first-child {
        // border-right: 1px solid #455066;
      }

      div {
        width: 50px;
        height: 100%;
        background: #242b37;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;

        i {
          font-size: 16px;
        }
      }

      .type-card {
        border-top-left-radius: 12px;
        border-bottom-left-radius: 12px;
      }

      .type-list {
        border-top-right-radius: 12px;
        border-bottom-right-radius: 12px;
      }

      .actived-toggle {
        background: #1c3c77;

        i {
          color: #fff;
        }
      }
    }
  }

  .photovoltaic-data {
    height: 624px;
  }
}
</style>