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

123

main
瓶中沙 2024-06-29 11:04:11 +08:00
parent db325c1012
commit 2390dd9eb7
5 changed files with 129 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
src/assets/qd.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.2 KiB

3
src/components/Header.vue
View File

@ -133,6 +133,9 @@ export default {
font-size: 20px;
}
}
.right {
font-size: 20px;
}
}
.el-icon-back {
border: 1px solid #e9e9e9;

10
src/components/Sidebar.vue
View File

@ -93,11 +93,11 @@ export default {
name: "驱动管理",
index: "/page",
},
// {
// id: 3 - 2,
// name: "实时数据",
// index: "/data",
// },
{
id: 3 - 3,
name: "实时数据",
index: "/data",
},
// {
// id: 3 - 3,
// name: "上报管理",

10
src/router/index.js
View File

@ -32,11 +32,11 @@ const router = createRouter({
name: 'page',
component: () => import('../views/Page.vue')
},
// {
// path: '/data',
// name: 'data',
// component: () => import('../views/Data.vue')
// },
{
path: '/data',
name: 'data',
component: () => import('../views/Data.vue')
},
// {
// path: '/report',
// name: 'report',

119
src/views/Data.vue
View File

@ -1,7 +1,48 @@
<template>
<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)">
<img src="../assets/qd.png" alt="">
{{ item.name }}
</div>
</fieldset>
<div class="right">
<div class="right-set">
<el-tree
:data="data"
:props="defaultProps"
:highlight-current="true"
accordion
@node-click="handleNodeClick">
</el-tree>
</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="60" align="center" />
<el-table-column prop="name" label="名称" width="150" align="center" show-overflow-tooltip />
<el-table-column prop="description" label="描述" align="center" show-overflow-tooltip />
<el-table-column prop="description" label="质量" align="center" show-overflow-tooltip />
<el-table-column prop="description" label="值" align="center" show-overflow-tooltip />
<el-table-column prop="description" label="单位" align="center" show-overflow-tooltip />
<el-table-column prop="description" label="类型" align="center" show-overflow-tooltip />
<el-table-column prop="description" label="时间戳" 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">
写值
</el-button>
</template>
</el-table-column>
</el-table>
</div>
</div>
</div>
</el-card>
</template>
@ -15,21 +56,93 @@ export default {
setup() {
const ruleFormRef = ref(null);
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: '设备三',
}],
tableData: []
});
onMounted(() => {
});
const changeQd = (i) => {
state.indexi = i;
}
return {
...toRefs(state),
changeQd
};
},
};
</script>
<style lang="scss" scoped>
.all-content {
display: flex;
justify-content: space-between;
font-size: 14px;
.left {
width: 15%;
border: 1px solid #006b3b;
font-size: 16px;
img {
width: 24px;
}
>div {
background: #e2f4e5;
margin-top: 10px;
text-align: center;
line-height: 40px;
cursor:pointer;
}
.active {
background: #00AAA3;
color: #fff;
}
}
.right {
width: 84%;
border: 1px solid #006b3b;
display: flex;
justify-content: space-around;
.right-set {
width: 10%;
padding: 20px;
}
.right-table {
width: 88%;
// .el-tree-node {
// border: 1px solid #ddd !important;
// margin-top: 10px !important;
// }
}
}
}
</style>