Web/admin-govern
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
d1eb7f2dad961c2577cf5002d76d7a4e051aa9b5
admin-govern/src/components/cockpit/indicatorDistribution/index.vue

463 lines
15 KiB
Vue
Raw Normal View History

驾驶舱页面绘制 绘制2、稳态电能质量分析、稳态治理效果分析、暂态电能质量分析页面
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>
驾驶舱页面绘制 绘制2、稳态电能质量分析、稳态治理效果分析、暂态电能质量分析页面
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 )`
}"
驾驶舱页面绘制 绘制2、稳态电能质量分析、稳态治理效果分析、暂态电能质量分析页面
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 )`
}"
驾驶舱页面绘制 绘制2、稳态电能质量分析、稳态治理效果分析、暂态电能质量分析页面
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'
驾驶舱页面绘制 绘制2、稳态电能质量分析、稳态治理效果分析、暂态电能质量分析页面
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'
驾驶舱页面绘制 绘制2、稳态电能质量分析、稳态治理效果分析、暂态电能质量分析页面
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 },
驾驶舱页面绘制 绘制2、稳态电能质量分析、稳态治理效果分析、暂态电能质量分析页面
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 = [
{
value: '1',
label: '35V进线',
},
]
稳态电能质量分析页面同步时间组件
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
}
})
驾驶舱页面绘制 绘制2、稳态电能质量分析、稳态治理效果分析、暂态电能质量分析页面
2025-10-20 13:25:30 +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 += '监测点数' + ':' + '&nbsp' + '&nbsp' + 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'
}
}
}
]
}
})
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]
驾驶舱页面绘制 绘制2、稳态电能质量分析、稳态治理效果分析、暂态电能质量分析页面
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'
驾驶舱页面绘制 绘制2、稳态电能质量分析、稳态治理效果分析、暂态电能质量分析页面
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>
Reference in New Issue Copy Permalink