From 4cde4e367e51d09548d203ee7e5c13d379d02ebd Mon Sep 17 00:00:00 2001
From: GGJ <357021191@qq.com>
Date: Wed, 21 May 2025 12:42:28 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=20APF=E6=B2=BB=E7=90=86?=
=?UTF-8?q?=E6=95=88=E6=9E=9C=E9=A1=B5=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
src/App.vue | 9 +-
src/views/govern/analyze/APF/index.vue | 529 +++++++++++-------
.../mxgraph/graphList/components/popup.vue | 66 ++-
src/views/govern/mxgraph/graphList/index.vue | 3 +-
4 files changed, 385 insertions(+), 222 deletions(-)
diff --git a/src/App.vue b/src/App.vue
index 4f604e9..8c5925e 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -11,21 +11,20 @@ import { provide, onMounted, ref } from 'vue'
//线上mqtt
// let buildUrl = 'wss://pqmcn.com:8087/mqtt'//102
-let buildUrl = 'ws://pqmcn.com:8073/mqtt'//27
-
+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
-// let devUrl = 'ws://192.168.1.24:8085/mqtt'
+// let devUrl = 'ws://192.168.1.24:8085/mqtt'
onMounted(() => {
fetchMqttUrl()
diff --git a/src/views/govern/analyze/APF/index.vue b/src/views/govern/analyze/APF/index.vue
index 7e7a295..faa84f3 100644
--- a/src/views/govern/analyze/APF/index.vue
+++ b/src/views/govern/analyze/APF/index.vue
@@ -2,36 +2,65 @@
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 查询
+
+
+
-
- 查询
-
-
-
-
- 总输出电流阈值和总输出电流比较
-
-
-
-
+
+
+
@@ -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
(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([])
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,184 +146,67 @@ const nodeClick = async (e: anyObj) => {
if (zblist.value.length === 0) {
await init()
}
- getDevCapacity(formInline.devId).then(res => {
- devCapacity.value = res.data
- search()
- }).catch(() => {
- loading.value = false
-
- })
-
+ getDevCapacity(formInline.devId)
+ .then(res => {
+ devCapacity.value = res.data
+ search()
+ })
+ .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 (data.length) {
- echartsData.value = {}
- let legend: any[] = []
- let xAxis: any[] = []
- data.forEach(item => {
- if (!xAxis.includes(item.time)) {
- xAxis.push(item.time)
- }
- 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 !== '')
+ if (!frequencyShow.value) {
+ formInline.frequency = ''
+ }
+ queryCommonStatisticalByTime(formInline)
+ .then(({ data }: { data: any[] }) => {
+ if (data.length) {
+ let list = processingOfData(data, 'unit')
- 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' // 展示内容颜色
- }
- }
- ]
- },
- 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 = {
- tooltip: {
- trigger: 'axis',
- axisPointer: {
- type: 'cross',
- crossStyle: {
- color: '#999'
- }
+ 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)
}
- },
- legend: {
- data: legend
- },
- grid: {
- left: '20px',
- right: '40px',
- bottom: '50px',
- containLabel: true
- },
- toolbox: {
- feature: {
- saveAsImage: {}
- }
- },
- xAxis: {
- name: '',
- type: 'time',
- axisLabel: {
- formatter: {
- day: '{MM}-{dd}',
- month: '{MM}',
- year: '{yyyy}',
- },
- },
-
- // boundaryGap: false,
- // data: xAxis,
- // axisLabel: {
- // formatter: function (value: string) {
- // return value.split(' ').join('\n')
- // }
- // },
- // axisLine: {
- // show: true,
- // // symbol: ["none", "arrow"],
- // lineStyle: {
- // color: '#333'
- // }
+ // if (!legend.includes(item.anotherName)) {
+ // legend.push(item.anotherName)
// }
- },
- yAxis: [
- {
- name: '畸变率:(%)',
+ })
+ 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: 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,
- },
+ // splitNumber: 5,
+ // minInterval: 1,
+
axisLine: {
show: true,
//symbol: ["none", "arrow"],
@@ -293,20 +214,211 @@ const search = () => {
color: '#333'
}
}
- }
- ],
- options: {
- series: series
- }
- }
- } else {
- echartsData.value = null
- }
- loading.value = false
- }).catch(() => {
- loading.value = false
- })
+ })
+ // 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',
+ data: phaseList[j].map(item => [
+ item.time,
+ Math.floor(item.statisticalData * 100) / 100,
+ unit,
+ lineName.type
+ ]),
+ lineStyle: lineName,
+ yAxisIndex: unit.indexOf(units)
+ })
+ }
+ }
+ }
+
+ echartsData.value = {
+ title: {
+ text: zblist.value.filter(item => item.id == formInline.statisticalId)[0].name
+ },
+ tooltip: {
+ axisPointer: {
+ type: 'cross',
+ 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}
`
+ params.forEach((el: any, index: any) => {
+ let marker = ''
+ if (el.value[3] == 'dashed') {
+ for (let i = 0; i < 3; i++) {
+ marker += ``
+ }
+ } else {
+ marker = ``
+ }
+
+ str += `${marker}${el.seriesName.split('(')[0]}:${
+ el.value[1] != null
+ ? el.value[1] + ' ' + (el.value[2] == 'null' ? '' : el.value[2])
+ : '-'
+ }
`
+ })
+ return str
+ }
+ },
+ 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: {
+ feature: {
+ saveAsImage: {}
+ }
+ },
+ color: color,
+ xAxis: {
+ name: '',
+ type: 'time',
+ axisLabel: {
+ formatter: {
+ day: '{MM}-{dd}',
+ month: '{MM}',
+ year: '{yyyy}'
+ }
+ }
+
+ // boundaryGap: false,
+ // data: xAxis,
+ // axisLabel: {
+ // formatter: function (value: string) {
+ // return value.split(' ').join('\n')
+ // }
+ // },
+ // axisLine: {
+ // show: true,
+ // // symbol: ["none", "arrow"],
+ // lineStyle: {
+ // color: '#333'
+ // }
+ // }
+ },
+ 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'
+ // }
+ // }
+ // }
+ // ],
+ options: {
+ series: series
+ }
+ }
+ } else {
+ echartsData.value = null
+ }
+ loading.value = false
+ })
+ .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)
}
@@ -324,3 +436,8 @@ const search = () => {
}
}
+
diff --git a/src/views/govern/mxgraph/graphList/components/popup.vue b/src/views/govern/mxgraph/graphList/components/popup.vue
index ea4b471..b45c421 100644
--- a/src/views/govern/mxgraph/graphList/components/popup.vue
+++ b/src/views/govern/mxgraph/graphList/components/popup.vue
@@ -1,24 +1,57 @@
-
+
-
+
-
+
-
+
-
+
@@ -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
}
diff --git a/src/views/govern/mxgraph/graphList/index.vue b/src/views/govern/mxgraph/graphList/index.vue
index 6fb3bf5..36faa72 100644
--- a/src/views/govern/mxgraph/graphList/index.vue
+++ b/src/views/govern/mxgraph/graphList/index.vue
@@ -35,7 +35,8 @@
@click="deleted(item)">删除
-