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

设备监控二级页面

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

535
src/views/govern/device/control/tabs/components/harmonicSpectrum.vue
View File

@@ -1,18 +1,541 @@
<!-- 谐波频谱 -->
<template>
<div class="harmonic">
谐波频谱
<div class="harmonic_select">
<!-- {{ searchForm.index }} -->
<el-form :model="searchForm" class="history_select" id="history_select">
<el-form-item label="稳态指标">
<el-select
multiple
:multiple-limit="3"
collapse-tags
collapse-tags-tooltip
v-model="searchForm.index"
placeholder="请选择统计指标"
>
<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>
<el-button type="primary" @click="init">查询</el-button>
</div>
<div class="harmonic_body">
<div class="harmonic_body_charts" v-if="searchForm.index[0]">
<MyEchart ref="barCharts1" :options="echartsData1"></MyEchart>
</div>
<div class="harmonic_body_charts" v-if="searchForm.index[1]">
<MyEchart ref="barCharts2" :options="echartsData2"></MyEchart>
</div>
<div class="harmonic_body_charts" v-if="searchForm.index[2]">
<MyEchart ref="barCharts3" :options="echartsData3"></MyEchart>
</div>
</div>
</div>
</template>
<script lang="ts" setup>
import { ref, onMounted } from 'vue'
import { ref, onMounted, watch } from 'vue'
import { queryByCode, queryByid, queryCsDictTree } from '@/api/system-boot/dictTree'
import { queryStatistical } from '@/api/system-boot/csstatisticalset'
import MyEchart from '@/components/echarts/MyEchart.vue'
const searchForm = ref({})
searchForm.value = {
index: []
}
//统计指标
const indexOptions: any = ref([])
const legendDictList: any = ref([])
queryByCode('portable-harmonic').then(res => {
queryCsDictTree(res.data.id).then(item => {
indexOptions.value = item.data
searchForm.value.index[0] = indexOptions.value[0].id
})
queryStatistical(res.data.id).then(vv => {
legendDictList.value = vv.data
})
})
const tableList: any = ref([])
for (let i = 0; i < 100; i++) {
tableList.value.push({
name: i + 1,
value: Math.floor(Math.random() * 101)
})
}
const echartsData1: any = ref([]),
echartsData2: any = ref([]),
echartsData3: any = ref([]),
barCharts1 = ref(),
barCharts2 = ref(),
barCharts3 = ref()
//查询谐波频谱折线图
const chartsTitle1 = ref('')
const chartsTitle2 = ref('')
const chartsTitle3 = ref('')
const init = () => {
const xDataList: any = [],
yDataList1: any = [],
yDataList2: any = [],
yDataList3: any = []
tableList.value.map((item: any) => {
xDataList.push(item.name)
yDataList1.push(item.value)
yDataList2.push(Math.floor(Math.random() * 101) + Math.floor(Math.random() * 101))
yDataList3.push(Math.floor(Math.random() * 101) + Math.floor(Math.random() * 101))
})
indexOptions.value.map((item:any)=>{
if(item.id==searchForm.value.index[0]){
chartsTitle1.value=item.name
}
if(item.id==searchForm.value.index[1]){
chartsTitle2.value=item.name
}
if(item.id==searchForm.value.index[2]){
chartsTitle3.value=item.name
}
})
console.log( chartsTitle1.value, chartsTitle2.value, chartsTitle3.value,"666677777");
if (searchForm.value.index[0]) {
echartsData1.value = {
options: {
// backgroundColor: '#0f375f',
title: [
{
left: '10%',
top: 0,
text:chartsTitle1.value
}
],
grid: {
top: '8%',
bottom: '15%', //也可设置left和right设置距离来控制图表的大小
left: '3%',
right: '5%'
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
label: {
show: false
}
}
},
legend: {
data: ['A相', 'B相', 'C相'],
top: '2%',
right: '2%'
// icon: 'icon'
// icon: "circle", //icon 长方形 circle 圆形 arrow箭头型 diamond菱形
// itemWidth: 14,
// itemHeight: 14,
// textStyle: {
// inside: true,
// color: '#000',
// padding: [11, 0, 10, 0],
// align: 'left',
// verticalAlign: 'center',
// fontSize: 14,
// rich: {}
// }
},
xAxis: {
// name: '时间(ms)',
data: xDataList,
axisLine: {
show: true, //隐藏X轴轴线
lineStyle: {
color: '#000'
}
},
axisTick: {
show: true //隐藏X轴刻度
},
axisPointer: {
type: 'shadow'
},
axisLabel: {
show: true,
textStyle: {
color: '#000' //X轴文字颜色
}
}
},
yAxis: [
{
type: 'value',
name: 'kv',
splitLine: {
show: false
},
axisTick: {
show: true
},
axisLine: {
show: true,
lineStyle: {
color: '#000'
}
},
smooth: true
}
],
series: [
{
name: 'A相',
type: 'line',
barMaxWidth: 24, //使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用
itemStyle: {
// normal: {
barBorderRadius: [3, 3, 0, 0],
color: '#00CC99'
// }e
},
data: yDataList1,
symbol: 'none' // 设置为 'none' 去掉折点小圆
},
{
name: 'B相',
type: 'line',
barMaxWidth: 24,
itemStyle: {
// normal: {
barBorderRadius: [3, 3, 0, 0],
color: '#FF9900'
// }
},
data: yDataList2,
symbol: 'none' // 设置为 'none' 去掉折点小圆
},
{
name: 'C相',
type: 'line',
barMaxWidth: 24,
itemStyle: {
// normal: {
barBorderRadius: [3, 3, 0, 0]
// color: '#FF9900'
// }
},
data: yDataList3,
symbol: 'none' // 设置为 'none' 去掉折点小圆
}
]
}
}
barCharts1.value && barCharts1.value.initChart()
}
if (searchForm.value.index[1]) {
echartsData2.value = {
options: {
// backgroundColor: '#0f375f',
title: [
{
left: '10%',
top: 0,
text:chartsTitle2.value
}
],
grid: {
top: '8%',
bottom: '15%', //也可设置left和right设置距离来控制图表的大小
left: '3%',
right: '5%'
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
label: {
show: false
}
}
},
legend: {
data: ['A相', 'B相', 'C相'],
top: '2%',
right: '2%'
// icon: 'icon'
// icon: "circle", //icon 长方形 circle 圆形 arrow箭头型 diamond菱形
// itemWidth: 14,
// itemHeight: 14,
// textStyle: {
// inside: true,
// color: '#000',
// padding: [11, 0, 10, 0],
// align: 'left',
// verticalAlign: 'center',
// fontSize: 14,
// rich: {}
// }
},
xAxis: {
// name: '时间(ms)',
data: xDataList,
axisLine: {
show: true, //隐藏X轴轴线
lineStyle: {
color: '#000'
}
},
axisTick: {
show: true //隐藏X轴刻度
},
axisPointer: {
type: 'shadow'
},
axisLabel: {
show: true,
textStyle: {
color: '#000' //X轴文字颜色
}
}
},
yAxis: [
{
type: 'value',
name: 'kv',
splitLine: {
show: false
},
axisTick: {
show: true
},
axisLine: {
show: true,
lineStyle: {
color: '#000'
}
}
}
],
series: [
{
name: 'A相',
type: 'line',
barMaxWidth: 24, //使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用
itemStyle: {
// normal: {
barBorderRadius: [3, 3, 0, 0],
color: '#00CC99'
// }e
},
data: yDataList1,
symbol: 'none' // 设置为 'none' 去掉折点小圆
},
{
name: 'B相',
type: 'line',
barMaxWidth: 24,
itemStyle: {
// normal: {
barBorderRadius: [3, 3, 0, 0],
color: '#FF9900'
// }
},
data: yDataList2,
symbol: 'none' // 设置为 'none' 去掉折点小圆
},
{
name: 'C相',
type: 'line',
barMaxWidth: 24,
itemStyle: {
// normal: {
barBorderRadius: [3, 3, 0, 0]
// color: '#FF9900'
// }
},
data: yDataList3,
symbol: 'none' // 设置为 'none' 去掉折点小圆
}
]
}
}
barCharts2.value && barCharts2.value.initChart()
}
if (searchForm.value.index[2]) {
echartsData3.value = {
options: {
// backgroundColor: '#0f375f',
title: [
{
left: '10%',
top: 0,
text: chartsTitle3.value
}
],
grid: {
top: '8%',
bottom: '15%', //也可设置left和right设置距离来控制图表的大小
left: '3%',
right: '5%'
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
label: {
show: false
}
}
},
legend: {
data: ['A相', 'B相', 'C相'],
top: '2%',
right: '2%'
// icon: 'icon'
// icon: "circle", //icon 长方形 circle 圆形 arrow箭头型 diamond菱形
// itemWidth: 14,
// itemHeight: 14,
// textStyle: {
// inside: true,
// color: '#000',
// padding: [11, 0, 10, 0],
// align: 'left',
// verticalAlign: 'center',
// fontSize: 14,
// rich: {}
// }
},
xAxis: {
// name: '时间(ms)',
data: xDataList,
axisLine: {
show: true, //隐藏X轴轴线
lineStyle: {
color: '#000'
}
},
axisTick: {
show: true //隐藏X轴刻度
},
axisPointer: {
type: 'shadow'
},
axisLabel: {
show: true,
textStyle: {
color: '#000' //X轴文字颜色
}
}
},
yAxis: [
{
type: 'value',
name: 'kv',
splitLine: {
show: false
},
axisTick: {
show: true
},
axisLine: {
show: true,
lineStyle: {
color: '#000'
}
}
}
],
series: [
{
name: 'A相',
type: 'line',
barMaxWidth: 24, //使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用
itemStyle: {
// normal: {
barBorderRadius: [3, 3, 0, 0],
color: '#00CC99'
// }e
},
data: yDataList1,
symbol: 'none' // 设置为 'none' 去掉折点小圆
},
{
name: 'B相',
type: 'line',
barMaxWidth: 24,
itemStyle: {
// normal: {
barBorderRadius: [3, 3, 0, 0],
color: '#FF9900'
// }
},
data: yDataList2,
symbol: 'none' // 设置为 'none' 去掉折点小圆
},
{
name: 'C相',
type: 'line',
barMaxWidth: 24,
itemStyle: {
// normal: {
barBorderRadius: [3, 3, 0, 0]
// color: '#FF9900'
// }
},
data: yDataList3,
symbol: 'none' // 设置为 'none' 去掉折点小圆
}
]
}
}
barCharts3.value && barCharts3.value.initChart()
}
}
watch(
() => searchForm.value.index,
(val: any, oldval: any) => {
if (val && val.length != 0) {
init()
}
},
{
deep: true,
immediate: true
}
)
onMounted(() => {
console.log()
// init()
})
defineExpose({ init })
</script>
<style lang="scss" scoped>
.harmonic{
width:100%;
height:100%;
border: 2px solid green;
.harmonic {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
position: relative;
.harmonic_select {
width: 50%;
height: 30px;
display: flex;
position: absolute;
top: -30px;
left: 0;
justify-content: flex-start;
.el-button {
margin-left: 10px;
}
}
.harmonic_body {
flex: 1;
overflow-y: auto;
padding-bottom: 200px;
.harmonic_body_charts {
height: 200px;
margin: 15px 0;
}
}
}
</style>

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

@@ -1,3 +1,4 @@
<!-- 实时趋势 -->
<template>
<div class="realtrend">
<el-tabs type="border-card" v-model="activeName" @tab-click="handleClick">
@@ -532,7 +533,7 @@ const handleClick = (tab: any, event: any) => {
: activeName.value == '2'
? '谐波电流幅值(A)'
: ''
yAxisUnit.value = item.title.split('(')[0]
yAxisUnit.value = item.title.split('(')[0]
}
})
reverseTable()

