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-10-10 19:26:09 +08:00
parent c644d7ef6d
commit 52bac41b68
1 changed files with 35 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

60
src/views/govern/device/planData/index.vue
View File

@@ -124,7 +124,7 @@
></el-option> ></el-option>
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-form-item for="-" label="值类型"> <el-form-item for="-" label="值类型" label-width="80px">
<el-select style="width: 160px !important" v-model="searchForm.dataLevel"> <el-select style="width: 160px !important" v-model="searchForm.dataLevel">
<el-option value="Primary" label="一次值"></el-option> <el-option value="Primary" label="一次值"></el-option>
<el-option value="Secondary" label="二次值"></el-option> <el-option value="Secondary" label="二次值"></el-option>
@@ -355,7 +355,6 @@ const filterArray = (array: any) => {
const init = (flag: boolean) => { const init = (flag: boolean) => {
//调用子组件的方法切换的时候tree的节点也变化 //调用子组件的方法切换的时候tree的节点也变化
let list: any = [] let list: any = []
//颜色数组 //颜色数组
const colorList = [ const colorList = [
'#DAA521', '#DAA521',
@@ -434,20 +433,30 @@ const init = (flag: boolean) => {
//icon图标替换legend图例 //icon图标替换legend图例
const iconThree = 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' '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'
let xAxis: any = [], // let xAxis: any = [] //x轴数据数组
timeList: any = [], // let timeList: any = [] //x轴数据数组
unitList: any = [] // y轴单位数组
let unitList: any = []
let allUnitArray: any = []
chartsList.map((item: any) => { chartsList.map((item: any) => {
timeList.push(item.time) // timeList.push(item.time)
if (unitList.indexOf(item.unit) == -1) { // if (unitList.indexOf(item.unit) == -1) {
unitList.push(item.unit) // unitList.push(item.unit)
} // }
allUnitArray.push({ name: item.anotherName, unit: item.unit })
}) })
xAxis = new Set( // xAxis = new Set(
timeList.sort((a: any, b: any) => { // timeList.sort((a: any, b: any) => {
return new Date(a).getTime() - new Date(b).getTime() // return new Date(a).getTime() - new Date(b).getTime()
}) // })
) // )
//去除重复的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] let [min, max] = [0, 0]
list.map((item: any, index: any) => { list.map((item: any, index: any) => {
@@ -537,6 +546,7 @@ const init = (flag: boolean) => {
`<div style='float:right;padding-left:20px;'>${ `<div style='float:right;padding-left:20px;'>${
list[i].value[1] == null ? '' : list[i].value[1].toFixed(2) list[i].value[1] == null ? '' : list[i].value[1].toFixed(2)
} </div><br/>` } </div><br/>`
// ${list[i].unit}
} }
return res return res
} }
@@ -554,7 +564,7 @@ const init = (flag: boolean) => {
yAxis: [ yAxis: [
{ {
type: 'value', type: 'value',
name: unitList[0], name: unitList[0].unit,
axisLabel: { axisLabel: {
color: '#000', color: '#000',
fontSize: 14 fontSize: 14
@@ -592,27 +602,27 @@ const init = (flag: boolean) => {
} }
echartsData.value.options.legend.data = [] echartsData.value.options.legend.data = []
list.map((item: any, index: any) => { list.map((item: any, index: any) => {
item.map((vv: any, indexs: any) => { item.map((vv: any, indexs: any) => {
//处理legend //处理legend
if (chartsList.length != 0) { if (chartsList.length != 0) {
echartsData.value.options.legend.data.push({ echartsData.value.options.legend.data.push({
name: vv.phase + '相' + vv.showName, name: vv.phase + '相' + vv.showName
icon: iconThree // icon: iconThree
}) })
} }
if ( if (
unitList.findIndex((item: any) => { unitList.findIndex((item: any) => {
return item == vv.unit return item.unit == vv.unit && item.name == vv.showName
}) != -1 }) != -1
) { ) {
vv.yAxisIndex = unitList.findIndex((item: any) => { vv.yAxisIndex = unitList.findIndex((item: any) => {
return item == vv.unit return item.unit == vv.unit && item.name == vv.showName
}) })
} else { } else {
vv.yAxisIndex = 0 vv.yAxisIndex = 0
} }
echartsData.value.options.series.push({ echartsData.value.options.series.push({
name: vv.phase + '相' + vv.showName, name: vv.phase + '相' + vv.showName,
type: 'line', type: 'line',
@@ -643,15 +653,15 @@ const init = (flag: boolean) => {
}) })
//处理多y轴 //处理多y轴
// if (unitList.length != 0 && unitList.length > 1) { // if (unitList.length != 0 && unitList.length > 1) {
console.log(max, min) // console.log(max, min)
// echartsData.value.options.yAxis[0].yAxisIndex = 0 echartsData.value.options.yAxis[0].yAxisIndex = 0
unitList.map((item: any, index: any) => { unitList.map((item: any, index: any) => {
if (index != unitList.length - 1) { if (index != unitList.length - 1) {
echartsData.value.options.yAxis.push({ echartsData.value.options.yAxis.push({
type: 'value', type: 'value',
position: 'right', position: 'right',
offset: index * 80, // y轴位置的偏移量 offset: index * 80, // y轴位置的偏移量
name: unitList[index + 1], name: unitList[index + 1].unit,
axisLabel: { axisLabel: {
color: '#000', color: '#000',
fontSize: 14 fontSize: 14
@@ -678,8 +688,8 @@ const init = (flag: boolean) => {
width: 1, width: 1,
type: 'solid' type: 'solid'
} }
} },
// yAxisIndex: index + 1 yAxisIndex: index + 1
}) })
} }
}) })