手机柜头部标题居中，点击盒子全覆盖

src/views/combatduty/taskdutyinfo/index.vue

@@ -274,7 +274,7 @@
         :inline="true"
       >
         <div class="jiben">基本信息</div>
-        <el-form-item label="单位" prop="unitName">
+        <!-- <el-form-item label="单位" prop="unitName">
           <el-select
             v-model="form.unitName"
             @change="unitNamechange"
@@ -288,7 +288,7 @@
               :value="dict"
             ></el-option>
           </el-select>
-        </el-form-item>
+        </el-form-item> -->
         <!-- <el-form-item label="部门ID" prop="unitId">
           <el-input v-model="form.unitId" placeholder="请输入部门ID" />
         </el-form-item>-->
@@ -316,6 +316,9 @@
         <el-form-item label="指挥员电话" prop="commanderPhone">
           <el-input v-model="form.commanderPhone" placeholder="" />
         </el-form-item>
+        <el-form-item label="参加人数" prop="commanderPhone">
+          <el-input v-model="form.unitId" placeholder="" />
+        </el-form-item>
         <!-- <el-form-item label="参加人员">
           <el-select
             v-model="form.participantsId"
@@ -327,22 +330,6 @@
             <el-option v-for="item in rylist" :key="item.id" :label="item.name" :value="item.id"></el-option>
           </el-select>
         </el-form-item>-->
-        <el-form-item label="参加人员" prop="participantsIds">
-          <el-select
-            v-model="form.participantsIds"
-            multiple
-            filterable
-            clearable
-            placeholder=""
-          >
-            <el-option
-              v-for="item in rylist"
-              :key="item.id"
-              :label="item.name"
-              :value="item.id"
-            ></el-option>
-          </el-select>
-        </el-form-item>
         <el-form-item label="开始时间" prop="startTime">
           <el-date-picker
             clearable
@@ -366,6 +353,26 @@
         <el-form-item label="所在位置" prop="adress">
           <el-input v-model="form.adress" placeholder="" />
         </el-form-item>
+        <div class="jiben">人员名册</div>
+        <el-form-item>
+          <FileUpload v-model="form.fileName" />
+        </el-form-item>
+        <!-- <el-form-item label="" prop="participantsIds">
+          <el-select
+            v-model="form.participantsIds"
+            multiple
+            filterable
+            clearable
+            placeholder=""
+          >
+            <el-option
+              v-for="item in rylist"
+              :key="item.id"
+              :label="item.name"
+              :value="item.id"
+            ></el-option>
+          </el-select>
+        </el-form-item> -->
         <div class="jiben">事由</div>
         <el-form-item label prop="question">
           <el-input v-model="form.question" type="textarea" placeholder="" />
@@ -741,4 +748,17 @@ export default {
   border: none !important;
   color: #cccccc;
 }
+/* 计划附件 */
+::v-deep .el-upload__tip {
+  color: white;
+  position: absolute;
+  top: -5px;
+  width: 500px;
+  left: 90px;
+  color: white;
+}
+::v-deep .el-link.el-link--default {
+  color: white;
+  text-indent: 0.5em;
+}
 </style>

src/views/combatduty/teamdutyinfo/index.vue

@@ -441,37 +441,38 @@
       append-to-body
       :close-on-click-modal="false"
     >
