修改组件页面

This commit is contained in:
guanj
2026-01-06 15:42:33 +08:00
parent 5d3d16f8ec
commit 7a81c008c3
12 changed files with 266 additions and 222 deletions

View File

@@ -2,7 +2,7 @@
<template>
<div class="realtrend" v-loading="loading">
<div class="select" v-if="!loading">
<div class="mr10">谐波次数 </div>
<div class="mr10">谐波次数</div>
<el-select v-model.trim="selectValue" style="width: 100px" @change="selectChange">
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
</el-select>
@@ -29,24 +29,26 @@
</div> -->
<div class="realtrend_table" v-if="Object.keys(tableData).length != 0">
<div class="thead_left">
<p style=" font-weight: 700; background-color: #F3F6F9;">次数()</p>
<p style="font-weight: 700; background-color: #f3f6f9">次数()</p>
<p>{{ item.groupName }}{{ item.unit ? '(' + item.unit + ')' : '' }}</p>
<!-- <p>国标限值{{ item.unit ? '(' + item.unit + ')' : '' }}</p> -->
</div>
<div class="thead_right">
<div class="right_cell" v-for="(value, key, index) in tableData" :key="index">
<p v-if="item.groupName.includes('间谐波')" style="background-color: #F3F6F9;">
<p v-if="item.groupName.includes('间谐波')" style="background-color: #f3f6f9">
{{ Number(String(key).replace('data', ' ')) - 0.5 }}
</p>
<p v-else style="background-color: #F3F6F9;">
<p v-else style="background-color: #f3f6f9">
<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>
@@ -60,10 +62,7 @@
</span>
</p> -->
</div>
</div>
</div>
</div>
<div class="tab_info" v-if="Object.keys(tableData).length != 0">
@@ -91,18 +90,17 @@ const selectValue = ref('1')
const options = [
{
value: '3',
label: '全部',
label: '全部'
},
{
value: '1',
label: '奇次',
label: '奇次'
},
{
value: '2',
label: '偶次',
},
label: '偶次'
}
]
interface RowVO {
[key: string]: any
@@ -121,36 +119,58 @@ const gridOptions = ref<VxeGridProps<RowVO>>({
})
gridOptions.value = { ...defaultAttribute, ...gridOptions.value }
const tabsList: any = ref([])
const tabsList: any = ref([
{
id: '6d5470f509ca271d7108a86e83bb283f',
groupName: '谐波电压含有率',
thdDataVOS: null,
thdDataTdVODatas: null,
unit: '%'
},
{
id: '8dc260f16280184e2b57d26668dc00b1',
groupName: '谐波电流幅值',
thdDataVOS: null,
thdDataTdVODatas: null,
unit: 'A'
},
{
id: 'ae31115b83f02f03a0d3bd65cb017121',
groupName: '间谐波电压含有率',
thdDataVOS: null,
thdDataTdVODatas: null,
unit: '%'
}
])
const loading: any = ref(true)
//接收参数
const params = ref({})
const open = async (val: any) => {
loading.value = true
//获取指标tab
tabsList.value = [
{
id: '6d5470f509ca271d7108a86e83bb283f',
groupName: '谐波电压含有率',
thdDataVOS: null,
thdDataTdVODatas: null,
unit: '%'
},
{
id: '8dc260f16280184e2b57d26668dc00b1',
groupName: '谐波电流幅值',
thdDataVOS: null,
thdDataTdVODatas: null,
unit: 'A'
},
{
id: 'ae31115b83f02f03a0d3bd65cb017121',
groupName: '间谐波电压含有率',
thdDataVOS: null,
thdDataTdVODatas: null,
unit: '%'
}
]
// tabsList.value = [
// {
// id: '6d5470f509ca271d7108a86e83bb283f',
// groupName: '谐波电压含有率',
// thdDataVOS: null,
// thdDataTdVODatas: null,
// unit: '%'
// },
// {
// id: '8dc260f16280184e2b57d26668dc00b1',
// groupName: '谐波电流幅值',
// thdDataVOS: null,
// thdDataTdVODatas: null,
// unit: 'A'
// },
// {
// id: 'ae31115b83f02f03a0d3bd65cb017121',
// groupName: '间谐波电压含有率',
// thdDataVOS: null,
// thdDataTdVODatas: null,
// unit: '%'
// }
// ]
if (tabsList.value.length != 0) {
// activeName.value = tabsList.value[0]?.id
activeName.value = val.activeTrendName || 0
@@ -222,13 +242,12 @@ const init = () => {
let list: any = [
trendData.map((item: any) => {
return item.value
}),
})
// gbData.value.map((item: any) => {
// return item.value
// }),
]
let legendList = [tabsList.value[activeName.value]?.groupName, ]
let legendList = [tabsList.value[activeName.value]?.groupName]
// let legendList = [tabsList.value[activeName.value]?.groupName, '国标限值',]
// echartsData.value.legend.data = legendList
list.map((item: any, index: any) => {
@@ -269,7 +288,7 @@ const setRealTrendData = (val: any) => {
mqttMessage.value = val
for (let key in val) {
if (String(key).includes('data') && String(key) != 'dataLevel' && String(key) != 'dataTime') {
const numberPart = parseInt(key.replace('data', ''));
const numberPart = parseInt(key.replace('data', ''))
if (selectValue.value != '3') {
if (selectValue.value == '2') {
if (activeName.value == 2) {
@@ -292,19 +311,16 @@ const setRealTrendData = (val: any) => {
}
}
}
} else {
tableData.value[key] = val[key]
}
}
}
if (!tabsList.value[activeName.value].groupName.includes('间谐波')) {
delete tableData.value.data1
} else {
console.log('不删除')
// console.log('不删除')
}
if (Object.keys(tableData.value).length != 0) {
init()
@@ -327,28 +343,21 @@ const setOverLimitData = (val: any) => {
if (activeName.value == 0) {
if (String(key).includes('uharm')) {
if (key.startsWith('uharm')) {
limitData.value[key] = val[key];
limitData.value[key] = val[key]
}
}
} else if (activeName.value == 1) {
if (String(key).includes('iharm')) {
limitData.value[key] = val[key]
}
} else {
if (String(key).includes('inuharm')) {
limitData.value[key] = val[key]
}
}
}
}
onMounted(() => { })
onMounted(() => {})
defineExpose({ open, setRealTrendData, setOverLimitData })
</script>
<style lang="scss" scoped>
@@ -411,7 +420,6 @@ defineExpose({ open, setRealTrendData, setOverLimitData })
// }
.realtrend_table {
width: 100%;
height: auto;
max-height: 150px;