完成手机柜三个页面的铺建

src/views/phone/cabinet/index.vue

@@ -88,39 +88,175 @@
         <el-button @click="cancel">取 消</el-button>
       </div>
     </el-dialog> -->
-    <div class="box">
-      <ul class="oneUl">
+    <div class="box" v-if="phone">
+      <ul class="oneUl" v-for="(item, i) in cabinetList" :key="i" :span="2">
         <li>
-          <div class="title">参谋部</div>
-          <table class="table">
+          <div class="title">{{ item.unitName }}</div>
+          <table class="table" @click="opens">
             <tr>
-              <td style="text-align: right; width: 86px">柜子编号</td>
-              <td style="text-align: right; width: 145px">AE302046</td>
+              <td style="text-align: left; width: 86px">柜子编号</td>
+              <td style="text-align: right; width: 145px">{{ item.number }}</td>
             </tr>
             <tr>
-              <td>柜子位置</td>
-              <td>值班室门口</td>
+              <td style="text-align: left; width: 86px">柜子位置</td>
+              <td style="text-align: right; width: 145px">
+                {{ item.address }}
+              </td>
             </tr>
             <tr>
-              <td>格子数量</td>
-              <td>18 格</td>
+              <td style="text-align: left; width: 86px">格子数量</td>
+              <td style="text-align: right; width: 145px">
+                {{ item.gridNumber }}
+              </td>
             </tr>
             <tr>
-              <td>已存放</td>
-              <td>14 格</td>
+              <td style="text-align: left; width: 86px">已存放</td>
+              <td style="text-align: right; width: 145px">
+                {{ item.storageQuantity }}
+              </td>
             </tr>
             <tr>
-              <td>异常格子</td>
-              <td>0 格</td>
+              <td style="text-align: left; width: 86px">异常格子</td>
+              <td style="text-align: right; width: 145px">
+                {{ item.exceptionsNumber }}
+              </td>
             </tr>
           </table>
         </li>
-        <li></li>
-        <li></li>
-        <li></li>
-        <li></li>
       </ul>
     </div>
