<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}"
|
v-for="(indicator,index) in generalIndicators"
|
:key="indicator.id"
|
>
|
<div class="title">
|
<span class="dot"></span>
|
<span class="word">{{indicator.title}}</span>
|
</div>
|
<div class="indicator-val">{{indicator.val}}</div>
|
</div>
|
</div>
|
<div class="table-area">
|
<div class="filter-bar flex-box">
|
<!-- <div>
|
<label>设备地址:</label>
|
<div>
|
<el-input v-model="deviceAddr" size="small"></el-input>
|
</div>
|
</div> -->
|
<div>
|
<label>设备状态:</label>
|
<div>
|
<el-select v-model="deviceState" size="small">
|
<el-option></el-option>
|
</el-select>
|
</div>
|
</div>
|
<div class="btns">
|
<el-button 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 prop="pic" label="现场图片"></el-table-column>
|
<el-table-column prop="addr" label="设备地址"></el-table-column>
|
<el-table-column prop="tel" label="报修电话"></el-table-column>
|
<el-table-column label="操作">
|
<template slot-scope="scope">
|
<div class="operation">
|
<span @click="checkSlot(scope.row)">查看插槽</span>
|
</div>
|
</template>
|
</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: [],
|
visibleOfialogAddDev: false,
|
Name:'',
|
IP:'',
|
}
|
},
|
mounted(){
|
this.findDeviceList();
|
},
|
methods: {
|
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) {
|
|
}
|
}
|
}
|
</script>
|
|
<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;
|
.indicator {
|
flex: 1;
|
position: relative;
|
&:not(.lastOne):after {
|
content: '';
|
width: 1px;
|
height: 57px;
|
background: #e9e9e9;
|
position: absolute;
|
right: 0;
|
top: 50%;
|
transform: translateY(-50%);
|
}
|
.title {
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
font-size: 14px;
|
color: #999;
|
margin-bottom: 10px;
|
.dot {
|
width: 10px;
|
height: 10px;
|
margin-right: 5px;
|
border-radius: 50%;
|
background: rgb(94, 14, 243);
|
}
|
}
|
.indicator-val {
|
font-size: 24px;
|
}
|
}
|
}
|
.filter-bar.flex-box {
|
& > div {
|
display: flex;
|
align-items: center;
|
margin-right: 10px;
|
label {
|
padding-right: 10px;
|
}
|
}
|
}
|
}
|
</style>
|
