ims-gyee/src/views/layout/economicsOperation/companyHomepage/index.vue

<template>
  <div class="photovoltaicStation matrix-body">
    <div class="province-data">
      <div class="form-box" style="margin-right: 10px">
        <el-select v-model="typeNode" @change="levels1DataChang">
          <el-option
            v-for="(item, index) in levels1Data"
            :key="index"
            :label="item.name"
            :value="item.type"
          >
          </el-option>
        </el-select>
      </div>
      <div class="form-box">
        <el-select
          v-model="checkNode"
          :placeholder="''"
          collapse-tags
          size="mini"
          @change="companyChange"
        >
          <el-option
            v-for="(item, indexe) in OrganizationLists"
            :key="indexe"
            :label="item.aname"
            :value="item.id"
          >
          </el-option>
        </el-select>
      </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" />
            <!-- <PieStationTop5 width="100%" height="100%" :list="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">
        <div class="form-box sort">
          <span>排序方式：</span>
          <el-select
            size="mini"
            v-model="sortCode"
            placeholder="请选择"
            collapse-tags
            clearable
            @change="sortFilterchange"
          >
            <el-option
              v-for="(item, indexe) in sortArrData"
              :key="indexe"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </div>

        <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 station">
            <div class="label">场站：</div>
            <el-select
              v-model="stationName"
              placeholder="全部场站"
              clearable
              multiple
              collapse-tags
              size="mini"
              @change="stationChange"
            >
              <el-option
                v-for="(item, indexe) in complyData"
                :key="indexe"
                :label="item.aname"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </div>
          <div class="form-box">
            <div
              class="theme-change"
              @click="themeChange('maintenance')"
              :class="themeType === 'maintenance' && 'active-theme'"
            >
              <i class="icon-operate"></i>
              <span>风能利用率</span>
            </div>
            <div
              class="theme-change"
              @click="themeChange('operate')"
              :class="themeType === 'operate' && 'active-theme'"
            >
              <i class="icon-maintenance"></i>
              <span>损失明细</span>
            </div>
          </div>
        </div>
      </div>
      <!--  <div class="photovoltaic-toggle">
       <div
          class="type-card"
          :class="isActive === 'card' && 'actived-toggle'"
          @click="
            () => {
              this.isActive = 'card';
            }
          "
        >
          <i class="icon-matrix"></i>
        </div>
         <div
          class="type-list"
          :class="isActive === 'list' && 'actived-toggle'"
          @click="
            () => {
              this.isActive = 'list';
            }
          "
        >
          <i class="icon-tabulation"></i>
        </div> 
      </div>-->
    </div>
    <div class="photovoltaic-data">
      <Card :dataSource="cardData" :typeStr="typeNode" :theme="themeType" />
      <!-- <Card
        v-if="isActive === 'card'"
        :dataSource="cardData"
        :isStation="true"
        :theme="themeType"
      />
       <List
        v-if="isActive === 'list'"
        :dataSource="cardData"
        :isStation="true"
        :theme="themeType"
      /> -->
    </div>
  </div>
</template>

<script>
import Card from "../homePage/components/card.vue";
import List from "../homePage/components/list.vue";
import PieChart from "@/components/chart/pie/dual-pie-chart-econey.vue";
// import PieChart from "@/components/chart/pie/pie-chart.vue";
// import PieStationTop5 from "@/components/chart/pie/pie-station-top5.vue";
import { homePage } from "@/api/economy-homepage.js";
import { GetOrganization, GetStationByCompany } from "@/api/econ-headerNav.js";

