fd_dwgz_zhyw_nx/src/views/Home/Home.vue

<template>
  <div :class="$store.state.themeName === 'light' ? 'home_light' : 'home'">
    <div class="base-info">
      <!-- 旧 -->
      <div v-if="false">
        <div class="infos" v-if="wpId != 0 && activeTab === 1">
          <div class="titles">
            <div class="amount">
              <div class="icon fengji-icon svg-icon svg-icon-white"></div>
              <img class="amount-image" src="../../assets/png/wind.png" alt="">
              <div class="amount-nums"><text class="num-item">{{ mxztmap.fd_jrts || mxztmap.jrts}}</text> 台</div>
            </div>
            <div v-if="!(wpId.includes('FDC') || wpId.includes('GC') || wpId.includes('GDC'))" class="info-nums">场站 <text
                class="nums">{{ fcNum }}</text> 个</div>
          </div>
          <div class="types">
            <div class="type-model">
              <div class="type-name" style="color:#05bb4c">待机</div>
              <div class="type-num">{{ mxztmap.fd_djts || mxztmap.djts || 0}}</div>
            </div>
            <div class="type-model">
              <div class="type-name" style="color:#1529E9">运行</div>
              <div class="type-num">{{ mxztmap.fd_yxts || mxztmap.yxts || 0}}</div>
            </div>
            <div class="type-model">
              <div class="type-name" style="color:#c531c7">限电</div>
              <div class="type-num">{{ mxztmap.fd_xdts || mxztmap.xdts}}</div>
            </div>
            <div class="type-model">
              <div class="type-name" style="color:#BA3237">故障</div>
              <div class="type-num">{{ mxztmap.fd_gzts || mxztmap.gzts || 0}}</div>
            </div>
            <div class="type-model">
              <div class="type-name" style="color:#ff7a7f">检修</div>
              <div class="type-num">{{ mxztmap.fd_jxts || mxztmap.jxts || 0}}</div>
            </div>
            <div class="type-model">
              <div class="type-name" style="color:rgba(255, 255, 255, 0.55)">受累</div>
              <div class="type-num">{{ mxztmap.fd_slts || mxztmap.slts }}</div>
            </div>
            <div class="type-model">
              <div class="type-name" style="color:#606769">离线</div>
              <div class="type-num">{{ mxztmap.fd_lxts || mxztmap.lxts || 0}}</div>
            </div>
          </div>
        </div>
        <div class="infos" v-if="wpId != 0 && activeTab === 2">
          <div class="titles">
            <div class="amount">
              <div class="icon fengji-icon svg-icon svg-icon-white"> </div>
              <img class="amount-image" src="../../assets/png/sun.png" alt="">
              <div class="amount-nums"><text class="num-item">{{ mxztmap.gf_jrts }}</text> 台</div>
            </div>
            <div class="info-nums">场站 <text class="nums">{{ gfNum }}</text> 个</div>
          </div>
          <div class="types">
            <div class="type-model">
              <div class="type-name" style="color:#05bb4c">待机</div>
              <div class="type-num">{{ mxztmap.gf_djts }}</div>
            </div>
            <div class="type-model">
              <div class="type-name" style="color:#1529E9">运行</div>
              <div class="type-num">{{ mxztmap.gf_yxts }}</div>
            </div>
            <div class="type-model">
              <div class="type-name" style="color:#c531c7">限电</div>
              <div class="type-num">{{ mxztmap.gf_xdts }}</div>
            </div>
            <div class="type-model">
              <div class="type-name" style="color:#BA3237">故障</div>
              <div class="type-num">{{ mxztmap.gf_gzts }}</div>
            </div>
            <div class="type-model">
              <div class="type-name" style="color:#ff7a7f">检修</div>
              <div class="type-num">{{ mxztmap.gf_jxts }}</div>
            </div>
            <div class="type-model">
              <div class="type-name" style="color:rgba(255, 255, 255, 0.55)">受累</div>
              <div class="type-num">{{ mxztmap.gf_slts }}</div>
            </div>
            <div class="type-model">
              <div class="type-name" style="color:#606769">离线</div>
              <div class="type-num">{{ mxztmap.gf_lxts }}</div>
            </div>
          </div>
        </div>
      </div>
      
    </div>
    <div class="top-mid-panel">
      <Map 
        :wpId="wpId" 
        :jczbmap="jczbmap" 
        :homeSuspensionWindowsData="homeSuspensionWindowsData" 
        :StationinformationData="StationinformationData"
        :newpointmap="newpointmapData" 
        :day="String(jczbmap.aqts)" 
        :data="fcmap" :xtData="xtmap"
        @mapClick="changeShowType" 
        @mapClicks="changeShowTypes" 
        @mapClickBack="changeShowBackType"
        @currentActiveTab="currentActiveTab" 
        @backStation="onBackStation"
      ></Map>
    </div>
    <div class="right" :class="activeTab === 1 || activeTab === 2 ? 'top-distance' : ''">
      <!-- 新 -->
      <Row type="flex" style="margin-bottom:26px">
        <Col :span="24">
          <!-- 新 -->
        <div class="model-bg-new">
          <div class="titles">
            <div class="name">实时负荷</div>
            <div class="unit">(单位: MW)</div>
          </div>
          <power-review-home :data="powerDataHome" :id="wpId" @chartClick="showPowerChart" />
        </div>
        </Col>
      </Row>
      <Row type="flex" style="margin-bottom:26px" v-if="activeTab === 1 || activeTab === 0">
        <Col :span="24">
          <div class="model-bg-new-right">
            <div class="infos">
              <div class="titles">
                <div class="amount">
                  <div class="icon fengji-icon svg-icon svg-icon-white"></div>
                  <img class="amount-image" src="../../assets/png/wind.png" alt="">
                  <div class="amount-nums"><text class="num-item">{{ newpointmapData?.jr_fj_ts }}</text> 台</div>
                </div>
                <div v-if="!(wpId.includes('FDC') || wpId.includes('GC') || wpId.includes('GDC'))" class="info-nums">风电场<text
                    class="nums">{{ newpointmapData?.jr_fcts }}</text> 个</div>
              </div>
              <div class="types">
                <div class="type-model">
                  <div class="type-name" style="color:#05bb4c">运行</div>
                  <div class="type-num">{{ mxztmap.fd_yxts || mxztmap.yxts || 0}}</div>
                </div>
                <div class="type-model">
                  <div class="type-name" style="color:#e17e23">检修</div>
                  <div class="type-num">{{ mxztmap.fd_jxts || mxztmap.jxts || 0}}</div>
                </div>
                <div class="type-model">
                  <div class="type-name" style="color:#BA3237">故障</div>
                  <div class="type-num">{{ mxztmap.fd_gzts || mxztmap.gzts || 0}}</div>
                </div>
                <div class="type-model">
                  <div class="type-name" style="color:#606769">离线</div>
                  <div class="type-num">{{ mxztmap.fd_lxts || mxztmap.lxts || 0}}</div>
                </div>
                <div class="type-model">
                  <div class="type-name" style="color:#4b55ae">待机</div>
                  <div class="type-num">{{ mxztmap.fd_djts || mxztmap.djts || 0}}</div>
                </div>
                <div class="type-model">
                  <div class="type-name" style="color:#c531c7">限电</div>
                  <div class="type-num">{{ mxztmap.fd_xdts || mxztmap.xdts || 0}}</div>
                </div>
              </div>
              <div class="tabSwitchover">
                <!-- <div class="tabSwitchover-item" :class="tabIndex == val.id ? 'tab-active': ''" v-for="val in tabTitle" :key="val.id" @click="tabClick(val)"><span>{{val.title}}</span></div> -->
                <div class="unit"><span>(单位: 万kWh)</span></div>
              </div>
              <div v-for="(item, index) in ForecastPowerNewHome_fc" :key="index">
                <div class="power-charts">
                  <div class="power-name">{{ item[0].name }}</div>
                  <div class="power-item">
                    <div class="power-value">
                      <span :style="item[0].color === 1 ? 'background-color:#4B55AE' :'background-color:#05BB4C'"></span>
                      <span>{{ item[0].total }}</span>
                    </div>
                    <list-bar-chart-2-home :list="item" height="55px" width="250px" @click="showForecastBox('风电场'+item[0].name)" />
                  </div>
                </div>
              </div>
              <!-- <div v-for="(item, index) in ForecastPowerNewHome_fc" :key="index">
                <div class="power-charts" v-for="(val, index1) in item.data" :key="index1" v-show="item.id == tabIndex">
                  <div class="power-name">{{ val[0].name }}</div>
                  <div class="power-item">
                    <div class="power-value">
                      <span :style="index1 % 2 === 0 ? 'background-color:#4B55AE' :'background-color:#05BB4C'"></span>
                      <span>{{ val[0].value }}</span>
                    </div>
                    <list-bar-chart-2-home :list="val" height="40px" width="190px" @click="showForecastBox(item)" /> 
                  </div>
                </div>
              </div> -->
            </div>
        </div>
        </Col>
      </Row>
      <Row type="flex" style="margin-bottom:26px" v-if="activeTab === 2 || activeTab === 0">
        <Col :span="24">
          <div class="model-bg-new-right">
            <div class="infos">
              <div class="titles">
                <div class="amount">
                  <div class="icon fengji-icon svg-icon svg-icon-white"> </div>
                  <img class="amount-image" src="../../assets/png/sun.png" alt="">
                  <div class="amount-nums"><text class="num-item">{{ Number(newpointmapData?.jr_gf_jzts + newpointmapData?.jr_gf_zcts) || 0}}</text> 台</div>
                </div>
                <div class="info-nums">电站<text class="nums">{{ newpointmapData?.jr_gfts }}</text> 个</div>
              </div>
              <div class="types">
                <div class="type-model">
                  <div class="type-name" style="color:#05bb4c">运行</div>
                  <div class="type-num">{{ mxztmap.gf_yxts }}</div>
                </div>
                <div class="type-model">
                  <div class="type-name" style="color:#e17e23">检修</div>
                  <div class="type-num">{{ mxztmap.gf_jxts }}</div>
                </div>
                <div class="type-model">
                  <div class="type-name" style="color:#BA3237">故障</div>
                  <div class="type-num">{{ mxztmap.gf_gzts }}</div>
                </div>
                <div class="type-model">
                  <div class="type-name" style="color:#606769">离线</div>
                  <div class="type-num">{{ mxztmap.gf_lxts }}</div>
                </div>
                <div class="type-model">
                  <div class="type-name" style="color:#4b55ae">待机</div>
                  <div class="type-num">{{ mxztmap.gf_djts }}</div>
                </div>
                <div class="type-model">
                  <div class="type-name" style="color:#c531c7">限电</div>
                  <div class="type-num">{{ mxztmap.gf_xdts }}</div>
                </div>
              </div>
              <div class="tabSwitchover">
                <!-- <div class="tabSwitchover-item" :class="tabIndex_gf == val.id ? 'tab-active': ''" v-for="val in tabTitle_gf" :key="val.id" @click="tabClick_gf(val)"><span>{{val.title}}</span></div> -->
                <div class="unit"><span>(单位: 万kWh)</span></div>
              </div>
              <!-- tab的 -->
              <!-- <div v-for="(item, index) in ForecastPowerNewHome_gf" :key="index">
                <div class="power-charts" v-for="(val, index1) in item.data" :key="index1" v-show="item.id == tabIndex">
                  <div class="power-name">{{ val[0].name }}</div>
                  <div class="power-item">
                    <div class="power-value">
                      <span :style="index1 % 2 === 0 ? 'background-color:#4B55AE' :'background-color:#05BB4C'"></span>
                      <span>{{ val[0].value }}</span>
                    </div>
                    <list-bar-chart-2-home :list="val" height="40px" width="190px" @click="showForecastBox(item)" /> 
                  </div>
                </div>
              </div> -->
              <div v-for="(item, index) in ForecastPowerNewHome_gf" :key="index">
                <div class="power-charts">
                  <div class="power-name">{{ item[0].name }}</div>
                  <div class="power-item">
                    <div class="power-value">
                      <span :style="index % 2 === 0 ? 'background-color:#4B55AE' :'background-color:#05BB4C'"></span>
                      <span>{{ item[0].total }}</span>
                    </div>
                    <list-bar-chart-2-home :list="item" height="55px" width="250px" @click="showForecastBox('电站'+item[0].name)" />
                  </div>
                </div>
              </div>
            </div>
          </div>
        </Col>
      </Row>
      <div class="infos-echarts" v-if="activeTab === 1 || activeTab === 2">
        <div class="charts">
            <div class="energy-title">24小时功率曲线图</div>
            <multiple-line-chart-home 
              class="charts-item" 
              width="100%" 
              height="143px" 
              :list="Powertrend_power.value" 
              :units="Powertrend_power.units" 
              :showLegend="true" 
            ></multiple-line-chart-home>
        </div>
      </div>
      <!-- 旧 2022/10 -->
      <div v-if="false">
        <Row type="flex" style="padding-bottom: 10px;" v-if="wpId != 0">
          <Col :span="24">
          <div class="model-bg">
            <div class="titles">
              <div class="name">效益提升</div>
              <div class="unit">(单位：万kWh)</div>
            </div>
            <coulometric-analysis :bmgz="gxkmap.tjsl" :tsl="0" :jdl="gxkmap.tjl" :fnlyl="wxssmap.yfnlyl"
              :sbklyl="gxkmap.ysbklyl" :zhcydl="gxkmap.yzhcydl" :yhfj="gxkmap.sjtjsl" />
          </div>
          </Col>
        </Row>
        <Row type="flex" style="padding-bottom: 10px" v-if="wpId != 0">
          <Col :span="24">
          <div class="model-bg">
            <div class="titles">
              <div class="name">发电量</div>
              <div class="unit">(单位：万kWh)</div>
            </div>
            <div v-for="(item, index) in ForecastPower" :key="index">
              <div class="power-charts">
                <div class="power-name-old">{{ item[0].name }}</div>
                <div class="power-item">
                  <div class="power-value-old">
                    <div :class="index % 2 === 0 ? 'green-value' : 'purple-value'">{{ item[0].value }}</div>
                    <div>{{ item[0].total }}</div>
                  </div>
                  <list-bar-chart-2 :list="item" height="40px" width="250px" @click="showForecastBox" />
                </div>
              </div>
            </div>
            <!-- <power-plan
                :data="planData"
                :title="planBtnName"
                :showSingle="powerplanShowSingle"
                :id="wpId"
                @chartClick="showDoneChart"
              /> -->
          </div>
          </Col>
        </Row>
        <Row type="flex" style="margin-bottom:26px">
          <Col :span="24">
          <!-- 新 -->
          <!-- <div class="model-bg" v-if="wpId == 0">
            <div class="titles">
              <div class="name">功率负荷</div>
              <div class="unit"></div>
            </div>
            <power-review-home :data="powerDataHome" :id="wpId" @chartClick="showPowerChart" />
          </div> -->
          <!-- 旧 -->
          <div class="model-bg" v-if="wpId != 0">
            <div class="titles">
              <div class="name">功率负荷</div>
              <div class="unit">(单位：万kWh)</div>
            </div>
            <power-review :data="powerData" :id="wpId" @chartClick="showPowerChart" />
          </div>
          </Col>
        </Row>
        <Row type="flex" v-if="wpId != 0">
          <Col :span="24">
          <div class="model-bg">
            <div class="titles">
              <div class="name">节能减排</div>
              <div class="unit">万吨</div>
            </div>
            <div class="save">
              <div class="save-item">
                <div class="jnjp-icon svg-icon svg-icon-green" style="width:5.5vh,height:5.5vh">
                  <svg-icon class="" svgid="svg-煤" />
                </div>
                <div class="save-value">{{ jczbmap.jybms }}</div>
                <div class="save-name">煤</div>
              </div>
              <div class="save-item">
                <div class="jnjp-icon svg-icon svg-icon-green">
                  <svg-icon class="" svgid="svg-水" />
                </div>
                <div class="save-value">{{ jczbmap.jyss }}</div>
                <div class="save-name">水</div>
              </div>
              <div class="save-item">
                <div class="kind">
                  <div class="jnjp-icon1 svg-icon svg-icon-green">
                    <svg-icon class="" svgid="svg-co2" />
                  </div>
                </div>
                <div class="save-value">{{ jczbmap.jpeyhts }}</div>
                <div class="save-name">二氧化碳</div>
              </div>
              <div class="save-item">
                <div class="kind">
                  <div class="jnjp-icon1 svg-icon svg-icon-green">
                    <svg-icon class="" svgid="svg-so2" />
                  </div>
                </div>
                <div class="save-value">{{ jczbmap.jpeyhls }}</div>
                <div class="save-name">二氧化硫</div>
              </div>
            </div>
          </div>
          </Col>
        </Row>
      </div>
    </div>
    <el-dialog :title="dialogTitle" v-model="dialogShow" width="80%" top="10vh" custom-class="modal"
      :close-on-click-modal="true" @closed="(res) => {dialogType = '';powerLineChartData = null;}">
      <Table :data="dialogData" v-if="dialogType === 'table'" />
      <multiple-y-line-chart-normal height="800px" :list="powerLineChartData" :yAxises="powerLineChartYAxises"
        :showLegend="true" v-if="dialogType === 'powerLineChart' && powerLineChartData" />
      <multiple-y-line-chart-normal height="800px" :list="Powertrend" :yAxises="PowertrendYAxises" :showLegend="true"
        v-if="dialogType === 'powerLineChart' && !powerLineChartData" />
      <multiple-bar-chart height="800px" :units="doneLineChartData.units" :list="doneLineChartData.value"
        v-if="dialogType === 'doneLineChart'" />
    </el-dialog>
  </div>
