修改样式
This commit is contained in:
@@ -22,12 +22,8 @@
|
||||
<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>
|
||||
@@ -105,21 +101,10 @@
|
||||
<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" @change="init()">
|
||||
<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="值类型">
|
||||
@@ -129,36 +114,20 @@
|
||||
</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>
|
||||
@@ -505,22 +474,27 @@ const init = () => {
|
||||
crossStyle: {
|
||||
color: '#999'
|
||||
}
|
||||
},
|
||||
|
||||
formatter: function (params: any) {
|
||||
let list = params.filter((item, index, self) => {
|
||||
return index === self.findIndex((t) => t.seriesName === item.seriesName);
|
||||
})
|
||||
console.log("🚀 ~ .then ~ list:", list)
|
||||
var res = 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 5px;margin:0 15px"></div>` +
|
||||
`<div style='float:right;min-width:120px;padding-left:20px;'>${list[i].value} </div><br/>`
|
||||
}
|
||||
return res
|
||||
}
|
||||
// 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
|
||||
// }
|
||||
},
|
||||
// grid: {
|
||||
// left: chartsList.length != 0 ? '5%' : '1%',
|
||||
@@ -529,32 +503,41 @@ const init = () => {
|
||||
// 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', //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}',
|
||||
|
||||
}
|
||||
}
|
||||
],
|
||||
},
|
||||
yAxis: [
|
||||
{
|
||||
type: 'value',
|
||||
@@ -652,7 +635,6 @@ const init = () => {
|
||||
} else {
|
||||
vv.yAxisIndex = 0
|
||||
}
|
||||
//series数据
|
||||
echartsData.value.options.series.push({
|
||||
name: vv.phase + '相' + vv.showName,
|
||||
type: 'line',
|
||||
@@ -679,6 +661,7 @@ const init = () => {
|
||||
// yAxisIndex:0,
|
||||
yAxisIndex: vv.yAxisIndex
|
||||
})
|
||||
// console.log("🚀 ~ item.map ~ vv.phase + '相' + vv.showName:", vv.phase + '相' + vv.showName)
|
||||
})
|
||||
})
|
||||
//设置数据项颜色
|
||||
@@ -694,7 +677,7 @@ const init = () => {
|
||||
// item.data = filterArray(item.data)
|
||||
})
|
||||
loading.value = false
|
||||
console.log(echartsData.value.options.series, '++++++++++++++++++++669')
|
||||
console.log(echartsData.value.options.series, '++++++++++++++++++++669', echartsData.value)
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
@@ -791,8 +774,8 @@ const handleExport = async () => {
|
||||
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]
|
||||
console.log(list[index].data[indexs], "iiiiii");
|
||||
let itemList: any = list[index].data[indexs]
|
||||
index == list.length - 1
|
||||
? (strs += itemList[0])
|
||||
: (strs += itemList[0] + ',')
|
||||
@@ -959,6 +942,7 @@ onMounted(() => {
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
overflow-x: auto;
|
||||
|
||||
// height: 45px;
|
||||
// padding-top: 18px;
|
||||
// flex-wrap: wrap;
|
||||
@@ -993,7 +977,7 @@ onMounted(() => {
|
||||
width: 120px !important;
|
||||
}
|
||||
|
||||
::v-deep .el-collapse-item__header{
|
||||
::v-deep .el-collapse-item__header {
|
||||
font-size: 16px !important;
|
||||
font-weight: 800 !important;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user