点击表格行高亮
-
css中三元表达式
:class="[activeIndex == index ? 'color' : '', 'item']"
-
点击行高亮
<div @click="actvied(index)" :class="[activeIndex == index ? 'color' : '', 'item']"
v-for="(item, index) in tableData" :key="index">{{ item.datafile }}</div>
</div>
activeIndex: -1,
actvied(index) {
this.activeIndex = index
console.log(this.active);
},
完整代码
<template>
<div style="display: flex;margin: 20px 0px 0px 50px;">
<div class="condition">
<div class="top">工况名</div>
<div class="bottom">
<div @click="actvied(index)" :class="[activeIndex == index ? 'color' : '', 'item']"
v-for="(item, index) in tableData" :key="index">{{ item.datafile }}</div>
</div>
</div>
<div class="test">
<div class="top1">测点名</div>
<div class="bottom1">
<div @click="handlePointClick(index)" :class="[selectedPointIndex == index ? 'color1' : '', 'item1']"
v-for="(point, index) in pointData" :key="index">{{ point.pointname }}</div>
</div>
</div>
<div ref="chart" style="height: 600px;width:120%;margin-left: 50px;"></div>
</div>
</template>
<script>
import * as echarts from 'echarts';
import axios from 'axios';
import {
GetTestData,
GetAllPoint,
GetCurve
} from '@/api/satellite-api'
export default {
data() {
return {
activeIndex: -1,
selectedPointIndex: -1,
selectedRowIndex: -1,
selectedRow: null,
selectedPoint: null,
pointname: '',
createTime: '',
curveid: '',
rowid: '',
actvie: '',
curveData: [],
tableData: [],
pointData: [],
multipleSelection: []
}
},
mounted() {
this.point()
this.GetFile()
},
methods: {
actvied(index) {
this.activeIndex = index
console.log(this.active);
},
handlePointClick(index) {
this.selectedPoint = this.pointData[index];
this.selectedPointIndex = index;
this.curveid = this.selectedPoint.id;
this.createTime = this.selectedPoint.createTime;
this.pointname = this.selectedPoint.pointname;
this.qux();
},
// 获取文件
async GetFile() {
const data = await GetTestData(this.$route.query.id)
this.tableData = data.data.data
},
// 获取测点
async point() {
if (this.pointData = []) {
const data = await GetAllPoint(153)
this.pointData = data.data.data
} else {
const data = await GetAllPoint(this.rowid)
this.pointData = data.data.data
}
},
// 获取曲线
async qux() {
const data = await GetCurve(this.curveid, this.createTime);
this.curveData = data.data.data;
// 转换数据格式
const chartData = this.curveData.map(item => [item.x, item.y]);
this.$nextTick(() => {
// Initialize myChart variable
const myChart = echarts.init(this.$refs.chart);
// 使用echarts方法替换数据
myChart.setOption({
title: {
text: this.pointname,
left: '1%'
},
tooltip: {
trigger: 'axis'
},
grid: {
left: '5%',
right: '15%',
bottom: '10%'
},
xAxis: {
data: chartData.map(function (item) {
return item[0];
})
},
yAxis: {
axisLabel: {
formatter: function (value) {
return value.toExponential();
}
}
},
toolbox: {
right: 10,
feature: {
dataZoom: {
yAxisIndex: 'none'
},
restore: {},
saveAsImage: {}
}
},
dataZoom: [
{
startValue: '2014-06-01'
},
{
type: 'inside'
}
],
visualMap: {
top: 50,
right: 10,
pieces: [
{
gt: 0,
lte: 50,
color: '#93CE07'
},
{
gt: 50,
lte: 100,
color: '#FBDB0F'
},
{
gt: 100,
lte: 150,
color: '#FC7D02'
},
{
gt: 150,
lte: 200,
color: '#FD0100'
},
{
gt: 200,
lte: 300,
color: '#AA069F'
},
{
gt: 300,
color: '#AC3B2A'
}
],
outOfRange: {
color: '#999'
}
},
series: {
name: this.pointname,
type: 'line',
data: chartData.map(function (item) {
return item[1];
}),
markLine: {
silent: true,
lineStyle: {
color: '#333'
},
data: [
{
yAxis: 50
},
{
yAxis: 100
},
{
yAxis: 150
},
{
yAxis: 200
},
{
yAxis: 300
}
]
}
}
});
});
}
}
}
</script>
<style>
.el-table {
cursor: pointer;
}
.el-table__header-wrapper {
position: sticky;
top: 0;
z-index: 1;
}
.el-table__body-wrapper {
max-height: 621px;
overflow-y: scroll;
position: relative;
}
.highlight-row {
background-color: #fff !important;
}
.condition {
background-color: #fff;
position: relative;
width: 600px;
height: 450px;
display: flex;
flex-direction: column;
align-items: center;
border: 1px solid #ccc;
padding: 0px;
border-radius: 5px;
.top {
width: 100%;
height: 40px;
line-height: 40px;
font-size: 15px;
text-align: center;
color: #5e5f5f;
background-color: #d7e9f9;
position: sticky;
top: 0;
z-index: 1;
}
.bottom {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
align-items: flex-start;
}
.item {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 40px;
line-height: 40px;
font-size: 15px;
text-align: center;
padding: 5px;
cursor: pointer;
color: #5e5f5f;
border-top: 1px solid #ccc;
}
.color {
width: 100%;
height: 40px;
border: 1px solid ccc;
line-height: 40px;
font-size: 15px;
text-align: center;
background-color: #eaf4ff;
}
}
.test {
margin-left: 10px;
background-color: #fff;
position: relative;
width: 400px;
height: 450px;
display: flex;
flex-direction: column;
align-items: center;
border: 1px solid #ccc;
padding: 0px;
border-radius: 5px;
.bottom1 {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
align-items: flex-start;
overflow-y: scroll;
}
.top1 {
width: 100%;
height: 40px;
line-height: 40px;
font-size: 15px;
text-align: center;
color: #5e5f5f;
background-color: #d7e9f9;
position: sticky;
top: 0;
z-index: 1;
}
.item1 {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 40px;
line-height: 40px;
font-size: 15px;
text-align: center;
padding: 5px;
cursor: pointer;
color: #5e5f5f;
border-top: 1px solid #ccc;
}
.color1 {
width: 100%;
height: 40px;
border: 1px solid ccc;
line-height: 40px;
font-size: 15px;
text-align: center;
background-color: #eaf4ff;
}
}</style>