fd_dwgz_zhyw/src/views/economicsOperation/homePage/index.vue

<template>
  <div class="body">
    <div class="title-bar">
      <headerNav :remove="false" @firstRender="firstRender" />
      <div class="right-bar">
        <div
          :class="currentDay === 'r' ? 'type-button-on' : 'day-button'"
          @click="handleChangeDay('r')"
        >
          <div class="day-name">日</div>
        </div>
        <div
          :class="currentDay === 'y' ? 'type-button-on' : 'day-button'"
          @click="handleChangeDay('y')"
        >
          <div class="day-name">月</div>
        </div>
        <div
          :class="currentDay === 'n' ? 'type-button-on' : 'day-button'"
          @click="handleChangeDay('n')"
        >
          <div class="day-name">年</div>
        </div>
      </div>
    </div>
    <div class="indicator">
      <div class="balance">
        <div class="indicator-title">
          <div class="point point-left top"></div>
          <div class="point point-left top"></div>
          <div class="point point-left bottom"></div>
          <div class="point point-right bottom"></div>
          <div>
            <i class="active_icon icon-balance"></i>
            理论电量平衡分析法
          </div>
        </div>
        <div class="indicator-content">
          <div class="content-item">
            <div class="item-title">故障损失率</div>
            <div class="percent" style="color: #ffffff">
              {{ allData?.zbl?.currGzsll.toFixed(2) }}
            </div>
            <div class="compare">
              <div class="compare-item">
                同
                <div
                  :class="
                    allData?.zbl?.withGzslzzl < 0
                      ? 'compare-lift-down'
                      : 'compare-lift-up'
                  "
                >
                  <i
                    v-if="allData?.zbl?.withGzslzzl < 0"
                    class="active_icon icon-arrow-dpwn"
                  ></i>
                  <i v-else class="active_icon icon-arrow-up"></i>
                  {{ allData?.zbl?.withGzslzzl }}%
                </div>
              </div>
              <div class="compare-item">
                环
                <div
                  :class="
                    allData.zbl?.ringGzslzzl < 0
                      ? 'compare-lift-down'
                      : 'compare-lift-up'
                  "
                >
                  <i
                    v-if="allData.zbl?.ringGzslzzl < 0"
                    class="active_icon icon-arrow-dpwn"
                  ></i>
                  <i v-else class="active_icon icon-arrow-up"></i>
                  {{ allData?.zbl?.ringGzslzzl }}%
                </div>
              </div>
            </div>
            <progress-item
              :value="allData?.zbl?.currGzsll"
              totle="100"
            ></progress-item>
          </div>
          <div class="content-dashe"></div>
          <div class="content-item">
            <div class="item-title">检修损失率</div>
            <div class="percent" style="color: #ffffff">
              {{ allData.zbl?.currJxsll.toFixed(2) }}
            </div>
            <div class="compare">
              <div class="compare-item">
                同
                <div
                  :class="
                    allData.zbl?.withJxslzzl < 0
                      ? 'compare-lift-down'
                      : 'compare-lift-up'
                  "
                >
                  <i
                    v-if="allData.zbl?.withJxslzzl < 0"
                    class="active_icon icon-arrow-dpwn"
                  ></i>
                  <i v-else class="active_icon icon-arrow-up"></i>
                  {{ allData?.zbl?.withJxslzzl }}%
                </div>
              </div>
              <div class="compare-item">
                环
                <div
                  :class="
                    allData.zbl?.ringJxslzzl < 0
                      ? 'compare-lift-down'
                      : 'compare-lift-up'
                  "
                >
                  <i
                    v-if="allData.zbl?.ringJxslzzl < 0"
                    class="active_icon icon-arrow-dpwn"
                  ></i>
                  <i v-else class="active_icon icon-arrow-up"></i>
                  {{ allData?.zbl?.ringJxslzzl }}%
                </div>
              </div>
            </div>
            <progress-item
              :value="allData?.zbl?.currJxsll"
              totle="100"
            ></progress-item>
          </div>
          <div class="content-dashe"></div>
          <div class="content-item">
            <div class="item-title">限电损失率</div>
            <div class="percent" style="color: #ffffff">
              {{ allData.zbl?.currXdsll.toFixed(2) }}
            </div>
            <div class="compare">
              <div class="compare-item">
                同
                <div
                  :class="
                    allData.zbl?.withXdslzzl < 0
                      ? 'compare-lift-down'
                      : 'compare-lift-up'
                  "
                >
                  <i
                    v-if="allData.zbl?.withXdslzzl < 0"
                    class="active_icon icon-arrow-dpwn"
                  ></i>
                  <i v-else class="active_icon icon-arrow-up"></i>
                  {{ allData?.zbl?.withXdslzzl }}%
                </div>
              </div>
              <div class="compare-item">
                环
                <div
                  :class="
                    allData.zbl?.ringXdslzzl < 0
                      ? 'compare-lift-down'
                      : 'compare-lift-up'
                  "
                >
                  <i
                    v-if="allData.zbl?.ringXdslzzl < 0"
                    class="active_icon icon-arrow-dpwn"
                  ></i>
                  <i v-else class="active_icon icon-arrow-up"></i>
                  {{ allData?.zbl?.ringXdslzzl }}%
                </div>
              </div>
            </div>
            <progress-item
              :value="allData?.zbl?.currXdsll"
              totle="100"
            ></progress-item>
          </div>
          <div class="content-dashe"></div>
          <div class="content-item">
            <div class="item-title">受累损失率</div>
            <div class="percent" style="color: #ffffff">
              {{ allData.zbl?.currSlsll.toFixed(2) }}
            </div>
            <div class="compare">
              <div class="compare-item">
                同
                <div
                  :class="
                    allData.zbl?.withSlslzzl < 0
                      ? 'compare-lift-down'
                      : 'compare-lift-up'
                  "
                >
                  <i
                    v-if="allData.zbl?.withSlslzzl < 0"
                    class="active_icon icon-arrow-dpwn"
                  ></i>
                  <i v-else class="active_icon icon-arrow-up"></i>
                  {{ allData?.zbl?.withSlslzzl }}%
                </div>
              </div>
              <div class="compare-item">
                环
                <div
                  :class="
                    allData.zbl?.ringSlslzzl < 0
                      ? 'compare-lift-down'
                      : 'compare-lift-up'
                  "
                >
                  <i
                    v-if="allData.zbl?.ringSlslzzl < 0"
                    class="active_icon icon-arrow-dpwn"
                  ></i>
                  <i v-else class="active_icon icon-arrow-up"></i>
                  {{ allData?.zbl?.ringSlslzzl }}%
                </div>
              </div>
            </div>
            <progress-item
              :value="allData?.zbl?.currSlsll"
              totle="100"
            ></progress-item>
          </div>
          <div class="content-dashe"></div>
          <div class="content-item">
            <div class="item-title">性能损失率</div>
            <div class="percent" style="color: #ffffff">
              {{ allData.zbl?.currXNsll.toFixed(2) }}
            </div>
            <div class="compare">
              <div class="compare-item">
                同
                <div
                  :class="
                    allData.zbl?.withXnslzzl < 0
                      ? 'compare-lift-down'
                      : 'compare-lift-up'
                  "
                >
                  <i
                    v-if="allData.zbl?.withXnslzzl < 0"
                    class="active_icon icon-arrow-dpwn"
                  ></i>
                  <i v-else class="active_icon icon-arrow-up"></i>
                  {{ allData?.zbl?.withXnslzzl }}%
                </div>
              </div>
              <div class="compare-item">
                环
                <div
                  :class="
                    allData.zbl?.ringXnslzzl < 0
                      ? 'compare-lift-down'
                      : 'compare-lift-up'
                  "
                >
                  <i
                    v-if="allData.zbl?.ringXnslzzl < 0"
                    class="active_icon icon-arrow-dpwn"
                  ></i>
                  <i v-else class="active_icon icon-arrow-up"></i>
                  {{ allData?.zbl?.ringXnslzzl }}%
                </div>
              </div>
            </div>
            <progress-item
              :value="allData?.zbl?.currXNsll"
              totle="100"
            ></progress-item>
          </div>
        </div>
      </div>
      <div class="dashes"></div>
      <div class="dashes1"></div>
      <div class="efficiency">
        <div class="point point-left top"></div>
        <div class="indicator-title">
          <div class="point point-left top"></div>
          <div class="point point-left top"></div>
          <div class="point point-left bottom"></div>
          <div class="point point-right bottom"></div>
          <div>
            <i class="active_icon icon-manage"></i>
            管理效率指标
          </div>
        </div>
        <div class="indicator-content">
          <div class="content-item1">
            <div class="item-title">
              {{ staType == -2 ? "系统效率" : "复位及时率" }}
            </div>
            <div class="percent" style="color: #ffffff">
              {{ allData.zbl?.currFwjsl.toFixed(2) }}
            </div>
            <div class="compare">
              <div class="compare-item">
                同
                <div
                  :class="
                    allData.zbl?.withFwjszzl < 0
                      ? 'compare-lift-down'
                      : 'compare-lift-up'
                  "
                >
                  <i
                    v-if="allData.zbl?.withFwjszzl < 0"
                    class="active_icon icon-arrow-dpwn"
                  ></i>
                  <i v-else class="active_icon icon-arrow-up"></i>
                  {{ allData?.zbl?.withFwjszzl }}%
                </div>
              </div>
              <div class="compare-item">
                环
                <div
                  :class="
                    allData.zbl?.ringFwjszzl < 0
                      ? 'compare-lift-down'
                      : 'compare-lift-up'
                  "
                >
                  <i
                    v-if="allData.zbl?.ringFwjszzl < 0"
                    class="active_icon icon-arrow-dpwn"
                  ></i>
                  <i v-else class="active_icon icon-arrow-up"></i>
                  {{ allData?.zbl?.ringFwjszzl }}%
                </div>
              </div>
            </div>
            <progress-item
              :value="allData?.zbl?.currFwjsl"
              totle="100"
            ></progress-item>
          </div>
          <div class="content-dashe"></div>
          <div class="content-item1">
            <div class="item-title">
              {{ staType == -2 ? "离散率" : "状态转换率" }}
            </div>
            <div class="percent" style="color: #ffffff">
              {{ allData.zbl?.currZtzhl.toFixed(2) }}
            </div>
            <div class="compare">
              <div class="compare-item">
                同
                <div
                  :class="
                    allData.zbl?.withZtzhzzl < 0
                      ? 'compare-lift-down'
                      : 'compare-lift-up'
                  "
                >
                  <i
                    v-if="allData.zbl?.withZtzhzzl < 0"
                    class="active_icon icon-arrow-dpwn"
                  ></i>
                  <i v-else class="active_icon icon-arrow-up"></i>
                  {{ allData?.zbl?.withZtzhzzl }}%
                </div>
              </div>
              <div class="compare-item">
                环
                <div
                  :class="
                    allData.zbl?.ringZtzhzzl < 0
                      ? 'compare-lift-down'
                      : 'compare-lift-up'
                  "
                >
                  <i
                    v-if="allData.zbl?.ringZtzhzzl < 0"
                    class="active_icon icon-arrow-dpwn"
                  ></i>
                  <i v-else class="active_icon icon-arrow-up"></i>
                  {{ allData?.zbl?.ringZtzhzzl }}%
                </div>
              </div>
            </div>
            <progress-item
              :value="allData?.zbl?.currZtzhl"
              totle="100"
            ></progress-item>
          </div>
          <div class="content-dashe"></div>
          <div class="content-item1">
            <div class="item-title">
              {{ staType == -2 ? "转换效率" : "消缺及时率" }}
            </div>
            <div class="percent" style="color: #ffffff">
              {{ allData.zbl?.currXqjsl.toFixed(2) }}
            </div>
            <div class="compare">
              <div class="compare-item">
                同
                <div
                  :class="
                    allData.zbl?.withXqjszzl < 0
                      ? 'compare-lift-down'
                      : 'compare-lift-up'
                  "
                >
                  <i
                    v-if="allData.zbl?.withXqjszzl < 0"
                    class="active_icon icon-arrow-dpwn"
                  ></i>
                  <i v-else class="active_icon icon-arrow-up"></i>
                  {{ allData?.zbl?.withXqjszzl }}%
                </div>
              </div>
              <div class="compare-item">
                环
                <div
                  :class="
                    allData.zbl?.ringXqjszzl < 0
                      ? 'compare-lift-down'
                      : 'compare-lift-up'
                  "
                >
                  <i
                    v-if="allData.zbl?.ringXqjszzl < 0"
                    class="active_icon icon-arrow-dpwn"
                  ></i>
                  <i v-else class="active_icon icon-arrow-up"></i>
                  {{ allData?.zbl?.ringXqjszzl }}%
                </div>
              </div>
            </div>
            <progress-item
              :value="allData?.zbl?.currXqjsl"
              totle="100"
            ></progress-item>
          </div>
        </div>
      </div>
      <div class="dashes"></div>
      <div class="dashes1"></div>
      <div class="others">
        <div class="indicator-title">
          <div class="point point-left top"></div>
          <div class="point point-left top"></div>
          <div class="point point-left bottom"></div>
          <div class="point point-right bottom"></div>
          <div>
            <i class="active_icon icon-economic"></i>
            其他经济性指标
          </div>
        </div>
        <div class="indicator-content">
          <div class="content-item1">
            <div class="item-title">综合厂用电率</div>
            <div class="percent" style="color: #ffffff">
              {{ allData.zbl?.currZhcydl.toFixed(2) }}
            </div>
            <div class="compare">
              <div class="compare-item">
                同
                <div
                  :class="
                    allData.zbl?.withZhcydzzl < 0
                      ? 'compare-lift-down'
                      : 'compare-lift-up'
                  "
                >
                  <i
                    v-if="allData.zbl?.withZhcydzzl < 0"
                    class="active_icon icon-arrow-dpwn"
                  ></i>
                  <i v-else class="active_icon icon-arrow-up"></i>
                  {{ allData?.zbl?.withZhcydzzl }}%
                </div>
              </div>
              <div class="compare-item">
                环
                <div
                  :class="
                    allData.zbl?.ringZhcydzzl < 0
                      ? 'compare-lift-down'
                      : 'compare-lift-up'
                  "
                >
                  <i
                    v-if="allData.zbl?.ringZhcydzzl < 0"
                    class="active_icon icon-arrow-dpwn"
                  ></i>
                  <i v-else class="active_icon icon-arrow-up"></i>
                  {{ allData?.zbl?.ringZhcydzzl }}%
                </div>
              </div>
            </div>
            <progress-item
              :value="allData?.zbl?.currZhcydl"
              totle="100"
            ></progress-item>
          </div>
          <div class="content-dashe"></div>
          <div class="content-item1">
            <div class="item-title">负荷率</div>
            <div class="percent" style="color: #ffffff">
              {{ allData.zbl?.currGlqxfhl.toFixed(2) }}
            </div>
            <div class="compare">
              <div class="compare-item">
                同
                <div
                  :class="
                    allData.zbl?.withGlqxfhzzl < 0
                      ? 'compare-lift-down'
                      : 'compare-lift-up'
                  "
                >
                  <i
                    v-if="allData.zbl?.withGlqxfhzzl < 0"
                    class="active_icon icon-arrow-dpwn"
                  ></i>
                  <i v-else class="active_icon icon-arrow-up"></i>
                  {{ allData?.zbl?.withGlqxfhzzl }}%
                </div>
              </div>
              <div class="compare-item">
                环
                <div
                  :class="
                    allData.zbl?.ringGlqxfhzzl < 0
                      ? 'compare-lift-down'
                      : 'compare-lift-up'
                  "
                >
                  <i
                    v-if="allData.zbl?.ringGlqxfhzzl < 0"
                    class="active_icon icon-arrow-dpwn"
                  ></i>
                  <i v-else class="active_icon icon-arrow-up"></i>
                  {{ allData?.zbl?.ringGlqxfhzzl }}%
                </div>
              </div>
            </div>
            <progress-item
              :value="allData?.zbl?.currGlqxfhl"
              totle="100"
            ></progress-item>
          </div>
          <div class="content-dashe"></div>
          <div class="content-item1">
            <div class="item-title">设备可利用率</div>
            <div class="percent" style="color: #ffffff">
              {{ allData.zbl?.currSbklyl.toFixed(2) }}
            </div>
            <div class="compare">
              <div class="compare-item">
                同
                <div
                  :class="
                    allData.zbl?.withSbklyzzl < 0
                      ? 'compare-lift-down'
                      : 'compare-lift-up'
                  "
                >
                  <i
                    v-if="allData.zbl?.withSbklyzzl < 0"
                    class="active_icon icon-arrow-dpwn"
                  ></i>
                  <i v-else class="active_icon icon-arrow-up"></i>
                  {{ allData?.zbl?.withSbklyzzl }}%
                </div>
              </div>
              <div class="compare-item">
                环
                <div
                  :class="
                    allData.zbl?.ringSbklyzzl < 0
                      ? 'compare-lift-down'
                      : 'compare-lift-up'
                  "
                >
                  <i
                    v-if="allData.zbl?.ringSbklyzzl < 0"
                    class="active_icon icon-arrow-dpwn"
                  ></i>
                  <i v-else class="active_icon icon-arrow-up"></i>
                  {{ allData?.zbl?.ringSbklyzzl }}%
                </div>
              </div>
            </div>
            <progress-item
              :value="allData?.zbl?.currSbklyl"
              totle="100"
            ></progress-item>
          </div>
        </div>
      </div>
    </div>
    <div class="analysis">
      <div class="left-analysis">
        <div class="analysis-item">
          <div class="progess">
            <div class="wind-rate">
              {{ staType == -2 ? "光能利用率" : "风能利用率" }}
            </div>
            <div class="rate-value">
              {{ allData?.fdlinfo?.fnlyl === 0 ? 0 : allData?.fdlinfo?.fnlyl }}%
            </div>
            <img class="beam" src="./components/images/beam.png" alt="" />
            <img class="base" src="./components/images/base.png" alt="" />
          </div>
          <div class="progess-item">
            <div class="progess-unit">万kWh</div>
            <div class="progess-name">
              发电量
              <div class="progess-bar">
                <div
                  class="progess-content"
                  :style="{
                    width:
                      allData?.fdlinfo?.fdl == 0 && allData?.fdlinfo?.qfdl == 0
                        ? '0px'
                        : (allData?.fdlinfo?.fdl /
                            (allData?.fdlinfo?.fdl + allData?.fdlinfo?.qfdl)) *
                            100 +
                          '%',
                  }"
                ></div>
              </div>
              <div class="effect">
                <div
                  class="effect-value"
                  :style="{
                    'margin-left':
                      allData?.fdlinfo?.fdl == 0 && allData?.fdlinfo?.qfdl == 0
                        ? '30%'
                        : ((allData?.fdlinfo?.fdl /
                            (allData?.fdlinfo?.fdl + allData?.fdlinfo?.qfdl)) *
                            100 >
                          80
                            ? 80
                            : (allData?.fdlinfo?.fdl /
                                (allData?.fdlinfo?.fdl +
                                  allData?.fdlinfo?.qfdl)) *
                                100 <
                              25
                            ? 25
                            : (allData?.fdlinfo?.fdl /
                                (allData?.fdlinfo?.fdl +
                                  allData?.fdlinfo?.qfdl)) *
                              100) + '%',
                  }"
                >
                  {{ allData?.fdlinfo?.fdl }}
                </div>
                <img
                  :style="{
                    'margin-left':
                      allData?.fdlinfo?.fdl == 0 && allData?.fdlinfo?.qfdl == 0
                        ? '-10%'
                        : (allData?.fdlinfo?.fdl /
                            (allData?.fdlinfo?.fdl + allData?.fdlinfo?.qfdl)) *
                            100 -
                          15 +
                          '%',
                  }"
                  class="effect-img"
                  src="../../../assets/imgs/generatingCapacityMonth.png"
                  alt=""
                />
              </div>
            </div>
            <div class="progess-name" style="margin-top: 15px">
              欠发电量
              <div class="progess-bar">
                <div
                  class="progess-content1"
                  :style="{
                    width:
                      allData?.fdlinfo?.fdl == 0 && allData?.fdlinfo?.qfdl == 0
                        ? '0px'
                        : (allData?.fdlinfo?.qfdl /
                            (allData?.fdlinfo?.fdl + allData?.fdlinfo?.qfdl)) *
                            100 +
                          '%',
                  }"
                ></div>
              </div>
              <div class="effect">
                <div
                  class="effect-value"
                  :style="{
                    'margin-left':
                      allData?.fdlinfo?.fdl == 0 && allData?.fdlinfo?.qfdl == 0
                        ? '30%'
                        : ((allData?.fdlinfo?.qfdl /
                            (allData?.fdlinfo?.fdl + allData?.fdlinfo?.qfdl)) *
                            100 >
                          80
                            ? 80
                            : (allData?.fdlinfo?.qfdl /
                                (allData?.fdlinfo?.fdl +
                                  allData?.fdlinfo?.qfdl)) *
                                100 <
                              30
                            ? 30
                            : (allData?.fdlinfo?.qfdl /
                                (allData?.fdlinfo?.fdl +
                                  allData?.fdlinfo?.qfdl)) *
                              100) + '%',
                  }"
                  style="color: #ff8300"
                >
                  {{ allData?.fdlinfo?.qfdl }}
                </div>
                <img
                  :style="{
                    'margin-left':
                      allData?.fdlinfo?.fdl == 0 && allData?.fdlinfo?.qfdl == 0
                        ? '-10%'
                        : (allData?.fdlinfo?.qfdl /
                            (allData?.fdlinfo?.fdl + allData?.fdlinfo?.qfdl)) *
                            100 -
                          10 +
                          '%',
                  }"
                  class="effect-img"
                  src="../../../assets/imgs/generatingCapacityDay.png"
                  alt=""
                />
              </div>
            </div>
          </div>
        </div>
        <div class="analysis-item-right">
          <div class="chart-name">
            <div class="point point-left bottom"></div>
            <div class="point point-right bottom"></div>
            综合厂用电率
          </div>
          <LineCharts
            class="charts-item"
            :list="zhcydl"
            width="95%"
            height="210px"
            :units="Powertrend.units"
            :showLegend="true"
          >
          </LineCharts>
        </div>
        <div class="analysis-item1">
          <div class="chart-name">
            <div class="point point-left bottom"></div>
            <div class="point point-right bottom"></div>
            三率曲线
          </div>
          <LineCharts
            class="charts-item"
            :list="slqx"
            width="95%"
            height="260px"
            :units="Powertrend.units"
            :showLegend="true"
          >
          </LineCharts>
        </div>
        <div class="analysis-item1-right">
          <div class="chart-name">
            <div class="point point-left bottom"></div>
            <div class="point point-right bottom"></div>
            损失电量分析
          </div>
          <div class="circle"></div>
          <PieChart
            :lossPower="lossPower"
            width="95%"
            height="210px"
          ></PieChart>
        </div>
      </div>
      <div class="right-analysis">
        <div class="stagger">
          <StBack></StBack>
          <div class="sd-svg">
            <SdSvg
              :stationinfo="stationinfo"
              :foreignKeyId="svgImg"
              @handleMapClick="handleMapClick"
            ></SdSvg>
          </div>
        </div>
      </div>
    </div>
    <div
      class="statistics"
      :style="screenHeight > 1000 ? 'height: 270px' : 'height: 220px'"
    >
      <div class="statistics-left">
        <div class="chart-name">
          <div class="point point-left bottom"></div>
          <div class="point point-right bottom"></div>
          电量统计分析
        </div>
        <div v-if="showFlag" style="margin-top: -30px">
          <BarCharts
            :list="barList"
            width="97%"
            :height="barHeights"
            :showLegend="true"
            :padding="[10, 10]"
            :top="70"
          >
          </BarCharts>
        </div>
      </div>
      <div class="statistics-right">
        <div class="chart-name">
          <div class="point point-left bottom"></div>
          <div class="point point-right bottom"></div>
          <div class="title-list">
            <img class="select-back" src="@assets/imgs/select-back.png" />
            排行榜
            <div class="title-select">
              <el-select
                v-model="pointValue"
                placeholder="请选择"
                @change="getPointRanking(false)"
                clearable
              >
                <el-option
                  v-for="item in pointList"
                  :key="item.nemCode"
                  :label="item.description"
                  :value="item.nemCode"
                >
                </el-option>
              </el-select>
            </div>
          </div>
        </div>
        <div v-if="showFlag">
          <OnlyBarCharts
            @dblclick="handleClick()"
            width="95%"
            :list="zbphl"
            :height="barHeight"
            :showLegend="false"
          >
          </OnlyBarCharts>
        </div>
      </div>
    </div>
    <el-dialog
      class="dialogs"
      width="80%"
      v-model="displayPhb"
      :show-close="true"
    >
      <template #title>
        <div class="dialog-title">
          <div class="title">{{ allZbphl[0]?.name }}排行榜</div>
        </div>
      </template>
      <div class="dialog-body" style="height: 51vh; overflow-x: scroll">
        <!-- <img class="dialog-img" src="@assets/img/images/dialog.png" /> -->
        <OnlyBarCharts
          :width="onlyBarChartsWidth"
          :list="allZbphl"
          height="49vh"
          :units="['', '']"
          :showLegend="false"
        >
        </OnlyBarCharts>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import headerNav from "@/components/headerNav";
