613 lines
18 KiB
Vue
613 lines
18 KiB
Vue
<template>
|
|
<itemBox
|
|
:title="title"
|
|
:title-id="titleId"
|
|
style="min-height: 560px"
|
|
@handleSaveTitle="saveDynamicConfigTitle"
|
|
>
|
|
<div slot="header">
|
|
<div class="header-right-box">
|
|
<el-dropdown @command="commandKey">
|
|
<span class="el-dropdown-link">
|
|
{{ `${(selectKey - 1) * 15 + 1}-${selectKey * 15}储能柜` }}<i class="el-icon-arrow-down el-icon--right" />
|
|
</span>
|
|
<el-dropdown-menu slot="dropdown">
|
|
<el-dropdown-item command="1">1-15储能柜</el-dropdown-item>
|
|
<el-dropdown-item command="2">16-30储能柜</el-dropdown-item>
|
|
<el-dropdown-item command="3">31-45储能柜</el-dropdown-item>
|
|
<el-dropdown-item command="4">46-60储能柜</el-dropdown-item>
|
|
<el-dropdown-item command="5">61-75储能柜</el-dropdown-item>
|
|
<el-dropdown-item command="6">76-90储能柜</el-dropdown-item>
|
|
<el-dropdown-item command="7">91-105储能柜</el-dropdown-item>
|
|
<el-dropdown-item command="8">106-120储能柜</el-dropdown-item>
|
|
</el-dropdown-menu>
|
|
</el-dropdown>
|
|
|
|
</div>
|
|
</div>
|
|
<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 1080 598"
|
|
>
|
|
<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>
|
|
<g transform="scale(0.75 0.8) translate(0,-30)">
|
|
<image :xlink:href="gridImg" x="20" y="40" width="70" height="70" />
|
|
<text x="40" y="120" fill="#ffffff" font-size="12">电网</text>
|
|
|
|
<polyline
|
|
points="85,55 300,55 300,200 400,200 400,55 1400,55"
|
|
fill="none"
|
|
class="g-rect-path"
|
|
stroke-width="2"
|
|
stroke="#0094FF"
|
|
/>
|
|
<polyline
|
|
points="85,55 310,55"
|
|
fill="none"
|
|
class="g-rect-path"
|
|
stroke-width="2"
|
|
stroke="#0094FF"
|
|
/>
|
|
<polyline
|
|
points="300,200 300,55"
|
|
fill="none"
|
|
class="g-rect-path"
|
|
stroke-width="1"
|
|
stroke="#0094FF"
|
|
/>
|
|
<polyline
|
|
points="400,200 400,55"
|
|
fill="none"
|
|
class="g-rect-path"
|
|
stroke-width="1"
|
|
stroke="#0094FF"
|
|
/>
|
|
<polyline
|
|
points="300,200 400,200"
|
|
fill="none"
|
|
class="g-rect-path"
|
|
stroke-width="1"
|
|
stroke="#0094FF"
|
|
/>
|
|
<polyline
|
|
points="390,55 1300,55"
|
|
fill="none"
|
|
class="g-rect-path"
|
|
stroke-width="2"
|
|
stroke="#0094FF"
|
|
/>
|
|
|
|
<polyline
|
|
points="200,115 300,115"
|
|
fill="none"
|
|
class="g-rect-path"
|
|
stroke="#0094FF"
|
|
stroke-dasharray="3 3"
|
|
/>
|
|
<image
|
|
:xlink:href="ammeterImg"
|
|
x="140"
|
|
y="90"
|
|
width="70"
|
|
height="50"
|
|
style="cursor: pointer"
|
|
@click="lookDeviceDetail(`${selectKey}-120Tuopu-4-ammeter`)"
|
|
/>
|
|
<text x="145" y="160" fill="#ffffff" font-size="14">防逆流电表</text>
|
|
<g v-for="(item, index) in ammeter_4" :key="item.id">
|
|
<text x="140" :y="175 + 20 * index" fill="#fff" font-size="14">
|
|
{{ item.name }}
|
|
</text>
|
|
<text
|
|
:x="countChineseAndEnglishCharacters(item.name, 140)"
|
|
:y="175 + 20 * index"
|
|
fill="#FFB800"
|
|
font-size="14"
|
|
>
|
|
{{ item.value }}
|
|
</text>
|
|
</g>
|
|
<image :xlink:href="AY" x="895" y="180" width="70" height="50" />
|
|
|
|
<polyline
|
|
points="930,230 930,510"
|
|
fill="none"
|
|
class="g-rect-path"
|
|
stroke="#0094FF"
|
|
stroke-width="1"
|
|
/>
|
|
<polyline
|
|
points="930,55 930,180"
|
|
fill="none"
|
|
class="g-rect-path"
|
|
stroke="#0094FF"
|
|
stroke-width="1"
|
|
/>
|
|
|
|
<rect
|
|
x="60"
|
|
y="510"
|
|
width="1375"
|
|
height="140"
|
|
rx="3"
|
|
:style="{ fill: 'transparent', stroke: '#FFFFFF' }"
|
|
/>
|
|
|
|
<polyline
|
|
points="930,260 1060,260"
|
|
fill="none"
|
|
class="g-rect-path"
|
|
stroke="#0094FF"
|
|
stroke-dasharray="3 3"
|
|
/>
|
|
|
|
<image
|
|
:xlink:href="ammeterImg"
|
|
x="1020"
|
|
y="240"
|
|
width="70"
|
|
height="50"
|
|
style="cursor: pointer;"
|
|
@click="lookDeviceDetail(`${selectKey}-120Tuopu-3-ammeter`)"
|
|
/>
|
|
<text x="1020" y="305" fill="#ffffff" font-size="14">计量电表</text>
|
|
<g v-for="(item,index) in ammeter_3" :key="item.id">
|
|
<text x="1110" :y="220 + ( 20 * index)" fill="#ffffff" font-size="14">
|
|
{{ item.name }}
|
|
</text>
|
|
<text :x="countChineseAndEnglishCharacters(item.name,1110)" :y="220 + ( 20 * index)" fill="#FFB800" font-size="14">
|
|
{{ item.value }}
|
|
</text>
|
|
</g>
|
|
|
|
<rect
|
|
x="395"
|
|
y="140"
|
|
width="12"
|
|
height="22"
|
|
:style="{
|
|
fill: break_1.length ? getBreakColor(break_1[0].value) : '#888888',
|
|
stroke: 'transparent',
|
|
cursor: 'pointer',
|
|
}"
|
|
@click="lookDeviceDetail(`${selectKey}-120Tuopu-1-break`)"
|
|
/>
|
|
|
|
<g transform="translate(0,110)">
|
|
<text x="10" y="565" fill="#ffffff" font-size="14">工作状态</text>
|
|
<text x="10" y="590" fill="#ffffff" font-size="14">有功功率(kW)</text>
|
|
<text x="10" y="615" fill="#ffffff" font-size="14">
|
|
SOC(%)
|
|
</text>
|
|
<text x="10" y="640" fill="#ffffff" font-size="14">SOH(%)</text>
|
|
|
|
<g transform="translate(50,90)">
|
|
<g v-for="item in 15" :key="item">
|
|
<text :x="55 + (item - 1) * 90" y="368" fill="#ffffff" font-size="14">{{ (selectKey - 1) * 15 + item }}储能柜</text>
|
|
<image
|
|
:xlink:href="cabinetImg"
|
|
:x="55 + (item - 1) * 90"
|
|
y="383"
|
|
width="60"
|
|
height="60"
|
|
style="cursor: pointer"
|
|
@click="lookDeviceDetail(`${selectKey}-120Tuopu-${item}-pcs`)"
|
|
/>
|
|
<text :x="65 + (item - 1) * 90" y="475" fill="#FFB800" font-size="14">
|
|
{{ getPcsDataValue(item, 0) }}
|
|
</text>
|
|
<text :x="65 + (item - 1) * 90" y="500" fill="#FFB800" font-size="14">
|
|
{{ getPcsDataValue(item, 1) }}
|
|
</text>
|
|
<text :x="65 + (item - 1) * 90" y="525" fill="#FFB800" font-size="14">
|
|
{{ getPcsDataValue(item, 2) }}
|
|
</text>
|
|
<text :x="65 + (item - 1) * 90" y="550" fill="#FFB800" font-size="14">
|
|
{{ getPcsDataValue(item, 3) }}
|
|
</text>
|
|
</g>
|
|
|
|
</g>
|
|
</g>
|
|
</g>
|
|
</svg>
|
|
|
|
</div>
|
|
</div>
|
|
<dispositionPointDialog
|
|
is-topology
|
|
:show-div-location="true"
|
|
:max-length="12"
|
|
:page-location="pageLocation"
|
|
:visible="show_point_dispostion"
|
|
@close="closePoint"
|
|
@getData="getDynamicPointData"
|
|
/>
|
|
</itemBox>
|
|
</template>
|
|
<script>
|
|
import itemBox from '../itemBox/position.vue'
|
|
import { DynamicConfigPoint } from '@/api/home-page/index'
|
|
import cabinetImg from '@/assets/images/wxjd/cabinet.png'
|
|
import chargingPileImg from '@/assets/images/home-office.png'
|
|
import gridImg from '@/assets/images/wxjd/grid.png'
|
|
import AY from '@/assets/images/wxjd/AY.png'
|
|
import ammeterImg from '@/assets/images/wxjd/ammeter.png'
|
|
import FrameImg from '@/assets/images/wxjd/frame.png'
|
|
import {
|
|
QueryDynamicConfigTitle,
|
|
AddDynamicConfigTitle
|
|
} from '@/api/test-management/index'
|
|
export default {
|
|
components: { itemBox },
|
|
props: {
|
|
stationId: {
|
|
type: Number,
|
|
default: 0
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
pageLocation: 'top',
|
|
permissionId: null,
|
|
loading: false,
|
|
moveX: 0,
|
|
moveY: 0,
|
|
tabPosition: 1,
|
|
show_point_dispostion: false,
|
|
title: '站点拓扑',
|
|
titleId: null,
|
|
gridImg,
|
|
ammeterImg,
|
|
AY,
|
|
FrameImg,
|
|
cabinetImg,
|
|
chargingPileImg,
|
|
allData: [],
|
|
pcsData_1: [],
|
|
pcsData_2: [],
|
|
pcsData_3: [],
|
|
pcsData_4: [],
|
|
pcsData_5: [],
|
|
pcsData_6: [],
|
|
pcsData_7: [],
|
|
pcsData_8: [],
|
|
pcsData_9: [],
|
|
pcsData_10: [],
|
|
pcsData_11: [],
|
|
pcsData_12: [],
|
|
pcsData_13: [],
|
|
pcsData_14: [],
|
|
pcsData_15: [],
|
|
ammeter_1: [],
|
|
ammeter_2: [],
|
|
ammeter_3: [],
|
|
ammeter_4: [],
|
|
break_1: [],
|
|
selectKey: '1'
|
|
}
|
|
},
|
|
computed: {
|
|
currentStation() {
|
|
return this.$store.getters.currentStation || undefined
|
|
}
|
|
},
|
|
watch: {
|
|
|
|
currentStation: {
|
|
handler(val) {
|
|
if (val && val.id) {
|
|
if (this.$store.getters.menuList.length) {
|
|
this.permissionId = this.$store.getters.menuList.find((item) => {
|
|
return item.url === this.$route.path
|
|
}).id
|
|
}
|
|
this.queryDynamicConfigTitle()
|
|
}
|
|
},
|
|
deep: true,
|
|
immediate: true
|
|
}
|
|
},
|
|
created() {
|
|
if (this.$store.getters.menuList.length) {
|
|
this.permissionId = this.$store.getters.menuList.find((item) => {
|
|
return item.url === this.$route.path
|
|
}).id
|
|
}
|
|
this.queryDynamicConfigTitle()
|
|
},
|
|
methods: {
|
|
commandKey(item) {
|
|
this.selectKey = item
|
|
this.getPcsData()
|
|
// console.log(item)
|
|
},
|
|
async saveDynamicConfigTitle(title, id) {
|
|
await AddDynamicConfigTitle({
|
|
name: title,
|
|
id: id,
|
|
stationId: this.stationId,
|
|
pageLocation: '120_topCenter_title',
|
|
permissionId: this.permissionId
|
|
})
|
|
this.queryDynamicConfigTitle()
|
|
},
|
|
async queryDynamicConfigTitle() {
|
|
const { data } = await QueryDynamicConfigTitle({
|
|
stationId: this.stationId,
|
|
pageLocation: '120_topCenter_title',
|
|
permissionId: this.permissionId
|
|
})
|
|
this.title = data.length ? data[0].name : '站点拓扑'
|
|
this.titleId = data.length ? data[0].id : undefined
|
|
},
|
|
changeTab(val) {
|
|
this.tabPosition = val
|
|
this.$nextTick(() => {
|
|
this.getData()
|
|
})
|
|
},
|
|
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.pcsData_8 = []
|
|
this.pcsData_9 = []
|
|
this.pcsData_10 = []
|
|
this.pcsData_11 = []
|
|
this.pcsData_12 = []
|
|
this.pcsData_13 = []
|
|
this.pcsData_14 = []
|
|
this.pcsData_15 = []
|
|
this.ammeter_1 = []
|
|
this.ammeter_2 = []
|
|
this.ammeter_3 = []
|
|
this.ammeter_4 = []
|
|
this.break_1 = []
|
|
if (res.data.length) {
|
|
res.data.forEach((item) => {
|
|
if (item.pageLocation === `${this.selectKey}-120Tuopu-1-pcs`) {
|
|
this.pcsData_1.push(item)
|
|
} else if (item.pageLocation === `${this.selectKey}-120Tuopu-2-pcs`) {
|
|
this.pcsData_2.push(item)
|
|
} else if (item.pageLocation === `${this.selectKey}-120Tuopu-3-pcs`) {
|
|
this.pcsData_3.push(item)
|
|
} else if (item.pageLocation === `${this.selectKey}-120Tuopu-4-pcs`) {
|
|
this.pcsData_4.push(item)
|
|
} else if (item.pageLocation === `${this.selectKey}-120Tuopu-5-pcs`) {
|
|
this.pcsData_5.push(item)
|
|
} else if (item.pageLocation === `${this.selectKey}-120Tuopu-6-pcs`) {
|
|
this.pcsData_6.push(item)
|
|
} else if (item.pageLocation === `${this.selectKey}-120Tuopu-7-pcs`) {
|
|
this.pcsData_7.push(item)
|
|
} else if (item.pageLocation === `${this.selectKey}-120Tuopu-8-pcs`) {
|
|
this.pcsData_8.push(item)
|
|
} else if (item.pageLocation === `${this.selectKey}-120Tuopu-9-pcs`) {
|
|
this.pcsData_9.push(item)
|
|
} else if (item.pageLocation === `${this.selectKey}-120Tuopu-10-pcs`) {
|
|
this.pcsData_10.push(item)
|
|
} else if (item.pageLocation === `${this.selectKey}-120Tuopu-11-pcs`) {
|
|
this.pcsData_11.push(item)
|
|
} else if (item.pageLocation === `${this.selectKey}-120Tuopu-12-pcs`) {
|
|
this.pcsData_12.push(item)
|
|
} else if (item.pageLocation === `${this.selectKey}-120Tuopu-13-pcs`) {
|
|
this.pcsData_13.push(item)
|
|
} else if (item.pageLocation === `${this.selectKey}-120Tuopu-14-pcs`) {
|
|
this.pcsData_14.push(item)
|
|
} else if (item.pageLocation === `${this.selectKey}-120Tuopu-15-pcs`) {
|
|
this.pcsData_15.push(item)
|
|
} else if (item.pageLocation === `${this.selectKey}-120Tuopu-1-ammeter`) {
|
|
this.ammeter_1.push(item)
|
|
} else if (item.pageLocation === `${this.selectKey}-120Tuopu-2-ammeter`) {
|
|
this.ammeter_2.push(item)
|
|
} else if (item.pageLocation === `${this.selectKey}-120Tuopu-3-ammeter`) {
|
|
this.ammeter_3.push(item)
|
|
} else if (item.pageLocation === `${this.selectKey}-120Tuopu-4-ammeter`) {
|
|
this.ammeter_4.push(item)
|
|
} else if (item.pageLocation === `${this.selectKey}-120Tuopu-1-break`) {
|
|
this.break_1.push(item)
|
|
}
|
|
})
|
|
}
|
|
// this.allData = res.data
|
|
} catch (error) {
|
|
// console.log(error);
|
|
} finally {
|
|
this.loading = false
|
|
}
|
|
},
|
|
getPcsDataValue(item, index) {
|
|
const dataKey = `pcsData_${item}`
|
|
console.log(this[dataKey], dataKey)
|
|
|
|
return this[dataKey] && this[dataKey].length > index ? this[dataKey][index].value : ''
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
.center-box {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
.scale-icon {
|
|
color: #fff;
|
|
}
|
|
@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);
|
|
}
|
|
.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: HYQY;
|
|
|
|
&.active {
|
|
color: #ffffff;
|
|
background: linear-gradient(
|
|
90deg,
|
|
rgba(0, 148, 255, 0) 0%,
|
|
rgba(0, 148, 255, 0.43) 51%,
|
|
rgba(0, 148, 255, 0) 99%
|
|
);
|
|
}
|
|
}
|
|
}
|
|
.el-dropdown-link {
|
|
cursor: pointer;
|
|
color: #ffffff;
|
|
white-space: nowrap;
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
letter-spacing: 0em;
|
|
color: #ffffff;
|
|
padding: 0 10px;
|
|
cursor: pointer;
|
|
font-family: HYQY;
|
|
// background: linear-gradient(
|
|
// 90deg,
|
|
// rgba(0, 148, 255, 0) 0%,
|
|
// rgba(0, 148, 255, 0.43) 51%,
|
|
// rgba(0, 148, 255, 0) 99%
|
|
// );
|
|
}
|
|
.el-icon-arrow-down {
|
|
font-size: 12px;
|
|
}
|
|
</style>
|