odjbin/tunnel-cloud-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request '邓洁: 分流器设备管理样式' (#181) from dengjie into dev

Browse Source 
Reviewed-on: http://git.feashow.cn/clay/tunnel-cloud-web/pulls/181
This commit is contained in:
odjbin
2023-12-22 16:00:51 +00:00
parent a2d64b6538 06b12297d1
commit 6e58ac3d65
2 changed files with 81 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

79
src/views/device-manage/index.vue
View File

@@ -26,6 +26,9 @@
<el-menu-item index="3">
<span>其他传感器</span>
</el-menu-item>
<el-menu-item index="4">
<span>分流器</span>
</el-menu-item>
</el-menu>
</div>
<div class="box-right" v-if="changeIndex==1">
@@ -208,6 +211,61 @@
</div>
</div>
</div>
<div class="box-right" v-if="changeIndex==4">
<div class="device-title">
<span>分流器设备管理</span>
<div class="collection-frequency">
<span>采集频率</span>
<span class="units">
<input
type="number"
min="0"
v-model="collectionFrequency"
/>
</span>
</div>
</div>
<div class="device-table">
<el-table stripe
style="border-bottom: 1px #06e5e5 solid;background-color: #011c29;--el-table-border-color: none;"
:header-cell-style="{backgroundColor: '#064B66',color: '#fff',fontSize: '40px',borderBottom: 'none' }"
:cell-style="{textAlign: 'center',borderBottom: 'none'}" :data="fenliuData">
<el-table-column prop="name" label="设备名称" align="center"/>
<el-table-column prop="offset" label="偏移量" align="center"/>
<el-table-column prop="thresholdValue" label="阈值" align="center">
<template #default="scope">
<el-input placeholder="请输入阈值" v-model="scope.row.thresholdValue"></el-input>
</template>
</el-table-column>
<el-table-column prop="state" label="状态" align="center">
<template #default="scope">
<div class="switch">
<div
:class="{ active: scope.row.state }"
@click=" scope.row.state = true"
>
启动
</div>
<div
:class="{ active: ! scope.row.state }"
@click=" scope.row.state = false"
>
停止
</div>
</div>
</template>
</el-table-column>
</el-table>
</div>
<div class="btns">
<div class="cancel-btn" @click="isVisited=false">
取消
</div>
<div class="sure-btn" @click="router.back(-1)">
确定
</div>
</div>
</div>
</div>
</div>
</div>
@@ -381,6 +439,24 @@ const otherData = [
state: false,
}
]
const fenliuData = [
{
name: '1号分流器',
offset: '2342',
thresholdValue: '2342',
state: false,
}, {
name: '2号分流器',
offset: '2342',
thresholdValue: '2342',
state: false,
}, {
name: '3号分流器',
offset: '2342',
thresholdValue: '2342',
state: false,
}
]
const handleChangeMenu = (e) => {
console.log('切换', e)
changeIndex.value = e
@@ -476,6 +552,9 @@ const handleChangeMenu = (e) => {
&:nth-child(2) {
letter-spacing: 120px;
}
&:last-child{
letter-spacing: 40px;
}
}
}
}

4
src/views/tunnel-manage/index.vue
View File

@@ -30,11 +30,11 @@
<div>
<div class="left-img"></div>
<div>
<div class="edit-btn" @click="handleEdit">
<div class="edit-btn" @click.stop="handleEdit">
<div class="edit-icon"></div>
<div>隧道编辑</div>
</div>
<div class="edit-btn" @click="handleEditDevice">
<div class="edit-btn" @click.stop="handleEditDevice">
<div class="edit-icon-two"></div>
<div>设备管理</div>
</div>