273 lines
9.1 KiB
Vue
273 lines
9.1 KiB
Vue
<template>
|
||
<!-- 稳态合格率统计图 -->
|
||
<my-echart :style="{ width: prop.width, height: prop.height }" :options="options" />
|
||
</template>
|
||
<script setup lang="ts">
|
||
import { ref, onMounted, provide, watch } from 'vue'
|
||
import TableStore from '@/utils/tableStore'
|
||
import Table from '@/components/table/index.vue'
|
||
import MyEchart from '@/components/echarts/MyEchart.vue'
|
||
import TableHeader from '@/components/table/header/index.vue'
|
||
import { useDictData } from '@/stores/dictData'
|
||
import * as echarts from 'echarts/core'
|
||
import { getTimeOfTheMonth } from '@/utils/formatTime'
|
||
const prop = defineProps({
|
||
width: { type: String },
|
||
height: { type: String },
|
||
timeKey: { type: String }
|
||
})
|
||
const dictData = useDictData()
|
||
const options = ref({})
|
||
const classificationData = dictData.getBasicData('Statistical_Type', ['Report_Type'])
|
||
|
||
const itemStyle = {
|
||
normal: {
|
||
// 随机显示
|
||
//color:function(d){return "#"+Math.floor(Math.random()*(256*256*256-1)).toString(16);}
|
||
|
||
// 定制显示（按顺序）
|
||
color: function (params) {
|
||
if (params.value >= 90) {
|
||
return new echarts.graphic.LinearGradient(
|
||
0,
|
||
1,
|
||
0,
|
||
0,
|
||
[
|
||
{
|
||
offset: 1,
|
||
color: '#339966'
|
||
}
|
||
],
|
||
false
|
||
)
|
||
} else if (params.value >= 60 && params.value <= 90) {
|
||
return new echarts.graphic.LinearGradient(
|
||
0,
|
||
1,
|
||
0,
|
||
0,
|
||
[
|
||
{
|
||
offset: 1,
|
||
color: '#FFCC33'
|
||
}
|
||
],
|
||
false
|
||
)
|
||
} else if (params.value <= 60 && params.value !== 3.14159) {
|
||
return new echarts.graphic.LinearGradient(
|
||
0,
|
||
1,
|
||
0,
|
||
0,
|
||
[
|
||
{
|
||
offset: 1,
|
||
color: '#A52a2a'
|
||
}
|
||
],
|
||
false
|
||
)
|
||
} else if (params.value == 3.14159) {
|
||
return new echarts.graphic.LinearGradient(
|
||
0,
|
||
1,
|
||
0,
|
||
0,
|
||
[
|
||
{
|
||
offset: 1,
|
||
color: '#cccccc'
|
||
}
|
||
],
|
||
false
|
||
)
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
const tableStore = new TableStore({
|
||
url: '/harmonic-boot/steadyQualify/getSteadyQualifyCensus',
|
||
showPage: false,
|
||
method: 'POST',
|
||
column: [],
|
||
beforeSearchFun: () => {
|
||
tableStore.table.params.searchBeginTime = getTimeOfTheMonth(prop.timeKey)[0]
|
||
tableStore.table.params.searchEndTime = getTimeOfTheMonth(prop.timeKey)[1]
|
||
},
|
||
loadCallback: () => {
|
||
let code = tableStore.table.params.statisticalType.code
|
||
let title = '',
|
||
titleX = ''
|
||
if (code == 'Power_Network') {
|
||
title = '区域'
|
||
titleX = '区域'
|
||
} else if (code == 'Manufacturer') {
|
||
title = '终端厂家'
|
||
titleX = '终端\n厂家'
|
||
} else if (code == 'Voltage_Level') {
|
||
title = '电压等级'
|
||
titleX = '电压\n等级'
|
||
} else if (code == 'Load_Type') {
|
||
title = '干扰源类型'
|
||
titleX = '干扰\n源类型'
|
||
} else if (code == 'Report_Type') {
|
||
title = '上报类型'
|
||
titleX = '上报\n类型'
|
||
}
|
||
options.value = {
|
||
title: {
|
||
text: title
|
||
},
|
||
legend: {
|
||
show: false
|
||
},
|
||
|
||
tooltip: {
|
||
formatter: function (params: any) {
|
||
let tips = `<strong>${params[0]?.name}</strong></br>` // 标题加粗
|
||
params.forEach((item: any) => {
|
||
const value = item.value === 3.14159 ? '暂无数据' : item.value // 处理特殊值
|
||
tips += `<div style=" display: flex;justify-content: space-between;">
|
||
<span>${item.marker}
|
||
${item.seriesName}:
|
||
</span> ${value}
|
||
</div>` // 统一格式
|
||
})
|
||
return tips
|
||
}
|
||
},
|
||
|
||
xAxis: {
|
||
name: titleX,
|
||
data: tableStore.table.data.type
|
||
},
|
||
yAxis: {
|
||
name: '%',
|
||
max: 100
|
||
},
|
||
series: [
|
||
{
|
||
name: '频率偏差',
|
||
type: 'bar',
|
||
itemStyle: itemStyle,
|
||
data: tableStore.table.data.freqOffset,
|
||
markLine: {
|
||
silent: false,
|
||
symbol: 'circle',
|
||
data: [
|
||
{
|
||
name: '',
|
||
yAxis: 100,
|
||
lineStyle: {
|
||
color: '#339966'
|
||
},
|
||
label: {
|
||
// position: "middle",
|
||
formatter: '{b}',
|
||
textStyle: {
|
||
color: '#339966'
|
||
}
|
||
}
|
||
},
|
||
{
|
||
name: '',
|
||
yAxis: 90,
|
||
lineStyle: {
|
||
color: '#FFCC33'
|
||
},
|
||
label: {
|
||
// position: "middle",
|
||
formatter: '{b}',
|
||
textStyle: {
|
||
color: '#FFCC33'
|
||
}
|
||
}
|
||
},
|
||
{
|
||
name: '',
|
||
yAxis: 60,
|
||
lineStyle: {
|
||
color: '#A52a2a'
|
||
},
|
||
label: {
|
||
// position: "middle",
|
||
formatter: '{b}',
|
||
textStyle: {
|
||
color: '#A52a2a'
|
||
}
|
||
}
|
||
}
|
||
]
|
||
}
|
||
},
|
||
{
|
||
name: '闪变',
|
||
type: 'bar',
|
||
itemStyle: itemStyle,
|
||
data: tableStore.table.data.flicker
|
||
},
|
||
{
|
||
name: '三相电压不平衡',
|
||
type: 'bar',
|
||
itemStyle: itemStyle,
|
||
data: tableStore.table.data.voltageUnbalance
|
||
},
|
||
{
|
||
name: '谐波电压',
|
||
type: 'bar',
|
||
itemStyle: itemStyle,
|
||
data: tableStore.table.data.harmonicVoltage
|
||
},
|
||
{
|
||
name: '电压偏差',
|
||
type: 'bar',
|
||
itemStyle: itemStyle,
|
||
data: tableStore.table.data.voltageOffset
|
||
},
|
||
{
|
||
name: '谐波电流',
|
||
type: 'bar',
|
||
itemStyle: itemStyle,
|
||
data: tableStore.table.data.harmonicCurrent
|
||
},
|
||
{
|
||
name: '负序电流',
|
||
type: 'bar',
|
||
itemStyle: itemStyle,
|
||
data: tableStore.table.data.negativeCurrent
|
||
},
|
||
{
|
||
name: '间谐波电压含有率',
|
||
type: 'bar',
|
||
itemStyle: itemStyle,
|
||
data: tableStore.table.data.interHarmonic
|
||
}
|
||
]
|
||
}
|
||
}
|
||
})
|
||
tableStore.table.params.deptIndex = dictData.state.area[0].id
|
||
|
||
tableStore.table.params.statisticalType = classificationData[0]
|
||
tableStore.table.params.scale = []
|
||
tableStore.table.params.manufacturer = []
|
||
tableStore.table.params.loadType = []
|
||
tableStore.table.params.serverName = 'harmonicBoot'
|
||
tableStore.table.params.powerFlag = 0
|
||
provide('tableStore', tableStore)
|
||
|
||
onMounted(() => {
|
||
tableStore.index()
|
||
})
|
||
watch(
|
||
() => prop.timeKey,
|
||
val => {
|
||
tableStore.index()
|
||
}
|
||
)
|
||
</script>
|
||
<style scoped lang="scss"></style>
|