实时数据-基波电压/电流相角
This commit is contained in:
zhujiyan
@@ -20,8 +20,8 @@
|
||||
<div class="right_charts"><MyEchart ref="pieChart6" :options="echartsDataA3"></MyEchart></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="view_bot">
|
||||
<div class="view_bot_tables" v-loading="loading">
|
||||
<div class="view_bot" v-loading="loading">
|
||||
<div class="view_bot_tables">
|
||||
<!-- 表格数据 -->
|
||||
<div v-if="tableData.length != 0">
|
||||
<!-- div设计table -->
|
||||
@@ -118,68 +118,8 @@ const echartsDataV3: any = ref({})
|
||||
const echartsDataA1: any = ref({})
|
||||
const echartsDataA2: any = ref({})
|
||||
const echartsDataA3: any = ref({})
|
||||
//渲染echarts
|
||||
const init = () => {
|
||||
echartsData.value = {
|
||||
options: {
|
||||
tooltip: {},
|
||||
series: [
|
||||
{
|
||||
type: 'gauge',
|
||||
startAngle: 180,
|
||||
endAngle: 0,
|
||||
min: 0,
|
||||
max: 300,
|
||||
radius: '150%',
|
||||
center: ['55%', '76%'],
|
||||
splitNumber: 3, //刻度数量
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
width: 10,
|
||||
shadowBlur: 0,
|
||||
color: [
|
||||
[0.3, '#91c7a1'],
|
||||
[0.7, '#63869e'],
|
||||
[1, '#002B6A']
|
||||
]
|
||||
}
|
||||
},
|
||||
|
||||
itemStyle: {
|
||||
normal: {
|
||||
shadowBlur: 10
|
||||
}
|
||||
},
|
||||
//标题位置
|
||||
title: {
|
||||
fontWeight: 'bolder',
|
||||
fontSize: 12,
|
||||
offsetCenter: ['-130%', '-20%']
|
||||
},
|
||||
//数值位置
|
||||
detail: {
|
||||
fontSize: 12,
|
||||
formatter: '{value}',
|
||||
offsetCenter: ['0%', '25%']
|
||||
},
|
||||
data: [
|
||||
{
|
||||
value: 15,
|
||||
name: 'A相'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
echartsDataV1.value = echartsData.value
|
||||
echartsDataV2.value = echartsData.value
|
||||
echartsDataV3.value = echartsData.value
|
||||
echartsDataA1.value = echartsData.value
|
||||
echartsDataA2.value = echartsData.value
|
||||
echartsDataA3.value = echartsData.value
|
||||
|
||||
//渲染中相角图
|
||||
const initRadioCharts = () => {
|
||||
//中间指针图
|
||||
echartsData1.value = {
|
||||
options: {
|
||||
@@ -195,6 +135,7 @@ const init = () => {
|
||||
},
|
||||
legend: [],
|
||||
series: [
|
||||
// 外圈电压 内圈电流
|
||||
{
|
||||
name: '基波电流相位',
|
||||
type: 'gauge',
|
||||
@@ -271,21 +212,21 @@ const init = () => {
|
||||
},
|
||||
data: [
|
||||
{
|
||||
value: 40,
|
||||
value: 180,
|
||||
name: 'A相',
|
||||
itemStyle: {
|
||||
color: '#A5292A'
|
||||
}
|
||||
},
|
||||
{
|
||||
value: 10,
|
||||
value: 90,
|
||||
name: 'B相',
|
||||
itemStyle: {
|
||||
color: '#DAA521'
|
||||
}
|
||||
},
|
||||
{
|
||||
value: 20,
|
||||
value: 30,
|
||||
name: 'C相',
|
||||
itemStyle: {
|
||||
color: '#2F8A57'
|
||||
@@ -369,21 +310,21 @@ const init = () => {
|
||||
},
|
||||
data: [
|
||||
{
|
||||
value: 140,
|
||||
value: 160,
|
||||
name: 'A相',
|
||||
itemStyle: {
|
||||
color: '#A5292A'
|
||||
}
|
||||
},
|
||||
{
|
||||
value: 110,
|
||||
value:70,
|
||||
name: 'B相',
|
||||
itemStyle: {
|
||||
color: '#DAA521'
|
||||
}
|
||||
},
|
||||
{
|
||||
value: 120,
|
||||
value: 40,
|
||||
name: 'C相',
|
||||
itemStyle: {
|
||||
color: '#2F8A57'
|
||||
@@ -394,7 +335,22 @@ const init = () => {
|
||||
]
|
||||
}
|
||||
}
|
||||
|
||||
//电流相角
|
||||
echartsData1.value.options.series[0].data.map((item: any) => {
|
||||
iRadioList.value.map((vv: any) => {
|
||||
if (item.name.includes(vv.phase)) {
|
||||
item.value = vv.statisticalData
|
||||
}
|
||||
})
|
||||
})
|
||||
//电压相角
|
||||
echartsData1.value.options.series[1].data.map((item: any) => {
|
||||
vRadioList.value.map((vv: any) => {
|
||||
if (item.name.includes(vv.phase)) {
|
||||
item.value = vv.statisticalData
|
||||
}
|
||||
})
|
||||
})
|
||||
for (var i = 0; i < echartsData1.value.options.series.length; i++) {
|
||||
echartsData1.value.options.series[i].type = 'gauge'
|
||||
echartsData1.value.options.series[i].startAngle = 90
|
||||
@@ -402,6 +358,68 @@ const init = () => {
|
||||
echartsData1.value.options.series[i].center = ['50%', '50%']
|
||||
}
|
||||
}
|
||||
//渲染echarts
|
||||
const init = () => {
|
||||
echartsData.value = {
|
||||
options: {
|
||||
tooltip: {},
|
||||
series: [
|
||||
{
|
||||
type: 'gauge',
|
||||
startAngle: 180,
|
||||
endAngle: 0,
|
||||
min: 0,
|
||||
max: 300,
|
||||
radius: '150%',
|
||||
center: ['55%', '76%'],
|
||||
splitNumber: 3, //刻度数量
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
width: 10,
|
||||
shadowBlur: 0,
|
||||
color: [
|
||||
[0.3, '#91c7a1'],
|
||||
[0.7, '#63869e'],
|
||||
[1, '#002B6A']
|
||||
]
|
||||
}
|
||||
},
|
||||
|
||||
itemStyle: {
|
||||
normal: {
|
||||
shadowBlur: 10
|
||||
}
|
||||
},
|
||||
//标题位置
|
||||
title: {
|
||||
fontWeight: 'bolder',
|
||||
fontSize: 12,
|
||||
offsetCenter: ['-130%', '-20%']
|
||||
},
|
||||
//数值位置
|
||||
detail: {
|
||||
fontSize: 12,
|
||||
formatter: '{value}',
|
||||
offsetCenter: ['0%', '25%']
|
||||
},
|
||||
data: [
|
||||
{
|
||||
value: 15,
|
||||
name: 'A相'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
echartsDataV1.value = echartsData.value
|
||||
echartsDataV2.value = echartsData.value
|
||||
echartsDataV3.value = echartsData.value
|
||||
echartsDataA1.value = echartsData.value
|
||||
echartsDataA2.value = echartsData.value
|
||||
echartsDataA3.value = echartsData.value
|
||||
}
|
||||
//接收父组件传递的table数据
|
||||
const dataList: any = ref([])
|
||||
const listV: any = ref([])
|
||||
@@ -438,8 +456,24 @@ const getTableData = (list: any) => {
|
||||
loading.value = false
|
||||
})
|
||||
}
|
||||
//电流相角数组&电压相角数组
|
||||
const iRadioList: any = ref([]),
|
||||
vRadioList: any = ref([])
|
||||
//获取实时数据
|
||||
const getRealTimeData = (val: any) => {
|
||||
iRadioList.value = []
|
||||
vRadioList.value = []
|
||||
val.map((item: any) => {
|
||||
//基波电流相角
|
||||
if (item.statisticalName == 'Pq_FundIAng') {
|
||||
iRadioList.value.push(item)
|
||||
}
|
||||
//相电压基波有效值相角
|
||||
if (item.statisticalName == 'Pq_FundUAng') {
|
||||
vRadioList.value.push(item)
|
||||
}
|
||||
})
|
||||
initRadioCharts()
|
||||
loading.value = true
|
||||
if (val.length != 0) {
|
||||
getColumns()
|
||||
@@ -533,6 +567,7 @@ const getRealTimeData = (val: any) => {
|
||||
defineExpose({ getRealTimeData })
|
||||
onMounted(() => {
|
||||
init()
|
||||
initRadioCharts()
|
||||
})
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
@@ -668,12 +703,11 @@ onMounted(() => {
|
||||
}
|
||||
}
|
||||
}
|
||||
.table_container:hover{
|
||||
.table_container:hover {
|
||||
.table {
|
||||
.tbody{
|
||||
.tbody {
|
||||
background: #f4f6f9;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user