修改页面样式

This commit is contained in:
GGJ
2025-04-24 16:29:15 +08:00
parent dc4b37b833
commit cd20b4134a
9 changed files with 400 additions and 230 deletions

View File

@@ -29,58 +29,67 @@
</el-col>
<el-col :span="13">
<el-card>
<div class="tall">
<h3 class="mb10">暂降列表</h3>
<div class="tall1">
<vxe-table
height="auto"
auto-resize
:data="distributionData"
v-loading="loading"
v-bind="defaultAttribute"
>
<vxe-column
field="newStationName"
title="新能源站名称"
min-width="150px"
show-overflow-tooltip
></vxe-column>
<vxe-column field="startTime" title="暂降发生时刻" min-width="150px"></vxe-column>
<vxe-column
field="featureAmplitude"
title="暂降(骤升)幅值(%)"
sortable
min-width="150px"
></vxe-column>
<vxe-column
field="advanceReason"
title="暂降原因"
sortable
:formatter="formFilter"
min-width="100px"
></vxe-column>
<vxe-column field="severity" title="严重度" min-width="100px" sortable></vxe-column>
<vxe-column title="操作" width="80px">
<template #default="{ row }">
<el-button
type="primary"
v-if="row.wavePath != null"
size="small"
link
@click="boxi(row)"
>
查看波形
</el-button>
<el-button v-else disabled size="small" link>暂无波形</el-button>
</template>
</vxe-column>
</vxe-table>
<template #header>
<div class="card-header">
<span>暂降列表</span>
</div>
</template>
<!-- <h3 class="mb10">暂降列表</h3> -->
<div class="tall1">
<vxe-table
height="auto"
auto-resize
:data="distributionData"
v-loading="loading"
v-bind="defaultAttribute"
>
<vxe-column
field="newStationName"
title="新能源站名称"
min-width="150px"
show-overflow-tooltip
></vxe-column>
<vxe-column field="startTime" title="暂降发生时刻" min-width="150px"></vxe-column>
<vxe-column
field="featureAmplitude"
title="暂降(骤升)幅值(%)"
sortable
min-width="150px"
></vxe-column>
<vxe-column
field="advanceReason"
title="暂降原因"
sortable
:formatter="formFilter"
min-width="100px"
></vxe-column>
<vxe-column field="severity" title="严重度" min-width="100px" sortable></vxe-column>
<vxe-column title="操作" width="80px">
<template #default="{ row }">
<el-button
type="primary"
v-if="row.wavePath != null"
size="small"
link
@click="boxi(row)"
>
查看波形
</el-button>
<el-button v-else disabled size="small" link>暂无波形</el-button>
</template>
</vxe-column>
</vxe-table>
</div>
</el-card>
<el-card class="mt10">
<template #header>
<div class="card-header">
<span>暂降波形</span>
</div>
</template>
<div class="tall" v-loading="loading1">
<h3 class="mb10">暂降波形</h3>
<!-- <h3 class="mb10">暂降波形</h3> -->
<div v-if="wp != null">
<rmsboxi :value="1" :height="height" :boxoList="boxoList" :wp="wp" />
</div>
@@ -295,13 +304,16 @@ const clickMap = (e: any) => {
}
// 表格数据处理
const tabulation = (e: any) => {
console.log();
console.log()
loading.value = true
voltageRideThroughEventQueryPage({
...tableStore.table.params,
areaId: e.data.id,
frequencyType: e.seriesName == '高压' ? triggerType.filter(item => item.code == 'Voltage_Rise')[0].id : triggerType.filter(item => item.code == 'Voltage_Dip')[0].id
frequencyType:
e.seriesName == '高压'
? triggerType.filter(item => item.code == 'Voltage_Rise')[0].id
: triggerType.filter(item => item.code == 'Voltage_Dip')[0].id
})
.then(res => {
distributionData.value = res.data
@@ -377,10 +389,10 @@ const layout1 = mainHeight(93) as any
height: calc(v-bind('layout1.height') - 30px);
}
.tall {
height: calc((v-bind('layout1.height') - 60px) / 2);
height: calc((v-bind('layout1.height') - 100px) / 2);
}
.tall1 {
height: calc((v-bind('layout1.height') - 60px) / 2 - 35px);
height: calc((v-bind('layout1.height') - 100px) / 2 - 50px);
}
.group {

View File

@@ -88,11 +88,7 @@
<el-link
:type="row.vtimes == '1' ? 'danger' : 'success'"
:class="row.vtimes == '1' ? 'percentage' : ''"
@click="
row.vtimes == '1'
? detailClick(row, '谐波电压(%)', '2')
: ''
"
@click="row.vtimes == '1' ? detailClick(row, '谐波电压(%)', '2') : ''"
>
{{ row.vtimes == '1' ? '越限' : '合格' }}
</el-link>
@@ -103,11 +99,7 @@
<el-link
:type="row.itimes == '1' ? 'danger' : 'success'"
:class="row.itimes == '1' ? 'percentage' : ''"
@click="
row.itimes == '1'
? detailClick(row, '谐波电流(A)', '3')
: ''
"
@click="row.itimes == '1' ? detailClick(row, '谐波电流(A)', '3') : ''"
>
{{ row.itimes == '1' ? '越限' : '合格' }}
</el-link>
@@ -148,11 +140,7 @@
<el-link
:type="row.flicker == '1' ? 'danger' : 'success'"
:class="row.flicker == '1' ? 'percentage' : ''"
@click="
row.flicker == '1'
? detailClick(row, '长时闪变', 'plt')
: ''
"
@click="row.flicker == '1' ? detailClick(row, '长时闪变', 'plt') : ''"
>
{{ row.flicker == '1' ? '越限' : '合格' }}
</el-link>
@@ -184,11 +172,7 @@
:class="row.sequenceCurrentUnbalance == '1' ? 'percentage' : ''"
@click="
row.sequenceCurrentUnbalance == '1'
? detailClick(
row,
'电流不平衡度(%)',
'iNeg'
)
? detailClick(row, '电流不平衡度(%)', 'iNeg')
: ''
"
>
@@ -509,35 +493,35 @@ const tableStore = new TableStore({
{
label: '0%~10%',
quantity: res.minsNum0,
percentage: res.proportion0 + '%',
percentage: res.proportion0.toFixed(2) + '%',
crossTheLine: res.isOrNot0,
value: '0%~10%'
},
{
label: '10%~20%',
quantity: res.minsNum1,
percentage: res.proportion1 + '%',
percentage: res.proportion1.toFixed(2) + '%',
crossTheLine: res.isOrNot1,
value: '10%~10%'
},
{
label: '20%~30%',
quantity: res.minsNum2,
percentage: res.proportion2 + '%',
percentage: res.proportion2.toFixed(2) + '%',
crossTheLine: res.isOrNot2,
value: '10%~30%'
},
{
label: '30%~40%',
quantity: res.minsNum3,
percentage: res.proportion3 + '%',
percentage: res.proportion3.toFixed(2) + '%',
crossTheLine: res.isOrNot3,
value: '30%~40%'
},
{
label: '40%~50%',
quantity: res.minsNum4,
percentage: res.proportion4 + '%',
percentage: res.proportion4.toFixed(2) + '%',
crossTheLine: res.isOrNot4,
value: '40%~50%'
}
@@ -546,35 +530,35 @@ const tableStore = new TableStore({
{
label: '50%~60%',
quantity: res.minsNum5,
percentage: res.proportion5 + '%',
percentage: res.proportion5.toFixed(2) + '%',
crossTheLine: res.isOrNot5,
value: '50%~60%'
},
{
label: '60%~70%',
quantity: res.minsNum6,
percentage: res.proportion6 + '%',
percentage: res.proportion6.toFixed(2) + '%',
crossTheLine: res.isOrNot6,
value: '60%~70%'
},
{
label: '70%~80%',
quantity: res.minsNum7,
percentage: res.proportion7 + '%',
percentage: res.proportion7.toFixed(2) + '%',
crossTheLine: res.isOrNot7,
value: '70%~80%'
},
{
label: '80%~90%',
quantity: res.minsNum8,
percentage: res.proportion8 + '%',
percentage: res.proportion8.toFixed(2) + '%',
crossTheLine: res.isOrNot8,
value: '80%~90%'
},
{
label: '90%~100%',
quantity: res.minsNum9,
percentage: res.proportion9 + '%',
percentage: res.proportion9.toFixed(2) + '%',
crossTheLine: res.isOrNot9,
value: '90%~100%'
}
@@ -605,7 +589,7 @@ const tableStore = new TableStore({
lineHeight: 8,
minMargin: 10,
formatter: function (e) {
return '{name|' + e.name + '}{percent|' + e.data.percentage + '}'
return '{name|' + e.name + '}{percent|' + e.data.percentage+ '}'
},
rich: {
name: {
@@ -753,12 +737,11 @@ const timeClick = (row: any) => {
}
// 点击越限
const detailClick = (row: any, title: string, key: string) => {
detailRef.value.open({
row: row,
title: title,
field: index.value,
lineId: dotList.value.id ,
lineId: dotList.value.id,
key: key
})
}