朔黄转储设备相关页面更新

hanbaoshan

2021-02-01 0e0944361a66439f7be48567c2fe6c482dd37a5c

 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>