</template>

<script>
import MultipleLineChartHome from "@/components/chart/line/double-line-chart-home.vue";
import ListBarChart2Home from "../../components/chart/bar/list-bar-chart2-home.vue";
import PowerReviewHome from "./components/power-review-home.vue";

// @ is an alias to /src
import Row from "../../components/coms/grid/row.vue";
import Col from "../../components/coms/grid/col.vue";
import ComPanel from "../../components/coms/panel/panel";
// import ListBarChart from "../../components/chart/bar/list-bar-chart.vue";
import ToolbarPanel from "../../components/coms/panel/toolbar-panel.vue";
import MultipleBarChart from "../../components/chart/bar/multiple-bar-chart.vue";
import MultipleYLineChartNormal from "../../components/chart/line/multiple-y-line-chart-normal.vue";
import Panel3 from "../../components/coms/panel/panel3.vue";
import SvgIcon from "../../components/coms/icon/svg-icon.vue";
import CoulometricAnalysis from "./components/coulometric-analysis.vue";
import Weather from "./components/weather.vue";
import PowerReview from "./components/power-review.vue";
import PowerPlan from "./components/power-plan.vue";
import Map from "./components/map.vue";
import ListBarChart2 from "../../components/chart/bar/list-bar-chart2.vue";
// import ListBarChartNewHome from "../../components/chart/bar/list-bar-chart2-new-home.vue";
import DoubleLineChart from "@com/chart/line/double-line-chart.vue";
import api from "@api/cockpit/matrix/index.js";
import Table from "./dialog/table.vue";
import $ from "jquery";
export default {
  name: "Home",
  components: {
    PowerReviewHome,
    ListBarChart2Home,
    MultipleLineChartHome,
    Row,
    Col,
    ComPanel,
    Weather,
    CoulometricAnalysis,
    // ListBarChart,
    PowerReview,
    ToolbarPanel,
    PowerPlan,
    MultipleBarChart,
    MultipleYLineChartNormal,
    Panel3,
    SvgIcon,
    Map,
    ListBarChart2,
    // ListBarChartNewHome,
    Table,
    DoubleLineChart,
  },
  data() {
    return {
      StationinformationData: [],
      homeSuspensionWindowsData: [],
      tabIndex: 1,
      tabIndex_gf: 1,
      tabTitle: [
        {id: 1, title:"日"},
        {id: 2, title:"月"},
        {id: 3, title:"年"},
      ],
      tabTitle_gf: [
        {id: 1, title:"日"},
        {id: 2, title:"月"},
        {id: 3, title:"年"},
      ],
      powerDataHome: {},
      ForecastPowerNewHome_fc: [],
      ForecastPowerNewHome_gf: [],
      newpointmapData: {},
      Powertrend_power: {
        value: [
          {
              title: "",
              value: [],
          },
        ],
      },
      // 
      historyWpId: "",
      historyPlanBtnName: "全部",
      timmer: null, // 计时器
      timmer2: null,
      timmer3: null,
      powerplanShowSingle: false,
      fcNum: 0,
      gfNum: 0,
      activeTab: 0,
      powerData: {},
      weatherChart: [
        {
          title: "温度",
          smooth: true,
          value: [],
        },
        {
          title: "湿度",
          smooth: true,
          value: [],
        },
      ],
      tqmap5: [],
      jczbmap: {},
      wxssmap: {},
      gxkmap: {},
      mxztmap: {},
      planData: {},
      tqmap: {},
      nowTime: "",
      planBtnName: "全部",
      powerLineChartYAxises: [],
      powerLineChartData: [
        {
          title: "",
          yAxisIndex: 0, // 使用单位
          value: [],
        },
      ],
      doneLineChartData: {
        // 图表所用单位
        units: [""],
        value: [
          {
            title: "",
            yAxisIndex: 0, // 使用单位
            value: [],
          },
        ],
      },
      dialogType: null,
      wpId: "0",
      wpName: "", //安全天数下面的场站名
      fcmap: {},
      xtmap: {},
      dialogShow: false,
      dialogTitle: "",
      dialogData: {},
      // 预测电量
      ForecastPower: [],
      // 日发电量
      DayPower: {
        // 图表所用单位
        units: [""],
        value: [
          {
            title: "",
            yAxisIndex: 0, // 使用单位
            value: [],
          },
        ],
      },
      PowertrendYAxises: [
        {
          name: "功率",
          min: 0,
          max: null,
          unit: "(万kWh)",
          position: "left",
        },
        {
          name: "风速",
          min: 0,
          max: 25,
          unit: "(m/s)",
          position: "right",
        },
      ],
    };
  },

  methods: {
    tabClick(data){
      this.tabIndex = data.id
    },
    tabClick_gf(data){
      this.tabIndex_gf = data.id
    },
    getData(wpId) {
      api.findPowerInfo({id: wpId}).then(res => {
        if (res.data) {
          let Powertrend = {
              // 图表所用单位
              units: ["(万KWh)", "(风速)"],
              value: [
                  {
                      title: "应发功率",
                      smooth: true, // 使用单位
                      value: [],
                  },
                  {
                      title: "实发功率",
                      smooth: true, // 使用单位
                      value: [],
                  },
                  {
                      title: "保证功率",
                      smooth: true, // 使用单位
                      value: [],
                  },
                  {
                      title: "平均风速",
                      smooth: true, // 使用单位
                      value: [],
                  },
              ],
          };
          res.data.forEach(item => {
            Powertrend.value[0].value.push(item.yfgl)
            Powertrend.value[1].value.push(item.sjgl)
            Powertrend.value[2].value.push(item.bzgl)
            Powertrend.value[3].value.push(item.ssfs)
          })
          this.Powertrend_power = Powertrend.value
         
        }
        
      })
    },
    // 请求服务
    requestData() {
      api.Stationinformation({wpId: this.wpId,}).then(res=>{
        if (res.data) {
          this.StationinformationData = res.data
        }
      })
      api.homeSuspensionWindows().then(res=>{
        if (res.data) {
          let newArray = []
          res.data.forEach(element => {
            element.industryState = true
            element.companyState = true
            if(element.name == "山西"){
              if(element.sxcyzzjrl == 0 && element.sxcyfd == 0 && element.sxcyfdzjrl == 0 && element.sxcygf == 0 && element.sxcygfzjrl == 0){
                element.industryState = false
              }
              if(element.sxgszzjrl == 0 && element.sxgsfd == 0 && element.sxgsfdzjrl == 0 && element.sxgsgf == 0 && element.sxgsgfzjrl == 0){
                element.companyState = false
              }
              newArray[0] = element
            } else if(element.name == "新疆") {
              if(element.xjcyzzjrl == 0 && element.xjcyfd == 0 && element.xjcyfdzjrl == 0 && element.xjcygf == 0 && element.xjcygfzjrl == 0){
                element.industryState = false
              }
              if(element.xjgszzjrl == 0 && element.xjgsfd == 0 && element.xjgsfdzjrl == 0 && element.xjgsgf == 0 && element.xjgsgfzjrl == 0){
                element.companyState = false
              }
              newArray[1] = element
            } else if(element.name == "内蒙") {
              if(element.nmcyzzjrl == 0 && element.nmcyfd == 0 && element.nmcyfdzjrl == 0 && element.nmcygf == 0 && element.nmcygfzjrl == 0){
                element.industryState = false
              }
              if(element.nmgszzjrl == 0 && element.nmgsfd == 0 && element.nmgsfdzjrl == 0 && element.nmgsgf == 0 && element.nmgsgfzjrl == 0){
                element.companyState = false
              }
              newArray[2] = element
            } else if(element.name == "西藏") {
              if(element.xzcyzzjrl == 0 && element.xzcyfd == 0 && element.xzcyfdzjrl == 0 && element.xzcygf == 0 && element.xzcygfzjrl == 0){
                element.industryState = false
              }
              if(element.xzgszzjrl == 0 && element.xzgsfd == 0 && element.xzgsfdzjrl == 0 && element.xzgsgf == 0 && element.xzgsgfzjrl == 0){
                element.companyState = false
              }
              newArray[3] = element
            } else if(element.name == "山东") {
              if(element.sdcyzzjrl == 0 && element.sdcyfd == 0 && element.sdcyfdzjrl == 0 && element.sdcygf == 0 && element.sdcygfzjrl == 0){
                element.industryState = false
              }
              if(element.sdgszzjrl == 0 && element.sdgsfd == 0 && element.sdgsfdzjrl == 0 && element.sdgsgf == 0 && element.sdgsgfzjrl == 0){
                element.companyState = false
              }
              newArray[4] = element
            } else if(element.name == "陕西") {
              if(element.xscyzzjrl == 0 && element.xscyfd == 0 && element.xscyfdzjrl == 0 && element.xscygf == 0 && element.xscygfzjrl == 0){
                element.industryState = false
              }
              if(element.xsgszzjrl == 0 && element.xsgsfd == 0 && element.xsgsfdzjrl == 0 && element.xsgsgf == 0 && element.xsgsgfzjrl == 0){
                element.companyState = false
              }
              newArray[5] = element
            } else if(element.name == "河北") {
              if(element.hbcyzzjrl == 0 && element.hbcyfd == 0 && element.hbcyfdzjrl == 0 && element.hbcygf == 0 && element.hbcygfzjrl == 0){
                element.industryState = false
              }
              if(element.hbgszzjrl == 0 && element.hbgsfd == 0 && element.hbgsfdzjrl == 0 && element.hbgsgf == 0 && element.hbgsgfzjrl == 0){
                element.companyState = false
              }
              newArray[6] = element
            }
          });
          this.homeSuspensionWindowsData = newArray
        }
      })
      // console.log(5555)
      api.findBasicDataInfo({ id: this.wpId,}).then((res) => {
        if (res.data) {
          this.newpointmapData = res.data.newpointmap
          let arr = Object.keys(res.data.xtmap).sort();
          this.fcNum = arr.filter(item => item.includes('FDC')).length
          this.gfNum = arr.filter(item => item.includes('GDC')).length
          this.powerDataHome = [
            {
              title: "清洁能源",
              value: res?.data?.newpointmap?.qjny_fhl,
              dialogTitle: "清洁能源",
              subUrl: "genreset/findGLDetail",
              targetName: "bzgl",
              dialogType: "powerLineChart",
              max: 3000,
            },
            {
              title: "风电",
              value: res?.data?.newpointmap?.fd_fhl,
              dialogTitle: "保证功率详情",
              subUrl: "genreset/findGLDetail",
              targetName: "bzgl",
              dialogType: "powerLineChart",
              max: 3000,
            },
            {
              title: "光伏",
              value: res?.data?.newpointmap?.gf_fhl,
              dialogTitle: "保证功率详情",
              subUrl: "genreset/findGLDetail",
              targetName: "bzgl",
              dialogType: "powerLineChart",
              max: 3000,
            },
          ];
          this.powerData = [
            {
              title:
                this.wpId === "-2" || this.wpId.indexOf("GDC") !== -1
                  ? "日照强度"
                  : "风速",
              value: res?.data?.jczbmap?.ssfs,
              dialogTitle:
                this.wpId == 0
                  ? "详情"
                  : this.wpId === "-2" || this.wpId.indexOf("GDC") !== -1
                    ? "日照强度详情"
                    : "风速详情",
              subUrl: "genreset/findGLDetail",
              targetName: "ssfs",
              dialogType: "powerLineChart",
              max:
                this.wpId === "-2" || this.wpId.indexOf("GDC") !== -1
                  ? 1200
                  : 40,
            },
            {
              title: "保证功率",
              value: res?.data?.jczbmap?.bzgl,
              dialogTitle: "保证功率详情",
              subUrl: "genreset/findGLDetail",
              targetName: "bzgl",
              dialogType: "powerLineChart",
              max: res.data?.jczbmap?.zjts,
            },
            {
              title: "应发功率",
              value: res?.data?.jczbmap?.yfgl,
              dialogTitle: "应发功率详情",
              subUrl: "genreset/findGLDetail",
              targetName: "yfgl",
              dialogType: "powerLineChart",
              max: res.data?.jczbmap?.zjts,
            },
            {
              title: "实际功率",
              value: res?.data?.jczbmap?.sjgl,
              dialogTitle: "实际功率详情",
              subUrl: "genreset/findGLDetail",
              targetName: "sjgl",
              dialogType: "powerLineChart",
              max: res?.data?.jczbmap?.zjts,
            },
          ];
          res.data.jczbmap.jybms = (res.data.jczbmap.jybm).toFixed(0)
          res.data.jczbmap.jyss = (res.data.jczbmap.jys).toFixed(0)
          res.data.jczbmap.jpeyhts = (res.data.jczbmap.jpeyht).toFixed(0)
          res.data.jczbmap.jpeyhls = (res.data.jczbmap.jpeyhl).toFixed(0)
          this.jczbmap = res.data.jczbmap;
          this.wxssmap = res.data.wxssmap;
          this.gxkmap = res.data.gxkmap;
          this.mxztmap = res.data.mxztmap;
          this.fcmap = res.data.fcmap;
          this.xtmap = res.data.xtmap;
          this.tqmap = res.data.tqmap;
          // tab结构
          // this.ForecastPowerNewHome_fc = [
          //   {
          //     id: 1,
          //     type: "风电日发电量",
          //     data: [
          //       [
          //         {
          //           name: "预测电量",
          //           value: res.data.newpointmap.fd_r_ycdl < 0 ? 0 : res.data.newpointmap.fd_r_ycdl,
          //           color: 1,
          //           total: res.data.newpointmap.fd_r_ycdl < 0 ? 0 : res.data.newpointmap.fd_r_ycdl * 1.5,
          //         }
          //       ],
          //       [
          //         {
          //           name: "实际电量",
          //           value: res.data.newpointmap.fd_r_fdl < 0 ? 0 : res.data.newpointmap.fd_r_fdl,
          //           color: 0,
          //           total: res.data.newpointmap.fd_r_ycdl < 0 ? 0 : res.data.newpointmap.fd_r_ycdl,
          //         }
          //       ],
          //     ]
          //   },
          //   {
          //     id: 2,
          //     type: "风电月发电量",
          //     data: [
          //       [
          //         {
          //           name: "预测电量",
          //           value: res.data.newpointmap.fd_y_ycdl < 0 ? 0 : res.data.newpointmap.fd_y_ycdl,
          //           color: 1,
          //           total: res.data.newpointmap.fd_y_ycdl < 0 ? 0 : res.data.newpointmap.fd_y_ycdl * 1.5,
          //         }
          //       ],
          //       [
          //         {
          //           name: "实际电量",
          //           value: res.data.newpointmap.fd_y_fdl < 0 ? 0 : res.data.newpointmap.fd_y_fdl,
          //           color: 0,
          //           total: res.data.newpointmap.fd_y_jhfdl < 0 ? 0 : res.data.newpointmap.fd_y_jhfdl,
          //         }
          //       ],
          //     ]
          //   },
          //   {
          //     id: 3,
          //     type: "风电年发电量",
          //     data: [
          //       [
          //         {
          //           name: "预测电量",
          //           value: res.data.newpointmap.fd_n_ycdl < 0 ? 0 : res.data.newpointmap.fd_n_ycdl,
          //           color: 1,
          //           total: res.data.newpointmap.fd_n_ycdl < 0 ? 0 : res.data.newpointmap.fd_n_ycdl * 1.5,
          //         }
          //       ],
          //       [
          //         {
          //           name: "实际电量",
          //           value: res.data.newpointmap.fd_n_fdl < 0 ? 0 : res.data.newpointmap.fd_n_fdl,
          //           color: 0,
          //           total: res.data.newpointmap.fd_n_jhfdl < 0 ? 0 : res.data.newpointmap.fd_n_jhfdl,
          //         }
          //       ],
          //     ]
          //   },
          // ];
          // this.ForecastPowerNewHome_gf = [
          //   {
          //     id: 1,
          //     type: "风电日发电量",
          //     data: [
          //       [
          //         {
          //           name: "预测电量",
          //           value: res.data.newpointmap.gf_r_ycdl < 0 ? 0 : res.data.newpointmap.gf_r_ycdl,
          //           color: 1,
          //           total: res.data.newpointmap.gf_r_ycdl < 0 ? 0 : res.data.newpointmap.gf_r_ycdl * 1.5,
          //         }
          //       ],
          //       [
          //         {
          //           name: "实际电量",
          //           value: res.data.newpointmap.gf_r_fdl < 0 ? 0 : res.data.newpointmap.gf_r_fdl,
          //           color: 0,
          //           total: res.data.newpointmap.gf_r_ycdl < 0 ? 0 : res.data.newpointmap.gf_r_ycdl,
          //         }
          //       ],
          //     ]
          //   },
          //   {
          //     id: 2,
          //     type: "风电月发电量",
          //     data: [
          //       [
          //         {
          //           name: "预测电量",
          //           value: res.data.newpointmap.gf_y_ycdl < 0 ? 0 : res.data.newpointmap.gf_y_ycdl,
          //           color: 1,
          //           total: res.data.newpointmap.gf_y_ycdl < 0 ? 0 : res.data.newpointmap.gf_y_ycdl * 1.5,
          //         }
          //       ],
          //       [
          //         {
          //           name: "实际电量",
          //           value: res.data.newpointmap.gf_y_fdl < 0 ? 0 : res.data.newpointmap.gf_y_fdl,
          //           color: 0,
          //           total: res.data.newpointmap.gf_y_jhfdl < 0 ? 0 : res.data.newpointmap.gf_y_jhfdl,
          //         }
          //       ],
          //     ]
          //   },
          //   {
          //     id: 3,
          //     type: "风电年发电量",
          //     data: [
          //       [
          //         {
          //           name: "预测电量",
          //           value: res.data.newpointmap.gf_n_ycdl < 0 ? 0 : res.data.newpointmap.gf_n_ycdl,
          //           color: 1,
          //           total: res.data.newpointmap.gf_n_ycdl < 0 ? 0 : res.data.newpointmap.gf_n_ycdl * 1.5,
          //         }
          //       ],
          //       [
          //         {
          //           name: "实际电量",
          //           value: res.data.newpointmap.gf_n_fdl < 0 ? 0 : res.data.newpointmap.gf_n_fdl,
          //           color: 0,
          //           total: res.data.newpointmap.gf_n_jhfdl < 0 ? 0 : res.data.newpointmap.gf_n_jhfdl,
          //         }
          //       ],
          //     ]
          //   },
          // ];
          this.ForecastPowerNewHome_fc = [
            [{
                name: "日发电量",
                value: res.data.newpointmap ? res.data.newpointmap.fd_r_fdl < 0 ? 0 : res.data.newpointmap.fd_r_fdl : 0,
                color: 1,
                total: res.data.newpointmap ? res.data.newpointmap.fd_r_ycdl < 0 ? 0 : res.data.newpointmap.fd_r_ycdl : 0,
            }],
            [{
                name: "月发电量",
                value: res.data.newpointmap ? res.data.newpointmap.fd_y_sjfdl < 0 ? 0 : res.data.newpointmap.fd_y_sjfdl : 0, 
                color: 1,
                total: res.data.newpointmap ? res.data.newpointmap.fd_y_ycdl < 0 ? 0 : res.data.newpointmap.fd_y_ycdl : 0,
            }],
            [{
              name: "年发电量",
              value: res.data.newpointmap ? res.data.newpointmap.fd_n_sjfdl < 0 ? 0 : res.data.newpointmap.fd_n_sjfdl : 0, 
              color: 0,
              total: res.data.newpointmap ? res.data.newpointmap.fd_n_ycdl < 0 ? 0 : res.data.newpointmap.fd_n_ycdl : 0,
            }],
          ]
          this.ForecastPowerNewHome_gf = [
            [{
                name: "日发电量",
                value: res.data.newpointmap ? res.data.newpointmap.gf_r_fdl < 0 ? 0 : res.data.newpointmap.gf_r_fdl : 0,
                color: 1,
                total: res.data.newpointmap ? res.data.newpointmap.gf_r_ycdl < 0 ? 0 : res.data.newpointmap.gf_r_ycdl : 0,
            }],
            [{
                name: "月发电量",
                value: res.data.newpointmap ? res.data.newpointmap.gf_y_sjfdl < 0 ? 0 : res.data.newpointmap.gf_y_sjfdl : 0,
                color: 1,
                total: res.data.newpointmap ? res.data.newpointmap.gf_y_ycdl < 0 ? 0 : res.data.newpointmap.gf_y_ycdl : 0,
            }],
            [{
              name: "年发电量",
              value: res.data.newpointmap ? res.data.newpointmap.gf_n_sjfdl < 0 ? 0 : res.data.newpointmap.gf_n_sjfdl : 0,
              color: 0,
              total: res.data.newpointmap ? res.data.newpointmap.gf_n_ycdl < 0 ? 0 : res.data.newpointmap.gf_n_ycdl : 0,
            }],
          ]
          this.ForecastPower = [
            [
              {
                name: "日发电量",
                value: res.data.jczbmap.rfdl < 0 ? 0 : res.data.jczbmap.rfdl,
                color: 0,
                total:
                  (res.data.jczbmap.rycfdl >= res.data.jczbmap.rfdl) ? (res.data.jczbmap.rycfdl + 100) : res.data.jczbmap.rfdl + 100,
              }
            ],

            [
              {
                name: "月发电量",
                value: res.data.newpointmap.fd_y_sjfdl < 0 ? 0 : res.data.newpointmap.fd_y_sjfdl,
                color: 1,
                total:
                  (res.data.newpointmap.yycfdl >= res.data.newpointmap.fd_y_sjfdl) ? (res.data.newpointmap.yycfdl + 200) < 0 ? 100 : (res.data.newpointmap.yycfdl + 200) : (res.data.newpointmap.fd_y_sjfdl + 200) < 0 ? 100 : (res.data.newpointmap.fd_y_sjfdl + 200),
              }
            ],
            [{
              name: "年发电量",
              value: res.data.newpointmap.fd_n_sjfdl < 0 ? 0 : res.data.newpointmap.fd_n_sjfdl,
              color: 0,
              total: (res.data.newpointmap.nycfdl >= res.data.newpointmap.fd_n_sjfdl) ? (res.data.newpointmap.nycfdl < 0) ? 100 : res.data.newpointmap.nycfdl : (res.data.newpointmap.fd_n_sjfdl < 0) ? 100 : (res.data.newpointmap.fd_n_sjfdl + 200),
            }],
          ];
        }
      });
    },
    // 点击地图展示类型
    changeShowType(wpId, planBtnName) {
      if (
        planBtnName === "电站"
      ) {
        this.PowertrendYAxises = [
          {
            name: "功率",
            min: 0,
            max: null,
            unit: "(万kWh)",
            position: "left",
          },
          {
            name: "日照",
            min: 0,
            max: 25,
            unit: "(W/㎡)",
            position: "right",
          },
        ];
      } else {
        this.PowertrendYAxises = [
          {
            name: "功率",
            min: 0,
            max: null,
            unit: "(万kWh)",
            position: "left",
          },
          {
            name: "风速",
            min: 0,
            max: 25,
            unit: "(m/s)",
            position: "right",
          },
        ];
      }
      this.wpName = planBtnName ? planBtnName : this.wpName;
      this.planBtnName = planBtnName ? planBtnName : this.planBtnName;
      this.jczbmap = {};
      clearInterval(this.timmer);
      this.timmer = null;
      this.wpId = wpId ? wpId : this.wpId;
      // console.log(wpId);
      // console.log(this.wpId);
      // console.log("***********");
      this.requestData(false);
      this.timmer = setInterval(() => {
        this.requestData(false);
      }, this.$store.state.websocketTimeSec);
    },
    changeShowTypes(wpId, planBtnName) {
      this.historyWpId = wpId;
      this.historyPlanBtnName = planBtnName;
      this.changeShowType(wpId, planBtnName);
    },
    changeShowBackType(wpId, planBtnName) {
      this.historyWpId = wpId;
      this.historyPlanBtnName = planBtnName;
      this.changeShowType(this.historyWpId, this.historyPlanBtnName);
    },
    currentActiveTab(activeTab,penetrateType,wpId) {
      this.activeTab = activeTab
      if(penetrateType === 3){
        this.getData(wpId)
      }
    },
    // 点击安全天数下的场站按钮重置数据
    onBackStation(wpId) {
      this.wpId = wpId
      // if (this.wpId.indexOf("FDC") !== -1) {
      //   clearInterval(this.timmer);
      //   this.timmer = null;
      //   this.wpId = this.wpId.substring(0, this.wpId.indexOf("0")) + "_FDC";
      //   this.requestData(false);
      //   this.timmer = setInterval(() => {
      //     this.requestData(false);
      //   }, this.$store.state.websocketTimeSec);
      // }
    },

    showForecastBox(data) {
      this.dialogTitle = data;
      api
        .forecastwindspeedInfo({
          wpId: this.wpId,
        })
        .then((res) => {
          this.dialogData = res.data;
          this.dialogType = "table";
          this.dialogShow = true;
        });
    },

    // 显示功率复核图表
    showPowerChart(res) {
      this.dialogTitle = res.dialogTitle;
      this.dialogType = res.dialogType;
      let hour = this.nowTime.split(":")[0];
      let minute =
        this.nowTime.split(":")[1] < 30 ? (minute = 1) : (minute = 2);
      let valueLength = hour * 2 + 1 + minute;
      if (res.data.value) {
        res.data.value.forEach((ele, index) => {
          if (this.wpId === "0") {
            ele.title.indexOf("电场") !== -1
              ? (ele.title += "[风速]")
              : ele.title;
            ele.title.indexOf("电站") !== -1
              ? (ele.title += "[日照]")
              : ele.title;
          }
          ele.value.splice(valueLength, 48);
        });
      } else {
        res.data.forEach((ele, index) => {
          if (this.wpId === "0") {
            ele.title.indexOf("电场") !== -1
              ? (ele.title += "[风速]")
              : ele.title;
            ele.title.indexOf("电站") !== -1
              ? (ele.title += "[日照]")
              : ele.title;
          }
          ele.value.splice(valueLength, 48);
        });
      }

      this.powerLineChartData = res.data.value;
      if (res.dialogTitle === "详情") {
        this.powerLineChartYAxises = [
          {
            min: 0,
            name: "风速",
            position: "left",
            unit: "(m/s)",
          },
          {
            min: 0,
            name: "日照",
            position: "right",
            unit: "(w/㎡)",
          },
        ];
      } else if (res.dialogTitle === "风速详情") {
        this.powerLineChartYAxises = [
          {
            min: 0,
            name: "风速",
            position: "left",
            unit: "(m/s)",
          },
        ];
      } else if (res.dialogTitle === "日照强度详情") {
        this.powerLineChartYAxises = [
          {
            min: 0,
            name: "日照",
            position: "right",
            unit: "(w/㎡)",
          },
        ];
      } else {
        this.powerLineChartYAxises = [
          {
            min: 0,
            name: "功率",
            position: "left",
            unit: "(万kWh)",
          },
        ];
      }
      this.dialogShow = true;
    },

    // 显示计划电量完成情况图表
    showDoneChart(res) {
      this.dialogTitle = res.dialogTitle;
      this.dialogType = res.dialogType;
      this.doneLineChartData = res.data;
      this.doneLineChartData.units[0] = this.doneLineChartData.units[0]
        ? this.doneLineChartData.units[0]
        : "(万kWh)";
      this.dialogShow = true;
    },

    // 地图进入事件
    onEnter() {
      this.powerplanShowSingle = true;
    },

    // 地图退出事件
    onBack() {
      this.powerplanShowSingle = false;
    },
    getDAY() {
      let curDate = new Date();
      let curMonth = curDate.getMonth(); //当前月份 需要加1
      curDate.setMonth(curMonth + 1);
      curDate.setDate(0); //关键
      curDate.getDate(); //计算的当月总天数
      return curDate.getDate() - new Date().getDate(); // new Date().getDate()当前几号  总天数-当前即可
    },
  },

  created() {
    let that = this;
    that.$nextTick(() => {
      that.getData();
        that.requestData(false);
    });
    // 
    that.nowTime = new Date().formatDate("hh:mm:ss");
    that.$nextTick(() => {
      that.requestData(false);
      // this.getCharts();
      that.timmer = setInterval(() => {
        that.requestData(false);
      }, that.$store.state.websocketTimeSec);
      that.timmer2 = setInterval(() => {
        that.nowTime = new Date().formatDate("hh:mm:ss");
      }, 3000);
      // that.timmer3 = setInterval(() => {
      //   this.getCharts();
      // }, 360000);
    });
  },

  unmounted() {
    clearInterval(this.timmer);
    clearInterval(this.timmer2);
    // clearInterval(this.timmer3);
    this.timmer = null;
    this.timmer2 = null;
    // this.timmer3 = null;
  },
};
</script>

