ims-gyee/src/views/layout/economicsOperation/homePage/components/card.vue

<template>
  <div style="height: 100%; overflow-y: auto">
    <!--        加入对标弹窗-->
    <!--        加入对标弹窗-->
    <div
      @mouseenter="leaveList(true)"
      @mouseleave="leaveList(false)"
      style="z-index: 9; width: 200px; background: #0c0f15"
      v-if="
        theme === 'maintenance' &&
        disBenchList === true &&
        benchmarkingVal !== 'bench2' &&
        benchmarkingVal !== 'bench1'
      "
      class="window sunList"
      :style="{ left: eventx - 100 + 'px', top: eventY + 10 + 'px' }"
    >
      <div class="stitBorder"></div>
      <p class="ststTit header">加入对标</p>
      <div class="lines"></div>
      <div>
        <div class="overTit" v-if="benchmarkingVal === 'bench3'">
          <div style="display: flex">
            <p class="dot"></p>
            <p>
              {{ stationEG?.aname }}
            </p>
          </div>
          <div>
            <div
              class="overHidd"
              v-for="(items, index) in stationEG.children"
              :key="index"
            >
              <div class="dots"></div>

              <el-checkbox-group v-model="checkedEG" @change="handChangeChouse">
                <el-checkbox
                  @click="changeCheck"
                  :label="items.nemCode"
                  :key="index"
                  >{{ items.aname }}
                </el-checkbox>
              </el-checkbox-group>
            </div>
          </div>
        </div>
        <div class="overTit" v-if="benchmarkingVal === 'bench4'">
          <div style="display: flex">
            <p class="dot"></p>
            <p>
              {{ stationEG?.aname }}
            </p>
          </div>
          <div
            class="overLeft"
            v-for="(items, index) in stationEG.children"
            :key="index"
          >
            <div class="overHidd">
              <div class="dots"></div>
              <div class="overAname" @click="handOverIndex(index)">
                {{ items.aname }}
              </div>
              <div style="margin-left: 20px">
                <i
                  style="color: #1c99ff"
                  class="icon-bottom"
                  @click="handOverIndex(index)"
                  v-if="overIndex === index"
                ></i>
                <i
                  style="color: #434e5f"
                  class="icon-right1"
                  v-else
                  @click="handOverIndex(index)"
                ></i>
              </div>
            </div>

            <div v-if="overIndex === index">
              <div
                class="overHidden"
                v-for="(val, index) in items.children"
                :key="index"
              >
                <div class="dots"></div>
                <div>
                  <el-checkbox-group
                    v-model="checkedEG"
                    @change="handChangeChouses"
                  >
                    <el-checkbox
                      @click="changeCheck"
                      :label="val.nemCode"
                      :key="index"
                      >{{ val.aname }}
                    </el-checkbox>
                  </el-checkbox-group>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="overTit" v-if="benchmarkingVal === 'bench5'">
          <div style="display: flex">
            <p class="dot"></p>
            <p>
              {{ stationEG?.aname }}
            </p>
          </div>
          <div
            class="overLeft"
            v-for="(items, index) in stationEG.children"
            :key="index"
          >
            <div class="overHidd">
              <div class="dots"></div>

              <div class="overAname" @click="handOverIndex(index)">
                {{ items.aname }}
              </div>
              <div style="margin-left: 20px">
                <i
                  style="color: #1c99ff"
                  class="icon-bottom"
                  @click="handOverIndex(index)"
                  v-if="overIndex === index"
                ></i>
                <i
                  style="color: #434e5f"
                  class="icon-right1"
                  v-else
                  @click="handOverIndex(index)"
                ></i>
              </div>
            </div>
            <div v-if="overIndex === index">
              <div
                class="overHeader"
                v-for="(val, indexe) in items.children"
                :key="indexe"
              >
                <div class="overHidds">
                  <div class="dots"></div>
                  <div class="overAname" @click="handOverIndexs(indexe)">
                    {{ val.aname }}
                  </div>
                  <div style="margin-left: 70px">
                    <i
                      style="color: #1c99ff"
                      class="icon-bottom"
                      @click="handOverIndexs(indexe)"
                      v-if="overIndexs === indexe"
                    ></i>
                    <i
                      style="color: #434e5f"
                      class="icon-right1"
                      v-else
                      @click="handOverIndexs(indexe)"
                    ></i>
                  </div>
                </div>
                <div v-if="overIndexs === indexe">
                  <div
                    class="overHidded"
                    v-for="(vals, index) in val.children"
                    :key="index"
                  >
                    <div class="dots"></div>
                    <div>
                      <el-checkbox-group
                        v-model="checkedEG"
                        @change="
                          (value) => handChangeChoused(value, stationEG.aname)
                        "
                      >
                        <el-checkbox
                          @click.native="changeCheck(vals.nemCode)"
                          :label="vals.nemCode"
                          :key="index"
                          >{{ vals.aname }}
                        </el-checkbox>
                      </el-checkbox-group>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="photovoltaicCard" id="photovoltaicCard">
      <el-row :gutter="20">
        <div v-if="dataSourceList?.length > 0" class="data-cards">
          <el-col :span="6" v-for="item in dataSourceList" :key="item?.id">
            <el-checkbox-group
              class="el-checkbox_tit"
              v-if="
                benchmarkingVal !== '' &&
                benchmarkingVal !== '-1' &&
                theme === 'maintenance' &&
                benchmarkingVal === 'bench2'
              "
              v-model="checkedCities"
              @change="handleCheckAllChange"
            >
              <el-checkbox :label="item.name" :key="item.id">
                &nbsp;</el-checkbox
              >
            </el-checkbox-group>
            <div class="card-list" >
              <!--                            加入购物车图标-->

              <div
                v-if="
                  benchmarkingVal !== '' &&
                  benchmarkingVal !== '-1' &&
                  theme === 'maintenance' &&
                  benchmarkingVal !== 'bench2'
                "
                class="check-button"
              >
                <img
                  @click="addBenchmarking(item, index)"
                  v-if="
                    checkedEG.length !== 0 &&
                    this.stationName.find((s) => {
                      return s == item.name;
                    })
                  "
                  src="@assets/img/images/checkbenched.png"
                />
                <img
                  v-else-if="
                    benchmarkingVal === 'bench1' && stationName == item.name
                  "
                  src="@assets/img/images/checkbenched.png"
                />
                <img
                  v-else
                  src="@assets/img/images/checkbench.png"
                  @click="addBenchmarking(item, index)"
                />
              </div>
              <div class="benchIndex" v-if="benchmarkingVal === 'bench1'">
                <el-date-picker
                  ref="datePicker"
                  size="mini"
                  type="daterange"
                  range-separator="To"
                  v-model="searchObj"
                  :editable="false"
                  format="YYYY-MM-DD"
                  value-format="YYYY-MM-DD"
                  placeholder=" "
                  popper-class="benchRange"
                  @blur="blurDate(item)"
                  @focus="getDate(item)"
                  :disabled-date="pickerOptions"
                  @change="
                    (value) => {
                      hangDate(value, item);
                    }
                  "
                >
                </el-date-picker>
              </div>
              <img
                :src="
                  item?.image
                    ? item?.image
                    : isStation
                    ? require('@assets/img/images/level-two_power-plant.png')
                    : require('@assets/img/images/level-one_company.png')
                "
                class="card-img"
                @click="jumpLevelTwo(item)"
              />

              <div class="card-data">
                <div class="card-company">
                  <div
                    class="company-name card-hover"
                    :title="item?.name"
                    @click="jumpLevelTwo(item)"
                  >
                    <i
                      :class="
                        isStation ? 'icon-Photovoltaic-pv' : 'icon-enterprise'
                      "
                    ></i>
                    {{ item?.name }}
                  </div>
                </div>
                <ul class="data-list" v-show="theme === 'operate'">
                  <li>
                    <div class="data-prop">故障损失</div>
                    <div class="data-num">
                      <div>
                        <span>{{ item?.gzssdl?.toFixed(2) || 0 }}</span> 万kWh
                      </div>
                    </div>
                  </li>
                  <li>
                    <div class="data-prop">维护损失</div>
                    <div class="data-num">
                      <div>
                        <span>{{ item?.whssdl?.toFixed(2) || 0 }}</span> 万kWh
                      </div>
                    </div>
                  </li>
                  <li>
                    <div class="data-prop">限电损失</div>
                    <div class="data-num">
                      <div>
                        <span>{{ item?.xdssdl?.toFixed(2) || 0 }}</span> 万kWh
                      </div>
                    </div>
                  </li>
                  <li>
                    <div class="data-prop">性能损失</div>
                    <div class="data-num">
                      <div>
                        <span>{{ item?.xnssdl?.toFixed(2) || 0 }}</span> 万kWh
                      </div>
                    </div>
                  </li>
                  <li>
                    <div class="data-prop">受累损失</div>
                    <div class="data-num">
                      <div>
                        <span>{{ item?.slssdl?.toFixed(2) || 0 }}</span>
                        万kWh
                      </div>
                    </div>
                  </li>
                </ul>
                <ul class="data-maintenance" v-show="theme === 'maintenance'">
                  <li>
                    <div class="maintenance-item">
                      <div class="text-wrapper">
                        <span class="name">{{
                          typeStr == -1 ? "风能利用率" : "光能利用率"
                        }}</span>
                        <span class="count" :class="typeStr == -1 ? 'fd' : 'gf'"
                          >{{ item?.gnlyl }}%
                          <i class="text">(100%)</i>
                        </span>
                      </div>
                      <div class="process-wrapper">
                        <div
                          class="process-bar"
                          :style="{ width: item?.gnlyl + '%' }"
                          :class="typeStr == -1 ? 'fd' : 'gf'"
                        >
                          <span class="img"></span>
                        </div>
                      </div>
                    </div>
                  </li>
                  <li>
                    <div class="data-prop">发电量</div>
                    <div class="data-num">
                      <span>{{ item?.fdl?.toFixed(2) || 0 }}</span> 万kWh
                    </div>
                  </li>
                  <li>
                    <div class="data-prop">理论发电量</div>
                    <div class="data-num">
                      <div>
                        <span>{{ item?.llfdl?.toFixed(2) || 0 }}</span> 万kWh
                      </div>
                    </div>
                  </li>
                  <li>
                    <div class="data-prop">损失电量</div>
                    <div class="data-num">
                      <div>
                        <span>{{
                          item?.ssdl
                            ? item?.ssdl <= 0
                              ? 0
                              : item?.ssdl?.toFixed(2)
                            : 0
                        }}</span>
                        万kWh
                      </div>
                    </div>
                  </li>
                  <!-- <li>
                  <div class="maintenance-item">
                    <div class="name">健康状态</div>
                    <div class="process-bar"></div>
                  </div>
                </li> -->
                </ul>
              </div>
            </div>
          </el-col>
        </div>
        <div v-else class="empty-data">
          <el-col :span="24">暂无数据</el-col>
        </div>
      </el-row>
    </div>
  </div>
