ims-gyee/src/views/layout/economicsOperation/companyHomepage/indexGf.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 class="label">对标方式：</div>
            <el-select
              style="width: 145px"
              v-model="benchmarkingVal"
              placeholder="请选择"
              clearable
              size="mini"
              @change="changeNum"
            >
              <el-option
                @mousedown.native="clickBench(item.value)"
                v-for="(item, indexe) in benchmarking"
                :key="indexe"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
            <el-badge
              v-if="benchNum !== 0 && benchmarkingVal !== ''"
              @click="hidenBenchList"
              :value="benchNum"
              style="margin-left: 20px; cursor: pointer"
            >
              <img src="@/assets/img/images/benhNum.png" />
            </el-badge>
          </div>
          <div
            style="z-index: 999; width: 45%; background: #0c0f15"
            class="window"
            v-if="displaycheck === true"
          >
            <div class="stitBorder"></div>
            <p class="ststTit header">
              <span v-if="benchmarkingVal === 'bench2'"> 场际对标 </span>
              <span v-if="benchmarkingVal === 'bench3'"> 项目对标 </span>
              <span v-if="benchmarkingVal === 'bench4'"> 线路对标 </span>
              <span v-if="benchmarkingVal === 'bench5'"> 阵区对标 </span>
              <span v-if="benchmarkingVal === 'bench1'"> 场内对标 </span>
              (<span style="color: #d8d8d9">{{ benchNum }}</span
              >)
            </p>
            <div class="lines"></div>
            <div
              class="overHidd"
              style="padding-top: 10px"
              v-if="benchmarkingVal === 'bench1'"
            >
              <ul
                v-for="(item, index) in cardBench"
                :key="index"
                class="stations"
              >
                <li>
                  {{ stationData?.name }}
                </li>
                <li
                  style="
                    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>
            <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>
            <div
              class="overHidd"
              v-if="
                benchmarkingVal !== 'bench2' && benchmarkingVal !== 'bench1'
              "
            >
              <ul
                v-for="(item, index) in cardLists"
                :key="index"
                class="stations"
              >
                <li style="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"
              v-if="
                benchmarkingVal === 'bench1' || benchmarkingVal === 'bench2'
              "
              style="position: absolute; bottom: 19px; left: 15px"
            >
              <el-button
                type="primary"
                :disabled="cardBench.length < 2"
                round
                @click="openCurvData"
                >开始对标</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>
            <el-row
              class="footerButton"
              v-else
              style="position: absolute; bottom: 19px; left: 15px"
            >
              <el-button
                type="primary"
                :disabled="cardLists.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 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
        ref="childCard"
        :dataSource="cardData"
        :benchmarkingVal="benchmarkingVal"
        :electTarget="electTarget"
        :typeStr="typeNode"
        :theme="themeType"
        :isStation="true"
      />
      <!-- <Card
        v-if="isActive === 'card'"
        :dataSource="cardData"
        :isStation="true"
        :theme="themeType"
      />
       <List
        v-if="isActive === 'list'"
        :dataSource="cardData"
        :isStation="true"
        :theme="themeType"
      /> -->
    </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 v-if="benchmarkingVal === 'bench3'" class="title">项目对标</div>
          <div v-if="benchmarkingVal === 'bench4'" class="title">线路对标</div>
          <div v-if="benchmarkingVal === 'bench5'" class="title">阵区对标</div>
          <div v-if="benchmarkingVal === 'bench1'" class="title">场内对标</div>
        </div>
      </template>
      <div class="dialog-body">
        <img class="dialog-img" src="@assets/img/images/dialog.png" />
        <siteBench v-if="benchmarkingVal === 'bench1'" ref="siteBench" />
        <intervalBench
          v-if="benchmarkingVal === 'bench2'"
          ref="intervalBench"
        />
        <projectBench v-if="benchmarkingVal === 'bench3'" ref="projectBench" />
        <wiringBench v-if="benchmarkingVal === 'bench4'" ref="wiringBench" />
        <quarterBench v-if="benchmarkingVal === 'bench5'" ref="quarterBench" />
      </div>
    </el-dialog>
  </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 siteBench from "@/views//layout/economicsOperation/benchmarkingManagement/siteBenchmarking/index";
