中自120汇一
This commit is contained in:
Shang Chen
612
src/views/dashboard-zhongzi/components/top-right/index.vue
Normal file
612
src/views/dashboard-zhongzi/components/top-right/index.vue
Normal file
@ -0,0 +1,612 @@
|
||||
<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>
|
||||
Reference in New Issue
Block a user