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-06-24 14:38:42 +08:00
parent a565fec416
commit bb4682a8ca
10 changed files with 1704 additions and 1074 deletions
Download Patch File Download Diff File Expand all files Collapse all files

649
src/views/govern/device/planData/index.vue Normal file
View File

@@ -0,0 +1,649 @@
<template>
<div class="default-main device-manage" :style="{ height: pageHeight.height }">
<!-- @node-change="nodeClick" -->
<schemeTree @node-click="nodeClick" @init="nodeClick" ref="schemeTreeRef"></schemeTree>
<div class="device-manage-right" v-if="deviceData">
<el-descriptions value="small" title="方案信息" class="mb10" :column="2" border>
<template #extra>
<el-button size="small" type="primary" @click="handleOpen(0, '')">新增方案</el-button>
</template>
<el-descriptions-item label="方案名称" width="60">
{{ deviceData.itemName }}
</el-descriptions-item>
<el-descriptions-item label="方案描述" width="60">
{{ deviceData.describe ? deviceData.describe : '/' }}
</el-descriptions-item>
</el-descriptions>
<div class="monitor_info" v-if="deviceData.records && deviceData.records.length != 0">
<div class="history_title">
<p>测试项信息</p>
</div>
<el-tabs v-model="activeName" type="border-card">
<el-tab-pane
v-for="(item, index) in deviceData.records"
:label="item.itemName"
:name="item.itemName"
:key="index"
>
<el-descriptions value="small" class="mb10" :column="4" border>
<el-descriptions-item label="测试项名称" width="160">
{{ item.itemName }}
</el-descriptions-item>
<el-descriptions-item label="测量间隔" width="160">
{{ item.statisticalInterval }}分钟
</el-descriptions-item>
<el-descriptions-item label="电压等级" width="160">
{{
voltageLevelList.find(vv => {
return vv.id == item.voltageLevel
})?.name
}}
</el-descriptions-item>
<el-descriptions-item label="接线方式" width="160">
{{
volConTypeList.find(vv => {
return vv.id == item.volConType
})?.name
}}
</el-descriptions-item>
<el-descriptions-item label="最小短路容量" width="160">
{{ item.capacitySscmin }}MVA
</el-descriptions-item>
<el-descriptions-item label="用户协议容量" width="160">
{{ item.capacitySi }}MVA
</el-descriptions-item>
<el-descriptions-item label="基准短路容量" width="160">
{{ item.capacitySscb }}MVA
</el-descriptions-item>
<el-descriptions-item label="供电设备容量" width="160">
{{ item.capacitySt }}MVA
</el-descriptions-item>
<el-descriptions-item label="PT变比" width="160">
{{ item.pt && item.pt1 ? item.pt / item.pt1 : item.pt }}
</el-descriptions-item>
<el-descriptions-item label="CT变比" width="160">
{{ item.ct && item.ct1 ? item.ct / item.ct1 : item.ct }}
</el-descriptions-item>
<el-descriptions-item label="起始时间" width="160">
{{ item.startTime }}
</el-descriptions-item>
<el-descriptions-item label="结束时间" width="160">
{{ item.endTime }}
</el-descriptions-item>
<el-descriptions-item label="监测位置" width="160">
{{ item.location }}
</el-descriptions-item>
<!-- <el-descriptions-item label="操作" width="160"> -->
<!-- <el-button type="primary" size="small" icon="el-icon-EditPen" @click="handleOpen(3)">
修改
</el-button> -->
<!-- <el-button type="primary" size="small" icon="el-icon-InfoFilled" @click="openDevice">
数据绑定
</el-button> -->
<!-- </el-descriptions-item> -->
</el-descriptions>
</el-tab-pane>
</el-tabs>
</div>
<div class="history_title">
<p>历史趋势</p>
</div>
<div class="history_header">
<el-form :model="searchForm" class="history_select">
<el-form-item label="统计指标">
<el-select @change="init" 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-item label="值类型">
<el-select @change="init" 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="handleSearch">查询</el-button> -->
<!-- <el-button type="primary" size="small" icon="el-icon-Download" @click="handleExport">
导出
</el-button> -->
</div>
</div>
<!-- <div class="title">
10KV 母线_监测点 相电压有效值
</div> -->
<div class="history_chart" v-loading="loading" v-show="echartsData">
<MyEchart ref="historyChart" :isExport="true" :options="echartsData" />
</div>
</div>
<el-empty v-else description="请选择设备" class="device-manage-right" />
<popup ref="dialogRef" @onSubmit="refreshTree" />
<!-- <device ref="deviceRef"></device> -->
</div>
</template>
<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 } 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 device from './components/device.vue'
import { queryStatistical } from '@/api/system-boot/csstatisticalset'
import * as echarts from 'echarts'
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
}
//统计指标
const indexOptions: 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 = indexOptions.value[0].id
})
queryStatistical(res.data.id).then(vv => {
legendDictList.value = vv.data
})
})
const activeName: any = ref()
const deviceData: any = ref([])
const schemeTreeRef = ref()
const nodeId: any = ref('')
const chartTitle: any = ref('')
const nodeClick = async (e: anyObj) => {
loading.value = true
deviceData.value = []
nodeId.value = e.id
let id = e.pid ? e.pid : e.id
//查询测试项信息
try {
await getTestRecordInfo(id).then(res => {
deviceData.value = res.data
loading.value = false
res.data.records.map(item => {
if (item.id == e.id) {
activeName.value = item.itemName
}
})
schemeTreeRef.value.getPlanData(deviceData.value)
})
} catch (error) {
loading.value = false
}
init()
}
// const deviceRef = ref()
// const openDevice = () => {
// deviceRef.value.open(deviceData.value.records[0].id)
// }
const dialogRef = ref()
const handleOpen = (val: any, id: any) => {
// deviceData.value.records[0].id
dialogRef.value.open(val, '')
}
const echartsData = ref<any>(null)
//加载echarts图表
//历史趋势数据
const historyDataList: any = ref([])
const refreshTree = () => {
schemeTreeRef.value.getTreeList()
}
const isDel = ref(false)
const init = async () => {
if (nodeId.value) {
try {
//查询历史趋势
historyDataList.value = []
loading.value = true
chartTitle.value =
deviceData.value.itemName +
' ' +
deviceData.value.records[0]?.itemName +
' ' +
indexOptions.value.find(item => {
return item.id == searchForm.value.index
})?.name
await getHistoryTrend({
devId: nodeId.value,
statisticalId: searchForm.value.index,
valueType: searchForm.value.type
})
.then(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[] = []
historyDataList.value.map(item => {
xAxis.push(item.time)
})
echartsData.value = {
options: {
title: [
{
left: 'center',
text: chartTitle.value
}
],
toolbox: {
feature: {
saveAsImage: {
title: '保存'
}
}
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
legend: {
//legend使用iconfont图标
// data: [
// {
// name: list[0]?.name,
// icon: iconThree
// },
// {
// name: list[1]?.name,
// icon: iconThree
// },
// {
// name: list[2]?.name,
// icon: iconThree
// },
// {
// name: list[3]?.name,
// icon: iconDanger
// }
// ],
// x: 'right',
// textStyle: {
// // color: 'white',
// fontSize: 14
// },
top: 5,
right: 80,
itemWidth: 20,
itemHeight: 10,
itemGap: 15
},
grid: {
left: '1%',
right: '5%',
bottom: '5%',
top: '10%',
containLabel: true
},
xAxis: [
{
type: 'category',
name: '时间',
axisLabel: {
color: '#A9AEB2',
fontSize: 12
},
data: xAxis,
axisLine: {
lineStyle: {
color: '#43485E'
}
}
}
],
yAxis: [
{
type: 'value',
name: 'KV',
axisLabel: {
color: '#A9AEB2',
fontSize: 12
},
axisTick: {
show: true
},
axisLine: {
show: true,
lineStyle: {
// color: 'white'
}
},
nameTextStyle: {
color: '#A9AEB2',
fontSize: '12'
},
splitLine: {
show: false,
lineStyle: {
color: ['#43485E'],
width: 1,
type: 'solid'
}
}
}
]
// series: [
// {
// name: list[0]?.name,
// type: 'line',
// smooth: true,
// emphasis: {
// focus: 'series'
// },
// itemStyle: {
// normal: {
// color: '#DAA521',
// lineStyle: {
// color: '#DAA521'
// }
// }
// },
// data: historyDataList.value
// .map(item => {
// if (item.statisticalName === 'Apf_ThdA_Load') {
// return item.statisticalData
// } else {
// return ''
// }
// })
// .filter(item => item !== '')
// },
// {
// name: list[1]?.name,
// type: 'line',
// smooth: true,
// emphasis: {
// focus: 'series'
// },
// itemStyle: {
// normal: {
// color: '#2E8B58',
// lineStyle: {
// color: '#2E8B58'
// }
// }
// },
// data: historyDataList.value
// .map(item => {
// if (item.statisticalName === 'Apf_ThdA_Sys') {
// return item.statisticalData
// } else {
// return ''
// }
// })
// .filter(item => item !== '')
// },
// {
// name: list[2]?.name,
// type: 'line',
// smooth: true,
// emphasis: {
// focus: 'series'
// },
// itemStyle: {
// normal: {
// color: '#A5292A',
// lineStyle: {
// color: '#A5292A'
// }
// }
// },
// data: historyDataList.value
// .map(item => {
// if (item.statisticalName === 'Apf_RmsI_TolOut') {
// return item.statisticalData
// } else {
// return ''
// }
// })
// .filter(item => item !== '')
// },
// {
// name: list[3]?.name,
// type: 'line',
// smooth: true,
// emphasis: {
// focus: 'series'
// },
// itemStyle: {
// normal: {
// color: '#d81e06',
// lineStyle: {
// color: '#d81e06'
// }
// }
// },
// data: []
// }
// ]
}
}
//选择指标的时候切换legend内容和data数据
let list = []
//颜色数组
const colorList = ['#DAA521', '#2E8B58', '#A5292A', '#d81e06']
legendDictList.value?.selectedList?.map(item => {
if (item.dataType == searchForm.value.index) {
list.push(item.eleEpdPqdVOS)
}
})
list.map((item, index) => {
echartsData.value.options.legend.data.push({
name: item.showName,
icon: iconThree
})
echartsData.value.options.series.push({
name: item.showName,
type: 'line',
smooth: true,
emphasis: {
focus: 'series'
},
itemStyle: {
normal: {
color: colorList[index],
lineStyle: {
color: colorList[index]
}
}
},
data: historyDataList.value
.map(vv => {
if (vv.statisticalName === item.name) {
return vv.statisticalData
} else {
return ''
}
})
.filter(vv => vv !== '')
})
})
loading.value = false
}
})
.catch(error => {
loading.value = false
})
} catch (error) {
loading.value = false
}
}
}
//搜素
const handleSearch = () => {
console.log(searchForm.value, '搜索')
init()
}
//导出
const historyChart = ref()
// const chart: any = ref(null)
// chart.value = echarts.init(historyChart.value)
const handleExport = () => {
// 使用ECharts的getOption方法获取当前图表的配置
const option = chart.value.getOption()
console.log(option.series, '00000000000')
return
const seriesData = option.series[0].data // 假设我们只导出第一个系列的数据
// 转换为CSV格式
let csvContent = 'data1,data2\n'
seriesData.forEach(item => {
csvContent += `${item.name},${item.value}\n`
})
// 创建Blob对象，并使用a标签下载
const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' })
const link = document.createElement('a')
if (link.download !== undefined) {
// 支持下载属性
const url = URL.createObjectURL(blob)
link.setAttribute('href', url)
link.setAttribute('download', 'data.csv')
link.style.visibility = 'hidden'
document.body.appendChild(link)
link.click()
document.body.removeChild(link)
}
}
onMounted(() => {})
</script>
<style lang="scss" scoped>
.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;
display: flex;
align-items: center;
}
}
.device-manage-right {
overflow: hidden;
flex: 1 !important;
height: calc(100vh - 135px);
padding: 10px 10px 10px 10px;
border: 2px solid #eeeeee;
display: flex;
flex-direction: column;
.el-descriptions__header {
height: 36px;
margin-bottom: 7px;
display: flex;
align-items: center;
}
}
}
.history_title {
width: 100%;
p {
height: 32px;
line-height: 32px;
font-size: 16px;
font-weight: bold;
}
}
.monitor_info {
width: 100%;
}
.history_header {
display: flex;
.history_select {
width: 65%;
display: flex;
justify-content: flex-start;
.el-select {
margin-right: 10px;
}
}
.history_searchBtn {
flex: 1;
display: flex;
justify-content: flex-end;
}
}
.history_chart {
width: 100%;
min-height: calc(100vh - 600px) !important;
flex: 1;
margin-top: 10px;
}
// ::v-deep .el-select {
// width: 200px !important;
// }
</style>