中自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 }
|
||||
]
|
||||
|
||||
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