Web/admin-sjzx
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

联调 有功功率分析页面

Browse Source
This commit is contained in:
GGJ
2024-08-28 16:34:31 +08:00
parent 42be7bf2cf
commit 1fa628044f
5 changed files with 396 additions and 165 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
src/api/harmonic-boot/newEnergyAnalysis.ts Normal file
View File

@@ -0,0 +1,26 @@
import request from '@/utils/request'
// 根据监测点ID获取有功功率趋势
export function getDataByLineId(data: any) {
return request({
url: '/harmonic-boot/powerStatistics/getDataByLineId',
method: 'POST',
data: data
})
}
// 根据监测点ID、有功功率趋势区间字段、时间获取该有功功率趋势下指标越限列表
export function getTargetLimitById(data: any) {
return request({
url: '/harmonic-boot/powerStatistics/getTargetLimitById',
method: 'POST',
data: data
})
}
// 点击越限列表时间查询指标的详细数据
export function getTargetByTime(data: any) {
return request({
url: '/harmonic-boot/powerStatistics/getTargetByTime',
method: 'POST',
data: data
})
}

4
src/components/PreviewFile/index.vue
View File

@@ -21,8 +21,8 @@ import VueOfficeExcel from '@vue-office/excel'
import VueOfficePdf from '@vue-office/pdf'
const { push, options, currentRoute } = useRouter()
// const url = 'http://192.168.1.22:9009/excelreport' + currentRoute.value.href?.split('?')[1]
// http://192.168.1.22:9009/excelreport/onlineReport/%E7%94%B5%E8%83%BD%5B%E5%91%8A%5D2024%E5%B9%B41%E5%8F%B7-%E5%BC%A0%E5%AE%B6%E5%8F%A3%E5%9C%B0%E5%B8%82%20%E7%94%B5%E8%83%BD%E8%B4%A8%E9%87%8F%E6%8A%80%E6%9C%AF%E7%9B%91%E7%9D%A3%E5%91%8A%E8%AD%A6%E5%8D%95.docx?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=minio%2F20240807%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20240807T021320Z&X-Amz-Expires=604800&X-Amz-SignedHeaders=host&X-Amz-Signature=0173318ad09fa6cc9067123b6997f423c692c820ef9e185ca7dda300e5f7853c
const url = '/api-docx/excelreport' + cuwrrentRoute.value.href?.split('?')[1]
const url = '/api-docx/excelreport' + currentRoute.value?.href?.split('?')[1]
onMounted(() => {
console.log()
})

14
src/views/LN/newEnergy/highAndLowPressure/index.vue
View File

