-
-
+
@@ -36,25 +56,28 @@ 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},
+ components: { Map },
data() {
return {
+ showFlag: false,
+
+ stationId: null,
deviceInfo: {},
list: [
{
title: '运行状况',
class: 'online-status',
componentId: onLine,
- infoKey: 'onLine'
+ infoKey: 'onLineTotal'
},
{
title: '运行分析',
class: 'stats-cards',
componentId: Operational,
- infoKey: 'stats'
+ infoKey: ''
},
{
title: '储能设备',
@@ -96,222 +119,343 @@ export default {
}
},
async mounted() {
- 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'
- }
- ]
- }
+ 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: {}
+ 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)
+ }
+ }
+ }
}
@@ -325,10 +469,9 @@ export default {
}
.tianditu {
- width: calc(100% - 520px * 2) ;
+ width: calc(100% - 520px * 2);
height: 100%;
margin: 0px 15px;
-
}
.content-left,
diff --git a/web/vue.config.js b/web/vue.config.js
index ec5768a..bbefb03 100644
--- a/web/vue.config.js
+++ b/web/vue.config.js
@@ -9,27 +9,13 @@ module.exports = defineConfig({
// 静态资源目录
assetsDir: 'static',
devServer: {
- hot: true,
- compress: true,
- allowedHosts: 'all',
- headers: {
- // 1. 允许开发环境跨域
- 'Access-Control-Allow-Origin': '*'
- },
- historyApiFallback: true,
- open: false,
- port: 8080,
- client: {
- overlay: {
- runtimeErrors: (error) => {
- const ignoreErrors = [
- 'ResizeObserver loop limit exceeded',
- 'ResizeObserver loop completed with undelivered notifications.'
- ]
- if (ignoreErrors.includes(error.message)) {
- return false
- }
- return true
+ proxy: {
+ '/api': {
+ // 代理前缀，可以自定义（如 '/api'）
+ target: 'http://192.168.0.187:19801', // 目标服务器地址
+ changeOrigin: true, // 是否改变请求源（跨域必备）
+ pathRewrite: {
+ '^/api': '' // 重写路径，去掉 '/api' 前缀
}
}
},