import intervalBench from "@/views//layout/economicsOperation/benchmarkingManagement/intervalBenchmarking/index";
import projectBench from "@/views//layout/economicsOperation/benchmarkingManagement/projectBenchmarking/index";
import wiringBench from "@/views//layout/economicsOperation/benchmarkingManagement/wiringBenchmarking/index";
import quarterBench from "@/views//layout/economicsOperation/benchmarkingManagement/quarterBenchmarking/index";
import { homePage } from "@/api/economy-homepage.js";
import { GetOrganization, GetStationByCompany } from "@/api/econ-headerNav.js";
import { GetRegionInfo } from "@/api/home.js";
export default {
  name: "companyHomepage", // 公司分析
  components: {
    Card,
    List,
    PieChart,
    siteBench,
    intervalBench,
    projectBench,
    wiringBench,
    quarterBench,
  },
  data() {
    return {
      //风光类型
      levels1Data: [
        { type: -1, flag: true, id: "F", name: "风电" },
        { type: -2, flag: true, id: "G", name: "光伏" },
      ],
      province: {
        name: "",
        code: "",
      },
      typeNode: "-2",
      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,
      benchmarking: [
        { label: "场内对标", value: "bench1" },
        { label: "场际对标", value: "bench2" },
        { label: "项目对标", value: "bench3" },
        { label: "线路对标", value: "bench4" },
        { label: "阵区对标", value: "bench5" },
      ],
      benchmarkingVal: "",
      benchNum: 0,
      displaycheck: false,
      displaybench: false,
      benchIndex: "",
      selectTime: "",
      benchChang: "",
      cardBench: [],
      ListBench: [],
      ListBenchs: [],
      didBench: "",
      benchCode: "",
      stationData: {},
      dateTimes: null,
      timerCurvData: null,
      eventx: "",
      eventY: "",
      stationEg: null,
      cardVal: [],
      cardVals: [],
      cardLists: [],
      cardListed: [],
      cardNmeCode: [],
      cardSta: [],
      cardPro: [],
      cardLin: [],
    };
  },

  methods: {
    init() {
      let province = JSON.parse(localStorage.getItem("GlobalConfig"));
      if (!province) {
        this.getProvinceCode();
      } else {
        this.province = {
          name: province.name,
          code: province.code,
        };
      }
      this.checkNode = this.$route.query.companyCode || this.province.code;
      this.typeNode = this.levels1Data[1].type;
      this.getDataDetial();
      this.getOrganizationList();
      this.getStationList();
    },
    async getProvinceCode() {
      const data = await GetRegionInfo();
      this.province = {
        name: data.name,
        code: data.code,
      };
      localStorage.setItem("GlobalConfig", JSON.stringify(data));
    },
    // 打开对标框
    async hidenBenchList(event) {
      this.displaycheck = !this.displaycheck;
    },
    // 切换对标方式
    changeNum(val) {
      // clearInterval(this.timerDetial);

      if (val === "") {
        this.$confirm("是否清空对标方式?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(async () => {
            this.$message({
              type: "success",
              message: "已清空!",
              offset: 200,
              center: true,
              customClass: "s",
            });
            this.selectTime = "";
            this.displaycheck = false;
            this.$refs.childCard.changenums();
          })
          .catch((_) => {
            this.benchChang = this.didBench;
            this.benchmarkingVal = this.didBench;
          });
      }

      this.benchChang = val;
    },
    // 点击对标方式
    clickBench(val) {
      this.didBench = val;
      let s = this.benchmarkingVal;

      if (
        this.benchChang !== "" &&
        val !== "" &&
        this.benchmarkingVal !== val &&
        this.benchNum !== 0
      ) {
        this.$confirm("是否切换对标方式?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(async () => {
            this.$message({
              type: "success",
              message: "切换成功!",
              offset: 200,
              center: true,
              customClass: "s",
            });
            this.selectTime = "";
            this.benchmarkingVal = val;
            this.$refs.childCard.changenums();
            this.displaycheck = false;
          })
          .catch(() => {
            this.benchmarkingVal = s;
          });
      }
    },
    // 删除购物车内容
    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);
      } else if (this.benchmarkingVal === "bench1") {
        let stationAname;
        this.cardBench.splice(index, 1);
        this.benchNum = this.cardBench.length;
        if (this.cardBench.length === 0) {
          this.displaycheck = false;
          stationAname = "";
        } else {
          stationAname = this.stationData;
        }
        this.$refs.childCard.changenBenchs(this.cardBench, stationAname);
      } else if (
        this.benchmarkingVal === "bench4" ||
        this.benchmarkingVal === "bench5" ||
        this.benchmarkingVal === "bench3"
      ) {
        this.cardLists.splice(index, 1);
        this.cardNmeCode.splice(index, 1);
        let arr = [];
        this.cardVal.forEach((s) => {
          this.cardNmeCode.forEach((z) => {
            if (z === s.nemCode) {
              arr.push(s);
            }
          });
        });
        this.cardVals = [...new Set(arr)];
        this.cardBench = this.cardNmeCode;
        if (this.cardNmeCode.length === 0) {
          this.displaycheck = false;
        }
        this.$refs.childCard.changenBench(this.cardBench, this.cardVals);
        this.benchNum = this.cardNmeCode.length;
      }
    },
    // 清空购物车
    clearTable() {
      this.cardBench = [];
      this.benchNum = this.cardBench.length;

      this.displaycheck = false;
      if (this.benchmarkingVal === "bench1") {
        this.$refs.childCard.changenBenchs(this.cardBench, "");
      } else {
        this.$refs.childCard.changenBench(this.cardBench);
      }
    },
    disBenTable() {
      this.displaycheck = false;
    },
    // 点击确认后添加数据
    setdata(data) {
      this.cardBench = data;
      this.benchNum = data.length;
      if (data.length === 0) {
        this.displaycheck = false;
      }
    },

    // 点击确认后添加数据
    setdataed(data, val) {
      this.cardBench = data;
      this.benchNum = data.length;
      this.stationData = val;
      if (data.length === 0) {
        this.displaycheck = false;
      }
    },
    setdatas(data, val, sta, pro, lin) {
      this.cardSta = sta;
      this.cardPro = pro;
      this.cardLin = lin;
      this.cardBench = data;
      this.cardVal = val;
      this.benchNum = data.length;
      if (data.length === 0) {
        this.displaycheck = false;
      }
      this.getList();
    },
    getList() {
      let arr = [];
      let data = [];
      if (this.benchmarkingVal === "bench3") {
        let n = [];
        this.cardVal.forEach((s) => {
          this.cardBench.forEach((z) => {
            if (s.nemCode === z) {
              arr.push(s.aname);
              data.push(s.id);
              n.push(s);
            }
          });
        });
        this.cardVals = [...new Set(n)];
      } else if (
        this.benchmarkingVal === "bench4" ||
        this.benchmarkingVal === "bench5"
      ) {
        let n = [];
        this.cardVal.forEach((s) => {
          this.cardBench.forEach((z, index) => {
            if (s.nemCode === z) {
              arr.push(s.names);
              data.push(s.nemCode);
              n.push(s);
            }
          });
        });
        this.cardVals = [...new Set(n)];
      }
      this.cardNmeCode = [...new Set(data)];
      this.cardLists = [...new Set(arr)];
    },
    // 场内开始对标
    openCurvDatasedDate() {
      let arr = [];
      this.cardBench.forEach((s) => {
        arr.push(s);
      });
      if (arr.length == 2) {
        this.displaycheck = false;
        this.displaybench = true;
        this.$nextTick(() => {
          if (this.$refs.siteBench) {
            this.$refs.siteBench.starTime = arr[0];
            this.$refs.siteBench.endTime = arr[1];
          }
          this.$refs.siteBench &&
            this.$refs.siteBench.init(
              this.stationData,
              this.typeNode,
              this.checkNode
            );
        });
      }
    },
    openCurvData() {
      this.benchmarkingVal === "bench1"
        ? this.openCurvDatasedDate()
        : this.openCurvDatased();
    },
    // 开始对标(除场内对标)
    openCurvDatased() {
      this.displaycheck = false;
      this.displaybench = true;
      this.curvData();
    },
    curvData() {
      if (this.benchmarkingVal === "bench2") {
        let arr = [];
        this.cardData.forEach((s) => {
          this.cardBench.forEach((d) => {
            if (s.name === d) {
              arr.push(s.id);
            }
          });
        });
        this.$nextTick(() => {
          this.$refs.intervalBench &&
            this.$refs.intervalBench.init(arr, this.typeNode, this.checkNode);
        });
      } else if (this.benchmarkingVal === "bench3") {
        this.$nextTick(() => {
          this.$refs.projectBench &&
            this.$refs.projectBench.init(
              this.cardSta,
              this.cardBench,
              this.checkNode,
              this.typeNode
            );
        });
      } else if (this.benchmarkingVal === "bench4") {
        this.$nextTick(() => {
          this.$refs.wiringBench &&
            this.$refs.wiringBench.init(
              this.typeNode,
              this.checkNode,
              this.cardSta,
              this.cardPro,
              this.cardBench
            );
        });
      } else if (this.benchmarkingVal === "bench5") {
        this.$nextTick(() => {
          this.$refs.quarterBench &&
            this.$refs.quarterBench.init(
              this.typeNode,
              this.checkNode,
              this.cardSta,
              this.cardPro,
              this.cardLin,
              this.cardBench
            );
        });
      }
    },
    // 关闭购物车
    cancel() {
      this.displaycheck = false;
    },
    //切换类型
    levels1DataChang() {
      this.checkNode = "";
      this.resetAllFiller();
      this.$router.push({ path: "/economicsOperation/comphomepage" });
    },
    // 获取数据
    async getDataDetial() {
      let { data: res } = await homePage({
        companyId: this.checkNode,
        type: 0,
        statype: -2,
        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>
.window {
  position: absolute;
  top: 22px;
  right: -45%;
  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);
  white-space: nowrap;
}

.photovoltaic-filter {
  /deep/ .el-badge__content--danger {
    background: #ff6600;
    border: 1px solid #a5a5a5;
  }

  /deep/ .el-badge__content.is-fixed {
    top: 5px;
    right: 10px;
  }
}

.searchColors {
  background: rgba(0, 70, 199, 0.5) !important;
  color: #ffffff !important;
}

: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;
    }
  }
}

.dialog-body {
  height: 100%;
}

.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;
        position: relative;
        .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>