energy_storage/web/src/views/sub/Home.vue

<template>
  <div class="Home">
    <div class="content-left">
      <div
        v-for="item in leftList"
        :key="item.componentId"
        :class="`grid-item ${item.class}`"
      
      >
        <div class="tool">
          <div class="title">
            <i class="iconfont icon-hebing linear-text"></i>
            <span class="linear-text">{{ item.title }}</span>
          </div>
        </div>

        <component
          :is="item.componentId"
          :info-key="item.infoKey"
          :device-info="deviceInfo[item.infoKey]"
          :total="item.infoKey === 'onLineTotal' ? deviceInfo.onLine : deviceInfo.allTotal"
        ></component>
      </div>
    </div>
    <div class="tianditu">
      <Map @changeStation="getCurrentStation"></Map>
    </div>
    <div class="content-right">
      <div
        v-for="item in rightList"
        :key="item.componentId"
        :class="`grid-item ${item.class}`"
      
      >
        <div class="tool">
          <div class="title">
            <i class="iconfont icon-hebing linear-text"></i>
            <span class="linear-text">{{ item.title }}</span>
          </div>
        </div>
        <component
          :is="item.componentId"
          :device-info="deviceInfo[item.infoKey]"
          :total="item.infoKey === 'onLineTotal' ? deviceInfo.onLine : deviceInfo.allTotal"
        ></component>
      </div>
    </div>
  </div>
</template>

