修改异常数据页面、修改有功功率趋势分析页面接口
This commit is contained in:
875
src/views/LN/newEnergy/newEnergyAnalysis/test.vue
Normal file
875
src/views/LN/newEnergy/newEnergyAnalysis/test.vue
Normal file
@@ -0,0 +1,875 @@
|
||||
<template>
|
||||
<div class="default-main" :style="height">
|
||||
<splitpanes style="height: 100%" class="default-theme" id="navigation-splitpanes">
|
||||
<pane :size="size">
|
||||
<PointTree
|
||||
:default-expand-all="false"
|
||||
@node-click="handleNodeClick"
|
||||
@init="handleNodeClick"
|
||||
></PointTree>
|
||||
</pane>
|
||||
<pane :style="height" style="background: #fff">
|
||||
<TableHeader ref="TableHeaderRef" datePicker>
|
||||
<template #operation>
|
||||
<el-button icon="el-icon-Download" type="primary" @click="exportData">导出区间数据</el-button>
|
||||
</template>
|
||||
</TableHeader>
|
||||
|
||||
<div class="container pd10">
|
||||
<el-card class="cardBox">
|
||||
<template #header>
|
||||
<div class="card-header" style="display: flex; justify-content: space-between">
|
||||
<span>功率区间</span>
|
||||
<div>
|
||||
<span style="font-size: 14px">稳态越限图例: </span>
|
||||
<span style="color: red">越限 </span>
|
||||
<span style="color: green">合格</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<el-card class="card-top mt5">
|
||||
<div
|
||||
v-for="(item, index) in powerList1"
|
||||
class="pd10"
|
||||
style="cursor: pointer"
|
||||
:class="flag == item.label ? 'hoverBox' : ''"
|
||||
@click="analyseList(item.label, index)"
|
||||
>
|
||||
<div style="font-size: 24px; font-weight: 700">
|
||||
<span :style="{ color: item.crossTheLine > 0 ? 'red' : 'green' }">
|
||||
{{ item.quantity }}
|
||||
</span>
|
||||
<span style="font-size: 14px; font-weight: 500">个</span>
|
||||
</div>
|
||||
<div>
|
||||
{{ item.label }}
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
|
||||
<el-card class="card-top mt15">
|
||||
<div
|
||||
v-for="(item, index) in powerList2"
|
||||
class="pd10"
|
||||
style="cursor: pointer"
|
||||
:class="flag == item.label ? 'hoverBox' : ''"
|
||||
@click="analyseList(item.label, index + 5)"
|
||||
>
|
||||
<div style="font-size: 24px; font-weight: 700">
|
||||
<span :style="{ color: item.crossTheLine > 0 ? 'red' : 'green' }">
|
||||
{{ item.quantity }}
|
||||
</span>
|
||||
<span style="font-size: 14px; font-weight: 500">个</span>
|
||||
</div>
|
||||
<div>
|
||||
{{ item.label }}
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
</el-card>
|
||||
<el-card class="echart">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span>有功率区间占比</span>
|
||||
</div>
|
||||
</template>
|
||||
<my-echart :options="options" style="height: 212px" />
|
||||
</el-card>
|
||||
</div>
|
||||
<div class="container" style="padding: 0px 10px 10px">
|
||||
<el-card class="box">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span>功率区间稳态越限详情</span>
|
||||
</div>
|
||||
</template>
|
||||
<!-- <h3>功率区间稳态越限详情</h3> -->
|
||||
<div :style="`height:calc(${heightB.height} - 25px)`" style="overflow-y: auto">
|
||||
<vxe-table
|
||||
v-bind="defaultAttribute"
|
||||
ref="vxeRef"
|
||||
height="auto"
|
||||
:data="tableData"
|
||||
v-loading="loading"
|
||||
>
|
||||
<vxe-column field="time" title="时间" width="180px">
|
||||
<template #default="{ row }">
|
||||
<el-link
|
||||
type="primary"
|
||||
:underline="false"
|
||||
class="percentage"
|
||||
@click="timeClick(row)"
|
||||
>
|
||||
{{ row.time }}
|
||||
</el-link>
|
||||
</template>
|
||||
</vxe-column>
|
||||
<vxe-column field="voltageOffset" title="电压偏差(%)" min-width="110px">
|
||||
<template #default="{ row }">
|
||||
<el-link
|
||||
:type="row.voltageOffset == '1' ? 'danger' : 'success'"
|
||||
:class="row.voltageOffset == '1' ? 'percentage' : ''"
|
||||
@click="
|
||||
row.voltageOffset == '1'
|
||||
? detailClick(row, '电压偏差(%)', 'voltageOffsetList')
|
||||
: ''
|
||||
"
|
||||
>
|
||||
{{ row.voltageOffset == '1' ? '越限' : '合格' }}
|
||||
</el-link>
|
||||
</template>
|
||||
</vxe-column>
|
||||
<vxe-column field="vtimes" title="谐波电压(%)" min-width="110px">
|
||||
<template #default="{ row }">
|
||||
<el-link
|
||||
:type="row.vtimes == '1' ? 'danger' : 'success'"
|
||||
:class="row.vtimes == '1' ? 'percentage' : ''"
|
||||
@click="
|
||||
row.vtimes == '1' ? detailClick(row, '谐波电压(%)', 'vtimesList') : ''
|
||||
"
|
||||
>
|
||||
{{ row.vtimes == '1' ? '越限' : '合格' }}
|
||||
</el-link>
|
||||
</template>
|
||||
</vxe-column>
|
||||
<vxe-column field="itimes" title="谐波电流(A)" min-width="110px">
|
||||
<template #default="{ row }">
|
||||
<el-link
|
||||
:type="row.itimes == '1' ? 'danger' : 'success'"
|
||||
:class="row.itimes == '1' ? 'percentage' : ''"
|
||||
@click="
|
||||
row.itimes == '1' ? detailClick(row, '谐波电流(A)', 'itimestList') : ''
|
||||
"
|
||||
>
|
||||
{{ row.itimes == '1' ? '越限' : '合格' }}
|
||||
</el-link>
|
||||
</template>
|
||||
</vxe-column>
|
||||
<vxe-column field="ubalance" title="三相电压不平衡度(%)" min-width="150px">
|
||||
<template #default="{ row }">
|
||||
<el-link
|
||||
:type="row.ubalance == '1' ? 'danger' : 'success'"
|
||||
:class="row.ubalance == '1' ? 'percentage' : ''"
|
||||
@click="
|
||||
row.ubalance == '1'
|
||||
? detailClick(row, '三相电压不平衡度(%)', 'ubalanceList')
|
||||
: ''
|
||||
"
|
||||
>
|
||||
{{ row.ubalance == '1' ? '越限' : '合格' }}
|
||||
</el-link>
|
||||
</template>
|
||||
</vxe-column>
|
||||
<vxe-column field="voltageFluctuation" title="电压波动(%)" min-width="110px">
|
||||
<template #default="{ row }">
|
||||
<el-link
|
||||
:type="row.voltageFluctuation == '1' ? 'danger' : 'success'"
|
||||
:class="row.voltageFluctuation == '1' ? 'percentage' : ''"
|
||||
@click="
|
||||
row.voltageFluctuation == '1'
|
||||
? detailClick(row, '电压波动(%)', 'voltageFluctuationList')
|
||||
: ''
|
||||
"
|
||||
>
|
||||
{{ row.voltageFluctuation == '1' ? '越限' : '合格' }}
|
||||
</el-link>
|
||||
</template>
|
||||
</vxe-column>
|
||||
<vxe-column field="flicker" title="长时闪变" min-width="110px">
|
||||
<template #default="{ row }">
|
||||
<el-link
|
||||
:type="row.flicker == '1' ? 'danger' : 'success'"
|
||||
:class="row.flicker == '1' ? 'percentage' : ''"
|
||||
@click="
|
||||
row.flicker == '1' ? detailClick(row, '长时闪变', 'flickerList') : ''
|
||||
"
|
||||
>
|
||||
{{ row.flicker == '1' ? '越限' : '合格' }}
|
||||
</el-link>
|
||||
</template>
|
||||
</vxe-column>
|
||||
<vxe-column field="interHarmonic" title="间谐波电压含有率(%)" min-width="150px">
|
||||
<template #default="{ row }">
|
||||
<el-link
|
||||
:type="row.interHarmonic == '1' ? 'danger' : 'success'"
|
||||
:class="row.interHarmonic == '1' ? 'percentage' : ''"
|
||||
@click="
|
||||
row.interHarmonic == '1'
|
||||
? detailClick(row, '间谐波电压含有率(%)', 'interHarmonicList')
|
||||
: ''
|
||||
"
|
||||
>
|
||||
{{ row.interHarmonic == '1' ? '越限' : '合格' }}
|
||||
</el-link>
|
||||
</template>
|
||||
</vxe-column>
|
||||
<vxe-column field="sequenceCurrentUnbalance" title="电流不平衡度(%)" min-width="130px">
|
||||
<template #default="{ row }">
|
||||
<el-link
|
||||
:type="row.sequenceCurrentUnbalance == '1' ? 'danger' : 'success'"
|
||||
:class="row.sequenceCurrentUnbalance == '1' ? 'percentage' : ''"
|
||||
@click="
|
||||
row.sequenceCurrentUnbalance == '1'
|
||||
? detailClick(
|
||||
row,
|
||||
'电流不平衡度(%)',
|
||||
'sequenceCurrentUnbalanceList'
|
||||
)
|
||||
: ''
|
||||
"
|
||||
>
|
||||
{{ row.sequenceCurrentUnbalance == '1' ? '越限' : '合格' }}
|
||||
</el-link>
|
||||
</template>
|
||||
</vxe-column>
|
||||
|
||||
<vxe-column field="num3" fixed="right" title="操作" width="80">
|
||||
<template #default="{ row }">
|
||||
<el-button type="primary" link @click="addTo(row)">添加</el-button>
|
||||
</template>
|
||||
</vxe-column>
|
||||
</vxe-table>
|
||||
</div>
|
||||
</el-card>
|
||||
|
||||
<el-card class="box">
|
||||
<template #header>
|
||||
<div style="display: flex; justify-content: space-between">
|
||||
<div class="card-header">
|
||||
<span>报告参数</span>
|
||||
</div>
|
||||
<el-button icon="el-icon-Download" size="small" type="primary" @click="generateReports">
|
||||
生成报表
|
||||
</el-button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<div :style="heightB" style="overflow-y: auto">
|
||||
<div>
|
||||
<el-tree style="max-width: 600px" :data="dataSource" node-key="id" default-expand-all>
|
||||
<template #default="{ node, data }">
|
||||
<span class="custom-tree-node">
|
||||
<span :style="data.level != 0 ? 'color: var(--el-color-primary)' : ''">
|
||||
{{ data.time }}
|
||||
</span>
|
||||
<Close
|
||||
v-if="data.level != 0"
|
||||
style="margin-left: 5px; height: 14px"
|
||||
@click="remove(node, data)"
|
||||
/>
|
||||
</span>
|
||||
</template>
|
||||
</el-tree>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
</div>
|
||||
</pane>
|
||||
</splitpanes>
|
||||
<!-- 时间弹框 -->
|
||||
<timePopUpBox
|
||||
v-if="timePopUpBox"
|
||||
ref="timePopUpBoxRef"
|
||||
:timePopUpBox="timePopUpBox"
|
||||
@close="timePopUpBox = null"
|
||||
/>
|
||||
<!-- 越限详情 -->
|
||||
<detail ref="detailRef" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { onMounted, ref, provide } from 'vue'
|
||||
import 'splitpanes/dist/splitpanes.css'
|
||||
import { Splitpanes, Pane } from 'splitpanes'
|
||||
import TableStore from '@/utils/tableStore'
|
||||
import PointTree from '@/components/tree/pqs/pointTree.vue'
|
||||
import TableHeader from '@/components/table/header/index.vue'
|
||||
import { useDictData } from '@/stores/dictData'
|
||||
import { mainHeight } from '@/utils/layout'
|
||||
import { defaultAttribute } from '@/components/table/defaultAttribute'
|
||||
import MyEchart from '@/components/echarts/MyEchart.vue'
|
||||
import TimePopUpBox from './components/timePopUpBox.vue'
|
||||
import { ElMessage } from 'element-plus'
|
||||
import {
|
||||
getDataByLineId,
|
||||
getTargetLimitById,
|
||||
exportExcelRangTemplate,
|
||||
exportExcelListTemplate
|
||||
} from '@/api/harmonic-boot/newEnergyAnalysis'
|
||||
import detail from './components/detail.vue'
|
||||
import { Close } from '@element-plus/icons-vue'
|
||||
defineOptions({
|
||||
name: 'newEnergy/newEnergyAnalysis'
|
||||
})
|
||||
const timePopUpBox = ref<anyObj | null>(null)
|
||||
const flag = ref('0%~10%')
|
||||
const value1 = ref('0%~10%')
|
||||
|
||||
const options1 = [
|
||||
'0%~10%',
|
||||
'10%~20%',
|
||||
'20%~30%',
|
||||
'30%~40%',
|
||||
'40%~50%',
|
||||
'50%~60%',
|
||||
'60%~70%',
|
||||
'70%~80%',
|
||||
'80%~90%',
|
||||
'90%~100%'
|
||||
]
|
||||
const height = mainHeight(20)
|
||||
const heightB = mainHeight(445)
|
||||
const size = ref(0)
|
||||
const TableHeaderRef = ref()
|
||||
const detailRef = ref()
|
||||
const dotList: any = ref({})
|
||||
const loading = ref(false)
|
||||
const timePopUpBoxRef = ref()
|
||||
const index = ref(0)
|
||||
const treeList = ref([])
|
||||
const powerList1: any = ref([
|
||||
{
|
||||
label: '0%~10%',
|
||||
quantity: '0',
|
||||
percentage: '10%',
|
||||
crossTheLine: '越限',
|
||||
value: '0%~10%'
|
||||
},
|
||||
{
|
||||
label: '10%~20%',
|
||||
quantity: '0',
|
||||
percentage: '10%',
|
||||
crossTheLine: '合格',
|
||||
value: '10%~20%'
|
||||
},
|
||||
{
|
||||
label: '20%~30%',
|
||||
quantity: '0',
|
||||
percentage: '10%',
|
||||
crossTheLine: '合格',
|
||||
value: '20%~30%'
|
||||
},
|
||||
{
|
||||
label: '30%~40%',
|
||||
quantity: '0',
|
||||
percentage: '10%',
|
||||
crossTheLine: '合格',
|
||||
value: '30%~40%'
|
||||
},
|
||||
{
|
||||
label: '40%~50%',
|
||||
quantity: '0',
|
||||
percentage: '10%',
|
||||
crossTheLine: '合格',
|
||||
value: '40%~50%'
|
||||
}
|
||||
])
|
||||
const powerList2: any = ref([
|
||||
{
|
||||
label: '50%~60%',
|
||||
quantity: '0',
|
||||
percentage: '10%',
|
||||
crossTheLine: '合格',
|
||||
value: '50%~60%'
|
||||
},
|
||||
{
|
||||
label: '60%~70%',
|
||||
quantity: '0',
|
||||
percentage: '10%',
|
||||
crossTheLine: '合格',
|
||||
value: '60%~70%'
|
||||
},
|
||||
{
|
||||
label: '70%~80%',
|
||||
quantity: '0',
|
||||
percentage: '10%',
|
||||
crossTheLine: '合格',
|
||||
value: '70%~80%'
|
||||
},
|
||||
{
|
||||
label: '80%~90%',
|
||||
quantity: '0',
|
||||
percentage: '10%',
|
||||
crossTheLine: '越限',
|
||||
value: '80%~90%'
|
||||
},
|
||||
{
|
||||
label: '90%~100%',
|
||||
quantity: '20',
|
||||
percentage: '10%',
|
||||
crossTheLine: '越限',
|
||||
value: '90%~100%'
|
||||
}
|
||||
])
|
||||
|
||||
const tableData: any = ref([])
|
||||
const dataSource: any = ref([
|
||||
{
|
||||
id: 1,
|
||||
level: 0,
|
||||
time: '0%~10%',
|
||||
children: []
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
level: 0,
|
||||
time: '10%~20%',
|
||||
children: []
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
level: 0,
|
||||
time: '20%~30%',
|
||||
children: []
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
level: 0,
|
||||
time: '30%~40%',
|
||||
children: []
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
level: 0,
|
||||
time: '40%~50%',
|
||||
children: []
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
level: 0,
|
||||
time: '50%~60%',
|
||||
children: []
|
||||
},
|
||||
{
|
||||
id: 7,
|
||||
level: 0,
|
||||
time: '60%~70%',
|
||||
children: []
|
||||
},
|
||||
{
|
||||
id: 8,
|
||||
level: 0,
|
||||
time: '70%~80%',
|
||||
children: []
|
||||
},
|
||||
{
|
||||
id: 9,
|
||||
level: 0,
|
||||
time: '80%~90%',
|
||||
children: []
|
||||
},
|
||||
{
|
||||
id: 10,
|
||||
level: 0,
|
||||
time: '90%~100%',
|
||||
children: []
|
||||
}
|
||||
])
|
||||
// 添加树
|
||||
const addTo = (row: any) => {
|
||||
// console.log("🚀 ~ addTo ~ uniqueObjectsByJSON([...dataSource.value[index.value].children, row]):", uniqueObjectsByJSON([...dataSource.value[index.value].children, row])[0].time)
|
||||
let list = JSON.parse(JSON.stringify(dataSource.value[index.value].children))
|
||||
dataSource.value[index.value].children = uniqueObjectsByJSON([...list, row])
|
||||
}
|
||||
// 树去重
|
||||
const uniqueObjectsByJSON = (arr: any) => {
|
||||
const seen = new Set()
|
||||
return arr.filter((item: any) => {
|
||||
const str = JSON.stringify(item)
|
||||
if (!seen.has(str)) {
|
||||
seen.add(str)
|
||||
return true
|
||||
}
|
||||
return false
|
||||
})
|
||||
}
|
||||
|
||||
// 树删除
|
||||
const remove = (node: any, data: any) => {
|
||||
const parent = node.parent
|
||||
const children = parent.data.children || parent.data
|
||||
const index = children.findIndex(d => d.id === data.id)
|
||||
children.splice(index, 1)
|
||||
dataSource.value = [...dataSource.value]
|
||||
}
|
||||
const options = ref({})
|
||||
const tableStore = new TableStore({
|
||||
url: '/harmonic-boot/powerStatistics/getDataByLineId',
|
||||
method: 'POST',
|
||||
column: [],
|
||||
beforeSearchFun: () => {
|
||||
treeList.value = dotList.value
|
||||
|
||||
tableStore.table.params.lineId = dotList.value.id
|
||||
tableStore.table.params.searchBeginTime = TableHeaderRef.value.datePickerRef.timeValue[0]
|
||||
tableStore.table.params.searchEndTime = TableHeaderRef.value.datePickerRef.timeValue[1]
|
||||
},
|
||||
loadCallback: () => {
|
||||
let res = tableStore.table.data
|
||||
|
||||
powerList1.value = [
|
||||
{
|
||||
label: '0%~10%',
|
||||
quantity: res.minsNum0,
|
||||
percentage: res.proportion0 + '%',
|
||||
crossTheLine: res.isOrNot0,
|
||||
value: '0%~10%'
|
||||
},
|
||||
{
|
||||
label: '10%~20%',
|
||||
quantity: res.minsNum1,
|
||||
percentage: res.proportion1 + '%',
|
||||
crossTheLine: res.isOrNot1,
|
||||
value: '10%~20%'
|
||||
},
|
||||
{
|
||||
label: '20%~30%',
|
||||
quantity: res.minsNum2,
|
||||
percentage: res.proportion2 + '%',
|
||||
crossTheLine: res.isOrNot2,
|
||||
value: '20%~30%'
|
||||
},
|
||||
{
|
||||
label: '30%~40%',
|
||||
quantity: res.minsNum3,
|
||||
percentage: res.proportion3 + '%',
|
||||
crossTheLine: res.isOrNot3,
|
||||
value: '30%~40%'
|
||||
},
|
||||
{
|
||||
label: '40%~50%',
|
||||
quantity: res.minsNum4,
|
||||
percentage: res.proportion4 + '%',
|
||||
crossTheLine: res.isOrNot4,
|
||||
value: '40%~50%'
|
||||
}
|
||||
]
|
||||
powerList2.value = [
|
||||
{
|
||||
label: '50%~60%',
|
||||
quantity: res.minsNum5,
|
||||
percentage: res.proportion5 + '%',
|
||||
crossTheLine: res.isOrNot5,
|
||||
value: '50%~60%'
|
||||
},
|
||||
{
|
||||
label: '60%~70%',
|
||||
quantity: res.minsNum6,
|
||||
percentage: res.proportion6 + '%',
|
||||
crossTheLine: res.isOrNot6,
|
||||
value: '60%~70%'
|
||||
},
|
||||
{
|
||||
label: '70%~80%',
|
||||
quantity: res.minsNum7,
|
||||
percentage: res.proportion7 + '%',
|
||||
crossTheLine: res.isOrNot7,
|
||||
value: '70%~80%'
|
||||
},
|
||||
{
|
||||
label: '80%~90%',
|
||||
quantity: res.minsNum8,
|
||||
percentage: res.proportion8 + '%',
|
||||
crossTheLine: res.isOrNot8,
|
||||
value: '80%~90%'
|
||||
},
|
||||
{
|
||||
label: '90%~100%',
|
||||
quantity: res.minsNum9,
|
||||
percentage: res.proportion9 + '%',
|
||||
crossTheLine: res.isOrNot9,
|
||||
value: '90%~100%'
|
||||
}
|
||||
]
|
||||
options.value = {
|
||||
legend: {
|
||||
show: false
|
||||
},
|
||||
tooltip: {},
|
||||
xAxis: {
|
||||
show: false
|
||||
},
|
||||
yAxis: {
|
||||
show: false
|
||||
},
|
||||
|
||||
dataZoom: { show: false },
|
||||
|
||||
options: {
|
||||
series: [
|
||||
{
|
||||
type: 'pie',
|
||||
center: ['50%', '52%'],
|
||||
selectedOffset: 30,
|
||||
label: {
|
||||
show: true,
|
||||
color: '#96A2B5',
|
||||
lineHeight: 8,
|
||||
minMargin: 10,
|
||||
formatter: function (e) {
|
||||
return '{name|' + e.name + '}{percent|' + e.data.percentage + '}'
|
||||
},
|
||||
rich: {
|
||||
name: {
|
||||
fontSize: 12
|
||||
},
|
||||
|
||||
percent: {
|
||||
fontSize: 14,
|
||||
color: '#000',
|
||||
padding: [0, 0, 0, 5]
|
||||
}
|
||||
}
|
||||
},
|
||||
data: [
|
||||
...powerList1.value.map(item => {
|
||||
return { value: item.quantity, name: item.label, percentage: item.percentage }
|
||||
}),
|
||||
...powerList2.value.map(item => {
|
||||
return { value: item.quantity, name: item.label, percentage: item.percentage }
|
||||
})
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
dataSource.value = [
|
||||
{
|
||||
id: 1,
|
||||
level: 0,
|
||||
time: '0%~10%',
|
||||
children: []
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
level: 0,
|
||||
time: '10%~20%',
|
||||
children: []
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
level: 0,
|
||||
time: '20%~30%',
|
||||
children: []
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
level: 0,
|
||||
time: '30%~40%',
|
||||
children: []
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
level: 0,
|
||||
time: '40%~50%',
|
||||
children: []
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
level: 0,
|
||||
time: '50%~60%',
|
||||
children: []
|
||||
},
|
||||
{
|
||||
id: 7,
|
||||
level: 0,
|
||||
time: '60%~70%',
|
||||
children: []
|
||||
},
|
||||
{
|
||||
id: 8,
|
||||
level: 0,
|
||||
time: '70%~80%',
|
||||
children: []
|
||||
},
|
||||
{
|
||||
id: 9,
|
||||
level: 0,
|
||||
time: '80%~90%',
|
||||
children: []
|
||||
},
|
||||
{
|
||||
id: 10,
|
||||
level: 0,
|
||||
time: '90%~100%',
|
||||
children: []
|
||||
}
|
||||
]
|
||||
|
||||
analyseList(flag.value, index.value)
|
||||
}
|
||||
})
|
||||
// 导出区间数据
|
||||
const exportData = () => {
|
||||
ElMessage('正在下载中,请稍等...')
|
||||
exportExcelRangTemplate({
|
||||
lineId: dotList.value.id,
|
||||
searchValue: treeList.value?.name + ' 0%-100% 区间数据',
|
||||
searchBeginTime: tableStore.table.params.searchBeginTime,
|
||||
searchEndTime: tableStore.table.params.searchEndTime
|
||||
}).then((res: any) => {
|
||||
let blob = new Blob([res], {
|
||||
type: 'application/vnd.ms-excel'
|
||||
})
|
||||
|
||||
const url = window.URL.createObjectURL(blob)
|
||||
const link = document.createElement('a') // 创建a标签
|
||||
link.href = url
|
||||
link.download = treeList.value?.name + ' 0%-100% 区间数据' // 设置下载的文件名
|
||||
document.body.appendChild(link)
|
||||
link.click() //执行下载
|
||||
document.body.removeChild(link)
|
||||
})
|
||||
}
|
||||
// 导出报告参数
|
||||
const generateReports = () => {
|
||||
let data: any = {
|
||||
lineId: dotList.value.id,
|
||||
searchValue: treeList.value?.name + ' 报告',
|
||||
searchBeginTime: tableStore.table.params.searchBeginTime,
|
||||
searchEndTime: tableStore.table.params.searchEndTime
|
||||
}
|
||||
dataSource.value.forEach((item: any, i: number) => {
|
||||
// item.children
|
||||
data[`time${i}`] = item.children.map((it: any) => it.time)
|
||||
}),
|
||||
exportExcelListTemplate(data).then((res: any) => {
|
||||
let blob = new Blob([res], {
|
||||
type: 'application/vnd.ms-excel'
|
||||
})
|
||||
|
||||
const url = window.URL.createObjectURL(blob)
|
||||
const link = document.createElement('a') // 创建a标签
|
||||
link.href = url
|
||||
link.download = treeList.value?.name + ' 报告' // 设置下载的文件名
|
||||
document.body.appendChild(link)
|
||||
link.click() //执行下载
|
||||
document.body.removeChild(link)
|
||||
})
|
||||
}
|
||||
|
||||
// 点击时间
|
||||
const timeClick = (row: any) => {
|
||||
let data = { ...row, field: index.value, lineId: dotList.value.id }
|
||||
timePopUpBox.value = data
|
||||
}
|
||||
// 点击越限
|
||||
const detailClick = (row: any, title: string, key: string) => {
|
||||
console.log('🚀 ~ detailClick ~ row:', row)
|
||||
detailRef.value.open({
|
||||
row: row,
|
||||
title: title,
|
||||
key: key
|
||||
})
|
||||
}
|
||||
// // 获取有功功率趋势分析数据
|
||||
// const analyse = (e: any) => {
|
||||
// getDataByLineId({
|
||||
// lineId: e.id,
|
||||
// searchBeginTime: tableStore.table.params.searchBeginTime,
|
||||
// searchEndTime: tableStore.table.params.searchEndTime
|
||||
// }).then(res => {})
|
||||
// }
|
||||
// 功率列表
|
||||
const analyseList = (e: string, i: number) => {
|
||||
flag.value = e
|
||||
index.value = i
|
||||
loading.value = true
|
||||
getTargetLimitById({
|
||||
lineId: dotList.value.id,
|
||||
searchBeginTime: tableStore.table.params.searchBeginTime,
|
||||
searchEndTime: tableStore.table.params.searchEndTime,
|
||||
field: i
|
||||
})
|
||||
.then(res => {
|
||||
loading.value = false
|
||||
tableData.value = res.data
|
||||
})
|
||||
.catch(() => {
|
||||
loading.value = false
|
||||
})
|
||||
}
|
||||
|
||||
provide('tableStore', tableStore)
|
||||
|
||||
onMounted(() => {
|
||||
const dom = document.getElementById('navigation-splitpanes')
|
||||
if (dom) {
|
||||
size.value = Math.round((180 / dom.offsetHeight) * 100)
|
||||
}
|
||||
})
|
||||
|
||||
const handleNodeClick = (data: any, node: any) => {
|
||||
console.log('🚀 ~ handleNodeClick ~ data:', data)
|
||||
if (data.level == 6) {
|
||||
dotList.value = data
|
||||
// dotList.value.id = '6469e77fda42db12c7ca6620a092f03c1'
|
||||
tableStore.index()
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss">
|
||||
.splitpanes.default-theme .splitpanes__pane {
|
||||
background: #eaeef1;
|
||||
}
|
||||
.cardBox {
|
||||
.el-card__body {
|
||||
padding: 5px 10px 10px;
|
||||
}
|
||||
}
|
||||
.box {
|
||||
.el-card__body {
|
||||
padding: 10px;
|
||||
}
|
||||
}
|
||||
.container {
|
||||
display: grid;
|
||||
grid-template-columns: 5fr 2.5fr;
|
||||
gap: 10px;
|
||||
.card-top {
|
||||
background-color: var(--el-color-primary-light-9);
|
||||
// color: #fff;
|
||||
.el-card__body {
|
||||
display: grid; /* 使用 Grid 布局 */
|
||||
grid-template-columns: repeat(5, 1fr); /* 每行5列，每列占1份空间 */
|
||||
text-align: center;
|
||||
gap: 20px;
|
||||
padding: 10px;
|
||||
.img {
|
||||
vertical-align: middle;
|
||||
height: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.echart {
|
||||
.el-card__body {
|
||||
padding: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.el-card {
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.hoverBox {
|
||||
background-color: var(--el-color-primary-light-5);
|
||||
border-radius: 10px;
|
||||
}
|
||||
.percentage {
|
||||
text-decoration: underline;
|
||||
text-underline-offset: 0.1em;
|
||||
}
|
||||
</style>
|
||||
<style lang="scss" scoped>
|
||||
:deep(.el-card__header) {
|
||||
padding: 10px;
|
||||
}
|
||||
.card-header {
|
||||
span {
|
||||
font-weight: 600;
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user