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

联调准实时数据

Browse Source
This commit is contained in:
GGJ
2024-11-20 16:20:15 +08:00
parent 876c29bdaf
commit affaafea83
5 changed files with 207 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -82,10 +82,17 @@
<el-form-item label="日期" v-show="dataSet.indexOf('_history') != -1">
<DatePicker ref="datePickerRef"></DatePicker>
</el-form-item>
<el-form-item label="指标" v-show="!realTimeFlag">
<el-form-item label="数据类型" v-if="dataSet.indexOf('_history') == -1">
<el-select v-model="formInline.targetType">
<el-option v-for="item in queryList" :key="item.id" :label="item.name"
:value="item.id" />
</el-select>
</el-form-item>
<!-- <el-form-item label="指标" v-show="!realTimeFlag">
<el-input style="width: 160px" v-model="formInline.searchValue" autocomplete="off" clearable
placeholder="请输入关键词"></el-input>
</el-form-item>
</el-form-item> -->
<el-form-item label="值类型">
<el-select style="min-width: 120px !important" v-model="formInline.dataLevel"
:disabled="dataLevel == 'Primary' && deviceType == '0'">
@@ -139,10 +146,16 @@
tableData.length != 0
">
<div class="mb5 mt5" v-if="dataSet.indexOf('_history') == -1">
统计时间：{{ tableData[0].children.length ? tableData[0].children[0].time : '' }}
统计时间：{{ tableData[0]?.time || '' }}
</div>
<nearRealTimeData ref="nearRealTimeDataRef" v-if="dataSet.indexOf('_history') == -1"
/>
<!-- 循环渲染的card 最新数据/历史数据显示 -->
<div class="content" v-if="tableData.length != 0 && !tableLoading"
<div class="content"
v-if="tableData.length != 0 && !tableLoading && dataSet.indexOf('_history') != -1"
:style="{ height: tableHeightBox }">
<el-card class="box-card" :class="dataSet.indexOf('_history') == -1 ? 'box-card-new' : ''"
@@ -154,7 +167,71 @@
style="font-size: 26px; cursor: pointer; color: #fff"></Icon>
</div>
</template>
<!-- 模块数据 -->
<div class="box-card-content" v-if="dataSet.indexOf('_history') == -1">
<div class="box-card-div">
<div v-for="(child, childIndex) in item.children" :key="childIndex">
{{ child.anotherName }}:
{{ child.dataValue === 3.1415926 ? '暂无数据' : child.dataValue }}
</div>
</div>
</div>
<div v-else-if="item.children.length" class="box-card-div">
<div style="display: flex; align-items: center">
<el-tag effect="dark" type="danger" style="width: 40px; text-align: center"
class="mr10">
MAX
</el-tag>
{{
item.children[0].maxValue === 3.1415956 ||
typeof item.children[0].maxValue != 'number'
? '暂无数据'
: item.children[0].maxValue
}}
</div>
<div style="display: flex; align-items: center">
<el-tag effect="dark" type="success" style="width: 40px; text-align: center"
class="mr10">
AVG
</el-tag>
{{
item.children[0].avgValue === 3.1415956 ||
typeof item.children[0].avgValue != 'number'
? '暂无数据'
: item.children[0].avgValue
}}
</div>
<div style="display: flex; align-items: center">
<el-tag effect="dark" type="warning" style="width: 40px; text-align: center"
class="mr10">
MIN
</el-tag>
{{
item.children[0].minValue === 3.1415956 ||
typeof item.children[0].minValue != 'number'
? '暂无数据'
: item.children[0].minValue
}}
</div>
</div>
</el-card>
<el-empty description="暂无数据" v-if="tableData.length === 0"></el-empty>
</div>
<!-- <div class="content" v-if="tableData.length != 0 && !tableLoading"
:style="{ height: tableHeightBox }">
<el-card class="box-card" :class="dataSet.indexOf('_history') == -1 ? 'box-card-new' : ''"
v-for="(item, index) in tableData" :key="index">
<template #header>
<div class="clearfix">
<span style="flex: 1">{{ item.name }}</span>
<Icon name="el-icon-TrendCharts" class="ml10" @click="getDeviceDataTrend(item)"
style="font-size: 26px; cursor: pointer; color: #fff"></Icon>
</div>
</template>
<div class="box-card-content" v-if="dataSet.indexOf('_history') == -1">
<div class="box-card-div">
<div v-for="(child, childIndex) in item.children" :key="childIndex">
@@ -206,9 +283,9 @@
</div>
</el-card>
<el-empty description="暂无数据" v-if="tableData.length === 0"></el-empty>
</div>
</div> -->
</div>
<el-pagination v-if="
<!-- <el-pagination v-if="
tableData.length &&
dataSet.indexOf('_trenddata') == -1 &&
dataSet.indexOf('_realtimedata') == -1 &&
@@ -216,7 +293,7 @@
" background class="mr2 mt10" style="float: right" @size-change="handleSizeChange"
@current-change="pageChange" :current-page="formInline.pageNum" :page-sizes="[20, 30, 40, 50, 100]"
:page-size="formInline.pageSize" layout="total, sizes, prev, pager, next, jumper"
:total="formInline.total"></el-pagination>
:total="formInline.total"></el-pagination> -->
<!-- 趋势数据 -->
<div style="height: calc(100vh - 340px)" v-if="dataSet.indexOf('_trenddata') != -1">
@@ -271,9 +348,11 @@ import {
getDeviceData,
getBasicRealData,
getHarmRealData,
getOverLimitData
getOverLimitData,
queryDictType,
} from '@/api/cs-device-boot/EquipmentDelivery'
import { deviceHisData, deviceRtData } from '@/api/cs-device-boot/csGroup'
import { deviceHisData, deviceRtData, realTimeData } from '@/api/cs-device-boot/csGroup'
import { ref, reactive, onMounted, onUnmounted, inject, nextTick, onBeforeUnmount } from 'vue'
import { ElMessage } from 'element-plus'
import DatePicker from '@/components/form/datePicker/index.vue'
@@ -284,6 +363,7 @@ import harmonicSpectrum from './tabs/components/harmonicSpectrum.vue' //实时
import recordWoves from './tabs/components/recordwoves.vue' //实时数据-实时录波子页面
import offLineDataImport from './offLineDataImport/index.vue'
import Event from './tabs/event.vue'
import nearRealTimeData from './nearRealTimeData.vue'
import { useRouter } from 'vue-router'
import TableHeader from '@/components/table/header/index.vue'
import { useAdminInfo } from '@/stores/adminInfo'
@@ -300,11 +380,12 @@ const tableLoading = ref(false)
const getGroupLoading = ref(false)
const deviceData = ref<any>(null)
const dataSet = ref('')
const nearRealTimeDataRef = ref()
const devTypeOptions = ref([])
const devModelOptions = ref([])
const tableData = ref<any[]>([])
const tableHeight = mainHeight(330).height
const tableHeightBox = mainHeight(365).height
const tableHeight = mainHeight(290).height
const tableHeightBox = mainHeight(310).height
const mangePopup = ref()
const datePickerRef = ref()
const formInline = reactive({
@@ -316,8 +397,10 @@ const formInline = reactive({
endTime: '',
id: '',
lineId: '',
targetType: '',
dataLevel: 'Secondary'
})
const detail = ref<any>(null)
//是否显示实时数据默认内容
const realTimeFlag = ref(true)
@@ -339,6 +422,7 @@ const changeTrendType = (val: any) => {
const activeTrendName: any = ref(0)
const trendTimer: any = ref()
const trendDataTime: any = ref()
//谐波频谱方法
const handleTrend = async () => {
realTimeFlag.value = false
@@ -493,6 +577,7 @@ const nodeClick = async (e: anyObj) => {
formInline.lineId = e.level == 3 ? e.id : e.children[0].id
await getDeviceData(e.level == 3 ? e.pid : e.id, 'history', e.level == 3 ? e.id : e.children[0].id)
.then((res: any) => {
deviceData.value = res.data
formInline.dataLevel = res.data.dataLevel
dataLevel.value = res.data.dataLevel
@@ -504,6 +589,7 @@ const nodeClick = async (e: anyObj) => {
tableData.value = []
loading.value = false
} else {
res.data.dataSetList.forEach((item: any) => {
//历史
if (item.type === 'history') {
@@ -522,6 +608,7 @@ const nodeClick = async (e: anyObj) => {
item.id = item.id + '_event'
}
})
res.data.dataSetList = res.data.dataSetList.filter((item: any) => item.name != '历史统计数据')
//便携式设备默认二次值
// if (deviceType.value == '1') {
// formInline.dataLevel = 'Primary'
@@ -771,6 +858,7 @@ const handleClick = async (tab?: any) => {
realTimeFlag.value = false
//初始化点击tab隐藏子页面
sonTab.value = null
console.log(123, dataSet.value.includes('_history'));
//查询历史指标
if (dataSet.value.includes('_history')) {
@@ -848,12 +936,19 @@ const handleClick = async (tab?: any) => {
//查询当前指标
if (!dataSet.value.includes('_')) {
formInline.id = dataSet.value
await deviceRtData(formInline)
console.log("🚀 ~ handleClick ~ formInline:", formInline)
// await deviceRtData(formInline)
await realTimeData(formInline)
.then((res: any) => {
tableData.value = res.data.records
tableData.value = res.data
formInline.total = res.data.total
tableLoading.value = false
setTimeout(() => { //targetType
nearRealTimeDataRef.value.setData(res.data, queryList.value.filter((item: any) => item.id == formInline.targetType))
}, 500)
setTimeout(() => {
loading.value = false
}, 1500)
})
@@ -913,6 +1008,11 @@ queryByCode('Device_Type').then(res => {
})
})
})
const queryList: any = ref([])
queryDictType().then(res => {
queryList.value = res.data
formInline.targetType = res.data[0].id
})
const echoName = (value: any, arr: any[]) => {
return value ? arr.find(item => item.value == value)?.label : '/'
}