<style lang="less" >
.top-distance {
  top: 97px !important;
}
.home {
  width: 100%;
  height: 100%;
  background: url(../../assets/newHome_h.png);
  background-repeat: round;
  .infos-echarts {
    padding: 10px;
    background-color: rgba(3, 5, 9, 0.5);
  } 
  .model-bg-new-right {
    width: 100%;
    min-height: 135px;
    background-color: rgba(3, 5, 9, 0.5);
    border-radius: 6px;
    display: flex;
    flex-direction: column;
    // padding: 1% 5%;
    .power-charts {
      display: flex;
      flex-direction: row;
      align-items: flex-end;
      width: 100%;
      margin-top: 10px;
      .power-name-old {
        width: 80px;
        margin-bottom: 10px;
        color: #999999;
      }
      .power-name {
        width: 80px;
        margin-bottom: 20px;
        color: #999999;
      }
      .power-item {
        display: flex;
        flex-direction: column;
        width: 360px;
        .power-value-old {
          display: flex;
          flex-direction: row;
          align-items: center;
          justify-content: space-between;
          margin-bottom: -12px;
          padding: 0 15px;
          .green-value {
            color: #05BB4C;
          }
          .purple-value {
            color: #4B55AE;
          }
        }
        .power-value {
          font-size: 12px;
          margin-bottom: -31px;
          font-family: Bicubik;
          margin-left: 255px;
          span:nth-child(1) {
            width: 5px;
            height: 5px;
            border-radius: 5px;
            display: inline-block;
            background-color: #fff;
            margin-right: 5px;
          }
          .green-value {
            color: #05BB4C;
          }
          .purple-value {
            color: #4B55AE;
          }
        }
      }
    }
    .infos {
      display: flex;
      flex-direction: column;
      width: 50%;
      height: 100%;
      width: 100%;
      .titles {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        // padding: 0 15px;
        height: 50%;
        .amount {
          display: flex;
          flex-direction: row;
          align-items: center;

          .amount-image {
            margin-left: -42px;
          }

          .amount-nums {
            font-size: 12px;
            color: #7D838C;
            margin-left: 10px;
            display: flex;
            flex-direction: row;
            align-items: baseline;

            .num-item {
              font-size: 20px;
              color: #ffffff;
              margin-right: 5px;
            }
          }
        }

        .info-nums {
          display: flex;
          align-items: baseline;
          font-size: 14px;
          color: #7D838C;

          .nums {
            font-size: 20px;
            color: #FFFFFF;
            margin: 0 5px;
          }
        }
      }
      .tabSwitchover{
        // height: 23px;
        margin-top: 5px;
        .tabSwitchover-item {
          width: 42px;
          line-height: 23px;
          text-align: center;
          color: #B3B3B3;
          float: left;
          cursor: pointer;
        }
        .tab-active {
          border-bottom: 1px solid rgb(39, 219, 54);
          background: linear-gradient(to top, rgba(5, 187, 76, 0.5), rgba(5, 187, 76, 0));
        }
        .unit{
          text-align: right;
          color: #B1B1B1;
          font-size: 12px;
          // float: right;
        }
      }
      .types {
        display: flex;
        flex-direction: row;
        align-items: center;
        height: 50%;
        width: 100%;
        margin-top: 15px;
        padding-bottom: 10px;
        border-bottom: 1px solid #302c2c;
        .type-model {
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          align-items: center;
          width: 16%;
          // height: 75%;
          font-size: 16px;
          .type-name {
            font-size: 14px;
            font-family: Agency FB;
            margin-bottom: 10px;
          }
          .type-num {
            height: 15px;
          }
        }
      }
    }
  }
  .base-info {
    height: 186px;
    background: rgba(3, 5, 9, 0.5);
    position: absolute;
    bottom: 4%;
    left: 43px;
    display: flex;
    flex-direction: row;
    border-radius: 6px;
    .charts {
      width: 100%;
      height: 100%;
      position: relative;
      margin-left: 1%;
      .energy-title {
        // margin-left: 2%;
        margin-top: 1%;
        font-size: 16px;
        color: #fff;
      }
      .dots {
          width: 0.185vh;
          height: 0.185vh;
          border-radius: 50%;
          background-color: @write;
          position: absolute;

          &.left {
              left: 0.37vh;
          }

          &.top {
              top: 0.37vh;
          }
      }

      .charts-item {
          // margin-left: 5%;
          margin-top: 10px;
      }
    }
  }
  .model-bg-new {
    width: 100%;
    min-height: 135px;
    background-color: rgba(3, 5, 9, 0.5);
    border-radius: 6px;
    display: flex;
    flex-direction: column;
    padding: 10px;

    .titles {
      height: 45px;
      border-bottom: 1px solid #333333;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: space-between;

      .name {
        font-size: 16px;
        color: #FFFFFF;
      }

      .unit {
        font-size: 12px;
        color: #B1B1B1;
      }
    }

    .save {
      display: flex;
      flex-direction: row;
      align-items: center;
      width: 100%;
      margin: 17px 0;

      .save-item {
        width: 25%;
        display: flex;
        flex-direction: column;
        align-items: center;

        .kind {
          width: 20px;
          height: 22px;

          .kind-img {
            width: 100%;
            height: 100%;
          }
        }

        .save-value {
          font-size: 16px;
          color: #FFFFFF;
          margin: 10px 0;
        }

        .save-name {
          font-size: 12px;
          color: #B3B3B3;
        }
      }
    }
  }
  .model-bg {
    width: 100%;
    min-height: 135px;
    background-color: rgba(3, 5, 9, 0.5);
    border-radius: 6px;
    display: flex;
    flex-direction: column;
    padding: 1% 5%;

    .titles {
      height: 45px;
      border-bottom: 1px solid #333333;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: space-between;

      .name {
        font-size: 16px;
        color: #FFFFFF;
      }

      .unit {
        font-size: 12px;
        color: #B1B1B1;
      }
    }

    .save {
      display: flex;
      flex-direction: row;
      align-items: center;
      width: 100%;
      margin: 17px 0;

      .save-item {
        width: 25%;
        display: flex;
        flex-direction: column;
        align-items: center;

        .kind {
          width: 20px;
          height: 22px;

          .kind-img {
            width: 100%;
            height: 100%;
          }
        }

        .save-value {
          font-size: 16px;
          color: #FFFFFF;
          margin: 10px 0;
        }

        .save-name {
          font-size: 12px;
          color: #B3B3B3;
        }
      }
    }
  }
}

