修改方案数据设备监控问题
This commit is contained in:
zhujiyan
@@ -81,15 +81,16 @@
|
||||
:inline="true"
|
||||
style="white-space: nowrap; margin-top: 10px"
|
||||
v-if="
|
||||
dataSet.indexOf('_trenddata') == -1 &&
|
||||
dataSet.indexOf('_realtimedata') == -1 &&
|
||||
dataSet.indexOf('_event') == -1
|
||||
(dataSet.indexOf('_trenddata') == -1 &&
|
||||
dataSet.indexOf('_realtimedata') == -1 &&
|
||||
dataSet.indexOf('_event') == -1) ||
|
||||
realTimeFlag
|
||||
"
|
||||
>
|
||||
<el-form-item label="日期" v-show="dataSet.indexOf('_history') != -1">
|
||||
<DatePicker ref="datePickerRef"></DatePicker>
|
||||
</el-form-item>
|
||||
<el-form-item label="指标">
|
||||
<el-form-item label="指标" v-show="!realTimeFlag">
|
||||
<el-input
|
||||
style="width: 160px"
|
||||
v-model="formInline.searchValue"
|
||||
@@ -131,7 +132,7 @@
|
||||
"
|
||||
>
|
||||
<!-- 循环渲染的card 最新数据/历史数据显示 -->
|
||||
<div class="content" v-loading="tableLoading">
|
||||
<div class="content" v-loading="tableLoading">
|
||||
<el-card class="box-card" v-for="(item, index) in tableData" :key="index">
|
||||
<template #header>
|
||||
<div class="clearfix">
|
||||
@@ -245,8 +246,8 @@
|
||||
<!-- <el-button type="primary" :icon="Platform" @click="handleRecordWaves">
|
||||
实时录波
|
||||
</el-button> -->
|
||||
<el-button type="primary" :icon="DataLine" @click="handleHarmonicSpectrum">实时趋势</el-button>
|
||||
<el-button type="primary" :icon="TrendCharts" @click="handleTrend">谐波频谱</el-button>
|
||||
<el-button type="primary" :icon="DataLine" @click="handleHarmonicSpectrum">实时趋势</el-button>
|
||||
<el-button type="primary" :icon="TrendCharts" @click="handleTrend">谐波频谱</el-button>
|
||||
</div>
|
||||
<div class="view_top_btn" v-if="!realTimeFlag">
|
||||
<el-button type="primary" :icon="ArrowLeft" @click="handleReturn">返回</el-button>
|
||||
@@ -536,7 +537,7 @@ const handleClick = async (tab?: any) => {
|
||||
lineId: lineId.value,
|
||||
devId: dataSet.value.replace('_trenddata', '')
|
||||
}
|
||||
],
|
||||
]
|
||||
// startTime: datePickerRef.value && datePickerRef.value.timeValue[0],
|
||||
// endTime: datePickerRef.value && datePickerRef.value.timeValue[1]
|
||||
}
|
||||
@@ -551,6 +552,7 @@ const handleClick = async (tab?: any) => {
|
||||
realTimeFlag.value = true
|
||||
let obj = {
|
||||
type: 2,
|
||||
dataLevel: formInline.dataLevel,
|
||||
devId: deviceId.value, //e.id
|
||||
lineId: lineId.value //e.pid
|
||||
}
|
||||
@@ -573,8 +575,8 @@ const handleClick = async (tab?: any) => {
|
||||
]
|
||||
}
|
||||
setTimeout(() => {
|
||||
//暂态事件表格请求参数
|
||||
eventRef.value && eventRef.value.getTableParams(obj)
|
||||
//暂态事件表格请求参数
|
||||
eventRef.value && eventRef.value.getTableParams(obj)
|
||||
tableLoading.value = false
|
||||
}, 1500)
|
||||
}
|
||||
|
||||
@@ -97,79 +97,90 @@
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</div>
|
||||
<div class="monitor_info" v-else>
|
||||
<el-empty />
|
||||
</div>
|
||||
</el-collapse-item>
|
||||
<el-collapse-item title="历史趋势" name="1">
|
||||
<!-- <div class="history_title">
|
||||
<p>历史趋势</p>
|
||||
</div> -->
|
||||
<div class="history_header">
|
||||
<el-form :model="searchForm" class="history_select" id="history_select">
|
||||
<el-form-item label="统计指标" label-width="80px">
|
||||
<el-select
|
||||
collapse-tags
|
||||
collapse-tags-tooltip
|
||||
v-model="searchForm.index"
|
||||
placeholder="请选择统计指标"
|
||||
multiple
|
||||
:multiple-limit="3"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in indexOptions"
|
||||
:key="item.id"
|
||||
:label="item.name"
|
||||
:value="item.id"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="值类型">
|
||||
<el-select style="width: 160px !important" v-model="searchForm.dataLevel">
|
||||
<el-option value="Primary" label="一次值"></el-option>
|
||||
<el-option value="Secondary" label="二次值"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<div v-for="(item, index) in countData" :key="index">
|
||||
<el-form-item
|
||||
:label="item.name + '谐波次数'"
|
||||
label-width="180px"
|
||||
v-if="item.countOptions.length != 0"
|
||||
>
|
||||
<!-- multiple -->
|
||||
<el-select
|
||||
v-model="item.count"
|
||||
collapse-tags
|
||||
collapse-tags-tooltip
|
||||
placeholder="请选择谐波次数"
|
||||
style="width: 100px"
|
||||
>
|
||||
<el-option
|
||||
v-for="vv in item.countOptions"
|
||||
:key="vv"
|
||||
:label="vv"
|
||||
:value="vv"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</div>
|
||||
<el-form-item label="统计类型" label-width="80px">
|
||||
<el-select v-model="searchForm.type" placeholder="请选择值类型">
|
||||
<el-option
|
||||
v-for="item in typeOptions"
|
||||
:key="item.id"
|
||||
:label="item.name"
|
||||
:value="item.id"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div class="history_searchBtn">
|
||||
<el-button type="primary" icon="el-icon-Search" @click="init(true)">查询</el-button>
|
||||
<el-collapse-item title="历史趋势" name="1" class="history_collapse">
|
||||
<div class="history_trend">
|
||||
<div class="history_header" ref="headerRef">
|
||||
<!-- <el-form :model="searchForm" class="history_select" id="history_select"> -->
|
||||
<TableHeader :showSearch="false" ref="tableHeaderRef" :key="searchFormIndex">
|
||||
<template v-slot:select>
|
||||
<el-form-item for="-" label="统计指标" label-width="80px">
|
||||
<el-select
|
||||
collapse-tags
|
||||
collapse-tags-tooltip
|
||||
v-model="searchForm.index"
|
||||
placeholder="请选择统计指标"
|
||||
multiple
|
||||
:multiple-limit="3"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in indexOptions"
|
||||
:key="item.id"
|
||||
:label="item.name"
|
||||
:value="item.id"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item for="-" label="值类型">
|
||||
<el-select style="width: 160px !important" v-model="searchForm.dataLevel">
|
||||
<el-option value="Primary" label="一次值"></el-option>
|
||||
<el-option value="Secondary" label="二次值"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<div v-for="(item, index) in countData" :key="index">
|
||||
<el-form-item
|
||||
for="-"
|
||||
:label="item.name + '谐波次数'"
|
||||
label-width="180px"
|
||||
v-if="item.countOptions.length != 0"
|
||||
>
|
||||
<!-- multiple -->
|
||||
<el-select
|
||||
v-model="item.count"
|
||||
collapse-tags
|
||||
collapse-tags-tooltip
|
||||
placeholder="请选择谐波次数"
|
||||
style="width: 100px"
|
||||
>
|
||||
<el-option
|
||||
v-for="vv in item.countOptions"
|
||||
:key="vv"
|
||||
:label="vv"
|
||||
:value="vv"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</div>
|
||||
<el-form-item for="-" label="统计类型" label-width="80px">
|
||||
<el-select v-model="searchForm.type" placeholder="请选择值类型">
|
||||
<el-option
|
||||
v-for="item in typeOptions"
|
||||
:key="item.id"
|
||||
:label="item.name"
|
||||
:value="item.id"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</template>
|
||||
<template v-slot:operation>
|
||||
<el-button type="primary" icon="el-icon-Search" @click="init(true)">查询</el-button>
|
||||
</template>
|
||||
</TableHeader>
|
||||
|
||||
<!-- </el-form> -->
|
||||
<!-- <div class="history_searchBtn">
|
||||
|
||||
</div> -->
|
||||
</div>
|
||||
<div class="history_title">
|
||||
<p>{{ chartTitle }}</p>
|
||||
</div>
|
||||
<div class="history_chart" v-loading="loading" ref="chartRef">
|
||||
<MyEchart ref="historyChart" v-if="echartsData" :isExport="true" :options="echartsData" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="history_title">
|
||||
<p>{{ chartTitle }}</p>
|
||||
</div>
|
||||
<div class="history_chart" v-loading="loading">
|
||||
<MyEchart ref="historyChart" v-if="echartsData" :isExport="true" :options="echartsData" />
|
||||
</div>
|
||||
</el-collapse-item>
|
||||
</el-collapse>
|
||||
@@ -184,7 +195,7 @@ import popup from './components/popup.vue'
|
||||
import schemeTree from './components/schemeTree.vue'
|
||||
import { mainHeight } from '@/utils/layout'
|
||||
import { queryByCode, queryCsDictTree } from '@/api/system-boot/dictTree'
|
||||
import { ref, onMounted, watch } from 'vue'
|
||||
import { ref, onMounted, watch, nextTick } from 'vue'
|
||||
import { ElMessage } from 'element-plus'
|
||||
import MyEchart from '@/components/echarts/MyEchart.vue'
|
||||
import { getTestRecordInfo, getHistoryTrend } from '@/api/cs-device-boot/planData'
|
||||
@@ -192,6 +203,7 @@ import { useDictData } from '@/stores/dictData'
|
||||
import { queryStatistical } from '@/api/system-boot/csstatisticalset'
|
||||
import { TrendCharts, Plus, Platform } from '@element-plus/icons-vue'
|
||||
import { yMethod } from '@/utils/echartMethod'
|
||||
import TableHeader from '@/components/table/header/index.vue'
|
||||
const dictData = useDictData()
|
||||
defineOptions({
|
||||
name: 'govern/device/planData/index'
|
||||
@@ -362,9 +374,6 @@ const init = (flag: boolean) => {
|
||||
if (historyDevId.value && legendDictList.value && legendDictList.value.selectedList) {
|
||||
// 选择指标的时候切换legend内容和data数据
|
||||
legendDictList.value?.selectedList?.map((item: any) => {
|
||||
// if (item.dataType == searchForm.value.index) {
|
||||
// list.push(item.eleEpdPqdVOS)
|
||||
// }
|
||||
searchForm.value.index.map((vv: any) => {
|
||||
if (item.dataType == vv) {
|
||||
list.push(item.eleEpdPqdVOS)
|
||||
@@ -434,9 +443,12 @@ const init = (flag: boolean) => {
|
||||
unitList.push(item.unit)
|
||||
}
|
||||
})
|
||||
xAxis = timeList.sort((a: any, b: any) => {
|
||||
return new Date(a).getTime() - new Date(b).getTime()
|
||||
})
|
||||
xAxis = new Set(
|
||||
timeList.sort((a: any, b: any) => {
|
||||
return new Date(a).getTime() - new Date(b).getTime()
|
||||
})
|
||||
)
|
||||
|
||||
let [min, max] = [0, 0]
|
||||
list.map((item: any, index: any) => {
|
||||
item.map((vv: any, indexs: any) => {
|
||||
@@ -455,7 +467,6 @@ const init = (flag: boolean) => {
|
||||
item.max = max
|
||||
})
|
||||
})
|
||||
console.log(list, '00000000000000')
|
||||
echartsData.value = {
|
||||
options: {
|
||||
title: [
|
||||
@@ -616,7 +627,8 @@ const init = (flag: boolean) => {
|
||||
chartsList
|
||||
.map((kk: any, kks: any) => {
|
||||
if (kk.statisticalName == vv.name) {
|
||||
return [xAxis[kks], kk.statisticalData]
|
||||
// xAxis[kks]
|
||||
return [kk.time, kk.statisticalData]
|
||||
} else {
|
||||
return ''
|
||||
}
|
||||
@@ -631,46 +643,46 @@ const init = (flag: boolean) => {
|
||||
})
|
||||
//处理多y轴
|
||||
// if (unitList.length != 0 && unitList.length > 1) {
|
||||
console.log(max, min)
|
||||
// echartsData.value.options.yAxis[0].yAxisIndex = 0
|
||||
unitList.map((item: any, index: any) => {
|
||||
if (index != unitList.length - 1) {
|
||||
echartsData.value.options.yAxis.push({
|
||||
type: 'value',
|
||||
position: 'right',
|
||||
offset: index * 80, // y轴位置的偏移量
|
||||
name: unitList[index + 1],
|
||||
axisLabel: {
|
||||
color: '#000',
|
||||
fontSize: 14
|
||||
},
|
||||
axisTick: {
|
||||
show: true
|
||||
},
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
// color: colorList[index + 1]
|
||||
}
|
||||
},
|
||||
nameTextStyle: {
|
||||
color: '#000',
|
||||
fontSize: '14'
|
||||
},
|
||||
max: list[index + 1].max,
|
||||
min: list[index + 1].min,
|
||||
splitLine: {
|
||||
show: false,
|
||||
lineStyle: {
|
||||
color: ['#43485E'],
|
||||
width: 1,
|
||||
type: 'solid'
|
||||
}
|
||||
console.log(max, min)
|
||||
// echartsData.value.options.yAxis[0].yAxisIndex = 0
|
||||
unitList.map((item: any, index: any) => {
|
||||
if (index != unitList.length - 1) {
|
||||
echartsData.value.options.yAxis.push({
|
||||
type: 'value',
|
||||
position: 'right',
|
||||
offset: index * 80, // y轴位置的偏移量
|
||||
name: unitList[index + 1],
|
||||
axisLabel: {
|
||||
color: '#000',
|
||||
fontSize: 14
|
||||
},
|
||||
axisTick: {
|
||||
show: true
|
||||
},
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
// color: colorList[index + 1]
|
||||
}
|
||||
// yAxisIndex: index + 1
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
nameTextStyle: {
|
||||
color: '#000',
|
||||
fontSize: '14'
|
||||
},
|
||||
max: list[index + 1].max,
|
||||
min: list[index + 1].min,
|
||||
splitLine: {
|
||||
show: false,
|
||||
lineStyle: {
|
||||
color: ['#43485E'],
|
||||
width: 1,
|
||||
type: 'solid'
|
||||
}
|
||||
}
|
||||
// yAxisIndex: index + 1
|
||||
})
|
||||
}
|
||||
})
|
||||
// }
|
||||
//设置数据项颜色
|
||||
echartsData.value.options.series.map((item: any, index: any) => {
|
||||
@@ -756,7 +768,7 @@ const handleExport = async () => {
|
||||
xAxis = timeList.sort((a: any, b: any) => {
|
||||
new Date(a).getTime() - new Date(b).getTime()
|
||||
})
|
||||
// xAxis = Array.from(new Set(xAxis))
|
||||
xAxis = Array.from(new Set(xAxis))
|
||||
// 使用这个函数转换数据为CSV格式
|
||||
let csv: any = ''
|
||||
const list = echartsData.value.options.series
|
||||
@@ -780,7 +792,6 @@ const handleExport = async () => {
|
||||
count = index
|
||||
}
|
||||
let itemList: any = list[index].data[indexs]
|
||||
console.log(itemList)
|
||||
if (itemList && itemList.length != 0) {
|
||||
index == list.length - 1 ? (strs += itemList[1]) : (strs += itemList[1] + ',')
|
||||
} else {
|
||||
@@ -849,15 +860,15 @@ const formatCountOptions = (list: any) => {
|
||||
})
|
||||
}
|
||||
}
|
||||
const tableHeaderRef = ref<any>()
|
||||
const searchFormIndex = ref<any>()
|
||||
watch(
|
||||
() => searchForm.value.index,
|
||||
(val: any, oldval: any) => {
|
||||
if (val) {
|
||||
let list = val
|
||||
// formatCountOptions(list)
|
||||
// if (val == 0) {
|
||||
// countData.value = []
|
||||
// }
|
||||
searchFormIndex.value = val
|
||||
formatCountOptions(list)
|
||||
countData.value.map((item: any, key: any) => {
|
||||
if (
|
||||
list.findIndex((vv: any) => {
|
||||
@@ -886,13 +897,11 @@ onMounted(() => {
|
||||
.device-manage {
|
||||
display: flex;
|
||||
height: calc(100vh - 100px);
|
||||
|
||||
// overflow-y: auto;
|
||||
&-right {
|
||||
// overflow: auto;
|
||||
flex: 1;
|
||||
padding: 10px 10px 10px 0;
|
||||
|
||||
.el-descriptions__header {
|
||||
height: 36px;
|
||||
margin-bottom: 7px;
|
||||
@@ -921,7 +930,6 @@ onMounted(() => {
|
||||
|
||||
.history_title {
|
||||
width: 100%;
|
||||
|
||||
p {
|
||||
height: 32px;
|
||||
line-height: 32px;
|
||||
@@ -933,51 +941,31 @@ onMounted(() => {
|
||||
|
||||
::v-deep .monitor_info {
|
||||
width: 100%;
|
||||
|
||||
.el-tabs__content {
|
||||
padding: 0 !important;
|
||||
min-height: 130px !important;
|
||||
}
|
||||
}
|
||||
|
||||
.history_header {
|
||||
display: flex;
|
||||
|
||||
// flex-wrap: wrap;
|
||||
#history_select {
|
||||
width: 95%;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
overflow-x: auto;
|
||||
|
||||
// height: 45px;
|
||||
// padding-top: 18px;
|
||||
// flex-wrap: wrap;
|
||||
.el-form-item {
|
||||
flex: none;
|
||||
max-width: 380px !important;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.el-select {
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.history_searchBtn {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
// margin-top: 3px;
|
||||
}
|
||||
}
|
||||
|
||||
.history_chart {
|
||||
.history_collapse {
|
||||
height: calc(100vh - 300px);
|
||||
width: 100%;
|
||||
height: calc(100vh - 440px) !important;
|
||||
flex: 1;
|
||||
margin-top: 10px;
|
||||
.history_trend {
|
||||
width: 100%;
|
||||
height: calc(100vh - 340px);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
.history_header {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
overflow: hidden;
|
||||
}
|
||||
.history_chart {
|
||||
width: 100%;
|
||||
flex: 1 !important;
|
||||
margin-top: 10px;
|
||||
margin: 10px 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
::v-deep .el-select {
|
||||
|
||||
Reference in New Issue
Block a user