154 lines
4.9 KiB
Vue
154 lines
4.9 KiB
Vue
<!-- 暂态 -->
|
|
<template>
|
|
<el-dialog draggable title="暂态电能质量水平评估统计" v-model="dialogVisible" width="1400px">
|
|
<div>
|
|
<vxe-table v-bind="defaultAttribute" ref="vxeRef" height="360px" :data="tableData">
|
|
<vxe-column field="name" title="区域" />
|
|
|
|
<vxe-column sortable field="sagTimes" title="暂降次数" />
|
|
<vxe-column sortable field="swellTimes" title="暂升次数" />
|
|
<vxe-column sortable field="interruptTimes" title="短时中断次数" />
|
|
|
|
<vxe-colgroup title="暂态严重度占比">
|
|
<vxe-column sortable field="rate90" title="SARFI-90" />
|
|
<vxe-column sortable field="rate50" title="SARFI-50" />
|
|
<vxe-column sortable field="rate20" title="SARFI-20" />
|
|
</vxe-colgroup>
|
|
</vxe-table>
|
|
</div>
|
|
<div style="margin-top: 10px; display: flex">
|
|
<!--
|
|
-->
|
|
<div class="statistics-main">
|
|
<div class="statistics-box">
|
|
<MyEChart style="height: 250px" :options="picEChart" />
|
|
|
|
<el-table size="small" height="250px" :data="descentData">
|
|
<el-table-column prop="name" label="暂降原因" width="80px" align="center" />
|
|
<el-table-column prop="value" label="暂降次数" width="80px" align="center" />
|
|
</el-table>
|
|
</div>
|
|
|
|
<div class="statistics-box">
|
|
<MyEChart style="height: 250px" :options="picEChart1" />
|
|
<el-table size="small" height="250px" :data="resembleData">
|
|
<el-table-column prop="name" label="暂降类型" width="80px" align="center" />
|
|
<el-table-column prop="value" label="暂降次数" width="80px" align="center" />
|
|
</el-table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</el-dialog>
|
|
</template>
|
|
<script setup lang="ts">
|
|
import { ref } from 'vue'
|
|
import MyEChart from '@/components/echarts/MyEchart.vue'
|
|
import { defaultAttribute } from '@/components/table/defaultAttribute'
|
|
import { getEventReason, getEventDetailByList } from '@/api/device-boot/panorama'
|
|
|
|
const dialogVisible: any = ref(false)
|
|
|
|
const tableData: any = ref([])
|
|
const descentData = ref([])
|
|
const resembleData = ref([])
|
|
|
|
const picEChart = ref({})
|
|
const picEChart1 = ref({})
|
|
const open = async (row: any) => {
|
|
getEventDetailByList({ ...row, deviceInfoParam: row }).then((res: any) => {
|
|
tableData.value = res.data
|
|
})
|
|
getEventReason(row).then(res => {
|
|
descentData.value = res.data.reason
|
|
resembleData.value = res.data.type
|
|
picEChart.value = {
|
|
tooltip: {
|
|
trigger: 'item'
|
|
},
|
|
legend: {
|
|
orient: 'vertical',
|
|
left: '10px'
|
|
},
|
|
xAxis: {
|
|
show: false
|
|
},
|
|
yAxis: {
|
|
show: false
|
|
},
|
|
options: {
|
|
dataZoom: null,
|
|
series: [
|
|
{
|
|
type: 'pie',
|
|
center: ['60%', '50%'],
|
|
radius: '50%',
|
|
label: {
|
|
show: false,
|
|
position: 'outside',
|
|
textStyle: {
|
|
//数值样式
|
|
}
|
|
},
|
|
data: res.data.reason
|
|
}
|
|
]
|
|
}
|
|
}
|
|
picEChart1.value = {
|
|
tooltip: {
|
|
trigger: 'item'
|
|
},
|
|
legend: {
|
|
orient: 'vertical',
|
|
left: '10px'
|
|
},
|
|
xAxis: {
|
|
show: false
|
|
},
|
|
yAxis: {
|
|
show: false
|
|
},
|
|
options: {
|
|
dataZoom: null,
|
|
series: [
|
|
{
|
|
type: 'pie',
|
|
center: ['60%', '50%'],
|
|
radius: '50%',
|
|
label: {
|
|
show: false,
|
|
position: 'outside',
|
|
textStyle: {
|
|
//数值样式
|
|
}
|
|
},
|
|
data: res.data.type
|
|
}
|
|
]
|
|
}
|
|
}
|
|
})
|
|
dialogVisible.value = true
|
|
}
|
|
|
|
defineExpose({ open })
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
.statistics-main {
|
|
// height: 300px;
|
|
display: grid;
|
|
width: 100%;
|
|
grid-template-columns: 1fr 1fr;
|
|
|
|
.statistics-box {
|
|
// height: 300px;
|
|
// display: flex;
|
|
display: grid;
|
|
grid-template-columns: 2fr 1fr;
|
|
}
|
|
}
|
|
:deep(.el-dialog__body) {
|
|
max-height: none !important;
|
|
}
|
|
</style>
|