wangqiujuan0808
/
dataControl
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

123

main
瓶中沙 2024-10-16 17:37:29 +08:00
parent 05c24ea38e
commit 33e4edea02
2 changed files with 75 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/css/index.scss
View File

@ -284,7 +284,7 @@ s {
font-size: 18px; font-size: 18px;
font-weight: bold; font-weight: bold;
background: -webkit-gradient(linear, left top, left bottom, from(#a7fcff), to(#08ced0)); background: -webkit-gradient(linear, left top, left bottom, from(#a7fcff), to(#08ced0));
background: linear-gradient(180deg, #a7fcff, #08ced0); background: linear-gradient(180deg, #00AAA3, #006b3b);
-webkit-background-clip: text; -webkit-background-clip: text;
color: transparent; color: transparent;
} }

102
src/views/Data.vue
View File

@ -12,15 +12,38 @@
<div class="des"> <div class="des">
<span class="box-title">通讯信息</span> <span class="box-title">通讯信息</span>
<span class="box-info"> <span class="box-info">
<el-tag>通讯名称: {{ curDriver.driver_name }}</el-tag> <table>
<el-tag>通讯总计数: {{ curDriver.health && curDriver.health.total_count }}</el-tag> <tr>
<el-tag>通讯描述: {{ curDriver.driver_description }}</el-tag> <td style="width:180px;border-bottom: 1px solid #006b3b;">
<el-tag>通讯状态: {{ txStatus[curDriver.driver_status] }}</el-tag> 通讯名称: {{ curDriver.driver_name }}
<el-tag>通讯成功计数: {{ curDriver.health && curDriver.health.success_count }}</el-tag> </td>
<el-tag>通讯失败计数: {{ curDriver.health && curDriver.health.failure_count }}</el-tag>
<el-tag>通讯最后一次成功时间: {{ curDriver.health && curDriver.health.last_success_time }}</el-tag> <td style="width:120px;border-bottom: 1px solid #006b3b;">通讯失败计数: {{ curDriver.health && curDriver.health.failure_count }}</td>
<el-tag>通讯最后一次失败时间: {{ curDriver.health && curDriver.health.last_failure_ctime }}</el-tag> <td style="width:220px;border-bottom: 1px solid #006b3b;">
<el-tag>通讯最后一次失败原因: {{ curDriver.health && curDriver.health.last_failure_cause }}</el-tag> 通讯最后一次成功时间: {{ curDriver.health && curDriver.health.last_success_time }}
</td>
<td style="border-bottom: 1px solid #006b3b;">
通讯状态: {{ txStatus[curDriver.driver_status] }}
</td>
<td style="border-bottom: 1px solid #006b3b;">
通讯总计数: {{ curDriver.health && curDriver.health.total_count }}
</td>
</tr>
<tr >
<td >
通讯描述: {{ curDriver.driver_description }}
</td>
<td >
通讯成功计数: {{ curDriver.health && curDriver.health.success_count }}
</td>
<td>
通讯最后一次失败时间: {{ curDriver.health && curDriver.health.last_failure_ctime }}
</td>
<td colspan="2">通讯最后一次失败原因: {{ curDriver.health && curDriver.health.last_failure_cause }}</td>
</tr>
</table>
</span> </span>
</div> </div>
<div class="right-con"> <div class="right-con">
@ -40,25 +63,27 @@
</fieldset> </fieldset>
</div> </div>
<div class="right-table"> <div class="right-table">
<div class="des"> <div class="des1">
<span class="box-title">设备信息</span> <span class="box-title">设备信息</span>
<div class="box-info"> <div class="box-info1">
<el-tag>设备名称: {{ curDevice.device_name }}</el-tag> <div>
<el-tag>设备描述: {{ curDevice.device_description }}</el-tag> <el-tag>设备名称: {{ curDevice.device_name }}</el-tag>
<el-tag>设备描述: {{ curDevice.device_description }} </el-tag>
</div>
<el-button type="danger" @click="doDevice">{{!curDevice.device_disable? '禁用' : '启用'}}</el-button> <el-button type="danger" @click="doDevice">{{!curDevice.device_disable? '禁用' : '启用'}}</el-button>
</div> </div>
</div> </div>
<el-table :data="tableData" height="400" border <el-table :data="tableData" height="400" border
:header-cell-style="{ background: '#F6F7FC' }" size="large"> :header-cell-style="{ background: '#F6F7FC' }" size="large">
<el-table-column type="index" label="序号" width="80" align="center" /> <el-table-column type="index" label="序号" width="60" align="center" />
<el-table-column prop="point_name" label="名称" width="150" align="center" show-overflow-tooltip /> <el-table-column prop="point_name" label="名称" width="150" align="center" show-overflow-tooltip />
<el-table-column prop="point_description" label="描述" align="center" show-overflow-tooltip /> <el-table-column prop="point_description" label="描述" align="center" show-overflow-tooltip />
<el-table-column prop="point_quality" label="质量" width="100" align="center" show-overflow-tooltip /> <el-table-column prop="point_quality" label="质量" width="100" align="center" show-overflow-tooltip />
<el-table-column prop="point_in_value" label="点位值" width="100" align="center" show-overflow-tooltip /> <el-table-column prop="point_value" label="点位值" width="130" align="center" show-overflow-tooltip />
<el-table-column prop="point_unit" label="单位" width="100" align="center" show-overflow-tooltip /> <el-table-column prop="point_unit" label="单位" width="100" align="center" show-overflow-tooltip />
<el-table-column prop="point_type" label="类型" width="100" align="center" show-overflow-tooltip /> <el-table-column prop="point_type" label="类型" width="100" align="center" show-overflow-tooltip />
<el-table-column prop="point_timestamp" label="时间戳" width="200" align="center" show-overflow-tooltip /> <el-table-column prop="point_timestamp" label="时间戳" width="200" align="center" show-overflow-tooltip />
<el-table-column label="操作" align="center" width="200" show-overflow-tooltip> <el-table-column label="操作" fixed="right" align="center" width="200" show-overflow-tooltip>
<template #default="scope"> <template #default="scope">
<el-button type="success" size="large" @click="openHis(scope.row)"> <el-button type="success" size="large" @click="openHis(scope.row)">
历史 历史
@ -300,9 +325,10 @@ export default {
justify-content: space-around; justify-content: space-around;
.box-title { .box-title {
height:100% !important; height:100% !important;
width: 30px; width: 70px;
background: #00AAA3; background: #00AAA3;
color:#fff; color:#fff;
// border-right: 1px solid #006b3b; // border-right: 1px solid #006b3b;
display: flex; display: flex;
justify-content: center; justify-content: center;
@ -351,21 +377,41 @@ export default {
} }
.box-info { .box-info {
width:100%; width:100%;
// border: 1px solid red; display: inline-block;
display: flex; height: 100%;
flex-wrap: wrap; table {
justify-content: space-between; width:100%;
align-items: center; height: 100%;
padding: 0 10px; border-collapse: collapse;
.el-tag { }
margin: 10px; td {
} padding:5px;
border-right: 1px solid #006b3b;
border-collapse: collapse;
}
} }
.des { .des, .des1 {
border-bottom: 1px solid #006b3b; border-bottom: 1px solid #006b3b;
display: flex; display: flex;
align-items: center; align-items: center;
width:100%; width:100%;
height: 80px;
}
.des1 {
height: 50px;
}
.box-info1 {
width:100%;
height: 80px;
display: flex;
align-items: center;
justify-content: space-between;
padding: 5px 10px;
}
.el-tag {
margin-right: 10px;
width:200px;
justify-content: left;
} }
</style> </style>