修改 方案数据echart数据格式

This commit is contained in:
GGJ
2024-10-14 20:15:54 +08:00
parent 3fd897fca2
commit d18e4a9bf5
6 changed files with 280 additions and 413 deletions

View File

@@ -191,7 +191,7 @@ defineExpose({ onComSearch, areaRef, setDatePicker, setInterval, datePickerRef,
background-color: var(--ba-bg-color-overlay);
border-bottom: none;
padding: 13px 15px;
padding: 13px 15px 9px;
font-size: 14px;
.table-header-operate-text {

View File

@@ -11,7 +11,11 @@ export const yMethod = (arr: any) => {
if (maxValue > 1000) {
max = Math.ceil(maxValue / 100) * 100
if (minValue == 0) {
min = 0
} else {
min = (Math.floor(minValue / 100) - 1) * 100
}
} else {
max = Math.ceil(maxValue / 10) * 10
min = Math.floor(minValue / 10) * 10

View File

@@ -226,14 +226,16 @@ function getPendingKey(config: AxiosRequestConfig) {
/**
* 根据请求方法组装请求数据/参数
*/
export function requestPayload(method: Method, data: anyObj) {
export function requestPayload(method: Method, data: anyObj, paramsPOST: boolean) {
if (method == 'GET') {
return {
params: data
}
} else if (method == 'POST') {
return {
data: data
if (paramsPOST) {
return { params: data }
} else {
return { data: data }
}
}
}

View File

@@ -15,19 +15,15 @@
{{ deviceData.describe ? deviceData.describe : '/' }}
</el-descriptions-item>
</el-descriptions>
<el-collapse v-model="activeColName" accordion>
<el-collapse v-model="activeColName" @change="handleChange">
<el-collapse-item title="测试项信息" name="0">
<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" @click="handleClickTabs">
<el-tab-pane
v-for="(item, index) in deviceData.records"
:label="item.itemName"
:name="item.id"
:key="index"
>
<el-tab-pane v-for="(item, index) in deviceData.records" :label="item.itemName"
:name="item.id" :key="index">
<template #label>
<span class="custom-tabs-label">
<el-icon>
@@ -101,27 +97,22 @@
<el-empty />
</div>
</el-collapse-item>
<el-collapse-item title="历史趋势" name="1" class="history_collapse">
<!-- <el-collapse-item title="历史趋势" name="1" class="history_collapse"> -->
<!-- </el-collapse-item> -->
</el-collapse>
<h3 class="mt10 mb10">历史趋势</h3>
<div class="history_trend">
<div class="history_header" ref="headerRef">
<!-- <el-form :model="searchForm" class="history_select" id="history_select"> -->
<TableHeader :showSearch="false" ref="tableHeaderRef" :key="searchFormIndex">
<TableHeader :showSearch="false" ref="tableHeaderRef" :key="searchFormIndex"
@selectChange="selectChange">
<template v-slot:select>
<el-form-item for="-" label="统计指标" label-width="80px">
<el-select
collapse-tags
collapse-tags-tooltip
v-model="searchForm.index"
placeholder="请选择统计指标"
multiple
:multiple-limit="3"
>
<el-option
v-for="item in indexOptions"
:key="item.id"
:label="item.name"
:value="item.id"
></el-option>
<el-select collapse-tags collapse-tags-tooltip v-model="searchForm.index"
placeholder="请选择统计指标" multiple :multiple-limit="3">
<el-option v-for="item in indexOptions" :key="item.id" :label="item.name"
:value="item.id"></el-option>
</el-select>
</el-form-item>
<el-form-item for="-" label="值类型" label-width="80px">
@@ -131,37 +122,20 @@
</el-select>
</el-form-item>
<div v-for="(item, index) in countData" :key="index">
<el-form-item
for="-"
:label="item.name + '谐波次数'"
label-width="180px"
v-if="item.countOptions.length != 0"
>
<el-form-item for="-" :label="item.name + '谐波次数'" label-width="180px"
v-if="item.countOptions.length != 0">
<!-- multiple -->
<el-select
v-model="item.count"
collapse-tags
collapse-tags-tooltip
placeholder="请选择谐波次数"
style="width: 100px"
>
<el-option
v-for="vv in item.countOptions"
:key="vv"
:label="vv"
:value="vv"
></el-option>
<el-select v-model="item.count" collapse-tags collapse-tags-tooltip
placeholder="请选择谐波次数" style="width: 100px">
<el-option v-for="vv in item.countOptions" :key="vv" :label="vv"
:value="vv"></el-option>
</el-select>
</el-form-item>
</div>
<el-form-item for="-" label="统计类型" label-width="80px">
<el-select v-model="searchForm.type" placeholder="请选择值类型">
<el-option
v-for="item in typeOptions"
:key="item.id"
:label="item.name"
:value="item.id"
></el-option>
<el-option v-for="item in typeOptions" :key="item.id" :label="item.name"
:value="item.id"></el-option>
</el-select>
</el-form-item>
</template>
@@ -178,12 +152,11 @@
<div class="history_title">
<p>{{ chartTitle }}</p>
</div>
<div class="history_chart" v-loading="loading" ref="chartRef">
<div class="history_chart" v-loading="loading" :style="EcharHeight" :key="EcharHeight.height"
ref="chartRef">
<MyEchart ref="historyChart" v-if="echartsData" :isExport="true" :options="echartsData" />
</div>
</div>
</el-collapse-item>
</el-collapse>
</div>
<el-empty v-else description="请选择设备" class="device-manage-right" />
<popup ref="dialogRef" @onSubmit="refreshTree" />
@@ -203,19 +176,24 @@ import { useDictData } from '@/stores/dictData'
import { queryStatistical } from '@/api/system-boot/csstatisticalset'
import { TrendCharts, Plus, Platform } from '@element-plus/icons-vue'
import { yMethod } from '@/utils/echartMethod'
import { color, gradeColor3 } from '@/components/echarts/color'
import TableHeader from '@/components/table/header/index.vue'
import { useConfig } from '@/stores/config'
const dictData = useDictData()
defineOptions({
name: 'govern/device/planData/index'
})
const config = useConfig()
color[0] = config.layout.elementUiPrimary[0]
//电压等级
const voltageLevelList = dictData.getBasicData('Dev_Voltage')
//接线方式
const volConTypeList = dictData.getBasicData('Dev_Connect')
//值类型
const pageHeight = mainHeight(20)
const EcharHeight = ref(mainHeight(510))
const loading = ref(false)
const searchForm = ref({})
const searchForm: any = ref({})
const typeOptions = [
{
name: '平均值',
@@ -258,7 +236,7 @@ queryByCode('portable-harmonic').then(res => {
})
})
const activeName: any = ref()
const activeColName: any = ref('1')
const activeColName: any = ref('0')
const deviceData: any = ref([])
const schemeTreeRef = ref()
//历史趋势devId
@@ -333,43 +311,12 @@ const range = (start: any, end: any, step: any) => {
return Array.from({ length: (end - start) / step + 1 }, (_, i) => start + i * step)
}
//二维数组去除相同数据的数组
const filterArray = (array: any) => {
const newArray: any = []
array.forEach((currentValue: any) => {
let isPush = true
newArray.forEach((currentValueIn: any) => {
if (currentValueIn) {
if (currentValue[0] === currentValueIn[0] && currentValue[1] === currentValueIn[1]) {
isPush = false
}
} else {
newArray.push(currentValue)
}
})
if (isPush) {
newArray.push(currentValue)
}
})
return newArray
}
const init = (flag: boolean) => {
//调用子组件的方法切换的时候tree的节点也变化
let list: any = []
//颜色数组
const colorList = [
'#DAA521',
'#A5292A',
'aqua',
'#d81e06',
'#2E8B58',
'coral',
'#012B6A',
'brown',
'#70B601',
'blueviolet',
'#1DD0CE',
'cadetblue'
]
if (historyDevId.value && legendDictList.value && legendDictList.value.selectedList) {
// 选择指标的时候切换legend内容和data数据
legendDictList.value?.selectedList?.map((item: any) => {
@@ -430,72 +377,46 @@ const init = (flag: boolean) => {
let chartsList = JSON.parse(JSON.stringify(res.data))
echartsData.value = {}
//icon图标替换legend图例
// y轴单位数组
let unitList: any = []
let allUnitArray: any = []
chartsList.map((item: any) => {
allUnitArray.push({ name: item.anotherName, unit: item.unit })
})
//去除重复的unit单位数据
unitList = allUnitArray.reduce((result: any, obj: any) => {
if (!result.some((item: any) => JSON.stringify(item) === JSON.stringify(obj))) {
result.push(obj)
}
return result
}, [])
let [min, max] = [0, 0]
list.map((item: any, index: any) => {
item.map((vv: any, indexs: any) => {
;[min, max] = yMethod(
chartsList
.map((kk: any, kks: any) => {
if (kk.statisticalName == vv.name) {
return kk.statisticalData
} else {
return ''
let groupedData = chartsList.reduce((acc, item) => {
let key = item.anotherName;
if (!acc[key]) {
acc[key] = [];
}
acc[key].push(item);
return acc;
}, {})
let result = Object.values(groupedData);
if (chartsList.length > 0) {
unitList = result.map((item: any) => {
return item[0].unit
})
.filter((kk: any) => kk !== '')
)
item.min = min
item.max = max
})
})
}
echartsData.value = {
options: {
title: [
{
left: '10%',
top: 0
// text: chartTitle.value
}
],
toolbox: {
feature: {
// saveAsImage: {
// title: '保存'
// }
// dataView: { readOnly: false },
// }
}
},
legend: {
//legend使用iconfont图标
data: [],
itemWidth: 20,
itemHeight: 10,
itemGap: 15,
type: 'scroll', // 开启滚动分页
// orient: 'vertical', // 垂直排列
right: '15%', // 位置调整
top: 5,
bottom: 30,
width: 400,
height: 50
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
label: {
color: '#fff',
fontSize: 16
}
},
textStyle: {
color: '#fff',
fontStyle: 'normal',
@@ -503,40 +424,9 @@ const init = (flag: boolean) => {
fontSize: 14
},
backgroundColor: 'rgba(0,0,0,0.35)',
borderWidth: 0,
axisPointer: {
type: 'cross',
crossStyle: {
color: '#999'
}
},
formatter: function (params: any) {
let list = params.filter((item, index, self) => {
return index === self.findIndex(t => t.seriesName === item.seriesName)
})
var res =
'<span style="margin-right:18px;"></span>' +
list[0].value[0] +
list[0].name +
'<br/>'
for (var i = 0, l = list.length; i < l; i++) {
list[i].unit =
echartsData.value.options.yAxis[
echartsData.value.options.series[list[i].seriesIndex].yAxisIndex
]?.name
res +=
list[i].seriesName +
' ' +
`<div style="width:16px;height:16px;float:left;background:${list[i].color};border-radius:50%;margin:0 15px"></div>` +
`<div style='float:right;padding-left:20px;'>${
list[i].value[1] == null ? '' : list[i].value[1].toFixed(2)
} </div><br/>`
// ${list[i].unit}
}
return res
}
borderWidth: 0
},
color: ['#FFCC00', '#009900', '#CC0000', ...color],
xAxis: {
type: 'time',
axisLabel: {
@@ -547,157 +437,81 @@ const init = (flag: boolean) => {
}
}
},
yAxis: [
{
type: 'value',
name: unitList[0].unit,
axisLabel: {
color: '#000',
fontSize: 14
},
axisTick: {
show: true
},
yAxis: [{
max: list[0].max,
min: list[0].min,
axisLine: {
show: true,
lineStyle: {
// color: colorList[0]
}
},
nameTextStyle: {
color: '#000',
fontSize: '14'
},
splitLine: {
show: false,
lineStyle: {
color: ['#43485E'],
width: 1,
type: 'solid'
}
},
splitNumber: 5,
minInterval: 1,
yAxisIndex: 0
}
],
series: []
}
}
}],
echartsData.value.options.legend.data = []
//处理多y轴
// if (unitList.length != 0 && unitList.length > 1) {
// console.log(max, min)
echartsData.value.options.yAxis[0].yAxisIndex = 0
unitList.map((item: any, index: any) => {
if (index != unitList.length - 1) {
echartsData.value.options.yAxis.push({
type: 'value',
options: {
series: [
]
}
}
if (chartsList.length > 0) {
echartsData.value.yAxis=[]
unitList.forEach((item: any, index: any) => {
let right = {
position: 'right',
offset: index * 80, // y轴位置的偏移量
name: unitList[index + 1].unit,
axisLabel: {
color: '#000',
fontSize: 14
},
axisTick: {
show: true
},
axisLine: {
show: true,
lineStyle: {
// color: colorList[index + 1]
offset: (index - 1) * 80,
}
},
nameTextStyle: {
color: '#000',
fontSize: '14'
},
max: list[index + 1].max,
min: list[index + 1].min,
echartsData.value.yAxis.push({
name: item,
yAxisIndex: index,
splitLine: {
show: false,
lineStyle: {
color: ['#43485E'],
width: 1,
type: 'solid'
}
},
yAxisIndex: index + 1
...(index > 0 ? right : null)
})
})
result.forEach((item: any, index: any) => {
let yMethodList: any = []
let ABCList = Object.values(item.reduce((acc, item) => {
let key = item.phase;
if (!acc[key]) {
acc[key] = [];
}
})
// }
list.map((item: any, index: any) => {
console.log(item, '++++++++++++596')
item.map((vv: any, indexs: any) => {
//处理legend
if (chartsList.length != 0) {
echartsData.value.options.legend.data.push({
name: vv.phase + '相' + vv.showName
})
acc[key].push(item);
return acc;
}, {}));
ABCList.forEach((kk: any,) => {
let seriesList: any = []
kk.forEach((cc: any) => {
if (cc.statisticalData) {
yMethodList.push(cc.statisticalData?.toFixed(2) - 0)
}
if (
unitList.findIndex((item: any) => {
return item.unit == vv.unit && item.name == vv.showName
}) != -1
) {
vv.yAxisIndex = unitList.findIndex((item: any) => {
return item.unit == vv.unit && item.name == vv.showName
seriesList.push([cc.time, cc.statisticalData?.toFixed(2)])
})
} else {
vv.yAxisIndex = 0
}
console.log(vv, '<================>', vv.unit)
echartsData.value.options.series.push({
name: vv.phase + '相' + vv.showName,
name: kk[0].phase + '相' + item[0].anotherName,
type: 'line',
smooth: true,
symbol: 'none',
emphasis: {
focus: 'series'
},
itemStyle: {},
//数据
data: filterArray(
chartsList
.map((kk: any, kks: any) => {
if (kk.statisticalName == vv.name) {
// xAxis[kks]
return [kk.time, kk.statisticalData]
} else {
return ''
}
})
.filter((kk: any) => kk !== '')
),
//数据对应的y轴
yAxisIndex: vv.yAxisIndex
})
})
})
console.log(list, '6444和那个的哈哈哈哈呀哈哈哈哈哈哈哈哈哈哈哈')
data: seriesList,
yAxisIndex: index
//设置数据项颜色
echartsData.value.options.series.map((item: any, index: any) => {
item.itemStyle = {
normal: {
color: colorList[index],
lineStyle: {
color: colorList[index]
}
}
}
// item.data = filterArray(item.data)
})
// echartsData.value.options.series = echartsData.value.options.series.sort((a: any, b: any) => {
// return a.yAxisIndex - b.yAxisIndex
// })
console.log(echartsData.value.options.series, '...............709')
})
let [min, max] = yMethod(yMethodList)
echartsData.value.yAxis[index].min = min
echartsData.value.yAxis[index].max = max
})
}
// console.log("🚀 ~ .1111 ~ echartsData.value :", echartsData.value)
loading.value = false
}
})
@@ -862,6 +676,41 @@ const formatCountOptions = (list: any) => {
})
}
}
const flag = ref(false)
const selectChange = (e: boolean) => {
flag.value = e
if (activeColName.value == '0') {
if (flag.value) {
EcharHeight.value = mainHeight(565)
} else {
EcharHeight.value = mainHeight(510)
}
} else {
if (flag.value) {
EcharHeight.value = mainHeight(365)
} else {
EcharHeight.value = mainHeight(310)
}
}
}
const handleChange = () => {
if (activeColName.value == '0') {
if (flag.value) {
EcharHeight.value = mainHeight(565)
} else {
EcharHeight.value = mainHeight(510)
}
} else {
if (flag.value) {
EcharHeight.value = mainHeight(365)
} else {
EcharHeight.value = mainHeight(310)
}
}
}
const tableHeaderRef = ref<any>()
const searchFormIndex = ref<any>()
watch(
@@ -899,11 +748,13 @@ onMounted(() => {
.device-manage {
display: flex;
height: calc(100vh - 100px);
// overflow-y: auto;
&-right {
// overflow: auto;
flex: 1;
padding: 10px 10px 10px 0;
.el-descriptions__header {
height: 36px;
margin-bottom: 7px;
@@ -932,6 +783,7 @@ onMounted(() => {
.history_title {
width: 100%;
p {
height: 32px;
line-height: 32px;
@@ -943,28 +795,30 @@ onMounted(() => {
::v-deep .monitor_info {
width: 100%;
.el-tabs__content {
padding: 0 !important;
min-height: 130px !important;
}
}
.history_collapse {
height: calc(100vh - 300px);
width: 100%;
.history_trend {
width: 100%;
height: calc(100vh - 340px);
display: flex;
flex-direction: column;
.history_header {
width: 100%;
height: auto;
overflow: hidden;
}
.history_chart {
width: 100%;
flex: 1 !important;
margin-top: 10px;
margin: 10px 0;
}
}

View File

@@ -53,6 +53,12 @@ const open = (text: string, data?: anyObj) => {
title.value = text
for (let key in form) {
form[key] = data ? data[key] : ''
if (key == 'sort') {
form[key] = data?.sort == '' ? data[key] : 100
console.log("🚀 ~ open ~ form[key]:", form[key])
}
}
dialogVisible.value = true
}

View File

@@ -31,6 +31,7 @@ const tableStore = new TableStore({
showPage: false,
url: '/system-boot/dictTree/query',
method: 'POST',
paramsPOST:true,
column: [
{ title: '序号', type: 'seq', width: 60 },
{ title: '统计类型', field: 'name' },
@@ -82,16 +83,16 @@ const tableStore = new TableStore({
}
],
loadCallback: () => {
// 过滤数组中type等于1的数据children下钻
const filterData = (arr: any[]) => {
return arr.filter((item: any) => {
if (item.children.length) {
item.children = filterData(item.children)
}
return item.type != 1
})
}
tableStore.table.data = filterData(tableStore.table.data)
// // 过滤数组中type等于1的数据children下钻
// const filterData = (arr: any[]) => {
// return arr.filter((item: any) => {
// if (item.children.length) {
// item.children = filterData(item.children)
// }
// return item.type != 1
// })
// }
// tableStore.table.data = filterData(tableStore.table.data)
}
})
provide('tableStore', tableStore)