984 lines
31 KiB
Vue
984 lines
31 KiB
Vue
<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>
|