EMS_client/src/views/module_ems/photovoltaic/stationMonitor/index.vue

<template>
  <div class="page-header-index-wide">
    <a-row :gutter="24">
      <a-col :sm="24" :md="12" :xl="8" :style="{ marginBottom: '12px' }">
        <a-card
          :loading="loading"
          :body-style="{ padding: '10px 8px 8px' }"
          class="topcard"
          :bordered="false"
          style="text-align: center"
        >
          <a-row :gutter="24">
            <a-col :span="12">
              <div class="totalEle-trend" ref="realPowerChart"></div>
              <span style="margin-top: 120px">实时发电功率(kW)</span>
            </a-col>
            <a-col :span="12">
              <div class="head-info" style="text-align: left; margin-top: 30px">
                <span style="line-height: 32px">并网电价：{{ stationInfo.fSubsidyprice }} 元/kW·h</span>
              </div>
              <div class="head-info" style="text-align: left">
                <span style="line-height: 32px">电站装机容量：{{ stationInfo.fInstalledcapacity }} kW</span>
              </div>
              <div class="head-info" style="text-align: left">
                <span style="line-height: 32px">逆变器数量：{{ stationInfo.inverterNum }} 个</span>
              </div>
              <div class="head-info" style="text-align: left">
                <span style="line-height: 32px">并网电压：{{ stationInfo.fGridvoltage }} V</span>
              </div>
              <div class="head-info" style="text-align: left">
                <span style="line-height: 32px">年利用小时数：{{ elecdetail.effectiveHours }} h</span>
              </div>
              <div class="head-info" style="text-align: left">
                <span style="line-height: 32px">总发电量：{{ totalEpiValue }} kWh</span>
              </div>
            </a-col>
          </a-row>
        </a-card>
      </a-col>

      <a-col :sm="24" :md="12" :xl="8" :style="{ padding: '0px 12px 0px 0px' }">
        <a-row>
          <a-col :span="24">
            <a-card
              :loading="loading"
              :body-style="{ padding: '10px 8px 8px' }"
              class="topcard"
              :bordered="false"
              title="发电量信息"
            >
              <a-row>
                <a-col :span="8">
                  <div class="head-info" :class="center && 'center'">
                    <span>日发电量</span>
                    <p>{{ elecdetail.powerByDay }} kW·h</p>
                  </div>
                </a-col>
                <a-col :span="8">
                  <div class="head-info" :class="center && 'center'">
                    <span>月发电量</span>
                    <p>{{ elecdetail.powerByMonth }} kW·h</p>
                  </div>
                </a-col>
                <a-col :span="8">
                  <div class="head-info" :class="center && 'center'">
                    <span>年发电量</span>
                    <p>{{ elecdetail.powerByYear }} kW·h</p>
                  </div>
                </a-col>
              </a-row>
              <a-divider style="margin: 8px 0" />
              <span class="head-title">收益信息</span>
              <a-row>
                <a-col :span="8">
                  <div class="head-info" :class="center && 'center'">
                    <span>日收益</span>
                    <p>{{ elecdetail.powerByDayProfit }} 元</p>
                  </div>
                </a-col>
                <a-col :span="8">
                  <div class="head-info" :class="center && 'center'">
                    <span>日收益</span>
                    <p>{{ elecdetail.powerByMonthProfit }} 元</p>
                  </div>
                </a-col>
                <a-col :span="8">
                  <div class="head-info" :class="center && 'center'">
                    <span>年收益</span>
                    <p>{{ elecdetail.powerByYearProfit }} 元</p>
                  </div>
                </a-col>
              </a-row>
            </a-card>
          </a-col>
        </a-row>
      </a-col>
      <a-col :sm="24" :md="12" :xl="8" :style="{ padding: '0px 12px 0px 0px' }">
        <a-row>
          <a-card
            :loading="loading"
            :body-style="{ padding: '10px 8px 8px' }"
            class="topcard"
            :bordered="false"
            title="视频监控"
          >
          </a-card>
        </a-row>
      </a-col>
    </a-row>
    <a-row>
      <a-col :sm="24" :md="12" :xl="8" :style="{ padding: '0px 16px 0px 0px' }">
        <a-card
          :loading="loading"
          :body-style="{ padding: '10px 8px 8px' }"
          class="middlecard"
          :bordered="false"
          title="气象信息"
        >
          <a-row>
            <a-col :span="8">
              <div class="head-info" :class="center && 'center'">
                <span>辐照度</span>
                <p>{{ envirInfo.irradiance }} {{ envirInfo.irradianceUnit }}</p>
              </div>
            </a-col>
            <a-col :span="8">
              <div class="head-info" :class="center && 'center'">
                <span>环境温湿度</span>
                <p>{{ envirInfo.temp }} {{ envirInfo.tempUnit }} / {{ envirInfo.humi }} {{ envirInfo.humiUnit }}</p>
              </div>
            </a-col>
            <a-col :span="8">
              <div class="head-info" :class="center && 'center'">
                <span>风速</span>
                <p>{{ envirInfo.windSpeed }} {{ envirInfo.windSpeedUnit }}</p>
              </div>
            </a-col>
          </a-row>
        </a-card>
      </a-col>
      <a-col :sm="24" :md="12" :xl="16">
        <a-card
          :body-style="{ padding: '0px 8px 8px' }"
          class="middlecard"
          :bordered="false"
          title="功率及发电量趋势"
          style="margin-left: -4px"
        >
          <div class="totalEle-trend" ref="powerChart"></div>
        </a-card>
      </a-col>
    </a-row>
    <a-row>
      <a-col :sm="24" :md="12" :xl="24" :style="{ padding: '12px 0px 0px 0px' }">        
        <div class="tri-colorLight" ref="flexDivGroup">
          <div class="item-title">逆变器信息</div>
          <a-divider style="margin: 8px 0" />
          <div class="item-content" ref="itemFlexDiv" v-for="(item, index) in invInfo" :key="index" cl>
            <div class="item-title">{{ item.fInvertername }}</div>
            <div class="item-title"></div>
            <div>厂家：{{ item.fManufacturername }}</div>
            <div>设备型号：{{ item.fProductmodel }}</div>
            <div>状态：{{ item.state }}</div>
            <div>额定交流功率：{{ item.fRatedoutputpower }} kW</div>
            <div>实时发电功率：{{ item.realGeneratingPower }} kW</div>
            <div>当日发电量：{{ item.powerByDay }} kW·h</div>
            <div>组件峰值功率：{{ item.fComponentpeakpower }} kWp</div>
            <router-link :to="'/equipment/info/detail/' + item.fInverterid">
              <!-- <router-link :to="'/system/dict-data/index/' + item.equipmentid"> -->
              <a-button type="success" plain style="margin-top: 10px"
                >查看详情
              </a-button>
            </router-link>
          </div>
          <!-- 优化布局 -->
          <!-- <div ref="completion" v-for="item in completionNumber" :key="'com' + item" class="completion"></div> -->
        </div>
        <!-- <a-card :loading="loading" :body-style="{ padding: '10px 8px 8px' }" :bordered="false" title="逆变器信息">
        </a-card> -->
      </a-col>
    </a-row>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import { httpAction, getAction } from '@/api/manage'
