设备监控二级页面

This commit is contained in:
zhujiyan
2024-07-23 17:28:31 +08:00
parent 76cd3461b3
commit 93b7a9ed4d
13 changed files with 2093 additions and 874 deletions

View File

@@ -13,7 +13,7 @@
v-if="dataSet.indexOf('_realtimedata') != -1"
size="small"
type="primary"
@click="handleDownLoad"
@click="handleDownLoadTemplate"
>
模版下载
</el-button>
@@ -37,7 +37,7 @@
v-if="dataSet.indexOf('_realtimedata') != -1"
size="small"
type="primary"
@click="handleImport"
@click="handleAnalysisList"
>
解析列表
</el-button>
@@ -62,7 +62,7 @@
{{ deviceData.time ? deviceData.time : '/' }}
</el-descriptions-item>
</el-descriptions>
{{ dataSet }}
<!-- {{ dataSet }} -->
<el-tabs v-model="dataSet" type="border-card" class="device-control-box-card" @tab-click="handleClick">
<el-tab-pane
lazy
@@ -88,7 +88,7 @@
placeholder="请输入关键词"
></el-input>
</el-form-item>
<el-form-item label="日期" v-if="dataSet.indexOf('_history') != -1">
<el-form-item label="日期" v-show="dataSet.indexOf('_history') != -1">
<DatePicker ref="datePickerRef"></DatePicker>
</el-form-item>
<el-form-item>
@@ -102,7 +102,8 @@
v-if="
dataSet.indexOf('_trenddata') == -1 &&
dataSet.indexOf('_realtimedata') == -1 &&
dataSet.indexOf('_event') == -1
dataSet.indexOf('_event') == -1 &&
tableData.length != 0
"
>
<!-- 循环渲染的card 最新数据/历史数据显示 -->
@@ -140,7 +141,9 @@
MAX
</el-tag>
{{
item.children[0].maxValue === 3.1415956 ? '暂无数据' : item.children[0].maxValue
item.children[0].maxValue === 3.1415956 || !item.children[0].maxValue
? '暂无数据'
: item.children[0].maxValue
}}
</div>
<div style="display: flex; align-items: center" class="mt10">
@@ -153,7 +156,9 @@
AVG
</el-tag>
{{
item.children[0].avgValue === 3.1415956 ? '暂无数据' : item.children[0].avgValue
item.children[0].avgValue === 3.1415956 || !item.children[0].avgValue
? '暂无数据'
: item.children[0].avgValue
}}
</div>
<div style="display: flex; align-items: center" class="mt10">
@@ -166,7 +171,9 @@
MIN
</el-tag>
{{
item.children[0].minValue === 3.1415956 ? '暂无数据' : item.children[0].minValue
item.children[0].minValue === 3.1415956 || !item.children[0].minValue
? '暂无数据'
: item.children[0].minValue
}}
</div>
</div>
@@ -194,9 +201,8 @@
></el-pagination>
<!-- 趋势数据 -->
<div style="height: calc(100vh - 200px)" v-if="dataSet.indexOf('_trenddata') != -1">
趋势数据
<Trend></Trend>
<div style="height: calc(100vh - 200px)" v-show="dataSet.indexOf('_trenddata') != -1">
<Trend ref="trendRef"></Trend>
</div>
<!-- 实时数据 -->
<div style="height: calc(100vh - 200px)" v-if="dataSet.indexOf('_realtimedata') != -1">
@@ -221,12 +227,11 @@
<!-- 实时数据-实时趋势组件 -->
<realTrend v-if="!realTimeFlag && sonTab == 1"></realTrend>
<!-- 实时数据-谐波频谱组件 -->
<harmonicSpectrum v-if="!realTimeFlag && sonTab == 2"></harmonicSpectrum>
<harmonicSpectrum v-if="!realTimeFlag && sonTab == 2" ref="harmonicSpectrumRef"></harmonicSpectrum>
</div>
<!-- 暂态事件 -->
<div style="height: calc(100vh - 200px)" v-if="dataSet.indexOf('_event') != -1">
暂态事件
<Event></Event>
<div style="height: calc(100vh - 200px)" v-show="dataSet.indexOf('_event') != -1">
<Event ref="eventRef"></Event>
</div>
<div v-if="!tableData" style="height: 42px"></div>
</el-tabs>
@@ -235,6 +240,8 @@
<Detail ref="detailRef" :detail="detail" @close="detail = null" v-if="detail"></Detail>
<!-- 离线数据导入组件 -->
<offLineDataImport ref="offLineDataImportRef"></offLineDataImport>
<!-- 解析列表 -->
<analysisList ref="analysisListRef"></analysisList>
</div>
</template>
@@ -259,6 +266,7 @@ import { useRouter } from 'vue-router'
import { defineConfig, loadEnv } from 'vite'
import type { UserConfig, ConfigEnv } from 'vite'
import { Platform, TrendCharts, DataLine, ArrowLeft } from '@element-plus/icons-vue'
import analysisList from './analysisList/index.vue'
defineOptions({
name: 'govern/device/control'
})
@@ -337,9 +345,11 @@ const handleTrend = () => {
sonTab.value = 1
}
//谐波频谱
const harmonicSpectrumRef = ref()
const handleHarmonicSpectrum = () => {
realTimeFlag.value = false
sonTab.value = 2
harmonicSpectrumRef.value && harmonicSpectrumRef.value.init()
}
//返回
const handleReturn = () => {
@@ -419,11 +429,15 @@ const nodeClick = async (e: anyObj) => {
}
}
const realTimeRef: any = ref()
const intRealTime = (val: any) => {
getTabsDataByType(val).then(res => {
const intRealTime = async (val: any) => {
await getTabsDataByType(val).then(res => {
realTimeRef.value && realTimeRef.value.getRealTimeData(res.data)
})
}
//趋势数据组件
const trendRef: any = ref()
//暂态事件组件
const eventRef: any = ref()
//tab点击事件
const handleClick = async (tab?: any) => {
tableLoading.value = true
@@ -437,20 +451,20 @@ const handleClick = async (tab?: any) => {
}
// setTimeout(async () => {
//查询历史指标
if (dataSet.value.indexOf('_history') != -1) {
formInline.startTime = datePickerRef.value.timeValue[0]
formInline.endTime = datePickerRef.value.timeValue[1]
if (dataSet.value.includes('_history')) {
console.log('执行次数55555')
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
})
console.log(tableData.value, '++++++++++++')
}
//查询趋势数据
if (dataSet.value.indexOf('_trenddata') != -1) {
console.log(deviceData.value.dataSetList, '8888888888838838838')
console.log('_trenddata')
if (dataSet.value.includes('_trenddata')) {
let obj = {
devId: deviceId.value, //e.id
lineId: lineId.value, //e.pid
@@ -462,12 +476,14 @@ const handleClick = async (tab?: any) => {
}
]
}
await getTabsDataByType(obj).then(res => {
console.log(res, '0000000')
})
// await getTabsDataByType(obj).then(res => {
// console.log(res, '趋势数据结果')
// })
console.log(trendRef.value, '++++++++++++++++++')
trendRef.value && trendRef.value.getTrendRequest(obj)
}
//查询实时数据
if (dataSet.value.indexOf('_realtimedata') != -1) {
if (dataSet.value.includes('_realtimedata')) {
//查询实时数据显示实时录波、实时趋势、谐波频谱
realTimeFlag.value = true
let obj = {
@@ -481,7 +497,7 @@ const handleClick = async (tab?: any) => {
}, 20000)
}
//查询暂态事件
if (dataSet.value.indexOf('_event') != -1) {
if (dataSet.value.includes('_event')) {
console.log('_event')
let obj = {
devId: deviceId.value, //e.id
@@ -494,13 +510,15 @@ const handleClick = async (tab?: any) => {
}
]
}
await getTabsDataByType(obj).then(res => {
console.log(res, '0000000')
})
//暂态事件表格请求参数
eventRef.value && eventRef.value.getTableParams(obj)
// await getTabsDataByType(obj).then(res => {
// console.log(res, '0000000')
// })
}
//查询当前指标
console.log(dataSet.value.indexOf('_'), '查询当前指标')
if (dataSet.value.indexOf('_') == -1) {
if (!dataSet.value.includes('_')) {
formInline.id = dataSet.value
await deviceRtData(formInline).then((res: any) => {
tableData.value = res.data.records
@@ -510,12 +528,25 @@ const handleClick = async (tab?: any) => {
}
// }, 100)
}
//模版下载
const handleDownLoadTemplate = () => {}
//解析列表
// const isAnalysisList = ref(false)
const analysisListRef = ref()
//打开解析列表
const handleAnalysisList = () => {
// isAnalysisList.value = true
analysisListRef.value && analysisListRef.value.open()
}
//返回
// const handleBackAnalysisList=()=>{
// isAnalysisList.value = false
// }
//离线数据导入
const offLineDataImportRef = ref()
const handleImport = () => {
//设备devId&监测点lineId带入组件
offLineDataImportRef.value && offLineDataImportRef.value.open()
offLineDataImportRef.value && offLineDataImportRef.value.open(deviceId.value, lineId.value)
}
queryByCode('Device_Type').then(res => {
queryCsDictTree(res.data.id).then(res => {