趋势数据/暂态数据/实时数据添加loading
This commit is contained in:
zhujiyan
@@ -1,6 +1,10 @@
|
||||
<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>
|
||||
@@ -39,8 +43,13 @@
|
||||
</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>
|
||||
@@ -49,35 +58,48 @@
|
||||
<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>
|
||||
<el-form :inline="true" style="white-space: nowrap; margin-top: 10px" v-if="
|
||||
dataSet.indexOf('_trenddata') == -1 &&
|
||||
dataSet.indexOf('_realtimedata') == -1 &&
|
||||
dataSet.indexOf('_event') == -1
|
||||
">
|
||||
<el-form
|
||||
:inline="true"
|
||||
style="white-space: nowrap; margin-top: 10px"
|
||||
v-if="
|
||||
dataSet.indexOf('_trenddata') == -1 &&
|
||||
dataSet.indexOf('_realtimedata') == -1 &&
|
||||
dataSet.indexOf('_event') == -1
|
||||
"
|
||||
>
|
||||
<el-form-item label="指标">
|
||||
<el-input style="width: 240px" v-model="formInline.searchValue" autocomplete="off" clearable
|
||||
placeholder="请输入关键词"></el-input>
|
||||
<el-input
|
||||
style="width: 240px"
|
||||
v-model="formInline.searchValue"
|
||||
autocomplete="off"
|
||||
clearable
|
||||
placeholder="请输入关键词"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="日期" v-show="dataSet.indexOf('_history') != -1">
|
||||
<DatePicker ref="datePickerRef"></DatePicker>
|
||||
@@ -92,26 +114,38 @@
|
||||
<el-button type="primary" icon="el-icon-Search" @click="handleClick">查询</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<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">
|
||||
<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>
|
||||
<!-- 模块数据 -->
|
||||
@@ -126,37 +160,49 @@
|
||||
</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
|
||||
}}
|
||||
@@ -166,22 +212,31 @@
|
||||
<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 - 200px)" v-show="dataSet.indexOf('_trenddata') != -1">
|
||||
<div style="height: calc(100vh - 200px)" v-show="dataSet.indexOf('_trenddata') != -1" v-loading="tableLoading">
|
||||
<Trend ref="trendRef"></Trend>
|
||||
</div>
|
||||
<!-- 实时数据 -->
|
||||
<div style="height: calc(100vh - 200px)" v-if="dataSet.indexOf('_realtimedata') != -1">
|
||||
<div style="height: calc(100vh - 200px)" v-if="dataSet.indexOf('_realtimedata') != -1" v-loading="tableLoading">
|
||||
<div class="view_top_btn" v-if="realTimeFlag">
|
||||
<!-- <el-button type="primary" size="small" :icon="Platform" @click="handleRecordWaves">
|
||||
实时录波
|
||||
@@ -203,11 +258,13 @@
|
||||
<!-- 实时数据-实时趋势组件 -->
|
||||
<realTrend v-show="!realTimeFlag && sonTab == 1" ref="realTrendRef"></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 - 200px)" v-show="dataSet.indexOf('_event') != -1">
|
||||
<div style="height: calc(100vh - 200px)" v-show="dataSet.indexOf('_event') != -1" v-loading="tableLoading">
|
||||
<Event ref="eventRef"></Event>
|
||||
</div>
|
||||
<div v-if="!tableData" style="height: 42px"></div>
|
||||
@@ -346,7 +403,6 @@ const deviceId: any = ref('')
|
||||
const lineId: any = ref('')
|
||||
const dataLevel: any = ref('')
|
||||
const nodeClick = async (e: anyObj) => {
|
||||
|
||||
deviceId.value = e?.pid
|
||||
lineId.value = e?.id
|
||||
if (!e) {
|
||||
@@ -356,40 +412,45 @@ const nodeClick = async (e: anyObj) => {
|
||||
if (e.level == 3) {
|
||||
loading.value = true
|
||||
formInline.lineId = e.id
|
||||
await getDeviceData(e.pid, 'history', e.id).then((res: any) => {
|
||||
deviceData.value = res.data
|
||||
formInline.dataLevel = res.data.dataLevel
|
||||
dataLevel.value = res.data.dataLevel
|
||||
if (dataLevel.value == 'Secondary') {
|
||||
formInline.dataLevel = 'Primary'
|
||||
}
|
||||
if (!res.data.dataSetList) {
|
||||
dataSet.value = ''
|
||||
tableData.value = []
|
||||
} else {
|
||||
res.data.dataSetList.forEach((item: any) => {
|
||||
//历史
|
||||
if (item.type === 'history') {
|
||||
item.id = item.id + '_history'
|
||||
}
|
||||
//趋势数据
|
||||
if (item.type === 'trenddata') {
|
||||
item.id = item.id + '_trenddata'
|
||||
}
|
||||
//实时数据
|
||||
if (item.type === 'realtimedata') {
|
||||
item.id = item.id + '_realtimedata'
|
||||
}
|
||||
//暂态事件
|
||||
if (item.type === 'event') {
|
||||
item.id = item.id + '_event'
|
||||
}
|
||||
})
|
||||
dataSet.value = res.data.dataSetList[0].id
|
||||
handleClick()
|
||||
}
|
||||
loading.value = false
|
||||
})
|
||||
await getDeviceData(e.pid, 'history', e.id)
|
||||
.then((res: any) => {
|
||||
deviceData.value = res.data
|
||||
formInline.dataLevel = res.data.dataLevel
|
||||
dataLevel.value = res.data.dataLevel
|
||||
if (dataLevel.value == 'Secondary') {
|
||||
formInline.dataLevel = 'Primary'
|
||||
}
|
||||
if (!res.data.dataSetList) {
|
||||
dataSet.value = ''
|
||||
tableData.value = []
|
||||
loading.value = false
|
||||
} else {
|
||||
res.data.dataSetList.forEach((item: any) => {
|
||||
//历史
|
||||
if (item.type === 'history') {
|
||||
item.id = item.id + '_history'
|
||||
}
|
||||
//趋势数据
|
||||
if (item.type === 'trenddata') {
|
||||
item.id = item.id + '_trenddata'
|
||||
}
|
||||
//实时数据
|
||||
if (item.type === 'realtimedata') {
|
||||
item.id = item.id + '_realtimedata'
|
||||
}
|
||||
//暂态事件
|
||||
if (item.type === 'event') {
|
||||
item.id = item.id + '_event'
|
||||
}
|
||||
})
|
||||
dataSet.value = res.data.dataSetList[0].id
|
||||
handleClick()
|
||||
}
|
||||
loading.value = false
|
||||
})
|
||||
.catch(e => {
|
||||
loading.value = false
|
||||
})
|
||||
} else {
|
||||
loading.value = false
|
||||
}
|
||||
@@ -418,14 +479,13 @@ const eventRef: any = ref()
|
||||
const timer: any = ref()
|
||||
//tab点击事件
|
||||
const handleClick = async (tab?: any) => {
|
||||
|
||||
tableLoading.value = true
|
||||
// loading.value = true
|
||||
//点击tab时更新dataSet最新值
|
||||
if (tab && tab.props && tab.props.name && dataSet.value != tab.props.name) {
|
||||
dataSet.value = tab.props.name
|
||||
}
|
||||
|
||||
tableLoading.value = true
|
||||
loading.value = true
|
||||
//初始化点击tab隐藏实时录波、实时趋势、谐波频谱按钮
|
||||
realTimeFlag.value = false
|
||||
//初始化点击tab隐藏子页面
|
||||
@@ -444,12 +504,19 @@ const handleClick = async (tab?: any) => {
|
||||
formInline.startTime = datePickerRef.value && datePickerRef.value.timeValue[0]
|
||||
formInline.endTime = datePickerRef.value && datePickerRef.value.timeValue[1]
|
||||
formInline.id = dataSet.value.replace('_history', '')
|
||||
await deviceHisData(formInline).then((res: any) => {
|
||||
tableData.value = res.data.records
|
||||
formInline.total = res.data.total
|
||||
tableLoading.value = false
|
||||
loading.value = false
|
||||
})
|
||||
await deviceHisData(formInline)
|
||||
.then((res: any) => {
|
||||
tableData.value = res.data.records
|
||||
formInline.total = res.data.total
|
||||
setTimeout(() => {
|
||||
tableLoading.value = false
|
||||
}, 1500)
|
||||
})
|
||||
.catch(e => {
|
||||
setTimeout(() => {
|
||||
tableLoading.value = false
|
||||
}, 1500)
|
||||
})
|
||||
}
|
||||
//查询趋势数据
|
||||
if (dataSet.value.includes('_trenddata')) {
|
||||
@@ -465,6 +532,9 @@ const handleClick = async (tab?: any) => {
|
||||
]
|
||||
}
|
||||
trendRef.value && trendRef.value.getTrendRequest(obj)
|
||||
setTimeout(() => {
|
||||
tableLoading.value = false
|
||||
}, 1500)
|
||||
}
|
||||
//查询实时数据
|
||||
if (dataSet.value.includes('_realtimedata')) {
|
||||
@@ -476,11 +546,9 @@ const handleClick = async (tab?: any) => {
|
||||
lineId: lineId.value //e.pid
|
||||
}
|
||||
intRealTime(obj)
|
||||
}
|
||||
if (!dataSet.value.includes('_realtimedata')) {
|
||||
// if(timer.value){
|
||||
// window.clearInterval(timer.value)
|
||||
// }
|
||||
setTimeout(() => {
|
||||
tableLoading.value = false
|
||||
}, 1500)
|
||||
}
|
||||
//查询暂态事件
|
||||
if (dataSet.value.includes('_event')) {
|
||||
@@ -497,22 +565,33 @@ const handleClick = async (tab?: any) => {
|
||||
}
|
||||
//暂态事件表格请求参数
|
||||
eventRef.value && eventRef.value.getTableParams(obj)
|
||||
setTimeout(() => {
|
||||
tableLoading.value = false
|
||||
}, 1500)
|
||||
}
|
||||
//查询当前指标
|
||||
if (!dataSet.value.includes('_')) {
|
||||
formInline.id = dataSet.value
|
||||
await deviceRtData(formInline).then((res: any) => {
|
||||
tableData.value = res.data.records
|
||||
formInline.total = res.data.total
|
||||
tableLoading.value = false
|
||||
loading.value = false
|
||||
})
|
||||
await deviceRtData(formInline)
|
||||
.then((res: any) => {
|
||||
tableData.value = res.data.records
|
||||
formInline.total = res.data.total
|
||||
tableLoading.value = false
|
||||
setTimeout(() => {
|
||||
loading.value = false
|
||||
}, 1500)
|
||||
})
|
||||
.catch(e => {
|
||||
setTimeout(() => {
|
||||
tableLoading.value = false
|
||||
}, 1500)
|
||||
})
|
||||
}
|
||||
|
||||
// }, 100)
|
||||
}
|
||||
//模版下载
|
||||
const handleDownLoadTemplate = () => { }
|
||||
const handleDownLoadTemplate = () => {}
|
||||
//解析列表
|
||||
const analysisListRef = ref()
|
||||
//打开解析列表
|
||||
@@ -573,7 +652,7 @@ const openGroup = () => {
|
||||
})
|
||||
})
|
||||
}
|
||||
onMounted(() => { })
|
||||
onMounted(() => {})
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
|
||||
Reference in New Issue
Block a user