初次提交
This commit is contained in:
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>
|
||||
Reference in New Issue
Block a user