-    <div class="userAgree" style="overflow: -Scroll; overflow-x: hidden">
-      <el-form
-        ref="form"
-        :model="form"
-        :rules="rules"
-        label-width="155px"
-        :inline="true"
-      >
-        <div class="jiben">基本信息</div>
-        <el-form-item label="值班时间" prop="attendedTime">
-          <el-date-picker
-            clearable
-            size="small"
-            v-model="form.attendedTime"
-            type="date"
-            value-format="yyyy-MM-dd"
-            placeholder=""
-            v-if="qdflg == 2"
-          ></el-date-picker>
-          <el-date-picker
-            v-model="form.attendedTime"
-            type="daterange"
-            range-separator="至"
-            start-placeholder
-            end-placeholder
-            value-format="yyyy-MM-dd"
-            v-if="qdflg == 1"
-          ></el-date-picker>
-        </el-form-item>
-        <el-form-item label="值班首长" prop="chiefDutyName">
-          <el-select
+      <div class="userAgree" style="overflow: -Scroll; overflow-x: hidden">
+        <el-form
+          ref="form"
+          :model="form"
+          :rules="rules"
+          label-width="155px"
+          :inline="true"
+        >
+          <div class="jiben">基本信息</div>
+          <el-form-item label="值班时间" prop="attendedTime">
+            <el-date-picker
+              clearable
+              size="small"
+              v-model="form.attendedTime"
+              type="date"
+              value-format="yyyy-MM-dd"
+              placeholder=""
+              v-if="qdflg == 2"
+            ></el-date-picker>
+            <el-date-picker
+              v-model="form.attendedTime"
+              type="daterange"
+              range-separator="至"
+              start-placeholder
+              end-placeholder
+              value-format="yyyy-MM-dd"
+              v-if="qdflg == 1"
+            ></el-date-picker>
+          </el-form-item>
+          <el-form-item label="值班首长" prop="chiefDutyName">
+            <el-input v-model="form.chiefDutyName" placeholder="" />
+            <!-- <el-select
             v-model="form.chiefDutyName"
             @change="chiefDutyNamefun"
             filterable
@@ -484,186 +485,195 @@
               :label="item.name"
               :value="item"
             ></el-option>
-          </el-select>
-        </el-form-item>
-        <!-- <el-form-item label="值班首长" prop="chiefDutyId">
+          </el-select> -->
+          </el-form-item>
+          <!-- <el-form-item label="值班首长" prop="chiefDutyId">
           <el-select v-model="form.chiefDutyId" filterable clearable placeholder="请选择值班首长">
             <el-option v-for="item in rylist" :key="item.id" :label="item.name" :value="item.id"></el-option>
           </el-select>
         </el-form-item>-->
-        <!-- <el-form-item label="值班首长ID" prop="chiefDutyId">
+          <!-- <el-form-item label="值班首长ID" prop="chiefDutyId">
           <el-input v-model="form.chiefDutyId" placeholder="请输入值班首长ID" />
         </el-form-item>-->
-        <el-form-item label="值班首长电话" prop="chiefDutyPhone">
-          <el-input v-model="form.chiefDutyPhone" placeholder="" />
-        </el-form-item>
-        <el-form-item label="作战值班员" prop="combatDutyName">
-          <el-select
-            v-model="form.combatDutyName"
-            @change="combatDutyNamefun"
-            filterable
-            clearable
-            placeholder=""
-          >
-            <el-option
-              v-for="item in rylist"
-              :key="item.id"
-              :label="item.name"
-              :value="item"
-            ></el-option>
-          </el-select>
-        </el-form-item>
-        <!-- <el-form-item label="作战值班员" prop="combatDutyId">
+          <el-form-item label="值班首长电话" prop="chiefDutyPhone">
+            <el-input v-model="form.chiefDutyPhone" placeholder="" />
+          </el-form-item>
+          <el-form-item label="作战值班员" prop="combatDutyName">
+            <el-input v-model="form.combatDutyName" placeholder="" />
+            <!-- <el-select
+              v-model="form.combatDutyName"
+              @change="combatDutyNamefun"
+              filterable
+              clearable
+              placeholder=""
+            >
+              <el-option
+                v-for="item in rylist"
+                :key="item.id"
+                :label="item.name"
+                :value="item"
+              ></el-option>
+            </el-select> -->
+          </el-form-item>
+          <!-- <el-form-item label="作战值班员" prop="combatDutyId">
           <el-select v-model="form.combatDutyId" filterable clearable placeholder="请选择作战值班员">
             <el-option v-for="item in rylist" :key="item.id" :label="item.name" :value="item.id"></el-option>
           </el-select>
         </el-form-item>-->
-        <!-- <el-form-item label="作战值班员ID" prop="combatDutyId">
+          <!-- <el-form-item label="作战值班员ID" prop="combatDutyId">
           <el-input
             v-model="form.combatDutyId"
             placeholder="请输入作战值班员ID"
           />
         </el-form-item>-->
