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

修改测试bug

Browse Source
This commit is contained in:
GGJ
2024-10-22 15:55:24 +08:00
parent 25ffc10857
commit aed37ba624
4 changed files with 193 additions and 252 deletions
Download Patch File Download Diff File Expand all files Collapse all files

46
src/utils/echartMethod.ts
View File

@@ -6,12 +6,12 @@ export const yMethod = (arr: any) => {
let min = 0
maxValue = Math.max(...arr)
minValue = Math.min(...arr)
if (maxValue > 1000 ||minValue < -1000) {
if (maxValue > 1000 || minValue < -1000) {
max = Math.ceil(maxValue / 100) * 100
if (minValue == 0) {
min = 0
} else {
min = (Math.floor(minValue / 100) ) * 100
min = Math.floor(minValue / 100) * 100
}
} else {
max = Math.ceil(maxValue / 10) * 10
@@ -25,26 +25,30 @@ export const yMethod = (arr: any) => {
}
return [min, max]
}
// 导出csv文件
const convertToCSV = (title: object,data:any) => {
console.log("🚀 ~ convertToCSV ~ data:", data)
let csv = '';
// 添加列头
csv += ','+title.join(',') + '\n';
// 遍历数据并添加到CSV字符串中
data.map(item => {
csv += item.join(',') + '\n';
});
return csv;
/**
* title['A相','B相',]
* data[[1,2],[3,4]]
*/
// 导出csv文件
const convertToCSV = (title: object, data: any) => {
console.log('🚀 ~ convertToCSV ~ data:', data)
let csv = ''
// 添加列头
csv += ',' + title.join(',') + '\n'
// 遍历数据并添加到CSV字符串中
data?.map(item => {
csv += item.join(',') + '\n'
})
return csv
}
export const exportCSV = (title: object,data: any,filename:string) => {
const csv = convertToCSV(title,data);
const blob = new Blob([csv], { type: 'text/csv;charset=utf-8;' });
const link = document.createElement('a');
link.href = URL.createObjectURL(blob);
link.download = filename;
link.click();
export const exportCSV = (title: object, data: any, filename: string) => {
const csv = convertToCSV(title, data)
const blob = new Blob([csv], { type: 'text/csv;charset=utf-8;' })
const link = document.createElement('a')
link.href = URL.createObjectURL(blob)
link.download = filename
link.click()
// 释放URL对象
URL.revokeObjectURL(link.href);
URL.revokeObjectURL(link.href)
}

194
src/views/govern/device/control/index.vue
View File

@@ -1,10 +1,6 @@
<template>
<div
class="default-main device-control"
:style="{ height: pageHeight.height }"
v-loading="loading"
style="position: relative"
>
<div class="default-main device-control" :style="{ height: pageHeight.height }" v-loading="loading"
style="position: relative">
<PointTree @node-click="nodeClick" @init="nodeClick" @pointTypeChange="pointTypeChange"></PointTree>
<div class="device-control-right" v-if="deviceData">
<el-descriptions title="设备基本信息" class="mb10" :column="3" border>
@@ -18,12 +14,8 @@
<el-button v-if="deviceType == '1'" type="primary" icon="el-icon-Monitor" @click="handleaddDevice">
在线补召
</el-button>
<el-button
v-if="deviceType == '1'"
type="primary"
icon="el-icon-Tickets"
@click="handleAnalysisList"
>
<el-button v-if="deviceType == '1'" type="primary" icon="el-icon-Tickets"
@click="handleAnalysisList">
补召日志
</el-button>
</template>
@@ -48,13 +40,8 @@
</el-descriptions-item>
</el-descriptions>
<el-tabs v-model="dataSet" type="border-card" class="device-control-box-card" @tab-click="handleClick">
<el-tab-pane
lazy
:label="item.name"
:name="item.id"
v-for="(item, index) in deviceData.dataSetList"
:key="index"
>
<el-tab-pane lazy :label="item.name" :name="item.id" v-for="(item, index) in deviceData.dataSetList"
:key="index">
<template #label>
<span class="custom-tabs-label">
<el-icon>
@@ -63,59 +50,44 @@
<DataAnalysis v-if="item.name.includes('趋势数据')" />
<Timer v-if="item.name.includes('实时数据')" />
<Monitor v-if="item.name.includes('暂态事件')" />
<Odometer
v-if="
<Odometer v-if="
item.name != 'APF模块数据' &&
item.name != '历史APF模块数据' &&
!item.name.includes('历史监测') &&
!item.name.includes('趋势数据') &&
!item.name.includes('实时数据') &&
!item.name.includes('暂态事件')
"
/>
<Histogram
v-if="
" />
<Histogram v-if="
item.name != 'APF模块数据' &&
item.name != '历史APF模块数据' &&
item.name.includes('历史监测') &&
!item.name.includes('趋势数据') &&
!item.name.includes('实时数据') &&
!item.name.includes('暂态事件')
"
/>
" />
</el-icon>
<span>{{ item.name }}</span>
</span>
</template>
</el-tab-pane>
<TableHeader
:showSearch="false"
v-if="
<TableHeader :showSearch="false" v-if="
(dataSet.indexOf('_trenddata') == -1 &&
dataSet.indexOf('_realtimedata') == -1 &&
dataSet.indexOf('_event') == -1) ||
realTimeFlag
"
>
">
<template #select>
<el-form-item label="日期" v-show="dataSet.indexOf('_history') != -1">
<DatePicker ref="datePickerRef"></DatePicker>
</el-form-item>
<el-form-item label="指标" v-show="!realTimeFlag">
<el-input
style="width: 160px"
v-model="formInline.searchValue"
autocomplete="off"
clearable
placeholder="请输入关键词"
></el-input>
<el-input style="width: 160px" v-model="formInline.searchValue" autocomplete="off" clearable
placeholder="请输入关键词"></el-input>
</el-form-item>
<el-form-item label="值类型">
<el-select
style="min-width: 120px !important"
v-model="formInline.dataLevel"
:disabled="dataLevel == 'Primary' && deviceType == '0'"
>
<el-select style="min-width: 120px !important" v-model="formInline.dataLevel"
:disabled="dataLevel == 'Primary' && deviceType == '0'">
<el-option value="Primary" label="一次值"></el-option>
<el-option value="Secondary" label="二次值"></el-option>
</el-select>
@@ -129,48 +101,32 @@
<el-button type="primary" v-if="realTimeFlag" :icon="DataLine" @click="handleTrend">
谐波频谱
</el-button>
<el-button
type="primary"
v-if="realTimeFlag"
:icon="TrendCharts"
@click="handleHarmonicSpectrum"
>
<el-button type="primary" v-if="realTimeFlag" :icon="TrendCharts"
@click="handleHarmonicSpectrum">
实时趋势
</el-button>
</template>
</TableHeader>
<div
style="height: calc(100vh - 300px)"
v-if="
<div style="height: calc(100vh - 300px)" v-if="
dataSet.indexOf('_trenddata') == -1 &&
dataSet.indexOf('_realtimedata') == -1 &&
dataSet.indexOf('_event') == -1 &&
tableData.length == 0
"
v-loading="tableLoading"
></div>
<div
style="overflow: auto"
:style="{ height: tableHeight }"
v-if="
" v-loading="tableLoading"></div>
<div style="overflow: auto" :style="{ height: tableHeight }" v-if="
dataSet.indexOf('_trenddata') == -1 &&
dataSet.indexOf('_realtimedata') == -1 &&
dataSet.indexOf('_event') == -1 &&
tableData.length != 0
"
>
">
<!-- 循环渲染的card 最新数据/历史数据显示 -->
<div class="content" v-loading="tableLoading">
<el-card class="box-card" v-for="(item, index) in tableData" :key="index">
<template #header>
<div class="clearfix">
<span style="flex: 1">{{ item.name }}</span>
<Icon
name="el-icon-TrendCharts"
class="ml10"
@click="getDeviceDataTrend(item)"
style="font-size: 26px; cursor: pointer; color: #fff"
></Icon>
<Icon name="el-icon-TrendCharts" class="ml10" @click="getDeviceDataTrend(item)"
style="font-size: 26px; cursor: pointer; color: #fff"></Icon>
</div>
</template>
<!-- 模块数据 -->
@@ -185,12 +141,8 @@
</div>
<div v-else-if="item.children.length">
<div style="display: flex; align-items: center">
<el-tag
effect="dark"
type="danger"
style="width: 40px; text-align: center"
class="mr10"
>
<el-tag effect="dark" type="danger" style="width: 40px; text-align: center"
class="mr10">
MAX
</el-tag>
{{
@@ -201,12 +153,8 @@
}}
</div>
<div style="display: flex; align-items: center" class="mt10">
<el-tag
effect="dark"
type="success"
style="width: 40px; text-align: center"
class="mr10"
>
<el-tag effect="dark" type="success" style="width: 40px; text-align: center"
class="mr10">
AVG
</el-tag>
{{
@@ -217,12 +165,8 @@
}}
</div>
<div style="display: flex; align-items: center" class="mt10">
<el-tag
effect="dark"
type="warning"
style="width: 40px; text-align: center"
class="mr10"
>
<el-tag effect="dark" type="warning" style="width: 40px; text-align: center"
class="mr10">
MIN
</el-tag>
{{
@@ -237,39 +181,24 @@
<el-empty description="暂无数据" v-if="tableData.length === 0"></el-empty>
</div>
</div>
<el-pagination
v-if="
<el-pagination v-if="
tableData.length &&
dataSet.indexOf('_trenddata') == -1 &&
dataSet.indexOf('_realtimedata') == -1 &&
dataSet.indexOf('_event') == -1
"
background
class="mr2 mt10"
style="float: right"
@size-change="handleSizeChange"
@current-change="pageChange"
:current-page="formInline.pageNum"
:page-sizes="[20, 30, 40, 50, 100]"
:page-size="formInline.pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="formInline.total"
></el-pagination>
" background class="mr2 mt10" style="float: right" @size-change="handleSizeChange"
@current-change="pageChange" :current-page="formInline.pageNum" :page-sizes="[20, 30, 40, 50, 100]"
:page-size="formInline.pageSize" layout="total, sizes, prev, pager, next, jumper"
:total="formInline.total"></el-pagination>
<!-- 趋势数据 -->
<div
style="height: calc(100vh - 340px)"
v-if="dataSet.indexOf('_trenddata') != -1"
v-loading="tableLoading"
>
<div style="height: calc(100vh - 340px)" v-if="dataSet.indexOf('_trenddata') != -1"
v-loading="tableLoading">
<Trend ref="trendRef"></Trend>
</div>
<!-- 实时数据 -->
<div
style="height: calc(100vh - 340px)"
v-if="dataSet.indexOf('_realtimedata') != -1"
v-loading="tableLoading"
>
<div style="height: calc(100vh - 340px)" v-if="dataSet.indexOf('_realtimedata') != -1"
v-loading="tableLoading">
<!-- <div class="view_top_btn" v-if="realTimeFlag">
<el-button type="primary" :icon="Platform" @click="handleRecordWaves">
实时录波
@@ -284,23 +213,16 @@
<!-- 实时数据-实时录波组件 -->
<recordWoves v-if="!realTimeFlag && sonTab == 0"></recordWoves>
<!-- 实时数据-实时趋势组件 -->
<realTrend
v-if="!realTimeFlag && sonTab == 1"
ref="realTrendRef"
@changeTrendType="changeTrendType"
></realTrend>
<realTrend v-if="!realTimeFlag && sonTab == 1" ref="realTrendRef"
@changeTrendType="changeTrendType">
</realTrend>
<!-- 实时数据-谐波频谱组件 -->
<harmonicSpectrum
v-show="!realTimeFlag && sonTab == 2"
ref="harmonicSpectrumRef"
></harmonicSpectrum>
<harmonicSpectrum v-show="!realTimeFlag && sonTab == 2" ref="harmonicSpectrumRef">
</harmonicSpectrum>
</div>
<!-- 暂态事件 -->
<div
style="height: calc(100vh - 340px)"
v-if="dataSet.indexOf('_event') != -1"
v-loading="tableLoading"
>
<div style="height: calc(100vh - 340px)" v-if="dataSet.indexOf('_event') != -1"
v-loading="tableLoading">
<Event ref="eventRef"></Event>
</div>
<div v-if="!tableData" style="height: 42px"></div>
@@ -418,6 +340,7 @@ const handleTrend = async () => {
)
let obj = JSON.parse(JSON.stringify(JSON.parse(new TextDecoder().decode(message)))) || {}
if (obj.data1) {
realTrendRef.value && realTrendRef.value.setRealTrendData(obj)
}
})
@@ -428,8 +351,10 @@ const handleTrend = async () => {
.catch(e => {
realTrendRef.value && realTrendRef.value.setRealTrendData(false)
})
//每隔30s调用一下接口，通知后台推送mqtt消息
trendTimer.value = setInterval(() => {
getHarmRealData(lineId.value, activeTrendName.value).then((res: any) => {
console.log(res, '获取谐波频谱数据')
connectMqtt()
@@ -467,14 +392,21 @@ const harmonicSpectrumRef = ref()
//实时趋势
const handleHarmonicSpectrum = () => {
realTimeFlag.value = false
window.clearInterval(timer.value)
clearInterval(realDataTimer.value)
// window.clearInterval(timer.value)
// clearInterval(realDataTimer.value)
sonTab.value = 2
harmonicSpectrumRef.value && harmonicSpectrumRef.value.resetData()
getRealDataMqttMsg()
// getRealDataMqttMsg()
}
//返回
const handleReturn = () => {
console.log("🚀 ~ handleReturn ~ realDataTimer.value:", trendTimer.value)
clearInterval(trendTimer.value)
clearInterval(realDataTimer.value)
realTimeFlag.value = true
sonTab.value = null
activeTrendName.value = 0
@@ -619,7 +551,7 @@ const getRealDataMqttMsg = async () => {
connectMqtt()
mqttRef.value.on('connect', (e: any) => {
// ElMessage.success('连接mqtt服务器成功!')
console.log('mqtt客户端已连接....')
// mqttRef.value.subscribe('/Web/Progress')
mqttRef.value.subscribe('/Web/RealData/+')
//假数据
@@ -748,6 +680,7 @@ const getRealDataMqttMsg = async () => {
//更新实时数据值
realTimeFlag.value && realTimeRef.value && realTimeRef.value.setRealData(mqttMessage.value)
//更新实时趋势数据
!realTimeFlag.value &&
sonTab.value == 2 &&
harmonicSpectrumRef.value &&
@@ -893,7 +826,7 @@ const handleClick = async (tab?: any) => {
}
}
//模版下载
const handleDownLoadTemplate = () => {}
const handleDownLoadTemplate = () => { }
//补召日志
const analysisListRef = ref()
//打开补召日志
@@ -930,7 +863,7 @@ const echoName = (value: any, arr: any[]) => {
return value ? arr.find(item => item.value == value)?.label : '/'
}
onMounted(() => {})
onMounted(() => { })
onUnmounted(() => {
clearInterval(timer.value)
clearInterval(realDataTimer.value)
@@ -1020,6 +953,7 @@ onUnmounted(() => {
margin-right: 5px;
}
}
.el-form {
width: 100%;
height: auto;

62
src/views/govern/device/control/tabs/components/harmonicSpectrum.vue
View File

@@ -4,33 +4,18 @@
<div class="harmonic_select">
<el-form :model="searchForm" id="history_select">
<el-form-item label="稳态指标">
<el-select
multiple
collapse-tags
collapse-tags-tooltip
v-model="searchForm.index"
placeholder="请选择统计指标"
:multiple-limit="3"
value-key="id"
>
<el-option
v-for="(item, index) in indexOptions"
:label="item.name"
:key="index"
:value="item"
></el-option>
<el-select multiple collapse-tags collapse-tags-tooltip v-model="searchForm.index"
placeholder="请选择统计指标" :multiple-limit="3" value-key="id">
<el-option v-for="(item, index) in indexOptions" :label="item.name" :key="index"
:value="item"></el-option>
</el-select>
</el-form-item>
<!-- <el-button type="primary" :loading="loading" @click="init">查询</el-button> -->
</el-form>
</div>
<div class="harmonic_body">
<div
class="harmonic_body_charts"
:style="{ height: height }"
v-for="(item, index) in searchForm.index"
:key="index"
>
<div class="harmonic_body_charts" :style="{ height: height }" v-for="(item, index) in searchForm.index"
:key="index">
<MyEchart :ref="setChildRef(index)" :options="item.echartsData" :isInterVal="true"></MyEchart>
</div>
</div>
@@ -271,6 +256,7 @@ const resetData = () => {
resetData()
const mqttMessage: any = ref()
const setHarmonicSpectrumData = (val: any) => {
console.log("🚀 ~ setHarmonicSpectrumData ~ val:", val)
mqttMessage.value = val
init()
}
@@ -280,7 +266,7 @@ const setChildRef = (index: any) => {
}
const childRefs: any = {}
const init = () => {
resetData()
// resetData()
console.log(searchForm.value.index, '----------')
loading.value = true
searchForm.value.index.map((item: any, index: any) => {
@@ -324,14 +310,22 @@ const init = () => {
// right: '4%'
// },
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
label: {
show: false
}
color: '#fff',
fontSize: 16
}
},
textStyle: {
color: '#fff',
fontStyle: 'normal',
opacity: 0.35,
fontSize: 14
},
backgroundColor: 'rgba(0,0,0,0.35)',
borderWidth: 0
},
xAxis: {
name: '时间',
type: 'time',
@@ -347,20 +341,7 @@ const init = () => {
yAxis: {
type: 'value',
name: item.unit,
splitLine: {
show: false
},
axisTick: {
show: true
},
axisLine: {
show: true,
lineStyle: {
color: '#000'
}
},
splitNumber: 5,
minInterval: 1
},
series: []
}
@@ -390,7 +371,7 @@ const init = () => {
loading.value = false
}
onMounted(() => {})
onMounted(() => { })
defineExpose({ resetData, setHarmonicSpectrumData })
</script>
<style lang="scss" scoped>
@@ -418,6 +399,7 @@ defineExpose({ resetData, setHarmonicSpectrumData })
.harmonic_body {
flex: 1;
overflow-y: auto;
.harmonic_body_charts {
border: 1px solid #eee;
position: relative;

67
src/views/govern/device/control/tabs/trend.vue
View File

@@ -17,24 +17,13 @@
</el-form-item>
<el-form-item
v-for="(item, index) in countData" :key="index"
:label="item.name + '谐波次数'"
label-width="180px"
>
<el-form-item v-for="(item, index) in countData" :key="index" :label="item.name + '谐波次数'"
label-width="180px" v-show="item.countOptions.length != 0">
<!-- v-if="item.countOptions.length != 0" -->
<el-select
v-model="item.count"
@change="onCountChange($event, index)"
placeholder="请选择谐波次数"
>
<el-option
v-for="vv in item.countOptions"
:key="vv"
:label="vv"
:value="vv"
></el-option>
<el-select v-model="item.count" @change="onCountChange($event, index)"
placeholder="请选择谐波次数">
<el-option v-for="vv in item.countOptions" :key="vv" :label="vv"
:value="vv"></el-option>
</el-select>
</el-form-item>
@@ -67,7 +56,7 @@ import { position } from 'html2canvas/dist/types/css/property-descriptors/positi
import { read, writeFile, utils } from 'xlsx'
import TableStore from '@/utils/tableStore'
import Table from '@/components/table/index.vue'
import { yMethod } from '@/utils/echartMethod'
import { yMethod, exportCSV } from '@/utils/echartMethod'
import TableHeader from '@/components/table/header/index.vue'
import { getTabsDataByType } from '@/api/cs-device-boot/EquipmentDelivery'
import DatePicker from '@/components/form/datePicker/index.vue'
@@ -269,7 +258,36 @@ const init = async () => {
}
},
yAxis: [{}],
toolbox: {
featureProps: {
myTool1: {
show: true,
title: '下载csv',
icon: 'path://M588.8 551.253333V512H352v39.253333h236.373333z m0 78.933334v-39.253334H352v39.253334h236.373333z m136.533333 78.933333V334.933333l-157.866666-157.866666H273.066667A59.306667 59.306667 0 0 0 213.333333 236.373333v551.253334a59.306667 59.306667 0 0 0 59.306667 59.306666h274.773333v42.666667H853.333333v-180.48zM568.746667 234.666667l100.266666 100.693333h-81.066666a20.053333 20.053333 0 0 1-19.626667-20.053333z m-20.48 573.013333H273.066667a19.2 19.2 0 0 1-17.493334-19.626667V236.373333a19.2 19.2 0 0 1 19.626667-19.626666h256v98.133333a58.88 58.88 0 0 0 58.88 59.306667h96.426667v334.933333h-98.133334v-39.68H352v39.68h196.266667z m100.266666 23.04a37.973333 37.973333 0 0 1-32 15.786667 38.826667 38.826667 0 0 1-32.426666-15.786667 53.76 53.76 0 0 1-10.24-32.853333 42.666667 42.666667 0 0 1 42.666666-47.786667 35.84 35.84 0 0 1 37.546667 29.866667h-12.8a23.893333 23.893333 0 0 0-24.746667-19.2c-17.066667 0-29.013333 14.08-29.013333 35.84s11.52 37.546667 28.586667 37.546666a26.453333 26.453333 0 0 0 26.453333-25.6h12.8a39.253333 39.253333 0 0 1-7.253333 22.186667z m59.733334 15.786667a35.84 35.84 0 0 1-40.106667-34.56H682.666667a23.893333 23.893333 0 0 0 26.88 23.04c12.8 0 22.613333-6.4 22.613333-15.786667s-4.266667-11.52-14.506667-13.653333l-21.333333-5.12c-17.066667-4.266667-24.32-11.52-24.32-23.893334s12.8-26.453333 34.133333-26.453333a31.573333 31.573333 0 0 1 35.413334 30.293333h-13.653334a19.626667 19.626667 0 0 0-22.613333-18.773333c-12.8 0-20.48 5.12-20.48 12.8s5.12 11.093333 17.066667 13.653333l14.933333 2.986667a42.666667 42.666667 0 0 1 20.906667 8.96 23.893333 23.893333 0 0 1 7.68 17.92c-0.426667 17.066667-14.506667 28.16-37.12 28.16z m88.746666 0h-14.506666l-32.426667-92.16h14.08l19.626667 59.733333 6.4 20.053333c0-9.386667 3.413333-12.8 5.546666-20.053333l19.2-59.733333h14.08z',
onclick: (e) => {
// console.log("🚀 ~ init ~ echartsData.value:", echartsData.value.options.series.map(item => item.data))
let list = echartsData.value.options.series?.map(item => item.data)
let dataList = list[0]?.map((item, index) => {
let value = [item[0], item[1]]
list.forEach((item1: any, index1: any) => {
if (index1 > 0) {
value.push(item1 && item1[index] ? item1[index][1] : null)
}
})
return value;
});
exportCSV(echartsData.value.options.series.map(item => item.name), dataList, '历史趋势.csv')
}
}
}
},
options: {
series: []
}
@@ -510,9 +528,14 @@ const initSearchFormIndexAndCount = (list: any) => {
})
})
countData.value = countData.value.filter(item => item.countOptions.length > 0);
console.log("🚀 ~ initSearchFormIndexAndCount ~ countData.value:", countData.value)
// countData.value = countData.value.filter(item => item.countOptions.length > 0);
}
setTimeout(() => {
tableHeaderRef.value.computedSearchRow()
}, 100)
}
// 判断下拉框是否存在
const onCountChange = (val: any, index: any) => {
@@ -522,13 +545,11 @@ const onCountChange = (val: any, index: any) => {
}
const onIndexChange = (val: any) => {
num.value +=1
num.value += 1
if (val.length == 0) {
searchForm.value.index = [indexOptions.value[0].id]
}
setTimeout(() => {
tableHeaderRef.value.computedSearchRow()
},500)
}
watch(
() => searchForm.value.index,