完成手机柜线上渲染接口

src/api/phone/cabinet.js

@@ -1,4 +1,5 @@
 import request from '@/utils/request'
+import requests from '@/utils/requests'
 
 // 查询手机柜列表
 export function listCabinet(query) {
@@ -66,4 +67,30 @@ export function listGrid(query) {
     method: 'get',
     params: query
   })
+}
+
+// 线上查询手机柜列表
+export function xianPhone(query) {
+  return requests({
+    url: '/wl/api/v1/cabinets',
+    method: 'get',
+    params: query
+  })
+}
+// 线上获取指定手机柜的全部格子
+export function xianPhoneGeZi(query) {
+  console.log(query);
+  return requests({
+    url: '/wl/api/v1/grids',
+    method: 'get',
+    params: { cabinetNum: query }
+  })
+}
+// 线上开关门记录
+export function xianPhoneOppe(query) {
+  return requests({
+    url: '/wl/api/v1/log/grid',
+    method: 'get',
+    params: query
+  })
 }

src/utils/requests.js

@@ -0,0 +1,53 @@
+import axios from 'axios'
+import { Notification, MessageBox, Message } from 'element-ui'
+import store from '@/store'
+import { getToken } from '@/utils/auth'
+import errorCode from '@/utils/errorCode'
+import Cookies from "js-cookie";
+
+axios.defaults.headers['Content-Type'] = 'application/json;charset=utf-8'
+// 配置公共的根路径
+const service = axios.create({
+  baseURL: 'http://114.115.153.156:12090',
+  // 超时
+  timeout: 10000
+})
+// 请求拦截器
+service.interceptors.request.use(config => {
+  // 是否需要设置 token
+  const isToken = (config.headers || {}).isToken === false
+  if (getToken() && !isToken) {
+    config.headers['Authorization'] = 'Bearer ' + Cookies.get("accessToken") // 让每个请求携带自定义token 请根据实际情况自行修改
+  }
+  // get请求映射params参数
+  if (config.method === 'get' && config.params) {
+    let url = config.url + '?';
+    for (const propName of Object.keys(config.params)) {
+      const value = config.params[propName];
+      var part = encodeURIComponent(propName) + "=";
+      if (value !== null && typeof (value) !== "undefined") {
+        if (typeof value === 'object') {
+          for (const key of Object.keys(value)) {
+            if (value[key] !== null && typeof (value[key]) !== 'undefined') {
+              let params = propName + '[' + key + ']';
+              let subPart = encodeURIComponent(params) + '=';
+              url += subPart + encodeURIComponent(value[key]) + '&';
+            }
+          }
+        } else {
+          url += part + encodeURIComponent(value) + "&";
+        }
+      }
+    }
+    url = url.slice(0, -1);
+    config.params = {};
+    config.url = url;
+  }
+  return config
+}, error => {
+  console.log(error)
+  Promise.reject(error)
+})
+
+
+export default service

src/views/grassrootsregistration/bdglmeeting/index.vue

@@ -506,9 +506,11 @@ export default {
     },
     // 转义视图不加标签
     onEditor(str) {
-      var str = str.replace(/<\/?[^>]*>/g, "");
-      str = str.replace(/[ | ]*\n/g, "\n");
-      str = str.replace(/ /gi, "");
+      if (str != null) {
+        var str = str.replace(/<\/?[^>]*>/g, "");
+        str = str.replace(/[ | ]*\n/g, "\n");
+        str = str.replace(/ /gi, "");
+      }
       return str;
     },
     // 获取搜索下拉部门