</template>

<script>
import { GetTreeList } from "@/api/headerNav.js";
export default {
  name: "photovoltaicCard", // 公司首页-卡片
  components: {},
  props: {
    dataSource: {
      type: Array,
      required: true,
    },
    chooseCom: {
      type: Boolean,
      default: false,
    },
    isStation: {
      type: Boolean,
      default: false,
    },
    theme: {
      type: String,
      default: "operate",
    },
    typeStr: {
      type: String,
      default: "-1",
    },
    benchmarkingVal: {
      type: String,
      default: "-1",
    },
    electTarget: {
      type: Array,
    },
  },
  data() {
    return {
      loading: true,
      dataSourceList: [],
      page: {
        pagesize: 8,
        currentPage: 2,
        total: 0,
      },
      searchObj: null,
      benchVal: [],
      values: null,
      checkList: null,
      checkedCities: [],
      checkedEG: [],
      disBenchList: false,
      benchIndex: "",
      eventx: null,
      eventY: null,
      stationEG: [],
      stationEGAll: [],
      stationGan: [],
      stationGans: [],
      stationGansd: [],
      overIndex: 0,
      overIndexs: 0,
      cilent: "", //区分点击事件触发条件
      stationName: [],
      stationNames: [],
      searchDate: [],
    };
  },

  methods: {
    // 限制可选日期
    pickerOptions(time) {
      return time.getTime() > Date.now();
    },
    // 选择日期
    hangDate(val, data) {
      if (val !== [] && val?.length == 2) {
        this.stationName = data.name;
        this.searchDate = val;
      }
    },
    // 获取焦点
    getDate(val) {
      if (this.stationName !== val.name) {
        this.searchObj = [];
      } else {
        this.searchObj = this.searchDate;
      }
    },
    blurDate(vales) {
      if (this.searchObj !== [] && this.searchObj?.length > 0) {
        this.$parent.setdataed(this.searchObj, vales);
      }
    },
    jumpLevelTwo(param) {
      if (param.id.includes("STA")) {
        // debugger;
        // console.log({
        //   companyCode: param.code,
        //   stationCode: param.code,
        //   type: this.typeStr,
        // });
        // 场站跳转详情
        // this.$router.push({
        //   name: "lighthome",
        //   query: {
        //     companyCode: param.code,
        //     stationCode: param.code,
        //     type: this.typeStr,
        //   },
        // });
      } else {
        // 公司跳转场站
        if (this.typeStr == -1) {
          this.$router.push({
            path: "/economicsOperation/comphomepage",
            query: { companyCode: param.id },
          });
        } else {
          this.$router.push({
            path: "/economicsOperation/comphomepageGf",
            query: { companyCode: param.id },
          });
        }
      }
    },
    deepClone(ob) {
      var obj = JSON.stringify(ob);
      var objClone = JSON.parse(obj);
      return objClone;
    },
    addRollListener() {
      const dom = document.getElementById("photovoltaicCard");
      dom.addEventListener("scroll", () => {
        const scrollTop = dom.scrollTop;
        const offsetHeight = dom.offsetHeight;
        const clientHeight = dom.clientHeight;
        const scrollHeight = dom.scrollHeight;

        if (clientHeight + scrollTop + 1 > scrollHeight) {
          if (
            this.page.total + this.page.currentPage <
            this.page.pagesize * this.page.currentPage
          ) {
            return;
          }
          this.page.currentPage = this.page.currentPage + 1;
          let arr = this.deepClone(this.dataSource);
          this.dataSourceList = arr.splice(
            0,
            this.page.pagesize * this.page.currentPage
          );
        }
      });
    },
    // 购物车添加场站
    handleCheckAllChange(val) {
      this.$parent.setdata(val);
    },
    // 购物车添加期数
    handChangeChouse(val) {
      this.stationEG.children.forEach((s) => {
        this.stationGan.push(s);
      });
      let srd = [];
      let sta = [];
      this.stationGan.forEach((n) => {
        val.forEach((z) => {
          if (z === n.id) {
            srd.push(n.aname);
            sta.push(n.parentCode);
          }
        });
      });
      this.stationName = srd;
      this.$parent.setdatas(val, this.stationGan, [...new Set(sta)]);
    },
    // 购物车添加线路
    handChangeChouses(val) {
      let proarr = [];
      this.stationEGAll.forEach((item) => {
        item.children.forEach((s) => {
          proarr.push(s);
          s.children.forEach((z) => {
            this.stationGans.push(z);
          });
        });
      });
      let srd = [];
      let sta = [];
      let pro = [];
      this.stationGans.forEach((n) => {
        val.forEach((z) => {
          if (z === n.id) {
            srd.push(n.aname);
            pro.push(n.parentCode);
          }
        });
      });
      proarr.forEach((s) => {
        pro.forEach((p) => {
          if (s.id == p) {
            sta.push(s.parentCode);
          }
        });
      });
      this.stationName = srd;
      this.$parent.setdatas(
        val,
        this.stationGans,
        [...new Set(sta)],
        [...new Set(pro)]
      );
    },
    // 购物车添加阵区
    handChangeChoused(val, vals) {
      let linearr = [];
      let proarr = [];
      this.stationEGAll.forEach((item) => {
        item.children.forEach((s) => {
          proarr.push(s);
          s.children.forEach((z) => {
            linearr.push(z);
            z.children.forEach((vals) => {
              this.stationGansd.push(vals);
            });
          });
        });
      });
      let srd = [];
      let sta = [];
      let pro = [];
      let lin = [];
      this.stationGansd.forEach((n) => {
        val.forEach((z) => {
          if (z === n.nemCode) {
            srd.push(n.stationName);
            lin.push(n.parentCode);
          }
        });
      });
      linearr.forEach((l) => {
        lin.forEach((m) => {
          if (l.id == m) {
            pro.push(l.parentCode);
          }
        });
      });
      proarr.forEach((l) => {
        pro.forEach((m) => {
          if (l.id == m) {
            sta.push(l.parentCode);
          }
        });
      });
      this.stationName = srd;
      this.$parent.setdatas(
        val,
        this.stationGansd,
        [...new Set(sta)],
        [...new Set(pro)],
        [...new Set(lin)]
      );
    },
    // 点击修改线路阵区名加场站
    changeCheck(val) {
      this.stationEG.children.forEach((s) => {
        s.stationName = this.stationEG.aname;
        s.children.forEach((n) => {
          n.names = this.stationEG.aname + n.aname;
          n.stationName = this.stationEG.aname;
          n.children.forEach((z) => {
            z.names = this.stationEG.aname + z.aname;
            z.stationName = this.stationEG.aname;
          });
        });
      });
    },
    // 鼠标移出加入对标弹窗消失
    leaveList(val) {
      this.disBenchList = val;
    },
    // 加入对标弹框期次点击收合
    handOverIndex(index) {
      if (this.overIndex == index) {
        this.overIndex = -1;
      } else {
        this.overIndex = index;
      }
      this.overIndexs = 0;
    },
    // 加入对标弹框线路点击收合
    handOverIndexs(index) {
      if (this.overIndexs == index) {
        this.overIndexs = -1;
      } else {
        this.overIndexs = index;
      }
    },
    // 添加对标数据
    async addBenchmarking(val, index, event) {
      this.stationEG = [];
      let eveent = event || window.event;
      this.eventx = eveent.pageX;
      this.eventY = eveent.pageY;
      this.benchIndex = index;
      this.disBenchList = !this.disBenchList;
      this.values = val;
      if (this.benchmarkingVal === "bench3") {
        await this.getTreeList(val, "EG");
      } else if (this.benchmarkingVal === "bench4") {
        this.overIndex = 0;
        await this.getTreeList(val, "LN");
      } else if (this.benchmarkingVal === "bench5") {
        this.overIndex = 0;
        this.overIndexs = 0;
        await this.getTreeList(val, "AG");
      }
    },
    // 获取对应树型结构
    async getTreeList(val, orgType) {
      const { data } = await GetTreeList({
        wpId: val.id,
        treeType: orgType,
      });
      this.stationEG = data;
      this.stationEGAll = [...this.stationEGAll, this.stationEG];
    },
    // 加入对标
    openCurvDatase() {
      this.disBenchList = false;
    },
    // 切换对标方式
    changenums() {
      this.checkedCities = [];
      this.benchVal = [];
      this.checkedEG = [];
      this.disBenchList = false;
      this.stationName = [];
      this.stationEGAll = [];
      this.$parent.setdata(this.benchVal);
    },

    changenBenchs(data, val) {
      this.searchObj = data;
      this.searchDate = data;
      if (val === "") {
        this.stationName = [];
      } else {
        this.stationName = val?.name;
      }
    },
    changenDate(data) {
      this.searchObj = data;
      this.searchDate = data;
    },
    // 购物车删除
    changenBench(data, val) {
      if (val != undefined) {
        let arr = [];
        val.forEach((z) => {
          arr.push(z.stationName);
        });
        this.stationName = arr;
        if (this.benchmarkingVal === "bench5") {
          this.stationGansd = val;
        } else if (this.benchmarkingVal === "bench4") {
          this.stationGans = val;
        } else if (this.benchmarkingVal === "bench3") {
          this.stationGan = val;
        }
      }
      this.benchVal = data;
      this.checkedCities = data;
      this.checkedEG = data;
      this.stationEGAll = [];
    },
  },
  mounted() {},
  unmounted() {},
  computed: {},
  watch: {
    dataSource() {
      this.page.total = this.dataSource.length;
      let arr = this.deepClone(this.dataSource);
      this.dataSourceList = arr.splice(
        0,
        this.page.pagesize * this.page.currentPage
      );

      // const dom = document.getElementById('photovoltaicCard')
      // dom.scrollTop=0;
      // this.page.currentPage=2;

      this.$nextTick(() => this.addRollListener());
    },
  },
};
</script>

