消防点位维护扫码

src/views/firefighting/points/components/list.vue

@@ -29,7 +29,11 @@
           <el-col :span="4">
             <el-form-item label="是否标点" label-width="110px">
               <el-select v-model="IS_PUNCTUATION" clearable placeholder="请选择" style="width: 100%;">
-                <el-option v-for="item in punctuationStatusList" :key="item.value" :label="item.label" :value="item.value" />
+                <el-option
+                  v-for="item in punctuationStatusList"
+                  :key="item.value"
+                  :label="item.label"
+                  :value="item.value"/>
               </el-select>
             </el-form-item>
           </el-col>
@@ -75,14 +79,14 @@
           </el-table-column>
           <el-table-column label="操作" width="450">
             <template slot-scope="{row}">
-              <el-button
+              <!--              <el-button-->
-                v-show="true"
+              <!--                v-show="true"-->
-                class="tiffany-btn"
+              <!--                class="tiffany-btn"-->
-                icon="el-icon-picture"
+              <!--                icon="el-icon-picture"-->
-                type="primary"
+              <!--                type="primary"-->
-                size="mini"
+              <!--                size="mini"-->
-                @click="handleShowQr(row)">点位二维码
+              <!--                @click="handleShowQr(row)">点位二维码-->
-              </el-button>
+              <!--              </el-button>-->
               <el-button
                 v-show="edit"
                 type="primary"
@@ -98,12 +102,20 @@
                 @click="handleDelete(row)">删除
               </el-button>
               <!-- 新增按钮：检查记录二维码 -->
+              <!--              <el-button-->
+              <!--                class="tiffany-btn"-->
+              <!--                icon="el-icon-document"-->
+              <!--                type="info"-->
+              <!--                size="mini"-->
+              <!--                @click="handleShowRecordQr(row)">检查记录二维码-->
+              <!--              </el-button>-->
               <el-button
                 class="tiffany-btn"
                 icon="el-icon-document"
                 type="info"
                 size="mini"
-                @click="handleShowRecordQr(row)">检查记录二维码
+                @click="handleShowNotificationCard(row)">
+                告知卡
               </el-button>
             </template>
           </el-table-column>
@@ -123,27 +135,91 @@
       </div>
     </div>
 
-    <el-dialog :visible.sync="dialogFormShow" title="查看二维码" width="680px" class="top-dialog">
+    <!--    <el-dialog :visible.sync="dialogFormShow" title="查看二维码" width="680px" class="top-dialog">-->
-      <div id="printTest" style="border: 1px solid #fff;">
+    <!--      <div id="printTest" style="border: 1px solid #fff;">-->
-        <div class="level-title" style="margin-top:20px">
+    <!--        <div class="level-title" style="margin-top:20px">-->
-          <h1>消防点位信息</h1>
+    <!--          <h1>消防点位信息</h1>-->
+    <!--        </div>-->
+    <!--        <table class="table-ui">-->
+    <!--          <tr>-->
+    <!--            <td class="tbg">消防区域</td>-->
+    <!--            <td >{{ qrInfo.FIRE_REGION_NAME }}</td>-->
+    <!--            <td class="tbg">消防点位</td>-->
+    <!--            <td>{{ qrInfo.FIRE_POINT_NAME }}</td>-->
+    <!--          </tr>-->
+    <!--          <tr>-->
+    <!--            <td class="tbg">负责部门</td>-->
+    <!--            <td>{{ qrInfo.DEPARTMENT_NAME }}</td>-->
+    <!--            <td class="tbg">负责人</td>-->
+    <!--            <td>{{ qrInfo.USERNAME }}</td>-->
+    <!--          </tr>-->
+    <!--        </table>-->
+    <!--        <div class="table-qrcode">-->
+    <!--          <vue-qr :text="qrcodeStr" :margin="0" :size="300" color-dark="#000" color-light="#fff" />-->
+    <!--        </div>-->
+    <!--      </div>-->
+    <!--      <div slot="footer" class="dialog-footer">-->
+    <!--        <el-button @click="dialogFormShow = false">关 闭</el-button>-->
+    <!--        <el-button v-print="'#printTest'" type="primary">打 印</el-button>-->
+    <!--      </div>-->
+    <!--    </el-dialog>-->
+
+    <el-dialog :visible.sync="dialogFormShow" title="消防点位维护信息告知牌" width="780px" class="top-dialog">
+      <el-tabs v-model="tabsActive">
+        <el-tab-pane label="横版" name="horizontal"/>
+        <el-tab-pane label="竖版" name="vertical"/>
+      </el-tabs>
+      <div id="printTest">
+        <div class="main_title">消防点位维护信息告知牌</div>
+        <div v-if="tabsActive === 'horizontal'" class="horizontal">
+          <div class="info">
+            <div class="row">
+              <div class="title">消防点位</div>
+              <div class="value">{{ qrInfo.FIRE_POINT_NAME }}</div>
+            </div>
+            <div class="row">
+              <div class="title">点位编号</div>
+              <div class="value">{{ qrInfo.FIRE_POINT_CODE }}</div>
+            </div>
+          </div>
+          <div class="qr_info">
+            <div class="row">
+              <div class="title">检查码</div>
+              <div class="qr">
+                <vue-qr :text="qrcodeStr" :margin="0" :size="280" color-dark="#000" color-light="#fff"/>
+              </div>
+              <div class="title">查询码</div>
+              <div class="qr">
+                <vue-qr :text="qrcodeStr1" :margin="0" :size="280" color-dark="#000" color-light="#fff"/>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div v-if="tabsActive === 'vertical'" class="vertical">
+          <div class="info">
+            <div class="row">
+              <div class="title">消防点位</div>
+              <div class="value">{{ qrInfo.FIRE_POINT_NAME }}</div>
+            </div>
+            <div class="row">
+              <div class="title">点位编号</div>
+              <div class="value">{{ qrInfo.FIRE_POINT_CODE }}</div>
+            </div>
+          </div>
+          <div class="qr_info">
+            <div class="row">
+              <div class="title">检查码</div>
+              <div class="qr">
+                <vue-qr :text="qrcodeStr" :margin="0" :size="280" color-dark="#000" color-light="#fff"/>
+              </div>
+            </div>
+            <div class="row">
+              <div class="title">查询码</div>
+              <div class="qr">
+                <vue-qr :text="qrcodeStr1" :margin="0" :size="280" color-dark="#000" color-light="#fff"/>
+              </div>
+            </div>
           </div>
