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

优化 APF治理效果页面

Browse Source
This commit is contained in:
GGJ
2025-05-21 12:42:28 +08:00
parent 4b647062bf
commit 4cde4e367e
4 changed files with 385 additions and 222 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
src/App.vue
View File

@@ -13,15 +13,14 @@ import { provide, onMounted, ref } from 'vue'
// let buildUrl = 'wss://pqmcn.com:8087/mqtt'//102
let buildUrl = 'ws://pqmcn.com:8073/mqtt' //27
// 从 Nginx 获取 MQTT URL
const fetchMqttUrl = async () => {
const response = await fetch('/')
const mqttUrl = response.headers.get('X-Mqtt-Url')
const zutai = response.headers.get('X-Mqttzutai-Url')
window.localStorage.setItem('MQTTURL', mqttUrl || buildUrl)
window.localStorage.setItem('MQTTZUTAI', zutai || '')
}
//本地mqtt

393
src/views/govern/analyze/APF/index.vue
View File

@@ -2,36 +2,65 @@
<div class="default-main analyze-apf" :style="{ height: pageHeight.height }" v-loading="loading">
<DeviceTree @node-click="nodeClick" @init="nodeClick"></DeviceTree>
<div class="analyze-apf-right" v-if="formInline.devId">
<el-form :inline="true">
<div ref="headerRef">
<TableHeader :showSearch="false" ref="tableHeaderRef" @selectChange="selectChange">
<template v-slot:select>
<el-form-item label="时间:">
<DatePicker ref="datePickerRef"></DatePicker>
</el-form-item>
<el-form-item label="统计指标:">
<el-select v-model.trim="formInline.statisticalId" filterable placeholder="请选择">
<el-option v-for="item in zblist" :key="item.value" :label="item.label"
:value="item.value"></el-option>
<el-select
style="width: 200px"
v-model.trim="formInline.statisticalId"
filterable
@change="frequencyFlag"
placeholder="请选择"
>
<el-option
v-for="item in zblist"
:key="item.value"
:label="item.label"
:value="item.value"
></el-option>
</el-select>
</el-form-item>
<el-form-item label="谐波次数:" v-show="frequencyShow">
<el-select
v-model.trim="formInline.frequency"
filterable
placeholder="请选择"
style="width: 100px"
>
<el-option
v-for="item in 49"
:key="item + 1"
:label="item + 1"
:value="item + 1"
></el-option>
</el-select>
</el-form-item>
<el-form-item label="值类型:">
<el-select v-model.trim="formInline.valueType" filterable placeholder="请选择">
<el-option v-for="item in typelist" :key="item.value" :label="item.label"
:value="item.value"></el-option>
<el-option
v-for="item in typelist"
:key="item.value"
:label="item.label"
:value="item.value"
></el-option>
</el-select>
</el-form-item>
<el-form-item>
</template>
<template v-slot:operation>
<el-button type="primary" @click="search" icon="el-icon-Search">查询</el-button>
</el-form-item>
<el-form-item>
<div style="display: flex; align-items: center">
<Icon name="el-icon-InfoFilled" style="color: #ff9912"></Icon>
总输出电流阈值和总输出电流比较
</template>
</TableHeader>
</div>
</el-form-item>
</el-form>
<el-empty description="暂无数据" v-if="!echartsData" style="flex: 1"></el-empty>
<template v-else>
<MyEchart :options="echartsData" style="flex: 1" />
<div :style="echartHeight">
<MyEchart :options="echartsData" />
</div>
</template>
</div>
<el-empty v-else description="请选择设备" class="analyze-apf-right" />
@@ -48,10 +77,16 @@ import { queryCommonStatisticalByTime } from '@/api/cs-harmonic-boot/stable'
import DatePicker from '@/components/form/datePicker/index.vue'
import MyEchart from '@/components/echarts/MyEchart.vue'
import { yMethod } from '@/utils/echartMethod'
import TableHeader from '@/components/table/header/index.vue'
defineOptions({
name: 'govern/analyze/APF'
})
const tableHeaderRef = ref()
const headerRef = ref()
const pageHeight = mainHeight(20)
const echartHeight = ref(mainHeight(80))
const loading = ref(false)
const echartsData = ref<any>(null)
const datePickerRef = ref()
@@ -60,8 +95,11 @@ const formInline = reactive({
valueType: '',
startTime: '',
endTime: '',
devId: ''
devId: '',
frequency: ''
})
const timeFlag = ref(true)
const frequencyShow = ref(false)
const devCapacity = ref(0)
const typelist = [
{
@@ -85,7 +123,7 @@ const zblist = ref<any[]>([])
const init = () => {
return new Promise((resolve, reject) => {
queryByCode('Harmonic_Type').then(res => {
queryByCode('Web_Apf').then(res => {
queryCsDictTree(res.data?.id).then(res => {
zblist.value = res.data.map((item: any) => {
return {
@@ -108,123 +146,169 @@ const nodeClick = async (e: anyObj) => {
if (zblist.value.length === 0) {
await init()
}
getDevCapacity(formInline.devId).then(res => {
getDevCapacity(formInline.devId)
.then(res => {
devCapacity.value = res.data
search()
}).catch(() => {
loading.value = false
})
.catch(() => {
loading.value = false
})
}
}
const lineStyle = [
{ type: 'solid', width: 3 },
{ type: 'dotted', width: 3 },
{ type: 'dashed', width: 3 }
]
const search = () => {
if (timeFlag.value) {
datePickerRef.value && datePickerRef.value.setInterval(5)
timeFlag.value = false
}
loading.value = true
formInline.startTime = datePickerRef.value.timeValue[0]
formInline.endTime = datePickerRef.value.timeValue[1]
queryCommonStatisticalByTime(formInline).then(({ data }: { data: any[] }) => {
if (!frequencyShow.value) {
formInline.frequency = ''
}
queryCommonStatisticalByTime(formInline)
.then(({ data }: { data: any[] }) => {
if (data.length) {
let list = processingOfData(data, 'unit')
echartsData.value = {}
let legend: any[] = []
let xAxis: any[] = []
let yAxis: any[] = []
let series: any[] = []
let color: any[] = []
let title = ''
data.forEach(item => {
if (!xAxis.includes(item.time)) {
xAxis.push(item.time)
}
if (!legend.includes(item.anotherName)) {
legend.push(item.anotherName)
}
// if (!legend.includes(item.anotherName)) {
// legend.push(item.anotherName)
// }
})
let aar = data
.map(item => {
if (item.statisticalName === 'Apf_RmsI_TolOut') {
return [item.time, item.statisticalData.toFixed(2)]
} else {
return ''
}
})
.filter(item => item !== '')
let aar1 = data
.map(item => {
if (item.statisticalName === 'Apf_ThdA_Load') {
return [item.time, item.statisticalData.toFixed(2)]
} else {
return ''
}
})
.filter(item => item !== '')
let aar2 = data
.map(item => {
if (item.statisticalName === 'Apf_ThdA_Sys') {
return [item.time, item.statisticalData.toFixed(2)]
} else {
return ''
}
})
.filter(item => item !== '')
let units = Object.keys(list)
// console.log('🚀 ~ .then ~ units:', units)
for (let unit in list) {
console.log('🚀 ~ .then ~ unit:', unit)
let [min, max] = yMethod(list[unit].map((item: any) => item.statisticalData))
yAxis.push({
name: unit == 'null' ? '' : unit,
type: 'value',
// max: 10,
min: min,
max: max,
// splitNumber: 5,
// minInterval: 1,
axisLine: {
show: true,
//symbol: ["none", "arrow"],
lineStyle: {
color: '#333'
}
}
})
// processingOfData(list[unit], 'anotherName')
let anotherList = processingOfData(list[unit], 'anotherName')
for (let k in anotherList) {
title = k
let lineName = lineStyle[Object.keys(anotherList).indexOf(k)]
let phaseList = processingOfData(anotherList[k], 'phase')
for (let j in phaseList) {
color.push(j == 'A' ? '#FFCC00' : j == 'B' ? '#009900' : j == 'C' ? '#CC0000' : '#0000CC')
legend.push(
j == 'M' ? k : j == 'A' ? `A相_${k}` : j == 'B' ? `B相_${k}` : j == 'C' ? `C相_${k}` : j
)
series.push({
name:
j == 'M'
? k
: j == 'A'
? `A相_${k}`
: j == 'B'
? `B相_${k}`
: j == 'C'
? `C相_${k}`
: j,
symbol: 'none',
smooth: true,
type: 'line',
let series = [
// 总输出电流
{
name: data.find(item => item.statisticalName === 'Apf_RmsI_TolOut').anotherName,
symbol: 'none',
smooth: true,
type: 'line',
//stack: 'Total',
data: aar,
markLine: {
symbol: 'none',
data: [
{
yAxis: devCapacity.value,
label: {
position: 'middle', // 表现内容展示的位置
formatter: '总输出电流阈值', // 标线展示的内容
color: '#daa569' // 展示内容颜色
data: phaseList[j].map(item => [
item.time,
Math.floor(item.statisticalData * 100) / 100,
unit,
lineName.type
]),
lineStyle: lineName,
yAxisIndex: unit.indexOf(units)
})
}
}
]
},
yAxisIndex: 1
},
//负载电流畸变率
{
name: data.find(item => item.statisticalName === 'Apf_ThdA_Load').anotherName,
symbol: 'none',
smooth: true,
type: 'line',
data: aar1
},
// 电网电流畸变率
{
name: data.find(item => item.statisticalName === 'Apf_ThdA_Sys').anotherName,
symbol: 'none',
smooth: true,
type: 'line',
data: aar2
}
]
let [min, max] = yMethod(aar.map((item: any) => item[1]))
let [min1, max1] = yMethod([...aar1, ...aar2].map((item: any) => item[1]))
echartsData.value = {
title: {
text: zblist.value.filter(item => item.id == formInline.statisticalId)[0].name
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
crossStyle: {
color: '#999'
label: {
color: '#fff',
fontSize: 16
}
},
textStyle: {
color: '#fff',
fontStyle: 'normal',
opacity: 0.35,
fontSize: 14
},
backgroundColor: 'rgba(0,0,0,0.55)',
borderWidth: 0,
formatter(params: any) {
const xname = params[0].value[0]
let str = `${xname}<br>`
params.forEach((el: any, index: any) => {
let marker = ''
if (el.value[3] == 'dashed') {
for (let i = 0; i < 3; i++) {
marker += `<span style="display:inline-block;border: 2px ${el.color} solid;margin-right:5px;width:10px;height:0px;background-color:#ffffff00;"></span>`
}
} else {
marker = `<span style="display:inline-block;border: 2px ${el.color} ${el.value[3]};margin-right:5px;width:40px;height:0px;background-color:#ffffff00;"></span>`
}
str += `${marker}${el.seriesName.split('(')[0]}：${
el.value[1] != null
? el.value[1] + ' ' + (el.value[2] == 'null' ? '' : el.value[2])
: '-'
}<br>`
})
return str
}
},
legend: {
data: legend
itemWidth: 20,
itemHeight: 20,
itemStyle: { opacity: 0 }, //去圆点
type: 'scroll', // 开启滚动分页
top: 25
// data: legend
},
grid: {
left: '20px',
right: '40px',
bottom: '50px',
top: '80px',
containLabel: true
},
toolbox: {
@@ -232,6 +316,7 @@ const search = () => {
saveAsImage: {}
}
},
color: color,
xAxis: {
name: '',
type: 'time',
@@ -239,9 +324,9 @@ const search = () => {
formatter: {
day: '{MM}-{dd}',
month: '{MM}',
year: '{yyyy}',
},
},
year: '{yyyy}'
}
}
// boundaryGap: false,
// data: xAxis,
@@ -258,43 +343,44 @@ const search = () => {
// }
// }
},
yAxis: [
{
name: '畸变率:(%)',
type: 'value',
// max: 10,
min: min1,
max: max1,
splitNumber: 5,
minInterval: 1,
yAxis: yAxis,
// [
// {
// name: '畸变率:(%)',
// type: 'value',
// // max: 10,
// min: min1,
// max: max1,
// splitNumber: 5,
// minInterval: 1,
axisLine: {
show: true,
//symbol: ["none", "arrow"],
lineStyle: {
color: '#333'
}
}
},
{
name: '电流:(A)',
type: 'value',
min: min,
max: max,
splitNumber: 5,
minInterval: 1,
splitLine: {
show: false,
},
axisLine: {
show: true,
//symbol: ["none", "arrow"],
lineStyle: {
color: '#333'
}
}
}
],
// axisLine: {
// show: true,
// //symbol: ["none", "arrow"],
// lineStyle: {
// color: '#333'
// }
// }
// },
// {
// name: '电流:(A)',
// type: 'value',
// min: min,
// max: max,
// splitNumber: 5,
// minInterval: 1,
// splitLine: {
// show: false
// },
// axisLine: {
// show: true,
// //symbol: ["none", "arrow"],
// lineStyle: {
// color: '#333'
// }
// }
// }
// ],
options: {
series: series
}
@@ -303,10 +389,36 @@ const search = () => {
echartsData.value = null
}
loading.value = false
}).catch(() => {
})
.catch(() => {
loading.value = false
})
}
const processingOfData = (data: any, type: string) => {
let groupedData: any = {}
data.forEach(item => {
if (!groupedData[item[type]]) {
groupedData[item[type]] = []
}
groupedData[item[type]].push(item)
})
return groupedData
}
const frequencyFlag = () => {
let name = zblist.value.filter(item => item.id == formInline.statisticalId)[0].name
if (name.includes('含有率') || name.includes('幅值')) {
frequencyShow.value = true
formInline.frequency = 2
} else {
frequencyShow.value = false
}
tableHeaderRef.value && tableHeaderRef.value?.computedSearchRow()
}
const selectChange = (flag: boolean) => {
setTimeout(() => {
echartHeight.value = mainHeight(23 + headerRef.value.offsetHeight)
}, 100)
}
</script>
@@ -324,3 +436,8 @@ const search = () => {
}
}
</style>
<style lang="scss" scoped>
.el-select {
min-width: 100px;
}
</style>

66
src/views/govern/mxgraph/graphList/components/popup.vue
View File

@@ -1,24 +1,57 @@
<template>
<el-dialog draggable :title="title" v-model.trim="dialogVisible" width="500px" :before-close="handleClose"
:close-on-click-modal="false">
<el-dialog
draggable
:title="title"
v-model.trim="dialogVisible"
width="500px"
:before-close="handleClose"
:close-on-click-modal="false"
>
<el-form ref="formRef" :rules="rules" :model="form" label-width="90px" class="form">
<el-form-item label="项目名称:" prop="name">
<el-input maxlength="32" show-word-limit v-model.trim="form.name" placeholder="请输入项目名称"></el-input>
<el-input
maxlength="32"
show-word-limit
v-model.trim="form.name"
placeholder="请输入项目名称"
></el-input>
</el-form-item>
<el-form-item label="工程项目:" class="top" prop="projectIds">
<el-tree-select v-model.trim="form.projectIds" default-expand-all show-checkbox node-key="id"
:props="defaultProps" multiple :data="Engineering" collapse-tags style="width: 100%" />
<el-tree-select
v-model.trim="form.projectIds"
default-expand-all
show-checkbox
node-key="id"
:props="defaultProps"
multiple
:data="Engineering"
collapse-tags
style="width: 100%"
/>
<!-- <el-cascader v-model.trim="form.projectIds" :options="Engineering" :props="defaultProps"
:show-all-levels="false" collapse-tags collapse-tags-tooltip clearable style="width: 100%;"/> -->
</el-form-item>
<el-form-item label="项目排序:" prop="orderBy">
<el-input maxlength="32" show-word-limit-number v-model.trim="form.orderBy" :min="0" :step="1"
step-strictly style="width: 100%" />
<el-input
maxlength="32"
show-word-limit-number
v-model.trim="form.orderBy"
:min="0"
:step="1"
step-strictly
style="width: 100%"
/>
</el-form-item>
<el-form-item label="备注:" class="top">
<el-input maxlength="300" show-word-limit type="textarea" :rows="2" placeholder="请输入内容"
v-model.trim="form.remark"></el-input>
<el-input
maxlength="300"
show-word-limit
type="textarea"
:rows="2"
placeholder="请输入内容"
v-model.trim="form.remark"
></el-input>
</el-form-item>
</el-form>
@@ -58,6 +91,8 @@ const rules = {
orderBy: [{ required: true, message: '请输入排序', trigger: 'blur' }]
}
const addFn = () => {
console.log('🚀 ~ add ~ form:', form)
formRef.value.validate((valid: boolean) => {
if (valid) {
if (title.value == '新增项目') {
@@ -144,7 +179,7 @@ const open = ref((row: any) => {
})
}
})
Engineering.value = res.data
Engineering.value = removeData(res.data)
})
title.value = row.title
dialogVisible.value = true
@@ -160,6 +195,17 @@ const open = ref((row: any) => {
form.id = row.row.id
}
})
const removeData = arr => {
return arr
.map(item => {
if (item.children) {
item.children = removeData(item.children)
}
return item.level <= 1 ? item : {}
})
.filter(item => Object.keys(item).length > 0)
}
const handleClose = () => {
dialogVisible.value = false
}

3
src/views/govern/mxgraph/graphList/index.vue
View File

@@ -35,7 +35,8 @@
@click="deleted(item)">删除</el-button>
</div>
</div>
<img :src="item.fileContent" class="image xiaoshou" @click="imgData(item)" />
<img v-if="item.fileContent" :src="item.fileContent" class="image xiaoshou" @click="imgData(item)" />
<el-empty v-else description="暂无设计" />
</el-card>
</el-col>
</el-row>