.home_light {
  width: 100%;
  height: 100%;
  background: url(../../assets/newHome_b.png);
  background-repeat: round;
  .model-bg-new-right {
    width: 100%;
    min-height: 135px;
    background-color: rgba(83, 98, 104, 0.2);
    border-radius: 6px;
    display: flex;
    flex-direction: column;
    // padding: 1% 5%;
    .infos {
      display: flex;
      flex-direction: column;
      width: 50%;
      height: 100%;
      width: 100%;
      .titles {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        // padding: 0 15px;
        height: 50%;
        .amount {
          display: flex;
          flex-direction: row;
          align-items: center;

          .amount-image {
            margin-left: -42px;
          }

          .amount-nums {
            font-size: 12px;
            color: #7D838C;
            margin-left: 10px;
            display: flex;
            flex-direction: row;
            align-items: baseline;

            .num-item {
              font-size: 20px;
              color: #ffffff;
              margin-right: 5px;
            }
          }
        }

        .info-nums {
          display: flex;
          align-items: baseline;
          font-size: 14px;
          color: #7D838C;

          .nums {
            font-size: 20px;
            color: #FFFFFF;
            margin: 0 5px;
          }
        }
      }
      .tabSwitchover{
        // height: 23px;
        margin-top: 5px;
        .tabSwitchover-item {
          width: 42px;
          line-height: 23px;
          text-align: center;
          color: #000;
          float: left;
          cursor: pointer;
        }
        .tab-active {
          border-bottom: 1px solid rgb(39, 219, 54);
          background: linear-gradient(to top, rgba(5, 187, 76, 0.5), rgba(5, 187, 76, 0));
        }
        .unit{
          height: 35px;
          line-height: 35px;
          color: #000;
          font-size: 12px;
          // float: right;
        }
      }
      .types {
        display: flex;
        flex-direction: row;
        align-items: center;
        height: 50%;
        width: 100%;
        margin-top: 15px;
        padding-bottom: 10px;
        border-bottom: 1px solid #302c2c;
        .type-model {
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          align-items: center;
          width: 16%;
          // height: 75%;
          font-size: 16px;
          .type-name {
            font-size: 14px;
            font-family: Agency FB;
            margin-bottom: 10px;
          }
          .type-num {
            height: 15px;
          }
        }
      }
    }
    // .power-charts {
    //   display: flex;
    //   flex-direction: row;
    //   align-items: flex-end;
    //   width: 100%;
    //   margin-top: 10px;

    //   .power-name {
    //     width: 80px;
    //     margin-bottom: 10px;
    //     color: #000;
    //   }

    //   .power-item {
    //     display: flex;
    //     flex-direction: column;
    //     width: 300px;

    //     .power-value {
    //       border: 1px solid #fff;
    //       margin-bottom: -12px;
    //       padding: 0 15px;

    //       .green-value {
    //         color: #05BB4C;
    //       }

    //       .purple-value {
    //         color: #4B55AE;
    //       }
    //     }
    //   }
    // }
  }

  .base-info {
    height: 186px;
    background: rgba(83, 98, 104, 0.2);
    position: absolute;
    bottom: 4%;
    left: 117px;
    display: flex;
    flex-direction: row;
    border-radius: 6px;
    .charts {
      width: 100%;
      height: 100%;
      position: relative;
      margin-left: 1%;
      .energy-title {
        // margin-left: 2%;
        margin-top: 1%;
        font-size: 16px;
        color: #000;
      }
      .dots {
          width: 0.185vh;
          height: 0.185vh;
          border-radius: 50%;
          background-color: @write;
          position: absolute;

          &.left {
              left: 0.37vh;
          }

          &.top {
              top: 0.37vh;
          }
      }

      .charts-item {
          // margin-left: 5%;
          margin-top: 10px;
      }
    }
  }
  .model-bg-new {
    width: 100%;
    min-height: 135px;
    background-color: #D1D6D9;
    border-radius: 6px;
    display: flex;
    flex-direction: column;
    padding: 1% 5%;

    .titles {
      height: 45px;
      border-bottom: 1px solid #333333;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: space-between;

      .name {
        font-size: 16px;
        color: #000;
      }

      .unit {
        font-size: 12px;
        color: #000;
      }
    }

    .save {
      display: flex;
      flex-direction: row;
      align-items: center;
      width: 100%;
      margin: 17px 0;

      .save-item {
        width: 25%;
        display: flex;
        flex-direction: column;
        align-items: center;

        .kind {
          width: 20px;
          height: 22px;

          .kind-img {
            width: 100%;
            height: 100%;
          }
        }

        .save-value {
          font-size: 16px;
          color: #FFFFFF;
          margin: 10px 0;
        }

        .save-name {
          font-size: 12px;
          color: #B3B3B3;
        }
      }
    }
  }
  .model-bg {
    width: 100%;
    min-height: 135px;
    background-color: rgba(83, 98, 104, 0.2);
    border-radius: 6px;
    display: flex;
    flex-direction: column;
    padding: 1% 5%;

    .titles {
      height: 45px;
      border-bottom: 1px solid #333333;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: space-between;

      .name {
        font-size: 16px;
        color: #000000;
      }

      .unit {
        font-size: 12px;
        color: #606769;
      }
    }

    .save {
      display: flex;
      flex-direction: row;
      align-items: center;
      width: 100%;
      margin: 17px 0;

      .save-item {
        width: 25%;
        display: flex;
        flex-direction: column;
        align-items: center;

        .kind {
          width: 20px;
          height: 22px;

          .kind-img {
            width: 100%;
            height: 100%;
          }
        }

        .save-value {
          font-size: 16px;
          color: #FFFFFF;
          margin: 10px 0;
        }

        .save-name {
          font-size: 12px;
          color: #B3B3B3;
        }
      }
    }
  }
}

