初次提交
This commit is contained in:
238
src/views/dashboardtest/components/bottom-left/common-mwh.vue
Normal file
238
src/views/dashboardtest/components/bottom-left/common-mwh.vue
Normal file
@ -0,0 +1,238 @@
|
||||
<template>
|
||||
<div class="bottom-left-wrapper">
|
||||
<ItemBox :title=" $t('dashboard.chargingDischarging') ">
|
||||
<div slot="header">
|
||||
<div class="header-right-box">
|
||||
<div class="header-title" :class="{'active':currentType === 'day'}" @click="selectTime('day')">{{ $t('dashboard.sevenDay') }}</div>
|
||||
<div class="header-title" :class="{'active':currentType === 'month'}" @click="selectTime('month')">{{ $t('dashboard.monthDay') }}</div>
|
||||
<!-- <div class="header-title" :class="{'active':currentType === 'year'}" @click="selectTime('year')">{{ $t('dashboard.yearDay') }}</div> -->
|
||||
</div>
|
||||
</div>
|
||||
<div v-loading="loading" class="charts-box">
|
||||
<Chart :options="powerOptions" :class-name="'chart'" />
|
||||
</div>
|
||||
</ItemBox>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as echarts from 'echarts'
|
||||
import { GetPCSElecData } from '@/api/home-page/index'
|
||||
|
||||
export default {
|
||||
name: 'Index',
|
||||
props: {
|
||||
stationId: {
|
||||
type: Number,
|
||||
default: undefined
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
powerOptions: undefined,
|
||||
currentType: 'day',
|
||||
color: ['#00b7ec', '#FFB800'],
|
||||
loading: false
|
||||
}
|
||||
},
|
||||
computed: {},
|
||||
watch: {},
|
||||
created() {},
|
||||
mounted() {
|
||||
// this.initCharts()
|
||||
},
|
||||
methods: {
|
||||
selectTime(type) {
|
||||
this.currentType = type
|
||||
this.getData()
|
||||
},
|
||||
getData() {
|
||||
this.getElecData()
|
||||
// this.getIncomeData()
|
||||
},
|
||||
async getElecData() {
|
||||
this.loading = true
|
||||
const params = {
|
||||
stationId: this.stationId,
|
||||
type: this.currentType
|
||||
}
|
||||
try {
|
||||
const res = await GetPCSElecData(params)
|
||||
this.initCharts(res.data, 1)
|
||||
} catch (error) {
|
||||
// console.log(error);
|
||||
} finally {
|
||||
this.loading = false
|
||||
}
|
||||
},
|
||||
// async getIncomeData() {
|
||||
// const params = {
|
||||
// stationId: this.stationId,
|
||||
// type: this.currentType
|
||||
// }
|
||||
// const res = await GetIncomeData(params)
|
||||
// this.initCharts(res.data, 2)
|
||||
// },
|
||||
initCharts(val, type) {
|
||||
const x_data = []
|
||||
const charge_data = []
|
||||
const discharge_data = []
|
||||
// let benefit_data = [0, 0, 0, 0, 0, 0, 0]
|
||||
if (val && val.length > 0) {
|
||||
val.forEach(item => {
|
||||
x_data.push(item.date)
|
||||
charge_data.push(item.chargeElec)
|
||||
discharge_data.push(item.dischargeElec)
|
||||
})
|
||||
}
|
||||
this.powerOptions = {
|
||||
grid: {
|
||||
top: '25%',
|
||||
left: '10%',
|
||||
right: '10%',
|
||||
bottom: '5%',
|
||||
containLabel: true
|
||||
},
|
||||
legend: {},
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
backgroundColor: 'rgba(0,0,0,0,)',
|
||||
borderColor: 'rgba(0,0,0,0,);',
|
||||
borderWidth: 0,
|
||||
textStyle: {
|
||||
width: 160,
|
||||
height: 250,
|
||||
lineHeight: 24,
|
||||
color: '#ffffff',
|
||||
fontSize: '14',
|
||||
fontFamily: 'SourceHanSansCN-Normal'
|
||||
},
|
||||
formatter: params => {
|
||||
// 获取xAxis data中的数据
|
||||
let dataStr = `<div><p style="font-weight:bold;margin:0 8px 15px;">${params[0].name}</p></div>`
|
||||
params.forEach(item => {
|
||||
dataStr += `<div>
|
||||
<div style="margin: 0 8px;">
|
||||
<span style="display:inline-block;margin-right:5px;width:10px;height:10px;background-color:${this.color[item.componentIndex]};"></span>
|
||||
<span>${item.seriesName}</span>
|
||||
<span style="float:right;color:#00C8FF;margin-left:20px;">${item.data}</span>
|
||||
</div>
|
||||
</div>`
|
||||
})
|
||||
const div = `<div style='border: 1px solid ;
|
||||
border-image: linear-gradient(130deg, #FFFFFF 0%, rgba(201,255,243,0.00) 22%, rgba(201,255,243,0.00) 75%, rgba(201,255,243,0.00) 80%, #FFFFFF 99%, #FFFFFF 99%) 1;
|
||||
box-shadow: inset 0px 2px 16px 0px rgba(0, 148, 255, 0.4);' >${dataStr}</div>`
|
||||
return div
|
||||
}
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
type: 'category',
|
||||
data: x_data,
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: '#90e9d8'
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
show: true,
|
||||
color: '#CEEBFF'
|
||||
},
|
||||
|
||||
axisTick: {
|
||||
show: false
|
||||
}
|
||||
}
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
type: 'value',
|
||||
name: `${this.$t('dashboard.chargingandDischarging')}(MWh)`,
|
||||
nameTextStyle: {
|
||||
color: ' rgba(255, 255, 255, 0.5)'
|
||||
},
|
||||
axisLine: {
|
||||
show: false,
|
||||
lineStyle: {
|
||||
color: '#90e9d8'
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
show: true,
|
||||
color: '#CEEBFF'
|
||||
},
|
||||
|
||||
axisTick: {
|
||||
show: false
|
||||
}
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: `${this.$t('dashboard.charging')}`,
|
||||
type: 'bar',
|
||||
// data: [219, 215, 216, 219, 220, 215, 214],
|
||||
data: charge_data,
|
||||
// barWidth: 14, // 柱状图的宽度
|
||||
color: '#00C8FF',
|
||||
itemStyle: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{ offset: 0, color: 'rgba(0,200,255,0.90)' },
|
||||
{ offset: 1, color: 'rgba(0, 200, 255, 0.0)' }
|
||||
])
|
||||
}
|
||||
},
|
||||
{
|
||||
name: `${this.$t('dashboard.disCharging')}`,
|
||||
type: 'bar',
|
||||
data: discharge_data,
|
||||
// data: [206, 203, 204, 206, 210, 205, 206],
|
||||
// barWidth: 14, // 柱状图的宽度
|
||||
color: '#CEEBFF',
|
||||
itemStyle: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{ offset: 0, color: 'rgba(255, 184, 0,0.90)' },
|
||||
{ offset: 1, color: 'rgba(255, 184, 0,0.00)' }
|
||||
])
|
||||
}
|
||||
}
|
||||
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.bottom-left-wrapper {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
.header-right-box {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
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%);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.charts-box {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
236
src/views/dashboardtest/components/bottom-left/common.vue
Normal file
236
src/views/dashboardtest/components/bottom-left/common.vue
Normal file
@ -0,0 +1,236 @@
|
||||
<template>
|
||||
<div class="bottom-left-wrapper">
|
||||
<ItemBox :title=" $t('dashboard.chargingDischarging') ">
|
||||
<div slot="header">
|
||||
<div class="header-right-box">
|
||||
<div class="header-title" :class="{'active':currentType === 'day'}" @click="selectTime('day')">{{ $t('dashboard.sevenDay') }}</div>
|
||||
<div class="header-title" :class="{'active':currentType === 'month'}" @click="selectTime('month')">{{ $t('dashboard.monthDay') }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-loading="loading" class="charts-box">
|
||||
<Chart :options="realTimeOptions" :class-name="'chart'" />
|
||||
</div>
|
||||
</ItemBox>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { GetPCSElecData } from '@/api/home-page/index'
|
||||
import * as echarts from 'echarts'
|
||||
export default {
|
||||
name: 'Index',
|
||||
props: {
|
||||
stationId: {
|
||||
type: Number,
|
||||
default: undefined
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
realTimeOptions: undefined,
|
||||
currentType: 'day',
|
||||
color: ['#00b7ec', '#FFB800'],
|
||||
loading: false
|
||||
}
|
||||
},
|
||||
computed: {},
|
||||
watch: {},
|
||||
created() {},
|
||||
mounted() {
|
||||
// this.initCharts()
|
||||
},
|
||||
methods: {
|
||||
selectTime(type) {
|
||||
this.currentType = type
|
||||
this.getData()
|
||||
},
|
||||
getData() {
|
||||
this.getElecData()
|
||||
// this.getIncomeData()
|
||||
},
|
||||
async getElecData() {
|
||||
this.loading = true
|
||||
const params = {
|
||||
stationId: this.stationId,
|
||||
type: this.currentType
|
||||
}
|
||||
try {
|
||||
const res = await GetPCSElecData(params)
|
||||
this.initCharts(res.data, 1)
|
||||
} catch (error) {
|
||||
// console.log(error);
|
||||
} finally {
|
||||
this.loading = false
|
||||
}
|
||||
},
|
||||
// async getIncomeData() {
|
||||
// const params = {
|
||||
// stationId: this.stationId,
|
||||
// type: this.currentType
|
||||
// }
|
||||
// const res = await GetIncomeData(params)
|
||||
// this.initCharts(res.data, 2)
|
||||
// },
|
||||
initCharts(val, type) {
|
||||
const x_data = []
|
||||
const charge_data = []
|
||||
const discharge_data = []
|
||||
// let benefit_data = [0, 0, 0, 0, 0, 0, 0]
|
||||
if (val && val.length > 0) {
|
||||
val.forEach(item => {
|
||||
x_data.push(item.date)
|
||||
charge_data.push(item.chargeElec)
|
||||
discharge_data.push(item.dischargeElec)
|
||||
})
|
||||
}
|
||||
this.realTimeOptions = {
|
||||
grid: {
|
||||
top: '25%',
|
||||
left: '10%',
|
||||
right: '10%',
|
||||
bottom: '5%',
|
||||
containLabel: true
|
||||
},
|
||||
legend: {},
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
backgroundColor: 'rgba(0,0,0,0,)',
|
||||
borderColor: 'rgba(0,0,0,0,);',
|
||||
borderWidth: 0,
|
||||
textStyle: {
|
||||
width: 160,
|
||||
height: 250,
|
||||
lineHeight: 24,
|
||||
color: '#ffffff',
|
||||
fontSize: '14',
|
||||
fontFamily: 'SourceHanSansCN-Normal'
|
||||
},
|
||||
formatter: params => {
|
||||
// 获取xAxis data中的数据
|
||||
let dataStr = `<div><p style="font-weight:bold;margin:0 8px 15px;">${params[0].name}</p></div>`
|
||||
params.forEach(item => {
|
||||
dataStr += `<div>
|
||||
<div style="margin: 0 8px;">
|
||||
<span style="display:inline-block;margin-right:5px;width:10px;height:10px;background-color:${this.color[item.componentIndex]};"></span>
|
||||
<span>${item.seriesName}</span>
|
||||
<span style="float:right;color:#00C8FF;margin-left:20px;">${item.data}</span>
|
||||
</div>
|
||||
</div>`
|
||||
})
|
||||
const div = `<div style='border: 1px solid ;
|
||||
border-image: linear-gradient(130deg, #FFFFFF 0%, rgba(201,255,243,0.00) 22%, rgba(201,255,243,0.00) 75%, rgba(201,255,243,0.00) 80%, #FFFFFF 99%, #FFFFFF 99%) 1;
|
||||
box-shadow: inset 0px 2px 16px 0px rgba(0, 148, 255, 0.4);' >${dataStr}</div>`
|
||||
return div
|
||||
}
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
type: 'category',
|
||||
data: x_data,
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: '#90e9d8'
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
show: true,
|
||||
color: '#CEEBFF'
|
||||
},
|
||||
|
||||
axisTick: {
|
||||
show: false
|
||||
}
|
||||
}
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
type: 'value',
|
||||
name: `${this.$t('dashboard.chargingandDischarging')}(kWh)`,
|
||||
nameTextStyle: {
|
||||
color: ' rgba(255, 255, 255, 0.5)'
|
||||
},
|
||||
axisLine: {
|
||||
show: false,
|
||||
lineStyle: {
|
||||
color: '#90e9d8'
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
show: true,
|
||||
color: '#CEEBFF'
|
||||
},
|
||||
|
||||
axisTick: {
|
||||
show: false
|
||||
}
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: `${this.$t('dashboard.charging')}`,
|
||||
type: 'bar',
|
||||
// data: [219, 215, 216, 219, 220, 215, 214],
|
||||
data: charge_data,
|
||||
// barWidth: 14, // 柱状图的宽度
|
||||
color: '#00C8FF',
|
||||
itemStyle: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{ offset: 0, color: 'rgba(0,200,255,0.90)' },
|
||||
{ offset: 1, color: 'rgba(0, 200, 255, 0.0)' }
|
||||
])
|
||||
}
|
||||
},
|
||||
{
|
||||
name: `${this.$t('dashboard.disCharging')}`,
|
||||
type: 'bar',
|
||||
data: discharge_data,
|
||||
// data: [206, 203, 204, 206, 210, 205, 206],
|
||||
// barWidth: 14, // 柱状图的宽度
|
||||
color: '#CEEBFF',
|
||||
itemStyle: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{ offset: 0, color: 'rgba(255, 184, 0,0.90)' },
|
||||
{ offset: 1, color: 'rgba(255, 184, 0,0.00)' }
|
||||
])
|
||||
}
|
||||
}
|
||||
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.bottom-left-wrapper {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
.header-right-box {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
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%);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.charts-box {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
228
src/views/dashboardtest/components/bottom-left/standard-215.vue
Normal file
228
src/views/dashboardtest/components/bottom-left/standard-215.vue
Normal file
@ -0,0 +1,228 @@
|
||||
<template>
|
||||
<div class="bottom-left-wrapper">
|
||||
<ItemBox :title=" $t('dashboard.chargingDischarging') ">
|
||||
<div slot="header">
|
||||
<div class="header-right-box">
|
||||
<div class="header-title" :class="{'active':currentType === 'day'}" @click="selectTime('day')">{{ $t('dashboard.sevenDay') }}</div>
|
||||
<div class="header-title" :class="{'active':currentType === 'month'}" @click="selectTime('month')">{{ $t('dashboard.monthDay') }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-loading="loading" class="charts-box">
|
||||
<Chart ref="chart" :key="key" :options="powerOptions" :class-name="'chart'" />
|
||||
</div>
|
||||
</ItemBox>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as echarts from 'echarts'
|
||||
import { GetPCSElecData } from '@/api/home-page/index'
|
||||
|
||||
export default {
|
||||
name: 'Index',
|
||||
props: {
|
||||
stationId: {
|
||||
type: Number,
|
||||
default: undefined
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
powerOptions: undefined,
|
||||
currentType: 'day',
|
||||
color: ['#00b7ec', '#FFB800'],
|
||||
loading: false,
|
||||
key: 0
|
||||
}
|
||||
},
|
||||
created() {},
|
||||
mounted() {
|
||||
// this.initCharts()
|
||||
},
|
||||
methods: {
|
||||
selectTime(type) {
|
||||
this.currentType = type
|
||||
this.getData()
|
||||
},
|
||||
getData() {
|
||||
this.getElecData()
|
||||
// this.getIncomeData()
|
||||
},
|
||||
async getElecData() {
|
||||
this.loading = true
|
||||
const params = {
|
||||
stationId: this.stationId,
|
||||
type: this.currentType
|
||||
}
|
||||
try {
|
||||
const res = await GetPCSElecData(params)
|
||||
this.initCharts(res.data, 1)
|
||||
} catch (error) {
|
||||
// console.log(error);
|
||||
} finally {
|
||||
this.loading = false
|
||||
}
|
||||
},
|
||||
initCharts(val, type) {
|
||||
const x_data = []
|
||||
const charge_data = []
|
||||
const discharge_data = []
|
||||
// let benefit_data = [0, 0, 0, 0, 0, 0, 0]
|
||||
if (val && val.length > 0) {
|
||||
val.forEach(item => {
|
||||
x_data.push(item.date)
|
||||
charge_data.push(item.chargeElec)
|
||||
discharge_data.push(item.dischargeElec)
|
||||
})
|
||||
}
|
||||
this.powerOptions = {
|
||||
grid: {
|
||||
top: '25%',
|
||||
left: '10%',
|
||||
right: '10%',
|
||||
bottom: '5%',
|
||||
containLabel: true
|
||||
},
|
||||
legend: {},
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
backgroundColor: 'rgba(0,0,0,0,)',
|
||||
borderColor: 'rgba(0,0,0,0,);',
|
||||
borderWidth: 0,
|
||||
textStyle: {
|
||||
width: 160,
|
||||
height: 250,
|
||||
lineHeight: 24,
|
||||
color: '#ffffff',
|
||||
fontSize: '14',
|
||||
fontFamily: 'SourceHanSansCN-Normal'
|
||||
},
|
||||
formatter: params => {
|
||||
// 获取xAxis data中的数据
|
||||
let dataStr = `<div><p style="font-weight:bold;margin:0 8px 15px;">${params[0].name}</p></div>`
|
||||
params.forEach(item => {
|
||||
dataStr += `<div>
|
||||
<div style="margin: 0 8px;">
|
||||
<span style="display:inline-block;margin-right:5px;width:10px;height:10px;background-color:${this.color[item.componentIndex]};"></span>
|
||||
<span>${item.seriesName}</span>
|
||||
<span style="float:right;color:#00C8FF;margin-left:20px;">${item.data}</span>
|
||||
</div>
|
||||
</div>`
|
||||
})
|
||||
const div = `<div style='border: 1px solid ;
|
||||
border-image: linear-gradient(130deg, #FFFFFF 0%, rgba(201,255,243,0.00) 22%, rgba(201,255,243,0.00) 75%, rgba(201,255,243,0.00) 80%, #FFFFFF 99%, #FFFFFF 99%) 1;
|
||||
box-shadow: inset 0px 2px 16px 0px rgba(0, 148, 255, 0.4);' >${dataStr}</div>`
|
||||
return div
|
||||
}
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
type: 'category',
|
||||
data: x_data,
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: '#90e9d8'
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
show: true,
|
||||
color: '#CEEBFF'
|
||||
},
|
||||
|
||||
axisTick: {
|
||||
show: false
|
||||
}
|
||||
}
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
type: 'value',
|
||||
name: `${this.$t('dashboard.chargingandDischarging')}(kWh)`,
|
||||
nameTextStyle: {
|
||||
color: ' rgba(255, 255, 255, 0.5)'
|
||||
},
|
||||
axisLine: {
|
||||
show: false,
|
||||
lineStyle: {
|
||||
color: '#90e9d8'
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
show: true,
|
||||
color: '#CEEBFF'
|
||||
},
|
||||
|
||||
axisTick: {
|
||||
show: false
|
||||
}
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: `${this.$t('dashboard.charging')}`,
|
||||
type: 'bar',
|
||||
// data: [219, 215, 216, 219, 220, 215, 214],
|
||||
data: charge_data,
|
||||
// barWidth: 14, // 柱状图的宽度
|
||||
color: '#00C8FF',
|
||||
itemStyle: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{ offset: 0, color: 'rgba(0,200,255,0.90)' },
|
||||
{ offset: 1, color: 'rgba(0, 200, 255, 0.0)' }
|
||||
])
|
||||
}
|
||||
},
|
||||
{
|
||||
name: `${this.$t('dashboard.disCharging')}`,
|
||||
type: 'bar',
|
||||
data: discharge_data,
|
||||
// data: [206, 203, 204, 206, 210, 205, 206],
|
||||
// barWidth: 14, // 柱状图的宽度
|
||||
color: '#CEEBFF',
|
||||
itemStyle: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{ offset: 0, color: 'rgba(255, 184, 0,0.90)' },
|
||||
{ offset: 1, color: 'rgba(255, 184, 0,0.00)' }
|
||||
])
|
||||
}
|
||||
}
|
||||
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.bottom-left-wrapper {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
.header-right-box {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
|
||||
.header-title {
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
letter-spacing: 0em;
|
||||
color: rgba(206, 235, 255, 0.5);
|
||||
white-space: nowrap;
|
||||
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%);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.charts-box {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
307
src/views/dashboardtest/components/bottom-right/common.vue
Normal file
307
src/views/dashboardtest/components/bottom-right/common.vue
Normal file
@ -0,0 +1,307 @@
|
||||
<template>
|
||||
<div class="bottom-left-wrapper">
|
||||
<ItemBox :title="$t('dashboard.runCurve')">
|
||||
<div v-loading="loading" class="charts-box">
|
||||
<Chart :options="runOptions" :class-name="'chart'" />
|
||||
</div>
|
||||
</ItemBox>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { GetRealtimeCurve } from '@/api/home-page/index'
|
||||
import * as echarts from 'echarts'
|
||||
import { chartYIndex } from '@/utils/index'
|
||||
|
||||
export default {
|
||||
name: 'Index',
|
||||
props: {
|
||||
stationId: {
|
||||
type: Number,
|
||||
default: 0
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
runOptions: undefined,
|
||||
serviceList: [],
|
||||
nameArr: [],
|
||||
color: [],
|
||||
color2: [
|
||||
[
|
||||
{
|
||||
offset: 0.0,
|
||||
color: 'rgba(206, 235, 255, 0.1)'
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: 'rgba(206, 235, 255, 0.2)'
|
||||
}
|
||||
],
|
||||
[
|
||||
{
|
||||
offset: 0.0,
|
||||
color: 'rgba(255, 184, 0, 0.1)'
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: 'rgba(255, 184, 0, 0.2)'
|
||||
}
|
||||
]
|
||||
],
|
||||
loading: false
|
||||
}
|
||||
},
|
||||
computed: {},
|
||||
watch: {},
|
||||
created() {},
|
||||
mounted() {
|
||||
// this.initCharts()
|
||||
},
|
||||
methods: {
|
||||
async getData() {
|
||||
this.loading = true
|
||||
const params = {
|
||||
stationId: this.stationId
|
||||
}
|
||||
try {
|
||||
const res = await GetRealtimeCurve(params)
|
||||
this.initCharts(res.data)
|
||||
} catch (error) {
|
||||
// console.log(error)
|
||||
} finally {
|
||||
this.loading = false
|
||||
}
|
||||
},
|
||||
initCharts(val) {
|
||||
let x_data = []
|
||||
const valueArr = []
|
||||
this.nameArr = []
|
||||
if (val && val.length > 0) {
|
||||
val.forEach((item, index) => {
|
||||
valueArr.push(item.list)
|
||||
this.nameArr.push(item.deviceName + item.name)
|
||||
if (item.list.length) {
|
||||
x_data = []
|
||||
item.list.forEach((el) => {
|
||||
x_data.push(el.date)
|
||||
})
|
||||
}
|
||||
})
|
||||
|
||||
// val[0].
|
||||
const valueArr2 = []
|
||||
valueArr.forEach((item, index) => {
|
||||
const arr = []
|
||||
item.forEach((item2, index2) => {
|
||||
arr.push(item2.digital)
|
||||
valueArr2[index] = arr
|
||||
})
|
||||
})
|
||||
this.serviceList = []
|
||||
valueArr2.forEach((item, index) => {
|
||||
this.serviceList.push({
|
||||
data: item,
|
||||
type: 'line',
|
||||
name: this.nameArr[index],
|
||||
showSymbol: false,
|
||||
yAxisIndex: chartYIndex(val[index]),
|
||||
color: this.color[index],
|
||||
lineStyle: {
|
||||
color: this.color[index]
|
||||
},
|
||||
areaStyle: {
|
||||
color: new echarts.graphic.LinearGradient(
|
||||
0,
|
||||
1,
|
||||
0,
|
||||
0,
|
||||
this.color2[index]
|
||||
)
|
||||
}
|
||||
})
|
||||
})
|
||||
} else {
|
||||
this.runOptions = {
|
||||
title: {
|
||||
text: `${this.$t('dashboard.noData')}`,
|
||||
x: 'center',
|
||||
y: 'center',
|
||||
textStyle: {
|
||||
fontSize: 14,
|
||||
fontWeight: 'normal'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
this.runOptions = {
|
||||
grid: {
|
||||
top: '25%',
|
||||
left: '5%',
|
||||
right: '3%',
|
||||
bottom: '5%',
|
||||
containLabel: true
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
backgroundColor: 'rgba(0,0,0,0,)',
|
||||
borderColor: 'rgba(0,0,0,0,);',
|
||||
borderWidth: 0,
|
||||
textStyle: {
|
||||
width: 160,
|
||||
height: 250,
|
||||
lineHeight: 24,
|
||||
color: '#ffffff',
|
||||
fontSize: '14',
|
||||
fontFamily: 'SourceHanSansCN-Normal'
|
||||
},
|
||||
formatter: (params) => {
|
||||
// 获取xAxis data中的数据
|
||||
let dataStr = `<div><p style="font-weight:bold;margin:0 8px 15px;">${params[0].name}</p></div>`
|
||||
params.forEach((item) => {
|
||||
dataStr += `<div>
|
||||
<div style="margin: 0 8px;">
|
||||
<span style="display:inline-block;margin-right:5px;width:10px;height:10px;background-color:${
|
||||
item.color
|
||||
};"></span>
|
||||
<span>${item.seriesName}</span>
|
||||
<span style="float:right;color:#00C8FF;margin-left:20px;">${
|
||||
item.data === null ? '' : item.data
|
||||
}</span>
|
||||
</div>
|
||||
</div>`
|
||||
})
|
||||
const div = `<div style='border: 1px solid ;
|
||||
border-image: linear-gradient(130deg, #FFFFFF 0%, rgba(201,255,243,0.00) 22%, rgba(201,255,243,0.00) 75%, rgba(201,255,243,0.00) 80%, #FFFFFF 99%, #FFFFFF 99%) 1;
|
||||
box-shadow: inset 0px 2px 16px 0px rgba(0, 148, 255, 0.4);' >${dataStr}</div>`
|
||||
return div
|
||||
}
|
||||
},
|
||||
|
||||
legend: {
|
||||
type: 'scroll',
|
||||
top: 20,
|
||||
bottom: 20,
|
||||
padding: [0, 180],
|
||||
icon: 'circle',
|
||||
align: 'left',
|
||||
itemWidth: 10,
|
||||
itemHeight: 8,
|
||||
itemGap: 15,
|
||||
textStyle: {
|
||||
color: '#fff',
|
||||
rich: {
|
||||
name: {
|
||||
fontSize: 12,
|
||||
color: '#ffffff',
|
||||
padding: [0, 10, 0, 0]
|
||||
},
|
||||
num: {
|
||||
fontSize: 16,
|
||||
color: '#ffffff'
|
||||
},
|
||||
unit: {
|
||||
fontSize: 16,
|
||||
color: '#ffffff'
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
},
|
||||
xAxis: {
|
||||
data: x_data,
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: '#90e9d8'
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
show: true,
|
||||
color: '#CEEBFF'
|
||||
},
|
||||
|
||||
axisTick: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
yAxis: [
|
||||
{
|
||||
name: `${this.$t('dashboard.power')}（kW）`,
|
||||
type: 'value',
|
||||
nameTextStyle: {
|
||||
color: ' rgba(255, 255, 255, 0.5)'
|
||||
},
|
||||
axisLine: {
|
||||
show: false,
|
||||
lineStyle: {
|
||||
color: '#90e9d8'
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
show: true,
|
||||
color: '#CEEBFF'
|
||||
},
|
||||
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
min: function(value) {
|
||||
return Math.floor(
|
||||
(Math.abs(value.min) < value.max
|
||||
? -value.max * 1.05
|
||||
: value.min * 1.05
|
||||
).toFixed(2)
|
||||
)
|
||||
},
|
||||
max: function(value) {
|
||||
return Math.ceil(
|
||||
(Math.abs(value.min) < value.max
|
||||
? value.max * 1.05
|
||||
: -value.min * 1.05
|
||||
).toFixed(2)
|
||||
)
|
||||
}
|
||||
},
|
||||
{
|
||||
name: 'SOC(%)',
|
||||
type: 'value',
|
||||
max: 100,
|
||||
min: -100,
|
||||
ming: 0,
|
||||
nameTextStyle: {
|
||||
color: ' rgba(255, 255, 255, 0.5)'
|
||||
},
|
||||
axisLine: {
|
||||
show: false,
|
||||
lineStyle: {
|
||||
color: '#90e9d8'
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
show: true,
|
||||
color: '#CEEBFF'
|
||||
},
|
||||
|
||||
axisTick: {
|
||||
show: false
|
||||
}
|
||||
}
|
||||
],
|
||||
series: this.serviceList
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.bottom-left-wrapper {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.charts-box {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
</style>
|
||||
291
src/views/dashboardtest/components/bottom-right/disposition.vue
Normal file
291
src/views/dashboardtest/components/bottom-right/disposition.vue
Normal file
@ -0,0 +1,291 @@
|
||||
<template>
|
||||
<div class="bottom-left-wrapper">
|
||||
<ItemBox :title="$t('dashboard.runCurve')" :show-curve-setting="true" @handleSetting="handleSetting">
|
||||
<div v-loading="loading" class="charts-box">
|
||||
<Chart :options="runOptions" :class-name="'chart'" />
|
||||
</div>
|
||||
</ItemBox>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { GetDynamicRealtimeCurve } from '@/api/home-page/index'
|
||||
import * as echarts from 'echarts'
|
||||
import { chartYIndex } from '@/utils/index'
|
||||
export default {
|
||||
name: 'Index',
|
||||
props: {
|
||||
stationId: {
|
||||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
permissionId: {
|
||||
type: Number,
|
||||
default: null
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
runOptions: undefined,
|
||||
serviceList: [],
|
||||
nameArr: [],
|
||||
color: [],
|
||||
color2: [[{
|
||||
offset: 0.0,
|
||||
color: 'rgba(206, 235, 255, 0.1)'
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: 'rgba(206, 235, 255, 0.2)'
|
||||
}], [
|
||||
{
|
||||
offset: 0.0,
|
||||
color: 'rgba(255, 184, 0, 0.1)'
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: 'rgba(255, 184, 0, 0.2)'
|
||||
}
|
||||
]],
|
||||
loading: false
|
||||
}
|
||||
},
|
||||
computed: {},
|
||||
watch: {},
|
||||
created() {},
|
||||
mounted() {
|
||||
// this.initCharts()
|
||||
},
|
||||
methods: {
|
||||
handleSetting() {
|
||||
this.$emit('handleSetting')
|
||||
},
|
||||
async getData() {
|
||||
this.loading = true
|
||||
const params = {
|
||||
stationId: this.stationId,
|
||||
pageLocation: 'runChart',
|
||||
permissionId: this.permissionId
|
||||
}
|
||||
try {
|
||||
const res = await GetDynamicRealtimeCurve(params)
|
||||
if (res.data) {
|
||||
this.initCharts(res.data)
|
||||
}
|
||||
} catch (error) {
|
||||
// console.log(error)
|
||||
} finally {
|
||||
this.loading = false
|
||||
}
|
||||
},
|
||||
initCharts(val) {
|
||||
let x_data = []
|
||||
const valueArr = []
|
||||
this.nameArr = []
|
||||
if (val && val.length > 0) {
|
||||
val.forEach((item, index) => {
|
||||
valueArr.push(item.list)
|
||||
this.nameArr.push(item.name)
|
||||
if (item.list.length) {
|
||||
x_data = []
|
||||
item.list.forEach((el) => {
|
||||
x_data.push(el.date)
|
||||
})
|
||||
}
|
||||
})
|
||||
const valueArr2 = []
|
||||
valueArr.forEach((item, index) => {
|
||||
const arr = []
|
||||
item.forEach((item2, index2) => {
|
||||
arr.push(item2.digital)
|
||||
valueArr2[index] = arr
|
||||
})
|
||||
})
|
||||
this.serviceList = []
|
||||
valueArr2.forEach((item, index) => {
|
||||
this.serviceList.push({
|
||||
data: item,
|
||||
type: 'line',
|
||||
name: this.nameArr[index],
|
||||
showSymbol: false,
|
||||
yAxisIndex: chartYIndex(val[index]),
|
||||
color: this.color[index],
|
||||
lineStyle: {
|
||||
color: this.color[index]
|
||||
},
|
||||
areaStyle: {
|
||||
color: new echarts.graphic.LinearGradient(0, 1, 0, 0, this.color2[index])
|
||||
}
|
||||
})
|
||||
})
|
||||
this.runOptions = {
|
||||
grid: {
|
||||
top: '25%',
|
||||
left: '5%',
|
||||
right: '3%',
|
||||
bottom: '5%',
|
||||
containLabel: true
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
backgroundColor: 'rgba(0,0,0,0,)',
|
||||
borderColor: 'rgba(0,0,0,0,);',
|
||||
borderWidth: 0,
|
||||
appendToBody: true,
|
||||
textStyle: {
|
||||
width: 160,
|
||||
height: 250,
|
||||
lineHeight: 24,
|
||||
color: '#ffffff',
|
||||
fontSize: '14',
|
||||
fontFamily: 'SourceHanSansCN-Normal'
|
||||
},
|
||||
formatter: params => {
|
||||
// 获取xAxis data中的数据
|
||||
let dataStr = `<div><p style="font-weight:bold;margin:0 8px 15px;z-index: 9999999;">${params[0].name}</p></div>`
|
||||
params.forEach(item => {
|
||||
dataStr += `<div>
|
||||
<div style="margin: 0 8px;">
|
||||
<span style="display:inline-block;margin-right:5px;width:10px;height:10px;background-color:${item.color};"></span>
|
||||
<span>${item.seriesName}</span>
|
||||
<span style="float:right;color:#00C8FF;margin-left:20px;">${item.data === null ? '' : item.data}</span>
|
||||
</div>
|
||||
</div>`
|
||||
})
|
||||
const div = `<div style='border: 1px solid ;
|
||||
border-image: linear-gradient(130deg, #FFFFFF 0%, rgba(201,255,243,0.00) 22%, rgba(201,255,243,0.00) 75%, rgba(201,255,243,0.00) 80%, #FFFFFF 99%, #FFFFFF 99%) 1;
|
||||
box-shadow: inset 0px 2px 16px 0px rgba(0, 148, 255, 0.4);' >${dataStr}</div>`
|
||||
return div
|
||||
}
|
||||
},
|
||||
|
||||
legend: {
|
||||
type: 'scroll',
|
||||
top: 20,
|
||||
bottom: 20,
|
||||
padding: [0, 180],
|
||||
icon: 'circle',
|
||||
align: 'left',
|
||||
itemWidth: 10,
|
||||
itemHeight: 8,
|
||||
itemGap: 15,
|
||||
textStyle: {
|
||||
color: '#fff',
|
||||
rich: {
|
||||
name: {
|
||||
fontSize: 12,
|
||||
color: '#ffffff',
|
||||
padding: [0, 10, 0, 0]
|
||||
},
|
||||
num: {
|
||||
fontSize: 16,
|
||||
color: '#ffffff'
|
||||
},
|
||||
unit: {
|
||||
fontSize: 16,
|
||||
color: '#ffffff'
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
},
|
||||
xAxis: {
|
||||
data: x_data,
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: '#90e9d8'
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
show: true,
|
||||
color: '#CEEBFF'
|
||||
},
|
||||
|
||||
axisTick: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
yAxis: [{
|
||||
name: this.$t('dashboard.power') + '（kW）',
|
||||
type: 'value',
|
||||
nameTextStyle: {
|
||||
color: ' rgba(255, 255, 255, 0.5)'
|
||||
},
|
||||
axisLine: {
|
||||
show: false,
|
||||
lineStyle: {
|
||||
color: '#90e9d8'
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
show: true,
|
||||
color: '#CEEBFF'
|
||||
},
|
||||
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
min: function(value) {
|
||||
return Math.floor((Math.abs(value.min) < value.max ? -value.max * 1.05 : value.min * 1.05).toFixed(2))
|
||||
},
|
||||
max: function(value) {
|
||||
return Math.ceil((Math.abs(value.min) < value.max ? value.max * 1.05 : -value.min * 1.05).toFixed(2))
|
||||
}
|
||||
},
|
||||
{
|
||||
name: 'SOC(%)',
|
||||
type: 'value',
|
||||
max: 100,
|
||||
min: -100,
|
||||
ming: 0,
|
||||
nameTextStyle: {
|
||||
color: ' rgba(255, 255, 255, 0.5)'
|
||||
},
|
||||
axisLine: {
|
||||
show: false,
|
||||
lineStyle: {
|
||||
color: '#90e9d8'
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
show: true,
|
||||
color: '#CEEBFF'
|
||||
},
|
||||
|
||||
axisTick: {
|
||||
show: false
|
||||
}
|
||||
|
||||
}],
|
||||
series: this.serviceList
|
||||
}
|
||||
} else {
|
||||
this.runOptions = {
|
||||
title: {
|
||||
text: this.$t('dashboard.noData'),
|
||||
x: 'center',
|
||||
y: 'center',
|
||||
textStyle: {
|
||||
fontSize: 14,
|
||||
fontWeight: 'normal'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.bottom-left-wrapper{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.charts-box{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
</style>
|
||||
298
src/views/dashboardtest/components/bottom-right/standard-215.vue
Normal file
298
src/views/dashboardtest/components/bottom-right/standard-215.vue
Normal file
@ -0,0 +1,298 @@
|
||||
<template>
|
||||
<div class="bottom-left-wrapper">
|
||||
<ItemBox :title="$t('dashboard.runCurve')">
|
||||
<div v-loading="loading" class="charts-box">
|
||||
<Chart :options="runOptions" :class-name="'chart'" />
|
||||
|
||||
</div>
|
||||
</ItemBox>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { GetRealtimeCurve } from '@/api/home-page/index'
|
||||
import * as echarts from 'echarts'
|
||||
import { chartYIndex } from '@/utils/index'
|
||||
|
||||
export default {
|
||||
name: 'Index',
|
||||
props: {
|
||||
stationId: {
|
||||
type: Number,
|
||||
default: 0
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
runOptions: undefined,
|
||||
serviceList: [],
|
||||
nameArr: [],
|
||||
color: [],
|
||||
color2: [[{
|
||||
offset: 0.0,
|
||||
color: 'rgba(206, 235, 255, 0.1)'
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: 'rgba(206, 235, 255, 0.2)'
|
||||
}], [
|
||||
{
|
||||
offset: 0.0,
|
||||
color: 'rgba(255, 184, 0, 0.1)'
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: 'rgba(255, 184, 0, 0.2)'
|
||||
}
|
||||
]],
|
||||
loading: false
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
language() {
|
||||
return this.$store.getters.language || undefined
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
language: {
|
||||
handler(val) {
|
||||
this.getData()
|
||||
}
|
||||
},
|
||||
deep: true
|
||||
},
|
||||
created() {},
|
||||
mounted() {
|
||||
// this.initCharts()
|
||||
},
|
||||
methods: {
|
||||
async getData() {
|
||||
this.loading = true
|
||||
const params = {
|
||||
stationId: this.stationId
|
||||
}
|
||||
try {
|
||||
const res = await GetRealtimeCurve(params)
|
||||
this.initCharts(res.data)
|
||||
} catch (error) {
|
||||
// console.log(error)
|
||||
} finally {
|
||||
this.loading = false
|
||||
}
|
||||
},
|
||||
initCharts(val) {
|
||||
let x_data = []
|
||||
const valueArr = []
|
||||
this.nameArr = []
|
||||
if (val && val.length > 0) {
|
||||
val.forEach((item, index) => {
|
||||
valueArr.push(item.list.length ? item.list : [''])
|
||||
this.nameArr.push(item.deviceName + item.name)
|
||||
if (item.list.length) {
|
||||
x_data = []
|
||||
item.list.forEach((el) => {
|
||||
x_data.push(el.date)
|
||||
})
|
||||
}
|
||||
})
|
||||
|
||||
const valueArr2 = []
|
||||
valueArr.forEach((item, index) => {
|
||||
const arr = []
|
||||
item.forEach((item2, index2) => {
|
||||
arr.push(item2.digital)
|
||||
valueArr2[index] = arr
|
||||
})
|
||||
})
|
||||
|
||||
this.serviceList = []
|
||||
valueArr2.forEach((item, index) => {
|
||||
this.serviceList.push({
|
||||
data: item,
|
||||
type: 'line',
|
||||
name: this.nameArr[index],
|
||||
showSymbol: false,
|
||||
yAxisIndex: chartYIndex(val[index]),
|
||||
color: this.color[index],
|
||||
lineStyle: {
|
||||
color: this.color[index]
|
||||
},
|
||||
// areaStyle: {
|
||||
// color: '#CEEBFF',
|
||||
// opacity: 0.1
|
||||
// },
|
||||
// 设置面积区域为渐变效果
|
||||
areaStyle: {
|
||||
color: new echarts.graphic.LinearGradient(0, 1, 0, 0, this.color2[index])
|
||||
}
|
||||
})
|
||||
})
|
||||
} else {
|
||||
this.runOptions = {
|
||||
title: {
|
||||
text: `${this.$t('dashboard.noData')}`,
|
||||
x: 'center',
|
||||
y: 'center',
|
||||
textStyle: {
|
||||
fontSize: 14,
|
||||
fontWeight: 'normal'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
this.runOptions = {
|
||||
grid: {
|
||||
top: '25%',
|
||||
left: '5%',
|
||||
right: '3%',
|
||||
bottom: '5%',
|
||||
containLabel: true
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
backgroundColor: 'rgba(0,0,0,0,)',
|
||||
borderColor: 'rgba(0,0,0,0,);',
|
||||
borderWidth: 0,
|
||||
textStyle: {
|
||||
width: 160,
|
||||
height: 250,
|
||||
lineHeight: 24,
|
||||
color: '#ffffff',
|
||||
fontSize: '14',
|
||||
fontFamily: 'SourceHanSansCN-Normal'
|
||||
},
|
||||
formatter: params => {
|
||||
// 获取xAxis data中的数据
|
||||
let dataStr = `<div><p style="font-weight:bold;margin:0 8px 15px;">${params[0].name}</p></div>`
|
||||
params.forEach(item => {
|
||||
dataStr += `<div>
|
||||
<div style="margin: 0 8px;">
|
||||
<span style="display:inline-block;margin-right:5px;width:10px;height:10px;background-color:${item.color};"></span>
|
||||
<span>${item.seriesName}</span>
|
||||
<span style="float:right;color:#00C8FF;margin-left:20px;">${item.data === null ? '' : item.data}</span>
|
||||
</div>
|
||||
</div>`
|
||||
})
|
||||
const div = `<div style='border: 1px solid ;
|
||||
border-image: linear-gradient(130deg, #FFFFFF 0%, rgba(201,255,243,0.00) 22%, rgba(201,255,243,0.00) 75%, rgba(201,255,243,0.00) 80%, #FFFFFF 99%, #FFFFFF 99%) 1;
|
||||
box-shadow: inset 0px 2px 16px 0px rgba(0, 148, 255, 0.4);' >${dataStr}</div>`
|
||||
return div
|
||||
}
|
||||
},
|
||||
|
||||
legend: {
|
||||
type: 'scroll',
|
||||
top: 20,
|
||||
bottom: 20,
|
||||
padding: [0, 180],
|
||||
icon: 'circle',
|
||||
align: 'left',
|
||||
itemWidth: 10,
|
||||
itemHeight: 8,
|
||||
itemGap: 15,
|
||||
textStyle: {
|
||||
color: '#fff',
|
||||
rich: {
|
||||
name: {
|
||||
fontSize: 12,
|
||||
color: '#ffffff',
|
||||
padding: [0, 10, 0, 0]
|
||||
},
|
||||
num: {
|
||||
fontSize: 16,
|
||||
color: '#ffffff'
|
||||
},
|
||||
unit: {
|
||||
fontSize: 16,
|
||||
color: '#ffffff'
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
},
|
||||
xAxis: {
|
||||
data: x_data,
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: '#90e9d8'
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
show: true,
|
||||
color: '#CEEBFF'
|
||||
},
|
||||
|
||||
axisTick: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
yAxis: [{
|
||||
name: `${this.$t('dashboard.power')}（kW）`,
|
||||
type: 'value',
|
||||
nameTextStyle: {
|
||||
color: ' rgba(255, 255, 255, 0.5)'
|
||||
},
|
||||
axisLine: {
|
||||
show: false,
|
||||
lineStyle: {
|
||||
color: '#90e9d8'
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
show: true,
|
||||
color: '#CEEBFF'
|
||||
},
|
||||
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
min: function(value) {
|
||||
return Math.floor((Math.abs(value.min) < value.max ? -value.max * 1.05 : value.min * 1.05).toFixed(2))
|
||||
},
|
||||
max: function(value) {
|
||||
return Math.ceil((Math.abs(value.min) < value.max ? value.max * 1.05 : -value.min * 1.05).toFixed(2))
|
||||
}
|
||||
},
|
||||
{
|
||||
name: 'SOC(%)',
|
||||
type: 'value',
|
||||
max: 100,
|
||||
min: -100,
|
||||
ming: 0,
|
||||
nameTextStyle: {
|
||||
color: ' rgba(255, 255, 255, 0.5)'
|
||||
},
|
||||
axisLine: {
|
||||
show: false,
|
||||
lineStyle: {
|
||||
color: '#90e9d8'
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
show: true,
|
||||
color: '#CEEBFF'
|
||||
},
|
||||
|
||||
axisTick: {
|
||||
show: false
|
||||
}
|
||||
|
||||
}],
|
||||
series: this.serviceList
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.bottom-left-wrapper{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.charts-box{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
</style>
|
||||
182
src/views/dashboardtest/components/center-right/common.vue
Normal file
182
src/views/dashboardtest/components/center-right/common.vue
Normal file
@ -0,0 +1,182 @@
|
||||
<template>
|
||||
<div class="huankong-wrap">
|
||||
<ItemBox :title="$t('dashboard.environmentalData')">
|
||||
<div v-if="airArr.length" v-loading="loading" class="box">
|
||||
<template v-for="(item,index) in airArr">
|
||||
<div :key="index" class="air-box">
|
||||
<div class="value">{{ item.value }}</div>
|
||||
<div class="label">
|
||||
<span class="air-left-jt " />
|
||||
<span class="air-icon left" />
|
||||
<span />
|
||||
<span class="name">{{ item.name }}</span>
|
||||
<span class="air-icon right" />
|
||||
<span class="air-right-jt " />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
</div>
|
||||
<div v-else class="box">
|
||||
<div class="empty">{{ $t("dashboard.noData") }}</div>
|
||||
</div>
|
||||
</ItemBox>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { GetAirConfig } from '@/api/home-page/index'
|
||||
export default {
|
||||
name: 'Index',
|
||||
props: {
|
||||
stationId: {
|
||||
type: Number,
|
||||
default: 0
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
hkList: [],
|
||||
statusData: {
|
||||
dischargCapacity: '',
|
||||
rechargeCapacity: '',
|
||||
grid: '',
|
||||
loading: false
|
||||
|
||||
},
|
||||
airArr: []
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
|
||||
},
|
||||
watch: {},
|
||||
created() {
|
||||
|
||||
},
|
||||
mounted() { },
|
||||
methods: {
|
||||
async getData() {
|
||||
this.loading = true
|
||||
try {
|
||||
const res = await GetAirConfig({ stationId: this.stationId })
|
||||
this.airArr = res.data
|
||||
// console.log(this.airArr)
|
||||
} catch (error) {
|
||||
// console.log(error);
|
||||
} finally {
|
||||
this.loading = false
|
||||
}
|
||||
},
|
||||
async GetStatusMonitor() {
|
||||
// this.loading = true
|
||||
// const params = {
|
||||
// stationId: this.stationId
|
||||
// }
|
||||
// try {
|
||||
// const { data } = await GetCircleCtr(params)
|
||||
// this.hkList = data
|
||||
// } catch (error) {
|
||||
// // console.log(error);
|
||||
// } finally {
|
||||
// this.loading = false
|
||||
// }
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.huankong-wrap {
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
.box {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
flex-wrap: wrap;
|
||||
padding: 10px;
|
||||
height: 302px;
|
||||
overflow: auto;
|
||||
.empty {
|
||||
width: 100%;
|
||||
height: 280px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-family: Source Han Sans CN;
|
||||
font-size: 16px;
|
||||
color: rgba(206, 235, 255, 0.7);
|
||||
}
|
||||
.air-box {
|
||||
min-width: 120px;
|
||||
width: 47%;
|
||||
height: 60px;
|
||||
margin: 10px 0 0 0;
|
||||
background: url(../../../../assets/images/air-bg.png);
|
||||
background-size: 100% 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
.label {
|
||||
min-width: 86px;
|
||||
width: 100%;
|
||||
flex: 1;
|
||||
font-family: Source Han Sans CN;
|
||||
font-size: 14px;
|
||||
color: rgba(206, 235, 255, 0.7);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
.name{
|
||||
text-align: center;
|
||||
// min-width: 88px;
|
||||
}
|
||||
.air-icon {
|
||||
display: inline-block;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
background: url(../../../../assets/images/air-icon.png);
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
.air-left-jt {
|
||||
display: inline-block;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
line-height: 0px;
|
||||
background: url(../../../../assets/images/air-left.png);
|
||||
background-size: 100% 100%;
|
||||
margin-right: 10px;
|
||||
}
|
||||
.air-right-jt {
|
||||
display: inline-block;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
line-height: 0px;
|
||||
background: url(../../../../assets/images/air-right.png);
|
||||
background-size: 100% 100%;
|
||||
margin-left: 10px;
|
||||
}
|
||||
.left {
|
||||
margin-right: 10px;
|
||||
}
|
||||
.right {
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.value {
|
||||
width: 100%;
|
||||
flex: 1;
|
||||
font-family: DIN;
|
||||
font-size: 22px;
|
||||
color: #ffffff;
|
||||
text-shadow: 0px 0px 10px 0px #0094ff;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
</style>
|
||||
179
src/views/dashboardtest/components/center-right/disposition.vue
Normal file
179
src/views/dashboardtest/components/center-right/disposition.vue
Normal file
@ -0,0 +1,179 @@
|
||||
<template>
|
||||
<div class="huankong-wrap">
|
||||
<ItemBox :title="$t('dashboard.environmentalData')" :show-point-setting="true" @handleSetting="handleSetting">
|
||||
<div v-if="airArr.length" v-loading="loading" class="box">
|
||||
<div v-for="(item,index) in airArr" :key="index" class="air-box">
|
||||
<div class="value">{{ item.value }}</div>
|
||||
<div class="label">
|
||||
<span class="air-left-jt " />
|
||||
<span class="air-icon left" />
|
||||
<span />
|
||||
<span class="name">{{ item.name }}</span>
|
||||
<span class="air-icon right" />
|
||||
<span class="air-right-jt " />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div v-else class="box">
|
||||
<div class="empty">{{ $t("dashboard.noData") }}</div>
|
||||
</div>
|
||||
</ItemBox>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { DynamicConfigPoint } from '@/api/home-page/index'
|
||||
|
||||
export default {
|
||||
name: 'Index',
|
||||
props: {
|
||||
stationId: {
|
||||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
permissionId: {
|
||||
type: Number,
|
||||
default: 0
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
hkList: [],
|
||||
statusData: {
|
||||
dischargCapacity: '',
|
||||
rechargeCapacity: '',
|
||||
grid: '',
|
||||
loading: false,
|
||||
permissionId: null
|
||||
|
||||
},
|
||||
airArr: []
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
|
||||
},
|
||||
watch: {},
|
||||
created() {
|
||||
|
||||
},
|
||||
mounted() { },
|
||||
methods: {
|
||||
handleSetting() {
|
||||
this.$emit('handleSetting')
|
||||
},
|
||||
async getData() {
|
||||
this.loading = true
|
||||
try {
|
||||
const res = await DynamicConfigPoint({
|
||||
pageLocation: 'airData',
|
||||
permissionId: this.permissionId,
|
||||
stationId: this.stationId })
|
||||
this.airArr = res.data
|
||||
// console.log(this.airArr)
|
||||
} catch (error) {
|
||||
// console.log(error);
|
||||
} finally {
|
||||
this.loading = false
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.huankong-wrap {
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
.box {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
flex-wrap: wrap;
|
||||
padding: 10px;
|
||||
height: 302px;
|
||||
overflow: auto;
|
||||
.empty {
|
||||
width: 100%;
|
||||
height: 280px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-family: Source Han Sans CN;
|
||||
font-size: 16px;
|
||||
color: rgba(206, 235, 255, 0.7);
|
||||
}
|
||||
.air-box {
|
||||
min-width: 120px;
|
||||
width: 47%;
|
||||
height: 60px;
|
||||
margin: 10px 0 0 0;
|
||||
background: url(../../../../assets/images/air-bg.png);
|
||||
background-size: 100% 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
.label {
|
||||
min-width: 86px;
|
||||
width: 100%;
|
||||
flex: 1;
|
||||
font-family: Source Han Sans CN;
|
||||
font-size: 14px;
|
||||
color: rgba(206, 235, 255, 0.7);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
.name{
|
||||
text-align: center;
|
||||
// min-width: 88px;
|
||||
}
|
||||
.air-icon {
|
||||
display: inline-block;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
background: url(../../../../assets/images/air-icon.png);
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
.air-left-jt {
|
||||
display: inline-block;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
line-height: 0px;
|
||||
background: url(../../../../assets/images/air-left.png);
|
||||
background-size: 100% 100%;
|
||||
margin-right: 10px;
|
||||
}
|
||||
.air-right-jt {
|
||||
display: inline-block;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
line-height: 0px;
|
||||
background: url(../../../../assets/images/air-right.png);
|
||||
background-size: 100% 100%;
|
||||
margin-left: 10px;
|
||||
}
|
||||
.left {
|
||||
margin-right: 10px;
|
||||
}
|
||||
.right {
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.value {
|
||||
width: 100%;
|
||||
flex: 1;
|
||||
font-family: DIN;
|
||||
font-size: 22px;
|
||||
color: #ffffff;
|
||||
text-shadow: 0px 0px 10px 0px #0094ff;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
</style>
|
||||
334
src/views/dashboardtest/components/center-right/standard-215.vue
Normal file
334
src/views/dashboardtest/components/center-right/standard-215.vue
Normal file
@ -0,0 +1,334 @@
|
||||
<template>
|
||||
<div class="huankong-wrap">
|
||||
<ItemBox :title="$t('dashboard.environmentalData')">
|
||||
<div v-loading="loading" class="box">
|
||||
<div class="zhengxiang">
|
||||
<div class="left">
|
||||
<el-tooltip :content="$t('dashboard.indoorTem') + '(℃)'" placement="top" effect="dark">
|
||||
<div class="label">{{ $t('dashboard.indoorTem') }}(℃)</div>
|
||||
</el-tooltip>
|
||||
<div class="value">{{ toFix(formModel.airconditionInnerTemperature) }}</div>
|
||||
|
||||
<el-tooltip :content="$t('dashboard.heatBackLash') + '(℃)'" placement="top" effect="dark">
|
||||
<div class="label">{{ $t('dashboard.heatBackLash') }}(℃)</div>
|
||||
</el-tooltip>
|
||||
<div class="value">{{ toFix(formModel.airconditionReturnHot) }}</div>
|
||||
</div>
|
||||
<div class="center">
|
||||
<div class="label">{{ $t('dashboard.air') }}</div>
|
||||
</div>
|
||||
<div class="right">
|
||||
<el-tooltip :content="$t('dashboard.condensation') + '(℃)'" placement="top" effect="dark">
|
||||
<div class="label">{{ $t('dashboard.condensation') }}(℃)</div>
|
||||
</el-tooltip>
|
||||
<div class="value">{{ toFix(formModel.airconditionCondensation) }}</div>
|
||||
|
||||
<el-tooltip :content="$t('dashboard.coolBackLash') + '(℃)'" placement="top" effect="dark">
|
||||
<div class="label">{{ $t('dashboard.coolBackLash') }}(℃)</div>
|
||||
</el-tooltip>
|
||||
<div class="value">{{ toFix(formModel.airconditionReturnCold) }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="zhengxiang">
|
||||
<div class="left">
|
||||
<el-tooltip :content="$t('dashboard.indoorHum') + '(%)'" placement="top" effect="dark">
|
||||
<div class="label">{{ $t('dashboard.indoorHum') }}(%)</div>
|
||||
</el-tooltip>
|
||||
<div class="value">{{ toFix(formModel.airconditionInnerHumidity) }}</div>
|
||||
|
||||
<el-tooltip :content="$t('dashboard.shutPoint')" placement="top" effect="dark">
|
||||
<div class="label">{{ $t('dashboard.shutPoint') }}</div>
|
||||
</el-tooltip>
|
||||
<div class="value">{{ toFix(formModel.airconditionFanStopPoint) }}</div>
|
||||
</div>
|
||||
<div class="center">
|
||||
<!-- <div class="value">1</div> -->
|
||||
<div class="label">{{ $t('dashboard.air') }}</div>
|
||||
<!-- <div class="label">(kWh)</div> -->
|
||||
</div>
|
||||
<div class="right">
|
||||
<el-tooltip :content="$t('dashboard.refSetting') + '(℃)'" placement="top" effect="dark">
|
||||
<div class="label">{{ $t('dashboard.refSetting') }}(℃)</div>
|
||||
</el-tooltip>
|
||||
|
||||
<div class="value">{{ toFix(formModel.airconditionSetCold) }}</div>
|
||||
<el-tooltip :content="$t('dashboard.heatSetting') + '(℃)'" placement="top" effect="dark">
|
||||
<div class="label">{{ $t('dashboard.heatSetting') }}(℃)</div>
|
||||
</el-tooltip>
|
||||
<div class="value">{{ toFix(formModel.airconditionSetHot) }}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<!-- <div v-else class="box">
|
||||
<div class="empty">暂无数据</div>
|
||||
</div> -->
|
||||
</ItemBox>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { GetShanghaiKJYAirData } from '@/api/homePage-integrated/index'
|
||||
|
||||
export default {
|
||||
name: 'Index',
|
||||
props: {
|
||||
stationId: {
|
||||
type: Number,
|
||||
default: 0
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
hkList: [],
|
||||
formModel: {},
|
||||
loading: false,
|
||||
colList: ['airconditionInnerTemperature', 'airconditionReturnHot', 'airconditionCondensation', 'airconditionReturnCold', 'airconditionInnerHumidity', 'airconditionFanStopPoint', 'airconditionSetCold', 'airconditionSetHot']
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
|
||||
},
|
||||
watch: {},
|
||||
created() {
|
||||
},
|
||||
mounted() {
|
||||
|
||||
},
|
||||
methods: {
|
||||
toFix(val) {
|
||||
if (val) {
|
||||
const result = Number(val).toFixed(2)
|
||||
return result
|
||||
} else if (val === 0) {
|
||||
return 0
|
||||
} else {
|
||||
return ''
|
||||
}
|
||||
},
|
||||
async getData() {
|
||||
this.loading = true
|
||||
const params = {
|
||||
stationId: this.stationId,
|
||||
colList: this.colList
|
||||
}
|
||||
try {
|
||||
const { data } = await GetShanghaiKJYAirData(params)
|
||||
this.formModel = data
|
||||
} catch (error) {
|
||||
// console.log(error);
|
||||
} finally {
|
||||
this.loading = false
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.huankong-wrap{
|
||||
width: 100%;
|
||||
}
|
||||
.box {
|
||||
|
||||
.empty{
|
||||
width: 100%;
|
||||
height: 302px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-family: Source Han Sans CN;
|
||||
font-size: 16px;
|
||||
color: rgba(206, 235, 255, 0.7);
|
||||
|
||||
}
|
||||
// padding-top: 25px;
|
||||
// padding-bottom: 20px;
|
||||
.zhengxiang {
|
||||
width: 100%;
|
||||
// min-width: 362px;
|
||||
height: 135px;
|
||||
// background: url(../../../../../assets/images/dianbiao-zxdn-bg.png) no-repeat;
|
||||
// background:url(../../../../assets/images/dianbiao-zxdn-bg.png);
|
||||
// background-size: 100% 100%;
|
||||
margin: 10px 0;
|
||||
display: flex;
|
||||
|
||||
.left {
|
||||
flex: 1;
|
||||
height: 100%;
|
||||
background:url(../../../../assets/images/yuan-left.png);
|
||||
background-size: 100% 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
// padding-left: 10%;
|
||||
.label {
|
||||
margin-left: 10px;
|
||||
max-width: 100%;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
min-width: 86px;
|
||||
// width: 100%;
|
||||
// flex: 1;
|
||||
font-family: Source Han Sans CN;
|
||||
font-size: 14px;
|
||||
color: rgba(206, 235, 255, 0.7);
|
||||
// display: flex;
|
||||
text-align: center;
|
||||
height: 35px;
|
||||
line-height: 40px;
|
||||
// align-items: center;
|
||||
// justify-content: center;
|
||||
}
|
||||
|
||||
.value {
|
||||
width: 100%;
|
||||
flex: 1;
|
||||
font-family: DIN;
|
||||
font-size: 22px;
|
||||
color: #FFFFFF;
|
||||
text-shadow: 0px 0px 10px 0px #0094FF;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
|
||||
.center {
|
||||
background:url(../../../../assets/images/yuan-center.png);
|
||||
background-size: 100% 100%;
|
||||
width: 220px;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
.label {
|
||||
width: 100%;
|
||||
font-family: Source Han Sans CN;
|
||||
font-size: 14px;
|
||||
color: rgba(206, 235, 255, 0.7);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.value {
|
||||
width: 100%;
|
||||
font-family: DIN;
|
||||
font-size: 30px;
|
||||
color: #FFFFFF;
|
||||
text-align: center;
|
||||
text-shadow: 0px 0px 10px 0px #0094FF;
|
||||
}
|
||||
}
|
||||
|
||||
.right {
|
||||
flex: 1;
|
||||
// padding-right: 10%;
|
||||
height: 100%;
|
||||
background:url(../../../../assets/images/yuan-right.png);
|
||||
background-size: 100% 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
text-align: right;
|
||||
.label {
|
||||
margin-right: 10px;
|
||||
max-width: 113px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
min-width: 86px;
|
||||
// width: 100%;
|
||||
// flex: 1;
|
||||
font-family: Source Han Sans CN;
|
||||
font-size: 14px;
|
||||
color: rgba(206, 235, 255, 0.7);
|
||||
text-align: center;
|
||||
height: 35px;
|
||||
line-height: 40px;
|
||||
// justify-content: center;
|
||||
}
|
||||
|
||||
.value {
|
||||
width: 100%;
|
||||
flex: 1;
|
||||
font-family: DIN;
|
||||
font-size: 22px;
|
||||
color: #FFFFFF;
|
||||
text-shadow: 0px 0px 10px 0px #0094FF;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.yougonglv-wrap {
|
||||
width: 100%;
|
||||
min-width: 367px;
|
||||
min-height: 67px;
|
||||
background: url(../../../../assets/images/zongyougong-bg.png) no-repeat;
|
||||
background-size: 100% auto;
|
||||
margin: 10px 0;
|
||||
|
||||
.top {
|
||||
height: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding-left: 20%;
|
||||
width: 100%;
|
||||
|
||||
.name {
|
||||
display: inline-block;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.top-value {
|
||||
display: inline-block;
|
||||
font-size: 22px;
|
||||
padding-right: 20px;
|
||||
color: #fff;
|
||||
|
||||
.value {
|
||||
padding-right: 10px;
|
||||
}
|
||||
|
||||
.unit {
|
||||
color: #CEEBFF;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.bottom {
|
||||
height: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding-left: 20%;
|
||||
|
||||
.item {
|
||||
display: inline-block;
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.name {
|
||||
color: #CEEBFF
|
||||
}
|
||||
|
||||
.value {
|
||||
display: inline-block;
|
||||
padding-left: 5px;
|
||||
min-width: 35px;
|
||||
background: url(../../../../assets/images/jb.png) no-repeat;
|
||||
background-size: cover;
|
||||
color: #CEEBFF;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
207
src/views/dashboardtest/components/itemBox/position.vue
Normal file
207
src/views/dashboardtest/components/itemBox/position.vue
Normal file
@ -0,0 +1,207 @@
|
||||
<template>
|
||||
<div class="item-box">
|
||||
<div class="item-top">
|
||||
<el-popover
|
||||
placement="bottom"
|
||||
width="240"
|
||||
trigger="click"
|
||||
@show="changeTitle = title"
|
||||
@hide="handleSaveTitle"
|
||||
>
|
||||
<el-input v-model="changeTitle" maxlength="25" />
|
||||
<div slot="reference" class="top-title">{{ title }}</div>
|
||||
</el-popover>
|
||||
<div class="header-right">
|
||||
<slot name="header" />
|
||||
<i
|
||||
v-if="showPointSetting"
|
||||
slot="reference"
|
||||
v-permission="['business:dynamicConfig:addPointList']"
|
||||
class="el-icon-setting"
|
||||
style="
|
||||
font-size: 22px;
|
||||
cursor: pointer;
|
||||
color: #ceebff;
|
||||
margin-right: 3px;
|
||||
"
|
||||
@click="handleSetting"
|
||||
/>
|
||||
<i
|
||||
v-if="showCurveSetting"
|
||||
slot="reference"
|
||||
v-permission="['business:dynamicConfig:addCurveList']"
|
||||
class="el-icon-setting"
|
||||
style="
|
||||
font-size: 22px;
|
||||
cursor: pointer;
|
||||
color: #ceebff;
|
||||
margin-right: 3px;
|
||||
"
|
||||
@click="handleSetting"
|
||||
/>
|
||||
<svg-icon
|
||||
v-if="showScreen"
|
||||
:style="svgStyle"
|
||||
:icon-class="isFullscreen ? 'exit-fullscreen' : 'fullscreen'"
|
||||
@click="click"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item-con">
|
||||
<slot />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import screenfull from 'screenfull'
|
||||
export default {
|
||||
name: 'Index',
|
||||
components: {},
|
||||
props: {
|
||||
title: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
titleId: {
|
||||
type: [String, Number],
|
||||
default: ''
|
||||
},
|
||||
showPointSetting: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
showCurveSetting: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
showScreen: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
svgStyle: {
|
||||
display: 'inline-block',
|
||||
cursor: 'pointer',
|
||||
fill: '#ceebff',
|
||||
width: '16px',
|
||||
height: '16px',
|
||||
verticalAlign: '10px',
|
||||
marginRight: '5px'
|
||||
},
|
||||
isFullscreen: false,
|
||||
changeTitle: ''
|
||||
}
|
||||
},
|
||||
computed: {},
|
||||
watch: {},
|
||||
created() {},
|
||||
mounted() {
|
||||
this.init()
|
||||
},
|
||||
methods: {
|
||||
handleSaveTitle() {
|
||||
this.$emit('handleSaveTitle', this.changeTitle, this.titleId)
|
||||
},
|
||||
handleSetting() {
|
||||
this.$emit('handleSetting')
|
||||
},
|
||||
change() {
|
||||
this.isFullscreen = screenfull.isFullscreen
|
||||
},
|
||||
init() {
|
||||
if (screenfull.enabled) {
|
||||
screenfull.on('change', this.change)
|
||||
}
|
||||
},
|
||||
destroy() {
|
||||
if (screenfull.enabled) {
|
||||
screenfull.off('change', this.change)
|
||||
}
|
||||
},
|
||||
click() {
|
||||
this.$emit('screenFull', this.isFullscreen)
|
||||
const element = document.getElementById('app-main') // 指定全屏区域元素
|
||||
element.style.background =
|
||||
'url(' + require('../../../../assets/images/dashboardBg.png') + ')'
|
||||
if (screenfull.isEnabled) {
|
||||
screenfull.request(element)
|
||||
}
|
||||
screenfull.toggle(element)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.item-box {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
|
||||
.item-top {
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
opacity: 1;
|
||||
box-sizing: border-box;
|
||||
// border: 1px solid;
|
||||
// background: #003235;
|
||||
background-image: var(--item-header-bg);
|
||||
background-size: 100% 40px;
|
||||
// border-image: linear-gradient(
|
||||
// 11deg,
|
||||
// rgba(0, 148, 255, 0.5) 37%,
|
||||
// rgba(0, 148, 255, 0.5) 37%,
|
||||
// rgba(0, 148, 255, 0) 44%
|
||||
// )
|
||||
// 1;
|
||||
box-shadow: inset 0px 2px 16px 0px rgba(0, 148, 255, 0.15);
|
||||
// background:var(--table-bg);
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
.top-title {
|
||||
// width: 100%;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
font-size: 20px;
|
||||
font-weight: normal;
|
||||
letter-spacing: 0.2em;
|
||||
color: #ceebff;
|
||||
text-shadow: 0px 0px 10px #0094ff;
|
||||
font-family: var(--font-family);
|
||||
|
||||
padding: 0 10px;
|
||||
// background: linear-gradient(180deg, #c9fff3 0%, #c3fff2 13%, #32ffd2 63%);
|
||||
}
|
||||
.header-right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-left: auto;
|
||||
}
|
||||
}
|
||||
.item-con {
|
||||
flex: 1;
|
||||
margin-top: 5px;
|
||||
width: 100%;
|
||||
background:var(--table-bg);
|
||||
box-sizing: border-box;
|
||||
border: 1px solid;
|
||||
border-image: linear-gradient(
|
||||
108deg,
|
||||
#ffffff -7%,
|
||||
rgba(201, 255, 243, 0) 16%,
|
||||
rgba(201, 255, 243, 0) 75%,
|
||||
rgba(201, 255, 243, 0) 81%,
|
||||
#ffffff 102%,
|
||||
#ffffff 102%
|
||||
)
|
||||
1;
|
||||
box-shadow: inset 0px 2px 16px 0px rgba(0, 148, 255, 0.15);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
287
src/views/dashboardtest/components/top-center/common.vue
Normal file
287
src/views/dashboardtest/components/top-center/common.vue
Normal file
@ -0,0 +1,287 @@
|
||||
<template>
|
||||
<ItemBox :title="$t('dashboard.stationTopo')" style="min-height: 560px;">
|
||||
<div ref="svgLine" v-loading="loading" class="center-box">
|
||||
<svg
|
||||
version="1.1"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||
xml:space="preserve"
|
||||
class="circle-load-rect-svg"
|
||||
viewBox="0 0 800 500"
|
||||
>
|
||||
<defs>
|
||||
<defs>
|
||||
<radialGradient id="RadialGradient1">
|
||||
<stop offset="0%" stop-color="#fff" />
|
||||
<stop offset="30%" stop-color="#0171c1" />
|
||||
<stop offset="50%" stop-color="#035088" />
|
||||
<stop offset="100%" stop-color="#02395a" />
|
||||
</radialGradient>
|
||||
</defs>
|
||||
<marker
|
||||
id="markerCircle"
|
||||
markerWidth="15"
|
||||
markerHeight="15"
|
||||
refX="5"
|
||||
refY="5"
|
||||
>
|
||||
<circle
|
||||
cx="5"
|
||||
cy="5"
|
||||
r="5"
|
||||
style="stroke: none; fill: url(#RadialGradient1)"
|
||||
/>
|
||||
</marker>
|
||||
|
||||
<marker
|
||||
id="markerArrow"
|
||||
markerWidth="13"
|
||||
markerHeight="13"
|
||||
refX="2"
|
||||
refY="6"
|
||||
orient="auto"
|
||||
>
|
||||
<path d="M2,2 L2,11 L10,6 L2,2" style="fill: black" />
|
||||
</marker>
|
||||
</defs>
|
||||
<polyline
|
||||
points="115,206 673,206"
|
||||
fill="none"
|
||||
class="g-rect-path"
|
||||
stroke-width="1"
|
||||
stroke="#0094FF"
|
||||
stroke-dasharray="3 3"
|
||||
/>
|
||||
<circle
|
||||
cx="110"
|
||||
cy="206"
|
||||
r="8"
|
||||
style="stroke: none; fill: url(#RadialGradient1)"
|
||||
/>
|
||||
<!-- //动点 -->
|
||||
<circle cx="110" cy="206" r="8" style="stroke: none; fill: url(#RadialGradient1)">
|
||||
<animateMotion repeatCount="indefinite" dur="8s" begin="0s" :path="line.line2" />
|
||||
</circle>
|
||||
<circle
|
||||
cx="673"
|
||||
cy="206"
|
||||
r="8"
|
||||
style="stroke: none; fill: url(#RadialGradient1)"
|
||||
/>
|
||||
<!-- //动点 -->
|
||||
<circle cx="673" cy="206" r="8" style="stroke: none; fill: url(#RadialGradient1)">
|
||||
<animateMotion repeatCount="indefinite" dur="8s" begin="0s" :path="line.line1" />
|
||||
</circle>
|
||||
<!-- {{ $t("dashboard.dCCabin") }} -->
|
||||
<image
|
||||
v-if="stationId === 381"
|
||||
:xlink:href="tnHomeCang"
|
||||
x="680"
|
||||
y="162"
|
||||
width="60"
|
||||
height="80"
|
||||
/>
|
||||
<image
|
||||
v-else
|
||||
:xlink:href="configData.pcs"
|
||||
x="680"
|
||||
y="162"
|
||||
width="60"
|
||||
height="80"
|
||||
/>
|
||||
<!-- 电网 -->
|
||||
<image
|
||||
:xlink:href="configData.grid"
|
||||
x="35"
|
||||
y="162"
|
||||
width="60"
|
||||
height="80"
|
||||
/>
|
||||
<!-- {{ $t("dashboard.gridCab") }} -->
|
||||
<image
|
||||
:xlink:href="configData.gui"
|
||||
x="361"
|
||||
y="162"
|
||||
width="80"
|
||||
height="80"
|
||||
/>
|
||||
<!-- {{ $t("dashboard.dCCabin") }} -->
|
||||
<text x="635" y="290" fill="#ffffff" font-size="14">
|
||||
{{ $t("dashboard.workStatus") }}：
|
||||
</text>
|
||||
<text x="735" y="290" fill="#FFB800" font-size="14">
|
||||
{{ workStatus(formModel.activePowerPCS) }}
|
||||
</text>
|
||||
<text x="637" y="313" fill="#ffffff" font-size="14">
|
||||
{{ $t("dashboard.activePower") }}(kW)：
|
||||
</text>
|
||||
<text x="735" y="313" fill="#FFB800" font-size="14">
|
||||
{{ formModel.activePowerPCS }}
|
||||
</text>
|
||||
<text x="668" y="333" fill="#ffffff" font-size="14">
|
||||
SOC(%)：
|
||||
</text>
|
||||
<text x="735" y="333" fill="#FFB800" font-size="14">
|
||||
{{ formModel.soc }}
|
||||
</text>
|
||||
<text x="668" y="353" fill="#ffffff" font-size="14">
|
||||
SOH(%)：
|
||||
</text>
|
||||
<text x="735" y="353" fill="#FFB800" font-size="14">
|
||||
{{ formModel.soh }}
|
||||
</text>
|
||||
<text x="670" y="260" fill="#ffffff" font-size="14">
|
||||
{{ $t("dashboard.esiCab") }}
|
||||
</text>
|
||||
<text x="379" y="260" fill="#ffffff" font-size="14">
|
||||
{{ $t("dashboard.gridCab") }}
|
||||
</text>
|
||||
<text x="38" y="260" fill="#ffffff" font-size="14">
|
||||
{{ $t("dashboard.grid") }}
|
||||
</text>
|
||||
|
||||
</svg>
|
||||
</div>
|
||||
</ItemBox>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import homeOffice from '@/assets/images/home-office.png'
|
||||
import homeIntegrated from '@/assets/images/wxjd/pcs-energy.png'
|
||||
import homePowerGrid from '@/assets/images/home-powerGrid.png'
|
||||
import homeInverter from '@/assets/images/home-inverter-1.png'
|
||||
import tnHomeCang from '@/assets/images/wxjd/cabinet.png'
|
||||
import {
|
||||
GetbozhouTuopuStatus
|
||||
} from '@/api/homePage-integrated/index'
|
||||
import config from './config'
|
||||
import { changeTheme } from '@/utils/index'
|
||||
export default {
|
||||
name: 'Index',
|
||||
props: {
|
||||
stationType: {
|
||||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
stationId: {
|
||||
type: Number,
|
||||
default: 0
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
formModel: { soc: 0, soh: 0, activePowerPCS: 0.0, reactivePowerPCS: 0.0 },
|
||||
configData: {},
|
||||
partList: [
|
||||
{ soc: 0, soh: 0, activePowerPCS: 0.0, reactivePowerPCS: 0.0 },
|
||||
{ soc: 0, soh: 0, activePowerPCS: 0.0, reactivePowerPCS: 0.0 }
|
||||
],
|
||||
homeOffice,
|
||||
homeIntegrated,
|
||||
homePowerGrid,
|
||||
homeInverter,
|
||||
tnHomeCang,
|
||||
loading: false,
|
||||
currentIndex: 0,
|
||||
line: {
|
||||
line1: 'M 0,0 0,0', // {{ $t("dashboard.gridCab") }}和一体柜之间的连线 {{ $t("dashboard.gridCab") }}流向一体柜
|
||||
line2: 'M 0,0 0,0' // {{ $t("dashboard.gridCab") }}和电网之间的连线- 电网流向{{ $t("dashboard.gridCab") }}
|
||||
},
|
||||
otherLine: {
|
||||
line1: '410,220 170,220 ', // {{ $t("dashboard.gridCab") }}和一体柜之间的连线 一体柜流向{{ $t("dashboard.gridCab") }}
|
||||
line2: '600,220 410,220' // {{ $t("dashboard.gridCab") }}和电网之间的连线- {{ $t("dashboard.gridCab") }}流向电网
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
|
||||
},
|
||||
watch: {},
|
||||
created() {
|
||||
const result = changeTheme()
|
||||
this.configData = config[result]
|
||||
},
|
||||
mounted() { },
|
||||
methods: {
|
||||
getData() {
|
||||
this.getbozhouTuopuStatus()
|
||||
},
|
||||
// 对海南站处理
|
||||
workStatus(val) {
|
||||
if (this.formModel.flowDirection === 2) {
|
||||
if (+val > +1) {
|
||||
return this.$t('dashboard.disCharging')
|
||||
}
|
||||
if (+val < -1) {
|
||||
return this.$t('dashboard.charging')
|
||||
}
|
||||
if (val < 1 || +val.abs < 1 || !val) {
|
||||
return this.$t('dashboard.standing')
|
||||
}
|
||||
} else {
|
||||
if (+val > +1) {
|
||||
return this.$t('dashboard.charging')
|
||||
}
|
||||
if (+val < -1) {
|
||||
return this.$t('dashboard.disCharging')
|
||||
}
|
||||
if (val < 1 || +val.abs < 1 || !val) {
|
||||
return this.$t('dashboard.standing')
|
||||
}
|
||||
}
|
||||
},
|
||||
getFlowDirection(val) {
|
||||
if (this.formModel.flowDirection === 2) {
|
||||
if (+val > +1) {
|
||||
this.line.line1 = 'M 0,0 -270,0'
|
||||
this.line.line2 = 'M 301,0 0,0'
|
||||
}
|
||||
if (+val < -1) {
|
||||
this.line.line1 = 'M -272,0 0,0'
|
||||
this.line.line2 = 'M 0,0 301,0'
|
||||
}
|
||||
if (val === 0 || !val || (val > -1 && val < 1)) {
|
||||
this.line.line1 = ''
|
||||
this.line.line2 = ''
|
||||
}
|
||||
} else {
|
||||
if (+val > +1) {
|
||||
this.line.line1 = 'M -272,0 0,0'
|
||||
this.line.line2 = 'M 0,0 301,0'
|
||||
}
|
||||
if (+val < -1) {
|
||||
this.line.line1 = 'M 0,0 -270,0'
|
||||
this.line.line2 = 'M 301,0 0,0'
|
||||
}
|
||||
if (val === 0 || !val || (val > -1 && val < 1)) {
|
||||
this.line.line1 = ''
|
||||
this.line.line2 = ''
|
||||
}
|
||||
}
|
||||
},
|
||||
async getbozhouTuopuStatus() {
|
||||
this.loading = true
|
||||
const params = {
|
||||
stationId: this.stationId
|
||||
}
|
||||
try {
|
||||
const res = await GetbozhouTuopuStatus(params)
|
||||
this.formModel = res.data
|
||||
this.getFlowDirection(this.formModel.activePowerPCS)
|
||||
} catch (error) {
|
||||
// console.log(error);
|
||||
} finally {
|
||||
this.loading = false
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.center-box {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
33
src/views/dashboardtest/components/top-center/config.js
Normal file
33
src/views/dashboardtest/components/top-center/config.js
Normal file
@ -0,0 +1,33 @@
|
||||
import homePowerGrid from '@/assets/images/home-powerGrid.png'
|
||||
import homeInverter from '@/assets/images/home-inverter-1.png'
|
||||
import homeCang from '@/assets/images/wxjd/cabinet.png'
|
||||
import thHomeCang from '@/assets/images/wxjd/th-cabinet.png'
|
||||
import thHomeGui from '@/assets/images/wxjd/th-gui.png'
|
||||
import cabinetImg from '@/assets/images/wxjd/pcs-energy.png'
|
||||
import chargingPileImg from '@/assets/images/home-office.png'
|
||||
import thHome from '@/assets/images/wxjd/house.png'
|
||||
const hz = {
|
||||
pcs: homeCang,
|
||||
pcs2: cabinetImg,
|
||||
gui: homeInverter,
|
||||
grid: homePowerGrid,
|
||||
house: chargingPileImg
|
||||
}
|
||||
const th = {
|
||||
pcs: thHomeCang,
|
||||
pcs2: thHomeCang,
|
||||
gui: thHomeGui,
|
||||
grid: homePowerGrid,
|
||||
house: thHome
|
||||
}
|
||||
export default { hz, th }
|
||||
// let data = {}
|
||||
// if (JSON.parse(localStorage.getItem('themeConfig'))?.title === 'th') {
|
||||
// data = th
|
||||
// } else {
|
||||
// data = hz
|
||||
// }
|
||||
// export default data
|
||||
// console.log(123, store.getters.config.title === th){
|
||||
|
||||
// }
|
||||
786
src/views/dashboardtest/components/top-center/eighth.vue
Normal file
786
src/views/dashboardtest/components/top-center/eighth.vue
Normal file
@ -0,0 +1,786 @@
|
||||
<template>
|
||||
<ItemBox :title="$t('dashboard.stationTopo')" style="min-height: 560px;">
|
||||
<div ref="svgLine" class="center-box">
|
||||
<div v-loading="loading">
|
||||
<svg
|
||||
version="1.1"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||
xml:space="preserve"
|
||||
class="circle-load-rect-svg"
|
||||
viewBox="0 0 800 530"
|
||||
>
|
||||
<defs>
|
||||
<defs>
|
||||
<radialGradient id="RadialGradient1">
|
||||
<stop offset="0%" stop-color="#fff" />
|
||||
<stop offset="30%" stop-color="#0171c1" />
|
||||
<stop offset="50%" stop-color="#035088" />
|
||||
<stop offset="100%" stop-color="#02395a" />
|
||||
</radialGradient>
|
||||
</defs>
|
||||
<marker
|
||||
id="markerCircle"
|
||||
markerWidth="15"
|
||||
markerHeight="15"
|
||||
refX="5"
|
||||
refY="5"
|
||||
>
|
||||
<circle
|
||||
cx="5"
|
||||
cy="5"
|
||||
r="5"
|
||||
style="stroke: none; fill: url(#RadialGradient1)"
|
||||
/>
|
||||
</marker>
|
||||
|
||||
<marker
|
||||
id="markerArrow"
|
||||
markerWidth="13"
|
||||
markerHeight="13"
|
||||
refX="2"
|
||||
refY="6"
|
||||
orient="auto"
|
||||
>
|
||||
<path d="M2,2 L2,11 L10,6 L2,2" style="fill: black" />
|
||||
</marker>
|
||||
</defs>
|
||||
<!-- //线条 -->
|
||||
<!-- top -->
|
||||
<polyline
|
||||
points="154,60 630,60"
|
||||
fill="none"
|
||||
class="g-rect-path"
|
||||
stroke="#0094FF"
|
||||
stroke-dasharray="3 3"
|
||||
/>
|
||||
<!-- center -->
|
||||
<polyline
|
||||
points="385,60 385,320"
|
||||
fill="none"
|
||||
class="g-rect-path"
|
||||
stroke="#0094FF"
|
||||
stroke-dasharray="3 3"
|
||||
/>
|
||||
|
||||
<polyline
|
||||
points="385,100 460,100"
|
||||
fill="none"
|
||||
class="g-rect-path"
|
||||
stroke="#0094FF"
|
||||
stroke-dasharray="3 3"
|
||||
/>
|
||||
|
||||
<!-- bottom -->
|
||||
<polyline
|
||||
points="124,320 655,320"
|
||||
fill="none"
|
||||
class="g-rect-path"
|
||||
stroke="#0094FF"
|
||||
stroke-dasharray="3 3"
|
||||
/>
|
||||
|
||||
<circle
|
||||
cx="154"
|
||||
cy="60"
|
||||
r="8"
|
||||
style="stroke: none; fill: url(#RadialGradient1)"
|
||||
>
|
||||
<animateMotion
|
||||
repeatCount="indefinite"
|
||||
dur="4s"
|
||||
begin="0s"
|
||||
:path="dotData.lineTopLeft"
|
||||
/>
|
||||
</circle>
|
||||
|
||||
<circle
|
||||
cx="630"
|
||||
cy="60"
|
||||
r="8"
|
||||
style="stroke: none; fill: url(#RadialGradient1)"
|
||||
>
|
||||
<animateMotion
|
||||
repeatCount="indefinite"
|
||||
dur="4s"
|
||||
begin="0s"
|
||||
:path="dotData.lineTopRight"
|
||||
/>
|
||||
</circle>
|
||||
|
||||
<circle
|
||||
cx="128"
|
||||
cy="320"
|
||||
r="8"
|
||||
style="stroke: none; fill: url(#RadialGradient1)"
|
||||
>
|
||||
<animateMotion
|
||||
repeatCount="indefinite"
|
||||
dur="4s"
|
||||
begin="0s"
|
||||
:path="dotData.lineBottomOne"
|
||||
/>
|
||||
</circle>
|
||||
|
||||
<circle
|
||||
cx="210"
|
||||
cy="320"
|
||||
r="8"
|
||||
style="stroke: none; fill: url(#RadialGradient1)"
|
||||
>
|
||||
<animateMotion
|
||||
repeatCount="indefinite"
|
||||
dur="4s"
|
||||
begin="0s"
|
||||
:path="dotData.lineBottomTwo"
|
||||
/>
|
||||
</circle>
|
||||
|
||||
<circle
|
||||
cx="290"
|
||||
cy="320"
|
||||
r="8"
|
||||
style="stroke: none; fill: url(#RadialGradient1)"
|
||||
>
|
||||
<animateMotion
|
||||
repeatCount="indefinite"
|
||||
dur="4s"
|
||||
begin="0s"
|
||||
:path="dotData.lineBottomThree"
|
||||
/>
|
||||
</circle>
|
||||
|
||||
<circle
|
||||
cx="365"
|
||||
cy="320"
|
||||
r="8"
|
||||
style="stroke: none; fill: url(#RadialGradient1)"
|
||||
>
|
||||
<animateMotion
|
||||
repeatCount="indefinite"
|
||||
dur="4s"
|
||||
begin="0s"
|
||||
:path="dotData.lineBottomFour"
|
||||
/>
|
||||
</circle>
|
||||
|
||||
<circle
|
||||
cx="425"
|
||||
cy="320"
|
||||
r="8"
|
||||
style="stroke: none; fill: url(#RadialGradient1)"
|
||||
>
|
||||
<animateMotion
|
||||
repeatCount="indefinite"
|
||||
dur="4s"
|
||||
begin="0s"
|
||||
:path="dotData.lineBottomFive"
|
||||
/>
|
||||
</circle>
|
||||
|
||||
<circle
|
||||
cx="505"
|
||||
cy="320"
|
||||
r="8"
|
||||
style="stroke: none; fill: url(#RadialGradient1)"
|
||||
>
|
||||
<animateMotion
|
||||
repeatCount="indefinite"
|
||||
dur="4s"
|
||||
begin="0s"
|
||||
:path="dotData.lineBottomSix"
|
||||
/>
|
||||
</circle>
|
||||
|
||||
<circle
|
||||
cx="585"
|
||||
cy="320"
|
||||
r="8"
|
||||
style="stroke: none; fill: url(#RadialGradient1)"
|
||||
>
|
||||
<animateMotion
|
||||
repeatCount="indefinite"
|
||||
dur="4s"
|
||||
begin="0s"
|
||||
:path="dotData.lineBottomSeven"
|
||||
/>
|
||||
</circle>
|
||||
|
||||
<circle
|
||||
cx="665"
|
||||
cy="320"
|
||||
r="8"
|
||||
style="stroke: none; fill: url(#RadialGradient1)"
|
||||
>
|
||||
<animateMotion
|
||||
repeatCount="indefinite"
|
||||
dur="4s"
|
||||
begin="0s"
|
||||
:path="dotData.lineBottomEight"
|
||||
/>
|
||||
</circle>
|
||||
|
||||
<!-- top -->
|
||||
<circle
|
||||
cx="154"
|
||||
cy="60"
|
||||
r="8"
|
||||
style="stroke: none; fill: url(#RadialGradient1);cursor: pointer;"
|
||||
@click="disposition('eight-line-top-left')"
|
||||
/>
|
||||
<circle
|
||||
cx="630"
|
||||
cy="60"
|
||||
r="8"
|
||||
style="stroke: none; fill: url(#RadialGradient1);cursor: pointer;"
|
||||
@click="disposition('eight-line-top-right')"
|
||||
/>
|
||||
|
||||
<circle
|
||||
cx="460"
|
||||
cy="100"
|
||||
r="8"
|
||||
style="stroke: none; fill: url(#RadialGradient1)"
|
||||
/>
|
||||
|
||||
<!-- bottom -->
|
||||
<circle
|
||||
cx="128"
|
||||
cy="320"
|
||||
r="8"
|
||||
style="stroke: none; fill: url(#RadialGradient1);cursor: pointer;"
|
||||
@click="disposition('eight-line-bottom-one')"
|
||||
/>
|
||||
<circle
|
||||
cx="210"
|
||||
cy="320"
|
||||
r="8"
|
||||
style="stroke: none; fill: url(#RadialGradient1);cursor: pointer;"
|
||||
@click="disposition('eight-line-bottom-two')"
|
||||
/>
|
||||
<circle
|
||||
cx="290"
|
||||
cy="320"
|
||||
r="8"
|
||||
style="stroke: none; fill: url(#RadialGradient1);cursor: pointer;"
|
||||
@click="disposition('eight-line-bottom-three')"
|
||||
/>
|
||||
<circle
|
||||
cx="365"
|
||||
cy="320"
|
||||
r="8"
|
||||
style="stroke: none; fill: url(#RadialGradient1);cursor: pointer;"
|
||||
@click="disposition('eight-line-bottom-four')"
|
||||
/>
|
||||
|
||||
<circle
|
||||
cx="425"
|
||||
cy="320"
|
||||
r="8"
|
||||
style="stroke: none; fill: url(#RadialGradient1);cursor: pointer;"
|
||||
@click="disposition('eight-line-bottom-five')"
|
||||
/>
|
||||
|
||||
<circle
|
||||
cx="505"
|
||||
cy="320"
|
||||
r="8"
|
||||
style="stroke: none; fill: url(#RadialGradient1);cursor: pointer;"
|
||||
@click="disposition('eight-line-bottom-six')"
|
||||
/>
|
||||
|
||||
<circle
|
||||
cx="585"
|
||||
cy="320"
|
||||
r="8"
|
||||
style="stroke: none; fill: url(#RadialGradient1);cursor: pointer;"
|
||||
@click="disposition('eight-line-bottom-seven')"
|
||||
/>
|
||||
<circle
|
||||
cx="665"
|
||||
cy="320"
|
||||
r="8"
|
||||
style="stroke: none; fill: url(#RadialGradient1);cursor: pointer;"
|
||||
@click="disposition('eight-line-bottom-eight')"
|
||||
/>
|
||||
|
||||
<!-- 图片和文字 -->
|
||||
|
||||
<!-- 市电 -->
|
||||
<image
|
||||
:xlink:href="gridImg"
|
||||
x="70"
|
||||
y="10"
|
||||
width="60"
|
||||
height="87"
|
||||
/>
|
||||
<text x="70" y="110" fill="#ffffff" font-size="14"> {{ $t("dashboard.grid") }}</text>
|
||||
|
||||
<!-- {{ $t("dashboard.load") }} -->
|
||||
<image
|
||||
:xlink:href="chargingPileImg"
|
||||
x="650"
|
||||
y="10"
|
||||
width="60"
|
||||
height="87"
|
||||
/>
|
||||
<text x="675" y="110" fill="#ffffff" font-size="14"> {{ $t("dashboard.load") }}</text>
|
||||
|
||||
<!-- 1#PCS -->
|
||||
<image
|
||||
:xlink:href="cabinetImg"
|
||||
x="100"
|
||||
y="330"
|
||||
width="50"
|
||||
height="50"
|
||||
style="cursor: pointer;"
|
||||
@click="disposition('eight_pcs_1')"
|
||||
/>
|
||||
<text x="94" y="410" fill="#ffffff" font-size="14"> {{ hiddenTextWord(`1#${$t("dashboard.cabinet")}`,8) }}</text>
|
||||
<!-- 2#PCS -->
|
||||
<image
|
||||
:xlink:href="cabinetImg"
|
||||
x="180"
|
||||
y="330"
|
||||
width="50"
|
||||
height="50"
|
||||
style="cursor: pointer;"
|
||||
@click="disposition('eight_pcs_2')"
|
||||
/>
|
||||
<text x="173" y="410" fill="#ffffff" font-size="14">{{ hiddenTextWord(`2#${$t("dashboard.cabinet")}`,8) }}</text>
|
||||
|
||||
<!-- 3#PCS -->
|
||||
<image
|
||||
:xlink:href="cabinetImg"
|
||||
x="260"
|
||||
y="330"
|
||||
width="50"
|
||||
height="50"
|
||||
style="cursor: pointer;"
|
||||
@click="disposition('eight_pcs_3')"
|
||||
/>
|
||||
<text x="255" y="410" fill="#ffffff" font-size="14">{{ hiddenTextWord(`3#${$t("dashboard.cabinet")}`,8) }}</text>
|
||||
|
||||
<!-- 4#PCS -->
|
||||
<image
|
||||
:xlink:href="cabinetImg"
|
||||
x="340"
|
||||
y="330"
|
||||
width="50"
|
||||
height="50"
|
||||
style="cursor: pointer;"
|
||||
@click="disposition('eight_pcs_4')"
|
||||
/>
|
||||
<text x="335" y="410" fill="#ffffff" font-size="14">{{ hiddenTextWord(`4#${$t("dashboard.cabinet")}`,8) }}</text>
|
||||
|
||||
<!-- 5#PCS -->
|
||||
<image
|
||||
:xlink:href="cabinetImg"
|
||||
x="400"
|
||||
y="330"
|
||||
width="50"
|
||||
height="50"
|
||||
style="cursor: pointer;"
|
||||
@click="disposition('eight_pcs_5')"
|
||||
/>
|
||||
<text x="400" y="410" fill="#ffffff" font-size="14">{{ hiddenTextWord(`5#${$t("dashboard.cabinet")}`,8) }}</text>
|
||||
|
||||
<!-- 6#PCS -->
|
||||
<image
|
||||
:xlink:href="cabinetImg"
|
||||
x="480"
|
||||
y="330"
|
||||
width="50"
|
||||
height="50"
|
||||
style="cursor: pointer;"
|
||||
@click="disposition('eight_pcs_6')"
|
||||
/>
|
||||
<text x="475" y="410" fill="#ffffff" font-size="14">{{ hiddenTextWord(`6#${$t("dashboard.cabinet")}`,8) }}</text>
|
||||
|
||||
<image
|
||||
:xlink:href="cabinetImg"
|
||||
x="560"
|
||||
y="330"
|
||||
width="50"
|
||||
height="50"
|
||||
style="cursor: pointer;"
|
||||
@click="disposition('eight_pcs_7')"
|
||||
/>
|
||||
<text x="555" y="410" fill="#ffffff" font-size="14">{{ hiddenTextWord(`7#${$t("dashboard.cabinet")}`,8) }}</text>
|
||||
|
||||
<image
|
||||
:xlink:href="cabinetImg"
|
||||
x="640"
|
||||
y="330"
|
||||
width="50"
|
||||
height="50"
|
||||
style="cursor: pointer;"
|
||||
@click="disposition('eight_pcs_8')"
|
||||
/>
|
||||
<text x="630" y="410" fill="#ffffff" font-size="14">{{ hiddenTextWord(`8#${$t("dashboard.cabinet")}`,8) }}</text>
|
||||
|
||||
<!-- 变压器 -->
|
||||
<image
|
||||
:xlink:href="distributionCabinetImg"
|
||||
x="330"
|
||||
y="145"
|
||||
width="120"
|
||||
height="85"
|
||||
/>
|
||||
|
||||
<!-- {{ $t("dashboard.ammeter") }} -->
|
||||
<image
|
||||
:xlink:href="ammeterImg"
|
||||
x="455"
|
||||
y="80"
|
||||
width="80"
|
||||
height="40"
|
||||
style="cursor: pointer;"
|
||||
@click="disposition('eighth_ammeter_1')"
|
||||
/>
|
||||
<g v-for="(item,index) in ammeter_1" :key="item.id">
|
||||
<text x="435" :y="150 + ( 20 * index)" fill="#ffffff" font-size="14">
|
||||
{{ item.name }}
|
||||
</text>
|
||||
<text :x="countChineseAndEnglishCharacters(item.name,445)" :y="150 + ( 20 * index)" fill="#FFB800" font-size="14">
|
||||
{{ item.value }}
|
||||
</text>
|
||||
</g>
|
||||
|
||||
<!-- 左侧 -->
|
||||
<!-- 1#PCS -->
|
||||
<text x="10" y="440" fill="#ffffff" font-size="14">SOC(%)：</text>
|
||||
<text x="10" y="460" fill="#ffffff" font-size="14">SOH(%)：</text>
|
||||
<text x="10" y="480" fill="#ffffff" font-size="14">{{ $t("dashboard.workStatus") }}：</text>
|
||||
<text x="10" y="500" fill="#ffffff" font-size="14">{{ $t("dashboard.activePower") }}(kW)：</text>
|
||||
<!-- 1#PCS -->
|
||||
<text x="110" y="440" fill="#FFB800" font-size="14">{{ pcsData_1.length ? pcsData_1[0].value : '' }}</text>
|
||||
<text x="110" y="460" fill="#FFB800" font-size="14">{{ pcsData_1.length > 1 ? pcsData_1[1].value : '' }}</text>
|
||||
<text x="110" y="480" fill="#FFB800" font-size="14">{{ pcsData_1.length > 2 ? pcsData_1[2].value : '' }}</text>
|
||||
<text x="110" y="500" fill="#FFB800" font-size="14">{{ pcsData_1.length > 3 ? pcsData_1[3].value : '' }}</text>
|
||||
<!-- 2#PCS -->
|
||||
<text x="190" y="440" fill="#FFB800" font-size="14">{{ pcsData_2.length ? pcsData_2[0].value : '' }}</text>
|
||||
<text x="190" y="460" fill="#FFB800" font-size="14">{{ pcsData_2.length > 1 ? pcsData_2[1].value : '' }}</text>
|
||||
<text x="190" y="480" fill="#FFB800" font-size="14">{{ pcsData_2.length > 2 ? pcsData_2[2].value : '' }}</text>
|
||||
<text x="190" y="500" fill="#FFB800" font-size="14">{{ pcsData_2.length > 3 ? pcsData_2[3].value : '' }}</text>
|
||||
<!-- 3#PCS -->
|
||||
<text x="265" y="440" fill="#FFB800" font-size="14">{{ pcsData_3.length ? pcsData_3[0].value : '' }}</text>
|
||||
<text x="265" y="460" fill="#FFB800" font-size="14">{{ pcsData_3.length > 1 ? pcsData_3[1].value : '' }}</text>
|
||||
<text x="265" y="480" fill="#FFB800" font-size="14">{{ pcsData_3.length > 2 ? pcsData_3[2].value : '' }}</text>
|
||||
<text x="265" y="500" fill="#FFB800" font-size="14">{{ pcsData_3.length > 3 ? pcsData_3[3].value : '' }}</text>
|
||||
<!-- 4#PCS -->
|
||||
<text x="340" y="440" fill="#FFB800" font-size="14">{{ pcsData_4.length ? pcsData_4[0].value : '' }}</text>
|
||||
<text x="340" y="460" fill="#FFB800" font-size="14">{{ pcsData_4.length > 1 ? pcsData_4[1].value : '' }}</text>
|
||||
<text x="340" y="480" fill="#FFB800" font-size="14">{{ pcsData_4.length > 2 ? pcsData_4[2].value : '' }}</text>
|
||||
<text x="340" y="500" fill="#FFB800" font-size="14">{{ pcsData_4.length > 3 ? pcsData_4[3].value : '' }}</text>
|
||||
<!-- 5#PCS -->
|
||||
<text x="410" y="440" fill="#FFB800" font-size="14">{{ pcsData_5.length ? pcsData_5[0].value : '' }}</text>
|
||||
<text x="410" y="460" fill="#FFB800" font-size="14">{{ pcsData_5.length > 1 ? pcsData_5[1].value : '' }}</text>
|
||||
<text x="410" y="480" fill="#FFB800" font-size="14">{{ pcsData_5.length > 2 ? pcsData_5[2].value : '' }}</text>
|
||||
<text x="410" y="500" fill="#FFB800" font-size="14">{{ pcsData_5.length > 3 ? pcsData_5[3].value : '' }}</text>
|
||||
<!-- 6#PCS -->
|
||||
<text x="490" y="440" fill="#FFB800" font-size="14">{{ pcsData_6.length ? pcsData_6[0].value : '' }}</text>
|
||||
<text x="490" y="460" fill="#FFB800" font-size="14">{{ pcsData_6.length > 1 ? pcsData_6[1].value : '' }}</text>
|
||||
<text x="490" y="480" fill="#FFB800" font-size="14">{{ pcsData_6.length > 2 ? pcsData_6[2].value : '' }}</text>
|
||||
<text x="490" y="500" fill="#FFB800" font-size="14">{{ pcsData_6.length > 3 ? pcsData_6[3].value : '' }}</text>
|
||||
<!-- 7#PCS -->
|
||||
<text x="570" y="440" fill="#FFB800" font-size="14">{{ pcsData_7.length ? pcsData_7[0].value : '' }}</text>
|
||||
<text x="570" y="460" fill="#FFB800" font-size="14">{{ pcsData_7.length > 1 ? pcsData_7[1].value : '' }}</text>
|
||||
<text x="570" y="480" fill="#FFB800" font-size="14">{{ pcsData_7.length > 2 ? pcsData_7[2].value : '' }}</text>
|
||||
<text x="570" y="500" fill="#FFB800" font-size="14">{{ pcsData_7.length > 3 ? pcsData_7[3].value : '' }}</text>
|
||||
<!-- 8#PCS -->
|
||||
<text x="650" y="440" fill="#FFB800" font-size="14">{{ pcsData_8.length ? pcsData_8[0].value : '' }}</text>
|
||||
<text x="650" y="460" fill="#FFB800" font-size="14">{{ pcsData_8.length > 1 ? pcsData_8[1].value : '' }}</text>
|
||||
<text x="650" y="480" fill="#FFB800" font-size="14">{{ pcsData_8.length > 2 ? pcsData_8[2].value : '' }}</text>
|
||||
<text x="650" y="500" fill="#FFB800" font-size="14">{{ pcsData_8.length > 3 ? pcsData_8[3].value : '' }}</text>
|
||||
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<DispositionPointData :disposition-show="show_point_dispostion" :page-location="pageLocation" @close="closePoint" @getData="getDynamicPointData" />
|
||||
|
||||
</ItemBox>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import gridImg from '@/assets/images/wxjd/grid.png'
|
||||
import ammeterImg from '@/assets/images/wxjd/ammeter.png'
|
||||
import cabinetImg from '@/assets/images/wxjd/pcs-energy.png'
|
||||
import chargingPileImg from '@/assets/images/home-office.png'
|
||||
import distributionCabinetImg from '@/assets/images/wxjd/guiImg.png'
|
||||
import frameImg from '@/assets/images/wxjd/frame.png'
|
||||
import cangImg from '@/assets/images/home-cang.png'
|
||||
import { DynamicConfigPoint } from '@/api/home-page/index'
|
||||
import { hiddenTextWord } from '@/utils/index'
|
||||
export default {
|
||||
name: 'Index',
|
||||
props: {
|
||||
stationType: {
|
||||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
stationId: {
|
||||
type: Number,
|
||||
default: 0
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
hiddenTextWord,
|
||||
gridImg,
|
||||
ammeterImg,
|
||||
cabinetImg,
|
||||
chargingPileImg,
|
||||
distributionCabinetImg,
|
||||
cangImg,
|
||||
frameImg,
|
||||
pcsData_1: [],
|
||||
pcsData_2: [],
|
||||
pcsData_3: [],
|
||||
pcsData_4: [],
|
||||
pcsData_5: [],
|
||||
pcsData_6: [],
|
||||
pcsData_7: [],
|
||||
pcsData_8: [],
|
||||
ammeter_1: [],
|
||||
partList: [
|
||||
{ soc: 0, soh: 0, activePowerPCS: 0.0, reactivePowerPCS: 0.0 },
|
||||
{ soc: 0, soh: 0, activePowerPCS: 0.0, reactivePowerPCS: 0.0 },
|
||||
{ soc: 0, soh: 0, activePowerPCS: 0.0, reactivePowerPCS: 0.0 },
|
||||
{ soc: 0, soh: 0, activePowerPCS: 0.0, reactivePowerPCS: 0.0 },
|
||||
{ soc: 0, soh: 0, activePowerPCS: 0.0, reactivePowerPCS: 0.0 }
|
||||
],
|
||||
// 充电
|
||||
// dotData: {
|
||||
// lineTopLeft: "M 238,0 0,0",
|
||||
// lineTopRight: "M 0,0 -230,0",
|
||||
// lineBottomOne: "M 258,-260, 258, 0, 0 ,0",
|
||||
// lineBottomTwo: "M 176,-260, 176, 0, 0 ,0",
|
||||
// lineBottomThree: "M 96,-260, 96, 0, 0 ,0",
|
||||
// lineBottomFour: "M 21,-260, 21, 0, 0 ,0",
|
||||
// lineBottomFive: "M -39,-260,-39,0 0,0",
|
||||
// lineBottomSix: "M -119,-260,-119,0 0,0",
|
||||
// lineBottomSeven: "M -199,-260,-199,0 0,0",
|
||||
// lineBottomEight: "M -279,-260,-279,0 0,0",
|
||||
// },
|
||||
// 放电
|
||||
dotData: {
|
||||
lineTopLeft: 'M 0,0 0,0',
|
||||
lineTopRight: 'M 0,0 0,0',
|
||||
lineBottomOne: 'M 0,0 0,0',
|
||||
lineBottomTwo: 'M 0,0 0,0',
|
||||
lineBottomThree: 'M 0,0 0,0',
|
||||
lineBottomFour: 'M 0,0 0,0',
|
||||
lineBottomFive: 'M 0,0 0,0',
|
||||
lineBottomSix: 'M 0,0 0,0',
|
||||
lineBottomSeven: 'M 0,0 0,0',
|
||||
lineBottomEight: 'M 0,0 0,0'
|
||||
},
|
||||
loading: false,
|
||||
activePowerTotal: {},
|
||||
permissionId: null,
|
||||
show_point_dispostion: false,
|
||||
pageLocation: null
|
||||
}
|
||||
},
|
||||
computed: {},
|
||||
watch: {},
|
||||
created() {
|
||||
setTimeout(() => {
|
||||
if (this.$store.getters.menuList.length) {
|
||||
this.permissionId = this.$store.getters.menuList.find(item => {
|
||||
return item.url === this.$route.path
|
||||
}).id
|
||||
}
|
||||
}, 300)
|
||||
},
|
||||
mounted() {},
|
||||
methods: {
|
||||
disposition(val) {
|
||||
this.pageLocation = val
|
||||
this.show_point_dispostion = true
|
||||
},
|
||||
getDynamicPointData() {
|
||||
this.getData()
|
||||
},
|
||||
closePoint() {
|
||||
this.show_point_dispostion = false
|
||||
},
|
||||
|
||||
countChineseAndEnglishCharacters(str, x) {
|
||||
var chineseCount = str.match(/[\u4e00-\u9fa5]/g) ? str.match(/[\u4e00-\u9fa5]/g).length : 0
|
||||
var englishCount = str.match(/[a-zA-Z]/g) ? str.match(/[a-zA-Z]/g).length : 0
|
||||
var otherCount = str.length - chineseCount - englishCount
|
||||
const obj = { otherCount: otherCount, chineseCount: chineseCount, englishCount: englishCount }
|
||||
return (obj.englishCount * 8) + (obj.chineseCount * 16) + (obj.otherCount * 6) + x
|
||||
},
|
||||
async getData() {
|
||||
this.loading = true
|
||||
|
||||
try {
|
||||
const res = await DynamicConfigPoint({
|
||||
permissionId: this.permissionId,
|
||||
stationId: this.stationId })
|
||||
this.pcsData_1 = []
|
||||
this.pcsData_2 = []
|
||||
this.pcsData_3 = []
|
||||
this.pcsData_4 = []
|
||||
this.pcsData_5 = []
|
||||
this.pcsData_6 = []
|
||||
this.pcsData_7 = []
|
||||
this.pcsData_8 = []
|
||||
this.ammeter_1 = []
|
||||
this.dotData = {
|
||||
lineTopLeft: 'M 0,0 0,0',
|
||||
lineTopRight: 'M 0,0 0,0',
|
||||
lineCenter: 'M 0,0 0,0',
|
||||
lineBottomOne: 'M 0,0 0,0',
|
||||
lineBottomTwo: 'M 0,0 0,0',
|
||||
lineBottomThree: 'M 0,0 0,0',
|
||||
lineBottomFour: 'M 0,0 0,0',
|
||||
lineBottomFive: 'M 0,0 0,0',
|
||||
lineBottomSix: 'M 0,0 0,0',
|
||||
lineBottomSeven: 'M 0,0 0,0',
|
||||
lineBottomEight: 'M 0,0 0,0'
|
||||
}
|
||||
if (res.data.length) {
|
||||
res.data.forEach((item) => {
|
||||
if (item.pageLocation === 'eight_pcs_1') {
|
||||
this.pcsData_1.push(item)
|
||||
} else if (item.pageLocation === 'eight_pcs_2') {
|
||||
this.pcsData_2.push(item)
|
||||
} else if (item.pageLocation === 'eight_pcs_3') {
|
||||
this.pcsData_3.push(item)
|
||||
} else if (item.pageLocation === 'eight_pcs_4') {
|
||||
this.pcsData_4.push(item)
|
||||
} else if (item.pageLocation === 'eight_pcs_5') {
|
||||
this.pcsData_5.push(item)
|
||||
} else if (item.pageLocation === 'eight_pcs_6') {
|
||||
this.pcsData_6.push(item)
|
||||
} else if (item.pageLocation === 'eight_pcs_7') {
|
||||
this.pcsData_7.push(item)
|
||||
} else if (item.pageLocation === 'eight_pcs_8') {
|
||||
this.pcsData_8.push(item)
|
||||
} else if (item.pageLocation === 'eighth_ammeter_1') {
|
||||
this.ammeter_1.push(item)
|
||||
} else if (item.pageLocation === 'eight-line-top-left') {
|
||||
if (+item.value > 0) {
|
||||
this.dotData.lineTopLeft = 'M 238,0 0,0'
|
||||
} else if (+item.value < 0) {
|
||||
this.dotData.lineTopLeft = 'M 0,0 238,0 '
|
||||
} else {
|
||||
this.dotData.lineTopLeft = 'M 0,0 0,0'
|
||||
}
|
||||
} else if (item.pageLocation === 'eight-line-top-right') {
|
||||
if (+item.value > 0) {
|
||||
this.dotData.lineTopRight = 'M 0,0 -230,0'
|
||||
} else if (+item.value < 0) {
|
||||
this.dotData.lineTopRight = 'M -230,0 0,0 '
|
||||
} else {
|
||||
this.dotData.lineTopRight = 'M 0,0 0,0'
|
||||
}
|
||||
} else if (item.pageLocation === 'eight-line-bottom-one') {
|
||||
if (+item.value > 0) {
|
||||
this.dotData.lineBottomOne = 'M 258,-260, 258, 0, 0 ,0'
|
||||
} else if (+item.value < 0) {
|
||||
this.dotData.lineBottomOne = 'M 0 ,0 258, 0, 258,-260'
|
||||
} else {
|
||||
this.dotData.lineBottomOne = 'M 0,0 0,0'
|
||||
}
|
||||
} else if (item.pageLocation === 'eight-line-bottom-two') {
|
||||
if (+item.value > 0) {
|
||||
this.dotData.lineBottomTwo = 'M 176,-260, 176, 0, 0 ,0'
|
||||
} else if (+item.value < 0) {
|
||||
this.dotData.lineBottomTwo = 'M 0 ,0 176, 0, 176,-260'
|
||||
} else {
|
||||
this.dotData.lineBottomTwo = 'M 0,0 0,0'
|
||||
}
|
||||
} else if (item.pageLocation === 'eight-line-bottom-three') {
|
||||
if (+item.value > 0) {
|
||||
this.dotData.lineBottomThree = 'M 96,-260, 96, 0, 0 ,0'
|
||||
} else if (+item.value < 0) {
|
||||
this.dotData.lineBottomThree = 'M 0 ,0, 96, 0,96,-260'
|
||||
} else {
|
||||
this.dotData.lineBottomThree = 'M 0,0 0,0'
|
||||
}
|
||||
} else if (item.pageLocation === 'eight-line-bottom-four') {
|
||||
if (+item.value > 0) {
|
||||
this.dotData.lineBottomFour = 'M 21,-260, 21, 0, 0 ,0'
|
||||
} else if (+item.value < 0) {
|
||||
this.dotData.lineBottomFour = 'M 0 ,0 21, 0, 21,-260'
|
||||
} else {
|
||||
this.dotData.lineBottomFour = 'M 0,0 0,0'
|
||||
}
|
||||
} else if (item.pageLocation === 'eight-line-bottom-five') {
|
||||
if (+item.value > 0) {
|
||||
this.dotData.lineBottomFive = 'M -39,-260,-39,0 0,0'
|
||||
} else if (+item.value < 0) {
|
||||
this.dotData.lineBottomFive = 'M 0,0 -39,0 -39,-260'
|
||||
} else {
|
||||
this.dotData.lineBottomFive = 'M 0,0 0,0'
|
||||
}
|
||||
} else if (item.pageLocation === 'eight-line-bottom-six') {
|
||||
if (+item.value > 0) {
|
||||
this.dotData.lineBottomSix = 'M -119,-260,-119,0 0,0'
|
||||
} else if (+item.value < 0) {
|
||||
this.dotData.lineBottomSix = 'M 0,0 -119,0 -119,-260 '
|
||||
} else {
|
||||
this.dotData.lineBottomSix = 'M 0,0 0,0'
|
||||
}
|
||||
} else if (item.pageLocation === 'eight-line-bottom-seven') {
|
||||
if (+item.value > 0) {
|
||||
this.dotData.lineBottomSeven = 'M -199,-260,-199,0 0,0"'
|
||||
} else if (+item.value < 0) {
|
||||
this.dotData.lineBottomSeven = 'M 0,0 -199,0 -199,-260'
|
||||
} else {
|
||||
this.dotData.lineBottomSeven = 'M 0,0 0,0'
|
||||
}
|
||||
} else if (item.pageLocation === 'eight-line-bottom-eight') {
|
||||
if (+item.value > 0) {
|
||||
this.dotData.lineBottomEight = 'M -279,-260,-279,0 0,0'
|
||||
} else if (+item.value < 0) {
|
||||
this.dotData.lineBottomEight = 'M 0,0 -279,0 -279,-260'
|
||||
} else {
|
||||
this.dotData.lineBottomEight = 'M 0,0 0,0'
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
} catch (error) {
|
||||
// console.log(error);
|
||||
} finally {
|
||||
this.loading = false
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.center-box {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
@mixin move-round($duration, $delay) {
|
||||
fill: none;
|
||||
stroke-width: 5;
|
||||
stroke-linejoin: round;
|
||||
stroke-linecap: round;
|
||||
stroke-dasharray: 3, 900;
|
||||
stroke-dashoffset: 0;
|
||||
animation: lineMove $duration $delay cubic-bezier(0, 0, 0.74, 0.74) infinite;
|
||||
}
|
||||
|
||||
@keyframes lineMove {
|
||||
0% {
|
||||
stroke-dashoffset: -850;
|
||||
}
|
||||
100% {
|
||||
stroke-dashoffset: -0;
|
||||
}
|
||||
}
|
||||
.g-rect-fill-two {
|
||||
@include move-round(3.5s, 1s);
|
||||
}
|
||||
</style>
|
||||
95
src/views/dashboardtest/components/top-center/fifth-th.vue
Normal file
95
src/views/dashboardtest/components/top-center/fifth-th.vue
Normal file
@ -0,0 +1,95 @@
|
||||
<template>
|
||||
<ItemBox :title="$t('dashboard.stationTopo')" style="min-height: 560px">
|
||||
<div slot="header">
|
||||
<div class="header-right-box">
|
||||
<div class="header-title" :class="{'active':tabPosition === 1}" @click="changeTab(1)">1#{{ $t('dashboard.cnz') }}</div>
|
||||
<div class="header-title" :class="{'active':tabPosition === 2}" @click="changeTab(2)">2#{{ $t('dashboard.cnz') }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div ref="svgLine" class="center-box">
|
||||
<first v-if="tabPosition === 1" ref="firstToPu" :station-id="stationId" :permission-id="permissionId" />
|
||||
<second v-if="tabPosition === 2" ref="secondToPu" :station-id="stationId" :permission-id="permissionId" />
|
||||
</div>
|
||||
|
||||
</ItemBox>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import first from './fifthComponents/first.vue'
|
||||
import second from './fifthComponents/second.vue'
|
||||
export default {
|
||||
name: 'Index',
|
||||
components: { first, second },
|
||||
data() {
|
||||
return {
|
||||
tabPosition: 1,
|
||||
stationId: null,
|
||||
permissionId: null
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
currentStation() {
|
||||
return this.$store.getters.currentStation || undefined
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
currentStation: {
|
||||
handler(val) {
|
||||
if (val && val.id) {
|
||||
this.stationId = val.id
|
||||
}
|
||||
},
|
||||
deep: true,
|
||||
immediate: true
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
changeTab(val) {
|
||||
this.tabPosition = val
|
||||
this.$nextTick(() => {
|
||||
this.getData()
|
||||
})
|
||||
},
|
||||
getData() {
|
||||
if (this.$store.getters.menuList.length) {
|
||||
this.permissionId = this.$store.getters.menuList.find((item) => {
|
||||
return item.url === this.$route.path
|
||||
}).id
|
||||
}
|
||||
if (this.tabPosition === 1) {
|
||||
this.$refs.firstToPu.getData()
|
||||
} else if (this.tabPosition === 2) {
|
||||
this.$refs.secondToPu.getData()
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.center-box {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.header-right-box {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
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%);
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
731
src/views/dashboardtest/components/top-center/fifth.vue
Normal file
731
src/views/dashboardtest/components/top-center/fifth.vue
Normal file
@ -0,0 +1,731 @@
|
||||
<template>
|
||||
<ItemBox :title="$t('dashboard.stationTopo')" style="min-height: 560px">
|
||||
<div ref="svgLine" class="center-box">
|
||||
<div v-loading="loading">
|
||||
<svg
|
||||
version="1.1"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||
xml:space="preserve"
|
||||
class="circle-load-rect-svg"
|
||||
viewBox="0 0 800 500"
|
||||
>
|
||||
<defs>
|
||||
<defs>
|
||||
<radialGradient id="RadialGradient1">
|
||||
<stop offset="0%" stop-color="#fff" />
|
||||
<stop offset="30%" stop-color="#0171c1" />
|
||||
<stop offset="50%" stop-color="#035088" />
|
||||
<stop offset="100%" stop-color="#02395a" />
|
||||
</radialGradient>
|
||||
</defs>
|
||||
<marker
|
||||
id="markerCircle"
|
||||
markerWidth="15"
|
||||
markerHeight="15"
|
||||
refX="5"
|
||||
refY="5"
|
||||
>
|
||||
<circle
|
||||
cx="5"
|
||||
cy="5"
|
||||
r="5"
|
||||
style="stroke: none; fill: url(#RadialGradient1)"
|
||||
/>
|
||||
</marker>
|
||||
|
||||
<marker
|
||||
id="markerArrow"
|
||||
markerWidth="13"
|
||||
markerHeight="13"
|
||||
refX="2"
|
||||
refY="6"
|
||||
orient="auto"
|
||||
>
|
||||
<path d="M2,2 L2,11 L10,6 L2,2" style="fill: black" />
|
||||
</marker>
|
||||
</defs>
|
||||
<!-- //线条 -->
|
||||
<!-- top -->
|
||||
<polyline
|
||||
points="154,60 630,60"
|
||||
fill="none"
|
||||
class="g-rect-path"
|
||||
stroke="#0094FF"
|
||||
stroke-dasharray="3 3"
|
||||
/>
|
||||
|
||||
<!-- center -->
|
||||
<polyline
|
||||
points="385,60 385,363"
|
||||
fill="none"
|
||||
class="g-rect-path"
|
||||
stroke="#0094FF"
|
||||
stroke-dasharray="3 3"
|
||||
/>
|
||||
|
||||
<polyline
|
||||
points="385,100 460,100"
|
||||
fill="none"
|
||||
class="g-rect-path"
|
||||
stroke="#0094FF"
|
||||
stroke-dasharray="3 3"
|
||||
/>
|
||||
|
||||
<!-- bottom -->
|
||||
<polyline
|
||||
points="104,363 655,363"
|
||||
fill="none"
|
||||
class="g-rect-path"
|
||||
stroke="#0094FF"
|
||||
stroke-dasharray="3 3"
|
||||
/>
|
||||
|
||||
<!-- 动点 -->
|
||||
<!-- 上左 -->
|
||||
<circle
|
||||
cx="154"
|
||||
cy="60"
|
||||
r="8"
|
||||
style="stroke: none; fill: url(#RadialGradient1);"
|
||||
>
|
||||
<animateMotion
|
||||
repeatCount="indefinite"
|
||||
dur="4s"
|
||||
begin="0s"
|
||||
:path="dotData.lineTopLeft"
|
||||
/>
|
||||
</circle>
|
||||
|
||||
<!-- 上右 -->
|
||||
<circle
|
||||
cx="630"
|
||||
cy="60"
|
||||
r="8"
|
||||
style="stroke: none; fill: url(#RadialGradient1);"
|
||||
>
|
||||
<animateMotion
|
||||
repeatCount="indefinite"
|
||||
dur="4s"
|
||||
begin="0s"
|
||||
:path="dotData.lineTopRight"
|
||||
/>
|
||||
</circle>
|
||||
|
||||
<!-- 中线 -->
|
||||
<circle
|
||||
cx="385"
|
||||
cy="363"
|
||||
r="8"
|
||||
style="stroke: none; fill: url(#RadialGradient1)"
|
||||
>
|
||||
<animateMotion
|
||||
repeatCount="indefinite"
|
||||
dur="4s"
|
||||
begin="2s"
|
||||
:path="dotData.lineCenter"
|
||||
/>
|
||||
</circle>
|
||||
|
||||
<!-- 底 -->
|
||||
<circle
|
||||
cx="104"
|
||||
cy="363"
|
||||
r="8"
|
||||
style="stroke: none; fill: url(#RadialGradient1);"
|
||||
>
|
||||
<animateMotion
|
||||
repeatCount="indefinite"
|
||||
dur="4s"
|
||||
begin="2s"
|
||||
:path="dotData.lineBottomOne"
|
||||
/>
|
||||
</circle>
|
||||
|
||||
<circle
|
||||
cx="240"
|
||||
cy="363"
|
||||
r="8"
|
||||
style="stroke: none; fill: url(#RadialGradient1);"
|
||||
>
|
||||
<animateMotion
|
||||
repeatCount="indefinite"
|
||||
dur="4s"
|
||||
begin="2s"
|
||||
:path="dotData.lineBottomTwo"
|
||||
/>
|
||||
</circle>
|
||||
|
||||
<circle
|
||||
cx="520"
|
||||
cy="363"
|
||||
r="8"
|
||||
style="stroke: none; fill: url(#RadialGradient1);"
|
||||
>
|
||||
<animateMotion
|
||||
repeatCount="indefinite"
|
||||
dur="4s"
|
||||
begin="2s"
|
||||
:path="dotData.lineBottomFour"
|
||||
/>
|
||||
</circle>
|
||||
|
||||
<circle
|
||||
cx="655"
|
||||
cy="363"
|
||||
r="8"
|
||||
style="stroke: none; fill: url(#RadialGradient1);"
|
||||
>
|
||||
<animateMotion
|
||||
repeatCount="indefinite"
|
||||
dur="4s"
|
||||
begin="2s"
|
||||
:path="dotData.lineBottomFive"
|
||||
/>
|
||||
</circle>
|
||||
|
||||
<!-- top -->
|
||||
<circle
|
||||
cx="154"
|
||||
cy="60"
|
||||
r="8"
|
||||
style="stroke: none; fill: url(#RadialGradient1); cursor: pointer"
|
||||
@click="lookDeviceDetail('fifth-line-top-left')"
|
||||
/>
|
||||
<circle
|
||||
cx="630"
|
||||
cy="60"
|
||||
r="8"
|
||||
style="stroke: none; fill: url(#RadialGradient1); cursor: pointer"
|
||||
@click="lookDeviceDetail('fifth-line-top-right')"
|
||||
/>
|
||||
|
||||
<circle
|
||||
cx="460"
|
||||
cy="100"
|
||||
r="8"
|
||||
style="stroke: none; fill: url(#RadialGradient1)"
|
||||
/>
|
||||
|
||||
<!-- bottom -->
|
||||
<circle
|
||||
cx="104"
|
||||
cy="363"
|
||||
r="8"
|
||||
style="stroke: none; fill: url(#RadialGradient1); cursor: pointer"
|
||||
@click="lookDeviceDetail('fifth-line-bottom-one')"
|
||||
/>
|
||||
<circle
|
||||
cx="240"
|
||||
cy="363"
|
||||
r="8"
|
||||
style="stroke: none; fill: url(#RadialGradient1); cursor: pointer"
|
||||
@click="lookDeviceDetail('fifth-line-bottom-two')"
|
||||
/>
|
||||
<circle
|
||||
cx="385"
|
||||
cy="363"
|
||||
r="8"
|
||||
style="stroke: none; fill: url(#RadialGradient1); cursor: pointer"
|
||||
@click="lookDeviceDetail('fifth-line-center')"
|
||||
/>
|
||||
<circle
|
||||
cx="520"
|
||||
cy="363"
|
||||
r="8"
|
||||
style="stroke: none; fill: url(#RadialGradient1); cursor: pointer"
|
||||
@click="lookDeviceDetail('fifth-line-bottom-four')"
|
||||
/>
|
||||
<circle
|
||||
cx="655"
|
||||
cy="363"
|
||||
r="8"
|
||||
style="stroke: none; fill: url(#RadialGradient1); cursor: pointer"
|
||||
@click="lookDeviceDetail('fifth-line-bottom-five')"
|
||||
/>
|
||||
|
||||
<!-- 图片和文字 -->
|
||||
|
||||
<!-- 市电 -->
|
||||
<image :xlink:href="gridImg" x="70" y="10" width="60" height="87" />
|
||||
<text x="70" y="110" fill="#ffffff" font-size="14"> {{ $t("dashboard.grid") }}</text>
|
||||
|
||||
<!-- {{ $t("dashboard.load") }} -->
|
||||
<image
|
||||
:xlink:href="chargingPileImg"
|
||||
x="650"
|
||||
y="10"
|
||||
width="60"
|
||||
height="87"
|
||||
/>
|
||||
<text x="675" y="110" fill="#ffffff" font-size="14"> {{ $t("dashboard.load") }}</text>
|
||||
|
||||
<!-- 1#PCS -->
|
||||
<image
|
||||
:xlink:href="cabinetImg"
|
||||
x="65"
|
||||
y="383"
|
||||
width="70"
|
||||
height="70"
|
||||
style="cursor: pointer"
|
||||
@click="lookDeviceDetail('fifth_pcs_1')"
|
||||
/>
|
||||
<text x="66" y="490" fill="#ffffff" font-size="14">{{ hiddenTextWord(`1#${$t("dashboard.cabinet")}`,10) }}</text>
|
||||
<!-- 2#PCS -->
|
||||
<image
|
||||
:xlink:href="cabinetImg"
|
||||
x="202"
|
||||
y="383"
|
||||
width="70"
|
||||
height="70"
|
||||
style="cursor: pointer"
|
||||
@click="lookDeviceDetail('fifth_pcs_2')"
|
||||
/>
|
||||
<text x="210" y="490" fill="#ffffff" font-size="14">{{ hiddenTextWord(`2#${$t("dashboard.cabinet")}`,10) }}</text>
|
||||
|
||||
<!-- 3#PCS -->
|
||||
<image
|
||||
:xlink:href="cabinetImg"
|
||||
x="339"
|
||||
y="383"
|
||||
width="70"
|
||||
height="70"
|
||||
style="cursor: pointer"
|
||||
@click="lookDeviceDetail('fifth_pcs_3')"
|
||||
/>
|
||||
<text x="344" y="490" fill="#ffffff" font-size="14">{{ hiddenTextWord(`3#${$t("dashboard.cabinet")}`,10) }}</text>
|
||||
|
||||
<image
|
||||
:xlink:href="cabinetImg"
|
||||
x="476"
|
||||
y="383"
|
||||
width="70"
|
||||
height="70"
|
||||
style="cursor: pointer"
|
||||
@click="lookDeviceDetail('fifth_pcs_4')"
|
||||
/>
|
||||
<text x="484" y="490" fill="#ffffff" font-size="14">{{ hiddenTextWord(`4#${$t("dashboard.cabinet")}`,10) }}</text>
|
||||
|
||||
<image
|
||||
:xlink:href="cabinetImg"
|
||||
x="613"
|
||||
y="383"
|
||||
width="70"
|
||||
height="70"
|
||||
style="cursor: pointer"
|
||||
@click="lookDeviceDetail('fifth_pcs_5')"
|
||||
/>
|
||||
<text x="620" y="490" fill="#ffffff" font-size="14">{{ hiddenTextWord(`5#${$t("dashboard.cabinet")}`,10) }}</text>
|
||||
|
||||
<!-- 变压器 -->
|
||||
<image
|
||||
:xlink:href="distributionCabinetImg"
|
||||
x="330"
|
||||
y="145"
|
||||
width="120"
|
||||
height="85"
|
||||
/>
|
||||
|
||||
<!-- {{ $t("dashboard.ammeter") }} -->
|
||||
<image
|
||||
:xlink:href="ammeterImg"
|
||||
x="455"
|
||||
y="80"
|
||||
width="80"
|
||||
height="40"
|
||||
style="cursor: pointer"
|
||||
@click="lookDeviceDetail('fifth_ammeter_1')"
|
||||
/>
|
||||
<g v-for="(item, index) in ammeter_1" :key="item.id">
|
||||
<text x="435" :y="150 + 20 * index" fill="#ffffff" font-size="14">
|
||||
{{ item.name }}
|
||||
</text>
|
||||
<text
|
||||
:x="countChineseAndEnglishCharacters(item.name, 445)"
|
||||
:y="150 + 20 * index"
|
||||
fill="#FFB800"
|
||||
font-size="14"
|
||||
>
|
||||
{{ item.value }}
|
||||
</text>
|
||||
</g>
|
||||
|
||||
<!-- 左侧 -->
|
||||
<text x="10" y="280" fill="#ffffff" font-size="14">SOC(%)：</text>
|
||||
<text x="10" y="300" fill="#ffffff" font-size="14">SOH(%)：</text>
|
||||
<text x="10" y="320" fill="#ffffff" font-size="14">{{ $t("dashboard.workStatus") }}：</text>
|
||||
<text x="10" y="340" fill="#ffffff" font-size="14">
|
||||
{{ $t("dashboard.activePower") }}(kW)：
|
||||
</text>
|
||||
<!-- 1#PCS -->
|
||||
<text x="115" y="280" fill="#FFB800" font-size="14">
|
||||
{{ pcsData_1.length ? pcsData_1[0].value : "" }}
|
||||
</text>
|
||||
<text x="115" y="300" fill="#FFB800" font-size="14">
|
||||
{{ pcsData_1.length > 1 ? pcsData_1[1].value : "" }}
|
||||
</text>
|
||||
<text x="115" y="320" fill="#FFB800" font-size="14">
|
||||
{{ pcsData_1.length > 2 ? pcsData_1[2].value : "" }}
|
||||
</text>
|
||||
<text x="115" y="340" fill="#FFB800" font-size="14">
|
||||
{{ pcsData_1.length > 3 ? pcsData_1[3].value : "" }}
|
||||
</text>
|
||||
<!-- 2#PCS -->
|
||||
<text x="220" y="280" fill="#FFB800" font-size="14">
|
||||
{{ pcsData_2.length ? pcsData_2[0].value : "" }}
|
||||
</text>
|
||||
<text x="220" y="300" fill="#FFB800" font-size="14">
|
||||
{{ pcsData_2.length > 1 ? pcsData_2[1].value : "" }}
|
||||
</text>
|
||||
<text x="220" y="320" fill="#FFB800" font-size="14">
|
||||
{{ pcsData_2.length > 2 ? pcsData_2[2].value : "" }}
|
||||
</text>
|
||||
<text x="220" y="340" fill="#FFB800" font-size="14">
|
||||
{{ pcsData_2.length > 3 ? pcsData_2[3].value : "" }}
|
||||
</text>
|
||||
<!-- 3#PCS -->
|
||||
<text x="320" y="280" fill="#FFB800" font-size="14">
|
||||
{{ pcsData_3.length ? pcsData_3[0].value : "" }}
|
||||
</text>
|
||||
<text x="320" y="300" fill="#FFB800" font-size="14">
|
||||
{{ pcsData_3.length > 1 ? pcsData_3[1].value : "" }}
|
||||
</text>
|
||||
<text x="320" y="320" fill="#FFB800" font-size="14">
|
||||
{{ pcsData_3.length > 2 ? pcsData_3[2].value : "" }}
|
||||
</text>
|
||||
<text x="320" y="340" fill="#FFB800" font-size="14">
|
||||
{{ pcsData_3.length > 3 ? pcsData_3[3].value : "" }}
|
||||
</text>
|
||||
<!-- 4#PCS -->
|
||||
<text x="510" y="280" fill="#FFB800" font-size="14">
|
||||
{{ pcsData_4.length ? pcsData_4[0].value : "" }}
|
||||
</text>
|
||||
<text x="510" y="300" fill="#FFB800" font-size="14">
|
||||
{{ pcsData_4.length > 1 ? pcsData_4[1].value : "" }}
|
||||
</text>
|
||||
<text x="510" y="320" fill="#FFB800" font-size="14">
|
||||
{{ pcsData_4.length > 2 ? pcsData_4[2].value : "" }}
|
||||
</text>
|
||||
<text x="510" y="340" fill="#FFB800" font-size="14">
|
||||
{{ pcsData_4.length > 3 ? pcsData_4[3].value : "" }}
|
||||
</text>
|
||||
<!-- 5#PCS -->
|
||||
<text x="640" y="280" fill="#FFB800" font-size="14">
|
||||
{{ pcsData_5.length ? pcsData_5[0].value : "" }}
|
||||
</text>
|
||||
<text x="640" y="300" fill="#FFB800" font-size="14">
|
||||
{{ pcsData_5.length > 1 ? pcsData_5[1].value : "" }}
|
||||
</text>
|
||||
<text x="640" y="320" fill="#FFB800" font-size="14">
|
||||
{{ pcsData_5.length > 2 ? pcsData_5[2].value : "" }}
|
||||
</text>
|
||||
<text x="640" y="340" fill="#FFB800" font-size="14">
|
||||
{{ pcsData_5.length > 3 ? pcsData_5[3].value : "" }}
|
||||
</text>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<DispositionPointData
|
||||
:disposition-show="show_point_dispostion"
|
||||
:page-location="pageLocation"
|
||||
@close="closePoint"
|
||||
@getData="getDynamicPointData"
|
||||
/>
|
||||
</ItemBox>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import gridImg from '@/assets/images/wxjd/grid.png'
|
||||
import ammeterImg from '@/assets/images/wxjd/ammeter.png'
|
||||
import cabinetImg from '@/assets/images/wxjd/pcs-energy.png'
|
||||
import chargingPileImg from '@/assets/images/home-office.png'
|
||||
import distributionCabinetImg from '@/assets/images/wxjd/guiImg.png'
|
||||
import frameImg from '@/assets/images/wxjd/frame.png'
|
||||
import cangImg from '@/assets/images/home-cang.png'
|
||||
import { DynamicConfigPoint } from '@/api/home-page/index'
|
||||
import { hiddenTextWord } from '@/utils/index'
|
||||
export default {
|
||||
name: 'Index',
|
||||
props: {
|
||||
stationType: {
|
||||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
stationId: {
|
||||
type: Number,
|
||||
default: 0
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
hiddenTextWord,
|
||||
gridImg,
|
||||
ammeterImg,
|
||||
cabinetImg,
|
||||
chargingPileImg,
|
||||
distributionCabinetImg,
|
||||
cangImg,
|
||||
frameImg,
|
||||
// 充电
|
||||
// dotData: {
|
||||
// lineTopLeft: "M 238,0 0,0",
|
||||
// lineTopRight: "M 0,0 -230,0",
|
||||
// lineCenter: "M 0,-283,0,0,0,0",
|
||||
// lineBottomOne: 'M 283,-280, 280, 0, 0 ,0',
|
||||
// lineBottomTwo: 'M 145,-280, 145, 0, 0 ,0',
|
||||
// lineBottomFour: 'M -135,-280,-135,0 0,0',
|
||||
// lineBottomFive: 'M -270,-280,-270,0 0,0',
|
||||
// },
|
||||
|
||||
// 放电
|
||||
// dotData: {
|
||||
// lineTopLeft: "M 0,0 238,0 ",
|
||||
// lineTopRight: "M -230,0 0,0",
|
||||
// lineCenter: "M 0,0,0,0,0,-283",
|
||||
// lineBottomOne: "M 0 ,0, 280, 0,283,-280",
|
||||
// lineBottomTwo: "M 0 ,0,145, 0, 145,-280",
|
||||
// lineBottomFour: "M 0,0 ,-135,0,-135,-280,",
|
||||
// lineBottomFive: "M 0,0,-270,0,-270,-280",
|
||||
// },
|
||||
|
||||
dotData: {
|
||||
lineTopLeft: 'M 0,0 0,0',
|
||||
lineTopRight: 'M 0,0 0,0',
|
||||
lineCenter: 'M 0,0 0,0',
|
||||
lineBottomOne: 'M 0,0 0,0',
|
||||
lineBottomTwo: 'M 0,0 0,0',
|
||||
lineBottomFour: 'M 0,0 0,0',
|
||||
lineBottomFive: 'M 0,0 0,0'
|
||||
},
|
||||
|
||||
partList: [
|
||||
{ soc: 0, soh: 0, activePowerPCS: 0.0, reactivePowerPCS: 0.0 },
|
||||
{ soc: 0, soh: 0, activePowerPCS: 0.0, reactivePowerPCS: 0.0 },
|
||||
{ soc: 0, soh: 0, activePowerPCS: 0.0, reactivePowerPCS: 0.0 },
|
||||
{ soc: 0, soh: 0, activePowerPCS: 0.0, reactivePowerPCS: 0.0 },
|
||||
{ soc: 0, soh: 0, activePowerPCS: 0.0, reactivePowerPCS: 0.0 }
|
||||
],
|
||||
loading: false,
|
||||
activePowerTotal: {},
|
||||
permissionId: null,
|
||||
show_point_dispostion: false,
|
||||
pageLocation: null,
|
||||
pcsData_1: [],
|
||||
pcsData_2: [],
|
||||
pcsData_3: [],
|
||||
pcsData_4: [],
|
||||
pcsData_5: [],
|
||||
pcsData_6: [],
|
||||
pcsData_7: [],
|
||||
pcsData_8: [],
|
||||
pcsData_9: [],
|
||||
pcsData_10: [],
|
||||
ammeter_1: [],
|
||||
ammeter_2: [],
|
||||
ammeter_3: [],
|
||||
ammeter_4: [],
|
||||
break_1: []
|
||||
}
|
||||
},
|
||||
computed: {},
|
||||
watch: {},
|
||||
created() {
|
||||
setTimeout(() => {
|
||||
if (this.$store.getters.menuList.length) {
|
||||
this.permissionId = this.$store.getters.menuList.find((item) => {
|
||||
return item.url === this.$route.path
|
||||
}).id
|
||||
}
|
||||
}, 300)
|
||||
},
|
||||
mounted() {},
|
||||
methods: {
|
||||
oScale() {
|
||||
this.$emit('scale')
|
||||
},
|
||||
getBreakColor(val) {
|
||||
if (+val === 1) {
|
||||
return '#00FF1A'
|
||||
} else {
|
||||
return '#FF0000'
|
||||
}
|
||||
},
|
||||
countChineseAndEnglishCharacters(str, x) {
|
||||
var chineseCount = str.match(/[\u4e00-\u9fa5]/g)
|
||||
? str.match(/[\u4e00-\u9fa5]/g).length
|
||||
: 0
|
||||
var englishCount = str.match(/[a-zA-Z]/g)
|
||||
? str.match(/[a-zA-Z]/g).length
|
||||
: 0
|
||||
var otherCount = str.length - chineseCount - englishCount
|
||||
const obj = {
|
||||
otherCount: otherCount,
|
||||
chineseCount: chineseCount,
|
||||
englishCount: englishCount
|
||||
}
|
||||
return (
|
||||
obj.englishCount * 8 + obj.chineseCount * 16 + obj.otherCount * 6 + x
|
||||
)
|
||||
},
|
||||
lookDeviceDetail(val) {
|
||||
// 查看设备详情
|
||||
this.pageLocation = val
|
||||
this.show_point_dispostion = true
|
||||
},
|
||||
closePoint() {
|
||||
this.show_point_dispostion = false
|
||||
},
|
||||
|
||||
getDynamicPointData() {
|
||||
this.getData()
|
||||
},
|
||||
handleSetting() {
|
||||
this.$emit('handleSetting')
|
||||
},
|
||||
toScale() {
|
||||
this.$emit('toScale')
|
||||
},
|
||||
async getpoint() {
|
||||
await DynamicConfigPoint({
|
||||
pageLocation: this.pageLocation,
|
||||
permissionId: this.permissionId,
|
||||
stationId: this.stationId
|
||||
})
|
||||
},
|
||||
async getData() {
|
||||
this.getPcsData()
|
||||
},
|
||||
async getPcsData() {
|
||||
this.loading = true
|
||||
try {
|
||||
const res = await DynamicConfigPoint({
|
||||
permissionId: this.permissionId,
|
||||
stationId: this.stationId
|
||||
})
|
||||
this.pcsData_1 = []
|
||||
this.pcsData_2 = []
|
||||
this.pcsData_3 = []
|
||||
this.pcsData_4 = []
|
||||
this.pcsData_5 = []
|
||||
this.pcsData_6 = []
|
||||
this.ammeter_1 = []
|
||||
this.dotData = {
|
||||
lineTopLeft: 'M 0,0 0,0',
|
||||
lineTopRight: 'M 0,0 0,0',
|
||||
lineCenter: 'M 0,0 0,0',
|
||||
lineBottomOne: 'M 0,0 0,0',
|
||||
lineBottomTwo: 'M 0,0 0,0',
|
||||
lineBottomFour: 'M 0,0 0,0',
|
||||
lineBottomFive: 'M 0,0 0,0'
|
||||
}
|
||||
|
||||
if (res.data.length) {
|
||||
res.data.forEach((item) => {
|
||||
if (item.pageLocation === 'fifth_pcs_1') {
|
||||
this.pcsData_1.push(item)
|
||||
} else if (item.pageLocation === 'fifth_pcs_2') {
|
||||
this.pcsData_2.push(item)
|
||||
} else if (item.pageLocation === 'fifth_pcs_3') {
|
||||
this.pcsData_3.push(item)
|
||||
} else if (item.pageLocation === 'fifth_pcs_4') {
|
||||
this.pcsData_4.push(item)
|
||||
} else if (item.pageLocation === 'fifth_pcs_5') {
|
||||
this.pcsData_5.push(item)
|
||||
} else if (item.pageLocation === 'fifth_ammeter_1') {
|
||||
this.ammeter_1.push(item)
|
||||
} else if (item.pageLocation === 'fifth-line-top-left') {
|
||||
if (+item.value > 0) {
|
||||
this.dotData.lineTopLeft = 'M 238,0 0,0'
|
||||
} else if (+item.value < 0) {
|
||||
this.dotData.lineTopLeft = '"M 0,0 238,0'
|
||||
} else {
|
||||
this.dotData.lineTopLeft = 'M 0,0 0,0'
|
||||
}
|
||||
} else if (item.pageLocation === 'fifth-line-top-right') {
|
||||
if (+item.value > 0) {
|
||||
this.dotData.lineTopRight = 'M 0,0 -230,0'
|
||||
} else if (+item.value < 0) {
|
||||
this.dotData.lineTopRight = 'M -230,0 0,0'
|
||||
} else {
|
||||
this.dotData.lineTopRight = 'M 0,0 0,0'
|
||||
}
|
||||
} else if (item.pageLocation === 'fifth-line-bottom-one') {
|
||||
if (+item.value > 0) {
|
||||
this.dotData.lineBottomOne = 'M 283,-280, 280, 0, 0 ,0'
|
||||
} else if (+item.value < 0) {
|
||||
this.dotData.lineBottomOne = 'M 0 ,0, 280, 0,283,-280'
|
||||
} else {
|
||||
this.dotData.lineBottomOne = 'M 0,0 0,0'
|
||||
}
|
||||
} else if (item.pageLocation === 'fifth-line-bottom-two') {
|
||||
if (+item.value > 0) {
|
||||
this.dotData.lineBottomTwo = 'M 145,-280, 145, 0, 0 ,0'
|
||||
} else if (+item.value < 0) {
|
||||
this.dotData.lineBottomTwo = 'M 0 ,0,145, 0, 145,-280'
|
||||
} else {
|
||||
this.dotData.lineBottomTwo = 'M 0,0 0,0'
|
||||
}
|
||||
} else if (item.pageLocation === 'fifth-line-center') {
|
||||
if (+item.value > 0) {
|
||||
this.dotData.lineCenter = 'M 0,-283,0,0,0,0'
|
||||
} else if (+item.value < 0) {
|
||||
this.dotData.lineCenter = 'M 0,0,0,0,0,-283'
|
||||
} else {
|
||||
this.dotData.lineCenter = 'M 0,0 0,0'
|
||||
}
|
||||
} else if (item.pageLocation === 'fifth-line-bottom-four') {
|
||||
if (+item.value > 0) {
|
||||
this.dotData.lineBottomFour = 'M -135,-280,-135,0 0,0'
|
||||
} else if (+item.value < 0) {
|
||||
this.dotData.lineBottomFour = 'M 0,0 ,-135,0,-135,-280'
|
||||
} else {
|
||||
this.dotData.lineBottomFour = 'M 0,0 0,0'
|
||||
}
|
||||
} else if (item.pageLocation === 'fifth-line-bottom-five') {
|
||||
if (+item.value > 0) {
|
||||
this.dotData.lineBottomFive = 'M -270,-280,-270,0 0,0'
|
||||
} else if (+item.value < 0) {
|
||||
this.dotData.lineBottomFive = 'M 0,0,-270,0,-270,-280'
|
||||
} else {
|
||||
this.dotData.lineBottomFive = 'M 0,0 0,0'
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
} catch (error) {
|
||||
// console.log(error);
|
||||
} finally {
|
||||
this.loading = false
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.center-box {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
@mixin move-round($duration, $delay) {
|
||||
fill: none;
|
||||
stroke-width: 5;
|
||||
stroke-linejoin: round;
|
||||
stroke-linecap: round;
|
||||
stroke-dasharray: 3, 900;
|
||||
stroke-dashoffset: 0;
|
||||
animation: lineMove $duration $delay cubic-bezier(0, 0, 0.74, 0.74) infinite;
|
||||
}
|
||||
|
||||
@keyframes lineMove {
|
||||
0% {
|
||||
stroke-dashoffset: -850;
|
||||
}
|
||||
100% {
|
||||
stroke-dashoffset: -0;
|
||||
}
|
||||
}
|
||||
.g-rect-fill-two {
|
||||
@include move-round(3.5s, 1s);
|
||||
}
|
||||
</style>
|
||||
851
src/views/dashboardtest/components/top-center/fire.vue
Normal file
851
src/views/dashboardtest/components/top-center/fire.vue
Normal file
@ -0,0 +1,851 @@
|
||||
<template>
|
||||
<ItemBox :title="$t('dashboard.stationTopo')" style="min-height: 560px;">
|
||||
<div ref="svgLine" class="center-box">
|
||||
<div v-loading="loading">
|
||||
<svg
|
||||
version="1.1"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||
xml:space="preserve"
|
||||
class="circle-load-rect-svg"
|
||||
viewBox="0 0 800 546"
|
||||
>
|
||||
<defs>
|
||||
<defs>
|
||||
<radialGradient id="RadialGradient1">
|
||||
<stop offset="0%" stop-color="#fff" />
|
||||
<stop offset="30%" stop-color="#0171c1" />
|
||||
<stop offset="50%" stop-color="#035088" />
|
||||
<stop offset="100%" stop-color="#02395a" />
|
||||
</radialGradient>
|
||||
</defs>
|
||||
<marker id="markerCircle" markerWidth="15" markerHeight="15" refX="5" refY="5">
|
||||
<circle cx="5" cy="5" r="5" style="stroke: none; fill: url(#RadialGradient1)" />
|
||||
</marker>
|
||||
|
||||
<marker id="markerArrow" markerWidth="13" markerHeight="13" refX="2" refY="6" orient="auto">
|
||||
<path d="M2,2 L2,11 L10,6 L2,2" style="fill: black" />
|
||||
</marker>
|
||||
|
||||
<linearGradient id="line" x1="80%" y1="90%" x2="80%" y2="0%">
|
||||
<stop offset="0%" style="stop-color:rgba(0, 255, 25, 1); " />
|
||||
<stop offset="50%" style="stop-color:rgba(0, 255, 25, 0.3); " />
|
||||
<stop offset="70%" style="stop-color:rgba(0, 255, 25, 1); " />
|
||||
</linearGradient>
|
||||
|
||||
<linearGradient id="SvgjsLinearGradient6627" gradientTransform="rotate(-10)" y2="0" x2="0" y1="1" x1="0">
|
||||
<stop id="SvgjsStop6628" offset="0.17221" stop-color="blue" />
|
||||
<stop id="SvgjsStop6629" offset="0.17221" stop-color="#cccccc" />
|
||||
<stop id="SvgjsStop6630" offset="1" stop-color="#cccccc" />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<!-- 左 -->
|
||||
<text x="44" y="40" fill="#00C2FF" font-size="14">
|
||||
AGC指令1
|
||||
</text>
|
||||
<text x="118" y="40" fill="#00C2FF" font-size="14">
|
||||
{{ statusList[0].agcOrder }} MW
|
||||
</text>
|
||||
|
||||
<text x="44" y="67" fill="#00FF19" font-size="14">
|
||||
机组出力1
|
||||
</text>
|
||||
<text x="118" y="67" fill="#00FF19" font-size="14">
|
||||
{{ statusList[0].unitOutput }} MW
|
||||
</text>
|
||||
|
||||
<text x="44" y="94" fill="#FF0000" font-size="14">
|
||||
联合出力1
|
||||
</text>
|
||||
<text x="118" y="94" fill="#FF0000" font-size="14">
|
||||
{{ statusList[0].jointOutput }} MW
|
||||
</text>
|
||||
|
||||
<text x="58" y="133" fill="#FFE710" font-size="14">
|
||||
机组一次调频闭锁信号1
|
||||
</text>
|
||||
<circle
|
||||
cx="48"
|
||||
cy="128"
|
||||
r="5"
|
||||
:style="{fill:statusColor(statusList[0].primaryFrequencyModulationSignal)}"
|
||||
/>
|
||||
|
||||
<text x="58" y="195" fill="#FF0000" font-size="14">
|
||||
储能A段放电状态
|
||||
</text>
|
||||
<circle
|
||||
cx="48"
|
||||
cy="190"
|
||||
r="5"
|
||||
:style="{fill:statusColor(statusList[0].dischargeState)}"
|
||||
/>
|
||||
|
||||
<text x="58" y="217" fill="#FF0000" font-size="14">
|
||||
储能A段放电闭锁
|
||||
</text>
|
||||
<circle
|
||||
cx="48"
|
||||
cy="212"
|
||||
r="5"
|
||||
:style="{fill:statusColor(statusList[0].dischargeBlocking)}"
|
||||
/>
|
||||
|
||||
<text x="58" y="239" fill="#00FF19" font-size="14">
|
||||
储能A段充电状态
|
||||
</text>
|
||||
<circle
|
||||
cx="48"
|
||||
cy="234"
|
||||
r="5"
|
||||
:style="{fill:statusColor(statusList[0].chargeState)}"
|
||||
/>
|
||||
|
||||
<text x="58" y="261" fill="#00FF19" font-size="14">
|
||||
储能A段充电闭锁
|
||||
</text>
|
||||
<circle
|
||||
cx="48"
|
||||
cy="256"
|
||||
r="5"
|
||||
:style="{fill:statusColor(statusList[0].chargeBlocking)}"
|
||||
/>
|
||||
|
||||
<!-- 右 -->
|
||||
<text x="588" y="40" fill="#00C2FF" font-size="14">
|
||||
AGC指令1
|
||||
</text>
|
||||
<text x="662" y="40" fill="#00C2FF" font-size="14">
|
||||
{{ statusList[1].powerSetting }} MW
|
||||
</text>
|
||||
|
||||
<text x="588" y="67" fill="#00FF19" font-size="14">
|
||||
机组出力1
|
||||
</text>
|
||||
<text x="662" y="67" fill="#00FF19" font-size="14">
|
||||
{{ statusList[1].unitOutput }} MW
|
||||
</text>
|
||||
|
||||
<text x="588" y="94" fill="#FF0000" font-size="14">
|
||||
联合出力1
|
||||
</text>
|
||||
<text x="662" y="94" fill="#FF0000" font-size="14">
|
||||
{{ statusList[1].jointOutput }} MW
|
||||
</text>
|
||||
|
||||
<text x="602" y="133" fill="#FFE710" font-size="14">
|
||||
机组一次调频闭锁信号2
|
||||
</text>
|
||||
<circle
|
||||
cx="592"
|
||||
cy="128"
|
||||
r="5"
|
||||
:style="{fill:statusColor(statusList[1].primaryFrequencyModulationSignal)}"
|
||||
/>
|
||||
|
||||
<text x="602" y="195" fill="#FF0000" font-size="14">
|
||||
储能B段放电状态
|
||||
</text>
|
||||
<circle
|
||||
cx="592"
|
||||
cy="190"
|
||||
r="5"
|
||||
:style="{fill:statusColor(statusList[1].dischargeState)}"
|
||||
/>
|
||||
|
||||
<text x="602" y="217" fill="#FF0000" font-size="14">
|
||||
储能B段放电闭锁
|
||||
</text>
|
||||
<circle
|
||||
cx="592"
|
||||
cy="212"
|
||||
r="5"
|
||||
:style="{fill:statusColor(statusList[1].dischargeBlocking)}"
|
||||
/>
|
||||
|
||||
<text x="602" y="239" fill="#00FF19" font-size="14">
|
||||
储能B段充电状态
|
||||
</text>
|
||||
<circle
|
||||
cx="592"
|
||||
cy="234"
|
||||
r="5"
|
||||
:style="{fill:statusColor(statusList[1].chargeState)}"
|
||||
/>
|
||||
|
||||
<text x="602" y="261" fill="#00FF19" font-size="14">
|
||||
储能B段充电闭锁
|
||||
</text>
|
||||
<circle
|
||||
cx="592"
|
||||
cy="256"
|
||||
r="5"
|
||||
:style="{fill:statusColor(statusList[1].chargeBlocking)}"
|
||||
/>
|
||||
|
||||
<!-- 左 -->
|
||||
<rect
|
||||
x="32"
|
||||
y="340"
|
||||
width="360"
|
||||
height="180"
|
||||
rx="5"
|
||||
style="stroke:#339DFF; fill: none;"
|
||||
/>
|
||||
|
||||
<!-- {{ $t("dashboard.battery") }} -->
|
||||
<rect
|
||||
x="280"
|
||||
y="375"
|
||||
width="40"
|
||||
height="55"
|
||||
rx="2"
|
||||
stroke-width="2"
|
||||
style="stroke:#FFFFFF; fill: none;"
|
||||
/>
|
||||
<rect
|
||||
x="291"
|
||||
y="369"
|
||||
width="18"
|
||||
height="6"
|
||||
style="stroke:#FFFFFF; fill: #FFFFFF;"
|
||||
/>
|
||||
<rect
|
||||
x="280"
|
||||
:y="getY(statusList[0].soc)"
|
||||
width="40"
|
||||
:height="getHeight(statusList[0].soc)"
|
||||
style="stroke:#00FF19; fill: #00FF19;"
|
||||
/>
|
||||
<text x="286" y="408" fill="#FFFFFF" font-size="14">
|
||||
{{ statusList[0].soc }}%
|
||||
</text>
|
||||
|
||||
<text x="44" y="366" fill="#4BF4FF" font-size="18">
|
||||
功率设定值
|
||||
</text>
|
||||
<text x="153" y="366" fill="#4BF4FF" font-size="18">
|
||||
{{ statusList[0].powerSetting }} MW
|
||||
</text>
|
||||
|
||||
<text x="62" y="393" fill="#ED008E" font-size="18">
|
||||
储能出力
|
||||
</text>
|
||||
<text x="153" y="393" fill="#ED008E" font-size="18">
|
||||
{{ statusList[0].energyStorageOutput }} MW
|
||||
</text>
|
||||
|
||||
<text x="44" y="420" fill="#FFFFFF" font-size="14">
|
||||
可充功率
|
||||
</text>
|
||||
<text x="108" y="420" fill="#FFFFFF" font-size="14">
|
||||
{{ statusList[0].allowableChargePower }} MW
|
||||
</text>
|
||||
|
||||
<text x="44" y="447" fill="#FFFFFF" font-size="14">
|
||||
可放功率
|
||||
</text>
|
||||
<text x="108" y="447" fill="#FFFFFF" font-size="14">
|
||||
{{ statusList[0].allowableDischargePower }} MW
|
||||
</text>
|
||||
|
||||
<text x="44" y="474" fill="#FFFFFF" font-size="14">
|
||||
可充电量
|
||||
</text>
|
||||
<text x="108" y="474" fill="#FFFFFF" font-size="14">
|
||||
{{ statusList[0].allowableCharge }} MWh
|
||||
</text>
|
||||
|
||||
<text x="44" y="501" fill="#FFFFFF" font-size="14">
|
||||
可放电量
|
||||
</text>
|
||||
<text x="108" y="501" fill="#FFFFFF" font-size="14">
|
||||
{{ statusList[0].allowableDischarge }} MWh
|
||||
</text>
|
||||
|
||||
<circle
|
||||
cx="299"
|
||||
cy="400"
|
||||
r="50"
|
||||
stroke-width="2"
|
||||
style="stroke:#00FF19; fill:transparent"
|
||||
/>
|
||||
|
||||
<!-- <text x="234" y="474" fill="#FFFFFF" font-size="14">
|
||||
储能A段系统状态
|
||||
</text>
|
||||
<rect
|
||||
x="346"
|
||||
y="462"
|
||||
width="32"
|
||||
height="16"
|
||||
rx="2"
|
||||
fill="url(#line)"
|
||||
/>
|
||||
|
||||
<text x="348" y="474" fill="#FFFFFF" font-size="14">
|
||||
强行
|
||||
</text> -->
|
||||
|
||||
<text x="234" y="501" fill="#FFFFFF" font-size="14">
|
||||
储能A段系统状态
|
||||
</text>
|
||||
<rect
|
||||
x="346"
|
||||
y="488"
|
||||
width="32"
|
||||
height="16"
|
||||
rx="2"
|
||||
fill="url(#line)"
|
||||
/>
|
||||
<text x="348" y="501" fill="#FFFFFF" font-size="14">
|
||||
强行
|
||||
</text>
|
||||
<!-- 右 -->
|
||||
<rect
|
||||
x="408"
|
||||
y="340"
|
||||
width="360"
|
||||
height="180"
|
||||
rx="5"
|
||||
style="stroke:#339DFF; fill: none;"
|
||||
/>
|
||||
|
||||
<!-- {{ $t("dashboard.battery") }} -->
|
||||
<rect
|
||||
x="462"
|
||||
y="375"
|
||||
width="40"
|
||||
height="55"
|
||||
rx="2"
|
||||
stroke-width="2"
|
||||
style="stroke:#FFFFFF; fill: none;"
|
||||
/>
|
||||
<rect
|
||||
x="472"
|
||||
y="369"
|
||||
width="18"
|
||||
height="6"
|
||||
style="stroke:#FFFFFF; fill: #FFFFFF;"
|
||||
/>
|
||||
<rect
|
||||
x="462"
|
||||
:y="getY(statusList[1].soc)"
|
||||
width="40"
|
||||
:height="getHeight(statusList[1].soc)"
|
||||
style="stroke:#00FF19; fill: #00FF19;"
|
||||
/>
|
||||
<text x="468" y="408" fill="#FFFFFF" font-size="14">
|
||||
{{ statusList[1].soc }}%
|
||||
</text>
|
||||
|
||||
<text x="578" y="366" fill="#4BF4FF" font-size="18">
|
||||
功率设定值
|
||||
</text>
|
||||
<text x="687" y="366" fill="#4BF4FF" font-size="18">
|
||||
{{ statusList[1].powerSetting }} MW
|
||||
</text>
|
||||
|
||||
<text x="596" y="393" fill="#ED008E" font-size="18">
|
||||
储能出力
|
||||
</text>
|
||||
<text x="687" y="393" fill="#ED008E" font-size="18">
|
||||
{{ statusList[1].energyStorageOutput }} MW
|
||||
</text>
|
||||
|
||||
<text x="588" y="420" fill="#FFFFFF" font-size="14">
|
||||
可充功率
|
||||
</text>
|
||||
<text x="652" y="420" fill="#FFFFFF" font-size="14">
|
||||
{{ statusList[1].allowableChargePower }} MW
|
||||
</text>
|
||||
|
||||
<text x="588" y="447" fill="#FFFFFF" font-size="14">
|
||||
可放功率
|
||||
</text>
|
||||
<text x="652" y="447" fill="#FFFFFF" font-size="14">
|
||||
{{ statusList[1].allowableDischargePower }} MW
|
||||
</text>
|
||||
|
||||
<text x="588" y="474" fill="#FFFFFF" font-size="14">
|
||||
可充电量
|
||||
</text>
|
||||
<text x="652" y="474" fill="#FFFFFF" font-size="14">
|
||||
{{ statusList[1].allowableCharge }} MWh
|
||||
</text>
|
||||
|
||||
<text x="588" y="501" fill="#FFFFFF" font-size="14">
|
||||
可放电量
|
||||
</text>
|
||||
<text x="652" y="501" fill="#FFFFFF" font-size="14">
|
||||
{{ statusList[1].allowableDischarge }} MWh
|
||||
</text>
|
||||
<circle
|
||||
cx="481"
|
||||
cy="400"
|
||||
r="50"
|
||||
stroke-width="2"
|
||||
style="stroke:#00FF19; fill:transparent"
|
||||
/>
|
||||
<!-- <text x="427" y="474" fill="#FFFFFF" font-size="14">
|
||||
储能B段系统状态
|
||||
</text>
|
||||
<rect
|
||||
x="543"
|
||||
y="462"
|
||||
width="32"
|
||||
height="16"
|
||||
rx="2"
|
||||
fill="url(#line)"
|
||||
/>
|
||||
<text x="545" y="474" fill="#FFFFFF" font-size="14">
|
||||
强行
|
||||
</text> -->
|
||||
|
||||
<text x="427" y="501" fill="#FFFFFF" font-size="14">
|
||||
储能B段系统状态
|
||||
</text>
|
||||
<rect
|
||||
x="543"
|
||||
y="488"
|
||||
width="32"
|
||||
height="16"
|
||||
rx="2"
|
||||
fill="url(#line)"
|
||||
/>
|
||||
<text x="545" y="501" fill="#FFFFFF" font-size="14">
|
||||
强行
|
||||
</text>
|
||||
|
||||
<!-- 中 -->
|
||||
<circle
|
||||
cx="295"
|
||||
cy="45"
|
||||
r="14"
|
||||
stroke-width="2"
|
||||
style="stroke:#FF0000; fill:transparent"
|
||||
/>
|
||||
<text x="287" y="52" fill="#FF0000" font-size="20">
|
||||
G
|
||||
</text>
|
||||
<polyline
|
||||
points="295,60 295,85"
|
||||
fill="none"
|
||||
class="g-rect-path"
|
||||
stroke-width="2"
|
||||
stroke="#FF0000"
|
||||
/>
|
||||
<circle
|
||||
cx="295"
|
||||
cy="94"
|
||||
r="8"
|
||||
stroke-width="2"
|
||||
style="stroke:#FF0000; fill:transparent"
|
||||
/>
|
||||
<circle
|
||||
cx="289"
|
||||
cy="102"
|
||||
r="8"
|
||||
stroke-width="2"
|
||||
style="stroke:#FF0000; fill:transparent"
|
||||
/>
|
||||
<circle
|
||||
cx="301"
|
||||
cy="102"
|
||||
r="8"
|
||||
stroke-width="2"
|
||||
style="stroke:#FF0000; fill:transparent"
|
||||
/>
|
||||
<polyline
|
||||
points="289,110 289,132"
|
||||
fill="none"
|
||||
class="g-rect-path"
|
||||
stroke-width="2"
|
||||
stroke="#FF0000"
|
||||
/>
|
||||
<polyline
|
||||
points="301,110 301,132"
|
||||
fill="none"
|
||||
class="g-rect-path"
|
||||
stroke-width="2"
|
||||
stroke="#FF0000"
|
||||
/>
|
||||
<polyline
|
||||
points="267,133 324,133"
|
||||
fill="none"
|
||||
class="g-rect-path"
|
||||
stroke-width="3"
|
||||
stroke="#FF0000"
|
||||
/>
|
||||
|
||||
<polyline
|
||||
points="278,134 278,239 293 239"
|
||||
fill="none"
|
||||
class="g-rect-path"
|
||||
stroke-width="2"
|
||||
stroke="#FF0000"
|
||||
/>
|
||||
<polyline
|
||||
points="312,134 312,185"
|
||||
fill="none"
|
||||
class="g-rect-path"
|
||||
stroke-width="2"
|
||||
stroke="#FF0000"
|
||||
/>
|
||||
<polyline
|
||||
points="312,195 312,239 293 239"
|
||||
fill="none"
|
||||
class="g-rect-path"
|
||||
stroke-width="2"
|
||||
stroke="#FF0000"
|
||||
/>
|
||||
|
||||
<polyline
|
||||
points="312,185 460,185 460,200"
|
||||
fill="none"
|
||||
class="g-rect-path"
|
||||
stroke-width="2"
|
||||
stroke="#FF0000"
|
||||
/>
|
||||
|
||||
<polyline
|
||||
points="312,195 380,195 380,175 460,175"
|
||||
fill="none"
|
||||
class="g-rect-path"
|
||||
stroke-width="2"
|
||||
stroke="#FF0000"
|
||||
/>
|
||||
|
||||
<polyline
|
||||
points="295,239 295 293"
|
||||
fill="none"
|
||||
class="g-rect-path"
|
||||
stroke-width="2"
|
||||
stroke="#FF0000"
|
||||
/>
|
||||
|
||||
<circle
|
||||
cx="295"
|
||||
cy="300"
|
||||
r="8"
|
||||
stroke-width="2"
|
||||
style="stroke:#FF0000; fill:transparent"
|
||||
/>
|
||||
<circle
|
||||
cx="295"
|
||||
cy="310"
|
||||
r="8"
|
||||
stroke-width="2"
|
||||
style="stroke:#FF0000; fill:transparent"
|
||||
/>
|
||||
<polyline
|
||||
points="295,318 295 348"
|
||||
fill="none"
|
||||
class="g-rect-path"
|
||||
stroke-width="2"
|
||||
stroke="#FF0000"
|
||||
/>
|
||||
|
||||
<text x="367" y="133" fill="#FFFFFF" font-size="16">
|
||||
电厂侧
|
||||
</text>
|
||||
|
||||
<text x="367" y="238" fill="#FFFFFF" font-size="16">
|
||||
储能侧
|
||||
</text>
|
||||
<!-- 中右 -->
|
||||
<circle
|
||||
cx="477"
|
||||
cy="45"
|
||||
r="14"
|
||||
stroke-width="2"
|
||||
style="stroke:#FF0000; fill:transparent"
|
||||
/>
|
||||
<text x="469" y="52" fill="#FF0000" font-size="20">
|
||||
G
|
||||
</text>
|
||||
<polyline
|
||||
points="477,60 477,85"
|
||||
fill="none"
|
||||
class="g-rect-path"
|
||||
stroke-width="2"
|
||||
stroke="#FF0000"
|
||||
/>
|
||||
|
||||
<circle
|
||||
cx="477"
|
||||
cy="94"
|
||||
r="8"
|
||||
stroke-width="2"
|
||||
style="stroke:#FF0000; fill:transparent"
|
||||
/>
|
||||
<circle
|
||||
cx="471"
|
||||
cy="102"
|
||||
r="8"
|
||||
stroke-width="2"
|
||||
style="stroke:#FF0000; fill:transparent"
|
||||
/>
|
||||
<circle
|
||||
cx="483"
|
||||
cy="102"
|
||||
r="8"
|
||||
stroke-width="2"
|
||||
style="stroke:#FF0000; fill:transparent"
|
||||
/>
|
||||
|
||||
<polyline
|
||||
points="471,110 471,132"
|
||||
fill="none"
|
||||
class="g-rect-path"
|
||||
stroke-width="2"
|
||||
stroke="#FF0000"
|
||||
/>
|
||||
<polyline
|
||||
points="483,110 483,132"
|
||||
fill="none"
|
||||
class="g-rect-path"
|
||||
stroke-width="2"
|
||||
stroke="#FF0000"
|
||||
/>
|
||||
<polyline
|
||||
points="449,133 506,133"
|
||||
fill="none"
|
||||
class="g-rect-path"
|
||||
stroke-width="3"
|
||||
stroke="#FF0000"
|
||||
/>
|
||||
|
||||
<polyline
|
||||
points="494,134 494,239 479 239"
|
||||
fill="none"
|
||||
class="g-rect-path"
|
||||
stroke-width="2"
|
||||
stroke="#FF0000"
|
||||
style="z-index:8"
|
||||
/>
|
||||
|
||||
<polyline
|
||||
points="460,134 460,175"
|
||||
fill="none"
|
||||
class="g-rect-path"
|
||||
stroke-width="2"
|
||||
stroke="#FF0000"
|
||||
/>
|
||||
<polyline
|
||||
points="460,200 460,239 479 239"
|
||||
fill="none"
|
||||
class="g-rect-path"
|
||||
stroke-width="2"
|
||||
stroke="#FF0000"
|
||||
/>
|
||||
|
||||
<polyline
|
||||
points="479,239 479 293"
|
||||
fill="none"
|
||||
class="g-rect-path"
|
||||
stroke-width="2"
|
||||
stroke="#FF0000"
|
||||
/>
|
||||
<circle
|
||||
cx="479"
|
||||
cy="300"
|
||||
r="8"
|
||||
stroke-width="2"
|
||||
style="stroke:#FF0000; fill:transparent"
|
||||
/>
|
||||
<circle
|
||||
cx="479"
|
||||
cy="310"
|
||||
r="8"
|
||||
stroke-width="2"
|
||||
style="stroke:#FF0000; fill:transparent"
|
||||
/>
|
||||
<polyline
|
||||
points="479,318 479 348"
|
||||
fill="none"
|
||||
class="g-rect-path"
|
||||
stroke-width="2"
|
||||
stroke="#FF0000"
|
||||
/>
|
||||
|
||||
<text x="213" y="160" fill="#FFFFFF" font-size="12">
|
||||
10BBA38
|
||||
</text>
|
||||
<rect
|
||||
x="273"
|
||||
y="144"
|
||||
width="10"
|
||||
height="22"
|
||||
:style="{fill: statusRectColor(statusList[0].breaker1)}"
|
||||
/>
|
||||
|
||||
<text x="321" y="160" fill="#FFFFFF" font-size="12">
|
||||
10BBA38
|
||||
</text>
|
||||
<rect
|
||||
x="307"
|
||||
y="144"
|
||||
width="10"
|
||||
height="22"
|
||||
:style="{fill: statusRectColor(statusList[0].breaker2)}"
|
||||
/>
|
||||
|
||||
<text x="242" y="222" fill="#FFFFFF" font-size="12">
|
||||
10 A
|
||||
</text>
|
||||
<rect
|
||||
x="273"
|
||||
y="207"
|
||||
width="10"
|
||||
height="22"
|
||||
:style="{fill: statusRectColor(statusList[0].breaker3)}"
|
||||
/>
|
||||
|
||||
<text x="321" y="222" fill="#FFFFFF" font-size="12">
|
||||
11 A
|
||||
</text>
|
||||
<rect
|
||||
x="307"
|
||||
y="207"
|
||||
width="10"
|
||||
height="22"
|
||||
:style="{fill: statusRectColor(statusList[0].breaker4)}"
|
||||
/>
|
||||
|
||||
<text x="220" y="271" fill="#FFFFFF" font-size="12">
|
||||
1号油变进线
|
||||
</text>
|
||||
<rect
|
||||
x="290"
|
||||
y="255"
|
||||
width="10"
|
||||
height="22"
|
||||
:style="{fill: statusRectColor(statusList[0].breaker5)}"
|
||||
/>
|
||||
<text x="400" y="160" fill="#FFFFFF" font-size="12">
|
||||
20BBA36
|
||||
</text>
|
||||
<rect
|
||||
x="455"
|
||||
y="144"
|
||||
width="10"
|
||||
height="22"
|
||||
:style="{fill: statusRectColor(statusList[1].breaker1)}"
|
||||
/>
|
||||
|
||||
<text x="505" y="160" fill="#FFFFFF" font-size="12">
|
||||
20BBB38
|
||||
</text>
|
||||
<rect
|
||||
x="489"
|
||||
y="144"
|
||||
width="10"
|
||||
height="22"
|
||||
:style="{fill: statusRectColor(statusList[1].breaker2)}"
|
||||
/>
|
||||
<text x="424" y="222" fill="#FFFFFF" font-size="12">
|
||||
10 B
|
||||
</text>
|
||||
<rect
|
||||
x="455"
|
||||
y="207"
|
||||
width="10"
|
||||
height="22"
|
||||
:style="{fill: statusRectColor(statusList[1].breaker3)}"
|
||||
/>
|
||||
<text x="503" y="222" fill="#FFFFFF" font-size="12">
|
||||
11 B
|
||||
</text>
|
||||
<rect
|
||||
x="489"
|
||||
y="207"
|
||||
width="10"
|
||||
height="22"
|
||||
:style="{fill: statusRectColor(statusList[1].breaker4)}"
|
||||
/>
|
||||
<text x="404" y="271" fill="#FFFFFF" font-size="12">
|
||||
1号油变进线
|
||||
</text>
|
||||
<rect
|
||||
x="474"
|
||||
y="255"
|
||||
width="10"
|
||||
height="22"
|
||||
:style="{fill: statusRectColor(statusList[1].breaker5)}"
|
||||
/>
|
||||
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</ItemBox>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
loading: false,
|
||||
barterValue: 80,
|
||||
status: 1,
|
||||
statusList: [{ agcOrder: 111, unitOutput: 222, jointOutput: 333, primaryFrequencyModulationSignal: 1, dischargeState: 1, dischargeBlocking: 1, chargeState: 1, chargeBlocking: 1, powerSetting: 100, energyStorageOutput: 100, allowableChargePower: 100, allowableDischargePower: 100, allowableCharge: 100, allowableDischarge: 100, systemState: 1, soc: 100, breaker1: 1, breaker2: 1, breaker3: 1, breaker4: 1, breaker5: 1 },
|
||||
{ agcOrder: 111, unitOutput: 222, jointOutput: 333, primaryFrequencyModulationSignal: 0, dischargeState: 0, dischargeBlocking: 0, chargeState: 0, chargeBlocking: 0, powerSetting: 23, energyStorageOutput: 11, allowableChargePower: 11, allowableDischargePower: 11, allowableCharge: 11, allowableDischarge: 11, systemState: 1, soc: 50, breaker1: 0, breaker2: 0, breaker3: 0, breaker4: 0, breaker5: 0 }]
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
|
||||
},
|
||||
methods: {
|
||||
|
||||
statusRectColor(val) {
|
||||
if (val === 1) {
|
||||
return '#00FF1A'
|
||||
} else {
|
||||
return '#FF0000'
|
||||
}
|
||||
},
|
||||
getHeight(val) {
|
||||
return (val / 100) * 55
|
||||
},
|
||||
getY(val) {
|
||||
return 375 + (55 - this.getHeight(val))
|
||||
},
|
||||
statusColor(val) {
|
||||
if (val === 1) {
|
||||
return '#00FF1A'
|
||||
} else {
|
||||
return '#FF0000'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.center-box {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
@mixin move-round($duration, $delay) {
|
||||
fill: none;
|
||||
stroke-width: 5;
|
||||
stroke-linejoin: round;
|
||||
stroke-linecap: round;
|
||||
stroke-dasharray: 3, 900;
|
||||
stroke-dashoffset: 0;
|
||||
animation: lineMove $duration $delay cubic-bezier(0, 0, 0.74, 0.74) infinite;
|
||||
}
|
||||
|
||||
@keyframes lineMove {
|
||||
0% {
|
||||
stroke-dashoffset: -850;
|
||||
}
|
||||
|
||||
100% {
|
||||
stroke-dashoffset: -0;
|
||||
}
|
||||
}
|
||||
|
||||
.g-rect-fill-two {
|
||||
@include move-round(3.5s, 1s);
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,800 @@
|
||||
<template>
|
||||
<ItemBox :title="$t('dashboard.stationTopo')" style="min-height: 560px;">
|
||||
<div ref="svgLine" class="center-box">
|
||||
<div v-loading="loading">
|
||||
<svg
|
||||
version="1.1"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||
xml:space="preserve"
|
||||
class="circle-load-rect-svg"
|
||||
viewBox="0 0 800 500"
|
||||
>
|
||||
<defs>
|
||||
<defs>
|
||||
<radialGradient id="RadialGradient1">
|
||||
<stop offset="0%" stop-color="#fff" />
|
||||
<stop offset="30%" stop-color="#0171c1" />
|
||||
<stop offset="50%" stop-color="#035088" />
|
||||
<stop offset="100%" stop-color="#02395a" />
|
||||
</radialGradient>
|
||||
</defs>
|
||||
<marker
|
||||
id="markerCircle"
|
||||
markerWidth="15"
|
||||
markerHeight="15"
|
||||
refX="5"
|
||||
refY="5"
|
||||
>
|
||||
<circle
|
||||
cx="5"
|
||||
cy="5"
|
||||
r="5"
|
||||
style="stroke: none; fill: url(#RadialGradient1)"
|
||||
/>
|
||||
</marker>
|
||||
|
||||
<marker
|
||||
id="markerArrow"
|
||||
markerWidth="13"
|
||||
markerHeight="13"
|
||||
refX="2"
|
||||
refY="6"
|
||||
orient="auto"
|
||||
>
|
||||
<path d="M2,2 L2,11 L10,6 L2,2" style="fill: black" />
|
||||
</marker>
|
||||
</defs>
|
||||
<!-- //线条 -->
|
||||
<!-- top -->
|
||||
<polyline
|
||||
points="154,80 385,80"
|
||||
fill="none"
|
||||
class="g-rect-path"
|
||||
stroke="#0094FF"
|
||||
stroke-dasharray="3 3"
|
||||
/>
|
||||
<rect
|
||||
x="152"
|
||||
y="78"
|
||||
width="233"
|
||||
height="4"
|
||||
:style="{ fill: 'rgba(100,100,100,0)', stroke: 'transparent',cursor: 'pointer' }"
|
||||
@click="lookDeviceDetail('line-top-left')"
|
||||
/>
|
||||
|
||||
<polyline
|
||||
points="385,80 600,80"
|
||||
fill="none"
|
||||
class="g-rect-path"
|
||||
stroke="#0094FF"
|
||||
stroke-dasharray="3 3"
|
||||
/>
|
||||
<rect
|
||||
x="383"
|
||||
y="78"
|
||||
width="217"
|
||||
height="4"
|
||||
:style="{ fill: 'rgba(100,100,100,0)', stroke: 'transparent',cursor: 'pointer' }"
|
||||
@click="lookDeviceDetail('line-top-right')"
|
||||
/>
|
||||
<!-- center -->
|
||||
<polyline
|
||||
points="385,80 385,363"
|
||||
fill="none"
|
||||
class="g-rect-path"
|
||||
stroke="#0094FF"
|
||||
stroke-dasharray="3 3"
|
||||
/>
|
||||
<rect
|
||||
x="385"
|
||||
y="80"
|
||||
width="4"
|
||||
height="285"
|
||||
:style="{ fill: 'rgba(100,100,100,0)', stroke: 'transparent',cursor: 'pointer' }"
|
||||
@click="lookDeviceDetail('line-center')"
|
||||
/>
|
||||
|
||||
<polyline
|
||||
points="385,160 460,160"
|
||||
fill="none"
|
||||
class="g-rect-path"
|
||||
stroke="#0094FF"
|
||||
stroke-dasharray="3 3"
|
||||
/>
|
||||
|
||||
<!-- bottom -->
|
||||
<polyline
|
||||
points="104,363 300,363"
|
||||
fill="none"
|
||||
class="g-rect-path"
|
||||
stroke="#0094FF"
|
||||
stroke-dasharray="3 3"
|
||||
/>
|
||||
<rect
|
||||
x="104"
|
||||
y="361"
|
||||
width="196"
|
||||
height="4"
|
||||
:style="{ fill: 'rgba(100,100,100,0)', stroke: 'transparent',cursor: 'pointer' }"
|
||||
@click="lookDeviceDetail('line-bottom-1')"
|
||||
/>
|
||||
<polyline
|
||||
points="300,363 385,363"
|
||||
fill="none"
|
||||
class="g-rect-path"
|
||||
stroke="#0094FF"
|
||||
stroke-dasharray="3 3"
|
||||
/>
|
||||
<rect
|
||||
x="300"
|
||||
y="361"
|
||||
width="85"
|
||||
height="4"
|
||||
:style="{ fill: 'rgba(100,100,100,0)', stroke: 'transparent',cursor: 'pointer' }"
|
||||
@click="lookDeviceDetail('line-bottom-2')"
|
||||
/>
|
||||
<polyline
|
||||
points="385,363 470,363"
|
||||
fill="none"
|
||||
class="g-rect-path"
|
||||
stroke="#0094FF"
|
||||
stroke-dasharray="3 3"
|
||||
/>
|
||||
<rect
|
||||
x="385"
|
||||
y="361"
|
||||
width="85"
|
||||
height="4"
|
||||
:style="{ fill: 'rgba(100,100,100,0)', stroke: 'transparent',cursor: 'pointer' }"
|
||||
@click="lookDeviceDetail('line-bottom-3')"
|
||||
/>
|
||||
<polyline
|
||||
points="470,363 655,363"
|
||||
fill="none"
|
||||
class="g-rect-path"
|
||||
stroke="#0094FF"
|
||||
stroke-dasharray="3 3"
|
||||
/>
|
||||
<rect
|
||||
x="470"
|
||||
y="361"
|
||||
width="175"
|
||||
height="4"
|
||||
:style="{ fill: 'rgba(100,100,100,0)', stroke: 'transparent',cursor: 'pointer' }"
|
||||
@click="lookDeviceDetail('line-bottom-4')"
|
||||
/>
|
||||
|
||||
<!-- top -->
|
||||
<circle
|
||||
cx="154"
|
||||
cy="80"
|
||||
r="8"
|
||||
style="stroke: none; fill: url(#RadialGradient1)"
|
||||
/>
|
||||
<circle
|
||||
cx="600"
|
||||
cy="80"
|
||||
r="8"
|
||||
style="stroke: none; fill: url(#RadialGradient1)"
|
||||
/>
|
||||
|
||||
<!-- 动点 -->
|
||||
<circle
|
||||
cx="154"
|
||||
cy="80"
|
||||
r="8"
|
||||
style="stroke: none; fill: url(#RadialGradient1)"
|
||||
>
|
||||
<animateMotion
|
||||
repeatCount="indefinite"
|
||||
dur="4s"
|
||||
begin="0s"
|
||||
:path="dotData.lineTopLeft"
|
||||
/>
|
||||
</circle>
|
||||
<circle
|
||||
cx="385"
|
||||
cy="363"
|
||||
r="8"
|
||||
style="stroke: none; fill: url(#RadialGradient1)"
|
||||
>
|
||||
<animateMotion
|
||||
repeatCount="indefinite"
|
||||
dur="4s"
|
||||
begin="2s"
|
||||
:path="dotData.lineCenter"
|
||||
/>
|
||||
</circle>
|
||||
<circle
|
||||
cx="600"
|
||||
cy="80"
|
||||
r="8"
|
||||
style="stroke: none; fill: url(#RadialGradient1)"
|
||||
>
|
||||
<animateMotion
|
||||
repeatCount="indefinite"
|
||||
dur="4s"
|
||||
begin="0s"
|
||||
:path="dotData.lineTopRight"
|
||||
/>
|
||||
</circle>
|
||||
|
||||
<!-- bottom -->
|
||||
<circle
|
||||
cx="104"
|
||||
cy="363"
|
||||
r="8"
|
||||
style="stroke: none; fill: url(#RadialGradient1)"
|
||||
/>
|
||||
<circle
|
||||
cx="385"
|
||||
cy="363"
|
||||
r="8"
|
||||
style="stroke: none; fill: url(#RadialGradient1)"
|
||||
/>
|
||||
<circle
|
||||
cx="655"
|
||||
cy="363"
|
||||
r="8"
|
||||
style="stroke: none; fill: url(#RadialGradient1)"
|
||||
/>
|
||||
|
||||
<circle
|
||||
cx="300"
|
||||
cy="363"
|
||||
r="8"
|
||||
style="stroke: none; fill: url(#RadialGradient1)"
|
||||
/>
|
||||
|
||||
<circle
|
||||
cx="470"
|
||||
cy="363"
|
||||
r="8"
|
||||
style="stroke: none; fill: url(#RadialGradient1)"
|
||||
/>
|
||||
|
||||
<circle
|
||||
cx="104"
|
||||
cy="363"
|
||||
r="8"
|
||||
style="stroke: none; fill: url(#RadialGradient1)"
|
||||
>
|
||||
<animateMotion
|
||||
repeatCount="indefinite"
|
||||
dur="4s"
|
||||
begin="2s"
|
||||
:path="dotData.lineBottomLeft"
|
||||
/>
|
||||
</circle>
|
||||
|
||||
<circle
|
||||
cx="655"
|
||||
cy="363"
|
||||
r="8"
|
||||
style="stroke: none; fill: url(#RadialGradient1)"
|
||||
>
|
||||
<animateMotion
|
||||
repeatCount="indefinite"
|
||||
dur="4s"
|
||||
begin="2s"
|
||||
:path="dotData.lineBottomRight"
|
||||
/>
|
||||
</circle>
|
||||
|
||||
<circle
|
||||
cx="300"
|
||||
cy="363"
|
||||
r="8"
|
||||
style="stroke: none; fill: url(#RadialGradient1)"
|
||||
>
|
||||
<animateMotion
|
||||
repeatCount="indefinite"
|
||||
dur="4s"
|
||||
begin="2s"
|
||||
:path="dotData.lineBottomLeftTwo"
|
||||
/>
|
||||
</circle>
|
||||
|
||||
<circle
|
||||
cx="470"
|
||||
cy="363"
|
||||
r="8"
|
||||
style="stroke: none; fill: url(#RadialGradient1)"
|
||||
>
|
||||
<animateMotion
|
||||
repeatCount="indefinite"
|
||||
dur="4s"
|
||||
begin="2s"
|
||||
:path="dotData.lineBottomRightTwo"
|
||||
/>
|
||||
</circle>
|
||||
<!-- 图片和文字 -->
|
||||
|
||||
<!-- 市电 -->
|
||||
<image
|
||||
:xlink:href="gridImg"
|
||||
x="70"
|
||||
y="30"
|
||||
width="90"
|
||||
height="117"
|
||||
/>
|
||||
<text x="90" y="160" fill="#ffffff" font-size="14"> {{ $t("dashboard.grid") }}</text>
|
||||
|
||||
<!-- {{ $t("dashboard.load") }} -->
|
||||
<image
|
||||
:xlink:href="configData.house"
|
||||
x="610"
|
||||
y="30"
|
||||
width="90"
|
||||
height="117"
|
||||
@click="lookDeviceDetail('fourth-fuzai-1')"
|
||||
/>
|
||||
<text x="645" y="160" fill="#ffffff" font-size="14"> {{ $t("dashboard.load") }}</text>
|
||||
<g v-for="(item,index) in fuzaiData" :key="item.id">
|
||||
<text x="625" :y="180 + ( 20 * index)" fill="#ffffff" font-size="14">
|
||||
{{ item.name }}
|
||||
</text>
|
||||
<text :x="countChineseAndEnglishCharacters(item.name,625)" :y="180 + ( 20 * index)" fill="#FFB800" font-size="14">
|
||||
{{ item.value }}
|
||||
</text>
|
||||
</g>
|
||||
|
||||
<!-- 1#PCS -->
|
||||
<image
|
||||
:xlink:href="configData.pcs2"
|
||||
x="65"
|
||||
y="383"
|
||||
width="90"
|
||||
height="90"
|
||||
@click="lookDeviceDetail('fourth-pcs-1')"
|
||||
/>
|
||||
<text x="86" y="490" fill="#ffffff" font-size="14"> {{ hiddenTextWord(`1#${$t("dashboard.cabinet")}`,10) }}</text>
|
||||
<g v-for="(item,index) in pcs1Data" :key="item.id">
|
||||
<text x="40" :y="280 + ( 20 * index)" fill="#ffffff" font-size="14">
|
||||
{{ item.name }}
|
||||
</text>
|
||||
<text :x="countChineseAndEnglishCharacters(item.name,40)" :y="280 + ( 20 * index)" fill="#FFB800" font-size="14">
|
||||
{{ item.value }}
|
||||
</text>
|
||||
</g>
|
||||
<!-- 2#PCS -->
|
||||
<image
|
||||
:xlink:href="configData.pcs2"
|
||||
x="255"
|
||||
y="383"
|
||||
width="90"
|
||||
height="90"
|
||||
@click="lookDeviceDetail('fourth-pcs-2')"
|
||||
/>
|
||||
<text x="270" y="490" fill="#ffffff" font-size="14"> {{ hiddenTextWord(`2#${$t("dashboard.cabinet")}`,10) }}</text>
|
||||
<g v-for="(item,index) in pcs2Data" :key="item.id">
|
||||
<text x="210" :y="280 + ( 20 * index)" fill="#ffffff" font-size="14">
|
||||
{{ item.name }}
|
||||
</text>
|
||||
<text :x="countChineseAndEnglishCharacters(item.name,210)" :y="280 + ( 20 * index)" fill="#FFB800" font-size="14">
|
||||
{{ item.value }}
|
||||
</text>
|
||||
</g>
|
||||
|
||||
<!-- 3#PCS -->
|
||||
<image
|
||||
:xlink:href="configData.pcs2"
|
||||
x="414"
|
||||
y="383"
|
||||
width="90"
|
||||
height="90"
|
||||
@click="lookDeviceDetail('fourth-pcs-3')"
|
||||
/>
|
||||
<text x="434" y="490" fill="#ffffff" font-size="14"> {{ hiddenTextWord(`3#${$t("dashboard.cabinet")}`,10) }}</text>
|
||||
<g v-for="(item,index) in pcs3Data" :key="item.id">
|
||||
<text x="420" :y="280 + ( 20 * index)" fill="#ffffff" font-size="14">
|
||||
{{ item.name }}
|
||||
</text>
|
||||
<text :x="countChineseAndEnglishCharacters(item.name,420)" :y="280 + ( 20 * index)" fill="#FFB800" font-size="14">
|
||||
{{ item.value }}
|
||||
</text>
|
||||
</g>
|
||||
<!-- 4#PCS -->
|
||||
<image
|
||||
:xlink:href="configData.pcs2"
|
||||
x="594"
|
||||
y="383"
|
||||
width="90"
|
||||
height="90"
|
||||
@click="lookDeviceDetail('fourth-pcs-4')"
|
||||
/>
|
||||
<text x="614" y="490" fill="#ffffff" font-size="14"> {{ hiddenTextWord(`4#${$t("dashboard.cabinet")}`,10) }}</text>
|
||||
<g v-for="(item,index) in pcs4Data" :key="item.id">
|
||||
<text x="602" :y="280 + ( 20 * index)" fill="#ffffff" font-size="14">
|
||||
{{ item.name }}
|
||||
</text>
|
||||
<text :x="countChineseAndEnglishCharacters(item.name,602)" :y="280 + ( 20 * index)" fill="#FFB800" font-size="14">
|
||||
{{ item.value }}
|
||||
</text>
|
||||
</g>
|
||||
|
||||
<!-- 变压器 -->
|
||||
<image
|
||||
:xlink:href="configData.gui"
|
||||
x="320"
|
||||
y="193"
|
||||
width="140"
|
||||
height="105"
|
||||
/>
|
||||
|
||||
<!-- {{ $t("dashboard.ammeter") }} -->
|
||||
<image
|
||||
:xlink:href="ammeterImg"
|
||||
x="455"
|
||||
y="130"
|
||||
width="100"
|
||||
height="60"
|
||||
@click="lookDeviceDetail('fourth-ammeter-1')"
|
||||
/>
|
||||
<text x="485" y="203" fill="#ffffff" font-size="14">{{ $t("dashboard.ammeter") }}</text>
|
||||
<g v-for="(item,index) in ammeterData" :key="item.id">
|
||||
<text x="435" :y="220 + ( 20 * index)" fill="#ffffff" font-size="14">
|
||||
{{ item.name }}
|
||||
</text>
|
||||
<text :x="countChineseAndEnglishCharacters(item.name,435)" :y="220 + ( 20 * index)" fill="#FFB800" font-size="14">
|
||||
{{ item.value }}
|
||||
</text>
|
||||
</g>
|
||||
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<DispositionPointData :disposition-show="show_point_dispostion" :max="4" :page-location="pageLocation" @close="closePoint" @getData="getDynamicPointData" />
|
||||
</ItemBox>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import gridImg from '@/assets/images/wxjd/grid.png'
|
||||
import ammeterImg from '@/assets/images/wxjd/ammeter.png'
|
||||
import cabinetImg from '@/assets/images/wxjd/pcs-energy.png'
|
||||
import chargingPileImg from '@/assets/images/home-office.png'
|
||||
import distributionCabinetImg from '@/assets/images/wxjd/guiImg.png'
|
||||
import frameImg from '@/assets/images/wxjd/frame.png'
|
||||
import cangImg from '@/assets/images/home-cang.png'
|
||||
import { DynamicConfigPoint } from '@/api/home-page/index'
|
||||
import { hiddenTextWord } from '@/utils/index'
|
||||
import config from './config'
|
||||
import { changeTheme } from '@/utils/index'
|
||||
|
||||
export default {
|
||||
name: 'Index',
|
||||
props: {
|
||||
stationType: {
|
||||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
stationId: {
|
||||
type: Number,
|
||||
default: 0
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
hiddenTextWord,
|
||||
gridImg,
|
||||
ammeterImg,
|
||||
cabinetImg,
|
||||
chargingPileImg,
|
||||
distributionCabinetImg,
|
||||
cangImg,
|
||||
frameImg,
|
||||
dotData: {
|
||||
lineTop: 'M 0,0 0,0',
|
||||
lineBottomLeft: 'M 0,0 0,0 0,0',
|
||||
lineBottomRight: 'M 0,0 0,0 0,0',
|
||||
lineBottomLeftTwo: 'M 0,0 0,0 0,0',
|
||||
lineBottomRightTwo: 'M 0,0 0,0 0,0'
|
||||
},
|
||||
|
||||
partList: [
|
||||
{ soc: 0, soh: 0, activePowerPCS: 0.0, reactivePowerPCS: 0.0 },
|
||||
{ soc: 0, soh: 0, activePowerPCS: 0.0, reactivePowerPCS: 0.0 },
|
||||
{ soc: 0, soh: 0, activePowerPCS: 0.0, reactivePowerPCS: 0.0 },
|
||||
{ soc: 0, soh: 0, activePowerPCS: 0.0, reactivePowerPCS: 0.0 }
|
||||
],
|
||||
loading: false,
|
||||
activePowerTotal: {},
|
||||
show_point_dispostion: false,
|
||||
pageLocation: '',
|
||||
permissionId: null,
|
||||
pcs1Data: [],
|
||||
pcs2Data: [],
|
||||
pcs3Data: [],
|
||||
pcs4Data: [],
|
||||
ammeterData: [],
|
||||
fuzaiData: [],
|
||||
configData: {}
|
||||
}
|
||||
},
|
||||
computed: {},
|
||||
watch: {},
|
||||
created() {
|
||||
const result = changeTheme()
|
||||
this.configData = config[result]
|
||||
setTimeout(() => {
|
||||
if (this.$store.getters.menuList.length) {
|
||||
this.permissionId = this.$store.getters.menuList.find(item => {
|
||||
return item.url === this.$route.path
|
||||
}).id
|
||||
}
|
||||
}, 300)
|
||||
},
|
||||
mounted() {},
|
||||
methods: {
|
||||
workStatus(val, index) {
|
||||
// console.log(val, index)
|
||||
if (this.partList[index].flowDirection === 1) {
|
||||
if (+val > +1) {
|
||||
return this.$t('dashboard.charging')
|
||||
}
|
||||
if (+val < -1) {
|
||||
return this.$t('dashboard.disCharging')
|
||||
}
|
||||
if (val < 1 || +val.abs < 1 || !val) {
|
||||
return this.$t('dashboard.standing')
|
||||
}
|
||||
} else {
|
||||
if (+val > +1) {
|
||||
return this.$t('dashboard.disCharging')
|
||||
}
|
||||
if (+val < -1) {
|
||||
return this.$t('dashboard.charging')
|
||||
}
|
||||
if (val < 1 || +val.abs < 1 || !val) {
|
||||
return this.$t('dashboard.standing')
|
||||
}
|
||||
}
|
||||
},
|
||||
getData() {
|
||||
this.getpcs1Data()
|
||||
this.getpcs2Data()
|
||||
this.getpcs3Data()
|
||||
this.getpcs4Data()
|
||||
this.getammeter()
|
||||
this.getFuzai()
|
||||
this.getLineStatus('line-bottom-1')
|
||||
this.getLineStatus('line-bottom-2')
|
||||
this.getLineStatus('line-center')
|
||||
this.getLineStatus('line-bottom-3')
|
||||
this.getLineStatus('line-bottom-4')
|
||||
this.getLineStatus('line-top-left')
|
||||
this.getLineStatus('line-top-right')
|
||||
},
|
||||
|
||||
countChineseAndEnglishCharacters(str, x) {
|
||||
var chineseCount = str.match(/[\u4e00-\u9fa5]/g) ? str.match(/[\u4e00-\u9fa5]/g).length : 0
|
||||
var englishCount = str.match(/[a-zA-Z]/g) ? str.match(/[a-zA-Z]/g).length : 0
|
||||
var otherCount = str.length - chineseCount - englishCount
|
||||
const obj = { otherCount: otherCount, chineseCount: chineseCount, englishCount: englishCount }
|
||||
return (obj.englishCount * 11) + (obj.chineseCount * 16) + (obj.otherCount * 8) + x
|
||||
},
|
||||
lookDeviceDetail(val) { // 查看设备详情
|
||||
this.pageLocation = val
|
||||
this.show_point_dispostion = true
|
||||
},
|
||||
closePoint() {
|
||||
this.show_point_dispostion = false
|
||||
},
|
||||
async getFuzai() {
|
||||
this.loading = true
|
||||
try {
|
||||
const res = await DynamicConfigPoint({
|
||||
pageLocation: 'fourth-fuzai-1',
|
||||
permissionId: this.permissionId,
|
||||
stationId: this.stationId })
|
||||
this.fuzaiData = res.data
|
||||
} catch (error) {
|
||||
// console.log(error);
|
||||
} finally {
|
||||
this.loading = false
|
||||
}
|
||||
},
|
||||
async getpcs1Data() {
|
||||
this.loading = true
|
||||
try {
|
||||
const res = await DynamicConfigPoint({
|
||||
pageLocation: 'fourth-pcs-1',
|
||||
permissionId: this.permissionId,
|
||||
stationId: this.stationId })
|
||||
this.pcs1Data = res.data
|
||||
} catch (error) {
|
||||
// console.log(error);
|
||||
} finally {
|
||||
this.loading = false
|
||||
}
|
||||
},
|
||||
async getpcs2Data() {
|
||||
this.loading = true
|
||||
try {
|
||||
const res = await DynamicConfigPoint({
|
||||
pageLocation: 'fourth-pcs-2',
|
||||
permissionId: this.permissionId,
|
||||
stationId: this.stationId })
|
||||
this.pcs2Data = res.data
|
||||
} catch (error) {
|
||||
// console.log(error);
|
||||
} finally {
|
||||
this.loading = false
|
||||
}
|
||||
},
|
||||
async getpcs3Data() {
|
||||
this.loading = true
|
||||
try {
|
||||
const res = await DynamicConfigPoint({
|
||||
pageLocation: 'fourth-pcs-3',
|
||||
permissionId: this.permissionId,
|
||||
stationId: this.stationId })
|
||||
this.pcs3Data = res.data
|
||||
} catch (error) {
|
||||
// console.log(error);
|
||||
} finally {
|
||||
this.loading = false
|
||||
}
|
||||
},
|
||||
async getpcs4Data() {
|
||||
this.loading = true
|
||||
try {
|
||||
const res = await DynamicConfigPoint({
|
||||
pageLocation: 'fourth-pcs-4',
|
||||
permissionId: this.permissionId,
|
||||
stationId: this.stationId })
|
||||
this.pcs4Data = res.data
|
||||
} catch (error) {
|
||||
// console.log(error);
|
||||
} finally {
|
||||
this.loading = false
|
||||
}
|
||||
},
|
||||
async getammeter() {
|
||||
this.loading = true
|
||||
try {
|
||||
const res = await DynamicConfigPoint({
|
||||
pageLocation: 'fourth-ammeter-1',
|
||||
permissionId: this.permissionId,
|
||||
stationId: this.stationId })
|
||||
this.ammeterData = res.data
|
||||
} catch (error) {
|
||||
// console.log(error);
|
||||
} finally {
|
||||
this.loading = false
|
||||
}
|
||||
},
|
||||
async getLineStatus(type) {
|
||||
this.loading = true
|
||||
try {
|
||||
const res = await DynamicConfigPoint({
|
||||
pageLocation: type,
|
||||
permissionId: this.permissionId,
|
||||
stationId: this.stationId })
|
||||
|
||||
if (type === 'line-bottom-1') {
|
||||
if (res.data?.length) {
|
||||
if (res.data[0].value > 0) {
|
||||
this.dotData.lineBottomLeft = 'M 283,-280, 280, 0, 0 ,0'
|
||||
} else if (res.data[0].value < 0) {
|
||||
this.dotData.lineBottomLeft = 'M 0,0 281,0 281,-283'
|
||||
} else {
|
||||
this.dotData.lineBottomLeft = ''
|
||||
}
|
||||
} else {
|
||||
this.dotData.lineBottomLeft = ''
|
||||
}
|
||||
} else if (type === 'line-bottom-2') {
|
||||
if (res.data?.length) {
|
||||
if (res.data[0].value > 0) {
|
||||
this.dotData.lineBottomLeftTwo = 'M 85,-280, 85, 0, 0 ,0'
|
||||
} else if (res.data[0].value < 0) {
|
||||
this.dotData.lineBottomLeftTwo = 'M 0,0 85,0 85,-283'
|
||||
} else {
|
||||
this.dotData.lineBottomLeftTwo = ''
|
||||
}
|
||||
} else {
|
||||
this.dotData.lineBottomLeftTwo = ''
|
||||
}
|
||||
} else if (type === 'line-bottom-3') {
|
||||
if (res.data?.length) {
|
||||
if (res.data[0].value > 0) {
|
||||
this.dotData.lineBottomRight = 'M -271, -280 , -271 , 0 , 0 , 0'
|
||||
} else if (res.data[0].value < 0) {
|
||||
this.dotData.lineBottomRight = 'M 0,0 -271,0 -271,-283'
|
||||
} else {
|
||||
this.dotData.lineBottomRight = ''
|
||||
}
|
||||
} else {
|
||||
this.dotData.lineBottomRight = ''
|
||||
}
|
||||
} else if (type === 'line-bottom-4') {
|
||||
if (res.data?.length) {
|
||||
if (res.data[0].value > 0) {
|
||||
this.dotData.lineBottomRightTwo = 'M -85,-280,-85,0 0,0'
|
||||
} else if (res.data[0].value < 0) {
|
||||
this.dotData.lineBottomRightTwo = 'M 0,0 -85,0 -85,-283'
|
||||
} else {
|
||||
this.dotData.lineBottomRightTwo = ''
|
||||
}
|
||||
} else {
|
||||
this.dotData.lineBottomRightTwo = ''
|
||||
}
|
||||
} else if (type === 'line-center') {
|
||||
if (res.data?.length) {
|
||||
if (res.data[0].value > 0) {
|
||||
this.dotData.lineCenter = 'M 0,-283,0,0,0,0'
|
||||
} else if (res.data[0].value < 0) {
|
||||
this.dotData.lineCenter = 'M 0,0,0,0,0,-283'
|
||||
} else {
|
||||
this.dotData.lineCenter = ''
|
||||
}
|
||||
} else {
|
||||
this.dotData.lineCenter = ''
|
||||
}
|
||||
} else if (type === 'line-top-left') {
|
||||
if (res.data?.length) {
|
||||
if (res.data[0].value > 0) {
|
||||
this.dotData.lineTopLeft = 'M 238,0 0,0'
|
||||
} else if (res.data[0].value < 0) {
|
||||
this.dotData.lineTopLeft = 'M 0,0 238,0'
|
||||
} else {
|
||||
this.dotData.lineTopLeft = ''
|
||||
}
|
||||
} else {
|
||||
this.dotData.lineTopLeft = ''
|
||||
}
|
||||
} else if (type === 'line-top-right') {
|
||||
if (res.data?.length) {
|
||||
if (res.data[0].value > 0) {
|
||||
this.dotData.lineTopRight = 'M -230,0 0,0'
|
||||
} else if (res.data[0].value < 0) {
|
||||
this.dotData.lineTopRight = 'M 0,0 -230,0'
|
||||
} else {
|
||||
this.dotData.lineTopRight = ''
|
||||
}
|
||||
} else {
|
||||
this.dotData.lineTopRight = ''
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
// console.log(error);
|
||||
} finally {
|
||||
this.loading = false
|
||||
}
|
||||
},
|
||||
getDynamicPointData() {
|
||||
this.getData()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.center-box {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
@mixin move-round($duration, $delay) {
|
||||
fill: none;
|
||||
stroke-width: 5;
|
||||
stroke-linejoin: round;
|
||||
stroke-linecap: round;
|
||||
stroke-dasharray: 3, 900;
|
||||
stroke-dashoffset: 0;
|
||||
animation: lineMove $duration $delay cubic-bezier(0, 0, 0.74, 0.74) infinite;
|
||||
}
|
||||
|
||||
@keyframes lineMove {
|
||||
0% {
|
||||
stroke-dashoffset: -850;
|
||||
}
|
||||
100% {
|
||||
stroke-dashoffset: -0;
|
||||
}
|
||||
}
|
||||
.g-rect-fill-two {
|
||||
@include move-round(3.5s, 1s);
|
||||
}
|
||||
</style>
|
||||
648
src/views/dashboardtest/components/top-center/fourth.vue
Normal file
648
src/views/dashboardtest/components/top-center/fourth.vue
Normal file
@ -0,0 +1,648 @@
|
||||
<template>
|
||||
<ItemBox :title="$t('dashboard.stationTopo')" style="min-height: 560px;">
|
||||
<div ref="svgLine" class="center-box">
|
||||
<div v-loading="loading">
|
||||
<svg
|
||||
version="1.1"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||
xml:space="preserve"
|
||||
class="circle-load-rect-svg"
|
||||
viewBox="0 0 800 500"
|
||||
>
|
||||
<defs>
|
||||
<defs>
|
||||
<radialGradient id="RadialGradient1">
|
||||
<stop offset="0%" stop-color="#fff" />
|
||||
<stop offset="30%" stop-color="#0171c1" />
|
||||
<stop offset="50%" stop-color="#035088" />
|
||||
<stop offset="100%" stop-color="#02395a" />
|
||||
</radialGradient>
|
||||
</defs>
|
||||
<marker
|
||||
id="markerCircle"
|
||||
markerWidth="15"
|
||||
markerHeight="15"
|
||||
refX="5"
|
||||
refY="5"
|
||||
>
|
||||
<circle
|
||||
cx="5"
|
||||
cy="5"
|
||||
r="5"
|
||||
style="stroke: none; fill: url(#RadialGradient1)"
|
||||
/>
|
||||
</marker>
|
||||
|
||||
<marker
|
||||
id="markerArrow"
|
||||
markerWidth="13"
|
||||
markerHeight="13"
|
||||
refX="2"
|
||||
refY="6"
|
||||
orient="auto"
|
||||
>
|
||||
<path d="M2,2 L2,11 L10,6 L2,2" style="fill: black" />
|
||||
</marker>
|
||||
</defs>
|
||||
<!-- //线条 -->
|
||||
<!-- top -->
|
||||
<polyline
|
||||
points="154,80 600,80"
|
||||
fill="none"
|
||||
class="g-rect-path"
|
||||
stroke="#0094FF"
|
||||
stroke-dasharray="3 3"
|
||||
/>
|
||||
<!-- center -->
|
||||
<polyline
|
||||
points="385,80 385,363"
|
||||
fill="none"
|
||||
class="g-rect-path"
|
||||
stroke="#0094FF"
|
||||
stroke-dasharray="3 3"
|
||||
/>
|
||||
|
||||
<polyline
|
||||
points="385,160 460,160"
|
||||
fill="none"
|
||||
class="g-rect-path"
|
||||
stroke="#0094FF"
|
||||
stroke-dasharray="3 3"
|
||||
/>
|
||||
|
||||
<!-- bottom -->
|
||||
<polyline
|
||||
points="104,363 655,363"
|
||||
fill="none"
|
||||
class="g-rect-path"
|
||||
stroke="#0094FF"
|
||||
stroke-dasharray="3 3"
|
||||
/>
|
||||
|
||||
<!-- top -->
|
||||
<circle
|
||||
cx="154"
|
||||
cy="80"
|
||||
r="8"
|
||||
style="stroke: none; fill: url(#RadialGradient1)"
|
||||
/>
|
||||
<circle
|
||||
cx="600"
|
||||
cy="80"
|
||||
r="8"
|
||||
style="stroke: none; fill: url(#RadialGradient1)"
|
||||
/>
|
||||
|
||||
<!-- 动点 -->
|
||||
<circle
|
||||
cx="154"
|
||||
cy="80"
|
||||
r="8"
|
||||
style="stroke: none; fill: url(#RadialGradient1)"
|
||||
>
|
||||
<animateMotion
|
||||
repeatCount="indefinite"
|
||||
dur="4s"
|
||||
begin="0s"
|
||||
:path="dotData.lineTop"
|
||||
/>
|
||||
</circle>
|
||||
|
||||
<circle
|
||||
cx="460"
|
||||
cy="160"
|
||||
r="8"
|
||||
style="stroke: none; fill: url(#RadialGradient1)"
|
||||
>
|
||||
<!-- <animateMotion
|
||||
repeatCount="indefinite"
|
||||
dur="4s"
|
||||
begin="0s"
|
||||
:path="dotData.lineTop"
|
||||
/> -->
|
||||
</circle>
|
||||
|
||||
<!-- bottom -->
|
||||
<circle
|
||||
cx="104"
|
||||
cy="363"
|
||||
r="8"
|
||||
style="stroke: none; fill: url(#RadialGradient1)"
|
||||
/>
|
||||
<circle
|
||||
cx="385"
|
||||
cy="363"
|
||||
r="8"
|
||||
style="stroke: none; fill: url(#RadialGradient1)"
|
||||
/>
|
||||
<circle
|
||||
cx="655"
|
||||
cy="363"
|
||||
r="8"
|
||||
style="stroke: none; fill: url(#RadialGradient1)"
|
||||
/>
|
||||
|
||||
<circle
|
||||
cx="300"
|
||||
cy="363"
|
||||
r="8"
|
||||
style="stroke: none; fill: url(#RadialGradient1)"
|
||||
/>
|
||||
|
||||
<circle
|
||||
cx="470"
|
||||
cy="363"
|
||||
r="8"
|
||||
style="stroke: none; fill: url(#RadialGradient1)"
|
||||
/>
|
||||
|
||||
<circle
|
||||
cx="104"
|
||||
cy="363"
|
||||
r="8"
|
||||
style="stroke: none; fill: url(#RadialGradient1)"
|
||||
>
|
||||
<animateMotion
|
||||
repeatCount="indefinite"
|
||||
dur="4s"
|
||||
begin="2s"
|
||||
:path="dotData.lineBottomLeft"
|
||||
/>
|
||||
</circle>
|
||||
|
||||
<circle
|
||||
cx="655"
|
||||
cy="363"
|
||||
r="8"
|
||||
style="stroke: none; fill: url(#RadialGradient1)"
|
||||
>
|
||||
<animateMotion
|
||||
repeatCount="indefinite"
|
||||
dur="4s"
|
||||
begin="2s"
|
||||
:path="dotData.lineBottomRight"
|
||||
/>
|
||||
</circle>
|
||||
|
||||
<circle
|
||||
cx="300"
|
||||
cy="363"
|
||||
r="8"
|
||||
style="stroke: none; fill: url(#RadialGradient1)"
|
||||
>
|
||||
<animateMotion
|
||||
repeatCount="indefinite"
|
||||
dur="4s"
|
||||
begin="2s"
|
||||
:path="dotData.lineBottomLeftTwo"
|
||||
/>
|
||||
</circle>
|
||||
|
||||
<circle
|
||||
cx="470"
|
||||
cy="363"
|
||||
r="8"
|
||||
style="stroke: none; fill: url(#RadialGradient1)"
|
||||
>
|
||||
<animateMotion
|
||||
repeatCount="indefinite"
|
||||
dur="4s"
|
||||
begin="2s"
|
||||
:path="dotData.lineBottomRightTwo"
|
||||
/>
|
||||
</circle>
|
||||
<!-- 图片和文字 -->
|
||||
|
||||
<!-- 市电 -->
|
||||
<image
|
||||
:xlink:href="gridImg"
|
||||
x="70"
|
||||
y="30"
|
||||
width="90"
|
||||
height="117"
|
||||
/>
|
||||
<text x="90" y="160" fill="#ffffff" font-size="14"> {{ $t("dashboard.grid") }}</text>
|
||||
|
||||
<!-- {{ $t("dashboard.load") }} -->
|
||||
<image
|
||||
:xlink:href="configData.house"
|
||||
x="610"
|
||||
y="30"
|
||||
width="90"
|
||||
height="117"
|
||||
/>
|
||||
<text x="645" y="160" fill="#ffffff" font-size="14"> {{ $t("dashboard.load") }}</text>
|
||||
|
||||
<!-- 1#PCS -->
|
||||
<image
|
||||
:xlink:href="configData.pcs2"
|
||||
x="65"
|
||||
y="383"
|
||||
width="90"
|
||||
height="90"
|
||||
/>
|
||||
|
||||
<text x="86" y="490" fill="#ffffff" font-size="14">
|
||||
{{ hiddenTextWord(`1#${$t("dashboard.cabinet")}`,10) }}
|
||||
</text>
|
||||
<!-- 2#PCS -->
|
||||
<image
|
||||
:xlink:href="configData.pcs2"
|
||||
x="255"
|
||||
y="383"
|
||||
width="90"
|
||||
height="90"
|
||||
/>
|
||||
<text x="270" y="490" fill="#ffffff" font-size="14">
|
||||
{{ hiddenTextWord(`2#${$t("dashboard.cabinet")}`,10) }}
|
||||
</text>
|
||||
|
||||
<!-- 3#PCS -->
|
||||
<image
|
||||
:xlink:href="configData.pcs2"
|
||||
x="414"
|
||||
y="383"
|
||||
width="90"
|
||||
height="90"
|
||||
/>
|
||||
<text x="434" y="490" fill="#ffffff" font-size="14">
|
||||
{{ hiddenTextWord(`3#${$t("dashboard.cabinet")}`,10) }}
|
||||
</text>
|
||||
|
||||
<image
|
||||
:xlink:href="configData.pcs2"
|
||||
x="594"
|
||||
y="383"
|
||||
width="90"
|
||||
height="90"
|
||||
/>
|
||||
<text x="614" y="490" fill="#ffffff" font-size="14">
|
||||
{{ hiddenTextWord(`4#${$t("dashboard.cabinet")}`,10) }}
|
||||
</text>
|
||||
|
||||
<!-- 变压器 -->
|
||||
<image
|
||||
:xlink:href="configData.gui"
|
||||
x="320"
|
||||
y="193"
|
||||
width="140"
|
||||
height="105"
|
||||
/>
|
||||
|
||||
<!-- {{ $t("dashboard.ammeter") }} -->
|
||||
<image
|
||||
:xlink:href="ammeterImg"
|
||||
x="455"
|
||||
y="130"
|
||||
width="100"
|
||||
height="60"
|
||||
/>
|
||||
<!-- 瞬时总有功 -->
|
||||
<text x="435" y="220" fill="#ffffff" font-size="14">
|
||||
{{ $t("dashboard.totalP") }}(kW)：
|
||||
</text>
|
||||
<text x="545" y="220" fill="#ffb800" font-size="14">
|
||||
{{ activePowerTotal.activePower }}
|
||||
</text>
|
||||
|
||||
<!-- 左侧 -->
|
||||
<!-- 1#PCS -->
|
||||
<text x="85" y="280" fill="#ffffff" font-size="14">SOC(%)：</text>
|
||||
<text x="155" y="280" fill="#ffb800" font-size="14">
|
||||
{{ partList.length > 0 ? partList[0].soc : 0 }}
|
||||
</text>
|
||||
<text x="85" y="300" fill="#ffffff" font-size="14">SOH(%)：</text>
|
||||
<text x="155" y="300" fill="#ffb800" font-size="14">
|
||||
{{ partList.length > 0 ? partList[0].soh : 0 }}
|
||||
</text>
|
||||
|
||||
<text x="85" y="320" fill="#ffffff" font-size="14">
|
||||
{{ $t("dashboard.workStatus") }}：
|
||||
</text>
|
||||
<text x="170" y="320" fill="#ffb800" font-size="14">
|
||||
{{ partList.length > 0 ? workStatus(partList[0].activePowerPCS,0) : $t('dashboard.standing') }}
|
||||
</text>
|
||||
<text x="85" y="340" fill="#ffffff" font-size="14">
|
||||
{{ $t("dashboard.activePower") }}({{
|
||||
partList.length > 0
|
||||
? partList[0].activePowerPCS
|
||||
: 0 | kwUnitFormat
|
||||
}})：
|
||||
</text>
|
||||
<text x="185" y="340" fill="#ffb800" font-size="14">
|
||||
{{
|
||||
partList.length > 0
|
||||
? partList[0].activePowerPCS
|
||||
: 0 | kWFormat(2)
|
||||
}}
|
||||
</text>
|
||||
<!-- 中间 2PCS -->
|
||||
|
||||
<text x="250" y="280" fill="#ffffff" font-size="14">
|
||||
SOC(%)：
|
||||
</text>
|
||||
<text x="322" y="280" fill="#ffb800" font-size="14">
|
||||
{{ partList.length > 1 ? partList[1].soc : 0 }}
|
||||
</text>
|
||||
<text x="250" y="300" fill="#ffffff" font-size="14">
|
||||
SOH(%)：
|
||||
</text>
|
||||
<text x="322" y="300" fill="#ffb800" font-size="14">
|
||||
{{ partList.length > 1 ? partList[1].soh : 0 }}
|
||||
</text>
|
||||
<text x="250" y="320" fill="#ffffff" font-size="14">
|
||||
{{ $t("dashboard.workStatus") }}：
|
||||
</text>
|
||||
<text x="334" y="320" fill="#ffb800" font-size="14">
|
||||
{{ partList.length > 1 ? workStatus(partList[1].activePowerPCS,1) : $t('dashboard.standing') }}
|
||||
</text>
|
||||
<text x="250" y="340" fill="#ffffff" font-size="14">
|
||||
{{ $t("dashboard.activePower") }}({{
|
||||
partList.length > 1
|
||||
? partList[1].activePowerPCS
|
||||
: 0 | kwUnitFormat
|
||||
}})：
|
||||
</text>
|
||||
<text x="350" y="340" fill="#ffb800" font-size="14">
|
||||
{{
|
||||
partList.length > 1
|
||||
? partList[1].activePowerPCS
|
||||
: 0 | kWFormat(2)
|
||||
}}
|
||||
</text>
|
||||
|
||||
<!-- 中间 3PCS -->
|
||||
|
||||
<text x="420" y="280" fill="#ffffff" font-size="14">
|
||||
SOC(%)：
|
||||
</text>
|
||||
<text x="492" y="280" fill="#ffb800" font-size="14">
|
||||
{{ partList.length > 2 ? partList[2].soc : 0 }}
|
||||
</text>
|
||||
<text x="420" y="300" fill="#ffffff" font-size="14">
|
||||
SOH(%)：
|
||||
</text>
|
||||
<text x="492" y="300" fill="#ffb800" font-size="14">
|
||||
{{ partList.length > 2 ? partList[2].soh : 0 }}
|
||||
</text>
|
||||
<text x="420" y="320" fill="#ffffff" font-size="14">
|
||||
{{ $t("dashboard.workStatus") }}：
|
||||
</text>
|
||||
<text x="505" y="320" fill="#ffb800" font-size="14">
|
||||
{{ partList.length > 2 ? workStatus(partList[2].activePowerPCS,2) : $t('dashboard.standing') }}
|
||||
</text>
|
||||
<text x="420" y="340" fill="#ffffff" font-size="14">
|
||||
{{ $t("dashboard.activePower") }}({{
|
||||
partList.length > 2
|
||||
? partList[2].activePowerPCS
|
||||
: 0 | kwUnitFormat
|
||||
}})：
|
||||
</text>
|
||||
<text x="520" y="340" fill="#ffb800" font-size="14">
|
||||
{{
|
||||
partList.length > 0
|
||||
? partList[2].activePowerPCS
|
||||
: 0 | kWFormat(2)
|
||||
}}
|
||||
</text>
|
||||
|
||||
<!-- 右侧 -->
|
||||
|
||||
<text x="602" y="280" fill="#ffffff" font-size="14">
|
||||
SOC(%)：
|
||||
</text>
|
||||
<text x="672" y="280" fill="#ffb800" font-size="14">
|
||||
{{ partList.length > 3 ? partList[3].soc : 0 }}
|
||||
</text>
|
||||
<text x="602" y="300" fill="#ffffff" font-size="14">
|
||||
SOH(%)：
|
||||
</text>
|
||||
<text x="672" y="300" fill="#ffb800" font-size="14">
|
||||
{{ partList.length > 3 ? partList[3].soh : 0 }}
|
||||
</text>
|
||||
<text x="602" y="320" fill="#ffffff" font-size="14">
|
||||
{{ $t("dashboard.workStatus") }}：
|
||||
</text>
|
||||
<text x="685" y="320" fill="#ffb800" font-size="14">
|
||||
{{ partList.length > 3 ? workStatus(partList[3].activePowerPCS,3) : $t('dashboard.standing') }}
|
||||
</text>
|
||||
<text x="602" y="340" fill="#ffffff" font-size="14">
|
||||
{{ $t("dashboard.activePower") }}({{
|
||||
partList.length > 3
|
||||
? partList[3].activePowerPCS
|
||||
: 0 | kwUnitFormat
|
||||
}})：
|
||||
</text>
|
||||
<text x="702" y="340" fill="#ffb800" font-size="14">
|
||||
{{
|
||||
partList.length > 3
|
||||
? partList[3].activePowerPCS
|
||||
: 0 | kWFormat(2)
|
||||
}}
|
||||
</text>
|
||||
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</ItemBox>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import gridImg from '@/assets/images/wxjd/grid.png'
|
||||
import ammeterImg from '@/assets/images/wxjd/ammeter.png'
|
||||
import cabinetImg from '@/assets/images/wxjd/pcs-energy.png'
|
||||
import chargingPileImg from '@/assets/images/home-office.png'
|
||||
import distributionCabinetImg from '@/assets/images/wxjd/guiImg.png'
|
||||
import frameImg from '@/assets/images/wxjd/frame.png'
|
||||
import cangImg from '@/assets/images/home-cang.png'
|
||||
import { hiddenTextWord } from '@/utils/index'
|
||||
|
||||
import {
|
||||
GetOpenStationMiddle,
|
||||
GetOpenStationMiddlePart,
|
||||
GetTotalPower
|
||||
} from '@/api/home-page/index'
|
||||
import config from './config'
|
||||
import { changeTheme } from '@/utils/index'
|
||||
export default {
|
||||
name: 'Index',
|
||||
props: {
|
||||
stationType: {
|
||||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
stationId: {
|
||||
type: Number,
|
||||
default: 0
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
hiddenTextWord,
|
||||
gridImg,
|
||||
ammeterImg,
|
||||
cabinetImg,
|
||||
chargingPileImg,
|
||||
distributionCabinetImg,
|
||||
cangImg,
|
||||
frameImg,
|
||||
dotData: {
|
||||
lineTop: 'M 0,0 0,0',
|
||||
lineBottomLeft: 'M 0,0 0,0 0,0',
|
||||
lineBottomRight: 'M 0,0 0,0 0,0',
|
||||
lineBottomLeftTwo: 'M 0,0 0,0 0,0',
|
||||
lineBottomRightTwo: 'M 0,0 0,0 0,0'
|
||||
},
|
||||
|
||||
partList: [
|
||||
{ soc: 0, soh: 0, activePowerPCS: 0.0, reactivePowerPCS: 0.0 },
|
||||
{ soc: 0, soh: 0, activePowerPCS: 0.0, reactivePowerPCS: 0.0 },
|
||||
{ soc: 0, soh: 0, activePowerPCS: 0.0, reactivePowerPCS: 0.0 },
|
||||
{ soc: 0, soh: 0, activePowerPCS: 0.0, reactivePowerPCS: 0.0 }
|
||||
],
|
||||
loading: false,
|
||||
activePowerTotal: {},
|
||||
configData: {}
|
||||
}
|
||||
},
|
||||
computed: {},
|
||||
watch: {},
|
||||
created() {
|
||||
const result = changeTheme()
|
||||
this.configData = config[result]
|
||||
},
|
||||
mounted() {},
|
||||
methods: {
|
||||
workStatus(val, index) {
|
||||
// console.log(val, index)
|
||||
if (this.partList[index].flowDirection === 1) {
|
||||
if (+val > +1) {
|
||||
return this.$t('dashboard.charging')
|
||||
}
|
||||
if (+val < -1) {
|
||||
return this.$t('dashboard.disCharging')
|
||||
}
|
||||
if (val < 1 || +val.abs < 1 || !val) {
|
||||
return this.$t('dashboard.standing')
|
||||
}
|
||||
} else {
|
||||
if (+val > +1) {
|
||||
return this.$t('dashboard.disCharging')
|
||||
}
|
||||
if (+val < -1) {
|
||||
return this.$t('dashboard.charging')
|
||||
}
|
||||
if (val < 1 || +val.abs < 1 || !val) {
|
||||
return this.$t('dashboard.standing')
|
||||
}
|
||||
}
|
||||
},
|
||||
getData() {
|
||||
this.GetMiddleActive()
|
||||
this.GetOpenStationMiddle()
|
||||
this.GetOpenStationMiddlePart()
|
||||
},
|
||||
async GetMiddleActive() {
|
||||
this.loading = true
|
||||
try {
|
||||
const params = {
|
||||
stationId: this.stationId
|
||||
}
|
||||
const res = await GetTotalPower(params)
|
||||
this.activePowerTotal = res.data
|
||||
} catch (error) {
|
||||
// console.log(error);
|
||||
} finally {
|
||||
this.loading = false
|
||||
}
|
||||
},
|
||||
async GetOpenStationMiddlePart() {
|
||||
this.loading = true
|
||||
try {
|
||||
const params = {
|
||||
stationId: this.stationId
|
||||
}
|
||||
const res = await GetOpenStationMiddlePart(params)
|
||||
|
||||
this.partList = res?.data
|
||||
// this.dotData.lineTop = 'M 0,0 412,0'
|
||||
// if (this.partList[0].flowDirection) {
|
||||
// if (this.partList[0].activePowerPCS > +0.1) {
|
||||
// this.dotData.lineBottomLeft = 'M 283,-280, 280, 0, 0 ,0'
|
||||
// } else if (this.partList[0].activePowerPCS < 0) {
|
||||
// this.dotData.lineBottomLeft = 'M 0,0 281,0 281,-283'
|
||||
// }
|
||||
// }
|
||||
// if (this.partList[1].flowDirection) {
|
||||
// if (this.partList[1].activePowerPCS > +0.1) {
|
||||
// this.dotData.lineBottomLeftTwo = 'M 85,-280, 85, 0, 0 ,0'
|
||||
// } else if (this.partList[1].activePowerPCS < 0) {
|
||||
// this.dotData.lineBottomLeftTwo = 'M 0,0 85,0 85,-283'
|
||||
// }
|
||||
// }
|
||||
// if (this.partList[2].flowDirection) {
|
||||
// if (this.partList[2].activePowerPCS > +0.1) {
|
||||
// this.dotData.lineBottomRight = 'M -271, -280 , -271 , 0 , 0 , 0'
|
||||
// } else if (this.partList[2].activePowerPCS < 0) {
|
||||
// this.dotData.lineBottomRight = 'M 0,0 -271,0 -271,-283'
|
||||
// }
|
||||
// }
|
||||
// if (this.partList[3].flowDirection) {
|
||||
// if (this.partList[3].activePowerPCS > +0.1) {
|
||||
// this.dotData.lineBottomRightTwo = 'M -85,-280,-85,0 0,0'
|
||||
// } else if (this.partList[3].activePowerPCS < 0) {
|
||||
// this.dotData.lineBottomRightTwo = ' M 0,0 -85,0 -85,-283'
|
||||
// }
|
||||
// }
|
||||
// 根据activePowerPCS判断
|
||||
} catch (error) {
|
||||
// console.log(error);
|
||||
} finally {
|
||||
this.loading = false
|
||||
}
|
||||
},
|
||||
async GetOpenStationMiddle() {
|
||||
this.loading = true
|
||||
try {
|
||||
const params = {
|
||||
stationId: this.stationId
|
||||
}
|
||||
await GetOpenStationMiddle(params)
|
||||
} catch (error) {
|
||||
// console.log(error);
|
||||
} finally {
|
||||
this.loading = false
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.center-box {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
@mixin move-round($duration, $delay) {
|
||||
fill: none;
|
||||
stroke-width: 5;
|
||||
stroke-linejoin: round;
|
||||
stroke-linecap: round;
|
||||
stroke-dasharray: 3, 900;
|
||||
stroke-dashoffset: 0;
|
||||
animation: lineMove $duration $delay cubic-bezier(0, 0, 0.74, 0.74) infinite;
|
||||
}
|
||||
|
||||
@keyframes lineMove {
|
||||
0% {
|
||||
stroke-dashoffset: -850;
|
||||
}
|
||||
100% {
|
||||
stroke-dashoffset: -0;
|
||||
}
|
||||
}
|
||||
.g-rect-fill-two {
|
||||
@include move-round(3.5s, 1s);
|
||||
}
|
||||
</style>
|
||||
822
src/views/dashboardtest/components/top-center/ninth.vue
Normal file
822
src/views/dashboardtest/components/top-center/ninth.vue
Normal file
@ -0,0 +1,822 @@
|
||||
<template>
|
||||
<ItemBox :title="$t('dashboard.stationTopo')" style="min-height: 560px;">
|
||||
<div ref="svgLine" class="center-box">
|
||||
<div v-loading="loading">
|
||||
<svg
|
||||
version="1.1"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||
xml:space="preserve"
|
||||
class="circle-load-rect-svg"
|
||||
viewBox="0 0 800 530"
|
||||
>
|
||||
<defs>
|
||||
<defs>
|
||||
<radialGradient id="RadialGradient1">
|
||||
<stop offset="0%" stop-color="#fff" />
|
||||
<stop offset="30%" stop-color="#0171c1" />
|
||||
<stop offset="50%" stop-color="#035088" />
|
||||
<stop offset="100%" stop-color="#02395a" />
|
||||
</radialGradient>
|
||||
</defs>
|
||||
<marker
|
||||
id="markerCircle"
|
||||
markerWidth="15"
|
||||
markerHeight="15"
|
||||
refX="5"
|
||||
refY="5"
|
||||
>
|
||||
<circle
|
||||
cx="5"
|
||||
cy="5"
|
||||
r="5"
|
||||
style="stroke: none; fill: url(#RadialGradient1)"
|
||||
/>
|
||||
</marker>
|
||||
|
||||
<marker
|
||||
id="markerArrow"
|
||||
markerWidth="13"
|
||||
markerHeight="13"
|
||||
refX="2"
|
||||
refY="6"
|
||||
orient="auto"
|
||||
>
|
||||
<path d="M2,2 L2,11 L10,6 L2,2" style="fill: black" />
|
||||
</marker>
|
||||
</defs>
|
||||
<!-- //线条 -->
|
||||
<!-- top -->
|
||||
<polyline
|
||||
points="154,60 630,60"
|
||||
fill="none"
|
||||
class="g-rect-path"
|
||||
stroke="#0094FF"
|
||||
stroke-dasharray="3 3"
|
||||
/>
|
||||
<!-- center -->
|
||||
<polyline
|
||||
points="385,60 385,320"
|
||||
fill="none"
|
||||
class="g-rect-path"
|
||||
stroke="#0094FF"
|
||||
stroke-dasharray="3 3"
|
||||
/>
|
||||
|
||||
<polyline
|
||||
points="385,100 460,100"
|
||||
fill="none"
|
||||
class="g-rect-path"
|
||||
stroke="#0094FF"
|
||||
stroke-dasharray="3 3"
|
||||
/>
|
||||
|
||||
<!-- bottom -->
|
||||
<polyline
|
||||
points="124,320 745,320"
|
||||
fill="none"
|
||||
class="g-rect-path"
|
||||
stroke="#0094FF"
|
||||
stroke-dasharray="3 3"
|
||||
/>
|
||||
|
||||
<circle
|
||||
cx="154"
|
||||
cy="60"
|
||||
r="8"
|
||||
style="stroke: none; fill: url(#RadialGradient1)"
|
||||
>
|
||||
<animateMotion
|
||||
repeatCount="indefinite"
|
||||
dur="4s"
|
||||
begin="0s"
|
||||
:path="dotData.lineTopLeft"
|
||||
/>
|
||||
</circle>
|
||||
|
||||
<circle
|
||||
cx="630"
|
||||
cy="60"
|
||||
r="8"
|
||||
style="stroke: none; fill: url(#RadialGradient1)"
|
||||
>
|
||||
<animateMotion
|
||||
repeatCount="indefinite"
|
||||
dur="4s"
|
||||
begin="0s"
|
||||
:path="dotData.lineTopRight"
|
||||
/>
|
||||
</circle>
|
||||
|
||||
<circle
|
||||
cx="128"
|
||||
cy="320"
|
||||
r="8"
|
||||
style="stroke: none; fill: url(#RadialGradient1)"
|
||||
>
|
||||
<animateMotion
|
||||
repeatCount="indefinite"
|
||||
dur="4s"
|
||||
begin="0s"
|
||||
:path="dotData.lineBottomOne"
|
||||
/>
|
||||
</circle>
|
||||
|
||||
<circle
|
||||
cx="210"
|
||||
cy="320"
|
||||
r="8"
|
||||
style="stroke: none; fill: url(#RadialGradient1)"
|
||||
>
|
||||
<animateMotion
|
||||
repeatCount="indefinite"
|
||||
dur="4s"
|
||||
begin="0s"
|
||||
:path="dotData.lineBottomTwo"
|
||||
/>
|
||||
</circle>
|
||||
|
||||
<circle
|
||||
cx="290"
|
||||
cy="320"
|
||||
r="8"
|
||||
style="stroke: none; fill: url(#RadialGradient1)"
|
||||
>
|
||||
<animateMotion
|
||||
repeatCount="indefinite"
|
||||
dur="4s"
|
||||
begin="0s"
|
||||
:path="dotData.lineBottomThree"
|
||||
/>
|
||||
</circle>
|
||||
|
||||
<circle
|
||||
cx="365"
|
||||
cy="320"
|
||||
r="8"
|
||||
style="stroke: none; fill: url(#RadialGradient1)"
|
||||
>
|
||||
<animateMotion
|
||||
repeatCount="indefinite"
|
||||
dur="4s"
|
||||
begin="0s"
|
||||
:path="dotData.lineBottomFour"
|
||||
/>
|
||||
</circle>
|
||||
|
||||
<circle
|
||||
cx="425"
|
||||
cy="320"
|
||||
r="8"
|
||||
style="stroke: none; fill: url(#RadialGradient1)"
|
||||
>
|
||||
<animateMotion
|
||||
repeatCount="indefinite"
|
||||
dur="4s"
|
||||
begin="0s"
|
||||
:path="dotData.lineBottomFive"
|
||||
/>
|
||||
</circle>
|
||||
|
||||
<circle
|
||||
cx="505"
|
||||
cy="320"
|
||||
r="8"
|
||||
style="stroke: none; fill: url(#RadialGradient1)"
|
||||
>
|
||||
<animateMotion
|
||||
repeatCount="indefinite"
|
||||
dur="4s"
|
||||
begin="0s"
|
||||
:path="dotData.lineBottomSix"
|
||||
/>
|
||||
</circle>
|
||||
|
||||
<circle
|
||||
cx="585"
|
||||
cy="320"
|
||||
r="8"
|
||||
style="stroke: none; fill: url(#RadialGradient1)"
|
||||
>
|
||||
<animateMotion
|
||||
repeatCount="indefinite"
|
||||
dur="4s"
|
||||
begin="0s"
|
||||
:path="dotData.lineBottomSeven"
|
||||
/>
|
||||
</circle>
|
||||
|
||||
<circle
|
||||
cx="665"
|
||||
cy="320"
|
||||
r="8"
|
||||
style="stroke: none; fill: url(#RadialGradient1)"
|
||||
>
|
||||
<animateMotion
|
||||
repeatCount="indefinite"
|
||||
dur="4s"
|
||||
begin="0s"
|
||||
:path="dotData.lineBottomEight"
|
||||
/>
|
||||
</circle>
|
||||
|
||||
<circle
|
||||
cx="745"
|
||||
cy="320"
|
||||
r="8"
|
||||
style="stroke: none; fill: url(#RadialGradient1)"
|
||||
>
|
||||
<animateMotion
|
||||
repeatCount="indefinite"
|
||||
dur="4s"
|
||||
begin="0s"
|
||||
:path="dotData.lineBottomNight"
|
||||
/>
|
||||
</circle>
|
||||
|
||||
<!-- top -->
|
||||
<circle
|
||||
cx="154"
|
||||
cy="60"
|
||||
r="8"
|
||||
style="stroke: none; fill: url(#RadialGradient1);cursor: pointer;"
|
||||
@click="disposition('night-line-top-left')"
|
||||
/>
|
||||
<circle
|
||||
cx="630"
|
||||
cy="60"
|
||||
r="8"
|
||||
style="stroke: none; fill: url(#RadialGradient1);cursor: pointer;"
|
||||
@click="disposition('night-line-top-right')"
|
||||
/>
|
||||
|
||||
<circle
|
||||
cx="460"
|
||||
cy="100"
|
||||
r="8"
|
||||
style="stroke: none; fill: url(#RadialGradient1)"
|
||||
/>
|
||||
|
||||
<!-- bottom -->
|
||||
<circle
|
||||
cx="128"
|
||||
cy="320"
|
||||
r="8"
|
||||
style="stroke: none; fill: url(#RadialGradient1);cursor: pointer;"
|
||||
@click="disposition('night-line-bottom-one')"
|
||||
/>
|
||||
<circle
|
||||
cx="210"
|
||||
cy="320"
|
||||
r="8"
|
||||
style="stroke: none; fill: url(#RadialGradient1);cursor: pointer;"
|
||||
@click="disposition('night-line-bottom-two')"
|
||||
/>
|
||||
<circle
|
||||
cx="290"
|
||||
cy="320"
|
||||
r="8"
|
||||
style="stroke: none; fill: url(#RadialGradient1);cursor: pointer;"
|
||||
@click="disposition('night-line-bottom-three')"
|
||||
/>
|
||||
<circle
|
||||
cx="365"
|
||||
cy="320"
|
||||
r="8"
|
||||
style="stroke: none; fill: url(#RadialGradient1);cursor: pointer;"
|
||||
@click="disposition('night-line-bottom-four')"
|
||||
/>
|
||||
|
||||
<circle
|
||||
cx="425"
|
||||
cy="320"
|
||||
r="8"
|
||||
style="stroke: none; fill: url(#RadialGradient1);cursor: pointer;"
|
||||
@click="disposition('night-line-bottom-five')"
|
||||
/>
|
||||
|
||||
<circle
|
||||
cx="505"
|
||||
cy="320"
|
||||
r="8"
|
||||
style="stroke: none; fill: url(#RadialGradient1);cursor: pointer;"
|
||||
@click="disposition('night-line-bottom-six')"
|
||||
/>
|
||||
|
||||
<circle
|
||||
cx="585"
|
||||
cy="320"
|
||||
r="8"
|
||||
style="stroke: none; fill: url(#RadialGradient1);cursor: pointer;"
|
||||
@click="disposition('night-line-bottom-seven')"
|
||||
/>
|
||||
<circle
|
||||
cx="665"
|
||||
cy="320"
|
||||
r="8"
|
||||
style="stroke: none; fill: url(#RadialGradient1);cursor: pointer;"
|
||||
@click="disposition('night-line-bottom-eight')"
|
||||
/>
|
||||
<circle
|
||||
cx="745"
|
||||
cy="320"
|
||||
r="8"
|
||||
style="stroke: none; fill: url(#RadialGradient1);cursor: pointer;"
|
||||
@click="disposition('night-line-bottom-night')"
|
||||
/>
|
||||
|
||||
<!-- 图片和文字 -->
|
||||
|
||||
<!-- 市电 -->
|
||||
<image
|
||||
:xlink:href="gridImg"
|
||||
x="70"
|
||||
y="10"
|
||||
width="60"
|
||||
height="87"
|
||||
/>
|
||||
<text x="70" y="110" fill="#ffffff" font-size="14"> {{ $t("dashboard.grid") }}</text>
|
||||
|
||||
<!-- {{ $t("dashboard.load") }} -->
|
||||
<image
|
||||
:xlink:href="chargingPileImg"
|
||||
x="650"
|
||||
y="10"
|
||||
width="60"
|
||||
height="87"
|
||||
/>
|
||||
<text x="675" y="110" fill="#ffffff" font-size="14"> {{ $t("dashboard.load") }}</text>
|
||||
|
||||
<!-- 1#PCS -->
|
||||
<image
|
||||
:xlink:href="cabinetImg"
|
||||
x="100"
|
||||
y="330"
|
||||
width="50"
|
||||
height="50"
|
||||
style="cursor: pointer;"
|
||||
@click="disposition('ninth_pcs_1')"
|
||||
/>
|
||||
<text x="94" y="410" fill="#ffffff" font-size="14">{{ hiddenTextWord(`1#${$t("dashboard.cabinet")}`,8) }}</text>
|
||||
<!-- 2#PCS -->
|
||||
<image
|
||||
:xlink:href="cabinetImg"
|
||||
x="180"
|
||||
y="330"
|
||||
width="50"
|
||||
height="50"
|
||||
style="cursor: pointer;"
|
||||
@click="disposition('ninth_pcs_2')"
|
||||
/>
|
||||
<text x="173" y="410" fill="#ffffff" font-size="14">{{ hiddenTextWord(`2#${$t("dashboard.cabinet")}`,8) }}</text>
|
||||
|
||||
<!-- 3#PCS -->
|
||||
<image
|
||||
:xlink:href="cabinetImg"
|
||||
x="260"
|
||||
y="330"
|
||||
width="50"
|
||||
height="50"
|
||||
style="cursor: pointer;"
|
||||
@click="disposition('ninth_pcs_3')"
|
||||
/>
|
||||
<text x="255" y="410" fill="#ffffff" font-size="14">{{ hiddenTextWord(`3#${$t("dashboard.cabinet")}`,8) }}</text>
|
||||
|
||||
<!-- 4#PCS -->
|
||||
<image
|
||||
:xlink:href="cabinetImg"
|
||||
x="340"
|
||||
y="330"
|
||||
width="50"
|
||||
height="50"
|
||||
style="cursor: pointer;"
|
||||
@click="disposition('ninth_pcs_4')"
|
||||
/>
|
||||
<text x="335" y="410" fill="#ffffff" font-size="14">{{ hiddenTextWord(`4#${$t("dashboard.cabinet")}`,8) }}</text>
|
||||
|
||||
<!-- 5#PCS -->
|
||||
<image
|
||||
:xlink:href="cabinetImg"
|
||||
x="400"
|
||||
y="330"
|
||||
width="50"
|
||||
height="50"
|
||||
style="cursor: pointer;"
|
||||
@click="disposition('ninth_pcs_5')"
|
||||
/>
|
||||
<text x="400" y="410" fill="#ffffff" font-size="14">{{ hiddenTextWord(`5#${$t("dashboard.cabinet")}`,8) }}</text>
|
||||
|
||||
<!-- 6#PCS -->
|
||||
<image
|
||||
:xlink:href="cabinetImg"
|
||||
x="480"
|
||||
y="330"
|
||||
width="50"
|
||||
height="50"
|
||||
style="cursor: pointer;"
|
||||
@click="disposition('ninth_pcs_6')"
|
||||
/>
|
||||
<text x="475" y="410" fill="#ffffff" font-size="14">{{ hiddenTextWord(`6#${$t("dashboard.cabinet")}`,8) }}</text>
|
||||
|
||||
<image
|
||||
:xlink:href="cabinetImg"
|
||||
x="560"
|
||||
y="330"
|
||||
width="50"
|
||||
height="50"
|
||||
style="cursor: pointer;"
|
||||
@click="disposition('ninth_pcs_7')"
|
||||
/>
|
||||
<text x="555" y="410" fill="#ffffff" font-size="14">{{ hiddenTextWord(`7#${$t("dashboard.cabinet")}`,8) }}</text>
|
||||
|
||||
<image
|
||||
:xlink:href="cabinetImg"
|
||||
x="640"
|
||||
y="330"
|
||||
width="50"
|
||||
height="50"
|
||||
style="cursor: pointer;"
|
||||
@click="disposition('ninth_pcs_8')"
|
||||
/>
|
||||
<text x="630" y="410" fill="#ffffff" font-size="14">{{ hiddenTextWord(`8#${$t("dashboard.cabinet")}`,8) }}</text>
|
||||
|
||||
<image
|
||||
:xlink:href="cabinetImg"
|
||||
x="720"
|
||||
y="330"
|
||||
width="50"
|
||||
height="50"
|
||||
style="cursor: pointer;"
|
||||
@click="disposition('ninth_pcs_9')"
|
||||
/>
|
||||
<text x="720" y="410" fill="#ffffff" font-size="14">{{ hiddenTextWord(`9#${$t("dashboard.cabinet")}`,8) }}</text>
|
||||
|
||||
<!-- 变压器 -->
|
||||
<image
|
||||
:xlink:href="distributionCabinetImg"
|
||||
x="330"
|
||||
y="145"
|
||||
width="120"
|
||||
height="85"
|
||||
/>
|
||||
|
||||
<!-- {{ $t("dashboard.ammeter") }} -->
|
||||
<image
|
||||
:xlink:href="ammeterImg"
|
||||
x="455"
|
||||
y="80"
|
||||
width="80"
|
||||
height="40"
|
||||
style="cursor: pointer;"
|
||||
@click="disposition('ninth_ammeter_1')"
|
||||
/>
|
||||
<g v-for="(item,index) in ammeter_1" :key="item.id">
|
||||
<text x="435" :y="150 + ( 20 * index)" fill="#ffffff" font-size="14">
|
||||
{{ item.name }}
|
||||
</text>
|
||||
<text :x="countChineseAndEnglishCharacters(item.name,450)" :y="150 + ( 20 * index)" fill="#FFB800" font-size="14">
|
||||
{{ item.value }}
|
||||
</text>
|
||||
</g>
|
||||
|
||||
<!-- 左侧 -->
|
||||
<!-- 1#PCS -->
|
||||
<text x="10" y="440" fill="#ffffff" font-size="14">SOC(%)：</text>
|
||||
<text x="10" y="460" fill="#ffffff" font-size="14">SOH(%)：</text>
|
||||
<text x="10" y="480" fill="#ffffff" font-size="14">{{ $t("dashboard.workStatus") }}：</text>
|
||||
<text x="10" y="500" fill="#ffffff" font-size="14">{{ $t("dashboard.activePower") }}(kW)：</text>
|
||||
<!-- 1#PCS -->
|
||||
<text x="110" y="440" fill="#FFB800" font-size="14">{{ pcsData_1.length ? pcsData_1[0].value : '' }}</text>
|
||||
<text x="110" y="460" fill="#FFB800" font-size="14">{{ pcsData_1.length > 1 ? pcsData_1[1].value : '' }}</text>
|
||||
<text x="110" y="480" fill="#FFB800" font-size="14">{{ pcsData_1.length > 2 ? pcsData_1[2].value : '' }}</text>
|
||||
<text x="110" y="500" fill="#FFB800" font-size="14">{{ pcsData_1.length > 3 ? pcsData_1[3].value : '' }}</text>
|
||||
<!-- 2#PCS -->
|
||||
<text x="190" y="440" fill="#FFB800" font-size="14">{{ pcsData_2.length ? pcsData_2[0].value : '' }}</text>
|
||||
<text x="190" y="460" fill="#FFB800" font-size="14">{{ pcsData_2.length > 1 ? pcsData_2[1].value : '' }}</text>
|
||||
<text x="190" y="480" fill="#FFB800" font-size="14">{{ pcsData_2.length > 2 ? pcsData_2[2].value : '' }}</text>
|
||||
<text x="190" y="500" fill="#FFB800" font-size="14">{{ pcsData_2.length > 3 ? pcsData_2[3].value : '' }}</text>
|
||||
<!-- 3#PCS -->
|
||||
<text x="265" y="440" fill="#FFB800" font-size="14">{{ pcsData_3.length ? pcsData_3[0].value : '' }}</text>
|
||||
<text x="265" y="460" fill="#FFB800" font-size="14">{{ pcsData_3.length > 1 ? pcsData_3[1].value : '' }}</text>
|
||||
<text x="265" y="480" fill="#FFB800" font-size="14">{{ pcsData_3.length > 2 ? pcsData_3[2].value : '' }}</text>
|
||||
<text x="265" y="500" fill="#FFB800" font-size="14">{{ pcsData_3.length > 3 ? pcsData_3[3].value : '' }}</text>
|
||||
<!-- 4#PCS -->
|
||||
<text x="340" y="440" fill="#FFB800" font-size="14">{{ pcsData_4.length ? pcsData_4[0].value : '' }}</text>
|
||||
<text x="340" y="460" fill="#FFB800" font-size="14">{{ pcsData_4.length > 1 ? pcsData_4[1].value : '' }}</text>
|
||||
<text x="340" y="480" fill="#FFB800" font-size="14">{{ pcsData_4.length > 2 ? pcsData_4[2].value : '' }}</text>
|
||||
<text x="340" y="500" fill="#FFB800" font-size="14">{{ pcsData_4.length > 3 ? pcsData_4[3].value : '' }}</text>
|
||||
<!-- 5#PCS -->
|
||||
<text x="410" y="440" fill="#FFB800" font-size="14">{{ pcsData_5.length ? pcsData_5[0].value : '' }}</text>
|
||||
<text x="410" y="460" fill="#FFB800" font-size="14">{{ pcsData_5.length > 1 ? pcsData_5[1].value : '' }}</text>
|
||||
<text x="410" y="480" fill="#FFB800" font-size="14">{{ pcsData_5.length > 2 ? pcsData_5[2].value : '' }}</text>
|
||||
<text x="410" y="500" fill="#FFB800" font-size="14">{{ pcsData_5.length > 3 ? pcsData_5[3].value : '' }}</text>
|
||||
<!-- 6#PCS -->
|
||||
<text x="490" y="440" fill="#FFB800" font-size="14">{{ pcsData_6.length ? pcsData_6[0].value : '' }}</text>
|
||||
<text x="490" y="460" fill="#FFB800" font-size="14">{{ pcsData_6.length > 1 ? pcsData_6[1].value : '' }}</text>
|
||||
<text x="490" y="480" fill="#FFB800" font-size="14">{{ pcsData_6.length > 2 ? pcsData_6[2].value : '' }}</text>
|
||||
<text x="490" y="500" fill="#FFB800" font-size="14">{{ pcsData_6.length > 3 ? pcsData_6[3].value : '' }}</text>
|
||||
<!-- 7#PCS -->
|
||||
<text x="570" y="440" fill="#FFB800" font-size="14">{{ pcsData_7.length ? pcsData_7[0].value : '' }}</text>
|
||||
<text x="570" y="460" fill="#FFB800" font-size="14">{{ pcsData_7.length > 1 ? pcsData_7[1].value : '' }}</text>
|
||||
<text x="570" y="480" fill="#FFB800" font-size="14">{{ pcsData_7.length > 2 ? pcsData_7[2].value : '' }}</text>
|
||||
<text x="570" y="500" fill="#FFB800" font-size="14">{{ pcsData_7.length > 3 ? pcsData_7[3].value : '' }}</text>
|
||||
<!-- 8#PCS -->
|
||||
<text x="650" y="440" fill="#FFB800" font-size="14">{{ pcsData_8.length ? pcsData_8[0].value : '' }}</text>
|
||||
<text x="650" y="460" fill="#FFB800" font-size="14">{{ pcsData_8.length > 1 ? pcsData_8[1].value : '' }}</text>
|
||||
<text x="650" y="480" fill="#FFB800" font-size="14">{{ pcsData_8.length > 2 ? pcsData_8[2].value : '' }}</text>
|
||||
<text x="650" y="500" fill="#FFB800" font-size="14">{{ pcsData_8.length > 3 ? pcsData_8[3].value : '' }}</text>
|
||||
<!-- 9#PCS -->
|
||||
<text x="730" y="440" fill="#FFB800" font-size="14">{{ pcsData_9.length ? pcsData_9[0].value : '' }}</text>
|
||||
<text x="730" y="460" fill="#FFB800" font-size="14">{{ pcsData_9.length > 1 ? pcsData_9[1].value : '' }}</text>
|
||||
<text x="730" y="480" fill="#FFB800" font-size="14">{{ pcsData_9.length > 2 ? pcsData_9[2].value : '' }}</text>
|
||||
<text x="730" y="500" fill="#FFB800" font-size="14">{{ pcsData_9.length > 3 ? pcsData_9[3].value : '' }}</text>
|
||||
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<dispositionPointDialog :visible="show_point_dispostion" :page-location="pageLocation" @close="closePoint" @getData="getDynamicPointData" />
|
||||
|
||||
</ItemBox>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import gridImg from '@/assets/images/wxjd/grid.png'
|
||||
import ammeterImg from '@/assets/images/wxjd/ammeter.png'
|
||||
import cabinetImg from '@/assets/images/wxjd/pcs-energy.png'
|
||||
import chargingPileImg from '@/assets/images/home-office.png'
|
||||
import distributionCabinetImg from '@/assets/images/wxjd/guiImg.png'
|
||||
import frameImg from '@/assets/images/wxjd/frame.png'
|
||||
import cangImg from '@/assets/images/home-cang.png'
|
||||
import { DynamicConfigPoint } from '@/api/home-page/index'
|
||||
import { hiddenTextWord } from '@/utils/index'
|
||||
export default {
|
||||
name: 'Index',
|
||||
props: {
|
||||
stationType: {
|
||||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
stationId: {
|
||||
type: Number,
|
||||
default: 0
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
hiddenTextWord,
|
||||
gridImg,
|
||||
ammeterImg,
|
||||
cabinetImg,
|
||||
chargingPileImg,
|
||||
distributionCabinetImg,
|
||||
cangImg,
|
||||
frameImg,
|
||||
pcsData_1: [],
|
||||
pcsData_2: [],
|
||||
pcsData_3: [],
|
||||
pcsData_4: [],
|
||||
pcsData_5: [],
|
||||
pcsData_6: [],
|
||||
pcsData_7: [],
|
||||
pcsData_8: [],
|
||||
pcsData_9: [],
|
||||
ammeter_1: [],
|
||||
partList: [
|
||||
{ soc: 0, soh: 0, activePowerPCS: 0.0, reactivePowerPCS: 0.0 },
|
||||
{ soc: 0, soh: 0, activePowerPCS: 0.0, reactivePowerPCS: 0.0 },
|
||||
{ soc: 0, soh: 0, activePowerPCS: 0.0, reactivePowerPCS: 0.0 },
|
||||
{ soc: 0, soh: 0, activePowerPCS: 0.0, reactivePowerPCS: 0.0 },
|
||||
{ soc: 0, soh: 0, activePowerPCS: 0.0, reactivePowerPCS: 0.0 }
|
||||
],
|
||||
dotData: {
|
||||
lineTopLeft: 'M 0,0 0,0',
|
||||
lineTopRight: 'M 0,0 0,0',
|
||||
lineBottomOne: 'M 0,0 0,0',
|
||||
lineBottomTwo: 'M 0,0 0,0',
|
||||
lineBottomThree: 'M 0,0 0,0',
|
||||
lineBottomFour: 'M 0,0 0,0',
|
||||
lineBottomFive: 'M 0,0 0,0',
|
||||
lineBottomSix: 'M 0,0 0,0',
|
||||
lineBottomSeven: 'M 0,0 0,0',
|
||||
lineBottomEight: 'M 0,0 0,0',
|
||||
lineBottomNight: 'M 0,0 0,0'
|
||||
},
|
||||
loading: false,
|
||||
activePowerTotal: {},
|
||||
permissionId: null,
|
||||
show_point_dispostion: false,
|
||||
pageLocation: null
|
||||
}
|
||||
},
|
||||
computed: {},
|
||||
watch: {},
|
||||
created() {
|
||||
setTimeout(() => {
|
||||
if (this.$store.getters.menuList.length) {
|
||||
this.permissionId = this.$store.getters.menuList.find(item => {
|
||||
return item.url === this.$route.path
|
||||
}).id
|
||||
}
|
||||
}, 300)
|
||||
},
|
||||
mounted() {},
|
||||
methods: {
|
||||
disposition(val) {
|
||||
this.pageLocation = val
|
||||
this.show_point_dispostion = true
|
||||
},
|
||||
getDynamicPointData() {
|
||||
this.getData()
|
||||
},
|
||||
closePoint() {
|
||||
this.show_point_dispostion = false
|
||||
},
|
||||
|
||||
countChineseAndEnglishCharacters(str, x) {
|
||||
var chineseCount = str.match(/[\u4e00-\u9fa5]/g) ? str.match(/[\u4e00-\u9fa5]/g).length : 0
|
||||
var englishCount = str.match(/[a-zA-Z]/g) ? str.match(/[a-zA-Z]/g).length : 0
|
||||
var otherCount = str.length - chineseCount - englishCount
|
||||
const obj = { otherCount: otherCount, chineseCount: chineseCount, englishCount: englishCount }
|
||||
return (obj.englishCount * 8) + (obj.chineseCount * 16) + (obj.otherCount * 6) + x
|
||||
},
|
||||
async getData() {
|
||||
this.loading = true
|
||||
|
||||
try {
|
||||
const res = await DynamicConfigPoint({
|
||||
permissionId: this.permissionId,
|
||||
stationId: this.stationId })
|
||||
this.pcsData_1 = []
|
||||
this.pcsData_2 = []
|
||||
this.pcsData_3 = []
|
||||
this.pcsData_4 = []
|
||||
this.pcsData_5 = []
|
||||
this.pcsData_6 = []
|
||||
this.pcsData_7 = []
|
||||
this.pcsData_8 = []
|
||||
this.ammeter_1 = []
|
||||
this.dotData = {
|
||||
lineTopLeft: 'M 0,0 0,0',
|
||||
lineTopRight: 'M 0,0 0,0',
|
||||
lineCenter: 'M 0,0 0,0',
|
||||
lineBottomOne: 'M 0,0 0,0',
|
||||
lineBottomTwo: 'M 0,0 0,0',
|
||||
lineBottomThree: 'M 0,0 0,0',
|
||||
lineBottomFour: 'M 0,0 0,0',
|
||||
lineBottomFive: 'M 0,0 0,0',
|
||||
lineBottomSix: 'M 0,0 0,0',
|
||||
lineBottomSeven: 'M 0,0 0,0',
|
||||
lineBottomEight: 'M 0,0 0,0',
|
||||
lineBottomNight: 'M 0,0 0,0'
|
||||
}
|
||||
if (res.data.length) {
|
||||
res.data.forEach((item) => {
|
||||
if (item.pageLocation === 'ninth_pcs_1') {
|
||||
this.pcsData_1.push(item)
|
||||
} else if (item.pageLocation === 'ninth_pcs_2') {
|
||||
this.pcsData_2.push(item)
|
||||
} else if (item.pageLocation === 'ninth_pcs_3') {
|
||||
this.pcsData_3.push(item)
|
||||
} else if (item.pageLocation === 'ninth_pcs_4') {
|
||||
this.pcsData_4.push(item)
|
||||
} else if (item.pageLocation === 'ninth_pcs_5') {
|
||||
this.pcsData_5.push(item)
|
||||
} else if (item.pageLocation === 'ninth_pcs_6') {
|
||||
this.pcsData_6.push(item)
|
||||
} else if (item.pageLocation === 'ninth_pcs_7') {
|
||||
this.pcsData_7.push(item)
|
||||
} else if (item.pageLocation === 'ninth_pcs_8') {
|
||||
this.pcsData_8.push(item)
|
||||
} else if (item.pageLocation === 'ninth_pcs_9') {
|
||||
this.pcsData_9.push(item)
|
||||
} else if (item.pageLocation === 'ninth_ammeter_1') {
|
||||
this.ammeter_1.push(item)
|
||||
} else if (item.pageLocation === 'night-line-top-left') {
|
||||
if (+item.value > 0) {
|
||||
this.dotData.lineTopLeft = 'M 238,0 0,0'
|
||||
} else if (+item.value < 0) {
|
||||
this.dotData.lineTopLeft = 'M 0,0 238,0 '
|
||||
} else {
|
||||
this.dotData.lineTopLeft = 'M 0,0 0,0'
|
||||
}
|
||||
} else if (item.pageLocation === 'night-line-top-right') {
|
||||
if (+item.value > 0) {
|
||||
this.dotData.lineTopRight = 'M 0,0 -230,0'
|
||||
} else if (+item.value < 0) {
|
||||
this.dotData.lineTopRight = 'M -230,0 0,0 '
|
||||
} else {
|
||||
this.dotData.lineTopRight = 'M 0,0 0,0'
|
||||
}
|
||||
} else if (item.pageLocation === 'night-line-bottom-one') {
|
||||
if (+item.value > 0) {
|
||||
this.dotData.lineBottomOne = 'M 258,-260, 258, 0, 0 ,0'
|
||||
} else if (+item.value < 0) {
|
||||
this.dotData.lineBottomOne = 'M 0 ,0 258, 0, 258,-260'
|
||||
} else {
|
||||
this.dotData.lineBottomOne = 'M 0,0 0,0'
|
||||
}
|
||||
} else if (item.pageLocation === 'night-line-bottom-two') {
|
||||
if (+item.value > 0) {
|
||||
this.dotData.lineBottomTwo = 'M 176,-260, 176, 0, 0 ,0'
|
||||
} else if (+item.value < 0) {
|
||||
this.dotData.lineBottomTwo = 'M 0 ,0 176, 0, 176,-260'
|
||||
} else {
|
||||
this.dotData.lineBottomTwo = 'M 0,0 0,0'
|
||||
}
|
||||
} else if (item.pageLocation === 'night-line-bottom-three') {
|
||||
if (+item.value > 0) {
|
||||
this.dotData.lineBottomThree = 'M 96,-260, 96, 0, 0 ,0'
|
||||
} else if (+item.value < 0) {
|
||||
this.dotData.lineBottomThree = 'M 0 ,0, 96, 0,96,-260'
|
||||
} else {
|
||||
this.dotData.lineBottomThree = 'M 0,0 0,0'
|
||||
}
|
||||
} else if (item.pageLocation === 'night-line-bottom-four') {
|
||||
if (+item.value > 0) {
|
||||
this.dotData.lineBottomFour = 'M 21,-260, 21, 0, 0 ,0'
|
||||
} else if (+item.value < 0) {
|
||||
this.dotData.lineBottomFour = 'M 0 ,0 21, 0, 21,-260'
|
||||
} else {
|
||||
this.dotData.lineBottomFour = 'M 0,0 0,0'
|
||||
}
|
||||
} else if (item.pageLocation === 'night-line-bottom-five') {
|
||||
if (+item.value > 0) {
|
||||
this.dotData.lineBottomFive = 'M -39,-260,-39,0 0,0'
|
||||
} else if (+item.value < 0) {
|
||||
this.dotData.lineBottomFive = 'M 0,0 -39,0 -39,-260'
|
||||
} else {
|
||||
this.dotData.lineBottomFive = 'M 0,0 0,0'
|
||||
}
|
||||
} else if (item.pageLocation === 'night-line-bottom-six') {
|
||||
if (+item.value > 0) {
|
||||
this.dotData.lineBottomSix = 'M -119,-260,-119,0 0,0'
|
||||
} else if (+item.value < 0) {
|
||||
this.dotData.lineBottomSix = 'M 0,0 -119,0 -119,-260 '
|
||||
} else {
|
||||
this.dotData.lineBottomSix = 'M 0,0 0,0'
|
||||
}
|
||||
} else if (item.pageLocation === 'night-line-bottom-seven') {
|
||||
if (+item.value > 0) {
|
||||
this.dotData.lineBottomSeven = 'M -199,-260,-199,0 0,0"'
|
||||
} else if (+item.value < 0) {
|
||||
this.dotData.lineBottomSeven = 'M 0,0 -199,0 -199,-260'
|
||||
} else {
|
||||
this.dotData.lineBottomSeven = 'M 0,0 0,0'
|
||||
}
|
||||
} else if (item.pageLocation === 'night-line-bottom-eight') {
|
||||
if (+item.value > 0) {
|
||||
this.dotData.lineBottomEight = 'M -279,-260,-279,0 0,0'
|
||||
} else if (+item.value < 0) {
|
||||
this.dotData.lineBottomEight = 'M 0,0 -279,0 -279,-260'
|
||||
} else {
|
||||
this.dotData.lineBottomEight = 'M 0,0 0,0'
|
||||
}
|
||||
} else if (item.pageLocation === 'night-line-bottom-night') {
|
||||
if (+item.value > 0) {
|
||||
this.dotData.lineBottomNight = 'M -359,-260,-359,0 0,0'
|
||||
} else if (+item.value < 0) {
|
||||
this.dotData.lineBottomNight = 'M 0,0 -279,0 -359,-260'
|
||||
} else {
|
||||
this.dotData.lineBottomNight = 'M 0,0 0,0'
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
} catch (error) {
|
||||
// console.log(error);
|
||||
} finally {
|
||||
this.loading = false
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.center-box {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
@mixin move-round($duration, $delay) {
|
||||
fill: none;
|
||||
stroke-width: 5;
|
||||
stroke-linejoin: round;
|
||||
stroke-linecap: round;
|
||||
stroke-dasharray: 3, 900;
|
||||
stroke-dashoffset: 0;
|
||||
animation: lineMove $duration $delay cubic-bezier(0, 0, 0.74, 0.74) infinite;
|
||||
}
|
||||
|
||||
@keyframes lineMove {
|
||||
0% {
|
||||
stroke-dashoffset: -850;
|
||||
}
|
||||
100% {
|
||||
stroke-dashoffset: -0;
|
||||
}
|
||||
}
|
||||
.g-rect-fill-two {
|
||||
@include move-round(3.5s, 1s);
|
||||
}
|
||||
</style>
|
||||
391
src/views/dashboardtest/components/top-center/once.vue
Normal file
391
src/views/dashboardtest/components/top-center/once.vue
Normal file
@ -0,0 +1,391 @@
|
||||
<template>
|
||||
<ItemBox :title="$t('dashboard.stationTopo')" style="min-height: 560px">
|
||||
<div ref="svgLine" v-loading="loading" class="center-box">
|
||||
<svg
|
||||
version="1.1"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||
xml:space="preserve"
|
||||
class="circle-load-rect-svg"
|
||||
viewBox="0 0 800 500"
|
||||
>
|
||||
<defs>
|
||||
<defs>
|
||||
<radialGradient id="RadialGradient1">
|
||||
<stop offset="0%" stop-color="#fff" />
|
||||
<stop offset="30%" stop-color="#0171c1" />
|
||||
<stop offset="50%" stop-color="#035088" />
|
||||
<stop offset="100%" stop-color="#02395a" />
|
||||
</radialGradient>
|
||||
</defs>
|
||||
<marker
|
||||
id="markerCircle"
|
||||
markerWidth="15"
|
||||
markerHeight="15"
|
||||
refX="5"
|
||||
refY="5"
|
||||
>
|
||||
<circle
|
||||
cx="5"
|
||||
cy="5"
|
||||
r="5"
|
||||
style="stroke: none; fill: url(#RadialGradient1)"
|
||||
/>
|
||||
</marker>
|
||||
|
||||
<marker
|
||||
id="markerArrow"
|
||||
markerWidth="13"
|
||||
markerHeight="13"
|
||||
refX="2"
|
||||
refY="6"
|
||||
orient="auto"
|
||||
>
|
||||
<path d="M2,2 L2,11 L10,6 L2,2" style="fill: black" />
|
||||
</marker>
|
||||
</defs>
|
||||
<polyline
|
||||
points="115,206 673,206"
|
||||
fill="none"
|
||||
class="g-rect-path"
|
||||
stroke-width="1"
|
||||
stroke="#0094FF"
|
||||
stroke-dasharray="3 3"
|
||||
/>
|
||||
|
||||
<circle
|
||||
cx="110"
|
||||
cy="206"
|
||||
r="8"
|
||||
style="stroke: none; fill: url(#RadialGradient1)"
|
||||
>
|
||||
<animateMotion
|
||||
repeatCount="indefinite"
|
||||
dur="8s"
|
||||
begin="0s"
|
||||
:path="line.line2"
|
||||
/>
|
||||
</circle>
|
||||
|
||||
<circle
|
||||
cx="110"
|
||||
cy="206"
|
||||
r="8"
|
||||
style="stroke: none; fill: url(#RadialGradient1); cursor: pointer"
|
||||
@click="lookDeviceDetail('215-pcs-line-left')"
|
||||
/>
|
||||
|
||||
<circle
|
||||
cx="673"
|
||||
cy="206"
|
||||
r="8"
|
||||
style="stroke: none; fill: url(#RadialGradient1)"
|
||||
>
|
||||
<animateMotion
|
||||
repeatCount="indefinite"
|
||||
dur="8s"
|
||||
begin="0s"
|
||||
:path="line.line1"
|
||||
/>
|
||||
</circle>
|
||||
|
||||
<circle
|
||||
cx="673"
|
||||
cy="206"
|
||||
r="8"
|
||||
style="stroke: none; fill: url(#RadialGradient1); cursor: pointer"
|
||||
@click="lookDeviceDetail('215-pcs-line-right')"
|
||||
/>
|
||||
<!-- {{ $t("dashboard.dCCabin") }} -->
|
||||
<image
|
||||
v-if="stationId === 381"
|
||||
:xlink:href="tnHomeCang"
|
||||
x="680"
|
||||
y="162"
|
||||
width="60"
|
||||
height="80"
|
||||
style="cursor: pointer"
|
||||
@click="lookDeviceDetail('215-pcs')"
|
||||
/>
|
||||
<image
|
||||
v-else
|
||||
:xlink:href="configData.pcs"
|
||||
x="680"
|
||||
y="162"
|
||||
width="60"
|
||||
height="80"
|
||||
style="cursor: pointer"
|
||||
@click="lookDeviceDetail('215-pcs')"
|
||||
/>
|
||||
|
||||
<!-- <text x="650" y="290" fill="#ffffff" font-size="14">{{ $t("dashboard.activePower") }}</text> -->
|
||||
<g v-for="(item, index) in pcsData" :key="item.id">
|
||||
<text x="630" :y="290 + 20 * index" fill="#ffffff" font-size="14">
|
||||
{{ item.name }}
|
||||
</text>
|
||||
<text
|
||||
:x="countChineseAndEnglishCharacters(item.name, 630)"
|
||||
:y="290 + 20 * index"
|
||||
fill="#FFB800"
|
||||
font-size="14"
|
||||
>
|
||||
{{ item.value }}
|
||||
</text>
|
||||
</g>
|
||||
|
||||
<!-- 电网 -->
|
||||
<image
|
||||
:xlink:href="configData.grid"
|
||||
x="35"
|
||||
y="162"
|
||||
width="60"
|
||||
height="80"
|
||||
/>
|
||||
<!-- {{ $t("dashboard.gridCab") }} -->
|
||||
<image
|
||||
:xlink:href="configData.gui"
|
||||
x="361"
|
||||
y="162"
|
||||
width="80"
|
||||
height="80"
|
||||
style="cursor: pointer"
|
||||
@click="lookDeviceDetail('215-bwg')"
|
||||
/>
|
||||
<g v-for="(item, index) in bwgData" :key="item.id">
|
||||
<text x="350" :y="290 + 20 * index" fill="#ffffff" font-size="14">
|
||||
{{ item.name }}
|
||||
</text>
|
||||
<text
|
||||
:x="countChineseAndEnglishCharacters(item.name, 350)"
|
||||
:y="290 + 20 * index"
|
||||
fill="#FFB800"
|
||||
font-size="14"
|
||||
>
|
||||
{{ item.value }}
|
||||
</text>
|
||||
</g>
|
||||
|
||||
<!-- {{ $t("dashboard.dCCabin") }} -->
|
||||
|
||||
<text x="678" y="260" fill="#ffffff" font-size="14">{{ $t("dashboard.esiCab") }}</text>
|
||||
<text x="379" y="260" fill="#ffffff" font-size="14">{{ $t("dashboard.gridCab") }}</text>
|
||||
<text x="38" y="260" fill="#ffffff" font-size="14"> {{ $t("dashboard.grid") }}</text>
|
||||
</svg>
|
||||
</div>
|
||||
<DispositionPointData
|
||||
:disposition-show="show_point_dispostion"
|
||||
:max="4"
|
||||
:page-location="pageLocation"
|
||||
@close="closePoint"
|
||||
@getData="getDynamicPointData"
|
||||
/>
|
||||
</ItemBox>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import homeOffice from '@/assets/images/home-office.png'
|
||||
import homeIntegrated from '@/assets/images/wxjd/pcs-energy.png'
|
||||
import homePowerGrid from '@/assets/images/home-powerGrid.png'
|
||||
import homeInverter from '@/assets/images/home-inverter-1.png'
|
||||
import homeCang from '@/assets/images/wxjd/cabinet.png'
|
||||
import tnHomeCang from '@/assets/images/wxjd/cabinet.png'
|
||||
import { DynamicConfigPoint } from '@/api/home-page/index'
|
||||
import config from './config'
|
||||
import { changeTheme } from '@/utils/index'
|
||||
export default {
|
||||
name: 'Index',
|
||||
props: {
|
||||
stationType: {
|
||||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
stationId: {
|
||||
type: Number,
|
||||
default: 0
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
formModel: { soc: '', soh: '', activePowerPCS: '', reactivePowerPCS: '' },
|
||||
homeOffice,
|
||||
homeIntegrated,
|
||||
homePowerGrid,
|
||||
homeInverter,
|
||||
homeCang,
|
||||
tnHomeCang,
|
||||
loading: false,
|
||||
currentIndex: 0,
|
||||
pageLocation: '',
|
||||
configData: {},
|
||||
line: {
|
||||
line1: 'M 0,0 0,0', // {{ $t("dashboard.gridCab") }}和一体柜之间的连线 {{ $t("dashboard.gridCab") }}流向一体柜
|
||||
line2: 'M 0,0 0,0' // {{ $t("dashboard.gridCab") }}和电网之间的连线- 电网流向{{ $t("dashboard.gridCab") }}
|
||||
},
|
||||
otherLine: {
|
||||
line1: 'M 0,0 0,0 ', // {{ $t("dashboard.gridCab") }}和一体柜之间的连线 一体柜流向{{ $t("dashboard.gridCab") }}
|
||||
line2: 'M 0,0 0,0' // {{ $t("dashboard.gridCab") }}和电网之间的连线- {{ $t("dashboard.gridCab") }}流向电网
|
||||
},
|
||||
key: 0,
|
||||
rightclickInfo: {},
|
||||
visiable: false,
|
||||
srcIdValue: null,
|
||||
options: [],
|
||||
newformModel: {},
|
||||
topologyId: null,
|
||||
sureLoading: false,
|
||||
editId: null,
|
||||
show_point_dispostion: false,
|
||||
bwgData: [],
|
||||
pcsData: [],
|
||||
permissionId: null
|
||||
}
|
||||
},
|
||||
computed: {},
|
||||
watch: {},
|
||||
created() {
|
||||
const result = changeTheme()
|
||||
this.configData = config[result]
|
||||
setTimeout(() => {
|
||||
if (this.$store.getters.menuList.length) {
|
||||
this.permissionId = this.$store.getters.menuList.find((item) => {
|
||||
return item.url === this.$route.path
|
||||
}).id
|
||||
}
|
||||
}, 300)
|
||||
},
|
||||
mounted() {},
|
||||
methods: {
|
||||
countChineseAndEnglishCharacters(str, x) {
|
||||
var chineseCount = str.match(/[\u4e00-\u9fa5]/g)
|
||||
? str.match(/[\u4e00-\u9fa5]/g).length
|
||||
: 0
|
||||
var englishCount = str.match(/[a-zA-Z]/g)
|
||||
? str.match(/[a-zA-Z]/g).length
|
||||
: 0
|
||||
var otherCount = str.length - chineseCount - englishCount
|
||||
const obj = {
|
||||
otherCount: otherCount,
|
||||
chineseCount: chineseCount,
|
||||
englishCount: englishCount
|
||||
}
|
||||
return (
|
||||
obj.englishCount * 11 + obj.chineseCount * 16 + obj.otherCount * 8 + x
|
||||
)
|
||||
},
|
||||
closePoint() {
|
||||
this.show_point_dispostion = false
|
||||
},
|
||||
getDynamicPointData() {
|
||||
this.getData()
|
||||
},
|
||||
handleChange() {},
|
||||
lookDeviceDetail(val) {
|
||||
// 查看设备详情
|
||||
this.pageLocation = val
|
||||
this.show_point_dispostion = true
|
||||
},
|
||||
workStatus(val) {
|
||||
if (this.formModel.flowDirection === 2) {
|
||||
if (+val > +1) {
|
||||
return this.$t('dashboard.disCharging')
|
||||
}
|
||||
if (+val < -1) {
|
||||
return this.$t('dashboard.charging')
|
||||
}
|
||||
if (val < 1 || +val.abs < 1 || !val) {
|
||||
return this.$t('dashboard.standing')
|
||||
}
|
||||
} else {
|
||||
if (+val > +1) {
|
||||
return this.$t('dashboard.charging')
|
||||
}
|
||||
if (+val < -1) {
|
||||
return this.$t('dashboard.disCharging')
|
||||
}
|
||||
if (val < 1 || +val.abs < 1 || !val) {
|
||||
return this.$t('dashboard.standing')
|
||||
}
|
||||
}
|
||||
},
|
||||
getFlowDirection(val) {
|
||||
if (this.formModel.flowDirection === 2) {
|
||||
if (+val > +1) {
|
||||
this.line.line1 = 'M 0,0 -270,0'
|
||||
this.line.line2 = 'M 301,0 0,0'
|
||||
}
|
||||
if (+val < -1) {
|
||||
this.line.line1 = 'M -272,0 0,0'
|
||||
this.line.line2 = 'M 0,0 301,0'
|
||||
}
|
||||
if (val === 0 || !val || (val < 1 && val > -1)) {
|
||||
this.line.line1 = ''
|
||||
this.line.line2 = ''
|
||||
}
|
||||
} else {
|
||||
if (+val > +0.1) {
|
||||
this.line.line1 = 'M -272,0 0,0'
|
||||
this.line.line2 = 'M 0,0 301,0'
|
||||
}
|
||||
if (+val < -0.1) {
|
||||
this.line.line1 = 'M 0,0 -270,0'
|
||||
this.line.line2 = 'M 301,0 0,0'
|
||||
}
|
||||
if (val === 0 || !val || (val < 1 && val > -1)) {
|
||||
this.line.line1 = ''
|
||||
this.line.line2 = ''
|
||||
}
|
||||
}
|
||||
},
|
||||
async getLine() {},
|
||||
async getPcsData() {
|
||||
this.loading = true
|
||||
try {
|
||||
const { data } = await DynamicConfigPoint({
|
||||
permissionId: this.permissionId,
|
||||
stationId: this.stationId
|
||||
})
|
||||
this.pcsData = []
|
||||
this.bwgData = []
|
||||
this.line.line1 = ''
|
||||
this.line.line2 = ''
|
||||
data.forEach((item) => {
|
||||
if (item.pageLocation === '215-pcs') {
|
||||
this.pcsData.push(item)
|
||||
} else if (item.pageLocation === '215-bwg') {
|
||||
this.bwgData.push(item)
|
||||
} else if (item.pageLocation === '215-pcs-line-left') {
|
||||
if (item.value > 0.1) {
|
||||
this.line.line2 = 'M 0,0 301,0'
|
||||
} else if (item.value < -0.1) {
|
||||
this.line.line2 = 'M 301,0 0,0'
|
||||
} else {
|
||||
this.line.line2 = ''
|
||||
}
|
||||
} else if (item.pageLocation === '215-pcs-line-right') {
|
||||
if (item.value > 0.1) {
|
||||
this.line.line1 = 'M -272,0 0,0'
|
||||
} else if (item.value < -0.1) {
|
||||
this.line.line1 = 'M 0,0 -270,0'
|
||||
} else {
|
||||
this.line.line1 = ''
|
||||
}
|
||||
}
|
||||
})
|
||||
} catch (error) {
|
||||
// console.log(error);
|
||||
} finally {
|
||||
this.loading = false
|
||||
}
|
||||
},
|
||||
async getData() {
|
||||
this.getPcsData()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.center-box {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,599 @@
|
||||
<template>
|
||||
<ItemBox :title="$t('dashboard.stationTopo')" style="min-height: 560px;">
|
||||
<div ref="svgLine" class="center-box">
|
||||
<div v-loading="loading">
|
||||
<svg
|
||||
version="1.1"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||
xml:space="preserve"
|
||||
class="circle-load-rect-svg"
|
||||
viewBox="0 0 800 500"
|
||||
>
|
||||
<defs>
|
||||
<defs>
|
||||
<radialGradient id="RadialGradient1">
|
||||
<stop offset="0%" stop-color="#fff" />
|
||||
<stop offset="30%" stop-color="#0171c1" />
|
||||
<stop offset="50%" stop-color="#035088" />
|
||||
<stop offset="100%" stop-color="#02395a" />
|
||||
</radialGradient>
|
||||
</defs>
|
||||
<marker
|
||||
id="markerCircle"
|
||||
markerWidth="15"
|
||||
markerHeight="15"
|
||||
refX="5"
|
||||
refY="5"
|
||||
>
|
||||
<circle
|
||||
cx="5"
|
||||
cy="5"
|
||||
r="5"
|
||||
style="stroke: none; fill: url(#RadialGradient1)"
|
||||
/>
|
||||
</marker>
|
||||
|
||||
<marker
|
||||
id="markerArrow"
|
||||
markerWidth="13"
|
||||
markerHeight="13"
|
||||
refX="2"
|
||||
refY="6"
|
||||
orient="auto"
|
||||
>
|
||||
<path d="M2,2 L2,11 L10,6 L2,2" style="fill: black" />
|
||||
</marker>
|
||||
</defs>
|
||||
<!-- //线条 -->
|
||||
<!-- top -->
|
||||
<polyline
|
||||
points="154,80 385,80"
|
||||
fill="none"
|
||||
class="g-rect-path"
|
||||
stroke="#0094FF"
|
||||
stroke-dasharray="3 3"
|
||||
/>
|
||||
<rect
|
||||
x="152"
|
||||
y="78"
|
||||
width="233"
|
||||
height="4"
|
||||
:style="{ fill: 'rgba(100,100,100,0)', stroke: 'transparent',cursor: 'pointer' }"
|
||||
@click="lookDeviceDetail('line-top-left')"
|
||||
/>
|
||||
|
||||
<polyline
|
||||
points="385,80 600,80"
|
||||
fill="none"
|
||||
class="g-rect-path"
|
||||
stroke="#0094FF"
|
||||
stroke-dasharray="3 3"
|
||||
/>
|
||||
<rect
|
||||
x="383"
|
||||
y="78"
|
||||
width="217"
|
||||
height="4"
|
||||
:style="{ fill: 'rgba(100,100,100,0)', stroke: 'transparent',cursor: 'pointer' }"
|
||||
@click="lookDeviceDetail('line-top-right')"
|
||||
/>
|
||||
<!-- center -->
|
||||
<polyline
|
||||
points="385,80 385,363"
|
||||
fill="none"
|
||||
class="g-rect-path"
|
||||
stroke="#0094FF"
|
||||
stroke-dasharray="3 3"
|
||||
/>
|
||||
<rect
|
||||
x="385"
|
||||
y="80"
|
||||
width="4"
|
||||
height="285"
|
||||
:style="{ fill: 'rgba(100,100,100,0)', stroke: 'transparent',cursor: 'pointer' }"
|
||||
@click="lookDeviceDetail('line-center')"
|
||||
/>
|
||||
|
||||
<polyline
|
||||
points="385,160 460,160"
|
||||
fill="none"
|
||||
class="g-rect-path"
|
||||
stroke="#0094FF"
|
||||
stroke-dasharray="3 3"
|
||||
/>
|
||||
|
||||
<!-- bottom -->
|
||||
<polyline
|
||||
points="104,363 385,363"
|
||||
fill="none"
|
||||
class="g-rect-path"
|
||||
stroke="#0094FF"
|
||||
stroke-dasharray="3 3"
|
||||
/>
|
||||
<rect
|
||||
x="104"
|
||||
y="361"
|
||||
width="285"
|
||||
height="4"
|
||||
:style="{ fill: 'rgba(100,100,100,0)', stroke: 'transparent',cursor: 'pointer' }"
|
||||
@click="lookDeviceDetail('line-bottom-left')"
|
||||
/>
|
||||
<polyline
|
||||
points="385,363 655,363"
|
||||
fill="none"
|
||||
class="g-rect-path"
|
||||
stroke="#0094FF"
|
||||
stroke-dasharray="3 3"
|
||||
/>
|
||||
<rect
|
||||
x="385"
|
||||
y="361"
|
||||
width="270"
|
||||
height="4"
|
||||
:style="{ fill: 'rgba(100,100,100,0)', stroke: 'transparent',cursor: 'pointer' }"
|
||||
@click="lookDeviceDetail('line-bottom-right')"
|
||||
/>
|
||||
|
||||
<!-- top -->
|
||||
<circle
|
||||
cx="154"
|
||||
cy="80"
|
||||
r="8"
|
||||
style="stroke: none; fill: url(#RadialGradient1)"
|
||||
/>
|
||||
<circle
|
||||
cx="600"
|
||||
cy="80"
|
||||
r="8"
|
||||
style="stroke: none; fill: url(#RadialGradient1)"
|
||||
/>
|
||||
|
||||
<!-- 动点 -->
|
||||
<circle
|
||||
cx="154"
|
||||
cy="80"
|
||||
r="8"
|
||||
style="stroke: none; fill: url(#RadialGradient1)"
|
||||
>
|
||||
<animateMotion
|
||||
repeatCount="indefinite"
|
||||
dur="4s"
|
||||
begin="0s"
|
||||
:path="dotData.lineTopLeft"
|
||||
/>
|
||||
</circle>
|
||||
<circle
|
||||
cx="385"
|
||||
cy="363"
|
||||
r="8"
|
||||
style="stroke: none; fill: url(#RadialGradient1)"
|
||||
>
|
||||
<animateMotion
|
||||
repeatCount="indefinite"
|
||||
dur="4s"
|
||||
begin="2s"
|
||||
:path="dotData.lineCenter"
|
||||
/>
|
||||
</circle>
|
||||
<circle
|
||||
cx="600"
|
||||
cy="80"
|
||||
r="8"
|
||||
style="stroke: none; fill: url(#RadialGradient1)"
|
||||
>
|
||||
<animateMotion
|
||||
repeatCount="indefinite"
|
||||
dur="4s"
|
||||
begin="0s"
|
||||
:path="dotData.lineTopRight"
|
||||
/>
|
||||
</circle>
|
||||
|
||||
<!-- bottom -->
|
||||
<circle
|
||||
cx="104"
|
||||
cy="363"
|
||||
r="8"
|
||||
style="stroke: none; fill: url(#RadialGradient1)"
|
||||
/>
|
||||
<circle
|
||||
cx="385"
|
||||
cy="363"
|
||||
r="8"
|
||||
style="stroke: none; fill: url(#RadialGradient1)"
|
||||
/>
|
||||
<circle
|
||||
cx="655"
|
||||
cy="363"
|
||||
r="8"
|
||||
style="stroke: none; fill: url(#RadialGradient1)"
|
||||
/>
|
||||
|
||||
<circle
|
||||
cx="104"
|
||||
cy="363"
|
||||
r="8"
|
||||
style="stroke: none; fill: url(#RadialGradient1)"
|
||||
>
|
||||
<animateMotion
|
||||
repeatCount="indefinite"
|
||||
dur="4s"
|
||||
begin="2s"
|
||||
:path="dotData.lineBottomLeft"
|
||||
/>
|
||||
</circle>
|
||||
|
||||
<circle
|
||||
cx="655"
|
||||
cy="363"
|
||||
r="8"
|
||||
style="stroke: none; fill: url(#RadialGradient1)"
|
||||
>
|
||||
<animateMotion
|
||||
repeatCount="indefinite"
|
||||
dur="4s"
|
||||
begin="2s"
|
||||
:path="dotData.lineBottomRight"
|
||||
/>
|
||||
</circle>
|
||||
<!-- 图片和文字 -->
|
||||
|
||||
<!-- 市电 -->
|
||||
<image
|
||||
:xlink:href="configData.grid"
|
||||
x="70"
|
||||
y="30"
|
||||
width="90"
|
||||
height="117"
|
||||
/>
|
||||
<text x="90" y="160" fill="#ffffff" font-size="14"> {{ $t("dashboard.grid") }}</text>
|
||||
|
||||
<!-- {{ $t("dashboard.load") }} -->
|
||||
<image
|
||||
:xlink:href="configData.house"
|
||||
x="610"
|
||||
y="30"
|
||||
width="90"
|
||||
height="117"
|
||||
/>
|
||||
<text x="645" y="160" fill="#ffffff" font-size="14"> {{ $t("dashboard.load") }}</text>
|
||||
|
||||
<!-- 1#PCS -->
|
||||
<image
|
||||
:xlink:href="configData.pcs2"
|
||||
x="65"
|
||||
y="383"
|
||||
width="90"
|
||||
height="90"
|
||||
style="cursor: pointer;"
|
||||
@click="lookDeviceDetail('second-pcs-left')"
|
||||
/>
|
||||
<text x="86" y="490" fill="#ffffff" font-size="14">1#{{ $t("dashboard.cabinet") }}</text>
|
||||
|
||||
<image
|
||||
:xlink:href="configData.pcs2"
|
||||
x="594"
|
||||
y="383"
|
||||
width="90"
|
||||
height="90"
|
||||
style="cursor: pointer;"
|
||||
@click="lookDeviceDetail('second-pcs-right')"
|
||||
/>
|
||||
<text x="614" y="490" fill="#ffffff" font-size="14">2#{{ $t("dashboard.cabinet") }}</text>
|
||||
|
||||
<!-- 变压器 -->
|
||||
<image
|
||||
:xlink:href="configData.gui"
|
||||
x="320"
|
||||
y="193"
|
||||
width="140"
|
||||
height="105"
|
||||
/>
|
||||
|
||||
<!-- {{ $t("dashboard.ammeter") }} -->
|
||||
<image
|
||||
:xlink:href="ammeterImg"
|
||||
x="455"
|
||||
y="130"
|
||||
width="100"
|
||||
height="60"
|
||||
style="cursor: pointer;"
|
||||
@click="lookDeviceDetail('second-ammeter')"
|
||||
/>
|
||||
<!-- 瞬时总有功 -->
|
||||
|
||||
<g v-for="(item,index) in ammeterData" :key="item.id">
|
||||
<text x="435" :y="220 + ( 20 * index)" fill="#ffffff" font-size="14">
|
||||
{{ item.name }}
|
||||
</text>
|
||||
<text :x="countChineseAndEnglishCharacters(item.name,435)" :y="220 + ( 20 * index)" fill="#FFB800" font-size="14">
|
||||
{{ item.value }}
|
||||
</text>
|
||||
</g>
|
||||
<!-- <text x="435" y="220" fill="#ffffff" font-size="14">
|
||||
{{ $t("dashboard.totalP") }}(kW)：
|
||||
</text>
|
||||
<text x="545" y="220" fill="#ffb800" font-size="14">
|
||||
{{ activePowerTotal.activePower }}
|
||||
</text> -->
|
||||
|
||||
<!-- 左侧 -->
|
||||
<!-- 1#PCS -->
|
||||
<g v-for="(item,index) in pcsLeftData" :key="item.id">
|
||||
<text x="85" :y="280 + ( 20 * index)" fill="#ffffff" font-size="14">
|
||||
{{ item.name }}
|
||||
</text>
|
||||
<text :x="countChineseAndEnglishCharacters(item.name,85)" :y="280 + ( 20 * index)" fill="#FFB800" font-size="14">
|
||||
{{ item.value }}
|
||||
</text>
|
||||
</g>
|
||||
|
||||
<!-- 中间 2PCS -->
|
||||
|
||||
<g v-for="(item,index) in pcsRightData" :key="item.id">
|
||||
<text x="602" :y="280 + ( 20 * index)" fill="#ffffff" font-size="14">
|
||||
{{ item.name }}
|
||||
</text>
|
||||
<text :x="countChineseAndEnglishCharacters(item.name,602)" :y="280 + ( 20 * index)" fill="#FFB800" font-size="14">
|
||||
{{ item.value }}
|
||||
</text>
|
||||
</g>
|
||||
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<dispositionPointDialog :visible="show_point_dispostion" :max="4" :page-location="pageLocation" @close="closePoint" @getData="getDynamicPointData" />
|
||||
</ItemBox>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import gridImg from '@/assets/images/wxjd/grid.png'
|
||||
import ammeterImg from '@/assets/images/wxjd/ammeter.png'
|
||||
import cabinetImg from '@/assets/images/wxjd/pcs-energy.png'
|
||||
import chargingPileImg from '@/assets/images/home-office.png'
|
||||
import distributionCabinetImg from '@/assets/images/wxjd/guiImg.png'
|
||||
import frameImg from '@/assets/images/wxjd/frame.png'
|
||||
import cangImg from '@/assets/images/home-cang.png'
|
||||
import { DynamicConfigPoint } from '@/api/home-page/index'
|
||||
import config from './config'
|
||||
import { changeTheme } from '@/utils/index'
|
||||
export default {
|
||||
name: 'Index',
|
||||
props: {
|
||||
stationType: {
|
||||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
stationId: {
|
||||
type: Number,
|
||||
default: 0
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
gridImg,
|
||||
ammeterImg,
|
||||
cabinetImg,
|
||||
chargingPileImg,
|
||||
distributionCabinetImg,
|
||||
cangImg,
|
||||
frameImg,
|
||||
dotData: {
|
||||
lineTop: 'M 0,0 0,0',
|
||||
lineBottomLeft: 'M 0,0 0,0 0,0',
|
||||
lineBottomRight: 'M 0,0 0,0 0,0',
|
||||
lineBottomLeftTwo: 'M 0,0 0,0 0,0',
|
||||
lineBottomRightTwo: 'M 0,0 0,0 0,0'
|
||||
},
|
||||
|
||||
partList: [
|
||||
{ soc: 0, soh: 0, activePowerPCS: 0.0, reactivePowerPCS: 0.0 },
|
||||
{ soc: 0, soh: 0, activePowerPCS: 0.0, reactivePowerPCS: 0.0 },
|
||||
{ soc: 0, soh: 0, activePowerPCS: 0.0, reactivePowerPCS: 0.0 },
|
||||
{ soc: 0, soh: 0, activePowerPCS: 0.0, reactivePowerPCS: 0.0 }
|
||||
],
|
||||
loading: false,
|
||||
activePowerTotal: {},
|
||||
show_point_dispostion: false,
|
||||
pageLocation: '',
|
||||
permissionId: null,
|
||||
pcsLeftData: [],
|
||||
pcsRightData: [],
|
||||
ammeterData: [],
|
||||
configData: {}
|
||||
|
||||
}
|
||||
},
|
||||
computed: {},
|
||||
watch: {},
|
||||
created() {
|
||||
const result = changeTheme()
|
||||
this.configData = config[result]
|
||||
setTimeout(() => {
|
||||
if (this.$store.getters.menuList.length) {
|
||||
this.permissionId = this.$store.getters.menuList.find(item => {
|
||||
return item.url === this.$route.path
|
||||
}).id
|
||||
}
|
||||
}, 300)
|
||||
},
|
||||
mounted() {},
|
||||
methods: {
|
||||
countChineseAndEnglishCharacters(str, x) {
|
||||
var chineseCount = str.match(/[\u4e00-\u9fa5]/g) ? str.match(/[\u4e00-\u9fa5]/g).length : 0
|
||||
var englishCount = str.match(/[a-zA-Z]/g) ? str.match(/[a-zA-Z]/g).length : 0
|
||||
var otherCount = str.length - chineseCount - englishCount
|
||||
const obj = { otherCount: otherCount, chineseCount: chineseCount, englishCount: englishCount }
|
||||
return (obj.englishCount * 11) + (obj.chineseCount * 16) + (obj.otherCount * 8) + x
|
||||
},
|
||||
lookDeviceDetail(val) { // 查看设备详情
|
||||
this.pageLocation = val
|
||||
this.show_point_dispostion = true
|
||||
},
|
||||
closePoint() {
|
||||
this.show_point_dispostion = false
|
||||
},
|
||||
async getpcsLeft() {
|
||||
this.loading = true
|
||||
try {
|
||||
const res = await DynamicConfigPoint({
|
||||
pageLocation: 'second-pcs-left',
|
||||
permissionId: this.permissionId,
|
||||
stationId: this.stationId })
|
||||
this.pcsLeftData = res.data
|
||||
} catch (error) {
|
||||
// console.log(error);
|
||||
} finally {
|
||||
this.loading = false
|
||||
}
|
||||
},
|
||||
async getammeter() {
|
||||
this.loading = true
|
||||
try {
|
||||
const res = await DynamicConfigPoint({
|
||||
pageLocation: 'second-ammeter',
|
||||
permissionId: this.permissionId,
|
||||
stationId: this.stationId })
|
||||
this.ammeterData = res.data
|
||||
} catch (error) {
|
||||
// console.log(error);
|
||||
} finally {
|
||||
this.loading = false
|
||||
}
|
||||
},
|
||||
async getpcsRight() {
|
||||
this.loading = true
|
||||
try {
|
||||
const res = await DynamicConfigPoint({
|
||||
pageLocation: 'second-pcs-right',
|
||||
permissionId: this.permissionId,
|
||||
stationId: this.stationId })
|
||||
this.pcsRightData = res.data
|
||||
} catch (error) {
|
||||
// console.log(error);
|
||||
} finally {
|
||||
this.loading = false
|
||||
}
|
||||
},
|
||||
async getLineStatus(type) {
|
||||
this.loading = true
|
||||
try {
|
||||
const res = await DynamicConfigPoint({
|
||||
pageLocation: type,
|
||||
permissionId: this.permissionId,
|
||||
stationId: this.stationId })
|
||||
|
||||
if (type === 'line-bottom-left') {
|
||||
if (res.data?.length) {
|
||||
if (res.data[0].value > 0) {
|
||||
this.dotData.lineBottomLeft = 'M 283,0, 280, 0, 0 ,0'
|
||||
} else if (res.data[0].value < 0) {
|
||||
this.dotData.lineBottomLeft = 'M 0,0 281,0 281,0'
|
||||
} else {
|
||||
this.dotData.lineBottomLeft = ''
|
||||
}
|
||||
} else {
|
||||
this.dotData.lineBottomLeft = ''
|
||||
}
|
||||
} else if (type === 'line-bottom-right') {
|
||||
if (res.data?.length) {
|
||||
if (res.data[0].value > 0) {
|
||||
this.dotData.lineBottomRight = 'M -271, 0 , -271 , 0 , 0 , 0'
|
||||
} else if (res.data[0].value < 0) {
|
||||
this.dotData.lineBottomRight = 'M 0,0 -271,0 -271,0'
|
||||
} else {
|
||||
this.dotData.lineBottomRight = ''
|
||||
}
|
||||
} else {
|
||||
this.dotData.lineBottomRight = ''
|
||||
}
|
||||
} else if (type === 'line-center') {
|
||||
if (res.data?.length) {
|
||||
if (res.data[0].value > 0) {
|
||||
this.dotData.lineCenter = 'M 0,-283,0,0,0,0'
|
||||
} else if (res.data[0].value < 0) {
|
||||
this.dotData.lineCenter = 'M 0,0,0,0,0,-283'
|
||||
} else {
|
||||
this.dotData.lineCenter = ''
|
||||
}
|
||||
} else {
|
||||
this.dotData.lineCenter = ''
|
||||
}
|
||||
} else if (type === 'line-top-left') {
|
||||
if (res.data?.length) {
|
||||
if (res.data[0].value > 0) {
|
||||
this.dotData.lineTopLeft = 'M 238,0 0,0'
|
||||
} else if (res.data[0].value < 0) {
|
||||
this.dotData.lineTopLeft = 'M 0,0 238,0'
|
||||
} else {
|
||||
this.dotData.lineTopLeft = ''
|
||||
}
|
||||
} else {
|
||||
this.dotData.lineTopLeft = ''
|
||||
}
|
||||
} else if (type === 'line-top-right') {
|
||||
if (res.data?.length) {
|
||||
if (res.data[0].value > 0) {
|
||||
this.dotData.lineTopRight = 'M -230,0 0,0'
|
||||
} else if (res.data[0].value < 0) {
|
||||
this.dotData.lineTopRight = 'M 0,0 -230,0'
|
||||
} else {
|
||||
this.dotData.lineTopRight = ''
|
||||
}
|
||||
} else {
|
||||
this.dotData.lineTopRight = ''
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
// console.log(error);
|
||||
} finally {
|
||||
this.loading = false
|
||||
}
|
||||
},
|
||||
|
||||
getData() {
|
||||
this.getpcsRight()
|
||||
this.getpcsLeft()
|
||||
this.getammeter()
|
||||
this.getLineStatus('line-bottom-left')
|
||||
this.getLineStatus('line-center')
|
||||
this.getLineStatus('line-bottom-right')
|
||||
this.getLineStatus('line-top-left')
|
||||
this.getLineStatus('line-top-right')
|
||||
},
|
||||
getDynamicPointData() {
|
||||
this.getData()
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.center-box {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
@mixin move-round($duration, $delay) {
|
||||
fill: none;
|
||||
stroke-width: 5;
|
||||
stroke-linejoin: round;
|
||||
stroke-linecap: round;
|
||||
stroke-dasharray: 3, 900;
|
||||
stroke-dashoffset: 0;
|
||||
animation: lineMove $duration $delay cubic-bezier(0, 0, 0.74, 0.74) infinite;
|
||||
}
|
||||
|
||||
@keyframes lineMove {
|
||||
0% {
|
||||
stroke-dashoffset: -850;
|
||||
}
|
||||
100% {
|
||||
stroke-dashoffset: -0;
|
||||
}
|
||||
}
|
||||
.g-rect-fill-two {
|
||||
@include move-round(3.5s, 1s);
|
||||
}
|
||||
</style>
|
||||
499
src/views/dashboardtest/components/top-center/second.vue
Normal file
499
src/views/dashboardtest/components/top-center/second.vue
Normal file
@ -0,0 +1,499 @@
|
||||
<template>
|
||||
<ItemBox :title="$t('dashboard.stationTopo')" style="min-height: 560px;">
|
||||
<div ref="svgLine" class="center-box">
|
||||
<div v-loading="loading">
|
||||
<svg
|
||||
version="1.1"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||
xml:space="preserve"
|
||||
class="circle-load-rect-svg"
|
||||
viewBox="0 0 800 500"
|
||||
>
|
||||
<defs>
|
||||
<defs>
|
||||
<radialGradient id="RadialGradient1">
|
||||
<stop offset="0%" stop-color="#fff" />
|
||||
<stop offset="30%" stop-color="#0171c1" />
|
||||
<stop offset="50%" stop-color="#035088" />
|
||||
<stop offset="100%" stop-color="#02395a" />
|
||||
</radialGradient>
|
||||
</defs>
|
||||
<marker
|
||||
id="markerCircle"
|
||||
markerWidth="15"
|
||||
markerHeight="15"
|
||||
refX="5"
|
||||
refY="5"
|
||||
>
|
||||
<circle
|
||||
cx="5"
|
||||
cy="5"
|
||||
r="5"
|
||||
style="stroke: none; fill: url(#RadialGradient1)"
|
||||
/>
|
||||
</marker>
|
||||
|
||||
<marker
|
||||
id="markerArrow"
|
||||
markerWidth="13"
|
||||
markerHeight="13"
|
||||
refX="2"
|
||||
refY="6"
|
||||
orient="auto"
|
||||
>
|
||||
<path d="M2,2 L2,11 L10,6 L2,2" style="fill: black" />
|
||||
</marker>
|
||||
</defs>
|
||||
<!-- //线条 -->
|
||||
<!-- top -->
|
||||
<polyline
|
||||
points="154,80 600,80"
|
||||
fill="none"
|
||||
class="g-rect-path"
|
||||
stroke="#0094FF"
|
||||
stroke-dasharray="3 3"
|
||||
/>
|
||||
<!-- center -->
|
||||
<polyline
|
||||
points="385,80 385,363"
|
||||
fill="none"
|
||||
class="g-rect-path"
|
||||
stroke="#0094FF"
|
||||
stroke-dasharray="3 3"
|
||||
/>
|
||||
|
||||
<polyline
|
||||
points="385,160 460,160"
|
||||
fill="none"
|
||||
class="g-rect-path"
|
||||
stroke="#0094FF"
|
||||
stroke-dasharray="3 3"
|
||||
/>
|
||||
|
||||
<!-- bottom -->
|
||||
<polyline
|
||||
points="104,363 655,363"
|
||||
fill="none"
|
||||
class="g-rect-path"
|
||||
stroke="#0094FF"
|
||||
stroke-dasharray="3 3"
|
||||
/>
|
||||
|
||||
<!-- top -->
|
||||
<circle
|
||||
cx="154"
|
||||
cy="80"
|
||||
r="8"
|
||||
style="stroke: none; fill: url(#RadialGradient1)"
|
||||
/>
|
||||
<circle
|
||||
cx="600"
|
||||
cy="80"
|
||||
r="8"
|
||||
style="stroke: none; fill: url(#RadialGradient1)"
|
||||
/>
|
||||
|
||||
<!-- 动点 -->
|
||||
<circle
|
||||
cx="154"
|
||||
cy="80"
|
||||
r="8"
|
||||
style="stroke: none; fill: url(#RadialGradient1)"
|
||||
>
|
||||
<animateMotion
|
||||
repeatCount="indefinite"
|
||||
dur="4s"
|
||||
begin="0s"
|
||||
:path="dotData.lineTop"
|
||||
/>
|
||||
</circle>
|
||||
|
||||
<circle
|
||||
cx="460"
|
||||
cy="160"
|
||||
r="8"
|
||||
style="stroke: none; fill: url(#RadialGradient1)"
|
||||
>
|
||||
<!-- <animateMotion
|
||||
repeatCount="indefinite"
|
||||
dur="4s"
|
||||
begin="0s"
|
||||
:path="dotData.lineTop"
|
||||
/> -->
|
||||
</circle>
|
||||
|
||||
<!-- bottom -->
|
||||
<circle
|
||||
cx="104"
|
||||
cy="363"
|
||||
r="8"
|
||||
style="stroke: none; fill: url(#RadialGradient1)"
|
||||
/>
|
||||
<circle
|
||||
cx="385"
|
||||
cy="363"
|
||||
r="8"
|
||||
style="stroke: none; fill: url(#RadialGradient1)"
|
||||
/>
|
||||
<circle
|
||||
cx="655"
|
||||
cy="363"
|
||||
r="8"
|
||||
style="stroke: none; fill: url(#RadialGradient1)"
|
||||
/>
|
||||
|
||||
<circle
|
||||
cx="104"
|
||||
cy="363"
|
||||
r="8"
|
||||
style="stroke: none; fill: url(#RadialGradient1)"
|
||||
>
|
||||
<animateMotion
|
||||
repeatCount="indefinite"
|
||||
dur="4s"
|
||||
begin="2s"
|
||||
:path="dotData.lineBottomLeft"
|
||||
/>
|
||||
</circle>
|
||||
|
||||
<circle
|
||||
cx="655"
|
||||
cy="363"
|
||||
r="8"
|
||||
style="stroke: none; fill: url(#RadialGradient1)"
|
||||
>
|
||||
<animateMotion
|
||||
repeatCount="indefinite"
|
||||
dur="4s"
|
||||
begin="2s"
|
||||
:path="dotData.lineBottomRight"
|
||||
/>
|
||||
</circle>
|
||||
<!-- 图片和文字 -->
|
||||
|
||||
<!-- 市电 -->
|
||||
<image
|
||||
:xlink:href="configData.grid"
|
||||
x="70"
|
||||
y="30"
|
||||
width="90"
|
||||
height="117"
|
||||
/>
|
||||
<text x="90" y="160" fill="#ffffff" font-size="14"> {{ $t("dashboard.grid") }}</text>
|
||||
|
||||
<!-- {{ $t("dashboard.load") }} -->
|
||||
<image
|
||||
:xlink:href="configData.house"
|
||||
x="610"
|
||||
y="30"
|
||||
width="90"
|
||||
height="117"
|
||||
/>
|
||||
<text x="645" y="160" fill="#ffffff" font-size="14"> {{ $t("dashboard.load") }}</text>
|
||||
|
||||
<!-- 1#PCS -->
|
||||
<image
|
||||
:xlink:href="configData.pcs2"
|
||||
x="65"
|
||||
y="383"
|
||||
width="90"
|
||||
height="90"
|
||||
/>
|
||||
<text x="86" y="490" fill="#ffffff" font-size="14">1#{{ $t("dashboard.cabinet") }}</text>
|
||||
|
||||
<image
|
||||
:xlink:href="configData.pcs2"
|
||||
x="594"
|
||||
y="383"
|
||||
width="90"
|
||||
height="90"
|
||||
/>
|
||||
<text x="614" y="490" fill="#ffffff" font-size="14">2#{{ $t("dashboard.cabinet") }}</text>
|
||||
|
||||
<!-- 变压器 -->
|
||||
<image
|
||||
:xlink:href="configData.gui"
|
||||
x="320"
|
||||
y="193"
|
||||
width="140"
|
||||
height="105"
|
||||
/>
|
||||
|
||||
<!-- {{ $t("dashboard.ammeter") }} -->
|
||||
<image
|
||||
:xlink:href="ammeterImg"
|
||||
x="455"
|
||||
y="130"
|
||||
width="100"
|
||||
height="60"
|
||||
/>
|
||||
<!-- 瞬时总有功 -->
|
||||
<text x="435" y="220" fill="#ffffff" font-size="14">
|
||||
{{ $t("dashboard.totalP") }}(kW)：
|
||||
</text>
|
||||
<text x="545" y="220" fill="#ffb800" font-size="14">
|
||||
{{ activePowerTotal.activePower }}
|
||||
</text>
|
||||
|
||||
<!-- 左侧 -->
|
||||
<!-- 1#PCS -->
|
||||
<text x="85" y="280" fill="#ffffff" font-size="14">SOC(%)：</text>
|
||||
<text x="155" y="280" fill="#ffb800" font-size="14">
|
||||
{{ partList.length > 0 ? partList[0].soc : 0 }}
|
||||
</text>
|
||||
<text x="85" y="300" fill="#ffffff" font-size="14">SOH(%)：</text>
|
||||
<text x="155" y="300" fill="#ffb800" font-size="14">
|
||||
{{ partList.length > 0 ? partList[0].soh : 0 }}
|
||||
</text>
|
||||
|
||||
<text x="85" y="320" fill="#ffffff" font-size="14">
|
||||
{{ $t("dashboard.workStatus") }}：
|
||||
</text>
|
||||
<text x="175" y="320" fill="#ffb800" font-size="14">
|
||||
{{ workStatus(partList[0].activePowerPCS,0) }}
|
||||
</text>
|
||||
<text x="85" y="340" fill="#ffffff" font-size="14">
|
||||
{{ $t("dashboard.activePower") }}({{
|
||||
partList.length > 0
|
||||
? partList[0].activePowerPCS
|
||||
: 0 | kwUnitFormat
|
||||
}})：
|
||||
</text>
|
||||
<text x="185" y="340" fill="#ffb800" font-size="14">
|
||||
{{
|
||||
partList.length > 0
|
||||
? partList[0].activePowerPCS
|
||||
: 0 | kWFormat(2)
|
||||
}}
|
||||
</text>
|
||||
<!-- 中间 2PCS -->
|
||||
|
||||
<text x="602" y="280" fill="#ffffff" font-size="14">
|
||||
SOC(%)：
|
||||
</text>
|
||||
<text x="672" y="280" fill="#ffb800" font-size="14">
|
||||
{{ partList.length > 0 ? partList[1].soc : 0 }}
|
||||
</text>
|
||||
<text x="602" y="300" fill="#ffffff" font-size="14">
|
||||
SOH(%)：
|
||||
</text>
|
||||
<text x="672" y="300" fill="#ffb800" font-size="14">
|
||||
{{ partList.length > 0 ? partList[1].soh : 0 }}
|
||||
</text>
|
||||
<text x="602" y="320" fill="#ffffff" font-size="14">
|
||||
{{ $t("dashboard.workStatus") }}：
|
||||
</text>
|
||||
<text x="692" y="320" fill="#ffb800" font-size="14">
|
||||
{{ workStatus(partList[1].activePowerPCS,1) }}
|
||||
</text>
|
||||
<text x="602" y="340" fill="#ffffff" font-size="14">
|
||||
{{ $t("dashboard.activePower") }}({{
|
||||
partList.length > 0
|
||||
? partList[1].activePowerPCS
|
||||
: 0 | kwUnitFormat
|
||||
}})：
|
||||
</text>
|
||||
<text x="702" y="340" fill="#ffb800" font-size="14">
|
||||
{{
|
||||
partList.length > 0
|
||||
? partList[1].activePowerPCS
|
||||
: 0 | kWFormat(2)
|
||||
}}
|
||||
</text>
|
||||
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</ItemBox>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import gridImg from '@/assets/images/wxjd/grid.png'
|
||||
import ammeterImg from '@/assets/images/wxjd/ammeter.png'
|
||||
import cabinetImg from '@/assets/images/wxjd/pcs-energy.png'
|
||||
import chargingPileImg from '@/assets/images/home-office.png'
|
||||
import distributionCabinetImg from '@/assets/images/wxjd/guiImg.png'
|
||||
import frameImg from '@/assets/images/wxjd/frame.png'
|
||||
import cangImg from '@/assets/images/home-cang.png'
|
||||
import config from './config'
|
||||
import { changeTheme } from '@/utils/index'
|
||||
import {
|
||||
GetOpenStationMiddlePart,
|
||||
GetTotalPower
|
||||
} from '@/api/home-page/index'
|
||||
export default {
|
||||
name: 'Index',
|
||||
props: {
|
||||
stationType: {
|
||||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
stationId: {
|
||||
type: Number,
|
||||
default: 0
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
gridImg,
|
||||
ammeterImg,
|
||||
cabinetImg,
|
||||
chargingPileImg,
|
||||
distributionCabinetImg,
|
||||
cangImg,
|
||||
frameImg,
|
||||
dotData: {
|
||||
lineTop: 'M 0,0 0,0',
|
||||
lineBottomLeft: 'M 0,0 0,0 0,0',
|
||||
lineBottomRight: 'M 0,0 0,0 0,0',
|
||||
lineBottomLeftTwo: 'M 0,0 0,0 0,0',
|
||||
lineBottomRightTwo: 'M 0,0 0,0 0,0'
|
||||
},
|
||||
|
||||
partList: [
|
||||
{ soc: 0, soh: 0, activePowerPCS: 0.0, reactivePowerPCS: 0.0 },
|
||||
{ soc: 0, soh: 0, activePowerPCS: 0.0, reactivePowerPCS: 0.0 },
|
||||
{ soc: 0, soh: 0, activePowerPCS: 0.0, reactivePowerPCS: 0.0 },
|
||||
{ soc: 0, soh: 0, activePowerPCS: 0.0, reactivePowerPCS: 0.0 }
|
||||
],
|
||||
loading: false,
|
||||
activePowerTotal: {},
|
||||
configData: {}
|
||||
}
|
||||
},
|
||||
computed: {},
|
||||
watch: {},
|
||||
created() {
|
||||
const result = changeTheme()
|
||||
this.configData = config[result]
|
||||
},
|
||||
mounted() {},
|
||||
methods: {
|
||||
workStatus(val, index) {
|
||||
// console.log(val, index)
|
||||
if (this.partList[index].flowDirection === 1) {
|
||||
if (+val > +1) {
|
||||
return this.$t('dashboard.charging')
|
||||
}
|
||||
if (+val < -1) {
|
||||
return this.$t('dashboard.disCharging')
|
||||
}
|
||||
if (val < 1 || +val.abs < 1 || !val) {
|
||||
return this.$t('dashboard.standing')
|
||||
}
|
||||
} else {
|
||||
if (+val > +1) {
|
||||
return this.$t('dashboard.disCharging')
|
||||
}
|
||||
if (+val < -1) {
|
||||
return this.$t('dashboard.charging')
|
||||
}
|
||||
if (val < 1 || +val.abs < 1 || !val) {
|
||||
return this.$t('dashboard.standing')
|
||||
}
|
||||
}
|
||||
},
|
||||
getData() {
|
||||
this.GetMiddleActive()
|
||||
this.GetOpenStationMiddlePart()
|
||||
},
|
||||
async GetMiddleActive() {
|
||||
this.loading = true
|
||||
try {
|
||||
const params = {
|
||||
stationId: this.stationId
|
||||
}
|
||||
const res = await GetTotalPower(params)
|
||||
this.activePowerTotal = res.data
|
||||
} catch (error) {
|
||||
// console.log(error);
|
||||
} finally {
|
||||
this.loading = false
|
||||
}
|
||||
},
|
||||
flowDirection(data) {
|
||||
this.dotData.lineTop = 'M 0,0 412,0'
|
||||
if (data[0].flowDirection === 1) {
|
||||
if (data[0].activePowerPCS > 1) {
|
||||
this.dotData.lineBottomLeft = 'M 283,-280, 280, 0, 0 ,0'
|
||||
} else if (data[0].activePowerPCS < -1) {
|
||||
this.dotData.lineBottomLeft = 'M 0,0 281,0 281,-283'
|
||||
} else if (data[0].activePowerPCS === 0 || !data[0].activePowerPCS || (data[0].activePowerPCS > -1 && data[0].activePowerPCS < 1)) {
|
||||
this.dotData.lineBottomLeft = ''
|
||||
}
|
||||
|
||||
if (data[1].activePowerPCS > 1) {
|
||||
this.dotData.lineBottomRight = 'M -271, -280 , -271 , 0 , 0 , 0'
|
||||
} else if (data[1].activePowerPCS < -1) {
|
||||
this.dotData.lineBottomRight = 'M 0,0 -271,0 -271,-283'
|
||||
} else if (data[1].activePowerPCS === 0 || !data[0].activePowerPCS || (data[1].activePowerPCS > -1 && data[1].activePowerPCS < 1)) {
|
||||
this.dotData.lineBottomRight = ''
|
||||
}
|
||||
} else {
|
||||
if (data[0].activePowerPCS > 1) {
|
||||
this.dotData.lineBottomLeft = 'M 0,0 281,0 281,-283'
|
||||
} else if (data[0].activePowerPCS < -1) {
|
||||
this.dotData.lineBottomLeft = 'M 283,-280, 280, 0, 0 ,0'
|
||||
} else if (data[0].activePowerPCS === 0 || !data[0].activePowerPCS || (data[0].activePowerPCS > -1 && data[0].activePowerPCS < 1)) {
|
||||
this.dotData.lineBottomLeft = ''
|
||||
}
|
||||
|
||||
if (data[1].activePowerPCS > 1) {
|
||||
this.dotData.lineBottomRight = 'M 0,0 -271,0 -271,-283'
|
||||
} else if (data[1].activePowerPCS < -1) {
|
||||
this.dotData.lineBottomRight = 'M -271, -280 , -271 , 0 , 0 , 0'
|
||||
} else if (data[1].activePowerPCS === 0 || !data[1].activePowerPCS || (data[1].activePowerPCS > -1 && data[1].activePowerPCS < 1)) {
|
||||
this.dotData.lineBottomRight = ''
|
||||
}
|
||||
}
|
||||
},
|
||||
async GetOpenStationMiddlePart() {
|
||||
this.loading = true
|
||||
try {
|
||||
const params = {
|
||||
stationId: this.stationId
|
||||
}
|
||||
const res = await GetOpenStationMiddlePart(params)
|
||||
|
||||
this.partList = res?.data
|
||||
this.flowDirection(this.partList)
|
||||
// 根据activePowerPCS判断
|
||||
} catch (error) {
|
||||
// console.log(error);
|
||||
} finally {
|
||||
this.loading = false
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.center-box {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
@mixin move-round($duration, $delay) {
|
||||
fill: none;
|
||||
stroke-width: 5;
|
||||
stroke-linejoin: round;
|
||||
stroke-linecap: round;
|
||||
stroke-dasharray: 3, 900;
|
||||
stroke-dashoffset: 0;
|
||||
animation: lineMove $duration $delay cubic-bezier(0, 0, 0.74, 0.74) infinite;
|
||||
}
|
||||
|
||||
@keyframes lineMove {
|
||||
0% {
|
||||
stroke-dashoffset: -850;
|
||||
}
|
||||
100% {
|
||||
stroke-dashoffset: -0;
|
||||
}
|
||||
}
|
||||
.g-rect-fill-two {
|
||||
@include move-round(3.5s, 1s);
|
||||
}
|
||||
</style>
|
||||
755
src/views/dashboardtest/components/top-center/seventh.vue
Normal file
755
src/views/dashboardtest/components/top-center/seventh.vue
Normal file
@ -0,0 +1,755 @@
|
||||
<template>
|
||||
<ItemBox :title="$t('dashboard.stationTopo')" style="min-height: 560px;">
|
||||
<div ref="svgLine" class="center-box">
|
||||
<div v-loading="loading">
|
||||
<svg
|
||||
version="1.1"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||
xml:space="preserve"
|
||||
class="circle-load-rect-svg"
|
||||
viewBox="0 0 800 530"
|
||||
>
|
||||
<defs>
|
||||
<defs>
|
||||
<radialGradient id="RadialGradient1">
|
||||
<stop offset="0%" stop-color="#fff" />
|
||||
<stop offset="30%" stop-color="#0171c1" />
|
||||
<stop offset="50%" stop-color="#035088" />
|
||||
<stop offset="100%" stop-color="#02395a" />
|
||||
</radialGradient>
|
||||
</defs>
|
||||
<marker
|
||||
id="markerCircle"
|
||||
markerWidth="15"
|
||||
markerHeight="15"
|
||||
refX="5"
|
||||
refY="5"
|
||||
>
|
||||
<circle
|
||||
cx="5"
|
||||
cy="5"
|
||||
r="5"
|
||||
style="stroke: none; fill: url(#RadialGradient1)"
|
||||
/>
|
||||
</marker>
|
||||
|
||||
<marker
|
||||
id="markerArrow"
|
||||
markerWidth="13"
|
||||
markerHeight="13"
|
||||
refX="2"
|
||||
refY="6"
|
||||
orient="auto"
|
||||
>
|
||||
<path d="M2,2 L2,11 L10,6 L2,2" style="fill: black" />
|
||||
</marker>
|
||||
</defs>
|
||||
<!-- //线条 -->
|
||||
<!-- top -->
|
||||
<polyline
|
||||
points="154,60 630,60"
|
||||
fill="none"
|
||||
class="g-rect-path"
|
||||
stroke="#0094FF"
|
||||
stroke-dasharray="3 3"
|
||||
/>
|
||||
<!-- center -->
|
||||
<polyline
|
||||
points="385,60 385,320"
|
||||
fill="none"
|
||||
class="g-rect-path"
|
||||
stroke="#0094FF"
|
||||
stroke-dasharray="3 3"
|
||||
/>
|
||||
|
||||
<polyline
|
||||
points="385,100 460,100"
|
||||
fill="none"
|
||||
class="g-rect-path"
|
||||
stroke="#0094FF"
|
||||
stroke-dasharray="3 3"
|
||||
/>
|
||||
|
||||
<!-- bottom -->
|
||||
<polyline
|
||||
points="124,320 655,320"
|
||||
fill="none"
|
||||
class="g-rect-path"
|
||||
stroke="#0094FF"
|
||||
stroke-dasharray="3 3"
|
||||
/>
|
||||
|
||||
<circle
|
||||
cx="154"
|
||||
cy="60"
|
||||
r="8"
|
||||
style="stroke: none; fill: url(#RadialGradient1)"
|
||||
>
|
||||
<animateMotion
|
||||
repeatCount="indefinite"
|
||||
dur="4s"
|
||||
begin="0s"
|
||||
:path="dotData.lineTopLeft"
|
||||
/>
|
||||
</circle>
|
||||
|
||||
<circle
|
||||
cx="630"
|
||||
cy="60"
|
||||
r="8"
|
||||
style="stroke: none; fill: url(#RadialGradient1)"
|
||||
>
|
||||
<animateMotion
|
||||
repeatCount="indefinite"
|
||||
dur="4s"
|
||||
begin="0s"
|
||||
:path="dotData.lineTopRight"
|
||||
/>
|
||||
</circle>
|
||||
|
||||
<circle
|
||||
cx="128"
|
||||
cy="320"
|
||||
r="8"
|
||||
style="stroke: none; fill: url(#RadialGradient1)"
|
||||
>
|
||||
<animateMotion
|
||||
repeatCount="indefinite"
|
||||
dur="4s"
|
||||
begin="0s"
|
||||
:path="dotData.lineBottomOne"
|
||||
/>
|
||||
</circle>
|
||||
|
||||
<circle
|
||||
cx="210"
|
||||
cy="320"
|
||||
r="8"
|
||||
style="stroke: none; fill: url(#RadialGradient1)"
|
||||
>
|
||||
<animateMotion
|
||||
repeatCount="indefinite"
|
||||
dur="4s"
|
||||
begin="0s"
|
||||
:path="dotData.lineBottomTwo"
|
||||
/>
|
||||
</circle>
|
||||
|
||||
<circle
|
||||
cx="290"
|
||||
cy="320"
|
||||
r="8"
|
||||
style="stroke: none; fill: url(#RadialGradient1)"
|
||||
>
|
||||
<animateMotion
|
||||
repeatCount="indefinite"
|
||||
dur="4s"
|
||||
begin="0s"
|
||||
:path="dotData.lineBottomThree"
|
||||
/>
|
||||
</circle>
|
||||
|
||||
<circle
|
||||
cx="365"
|
||||
cy="320"
|
||||
r="8"
|
||||
style="stroke: none; fill: url(#RadialGradient1)"
|
||||
>
|
||||
<animateMotion
|
||||
repeatCount="indefinite"
|
||||
dur="4s"
|
||||
begin="0s"
|
||||
:path="dotData.lineBottomFour"
|
||||
/>
|
||||
</circle>
|
||||
|
||||
<circle
|
||||
cx="458"
|
||||
cy="320"
|
||||
r="8"
|
||||
style="stroke: none; fill: url(#RadialGradient1)"
|
||||
>
|
||||
<animateMotion
|
||||
repeatCount="indefinite"
|
||||
dur="4s"
|
||||
begin="0s"
|
||||
:path="dotData.lineBottomFive"
|
||||
/>
|
||||
</circle>
|
||||
|
||||
<circle
|
||||
cx="555"
|
||||
cy="320"
|
||||
r="8"
|
||||
style="stroke: none; fill: url(#RadialGradient1)"
|
||||
>
|
||||
<animateMotion
|
||||
repeatCount="indefinite"
|
||||
dur="4s"
|
||||
begin="0s"
|
||||
:path="dotData.lineBottomSix"
|
||||
/>
|
||||
</circle>
|
||||
|
||||
<circle
|
||||
cx="650"
|
||||
cy="320"
|
||||
r="8"
|
||||
style="stroke: none; fill: url(#RadialGradient1)"
|
||||
>
|
||||
<animateMotion
|
||||
repeatCount="indefinite"
|
||||
dur="4s"
|
||||
begin="0s"
|
||||
:path="dotData.lineBottomSeven"
|
||||
/>
|
||||
</circle>
|
||||
|
||||
<!-- top -->
|
||||
<circle
|
||||
cx="154"
|
||||
cy="60"
|
||||
r="8"
|
||||
style="stroke: none; fill: url(#RadialGradient1);cursor: pointer;"
|
||||
@click="lookDeviceDetail('seven-line-top-left')"
|
||||
/>
|
||||
|
||||
<circle
|
||||
cx="630"
|
||||
cy="60"
|
||||
r="8"
|
||||
style="stroke: none; fill: url(#RadialGradient1);cursor: pointer;"
|
||||
@click="lookDeviceDetail('seven-line-top-right')"
|
||||
/>
|
||||
|
||||
<circle
|
||||
cx="460"
|
||||
cy="100"
|
||||
r="8"
|
||||
style="stroke: none; fill: url(#RadialGradient1)"
|
||||
/>
|
||||
|
||||
<!-- bottom -->
|
||||
<circle
|
||||
cx="128"
|
||||
cy="320"
|
||||
r="8"
|
||||
style="stroke: none; fill: url(#RadialGradient1);cursor: pointer;"
|
||||
@click="lookDeviceDetail('seven-line-bottom-one')"
|
||||
/>
|
||||
<circle
|
||||
cx="210"
|
||||
cy="320"
|
||||
r="8"
|
||||
style="stroke: none; fill: url(#RadialGradient1);cursor: pointer;"
|
||||
@click="lookDeviceDetail('seven-line-bottom-two')"
|
||||
/>
|
||||
<circle
|
||||
cx="290"
|
||||
cy="320"
|
||||
r="8"
|
||||
style="stroke: none; fill: url(#RadialGradient1);cursor: pointer;"
|
||||
@click="lookDeviceDetail('seven-line-bottom-three')"
|
||||
/>
|
||||
<circle
|
||||
cx="365"
|
||||
cy="320"
|
||||
r="8"
|
||||
style="stroke: none; fill: url(#RadialGradient1);cursor: pointer;"
|
||||
@click="lookDeviceDetail('seven-line-bottom-four')"
|
||||
/>
|
||||
|
||||
<circle
|
||||
cx="458"
|
||||
cy="320"
|
||||
r="8"
|
||||
style="stroke: none; fill: url(#RadialGradient1);cursor: pointer;"
|
||||
@click="lookDeviceDetail('seven-line-bottom-five')"
|
||||
/>
|
||||
|
||||
<circle
|
||||
cx="555"
|
||||
cy="320"
|
||||
r="8"
|
||||
style="stroke: none; fill: url(#RadialGradient1);cursor: pointer;"
|
||||
@click="lookDeviceDetail('seven-line-bottom-six')"
|
||||
/>
|
||||
|
||||
<circle
|
||||
cx="650"
|
||||
cy="320"
|
||||
r="8"
|
||||
style="stroke: none; fill: url(#RadialGradient1);cursor: pointer;"
|
||||
@click="lookDeviceDetail('seven-line-bottom-seven')"
|
||||
/>
|
||||
|
||||
<!-- 图片和文字 -->
|
||||
|
||||
<!-- 市电 -->
|
||||
<image
|
||||
:xlink:href="gridImg"
|
||||
x="70"
|
||||
y="10"
|
||||
width="60"
|
||||
height="87"
|
||||
/>
|
||||
<text x="70" y="110" fill="#ffffff" font-size="14"> {{ $t("dashboard.grid") }}</text>
|
||||
|
||||
<!-- {{ $t("dashboard.load") }} -->
|
||||
<image
|
||||
:xlink:href="chargingPileImg"
|
||||
x="650"
|
||||
y="10"
|
||||
width="60"
|
||||
height="87"
|
||||
/>
|
||||
<text x="675" y="110" fill="#ffffff" font-size="14"> {{ $t("dashboard.load") }}</text>
|
||||
|
||||
<!-- 1#PCS -->
|
||||
<image
|
||||
:xlink:href="cabinetImg"
|
||||
x="100"
|
||||
y="330"
|
||||
width="50"
|
||||
height="50"
|
||||
style="cursor: pointer;"
|
||||
@click="lookDeviceDetail('seventh_pcs_1')"
|
||||
/>
|
||||
<text x="94" y="410" fill="#ffffff" font-size="14">{{ hiddenTextWord(`1#${$t("dashboard.cabinet")}`,8) }}</text>
|
||||
<!-- 2#PCS -->
|
||||
<image
|
||||
:xlink:href="cabinetImg"
|
||||
x="180"
|
||||
y="330"
|
||||
width="50"
|
||||
height="50"
|
||||
style="cursor: pointer;"
|
||||
@click="lookDeviceDetail('seventh_pcs_2')"
|
||||
/>
|
||||
<text x="173" y="410" fill="#ffffff" font-size="14">{{ hiddenTextWord(`2#${$t("dashboard.cabinet")}`,8) }}</text>
|
||||
|
||||
<!-- 3#PCS -->
|
||||
<image
|
||||
:xlink:href="cabinetImg"
|
||||
x="260"
|
||||
y="330"
|
||||
width="50"
|
||||
height="50"
|
||||
style="cursor: pointer;"
|
||||
@click="lookDeviceDetail('seventh_pcs_3')"
|
||||
/>
|
||||
<text x="255" y="410" fill="#ffffff" font-size="14">{{ hiddenTextWord(`3#${$t("dashboard.cabinet")}`,8) }}</text>
|
||||
|
||||
<!-- 4#PCS -->
|
||||
<image
|
||||
:xlink:href="cabinetImg"
|
||||
x="340"
|
||||
y="330"
|
||||
width="50"
|
||||
height="50"
|
||||
style="cursor: pointer;"
|
||||
@click="lookDeviceDetail('seventh_pcs_4')"
|
||||
/>
|
||||
<text x="335" y="410" fill="#ffffff" font-size="14">{{ hiddenTextWord(`4#${$t("dashboard.cabinet")}`,8) }}</text>
|
||||
|
||||
<!-- 5#PCS -->
|
||||
<image
|
||||
:xlink:href="cabinetImg"
|
||||
x="430"
|
||||
y="330"
|
||||
width="50"
|
||||
height="50"
|
||||
style="cursor: pointer;"
|
||||
@click="lookDeviceDetail('seventh_pcs_5')"
|
||||
/>
|
||||
<text x="425" y="410" fill="#ffffff" font-size="14">{{ hiddenTextWord(`5#${$t("dashboard.cabinet")}`,8) }}</text>
|
||||
|
||||
<!-- 6#PCS -->
|
||||
<image
|
||||
:xlink:href="cabinetImg"
|
||||
x="530"
|
||||
y="330"
|
||||
width="50"
|
||||
height="50"
|
||||
style="cursor: pointer;"
|
||||
@click="lookDeviceDetail('seventh_pcs_6')"
|
||||
/>
|
||||
<text x="525" y="410" fill="#ffffff" font-size="14">{{ hiddenTextWord(`6#${$t("dashboard.cabinet")}`,8) }}</text>
|
||||
|
||||
<image
|
||||
:xlink:href="cabinetImg"
|
||||
x="620"
|
||||
y="330"
|
||||
width="50"
|
||||
height="50"
|
||||
style="cursor: pointer;"
|
||||
@click="lookDeviceDetail('seventh_pcs_7')"
|
||||
/>
|
||||
<text x="620" y="410" fill="#ffffff" font-size="14">{{ hiddenTextWord(`7#${$t("dashboard.cabinet")}`,8) }}</text>
|
||||
|
||||
<!-- 变压器 -->
|
||||
<image
|
||||
:xlink:href="distributionCabinetImg"
|
||||
x="330"
|
||||
y="145"
|
||||
width="120"
|
||||
height="85"
|
||||
/>
|
||||
|
||||
<!-- {{ $t("dashboard.ammeter") }} -->
|
||||
<image
|
||||
:xlink:href="ammeterImg"
|
||||
x="455"
|
||||
y="80"
|
||||
width="80"
|
||||
height="40"
|
||||
style="cursor: pointer;"
|
||||
@click="lookDeviceDetail('seventh_ammeter_1')"
|
||||
/>
|
||||
<g v-for="(item,index) in ammeter_1" :key="item.id">
|
||||
<text x="435" :y="150 + ( 20 * index)" fill="#ffffff" font-size="14">
|
||||
{{ item.name }}
|
||||
</text>
|
||||
<text :x="countChineseAndEnglishCharacters(item.name,445)" :y="150 + ( 20 * index)" fill="#FFB800" font-size="14">
|
||||
{{ item.value }}
|
||||
</text>
|
||||
</g>
|
||||
|
||||
<!-- 左侧 -->
|
||||
<text x="10" y="440" fill="#ffffff" font-size="14">SOC(%)：</text>
|
||||
<text x="10" y="460" fill="#ffffff" font-size="14">SOH(%)：</text>
|
||||
<text x="10" y="480" fill="#ffffff" font-size="14">{{ $t("dashboard.workStatus") }}：</text>
|
||||
<text x="10" y="500" fill="#ffffff" font-size="14">{{ $t("dashboard.activePower") }}(kW)：</text>
|
||||
<!-- 1#PCS -->
|
||||
<text x="120" y="440" fill="#FFB800" font-size="14">{{ pcsData_1.length ? pcsData_1[0].value : '' }}</text>
|
||||
<text x="120" y="460" fill="#FFB800" font-size="14">{{ pcsData_1.length > 1 ? pcsData_1[1].value : '' }}</text>
|
||||
<text x="120" y="480" fill="#FFB800" font-size="14">{{ pcsData_1.length > 2 ? pcsData_1[2].value : '' }}</text>
|
||||
<text x="120" y="500" fill="#FFB800" font-size="14">{{ pcsData_1.length > 3 ? pcsData_1[3].value : '' }}</text>
|
||||
<!-- 2#PCS -->
|
||||
<text x="190" y="440" fill="#FFB800" font-size="14">{{ pcsData_2.length ? pcsData_2[0].value : '' }}</text>
|
||||
<text x="190" y="460" fill="#FFB800" font-size="14">{{ pcsData_2.length > 1 ? pcsData_2[1].value : '' }}</text>
|
||||
<text x="190" y="480" fill="#FFB800" font-size="14">{{ pcsData_2.length > 2 ? pcsData_2[2].value : '' }}</text>
|
||||
<text x="190" y="500" fill="#FFB800" font-size="14">{{ pcsData_2.length > 3 ? pcsData_2[3].value : '' }}</text>
|
||||
<!-- 3#PCS -->
|
||||
<text x="265" y="440" fill="#FFB800" font-size="14">{{ pcsData_3.length ? pcsData_3[0].value : '' }}</text>
|
||||
<text x="265" y="460" fill="#FFB800" font-size="14">{{ pcsData_3.length > 1 ? pcsData_3[1].value : '' }}</text>
|
||||
<text x="265" y="480" fill="#FFB800" font-size="14">{{ pcsData_3.length > 2 ? pcsData_3[2].value : '' }}</text>
|
||||
<text x="265" y="500" fill="#FFB800" font-size="14">{{ pcsData_3.length > 3 ? pcsData_3[3].value : '' }}</text>
|
||||
<!-- 4#PCS -->
|
||||
<text x="350" y="440" fill="#FFB800" font-size="14">{{ pcsData_4.length ? pcsData_4[0].value : '' }}</text>
|
||||
<text x="350" y="460" fill="#FFB800" font-size="14">{{ pcsData_4.length > 1 ? pcsData_4[1].value : '' }}</text>
|
||||
<text x="350" y="480" fill="#FFB800" font-size="14">{{ pcsData_4.length > 2 ? pcsData_4[2].value : '' }}</text>
|
||||
<text x="350" y="500" fill="#FFB800" font-size="14">{{ pcsData_4.length > 3 ? pcsData_4[3].value : '' }}</text>
|
||||
<!-- 5#PCS -->
|
||||
<text x="440" y="440" fill="#FFB800" font-size="14">{{ pcsData_5.length ? pcsData_5[0].value : '' }}</text>
|
||||
<text x="440" y="460" fill="#FFB800" font-size="14">{{ pcsData_5.length > 1 ? pcsData_5[1].value : '' }}</text>
|
||||
<text x="440" y="480" fill="#FFB800" font-size="14">{{ pcsData_5.length > 2 ? pcsData_5[2].value : '' }}</text>
|
||||
<text x="440" y="500" fill="#FFB800" font-size="14">{{ pcsData_5.length > 3 ? pcsData_5[3].value : '' }}</text>
|
||||
<!-- 6#PCS -->
|
||||
<text x="535" y="440" fill="#FFB800" font-size="14">{{ pcsData_6.length ? pcsData_6[0].value : '' }}</text>
|
||||
<text x="535" y="460" fill="#FFB800" font-size="14">{{ pcsData_6.length > 1 ? pcsData_6[1].value : '' }}</text>
|
||||
<text x="535" y="480" fill="#FFB800" font-size="14">{{ pcsData_6.length > 2 ? pcsData_6[2].value : '' }}</text>
|
||||
<text x="535" y="500" fill="#FFB800" font-size="14">{{ pcsData_6.length > 3 ? pcsData_6[3].value : '' }}</text>
|
||||
<!-- 7#PCS -->
|
||||
<text x="630" y="440" fill="#FFB800" font-size="14">{{ pcsData_7.length ? pcsData_7[0].value : '' }}</text>
|
||||
<text x="630" y="460" fill="#FFB800" font-size="14">{{ pcsData_7.length > 1 ? pcsData_7[1].value : '' }}</text>
|
||||
<text x="630" y="480" fill="#FFB800" font-size="14">{{ pcsData_7.length > 2 ? pcsData_7[2].value : '' }}</text>
|
||||
<text x="630" y="500" fill="#FFB800" font-size="14">{{ pcsData_7.length > 3 ? pcsData_7[3].value : '' }}</text>
|
||||
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<dispositionPointDialog :visible="show_point_dispostion" :page-location="pageLocation" @close="closePoint" @getData="getDynamicPointData" />
|
||||
|
||||
</ItemBox>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import gridImg from '@/assets/images/wxjd/grid.png'
|
||||
import ammeterImg from '@/assets/images/wxjd/ammeter.png'
|
||||
import cabinetImg from '@/assets/images/wxjd/pcs-energy.png'
|
||||
import chargingPileImg from '@/assets/images/home-office.png'
|
||||
import distributionCabinetImg from '@/assets/images/wxjd/guiImg.png'
|
||||
import frameImg from '@/assets/images/wxjd/frame.png'
|
||||
import cangImg from '@/assets/images/home-cang.png'
|
||||
import { DynamicConfigPoint } from '@/api/home-page/index'
|
||||
import { hiddenTextWord } from '@/utils/index'
|
||||
export default {
|
||||
name: 'Index',
|
||||
props: {
|
||||
stationType: {
|
||||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
stationId: {
|
||||
type: Number,
|
||||
default: 0
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
hiddenTextWord,
|
||||
gridImg,
|
||||
ammeterImg,
|
||||
cabinetImg,
|
||||
chargingPileImg,
|
||||
distributionCabinetImg,
|
||||
cangImg,
|
||||
frameImg,
|
||||
|
||||
partList: [
|
||||
{ soc: 0, soh: 0, activePowerPCS: 0.0, reactivePowerPCS: 0.0 },
|
||||
{ soc: 0, soh: 0, activePowerPCS: 0.0, reactivePowerPCS: 0.0 },
|
||||
{ soc: 0, soh: 0, activePowerPCS: 0.0, reactivePowerPCS: 0.0 },
|
||||
{ soc: 0, soh: 0, activePowerPCS: 0.0, reactivePowerPCS: 0.0 },
|
||||
{ soc: 0, soh: 0, activePowerPCS: 0.0, reactivePowerPCS: 0.0 }
|
||||
],
|
||||
|
||||
dotData: {
|
||||
lineTopLeft: 'M 0,0 0,0',
|
||||
lineTopRight: 'M 0,0 0,0',
|
||||
lineCenter: 'M 0,0 0,0',
|
||||
lineBottomOne: 'M 0,0 0,0',
|
||||
lineBottomTwo: 'M 0,0 0,0',
|
||||
lineBottomThree: 'M 0,0 0,0',
|
||||
lineBottomFour: 'M 0,0 0,0',
|
||||
lineBottomFive: 'M 0,0 0,0',
|
||||
lineBottomSix: 'M 0,0 0,0',
|
||||
lineBottomSeven: 'M 0,0 0,0'
|
||||
},
|
||||
loading: false,
|
||||
activePowerTotal: {},
|
||||
permissionId: null,
|
||||
show_point_dispostion: false,
|
||||
pageLocation: null,
|
||||
pcsData_1: [],
|
||||
pcsData_2: [],
|
||||
pcsData_3: [],
|
||||
pcsData_4: [],
|
||||
pcsData_5: [],
|
||||
pcsData_6: [],
|
||||
pcsData_7: [],
|
||||
pcsData_8: [],
|
||||
pcsData_9: [],
|
||||
pcsData_10: [],
|
||||
ammeter_1: [],
|
||||
ammeter_2: [],
|
||||
ammeter_3: [],
|
||||
ammeter_4: [],
|
||||
break_1: []
|
||||
}
|
||||
},
|
||||
computed: {},
|
||||
watch: {},
|
||||
created() {
|
||||
setTimeout(() => {
|
||||
if (this.$store.getters.menuList.length) {
|
||||
this.permissionId = this.$store.getters.menuList.find(item => {
|
||||
return item.url === this.$route.path
|
||||
}).id
|
||||
}
|
||||
}, 300)
|
||||
},
|
||||
mounted() {},
|
||||
methods: {
|
||||
oScale() {
|
||||
this.$emit('scale')
|
||||
},
|
||||
getBreakColor(val) {
|
||||
if (+val === 1) {
|
||||
return '#00FF1A'
|
||||
} else {
|
||||
return '#FF0000'
|
||||
}
|
||||
},
|
||||
countChineseAndEnglishCharacters(str, x) {
|
||||
var chineseCount = str.match(/[\u4e00-\u9fa5]/g) ? str.match(/[\u4e00-\u9fa5]/g).length : 0
|
||||
var englishCount = str.match(/[a-zA-Z]/g) ? str.match(/[a-zA-Z]/g).length : 0
|
||||
var otherCount = str.length - chineseCount - englishCount
|
||||
const obj = { otherCount: otherCount, chineseCount: chineseCount, englishCount: englishCount }
|
||||
return (obj.englishCount * 8) + (obj.chineseCount * 16) + (obj.otherCount * 6) + x
|
||||
},
|
||||
lookDeviceDetail(val) { // 查看设备详情
|
||||
this.pageLocation = val
|
||||
this.show_point_dispostion = true
|
||||
},
|
||||
closePoint() {
|
||||
this.show_point_dispostion = false
|
||||
},
|
||||
|
||||
getDynamicPointData() {
|
||||
this.getData()
|
||||
},
|
||||
handleSetting() {
|
||||
this.$emit('handleSetting')
|
||||
},
|
||||
toScale() {
|
||||
this.$emit('toScale')
|
||||
},
|
||||
async getpoint() {
|
||||
await DynamicConfigPoint({
|
||||
pageLocation: this.pageLocation,
|
||||
permissionId: this.permissionId,
|
||||
stationId: this.stationId
|
||||
})
|
||||
},
|
||||
async getData() {
|
||||
this.getPcsData()
|
||||
},
|
||||
async getPcsData() {
|
||||
this.loading = true
|
||||
try {
|
||||
const res = await DynamicConfigPoint({
|
||||
permissionId: this.permissionId,
|
||||
stationId: this.stationId })
|
||||
this.pcsData_1 = []
|
||||
this.pcsData_2 = []
|
||||
this.pcsData_3 = []
|
||||
this.pcsData_4 = []
|
||||
this.pcsData_5 = []
|
||||
this.pcsData_6 = []
|
||||
this.pcsData_7 = []
|
||||
this.ammeter_1 = []
|
||||
this.dotData = {
|
||||
lineTopLeft: 'M 0,0 0,0',
|
||||
lineTopRight: 'M 0,0 0,0',
|
||||
lineCenter: 'M 0,0 0,0',
|
||||
lineBottomOne: 'M 0,0 0,0',
|
||||
lineBottomTwo: 'M 0,0 0,0',
|
||||
lineBottomThree: 'M 0,0 0,0',
|
||||
lineBottomFour: 'M 0,0 0,0',
|
||||
lineBottomFive: 'M 0,0 0,0',
|
||||
lineBottomSix: 'M 0,0 0,0',
|
||||
lineBottomSeven: 'M 0,0 0,0'
|
||||
}
|
||||
if (res.data.length) {
|
||||
res.data.forEach((item) => {
|
||||
if (item.pageLocation === 'seventh_pcs_1') {
|
||||
this.pcsData_1.push(item)
|
||||
} else if (item.pageLocation === 'seventh_pcs_2') {
|
||||
this.pcsData_2.push(item)
|
||||
} else if (item.pageLocation === 'seventh_pcs_3') {
|
||||
this.pcsData_3.push(item)
|
||||
} else if (item.pageLocation === 'seventh_pcs_4') {
|
||||
this.pcsData_4.push(item)
|
||||
} else if (item.pageLocation === 'seventh_pcs_5') {
|
||||
this.pcsData_5.push(item)
|
||||
} else if (item.pageLocation === 'seventh_pcs_6') {
|
||||
this.pcsData_6.push(item)
|
||||
} else if (item.pageLocation === 'seventh_pcs_7') {
|
||||
this.pcsData_7.push(item)
|
||||
} else if (item.pageLocation === 'seventh_ammeter_1') {
|
||||
this.ammeter_1.push(item)
|
||||
} else if (item.pageLocation === 'seven-line-top-left') {
|
||||
if (+item.value > 0) {
|
||||
this.dotData.lineTopLeft = 'M 238,0 0,0'
|
||||
} else if (+item.value < 0) {
|
||||
this.dotData.lineTopLeft = 'M 0,0 238,0 '
|
||||
} else {
|
||||
this.dotData.lineTopLeft = 'M 0,0 0,0'
|
||||
}
|
||||
} else if (item.pageLocation === 'seven-line-top-right') {
|
||||
if (+item.value > 0) {
|
||||
this.dotData.lineTopRight = 'M 0,0 -230,0'
|
||||
} else if (+item.value < 0) {
|
||||
this.dotData.lineTopRight = 'M -230,0 0,0 '
|
||||
} else {
|
||||
this.dotData.lineTopRight = 'M 0,0 0,0'
|
||||
}
|
||||
} else if (item.pageLocation === 'seven-line-bottom-one') {
|
||||
if (+item.value > 0) {
|
||||
this.dotData.lineBottomOne = 'M 258,-260, 258, 0, 0 ,0'
|
||||
} else if (+item.value < 0) {
|
||||
this.dotData.lineBottomOne = 'M 0 ,0 258, 0, 258,-260 '
|
||||
} else {
|
||||
this.dotData.lineBottomOne = 'M 0,0 0,0'
|
||||
}
|
||||
} else if (item.pageLocation === 'seven-line-bottom-two') {
|
||||
if (+item.value > 0) {
|
||||
this.dotData.lineBottomTwo = 'M 176,-260, 176, 0, 0 ,0'
|
||||
} else if (+item.value < 0) {
|
||||
this.dotData.lineBottomTwo = 'M 0 ,0 176, 0, 176,-260'
|
||||
} else {
|
||||
this.dotData.lineBottomTwo = 'M 0,0 0,0'
|
||||
}
|
||||
} else if (item.pageLocation === 'seven-line-bottom-three') {
|
||||
if (+item.value > 0) {
|
||||
this.dotData.lineBottomThree = 'M 96,-260, 96, 0, 0 ,0'
|
||||
} else if (+item.value < 0) {
|
||||
this.dotData.lineBottomThree = 'M 0 ,0 96, 0, 96,-260'
|
||||
} else {
|
||||
this.dotData.lineBottomThree = 'M 0,0 0,0'
|
||||
}
|
||||
} else if (item.pageLocation === 'seven-line-bottom-four') {
|
||||
if (+item.value > 0) {
|
||||
this.dotData.lineBottomFour = 'M 21,-260, 21, 0, 0 ,0'
|
||||
} else if (+item.value < 0) {
|
||||
this.dotData.lineBottomFour = 'M 0 ,0 21, 0, 21,-260 '
|
||||
} else {
|
||||
this.dotData.lineBottomFour = 'M 0,0 0,0'
|
||||
}
|
||||
} else if (item.pageLocation === 'seven-line-bottom-five') {
|
||||
if (+item.value > 0) {
|
||||
this.dotData.lineBottomFive = 'M -72,-260,-72,0 0,0'
|
||||
} else if (+item.value < 0) {
|
||||
this.dotData.lineBottomFive = 'M 0,0 -72,0 -72,-260'
|
||||
} else {
|
||||
this.dotData.lineBottomFive = 'M 0,0 0,0'
|
||||
}
|
||||
} else if (item.pageLocation === 'seven-line-bottom-six') {
|
||||
if (+item.value > 0) {
|
||||
this.dotData.lineBottomSix = 'M -169,-260,-169,0 0,0'
|
||||
} else if (+item.value < 0) {
|
||||
this.dotData.lineBottomSix = 'M 0,0 -169,0 -169,-260 '
|
||||
} else {
|
||||
this.dotData.lineBottomSix = 'M 0,0 0,0'
|
||||
}
|
||||
} else if (item.pageLocation === 'seven-line-bottom-seven') {
|
||||
if (+item.value > 0) {
|
||||
this.dotData.lineBottomSeven = 'M -264,-260,-264,0 0,0'
|
||||
} else if (+item.value < 0) {
|
||||
this.dotData.lineBottomSeven = 'M 0,0 -264,0 -264,-260'
|
||||
} else {
|
||||
this.dotData.lineBottomSeven = 'M 0,0 0,0'
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
} catch (error) {
|
||||
// console.log(error);
|
||||
} finally {
|
||||
this.loading = false
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.center-box {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
@mixin move-round($duration, $delay) {
|
||||
fill: none;
|
||||
stroke-width: 5;
|
||||
stroke-linejoin: round;
|
||||
stroke-linecap: round;
|
||||
stroke-dasharray: 3, 900;
|
||||
stroke-dashoffset: 0;
|
||||
animation: lineMove $duration $delay cubic-bezier(0, 0, 0.74, 0.74) infinite;
|
||||
}
|
||||
|
||||
@keyframes lineMove {
|
||||
0% {
|
||||
stroke-dashoffset: -850;
|
||||
}
|
||||
100% {
|
||||
stroke-dashoffset: -0;
|
||||
}
|
||||
}
|
||||
.g-rect-fill-two {
|
||||
@include move-round(3.5s, 1s);
|
||||
}
|
||||
</style>
|
||||
781
src/views/dashboardtest/components/top-center/sixth.vue
Normal file
781
src/views/dashboardtest/components/top-center/sixth.vue
Normal file
@ -0,0 +1,781 @@
|
||||
<template>
|
||||
<ItemBox :title="$t('dashboard.stationTopo')" style="min-height: 560px">
|
||||
<div ref="svgLine" class="center-box">
|
||||
<div v-loading="loading">
|
||||
<svg
|
||||
version="1.1"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||
xml:space="preserve"
|
||||
class="circle-load-rect-svg"
|
||||
viewBox="0 0 800 500"
|
||||
>
|
||||
<defs>
|
||||
<defs>
|
||||
<radialGradient id="RadialGradient1">
|
||||
<stop offset="0%" stop-color="#fff" />
|
||||
<stop offset="30%" stop-color="#0171c1" />
|
||||
<stop offset="50%" stop-color="#035088" />
|
||||
<stop offset="100%" stop-color="#02395a" />
|
||||
</radialGradient>
|
||||
</defs>
|
||||
<marker
|
||||
id="markerCircle"
|
||||
markerWidth="15"
|
||||
markerHeight="15"
|
||||
refX="5"
|
||||
refY="5"
|
||||
>
|
||||
<circle
|
||||
cx="5"
|
||||
cy="5"
|
||||
r="5"
|
||||
style="stroke: none; fill: url(#RadialGradient1)"
|
||||
/>
|
||||
</marker>
|
||||
|
||||
<marker
|
||||
id="markerArrow"
|
||||
markerWidth="13"
|
||||
markerHeight="13"
|
||||
refX="2"
|
||||
refY="6"
|
||||
orient="auto"
|
||||
>
|
||||
<path d="M2,2 L2,11 L10,6 L2,2" style="fill: black" />
|
||||
</marker>
|
||||
</defs>
|
||||
<!-- //线条 -->
|
||||
<!-- top -->
|
||||
<polyline
|
||||
points="154,60 630,60"
|
||||
fill="none"
|
||||
class="g-rect-path"
|
||||
stroke="#0094FF"
|
||||
stroke-dasharray="3 3"
|
||||
/>
|
||||
<!-- center -->
|
||||
<polyline
|
||||
points="385,60 385,320"
|
||||
fill="none"
|
||||
class="g-rect-path"
|
||||
stroke="#0094FF"
|
||||
stroke-dasharray="3 3"
|
||||
/>
|
||||
|
||||
<polyline
|
||||
points="385,100 460,100"
|
||||
fill="none"
|
||||
class="g-rect-path"
|
||||
stroke="#0094FF"
|
||||
stroke-dasharray="3 3"
|
||||
/>
|
||||
|
||||
<!-- bottom -->
|
||||
<polyline
|
||||
points="124,320 655,320"
|
||||
fill="none"
|
||||
class="g-rect-path"
|
||||
stroke="#0094FF"
|
||||
stroke-dasharray="3 3"
|
||||
/>
|
||||
|
||||
<!-- 动点 -->
|
||||
<circle
|
||||
cx="154"
|
||||
cy="60"
|
||||
r="8"
|
||||
style="stroke: none; fill: url(#RadialGradient1)"
|
||||
>
|
||||
<animateMotion
|
||||
repeatCount="indefinite"
|
||||
dur="4s"
|
||||
begin="0s"
|
||||
:path="dotData.lineTopLeft"
|
||||
/>
|
||||
</circle>
|
||||
|
||||
<circle
|
||||
cx="630"
|
||||
cy="60"
|
||||
r="8"
|
||||
style="stroke: none; fill: url(#RadialGradient1)"
|
||||
>
|
||||
<animateMotion
|
||||
repeatCount="indefinite"
|
||||
dur="4s"
|
||||
begin="0s"
|
||||
:path="dotData.lineTopRight"
|
||||
/>
|
||||
</circle>
|
||||
|
||||
<circle
|
||||
cx="128"
|
||||
cy="320"
|
||||
r="8"
|
||||
style="stroke: none; fill: url(#RadialGradient1)"
|
||||
>
|
||||
<animateMotion
|
||||
repeatCount="indefinite"
|
||||
dur="4s"
|
||||
begin="0s"
|
||||
:path="dotData.lineBottomOne"
|
||||
/>
|
||||
</circle>
|
||||
|
||||
<circle
|
||||
cx="240"
|
||||
cy="320"
|
||||
r="8"
|
||||
style="stroke: none; fill: url(#RadialGradient1)"
|
||||
>
|
||||
<animateMotion
|
||||
repeatCount="indefinite"
|
||||
dur="4s"
|
||||
begin="0s"
|
||||
:path="dotData.lineBottomTwo"
|
||||
/>
|
||||
</circle>
|
||||
|
||||
<circle
|
||||
cx="348"
|
||||
cy="320"
|
||||
r="8"
|
||||
style="stroke: none; fill: url(#RadialGradient1)"
|
||||
>
|
||||
<animateMotion
|
||||
repeatCount="indefinite"
|
||||
dur="4s"
|
||||
begin="0s"
|
||||
:path="dotData.lineBottomThree"
|
||||
/>
|
||||
</circle>
|
||||
|
||||
<circle
|
||||
cx="426"
|
||||
cy="320"
|
||||
r="8"
|
||||
style="stroke: none; fill: url(#RadialGradient1)"
|
||||
>
|
||||
<animateMotion
|
||||
repeatCount="indefinite"
|
||||
dur="4s"
|
||||
begin="0s"
|
||||
:path="dotData.lineBottomFour"
|
||||
/>
|
||||
</circle>
|
||||
|
||||
<circle
|
||||
cx="540"
|
||||
cy="320"
|
||||
r="8"
|
||||
style="stroke: none; fill: url(#RadialGradient1)"
|
||||
>
|
||||
<animateMotion
|
||||
repeatCount="indefinite"
|
||||
dur="4s"
|
||||
begin="0s"
|
||||
:path="dotData.lineBottomFive"
|
||||
/>
|
||||
</circle>
|
||||
|
||||
<circle
|
||||
cx="650"
|
||||
cy="320"
|
||||
r="8"
|
||||
style="stroke: none; fill: url(#RadialGradient1)"
|
||||
>
|
||||
<animateMotion
|
||||
repeatCount="indefinite"
|
||||
dur="4s"
|
||||
begin="0s"
|
||||
:path="dotData.lineBottomSix"
|
||||
/>
|
||||
</circle>
|
||||
|
||||
<!-- top -->
|
||||
<circle
|
||||
cx="154"
|
||||
cy="60"
|
||||
r="8"
|
||||
style="stroke: none; fill: url(#RadialGradient1);cursor: pointer;"
|
||||
@click="lookDeviceDetail('six-line-top-left')"
|
||||
/>
|
||||
<circle
|
||||
cx="630"
|
||||
cy="60"
|
||||
r="8"
|
||||
style="stroke: none; fill: url(#RadialGradient1);cursor: pointer;"
|
||||
@click="lookDeviceDetail('six-line-top-right')"
|
||||
/>
|
||||
|
||||
<circle
|
||||
cx="460"
|
||||
cy="100"
|
||||
r="8"
|
||||
style="stroke: none; fill: url(#RadialGradient1)"
|
||||
/>
|
||||
|
||||
<!-- bottom -->
|
||||
<circle
|
||||
cx="128"
|
||||
cy="320"
|
||||
r="8"
|
||||
style="stroke: none; fill: url(#RadialGradient1);cursor: pointer;"
|
||||
@click="lookDeviceDetail('six-line-bottom-one')"
|
||||
/>
|
||||
<circle
|
||||
cx="240"
|
||||
cy="320"
|
||||
r="8"
|
||||
style="stroke: none; fill: url(#RadialGradient1);cursor: pointer;"
|
||||
@click="lookDeviceDetail('six-line-bottom-two')"
|
||||
/>
|
||||
<circle
|
||||
cx="348"
|
||||
cy="320"
|
||||
r="8"
|
||||
style="stroke: none; fill: url(#RadialGradient1);cursor: pointer;"
|
||||
@click="lookDeviceDetail('six-line-bottom-three')"
|
||||
/>
|
||||
<circle
|
||||
cx="426"
|
||||
cy="320"
|
||||
r="8"
|
||||
style="stroke: none; fill: url(#RadialGradient1);cursor: pointer;"
|
||||
@click="lookDeviceDetail('six-line-bottom-four')"
|
||||
/>
|
||||
|
||||
<circle
|
||||
cx="540"
|
||||
cy="320"
|
||||
r="8"
|
||||
style="stroke: none; fill: url(#RadialGradient1);cursor: pointer;"
|
||||
@click="lookDeviceDetail('six-line-bottom-five')"
|
||||
/>
|
||||
|
||||
<circle
|
||||
cx="650"
|
||||
cy="320"
|
||||
r="8"
|
||||
style="stroke: none; fill: url(#RadialGradient1);cursor: pointer;"
|
||||
@click="lookDeviceDetail('six-line-bottom-six')"
|
||||
/>
|
||||
|
||||
<!-- 图片和文字 -->
|
||||
|
||||
<!-- 市电 -->
|
||||
<image :xlink:href="configData.grid" x="70" y="10" width="60" height="87" />
|
||||
<text x="70" y="110" fill="#ffffff" font-size="14"> {{ $t("dashboard.grid") }}</text>
|
||||
|
||||
<!-- {{ $t("dashboard.load") }} -->
|
||||
<image
|
||||
:xlink:href="configData.house"
|
||||
x="650"
|
||||
y="10"
|
||||
width="60"
|
||||
height="87"
|
||||
/>
|
||||
<text x="675" y="110" fill="#ffffff" font-size="14"> {{ $t("dashboard.load") }}</text>
|
||||
|
||||
<!-- 1#PCS -->
|
||||
<image
|
||||
:xlink:href="configData.pcs2"
|
||||
x="100"
|
||||
y="330"
|
||||
width="50"
|
||||
height="50"
|
||||
style="cursor: pointer"
|
||||
@click="lookDeviceDetail('sixth_pcs_1')"
|
||||
/>
|
||||
<text x="96" y="410" fill="#ffffff" font-size="14"> {{ hiddenTextWord(`1#${$t("dashboard.cabinet")}`,10) }}</text>
|
||||
<!-- 2#PCS -->
|
||||
<image
|
||||
:xlink:href="configData.pcs2"
|
||||
x="210"
|
||||
y="330"
|
||||
width="50"
|
||||
height="50"
|
||||
style="cursor: pointer"
|
||||
@click="lookDeviceDetail('sixth_pcs_2')"
|
||||
/>
|
||||
<text x="210" y="410" fill="#ffffff" font-size="14"> {{ hiddenTextWord(`2#${$t("dashboard.cabinet")}`,10) }}</text>
|
||||
|
||||
<!-- 3#PCS -->
|
||||
<image
|
||||
:xlink:href="configData.pcs2"
|
||||
x="320"
|
||||
y="330"
|
||||
width="50"
|
||||
height="50"
|
||||
style="cursor: pointer"
|
||||
@click="lookDeviceDetail('sixth_pcs_3')"
|
||||
/>
|
||||
<text x="314" y="410" fill="#ffffff" font-size="14"> {{ hiddenTextWord(`3#${$t("dashboard.cabinet")}`,10) }}</text>
|
||||
|
||||
<image
|
||||
:xlink:href="configData.pcs2"
|
||||
x="400"
|
||||
y="330"
|
||||
width="50"
|
||||
height="50"
|
||||
style="cursor: pointer"
|
||||
@click="lookDeviceDetail('sixth_pcs_4')"
|
||||
/>
|
||||
<text x="395" y="410" fill="#ffffff" font-size="14"> {{ hiddenTextWord(`4#${$t("dashboard.cabinet")}`,10) }}</text>
|
||||
|
||||
<image
|
||||
:xlink:href="configData.pcs2"
|
||||
x="510"
|
||||
y="330"
|
||||
width="50"
|
||||
height="50"
|
||||
style="cursor: pointer"
|
||||
@click="lookDeviceDetail('sixth_pcs_5')"
|
||||
/>
|
||||
<text x="505" y="410" fill="#ffffff" font-size="14"> {{ hiddenTextWord(`5#${$t("dashboard.cabinet")}`,10) }}</text>
|
||||
|
||||
<image
|
||||
:xlink:href="configData.pcs2"
|
||||
x="620"
|
||||
y="330"
|
||||
width="50"
|
||||
height="50"
|
||||
style="cursor: pointer"
|
||||
@click="lookDeviceDetail('sixth_pcs_6')"
|
||||
/>
|
||||
<text x="620" y="410" fill="#ffffff" font-size="14"> {{ hiddenTextWord(`6#${$t("dashboard.cabinet")}`,10) }}</text>
|
||||
|
||||
<!-- 变压器 -->
|
||||
<image
|
||||
:xlink:href="configData.gui"
|
||||
x="330"
|
||||
y="145"
|
||||
width="120"
|
||||
height="85"
|
||||
/>
|
||||
|
||||
<!-- {{ $t("dashboard.ammeter") }} -->
|
||||
<image
|
||||
:xlink:href="ammeterImg"
|
||||
x="455"
|
||||
y="80"
|
||||
width="80"
|
||||
height="40"
|
||||
style="cursor: pointer"
|
||||
@click="lookDeviceDetail('sixth_ammeter_1')"
|
||||
/>
|
||||
<g v-for="(item, index) in ammeter_1" :key="item.id">
|
||||
<text x="435" :y="150 + 20 * index" fill="#ffffff" font-size="14">
|
||||
{{ item.name }}
|
||||
</text>
|
||||
<text
|
||||
:x="countChineseAndEnglishCharacters(item.name, 445)"
|
||||
:y="150 + 20 * index"
|
||||
fill="#FFB800"
|
||||
font-size="14"
|
||||
>
|
||||
{{ item.value }}
|
||||
</text>
|
||||
</g>
|
||||
<g transform="translate(0,-10)">
|
||||
<!-- 左侧 -->
|
||||
<text x="10" y="440" fill="#ffffff" font-size="14">SOC(%)：</text>
|
||||
<text x="10" y="460" fill="#ffffff" font-size="14">SOH(%)：</text>
|
||||
<text x="10" y="480" fill="#ffffff" font-size="14">{{ $t("dashboard.workStatus") }}：</text>
|
||||
<text x="10" y="500" fill="#ffffff" font-size="14">
|
||||
{{ $t("dashboard.activePower") }}(kW)：
|
||||
</text>
|
||||
<!-- 1#PCS -->
|
||||
<text x="120" y="440" fill="#FFB800" font-size="14">
|
||||
{{ pcsData_1.length ? pcsData_1[0].value : "" }}
|
||||
</text>
|
||||
<text x="120" y="460" fill="#FFB800" font-size="14">
|
||||
{{ pcsData_1.length > 1 ? pcsData_1[1].value : "" }}
|
||||
</text>
|
||||
<text x="120" y="480" fill="#FFB800" font-size="14">
|
||||
{{ pcsData_1.length > 2 ? pcsData_1[2].value : "" }}
|
||||
</text>
|
||||
<text x="120" y="500" fill="#FFB800" font-size="14">
|
||||
{{ pcsData_1.length > 3 ? pcsData_1[3].value : "" }}
|
||||
</text>
|
||||
<!-- 2#PCS -->
|
||||
<text x="230" y="440" fill="#FFB800" font-size="14">
|
||||
{{ pcsData_2.length ? pcsData_2[0].value : "" }}
|
||||
</text>
|
||||
<text x="230" y="460" fill="#FFB800" font-size="14">
|
||||
{{ pcsData_2.length > 1 ? pcsData_2[1].value : "" }}
|
||||
</text>
|
||||
<text x="230" y="480" fill="#FFB800" font-size="14">
|
||||
{{ pcsData_2.length > 2 ? pcsData_2[2].value : "" }}
|
||||
</text>
|
||||
<text x="230" y="500" fill="#FFB800" font-size="14">
|
||||
{{ pcsData_2.length > 3 ? pcsData_2[3].value : "" }}
|
||||
</text>
|
||||
<!-- 3#PCS -->
|
||||
<text x="340" y="440" fill="#FFB800" font-size="14">
|
||||
{{ pcsData_3.length ? pcsData_3[0].value : "" }}
|
||||
</text>
|
||||
<text x="340" y="460" fill="#FFB800" font-size="14">
|
||||
{{ pcsData_3.length > 1 ? pcsData_3[1].value : "" }}
|
||||
</text>
|
||||
<text x="340" y="480" fill="#FFB800" font-size="14">
|
||||
{{ pcsData_3.length > 2 ? pcsData_3[2].value : "" }}
|
||||
</text>
|
||||
<text x="340" y="500" fill="#FFB800" font-size="14">
|
||||
{{ pcsData_3.length > 3 ? pcsData_3[3].value : "" }}
|
||||
</text>
|
||||
<!-- 4#PCS -->
|
||||
<text x="420" y="440" fill="#FFB800" font-size="14">
|
||||
{{ pcsData_4.length ? pcsData_4[0].value : "" }}
|
||||
</text>
|
||||
<text x="420" y="460" fill="#FFB800" font-size="14">
|
||||
{{ pcsData_4.length > 1 ? pcsData_4[1].value : "" }}
|
||||
</text>
|
||||
<text x="420" y="480" fill="#FFB800" font-size="14">
|
||||
{{ pcsData_4.length > 2 ? pcsData_4[2].value : "" }}
|
||||
</text>
|
||||
<text x="420" y="500" fill="#FFB800" font-size="14">
|
||||
{{ pcsData_4.length > 3 ? pcsData_4[3].value : "" }}
|
||||
</text>
|
||||
<!-- 5#PCS -->
|
||||
<text x="530" y="440" fill="#FFB800" font-size="14">
|
||||
{{ pcsData_5.length ? pcsData_5[0].value : "" }}
|
||||
</text>
|
||||
<text x="530" y="460" fill="#FFB800" font-size="14">
|
||||
{{ pcsData_5.length > 1 ? pcsData_5[1].value : "" }}
|
||||
</text>
|
||||
<text x="530" y="480" fill="#FFB800" font-size="14">
|
||||
{{ pcsData_5.length > 2 ? pcsData_5[2].value : "" }}
|
||||
</text>
|
||||
<text x="530" y="500" fill="#FFB800" font-size="14">
|
||||
{{ pcsData_5.length > 3 ? pcsData_5[3].value : "" }}
|
||||
</text>
|
||||
<!-- 6#PCS -->
|
||||
<text x="645" y="440" fill="#FFB800" font-size="14">
|
||||
{{ pcsData_6.length ? pcsData_6[0].value : "" }}
|
||||
</text>
|
||||
<text x="645" y="460" fill="#FFB800" font-size="14">
|
||||
{{ pcsData_6.length > 1 ? pcsData_6[1].value : "" }}
|
||||
</text>
|
||||
<text x="645" y="480" fill="#FFB800" font-size="14">
|
||||
{{ pcsData_6.length > 2 ? pcsData_6[2].value : "" }}
|
||||
</text>
|
||||
<text x="645" y="500" fill="#FFB800" font-size="14">
|
||||
{{ pcsData_6.length > 3 ? pcsData_6[3].value : "" }}
|
||||
</text>
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<DispositionPointData
|
||||
:disposition-show="show_point_dispostion"
|
||||
:page-location="pageLocation"
|
||||
@close="closePoint"
|
||||
@getData="getDynamicPointData"
|
||||
/>
|
||||
</ItemBox>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import gridImg from '@/assets/images/wxjd/grid.png'
|
||||
import ammeterImg from '@/assets/images/wxjd/ammeter.png'
|
||||
import cabinetImg from '@/assets/images/wxjd/pcs-energy.png'
|
||||
import chargingPileImg from '@/assets/images/home-office.png'
|
||||
import distributionCabinetImg from '@/assets/images/wxjd/guiImg.png'
|
||||
import frameImg from '@/assets/images/wxjd/frame.png'
|
||||
import cangImg from '@/assets/images/home-cang.png'
|
||||
import { DynamicConfigPoint } from '@/api/home-page/index'
|
||||
import { hiddenTextWord } from '@/utils/index'
|
||||
import config from './config'
|
||||
import { changeTheme } from '@/utils/index'
|
||||
export default {
|
||||
name: 'Index',
|
||||
props: {
|
||||
stationType: {
|
||||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
stationId: {
|
||||
type: Number,
|
||||
default: 0
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
gridImg,
|
||||
ammeterImg,
|
||||
cabinetImg,
|
||||
chargingPileImg,
|
||||
distributionCabinetImg,
|
||||
cangImg,
|
||||
frameImg,
|
||||
hiddenTextWord,
|
||||
configData: {},
|
||||
partList: [
|
||||
{ soc: 0, soh: 0, activePowerPCS: 0.0, reactivePowerPCS: 0.0 },
|
||||
{ soc: 0, soh: 0, activePowerPCS: 0.0, reactivePowerPCS: 0.0 },
|
||||
{ soc: 0, soh: 0, activePowerPCS: 0.0, reactivePowerPCS: 0.0 },
|
||||
{ soc: 0, soh: 0, activePowerPCS: 0.0, reactivePowerPCS: 0.0 },
|
||||
{ soc: 0, soh: 0, activePowerPCS: 0.0, reactivePowerPCS: 0.0 }
|
||||
],
|
||||
// 充电
|
||||
// dotData: {
|
||||
// lineTopLeft: "M 238,0 0,0",
|
||||
// lineTopRight: "M 0,0 -230,0",
|
||||
// lineCenter: "M 0,-283,0,0,0,0",
|
||||
// lineBottomOne: 'M 258,-260, 258, 0, 0 ,0',
|
||||
// lineBottomTwo: 'M 146,-260, 146, 0, 0 ,0',
|
||||
// lineBottomThree: 'M 38,-260, 38, 0, 0 ,0',
|
||||
// lineBottomFour: 'M -40,-260,-40,0 0,0',
|
||||
// lineBottomFive: 'M -154,-260,-154,0 0,0',
|
||||
// lineBottomSix: 'M -265,-260,-265,0 0,0',
|
||||
// },
|
||||
// 放电
|
||||
dotData: {
|
||||
lineTopLeft: 'M 0,0 0,0',
|
||||
lineTopRight: 'M 0,0 0,0',
|
||||
lineCenter: 'M 0,0 0,0',
|
||||
lineBottomOne: 'M 0,0 0,0',
|
||||
lineBottomTwo: 'M 0,0 0,0',
|
||||
lineBottomThree: 'M 0,0 0,0',
|
||||
lineBottomFour: 'M 0,0 0,0',
|
||||
lineBottomFive: 'M 0,0 0,0',
|
||||
lineBottomSix: 'M 0,0 0,0'
|
||||
},
|
||||
loading: false,
|
||||
activePowerTotal: {},
|
||||
permissionId: null,
|
||||
show_point_dispostion: false,
|
||||
pageLocation: null,
|
||||
pcsData_1: [],
|
||||
pcsData_2: [],
|
||||
pcsData_3: [],
|
||||
pcsData_4: [],
|
||||
pcsData_5: [],
|
||||
pcsData_6: [],
|
||||
pcsData_7: [],
|
||||
pcsData_8: [],
|
||||
pcsData_9: [],
|
||||
pcsData_10: [],
|
||||
ammeter_1: [],
|
||||
ammeter_2: [],
|
||||
ammeter_3: [],
|
||||
ammeter_4: [],
|
||||
break_1: []
|
||||
}
|
||||
},
|
||||
computed: {},
|
||||
watch: {},
|
||||
created() {
|
||||
const result = changeTheme()
|
||||
this.configData = config[result]
|
||||
setTimeout(() => {
|
||||
if (this.$store.getters.menuList.length) {
|
||||
this.permissionId = this.$store.getters.menuList.find((item) => {
|
||||
return item.url === this.$route.path
|
||||
}).id
|
||||
}
|
||||
}, 300)
|
||||
},
|
||||
methods: {
|
||||
oScale() {
|
||||
this.$emit('scale')
|
||||
},
|
||||
getBreakColor(val) {
|
||||
if (+val === 1) {
|
||||
return '#00FF1A'
|
||||
} else {
|
||||
return '#FF0000'
|
||||
}
|
||||
},
|
||||
countChineseAndEnglishCharacters(str, x) {
|
||||
var chineseCount = str.match(/[\u4e00-\u9fa5]/g)
|
||||
? str.match(/[\u4e00-\u9fa5]/g).length
|
||||
: 0
|
||||
var englishCount = str.match(/[a-zA-Z]/g)
|
||||
? str.match(/[a-zA-Z]/g).length
|
||||
: 0
|
||||
var otherCount = str.length - chineseCount - englishCount
|
||||
const obj = {
|
||||
otherCount: otherCount,
|
||||
chineseCount: chineseCount,
|
||||
englishCount: englishCount
|
||||
}
|
||||
return (
|
||||
obj.englishCount * 8 + obj.chineseCount * 16 + obj.otherCount * 6 + x
|
||||
)
|
||||
},
|
||||
lookDeviceDetail(val) {
|
||||
// 查看设备详情
|
||||
this.pageLocation = val
|
||||
this.show_point_dispostion = true
|
||||
},
|
||||
closePoint() {
|
||||
this.show_point_dispostion = false
|
||||
},
|
||||
|
||||
getDynamicPointData() {
|
||||
this.getData()
|
||||
},
|
||||
handleSetting() {
|
||||
this.$emit('handleSetting')
|
||||
},
|
||||
toScale() {
|
||||
this.$emit('toScale')
|
||||
},
|
||||
async getpoint() {
|
||||
await DynamicConfigPoint({
|
||||
pageLocation: this.pageLocation,
|
||||
permissionId: this.permissionId,
|
||||
stationId: this.stationId
|
||||
})
|
||||
},
|
||||
async getData() {
|
||||
this.getPcsData()
|
||||
},
|
||||
async getPcsData() {
|
||||
this.loading = true
|
||||
try {
|
||||
const res = await DynamicConfigPoint({
|
||||
permissionId: this.permissionId,
|
||||
stationId: this.stationId
|
||||
})
|
||||
this.pcsData_1 = []
|
||||
this.pcsData_2 = []
|
||||
this.pcsData_3 = []
|
||||
this.pcsData_4 = []
|
||||
this.pcsData_5 = []
|
||||
this.pcsData_6 = []
|
||||
this.ammeter_1 = []
|
||||
this.dotData = {
|
||||
lineTopLeft: 'M 0,0 0,0',
|
||||
lineTopRight: 'M 0,0 0,0',
|
||||
lineCenter: 'M 0,0 0,0',
|
||||
lineBottomOne: 'M 0,0 0,0',
|
||||
lineBottomTwo: 'M 0,0 0,0',
|
||||
lineBottomThree: 'M 0,0 0,0',
|
||||
lineBottomFour: 'M 0,0 0,0',
|
||||
lineBottomFive: 'M 0,0 0,0',
|
||||
lineBottomSix: 'M 0,0 0,0'
|
||||
}
|
||||
if (res.data.length) {
|
||||
res.data.forEach((item) => {
|
||||
if (item.pageLocation === 'sixth_pcs_1') {
|
||||
this.pcsData_1.push(item)
|
||||
} else if (item.pageLocation === 'sixth_pcs_2') {
|
||||
this.pcsData_2.push(item)
|
||||
} else if (item.pageLocation === 'sixth_pcs_3') {
|
||||
this.pcsData_3.push(item)
|
||||
} else if (item.pageLocation === 'sixth_pcs_4') {
|
||||
this.pcsData_4.push(item)
|
||||
} else if (item.pageLocation === 'sixth_pcs_5') {
|
||||
this.pcsData_5.push(item)
|
||||
} else if (item.pageLocation === 'sixth_pcs_6') {
|
||||
this.pcsData_6.push(item)
|
||||
} else if (item.pageLocation === 'sixth_ammeter_1') {
|
||||
this.ammeter_1.push(item)
|
||||
} else if (item.pageLocation === 'six-line-top-left') {
|
||||
if (+item.value > 0) {
|
||||
this.dotData.lineTopLeft = 'M 238,0 0,0'
|
||||
} else if (+item.value < 0) {
|
||||
this.dotData.lineTopLeft = 'M 0,0 238,0 '
|
||||
} else {
|
||||
this.dotData.lineTopLeft = 'M 0,0 0,0'
|
||||
}
|
||||
} else if (item.pageLocation === 'six-line-top-right') {
|
||||
if (+item.value > 0) {
|
||||
this.dotData.lineTopRight = 'M 0,0 -230,0'
|
||||
} else if (+item.value < 0) {
|
||||
this.dotData.lineTopRight = 'M -230,0 0,0 '
|
||||
} else {
|
||||
this.dotData.lineTopRight = 'M 0,0 0,0'
|
||||
}
|
||||
} else if (item.pageLocation === 'six-line-bottom-one') {
|
||||
if (+item.value > 0) {
|
||||
this.dotData.lineBottomOne = 'M 258,-260, 258, 0, 0 ,0'
|
||||
} else if (+item.value < 0) {
|
||||
this.dotData.lineBottomOne = 'M 0,0,258,0,258,-260'
|
||||
} else {
|
||||
this.dotData.lineBottomOne = 'M 0,0 0,0'
|
||||
}
|
||||
} else if (item.pageLocation === 'six-line-bottom-two') {
|
||||
if (+item.value > 0) {
|
||||
this.dotData.lineBottomTwo = 'M 146,-260, 146, 0, 0 ,0'
|
||||
} else if (+item.value < 0) {
|
||||
this.dotData.lineBottomTwo = 'M 0,0,146, 0,146,-260 '
|
||||
} else {
|
||||
this.dotData.lineBottomTwo = 'M 0,0 0,0'
|
||||
}
|
||||
} else if (item.pageLocation === 'six-line-bottom-three') {
|
||||
if (+item.value > 0) {
|
||||
this.dotData.lineBottomThree = 'M 38,-260, 38, 0, 0 ,0'
|
||||
} else if (+item.value < 0) {
|
||||
this.dotData.lineBottomThree = 'M 0,0, 38, 0, 38,-260'
|
||||
} else {
|
||||
this.dotData.lineBottomThree = 'M 0,0 0,0'
|
||||
}
|
||||
} else if (item.pageLocation === 'six-line-bottom-four') {
|
||||
if (+item.value > 0) {
|
||||
this.dotData.lineBottomFour = 'M -40,-260,-40,0 0,0'
|
||||
} else if (+item.value < 0) {
|
||||
this.dotData.lineBottomFour = 'M 0,0,-40,0,-40,-260'
|
||||
} else {
|
||||
this.dotData.lineBottomFour = 'M 0,0 0,0'
|
||||
}
|
||||
} else if (item.pageLocation === 'six-line-bottom-five') {
|
||||
if (+item.value > 0) {
|
||||
this.dotData.lineBottomFive = 'M -154,-260,-154,0 0,0'
|
||||
} else if (+item.value < 0) {
|
||||
this.dotData.lineBottomFive = 'M 0,0,-154,0,-154,-260'
|
||||
} else {
|
||||
this.dotData.lineBottomFive = 'M 0,0 0,0'
|
||||
}
|
||||
} else if (item.pageLocation === 'six-line-bottom-six') {
|
||||
if (+item.value > 0) {
|
||||
this.dotData.lineBottomSix = 'M -265,-260,-265,0 0,0'
|
||||
} else if (+item.value < 0) {
|
||||
this.dotData.lineBottomSix = 'M 0,0,-265,0,-265,-260'
|
||||
} else {
|
||||
this.dotData.lineBottomSix = 'M 0,0 0,0'
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
} catch (error) {
|
||||
// console.log(error);
|
||||
} finally {
|
||||
this.loading = false
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.center-box {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
@mixin move-round($duration, $delay) {
|
||||
fill: none;
|
||||
stroke-width: 5;
|
||||
stroke-linejoin: round;
|
||||
stroke-linecap: round;
|
||||
stroke-dasharray: 3, 900;
|
||||
stroke-dashoffset: 0;
|
||||
animation: lineMove $duration $delay cubic-bezier(0, 0, 0.74, 0.74) infinite;
|
||||
}
|
||||
|
||||
@keyframes lineMove {
|
||||
0% {
|
||||
stroke-dashoffset: -850;
|
||||
}
|
||||
100% {
|
||||
stroke-dashoffset: -0;
|
||||
}
|
||||
}
|
||||
.g-rect-fill-two {
|
||||
@include move-round(3.5s, 1s);
|
||||
}
|
||||
</style>
|
||||
436
src/views/dashboardtest/components/top-center/standard-215.vue
Normal file
436
src/views/dashboardtest/components/top-center/standard-215.vue
Normal file
@ -0,0 +1,436 @@
|
||||
<template>
|
||||
<ItemBox :title="$t('dashboard.stationTopo')" style="min-height: 560px">
|
||||
<div ref="svgLine" v-loading="loading" class="center-box">
|
||||
<svg
|
||||
version="1.1"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||
xml:space="preserve"
|
||||
class="circle-load-rect-svg"
|
||||
viewBox="0 0 800 500"
|
||||
>
|
||||
<defs>
|
||||
<defs>
|
||||
<radialGradient id="RadialGradient1">
|
||||
<stop offset="0%" stop-color="#fff" />
|
||||
<stop offset="30%" stop-color="#0171c1" />
|
||||
<stop offset="50%" stop-color="#035088" />
|
||||
<stop offset="100%" stop-color="#02395a" />
|
||||
</radialGradient>
|
||||
</defs>
|
||||
<marker
|
||||
id="markerCircle"
|
||||
markerWidth="15"
|
||||
markerHeight="15"
|
||||
refX="5"
|
||||
refY="5"
|
||||
>
|
||||
<circle
|
||||
cx="5"
|
||||
cy="5"
|
||||
r="5"
|
||||
style="stroke: none; fill: url(#RadialGradient1)"
|
||||
/>
|
||||
</marker>
|
||||
|
||||
<marker
|
||||
id="markerArrow"
|
||||
markerWidth="13"
|
||||
markerHeight="13"
|
||||
refX="2"
|
||||
refY="6"
|
||||
orient="auto"
|
||||
>
|
||||
<path d="M2,2 L2,11 L10,6 L2,2" style="fill: black" />
|
||||
</marker>
|
||||
</defs>
|
||||
<polyline
|
||||
points="115,206 673,206"
|
||||
fill="none"
|
||||
class="g-rect-path"
|
||||
stroke-width="1"
|
||||
stroke="#0094FF"
|
||||
stroke-dasharray="3 3"
|
||||
/>
|
||||
<circle
|
||||
cx="110"
|
||||
cy="206"
|
||||
r="8"
|
||||
style="stroke: none; fill: url(#RadialGradient1)"
|
||||
/>
|
||||
<!-- //动点 -->
|
||||
<circle
|
||||
cx="110"
|
||||
cy="206"
|
||||
r="8"
|
||||
style="stroke: none; fill: url(#RadialGradient1)"
|
||||
>
|
||||
<animateMotion
|
||||
repeatCount="indefinite"
|
||||
dur="8s"
|
||||
begin="0s"
|
||||
:path="line.line2"
|
||||
/>
|
||||
</circle>
|
||||
<circle
|
||||
cx="673"
|
||||
cy="206"
|
||||
r="8"
|
||||
style="stroke: none; fill: url(#RadialGradient1)"
|
||||
/>
|
||||
<!-- //动点 -->
|
||||
<circle
|
||||
cx="673"
|
||||
cy="206"
|
||||
r="8"
|
||||
style="stroke: none; fill: url(#RadialGradient1)"
|
||||
>
|
||||
<animateMotion
|
||||
repeatCount="indefinite"
|
||||
dur="8s"
|
||||
begin="0s"
|
||||
:path="line.line1"
|
||||
/>
|
||||
</circle>
|
||||
<!-- {{ $t("dashboard.dCCabin") }} -->
|
||||
<image
|
||||
v-if="stationId === 381"
|
||||
:xlink:href="tnHomeCang"
|
||||
x="680"
|
||||
y="162"
|
||||
width="60"
|
||||
height="80"
|
||||
/>
|
||||
<image
|
||||
v-else
|
||||
:xlink:href="configData.pcs"
|
||||
x="680"
|
||||
y="162"
|
||||
width="60"
|
||||
height="80"
|
||||
style="cursor: pointer"
|
||||
@click="gotoDeviceList(1)"
|
||||
@contextmenu.prevent="onContextmenu($event, '1')"
|
||||
/>
|
||||
<!-- 电网 -->
|
||||
<image
|
||||
:xlink:href="configData.grid"
|
||||
x="35"
|
||||
y="162"
|
||||
width="60"
|
||||
height="80"
|
||||
/>
|
||||
<!-- {{ $t("dashboard.gridCab") }} -->
|
||||
<image
|
||||
:xlink:href="configData.gui"
|
||||
x="361"
|
||||
y="162"
|
||||
width="80"
|
||||
height="80"
|
||||
/>
|
||||
<!-- {{ $t("dashboard.dCCabin") }} -->
|
||||
<text x="637" y="290" fill="#ffffff" font-size="14">{{ $t("dashboard.workStatus") }}：</text>
|
||||
<text x="735" y="290" fill="#FFB800" font-size="14">
|
||||
{{ workStatus(formModel.activePowerPCS) }}
|
||||
</text>
|
||||
<text x="637" y="313" fill="#ffffff" font-size="14">
|
||||
{{ $t("dashboard.activePower") }}(kW)：
|
||||
</text>
|
||||
<text x="755" y="313" fill="#FFB800" font-size="14">
|
||||
{{ formModel.activePowerPCS }}
|
||||
</text>
|
||||
<text x="637" y="333" fill="#ffffff" font-size="14">SOC(%)：</text>
|
||||
<text x="735" y="333" fill="#FFB800" font-size="14">
|
||||
{{ formModel.soc }}
|
||||
</text>
|
||||
<text x="637" y="353" fill="#ffffff" font-size="14">SOH(%)：</text>
|
||||
<text x="735" y="353" fill="#FFB800" font-size="14">
|
||||
{{ formModel.soh }}
|
||||
</text>
|
||||
<text x="670" y="260" fill="#ffffff" font-size="14">{{ $t("dashboard.esiCab") }}</text>
|
||||
<text x="379" y="260" fill="#ffffff" font-size="14">{{ $t("dashboard.gridCab") }}</text>
|
||||
<text x="38" y="260" fill="#ffffff" font-size="14"> {{ $t("dashboard.grid") }}</text>
|
||||
</svg>
|
||||
</div>
|
||||
<rightMenu
|
||||
:class-index="0"
|
||||
:rightclick-info="rightclickInfo"
|
||||
@setting="setting"
|
||||
/>
|
||||
<el-dialog
|
||||
:append-to-body="true"
|
||||
title="配置跳转"
|
||||
:visible.sync="visiable"
|
||||
width="30%"
|
||||
modal-append-to-body
|
||||
:close-on-click-modal="false"
|
||||
@close="close"
|
||||
>
|
||||
<el-form
|
||||
ref="formModel"
|
||||
:model="newformModel"
|
||||
label-width="100px"
|
||||
label-position="right"
|
||||
>
|
||||
<el-row :gutter="10" style="display: flex; flex-wrap: wrap">
|
||||
<el-col :span="24">
|
||||
<el-form-item label="绑定设备" prop="srcId">
|
||||
<el-cascader
|
||||
:key="key"
|
||||
v-model="srcIdValue"
|
||||
:show-all-levels="false"
|
||||
style="width: 100%"
|
||||
:props="{
|
||||
label: 'name',
|
||||
emitPath: false,
|
||||
checkStrictly: true,
|
||||
children: 'children',
|
||||
value: 'srcId',
|
||||
}"
|
||||
:options="options"
|
||||
@change="handleChange"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
|
||||
<span slot="footer">
|
||||
<el-button @click="close">取消</el-button>
|
||||
<el-button
|
||||
type="primary"
|
||||
:loading="sureLoading"
|
||||
@click="sure"
|
||||
>确定</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</ItemBox>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import homeOffice from '@/assets/images/home-office.png'
|
||||
import homeIntegrated from '@/assets/images/wxjd/pcs-energy.png'
|
||||
|
||||
import tnHomeCang from '@/assets/images/wxjd/cabinet.png'
|
||||
import rightMenu from '@/components/RightMenu/index.vue'
|
||||
import { GetNewTreeVirtualDevices } from '@/api/surveillance/energy-storage/index'
|
||||
import { GetbozhouTuopuStatus } from '@/api/homePage-integrated/index'
|
||||
import { SaveSrcId, GetSrcId } from '@/api/home-page/index'
|
||||
import config from './config'
|
||||
import { changeTheme } from '@/utils/index'
|
||||
export default {
|
||||
name: 'Index',
|
||||
components: { rightMenu },
|
||||
props: {
|
||||
stationType: {
|
||||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
stationId: {
|
||||
type: Number,
|
||||
default: 0
|
||||
}
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
formModel: { soc: 0, soh: 0, activePowerPCS: 0.0, reactivePowerPCS: 0.0 },
|
||||
homeOffice,
|
||||
homeIntegrated,
|
||||
tnHomeCang,
|
||||
loading: false,
|
||||
currentIndex: 0,
|
||||
line: {
|
||||
line1: 'M 0,0 0,0', // {{ $t("dashboard.gridCab") }}和一体柜之间的连线 {{ $t("dashboard.gridCab") }}流向一体柜
|
||||
line2: 'M 0,0 0,0' // {{ $t("dashboard.gridCab") }}和电网之间的连线- 电网流向{{ $t("dashboard.gridCab") }}
|
||||
},
|
||||
otherLine: {
|
||||
line1: 'M 0,0 0,0 ', // {{ $t("dashboard.gridCab") }}和一体柜之间的连线 一体柜流向{{ $t("dashboard.gridCab") }}
|
||||
line2: 'M 0,0 0,0' // {{ $t("dashboard.gridCab") }}和电网之间的连线- {{ $t("dashboard.gridCab") }}流向电网
|
||||
},
|
||||
key: 0,
|
||||
rightclickInfo: {},
|
||||
visiable: false,
|
||||
srcIdValue: null,
|
||||
options: [],
|
||||
newformModel: {},
|
||||
topologyId: null,
|
||||
sureLoading: false,
|
||||
editId: null,
|
||||
configData: {}
|
||||
}
|
||||
},
|
||||
computed: {},
|
||||
watch: {},
|
||||
created() {
|
||||
const result = changeTheme()
|
||||
this.configData = config[result]
|
||||
},
|
||||
mounted() {
|
||||
// const result = require('./config.js')
|
||||
// this.configData = result.default
|
||||
// console.log(123, result)
|
||||
|
||||
this.getDeviceOption()
|
||||
},
|
||||
methods: {
|
||||
async gotoDeviceList(id) {
|
||||
const res = await GetSrcId({ stationId: this.stationId, ids: [id] })
|
||||
if (res.data.length) {
|
||||
this.$router.push({
|
||||
name: 'standard-215-device-list',
|
||||
params: {
|
||||
srcId: res.data[0].srcId
|
||||
}
|
||||
})
|
||||
} else {
|
||||
this.$message.warning('请右击绑定图片的设备')
|
||||
}
|
||||
},
|
||||
handleChange() {},
|
||||
async setting() {
|
||||
const res = await GetSrcId({
|
||||
stationId: this.stationId,
|
||||
ids: [this.topologyId]
|
||||
})
|
||||
if (res.data.length) {
|
||||
this.srcIdValue = res.data[0].srcId
|
||||
this.editId = res.data[0].id
|
||||
}
|
||||
this.visiable = true
|
||||
},
|
||||
workStatus(val) {
|
||||
if (this.formModel.flowDirection === 2) {
|
||||
if (+val > +1) {
|
||||
return this.$t('dashboard.disCharging')
|
||||
}
|
||||
if (+val < -1) {
|
||||
return this.$t('dashboard.charging')
|
||||
}
|
||||
if (val < 1 || +val.abs < 1 || !val) {
|
||||
return this.$t('dashboard.standing')
|
||||
}
|
||||
} else {
|
||||
if (+val > +1) {
|
||||
return this.$t('dashboard.charging')
|
||||
}
|
||||
if (+val < -1) {
|
||||
return this.$t('dashboard.disCharging')
|
||||
}
|
||||
if (val < 1 || +val.abs < 1 || !val) {
|
||||
return this.$t('dashboard.standing')
|
||||
}
|
||||
}
|
||||
},
|
||||
getFlowDirection(val) {
|
||||
if (this.formModel.flowDirection === 2) {
|
||||
if (+val > +1) {
|
||||
this.line.line1 = 'M 0,0 -270,0'
|
||||
this.line.line2 = 'M 301,0 0,0'
|
||||
}
|
||||
if (+val < -1) {
|
||||
this.line.line1 = 'M -272,0 0,0'
|
||||
this.line.line2 = 'M 0,0 301,0'
|
||||
}
|
||||
if (val === 0 || !val || (val < 1 && val > -1)) {
|
||||
this.line.line1 = ''
|
||||
this.line.line2 = ''
|
||||
}
|
||||
} else {
|
||||
if (+val > +0.1) {
|
||||
this.line.line1 = 'M -272,0 0,0'
|
||||
this.line.line2 = 'M 0,0 301,0'
|
||||
}
|
||||
if (+val < -0.1) {
|
||||
this.line.line1 = 'M 0,0 -270,0'
|
||||
this.line.line2 = 'M 301,0 0,0'
|
||||
}
|
||||
if (val === 0 || !val || (val < 1 && val > -1)) {
|
||||
this.line.line1 = ''
|
||||
this.line.line2 = ''
|
||||
}
|
||||
}
|
||||
},
|
||||
removeEmptyChildren(data) {
|
||||
for (var i = 0; i < data.length; i++) {
|
||||
if (data[i].children.length < 1) {
|
||||
// children若为空数组，则将children设为undefined
|
||||
data[i].children = undefined
|
||||
} else {
|
||||
// children若不为空数组，则继续 递归调用 本方法
|
||||
this.removeEmptyChildren(data[i].children)
|
||||
}
|
||||
}
|
||||
return data
|
||||
},
|
||||
onContextmenu(e, id) {
|
||||
this.topologyId = id
|
||||
this.rightclickInfo = {
|
||||
position: {
|
||||
x: e.clientX,
|
||||
y: e.clientY
|
||||
},
|
||||
menulists: [
|
||||
{
|
||||
fnName: 'setting',
|
||||
params: '配置',
|
||||
icoName: 'el-icon-setting',
|
||||
btnName: '配置'
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
close() {
|
||||
this.visiable = false
|
||||
this.srcIdValue = null
|
||||
this.key++
|
||||
},
|
||||
async sure() {
|
||||
this.sureLoading = true
|
||||
try {
|
||||
await SaveSrcId({
|
||||
topologyId: this.topologyId,
|
||||
stationId: this.stationId,
|
||||
srcId: this.srcIdValue,
|
||||
id: this.editId ? this.editId : undefined
|
||||
})
|
||||
this.$message.success('操作成功')
|
||||
this.close()
|
||||
} catch (err) {
|
||||
this.$message.warning('操作失败')
|
||||
} finally {
|
||||
this.sureLoading = false
|
||||
}
|
||||
},
|
||||
async getDeviceOption() {
|
||||
const params = {
|
||||
stationId: this.stationId
|
||||
}
|
||||
|
||||
const { data } = await GetNewTreeVirtualDevices(params)
|
||||
this.options = this.removeEmptyChildren(data)
|
||||
},
|
||||
async getData() {
|
||||
this.loading = true
|
||||
const params = {
|
||||
stationId: this.stationId
|
||||
}
|
||||
try {
|
||||
const res = await GetbozhouTuopuStatus(params)
|
||||
this.formModel = res.data
|
||||
this.getFlowDirection(this.formModel.activePowerPCS)
|
||||
} catch (error) {
|
||||
console.log(error)
|
||||
} finally {
|
||||
this.loading = false
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.center-box {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
983
src/views/dashboardtest/components/top-center/ten.vue
Normal file
983
src/views/dashboardtest/components/top-center/ten.vue
Normal file
@ -0,0 +1,983 @@
|
||||
<template>
|
||||
<itemBox
|
||||
:title="title"
|
||||
:title-id="titleId"
|
||||
style="min-height: 560px"
|
||||
@handleSaveTitle="saveDynamicConfigTitle"
|
||||
>
|
||||
<div ref="svgLine" class="center-box">
|
||||
<div v-loading="loading">
|
||||
<svg
|
||||
version="1.1"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||
xml:space="preserve"
|
||||
class="circle-load-rect-svg"
|
||||
viewBox="0 0 800 530"
|
||||
>
|
||||
<defs>
|
||||
<defs>
|
||||
<radialGradient id="RadialGradient1">
|
||||
<stop offset="0%" stop-color="#fff" />
|
||||
<stop offset="30%" stop-color="#0171c1" />
|
||||
<stop offset="50%" stop-color="#035088" />
|
||||
<stop offset="100%" stop-color="#02395a" />
|
||||
</radialGradient>
|
||||
</defs>
|
||||
<marker
|
||||
id="markerCircle"
|
||||
markerWidth="15"
|
||||
markerHeight="15"
|
||||
refX="5"
|
||||
refY="5"
|
||||
>
|
||||
<circle
|
||||
cx="5"
|
||||
cy="5"
|
||||
r="5"
|
||||
style="stroke: none; fill: url(#RadialGradient1)"
|
||||
/>
|
||||
</marker>
|
||||
|
||||
<marker
|
||||
id="markerArrow"
|
||||
markerWidth="13"
|
||||
markerHeight="13"
|
||||
refX="2"
|
||||
refY="6"
|
||||
orient="auto"
|
||||
>
|
||||
<path d="M2,2 L2,11 L10,6 L2,2" style="fill: black" />
|
||||
</marker>
|
||||
</defs>
|
||||
<!-- //线条 -->
|
||||
<!-- top -->
|
||||
<polyline
|
||||
points="154,60 630,60"
|
||||
fill="none"
|
||||
class="g-rect-path"
|
||||
stroke="#0094FF"
|
||||
stroke-dasharray="3 3"
|
||||
/>
|
||||
<!-- center -->
|
||||
<polyline
|
||||
points="385,60 385,320"
|
||||
fill="none"
|
||||
class="g-rect-path"
|
||||
stroke="#0094FF"
|
||||
stroke-dasharray="3 3"
|
||||
/>
|
||||
|
||||
<polyline
|
||||
points="385,100 460,100"
|
||||
fill="none"
|
||||
class="g-rect-path"
|
||||
stroke="#0094FF"
|
||||
stroke-dasharray="3 3"
|
||||
/>
|
||||
|
||||
<!-- bottom -->
|
||||
<polyline
|
||||
points="124,320 745,320"
|
||||
fill="none"
|
||||
class="g-rect-path"
|
||||
stroke="#0094FF"
|
||||
stroke-dasharray="3 3"
|
||||
/>
|
||||
|
||||
<!-- top -->
|
||||
|
||||
<circle
|
||||
cx="154"
|
||||
cy="60"
|
||||
r="8"
|
||||
style="stroke: none; fill: url(#RadialGradient1)"
|
||||
>
|
||||
<animateMotion
|
||||
repeatCount="indefinite"
|
||||
dur="4s"
|
||||
begin="0s"
|
||||
:path="dotData.gridLeft"
|
||||
/>
|
||||
</circle>
|
||||
<circle
|
||||
cx="154"
|
||||
cy="60"
|
||||
r="8"
|
||||
style="stroke: none; fill: url(#RadialGradient1); cursor: pointer"
|
||||
@click="disposition('grid_left')"
|
||||
/>
|
||||
<circle
|
||||
cx="630"
|
||||
cy="60"
|
||||
r="8"
|
||||
style="stroke: none; fill: url(#RadialGradient1); cursor: pointer"
|
||||
@click="disposition('grid_left')"
|
||||
/>
|
||||
|
||||
<circle
|
||||
cx="460"
|
||||
cy="100"
|
||||
r="8"
|
||||
style="stroke: none; fill: url(#RadialGradient1)"
|
||||
/>
|
||||
|
||||
<!-- bottom -->
|
||||
<!-- 第一个动点 -->
|
||||
<circle
|
||||
cx="128"
|
||||
cy="320"
|
||||
r="8"
|
||||
style="stroke: none; fill: url(#RadialGradient1)"
|
||||
>
|
||||
<animateMotion
|
||||
repeatCount="indefinite"
|
||||
dur="4s"
|
||||
begin="0s"
|
||||
:path="dotData.pcsFirst"
|
||||
/>
|
||||
</circle>
|
||||
<circle
|
||||
cx="128"
|
||||
cy="320"
|
||||
r="8"
|
||||
style="stroke: none; fill: url(#RadialGradient1); cursor: pointer"
|
||||
@click="disposition('pcs_first')"
|
||||
/>
|
||||
|
||||
<!-- 第二个动点 -->
|
||||
<circle
|
||||
cx="200"
|
||||
cy="320"
|
||||
r="8"
|
||||
style="stroke: none; fill: url(#RadialGradient1)"
|
||||
>
|
||||
<animateMotion
|
||||
repeatCount="indefinite"
|
||||
dur="4s"
|
||||
begin="0s"
|
||||
:path="dotData.pcsSecond"
|
||||
/>
|
||||
</circle>
|
||||
<circle
|
||||
cx="200"
|
||||
cy="320"
|
||||
r="8"
|
||||
style="stroke: none; fill: url(#RadialGradient1); cursor: pointer"
|
||||
@click="disposition('pcs_second')"
|
||||
/>
|
||||
|
||||
<!-- 第三个动点 -->
|
||||
<circle
|
||||
cx="270"
|
||||
cy="320"
|
||||
r="8"
|
||||
style="stroke: none; fill: url(#RadialGradient1)"
|
||||
>
|
||||
<animateMotion
|
||||
repeatCount="indefinite"
|
||||
dur="4s"
|
||||
begin="0s"
|
||||
:path="dotData.pcsThird"
|
||||
/>
|
||||
</circle>
|
||||
<circle
|
||||
cx="270"
|
||||
cy="320"
|
||||
r="8"
|
||||
style="stroke: none; fill: url(#RadialGradient1); cursor: pointer"
|
||||
@click="disposition('pcs_third')"
|
||||
/>
|
||||
|
||||
<!-- 第四个动点 -->
|
||||
<circle
|
||||
cx="340"
|
||||
cy="320"
|
||||
r="8"
|
||||
style="stroke: none; fill: url(#RadialGradient1)"
|
||||
>
|
||||
<animateMotion
|
||||
repeatCount="indefinite"
|
||||
dur="4s"
|
||||
begin="0s"
|
||||
:path="dotData.pcsFourth"
|
||||
/>
|
||||
</circle>
|
||||
<circle
|
||||
cx="340"
|
||||
cy="320"
|
||||
r="8"
|
||||
style="stroke: none; fill: url(#RadialGradient1); cursor: pointer"
|
||||
@click="disposition('pcs_fourth')"
|
||||
/>
|
||||
|
||||
<!-- 第五个动点 -->
|
||||
<circle
|
||||
cx="410"
|
||||
cy="320"
|
||||
r="8"
|
||||
style="stroke: none; fill: url(#RadialGradient1)"
|
||||
>
|
||||
<animateMotion
|
||||
repeatCount="indefinite"
|
||||
dur="4s"
|
||||
begin="0s"
|
||||
:path="dotData.pcsFifth"
|
||||
/>
|
||||
</circle>
|
||||
<circle
|
||||
cx="410"
|
||||
cy="320"
|
||||
r="8"
|
||||
style="stroke: none; fill: url(#RadialGradient1); cursor: pointer"
|
||||
@click="disposition('pcs_fifth')"
|
||||
/>
|
||||
|
||||
<!-- 第六个动点 -->
|
||||
<circle
|
||||
cx="480"
|
||||
cy="320"
|
||||
r="8"
|
||||
style="stroke: none; fill: url(#RadialGradient1)"
|
||||
>
|
||||
<animateMotion
|
||||
repeatCount="indefinite"
|
||||
dur="4s"
|
||||
begin="0s"
|
||||
:path="dotData.pcsSixth"
|
||||
/>
|
||||
</circle>
|
||||
<circle
|
||||
cx="480"
|
||||
cy="320"
|
||||
r="8"
|
||||
style="stroke: none; fill: url(#RadialGradient1); cursor: pointer"
|
||||
@click="disposition('pcs_sixth')"
|
||||
/>
|
||||
|
||||
<!-- 第七个动点 -->
|
||||
<circle
|
||||
cx="550"
|
||||
cy="320"
|
||||
r="8"
|
||||
style="stroke: none; fill: url(#RadialGradient1)"
|
||||
>
|
||||
<animateMotion
|
||||
repeatCount="indefinite"
|
||||
dur="4s"
|
||||
begin="0s"
|
||||
:path="dotData.pcsSeventh"
|
||||
/>
|
||||
</circle>
|
||||
<circle
|
||||
cx="550"
|
||||
cy="320"
|
||||
r="8"
|
||||
style="stroke: none; fill: url(#RadialGradient1); cursor: pointer"
|
||||
@click="disposition('pcs_seventh')"
|
||||
/>
|
||||
|
||||
<!-- 第八个动点 -->
|
||||
<circle
|
||||
cx="620"
|
||||
cy="320"
|
||||
r="8"
|
||||
style="stroke: none; fill: url(#RadialGradient1)"
|
||||
>
|
||||
<animateMotion
|
||||
repeatCount="indefinite"
|
||||
dur="4s"
|
||||
begin="0s"
|
||||
:path="dotData.pcsEighth"
|
||||
/>
|
||||
</circle>
|
||||
<circle
|
||||
cx="620"
|
||||
cy="320"
|
||||
r="8"
|
||||
style="stroke: none; fill: url(#RadialGradient1); cursor: pointer"
|
||||
@click="disposition('pcs_eighth')"
|
||||
/>
|
||||
|
||||
<!-- 第九个动点 -->
|
||||
<circle
|
||||
cx="690"
|
||||
cy="320"
|
||||
r="8"
|
||||
style="stroke: none; fill: url(#RadialGradient1)"
|
||||
>
|
||||
<animateMotion
|
||||
repeatCount="indefinite"
|
||||
dur="4s"
|
||||
begin="0s"
|
||||
:path="dotData.pcsNinth"
|
||||
/>
|
||||
</circle>
|
||||
<circle
|
||||
cx="690"
|
||||
cy="320"
|
||||
r="8"
|
||||
style="stroke: none; fill: url(#RadialGradient1); cursor: pointer"
|
||||
@click="disposition('pcs_ninth')"
|
||||
/>
|
||||
|
||||
<!-- 第十个动点 -->
|
||||
<circle
|
||||
cx="745"
|
||||
cy="320"
|
||||
r="8"
|
||||
style="stroke: none; fill: url(#RadialGradient1)"
|
||||
>
|
||||
<animateMotion
|
||||
repeatCount="indefinite"
|
||||
dur="4s"
|
||||
begin="0s"
|
||||
:path="dotData.pcsTenth"
|
||||
/>
|
||||
</circle>
|
||||
<circle
|
||||
cx="745"
|
||||
cy="320"
|
||||
r="8"
|
||||
style="stroke: none; fill: url(#RadialGradient1); cursor: pointer"
|
||||
@click="disposition('pcs_tenth')"
|
||||
/>
|
||||
|
||||
<!-- 图片和文字 -->
|
||||
|
||||
<!-- 市电 -->
|
||||
<image :xlink:href="gridImg" x="70" y="10" width="60" height="87" />
|
||||
<text x="70" y="110" fill="#ffffff" font-size="14"> {{ $t("dashboard.grid") }}</text>
|
||||
|
||||
<!-- {{ $t("dashboard.load") }} -->
|
||||
<image
|
||||
:xlink:href="chargingPileImg"
|
||||
x="650"
|
||||
y="10"
|
||||
width="60"
|
||||
height="87"
|
||||
/>
|
||||
<text x="675" y="110" fill="#ffffff" font-size="14"> {{ $t("dashboard.load") }}</text>
|
||||
|
||||
<!-- 1#PCS -->
|
||||
<image
|
||||
:xlink:href="cabinetImg"
|
||||
x="100"
|
||||
y="330"
|
||||
width="50"
|
||||
height="50"
|
||||
style="cursor: pointer"
|
||||
@click="disposition('tenth_pcs_1')"
|
||||
/>
|
||||
<text x="94" y="410" fill="#ffffff" font-size="14">{{ hiddenTextWord(`1#${$t("dashboard.cabinet")}`,8) }}</text>
|
||||
<!-- 2#PCS -->
|
||||
<image
|
||||
:xlink:href="cabinetImg"
|
||||
x="170"
|
||||
y="330"
|
||||
width="50"
|
||||
height="50"
|
||||
style="cursor: pointer"
|
||||
@click="disposition('tenth_pcs_2')"
|
||||
/>
|
||||
<text x="163" y="410" fill="#ffffff" font-size="14">{{ hiddenTextWord(`2#${$t("dashboard.cabinet")}`,8) }}</text>
|
||||
|
||||
<!-- 3#PCS -->
|
||||
<image
|
||||
:xlink:href="cabinetImg"
|
||||
x="240"
|
||||
y="330"
|
||||
width="50"
|
||||
height="50"
|
||||
style="cursor: pointer"
|
||||
@click="disposition('tenth_pcs_3')"
|
||||
/>
|
||||
<text x="235" y="410" fill="#ffffff" font-size="14">{{ hiddenTextWord(`3#${$t("dashboard.cabinet")}`,8) }}</text>
|
||||
|
||||
<!-- 4#PCS -->
|
||||
<image
|
||||
:xlink:href="cabinetImg"
|
||||
x="310"
|
||||
y="330"
|
||||
width="50"
|
||||
height="50"
|
||||
style="cursor: pointer"
|
||||
@click="disposition('tenth_pcs_4')"
|
||||
/>
|
||||
<text x="305" y="410" fill="#ffffff" font-size="14">{{ hiddenTextWord(`4#${$t("dashboard.cabinet")}`,8) }}</text>
|
||||
|
||||
<!-- 5#PCS -->
|
||||
<image
|
||||
:xlink:href="cabinetImg"
|
||||
x="380"
|
||||
y="330"
|
||||
width="50"
|
||||
height="50"
|
||||
style="cursor: pointer"
|
||||
@click="disposition('tenth_pcs_5')"
|
||||
/>
|
||||
<text x="380" y="410" fill="#ffffff" font-size="14">{{ hiddenTextWord(`5#${$t("dashboard.cabinet")}`,8) }}</text>
|
||||
|
||||
<!-- 6#PCS -->
|
||||
<image
|
||||
:xlink:href="cabinetImg"
|
||||
x="450"
|
||||
y="330"
|
||||
width="50"
|
||||
height="50"
|
||||
style="cursor: pointer"
|
||||
@click="disposition('tenth_pcs_6')"
|
||||
/>
|
||||
<text x="450" y="410" fill="#ffffff" font-size="14">{{ hiddenTextWord(`6#${$t("dashboard.cabinet")}`,8) }}</text>
|
||||
|
||||
<image
|
||||
:xlink:href="cabinetImg"
|
||||
x="520"
|
||||
y="330"
|
||||
width="50"
|
||||
height="50"
|
||||
style="cursor: pointer"
|
||||
@click="disposition('tenth_pcs_7')"
|
||||
/>
|
||||
<text x="520" y="410" fill="#ffffff" font-size="14">{{ hiddenTextWord(`7#${$t("dashboard.cabinet")}`,8) }}</text>
|
||||
|
||||
<image
|
||||
:xlink:href="cabinetImg"
|
||||
x="590"
|
||||
y="330"
|
||||
width="50"
|
||||
height="50"
|
||||
style="cursor: pointer"
|
||||
@click="disposition('tenth_pcs_8')"
|
||||
/>
|
||||
<text x="590" y="410" fill="#ffffff" font-size="14">{{ hiddenTextWord(`8#${$t("dashboard.cabinet")}`,8) }}</text>
|
||||
|
||||
<image
|
||||
:xlink:href="cabinetImg"
|
||||
x="660"
|
||||
y="330"
|
||||
width="50"
|
||||
height="50"
|
||||
style="cursor: pointer"
|
||||
@click="disposition('tenth_pcs_9')"
|
||||
/>
|
||||
<text x="660" y="410" fill="#ffffff" font-size="14">{{ hiddenTextWord(`9#${$t("dashboard.cabinet")}`,8) }}</text>
|
||||
|
||||
<image
|
||||
:xlink:href="cabinetImg"
|
||||
x="720"
|
||||
y="330"
|
||||
width="50"
|
||||
height="50"
|
||||
style="cursor: pointer"
|
||||
@click="disposition('tenth_pcs_10')"
|
||||
/>
|
||||
<text x="720" y="410" fill="#ffffff" font-size="14">{{ hiddenTextWord(`10#${$t("dashboard.cabinet")}`,8) }}</text>
|
||||
|
||||
<!-- 变压器 -->
|
||||
<image
|
||||
:xlink:href="distributionCabinetImg"
|
||||
x="330"
|
||||
y="145"
|
||||
width="120"
|
||||
height="85"
|
||||
/>
|
||||
|
||||
<!-- {{ $t("dashboard.ammeter") }} -->
|
||||
<image
|
||||
:xlink:href="ammeterImg"
|
||||
x="455"
|
||||
y="80"
|
||||
width="80"
|
||||
height="40"
|
||||
style="cursor: pointer"
|
||||
@click="disposition('tenth_ammeter_1')"
|
||||
/>
|
||||
<g v-for="(item, index) in ammeter_1" :key="item.id">
|
||||
<text x="435" :y="150 + 20 * index" fill="#ffffff" font-size="14">
|
||||
{{ item.name }}
|
||||
</text>
|
||||
<text
|
||||
:x="countChineseAndEnglishCharacters(item.name, 450)"
|
||||
:y="150 + 20 * index"
|
||||
fill="#FFB800"
|
||||
font-size="14"
|
||||
>
|
||||
{{ item.value }}
|
||||
</text>
|
||||
</g>
|
||||
|
||||
<!-- 左侧 -->
|
||||
<!-- 1#PCS -->
|
||||
<text x="10" y="440" fill="#ffffff" font-size="14">SOC(%)：</text>
|
||||
<text x="10" y="460" fill="#ffffff" font-size="14">SOH(%)：</text>
|
||||
<text x="10" y="480" fill="#ffffff" font-size="14">{{ $t("dashboard.workStatus") }}：</text>
|
||||
<text x="10" y="500" fill="#ffffff" font-size="14">
|
||||
{{ $t("dashboard.activePower") }}(kW)：
|
||||
</text>
|
||||
<!-- 1#PCS -->
|
||||
<text x="110" y="440" fill="#FFB800" font-size="14">
|
||||
{{ pcsData_1.length ? pcsData_1[0].value : "" }}
|
||||
</text>
|
||||
<text x="110" y="460" fill="#FFB800" font-size="14">
|
||||
{{ pcsData_1.length > 1 ? pcsData_1[1].value : "" }}
|
||||
</text>
|
||||
<text x="110" y="480" fill="#FFB800" font-size="14">
|
||||
{{ pcsData_1.length > 2 ? pcsData_1[2].value : "" }}
|
||||
</text>
|
||||
<text x="110" y="500" fill="#FFB800" font-size="14">
|
||||
{{ pcsData_1.length > 3 ? pcsData_1[3].value : "" }}
|
||||
</text>
|
||||
<!-- 2#PCS -->
|
||||
<text x="180" y="440" fill="#FFB800" font-size="14">
|
||||
{{ pcsData_2.length ? pcsData_2[0].value : "" }}
|
||||
</text>
|
||||
<text x="180" y="460" fill="#FFB800" font-size="14">
|
||||
{{ pcsData_2.length > 1 ? pcsData_2[1].value : "" }}
|
||||
</text>
|
||||
<text x="180" y="480" fill="#FFB800" font-size="14">
|
||||
{{ pcsData_2.length > 2 ? pcsData_2[2].value : "" }}
|
||||
</text>
|
||||
<text x="180" y="500" fill="#FFB800" font-size="14">
|
||||
{{ pcsData_2.length > 3 ? pcsData_2[3].value : "" }}
|
||||
</text>
|
||||
<!-- 3#PCS -->
|
||||
<text x="245" y="440" fill="#FFB800" font-size="14">
|
||||
{{ pcsData_3.length ? pcsData_3[0].value : "" }}
|
||||
</text>
|
||||
<text x="245" y="460" fill="#FFB800" font-size="14">
|
||||
{{ pcsData_3.length > 1 ? pcsData_3[1].value : "" }}
|
||||
</text>
|
||||
<text x="245" y="480" fill="#FFB800" font-size="14">
|
||||
{{ pcsData_3.length > 2 ? pcsData_3[2].value : "" }}
|
||||
</text>
|
||||
<text x="245" y="500" fill="#FFB800" font-size="14">
|
||||
{{ pcsData_3.length > 3 ? pcsData_3[3].value : "" }}
|
||||
</text>
|
||||
<!-- 4#PCS -->
|
||||
<text x="320" y="440" fill="#FFB800" font-size="14">
|
||||
{{ pcsData_4.length ? pcsData_4[0].value : "" }}
|
||||
</text>
|
||||
<text x="320" y="460" fill="#FFB800" font-size="14">
|
||||
{{ pcsData_4.length > 1 ? pcsData_4[1].value : "" }}
|
||||
</text>
|
||||
<text x="320" y="480" fill="#FFB800" font-size="14">
|
||||
{{ pcsData_4.length > 2 ? pcsData_4[2].value : "" }}
|
||||
</text>
|
||||
<text x="320" y="500" fill="#FFB800" font-size="14">
|
||||
{{ pcsData_4.length > 3 ? pcsData_4[3].value : "" }}
|
||||
</text>
|
||||
<!-- 5#PCS -->
|
||||
<text x="390" y="440" fill="#FFB800" font-size="14">
|
||||
{{ pcsData_5.length ? pcsData_5[0].value : "" }}
|
||||
</text>
|
||||
<text x="390" y="460" fill="#FFB800" font-size="14">
|
||||
{{ pcsData_5.length > 1 ? pcsData_5[1].value : "" }}
|
||||
</text>
|
||||
<text x="390" y="480" fill="#FFB800" font-size="14">
|
||||
{{ pcsData_5.length > 2 ? pcsData_5[2].value : "" }}
|
||||
</text>
|
||||
<text x="390" y="500" fill="#FFB800" font-size="14">
|
||||
{{ pcsData_5.length > 3 ? pcsData_5[3].value : "" }}
|
||||
</text>
|
||||
<!-- 6#PCS -->
|
||||
<text x="460" y="440" fill="#FFB800" font-size="14">
|
||||
{{ pcsData_6.length ? pcsData_6[0].value : "" }}
|
||||
</text>
|
||||
<text x="460" y="460" fill="#FFB800" font-size="14">
|
||||
{{ pcsData_6.length > 1 ? pcsData_6[1].value : "" }}
|
||||
</text>
|
||||
<text x="460" y="480" fill="#FFB800" font-size="14">
|
||||
{{ pcsData_6.length > 2 ? pcsData_6[2].value : "" }}
|
||||
</text>
|
||||
<text x="460" y="500" fill="#FFB800" font-size="14">
|
||||
{{ pcsData_6.length > 3 ? pcsData_6[3].value : "" }}
|
||||
</text>
|
||||
<!-- 7#PCS -->
|
||||
<text x="530" y="440" fill="#FFB800" font-size="14">
|
||||
{{ pcsData_7.length ? pcsData_7[0].value : "" }}
|
||||
</text>
|
||||
<text x="530" y="460" fill="#FFB800" font-size="14">
|
||||
{{ pcsData_7.length > 1 ? pcsData_7[1].value : "" }}
|
||||
</text>
|
||||
<text x="530" y="480" fill="#FFB800" font-size="14">
|
||||
{{ pcsData_7.length > 2 ? pcsData_7[2].value : "" }}
|
||||
</text>
|
||||
<text x="530" y="500" fill="#FFB800" font-size="14">
|
||||
{{ pcsData_7.length > 3 ? pcsData_7[3].value : "" }}
|
||||
</text>
|
||||
<!-- 8#PCS -->
|
||||
<text x="600" y="440" fill="#FFB800" font-size="14">
|
||||
{{ pcsData_8.length ? pcsData_8[0].value : "" }}
|
||||
</text>
|
||||
<text x="600" y="460" fill="#FFB800" font-size="14">
|
||||
{{ pcsData_8.length > 1 ? pcsData_8[1].value : "" }}
|
||||
</text>
|
||||
<text x="600" y="480" fill="#FFB800" font-size="14">
|
||||
{{ pcsData_8.length > 2 ? pcsData_8[2].value : "" }}
|
||||
</text>
|
||||
<text x="600" y="500" fill="#FFB800" font-size="14">
|
||||
{{ pcsData_8.length > 3 ? pcsData_8[3].value : "" }}
|
||||
</text>
|
||||
<!-- 9#PCS -->
|
||||
<text x="670" y="440" fill="#FFB800" font-size="14">
|
||||
{{ pcsData_9.length ? pcsData_9[0].value : "" }}
|
||||
</text>
|
||||
<text x="670" y="460" fill="#FFB800" font-size="14">
|
||||
{{ pcsData_9.length > 1 ? pcsData_9[1].value : "" }}
|
||||
</text>
|
||||
<text x="670" y="480" fill="#FFB800" font-size="14">
|
||||
{{ pcsData_9.length > 2 ? pcsData_9[2].value : "" }}
|
||||
</text>
|
||||
<text x="670" y="500" fill="#FFB800" font-size="14">
|
||||
{{ pcsData_9.length > 3 ? pcsData_9[3].value : "" }}
|
||||
</text>
|
||||
|
||||
<!-- 10#PCS -->
|
||||
<text x="730" y="440" fill="#FFB800" font-size="14">
|
||||
{{ pcsData_10.length ? pcsData_10[0].value : "" }}
|
||||
</text>
|
||||
<text x="730" y="460" fill="#FFB800" font-size="14">
|
||||
{{ pcsData_10.length > 1 ? pcsData_10[1].value : "" }}
|
||||
</text>
|
||||
<text x="730" y="480" fill="#FFB800" font-size="14">
|
||||
{{ pcsData_10.length > 2 ? pcsData_10[2].value : "" }}
|
||||
</text>
|
||||
<text x="730" y="500" fill="#FFB800" font-size="14">
|
||||
{{ pcsData_10.length > 3 ? pcsData_10[3].value : "" }}
|
||||
</text>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<DispositionPointData
|
||||
:disposition-show="show_point_dispostion"
|
||||
:page-location="pageLocation"
|
||||
@close="closePoint"
|
||||
@getData="getDynamicPointData"
|
||||
/>
|
||||
</itemBox>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import itemBox from '../itemBox/position.vue'
|
||||
import gridImg from '@/assets/images/wxjd/grid.png'
|
||||
import ammeterImg from '@/assets/images/wxjd/ammeter.png'
|
||||
import cabinetImg from '@/assets/images/wxjd/pcs-energy.png'
|
||||
import chargingPileImg from '@/assets/images/home-office.png'
|
||||
import distributionCabinetImg from '@/assets/images/wxjd/guiImg.png'
|
||||
import frameImg from '@/assets/images/wxjd/frame.png'
|
||||
import cangImg from '@/assets/images/home-cang.png'
|
||||
import { DynamicConfigPoint } from '@/api/home-page/index'
|
||||
import { hiddenTextWord } from '@/utils/index'
|
||||
import {
|
||||
QueryDynamicConfigTitle,
|
||||
AddDynamicConfigTitle
|
||||
} from '@/api/test-management/index'
|
||||
export default {
|
||||
name: 'Index',
|
||||
components: { itemBox },
|
||||
props: {
|
||||
stationType: {
|
||||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
stationId: {
|
||||
type: Number,
|
||||
default: 0
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
hiddenTextWord,
|
||||
gridImg,
|
||||
ammeterImg,
|
||||
cabinetImg,
|
||||
chargingPileImg,
|
||||
distributionCabinetImg,
|
||||
cangImg,
|
||||
frameImg,
|
||||
pcsData_1: [],
|
||||
pcsData_2: [],
|
||||
pcsData_3: [],
|
||||
pcsData_4: [],
|
||||
pcsData_5: [],
|
||||
pcsData_6: [],
|
||||
pcsData_7: [],
|
||||
pcsData_8: [],
|
||||
pcsData_9: [],
|
||||
pcsData_10: [],
|
||||
ammeter_1: [],
|
||||
partList: [
|
||||
{ soc: 0, soh: 0, activePowerPCS: 0.0, reactivePowerPCS: 0.0 },
|
||||
{ soc: 0, soh: 0, activePowerPCS: 0.0, reactivePowerPCS: 0.0 },
|
||||
{ soc: 0, soh: 0, activePowerPCS: 0.0, reactivePowerPCS: 0.0 },
|
||||
{ soc: 0, soh: 0, activePowerPCS: 0.0, reactivePowerPCS: 0.0 },
|
||||
{ soc: 0, soh: 0, activePowerPCS: 0.0, reactivePowerPCS: 0.0 }
|
||||
],
|
||||
loading: false,
|
||||
activePowerTotal: {},
|
||||
permissionId: null,
|
||||
show_point_dispostion: false,
|
||||
pageLocation: null,
|
||||
title: '站点拓扑',
|
||||
titleId: null,
|
||||
dotData: {
|
||||
gridLeft: 'M 0,0 0,0',
|
||||
gridRight: 'M 0,0 0,0',
|
||||
pcsFirst: 'M 0,0 0,0',
|
||||
pcsSecond: 'M 0,0 0,0',
|
||||
pcsThird: 'M 0,0 0,0',
|
||||
pcsFourth: 'M 0,0 0,0',
|
||||
pcsFifth: 'M 0,0 0,0',
|
||||
pcsSixth: 'M 0,0 0,0',
|
||||
pcsSeventh: 'M 0,0 0,0',
|
||||
pcsEighth: 'M 0,0 0,0',
|
||||
pcsNinth: 'M 0,0 0,0',
|
||||
pcsTenth: 'M 0,0 0,0'
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {},
|
||||
watch: {},
|
||||
created() {
|
||||
if (this.$store.getters.menuList.length) {
|
||||
this.permissionId = this.$store.getters.menuList.find((item) => {
|
||||
return item.url === this.$route.path
|
||||
}).id
|
||||
}
|
||||
},
|
||||
mounted() {},
|
||||
methods: {
|
||||
async saveDynamicConfigTitle(title, id) {
|
||||
await AddDynamicConfigTitle({
|
||||
name: title,
|
||||
id: id,
|
||||
stationId: this.stationId,
|
||||
pageLocation: 'ten_topCenter_title',
|
||||
permissionId: this.permissionId
|
||||
})
|
||||
this.queryDynamicConfigTitle()
|
||||
},
|
||||
async queryDynamicConfigTitle() {
|
||||
const { data } = await QueryDynamicConfigTitle({
|
||||
stationId: this.stationId,
|
||||
pageLocation: 'ten_topCenter_title',
|
||||
permissionId: this.permissionId
|
||||
})
|
||||
this.title = data.length ? data[0].name : '站点拓扑'
|
||||
this.titleId = data.length ? data[0].id : undefined
|
||||
},
|
||||
disposition(val) {
|
||||
this.pageLocation = val
|
||||
this.show_point_dispostion = true
|
||||
},
|
||||
getDynamicPointData() {
|
||||
this.getData()
|
||||
},
|
||||
closePoint() {
|
||||
this.show_point_dispostion = false
|
||||
},
|
||||
|
||||
countChineseAndEnglishCharacters(str, x) {
|
||||
var chineseCount = str.match(/[\u4e00-\u9fa5]/g)
|
||||
? str.match(/[\u4e00-\u9fa5]/g).length
|
||||
: 0
|
||||
var englishCount = str.match(/[a-zA-Z]/g)
|
||||
? str.match(/[a-zA-Z]/g).length
|
||||
: 0
|
||||
var otherCount = str.length - chineseCount - englishCount
|
||||
const obj = {
|
||||
otherCount: otherCount,
|
||||
chineseCount: chineseCount,
|
||||
englishCount: englishCount
|
||||
}
|
||||
return (
|
||||
obj.englishCount * 8 + obj.chineseCount * 16 + obj.otherCount * 6 + x
|
||||
)
|
||||
},
|
||||
async getData() {
|
||||
this.loading = true
|
||||
|
||||
try {
|
||||
const res = await DynamicConfigPoint({
|
||||
permissionId: this.permissionId,
|
||||
stationId: this.stationId
|
||||
})
|
||||
this.pcsData_1 = []
|
||||
this.pcsData_2 = []
|
||||
this.pcsData_3 = []
|
||||
this.pcsData_4 = []
|
||||
this.pcsData_5 = []
|
||||
this.pcsData_6 = []
|
||||
this.pcsData_7 = []
|
||||
this.pcsData_8 = []
|
||||
this.pcsData_9 = []
|
||||
this.pcsData_10 = []
|
||||
this.ammeter_1 = []
|
||||
this.dotData = {
|
||||
gridLeft: 'M 0,0 0,0',
|
||||
gridRight: 'M 0,0 0,0',
|
||||
pcsFirst: 'M 0,0 0,0',
|
||||
pcsSecond: 'M 0,0 0,0',
|
||||
pcsThird: 'M 0,0 0,0',
|
||||
pcsFourth: 'M 0,0 0,0',
|
||||
pcsFifth: 'M 0,0 0,0',
|
||||
pcsSixth: 'M 0,0 0,0',
|
||||
pcsSeventh: 'M 0,0 0,0',
|
||||
pcsEighth: 'M 0,0 0,0',
|
||||
pcsNinth: 'M 0,0 0,0',
|
||||
pcsTenth: 'M 0,0 0,0'
|
||||
}
|
||||
if (res.data.length) {
|
||||
res.data.forEach((item) => {
|
||||
if (item.pageLocation === 'tenth_pcs_1') {
|
||||
this.pcsData_1.push(item)
|
||||
} else if (item.pageLocation === 'tenth_pcs_2') {
|
||||
this.pcsData_2.push(item)
|
||||
} else if (item.pageLocation === 'tenth_pcs_3') {
|
||||
this.pcsData_3.push(item)
|
||||
} else if (item.pageLocation === 'tenth_pcs_4') {
|
||||
this.pcsData_4.push(item)
|
||||
} else if (item.pageLocation === 'tenth_pcs_5') {
|
||||
this.pcsData_5.push(item)
|
||||
} else if (item.pageLocation === 'tenth_pcs_6') {
|
||||
this.pcsData_6.push(item)
|
||||
} else if (item.pageLocation === 'tenth_pcs_7') {
|
||||
this.pcsData_7.push(item)
|
||||
} else if (item.pageLocation === 'tenth_pcs_8') {
|
||||
this.pcsData_8.push(item)
|
||||
} else if (item.pageLocation === 'tenth_pcs_9') {
|
||||
this.pcsData_9.push(item)
|
||||
} else if (item.pageLocation === 'tenth_pcs_10') {
|
||||
this.pcsData_10.push(item)
|
||||
} else if (item.pageLocation === 'tenth_ammeter_1') {
|
||||
this.ammeter_1.push(item)
|
||||
} else if (item.pageLocation === 'grid_left') {
|
||||
if (+item.value > 0) {
|
||||
this.dotData.gridLeft = 'M 0,0 470,0'
|
||||
} else if (+item.value < 0) {
|
||||
this.dotData.gridLeft = 'M 470,0 0,0'
|
||||
} else {
|
||||
this.dotData.gridLeft = 'M 0,0 0,0'
|
||||
}
|
||||
} else if (item.pageLocation === 'pcs_first') {
|
||||
if (+item.value > 0) {
|
||||
this.dotData.pcsFirst = 'M 257,-250 257,0 0,0'
|
||||
} else if (+item.value < 0) {
|
||||
this.dotData.pcsFirst = 'M 0,0 257,0 257,-250'
|
||||
} else {
|
||||
this.dotData.pcsFirst = 'M 0,0 0,0'
|
||||
}
|
||||
} else if (item.pageLocation === 'pcs_second') {
|
||||
if (+item.value > 0) {
|
||||
this.dotData.pcsSecond = 'M 185, -250 185,0 0,0'
|
||||
} else if (+item.value < 0) {
|
||||
this.dotData.pcsSecond = 'M 0,0 185,0 185,-250'
|
||||
} else {
|
||||
this.dotData.pcsSecond = 'M 0,0 0,0'
|
||||
}
|
||||
} else if (item.pageLocation === 'pcs_third') {
|
||||
if (+item.value > 0) {
|
||||
this.dotData.pcsThird = 'M 115,-250 115,0 0,0'
|
||||
} else if (+item.value < 0) {
|
||||
this.dotData.pcsThird = 'M 0,0 115,0 115,-250'
|
||||
} else {
|
||||
this.dotData.pcsThird = 'M 0,0 0,0'
|
||||
}
|
||||
} else if (item.pageLocation === 'pcs_fourth') {
|
||||
if (+item.value > 0) {
|
||||
this.dotData.pcsFourth = 'M 45,-250 45,0 0,0'
|
||||
} else if (+item.value < 0) {
|
||||
this.dotData.pcsFourth = 'M 0,0 45,0 45,-250'
|
||||
} else {
|
||||
this.dotData.pcsFourth = 'M 0,0 0,0'
|
||||
}
|
||||
} else if (item.pageLocation === 'pcs_fifth') {
|
||||
if (+item.value > 0) {
|
||||
this.dotData.pcsFifth = 'M -25,-250 -25,0 0,0'
|
||||
} else if (+item.value < 0) {
|
||||
this.dotData.pcsFifth = 'M 0,0 -25,0 -25,-250'
|
||||
} else {
|
||||
this.dotData.pcsFifth = 'M 0,0 0,0'
|
||||
}
|
||||
} else if (item.pageLocation === 'pcs_sixth') {
|
||||
if (+item.value > 0) {
|
||||
this.dotData.pcsSixth = 'M -95,-250 -95,0 0,0'
|
||||
} else if (+item.value < 0) {
|
||||
this.dotData.pcsSixth = 'M 0,0 -95,0 -95,-250'
|
||||
} else {
|
||||
this.dotData.pcsSixth = 'M 0,0 0,0'
|
||||
}
|
||||
} else if (item.pageLocation === 'pcs_seventh') {
|
||||
if (+item.value > 0) {
|
||||
this.dotData.pcsSeventh = 'M -165,-250 -165,0 0,0'
|
||||
} else if (+item.value < 0) {
|
||||
this.dotData.pcsSeventh = 'M 0,0 -165,0 -165,-250'
|
||||
} else {
|
||||
this.dotData.pcsSeventh = 'M 0,0 0,0'
|
||||
}
|
||||
} else if (item.pageLocation === 'pcs_eighth') {
|
||||
if (+item.value > 0) {
|
||||
this.dotData.pcsEighth = 'M -235,-250 -235,0 0,0'
|
||||
} else if (+item.value < 0) {
|
||||
this.dotData.pcsEighth = 'M 0,0 -235,0 -235,-250'
|
||||
} else {
|
||||
this.dotData.pcsEighth = 'M 0,0 0,0'
|
||||
}
|
||||
} else if (item.pageLocation === 'pcs_ninth') {
|
||||
if (+item.value > 0) {
|
||||
this.dotData.pcsNinth = 'M -305,-250 -305,0 0,0'
|
||||
} else if (+item.value < 0) {
|
||||
this.dotData.pcsNinth = 'M 0,0 -305,0 -305,-250'
|
||||
} else {
|
||||
this.dotData.pcsNinth = 'M 0,0 0,0'
|
||||
}
|
||||
} else if (item.pageLocation === 'pcs_tenth') {
|
||||
if (+item.value > 0) {
|
||||
this.dotData.pcsTenth = 'M -360,-250 -360,0 0,0'
|
||||
} else if (+item.value < 0) {
|
||||
this.dotData.pcsTenth = 'M 0, 0 -360,0 -360,-250'
|
||||
} else {
|
||||
this.dotData.pcsTenth = 'M 0,0 0,0'
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
this.queryDynamicConfigTitle()
|
||||
} catch (error) {
|
||||
// console.log(error);
|
||||
} finally {
|
||||
this.loading = false
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.center-box {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
@mixin move-round($duration, $delay) {
|
||||
fill: none;
|
||||
stroke-width: 5;
|
||||
stroke-linejoin: round;
|
||||
stroke-linecap: round;
|
||||
stroke-dasharray: 3, 900;
|
||||
stroke-dashoffset: 0;
|
||||
animation: lineMove $duration $delay cubic-bezier(0, 0, 0.74, 0.74) infinite;
|
||||
}
|
||||
|
||||
@keyframes lineMove {
|
||||
0% {
|
||||
stroke-dashoffset: -850;
|
||||
}
|
||||
100% {
|
||||
stroke-dashoffset: -0;
|
||||
}
|
||||
}
|
||||
.g-rect-fill-two {
|
||||
@include move-round(3.5s, 1s);
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,95 @@
|
||||
<template>
|
||||
<ItemBox :title="$t('dashboard.stationTopo')" style="min-height: 560px">
|
||||
<div slot="header">
|
||||
<div class="header-right-box">
|
||||
<div class="header-title" :class="{'active':tabPosition === 1}" @click="changeTab(1)">1#{{ $t('dashboard.cnz') }}</div>
|
||||
<div class="header-title" :class="{'active':tabPosition === 2}" @click="changeTab(2)">2#{{ $t('dashboard.cnz') }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div ref="svgLine" class="center-box">
|
||||
<first v-if="tabPosition === 1" ref="firstToPu" :station-id="stationId" :permission-id="permissionId" />
|
||||
<second v-if="tabPosition === 2" ref="secondToPu" :station-id="stationId" :permission-id="permissionId" />
|
||||
</div>
|
||||
|
||||
</ItemBox>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import first from './thirteenComponents/first.vue'
|
||||
import second from './thirteenComponents/second.vue'
|
||||
export default {
|
||||
name: 'Index',
|
||||
components: { first, second },
|
||||
data() {
|
||||
return {
|
||||
tabPosition: 1,
|
||||
stationId: null,
|
||||
permissionId: null
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
currentStation() {
|
||||
return this.$store.getters.currentStation || undefined
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
currentStation: {
|
||||
handler(val) {
|
||||
if (val && val.id) {
|
||||
this.stationId = val.id
|
||||
}
|
||||
},
|
||||
deep: true,
|
||||
immediate: true
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
changeTab(val) {
|
||||
this.tabPosition = val
|
||||
this.$nextTick(() => {
|
||||
this.getData()
|
||||
})
|
||||
},
|
||||
getData() {
|
||||
if (this.$store.getters.menuList.length) {
|
||||
this.permissionId = this.$store.getters.menuList.find((item) => {
|
||||
return item.url === this.$route.path
|
||||
}).id
|
||||
}
|
||||
if (this.tabPosition === 1) {
|
||||
this.$refs.firstToPu.getData()
|
||||
} else if (this.tabPosition === 2) {
|
||||
this.$refs.secondToPu.getData()
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.center-box {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.header-right-box {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
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%);
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,643 @@
|
||||
<template>
|
||||
<ItemBox :title="$t('dashboard.stationTopo')" style="min-height: 560px;">
|
||||
<div ref="svgLine" class="center-box">
|
||||
<div v-loading="loading">
|
||||
<svg
|
||||
version="1.1"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||
xml:space="preserve"
|
||||
class="circle-load-rect-svg"
|
||||
viewBox="0 0 800 500"
|
||||
>
|
||||
<defs>
|
||||
<defs>
|
||||
<radialGradient id="RadialGradient1">
|
||||
<stop offset="0%" stop-color="#fff" />
|
||||
<stop offset="30%" stop-color="#0171c1" />
|
||||
<stop offset="50%" stop-color="#035088" />
|
||||
<stop offset="100%" stop-color="#02395a" />
|
||||
</radialGradient>
|
||||
</defs>
|
||||
<marker
|
||||
id="markerCircle"
|
||||
markerWidth="15"
|
||||
markerHeight="15"
|
||||
refX="5"
|
||||
refY="5"
|
||||
>
|
||||
<circle
|
||||
cx="5"
|
||||
cy="5"
|
||||
r="5"
|
||||
style="stroke: none; fill: url(#RadialGradient1)"
|
||||
/>
|
||||
</marker>
|
||||
|
||||
<marker
|
||||
id="markerArrow"
|
||||
markerWidth="13"
|
||||
markerHeight="13"
|
||||
refX="2"
|
||||
refY="6"
|
||||
orient="auto"
|
||||
>
|
||||
<path d="M2,2 L2,11 L10,6 L2,2" style="fill: black" />
|
||||
</marker>
|
||||
</defs>
|
||||
<!-- //线条 -->
|
||||
<!-- top -->
|
||||
<polyline
|
||||
points="154,80 385,80"
|
||||
fill="none"
|
||||
class="g-rect-path"
|
||||
stroke="#0094FF"
|
||||
stroke-dasharray="3 3"
|
||||
/>
|
||||
<rect
|
||||
x="154"
|
||||
y="78"
|
||||
width="231"
|
||||
height="4"
|
||||
:style="{ fill: 'rgba(100,100,100,0)', stroke: 'transparent',cursor: 'pointer' }"
|
||||
@click="lookDeviceDetail('line-top-left')"
|
||||
/>
|
||||
<polyline
|
||||
points="385,80 600,80"
|
||||
fill="none"
|
||||
class="g-rect-path"
|
||||
stroke="#0094FF"
|
||||
stroke-dasharray="3 3"
|
||||
/>
|
||||
<rect
|
||||
x="385"
|
||||
y="78"
|
||||
width="215"
|
||||
height="4"
|
||||
:style="{ fill: 'rgba(100,100,100,0)', stroke: 'transparent',cursor: 'pointer' }"
|
||||
@click="lookDeviceDetail('line-top-right')"
|
||||
/>
|
||||
|
||||
<!-- center -->
|
||||
<polyline
|
||||
points="385,80 385,363"
|
||||
fill="none"
|
||||
class="g-rect-path"
|
||||
stroke="#0094FF"
|
||||
stroke-dasharray="3 3"
|
||||
/>
|
||||
<rect
|
||||
x="383"
|
||||
y="80"
|
||||
width="4"
|
||||
height="281"
|
||||
:style="{ fill: 'rgba(100,100,100,0)', stroke: 'transparent',cursor: 'pointer' }"
|
||||
@click="lookDeviceDetail('line-bottom-center')"
|
||||
/>
|
||||
|
||||
<polyline
|
||||
points="385,160 460,160"
|
||||
fill="none"
|
||||
class="g-rect-path"
|
||||
stroke="#0094FF"
|
||||
stroke-dasharray="3 3"
|
||||
/>
|
||||
|
||||
<!-- bottom -->
|
||||
<polyline
|
||||
points="104,363 385,363"
|
||||
fill="none"
|
||||
class="g-rect-path"
|
||||
stroke="#0094FF"
|
||||
stroke-dasharray="3 3"
|
||||
/>
|
||||
<rect
|
||||
x="104"
|
||||
y="361"
|
||||
width="283"
|
||||
height="4"
|
||||
:style="{ fill: 'rgba(100,100,100,0)', stroke: 'transparent',cursor: 'pointer' }"
|
||||
@click="lookDeviceDetail('line-bottom-left')"
|
||||
/>
|
||||
|
||||
<polyline
|
||||
points="385,363 655,363"
|
||||
fill="none"
|
||||
class="g-rect-path"
|
||||
stroke="#0094FF"
|
||||
stroke-dasharray="3 3"
|
||||
/>
|
||||
<rect
|
||||
x="383"
|
||||
y="361"
|
||||
width="272"
|
||||
height="4"
|
||||
:style="{ fill: 'rgba(100,100,100,0)', stroke: 'transparent',cursor: 'pointer' }"
|
||||
@click="lookDeviceDetail('line-bottom-right')"
|
||||
/>
|
||||
<!-- top -->
|
||||
<circle
|
||||
cx="154"
|
||||
cy="80"
|
||||
r="8"
|
||||
style="stroke: none; fill: url(#RadialGradient1)"
|
||||
/>
|
||||
<circle
|
||||
cx="600"
|
||||
cy="80"
|
||||
r="8"
|
||||
style="stroke: none; fill: url(#RadialGradient1)"
|
||||
/>
|
||||
|
||||
<!-- 动点 -->
|
||||
<circle
|
||||
cx="154"
|
||||
cy="80"
|
||||
r="8"
|
||||
style="stroke: none; fill: url(#RadialGradient1)"
|
||||
>
|
||||
<animateMotion
|
||||
repeatCount="indefinite"
|
||||
dur="4s"
|
||||
begin="0s"
|
||||
:path="dotData.lineTopLeft"
|
||||
/>
|
||||
</circle>
|
||||
<circle
|
||||
cx="385"
|
||||
cy="363"
|
||||
r="8"
|
||||
style="stroke: none; fill: url(#RadialGradient1)"
|
||||
>
|
||||
<animateMotion
|
||||
repeatCount="indefinite"
|
||||
dur="4s"
|
||||
begin="2s"
|
||||
:path="dotData.lineCenter"
|
||||
/>
|
||||
</circle>
|
||||
<circle
|
||||
cx="600"
|
||||
cy="80"
|
||||
r="8"
|
||||
style="stroke: none; fill: url(#RadialGradient1)"
|
||||
>
|
||||
<animateMotion
|
||||
repeatCount="indefinite"
|
||||
dur="4s"
|
||||
begin="0s"
|
||||
:path="dotData.lineTopRight"
|
||||
/>
|
||||
</circle>
|
||||
|
||||
<!-- bottom -->
|
||||
<circle
|
||||
cx="104"
|
||||
cy="363"
|
||||
r="8"
|
||||
style="stroke: none; fill: url(#RadialGradient1)"
|
||||
/>
|
||||
<circle
|
||||
cx="385"
|
||||
cy="363"
|
||||
r="8"
|
||||
style="stroke: none; fill: url(#RadialGradient1)"
|
||||
/>
|
||||
<circle
|
||||
cx="655"
|
||||
cy="363"
|
||||
r="8"
|
||||
style="stroke: none; fill: url(#RadialGradient1)"
|
||||
/>
|
||||
|
||||
<circle
|
||||
cx="385"
|
||||
cy="363"
|
||||
r="8"
|
||||
style="stroke: none; fill: url(#RadialGradient1)"
|
||||
/>
|
||||
|
||||
<circle
|
||||
cx="104"
|
||||
cy="363"
|
||||
r="8"
|
||||
style="stroke: none; fill: url(#RadialGradient1)"
|
||||
>
|
||||
<animateMotion
|
||||
repeatCount="indefinite"
|
||||
dur="4s"
|
||||
begin="2s"
|
||||
:path="dotData.lineBottomLeft"
|
||||
/>
|
||||
</circle>
|
||||
|
||||
<circle
|
||||
cx="655"
|
||||
cy="363"
|
||||
r="8"
|
||||
style="stroke: none; fill: url(#RadialGradient1)"
|
||||
>
|
||||
<animateMotion
|
||||
repeatCount="indefinite"
|
||||
dur="4s"
|
||||
begin="2s"
|
||||
:path="dotData.lineBottomRight"
|
||||
/>
|
||||
</circle>
|
||||
<!-- 图片和文字 -->
|
||||
|
||||
<!-- 市电 -->
|
||||
<image
|
||||
:xlink:href="configData.grid"
|
||||
x="70"
|
||||
y="30"
|
||||
width="90"
|
||||
height="117"
|
||||
/>
|
||||
<text x="90" y="160" fill="#ffffff" font-size="14"> {{ $t("dashboard.grid") }}</text>
|
||||
|
||||
<!-- {{ $t("dashboard.load") }} -->
|
||||
<image
|
||||
:xlink:href="configData.house"
|
||||
x="610"
|
||||
y="30"
|
||||
width="90"
|
||||
height="117"
|
||||
/>
|
||||
<text x="645" y="160" fill="#ffffff" font-size="14"> {{ $t("dashboard.load") }}</text>
|
||||
|
||||
<!-- 1#PCS -->
|
||||
<image
|
||||
:xlink:href="configData.pcs2"
|
||||
x="65"
|
||||
y="383"
|
||||
width="90"
|
||||
height="90"
|
||||
style="cursor: pointer;"
|
||||
@click="lookDeviceDetail('triad-pcs-left')"
|
||||
/>
|
||||
<text x="86" y="490" fill="#ffffff" font-size="14">1#{{ $t("dashboard.cabinet") }}</text>
|
||||
<image
|
||||
:xlink:href="configData.pcs2"
|
||||
x="335"
|
||||
y="383"
|
||||
width="90"
|
||||
height="90"
|
||||
style="cursor: pointer;"
|
||||
@click="lookDeviceDetail('triad-pcs-center')"
|
||||
/>
|
||||
<text x="360" y="490" fill="#ffffff" font-size="14">
|
||||
2#{{ $t("dashboard.cabinet") }}
|
||||
</text>
|
||||
<image
|
||||
:xlink:href="configData.pcs2"
|
||||
x="594"
|
||||
y="383"
|
||||
width="90"
|
||||
height="90"
|
||||
style="cursor: pointer;"
|
||||
@click="lookDeviceDetail('triad-pcs-right')"
|
||||
/>
|
||||
<text x="614" y="490" fill="#ffffff" font-size="14">3#{{ $t("dashboard.cabinet") }}</text>
|
||||
|
||||
<!-- 变压器 -->
|
||||
<image
|
||||
:xlink:href="configData.gui"
|
||||
x="320"
|
||||
y="193"
|
||||
width="140"
|
||||
height="105"
|
||||
/>
|
||||
|
||||
<!-- {{ $t("dashboard.ammeter") }} -->
|
||||
<image
|
||||
:xlink:href="ammeterImg"
|
||||
x="455"
|
||||
y="130"
|
||||
width="100"
|
||||
height="60"
|
||||
style="cursor: pointer;"
|
||||
@click="lookDeviceDetail('triad-ammeter')"
|
||||
/>
|
||||
|
||||
<!-- 瞬时总有功 -->
|
||||
|
||||
<g v-for="(item,index) in ammeterData" :key="item.id">
|
||||
<text x="435" :y="220 + ( 20 * index)" fill="#ffffff" font-size="14">
|
||||
{{ item.name }}
|
||||
</text>
|
||||
<text :x="countChineseAndEnglishCharacters(item.name,435)" :y="220 + ( 20 * index)" fill="#FFB800" font-size="14">
|
||||
{{ item.value }}
|
||||
</text>
|
||||
</g>
|
||||
|
||||
<!-- 左侧 1PCS -->
|
||||
<g v-for="(item,index) in pcsLeftData" :key="item.id">
|
||||
<text x="85" :y="280 + ( 20 * index)" fill="#ffffff" font-size="14">
|
||||
{{ item.name }}
|
||||
</text>
|
||||
<text :x="countChineseAndEnglishCharacters(item.name,85)" :y="280 + ( 20 * index)" fill="#FFB800" font-size="14">
|
||||
{{ item.value }}
|
||||
</text>
|
||||
</g>
|
||||
|
||||
<!-- 中间 2PCS -->
|
||||
<g v-for="(item,index) in pcsCenterData" :key="item.id">
|
||||
<text x="420" :y="280 + ( 20 * index)" fill="#ffffff" font-size="14">
|
||||
{{ item.name }}
|
||||
</text>
|
||||
<text :x="countChineseAndEnglishCharacters(item.name,420)" :y="280 + ( 20 * index)" fill="#FFB800" font-size="14">
|
||||
{{ item.value }}
|
||||
</text>
|
||||
</g>
|
||||
|
||||
<!-- 右侧 3PCS -->
|
||||
<g v-for="(item,index) in pcsRightData" :key="item.id">
|
||||
<text x="602" :y="280 + ( 20 * index)" fill="#ffffff" font-size="14">
|
||||
{{ item.name }}
|
||||
</text>
|
||||
<text :x="countChineseAndEnglishCharacters(item.name,602)" :y="280 + ( 20 * index)" fill="#FFB800" font-size="14">
|
||||
{{ item.value }}
|
||||
</text>
|
||||
</g>
|
||||
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<DispositionPointData
|
||||
:disposition-show="show_point_dispostion"
|
||||
:max="4"
|
||||
:page-location="pageLocation"
|
||||
@close="closePoint"
|
||||
@getData="getDynamicPointData"
|
||||
/>
|
||||
</ItemBox>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import gridImg from '@/assets/images/wxjd/grid.png'
|
||||
import ammeterImg from '@/assets/images/wxjd/ammeter.png'
|
||||
import cabinetImg from '@/assets/images/wxjd/pcs-energy.png'
|
||||
import chargingPileImg from '@/assets/images/home-office.png'
|
||||
import distributionCabinetImg from '@/assets/images/wxjd/guiImg.png'
|
||||
import frameImg from '@/assets/images/wxjd/frame.png'
|
||||
import cangImg from '@/assets/images/home-cang.png'
|
||||
import { DynamicConfigPoint } from '@/api/home-page/index'
|
||||
import config from './config'
|
||||
import { changeTheme } from '@/utils/index'
|
||||
export default {
|
||||
name: 'Index',
|
||||
props: {
|
||||
stationType: {
|
||||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
stationId: {
|
||||
type: Number,
|
||||
default: 0
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
gridImg,
|
||||
ammeterImg,
|
||||
cabinetImg,
|
||||
chargingPileImg,
|
||||
distributionCabinetImg,
|
||||
cangImg,
|
||||
frameImg,
|
||||
dotData: {
|
||||
lineTop: 'M 0,0 0,0',
|
||||
lineTopLeft: 'M 0,0 0,0',
|
||||
lineBottomLeft: 'M 0,0 0,0 0,0',
|
||||
lineBottomRight: 'M 0,0 0,0 0,0',
|
||||
lineBottomLeftTwo: 'M 0,0 0,0 0,0',
|
||||
lineBottomRightTwo: 'M 0,0 0,0 0,0'
|
||||
},
|
||||
|
||||
partList: [
|
||||
{ soc: 0, soh: 0, activePowerPCS: 0.0, reactivePowerPCS: 0.0 },
|
||||
{ soc: 0, soh: 0, activePowerPCS: 0.0, reactivePowerPCS: 0.0 },
|
||||
{ soc: 0, soh: 0, activePowerPCS: 0.0, reactivePowerPCS: 0.0 },
|
||||
{ soc: 0, soh: 0, activePowerPCS: 0.0, reactivePowerPCS: 0.0 }
|
||||
],
|
||||
loading: false,
|
||||
activePowerTotal: {},
|
||||
show_point_dispostion: false,
|
||||
pageLocation: '',
|
||||
permissionId: null,
|
||||
pcsLeftData: [],
|
||||
pcsCenterData: [],
|
||||
pcsRightData: [],
|
||||
ammeterData: [],
|
||||
configData: {}
|
||||
|
||||
}
|
||||
},
|
||||
computed: {},
|
||||
watch: {},
|
||||
created() {
|
||||
const result = changeTheme()
|
||||
this.configData = config[result]
|
||||
setTimeout(() => {
|
||||
if (this.$store.getters.menuList.length) {
|
||||
this.permissionId = this.$store.getters.menuList.find(item => {
|
||||
return item.url === this.$route.path
|
||||
}).id
|
||||
}
|
||||
}, 300)
|
||||
},
|
||||
mounted() {},
|
||||
methods: {
|
||||
countChineseAndEnglishCharacters(str, x) {
|
||||
var chineseCount = str.match(/[\u4e00-\u9fa5]/g) ? str.match(/[\u4e00-\u9fa5]/g).length : 0
|
||||
var englishCount = str.match(/[a-zA-Z]/g) ? str.match(/[a-zA-Z]/g).length : 0
|
||||
var otherCount = str.length - chineseCount - englishCount
|
||||
const obj = { otherCount: otherCount, chineseCount: chineseCount, englishCount: englishCount }
|
||||
return (obj.englishCount * 11) + (obj.chineseCount * 16) + (obj.otherCount * 8) + x
|
||||
},
|
||||
lookDeviceDetail(val) { // 查看设备详情
|
||||
this.pageLocation = val
|
||||
this.show_point_dispostion = true
|
||||
},
|
||||
closePoint() {
|
||||
this.show_point_dispostion = false
|
||||
},
|
||||
async getpcsCenter() {
|
||||
this.loading = true
|
||||
try {
|
||||
const res = await DynamicConfigPoint({
|
||||
pageLocation: 'triad-pcs-center',
|
||||
permissionId: this.permissionId,
|
||||
stationId: this.stationId })
|
||||
this.pcsCenterData = res.data
|
||||
} catch (error) {
|
||||
// console.log(error);
|
||||
} finally {
|
||||
this.loading = false
|
||||
}
|
||||
},
|
||||
async getLineStatus(type) {
|
||||
this.loading = true
|
||||
try {
|
||||
const res = await DynamicConfigPoint({
|
||||
pageLocation: type,
|
||||
permissionId: this.permissionId,
|
||||
stationId: this.stationId })
|
||||
if (type === 'line-bottom-left') {
|
||||
if (res.data?.length) {
|
||||
if (res.data[0].value > 0) {
|
||||
this.dotData.lineBottomLeft = 'M 283,0, 280, 0, 0 ,0'
|
||||
} else if (res.data[0].value < 0) {
|
||||
this.dotData.lineBottomLeft = 'M 0,0 281,0 281,0'
|
||||
} else {
|
||||
this.dotData.lineBottomLeft = ''
|
||||
}
|
||||
} else {
|
||||
this.dotData.lineBottomLeft = ''
|
||||
}
|
||||
} else if (type === 'line-bottom-right') {
|
||||
if (res.data?.length) {
|
||||
if (res.data[0].value > 0) {
|
||||
this.dotData.lineBottomRight = 'M -271, 0 , -271 , 0 , 0 , 0'
|
||||
} else if (res.data[0].value < 0) {
|
||||
this.dotData.lineBottomRight = 'M 0,0 -271,0 -271,0'
|
||||
} else {
|
||||
this.dotData.lineBottomRight = ''
|
||||
}
|
||||
} else {
|
||||
this.dotData.lineBottomRight = ''
|
||||
}
|
||||
} else if (type === 'line-bottom-center') {
|
||||
if (res.data?.length) {
|
||||
if (res.data[0].value > 0) {
|
||||
this.dotData.lineCenter = 'M 0,-283,0,0,0,0'
|
||||
} else if (res.data[0].value < 0) {
|
||||
this.dotData.lineCenter = 'M 0,0,0,0,0,-283'
|
||||
} else {
|
||||
this.dotData.lineCenter = ''
|
||||
}
|
||||
} else {
|
||||
this.dotData.lineCenter = ''
|
||||
}
|
||||
} else if (type === 'line-top-left') {
|
||||
if (res.data?.length) {
|
||||
if (res.data[0].value > 0) {
|
||||
this.dotData.lineTopLeft = 'M 230,0 0,0'
|
||||
} else if (res.data[0].value < 0) {
|
||||
this.dotData.lineTopLeft = 'M 0,0 225,0'
|
||||
} else {
|
||||
this.dotData.lineTopLeft = ''
|
||||
}
|
||||
} else {
|
||||
this.dotData.lineTopLeft = ''
|
||||
}
|
||||
} else if (type === 'line-top-right') {
|
||||
if (res.data?.length) {
|
||||
if (res.data[0].value > 0) {
|
||||
this.dotData.lineTopRight = 'M -230,0 0,0'
|
||||
} else if (res.data[0].value < 0) {
|
||||
this.dotData.lineTopRight = 'M 0,0 -225,0'
|
||||
} else {
|
||||
this.dotData.lineTopRight = ''
|
||||
}
|
||||
} else {
|
||||
this.dotData.lineTopRight = ''
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
// console.log(error);
|
||||
} finally {
|
||||
this.loading = false
|
||||
}
|
||||
},
|
||||
async getpcsLeft() {
|
||||
this.loading = true
|
||||
try {
|
||||
const res = await DynamicConfigPoint({
|
||||
pageLocation: 'triad-pcs-left',
|
||||
permissionId: this.permissionId,
|
||||
stationId: this.stationId })
|
||||
this.pcsLeftData = res.data
|
||||
} catch (error) {
|
||||
// console.log(error);
|
||||
} finally {
|
||||
this.loading = false
|
||||
}
|
||||
},
|
||||
async getammeter() {
|
||||
this.loading = true
|
||||
try {
|
||||
const res = await DynamicConfigPoint({
|
||||
pageLocation: 'triad-ammeter',
|
||||
permissionId: this.permissionId,
|
||||
stationId: this.stationId })
|
||||
this.ammeterData = res.data
|
||||
} catch (error) {
|
||||
// console.log(error);
|
||||
} finally {
|
||||
this.loading = false
|
||||
}
|
||||
},
|
||||
async getpcsRight() {
|
||||
this.loading = true
|
||||
try {
|
||||
const res = await DynamicConfigPoint({
|
||||
pageLocation: 'triad-pcs-right',
|
||||
permissionId: this.permissionId,
|
||||
stationId: this.stationId })
|
||||
this.pcsRightData = res.data
|
||||
} catch (error) {
|
||||
// console.log(error);
|
||||
} finally {
|
||||
this.loading = false
|
||||
}
|
||||
},
|
||||
|
||||
getData() {
|
||||
this.getpcsRight()
|
||||
this.getpcsCenter()
|
||||
this.getpcsLeft()
|
||||
this.getammeter()
|
||||
this.getLineStatus('line-bottom-left')
|
||||
this.getLineStatus('line-bottom-center')
|
||||
this.getLineStatus('line-bottom-right')
|
||||
this.getLineStatus('line-top-left')
|
||||
this.getLineStatus('line-top-right')
|
||||
this.$forceUpdate()
|
||||
},
|
||||
getDynamicPointData() {
|
||||
this.getData()
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.center-box {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
@mixin move-round($duration, $delay) {
|
||||
fill: none;
|
||||
stroke-width: 5;
|
||||
stroke-linejoin: round;
|
||||
stroke-linecap: round;
|
||||
stroke-dasharray: 3, 900;
|
||||
stroke-dashoffset: 0;
|
||||
animation: lineMove $duration $delay cubic-bezier(0, 0, 0.74, 0.74) infinite;
|
||||
}
|
||||
|
||||
@keyframes lineMove {
|
||||
0% {
|
||||
stroke-dashoffset: -850;
|
||||
}
|
||||
100% {
|
||||
stroke-dashoffset: -0;
|
||||
}
|
||||
}
|
||||
.g-rect-fill-two {
|
||||
@include move-round(3.5s, 1s);
|
||||
}
|
||||
</style>
|
||||
583
src/views/dashboardtest/components/top-center/triad.vue
Normal file
583
src/views/dashboardtest/components/top-center/triad.vue
Normal file
@ -0,0 +1,583 @@
|
||||
<template>
|
||||
<ItemBox :title="$t('dashboard.stationTopo')" style="min-height: 560px;">
|
||||
<div ref="svgLine" class="center-box">
|
||||
<div v-loading="loading">
|
||||
<svg
|
||||
version="1.1"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||
xml:space="preserve"
|
||||
class="circle-load-rect-svg"
|
||||
viewBox="0 0 800 500"
|
||||
>
|
||||
<defs>
|
||||
<defs>
|
||||
<radialGradient id="RadialGradient1">
|
||||
<stop offset="0%" stop-color="#fff" />
|
||||
<stop offset="30%" stop-color="#0171c1" />
|
||||
<stop offset="50%" stop-color="#035088" />
|
||||
<stop offset="100%" stop-color="#02395a" />
|
||||
</radialGradient>
|
||||
</defs>
|
||||
<marker
|
||||
id="markerCircle"
|
||||
markerWidth="15"
|
||||
markerHeight="15"
|
||||
refX="5"
|
||||
refY="5"
|
||||
>
|
||||
<circle
|
||||
cx="5"
|
||||
cy="5"
|
||||
r="5"
|
||||
style="stroke: none; fill: url(#RadialGradient1)"
|
||||
/>
|
||||
</marker>
|
||||
|
||||
<marker
|
||||
id="markerArrow"
|
||||
markerWidth="13"
|
||||
markerHeight="13"
|
||||
refX="2"
|
||||
refY="6"
|
||||
orient="auto"
|
||||
>
|
||||
<path d="M2,2 L2,11 L10,6 L2,2" style="fill: black" />
|
||||
</marker>
|
||||
</defs>
|
||||
<!-- //线条 -->
|
||||
<!-- top -->
|
||||
<polyline
|
||||
points="154,80 600,80"
|
||||
fill="none"
|
||||
class="g-rect-path"
|
||||
stroke="#0094FF"
|
||||
stroke-dasharray="3 3"
|
||||
/>
|
||||
<!-- center -->
|
||||
<polyline
|
||||
points="385,80 385,363"
|
||||
fill="none"
|
||||
class="g-rect-path"
|
||||
stroke="#0094FF"
|
||||
stroke-dasharray="3 3"
|
||||
/>
|
||||
|
||||
<polyline
|
||||
points="385,160 460,160"
|
||||
fill="none"
|
||||
class="g-rect-path"
|
||||
stroke="#0094FF"
|
||||
stroke-dasharray="3 3"
|
||||
/>
|
||||
|
||||
<!-- bottom -->
|
||||
<polyline
|
||||
points="104,363 655,363"
|
||||
fill="none"
|
||||
class="g-rect-path"
|
||||
stroke="#0094FF"
|
||||
stroke-dasharray="3 3"
|
||||
/>
|
||||
|
||||
<!-- top -->
|
||||
<circle
|
||||
cx="154"
|
||||
cy="80"
|
||||
r="8"
|
||||
style="stroke: none; fill: url(#RadialGradient1)"
|
||||
/>
|
||||
<circle
|
||||
cx="600"
|
||||
cy="80"
|
||||
r="8"
|
||||
style="stroke: none; fill: url(#RadialGradient1)"
|
||||
/>
|
||||
|
||||
<!-- 动点 -->
|
||||
<circle
|
||||
cx="154"
|
||||
cy="80"
|
||||
r="8"
|
||||
style="stroke: none; fill: url(#RadialGradient1)"
|
||||
>
|
||||
<animateMotion
|
||||
repeatCount="indefinite"
|
||||
dur="4s"
|
||||
begin="0s"
|
||||
:path="dotData.lineTop"
|
||||
/>
|
||||
</circle>
|
||||
|
||||
<circle
|
||||
cx="460"
|
||||
cy="160"
|
||||
r="8"
|
||||
style="stroke: none; fill: url(#RadialGradient1)"
|
||||
>
|
||||
<!-- <animateMotion
|
||||
repeatCount="indefinite"
|
||||
dur="4s"
|
||||
begin="0s"
|
||||
:path="dotData.lineTop"
|
||||
/> -->
|
||||
</circle>
|
||||
|
||||
<!-- bottom -->
|
||||
<circle
|
||||
cx="104"
|
||||
cy="363"
|
||||
r="8"
|
||||
style="stroke: none; fill: url(#RadialGradient1)"
|
||||
/>
|
||||
<circle
|
||||
cx="385"
|
||||
cy="363"
|
||||
r="8"
|
||||
style="stroke: none; fill: url(#RadialGradient1)"
|
||||
/>
|
||||
<circle
|
||||
cx="655"
|
||||
cy="363"
|
||||
r="8"
|
||||
style="stroke: none; fill: url(#RadialGradient1)"
|
||||
/>
|
||||
|
||||
<circle
|
||||
cx="104"
|
||||
cy="363"
|
||||
r="8"
|
||||
style="stroke: none; fill: url(#RadialGradient1)"
|
||||
>
|
||||
<animateMotion
|
||||
repeatCount="indefinite"
|
||||
dur="4s"
|
||||
begin="2s"
|
||||
:path="dotData.lineBottomLeft"
|
||||
/>
|
||||
</circle>
|
||||
|
||||
<circle
|
||||
cx="655"
|
||||
cy="363"
|
||||
r="8"
|
||||
style="stroke: none; fill: url(#RadialGradient1)"
|
||||
>
|
||||
<animateMotion
|
||||
repeatCount="indefinite"
|
||||
dur="4s"
|
||||
begin="2s"
|
||||
:path="dotData.lineBottomRight"
|
||||
/>
|
||||
</circle>
|
||||
|
||||
<circle
|
||||
cx="385"
|
||||
cy="363"
|
||||
r="8"
|
||||
style="stroke: none; fill: url(#RadialGradient1)"
|
||||
>
|
||||
<animateMotion
|
||||
repeatCount="indefinite"
|
||||
dur="4s"
|
||||
begin="2s"
|
||||
:path="dotData.lineCenter"
|
||||
/>
|
||||
</circle>
|
||||
|
||||
<!-- 图片和文字 -->
|
||||
|
||||
<!-- 市电 -->
|
||||
<image
|
||||
:xlink:href="configData.grid"
|
||||
x="70"
|
||||
y="30"
|
||||
width="90"
|
||||
height="117"
|
||||
/>
|
||||
|
||||
<!-- {{ $t("dashboard.load") }} -->
|
||||
<image
|
||||
:xlink:href="configData.house"
|
||||
x="610"
|
||||
y="30"
|
||||
width="90"
|
||||
height="117"
|
||||
/>
|
||||
<text x="645" y="160" fill="#ffffff" font-size="14"> {{ $t("dashboard.load") }}</text>
|
||||
|
||||
<!-- 1#PCS -->
|
||||
<image
|
||||
:xlink:href="configData.pcs2"
|
||||
x="95"
|
||||
y="383"
|
||||
width="90"
|
||||
height="90"
|
||||
/>
|
||||
<text x="116" y="490" fill="#ffffff" font-size="14">
|
||||
1#{{ $t("dashboard.cabinet") }}
|
||||
</text>
|
||||
|
||||
<image
|
||||
:xlink:href="configData.pcs2"
|
||||
x="335"
|
||||
y="383"
|
||||
width="90"
|
||||
height="90"
|
||||
/>
|
||||
<text x="360" y="490" fill="#ffffff" font-size="14">
|
||||
2#{{ $t("dashboard.cabinet") }}
|
||||
</text>
|
||||
|
||||
<image
|
||||
:xlink:href="configData.pcs2"
|
||||
x="574"
|
||||
y="383"
|
||||
width="90"
|
||||
height="90"
|
||||
/>
|
||||
<text x="604" y="490" fill="#ffffff" font-size="14">
|
||||
3#{{ $t("dashboard.cabinet") }}
|
||||
</text>
|
||||
|
||||
<!-- 变压器 -->
|
||||
<image
|
||||
:xlink:href="configData.gui"
|
||||
x="320"
|
||||
y="193"
|
||||
width="140"
|
||||
height="105"
|
||||
/>
|
||||
|
||||
<!-- {{ $t("dashboard.ammeter") }} -->
|
||||
<image
|
||||
:xlink:href="ammeterImg"
|
||||
x="455"
|
||||
y="130"
|
||||
width="100"
|
||||
height="60"
|
||||
/>
|
||||
<!-- 瞬时总有功 -->
|
||||
<text x="435" y="220" fill="#ffffff" font-size="14">
|
||||
{{ $t("dashboard.totalP") }}(kW)：
|
||||
</text>
|
||||
<text x="545" y="220" fill="#ffb800" font-size="14">
|
||||
{{ activePowerTotal.activePower }}
|
||||
</text>
|
||||
|
||||
<!-- 左侧 -->
|
||||
<!-- 1#PCS -->
|
||||
<text x="85" y="280" fill="#ffffff" font-size="14">SOC(%)：</text>
|
||||
<text x="155" y="280" fill="#ffb800" font-size="14">
|
||||
{{ partList.length > 0 ? partList[0].soc : 0 }}
|
||||
</text>
|
||||
<text x="85" y="300" fill="#ffffff" font-size="14">SOH(%)：</text>
|
||||
<text x="155" y="300" fill="#ffb800" font-size="14">
|
||||
{{ partList.length > 0 ? partList[0].soh : 0 }}
|
||||
</text>
|
||||
|
||||
<text x="85" y="320" fill="#ffffff" font-size="14">
|
||||
{{ $t("dashboard.workStatus") }}：
|
||||
</text>
|
||||
<text x="175" y="320" fill="#ffb800" font-size="14">
|
||||
{{ workStatus(partList[0].activePowerPCS, 0) }}
|
||||
</text>
|
||||
<text x="85" y="340" fill="#ffffff" font-size="14">
|
||||
{{ $t("dashboard.activePower") }}({{
|
||||
partList.length > 0
|
||||
? partList[0].activePowerPCS
|
||||
: 0 | kwUnitFormat
|
||||
}})：
|
||||
</text>
|
||||
<text x="185" y="340" fill="#ffb800" font-size="14">
|
||||
{{
|
||||
partList.length > 0
|
||||
? partList[0].activePowerPCS
|
||||
: 0 | kWFormat(2)
|
||||
}}
|
||||
</text>
|
||||
<!-- 中间 2PCS -->
|
||||
|
||||
<text x="420" y="280" fill="#ffffff" font-size="14">
|
||||
SOC(%)：
|
||||
</text>
|
||||
<text x="492" y="280" fill="#ffb800" font-size="14">
|
||||
{{ partList.length > 0 ? partList[1].soc : 0 }}
|
||||
</text>
|
||||
<text x="420" y="300" fill="#ffffff" font-size="14">
|
||||
SOH(%)：
|
||||
</text>
|
||||
<text x="492" y="300" fill="#ffb800" font-size="14">
|
||||
{{ partList.length > 0 ? partList[1].soh : 0 }}
|
||||
</text>
|
||||
<text x="420" y="320" fill="#ffffff" font-size="14">
|
||||
{{ $t("dashboard.workStatus") }}：
|
||||
</text>
|
||||
<text x="512" y="320" fill="#ffb800" font-size="14">
|
||||
{{ workStatus(partList[1].activePowerPCS, 1) }}
|
||||
</text>
|
||||
<text x="420" y="340" fill="#ffffff" font-size="14">
|
||||
{{ $t("dashboard.activePower") }}({{
|
||||
partList.length > 0
|
||||
? partList[1].activePowerPCS
|
||||
: 0 | kwUnitFormat
|
||||
}})：
|
||||
</text>
|
||||
<text x="520" y="340" fill="#ffb800" font-size="14">
|
||||
{{
|
||||
partList.length > 0
|
||||
? partList[1].activePowerPCS
|
||||
: 0 | kWFormat(2)
|
||||
}}
|
||||
</text>
|
||||
|
||||
<!-- 右侧 -->
|
||||
|
||||
<text x="602" y="280" fill="#ffffff" font-size="14">
|
||||
SOC(%)：
|
||||
</text>
|
||||
<text x="672" y="280" fill="#ffb800" font-size="14">
|
||||
{{ partList.length > 0 ? partList[2].soc : 0 }}
|
||||
</text>
|
||||
<text x="602" y="300" fill="#ffffff" font-size="14">
|
||||
SOH(%)：
|
||||
</text>
|
||||
<text x="672" y="300" fill="#ffb800" font-size="14">
|
||||
{{ partList.length > 0 ? partList[2].soh : 0 }}
|
||||
</text>
|
||||
<text x="602" y="320" fill="#ffffff" font-size="14">
|
||||
{{ $t("dashboard.workStatus") }}：
|
||||
</text>
|
||||
<text x="692" y="320" fill="#ffb800" font-size="14">
|
||||
{{ workStatus(partList[2].activePowerPCS, 2) }}
|
||||
</text>
|
||||
<text x="602" y="340" fill="#ffffff" font-size="14">
|
||||
{{ $t("dashboard.activePower") }}({{
|
||||
partList.length > 0
|
||||
? partList[2].activePowerPCS
|
||||
: 0 | kwUnitFormat
|
||||
}})：
|
||||
</text>
|
||||
<text x="702" y="340" fill="#ffb800" font-size="14">
|
||||
{{
|
||||
partList.length > 0
|
||||
? partList[2].activePowerPCS
|
||||
: 0 | kWFormat(2)
|
||||
}}
|
||||
</text>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</ItemBox>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import gridImg from '@/assets/images/wxjd/grid.png'
|
||||
import ammeterImg from '@/assets/images/wxjd/ammeter.png'
|
||||
import cabinetImg from '@/assets/images/wxjd/pcs-energy.png'
|
||||
import chargingPileImg from '@/assets/images/home-office.png'
|
||||
import distributionCabinetImg from '@/assets/images/wxjd/guiImg.png'
|
||||
import frameImg from '@/assets/images/wxjd/frame.png'
|
||||
import cangImg from '@/assets/images/home-cang.png'
|
||||
import config from './config'
|
||||
import { changeTheme } from '@/utils/index'
|
||||
import {
|
||||
GetOpenStationMiddle,
|
||||
GetOpenStationMiddlePart,
|
||||
GetTotalPower
|
||||
} from '@/api/home-page/index'
|
||||
export default {
|
||||
name: 'Index',
|
||||
props: {
|
||||
stationType: {
|
||||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
stationId: {
|
||||
type: Number,
|
||||
default: 0
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
gridImg,
|
||||
ammeterImg,
|
||||
cabinetImg,
|
||||
chargingPileImg,
|
||||
distributionCabinetImg,
|
||||
cangImg,
|
||||
frameImg,
|
||||
dotData: {
|
||||
lineTop: 'M 0,0 0,0',
|
||||
lineBottomLeft: 'M 0,0 0,0 0,0',
|
||||
lineBottomRight: 'M 0,0 0,0 0,0',
|
||||
lineCenter: 'M 0,0 0,0 0,0'
|
||||
},
|
||||
|
||||
partList: [
|
||||
{ soc: 0, soh: 0, activePowerPCS: 0.0, reactivePowerPCS: 0.0 },
|
||||
{ soc: 0, soh: 0, activePowerPCS: 0.0, reactivePowerPCS: 0.0 },
|
||||
{ soc: 0, soh: 0, activePowerPCS: 0.0, reactivePowerPCS: 0.0 }
|
||||
],
|
||||
loading: false,
|
||||
activePowerTotal: {},
|
||||
configData: {}
|
||||
}
|
||||
},
|
||||
computed: {},
|
||||
watch: {},
|
||||
created() {
|
||||
const result = changeTheme()
|
||||
this.configData = config[result]
|
||||
},
|
||||
mounted() {},
|
||||
methods: {
|
||||
workStatus(val, index) {
|
||||
if (this.partList[index].flowDirection === 1) {
|
||||
if (+val > +1) {
|
||||
return this.$t('dashboard.charging')
|
||||
}
|
||||
if (+val < -1) {
|
||||
return this.$t('dashboard.disCharging')
|
||||
}
|
||||
if (val < 1 || +val.abs < 1) {
|
||||
return this.$t('dashboard.standing')
|
||||
}
|
||||
} else {
|
||||
if (+val > +1) {
|
||||
return this.$t('dashboard.disCharging')
|
||||
}
|
||||
if (+val < -1) {
|
||||
return this.$t('dashboard.charging')
|
||||
}
|
||||
if (val < 1 || +val.abs < 1) {
|
||||
return this.$t('dashboard.standing')
|
||||
}
|
||||
}
|
||||
},
|
||||
getData() {
|
||||
this.GetMiddleActive()
|
||||
this.GetOpenStationMiddle()
|
||||
this.GetOpenStationMiddlePart()
|
||||
},
|
||||
async GetMiddleActive() {
|
||||
this.loading = true
|
||||
try {
|
||||
const params = {
|
||||
stationId: this.stationId
|
||||
}
|
||||
const res = await GetTotalPower(params)
|
||||
this.activePowerTotal = res.data
|
||||
} catch (error) {
|
||||
// console.log(error);
|
||||
} finally {
|
||||
this.loading = false
|
||||
}
|
||||
},
|
||||
flowDirection(data) {
|
||||
this.dotData.lineTop = 'M 0,0 412,0'
|
||||
if (data[0].flowDirection === 1) {
|
||||
if (data[0].activePowerPCS > 1) {
|
||||
this.dotData.lineBottomLeft = 'M 283,-280, 280, 0, 0 ,0'
|
||||
} else if (data[0].activePowerPCS < -1) {
|
||||
this.dotData.lineBottomLeft = 'M 0,0 281,0 281,-283'
|
||||
} else if (data[0].activePowerPCS === 0 || !data[0].activePowerPCS || (data[0].activePowerPCS > -1 && data[0].activePowerPCS < 1)) {
|
||||
this.dotData.lineBottomLeft = ''
|
||||
}
|
||||
if (data[1].activePowerPCS > 1) {
|
||||
this.dotData.lineCenter = 'M 0,-283,0,0,0,0'
|
||||
} else if (data[1].activePowerPCS < -1) {
|
||||
this.dotData.lineCenter = 'M 0,0,0,0,0,-283'
|
||||
} else if (data[1].activePowerPCS === 0 || !data[1].activePowerPCS || (data[1].activePowerPCS > -1 && data[1].activePowerPCS < 1)) {
|
||||
this.dotData.lineCenter = ''
|
||||
}
|
||||
if (data[2].activePowerPCS > 1) {
|
||||
this.dotData.lineBottomRight = 'M -271, -280 , -271 , 0 , 0 , 0'
|
||||
} else if (data[2].activePowerPCS < -1) {
|
||||
this.dotData.lineBottomRight = 'M 0,0 -271,0 -271,-283'
|
||||
} else if (data[2].activePowerPCS === 0 || !data[2].activePowerPCS || (data[2].activePowerPCS > -1 && data[2].activePowerPCS < 1)) {
|
||||
this.dotData.lineBottomRight = ''
|
||||
}
|
||||
} else {
|
||||
if (data[0].activePowerPCS > 1) {
|
||||
this.dotData.lineBottomLeft = 'M 0,0 281,0 281,-283'
|
||||
} else if (data[0].activePowerPCS < -1) {
|
||||
this.dotData.lineBottomLeft = 'M 283,-280, 280, 0, 0 ,0'
|
||||
} else if (data[0].activePowerPCS === 0 || !data[0].activePowerPCS || (data[0].activePowerPCS > -1 && data[0].activePowerPCS < 1)) {
|
||||
this.dotData.lineBottomLeft = ''
|
||||
}
|
||||
if (data[1].activePowerPCS > 1) {
|
||||
this.dotData.lineCenter = 'M 0,0,0,0,0,-283'
|
||||
} else if (data[1].activePowerPCS < -1) {
|
||||
this.dotData.lineCenter = 'M 0,-283,0,0,0,0'
|
||||
} else if (data[1].activePowerPCS === 0 || !data[1].activePowerPCS || (data[1].activePowerPCS > -1 && data[1].activePowerPCS < 1)) {
|
||||
this.dotData.lineCenter = ''
|
||||
}
|
||||
if (data[2].activePowerPCS > 1) {
|
||||
this.dotData.lineBottomRight = 'M 0,0 -271,0 -271,-283'
|
||||
} else if (data[2].activePowerPCS < -1) {
|
||||
this.dotData.lineBottomRight = 'M -271, -280 , -271 , 0 , 0 , 0'
|
||||
} else if (data[2].activePowerPCS === 0 || !data[2].activePowerPCS || (data[2].activePowerPCS > -1 && data[2].activePowerPCS < 1)) {
|
||||
this.dotData.lineBottomRight = ''
|
||||
}
|
||||
}
|
||||
},
|
||||
async GetOpenStationMiddlePart() {
|
||||
this.loading = true
|
||||
try {
|
||||
const params = {
|
||||
stationId: this.stationId
|
||||
}
|
||||
const res = await GetOpenStationMiddlePart(params)
|
||||
this.partList = res.data
|
||||
this.flowDirection(this.partList)
|
||||
} catch (error) {
|
||||
// console.log(error);
|
||||
} finally {
|
||||
this.loading = false
|
||||
}
|
||||
},
|
||||
async GetOpenStationMiddle() {
|
||||
this.loading = true
|
||||
try {
|
||||
const params = {
|
||||
stationId: this.stationId
|
||||
}
|
||||
await GetOpenStationMiddle(params)
|
||||
} catch (error) {
|
||||
// console.log(error);
|
||||
} finally {
|
||||
this.loading = false
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.center-box {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
@mixin move-round($duration, $delay) {
|
||||
fill: none;
|
||||
stroke-width: 5;
|
||||
stroke-linejoin: round;
|
||||
stroke-linecap: round;
|
||||
stroke-dasharray: 3, 900;
|
||||
stroke-dashoffset: 0;
|
||||
animation: lineMove $duration $delay cubic-bezier(0, 0, 0.74, 0.74) infinite;
|
||||
}
|
||||
|
||||
@keyframes lineMove {
|
||||
0% {
|
||||
stroke-dashoffset: -850;
|
||||
}
|
||||
100% {
|
||||
stroke-dashoffset: -0;
|
||||
}
|
||||
}
|
||||
.g-rect-fill-two {
|
||||
@include move-round(3.5s, 1s);
|
||||
}
|
||||
</style>
|
||||
345
src/views/dashboardtest/components/top-center/zhida.vue
Normal file
345
src/views/dashboardtest/components/top-center/zhida.vue
Normal file
@ -0,0 +1,345 @@
|
||||
<template>
|
||||
<ItemBox :title="$t('dashboard.stationTopo')" style="min-height: 560px;">
|
||||
<div ref="svgLine" class="center-box">
|
||||
<div v-loading="loading">
|
||||
<svg
|
||||
version="1.1"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||
xml:space="preserve"
|
||||
class="circle-load-rect-svg"
|
||||
viewBox="0 0 800 500"
|
||||
>
|
||||
<defs>
|
||||
<defs>
|
||||
<radialGradient id="RadialGradient1">
|
||||
<stop offset="0%" stop-color="#fff" />
|
||||
<stop offset="30%" stop-color="#0171c1" />
|
||||
<stop offset="50%" stop-color="#035088" />
|
||||
<stop offset="100%" stop-color="#02395a" />
|
||||
</radialGradient>
|
||||
</defs>
|
||||
<marker id="markerCircle" markerWidth="15" markerHeight="15" refX="5" refY="5">
|
||||
<circle cx="5" cy="5" r="5" style="stroke: none; fill: url(#RadialGradient1)" />
|
||||
</marker>
|
||||
|
||||
<marker
|
||||
id="markerArrow"
|
||||
markerWidth="13"
|
||||
markerHeight="13"
|
||||
refX="2"
|
||||
refY="6"
|
||||
orient="auto"
|
||||
>
|
||||
<path d="M2,2 L2,11 L10,6 L2,2" style="fill: black" />
|
||||
</marker>
|
||||
</defs>
|
||||
<!-- //线条 -->
|
||||
//top
|
||||
<polyline points="154,80 562,80" fill="none" class="g-rect-path" stroke="#0094FF" stroke-dasharray="3 3" />
|
||||
//center
|
||||
<polyline points="385,80 385,363" fill="none" class="g-rect-path" stroke="#0094FF" stroke-dasharray="3 3" />
|
||||
//center-right
|
||||
<polyline points="289,242 385,242" fill="none" class="g-rect-path" stroke="#0094FF" stroke-dasharray="3 3" />
|
||||
//center-left
|
||||
<polyline points="385,272, 483,272" fill="none" class="g-rect-path" stroke="#0094FF" />
|
||||
//bottom
|
||||
<polyline points="103,363 656,363" fill="none" class="g-rect-path" stroke="#0094FF" stroke-dasharray="3 3" />
|
||||
|
||||
//圆点
|
||||
//top
|
||||
<circle cx="154" cy="80" r="8" style="stroke: none; fill: url(#RadialGradient1)" />
|
||||
<circle cx="562" cy="80" r="8" style="stroke: none; fill: url(#RadialGradient1)" />
|
||||
|
||||
//动点
|
||||
<circle cx="154" cy="80" r="8" style="stroke: none; fill: url(#RadialGradient1)">
|
||||
<animateMotion repeatCount="indefinite" dur="8s" begin="0s" :path="dotData.lineTop" />
|
||||
</circle>
|
||||
|
||||
//center
|
||||
//center-right
|
||||
<circle cx="287" cy="242" r="8" style="stroke: none; fill: url(#RadialGradient1)" />
|
||||
<circle cx="287" cy="242" r="8" style="stroke: none; fill: url(#RadialGradient1)">
|
||||
<animateMotion repeatCount="indefinite" dur="3s" begin="0s" :path="dotData.lineCenterRight" />
|
||||
</circle>
|
||||
//center-left
|
||||
<circle cx="482" cy="272" r="8" style="stroke: none; fill: url(#RadialGradient1)" />
|
||||
|
||||
//bottom
|
||||
<circle cx="103" cy="363" r="8" style="stroke: none; fill: url(#RadialGradient1)" />
|
||||
<circle cx="290" cy="363" r="8" style="stroke: none; fill: url(#RadialGradient1)" />
|
||||
<circle cx="480" cy="363" r="8" style="stroke: none; fill: url(#RadialGradient1)" />
|
||||
<circle cx="656" cy="363" r="8" style="stroke: none; fill: url(#RadialGradient1)" />
|
||||
|
||||
<circle cx="103" cy="363" r="8" style="stroke: none; fill: url(#RadialGradient1)">
|
||||
<animateMotion repeatCount="indefinite" dur="8s" begin="0s" :path="dotData.lineBottomLeft" />
|
||||
</circle>
|
||||
|
||||
<circle cx="656" cy="363" r="8" style="stroke: none; fill: url(#RadialGradient1)">
|
||||
<animateMotion repeatCount="indefinite" dur="8s" begin="0s" :path="dotData.lineBottomRight" />
|
||||
</circle>
|
||||
|
||||
<!-- 图片和文字 -->
|
||||
//市电---{{ $t("dashboard.ammeter") }} --充电桩 top
|
||||
|
||||
//市电
|
||||
<image :xlink:href="gridImg" x="70" y="30" width="75" height="100" />
|
||||
<text x="90" y="150" fill="#ffffff" font-size="14">{{ $t("dashboard.grid") }}</text>
|
||||
|
||||
//{{ $t("dashboard.ammeter") }}
|
||||
<image :xlink:href="ammeterImg" x="226" y="58" width="45" height="50" />
|
||||
<text x="234" y="130" fill="#ffffff" font-size="14">{{ $t("dashboard.ammeter") }}</text>
|
||||
<text x="174" y="150" fill="#ffffff" font-size="14">{{ $t("dashboard.activePower") }}(kW)：</text>
|
||||
<text x="274" y="150" fill="#FFB800" font-size="14">{{ activePowerTotal.activePowerFZ }}</text>
|
||||
|
||||
//充电桩
|
||||
<image :xlink:href="chargingPileImg" x="585" y="55" width="160" height="50" />
|
||||
<text x="645" y="130" fill="#ffffff" font-size="14">{{ $t("dashboard.chargingPile") }}</text>
|
||||
|
||||
//配电柜 --{{ $t("dashboard.ammeter") }} --{{ $t("dashboard.photovoltaic") }} center
|
||||
//配电柜
|
||||
<image :xlink:href="distributionCabinetImg" x="348" y="110" width="78" height="78" />
|
||||
<text x="413" y="150" fill="#ffffff" font-size="14">{{ $t("dashboard.discabinet") }}</text>
|
||||
|
||||
//{{ $t("dashboard.ammeter") }}
|
||||
<image :xlink:href="ammeterImg" x="505" y="242" width="45" height="50" />
|
||||
<text x="513" y="320" fill="#ffffff" font-size="14">{{ $t("dashboard.ammeter") }}</text>
|
||||
<text x="453" y="340" fill="#ffffff" font-size="14">{{ $t("dashboard.activePower") }}(kW)：</text>
|
||||
<text x="553" y="340" fill="#FFB800" font-size="14">{{ activePowerTotal.activePower }}</text>
|
||||
|
||||
//{{ $t("dashboard.photovoltaic") }}
|
||||
<image :xlink:href="frameImg" x="223" y="208" width="50" height="50" />
|
||||
<text x="234" y="280" fill="#ffffff" font-size="14">{{ $t("dashboard.photovoltaic") }}</text>
|
||||
<text x="174" y="300" fill="#ffffff" font-size="14">{{ $t("dashboard.activePower") }}(kW)：</text>
|
||||
<text x="274" y="300" fill="#FFB800" font-size="14">{{ pvPower.activePower }}</text>
|
||||
|
||||
// {{ $t("dashboard.cabinet") }}*4 bottom
|
||||
|
||||
//{{ $t("dashboard.cabinet") }}--1
|
||||
<image :xlink:href="cabinetImg" x="85" y="383" width="45" height="60" />
|
||||
<text x="85" y="452" fill="#ffffff" font-size="14"> {{ hiddenTextWord(`1#${$t("dashboard.cabinet")}`,10) }}</text>
|
||||
<text x="45" y="472" fill="#ffffff" font-size="14">{{ $t("dashboard.activePower") }}(kW)：</text>
|
||||
<text x="145" y="472" fill="#FFB800" font-size="14">{{ partList.length ? partList[0].activePowerPCS : 0 }}</text>
|
||||
<text x="78" y="492" fill="#ffffff" font-size="14">SOC(%)：</text>
|
||||
<text x="145" y="492" fill="#FFB800" font-size="14">{{ partList.length ? partList[0].soc :0 }}</text>
|
||||
|
||||
//{{ $t("dashboard.cabinet") }}--2
|
||||
<image :xlink:href="cabinetImg" x="269" y="383" width="45" height="60" />
|
||||
<text x="269" y="452" fill="#ffffff" font-size="14"> {{ hiddenTextWord(`2#${$t("dashboard.cabinet")}`,10) }}</text>
|
||||
<text x="229" y="472" fill="#ffffff" font-size="14">{{ $t("dashboard.activePower") }}(kW)：</text>
|
||||
<text x="329" y="472" fill="#FFB800" font-size="14">{{ partList.length > 1 ? partList[1].activePowerPCS :0 }}</text>
|
||||
<text x="262" y="492" fill="#ffffff" font-size="14">SOC(%)：</text>
|
||||
<text x="329" y="492" fill="#FFB800" font-size="14">{{ partList.length > 1 ? partList[1].soc : 0 }}</text>
|
||||
|
||||
//{{ $t("dashboard.cabinet") }}--3
|
||||
<image :xlink:href="cabinetImg" x="459" y="383" width="45" height="60" />
|
||||
<text x="459" y="452" fill="#ffffff" font-size="14"> {{ hiddenTextWord(`3#${$t("dashboard.cabinet")}`,10) }}</text>
|
||||
<text x="413" y="472" fill="#ffffff" font-size="14">{{ $t("dashboard.activePower") }}(kW)：</text>
|
||||
<text x="513" y="472" fill="#FFB800" font-size="14">{{ partList.length > 2 ?partList[2].activePowerPCS : 0 }}</text>
|
||||
<text x="446" y="492" fill="#ffffff" font-size="14">SOC(%)：</text>
|
||||
<text x="513" y="492" fill="#FFB800" font-size="14">{{ partList.length > 2 ?partList[2].soc :0 }}</text>
|
||||
|
||||
//{{ $t("dashboard.cabinet") }}--4
|
||||
<image :xlink:href="cabinetImg" x="638" y="388" width="45" height="60" />
|
||||
<text x="638" y="452" fill="#ffffff" font-size="14"> {{ hiddenTextWord(`4#${$t("dashboard.cabinet")}`,10) }}</text>
|
||||
<text x="597" y="472" fill="#ffffff" font-size="14">{{ $t("dashboard.activePower") }}(kW)：</text>
|
||||
<text x="697" y="472" fill="#FFB800" font-size="14">{{ partList.length > 3 ? partList[3].activePowerPCS : 0 }}</text>
|
||||
<text x="630" y="492" fill="#ffffff" font-size="14">SOC(%)：</text>
|
||||
<text x="697" y="492" fill="#FFB800" font-size="14">{{ partList.length > 3 ? partList[3].soc : 0 }}</text>
|
||||
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</ItemBox>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
import gridImg from '@/assets/images/wxjd/grid.png'
|
||||
import ammeterImg from '@/assets/images/wxjd/ammeter.png'
|
||||
import cabinetImg from '@/assets/images/wxjd/cabinet.png'
|
||||
import chargingPileImg from '@/assets/images/wxjd/chargingPile.png'
|
||||
import distributionCabinetImg from '@/assets/images/wxjd/guiImg.png'
|
||||
import frameImg from '@/assets/images/wxjd/frame.png'
|
||||
import { hiddenTextWord } from '@/utils/index'
|
||||
import {
|
||||
GetOpenStationMiddlePart,
|
||||
GetTotalPower,
|
||||
GetgetElec,
|
||||
GetPVElec
|
||||
} from '@/api/home-page/index'
|
||||
export default {
|
||||
name: 'Index',
|
||||
props: {
|
||||
stationType: {
|
||||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
stationId: {
|
||||
type: Number,
|
||||
default: 0
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
hiddenTextWord,
|
||||
gridImg,
|
||||
ammeterImg,
|
||||
cabinetImg,
|
||||
chargingPileImg,
|
||||
distributionCabinetImg,
|
||||
frameImg,
|
||||
dotData: {
|
||||
lineTop: 'M 0,0 412,0',
|
||||
lineCenterRight: 'M 0,0 96,0',
|
||||
lineBottomLeft: '',
|
||||
lineBottomRight: ''
|
||||
},
|
||||
loading: false,
|
||||
partList: [],
|
||||
activePowerTotal: {},
|
||||
pvPower: {}
|
||||
}
|
||||
},
|
||||
computed: {},
|
||||
watch: {},
|
||||
created() {},
|
||||
mounted() {},
|
||||
methods: {
|
||||
|
||||
getData() {
|
||||
this.GetOpenStationMiddlePart()
|
||||
this.GetMiddleFZActive()
|
||||
this.GetMiddleActive()
|
||||
this.GetPV()
|
||||
},
|
||||
async GetMiddleFZActive() {
|
||||
this.loading = true
|
||||
try {
|
||||
const params = {
|
||||
stationId: this.stationId
|
||||
}
|
||||
const res = await GetgetElec(params)
|
||||
this.activePowerTotal = Object.assign(this.activePowerTotal, res.data[0])
|
||||
} catch (error) {
|
||||
// console.log(error);
|
||||
} finally {
|
||||
this.loading = false
|
||||
}
|
||||
},
|
||||
async GetPV() {
|
||||
this.loading = true
|
||||
try {
|
||||
const params = {
|
||||
stationId: this.stationId
|
||||
}
|
||||
const res = await GetPVElec(params)
|
||||
this.pvPower = res.data
|
||||
} catch (error) {
|
||||
// console.log(error);
|
||||
} finally {
|
||||
this.loading = false
|
||||
}
|
||||
},
|
||||
async GetMiddleActive() {
|
||||
this.loading = true
|
||||
try {
|
||||
const params = {
|
||||
stationId: this.stationId
|
||||
}
|
||||
const res = await GetTotalPower(params)
|
||||
this.activePowerTotal = Object.assign(this.activePowerTotal, res.data)
|
||||
} catch (error) {
|
||||
// console.log(error);
|
||||
} finally {
|
||||
this.loading = false
|
||||
}
|
||||
},
|
||||
getFlowDirection(val) {
|
||||
if (val[0].activePowerPCS > +1) {
|
||||
if (val[0].flowDirection === 1) {
|
||||
this.dotData.lineBottomLeft = 'M 283,-281,283,0,0,0'
|
||||
}
|
||||
if (val[0].flowDirection === 2) {
|
||||
this.dotData.lineBottomLeft = 'M 0,0 281,0 281,-283'
|
||||
}
|
||||
}
|
||||
if (val[0].activePowerPCS < -1) {
|
||||
if (val[0].flowDirection === 1) {
|
||||
this.dotData.lineBottomLeft = 'M 0,0 281,0 281,-283'
|
||||
}
|
||||
if (val[0].flowDirection === 2) {
|
||||
this.dotData.lineBottomLeft = 'M 283,-281,283,0,0,0'
|
||||
}
|
||||
}
|
||||
|
||||
if (val[0].activePowerPCS === 0 || !val[0].activePowerPCS || (val[0].activePowerPCS > -1 && val[0].activePowerPCS < +1)) {
|
||||
this.dotData.lineBottomLeft = ''
|
||||
}
|
||||
|
||||
if (val[3].activePowerPCS > +1) {
|
||||
if (val[3].flowDirection === 1) {
|
||||
this.dotData.lineBottomRight = 'M -271,-281,-271,0,0,0'
|
||||
}
|
||||
if (val[3].flowDirection === 2) {
|
||||
this.dotData.lineBottomRight = 'M 0,0 -271,0 -271,-283'
|
||||
}
|
||||
}
|
||||
if (val[3].activePowerPCS < -1) {
|
||||
if (val[3].flowDirection === 1) {
|
||||
this.dotData.lineBottomRight = 'M 0,0 -271,0 -271,-283'
|
||||
}
|
||||
if (val[3].flowDirection === 2) {
|
||||
this.dotData.lineBottomRight = 'M -271,-281,-271,0,0,0'
|
||||
}
|
||||
}
|
||||
if (val[3].activePowerPCS === 0 || !val[3].activePowerPCS || (val[3].activePowerPCS > -1 && val[3].activePowerPCS < +1)) {
|
||||
this.dotData.lineBottomRight = ''
|
||||
}
|
||||
},
|
||||
async GetOpenStationMiddlePart() {
|
||||
this.loading = true
|
||||
try {
|
||||
const params = {
|
||||
stationId: this.stationId
|
||||
}
|
||||
const res = await GetOpenStationMiddlePart(params)
|
||||
|
||||
this.partList = res?.data
|
||||
this.getFlowDirection(this.partList)
|
||||
} finally {
|
||||
this.loading = false
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.center-box {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
@mixin move-round($duration, $delay) {
|
||||
fill: none;
|
||||
stroke-width: 5;
|
||||
stroke-linejoin: round;
|
||||
stroke-linecap: round;
|
||||
stroke-dasharray: 3, 900;
|
||||
stroke-dashoffset: 0;
|
||||
animation: lineMove $duration $delay cubic-bezier(0, 0, 0.74, 0.74) infinite;
|
||||
}
|
||||
|
||||
@keyframes lineMove {
|
||||
0% {
|
||||
stroke-dashoffset: -850;
|
||||
}
|
||||
100% {
|
||||
stroke-dashoffset: -0;
|
||||
}
|
||||
}
|
||||
.g-rect-fill-two {
|
||||
@include move-round(3.5s, 1s);
|
||||
}
|
||||
</style>
|
||||
334
src/views/dashboardtest/components/top-center/zzhb.vue
Normal file
334
src/views/dashboardtest/components/top-center/zzhb.vue
Normal file
@ -0,0 +1,334 @@
|
||||
<template>
|
||||
<ItemBox :title="$t('dashboard.stationTopo')" style="min-height: 560px;">
|
||||
<div ref="svgLine" class="center-box">
|
||||
<div v-loading="loading" class="img-box">
|
||||
<svg
|
||||
version="1.1"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||
xml:space="preserve"
|
||||
class="circle-load-rect-svg"
|
||||
viewBox="0 0 800 500"
|
||||
>
|
||||
<defs>
|
||||
<defs>
|
||||
<radialGradient id="RadialGradient1">
|
||||
<stop offset="0%" stop-color="#fff" />
|
||||
<stop offset="30%" stop-color="#0171c1" />
|
||||
<stop offset="50%" stop-color="#035088" />
|
||||
<stop offset="100%" stop-color="#02395a" />
|
||||
</radialGradient>
|
||||
</defs>
|
||||
<marker
|
||||
id="markerCircle"
|
||||
markerWidth="15"
|
||||
markerHeight="15"
|
||||
refX="5"
|
||||
refY="5"
|
||||
>
|
||||
<circle
|
||||
cx="5"
|
||||
cy="5"
|
||||
r="5"
|
||||
style="stroke: none; fill: url(#RadialGradient1)"
|
||||
/>
|
||||
</marker>
|
||||
|
||||
<marker
|
||||
id="markerArrow"
|
||||
markerWidth="13"
|
||||
markerHeight="13"
|
||||
refX="2"
|
||||
refY="6"
|
||||
orient="auto"
|
||||
>
|
||||
<path d="M2,2 L2,11 L10,6 L2,2" style="fill: black" />
|
||||
</marker>
|
||||
</defs>
|
||||
<!-- //线条 -->
|
||||
<!-- top -->
|
||||
<polyline
|
||||
points="166,72 650,72"
|
||||
fill="none"
|
||||
class="g-rect-path"
|
||||
stroke-width="1"
|
||||
stroke="#0094FF"
|
||||
stroke-dasharray="3 3"
|
||||
/>
|
||||
<circle
|
||||
cx="166"
|
||||
cy="72"
|
||||
r="8"
|
||||
style="stroke: none; fill: url(#RadialGradient1)"
|
||||
/>
|
||||
<circle
|
||||
cx="650"
|
||||
cy="72"
|
||||
r="8"
|
||||
style="stroke: none; fill: url(#RadialGradient1)"
|
||||
/>
|
||||
<!-- center -->
|
||||
<polyline
|
||||
points="408,72 408,260"
|
||||
fill="none"
|
||||
class="g-rect-path"
|
||||
stroke-width="1"
|
||||
stroke="#0094FF"
|
||||
stroke-dasharray="3 3"
|
||||
/>
|
||||
<polyline
|
||||
points="408,114 455,114"
|
||||
fill="none"
|
||||
class="g-rect-path"
|
||||
stroke-width="1"
|
||||
stroke="#0094FF"
|
||||
stroke-dasharray="3 3"
|
||||
/>
|
||||
|
||||
<!-- //centerLeft -->
|
||||
<polyline
|
||||
points="267,335 406,335 406,293"
|
||||
fill="none"
|
||||
class="g-rect-path"
|
||||
stroke-width="1"
|
||||
stroke="#0094FF"
|
||||
stroke-dasharray="3 3"
|
||||
/>
|
||||
<polyline
|
||||
points="249,351 249,390"
|
||||
fill="none"
|
||||
class="g-rect-path"
|
||||
stroke-width="1"
|
||||
stroke="#0094FF"
|
||||
stroke-dasharray="3 3"
|
||||
/>
|
||||
|
||||
<!-- centerRight -->
|
||||
<polyline
|
||||
points="410,293 410,335 575,335 575,390"
|
||||
fill="none"
|
||||
class="g-rect-path"
|
||||
stroke-width="1"
|
||||
stroke="#0094FF"
|
||||
stroke-dasharray="3 3"
|
||||
/>
|
||||
<!-- top -->
|
||||
|
||||
<!-- 图片和文字 -->
|
||||
|
||||
<!-- 电网 -->
|
||||
<image
|
||||
:xlink:href="gridImg"
|
||||
x="95"
|
||||
y="35"
|
||||
width="53"
|
||||
height="70"
|
||||
/>
|
||||
<text x="110" y="120" fill="#ffffff" font-size="14">
|
||||
{{ $t("dashboard.grid") }}
|
||||
</text>
|
||||
<!-- {{ $t("dashboard.load") }} -->
|
||||
<image
|
||||
:xlink:href="chargingPileImg"
|
||||
x="662"
|
||||
y="38"
|
||||
width="50"
|
||||
height="60"
|
||||
/>
|
||||
<text x="672" y="120" fill="#ffffff" font-size="14"> {{ $t("dashboard.load") }}</text>
|
||||
<!-- {{ $t("dashboard.ammeter") }} -->
|
||||
<image
|
||||
:xlink:href="ammeterImg"
|
||||
x="455"
|
||||
y="98"
|
||||
width="32"
|
||||
height="32"
|
||||
/>
|
||||
|
||||
<text x="460" y="150" fill="#ffffff" font-size="14">
|
||||
{{ $t("dashboard.ammeter") }}
|
||||
</text>
|
||||
<text x="493" y="120" fill="#ffffff" font-size="14">{{ $t("dashboard.power") }}(kW)：</text>
|
||||
<text x="570" y="120" fill="#ffb800" font-size="14">
|
||||
{{ partList.activePower }}
|
||||
</text>
|
||||
<!-- STS柜 -->
|
||||
<image
|
||||
:xlink:href="guiImg"
|
||||
x="371"
|
||||
y="140"
|
||||
width="78"
|
||||
height="78"
|
||||
/>
|
||||
<text x="394" y="230" fill="#ffffff" font-size="14">STS柜</text>
|
||||
<text x="440" y="285" fill="#ffffff" font-size="14">{{ $t("dashboard.activePower") }}(kW)：</text>
|
||||
<text x="535" y="285" fill="#ffb800" font-size="14">
|
||||
{{ partList.activePowerPCS }}
|
||||
</text>
|
||||
<!-- ACDC -->
|
||||
<image
|
||||
:xlink:href="ACDCImg"
|
||||
x="392"
|
||||
y="263"
|
||||
width="31"
|
||||
height="31"
|
||||
/>
|
||||
<!-- <text x="268" y="280" fill="#ffffff" font-size="14">{{ $t("dashboard.activePower") }}(kW)：</text>
|
||||
<text x="360" y="280" fill="#ffb800" font-size="14">
|
||||
0
|
||||
</text> -->
|
||||
<!-- DCDC -->
|
||||
<image
|
||||
:xlink:href="DCImg"
|
||||
x="235"
|
||||
y="320"
|
||||
width="31"
|
||||
height="31"
|
||||
/>
|
||||
|
||||
<!-- {{ $t("dashboard.photovoltaic") }} -->
|
||||
<image
|
||||
:xlink:href="frameImg"
|
||||
x="229"
|
||||
y="387"
|
||||
width="48"
|
||||
height="48"
|
||||
/>
|
||||
|
||||
<text x="239" y="455" fill="#ffffff" font-size="14">
|
||||
{{ $t("dashboard.photovoltaic") }}
|
||||
</text>
|
||||
<!-- <text x="129" y="405" fill="#ffffff" font-size="14">{{ $t("dashboard.workStatus") }}：</text>
|
||||
<text x="195" y="405" fill="#ffb800" font-size="14">
|
||||
0
|
||||
</text> -->
|
||||
<text x="99" y="420" fill="#ffffff" font-size="14">{{ $t("dashboard.activePower") }}(kW)：</text>
|
||||
<text x="195" y="420" fill="#ffb800" font-size="14">
|
||||
{{ partList.acActivePower }}
|
||||
</text>
|
||||
<!-- {{ $t("dashboard.battery") }} -->
|
||||
<image
|
||||
:xlink:href="cabinetImg"
|
||||
x="551"
|
||||
y="390"
|
||||
width="48"
|
||||
height="48"
|
||||
/>
|
||||
|
||||
<text x="560" y="455" fill="#ffffff" font-size="14">
|
||||
{{ $t("dashboard.battery") }}
|
||||
</text>
|
||||
<text x="609" y="405" fill="#ffffff" font-size="14">SOC(%)：</text>
|
||||
<text x="670" y="405" fill="#ffb800" font-size="14">
|
||||
{{ partList.soc }}
|
||||
</text>
|
||||
<text x="609" y="420" fill="#ffffff" font-size="14">SOH(%)：</text>
|
||||
<text x="670" y="420" fill="#ffb800" font-size="14">
|
||||
{{ partList.soh }}
|
||||
</text>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</ItemBox>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import gridImg from '@/assets/images/wxjd/grid.png'
|
||||
import guiImg from '@/assets/images/wxjd/guiImg.png'
|
||||
|
||||
import ammeterImg from '@/assets/images/wxjd/ammeter.png'
|
||||
import cabinetImg from '@/assets/images/wxjd/cabinet.png'
|
||||
import chargingPileImg from '@/assets/images/home-office.png'
|
||||
import frameImg from '@/assets/images/wxjd/frame.png'
|
||||
import cangImg from '@/assets/images/home-cang.png'
|
||||
import interverImg from '@/assets/images/wxjd/inverter.png'
|
||||
import ACDCImg from '@/assets/images/wxjd/ACDC.png'
|
||||
import DCImg from '@/assets/images/wxjd/DC.png'
|
||||
|
||||
import { GetZJHBStatus } from '@/api/home-page/index'
|
||||
export default {
|
||||
name: 'Index',
|
||||
props: {
|
||||
stationType: {
|
||||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
stationId: {
|
||||
type: Number,
|
||||
default: 0
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
gridImg,
|
||||
ammeterImg,
|
||||
cabinetImg,
|
||||
chargingPileImg,
|
||||
interverImg,
|
||||
cangImg,
|
||||
frameImg,
|
||||
ACDCImg,
|
||||
DCImg,
|
||||
guiImg,
|
||||
dotData: {
|
||||
lineLeft: 'M 0,0 0,0',
|
||||
lineRight: 'M 0,0,0,82',
|
||||
lineTopLeft: 'M 0,270,0,0',
|
||||
lineTopRight: 'M 0,270,0,0'
|
||||
},
|
||||
partList: {},
|
||||
loading: false,
|
||||
activePowerTotal: ''
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
|
||||
},
|
||||
watch: {},
|
||||
created() { },
|
||||
mounted() { },
|
||||
methods: {
|
||||
async getData() {
|
||||
this.loading = true
|
||||
const params = {
|
||||
stationId: this.stationId
|
||||
}
|
||||
try {
|
||||
const res = await GetZJHBStatus(params)
|
||||
this.partList = res.data
|
||||
} finally {
|
||||
this.loading = false
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.center-box {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
@mixin move-round($duration, $delay) {
|
||||
fill: none;
|
||||
stroke-width: 5;
|
||||
stroke-linejoin: round;
|
||||
stroke-linecap: round;
|
||||
stroke-dasharray: 3, 900;
|
||||
stroke-dashoffset: 0;
|
||||
animation: lineMove $duration $delay cubic-bezier(0, 0, 0.74, 0.74) infinite;
|
||||
}
|
||||
|
||||
@keyframes lineMove {
|
||||
0% {
|
||||
stroke-dashoffset: -850;
|
||||
}
|
||||
100% {
|
||||
stroke-dashoffset: -0;
|
||||
}
|
||||
}
|
||||
.g-rect-fill-two {
|
||||
@include move-round(3.5s, 1s);
|
||||
}
|
||||
</style>
|
||||
508
src/views/dashboardtest/components/top-left/common-mwh.vue
Normal file
508
src/views/dashboardtest/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/dashboardtest/components/top-left/common.vue
Normal file
509
src/views/dashboardtest/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/dashboardtest/components/top-left/disposition.vue
Normal file
378
src/views/dashboardtest/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>
|
||||
516
src/views/dashboardtest/components/top-left/standard-215.vue
Normal file
516
src/views/dashboardtest/components/top-left/standard-215.vue
Normal file
@ -0,0 +1,516 @@
|
||||
<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.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'
|
||||
}],
|
||||
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/dashboardtest/components/top-left/zzhb.vue
Normal file
540
src/views/dashboardtest/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>
|
||||
571
src/views/dashboardtest/components/top-right/control.vue
Normal file
571
src/views/dashboardtest/components/top-right/control.vue
Normal file
@ -0,0 +1,571 @@
|
||||
<template>
|
||||
<div>
|
||||
<ItemBox :title="$t('dashboard.oneControl')">
|
||||
|
||||
<div v-loading="loading" class="con-box">
|
||||
<!-- <div class="mode">
|
||||
<span class="mode-title">工作模式：</span>
|
||||
<template v-if="!currentWorkInfo.noWork">
|
||||
<span class="mode-title">{{ currentWorkInfo.label }}</span>
|
||||
<el-button style="margin-left: 10px" circle type="primary" icon="el-icon-edit" @click="sureMode" />
|
||||
</template>
|
||||
<span v-else class="noWork"> 请配置关联点</span>
|
||||
</div> -->
|
||||
<div class="control-box">
|
||||
<div v-for="(item, index) in controlList" :key="index" class="control-item-box" @click="handleOpen(item)">
|
||||
|
||||
<div class="control-item">
|
||||
<el-tooltip :content="item.controlName" placement="bottom" effect="dark">
|
||||
<div>{{ item.controlName }}</div>
|
||||
</el-tooltip>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</ItemBox>
|
||||
<el-dialog
|
||||
:append-to-body="true"
|
||||
:show-close="false"
|
||||
center
|
||||
:close-on-click-modal="false"
|
||||
:title="controlInfo.controlName"
|
||||
:visible="controlShow"
|
||||
width="40%"
|
||||
>
|
||||
<div class="control-box">
|
||||
<el-steps :space="140" direction="vertical" :active="activeControlStatus">
|
||||
<el-step v-for="(item, index) in controlInfo.list" :key="index" :title="item.colName">
|
||||
<div slot="description">
|
||||
<div class="description-box">
|
||||
<div class="description-item">
|
||||
<span class="label">{{ $t('dashboard.col') }}:</span>
|
||||
<span class="value">{{ item.col }}</span>
|
||||
</div>
|
||||
<div class="description-item">
|
||||
<span class="label">{{ $t('dashboard.state') }}:</span>
|
||||
<span
|
||||
v-if="item.statusLabel === `${$t('dashboard.orderTimeOut')}` ||
|
||||
item.statusLabel === `${$t('dashboard.orderFail')}`
|
||||
"
|
||||
class="value"
|
||||
style="color: red"
|
||||
>{{ item.statusLabel }}</span>
|
||||
<span v-else class="value" style="color: #0bbd87">{{
|
||||
item.statusLabel
|
||||
}}</span>
|
||||
</div>
|
||||
<div class="description-item">
|
||||
<span class="label">{{ $t('dashboard.orderValue') }}:</span>
|
||||
<span class="value">{{ item.setValue }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-step>
|
||||
</el-steps>
|
||||
</div>
|
||||
<span slot="footer">
|
||||
<el-button type="primary" @click="closeControl">{{ $t('dashboard.close') }}</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
<el-dialog
|
||||
:append-to-body="true"
|
||||
:close-on-click-modal="false"
|
||||
:title="$t('dashboard.workingMode')"
|
||||
:visible="dispatchVisiable"
|
||||
width="40%"
|
||||
center
|
||||
@close="closeModel"
|
||||
>
|
||||
<div>
|
||||
<el-form ref="workInfo" :model="workInfo" :rules="workRules" label-width="210px" label-position="right">
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="24">
|
||||
<el-form-item :label="$t('dashboard.remoteControl')">
|
||||
<el-select v-model="workInfo.value" style="width: 100%" :placeholder="$t('dashboard.selectMode')" @change="changeWorkInfo">
|
||||
<el-option v-for="item in modeOptions" :key="item.value" :label="item.label" :value="item.value" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
|
||||
<el-col v-if="workInfo.value === 1" :span="24">
|
||||
<el-form-item :label="$t('dashboard.remoteControlActive') + (kW)" prop="p">
|
||||
<el-input-number
|
||||
v-model="workInfo.p"
|
||||
style="width: 100%"
|
||||
:controls="false"
|
||||
:placeholder="$t('dashboard.inputValue')"
|
||||
class="input-with-select"
|
||||
>
|
||||
|
||||
<template slot="append">kW</template>
|
||||
</el-input-number>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col v-if="workInfo.value === 1" :span="24">
|
||||
<el-form-item :label="$t('dashboard.remoteControlreActive') + (kVar)" prop="q">
|
||||
<el-input-number
|
||||
v-model="workInfo.q"
|
||||
style="width: 100%"
|
||||
:controls="false"
|
||||
:placeholder="$t('dashboard.inputValue')"
|
||||
class="input-with-select"
|
||||
>
|
||||
|
||||
<template slot="append">kVar</template>
|
||||
</el-input-number>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
</div>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button @click="closeModel">{{ $t('dashboard.back') }}</el-button>
|
||||
<el-button type="primary" :loading="issueLoading" @click="confirmIssue">{{ $t('dashboard.issused') }}</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
<el-dialog
|
||||
:append-to-body="true"
|
||||
:title=" $t('dashboard.tips')"
|
||||
:visible.sync="messageShow"
|
||||
width="20%"
|
||||
center
|
||||
@close="messageShow = false"
|
||||
>
|
||||
<span style="color: #fff;">{{ $t('dashboard.issusedMsg') }}</span>
|
||||
|
||||
<div class="dialog-footer">
|
||||
<el-button plain @click="messageShow = false"> {{ $t('dashboard.cancel') }} </el-button>
|
||||
<el-button v-preventReClick type="primary" @click="handleToOrder">
|
||||
{{ $t('dashboard.sure') }}
|
||||
</el-button>
|
||||
</div>
|
||||
|
||||
<!-- <span slot="footer">
|
||||
<el-button @click="messageShow = false">取消</el-button>
|
||||
<el-button type="primary" @click="handleToOrder">确定</el-button>
|
||||
</span> -->
|
||||
</el-dialog>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
SendPlanControl,
|
||||
GetprogressBar
|
||||
} from '@/api/strategic-management/strategy.js'
|
||||
import { GetControlList } from '@/api/strategic-management/chronological-control'
|
||||
import {
|
||||
OneKeyControl, GetTabModel
|
||||
} from '@/api/strategic-management/policyOverview'
|
||||
export default {
|
||||
name: 'Index',
|
||||
props: {
|
||||
stationId: {
|
||||
type: Number,
|
||||
default: 0
|
||||
}
|
||||
},
|
||||
data() {
|
||||
const valueRule = (rule, value, callback) => {
|
||||
if (value === null || value === '' || value === undefined) {
|
||||
callback(new Error(this.$t('dashboard.inputValue')))
|
||||
} else {
|
||||
if (value > 65535 || value < -65535) {
|
||||
callback(new Error(this.$t('dashboard.dataRange') - '65535~65535'))
|
||||
} else {
|
||||
return callback()
|
||||
}
|
||||
}
|
||||
}
|
||||
return {
|
||||
workRules: {
|
||||
p: [{ validator: valueRule, required: true, trigger: 'blur' }],
|
||||
q: [{ validator: valueRule, required: true, trigger: 'blur' }]
|
||||
},
|
||||
currentWorkInfo: {
|
||||
id: undefined,
|
||||
value: '',
|
||||
p: undefined,
|
||||
q: undefined,
|
||||
noWork: false
|
||||
},
|
||||
workInfo: {
|
||||
id: undefined,
|
||||
value: '',
|
||||
p: undefined,
|
||||
q: undefined,
|
||||
noWork: false
|
||||
},
|
||||
controlList: [],
|
||||
loading: false,
|
||||
controlInfo: {
|
||||
controlName: '',
|
||||
list: []
|
||||
},
|
||||
modeOptions: [
|
||||
{ label: `${this.$t('dashboard.psvf')}`, value: 0 },
|
||||
{ label: `${this.$t('dashboard.reakSchedu')}`, value: 1 }
|
||||
],
|
||||
controlTimer: null,
|
||||
activeControlStatus: 0,
|
||||
activeIndex: 0, // 当前下发的index
|
||||
controlShow: false,
|
||||
dispatchVisiable: false,
|
||||
issueLoading: false,
|
||||
messageShow: false,
|
||||
orderItem: {}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
|
||||
},
|
||||
|
||||
created() {
|
||||
|
||||
},
|
||||
mounted() {
|
||||
|
||||
},
|
||||
methods: {
|
||||
|
||||
changeWorkInfo(val) {
|
||||
this.workInfo = {
|
||||
value: val,
|
||||
p: undefined,
|
||||
q: undefined
|
||||
}
|
||||
},
|
||||
|
||||
async confirmIssue() {
|
||||
this.$refs.workInfo.validate((valid) => {
|
||||
if (valid) {
|
||||
try {
|
||||
this.$confirm(
|
||||
this.$t('dashboard.sureDispatch'),
|
||||
this.$t('dashboard.tips'),
|
||||
{
|
||||
confirmButtonText: this.$t('dashboard.sure'),
|
||||
cancelButtonText: this.$t('dashboard.cancel'),
|
||||
type: 'warning',
|
||||
showClose: false,
|
||||
center: true
|
||||
}
|
||||
)
|
||||
.then(async() => {
|
||||
this.issueLoading = true
|
||||
const res = await SendPlanControl({
|
||||
...this.workInfo,
|
||||
stationId: this.stationId
|
||||
})
|
||||
this.getprogressBar(res.data)
|
||||
})
|
||||
.catch(() => { })
|
||||
} catch (err) {
|
||||
this.issueLoading = false
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
async getprogressBar(val) {
|
||||
this.issueLoading = true
|
||||
const timer = setInterval(async() => {
|
||||
const { data } = await GetprogressBar(val)
|
||||
if (data.isEnd === '1' || data.isEnd === 1) {
|
||||
this.$message.success(data.msg)
|
||||
clearInterval(timer)
|
||||
this.issueLoading = false
|
||||
this.getTabModel()
|
||||
}
|
||||
if (data.isEnd === '2' || data.isEnd === 2) {
|
||||
this.$message.warning(data.msg)
|
||||
clearInterval(timer)
|
||||
this.issueLoading = false
|
||||
}
|
||||
}, 1000)
|
||||
},
|
||||
async getTabModel() {
|
||||
const res = await GetTabModel({ stationId: this.stationId })
|
||||
if (
|
||||
res.data.planControlModel !== undefined &&
|
||||
res.data.planControlModel !== null
|
||||
) {
|
||||
this.currentWorkInfo.value = res.data.planControlModel
|
||||
this.currentWorkInfo.p = res.data?.planControlP
|
||||
this.currentWorkInfo.q = res.data?.planControlQ
|
||||
this.currentWorkInfo.label = this.modeOptions.find(
|
||||
(item) => item.value === res.data?.planControlModel
|
||||
)?.label
|
||||
this.currentWorkInfo.noWork = false
|
||||
this.workInfo.value = res.data.planControlModel
|
||||
this.workInfo.p = res.data?.planControlP
|
||||
this.workInfo.q = res.data?.planControlQ
|
||||
this.workInfo.label = this.modeOptions.find(
|
||||
(item) => item.value === res.data?.planControlModel
|
||||
)?.label
|
||||
this.workInfo.noWork = false
|
||||
} else {
|
||||
this.workInfo.noWork = true
|
||||
this.currentWorkInfo.noWork = true
|
||||
}
|
||||
},
|
||||
closeControl() {
|
||||
this.controlShow = false
|
||||
if (this.controlTimer) {
|
||||
clearInterval(this.controlTimer)
|
||||
}
|
||||
},
|
||||
sureMode() {
|
||||
this.dispatchVisiable = true
|
||||
},
|
||||
async getControlList() {
|
||||
const res = await GetControlList({
|
||||
stationId: this.stationId
|
||||
})
|
||||
this.controlList = res.data
|
||||
},
|
||||
getData() {
|
||||
this.loading = true
|
||||
Promise.all([this.getTabModel(), this.getControlList()]).finally(() => {
|
||||
this.loading = false
|
||||
})
|
||||
},
|
||||
closeModel() {
|
||||
this.dispatchVisiable = false
|
||||
this.workInfo = JSON.parse(JSON.stringify(this.currentWorkInfo))
|
||||
},
|
||||
handleOpen(item) {
|
||||
this.orderItem = item
|
||||
this.messageShow = true
|
||||
},
|
||||
handleToOrder() {
|
||||
this.controlInfo = this.orderItem
|
||||
this.controlInfo.list = this.orderItem.list.map((i) => {
|
||||
i.statusLabel = '未下发'
|
||||
return i
|
||||
})
|
||||
this.activeIndex = 0
|
||||
this.activeControlStatus = 0
|
||||
this.toIssueByOrder()
|
||||
this.controlShow = true
|
||||
},
|
||||
toIssueByOrder() {
|
||||
this.messageShow = false
|
||||
if (this.activeIndex <= this.controlInfo.list.length - 1) {
|
||||
this.getGroupIssueProgress()
|
||||
this.controlTimer = setInterval(() => {
|
||||
this.getGroupIssueProgress()
|
||||
}, 1000)
|
||||
} else {
|
||||
clearInterval(this.controlTimer)
|
||||
}
|
||||
},
|
||||
async getGroupIssueProgress() {
|
||||
try {
|
||||
const res = await OneKeyControl([
|
||||
{
|
||||
...this.controlInfo.list[this.activeIndex],
|
||||
isLast:
|
||||
this.activeIndex === this.controlInfo.list.length - 1 ? 1 : 0
|
||||
}
|
||||
])
|
||||
if (
|
||||
res.data.isEnd === '1' ||
|
||||
res.data.isEnd === '2' ||
|
||||
res.data.isEnd === '3' ||
|
||||
res.data.isEnd === 1 ||
|
||||
res.data.isEnd === 2 ||
|
||||
res.data.isEnd === 3
|
||||
) {
|
||||
if (res.data.isEnd === '1' || res.data.isEnd === 1) {
|
||||
this.$set(this.controlInfo.list, this.activeIndex, {
|
||||
...this.controlInfo.list[this.activeIndex],
|
||||
statusLabel: this.$t('dashboard.orderSuccess')
|
||||
})
|
||||
this.activeIndex += 1
|
||||
this.activeControlStatus += 1
|
||||
if (this.controlTimer) {
|
||||
clearInterval(this.controlTimer)
|
||||
}
|
||||
this.toIssueByOrder()
|
||||
this.$message.success(`${this.$t('dashboard.orderSuccess')}`)
|
||||
}
|
||||
if (res.data.isEnd === '2' || res.data.isEnd === 2) {
|
||||
this.$set(this.controlInfo.list, this.activeIndex, {
|
||||
...this.controlInfo.list[this.activeIndex],
|
||||
statusLabel: this.$t('dashboard.orderFail')
|
||||
})
|
||||
if (this.controlTimer) {
|
||||
clearInterval(this.controlTimer)
|
||||
}
|
||||
}
|
||||
if (res.data.isEnd === '3' || res.data.isEnd === 3) {
|
||||
this.$set(this.controlInfo.list, this.activeIndex, {
|
||||
...this.controlInfo.list[this.activeIndex],
|
||||
statusLabel: this.$t('dashboard.orderTimeOut')
|
||||
})
|
||||
if (this.controlTimer) {
|
||||
clearInterval(this.controlTimer)
|
||||
}
|
||||
}
|
||||
} else if (res.data.isEnd === '0' || res.data.isEnd === 0) {
|
||||
this.$set(this.controlInfo.list, this.activeIndex, {
|
||||
...this.controlInfo.list[this.activeIndex],
|
||||
statusLabel: this.$t('dashboard.orderLoading')
|
||||
})
|
||||
} else if (res.data.isEnd === '') {
|
||||
if (this.controlTimer) {
|
||||
clearInterval(this.controlTimer)
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
if (this.controlTimer) {
|
||||
clearInterval(this.controlTimer)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.con-box {
|
||||
width: 100%;
|
||||
height: 169px;
|
||||
padding: 10px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
}
|
||||
|
||||
.mode {
|
||||
width: 100%;
|
||||
|
||||
.mode-title {
|
||||
padding-right: 10px;
|
||||
color: #fff;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
.control-box {
|
||||
flex: 1;
|
||||
width: 100%;
|
||||
overflow-y: auto;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-evenly;
|
||||
|
||||
.control-item-box {
|
||||
margin-top: 15px;
|
||||
}
|
||||
|
||||
.control-item {
|
||||
width: 190px;
|
||||
height: 40px;
|
||||
background-image: url("../../../../assets/images/controlbg.png");
|
||||
background-size: 100% 100%;
|
||||
background-repeat: no-repeat;
|
||||
box-sizing: border-box;
|
||||
font-size: 16px;
|
||||
color: #ffffff;
|
||||
text-align: center;
|
||||
line-height: 40px;
|
||||
|
||||
word-break: break-all;
|
||||
padding-left: 10px;
|
||||
cursor: pointer;
|
||||
|
||||
div {
|
||||
width: 150px;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.noWork {
|
||||
font-size: 14px;
|
||||
color: #bfc6ce;
|
||||
|
||||
}
|
||||
|
||||
.description-box {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.description-item {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
color: #fff !important;
|
||||
font-size: 14px;
|
||||
|
||||
.label {
|
||||
width: 60px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
::v-deep .el-step__title.is-process {
|
||||
color: #ffffff !important;
|
||||
}
|
||||
|
||||
.case-progress {
|
||||
::v-deep .el-progress-bar__outer {
|
||||
background-color: #023b61;
|
||||
}
|
||||
}
|
||||
|
||||
// 默认当前激活步骤显示的是黑色，这里修改显示为蓝色
|
||||
::v-deep .el-step__head.is-process {
|
||||
color: #ffffff !important; // 圆圈中数字
|
||||
border-color: #0bbd87 !important; // 圆圈
|
||||
|
||||
.el-step__icon {
|
||||
background-color: #0bbd87 !important;
|
||||
}
|
||||
}
|
||||
|
||||
::v-deep .el-step__title.is-process {
|
||||
color: #0bbd87 !important; // 圆圈下的标题文本
|
||||
}
|
||||
|
||||
::v-deep .el-step__head.is-finish {
|
||||
color: #ffffff !important; // 圆圈中数字
|
||||
border-color: #409eff !important; // 圆圈
|
||||
|
||||
.el-step__icon {
|
||||
background-color: #409eff !important;
|
||||
}
|
||||
}
|
||||
|
||||
::v-deep .el-step__title.is-finish {
|
||||
color: #409eff !important; // 圆圈下的标题文本
|
||||
}
|
||||
|
||||
::v-deep .el-dialog {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin: 0 !important;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
max-height: calc(100% - 30px);
|
||||
max-width: calc(100% - 30px);
|
||||
}
|
||||
|
||||
::v-deep .el-dialog .el-dialog__body {
|
||||
flex: 1;
|
||||
overflow: auto;
|
||||
}
|
||||
.dialog-footer{
|
||||
text-align:center;
|
||||
margin-top:20px;
|
||||
}
|
||||
</style>
|
||||
324
src/views/dashboardtest/components/top-right/index.vue
Normal file
324
src/views/dashboardtest/components/top-right/index.vue
Normal file
@ -0,0 +1,324 @@
|
||||
<template>
|
||||
<div>
|
||||
<ItemBox :title="$t('dashboard.realtimeAlarm')">
|
||||
<div v-loading="loading" class="box">
|
||||
<div class="alarm-list">
|
||||
<template v-if="listData.length">
|
||||
<div v-for="(item, index) in listData" :key="index" :class="index % 2 ? 'item1' : 'item'">
|
||||
<div class="alarm-title">
|
||||
<div class="dev">
|
||||
<span class="title">{{ $t('dashboard.device') }}：</span>
|
||||
<span class="value">{{ item.deviceName }}</span>
|
||||
</div>
|
||||
<div class="time-box">
|
||||
<div class="time">{{ item.createTime }}</div>
|
||||
</div>
|
||||
<div class="leve">
|
||||
<span :class="item.name === '异常' ? 'leve-value' : 'leve-value2'">{{ item.name }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bottom">
|
||||
<span class="content">{{ item.description }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<div v-else style="height:100%;text-align:center;font-size:14px;color:#999;display: flex;justify-content: center;align-items: center;">
|
||||
{{ $t('screen.runSuccess' ) }}
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</ItemBox>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { GetAlarmList } from '@/api/alarm/realtime'
|
||||
export default {
|
||||
name: 'Index',
|
||||
props: {
|
||||
stationId: {
|
||||
type: Number,
|
||||
default: 0
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
config: {
|
||||
header: ['等级', '内容', '时间'],
|
||||
data: [],
|
||||
columnWidth: [80],
|
||||
align: ['center', 'center', 'center', 'center'],
|
||||
headerBGC: '#062b40',
|
||||
oddRowBGC: 'rgba(255, 255, 255, 0)',
|
||||
evenRowBGC: 'rgba(255, 255, 255, 0.05)'
|
||||
},
|
||||
pageflag: false,
|
||||
listData: [],
|
||||
loading: false
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
eventLevels() {
|
||||
return this.$store.getters.dicts['eventLevel'] || []
|
||||
},
|
||||
eventTypes() {
|
||||
return this.$store.getters.dicts['eventType'] || []
|
||||
}
|
||||
},
|
||||
watch: {},
|
||||
created() {
|
||||
// this.GetAlarmList()
|
||||
},
|
||||
mounted() {
|
||||
// this.getData()
|
||||
},
|
||||
methods: {
|
||||
oldsortData(data) {
|
||||
const result = data.sort(function(a, b) {
|
||||
return b.createTime - a.createTime
|
||||
})
|
||||
return result
|
||||
},
|
||||
async getData() {
|
||||
this.loading = true
|
||||
this.pageflag = false
|
||||
const params = {
|
||||
pageNum: 1,
|
||||
pageSize: 50,
|
||||
status: 0,
|
||||
stationIds: this.stationId ? [this.stationId] : [],
|
||||
deviceTypeList: [],
|
||||
description: '',
|
||||
eventLevels: ['1', '2', '3'],
|
||||
eventTypes: ['2', '3', '4', '5', '6']
|
||||
}
|
||||
this.config.data = []
|
||||
try {
|
||||
const res = await GetAlarmList(params)
|
||||
// const sortDataRes = this.oldsortData(res.data.list)
|
||||
const chartData = []
|
||||
res.data.list.forEach(item => {
|
||||
const eventLevel = this.getEventLevelsname(item.eventLevel)
|
||||
const lastIndex = item.timeStamp.lastIndexOf('.')
|
||||
const result = item.timeStamp.slice(0, lastIndex)
|
||||
item.timeStamp = result
|
||||
|
||||
const i = {
|
||||
name: eventLevel,
|
||||
deviceName: item.name,
|
||||
description: item.description,
|
||||
createTime: item.timeStamp
|
||||
}
|
||||
chartData.push(i)
|
||||
})
|
||||
// console.log(chartData)
|
||||
this.listData = chartData
|
||||
|
||||
this.pageflag = true
|
||||
} catch (error) {
|
||||
// console.log(error);
|
||||
} finally {
|
||||
this.loading = false
|
||||
}
|
||||
},
|
||||
getEventLevelsname(item) {
|
||||
return (
|
||||
this.eventLevels.find(level => Number(level.value) === item).label || ''
|
||||
)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.box {
|
||||
width: 100%;
|
||||
height: 169px;
|
||||
padding: 10px;
|
||||
font-family: Source Han Sans CN;
|
||||
|
||||
.top-box {
|
||||
width: 100%;
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
}
|
||||
|
||||
.alarm-list {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin: 0 auto;
|
||||
overflow: auto;
|
||||
|
||||
.alarm-title {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
|
||||
.dev {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
|
||||
.title {
|
||||
display: inline-block;
|
||||
|
||||
font-family: Source Han Sans CN;
|
||||
font-size: 14px;
|
||||
font-weight: normal;
|
||||
text-align: center;
|
||||
letter-spacing: 0px;
|
||||
|
||||
color: rgba(206, 235, 255, 0.7);
|
||||
|
||||
}
|
||||
|
||||
.value {
|
||||
|
||||
font-family: Source Han Sans CN;
|
||||
font-size: 14px;
|
||||
font-weight: normal;
|
||||
letter-spacing: 0px;
|
||||
|
||||
color: rgba(206, 235, 255, 0.7);
|
||||
width: calc(100% - 45px);
|
||||
display: -webkit-box; //将盒子转换为弹性盒子
|
||||
-webkit-box-orient: vertical; //文本显示方式，默认水平
|
||||
-webkit-line-clamp: 1; //设置显示多少行
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.time {
|
||||
/* 12:33:17 */
|
||||
|
||||
opacity: 1;
|
||||
|
||||
font-family: Source Han Sans CN;
|
||||
font-size: 14px;
|
||||
font-weight: normal;
|
||||
letter-spacing: 0px;
|
||||
|
||||
color: #ffffff;
|
||||
|
||||
z-index: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.time-box {
|
||||
min-width: 117px;
|
||||
height: 100%;
|
||||
/* 设备：PCS */
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
margin-right: 5px;
|
||||
|
||||
.title {
|
||||
font-family: Source Han Sans CN;
|
||||
font-size: 14px;
|
||||
font-weight: normal;
|
||||
text-align: center;
|
||||
letter-spacing: 0px;
|
||||
flex-shrink: 0;
|
||||
|
||||
color: rgba(206, 235, 255, 0.7);
|
||||
}
|
||||
|
||||
.time {
|
||||
/* 12:33:17 */
|
||||
|
||||
opacity: 1;
|
||||
|
||||
font-family: Source Han Sans CN;
|
||||
font-size: 14px;
|
||||
font-weight: normal;
|
||||
letter-spacing: 0px;
|
||||
|
||||
color: rgba(206, 235, 255, 0.7);
|
||||
|
||||
z-index: 1;
|
||||
display: -webkit-box; //将盒子转换为弹性盒子
|
||||
-webkit-box-orient: vertical; //文本显示方式，默认水平
|
||||
-webkit-line-clamp: 1; //设置显示多少行
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
.leve {
|
||||
// width: 20%;
|
||||
margin-left: auto;
|
||||
|
||||
height: 100%;
|
||||
/* 异常 */
|
||||
text-align: center;
|
||||
opacity: 1;
|
||||
font-family: Source Han Sans CN;
|
||||
font-size: 14px;
|
||||
font-weight: normal;
|
||||
letter-spacing: 0em;
|
||||
color: #ffeeee;
|
||||
text-shadow: 0px 0px 5px 0px #ff0000, 0px 0px 5px 0px #ffb800;
|
||||
|
||||
.leve-value {
|
||||
display: inline-block;
|
||||
width: 40px;
|
||||
background: url(../../../../assets/images/alarm-error.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
.leve-value2 {
|
||||
display: inline-block;
|
||||
width: 40px;
|
||||
background: url(../../../../assets/images/alarm-error-2.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.bottom {
|
||||
width: 100%;
|
||||
margin-top: 10px;
|
||||
padding: 5px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background-image: url('../../../../assets/images/alarm-con-bg.png');
|
||||
background-size: 100% 100%;
|
||||
|
||||
.content {
|
||||
/* 这是内容这是内容这是内容这是内容这是内容这 */
|
||||
|
||||
opacity: 1;
|
||||
|
||||
font-family: Source Han Sans CN;
|
||||
font-size: 14px;
|
||||
font-weight: normal;
|
||||
letter-spacing: 0px;
|
||||
|
||||
color: rgba(255, 255, 255, 1);
|
||||
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
.item {
|
||||
width: 100%;
|
||||
padding: 5px 10px;
|
||||
background-color: #0c3650;
|
||||
background-size: 100% 100%;
|
||||
margin-bottom: 10px;
|
||||
|
||||
}
|
||||
|
||||
.item1 {
|
||||
width: 100%;
|
||||
padding: 5px 10px;
|
||||
margin-bottom: 10px;
|
||||
background-color: transparent;
|
||||
background-size: 100% 100%;
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
Reference in New Issue
Block a user