<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}"
|
v-for="(indicator,index) in generalIndicators"
|
:key="indicator.id"
|
>
|
<div class="title">
|
<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.slots.length}}</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 value="work" label="工作"></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 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>
|
<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"
|
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, getDeviceInfoById } from '@/api/shuohuang';
|
export default {
|
data() {
|
return {
|
actTab: 'dev1',
|
devices: [],
|
generalIndicators: [{ id: 'dx', title: '读写中', slots: [] }, { id: 'kx', title: '空闲中', slots: [] }, { id: 'ccgz', title: '插槽故障', slots: [] }],
|
deviceAddr: '',
|
deviceState: '',
|
tableData: [],
|
visibleOfialogAddDev: false,
|
Name: '',
|
IP: '',
|
}
|
},
|
mounted() {
|
this.findDeviceList();
|
},
|
methods: {
|
findDeviceList() {
|
let _this = this;
|
getDeviceList().then(res => {
|
_this.devices = res.data;
|
_this.actTab = _this.devices[0].ID;
|
_this.findDeviceIfo()
|
})
|
},
|
findDeviceIfo() {
|
let _this = this;
|
getDeviceInfoById({ DeviceID: this.actTab }).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) {
|
|
}
|
}
|
}
|
</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: #01a854;
|
&.kx {
|
background: #0f77d1;
|
}
|
&.ccgz {
|
background: #f04235;
|
}
|
}
|
}
|
.indicator-val {
|
font-size: 24px;
|
}
|
}
|
}
|
.filter-bar.flex-box {
|
& > div {
|
display: flex;
|
align-items: center;
|
margin-right: 10px;
|
label {
|
padding-right: 10px;
|
}
|
}
|
}
|
.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>
|
