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

Compare commits

base: wangqiujuan0808:32833eb6b80e2dc90bb5822786df8530b2fb44f3
Branches Tags
wangqiujuan0808:main
..
compare: wangqiujuan0808:64f50960a7a230747bcff185b66c1bec4752d449
Branches Tags
wangqiujuan0808:main

No commits in common. "32833eb6b80e2dc90bb5822786df8530b2fb44f3" and "64f50960a7a230747bcff185b66c1bec4752d449" have entirely different histories.
32833eb6b8 ... 64f50960a7

2 changed files with 83 additions and 134 deletions
Show Stats Expand all files Collapse all files

8
src/api/infoApi.js
View File

@ -169,17 +169,17 @@ const infoApi = {
return postPBRequest("/info", null, 51001, params.name); return postPBRequest("/info", null, 51001, params.name);
}, },
// 实时数据 // 实时数据
// 获取驱动 // 获取驱动数据
getDriverData(params) { getDriverData(params) {
return postPBRequest("/data", null, 56200); return postPBRequest("/data", null, 55000);
}, },
// 获取驱动下设备数据 // 获取驱动下设备数据
getDeviceData(params) { getDeviceData(params) {
return postPBRequest("/data", params, 56100); return postPBRequest("/data", params, 55001);
}, },
// 获取设备下的点位 // 获取设备下的点位
getPointData(params) { getPointData(params) {
return postPBRequest("/data", params, 56000); return postPBRequest("/data", params, 55002);
} }
}; };
export default infoApi; export default infoApi;

209
src/views/Data.vue
View File

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