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-10-14 20:39:01 +08:00
parent d18e4a9bf5
commit 70666d4c86
3 changed files with 121 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -263,7 +263,11 @@
<!-- 实时数据-实时录波组件 -->
<recordWoves v-if="!realTimeFlag && sonTab == 0"></recordWoves>
<!-- 实时数据-实时趋势组件 -->
<realTrend v-show="!realTimeFlag && sonTab == 1" ref="realTrendRef"></realTrend>
<realTrend
v-show="!realTimeFlag && sonTab == 1"
ref="realTrendRef"
@changeTrendType="changeTrendType"
></realTrend>
<!-- 实时数据-谐波频谱组件 -->
<harmonicSpectrum
v-show="!realTimeFlag && sonTab == 2"
@@ -372,26 +376,38 @@ const handleRecordWaves = () => {
const realTrendRef = ref()
//谐波频谱
const harmonicSpectrumRef = ref()
const changeTrendType = (val: any) => {
activeTrendName.value = val * 1
handleTrend()
}
//实时趋势
const handleTrend = () => {
const activeTrendName: any = ref(0)
const handleTrend = async () => {
realTimeFlag.value = false
sonTab.value = 1
clearInterval(timer.value)
clearInterval(realDataTimer.value)
getHarmRealData(lineId.value, 0).then((res: any) => {
await getHarmRealData(lineId.value, activeTrendName.value).then((res: any) => {
if (res.code == 'A0000') {
ElMessage.success('装置应答成功')
mqttRef.value.on('message', (topic: any, message: any) => {
// console.log('mqtt接收到消息', message,topic)
console.log('mqtt接收到消息', JSON.parse(JSON.stringify(JSON.parse(new TextDecoder().decode(message)))))
let obj = JSON.parse(JSON.stringify(JSON.parse(new TextDecoder().decode(message))))
let obj = JSON.parse(JSON.stringify(JSON.parse(new TextDecoder().decode(message)))) || {}
realTrendRef.value && realTrendRef.value.setRealTrendData(obj)
})
} else {
ElMessage.success('装置应答失败')
}
})
getOverLimitData(lineId.value).then((res: any) => {
await getOverLimitData(lineId.value).then((res: any) => {
console.log(res, '获取国标限制')
if(res.code=='A0000'){
realTrendRef.value && realTrendRef.value.setOverLimitData(res.data)
}
})
realTrendRef.value && realTrendRef.value.open({ devId: deviceId.value, lineId: lineId.value })
realTrendRef.value &&
realTrendRef.value.open({ devId: deviceId.value, lineId: lineId.value, activeTrendName: activeTrendName.value })
}
//谐波频谱
const handleHarmonicSpectrum = () => {
@@ -607,7 +623,11 @@ const handleClick = async (tab?: any) => {
//新的实时数据
//1.调用接口 mqtt推送数据
await getBasicRealData(lineId.value).then((res: any) => {
console.log(res, '获取基础实时数据')
if (res.code == 'A0000') {
ElMessage.success('装置应答成功')
} else {
ElMessage.success('装置应答失败')
}
})
//2.建立mqtt通讯
@@ -629,6 +649,7 @@ const handleClick = async (tab?: any) => {
})
mqttRef.value.on('message', (topic: any, message: any) => {
mqttMessage.value = {}
// console.log('mqtt接收到消息', message,topic)
console.log('mqtt接收到消息', JSON.parse(JSON.stringify(JSON.parse(new TextDecoder().decode(message)))))
let obj = JSON.parse(JSON.stringify(JSON.parse(new TextDecoder().decode(message))))

136
src/views/govern/device/control/tabs/components/realtrend.vue
View File

@@ -1,9 +1,9 @@
<!-- 实时数据 - 实时趋势 -->
<template>
<div class="realtrend">
<div class="realtrend" v-loading="loading">
<el-tabs type="border-card" v-model="activeName" @tab-click="handleClick">
<el-tab-pane v-for="(item, index) in tabsList" :label="item.groupName" :name="index" :key="index">
<div v-loading="loading">
<div>
<div class="realtrend_top">
<!-- <div class="thead">
<ul v-for="(table, tableIndex) in newTableList" :key="tableIndex">
@@ -21,26 +21,23 @@
</span>
</ul>
</div> -->
<div class="realtrend_table">
<div class="realtrend_table" v-if="Object.keys(tableData).length != 0">
<div class="thead_left">
<p>次数</p>
<p>{{ item.groupName }}</p>
</div>
<div class="thead_right">
<div class="right_cell" v-for="(value, key, index) in tableData" :key="index">
<p style="color: red; margin: 0 10px">
<span style="color: green">
{{ String(key).replace('data', ' ') }}
</span>
<p>
<span>{{ String(key).replace('data', ' ') }}次</span>
</p>
<p style="color: red; margin: 0 10px">
<p>
<span
v-if="
String(key).includes('data') &&
String(key) != 'dataLevel' &&
String(key) != 'dataTime'
"
style="color: green"
>
{{ value }}
</span>
@@ -49,18 +46,19 @@
</div>
</div>
</div>
<div class="tab_info">
<div class="tab_info" v-if="Object.keys(tableData).length != 0">
<div class="charts">
<MyEchart ref="barCharts" :options="echartsData"></MyEchart>
</div>
</div>
<el-empty v-else style="margin: 0 auto" />
</div>
</el-tab-pane>
</el-tabs>
</div>
</template>
<script lang="ts" setup>
import { ref, onMounted, reactive, nextTick } from 'vue'
import { ref, onMounted, reactive, nextTick, defineEmits } from 'vue'
import { VxeGridProps, VxeGridPropTypes } from 'vxe-table'
import { defaultAttribute } from '@/components/table/defaultAttribute'
import MyEchart from '@/components/echarts/MyEchart.vue'
@@ -68,7 +66,7 @@ import { Platform, TrendCharts, DataLine } from '@element-plus/icons-vue'
import { getDeviceTrendDataGroup, getDeviceTrendData } from '@/api/cs-device-boot/EquipmentDelivery.ts'
import Index from '@/components/wangEditor/index.vue'
const activeName = ref(0)
const emit = defineEmits(['changeTrendType'])
const tableList: any = []
interface RowVO {
[key: string]: any
@@ -91,23 +89,23 @@ const myColumns: any = ref([
// { field: 'value', title: '谐波电压含有率(%)' }
])
const yAxisUnit: any = ref('')
const myData = tableList
const tabsList = ref([])
//接收参数
const params = ref({})
const open = (val: any) => {
//获取指标tab
loading.value = true
getDeviceTrendDataGroup().then(res => {
tabsList.value = res.data
if (tabsList.value.length != 0) {
// activeName.value = tabsList.value[0]?.id
activeName.value = 0
activeName.value = val.activeTrendName || 0
}
params.value = { groupId: tabsList.value[activeName.value]?.id, ...val }
findRealTrendDataByGroupId(params.value)
loading.value = false
})
init()
return
}
const newTableList: any = ref([])
@@ -117,7 +115,7 @@ const loading: any = ref(false)
const chartsData: any = ref([])
const chartsYxiasData: any = ref([])
const findRealTrendDataByGroupId = (obj: any) => {
loading.value = true
return
chartsData.value = []
chartsYxiasData.value = []
getDeviceTrendData(obj).then(res => {
@@ -161,7 +159,6 @@ const findRealTrendDataByGroupId = (obj: any) => {
if (item.list.length != 0) {
const maxCount1 = Math.max(...countList.map((item: any) => item.count))
const maxCount2 = Math.max(...item.list.map((item: any) => item.count))
console.log(maxCount2, maxCount1)
if (maxCount2 < maxCount1) {
for (let i = 0; i < maxCount1 - maxCount2; i++) {
item.list.push({
@@ -215,6 +212,24 @@ const barCharts = ref()
//加载echarts
const init = () => {
console.log(tableData.value, '++++++++')
let trendData: any = []
for (let key in tableData.value) {
console.log(key, ',,,,,')
trendData.push({
name: key,
value: tableData.value[key],
count: String(key).replace('data', '')
})
}
let gbData: any = []
for (let key in limitData.value) {
gbData.push({
name: key,
value: limitData.value[key]
})
}
console.log(trendData, 'mmmmm', gbData)
let xAxisList: any = []
chartsData.value.map((item: any, index: any) => {
chartsYxiasData.value.map((vv: any, vvs: any) => {
@@ -274,7 +289,9 @@ const init = () => {
},
xAxis: {
name: '次数',
data: xAxisList,
data: trendData.map((item: any) => {
return item.count+'次'
}),
axisLine: {
show: true, //隐藏X轴轴线
lineStyle: {
@@ -297,7 +314,7 @@ const init = () => {
yAxis: [
{
type: 'value',
name: chartsData?.value[0]?.unit ? '单位(' + chartsData?.value[0]?.unit + ')' : '',
name: '',
splitLine: {
show: false
},
@@ -315,22 +332,19 @@ const init = () => {
series: []
}
}
let list: any = []
list = []
chartsYxiasData.value.map((item: any) => {
// console.log(item.gbList, 'guobialist340')
if (item.gbList.length != 0) {
list.push({ phase: item.phase, title: '国标限值', list: item.gbList })
}
if (item.phaseList.length != 0) {
list.push({ phase: item.phase, title: item.title, list: item.phaseList })
}
let list: any = [
gbData.map((item: any) => {
return item.value
}),
trendData.map((item: any) => {
return item.value
})
const colorList = ['#0e8780', '#FFCC00', '#009900', '#CC0000']
]
let legendList = ['国标限值', tabsList.value[activeName.value]?.groupName]
echartsData.value.options.legend.data = legendList
list.map((item: any, index: any) => {
echartsData.value.options.legend.data.push(item.title)
echartsData.value.options.series.push({
name: item.title,
name: legendList[index],
type: 'bar',
barMaxWidth: 16, //使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用
itemStyle: {
@@ -340,39 +354,50 @@ const init = () => {
// }e
color: colorList[index]
},
data: item.list
data: item
})
})
// nextTick(() => {
if (barCharts.value) {
console.log(barCharts.value, '+++++++++++++++++++#@!')
barCharts.value[activeName.value]?.initChart()
}
// })
return
}
const handleClick = (tab: any, event: any) => {
params.value.groupId = tabsList.value[tab.index].id
findRealTrendDataByGroupId(params.value)
emit('changeTrendType', tab.index)
activeName.value = tab.index
init()
}
//获取mqtt传送的实时数据
const mqttMessage: any = ref()
const tableData: any = ref({})
const colorList = ['#0e8780', '#FFCC00', '#009900', '#CC0000']
const setRealTrendData = (val: any) => {
console.log(val, '7777777777773555')
tableData.value = {}
mqttMessage.value = val
loading.value = true
for (let key in val) {
if (String(key).includes('data') && String(key) != 'dataLevel' && String(key) != 'dataTime') {
console.log(val[key], '0000000')
tableData.value[key] = val[key]
delete tableData.value.data1
}
}
loading.value = false
init()
}
//获取国标限值
const limitData: any = ref()
const setOverLimitData = (val: any) => {
limitData.value = {}
for (let key in val) {
if (String(key).includes('uharm')) {
limitData.value[key] = val[key]
}
}
console.log(tableData.value, 'kkkkjjjjjsssslllmmmmmssdddd')
}
onMounted(() => {})
defineExpose({ open, setRealTrendData })
defineExpose({ open, setRealTrendData, setOverLimitData })
</script>
<style lang="scss" scoped>
.realtrend {
@@ -462,23 +487,34 @@ defineExpose({ open, setRealTrendData })
.realtrend_table {
width: 100%;
height: 100px;
height: auto;
max-height: 150px;
display: flex;
border: 2px solid green;
border: 2px solid #eee;
cursor: pointer;
.thead_left {
width: 120px;
width: 150px;
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
line-height: 50px;
font-weight: 800;
p {
width: 100%;
height: 100%;
text-align: center;
border: 1px solid #eee;
line-height: 50px;
margin: 0 !important;
}
}
.thead_right {
flex: 1;
align-items: center;
overflow-x: auto;
border: 2px solid yellowgreen;
overflow-y: hidden;
display: flex;
.right_cell {
width: 100%;
@@ -486,9 +522,15 @@ defineExpose({ open, setRealTrendData })
flex-direction: column;
p {
flex: none;
width: 40px;
width: 90px;
height: 100%;
text-align: center;
border: 1px solid #eee;
line-height: 50px;
margin: 0 !important;
}
p:nth-child(1) {
font-weight: 800;
}
}
}

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

@@ -500,7 +500,7 @@ const init = () => {
startAngle: 180,
endAngle: 0,
min: 0,
max: 300,
max: 450,
radius: '150%',
center: ['55%', '76%'],
splitNumber: 3, //刻度数量