269 lines
8.4 KiB
Vue
269 lines
8.4 KiB
Vue
<template>
|
||
<div>
|
||
<!--总体指标越限统计 -->
|
||
<TableHeader
|
||
:showReset="false"
|
||
ref="TableHeaderRef"
|
||
@selectChange="selectChange"
|
||
datePicker
|
||
v-if="fullscreen" :timeKeyList="prop.timeKey"
|
||
></TableHeader>
|
||
<my-echart
|
||
class="tall"
|
||
:options="echartList"
|
||
:style="{
|
||
width: prop.width,
|
||
height: `calc(${prop.height} / 2 )`
|
||
}"
|
||
/>
|
||
<Table
|
||
ref="tableRef"
|
||
@cell-click="cellClickEvent"
|
||
:height="`calc(${prop.height} / 2 - ${headerHeight}px + ${fullscreen ? 0 : 56}px )`"
|
||
isGroup
|
||
></Table>
|
||
<!-- 指标越限详情 -->
|
||
<OverLimitDetails ref="OverLimitDetailsRef" />
|
||
</div>
|
||
</template>
|
||
<script setup lang="ts">
|
||
import { ref, onMounted, provide, reactive, watch, h } from 'vue'
|
||
import TableStore from '@/utils/tableStore'
|
||
import Table from '@/components/table/index.vue'
|
||
import TableHeader from '@/components/table/header/index.vue'
|
||
import MyEchart from '@/components/echarts/MyEchart.vue'
|
||
import OverLimitDetails from '@/components/cockpit/overLimitStatistics/components/overLimitDetails.vue'
|
||
import { useRoute } from 'vue-router'
|
||
import { useTimeCacheStore } from '@/stores/timeCache'
|
||
import { totalLimitStatisticsData } from '@/api/harmonic-boot/cockpit/cockpit'
|
||
import { getTime } from '@/utils/formatTime'
|
||
|
||
const prop = defineProps({
|
||
w: { type: [String, Number] },
|
||
h: { type: [String, Number] },
|
||
width: { type: [String, Number] },
|
||
height: { type: [String, Number] },
|
||
timeKey: { type: Array as () => string[] },
|
||
timeValue: { type: Object },
|
||
interval: { type: Number }
|
||
})
|
||
|
||
const headerHeight = ref(57)
|
||
|
||
const TableHeaderRef = ref()
|
||
|
||
const echartList = ref({})
|
||
|
||
const selectChange = (showSelect: any, height: any, datePickerValue?: any) => {
|
||
headerHeight.value = height
|
||
|
||
if (datePickerValue && datePickerValue.timeValue) {
|
||
// 更新时间参数
|
||
tableStore.table.params.searchBeginTime = datePickerValue.timeValue[0]
|
||
tableStore.table.params.searchEndTime = datePickerValue.timeValue[1]
|
||
}
|
||
}
|
||
|
||
// 计算是否全屏展示
|
||
const fullscreen = computed(() => {
|
||
const w = Number(prop.w)
|
||
const h = Number(prop.h)
|
||
if (!isNaN(w) && !isNaN(h) && w === 12 && h === 6) {
|
||
// 执行相应逻辑
|
||
return true
|
||
} else {
|
||
return false
|
||
}
|
||
})
|
||
|
||
const initEcharts = () => {
|
||
totalLimitStatisticsData({
|
||
searchBeginTime: tableStore.table.params.searchBeginTime,
|
||
searchEndTime: tableStore.table.params.searchEndTime
|
||
}).then((res: any) => {
|
||
const dataArray = [res.data.flicker, res.data.uharm, res.data.iharm, res.data.voltageDev, res.data.ubalance]
|
||
echartList.value = {
|
||
title: {
|
||
text: '指标越限占比'
|
||
},
|
||
|
||
xAxis: {
|
||
// name: '(区域)',
|
||
data: ['长时闪变', '谐波电压', '谐波电流', '电压偏差', '三相不平衡']
|
||
},
|
||
|
||
yAxis: {
|
||
name: '%', // 给X轴加单位
|
||
interval: 20
|
||
},
|
||
grid: {
|
||
left: '10px',
|
||
right: '20px'
|
||
},
|
||
options: {
|
||
series: [
|
||
{
|
||
// name: '暂降次数',
|
||
type: 'bar',
|
||
name: '越限占比',
|
||
data: dataArray,
|
||
barMaxWidth: 30
|
||
|
||
// label: {
|
||
// show: true,
|
||
// position: 'top',
|
||
// textStyle: {
|
||
// //数值样式
|
||
// color: '#000'
|
||
// },
|
||
// fontSize: 12
|
||
// }
|
||
}
|
||
]
|
||
}
|
||
}
|
||
})
|
||
}
|
||
|
||
const OverLimitDetailsRef = ref()
|
||
const tableStore: any = new TableStore({
|
||
url: '/cs-harmonic-boot/totalLimitStatistics/list',
|
||
method: 'POST',
|
||
|
||
showPage: false,
|
||
|
||
column: [
|
||
{
|
||
field: 'index',
|
||
title: '序号',
|
||
width: '80',
|
||
formatter: (row: any) => {
|
||
return (tableStore.table.params.pageNum - 1) * tableStore.table.params.pageSize + row.rowIndex + 1
|
||
}
|
||
},
|
||
{
|
||
title: '名称',
|
||
field: 'lineName',
|
||
minWidth: '90'
|
||
},
|
||
{
|
||
title: '越限占比(%)',
|
||
children: [
|
||
{
|
||
title: '长时闪变',
|
||
field: 'flicker',
|
||
minWidth: '70',
|
||
render: 'customTemplate',
|
||
customTemplate: (row: any) => {
|
||
return `<span style='cursor: pointer;text-decoration: underline;'>${row.flicker}</span>`
|
||
}
|
||
},
|
||
{
|
||
title: '谐波电压',
|
||
field: 'uharm',
|
||
minWidth: '80',
|
||
render: 'customTemplate',
|
||
customTemplate: (row: any) => {
|
||
return `<span style='cursor: pointer;text-decoration: underline;'>${row.uharm}</span>`
|
||
}
|
||
},
|
||
{
|
||
title: '谐波电流',
|
||
field: 'iharm',
|
||
minWidth: '80',
|
||
render: 'customTemplate',
|
||
customTemplate: (row: any) => {
|
||
return `<span style='cursor: pointer;text-decoration: underline;'>${row.iharm}</span>`
|
||
}
|
||
},
|
||
{
|
||
title: '电压偏差',
|
||
field: 'voltageDev',
|
||
minWidth: '80',
|
||
render: 'customTemplate',
|
||
customTemplate: (row: any) => {
|
||
return `<span style='cursor: pointer;text-decoration: underline;'>${row.voltageDev}</span>`
|
||
}
|
||
},
|
||
{
|
||
title: '三相不平衡',
|
||
field: 'ubalance',
|
||
minWidth: '90',
|
||
render: 'customTemplate',
|
||
customTemplate: (row: any) => {
|
||
return `<span style='cursor: pointer;text-decoration: underline;'>${row.ubalance}</span>`
|
||
}
|
||
}
|
||
]
|
||
}
|
||
],
|
||
beforeSearchFun: () => {
|
||
setTime()
|
||
},
|
||
loadCallback: () => {
|
||
tableStore.table.height = `calc(${prop.height} - 80px)`
|
||
initEcharts()
|
||
}
|
||
})
|
||
|
||
const tableRef = ref()
|
||
provide('tableRef', tableRef)
|
||
|
||
provide('tableStore', tableStore)
|
||
|
||
// 点击行
|
||
const cellClickEvent = ({ row, column }: any) => {
|
||
if (column.field != 'name') {
|
||
OverLimitDetailsRef.value.open(
|
||
row,
|
||
tableStore.table.params.searchBeginTime || prop.timeValue?.[0],
|
||
tableStore.table.params.searchEndTime || prop.timeValue?.[1],
|
||
tableStore.table.data
|
||
)
|
||
}
|
||
}
|
||
|
||
onMounted(() => {
|
||
tableStore.index()
|
||
})
|
||
|
||
const setTime = () => {
|
||
const time = getTime(
|
||
(TableHeaderRef.value?.datePickerRef.interval || prop.interval) ?? 0,
|
||
prop.timeKey,
|
||
fullscreen.value
|
||
? [tableStore.table.params.searchBeginTime, tableStore.table.params.searchEndTime]
|
||
: prop.timeValue
|
||
)
|
||
|
||
if (Array.isArray(time)) {
|
||
tableStore.table.params.searchBeginTime = time[0]
|
||
tableStore.table.params.searchEndTime = time[1]
|
||
TableHeaderRef.value?.setInterval(time[2] - 0)
|
||
TableHeaderRef.value?.setTimeInterval([time[0], time[1]])
|
||
} else {
|
||
console.warn('获取时间失败，time 不是一个有效数组')
|
||
}
|
||
}
|
||
|
||
watch(
|
||
() => prop.timeKey,
|
||
val => {
|
||
tableStore.index()
|
||
initEcharts()
|
||
}
|
||
)
|
||
watch(
|
||
() => prop.timeValue,
|
||
(newVal, oldVal) => {
|
||
tableStore.index()
|
||
},
|
||
{
|
||
deep: true
|
||
}
|
||
)
|
||
|
||
const addMenu = () => {}
|
||
</script>
|
||
<style lang="scss" scoped></style>
|