@@ -660,10 +662,10 @@ export default {
         if (this.result.joinId !== "") {
           this.result.joinId = response.data.joinId.split(",");
         }
-        if (this.result.peopleIds !== "") {
+        if (this.result.peopleIds !== "" && this.result.peopleIds != null) {
           this.result.peopleIds = response.data.peopleIds.split(",");
         }
-        if (this.result.absentIds !== "") {
+        if (this.result.absentIds !== "" && this.result.absentIds != null) {
           this.result.absentIds = response.data.absentIds.split(",");
         }
         this.form = this.result;
@@ -695,11 +697,23 @@ export default {
             if (this.form.joinId !== undefined) {
               this.form.joinId = this.form.joinId.join(",");
             }
-            if (this.form.peopleIds !== undefined) {
+            if (
+              this.form.peopleIds !== undefined &&
+              this.form.peopleIds != null &&
+              this.form.peopleIds != ""
+            ) {
               this.form.peopleIds = this.form.peopleIds.join(",");
+            } else {
+              this.form.peopleIds = "";
             }
-            if (this.form.absentIds !== undefined) {
+            if (
+              this.form.absentIds !== undefined &&
+              this.form.absentIds != null &&
+              this.form.absentIds != ""
+            ) {
               this.form.absentIds = this.form.absentIds.join(",");
+            } else {
+              this.form.absentIds = "";
             }
             updateBdglmeeting(this.form).then((response) => {
               this.$modal.msgSuccess("修改成功");
@@ -707,9 +721,25 @@ export default {
               this.getList();
             });
           } else {
+            if (
+              this.form.peopleIds != null &&
+              this.form.peopleIds.length != 0 &&
+              this.form.peopleIds != ""
+            ) {
+              this.form.peopleIds = this.form.peopleIds.join(",");
+            } else {
+              this.form.peopleIds = "";
+            }
+            if (
+              this.form.absentIds != null &&
+              this.form.absentIds != "" &&
+              this.form.absentIds.length != 0
+            ) {
+              this.form.absentIds = this.form.absentIds.join(",");
+            } else {
+              this.form.absentIds = "";
+            }
             (this.form.joinId = this.form.joinId.join(",")),
-              (this.form.peopleIds = this.form.peopleIds.join(",")),
-              (this.form.absentIds = this.form.absentIds.join(",")),
               addBdglmeeting(this.form).then((response) => {
                 this.$modal.msgSuccess("新增成功");
                 this.open = false;

src/views/grassrootsregistration/bdglparty/index.vue

@@ -490,9 +490,11 @@ export default {
     },
     // 转义视图不加标签
     onEditor(str) {
-      var str = str.replace(/<\/?[^>]*>/g, "");
-      str = str.replace(/[ | ]*\n/g, "\n");
-      str = str.replace(/ /gi, "");
+      if (str != null) {
+        var str = str.replace(/<\/?[^>]*>/g, "");
+        str = str.replace(/[ | ]*\n/g, "\n");
+        str = str.replace(/ /gi, "");
+      }
       return str;
     },
     // 重置表单人员
@@ -620,10 +622,10 @@ export default {
         if (this.result.joinId !== "") {
           this.result.joinId = response.data.joinId.split(",");
         }
-        if (this.result.peopleIds !== "") {
+        if (this.result.peopleIds !== "" && this.result.peopleIds != null) {
           this.result.peopleIds = response.data.peopleIds.split(",");
         }
-        if (this.result.absentIds !== "") {
+        if (this.result.absentIds !== "" && this.result.absentIds != null) {
           this.result.absentIds = response.data.absentIds.split(",");
         }
         this.form = this.result;
@@ -653,11 +655,23 @@ export default {
             if (this.form.joinId !== undefined) {
               this.form.joinId = this.form.joinId.join(",");
             }
-            if (this.form.peopleIds !== undefined) {
+            if (
+              this.form.peopleIds !== undefined &&
+              this.form.peopleIds != null &&
+              this.form.peopleIds != ""
+            ) {
               this.form.peopleIds = this.form.peopleIds.join(",");
+            } else {
+              this.form.peopleIds = "";
             }
-            if (this.form.absentIds !== undefined) {
+            if (
+              this.form.absentIds !== undefined &&
+              this.form.absentIds != null &&
+              this.form.absentIds != ""
+            ) {
               this.form.absentIds = this.form.absentIds.join(",");
+            } else {
+              this.form.absentIds = "";
             }
             updateBdglparty(this.form).then((response) => {
               this.$modal.msgSuccess("修改成功");
@@ -665,9 +679,25 @@ export default {
               this.getList();
             });
           } else {
+            if (
+              this.form.peopleIds != null &&
+              this.form.peopleIds.length != 0 &&
+              this.form.peopleIds != ""
+            ) {
+              this.form.peopleIds = this.form.peopleIds.join(",");
+            } else {
+              this.form.peopleIds = "";
+            }
+            if (
+              this.form.absentIds != null &&
+              this.form.absentIds != "" &&
+              this.form.absentIds.length != 0
+            ) {
+              this.form.absentIds = this.form.absentIds.join(",");
+            } else {
+              this.form.absentIds = "";
+            }
             (this.form.joinId = this.form.joinId.join(",")),
-              (this.form.peopleIds = this.form.peopleIds.join(",")),
-              (this.form.absentIds = this.form.absentIds.join(",")),
               addBdglparty(this.form).then((response) => {
                 this.$modal.msgSuccess("新增成功");
                 this.open = false;

src/views/grassrootsregistration/bdglsoldier/index.vue

@@ -470,19 +470,13 @@ export default {
         this.renYuans = res.rows;
       });
     },
-    // 搜索单位触发
-    company() {
-      this.getList();
-      // 联动人员
-      getZhuChiRen(this.queryParams.unitId).then((res) => {
-        this.renYuans = res.data;
-      });
-    },
     // 转义视图不加标签
     onEditor(str) {
-      var str = str.replace(/<\/?[^>]*>/g, "");
-      str = str.replace(/[ | ]*\n/g, "\n");
-      str = str.replace(/ /gi, "");
+      if (str != null) {
+        var str = str.replace(/<\/?[^>]*>/g, "");
+        str = str.replace(/[ | ]*\n/g, "\n");
+        str = str.replace(/ /gi, "");
+      }
       return str;
     },
     // 搜索主持人选中触发
@@ -603,8 +597,10 @@ export default {
     },
     /** 新增按钮操作 */
     handleAdd() {
+      console.log(1);
       // 人员列表
-      (this.renYuan = []), this.reset();
+      this.reset();
+      this.renYuan = [];
       this.getTreeselect();
       this.open = true;
       this.title = "添加军人委员会会议登记本";
@@ -621,10 +617,10 @@ export default {
         if (this.result.joinId !== "") {
           this.result.joinId = response.data.joinId.split(",");
         }
-        if (this.result.peopleIds !== "") {
+        if (this.result.peopleIds !== "" && this.result.peopleIds != null) {
           this.result.peopleIds = response.data.peopleIds.split(",");
         }
-        if (this.result.absentIds !== "") {
+        if (this.result.absentIds !== "" && this.result.absentIds != null) {
           this.result.absentIds = response.data.absentIds.split(",");
         }
         this.form = this.result;
@@ -652,11 +648,23 @@ export default {
             if (this.form.joinId !== undefined) {
               this.form.joinId = this.form.joinId.join(",");
             }
-            if (this.form.peopleIds !== undefined) {
+            if (
+              this.form.peopleIds !== undefined &&
+              this.form.peopleIds != null &&
+              this.form.peopleIds != ""
+            ) {
               this.form.peopleIds = this.form.peopleIds.join(",");
+            } else {
+              this.form.peopleIds = "";
             }
-            if (this.form.absentIds !== undefined) {
+            if (
+              this.form.absentIds !== undefined &&
+              this.form.absentIds != null &&
+              this.form.absentIds != ""
+            ) {
               this.form.absentIds = this.form.absentIds.join(",");
+            } else {
+              this.form.absentIds = "";
             }
             updateBdglsoldier(this.form).then((response) => {
               this.$modal.msgSuccess("修改成功");
@@ -664,14 +672,30 @@ export default {
               this.getList();
             });
           } else {
-            (this.form.joinId = this.form.joinId.join(",")),
-              (this.form.peopleIds = this.form.peopleIds.join(",")),
-              (this.form.absentIds = this.form.absentIds.join(",")),
-              addBdglsoldier(this.form).then((response) => {
-                this.$modal.msgSuccess("新增成功");
-                this.open = false;
-                this.getList();
-              });
+            if (
+              this.form.peopleIds != null &&
+              this.form.peopleIds.length != 0 &&
+              this.form.peopleIds != ""
+            ) {
+              this.form.peopleIds = this.form.peopleIds.join(",");
+            } else {
+              this.form.peopleIds = "";
+            }
+            if (
+              this.form.absentIds != null &&
+              this.form.absentIds != "" &&
+              this.form.absentIds.length != 0
+            ) {
+              this.form.absentIds = this.form.absentIds.join(",");
+            } else {
+              this.form.absentIds = "";
+            }
+            this.form.joinId = this.form.joinId.join(",");
+            addBdglsoldier(this.form).then((response) => {
+              this.$modal.msgSuccess("新增成功");
+              this.open = false;
+              this.getList();
+            });
           }
         }
       });

src/views/militaryvehicleManagement/privateCar/index.vue

@@ -40,9 +40,7 @@
           @click="handleQuery"
           >搜索</el-button
         > -->
-        <el-button  size="btr" @click="resetQuery"
-          >重置</el-button
-        >
+        <el-button size="btr" @click="resetQuery">重置</el-button>
       </el-form-item>
     </el-form>
 
@@ -84,7 +82,7 @@
       </el-col>
       <el-col :span="1.5">
         <el-button
-        class="box"
+          class="box"
           type="warning"
           plain
           icon="el-icon-download"
@@ -179,7 +177,13 @@
     />
 
     <!-- 添加或修改私家车管理对话框 -->
-    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body :close-on-click-modal="false">
+    <el-dialog
+      :title="title"
+      :visible.sync="open"
+      width="500px"
+      append-to-body
+      :close-on-click-modal="false"
+    >
       <el-form
         ref="form"
         :model="form"
@@ -562,7 +566,7 @@ export default {
   height: 36px; */
   background: transparent;
   color: #fff;
-   border: 1px solid white !important;
+  border: 1px solid white !important;
 }
 /* 单位框背景颜色 */
 ::v-deep .vue-treeselect__control {
@@ -685,7 +689,7 @@ export default {
 ::v-deep ::-webkit-input-placeholder {
   color: #bdbdbd4f !important;
 }
-.box{
+.box {
   background-color: #ffba00 !important;
 }
 </style>

src/views/phone/cabinet/index.vue

@@ -3,34 +3,52 @@
     <div class="box" v-if="phone">
       <ul>
         <li class="oneUl" v-for="(item, i) in cabinetList" :key="i">
-          <div class="title">{{ item.unitName }}</div>
-          <table class="table" @click="opens(item.id)">
+          <div class="title">{{ item.name }}</div>
+          <table class="table" @click="opens(item.number)">
             <tr>
               <td style="text-align: left; width: 86px">柜子编号</td>
               <td style="text-align: right; width: 145px">{{ item.number }}</td>
             </tr>
             <tr>
-              <td style="text-align: left; width: 86px">柜子位置</td>
+              <td style="text-align: left; width: 86px">柜子IP</td>
               <td style="text-align: right; width: 145px">
-                {{ item.address }}
+                {{ item.ip }}
               </td>
             </tr>
             <tr>
               <td style="text-align: left; width: 86px">格子数量</td>
               <td style="text-align: right; width: 145px; color: #00f6ff">
-                {{ item.gridNumber }}
+                {{ item.gridCount }}
               </td>
             </tr>
             <tr>
-              <td style="text-align: left; width: 86px">已存放</td>
-              <td style="text-align: right; width: 145px; color: #13ce66">
-                {{ item.storageQuantity }}
+              <td style="text-align: left; width: 86px">连接信息</td>
+              <td
+                style="text-align: right; width: 145px; color: #13ce66"
+                v-if="item.connected != '断开连接'"
+              >
+                {{ item.connected }}
+              </td>
+              <td
+                style="text-align: right; width: 145px; color: #ff4949"
+                v-else
+              >
+                {{ item.connected }}
               </td>
             </tr>
             <tr>
-              <td style="text-align: left; width: 86px">异常格子</td>
-              <td style="text-align: right; width: 145px; color: #ff4949">
-                {{ item.exceptionsNumber }}
+              <td style="text-align: left; width: 86px">开门状态</td>
+              <td
+                style="text-align: right; width: 145px; color: #13ce66"
+                v-if="item.connected != '允许开启'"
+              >
+                {{ item.allowOpen }}
+              </td>
+              <td
+                style="text-align: right; width: 145px; color: #ff4949"
+                v-else
+              >
+                {{ item.allowOpen }}
               </td>
             </tr>
           </table>
@@ -52,9 +70,9 @@
               width: 87px;
               height: 36px;
               text-align: center;
-              border: 1px solid #d2d6de;
               border-radius: 4px;
               margin-left: 31px;
+              background-color: #196299;
             "
           >
             <i
@@ -65,22 +83,23 @@
             >
           </div>
         </el-form-item>
-        <el-form-item prop="gridNumber">
+        <!-- <el-form-item prop="gridNumber">
           <el-input
-            v-model="queryParams.gridNumber"
+            v-model="queryParams.cabinetNum"
             placeholder="请输入格子编号"
             clearable
             size="small"
-            @input="handleQuery"
+            @input="opens"
           />
         </el-form-item>
         <el-form-item>
           <el-button size="btp" @click="resetQuery">重置</el-button>
-        </el-form-item>
+        </el-form-item> -->
         <div class="shuJu">
-          <span class="box44 public"> 已存放 :{{ statistics.cunfang }}个</span>
-          <span class="box5 public"> 异常 :{{ statistics.yichang }}个</span>
-          <span class="box6"> 待存放 :{{ statistics.weicunfang }}个</span>
+          <span class="box4 public"> 已存放 :{{ green }}个</span>
+          <span class="box5 public"> 未放入 :{{ red }}个</span>
+          <span class="box6"> 已请假 :{{ yellow }}个</span>
+          <span class="box7"> 未绑定 :{{ grey }}个</span>
         </div>
       </el-form>
       <ul class="twoUl">
@@ -88,17 +107,20 @@
           v-for="(item, i) in gridList"
           :key="i"
           :class="{
-            greed: item.latticeState == '0',
-            red: item.latticeState == '1',
-            yellow: item.latticeState == '2',
+            greed: item.gridState == '手机已存放',
+            red: item.gridState == '手机未放入',
+            yellow: item.gridState == '人员请假',
+            grey: item.gridState == '未绑定人员',
           }"
         >
           <div class="two_div">
-            <span>{{ item.gridNumber }}</span>
+            <span>{{ item.deviceId }}</span>
           </div>
-          <el-button size="mini" @click.native="buttOn(item)">{{
-            item.name
-          }}</el-button>
+          <el-button
+            size="mini"
+            @click.native="buttOn(item.staffInfoWithId, item)"
+            >{{ item.staffInfoWithId.Name }}</el-button
+          >
         </li>
       </ul>
     </div>
@@ -111,93 +133,85 @@
       append-to-body
       :close-on-click-modal="false"
     >
-      <div class="box2">
-        <el-form
-          ref="form"
-          :model="form"
-          :rules="rules"
-          inline
-          label-position="right"
-        >
-          <div class="jiben">基本信息</div>
-          <el-form-item label="柜子ID :" prop="number"> A318 </el-form-item>
-          <el-form-item
-            label="存物状态 :"
-            prop="address"
-            style="margin-left: 84px"
-          >
-            已存
-          </el-form-item>
-          <el-form-item
-            label="存取次数 :"
-            prop="gridNumber"
-            style="margin-left: 84px"
-          >
-            333
-          </el-form-item>
-          <el-form-item
-            label="正常运行 :"
-            prop="storageQuantity"
-            style="margin-left: 84px"
-          >
-            362
-          </el-form-item>
-          <div style="margin-top: -30px; margin-bottom: 7px">
-            <img src="../../../assets/images/虚线1.png" alt="" />
-          </div>
-          <el-form-item label="绑定人员 :" prop="number">
-            <span>张三</span>
-          </el-form-item>
-          <el-form-item
-            label="性ㅤㅤ别 :"
-            prop="address"
-            style="margin-left: 76px"
+      <div class="userAgree">
+        <div class="box2">
+          <el-form
+            ref="form"
+            :model="form"
+            :rules="rules"
+            inline
+            label-position="right"
           >
-            <!-- <el-form-item label=" :" prop="address" style="margin-left: 84px"> -->
-            <span>男</span>
-          </el-form-item>
-          <el-form-item
-            label="请假状态 :"
-            prop="storageQuantity"
-            style="margin-left: 98px"
-          >
-            <span>在位</span>
-          </el-form-item>
-          <el-form-item
-            label="所在单位 :"
-            prop="gridNumber"
-            style="margin-left: 50px"
-          >
-            <span>发射一营一连</span>
-          </el-form-item>
-          <div class="jiben">存取记录</div>
-          <el-table
-            :data="tableData"
-            style="width: 100%"
-            :header-cell-style="{ background: '#004274', 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>
+            <div class="jiben">基本信息</div>
+            <el-form-item label="柜子编号 :" prop="number">
+              <div style="width: 100px">{{ cabinetNumber }}</div>
+            </el-form-item>
+            <el-form-item label="格子编号 :" prop="storageQuantity">
+              <div style="width: 100px">{{ deviceId }}</div>
+            </el-form-item>
+            <el-form-item label="存物状态 :" prop="address">
+              <div style="width: 100px">{{ stoneState }}</div>
+            </el-form-item>
+            <el-form-item label="发生时间 :" prop="gridNumber">
+              <div style="width: 120px">{{ happenTime }}</div>
+            </el-form-item>
+
+            <div style="margin-top: -30px; margin-bottom: 7px">
+              <img src="../../../assets/images/虚线1.png" alt="" />
+            </div>
+            <el-form-item label="绑定人员 :" prop="number">
+              <div style="width: 100px">{{ jiBen.Name }}</div>
+            </el-form-item>
+            <el-form-item label="性ㅤㅤ别 :" prop="address">
+              <div style="width: 100px" v-if="jiBen.Sex == '1'">男</div>
+              <div style="width: 100px" v-if="jiBen.Sex == '2'">女</div>
+              <div style="width: 100px" v-else></div>
+            </el-form-item>
+            <el-form-item label="请假状态 :" prop="storageQuantity">
+              <div style="width: 100px" v-if="jiBen.VacationState == '1'">
+                请假
+              </div>
+              <div style="width: 100px" v-if="jiBen.VacationState == '2'">
+                正常
+              </div>
+              <div style="width: 100px" v-else></div>
+            </el-form-item>
+            <el-form-item label="所在单位 :" prop="gridNumber">
+              <div style="width: 120px">{{ departmentName }}</div>
+            </el-form-item>
+            <div class="jiben">存取记录</div>
+            <el-table
+              v-loading="loading"
+              :data="tableData"
+              style="width: 100%; padding-right: 40px"
+              :header-cell-style="{ background: '#004274', color: 'white' }"
+            >
+              <el-table-column label="序号" width="50px">
+                <template scope="scope">
+                  <span>{{
+                    (queryParams.pageNo - 1) * queryParams.pageSize +
+                    scope.$index +
+                    1
+                  }}</span>
+                </template>
+              </el-table-column>
+              <el-table-column prop="cabinetNumber" label="编号">
+              </el-table-column>
+              <el-table-column prop="staffName" label="姓名"> </el-table-column>
+              <el-table-column prop="happenTime" label="发生时间" width="140px">
+              </el-table-column>
+              <el-table-column prop="warnState" label="存物状态">
+              </el-table-column>
+            </el-table>
+          </el-form>
+        </div>
       </div>
       <pagination
         v-show="total > 0"
         :total="total"
-        :page.sync="queryParams.pageNum"
+        :page.sync="queryParams.pageNo"
         :limit.sync="queryParams.pageSize"
-        @pagination="getList"
+        @pagination="offMeng"
       />
       <!-- <div slot="footer" class="dialog-footer"></div> -->
     </el-dialog>
@@ -206,16 +220,19 @@
 
 <script>
 import {
-  listCabinet, //一进来请求的数据
   getCabinet,
   delCabinet,
   addCabinet,
   updateCabinet,
   exportCabinet,
-  listGrid,
-  shouJiGrid,
+  xianPhone,
+  xianPhoneGeZi,
+  xianPhoneOppe,
 } from "@/api/phone/cabinet";
 
+import axios from "axios";
+import Cookies from "js-cookie";
+
 export default {
   name: "Cabinet",
   data() {
@@ -244,8 +261,8 @@ export default {
       open: false,
       // 查询参数
       queryParams: {
-        pageNum: 1,
-        pageSize: 4,
+        pageNo: 1,
+        pageSize: 10,
         number: null,
         address: null,
         gridNumber: null,
@@ -262,45 +279,74 @@ export default {
       phone: true,
       // 第二个显示与隐藏
       phone2: false,
-      tableData: [
-        {
-          date: "2016-05-02",
-          name: "王小虎",
-          address: "在位",
-        },
-        {
-          date: "2016-05-04",
-          name: "王小虎",
-          address: "在位",
-        },
-        {
-          date: "2016-05-01",
-          name: "王小虎",
-          address: "在位",
-        },
-        {
-          date: "2016-05-03",
-          name: "王小虎",
-          address: "在位",
-        },
-        {
-          date: "2016-05-03",
-          name: "王小虎",
-          address: "在位",
-        },
-      ],
+      tableData: [],
       // 统计个数
-      statistics: {},
+      red: 0,
+      green: 0,
+      yellow: 0,
+      grey: 0,
+      // 基本人员数据
+      jiBen: {},
+      // 柜子编号
+      cabinetNumber: null,
+      // 格子编号
+      deviceId: null,
+      // 存物状态
+      stoneState: null,
+      // 发生时间
+      happenTime: null,
+      // 单位名字
+      departmentName: null,
     };
   },
   created() {
     this.getList();
+    this.xianShang();
   },
   methods: {
+    // 开关们记录查询
+    offMeng() {
+      this.loading = true;
+      const params = this.queryParams;
+      xianPhoneOppe(params).then((res) => {
+        console.log(res);
+        this.tableData = res.data.infos;
+        this.total = res.data.totalCount;
+        this.happenTime = res.data.infos[0].happenTime;
+        this.departmentName = res.data.infos[0].departmentName;
+        this.loading = false;
+      });
+      // axios
+      //   .get("http://114.115.153.156:12090/wl/api/v1/log/grid", {
+      //     params,
+      //     headers: { Authorization: Cookies.get("accessToken") },
+      //   })
+      //   .then((res) => {
+      //     this.tableData = res.data.infos;
+      //     this.total = res.data.totalCount;
+      //     this.happenTime = res.data.infos[0].happenTime;
+      //     this.departmentName = res.data.infos[0].departmentName;
+      //     this.loading = false;
+      //   });
+    },
+    // 线上地址
+    xianShang() {
+      axios
+        .post("http://114.115.153.156:12090/wl/api/getAccessToken", {
+          password: "super123fs456wl",
+          username: "admin",
+        })
+        .then((res) => {
+          Cookies.set("accessToken", res.data.accessToken);
+        });
+    },
     // 点击名字触发
-    buttOn(row) {
-      // console.log(row);
-      this.queryParams.phoneCabinetId = row.id;
+    buttOn(row, data) {
+      this.jiBen = row;
+      this.deviceId = data.deviceId;
+      this.stoneState = data.stoneState;
+      this.queryParams.pageNo = 1;
+      this.offMeng();
       this.open = true;
       this.title = "柜子记录";
     },
@@ -309,33 +355,64 @@ export default {
       this.phone2 = false;
       this.phone = true;
       this.queryParams.gridNumber = null;
+      this.red = 0;
+      this.green = 0;
+      this.yellow = 0;
+      this.grey = 0;
     },
     // 点击手机柜触发
-    opens(id) {
-      console.log(id);
-      // 赋值到查询参数中
-      this.queryParams.phoneCabinetId = id;
+    opens(cabinetNum) {
       this.phone = false;
       this.phone2 = true;
-      listGrid(this.queryParams.phoneCabinetId).then((res) => {
-        this.gridList = res.rows;
-      });
-      shouJiGrid().then((res) => {
-        this.statistics = res.data;
+      this.cabinetNumber = cabinetNum;
+      xianPhoneGeZi(this.cabinetNumber).then((res) => {
+        this.gridList = res.data.infos;
+        console.log(res);
+        this.gridList.forEach((item) => {
+          if (item.gridState == "手机未放入") {
+            this.red += 1;
+          } else if (item.gridState == "手机已存放") {
+            this.green += 1;
+          } else if (item.gridState == "人员请假") {
+            this.yellow += 1;
+          } else {
+            this.grey += 1;
+          }
+        });
       });
+      // axios
+      //   .get("http://114.115.153.156:12090/wl/api/v1/grids", {
+      //     params: { cabinetNum },
+      //     headers: { Authorization: Cookies.get("accessToken") },
+      //   })
+      //   .then((res) => {
+      //     console.log(res);
+      //     this.gridList = res.data.infos;
+      //     this.gridList.forEach((item) => {
+      //       if (item.gridState == "手机未放入") {
+      //         this.red += 1;
+      //       } else if (item.gridState == "手机已存放") {
+      //         this.green += 1;
+      //       } else if (item.gridState == "人员请假") {
+      //         this.yellow += 1;
+      //       } else {
+      //         this.grey += 1;
+      //       }
+      //     });
+      //   });
     },
     /** 查询手机柜列表 */
     getList() {
-      this.loading = true;
-      listCabinet().then((response) => {
-        console.log(response); //请求回来的数据
-        this.cabinetList = response.rows;
-        this.total = response.total;
-        this.loading = false;
+      xianPhone().then((res) => {
+        this.cabinetList = res.data.infos;
       });
-      // aaa().then((res) => {
-      //   console.log(res);
-      // });
+      // axios
+      //   .get("http://114.115.153.156:12090/wl/api/v1/cabinets", {
+      //     headers: { Authorization: Cookies.get("accessToken") },
+      //   })
+      //   .then((res) => {
+      //     this.cabinetList = res.data.infos;
+      //   });
     },
     // 取消按钮
     cancel() {
@@ -498,6 +575,9 @@ ul {
 .yellow {
   background: url("../../../assets/images/抽屉-黄色1.png") no-repeat;
 }
+.grey {
+  background: url("../../../assets/images/柜子-灰.png") no-repeat;
+}
 
 .box1 {
   padding-top: 17px;
@@ -551,7 +631,7 @@ ul {
   font-size: 14px;
 }
 
-.box44::before {
+.box4::before {
   display: inline-block;
   content: "";
   width: 8px;
@@ -578,6 +658,15 @@ ul {
   background-color: #ffba00;
   margin-left: 26px;
 }
+.box7::before {
+  display: inline-block;
+  content: "";
+  width: 8px;
+  height: 8px;
+  /* border-radius: 50%; */
+  background-color: #98a7bc;
+  margin-left: 26px;
+}
 ::v-deep .el-dialog {
   background-color: #004d86;
   margin: auto;
@@ -622,7 +711,7 @@ ul {
   background: #004d86;
 }
 ::v-deep .el-dialog__body {
-  padding: 30px 38px;
+  padding: 30px 0px 30px 40px;
 }
 ::v-deep .el-form-item__label {
   padding: 0 0 0 0;
@@ -688,4 +777,10 @@ ul {
 ::v-deep .el-pagination__sizes {
   display: none !important;
 }
+::v-deep .el-table {
+  background-color: transparent;
+}
+::v-deep .el-pagination {
+  padding: 2px 54px;
+}
 </style>