import progressItem from "./components/progress.vue";
import LineCharts from "./components/lineCharts.vue";
import PieChart from "./components/pieChart.vue";
import BarCharts from "./components/barCharts.vue";
import OnlyBarCharts from "./components/onlyBarCharts.vue";
import StBack from "./components/st-back.vue";
import SdSvg from "./components/sdSvg.vue";
// import ProgressCustom from './components/progess.vue'
import api from "@api/economy";
export default {
  name: "homePage", //首页
  components: {
    headerNav,
    progressItem,
    LineCharts,
    PieChart,
    BarCharts,
    OnlyBarCharts,
    StBack,
    SdSvg,
    // ProgressCustom,
  },
  data() {
    return {
      current: 0,
      currentGroup: 0,
      currentDay: "r",
      screenHeight: window.innerHeight,
      barHeight: "110px",
      barHeights: "220px",
      showFlag: true,
      Powertrend: {
        value: [
          {
            title: "",
            value: [],
          },
        ],
      },
      allData: {},
      zhcydl: [],
      slqx: [],
      lossPower: [],
      barList: [],
      zbphl: [],
      allZbphl: [],
      stationinfo: [],
      // zhcydl: [],
      pointList: [],
      pointValue: "fnlyl",
      headerIndex: 0,
      foreignKeyId: "",
      svgImg: "",
      displayPhb: false,
    };
  },
  computed: {
    onlyBarChartsWidth() {
      return this.allZbphl[0].children.length * 120 + "px";
    },
  },
  mounted() {
    if (this.screenHeight > 1000) {
      this.barHeight = "230px";
      this.barHeights = "340px";
      this.showFlag = false;
      setTimeout(() => {
        this.showFlag = true;
      }, 100);
    } else {
      this.barHeight = "110px";
      this.barHeights = "220px";
    }
    this.pointCodeList();
    window.onresize = () => {
      return (() => {
        window.screenHeight = window.innerHeight;
        this.screenHeight = window.screenHeight;
      })();
    };
  },
  methods: {
    handleClick() {
      this.getPointRanking(true);
    },
    handleMapClick() {
      this.getPointRanking(true, "fnlyl");
    },
    pointCodeList() {
      api.pointCodeList().then(({ data: res }) => {
        if (res.data) {
          res.data = res.data.map((item) => {
            if (this.staType == -2) {
              if (item.nemCode == "fnlyl") {
                item.description = "光能利用率";
              }
            } else {
              if (item.nemCode == "fnlyl") {
                item.description = "风能利用率";
              }
            }
            return item;
          });
          this.pointList = res.data;

          this.getHomePageData();
          this.getPointRanking(false);
        }
      });
    },
    getPointRanking(popup, pointValue) {
      api
        .pointRanking({
          foreignKeyId: this.foreignKeyId || "SD_RGN",
          pointCode: pointValue ? "fnlyl" : this.pointValue,
          dateType: this.currentDay || "r",
          popup: popup,
          staType: this.staType || 0,
        })
        .then(({ data: res }) => {
          if (res) {
            let zbphl = [
              {
                name: "发电量",
                children: [],
                date: [],
              },
            ];
            res.data.forEach((item) => {
              zbphl[0].name = item.description;
              zbphl[0].date.push(item.stationname);
              zbphl[0].children.push(item.value);
            });
            if (popup) {
              this.allZbphl = zbphl;
              this.displayPhb = true;
            } else {
              this.zbphl = zbphl;
            }
          }
        });
    },
    firstRender(headerIndex, nodeCode, a, b, c, d) {
      if (d) {
        this.svgImg = d;
      }
      this.staType = headerIndex;
      this.foreignKeyId = nodeCode;
      this.pointCodeList();
    },
    getHomePageData() {
      api
        .homePage({
          regionId: "",
          staType: this.staType || 0,
          dateType: this.currentDay || "f",
          pointCode: this.pointValue,
          foreignKeyId: this.foreignKeyId || "SD_RGN",
          companyId: "",
        })
        .then(({ data: res }) => {
          if (res) {
            this.allData = res.data;
            let arr = [];
            if (this.staType != -2) {
              arr = [
                {
                  name: "复位及时率",
                  children: [],
                  date: [],
                },
                {
                  name: "故障消缺及时率",
                  children: [],
                },
                {
                  name: "状态转换及时率",
                  children: [],
                },
              ];
            } else {
              arr = [
                {
                  name: "系统效率",
                  children: [],
                  date: [],
                },
                {
                  name: "离散率",
                  children: [],
                },
                {
                  name: "转换效率",
                  children: [],
                },
              ];
            }
            res.data.slqx.forEach((item) => {
              arr[0].date.push(item.date);
              arr[0].children.push(item.fwjsl);
              arr[1].children.push(item.gzxqjsl);
              arr[2].children.push(item.ztzhjsl);
            });
            this.slqx = arr;
            let lossPower = [
              {
                name: "实发电量",
                value: res.data.sldlfx.fdl,
              },
              {
                name: "性能损失",
                value: res.data.sldlfx.xndl,
              },
              {
                name: "检修损失",
                value: res.data.sldlfx.jxdl,
              },
              {
                name: "故障损失",
                value: res.data.sldlfx.gzdl,
              },
              {
                name: "限电损失",
                value: res.data.sldlfx.xddl,
              },
              {
                name: "受累损失",
                value: res.data.sldlfx.sldl,
              },
            ];
            this.lossPower = lossPower;

            let barList = [
              {
                name: "发电量",
                children: [],
                date: [],
              },
              {
                name: "性能损失电量",
                children: [],
              },
              {
                name: "检修",
                children: [],
              },
              {
                name: "故障",
                children: [],
              },
              {
                name: "限电",
                children: [],
              },
              {
                name: "受累",
                children: [],
              },
            ];
            res.data.dltjfx.forEach((item) => {
              barList[0].date.push(item.date);
              barList[0].children.push(item.fdl);
              barList[1].children.push(item.gzdl);
              barList[2].children.push(item.jxdl);
              barList[3].children.push(item.sldl);
              barList[4].children.push(item.xddl);
              barList[5].children.push(item.xndl);
            });
            this.barList = barList;
            let zhcydl = [
              {
                name: "综合厂用电率",
                children: [],
                date: [],
              },
            ];
            res.data.zhcydl.forEach((item) => {
              zhcydl[0].date.push(item.key);
              zhcydl[0].children.push(item.value);
            });
            this.zhcydl = zhcydl;

            let stationinfo = [];
            res.data.stainfo.forEach((item) => {
              let obj = {};
              obj.name = item.aname;
              obj.value = item.fnlyl;
              obj.id = item.nemCode;
              obj.xPoint = Number(item.xPoint);
              obj.yPoint = Number(item.yPoint);
              stationinfo.push(obj);
            });

            this.stationinfo = stationinfo;
          }
        });
    },
    handleChangeType(val) {
      this.current = val;
      this.getHomePageData();
    },
    handleChangeGroup(val) {
      this.currentGroup = val;
      this.getHomePageData();
    },
    handleChangeDay(val) {
      this.currentDay = val;
      this.getHomePageData();
    },
  },
  watch: {
    screenHeight(val) {
      this.screenHeight = val;
      if (val > 1000) {
        this.barHeight = "230px";
        this.barHeights = "340px";
      } else {
        this.barHeight = "110px";
        this.barHeights = "220px";
      }
      this.showFlag = false;
      setTimeout(() => {
        this.showFlag = true;
      }, 100);
    },
  },
};
</script>

