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

谐波频谱添加奇次、偶次区分

Browse Source 
历史趋势添加线区分指标
This commit is contained in:
GGJ
2024-11-20 10:05:29 +08:00
parent 64fb9141fd
commit 876c29bdaf
3 changed files with 115 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

89
src/views/govern/device/control/tabs/components/realtrend.vue
View File

@@ -1,6 +1,9 @@
<!-- 实时数据 - 谐波频谱页面 -->
<template>
<div class="realtrend" v-loading="loading">
<el-select v-model="selectValue" v-if="!loading" style="width: 100px" class="select">
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
</el-select>
<el-tabs type="border-card" v-if="tabsList.length != 0" v-model="activeName" @tab-click="handleClick">
<el-tab-pane v-for="(item, index) in tabsList" :label="item.groupName" :name="index" :key="index">
<div>
@@ -35,13 +38,11 @@
<span>{{ String(key).replace('data', ' ') }}次</span>
</p>
<p>
<span
v-if="
String(key).includes('data') &&
String(key) != 'dataLevel' &&
String(key) != 'dataTime'
"
>
<span v-if="
String(key).includes('data') &&
String(key) != 'dataLevel' &&
String(key) != 'dataTime'
">
{{ value }}
</span>
</p>
@@ -69,6 +70,23 @@ import MyEchart from '@/components/echarts/MyEchart.vue'
const activeName = ref(0)
const emit = defineEmits(['changeTrendType'])
const tableList: any = []
const selectValue = ref('1')
const options = [
{
value: '1',
label: '奇次',
},
{
value: '2',
label: '偶次',
},
{
value: '3',
label: '全部',
},
]
interface RowVO {
[key: string]: any
}
@@ -171,7 +189,7 @@ const init = () => {
xAxis: {
name: '次数',
data: trendData.map((item: any) => {
return item.count + '次'
return (activeName.value == 2 ? item.count - 0.5 : item.count) + '次'
})
},
yAxis: {
@@ -227,9 +245,39 @@ const setRealTrendData = (val: any) => {
mqttMessage.value = val
for (let key in val) {
if (String(key).includes('data') && String(key) != 'dataLevel' && String(key) != 'dataTime') {
tableData.value[key] = val[key]
const numberPart = parseInt(key.replace('data', ''));
if (selectValue.value != '3') {
if (selectValue.value == '2') {
if (activeName.value == 2) {
if (numberPart % 2 !== 0) {
tableData.value[key] = val[key]
}
} else {
if (numberPart % 2 === 0) {
tableData.value[key] = val[key]
}
}
} else {
if (activeName.value == 2) {
if (numberPart % 2 === 0) {
tableData.value[key] = val[key]
}
} else {
if (numberPart % 2 !== 0) {
tableData.value[key] = val[key]
}
}
}
} else {
tableData.value[key] = val[key]
}
}
}
if (!tabsList.value[activeName.value].groupName.includes('间谐波')) {
delete tableData.value.data1
} else {
@@ -252,13 +300,19 @@ const setOverLimitData = (val: any) => {
}
}
}
onMounted(() => {})
onMounted(() => { })
defineExpose({ open, setRealTrendData, setOverLimitData })
</script>
<style lang="scss" scoped>
.realtrend {
width: 100%;
height: 100%;
position: relative;
.select {
position: absolute;
top: -40px;
}
.realtrend_top {
width: 100%;
@@ -306,12 +360,14 @@ defineExpose({ open, setRealTrendData, setOverLimitData })
// }
.realtrend_table {
width: 100%;
height: auto;
max-height: 150px;
display: flex;
border: 2px solid #eee;
cursor: pointer;
.thead_left {
width: 150px;
height: 100%;
@@ -322,6 +378,7 @@ defineExpose({ open, setRealTrendData, setOverLimitData })
line-height: 50px;
font-weight: 800;
padding-bottom: 5px;
p {
width: 100%;
height: 100%;
@@ -331,25 +388,30 @@ defineExpose({ open, setRealTrendData, setOverLimitData })
margin: 0 !important;
}
}
.thead_right {
flex: 1;
align-items: center;
overflow-x: auto;
overflow-y: hidden;
display: flex;
padding-bottom: 5px;
.right_cell {
width: 100%;
display: flex;
flex-direction: column;
p {
flex: none;
width: 60px;
min-width: 60px;
height: 100%;
text-align: center;
border: 1px solid #eee;
line-height: 50px;
margin: 0 !important;
}
p:nth-child(1) {
font-weight: 800;
}
@@ -378,6 +440,7 @@ defineExpose({ open, setRealTrendData, setOverLimitData })
.tab_info {
width: 100%;
// height: calc(100vh - 450px);
// overflow: auto;
// padding-bottom: 20px;
@@ -387,4 +450,8 @@ defineExpose({ open, setRealTrendData, setOverLimitData })
height: calc(100vh - 560px);
}
}
:deep(.el-select) {
min-width: 100px;
}
</style>