|
|
@@ -16,177 +16,290 @@
|
|
|
</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-tabs
|
|
|
+ type="card"
|
|
|
+ v-model="tabActive"
|
|
|
+ style="margin-top:10px;"
|
|
|
+ :before-leave="onBeforeChangeTab"
|
|
|
+ >
|
|
|
+ <el-tab-pane label="1号柜" name="first">
|
|
|
+ <div>
|
|
|
+ <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-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 style="margin-top:10px;" type="flex" justify="end">
|
|
|
+ <el-pagination background layout="prev, pager, next" :total="30"></el-pagination>
|
|
|
</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>
|
|
|
+ </div>
|
|
|
+ </el-tab-pane>
|
|
|
+ <el-tab-pane label="2号柜" name="second">
|
|
|
+ <el-row>
|
|
|
+ <el-col :span="6">
|
|
|
+ <el-card class="box-card">
|
|
|
+ <div slot="header" class="clearfix">
|
|
|
+ <span>添加箱子</span>
|
|
|
+ </div>
|
|
|
+ <div style="height:72px;">
|
|
|
+ <el-row type="flex" align="middle" style="height:100%;">
|
|
|
+ <el-button type="primary">添加</el-button>
|
|
|
+ </el-row>
|
|
|
+ </div>
|
|
|
+ </el-card>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </el-tab-pane>
|
|
|
+ <el-tab-pane label="3号柜" name="third">
|
|
|
+ <el-row>
|
|
|
+ <el-col :span="6">
|
|
|
+ <el-card class="box-card">
|
|
|
+ <div slot="header" class="clearfix">
|
|
|
+ <span>添加箱子</span>
|
|
|
+ </div>
|
|
|
+ <div style="height:72px;">
|
|
|
+ <el-row type="flex" align="middle" style="height:100%;">
|
|
|
+ <el-button type="primary">添加</el-button>
|
|
|
+ </el-row>
|
|
|
+ </div>
|
|
|
+ </el-card>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </el-tab-pane>
|
|
|
+ <el-tab-pane name="add">
|
|
|
+ <span slot="label">
|
|
|
+ <i class="el-icon-plus">新增</i>
|
|
|
+ </span>
|
|
|
+ </el-tab-pane>
|
|
|
+ </el-tabs>
|
|
|
|
|
|
- <el-row style="margin-top:10px;" type="flex" justify="end">
|
|
|
- <el-pagination background layout="prev, pager, next" :total="30"></el-pagination>
|
|
|
- </el-row>
|
|
|
+ <el-dialog title="新增" :visible.sync="addVisible" width="50%" @closed="onCloseAddDialog">
|
|
|
+ <el-form
|
|
|
+ :model="ruleForm"
|
|
|
+ :rules="rules"
|
|
|
+ ref="ruleForm"
|
|
|
+ label-width="100px"
|
|
|
+ class="demo-ruleForm"
|
|
|
+ >
|
|
|
+ <el-form-item label="柜子名称" prop="name">
|
|
|
+ <el-input v-model="ruleForm.name"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="IP地址" prop="ip">
|
|
|
+ <el-input v-model="ruleForm.ip"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="端口" prop="port">
|
|
|
+ <el-input v-model="ruleForm.port"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="箱子个数" prop="box">
|
|
|
+ <el-input v-model="ruleForm.box"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ <span slot="footer" class="dialog-footer">
|
|
|
+ <el-button @click="onCloseAddDialog">取 消</el-button>
|
|
|
+ <el-button type="primary" @click="onAddSubmit('ruleForm')">立即添加</el-button>
|
|
|
+ </span>
|
|
|
+ </el-dialog>
|
|
|
</el-container>
|
|
|
</template>
|
|
|
<script>
|
|
|
export default {
|
|
|
data() {
|
|
|
- return {};
|
|
|
- }
|
|
|
+ return {
|
|
|
+ tabActive: "first",
|
|
|
+ addVisible: false,
|
|
|
+ ruleForm: {
|
|
|
+ name: "",
|
|
|
+ ip: "",
|
|
|
+ port: "",
|
|
|
+ box: "",
|
|
|
+ },
|
|
|
+ rules: {
|
|
|
+ name: [{ required: true, message: "请输入柜子名称", trigger: "blur" }],
|
|
|
+ ip: [{ required: true, message: "请输入IP地址", trigger: "blur" }],
|
|
|
+ port: [{ required: true, message: "请输入端口名称", trigger: "blur" }],
|
|
|
+ box: [{ required: true, message: "请输入箱子个数", trigger: "blur" }],
|
|
|
+ },
|
|
|
+ };
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ onCloseAddDialog() {
|
|
|
+ this.ruleForm = {};
|
|
|
+ this.addVisible = false;
|
|
|
+ this.$refs.ruleForm.resetFields();
|
|
|
+ },
|
|
|
+ onBeforeChangeTab(activeName) {
|
|
|
+ if (activeName == "add") {
|
|
|
+ this.addVisible = true;
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onAddSubmit(formName) {
|
|
|
+ this.$refs[formName].validate((valid) => {
|
|
|
+ if (valid) {
|
|
|
+ alert("submit!");
|
|
|
+ } else {
|
|
|
+ console.log("error submit!!");
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ },
|
|
|
};
|
|
|
</script>
|
|
|
<style scoped>
|
|
|
.box-card {
|
|
|
color: #fff;
|
|
|
- background: rgb(107,107,107);
|
|
|
+ background: rgb(107, 107, 107);
|
|
|
margin-top: 10px;
|
|
|
}
|
|
|
.el-dropdown-link {
|
