Web/admin-govern
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

实时数据-基波电压/电流相角

Browse Source
This commit is contained in:
zhujiyan
2024-08-01 16:37:24 +08:00
parent d99a2e9395
commit feca54d7ea
2 changed files with 113 additions and 81 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
src/views/govern/device/control/index.vue
View File

@@ -310,7 +310,6 @@ const realTrendRef = ref()
const handleTrend = () => {
realTimeFlag.value = false
sonTab.value = 1
console.log(realTrendRef.value, '++++++')
realTrendRef.value && realTrendRef.value.open({ devId: deviceId.value, lineId: lineId.value })
window.clearInterval(timer.value)
}
@@ -403,14 +402,13 @@ const nodeClick = async (e: anyObj) => {
}
const realTimeRef: any = ref()
const intRealTime = async (val: any) => {
getTabsDataByType(val).then(res => {
await getTabsDataByType(val).then(res => {
realTimeRef.value && realTimeRef.value.getRealTimeData(res.data)
})
timer.value = window.setInterval(() => {
getTabsDataByType(val).then(res => {
timer.value = window.setInterval(async () => {
await getTabsDataByType(val).then(res => {
realTimeRef.value && realTimeRef.value.getRealTimeData(res.data)
})
console.log(timer.value, '定时器时间666666 ')
}, 20000)
}
//趋势数据组件

184
src/views/govern/device/control/tabs/realtime.vue
View File

@@ -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>