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-09-25 16:31:45 +08:00
parent 470c8f5bd6
commit 96602ffe04
15 changed files with 467 additions and 531 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -9,18 +9,12 @@
<div class="device-control-right" v-if="deviceData">
<el-descriptions title="设备基本信息" class="mb10" :column="3" border>
<template #extra>
<!-- <el-button v-if="deviceType == '1'" size="small" type="primary" @click="handleDownLoadTemplate">
<!-- <el-button v-if="deviceType == '1'" type="primary" @click="handleDownLoadTemplate">
模版下载
</el-button> -->
<el-button v-if="deviceType == '1'" size="small" type="primary" @click="handleImport">
离线数据导入
</el-button>
<el-button v-if="deviceType == '1'" size="small" type="primary" @click="handleaddDevice">
设备补招
</el-button>
<el-button v-if="deviceType == '1'" size="small" type="primary" @click="handleAnalysisList">
解析列表
</el-button>
<el-button v-if="deviceType == '1'" type="primary" @click="handleImport">离线数据导入</el-button>
<el-button v-if="deviceType == '1'" type="primary" @click="handleaddDevice">设备补招</el-button>
<el-button v-if="deviceType == '1'" type="primary" @click="handleAnalysisList">解析列表</el-button>
</template>
<el-descriptions-item label="名称">
{{ deviceData.name ? deviceData.name : '/' }}
@@ -94,7 +88,7 @@
>
<el-form-item label="指标">
<el-input
style="width: 240px"
style="width: 160px"
v-model="formInline.searchValue"
autocomplete="off"
clearable
@@ -232,24 +226,24 @@
></el-pagination>
<!-- 趋势数据 -->
<div style="height: calc(100vh - 200px)" v-show="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 - 200px)" 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" size="small" :icon="Platform" @click="handleRecordWaves">
<!-- <el-button type="primary" :icon="Platform" @click="handleRecordWaves">
实时录波
</el-button> -->
<el-button type="primary" size="small" :icon="TrendCharts" @click="handleTrend">
实时趋势
</el-button>
<el-button type="primary" size="small" :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>
</div>
<div class="view_top_btn" v-if="!realTimeFlag">
<el-button type="primary" :icon="ArrowLeft" size="small" @click="handleReturn">返回</el-button>
<el-button type="primary" :icon="ArrowLeft" @click="handleReturn">返回</el-button>
</div>
<!-- 实时数据主界面组件 -->
<realTime v-if="realTimeFlag" ref="realTimeRef"></realTime>
@@ -264,7 +258,7 @@
></harmonicSpectrum>
</div>
<!-- 暂态事件 -->
<div style="height: calc(100vh - 200px)" v-show="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>
@@ -334,7 +328,7 @@ const formInline = reactive({
endTime: '',
id: '',
lineId: '',
dataLevel: ''
dataLevel: 'dataLevel'
})
const detail = ref<any>(null)
//是否显示实时数据默认内容
@@ -480,6 +474,7 @@ const timer: any = ref()
//tab点击事件
const handleClick = async (tab?: any) => {
tableLoading.value = true
formInline.dataLevel = 'Secondary'
// loading.value = true
//点击tab时更新dataSet最新值
if (tab && tab.props && tab.props.name && dataSet.value != tab.props.name) {
@@ -498,7 +493,6 @@ const handleClick = async (tab?: any) => {
window.clearInterval(timer.value)
}
// setTimeout(async () => {
//查询历史指标
if (dataSet.value.includes('_history')) {
formInline.startTime = datePickerRef.value && datePickerRef.value.timeValue[0]
@@ -531,8 +525,8 @@ const handleClick = async (tab?: any) => {
}
]
}
trendRef.value && trendRef.value.getTrendRequest(obj)
setTimeout(() => {
trendRef.value && trendRef.value.getTrendRequest(obj)
tableLoading.value = false
}, 1500)
}
@@ -587,8 +581,6 @@ const handleClick = async (tab?: any) => {
}, 1500)
})
}
// }, 100)
}
//模版下载
const handleDownLoadTemplate = () => {}

80
src/views/govern/device/control/tabs/components/realtrend.vue
View File

