光伏功能页面
This commit is contained in:
huangjp
508
src/views/dashboard-pv/components/top-left/common-mwh.vue
Normal file
508
src/views/dashboard-pv/components/top-left/common-mwh.vue
Normal file
@ -0,0 +1,508 @@
|
||||
<template>
|
||||
<div class="top-left-box">
|
||||
<ItemBox :title="$t('dashboard.stationData')">
|
||||
<div slot="header">
|
||||
<div class="header-right-box">
|
||||
<div class="header-title" :class="{'active':currentIndex === 0}" @click="changeType(0)">{{ $t('dashboard.dataOverView') }}</div>
|
||||
<div class="header-title" :class="{'active':currentIndex === 1}" @click="changeType(1)">{{ $t('dashboard.stationInfo') }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="currentIndex === 0" v-loading="loading" class="box">
|
||||
<StationData :table-data="overflowData" />
|
||||
</div>
|
||||
<div v-else v-loading="loading" class="box">
|
||||
<StationData :table-data="totalData" />
|
||||
</div>
|
||||
<el-dialog
|
||||
:append-to-body="true"
|
||||
title="日充放统计规则"
|
||||
:visible.sync="ruleShow"
|
||||
center
|
||||
width="30%"
|
||||
:close-on-click-modal="false"
|
||||
>
|
||||
<el-form :model="timeForm" label-width="120px">
|
||||
<el-form-item label="前一日" class="select-box">
|
||||
<el-select
|
||||
v-model="timeForm.beforeTime"
|
||||
style="width:100%"
|
||||
placeholder="请选择"
|
||||
@change="selectRuleTime"
|
||||
>
|
||||
<template slot="prefix">
|
||||
<span style="padding-left: 5px;">
|
||||
<i class="el-icon-time" />
|
||||
</span>
|
||||
</template>
|
||||
<el-option
|
||||
v-for="item in timeList"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="今日">
|
||||
<el-time-picker
|
||||
v-model="timeForm.nowDayTime"
|
||||
style="width:100%"
|
||||
:clearable="false"
|
||||
readonly
|
||||
placeholder="请选择时间"
|
||||
value-format="HH:mm:ss"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button @click="cancelRule">取 消</el-button>
|
||||
<el-button
|
||||
type="primary"
|
||||
:loading="timeSubmitLoading"
|
||||
@click="sureRule"
|
||||
>确 定</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</ItemBox>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { GetPcsStationData, addElecMeterConfig,
|
||||
updateElecMeterConfig } from '@/api/home-page/index'
|
||||
import { GetRAPcsTotalData } from '@/api/homePage-integrated/index'
|
||||
import { ToDegrees } from '@/utils/index'
|
||||
import dayImg from '../../../../assets/station-data/run-day.png'
|
||||
export default {
|
||||
name: 'Index',
|
||||
props: {
|
||||
stationId: {
|
||||
type: Number,
|
||||
default: 0
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
dayImg,
|
||||
currentIndex: 0,
|
||||
overflowData: [{
|
||||
name: this.$t('dashboard.safeDays'),
|
||||
id: 'operationDays',
|
||||
picture: dayImg,
|
||||
unit: this.$t('dashboard.day'),
|
||||
value: 0
|
||||
}, {
|
||||
name: this.$t('dashboard.totalCapacity'),
|
||||
id: 'totalCapacity',
|
||||
picture: dayImg,
|
||||
unit: 'kWh',
|
||||
value: 0
|
||||
}, {
|
||||
name: this.$t('dashboard.systemConversionEfficiency'),
|
||||
id: 'systemEfficiency',
|
||||
picture: dayImg,
|
||||
unit: '%',
|
||||
value: 0
|
||||
}, {
|
||||
name: this.$t('dashboard.currentPower'),
|
||||
id: 'currentPower',
|
||||
picture: dayImg,
|
||||
unit: 'kW',
|
||||
value: 0
|
||||
}, {
|
||||
name: this.$t('dashboard.totalCharge'),
|
||||
id: 'totalChargeElec',
|
||||
picture: dayImg,
|
||||
unit: 'MWh',
|
||||
value: 0
|
||||
}, {
|
||||
name: this.$t('dashboard.totalDischarge'),
|
||||
id: 'totalDischargeElec',
|
||||
picture: dayImg,
|
||||
unit: 'MWh',
|
||||
value: 0
|
||||
}, {
|
||||
name: this.$t('dashboard.dailyCharge'),
|
||||
id: 'dailyChargeElec',
|
||||
picture: dayImg,
|
||||
unit: 'MWh',
|
||||
value: 0,
|
||||
click: true
|
||||
}, {
|
||||
name: this.$t('dashboard.dailyDischarge'),
|
||||
id: 'dailyDischargeElec',
|
||||
picture: dayImg,
|
||||
unit: 'MWh',
|
||||
value: 0
|
||||
}],
|
||||
totalData: [{
|
||||
name: this.$t('dashboard.stationName'),
|
||||
id: 'name',
|
||||
picture: dayImg,
|
||||
value: 0
|
||||
}, {
|
||||
name: this.$t('dashboard.stationType'),
|
||||
id: 'type',
|
||||
picture: dayImg,
|
||||
value: 0
|
||||
}, {
|
||||
name: this.$t('dashboard.stationLocation'),
|
||||
id: 'address',
|
||||
picture: dayImg,
|
||||
value: 0
|
||||
},
|
||||
{
|
||||
name: this.$t('dashboard.commTime'),
|
||||
id: 'createTime',
|
||||
picture: dayImg,
|
||||
value: 0
|
||||
},
|
||||
{
|
||||
name: this.$t('dashboard.log'),
|
||||
id: 'longitude',
|
||||
picture: dayImg,
|
||||
value: 0
|
||||
},
|
||||
{
|
||||
name: this.$t('dashboard.lat'),
|
||||
id: 'latitude',
|
||||
picture: dayImg,
|
||||
value: 0
|
||||
}],
|
||||
stationType: [],
|
||||
loading: false,
|
||||
ruleShow: false,
|
||||
timeForm: {
|
||||
beforeTime: undefined,
|
||||
nowDayTime: undefined
|
||||
},
|
||||
timeSubmitLoading: false,
|
||||
timeOperate: 1, // 1 新增 2 编辑
|
||||
timeList: []
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
stationTypeList() {
|
||||
return this.$store.getters.dicts['stationType'] || []
|
||||
},
|
||||
language() {
|
||||
return this.$store.getters.language || undefined
|
||||
}
|
||||
|
||||
},
|
||||
watch: {
|
||||
dailyTime: {
|
||||
handler(val) {
|
||||
if (val) {
|
||||
this.timeForm = val
|
||||
this.timeOperate = val.timeOperate
|
||||
this.GetPcsTotalData()
|
||||
}
|
||||
},
|
||||
deep: true,
|
||||
immediate: true
|
||||
},
|
||||
language: {
|
||||
handler() {
|
||||
this.overflowData = [{
|
||||
name: this.$t('dashboard.safeDays'),
|
||||
id: 'operationDays',
|
||||
picture: dayImg,
|
||||
unit: this.$t('dashboard.day'),
|
||||
value: 0
|
||||
}, {
|
||||
name: this.$t('dashboard.totalCapacity'),
|
||||
id: 'totalCapacity',
|
||||
picture: dayImg,
|
||||
unit: 'kWh',
|
||||
value: 0
|
||||
}, {
|
||||
name: this.$t('dashboard.systemConversionEfficiency'),
|
||||
id: 'systemEfficiency',
|
||||
picture: dayImg,
|
||||
unit: '%',
|
||||
value: 0
|
||||
}, {
|
||||
name: this.$t('dashboard.currentPower'),
|
||||
id: 'currentPower',
|
||||
picture: dayImg,
|
||||
unit: 'kW',
|
||||
value: 0
|
||||
}, {
|
||||
name: this.$t('dashboard.totalCharge'),
|
||||
id: 'totalChargeElec',
|
||||
picture: dayImg,
|
||||
unit: 'MWh',
|
||||
value: 0
|
||||
}, {
|
||||
name: this.$t('dashboard.totalDischarge'),
|
||||
id: 'totalDischargeElec',
|
||||
picture: dayImg,
|
||||
unit: 'MWh',
|
||||
value: 0
|
||||
}, {
|
||||
name: this.$t('dashboard.dailyCharge'),
|
||||
id: 'dailyChargeElec',
|
||||
picture: dayImg,
|
||||
unit: 'MWh',
|
||||
value: 0,
|
||||
click: true
|
||||
}, {
|
||||
name: this.$t('dashboard.dailyDischarge'),
|
||||
id: 'dailyDischargeElec',
|
||||
picture: dayImg,
|
||||
unit: 'MWh',
|
||||
value: 0
|
||||
}]
|
||||
this.totalData = [{
|
||||
name: this.$t('dashboard.stationName'),
|
||||
id: 'name',
|
||||
picture: dayImg,
|
||||
value: 0
|
||||
}, {
|
||||
name: this.$t('dashboard.stationType'),
|
||||
id: 'type',
|
||||
picture: dayImg,
|
||||
value: 0
|
||||
}, {
|
||||
name: this.$t('dashboard.stationLocation'),
|
||||
id: 'address',
|
||||
picture: dayImg,
|
||||
value: 0
|
||||
},
|
||||
{
|
||||
name: this.$t('dashboard.commTime'),
|
||||
id: 'createTime',
|
||||
picture: dayImg,
|
||||
value: 0
|
||||
},
|
||||
{
|
||||
name: this.$t('dashboard.log'),
|
||||
id: 'longitude',
|
||||
picture: dayImg,
|
||||
value: 0
|
||||
},
|
||||
{
|
||||
name: this.$t('dashboard.lat'),
|
||||
id: 'latitude',
|
||||
picture: dayImg,
|
||||
value: 0
|
||||
}]
|
||||
},
|
||||
deep: true
|
||||
}
|
||||
},
|
||||
created() {
|
||||
// console.log(this.stationTypeList)
|
||||
this.getTimeList()
|
||||
},
|
||||
mounted() { },
|
||||
methods: {
|
||||
getStationTypeName(item) {
|
||||
const typeIndex = this.stationTypeList.findIndex(t => Number(t.value) === Number(item))
|
||||
return this.stationTypeList[typeIndex].label
|
||||
},
|
||||
changeType(val) {
|
||||
this.currentIndex = val
|
||||
},
|
||||
getData() {
|
||||
this.GetPcsStationData()
|
||||
this.GetPcsTotalData()
|
||||
},
|
||||
async GetPcsStationData() {
|
||||
this.loading = true
|
||||
const params = {
|
||||
stationId: this.stationId
|
||||
}
|
||||
try {
|
||||
const { data } = await GetPcsStationData(params)
|
||||
this.totalData.forEach((item) => {
|
||||
item.value = data[item.id]
|
||||
if (item.id === 'type') {
|
||||
item.value = this.getStationTypeName(item.value)
|
||||
}
|
||||
if (item.id === 'longitude') {
|
||||
item.value = ToDegrees(item.value, 1)
|
||||
}
|
||||
if (item.id === 'latitude') {
|
||||
item.value = ToDegrees(item.value, 2)
|
||||
}
|
||||
})
|
||||
} catch (error) {
|
||||
// console.log(error);
|
||||
} finally {
|
||||
this.loading = false
|
||||
}
|
||||
},
|
||||
|
||||
async GetPcsTotalData() {
|
||||
this.loading = true
|
||||
const params = {
|
||||
stationId: this.stationId
|
||||
}
|
||||
try {
|
||||
const { data } = await GetRAPcsTotalData(params)
|
||||
this.overflowData.forEach((item) => {
|
||||
if (data[item.id]) {
|
||||
item.value = data[item.id]
|
||||
}
|
||||
if (item.id === 'systemEfficiency') {
|
||||
item.value = (item.value * 100).toFixed(2)
|
||||
}
|
||||
if (item.id === 'totalChargeElec' && item.value >= 1E4) {
|
||||
item.unit = 'MWh'
|
||||
item.value = (Number(item.value) / 1E3).toFixed(2) + ''
|
||||
}
|
||||
if (item.id === 'totalDischargeElec' && item.value >= 1E4) {
|
||||
item.unit = 'MWh'
|
||||
item.value = (Number(item.value) / 1E3).toFixed(2) + ''
|
||||
}
|
||||
if (item.id === 'dailyChargeElec' && item.value >= 1E4) {
|
||||
item.unit = 'MWh'
|
||||
item.value = (Number(item.value) / 1E3).toFixed(2) + ''
|
||||
}
|
||||
if (item.id === 'dailyDischargeElec' && item.value >= 1E4) {
|
||||
item.unit = 'MWh'
|
||||
item.value = (Number(item.value) / 1E3).toFixed(2) + ''
|
||||
}
|
||||
if (item.id === 'currentPower' && item.value >= 1E4) {
|
||||
item.unit = 'MW'
|
||||
item.value = (Number(item.value) / 1E3).toFixed(2) + ''
|
||||
}
|
||||
})
|
||||
} catch (error) {
|
||||
// console.log(error);
|
||||
} finally {
|
||||
this.loading = false
|
||||
}
|
||||
},
|
||||
getTimeList() {
|
||||
for (let i = 0; i < 24; i++) {
|
||||
this.timeList.push({
|
||||
label: `${i < 10 ? '0' + i : i}:00:00`,
|
||||
value: `${i < 10 ? '0' + i : i}:00:00`
|
||||
})
|
||||
}
|
||||
},
|
||||
setRule() {
|
||||
this.ruleShow = true
|
||||
},
|
||||
selectRuleTime(val) {
|
||||
this.timeForm.nowDayTime = this.getEightTime('2020-07-28 ' + val)
|
||||
},
|
||||
cancelRule() {
|
||||
this.ruleShow = false
|
||||
},
|
||||
sureRule() {
|
||||
if (this.timeOperate === 1) {
|
||||
// 新增
|
||||
this.timeSubmitLoading = true
|
||||
const param = {
|
||||
stationId: this.stationId,
|
||||
beginTime: this.timeForm.beforeTime,
|
||||
endTime: this.timeForm.nowDayTime
|
||||
}
|
||||
addElecMeterConfig(param)
|
||||
.then((res) => {
|
||||
this.$message.success('新增成功')
|
||||
this.ruleShow = false
|
||||
this.$emit('updateTime')
|
||||
})
|
||||
.finally(() => {
|
||||
this.timeSubmitLoading = false
|
||||
})
|
||||
} else {
|
||||
// 编辑
|
||||
this.timeSubmitLoading = true
|
||||
const param = {
|
||||
stationId: this.stationId,
|
||||
beginTime: this.timeForm.beforeTime,
|
||||
endTime: this.timeForm.nowDayTime,
|
||||
id: this.timeForm.id
|
||||
}
|
||||
updateElecMeterConfig(param)
|
||||
.then((res) => {
|
||||
this.$message.success('更新成功')
|
||||
this.ruleShow = false
|
||||
this.$emit('updateTime')
|
||||
})
|
||||
.finally(() => {
|
||||
this.timeSubmitLoading = false
|
||||
})
|
||||
}
|
||||
},
|
||||
/**
|
||||
* 指定时间的多少小时或多少分钟之后的时间
|
||||
* @param {*} str 2020-07-28 15:00:00
|
||||
*/
|
||||
getEightTime(str) {
|
||||
const t = new Date(str).getTime() + 24 * 60 * 60 * 1000 - 1 // 24小时 * 60分钟 * 60秒 * 1000
|
||||
const d = new Date(t)
|
||||
let theMonth = d.getMonth() + 1
|
||||
let theDate = d.getDate()
|
||||
let theHours = d.getHours()
|
||||
let theMinutes = d.getMinutes()
|
||||
let theSecond = d.getSeconds()
|
||||
if (theMonth < 10) {
|
||||
theMonth = '0' + theMonth
|
||||
}
|
||||
if (theDate < 10) {
|
||||
theDate = '0' + theDate
|
||||
}
|
||||
if (theHours < 10) {
|
||||
theHours = '0' + theHours
|
||||
}
|
||||
if (theMinutes < 10) {
|
||||
theMinutes = '0' + theMinutes
|
||||
}
|
||||
if (theSecond < 10) {
|
||||
theSecond = '0' + theSecond
|
||||
}
|
||||
// let date = d.getFullYear() + '-' + theMonth + '-' + theDate
|
||||
const time = theHours + ':' + theMinutes + ':' + theSecond
|
||||
// let Spare = date + ' ' + time
|
||||
// console.log(date)
|
||||
// console.log(time)
|
||||
// console.log(Spare)
|
||||
return time
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
::v-deep .item-con{
|
||||
overflow:auto;
|
||||
}
|
||||
.top-left-box{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
.header-right-box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.header-title {
|
||||
white-space: nowrap;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
letter-spacing: 0em;
|
||||
color: rgba(206, 235, 255, 0.5);
|
||||
padding: 0 10px;
|
||||
cursor: pointer;
|
||||
font-family: Source Han Sans CN;
|
||||
|
||||
&.active{
|
||||
color: #ffffff;
|
||||
background: linear-gradient(90deg, rgba(0,148,255,0.00) 0%, rgba(0,148,255,0.43) 51%, rgba(0,148,255,0.00) 99%);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.box{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 10px;
|
||||
padding-bottom: 0;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
</style>
|
||||
509
src/views/dashboard-pv/components/top-left/common.vue
Normal file
509
src/views/dashboard-pv/components/top-left/common.vue
Normal file
@ -0,0 +1,509 @@
|
||||
<template>
|
||||
<div class="top-left-box">
|
||||
<ItemBox :title="$t('dashboard.stationData')">
|
||||
<div slot="header">
|
||||
<div class="header-right-box">
|
||||
<div class="header-title" :class="{'active':currentIndex === 0}" @click="changeType(0)">{{ $t('dashboard.dataOverView') }}</div>
|
||||
<div class="header-title" :class="{'active':currentIndex === 1}" @click="changeType(1)">{{ $t('dashboard.stationInfo') }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="currentIndex === 0" v-loading="loading" class="box">
|
||||
<StationData :table-data="overflowData" />
|
||||
</div>
|
||||
<div v-else v-loading="loading" class="box">
|
||||
<StationData :table-data="totalData" />
|
||||
</div>
|
||||
<el-dialog
|
||||
:append-to-body="true"
|
||||
title="日充放统计规则"
|
||||
:visible.sync="ruleShow"
|
||||
center
|
||||
width="30%"
|
||||
:close-on-click-modal="false"
|
||||
>
|
||||
<el-form :model="timeForm" label-width="120px">
|
||||
<el-form-item label="前一日" class="select-box">
|
||||
<el-select
|
||||
v-model="timeForm.beforeTime"
|
||||
style="width:100%"
|
||||
placeholder="请选择"
|
||||
@change="selectRuleTime"
|
||||
>
|
||||
<template slot="prefix">
|
||||
<span style="padding-left: 5px;">
|
||||
<i class="el-icon-time" />
|
||||
</span>
|
||||
</template>
|
||||
<el-option
|
||||
v-for="item in timeList"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="今日">
|
||||
<el-time-picker
|
||||
v-model="timeForm.nowDayTime"
|
||||
style="width:100%"
|
||||
:clearable="false"
|
||||
readonly
|
||||
placeholder="请选择时间"
|
||||
value-format="HH:mm:ss"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button @click="cancelRule">取 消</el-button>
|
||||
<el-button
|
||||
type="primary"
|
||||
:loading="timeSubmitLoading"
|
||||
@click="sureRule"
|
||||
>确 定</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</ItemBox>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { GetPcsStationData, addElecMeterConfig,
|
||||
updateElecMeterConfig } from '@/api/home-page/index'
|
||||
import { GetRAPcsTotalData } from '@/api/homePage-integrated/index'
|
||||
import { ToDegrees } from '@/utils/index'
|
||||
import disImg from '../../../../assets/station-data/total-discharge.png'
|
||||
export default {
|
||||
name: 'Index',
|
||||
props: {
|
||||
stationId: {
|
||||
type: Number,
|
||||
default: 0
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
disImg,
|
||||
currentIndex: 0,
|
||||
totalData: [{
|
||||
name: this.$t('dashboard.stationName'),
|
||||
id: 'name',
|
||||
picture: disImg,
|
||||
value: 0
|
||||
}, {
|
||||
name: this.$t('dashboard.stationType'),
|
||||
id: 'type',
|
||||
picture: disImg,
|
||||
value: 0
|
||||
}, {
|
||||
name: this.$t('dashboard.stationLocation'),
|
||||
id: 'address',
|
||||
picture: disImg,
|
||||
value: 0
|
||||
},
|
||||
{
|
||||
name: this.$t('dashboard.commTime'),
|
||||
id: 'createTime',
|
||||
picture: disImg,
|
||||
value: 0
|
||||
},
|
||||
{
|
||||
name: this.$t('dashboard.log'),
|
||||
id: 'longitude',
|
||||
picture: disImg,
|
||||
value: 0
|
||||
},
|
||||
{
|
||||
name: this.$t('dashboard.lat'),
|
||||
id: 'latitude',
|
||||
picture: disImg,
|
||||
value: 0
|
||||
}],
|
||||
overflowData: [{
|
||||
name: this.$t('dashboard.safeDays'),
|
||||
id: 'operationDays',
|
||||
picture: disImg,
|
||||
value: 0,
|
||||
unit: this.$t('dashboard.day')
|
||||
}, {
|
||||
name: this.$t('dashboard.totalCapacity'),
|
||||
id: 'totalCapacity',
|
||||
picture: disImg,
|
||||
value: 0,
|
||||
unit: 'kWh'
|
||||
}, {
|
||||
name: this.$t('dashboard.systemConversionEfficiency'),
|
||||
id: 'systemEfficiency',
|
||||
picture: disImg,
|
||||
value: 0,
|
||||
unit: '%'
|
||||
}, {
|
||||
name: this.$t('dashboard.currentPower'),
|
||||
id: 'currentPower',
|
||||
picture: disImg,
|
||||
value: 0,
|
||||
unit: 'kW'
|
||||
}, {
|
||||
name: this.$t('dashboard.totalCharge'),
|
||||
id: 'totalChargeElec',
|
||||
picture: disImg,
|
||||
value: 0,
|
||||
unit: 'kWh'
|
||||
}, {
|
||||
name: this.$t('dashboard.totalDischarge'),
|
||||
id: 'totalDischargeElec',
|
||||
picture: disImg,
|
||||
value: 0,
|
||||
unit: 'kWh'
|
||||
}, {
|
||||
name: this.$t('dashboard.dailyCharge'),
|
||||
id: 'dailyChargeElec',
|
||||
picture: disImg,
|
||||
value: 0,
|
||||
unit: 'kWh',
|
||||
click: true
|
||||
}, {
|
||||
name: this.$t('dashboard.dailyDischarge'),
|
||||
id: 'dailyDischargeElec',
|
||||
picture: disImg,
|
||||
value: 0,
|
||||
unit: 'kWh'
|
||||
}],
|
||||
stationType: [],
|
||||
loading: false,
|
||||
ruleShow: false,
|
||||
timeForm: {
|
||||
beforeTime: undefined,
|
||||
nowDayTime: undefined
|
||||
},
|
||||
timeSubmitLoading: false,
|
||||
timeOperate: 1, // 1 新增 2 编辑
|
||||
timeList: []
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
stationTypeList() {
|
||||
return this.$store.getters.dicts['stationType'] || []
|
||||
},
|
||||
language() {
|
||||
return this.$store.getters.language || undefined
|
||||
}
|
||||
|
||||
},
|
||||
watch: {
|
||||
dailyTime: {
|
||||
handler(val) {
|
||||
if (val) {
|
||||
this.timeForm = val
|
||||
this.timeOperate = val.timeOperate
|
||||
this.GetPcsTotalData()
|
||||
}
|
||||
},
|
||||
deep: true,
|
||||
immediate: true
|
||||
},
|
||||
language: {
|
||||
handler() {
|
||||
this.totalData = [{
|
||||
name: this.$t('dashboard.stationName'),
|
||||
id: 'name',
|
||||
picture: disImg,
|
||||
value: 0
|
||||
}, {
|
||||
name: this.$t('dashboard.stationType'),
|
||||
id: 'type',
|
||||
picture: disImg,
|
||||
value: 0
|
||||
}, {
|
||||
name: this.$t('dashboard.stationLocation'),
|
||||
id: 'address',
|
||||
picture: disImg,
|
||||
value: 0
|
||||
},
|
||||
{
|
||||
name: this.$t('dashboard.commTime'),
|
||||
id: 'createTime',
|
||||
picture: disImg,
|
||||
value: 0
|
||||
},
|
||||
{
|
||||
name: this.$t('dashboard.log'),
|
||||
id: 'longitude',
|
||||
picture: disImg,
|
||||
value: 0
|
||||
},
|
||||
{
|
||||
name: this.$t('dashboard.lat'),
|
||||
id: 'latitude',
|
||||
picture: disImg,
|
||||
value: 0
|
||||
}]
|
||||
this.overflowData = [{
|
||||
name: this.$t('dashboard.safeDays') + `(${this.$t('dashboard.day')})`,
|
||||
id: 'operationDays',
|
||||
picture: disImg,
|
||||
value: 0,
|
||||
unit: this.$t('dashboard.day')
|
||||
}, {
|
||||
name: this.$t('dashboard.totalCapacity'),
|
||||
id: 'totalCapacity',
|
||||
picture: disImg,
|
||||
value: 0,
|
||||
unit: 'kWh'
|
||||
}, {
|
||||
name: this.$t('dashboard.systemConversionEfficiency'),
|
||||
id: 'systemEfficiency',
|
||||
picture: disImg,
|
||||
value: 0,
|
||||
unit: '%'
|
||||
}, {
|
||||
name: this.$t('dashboard.currentPower'),
|
||||
id: 'currentPower',
|
||||
picture: disImg,
|
||||
value: 0,
|
||||
unit: 'kW'
|
||||
}, {
|
||||
name: this.$t('dashboard.totalCharge'),
|
||||
id: 'totalChargeElec',
|
||||
picture: disImg,
|
||||
value: 0,
|
||||
unit: 'kWh'
|
||||
}, {
|
||||
name: this.$t('dashboard.totalDischarge'),
|
||||
id: 'totalDischargeElec',
|
||||
picture: disImg,
|
||||
value: 0,
|
||||
unit: 'kWh'
|
||||
}, {
|
||||
name: this.$t('dashboard.dailyCharge'),
|
||||
id: 'dailyChargeElec',
|
||||
picture: disImg,
|
||||
value: 0,
|
||||
unit: 'kWh',
|
||||
click: true
|
||||
}, {
|
||||
name: this.$t('dashboard.dailyDischarge'),
|
||||
id: 'dailyDischargeElec',
|
||||
picture: disImg,
|
||||
value: 0,
|
||||
unit: 'kWh'
|
||||
}]
|
||||
},
|
||||
deep: true
|
||||
}
|
||||
},
|
||||
created() {
|
||||
// console.log(this.stationTypeList)
|
||||
this.getTimeList()
|
||||
},
|
||||
mounted() { },
|
||||
methods: {
|
||||
getStationTypeName(item) {
|
||||
const typeIndex = this.stationTypeList.findIndex(t => Number(t.value) === Number(item))
|
||||
return this.stationTypeList[typeIndex].label
|
||||
},
|
||||
changeType(val) {
|
||||
this.currentIndex = val
|
||||
},
|
||||
getData() {
|
||||
this.GetPcsStationData()
|
||||
this.GetPcsTotalData()
|
||||
},
|
||||
async GetPcsStationData() {
|
||||
this.loading = true
|
||||
const params = {
|
||||
stationId: this.stationId
|
||||
}
|
||||
try {
|
||||
const { data } = await GetPcsStationData(params)
|
||||
this.totalData.forEach((item) => {
|
||||
item.value = data[item.id]
|
||||
if (item.id === 'type') {
|
||||
item.value = this.getStationTypeName(item.value)
|
||||
}
|
||||
if (item.id === 'longitude') {
|
||||
item.value = ToDegrees(item.value, 1)
|
||||
}
|
||||
if (item.id === 'latitude') {
|
||||
item.value = ToDegrees(item.value, 2)
|
||||
}
|
||||
})
|
||||
} catch (error) {
|
||||
// console.log(error);
|
||||
} finally {
|
||||
this.loading = false
|
||||
}
|
||||
},
|
||||
|
||||
async GetPcsTotalData() {
|
||||
this.loading = true
|
||||
const params = {
|
||||
stationId: this.stationId
|
||||
}
|
||||
try {
|
||||
const { data } = await GetRAPcsTotalData(params)
|
||||
this.overflowData.forEach((item) => {
|
||||
if (data[item.id]) {
|
||||
item.value = data[item.id]
|
||||
}
|
||||
if (item.id === 'systemEfficiency') {
|
||||
item.value = (item.value * 100).toFixed(2)
|
||||
}
|
||||
if (item.id === 'totalChargeElec' && item.value >= 1E4) {
|
||||
item.unit = 'MWh'
|
||||
item.value = (Number(item.value) / 1E3).toFixed(2) + ''
|
||||
}
|
||||
if (item.id === 'totalDischargeElec' && item.value >= 1E4) {
|
||||
item.unit = 'MWh'
|
||||
item.value = (Number(item.value) / 1E3).toFixed(2) + ''
|
||||
}
|
||||
if (item.id === 'dailyChargeElec' && item.value >= 1E4) {
|
||||
item.unit = 'MWh'
|
||||
item.value = (Number(item.value) / 1E3).toFixed(2) + ''
|
||||
}
|
||||
if (item.id === 'dailyDischargeElec' && item.value >= 1E4) {
|
||||
item.unit = 'MWh'
|
||||
item.value = (Number(item.value) / 1E3).toFixed(2) + ''
|
||||
}
|
||||
if (item.id === 'currentPower' && item.value >= 1E4) {
|
||||
item.unit = 'MW'
|
||||
item.value = (Number(item.value) / 1E3).toFixed(2) + ''
|
||||
}
|
||||
})
|
||||
} catch (error) {
|
||||
// console.log(error);
|
||||
} finally {
|
||||
this.loading = false
|
||||
}
|
||||
},
|
||||
getTimeList() {
|
||||
for (let i = 0; i < 24; i++) {
|
||||
this.timeList.push({
|
||||
label: `${i < 10 ? '0' + i : i}:00:00`,
|
||||
value: `${i < 10 ? '0' + i : i}:00:00`
|
||||
})
|
||||
}
|
||||
},
|
||||
setRule() {
|
||||
this.ruleShow = true
|
||||
},
|
||||
selectRuleTime(val) {
|
||||
this.timeForm.nowDayTime = this.getEightTime('2020-07-28 ' + val)
|
||||
},
|
||||
cancelRule() {
|
||||
this.ruleShow = false
|
||||
},
|
||||
sureRule() {
|
||||
if (this.timeOperate === 1) {
|
||||
// 新增
|
||||
this.timeSubmitLoading = true
|
||||
const param = {
|
||||
stationId: this.stationId,
|
||||
beginTime: this.timeForm.beforeTime,
|
||||
endTime: this.timeForm.nowDayTime
|
||||
}
|
||||
addElecMeterConfig(param)
|
||||
.then((res) => {
|
||||
this.$message.success('新增成功')
|
||||
this.ruleShow = false
|
||||
this.$emit('updateTime')
|
||||
})
|
||||
.finally(() => {
|
||||
this.timeSubmitLoading = false
|
||||
})
|
||||
} else {
|
||||
// 编辑
|
||||
this.timeSubmitLoading = true
|
||||
const param = {
|
||||
stationId: this.stationId,
|
||||
beginTime: this.timeForm.beforeTime,
|
||||
endTime: this.timeForm.nowDayTime,
|
||||
id: this.timeForm.id
|
||||
}
|
||||
updateElecMeterConfig(param)
|
||||
.then((res) => {
|
||||
this.$message.success('更新成功')
|
||||
this.ruleShow = false
|
||||
this.$emit('updateTime')
|
||||
})
|
||||
.finally(() => {
|
||||
this.timeSubmitLoading = false
|
||||
})
|
||||
}
|
||||
},
|
||||
/**
|
||||
* 指定时间的多少小时或多少分钟之后的时间
|
||||
* @param {*} str 2020-07-28 15:00:00
|
||||
*/
|
||||
getEightTime(str) {
|
||||
const t = new Date(str).getTime() + 24 * 60 * 60 * 1000 - 1 // 24小时 * 60分钟 * 60秒 * 1000
|
||||
const d = new Date(t)
|
||||
let theMonth = d.getMonth() + 1
|
||||
let theDate = d.getDate()
|
||||
let theHours = d.getHours()
|
||||
let theMinutes = d.getMinutes()
|
||||
let theSecond = d.getSeconds()
|
||||
if (theMonth < 10) {
|
||||
theMonth = '0' + theMonth
|
||||
}
|
||||
if (theDate < 10) {
|
||||
theDate = '0' + theDate
|
||||
}
|
||||
if (theHours < 10) {
|
||||
theHours = '0' + theHours
|
||||
}
|
||||
if (theMinutes < 10) {
|
||||
theMinutes = '0' + theMinutes
|
||||
}
|
||||
if (theSecond < 10) {
|
||||
theSecond = '0' + theSecond
|
||||
}
|
||||
// let date = d.getFullYear() + '-' + theMonth + '-' + theDate
|
||||
const time = theHours + ':' + theMinutes + ':' + theSecond
|
||||
// let Spare = date + ' ' + time
|
||||
// console.log(date)
|
||||
// console.log(time)
|
||||
// console.log(Spare)
|
||||
return time
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
::v-deep .item-con{
|
||||
overflow:auto;
|
||||
}
|
||||
.top-left-box{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
.header-right-box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.header-title {
|
||||
white-space: nowrap;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
letter-spacing: 0em;
|
||||
color: rgba(206, 235, 255, 0.5);
|
||||
padding: 0 10px;
|
||||
cursor: pointer;
|
||||
font-family: Source Han Sans CN;
|
||||
|
||||
&.active{
|
||||
color: #ffffff;
|
||||
background: linear-gradient(90deg, rgba(0,148,255,0.00) 0%, rgba(0,148,255,0.43) 51%, rgba(0,148,255,0.00) 99%);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.box{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 10px;
|
||||
padding-bottom: 0;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
</style>
|
||||
378
src/views/dashboard-pv/components/top-left/disposition.vue
Normal file
378
src/views/dashboard-pv/components/top-left/disposition.vue
Normal file
@ -0,0 +1,378 @@
|
||||
<template>
|
||||
<div class="top-left-box">
|
||||
<ItemBox :title="$t('dashboard.stationData')" :show-point-setting="true" @handleSetting="handleSetting">
|
||||
<div slot="header">
|
||||
<div class="header-right-box">
|
||||
<div class="header-title" :class="{'active':currentIndex === 0}" @click="changeType(0)">{{ $t('dashboard.dataOverView') }}</div>
|
||||
<div class="header-title" :class="{'active':currentIndex === 1}" @click="changeType(1)">{{ $t('dashboard.stationInfo') }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="currentIndex === 0" v-loading="loading" class="box">
|
||||
<StationData
|
||||
:table-data=" stationId !== 1069 ? [ ...overflowData,...dynamicData] : [ ...dynamicData]"
|
||||
/>
|
||||
</div>
|
||||
<div v-else v-loading="loading" class="box">
|
||||
<StationData :table-data="totalData" />
|
||||
</div>
|
||||
</ItemBox>
|
||||
|
||||
<el-dialog :title="$t('dashboard.pzsjy')" :visible.sync="configVisible" width="30%" @close="closeConfig">
|
||||
<el-form ref="configForm" :model="configForm" :rules="rules" label-width="135px">
|
||||
<el-form-item :label="$t('dashboard.time')" prop="time">
|
||||
<el-date-picker v-model="configForm.time" style="width: 100%" type="date" :picker-options="pickerOptionsStart" value-format="yyyy-MM-dd" :placeholder="$t('remote.pleaseSelect')" />
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item :label="$t('dashboard.generation') + '(kWh)'" prop="param1">
|
||||
<el-input-number v-model="configForm.param1" style="width: 100%" :max="9999999" :min="-9999999" :controls="false" :placeholder="$t('remote.pleaseInput')" />
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('dashboard.yhl') + '(L)'" prop="param2">
|
||||
<el-input-number v-model="configForm.param2" style="width: 100%" :max="9999999" :min="-9999999" :controls="false" :placeholder="$t('remote.pleaseInput')" />
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('dashboard.jsfs')" prop="countMethod">
|
||||
<el-select v-model="configForm.countMethod" style="width:100%" :placeholder="$t('remote.pleaseSelect')">
|
||||
<el-option v-for="item in countMethod" :key="item.id" :label="item.label" :value="item.value" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
</el-form>
|
||||
|
||||
<span slot="footer">
|
||||
<el-button @click="closeConfig">{{ $t('dashboard.cancel') }}</el-button>
|
||||
<el-button type="primary" :loading="sureLoading" @click="sureConfig">{{ $t('dashboard.sure') }}</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ToDegrees } from '@/utils/index'
|
||||
import { GetPcsStationData, DynamicConfigPoint, SetDataConfig } from '@/api/home-page/index'
|
||||
import { GetRAPcsTotalData } from '@/api/homePage-integrated/index'
|
||||
import dayImg from '../../../../assets/station-data/run-day.png'
|
||||
import capImg from '../../../../assets/station-data/Installed-capacity.png'
|
||||
import disImg from '../../../../assets/station-data/total-discharge.png'
|
||||
import otherImg from '../../../../assets/station-data/station-data.png'
|
||||
export default {
|
||||
name: 'Index',
|
||||
props: {
|
||||
stationId: {
|
||||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
permissionId: {
|
||||
type: Number,
|
||||
default: 0
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
currentIndex: 0,
|
||||
dayImg,
|
||||
capImg,
|
||||
disImg,
|
||||
otherImg,
|
||||
overflowData: [{
|
||||
name: this.$t('dashboard.safeDays') + `(${this.$t('dashboard.day')})`,
|
||||
id: 'operationDays',
|
||||
picture: dayImg,
|
||||
value: 0
|
||||
}, {
|
||||
name: this.$t('dashboard.totalCapacity') + `(kWh)`,
|
||||
id: 'totalCapacity',
|
||||
picture: capImg,
|
||||
value: 0
|
||||
}, {
|
||||
name: this.$t('dashboard.systemConversionEfficiency') + `(%)`,
|
||||
id: 'systemEfficiency',
|
||||
picture: disImg,
|
||||
value: 0
|
||||
}],
|
||||
totalData: [{
|
||||
name: this.$t('dashboard.stationName'),
|
||||
id: 'name',
|
||||
picture: disImg,
|
||||
value: 0
|
||||
}, {
|
||||
name: this.$t('dashboard.stationType'),
|
||||
id: 'type',
|
||||
picture: disImg,
|
||||
value: 0
|
||||
}, {
|
||||
name: this.$t('dashboard.stationLocation'),
|
||||
id: 'address',
|
||||
picture: disImg,
|
||||
value: 0
|
||||
},
|
||||
{
|
||||
name: this.$t('dashboard.commTime'),
|
||||
id: 'createTime',
|
||||
picture: disImg,
|
||||
value: 0
|
||||
},
|
||||
{
|
||||
name: this.$t('dashboard.log'),
|
||||
id: 'longitude',
|
||||
picture: disImg,
|
||||
value: 0
|
||||
},
|
||||
{
|
||||
name: this.$t('dashboard.lat'),
|
||||
id: 'latitude',
|
||||
picture: disImg,
|
||||
value: 0
|
||||
}],
|
||||
stationType: [],
|
||||
loading: false,
|
||||
timeForm: {
|
||||
beforeTime: undefined,
|
||||
nowDayTime: undefined
|
||||
},
|
||||
dynamicData: [],
|
||||
configVisible: false,
|
||||
configForm: {
|
||||
countMethod: '4'
|
||||
},
|
||||
sureLoading: false,
|
||||
selectItem: {},
|
||||
rules: {
|
||||
time: [{ required: true, message: this.$t('remote.pleaseSelect'), trigger: 'change' }],
|
||||
param1: [{ required: true, message: this.$t('remote.pleaseInput'), trigger: 'blur' }],
|
||||
param2: [{ required: true, message: this.$t('remote.pleaseInput'), trigger: 'blur' }],
|
||||
countMethod: [{ required: true, message: this.$t('remote.pleaseSelect'), trigger: 'change' }]
|
||||
},
|
||||
pickerOptionsStart: {
|
||||
// 时间不能大于当前时间
|
||||
disabledDate: (time) => {
|
||||
return time.getTime() > Date.now()
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
stationTypeList() {
|
||||
return this.$store.getters.dicts['stationType'] || []
|
||||
},
|
||||
countMethod() {
|
||||
return this.$store.getters.dicts['commonCountSymbol'] || []
|
||||
},
|
||||
permission() {
|
||||
return this.$store.getters.permissions
|
||||
},
|
||||
language() {
|
||||
return this.$store.getters.language || undefined
|
||||
}
|
||||
|
||||
},
|
||||
|
||||
watch: {
|
||||
language: {
|
||||
handler() {
|
||||
this.overflowData = [{
|
||||
name: this.$t('dashboard.safeDays') + `(${this.$t('dashboard.day')})`,
|
||||
id: 'operationDays',
|
||||
picture: dayImg,
|
||||
value: 0
|
||||
}, {
|
||||
name: this.$t('dashboard.totalCapacity') + `(kWh)`,
|
||||
id: 'totalCapacity',
|
||||
picture: capImg,
|
||||
value: 0
|
||||
}, {
|
||||
name: this.$t('dashboard.systemConversionEfficiency') + `(%)`,
|
||||
id: 'systemEfficiency',
|
||||
picture: disImg,
|
||||
value: 0
|
||||
}]
|
||||
this.totalData = [{
|
||||
name: this.$t('dashboard.stationName'),
|
||||
id: 'name',
|
||||
picture: disImg,
|
||||
value: 0
|
||||
}, {
|
||||
name: this.$t('dashboard.stationType'),
|
||||
id: 'type',
|
||||
picture: disImg,
|
||||
value: 0
|
||||
}, {
|
||||
name: this.$t('dashboard.stationLocation'),
|
||||
id: 'address',
|
||||
picture: disImg,
|
||||
value: 0
|
||||
},
|
||||
{
|
||||
name: this.$t('dashboard.commTime'),
|
||||
id: 'createTime',
|
||||
picture: disImg,
|
||||
value: 0
|
||||
},
|
||||
{
|
||||
name: this.$t('dashboard.log'),
|
||||
id: 'longitude',
|
||||
picture: disImg,
|
||||
value: 0
|
||||
},
|
||||
{
|
||||
name: this.$t('dashboard.lat'),
|
||||
id: 'latitude',
|
||||
picture: disImg,
|
||||
value: 0
|
||||
}]
|
||||
},
|
||||
deep: true
|
||||
}
|
||||
},
|
||||
mounted() { },
|
||||
methods: {
|
||||
configData(item) {
|
||||
if (item.isConfig && this.permission.includes('business:DataConfig:configData')) {
|
||||
this.selectItem = item
|
||||
this.configVisible = true
|
||||
this.$nextTick(() => {
|
||||
this.$refs.configForm.clearValidate()
|
||||
})
|
||||
}
|
||||
},
|
||||
sureConfig() {
|
||||
this.$refs.configForm.validate(async(valid) => {
|
||||
if (valid) {
|
||||
this.sureLoading = true
|
||||
try {
|
||||
await SetDataConfig({
|
||||
...this.configForm,
|
||||
stationId: this.selectItem.stationId,
|
||||
srcId: this.selectItem.srcId,
|
||||
deviceType: this.selectItem.deviceType,
|
||||
col: this.selectItem.col
|
||||
})
|
||||
this.$message.success(this.$t('dashboard.saveSuccess'))
|
||||
this.getData()
|
||||
this.closeConfig()
|
||||
} finally {
|
||||
this.sureLoading = false
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
closeConfig() {
|
||||
this.configForm = {
|
||||
countMethod: '4'
|
||||
}
|
||||
this.configVisible = false
|
||||
},
|
||||
handleSetting() {
|
||||
this.$emit('handleSetting')
|
||||
},
|
||||
getStationTypeName(item) {
|
||||
const typeIndex = this.stationTypeList.findIndex(t => Number(t.value) === Number(item))
|
||||
return this.stationTypeList[typeIndex].label
|
||||
},
|
||||
changeType(val) {
|
||||
this.currentIndex = val
|
||||
},
|
||||
getData() {
|
||||
this.GetPcsStationData()
|
||||
this.GetPcsTotalData()
|
||||
},
|
||||
async GetPcsStationData() {
|
||||
this.loading = true
|
||||
const params = {
|
||||
stationId: this.stationId
|
||||
}
|
||||
try {
|
||||
const { data } = await GetPcsStationData(params)
|
||||
this.totalData.forEach((item) => {
|
||||
item.value = data[item.id]
|
||||
if (item.id === 'type') {
|
||||
item.value = this.getStationTypeName(item.value)
|
||||
}
|
||||
if (item.id === 'longitude') {
|
||||
item.value = ToDegrees(item.value, 1)
|
||||
}
|
||||
if (item.id === 'latitude') {
|
||||
item.value = ToDegrees(item.value, 2)
|
||||
}
|
||||
})
|
||||
} catch (error) {
|
||||
// console.log(error);
|
||||
} finally {
|
||||
this.loading = false
|
||||
}
|
||||
},
|
||||
|
||||
async GetPcsTotalData() {
|
||||
this.loading = true
|
||||
const params = {
|
||||
stationId: this.stationId,
|
||||
pageLocation: 'stationData',
|
||||
permissionId: this.permissionId
|
||||
}
|
||||
try {
|
||||
const { data } = await GetRAPcsTotalData(params)
|
||||
const res = await DynamicConfigPoint(params)
|
||||
this.overflowData.forEach((item) => {
|
||||
if (data[item.id]) {
|
||||
item.value = data[item.id]
|
||||
}
|
||||
if (item.id === 'systemEfficiency') {
|
||||
item.value = (item.value * 100).toFixed(2)
|
||||
}
|
||||
})
|
||||
this.dynamicData = res.data
|
||||
this.dynamicData.forEach((item) => {
|
||||
item.picture = otherImg
|
||||
})
|
||||
} catch (error) {
|
||||
// console.log(error);
|
||||
} finally {
|
||||
this.loading = false
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
::v-deep .item-con {
|
||||
overflow: auto;
|
||||
}
|
||||
.top-left-box {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
.header-right-box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.header-title {
|
||||
white-space: nowrap;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
letter-spacing: 0em;
|
||||
color: rgba(206, 235, 255, 0.5);
|
||||
padding: 0 10px;
|
||||
cursor: pointer;
|
||||
font-family: Source Han Sans CN;
|
||||
|
||||
&.active {
|
||||
color: #ffffff;
|
||||
background: linear-gradient(
|
||||
90deg,
|
||||
rgba(0, 148, 255, 0) 0%,
|
||||
rgba(0, 148, 255, 0.43) 51%,
|
||||
rgba(0, 148, 255, 0) 99%
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.box {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 10px;
|
||||
padding-bottom: 0;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
</style>
|
||||
498
src/views/dashboard-pv/components/top-left/standard-215.vue
Normal file
498
src/views/dashboard-pv/components/top-left/standard-215.vue
Normal file
@ -0,0 +1,498 @@
|
||||
<template>
|
||||
<div class="top-left-box">
|
||||
<ItemBox :title="$t('dashboard.stationData')">
|
||||
<div slot="header">
|
||||
<div class="header-right-box">
|
||||
<div class="header-title" :class="{ 'active': currentIndex === 0 }" @click="changeType(0)">{{ $t('dashboard.dataOverView') }}</div>
|
||||
<div class="header-title" :class="{ 'active': currentIndex === 1 }" @click="changeType(1)">{{ $t('dashboard.stationInfo') }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="currentIndex === 0" v-loading="loading" class="box">
|
||||
<StationData :table-data="overflowData" />
|
||||
</div>
|
||||
<div v-else v-loading="loading" class="box">
|
||||
<StationData :table-data="totalData" />
|
||||
</div>
|
||||
<el-dialog
|
||||
:append-to-body="true"
|
||||
title="日充放统计规则"
|
||||
:visible.sync="ruleShow"
|
||||
center
|
||||
width="30%"
|
||||
:close-on-click-modal="false"
|
||||
>
|
||||
<el-form :model="timeForm" label-width="120px">
|
||||
<el-form-item label="前一日" class="select-box">
|
||||
<el-select
|
||||
v-model="timeForm.beforeTime"
|
||||
style="width:100%"
|
||||
placeholder="请选择"
|
||||
@change="selectRuleTime"
|
||||
>
|
||||
<template slot="prefix">
|
||||
<span style="padding-left: 5px;">
|
||||
<i class="el-icon-time" />
|
||||
</span>
|
||||
</template>
|
||||
<el-option
|
||||
v-for="item in timeList"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="今日">
|
||||
<el-time-picker
|
||||
v-model="timeForm.nowDayTime"
|
||||
style="width:100%"
|
||||
:clearable="false"
|
||||
readonly
|
||||
placeholder="请选择时间"
|
||||
value-format="HH:mm:ss"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button @click="cancelRule">取 消</el-button>
|
||||
<el-button
|
||||
type="primary"
|
||||
:loading="timeSubmitLoading"
|
||||
@click="sureRule"
|
||||
>确 定</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</ItemBox>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { GetPcsStationData, addElecMeterConfig,
|
||||
updateElecMeterConfig } from '@/api/home-page/index'
|
||||
import { GetRAPcsTotalData } from '@/api/homePage-integrated/index'
|
||||
import { ToDegrees } from '@/utils/index'
|
||||
import disImg from '../../../../assets/station-data/total-discharge.png'
|
||||
export default {
|
||||
name: 'Index',
|
||||
props: {
|
||||
stationId: {
|
||||
type: Number,
|
||||
default: 0
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
currentIndex: 0,
|
||||
disImg,
|
||||
totalData: [{
|
||||
name: this.$t('dashboard.stationName'),
|
||||
id: 'name',
|
||||
picture: disImg,
|
||||
value: 0
|
||||
}, {
|
||||
name: this.$t('dashboard.stationType'),
|
||||
id: 'type',
|
||||
picture: disImg,
|
||||
value: 0
|
||||
}, {
|
||||
name: this.$t('dashboard.stationLocation'),
|
||||
id: 'address',
|
||||
picture: disImg,
|
||||
value: 0
|
||||
},
|
||||
{
|
||||
name: this.$t('dashboard.commTime'),
|
||||
id: 'createTime',
|
||||
picture: disImg,
|
||||
value: 0
|
||||
},
|
||||
{
|
||||
name: this.$t('dashboard.log'),
|
||||
id: 'longitude',
|
||||
picture: disImg,
|
||||
value: 0
|
||||
},
|
||||
{
|
||||
name: this.$t('dashboard.lat'),
|
||||
id: 'latitude',
|
||||
picture: disImg,
|
||||
value: 0
|
||||
}],
|
||||
overflowData: [{
|
||||
name: this.$t('dashboard.currentPower'),
|
||||
id: 'currentPower',
|
||||
picture: disImg,
|
||||
value: 0,
|
||||
unit: 'kW'
|
||||
}, {
|
||||
name: this.$t('dashboard.todayElectricityGeneration'),
|
||||
id: 'todayElecGeneration',
|
||||
picture: disImg,
|
||||
value: 0,
|
||||
unit: 'kWh'
|
||||
}, {
|
||||
name: this.$t('dashboard.totalPowerGeneration'),
|
||||
id: 'totalPowerGeneration',
|
||||
picture: disImg,
|
||||
value: 0,
|
||||
unit: 'kWh'
|
||||
},
|
||||
{
|
||||
name: this.$t('dashboard.totalRevenue'),
|
||||
id: 'totalRevenue',
|
||||
picture: disImg,
|
||||
value: 0,
|
||||
unit: 'kWh',
|
||||
click: true
|
||||
}, {
|
||||
name: this.$t('dashboard.ratedPowerofInverter'),
|
||||
id: 'ratedPowerofInverter',
|
||||
picture: disImg,
|
||||
value: 0,
|
||||
unit: 'kW'
|
||||
}],
|
||||
stationType: [],
|
||||
loading: false,
|
||||
ruleShow: false,
|
||||
timeForm: {
|
||||
beforeTime: undefined,
|
||||
nowDayTime: undefined
|
||||
},
|
||||
timeSubmitLoading: false,
|
||||
timeOperate: 1, // 1 新增 2 编辑
|
||||
timeList: []
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
stationTypeList() {
|
||||
return this.$store.getters.dicts['stationType'] || []
|
||||
},
|
||||
language() {
|
||||
return this.$store.getters.language || undefined
|
||||
}
|
||||
|
||||
},
|
||||
watch: {
|
||||
dailyTime: {
|
||||
handler(val) {
|
||||
if (val) {
|
||||
this.timeForm = val
|
||||
this.timeOperate = val.timeOperate
|
||||
this.GetPcsTotalData()
|
||||
}
|
||||
},
|
||||
deep: true,
|
||||
immediate: true
|
||||
},
|
||||
language: {
|
||||
handler() {
|
||||
this.totalData = [{
|
||||
name: this.$t('dashboard.stationName'),
|
||||
id: 'name',
|
||||
picture: disImg,
|
||||
value: 0
|
||||
}, {
|
||||
name: this.$t('dashboard.stationType'),
|
||||
id: 'type',
|
||||
picture: disImg,
|
||||
value: 0
|
||||
}, {
|
||||
name: this.$t('dashboard.stationLocation'),
|
||||
id: 'address',
|
||||
picture: disImg,
|
||||
value: 0
|
||||
},
|
||||
{
|
||||
name: this.$t('dashboard.commTime'),
|
||||
id: 'createTime',
|
||||
picture: disImg,
|
||||
value: 0
|
||||
},
|
||||
{
|
||||
name: this.$t('dashboard.log'),
|
||||
id: 'longitude',
|
||||
picture: disImg,
|
||||
value: 0
|
||||
},
|
||||
{
|
||||
name: this.$t('dashboard.lat'),
|
||||
id: 'latitude',
|
||||
picture: disImg,
|
||||
value: 0
|
||||
}]
|
||||
this.overflowData = [{
|
||||
name: this.$t('dashboard.safeDays'),
|
||||
id: 'operationDays',
|
||||
picture: disImg,
|
||||
value: 0,
|
||||
unit: this.$t('dashboard.day')
|
||||
}, {
|
||||
name: this.$t('dashboard.totalCapacity'),
|
||||
id: 'totalCapacity',
|
||||
picture: disImg,
|
||||
value: 0,
|
||||
unit: 'kWh'
|
||||
}, {
|
||||
name: this.$t('dashboard.systemConversionEfficiency'),
|
||||
id: 'systemEfficiency',
|
||||
picture: disImg,
|
||||
value: 0,
|
||||
unit: '%'
|
||||
}, {
|
||||
name: this.$t('dashboard.currentPower'),
|
||||
id: 'currentPower',
|
||||
picture: disImg,
|
||||
value: 0,
|
||||
unit: 'kW'
|
||||
}, {
|
||||
name: this.$t('dashboard.totalCharge'),
|
||||
id: 'totalChargeElec',
|
||||
picture: disImg,
|
||||
value: 0,
|
||||
unit: 'kWh'
|
||||
}, {
|
||||
name: this.stationId === 753 ? this.$t('dashboard.capacityIncrease') : this.$t('dashboard.totalDischarge'),
|
||||
id: 'totalDischargeElec',
|
||||
picture: disImg,
|
||||
value: 0,
|
||||
unit: 'kWh'
|
||||
},
|
||||
{
|
||||
name: this.$t('dashboard.dailyCharge'),
|
||||
id: 'dailyChargeElec',
|
||||
picture: disImg,
|
||||
value: 0,
|
||||
unit: 'kWh',
|
||||
click: true
|
||||
}, {
|
||||
name: this.stationId === 753 ? this.$t('dashboard.DailycapacityIncrease') : this.$t('dashboard.dailyDischarge'),
|
||||
id: 'dailyDischargeElec',
|
||||
picture: disImg,
|
||||
value: 0,
|
||||
unit: 'kWh'
|
||||
}]
|
||||
},
|
||||
deep: true
|
||||
}
|
||||
},
|
||||
created() {
|
||||
// console.log(this.stationTypeList)
|
||||
this.getTimeList()
|
||||
},
|
||||
mounted() { },
|
||||
methods: {
|
||||
getStationTypeName(item) {
|
||||
if (item && item !== '') {
|
||||
const typeIndex = this.stationTypeList.findIndex(t => Number(t.value) === Number(item))
|
||||
return this.stationTypeList[typeIndex].label
|
||||
}
|
||||
},
|
||||
changeType(val) {
|
||||
this.currentIndex = val
|
||||
},
|
||||
getData() {
|
||||
this.GetPcsStationData()
|
||||
this.GetPcsTotalData()
|
||||
},
|
||||
async GetPcsStationData() {
|
||||
this.loading = true
|
||||
const params = {
|
||||
stationId: this.stationId
|
||||
}
|
||||
try {
|
||||
const { data } = await GetPcsStationData(params)
|
||||
this.totalData.forEach((item) => {
|
||||
item.value = data[item.id]
|
||||
if (item.id === 'type') {
|
||||
item.value = this.getStationTypeName(item.value)
|
||||
}
|
||||
if (item.id === 'longitude') {
|
||||
item.value = ToDegrees(item.value, 1)
|
||||
}
|
||||
if (item.id === 'latitude') {
|
||||
item.value = ToDegrees(item.value, 2)
|
||||
}
|
||||
})
|
||||
} catch (error) {
|
||||
// console.log(error);
|
||||
} finally {
|
||||
this.loading = false
|
||||
}
|
||||
},
|
||||
|
||||
async GetPcsTotalData() {
|
||||
this.loading = true
|
||||
const params = {
|
||||
stationId: this.stationId
|
||||
}
|
||||
try {
|
||||
const { data } = await GetRAPcsTotalData(params)
|
||||
this.overflowData.forEach((item) => {
|
||||
if (data[item.id]) {
|
||||
item.value = data[item.id]
|
||||
}
|
||||
if (item.id === 'systemEfficiency') {
|
||||
item.value = (item.value * 100).toFixed(2)
|
||||
}
|
||||
if (item.id === 'totalCapacity' && item.value >= 1E4) {
|
||||
item.unit = 'MWh'
|
||||
item.value = (Number(item.value) / 1E3).toFixed(2) + ''
|
||||
}
|
||||
if (item.id === 'totalChargeElec' && item.value >= 1E4) {
|
||||
item.unit = 'MWh'
|
||||
item.value = (Number(item.value) / 1E3).toFixed(2) + ''
|
||||
}
|
||||
if (item.id === 'totalDischargeElec' && item.value >= 1E4) {
|
||||
item.unit = 'MWh'
|
||||
item.value = (Number(item.value) / 1E3).toFixed(2) + ''
|
||||
}
|
||||
if (item.id === 'dailyDischargeElec' && item.value >= 1E4) {
|
||||
item.unit = 'MWh'
|
||||
item.value = (Number(item.value) / 1E3).toFixed(2) + ''
|
||||
}
|
||||
if (item.id === 'dailyChargeElec' && item.value >= 1E4) {
|
||||
item.unit = 'MWh'
|
||||
item.value = (Number(item.value) / 1E3).toFixed(2) + ''
|
||||
}
|
||||
if (item.id === 'currentPower' && item.value >= 1E4) {
|
||||
item.unit = 'MW'
|
||||
item.value = (Number(item.value) / 1E3).toFixed(2) + ''
|
||||
}
|
||||
})
|
||||
} catch (error) {
|
||||
// console.log(error);
|
||||
} finally {
|
||||
this.loading = false
|
||||
}
|
||||
},
|
||||
getTimeList() {
|
||||
for (let i = 0; i < 24; i++) {
|
||||
this.timeList.push({
|
||||
label: `${i < 10 ? '0' + i : i}:00:00`,
|
||||
value: `${i < 10 ? '0' + i : i}:00:00`
|
||||
})
|
||||
}
|
||||
},
|
||||
setRule() {
|
||||
this.ruleShow = true
|
||||
},
|
||||
selectRuleTime(val) {
|
||||
this.timeForm.nowDayTime = this.getEightTime('2020-07-28 ' + val)
|
||||
},
|
||||
cancelRule() {
|
||||
this.ruleShow = false
|
||||
},
|
||||
sureRule() {
|
||||
if (this.timeOperate === 1) {
|
||||
// 新增
|
||||
this.timeSubmitLoading = true
|
||||
const param = {
|
||||
stationId: this.stationId,
|
||||
beginTime: this.timeForm.beforeTime,
|
||||
endTime: this.timeForm.nowDayTime
|
||||
}
|
||||
addElecMeterConfig(param)
|
||||
.then((res) => {
|
||||
this.$message.success('新增成功')
|
||||
this.ruleShow = false
|
||||
this.$emit('updateTime')
|
||||
})
|
||||
.finally(() => {
|
||||
this.timeSubmitLoading = false
|
||||
})
|
||||
} else {
|
||||
// 编辑
|
||||
this.timeSubmitLoading = true
|
||||
const param = {
|
||||
stationId: this.stationId,
|
||||
beginTime: this.timeForm.beforeTime,
|
||||
endTime: this.timeForm.nowDayTime,
|
||||
id: this.timeForm.id
|
||||
}
|
||||
updateElecMeterConfig(param)
|
||||
.then((res) => {
|
||||
this.$message.success('更新成功')
|
||||
this.ruleShow = false
|
||||
this.$emit('updateTime')
|
||||
})
|
||||
.finally(() => {
|
||||
this.timeSubmitLoading = false
|
||||
})
|
||||
}
|
||||
},
|
||||
/**
|
||||
* 指定时间的多少小时或多少分钟之后的时间
|
||||
* @param {*} str 2020-07-28 15:00:00
|
||||
*/
|
||||
getEightTime(str) {
|
||||
const t = new Date(str).getTime() + 24 * 60 * 60 * 1000 - 1 // 24小时 * 60分钟 * 60秒 * 1000
|
||||
const d = new Date(t)
|
||||
let theMonth = d.getMonth() + 1
|
||||
let theDate = d.getDate()
|
||||
let theHours = d.getHours()
|
||||
let theMinutes = d.getMinutes()
|
||||
let theSecond = d.getSeconds()
|
||||
if (theMonth < 10) {
|
||||
theMonth = '0' + theMonth
|
||||
}
|
||||
if (theDate < 10) {
|
||||
theDate = '0' + theDate
|
||||
}
|
||||
if (theHours < 10) {
|
||||
theHours = '0' + theHours
|
||||
}
|
||||
if (theMinutes < 10) {
|
||||
theMinutes = '0' + theMinutes
|
||||
}
|
||||
if (theSecond < 10) {
|
||||
theSecond = '0' + theSecond
|
||||
}
|
||||
// let date = d.getFullYear() + '-' + theMonth + '-' + theDate
|
||||
const time = theHours + ':' + theMinutes + ':' + theSecond
|
||||
// let Spare = date + ' ' + time
|
||||
// console.log(date)
|
||||
// console.log(time)
|
||||
// console.log(Spare)
|
||||
return time
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
::v-deep .item-con{
|
||||
overflow:auto;
|
||||
}
|
||||
.top-left-box{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
.header-right-box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.header-title {
|
||||
white-space: nowrap;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
letter-spacing: 0em;
|
||||
color: rgba(206, 235, 255, 0.5);
|
||||
padding: 0 10px;
|
||||
cursor: pointer;
|
||||
font-family: Source Han Sans CN;
|
||||
|
||||
&.active{
|
||||
color: #ffffff;
|
||||
background: linear-gradient(90deg, rgba(0,148,255,0.00) 0%, rgba(0,148,255,0.43) 51%, rgba(0,148,255,0.00) 99%);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.box{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 10px;
|
||||
padding-bottom: 0;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
</style>
|
||||
540
src/views/dashboard-pv/components/top-left/zzhb.vue
Normal file
540
src/views/dashboard-pv/components/top-left/zzhb.vue
Normal file
@ -0,0 +1,540 @@
|
||||
<template>
|
||||
<div class="top-left-box">
|
||||
<ItemBox :title="$t('dashboard.stationData')">
|
||||
<div slot="header">
|
||||
<div class="header-right-box">
|
||||
<div class="header-title" :class="{'active':currentIndex === 0}" @click="changeType(0)">{{ $t('dashboard.dataOverView') }}</div>
|
||||
<div class="header-title" :class="{'active':currentIndex === 1}" @click="changeType(1)">{{ $t('dashboard.stationInfo') }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="currentIndex === 0" v-loading="loading" class="box">
|
||||
<StationData :table-data="overflowData" />
|
||||
</div>
|
||||
<div v-else v-loading="loading" class="box">
|
||||
<StationData :table-data="totalData" />
|
||||
</div>
|
||||
<el-dialog
|
||||
:append-to-body="true"
|
||||
title="日充放统计规则"
|
||||
:visible.sync="ruleShow"
|
||||
center
|
||||
width="30%"
|
||||
:close-on-click-modal="false"
|
||||
>
|
||||
<el-form :model="timeForm" label-width="120px">
|
||||
<el-form-item label="前一日" class="select-box">
|
||||
<el-select
|
||||
v-model="timeForm.beforeTime"
|
||||
style="width:100%"
|
||||
placeholder="请选择"
|
||||
@change="selectRuleTime"
|
||||
>
|
||||
<template slot="prefix">
|
||||
<span style="padding-left: 5px;">
|
||||
<i class="el-icon-time" />
|
||||
</span>
|
||||
</template>
|
||||
<el-option
|
||||
v-for="item in timeList"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="今日">
|
||||
<el-time-picker
|
||||
v-model="timeForm.nowDayTime"
|
||||
style="width:100%"
|
||||
:clearable="false"
|
||||
readonly
|
||||
placeholder="请选择时间"
|
||||
value-format="HH:mm:ss"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button @click="cancelRule">取 消</el-button>
|
||||
<el-button
|
||||
type="primary"
|
||||
:loading="timeSubmitLoading"
|
||||
@click="sureRule"
|
||||
>确 定</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</ItemBox>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { GetPcsStationData, addElecMeterConfig,
|
||||
updateElecMeterConfig } from '@/api/home-page/index'
|
||||
import { GetRAPcsTotalData, GetZZHBday } from '@/api/homePage-integrated/index'
|
||||
import { ToDegrees } from '@/utils/index'
|
||||
import disImg from '../../../../assets/station-data/total-discharge.png'
|
||||
export default {
|
||||
name: 'Index',
|
||||
props: {
|
||||
stationId: {
|
||||
type: Number,
|
||||
default: 0
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
disImg,
|
||||
currentIndex: 0,
|
||||
totalData: [{
|
||||
name: this.$t('dashboard.stationName'),
|
||||
id: 'name',
|
||||
picture: disImg,
|
||||
value: 0
|
||||
}, {
|
||||
name: this.$t('dashboard.stationType'),
|
||||
id: 'type',
|
||||
picture: disImg,
|
||||
value: 0
|
||||
}, {
|
||||
name: this.$t('dashboard.stationLocation'),
|
||||
id: 'address',
|
||||
picture: disImg,
|
||||
value: 0
|
||||
},
|
||||
{
|
||||
name: this.$t('dashboard.commTime'),
|
||||
id: 'createTime',
|
||||
picture: disImg,
|
||||
value: 0
|
||||
},
|
||||
{
|
||||
name: this.$t('dashboard.log'),
|
||||
id: 'longitude',
|
||||
picture: disImg,
|
||||
value: 0
|
||||
},
|
||||
{
|
||||
name: this.$t('dashboard.lat'),
|
||||
id: 'latitude',
|
||||
picture: disImg,
|
||||
value: 0
|
||||
}],
|
||||
overflowData: [{
|
||||
name: this.$t('dashboard.safeDays'),
|
||||
id: 'operationDays',
|
||||
picture: disImg,
|
||||
value: 0,
|
||||
unit: this.$t('dashboard.day')
|
||||
}, {
|
||||
name: this.$t('dashboard.totalCapacity'),
|
||||
id: 'totalCapacity',
|
||||
picture: disImg,
|
||||
value: 0,
|
||||
unit: 'kWh'
|
||||
}, {
|
||||
name: this.$t('dashboard.systemConversionEfficiency'),
|
||||
id: 'systemEfficiency',
|
||||
picture: disImg,
|
||||
value: 0,
|
||||
unit: '%'
|
||||
}, {
|
||||
name: this.$t('dashboard.currentPower'),
|
||||
id: 'currentPower',
|
||||
picture: disImg,
|
||||
value: 0,
|
||||
unit: 'kW'
|
||||
}, {
|
||||
name: this.$t('dashboard.totalCharge'),
|
||||
id: 'totalChargeElec',
|
||||
picture: disImg,
|
||||
value: 0,
|
||||
unit: 'kWh'
|
||||
}, {
|
||||
name: this.$t('dashboard.totalDischarge'),
|
||||
id: 'totalDischargeElec',
|
||||
picture: disImg,
|
||||
value: 0,
|
||||
unit: 'kWh'
|
||||
}, {
|
||||
name: this.$t('dashboard.dailyCharge'),
|
||||
id: 'dailyChargeElec',
|
||||
picture: disImg,
|
||||
value: 0,
|
||||
unit: 'kWh'
|
||||
}, {
|
||||
name: this.$t('dashboard.dailyDischarge'),
|
||||
id: 'dailyDischargeElec',
|
||||
picture: disImg,
|
||||
value: 0,
|
||||
unit: 'kWh'
|
||||
}, {
|
||||
name: this.$t('dashboard.dayPhotovoltaic'),
|
||||
id: 'cumulativePowerGeneration',
|
||||
picture: disImg,
|
||||
value: 0,
|
||||
unit: 'kWh'
|
||||
}],
|
||||
|
||||
stationType: [],
|
||||
loading: false,
|
||||
ruleShow: false,
|
||||
timeForm: {
|
||||
beforeTime: undefined,
|
||||
nowDayTime: undefined
|
||||
},
|
||||
timeSubmitLoading: false,
|
||||
timeOperate: 1, // 1 新增 2 编辑
|
||||
timeList: []
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
stationTypeList() {
|
||||
return this.$store.getters.dicts['stationType'] || []
|
||||
},
|
||||
language() {
|
||||
return this.$store.getters.language || undefined
|
||||
}
|
||||
|
||||
},
|
||||
watch: {
|
||||
dailyTime: {
|
||||
handler(val) {
|
||||
if (val) {
|
||||
this.timeForm = val
|
||||
this.timeOperate = val.timeOperate
|
||||
this.GetPcsTotalData()
|
||||
}
|
||||
},
|
||||
deep: true,
|
||||
immediate: true
|
||||
},
|
||||
language: {
|
||||
handler() {
|
||||
this.totalData = [{
|
||||
name: this.$t('dashboard.stationName'),
|
||||
id: 'name',
|
||||
picture: disImg,
|
||||
value: 0
|
||||
}, {
|
||||
name: this.$t('dashboard.stationType'),
|
||||
id: 'type',
|
||||
picture: disImg,
|
||||
value: 0
|
||||
}, {
|
||||
name: this.$t('dashboard.stationLocation'),
|
||||
id: 'address',
|
||||
picture: disImg,
|
||||
value: 0
|
||||
},
|
||||
{
|
||||
name: this.$t('dashboard.commTime'),
|
||||
id: 'createTime',
|
||||
picture: disImg,
|
||||
value: 0
|
||||
},
|
||||
{
|
||||
name: this.$t('dashboard.log'),
|
||||
id: 'longitude',
|
||||
picture: disImg,
|
||||
value: 0
|
||||
},
|
||||
{
|
||||
name: this.$t('dashboard.lat'),
|
||||
id: 'latitude',
|
||||
picture: disImg,
|
||||
value: 0
|
||||
}]
|
||||
this.overflowData = [{
|
||||
name: this.$t('dashboard.safeDays'),
|
||||
id: 'operationDays',
|
||||
picture: disImg,
|
||||
value: 0,
|
||||
unit: this.$t('dashboard.day')
|
||||
}, {
|
||||
name: this.$t('dashboard.totalCapacity'),
|
||||
id: 'totalCapacity',
|
||||
picture: disImg,
|
||||
value: 0,
|
||||
unit: 'kWh'
|
||||
}, {
|
||||
name: this.$t('dashboard.systemConversionEfficiency'),
|
||||
id: 'systemEfficiency',
|
||||
picture: disImg,
|
||||
value: 0,
|
||||
unit: '%'
|
||||
}, {
|
||||
name: this.$t('dashboard.currentPower'),
|
||||
id: 'currentPower',
|
||||
picture: disImg,
|
||||
value: 0,
|
||||
unit: 'kW'
|
||||
}, {
|
||||
name: this.$t('dashboard.totalCharge'),
|
||||
id: 'totalChargeElec',
|
||||
picture: disImg,
|
||||
value: 0,
|
||||
unit: 'kWh'
|
||||
}, {
|
||||
name: this.$t('dashboard.totalDischarge'),
|
||||
id: 'totalDischargeElec',
|
||||
picture: disImg,
|
||||
value: 0,
|
||||
unit: 'kWh'
|
||||
}, {
|
||||
name: this.$t('dashboard.dailyCharge'),
|
||||
id: 'dailyChargeElec',
|
||||
picture: disImg,
|
||||
value: 0,
|
||||
unit: 'kWh'
|
||||
}, {
|
||||
name: this.$t('dashboard.dailyDischarge'),
|
||||
id: 'dailyDischargeElec',
|
||||
picture: disImg,
|
||||
value: 0,
|
||||
unit: 'kWh'
|
||||
}, {
|
||||
name: this.$t('dashboard.dayPhotovoltaic'),
|
||||
id: 'cumulativePowerGeneration',
|
||||
picture: disImg,
|
||||
value: 0,
|
||||
unit: 'kWh'
|
||||
}]
|
||||
},
|
||||
deep: true
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getTimeList()
|
||||
},
|
||||
mounted() { },
|
||||
methods: {
|
||||
getStationTypeName(item) {
|
||||
const typeIndex = this.stationTypeList.findIndex(t => Number(t.value) === Number(item))
|
||||
return this.stationTypeList[typeIndex].label
|
||||
},
|
||||
changeType(val) {
|
||||
this.currentIndex = val
|
||||
},
|
||||
getData() {
|
||||
this.GetPcsStationData()
|
||||
this.GetPcsTotalData()
|
||||
this.GetZZHBdayInverter()
|
||||
},
|
||||
async GetZZHBdayInverter() {
|
||||
this.loading = true
|
||||
const params = {
|
||||
stationId: this.stationId
|
||||
}
|
||||
try {
|
||||
const { data } = await GetZZHBday(params)
|
||||
this.totalData = Object.assign(this.totalData, data)
|
||||
} finally {
|
||||
this.loading = false
|
||||
}
|
||||
},
|
||||
async GetPcsStationData() {
|
||||
this.loading = true
|
||||
const params = {
|
||||
stationId: this.stationId
|
||||
}
|
||||
try {
|
||||
const { data } = await GetPcsStationData(params)
|
||||
this.totalData.forEach((item) => {
|
||||
item.value = data[item.id]
|
||||
if (item.id === 'type') {
|
||||
item.value = this.getStationTypeName(item.value)
|
||||
}
|
||||
if (item.id === 'longitude') {
|
||||
item.value = ToDegrees(item.value, 1)
|
||||
}
|
||||
if (item.id === 'latitude') {
|
||||
item.value = ToDegrees(item.value, 2)
|
||||
}
|
||||
})
|
||||
} catch (error) {
|
||||
// console.log(error);
|
||||
} finally {
|
||||
this.loading = false
|
||||
}
|
||||
},
|
||||
|
||||
async GetPcsTotalData() {
|
||||
this.loading = true
|
||||
const params = {
|
||||
stationId: this.stationId
|
||||
}
|
||||
try {
|
||||
const { data } = await GetRAPcsTotalData(params)
|
||||
// this.totalData = Object.assign(this.totalData, data)
|
||||
this.overflowData.forEach((item) => {
|
||||
if (data[item.id]) {
|
||||
item.value = data[item.id]
|
||||
}
|
||||
if (item.id === 'systemEfficiency') {
|
||||
item.value = (item.value * 100).toFixed(2)
|
||||
}
|
||||
if (item.id === 'totalCapacity' && item.value >= 1E4) {
|
||||
item.unit = 'MWh'
|
||||
item.value = (Number(item.value) / 1E3).toFixed(2) + ''
|
||||
}
|
||||
if (item.id === 'totalChargeElec' && item.value >= 1E4) {
|
||||
item.unit = 'MWh'
|
||||
item.value = (Number(item.value) / 1E3).toFixed(2) + ''
|
||||
}
|
||||
if (item.id === 'totalDischargeElec' && item.value >= 1E4) {
|
||||
item.unit = 'MWh'
|
||||
item.value = (Number(item.value) / 1E3).toFixed(2) + ''
|
||||
}
|
||||
if (item.id === 'dailyDischargeElec' && item.value >= 1E4) {
|
||||
item.unit = 'MWh'
|
||||
item.value = (Number(item.value) / 1E3).toFixed(2) + ''
|
||||
}
|
||||
if (item.id === 'dailyChargeElec' && item.value >= 1E4) {
|
||||
item.unit = 'MWh'
|
||||
item.value = (Number(item.value) / 1E3).toFixed(2) + ''
|
||||
}
|
||||
if (item.id === 'currentPower' && item.value >= 1E4) {
|
||||
item.unit = 'MW'
|
||||
item.value = (Number(item.value) / 1E3).toFixed(2) + ''
|
||||
}
|
||||
if (item.id === 'cumulativePowerGeneration' && item.value >= 1E4) {
|
||||
item.unit = 'MW'
|
||||
item.value = (Number(item.value) / 1E3).toFixed(2) + ''
|
||||
}
|
||||
})
|
||||
} catch (error) {
|
||||
// console.log(error);
|
||||
} finally {
|
||||
this.loading = false
|
||||
}
|
||||
},
|
||||
getTimeList() {
|
||||
for (let i = 0; i < 24; i++) {
|
||||
this.timeList.push({
|
||||
label: `${i < 10 ? '0' + i : i}:00:00`,
|
||||
value: `${i < 10 ? '0' + i : i}:00:00`
|
||||
})
|
||||
}
|
||||
},
|
||||
setRule() {
|
||||
this.ruleShow = true
|
||||
},
|
||||
selectRuleTime(val) {
|
||||
this.timeForm.nowDayTime = this.getEightTime('2020-07-28 ' + val)
|
||||
},
|
||||
cancelRule() {
|
||||
this.ruleShow = false
|
||||
},
|
||||
sureRule() {
|
||||
if (this.timeOperate === 1) {
|
||||
// 新增
|
||||
this.timeSubmitLoading = true
|
||||
const param = {
|
||||
stationId: this.stationId,
|
||||
beginTime: this.timeForm.beforeTime,
|
||||
endTime: this.timeForm.nowDayTime
|
||||
}
|
||||
addElecMeterConfig(param)
|
||||
.then((res) => {
|
||||
this.$message.success('新增成功')
|
||||
this.ruleShow = false
|
||||
this.$emit('updateTime')
|
||||
})
|
||||
.finally(() => {
|
||||
this.timeSubmitLoading = false
|
||||
})
|
||||
} else {
|
||||
// 编辑
|
||||
this.timeSubmitLoading = true
|
||||
const param = {
|
||||
stationId: this.stationId,
|
||||
beginTime: this.timeForm.beforeTime,
|
||||
endTime: this.timeForm.nowDayTime,
|
||||
id: this.timeForm.id
|
||||
}
|
||||
updateElecMeterConfig(param)
|
||||
.then((res) => {
|
||||
this.$message.success('更新成功')
|
||||
this.ruleShow = false
|
||||
this.$emit('updateTime')
|
||||
})
|
||||
.finally(() => {
|
||||
this.timeSubmitLoading = false
|
||||
})
|
||||
}
|
||||
},
|
||||
/**
|
||||
* 指定时间的多少小时或多少分钟之后的时间
|
||||
* @param {*} str 2020-07-28 15:00:00
|
||||
*/
|
||||
getEightTime(str) {
|
||||
const t = new Date(str).getTime() + 24 * 60 * 60 * 1000 - 1 // 24小时 * 60分钟 * 60秒 * 1000
|
||||
const d = new Date(t)
|
||||
let theMonth = d.getMonth() + 1
|
||||
let theDate = d.getDate()
|
||||
let theHours = d.getHours()
|
||||
let theMinutes = d.getMinutes()
|
||||
let theSecond = d.getSeconds()
|
||||
if (theMonth < 10) {
|
||||
theMonth = '0' + theMonth
|
||||
}
|
||||
if (theDate < 10) {
|
||||
theDate = '0' + theDate
|
||||
}
|
||||
if (theHours < 10) {
|
||||
theHours = '0' + theHours
|
||||
}
|
||||
if (theMinutes < 10) {
|
||||
theMinutes = '0' + theMinutes
|
||||
}
|
||||
if (theSecond < 10) {
|
||||
theSecond = '0' + theSecond
|
||||
}
|
||||
// let date = d.getFullYear() + '-' + theMonth + '-' + theDate
|
||||
const time = theHours + ':' + theMinutes + ':' + theSecond
|
||||
// let Spare = date + ' ' + time
|
||||
// console.log(date)
|
||||
// console.log(time)
|
||||
// console.log(Spare)
|
||||
return time
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
::v-deep .item-con{
|
||||
overflow:auto;
|
||||
}
|
||||
.top-left-box{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
.header-right-box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.header-title {
|
||||
white-space: nowrap;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
letter-spacing: 0em;
|
||||
color: rgba(206, 235, 255, 0.5);
|
||||
padding: 0 10px;
|
||||
cursor: pointer;
|
||||
font-family: Source Han Sans CN;
|
||||
|
||||
&.active{
|
||||
color: #ffffff;
|
||||
background: linear-gradient(90deg, rgba(0,148,255,0.00) 0%, rgba(0,148,255,0.43) 51%, rgba(0,148,255,0.00) 99%);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.box{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 10px;
|
||||
padding-bottom: 0;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user