379 lines
11 KiB
Vue
379 lines
11 KiB
Vue
<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>
|