1
src/views/govern/device/control/tabs/components/recordwoves.vue
View File

@@ -1,3 +1,4 @@
<!-- 实时录波 -->
<template>
<div class="record">
实时录波

122
src/views/govern/device/control/tabs/components/tableInfo.vue
View File

@@ -1,122 +0,0 @@
<template>
<div v-if="tableData.length != 0">
<!-- div设计table -->
<div class="table" v-for="(item, index) in columnsData" :key="index">
<!-- 单层表头 -->
<div class="thead">
<div class="thead_top">
{{ item[0].showName ? item[0].showName : '' }}({{ item[0].unit }})
</div>
<div class="thead_bot">
<div class="thead_bot_cell" v-for="(vv, key) in item" :key="key">
{{ vv.phase + '相 ' }}
</div>
</div>
</div>
<!-- 有合并表头的数据 -->
<div class="tbody">
<div class="tbody_cell" v-for="(vv, key) in item" :key="key">
{{
tableData.find(item => {
return item.anotherName == vv.showName && item.phase == vv.phase
})?.statisticalData
? tableData.find(item => {
return item.anotherName == vv.showName && item.phase == vv.phase
})?.statisticalData
: '/'
}}
</div>
</div>
</div>
</div>
</template>
<script lang="ts" setup>
import { ref, nextTick, onMounted } from 'vue'
import { getRealTimeTableList } from '@/api/cs-device-boot/EquipmentDelivery'
const loading = ref(false)
const tableData: any = ref([])
loading.value = true
const columnsData: any = ref([])
const getColumns = () => {
getRealTimeTableList().then(res => {
columnsData.value = res.data
})
}
nextTick(() => {})
onMounted(() => {
getColumns()
loading.value = false
})
const getTableData = (list: any) => {
tableData.value = list
loading.value = false
columnsData.value.map((item: any) => {
item.map((vv: any) => {
vv.statisticalData = list.find((kk: any) => {
return kk.anotherName == vv.showName && kk.phase == vv.phase
})?.statisticalData
})
})
}
defineExpose({ getTableData })
</script>
<style lang="scss" scoped>
// ::v-deep .vxe-table--empty-content{
// display: none !important;
// }
.table {
width: 100%;
height: 120px;
border: 1px solid #eee;
border-bottom: 2px solid #eee;
margin-bottom: 20px;
display: flex;
flex-direction: column;
.thead {
width: 100%;
height: auto;
background: #f4f6f9;
text-align: center;
display: flex;
flex-direction: column;
.thead_top {
width: 100%;
height: 40px;
line-height: 40px;
border: 1px solid #eee;
color: #111;
font-size: 14px;
font-weight: 800;
}
.thead_bot {
width: 100%;
height: 40px;
line-height: 40px;
display: flex;
color: #111;
font-size: 14px;
font-weight: 800;
.thead_bot_cell {
flex: 1;
border: 1px solid #eee;
}
}
}
.tbody {
flex: 1;
display: flex;
text-align: center;
.tbody_cell {
flex: 1;
text-align: center;
line-height: 40px;
border: 1px solid #eee;
border-bottom: 0;
}
}
.tbody:hover {
background: #f4f6f9;
}
}
</style>

576
src/views/govern/device/control/tabs/components/waveFormAnalysis.vue Normal file
View File

