2025-10-20 13:25:30 +08:00
|
|
|
<template>
|
|
|
|
|
<div>
|
|
|
|
|
<!--指标越限概率分布 -->
|
2025-11-06 16:21:39 +08:00
|
|
|
<TableHeader :showReset="false" @selectChange="selectChange" datePicker v-if="fullscreen">
|
|
|
|
|
<template v-slot:select>
|
|
|
|
|
<el-form-item>
|
|
|
|
|
<el-select size="small" v-model="tableStore.table.params.searchValue">
|
|
|
|
|
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
|
|
|
|
|
</el-select>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
</template>
|
|
|
|
|
</TableHeader>
|
2025-10-20 13:25:30 +08:00
|
|
|
<my-echart
|
|
|
|
|
class="tall"
|
|
|
|
|
:options="echartList"
|
2025-11-06 16:21:39 +08:00
|
|
|
:style="{
|
|
|
|
|
width: prop.width,
|
|
|
|
|
height: `calc(${prop.height} / 2 - ${headerHeight / 2}px + ${fullscreen ? 0 : 28}px )`
|
|
|
|
|
}"
|
2025-10-20 13:25:30 +08:00
|
|
|
/>
|
|
|
|
|
<my-echart
|
|
|
|
|
class="mt10"
|
|
|
|
|
:options="echartList1"
|
2025-11-06 16:21:39 +08:00
|
|
|
:style="{
|
|
|
|
|
width: prop.width,
|
|
|
|
|
height: `calc(${prop.height} / 2 - ${headerHeight / 2}px + ${fullscreen ? 0 : 28}px )`
|
|
|
|
|
}"
|
2025-10-20 13:25:30 +08:00
|
|
|
/>
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
<script setup lang="ts">
|
|
|
|
|
import { ref, onMounted, provide, reactive, watch, h } from 'vue'
|
|
|
|
|
import TableStore from '@/utils/tableStore'
|
2025-11-06 16:11:12 +08:00
|
|
|
import TableHeader from '@/components/table/header/index.vue'
|
2025-10-20 13:25:30 +08:00
|
|
|
import MyEchart from '@/components/echarts/MyEchart.vue'
|
|
|
|
|
import { getTimeOfTheMonth } from '@/utils/formatTime'
|
2025-11-06 16:11:12 +08:00
|
|
|
import { useRoute } from 'vue-router'
|
|
|
|
|
import { useTimeCacheStore } from '@/stores/timeCache'
|
|
|
|
|
|
2025-10-20 13:25:30 +08:00
|
|
|
const prop = defineProps({
|
2025-11-06 16:11:12 +08:00
|
|
|
w: { type: String },
|
|
|
|
|
h: { type: String },
|
2025-10-20 13:25:30 +08:00
|
|
|
width: { type: String },
|
|
|
|
|
height: { type: String },
|
|
|
|
|
timeKey: { type: String },
|
|
|
|
|
timeValue: { type: Object }
|
|
|
|
|
})
|
2025-11-06 16:11:12 +08:00
|
|
|
|
2025-11-06 16:21:39 +08:00
|
|
|
const options = [
|
2025-11-10 14:47:18 +08:00
|
|
|
{
|
|
|
|
|
value: '1',
|
|
|
|
|
label: '35V进线'
|
|
|
|
|
}
|
2025-11-06 16:21:39 +08:00
|
|
|
]
|
|
|
|
|
|
2025-11-06 16:11:12 +08:00
|
|
|
const headerHeight = ref(57)
|
|
|
|
|
|
|
|
|
|
const route = useRoute()
|
|
|
|
|
const timeCacheStore = useTimeCacheStore()
|
|
|
|
|
|
|
|
|
|
const selectChange = (showSelect: any, height: any, datePickerValue?: any) => {
|
|
|
|
|
headerHeight.value = height
|
|
|
|
|
|
|
|
|
|
// 如果有传入 datePicker 的值
|
|
|
|
|
if (datePickerValue) {
|
|
|
|
|
// 更新表格参数
|
|
|
|
|
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
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
|
2025-11-10 14:47:18 +08:00
|
|
|
// const echartList = ref({
|
|
|
|
|
// options: {
|
|
|
|
|
// xAxis: null,
|
|
|
|
|
// yAxis: null,
|
|
|
|
|
// dataZoom: null,
|
|
|
|
|
// backgroundColor: '#fff',
|
|
|
|
|
// tooltip: {
|
|
|
|
|
// // trigger: 'axis'
|
|
|
|
|
// textStyle: {
|
|
|
|
|
// color: '#fff',
|
|
|
|
|
// fontStyle: 'normal',
|
|
|
|
|
// opacity: 0.35,
|
|
|
|
|
// fontSize: 14
|
|
|
|
|
// },
|
|
|
|
|
// backgroundColor: 'rgba(0,0,0,0.55)',
|
|
|
|
|
// borderWidth: 0,
|
|
|
|
|
// formatter: function (params: any) {
|
|
|
|
|
// console.log(params)
|
|
|
|
|
// var tips = ''
|
|
|
|
|
// for (var i = 0; i < params.length; i++) {
|
|
|
|
|
// tips += params[i].name + '</br/>'
|
|
|
|
|
// tips += '监测点数' + ':' + ' ' + ' ' + params[i].value + '</br/>'
|
|
|
|
|
// }
|
|
|
|
|
// return tips
|
|
|
|
|
// }
|
|
|
|
|
// },
|
|
|
|
|
// title: {
|
|
|
|
|
// text: '指标越限概率分布',
|
|
|
|
|
// x: 'center'
|
|
|
|
|
// },
|
|
|
|
|
|
|
|
|
|
// visualMap: {
|
|
|
|
|
// max: 20,
|
|
|
|
|
// show: false,
|
|
|
|
|
// inRange: {
|
|
|
|
|
// color: ['#313695', '#00BB00', '#ff8000', '#a50026']
|
|
|
|
|
// }
|
|
|
|
|
// },
|
|
|
|
|
// xAxis3D: {
|
|
|
|
|
// type: 'category',
|
|
|
|
|
// name: '指标越限',
|
|
|
|
|
// data: ['0-10', '10-20', '20-30', '30-40', '40-50'],
|
|
|
|
|
// axisLine: {
|
|
|
|
|
// lineStyle: {
|
|
|
|
|
// color: '#111'
|
|
|
|
|
// }
|
|
|
|
|
// },
|
|
|
|
|
// axisLabel: {
|
|
|
|
|
// color: '#111'
|
|
|
|
|
// }
|
|
|
|
|
// },
|
|
|
|
|
// yAxis3D: {
|
|
|
|
|
// type: 'category',
|
|
|
|
|
// name: '指标类型',
|
|
|
|
|
// data: ['闪变', '谐波电压', '谐波电流', '电压偏差', '三相不平衡'],
|
|
|
|
|
// nameTextStyle: {
|
|
|
|
|
// color: '#111'
|
|
|
|
|
// },
|
|
|
|
|
// axisLine: {
|
|
|
|
|
// show: true,
|
|
|
|
|
// lineStyle: {
|
|
|
|
|
// color: '#111'
|
|
|
|
|
// }
|
|
|
|
|
// },
|
|
|
|
|
// axisLabel: {
|
|
|
|
|
// color: '#111'
|
|
|
|
|
// },
|
|
|
|
|
// splitLine: {
|
|
|
|
|
// lineStyle: {
|
|
|
|
|
// // 使用深浅的间隔色
|
|
|
|
|
// color: ['#111'],
|
|
|
|
|
// type: 'dashed',
|
|
|
|
|
// opacity: 0.5
|
|
|
|
|
// }
|
|
|
|
|
// }
|
|
|
|
|
// },
|
|
|
|
|
// zAxis3D: {
|
|
|
|
|
// type: 'value',
|
|
|
|
|
// splitNumber: 10,
|
|
|
|
|
// minInterval: 10,
|
|
|
|
|
// name: '越限占比'
|
|
|
|
|
// },
|
|
|
|
|
// grid3D: {
|
|
|
|
|
// viewControl: {
|
|
|
|
|
// projection: 'perspective',
|
|
|
|
|
// distance: 250
|
|
|
|
|
// },
|
|
|
|
|
// boxWidth: 200,
|
|
|
|
|
// boxDepth: 80,
|
|
|
|
|
// light: {
|
|
|
|
|
// main: {
|
|
|
|
|
// intensity: 1.2
|
|
|
|
|
// },
|
|
|
|
|
// ambient: {
|
|
|
|
|
// intensity: 0.3
|
|
|
|
|
// }
|
|
|
|
|
// }
|
|
|
|
|
// },
|
|
|
|
|
// series: [
|
|
|
|
|
// {
|
|
|
|
|
// type: 'bar3D',
|
|
|
|
|
// data: [
|
|
|
|
|
// [0, 0, 1],
|
|
|
|
|
// [0, 1, 1],
|
|
|
|
|
// [0.2, 1]
|
|
|
|
|
// ],
|
|
|
|
|
// shading: 'realistic',
|
|
|
|
|
// label: {
|
|
|
|
|
// show: false,
|
|
|
|
|
// textStyle: {
|
|
|
|
|
// fontSize: 16,
|
|
|
|
|
// borderWidth: 1
|
|
|
|
|
// }
|
|
|
|
|
// },
|
|
|
|
|
|
|
|
|
|
// itemStyle: {
|
|
|
|
|
// opacity: 1
|
|
|
|
|
// },
|
|
|
|
|
// emphasis: {
|
|
|
|
|
// label: {
|
|
|
|
|
// textStyle: {
|
|
|
|
|
// fontSize: 20,
|
|
|
|
|
// color: '#900'
|
|
|
|
|
// }
|
|
|
|
|
// },
|
|
|
|
|
// itemStyle: {
|
|
|
|
|
// color: '#900'
|
|
|
|
|
// }
|
|
|
|
|
// }
|
|
|
|
|
// }
|
|
|
|
|
// ]
|
|
|
|
|
// }
|
|
|
|
|
// })
|
|
|
|
|
|
|
|
|
|
var yAxisData=['闪变', '谐波电压', '谐波电流', '电压偏差', '三相不平衡']
|
|
|
|
|
|
2025-10-20 13:25:30 +08:00
|
|
|
const echartList = ref({
|
|
|
|
|
options: {
|
|
|
|
|
backgroundColor: '#fff',
|
|
|
|
|
tooltip: {
|
|
|
|
|
textStyle: {
|
|
|
|
|
color: '#fff',
|
|
|
|
|
fontStyle: 'normal',
|
|
|
|
|
opacity: 0.35,
|
|
|
|
|
fontSize: 14
|
|
|
|
|
},
|
|
|
|
|
backgroundColor: 'rgba(0,0,0,0.55)',
|
|
|
|
|
borderWidth: 0,
|
|
|
|
|
formatter: function (params: any) {
|
2025-11-10 14:47:18 +08:00
|
|
|
console.log(params, '33344')
|
|
|
|
|
var yIndex = params.value[1]; //获取y轴索引
|
2025-10-20 13:25:30 +08:00
|
|
|
var tips = ''
|
2025-11-10 14:47:18 +08:00
|
|
|
// tips += '指标类型: ' + params.name + '</br>'
|
|
|
|
|
tips += '指标类型: ' + yAxisData[yIndex] + '</br>'
|
|
|
|
|
tips += '越限程度: ' + params.seriesName + '</br>'
|
|
|
|
|
// tips += '越限占比: ' + params.value + '%</br>'
|
|
|
|
|
tips += '越限占比: ' + params.value[2] + '%</br>'
|
2025-10-20 13:25:30 +08:00
|
|
|
return tips
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
title: {
|
|
|
|
|
text: '指标越限概率分布',
|
2025-11-10 14:47:18 +08:00
|
|
|
x: 'center',
|
|
|
|
|
textStyle: {
|
|
|
|
|
fontSize: 16,
|
|
|
|
|
fontWeight: 'normal'
|
|
|
|
|
}
|
2025-10-20 13:25:30 +08:00
|
|
|
},
|
|
|
|
|
visualMap: {
|
2025-11-10 14:47:18 +08:00
|
|
|
max: 100,
|
|
|
|
|
show: true,
|
2025-10-20 13:25:30 +08:00
|
|
|
inRange: {
|
2025-11-10 14:47:18 +08:00
|
|
|
color: [
|
|
|
|
|
'#313695',
|
|
|
|
|
'#4575b4',
|
|
|
|
|
'#74add1',
|
|
|
|
|
'#abd9e9',
|
|
|
|
|
'#e0f3f8',
|
|
|
|
|
'#ffffbf',
|
|
|
|
|
'#fee090',
|
|
|
|
|
'#fdae61',
|
|
|
|
|
'#f46d43',
|
|
|
|
|
'#d73027',
|
|
|
|
|
'#a50026'
|
|
|
|
|
]
|
2025-10-20 13:25:30 +08:00
|
|
|
}
|
2025-11-10 14:47:18 +08:00
|
|
|
// calculable: true,
|
|
|
|
|
// orient: 'horizontal',
|
|
|
|
|
// left: 'center',
|
|
|
|
|
// bottom: '5%'
|
2025-10-20 13:25:30 +08:00
|
|
|
},
|
|
|
|
|
xAxis3D: {
|
|
|
|
|
type: 'category',
|
2025-11-10 14:47:18 +08:00
|
|
|
name: '越限程度',
|
|
|
|
|
nameLocation: 'middle',
|
|
|
|
|
nameGap: 30,
|
|
|
|
|
data: ['0-20%', '20-40%', '40-60%', '60-80%', '80-100%'],
|
2025-10-20 13:25:30 +08:00
|
|
|
axisLine: {
|
|
|
|
|
lineStyle: {
|
|
|
|
|
color: '#111'
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
axisLabel: {
|
2025-11-10 14:47:18 +08:00
|
|
|
color: '#111',
|
|
|
|
|
margin: 15
|
|
|
|
|
},
|
|
|
|
|
nameTextStyle: {
|
2025-10-20 13:25:30 +08:00
|
|
|
color: '#111'
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
yAxis3D: {
|
|
|
|
|
type: 'category',
|
|
|
|
|
name: '指标类型',
|
2025-11-10 14:47:18 +08:00
|
|
|
nameLocation: 'middle',
|
|
|
|
|
nameGap: 30,
|
|
|
|
|
// data: ['闪变', '谐波电压', '谐波电流', '电压偏差', '三相不平衡'],
|
|
|
|
|
data:yAxisData,
|
2025-10-20 13:25:30 +08:00
|
|
|
nameTextStyle: {
|
|
|
|
|
color: '#111'
|
|
|
|
|
},
|
|
|
|
|
axisLine: {
|
|
|
|
|
show: true,
|
|
|
|
|
lineStyle: {
|
|
|
|
|
color: '#111'
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
axisLabel: {
|
2025-11-10 14:47:18 +08:00
|
|
|
color: '#111',
|
|
|
|
|
margin: 15
|
2025-10-20 13:25:30 +08:00
|
|
|
},
|
|
|
|
|
splitLine: {
|
|
|
|
|
lineStyle: {
|
|
|
|
|
color: ['#111'],
|
|
|
|
|
type: 'dashed',
|
|
|
|
|
opacity: 0.5
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
zAxis3D: {
|
|
|
|
|
type: 'value',
|
2025-11-10 14:47:18 +08:00
|
|
|
name: '越限占比(%)',
|
|
|
|
|
nameLocation: 'middle',
|
|
|
|
|
nameGap: 30,
|
|
|
|
|
nameTextStyle: {
|
|
|
|
|
color: '#111'
|
|
|
|
|
},
|
|
|
|
|
axisLine: {
|
|
|
|
|
lineStyle: {
|
|
|
|
|
color: '#111'
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
axisLabel: {
|
|
|
|
|
color: '#111'
|
|
|
|
|
},
|
|
|
|
|
min: 0,
|
|
|
|
|
max: 100
|
2025-10-20 13:25:30 +08:00
|
|
|
},
|
|
|
|
|
grid3D: {
|
|
|
|
|
viewControl: {
|
|
|
|
|
projection: 'perspective',
|
2025-11-10 14:47:18 +08:00
|
|
|
distance: 250,
|
|
|
|
|
rotateSensitivity: 10,
|
|
|
|
|
zoomSensitivity: 2
|
2025-10-20 13:25:30 +08:00
|
|
|
},
|
2025-11-10 14:47:18 +08:00
|
|
|
boxWidth: 150,
|
|
|
|
|
boxDepth: 100,
|
|
|
|
|
boxHeight: 100,
|
2025-10-20 13:25:30 +08:00
|
|
|
light: {
|
|
|
|
|
main: {
|
|
|
|
|
intensity: 1.2
|
|
|
|
|
},
|
|
|
|
|
ambient: {
|
2025-11-10 14:47:18 +08:00
|
|
|
intensity: 0.4
|
2025-10-20 13:25:30 +08:00
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
series: [
|
|
|
|
|
{
|
|
|
|
|
type: 'bar3D',
|
2025-11-10 14:47:18 +08:00
|
|
|
name: '0-20%',
|
2025-10-20 13:25:30 +08:00
|
|
|
data: [
|
2025-11-10 14:47:18 +08:00
|
|
|
// [xIndex, yIndex, value]
|
|
|
|
|
[0, 0, 5], // 闪变 - 0-20%
|
|
|
|
|
[0, 1, 10], // 谐波电压 - 0-20%
|
|
|
|
|
[0, 2, 8], // 谐波电流 - 0-20%
|
|
|
|
|
[0, 3, 15], // 电压偏差 - 0-20%
|
|
|
|
|
[0, 4, 12] // 三相不平衡 - 0-20%
|
2025-10-20 13:25:30 +08:00
|
|
|
],
|
|
|
|
|
shading: 'realistic',
|
|
|
|
|
label: {
|
2025-11-10 14:47:18 +08:00
|
|
|
show: false
|
|
|
|
|
},
|
|
|
|
|
itemStyle: {
|
|
|
|
|
opacity: 0.9
|
|
|
|
|
},
|
|
|
|
|
emphasis: {
|
|
|
|
|
label: {
|
|
|
|
|
show: true,
|
|
|
|
|
textStyle: {
|
|
|
|
|
fontSize: 14,
|
|
|
|
|
color: '#000'
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
itemStyle: {
|
|
|
|
|
color: '#ff8000'
|
2025-10-20 13:25:30 +08:00
|
|
|
}
|
2025-11-10 14:47:18 +08:00
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
type: 'bar3D',
|
|
|
|
|
name: '20-40%',
|
|
|
|
|
// data: chartData.map(function (item) {
|
|
|
|
|
// return {
|
|
|
|
|
// value: [item[1], item[0], item[2]]
|
|
|
|
|
// };
|
|
|
|
|
// }),
|
|
|
|
|
data: [
|
|
|
|
|
[1, 0, 10], // 闪变 - 20-40%
|
|
|
|
|
[1, 1, 20], // 谐波电压 - 20-40%
|
|
|
|
|
[1, 2, 15], // 谐波电流 - 20-40%
|
|
|
|
|
[1, 3, 25], // 电压偏差 - 20-40%
|
|
|
|
|
[1, 4, 18] // 三相不平衡 - 20-40%
|
|
|
|
|
],
|
|
|
|
|
shading: 'realistic',
|
|
|
|
|
label: {
|
|
|
|
|
show: false
|
|
|
|
|
},
|
|
|
|
|
itemStyle: {
|
|
|
|
|
opacity: 0.9
|
|
|
|
|
},
|
|
|
|
|
emphasis: {
|
|
|
|
|
label: {
|
|
|
|
|
show: true,
|
|
|
|
|
textStyle: {
|
|
|
|
|
fontSize: 14,
|
|
|
|
|
color: '#000'
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
itemStyle: {
|
|
|
|
|
color: '#ff8000'
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
type: 'bar3D',
|
|
|
|
|
name: '40-60%',
|
|
|
|
|
data: [
|
|
|
|
|
[2, 0, 15], // 闪变 - 40-60%
|
|
|
|
|
[2, 1, 25], // 谐波电压 - 40-60%
|
|
|
|
|
[2, 2, 30], // 谐波电流 - 40-60%
|
|
|
|
|
[2, 3, 35], // 电压偏差 - 40-60%
|
|
|
|
|
[2, 4, 28] // 三相不平衡 - 40-60%
|
|
|
|
|
],
|
|
|
|
|
shading: 'realistic',
|
|
|
|
|
label: {
|
|
|
|
|
show: false
|
|
|
|
|
},
|
|
|
|
|
itemStyle: {
|
|
|
|
|
opacity: 0.9
|
|
|
|
|
},
|
|
|
|
|
emphasis: {
|
|
|
|
|
label: {
|
|
|
|
|
show: true,
|
|
|
|
|
textStyle: {
|
|
|
|
|
fontSize: 14,
|
|
|
|
|
color: '#000'
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
itemStyle: {
|
|
|
|
|
color: '#ff8000'
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
type: 'bar3D',
|
|
|
|
|
name: '60-80%',
|
|
|
|
|
data: [
|
|
|
|
|
[3, 0, 20], // 闪变 - 60-80%
|
|
|
|
|
[3, 1, 30], // 谐波电压 - 60-80%
|
|
|
|
|
[3, 2, 35], // 谐波电流 - 60-80%
|
|
|
|
|
[3, 3, 40], // 电压偏差 - 60-80%
|
|
|
|
|
[3, 4, 35] // 三相不平衡 - 60-80%
|
|
|
|
|
],
|
|
|
|
|
shading: 'realistic',
|
|
|
|
|
label: {
|
|
|
|
|
show: false
|
|
|
|
|
},
|
|
|
|
|
itemStyle: {
|
|
|
|
|
opacity: 0.9
|
|
|
|
|
},
|
|
|
|
|
emphasis: {
|
|
|
|
|
label: {
|
|
|
|
|
show: true,
|
|
|
|
|
textStyle: {
|
|
|
|
|
fontSize: 14,
|
|
|
|
|
color: '#000'
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
itemStyle: {
|
|
|
|
|
color: '#ff8000'
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
type: 'bar3D',
|
|
|
|
|
name: '80-100%',
|
|
|
|
|
data: [
|
|
|
|
|
[4, 0, 25], // 闪变 - 80-100%
|
|
|
|
|
[4, 1, 35], // 谐波电压 - 80-100%
|
|
|
|
|
[4, 2, 40], // 谐波电流 - 80-100%
|
|
|
|
|
[4, 3, 45], // 电压偏差 - 80-100%
|
|
|
|
|
[4, 4, 42] // 三相不平衡 - 80-100%
|
|
|
|
|
],
|
|
|
|
|
shading: 'realistic',
|
|
|
|
|
label: {
|
|
|
|
|
show: false
|
2025-10-20 13:25:30 +08:00
|
|
|
},
|
|
|
|
|
itemStyle: {
|
2025-11-10 14:47:18 +08:00
|
|
|
opacity: 0.9
|
2025-10-20 13:25:30 +08:00
|
|
|
},
|
|
|
|
|
emphasis: {
|
|
|
|
|
label: {
|
2025-11-10 14:47:18 +08:00
|
|
|
show: true,
|
2025-10-20 13:25:30 +08:00
|
|
|
textStyle: {
|
2025-11-10 14:47:18 +08:00
|
|
|
fontSize: 14,
|
|
|
|
|
color: '#000'
|
2025-10-20 13:25:30 +08:00
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
itemStyle: {
|
2025-11-10 14:47:18 +08:00
|
|
|
color: '#ff8000'
|
2025-10-20 13:25:30 +08:00
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
}
|
|
|
|
|
})
|
2025-11-10 14:47:18 +08:00
|
|
|
|
2025-10-20 13:25:30 +08:00
|
|
|
const echartList1 = ref({
|
|
|
|
|
title: {
|
|
|
|
|
text: '越限时间概率分布'
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
xAxis: {
|
|
|
|
|
// name: '时间',
|
|
|
|
|
// data: ['闪变', '谐波电压', '谐波电流', '电压偏差', '三相不平衡']
|
|
|
|
|
type: 'time',
|
|
|
|
|
axisLabel: {
|
|
|
|
|
formatter: {
|
|
|
|
|
day: '{MM}-{dd}',
|
|
|
|
|
month: '{MM}',
|
|
|
|
|
year: '{yyyy}'
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
yAxis: {
|
|
|
|
|
name: '次' // 给X轴加单位
|
|
|
|
|
},
|
|
|
|
|
grid: {
|
|
|
|
|
left: '10px',
|
|
|
|
|
right: '20px'
|
|
|
|
|
},
|
|
|
|
|
options: {
|
|
|
|
|
series: [
|
|
|
|
|
{
|
|
|
|
|
type: 'line',
|
|
|
|
|
showSymbol: false,
|
|
|
|
|
// smooth: true,
|
|
|
|
|
name: '闪变',
|
|
|
|
|
data: [
|
|
|
|
|
['2025-10-16 07:00:00', 10],
|
|
|
|
|
['2025-10-16 07:15:00', 10],
|
|
|
|
|
['2025-10-16 07:30:00', 10],
|
|
|
|
|
['2025-10-16 07:45:00', 10],
|
|
|
|
|
['2025-10-16 08:00:00', 30],
|
|
|
|
|
['2025-10-16 08:15:00', 50],
|
|
|
|
|
['2025-10-16 08:30:00', 60],
|
|
|
|
|
['2025-10-16 08:45:00', 70],
|
|
|
|
|
['2025-10-16 09:00:00', 100],
|
|
|
|
|
['2025-10-16 09:15:00', 120],
|
|
|
|
|
['2025-10-16 09:30:00', 130],
|
|
|
|
|
['2025-10-16 09:45:00', 140],
|
|
|
|
|
['2025-10-16 10:00:00', 160],
|
|
|
|
|
['2025-10-16 10:15:00', 160],
|
|
|
|
|
['2025-10-16 10:30:00', 130],
|
|
|
|
|
['2025-10-16 10:45:00', 120],
|
|
|
|
|
['2025-10-16 11:00:00', 140],
|
|
|
|
|
['2025-10-16 11:15:00', 80],
|
|
|
|
|
['2025-10-16 11:30:00', 70],
|
|
|
|
|
['2025-10-16 11:45:00', 90],
|
|
|
|
|
['2025-10-16 12:00:00', 60],
|
|
|
|
|
['2025-10-16 12:15:00', 60],
|
|
|
|
|
['2025-10-16 12:30:00', 60],
|
|
|
|
|
['2025-10-16 12:45:00', 60]
|
|
|
|
|
]
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
type: 'line',
|
|
|
|
|
showSymbol: false,
|
|
|
|
|
// smooth: true,
|
|
|
|
|
name: '谐波电压',
|
|
|
|
|
data: [
|
|
|
|
|
['2025-10-16 07:00:00', 1],
|
|
|
|
|
['2025-10-16 07:15:00', 1],
|
|
|
|
|
['2025-10-16 07:30:00', 1],
|
|
|
|
|
['2025-10-16 07:45:00', 1],
|
|
|
|
|
['2025-10-16 08:00:00', 3],
|
|
|
|
|
['2025-10-16 08:15:00', 5],
|
|
|
|
|
['2025-10-16 08:30:00', 6],
|
|
|
|
|
['2025-10-16 08:45:00', 7],
|
|
|
|
|
['2025-10-16 09:00:00', 10],
|
|
|
|
|
['2025-10-16 09:15:00', 12],
|
|
|
|
|
['2025-10-16 09:30:00', 13],
|
|
|
|
|
['2025-10-16 09:45:00', 14],
|
|
|
|
|
['2025-10-16 10:00:00', 16],
|
|
|
|
|
['2025-10-16 10:15:00', 16],
|
|
|
|
|
['2025-10-16 10:30:00', 13],
|
|
|
|
|
['2025-10-16 10:45:00', 12],
|
|
|
|
|
['2025-10-16 11:00:00', 14],
|
|
|
|
|
['2025-10-16 11:15:00', 8],
|
|
|
|
|
['2025-10-16 11:30:00', 7],
|
|
|
|
|
['2025-10-16 11:45:00', 9],
|
|
|
|
|
['2025-10-16 12:00:00', 6],
|
|
|
|
|
['2025-10-16 12:15:00', 6],
|
|
|
|
|
['2025-10-16 12:30:00', 6],
|
|
|
|
|
['2025-10-16 12:45:00', 6]
|
|
|
|
|
]
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
type: 'line',
|
|
|
|
|
showSymbol: false,
|
|
|
|
|
// smooth: true,
|
|
|
|
|
name: '谐波电流',
|
|
|
|
|
data: [
|
|
|
|
|
['2025-10-16 07:00:00', 19],
|
|
|
|
|
['2025-10-16 07:15:00', 19],
|
|
|
|
|
['2025-10-16 07:30:00', 19],
|
|
|
|
|
['2025-10-16 07:45:00', 19],
|
|
|
|
|
['2025-10-16 08:00:00', 39],
|
|
|
|
|
['2025-10-16 08:15:00', 59],
|
|
|
|
|
['2025-10-16 08:30:00', 69],
|
|
|
|
|
['2025-10-16 08:45:00', 79],
|
|
|
|
|
['2025-10-16 09:00:00', 109],
|
|
|
|
|
['2025-10-16 09:15:00', 129],
|
|
|
|
|
['2025-10-16 09:30:00', 139],
|
|
|
|
|
['2025-10-16 09:45:00', 149],
|
|
|
|
|
['2025-10-16 10:00:00', 169],
|
|
|
|
|
['2025-10-16 10:15:00', 169],
|
|
|
|
|
['2025-10-16 10:30:00', 139],
|
|
|
|
|
['2025-10-16 10:45:00', 129],
|
|
|
|
|
['2025-10-16 11:00:00', 149],
|
|
|
|
|
['2025-10-16 11:15:00', 89],
|
|
|
|
|
['2025-10-16 11:30:00', 79],
|
|
|
|
|
['2025-10-16 11:45:00', 99],
|
|
|
|
|
['2025-10-16 12:00:00', 69],
|
|
|
|
|
['2025-10-16 12:15:00', 69],
|
|
|
|
|
['2025-10-16 12:30:00', 69],
|
|
|
|
|
['2025-10-16 12:45:00', 69]
|
|
|
|
|
]
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
type: 'line',
|
|
|
|
|
showSymbol: false,
|
|
|
|
|
// smooth: true,
|
|
|
|
|
name: '电压偏差',
|
|
|
|
|
data: [
|
|
|
|
|
['2025-10-16 07:00:00', 12],
|
|
|
|
|
['2025-10-16 07:15:00', 12],
|
|
|
|
|
['2025-10-16 07:30:00', 12],
|
|
|
|
|
['2025-10-16 07:45:00', 12],
|
|
|
|
|
['2025-10-16 08:00:00', 32],
|
|
|
|
|
['2025-10-16 08:15:00', 52],
|
|
|
|
|
['2025-10-16 08:30:00', 62],
|
|
|
|
|
['2025-10-16 08:45:00', 72],
|
|
|
|
|
['2025-10-16 09:00:00', 112],
|
|
|
|
|
['2025-10-16 09:15:00', 122],
|
|
|
|
|
['2025-10-16 09:30:00', 122],
|
|
|
|
|
['2025-10-16 09:45:00', 152],
|
|
|
|
|
['2025-10-16 10:00:00', 122],
|
|
|
|
|
['2025-10-16 10:15:00', 112],
|
|
|
|
|
['2025-10-16 10:30:00', 132],
|
|
|
|
|
['2025-10-16 10:45:00', 122],
|
|
|
|
|
['2025-10-16 11:00:00', 142],
|
|
|
|
|
['2025-10-16 11:15:00', 82],
|
|
|
|
|
['2025-10-16 11:30:00', 72],
|
|
|
|
|
['2025-10-16 11:45:00', 92],
|
|
|
|
|
['2025-10-16 12:00:00', 62],
|
|
|
|
|
['2025-10-16 12:15:00', 62],
|
|
|
|
|
['2025-10-16 12:30:00', 62],
|
|
|
|
|
['2025-10-16 12:45:00', 62]
|
|
|
|
|
]
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
type: 'line',
|
|
|
|
|
showSymbol: false,
|
|
|
|
|
// smooth: true,
|
|
|
|
|
name: '三相不平衡',
|
|
|
|
|
data: [
|
|
|
|
|
['2025-10-16 07:00:00', 10],
|
|
|
|
|
['2025-10-16 07:15:00', 10],
|
|
|
|
|
['2025-10-16 07:30:00', 10],
|
|
|
|
|
['2025-10-16 07:45:00', 10],
|
|
|
|
|
['2025-10-16 08:00:00', 30],
|
|
|
|
|
['2025-10-16 08:15:00', 50],
|
|
|
|
|
['2025-10-16 08:30:00', 60],
|
|
|
|
|
['2025-10-16 08:45:00', 70],
|
|
|
|
|
['2025-10-16 09:00:00', 100],
|
|
|
|
|
['2025-10-16 09:15:00', 120],
|
|
|
|
|
['2025-10-16 09:30:00', 130],
|
|
|
|
|
['2025-10-16 09:45:00', 140],
|
|
|
|
|
['2025-10-16 10:00:00', 160],
|
|
|
|
|
['2025-10-16 10:15:00', 160],
|
|
|
|
|
['2025-10-16 10:30:00', 130],
|
|
|
|
|
['2025-10-16 10:45:00', 120],
|
|
|
|
|
['2025-10-16 11:00:00', 140],
|
|
|
|
|
['2025-10-16 11:15:00', 80],
|
|
|
|
|
['2025-10-16 11:30:00', 70],
|
|
|
|
|
['2025-10-16 11:45:00', 90],
|
|
|
|
|
['2025-10-16 12:00:00', 60],
|
|
|
|
|
['2025-10-16 12:15:00', 60],
|
|
|
|
|
['2025-10-16 12:30:00', 60],
|
|
|
|
|
['2025-10-16 12:45:00', 60]
|
|
|
|
|
]
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
const tableStore: any = new TableStore({
|
|
|
|
|
url: '/user-boot/dept/deptTree',
|
|
|
|
|
method: 'POST',
|
|
|
|
|
showPage: false,
|
|
|
|
|
column: [],
|
|
|
|
|
beforeSearchFun: () => {
|
2025-11-06 16:11:12 +08:00
|
|
|
// 尝试从缓存获取时间值
|
|
|
|
|
let beginTime, endTime
|
|
|
|
|
|
|
|
|
|
if (fullscreen.value) {
|
|
|
|
|
const cached = timeCacheStore.getCache(route.path)
|
|
|
|
|
if (cached && cached.timeValue) {
|
|
|
|
|
beginTime = cached.timeValue[0]
|
|
|
|
|
endTime = cached.timeValue[1]
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// 如果缓存中没有则使用默认值
|
|
|
|
|
tableStore.table.params.searchBeginTime = beginTime || prop.timeValue?.[0] || getTimeOfTheMonth(prop.timeKey)[0]
|
|
|
|
|
|
|
|
|
|
tableStore.table.params.searchEndTime = endTime || prop.timeValue?.[1] || getTimeOfTheMonth(prop.timeKey)[1]
|
2025-10-20 13:25:30 +08:00
|
|
|
},
|
|
|
|
|
loadCallback: () => {
|
|
|
|
|
tableStore.table.data = []
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
const tableRef = ref()
|
2025-11-06 16:21:39 +08:00
|
|
|
tableStore.table.params.searchValue = '1'
|
2025-10-20 13:25:30 +08:00
|
|
|
provide('tableRef', tableRef)
|
|
|
|
|
|
|
|
|
|
provide('tableStore', tableStore)
|
|
|
|
|
|
|
|
|
|
onMounted(() => {
|
|
|
|
|
tableStore.index()
|
|
|
|
|
})
|
|
|
|
|
watch(
|
|
|
|
|
() => prop.timeKey,
|
|
|
|
|
val => {
|
|
|
|
|
tableStore.index()
|
|
|
|
|
}
|
|
|
|
|
)
|
|
|
|
|
watch(
|
|
|
|
|
() => prop.timeValue, // 监听的目标（函数形式避免直接传递 props 导致的警告）
|
|
|
|
|
(newVal, oldVal) => {
|
|
|
|
|
tableStore.index()
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
deep: true // 若 timeValue 是对象/数组，需开启深度监听
|
|
|
|
|
}
|
|
|
|
|
)
|
|
|
|
|
|
|
|
|
|
const addMenu = () => {}
|
|
|
|
|
</script>
|
|
|
|
|
<style lang="scss" scoped></style>
|