+    <div class="box1" v-if="phone2">
+      <el-row :gutter="10" class="mb9">
+        <el-col :span="1.5" class="isSubmit">
+          <i
+            class="el-icon-arrow-left"
+            style="color: #fff; cursor: pointer"
+            @click="dianJi"
+            >返回</i
+          >
+        </el-col>
+      </el-row>
+      <hr
+        style="
+          width: 102%;
+          margin-left: -15px;
+          border: 1px solid #718a9d;
+          margin-bottom: 14px;
+        "
+      />
+      <el-form
+        :model="queryParams"
+        ref="queryForm"
+        :inline="true"
+        v-show="showSearch"
+        label-width="68px"
+      >
+        <el-form-item prop="gridNumber">
+          <el-input
+            v-model="queryParams.gridNumber"
+            placeholder="请输入格子编号"
+            clearable
+            size="small"
+            @input="handleQuery"
+          />
+        </el-form-item>
+        <el-form-item>
+          <el-button size="btr" @click="resetQuery">重置</el-button>
+        </el-form-item>
+        <div class="shuJu">
+          <span class="box44 public"> 已存放</span>
+          <span class="box5 public"> 异常</span>
+          <span class="box6"> 待存放</span>
+        </div>
+      </el-form>
+      <ul class="twoUl" v-for="(item, i) in cabinetList" :key="i">
+        <li>
+          <div class="two_div"><span>A1</span></div>
+          <el-button size="mini" @click.native="buttOn(item)">李大钊</el-button>
+        </li>
+      </ul>
+    </div>
+    <!-- 格子记录弹出层 -->
+    <el-dialog :title="title" :visible.sync="open" width="827px" append-to-body>
+      <div class="box2">
+        <el-form
+          ref="form"
+          :model="form"
+          :rules="rules"
+          label-width="80px"
+          inline
+        >
+          <div class="jiben">基本信息</div>
+          <el-form-item label="柜子ID:" prop="number">
+            <span>A318</span>
+          </el-form-item>
+          <el-form-item label="存物状态:" prop="address">
+            <span>已存</span>
+          </el-form-item>
+          <el-form-item label="存取次数:" prop="gridNumber">
+            <span>333</span>
+          </el-form-item>
+          <el-form-item label="正常运行" prop="storageQuantity">
+            <span>362</span>
+          </el-form-item>
+          <div
+            style="
+              border: 1px dashed #606266;
+              margin-top: -14px;
+              margin-bottom: 14px;
+            "
+          ></div>
+          <el-form-item label="柜子ID:" prop="number">
+            <span>A318</span>
+          </el-form-item>
+          <el-form-item label="存物状态:" prop="address">
+            <span>已存</span>
+          </el-form-item>
+          <el-form-item label="存取次数:" prop="gridNumber">
+            <span>333</span>
+          </el-form-item>
+          <el-form-item label="正常运行" prop="storageQuantity">
+            <span>362</span>
+          </el-form-item>
+          <div class="jiben">存取记录</div>
+          <el-table
+            :data="tableData"
+            style="width: 100%"
+            :header-cell-style="{ background: '#003C69', color: 'white' }"
+          >
+            <el-table-column label="序号" width="50px">
+              <template scope="scope">
+                <span>{{
+                  (queryParams.pageNum - 1) * queryParams.pageSize +
+                  scope.$index +
+                  1
+                }}</span>
+              </template>
+            </el-table-column>
+            <el-table-column prop="date" label="日期"> </el-table-column>
+            <el-table-column prop="date" label="存取次数"> </el-table-column>
+            <el-table-column prop="name" label="更新时间"> </el-table-column>
+            <el-table-column prop="address" label="存物状态"> </el-table-column>
+          </el-table>
+          <!-- <el-form-item label="异常数量" prop="exceptionsNumber">
+          <el-input
+            v-model="form.exceptionsNumber"
+            placeholder="请输入异常数量"
+          />
+        </el-form-item>
+        <el-form-item label="所属单位id" prop="unitId">
+          <el-input v-model="form.unitId" placeholder="请输入所属单位id" />
+        </el-form-item>
+        <el-form-item label="所属单位名称" prop="unitName">
+          <el-input v-model="form.unitName" placeholder="请输入所属单位名称" />
+        </el-form-item> -->
+        </el-form>
+      </div>
+      <!-- <div slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="submitForm">确 定</el-button>
+        <el-button @click="cancel">取 消</el-button>
+      </div> -->
+    </el-dialog>
   </div>
 </template>
 
