中自120汇一
This commit is contained in:
Shang Chen
@ -99,6 +99,18 @@ export const constantRoutes = [
|
|||||||
}
|
}
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
path: '/dashboard-zhongzi',
|
||||||
|
component: Layout,
|
||||||
|
children: [
|
||||||
|
{
|
||||||
|
path: 'dashboard-zhongzi',
|
||||||
|
component: () => import('@/views/dashboard-zhongzi/index.vue'),
|
||||||
|
name: 'dashboard-zhongzi',
|
||||||
|
meta: { title: 'dashboard-zhongzi', icon: 'dashboard', affix: true }
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
|
||||||
{ path: '*', redirect: '/404', hidden: true }
|
{ path: '*', redirect: '/404', hidden: true }
|
||||||
]
|
]
|
||||||
|
|||||||
289
src/views/dashboard-zhongzi/components/bottom-left/index.vue
Normal file
289
src/views/dashboard-zhongzi/components/bottom-left/index.vue
Normal file
@ -0,0 +1,289 @@
|
|||||||
|
<template>
|
||||||
|
<div class="bottom-left-wrapper">
|
||||||
|
<itemBox :title="$t('dashboard.chargingDischarging')">
|
||||||
|
<div slot="header">
|
||||||
|
<div class="header-right-box">
|
||||||
|
<div class="header-title" :class="{'active':currentType === 'day'}" @click="selectTime('day')">{{ $t('dashboard.sevenDay') }}</div>
|
||||||
|
<div class="header-title" :class="{'active':currentType === 'month'}" @click="selectTime('month')">{{ $t('dashboard.monthDay') }}</div>
|
||||||
|
<div class="header-title" :class="{'active':currentType === 'year'}" @click="selectTime('year')">{{ $t('dashboard.yearDay') }}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div v-loading="loading" class="charts-box">
|
||||||
|
<Chart :options="powerOptions" :class-name="'chart'" />
|
||||||
|
</div>
|
||||||
|
</itemBox>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import itemBox from '../itemBox/index.vue'
|
||||||
|
import * as echarts from 'echarts'
|
||||||
|
import { GetPCSElecData } from '@/api/home-page/index'
|
||||||
|
import { GetIncomeData } from '@/api/home-page/index'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: 'Index',
|
||||||
|
components: { itemBox },
|
||||||
|
props: {
|
||||||
|
stationId: {
|
||||||
|
type: Number,
|
||||||
|
default: undefined
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
powerOptions: undefined,
|
||||||
|
currentType: 'day',
|
||||||
|
x_data: [],
|
||||||
|
charge_data: [],
|
||||||
|
discharge_data: [],
|
||||||
|
benefit_data: [],
|
||||||
|
color: ['#00b7ec', '#FFB800', '#ffb800'],
|
||||||
|
loading: false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
computed: {},
|
||||||
|
watch: {},
|
||||||
|
created() {},
|
||||||
|
mounted() {
|
||||||
|
// this.initCharts()
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
selectTime(type) {
|
||||||
|
this.currentType = type
|
||||||
|
this.getData()
|
||||||
|
},
|
||||||
|
getData() {
|
||||||
|
this.getElecData()
|
||||||
|
// this.getIncomeData()
|
||||||
|
},
|
||||||
|
async getElecData() {
|
||||||
|
this.loading = true
|
||||||
|
const params = {
|
||||||
|
stationId: this.stationId,
|
||||||
|
type: this.currentType
|
||||||
|
}
|
||||||
|
try {
|
||||||
|
const res = await GetPCSElecData(params)
|
||||||
|
this.initCharts(res.data, 1)
|
||||||
|
} catch (error) {
|
||||||
|
// console.log(error)
|
||||||
|
} finally {
|
||||||
|
this.loading = false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
async getIncomeData() {
|
||||||
|
const params = {
|
||||||
|
stationId: this.stationId,
|
||||||
|
type: this.currentType
|
||||||
|
}
|
||||||
|
const res = await GetIncomeData(params)
|
||||||
|
this.initCharts(res.data, 2)
|
||||||
|
},
|
||||||
|
initCharts(val, type) {
|
||||||
|
const self = this
|
||||||
|
|
||||||
|
if (val && val.length > 0) {
|
||||||
|
self.x_data = []
|
||||||
|
self.charge_data = []
|
||||||
|
self.discharge_data = []
|
||||||
|
|
||||||
|
if (type === 1) {
|
||||||
|
self.x_data = []
|
||||||
|
self.charge_data = []
|
||||||
|
self.discharge_data = []
|
||||||
|
val.forEach(item => {
|
||||||
|
self.x_data.push(item.date)
|
||||||
|
self.charge_data.push(item.chargeElec)
|
||||||
|
self.discharge_data.push(item.dischargeElec)
|
||||||
|
})
|
||||||
|
} else {
|
||||||
|
self.benefit_data = []
|
||||||
|
val.forEach(item => {
|
||||||
|
self.benefit_data.push(item.data)
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
this.powerOptions = {
|
||||||
|
grid: {
|
||||||
|
top: '25%',
|
||||||
|
left: '10%',
|
||||||
|
right: '10%',
|
||||||
|
bottom: '5%',
|
||||||
|
containLabel: true
|
||||||
|
},
|
||||||
|
legend: {},
|
||||||
|
tooltip: {
|
||||||
|
trigger: 'axis',
|
||||||
|
backgroundColor: 'rgba(0,0,0,0,)',
|
||||||
|
borderColor: 'rgba(0,0,0,0,);',
|
||||||
|
borderWidth: 0,
|
||||||
|
textStyle: {
|
||||||
|
width: 160,
|
||||||
|
height: 250,
|
||||||
|
lineHeight: 24,
|
||||||
|
color: '#ffffff',
|
||||||
|
fontSize: '14',
|
||||||
|
fontFamily: 'SourceHanSansCN-Normal'
|
||||||
|
},
|
||||||
|
formatter: params => {
|
||||||
|
// 获取xAxis data中的数据
|
||||||
|
let dataStr = `<div><p style="font-weight:bold;margin:0 8px 15px;">${params[0].name}</p></div>`
|
||||||
|
params.forEach(item => {
|
||||||
|
dataStr += `<div>
|
||||||
|
<div style="margin: 0 8px;">
|
||||||
|
<span style="display:inline-block;margin-right:5px;width:10px;height:10px;background-color:${this.color[item.componentIndex]};"></span>
|
||||||
|
<span>${item.seriesName}</span>
|
||||||
|
<span style="float:right;color:#00C8FF;margin-left:20px;">${item.data}</span>
|
||||||
|
</div>
|
||||||
|
</div>`
|
||||||
|
})
|
||||||
|
const div = `<div style='border: 1px solid ;
|
||||||
|
border-image: linear-gradient(130deg, #FFFFFF 0%, rgba(201,255,243,0.00) 22%, rgba(201,255,243,0.00) 75%, rgba(201,255,243,0.00) 80%, #FFFFFF 99%, #FFFFFF 99%) 1;
|
||||||
|
box-shadow: inset 0px 2px 16px 0px rgba(0, 148, 255, 0.4);' >${dataStr}</div>`
|
||||||
|
return div
|
||||||
|
}
|
||||||
|
},
|
||||||
|
xAxis: [
|
||||||
|
{
|
||||||
|
type: 'category',
|
||||||
|
data: self.x_data,
|
||||||
|
axisLine: {
|
||||||
|
show: true,
|
||||||
|
lineStyle: {
|
||||||
|
color: '#90e9d8'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
axisLabel: {
|
||||||
|
show: true,
|
||||||
|
color: '#CEEBFF'
|
||||||
|
},
|
||||||
|
|
||||||
|
axisTick: {
|
||||||
|
show: false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
],
|
||||||
|
yAxis: [
|
||||||
|
{
|
||||||
|
type: 'value',
|
||||||
|
name: `${this.$t('dashboard.chargingandDischarging')}(kWh)`,
|
||||||
|
nameTextStyle: {
|
||||||
|
color: ' rgba(255, 255, 255, 0.5)'
|
||||||
|
},
|
||||||
|
axisLine: {
|
||||||
|
show: false,
|
||||||
|
lineStyle: {
|
||||||
|
color: '#90e9d8'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
axisLabel: {
|
||||||
|
show: true,
|
||||||
|
color: '#CEEBFF'
|
||||||
|
},
|
||||||
|
|
||||||
|
axisTick: {
|
||||||
|
show: false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// {
|
||||||
|
// type: 'value',
|
||||||
|
// name: '收益(万元)',
|
||||||
|
// nameTextStyle: {
|
||||||
|
// color: '#FFB800'
|
||||||
|
// },
|
||||||
|
// axisLine: {
|
||||||
|
// show: false,
|
||||||
|
// lineStyle: {
|
||||||
|
// color: '#FFB800'
|
||||||
|
// }
|
||||||
|
// },
|
||||||
|
// axisLabel: {
|
||||||
|
// show: true,
|
||||||
|
// color: '#FFB800'
|
||||||
|
// },
|
||||||
|
|
||||||
|
// axisTick: {
|
||||||
|
// show: false
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
],
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name: `${this.$t('dashboard.charging')}`,
|
||||||
|
type: 'bar',
|
||||||
|
data: self.charge_data,
|
||||||
|
// barWidth: 14, // 柱状图的宽度
|
||||||
|
color: '#00C8FF',
|
||||||
|
itemStyle: {
|
||||||
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||||
|
{ offset: 0, color: 'rgba(0,200,255,0.90)' },
|
||||||
|
{ offset: 1, color: 'rgba(0, 200, 255, 0.0)' }
|
||||||
|
])
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: `${this.$t('dashboard.disCharging')}`,
|
||||||
|
type: 'bar',
|
||||||
|
data: self.discharge_data,
|
||||||
|
// barWidth: 14, // 柱状图的宽度
|
||||||
|
color: '#CEEBFF',
|
||||||
|
itemStyle: {
|
||||||
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||||
|
{ offset: 0, color: 'rgba(255, 184, 0,0.90)' },
|
||||||
|
{ offset: 1, color: 'rgba(255, 184, 0,0.00)' }
|
||||||
|
])
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// {
|
||||||
|
// name: '收益',
|
||||||
|
// type: 'line',
|
||||||
|
// yAxisIndex: 1,
|
||||||
|
// data: self.benefit_data,
|
||||||
|
// color: '#FFB800',
|
||||||
|
// itemStyle: {
|
||||||
|
// normal: {
|
||||||
|
// lineStyle: {
|
||||||
|
// width: 2
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.bottom-left-wrapper {
|
||||||
|
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: HYQY;
|
||||||
|
|
||||||
|
&.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%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.charts-box {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
293
src/views/dashboard-zhongzi/components/bottom-right/index.vue
Normal file
293
src/views/dashboard-zhongzi/components/bottom-right/index.vue
Normal file
@ -0,0 +1,293 @@
|
|||||||
|
<template>
|
||||||
|
<div class="bottom-left-wrapper">
|
||||||
|
<itemBox title="运行曲线" :show-curve-setting="true" @handleSetting="handleSetting">
|
||||||
|
<div v-loading="loading" class="charts-box">
|
||||||
|
<Chart :options="runOptions" :class-name="'chart'" />
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</itemBox>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import itemBox from '../itemBox/index.vue'
|
||||||
|
import Chart from '@/components/Charts'
|
||||||
|
import { GetDynamicRealtimeCurve } from '@/api/home-page/index'
|
||||||
|
import * as echarts from 'echarts'
|
||||||
|
import { chartYIndex } from '@/utils/index'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: 'Index',
|
||||||
|
components: { itemBox, Chart },
|
||||||
|
props: {
|
||||||
|
stationId: {
|
||||||
|
type: Number,
|
||||||
|
default: 0
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
runOptions: undefined,
|
||||||
|
serviceList: [],
|
||||||
|
nameArr: [],
|
||||||
|
color: [],
|
||||||
|
color2: [[{
|
||||||
|
offset: 0.0,
|
||||||
|
color: 'rgba(206, 235, 255, 0.1)'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
offset: 1,
|
||||||
|
color: 'rgba(206, 235, 255, 0.2)'
|
||||||
|
}], [
|
||||||
|
{
|
||||||
|
offset: 0.0,
|
||||||
|
color: 'rgba(255, 184, 0, 0.1)'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
offset: 1,
|
||||||
|
color: 'rgba(255, 184, 0, 0.2)'
|
||||||
|
}
|
||||||
|
]],
|
||||||
|
loading: false,
|
||||||
|
permissionId: null
|
||||||
|
}
|
||||||
|
},
|
||||||
|
computed: {},
|
||||||
|
watch: {},
|
||||||
|
created() {
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
// this.initCharts()
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
handleSetting() {
|
||||||
|
this.$emit('handleSetting')
|
||||||
|
},
|
||||||
|
async getData() {
|
||||||
|
if (this.$store.getters.menuList.length) {
|
||||||
|
this.permissionId = this.$store.getters.menuList.find(item => {
|
||||||
|
return item.url === this.$route.path
|
||||||
|
}).id
|
||||||
|
}
|
||||||
|
this.loading = true
|
||||||
|
const params = {
|
||||||
|
stationId: this.stationId,
|
||||||
|
pageLocation: 'runChart',
|
||||||
|
permissionId: this.permissionId
|
||||||
|
}
|
||||||
|
try {
|
||||||
|
const res = await GetDynamicRealtimeCurve(params)
|
||||||
|
if (res.data) {
|
||||||
|
this.initCharts(res.data)
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
// console.log(error)
|
||||||
|
} finally {
|
||||||
|
this.loading = false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
initCharts(val) {
|
||||||
|
const x_data = []
|
||||||
|
const valueArr = []
|
||||||
|
this.nameArr = []
|
||||||
|
if (val && val.length > 0) {
|
||||||
|
val.forEach((item, index) => {
|
||||||
|
valueArr.push(item.list)
|
||||||
|
this.nameArr.push(item.name)
|
||||||
|
})
|
||||||
|
val[0].list.forEach((el) => {
|
||||||
|
x_data.push(el.date)
|
||||||
|
})
|
||||||
|
const valueArr2 = []
|
||||||
|
valueArr.forEach((item, index) => {
|
||||||
|
const arr = []
|
||||||
|
item.forEach((item2, index2) => {
|
||||||
|
arr.push(item2.digital)
|
||||||
|
valueArr2[index] = arr
|
||||||
|
})
|
||||||
|
})
|
||||||
|
this.serviceList = []
|
||||||
|
valueArr2.forEach((item, index) => {
|
||||||
|
this.serviceList.push({
|
||||||
|
data: item,
|
||||||
|
type: 'line',
|
||||||
|
name: this.nameArr[index],
|
||||||
|
showSymbol: false,
|
||||||
|
yAxisIndex: chartYIndex(val[index]),
|
||||||
|
color: this.color[index],
|
||||||
|
lineStyle: {
|
||||||
|
color: this.color[index]
|
||||||
|
},
|
||||||
|
areaStyle: {
|
||||||
|
color: new echarts.graphic.LinearGradient(0, 1, 0, 0, this.color2[index])
|
||||||
|
}
|
||||||
|
})
|
||||||
|
})
|
||||||
|
this.runOptions = {
|
||||||
|
grid: {
|
||||||
|
top: '25%',
|
||||||
|
left: '5%',
|
||||||
|
right: '3%',
|
||||||
|
bottom: '5%',
|
||||||
|
containLabel: true
|
||||||
|
},
|
||||||
|
tooltip: {
|
||||||
|
trigger: 'axis',
|
||||||
|
backgroundColor: 'rgba(0,0,0,0,)',
|
||||||
|
borderColor: 'rgba(0,0,0,0,);',
|
||||||
|
borderWidth: 0,
|
||||||
|
textStyle: {
|
||||||
|
width: 160,
|
||||||
|
height: 250,
|
||||||
|
lineHeight: 24,
|
||||||
|
color: '#ffffff',
|
||||||
|
fontSize: '14',
|
||||||
|
fontFamily: 'SourceHanSansCN-Normal'
|
||||||
|
},
|
||||||
|
formatter: params => {
|
||||||
|
// 获取xAxis data中的数据
|
||||||
|
let dataStr = `<div><p style="font-weight:bold;margin:0 8px 15px;">${params[0].name}</p></div>`
|
||||||
|
params.forEach(item => {
|
||||||
|
dataStr += `<div>
|
||||||
|
<div style="margin: 0 8px;">
|
||||||
|
<span style="display:inline-block;margin-right:5px;width:10px;height:10px;background-color:${item.color};"></span>
|
||||||
|
<span>${item.seriesName}</span>
|
||||||
|
<span style="float:right;color:#00C8FF;margin-left:20px;">${item.data === null ? '' : item.data}</span>
|
||||||
|
</div>
|
||||||
|
</div>`
|
||||||
|
})
|
||||||
|
const div = `<div style='border: 1px solid ;
|
||||||
|
border-image: linear-gradient(130deg, #FFFFFF 0%, rgba(201,255,243,0.00) 22%, rgba(201,255,243,0.00) 75%, rgba(201,255,243,0.00) 80%, #FFFFFF 99%, #FFFFFF 99%) 1;
|
||||||
|
box-shadow: inset 0px 2px 16px 0px rgba(0, 148, 255, 0.4);' >${dataStr}</div>`
|
||||||
|
return div
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
legend: {
|
||||||
|
type: 'scroll',
|
||||||
|
top: 20,
|
||||||
|
bottom: 20,
|
||||||
|
padding: [0, 180],
|
||||||
|
icon: 'circle',
|
||||||
|
align: 'left',
|
||||||
|
itemWidth: 10,
|
||||||
|
itemHeight: 8,
|
||||||
|
itemGap: 15,
|
||||||
|
textStyle: {
|
||||||
|
color: '#fff',
|
||||||
|
rich: {
|
||||||
|
name: {
|
||||||
|
fontSize: 12,
|
||||||
|
color: '#ffffff',
|
||||||
|
padding: [0, 10, 0, 0]
|
||||||
|
},
|
||||||
|
num: {
|
||||||
|
fontSize: 16,
|
||||||
|
color: '#ffffff'
|
||||||
|
},
|
||||||
|
unit: {
|
||||||
|
fontSize: 16,
|
||||||
|
color: '#ffffff'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
},
|
||||||
|
xAxis: {
|
||||||
|
data: x_data,
|
||||||
|
axisLine: {
|
||||||
|
show: true,
|
||||||
|
lineStyle: {
|
||||||
|
color: '#90e9d8'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
axisLabel: {
|
||||||
|
show: true,
|
||||||
|
color: '#CEEBFF'
|
||||||
|
},
|
||||||
|
|
||||||
|
axisTick: {
|
||||||
|
show: false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
yAxis: [{
|
||||||
|
name: '功率（kW）',
|
||||||
|
type: 'value',
|
||||||
|
nameTextStyle: {
|
||||||
|
color: ' rgba(255, 255, 255, 0.5)'
|
||||||
|
},
|
||||||
|
axisLine: {
|
||||||
|
show: false,
|
||||||
|
lineStyle: {
|
||||||
|
color: '#90e9d8'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
axisLabel: {
|
||||||
|
show: true,
|
||||||
|
color: '#CEEBFF'
|
||||||
|
},
|
||||||
|
|
||||||
|
axisTick: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
min: function(value) {
|
||||||
|
return Math.floor((Math.abs(value.min) < value.max ? -value.max * 1.05 : value.min * 1.05).toFixed(2))
|
||||||
|
},
|
||||||
|
max: function(value) {
|
||||||
|
return Math.ceil((Math.abs(value.min) < value.max ? value.max * 1.05 : -value.min * 1.05).toFixed(2))
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'SOC(%)',
|
||||||
|
type: 'value',
|
||||||
|
max: 100,
|
||||||
|
min: -100,
|
||||||
|
ming: 0,
|
||||||
|
nameTextStyle: {
|
||||||
|
color: ' rgba(255, 255, 255, 0.5)'
|
||||||
|
},
|
||||||
|
axisLine: {
|
||||||
|
show: false,
|
||||||
|
lineStyle: {
|
||||||
|
color: '#90e9d8'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
axisLabel: {
|
||||||
|
show: true,
|
||||||
|
color: '#CEEBFF'
|
||||||
|
},
|
||||||
|
|
||||||
|
axisTick: {
|
||||||
|
show: false
|
||||||
|
}
|
||||||
|
|
||||||
|
}],
|
||||||
|
series: this.serviceList
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
this.runOptions = {
|
||||||
|
title: {
|
||||||
|
text: '暂无数据',
|
||||||
|
x: 'center',
|
||||||
|
y: 'center',
|
||||||
|
textStyle: {
|
||||||
|
fontSize: 14,
|
||||||
|
fontWeight: 'normal'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.bottom-left-wrapper{
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
.charts-box{
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
370
src/views/dashboard-zhongzi/components/itemBox/index.vue
Normal file
370
src/views/dashboard-zhongzi/components/itemBox/index.vue
Normal file
@ -0,0 +1,370 @@
|
|||||||
|
<template>
|
||||||
|
<div class="item-box">
|
||||||
|
<div class="item-top">
|
||||||
|
<el-tooltip :content="title" placement="top" effect="dark">
|
||||||
|
<div class="top-title">{{ title }}</div>
|
||||||
|
</el-tooltip>
|
||||||
|
<div class="header-right">
|
||||||
|
<slot name="header" />
|
||||||
|
<el-upload
|
||||||
|
class="upload-demo"
|
||||||
|
:action="uploadUrl"
|
||||||
|
:headers="headers"
|
||||||
|
:show-file-list="false"
|
||||||
|
:data="uploadAppData"
|
||||||
|
accept=".xls,.xlsx"
|
||||||
|
:file-list="fileList"
|
||||||
|
:on-success="handleOnSuccessApp"
|
||||||
|
:on-error="handleOnErrorApp"
|
||||||
|
style="margin-right: 5px;"
|
||||||
|
>
|
||||||
|
<el-button
|
||||||
|
v-if="showExport"
|
||||||
|
type="primary"
|
||||||
|
class="primary-blue-btn"
|
||||||
|
icon="el-icon-download"
|
||||||
|
>导入移动端</el-button>
|
||||||
|
</el-upload>
|
||||||
|
<el-button
|
||||||
|
v-if="showExport"
|
||||||
|
v-permission="['business:topologyAttribute:newExportExcel']"
|
||||||
|
style="margin-right: 5px;"
|
||||||
|
icon="el-icon-upload2"
|
||||||
|
type="primary"
|
||||||
|
class="primary-blue-btn"
|
||||||
|
:loading="downloadIng_app_data"
|
||||||
|
@click="on_download_app_data"
|
||||||
|
>导出移动端</el-button>
|
||||||
|
<el-upload
|
||||||
|
class="upload-demo"
|
||||||
|
:action="uploadUrl"
|
||||||
|
:headers="headers"
|
||||||
|
:show-file-list="false"
|
||||||
|
:data="uploadData"
|
||||||
|
accept=".xls,.xlsx"
|
||||||
|
:file-list="fileList"
|
||||||
|
:on-success="handleOnSuccess"
|
||||||
|
:on-error="handleOnError"
|
||||||
|
style="margin-right: 5px;"
|
||||||
|
>
|
||||||
|
<el-button
|
||||||
|
v-if="showExport"
|
||||||
|
type="primary"
|
||||||
|
class="primary-blue-btn"
|
||||||
|
icon="el-icon-download"
|
||||||
|
>导入web</el-button>
|
||||||
|
</el-upload>
|
||||||
|
<el-button
|
||||||
|
v-if="showExport"
|
||||||
|
v-permission="['business:topologyAttribute:newExportExcel']"
|
||||||
|
style="margin-right: -5px;"
|
||||||
|
icon="el-icon-upload2"
|
||||||
|
type="primary"
|
||||||
|
class="primary-blue-btn"
|
||||||
|
:loading="downloadIng_data"
|
||||||
|
@click="on_download_data"
|
||||||
|
>导出web</el-button>
|
||||||
|
<el-button
|
||||||
|
v-if="showExport"
|
||||||
|
v-permission="['business:topologyAttribute:exportTemplate']"
|
||||||
|
type="primary"
|
||||||
|
class="primary-blue-btn"
|
||||||
|
icon="el-icon-upload2"
|
||||||
|
style="margin-right: 20px"
|
||||||
|
:loading="downloadIng"
|
||||||
|
@click="on_download"
|
||||||
|
>导入模板</el-button>
|
||||||
|
<i
|
||||||
|
v-if="showPointSetting"
|
||||||
|
slot="reference"
|
||||||
|
v-permission="['business:dynamicConfig:addPointList']"
|
||||||
|
class="el-icon-setting"
|
||||||
|
style="font-size: 22px; cursor: pointer;color: #ceebff;margin-right:3px;"
|
||||||
|
@click="handleSetting"
|
||||||
|
/>
|
||||||
|
<i
|
||||||
|
v-if="showCurveSetting"
|
||||||
|
slot="reference"
|
||||||
|
v-permission="['business:dynamicConfig:addCurveList']"
|
||||||
|
class="el-icon-setting"
|
||||||
|
style="font-size: 22px; cursor: pointer;color: #ceebff;margin-right:3px;"
|
||||||
|
@click="handleSetting"
|
||||||
|
/>
|
||||||
|
<svg-icon
|
||||||
|
v-if="showScreen"
|
||||||
|
:style="svgStyle"
|
||||||
|
:icon-class="isFullscreen ? 'exit-fullscreen' : 'fullscreen'"
|
||||||
|
@click="click"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="item-con">
|
||||||
|
<slot />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import screenfull from 'screenfull'
|
||||||
|
import { handleDownExcel } from '@/utils'
|
||||||
|
import { getToken } from '@/utils/auth'
|
||||||
|
export default {
|
||||||
|
name: 'Index',
|
||||||
|
components: {},
|
||||||
|
props: {
|
||||||
|
title: {
|
||||||
|
type: String,
|
||||||
|
default: ''
|
||||||
|
},
|
||||||
|
showSetting: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false
|
||||||
|
},
|
||||||
|
showScreen: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false
|
||||||
|
},
|
||||||
|
showExport: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false
|
||||||
|
},
|
||||||
|
pageNumber: {
|
||||||
|
type: Number,
|
||||||
|
default: 1
|
||||||
|
},
|
||||||
|
showPointSetting: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false
|
||||||
|
},
|
||||||
|
showCurveSetting: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
svgStyle: {
|
||||||
|
display: 'inline-block',
|
||||||
|
cursor: 'pointer',
|
||||||
|
fill: '#ceebff',
|
||||||
|
width: '16px',
|
||||||
|
height: '16px',
|
||||||
|
verticalAlign: '10px',
|
||||||
|
marginRight: '5px'
|
||||||
|
},
|
||||||
|
isFullscreen: false,
|
||||||
|
uploadUrl:
|
||||||
|
process.env.VUE_APP_BASE_API + '/business/topologyAttribute/importExcel',
|
||||||
|
headers: {
|
||||||
|
authorization: getToken(),
|
||||||
|
lang: sessionStorage.getItem('language') === 'en' ? 'en_US' : 'zh_CN'
|
||||||
|
},
|
||||||
|
fileList: [],
|
||||||
|
downloadIng: false,
|
||||||
|
downloadIng_data: false,
|
||||||
|
downloadIng_app_data: false,
|
||||||
|
uploadData: {
|
||||||
|
stationId: null,
|
||||||
|
pageNumber: null,
|
||||||
|
isWeb: 1
|
||||||
|
},
|
||||||
|
uploadAppData: {
|
||||||
|
stationId: null,
|
||||||
|
pageNumber: null,
|
||||||
|
isWeb: 2
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
currentStation() {
|
||||||
|
return this.$store.getters.currentStation || undefined
|
||||||
|
}
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
currentStation: {
|
||||||
|
handler(val) {
|
||||||
|
if (val && val.id) {
|
||||||
|
this.uploadAppData.stationId = val.id
|
||||||
|
this.uploadData.stationId = val.id
|
||||||
|
}
|
||||||
|
},
|
||||||
|
deep: true,
|
||||||
|
immediate: true
|
||||||
|
},
|
||||||
|
pageNumber: {
|
||||||
|
handler(val) {
|
||||||
|
if (val) {
|
||||||
|
this.uploadAppData.pageNumber = val
|
||||||
|
this.uploadData.pageNumber = val
|
||||||
|
}
|
||||||
|
},
|
||||||
|
deep: true,
|
||||||
|
immediate: true
|
||||||
|
}
|
||||||
|
},
|
||||||
|
created() {},
|
||||||
|
mounted() {
|
||||||
|
this.init()
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
async on_download() {
|
||||||
|
this.downloadIng = true
|
||||||
|
const params = {
|
||||||
|
title: '火电拓扑模板'
|
||||||
|
}
|
||||||
|
handleDownExcel('/business/topologyAttribute/exportTemplate', params, (callback) => {
|
||||||
|
console.log(callback)
|
||||||
|
this.downloadIng = false
|
||||||
|
})
|
||||||
|
},
|
||||||
|
async on_download_data() {
|
||||||
|
this.downloadIng_data = true
|
||||||
|
const params = {
|
||||||
|
title: '火电拓扑数据',
|
||||||
|
stationId: this.uploadData.stationId,
|
||||||
|
pageNumber: this.pageNumber,
|
||||||
|
pageLocation: 'fire',
|
||||||
|
isWeb: 1
|
||||||
|
}
|
||||||
|
handleDownExcel('/business/topologyAttribute/newExportExcel', params, (callback) => {
|
||||||
|
console.log(callback)
|
||||||
|
this.downloadIng_data = false
|
||||||
|
})
|
||||||
|
},
|
||||||
|
on_download_app_data() {
|
||||||
|
this.downloadIng_app_data = true
|
||||||
|
const params = {
|
||||||
|
title: '火电拓扑移动端数据',
|
||||||
|
stationId: this.uploadData.stationId,
|
||||||
|
pageNumber: this.pageNumber,
|
||||||
|
pageLocation: 'fire',
|
||||||
|
isWeb: 2
|
||||||
|
}
|
||||||
|
handleDownExcel('/business/topologyAttribute/newExportExcel', params, (callback) => {
|
||||||
|
this.downloadIng_app_data = false
|
||||||
|
})
|
||||||
|
},
|
||||||
|
handleOnSuccess(file, fileList) {
|
||||||
|
if (+file.code !== 200) {
|
||||||
|
this.$message.warning(file.msg)
|
||||||
|
} else {
|
||||||
|
this.$message.success('导入成功')
|
||||||
|
this.$emit('handleOnSuccess', file, fileList)
|
||||||
|
}
|
||||||
|
// console.log(1111, file, fileList)
|
||||||
|
},
|
||||||
|
handleOnSuccessApp(file, fileList) {
|
||||||
|
if (+file.code !== 200) {
|
||||||
|
this.$message.warning(file.msg)
|
||||||
|
} else {
|
||||||
|
this.$message.success('导入成功')
|
||||||
|
// this.$emit('handleOnSuccess', file, fileList)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
handleOnError(file, fileList) {},
|
||||||
|
handleOnErrorApp(file, fileList) {},
|
||||||
|
handleSetting() {
|
||||||
|
this.$emit('handleSetting')
|
||||||
|
},
|
||||||
|
change() {
|
||||||
|
this.isFullscreen = screenfull.isFullscreen
|
||||||
|
},
|
||||||
|
init() {
|
||||||
|
if (screenfull.enabled) {
|
||||||
|
screenfull.on('change', this.change)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
destroy() {
|
||||||
|
if (screenfull.enabled) {
|
||||||
|
screenfull.off('change', this.change)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
click() {
|
||||||
|
this.$emit('screenFull', this.isFullscreen)
|
||||||
|
const element = document.getElementById('app-main') // 指定全屏区域元素
|
||||||
|
element.style.background =
|
||||||
|
'url(' + require('../../../../assets/images/dashboardBg.png') + ')'
|
||||||
|
if (screenfull.isEnabled) {
|
||||||
|
screenfull.request(element)
|
||||||
|
}
|
||||||
|
screenfull.toggle(element)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.item-box {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
.item-top {
|
||||||
|
width: 100%;
|
||||||
|
height: 40px;
|
||||||
|
line-height: 40px;
|
||||||
|
opacity: 1;
|
||||||
|
box-sizing: border-box;
|
||||||
|
// border: 1px solid;
|
||||||
|
// background: #003235;
|
||||||
|
background-image: var(--item-header-bg);
|
||||||
|
background-size: 100% 40px;
|
||||||
|
// border-image: linear-gradient(
|
||||||
|
// 11deg,
|
||||||
|
// rgba(0, 148, 255, 0.5) 37%,
|
||||||
|
// rgba(0, 148, 255, 0.5) 37%,
|
||||||
|
// rgba(0, 148, 255, 0) 44%
|
||||||
|
// )
|
||||||
|
// 1;
|
||||||
|
box-shadow: inset 0px 2px 16px 0px rgba(0, 148, 255, 0.15);
|
||||||
|
// background:var(--table-bg);
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: center;
|
||||||
|
.top-title {
|
||||||
|
// width: 100%;
|
||||||
|
white-space: nowrap;
|
||||||
|
height: 40px;
|
||||||
|
line-height: 40px;
|
||||||
|
width: 80%;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
font-size: 20px;
|
||||||
|
font-weight: normal;
|
||||||
|
letter-spacing: 0.1em;
|
||||||
|
color: #ceebff;
|
||||||
|
text-shadow: 0px 0px 10px #0094ff;
|
||||||
|
font-family: var(--font-family);
|
||||||
|
|
||||||
|
padding: 0 10px;
|
||||||
|
// background: linear-gradient(180deg, #c9fff3 0%, #c3fff2 13%, #32ffd2 63%);
|
||||||
|
}
|
||||||
|
.header-right {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
margin-left: auto;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.item-con {
|
||||||
|
flex: 1;
|
||||||
|
margin-top: 5px;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background:var(--table-bg);
|
||||||
|
box-sizing: border-box;
|
||||||
|
border: 1px solid;
|
||||||
|
border-image: linear-gradient(
|
||||||
|
108deg,
|
||||||
|
#ffffff -7%,
|
||||||
|
rgba(201, 255, 243, 0) 16%,
|
||||||
|
rgba(201, 255, 243, 0) 75%,
|
||||||
|
rgba(201, 255, 243, 0) 81%,
|
||||||
|
#ffffff 102%,
|
||||||
|
#ffffff 102%
|
||||||
|
)
|
||||||
|
1;
|
||||||
|
box-shadow: inset 0px 2px 16px 0px rgba(0, 148, 255, 0.15);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
207
src/views/dashboard-zhongzi/components/itemBox/position.vue
Normal file
207
src/views/dashboard-zhongzi/components/itemBox/position.vue
Normal file
@ -0,0 +1,207 @@
|
|||||||
|
<template>
|
||||||
|
<div class="item-box">
|
||||||
|
<div class="item-top">
|
||||||
|
<el-popover
|
||||||
|
placement="bottom"
|
||||||
|
width="240"
|
||||||
|
trigger="click"
|
||||||
|
@show="changeTitle = title"
|
||||||
|
@hide="handleSaveTitle"
|
||||||
|
>
|
||||||
|
<el-input v-model="changeTitle" maxlength="25" />
|
||||||
|
<div slot="reference" class="top-title">{{ title }}</div>
|
||||||
|
</el-popover>
|
||||||
|
<div class="header-right">
|
||||||
|
<slot name="header" />
|
||||||
|
<i
|
||||||
|
v-if="showPointSetting"
|
||||||
|
slot="reference"
|
||||||
|
v-permission="['business:dynamicConfig:addPointList']"
|
||||||
|
class="el-icon-setting"
|
||||||
|
style="
|
||||||
|
font-size: 22px;
|
||||||
|
cursor: pointer;
|
||||||
|
color: #ceebff;
|
||||||
|
margin-right: 3px;
|
||||||
|
"
|
||||||
|
@click="handleSetting"
|
||||||
|
/>
|
||||||
|
<i
|
||||||
|
v-if="showCurveSetting"
|
||||||
|
slot="reference"
|
||||||
|
v-permission="['business:dynamicConfig:addCurveList']"
|
||||||
|
class="el-icon-setting"
|
||||||
|
style="
|
||||||
|
font-size: 22px;
|
||||||
|
cursor: pointer;
|
||||||
|
color: #ceebff;
|
||||||
|
margin-right: 3px;
|
||||||
|
"
|
||||||
|
@click="handleSetting"
|
||||||
|
/>
|
||||||
|
<svg-icon
|
||||||
|
v-if="showScreen"
|
||||||
|
:style="svgStyle"
|
||||||
|
:icon-class="isFullscreen ? 'exit-fullscreen' : 'fullscreen'"
|
||||||
|
@click="click"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="item-con">
|
||||||
|
<slot />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import screenfull from 'screenfull'
|
||||||
|
export default {
|
||||||
|
name: 'Index',
|
||||||
|
components: {},
|
||||||
|
props: {
|
||||||
|
title: {
|
||||||
|
type: String,
|
||||||
|
default: ''
|
||||||
|
},
|
||||||
|
titleId: {
|
||||||
|
type: [String, Number],
|
||||||
|
default: ''
|
||||||
|
},
|
||||||
|
showPointSetting: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false
|
||||||
|
},
|
||||||
|
showCurveSetting: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false
|
||||||
|
},
|
||||||
|
showScreen: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
svgStyle: {
|
||||||
|
display: 'inline-block',
|
||||||
|
cursor: 'pointer',
|
||||||
|
fill: '#ceebff',
|
||||||
|
width: '16px',
|
||||||
|
height: '16px',
|
||||||
|
verticalAlign: '10px',
|
||||||
|
marginRight: '5px'
|
||||||
|
},
|
||||||
|
isFullscreen: false,
|
||||||
|
changeTitle: ''
|
||||||
|
}
|
||||||
|
},
|
||||||
|
computed: {},
|
||||||
|
watch: {},
|
||||||
|
created() {},
|
||||||
|
mounted() {
|
||||||
|
this.init()
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
handleSaveTitle() {
|
||||||
|
this.$emit('handleSaveTitle', this.changeTitle, this.titleId)
|
||||||
|
},
|
||||||
|
handleSetting() {
|
||||||
|
this.$emit('handleSetting')
|
||||||
|
},
|
||||||
|
change() {
|
||||||
|
this.isFullscreen = screenfull.isFullscreen
|
||||||
|
},
|
||||||
|
init() {
|
||||||
|
if (screenfull.enabled) {
|
||||||
|
screenfull.on('change', this.change)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
destroy() {
|
||||||
|
if (screenfull.enabled) {
|
||||||
|
screenfull.off('change', this.change)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
click() {
|
||||||
|
this.$emit('screenFull', this.isFullscreen)
|
||||||
|
const element = document.getElementById('app-main') // 指定全屏区域元素
|
||||||
|
element.style.background =
|
||||||
|
'url(' + require('../../../../assets/images/dashboardBg.png') + ')'
|
||||||
|
if (screenfull.isEnabled) {
|
||||||
|
screenfull.request(element)
|
||||||
|
}
|
||||||
|
screenfull.toggle(element)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.item-box {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
.item-top {
|
||||||
|
width: 100%;
|
||||||
|
height: 40px;
|
||||||
|
line-height: 40px;
|
||||||
|
opacity: 1;
|
||||||
|
box-sizing: border-box;
|
||||||
|
// border: 1px solid;
|
||||||
|
// background: #003235;
|
||||||
|
background-image: var(--item-header-bg);
|
||||||
|
background-size: 100% 40px;
|
||||||
|
// border-image: linear-gradient(
|
||||||
|
// 11deg,
|
||||||
|
// rgba(0, 148, 255, 0.5) 37%,
|
||||||
|
// rgba(0, 148, 255, 0.5) 37%,
|
||||||
|
// rgba(0, 148, 255, 0) 44%
|
||||||
|
// )
|
||||||
|
// 1;
|
||||||
|
box-shadow: inset 0px 2px 16px 0px rgba(0, 148, 255, 0.15);
|
||||||
|
// background:var(--table-bg);
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: center;
|
||||||
|
.top-title {
|
||||||
|
// width: 100%;
|
||||||
|
height: 40px;
|
||||||
|
line-height: 40px;
|
||||||
|
font-size: 20px;
|
||||||
|
font-weight: normal;
|
||||||
|
letter-spacing: 0.2em;
|
||||||
|
color: #ceebff;
|
||||||
|
text-shadow: 0px 0px 10px #0094ff;
|
||||||
|
font-family: var(--font-family);
|
||||||
|
|
||||||
|
padding: 0 10px;
|
||||||
|
// background: linear-gradient(180deg, #c9fff3 0%, #c3fff2 13%, #32ffd2 63%);
|
||||||
|
}
|
||||||
|
.header-right {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
margin-left: auto;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.item-con {
|
||||||
|
flex: 1;
|
||||||
|
margin-top: 5px;
|
||||||
|
width: 100%;
|
||||||
|
background:var(--table-bg);
|
||||||
|
box-sizing: border-box;
|
||||||
|
border: 1px solid;
|
||||||
|
border-image: linear-gradient(
|
||||||
|
108deg,
|
||||||
|
#ffffff -7%,
|
||||||
|
rgba(201, 255, 243, 0) 16%,
|
||||||
|
rgba(201, 255, 243, 0) 75%,
|
||||||
|
rgba(201, 255, 243, 0) 81%,
|
||||||
|
#ffffff 102%,
|
||||||
|
#ffffff 102%
|
||||||
|
)
|
||||||
|
1;
|
||||||
|
box-shadow: inset 0px 2px 16px 0px rgba(0, 148, 255, 0.15);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
787
src/views/dashboard-zhongzi/components/top-left/index.vue
Normal file
787
src/views/dashboard-zhongzi/components/top-left/index.vue
Normal file
@ -0,0 +1,787 @@
|
|||||||
|
<template>
|
||||||
|
<div class="top-left-box">
|
||||||
|
<itemBox :title="$t('dashboard.stationData')">
|
||||||
|
<div slot="header">
|
||||||
|
<div class="header-right-box">
|
||||||
|
<div class="header-title" :class="{ 'active': currentIndex === 0 }" @click="changeType(0)">{{ $t('dashboard.dataOverView') }}</div>
|
||||||
|
<div class="header-title" :class="{ 'active': currentIndex === 1 }" @click="changeType(1)">{{ $t('dashboard.stationInfo') }}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div v-if="currentIndex === 0" v-loading="loading" class="box">
|
||||||
|
<div class="content-box">
|
||||||
|
<div class="left">
|
||||||
|
<div class="left-icon">
|
||||||
|
<div class="icon-font-runDay" />
|
||||||
|
</div>
|
||||||
|
<div class="left-title">{{ $t('dashboard.safeDays') }}</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="right">
|
||||||
|
<div class="right-value">{{ stationData.operationDays }}</div>
|
||||||
|
<!-- <div class="right-value">7</div> -->
|
||||||
|
<div class="right-unit">{{ $t('dashboard.day') }}</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="left-top" />
|
||||||
|
<div class="right-top" />
|
||||||
|
<div class="left-bottom" />
|
||||||
|
<div class="right-bottom" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="content-box">
|
||||||
|
<div class="left">
|
||||||
|
<div class="left-icon">
|
||||||
|
<div class="icon-font-totalCharge" />
|
||||||
|
</div>
|
||||||
|
<div class="left-title">{{ $t('dashboard.totalCapacity') }}</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="right">
|
||||||
|
<div class="right-value">{{ totalData.totalCapacity }}</div>
|
||||||
|
<div class="right-unit">kWh</div>
|
||||||
|
</div>
|
||||||
|
<div class="left-top" />
|
||||||
|
<div class="right-top" />
|
||||||
|
<div class="left-bottom" />
|
||||||
|
<div class="right-bottom" />
|
||||||
|
</div>
|
||||||
|
<div class="content-box">
|
||||||
|
<div class="left">
|
||||||
|
<div class="left-icon">
|
||||||
|
<div class="icon-font-totalDischarge" />
|
||||||
|
</div>
|
||||||
|
<div class="left-title">{{ $t('dashboard.systemConversionEfficiency') }}</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="right">
|
||||||
|
<div class="right-value">{{ (totalData.systemEfficiency*100).toFixed(2) }}</div>
|
||||||
|
<div class="right-unit">%</div>
|
||||||
|
</div>
|
||||||
|
<div class="left-top" />
|
||||||
|
<div class="right-top" />
|
||||||
|
<div class="left-bottom" />
|
||||||
|
<div class="right-bottom" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="content-box">
|
||||||
|
<div class="left">
|
||||||
|
<div class="left-icon">
|
||||||
|
<div class="icon-font-currentPower" />
|
||||||
|
</div>
|
||||||
|
<div class="left-title">{{ $t('dashboard.currentPower') }}</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="right">
|
||||||
|
<div class="right-value">{{ totalData.currentPower }}</div>
|
||||||
|
<div class="right-unit">kW</div>
|
||||||
|
</div>
|
||||||
|
<div class="left-top" />
|
||||||
|
<div class="right-top" />
|
||||||
|
<div class="left-bottom" />
|
||||||
|
<div class="right-bottom" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="content-box">
|
||||||
|
<div class="left">
|
||||||
|
<div class="left-icon">
|
||||||
|
<div class="icon-font-totalDischarge" />
|
||||||
|
</div>
|
||||||
|
<div class="left-title">{{ $t('dashboard.totalCharge') }}</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="right">
|
||||||
|
<div class="right-value">{{ totalData.totalChargeElec | kwhFormat(2) }}</div>
|
||||||
|
<div class="right-unit">{{ totalData.totalChargeElec | kwhUnitFormat }}</div>
|
||||||
|
</div>
|
||||||
|
<div class="left-top" />
|
||||||
|
<div class="right-top" />
|
||||||
|
<div class="left-bottom" />
|
||||||
|
<div class="right-bottom" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="content-box">
|
||||||
|
<div class="left">
|
||||||
|
<div class="left-icon">
|
||||||
|
<div class="icon-font-totalDischarge" />
|
||||||
|
</div>
|
||||||
|
<div v-if="stationId===753" class="left-title">{{ $t('dashboard.capacityIncrease') }}</div>
|
||||||
|
<div v-else class="left-title">{{ $t('dashboard.totalDischarge') }}</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="right">
|
||||||
|
<div class="right-value">{{ totalData.totalDischargeElec | kwhFormat(2) }}</div>
|
||||||
|
<div class="right-unit">{{ totalData.totalDischargeElec | kwhUnitFormat }}</div>
|
||||||
|
</div>
|
||||||
|
<div class="left-top" />
|
||||||
|
<div class="right-top" />
|
||||||
|
<div class="left-bottom" />
|
||||||
|
<div class="right-bottom" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="content-box">
|
||||||
|
<div class="left">
|
||||||
|
<div class="left-icon">
|
||||||
|
<div class="icon-font-dayCharge" style="cursor: pointer;" @click="setRule" />
|
||||||
|
</div>
|
||||||
|
<div class="left-title">{{ $t('dashboard.dailyCharge') }}</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="right">
|
||||||
|
<div class="right-value">{{ totalData.dailyChargeElec | kwhFormat(2) }}</div>
|
||||||
|
<div class="right-unit">{{ totalData.dailyChargeElec | kwhUnitFormat }}</div>
|
||||||
|
</div>
|
||||||
|
<div class="left-top" />
|
||||||
|
<div class="right-top" />
|
||||||
|
<div class="left-bottom" />
|
||||||
|
<div class="right-bottom" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="content-box">
|
||||||
|
<div class="left">
|
||||||
|
<div class="left-icon">
|
||||||
|
<div class="icon-font-dayCharge" />
|
||||||
|
</div>
|
||||||
|
<div v-if="stationId===753" class="left-title">{{ $t('dashboard.DailycapacityIncrease') }}</div>
|
||||||
|
<div v-else class="left-title">{{ $t('dashboard.dailyDischarge') }}</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="right">
|
||||||
|
<div class="right-value">{{ totalData.dailyDischargeElec | kwhFormat(2) }}</div>
|
||||||
|
<div class="right-unit">{{ totalData.dailyDischargeElec | kwhUnitFormat }}</div>
|
||||||
|
</div>
|
||||||
|
<div class="left-top" />
|
||||||
|
<div class="right-top" />
|
||||||
|
<div class="left-bottom" />
|
||||||
|
<div class="right-bottom" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div v-else v-loading="loading" class="box">
|
||||||
|
<div class="content-box">
|
||||||
|
<div class="left">
|
||||||
|
<div class="left-icon">
|
||||||
|
<div class="icon-font-runDay" />
|
||||||
|
</div>
|
||||||
|
<div class="left-title">{{ $t('dashboard.stationName') }}</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="right">
|
||||||
|
<el-tooltip class="item" effect="dark" :content="stationData.name" placement="top-start">
|
||||||
|
<div class="right-value1">{{ stationData.name }}</div>
|
||||||
|
|
||||||
|
</el-tooltip>
|
||||||
|
<!-- <div class="right-unit">{{ $t('dashboard.day') }}</div> -->
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="left-top" />
|
||||||
|
<div class="right-top" />
|
||||||
|
<div class="left-bottom" />
|
||||||
|
<div class="right-bottom" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="content-box">
|
||||||
|
<div class="left">
|
||||||
|
<div class="left-icon">
|
||||||
|
<div class="icon-font-totalCharge" />
|
||||||
|
</div>
|
||||||
|
<div class="left-title">{{ $t('dashboard.stationType') }}</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="right">
|
||||||
|
<div class="right-value1">{{ getStationTypeName(stationData.type) }}</div>
|
||||||
|
<!-- <div class="right-unit">kW</div> -->
|
||||||
|
</div>
|
||||||
|
<div class="left-top" />
|
||||||
|
<div class="right-top" />
|
||||||
|
<div class="left-bottom" />
|
||||||
|
<div class="right-bottom" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="content-box">
|
||||||
|
<div class="left">
|
||||||
|
<div class="left-icon">
|
||||||
|
<div class="icon-font-totalDischarge" />
|
||||||
|
</div>
|
||||||
|
<div class="left-title">{{ $t('dashboard.stationLocation') }}</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="right">
|
||||||
|
<el-tooltip class="item" effect="dark" :content="stationData.address" placement="top-start">
|
||||||
|
<div class="right-value1">{{ stationData.address }}</div>
|
||||||
|
|
||||||
|
</el-tooltip>
|
||||||
|
<!-- <div class="right-unit">MW</div> -->
|
||||||
|
</div>
|
||||||
|
<div class="left-top" />
|
||||||
|
<div class="right-top" />
|
||||||
|
<div class="left-bottom" />
|
||||||
|
<div class="right-bottom" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="content-box">
|
||||||
|
<div class="left">
|
||||||
|
<div class="left-icon">
|
||||||
|
<div class="icon-font-totalDischarge" />
|
||||||
|
</div>
|
||||||
|
<div class="left-title">{{ $t('dashboard.commTime') }}</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="right">
|
||||||
|
<el-tooltip :content="stationData.createTime" placement="top" effect="dark">
|
||||||
|
<div class="right-value1">{{ stationData.createTime }}</div>
|
||||||
|
</el-tooltip>
|
||||||
|
<!-- <div class="right-unit">MW</div> -->
|
||||||
|
</div>
|
||||||
|
<div class="left-top" />
|
||||||
|
<div class="right-top" />
|
||||||
|
<div class="left-bottom" />
|
||||||
|
<div class="right-bottom" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="content-box">
|
||||||
|
<div class="left">
|
||||||
|
<div class="left-icon">
|
||||||
|
<div class="icon-font-dayCharge" />
|
||||||
|
</div>
|
||||||
|
<div class="left-title">{{ $t('dashboard.log') }}</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="right">
|
||||||
|
<div class="right-value1">{{ stationData.longitude }}</div>
|
||||||
|
<!-- <div class="right-unit">kWh</div> -->
|
||||||
|
</div>
|
||||||
|
<div class="left-top" />
|
||||||
|
<div class="right-top" />
|
||||||
|
<div class="left-bottom" />
|
||||||
|
<div class="right-bottom" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="content-box">
|
||||||
|
<div class="left">
|
||||||
|
<div class="left-icon">
|
||||||
|
<div class="icon-font-dayCharge" />
|
||||||
|
</div>
|
||||||
|
<div class="left-title">{{ $t('dashboard.lat') }}</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="right">
|
||||||
|
<div class="right-value1">{{ stationData.latitude }}</div>
|
||||||
|
<!-- <div class="right-unit">kWh</div> -->
|
||||||
|
</div>
|
||||||
|
<div class="left-top" />
|
||||||
|
<div class="right-top" />
|
||||||
|
<div class="left-bottom" />
|
||||||
|
<div class="right-bottom" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<el-dialog
|
||||||
|
:append-to-body="true"
|
||||||
|
title="日充放统计规则"
|
||||||
|
:visible.sync="ruleShow"
|
||||||
|
center
|
||||||
|
width="30%"
|
||||||
|
:close-on-click-modal="false"
|
||||||
|
>
|
||||||
|
<el-form :model="timeForm" label-width="120px">
|
||||||
|
<el-form-item label="前一日" class="select-box">
|
||||||
|
<el-select
|
||||||
|
v-model="timeForm.beforeTime"
|
||||||
|
style="width:100%"
|
||||||
|
placeholder="请选择"
|
||||||
|
@change="selectRuleTime"
|
||||||
|
>
|
||||||
|
<template slot="prefix">
|
||||||
|
<span style="padding-left: 5px;">
|
||||||
|
<i class="el-icon-time" />
|
||||||
|
</span>
|
||||||
|
</template>
|
||||||
|
<el-option
|
||||||
|
v-for="item in timeList"
|
||||||
|
:key="item.value"
|
||||||
|
:label="item.label"
|
||||||
|
:value="item.value"
|
||||||
|
/>
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="今日">
|
||||||
|
<el-time-picker
|
||||||
|
v-model="timeForm.nowDayTime"
|
||||||
|
style="width:100%"
|
||||||
|
:clearable="false"
|
||||||
|
readonly
|
||||||
|
placeholder="请选择时间"
|
||||||
|
value-format="HH:mm:ss"
|
||||||
|
/>
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
<div slot="footer" class="dialog-footer">
|
||||||
|
<el-button @click="cancelRule">取 消</el-button>
|
||||||
|
<el-button
|
||||||
|
type="primary"
|
||||||
|
:loading="timeSubmitLoading"
|
||||||
|
@click="sureRule"
|
||||||
|
>确 定</el-button>
|
||||||
|
</div>
|
||||||
|
</el-dialog>
|
||||||
|
</itemBox>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import itemBox from '../itemBox/index.vue'
|
||||||
|
import { GetPcsStationData, addElecMeterConfig,
|
||||||
|
updateElecMeterConfig } from '@/api/home-page/index'
|
||||||
|
import { GetRAPcsTotalData } from '@/api/homePage-integrated/index'
|
||||||
|
import { ToDegrees } from '@/utils/index'
|
||||||
|
export default {
|
||||||
|
name: 'Index',
|
||||||
|
components: { itemBox },
|
||||||
|
props: {
|
||||||
|
stationId: {
|
||||||
|
type: Number,
|
||||||
|
default: 0
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
currentIndex: 0,
|
||||||
|
totalData: {
|
||||||
|
operationDays: '',
|
||||||
|
ratePower: '',
|
||||||
|
totalChargeElec: '',
|
||||||
|
totalDischargeElec: '',
|
||||||
|
dailyChargeElec: '',
|
||||||
|
dailyDischargeElec: '',
|
||||||
|
currentPower: ''
|
||||||
|
},
|
||||||
|
stationData: {
|
||||||
|
name: '',
|
||||||
|
type: '',
|
||||||
|
address: '',
|
||||||
|
createTime: '',
|
||||||
|
longitude: '',
|
||||||
|
latitude: ''
|
||||||
|
},
|
||||||
|
stationType: [],
|
||||||
|
loading: false,
|
||||||
|
ruleShow: false,
|
||||||
|
timeForm: {
|
||||||
|
beforeTime: undefined,
|
||||||
|
nowDayTime: undefined
|
||||||
|
},
|
||||||
|
timeSubmitLoading: false,
|
||||||
|
timeOperate: 1, // 1 新增 2 编辑
|
||||||
|
timeList: []
|
||||||
|
}
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
stationTypeList() {
|
||||||
|
return this.$store.getters.dicts['stationType'] || []
|
||||||
|
}
|
||||||
|
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
dailyTime: {
|
||||||
|
handler(val) {
|
||||||
|
if (val) {
|
||||||
|
this.timeForm = val
|
||||||
|
this.timeOperate = val.timeOperate
|
||||||
|
this.GetPcsTotalData()
|
||||||
|
}
|
||||||
|
},
|
||||||
|
deep: true,
|
||||||
|
immediate: true
|
||||||
|
}
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
// console.log(this.stationTypeList)
|
||||||
|
this.getTimeList()
|
||||||
|
},
|
||||||
|
mounted() { },
|
||||||
|
methods: {
|
||||||
|
getStationTypeName(item) {
|
||||||
|
if (item && item !== '') {
|
||||||
|
const typeIndex = this.stationTypeList.findIndex(t => Number(t.value) === Number(item))
|
||||||
|
return this.stationTypeList[typeIndex].label
|
||||||
|
}
|
||||||
|
},
|
||||||
|
changeType(val) {
|
||||||
|
this.currentIndex = val
|
||||||
|
},
|
||||||
|
getData() {
|
||||||
|
this.GetPcsStationData()
|
||||||
|
this.GetPcsTotalData()
|
||||||
|
},
|
||||||
|
async GetPcsStationData() {
|
||||||
|
this.loading = true
|
||||||
|
const params = {
|
||||||
|
stationId: this.stationId
|
||||||
|
}
|
||||||
|
try {
|
||||||
|
const { data } = await GetPcsStationData(params)
|
||||||
|
this.stationData = data
|
||||||
|
this.stationData.longitude = ToDegrees(data.longitude, 1)
|
||||||
|
this.stationData.latitude = ToDegrees(data.latitude, 2)
|
||||||
|
} catch (error) {
|
||||||
|
// console.log(error);
|
||||||
|
} finally {
|
||||||
|
this.loading = false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
async GetPcsTotalData() {
|
||||||
|
this.loading = true
|
||||||
|
const params = {
|
||||||
|
stationId: this.stationId
|
||||||
|
}
|
||||||
|
try {
|
||||||
|
const { data } = await GetRAPcsTotalData(params)
|
||||||
|
this.totalData = data
|
||||||
|
} catch (error) {
|
||||||
|
// console.log(error);
|
||||||
|
} finally {
|
||||||
|
this.loading = false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
getTimeList() {
|
||||||
|
for (let i = 0; i < 24; i++) {
|
||||||
|
this.timeList.push({
|
||||||
|
label: `${i < 10 ? '0' + i : i}:00:00`,
|
||||||
|
value: `${i < 10 ? '0' + i : i}:00:00`
|
||||||
|
})
|
||||||
|
}
|
||||||
|
},
|
||||||
|
setRule() {
|
||||||
|
this.ruleShow = true
|
||||||
|
},
|
||||||
|
selectRuleTime(val) {
|
||||||
|
this.timeForm.nowDayTime = this.getEightTime('2020-07-28 ' + val)
|
||||||
|
},
|
||||||
|
cancelRule() {
|
||||||
|
this.ruleShow = false
|
||||||
|
},
|
||||||
|
sureRule() {
|
||||||
|
if (this.timeOperate === 1) {
|
||||||
|
// 新增
|
||||||
|
this.timeSubmitLoading = true
|
||||||
|
const param = {
|
||||||
|
stationId: this.stationId,
|
||||||
|
beginTime: this.timeForm.beforeTime,
|
||||||
|
endTime: this.timeForm.nowDayTime
|
||||||
|
}
|
||||||
|
addElecMeterConfig(param)
|
||||||
|
.then((res) => {
|
||||||
|
this.$message.success('新增成功')
|
||||||
|
this.ruleShow = false
|
||||||
|
this.$emit('updateTime')
|
||||||
|
})
|
||||||
|
.finally(() => {
|
||||||
|
this.timeSubmitLoading = false
|
||||||
|
})
|
||||||
|
} else {
|
||||||
|
// 编辑
|
||||||
|
this.timeSubmitLoading = true
|
||||||
|
const param = {
|
||||||
|
stationId: this.stationId,
|
||||||
|
beginTime: this.timeForm.beforeTime,
|
||||||
|
endTime: this.timeForm.nowDayTime,
|
||||||
|
id: this.timeForm.id
|
||||||
|
}
|
||||||
|
updateElecMeterConfig(param)
|
||||||
|
.then((res) => {
|
||||||
|
this.$message.success('更新成功')
|
||||||
|
this.ruleShow = false
|
||||||
|
this.$emit('updateTime')
|
||||||
|
})
|
||||||
|
.finally(() => {
|
||||||
|
this.timeSubmitLoading = false
|
||||||
|
})
|
||||||
|
}
|
||||||
|
},
|
||||||
|
/**
|
||||||
|
* 指定时间的多少小时或多少分钟之后的时间
|
||||||
|
* @param {*} str 2020-07-28 15:00:00
|
||||||
|
*/
|
||||||
|
getEightTime(str) {
|
||||||
|
const t = new Date(str).getTime() + 24 * 60 * 60 * 1000 - 1 // 24小时 * 60分钟 * 60秒 * 1000
|
||||||
|
const d = new Date(t)
|
||||||
|
let theMonth = d.getMonth() + 1
|
||||||
|
let theDate = d.getDate()
|
||||||
|
let theHours = d.getHours()
|
||||||
|
let theMinutes = d.getMinutes()
|
||||||
|
let theSecond = d.getSeconds()
|
||||||
|
if (theMonth < 10) {
|
||||||
|
theMonth = '0' + theMonth
|
||||||
|
}
|
||||||
|
if (theDate < 10) {
|
||||||
|
theDate = '0' + theDate
|
||||||
|
}
|
||||||
|
if (theHours < 10) {
|
||||||
|
theHours = '0' + theHours
|
||||||
|
}
|
||||||
|
if (theMinutes < 10) {
|
||||||
|
theMinutes = '0' + theMinutes
|
||||||
|
}
|
||||||
|
if (theSecond < 10) {
|
||||||
|
theSecond = '0' + theSecond
|
||||||
|
}
|
||||||
|
// let date = d.getFullYear() + '-' + theMonth + '-' + theDate
|
||||||
|
const time = theHours + ':' + theMinutes + ':' + theSecond
|
||||||
|
// let Spare = date + ' ' + time
|
||||||
|
// console.log(date)
|
||||||
|
// console.log(time)
|
||||||
|
// console.log(Spare)
|
||||||
|
return time
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
::v-deep .item-con{
|
||||||
|
overflow:auto;
|
||||||
|
}
|
||||||
|
.top-left-box{
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
overflow: hidden;
|
||||||
|
.header-right-box {
|
||||||
|
display: flex;
|
||||||
|
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.00) 0%, rgba(0,148,255,0.43) 51%, rgba(0,148,255,0.00) 99%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.box{
|
||||||
|
min-height: 506px;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
padding: 10px;
|
||||||
|
padding-bottom: 0;
|
||||||
|
overflow-y: auto;
|
||||||
|
overflow-x: hidden;
|
||||||
|
}
|
||||||
|
.content-box {
|
||||||
|
width: 100%;
|
||||||
|
// border: 1px solid #ffffff;
|
||||||
|
padding: 6px 20px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
position: relative;
|
||||||
|
background: url(../../../../assets/station-data/item-bg.png);
|
||||||
|
background-size: cover;
|
||||||
|
.left {
|
||||||
|
width: 60%;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
.left-icon {
|
||||||
|
/* 矩形 180 */
|
||||||
|
|
||||||
|
min-width: 40px;
|
||||||
|
height: 40px;
|
||||||
|
opacity: 1;
|
||||||
|
// background: url(../../../../assets/station-data/run-day.png);
|
||||||
|
background: linear-gradient(
|
||||||
|
180deg,
|
||||||
|
#0094ff -204%,
|
||||||
|
rgba(0, 148, 255, 0) 100%
|
||||||
|
);
|
||||||
|
|
||||||
|
box-sizing: border-box;
|
||||||
|
border-width: 1px 0px 1px 0px;
|
||||||
|
border-style: solid;
|
||||||
|
border-color: rgba(206, 235, 255, 0.6);
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
|
||||||
|
.icon-font-runDay{
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background: url(../../../../assets/station-data/run-day.png) no-repeat;
|
||||||
|
background-size: cover;
|
||||||
|
background-position: center;
|
||||||
|
}
|
||||||
|
.icon-font-installedCapacity{
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background: url(../../../../assets/station-data/Installed-capacity.png) no-repeat;
|
||||||
|
background-size: cover;
|
||||||
|
background-position: center;
|
||||||
|
}
|
||||||
|
.icon-font-totalCharge{
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background: url(../../../../assets/station-data/total-charge.png);
|
||||||
|
background-size: cover;
|
||||||
|
background-position: center;
|
||||||
|
}
|
||||||
|
.icon-font-totalDischarge{
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background: url(../../../../assets/station-data/total-discharge.png);
|
||||||
|
background-size: cover;
|
||||||
|
background-position: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-font-dayCharge{
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background: url(../../../../assets/station-data/day-charge.png);
|
||||||
|
background-size: cover;
|
||||||
|
background-position: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-font-currentPower{
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background: url(../../../../assets/station-data/station-data.png) no-repeat;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
// background-position: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.left-title {
|
||||||
|
width: fit-content;
|
||||||
|
padding-left: 20px;
|
||||||
|
/* 运行天数 */
|
||||||
|
height: 20px;
|
||||||
|
line-height: 20px;
|
||||||
|
opacity: 1;
|
||||||
|
font-family: Alibaba PuHuiTi 2;
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: 500;
|
||||||
|
letter-spacing: 0em;
|
||||||
|
color: #ceebff;
|
||||||
|
font-family: HYQY;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
.el-icon-share:before {
|
||||||
|
/* 路径 */
|
||||||
|
color: #ffffff;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
opacity: 1;
|
||||||
|
|
||||||
|
background: linear-gradient(
|
||||||
|
179deg,
|
||||||
|
#ceebff 0%,
|
||||||
|
#86c4ff 87%,
|
||||||
|
#409eff 106%
|
||||||
|
);
|
||||||
|
|
||||||
|
box-shadow: 0px 0px 10px 0px #0094ff,
|
||||||
|
2px 2px 0px 0px rgba(0, 148, 255, 0.4);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.right {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
width: 40%;
|
||||||
|
.right-value {
|
||||||
|
font-family: DIN;
|
||||||
|
|
||||||
|
width: 100%;
|
||||||
|
padding-right: 5px;
|
||||||
|
height: 21px;
|
||||||
|
opacity: 1;
|
||||||
|
font-size: 18px;
|
||||||
|
font-weight: bold;
|
||||||
|
text-align: right;
|
||||||
|
letter-spacing: 0.1em;
|
||||||
|
background: linear-gradient(180deg, #ceebff 21%, #86c4ff 81%);
|
||||||
|
background-clip: text;
|
||||||
|
color: #ceebff69;
|
||||||
|
}
|
||||||
|
.right-value1 {
|
||||||
|
font-family: HYQY;
|
||||||
|
padding-left: 10px;
|
||||||
|
width: 100%;
|
||||||
|
padding-right: 10px;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
white-space: nowrap;
|
||||||
|
padding-right: 5px;
|
||||||
|
height: 21px;
|
||||||
|
line-height: 20px;
|
||||||
|
opacity: 1;
|
||||||
|
font-size: 14px;
|
||||||
|
|
||||||
|
font-weight: normal;
|
||||||
|
text-align: right;
|
||||||
|
letter-spacing: 0.1em;
|
||||||
|
background: linear-gradient(180deg, #ceebff 21%, #86c4ff 81%);
|
||||||
|
background-clip: text;
|
||||||
|
color: #ceebff69;
|
||||||
|
}
|
||||||
|
.right-unit {
|
||||||
|
/* 天 */
|
||||||
|
|
||||||
|
opacity: 1;
|
||||||
|
line-height: 21px;
|
||||||
|
font-family: Alibaba PuHuiTi 2;
|
||||||
|
font-size: 10px;
|
||||||
|
font-weight: normal;
|
||||||
|
text-align: right;
|
||||||
|
letter-spacing: 0em;
|
||||||
|
color: #ceebff;
|
||||||
|
font-family: HYQY;
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.left-top{
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 6px;
|
||||||
|
height: 6px;
|
||||||
|
border-left: 1px solid #D8D8D8;
|
||||||
|
border-top: 1px solid #D8D8D8;
|
||||||
|
}
|
||||||
|
.right-top{
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
right: 0;
|
||||||
|
width: 6px;
|
||||||
|
height: 6px;
|
||||||
|
border-right: 1px solid #D8D8D8;
|
||||||
|
border-top: 1px solid #D8D8D8;
|
||||||
|
}
|
||||||
|
.left-bottom{
|
||||||
|
position: absolute;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 6px;
|
||||||
|
height: 6px;
|
||||||
|
border-left: 1px solid#D8D8D8 ;
|
||||||
|
border-bottom: 1px solid#D8D8D8;
|
||||||
|
}
|
||||||
|
.right-bottom{
|
||||||
|
position: absolute;
|
||||||
|
bottom: 0;
|
||||||
|
right: 0;
|
||||||
|
width: 6px;
|
||||||
|
height: 6px;
|
||||||
|
border-right: 1px solid #D8D8D8;
|
||||||
|
border-bottom: 1px solid #D8D8D8;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
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>
|
||||||
845
src/views/dashboard-zhongzi/components/topology/index.vue
Normal file
845
src/views/dashboard-zhongzi/components/topology/index.vue
Normal file
@ -0,0 +1,845 @@
|
|||||||
|
<template>
|
||||||
|
<div style="width: 100%;height: 100%;">
|
||||||
|
<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 1430 525"
|
||||||
|
>
|
||||||
|
<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>
|
||||||
|
<image
|
||||||
|
:xlink:href="gridImg"
|
||||||
|
x="30"
|
||||||
|
y="30"
|
||||||
|
width="45"
|
||||||
|
height="60"
|
||||||
|
/>
|
||||||
|
<text x="40" y="100" fill="#ffffff" font-size="12">电网</text>
|
||||||
|
|
||||||
|
<text x="1350" y="50" fill="#ffffff" font-size="16">10kV</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 1400,55"
|
||||||
|
fill="none"
|
||||||
|
class="g-rect-path"
|
||||||
|
stroke-width="2"
|
||||||
|
stroke="#0094FF"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<image
|
||||||
|
:xlink:href="FrameImg"
|
||||||
|
x="1360"
|
||||||
|
y="185"
|
||||||
|
width="45"
|
||||||
|
height="60"
|
||||||
|
/>
|
||||||
|
<text x="1370" y="255" fill="#ffffff" font-size="12">光伏</text>
|
||||||
|
<polyline
|
||||||
|
points="1380,55 1380,200"
|
||||||
|
fill="none"
|
||||||
|
class="g-rect-path"
|
||||||
|
stroke="#0094FF"
|
||||||
|
stroke-width="1"
|
||||||
|
/>
|
||||||
|
<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('1-ammeter')"
|
||||||
|
/>
|
||||||
|
<text x="155" y="160" fill="#ffffff" font-size="14">电表4</text>
|
||||||
|
<g v-for="(item,index) in ammeter_1" :key="item.id">
|
||||||
|
<text x="95" :y="175 + ( 20 * index)" fill="#ffffff" font-size="14">
|
||||||
|
{{ item.name }}
|
||||||
|
</text>
|
||||||
|
<text :x="countChineseAndEnglishCharacters(item.name,95)" :y="175 + ( 20 * index)" fill="#FFB800" font-size="14">
|
||||||
|
{{ item.value }}
|
||||||
|
</text>
|
||||||
|
</g>
|
||||||
|
<image
|
||||||
|
:xlink:href="AY"
|
||||||
|
x="595"
|
||||||
|
y="185"
|
||||||
|
width="70"
|
||||||
|
height="50"
|
||||||
|
/>
|
||||||
|
<polyline
|
||||||
|
points="630,235 630,250"
|
||||||
|
fill="none"
|
||||||
|
class="g-rect-path"
|
||||||
|
stroke="#0094FF"
|
||||||
|
stroke-width="1"
|
||||||
|
/>
|
||||||
|
<text x="1000" y="245" fill="#ffffff" font-size="16">400V</text>
|
||||||
|
<polyline
|
||||||
|
points="150,250 1050,250"
|
||||||
|
fill="none"
|
||||||
|
class="g-rect-path"
|
||||||
|
stroke="#0094FF"
|
||||||
|
stroke-width="2"
|
||||||
|
/>
|
||||||
|
<polyline
|
||||||
|
points="350,250 350,300"
|
||||||
|
fill="none"
|
||||||
|
class="g-rect-path"
|
||||||
|
stroke="#0094FF"
|
||||||
|
stroke-width="1"
|
||||||
|
/>
|
||||||
|
<polyline
|
||||||
|
points="850,250 850,300"
|
||||||
|
fill="none"
|
||||||
|
class="g-rect-path"
|
||||||
|
stroke="#0094FF"
|
||||||
|
stroke-width="1"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<text x="10" y="430" fill="#ffffff" font-size="14">工作状态</text>
|
||||||
|
|
||||||
|
<text x="10" y="460" fill="#ffffff" font-size="14">有功功率(kW)</text>
|
||||||
|
<text x="10" y="490" fill="#ffffff" font-size="14">SOC(%)</text>
|
||||||
|
<text x="10" y="520" fill="#ffffff" font-size="14">SOH(%)</text>
|
||||||
|
<g transform="translate(50,-30)">
|
||||||
|
<rect
|
||||||
|
x="40"
|
||||||
|
y="330"
|
||||||
|
width="580"
|
||||||
|
height="100"
|
||||||
|
rx="3"
|
||||||
|
:style="{ fill: 'transparent', stroke: '#FFFFFF' }"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<rect
|
||||||
|
x="640"
|
||||||
|
y="330"
|
||||||
|
width="680"
|
||||||
|
height="100"
|
||||||
|
rx="3"
|
||||||
|
:style="{ fill: 'transparent', stroke: '#FFFFFF' }"
|
||||||
|
/>
|
||||||
|
<text x="50" y="348" fill="#ffffff" font-size="14">1#储能柜</text>
|
||||||
|
<text x="65" y="460" fill="#FFB800" font-size="14">{{ pcsData_1.length ? pcsData_1[0].value : '' }}</text>
|
||||||
|
<text x="65" y="490" fill="#FFB800" font-size="14">{{ pcsData_1.length > 1 ? pcsData_1[1].value : '' }}</text>
|
||||||
|
<text x="65" y="520" fill="#FFB800" font-size="14">{{ pcsData_1.length > 2 ? pcsData_1[2].value : '' }}</text>
|
||||||
|
<text x="65" y="550" fill="#FFB800" font-size="14">{{ pcsData_1.length > 3 ? pcsData_1[3].value : '' }}</text>
|
||||||
|
<image
|
||||||
|
:xlink:href="cabinetImg"
|
||||||
|
x="55"
|
||||||
|
y="353"
|
||||||
|
width="60"
|
||||||
|
height="60"
|
||||||
|
style="cursor: pointer;"
|
||||||
|
@click="lookDeviceDetail('aopu10-1-pcs')"
|
||||||
|
/>
|
||||||
|
<text x="120" y="348" fill="#ffffff" font-size="14">2#储能柜</text>
|
||||||
|
<text x="135" y="460" fill="#FFB800" font-size="14">{{ pcsData_2.length ? pcsData_2[0].value : '' }}</text>
|
||||||
|
<text x="135" y="490" fill="#FFB800" font-size="14">{{ pcsData_2.length > 1 ? pcsData_2[1].value : '' }}</text>
|
||||||
|
<text x="135" y="520" fill="#FFB800" font-size="14">{{ pcsData_2.length > 2 ? pcsData_2[2].value : '' }}</text>
|
||||||
|
<text x="135" y="550" fill="#FFB800" font-size="14">{{ pcsData_2.length > 3 ? pcsData_2[3].value : '' }}</text>
|
||||||
|
<image
|
||||||
|
:xlink:href="cabinetImg"
|
||||||
|
x="125"
|
||||||
|
y="353"
|
||||||
|
width="60"
|
||||||
|
height="60"
|
||||||
|
style="cursor: pointer;"
|
||||||
|
@click="lookDeviceDetail('aopu10-2-pcs')"
|
||||||
|
/>
|
||||||
|
<text x="190" y="348" fill="#ffffff" font-size="14">3#储能柜</text>
|
||||||
|
<text x="205" y="460" fill="#FFB800" font-size="14">{{ pcsData_3.length ? pcsData_3[0].value : '' }}</text>
|
||||||
|
<text x="205" y="490" fill="#FFB800" font-size="14">{{ pcsData_3.length > 1 ? pcsData_3[1].value : '' }}</text>
|
||||||
|
<text x="205" y="520" fill="#FFB800" font-size="14">{{ pcsData_3.length > 2 ? pcsData_3[2].value : '' }}</text>
|
||||||
|
<text x="205" y="550" fill="#FFB800" font-size="14">{{ pcsData_3.length > 3 ? pcsData_3[3].value : '' }}</text>
|
||||||
|
<image
|
||||||
|
:xlink:href="cabinetImg"
|
||||||
|
x="195"
|
||||||
|
y="353"
|
||||||
|
width="60"
|
||||||
|
height="60"
|
||||||
|
style="cursor: pointer;"
|
||||||
|
@click="lookDeviceDetail('aopu10-3-pcs')"
|
||||||
|
/>
|
||||||
|
<text x="260" y="348" fill="#ffffff" font-size="14">4#储能柜</text>
|
||||||
|
<text x="275" y="460" fill="#FFB800" font-size="14">{{ pcsData_4.length ? pcsData_4[0].value : '' }}</text>
|
||||||
|
<text x="275" y="490" fill="#FFB800" font-size="14">{{ pcsData_4.length > 1 ? pcsData_4[1].value : '' }}</text>
|
||||||
|
<text x="275" y="520" fill="#FFB800" font-size="14">{{ pcsData_4.length > 2 ? pcsData_4[2].value : '' }}</text>
|
||||||
|
<text x="275" y="550" fill="#FFB800" font-size="14">{{ pcsData_4.length > 3 ? pcsData_4[3].value : '' }}</text>
|
||||||
|
<image
|
||||||
|
:xlink:href="cabinetImg"
|
||||||
|
x="265"
|
||||||
|
y="353"
|
||||||
|
width="60"
|
||||||
|
height="60"
|
||||||
|
style="cursor: pointer;"
|
||||||
|
@click="lookDeviceDetail('aopu10-4-pcs')"
|
||||||
|
/>
|
||||||
|
<text x="330" y="348" fill="#ffffff" font-size="14">5#储能柜</text>
|
||||||
|
<text x="345" y="460" fill="#FFB800" font-size="14">{{ pcsData_5.length ? pcsData_5[0].value : '' }}</text>
|
||||||
|
<text x="345" y="490" fill="#FFB800" font-size="14">{{ pcsData_5.length > 1 ? pcsData_5[1].value : '' }}</text>
|
||||||
|
<text x="345" y="520" fill="#FFB800" font-size="14">{{ pcsData_5.length > 2 ? pcsData_5[2].value : '' }}</text>
|
||||||
|
<text x="345" y="550" fill="#FFB800" font-size="14">{{ pcsData_5.length > 3 ? pcsData_5[3].value : '' }}</text>
|
||||||
|
<image
|
||||||
|
:xlink:href="cabinetImg"
|
||||||
|
x="335"
|
||||||
|
y="353"
|
||||||
|
width="60"
|
||||||
|
height="60"
|
||||||
|
style="cursor: pointer;"
|
||||||
|
@click="lookDeviceDetail('aopu10-5-pcs')"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<text x="400" y="348" fill="#ffffff" font-size="14">6#储能柜</text>
|
||||||
|
<text x="415" y="460" fill="#FFB800" font-size="14">{{ pcsData_6.length ? pcsData_6[0].value : '' }}</text>
|
||||||
|
<text x="415" y="490" fill="#FFB800" font-size="14">{{ pcsData_6.length > 1 ? pcsData_6[1].value : '' }}</text>
|
||||||
|
<text x="415" y="520" fill="#FFB800" font-size="14">{{ pcsData_6.length > 2 ? pcsData_6[2].value : '' }}</text>
|
||||||
|
<text x="415" y="550" fill="#FFB800" font-size="14">{{ pcsData_6.length > 3 ? pcsData_6[3].value : '' }}</text>
|
||||||
|
<image
|
||||||
|
:xlink:href="cabinetImg"
|
||||||
|
x="405"
|
||||||
|
y="353"
|
||||||
|
width="60"
|
||||||
|
height="60"
|
||||||
|
style="cursor: pointer;"
|
||||||
|
@click="lookDeviceDetail('aopu10-6-pcs')"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<text x="470" y="348" fill="#ffffff" font-size="14">7#储能柜</text>
|
||||||
|
<text x="485" y="460" fill="#FFB800" font-size="14">{{ pcsData_7.length ? pcsData_7[0].value : '' }}</text>
|
||||||
|
<text x="485" y="490" fill="#FFB800" font-size="14">{{ pcsData_7.length > 1 ? pcsData_7[1].value : '' }}</text>
|
||||||
|
<text x="485" y="520" fill="#FFB800" font-size="14">{{ pcsData_7.length > 2 ? pcsData_7[2].value : '' }}</text>
|
||||||
|
<text x="485" y="550" fill="#FFB800" font-size="14">{{ pcsData_7.length > 3 ? pcsData_7[3].value : '' }}</text>
|
||||||
|
<image
|
||||||
|
:xlink:href="cabinetImg"
|
||||||
|
x="475"
|
||||||
|
y="353"
|
||||||
|
width="60"
|
||||||
|
height="60"
|
||||||
|
style="cursor: pointer;"
|
||||||
|
@click="lookDeviceDetail('aopu10-7-pcs')"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<text x="540" y="348" fill="#ffffff" font-size="14">8#储能柜</text>
|
||||||
|
<text x="555" y="460" fill="#FFB800" font-size="14">{{ pcsData_8.length ? pcsData_8[0].value : '' }}</text>
|
||||||
|
<text x="555" y="490" fill="#FFB800" font-size="14">{{ pcsData_8.length > 1 ? pcsData_8[1].value : '' }}</text>
|
||||||
|
<text x="555" y="520" fill="#FFB800" font-size="14">{{ pcsData_8.length > 2 ? pcsData_8[2].value : '' }}</text>
|
||||||
|
<text x="555" y="550" fill="#FFB800" font-size="14">{{ pcsData_8.length > 3 ? pcsData_8[3].value : '' }}</text>
|
||||||
|
<image
|
||||||
|
:xlink:href="cabinetImg"
|
||||||
|
x="545"
|
||||||
|
y="353"
|
||||||
|
width="60"
|
||||||
|
height="60"
|
||||||
|
style="cursor: pointer;"
|
||||||
|
@click="lookDeviceDetail('aopu10-8-pcs')"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<text x="650" y="348" fill="#ffffff" font-size="14">9#储能柜</text>
|
||||||
|
<text x="665" y="460" fill="#FFB800" font-size="14">{{ pcsData_9.length ? pcsData_9[0].value : '' }}</text>
|
||||||
|
<text x="665" y="490" fill="#FFB800" font-size="14">{{ pcsData_9.length > 1 ? pcsData_9[1].value : '' }}</text>
|
||||||
|
<text x="665" y="520" fill="#FFB800" font-size="14">{{ pcsData_9.length > 2 ? pcsData_9[2].value : '' }}</text>
|
||||||
|
<text x="665" y="550" fill="#FFB800" font-size="14">{{ pcsData_9.length > 3 ? pcsData_9[3].value : '' }}</text>
|
||||||
|
<image
|
||||||
|
:xlink:href="cabinetImg"
|
||||||
|
x="655"
|
||||||
|
y="353"
|
||||||
|
width="60"
|
||||||
|
height="60"
|
||||||
|
style="cursor: pointer;"
|
||||||
|
@click="lookDeviceDetail('aopu10-9-pcs')"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<text x="720" y="348" fill="#ffffff" font-size="14">10#储能柜</text>
|
||||||
|
<text x="735" y="460" fill="#FFB800" font-size="14">{{ pcsData_10.length ? pcsData_10[0].value : '' }}</text>
|
||||||
|
<text x="735" y="490" fill="#FFB800" font-size="14">{{ pcsData_10.length > 1 ? pcsData_10[1].value : '' }}</text>
|
||||||
|
<text x="735" y="520" fill="#FFB800" font-size="14">{{ pcsData_10.length > 2 ? pcsData_10[2].value : '' }}</text>
|
||||||
|
<text x="735" y="550" fill="#FFB800" font-size="14">{{ pcsData_10.length > 3 ? pcsData_10[3].value : '' }}</text>
|
||||||
|
<image
|
||||||
|
:xlink:href="cabinetImg"
|
||||||
|
x="725"
|
||||||
|
y="353"
|
||||||
|
width="60"
|
||||||
|
height="60"
|
||||||
|
style="cursor: pointer;"
|
||||||
|
@click="lookDeviceDetail('aopu10-10-pcs')"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<text x="790" y="348" fill="#ffffff" font-size="14">11#储能柜</text>
|
||||||
|
<text x="805" y="460" fill="#FFB800" font-size="14">{{ pcsData_11.length ? pcsData_11[0].value : '' }}</text>
|
||||||
|
<text x="805" y="490" fill="#FFB800" font-size="14">{{ pcsData_11.length > 1 ? pcsData_11[1].value : '' }}</text>
|
||||||
|
<text x="805" y="520" fill="#FFB800" font-size="14">{{ pcsData_11.length > 2 ? pcsData_11[2].value : '' }}</text>
|
||||||
|
<text x="805" y="550" fill="#FFB800" font-size="14">{{ pcsData_11.length > 3 ? pcsData_11[3].value : '' }}</text>
|
||||||
|
<image
|
||||||
|
:xlink:href="cabinetImg"
|
||||||
|
x="795"
|
||||||
|
y="353"
|
||||||
|
width="60"
|
||||||
|
height="60"
|
||||||
|
style="cursor: pointer;"
|
||||||
|
@click="lookDeviceDetail('11-pcs')"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<text x="860" y="348" fill="#ffffff" font-size="14">12#储能柜</text>
|
||||||
|
<text x="875" y="460" fill="#FFB800" font-size="14">{{ pcsData_12.length ? pcsData_12[0].value : '' }}</text>
|
||||||
|
<text x="875" y="490" fill="#FFB800" font-size="14">{{ pcsData_12.length > 1 ? pcsData_12[1].value : '' }}</text>
|
||||||
|
<text x="875" y="520" fill="#FFB800" font-size="14">{{ pcsData_12.length > 2 ? pcsData_12[2].value : '' }}</text>
|
||||||
|
<text x="875" y="550" fill="#FFB800" font-size="14">{{ pcsData_12.length > 3 ? pcsData_12[3].value : '' }}</text>
|
||||||
|
<image
|
||||||
|
:xlink:href="cabinetImg"
|
||||||
|
x="865"
|
||||||
|
y="353"
|
||||||
|
width="60"
|
||||||
|
height="60"
|
||||||
|
style="cursor: pointer;"
|
||||||
|
@click="lookDeviceDetail('12-pcs')"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<text x="930" y="348" fill="#ffffff" font-size="14">13#储能柜</text>
|
||||||
|
<text x="945" y="460" fill="#FFB800" font-size="14">{{ pcsData_13.length ? pcsData_13[0].value : '' }}</text>
|
||||||
|
<text x="945" y="490" fill="#FFB800" font-size="14">{{ pcsData_13.length > 1 ? pcsData_13[1].value : '' }}</text>
|
||||||
|
<text x="945" y="520" fill="#FFB800" font-size="14">{{ pcsData_13.length > 2 ? pcsData_13[2].value : '' }}</text>
|
||||||
|
<text x="945" y="550" fill="#FFB800" font-size="14">{{ pcsData_13.length > 3 ? pcsData_13[3].value : '' }}</text>
|
||||||
|
<image
|
||||||
|
:xlink:href="cabinetImg"
|
||||||
|
x="935"
|
||||||
|
y="353"
|
||||||
|
width="60"
|
||||||
|
height="60"
|
||||||
|
style="cursor: pointer;"
|
||||||
|
@click="lookDeviceDetail('13-pcs')"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<text x="1000" y="348" fill="#ffffff" font-size="14">14#储能柜</text>
|
||||||
|
<text x="1015" y="460" fill="#FFB800" font-size="14">{{ pcsData_14.length ? pcsData_14[0].value : '' }}</text>
|
||||||
|
<text x="1015" y="490" fill="#FFB800" font-size="14">{{ pcsData_14.length > 1 ? pcsData_14[1].value : '' }}</text>
|
||||||
|
<text x="1015" y="520" fill="#FFB800" font-size="14">{{ pcsData_14.length > 2 ? pcsData_14[2].value : '' }}</text>
|
||||||
|
<text x="1015" y="550" fill="#FFB800" font-size="14">{{ pcsData_14.length > 3 ? pcsData_14[3].value : '' }}</text>
|
||||||
|
<image
|
||||||
|
:xlink:href="cabinetImg"
|
||||||
|
x="1005"
|
||||||
|
y="353"
|
||||||
|
width="60"
|
||||||
|
height="60"
|
||||||
|
style="cursor: pointer;"
|
||||||
|
@click="lookDeviceDetail('14-pcs')"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<text x="1070" y="348" fill="#ffffff" font-size="14">15#储能柜</text>
|
||||||
|
<text x="1085" y="460" fill="#FFB800" font-size="14">{{ pcsData_15.length ? pcsData_15[0].value : '' }}</text>
|
||||||
|
<text x="1085" y="490" fill="#FFB800" font-size="14">{{ pcsData_15.length > 1 ? pcsData_15[1].value : '' }}</text>
|
||||||
|
<text x="1085" y="520" fill="#FFB800" font-size="14">{{ pcsData_15.length > 2 ? pcsData_15[2].value : '' }}</text>
|
||||||
|
<text x="1085" y="550" fill="#FFB800" font-size="14">{{ pcsData_15.length > 3 ? pcsData_15[3].value : '' }}</text>
|
||||||
|
<image
|
||||||
|
:xlink:href="cabinetImg"
|
||||||
|
x="1075"
|
||||||
|
y="353"
|
||||||
|
width="60"
|
||||||
|
height="60"
|
||||||
|
style="cursor: pointer;"
|
||||||
|
@click="lookDeviceDetail('15-pcs')"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<text x="1140" y="348" fill="#ffffff" font-size="14">16#储能柜</text>
|
||||||
|
<text x="1155" y="460" fill="#FFB800" font-size="14">{{ pcsData_16.length ? pcsData_16[0].value : '' }}</text>
|
||||||
|
<text x="1155" y="490" fill="#FFB800" font-size="14">{{ pcsData_16.length > 1 ? pcsData_16[1].value : '' }}</text>
|
||||||
|
<text x="1155" y="520" fill="#FFB800" font-size="14">{{ pcsData_16.length > 2 ? pcsData_16[2].value : '' }}</text>
|
||||||
|
<text x="1155" y="550" fill="#FFB800" font-size="14">{{ pcsData_16.length > 3 ? pcsData_16[3].value : '' }}</text>
|
||||||
|
<image
|
||||||
|
:xlink:href="cabinetImg"
|
||||||
|
x="1145"
|
||||||
|
y="353"
|
||||||
|
width="60"
|
||||||
|
height="60"
|
||||||
|
style="cursor: pointer;"
|
||||||
|
@click="lookDeviceDetail('16-pcs')"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<text x="1210" y="348" fill="#ffffff" font-size="14">17#储能柜</text>
|
||||||
|
<text x="1225" y="460" fill="#FFB800" font-size="14">{{ pcsData_17.length ? pcsData_17[0].value : '' }}</text>
|
||||||
|
<text x="1225" y="490" fill="#FFB800" font-size="14">{{ pcsData_17.length > 1 ? pcsData_17[1].value : '' }}</text>
|
||||||
|
<text x="1225" y="520" fill="#FFB800" font-size="14">{{ pcsData_17.length > 2 ? pcsData_17[2].value : '' }}</text>
|
||||||
|
<text x="1225" y="550" fill="#FFB800" font-size="14">{{ pcsData_17.length > 3 ? pcsData_17[3].value : '' }}</text>
|
||||||
|
<image
|
||||||
|
:xlink:href="cabinetImg"
|
||||||
|
x="1215"
|
||||||
|
y="353"
|
||||||
|
width="60"
|
||||||
|
height="60"
|
||||||
|
style="cursor: pointer;"
|
||||||
|
@click="lookDeviceDetail('17-pcs')"
|
||||||
|
/>
|
||||||
|
</g>
|
||||||
|
|
||||||
|
<polyline
|
||||||
|
points="500,115 630,115"
|
||||||
|
fill="none"
|
||||||
|
class="g-rect-path"
|
||||||
|
stroke="#0094FF"
|
||||||
|
stroke-dasharray="3 3"
|
||||||
|
/>
|
||||||
|
<polyline
|
||||||
|
points="630,55 630,185"
|
||||||
|
fill="none"
|
||||||
|
class="g-rect-path"
|
||||||
|
stroke="#0094FF"
|
||||||
|
stroke-width="1"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<image
|
||||||
|
:xlink:href="ammeterImg"
|
||||||
|
x="460"
|
||||||
|
y="90"
|
||||||
|
width="70"
|
||||||
|
height="50"
|
||||||
|
style="cursor: pointer;"
|
||||||
|
@click="lookDeviceDetail('2-ammeter')"
|
||||||
|
/>
|
||||||
|
<text x="475" y="160" fill="#ffffff" font-size="14">电表3</text>
|
||||||
|
<g v-for="(item,index) in ammeter_2" :key="item.id">
|
||||||
|
<text x="410" :y="175 + ( 20 * index)" fill="#ffffff" font-size="14">
|
||||||
|
{{ item.name }}
|
||||||
|
</text>
|
||||||
|
<text :x="countChineseAndEnglishCharacters(item.name,410)" :y="175 + ( 20 * index)" fill="#FFB800" font-size="14">
|
||||||
|
{{ item.value }}
|
||||||
|
</text>
|
||||||
|
</g>
|
||||||
|
<image
|
||||||
|
:xlink:href="ammeterImg"
|
||||||
|
x="810"
|
||||||
|
y="90"
|
||||||
|
width="70"
|
||||||
|
height="50"
|
||||||
|
style="cursor: pointer;"
|
||||||
|
@click="lookDeviceDetail('3-ammeter')"
|
||||||
|
/>
|
||||||
|
<text x="825" y="160" fill="#ffffff" font-size="14">电表2</text>
|
||||||
|
<g v-for="(item,index) in ammeter_3" :key="item.id">
|
||||||
|
<text x="765" :y="175 + ( 20 * index)" fill="#ffffff" font-size="14">
|
||||||
|
{{ item.name }}
|
||||||
|
</text>
|
||||||
|
<text :x="countChineseAndEnglishCharacters(item.name,765)" :y="175 + ( 20 * index)" fill="#FFB800" font-size="14">
|
||||||
|
{{ item.value }}
|
||||||
|
</text>
|
||||||
|
</g>
|
||||||
|
|
||||||
|
<polyline
|
||||||
|
points="840,55 840,100"
|
||||||
|
fill="none"
|
||||||
|
class="g-rect-path"
|
||||||
|
stroke="#0094FF"
|
||||||
|
stroke-dasharray="3 3"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<image
|
||||||
|
:xlink:href="chargingPileImg"
|
||||||
|
x="1068"
|
||||||
|
y="185"
|
||||||
|
width="70"
|
||||||
|
height="50"
|
||||||
|
/>
|
||||||
|
<text x="1090" y="255" fill="#ffffff" font-size="12">负载</text>
|
||||||
|
<polyline
|
||||||
|
points="1100,55 1100,210"
|
||||||
|
fill="none"
|
||||||
|
class="g-rect-path"
|
||||||
|
stroke="#0094FF"
|
||||||
|
stroke-width="1"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<polyline
|
||||||
|
points="1230,115 1380,115"
|
||||||
|
fill="none"
|
||||||
|
class="g-rect-path"
|
||||||
|
stroke="#0094FF"
|
||||||
|
stroke-dasharray="3 3"
|
||||||
|
/>
|
||||||
|
<image
|
||||||
|
:xlink:href="ammeterImg"
|
||||||
|
x="1180"
|
||||||
|
y="90"
|
||||||
|
width="70"
|
||||||
|
height="50"
|
||||||
|
style="cursor: pointer;"
|
||||||
|
@click="lookDeviceDetail('4-ammeter')"
|
||||||
|
/>
|
||||||
|
<text x="1200" y="160" fill="#ffffff" font-size="14">电表1</text>
|
||||||
|
<g v-for="(item,index) in ammeter_4" :key="item.id">
|
||||||
|
<text x="1140" :y="175 + ( 20 * index)" fill="#ffffff" font-size="14">
|
||||||
|
{{ item.name }}
|
||||||
|
</text>
|
||||||
|
<text :x="countChineseAndEnglishCharacters(item.name,1140)" :y="175 + ( 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('1-break')"
|
||||||
|
/>
|
||||||
|
<rect
|
||||||
|
x="625"
|
||||||
|
y="140"
|
||||||
|
width="12"
|
||||||
|
height="22"
|
||||||
|
:style="{ fill: break_2.length ? getBreakColor(break_2[0].value) : '#888888', stroke: 'transparent',cursor: 'pointer' }"
|
||||||
|
@click="lookDeviceDetail('2-break')"
|
||||||
|
/>
|
||||||
|
<rect
|
||||||
|
x="1095"
|
||||||
|
y="140"
|
||||||
|
width="12"
|
||||||
|
height="22"
|
||||||
|
:style="{ fill: break_3.length ? getBreakColor(break_3[0].value) : '#888888', stroke: 'transparent',cursor: 'pointer' }"
|
||||||
|
@click="lookDeviceDetail('3-break')"
|
||||||
|
/>
|
||||||
|
<rect
|
||||||
|
x="1374"
|
||||||
|
y="140"
|
||||||
|
width="12"
|
||||||
|
height="22"
|
||||||
|
:style="{ fill: break_4.length ? getBreakColor(break_4[0].value) : '#888888', stroke: 'transparent',cursor: 'pointer' }"
|
||||||
|
@click="lookDeviceDetail('4-break')"
|
||||||
|
/>
|
||||||
|
<rect
|
||||||
|
x="345"
|
||||||
|
y="265"
|
||||||
|
width="12"
|
||||||
|
height="22"
|
||||||
|
:style="{ fill: break_5.length ? getBreakColor(break_5[0].value) : '#888888', stroke: 'transparent',cursor: 'pointer' }"
|
||||||
|
@click="lookDeviceDetail('5-break')"
|
||||||
|
/>
|
||||||
|
<rect
|
||||||
|
x="845"
|
||||||
|
y="265"
|
||||||
|
width="12"
|
||||||
|
height="22"
|
||||||
|
:style="{ fill: break_6.length ? getBreakColor(break_6[0].value) : '#888888', stroke: 'transparent',cursor: 'pointer' }"
|
||||||
|
@click="lookDeviceDetail('6-break')"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<dispositionPointDialog
|
||||||
|
is-topology
|
||||||
|
:show-div-location="true"
|
||||||
|
:max-length="12"
|
||||||
|
:page-location="pageLocation"
|
||||||
|
:visible="show_point_dispostion"
|
||||||
|
@close="closePoint"
|
||||||
|
@getData="getDynamicPointData"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
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'
|
||||||
|
export default {
|
||||||
|
props: {
|
||||||
|
stationId: {
|
||||||
|
type: Number,
|
||||||
|
default: 0
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
gridImg,
|
||||||
|
ammeterImg,
|
||||||
|
AY,
|
||||||
|
FrameImg,
|
||||||
|
cabinetImg,
|
||||||
|
chargingPileImg,
|
||||||
|
pageLocation: '',
|
||||||
|
permissionId: null,
|
||||||
|
loading: false,
|
||||||
|
show_point_dispostion: false,
|
||||||
|
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: [],
|
||||||
|
pcsData_16: [],
|
||||||
|
pcsData_17: [],
|
||||||
|
ammeter_1: [],
|
||||||
|
ammeter_2: [],
|
||||||
|
ammeter_3: [],
|
||||||
|
ammeter_4: [],
|
||||||
|
break_1: [],
|
||||||
|
break_2: [],
|
||||||
|
break_3: [],
|
||||||
|
break_4: [],
|
||||||
|
break_5: [],
|
||||||
|
break_6: []
|
||||||
|
|
||||||
|
}
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
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')
|
||||||
|
},
|
||||||
|
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.pcsData_16 = []
|
||||||
|
this.pcsData_17 = []
|
||||||
|
this.ammeter_1 = []
|
||||||
|
this.ammeter_2 = []
|
||||||
|
this.ammeter_3 = []
|
||||||
|
this.ammeter_4 = []
|
||||||
|
this.break_1 = []
|
||||||
|
this.break_2 = []
|
||||||
|
this.break_3 = []
|
||||||
|
this.break_4 = []
|
||||||
|
this.break_5 = []
|
||||||
|
this.break_6 = []
|
||||||
|
if (res.data.length) {
|
||||||
|
res.data.forEach((item) => {
|
||||||
|
if (item.pageLocation === '1-pcs') {
|
||||||
|
this.pcsData_1.push(item)
|
||||||
|
} else if (item.pageLocation === '2-pcs') {
|
||||||
|
this.pcsData_2.push(item)
|
||||||
|
} else if (item.pageLocation === '3-pcs') {
|
||||||
|
this.pcsData_3.push(item)
|
||||||
|
} else if (item.pageLocation === '4-pcs') {
|
||||||
|
this.pcsData_4.push(item)
|
||||||
|
} else if (item.pageLocation === '5-pcs') {
|
||||||
|
this.pcsData_5.push(item)
|
||||||
|
} else if (item.pageLocation === '6-pcs') {
|
||||||
|
this.pcsData_6.push(item)
|
||||||
|
} else if (item.pageLocation === '7-pcs') {
|
||||||
|
this.pcsData_7.push(item)
|
||||||
|
} else if (item.pageLocation === '8-pcs') {
|
||||||
|
this.pcsData_8.push(item)
|
||||||
|
} else if (item.pageLocation === '9-pcs') {
|
||||||
|
this.pcsData_9.push(item)
|
||||||
|
} else if (item.pageLocation === '10-pcs') {
|
||||||
|
this.pcsData_10.push(item)
|
||||||
|
} else if (item.pageLocation === '11-pcs') {
|
||||||
|
this.pcsData_11.push(item)
|
||||||
|
} else if (item.pageLocation === '12-pcs') {
|
||||||
|
this.pcsData_12.push(item)
|
||||||
|
} else if (item.pageLocation === '13-pcs') {
|
||||||
|
this.pcsData_13.push(item)
|
||||||
|
} else if (item.pageLocation === '14-pcs') {
|
||||||
|
this.pcsData_14.push(item)
|
||||||
|
} else if (item.pageLocation === '15-pcs') {
|
||||||
|
this.pcsData_15.push(item)
|
||||||
|
} else if (item.pageLocation === '16-pcs') {
|
||||||
|
this.pcsData_16.push(item)
|
||||||
|
} else if (item.pageLocation === '17-pcs') {
|
||||||
|
this.pcsData_17.push(item)
|
||||||
|
} else if (item.pageLocation === '1-ammeter') {
|
||||||
|
this.ammeter_1.push(item)
|
||||||
|
} else if (item.pageLocation === '2-ammeter') {
|
||||||
|
this.ammeter_2.push(item)
|
||||||
|
} else if (item.pageLocation === '3-ammeter') {
|
||||||
|
this.ammeter_3.push(item)
|
||||||
|
} else if (item.pageLocation === '4-ammeter') {
|
||||||
|
this.ammeter_4.push(item)
|
||||||
|
} else if (item.pageLocation === '1-break') {
|
||||||
|
this.break_1.push(item)
|
||||||
|
} else if (item.pageLocation === '2-break') {
|
||||||
|
this.break_2.push(item)
|
||||||
|
} else if (item.pageLocation === '3-break') {
|
||||||
|
this.break_3.push(item)
|
||||||
|
} else if (item.pageLocation === '4-break') {
|
||||||
|
this.break_4.push(item)
|
||||||
|
} else if (item.pageLocation === '5-break') {
|
||||||
|
this.break_5.push(item)
|
||||||
|
} else if (item.pageLocation === '6-break') {
|
||||||
|
this.break_6.push(item)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
console.log(this.pcsData_1, this.pcsData_2)
|
||||||
|
// this.allData = res.data
|
||||||
|
} 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>
|
||||||
169
src/views/dashboard-zhongzi/index.vue
Normal file
169
src/views/dashboard-zhongzi/index.vue
Normal file
@ -0,0 +1,169 @@
|
|||||||
|
<template>
|
||||||
|
<div class="home-container">
|
||||||
|
<el-row :gutter="10" style="height: 100%;">
|
||||||
|
<el-col :xs="24" :sm="24" :md="24" :lg="6" :xl="6" :offset="0" style="height: 100%; display: flex;flex-direction: column;">
|
||||||
|
<div class="component-wrapper">
|
||||||
|
<topLeft ref="leftTop" :station-id="stationId" @handleSetting="handleStationSetting" />
|
||||||
|
</div>
|
||||||
|
<div class="component-bottom">
|
||||||
|
<bottomLeft ref="leftBottom" :station-id="stationId" @handleSetting="handleAirSetting" />
|
||||||
|
</div>
|
||||||
|
</el-col>
|
||||||
|
<el-col :xs="24" :sm="24" :md="24" :lg="18" :xl="18" :offset="0" style="height: 100%;">
|
||||||
|
<topRight ref="topRight" :station-id="stationId" @handleSetting="handleSetting" @toScale="toScale" />
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
|
||||||
|
<dispostionDialog :visible="show_dispostion" page-location="runChart" @close="close" @getData="getDynamicData" />
|
||||||
|
<!-- <el-dialog
|
||||||
|
:append-to-body="true" title="站点拓扑" :visible.sync="dialogVisible" width="90%" top="40px" center :close-on-click-modal="false">
|
||||||
|
|
||||||
|
<topology ref="topology" :station-id="stationId" />
|
||||||
|
<span slot="footer" class="dialog-footer">
|
||||||
|
<el-button type="primary" @click="dialogVisible = false">关 闭</el-button>
|
||||||
|
</span>
|
||||||
|
|
||||||
|
</el-dialog> -->
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import topRight from './components/top-right/index.vue'
|
||||||
|
import topLeft from './components/top-left/index.vue'
|
||||||
|
import bottomLeft from './components/bottom-left/index.vue'
|
||||||
|
export default {
|
||||||
|
name: 'Index',
|
||||||
|
components: {
|
||||||
|
topRight, topLeft, bottomLeft
|
||||||
|
},
|
||||||
|
props: {},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
stationId: null,
|
||||||
|
interval: null,
|
||||||
|
show_dispostion: false,
|
||||||
|
dialogVisible: false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
currentStation() {
|
||||||
|
return this.$store.getters.currentStation || undefined
|
||||||
|
},
|
||||||
|
stationStatus() {
|
||||||
|
return this.$store.getters.stationStatus || undefined
|
||||||
|
},
|
||||||
|
language() {
|
||||||
|
return this.$store.getters.language || undefined
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
watch: {
|
||||||
|
currentStation: {
|
||||||
|
handler(val) {
|
||||||
|
if (val && val.id) {
|
||||||
|
const self = this
|
||||||
|
if (self.interval) {
|
||||||
|
clearInterval(self.interval)
|
||||||
|
self.interval = null
|
||||||
|
}
|
||||||
|
this.stationId = val.id
|
||||||
|
this.$nextTick(() => {
|
||||||
|
this.getAllData()
|
||||||
|
self.interval = setInterval(() => {
|
||||||
|
this.getAllData()
|
||||||
|
}, 30000)
|
||||||
|
})
|
||||||
|
}
|
||||||
|
},
|
||||||
|
deep: true,
|
||||||
|
immediate: true
|
||||||
|
},
|
||||||
|
language: {
|
||||||
|
handler() {
|
||||||
|
this.$refs.leftBottom.getData()
|
||||||
|
}
|
||||||
|
},
|
||||||
|
deep: true
|
||||||
|
},
|
||||||
|
|
||||||
|
created() {
|
||||||
|
|
||||||
|
},
|
||||||
|
beforeDestroy() {
|
||||||
|
clearInterval(this.interval)
|
||||||
|
this.interval = null
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
toScale() {
|
||||||
|
this.dialogVisible = true
|
||||||
|
this.$nextTick(() => {
|
||||||
|
// debugger
|
||||||
|
this.$refs.topology.getData()
|
||||||
|
})
|
||||||
|
},
|
||||||
|
handleCurveSetting() {
|
||||||
|
this.show_dispostion = true
|
||||||
|
},
|
||||||
|
getDynamicData() {
|
||||||
|
// this.$refs.bottomRight.getData()
|
||||||
|
},
|
||||||
|
close() {
|
||||||
|
this.show_dispostion = false
|
||||||
|
},
|
||||||
|
handleStationSetting() {
|
||||||
|
this.$refs.leftTop.show_point_dispostion = true
|
||||||
|
},
|
||||||
|
handleAirSetting() {
|
||||||
|
this.$refs.leftBottom.show_point_dispostion = true
|
||||||
|
},
|
||||||
|
handleSetting() {
|
||||||
|
this.$refs.topRight.show_point_dispostion = true
|
||||||
|
},
|
||||||
|
getAllData() {
|
||||||
|
this.$refs.leftTop.getData()
|
||||||
|
this.$refs.leftBottom.getData()
|
||||||
|
this.$refs.topRight.getData()
|
||||||
|
// this.$refs.bottomRight.getData()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.home-container {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
overflow-y: auto;
|
||||||
|
overflow-x: hidden;
|
||||||
|
|
||||||
|
.top-wrapper {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
height: 560px;
|
||||||
|
min-height: 560px;
|
||||||
|
padding-bottom: 10px;
|
||||||
|
|
||||||
|
}
|
||||||
|
.component-wrapper {
|
||||||
|
width: 100%;
|
||||||
|
flex: 2;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
|
||||||
|
}
|
||||||
|
.component-bottom {
|
||||||
|
width: 100%;
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
.bottom-wrapper {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
height: 240px;
|
||||||
|
min-height: 240px;
|
||||||
|
padding-bottom: 10px;
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
Reference in New Issue
Block a user