guoyuepeng
/
qa-prevention-gwj-vue
1
0
Fork 3
Code Issues Pull Requests 1 Packages Projects Releases Wiki Activity

消防点位维护扫码

hyx_2024-9-25_tongbu
LiuJiaNan 2024-09-19 10:45:35 +08:00
parent b574bd137f
commit 4a02fdefd8
1 changed files with 278 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

314
src/views/firefighting/points/components/list.vue
View File

@ -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
v-show="true"
class="tiffany-btn"
icon="el-icon-picture"
type="primary"
size="mini"
@click="handleShowQr(row)">点位二维码
</el-button>
<!-- <el-button-->
<!-- v-show="true"-->
<!-- class="tiffany-btn"-->
<!-- icon="el-icon-picture"-->
<!-- type="primary"-->
<!-- size="mini"-->
<!-- @click="handleShowQr(row)">点位二维码-->
<!-- </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">
<div id="printTest" style="border: 1px solid #fff;">
<div class="level-title" style="margin-top:20px">
<h1>消防点位信息</h1>
<!-- <el-dialog :visible.sync="dialogFormShow" title="查看二维码" width="680px" class="top-dialog">-->
<!-- <div id="printTest" style="border: 1px solid #fff;">-->
<!-- <div class="level-title" style="margin-top:20px">-->
<!-- <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>
<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 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>
</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-form ref="firefightingBatchEditDept" :model="dialogEditUserForm" :rules="dialogEditUserRules" label-width="150px">
<el-dialog v-loading="listLoading" :visible.sync="dialogEditUser" title="批量修改负责人" width="800px">
<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,
@ -273,8 +359,9 @@ export default {
MANAGER_TYPE: 'fireListManager',
FIRE_POINT_ID: ROW.FIRE_POINT_ID
})
},
},
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>