@@ -0,0 +1,576 @@
<!-- 波形解析组件 -->
<template>
<div class="waveFormAnalysis">
<div class="waveFormAnalysis_header">
<el-form-item label="值类型选择">
<el-select v-model="searchForm.type" style="width: 200px">
<el-option label="一次值" :value="0"></el-option>
</el-select>
</el-form-item>
</div>
<el-tabs class="waveFormAnalysis_body" type="border-card" v-model="activeName" @tab-click="handleClick">
<el-tab-pane label="瞬时波形" name="0">
<template #label>
<span class="custom-tabs-label">
<el-icon><TrendCharts /></el-icon>
瞬时波形
</span>
</template>
<div class="tab_info">
<div class="charts">
<MyEchart ref="barCharts1" :options="echartsData1"></MyEchart>
</div>
</div>
</el-tab-pane>
<el-tab-pane label="RMS波形" name="1">
<template #label>
<span class="custom-tabs-label">
<el-icon><TrendCharts /></el-icon>
RMS波形
</span>
</template>
<div class="tab_info">
<div class="charts">
<MyEchart ref="barCharts2" :options="echartsData2"></MyEchart>
</div>
</div>
</el-tab-pane>
</el-tabs>
</div>
</template>
<script lang="ts" setup>
import { ref, onMounted, reactive } from 'vue'
import { VxeGridProps, VxeGridPropTypes } from 'vxe-table'
import { defaultAttribute } from '@/components/table/defaultAttribute'
import MyEchart from '@/components/echarts/MyEchart.vue'
import { Platform, TrendCharts, DataLine } from '@element-plus/icons-vue'
const searchForm = ref({
type: 0
})
const activeName = ref('0')
const tableList: any = ref([])
for (let i = 0; i < 500; i++) {
tableList.value.push({
name: i + 1,
value: Math.floor(Math.random() * 101)
})
}
interface RowVO {
[key: string]: any
}
//谐波电压含有率
const gridOptions = ref<VxeGridProps<RowVO>>({
border: true,
showOverflow: true,
showHeader: false,
columns: [],
data: [],
columnConfig: {
resizable: true
},
align: 'center'
})
gridOptions.value = { ...defaultAttribute, ...gridOptions.value }
const yAxisUnit: any = ref('')
const echartsData1: any = ref([]),
echartsData2: any = ref([]),
echartsData3: any = ref([]),
barCharts1 = ref(),
barCharts2 = ref(),
barCharts3 = ref()
//加载echarts
const init = () => {
const xDataList: any = [],
yDataList1: any = [],
yDataList2: any = [],
yDataList3: any = []
tableList.value.map((item: any) => {
xDataList.push(item.name)
yDataList1.push(item.value)
yDataList2.push(Math.floor(Math.random() * 101) + Math.floor(Math.random() * 101))
yDataList3.push(Math.floor(Math.random() * 101) + Math.floor(Math.random() * 101))
})
if (activeName.value == '0') {
echartsData1.value = {
options: {
// backgroundColor: '#0f375f',
grid: {
top: '8%',
bottom: '15%', //也可设置left和right设置距离来控制图表的大小
left: '3%',
right: '5%'
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
label: {
show: false
}
}
},
legend: {
data: ['A相', 'B相', 'C相'],
top: '2%',
right: '2%'
// icon: 'icon'
// icon: "circle", //icon 长方形 circle 圆形 arrow箭头型 diamond菱形
// itemWidth: 14,
// itemHeight: 14,
// textStyle: {
// inside: true,
// color: '#000',
// padding: [11, 0, 10, 0],
// align: 'left',
// verticalAlign: 'center',
// fontSize: 14,
// rich: {}
// }
},
xAxis: {
name: '时间(ms)',
data: xDataList,
axisLine: {
show: true, //隐藏X轴轴线
lineStyle: {
color: '#000'
}
},
axisTick: {
show: true //隐藏X轴刻度
},
axisPointer: {
type: 'shadow'
},
axisLabel: {
show: true,
textStyle: {
color: '#000' //X轴文字颜色
}
}
},
yAxis: [
{
type: 'value',
name: 'kv',
splitLine: {
show: false
},
axisTick: {
show: true
},
axisLine: {
show: true,
lineStyle: {
color: '#000'
}
}
}
],
series: [
{
name: 'A相',
type: 'line',
barMaxWidth: 24, //使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用
itemStyle: {
// normal: {
barBorderRadius: [3, 3, 0, 0],
color: '#00CC99'
// }e
},
data: yDataList1
},
{
name: 'B相',
type: 'line',
barMaxWidth: 24,
itemStyle: {
// normal: {
barBorderRadius: [3, 3, 0, 0],
color: '#FF9900'
// }
},
data: yDataList2
},
{
name: 'C相',
type: 'line',
barMaxWidth: 24,
itemStyle: {
// normal: {
barBorderRadius: [3, 3, 0, 0]
// color: '#FF9900'
// }
},
data: yDataList3
}
]
}
}
barCharts1.value.initChart()
} else if (activeName.value == '1') {
echartsData2.value = {
options: {
// backgroundColor: '#0f375f',
grid: {
top: '8%',
bottom: '15%', //也可设置left和right设置距离来控制图表的大小
left: '3%',
right: '5%'
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
label: {
show: false
}
}
},
legend: {
data: ['A相', 'B相', 'C相'],
top: '2%',
right: '2%'
// icon: 'icon'
// icon: "circle", //icon 长方形 circle 圆形 arrow箭头型 diamond菱形
// itemWidth: 14,
// itemHeight: 14,
// textStyle: {
// inside: true,
// color: '#000',
// padding: [11, 0, 10, 0],
// align: 'left',
// verticalAlign: 'center',
// fontSize: 14,
// rich: {}
// }
},
xAxis: {
name: '时间(ms)',
data: xDataList,
axisLine: {
show: true, //隐藏X轴轴线
lineStyle: {
color: '#000'
}
},
axisTick: {
show: true //隐藏X轴刻度
},
axisPointer: {
type: 'shadow'
},
axisLabel: {
show: true,
textStyle: {
color: '#000' //X轴文字颜色
}
}
},
yAxis: [
{
type: 'value',
name: 'kv',
splitLine: {
show: false
},
axisTick: {
show: true
},
axisLine: {
show: true,
lineStyle: {
color: '#000'
}
}
}
],
series: [
{
name: 'A相',
type: 'line',
barMaxWidth: 24, //使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用
itemStyle: {
// normal: {
barBorderRadius: [3, 3, 0, 0],
color: '#00CC99'
// }e
},
data: yDataList1
},
{
name: 'B相',
type: 'line',
barMaxWidth: 24,
itemStyle: {
// normal: {
barBorderRadius: [3, 3, 0, 0],
color: '#FF9900'
// }
},
data: yDataList2
},
{
name: 'C相',
type: 'line',
barMaxWidth: 24,
itemStyle: {
// normal: {
barBorderRadius: [3, 3, 0, 0]
// color: '#FF9900'
// }
},
data: yDataList3
}
]
}
}
barCharts2.value.initChart()
} else if (activeName.value == '2') {
echartsData3.value = {
options: {
// backgroundColor: '#0f375f',
grid: {
top: '8%',
bottom: '15%', //也可设置left和right设置距离来控制图表的大小
left: '3%',
right: '5%'
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
label: {
show: false
}
}
},
legend: {
data: ['A相', 'B相', 'C相'],
top: '2%',
right: '2%'
// icon: 'icon'
// icon: "circle", //icon 长方形 circle 圆形 arrow箭头型 diamond菱形
// itemWidth: 14,
// itemHeight: 14,
// textStyle: {
// inside: true,
// color: '#000',
// padding: [11, 0, 10, 0],
// align: 'left',
// verticalAlign: 'center',
// fontSize: 14,
// rich: {}
// }
},
xAxis: {
name: '时间(ms)',
data: xDataList,
axisLine: {
show: true, //隐藏X轴轴线
lineStyle: {
color: '#000'
}
},
axisTick: {
show: true //隐藏X轴刻度
},
axisPointer: {
type: 'shadow'
},
axisLabel: {
show: true,
textStyle: {
color: '#000' //X轴文字颜色
}
}
},
yAxis: [
{
type: 'value',
name: 'kv',
splitLine: {
show: false
},
axisTick: {
show: true
},
axisLine: {
show: true,
lineStyle: {
color: '#000'
}
}
}
],
series: [
{
name: 'A相',
type: 'line',
barMaxWidth: 24, //使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用
itemStyle: {
// normal: {
barBorderRadius: [3, 3, 0, 0],
color: '#00CC99'
// }e
},
data: yDataList1
},
{
name: 'B相',
type: 'line',
barMaxWidth: 24,
itemStyle: {
// normal: {
barBorderRadius: [3, 3, 0, 0],
color: '#FF9900'
// }
},
data: yDataList2
},
{
name: 'C相',
type: 'line',
barMaxWidth: 24,
itemStyle: {
// normal: {
barBorderRadius: [3, 3, 0, 0]
// color: '#FF9900'
// }
},
data: yDataList3
}
]
}
}
barCharts3.value.initChart()
}
}
const handleClick = (tab: any, event: any) => {
activeName.value = tab.index
init()
}
onMounted(() => {
init()
})
</script>
<style lang="scss" scoped>
.realtrend {
width: 100%;
height: 100%;
.table_info {
width: 100%;
height: auto;
overflow-x: auto;
.table {
width: auto;
height: auto;
border: 2px solid #eee;
display: flex;
flex-direction: column;
.thead {
width: 100%;
height: 40px;
display: flex;
border-bottom: 2px solid #eee;
.thead_left {
width: 200px !important;
height: 100%;
line-height: 40px;
text-align: center;
font-size: 14px;
font-weight: 800;
}
.thead_right {
flex: 1;
display: flex;
.thead_right_item {
flex: none;
width: 100px;
text-align: center;
line-height: 40px;
border-left: 1px solid #eee;
}
}
}
.tbody {
width: 100%;
height: 40px;
display: flex;
.tbody_left {
width: 200px !important;
height: 100%;
line-height: 40px;
text-align: center;
font-size: 14px;
font-weight: 800;
}
.tbody_right {
flex: 1;
display: flex;
.tbody_right_item {
flex: none;
width: 100px;
text-align: center;
line-height: 40px;
border-left: 1px solid #eee;
}
}
}
}
}
}
.reverse-table {
// max-height:120px !important;
}
.reverse-table .vxe-body--row .vxe-body--column:first-child {
background-color: #f8f8f9;
}
::v-deep .vxe-table--render-wrapper {
height: 90px !important;
max-height: 90px !important;
overflow-x: auto !important;
min-height: 0 !important;
}
::v-deep .body--wrapper {
height: 90px !important;
max-height: 90px !important;
min-height: 0 !important;
}
.tab_info {
width: 100%;
height: calc(100vh - 450px);
// overflow: auto;
// padding-bottom: 20px;
.charts {
width: 100%;
margin-top: 10px;
height: calc(100vh - 450px);
}
}
.custom-tabs-label {
display: flex;
align-items: center;
}
.waveFormAnalysis {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
position: relative;
.waveFormAnalysis_header {
position: absolute;
top: -30px;
left:0;
}
.waveFormAnalysis_body{
margin-top: 15px;
}
}
</style>

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