// .right {
//   width: 400px;
//   height: 100px;
//   position: absolute;
//   right: 25px;
//   top: 60px;
//   z-index: 2;
//   margin-top: 20px;
// }

.right {
  width: 450px;
  height: 100px;
  position: absolute;
  right: 25px;
  top: 25px;
  z-index: 2;
  margin-top: 90px;
}

.com-panel {
  height: 100%;

  .panel-body {
    height: calc(100% - 32px);
  }
}

.top-mid-panel {
  flex: 1 1 auto;
  height: 100%;
}

.model-item {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

.infos {
  display: flex;
  flex-direction: column;
  width: 50%;
  height: 100%;
  width: 370px;
  padding: 10px;
  .titles {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 0 15px;
    height: 50%;

    .amount {
      display: flex;
      flex-direction: row;
      align-items: center;

      .amount-image {
        margin-left: -42px;
      }

      .amount-nums {
        font-size: 12px;
        color: #7D838C;
        margin-left: 10px;
        display: flex;
        flex-direction: row;
        align-items: baseline;

        .num-item {
          font-size: 20px;
          color: #ffffff;
          margin-right: 5px;
        }
      }
    }

    .info-nums {
      display: flex;
      align-items: baseline;
      font-size: 14px;
      color: #7D838C;

      .nums {
        font-size: 20px;
        color: #FFFFFF;
        margin: 0 5px;
      }
    }
  }

  .types {
    display: flex;
    flex-direction: row;
    align-items: center;
    height: 50%;
    width: 100%;

    .type-model {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      align-items: center;
      width: 14%;
      height: 75%;
      font-size: 16px;

      .type-name {
        font-size: 14px;
      }
    }
  }
}

    .fengji-icon {
      border-radius: 50%;
      width: 49px;
      height: 49px;
      box-shadow: inset 1.5px -1px 1px 0px @green;
      animation: fadenum 5s linear infinite;

      @keyframes fadenum {
        100% {
          transform: rotate(360deg);
        }
      }

      svg {
        width: 25px;
        height: 22px;
      }
    }

    .jnjp-icon {

      svg {
        width: 25px;
        height: 25px;

      }
    }

    .jnjp-icon1 {
      margin-top: -10px;

      svg {
        width: 40px;
        height: 40px;
      }
    }
    .power-charts {
      display: flex;
      flex-direction: row;
      align-items: flex-end;
      width: 100%;
      margin-top: 10px;
      .power-name-old {
        width: 80px;
        margin-bottom: 10px;
        color: #7a8385;
      }
      .power-name {
        width: 80px;
        margin-bottom: 20px;
        color: #000;
      }
      .power-item {
        display: flex;
        flex-direction: column;
        width: 360px;
        .power-value-old {
          display: flex;
          flex-direction: row;
          align-items: center;
          justify-content: space-between;
          margin-bottom: -12px;
          padding: 0 15px;
          .green-value {
            color: #05BB4C;
          }
          .purple-value {
            color: #4B55AE;
          }
        }
        .power-value {
          font-size: 12px;
          margin-bottom: -31px;
          font-family: Bicubik;
          margin-left: 255px;
          span:nth-child(1) {
            width: 5px;
            height: 5px;
            border-radius: 5px;
            display: inline-block;
            background-color: #fff;
            margin-right: 5px;
          }
          .green-value {
            color: #05BB4C;
          }
          .purple-value {
            color: #4B55AE;
          }
        }
      }
    }
// .power-charts {
//   display: flex;
//   flex-direction: row;
//   align-items: flex-end;
//   width: 100%;
//   margin-top: 10px;

//   .power-name {
//     width: 80px;
//     margin-bottom: 20px;
//     color: #7a8385;
//   }

//   .power-item {
//     display: flex;
//     flex-direction: column;
//     width: 300px;
//     .power-value-old {
//       display: flex;
//       flex-direction: row;
//       align-items: center;
//       justify-content: space-between;
//       margin-bottom: -12px;
//       padding: 0 15px;
//       .green-value {
//         color: #05BB4C;
//       }
//       .purple-value {
//         color: #4B55AE;
//       }
//     }
//     .power-value {
//       font-size: 12px;
//       margin-bottom: -31px;
//       font-family: Bicubik;
//       margin-left: 255px;
//       span:nth-child(1) {
//         width: 5px;
//         height: 5px;
//         border-radius: 5px;
//         display: inline-block;
//         background-color: #fff;
//         margin-right: 5px;
//       }
//       .green-value {
//         color: #05BB4C;
//       }
//       .purple-value {
//         color: #4B55AE;
//       }
//     }
//   }
// }
</style>