import { pvdata } from '../pvdata'

export default {
  name: 'IndexChart',
  components: {},
  data() {
    return {
      loading: true,
      center: null,
      elecdetail: {}, // 发电量信息
      envirInfo: {}, // 气象信息
      invInfo: [], // 逆变器信息
      stationInfo: {}, // 电站信息
      totalEpiValue: 0, // 总发电量
      times: [], // 功率及发电量趋势-时间
      powers: [], // 功率及发电量趋势-功率
      irradiances: [], // 功率及发电量趋势-辐照强度
    }
  },
  created() {
    setTimeout(() => {
      this.loading = !this.loading
    }, 1000)
  },
  mounted() {
    this.$nextTick(() => {
      setTimeout(() => {
        this.getTest()
      }, 1000)
      // this.getEnergyoverview()
    })
  },
  methods: {
    getTest() {
      var listData = pvdata.stationMonitorData
      console.log(listData)
      this.totalEpiValue = listData.totalEpiValue
      this.elecdetail = pvdata.pvDashboardData.elecdetail
      this.envirInfo = listData.envirInfo
      this.invInfo = listData.invInfo
      this.stationInfo = listData.stationInfo
      listData.dayPowerValue.forEach((i) => {
        this.times.push(i.fTime)
        this.powers.push(i.fP)
        this.irradiances.push(i.irradianceValue)
      })

      this.initRealPowerChart()
      this.initPowerChart()
    },
    initRealPowerChart() {
      var _this = this
      var chartDom = _this.$refs.realPowerChart
      var myChart = echarts.init(chartDom)

      var option = {
        tooltip: {
          formatter: '{a} <br/>{b} : {c}%',
        },
        series: [
          {
            name: 'Pressure',
            type: 'gauge',
            min: 0,
            max: 30,
            progress: {
              show: true,
            },
            detail: {
              formatter: '{value}',
            },
            radius: '100%', // 仪表盘放大/缩小
            axisLine: { lineStyle: { width: 5 } }, // 修改线段宽度
            data: [
              {
                value: _this.stationInfo.realPower,
                name: '功率',
              },
            ],
          },
        ],
      }

      option && myChart.setOption(option)

      window.addEventListener('resize', function () {
        myChart.resize()
      })
    },
    initPowerChart() {
      var _this = this
      var chartDom = _this.$refs.powerChart
      var myChart = echarts.init(chartDom)

      var option = {
        tooltip: {
          trigger: 'axis',
          position: function (pt) {
            return [pt[0], '20%']
          },
        },
        legend: {
          data: ['功率', '辐照度'],
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: _this.times,
        },
        yAxis: [
          {
            type: 'value',
            name: '功率',
            boundaryGap: [0, '30%'],
          },
          {
            type: 'value',
            name: '辐照度',
            boundaryGap: [0, '30%'],
          },
        ],
        // dataZoom: [
        //   {
        //     type: 'inside',
        //     start: 0,
        //     end: 100,
        //     xAxisIndex: 0,
        //   },
        //   {
        //     start: 0,
        //     end: 10,
        //   },
        //   {
        //     show: true,
        //     yAxisIndex: 0,
        //     filterMode: "empty",
        //     width: 30,
        //     height: "80%",
        //     right: "7%",
        //   },
        // ],
        series: [
          {
            name: '功率',
            type: 'line',
            symbol: 'none',
            sampling: 'lttb',
            itemStyle: {
              color: '#91CC75',
            },
            data: _this.powers,
          },
          {
            name: '辐照度',
            type: 'line',
            symbol: 'none',
            sampling: 'lttb',
            yAxisIndex: 1, // 依据哪儿个y周坐标显示数据
            itemStyle: {
              color: '#EE6666',
            },
            data: _this.irradiances,
          },
        ],
      }

      option && myChart.setOption(option)

      window.addEventListener('resize', function () {
        myChart.resize()
      })
    },
  },
}
</script>

