<template>
|
<div class="p-main flex-c">
|
<!-- 状态栏 -->
|
<div class="info flex-r">
|
<div class="info-item">
|
<div class="label">设备名称</div>
|
<div class="value">交流配电柜</div>
|
</div>
|
<div class="info-item">
|
<div class="label">参数类型</div>
|
<div class="value">遥测量</div>
|
</div>
|
<div class="info-item">
|
<div class="label">参数名称</div>
|
<div class="value">第1路交流A相输入电压</div>
|
</div>
|
<div class="info-item">
|
<div class="label">模拟日期</div>
|
<div class="value">2023-12-08</div>
|
</div>
|
<div class="info-item">
|
<div class="label">第一次模拟时间</div>
|
<div class="value">09:58:23</div>
|
</div>
|
<div class="info-item">
|
<div class="label">第一次模拟数值</div>
|
<div class="value">合闸</div>
|
</div>
|
<div class="info-item">
|
<div class="label">最后一次模拟时间</div>
|
<div class="value">10:00:03</div>
|
</div>
|
<div class="info-item">
|
<div class="label">最后一次模拟数值</div>
|
<div class="value">分闸</div>
|
</div>
|
</div>
|
<!-- 图表 -->
|
<div class="chart-contain flex-r">
|
<div class="name-panel">
|
<div class="row">
|
<div class="">遥测量名称</div>
|
<div class="switch-name">第1路交流A相输入电压</div>
|
</div>
|
<div class="row">
|
<div class="">模拟次数</div>
|
<div class="num">7</div>
|
</div>
|
</div>
|
<div class="chart-wrap">
|
<bar unit="V"></bar>
|
</div>
|
</div>
|
<!-- 表格 -->
|
<panel class="panel p-content">
|
<div class="panel-content flex-c">
|
<div class="search">
|
<div class="s-item">
|
<div class="label">操作终端</div>
|
<div class="value">
|
<el-select
|
v-model="almLevel"
|
class="dark"
|
size="mini"
|
@change="getList"
|
placeholder="请选择"
|
>
|
<el-option
|
v-for="(item, idx) in almLevels"
|
:key="'level_' + idx"
|
:label="item"
|
:value="idx"
|
>
|
</el-option>
|
</el-select>
|
</div>
|
</div>
|
<div class="s-item">
|
<gradient-btn size="sm" @click="getList">导出</gradient-btn>
|
</div>
|
</div>
|
<div class="table-wrap">
|
<el-table
|
id="batteryrTimequeryTable"
|
stripe
|
size="small"
|
:data="table.datas"
|
height="100%"
|
class="table-dark"
|
tooltip-effect="light"
|
>
|
<el-table-column
|
label="序号"
|
type="index"
|
width="80"
|
></el-table-column>
|
<el-table-column
|
v-for="header in table.headers"
|
:key="header.prop"
|
:prop="header.prop"
|
:label="header.label"
|
:width="header.width"
|
:min-width="header.minWidth"
|
show-overflow-tooltip
|
align="center"
|
></el-table-column>
|
</el-table>
|
</div>
|
</div>
|
</panel>
|
</div>
|
</template>
|
|
<script>
|
import Panel from "@/components/panel.vue";
|
import gradientBtn from "@/components/gradientBtn.vue";
|
import bar from '@/components/bar';
|
|
export default {
|
name: "hrTestDetails",
|
|
components: {
|
Panel,
|
gradientBtn,
|
bar,
|
},
|
data() {
|
return {
|
devType: 0,
|
almLevel: 0,
|
devtypes: ["全部", "交流配电柜", "直流配电柜", "高频开关电源柜"],
|
almLevels: ["全部", "一般", "重大", "紧急"],
|
table: {
|
headers: [
|
{
|
prop: "devName",
|
label: "模拟时间",
|
minWidth: 180,
|
},
|
{
|
prop: "almName",
|
label: "模拟值",
|
width: 180,
|
},
|
{
|
prop: "almIsConfirmed",
|
label: "操作终端",
|
width: 120,
|
},
|
],
|
datas: [
|
{
|
devName: 1,
|
},
|
],
|
},
|
};
|
},
|
methods: {
|
getList(){
|
|
},
|
},
|
|
mounted() {},
|
};
|
</script>
|
|
<style scoped lang="less">
|
.p-main {
|
height: 100%;
|
|
.info {
|
background: #00253f;
|
padding: 10px;
|
justify-content: space-between;
|
}
|
.info-item {
|
display: flex;
|
.label {
|
margin-right: 0.4em;
|
&::after {
|
content: ":";
|
}
|
}
|
}
|
.chart-contain {
|
margin-top: 8px;
|
height: 220px;
|
.name-panel {
|
background: #00253f;
|
display: flex;
|
flex-direction: column;
|
justify-content: space-around;
|
align-items: center;
|
width: 180px;
|
padding: 10px;
|
margin-right: 10px;
|
.row {
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
}
|
.switch-name {
|
color: #78EEF8;
|
font-size: 24px;
|
font-weight: 700;
|
text-align: center;
|
}
|
.num {
|
color: #78eef8;
|
font-size: 16px;
|
font-weight: 700;
|
}
|
}
|
.chart-wrap {
|
flex: 1;
|
background: #00253f;
|
}
|
}
|
.p-content {
|
flex: 1;
|
margin-top: 4px;
|
:deep(.content) {
|
background: #011f39;
|
}
|
.panel-content {
|
height: 100%;
|
padding: 10px;
|
}
|
.search {
|
display: flex;
|
justify-content: space-between;
|
.s-item {
|
display: flex;
|
align-items: center;
|
.label {
|
color: #78eef8;
|
&::after {
|
content: ":";
|
}
|
margin-right: 0.4em;
|
}
|
}
|
}
|
.table-wrap {
|
flex: 1;
|
margin-top: 6px;
|
margin-bottom: 6px;
|
}
|
}
|
}
|
</style>
|