-        <el-form-item label="作战值班员电话" prop="combatDutyPhone">
-          <el-input v-model="form.combatDutyPhone" placeholder="" />
-        </el-form-item>
-        <el-form-item label="通信值班员" prop="dutyOffierName">
-          <el-select
-            v-model="form.dutyOffierName"
-            @change="dutyOffierNamefun"
-            filterable
-            clearable
-            placeholder=""
-          >
-            <el-option
-              v-for="item in rylist"
-              :key="item.id"
-              :label="item.name"
-              :value="item"
-            ></el-option>
-          </el-select>
-        </el-form-item>
-        <!-- <el-form-item label="通信值班员" prop="dutyOffierId">
+          <el-form-item label="作战值班员电话" prop="combatDutyPhone">
+            <el-input v-model="form.combatDutyPhone" placeholder="" />
+          </el-form-item>
+          <el-form-item label="通信值班员" prop="dutyOffierName">
+            <el-input v-model="form.dutyOffierName" placeholder="" />
+            <!-- <el-select
+              v-model="form.dutyOffierName"
+              @change="dutyOffierNamefun"
+              filterable
+              clearable
+              placeholder=""
+            >
+              <el-option
+                v-for="item in rylist"
+                :key="item.id"
+                :label="item.name"
+                :value="item"
+              ></el-option>
+            </el-select> -->
+          </el-form-item>
+          <!-- <el-form-item label="通信值班员" prop="dutyOffierId">
           <el-select v-model="form.dutyOffierId" filterable clearable placeholder="请选择通信值班员">
             <el-option v-for="item in rylist" :key="item.id" :label="item.name" :value="item.id"></el-option>
           </el-select>
         </el-form-item>-->
-        <el-form-item label="通信值班员电话" prop="dutyOffierPhone">
-          <el-input v-model="form.dutyOffierPhone" placeholder="" />
-        </el-form-item>
-        <el-form-item label="机要值班员" prop="confidentialName">
-          <el-select
-            v-model="form.confidentialName"
-            @change="confidentialNamechange"
-            filterable
-            clearable
-            placeholder=""
-          >
-            <el-option
-              v-for="item in rylist"
-              :key="item.id"
-              :label="item.name"
-              :value="item"
-            ></el-option>
-          </el-select>
-        </el-form-item>
-        <!-- <el-form-item label="机要值班员" prop="confidentialId">
+          <el-form-item label="通信值班员电话" prop="dutyOffierPhone">
+            <el-input v-model="form.dutyOffierPhone" placeholder="" />
+          </el-form-item>
+          <el-form-item label="机要值班员" prop="confidentialName">
+            <el-input v-model="form.confidentialName" placeholder="" />
+            <!-- <el-select
+              v-model="form.confidentialName"
+              @change="confidentialNamechange"
+              filterable
+              clearable
+              placeholder=""
+            >
+              <el-option
+                v-for="item in rylist"
+                :key="item.id"
+                :label="item.name"
+                :value="item"
+              ></el-option>
+            </el-select> -->
+          </el-form-item>
+          <!-- <el-form-item label="机要值班员" prop="confidentialId">
           <el-select v-model="form.confidentialId" filterable clearable placeholder="请选择机要值班员">
             <el-option v-for="item in rylist" :key="item.id" :label="item.name" :value="item.id"></el-option>
           </el-select>
         </el-form-item>-->
-        <el-form-item label="机要值班员电话" prop="confidentialPhone">
-          <el-input v-model="form.confidentialPhone" placeholder="" />
-        </el-form-item>
-        <el-form-item label="政治工作部值班员" prop="politicalName">
-          <el-select
-            v-model="form.politicalName"
-            @change="politicalNamechange"
-            filterable
-            clearable
-            placeholder=""
-          >
-            <el-option
-              v-for="item in rylist"
-              :key="item.id"
-              :label="item.name"
-              :value="item"
-            ></el-option>
-          </el-select>
-        </el-form-item>
-        <!-- <el-form-item label="政治工作部值班员" prop="politicalId">
+          <el-form-item label="机要值班员电话" prop="confidentialPhone">
+            <el-input v-model="form.confidentialPhone" placeholder="" />
+          </el-form-item>
+          <el-form-item label="政治工作部值班员" prop="politicalName">
+            <el-input v-model="form.politicalName" placeholder="" />
+            <!-- <el-select
+              v-model="form.politicalName"
+              @change="politicalNamechange"
+              filterable
+              clearable
+              placeholder=""
+            >
+              <el-option
+                v-for="item in rylist"
+                :key="item.id"
+                :label="item.name"
+                :value="item"
+              ></el-option>
+            </el-select> -->
+          </el-form-item>
+          <!-- <el-form-item label="政治工作部值班员" prop="politicalId">
           <el-select v-model="form.politicalId" filterable clearable placeholder="请选择机政治工作部值班员">
             <el-option v-for="item in rylist" :key="item.id" :label="item.name" :value="item.id"></el-option>
           </el-select>
         </el-form-item>-->
