<template>
|
<div class="transfer-device-manage">
|
<div class="general-view">
|
<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>
|
</div>
|
</template>
|
<script>
|
export default {
|
|
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 }],
|
deviceAddr: '',
|
deviceState: '',
|
tableData: []
|
}
|
},
|
methods: {
|
checkSlot(row){
|
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss">
|
.transfer-device-manage {
|
padding: 20px;
|
.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>
|
