方案数据echarts图修改
This commit is contained in:
zhujiyan
@@ -22,8 +22,12 @@
|
||||
<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,10 +105,20 @@
|
||||
<div class="history_header">
|
||||
<el-form :model="searchForm" class="history_select" id="history_select">
|
||||
<el-form-item label="统计指标" label-width="80px">
|
||||
<el-select collapse-tags collapse-tags-tooltip v-model="searchForm.index"
|
||||
placeholder="请选择统计指标" multiple :multiple-limit="3" @change="init()">
|
||||
<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 label="值类型">
|
||||
@@ -114,25 +128,41 @@
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<div v-for="(item, index) in countData" :key="index">
|
||||
<el-form-item :label="item.name + '谐波次数'" label-width="180px"
|
||||
v-if="item.countOptions.length != 0">
|
||||
<el-form-item
|
||||
: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 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>
|
||||
</el-form>
|
||||
<div class="history_searchBtn">
|
||||
<el-button type="primary" icon="el-icon-Search" @click="init()">查询</el-button>
|
||||
<el-button type="primary" icon="el-icon-Search" @click="init(true)">查询</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="history_title">
|
||||
@@ -161,6 +191,7 @@ import { getTestRecordInfo, getHistoryTrend } from '@/api/cs-device-boot/planDat
|
||||
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'
|
||||
const dictData = useDictData()
|
||||
defineOptions({
|
||||
name: 'govern/device/planData/index'
|
||||
@@ -225,7 +256,7 @@ const chartTitle: any = ref('')
|
||||
const handleClickTabs = async () => {
|
||||
historyDevId.value = activeName.value
|
||||
schemeTreeRef.value.setCheckedNode(activeName.value)
|
||||
await init()
|
||||
await init(true)
|
||||
}
|
||||
const nodeClick = async (e: anyObj) => {
|
||||
loading.value = true
|
||||
@@ -249,7 +280,7 @@ const nodeClick = async (e: anyObj) => {
|
||||
})
|
||||
}
|
||||
schemeTreeRef.value.getPlanData(deviceData.value)
|
||||
init()
|
||||
init(true)
|
||||
loading.value = false
|
||||
})
|
||||
.catch(e => {
|
||||
@@ -309,10 +340,10 @@ const filterArray = (array: any) => {
|
||||
})
|
||||
return newArray
|
||||
}
|
||||
const init = () => {
|
||||
const init = (flag: boolean) => {
|
||||
//调用子组件的方法切换的时候tree的节点也变化
|
||||
let list: any = []
|
||||
loading.value = true
|
||||
|
||||
//颜色数组
|
||||
const colorList = [
|
||||
'#DAA521',
|
||||
@@ -329,7 +360,6 @@ const init = () => {
|
||||
'cadetblue'
|
||||
]
|
||||
if (historyDevId.value && legendDictList.value && legendDictList.value.selectedList) {
|
||||
console.log('where')
|
||||
// 选择指标的时候切换legend内容和data数据
|
||||
legendDictList.value?.selectedList?.map((item: any) => {
|
||||
// if (item.dataType == searchForm.value.index) {
|
||||
@@ -384,10 +414,11 @@ const init = () => {
|
||||
valueType: searchForm.value.type
|
||||
}
|
||||
|
||||
if (flag) {
|
||||
loading.value = true
|
||||
getHistoryTrend(obj)
|
||||
.then((res: any) => {
|
||||
if (res.code === 'A0000') {
|
||||
console.log('this')
|
||||
historyDataList.value = res.data
|
||||
let chartsList = JSON.parse(JSON.stringify(res.data))
|
||||
echartsData.value = null
|
||||
@@ -406,6 +437,25 @@ const init = () => {
|
||||
xAxis = timeList.sort((a: any, b: any) => {
|
||||
return new Date(a).getTime() - new Date(b).getTime()
|
||||
})
|
||||
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 ''
|
||||
}
|
||||
})
|
||||
.filter((kk: any) => kk !== '')
|
||||
)
|
||||
item.min = min
|
||||
item.max = max
|
||||
})
|
||||
})
|
||||
console.log(list, '00000000000000')
|
||||
echartsData.value = {
|
||||
options: {
|
||||
title: [
|
||||
@@ -417,34 +467,13 @@ const init = () => {
|
||||
],
|
||||
toolbox: {
|
||||
feature: {
|
||||
saveAsImage: {
|
||||
title: '保存'
|
||||
}
|
||||
// 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: [],
|
||||
@@ -453,9 +482,9 @@ const init = () => {
|
||||
itemGap: 15,
|
||||
type: 'scroll', // 开启滚动分页
|
||||
// orient: 'vertical', // 垂直排列
|
||||
right: '3%', // 位置调整
|
||||
right: '15%', // 位置调整
|
||||
top: 5,
|
||||
bottom: 20,
|
||||
bottom: 30,
|
||||
width: 400,
|
||||
height: 50
|
||||
},
|
||||
@@ -478,10 +507,13 @@ const init = () => {
|
||||
|
||||
formatter: function (params: any) {
|
||||
let list = params.filter((item, index, self) => {
|
||||
return index === self.findIndex((t) => t.seriesName === item.seriesName);
|
||||
return index === self.findIndex(t => t.seriesName === item.seriesName)
|
||||
})
|
||||
console.log("🚀 ~ .then ~ list:", list)
|
||||
var res = list[0].name + '<br/>'
|
||||
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[
|
||||
@@ -490,51 +522,19 @@ const init = () => {
|
||||
res +=
|
||||
list[i].seriesName +
|
||||
' ' +
|
||||
`<div style="width:16px;height:16px;float:left;background:${list[i].color};border-radius:50%;margin:0 5px;margin:0 15px"></div>` +
|
||||
`<div style='float:right;min-width:120px;padding-left:20px;'>${list[i].value} </div><br/>`
|
||||
`<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].toFixed(
|
||||
2
|
||||
)} </div><br/>`
|
||||
}
|
||||
return res
|
||||
}
|
||||
},
|
||||
// grid: {
|
||||
// left: chartsList.length != 0 ? '5%' : '1%',
|
||||
// right: '5%',
|
||||
// bottom: '10%',
|
||||
// top: '8%',
|
||||
// containLabel: true
|
||||
// },
|
||||
// xAxis: [
|
||||
// {
|
||||
// type: 'time', //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)
|
||||
// },
|
||||
// formatter: {
|
||||
// day: '{MM}-{d}'
|
||||
// }
|
||||
// },
|
||||
// nameTextStyle: {
|
||||
// right: 0
|
||||
// },
|
||||
// data: Array.from(new Set(xAxis)),
|
||||
// axisLine: {
|
||||
// lineStyle: {
|
||||
// color: '#43485E'
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// ],
|
||||
xAxis: {
|
||||
type: 'time',
|
||||
axisLabel: {
|
||||
formatter: {
|
||||
day: '{MM}-{dd}',
|
||||
|
||||
day: '{MM}-{dd}'
|
||||
}
|
||||
}
|
||||
},
|
||||
@@ -549,6 +549,9 @@ const init = () => {
|
||||
axisTick: {
|
||||
show: true
|
||||
},
|
||||
|
||||
max: list[0].max,
|
||||
min: list[0].min,
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
@@ -566,14 +569,67 @@ const init = () => {
|
||||
width: 1,
|
||||
type: 'solid'
|
||||
}
|
||||
}
|
||||
},
|
||||
splitNumber: 5,
|
||||
minInterval: 1
|
||||
}
|
||||
],
|
||||
series: []
|
||||
}
|
||||
}
|
||||
|
||||
echartsData.value.options.legend.data = []
|
||||
list.map((item: any, index: any) => {
|
||||
item.map((vv: any, indexs: any) => {
|
||||
//处理legend
|
||||
if (chartsList.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
|
||||
}
|
||||
|
||||
echartsData.value.options.series.push({
|
||||
name: vv.phase + '相' + vv.showName,
|
||||
type: 'line',
|
||||
smooth: true,
|
||||
symbol: 'none',
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
},
|
||||
itemStyle: {},
|
||||
//数据
|
||||
data: filterArray(
|
||||
chartsList
|
||||
.map((kk: any, kks: any) => {
|
||||
if (kk.statisticalName == vv.name) {
|
||||
return Array.from(new Set([xAxis[kks], kk.statisticalData]))
|
||||
} else {
|
||||
return ''
|
||||
}
|
||||
})
|
||||
.filter((kk: any) => kk !== '')
|
||||
),
|
||||
//数据对应的y轴
|
||||
// yAxisIndex:0,
|
||||
yAxisIndex: vv.yAxisIndex
|
||||
})
|
||||
})
|
||||
})
|
||||
//处理多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) {
|
||||
@@ -599,6 +655,8 @@ const init = () => {
|
||||
color: '#000',
|
||||
fontSize: '14'
|
||||
},
|
||||
max: list[index + 1].max,
|
||||
min: list[index + 1].min,
|
||||
splitLine: {
|
||||
show: false,
|
||||
lineStyle: {
|
||||
@@ -612,58 +670,6 @@ const init = () => {
|
||||
}
|
||||
})
|
||||
}
|
||||
echartsData.value.options.legend.data = []
|
||||
console.log(list, '988888888888606')
|
||||
list.map((item: any, index: any) => {
|
||||
item.map((vv: any, indexs: any) => {
|
||||
//处理legend
|
||||
if (chartsList.length != 0) {
|
||||
echartsData.value.options.legend.data.push({
|
||||
name: vv.phase + '相' + vv.showName,
|
||||
icon: iconThree
|
||||
})
|
||||
}
|
||||
console.log(echartsData.value.options.legend.data, 'legend-legend-legend')
|
||||
if (
|
||||
unitList.findIndex((item: any) => {
|
||||
return item == vv.unit
|
||||
}) != -1
|
||||
) {
|
||||
vv.yAxisIndex = unitList.findIndex((item: any) => {
|
||||
return item == vv.unit
|
||||
})
|
||||
} else {
|
||||
vv.yAxisIndex = 0
|
||||
}
|
||||
echartsData.value.options.series.push({
|
||||
name: vv.phase + '相' + vv.showName,
|
||||
type: 'line',
|
||||
smooth: true,
|
||||
symbol: 'none',
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
},
|
||||
itemStyle: {},
|
||||
//数据
|
||||
data: filterArray(
|
||||
chartsList
|
||||
.map((kk: any, kks: any) => {
|
||||
if (kk.statisticalName == vv.name) {
|
||||
// console.log([xAxis[kks],kk.statisticalData],"========>>>>>>>");
|
||||
return Array.from(new Set([xAxis[kks], kk.statisticalData]))
|
||||
} else {
|
||||
return ''
|
||||
}
|
||||
})
|
||||
.filter((kk: any) => kk !== '')
|
||||
),
|
||||
//数据对应的y轴
|
||||
// yAxisIndex:0,
|
||||
yAxisIndex: vv.yAxisIndex
|
||||
})
|
||||
// console.log("🚀 ~ item.map ~ vv.phase + '相' + vv.showName:", vv.phase + '相' + vv.showName)
|
||||
})
|
||||
})
|
||||
//设置数据项颜色
|
||||
echartsData.value.options.series.map((item: any, index: any) => {
|
||||
item.itemStyle = {
|
||||
@@ -677,7 +683,6 @@ const init = () => {
|
||||
// item.data = filterArray(item.data)
|
||||
})
|
||||
loading.value = false
|
||||
console.log(echartsData.value.options.series, '++++++++++++++++++++669', echartsData.value)
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
@@ -685,6 +690,7 @@ const init = () => {
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
//导出
|
||||
const historyChart = ref()
|
||||
const handleExport = async () => {
|
||||
@@ -740,7 +746,6 @@ const handleExport = async () => {
|
||||
}
|
||||
|
||||
if (historyDataList.value.length != 0) {
|
||||
console.log(historyDataList.value, 'historyDataList')
|
||||
let xAxis: any = []
|
||||
let timeList: any = []
|
||||
historyDataList.value.map((item: any) => {
|
||||
@@ -756,7 +761,6 @@ const handleExport = async () => {
|
||||
csv = convertToCSV([], [])
|
||||
chartsCsv.value = csv
|
||||
// 如果你想提供下载链接
|
||||
console.log(list, '745745745745')
|
||||
function convertToCSV(data: any, key: any) {
|
||||
// 添加列头
|
||||
let title = '统计时间,'
|
||||
@@ -773,15 +777,13 @@ const handleExport = async () => {
|
||||
if (index == 0) {
|
||||
count = index
|
||||
}
|
||||
// console.log( list[index].data[indexs][list[index].data[indexs]], indexs,"88888888888888");
|
||||
console.log(list[index].data[indexs], "iiiiii");
|
||||
let itemList: any = list[index].data[indexs]
|
||||
index == list.length - 1
|
||||
? (strs += itemList[0])
|
||||
: (strs += itemList[0] + ',')
|
||||
index == list.length - 1 ? (strs += itemList[0]) : (strs += itemList[0] + ',')
|
||||
})
|
||||
if (count == 0 && xAxis[indexs]) {
|
||||
csv += `${xAxis[indexs]},` + strs + '\n'
|
||||
} else {
|
||||
strs += '/,'
|
||||
}
|
||||
})
|
||||
return csv
|
||||
@@ -858,7 +860,7 @@ watch(
|
||||
countData.value.splice(key, 1)
|
||||
}
|
||||
})
|
||||
init()
|
||||
init(false)
|
||||
}
|
||||
},
|
||||
{
|
||||
@@ -867,10 +869,8 @@ watch(
|
||||
}
|
||||
)
|
||||
onMounted(() => {
|
||||
loading.value = true
|
||||
setTimeout(() => {
|
||||
init()
|
||||
loading.value = false
|
||||
init(true)
|
||||
}, 1500)
|
||||
})
|
||||
</script>
|
||||
|
||||
Reference in New Issue
Block a user