zzkj/smart_storage_web
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

初次提交

Browse Source
This commit is contained in:
root
2025-06-30 10:17:15 +08:00
commit 5446088524
989 changed files with 365987 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

287
src/views/dashboardtest/components/top-center/common.vue Normal file
View File

@ -0,0 +1,287 @@
<template>
<ItemBox :title="$t('dashboard.stationTopo')" style="min-height: 560px;">
<div ref="svgLine" v-loading="loading" class="center-box">
<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>
<polyline
points="115,206 673,206"
fill="none"
class="g-rect-path"
stroke-width="1"
stroke="#0094FF"
stroke-dasharray="3 3"
/>
<circle
cx="110"
cy="206"
r="8"
style="stroke: none; fill: url(#RadialGradient1)"
/>
<!-- //动点 -->
<circle cx="110" cy="206" r="8" style="stroke: none; fill: url(#RadialGradient1)">
<animateMotion repeatCount="indefinite" dur="8s" begin="0s" :path="line.line2" />
</circle>
<circle
cx="673"
cy="206"
r="8"
style="stroke: none; fill: url(#RadialGradient1)"
/>
<!-- //动点 -->
<circle cx="673" cy="206" r="8" style="stroke: none; fill: url(#RadialGradient1)">
<animateMotion repeatCount="indefinite" dur="8s" begin="0s" :path="line.line1" />
</circle>
<!-- {{ $t("dashboard.dCCabin") }} -->
<image
v-if="stationId === 381"
:xlink:href="tnHomeCang"
x="680"
y="162"
width="60"
height="80"
/>
<image
v-else
:xlink:href="configData.pcs"
x="680"
y="162"
width="60"
height="80"
/>
<!-- 电网 -->
<image
:xlink:href="configData.grid"
x="35"
y="162"
width="60"
height="80"
/>
<!-- {{ $t("dashboard.gridCab") }} -->
<image
:xlink:href="configData.gui"
x="361"
y="162"
width="80"
height="80"
/>
<!-- {{ $t("dashboard.dCCabin") }} -->
<text x="635" y="290" fill="#ffffff" font-size="14">
{{ $t("dashboard.workStatus") }}：
</text>
<text x="735" y="290" fill="#FFB800" font-size="14">
{{ workStatus(formModel.activePowerPCS) }}
</text>
<text x="637" y="313" fill="#ffffff" font-size="14">
{{ $t("dashboard.activePower") }}(kW)：
</text>
<text x="735" y="313" fill="#FFB800" font-size="14">
{{ formModel.activePowerPCS }}
</text>
<text x="668" y="333" fill="#ffffff" font-size="14">
SOC(%)：
</text>
<text x="735" y="333" fill="#FFB800" font-size="14">
{{ formModel.soc }}
</text>
<text x="668" y="353" fill="#ffffff" font-size="14">
SOH(%)：
</text>
<text x="735" y="353" fill="#FFB800" font-size="14">
{{ formModel.soh }}
</text>
<text x="670" y="260" fill="#ffffff" font-size="14">
{{ $t("dashboard.esiCab") }}
</text>
<text x="379" y="260" fill="#ffffff" font-size="14">
{{ $t("dashboard.gridCab") }}
</text>
<text x="38" y="260" fill="#ffffff" font-size="14">
{{ $t("dashboard.grid") }}
</text>
</svg>
</div>
</ItemBox>
</template>
<script>
import homeOffice from '@/assets/images/home-office.png'
import homeIntegrated from '@/assets/images/wxjd/pcs-energy.png'
import homePowerGrid from '@/assets/images/home-powerGrid.png'
import homeInverter from '@/assets/images/home-inverter-1.png'
import tnHomeCang from '@/assets/images/wxjd/cabinet.png'
import {
GetbozhouTuopuStatus
} from '@/api/homePage-integrated/index'
import config from './config'
import { changeTheme } from '@/utils/index'
export default {
name: 'Index',
props: {
stationType: {
type: Number,
default: 0
},
stationId: {
type: Number,
default: 0
}
},
data() {
return {
formModel: { soc: 0, soh: 0, activePowerPCS: 0.0, reactivePowerPCS: 0.0 },
configData: {},
partList: [
{ soc: 0, soh: 0, activePowerPCS: 0.0, reactivePowerPCS: 0.0 },
{ soc: 0, soh: 0, activePowerPCS: 0.0, reactivePowerPCS: 0.0 }
],
homeOffice,
homeIntegrated,
homePowerGrid,
homeInverter,
tnHomeCang,
loading: false,
currentIndex: 0,
line: {
line1: 'M 0,0 0,0', // {{ $t("dashboard.gridCab") }}和一体柜之间的连线 {{ $t("dashboard.gridCab") }}流向一体柜
line2: 'M 0,0 0,0' // {{ $t("dashboard.gridCab") }}和电网之间的连线- 电网流向{{ $t("dashboard.gridCab") }}
},
otherLine: {
line1: '410,220 170,220 ', // {{ $t("dashboard.gridCab") }}和一体柜之间的连线 一体柜流向{{ $t("dashboard.gridCab") }}
line2: '600,220 410,220' // {{ $t("dashboard.gridCab") }}和电网之间的连线- {{ $t("dashboard.gridCab") }}流向电网
}
}
},
computed: {
},
watch: {},
created() {
const result = changeTheme()
this.configData = config[result]
},
mounted() { },
methods: {
getData() {
this.getbozhouTuopuStatus()
},
// 对海南站处理
workStatus(val) {
if (this.formModel.flowDirection === 2) {
if (+val > +1) {
return this.$t('dashboard.disCharging')
}
if (+val < -1) {
return this.$t('dashboard.charging')
}
if (val < 1 || +val.abs < 1 || !val) {
return this.$t('dashboard.standing')
}
} else {
if (+val > +1) {
return this.$t('dashboard.charging')
}
if (+val < -1) {
return this.$t('dashboard.disCharging')
}
if (val < 1 || +val.abs < 1 || !val) {
return this.$t('dashboard.standing')
}
}
},
getFlowDirection(val) {
if (this.formModel.flowDirection === 2) {
if (+val > +1) {
this.line.line1 = 'M 0,0 -270,0'
this.line.line2 = 'M 301,0 0,0'
}
if (+val < -1) {
this.line.line1 = 'M -272,0 0,0'
this.line.line2 = 'M 0,0 301,0'
}
if (val === 0 || !val || (val > -1 && val < 1)) {
this.line.line1 = ''
this.line.line2 = ''
}
} else {
if (+val > +1) {
this.line.line1 = 'M -272,0 0,0'
this.line.line2 = 'M 0,0 301,0'
}
if (+val < -1) {
this.line.line1 = 'M 0,0 -270,0'
this.line.line2 = 'M 301,0 0,0'
}
if (val === 0 || !val || (val > -1 && val < 1)) {
this.line.line1 = ''
this.line.line2 = ''
}
}
},
async getbozhouTuopuStatus() {
this.loading = true
const params = {
stationId: this.stationId
}
try {
const res = await GetbozhouTuopuStatus(params)
this.formModel = res.data
this.getFlowDirection(this.formModel.activePowerPCS)
} catch (error) {
// console.log(error);
} finally {
this.loading = false
}
}
}
}
</script>
<style lang="scss" scoped>
.center-box {
width: 100%;
height: 100%;
}
</style>

33
src/views/dashboardtest/components/top-center/config.js Normal file
View File

@ -0,0 +1,33 @@
import homePowerGrid from '@/assets/images/home-powerGrid.png'
import homeInverter from '@/assets/images/home-inverter-1.png'
import homeCang from '@/assets/images/wxjd/cabinet.png'
import thHomeCang from '@/assets/images/wxjd/th-cabinet.png'
import thHomeGui from '@/assets/images/wxjd/th-gui.png'
import cabinetImg from '@/assets/images/wxjd/pcs-energy.png'
import chargingPileImg from '@/assets/images/home-office.png'
import thHome from '@/assets/images/wxjd/house.png'
const hz = {
pcs: homeCang,
pcs2: cabinetImg,
gui: homeInverter,
grid: homePowerGrid,
house: chargingPileImg
}
const th = {
pcs: thHomeCang,
pcs2: thHomeCang,
gui: thHomeGui,
grid: homePowerGrid,
house: thHome
}
export default { hz, th }
// let data = {}
// if (JSON.parse(localStorage.getItem('themeConfig'))?.title === 'th') {
// data = th
// } else {
// data = hz
// }
// export default data
// console.log(123, store.getters.config.title === th){
// }

786
src/views/dashboardtest/components/top-center/eighth.vue Normal file
View File

