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

修改方案数据设备监控问题

Browse Source
This commit is contained in:
zhujiyan
2024-10-09 08:49:19 +08:00
parent 01f0cd7871
commit 5abe4755af
2 changed files with 167 additions and 177 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -81,15 +81,16 @@
:inline="true" :inline="true"
style="white-space: nowrap; margin-top: 10px" style="white-space: nowrap; margin-top: 10px"
v-if=" v-if="
dataSet.indexOf('_trenddata') == -1 && (dataSet.indexOf('_trenddata') == -1 &&
dataSet.indexOf('_realtimedata') == -1 && dataSet.indexOf('_realtimedata') == -1 &&
dataSet.indexOf('_event') == -1 dataSet.indexOf('_event') == -1) ||
realTimeFlag
" "
> >
<el-form-item label="日期" v-show="dataSet.indexOf('_history') != -1"> <el-form-item label="日期" v-show="dataSet.indexOf('_history') != -1">
<DatePicker ref="datePickerRef"></DatePicker> <DatePicker ref="datePickerRef"></DatePicker>
</el-form-item> </el-form-item>
<el-form-item label="指标"> <el-form-item label="指标" v-show="!realTimeFlag">
<el-input <el-input
style="width: 160px" style="width: 160px"
v-model="formInline.searchValue" v-model="formInline.searchValue"
@@ -131,7 +132,7 @@
" "
> >
<!-- 循环渲染的card 最新数据/历史数据显示 --> <!-- 循环渲染的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"> <el-card class="box-card" v-for="(item, index) in tableData" :key="index">
<template #header> <template #header>
<div class="clearfix"> <div class="clearfix">
@@ -245,8 +246,8 @@
<!-- <el-button type="primary" :icon="Platform" @click="handleRecordWaves"> <!-- <el-button type="primary" :icon="Platform" @click="handleRecordWaves">
实时录波 实时录波
</el-button> --> </el-button> -->
<el-button type="primary" :icon="DataLine" @click="handleHarmonicSpectrum">实时趋势</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="TrendCharts" @click="handleTrend">谐波频谱</el-button>
</div> </div>
<div class="view_top_btn" v-if="!realTimeFlag"> <div class="view_top_btn" v-if="!realTimeFlag">
<el-button type="primary" :icon="ArrowLeft" @click="handleReturn">返回</el-button> <el-button type="primary" :icon="ArrowLeft" @click="handleReturn">返回</el-button>
@@ -536,7 +537,7 @@ const handleClick = async (tab?: any) => {
lineId: lineId.value, lineId: lineId.value,
devId: dataSet.value.replace('_trenddata', '') devId: dataSet.value.replace('_trenddata', '')
} }
], ]
// startTime: datePickerRef.value && datePickerRef.value.timeValue[0], // startTime: datePickerRef.value && datePickerRef.value.timeValue[0],
// endTime: datePickerRef.value && datePickerRef.value.timeValue[1] // endTime: datePickerRef.value && datePickerRef.value.timeValue[1]
} }
@@ -551,6 +552,7 @@ const handleClick = async (tab?: any) => {
realTimeFlag.value = true realTimeFlag.value = true
let obj = { let obj = {
type: 2, type: 2,
dataLevel: formInline.dataLevel,
devId: deviceId.value, //e.id devId: deviceId.value, //e.id
lineId: lineId.value //e.pid lineId: lineId.value //e.pid
} }
@@ -573,8 +575,8 @@ const handleClick = async (tab?: any) => {
] ]
} }
setTimeout(() => { setTimeout(() => {
//暂态事件表格请求参数 //暂态事件表格请求参数
eventRef.value && eventRef.value.getTableParams(obj) eventRef.value && eventRef.value.getTableParams(obj)
tableLoading.value = false tableLoading.value = false
}, 1500) }, 1500)
} }

322
src/views/govern/device/planData/index.vue
View File