<style lang="less" scoped>
.body {
  width: 100%;
  height: 100%;
  //   background: url("../../../../assets/img/images/background02.png") no-repeat;
  //   background-size: cover;
}

.chart-name {
  display: flex;
  align-items: center;
  padding-left: 20px;
  position: relative;
  height: 39px;
  width: 98%;
  margin-left: 1%;
  border-bottom: 1px solid rgba(153, 153, 153, 0.5);
  font-size: 16px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #ffffff;

  .title-list {
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    position: relative;
    z-index: 2;

    .title-select {
      z-index: 2;
    }

    .select-back {
      position: absolute;
      right: 5px;
      top: 0px;
      z-index: 1;
    }
  }
}

.point {
  width: 6px;
  height: 1px;
  background-color: #ffffff;
  position: absolute;

  &.point-left {
    left: 0;
  }

  &.point-right {
    top: 0;
    right: 0;
  }

  &.top {
    top: -1px;
  }

  &.bottom {
    bottom: -1px;
  }
}

.title-bar {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  padding: 9px 22px 10px 20px;

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

    .type-bar {
      display: flex;
      flex-direction: row;
      align-items: center;
    }

    .group-bar {
      display: flex;
      flex-direction: row;
      align-items: center;
      margin-left: 52px;
    }
  }

  .right-bar {
    display: flex;
    flex-direction: row;
    align-items: center;
  }

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

