@@ -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()
})