-        <el-form-item label="政治工作部值班员电话" prop="politicalPhone">
-          <el-input v-model="form.politicalPhone" placeholder="" />
-        </el-form-item>
-        <el-form-item label="保障部值班员" prop="guaranteeName">
-          <el-select
-            v-model="form.guaranteeName"
-            @change="guaranteeNamechange"
-            filterable
-            clearable
-            placeholder=""
-          >
-            <el-option
-              v-for="item in rylist"
-              :key="item.id"
-              :label="item.name"
-              :value="item"
-            ></el-option>
-          </el-select>
-        </el-form-item>
-        <!-- <el-form-item label="保障部值班员" prop="guaranteeId">
+          <el-form-item label="政治工作部值班员电话" prop="politicalPhone">
+            <el-input v-model="form.politicalPhone" placeholder="" />
+          </el-form-item>
+          <el-form-item label="保障部值班员" prop="guaranteeName">
+            <el-input v-model="form.guaranteeName" placeholder="" />
+            <!-- <el-select
+              v-model="form.guaranteeName"
+              @change="guaranteeNamechange"
+              filterable
+              clearable
+              placeholder=""
+            >
+              <el-option
+                v-for="item in rylist"
+                :key="item.id"
+                :label="item.name"
+                :value="item"
+              ></el-option>
+            </el-select> -->
+          </el-form-item>
+          <!-- <el-form-item label="保障部值班员" prop="guaranteeId">
           <el-select v-model="form.guaranteeId" filterable clearable placeholder="请选择保障部值班员">
             <el-option v-for="item in rylist" :key="item.id" :label="item.name" :value="item.id"></el-option>
           </el-select>
         </el-form-item>-->
-        <el-form-item label="保障部值班员电话" prop="guaranteePhone">
-          <el-input v-model="form.guaranteePhone" placeholder="" />
-        </el-form-item>
-        <el-form-item label="值班通信员" prop="messengerName">
-          <el-select
-            v-model="form.messengerName"
-            @change="messengerNamechange"
-            filterable
-            clearable
-            placeholder=""
-          >
-            <el-option
-              v-for="item in rylist"
-              :key="item.id"
-              :label="item.name"
-              :value="item"
-            ></el-option>
-          </el-select>
-        </el-form-item>
-        <!-- <el-form-item label="值班通信员" prop="messengerId">
+          <el-form-item label="保障部值班员电话" prop="guaranteePhone">
+            <el-input v-model="form.guaranteePhone" placeholder="" />
+          </el-form-item>
+          <el-form-item label="值班通信员" prop="messengerName">
+            <el-input v-model="form.messengerName" placeholder="" />
+            <!-- <el-select
+              v-model="form.messengerName"
+              @change="messengerNamechange"
+              filterable
+              clearable
+              placeholder=""
+            >
+              <el-option
+                v-for="item in rylist"
+                :key="item.id"
+                :label="item.name"
+                :value="item"
+              ></el-option>
+            </el-select> -->
+          </el-form-item>
+          <!-- <el-form-item label="值班通信员" prop="messengerId">
           <el-select v-model="form.messengerId" filterable clearable placeholder="请选择值班通信员">
             <el-option v-for="item in rylist" :key="item.id" :label="item.name" :value="item.id"></el-option>
           </el-select>
         </el-form-item>-->
-        <el-form-item label="值班通信员电话" prop="messengerPhone">
-          <el-input v-model="form.messengerPhone" placeholder="" />
-        </el-form-item>
-        <el-form-item label="值班分队" prop="detachmentName">
-          <el-select
-            v-model="form.detachmentName"
-            @change="detachmentNamechange"
-            clearable
-            placeholder=""
+          <el-form-item label="值班通信员电话" prop="messengerPhone">
+            <el-input v-model="form.messengerPhone" placeholder="" />
+          </el-form-item>
+          <div class="jiben">值班分队</div>
+          <el-row
+            v-for="(item, i) in relatives"
+            :key="i"
+            style="margin-bottom: 20px"
           >
