<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
|
class="title"
|
:style="tab.Status == 1 ? { color: '#8A98B8' } : {}"
|
>{{ tab.Name }}</span
|
>
|
<span
|
class="capsule"
|
:class="{ online: tab.Status == 0, offline: tab.Status == 1 }"
|
>{{ tab.Status == 0 ? "在线" : "离线" }}</span
|
>
|
</div>
|
</el-tab-pane>
|
</el-tabs>
|
<!-- <div class="btn-add-dev" @click="showAddDevice">
|
<span class="icon iconfont"> </span>
|
<span>添加设备</span>
|
</div> -->
|
</div>
|
<div class="t-d-content">
|
<div class="general-view">
|
<div class="indicator">
|
<div class="icon-wrap">
|
<div class="icon-div"><span class="iconfont"></span></div>
|
|
<span class="text">设备重启</span>
|
</div>
|
</div>
|
<div
|
class="indicator"
|
:class="{ lastOne: index == generalIndicators.length - 1 }"
|
v-for="(indicator, index) in generalIndicators"
|
:key="indicator.id"
|
>
|
<div class="img-desc">
|
<img class="icon" :src="indicator.path" />
|
</div>
|
<div class="title">
|
<div class="indicator-val" :style="{ color: indicator.color }">
|
<span
|
style="font-size: 24px"
|
:style="{ color: indicator.color }"
|
>{{ indicator.slots.length }}</span
|
>
|
个
|
</div>
|
<span class="word">{{ indicator.title }}</span>
|
</div>
|
</div>
|
</div>
|
<div class="table-area">
|
<div class="filter-bar flex-box">
|
<div>
|
<label>设备状态:</label>
|
<div>
|
<el-select v-model="deviceState" size="small">
|
<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 @click="findDeviceIfo" type="primary" size="small"
|
>查询</el-button
|
>
|
</div>
|
</div>
|
<el-table
|
class="thbg"
|
:data="tableData"
|
fit
|
stripe
|
:header-cell-style="{
|
background: '#2D52D7',
|
color: '#fff',
|
height: '50px',
|
}"
|
>
|
<el-table-column
|
type="index"
|
width="240"
|
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 style="color: #6297f2" v-if="scope.row.Status == 0"
|
>空闲中</span
|
>
|
<span style="color: #fea425" v-if="scope.row.Status == 1"
|
>读写中</span
|
>
|
<span style="color: #ed663e" v-if="scope.row.Status == 2"
|
>插槽故障</span
|
>
|
</div>
|
</template>
|
</el-table-column>
|
</el-table>
|
</div>
|
</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() {
|
return {
|
actTab: "dev1",
|
devices: [],
|
generalIndicators: [
|
{
|
id: "dx",
|
title: "读写中",
|
slots: [],
|
color: "#FEA425",
|
path: "/images/shuohuang/组 780.png",
|
},
|
{
|
id: "kx",
|
title: "空闲中",
|
slots: [],
|
color: "#6297F2",
|
path: "/images/shuohuang/组 781.png",
|
},
|
{
|
id: "ccgz",
|
title: "插槽故障",
|
slots: [],
|
color: "#ED663E",
|
path: "/images/shuohuang/组 782.png",
|
},
|
],
|
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;
|
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) {},
|
},
|
};
|
</script>
|
|
<style lang="scss">
|
.transfer-device-manage {
|
// padding: 20px;
|
// .el-tabs__nav-scroll {
|
// overflow-x: scroll;
|
// }
|
.el-tabs__nav-wrap.is-scrollable {
|
padding-right: 90px;
|
}
|
|
.el-tabs__item {
|
height: 45px;
|
line-height: 45px;
|
}
|
.el-tabs__nav-wrap::after {
|
height: 1px;
|
}
|
.header-with-tab {
|
position: relative;
|
background: #ffffff;
|
box-shadow: 0px 3px 6px rgba(160, 174, 230, 0.56);
|
border-radius: 10px;
|
padding: 0 35px;
|
padding-top: 15px;
|
.el-tabs__header {
|
margin: 0;
|
}
|
.el-tabs__item.is-active .label-slot .title {
|
color: #2d52d7;
|
}
|
.label-slot {
|
display: flex;
|
align-items: center;
|
padding: 0 20px;
|
font-weight: bold;
|
position: relative;
|
.title {
|
font-size: 14px;
|
}
|
.capsule {
|
width: 36px;
|
height: 18px;
|
margin-left: 10px;
|
line-height: 18px;
|
position: absolute;
|
text-align: center;
|
top: 0px;
|
text-align: center;
|
border-radius: 20px;
|
font-size: 12px;
|
font-weight: normal;
|
color: #fff;
|
right: -20px;
|
&.online {
|
background: #2ace7c;
|
}
|
&.offline {
|
background: #8a98b8;
|
}
|
}
|
}
|
// .btn-add-dev {
|
// cursor: pointer;
|
// position: absolute;
|
// right: 25px;
|
// top: 20px;
|
// /* color: #1890ff; */
|
// font-size: 16px;
|
// }
|
}
|
.t-d-content {
|
background: #fff;
|
margin-top: 20px;
|
border-radius: 10px;
|
box-shadow: 0px 3px 6px rgb(160 174 230 / 56%);
|
padding: 30px 45px;
|
button span {
|
color: #fff;
|
}
|
}
|
.general-view {
|
display: flex;
|
.indicator {
|
position: relative;
|
background: #f4f6f9;
|
width: 263px;
|
height: 101px;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
margin-right: 50px;
|
|
.img-desc {
|
margin-right: 8px;
|
|
img {
|
width: 53px;
|
}
|
}
|
.icon-wrap {
|
display: flex;
|
flex-direction: column;
|
.icon-div {
|
background: #26d4b4;
|
width: 42px;
|
height: 42px;
|
line-height: 42px;
|
|
border-radius: 21px;
|
box-shadow: 0 0 0 8px #caf0eb;
|
margin-bottom: 10px;
|
span {
|
font-size: 32px;
|
color: #fff;
|
}
|
}
|
}
|
&:not(.lastOne):after {
|
content: "";
|
width: 1px;
|
height: 57px;
|
background: #e9e9e9;
|
position: absolute;
|
right: 0;
|
top: 50%;
|
transform: translateY(-50%);
|
}
|
.title {
|
display: flex;
|
font-size: 14px;
|
color: #999;
|
flex-direction: column;
|
.indicator-val {
|
font-size: 16px;
|
font-weight: bold;
|
}
|
}
|
}
|
}
|
.table-area {
|
margin-top: 25px;
|
button {
|
background: #2d52d7 !important;
|
border-color: #2d52d7 !important;
|
}
|
.el-table--striped
|
.el-table__body
|
tr.el-table__row--striped
|
td.el-table__cell {
|
background: #f4f6f9;
|
}
|
th.el-table__cell > .cell {
|
color: #fff;
|
}
|
.thbg {
|
margin-top: 15px;
|
border: none;
|
}
|
.el-table__row > td {
|
border: none;
|
}
|
.el-table th.is-leaf {
|
border: none;
|
}
|
.el-table::before {
|
height: 0px;
|
}
|
}
|
.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>
|