<style lang="less" scoped>
.sunList {
  /deep/ .el-checkbox {
    height: 20px;
  }
}

.window {
  position: fixed;
  min-height: 220px;
  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: 25px;
  color: #1c99ff;
  font-size: 16px;
  line-height: 25px;
  box-sizing: border-box;

  //cursor: move;
}

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

  &:after {
    content: "";
    display: block;
    width: 8px;
    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 {
  padding-left: 20px;
  display: flex;
  position: relative;

  .overAname {
    width: 100px;
    white-space: nowrap;
  }

  &:before {
    content: "";
    display: block;
    width: 20px;
    height: 20px;
    border-bottom: 1px dashed rgba(28, 153, 255, 0.5);
    border-left: 1px dashed rgba(28, 153, 255, 0.5);
    position: absolute;
    left: 0;
    top: -9px;
  }
}

.overHeader {
  margin-left: 20px;
  border-left: 1px dashed rgba(28, 153, 255, 0.5);
}

.overHidden {
  margin-left: 20px;
  padding-left: 20px;
  display: flex;
  position: relative;

  &:before {
    content: "";
    display: block;
    width: 20px;
    height: 20px;
    border-bottom: 1px dashed rgba(28, 153, 255, 0.5);
    border-left: 1px dashed rgba(28, 153, 255, 0.5);
    position: absolute;
    left: 2px;
    top: -8px;
  }
}

.overHidds {
  padding-left: 20px;
  display: flex;
  position: relative;

  .overAname {
    width: 30px;
    white-space: nowrap;
  }

  &:before {
    content: "";
    display: block;
    width: 20px;
    height: 20px;
    border-bottom: 1px dashed rgba(28, 153, 255, 0.5);

    position: absolute;
    left: 2px;
    top: -8px;
  }
}

.overHidded {
  margin-left: 22px;
  padding-left: 20px;
  display: flex;
  border-left: 1px dashed rgba(28, 153, 255, 0.5);
  position: relative;

  &:before {
    content: "";
    display: block;
    width: 20px;
    height: 20px;
    border-bottom: 1px dashed rgba(28, 153, 255, 0.5);

    position: absolute;
    left: 2px;
    top: -8px;
  }
}

.overTit {
  font-size: 13px;
  margin-left: 15px;
  margin-top: 10px;

  /deep/ .el-checkbox__label {
    padding-left: 2px;
  }

  .overLeft {
    border-left: 1px dashed rgba(28, 153, 255, 0.5);
    margin-left: 1px;

    &:last-of-type {
      border-left: none;
    }
  }

  p {
    font-size: 14px;
  }

  .dot {
    display: inline-block;
    width: 7px;
    height: 7px;
    margin-left: -3px;
    border-radius: 50%;
    border: 1px solid rgba(28, 153, 255, 1);
    box-shadow: 0 0 7px rgb(28 153 255);
    margin-right: 7px;
    margin-top: 8px;
    background-color: RGBA(10, 13, 17, 1);
  }

  .dots {
    display: inline-block;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    border: 1px solid rgba(28, 153, 255, 1);
    box-shadow: 0 0 7px rgb(28 153 255);
    margin-right: 7px;
    margin-top: 8px;
    background-color: RGBA(10, 13, 17, 1);
  }
}

.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;
  justify-content: space-between;
  font-size: 13px;
  padding-right: 20px;
  padding-left: 20px;
  color: rgba(211, 211, 211, 1);
}

