|
|
|
|
@ -2,47 +2,73 @@
|
|
|
|
|
<el-card class="content-div">
|
|
|
|
|
<div class="all-content">
|
|
|
|
|
<fieldset class="left box2">
|
|
|
|
|
<legend class="box-ht">驱动列表</legend>
|
|
|
|
|
<div v-for="(item, i) in qdDatas" :class="i === indexi ? 'active' : ''" :key="i" @click="changeQd(i, item)">
|
|
|
|
|
<legend class="box-ht">通讯列表</legend>
|
|
|
|
|
<div v-for="(item, i) in driverData" :class="i === indexi ? 'active' : ''" class="qd-one" :key="i" @click="changeQd(i, item)">
|
|
|
|
|
<img src="../assets/qd.png" alt="">
|
|
|
|
|
{{ item.driver_name }}
|
|
|
|
|
</div>
|
|
|
|
|
</fieldset>
|
|
|
|
|
<div class="right">
|
|
|
|
|
<div class="right-set">
|
|
|
|
|
<el-tree
|
|
|
|
|
:data="data"
|
|
|
|
|
:props="defaultProps"
|
|
|
|
|
:highlight-current="true"
|
|
|
|
|
accordion
|
|
|
|
|
node-key="id"
|
|
|
|
|
:current-node-key="currentNodekey"
|
|
|
|
|
@node-click="handleNodeClick">
|
|
|
|
|
</el-tree>
|
|
|
|
|
<div class="des">
|
|
|
|
|
<span class="box-title">通讯信息</span>
|
|
|
|
|
<span class="box-info">
|
|
|
|
|
<el-tag>通讯名称:{{ curDriver.driver_name }}</el-tag>
|
|
|
|
|
<el-tag>通讯总计数:{{ curDriver.driver_name }}</el-tag>
|
|
|
|
|
<el-tag>通讯描述:{{ curDriver.driver_description }}</el-tag>
|
|
|
|
|
<el-tag>通讯状态:{{ curDriver.driver_status }}</el-tag>
|
|
|
|
|
<el-tag>通讯成功计数:{{ curDriver.driver_name }}</el-tag>
|
|
|
|
|
<el-tag>通讯失败计数:{{ curDriver.driver_name }}</el-tag>
|
|
|
|
|
<el-tag>通讯最后一次成功时间:{{ curDriver.driver_name }}</el-tag>
|
|
|
|
|
<el-tag>通讯最后一次失败时间:{{ curDriver.driver_name }}</el-tag>
|
|
|
|
|
<el-tag>通讯最后一次失败原因:{{ curDriver.driver_name }}</el-tag>
|
|
|
|
|
</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="right-table">
|
|
|
|
|
<el-table :data="tableData" border :row-class-name="tableRowClassName"
|
|
|
|
|
:header-cell-style="{ background: '#F6F7FC' }" size="large">
|
|
|
|
|
<el-table-column type="index" label="序号" width="80" align="center" />
|
|
|
|
|
<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_quality" label="质量" width="100" align="center" show-overflow-tooltip />
|
|
|
|
|
<el-table-column prop="point_value" 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_timestamp" label="时间戳" width="200" align="center" show-overflow-tooltip />
|
|
|
|
|
<el-table-column label="操作" align="center" show-overflow-tooltip>
|
|
|
|
|
<template #default="scope">
|
|
|
|
|
<el-button type="success" size="large">
|
|
|
|
|
历史
|
|
|
|
|
</el-button>
|
|
|
|
|
<el-button type="warning" size="large" v-if="scope.row.point_permissions ==2">
|
|
|
|
|
写值
|
|
|
|
|
</el-button>
|
|
|
|
|
<div class="right-con">
|
|
|
|
|
<div class="right-set">
|
|
|
|
|
<div>设备列表</div>
|
|
|
|
|
<el-tree
|
|
|
|
|
:data="driceData"
|
|
|
|
|
:props="defaultProps"
|
|
|
|
|
:highlight-current="true"
|
|
|
|
|
accordion
|
|
|
|
|
node-key="device_name"
|
|
|
|
|
ref="taskTree"
|
|
|
|
|
:current-node-key="device_name"
|
|
|
|
|
@node-click="handleNodeClick">
|
|
|
|
|
</el-tree>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="right-table">
|
|
|
|
|
<div class="des">
|
|
|
|
|
<span class="box-title">设备信息</span>
|
|
|
|
|
<div class="box-info">
|
|
|
|
|
<el-tag>设备名称: </el-tag>
|
|
|
|
|
<el-tag>设备描述: </el-tag>
|
|
|
|
|
<el-button type="danger">禁用</el-button>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<el-table :data="tableData" height="400" border :row-class-name="tableRowClassName"
|
|
|
|
|
:header-cell-style="{ background: '#F6F7FC' }" size="large">
|
|
|
|
|
<el-table-column type="index" label="序号" width="80" align="center" />
|
|
|
|
|
<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_quality" label="质量" width="100" align="center" show-overflow-tooltip />
|
|
|
|
|
<el-table-column prop="point_value" 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_timestamp" label="时间戳" width="200" align="center" show-overflow-tooltip />
|
|
|
|
|
<el-table-column label="操作" align="center" width="200" show-overflow-tooltip>
|
|
|
|
|
<template #default="scope">
|
|
|
|
|
<el-button type="success" size="large">
|
|
|
|
|
历史
|
|
|
|
|
</el-button>
|
|
|
|
|
<el-button type="warning" size="large" v-if="scope.row.point_permissions ==2">
|
|
|
|
|
详情
|
|
|
|
|
</el-button>
|
|
|
|
|
|
|
|
|
|
</template>
|
|
|
|
|
</el-table-column>
|
|
|
|
|
</el-table>
|
|
|
|
|
</template>
|
|
|
|
|
</el-table-column>
|
|
|
|
|
</el-table>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
@ -60,36 +86,15 @@ export default {
|
|
|
|
|
const state = reactive({
|
|
|
|
|
indexi: 0,
|
|
|
|
|
|
|
|
|
|
qdDatas: [{
|
|
|
|
|
id: 1,
|
|
|
|
|
name: '驱动一',
|
|
|
|
|
},{
|
|
|
|
|
id: 2,
|
|
|
|
|
name: '驱动二',
|
|
|
|
|
},{
|
|
|
|
|
id: 3,
|
|
|
|
|
name: '驱动三',
|
|
|
|
|
},{
|
|
|
|
|
id: 4,
|
|
|
|
|
name: '驱动四',
|
|
|
|
|
},{
|
|
|
|
|
id: 5,
|
|
|
|
|
name: '驱动五',
|
|
|
|
|
}],
|
|
|
|
|
data: [{
|
|
|
|
|
id: 11,
|
|
|
|
|
label: '设备一',
|
|
|
|
|
}, {
|
|
|
|
|
id: 12,
|
|
|
|
|
label: '设备二',
|
|
|
|
|
}, {
|
|
|
|
|
id: 13,
|
|
|
|
|
label: '设备三',
|
|
|
|
|
|
|
|
|
|
}],
|
|
|
|
|
driverData: [],
|
|
|
|
|
driceData: [ ],
|
|
|
|
|
currentNodekey: 11,
|
|
|
|
|
tableData: [],
|
|
|
|
|
|
|
|
|
|
defaultProps: {
|
|
|
|
|
children: "children",
|
|
|
|
|
label: "device_name"
|
|
|
|
|
},
|
|
|
|
|
curDriver: {}
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
onMounted(() => {
|
|
|
|
|
@ -99,9 +104,10 @@ export default {
|
|
|
|
|
const getDriverData = async () => {
|
|
|
|
|
const res = await infoApi.getDriverData();
|
|
|
|
|
if (res.code == 0) {
|
|
|
|
|
state.qdDatas = res.data || [];
|
|
|
|
|
if (state.qdDatas.length > 0) {
|
|
|
|
|
changeQd(0, state.qdDatas[0]);
|
|
|
|
|
state.driverData = res.data || [];
|
|
|
|
|
if (state.driverData.length > 0) {
|
|
|
|
|
changeQd(0, state.driverData[0]);
|
|
|
|
|
state.curDriver = state.driverData[0];
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
@ -109,6 +115,7 @@ export default {
|
|
|
|
|
}
|
|
|
|
|
const changeQd = (i, item) => {
|
|
|
|
|
state.indexi = i;
|
|
|
|
|
state.curDriver = item;
|
|
|
|
|
getDeviceData(item.driver_name);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
@ -118,11 +125,13 @@ export default {
|
|
|
|
|
}
|
|
|
|
|
const res = await infoApi.getDeviceData(param);
|
|
|
|
|
if (res.code == 0) {
|
|
|
|
|
state.data = res.data || [];
|
|
|
|
|
if (state.data.length > 0) {
|
|
|
|
|
handleNodeClick(state.data[0]);
|
|
|
|
|
state.driceData = res.data || [];
|
|
|
|
|
console.log(123, state.driceData)
|
|
|
|
|
if (state.driceData.length > 0) {
|
|
|
|
|
handleNodeClick(state.driceData[0]);
|
|
|
|
|
nextTick(() => {
|
|
|
|
|
taskTree.value.setCurrentKey(state.data[0].device_name);
|
|
|
|
|
console.log(123 , state.driceData[0].device_name)
|
|
|
|
|
taskTree.value.setCurrentKey(state.driceData[0].device_name);
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
@ -142,6 +151,7 @@ export default {
|
|
|
|
|
const res = await infoApi.getPointData(param);
|
|
|
|
|
if(res.code == 0) {
|
|
|
|
|
state.tableData = res.data;
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
@ -149,9 +159,9 @@ export default {
|
|
|
|
|
|
|
|
|
|
return {
|
|
|
|
|
...toRefs(state),
|
|
|
|
|
taskTree,
|
|
|
|
|
changeQd,
|
|
|
|
|
handleNodeClick,
|
|
|
|
|
taskTree
|
|
|
|
|
handleNodeClick
|
|
|
|
|
};
|
|
|
|
|
},
|
|
|
|
|
};
|
|
|
|
|
@ -165,18 +175,40 @@ export default {
|
|
|
|
|
.left {
|
|
|
|
|
width: 15%;
|
|
|
|
|
border: 1px solid #006b3b;
|
|
|
|
|
font-size: 16px;
|
|
|
|
|
width: 24px;
|
|
|
|
|
font-size: 16px;
|
|
|
|
|
.qd-one {
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: space-around;
|
|
|
|
|
align-items: center;
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 45px;
|
|
|
|
|
img {
|
|
|
|
|
width: 24px;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.right {
|
|
|
|
|
width: 84%;
|
|
|
|
|
border: 1px solid #006b3b;
|
|
|
|
|
justify-content: space-around;
|
|
|
|
|
|
|
|
|
|
.box-title {
|
|
|
|
|
height:100% !important;
|
|
|
|
|
width: 30px;
|
|
|
|
|
background: #00AAA3;
|
|
|
|
|
color:#fff;
|
|
|
|
|
// border-right: 1px solid #006b3b;
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: center;
|
|
|
|
|
align-items: center;
|
|
|
|
|
}
|
|
|
|
|
.right-con {
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: space-between;
|
|
|
|
|
}
|
|
|
|
|
.right-set {
|
|
|
|
|
width: 10%;
|
|
|
|
|
padding: 20px;
|
|
|
|
|
width: 12%;
|
|
|
|
|
padding: 5px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.right-table {
|
|
|
|
|
@ -192,11 +224,12 @@ export default {
|
|
|
|
|
color: #fff;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.right {
|
|
|
|
|
width: 84%;
|
|
|
|
|
border: 1px solid #006b3b;
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: space-around;
|
|
|
|
|
border: 1px solid #006b3b;
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.right-set {
|
|
|
|
|
width: 10%;
|
|
|
|
|
padding: 20px;
|
|
|
|
|
@ -210,4 +243,22 @@ export default {
|
|
|
|
|
// }
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.box-info {
|
|
|
|
|
width:100%;
|
|
|
|
|
// border: 1px solid red;
|
|
|
|
|
display: flex;
|
|
|
|
|
flex-wrap: wrap;
|
|
|
|
|
justify-content: space-between;
|
|
|
|
|
align-items: center;
|
|
|
|
|
::v-deep .el-tag {
|
|
|
|
|
margin: 10px;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.des {
|
|
|
|
|
border-bottom: 1px solid #006b3b;
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
width:100%;
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
</style>
|
|
|
|
|
|
瓶中沙