-            <el-option
-              v-for="dict in deptOptions"
-              :key="dict.deptId"
-              :label="dict.deptName"
-              :value="dict"
-            ></el-option>
-          </el-select>
-        </el-form-item>
-        <!-- <el-form-item label="值班分队" prop="detachmentId">
+            <!-- <el-form v-for="(item, i) in relatives" :key="i"> -->
+            <el-form-item label="值班分队" prop="detachmentId">
+              <el-select v-model="item.detachmentId" clearable placeholder="">
+                <el-option
+                  v-for="dict in deptOptions"
+                  :key="dict.deptId"
+                  :label="dict.deptName"
+                  :value="dict.deptId"
+                ></el-option>
+              </el-select>
+            </el-form-item>
+            <!-- <el-form-item label="值班分队" prop="detachmentId">
           <el-select v-model="form.detachmentId" ref="deptId" clearable placeholder="请选择值班分队">
+              @change="detachmentNamechange"
             <el-option
               v-for="dict in deptOptions"
               :key="dict.deptId"
@@ -672,31 +682,32 @@
             ></el-option>
           </el-select>
         </el-form-item> -->
-        <el-form-item label="值班分队人数" prop="detachmentNumber">
-          <el-input
-            v-model="form.detachmentNumber"
-            type="number"
-            :min="0"
-            placeholder=""
-          />
-        </el-form-item>
-        <el-form-item label="值班分队指挥员" prop="detachmentPeopleName">
-          <el-select
-            v-model="form.detachmentPeopleName"
-            filterable
-            clearable
-            placeholder=""
-            @change="detachmentPeopleNamechange"
-          >
-            <el-option
-              v-for="item in rylist"
-              :key="item.id"
-              :label="item.name"
-              :value="item"
-            ></el-option>
-          </el-select>
-        </el-form-item>
-        <!-- <el-form-item label="值班分队指挥员" prop="detachmentPeopleId">
+            <el-form-item label="值班分队人数" prop="detachmentNumber">
+              <el-input
+                v-model="item.detachmentNumber"
+                type="number"
+                :min="0"
+                placeholder=""
+              />
+            </el-form-item>
+            <el-form-item label="值班分队指挥员" prop="detachmentPeopleName">
+              <el-input v-model="item.detachmentPeopleName" placeholder="" />
+              <!-- <el-select
+              v-model="form.detachmentPeopleName"
+              filterable
+              clearable
+              placeholder=""
+              @change="detachmentPeopleNamechange"
+            >
+              <el-option
+                v-for="item in rylist"
+                :key="item.id"
+                :label="item.name"
+                :value="item"
+              ></el-option>
+            </el-select> -->
+            </el-form-item>
+            <!-- <el-form-item label="值班分队指挥员" prop="detachmentPeopleId">
           <el-select
             v-model="form.detachmentPeopleId"
             filterable
@@ -706,27 +717,48 @@
             <el-option v-for="item in rylist" :key="item.id" :label="item.name" :value="item.id"></el-option>
           </el-select>
         </el-form-item>-->