@@ -1,6 +1,7 @@
<!-- 实时数据 - 实时趋势 -->
<template>
<div class="realtrend">
qwww
<el-tabs type="border-card" v-model="activeName" @tab-click="handleClick">
<el-tab-pane v-for="(item, index) in tabsList" :label="item.groupName" :name="index" :key="index">
<div v-loading="loading">
@@ -29,48 +30,6 @@
</div>
</div>
</el-tab-pane>
<!-- <el-tab-pane label="谐波电压含有率" name="0">
<template #label>
<span class="custom-tabs-label">
<el-icon><TrendCharts /></el-icon>
谐波电压含有率
</span>
</template>
<div class="tab_info">
<vxe-grid v-if="activeName == '0'" class="reverse-table" v-bind="gridOptions"></vxe-grid>
<div class="charts">
<MyEchart ref="barCharts1" :options="echartsData1"></MyEchart>
</div>
</div>
</el-tab-pane>
<el-tab-pane label="间谐波电压含有率" name="1">
<template #label>
<span class="custom-tabs-label">
<el-icon><TrendCharts /></el-icon>
间谐波电压含有率
</span>
</template>
<div class="tab_info">
<vxe-grid v-if="activeName == '1'" class="reverse-table" v-bind="gridOptions"></vxe-grid>
<div class="charts">
<MyEchart ref="barCharts2" :options="echartsData2"></MyEchart>
</div>
</div>
</el-tab-pane>
<el-tab-pane label="谐波电流幅值" name="2">
<template #label>
<span class="custom-tabs-label">
<el-icon><DataLine /></el-icon>
谐波电流幅值
</span>
</template>
<div class="tab_info">
<vxe-grid v-if="activeName == '2'" class="reverse-table" v-bind="gridOptions"></vxe-grid>
<div class="charts">
<MyEchart ref="barCharts3" :options="echartsData3"></MyEchart>
</div>
</div>
</el-tab-pane> -->
</el-tabs>
</div>
</template>
@@ -107,19 +66,6 @@ const myColumns: any = ref([
])
const yAxisUnit: any = ref('')
// myColumns.value.map(item => {
// if (item.field == 'value') {
// item.title =
// activeName.value == '0'
// ? '谐波电压含有率(%)'
// : activeName.value == '1'
// ? '间谐波电压含有率(%)'
// : activeName.value == '2'
// ? '谐波电流幅值(A)'
// : ''
// yAxisUnit.value = item.title.split('(')[0]
// }
// })
const myData = tableList
const tabsList = ref([])
@@ -239,13 +185,7 @@ const reverseTable = () => {
reverseTable()
const echartsData: any = ref([]),
echartsData1: any = ref([]),
echartsData2: any = ref([]),
echartsData3: any = ref([]),
barCharts = ref(),
barCharts1 = ref(),
barCharts2 = ref(),
barCharts3 = ref()
barCharts = ref()
//加载echarts
const init = () => {
@@ -330,7 +270,7 @@ const init = () => {
yAxis: [
{
type: 'value',
name: chartsData?.value[0]?.unit ? '单位(' + chartsData?.value[0]?.unit+ ')' : '' ,
name: chartsData?.value[0]?.unit ? '单位(' + chartsData?.value[0]?.unit + ')' : '',
splitLine: {
show: false
},
@@ -359,7 +299,7 @@ const init = () => {
list.push({ phase: item.phase, title: item.title, list: item.phaseList })
}
})
const colorList = ['#0e8780', '#FFCC00', '#009900', '#CC0000', ]
const colorList = ['#0e8780', '#FFCC00', '#009900', '#CC0000']
list.map((item: any, index: any) => {
echartsData.value.options.legend.data.push(item.title)
echartsData.value.options.series.push({
@@ -383,16 +323,11 @@ const init = () => {
}
const handleClick = (tab: any, event: any) => {
// activeName.value = tabsList.value[tab.index].id
// activeName.value = tab.index
params.value.groupId = tabsList.value[tab.index].id
findRealTrendDataByGroupId(params.value)
// reverseTable()
init()
}
onMounted(() => {
// init()
})
onMounted(() => {})
defineExpose({ open })
</script>
<style lang="scss" scoped>
@@ -494,8 +429,5 @@ defineExpose({ open })
height: calc(100vh - 550px);
}
}
.custom-tabs-label {
display: flex;
align-items: center;
}
</style>

5
src/views/govern/device/control/tabs/components/waveFormAnalysis.vue
View File

@@ -561,10 +561,7 @@ defineExpose({ getWpData })
height: calc(100vh - 450px);
}
}
.custom-tabs-label {
display: flex;
align-items: center;
}
.waveFormAnalysis {
width: 100%;
height: 100%;

19
src/views/govern/device/control/tabs/event.vue
View File

@@ -1,13 +1,16 @@
<template>
<div class="header_btn">
<div class="header_btn" style="display: none">
<!-- <el-button type="primary" size="small" @click="handleWaveFormAnalysis(0)" v-if="!isWaveCharts">
波形解析
</el-button> -->
<el-button type="primary" size="small" @click="handleBack" v-if="isWaveCharts" :icon="ArrowLeft">
返回
</el-button>
</div>
<div class="view">
<div class="view" >
<TableHeader datePicker ref="headerRef">
<template #operation>
<el-button v-if="isWaveCharts" type="primary" @click="handleBack" :icon="ArrowLeft">返回</el-button>
</template>
</TableHeader>
<Table ref="tableRef" v-if="!isWaveCharts" />
<waveFormAnalysis v-if="isWaveCharts" ref="waveFormAnalysisRef" :wp="wp" />
</div>
@@ -17,6 +20,7 @@ import { ref, onMounted, provide, nextTick } from 'vue'
import { getTabsDataByType } from '@/api/cs-device-boot/EquipmentDelivery'
import TableStore from '@/utils/tableStore'
import Table from '@/components/table/index.vue'
import TableHeader from '@/components/table/header/index.vue'
import waveFormAnalysis from './components/waveFormAnalysis.vue'
import { ArrowLeft } from '@element-plus/icons-vue'
import { analyseWave } from '@/api/common'
@@ -26,10 +30,11 @@ const view = ref(true)
const view2 = ref(false)
const showBoxi = ref(true)
const bxactiveName = ref('ssbx')
const boxoList:any = ref([])
const boxoList: any = ref([])
const wp = ref({})
const value = ref(1)
const waveFormAnalysisRef = ref()
const headerRef = ref()
const tableStore: any = new TableStore({
url: '/cs-device-boot/csGroup/deviceDataByType',
publicHeight: 210,
@@ -111,6 +116,8 @@ const tableStore: any = new TableStore({
tableStore.table.params.lineId = tableParams.value.lineId
tableStore.table.params.list = tableParams.value.list
tableStore.table.params.type = 3
// tableStore.table.params.searchBeginTime = headerRef.value ? headerRef.value.timeValue[0] : ''
// tableStore.table.params.searchEndTime = headerRef.value ? headerRef.value.timeValue[1] : ''
},
loadCallback: () => {}
})

3
src/views/govern/device/control/tabs/realtime.vue
View File

@@ -466,6 +466,7 @@ const iRadioList: any = ref([]),
const getRealTimeData = async (val: any) => {
iRadioList.value = []
vRadioList.value = []
console.log(val, '999999999')
val.map((item: any) => {
//基波电流相角
if (item.statisticalName == 'Pq_FundIAng') {
@@ -490,7 +491,7 @@ const getRealTimeData = async (val: any) => {
listA.value.push(item)
}
})
console.log(listA.value, listV.value, '++++++++++++494')
echartsDataV1.value.options.series[0].data = [
{
name: 'A相',

73
src/views/govern/device/control/tabs/trend.vue
View File

@@ -2,6 +2,9 @@
<div>
<div class="history_header">
<el-form :model="searchForm" class="history_select" id="history_select">
<el-form-item>
<DatePicker ref="datePickerRef"></DatePicker>
</el-form-item>
<el-form-item label="统计指标" label-width="80px">
<el-select
multiple
@@ -36,19 +39,9 @@
</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" size="small" icon="el-icon-Search" @click="init()">查询</el-button>
<el-button type="primary" icon="el-icon-Search" @click="init()">查询</el-button>
</div>
</div>
<div class="history_chart" v-loading="loading">
@@ -71,15 +64,20 @@ import * as echarts from 'echarts'
import { isNonNullChain } from 'typescript'
import { position } from 'html2canvas/dist/types/css/property-descriptors/position'
import { read, writeFile, utils } from 'xlsx'
import TableStore from '@/utils/tableStore'
import Table from '@/components/table/index.vue'
import TableHeader from '@/components/table/header/index.vue'
import { getTabsDataByType } from '@/api/cs-device-boot/EquipmentDelivery'
import DatePicker from '@/components/form/datePicker/index.vue'
const dictData = useDictData()
defineOptions({
name: 'govern/device/manage'
name: 'govern/device/control'
})
//电压等级
const voltageLevelList = dictData.getBasicData('Dev_Voltage')
//接线方式
const volConTypeList = dictData.getBasicData('Dev_Connect')
//值类型
const pageHeight = mainHeight(20)
const loading = ref(true)
@@ -105,7 +103,9 @@ const typeOptions = [
searchForm.value = {
index: [],
type: typeOptions[0].id,
count: []
count: [],
searchBeginTime: '',
searchEndTime: ''
}
//统计指标
const indexOptions: any = ref([])
@@ -137,12 +137,13 @@ const range = (start: any, end: any, step: any) => {
}
//获取请求趋势数据参数
const trendRequestData = ref()
const getTrendRequest = async (val: any) => {
console.log(val, '拿到的请求参数')
const getTrendRequest = (val: any) => {
trendRequestData.value = val
init()
}
//初始化趋势图
const headerRef = ref()
const datePickerRef = ref()
const init = async () => {
loading.value = true
// 选择指标的时候切换legend内容和data数据
@@ -193,14 +194,15 @@ const init = async () => {
let obj = {
...trendRequestData.value,
list: lists,
valueType: searchForm.value.type
valueType: searchForm.value.type,
searchBeginTime: datePickerRef.value && datePickerRef.value.timeValue[0],
searchEndTime: datePickerRef.value && datePickerRef.value.timeValue[0]
}
if (obj.devId && obj.list.length != 0) {
try {
await getTabsDataByType(obj)
.then(res => {
console.log(res, '打印趋势图')
.then((res: any) => {
if (res.code == 'A0000') {
historyDataList.value = res.data
echartsData.value = null
@@ -220,17 +222,7 @@ const init = async () => {
}
})
xAxis = timeList.sort((a: any, b: any) => {
return (
a.replace('-', '').replace('-', '').replace(' ', '').replace(':', '').replace(':', '') -
0 -
(b
.replace('-', '')
.replace('-', '')
.replace(' ', '')
.replace(':', '')
.replace(':', '') -
0)
)
return new Date(a).getTime() - new Date(b).getTime()
})
echartsData.value = {
options: {
@@ -279,7 +271,7 @@ const init = async () => {
itemGap: 15,
type: 'scroll', // 开启滚动分页
// orient: 'vertical', // 垂直排列
right: '13%', // 位置调整
right: '3%', // 位置调整
top: 0,
bottom: 20,
width: 400,
@@ -287,9 +279,9 @@ const init = async () => {
},
grid: {
left: '3%',
right: '4%',
right: '5%',
bottom: '5%',
top: '5%',
top: '8%',
containLabel: true
},
xAxis: [
@@ -384,7 +376,6 @@ const init = async () => {
type: 'solid'
}
}
// yAxisIndex: index + 1
})
}
})
@@ -663,15 +654,15 @@ defineExpose({ getTrendRequest })
display: flex;
// flex-wrap: wrap;
#history_select {
width: 95%;
width: 100%;
display: flex;
justify-content: flex-start;
overflow-x: auto;
height: 45px;
// flex-wrap: wrap;
// justify-content: flex-start;
// overflow-x: auto;
height: auto;
flex-wrap: wrap;
.el-form-item {
flex: none;
max-width: 380px !important;
flex: none !important;
// max-width: 380px;
}
.el-select {
margin-right: 10px;
@@ -693,7 +684,7 @@ defineExpose({ getTrendRequest })
.history_chart {
width: 100%;
height: calc(100vh - 400px) !important;
height: calc(100vh - 450px) !important;
// flex: 1;
margin-top: 10px;
}