-        <table class="table-ui">
-          <tr>
-            <td class="tbg">消防区域</td>
-            <td >{{ qrInfo.FIRE_REGION_NAME }}</td>
-            <td class="tbg">消防点位</td>
-            <td>{{ qrInfo.FIRE_POINT_NAME }}</td>
-          </tr>
-          <tr>
-            <td class="tbg">负责部门</td>
-            <td>{{ qrInfo.DEPARTMENT_NAME }}</td>
-            <td class="tbg">负责人</td>
-            <td>{{ qrInfo.USERNAME }}</td>
-          </tr>
-        </table>
-        <div class="table-qrcode">
-          <vue-qr :text="qrcodeStr" :margin="0" :size="300" color-dark="#000" color-light="#fff" />
         </div>
       </div>
       <div slot="footer" class="dialog-footer">
@@ -158,7 +234,7 @@
           <h1>检查记录二维码</h1>
         </div>
         <div class="table-qrcode">
-          <vue-qr :text="recordQrcodeStr" :margin="0" :size="300" color-dark="#000" color-light="#fff" />
+          <vue-qr :text="recordQrcodeStr" :margin="0" :size="300" color-dark="#000" color-light="#fff"/>
         </div>
       </div>
       <div slot="footer" class="dialog-footer">
@@ -167,11 +243,19 @@
       </div>
     </el-dialog>
 
-    <el-dialog v-loading ="listLoading" :visible.sync="dialogEditUser" title="批量修改负责人" width="800px">
+    <el-dialog v-loading="listLoading" :visible.sync="dialogEditUser" title="批量修改负责人" width="800px">
-      <el-form ref="firefightingBatchEditDept" :model="dialogEditUserForm" :rules="dialogEditUserRules" label-width="150px">
+      <el-form
+        ref="firefightingBatchEditDept"
+        :model="dialogEditUserForm"
+        :rules="dialogEditUserRules"
+        label-width="150px">
         <el-row>
           <el-form-item label="负责人员" prop="USER_ID">
-            <el-select v-model="dialogEditUserForm.USER_ID" placeholder="请选择人员" class="filter-item" style="width: 80%;">
+            <el-select
+              v-model="dialogEditUserForm.USER_ID"
+              placeholder="请选择人员"
+              class="filter-item"
+              style="width: 80%;">
               <el-option v-for="item in userList" :key="item.USER_ID" :label="item.NAME" :value="item.USER_ID"/>
             </el-select>
           </el-form-item>