@@ -1,19 +1,93 @@
<template>
<div class="header_btn">
<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_top">
</div>
<div class="view_bot">
</div>
<Table ref="tableRef" v-if="!isWaveCharts" />
<waveFormAnalysis ref="waveFormAnalysisRef" v-if="isWaveCharts" />
</div>
</template>
<script lang="ts" setup>
import { ref, onMounted } from 'vue'
import { ref, onMounted, provide } from 'vue'
import { getTabsDataByType } from '@/api/cs-device-boot/EquipmentDelivery'
import TableStore from '@/utils/tableStore'
import Table from '@/components/table/index.vue'
import waveFormAnalysis from './components/waveFormAnalysis.vue'
import {ArrowLeft} from '@element-plus/icons-vue'
const tableParams: any = ref({})
const tableStore: any = new TableStore({
url: '/cs-device-boot/csGroup/deviceDataByType',
publicHeight: 210,
method: 'POST',
column: [
// { width: '60', type: 'checkbox', fixed: 'left' },
{ title: '序号', type: 'seq', width: 80 },
{ field: 'devName', title: '发生时刻', minWidth: 170 },
{ field: 'lineName', title: '工程名称', minWidth: 170 },
{ field: 'startTime', title: '项目名称', minWidth: 170 },
{ field: 'endTime', title: '测试项名称', minWidth: 170 },
{ field: 'endTime', title: '事件描述', minWidth: 170 },
{ field: 'endTime', title: '相别', minWidth: 170 },
{ field: 'endTime', title: '持续时间(s)', minWidth: 170 },
{ field: 'endTime', title: '暂降幅值(%)', minWidth: 170 },
{
title: '操作',
width: '180',
render: 'buttons',
buttons: [
{
name: 'edit',
title: '波形解析',
type: 'primary',
icon: 'el-icon-Check',
render: 'basicButton',
click: row => {
handleWaveFormAnalysis(row)
}
}
]
}
],
beforeSearchFun: () => {
tableStore.table.params.devId = tableParams.value.devId
tableStore.table.params.lineId = tableParams.value.lineId
tableStore.table.params.list = tableParams.value.list
tableStore.table.params.type = 3
},
loadCallback: () => {}
})
provide('tableStore', tableStore)
const isWaveCharts = ref(false)
//获取请求参数
const getTableParams = (val: any) => {
tableParams.value = val
console.log(tableParams.value, '暂态时间表格请求参数')
isWaveCharts.value = false
tableStore.index()
}
//波形解析组件
const handleWaveFormAnalysis = (val: any) => {
console.log(val, '波形解析')
isWaveCharts.value = true
}
//返回
const handleBack=()=>{
isWaveCharts.value = false;
tableStore.index()
}
defineExpose({ getTableParams })
onMounted(() => {
console.log()
tableStore.index()
})
</script>
<style lang="less" scoped>
<style lang="scss" scoped>
.header_btn{
width: 100%;
height: 30px;
display: flex;
justify-content: flex-end;
align-items: center;
}
</style>

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