<script>
import onLine from '@/components/Home/onLine.vue'
import Operational from '@/components/Home/Operational.vue'
import Energy from '@/components/Home/Energy.vue'
import Charge from '@/components/Home/Charge.vue'
import Pv from '@/components/Home/Pv.vue'
import Alarm from '@/components/Home/Alarm.vue'
import Map from '@/components/Home/Map.vue'
import { getReq, postReq } from '@/request/api'
export default {
  name: 'Home',
  components: { Map },
  data() {
    return {
      showFlag: false,

      stationId: null,
      deviceInfo: {},
      list: [
        {
          title: '运行状况',
          class: 'online-status',
          componentId: onLine,
          infoKey: 'onLineTotal'
        },
        {
          title: '运行分析',
          class: 'stats-cards',
          componentId: Operational,
          infoKey: ''
        },
        {
          title: '储能设备',
          class: 'energy-status',
          componentId: Energy,
          infoKey: 'energy'
        },
        {
          title: '充电设备',
          class: 'charge-analysis',
          componentId: Charge,
          infoKey: 'charge'
        },

        {
          title: '光伏设备',
          class: 'work-order',
          componentId: Pv,
          infoKey: 'pv'
        },
        {
          title: '告警信息',
          class: 'alarm-stats',
          componentId: Alarm,
          infoKey: 'alarm'
        }
      ],

      sysName: '',
      user: JSON.parse(localStorage.getItem('user')) || {}
    }
  },
  computed: {
    leftList() {
      return this.list.filter((_, index) => index % 2 === 0).slice(0, 3) // 左列取前3个偶数索引
    },
    rightList() {
      return this.list.filter((_, index) => index % 2 !== 0).slice(0, 3) // 右列取前3个奇数索引
    }
  },
  async mounted() {
    await Promise.all([
      // (this.deviceInfo = {
      //   alarm: [
      //     {
      //       date: '2025-08-30',
      //       key1: 10,
      //       key2: 0,
      //       key3: 15,
      //       key4: 5
      //     },
      //     {
      //       date: '2025-08-29',
      //       key1: 8,
      //       key2: 5,
      //       key3: 5,
      //       key4: 7
      //     },
      //     {
      //       date: '2025-08-28',
      //       key1: 0,
      //       key2: 10,
      //       key3: 20,
      //       key4: 4
      //     },
      //     {
      //       date: '2025-08-27',
      //       key1: 10,
      //       key2: 0,
      //       key3: 15,
      //       key4: 5
      //     },
      //     {
      //       date: '2025-08-26',
      //       key1: 10,
      //       key2: 0,
      //       key3: 15,
      //       key4: 5
      //     },
      //     {
      //       date: '2025-08-25',
      //       key1: 10,
      //       key2: 0,
      //       key3: 15,
      //       key4: 5
      //     },
      //     {
      //       date: '2025-08-24',
      //       key1: 10,
      //       key2: 0,
      //       key3: 15,
      //       key4: 5
      //     },
      //     {
      //       date: '2025-08-23',
      //       key1: 10,
      //       key2: 0,
      //       key3: 15,
      //       key4: 5
      //     },
      //     {
      //       date: '2025-08-22',
      //       key1: 10,
      //       key2: 0,
      //       key3: 15,
      //       key4: 5
      //     },
      //     {
      //       date: '2025-08-21',
      //       key1: 10,
      //       key2: 0,
      //       key3: 15,
      //       key4: 5
      //     },
      //     {
      //       date: '2025-08-20',
      //       key1: 10,
      //       key2: 0,
      //       key3: 15,
      //       key4: 5
      //     },
      //     {
      //       date: '2025-08-19',
      //       key1: 10,
      //       key2: 0,
      //       key3: 15,
      //       key4: 5
      //     },
      //     {
      //       date: '2025-08-18',
      //       key1: 10,
      //       key2: 0,
      //       key3: 15,
      //       key4: 5
      //     },
      //     {
      //       date: '2025-08-17',
      //       key1: 10,
      //       key2: 0,
      //       key3: 15,
      //       key4: 5
      //     }
      //   ],
      //   energy: [
      //     {
      //       date: '2025-08-30',
      //       key1: '2',
      //       key2: '2'
      //     },
      //     {
      //       date: '2025-08-29',
      //       key1: '2',
      //       key2: '2'
      //     },
      //     {
      //       date: '2025-08-28',
      //       key1: '2',
      //       key2: '2'
      //     },
      //     {
      //       date: '2025-08-27',
      //       key1: '2',
      //       key2: '2'
      //     },
      //     {
      //       date: '2025-08-26',
      //       key1: '2',
      //       key2: '2'
      //     },
      //     {
      //       date: '2025-08-25',
      //       key1: '2',
      //       key2: '2'
      //     },
      //     {
      //       date: '2025-08-24',
      //       key1: '2',
      //       key2: '2'
      //     }
      //   ],
      //   charge: [
      //     {
      //       date: '2025-08-30',
      //       key1: '2',
      //       key2: '2'
      //     },
      //     {
      //       date: '2025-08-29',
      //       key1: '2',
      //       key2: '2'
      //     },
      //     {
      //       date: '2025-08-28',
      //       key1: '2',
      //       key2: '2'
      //     },
      //     {
      //       date: '2025-08-27',
      //       key1: '2',
      //       key2: '2'
      //     },
      //     {
      //       date: '2025-08-26',
      //       key1: '2',
      //       key2: '2'
      //     },
      //     {
      //       date: '2025-08-25',
      //       key1: '2',
      //       key2: '2'
      //     },
      //     {
      //       date: '2025-08-24',
      //       key1: '2',
      //       key2: '2'
      //     }
      //   ],
      //   pv: [
      //     {
      //       date: '2025-08-30',
      //       key1: '2',
      //       key2: '2'
      //     },
      //     {
      //       date: '2025-08-29',
      //       key1: '2',
      //       key2: '2'
      //     },
      //     {
      //       date: '2025-08-28',
      //       key1: '2',
      //       key2: '2'
      //     },
      //     {
      //       date: '2025-08-27',
      //       key1: '2',
      //       key2: '2'
      //     },
      //     {
      //       date: '2025-08-26',
      //       key1: '2',
      //       key2: '2'
      //     },
      //     {
      //       date: '2025-08-25',
      //       key1: '2',
      //       key2: '2'
      //     },
      //     {
      //       date: '2025-08-24',
      //       key1: '2',
      //       key2: '2'
      //     }
      //   ],
      //   allTotal: {}
      // }),
      this.getOnLineList(),
      this.getStatTotalList(),
      this.getStatDayList(1),
      this.getStatDayList(2),
      this.getStatDayList(3)
    ])
    // this.showFlag=true
  },

  methods: {
    getCurrentStation(e) {
      console.log(e, 'getCurrentStation')
      this.stationId = e
    },
    // 查询系统统计信息
    async getOnLineList() {
      try {
        // token: 用户TOKEN
        const res = await getReq('/api/queryStatSystem')
        if (res.errcode === 0) {
          this.deviceInfo.onLine = JSON.parse(JSON.stringify(res.data))
          this.deviceInfo.onLine.runDays = this.getRunDays(res.data.launch_date)
          console.log(JSON.parse(JSON.stringify(res.data)), this.deviceInfo.onLine, '111111111111')
        } else {
          throw res
        }
      } catch (error) {
        this.deviceInfo.onLine = {}
      }
    },
    getRunDays(date) {
      const launchDate = new Date(date)
      const today = new Date() // 替换为当前日期

      const timeDiff = today - launchDate // 毫秒差
      const daysRun = Math.ceil(timeDiff / (1000 * 60 * 60 * 24)) // 转换为天数

      console.log(`从 2023-01-01 到今天已经运行了 ${daysRun} 天`)

      return daysRun
    },
    // 查询系统累计统计信息
    async getStatTotalList() {
      try {
        // token: 用户TOKEN
        // date:日期
        // station_id:场站ID，为0或不传查询所有场站总计
        // category:类别，1:储能设备,2:充电设备,3:光伏设备,为0或不传查询所有类别总计
        const query = {
          date: new Date(),
          stationId: this.stationId,
          category: 0
        }
        const res = await getReq('/api/queryStatTotal', query)
        if (res.errcode === 0) {
          this.deviceInfo.allTotal = res.data
          const { income_charge: incomeCharge, income_elect: incomeElect } =
            this.deviceInfo.allTotal
          this.deviceInfo.allTotal.incomeTotal = +incomeCharge + +incomeElect
          console.log(
            this.deviceInfo.allTotal.incomeTotal,
            incomeCharge,
            incomeElect,
            ' this.deviceInfo.allTotal.incomeTotal'
          )
        } else {
          throw res
        }
      } catch (error) {
        this.deviceInfo.allTotal = {
          storageElectIn: 2,
          storageElectOut: 5,
          chargeElect: 4,
          chargeNum: 5,
          incomeCharge: 7,
          incomeElect: 7,
          solarElectGen: 7,
          solarElectGrid: 7
        }
        this.deviceInfo.allTotal.incomeTotal =
          this.deviceInfo.allTotal.incomeCharge + this.deviceInfo.allTotal.incomeElect
      }
    },
    getDateDaysAgo(daysAgo) {
      const date = new Date()
      date.setDate(date.getDate() - daysAgo)

      const year = date.getFullYear()
      const month = String(date.getMonth() + 1).padStart(2, '0')
      const day = String(date.getDate()).padStart(2, '0')

      return `${year}-${month}-${day}`
    },

    // 示例：获取7天前的日期
    // 查询场站日统计信息
    async getStatDayList(category) {
      try {
        // station_id: 场站ID
        // category: 类别： 1：储能设备,2:充电设备,3:光伏设备
        // start_date：开始日期，格式：yyyy-mm-dd
        // end_date：结束日期，格式：yyyy-mm-dd
        const query = {
          stationId: this.stationId,
          category,
          start_date: this.getDateDaysAgo(7 - 1),
          end_date: this.getDateDaysAgo(0)
        }
        const arr = { 1: 'energy', 2: 'charge', 3: 'pv' }
        const res = await getReq('/api/queryStatDayList', query)
        if (res.errcode === 0) {
          this.list.forEach((item) => {
            this.deviceInfo[arr[category]] = res.data
          })
        } else {
          throw res
        }
      } catch (error) {
        console.log(error)
      }
    }
  }
}
</script>