@@ -204,6 +288,8 @@ export default {
       dialogFormShow: false,
       dialogRecordFormShow: false,
       qrcodeStr: '',
+      qrcodeStr1: '',
+      tabsActive: 'horizontal',
       recordQrcodeStr: '',
       qrInfo: {},
       add: false,
@@ -275,6 +361,7 @@ export default {
       })
     },
     handleShowRecordQr(ROW) {
+      console.log(ROW)
       this.dialogFormShow = true
       // 确保qrInfo绑定了需要显示的数据字段
       this.qrInfo = {
@@ -293,6 +380,22 @@ export default {
       this.qrcodeStr = jsonStr
       console.info(this.qrcodeStr)
     },
+    handleShowNotificationCard(ROW) {
+      this.dialogFormShow = true
+      this.qrInfo = ROW
+      // 检查码
+      this.qrcodeStr = JSON.stringify({
+        MANAGER_TYPE: 'checkRecordManager',
+        USER_ID: ROW.USER_ID,
+        DEPARTMENT_ID: ROW.DEPARTMENT_ID,
+        FIRE_POINT_ID: ROW.FIRE_POINT_ID
+      })
+      // 查询码
+      this.qrcodeStr1 = JSON.stringify({
+        MANAGER_TYPE: 'fireListManager',
+        FIRE_POINT_ID: ROW.FIRE_POINT_ID
+      })
+    },
     handleEdit(FIRE_POINT_ID) {
       this.$parent.FIRE_POINT_ID = FIRE_POINT_ID
       this.$parent.activeName = 'Edit'
@@ -456,7 +559,8 @@ export default {
             })
             this.dialogEditUser = false
             this.getList()
-          }).catch(() => {})
+          }).catch(() => {
+          })
         }
       })
     },
@@ -541,10 +645,12 @@ export default {
 .returnBtn {
   float: right;
 }
+
 .app-container {
   display: flex;
   align-items: baseline;
 }
+
 .table-qrcode {
   text-align: center;
   padding-top: 20px;
@@ -555,3 +661,139 @@ export default {
   width: 100%
 }
 </style>
+
+<style scoped lang="scss">
+#printTest {
+  border: 1px solid #ccc;
+  padding: 20px;
+  margin: 10px;
+
+  .main_title {
+    font-weight: bold;
+    font-size: 30px;
+    text-align: center;
+    color: #000;
+  }
+
+  .horizontal {
+    .info {
+      color: #000;
+      font-size: 16px;
+      margin-top: 30px;
+
+      .row {
+        display: flex;
+        align-items: center;
+
+        .title {
+          width: 120px;
+          text-align: center;
+          border: 1px solid #000;
+          padding: 5px;
+          letter-spacing: 6px;
+        }
+
+        .value {
+          border: 1px solid #000;
+          border-left: none;
+          flex: 1;
+          padding: 5px 5px 5px 10px;
+        }
+
+        & + .row {
+          .title, .value {
+            border-top: none;
+          }
+        }
+      }
+    }
+
+    .qr_info {
+      color: #000;
+      font-size: 16px;
+
+      .row {
+        display: flex;
+
+        .title {
+          width: 30px;
+          line-height: 22px;
+          writing-mode: vertical-rl;
+          text-align: center;
+          letter-spacing: 15px;
+          border: 1px solid #000;
+          border-top: none;
+          padding: 4px;
+        }
+
+        .qr {
+          flex: 1;
+          border: 1px solid #000;
+          border-top: none;
+          border-left: none;
+          padding: 5px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+
+          & + .title {
+            border-left: none;
+          }
+        }
+      }
+    }
+  }
+
+  .vertical {
+    .info, .qr_info {
+      color: #000;
+      font-size: 16px;
+      margin-top: 30px;
+
+      .row {
+        display: flex;
+
+        .title {
+          width: 200px;
+          text-align: center;
+          padding: 5px;
+          border: 1px solid #000;
+          letter-spacing: 6px;
+        }
+
+        .value, .qr {
+          padding: 5px 5px 5px 10px;
+          border: 1px solid #000;
+          border-left: none;
+          flex: 1;
+        }
+
+        & + .row {
+          .title, .value, .qr {
+            border-top: none;
+          }
+        }
+      }
+    }
+
+    .qr_info {
+      margin-top: 0;
+
+      .row {
+        .title {
+          letter-spacing: 12px;
+          line-height: 280px;
+          border-top: none;
+        }
+
+        .qr {
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          border-top: none;
+        }
+      }
+    }
+  }
+}
+</style>