首页优化
fanluyan
1 year ago
parent
9565047050
commit
447022a314
@ -0,0 +1,138 @@
|
|||||||
|
<template>
|
||||||
|
<div class="arresterbox">
|
||||||
|
<h3>{{ pageCardTitle }}</h3>
|
||||||
|
<div class="cardContent">
|
||||||
|
<el-table
|
||||||
|
:data="arresterData"
|
||||||
|
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 } from "@/utils/api/index";
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: "arrester",
|
||||||
|
components: {},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
pageCardTitle: "避雷器",
|
||||||
|
arresterData: [],
|
||||||
|
};
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
this.getarresterdata();
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
getarresterdata() {
|
||||||
|
monitoringListApi({
|
||||||
|
typeId: 4,
|
||||||
|
})
|
||||||
|
.then((res) => {
|
||||||
|
console.log(res);
|
||||||
|
this.arresterData = res.data.content;
|
||||||
|
})
|
||||||
|
.catch((err) => {
|
||||||
|
console.log(err); //代码错误、请求失败捕获
|
||||||
|
});
|
||||||
|
},
|
||||||
|
//点击当前行
|
||||||
|
handleRowClick(row, column, event) {
|
||||||
|
console.log(row); // 这里会打印出被点击的行的数据
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="less">
|
||||||
|
.arresterbox {
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
.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>
|
||||||
@ -0,0 +1,157 @@
|
|||||||
|
<template>
|
||||||
|
<div class="clampBox">
|
||||||
|
<!-- <div class="tendencyChartText" @click="tendencyChartChange()">趋势图</div> -->
|
||||||
|
<h3>{{ pageCardTitle }}</h3>
|
||||||
|
<div class="cardContent">
|
||||||
|
<el-table
|
||||||
|
:data="clmpData"
|
||||||
|
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 } from "@/utils/api/index";
|
||||||
|
export default {
|
||||||
|
name: "clamp",
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
pageCardTitle: "铁芯",
|
||||||
|
clmpData: [],
|
||||||
|
};
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
this.getclampdata();
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
getclampdata() {
|
||||||
|
monitoringListApi({
|
||||||
|
typeId: 2,
|
||||||
|
})
|
||||||
|
.then((res) => {
|
||||||
|
console.log(res);
|
||||||
|
this.clmpData = res.data.content;
|
||||||
|
})
|
||||||
|
.catch((err) => {
|
||||||
|
console.log(err); //代码错误、请求失败捕获
|
||||||
|
});
|
||||||
|
},
|
||||||
|
//点击当前行
|
||||||
|
handleRowClick(row, column, event) {
|
||||||
|
console.log(row); // 这里会打印出被点击的行的数据
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="less">
|
||||||
|
.clampBox {
|
||||||
|
background: url(../../../assets/card2Bg.png) no-repeat center;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
position: relative;
|
||||||
|
height: 280px;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
.tendencyChartText {
|
||||||
|
writing-mode: vertical-lr;
|
||||||
|
position: absolute;
|
||||||
|
right: 8px;
|
||||||
|
top: 15px;
|
||||||
|
color: #fff;
|
||||||
|
font-weight: normal;
|
||||||
|
font-size: 14px;
|
||||||
|
line-height: 14px;
|
||||||
|
letter-spacing: 0px;
|
||||||
|
text-align: left;
|
||||||
|
cursor: pointer;
|
||||||
|
&:hover {
|
||||||
|
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>
|
||||||
@ -0,0 +1,148 @@
|
|||||||
|
<template>
|
||||||
|
<div class="sf6box">
|
||||||
|
<h3>{{ pageCardTitle }}</h3>
|
||||||
|
<div class="sfContent">
|
||||||
|
<el-table
|
||||||
|
:data="sf6Data"
|
||||||
|
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 } from "@/utils/api/index";
|
||||||
|
export default {
|
||||||
|
name: "sf6",
|
||||||
|
components: {},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
pageCardTitle: "SF6环境",
|
||||||
|
devArr: "",
|
||||||
|
sf6Data: [],
|
||||||
|
};
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
// 在组件挂载时尝试从localStorage加载数据
|
||||||
|
this.getLocalStorage();
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
this.getsf6data();
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
//获取装置类型
|
||||||
|
getLocalStorage() {
|
||||||
|
this.devArr = JSON.parse(localStorage.getItem("devInfo"));
|
||||||
|
console.log(this.devArr);
|
||||||
|
},
|
||||||
|
getsf6data() {
|
||||||
|
monitoringListApi({
|
||||||
|
typeId: 61,
|
||||||
|
pageNum: 0,
|
||||||
|
pageSize: 1000,
|
||||||
|
})
|
||||||
|
.then((res) => {
|
||||||
|
console.log(res);
|
||||||
|
this.sf6Data = res.data.content;
|
||||||
|
})
|
||||||
|
.catch((err) => {
|
||||||
|
console.log(err); //代码错误、请求失败捕获
|
||||||
|
});
|
||||||
|
},
|
||||||
|
//点击当前行
|
||||||
|
handleRowClick(row, column, event) {
|
||||||
|
console.log(row); // 这里会打印出被点击的行的数据
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="less">
|
||||||
|
.sf6box {
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
.sfContent {
|
||||||
|
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>
|
||||||
@ -0,0 +1,123 @@
|
|||||||
|
<template>
|
||||||
|
<div class="warnmessageBox">
|
||||||
|
<h3>
|
||||||
|
<span class="arrows1">></span><span class="arrows2">></span>
|
||||||
|
<span class="arrows3">></span> {{ pageCardTitle }}
|
||||||
|
<span class="arrows3"><</span><span class="arrows2"><</span>
|
||||||
|
<span class="arrows1"><</span>
|
||||||
|
</h3>
|
||||||
|
<div class="cardContent">
|
||||||
|
<el-table
|
||||||
|
ref="restauranttable"
|
||||||
|
:data="tableData"
|
||||||
|
class="tableHi"
|
||||||
|
height="192px"
|
||||||
|
>
|
||||||
|
<el-table-column align="center" prop="warnTime" label="报警时间">
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column align="center" prop="deviceName" label="设备名称">
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column align="center" prop="warnDesc" label="告警信息">
|
||||||
|
<template slot-scope="scope">
|
||||||
|
<el-tooltip
|
||||||
|
class="item"
|
||||||
|
effect="dark"
|
||||||
|
:content="scope.row.warnDesc"
|
||||||
|
placement="top"
|
||||||
|
>
|
||||||
|
<span> {{ scope.row.warnDesc }}</span>
|
||||||
|
</el-tooltip>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column align="center" prop="warningCount" label="告警次数">
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column align="center" prop="warningValue" label="当前值">
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column align="center" prop="threadval" label="告警阈值">
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column align="center" label="操作" width="120">
|
||||||
|
<template slot-scope="scope">
|
||||||
|
<el-button
|
||||||
|
@click.native.prevent="particulars(scope.$index, scope.row)"
|
||||||
|
type="text"
|
||||||
|
size="small"
|
||||||
|
>
|
||||||
|
查看详情
|
||||||
|
</el-button>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
</el-table>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: "warnmessage",
|
||||||
|
components: {},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
pageCardTitle: "告警/故障信息",
|
||||||
|
tableData: [],
|
||||||
|
};
|
||||||
|
},
|
||||||
|
created() {},
|
||||||
|
mounted() {},
|
||||||
|
methods: {},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="less">
|
||||||
|
.warnmessageBox {
|
||||||
|
padding: 0px 10px;
|
||||||
|
h3 {
|
||||||
|
height: 38px;
|
||||||
|
line-height: 38px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
color: #fff;
|
||||||
|
font-weight: normal;
|
||||||
|
text-align: left;
|
||||||
|
//display: flex;
|
||||||
|
font-size: 16px;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
border-bottom: 1px dashed #fff;
|
||||||
|
/* 警告标题箭头 */
|
||||||
|
.arrows3 {
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
.arrows2 {
|
||||||
|
color: rgba(256, 256, 256, 0.5);
|
||||||
|
}
|
||||||
|
.arrows1 {
|
||||||
|
color: rgba(256, 256, 256, 0.15);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.cardContent {
|
||||||
|
margin-top: 10px;
|
||||||
|
|
||||||
|
.el-table th.el-table__cell {
|
||||||
|
background-color: transparent;
|
||||||
|
}
|
||||||
|
.el-table thead {
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
.el-table {
|
||||||
|
background-color: transparent;
|
||||||
|
color: #fff;
|
||||||
|
tr {
|
||||||
|
background: transparent;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.el-table--small .el-table__cell {
|
||||||
|
padding: 2px 0;
|
||||||
|
}
|
||||||
|
.el-table__empty-text {
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
.el-table::before {
|
||||||
|
height: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,157 @@
|
|||||||
|
<template>
|
||||||
|
<div class="windingTemperatureBox">
|
||||||
|
<!-- <div class="tendencyChartText" @click="tendencyChartChange()">趋势图</div> -->
|
||||||
|
<h3>{{ pageCardTitle }}</h3>
|
||||||
|
<div class="cardContent">
|
||||||
|
<el-table
|
||||||
|
:data="windData"
|
||||||
|
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 } from "@/utils/api/index";
|
||||||
|
export default {
|
||||||
|
name: "windingTemperature",
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
pageCardTitle: "夹件",
|
||||||
|
windData: [],
|
||||||
|
};
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
this.getwinddata();
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
getwinddata() {
|
||||||
|
monitoringListApi({
|
||||||
|
typeId: 3,
|
||||||
|
})
|
||||||
|
.then((res) => {
|
||||||
|
console.log(res);
|
||||||
|
this.windData = res.data.content;
|
||||||
|
})
|
||||||
|
.catch((err) => {
|
||||||
|
console.log(err); //代码错误、请求失败捕获
|
||||||
|
});
|
||||||
|
},
|
||||||
|
//点击当前行
|
||||||
|
handleRowClick(row, column, event) {
|
||||||
|
console.log(row); // 这里会打印出被点击的行的数据
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="less">
|
||||||
|
.windingTemperatureBox {
|
||||||
|
background: url(../../../assets/card2Bg.png) no-repeat center;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
position: relative;
|
||||||
|
height: 280px;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
.tendencyChartText {
|
||||||
|
writing-mode: vertical-lr;
|
||||||
|
position: absolute;
|
||||||
|
right: 8px;
|
||||||
|
top: 15px;
|
||||||
|
color: #fff;
|
||||||
|
font-weight: normal;
|
||||||
|
font-size: 14px;
|
||||||
|
line-height: 14px;
|
||||||
|
letter-spacing: 0px;
|
||||||
|
text-align: left;
|
||||||
|
cursor: pointer;
|
||||||
|
&:hover {
|
||||||
|
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