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 @@