<style lang="less" scoped>
.chart-card-header {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 50px;

  .meta {
    position: relative;
    overflow: hidden;
    //   width: 100%;
    color: #ffffff;
    font-size: 20px;
    line-height: 38px;
    float: left;
  }
}

.chart-card-action {
  cursor: pointer;
  position: absolute;
  top: 0;
  right: 0;
}

.chart-card-footer {
  border-top: 1px solid #e8e8e8;
  padding-top: 9px;
  margin-top: 8px;

  > * {
    position: relative;
  }

  .field {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin: 0;
  }
}

.chart-card-content {
  margin-bottom: 12px;
  position: relative;
  height: 46px;
  width: 100%;

  .content-fix {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
  }
}

.total {
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-all;
  white-space: nowrap;
  color: #ffffff;
  // margin-top: 4px;
  margin-bottom: 0;
  font-size: 30px;
  line-height: 38px;
  height: 38px;
  float: right;
}
.circle-cust {
  position: relative;
  top: 28px;
  left: -100%;
}
.extra-wrapper {
  line-height: 55px;
  padding-right: 24px;

  .extra-item {
    display: inline-block;
    margin-right: 24px;

    a {
      margin-left: 24px;
    }
  }
}

/* 首页访问量统计 */
.head-info {
  position: relative;
  text-align: center;
  padding: 0 32px 0 0;
  min-width: 125px;

  &.center {
    text-align: center;
    padding: 0 32px;
  }

  span {
    color: rgba(0, 0, 0, 0.45);
    display: inline-block;
    font-size: 0.95rem;
    line-height: 42px;
    margin-bottom: 4px;
  }
  p {
    line-height: 42px;
    margin: 0;
    a {
      font-weight: 600;
      font-size: 1rem;
    }
  }
  .bm-view {
    width: 100%;
    height: 300px;
  }
}
.head-title {
  font-size: 15px;
  margin-left: 20px;
}

.totalEle-trend {
  height: 220px;
}
.topcard {
  height: 295px;
}
.middlecard {
  height: 280px;
}
  // 三色灯
  .tri-colorLight {
    display: flex;
    background: #fff;
    justify-content: space-around;
    align-items: center;
    flex-wrap: wrap;
    // width: 20%;
    .item-container {
      padding: 10px;
      box-sizing: border-box;
    }
    .item-content {
      width: 254px;
      border: 2px solid #314977;
      color: #63b4ca;
      // padding: 16px 50px 20px;
      padding-top: 16px;
      padding-bottom: 20px;
      margin: 10px 6px;
      box-shadow: 0 2px 10px 2px rgba(59, 78, 128, 0.5) inset;
      text-align: center;
      box-sizing: border-box;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      .item-title {
        font-weight: bold;
      }
      .light-con {
        margin-top: 20px;
        display: flex;
      }
      .item-light {
        width: 20px;
        height: 20px;
        border-radius: 100%;
        margin: 0 15px;
        background: #7c7ea6;
      }
      .green {
        background-color: #0df708;
        box-shadow: 0 0 18px 6px rgba(13, 247, 8, 0.5);
      }
      .yellow {
        background-color: #f8fa12;
        box-shadow: 0 0 18px 6px rgba(248, 250, 18, 0.5);
      }
      .red {
        background-color: #fb0301;
        box-shadow: 0 0 18px 6px rgba(251, 3, 1, 0.5);
      }
    }
    .item_content_rad {
      border-radius: 18px;
    }
    .completion {
      width: 254px;
      margin: 10px 6px;
    }
  }
</style>