@@ -14,7 +14,7 @@
</div>
<!-- 右侧仪表盘 -->
<div class="view_top_right">
<div class="right_chartsitle">电流有效值</div>
<div class="right_charts_title">电流有效值</div>
<div class="right_charts"><MyEchart ref="pieChart4" :options="echartsDataA1"></MyEchart></div>
<div class="right_charts"><MyEchart ref="pieChart5" :options="echartsDataA2"></MyEchart></div>
<div class="right_charts"><MyEchart ref="pieChart6" :options="echartsDataA3"></MyEchart></div>
@@ -22,7 +22,6 @@
</div>
<div class="view_bot">
<div class="view_bot_tables">
<!-- <tableInfo ref="tableInfoRef" /> -->
<!-- 表格数据 -->
<div v-if="tableData.length != 0">
<!-- div设计table -->
@@ -62,7 +61,6 @@
import { ref, onMounted } from 'vue'
import MyEchart from '@/components/echarts/MyEchart.vue'
import { getRealTimeTableList } from '@/api/cs-device-boot/EquipmentDelivery'
import tableInfo from './components/tableInfo.vue'
import * as echarts from 'echarts'
import { split } from 'lodash-es'
const pieChartRef: any = ref()
@@ -159,642 +157,6 @@ const init = () => {
},
legend: [],
series: [
// {
// name: 'atitle +电压有效值',
// type: 'gauge',
// center: ['50%', '30%'], // 默认全局居中
// radius: '50%',
// min: 0,
// max: 180,
// startAngle: 180,
// endAngle: 90,
// splitNumber: 2,
// axisLine: {
// // 坐标轴线
// lineStyle: {
// // 属性lineStyle控制线条样式
// color: [
// [0.25, '#DAA520'],
// [0.5, '#DAA520'],
// [0.75, '#DAA520'],
// [1, '#DAA520']
// ],
// width: 5
// }
// },
// axisTick: {
// // 坐标轴小标记
// length: 12, // 属性length控制线长
// lineStyle: {
// // 属性lineStyle控制线条样式
// color: 'auto'
// }
// },
// splitLine: {
// // 分隔线
// length: 20, // 属性length控制线长
// lineStyle: {
// // 属性lineStyle（详见lineStyle）控制线条样式
// color: 'auto'
// }
// },
// pointer: {
// width: 5
// },
// title: {
// offsetCenter: ['-125%', '-55%'] // x, y，单位px
// },
// detail: {
// // 其余属性默认使用全局文本样式，详见TEXTSTYLE
// fontWeight: 'bolder',
// offsetCenter: ['40%', '-35%'],
// fontSize: '35px'
// },
// data: [
// {
// // value: [0],
// // name:' atitle + (kV)'
// }
// ]
// },
// {
// name: ' btitle + 电压有效值',
// type: 'gauge',
// center: ['20%', '60%'], // 默认全局居中
// radius: '50%',
// min: 0,
// max: 180,
// startAngle: 180,
// endAngle: 90,
// splitNumber: 2,
// axisLine: {
// // 坐标轴线
// lineStyle: {
// // 属性lineStyle控制线条样式
// color: [
// [0.25, '#2E8B57'],
// [0.5, '#2E8B57'],
// [0.75, '#2E8B57'],
// [1, '#2E8B57']
// ],
// width: 5
// }
// },
// axisTick: {
// // 坐标轴小标记
// length: 12, // 属性length控制线长
// lineStyle: {
// // 属性lineStyle控制线条样式
// color: 'auto'
// }
// },
// splitLine: {
// // 分隔线
// length: 20, // 属性length控制线长
// lineStyle: {
// // 属性lineStyle（详见lineStyle）控制线条样式
// color: 'auto'
// }
// },
// pointer: {
// width: 5
// },
// title: {
// offsetCenter: ['-125%', '-55%'] // x, y，单位px
// },
// detail: {
// // 其余属性默认使用全局文本样式，详见TEXTSTYLE
// fontWeight: 'bolder',
// offsetCenter: ['40%', '-35%'],
// fontSize: '35px'
// },
// data: [
// {
// // value: [0],
// // name: ' btitle +(kV)'
// }
// ]
// },
// {
// name: 'ctitle + 电压有效值',
// type: 'gauge',
// center: ['20%', '90%'], // 默认全局居中
// radius: '50%',
// min: 0,
// max: 180,
// startAngle: 180,
// endAngle: 90,
// splitNumber: 2,
// axisLine: {
// // 坐标轴线
// lineStyle: {
// // 属性lineStyle控制线条样式
// color: [
// [0.25, '#A52a2a'],
// [0.5, '#A52a2a'],
// [0.75, '#A52a2a'],
// [1, '#A52a2a']
// ],
// width: 5
// }
// },
// axisTick: {
// // 坐标轴小标记
// length: 12, // 属性length控制线长
// lineStyle: {
// // 属性lineStyle控制线条样式
// color: 'auto'
// }
// },
// splitLine: {
// // 分隔线
// length: 20, // 属性length控制线长
// lineStyle: {
// // 属性lineStyle（详见lineStyle）控制线条样式
// color: 'auto'
// }
// },
// pointer: {
// width: 5
// },
// title: {
// offsetCenter: ['-125%', '-55%'] // x, y，单位px
// },
// detail: {
// // 其余属性默认使用全局文本样式，详见TEXTSTYLE
// fontWeight: 'bolder',
// offsetCenter: ['40%', '-35%'],
// fontSize: '35px'
// },
// data: [
// {
// // value: [0],
// // name: 'ctitle + (kV)'
// }
// ]
// },
// {
// name: 'A相电流有效值',
// type: 'gauge',
// center: ['80%', '30%'], // 默认全局居中
// radius: '50%',
// min: 0,
// max: 180,
// startAngle: 90,
// endAngle: 0,
// splitNumber: 2,
// axisLine: {
// // 坐标轴线
// lineStyle: {
// // 属性lineStyle控制线条样式
// color: [
// [0.25, '#DAA520'],
// [0.5, '#DAA520'],
// [0.75, '#DAA520'],
// [1, '#DAA520']
// ],
// width: 5
// }
// },
// axisTick: {
// // 坐标轴小标记
// length: 12, // 属性length控制线长
// lineStyle: {
// // 属性lineStyle控制线条样式
// color: 'auto'
// }
// },
// splitLine: {
// // 分隔线
// length: 20, // 属性length控制线长
// lineStyle: {
// // 属性lineStyle（详见lineStyle）控制线条样式
// color: 'auto'
// }
// },
// pointer: {
// width: 5
// },
// title: {
// offsetCenter: ['125%', '-55%'] // x, y，单位px
// },
// detail: {
// // 其余属性默认使用全局文本样式，详见TEXTSTYLE
// fontWeight: 'bolder',
// offsetCenter: ['-45%', '-35%'],
// fontSize: '35px'
// },
// data: [
// {
// // value: [0],
// // name: 'A相(A)'
// }
// ]
// },
// {
// name: 'B相电流有效值',
// type: 'gauge',
// center: ['80%', '60%'], // 默认全局居中
// radius: '50%',
// min: 0,
// max: 180,
// startAngle: 90,
// endAngle: 0,
// splitNumber: 2,
// axisLine: {
// // 坐标轴线
// lineStyle: {
// // 属性lineStyle控制线条样式
// color: [
// [0.25, '#2E8B57'],
// [0.5, '#2E8B57'],
// [0.75, '#2E8B57'],
// [1, '#2E8B57']
// ],
// width: 5
// }
// },
// axisTick: {
// // 坐标轴小标记
// length: 12, // 属性length控制线长
// lineStyle: {
// // 属性lineStyle控制线条样式
// color: 'auto'
// }
// },
// splitLine: {
// // 分隔线
// length: 20, // 属性length控制线长
// lineStyle: {
// // 属性lineStyle（详见lineStyle）控制线条样式
// color: 'auto'
// }
// },
// pointer: {
// width: 5
// },
// title: {
// offsetCenter: ['125%', '-55%'] // x, y，单位px
// },
// detail: {
// // 其余属性默认使用全局文本样式，详见TEXTSTYLE
// fontWeight: 'bolder',
// offsetCenter: ['-45%', '-35%'],
// fontSize: '35px'
// },
// data: [
// {
// // value: [0],
// // name: 'B相(A)'
// }
// ]
// },
// {
// name: 'C相电流有效值',
// type: 'gauge',
// center: ['80%', '90%'], // 默认全局居中
// radius: '50%',
// min: 0,
// max: 180,
// startAngle: 90,
// endAngle: 0,
// splitNumber: 2,
// axisLine: {
// // 坐标轴线
// lineStyle: {
// // 属性lineStyle控制线条样式
// color: [
// [0.25, '#A52a2a'],
// [0.5, '#A52a2a'],
// [0.75, '#A52a2a'],
// [1, '#A52a2a']
// ],
// width: 5
// }
// },
// axisTick: {
// // 坐标轴小标记
// length: 12, // 属性length控制线长
// lineStyle: {
// // 属性lineStyle控制线条样式
// color: 'auto'
// }
// },
// splitLine: {
// // 分隔线
// length: 20, // 属性length控制线长
// lineStyle: {
// // 属性lineStyle（详见lineStyle）控制线条样式
// color: 'auto'
// }
// },
// pointer: {
// width: 5
// },
// title: {
// offsetCenter: ['125%', '-55%'] // x, y，单位px
// },
// detail: {
// // 其余属性默认使用全局文本样式，详见TEXTSTYLE
// fontWeight: 'bolder',
// offsetCenter: ['-45%', '-35%'],
// fontSize: '35px'
// },
// data: [
// {
// // value: [0],
// // name: 'C相(A)'
// }
// ]
// },
// {
// name: '基波电流相位',
// type: 'gauge',
// // 表盘最小值
// min: 180,
// // 表盘最大值
// max: -180,
// // 表盘分割数
// splitNumber: 12,
// // 圆心位置
// center: ['50%', '50%'],
// // 半径
// radius: '50%',
// startAngle: 180,
// endAngle: -179.99,
// // 指针方向
// clockWise: true,
// title: false,
// // 表盘外框
// axisLine: {
// show: true,
// lineStyle: {
// color: [
// [0.25, '#2E8B57'],
// [0.5, '#2E8B57'],
// [0.75, '#2E8B57'],
// [1, '#2E8B57']
// ],
// width: 2
// }
// },
// // 表盘细分数
// axisTick: {
// show: true,
// splitNumber: 5,
// length: 6,
// lineStyle: {
// color: '#eee',
// width: 1,
// type: 'solid'
// }
// },
// // 分割线
// splitLine: {
// show: true,
// length: 10,
// lineStyle: {
// color: '#eee',
// width: 2,
// type: 'solid'
// }
// },
// // 分割线标识
// axisLabel: {
// show: false
// },
// // 指针设置
// pointer: {
// length: '45%',
// width: 2
// },
// detail: {
// show: false
// },
// data: [
// {
// value: 0,
// name: 'B相'
// }
// ]
// },
// {
// name: '基波电流相位',
// type: 'gauge',
// // 表盘最小值
// min: 180,
// // 表盘最大值
// max: -180,
// // 表盘分割数
// splitNumber: 12,
// // 圆心位置
// center: ['50%', '50%'],
// // 半径
// radius: '50%',
// startAngle: 180,
// endAngle: -179.99,
// // 指针方向
// clockWise: true,
// title: false,
// // 表盘外框
// axisLine: {
// show: true,
// lineStyle: {
// color: [
// [0.25, '#A52a2a'],
// [0.5, '#A52a2a'],
// [0.75, '#A52a2a'],
// [1, '#A52a2a']
// ],
// width: 2
// }
// },
// // 表盘细分数
// axisTick: {
// show: true,
// splitNumber: 5,
// length: 6,
// lineStyle: {
// color: '#eee',
// width: 1,
// type: 'solid'
// }
// },
// // 分割线
// splitLine: {
// show: true,
// length: 10,
// lineStyle: {
// color: '#eee',
// width: 2,
// type: 'solid'
// }
// },
// // 分割线标识
// axisLabel: {
// show: false
// },
// // 指针设置
// pointer: {
// length: '45%',
// width: 2
// },
// detail: {
// show: false
// },
// data: [
// {
// value: 0,
// name: 'C相'
// }
// ]
// },
// {
// name: '基波电压相位',
// type: 'gauge',
// // 表盘最小值
// min: 180,
// // 表盘最大值
// max: -180,
// // 表盘分割数
// splitNumber: 12,
// // 圆心位置
// center: ['50%', '50%'],
// // 半径
// radius: '85%',
// startAngle: 180,
// endAngle: -179.99,
// // 指针方向
// clockWise: true,
// title: false,
// // 表盘外框
// axisLine: {
// show: true,
// lineStyle: {
// color: [
// [0.25, '#2E8B57'],
// [0.5, '#2E8B57'],
// [0.75, '#2E8B57'],
// [1, '#2E8B57']
// ],
// width: 1.5
// }
// },
// // 表盘细分数
// axisTick: {
// show: true,
// splitNumber: 5,
// length: 6,
// lineStyle: {
// color: '#eee',
// width: 1,
// type: 'solid'
// }
// },
// // 分割线
// splitLine: {
// show: true,
// length: 10,
// lineStyle: {
// color: '#eee',
// width: 2,
// type: 'solid'
// }
// },
// // 分割线标识
// axisLabel: {
// show: false
// },
// // 指针设置
// pointer: {
// length: '75%',
// width: 4
// },
// detail: {
// show: false
// },
// data: [
// {
// value: 0,
// name: 'B相'
// }
// ]
// },
// {
// name: '基波电压相位',
// type: 'gauge',
// // 表盘最小值
// min: 180,
// // 表盘最大值
// max: -180,
// // 表盘分割数
// splitNumber: 12,
// // 圆心位置
// center: ['50%', '50%'],
// // 半径
// radius: '85%',
// startAngle: 180,
// endAngle: -179.99,
// // 指针方向
// clockWise: true,
// title: false,
// // 表盘外框
// axisLine: {
// show: true,
// lineStyle: {
// color: [
// [0.25, '#A52a2a'],
// [0.5, '#A52a2a'],
// [0.75, '#A52a2a'],
// [1, '#A52a2a']
// ],
// width: 1.5
// }
// },
// // 表盘细分数
// axisTick: {
// show: true,
// splitNumber: 5,
// length: 6,
// lineStyle: {
// color: '#eee',
// width: 1,
// type: 'solid'
// }
// },
// // 分割线
// splitLine: {
// show: true,
// length: 10,
// lineStyle: {
// color: '#eee',
// width: 2,
// type: 'solid'
// }
// },
// // 分割线标识
// axisLabel: {
// show: false
// },
// // 指针设置
// pointer: {
// length: '75%',
// width: 4
// },
// detail: {
// show: false
// },
// data: [
// {
// value: 0,
// name: 'C相'
// }
// ]
// }
{
name: '基波电流相位',
type: 'gauge',
@@ -818,10 +180,10 @@ const init = () => {
show: true,
lineStyle: {
color: [
[0.25, '#1E9FF4'],
[0.5, '#1E9FF4'],
[0.75, '#1E9FF4'],
[1, '#1E9FF4']
[0.25, '#9D322D'],
[0.5, '#9D322D'],
[0.75, '#9D322D'],
[1, '#9D322D']
],
width: 2
}
@@ -832,7 +194,7 @@ const init = () => {
splitNumber: 5,
length: 4,
lineStyle: {
color: '#1E9FF4',
color: '#9D322D',
width: 1,
type: 'solid'
}
@@ -842,7 +204,7 @@ const init = () => {
show: true,
length: 10,
lineStyle: {
color: '#1E9FF4',
color: '#9D322D',
width: 2,
type: 'solid'
}
@@ -1003,7 +365,6 @@ const init = () => {
}
}
//接收父组件传递的table数据
const tableInfoRef: any = ref(null)
const dataList: any = ref([])
const listV: any = ref([])
const listA: any = ref([])

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

@@ -1,13 +1,700 @@
<template>
<div>
1111111
</div>
<div>
<div class="history_header">
<el-form :model="searchForm" class="history_select" id="history_select">
<el-form-item label="统计指标" label-width="80px">
<el-select
multiple
:multiple-limit="3"
collapse-tags
collapse-tags-tooltip
v-model="searchForm.index"
placeholder="请选择统计指标"
>
<el-option
v-for="item in indexOptions"
:key="item.id"
:label="item.name"
:value="item.id"
></el-option>
</el-select>
</el-form-item>
<div v-for="(item, index) in countData" :key="index">
<el-form-item
:label="item.name + '谐波次数'"
v-if="item.countOptions.length != 0"
label-width="180px"
>
<el-select
v-model="item.count"
multiple
collapse-tags
collapse-tags-tooltip
placeholder="请选择谐波次数"
>
<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" size="small" icon="el-icon-Search" @click="init()">查询</el-button>
</div>
</div>
<div class="history_chart" v-loading="loading">
<MyEchart ref="historyChart" :isExport="true" :options="echartsData" />
</div>
</div>
</template>
<script lang='ts' setup>
import {ref,onMounted} from 'vue';
onMounted(()=>{
console.log()
<script lang="ts" setup>
import popup from './components/popup.vue'
import schemeTree from './components/schemeTree.vue'
import { mainHeight } from '@/utils/layout'
import { queryByCode, queryByid, queryCsDictTree } from '@/api/system-boot/dictTree'
import { ref, reactive, onMounted, provide, nextTick, watch } from 'vue'
import { ElMessage } from 'element-plus'
import MyEchart from '@/components/echarts/MyEchart.vue'
import { getTestRecordInfo, getHistoryTrend } from '@/api/cs-device-boot/planData'
import { useDictData } from '@/stores/dictData'
import { queryStatistical } from '@/api/system-boot/csstatisticalset'
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 { getTabsDataByType } from '@/api/cs-device-boot/EquipmentDelivery'
const dictData = useDictData()
defineOptions({
name: 'govern/device/manage'
})
//电压等级
const voltageLevelList = dictData.getBasicData('Dev_Voltage')
//接线方式
const volConTypeList = dictData.getBasicData('Dev_Connect')
//值类型
const pageHeight = mainHeight(20)
const loading = ref(true)
const searchForm = ref({})
const typeOptions = [
{
name: '平均值',
id: 'avg'
},
{
name: '最大值',
id: 'max'
},
{
name: '最小值',
id: 'min'
},
{
name: 'CP95值',
id: 'cp95'
}
]
searchForm.value = {
index: [],
type: typeOptions[0].id,
count: []
}
//统计指标
const indexOptions: any = ref([])
//谐波次数
const countOptions: any = ref([])
// Harmonic_Type
// portable-harmonic
const legendDictList: any = ref([])
queryByCode('portable-harmonic').then(res => {
queryCsDictTree(res.data.id).then(item => {
indexOptions.value = item.data
searchForm.value.index[0] = indexOptions.value[0].id
})
queryStatistical(res.data.id).then(vv => {
legendDictList.value = vv.data
})
})
const activeName: any = ref()
const deviceData: any = ref([])
//历史趋势devId
const historyDevId: any = ref('')
const chartTitle: any = ref('')
const echartsData = ref<any>(null)
//加载echarts图表
//历史趋势数据
const historyDataList: any = ref([])
const range = (start: any, end: any, step: any) => {
return Array.from({ length: (end - start) / step + 1 }, (_, i) => start + i * step)
}
//获取请求趋势数据参数
const trendRequestData = ref()
const getTrendRequest = async (val: any) => {
console.log(val, '拿到的请求参数')
trendRequestData.value = val
init()
}
//初始化趋势图
const init = async () => {
// 选择指标的时候切换legend内容和data数据
let list: any = []
legendDictList.value?.selectedList?.map((item: any) => {
searchForm.value.index.map((vv: any) => {
if (item.dataType == vv) {
list.push(item.eleEpdPqdVOS)
}
})
})
//颜色数组
const colorList = [
'#DAA521',
'#A5292A',
'aqua',
'#d81e06',
'#2E8B58',
'coral',
'#012B6A',
'brown',
'#70B601',
'blueviolet',
'#1DD0CE',
'cadetblue'
]
//选择的指标使用方法处理
initSearchFormIndexAndCount(searchForm.value.index)
//查询历史趋势
historyDataList.value = []
loading.value = true
chartTitle.value=''
searchForm.value.index.map((item: any, indexs: any) => {
indexOptions.value.map((vv: any) => {
if (vv.id == item) {
chartTitle.value += indexs == searchForm.value.index.length - 1 ? vv.name : vv.name + '/'
}
})
})
let lists: any = []
countData.value.map((item: any, index: any) => {
lists[index] = {
statisticalId: item.index,
frequencys: item.count
}
})
let obj = {
...trendRequestData.value,
list: lists,
valueType: searchForm.value.type
}
if (obj.devId && obj.list.length != 0) {
try {
await getTabsDataByType(obj)
.then(res => {
console.log(res, '打印趋势图')
if (res.code == 'A0000') {
historyDataList.value = res.data
echartsData.value = null
//icon图标替换legend图例
const iconThree =
'path://M512 85.333333c235.637333 0 426.666667 191.029333 426.666667 426.666667S747.637333 938.666667 512 938.666667 85.333333 747.637333 85.333333 512 276.362667 85.333333 512 85.333333z m214.592 318.677334a32 32 0 0 0-45.248 0.064L544.736 541.066667l-81.792-89.109334a32 32 0 0 0-46.613333-0.576l-119.36 123.733334a32 32 0 1 0 46.058666 44.437333l95.754667-99.264 81.418667 88.704a32 32 0 0 0 46.24 0.96l160.213333-160.693333a32 32 0 0 0-0.064-45.248z'
const iconDanger =
'path://M1001.661867 796.544c48.896 84.906667 7.68 157.013333-87.552 157.013333H110.781867c-97.834667 0-139.050667-69.504-90.112-157.013333l401.664-666.88c48.896-87.552 128.725333-87.552 177.664 0l401.664 666.88zM479.165867 296.533333v341.333334a32 32 0 1 0 64 0v-341.333334a32 32 0 1 0-64 0z m0 469.333334v42.666666a32 32 0 1 0 64 0v-42.666666a32 32 0 1 0-64 0z'
let xAxis: any = [],
timeList: any = []
let unitList: any = []
historyDataList.value.map((item: any) => {
timeList.push(item.time)
if (unitList.indexOf(item.unit) == -1) {
unitList.push(item.unit)
}
})
xAxis = timeList.sort((a: any, b: any) => {
return (
a.replace('-', '').replace('-', '').replace(' ', '').replace(':', '').replace(':', '') -
0 -
(b
.replace('-', '')
.replace('-', '')
.replace(' ', '')
.replace(':', '')
.replace(':', '') -
0)
)
})
echartsData.value = {
options: {
title: [
{
left: '10%',
top: 0,
text: chartTitle.value
}
],
toolbox: {
feature: {
// saveAsImage: {
// title: '保存'
// },
// dataView: { readOnly: false },
// }
}
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
},
formatter: function (params: any) {
var res = params[0].name + '<br/>'
for (var i = 0, l = params.length; i < l; i++) {
params[i].unit =
echartsData.value.options.yAxis[
echartsData.value.options.series[params[i].seriesIndex].yAxisIndex
]?.name
res +=
params[i].seriesName +
' ' +
`<div style="width:16px;height:16px;float:left;background:${params[i].color};border-radius:50%;margin:0 5px;margin:0 15px"></div>` +
`<div style='float:right;min-width:120px;padding-left:20px;'>${params[i].value} ${params[i].unit}</div><br/>`
}
return res
}
},
legend: {
//legend使用iconfont图标
data: [],
itemWidth: 20,
itemHeight: 10,
itemGap: 15,
type: 'scroll', // 开启滚动分页
// orient: 'vertical', // 垂直排列
right: '13%', // 位置调整
top: 0,
bottom: 20,
width: 400,
height: 50
},
grid: {
left: '3%',
right: '3%',
bottom: '10%',
top: '5%',
containLabel: true
},
xAxis: [
{
type: 'category',
name: '\n\n\n\n\n时间',
axisLabel: {
color: '#A9AEB2',
fontSize: 12,
show: function (index: any, value: any) {
// 检查数据中是否存在这个时间点
// return data.some(item:any => item[0] === value)
}
},
nameTextStyle: {
right: 0
},
data: Array.from(new Set(xAxis)),
axisLine: {
lineStyle: {
color: '#43485E'
}
}
}
],
yAxis: [
{
type: 'value',
name: unitList[0],
axisLabel: {
color: '#000',
fontSize: 14
},
axisTick: {
show: true
},
axisLine: {
show: true,
lineStyle: {
color: colorList[0]
}
},
nameTextStyle: {
color: '#000',
fontSize: '14'
},
splitLine: {
show: false,
lineStyle: {
color: ['#43485E'],
width: 1,
type: 'solid'
}
}
}
],
series: []
}
}
//处理多y轴
if (unitList.length != 0 && unitList.length > 1) {
// 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'
},
splitLine: {
show: false,
lineStyle: {
color: ['#43485E'],
width: 1,
type: 'solid'
}
}
// yAxisIndex: index + 1
})
}
})
}
list.map((item: any, index: any) => {
item.map((vv: any, indexs: any) => {
//处理legend
if (historyDataList.value.length != 0) {
echartsData.value.options.legend.data.push({
name: vv.phase + '相' + vv.showName,
icon: iconThree
})
}
if (
unitList.findIndex((item: any) => {
return item == vv.unit
}) != -1
) {
vv.yAxisIndex = unitList.findIndex((item: any) => {
return item == vv.unit
})
} else {
vv.yAxisIndex = 0
}
//series数据
echartsData.value.options.series.push({
name: vv.phase + '相' + vv.showName,
type: 'line',
smooth: true,
symbol: 'none',
emphasis: {
focus: 'series'
},
itemStyle: {},
//数据
data: historyDataList.value
.map((kk: any) => {
if (kk.statisticalName == vv.name) {
return kk.statisticalData
} else {
return ''
}
})
.filter((kk: any) => kk !== ''),
//数据对应的y轴
// yAxisIndex:0,
yAxisIndex: vv.yAxisIndex
})
})
})
//设置数据项颜色
echartsData.value.options.series.map((item: any, index: any) => {
item.itemStyle = {
normal: {
color: colorList[index],
lineStyle: {
color: colorList[index]
}
}
}
})
loading.value = false
}
})
.catch(error => {
loading.value = false
})
} catch (error) {
loading.value = false
}
}
}
//导出
const historyChart = ref()
// const chart: any = ref(null)
// chart.value = echarts.init(historyChart.value)
const handleExport = async () => {
const planCsv = ref('')
const chartsCsv = ref('')
if (deviceData.value.records && deviceData.value.records.length != 0) {
let csv = '',
obj = {}
obj = deviceData.value.records.find((item: any) => {
return item.id == activeName.value
})
if (obj) {
//测试是否与变量名长度有关系
let cell1 = deviceData.value.itemName,
cell2 = deviceData.value.describe,
cell3 = obj?.itemName,
cell4 = obj?.statisticalInterval,
cell5 = voltageLevelList.find(vv => {
return vv.id == obj.voltageLevel
})?.name,
cell6 = volConTypeList.find(vv => {
return vv.id == obj.volConType
})?.name,
cell7 = obj.capacitySscmin,
cell8 = obj.capacitySi,
cell9 = obj.capacitySscb,
cell10 = obj.capacitySt,
cell11 = obj.pt && obj.pt1 ? obj.pt / obj.pt1 + '\b' : '/',
cell12 = obj.ct && obj.ct1 ? obj.ct / obj.ct1 + '\b' : '/',
cell13 = obj.startTime ? obj.startTime : '/',
cell14 = obj.endTime ? obj.endTime : '/',
cell15 = obj.location
csv = `方案测试项信息,
方案名称, ${cell1},
方案描述, ${cell2},
测试项名称, ${cell2},
测量间隔, ${cell4 + '分钟'},
电压等级, ${cell5},
接线方式, ${cell6},
最小短路容量, ${cell7 + 'MVA'},
用户协议容量, ${cell8 + 'MVA'},
基准短路容量, ${cell9 + 'MVA'},
供电设备容量, ${cell10 + 'MVA'},
PT变比, ${cell11},
CT变比, ${cell12},
起始时间, ${cell13},
结束时间, ${cell14},
监测位置, ${cell15}\n,
`
planCsv.value = csv
}
}
if (historyDataList.value.length != 0) {
let xAxis: any = []
let timeList: any = []
historyDataList.value.map((item: any) => {
timeList.push(item.time)
})
xAxis = timeList.sort((a: any, b: any) => {
return (
a.replace('-', '').replace('-', '').replace(' ', '').replace(':', '').replace(':', '') -
0 -
(b.replace('-', '').replace('-', '').replace(' ', '').replace(':', '').replace(':', '') - 0)
)
})
xAxis = Array.from(new Set(xAxis))
// 使用这个函数转换数据为CSV格式
let csv: any = ''
const list = echartsData.value.options.series
csv = convertToCSV([], [])
chartsCsv.value = csv
// 如果你想提供下载链接
// const blob = new Blob([csv], { type: 'text/csv;charset=utf-8;' })
// const link = document.createElement('a')
// link.href = URL.createObjectURL(blob)
// link.download = '历史趋势.csv'
// link.click()
function convertToCSV(data: any, key: any) {
// 添加列头
let title = '统计时间,'
list.map((item: any, index: any) => {
index == list.length - 1 ? (title += `${item.name}\n`) : (title += `${item.name},`)
})
let csv = ''
csv = title
// 遍历数据并添加到CSV字符串中
const listLength = list.length
list[0].data.map((vv: any, indexs: any) => {
let strs = '',
count = null
list.map((item: any, index: any) => {
if (index == 0) {
count = index
}
index == list.length - 1
? (strs += list[index].data[indexs])
: (strs += list[index].data[indexs] + ',')
})
if (count == 0 && xAxis[indexs]) {
csv += `${xAxis[indexs]},` + strs + '\n'
}
})
return csv
}
}
let csvs = ''
if (chartsCsv.value) {
csvs = planCsv.value + '历史趋势数据,\n\n' + chartsCsv.value
} else {
csvs = planCsv.value
}
// 如果你想提供下载链接
const blob = new Blob([csvs], { type: 'text/csv;charset=utf-8;' })
const link = document.createElement('a')
link.href = URL.createObjectURL(blob)
let obj = deviceData.value.records.find((item: any) => {
return item.id == activeName.value
})
const date = window.XEUtils.toDateString(new Date(), 'yyyyMMdd HHmmss').replace(' ', '_')
link.download = `${deviceData.value.itemName}_${obj?.itemName}_${date}.csv`
link.click()
return
}
const countData: any = ref([])
//根据选择的指标处理谐波次数
const initSearchFormIndexAndCount = (list: any) => {
if (list.length != 0) {
list.map((item: any, index: any) => {
if (!countData.value[index]) {
countData.value[index] = {
index: item,
countOptions: [],
count: [],
name: indexOptions.value.find((vv: any) => {
return vv.id == item
})?.name
}
}
legendDictList.value?.selectedList?.map((vv: any, vvs: any) => {
//查找相等的指标
if (item == vv.dataType) {
vv.eleEpdPqdVOS.map((kk: any, kks: any) => {
if (kk.harmStart && kk.harmEnd) {
range(0, 0, 0)
countData.value[index].countOptions = range(kk.harmStart, kk.harmEnd, 2)
}
})
}
})
})
}
}
watch(
() => searchForm.value.index,
(val: any, oldval: any) => {
if (val) {
initSearchFormIndexAndCount(val)
if (val == 0) {
countData.value = []
}
countData.value.map((item: any, key: any) => {
if (
val.findIndex((vv: any) => {
return vv == item.index
}) == -1
) {
countData.value.splice(key, 1)
}
})
}
},
{
deep: true,
immediate: true
}
)
// watch(
// () => trendRequestData.value,
// (val: any, oldval: any) => {
// if (val) {
// init()
// }
// },
// {
// deep: true,
// immediate: true
// }
// )
onMounted(() => {})
defineExpose({ getTrendRequest })
</script>
<style lang='less' scoped>
</style>
<style lang="scss" scoped>
.history_header {
display: flex;
// flex-wrap: wrap;
#history_select {
width: 95%;
display: flex;
justify-content: flex-start;
overflow-x: auto;
height: 45px;
// flex-wrap: wrap;
.el-form-item {
flex: none;
max-width: 380px !important;
}
.el-select {
margin-right: 10px;
}
}
// #history_select::-webkit-scrollbar {
// width: 0 !important;
// display: none !important;
// }
.history_searchBtn {
flex: 1;
display: flex;
justify-content: flex-end;
margin-top: 3px;
}
}
.history_chart {
width: 100%;
height: calc(100vh - 400px) !important;
// flex: 1;
margin-top: 10px;
}
</style>