2025-06-30 10:17:15 +08:00
|
|
|
|
<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>
|
2025-10-17 14:14:48 +08:00
|
|
|
|
<DispositionPointData :disposition-show="show_point_dispostion" :page-location="pageLocation" @close="closePoint" @getData="getDynamicPointData" />
|
2025-06-30 10:17:15 +08:00
|
|
|
|
|
|
|
|
|
|
</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>
|