.indicator {
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 98%;
  height: 169px;
  margin-left: 20px;
  background-color: rgba(0, 0, 0, 0.3);
  border-top: 1px solid rgba(153, 153, 153, 0.5);

  .balance {
    width: 45%;
    height: 100%;
  }

  .efficiency {
    width: 27%;
    height: 100%;
  }

  .others {
    width: 27%;
    height: 100%;
  }

  .dashes {
    width: 1px;
    height: 100%;
    background-image: linear-gradient(
      rgba(153, 153, 153, 0.5) 0%,
      rgba(153, 153, 153, 0.5) 40%,
      transparent 50%
    );
    background-size: 1px 13px;
    background-repeat: repeat-y;
  }

  .dashes1 {
    width: 1px;
    height: 100%;
    background-image: linear-gradient(
      rgba(153, 153, 153, 0.5) 0%,
      rgba(153, 153, 153, 0.5) 40%,
      transparent 50%
    );
    background-size: 1px 13px;
    background-repeat: repeat-y;
    margin-left: 12px;
  }

  .indicator-title {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 100%;
    height: 38px;
    border-bottom: 1px solid rgba(153, 153, 153, 0.5);
    font-size: 14px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #1c99ff;
  }

  .indicator-content {
    display: flex;
    flex-direction: row;
    align-items: center;
    width: 100%;
    height: 130px;

    .content-item {
      width: 25%;
      height: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    .content-item1 {
      width: 33%;
      height: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    .item-title {
      font-size: 14px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #b3b3b3;
      margin-top: 12px;
    }

    .percent {
      font-size: 18px;
      font-family: Arial;
      font-weight: 400;
      color: #1c99ff;
      margin-top: 12px;
    }

    .compare {
      display: flex;
      flex-direction: row;
      align-items: center;
      width: 100%;
      margin-bottom: 10px;

      .compare-item {
        width: 50%;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        font-size: 14px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #ffffff;

        .compare-lift-down {
          margin-left: 7px;
          font-size: 14px;
          font-family: Arial;
          font-weight: 400;
          color: #ff8300;
          display: flex;
          flex-direction: row;
          align-items: center;
          margin-top: 1px;
        }

        .compare-lift-up {
          margin-left: 7px;
          font-size: 14px;
          font-family: Arial;
          font-weight: 400;
          color: #1c99ff;
          display: flex;
          flex-direction: row;
          align-items: center;
          margin-top: 1px;
        }
      }
    }

    .content-dashe {
      width: 1px;
      height: 85%;
      background-image: linear-gradient(
        rgba(153, 153, 153, 0.5) 0%,
        rgba(153, 153, 153, 0.5) 40%,
        transparent 50%
      );
      background-size: 1px 13px;
      background-repeat: repeat-y;
    }
  }
}

.analysis {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  width: 98%;
  margin-left: 20px;
  height: 495px;
  margin-top: 10px;

  .left-analysis {
    width: 50%;
    height: 101%;
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;

    .analysis-item {
      display: flex;
      flex-direction: row;
      width: 49%;
      height: 215px;
      margin-right: 1%;
      background-color: rgba(0, 0, 0, 0.3);
    }

    .analysis-item-right {
      width: 50%;
      height: 215px;
      background-color: rgba(0, 0, 0, 0.3);
    }

    .analysis-item1 {
      width: 49%;
      height: 272px;
      margin-right: 1%;
      background-color: rgba(0, 0, 0, 0.3);
    }

    .analysis-item1-right {
      width: 50%;
      height: 272px;
      background-color: rgba(0, 0, 0, 0.3);
      position: relative;
    }

    .circle {
      position: absolute;
      width: 160px;
      height: 160px;
      border-radius: 50%;
      border: 2px solid #157cec;
      left: 98px;
      top: 63px;
      box-shadow: 0px 0px 12px 0px #157cec inset;
    }

    .charts-item {
      margin-top: -30px;
    }

    .progess {
      height: 100%;
      width: 50%;
      display: flex;
      flex-direction: column;
      align-items: center;
      position: relative;

      .wind-rate {
        font-size: 14px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #ffffff;
        margin-top: 53px;
        z-index: 4;
      }

      .rate-value {
        font-size: 29px;
        font-family: Arial;
        font-weight: 400;
        color: #ffffff;
        margin-top: 26px;
        z-index: 3;
      }

      .beam {
        width: 108px;
        // margin-top: -121px;
        z-index: 2;
        animation: rotate 2.5s linear infinite;
      }

      @keyframes rotate {
        0% {
          margin-top: -113px;
        }

        50% {
          margin-top: -125px;
        }

        100% {
          margin-top: -113px;
        }
      }

      .base {
        position: absolute;
        width: 173px;
        z-index: 1;
        top: 119px;
      }

      // .progess-value {
      //   transform: rotate(88deg);

      //   .rotating {
      //     transform: rotateY(50deg);
      //   }
      // }
    }

    .progess-item {
      width: 50%;
      padding-left: 15px;

      .progess-unit {
        display: flex;
        flex-direction: row-reverse;
        font-size: 12px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #9b9b9d;
        margin-top: 18px;
        margin-right: 15px;
      }

      .progess-name {
        font-size: 14px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #ffffff;
        margin-top: 30px;

        .progess-bar {
          width: 202px;
          height: 5px;
          background: rgba(142, 176, 255, 0.2);
          margin-top: 10px;

          .progess-content {
            height: 100%;
            max-width: 100%;
            background: linear-gradient(90deg, #001442, #1c99ff);
          }

          .progess-content1 {
            height: 100%;
            max-width: 100%;
            background: linear-gradient(90deg, #561f00, #853000, #f78712);
          }
        }

        .effect {
          margin-top: -21px;
          line-height: 0px;

          .effect-value {
            font-size: 14px;
            font-family: Arial;
            font-weight: 400;
            color: #2b99ff;
          }
        }
      }
    }
  }

  .right-analysis {
    width: 50%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.3);
    margin-left: 10px;

    .stagger {
      display: flex;
      width: 100%;
      height: 100%;
      background: url("./components/images/stagger.png");
      position: relative;
      top: 0;
      left: 0;

      .sd-svg {
        width: 90%;
        height: 90%;
        display: flex;
        position: absolute;
        left: 85px;
      }
    }
  }
}

.statistics {
  width: 98%;
  margin-left: 20px;
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-top: 10px;

  .statistics-left {
    width: 50%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.3);
  }

  .statistics-right {
    width: 50%;
    height: 100%;
    margin-left: 10px;
    background-color: rgba(0, 0, 0, 0.3);
  }
}
</style>