首页优化
fanluyan
1 year ago
parent
4ed2c64309
commit
80da3c78bf
@ -0,0 +1,282 @@
|
|||||||
|
<template>
|
||||||
|
<div class="partialDischargesbox">
|
||||||
|
<h3>
|
||||||
|
<span>{{ pageCardTitle }}</span>
|
||||||
|
<el-select
|
||||||
|
v-model="partialValue"
|
||||||
|
placeholder="请选择"
|
||||||
|
@change="changePartial"
|
||||||
|
>
|
||||||
|
<el-option
|
||||||
|
v-for="item in partialOptions"
|
||||||
|
:key="item.value"
|
||||||
|
:label="item.label"
|
||||||
|
:value="item.value"
|
||||||
|
>
|
||||||
|
</el-option>
|
||||||
|
</el-select>
|
||||||
|
</h3>
|
||||||
|
<div class="cardContent">
|
||||||
|
<el-table
|
||||||
|
:data="partialDischargesData"
|
||||||
|
height="100%"
|
||||||
|
border
|
||||||
|
highlight-current-row
|
||||||
|
size="mini"
|
||||||
|
@row-click="handleRowClick"
|
||||||
|
>
|
||||||
|
<el-table-column prop="id" label="id" width="50"> </el-table-column>
|
||||||
|
<!-- <el-table-column prop="jgName" label="间隔"> </el-table-column> -->
|
||||||
|
<el-table-column prop="zsbName" label="主设备名称"> </el-table-column>
|
||||||
|
<el-table-column prop="name" label="名称"> </el-table-column>
|
||||||
|
</el-table>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import { monitoringListApi, getDetailApi } from "@/utils/api/index";
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: "arrester",
|
||||||
|
components: {},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
pageCardTitle: "局放",
|
||||||
|
partialDischargesData: [],
|
||||||
|
partialValue: 10,
|
||||||
|
partialOptions: [
|
||||||
|
{
|
||||||
|
value: 10,
|
||||||
|
label: "局部放电A相",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: 25,
|
||||||
|
label: "局部放电B相",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: 26,
|
||||||
|
label: "局部放电C相",
|
||||||
|
},
|
||||||
|
],
|
||||||
|
// 趋势图信息
|
||||||
|
tendencyChartTitle: "",
|
||||||
|
legendData: [],
|
||||||
|
xAxisData: [],
|
||||||
|
seriesData: [],
|
||||||
|
chartBackground: [
|
||||||
|
"238,102,102",
|
||||||
|
"145,204,117",
|
||||||
|
"250,200,88",
|
||||||
|
"115,192,222",
|
||||||
|
"59,162,114",
|
||||||
|
"252,132,82",
|
||||||
|
"154,96,180",
|
||||||
|
"234,124,204",
|
||||||
|
"3,188,255",
|
||||||
|
],
|
||||||
|
};
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
this.getarresterdata();
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
changePartial(val) {
|
||||||
|
console.log(val);
|
||||||
|
this.partialValue = val;
|
||||||
|
this.getarresterdata();
|
||||||
|
},
|
||||||
|
getarresterdata() {
|
||||||
|
monitoringListApi({
|
||||||
|
typeId: this.partialValue,
|
||||||
|
})
|
||||||
|
.then((res) => {
|
||||||
|
console.log(res);
|
||||||
|
this.partialDischargesData = res.data.content;
|
||||||
|
})
|
||||||
|
.catch((err) => {
|
||||||
|
console.log(err); //代码错误、请求失败捕获
|
||||||
|
});
|
||||||
|
},
|
||||||
|
//点击当前行
|
||||||
|
handleRowClick(row) {
|
||||||
|
console.log(row); // 这里会打印出被点击的行的数据
|
||||||
|
|
||||||
|
this.tendencyChartTitle = "";
|
||||||
|
this.legendData = [];
|
||||||
|
this.xAxisData = [];
|
||||||
|
this.seriesData = [];
|
||||||
|
this.tendencyChartTitle = row.name;
|
||||||
|
getDetailApi({
|
||||||
|
id: row.id,
|
||||||
|
pageNum: this.page,
|
||||||
|
pageSize: this.pageSize,
|
||||||
|
})
|
||||||
|
.then((res) => {
|
||||||
|
console.log(res);
|
||||||
|
if (res.success) {
|
||||||
|
console.log(res);
|
||||||
|
let pointsData = res.data.points;
|
||||||
|
this.xAxisData = res.data.content.map(
|
||||||
|
(item) => item.acquisitionTime
|
||||||
|
);
|
||||||
|
|
||||||
|
for (var i = 0; i < pointsData.length; i++) {
|
||||||
|
console.log(pointsData[i]);
|
||||||
|
console.log(pointsData[i].fieldDesc);
|
||||||
|
this.seriesData.push({
|
||||||
|
name: pointsData[i].fieldDesc,
|
||||||
|
type: "line",
|
||||||
|
data: pointsData[i].data,
|
||||||
|
areaStyle: {
|
||||||
|
normal: {
|
||||||
|
// 填充色渐变
|
||||||
|
color: new this.$echarts.graphic.LinearGradient(
|
||||||
|
0,
|
||||||
|
0,
|
||||||
|
0,
|
||||||
|
1,
|
||||||
|
[
|
||||||
|
{
|
||||||
|
offset: 0,
|
||||||
|
color: "rgba(" + this.chartBackground[i] + ",0.3)",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
offset: 0.5,
|
||||||
|
color: "rgba(" + this.chartBackground[i] + ",0.1)",
|
||||||
|
},
|
||||||
|
{ offset: 1, color: "rgba(58, 167, 255,0)" },
|
||||||
|
]
|
||||||
|
),
|
||||||
|
},
|
||||||
|
},
|
||||||
|
// 曲线柔和
|
||||||
|
smooth: true,
|
||||||
|
itemStyle: {
|
||||||
|
normal: {
|
||||||
|
lineStyle: {
|
||||||
|
width: 3,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
});
|
||||||
|
this.legendData.push(pointsData[i].fieldDesc);
|
||||||
|
}
|
||||||
|
console.log(this.legendData);
|
||||||
|
console.log(this.xAxisData);
|
||||||
|
console.log(this.seriesData);
|
||||||
|
this.$emit(
|
||||||
|
"dataDispose",
|
||||||
|
this.legendData,
|
||||||
|
this.xAxisData,
|
||||||
|
this.seriesData,
|
||||||
|
this.tendencyChartTitle
|
||||||
|
);
|
||||||
|
// this.handleSearch();
|
||||||
|
} else {
|
||||||
|
this.$message({
|
||||||
|
showClose: true,
|
||||||
|
message: res.errorMsg,
|
||||||
|
type: "error",
|
||||||
|
});
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.catch((err) => {
|
||||||
|
console.log(err); //代码错误、请求失败捕获
|
||||||
|
});
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="less">
|
||||||
|
.partialDischargesbox {
|
||||||
|
height: 100%;
|
||||||
|
h3 {
|
||||||
|
height: 50px;
|
||||||
|
line-height: 50px;
|
||||||
|
padding: 0px 60px 0px 20px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
color: #03bcff;
|
||||||
|
font-weight: normal;
|
||||||
|
text-align: left;
|
||||||
|
display: flex;
|
||||||
|
font-size: 16px;
|
||||||
|
//justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
.el-select {
|
||||||
|
margin-left: 12px;
|
||||||
|
.el-input__inner {
|
||||||
|
background-color: transparent;
|
||||||
|
background-image: none;
|
||||||
|
border-radius: 4px;
|
||||||
|
border: 1px solid #03bcff;
|
||||||
|
color: #03bcff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.cardContent {
|
||||||
|
padding: 10px !important;
|
||||||
|
box-sizing: border-box;
|
||||||
|
height: calc(100% - 52px);
|
||||||
|
.el-table--mini .el-table__cell {
|
||||||
|
padding: 3px 0;
|
||||||
|
text-align: center;
|
||||||
|
color: #03bcff;
|
||||||
|
}
|
||||||
|
.el-table td.el-table__cell,
|
||||||
|
.el-table th.el-table__cell.is-leaf {
|
||||||
|
border-bottom: 1px solid #03bcff;
|
||||||
|
}
|
||||||
|
.el-table--border .el-table__cell {
|
||||||
|
border-right: 1px solid #03bcff;
|
||||||
|
}
|
||||||
|
.el-table {
|
||||||
|
border: 1px solid #03bcff;
|
||||||
|
background-color: transparent; /* 设置为透明背景 */
|
||||||
|
tr {
|
||||||
|
background-color: transparent; /* 设置为透明背景 */
|
||||||
|
}
|
||||||
|
th.el-table__cell {
|
||||||
|
background-color: transparent; /* 设置为透明背景 */
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.el-table__row,
|
||||||
|
.el-table__body-wrapper {
|
||||||
|
background-color: transparent; /* 确保行和单元格也是透明的 */
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.el-table::before {
|
||||||
|
height: 0px;
|
||||||
|
}
|
||||||
|
.el-table--border::after,
|
||||||
|
.el-table--group::after {
|
||||||
|
width: 0px;
|
||||||
|
}
|
||||||
|
.el-table--border th.el-table__cell.gutter:last-of-type {
|
||||||
|
//background: #03bcff !important;
|
||||||
|
border-bottom: 1px solid #03bcff;
|
||||||
|
}
|
||||||
|
.el-table--enable-row-hover .el-table__body tr:hover > td.el-table__cell {
|
||||||
|
background-color: #296479;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
.el-table__body tr.current-row > td.el-table__cell {
|
||||||
|
background-color: #296479;
|
||||||
|
}
|
||||||
|
::-webkit-scrollbar {
|
||||||
|
width: 6px !important;
|
||||||
|
height: 6px !important;
|
||||||
|
}
|
||||||
|
::-webkit-scrollbar-thumb {
|
||||||
|
background-color: #03bcff;
|
||||||
|
/* 关键代码 */
|
||||||
|
border-radius: 32px;
|
||||||
|
}
|
||||||
|
/* 滚动条轨道 */
|
||||||
|
::-webkit-scrollbar-track {
|
||||||
|
background-color: transparent;
|
||||||
|
border-radius: 32px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
Loading…
Reference in New Issue