@ -0,0 +1,786 @@
<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="425"
cy="320"
r="8"
style="stroke: none; fill: url(#RadialGradient1)"
>
<animateMotion
repeatCount="indefinite"
dur="4s"
begin="0s"
:path="dotData.lineBottomFive"
/>
</circle>
<circle
cx="505"
cy="320"
r="8"
style="stroke: none; fill: url(#RadialGradient1)"
>
<animateMotion
repeatCount="indefinite"
dur="4s"
begin="0s"
:path="dotData.lineBottomSix"
/>
</circle>
<circle
cx="585"
cy="320"
r="8"
style="stroke: none; fill: url(#RadialGradient1)"
>
<animateMotion
repeatCount="indefinite"
dur="4s"
begin="0s"
:path="dotData.lineBottomSeven"
/>
</circle>
<circle
cx="665"
cy="320"
r="8"
style="stroke: none; fill: url(#RadialGradient1)"
>
<animateMotion
repeatCount="indefinite"
dur="4s"
begin="0s"
:path="dotData.lineBottomEight"
/>
</circle>
<!-- top -->
<circle
cx="154"
cy="60"
r="8"
style="stroke: none; fill: url(#RadialGradient1);cursor: pointer;"
@click="disposition('eight-line-top-left')"
/>
<circle
cx="630"
cy="60"
r="8"
style="stroke: none; fill: url(#RadialGradient1);cursor: pointer;"
@click="disposition('eight-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="disposition('eight-line-bottom-one')"
/>
<circle
cx="210"
cy="320"
r="8"
style="stroke: none; fill: url(#RadialGradient1);cursor: pointer;"
@click="disposition('eight-line-bottom-two')"
/>
<circle
cx="290"
cy="320"
r="8"
style="stroke: none; fill: url(#RadialGradient1);cursor: pointer;"
@click="disposition('eight-line-bottom-three')"
/>
<circle
cx="365"
cy="320"
r="8"
style="stroke: none; fill: url(#RadialGradient1);cursor: pointer;"
@click="disposition('eight-line-bottom-four')"
/>
<circle
cx="425"
cy="320"
r="8"
style="stroke: none; fill: url(#RadialGradient1);cursor: pointer;"
@click="disposition('eight-line-bottom-five')"
/>
<circle
cx="505"
cy="320"
r="8"
style="stroke: none; fill: url(#RadialGradient1);cursor: pointer;"
@click="disposition('eight-line-bottom-six')"
/>
<circle
cx="585"
cy="320"
r="8"
style="stroke: none; fill: url(#RadialGradient1);cursor: pointer;"
@click="disposition('eight-line-bottom-seven')"
/>
<circle
cx="665"
cy="320"
r="8"
style="stroke: none; fill: url(#RadialGradient1);cursor: pointer;"
@click="disposition('eight-line-bottom-eight')"
/>
<!-- 图片和文字 -->
<!-- 市电 -->
<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('eight_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="disposition('eight_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="disposition('eight_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="disposition('eight_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="400"
y="330"
width="50"
height="50"
style="cursor: pointer;"
@click="disposition('eight_pcs_5')"
/>
<text x="400" y="410" fill="#ffffff" font-size="14">{{ hiddenTextWord(`5#${$t("dashboard.cabinet")}`,8) }}</text>
<!-- 6#PCS -->
<image
:xlink:href="cabinetImg"
x="480"
y="330"
width="50"
height="50"
style="cursor: pointer;"
@click="disposition('eight_pcs_6')"
/>
<text x="475" y="410" fill="#ffffff" font-size="14">{{ hiddenTextWord(`6#${$t("dashboard.cabinet")}`,8) }}</text>
<image
:xlink:href="cabinetImg"
x="560"
y="330"
width="50"
height="50"
style="cursor: pointer;"
@click="disposition('eight_pcs_7')"
/>
<text x="555" y="410" fill="#ffffff" font-size="14">{{ hiddenTextWord(`7#${$t("dashboard.cabinet")}`,8) }}</text>
<image
:xlink:href="cabinetImg"
x="640"
y="330"
width="50"
height="50"
style="cursor: pointer;"
@click="disposition('eight_pcs_8')"
/>
<text x="630" y="410" fill="#ffffff" font-size="14">{{ hiddenTextWord(`8#${$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('eighth_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>
<!-- 左侧 -->
<!-- 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="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="340" y="440" fill="#FFB800" font-size="14">{{ pcsData_4.length ? pcsData_4[0].value : '' }}</text>
<text x="340" y="460" fill="#FFB800" font-size="14">{{ pcsData_4.length > 1 ? pcsData_4[1].value : '' }}</text>
<text x="340" y="480" fill="#FFB800" font-size="14">{{ pcsData_4.length > 2 ? pcsData_4[2].value : '' }}</text>
<text x="340" y="500" fill="#FFB800" font-size="14">{{ pcsData_4.length > 3 ? pcsData_4[3].value : '' }}</text>
<!-- 5#PCS -->
<text x="410" y="440" fill="#FFB800" font-size="14">{{ pcsData_5.length ? pcsData_5[0].value : '' }}</text>
<text x="410" y="460" fill="#FFB800" font-size="14">{{ pcsData_5.length > 1 ? pcsData_5[1].value : '' }}</text>
<text x="410" y="480" fill="#FFB800" font-size="14">{{ pcsData_5.length > 2 ? pcsData_5[2].value : '' }}</text>
<text x="410" y="500" fill="#FFB800" font-size="14">{{ pcsData_5.length > 3 ? pcsData_5[3].value : '' }}</text>
<!-- 6#PCS -->
<text x="490" y="440" fill="#FFB800" font-size="14">{{ pcsData_6.length ? pcsData_6[0].value : '' }}</text>
<text x="490" y="460" fill="#FFB800" font-size="14">{{ pcsData_6.length > 1 ? pcsData_6[1].value : '' }}</text>
<text x="490" y="480" fill="#FFB800" font-size="14">{{ pcsData_6.length > 2 ? pcsData_6[2].value : '' }}</text>
<text x="490" y="500" fill="#FFB800" font-size="14">{{ pcsData_6.length > 3 ? pcsData_6[3].value : '' }}</text>
<!-- 7#PCS -->
<text x="570" y="440" fill="#FFB800" font-size="14">{{ pcsData_7.length ? pcsData_7[0].value : '' }}</text>
<text x="570" y="460" fill="#FFB800" font-size="14">{{ pcsData_7.length > 1 ? pcsData_7[1].value : '' }}</text>
<text x="570" y="480" fill="#FFB800" font-size="14">{{ pcsData_7.length > 2 ? pcsData_7[2].value : '' }}</text>
<text x="570" y="500" fill="#FFB800" font-size="14">{{ pcsData_7.length > 3 ? pcsData_7[3].value : '' }}</text>
<!-- 8#PCS -->
<text x="650" y="440" fill="#FFB800" font-size="14">{{ pcsData_8.length ? pcsData_8[0].value : '' }}</text>
<text x="650" y="460" fill="#FFB800" font-size="14">{{ pcsData_8.length > 1 ? pcsData_8[1].value : '' }}</text>
<text x="650" y="480" fill="#FFB800" font-size="14">{{ pcsData_8.length > 2 ? pcsData_8[2].value : '' }}</text>
<text x="650" y="500" fill="#FFB800" font-size="14">{{ pcsData_8.length > 3 ? pcsData_8[3].value : '' }}</text>
</svg>
</div>
</div>
<DispositionPointData :disposition-show="show_point_dispostion" :page-location="pageLocation" @close="closePoint" @getData="getDynamicPointData" />
</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,
pcsData_1: [],
pcsData_2: [],
pcsData_3: [],
pcsData_4: [],
pcsData_5: [],
pcsData_6: [],
pcsData_7: [],
pcsData_8: [],
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 }
],
// 充电
// dotData: {
// lineTopLeft: "M 238,0 0,0",
// lineTopRight: "M 0,0 -230,0",
// lineBottomOne: "M 258,-260, 258, 0, 0 ,0",
// lineBottomTwo: "M 176,-260, 176, 0, 0 ,0",
// lineBottomThree: "M 96,-260, 96, 0, 0 ,0",
// lineBottomFour: "M 21,-260, 21, 0, 0 ,0",
// lineBottomFive: "M -39,-260,-39,0 0,0",
// lineBottomSix: "M -119,-260,-119,0 0,0",
// lineBottomSeven: "M -199,-260,-199,0 0,0",
// lineBottomEight: "M -279,-260,-279,0 0,0",
// },
// 放电
dotData: {
lineTopLeft: 'M 0,0 0,0',
lineTopRight: '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',
lineBottomEight: 'M 0,0 0,0'
},
loading: false,
activePowerTotal: {},
permissionId: null,
show_point_dispostion: false,
pageLocation: null
}
},
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: {
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.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',
lineBottomEight: 'M 0,0 0,0'
}
if (res.data.length) {
res.data.forEach((item) => {
if (item.pageLocation === 'eight_pcs_1') {
this.pcsData_1.push(item)
} else if (item.pageLocation === 'eight_pcs_2') {
this.pcsData_2.push(item)
} else if (item.pageLocation === 'eight_pcs_3') {
this.pcsData_3.push(item)
} else if (item.pageLocation === 'eight_pcs_4') {
this.pcsData_4.push(item)
} else if (item.pageLocation === 'eight_pcs_5') {
this.pcsData_5.push(item)
} else if (item.pageLocation === 'eight_pcs_6') {
this.pcsData_6.push(item)
} else if (item.pageLocation === 'eight_pcs_7') {
this.pcsData_7.push(item)
} else if (item.pageLocation === 'eight_pcs_8') {
this.pcsData_8.push(item)
} else if (item.pageLocation === 'eighth_ammeter_1') {
this.ammeter_1.push(item)
} else if (item.pageLocation === 'eight-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 === 'eight-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 === 'eight-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 === 'eight-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 === 'eight-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 === 'eight-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 === 'eight-line-bottom-five') {
if (+item.value > 0) {
this.dotData.lineBottomFive = 'M -39,-260,-39,0 0,0'
} else if (+item.value < 0) {
this.dotData.lineBottomFive = 'M 0,0 -39,0 -39,-260'
} else {
this.dotData.lineBottomFive = 'M 0,0 0,0'
}
} else if (item.pageLocation === 'eight-line-bottom-six') {
if (+item.value > 0) {
this.dotData.lineBottomSix = 'M -119,-260,-119,0 0,0'
} else if (+item.value < 0) {
this.dotData.lineBottomSix = 'M 0,0 -119,0 -119,-260 '
} else {
this.dotData.lineBottomSix = 'M 0,0 0,0'
}
} else if (item.pageLocation === 'eight-line-bottom-seven') {
if (+item.value > 0) {
this.dotData.lineBottomSeven = 'M -199,-260,-199,0 0,0"'
} else if (+item.value < 0) {
this.dotData.lineBottomSeven = 'M 0,0 -199,0 -199,-260'
} else {
this.dotData.lineBottomSeven = 'M 0,0 0,0'
}
} else if (item.pageLocation === 'eight-line-bottom-eight') {
if (+item.value > 0) {
this.dotData.lineBottomEight = 'M -279,-260,-279,0 0,0'
} else if (+item.value < 0) {
this.dotData.lineBottomEight = 'M 0,0 -279,0 -279,-260'
} else {
this.dotData.lineBottomEight = '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>

95
src/views/dashboardtest/components/top-center/fifth-th.vue Normal file
View File

@ -0,0 +1,95 @@
<template>
<ItemBox :title="$t('dashboard.stationTopo')" style="min-height: 560px">
<div slot="header">
<div class="header-right-box">
<div class="header-title" :class="{'active':tabPosition === 1}" @click="changeTab(1)">1#{{ $t('dashboard.cnz') }}</div>
<div class="header-title" :class="{'active':tabPosition === 2}" @click="changeTab(2)">2#{{ $t('dashboard.cnz') }}</div>
</div>
</div>
<div ref="svgLine" class="center-box">
<first v-if="tabPosition === 1" ref="firstToPu" :station-id="stationId" :permission-id="permissionId" />
<second v-if="tabPosition === 2" ref="secondToPu" :station-id="stationId" :permission-id="permissionId" />
</div>
</ItemBox>
</template>
<script>
import first from './fifthComponents/first.vue'
import second from './fifthComponents/second.vue'
export default {
name: 'Index',
components: { first, second },
data() {
return {
tabPosition: 1,
stationId: null,
permissionId: null
}
},
computed: {
currentStation() {
return this.$store.getters.currentStation || undefined
}
},
watch: {
currentStation: {
handler(val) {
if (val && val.id) {
this.stationId = val.id
}
},
deep: true,
immediate: true
}
},
methods: {
changeTab(val) {
this.tabPosition = val
this.$nextTick(() => {
this.getData()
})
},
getData() {
if (this.$store.getters.menuList.length) {
this.permissionId = this.$store.getters.menuList.find((item) => {
return item.url === this.$route.path
}).id
}
if (this.tabPosition === 1) {
this.$refs.firstToPu.getData()
} else if (this.tabPosition === 2) {
this.$refs.secondToPu.getData()
}
}
}
}
</script>
<style lang="scss" scoped>
.center-box {
width: 100%;
height: 100%;
}
.header-right-box {
display: flex;
flex-direction: row;
align-items: center;
.header-title {
white-space: nowrap;
font-size: 14px;
font-weight: 500;
letter-spacing: 0em;
color: rgba(206, 235, 255, 0.5);
padding: 0 10px;
cursor: pointer;
font-family: Source Han Sans CN;
&.active{
color: #ffffff;
background: linear-gradient(90deg, rgba(0,148,255,0.00) 0%, rgba(0,148,255,0.43) 51%, rgba(0,148,255,0.00) 99%);
}
}
}
</style>

731
src/views/dashboardtest/components/top-center/fifth.vue Normal file
View File

@ -0,0 +1,731 @@
<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,60 630,60"
fill="none"
class="g-rect-path"
stroke="#0094FF"
stroke-dasharray="3 3"
/>
<!-- center -->
<polyline
points="385,60 385,363"
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="104,363 655,363"
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="385"
cy="363"
r="8"
style="stroke: none; fill: url(#RadialGradient1)"
>
<animateMotion
repeatCount="indefinite"
dur="4s"
begin="2s"
:path="dotData.lineCenter"
/>
</circle>
<!-- 底 -->
<circle
cx="104"
cy="363"
r="8"
style="stroke: none; fill: url(#RadialGradient1);"
>
<animateMotion
repeatCount="indefinite"
dur="4s"
begin="2s"
:path="dotData.lineBottomOne"
/>
</circle>
<circle
cx="240"
cy="363"
r="8"
style="stroke: none; fill: url(#RadialGradient1);"
>
<animateMotion
repeatCount="indefinite"
dur="4s"
begin="2s"
:path="dotData.lineBottomTwo"
/>
</circle>
<circle
cx="520"
cy="363"
r="8"
style="stroke: none; fill: url(#RadialGradient1);"
>
<animateMotion
repeatCount="indefinite"
dur="4s"
begin="2s"
:path="dotData.lineBottomFour"
/>
</circle>
<circle
cx="655"
cy="363"
r="8"
style="stroke: none; fill: url(#RadialGradient1);"
>
<animateMotion
repeatCount="indefinite"
dur="4s"
begin="2s"
:path="dotData.lineBottomFive"
/>
</circle>
<!-- top -->
<circle
cx="154"
cy="60"
r="8"
style="stroke: none; fill: url(#RadialGradient1); cursor: pointer"
@click="lookDeviceDetail('fifth-line-top-left')"
/>
<circle
cx="630"
cy="60"
r="8"
style="stroke: none; fill: url(#RadialGradient1); cursor: pointer"
@click="lookDeviceDetail('fifth-line-top-right')"
/>
<circle
cx="460"
cy="100"
r="8"
style="stroke: none; fill: url(#RadialGradient1)"
/>
<!-- bottom -->
<circle
cx="104"
cy="363"
r="8"
style="stroke: none; fill: url(#RadialGradient1); cursor: pointer"
@click="lookDeviceDetail('fifth-line-bottom-one')"
/>
<circle
cx="240"
cy="363"
r="8"
style="stroke: none; fill: url(#RadialGradient1); cursor: pointer"
@click="lookDeviceDetail('fifth-line-bottom-two')"
/>
<circle
cx="385"
cy="363"
r="8"
style="stroke: none; fill: url(#RadialGradient1); cursor: pointer"
@click="lookDeviceDetail('fifth-line-center')"
/>
<circle
cx="520"
cy="363"
r="8"
style="stroke: none; fill: url(#RadialGradient1); cursor: pointer"
@click="lookDeviceDetail('fifth-line-bottom-four')"
/>
<circle
cx="655"
cy="363"
r="8"
style="stroke: none; fill: url(#RadialGradient1); cursor: pointer"
@click="lookDeviceDetail('fifth-line-bottom-five')"
/>
<!-- 图片和文字 -->
<!-- 市电 -->
<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="65"
y="383"
width="70"
height="70"
style="cursor: pointer"
@click="lookDeviceDetail('fifth_pcs_1')"
/>
<text x="66" y="490" fill="#ffffff" font-size="14">{{ hiddenTextWord(`1#${$t("dashboard.cabinet")}`,10) }}</text>
<!-- 2#PCS -->
<image
:xlink:href="cabinetImg"
x="202"
y="383"
width="70"
height="70"
style="cursor: pointer"
@click="lookDeviceDetail('fifth_pcs_2')"
/>
<text x="210" y="490" fill="#ffffff" font-size="14">{{ hiddenTextWord(`2#${$t("dashboard.cabinet")}`,10) }}</text>
<!-- 3#PCS -->
<image
:xlink:href="cabinetImg"
x="339"
y="383"
width="70"
height="70"
style="cursor: pointer"
@click="lookDeviceDetail('fifth_pcs_3')"
/>
<text x="344" y="490" fill="#ffffff" font-size="14">{{ hiddenTextWord(`3#${$t("dashboard.cabinet")}`,10) }}</text>
<image
:xlink:href="cabinetImg"
x="476"
y="383"
width="70"
height="70"
style="cursor: pointer"
@click="lookDeviceDetail('fifth_pcs_4')"
/>
<text x="484" y="490" fill="#ffffff" font-size="14">{{ hiddenTextWord(`4#${$t("dashboard.cabinet")}`,10) }}</text>
<image
:xlink:href="cabinetImg"
x="613"
y="383"
width="70"
height="70"
style="cursor: pointer"
@click="lookDeviceDetail('fifth_pcs_5')"
/>
<text x="620" y="490" fill="#ffffff" font-size="14">{{ hiddenTextWord(`5#${$t("dashboard.cabinet")}`,10) }}</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('fifth_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="280" fill="#ffffff" font-size="14">SOC(%)：</text>
<text x="10" y="300" fill="#ffffff" font-size="14">SOH(%)：</text>
<text x="10" y="320" fill="#ffffff" font-size="14">{{ $t("dashboard.workStatus") }}：</text>
<text x="10" y="340" fill="#ffffff" font-size="14">
{{ $t("dashboard.activePower") }}(kW)：
</text>
<!-- 1#PCS -->
<text x="115" y="280" fill="#FFB800" font-size="14">
{{ pcsData_1.length ? pcsData_1[0].value : "" }}
</text>
<text x="115" y="300" fill="#FFB800" font-size="14">
{{ pcsData_1.length > 1 ? pcsData_1[1].value : "" }}
</text>
<text x="115" y="320" fill="#FFB800" font-size="14">
{{ pcsData_1.length > 2 ? pcsData_1[2].value : "" }}
</text>
<text x="115" y="340" fill="#FFB800" font-size="14">
{{ pcsData_1.length > 3 ? pcsData_1[3].value : "" }}
</text>
<!-- 2#PCS -->
<text x="220" y="280" fill="#FFB800" font-size="14">
{{ pcsData_2.length ? pcsData_2[0].value : "" }}
</text>
<text x="220" y="300" fill="#FFB800" font-size="14">
{{ pcsData_2.length > 1 ? pcsData_2[1].value : "" }}
</text>
<text x="220" y="320" fill="#FFB800" font-size="14">
{{ pcsData_2.length > 2 ? pcsData_2[2].value : "" }}
</text>
<text x="220" y="340" fill="#FFB800" font-size="14">
{{ pcsData_2.length > 3 ? pcsData_2[3].value : "" }}
</text>
<!-- 3#PCS -->
<text x="320" y="280" fill="#FFB800" font-size="14">
{{ pcsData_3.length ? pcsData_3[0].value : "" }}
</text>
<text x="320" y="300" fill="#FFB800" font-size="14">
{{ pcsData_3.length > 1 ? pcsData_3[1].value : "" }}
</text>
<text x="320" y="320" fill="#FFB800" font-size="14">
{{ pcsData_3.length > 2 ? pcsData_3[2].value : "" }}
</text>
<text x="320" y="340" fill="#FFB800" font-size="14">
{{ pcsData_3.length > 3 ? pcsData_3[3].value : "" }}
</text>
<!-- 4#PCS -->
<text x="510" y="280" fill="#FFB800" font-size="14">
{{ pcsData_4.length ? pcsData_4[0].value : "" }}
</text>
<text x="510" y="300" fill="#FFB800" font-size="14">
{{ pcsData_4.length > 1 ? pcsData_4[1].value : "" }}
</text>
<text x="510" y="320" fill="#FFB800" font-size="14">
{{ pcsData_4.length > 2 ? pcsData_4[2].value : "" }}
</text>
<text x="510" y="340" fill="#FFB800" font-size="14">
{{ pcsData_4.length > 3 ? pcsData_4[3].value : "" }}
</text>
<!-- 5#PCS -->
<text x="640" y="280" fill="#FFB800" font-size="14">
{{ pcsData_5.length ? pcsData_5[0].value : "" }}
</text>
<text x="640" y="300" fill="#FFB800" font-size="14">
{{ pcsData_5.length > 1 ? pcsData_5[1].value : "" }}
</text>
<text x="640" y="320" fill="#FFB800" font-size="14">
{{ pcsData_5.length > 2 ? pcsData_5[2].value : "" }}
</text>
<text x="640" y="340" fill="#FFB800" font-size="14">
{{ pcsData_5.length > 3 ? pcsData_5[3].value : "" }}
</text>
</svg>
</div>
</div>
<DispositionPointData
:disposition-show="show_point_dispostion"
:page-location="pageLocation"
@close="closePoint"
@getData="getDynamicPointData"
/>
</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,
// 充电
// dotData: {
// lineTopLeft: "M 238,0 0,0",
// lineTopRight: "M 0,0 -230,0",
// lineCenter: "M 0,-283,0,0,0,0",
// lineBottomOne: 'M 283,-280, 280, 0, 0 ,0',
// lineBottomTwo: 'M 145,-280, 145, 0, 0 ,0',
// lineBottomFour: 'M -135,-280,-135,0 0,0',
// lineBottomFive: 'M -270,-280,-270,0 0,0',
// },
// 放电
// dotData: {
// lineTopLeft: "M 0,0 238,0 ",
// lineTopRight: "M -230,0 0,0",
// lineCenter: "M 0,0,0,0,0,-283",
// lineBottomOne: "M 0 ,0, 280, 0,283,-280",
// lineBottomTwo: "M 0 ,0,145, 0, 145,-280",
// lineBottomFour: "M 0,0 ,-135,0,-135,-280,",
// lineBottomFive: "M 0,0,-270,0,-270,-280",
// },
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',
lineBottomFour: 'M 0,0 0,0',
lineBottomFive: 'M 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 },
{ 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,
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.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',
lineBottomFour: 'M 0,0 0,0',
lineBottomFive: 'M 0,0 0,0'
}
if (res.data.length) {
res.data.forEach((item) => {
if (item.pageLocation === 'fifth_pcs_1') {
this.pcsData_1.push(item)
} else if (item.pageLocation === 'fifth_pcs_2') {
this.pcsData_2.push(item)
} else if (item.pageLocation === 'fifth_pcs_3') {
this.pcsData_3.push(item)
} else if (item.pageLocation === 'fifth_pcs_4') {
this.pcsData_4.push(item)
} else if (item.pageLocation === 'fifth_pcs_5') {
this.pcsData_5.push(item)
} else if (item.pageLocation === 'fifth_ammeter_1') {
this.ammeter_1.push(item)
} else if (item.pageLocation === 'fifth-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 === 'fifth-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 === 'fifth-line-bottom-one') {
if (+item.value > 0) {
this.dotData.lineBottomOne = 'M 283,-280, 280, 0, 0 ,0'
} else if (+item.value < 0) {
this.dotData.lineBottomOne = 'M 0 ,0, 280, 0,283,-280'
} else {
this.dotData.lineBottomOne = 'M 0,0 0,0'
}
} else if (item.pageLocation === 'fifth-line-bottom-two') {
if (+item.value > 0) {
this.dotData.lineBottomTwo = 'M 145,-280, 145, 0, 0 ,0'
} else if (+item.value < 0) {
this.dotData.lineBottomTwo = 'M 0 ,0,145, 0, 145,-280'
} else {
this.dotData.lineBottomTwo = 'M 0,0 0,0'
}
} else if (item.pageLocation === 'fifth-line-center') {
if (+item.value > 0) {
this.dotData.lineCenter = 'M 0,-283,0,0,0,0'
} else if (+item.value < 0) {
this.dotData.lineCenter = 'M 0,0,0,0,0,-283'
} else {
this.dotData.lineCenter = 'M 0,0 0,0'
}
} else if (item.pageLocation === 'fifth-line-bottom-four') {
if (+item.value > 0) {
this.dotData.lineBottomFour = 'M -135,-280,-135,0 0,0'
} else if (+item.value < 0) {
this.dotData.lineBottomFour = 'M 0,0 ,-135,0,-135,-280'
} else {
this.dotData.lineBottomFour = 'M 0,0 0,0'
}
} else if (item.pageLocation === 'fifth-line-bottom-five') {
if (+item.value > 0) {
this.dotData.lineBottomFive = 'M -270,-280,-270,0 0,0'
} else if (+item.value < 0) {
this.dotData.lineBottomFive = 'M 0,0,-270,0,-270,-280'
} else {
this.dotData.lineBottomFive = '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>

851
src/views/dashboardtest/components/top-center/fire.vue Normal file
View File

@ -0,0 +1,851 @@
<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 546"
>
<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>
<linearGradient id="line" x1="80%" y1="90%" x2="80%" y2="0%">
<stop offset="0%" style="stop-color:rgba(0, 255, 25, 1); " />
<stop offset="50%" style="stop-color:rgba(0, 255, 25, 0.3); " />
<stop offset="70%" style="stop-color:rgba(0, 255, 25, 1); " />
</linearGradient>
<linearGradient id="SvgjsLinearGradient6627" gradientTransform="rotate(-10)" y2="0" x2="0" y1="1" x1="0">
<stop id="SvgjsStop6628" offset="0.17221" stop-color="blue" />
<stop id="SvgjsStop6629" offset="0.17221" stop-color="#cccccc" />
<stop id="SvgjsStop6630" offset="1" stop-color="#cccccc" />
</linearGradient>
</defs>
<!-- 左 -->
<text x="44" y="40" fill="#00C2FF" font-size="14">
AGC指令1
</text>
<text x="118" y="40" fill="#00C2FF" font-size="14">
{{ statusList[0].agcOrder }} MW
</text>
<text x="44" y="67" fill="#00FF19" font-size="14">
机组出力1
</text>
<text x="118" y="67" fill="#00FF19" font-size="14">
{{ statusList[0].unitOutput }} MW
</text>
<text x="44" y="94" fill="#FF0000" font-size="14">
联合出力1
</text>
<text x="118" y="94" fill="#FF0000" font-size="14">
{{ statusList[0].jointOutput }} MW
</text>
<text x="58" y="133" fill="#FFE710" font-size="14">
机组一次调频闭锁信号1
</text>
<circle
cx="48"
cy="128"
r="5"
:style="{fill:statusColor(statusList[0].primaryFrequencyModulationSignal)}"
/>
<text x="58" y="195" fill="#FF0000" font-size="14">
储能A段放电状态
</text>
<circle
cx="48"
cy="190"
r="5"
:style="{fill:statusColor(statusList[0].dischargeState)}"
/>
<text x="58" y="217" fill="#FF0000" font-size="14">
储能A段放电闭锁
</text>
<circle
cx="48"
cy="212"
r="5"
:style="{fill:statusColor(statusList[0].dischargeBlocking)}"
/>
<text x="58" y="239" fill="#00FF19" font-size="14">
储能A段充电状态
</text>
<circle
cx="48"
cy="234"
r="5"
:style="{fill:statusColor(statusList[0].chargeState)}"
/>
<text x="58" y="261" fill="#00FF19" font-size="14">
储能A段充电闭锁
</text>
<circle
cx="48"
cy="256"
r="5"
:style="{fill:statusColor(statusList[0].chargeBlocking)}"
/>
<!-- 右 -->
<text x="588" y="40" fill="#00C2FF" font-size="14">
AGC指令1
</text>
<text x="662" y="40" fill="#00C2FF" font-size="14">
{{ statusList[1].powerSetting }} MW
</text>
<text x="588" y="67" fill="#00FF19" font-size="14">
机组出力1
</text>
<text x="662" y="67" fill="#00FF19" font-size="14">
{{ statusList[1].unitOutput }} MW
</text>
<text x="588" y="94" fill="#FF0000" font-size="14">
联合出力1
</text>
<text x="662" y="94" fill="#FF0000" font-size="14">
{{ statusList[1].jointOutput }} MW
</text>
<text x="602" y="133" fill="#FFE710" font-size="14">
机组一次调频闭锁信号2
</text>
<circle
cx="592"
cy="128"
r="5"
:style="{fill:statusColor(statusList[1].primaryFrequencyModulationSignal)}"
/>
<text x="602" y="195" fill="#FF0000" font-size="14">
储能B段放电状态
</text>
<circle
cx="592"
cy="190"
r="5"
:style="{fill:statusColor(statusList[1].dischargeState)}"
/>
<text x="602" y="217" fill="#FF0000" font-size="14">
储能B段放电闭锁
</text>
<circle
cx="592"
cy="212"
r="5"
:style="{fill:statusColor(statusList[1].dischargeBlocking)}"
/>
<text x="602" y="239" fill="#00FF19" font-size="14">
储能B段充电状态
</text>
<circle
cx="592"
cy="234"
r="5"
:style="{fill:statusColor(statusList[1].chargeState)}"
/>
<text x="602" y="261" fill="#00FF19" font-size="14">
储能B段充电闭锁
</text>
<circle
cx="592"
cy="256"
r="5"
:style="{fill:statusColor(statusList[1].chargeBlocking)}"
/>
<!-- 左 -->
<rect
x="32"
y="340"
width="360"
height="180"
rx="5"
style="stroke:#339DFF; fill: none;"
/>
<!-- {{ $t("dashboard.battery") }} -->
<rect
x="280"
y="375"
width="40"
height="55"
rx="2"
stroke-width="2"
style="stroke:#FFFFFF; fill: none;"
/>
<rect
x="291"
y="369"
width="18"
height="6"
style="stroke:#FFFFFF; fill: #FFFFFF;"
/>
<rect
x="280"
:y="getY(statusList[0].soc)"
width="40"
:height="getHeight(statusList[0].soc)"
style="stroke:#00FF19; fill: #00FF19;"
/>
<text x="286" y="408" fill="#FFFFFF" font-size="14">
{{ statusList[0].soc }}%
</text>
<text x="44" y="366" fill="#4BF4FF" font-size="18">
功率设定值
</text>
<text x="153" y="366" fill="#4BF4FF" font-size="18">
{{ statusList[0].powerSetting }} MW
</text>
<text x="62" y="393" fill="#ED008E" font-size="18">
储能出力
</text>
<text x="153" y="393" fill="#ED008E" font-size="18">
{{ statusList[0].energyStorageOutput }} MW
</text>
<text x="44" y="420" fill="#FFFFFF" font-size="14">
可充功率
</text>
<text x="108" y="420" fill="#FFFFFF" font-size="14">
{{ statusList[0].allowableChargePower }} MW
</text>
<text x="44" y="447" fill="#FFFFFF" font-size="14">
可放功率
</text>
<text x="108" y="447" fill="#FFFFFF" font-size="14">
{{ statusList[0].allowableDischargePower }} MW
</text>
<text x="44" y="474" fill="#FFFFFF" font-size="14">
可充电量
</text>
<text x="108" y="474" fill="#FFFFFF" font-size="14">
{{ statusList[0].allowableCharge }} MWh
</text>
<text x="44" y="501" fill="#FFFFFF" font-size="14">
可放电量
</text>
<text x="108" y="501" fill="#FFFFFF" font-size="14">
{{ statusList[0].allowableDischarge }} MWh
</text>
<circle
cx="299"
cy="400"
r="50"
stroke-width="2"
style="stroke:#00FF19; fill:transparent"
/>
<!-- <text x="234" y="474" fill="#FFFFFF" font-size="14">
储能A段系统状态
</text>
<rect
x="346"
y="462"
width="32"
height="16"
rx="2"
fill="url(#line)"
/>
<text x="348" y="474" fill="#FFFFFF" font-size="14">
强行
</text> -->
<text x="234" y="501" fill="#FFFFFF" font-size="14">
储能A段系统状态
</text>
<rect
x="346"
y="488"
width="32"
height="16"
rx="2"
fill="url(#line)"
/>
<text x="348" y="501" fill="#FFFFFF" font-size="14">
强行
</text>
<!-- 右 -->
<rect
x="408"
y="340"
width="360"
height="180"
rx="5"
style="stroke:#339DFF; fill: none;"
/>
<!-- {{ $t("dashboard.battery") }} -->
<rect
x="462"
y="375"
width="40"
height="55"
rx="2"
stroke-width="2"
style="stroke:#FFFFFF; fill: none;"
/>
<rect
x="472"
y="369"
width="18"
height="6"
style="stroke:#FFFFFF; fill: #FFFFFF;"
/>
<rect
x="462"
:y="getY(statusList[1].soc)"
width="40"
:height="getHeight(statusList[1].soc)"
style="stroke:#00FF19; fill: #00FF19;"
/>
<text x="468" y="408" fill="#FFFFFF" font-size="14">
{{ statusList[1].soc }}%
</text>
<text x="578" y="366" fill="#4BF4FF" font-size="18">
功率设定值
</text>
<text x="687" y="366" fill="#4BF4FF" font-size="18">
{{ statusList[1].powerSetting }} MW
</text>
<text x="596" y="393" fill="#ED008E" font-size="18">
储能出力
</text>
<text x="687" y="393" fill="#ED008E" font-size="18">
{{ statusList[1].energyStorageOutput }} MW
</text>
<text x="588" y="420" fill="#FFFFFF" font-size="14">
可充功率
</text>
<text x="652" y="420" fill="#FFFFFF" font-size="14">
{{ statusList[1].allowableChargePower }} MW
</text>
<text x="588" y="447" fill="#FFFFFF" font-size="14">
可放功率
</text>
<text x="652" y="447" fill="#FFFFFF" font-size="14">
{{ statusList[1].allowableDischargePower }} MW
</text>
<text x="588" y="474" fill="#FFFFFF" font-size="14">
可充电量
</text>
<text x="652" y="474" fill="#FFFFFF" font-size="14">
{{ statusList[1].allowableCharge }} MWh
</text>
<text x="588" y="501" fill="#FFFFFF" font-size="14">
可放电量
</text>
<text x="652" y="501" fill="#FFFFFF" font-size="14">
{{ statusList[1].allowableDischarge }} MWh
</text>
<circle
cx="481"
cy="400"
r="50"
stroke-width="2"
style="stroke:#00FF19; fill:transparent"
/>
<!-- <text x="427" y="474" fill="#FFFFFF" font-size="14">
储能B段系统状态
</text>
<rect
x="543"
y="462"
width="32"
height="16"
rx="2"
fill="url(#line)"
/>
<text x="545" y="474" fill="#FFFFFF" font-size="14">
强行
</text> -->
<text x="427" y="501" fill="#FFFFFF" font-size="14">
储能B段系统状态
</text>
<rect
x="543"
y="488"
width="32"
height="16"
rx="2"
fill="url(#line)"
/>
<text x="545" y="501" fill="#FFFFFF" font-size="14">
强行
</text>
<!-- 中 -->
<circle
cx="295"
cy="45"
r="14"
stroke-width="2"
style="stroke:#FF0000; fill:transparent"
/>
<text x="287" y="52" fill="#FF0000" font-size="20">
G
</text>
<polyline
points="295,60 295,85"
fill="none"
class="g-rect-path"
stroke-width="2"
stroke="#FF0000"
/>
<circle
cx="295"
cy="94"
r="8"
stroke-width="2"
style="stroke:#FF0000; fill:transparent"
/>
<circle
cx="289"
cy="102"
r="8"
stroke-width="2"
style="stroke:#FF0000; fill:transparent"
/>
<circle
cx="301"
cy="102"
r="8"
stroke-width="2"
style="stroke:#FF0000; fill:transparent"
/>
<polyline
points="289,110 289,132"
fill="none"
class="g-rect-path"
stroke-width="2"
stroke="#FF0000"
/>
<polyline
points="301,110 301,132"
fill="none"
class="g-rect-path"
stroke-width="2"
stroke="#FF0000"
/>
<polyline
points="267,133 324,133"
fill="none"
class="g-rect-path"
stroke-width="3"
stroke="#FF0000"
/>
<polyline
points="278,134 278,239 293 239"
fill="none"
class="g-rect-path"
stroke-width="2"
stroke="#FF0000"
/>
<polyline
points="312,134 312,185"
fill="none"
class="g-rect-path"
stroke-width="2"
stroke="#FF0000"
/>
<polyline
points="312,195 312,239 293 239"
fill="none"
class="g-rect-path"
stroke-width="2"
stroke="#FF0000"
/>
<polyline
points="312,185 460,185 460,200"
fill="none"
class="g-rect-path"
stroke-width="2"
stroke="#FF0000"
/>
<polyline
points="312,195 380,195 380,175 460,175"
fill="none"
class="g-rect-path"
stroke-width="2"
stroke="#FF0000"
/>
<polyline
points="295,239 295 293"
fill="none"
class="g-rect-path"
stroke-width="2"
stroke="#FF0000"
/>
<circle
cx="295"
cy="300"
r="8"
stroke-width="2"
style="stroke:#FF0000; fill:transparent"
/>
<circle
cx="295"
cy="310"
r="8"
stroke-width="2"
style="stroke:#FF0000; fill:transparent"
/>
<polyline
points="295,318 295 348"
fill="none"
class="g-rect-path"
stroke-width="2"
stroke="#FF0000"
/>
<text x="367" y="133" fill="#FFFFFF" font-size="16">
电厂侧
</text>
<text x="367" y="238" fill="#FFFFFF" font-size="16">
储能侧
</text>
<!-- 中右 -->
<circle
cx="477"
cy="45"
r="14"
stroke-width="2"
style="stroke:#FF0000; fill:transparent"
/>
<text x="469" y="52" fill="#FF0000" font-size="20">
G
</text>
<polyline
points="477,60 477,85"
fill="none"
class="g-rect-path"
stroke-width="2"
stroke="#FF0000"
/>
<circle
cx="477"
cy="94"
r="8"
stroke-width="2"
style="stroke:#FF0000; fill:transparent"
/>
<circle
cx="471"
cy="102"
r="8"
stroke-width="2"
style="stroke:#FF0000; fill:transparent"
/>
<circle
cx="483"
cy="102"
r="8"
stroke-width="2"
style="stroke:#FF0000; fill:transparent"
/>
<polyline
points="471,110 471,132"
fill="none"
class="g-rect-path"
stroke-width="2"
stroke="#FF0000"
/>
<polyline
points="483,110 483,132"
fill="none"
class="g-rect-path"
stroke-width="2"
stroke="#FF0000"
/>
<polyline
points="449,133 506,133"
fill="none"
class="g-rect-path"
stroke-width="3"
stroke="#FF0000"
/>
<polyline
points="494,134 494,239 479 239"
fill="none"
class="g-rect-path"
stroke-width="2"
stroke="#FF0000"
style="z-index:8"
/>
<polyline
points="460,134 460,175"
fill="none"
class="g-rect-path"
stroke-width="2"
stroke="#FF0000"
/>
<polyline
points="460,200 460,239 479 239"
fill="none"
class="g-rect-path"
stroke-width="2"
stroke="#FF0000"
/>
<polyline
points="479,239 479 293"
fill="none"
class="g-rect-path"
stroke-width="2"
stroke="#FF0000"
/>
<circle
cx="479"
cy="300"
r="8"
stroke-width="2"
style="stroke:#FF0000; fill:transparent"
/>
<circle
cx="479"
cy="310"
r="8"
stroke-width="2"
style="stroke:#FF0000; fill:transparent"
/>
<polyline
points="479,318 479 348"
fill="none"
class="g-rect-path"
stroke-width="2"
stroke="#FF0000"
/>
<text x="213" y="160" fill="#FFFFFF" font-size="12">
10BBA38
</text>
<rect
x="273"
y="144"
width="10"
height="22"
:style="{fill: statusRectColor(statusList[0].breaker1)}"
/>
<text x="321" y="160" fill="#FFFFFF" font-size="12">
10BBA38
</text>
<rect
x="307"
y="144"
width="10"
height="22"
:style="{fill: statusRectColor(statusList[0].breaker2)}"
/>
<text x="242" y="222" fill="#FFFFFF" font-size="12">
10 A
</text>
<rect
x="273"
y="207"
width="10"
height="22"
:style="{fill: statusRectColor(statusList[0].breaker3)}"
/>
<text x="321" y="222" fill="#FFFFFF" font-size="12">
11 A
</text>
<rect
x="307"
y="207"
width="10"
height="22"
:style="{fill: statusRectColor(statusList[0].breaker4)}"
/>
<text x="220" y="271" fill="#FFFFFF" font-size="12">
1号油变进线
</text>
<rect
x="290"
y="255"
width="10"
height="22"
:style="{fill: statusRectColor(statusList[0].breaker5)}"
/>
<text x="400" y="160" fill="#FFFFFF" font-size="12">
20BBA36
</text>
<rect
x="455"
y="144"
width="10"
height="22"
:style="{fill: statusRectColor(statusList[1].breaker1)}"
/>
<text x="505" y="160" fill="#FFFFFF" font-size="12">
20BBB38
</text>
<rect
x="489"
y="144"
width="10"
height="22"
:style="{fill: statusRectColor(statusList[1].breaker2)}"
/>
<text x="424" y="222" fill="#FFFFFF" font-size="12">
10 B
</text>
<rect
x="455"
y="207"
width="10"
height="22"
:style="{fill: statusRectColor(statusList[1].breaker3)}"
/>
<text x="503" y="222" fill="#FFFFFF" font-size="12">
11 B
</text>
<rect
x="489"
y="207"
width="10"
height="22"
:style="{fill: statusRectColor(statusList[1].breaker4)}"
/>
<text x="404" y="271" fill="#FFFFFF" font-size="12">
1号油变进线
</text>
<rect
x="474"
y="255"
width="10"
height="22"
:style="{fill: statusRectColor(statusList[1].breaker5)}"
/>
</svg>
</div>
</div>
</ItemBox>
</template>
<script>
export default {
data() {
return {
loading: false,
barterValue: 80,
status: 1,
statusList: [{ agcOrder: 111, unitOutput: 222, jointOutput: 333, primaryFrequencyModulationSignal: 1, dischargeState: 1, dischargeBlocking: 1, chargeState: 1, chargeBlocking: 1, powerSetting: 100, energyStorageOutput: 100, allowableChargePower: 100, allowableDischargePower: 100, allowableCharge: 100, allowableDischarge: 100, systemState: 1, soc: 100, breaker1: 1, breaker2: 1, breaker3: 1, breaker4: 1, breaker5: 1 },
{ agcOrder: 111, unitOutput: 222, jointOutput: 333, primaryFrequencyModulationSignal: 0, dischargeState: 0, dischargeBlocking: 0, chargeState: 0, chargeBlocking: 0, powerSetting: 23, energyStorageOutput: 11, allowableChargePower: 11, allowableDischargePower: 11, allowableCharge: 11, allowableDischarge: 11, systemState: 1, soc: 50, breaker1: 0, breaker2: 0, breaker3: 0, breaker4: 0, breaker5: 0 }]
}
},
computed: {
},
methods: {
statusRectColor(val) {
if (val === 1) {
return '#00FF1A'
} else {
return '#FF0000'
}
},
getHeight(val) {
return (val / 100) * 55
},
getY(val) {
return 375 + (55 - this.getHeight(val))
},
statusColor(val) {
if (val === 1) {
return '#00FF1A'
} else {
return '#FF0000'
}
}
}
}
</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>

800
src/views/dashboardtest/components/top-center/fourth-disposition.vue Normal file
View File

@ -0,0 +1,800 @@
<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 385,80"
fill="none"
class="g-rect-path"
stroke="#0094FF"
stroke-dasharray="3 3"
/>
<rect
x="152"
y="78"
width="233"
height="4"
:style="{ fill: 'rgba(100,100,100,0)', stroke: 'transparent',cursor: 'pointer' }"
@click="lookDeviceDetail('line-top-left')"
/>
<polyline
points="385,80 600,80"
fill="none"
class="g-rect-path"
stroke="#0094FF"
stroke-dasharray="3 3"
/>
<rect
x="383"
y="78"
width="217"
height="4"
:style="{ fill: 'rgba(100,100,100,0)', stroke: 'transparent',cursor: 'pointer' }"
@click="lookDeviceDetail('line-top-right')"
/>
<!-- center -->
<polyline
points="385,80 385,363"
fill="none"
class="g-rect-path"
stroke="#0094FF"
stroke-dasharray="3 3"
/>
<rect
x="385"
y="80"
width="4"
height="285"
:style="{ fill: 'rgba(100,100,100,0)', stroke: 'transparent',cursor: 'pointer' }"
@click="lookDeviceDetail('line-center')"
/>
<polyline
points="385,160 460,160"
fill="none"
class="g-rect-path"
stroke="#0094FF"
stroke-dasharray="3 3"
/>
<!-- bottom -->
<polyline
points="104,363 300,363"
fill="none"
class="g-rect-path"
stroke="#0094FF"
stroke-dasharray="3 3"
/>
<rect
x="104"
y="361"
width="196"
height="4"
:style="{ fill: 'rgba(100,100,100,0)', stroke: 'transparent',cursor: 'pointer' }"
@click="lookDeviceDetail('line-bottom-1')"
/>
<polyline
points="300,363 385,363"
fill="none"
class="g-rect-path"
stroke="#0094FF"
stroke-dasharray="3 3"
/>
<rect
x="300"
y="361"
width="85"
height="4"
:style="{ fill: 'rgba(100,100,100,0)', stroke: 'transparent',cursor: 'pointer' }"
@click="lookDeviceDetail('line-bottom-2')"
/>
<polyline
points="385,363 470,363"
fill="none"
class="g-rect-path"
stroke="#0094FF"
stroke-dasharray="3 3"
/>
<rect
x="385"
y="361"
width="85"
height="4"
:style="{ fill: 'rgba(100,100,100,0)', stroke: 'transparent',cursor: 'pointer' }"
@click="lookDeviceDetail('line-bottom-3')"
/>
<polyline
points="470,363 655,363"
fill="none"
class="g-rect-path"
stroke="#0094FF"
stroke-dasharray="3 3"
/>
<rect
x="470"
y="361"
width="175"
height="4"
:style="{ fill: 'rgba(100,100,100,0)', stroke: 'transparent',cursor: 'pointer' }"
@click="lookDeviceDetail('line-bottom-4')"
/>
<!-- 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.lineTopLeft"
/>
</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>
<circle
cx="600"
cy="80"
r="8"
style="stroke: none; fill: url(#RadialGradient1)"
>
<animateMotion
repeatCount="indefinite"
dur="4s"
begin="0s"
:path="dotData.lineTopRight"
/>
</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="300"
cy="363"
r="8"
style="stroke: none; fill: url(#RadialGradient1)"
/>
<circle
cx="470"
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="300"
cy="363"
r="8"
style="stroke: none; fill: url(#RadialGradient1)"
>
<animateMotion
repeatCount="indefinite"
dur="4s"
begin="2s"
:path="dotData.lineBottomLeftTwo"
/>
</circle>
<circle
cx="470"
cy="363"
r="8"
style="stroke: none; fill: url(#RadialGradient1)"
>
<animateMotion
repeatCount="indefinite"
dur="4s"
begin="2s"
:path="dotData.lineBottomRightTwo"
/>
</circle>
<!-- 图片和文字 -->
<!-- 市电 -->
<image
:xlink:href="gridImg"
x="70"
y="30"
width="90"
height="117"
/>
<text x="90" y="160" fill="#ffffff" font-size="14"> {{ $t("dashboard.grid") }}</text>
<!-- {{ $t("dashboard.load") }} -->
<image
:xlink:href="configData.house"
x="610"
y="30"
width="90"
height="117"
@click="lookDeviceDetail('fourth-fuzai-1')"
/>
<text x="645" y="160" fill="#ffffff" font-size="14"> {{ $t("dashboard.load") }}</text>
<g v-for="(item,index) in fuzaiData" :key="item.id">
<text x="625" :y="180 + ( 20 * index)" fill="#ffffff" font-size="14">
{{ item.name }}
</text>
<text :x="countChineseAndEnglishCharacters(item.name,625)" :y="180 + ( 20 * index)" fill="#FFB800" font-size="14">
{{ item.value }}
</text>
</g>
<!-- 1#PCS -->
<image
:xlink:href="configData.pcs2"
x="65"
y="383"
width="90"
height="90"
@click="lookDeviceDetail('fourth-pcs-1')"
/>
<text x="86" y="490" fill="#ffffff" font-size="14"> {{ hiddenTextWord(`1#${$t("dashboard.cabinet")}`,10) }}</text>
<g v-for="(item,index) in pcs1Data" :key="item.id">
<text x="40" :y="280 + ( 20 * index)" fill="#ffffff" font-size="14">
{{ item.name }}
</text>
<text :x="countChineseAndEnglishCharacters(item.name,40)" :y="280 + ( 20 * index)" fill="#FFB800" font-size="14">
{{ item.value }}
</text>
</g>
<!-- 2#PCS -->
<image
:xlink:href="configData.pcs2"
x="255"
y="383"
width="90"
height="90"
@click="lookDeviceDetail('fourth-pcs-2')"
/>
<text x="270" y="490" fill="#ffffff" font-size="14"> {{ hiddenTextWord(`2#${$t("dashboard.cabinet")}`,10) }}</text>
<g v-for="(item,index) in pcs2Data" :key="item.id">
<text x="210" :y="280 + ( 20 * index)" fill="#ffffff" font-size="14">
{{ item.name }}
</text>
<text :x="countChineseAndEnglishCharacters(item.name,210)" :y="280 + ( 20 * index)" fill="#FFB800" font-size="14">
{{ item.value }}
</text>
</g>
<!-- 3#PCS -->
<image
:xlink:href="configData.pcs2"
x="414"
y="383"
width="90"
height="90"
@click="lookDeviceDetail('fourth-pcs-3')"
/>
<text x="434" y="490" fill="#ffffff" font-size="14"> {{ hiddenTextWord(`3#${$t("dashboard.cabinet")}`,10) }}</text>
<g v-for="(item,index) in pcs3Data" :key="item.id">
<text x="420" :y="280 + ( 20 * index)" fill="#ffffff" font-size="14">
{{ item.name }}
</text>
<text :x="countChineseAndEnglishCharacters(item.name,420)" :y="280 + ( 20 * index)" fill="#FFB800" font-size="14">
{{ item.value }}
</text>
</g>
<!-- 4#PCS -->
<image
:xlink:href="configData.pcs2"
x="594"
y="383"
width="90"
height="90"
@click="lookDeviceDetail('fourth-pcs-4')"
/>
<text x="614" y="490" fill="#ffffff" font-size="14"> {{ hiddenTextWord(`4#${$t("dashboard.cabinet")}`,10) }}</text>
<g v-for="(item,index) in pcs4Data" :key="item.id">
<text x="602" :y="280 + ( 20 * index)" fill="#ffffff" font-size="14">
{{ item.name }}
</text>
<text :x="countChineseAndEnglishCharacters(item.name,602)" :y="280 + ( 20 * index)" fill="#FFB800" font-size="14">
{{ item.value }}
</text>
</g>
<!-- 变压器 -->
<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"
@click="lookDeviceDetail('fourth-ammeter-1')"
/>
<text x="485" y="203" fill="#ffffff" font-size="14">{{ $t("dashboard.ammeter") }}</text>
<g v-for="(item,index) in ammeterData" :key="item.id">
<text x="435" :y="220 + ( 20 * index)" fill="#ffffff" font-size="14">
{{ item.name }}
</text>
<text :x="countChineseAndEnglishCharacters(item.name,435)" :y="220 + ( 20 * index)" fill="#FFB800" font-size="14">
{{ item.value }}
</text>
</g>
</svg>
</div>
</div>
<DispositionPointData :disposition-show="show_point_dispostion" :max="4" :page-location="pageLocation" @close="closePoint" @getData="getDynamicPointData" />
</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'
import config from './config'
import { changeTheme } 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,
dotData: {
lineTop: 'M 0,0 0,0',
lineBottomLeft: 'M 0,0 0,0 0,0',
lineBottomRight: 'M 0,0 0,0 0,0',
lineBottomLeftTwo: 'M 0,0 0,0 0,0',
lineBottomRightTwo: '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 },
{ soc: 0, soh: 0, activePowerPCS: 0.0, reactivePowerPCS: 0.0 }
],
loading: false,
activePowerTotal: {},
show_point_dispostion: false,
pageLocation: '',
permissionId: null,
pcs1Data: [],
pcs2Data: [],
pcs3Data: [],
pcs4Data: [],
ammeterData: [],
fuzaiData: [],
configData: {}
}
},
computed: {},
watch: {},
created() {
const result = changeTheme()
this.configData = config[result]
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: {
workStatus(val, index) {
// console.log(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 || !val) {
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 || !val) {
return this.$t('dashboard.standing')
}
}
},
getData() {
this.getpcs1Data()
this.getpcs2Data()
this.getpcs3Data()
this.getpcs4Data()
this.getammeter()
this.getFuzai()
this.getLineStatus('line-bottom-1')
this.getLineStatus('line-bottom-2')
this.getLineStatus('line-center')
this.getLineStatus('line-bottom-3')
this.getLineStatus('line-bottom-4')
this.getLineStatus('line-top-left')
this.getLineStatus('line-top-right')
},
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 * 11) + (obj.chineseCount * 16) + (obj.otherCount * 8) + x
},
lookDeviceDetail(val) { // 查看设备详情
this.pageLocation = val
this.show_point_dispostion = true
},
closePoint() {
this.show_point_dispostion = false
},
async getFuzai() {
this.loading = true
try {
const res = await DynamicConfigPoint({
pageLocation: 'fourth-fuzai-1',
permissionId: this.permissionId,
stationId: this.stationId })
this.fuzaiData = res.data
} catch (error) {
// console.log(error);
} finally {
this.loading = false
}
},
async getpcs1Data() {
this.loading = true
try {
const res = await DynamicConfigPoint({
pageLocation: 'fourth-pcs-1',
permissionId: this.permissionId,
stationId: this.stationId })
this.pcs1Data = res.data
} catch (error) {
// console.log(error);
} finally {
this.loading = false
}
},
async getpcs2Data() {
this.loading = true
try {
const res = await DynamicConfigPoint({
pageLocation: 'fourth-pcs-2',
permissionId: this.permissionId,
stationId: this.stationId })
this.pcs2Data = res.data
} catch (error) {
// console.log(error);
} finally {
this.loading = false
}
},
async getpcs3Data() {
this.loading = true
try {
const res = await DynamicConfigPoint({
pageLocation: 'fourth-pcs-3',
permissionId: this.permissionId,
stationId: this.stationId })
this.pcs3Data = res.data
} catch (error) {
// console.log(error);
} finally {
this.loading = false
}
},
async getpcs4Data() {
this.loading = true
try {
const res = await DynamicConfigPoint({
pageLocation: 'fourth-pcs-4',
permissionId: this.permissionId,
stationId: this.stationId })
this.pcs4Data = res.data
} catch (error) {
// console.log(error);
} finally {
this.loading = false
}
},
async getammeter() {
this.loading = true
try {
const res = await DynamicConfigPoint({
pageLocation: 'fourth-ammeter-1',
permissionId: this.permissionId,
stationId: this.stationId })
this.ammeterData = res.data
} catch (error) {
// console.log(error);
} finally {
this.loading = false
}
},
async getLineStatus(type) {
this.loading = true
try {
const res = await DynamicConfigPoint({
pageLocation: type,
permissionId: this.permissionId,
stationId: this.stationId })
if (type === 'line-bottom-1') {
if (res.data?.length) {
if (res.data[0].value > 0) {
this.dotData.lineBottomLeft = 'M 283,-280, 280, 0, 0 ,0'
} else if (res.data[0].value < 0) {
this.dotData.lineBottomLeft = 'M 0,0 281,0 281,-283'
} else {
this.dotData.lineBottomLeft = ''
}
} else {
this.dotData.lineBottomLeft = ''
}
} else if (type === 'line-bottom-2') {
if (res.data?.length) {
if (res.data[0].value > 0) {
this.dotData.lineBottomLeftTwo = 'M 85,-280, 85, 0, 0 ,0'
} else if (res.data[0].value < 0) {
this.dotData.lineBottomLeftTwo = 'M 0,0 85,0 85,-283'
} else {
this.dotData.lineBottomLeftTwo = ''
}
} else {
this.dotData.lineBottomLeftTwo = ''
}
} else if (type === 'line-bottom-3') {
if (res.data?.length) {
if (res.data[0].value > 0) {
this.dotData.lineBottomRight = 'M -271, -280 , -271 , 0 , 0 , 0'
} else if (res.data[0].value < 0) {
this.dotData.lineBottomRight = 'M 0,0 -271,0 -271,-283'
} else {
this.dotData.lineBottomRight = ''
}
} else {
this.dotData.lineBottomRight = ''
}
} else if (type === 'line-bottom-4') {
if (res.data?.length) {
if (res.data[0].value > 0) {
this.dotData.lineBottomRightTwo = 'M -85,-280,-85,0 0,0'
} else if (res.data[0].value < 0) {
this.dotData.lineBottomRightTwo = 'M 0,0 -85,0 -85,-283'
} else {
this.dotData.lineBottomRightTwo = ''
}
} else {
this.dotData.lineBottomRightTwo = ''
}
} else if (type === 'line-center') {
if (res.data?.length) {
if (res.data[0].value > 0) {
this.dotData.lineCenter = 'M 0,-283,0,0,0,0'
} else if (res.data[0].value < 0) {
this.dotData.lineCenter = 'M 0,0,0,0,0,-283'
} else {
this.dotData.lineCenter = ''
}
} else {
this.dotData.lineCenter = ''
}
} else if (type === 'line-top-left') {
if (res.data?.length) {
if (res.data[0].value > 0) {
this.dotData.lineTopLeft = 'M 238,0 0,0'
} else if (res.data[0].value < 0) {
this.dotData.lineTopLeft = 'M 0,0 238,0'
} else {
this.dotData.lineTopLeft = ''
}
} else {
this.dotData.lineTopLeft = ''
}
} else if (type === 'line-top-right') {
if (res.data?.length) {
if (res.data[0].value > 0) {
this.dotData.lineTopRight = 'M -230,0 0,0'
} else if (res.data[0].value < 0) {
this.dotData.lineTopRight = 'M 0,0 -230,0'
} else {
this.dotData.lineTopRight = ''
}
} else {
this.dotData.lineTopRight = ''
}
}
} catch (error) {
// console.log(error);
} finally {
this.loading = false
}
},
getDynamicPointData() {
this.getData()
}
}
}
</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>

648
src/views/dashboardtest/components/top-center/fourth.vue Normal file
View File

@ -0,0 +1,648 @@
<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="300"
cy="363"
r="8"
style="stroke: none; fill: url(#RadialGradient1)"
/>
<circle
cx="470"
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="300"
cy="363"
r="8"
style="stroke: none; fill: url(#RadialGradient1)"
>
<animateMotion
repeatCount="indefinite"
dur="4s"
begin="2s"
:path="dotData.lineBottomLeftTwo"
/>
</circle>
<circle
cx="470"
cy="363"
r="8"
style="stroke: none; fill: url(#RadialGradient1)"
>
<animateMotion
repeatCount="indefinite"
dur="4s"
begin="2s"
:path="dotData.lineBottomRightTwo"
/>
</circle>
<!-- 图片和文字 -->
<!-- 市电 -->
<image
:xlink:href="gridImg"
x="70"
y="30"
width="90"
height="117"
/>
<text x="90" y="160" fill="#ffffff" font-size="14"> {{ $t("dashboard.grid") }}</text>
<!-- {{ $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="65"
y="383"
width="90"
height="90"
/>
<text x="86" y="490" fill="#ffffff" font-size="14">
{{ hiddenTextWord(`1#${$t("dashboard.cabinet")}`,10) }}
</text>
<!-- 2#PCS -->
<image
:xlink:href="configData.pcs2"
x="255"
y="383"
width="90"
height="90"
/>
<text x="270" y="490" fill="#ffffff" font-size="14">
{{ hiddenTextWord(`2#${$t("dashboard.cabinet")}`,10) }}
</text>
<!-- 3#PCS -->
<image
:xlink:href="configData.pcs2"
x="414"
y="383"
width="90"
height="90"
/>
<text x="434" y="490" fill="#ffffff" font-size="14">
{{ hiddenTextWord(`3#${$t("dashboard.cabinet")}`,10) }}
</text>
<image
:xlink:href="configData.pcs2"
x="594"
y="383"
width="90"
height="90"
/>
<text x="614" y="490" fill="#ffffff" font-size="14">
{{ hiddenTextWord(`4#${$t("dashboard.cabinet")}`,10) }}
</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="170" y="320" fill="#ffb800" font-size="14">
{{ partList.length > 0 ? workStatus(partList[0].activePowerPCS,0) : $t('dashboard.standing') }}
</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="250" y="280" fill="#ffffff" font-size="14">
SOC(%)：
</text>
<text x="322" y="280" fill="#ffb800" font-size="14">
{{ partList.length > 1 ? partList[1].soc : 0 }}
</text>
<text x="250" y="300" fill="#ffffff" font-size="14">
SOH(%)：
</text>
<text x="322" y="300" fill="#ffb800" font-size="14">
{{ partList.length > 1 ? partList[1].soh : 0 }}
</text>
<text x="250" y="320" fill="#ffffff" font-size="14">
{{ $t("dashboard.workStatus") }}：
</text>
<text x="334" y="320" fill="#ffb800" font-size="14">
{{ partList.length > 1 ? workStatus(partList[1].activePowerPCS,1) : $t('dashboard.standing') }}
</text>
<text x="250" y="340" fill="#ffffff" font-size="14">
{{ $t("dashboard.activePower") }}({{
partList.length > 1
? partList[1].activePowerPCS
: 0 | kwUnitFormat
}})：
</text>
<text x="350" y="340" fill="#ffb800" font-size="14">
{{
partList.length > 1
? partList[1].activePowerPCS
: 0 | kWFormat(2)
}}
</text>
<!-- 中间 3PCS -->
<text x="420" y="280" fill="#ffffff" font-size="14">
SOC(%)：
</text>
<text x="492" y="280" fill="#ffb800" font-size="14">
{{ partList.length > 2 ? partList[2].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 > 2 ? partList[2].soh : 0 }}
</text>
<text x="420" y="320" fill="#ffffff" font-size="14">
{{ $t("dashboard.workStatus") }}：
</text>
<text x="505" y="320" fill="#ffb800" font-size="14">
{{ partList.length > 2 ? workStatus(partList[2].activePowerPCS,2) : $t('dashboard.standing') }}
</text>
<text x="420" y="340" fill="#ffffff" font-size="14">
{{ $t("dashboard.activePower") }}({{
partList.length > 2
? partList[2].activePowerPCS
: 0 | kwUnitFormat
}})：
</text>
<text x="520" y="340" fill="#ffb800" font-size="14">
{{
partList.length > 0
? partList[2].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 > 3 ? partList[3].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 > 3 ? partList[3].soh : 0 }}
</text>
<text x="602" y="320" fill="#ffffff" font-size="14">
{{ $t("dashboard.workStatus") }}：
</text>
<text x="685" y="320" fill="#ffb800" font-size="14">
{{ partList.length > 3 ? workStatus(partList[3].activePowerPCS,3) : $t('dashboard.standing') }}
</text>
<text x="602" y="340" fill="#ffffff" font-size="14">
{{ $t("dashboard.activePower") }}({{
partList.length > 3
? partList[3].activePowerPCS
: 0 | kwUnitFormat
}})：
</text>
<text x="702" y="340" fill="#ffb800" font-size="14">
{{
partList.length > 3
? partList[3].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 { hiddenTextWord } from '@/utils/index'
import {
GetOpenStationMiddle,
GetOpenStationMiddlePart,
GetTotalPower
} from '@/api/home-page/index'
import config from './config'
import { changeTheme } 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,
dotData: {
lineTop: 'M 0,0 0,0',
lineBottomLeft: 'M 0,0 0,0 0,0',
lineBottomRight: 'M 0,0 0,0 0,0',
lineBottomLeftTwo: 'M 0,0 0,0 0,0',
lineBottomRightTwo: '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 },
{ 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) {
// console.log(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 || !val) {
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 || !val) {
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
}
},
async GetOpenStationMiddlePart() {
this.loading = true
try {
const params = {
stationId: this.stationId
}
const res = await GetOpenStationMiddlePart(params)
this.partList = res?.data
// this.dotData.lineTop = 'M 0,0 412,0'
// if (this.partList[0].flowDirection) {
// if (this.partList[0].activePowerPCS > +0.1) {
// this.dotData.lineBottomLeft = 'M 283,-280, 280, 0, 0 ,0'
// } else if (this.partList[0].activePowerPCS < 0) {
// this.dotData.lineBottomLeft = 'M 0,0 281,0 281,-283'
// }
// }
// if (this.partList[1].flowDirection) {
// if (this.partList[1].activePowerPCS > +0.1) {
// this.dotData.lineBottomLeftTwo = 'M 85,-280, 85, 0, 0 ,0'
// } else if (this.partList[1].activePowerPCS < 0) {
// this.dotData.lineBottomLeftTwo = 'M 0,0 85,0 85,-283'
// }
// }
// if (this.partList[2].flowDirection) {
// if (this.partList[2].activePowerPCS > +0.1) {
// this.dotData.lineBottomRight = 'M -271, -280 , -271 , 0 , 0 , 0'
// } else if (this.partList[2].activePowerPCS < 0) {
// this.dotData.lineBottomRight = 'M 0,0 -271,0 -271,-283'
// }
// }
// if (this.partList[3].flowDirection) {
// if (this.partList[3].activePowerPCS > +0.1) {
// this.dotData.lineBottomRightTwo = 'M -85,-280,-85,0 0,0'
// } else if (this.partList[3].activePowerPCS < 0) {
// this.dotData.lineBottomRightTwo = ' M 0,0 -85,0 -85,-283'
// }
// }
// 根据activePowerPCS判断
} 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>

822
src/views/dashboardtest/components/top-center/ninth.vue Normal file
View File

@ -0,0 +1,822 @@
<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 745,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="425"
cy="320"
r="8"
style="stroke: none; fill: url(#RadialGradient1)"
>
<animateMotion
repeatCount="indefinite"
dur="4s"
begin="0s"
:path="dotData.lineBottomFive"
/>
</circle>
<circle
cx="505"
cy="320"
r="8"
style="stroke: none; fill: url(#RadialGradient1)"
>
<animateMotion
repeatCount="indefinite"
dur="4s"
begin="0s"
:path="dotData.lineBottomSix"
/>
</circle>
<circle
cx="585"
cy="320"
r="8"
style="stroke: none; fill: url(#RadialGradient1)"
>
<animateMotion
repeatCount="indefinite"
dur="4s"
begin="0s"
:path="dotData.lineBottomSeven"
/>
</circle>
<circle
cx="665"
cy="320"
r="8"
style="stroke: none; fill: url(#RadialGradient1)"
>
<animateMotion
repeatCount="indefinite"
dur="4s"
begin="0s"
:path="dotData.lineBottomEight"
/>
</circle>
<circle
cx="745"
cy="320"
r="8"
style="stroke: none; fill: url(#RadialGradient1)"
>
<animateMotion
repeatCount="indefinite"
dur="4s"
begin="0s"
:path="dotData.lineBottomNight"
/>
</circle>
<!-- top -->
<circle
cx="154"
cy="60"
r="8"
style="stroke: none; fill: url(#RadialGradient1);cursor: pointer;"
@click="disposition('night-line-top-left')"
/>
<circle
cx="630"
cy="60"
r="8"
style="stroke: none; fill: url(#RadialGradient1);cursor: pointer;"
@click="disposition('night-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="disposition('night-line-bottom-one')"
/>
<circle
cx="210"
cy="320"
r="8"
style="stroke: none; fill: url(#RadialGradient1);cursor: pointer;"
@click="disposition('night-line-bottom-two')"
/>
<circle
cx="290"
cy="320"
r="8"
style="stroke: none; fill: url(#RadialGradient1);cursor: pointer;"
@click="disposition('night-line-bottom-three')"
/>
<circle
cx="365"
cy="320"
r="8"
style="stroke: none; fill: url(#RadialGradient1);cursor: pointer;"
@click="disposition('night-line-bottom-four')"
/>
<circle
cx="425"
cy="320"
r="8"
style="stroke: none; fill: url(#RadialGradient1);cursor: pointer;"
@click="disposition('night-line-bottom-five')"
/>
<circle
cx="505"
cy="320"
r="8"
style="stroke: none; fill: url(#RadialGradient1);cursor: pointer;"
@click="disposition('night-line-bottom-six')"
/>
<circle
cx="585"
cy="320"
r="8"
style="stroke: none; fill: url(#RadialGradient1);cursor: pointer;"
@click="disposition('night-line-bottom-seven')"
/>
<circle
cx="665"
cy="320"
r="8"
style="stroke: none; fill: url(#RadialGradient1);cursor: pointer;"
@click="disposition('night-line-bottom-eight')"
/>
<circle
cx="745"
cy="320"
r="8"
style="stroke: none; fill: url(#RadialGradient1);cursor: pointer;"
@click="disposition('night-line-bottom-night')"
/>
<!-- 图片和文字 -->
<!-- 市电 -->
<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('ninth_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="disposition('ninth_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="disposition('ninth_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="disposition('ninth_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="400"
y="330"
width="50"
height="50"
style="cursor: pointer;"
@click="disposition('ninth_pcs_5')"
/>
<text x="400" y="410" fill="#ffffff" font-size="14">{{ hiddenTextWord(`5#${$t("dashboard.cabinet")}`,8) }}</text>
<!-- 6#PCS -->
<image
:xlink:href="cabinetImg"
x="480"
y="330"
width="50"
height="50"
style="cursor: pointer;"
@click="disposition('ninth_pcs_6')"
/>
<text x="475" y="410" fill="#ffffff" font-size="14">{{ hiddenTextWord(`6#${$t("dashboard.cabinet")}`,8) }}</text>
<image
:xlink:href="cabinetImg"
x="560"
y="330"
width="50"
height="50"
style="cursor: pointer;"
@click="disposition('ninth_pcs_7')"
/>
<text x="555" y="410" fill="#ffffff" font-size="14">{{ hiddenTextWord(`7#${$t("dashboard.cabinet")}`,8) }}</text>
<image
:xlink:href="cabinetImg"
x="640"
y="330"
width="50"
height="50"
style="cursor: pointer;"
@click="disposition('ninth_pcs_8')"
/>
<text x="630" y="410" fill="#ffffff" font-size="14">{{ hiddenTextWord(`8#${$t("dashboard.cabinet")}`,8) }}</text>
<image
:xlink:href="cabinetImg"
x="720"
y="330"
width="50"
height="50"
style="cursor: pointer;"
@click="disposition('ninth_pcs_9')"
/>
<text x="720" y="410" fill="#ffffff" font-size="14">{{ hiddenTextWord(`9#${$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('ninth_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="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="340" y="440" fill="#FFB800" font-size="14">{{ pcsData_4.length ? pcsData_4[0].value : '' }}</text>
<text x="340" y="460" fill="#FFB800" font-size="14">{{ pcsData_4.length > 1 ? pcsData_4[1].value : '' }}</text>
<text x="340" y="480" fill="#FFB800" font-size="14">{{ pcsData_4.length > 2 ? pcsData_4[2].value : '' }}</text>
<text x="340" y="500" fill="#FFB800" font-size="14">{{ pcsData_4.length > 3 ? pcsData_4[3].value : '' }}</text>
<!-- 5#PCS -->
<text x="410" y="440" fill="#FFB800" font-size="14">{{ pcsData_5.length ? pcsData_5[0].value : '' }}</text>
<text x="410" y="460" fill="#FFB800" font-size="14">{{ pcsData_5.length > 1 ? pcsData_5[1].value : '' }}</text>
<text x="410" y="480" fill="#FFB800" font-size="14">{{ pcsData_5.length > 2 ? pcsData_5[2].value : '' }}</text>
<text x="410" y="500" fill="#FFB800" font-size="14">{{ pcsData_5.length > 3 ? pcsData_5[3].value : '' }}</text>
<!-- 6#PCS -->
<text x="490" y="440" fill="#FFB800" font-size="14">{{ pcsData_6.length ? pcsData_6[0].value : '' }}</text>
<text x="490" y="460" fill="#FFB800" font-size="14">{{ pcsData_6.length > 1 ? pcsData_6[1].value : '' }}</text>
<text x="490" y="480" fill="#FFB800" font-size="14">{{ pcsData_6.length > 2 ? pcsData_6[2].value : '' }}</text>
<text x="490" y="500" fill="#FFB800" font-size="14">{{ pcsData_6.length > 3 ? pcsData_6[3].value : '' }}</text>
<!-- 7#PCS -->
<text x="570" y="440" fill="#FFB800" font-size="14">{{ pcsData_7.length ? pcsData_7[0].value : '' }}</text>
<text x="570" y="460" fill="#FFB800" font-size="14">{{ pcsData_7.length > 1 ? pcsData_7[1].value : '' }}</text>
<text x="570" y="480" fill="#FFB800" font-size="14">{{ pcsData_7.length > 2 ? pcsData_7[2].value : '' }}</text>
<text x="570" y="500" fill="#FFB800" font-size="14">{{ pcsData_7.length > 3 ? pcsData_7[3].value : '' }}</text>
<!-- 8#PCS -->
<text x="650" y="440" fill="#FFB800" font-size="14">{{ pcsData_8.length ? pcsData_8[0].value : '' }}</text>
<text x="650" y="460" fill="#FFB800" font-size="14">{{ pcsData_8.length > 1 ? pcsData_8[1].value : '' }}</text>
<text x="650" y="480" fill="#FFB800" font-size="14">{{ pcsData_8.length > 2 ? pcsData_8[2].value : '' }}</text>
<text x="650" y="500" fill="#FFB800" font-size="14">{{ pcsData_8.length > 3 ? pcsData_8[3].value : '' }}</text>
<!-- 9#PCS -->
<text x="730" y="440" fill="#FFB800" font-size="14">{{ pcsData_9.length ? pcsData_9[0].value : '' }}</text>
<text x="730" y="460" fill="#FFB800" font-size="14">{{ pcsData_9.length > 1 ? pcsData_9[1].value : '' }}</text>
<text x="730" y="480" fill="#FFB800" font-size="14">{{ pcsData_9.length > 2 ? pcsData_9[2].value : '' }}</text>
<text x="730" y="500" fill="#FFB800" font-size="14">{{ pcsData_9.length > 3 ? pcsData_9[3].value : '' }}</text>
</svg>
</div>
</div>
<dispositionPointDialog :visible="show_point_dispostion" :page-location="pageLocation" @close="closePoint" @getData="getDynamicPointData" />
</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,
pcsData_1: [],
pcsData_2: [],
pcsData_3: [],
pcsData_4: [],
pcsData_5: [],
pcsData_6: [],
pcsData_7: [],
pcsData_8: [],
pcsData_9: [],
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 }
],
dotData: {
lineTopLeft: 'M 0,0 0,0',
lineTopRight: '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',
lineBottomEight: 'M 0,0 0,0',
lineBottomNight: 'M 0,0 0,0'
},
loading: false,
activePowerTotal: {},
permissionId: null,
show_point_dispostion: false,
pageLocation: null
}
},
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: {
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.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',
lineBottomEight: 'M 0,0 0,0',
lineBottomNight: 'M 0,0 0,0'
}
if (res.data.length) {
res.data.forEach((item) => {
if (item.pageLocation === 'ninth_pcs_1') {
this.pcsData_1.push(item)
} else if (item.pageLocation === 'ninth_pcs_2') {
this.pcsData_2.push(item)
} else if (item.pageLocation === 'ninth_pcs_3') {
this.pcsData_3.push(item)
} else if (item.pageLocation === 'ninth_pcs_4') {
this.pcsData_4.push(item)
} else if (item.pageLocation === 'ninth_pcs_5') {
this.pcsData_5.push(item)
} else if (item.pageLocation === 'ninth_pcs_6') {
this.pcsData_6.push(item)
} else if (item.pageLocation === 'ninth_pcs_7') {
this.pcsData_7.push(item)
} else if (item.pageLocation === 'ninth_pcs_8') {
this.pcsData_8.push(item)
} else if (item.pageLocation === 'ninth_pcs_9') {
this.pcsData_9.push(item)
} else if (item.pageLocation === 'ninth_ammeter_1') {
this.ammeter_1.push(item)
} else if (item.pageLocation === 'night-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 === 'night-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 === 'night-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 === 'night-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 === 'night-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 === 'night-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 === 'night-line-bottom-five') {
if (+item.value > 0) {
this.dotData.lineBottomFive = 'M -39,-260,-39,0 0,0'
} else if (+item.value < 0) {
this.dotData.lineBottomFive = 'M 0,0 -39,0 -39,-260'
} else {
this.dotData.lineBottomFive = 'M 0,0 0,0'
}
} else if (item.pageLocation === 'night-line-bottom-six') {
if (+item.value > 0) {
this.dotData.lineBottomSix = 'M -119,-260,-119,0 0,0'
} else if (+item.value < 0) {
this.dotData.lineBottomSix = 'M 0,0 -119,0 -119,-260 '
} else {
this.dotData.lineBottomSix = 'M 0,0 0,0'
}
} else if (item.pageLocation === 'night-line-bottom-seven') {
if (+item.value > 0) {
this.dotData.lineBottomSeven = 'M -199,-260,-199,0 0,0"'
} else if (+item.value < 0) {
this.dotData.lineBottomSeven = 'M 0,0 -199,0 -199,-260'
} else {
this.dotData.lineBottomSeven = 'M 0,0 0,0'
}
} else if (item.pageLocation === 'night-line-bottom-eight') {
if (+item.value > 0) {
this.dotData.lineBottomEight = 'M -279,-260,-279,0 0,0'
} else if (+item.value < 0) {
this.dotData.lineBottomEight = 'M 0,0 -279,0 -279,-260'
} else {
this.dotData.lineBottomEight = 'M 0,0 0,0'
}
} else if (item.pageLocation === 'night-line-bottom-night') {
if (+item.value > 0) {
this.dotData.lineBottomNight = 'M -359,-260,-359,0 0,0'
} else if (+item.value < 0) {
this.dotData.lineBottomNight = 'M 0,0 -279,0 -359,-260'
} else {
this.dotData.lineBottomNight = '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>

391
src/views/dashboardtest/components/top-center/once.vue Normal file
View File

@ -0,0 +1,391 @@
<template>
<ItemBox :title="$t('dashboard.stationTopo')" style="min-height: 560px">
<div ref="svgLine" v-loading="loading" class="center-box">
<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>
<polyline
points="115,206 673,206"
fill="none"
class="g-rect-path"
stroke-width="1"
stroke="#0094FF"
stroke-dasharray="3 3"
/>
<circle
cx="110"
cy="206"
r="8"
style="stroke: none; fill: url(#RadialGradient1)"
>
<animateMotion
repeatCount="indefinite"
dur="8s"
begin="0s"
:path="line.line2"
/>
</circle>
<circle
cx="110"
cy="206"
r="8"
style="stroke: none; fill: url(#RadialGradient1); cursor: pointer"
@click="lookDeviceDetail('215-pcs-line-left')"
/>
<circle
cx="673"
cy="206"
r="8"
style="stroke: none; fill: url(#RadialGradient1)"
>
<animateMotion
repeatCount="indefinite"
dur="8s"
begin="0s"
:path="line.line1"
/>
</circle>
<circle
cx="673"
cy="206"
r="8"
style="stroke: none; fill: url(#RadialGradient1); cursor: pointer"
@click="lookDeviceDetail('215-pcs-line-right')"
/>
<!-- {{ $t("dashboard.dCCabin") }} -->
<image
v-if="stationId === 381"
:xlink:href="tnHomeCang"
x="680"
y="162"
width="60"
height="80"
style="cursor: pointer"
@click="lookDeviceDetail('215-pcs')"
/>
<image
v-else
:xlink:href="configData.pcs"
x="680"
y="162"
width="60"
height="80"
style="cursor: pointer"
@click="lookDeviceDetail('215-pcs')"
/>
<!-- <text x="650" y="290" fill="#ffffff" font-size="14">{{ $t("dashboard.activePower") }}</text> -->
<g v-for="(item, index) in pcsData" :key="item.id">
<text x="630" :y="290 + 20 * index" fill="#ffffff" font-size="14">
{{ item.name }}
</text>
<text
:x="countChineseAndEnglishCharacters(item.name, 630)"
:y="290 + 20 * index"
fill="#FFB800"
font-size="14"
>
{{ item.value }}
</text>
</g>
<!-- 电网 -->
<image
:xlink:href="configData.grid"
x="35"
y="162"
width="60"
height="80"
/>
<!-- {{ $t("dashboard.gridCab") }} -->
<image
:xlink:href="configData.gui"
x="361"
y="162"
width="80"
height="80"
style="cursor: pointer"
@click="lookDeviceDetail('215-bwg')"
/>
<g v-for="(item, index) in bwgData" :key="item.id">
<text x="350" :y="290 + 20 * index" fill="#ffffff" font-size="14">
{{ item.name }}
</text>
<text
:x="countChineseAndEnglishCharacters(item.name, 350)"
:y="290 + 20 * index"
fill="#FFB800"
font-size="14"
>
{{ item.value }}
</text>
</g>
<!-- {{ $t("dashboard.dCCabin") }} -->
<text x="678" y="260" fill="#ffffff" font-size="14">{{ $t("dashboard.esiCab") }}</text>
<text x="379" y="260" fill="#ffffff" font-size="14">{{ $t("dashboard.gridCab") }}</text>
<text x="38" y="260" fill="#ffffff" font-size="14"> {{ $t("dashboard.grid") }}</text>
</svg>
</div>
<DispositionPointData
:disposition-show="show_point_dispostion"
:max="4"
:page-location="pageLocation"
@close="closePoint"
@getData="getDynamicPointData"
/>
</ItemBox>
</template>
<script>
import homeOffice from '@/assets/images/home-office.png'
import homeIntegrated from '@/assets/images/wxjd/pcs-energy.png'
import homePowerGrid from '@/assets/images/home-powerGrid.png'
import homeInverter from '@/assets/images/home-inverter-1.png'
import homeCang from '@/assets/images/wxjd/cabinet.png'
import tnHomeCang from '@/assets/images/wxjd/cabinet.png'
import { DynamicConfigPoint } from '@/api/home-page/index'
import config from './config'
import { changeTheme } from '@/utils/index'
export default {
name: 'Index',
props: {
stationType: {
type: Number,
default: 0
},
stationId: {
type: Number,
default: 0
}
},
data() {
return {
formModel: { soc: '', soh: '', activePowerPCS: '', reactivePowerPCS: '' },
homeOffice,
homeIntegrated,
homePowerGrid,
homeInverter,
homeCang,
tnHomeCang,
loading: false,
currentIndex: 0,
pageLocation: '',
configData: {},
line: {
line1: 'M 0,0 0,0', // {{ $t("dashboard.gridCab") }}和一体柜之间的连线 {{ $t("dashboard.gridCab") }}流向一体柜
line2: 'M 0,0 0,0' // {{ $t("dashboard.gridCab") }}和电网之间的连线- 电网流向{{ $t("dashboard.gridCab") }}
},
otherLine: {
line1: 'M 0,0 0,0 ', // {{ $t("dashboard.gridCab") }}和一体柜之间的连线 一体柜流向{{ $t("dashboard.gridCab") }}
line2: 'M 0,0 0,0' // {{ $t("dashboard.gridCab") }}和电网之间的连线- {{ $t("dashboard.gridCab") }}流向电网
},
key: 0,
rightclickInfo: {},
visiable: false,
srcIdValue: null,
options: [],
newformModel: {},
topologyId: null,
sureLoading: false,
editId: null,
show_point_dispostion: false,
bwgData: [],
pcsData: [],
permissionId: null
}
},
computed: {},
watch: {},
created() {
const result = changeTheme()
this.configData = config[result]
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: {
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 * 11 + obj.chineseCount * 16 + obj.otherCount * 8 + x
)
},
closePoint() {
this.show_point_dispostion = false
},
getDynamicPointData() {
this.getData()
},
handleChange() {},
lookDeviceDetail(val) {
// 查看设备详情
this.pageLocation = val
this.show_point_dispostion = true
},
workStatus(val) {
if (this.formModel.flowDirection === 2) {
if (+val > +1) {
return this.$t('dashboard.disCharging')
}
if (+val < -1) {
return this.$t('dashboard.charging')
}
if (val < 1 || +val.abs < 1 || !val) {
return this.$t('dashboard.standing')
}
} else {
if (+val > +1) {
return this.$t('dashboard.charging')
}
if (+val < -1) {
return this.$t('dashboard.disCharging')
}
if (val < 1 || +val.abs < 1 || !val) {
return this.$t('dashboard.standing')
}
}
},
getFlowDirection(val) {
if (this.formModel.flowDirection === 2) {
if (+val > +1) {
this.line.line1 = 'M 0,0 -270,0'
this.line.line2 = 'M 301,0 0,0'
}
if (+val < -1) {
this.line.line1 = 'M -272,0 0,0'
this.line.line2 = 'M 0,0 301,0'
}
if (val === 0 || !val || (val < 1 && val > -1)) {
this.line.line1 = ''
this.line.line2 = ''
}
} else {
if (+val > +0.1) {
this.line.line1 = 'M -272,0 0,0'
this.line.line2 = 'M 0,0 301,0'
}
if (+val < -0.1) {
this.line.line1 = 'M 0,0 -270,0'
this.line.line2 = 'M 301,0 0,0'
}
if (val === 0 || !val || (val < 1 && val > -1)) {
this.line.line1 = ''
this.line.line2 = ''
}
}
},
async getLine() {},
async getPcsData() {
this.loading = true
try {
const { data } = await DynamicConfigPoint({
permissionId: this.permissionId,
stationId: this.stationId
})
this.pcsData = []
this.bwgData = []
this.line.line1 = ''
this.line.line2 = ''
data.forEach((item) => {
if (item.pageLocation === '215-pcs') {
this.pcsData.push(item)
} else if (item.pageLocation === '215-bwg') {
this.bwgData.push(item)
} else if (item.pageLocation === '215-pcs-line-left') {
if (item.value > 0.1) {
this.line.line2 = 'M 0,0 301,0'
} else if (item.value < -0.1) {
this.line.line2 = 'M 301,0 0,0'
} else {
this.line.line2 = ''
}
} else if (item.pageLocation === '215-pcs-line-right') {
if (item.value > 0.1) {
this.line.line1 = 'M -272,0 0,0'
} else if (item.value < -0.1) {
this.line.line1 = 'M 0,0 -270,0'
} else {
this.line.line1 = ''
}
}
})
} catch (error) {
// console.log(error);
} finally {
this.loading = false
}
},
async getData() {
this.getPcsData()
}
}
}
</script>
<style lang="scss" scoped>
.center-box {
width: 100%;
height: 100%;
}
</style>

599
src/views/dashboardtest/components/top-center/second-disposition.vue Normal file
View File

@ -0,0 +1,599 @@
<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 385,80"
fill="none"
class="g-rect-path"
stroke="#0094FF"
stroke-dasharray="3 3"
/>
<rect
x="152"
y="78"
width="233"
height="4"
:style="{ fill: 'rgba(100,100,100,0)', stroke: 'transparent',cursor: 'pointer' }"
@click="lookDeviceDetail('line-top-left')"
/>
<polyline
points="385,80 600,80"
fill="none"
class="g-rect-path"
stroke="#0094FF"
stroke-dasharray="3 3"
/>
<rect
x="383"
y="78"
width="217"
height="4"
:style="{ fill: 'rgba(100,100,100,0)', stroke: 'transparent',cursor: 'pointer' }"
@click="lookDeviceDetail('line-top-right')"
/>
<!-- center -->
<polyline
points="385,80 385,363"
fill="none"
class="g-rect-path"
stroke="#0094FF"
stroke-dasharray="3 3"
/>
<rect
x="385"
y="80"
width="4"
height="285"
:style="{ fill: 'rgba(100,100,100,0)', stroke: 'transparent',cursor: 'pointer' }"
@click="lookDeviceDetail('line-center')"
/>
<polyline
points="385,160 460,160"
fill="none"
class="g-rect-path"
stroke="#0094FF"
stroke-dasharray="3 3"
/>
<!-- bottom -->
<polyline
points="104,363 385,363"
fill="none"
class="g-rect-path"
stroke="#0094FF"
stroke-dasharray="3 3"
/>
<rect
x="104"
y="361"
width="285"
height="4"
:style="{ fill: 'rgba(100,100,100,0)', stroke: 'transparent',cursor: 'pointer' }"
@click="lookDeviceDetail('line-bottom-left')"
/>
<polyline
points="385,363 655,363"
fill="none"
class="g-rect-path"
stroke="#0094FF"
stroke-dasharray="3 3"
/>
<rect
x="385"
y="361"
width="270"
height="4"
:style="{ fill: 'rgba(100,100,100,0)', stroke: 'transparent',cursor: 'pointer' }"
@click="lookDeviceDetail('line-bottom-right')"
/>
<!-- 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.lineTopLeft"
/>
</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>
<circle
cx="600"
cy="80"
r="8"
style="stroke: none; fill: url(#RadialGradient1)"
>
<animateMotion
repeatCount="indefinite"
dur="4s"
begin="0s"
:path="dotData.lineTopRight"
/>
</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>
<!-- 图片和文字 -->
<!-- 市电 -->
<image
:xlink:href="configData.grid"
x="70"
y="30"
width="90"
height="117"
/>
<text x="90" y="160" fill="#ffffff" font-size="14"> {{ $t("dashboard.grid") }}</text>
<!-- {{ $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="65"
y="383"
width="90"
height="90"
style="cursor: pointer;"
@click="lookDeviceDetail('second-pcs-left')"
/>
<text x="86" y="490" fill="#ffffff" font-size="14">1#{{ $t("dashboard.cabinet") }}</text>
<image
:xlink:href="configData.pcs2"
x="594"
y="383"
width="90"
height="90"
style="cursor: pointer;"
@click="lookDeviceDetail('second-pcs-right')"
/>
<text x="614" y="490" fill="#ffffff" font-size="14">2#{{ $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"
style="cursor: pointer;"
@click="lookDeviceDetail('second-ammeter')"
/>
<!-- 瞬时总有功 -->
<g v-for="(item,index) in ammeterData" :key="item.id">
<text x="435" :y="220 + ( 20 * index)" fill="#ffffff" font-size="14">
{{ item.name }}
</text>
<text :x="countChineseAndEnglishCharacters(item.name,435)" :y="220 + ( 20 * index)" fill="#FFB800" font-size="14">
{{ item.value }}
</text>
</g>
<!-- <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 -->
<g v-for="(item,index) in pcsLeftData" :key="item.id">
<text x="85" :y="280 + ( 20 * index)" fill="#ffffff" font-size="14">
{{ item.name }}
</text>
<text :x="countChineseAndEnglishCharacters(item.name,85)" :y="280 + ( 20 * index)" fill="#FFB800" font-size="14">
{{ item.value }}
</text>
</g>
<!-- 中间 2PCS -->
<g v-for="(item,index) in pcsRightData" :key="item.id">
<text x="602" :y="280 + ( 20 * index)" fill="#ffffff" font-size="14">
{{ item.name }}
</text>
<text :x="countChineseAndEnglishCharacters(item.name,602)" :y="280 + ( 20 * index)" fill="#FFB800" font-size="14">
{{ item.value }}
</text>
</g>
</svg>
</div>
</div>
<dispositionPointDialog :visible="show_point_dispostion" :max="4" :page-location="pageLocation" @close="closePoint" @getData="getDynamicPointData" />
</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 config from './config'
import { changeTheme } from '@/utils/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',
lineBottomLeftTwo: 'M 0,0 0,0 0,0',
lineBottomRightTwo: '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 },
{ soc: 0, soh: 0, activePowerPCS: 0.0, reactivePowerPCS: 0.0 }
],
loading: false,
activePowerTotal: {},
show_point_dispostion: false,
pageLocation: '',
permissionId: null,
pcsLeftData: [],
pcsRightData: [],
ammeterData: [],
configData: {}
}
},
computed: {},
watch: {},
created() {
const result = changeTheme()
this.configData = config[result]
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: {
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 * 11) + (obj.chineseCount * 16) + (obj.otherCount * 8) + x
},
lookDeviceDetail(val) { // 查看设备详情
this.pageLocation = val
this.show_point_dispostion = true
},
closePoint() {
this.show_point_dispostion = false
},
async getpcsLeft() {
this.loading = true
try {
const res = await DynamicConfigPoint({
pageLocation: 'second-pcs-left',
permissionId: this.permissionId,
stationId: this.stationId })
this.pcsLeftData = res.data
} catch (error) {
// console.log(error);
} finally {
this.loading = false
}
},
async getammeter() {
this.loading = true
try {
const res = await DynamicConfigPoint({
pageLocation: 'second-ammeter',
permissionId: this.permissionId,
stationId: this.stationId })
this.ammeterData = res.data
} catch (error) {
// console.log(error);
} finally {
this.loading = false
}
},
async getpcsRight() {
this.loading = true
try {
const res = await DynamicConfigPoint({
pageLocation: 'second-pcs-right',
permissionId: this.permissionId,
stationId: this.stationId })
this.pcsRightData = res.data
} catch (error) {
// console.log(error);
} finally {
this.loading = false
}
},
async getLineStatus(type) {
this.loading = true
try {
const res = await DynamicConfigPoint({
pageLocation: type,
permissionId: this.permissionId,
stationId: this.stationId })
if (type === 'line-bottom-left') {
if (res.data?.length) {
if (res.data[0].value > 0) {
this.dotData.lineBottomLeft = 'M 283,0, 280, 0, 0 ,0'
} else if (res.data[0].value < 0) {
this.dotData.lineBottomLeft = 'M 0,0 281,0 281,0'
} else {
this.dotData.lineBottomLeft = ''
}
} else {
this.dotData.lineBottomLeft = ''
}
} else if (type === 'line-bottom-right') {
if (res.data?.length) {
if (res.data[0].value > 0) {
this.dotData.lineBottomRight = 'M -271, 0 , -271 , 0 , 0 , 0'
} else if (res.data[0].value < 0) {
this.dotData.lineBottomRight = 'M 0,0 -271,0 -271,0'
} else {
this.dotData.lineBottomRight = ''
}
} else {
this.dotData.lineBottomRight = ''
}
} else if (type === 'line-center') {
if (res.data?.length) {
if (res.data[0].value > 0) {
this.dotData.lineCenter = 'M 0,-283,0,0,0,0'
} else if (res.data[0].value < 0) {
this.dotData.lineCenter = 'M 0,0,0,0,0,-283'
} else {
this.dotData.lineCenter = ''
}
} else {
this.dotData.lineCenter = ''
}
} else if (type === 'line-top-left') {
if (res.data?.length) {
if (res.data[0].value > 0) {
this.dotData.lineTopLeft = 'M 238,0 0,0'
} else if (res.data[0].value < 0) {
this.dotData.lineTopLeft = 'M 0,0 238,0'
} else {
this.dotData.lineTopLeft = ''
}
} else {
this.dotData.lineTopLeft = ''
}
} else if (type === 'line-top-right') {
if (res.data?.length) {
if (res.data[0].value > 0) {
this.dotData.lineTopRight = 'M -230,0 0,0'
} else if (res.data[0].value < 0) {
this.dotData.lineTopRight = 'M 0,0 -230,0'
} else {
this.dotData.lineTopRight = ''
}
} else {
this.dotData.lineTopRight = ''
}
}
} catch (error) {
// console.log(error);
} finally {
this.loading = false
}
},
getData() {
this.getpcsRight()
this.getpcsLeft()
this.getammeter()
this.getLineStatus('line-bottom-left')
this.getLineStatus('line-center')
this.getLineStatus('line-bottom-right')
this.getLineStatus('line-top-left')
this.getLineStatus('line-top-right')
},
getDynamicPointData() {
this.getData()
}
}
}
</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>

499
src/views/dashboardtest/components/top-center/second.vue Normal file
View File

@ -0,0 +1,499 @@
<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>
<!-- 图片和文字 -->
<!-- 市电 -->
<image
:xlink:href="configData.grid"
x="70"
y="30"
width="90"
height="117"
/>
<text x="90" y="160" fill="#ffffff" font-size="14"> {{ $t("dashboard.grid") }}</text>
<!-- {{ $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="65"
y="383"
width="90"
height="90"
/>
<text x="86" y="490" fill="#ffffff" font-size="14">1#{{ $t("dashboard.cabinet") }}</text>
<image
:xlink:href="configData.pcs2"
x="594"
y="383"
width="90"
height="90"
/>
<text x="614" y="490" fill="#ffffff" font-size="14">2#{{ $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="602" y="280" fill="#ffffff" font-size="14">
SOC(%)：
</text>
<text x="672" y="280" fill="#ffb800" font-size="14">
{{ partList.length > 0 ? partList[1].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[1].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[1].activePowerPCS,1) }}
</text>
<text x="602" y="340" fill="#ffffff" font-size="14">
{{ $t("dashboard.activePower") }}({{
partList.length > 0
? partList[1].activePowerPCS
: 0 | kwUnitFormat
}})：
</text>
<text x="702" y="340" fill="#ffb800" font-size="14">
{{
partList.length > 0
? partList[1].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 {
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',
lineBottomLeftTwo: 'M 0,0 0,0 0,0',
lineBottomRightTwo: '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 },
{ 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) {
// console.log(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 || !val) {
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 || !val) {
return this.$t('dashboard.standing')
}
}
},
getData() {
this.GetMiddleActive()
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.lineBottomRight = 'M -271, -280 , -271 , 0 , 0 , 0'
} else if (data[1].activePowerPCS < -1) {
this.dotData.lineBottomRight = 'M 0,0 -271,0 -271,-283'
} else if (data[1].activePowerPCS === 0 || !data[0].activePowerPCS || (data[1].activePowerPCS > -1 && data[1].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.lineBottomRight = 'M 0,0 -271,0 -271,-283'
} else if (data[1].activePowerPCS < -1) {
this.dotData.lineBottomRight = 'M -271, -280 , -271 , 0 , 0 , 0'
} else if (data[1].activePowerPCS === 0 || !data[1].activePowerPCS || (data[1].activePowerPCS > -1 && data[1].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)
// 根据activePowerPCS判断
} 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>

755
src/views/dashboardtest/components/top-center/seventh.vue Normal file
View File

@ -0,0 +1,755 @@
<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>
<dispositionPointDialog :visible="show_point_dispostion" :page-location="pageLocation" @close="closePoint" @getData="getDynamicPointData" />
</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>

781
src/views/dashboardtest/components/top-center/sixth.vue Normal file
View File

@ -0,0 +1,781 @@
<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,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="240"
cy="320"
r="8"
style="stroke: none; fill: url(#RadialGradient1)"
>
<animateMotion
repeatCount="indefinite"
dur="4s"
begin="0s"
:path="dotData.lineBottomTwo"
/>
</circle>
<circle
cx="348"
cy="320"
r="8"
style="stroke: none; fill: url(#RadialGradient1)"
>
<animateMotion
repeatCount="indefinite"
dur="4s"
begin="0s"
:path="dotData.lineBottomThree"
/>
</circle>
<circle
cx="426"
cy="320"
r="8"
style="stroke: none; fill: url(#RadialGradient1)"
>
<animateMotion
repeatCount="indefinite"
dur="4s"
begin="0s"
:path="dotData.lineBottomFour"
/>
</circle>
<circle
cx="540"
cy="320"
r="8"
style="stroke: none; fill: url(#RadialGradient1)"
>
<animateMotion
repeatCount="indefinite"
dur="4s"
begin="0s"
:path="dotData.lineBottomFive"
/>
</circle>
<circle
cx="650"
cy="320"
r="8"
style="stroke: none; fill: url(#RadialGradient1)"
>
<animateMotion
repeatCount="indefinite"
dur="4s"
begin="0s"
:path="dotData.lineBottomSix"
/>
</circle>
<!-- top -->
<circle
cx="154"
cy="60"
r="8"
style="stroke: none; fill: url(#RadialGradient1);cursor: pointer;"
@click="lookDeviceDetail('six-line-top-left')"
/>
<circle
cx="630"
cy="60"
r="8"
style="stroke: none; fill: url(#RadialGradient1);cursor: pointer;"
@click="lookDeviceDetail('six-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('six-line-bottom-one')"
/>
<circle
cx="240"
cy="320"
r="8"
style="stroke: none; fill: url(#RadialGradient1);cursor: pointer;"
@click="lookDeviceDetail('six-line-bottom-two')"
/>
<circle
cx="348"
cy="320"
r="8"
style="stroke: none; fill: url(#RadialGradient1);cursor: pointer;"
@click="lookDeviceDetail('six-line-bottom-three')"
/>
<circle
cx="426"
cy="320"
r="8"
style="stroke: none; fill: url(#RadialGradient1);cursor: pointer;"
@click="lookDeviceDetail('six-line-bottom-four')"
/>
<circle
cx="540"
cy="320"
r="8"
style="stroke: none; fill: url(#RadialGradient1);cursor: pointer;"
@click="lookDeviceDetail('six-line-bottom-five')"
/>
<circle
cx="650"
cy="320"
r="8"
style="stroke: none; fill: url(#RadialGradient1);cursor: pointer;"
@click="lookDeviceDetail('six-line-bottom-six')"
/>
<!-- 图片和文字 -->
<!-- 市电 -->
<image :xlink:href="configData.grid" 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="configData.house"
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="configData.pcs2"
x="100"
y="330"
width="50"
height="50"
style="cursor: pointer"
@click="lookDeviceDetail('sixth_pcs_1')"
/>
<text x="96" y="410" fill="#ffffff" font-size="14"> {{ hiddenTextWord(`1#${$t("dashboard.cabinet")}`,10) }}</text>
<!-- 2#PCS -->
<image
:xlink:href="configData.pcs2"
x="210"
y="330"
width="50"
height="50"
style="cursor: pointer"
@click="lookDeviceDetail('sixth_pcs_2')"
/>
<text x="210" y="410" fill="#ffffff" font-size="14"> {{ hiddenTextWord(`2#${$t("dashboard.cabinet")}`,10) }}</text>
<!-- 3#PCS -->
<image
:xlink:href="configData.pcs2"
x="320"
y="330"
width="50"
height="50"
style="cursor: pointer"
@click="lookDeviceDetail('sixth_pcs_3')"
/>
<text x="314" y="410" fill="#ffffff" font-size="14"> {{ hiddenTextWord(`3#${$t("dashboard.cabinet")}`,10) }}</text>
<image
:xlink:href="configData.pcs2"
x="400"
y="330"
width="50"
height="50"
style="cursor: pointer"
@click="lookDeviceDetail('sixth_pcs_4')"
/>
<text x="395" y="410" fill="#ffffff" font-size="14"> {{ hiddenTextWord(`4#${$t("dashboard.cabinet")}`,10) }}</text>
<image
:xlink:href="configData.pcs2"
x="510"
y="330"
width="50"
height="50"
style="cursor: pointer"
@click="lookDeviceDetail('sixth_pcs_5')"
/>
<text x="505" y="410" fill="#ffffff" font-size="14"> {{ hiddenTextWord(`5#${$t("dashboard.cabinet")}`,10) }}</text>
<image
:xlink:href="configData.pcs2"
x="620"
y="330"
width="50"
height="50"
style="cursor: pointer"
@click="lookDeviceDetail('sixth_pcs_6')"
/>
<text x="620" y="410" fill="#ffffff" font-size="14"> {{ hiddenTextWord(`6#${$t("dashboard.cabinet")}`,10) }}</text>
<!-- 变压器 -->
<image
:xlink:href="configData.gui"
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('sixth_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>
<g transform="translate(0,-10)">
<!-- 左侧 -->
<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="230" y="440" fill="#FFB800" font-size="14">
{{ pcsData_2.length ? pcsData_2[0].value : "" }}
</text>
<text x="230" y="460" fill="#FFB800" font-size="14">
{{ pcsData_2.length > 1 ? pcsData_2[1].value : "" }}
</text>
<text x="230" y="480" fill="#FFB800" font-size="14">
{{ pcsData_2.length > 2 ? pcsData_2[2].value : "" }}
</text>
<text x="230" y="500" fill="#FFB800" font-size="14">
{{ pcsData_2.length > 3 ? pcsData_2[3].value : "" }}
</text>
<!-- 3#PCS -->
<text x="340" y="440" fill="#FFB800" font-size="14">
{{ pcsData_3.length ? pcsData_3[0].value : "" }}
</text>
<text x="340" y="460" fill="#FFB800" font-size="14">
{{ pcsData_3.length > 1 ? pcsData_3[1].value : "" }}
</text>
<text x="340" y="480" fill="#FFB800" font-size="14">
{{ pcsData_3.length > 2 ? pcsData_3[2].value : "" }}
</text>
<text x="340" y="500" fill="#FFB800" font-size="14">
{{ pcsData_3.length > 3 ? pcsData_3[3].value : "" }}
</text>
<!-- 4#PCS -->
<text x="420" y="440" fill="#FFB800" font-size="14">
{{ pcsData_4.length ? pcsData_4[0].value : "" }}
</text>
<text x="420" y="460" fill="#FFB800" font-size="14">
{{ pcsData_4.length > 1 ? pcsData_4[1].value : "" }}
</text>
<text x="420" y="480" fill="#FFB800" font-size="14">
{{ pcsData_4.length > 2 ? pcsData_4[2].value : "" }}
</text>
<text x="420" y="500" fill="#FFB800" font-size="14">
{{ pcsData_4.length > 3 ? pcsData_4[3].value : "" }}
</text>
<!-- 5#PCS -->
<text x="530" y="440" fill="#FFB800" font-size="14">
{{ pcsData_5.length ? pcsData_5[0].value : "" }}
</text>
<text x="530" y="460" fill="#FFB800" font-size="14">
{{ pcsData_5.length > 1 ? pcsData_5[1].value : "" }}
</text>
<text x="530" y="480" fill="#FFB800" font-size="14">
{{ pcsData_5.length > 2 ? pcsData_5[2].value : "" }}
</text>
<text x="530" y="500" fill="#FFB800" font-size="14">
{{ pcsData_5.length > 3 ? pcsData_5[3].value : "" }}
</text>
<!-- 6#PCS -->
<text x="645" y="440" fill="#FFB800" font-size="14">
{{ pcsData_6.length ? pcsData_6[0].value : "" }}
</text>
<text x="645" y="460" fill="#FFB800" font-size="14">
{{ pcsData_6.length > 1 ? pcsData_6[1].value : "" }}
</text>
<text x="645" y="480" fill="#FFB800" font-size="14">
{{ pcsData_6.length > 2 ? pcsData_6[2].value : "" }}
</text>
<text x="645" y="500" fill="#FFB800" font-size="14">
{{ pcsData_6.length > 3 ? pcsData_6[3].value : "" }}
</text>
</g>
</svg>
</div>
</div>
<DispositionPointData
:disposition-show="show_point_dispostion"
:page-location="pageLocation"
@close="closePoint"
@getData="getDynamicPointData"
/>
</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'
import config from './config'
import { changeTheme } from '@/utils/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,
hiddenTextWord,
configData: {},
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 238,0 0,0",
// lineTopRight: "M 0,0 -230,0",
// lineCenter: "M 0,-283,0,0,0,0",
// lineBottomOne: 'M 258,-260, 258, 0, 0 ,0',
// lineBottomTwo: 'M 146,-260, 146, 0, 0 ,0',
// lineBottomThree: 'M 38,-260, 38, 0, 0 ,0',
// lineBottomFour: 'M -40,-260,-40,0 0,0',
// lineBottomFive: 'M -154,-260,-154,0 0,0',
// lineBottomSix: 'M -265,-260,-265,0 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'
},
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() {
const result = changeTheme()
this.configData = config[result]
setTimeout(() => {
if (this.$store.getters.menuList.length) {
this.permissionId = this.$store.getters.menuList.find((item) => {
return item.url === this.$route.path
}).id
}
}, 300)
},
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.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'
}
if (res.data.length) {
res.data.forEach((item) => {
if (item.pageLocation === 'sixth_pcs_1') {
this.pcsData_1.push(item)
} else if (item.pageLocation === 'sixth_pcs_2') {
this.pcsData_2.push(item)
} else if (item.pageLocation === 'sixth_pcs_3') {
this.pcsData_3.push(item)
} else if (item.pageLocation === 'sixth_pcs_4') {
this.pcsData_4.push(item)
} else if (item.pageLocation === 'sixth_pcs_5') {
this.pcsData_5.push(item)
} else if (item.pageLocation === 'sixth_pcs_6') {
this.pcsData_6.push(item)
} else if (item.pageLocation === 'sixth_ammeter_1') {
this.ammeter_1.push(item)
} else if (item.pageLocation === 'six-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 === 'six-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 === 'six-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 === 'six-line-bottom-two') {
if (+item.value > 0) {
this.dotData.lineBottomTwo = 'M 146,-260, 146, 0, 0 ,0'
} else if (+item.value < 0) {
this.dotData.lineBottomTwo = 'M 0,0,146, 0,146,-260 '
} else {
this.dotData.lineBottomTwo = 'M 0,0 0,0'
}
} else if (item.pageLocation === 'six-line-bottom-three') {
if (+item.value > 0) {
this.dotData.lineBottomThree = 'M 38,-260, 38, 0, 0 ,0'
} else if (+item.value < 0) {
this.dotData.lineBottomThree = 'M 0,0, 38, 0, 38,-260'
} else {
this.dotData.lineBottomThree = 'M 0,0 0,0'
}
} else if (item.pageLocation === 'six-line-bottom-four') {
if (+item.value > 0) {
this.dotData.lineBottomFour = 'M -40,-260,-40,0 0,0'
} else if (+item.value < 0) {
this.dotData.lineBottomFour = 'M 0,0,-40,0,-40,-260'
} else {
this.dotData.lineBottomFour = 'M 0,0 0,0'
}
} else if (item.pageLocation === 'six-line-bottom-five') {
if (+item.value > 0) {
this.dotData.lineBottomFive = 'M -154,-260,-154,0 0,0'
} else if (+item.value < 0) {
this.dotData.lineBottomFive = 'M 0,0,-154,0,-154,-260'
} else {
this.dotData.lineBottomFive = 'M 0,0 0,0'
}
} else if (item.pageLocation === 'six-line-bottom-six') {
if (+item.value > 0) {
this.dotData.lineBottomSix = 'M -265,-260,-265,0 0,0'
} else if (+item.value < 0) {
this.dotData.lineBottomSix = 'M 0,0,-265,0,-265,-260'
} else {
this.dotData.lineBottomSix = '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>

436
src/views/dashboardtest/components/top-center/standard-215.vue Normal file
View File

@ -0,0 +1,436 @@
<template>
<ItemBox :title="$t('dashboard.stationTopo')" style="min-height: 560px">
<div ref="svgLine" v-loading="loading" class="center-box">
<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>
<polyline
points="115,206 673,206"
fill="none"
class="g-rect-path"
stroke-width="1"
stroke="#0094FF"
stroke-dasharray="3 3"
/>
<circle
cx="110"
cy="206"
r="8"
style="stroke: none; fill: url(#RadialGradient1)"
/>
<!-- //动点 -->
<circle
cx="110"
cy="206"
r="8"
style="stroke: none; fill: url(#RadialGradient1)"
>
<animateMotion
repeatCount="indefinite"
dur="8s"
begin="0s"
:path="line.line2"
/>
</circle>
<circle
cx="673"
cy="206"
r="8"
style="stroke: none; fill: url(#RadialGradient1)"
/>
<!-- //动点 -->
<circle
cx="673"
cy="206"
r="8"
style="stroke: none; fill: url(#RadialGradient1)"
>
<animateMotion
repeatCount="indefinite"
dur="8s"
begin="0s"
:path="line.line1"
/>
</circle>
<!-- {{ $t("dashboard.dCCabin") }} -->
<image
v-if="stationId === 381"
:xlink:href="tnHomeCang"
x="680"
y="162"
width="60"
height="80"
/>
<image
v-else
:xlink:href="configData.pcs"
x="680"
y="162"
width="60"
height="80"
style="cursor: pointer"
@click="gotoDeviceList(1)"
@contextmenu.prevent="onContextmenu($event, '1')"
/>
<!-- 电网 -->
<image
:xlink:href="configData.grid"
x="35"
y="162"
width="60"
height="80"
/>
<!-- {{ $t("dashboard.gridCab") }} -->
<image
:xlink:href="configData.gui"
x="361"
y="162"
width="80"
height="80"
/>
<!-- {{ $t("dashboard.dCCabin") }} -->
<text x="637" y="290" fill="#ffffff" font-size="14">{{ $t("dashboard.workStatus") }}：</text>
<text x="735" y="290" fill="#FFB800" font-size="14">
{{ workStatus(formModel.activePowerPCS) }}
</text>
<text x="637" y="313" fill="#ffffff" font-size="14">
{{ $t("dashboard.activePower") }}(kW)：
</text>
<text x="755" y="313" fill="#FFB800" font-size="14">
{{ formModel.activePowerPCS }}
</text>
<text x="637" y="333" fill="#ffffff" font-size="14">SOC(%)：</text>
<text x="735" y="333" fill="#FFB800" font-size="14">
{{ formModel.soc }}
</text>
<text x="637" y="353" fill="#ffffff" font-size="14">SOH(%)：</text>
<text x="735" y="353" fill="#FFB800" font-size="14">
{{ formModel.soh }}
</text>
<text x="670" y="260" fill="#ffffff" font-size="14">{{ $t("dashboard.esiCab") }}</text>
<text x="379" y="260" fill="#ffffff" font-size="14">{{ $t("dashboard.gridCab") }}</text>
<text x="38" y="260" fill="#ffffff" font-size="14"> {{ $t("dashboard.grid") }}</text>
</svg>
</div>
<rightMenu
:class-index="0"
:rightclick-info="rightclickInfo"
@setting="setting"
/>
<el-dialog
:append-to-body="true"
title="配置跳转"
:visible.sync="visiable"
width="30%"
modal-append-to-body
:close-on-click-modal="false"
@close="close"
>
<el-form
ref="formModel"
:model="newformModel"
label-width="100px"
label-position="right"
>
<el-row :gutter="10" style="display: flex; flex-wrap: wrap">
<el-col :span="24">
<el-form-item label="绑定设备" prop="srcId">
<el-cascader
:key="key"
v-model="srcIdValue"
:show-all-levels="false"
style="width: 100%"
:props="{
label: 'name',
emitPath: false,
checkStrictly: true,
children: 'children',
value: 'srcId',
}"
:options="options"
@change="handleChange"
/>
</el-form-item>
</el-col>
</el-row>
</el-form>
<span slot="footer">
<el-button @click="close">取消</el-button>
<el-button
type="primary"
:loading="sureLoading"
@click="sure"
>确定</el-button>
</span>
</el-dialog>
</ItemBox>
</template>
<script>
import homeOffice from '@/assets/images/home-office.png'
import homeIntegrated from '@/assets/images/wxjd/pcs-energy.png'
import tnHomeCang from '@/assets/images/wxjd/cabinet.png'
import rightMenu from '@/components/RightMenu/index.vue'
import { GetNewTreeVirtualDevices } from '@/api/surveillance/energy-storage/index'
import { GetbozhouTuopuStatus } from '@/api/homePage-integrated/index'
import { SaveSrcId, GetSrcId } from '@/api/home-page/index'
import config from './config'
import { changeTheme } from '@/utils/index'
export default {
name: 'Index',
components: { rightMenu },
props: {
stationType: {
type: Number,
default: 0
},
stationId: {
type: Number,
default: 0
}
},
data() {
return {
formModel: { soc: 0, soh: 0, activePowerPCS: 0.0, reactivePowerPCS: 0.0 },
homeOffice,
homeIntegrated,
tnHomeCang,
loading: false,
currentIndex: 0,
line: {
line1: 'M 0,0 0,0', // {{ $t("dashboard.gridCab") }}和一体柜之间的连线 {{ $t("dashboard.gridCab") }}流向一体柜
line2: 'M 0,0 0,0' // {{ $t("dashboard.gridCab") }}和电网之间的连线- 电网流向{{ $t("dashboard.gridCab") }}
},
otherLine: {
line1: 'M 0,0 0,0 ', // {{ $t("dashboard.gridCab") }}和一体柜之间的连线 一体柜流向{{ $t("dashboard.gridCab") }}
line2: 'M 0,0 0,0' // {{ $t("dashboard.gridCab") }}和电网之间的连线- {{ $t("dashboard.gridCab") }}流向电网
},
key: 0,
rightclickInfo: {},
visiable: false,
srcIdValue: null,
options: [],
newformModel: {},
topologyId: null,
sureLoading: false,
editId: null,
configData: {}
}
},
computed: {},
watch: {},
created() {
const result = changeTheme()
this.configData = config[result]
},
mounted() {
// const result = require('./config.js')
// this.configData = result.default
// console.log(123, result)
this.getDeviceOption()
},
methods: {
async gotoDeviceList(id) {
const res = await GetSrcId({ stationId: this.stationId, ids: [id] })
if (res.data.length) {
this.$router.push({
name: 'standard-215-device-list',
params: {
srcId: res.data[0].srcId
}
})
} else {
this.$message.warning('请右击绑定图片的设备')
}
},
handleChange() {},
async setting() {
const res = await GetSrcId({
stationId: this.stationId,
ids: [this.topologyId]
})
if (res.data.length) {
this.srcIdValue = res.data[0].srcId
this.editId = res.data[0].id
}
this.visiable = true
},
workStatus(val) {
if (this.formModel.flowDirection === 2) {
if (+val > +1) {
return this.$t('dashboard.disCharging')
}
if (+val < -1) {
return this.$t('dashboard.charging')
}
if (val < 1 || +val.abs < 1 || !val) {
return this.$t('dashboard.standing')
}
} else {
if (+val > +1) {
return this.$t('dashboard.charging')
}
if (+val < -1) {
return this.$t('dashboard.disCharging')
}
if (val < 1 || +val.abs < 1 || !val) {
return this.$t('dashboard.standing')
}
}
},
getFlowDirection(val) {
if (this.formModel.flowDirection === 2) {
if (+val > +1) {
this.line.line1 = 'M 0,0 -270,0'
this.line.line2 = 'M 301,0 0,0'
}
if (+val < -1) {
this.line.line1 = 'M -272,0 0,0'
this.line.line2 = 'M 0,0 301,0'
}
if (val === 0 || !val || (val < 1 && val > -1)) {
this.line.line1 = ''
this.line.line2 = ''
}
} else {
if (+val > +0.1) {
this.line.line1 = 'M -272,0 0,0'
this.line.line2 = 'M 0,0 301,0'
}
if (+val < -0.1) {
this.line.line1 = 'M 0,0 -270,0'
this.line.line2 = 'M 301,0 0,0'
}
if (val === 0 || !val || (val < 1 && val > -1)) {
this.line.line1 = ''
this.line.line2 = ''
}
}
},
removeEmptyChildren(data) {
for (var i = 0; i < data.length; i++) {
if (data[i].children.length < 1) {
// children若为空数组，则将children设为undefined
data[i].children = undefined
} else {
// children若不为空数组，则继续 递归调用 本方法
this.removeEmptyChildren(data[i].children)
}
}
return data
},
onContextmenu(e, id) {
this.topologyId = id
this.rightclickInfo = {
position: {
x: e.clientX,
y: e.clientY
},
menulists: [
{
fnName: 'setting',
params: '配置',
icoName: 'el-icon-setting',
btnName: '配置'
}
]
}
},
close() {
this.visiable = false
this.srcIdValue = null
this.key++
},
async sure() {
this.sureLoading = true
try {
await SaveSrcId({
topologyId: this.topologyId,
stationId: this.stationId,
srcId: this.srcIdValue,
id: this.editId ? this.editId : undefined
})
this.$message.success('操作成功')
this.close()
} catch (err) {
this.$message.warning('操作失败')
} finally {
this.sureLoading = false
}
},
async getDeviceOption() {
const params = {
stationId: this.stationId
}
const { data } = await GetNewTreeVirtualDevices(params)
this.options = this.removeEmptyChildren(data)
},
async getData() {
this.loading = true
const params = {
stationId: this.stationId
}
try {
const res = await GetbozhouTuopuStatus(params)
this.formModel = res.data
this.getFlowDirection(this.formModel.activePowerPCS)
} catch (error) {
console.log(error)
} finally {
this.loading = false
}
}
}
}
</script>
<style lang="scss" scoped>
.center-box {
width: 100%;
height: 100%;
}
</style>

983
src/views/dashboardtest/components/top-center/ten.vue Normal file
View 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>

95
src/views/dashboardtest/components/top-center/thirteen-th.vue Normal file
View File

@ -0,0 +1,95 @@
<template>
<ItemBox :title="$t('dashboard.stationTopo')" style="min-height: 560px">
<div slot="header">
<div class="header-right-box">
<div class="header-title" :class="{'active':tabPosition === 1}" @click="changeTab(1)">1#{{ $t('dashboard.cnz') }}</div>
<div class="header-title" :class="{'active':tabPosition === 2}" @click="changeTab(2)">2#{{ $t('dashboard.cnz') }}</div>
</div>
</div>
<div ref="svgLine" class="center-box">
<first v-if="tabPosition === 1" ref="firstToPu" :station-id="stationId" :permission-id="permissionId" />
<second v-if="tabPosition === 2" ref="secondToPu" :station-id="stationId" :permission-id="permissionId" />
</div>
</ItemBox>
</template>
<script>
import first from './thirteenComponents/first.vue'
import second from './thirteenComponents/second.vue'
export default {
name: 'Index',
components: { first, second },
data() {
return {
tabPosition: 1,
stationId: null,
permissionId: null
}
},
computed: {
currentStation() {
return this.$store.getters.currentStation || undefined
}
},
watch: {
currentStation: {
handler(val) {
if (val && val.id) {
this.stationId = val.id
}
},
deep: true,
immediate: true
}
},
methods: {
changeTab(val) {
this.tabPosition = val
this.$nextTick(() => {
this.getData()
})
},
getData() {
if (this.$store.getters.menuList.length) {
this.permissionId = this.$store.getters.menuList.find((item) => {
return item.url === this.$route.path
}).id
}
if (this.tabPosition === 1) {
this.$refs.firstToPu.getData()
} else if (this.tabPosition === 2) {
this.$refs.secondToPu.getData()
}
}
}
}
</script>
<style lang="scss" scoped>
.center-box {
width: 100%;
height: 100%;
}
.header-right-box {
display: flex;
flex-direction: row;
align-items: center;
.header-title {
white-space: nowrap;
font-size: 14px;
font-weight: 500;
letter-spacing: 0em;
color: rgba(206, 235, 255, 0.5);
padding: 0 10px;
cursor: pointer;
font-family: Source Han Sans CN;
&.active{
color: #ffffff;
background: linear-gradient(90deg, rgba(0,148,255,0.00) 0%, rgba(0,148,255,0.43) 51%, rgba(0,148,255,0.00) 99%);
}
}
}
</style>

643
src/views/dashboardtest/components/top-center/triad-disposition.vue Normal file
View File

@ -0,0 +1,643 @@
<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 385,80"
fill="none"
class="g-rect-path"
stroke="#0094FF"
stroke-dasharray="3 3"
/>
<rect
x="154"
y="78"
width="231"
height="4"
:style="{ fill: 'rgba(100,100,100,0)', stroke: 'transparent',cursor: 'pointer' }"
@click="lookDeviceDetail('line-top-left')"
/>
<polyline
points="385,80 600,80"
fill="none"
class="g-rect-path"
stroke="#0094FF"
stroke-dasharray="3 3"
/>
<rect
x="385"
y="78"
width="215"
height="4"
:style="{ fill: 'rgba(100,100,100,0)', stroke: 'transparent',cursor: 'pointer' }"
@click="lookDeviceDetail('line-top-right')"
/>
<!-- center -->
<polyline
points="385,80 385,363"
fill="none"
class="g-rect-path"
stroke="#0094FF"
stroke-dasharray="3 3"
/>
<rect
x="383"
y="80"
width="4"
height="281"
:style="{ fill: 'rgba(100,100,100,0)', stroke: 'transparent',cursor: 'pointer' }"
@click="lookDeviceDetail('line-bottom-center')"
/>
<polyline
points="385,160 460,160"
fill="none"
class="g-rect-path"
stroke="#0094FF"
stroke-dasharray="3 3"
/>
<!-- bottom -->
<polyline
points="104,363 385,363"
fill="none"
class="g-rect-path"
stroke="#0094FF"
stroke-dasharray="3 3"
/>
<rect
x="104"
y="361"
width="283"
height="4"
:style="{ fill: 'rgba(100,100,100,0)', stroke: 'transparent',cursor: 'pointer' }"
@click="lookDeviceDetail('line-bottom-left')"
/>
<polyline
points="385,363 655,363"
fill="none"
class="g-rect-path"
stroke="#0094FF"
stroke-dasharray="3 3"
/>
<rect
x="383"
y="361"
width="272"
height="4"
:style="{ fill: 'rgba(100,100,100,0)', stroke: 'transparent',cursor: 'pointer' }"
@click="lookDeviceDetail('line-bottom-right')"
/>
<!-- 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.lineTopLeft"
/>
</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>
<circle
cx="600"
cy="80"
r="8"
style="stroke: none; fill: url(#RadialGradient1)"
>
<animateMotion
repeatCount="indefinite"
dur="4s"
begin="0s"
:path="dotData.lineTopRight"
/>
</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="385"
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>
<!-- 图片和文字 -->
<!-- 市电 -->
<image
:xlink:href="configData.grid"
x="70"
y="30"
width="90"
height="117"
/>
<text x="90" y="160" fill="#ffffff" font-size="14"> {{ $t("dashboard.grid") }}</text>
<!-- {{ $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="65"
y="383"
width="90"
height="90"
style="cursor: pointer;"
@click="lookDeviceDetail('triad-pcs-left')"
/>
<text x="86" 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"
style="cursor: pointer;"
@click="lookDeviceDetail('triad-pcs-center')"
/>
<text x="360" y="490" fill="#ffffff" font-size="14">
2#{{ $t("dashboard.cabinet") }}
</text>
<image
:xlink:href="configData.pcs2"
x="594"
y="383"
width="90"
height="90"
style="cursor: pointer;"
@click="lookDeviceDetail('triad-pcs-right')"
/>
<text x="614" 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"
style="cursor: pointer;"
@click="lookDeviceDetail('triad-ammeter')"
/>
<!-- 瞬时总有功 -->
<g v-for="(item,index) in ammeterData" :key="item.id">
<text x="435" :y="220 + ( 20 * index)" fill="#ffffff" font-size="14">
{{ item.name }}
</text>
<text :x="countChineseAndEnglishCharacters(item.name,435)" :y="220 + ( 20 * index)" fill="#FFB800" font-size="14">
{{ item.value }}
</text>
</g>
<!-- 左侧 1PCS -->
<g v-for="(item,index) in pcsLeftData" :key="item.id">
<text x="85" :y="280 + ( 20 * index)" fill="#ffffff" font-size="14">
{{ item.name }}
</text>
<text :x="countChineseAndEnglishCharacters(item.name,85)" :y="280 + ( 20 * index)" fill="#FFB800" font-size="14">
{{ item.value }}
</text>
</g>
<!-- 中间 2PCS -->
<g v-for="(item,index) in pcsCenterData" :key="item.id">
<text x="420" :y="280 + ( 20 * index)" fill="#ffffff" font-size="14">
{{ item.name }}
</text>
<text :x="countChineseAndEnglishCharacters(item.name,420)" :y="280 + ( 20 * index)" fill="#FFB800" font-size="14">
{{ item.value }}
</text>
</g>
<!-- 右侧 3PCS -->
<g v-for="(item,index) in pcsRightData" :key="item.id">
<text x="602" :y="280 + ( 20 * index)" fill="#ffffff" font-size="14">
{{ item.name }}
</text>
<text :x="countChineseAndEnglishCharacters(item.name,602)" :y="280 + ( 20 * index)" fill="#FFB800" font-size="14">
{{ item.value }}
</text>
</g>
</svg>
</div>
</div>
<DispositionPointData
:disposition-show="show_point_dispostion"
:max="4"
:page-location="pageLocation"
@close="closePoint"
@getData="getDynamicPointData"
/>
</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 config from './config'
import { changeTheme } from '@/utils/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',
lineTopLeft: 'M 0,0 0,0',
lineBottomLeft: 'M 0,0 0,0 0,0',
lineBottomRight: 'M 0,0 0,0 0,0',
lineBottomLeftTwo: 'M 0,0 0,0 0,0',
lineBottomRightTwo: '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 },
{ soc: 0, soh: 0, activePowerPCS: 0.0, reactivePowerPCS: 0.0 }
],
loading: false,
activePowerTotal: {},
show_point_dispostion: false,
pageLocation: '',
permissionId: null,
pcsLeftData: [],
pcsCenterData: [],
pcsRightData: [],
ammeterData: [],
configData: {}
}
},
computed: {},
watch: {},
created() {
const result = changeTheme()
this.configData = config[result]
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: {
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 * 11) + (obj.chineseCount * 16) + (obj.otherCount * 8) + x
},
lookDeviceDetail(val) { // 查看设备详情
this.pageLocation = val
this.show_point_dispostion = true
},
closePoint() {
this.show_point_dispostion = false
},
async getpcsCenter() {
this.loading = true
try {
const res = await DynamicConfigPoint({
pageLocation: 'triad-pcs-center',
permissionId: this.permissionId,
stationId: this.stationId })
this.pcsCenterData = res.data
} catch (error) {
// console.log(error);
} finally {
this.loading = false
}
},
async getLineStatus(type) {
this.loading = true
try {
const res = await DynamicConfigPoint({
pageLocation: type,
permissionId: this.permissionId,
stationId: this.stationId })
if (type === 'line-bottom-left') {
if (res.data?.length) {
if (res.data[0].value > 0) {
this.dotData.lineBottomLeft = 'M 283,0, 280, 0, 0 ,0'
} else if (res.data[0].value < 0) {
this.dotData.lineBottomLeft = 'M 0,0 281,0 281,0'
} else {
this.dotData.lineBottomLeft = ''
}
} else {
this.dotData.lineBottomLeft = ''
}
} else if (type === 'line-bottom-right') {
if (res.data?.length) {
if (res.data[0].value > 0) {
this.dotData.lineBottomRight = 'M -271, 0 , -271 , 0 , 0 , 0'
} else if (res.data[0].value < 0) {
this.dotData.lineBottomRight = 'M 0,0 -271,0 -271,0'
} else {
this.dotData.lineBottomRight = ''
}
} else {
this.dotData.lineBottomRight = ''
}
} else if (type === 'line-bottom-center') {
if (res.data?.length) {
if (res.data[0].value > 0) {
this.dotData.lineCenter = 'M 0,-283,0,0,0,0'
} else if (res.data[0].value < 0) {
this.dotData.lineCenter = 'M 0,0,0,0,0,-283'
} else {
this.dotData.lineCenter = ''
}
} else {
this.dotData.lineCenter = ''
}
} else if (type === 'line-top-left') {
if (res.data?.length) {
if (res.data[0].value > 0) {
this.dotData.lineTopLeft = 'M 230,0 0,0'
} else if (res.data[0].value < 0) {
this.dotData.lineTopLeft = 'M 0,0 225,0'
} else {
this.dotData.lineTopLeft = ''
}
} else {
this.dotData.lineTopLeft = ''
}
} else if (type === 'line-top-right') {
if (res.data?.length) {
if (res.data[0].value > 0) {
this.dotData.lineTopRight = 'M -230,0 0,0'
} else if (res.data[0].value < 0) {
this.dotData.lineTopRight = 'M 0,0 -225,0'
} else {
this.dotData.lineTopRight = ''
}
} else {
this.dotData.lineTopRight = ''
}
}
} catch (error) {
// console.log(error);
} finally {
this.loading = false
}
},
async getpcsLeft() {
this.loading = true
try {
const res = await DynamicConfigPoint({
pageLocation: 'triad-pcs-left',
permissionId: this.permissionId,
stationId: this.stationId })
this.pcsLeftData = res.data
} catch (error) {
// console.log(error);
} finally {
this.loading = false
}
},
async getammeter() {
this.loading = true
try {
const res = await DynamicConfigPoint({
pageLocation: 'triad-ammeter',
permissionId: this.permissionId,
stationId: this.stationId })
this.ammeterData = res.data
} catch (error) {
// console.log(error);
} finally {
this.loading = false
}
},
async getpcsRight() {
this.loading = true
try {
const res = await DynamicConfigPoint({
pageLocation: 'triad-pcs-right',
permissionId: this.permissionId,
stationId: this.stationId })
this.pcsRightData = res.data
} catch (error) {
// console.log(error);
} finally {
this.loading = false
}
},
getData() {
this.getpcsRight()
this.getpcsCenter()
this.getpcsLeft()
this.getammeter()
this.getLineStatus('line-bottom-left')
this.getLineStatus('line-bottom-center')
this.getLineStatus('line-bottom-right')
this.getLineStatus('line-top-left')
this.getLineStatus('line-top-right')
this.$forceUpdate()
},
getDynamicPointData() {
this.getData()
}
}
}
</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>

583
src/views/dashboardtest/components/top-center/triad.vue Normal file
View File

@ -0,0 +1,583 @@
<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>

345
src/views/dashboardtest/components/top-center/zhida.vue Normal file
View File

@ -0,0 +1,345 @@
<template>
<ItemBox :title="$t('dashboard.stationTopo')" style="min-height: 560px;">
<div ref="svgLine" class="center-box">
<div v-loading="loading">
<svg
version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
xml:space="preserve"
class="circle-load-rect-svg"
viewBox="0 0 800 500"
>
<defs>
<defs>
<radialGradient id="RadialGradient1">
<stop offset="0%" stop-color="#fff" />
<stop offset="30%" stop-color="#0171c1" />
<stop offset="50%" stop-color="#035088" />
<stop offset="100%" stop-color="#02395a" />
</radialGradient>
</defs>
<marker id="markerCircle" markerWidth="15" markerHeight="15" refX="5" refY="5">
<circle cx="5" cy="5" r="5" style="stroke: none; fill: url(#RadialGradient1)" />
</marker>
<marker
id="markerArrow"
markerWidth="13"
markerHeight="13"
refX="2"
refY="6"
orient="auto"
>
<path d="M2,2 L2,11 L10,6 L2,2" style="fill: black" />
</marker>
</defs>
<!-- //线条 -->
//top
<polyline points="154,80 562,80" fill="none" class="g-rect-path" stroke="#0094FF" stroke-dasharray="3 3" />
//center
<polyline points="385,80 385,363" fill="none" class="g-rect-path" stroke="#0094FF" stroke-dasharray="3 3" />
//center-right
<polyline points="289,242 385,242" fill="none" class="g-rect-path" stroke="#0094FF" stroke-dasharray="3 3" />
//center-left
<polyline points="385,272, 483,272" fill="none" class="g-rect-path" stroke="#0094FF" />
//bottom
<polyline points="103,363 656,363" fill="none" class="g-rect-path" stroke="#0094FF" stroke-dasharray="3 3" />
//圆点
//top
<circle cx="154" cy="80" r="8" style="stroke: none; fill: url(#RadialGradient1)" />
<circle cx="562" cy="80" r="8" style="stroke: none; fill: url(#RadialGradient1)" />
//动点
<circle cx="154" cy="80" r="8" style="stroke: none; fill: url(#RadialGradient1)">
<animateMotion repeatCount="indefinite" dur="8s" begin="0s" :path="dotData.lineTop" />
</circle>
//center
//center-right
<circle cx="287" cy="242" r="8" style="stroke: none; fill: url(#RadialGradient1)" />
<circle cx="287" cy="242" r="8" style="stroke: none; fill: url(#RadialGradient1)">
<animateMotion repeatCount="indefinite" dur="3s" begin="0s" :path="dotData.lineCenterRight" />
</circle>
//center-left
<circle cx="482" cy="272" r="8" style="stroke: none; fill: url(#RadialGradient1)" />
//bottom
<circle cx="103" cy="363" r="8" style="stroke: none; fill: url(#RadialGradient1)" />
<circle cx="290" cy="363" r="8" style="stroke: none; fill: url(#RadialGradient1)" />
<circle cx="480" cy="363" r="8" style="stroke: none; fill: url(#RadialGradient1)" />
<circle cx="656" cy="363" r="8" style="stroke: none; fill: url(#RadialGradient1)" />
<circle cx="103" cy="363" r="8" style="stroke: none; fill: url(#RadialGradient1)">
<animateMotion repeatCount="indefinite" dur="8s" begin="0s" :path="dotData.lineBottomLeft" />
</circle>
<circle cx="656" cy="363" r="8" style="stroke: none; fill: url(#RadialGradient1)">
<animateMotion repeatCount="indefinite" dur="8s" begin="0s" :path="dotData.lineBottomRight" />
</circle>
<!-- 图片和文字 -->
//市电---{{ $t("dashboard.ammeter") }} --充电桩 top
//市电
<image :xlink:href="gridImg" x="70" y="30" width="75" height="100" />
<text x="90" y="150" fill="#ffffff" font-size="14">{{ $t("dashboard.grid") }}</text>
//{{ $t("dashboard.ammeter") }}
<image :xlink:href="ammeterImg" x="226" y="58" width="45" height="50" />
<text x="234" y="130" fill="#ffffff" font-size="14">{{ $t("dashboard.ammeter") }}</text>
<text x="174" y="150" fill="#ffffff" font-size="14">{{ $t("dashboard.activePower") }}(kW)：</text>
<text x="274" y="150" fill="#FFB800" font-size="14">{{ activePowerTotal.activePowerFZ }}</text>
//充电桩
<image :xlink:href="chargingPileImg" x="585" y="55" width="160" height="50" />
<text x="645" y="130" fill="#ffffff" font-size="14">{{ $t("dashboard.chargingPile") }}</text>
//配电柜 --{{ $t("dashboard.ammeter") }} --{{ $t("dashboard.photovoltaic") }} center
//配电柜
<image :xlink:href="distributionCabinetImg" x="348" y="110" width="78" height="78" />
<text x="413" y="150" fill="#ffffff" font-size="14">{{ $t("dashboard.discabinet") }}</text>
//{{ $t("dashboard.ammeter") }}
<image :xlink:href="ammeterImg" x="505" y="242" width="45" height="50" />
<text x="513" y="320" fill="#ffffff" font-size="14">{{ $t("dashboard.ammeter") }}</text>
<text x="453" y="340" fill="#ffffff" font-size="14">{{ $t("dashboard.activePower") }}(kW)：</text>
<text x="553" y="340" fill="#FFB800" font-size="14">{{ activePowerTotal.activePower }}</text>
//{{ $t("dashboard.photovoltaic") }}
<image :xlink:href="frameImg" x="223" y="208" width="50" height="50" />
<text x="234" y="280" fill="#ffffff" font-size="14">{{ $t("dashboard.photovoltaic") }}</text>
<text x="174" y="300" fill="#ffffff" font-size="14">{{ $t("dashboard.activePower") }}(kW)：</text>
<text x="274" y="300" fill="#FFB800" font-size="14">{{ pvPower.activePower }}</text>
// {{ $t("dashboard.cabinet") }}*4 bottom
//{{ $t("dashboard.cabinet") }}--1
<image :xlink:href="cabinetImg" x="85" y="383" width="45" height="60" />
<text x="85" y="452" fill="#ffffff" font-size="14"> {{ hiddenTextWord(`1#${$t("dashboard.cabinet")}`,10) }}</text>
<text x="45" y="472" fill="#ffffff" font-size="14">{{ $t("dashboard.activePower") }}(kW)：</text>
<text x="145" y="472" fill="#FFB800" font-size="14">{{ partList.length ? partList[0].activePowerPCS : 0 }}</text>
<text x="78" y="492" fill="#ffffff" font-size="14">SOC(%)：</text>
<text x="145" y="492" fill="#FFB800" font-size="14">{{ partList.length ? partList[0].soc :0 }}</text>
//{{ $t("dashboard.cabinet") }}--2
<image :xlink:href="cabinetImg" x="269" y="383" width="45" height="60" />
<text x="269" y="452" fill="#ffffff" font-size="14"> {{ hiddenTextWord(`2#${$t("dashboard.cabinet")}`,10) }}</text>
<text x="229" y="472" fill="#ffffff" font-size="14">{{ $t("dashboard.activePower") }}(kW)：</text>
<text x="329" y="472" fill="#FFB800" font-size="14">{{ partList.length > 1 ? partList[1].activePowerPCS :0 }}</text>
<text x="262" y="492" fill="#ffffff" font-size="14">SOC(%)：</text>
<text x="329" y="492" fill="#FFB800" font-size="14">{{ partList.length > 1 ? partList[1].soc : 0 }}</text>
//{{ $t("dashboard.cabinet") }}--3
<image :xlink:href="cabinetImg" x="459" y="383" width="45" height="60" />
<text x="459" y="452" fill="#ffffff" font-size="14"> {{ hiddenTextWord(`3#${$t("dashboard.cabinet")}`,10) }}</text>
<text x="413" y="472" fill="#ffffff" font-size="14">{{ $t("dashboard.activePower") }}(kW)：</text>
<text x="513" y="472" fill="#FFB800" font-size="14">{{ partList.length > 2 ?partList[2].activePowerPCS : 0 }}</text>
<text x="446" y="492" fill="#ffffff" font-size="14">SOC(%)：</text>
<text x="513" y="492" fill="#FFB800" font-size="14">{{ partList.length > 2 ?partList[2].soc :0 }}</text>
//{{ $t("dashboard.cabinet") }}--4
<image :xlink:href="cabinetImg" x="638" y="388" width="45" height="60" />
<text x="638" y="452" fill="#ffffff" font-size="14"> {{ hiddenTextWord(`4#${$t("dashboard.cabinet")}`,10) }}</text>
<text x="597" y="472" fill="#ffffff" font-size="14">{{ $t("dashboard.activePower") }}(kW)：</text>
<text x="697" y="472" fill="#FFB800" font-size="14">{{ partList.length > 3 ? partList[3].activePowerPCS : 0 }}</text>
<text x="630" y="492" fill="#ffffff" font-size="14">SOC(%)：</text>
<text x="697" y="492" fill="#FFB800" font-size="14">{{ partList.length > 3 ? partList[3].soc : 0 }}</text>
</svg>
</div>
</div>
</ItemBox>
</template>
<script>
import gridImg from '@/assets/images/wxjd/grid.png'
import ammeterImg from '@/assets/images/wxjd/ammeter.png'
import cabinetImg from '@/assets/images/wxjd/cabinet.png'
import chargingPileImg from '@/assets/images/wxjd/chargingPile.png'
import distributionCabinetImg from '@/assets/images/wxjd/guiImg.png'
import frameImg from '@/assets/images/wxjd/frame.png'
import { hiddenTextWord } from '@/utils/index'
import {
GetOpenStationMiddlePart,
GetTotalPower,
GetgetElec,
GetPVElec
} from '@/api/home-page/index'
export default {
name: 'Index',
props: {
stationType: {
type: Number,
default: 0
},
stationId: {
type: Number,
default: 0
}
},
data() {
return {
hiddenTextWord,
gridImg,
ammeterImg,
cabinetImg,
chargingPileImg,
distributionCabinetImg,
frameImg,
dotData: {
lineTop: 'M 0,0 412,0',
lineCenterRight: 'M 0,0 96,0',
lineBottomLeft: '',
lineBottomRight: ''
},
loading: false,
partList: [],
activePowerTotal: {},
pvPower: {}
}
},
computed: {},
watch: {},
created() {},
mounted() {},
methods: {
getData() {
this.GetOpenStationMiddlePart()
this.GetMiddleFZActive()
this.GetMiddleActive()
this.GetPV()
},
async GetMiddleFZActive() {
this.loading = true
try {
const params = {
stationId: this.stationId
}
const res = await GetgetElec(params)
this.activePowerTotal = Object.assign(this.activePowerTotal, res.data[0])
} catch (error) {
// console.log(error);
} finally {
this.loading = false
}
},
async GetPV() {
this.loading = true
try {
const params = {
stationId: this.stationId
}
const res = await GetPVElec(params)
this.pvPower = res.data
} catch (error) {
// console.log(error);
} finally {
this.loading = false
}
},
async GetMiddleActive() {
this.loading = true
try {
const params = {
stationId: this.stationId
}
const res = await GetTotalPower(params)
this.activePowerTotal = Object.assign(this.activePowerTotal, res.data)
} catch (error) {
// console.log(error);
} finally {
this.loading = false
}
},
getFlowDirection(val) {
if (val[0].activePowerPCS > +1) {
if (val[0].flowDirection === 1) {
this.dotData.lineBottomLeft = 'M 283,-281,283,0,0,0'
}
if (val[0].flowDirection === 2) {
this.dotData.lineBottomLeft = 'M 0,0 281,0 281,-283'
}
}
if (val[0].activePowerPCS < -1) {
if (val[0].flowDirection === 1) {
this.dotData.lineBottomLeft = 'M 0,0 281,0 281,-283'
}
if (val[0].flowDirection === 2) {
this.dotData.lineBottomLeft = 'M 283,-281,283,0,0,0'
}
}
if (val[0].activePowerPCS === 0 || !val[0].activePowerPCS || (val[0].activePowerPCS > -1 && val[0].activePowerPCS < +1)) {
this.dotData.lineBottomLeft = ''
}
if (val[3].activePowerPCS > +1) {
if (val[3].flowDirection === 1) {
this.dotData.lineBottomRight = 'M -271,-281,-271,0,0,0'
}
if (val[3].flowDirection === 2) {
this.dotData.lineBottomRight = 'M 0,0 -271,0 -271,-283'
}
}
if (val[3].activePowerPCS < -1) {
if (val[3].flowDirection === 1) {
this.dotData.lineBottomRight = 'M 0,0 -271,0 -271,-283'
}
if (val[3].flowDirection === 2) {
this.dotData.lineBottomRight = 'M -271,-281,-271,0,0,0'
}
}
if (val[3].activePowerPCS === 0 || !val[3].activePowerPCS || (val[3].activePowerPCS > -1 && val[3].activePowerPCS < +1)) {
this.dotData.lineBottomRight = ''
}
},
async GetOpenStationMiddlePart() {
this.loading = true
try {
const params = {
stationId: this.stationId
}
const res = await GetOpenStationMiddlePart(params)
this.partList = res?.data
this.getFlowDirection(this.partList)
} finally {
this.loading = false
}
}
}
}
</script>
<style lang="scss" scoped>
.center-box {
width: 100%;
height: 100%;
}
@mixin move-round($duration, $delay) {
fill: none;
stroke-width: 5;
stroke-linejoin: round;
stroke-linecap: round;
stroke-dasharray: 3, 900;
stroke-dashoffset: 0;
animation: lineMove $duration $delay cubic-bezier(0, 0, 0.74, 0.74) infinite;
}
@keyframes lineMove {
0% {
stroke-dashoffset: -850;
}
100% {
stroke-dashoffset: -0;
}
}
.g-rect-fill-two {
@include move-round(3.5s, 1s);
}
</style>

334
src/views/dashboardtest/components/top-center/zzhb.vue Normal file
View File

@ -0,0 +1,334 @@
<template>
<ItemBox :title="$t('dashboard.stationTopo')" style="min-height: 560px;">
<div ref="svgLine" class="center-box">
<div v-loading="loading" class="img-box">
<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="166,72 650,72"
fill="none"
class="g-rect-path"
stroke-width="1"
stroke="#0094FF"
stroke-dasharray="3 3"
/>
<circle
cx="166"
cy="72"
r="8"
style="stroke: none; fill: url(#RadialGradient1)"
/>
<circle
cx="650"
cy="72"
r="8"
style="stroke: none; fill: url(#RadialGradient1)"
/>
<!-- center -->
<polyline
points="408,72 408,260"
fill="none"
class="g-rect-path"
stroke-width="1"
stroke="#0094FF"
stroke-dasharray="3 3"
/>
<polyline
points="408,114 455,114"
fill="none"
class="g-rect-path"
stroke-width="1"
stroke="#0094FF"
stroke-dasharray="3 3"
/>
<!-- //centerLeft -->
<polyline
points="267,335 406,335 406,293"
fill="none"
class="g-rect-path"
stroke-width="1"
stroke="#0094FF"
stroke-dasharray="3 3"
/>
<polyline
points="249,351 249,390"
fill="none"
class="g-rect-path"
stroke-width="1"
stroke="#0094FF"
stroke-dasharray="3 3"
/>
<!-- centerRight -->
<polyline
points="410,293 410,335 575,335 575,390"
fill="none"
class="g-rect-path"
stroke-width="1"
stroke="#0094FF"
stroke-dasharray="3 3"
/>
<!-- top -->
<!-- 图片和文字 -->
<!-- 电网 -->
<image
:xlink:href="gridImg"
x="95"
y="35"
width="53"
height="70"
/>
<text x="110" y="120" fill="#ffffff" font-size="14">
{{ $t("dashboard.grid") }}
</text>
<!-- {{ $t("dashboard.load") }} -->
<image
:xlink:href="chargingPileImg"
x="662"
y="38"
width="50"
height="60"
/>
<text x="672" y="120" fill="#ffffff" font-size="14"> {{ $t("dashboard.load") }}</text>
<!-- {{ $t("dashboard.ammeter") }} -->
<image
:xlink:href="ammeterImg"
x="455"
y="98"
width="32"
height="32"
/>
<text x="460" y="150" fill="#ffffff" font-size="14">
{{ $t("dashboard.ammeter") }}
</text>
<text x="493" y="120" fill="#ffffff" font-size="14">{{ $t("dashboard.power") }}(kW)：</text>
<text x="570" y="120" fill="#ffb800" font-size="14">
{{ partList.activePower }}
</text>
<!-- STS柜 -->
<image
:xlink:href="guiImg"
x="371"
y="140"
width="78"
height="78"
/>
<text x="394" y="230" fill="#ffffff" font-size="14">STS柜</text>
<text x="440" y="285" fill="#ffffff" font-size="14">{{ $t("dashboard.activePower") }}(kW)：</text>
<text x="535" y="285" fill="#ffb800" font-size="14">
{{ partList.activePowerPCS }}
</text>
<!-- ACDC -->
<image
:xlink:href="ACDCImg"
x="392"
y="263"
width="31"
height="31"
/>
<!-- <text x="268" y="280" fill="#ffffff" font-size="14">{{ $t("dashboard.activePower") }}(kW)：</text>
<text x="360" y="280" fill="#ffb800" font-size="14">
0
</text> -->
<!-- DCDC -->
<image
:xlink:href="DCImg"
x="235"
y="320"
width="31"
height="31"
/>
<!-- {{ $t("dashboard.photovoltaic") }} -->
<image
:xlink:href="frameImg"
x="229"
y="387"
width="48"
height="48"
/>
<text x="239" y="455" fill="#ffffff" font-size="14">
{{ $t("dashboard.photovoltaic") }}
</text>
<!-- <text x="129" y="405" fill="#ffffff" font-size="14">{{ $t("dashboard.workStatus") }}：</text>
<text x="195" y="405" fill="#ffb800" font-size="14">
0
</text> -->
<text x="99" y="420" fill="#ffffff" font-size="14">{{ $t("dashboard.activePower") }}(kW)：</text>
<text x="195" y="420" fill="#ffb800" font-size="14">
{{ partList.acActivePower }}
</text>
<!-- {{ $t("dashboard.battery") }} -->
<image
:xlink:href="cabinetImg"
x="551"
y="390"
width="48"
height="48"
/>
<text x="560" y="455" fill="#ffffff" font-size="14">
{{ $t("dashboard.battery") }}
</text>
<text x="609" y="405" fill="#ffffff" font-size="14">SOC(%)：</text>
<text x="670" y="405" fill="#ffb800" font-size="14">
{{ partList.soc }}
</text>
<text x="609" y="420" fill="#ffffff" font-size="14">SOH(%)：</text>
<text x="670" y="420" fill="#ffb800" font-size="14">
{{ partList.soh }}
</text>
</svg>
</div>
</div>
</ItemBox>
</template>
<script>
import gridImg from '@/assets/images/wxjd/grid.png'
import guiImg from '@/assets/images/wxjd/guiImg.png'
import ammeterImg from '@/assets/images/wxjd/ammeter.png'
import cabinetImg from '@/assets/images/wxjd/cabinet.png'
import chargingPileImg from '@/assets/images/home-office.png'
import frameImg from '@/assets/images/wxjd/frame.png'
import cangImg from '@/assets/images/home-cang.png'
import interverImg from '@/assets/images/wxjd/inverter.png'
import ACDCImg from '@/assets/images/wxjd/ACDC.png'
import DCImg from '@/assets/images/wxjd/DC.png'
import { GetZJHBStatus } 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,
interverImg,
cangImg,
frameImg,
ACDCImg,
DCImg,
guiImg,
dotData: {
lineLeft: 'M 0,0 0,0',
lineRight: 'M 0,0,0,82',
lineTopLeft: 'M 0,270,0,0',
lineTopRight: 'M 0,270,0,0'
},
partList: {},
loading: false,
activePowerTotal: ''
}
},
computed: {
},
watch: {},
created() { },
mounted() { },
methods: {
async getData() {
this.loading = true
const params = {
stationId: this.stationId
}
try {
const res = await GetZJHBStatus(params)
this.partList = res.data
} 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>