From 0e0944361a66439f7be48567c2fe6c482dd37a5c Mon Sep 17 00:00:00 2001
From: hanbaoshan <hanbaoshan@aiotlink.com>
Date: 星期一, 01 二月 2021 13:57:26 +0800
Subject: [PATCH] 朔黄转储设备相关页面更新
---
src/pages/shuohuangMonitorAnalyze/components/transferDeviceManage.vue | 133 ++++++++++++++++++++++++++++++++++++++++++--
1 files changed, 127 insertions(+), 6 deletions(-)
diff --git a/src/pages/shuohuangMonitorAnalyze/components/transferDeviceManage.vue b/src/pages/shuohuangMonitorAnalyze/components/transferDeviceManage.vue
index 3665b38..5429e2b 100644
--- a/src/pages/shuohuangMonitorAnalyze/components/transferDeviceManage.vue
+++ b/src/pages/shuohuangMonitorAnalyze/components/transferDeviceManage.vue
@@ -1,6 +1,29 @@
<template>
<div class="transfer-device-manage">
+ <div class="header-with-tab">
+ <el-tabs v-model="actTab" @tab-click="checkTab" >
+ <el-tab-pane name="dev1" v-for="tab in devices" :key="tab">
+ <div slot="label" class="label-slot">
+ <span>{{tab.Name}}</span>
+ <span class="capsule" :class="{'online':tab.Status==0,'offline':tab.Status==1}">{{tab.Status==0?"鍦ㄧ嚎":"绂荤嚎"}}</span>
+ </div>
+ </el-tab-pane>
+ <el-tab-pane name="dev2">
+ <div slot="label" class="label-slot">
+ <span>杞偍璁惧2</span>
+ <span class="capsule offline">绂荤嚎</span>
+ </div>
+ </el-tab-pane>
+ </el-tabs>
+ <div class="btn-add-dev" @click="showAddDevice">
+ <i class="el-icon-circle-plus"></i>
+ <span>娣诲姞璁惧</span>
+ </div>
+ </div>
<div class="general-view">
+ <div class="indicator">
+ <el-button>璁惧閲嶅惎</el-button>
+ </div>
<div
class="indicator"
:class="{'lastOne':index==generalIndicators.length-1}"
@@ -16,12 +39,12 @@
</div>
<div class="table-area">
<div class="filter-bar flex-box">
- <div>
+ <!-- <div>
<label>璁惧鍦板潃:</label>
<div>
<el-input v-model="deviceAddr" size="small"></el-input>
</div>
- </div>
+ </div> -->
<div>
<label>璁惧鐘舵��:</label>
<div>
@@ -49,21 +72,75 @@
</el-table-column>
</el-table>
</div>
+ <el-dialog :visible="visibleOfialogAddDev">
+ <div>
+ <p slot="title">娣诲姞璁惧</p>
+ <div class="flex-box">
+ <label>璁惧鍚嶇О锛�</label>
+ <el-input v-model="Name"></el-input>
+ </div>
+ <div class="flex-box">
+ <label>璁惧IP锛�</label>
+ <el-input v-model="IP"></el-input>
+ </div>
+ <div slot="footer" class="btns">
+ <el-button type="primary" size="small" @click="toAddDevice">纭畾</el-button>
+ <el-button size="small" @click="visibleOfialogAddDev=false">鍙栨秷</el-button>
+ </div>
+ </div>
+ </el-dialog>
</div>
</template>
<script>
+import {addDevice,getDeviceList} from '@/api/shuohuang';
export default {
-
data () {
return {
+ actTab: 'dev1',
+ devices: [],
generalIndicators: [{ id: 'gz', title: '鏈夋晠闅滆澶�', val: 156 }, { id: 'zc', title: '姝ｅ父璁惧', val: 5000 }, { id: 'dx', title: '璇诲啓涓�', val: 56 }, { id: 'kx', title: '绌洪棽涓�', val: 2000 }, { id: 'ccgz', title: '鎻掓Ы鏁呴殰', val: 1000 }],
deviceAddr: '',
deviceState: '',
- tableData: []
+ tableData: [],
+ visibleOfialogAddDev: false,
+ Name:'',
+ IP:'',
}
},
+ mounted(){
+ this.findDeviceList();
+ },
methods: {
- checkSlot(row){
+ findDeviceList (){
+ getDeviceList().then(res=>{
+ debugger
+ //_this.devices =
+ })
+ },
+ toAddDevice(){
+ let _this = this;
+ let params = {
+ Name: this.Name,
+ IP: this.IP
+ }
+ addDevice(params).then(res=>{
+ if(res.success){
+ this.$notify({
+ type:'success',
+ message: res.msg
+ })
+ _this.visibleOfialogAddDev = true;
+ }
+ })
+ },
+ showAddDevice(){
+ this.visibleOfialogAddDev = true;
+
+ },
+ checkTab (tab, event) {
+
+ },
+ checkSlot (row) {
}
}
@@ -73,6 +150,51 @@
<style lang="scss">
.transfer-device-manage {
padding: 20px;
+ .el-tabs__item{
+ height: 45px;
+ line-height: 45px;
+ }
+ .el-tabs__nav-wrap::after {
+ height: 1px;
+ }
+ .header-with-tab {
+ position: relative;
+ .label-slot {
+ display: flex;
+ align-items: center;
+ padding: 0 20px;
+ font-weight: bold;
+ .capsule {
+ width: 42px;
+ height: 20px;
+ margin-left: 10px;
+ line-height: 20px;
+ text-align: center;
+ border-radius: 20px;
+ font-size: 12px;
+ font-weight: normal;
+ color: #fff;
+ &.online{
+ background: #00a854;
+ }
+ &.offline{
+ background: #f04134;
+ }
+ }
+ }
+ .btn-add-dev {
+ cursor: pointer;
+ position: absolute;
+ right: 0;
+ top: 10px;
+ color: #1890ff;
+ font-size: 14px;
+ i {
+ padding-right: 4px;
+ font-size: 16px;
+ }
+ }
+ }
.general-view {
display: flex;
padding: 30px;
@@ -119,6 +241,5 @@
}
}
}
-
}
</style>
\ No newline at end of file
--
Gitblit v1.8.0