-        <el-form-item label="值班分队指挥员电话" prop="detachmentPeoplePhone">
-          <el-input v-model="form.detachmentPeoplePhone" placeholder="" />
-        </el-form-item>
-        <div class="jiben">值班情况</div>
-        <el-form-item label prop="zhibanqingkaung">
-          <el-input
-            v-model="form.zhibanqingkaung"
-            type="textarea"
-            placeholder=""
-          />
-        </el-form-item>
-        <div class="jiben">兵力情况</div>
-        <el-form-item label prop="bingliqingkuang">
-          <el-input
-            v-model="form.bingliqingkuang"
-            type="textarea"
-            placeholder=""
-          />
-        </el-form-item>
-      </el-form>
-    </div>
+            <el-form-item
+              label="值班分队指挥员电话"
+              prop="detachmentPeoplePhone"
+            >
+              <el-input v-model="item.detachmentPeoplePhone" placeholder="" />
+            </el-form-item>
+            <el-form-item style="margin-left: 156px">
+              <el-button
+                type="primary"
+                icon="el-icon-plus"
+                size="mini"
+                @click="addFormss"
+                v-if="i == relatives.length - 1"
+              ></el-button>
+              <el-button
+                type="danger"
+                icon="el-icon-delete"
+                size="mini"
+                v-if="i > 0"
+                @click="delFormss(i)"
+              ></el-button>
+            </el-form-item>
+            <!-- </el-form> -->
+          </el-row>
+          <div class="jiben">值班情况</div>
+          <el-form-item label prop="zhibanqingkaung">
+            <el-input
+              v-model="form.zhibanqingkaung"
+              type="textarea"
+              placeholder=""
+            />
+          </el-form-item>
+          <div class="jiben">兵力情况</div>
+          <el-form-item label prop="bingliqingkuang">
+            <el-input
+              v-model="form.bingliqingkuang"
+              type="textarea"
+              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" size="btn">取 消</el-button>
@@ -824,6 +856,15 @@ export default {
       rylist: [],
       //单位数据
       deptOptions: [],
+      // 添加多个分队值班
+      relatives: [
+        {
+          detachmentId: null,
+          detachmentNumber: null,
+          detachmentPeopleName: null,
+          detachmentPeoplePhone: null,
+        },
+      ],
     };
   },
   created() {
@@ -832,6 +873,19 @@ export default {
     this.getrylist();
   },
   methods: {
+    //增加多个分队值班
+    addFormss() {
+      this.relatives.push({
+        detachmentId: null,
+        detachmentNumber: null,
+        detachmentPeopleName: null,
+        detachmentPeoplePhone: null,
+      });
+    },
+    //删除多个分队值班
+    delFormss(e) {
+      this.relatives.splice(e, 1);
+    },
     //获取人员
     getrylist() {
       listPeople().then((res) => {

src/views/phone/cabinet/index.vue

@@ -3,55 +3,67 @@
     <div class="box" v-if="phone">
       <ul>
         <li class="oneUl" v-for="(item, i) in cabinetList" :key="i">
-          <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">柜子IP</td>
-              <td style="text-align: right; width: 145px">
-                {{ item.ip }}
-              </td>
-            </tr>
-            <tr>
-              <td style="text-align: left; width: 86px">格子数量</td>
-              <td style="text-align: right; width: 145px; color: #00f6ff">
-                {{ item.gridCount }}
-              </td>
-            </tr>
-            <tr>
-              <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: #13ce66"
-                v-if="item.connected != '允许开启'"
-              >
-                {{ item.allowOpen }}
-              </td>
-              <td
-                style="text-align: right; width: 145px; color: #ff4949"
-                v-else
-              >
-                {{ item.allowOpen }}
-              </td>
-            </tr>
-          </table>
+          <div
+            @click="opens(item.number)"
+            style="
+              width: 265px;
+              height: 230px;
+              cursor: pointer;
+              text-align: center;
+            "
+          >
+            <div class="title">{{ item.name }}</div>
+            <table class="table">
+              <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">柜子IP</td>
+                <td style="text-align: right; width: 145px">
+                  {{ item.ip }}
+                </td>
+              </tr>
+              <tr>
+                <td style="text-align: left; width: 86px">格子数量</td>
+                <td style="text-align: right; width: 145px; color: #00f6ff">
+                  {{ item.gridCount }}
+                </td>
+              </tr>
+              <tr>
+                <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: #13ce66"
+                  v-if="item.connected != '允许开启'"
+                >
+                  {{ item.allowOpen }}
+                </td>
+                <td
+                  style="text-align: right; width: 145px; color: #ff4949"
+                  v-else
+                >
+                  {{ item.allowOpen }}
+                </td>
+              </tr>
+            </table>
+          </div>
         </li>
       </ul>
     </div>
@@ -73,14 +85,11 @@
               border-radius: 4px;
               margin-left: 31px;
               background-color: #196299;
+              cursor: pointer;
             "
+            @click="dianJi"
           >
-            <i
-              class="el-icon-arrow-left"
-              style="color: #fff; cursor: pointer"
-              @click="dianJi"
-              >返回</i
-            >
+            <i class="el-icon-arrow-left" style="color: #fff">返回</i>
           </div>
         </el-form-item>
         <!-- <el-form-item prop="gridNumber">
@@ -534,7 +543,6 @@ ul {
   color: #fff;
   height: 16px;
   display: inline-table;
-  margin-left: 100px;
 }
 .table {
   margin-top: 18px;