From 4aa13af3c74cf57d70bad9c4bc53b2c26e04fb5d Mon Sep 17 00:00:00 2001
From: heyujie <516346543@qq.com>
Date: 星期三, 26 一月 2022 13:46:53 +0800
Subject: [PATCH] 集群管理搜索集群
---
src/pages/shuohuangMonitorAnalyze/components/transferDeviceManage.vue | 234 ++++++++++++++++++++++++++++++++++++++++++++++++++++++----
1 files changed, 217 insertions(+), 17 deletions(-)
diff --git a/src/pages/shuohuangMonitorAnalyze/components/transferDeviceManage.vue b/src/pages/shuohuangMonitorAnalyze/components/transferDeviceManage.vue
index 3665b38..67917d6 100644
--- a/src/pages/shuohuangMonitorAnalyze/components/transferDeviceManage.vue
+++ b/src/pages/shuohuangMonitorAnalyze/components/transferDeviceManage.vue
@@ -1,6 +1,32 @@
<template>
<div class="transfer-device-manage">
+ <div class="header-with-tab">
+ <el-tabs v-model="actTab" @tab-click="checkTab">
+ <el-tab-pane :name="tab.ID" v-for="tab in devices" :key="tab.ID">
+ <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}"
@@ -8,35 +34,51 @@
:key="indicator.id"
>
<div class="title">
- <span class="dot"></span>
+ <span
+ class="dot"
+ :class="{'kx':indicator.id=='kx','dx':indicator.id=='dx','ccgz':indicator.id=='ccgz'}"
+ ></span>
<span class="word">{{indicator.title}}</span>
</div>
- <div class="indicator-val">{{indicator.val}}</div>
+ <div class="indicator-val">{{indicator.slots.length}}</div>
</div>
</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>
<el-select v-model="deviceState" size="small">
- <el-option></el-option>
+ <el-option value="" label="鍏ㄩ儴"></el-option>
+ <el-option value="1" label="璇诲啓涓�"></el-option>
+ <el-option value="0" label="绌洪棽涓�"></el-option>
+ <el-option value="2" label="鎻掓Ы鏁呴殰"></el-option>
</el-select>
</div>
</div>
<div class="btns">
- <el-button type="primary" size="small">鏌ヨ</el-button>
+ <el-button @click="findDeviceIfo" type="primary" size="small">鏌ヨ</el-button>
</div>
</div>
<el-table class="thbg" :data="tableData" fit>
- <el-table-column prop="name" label="杞偍璁惧鍚嶇О"></el-table-column>
- <el-table-column prop="state" label="璁惧鐘舵��"></el-table-column>
+ <el-table-column type="index" width="100" label="搴忓彿"></el-table-column>
+ <el-table-column prop="Name" label="鎻掓Ы鍚嶇О"></el-table-column>
+ <el-table-column prop="Status" label="鐘舵��">
+ <template slot-scope="scope">
+ <div>
+ <span v-if="scope.row.Status==0">绌洪棽涓�</span>
+ <span v-if="scope.row.Status==1">璇诲啓涓�</span>
+ <span v-if="scope.row.Status==2">鎻掓Ы鏁呴殰</span>
+ </div>
+ </template>
+ </el-table-column>
+ <!-- <el-table-column prop="state" label="璁惧鐘舵��"></el-table-column>
<el-table-column prop="pic" label="鐜板満鍥剧墖"></el-table-column>
<el-table-column prop="addr" label="璁惧鍦板潃"></el-table-column>
<el-table-column prop="tel" label="鎶ヤ慨鐢佃瘽"></el-table-column>
@@ -46,24 +88,113 @@
<span @click="checkSlot(scope.row)">鏌ョ湅鎻掓Ы</span>
</div>
</template>
- </el-table-column>
+ </el-table-column>-->
</el-table>
</div>
+ <el-dialog
+ :visible="visibleOfialogAddDev"
+ title="娣诲姞璁惧"
+ class="dialog-addDev"
+ @close="visibleOfialogAddDev = false"
+ >
+ <div>
+ <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, getDeviceInfo } from '@/api/shuohuang';
export default {
-
- data () {
+ data() {
return {
- 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 }],
+ actTab: 'dev1',
+ devices: [],
+ generalIndicators: [{ id: 'dx', title: '璇诲啓涓�', slots: [] }, { id: 'kx', title: '绌洪棽涓�', slots: [] }, { id: 'ccgz', title: '鎻掓Ы鏁呴殰', slots: [] }],
deviceAddr: '',
deviceState: '',
- tableData: []
+ tableData: [],
+ visibleOfialogAddDev: false,
+ Name: '',
+ IP: '',
}
},
+ mounted() {
+ this.findDeviceList();
+ },
methods: {
- checkSlot(row){
+ findDeviceList() {
+ let _this = this;
+ getDeviceList().then(res => {
+ _this.devices = res.data;
+ _this.actTab = _this.devices[0].ID;
+ _this.findDeviceIfo()
+ })
+ },
+ findDeviceIfo() {
+ let _this = this;
+ getDeviceInfo({
+ DeviceID: this.actTab,
+ Status:this.deviceState
+ }).then(res => {
+ // debugger
+ _this.tableData = res.data;
+ //缁熻褰撳墠鎻掓Ы鐘舵��
+ let dx = _this.generalIndicators.find(indicator => indicator.id == 'dx');
+ let kx = _this.generalIndicators.find(indicator => indicator.id == 'kx');
+ let ccgz = _this.generalIndicators.find(indicator => indicator.id == 'ccgz');
+ dx.slots = [];
+ kx.slots = [];
+ ccgz.slots = [];
+ res.data.forEach(slot => {
+ if (slot.Status == 0) {
+ kx.slots.push(slot)
+ }
+ if (slot.Status == 1) {
+ dx.slots.push(slot)
+ }
+ if (slot.Status == 2) {
+ ccgz.slots.push(slot)
+ }
+ })
+ //_this.generalIndicators
+ })
+ },
+ 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) {
+ this.findDeviceIfo();
+ },
+ checkSlot(row) {
}
}
@@ -73,6 +204,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;
@@ -80,7 +256,7 @@
flex: 1;
position: relative;
&:not(.lastOne):after {
- content: '';
+ content: "";
width: 1px;
height: 57px;
background: #e9e9e9;
@@ -101,7 +277,13 @@
height: 10px;
margin-right: 5px;
border-radius: 50%;
- background: rgb(94, 14, 243);
+ background: #01a854;
+ &.kx {
+ background: #0f77d1;
+ }
+ &.ccgz {
+ background: #f04235;
+ }
}
}
.indicator-val {
@@ -119,6 +301,24 @@
}
}
}
-
+ .dialog-addDev {
+ .el-dialog {
+ width: 600px;
+ }
+ .flex-box {
+ align-items: center;
+ margin-bottom: 10px;
+ label {
+ width: 90px;
+ text-align: left;
+ }
+ .el-input {
+ width: 500px;
+ }
+ }
+ .btns {
+ padding: 10px 0;
+ }
+ }
}
</style>
\ No newline at end of file
--
Gitblit v1.8.0