@@ -214,10 +214,13 @@ const map = (res: any) => {
}
},
data: res.map((item: any) => {
data:
res.length == 0
? []
: res.map((item: any) => {
return {
...item,
value: [item.lng, item.lat, item.lowPressure]
value: [item.lng, item.lat, item.lowPressure || 0]
}
}),
// data:[],
@@ -244,10 +247,13 @@ const map = (res: any) => {
}
},
data: res.map((item: any) => {
data:
res.length == 0
? []
: res.map((item: any) => {
return {
...item,
value: [item.lng - 0.07, item.lat, item.highPressure]
value: [item.lng - 0.07, item.lat, item.highPressure || 0]
}
}),
// [

13
src/views/LN/newEnergy/newEnergyAnalysis/components/timePopUpBox.vue
View File

@@ -6,7 +6,7 @@
<span class="text-large font-600 mr-3">{{ props.timePopUpBox.num }}</span>
</el-form-item>
<el-form-item>
<el-radio-group v-model="radio2">
<el-radio-group v-model="radio2" @change="tableStore.index()">
<el-radio-button label="基础数据" value="1" />
<el-radio-button label="谐波电压" value="2" />
<el-radio-button label="谐波电流" value="3" />
@@ -43,8 +43,8 @@ const props = withDefaults(defineProps<Props>(), {
})
const popupEditRef = ref()
const tableStore = new TableStore({
url: '/user-boot/function/getRouteMenu',
method: 'GET',
url: '/harmonic-boot/powerStatistics/getTargetByTime',
method: 'POST',
column: [
{ title: '指标', field: 'name' },
{
@@ -84,6 +84,13 @@ const tableStore = new TableStore({
]
}
],
beforeSearchFun: () => {
tableStore.table.params.field = props.timePopUpBox.field
tableStore.table.params.lineId = props.timePopUpBox.lineId
tableStore.table.params.searchBeginTime = props.timePopUpBox.time
tableStore.table.params.searchEndTime = props.timePopUpBox.time
tableStore.table.params.statisticalId = radio2.value
},
loadCallback: () => {
tableStore.table.data = [
{ name: '电压偏差(%)', num: 0.0 },

390
src/views/LN/newEnergy/newEnergyAnalysis/index.vue
View File

@@ -55,23 +55,23 @@
<div>
<el-card class="cardBox">
<div class="mb5" style="display: flex; justify-content: space-between">
<h3>有功功率趋势分析</h3>
<h3>功率区间</h3>
<div>
<span>图例:　</span>
<span style="color: red">稳态越限　</span>
<span>稳态越限图例:　</span>
<span style="color: red">越限　</span>
<span style="color: green">合格</span>
</div>
</div>
<el-card class="card-top">
<div
v-for="item in powerList1"
v-for="(item, index) in powerList1"
class="pd10"
style="cursor: pointer"
:class="flag == item.label ? 'hoverBox' : ''"
@click="handleClick(item.label)"
@click="analyseList(item.label, index)"
>
<div style="font-size: 24px; font-weight: 700">
<span :style="{ color: item.crossTheLine === '越限' ? 'red' : 'green' }">
<span :style="{ color: item.crossTheLine > 0 ? 'red' : 'green' }">
{{ item.quantity }}
</span>
<span style="font-size: 14px; font-weight: 500">个</span>
@@ -84,14 +84,14 @@
<el-card class="card-top mt15">
<div
v-for="item in powerList2"
v-for="(item, index) in powerList2"
class="pd10"
style="cursor: pointer"
:class="flag == item.label ? 'hoverBox' : ''"
@click="handleClick(item.label)"
@click="analyseList(item.label, index + 5)"
>
<div style="font-size: 24px; font-weight: 700">
<span :style="{ color: item.crossTheLine === '越限' ? 'red' : 'green' }">
<span :style="{ color: item.crossTheLine == '1' ? 'red' : 'green' }">
{{ item.quantity }}
</span>
<span style="font-size: 14px; font-weight: 500">个</span>
@@ -104,33 +104,115 @@
</el-card>
</div>
<el-card class="echart">
<my-echart :options="options" style="height: 198px" />
<my-echart :options="options" style="height: 238px" />
</el-card>
</div>
<div class="container mt10 ml10">
<el-card class="box">
<div :style="heightB" style="overflow-y: auto">
<h3>功率区间稳态越限详情</h3>
<div :style="`height:calc(${heightB.height} - 25px)`" style="overflow-y: auto">
<vxe-table v-bind="defaultAttribute" ref="vxeRef" height="auto" :data="tableData">
<vxe-column field="num" title="时间" min-width="100px">
<template #default="{ row }">
<el-link type="primary" @click="timeClick(row)">{{ row.num }}</el-link>
</template>
</vxe-column>
<vxe-column field="num1" title="电压偏差(%)" />
<vxe-column field="num2" title="谐波电压(%)" />
<vxe-column field="num3" title="谐波电流(%)" />
<vxe-column field="num4" title="三相电压不平衡度(%)" />
<vxe-column field="num5" title="电压波动(%)" />
<vxe-column field="num6" title="闪变(%)" />
<vxe-column field="num7" title="间谐波电压含有率(%)" />
<vxe-column field="num8" title="流不平衡度" />
<vxe-column field="crossTheLine" title="越限情况">
<template #default="{ row }">
<el-link :type="row.crossTheLine === '越限' ? 'danger' : 'success'">
<span @click="detailClick(row)">{{ row.crossTheLine }}</span>
<el-link
type="primary"
:underline="false"
class="percentage"
@click="timeClick(row)"
>
{{ row.time }}
</el-link>
</template>
</vxe-column>
<vxe-column field="voltageOffset" title="电压偏差(%)">
<template #default="{ row }">
<el-link
:type="row.voltageOffset == '1' ? 'danger' : 'success'"
class="percentage"
@click="timeClick(row)"
>
{{ row.voltageOffset == '1' ? '越限' : '合格' }}
</el-link>
</template>
</vxe-column>
<vxe-column field="vtimes" title="谐波电压(%)">
<template #default="{ row }">
<el-link
:type="row.vtimes == '1' ? 'danger' : 'success'"
class="percentage"
@click="timeClick(row)"
>
{{ row.vtimes == '1' ? '越限' : '合格' }}
</el-link>
</template>
</vxe-column>
<vxe-column field="itimes" title="谐波电流(%)">
<template #default="{ row }">
<el-link
:type="row.itimes == '1' ? 'danger' : 'success'"
class="percentage"
@click="timeClick(row)"
>
{{ row.itimes == '1' ? '越限' : '合格' }}
</el-link>
</template>
</vxe-column>
<vxe-column field="ubalance" title="三相电压不平衡度(%)">
<template #default="{ row }">
<el-link
:type="row.ubalance == '1' ? 'danger' : 'success'"
class="percentage"
@click="timeClick(row)"
>
{{ row.ubalance == '1' ? '越限' : '合格' }}
</el-link>
</template>
</vxe-column>
<vxe-column field="voltageFluctuation" title="电压波动(%)">
<template #default="{ row }">
<el-link
:type="row.voltageFluctuation == '1' ? 'danger' : 'success'"
class="percentage"
@click="timeClick(row)"
>
{{ row.voltageFluctuation == '1' ? '越限' : '合格' }}
</el-link>
</template>
</vxe-column>
<vxe-column field="flicker" title="闪变(%)">
<template #default="{ row }">
<el-link
:type="row.flicker == '1' ? 'danger' : 'success'"
class="percentage"
@click="timeClick(row)"
>
{{ row.flicker == '1' ? '越限' : '合格' }}
</el-link>
</template>
</vxe-column>
<vxe-column field="interHarmonic" title="间谐波电压含有率(%)">
<template #default="{ row }">
<el-link
:type="row.interHarmonic == '1' ? 'danger' : 'success'"
class="percentage"
@click="timeClick(row)"
>
{{ row.interHarmonic == '1' ? '越限' : '合格' }}
</el-link>
</template>
</vxe-column>
<vxe-column field="sequenceCurrentUnbalance" title="电流不平衡度">
<template #default="{ row }">
<el-link
:type="row.sequenceCurrentUnbalance == '1' ? 'danger' : 'success'"
class="percentage"
@click="timeClick(row)"
>
{{ row.sequenceCurrentUnbalance == '1' ? '越限' : '合格' }}
</el-link>
</template>
</vxe-column>
<vxe-column field="num3" title="操作">
<template #default="{ row }">
<el-button type="primary" link @click="addTo(row)">添加</el-button>
@@ -144,28 +226,18 @@
<div :style="heightB" style="overflow-y: auto">
<div style="display: flex; justify-content: space-between">
<span style="font-size: 16px; font-weight: 700">报告参数</span>
<el-radio-group v-model="radio2" size="small">
<el-radio-button label="统计结果" value="1" />
<el-radio-button label="原始数据" value="2" />
</el-radio-group>
<el-button icon="el-icon-Download" size="small" type="primary">生成报表</el-button>
</div>
<div>
<el-tree style="max-width: 600px" :data="dataSource" node-key="id" default-expand-all>
<template #default="{ node, data }">
<span class="custom-tree-node">
<span>{{ node.label }}</span>
<!-- <span>
<a style="margin-left: 8px" @click="remove(node, data)">删除</a>
</span> -->
<el-button
<span style="color: var(--el-color-primary)">{{ data.time }}</span>
<Close
v-if="data.level != 0"
style="margin-left: 10px"
type="danger"
link
style="margin-left: 5px; height: 14px"
@click="remove(node, data)"
>
删除
</el-button>
/>
</span>
</template>
</el-tree>
@@ -177,10 +249,10 @@
</splitpanes>
<!-- 时间弹框 -->
<timePopUpBox
v-if="timePopUpBox"
ref="timePopUpBoxRef"
:timePopUpBox="timePopUpBox"
@close="timePopUpBox = null"
v-if="timePopUpBox"
/>
<!-- 越限详情 -->
<detail ref="detailRef" />
@@ -199,7 +271,9 @@ import { mainHeight } from '@/utils/layout'
import { defaultAttribute } from '@/components/table/defaultAttribute'
import MyEchart from '@/components/echarts/MyEchart.vue'
import TimePopUpBox from './components/timePopUpBox.vue'
import { getDataByLineId, getTargetLimitById, getTargetByTime } from '@/api/harmonic-boot/newEnergyAnalysis'
import detail from './components/detail.vue'
import { Close } from '@element-plus/icons-vue'
defineOptions({
name: 'newEnergy/newEnergyAnalysis'
})
@@ -212,42 +286,42 @@ const size = ref(0)
const TableHeaderRef = ref()
const detailRef = ref()
const dotList: any = ref({})
const power = ref([])
const timePopUpBoxRef = ref()
const index = ref([])
const index = ref(0)
const powerList1: any = ref([
{
label: '0%~10%',
quantity: '20',
quantity: '0',
percentage: '10%',
crossTheLine: '越限',
value: '0%~10%'
},
{
label: '10%~20%',
quantity: '20',
quantity: '0',
percentage: '10%',
crossTheLine: '合格',
value: '10%~10%'
},
{
label: '20%~30%',
quantity: '20',
quantity: '0',
percentage: '10%',
crossTheLine: '合格',
value: '10%~30%'
},
{
label: '30%~40%',
quantity: '20',
quantity: '0',
percentage: '10%',
crossTheLine: '合格',
value: '30%~40%'
},
{
label: '40%~50%',
quantity: '20',
quantity: '0',
percentage: '10%',
crossTheLine: '合格',
value: '40%~50%'
@@ -256,28 +330,28 @@ const powerList1: any = ref([
const powerList2: any = ref([
{
label: '50%~60%',
quantity: '20',
quantity: '0',
percentage: '10%',
crossTheLine: '合格',
value: '50%~60%'
},
{
label: '60%~70%',
quantity: '20',
quantity: '0',
percentage: '10%',
crossTheLine: '合格',
value: '60%~70%'
},
{
label: '70%~80%',
quantity: '20',
quantity: '0',
percentage: '10%',
crossTheLine: '合格',
value: '70%~80%'
},
{
label: '80%~90%',
quantity: '20',
quantity: '0',
percentage: '10%',
crossTheLine: '越限',
value: '80%~90%'
@@ -291,92 +365,88 @@ const powerList2: any = ref([
}
])
const tableData: any = ref([
{
num: '2023-08-08 09:00:00',
num1: '0',
num2: '1',
num3: '3',
num4: '2',
num5: '1',
num6: '1',
num7: '1',
num8: '0',
crossTheLine: '越限'
}
])
const dataSource = ref([
const tableData: any = ref([])
const dataSource: any = ref([
{
id: 1,
level: 0,
label: '0%~10%',
children: [
{
id: 11,
label: '测试',
time: '0%~10%',
children: []
}
]
},
{
id: 2,
level: 0,
label: '10%~20%',
time: '10%~20%',
children: []
},
{
id: 3,
level: 0,
label: '20%~30%',
time: '20%~30%',
children: []
},
{
id: 4,
level: 0,
label: '30%~40%',
time: '30%~40%',
children: []
},
{
id: 5,
level: 0,
label: '40%~50%',
time: '40%~50%',
children: []
},
{
id: 6,
level: 0,
label: '50%~60%',
time: '50%~60%',
children: []
},
{
id: 7,
level: 0,
label: '60%~70%',
time: '60%~70%',
children: []
},
{
id: 8,
level: 0,
label: '70%~80%',
time: '70%~80%',
children: []
},
{
id: 9,
level: 0,
label: '80%~90%',
time: '80%~90%',
children: []
},
{
id: 10,
level: 0,
label: '90%~100%',
time: '90%~100%',
children: []
}
])
// 添加树
const addTo = row => {
console.log('🚀 ~ addTo ~ row:', row)
const addTo = (row: any) => {
// console.log("🚀 ~ addTo ~ uniqueObjectsByJSON([...dataSource.value[index.value].children, row]):", uniqueObjectsByJSON([...dataSource.value[index.value].children, row])[0].time)
let list = JSON.parse(JSON.stringify(dataSource.value[index.value].children))
dataSource.value[index.value].children = uniqueObjectsByJSON([...list, row])
}
// 树去重
const uniqueObjectsByJSON = (arr: any) => {
const seen = new Set()
return arr.filter((item: any) => {
const str = JSON.stringify(item)
if (!seen.has(str)) {
seen.add(str)
return true
}
return false
})
}
// 树删除
const remove = (node: any, data: any) => {
const parent = node.parent
@@ -395,27 +465,114 @@ const tableStore = new TableStore({
loadCallback: () => {}
})
// 卡片点击变色
const handleClick = (e: string) => {
flag.value = e
}
// 点击时间
const timeClick = (row: any) => {
timePopUpBox.value = row
let data = {
...row,
field: index.value,
lineId: dotList.value.id
}
timePopUpBox.value = data
}
// 点击越限
const detailClick = (row: any) => {
detailRef.value.open()
}
provide('tableStore', tableStore)
onMounted(() => {
const dom = document.getElementById('navigation-splitpanes')
if (dom) {
size.value = Math.round((180 / dom.offsetHeight) * 100)
// 获取有功功率趋势分析数据
const analyse = (e: any) => {
getDataByLineId({
lineId: e.id,
searchBeginTime: TableHeaderRef.value.datePickerRef.timeValue[0],
searchEndTime: TableHeaderRef.value.datePickerRef.timeValue[1]
}).then(res => {
let mun =
res.data.minsNum1 +
res.data.minsNum2 +
res.data.minsNum3 +
res.data.minsNum4 +
res.data.minsNum5 +
res.data.minsNum6 +
res.data.minsNum7 +
res.data.minsNum8 +
res.data.minsNum9
powerList1.value = [
{
label: '0%~10%',
quantity: res.data.minsNum0,
percentage: ((res.data.minsNum0 / mun) * 100).toFixed(2) + '%',
crossTheLine: res.data.isOrNot0,
value: '0%~10%'
},
{
label: '10%~20%',
quantity: res.data.minsNum1,
percentage: ((res.data.minsNum1 / mun) * 100).toFixed(2) + '%',
crossTheLine: res.data.isOrNot1,
value: '10%~10%'
},
{
label: '20%~30%',
quantity: res.data.minsNum2,
percentage: ((res.data.minsNum2 / mun) * 100).toFixed(2) + '%',
crossTheLine: res.data.isOrNot2,
value: '10%~30%'
},
{
label: '30%~40%',
quantity: res.data.minsNum3,
percentage: ((res.data.minsNum3 / mun) * 100).toFixed(2) + '%',
crossTheLine: res.data.isOrNot3,
value: '30%~40%'
},
{
label: '40%~50%',
quantity: res.data.minsNum4,
percentage: ((res.data.minsNum4 / mun) * 100).toFixed(2) + '%',
crossTheLine: res.data.isOrNot4,
value: '40%~50%'
}
]
powerList2.value = [
{
label: '50%~60%',
quantity: res.data.minsNum5,
percentage: ((res.data.minsNum5 / mun) * 100).toFixed(2) + '%',
crossTheLine: res.data.isOrNot5,
value: '50%~60%'
},
{
label: '60%~70%',
quantity: res.data.minsNum6,
percentage: ((res.data.minsNum6 / mun) * 100).toFixed(2) + '%',
crossTheLine: res.data.isOrNot6,
value: '60%~70%'
},
{
label: '70%~80%',
quantity: res.data.minsNum7,
percentage: ((res.data.minsNum7 / mun) * 100).toFixed(2) + '%',
crossTheLine: res.data.isOrNot7,
value: '70%~80%'
},
{
label: '80%~90%',
quantity: res.data.minsNum8,
percentage: ((res.data.minsNum8 / mun) * 100).toFixed(2) + '%',
crossTheLine: res.data.isOrNot8,
value: '80%~90%'
},
{
label: '90%~100%',
quantity: res.data.minsNum9,
percentage: ((res.data.minsNum9 / mun) * 100).toFixed(2) + '%',
crossTheLine: res.data.isOrNot9,
value: '90%~100%'
}
]
options.value = {
title: {
text: '占比',
text: '有功率区间占比',
left: '10px'
},
legend: {
@@ -434,7 +591,7 @@ onMounted(() => {
series: [
{
type: 'pie',
center: ['50%', '50%'],
center: ['50%', '60%'],
selectedOffset: 30,
label: {
show: true,
@@ -468,10 +625,41 @@ onMounted(() => {
]
}
}
})
})
}
// 功率列表
const analyseList = (e: string, i: number) => {
flag.value = e
index.value = i
getTargetLimitById({
lineId: dotList.value.id,
searchBeginTime: TableHeaderRef.value.datePickerRef.timeValue[0],
searchEndTime: TableHeaderRef.value.datePickerRef.timeValue[1],
statisticalId: i
}).then(res => {
tableData.value = res.data
})
}
provide('tableStore', tableStore)
onMounted(() => {
const dom = document.getElementById('navigation-splitpanes')
if (dom) {
size.value = Math.round((180 / dom.offsetHeight) * 100)
}
})
let control = ref(true)
const handleNodeClick = (data: any, node: any) => {
console.log('🚀 ~ handleNodeClick ~ data:', data)
if (data.level == 6) {
dotList.value = data
analyse(data)
if (control.value) {
analyseList('0%~10%', 0)
control.value = false
}
}
}
</script>
<style lang="scss">
@@ -521,4 +709,8 @@ const handleNodeClick = (data: any, node: any) => {
background-color: var(--el-color-primary-light-5);
border-radius: 10px;
}
.percentage {
text-decoration: underline;
text-underline-offset: 0.1em;
}
</style>