驾驶舱页面绘制
绘制2、稳态电能质量分析、稳态治理效果分析、暂态电能质量分析页面
This commit is contained in:
guanj
344
src/components/cockpit/F47Curve/index.vue
Normal file
344
src/components/cockpit/F47Curve/index.vue
Normal file
@@ -0,0 +1,344 @@
|
||||
<template>
|
||||
<div>
|
||||
<!--F47曲线 -->
|
||||
<el-descriptions class="mt2" direction="vertical" :column="4" border>
|
||||
<el-descriptions-item align="center" label="名称">{{ data.name }}</el-descriptions-item>
|
||||
<el-descriptions-item align="center" label="事件总数">{{ data.gs }}</el-descriptions-item>
|
||||
<el-descriptions-item align="center" label="可容忍">{{ data.krr }}</el-descriptions-item>
|
||||
<el-descriptions-item align="center" label="不可容忍">{{ data.bkrr }}</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
<my-echart
|
||||
class="tall"
|
||||
:options="echartList"
|
||||
:style="{ width: prop.width, height: `calc(${prop.height} - 80px)` }"
|
||||
/>
|
||||
</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 MyEchart from '@/components/echarts/MyEchart.vue'
|
||||
import { useDictData } from '@/stores/dictData'
|
||||
import { ElMessage, ElMessageBox } from 'element-plus'
|
||||
import { getTimeOfTheMonth } from '@/utils/formatTime'
|
||||
const prop = defineProps({
|
||||
width: { type: String },
|
||||
height: { type: String },
|
||||
timeKey: { type: String },
|
||||
timeValue: { type: Object }
|
||||
})
|
||||
|
||||
const echartList = ref({})
|
||||
const OverLimitDetailsRef = ref()
|
||||
const data = reactive({
|
||||
name: '事件个数',
|
||||
gs: 0,
|
||||
krr: 0,
|
||||
bkrr: 0
|
||||
})
|
||||
const tableStore: any = new TableStore({
|
||||
url: '/user-boot/dept/deptTree',
|
||||
method: 'POST',
|
||||
|
||||
showPage: false,
|
||||
|
||||
column: [],
|
||||
beforeSearchFun: () => {
|
||||
tableStore.table.params.searchBeginTime = prop.timeValue?.[0] || getTimeOfTheMonth(prop.timeKey)[0]
|
||||
tableStore.table.params.searchEndTime = prop.timeValue?.[1] || getTimeOfTheMonth(prop.timeKey)[1]
|
||||
},
|
||||
loadCallback: () => {
|
||||
let res = {
|
||||
data: { totalNumberOfEvents: 0, voltageToleranceCurveDataList: [] }
|
||||
}
|
||||
|
||||
const gongData = gongfunction(res.data.voltageToleranceCurveDataList)
|
||||
data.gs = res.data.voltageToleranceCurveDataList.length
|
||||
data.krr = gongData.pointI.length
|
||||
data.bkrr = gongData.pointIun.length
|
||||
console.log(gongData)
|
||||
echartList.value = {
|
||||
// backgroundColor: "#f9f9f9", //地图背景色深蓝
|
||||
title: {
|
||||
text: `F47曲线`
|
||||
},
|
||||
legend: {
|
||||
data: ['上限', '下限', '可容忍事件', '不可容忍事件']
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
show: true,
|
||||
axisPointer: {
|
||||
type: 'shadow',
|
||||
label: {
|
||||
color: '#fff',
|
||||
fontSize: 16
|
||||
}
|
||||
},
|
||||
textStyle: {
|
||||
color: '#fff',
|
||||
fontStyle: 'normal',
|
||||
opacity: 0.35,
|
||||
fontSize: 14
|
||||
},
|
||||
backgroundColor: 'rgba(0,0,0,0.55)',
|
||||
borderWidth: 0,
|
||||
formatter: function (a: any) {
|
||||
var relVal = ''
|
||||
relVal = "<font style='color:" + "'>发生时间:" + a.value[2] + '</font><br/>'
|
||||
relVal += "<font style='color:" + "'>持续时间:" + a.value[0] + 's</font><br/>'
|
||||
relVal += "<font style='color:" + "'>特征幅值:" + a.value[1].toFixed(2) + '%</font>'
|
||||
return relVal
|
||||
}
|
||||
},
|
||||
|
||||
xAxis: [
|
||||
{
|
||||
type: 'log',
|
||||
min: 0.001,
|
||||
max: 1000,
|
||||
splitLine: {
|
||||
show: false
|
||||
},
|
||||
name: 's'
|
||||
}
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
type: 'value',
|
||||
max: function (value: any) {
|
||||
return value.max + 20
|
||||
},
|
||||
splitNumber: 10,
|
||||
minInterval: 0.1,
|
||||
name: '%'
|
||||
}
|
||||
],
|
||||
color: ['#DAA520', 'green', 'red'],
|
||||
options: {
|
||||
dataZoom: null,
|
||||
series: [
|
||||
{
|
||||
name: '边界线',
|
||||
type: 'line',
|
||||
data: [
|
||||
[0.05, 0],
|
||||
[0.05, 50],
|
||||
[0.2, 50],
|
||||
[0.2, 70],
|
||||
[0.5, 70],
|
||||
[0.5, 80],
|
||||
[10, 80],
|
||||
[1000, 80]
|
||||
],
|
||||
showSymbol: false,
|
||||
tooltips: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
{
|
||||
name: '可容忍事件',
|
||||
type: 'scatter',
|
||||
symbol: 'circle',
|
||||
data: gongData.pointF
|
||||
},
|
||||
{
|
||||
name: '不可容忍事件',
|
||||
type: 'scatter',
|
||||
symbol: 'circle',
|
||||
data: gongData.pointFun
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
const tableRef = ref()
|
||||
provide('tableRef', tableRef)
|
||||
provide('tableStore', tableStore)
|
||||
|
||||
function gongfunction(arr: any) {
|
||||
let standI = 0
|
||||
let unstandI = 0
|
||||
let standF = 0
|
||||
let unstandF = 0
|
||||
let total = 0
|
||||
let pointIun = []
|
||||
let pointI = []
|
||||
let pointF = []
|
||||
let pointFun = []
|
||||
total = arr.length
|
||||
if (total == 0) {
|
||||
} else {
|
||||
for (let i = 0; i < arr.length; i++) {
|
||||
let point = []
|
||||
let xx = arr[i].persistTime
|
||||
let yy = arr[i].eventValue
|
||||
let time = arr[i].time
|
||||
let eventId = arr[i].eventId
|
||||
// let index =arr[i].eventDetailIndex;
|
||||
point = [xx, yy, time, eventId]
|
||||
|
||||
if (xx <= 0.003) {
|
||||
let line = 0
|
||||
line = 250 - 30000 * xx
|
||||
if (yy > line) {
|
||||
unstandI++
|
||||
pointIun.push({
|
||||
value: point,
|
||||
itemStyle: { normal: { color: 'red' } }
|
||||
})
|
||||
} else {
|
||||
standI++
|
||||
pointI.push({
|
||||
value: point,
|
||||
itemStyle: { normal: { color: 'green' } }
|
||||
})
|
||||
}
|
||||
} else if (xx <= 0.02) {
|
||||
if (yy > 120) {
|
||||
unstandI++
|
||||
pointIun.push({
|
||||
value: point,
|
||||
itemStyle: { normal: { color: 'red' } }
|
||||
})
|
||||
} else {
|
||||
standI++
|
||||
pointI.push({
|
||||
value: point,
|
||||
itemStyle: { normal: { color: 'green' } }
|
||||
})
|
||||
}
|
||||
} else if (xx <= 0.5) {
|
||||
if (yy > 120 || yy < 70) {
|
||||
unstandI++
|
||||
pointIun.push({
|
||||
value: point,
|
||||
itemStyle: { normal: { color: 'red' } }
|
||||
})
|
||||
} else {
|
||||
standI++
|
||||
pointI.push({
|
||||
value: point,
|
||||
itemStyle: { normal: { color: 'green' } }
|
||||
})
|
||||
}
|
||||
} else if (xx <= 10) {
|
||||
if (yy > 110 || yy < 80) {
|
||||
unstandI++
|
||||
pointIun.push({
|
||||
value: point,
|
||||
itemStyle: { normal: { color: 'red' } }
|
||||
})
|
||||
} else {
|
||||
standI++
|
||||
pointI.push({
|
||||
value: point,
|
||||
itemStyle: { normal: { color: 'green' } }
|
||||
})
|
||||
}
|
||||
} else {
|
||||
if (yy > 110 || yy < 90) {
|
||||
unstandI++
|
||||
pointIun.push({
|
||||
value: point,
|
||||
itemStyle: { normal: { color: 'red' } }
|
||||
})
|
||||
} else {
|
||||
standI++
|
||||
pointI.push({
|
||||
value: point,
|
||||
itemStyle: { normal: { color: 'green' } }
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
if (xx < 0.05) {
|
||||
standF++
|
||||
pointF.push({
|
||||
value: point,
|
||||
itemStyle: { normal: { color: 'green' } }
|
||||
})
|
||||
} else if (xx < 0.2) {
|
||||
if (yy > 50) {
|
||||
standF++
|
||||
pointF.push({
|
||||
value: point,
|
||||
itemStyle: { normal: { color: 'green' } }
|
||||
})
|
||||
} else {
|
||||
unstandF++
|
||||
pointFun.push({
|
||||
value: point,
|
||||
itemStyle: { normal: { color: 'red' } }
|
||||
})
|
||||
}
|
||||
} else if (xx < 0.5) {
|
||||
if (yy > 70) {
|
||||
standF++
|
||||
pointF.push({
|
||||
value: point,
|
||||
itemStyle: { normal: { color: 'green' } }
|
||||
})
|
||||
} else {
|
||||
unstandF++
|
||||
pointFun.push({
|
||||
value: point,
|
||||
itemStyle: { normal: { color: 'red' } }
|
||||
})
|
||||
}
|
||||
} else {
|
||||
if (yy > 80) {
|
||||
standF++
|
||||
pointF.push({
|
||||
value: point,
|
||||
itemStyle: { normal: { color: 'green' } }
|
||||
})
|
||||
} else {
|
||||
unstandF++
|
||||
pointFun.push({
|
||||
value: point,
|
||||
itemStyle: { normal: { color: 'red' } }
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
return {
|
||||
standI,
|
||||
unstandI,
|
||||
pointI,
|
||||
pointIun,
|
||||
standF,
|
||||
unstandF,
|
||||
pointF,
|
||||
pointFun
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
setTimeout(() => {
|
||||
tableStore.index()
|
||||
}, 100)
|
||||
})
|
||||
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>
|
||||
136
src/components/cockpit/directionStatistics/index.vue
Normal file
136
src/components/cockpit/directionStatistics/index.vue
Normal file
@@ -0,0 +1,136 @@
|
||||
<template>
|
||||
<div>
|
||||
<!--暂降方向统计 -->
|
||||
<my-echart class="tall" :options="echartList" :style="{ width: prop.width, height: `calc(${prop.height} )` }" />
|
||||
</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 MyEchart from '@/components/echarts/MyEchart.vue'
|
||||
import { useDictData } from '@/stores/dictData'
|
||||
import { ElMessage, ElMessageBox } from 'element-plus'
|
||||
import { getTimeOfTheMonth } from '@/utils/formatTime'
|
||||
const prop = defineProps({
|
||||
width: { type: String },
|
||||
height: { type: String },
|
||||
timeKey: { type: String },
|
||||
timeValue: { type: Object }
|
||||
})
|
||||
const data = [
|
||||
{
|
||||
name: '来自电网',
|
||||
value: 4
|
||||
},
|
||||
{
|
||||
name: '来自负荷',
|
||||
value: 41
|
||||
}
|
||||
]
|
||||
const echartList = ref({
|
||||
title: {},
|
||||
|
||||
tooltip: {
|
||||
trigger: 'item'
|
||||
},
|
||||
legend: {
|
||||
orient: 'vertical',
|
||||
top: 'center',
|
||||
right: '5%',
|
||||
formatter: function (e: any) {
|
||||
return e + ' ' + data.filter(item => item.name == e)[0].value + '次'
|
||||
}
|
||||
},
|
||||
xAxis: {
|
||||
show: false
|
||||
},
|
||||
yAxis: {
|
||||
show: false
|
||||
},
|
||||
grid: {
|
||||
left: '10px',
|
||||
right: '20px'
|
||||
},
|
||||
|
||||
options: {
|
||||
dataZoom: null,
|
||||
title: [
|
||||
{
|
||||
text: '暂降方向统计',
|
||||
left: 'center'
|
||||
},
|
||||
{
|
||||
text: data[0].value + data[1].value + '次',
|
||||
left: 'center',
|
||||
top: 'center'
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
type: 'pie',
|
||||
center: 'center',
|
||||
radius: ['55%', '75%'],
|
||||
label: {
|
||||
show: false,
|
||||
position: 'outside',
|
||||
textStyle: {
|
||||
//数值样式
|
||||
}
|
||||
},
|
||||
name: '事件统计',
|
||||
data: data
|
||||
}
|
||||
]
|
||||
}
|
||||
})
|
||||
const OverLimitDetailsRef = ref()
|
||||
const tableStore: any = new TableStore({
|
||||
url: '/user-boot/dept/deptTree',
|
||||
method: 'POST',
|
||||
|
||||
showPage: false,
|
||||
|
||||
column: [],
|
||||
beforeSearchFun: () => {
|
||||
tableStore.table.params.searchBeginTime = prop.timeValue?.[0] || getTimeOfTheMonth(prop.timeKey)[0]
|
||||
tableStore.table.params.searchEndTime = prop.timeValue?.[1] || getTimeOfTheMonth(prop.timeKey)[1]
|
||||
},
|
||||
loadCallback: () => {}
|
||||
})
|
||||
|
||||
const tableRef = ref()
|
||||
provide('tableRef', tableRef)
|
||||
|
||||
provide('tableStore', tableStore)
|
||||
|
||||
// 点击行
|
||||
const cellClickEvent = ({ row, column }: any) => {
|
||||
if (column.field != 'name') {
|
||||
console.log(row)
|
||||
OverLimitDetailsRef.value.open(row)
|
||||
}
|
||||
}
|
||||
|
||||
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>
|
||||
206
src/components/cockpit/exceedanceLevel/index.vue
Normal file
206
src/components/cockpit/exceedanceLevel/index.vue
Normal file
@@ -0,0 +1,206 @@
|
||||
<template>
|
||||
<div>
|
||||
<!--指标越限程度 -->
|
||||
<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 )`" 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 MyEchart from '@/components/echarts/MyEchart.vue'
|
||||
import { useDictData } from '@/stores/dictData'
|
||||
import { ElMessage, ElMessageBox } from 'element-plus'
|
||||
import { getTimeOfTheMonth } from '@/utils/formatTime'
|
||||
import OverLimitDetails from '@/components/cockpit/listOfMainMonitoringPoints/components/overLimitDetails.vue'
|
||||
const prop = defineProps({
|
||||
width: { type: String },
|
||||
height: { type: String },
|
||||
timeKey: { type: String },
|
||||
timeValue: { type: Object }
|
||||
})
|
||||
const echartList = ref({
|
||||
title: {
|
||||
text: '指标越限严重度'
|
||||
},
|
||||
|
||||
xAxis: {
|
||||
// name: '(区域)',
|
||||
data: ['闪变', '谐波电压', '谐波电流', '电压偏差', '三相不平衡']
|
||||
},
|
||||
|
||||
yAxis: {
|
||||
name: '%', // 给X轴加单位
|
||||
interval: 20
|
||||
},
|
||||
grid: {
|
||||
left: '10px',
|
||||
right: '20px'
|
||||
},
|
||||
options: {
|
||||
series: [
|
||||
{
|
||||
// name: '暂降次数',
|
||||
type: 'bar',
|
||||
name: '越限占比',
|
||||
data: [0, 7.5, 36, 0, 80],
|
||||
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',
|
||||
method: 'POST',
|
||||
|
||||
showPage: false,
|
||||
|
||||
column: [
|
||||
{
|
||||
field: 'index',
|
||||
title: '序号',
|
||||
width: '60',
|
||||
formatter: (row: any) => {
|
||||
return (tableStore.table.params.pageNum - 1) * tableStore.table.params.pageSize + row.rowIndex + 1
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '指标名称',
|
||||
field: 'name',
|
||||
minWidth: '90'
|
||||
},
|
||||
|
||||
{
|
||||
title: '越限最大值',
|
||||
field: 'type',
|
||||
minWidth: '60',
|
||||
render: 'customTemplate',
|
||||
customTemplate: (row: any) => {
|
||||
return `<span style='cursor: pointer;text-decoration: underline;'>${row.type}</span>`
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '国标限值',
|
||||
field: 'type1',
|
||||
minWidth: '60'
|
||||
},
|
||||
{
|
||||
title: '越限程度(%)',
|
||||
field: 'type2',
|
||||
minWidth: '60'
|
||||
},
|
||||
{
|
||||
title: '发生日期',
|
||||
field: 'type3',
|
||||
minWidth: '100'
|
||||
},
|
||||
{
|
||||
title: '越限最高监测点',
|
||||
field: 'type4',
|
||||
minWidth: '90'
|
||||
}
|
||||
],
|
||||
beforeSearchFun: () => {
|
||||
tableStore.table.params.searchBeginTime = prop.timeValue?.[0] || getTimeOfTheMonth(prop.timeKey)[0]
|
||||
tableStore.table.params.searchEndTime = prop.timeValue?.[1] || getTimeOfTheMonth(prop.timeKey)[1]
|
||||
},
|
||||
loadCallback: () => {
|
||||
tableStore.table.data = [
|
||||
{
|
||||
name: '闪变',
|
||||
type: '0.0',
|
||||
type1: '2.0',
|
||||
type2: '0.0',
|
||||
type3: '/',
|
||||
type4: '/'
|
||||
},
|
||||
{
|
||||
name: '谐波电压',
|
||||
type: '1.72',
|
||||
type1: '1.6',
|
||||
type2: '7.5',
|
||||
type3: '2025-03-09',
|
||||
type4: '10kV1#电动机'
|
||||
},
|
||||
{
|
||||
name: '谐波电流',
|
||||
type: '27.2',
|
||||
type1: '20.0',
|
||||
type2: '36.0',
|
||||
type3: '2025-03-16',
|
||||
type4: '380V电焊机(治理前)'
|
||||
},
|
||||
{
|
||||
name: '电压偏差',
|
||||
type: '0.0',
|
||||
type1: '2.0',
|
||||
type2: '0.0',
|
||||
type3: '/',
|
||||
type4: '/'
|
||||
},
|
||||
{
|
||||
name: '三相不平衡',
|
||||
type: '3.6',
|
||||
type1: '2.0',
|
||||
type2: '80.0',
|
||||
type3: '2025-03-01',
|
||||
type4: '380V电焊机(治理前)'
|
||||
}
|
||||
]
|
||||
|
||||
}
|
||||
})
|
||||
|
||||
const tableRef = ref()
|
||||
provide('tableRef', tableRef)
|
||||
|
||||
provide('tableStore', tableStore)
|
||||
|
||||
// 点击行
|
||||
const cellClickEvent = ({ row, column }: any) => {
|
||||
if (column.field != 'name') {
|
||||
console.log(row)
|
||||
OverLimitDetailsRef.value.open(row)
|
||||
}
|
||||
}
|
||||
|
||||
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>
|
||||
1
src/components/cockpit/governanceReport/index.json
Normal file
1
src/components/cockpit/governanceReport/index.json
Normal file
File diff suppressed because one or more lines are too long
124
src/components/cockpit/governanceReport/index.vue
Normal file
124
src/components/cockpit/governanceReport/index.vue
Normal file
@@ -0,0 +1,124 @@
|
||||
<template>
|
||||
<div>
|
||||
<!--治理效果报表 -->
|
||||
<TableHeader :showReset="false">
|
||||
<template v-slot:select>
|
||||
<el-form-item label="治理对象">
|
||||
<el-select
|
||||
v-model="tableStore.table.params.power"
|
||||
placeholder="请选择治理对象"
|
||||
clearable
|
||||
style="width: 130px"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in powerList"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</template>
|
||||
<template v-slot:operation>
|
||||
<el-button @click="downloadExcel" class="" type="primary" icon="el-icon-Download">导出excel</el-button>
|
||||
</template>
|
||||
</TableHeader>
|
||||
<div style="display: flex">
|
||||
<div
|
||||
id="luckysheet"
|
||||
:style="{ width: `calc(${prop.width} )`, height: `calc(${prop.height} - 57px )` }"
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted, provide, reactive, watch, h } from 'vue'
|
||||
import TableStore from '@/utils/tableStore'
|
||||
import { exportExcel } from '@/views/govern/reportForms/export.js'
|
||||
import TableHeader from '@/components/table/header/index.vue'
|
||||
import { useDictData } from '@/stores/dictData'
|
||||
import { ElMessage, ElMessageBox } from 'element-plus'
|
||||
import { getTimeOfTheMonth } from '@/utils/formatTime'
|
||||
import MyEchart from '@/components/echarts/MyEchart.vue'
|
||||
import { useConfig } from '@/stores/config'
|
||||
import Json from './index.json'
|
||||
|
||||
const prop = defineProps({
|
||||
width: { type: String },
|
||||
height: { type: String },
|
||||
timeKey: { type: String },
|
||||
timeValue: { type: Object }
|
||||
})
|
||||
const config = useConfig()
|
||||
const powerList: any = ref([
|
||||
{
|
||||
label: '1#变压器',
|
||||
value: '1'
|
||||
},
|
||||
{
|
||||
label: '2#变压器',
|
||||
value: '2'
|
||||
}
|
||||
])
|
||||
|
||||
const tableStore: any = new TableStore({
|
||||
url: '/user-boot/role/selectRoleDetail?id=0',
|
||||
method: 'POST',
|
||||
|
||||
showPage: false,
|
||||
exportName: '主要监测点列表',
|
||||
column: [],
|
||||
beforeSearchFun: () => {
|
||||
tableStore.table.params.searchBeginTime = prop.timeValue?.[0] || getTimeOfTheMonth(prop.timeKey)[0]
|
||||
tableStore.table.params.searchEndTime = prop.timeValue?.[1] || getTimeOfTheMonth(prop.timeKey)[1]
|
||||
},
|
||||
loadCallback: () => {}
|
||||
})
|
||||
|
||||
const tableRef = ref()
|
||||
provide('tableRef', tableRef)
|
||||
tableStore.table.params.power = '1'
|
||||
|
||||
provide('tableStore', tableStore)
|
||||
// 下载表格
|
||||
const downloadExcel = () => {
|
||||
exportExcel(luckysheet.getAllSheets(), '治理效果报表')
|
||||
}
|
||||
onMounted(() => {
|
||||
luckysheet.create({
|
||||
container: 'luckysheet',
|
||||
title: '', // 表 头名
|
||||
lang: 'zh', // 中文
|
||||
showtoolbar: false, // 是否显示工具栏
|
||||
showinfobar: false, // 是否显示顶部信息栏
|
||||
showsheetbar: true, // 是否显示底部sheet按钮
|
||||
allowEdit: false, // 禁止所有编辑操作（必填）
|
||||
data: Json
|
||||
})
|
||||
|
||||
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>
|
||||
:deep(.el-select) {
|
||||
min-width: 80px;
|
||||
}
|
||||
|
||||
</style>
|
||||
196
src/components/cockpit/gridSideStatistics/index.vue
Normal file
196
src/components/cockpit/gridSideStatistics/index.vue
Normal file
@@ -0,0 +1,196 @@
|
||||
<template>
|
||||
<div>
|
||||
|
||||
<!--电网侧指标越限统计 -->
|
||||
<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 )`" 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 MyEchart from '@/components/echarts/MyEchart.vue'
|
||||
import { useDictData } from '@/stores/dictData'
|
||||
import { ElMessage, ElMessageBox } from 'element-plus'
|
||||
import { getTimeOfTheMonth } from '@/utils/formatTime'
|
||||
import OverLimitDetails from '@/components/cockpit/listOfMainMonitoringPoints/components/overLimitDetails.vue'
|
||||
const prop = defineProps({
|
||||
width: { type: String },
|
||||
height: { type: String },
|
||||
timeKey: { type: String },
|
||||
timeValue: { type: Object }
|
||||
})
|
||||
const echartList = ref({
|
||||
title: {
|
||||
text: '指标越限占比'
|
||||
},
|
||||
|
||||
xAxis: {
|
||||
// name: '(区域)',
|
||||
data: ['闪变', '谐波电压', '谐波电流', '电压偏差', '三相不平衡']
|
||||
},
|
||||
|
||||
yAxis: {
|
||||
name: '%', // 给X轴加单位
|
||||
interval: 20
|
||||
},
|
||||
grid: {
|
||||
left: '10px',
|
||||
right: '20px'
|
||||
},
|
||||
options: {
|
||||
series: [
|
||||
{
|
||||
// name: '暂降次数',
|
||||
type: 'bar',
|
||||
name: '越限占比',
|
||||
data: [0, 45, 22, 0, 70],
|
||||
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',
|
||||
method: 'POST',
|
||||
|
||||
showPage: false,
|
||||
|
||||
column: [
|
||||
{
|
||||
field: 'index',
|
||||
title: '序号',
|
||||
width: '60',
|
||||
formatter: (row: any) => {
|
||||
return (tableStore.table.params.pageNum - 1) * tableStore.table.params.pageSize + row.rowIndex + 1
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '名称',
|
||||
field: 'name',
|
||||
minWidth: '90'
|
||||
},
|
||||
{
|
||||
title: '越限占比(%)',
|
||||
children: [
|
||||
{
|
||||
title: '闪变',
|
||||
field: 'type',
|
||||
minWidth: '70',
|
||||
render: 'customTemplate',
|
||||
customTemplate: (row: any) => {
|
||||
return `<span style='cursor: pointer;text-decoration: underline;'>${row.type}</span>`
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '谐波电压',
|
||||
field: 'type1',
|
||||
minWidth: '80',
|
||||
render: 'customTemplate',
|
||||
customTemplate: (row: any) => {
|
||||
return `<span style='cursor: pointer;text-decoration: underline;'>${row.type1}</span>`
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '谐波电流',
|
||||
field: 'type2',
|
||||
minWidth: '80',
|
||||
render: 'customTemplate',
|
||||
customTemplate: (row: any) => {
|
||||
return `<span style='cursor: pointer;text-decoration: underline;'>${row.type2}</span>`
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '电压偏差',
|
||||
field: 'type3',
|
||||
minWidth: '80',
|
||||
render: 'customTemplate',
|
||||
customTemplate: (row: any) => {
|
||||
return `<span style='cursor: pointer;text-decoration: underline;'>${row.type3}</span>`
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '三相不平衡',
|
||||
field: 'type4',
|
||||
minWidth: '90',
|
||||
render: 'customTemplate',
|
||||
customTemplate: (row: any) => {
|
||||
return `<span style='cursor: pointer;text-decoration: underline;'>${row.type4}</span>`
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
beforeSearchFun: () => {
|
||||
tableStore.table.params.searchBeginTime = prop.timeValue?.[0] || getTimeOfTheMonth(prop.timeKey)[0]
|
||||
tableStore.table.params.searchEndTime = prop.timeValue?.[1] || getTimeOfTheMonth(prop.timeKey)[1]
|
||||
},
|
||||
loadCallback: () => {
|
||||
tableStore.table.data = [
|
||||
{
|
||||
name: '1#变压器电网侧',
|
||||
type: '0',
|
||||
type1: '45',
|
||||
type2: '22',
|
||||
type3: '0',
|
||||
type4: '70'
|
||||
}
|
||||
]
|
||||
|
||||
tableStore.table.height = `calc(${prop.height} - 80px)`
|
||||
}
|
||||
})
|
||||
|
||||
const tableRef = ref()
|
||||
provide('tableRef', tableRef)
|
||||
|
||||
provide('tableStore', tableStore)
|
||||
|
||||
// 点击行
|
||||
const cellClickEvent = ({ row, column }: any) => {
|
||||
if (column.field != 'name') {
|
||||
console.log(row)
|
||||
OverLimitDetailsRef.value.open(row)
|
||||
}
|
||||
}
|
||||
|
||||
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>
|
||||
186
src/components/cockpit/indicatorDetails/index.vue
Normal file
186
src/components/cockpit/indicatorDetails/index.vue
Normal file
@@ -0,0 +1,186 @@
|
||||
<template>
|
||||
<div>
|
||||
<!--指标越限明细 -->
|
||||
|
||||
<el-calendar v-model="value" :style="{ height: prop.height, overflow: 'auto' }">
|
||||
<template #date-cell="{ data }">
|
||||
<div style="height: 100%; padding: 8px" :style="{ background: setBackground(data.day) }">
|
||||
<p :class="data.isSelected ? 'is-selected' : ''">
|
||||
{{ data.day.split('-').slice(2).join('-') }}
|
||||
</p>
|
||||
<el-tooltip
|
||||
effect="dark"
|
||||
placement="top"
|
||||
:hide-after="0"
|
||||
v-if="list?.filter(item => item.time == data.day)[0]?.text || false"
|
||||
>
|
||||
<template #content>
|
||||
<span v-html="list?.filter(item => item.time == data.day)[0]?.text || ''"></span>
|
||||
</template>
|
||||
<div
|
||||
:style="{ height: `calc(${prop.height} / 5 - 47px)`, overflow: 'auto' }"
|
||||
v-html="list?.filter(item => item.time == data.day)[0]?.text || ''"
|
||||
></div>
|
||||
</el-tooltip>
|
||||
</div>
|
||||
</template>
|
||||
</el-calendar>
|
||||
</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 { useDictData } from '@/stores/dictData'
|
||||
import { ElMessage, ElMessageBox } from 'element-plus'
|
||||
import { getTimeOfTheMonth } from '@/utils/formatTime'
|
||||
import { overflow } from 'html2canvas/dist/types/css/property-descriptors/overflow'
|
||||
import { dayjs } from 'element-plus'
|
||||
|
||||
dayjs.en.weekStart = 1 //设置日历的周起始日为星期一
|
||||
const value = ref(new Date())
|
||||
const prop = defineProps({
|
||||
width: { type: String },
|
||||
height: { type: String },
|
||||
timeKey: { type: String },
|
||||
timeValue: { type: Object }
|
||||
})
|
||||
const list = ref([
|
||||
{
|
||||
time: '2025-10-01',
|
||||
key: 81,
|
||||
text: '3次谐波越限<br/>5次谐波越限<br/>三相不平衡越限'
|
||||
},
|
||||
{
|
||||
time: '2025-10-31',
|
||||
key: 81,
|
||||
text: '3次谐波越限<br/>5次谐波越限<br/>三相不平衡越限'
|
||||
},
|
||||
{
|
||||
time: '2025-10-08',
|
||||
key: 20,
|
||||
text: '3次谐波越限<br/>5次谐波越限<br/>三相不平衡越限'
|
||||
},
|
||||
{
|
||||
time: '2025-10-16',
|
||||
key: 20,
|
||||
text: '3次谐波越限<br/>5次谐波越限<br/>三相不平衡越限'
|
||||
},
|
||||
{
|
||||
time: '2025-10-23',
|
||||
key: 20,
|
||||
text: '3次谐波越限<br/>5次谐波越限<br/>三相不平衡越限'
|
||||
},
|
||||
{
|
||||
time: '2025-10-04',
|
||||
key: 0,
|
||||
text: ''
|
||||
},
|
||||
{
|
||||
time: '2025-10-05',
|
||||
key: 0,
|
||||
text: ''
|
||||
}
|
||||
])
|
||||
const tableStore: any = new TableStore({
|
||||
url: '/user-boot/dept/deptTree',
|
||||
method: 'POST',
|
||||
|
||||
showPage: false,
|
||||
|
||||
column: [],
|
||||
beforeSearchFun: () => {
|
||||
tableStore.table.params.searchBeginTime = prop.timeValue?.[0] || getTimeOfTheMonth(prop.timeKey)[0]
|
||||
tableStore.table.params.searchEndTime = prop.timeValue?.[1] || getTimeOfTheMonth(prop.timeKey)[1]
|
||||
// value.value = new Date(prop.timeValue?.[0])
|
||||
},
|
||||
loadCallback: () => {
|
||||
tableStore.table.data = []
|
||||
}
|
||||
})
|
||||
|
||||
const tableRef = ref([])
|
||||
|
||||
const setBackground = (value: string) => {
|
||||
let data = []
|
||||
data = list.value?.filter(item => item.time == value)
|
||||
|
||||
if (data && data?.length > 0) {
|
||||
if (data[0].key < 10) {
|
||||
return '#33996690'
|
||||
} else if (data[0].key < 80) {
|
||||
return '#FFCC3390'
|
||||
} else if (data[0].key <= 100) {
|
||||
return '#Ff660090'
|
||||
}
|
||||
}
|
||||
|
||||
return '#fff'
|
||||
}
|
||||
|
||||
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>
|
||||
:deep(.el-calendar) {
|
||||
.el-calendar__header {
|
||||
display: none;
|
||||
}
|
||||
.el-calendar__body {
|
||||
padding: 0px !important;
|
||||
height: 100%;
|
||||
.el-calendar-table {
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
.el-calendar-day {
|
||||
height: 100%;
|
||||
padding: 0px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.el-calendar-table__row {
|
||||
.next {
|
||||
pointer-events: none;
|
||||
}
|
||||
.prev {
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
.el-calendar-table .el-calendar-day:hover {
|
||||
background-color: #ffffff00;
|
||||
}
|
||||
.el-calendar-table td.is-selected {
|
||||
background-color: #ffffff00;
|
||||
}
|
||||
}
|
||||
|
||||
// /*calendar_class 是el-calendar所在父标签的css*/
|
||||
// .calendar_class >>> .el-calendar-table:not(.is-range) td.next {
|
||||
// pointer-events: none;
|
||||
// }
|
||||
// .calendar_class >>> .el-calendar-table:not(.is-range) td.prev {
|
||||
// pointer-events: none;
|
||||
// }
|
||||
</style>
|
||||
393
src/components/cockpit/indicatorDistribution/index.vue
Normal file
393
src/components/cockpit/indicatorDistribution/index.vue
Normal file
@@ -0,0 +1,393 @@
|
||||
<template>
|
||||
<div>
|
||||
<!--指标越限概率分布 -->
|
||||
<my-echart
|
||||
class="tall"
|
||||
:options="echartList"
|
||||
:style="{ width: prop.width, height: `calc(${prop.height} / 2 )` }"
|
||||
/>
|
||||
<my-echart
|
||||
class="mt10"
|
||||
:options="echartList1"
|
||||
:style="{ width: prop.width, height: `calc(${prop.height} / 2 - 10px)` }"
|
||||
/>
|
||||
</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 MyEchart from '@/components/echarts/MyEchart.vue'
|
||||
import { useDictData } from '@/stores/dictData'
|
||||
import { ElMessage, ElMessageBox } from 'element-plus'
|
||||
import { getTimeOfTheMonth } from '@/utils/formatTime'
|
||||
const prop = defineProps({
|
||||
width: { type: String },
|
||||
height: { type: String },
|
||||
timeKey: { type: String },
|
||||
timeValue: { type: Object }
|
||||
})
|
||||
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'
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
})
|
||||
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: () => {
|
||||
tableStore.table.params.searchBeginTime = prop.timeValue?.[0] || getTimeOfTheMonth(prop.timeKey)[0]
|
||||
tableStore.table.params.searchEndTime = prop.timeValue?.[1] || getTimeOfTheMonth(prop.timeKey)[1]
|
||||
},
|
||||
loadCallback: () => {
|
||||
tableStore.table.data = []
|
||||
}
|
||||
})
|
||||
|
||||
const tableRef = ref()
|
||||
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>
|
||||
145
src/components/cockpit/indicatorFittingChart/index.vue
Normal file
145
src/components/cockpit/indicatorFittingChart/index.vue
Normal file
@@ -0,0 +1,145 @@
|
||||
<template>
|
||||
<div>
|
||||
<!--主要监测点列表 -->
|
||||
<TableHeader :showReset="false" >
|
||||
<template v-slot:select>
|
||||
<el-form-item label="关键词">
|
||||
<el-input v-model="tableStore.table.params.searchValue" clearable placeholder="请输关键字" />
|
||||
</el-form-item>
|
||||
</template>
|
||||
</TableHeader>
|
||||
<Table ref="tableRef" @cell-click="cellClickEvent" :height="`calc(${prop.height} - 58px)`"></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 { useDictData } from '@/stores/dictData'
|
||||
import { ElMessage, ElMessageBox } from 'element-plus'
|
||||
import { getTimeOfTheMonth } from '@/utils/formatTime'
|
||||
import { ElTag } from 'element-plus'
|
||||
import OverLimitDetails from '@/components/cockpit/listOfMainMonitoringPoints/components/overLimitDetails.vue'
|
||||
const prop = defineProps({
|
||||
width: { type: String },
|
||||
height: { type: String },
|
||||
timeKey: { type: String },
|
||||
timeValue: { type: Object }
|
||||
})
|
||||
const dictData = useDictData()
|
||||
const OverLimitDetailsRef = ref()
|
||||
const tableStore: any = new TableStore({
|
||||
url: '/user-boot/role/selectRoleDetail?id=0',
|
||||
method: 'POST',
|
||||
|
||||
showPage: false,
|
||||
exportName: '主要监测点列表',
|
||||
column: [
|
||||
{
|
||||
field: 'index',
|
||||
title: '序号',
|
||||
width: '60',
|
||||
formatter: (row: any) => {
|
||||
return (tableStore.table.params.pageNum - 1) * tableStore.table.params.pageSize + row.rowIndex + 1
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '监测点名称',
|
||||
field: 'name',
|
||||
minWidth: '90',
|
||||
|
||||
render: 'customTemplate',
|
||||
customTemplate: (row: any) => {
|
||||
return `<span style='cursor: pointer;text-decoration: underline;'>${row.name}</span>`
|
||||
}
|
||||
},
|
||||
|
||||
{
|
||||
title: '监测对象类型',
|
||||
field: 'type',
|
||||
minWidth: '90'
|
||||
},
|
||||
{
|
||||
title: '是否治理',
|
||||
field: 'whetherToGovern',
|
||||
minWidth: '70'
|
||||
},
|
||||
|
||||
{ title: '主要存在的电能质量问题', field: 'question', minWidth: '150' }
|
||||
],
|
||||
beforeSearchFun: () => {
|
||||
tableStore.table.params.searchBeginTime = prop.timeValue?.[0] || getTimeOfTheMonth(prop.timeKey)[0]
|
||||
tableStore.table.params.searchEndTime = prop.timeValue?.[1] || getTimeOfTheMonth(prop.timeKey)[1]
|
||||
},
|
||||
loadCallback: () => {
|
||||
|
||||
tableStore.table.data = [
|
||||
{
|
||||
name: '10kV1#电动机',
|
||||
type: '电动机',
|
||||
whetherToGovern: '否',
|
||||
question: '3次谐波电压、5次谐波电流、电压不平衡度超标'
|
||||
},
|
||||
{
|
||||
name: '10kV2#(治理后)',
|
||||
type: '电焊机',
|
||||
whetherToGovern: '100A APF',
|
||||
question: '所有指标均合格'
|
||||
},
|
||||
{
|
||||
name: '380V电焊机(治理前)',
|
||||
type: '电焊机',
|
||||
whetherToGovern: '100A APF',
|
||||
question: '5次谐波电流、电压不平衡度超标'
|
||||
},
|
||||
{
|
||||
name: '380V水泵机',
|
||||
type: '电动机',
|
||||
whetherToGovern: '否',
|
||||
question: '所有指标均合格'
|
||||
}
|
||||
]
|
||||
|
||||
tableStore.table.height = `calc(${prop.height} - 80px)`
|
||||
}
|
||||
})
|
||||
|
||||
const tableRef = ref()
|
||||
provide('tableRef', tableRef)
|
||||
tableStore.table.params.type = ''
|
||||
tableStore.table.params.searchValue = ''
|
||||
provide('tableStore', tableStore)
|
||||
|
||||
// 点击行
|
||||
const cellClickEvent = ({ row, column }: any) => {
|
||||
if (column.field == 'name') {
|
||||
console.log(row)
|
||||
OverLimitDetailsRef.value.open(row)
|
||||
}
|
||||
}
|
||||
|
||||
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>
|
||||
@@ -0,0 +1,134 @@
|
||||
<template>
|
||||
<!-- 综合评估详情 -->
|
||||
<el-dialog draggable title="指标合格率统计" v-model="dialogVisible" append-to-body width="70%">
|
||||
<TableHeader datePicker showExport :showReset="false">
|
||||
<template v-slot:select>
|
||||
<el-form-item label="监测点名称">
|
||||
<el-select
|
||||
v-model="tableStore.table.params.searchValue"
|
||||
placeholder="请选择监测点名称"
|
||||
style="width: 240px"
|
||||
>
|
||||
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</template>
|
||||
</TableHeader>
|
||||
<Table ref="tableRef" isGroup :height="height"></Table>
|
||||
</el-dialog>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { ref, provide } from 'vue'
|
||||
import Table from '@/components/table/index.vue'
|
||||
import TableHeader from '@/components/table/header/index.vue'
|
||||
import TableStore from '@/utils/tableStore'
|
||||
import { mainHeight } from '@/utils/layout'
|
||||
const dialogVisible: any = ref(false)
|
||||
const options = [
|
||||
{
|
||||
value: '35kV进线',
|
||||
label: '35kV进线'
|
||||
}
|
||||
]
|
||||
const height = mainHeight(0, 2).height as any
|
||||
const loop50 = (key: string) => {
|
||||
let list: any[] = []
|
||||
for (let i = 2; i < 51; i++) {
|
||||
list.push({
|
||||
title: i + '次',
|
||||
// field: key + i,
|
||||
field: 'flicker',
|
||||
width: '80'
|
||||
})
|
||||
}
|
||||
return list
|
||||
}
|
||||
const tableStore: any = new TableStore({
|
||||
url: '/user-boot/role/selectRoleDetail?id=0',
|
||||
method: 'POST',
|
||||
publicHeight: 30,
|
||||
showPage: false,
|
||||
exportName: '主要监测点列表',
|
||||
column: [
|
||||
{
|
||||
field: 'index',
|
||||
title: '序号',
|
||||
width: '60',
|
||||
formatter: (row: any) => {
|
||||
return (tableStore.table.params.pageNum - 1) * tableStore.table.params.pageSize + row.rowIndex + 1
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '日期',
|
||||
field: 'time',
|
||||
width: '150'
|
||||
},
|
||||
{
|
||||
title: '名称',
|
||||
field: 'name',
|
||||
width: '150'
|
||||
},
|
||||
{
|
||||
title: '闪变越限(分钟)',
|
||||
field: 'flicker',
|
||||
width: '80'
|
||||
},
|
||||
{
|
||||
title: '谐波电压越限(分钟)',
|
||||
children: loop50('voltage')
|
||||
},
|
||||
{
|
||||
title: '谐波电流越限(分钟)',
|
||||
children: loop50('harmonicCurrent')
|
||||
},
|
||||
{
|
||||
title: '三相不平衡度越限(分钟)',
|
||||
field: 'flicker',
|
||||
width: '100'
|
||||
},
|
||||
{
|
||||
title: '电压偏差越限(分钟)',
|
||||
field: 'flicker',
|
||||
width: '100'
|
||||
},
|
||||
{
|
||||
title: '频率偏差越限(分钟)',
|
||||
field: 'flicker',
|
||||
width: '100'
|
||||
}
|
||||
],
|
||||
beforeSearchFun: () => {},
|
||||
loadCallback: () => {
|
||||
tableStore.table.data = [
|
||||
{
|
||||
time: '2024-01-01 00:00:00',
|
||||
name: '35kV进线',
|
||||
flicker: '0',
|
||||
|
||||
},
|
||||
{
|
||||
time: '2024-01-01 00:00:00',
|
||||
name: '35kV进线',
|
||||
flicker: '0',
|
||||
|
||||
},
|
||||
{
|
||||
time: '2024-01-01 00:00:00',
|
||||
name: '35kV进线',
|
||||
flicker: '0',
|
||||
|
||||
},
|
||||
]
|
||||
}
|
||||
})
|
||||
|
||||
tableStore.table.params.searchValue = ''
|
||||
provide('tableStore', tableStore)
|
||||
const open = async (row: any) => {
|
||||
dialogVisible.value = true
|
||||
tableStore.index()
|
||||
}
|
||||
|
||||
defineExpose({ open })
|
||||
</script>
|
||||
<style lang="scss" scoped></style>
|
||||
271
src/components/cockpit/listOfMainMonitoringPoints/index.vue
Normal file
271
src/components/cockpit/listOfMainMonitoringPoints/index.vue
Normal file
@@ -0,0 +1,271 @@
|
||||
<template>
|
||||
<div>
|
||||
<!--指标拟合图 -->
|
||||
<TableHeader :showReset="false" @selectChange="selectChange">
|
||||
<template v-slot:select>
|
||||
<el-form-item label="用户功率">
|
||||
<el-select
|
||||
v-model="tableStore.table.params.power"
|
||||
placeholder="请选择用户功率"
|
||||
clearable
|
||||
style="width: 130px"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in powerList"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="电能质量指标">
|
||||
<el-select
|
||||
v-model="tableStore.table.params.indicator"
|
||||
placeholder="请选择电能质量指标"
|
||||
clearable
|
||||
style="width: 130px"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in indicatorList"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="越限情况">
|
||||
<el-select
|
||||
v-model="tableStore.table.params.exceedingTheLimit"
|
||||
placeholder="请选择越限情况"
|
||||
clearable
|
||||
style="width: 90px"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in exceedingTheLimitList"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</template>
|
||||
</TableHeader>
|
||||
<my-echart
|
||||
class="tall"
|
||||
:options="echartList"
|
||||
:style="{ width: prop.width, height: `calc(${prop.height} - ${headerHeight}px )` }"
|
||||
/>
|
||||
</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 { useDictData } from '@/stores/dictData'
|
||||
import { ElMessage, ElMessageBox } from 'element-plus'
|
||||
import { getTimeOfTheMonth } from '@/utils/formatTime'
|
||||
import MyEchart from '@/components/echarts/MyEchart.vue'
|
||||
import { useConfig } from '@/stores/config'
|
||||
const prop = defineProps({
|
||||
width: { type: String },
|
||||
height: { type: String },
|
||||
timeKey: { type: String },
|
||||
timeValue: { type: Object }
|
||||
})
|
||||
const config = useConfig()
|
||||
const powerList: any = ref([
|
||||
{
|
||||
label: '三相总有功功率',
|
||||
value: '1'
|
||||
},
|
||||
{
|
||||
label: '三相总无功功率',
|
||||
value: '2'
|
||||
}
|
||||
])
|
||||
const exceedingTheLimitList: any = ref([
|
||||
{
|
||||
label: '越限',
|
||||
value: '1'
|
||||
},
|
||||
{
|
||||
label: '不越限',
|
||||
value: '0'
|
||||
}
|
||||
])
|
||||
const indicatorList: any = ref([
|
||||
{
|
||||
label: '谐波电压总畸变率',
|
||||
value: '1'
|
||||
},
|
||||
{
|
||||
label: '各次谐波电压',
|
||||
value: '2'
|
||||
},
|
||||
{
|
||||
label: '各次谐波电压',
|
||||
value: '3'
|
||||
},
|
||||
{
|
||||
label: '三相电压不平衡',
|
||||
value: '4'
|
||||
}
|
||||
])
|
||||
const echartList = ref({
|
||||
title: {
|
||||
text: '谐波电压总畸变率越限与功率负荷曲线拟合图'
|
||||
},
|
||||
|
||||
xAxis: {
|
||||
type: 'time',
|
||||
axisLabel: {
|
||||
formatter: {
|
||||
day: '{MM}-{dd}',
|
||||
month: '{MM}',
|
||||
year: '{yyyy}'
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
yAxis: [{}, {}],
|
||||
grid: {
|
||||
left: '10px',
|
||||
right: '20px'
|
||||
},
|
||||
options: {
|
||||
series: [
|
||||
{
|
||||
// name: '暂降次数',
|
||||
type: 'bar',
|
||||
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]
|
||||
],
|
||||
itemStyle: {
|
||||
normal: {
|
||||
//这里是颜色
|
||||
color: function (params: any) {
|
||||
if (params.value[1] == 0 || params.value[1] == 3.14159) {
|
||||
return '#ccc'
|
||||
} else {
|
||||
return config.layout.elementUiPrimary[0]
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
yAxisIndex: 0
|
||||
},
|
||||
{
|
||||
name: '谐波总畸变率',
|
||||
type: 'line',
|
||||
showSymbol: false,
|
||||
smooth: true,
|
||||
data: [
|
||||
['2025-10-16 07:00:00', 0],
|
||||
['2025-10-16 07:15:00', 0],
|
||||
['2025-10-16 07:30:00', 0],
|
||||
['2025-10-16 07:45:00', 0],
|
||||
['2025-10-16 08:00:00', 0],
|
||||
['2025-10-16 08:15:00', 0.1],
|
||||
['2025-10-16 08:30:00', 0.1],
|
||||
['2025-10-16 08:45:00', 0.1],
|
||||
['2025-10-16 09:00:00', 1],
|
||||
['2025-10-16 09:15:00', 1],
|
||||
['2025-10-16 09:30:00', 1],
|
||||
['2025-10-16 09:45:00', 1],
|
||||
['2025-10-16 10:00:00', 0.8],
|
||||
['2025-10-16 10:15:00', 0.8],
|
||||
['2025-10-16 10:30:00', 0.8],
|
||||
['2025-10-16 10:45:00', 0.8],
|
||||
['2025-10-16 11:00:00', 0.8],
|
||||
['2025-10-16 11:15:00', 0.1],
|
||||
['2025-10-16 11:30:00', 0.1],
|
||||
['2025-10-16 11:45:00', 0.1],
|
||||
['2025-10-16 12:00:00', 0],
|
||||
['2025-10-16 12:15:00', 0],
|
||||
['2025-10-16 12:30:00', 0],
|
||||
['2025-10-16 12:45:00', 0]
|
||||
],
|
||||
yAxisIndex: 1
|
||||
}
|
||||
]
|
||||
}
|
||||
})
|
||||
const headerHeight = ref(57)
|
||||
const selectChange = (showSelect: any, height: any) => {
|
||||
headerHeight.value = height
|
||||
}
|
||||
const tableStore: any = new TableStore({
|
||||
url: '/user-boot/role/selectRoleDetail?id=0',
|
||||
method: 'POST',
|
||||
|
||||
showPage: false,
|
||||
exportName: '主要监测点列表',
|
||||
column: [],
|
||||
beforeSearchFun: () => {
|
||||
tableStore.table.params.searchBeginTime = prop.timeValue?.[0] || getTimeOfTheMonth(prop.timeKey)[0]
|
||||
tableStore.table.params.searchEndTime = prop.timeValue?.[1] || getTimeOfTheMonth(prop.timeKey)[1]
|
||||
},
|
||||
loadCallback: () => {
|
||||
tableStore.table.height = `calc(${prop.height} - 80px)`
|
||||
}
|
||||
})
|
||||
|
||||
const tableRef = ref()
|
||||
provide('tableRef', tableRef)
|
||||
tableStore.table.params.power = '1'
|
||||
tableStore.table.params.indicator = '1'
|
||||
tableStore.table.params.exceedingTheLimit = '1'
|
||||
tableStore.table.params.searchValue = ''
|
||||
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>
|
||||
:deep(.el-select) {
|
||||
min-width: 80px;
|
||||
}
|
||||
</style>
|
||||
169
src/components/cockpit/monitoringPointList/index.vue
Normal file
169
src/components/cockpit/monitoringPointList/index.vue
Normal file
@@ -0,0 +1,169 @@
|
||||
<template>
|
||||
<div>
|
||||
<!--监测点列表 -->
|
||||
|
||||
<Table ref="tableRef" @cell-click="cellClickEvent" :height="`calc(${prop.height} )`"></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 { useDictData } from '@/stores/dictData'
|
||||
import { ElMessage, ElMessageBox } from 'element-plus'
|
||||
import { getTimeOfTheMonth } from '@/utils/formatTime'
|
||||
import { ElTag } from 'element-plus'
|
||||
import OverLimitDetails from '@/components/cockpit/listOfMainMonitoringPoints/components/overLimitDetails.vue'
|
||||
const prop = defineProps({
|
||||
width: { type: String },
|
||||
height: { type: String },
|
||||
timeKey: { type: String },
|
||||
timeValue: { type: Object }
|
||||
})
|
||||
const dictData = useDictData()
|
||||
const OverLimitDetailsRef = ref()
|
||||
const tableStore: any = new TableStore({
|
||||
url: '/user-boot/role/selectRoleDetail?id=0',
|
||||
method: 'POST',
|
||||
|
||||
showPage: false,
|
||||
exportName: '主要监测点列表',
|
||||
column: [
|
||||
{
|
||||
field: 'index',
|
||||
title: '序号',
|
||||
width: '60',
|
||||
formatter: (row: any) => {
|
||||
return (tableStore.table.params.pageNum - 1) * tableStore.table.params.pageSize + row.rowIndex + 1
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '治理对象名称',
|
||||
field: 'name',
|
||||
minWidth: '80'
|
||||
},
|
||||
|
||||
{
|
||||
title: '电压等级',
|
||||
field: 'type',
|
||||
minWidth: '70'
|
||||
},
|
||||
{
|
||||
title: '治理设备详情',
|
||||
field: 'type1',
|
||||
minWidth: '70'
|
||||
},
|
||||
|
||||
{
|
||||
title: '治理前报告',
|
||||
field: 'type2',
|
||||
minWidth: '80',
|
||||
render: 'customTemplate',
|
||||
customTemplate: (row: any) => {
|
||||
return `<span style='cursor: pointer;text-decoration: underline;'>${row.type2}</span>`
|
||||
}
|
||||
},
|
||||
{ title: '监测点名称', field: 'type3', minWidth: '70' },
|
||||
{ title: '监测类型', field: 'type4', minWidth: '60' },
|
||||
{
|
||||
title: '监测点状态',
|
||||
field: 'type5',
|
||||
minWidth: '60',
|
||||
render: 'customTemplate',
|
||||
customTemplate: (row: any) => {
|
||||
return `<span style='color: ${row.type5 === '中断' ? '#FF0000' : ''}'>${row.type5}</span>`
|
||||
}
|
||||
},
|
||||
{ title: '最新数据时间', field: 'type6', minWidth: '140' }
|
||||
],
|
||||
beforeSearchFun: () => {
|
||||
tableStore.table.params.searchBeginTime = prop.timeValue?.[0] || getTimeOfTheMonth(prop.timeKey)[0]
|
||||
tableStore.table.params.searchEndTime = prop.timeValue?.[1] || getTimeOfTheMonth(prop.timeKey)[1]
|
||||
},
|
||||
loadCallback: () => {
|
||||
tableStore.table.data = [
|
||||
{
|
||||
name: '1#变压器',
|
||||
type: '0.38kV',
|
||||
type1: '250A APF',
|
||||
type2: '报告.doc',
|
||||
type3: '1#变压器 电网侧',
|
||||
type4: '电网侧',
|
||||
type5: '运行',
|
||||
type6: '2025-04-11 18:16:00'
|
||||
},
|
||||
{
|
||||
name: '1#变压器',
|
||||
type: '0.38kV',
|
||||
type1: '250A APF',
|
||||
type2: '报告.doc',
|
||||
type3: '1#变压器 负载侧',
|
||||
type4: '负载侧',
|
||||
type5: '运行',
|
||||
type6: '2025-04-11 18:16:00'
|
||||
},
|
||||
{
|
||||
name: '2#变压器',
|
||||
type: '0.38kV',
|
||||
type1: '100A SVG',
|
||||
type2: '/',
|
||||
type3: '1#变压器 电网侧',
|
||||
type4: '电网侧',
|
||||
type5: '运行',
|
||||
type6: '2025-04-11 18:16:00'
|
||||
},
|
||||
{
|
||||
name: '2#变压器',
|
||||
type: '0.38kV',
|
||||
type1: '100A SVG',
|
||||
type2: '/',
|
||||
type3: '1#变压器 负载侧',
|
||||
type4: '负载侧',
|
||||
type5: '中断',
|
||||
type6: '2025-04-11 18:16:00'
|
||||
}
|
||||
]
|
||||
|
||||
tableStore.table.height = `calc(${prop.height} - 80px)`
|
||||
}
|
||||
})
|
||||
|
||||
const tableRef = ref()
|
||||
provide('tableRef', tableRef)
|
||||
tableStore.table.params.type = ''
|
||||
tableStore.table.params.searchValue = ''
|
||||
provide('tableStore', tableStore)
|
||||
|
||||
// 点击行
|
||||
const cellClickEvent = ({ row, column }: any) => {
|
||||
if (column.field == 'name') {
|
||||
console.log(row)
|
||||
OverLimitDetailsRef.value.open(row)
|
||||
}
|
||||
}
|
||||
|
||||
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>
|
||||
196
src/components/cockpit/overLimitStatistics/index.vue
Normal file
196
src/components/cockpit/overLimitStatistics/index.vue
Normal file
@@ -0,0 +1,196 @@
|
||||
<template>
|
||||
<div>
|
||||
|
||||
<!--总体指标越限统计 -->
|
||||
<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 )`" 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 MyEchart from '@/components/echarts/MyEchart.vue'
|
||||
import { useDictData } from '@/stores/dictData'
|
||||
import { ElMessage, ElMessageBox } from 'element-plus'
|
||||
import { getTimeOfTheMonth } from '@/utils/formatTime'
|
||||
import OverLimitDetails from '@/components/cockpit/listOfMainMonitoringPoints/components/overLimitDetails.vue'
|
||||
const prop = defineProps({
|
||||
width: { type: String },
|
||||
height: { type: String },
|
||||
timeKey: { type: String },
|
||||
timeValue: { type: Object }
|
||||
})
|
||||
const echartList = ref({
|
||||
title: {
|
||||
text: '指标越限占比'
|
||||
},
|
||||
|
||||
xAxis: {
|
||||
// name: '(区域)',
|
||||
data: ['闪变', '谐波电压', '谐波电流', '电压偏差', '三相不平衡']
|
||||
},
|
||||
|
||||
yAxis: {
|
||||
name: '%', // 给X轴加单位
|
||||
interval: 20
|
||||
},
|
||||
grid: {
|
||||
left: '10px',
|
||||
right: '20px'
|
||||
},
|
||||
options: {
|
||||
series: [
|
||||
{
|
||||
// name: '暂降次数',
|
||||
type: 'bar',
|
||||
name: '越限占比',
|
||||
data: [0, 45, 22, 0, 70],
|
||||
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',
|
||||
method: 'POST',
|
||||
|
||||
showPage: false,
|
||||
|
||||
column: [
|
||||
{
|
||||
field: 'index',
|
||||
title: '序号',
|
||||
width: '60',
|
||||
formatter: (row: any) => {
|
||||
return (tableStore.table.params.pageNum - 1) * tableStore.table.params.pageSize + row.rowIndex + 1
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '名称',
|
||||
field: 'name',
|
||||
minWidth: '90'
|
||||
},
|
||||
{
|
||||
title: '越限占比(%)',
|
||||
children: [
|
||||
{
|
||||
title: '闪变',
|
||||
field: 'type',
|
||||
minWidth: '70',
|
||||
render: 'customTemplate',
|
||||
customTemplate: (row: any) => {
|
||||
return `<span style='cursor: pointer;text-decoration: underline;'>${row.type}</span>`
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '谐波电压',
|
||||
field: 'type1',
|
||||
minWidth: '80',
|
||||
render: 'customTemplate',
|
||||
customTemplate: (row: any) => {
|
||||
return `<span style='cursor: pointer;text-decoration: underline;'>${row.type1}</span>`
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '谐波电流',
|
||||
field: 'type2',
|
||||
minWidth: '80',
|
||||
render: 'customTemplate',
|
||||
customTemplate: (row: any) => {
|
||||
return `<span style='cursor: pointer;text-decoration: underline;'>${row.type2}</span>`
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '电压偏差',
|
||||
field: 'type3',
|
||||
minWidth: '80',
|
||||
render: 'customTemplate',
|
||||
customTemplate: (row: any) => {
|
||||
return `<span style='cursor: pointer;text-decoration: underline;'>${row.type3}</span>`
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '三相不平衡',
|
||||
field: 'type4',
|
||||
minWidth: '90',
|
||||
render: 'customTemplate',
|
||||
customTemplate: (row: any) => {
|
||||
return `<span style='cursor: pointer;text-decoration: underline;'>${row.type4}</span>`
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
beforeSearchFun: () => {
|
||||
tableStore.table.params.searchBeginTime = prop.timeValue?.[0] || getTimeOfTheMonth(prop.timeKey)[0]
|
||||
tableStore.table.params.searchEndTime = prop.timeValue?.[1] || getTimeOfTheMonth(prop.timeKey)[1]
|
||||
},
|
||||
loadCallback: () => {
|
||||
tableStore.table.data = [
|
||||
{
|
||||
name: '10kV1#电动机',
|
||||
type: '0',
|
||||
type1: '45',
|
||||
type2: '22',
|
||||
type3: '0',
|
||||
type4: '70'
|
||||
}
|
||||
]
|
||||
|
||||
tableStore.table.height = `calc(${prop.height} - 80px)`
|
||||
}
|
||||
})
|
||||
|
||||
const tableRef = ref()
|
||||
provide('tableRef', tableRef)
|
||||
|
||||
provide('tableStore', tableStore)
|
||||
|
||||
// 点击行
|
||||
const cellClickEvent = ({ row, column }: any) => {
|
||||
if (column.field != 'name') {
|
||||
console.log(row)
|
||||
OverLimitDetailsRef.value.open(row)
|
||||
}
|
||||
}
|
||||
|
||||
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>
|
||||
119
src/components/cockpit/sensitiveLoad/index.vue
Normal file
119
src/components/cockpit/sensitiveLoad/index.vue
Normal file
@@ -0,0 +1,119 @@
|
||||
<template>
|
||||
<div>
|
||||
<!--敏感负荷列表 -->
|
||||
|
||||
<Table ref="tableRef" @cell-click="cellClickEvent" :height="`calc(${prop.height})`" isGroup></Table>
|
||||
</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 MyEchart from '@/components/echarts/MyEchart.vue'
|
||||
import { useDictData } from '@/stores/dictData'
|
||||
import { ElMessage, ElMessageBox } from 'element-plus'
|
||||
import { getTimeOfTheMonth } from '@/utils/formatTime'
|
||||
const prop = defineProps({
|
||||
width: { type: String },
|
||||
height: { type: String },
|
||||
timeKey: { type: String },
|
||||
timeValue: { type: Object }
|
||||
})
|
||||
|
||||
const OverLimitDetailsRef = ref()
|
||||
const tableStore: any = new TableStore({
|
||||
url: '/user-boot/dept/deptTree',
|
||||
method: 'POST',
|
||||
|
||||
showPage: false,
|
||||
|
||||
column: [
|
||||
{
|
||||
field: 'index',
|
||||
title: '序号',
|
||||
width: '60',
|
||||
formatter: (row: any) => {
|
||||
return (tableStore.table.params.pageNum - 1) * tableStore.table.params.pageSize + row.rowIndex + 1
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '敏感负荷名称',
|
||||
field: 'name',
|
||||
minWidth: '90'
|
||||
},
|
||||
|
||||
{
|
||||
title: '敏感负荷类型',
|
||||
field: 'type',
|
||||
minWidth: '70'
|
||||
},
|
||||
{
|
||||
title: '是否监测',
|
||||
field: 'type1',
|
||||
minWidth: '80'
|
||||
},
|
||||
{
|
||||
title: '是否治理',
|
||||
field: 'type2',
|
||||
minWidth: '80'
|
||||
}
|
||||
],
|
||||
beforeSearchFun: () => {
|
||||
tableStore.table.params.searchBeginTime = prop.timeValue?.[0] || getTimeOfTheMonth(prop.timeKey)[0]
|
||||
tableStore.table.params.searchEndTime = prop.timeValue?.[1] || getTimeOfTheMonth(prop.timeKey)[1]
|
||||
},
|
||||
loadCallback: () => {
|
||||
tableStore.table.data = [
|
||||
{
|
||||
name: '10kV1#变压器',
|
||||
type: '机房',
|
||||
type1: '是',
|
||||
type2: '100A APF'
|
||||
},
|
||||
{
|
||||
name: '380kV1#母线',
|
||||
type: 'PLC',
|
||||
type1: '是',
|
||||
type2: 'UPS'
|
||||
}
|
||||
]
|
||||
}
|
||||
})
|
||||
|
||||
const tableRef = ref()
|
||||
provide('tableRef', tableRef)
|
||||
|
||||
provide('tableStore', tableStore)
|
||||
|
||||
// 点击行
|
||||
const cellClickEvent = ({ row, column }: any) => {
|
||||
if (column.field != 'name') {
|
||||
console.log(row)
|
||||
OverLimitDetailsRef.value.open(row)
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
setTimeout(() => {
|
||||
tableStore.index()
|
||||
}, 500)
|
||||
})
|
||||
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>
|
||||
199
src/components/cockpit/transientDetails/index.vue
Normal file
199
src/components/cockpit/transientDetails/index.vue
Normal file
@@ -0,0 +1,199 @@
|
||||
<template>
|
||||
<div>
|
||||
<!--暂态事件明细 -->
|
||||
|
||||
<el-calendar v-model="value" :style="{ height: prop.height, overflow: 'auto' }">
|
||||
<template #date-cell="{ data }">
|
||||
<div style="height: 100%; padding: 8px" :style="{ background: setBackground(data.day) }">
|
||||
<p :class="data.isSelected ? 'is-selected' : ''">
|
||||
{{ data.day.split('-').slice(2).join('-') }}
|
||||
</p>
|
||||
<el-tooltip
|
||||
effect="dark"
|
||||
placement="top"
|
||||
:hide-after="0"
|
||||
v-if="list?.filter(item => item.time == data.day)[0]?.type || false"
|
||||
>
|
||||
<template #content>
|
||||
<!-- <span v-html="list?.filter(item => item.time == data.day)[0]?.type || ''"></span> -->
|
||||
<div v-for="item in list?.filter(item => item.time == data.day)">
|
||||
<div>电压暂降：{{ item.type || '' }}</div>
|
||||
<div>电压中断：{{ item.type1 || '' }}</div>
|
||||
<div>电压暂升：{{ item.type2 || '' }}</div>
|
||||
</div>
|
||||
</template>
|
||||
<div
|
||||
:style="{ height: `calc(${prop.height} / 5 - 47px)`, overflow: 'auto' }"
|
||||
v-for="item in list?.filter(item => item.time == data.day)"
|
||||
>
|
||||
<div>电压暂降:{{ item.type || '' }}</div>
|
||||
<div>电压中断:{{ item.type1 || '' }}</div>
|
||||
<div>电压暂升:{{ item.type2 || '' }}</div>
|
||||
</div>
|
||||
</el-tooltip>
|
||||
</div>
|
||||
</template>
|
||||
</el-calendar>
|
||||
</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 { useDictData } from '@/stores/dictData'
|
||||
import { ElMessage, ElMessageBox } from 'element-plus'
|
||||
import { getTimeOfTheMonth } from '@/utils/formatTime'
|
||||
import { overflow } from 'html2canvas/dist/types/css/property-descriptors/overflow'
|
||||
import { dayjs } from 'element-plus'
|
||||
|
||||
dayjs.en.weekStart = 1 //设置日历的周起始日为星期一
|
||||
const value = ref(new Date())
|
||||
const prop = defineProps({
|
||||
width: { type: String },
|
||||
height: { type: String },
|
||||
timeKey: { type: String },
|
||||
timeValue: { type: Object }
|
||||
})
|
||||
const list = ref([
|
||||
{
|
||||
time: '2025-10-01',
|
||||
key: 81,
|
||||
type: 1,
|
||||
type1: 1,
|
||||
type2: 1
|
||||
},
|
||||
{
|
||||
time: '2025-10-31',
|
||||
key: 81,
|
||||
type: 1,
|
||||
type1: 1,
|
||||
type2: 1
|
||||
},
|
||||
{
|
||||
time: '2025-10-08',
|
||||
key: 20,
|
||||
type: 1,
|
||||
type1: 1,
|
||||
type2: 1
|
||||
},
|
||||
{
|
||||
time: '2025-10-16',
|
||||
key: 20,
|
||||
type: 1,
|
||||
type1: 1,
|
||||
type2: 1
|
||||
},
|
||||
{
|
||||
time: '2025-10-23',
|
||||
key: 20,
|
||||
type: 1,
|
||||
type1: 1,
|
||||
type2: 1
|
||||
},
|
||||
{
|
||||
time: '2025-10-04',
|
||||
key: 0
|
||||
},
|
||||
{
|
||||
time: '2025-10-05',
|
||||
key: 0
|
||||
}
|
||||
])
|
||||
const tableStore: any = new TableStore({
|
||||
url: '/user-boot/dept/deptTree',
|
||||
method: 'POST',
|
||||
|
||||
showPage: false,
|
||||
|
||||
column: [],
|
||||
beforeSearchFun: () => {
|
||||
tableStore.table.params.searchBeginTime = prop.timeValue?.[0] || getTimeOfTheMonth(prop.timeKey)[0]
|
||||
tableStore.table.params.searchEndTime = prop.timeValue?.[1] || getTimeOfTheMonth(prop.timeKey)[1]
|
||||
// value.value = new Date(prop.timeValue?.[0])
|
||||
},
|
||||
loadCallback: () => {
|
||||
tableStore.table.data = []
|
||||
}
|
||||
})
|
||||
|
||||
const tableRef = ref([])
|
||||
|
||||
const setBackground = (value: string) => {
|
||||
let data = []
|
||||
data = list.value?.filter(item => item.time == value)
|
||||
|
||||
if (data && data?.length > 0) {
|
||||
if (data[0].key > 0) {
|
||||
return '#Ff660090'
|
||||
}
|
||||
}
|
||||
|
||||
return '#fff'
|
||||
}
|
||||
|
||||
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>
|
||||
:deep(.el-calendar) {
|
||||
.el-calendar__header {
|
||||
display: none;
|
||||
}
|
||||
.el-calendar__body {
|
||||
padding: 0px !important;
|
||||
height: 100%;
|
||||
.el-calendar-table {
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
.el-calendar-day {
|
||||
height: 100%;
|
||||
padding: 0px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.el-calendar-table__row {
|
||||
.next {
|
||||
pointer-events: none;
|
||||
}
|
||||
.prev {
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
.el-calendar-table .el-calendar-day:hover {
|
||||
background-color: #ffffff00;
|
||||
}
|
||||
.el-calendar-table td.is-selected {
|
||||
background-color: #ffffff00;
|
||||
}
|
||||
}
|
||||
|
||||
// /*calendar_class 是el-calendar所在父标签的css*/
|
||||
// .calendar_class >>> .el-calendar-table:not(.is-range) td.next {
|
||||
// pointer-events: none;
|
||||
// }
|
||||
// .calendar_class >>> .el-calendar-table:not(.is-range) td.prev {
|
||||
// pointer-events: none;
|
||||
// }
|
||||
</style>
|
||||
345
src/components/cockpit/transientDistribution/index.vue
Normal file
345
src/components/cockpit/transientDistribution/index.vue
Normal file
@@ -0,0 +1,345 @@
|
||||
<template>
|
||||
<div>
|
||||
<!--暂态事件概率分布 -->
|
||||
<my-echart
|
||||
class="tall"
|
||||
:options="echartList"
|
||||
:style="{ width: prop.width, height: `calc(${prop.height} / 2 )` }"
|
||||
/>
|
||||
<my-echart
|
||||
class="mt10"
|
||||
:options="echartList1"
|
||||
:style="{ width: prop.width, height: `calc(${prop.height} / 2 - 10px)` }"
|
||||
/>
|
||||
</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 MyEchart from '@/components/echarts/MyEchart.vue'
|
||||
import { useDictData } from '@/stores/dictData'
|
||||
import { ElMessage, ElMessageBox } from 'element-plus'
|
||||
import { getTimeOfTheMonth } from '@/utils/formatTime'
|
||||
import { useConfig } from '@/stores/config'
|
||||
const config = useConfig()
|
||||
const prop = defineProps({
|
||||
width: { type: String },
|
||||
height: { type: String },
|
||||
timeKey: { type: String },
|
||||
timeValue: { type: Object }
|
||||
})
|
||||
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%',
|
||||
'50%-60%',
|
||||
'60%-70%',
|
||||
'70%-80%',
|
||||
'80%-90%',
|
||||
'90%-100%'
|
||||
],
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: '#111'
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
color: '#111'
|
||||
}
|
||||
},
|
||||
yAxis3D: {
|
||||
type: 'category',
|
||||
name: '持续时间',
|
||||
data: ['0-0.01s', '0.01s-0.1s', '0.1s-1s', '1s-10s', '10s'],
|
||||
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: '电压中断',
|
||||
color: '#FF9100',
|
||||
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,
|
||||
color: '#FFBF00',
|
||||
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: '电压暂升',
|
||||
color: config.layout.elementUiPrimary[0],
|
||||
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]
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
})
|
||||
const tableStore: any = new TableStore({
|
||||
url: '/user-boot/dept/deptTree',
|
||||
method: 'POST',
|
||||
showPage: false,
|
||||
column: [],
|
||||
beforeSearchFun: () => {
|
||||
tableStore.table.params.searchBeginTime = prop.timeValue?.[0] || getTimeOfTheMonth(prop.timeKey)[0]
|
||||
tableStore.table.params.searchEndTime = prop.timeValue?.[1] || getTimeOfTheMonth(prop.timeKey)[1]
|
||||
},
|
||||
loadCallback: () => {
|
||||
tableStore.table.data = []
|
||||
}
|
||||
})
|
||||
|
||||
const tableRef = ref()
|
||||
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>
|
||||
218
src/components/cockpit/transientStatistics/index.vue
Normal file
218
src/components/cockpit/transientStatistics/index.vue
Normal file
@@ -0,0 +1,218 @@
|
||||
<template>
|
||||
<div>
|
||||
<!--暂态事件统计 -->
|
||||
<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 )`" isGroup></Table>
|
||||
</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 MyEchart from '@/components/echarts/MyEchart.vue'
|
||||
import { useDictData } from '@/stores/dictData'
|
||||
import { ElMessage, ElMessageBox } from 'element-plus'
|
||||
import { getTimeOfTheMonth } from '@/utils/formatTime'
|
||||
import { useConfig } from '@/stores/config'
|
||||
const config = useConfig()
|
||||
const prop = defineProps({
|
||||
width: { type: String },
|
||||
height: { type: String },
|
||||
timeKey: { type: String },
|
||||
timeValue: { type: Object }
|
||||
})
|
||||
const data = [
|
||||
{
|
||||
name: '电压中断',
|
||||
value: 4
|
||||
},
|
||||
{
|
||||
name: '电压暂降',
|
||||
value: 41
|
||||
},
|
||||
{
|
||||
name: '电压暂升',
|
||||
value: 46
|
||||
}
|
||||
]
|
||||
const echartList = ref({
|
||||
title: {},
|
||||
|
||||
tooltip: {
|
||||
trigger: 'item'
|
||||
},
|
||||
legend: {
|
||||
orient: 'vertical',
|
||||
top: 'center',
|
||||
right: '5%',
|
||||
formatter: function (e: any) {
|
||||
return e + ' ' + data.filter(item => item.name == e)[0].value + '次'
|
||||
}
|
||||
},
|
||||
xAxis: {
|
||||
show: false
|
||||
},
|
||||
yAxis: {
|
||||
show: false
|
||||
},
|
||||
grid: {
|
||||
left: '10px',
|
||||
right: '20px'
|
||||
},
|
||||
color: ['#FF9100', '#FFBF00', config.layout.elementUiPrimary[0]],
|
||||
options: {
|
||||
dataZoom: null,
|
||||
title: [
|
||||
{
|
||||
text: '暂态事件统计',
|
||||
left: 'center'
|
||||
},
|
||||
{
|
||||
text: data[0].value + data[1].value + data[2].value + '次',
|
||||
left: 'center',
|
||||
top: 'center'
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
type: 'pie',
|
||||
center: 'center',
|
||||
radius: ['50%', '70%'],
|
||||
label: {
|
||||
show: false,
|
||||
position: 'outside',
|
||||
textStyle: {
|
||||
//数值样式
|
||||
}
|
||||
},
|
||||
name: '事件统计',
|
||||
data: data
|
||||
}
|
||||
]
|
||||
}
|
||||
})
|
||||
const OverLimitDetailsRef = ref()
|
||||
const tableStore: any = new TableStore({
|
||||
url: '/user-boot/dept/deptTree',
|
||||
method: 'POST',
|
||||
|
||||
showPage: false,
|
||||
|
||||
column: [
|
||||
{
|
||||
field: 'index',
|
||||
title: '序号',
|
||||
width: '60',
|
||||
formatter: (row: any) => {
|
||||
return (tableStore.table.params.pageNum - 1) * tableStore.table.params.pageSize + row.rowIndex + 1
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '名称',
|
||||
field: 'name',
|
||||
minWidth: '90'
|
||||
},
|
||||
|
||||
{
|
||||
title: '电压中断(次)',
|
||||
field: 'type',
|
||||
minWidth: '70',
|
||||
render: 'customTemplate',
|
||||
customTemplate: (row: any) => {
|
||||
return `<span style='cursor: pointer;text-decoration: underline;'>${row.type}</span>`
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '电压暂降(次)',
|
||||
field: 'type1',
|
||||
minWidth: '80',
|
||||
render: 'customTemplate',
|
||||
customTemplate: (row: any) => {
|
||||
return `<span style='cursor: pointer;text-decoration: underline;'>${row.type1}</span>`
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '电压暂升(次)',
|
||||
field: 'type2',
|
||||
minWidth: '80',
|
||||
render: 'customTemplate',
|
||||
customTemplate: (row: any) => {
|
||||
return `<span style='cursor: pointer;text-decoration: underline;'>${row.type2}</span>`
|
||||
}
|
||||
}
|
||||
],
|
||||
beforeSearchFun: () => {
|
||||
tableStore.table.params.searchBeginTime = prop.timeValue?.[0] || getTimeOfTheMonth(prop.timeKey)[0]
|
||||
tableStore.table.params.searchEndTime = prop.timeValue?.[1] || getTimeOfTheMonth(prop.timeKey)[1]
|
||||
},
|
||||
loadCallback: () => {
|
||||
tableStore.table.data = [
|
||||
{
|
||||
name: '35kV1进线',
|
||||
type: '2',
|
||||
type1: '38',
|
||||
type2: '35'
|
||||
},
|
||||
{
|
||||
name: '35kV1变压器',
|
||||
type: '2',
|
||||
type1: '1',
|
||||
type2: '3'
|
||||
},
|
||||
{
|
||||
name: '35kV1母线',
|
||||
type: '0',
|
||||
type1: '1',
|
||||
type2: '4'
|
||||
},
|
||||
{
|
||||
name: '35kV2母线',
|
||||
type: '0',
|
||||
type1: '1',
|
||||
type2: '4'
|
||||
}
|
||||
]
|
||||
}
|
||||
})
|
||||
|
||||
const tableRef = ref()
|
||||
provide('tableRef', tableRef)
|
||||
|
||||
provide('tableStore', tableStore)
|
||||
|
||||
// 点击行
|
||||
const cellClickEvent = ({ row, column }: any) => {
|
||||
if (column.field != 'name') {
|
||||
console.log(row)
|
||||
OverLimitDetailsRef.value.open(row)
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
setTimeout(() => {
|
||||
tableStore.index()
|
||||
}, 200)
|
||||
})
|
||||
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>
|
||||
280
src/components/cockpit/trendComparison/index.vue
Normal file
280
src/components/cockpit/trendComparison/index.vue
Normal file
@@ -0,0 +1,280 @@
|
||||
<template>
|
||||
<div>
|
||||
<!--趋势对比 -->
|
||||
<TableHeader :showReset="false" @selectChange="selectChange">
|
||||
<template v-slot:select>
|
||||
<el-form-item label="监测点名称">
|
||||
<el-select
|
||||
v-model="tableStore.table.params.power"
|
||||
placeholder="请选择监测点名称"
|
||||
clearable
|
||||
style="width: 130px"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in powerList"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="电能质量指标">
|
||||
<el-select
|
||||
v-model="tableStore.table.params.indicator"
|
||||
placeholder="请选择电能质量指标"
|
||||
clearable
|
||||
style="width: 130px"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in indicatorList"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="谐波次数">
|
||||
<el-select
|
||||
v-model="tableStore.table.params.exceedingTheLimit"
|
||||
placeholder="请选择谐波次数"
|
||||
clearable
|
||||
style="width: 90px"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in exceedingTheLimitList"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</template>
|
||||
</TableHeader>
|
||||
<my-echart
|
||||
class="tall"
|
||||
:options="echartList"
|
||||
:style="{ width: prop.width, height: `calc(${prop.height} - ${headerHeight}px )` }"
|
||||
/>
|
||||
</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 { useDictData } from '@/stores/dictData'
|
||||
import { ElMessage, ElMessageBox } from 'element-plus'
|
||||
import { getTimeOfTheMonth } from '@/utils/formatTime'
|
||||
import MyEchart from '@/components/echarts/MyEchart.vue'
|
||||
import { useConfig } from '@/stores/config'
|
||||
const prop = defineProps({
|
||||
width: { type: String },
|
||||
height: { type: String },
|
||||
timeKey: { type: String },
|
||||
timeValue: { type: Object }
|
||||
})
|
||||
const config = useConfig()
|
||||
const powerList: any = ref([
|
||||
{
|
||||
label: '1#变压器',
|
||||
value: '1'
|
||||
},
|
||||
{
|
||||
label: '2#变压器',
|
||||
value: '2'
|
||||
}
|
||||
])
|
||||
const exceedingTheLimitList: any = ref([
|
||||
{
|
||||
label: '2次',
|
||||
value: '2'
|
||||
},
|
||||
{
|
||||
label: '3次',
|
||||
value: '3'
|
||||
},
|
||||
{
|
||||
label: '4次',
|
||||
value: '4'
|
||||
},
|
||||
{
|
||||
label: '5次',
|
||||
value: '5'
|
||||
}
|
||||
])
|
||||
const indicatorList: any = ref([
|
||||
{
|
||||
label: '谐波电压总畸变率',
|
||||
value: '1'
|
||||
},
|
||||
{
|
||||
label: '各次谐波电压',
|
||||
value: '2'
|
||||
},
|
||||
{
|
||||
label: '各次谐波电压',
|
||||
value: '3'
|
||||
},
|
||||
{
|
||||
label: '三相电压不平衡',
|
||||
value: '4'
|
||||
}
|
||||
])
|
||||
const echartList = ref({
|
||||
title: {
|
||||
text: '趋势对比'
|
||||
},
|
||||
|
||||
xAxis: {
|
||||
type: 'time',
|
||||
axisLabel: {
|
||||
formatter: {
|
||||
day: '{MM}-{dd}',
|
||||
month: '{MM}',
|
||||
year: '{yyyy}'
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
yAxis: {},
|
||||
grid: {
|
||||
left: '10px',
|
||||
right: '20px'
|
||||
},
|
||||
options: {
|
||||
series: [
|
||||
{
|
||||
// name: '暂降次数',
|
||||
type: 'line',
|
||||
name: '治理前',
|
||||
showSymbol: false,
|
||||
smooth: true,
|
||||
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]
|
||||
],
|
||||
itemStyle: {
|
||||
normal: {
|
||||
//这里是颜色
|
||||
color: function (params: any) {
|
||||
if (params.value[1] == 0 || params.value[1] == 3.14159) {
|
||||
return '#ccc'
|
||||
} else {
|
||||
return config.layout.elementUiPrimary[0]
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
yAxisIndex: 0
|
||||
},
|
||||
{
|
||||
name: '治理后',
|
||||
type: 'line',
|
||||
showSymbol: false,
|
||||
smooth: true,
|
||||
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 headerHeight = ref(57)
|
||||
const selectChange = (showSelect: any, height: any) => {
|
||||
headerHeight.value = height
|
||||
}
|
||||
const tableStore: any = new TableStore({
|
||||
url: '/user-boot/role/selectRoleDetail?id=0',
|
||||
method: 'POST',
|
||||
|
||||
showPage: false,
|
||||
exportName: '主要监测点列表',
|
||||
column: [],
|
||||
beforeSearchFun: () => {
|
||||
tableStore.table.params.searchBeginTime = prop.timeValue?.[0] || getTimeOfTheMonth(prop.timeKey)[0]
|
||||
tableStore.table.params.searchEndTime = prop.timeValue?.[1] || getTimeOfTheMonth(prop.timeKey)[1]
|
||||
},
|
||||
loadCallback: () => {
|
||||
tableStore.table.height = `calc(${prop.height} - 80px)`
|
||||
}
|
||||
})
|
||||
|
||||
const tableRef = ref()
|
||||
provide('tableRef', tableRef)
|
||||
tableStore.table.params.power = '1'
|
||||
tableStore.table.params.indicator = '1'
|
||||
tableStore.table.params.exceedingTheLimit = '1'
|
||||
tableStore.table.params.searchValue = ''
|
||||
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>
|
||||
:deep(.el-select) {
|
||||
min-width: 80px;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user