export default {
  name: "photovoltaicLevelTwoStation", // 公司首页
  components: {
    Card,
    List,
    PieChart,
    // PieStationTop5,
  },
  data() {
    return {
      //风光类型
      levels1Data: [
        { type: -1, flag: true, id: "F", name: "风电" },
        { type: -2, flag: true, id: "G", name: "光伏" },
      ],
      typeNode: "-1",
      windSpeedRota: null, // 发电统计仪表盘转动角度
      OrganizationLists: [], // 公司列表
      complyData: [],
      stationLists: [], // 场站列表
      timer: null, // 3秒调一次
      checkNode: "", // 选中区域
      themeType: "maintenance", // 主题模式  风能利用率类：maintenance， 损失明细类：operate
      stationName: [], //选中场站
      isActive: "card", // 切换卡片或列表
      dayWindPieData: {}, //五项损失图表数据
      cardData: [], //展示列表数据
      listData: [], //列表数据
      allListData: [], //备用列表数据
      companyPowerStationData: [], //全部数据
      sortArrData: [
        { label: "发电量", value: "fdl" },
        { label: "故障损失", value: "gzssdl" },
        { label: "维护损失", value: "whssdl" },
        { label: "限电损失", value: "xdssdl" },
        { label: "性能损失", value: "xnssdl" },
        { label: "受累损失", value: "slssdl" },
        { label: "风能利用率", value: "gnlyl" }, //排序条件列表
      ],
      sortCode: "", //排序条件
      sortType: true, //升序降序
      datetype: "r",
      wxssTotal: 0,
      stationTopTotal: 0,
    };
  },

  methods: {
    init() {
      this.checkNode = this.$route.query.companyCode || "JS_RGN";
      this.typeNode = this.levels1Data[0].type;
      this.getDataDetial();
      this.getOrganizationList();
      this.getStationList();
    },
    //切换类型
    levels1DataChang() {
      this.checkNode = "";
      this.resetAllFiller();
      this.$router.push({ path: "/economicsOperation/comphomepageGf" });
    },
    async getDataDetial() {
      let { data: res } = await homePage({
        companyId: this.checkNode,
        type: 0,
        statype: this.typeNode,
        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;
      });
    },
    // 获取场站列表
    getStationList() {
      GetStationByCompany({
        companyids: this.checkNode,
        type: this.typeNode,
      }).then(({ data }) => {
        this.complyData = data;
      });
    },
    //排序方式改变(升序降序)
    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();
    },
    // 切换公司
    async companyChange(val) {
      clearInterval(this.timer);
      this.timer = null;
      const newUrl = `${location.href.split("?")[0]}?companyCode=${val}`;
      history.replaceState(null, null, newUrl);
      this.checkNode = val;
      this.resetAllFiller();
      this.getDataDetial();
      this.getStationList();
      this.stationLists = this.complyData;
      //   this.timer = setInterval(() => {
      //     this.getDataDetial();
      //   }, 10000);
    },
    // 场站切换
    stationChange(val) {
      clearInterval(this.timer);
      this.timer = null;
      this.resetFiller();
      if (val && val.length) {
        this.stationName = val;
        let allListData = this.allListData;
        const params = val.length > 0 ? val : this.stationName;
        let listData1 = allListData.filter((item) =>
          params.some((i) => i == item.id)
        );
        this.listData = listData1;
        this.cardData = this.getSortList(this.listData, this.sortCode);
        this.timer = setInterval(() => {}, 3000);
      } else {
        this.stationName = [];
        this.listData = this.allListData;
        this.cardData = this.getSortList(this.listData, this.sortCode);
      }
      //   this.timer = setInterval(() => {
      //     this.getDataDetial();
      //   }, 10000);
    },
    // 切换主题
    themeChange(type) {
      this.sortCode = "";
      this.themeType = type;
    },
    // 切换公司重置筛选条件
    resetAllFiller() {
      this.sortCode = "";
      this.stationName = "";
      this.sortType = true;
    },
    // 切换场站重置筛选条件
    resetFiller() {
      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() {
    // this.timer = setInterval(() => {
    //   this.getDataDetial();
    // }, 10000);
  },
  unmounted() {
    clearInterval(this.timer);
    this.timer = null;
  },

  watch: {},
};
</script>

<style lang="less" scoped>
:deep(.el-input) {
  .el-input__inner {
    height: 25px !important;
    background: #222832 !important;
    border: 1px solid #465166 !important;
  }
}

.photovoltaic-filter .sort {
  :deep(.el-input) {
    .el-input__inner {
      width: 140px !important;
    }
  }
}
.photovoltaic-filter .status {
  :deep(.el-input) {
    .el-input__inner {
      width: 100px !important;
    }
  }
}
.photovoltaic-filter .station {
  :deep(.el-input) {
    .el-input__inner {
      width: 160px !important;
    }
  }
}

.photovoltaicStation {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 0 20px;
  .province-data {
    display: flex;
    .province {
      width: 132px;
      padding: 0 14px;
      height: 25px;
      line-height: 25px;
      background: rgba(0, 70, 199, 0.2);
      border-radius: 16px;
      text-align: center;
      margin-right: 15px;
      cursor: pointer;
      span {
        width: 29px;
        height: 12px;
        font-size: 14px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #fff;
      }
      i {
        font-size: 16px;
        color: #1b99ff;
        position: relative;
        margin-right: 9px;
        vertical-align: -9%;
      }
    }
    .form-box {
      display: flex;
      align-items: center;
    }
  }
  .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 {
          //   height: 100%;
          // }

          .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;
          // align-items: center;
          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: 17px;
            }

            .online-data {
              font-family: "AgencyFB-Reg";
              text-align: right;
              margin-right: 10px;
              color: #a7a7a7;
              font-size: 19px;
            }

            .online-percent {
              font-size: 14px;
              color: #fff;
              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;
      }

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

        .form-box {
          display: flex;
          height: 50px;
          align-items: center;
          margin-right: 10px;
          .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 {
    flex: 1;
  }
}
</style>