@@ -97,79 +97,90 @@
</el-tab-pane> </el-tab-pane>
</el-tabs> </el-tabs>
</div> </div>
<div class="monitor_info" v-else>
<el-empty />
</div>
</el-collapse-item> </el-collapse-item>
<el-collapse-item title="历史趋势" name="1"> <el-collapse-item title="历史趋势" name="1" class="history_collapse">
<!-- <div class="history_title"> <div class="history_trend">
<p>历史趋势</p> <div class="history_header" ref="headerRef">
</div> --> <!-- <el-form :model="searchForm" class="history_select" id="history_select"> -->
<div class="history_header"> <TableHeader :showSearch="false" ref="tableHeaderRef" :key="searchFormIndex">
<el-form :model="searchForm" class="history_select" id="history_select"> <template v-slot:select>
<el-form-item label="统计指标" label-width="80px"> <el-form-item for="-" label="统计指标" label-width="80px">
<el-select <el-select
collapse-tags collapse-tags
collapse-tags-tooltip collapse-tags-tooltip
v-model="searchForm.index" v-model="searchForm.index"
placeholder="请选择统计指标" placeholder="请选择统计指标"
multiple multiple
:multiple-limit="3" :multiple-limit="3"
> >
<el-option <el-option
v-for="item in indexOptions" v-for="item in indexOptions"
:key="item.id" :key="item.id"
:label="item.name" :label="item.name"
:value="item.id" :value="item.id"
></el-option> ></el-option>
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-form-item label="值类型"> <el-form-item for="-" label="值类型">
<el-select style="width: 160px !important" v-model="searchForm.dataLevel"> <el-select style="width: 160px !important" v-model="searchForm.dataLevel">
<el-option value="Primary" label="一次值"></el-option> <el-option value="Primary" label="一次值"></el-option>
<el-option value="Secondary" label="二次值"></el-option> <el-option value="Secondary" label="二次值"></el-option>
</el-select> </el-select>
</el-form-item> </el-form-item>
<div v-for="(item, index) in countData" :key="index"> <div v-for="(item, index) in countData" :key="index">
<el-form-item <el-form-item
:label="item.name + '谐波次数'" for="-"
label-width="180px" :label="item.name + '谐波次数'"
v-if="item.countOptions.length != 0" label-width="180px"
> v-if="item.countOptions.length != 0"
<!-- multiple --> >
<el-select <!-- multiple -->
v-model="item.count" <el-select
collapse-tags v-model="item.count"
collapse-tags-tooltip collapse-tags
placeholder="请选择谐波次数" collapse-tags-tooltip
style="width: 100px" placeholder="请选择谐波次数"
> style="width: 100px"
<el-option >
v-for="vv in item.countOptions" <el-option
:key="vv" v-for="vv in item.countOptions"
:label="vv" :key="vv"
:value="vv" :label="vv"
></el-option> :value="vv"
</el-select> ></el-option>
</el-form-item> </el-select>
</div> </el-form-item>
<el-form-item label="统计类型" label-width="80px"> </div>
<el-select v-model="searchForm.type" placeholder="请选择值类型"> <el-form-item for="-" label="统计类型" label-width="80px">
<el-option <el-select v-model="searchForm.type" placeholder="请选择值类型">
v-for="item in typeOptions" <el-option
:key="item.id" v-for="item in typeOptions"
:label="item.name" :key="item.id"
:value="item.id" :label="item.name"
></el-option> :value="item.id"
</el-select> ></el-option>
</el-form-item> </el-select>
</el-form> </el-form-item>
<div class="history_searchBtn"> </template>
<el-button type="primary" icon="el-icon-Search" @click="init(true)">查询</el-button> <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>
<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> </div>
</el-collapse-item> </el-collapse-item>
</el-collapse> </el-collapse>
@@ -184,7 +195,7 @@ import popup from './components/popup.vue'
import schemeTree from './components/schemeTree.vue' import schemeTree from './components/schemeTree.vue'
import { mainHeight } from '@/utils/layout' import { mainHeight } from '@/utils/layout'
import { queryByCode, queryCsDictTree } from '@/api/system-boot/dictTree' 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 { ElMessage } from 'element-plus'
import MyEchart from '@/components/echarts/MyEchart.vue' import MyEchart from '@/components/echarts/MyEchart.vue'
import { getTestRecordInfo, getHistoryTrend } from '@/api/cs-device-boot/planData' 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 { queryStatistical } from '@/api/system-boot/csstatisticalset'
import { TrendCharts, Plus, Platform } from '@element-plus/icons-vue' import { TrendCharts, Plus, Platform } from '@element-plus/icons-vue'
import { yMethod } from '@/utils/echartMethod' import { yMethod } from '@/utils/echartMethod'
import TableHeader from '@/components/table/header/index.vue'
const dictData = useDictData() const dictData = useDictData()
defineOptions({ defineOptions({
name: 'govern/device/planData/index' name: 'govern/device/planData/index'
@@ -362,9 +374,6 @@ const init = (flag: boolean) => {
if (historyDevId.value && legendDictList.value && legendDictList.value.selectedList) { if (historyDevId.value && legendDictList.value && legendDictList.value.selectedList) {
// 选择指标的时候切换legend内容和data数据 // 选择指标的时候切换legend内容和data数据
legendDictList.value?.selectedList?.map((item: any) => { legendDictList.value?.selectedList?.map((item: any) => {
// if (item.dataType == searchForm.value.index) {
// list.push(item.eleEpdPqdVOS)
// }
searchForm.value.index.map((vv: any) => { searchForm.value.index.map((vv: any) => {
if (item.dataType == vv) { if (item.dataType == vv) {
list.push(item.eleEpdPqdVOS) list.push(item.eleEpdPqdVOS)
@@ -434,9 +443,12 @@ const init = (flag: boolean) => {
unitList.push(item.unit) unitList.push(item.unit)
} }
}) })
xAxis = timeList.sort((a: any, b: any) => { xAxis = new Set(
return new Date(a).getTime() - new Date(b).getTime() timeList.sort((a: any, b: any) => {
}) return new Date(a).getTime() - new Date(b).getTime()
})
)
let [min, max] = [0, 0] let [min, max] = [0, 0]
list.map((item: any, index: any) => { list.map((item: any, index: any) => {
item.map((vv: any, indexs: any) => { item.map((vv: any, indexs: any) => {
@@ -455,7 +467,6 @@ const init = (flag: boolean) => {
item.max = max item.max = max
}) })
}) })
console.log(list, '00000000000000')
echartsData.value = { echartsData.value = {
options: { options: {
title: [ title: [
@@ -616,7 +627,8 @@ const init = (flag: boolean) => {
chartsList chartsList
.map((kk: any, kks: any) => { .map((kk: any, kks: any) => {
if (kk.statisticalName == vv.name) { if (kk.statisticalName == vv.name) {
return [xAxis[kks], kk.statisticalData] // xAxis[kks]
return [kk.time, kk.statisticalData]
} else { } else {
return '' return ''
} }
@@ -631,46 +643,46 @@ const init = (flag: boolean) => {
}) })
//处理多y轴 //处理多y轴
// if (unitList.length != 0 && unitList.length > 1) { // if (unitList.length != 0 && unitList.length > 1) {
console.log(max, min) console.log(max, min)
// echartsData.value.options.yAxis[0].yAxisIndex = 0 // echartsData.value.options.yAxis[0].yAxisIndex = 0
unitList.map((item: any, index: any) => { unitList.map((item: any, index: any) => {
if (index != unitList.length - 1) { if (index != unitList.length - 1) {
echartsData.value.options.yAxis.push({ echartsData.value.options.yAxis.push({
type: 'value', type: 'value',
position: 'right', position: 'right',
offset: index * 80, // y轴位置的偏移量 offset: index * 80, // y轴位置的偏移量
name: unitList[index + 1], name: unitList[index + 1],
axisLabel: { axisLabel: {
color: '#000', color: '#000',
fontSize: 14 fontSize: 14
}, },
axisTick: { axisTick: {
show: true show: true
}, },
axisLine: { axisLine: {
show: true, show: true,
lineStyle: { lineStyle: {
// color: colorList[index + 1] // 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'
}
} }
// 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) => { echartsData.value.options.series.map((item: any, index: any) => {
@@ -756,7 +768,7 @@ const handleExport = async () => {
xAxis = timeList.sort((a: any, b: any) => { xAxis = timeList.sort((a: any, b: any) => {
new Date(a).getTime() - new Date(b).getTime() new Date(a).getTime() - new Date(b).getTime()
}) })
// xAxis = Array.from(new Set(xAxis)) xAxis = Array.from(new Set(xAxis))
// 使用这个函数转换数据为CSV格式 // 使用这个函数转换数据为CSV格式
let csv: any = '' let csv: any = ''
const list = echartsData.value.options.series const list = echartsData.value.options.series
@@ -780,7 +792,6 @@ const handleExport = async () => {
count = index count = index
} }
let itemList: any = list[index].data[indexs] let itemList: any = list[index].data[indexs]
console.log(itemList)
if (itemList && itemList.length != 0) { if (itemList && itemList.length != 0) {
index == list.length - 1 ? (strs += itemList[1]) : (strs += itemList[1] + ',') index == list.length - 1 ? (strs += itemList[1]) : (strs += itemList[1] + ',')
} else { } else {
@@ -849,15 +860,15 @@ const formatCountOptions = (list: any) => {
}) })
} }
} }
const tableHeaderRef = ref<any>()
const searchFormIndex = ref<any>()
watch( watch(
() => searchForm.value.index, () => searchForm.value.index,
(val: any, oldval: any) => { (val: any, oldval: any) => {
if (val) { if (val) {
let list = val let list = val
// formatCountOptions(list) searchFormIndex.value = val
// if (val == 0) { formatCountOptions(list)
// countData.value = []
// }
countData.value.map((item: any, key: any) => { countData.value.map((item: any, key: any) => {
if ( if (
list.findIndex((vv: any) => { list.findIndex((vv: any) => {
@@ -886,13 +897,11 @@ onMounted(() => {
.device-manage { .device-manage {
display: flex; display: flex;
height: calc(100vh - 100px); height: calc(100vh - 100px);
// overflow-y: auto; // overflow-y: auto;
&-right { &-right {
// overflow: auto; // overflow: auto;
flex: 1; flex: 1;
padding: 10px 10px 10px 0; padding: 10px 10px 10px 0;
.el-descriptions__header { .el-descriptions__header {
height: 36px; height: 36px;
margin-bottom: 7px; margin-bottom: 7px;
@@ -921,7 +930,6 @@ onMounted(() => {
.history_title { .history_title {
width: 100%; width: 100%;
p { p {
height: 32px; height: 32px;
line-height: 32px; line-height: 32px;
@@ -933,51 +941,31 @@ onMounted(() => {
::v-deep .monitor_info { ::v-deep .monitor_info {
width: 100%; width: 100%;
.el-tabs__content { .el-tabs__content {
padding: 0 !important; padding: 0 !important;
min-height: 130px !important; min-height: 130px !important;
} }
} }
.history_collapse {
.history_header { height: calc(100vh - 300px);
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 {
width: 100%; width: 100%;
height: calc(100vh - 440px) !important; .history_trend {
flex: 1; width: 100%;
margin-top: 10px; 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 { ::v-deep .el-select {