584 lines
17 KiB
Vue
584 lines
17 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 600,80"
|
|||
|
|
fill="none"
|
|||
|
|
class="g-rect-path"
|
|||
|
|
stroke="#0094FF"
|
|||
|
|
stroke-dasharray="3 3"
|
|||
|
|
/>
|
|||
|
|
<!-- center -->
|
|||
|
|
<polyline
|
|||
|
|
points="385,80 385,363"
|
|||
|
|
fill="none"
|
|||
|
|
class="g-rect-path"
|
|||
|
|
stroke="#0094FF"
|
|||
|
|
stroke-dasharray="3 3"
|
|||
|
|
/>
|
|||
|
|
|
|||
|
|
<polyline
|
|||
|
|
points="385,160 460,160"
|
|||
|
|
fill="none"
|
|||
|
|
class="g-rect-path"
|
|||
|
|
stroke="#0094FF"
|
|||
|
|
stroke-dasharray="3 3"
|
|||
|
|
/>
|
|||
|
|
|
|||
|
|
<!-- bottom -->
|
|||
|
|
<polyline
|
|||
|
|
points="104,363 655,363"
|
|||
|
|
fill="none"
|
|||
|
|
class="g-rect-path"
|
|||
|
|
stroke="#0094FF"
|
|||
|
|
stroke-dasharray="3 3"
|
|||
|
|
/>
|
|||
|
|
|
|||
|
|
<!-- top -->
|
|||
|
|
<circle
|
|||
|
|
cx="154"
|
|||
|
|
cy="80"
|
|||
|
|
r="8"
|
|||
|
|
style="stroke: none; fill: url(#RadialGradient1)"
|
|||
|
|
/>
|
|||
|
|
<circle
|
|||
|
|
cx="600"
|
|||
|
|
cy="80"
|
|||
|
|
r="8"
|
|||
|
|
style="stroke: none; fill: url(#RadialGradient1)"
|
|||
|
|
/>
|
|||
|
|
|
|||
|
|
<!-- 动点 -->
|
|||
|
|
<circle
|
|||
|
|
cx="154"
|
|||
|
|
cy="80"
|
|||
|
|
r="8"
|
|||
|
|
style="stroke: none; fill: url(#RadialGradient1)"
|
|||
|
|
>
|
|||
|
|
<animateMotion
|
|||
|
|
repeatCount="indefinite"
|
|||
|
|
dur="4s"
|
|||
|
|
begin="0s"
|
|||
|
|
:path="dotData.lineTop"
|
|||
|
|
/>
|
|||
|
|
</circle>
|
|||
|
|
|
|||
|
|
<circle
|
|||
|
|
cx="460"
|
|||
|
|
cy="160"
|
|||
|
|
r="8"
|
|||
|
|
style="stroke: none; fill: url(#RadialGradient1)"
|
|||
|
|
>
|
|||
|
|
<!-- <animateMotion
|
|||
|
|
repeatCount="indefinite"
|
|||
|
|
dur="4s"
|
|||
|
|
begin="0s"
|
|||
|
|
:path="dotData.lineTop"
|
|||
|
|
/> -->
|
|||
|
|
</circle>
|
|||
|
|
|
|||
|
|
<!-- bottom -->
|
|||
|
|
<circle
|
|||
|
|
cx="104"
|
|||
|
|
cy="363"
|
|||
|
|
r="8"
|
|||
|
|
style="stroke: none; fill: url(#RadialGradient1)"
|
|||
|
|
/>
|
|||
|
|
<circle
|
|||
|
|
cx="385"
|
|||
|
|
cy="363"
|
|||
|
|
r="8"
|
|||
|
|
style="stroke: none; fill: url(#RadialGradient1)"
|
|||
|
|
/>
|
|||
|
|
<circle
|
|||
|
|
cx="655"
|
|||
|
|
cy="363"
|
|||
|
|
r="8"
|
|||
|
|
style="stroke: none; fill: url(#RadialGradient1)"
|
|||
|
|
/>
|
|||
|
|
|
|||
|
|
<circle
|
|||
|
|
cx="104"
|
|||
|
|
cy="363"
|
|||
|
|
r="8"
|
|||
|
|
style="stroke: none; fill: url(#RadialGradient1)"
|
|||
|
|
>
|
|||
|
|
<animateMotion
|
|||
|
|
repeatCount="indefinite"
|
|||
|
|
dur="4s"
|
|||
|
|
begin="2s"
|
|||
|
|
:path="dotData.lineBottomLeft"
|
|||
|
|
/>
|
|||
|
|
</circle>
|
|||
|
|
|
|||
|
|
<circle
|
|||
|
|
cx="655"
|
|||
|
|
cy="363"
|
|||
|
|
r="8"
|
|||
|
|
style="stroke: none; fill: url(#RadialGradient1)"
|
|||
|
|
>
|
|||
|
|
<animateMotion
|
|||
|
|
repeatCount="indefinite"
|
|||
|
|
dur="4s"
|
|||
|
|
begin="2s"
|
|||
|
|
:path="dotData.lineBottomRight"
|
|||
|
|
/>
|
|||
|
|
</circle>
|
|||
|
|
|
|||
|
|
<circle
|
|||
|
|
cx="385"
|
|||
|
|
cy="363"
|
|||
|
|
r="8"
|
|||
|
|
style="stroke: none; fill: url(#RadialGradient1)"
|
|||
|
|
>
|
|||
|
|
<animateMotion
|
|||
|
|
repeatCount="indefinite"
|
|||
|
|
dur="4s"
|
|||
|
|
begin="2s"
|
|||
|
|
:path="dotData.lineCenter"
|
|||
|
|
/>
|
|||
|
|
</circle>
|
|||
|
|
|
|||
|
|
<!-- 图片和文字 -->
|
|||
|
|
|
|||
|
|
<!-- 市电 -->
|
|||
|
|
<image
|
|||
|
|
:xlink:href="configData.grid"
|
|||
|
|
x="70"
|
|||
|
|
y="30"
|
|||
|
|
width="90"
|
|||
|
|
height="117"
|
|||
|
|
/>
|
|||
|
|
|
|||
|
|
<!-- {{ $t("dashboard.load") }} -->
|
|||
|
|
<image
|
|||
|
|
:xlink:href="configData.house"
|
|||
|
|
x="610"
|
|||
|
|
y="30"
|
|||
|
|
width="90"
|
|||
|
|
height="117"
|
|||
|
|
/>
|
|||
|
|
<text x="645" y="160" fill="#ffffff" font-size="14"> {{ $t("dashboard.load") }}</text>
|
|||
|
|
|
|||
|
|
<!-- 1#PCS -->
|
|||
|
|
<image
|
|||
|
|
:xlink:href="configData.pcs2"
|
|||
|
|
x="95"
|
|||
|
|
y="383"
|
|||
|
|
width="90"
|
|||
|
|
height="90"
|
|||
|
|
/>
|
|||
|
|
<text x="116" y="490" fill="#ffffff" font-size="14">
|
|||
|
|
1#{{ $t("dashboard.cabinet") }}
|
|||
|
|
</text>
|
|||
|
|
|
|||
|
|
<image
|
|||
|
|
:xlink:href="configData.pcs2"
|
|||
|
|
x="335"
|
|||
|
|
y="383"
|
|||
|
|
width="90"
|
|||
|
|
height="90"
|
|||
|
|
/>
|
|||
|
|
<text x="360" y="490" fill="#ffffff" font-size="14">
|
|||
|
|
2#{{ $t("dashboard.cabinet") }}
|
|||
|
|
</text>
|
|||
|
|
|
|||
|
|
<image
|
|||
|
|
:xlink:href="configData.pcs2"
|
|||
|
|
x="574"
|
|||
|
|
y="383"
|
|||
|
|
width="90"
|
|||
|
|
height="90"
|
|||
|
|
/>
|
|||
|
|
<text x="604" y="490" fill="#ffffff" font-size="14">
|
|||
|
|
3#{{ $t("dashboard.cabinet") }}
|
|||
|
|
</text>
|
|||
|
|
|
|||
|
|
<!-- 变压器 -->
|
|||
|
|
<image
|
|||
|
|
:xlink:href="configData.gui"
|
|||
|
|
x="320"
|
|||
|
|
y="193"
|
|||
|
|
width="140"
|
|||
|
|
height="105"
|
|||
|
|
/>
|
|||
|
|
|
|||
|
|
<!-- {{ $t("dashboard.ammeter") }} -->
|
|||
|
|
<image
|
|||
|
|
:xlink:href="ammeterImg"
|
|||
|
|
x="455"
|
|||
|
|
y="130"
|
|||
|
|
width="100"
|
|||
|
|
height="60"
|
|||
|
|
/>
|
|||
|
|
<!-- 瞬时总有功 -->
|
|||
|
|
<text x="435" y="220" fill="#ffffff" font-size="14">
|
|||
|
|
{{ $t("dashboard.totalP") }}(kW)：
|
|||
|
|
</text>
|
|||
|
|
<text x="545" y="220" fill="#ffb800" font-size="14">
|
|||
|
|
{{ activePowerTotal.activePower }}
|
|||
|
|
</text>
|
|||
|
|
|
|||
|
|
<!-- 左侧 -->
|
|||
|
|
<!-- 1#PCS -->
|
|||
|
|
<text x="85" y="280" fill="#ffffff" font-size="14">SOC(%)：</text>
|
|||
|
|
<text x="155" y="280" fill="#ffb800" font-size="14">
|
|||
|
|
{{ partList.length > 0 ? partList[0].soc : 0 }}
|
|||
|
|
</text>
|
|||
|
|
<text x="85" y="300" fill="#ffffff" font-size="14">SOH(%)：</text>
|
|||
|
|
<text x="155" y="300" fill="#ffb800" font-size="14">
|
|||
|
|
{{ partList.length > 0 ? partList[0].soh : 0 }}
|
|||
|
|
</text>
|
|||
|
|
|
|||
|
|
<text x="85" y="320" fill="#ffffff" font-size="14">
|
|||
|
|
{{ $t("dashboard.workStatus") }}：
|
|||
|
|
</text>
|
|||
|
|
<text x="175" y="320" fill="#ffb800" font-size="14">
|
|||
|
|
{{ workStatus(partList[0].activePowerPCS, 0) }}
|
|||
|
|
</text>
|
|||
|
|
<text x="85" y="340" fill="#ffffff" font-size="14">
|
|||
|
|
{{ $t("dashboard.activePower") }}({{
|
|||
|
|
partList.length > 0
|
|||
|
|
? partList[0].activePowerPCS
|
|||
|
|
: 0 | kwUnitFormat
|
|||
|
|
}})：
|
|||
|
|
</text>
|
|||
|
|
<text x="185" y="340" fill="#ffb800" font-size="14">
|
|||
|
|
{{
|
|||
|
|
partList.length > 0
|
|||
|
|
? partList[0].activePowerPCS
|
|||
|
|
: 0 | kWFormat(2)
|
|||
|
|
}}
|
|||
|
|
</text>
|
|||
|
|
<!-- 中间 2PCS -->
|
|||
|
|
|
|||
|
|
<text x="420" y="280" fill="#ffffff" font-size="14">
|
|||
|
|
SOC(%)：
|
|||
|
|
</text>
|
|||
|
|
<text x="492" y="280" fill="#ffb800" font-size="14">
|
|||
|
|
{{ partList.length > 0 ? partList[1].soc : 0 }}
|
|||
|
|
</text>
|
|||
|
|
<text x="420" y="300" fill="#ffffff" font-size="14">
|
|||
|
|
SOH(%)：
|
|||
|
|
</text>
|
|||
|
|
<text x="492" y="300" fill="#ffb800" font-size="14">
|
|||
|
|
{{ partList.length > 0 ? partList[1].soh : 0 }}
|
|||
|
|
</text>
|
|||
|
|
<text x="420" y="320" fill="#ffffff" font-size="14">
|
|||
|
|
{{ $t("dashboard.workStatus") }}：
|
|||
|
|
</text>
|
|||
|
|
<text x="512" y="320" fill="#ffb800" font-size="14">
|
|||
|
|
{{ workStatus(partList[1].activePowerPCS, 1) }}
|
|||
|
|
</text>
|
|||
|
|
<text x="420" y="340" fill="#ffffff" font-size="14">
|
|||
|
|
{{ $t("dashboard.activePower") }}({{
|
|||
|
|
partList.length > 0
|
|||
|
|
? partList[1].activePowerPCS
|
|||
|
|
: 0 | kwUnitFormat
|
|||
|
|
}})：
|
|||
|
|
</text>
|
|||
|
|
<text x="520" y="340" fill="#ffb800" font-size="14">
|
|||
|
|
{{
|
|||
|
|
partList.length > 0
|
|||
|
|
? partList[1].activePowerPCS
|
|||
|
|
: 0 | kWFormat(2)
|
|||
|
|
}}
|
|||
|
|
</text>
|
|||
|
|
|
|||
|
|
<!-- 右侧 -->
|
|||
|
|
|
|||
|
|
<text x="602" y="280" fill="#ffffff" font-size="14">
|
|||
|
|
SOC(%)：
|
|||
|
|
</text>
|
|||
|
|
<text x="672" y="280" fill="#ffb800" font-size="14">
|
|||
|
|
{{ partList.length > 0 ? partList[2].soc : 0 }}
|
|||
|
|
</text>
|
|||
|
|
<text x="602" y="300" fill="#ffffff" font-size="14">
|
|||
|
|
SOH(%)：
|
|||
|
|
</text>
|
|||
|
|
<text x="672" y="300" fill="#ffb800" font-size="14">
|
|||
|
|
{{ partList.length > 0 ? partList[2].soh : 0 }}
|
|||
|
|
</text>
|
|||
|
|
<text x="602" y="320" fill="#ffffff" font-size="14">
|
|||
|
|
{{ $t("dashboard.workStatus") }}：
|
|||
|
|
</text>
|
|||
|
|
<text x="692" y="320" fill="#ffb800" font-size="14">
|
|||
|
|
{{ workStatus(partList[2].activePowerPCS, 2) }}
|
|||
|
|
</text>
|
|||
|
|
<text x="602" y="340" fill="#ffffff" font-size="14">
|
|||
|
|
{{ $t("dashboard.activePower") }}({{
|
|||
|
|
partList.length > 0
|
|||
|
|
? partList[2].activePowerPCS
|
|||
|
|
: 0 | kwUnitFormat
|
|||
|
|
}})：
|
|||
|
|
</text>
|
|||
|
|
<text x="702" y="340" fill="#ffb800" font-size="14">
|
|||
|
|
{{
|
|||
|
|
partList.length > 0
|
|||
|
|
? partList[2].activePowerPCS
|
|||
|
|
: 0 | kWFormat(2)
|
|||
|
|
}}
|
|||
|
|
</text>
|
|||
|
|
</svg>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</ItemBox>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
import gridImg from '@/assets/images/wxjd/grid.png'
|
|||
|
|
import ammeterImg from '@/assets/images/wxjd/ammeter.png'
|
|||
|
|
import cabinetImg from '@/assets/images/wxjd/pcs-energy.png'
|
|||
|
|
import chargingPileImg from '@/assets/images/home-office.png'
|
|||
|
|
import distributionCabinetImg from '@/assets/images/wxjd/guiImg.png'
|
|||
|
|
import frameImg from '@/assets/images/wxjd/frame.png'
|
|||
|
|
import cangImg from '@/assets/images/home-cang.png'
|
|||
|
|
import config from './config'
|
|||
|
|
import { changeTheme } from '@/utils/index'
|
|||
|
|
import {
|
|||
|
|
GetOpenStationMiddle,
|
|||
|
|
GetOpenStationMiddlePart,
|
|||
|
|
GetTotalPower
|
|||
|
|
} from '@/api/home-page/index'
|
|||
|
|
export default {
|
|||
|
|
name: 'Index',
|
|||
|
|
props: {
|
|||
|
|
stationType: {
|
|||
|
|
type: Number,
|
|||
|
|
default: 0
|
|||
|
|
},
|
|||
|
|
stationId: {
|
|||
|
|
type: Number,
|
|||
|
|
default: 0
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
gridImg,
|
|||
|
|
ammeterImg,
|
|||
|
|
cabinetImg,
|
|||
|
|
chargingPileImg,
|
|||
|
|
distributionCabinetImg,
|
|||
|
|
cangImg,
|
|||
|
|
frameImg,
|
|||
|
|
dotData: {
|
|||
|
|
lineTop: 'M 0,0 0,0',
|
|||
|
|
lineBottomLeft: 'M 0,0 0,0 0,0',
|
|||
|
|
lineBottomRight: 'M 0,0 0,0 0,0',
|
|||
|
|
lineCenter: 'M 0,0 0,0 0,0'
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
partList: [
|
|||
|
|
{ soc: 0, soh: 0, activePowerPCS: 0.0, reactivePowerPCS: 0.0 },
|
|||
|
|
{ soc: 0, soh: 0, activePowerPCS: 0.0, reactivePowerPCS: 0.0 },
|
|||
|
|
{ soc: 0, soh: 0, activePowerPCS: 0.0, reactivePowerPCS: 0.0 }
|
|||
|
|
],
|
|||
|
|
loading: false,
|
|||
|
|
activePowerTotal: {},
|
|||
|
|
configData: {}
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
computed: {},
|
|||
|
|
watch: {},
|
|||
|
|
created() {
|
|||
|
|
const result = changeTheme()
|
|||
|
|
this.configData = config[result]
|
|||
|
|
},
|
|||
|
|
mounted() {},
|
|||
|
|
methods: {
|
|||
|
|
workStatus(val, index) {
|
|||
|
|
if (this.partList[index].flowDirection === 1) {
|
|||
|
|
if (+val > +1) {
|
|||
|
|
return this.$t('dashboard.charging')
|
|||
|
|
}
|
|||
|
|
if (+val < -1) {
|
|||
|
|
return this.$t('dashboard.disCharging')
|
|||
|
|
}
|
|||
|
|
if (val < 1 || +val.abs < 1) {
|
|||
|
|
return this.$t('dashboard.standing')
|
|||
|
|
}
|
|||
|
|
} else {
|
|||
|
|
if (+val > +1) {
|
|||
|
|
return this.$t('dashboard.disCharging')
|
|||
|
|
}
|
|||
|
|
if (+val < -1) {
|
|||
|
|
return this.$t('dashboard.charging')
|
|||
|
|
}
|
|||
|
|
if (val < 1 || +val.abs < 1) {
|
|||
|
|
return this.$t('dashboard.standing')
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
getData() {
|
|||
|
|
this.GetMiddleActive()
|
|||
|
|
this.GetOpenStationMiddle()
|
|||
|
|
this.GetOpenStationMiddlePart()
|
|||
|
|
},
|
|||
|
|
async GetMiddleActive() {
|
|||
|
|
this.loading = true
|
|||
|
|
try {
|
|||
|
|
const params = {
|
|||
|
|
stationId: this.stationId
|
|||
|
|
}
|
|||
|
|
const res = await GetTotalPower(params)
|
|||
|
|
this.activePowerTotal = res.data
|
|||
|
|
} catch (error) {
|
|||
|
|
// console.log(error);
|
|||
|
|
} finally {
|
|||
|
|
this.loading = false
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
flowDirection(data) {
|
|||
|
|
this.dotData.lineTop = 'M 0,0 412,0'
|
|||
|
|
if (data[0].flowDirection === 1) {
|
|||
|
|
if (data[0].activePowerPCS > 1) {
|
|||
|
|
this.dotData.lineBottomLeft = 'M 283,-280, 280, 0, 0 ,0'
|
|||
|
|
} else if (data[0].activePowerPCS < -1) {
|
|||
|
|
this.dotData.lineBottomLeft = 'M 0,0 281,0 281,-283'
|
|||
|
|
} else if (data[0].activePowerPCS === 0 || !data[0].activePowerPCS || (data[0].activePowerPCS > -1 && data[0].activePowerPCS < 1)) {
|
|||
|
|
this.dotData.lineBottomLeft = ''
|
|||
|
|
}
|
|||
|
|
if (data[1].activePowerPCS > 1) {
|
|||
|
|
this.dotData.lineCenter = 'M 0,-283,0,0,0,0'
|
|||
|
|
} else if (data[1].activePowerPCS < -1) {
|
|||
|
|
this.dotData.lineCenter = 'M 0,0,0,0,0,-283'
|
|||
|
|
} else if (data[1].activePowerPCS === 0 || !data[1].activePowerPCS || (data[1].activePowerPCS > -1 && data[1].activePowerPCS < 1)) {
|
|||
|
|
this.dotData.lineCenter = ''
|
|||
|
|
}
|
|||
|
|
if (data[2].activePowerPCS > 1) {
|
|||
|
|
this.dotData.lineBottomRight = 'M -271, -280 , -271 , 0 , 0 , 0'
|
|||
|
|
} else if (data[2].activePowerPCS < -1) {
|
|||
|
|
this.dotData.lineBottomRight = 'M 0,0 -271,0 -271,-283'
|
|||
|
|
} else if (data[2].activePowerPCS === 0 || !data[2].activePowerPCS || (data[2].activePowerPCS > -1 && data[2].activePowerPCS < 1)) {
|
|||
|
|
this.dotData.lineBottomRight = ''
|
|||
|
|
}
|
|||
|
|
} else {
|
|||
|
|
if (data[0].activePowerPCS > 1) {
|
|||
|
|
this.dotData.lineBottomLeft = 'M 0,0 281,0 281,-283'
|
|||
|
|
} else if (data[0].activePowerPCS < -1) {
|
|||
|
|
this.dotData.lineBottomLeft = 'M 283,-280, 280, 0, 0 ,0'
|
|||
|
|
} else if (data[0].activePowerPCS === 0 || !data[0].activePowerPCS || (data[0].activePowerPCS > -1 && data[0].activePowerPCS < 1)) {
|
|||
|
|
this.dotData.lineBottomLeft = ''
|
|||
|
|
}
|
|||
|
|
if (data[1].activePowerPCS > 1) {
|
|||
|
|
this.dotData.lineCenter = 'M 0,0,0,0,0,-283'
|
|||
|
|
} else if (data[1].activePowerPCS < -1) {
|
|||
|
|
this.dotData.lineCenter = 'M 0,-283,0,0,0,0'
|
|||
|
|
} else if (data[1].activePowerPCS === 0 || !data[1].activePowerPCS || (data[1].activePowerPCS > -1 && data[1].activePowerPCS < 1)) {
|
|||
|
|
this.dotData.lineCenter = ''
|
|||
|
|
}
|
|||
|
|
if (data[2].activePowerPCS > 1) {
|
|||
|
|
this.dotData.lineBottomRight = 'M 0,0 -271,0 -271,-283'
|
|||
|
|
} else if (data[2].activePowerPCS < -1) {
|
|||
|
|
this.dotData.lineBottomRight = 'M -271, -280 , -271 , 0 , 0 , 0'
|
|||
|
|
} else if (data[2].activePowerPCS === 0 || !data[2].activePowerPCS || (data[2].activePowerPCS > -1 && data[2].activePowerPCS < 1)) {
|
|||
|
|
this.dotData.lineBottomRight = ''
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
async GetOpenStationMiddlePart() {
|
|||
|
|
this.loading = true
|
|||
|
|
try {
|
|||
|
|
const params = {
|
|||
|
|
stationId: this.stationId
|
|||
|
|
}
|
|||
|
|
const res = await GetOpenStationMiddlePart(params)
|
|||
|
|
this.partList = res.data
|
|||
|
|
this.flowDirection(this.partList)
|
|||
|
|
} catch (error) {
|
|||
|
|
// console.log(error);
|
|||
|
|
} finally {
|
|||
|
|
this.loading = false
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
async GetOpenStationMiddle() {
|
|||
|
|
this.loading = true
|
|||
|
|
try {
|
|||
|
|
const params = {
|
|||
|
|
stationId: this.stationId
|
|||
|
|
}
|
|||
|
|
await GetOpenStationMiddle(params)
|
|||
|
|
} catch (error) {
|
|||
|
|
// console.log(error);
|
|||
|
|
} finally {
|
|||
|
|
this.loading = false
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
<style lang="scss" scoped>
|
|||
|
|
.center-box {
|
|||
|
|
width: 100%;
|
|||
|
|
height: 100%;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
@mixin move-round($duration, $delay) {
|
|||
|
|
fill: none;
|
|||
|
|
stroke-width: 5;
|
|||
|
|
stroke-linejoin: round;
|
|||
|
|
stroke-linecap: round;
|
|||
|
|
stroke-dasharray: 3, 900;
|
|||
|
|
stroke-dashoffset: 0;
|
|||
|
|
animation: lineMove $duration $delay cubic-bezier(0, 0, 0.74, 0.74) infinite;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
@keyframes lineMove {
|
|||
|
|
0% {
|
|||
|
|
stroke-dashoffset: -850;
|
|||
|
|
}
|
|||
|
|
100% {
|
|||
|
|
stroke-dashoffset: -0;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.g-rect-fill-two {
|
|||
|
|
@include move-round(3.5s, 1s);
|
|||
|
|
}
|
|||
|
|
</style>
|