/deep/ .el-col {
  position: relative;
}

.el-checkbox_tit {
  width: 60px;
  position: absolute;
  right: -10px;
  top: 15px;
  z-index: 9;

  /deep/ .el-checkbox__inner {
    border: 1px solid #1b93f4 !important;
  }

  /deep/ .el-checkbox__input is-checked {
    .el-checkbox__inner {
    }
  }

  /deep/ .el-checkbox__input.is-checked .el-checkbox__inner {
    border: 1px solid #e17d24 !important;
  }

  /deep/ .el-checkbox__inner::after {
    width: 4px;
  }

  /deep/ .el-checkbox__input.is-checked {
    background: #e17d24;
  }

  /deep/ .el-checkbox__input {
    margin-left: 10px;
  }
}

::v-deep .el-input--mini .el-input__inner {
  background: #212933 !important;
}

.photovoltaicCard {
  display: flex;
  flex-wrap: wrap;
  overflow: auto;
  padding-bottom: 50px;

  .el-row {
    width: 100%;

    .card-hover {
      cursor: pointer;
      margin-left: 5px;
    }

    .card-list {
      position: relative;
      display: flex;
      width: 100%;
      height: 250px;
      background: rgba(11, 11, 11, 0.45);
      padding: 25px;
      overflow: hidden;
      margin-bottom: 15px;
      .benchIndex ::v-deep {
        position: absolute;
        right: 20px;
        // background: #409eff;
        z-index: 1;
        .el-date-editor--daterange {
          opacity: 0;
          cursor: pointer;
        }
      }

      .check-button {
        cursor: pointer;
        position: absolute;
        right: 40px;
        z-index: 1;
      }
      .border-corner {
        position: absolute;
        height: 100%;
        width: 100%;
        left: 0;
        top: 0;
        z-index: 0;

        div {
          position: absolute;
          width: 6px;
          height: 6px;
          border-color: #fff;
        }

        .border-top {
          border-top: 1px solid;
          border-left: 1px solid;
        }

        .border-right {
          right: 0;
          border-top: 1px solid;
          border-right: 1px solid;
        }

        .border-bottom {
          right: 0;
          bottom: 0;
          border-bottom: 1px solid;
          border-right: 1px solid;
        }

        .border-left {
          bottom: 0;
          border-bottom: 1px solid;
          border-left: 1px solid;
        }
      }

      .card-img {
        position: relative;
        width: 158px;
        height: 100%;
        margin-right: 25px;
        cursor: pointer;
      }

      .leftData {
        width: 158px;
        height: 100%;
        margin-right: 25px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        .data-num {
          font-size: 16px;
          color: #1b99ff;
          > div > span {
            font-family: "Bicubik";
            font-size: 22px;
          }
          > div:last-child {
            margin-top: 15px;
          }
        }
        .data-prop {
          font-size: 14px;
        }
      }

      .card-data {
        position: relative;
        flex: 1;
        width: 50%;

        .card-company {
          padding-bottom: 10px;
          border-bottom: 1px solid #3c3f43;

          .company-name {
            font-size: 16px;
            color: #fff;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
          }

          .company-address {
            margin-top: 5px;
            color: #b3b3b3;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
          }
        }
        .data-list {
          margin-top: 15px;
          display: flex;
          flex-wrap: wrap;

          li {
            width: 50%;
            margin-bottom: 8px;

            .data-prop {
              margin-bottom: 4px;
            }

            .data-num {
              span {
                display: inline-block;
                color: rgb(27, 147, 244);
              }
            }
          }
        }
        .data-maintenance {
          margin-top: 25px;
          li {
            display: flex;
            justify-content: space-between;
            margin-bottom: 10px;
            font-size: 14px;
            width: 100%;
            .maintenance-item {
              display: flex;
              width: 100%;
              flex-direction: column;
              .process-wrapper {
                height: 4.5px;
                max-width: 100%;
                background-color: rgba(142, 176, 255, 0.2);
              }
              .process-bar {
                position: relative;
                height: 4.5px;
                max-width: 100%;

                background: linear-gradient(90deg, #561f00, #853000, #f78712);
                .img {
                  background: url("../../../../../assets/img/home/generatingCapacityDay.png")
                    no-repeat;
                  position: absolute;
                  display: inline-block;
                  width: 39px;
                  height: 39px;
                  top: -17px;
                  right: -22px;
                  transform: scale(0.8);
                }
                &.fd {
                  background: linear-gradient(90deg, #001442, #1c99ff);
                  .img {
                    background: url("../../../../../assets/img/home/generatingCapacityMonth.png")
                      no-repeat;
                  }
                }
                &.gf {
                  background: linear-gradient(90deg, #561f00, #853000, #f78712);
                  .img {
                    background: url("../../../../../assets/img/home/generatingCapacityDay.png")
                      no-repeat;
                  }
                }
              }
              .text-wrapper {
                display: flex;
                justify-content: space-between;
                margin-bottom: 5px;
                .count {
                  font-size: 14px;
                  color: #ff8300;
                  font-family: "Arial";
                  font-weight: bolder;
                  .text {
                    font-size: 11px;
                  }
                  &.fd {
                    color: #1c99ff;
                  }
                  &.gf {
                    color: #ff8300;
                  }
                }
              }
            }
            .data-prop {
              margin-bottom: 10px;
            }

            .data-num {
              span {
                display: inline-block;
                min-width: 50px;
                text-align: right;
                color: rgb(27, 147, 244);
              }
            }
            // .maintenance-data {

            // }
          }
          .child-interrupt {
            .service-label::before {
              background: #a7a7a7;
            }
            .box-item {
              color: #fff;
              .service-data {
                color: #a7a7a7;
              }
            }
          }
          .child-halt {
            .service-label::before {
              background: #ba3237;
            }
            .service-data {
              color: #ba3237;
            }
          }
          .child-fault {
            .service-label::before {
              background: #e17d24;
            }
            .service-data {
              color: #e17d24;
            }
          }
          .child-normal {
            .service-label::before {
              background: #1986e0;
            }
            .service-data {
              color: #1986e0;
            }
          }
        }
      }
    }

    .data-cards {
      display: flex;
      flex-wrap: wrap;
      width: 100%;
    }

    .empty-data {
      width: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      text-align: center;
    }
  }
}
</style>