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

修改测试bug

Browse Source
This commit is contained in:
GGJ
2024-10-22 15:55:24 +08:00
parent 25ffc10857
commit aed37ba624
4 changed files with 193 additions and 252 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,10 +1,6 @@
<template>
<div
class="default-main device-control"
:style="{ height: pageHeight.height }"
v-loading="loading"
style="position: relative"
>
<div class="default-main device-control" :style="{ height: pageHeight.height }" v-loading="loading"
style="position: relative">
<PointTree @node-click="nodeClick" @init="nodeClick" @pointTypeChange="pointTypeChange"></PointTree>
<div class="device-control-right" v-if="deviceData">
<el-descriptions title="设备基本信息" class="mb10" :column="3" border>
@@ -18,12 +14,8 @@
<el-button v-if="deviceType == '1'" type="primary" icon="el-icon-Monitor" @click="handleaddDevice">
在线补召
</el-button>
<el-button
v-if="deviceType == '1'"
type="primary"
icon="el-icon-Tickets"
@click="handleAnalysisList"
>
<el-button v-if="deviceType == '1'" type="primary" icon="el-icon-Tickets"
@click="handleAnalysisList">
补召日志
</el-button>
</template>
@@ -48,13 +40,8 @@
</el-descriptions-item>
</el-descriptions>
<el-tabs v-model="dataSet" type="border-card" class="device-control-box-card" @tab-click="handleClick">
<el-tab-pane
lazy
:label="item.name"
:name="item.id"
v-for="(item, index) in deviceData.dataSetList"
:key="index"
>
<el-tab-pane lazy :label="item.name" :name="item.id" v-for="(item, index) in deviceData.dataSetList"
:key="index">
<template #label>
<span class="custom-tabs-label">
<el-icon>
@@ -63,59 +50,44 @@
<DataAnalysis v-if="item.name.includes('趋势数据')" />
<Timer v-if="item.name.includes('实时数据')" />
<Monitor v-if="item.name.includes('暂态事件')" />
<Odometer
v-if="
item.name != 'APF模块数据' &&
item.name != '历史APF模块数据' &&
!item.name.includes('历史监测') &&
!item.name.includes('趋势数据') &&
!item.name.includes('实时数据') &&
!item.name.includes('暂态事件')
"
/>
<Histogram
v-if="
item.name != 'APF模块数据' &&
item.name != '历史APF模块数据' &&
item.name.includes('历史监测') &&
!item.name.includes('趋势数据') &&
!item.name.includes('实时数据') &&
!item.name.includes('暂态事件')
"
/>
<Odometer v-if="
item.name != 'APF模块数据' &&
item.name != '历史APF模块数据' &&
!item.name.includes('历史监测') &&
!item.name.includes('趋势数据') &&
!item.name.includes('实时数据') &&
!item.name.includes('暂态事件')
" />
<Histogram v-if="
item.name != 'APF模块数据' &&
item.name != '历史APF模块数据' &&
item.name.includes('历史监测') &&
!item.name.includes('趋势数据') &&
!item.name.includes('实时数据') &&
!item.name.includes('暂态事件')
" />
</el-icon>
<span>{{ item.name }}</span>
</span>
</template>
</el-tab-pane>
<TableHeader
:showSearch="false"
v-if="
(dataSet.indexOf('_trenddata') == -1 &&
dataSet.indexOf('_realtimedata') == -1 &&
dataSet.indexOf('_event') == -1) ||
realTimeFlag
"
>
<TableHeader :showSearch="false" v-if="
(dataSet.indexOf('_trenddata') == -1 &&
dataSet.indexOf('_realtimedata') == -1 &&
dataSet.indexOf('_event') == -1) ||
realTimeFlag
">
<template #select>
<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-input
style="width: 160px"
v-model="formInline.searchValue"
autocomplete="off"
clearable
placeholder="请输入关键词"
></el-input>
<el-input style="width: 160px" v-model="formInline.searchValue" autocomplete="off" clearable
placeholder="请输入关键词"></el-input>
</el-form-item>
<el-form-item label="值类型">
<el-select
style="min-width: 120px !important"
v-model="formInline.dataLevel"
:disabled="dataLevel == 'Primary' && deviceType == '0'"
>
<el-select style="min-width: 120px !important" v-model="formInline.dataLevel"
:disabled="dataLevel == 'Primary' && deviceType == '0'">
<el-option value="Primary" label="一次值"></el-option>
<el-option value="Secondary" label="二次值"></el-option>
</el-select>
@@ -129,48 +101,32 @@
<el-button type="primary" v-if="realTimeFlag" :icon="DataLine" @click="handleTrend">
谐波频谱
</el-button>
<el-button
type="primary"
v-if="realTimeFlag"
:icon="TrendCharts"
@click="handleHarmonicSpectrum"
>
<el-button type="primary" v-if="realTimeFlag" :icon="TrendCharts"
@click="handleHarmonicSpectrum">
实时趋势
</el-button>
</template>
</TableHeader>
<div
style="height: calc(100vh - 300px)"
v-if="
dataSet.indexOf('_trenddata') == -1 &&
dataSet.indexOf('_realtimedata') == -1 &&
dataSet.indexOf('_event') == -1 &&
tableData.length == 0
"
v-loading="tableLoading"
></div>
<div
style="overflow: auto"
:style="{ height: tableHeight }"
v-if="
dataSet.indexOf('_trenddata') == -1 &&
dataSet.indexOf('_realtimedata') == -1 &&
dataSet.indexOf('_event') == -1 &&
tableData.length != 0
"
>
<div style="height: calc(100vh - 300px)" v-if="
dataSet.indexOf('_trenddata') == -1 &&
dataSet.indexOf('_realtimedata') == -1 &&
dataSet.indexOf('_event') == -1 &&
tableData.length == 0
" v-loading="tableLoading"></div>
<div style="overflow: auto" :style="{ height: tableHeight }" v-if="
dataSet.indexOf('_trenddata') == -1 &&
dataSet.indexOf('_realtimedata') == -1 &&
dataSet.indexOf('_event') == -1 &&
tableData.length != 0
">
<!-- 循环渲染的card 最新数据/历史数据显示 -->
<div class="content" v-loading="tableLoading">
<el-card class="box-card" 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>
<Icon name="el-icon-TrendCharts" class="ml10" @click="getDeviceDataTrend(item)"
style="font-size: 26px; cursor: pointer; color: #fff"></Icon>
</div>
</template>
<!-- 模块数据 -->
@@ -185,49 +141,37 @@
</div>
<div v-else-if="item.children.length">
<div style="display: flex; align-items: center">
<el-tag
effect="dark"
type="danger"
style="width: 40px; text-align: center"
class="mr10"
>
<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'
typeof item.children[0].maxValue != 'number'
? '暂无数据'
: item.children[0].maxValue
}}
</div>
<div style="display: flex; align-items: center" class="mt10">
<el-tag
effect="dark"
type="success"
style="width: 40px; text-align: center"
class="mr10"
>
<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'
typeof item.children[0].avgValue != 'number'
? '暂无数据'
: item.children[0].avgValue
}}
</div>
<div style="display: flex; align-items: center" class="mt10">
<el-tag
effect="dark"
type="warning"
style="width: 40px; text-align: center"
class="mr10"
>
<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'
typeof item.children[0].minValue != 'number'
? '暂无数据'
: item.children[0].minValue
}}
@@ -237,39 +181,24 @@
<el-empty description="暂无数据" v-if="tableData.length === 0"></el-empty>
</div>
</div>
<el-pagination
v-if="
tableData.length &&
dataSet.indexOf('_trenddata') == -1 &&
dataSet.indexOf('_realtimedata') == -1 &&
dataSet.indexOf('_event') == -1
"
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>
<el-pagination v-if="
tableData.length &&
dataSet.indexOf('_trenddata') == -1 &&
dataSet.indexOf('_realtimedata') == -1 &&
dataSet.indexOf('_event') == -1
" 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>
<!-- 趋势数据 -->
<div
style="height: calc(100vh - 340px)"
v-if="dataSet.indexOf('_trenddata') != -1"
v-loading="tableLoading"
>
<div style="height: calc(100vh - 340px)" v-if="dataSet.indexOf('_trenddata') != -1"
v-loading="tableLoading">
<Trend ref="trendRef"></Trend>
</div>
<!-- 实时数据 -->
<div
style="height: calc(100vh - 340px)"
v-if="dataSet.indexOf('_realtimedata') != -1"
v-loading="tableLoading"
>
<div style="height: calc(100vh - 340px)" v-if="dataSet.indexOf('_realtimedata') != -1"
v-loading="tableLoading">
<!-- <div class="view_top_btn" v-if="realTimeFlag">
<el-button type="primary" :icon="Platform" @click="handleRecordWaves">
实时录波
@@ -284,23 +213,16 @@
<!-- 实时数据-实时录波组件 -->
<recordWoves v-if="!realTimeFlag && sonTab == 0"></recordWoves>
<!-- 实时数据-实时趋势组件 -->
<realTrend
v-if="!realTimeFlag && sonTab == 1"
ref="realTrendRef"
@changeTrendType="changeTrendType"
></realTrend>
<realTrend v-if="!realTimeFlag && sonTab == 1" ref="realTrendRef"
@changeTrendType="changeTrendType">
</realTrend>
<!-- 实时数据-谐波频谱组件 -->
<harmonicSpectrum
v-show="!realTimeFlag && sonTab == 2"
ref="harmonicSpectrumRef"
></harmonicSpectrum>
<harmonicSpectrum v-show="!realTimeFlag && sonTab == 2" ref="harmonicSpectrumRef">
</harmonicSpectrum>
</div>
<!-- 暂态事件 -->
<div
style="height: calc(100vh - 340px)"
v-if="dataSet.indexOf('_event') != -1"
v-loading="tableLoading"
>
<div style="height: calc(100vh - 340px)" v-if="dataSet.indexOf('_event') != -1"
v-loading="tableLoading">
<Event ref="eventRef"></Event>
</div>
<div v-if="!tableData" style="height: 42px"></div>
@@ -418,6 +340,7 @@ const handleTrend = async () => {
)
let obj = JSON.parse(JSON.stringify(JSON.parse(new TextDecoder().decode(message)))) || {}
if (obj.data1) {
realTrendRef.value && realTrendRef.value.setRealTrendData(obj)
}
})
@@ -428,8 +351,10 @@ const handleTrend = async () => {
.catch(e => {
realTrendRef.value && realTrendRef.value.setRealTrendData(false)
})
//每隔30s调用一下接口，通知后台推送mqtt消息
trendTimer.value = setInterval(() => {
getHarmRealData(lineId.value, activeTrendName.value).then((res: any) => {
console.log(res, '获取谐波频谱数据')
connectMqtt()
@@ -467,14 +392,21 @@ const harmonicSpectrumRef = ref()
//实时趋势
const handleHarmonicSpectrum = () => {
realTimeFlag.value = false
window.clearInterval(timer.value)
clearInterval(realDataTimer.value)
// window.clearInterval(timer.value)
// clearInterval(realDataTimer.value)
sonTab.value = 2
harmonicSpectrumRef.value && harmonicSpectrumRef.value.resetData()
getRealDataMqttMsg()
// getRealDataMqttMsg()
}
//返回
const handleReturn = () => {
console.log("🚀 ~ handleReturn ~ realDataTimer.value:", trendTimer.value)
clearInterval(trendTimer.value)
clearInterval(realDataTimer.value)
realTimeFlag.value = true
sonTab.value = null
activeTrendName.value = 0
@@ -619,7 +551,7 @@ const getRealDataMqttMsg = async () => {
connectMqtt()
mqttRef.value.on('connect', (e: any) => {
// ElMessage.success('连接mqtt服务器成功!')
console.log('mqtt客户端已连接....')
// mqttRef.value.subscribe('/Web/Progress')
mqttRef.value.subscribe('/Web/RealData/+')
//假数据
@@ -748,6 +680,7 @@ const getRealDataMqttMsg = async () => {
//更新实时数据值
realTimeFlag.value && realTimeRef.value && realTimeRef.value.setRealData(mqttMessage.value)
//更新实时趋势数据
!realTimeFlag.value &&
sonTab.value == 2 &&
harmonicSpectrumRef.value &&
@@ -893,7 +826,7 @@ const handleClick = async (tab?: any) => {
}
}
//模版下载
const handleDownLoadTemplate = () => {}
const handleDownLoadTemplate = () => { }
//补召日志
const analysisListRef = ref()
//打开补召日志
@@ -930,7 +863,7 @@ const echoName = (value: any, arr: any[]) => {
return value ? arr.find(item => item.value == value)?.label : '/'
}
onMounted(() => {})
onMounted(() => { })
onUnmounted(() => {
clearInterval(timer.value)
clearInterval(realDataTimer.value)
@@ -1020,6 +953,7 @@ onUnmounted(() => {
margin-right: 5px;
}
}
.el-form {
width: 100%;
height: auto;