@@ -174,16 +310,60 @@ export default {
       form: {},
       // 表单校验
       rules: {},
+      // 手机柜第一个显示与隐藏
+      phone: true,
+      // 第二个显示与隐藏
+      phone2: false,
+      tableData: [
+        {
+          date: "2016-05-02",
+          name: "王小虎",
+          address: "上海市普陀区金沙江路 1518 弄",
+        },
+        {
+          date: "2016-05-04",
+          name: "王小虎",
+          address: "上海市普陀区金沙江路 1517 弄",
+        },
+        {
+          date: "2016-05-01",
+          name: "王小虎",
+          address: "上海市普陀区金沙江路 1519 弄",
+        },
+        {
+          date: "2016-05-03",
+          name: "王小虎",
+          address: "上海市普陀区金沙江路 1516 弄",
+        },
+      ],
     };
   },
   created() {
     this.getList();
   },
   methods: {
+    // 点击名字触发
+    buttOn(row) {
+      console.log(row);
+      this.open = true;
+      this.title = "柜子记录";
+    },
+    // 点击返回触发
+    dianJi() {
+      this.phone2 = false;
+      this.phone = true;
+      this.queryParams.gridNumber = null;
+    },
+    // 点击手机柜触发
+    opens() {
+      this.phone = false;
+      this.phone2 = true;
+    },
     /** 查询手机柜列表 */
     getList() {
       this.loading = true;
-      listCabinet(this.queryParams).then((response) => {
+      listCabinet().then((response) => {
+        console.log(response);
         this.cabinetList = response.rows;
         this.total = response.total;
         this.loading = false;
@@ -297,7 +477,9 @@ ul {
   list-style-type: none;
 }
 .oneUl {
-  display: flex;
+  display: inline-block;
+  padding-left: 10px;
+  /* padding-left: calc((1793px - 1530px) / 5); */
 }
 .oneUl li {
   background: url("../../../assets/images/柜子2.png") no-repeat;
@@ -306,11 +488,123 @@ ul {
   padding: 22px;
 }
 .title {
-  text-align: center;
   color: #fff;
+  height: 16px;
+  display: inline-table;
+  margin-left: 100px;
 }
 .table {
   margin-top: 18px;
   line-height: 32px;
+  padding-left: 12px;
+  color: #fff;
+  cursor: pointer;
+}
+.mb9 {
+  margin-bottom: 20px;
+  margin-top: 10px;
+}
+::v-deep .el-input__inner {
+  color: #fff;
+  width: 200px;
+  height: 36px;
+}
+.twoUl li {
+  background: url("../../../assets/images/抽屉-绿色1.png") no-repeat;
+  width: 173px;
+  height: 114px;
+  padding: 22px;
+}
+.twoUl li {
+  background: url("../../../assets/images/抽屉-红色1.png") no-repeat;
+  width: 173px;
+  height: 114px;
+  padding: 22px;
+}
+.twoUl li {
+  background: url("../../../assets/images/抽屉-黄色1.png") no-repeat;
+  width: 173px;
+  height: 114px;
+  padding: 22px;
+}
+.twoUl {
+  display: inline-block;
+  padding-left: 10px;
+  margin-left: 12px;
+}
+.two_div {
+  text-align: center;
+  margin-top: 10px;
+  padding-top: 10px;
+  color: #fff;
+}
+::v-deep .el-button--mini {
+  margin-left: 30px !important;
+  margin-top: 6px !important;
+  background: #1263aa;
+  border-color: #1263aa;
+  color: #ffffff;
+}
+.shuJu {
+  height: 16px;
+  margin-top: 13px;
+  margin-right: 90px;
+  float: right;
+  color: #fff;
+  font-size: 14px;
+}
+
+.box44::before {
+  display: inline-block;
+  content: "";
+  width: 8px;
+  height: 8px;
+  /* border-radius: 50%; */
+  background-color: #67c23a;
+  margin-left: 26px;
+}
+.box5::before {
+  display: inline-block;
+  content: "";
+  width: 8px;
+  height: 8px;
+  /* border-radius: 50%; */
+  background-color: #ff4949;
+  margin-left: 26px;
+}
+.box6::before {
+  display: inline-block;
+  content: "";
+  width: 8px;
+  height: 8px;
+  /* border-radius: 50%; */
+  background-color: #ffba00;
+  margin-left: 26px;
+}
+/* 卡片样式 */
+/* .app-container {
+  height: calc(100vh - 108px) !important;
+} */
+::v-deep .el-dialog {
+  background-color: #004d86;
+  margin: auto;
+}
+::v-deep .el-dialog__header {
+  border-bottom: 1px solid #718a9d;
+  margin: auto;
+}
+::v-deep .el-dialog__title {
+  color: #fff;
+  font: 18px;
+}
+.box2 form .el-form-item {
+  color: #fff;
+  margin-left: -21px;
+  margin-right: 110px;
+}
+
+/*  鼠标经过颜色 */
+::v-deep .el-table__body tr:hover > td {
+  background-color: transparent !important;
 }
 </style>