<style scoped lang="scss">
.Home {
  color: #fff;
  height: 100%;
  padding: 10px;
  display: flex;
  justify-content: space-between;
}

.tianditu {
  width: calc(100% - 520px * 2);
  height: 100%;
  margin: 0px 15px;
}

.content-left,
.content-right {
  height: 100%;
  width: 520px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
}

.grid-item {
  box-sizing: border-box;
  width: 100%;
  height: calc(33% - 10px);
  z-index: 20;

  .tool {
    background: linear-gradient(180deg, rgba(0, 10, 6, 0) 0%, rgba(0, 76, 112, 1) 100%);
    border-bottom: 2px solid transparent;
    border-image: linear-gradient(90deg, rgba(3, 220, 255, 1) 0%, rgba(0, 19, 13, 0) 100%) 0 0 2 0;

    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 45px;

    .linear-text {
      background: linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(40, 235, 231, 1) 100%);
      color: transparent;
      -webkit-background-clip: text;
      background-clip: text;
      font-size: 16px;
      font-weight: 400;
      margin-left: 6px;
    }

    .text_right {
      display: flex;
      font-size: 11px;

      div {
        margin-right: 6px;
      }

      .mark {
        margin: 0px 2px;
        font-weight: bold;
        color: #43cf7c;
        font-size: 14px;
      }
    }
  }

  .title {
    display: flex;

    i {
      margin-left: 10px;
    }

    .text {
      margin-left: 20px;
      font-size: 16px;
      font-weight: 700;
      background: linear-gradient(
        90deg,
        rgba(0, 186, 173, 0.15) 0%,
        rgba(61, 254, 250, 0.15) 49.2%,
        rgba(61, 254, 250, 0) 100%
      );
      -webkit-background-clip: text;
      display: inline-block;
      background-clip: text;
      color: transparent;
    }
  }
}
</style>