346 lines
13 KiB
Vue
346 lines
13 KiB
Vue
|
<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>
|