电网侧指标越限统计联调
This commit is contained in:
@@ -7,13 +7,13 @@
|
||||
:options="echartList"
|
||||
:style="{
|
||||
width: prop.width,
|
||||
height: `calc(${prop.height} / 2 - ${headerHeight / 2}px + ${fullscreen ? 0 : 28}px )`
|
||||
height: `calc(${prop.height} / 2 )`
|
||||
}"
|
||||
/>
|
||||
<Table
|
||||
ref="tableRef"
|
||||
@cell-click="cellClickEvent"
|
||||
:height="`calc(${prop.height} / 2 - ${headerHeight / 2}px + ${fullscreen ? 0 : 28}px )`"
|
||||
:height="`calc(${prop.height} / 2 - ${headerHeight}px + ${fullscreen ? 0 : 56}px )`"
|
||||
isGroup
|
||||
></Table>
|
||||
<!-- 指标越限详情 -->
|
||||
@@ -24,12 +24,12 @@
|
||||
import { ref, onMounted, provide, reactive, watch, h } from 'vue'
|
||||
import TableStore from '@/utils/tableStore'
|
||||
import Table from '@/components/table/index.vue'
|
||||
import MyEchart from '@/components/echarts/MyEchart.vue'
|
||||
import { getTimeOfTheMonth } from '@/utils/formatTime'
|
||||
import OverLimitDetails from '@/components/cockpit/gridSideStatistics/components/overLimitDetails.vue'
|
||||
import TableHeader from '@/components/table/header/index.vue'
|
||||
import MyEchart from '@/components/echarts/MyEchart.vue'
|
||||
import OverLimitDetails from '@/components/cockpit/gridSideStatistics/components/overLimitDetails.vue'
|
||||
import { useRoute } from 'vue-router'
|
||||
import { useTimeCacheStore } from '@/stores/timeCache'
|
||||
import { gridSideLimitStatisticsData } from '@/api/harmonic-boot/cockpit/cockpit'
|
||||
|
||||
const prop = defineProps({
|
||||
w: { type: [String, Number] },
|
||||
@@ -42,8 +42,7 @@ const prop = defineProps({
|
||||
|
||||
const headerHeight = ref(57)
|
||||
|
||||
const route = useRoute()
|
||||
const timeCacheStore = useTimeCacheStore()
|
||||
const echartList = ref({})
|
||||
|
||||
const selectChange = (showSelect: any, height: any, datePickerValue?: any) => {
|
||||
headerHeight.value = height
|
||||
@@ -66,49 +65,59 @@ const fullscreen = computed(() => {
|
||||
return false
|
||||
}
|
||||
})
|
||||
const echartList = ref({
|
||||
title: {
|
||||
text: '指标越限占比'
|
||||
},
|
||||
|
||||
xAxis: {
|
||||
// name: '(区域)',
|
||||
data: ['闪变', '谐波电压', '谐波电流', '电压偏差', '三相不平衡']
|
||||
},
|
||||
const initEcharts = () => {
|
||||
gridSideLimitStatisticsData({
|
||||
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: '指标越限占比'
|
||||
},
|
||||
|
||||
yAxis: {
|
||||
name: '%', // 给X轴加单位
|
||||
interval: 20
|
||||
},
|
||||
grid: {
|
||||
left: '10px',
|
||||
right: '20px'
|
||||
},
|
||||
options: {
|
||||
series: [
|
||||
{
|
||||
// name: '暂降次数',
|
||||
type: 'bar',
|
||||
name: '越限占比',
|
||||
data: [0, 45, 22, 0, 70],
|
||||
barMaxWidth: 30
|
||||
xAxis: {
|
||||
// name: '(区域)',
|
||||
data: ['闪变', '谐波电压', '谐波电流', '电压偏差', '三相不平衡']
|
||||
},
|
||||
|
||||
// label: {
|
||||
// show: true,
|
||||
// position: 'top',
|
||||
// textStyle: {
|
||||
// //数值样式
|
||||
// color: '#000'
|
||||
// },
|
||||
// fontSize: 12
|
||||
// }
|
||||
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: '/user-boot/dept/deptTree',
|
||||
url: '/harmonic-boot/gridSideLimitStatistics/list',
|
||||
method: 'POST',
|
||||
|
||||
showPage: false,
|
||||
@@ -124,7 +133,7 @@ const tableStore: any = new TableStore({
|
||||
},
|
||||
{
|
||||
title: '名称',
|
||||
field: 'name',
|
||||
field: 'lineName',
|
||||
minWidth: '90'
|
||||
},
|
||||
{
|
||||
@@ -132,47 +141,47 @@ const tableStore: any = new TableStore({
|
||||
children: [
|
||||
{
|
||||
title: '闪变',
|
||||
field: 'type',
|
||||
field: 'flicker',
|
||||
minWidth: '70',
|
||||
render: 'customTemplate',
|
||||
customTemplate: (row: any) => {
|
||||
return `<span style='cursor: pointer;text-decoration: underline;'>${row.type}</span>`
|
||||
return `<span style='cursor: pointer;text-decoration: underline;'>${row.flicker}</span>`
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '谐波电压',
|
||||
field: 'type1',
|
||||
field: 'uharm',
|
||||
minWidth: '80',
|
||||
render: 'customTemplate',
|
||||
customTemplate: (row: any) => {
|
||||
return `<span style='cursor: pointer;text-decoration: underline;'>${row.type1}</span>`
|
||||
return `<span style='cursor: pointer;text-decoration: underline;'>${row.uharm}</span>`
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '谐波电流',
|
||||
field: 'type2',
|
||||
field: 'iharm',
|
||||
minWidth: '80',
|
||||
render: 'customTemplate',
|
||||
customTemplate: (row: any) => {
|
||||
return `<span style='cursor: pointer;text-decoration: underline;'>${row.type2}</span>`
|
||||
return `<span style='cursor: pointer;text-decoration: underline;'>${row.iharm}</span>`
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '电压偏差',
|
||||
field: 'type3',
|
||||
field: 'voltageDev',
|
||||
minWidth: '80',
|
||||
render: 'customTemplate',
|
||||
customTemplate: (row: any) => {
|
||||
return `<span style='cursor: pointer;text-decoration: underline;'>${row.type3}</span>`
|
||||
return `<span style='cursor: pointer;text-decoration: underline;'>${row.voltageDev}</span>`
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '三相不平衡',
|
||||
field: 'type4',
|
||||
field: 'ubalance',
|
||||
minWidth: '90',
|
||||
render: 'customTemplate',
|
||||
customTemplate: (row: any) => {
|
||||
return `<span style='cursor: pointer;text-decoration: underline;'>${row.type4}</span>`
|
||||
return `<span style='cursor: pointer;text-decoration: underline;'>${row.ubalance}</span>`
|
||||
}
|
||||
}
|
||||
]
|
||||
@@ -183,18 +192,8 @@ const tableStore: any = new TableStore({
|
||||
tableStore.table.params.searchEndTime = tableStore.table.params.searchEndTime || prop.timeValue?.[1]
|
||||
},
|
||||
loadCallback: () => {
|
||||
tableStore.table.data = [
|
||||
{
|
||||
name: '1#变压器电网侧',
|
||||
type: '0',
|
||||
type1: '45',
|
||||
type2: '22',
|
||||
type3: '0',
|
||||
type4: '70'
|
||||
}
|
||||
]
|
||||
|
||||
tableStore.table.height = `calc(${prop.height} - 80px)`
|
||||
initEcharts()
|
||||
}
|
||||
})
|
||||
|
||||
@@ -206,8 +205,11 @@ provide('tableStore', tableStore)
|
||||
// 点击行
|
||||
const cellClickEvent = ({ row, column }: any) => {
|
||||
if (column.field != 'name') {
|
||||
console.log(row)
|
||||
OverLimitDetailsRef.value.open(row)
|
||||
OverLimitDetailsRef.value.open(
|
||||
row,
|
||||
tableStore.table.params.searchBeginTime || prop.timeValue?.[0],
|
||||
tableStore.table.params.searchEndTime || prop.timeValue?.[1]
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
@@ -218,6 +220,7 @@ watch(
|
||||
() => prop.timeKey,
|
||||
val => {
|
||||
tableStore.index()
|
||||
initEcharts()
|
||||
}
|
||||
)
|
||||
watch(
|
||||
|
||||
Reference in New Issue
Block a user