|
@@ -0,0 +1,199 @@
|
|
|
+<template>
|
|
|
+ <el-container direction="vertical">
|
|
|
+ <el-header height="40px" style="border-bottom: 1px solid #eee">
|
|
|
+ <div style="float:left;">柜体控制</div>
|
|
|
+ <div style="float:right;height:40px;">
|
|
|
+ <el-dropdown>
|
|
|
+ <span class="el-dropdown-link">
|
|
|
+ 操作
|
|
|
+ <i class="el-icon-arrow-down el-icon--right"></i>
|
|
|
+ </span>
|
|
|
+ <el-dropdown-menu slot="dropdown">
|
|
|
+ <el-dropdown-item>开箱</el-dropdown-item>
|
|
|
+ <el-dropdown-item>停用</el-dropdown-item>
|
|
|
+ </el-dropdown-menu>
|
|
|
+ </el-dropdown>
|
|
|
+ </div>
|
|
|
+ </el-header>
|
|
|
+
|
|
|
+ <el-row justify="space-around" :gutter="10">
|
|
|
+ <el-col :span="6">
|
|
|
+ <el-card class="box-card">
|
|
|
+ <div slot="header" class="clearfix">
|
|
|
+ <span>1号柜</span>
|
|
|
+ <el-button style="float: right; padding: 3px 0" type="text">开箱</el-button>
|
|
|
+ </div>
|
|
|
+ <div style="height:72px;">
|
|
|
+ <el-row type="flex" align="middle" style="height:100%;">
|
|
|
+ <el-button>空闲</el-button>
|
|
|
+ </el-row>
|
|
|
+ </div>
|
|
|
+ </el-card>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="6">
|
|
|
+ <el-card class="box-card">
|
|
|
+ <div slot="header" class="clearfix">
|
|
|
+ <span>2号柜</span>
|
|
|
+ <el-button style="float: right; padding: 3px 0" type="text">开箱</el-button>
|
|
|
+ </div>
|
|
|
+ <el-row type="flex" justify="space-between">
|
|
|
+ <el-row type="flex" align="middle">
|
|
|
+ <el-button type="danger">使用中</el-button>
|
|
|
+ </el-row>
|
|
|
+ <div>
|
|
|
+ <h4>
|
|
|
+ 黄先生
|
|
|
+ <el-button style="margin-left:10px;" size="mini" type="primary">通知</el-button>
|
|
|
+ </h4>
|
|
|
+ <h4>130xxxxxxxx</h4>
|
|
|
+ <h4>8小时</h4>
|
|
|
+ </div>
|
|
|
+ </el-row>
|
|
|
+ </el-card>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="6">
|
|
|
+ <el-card class="box-card">
|
|
|
+ <div slot="header" class="clearfix">
|
|
|
+ <span>3号柜</span>
|
|
|
+ <el-button style="float: right; padding: 3px 0" type="text">开箱</el-button>
|
|
|
+ </div>
|
|
|
+ <el-row type="flex" justify="space-between">
|
|
|
+ <el-row type="flex" align="middle">
|
|
|
+ <el-button type="danger">使用中</el-button>
|
|
|
+ </el-row>
|
|
|
+ <div>
|
|
|
+ <h4>
|
|
|
+ 黄先生
|
|
|
+ <el-button style="margin-left:10px;" size="mini" type="primary">通知</el-button>
|
|
|
+ </h4>
|
|
|
+ <h4>130xxxxxxxx</h4>
|
|
|
+ <h4>8小时</h4>
|
|
|
+ </div>
|
|
|
+ </el-row>
|
|
|
+ </el-card>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="6">
|
|
|
+ <el-card class="box-card">
|
|
|
+ <div slot="header" class="clearfix">
|
|
|
+ <span>4号柜</span>
|
|
|
+ <el-button style="float: right; padding: 3px 0" type="text">开箱</el-button>
|
|
|
+ </div>
|
|
|
+ <el-row type="flex" justify="space-between">
|
|
|
+ <el-row type="flex" align="middle">
|
|
|
+ <el-button type="danger">使用中</el-button>
|
|
|
+ </el-row>
|
|
|
+ <div>
|
|
|
+ <h4>
|
|
|
+ 黄先生
|
|
|
+ <el-button style="margin-left:10px;" size="mini" type="primary">通知</el-button>
|
|
|
+ </h4>
|
|
|
+ <h4>130xxxxxxxx</h4>
|
|
|
+ <h4>8小时</h4>
|
|
|
+ </div>
|
|
|
+ </el-row>
|
|
|
+ </el-card>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="6">
|
|
|
+ <el-card class="box-card">
|
|
|
+ <div slot="header" class="clearfix">
|
|
|
+ <span>5号柜</span>
|
|
|
+ <el-button style="float: right; padding: 3px 0" type="text">开箱</el-button>
|
|
|
+ </div>
|
|
|
+ <el-row type="flex" justify="space-between">
|
|
|
+ <el-row type="flex" align="middle">
|
|
|
+ <el-button type="danger">使用中</el-button>
|
|
|
+ </el-row>
|
|
|
+ <div>
|
|
|
+ <h4>
|
|
|
+ 黄先生
|
|
|
+ <el-button style="margin-left:10px;" size="mini" type="primary">通知</el-button>
|
|
|
+ </h4>
|
|
|
+ <h4>130xxxxxxxx</h4>
|
|
|
+ <h4>8小时</h4>
|
|
|
+ </div>
|
|
|
+ </el-row>
|
|
|
+ </el-card>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="6">
|
|
|
+ <el-card class="box-card">
|
|
|
+ <div slot="header" class="clearfix">
|
|
|
+ <span>6号柜</span>
|
|
|
+ <el-button style="float: right; padding: 3px 0" type="text">开箱</el-button>
|
|
|
+ </div>
|
|
|
+ <el-row type="flex" justify="space-between">
|
|
|
+ <el-row type="flex" align="middle">
|
|
|
+ <el-button type="danger">使用中</el-button>
|
|
|
+ </el-row>
|
|
|
+ <div>
|
|
|
+ <h4>
|
|
|
+ 黄先生
|
|
|
+ <el-button style="margin-left:10px;" size="mini" type="primary">通知</el-button>
|
|
|
+ </h4>
|
|
|
+ <h4>130xxxxxxxx</h4>
|
|
|
+ <h4>8小时</h4>
|
|
|
+ </div>
|
|
|
+ </el-row>
|
|
|
+ </el-card>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="6">
|
|
|
+ <el-card class="box-card">
|
|
|
+ <div slot="header" class="clearfix">
|
|
|
+ <span>7号柜</span>
|
|
|
+ <el-button style="float: right; padding: 3px 0" type="text">开箱</el-button>
|
|
|
+ </div>
|
|
|
+ <el-row type="flex" justify="space-between">
|
|
|
+ <el-row type="flex" align="middle">
|
|
|
+ <el-button type="danger">使用中</el-button>
|
|
|
+ </el-row>
|
|
|
+ <div>
|
|
|
+ <h4>
|
|
|
+ 黄先生
|
|
|
+ <el-button style="margin-left:10px;" size="mini" type="primary">通知</el-button>
|
|
|
+ </h4>
|
|
|
+ <h4>130xxxxxxxx</h4>
|
|
|
+ <h4>8小时</h4>
|
|
|
+ </div>
|
|
|
+ </el-row>
|
|
|
+ </el-card>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="6">
|
|
|
+ <el-card class="box-card">
|
|
|
+ <div slot="header" class="clearfix">
|
|
|
+ <span>8号柜</span>
|
|
|
+ <el-button style="float: right; padding: 3px 0" type="text" disabled>开箱</el-button>
|
|
|
+ </div>
|
|
|
+ <div style="height:72px;">
|
|
|
+ <el-row type="flex" align="middle" style="height:100%;">
|
|
|
+ <el-button type="info">故障</el-button>
|
|
|
+ </el-row>
|
|
|
+ </div>
|
|
|
+ </el-card>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+
|
|
|
+ <el-row style="margin-top:10px;" type="flex" justify="end">
|
|
|
+ <el-pagination background layout="prev, pager, next" :total="30"></el-pagination>
|
|
|
+ </el-row>
|
|
|
+ </el-container>
|
|
|
+</template>
|
|
|
+<script>
|
|
|
+export default {
|
|
|
+ data() {
|
|
|
+ return {};
|
|
|
+ }
|
|
|
+};
|
|
|
+</script>
|
|
|
+<style scoped>
|
|
|
+.box-card {
|
|
|
+ color: #fff;
|
|
|
+ background: rgb(107,107,107);
|
|
|
+ margin-top: 10px;
|
|
|
+}
|
|
|
+.el-dropdown-link {
|
|
|
+ cursor: pointer;
|
|
|
+ color: #409eff;
|
|
|
+}
|
|
|
+.el-icon-arrow-down {
|
|
|
+ font-size: 12px;
|
|
|
+}
|
|
|
+</style>
|