组件化设备标签第二模板

src/views/component/device/index.vue

@@ -355,7 +355,8 @@
             def-id="1120718364969271296"
             @close="visible => npmDialogFormVisible = visible"
         />
-        <DeviceTagWeiNing v-if="tagName==='deviceTagWeiNing'" :scan-visible="printVisible" :obj="printObj" :state-list="stateList" @scanOff="scanOff" />
+        <!-- <DeviceTagWeiNing v-if="tagName==='deviceTagWeiNing'" :scan-visible="printVisible" :obj="printObj" :state-list="stateList" @scanOff="scanOff" /> -->
+        <DeviceTagTemplateTwo v-if="tagName==='deviceTagTemplateTwo'" :tag-data="tagData" :scan-visible="printVisible" :obj="printObj" :state-list="stateList" @scanOff="scanOff" />
         <DeviceTag v-else :scan-visible="printVisible" :obj="printObj" :state-list="stateList" @scanOff="scanOff" />
         <el-dialog
             :close-on-click-modal="false"
@@ -392,11 +393,13 @@ import { queryequipmentCard, removeEquipmentCard, getequipmentCard, saveEquipmen
 import CustomDialog from '@/business/platform/data/templaterender/custom-dialog/dialog'
 import dayjs from 'dayjs'
 import DeviceTag from '@/views/system/jbdScan/goods/deviceTag.vue'
-import DeviceTagWeiNing from '@/views/system/jbdScan/goods/deviceTagWeiNing.vue'
+// import DeviceTagWeiNing from '@/views/system/jbdScan/goods/deviceTagWeiNing.vue'
+import DeviceTagTemplateTwo from '@/views/system/jbdScan/goods/deviceTagTemplateTwo'
 export default {
     components: {
         DeviceTag,
-        DeviceTagWeiNing,
+        // DeviceTagWeiNing,
+        DeviceTagTemplateTwo,
         DataTemplateFormrenderDialog,
         DeviceDialog,
         ibpsUserSelector,
@@ -662,15 +665,17 @@ export default {
             tabList: {},
             hasRole: true,
             typeList: { '检验系统': '检验系统', '通用设备': '通用设备', '软件': '软件', '信息系统': '信息系统' },
-            tagName: ''
+            tagName: '',
+            tagData: []
         }
     },
     async mounted () {
         const { stateList, hideSysDeviceNo, tabList, hasDeviceRole, typeList } = await getSetting('device') || {}
-        const { tagName } = await getSetting('deviceTag') || {}
+        const { tagName, tagData } = await getSetting('deviceTag') || {}
         if (tagName) {
             console.debug('tagName', tagName)
             this.tagName = tagName
+            this.tagData = tagData
         }
         if (hasDeviceRole) {
             console.debug('hasDeviceRole', hasDeviceRole)

src/views/system/jbdScan/goods/deviceTagTemplateTwo.vue

@@ -0,0 +1,378 @@
+<template>
+    <div class="bg">
+        <el-dialog
+            width="11cm"
+            height="10cm"
+            :modal-append-to-body="true"
+            :append-to-body="true"
+            title="设备标签"
+            :visible.sync="dialogVisible"
+            @close="close"
+        >
+            <!-- 表单是否显示 -->
+            <div style="height:500px">
+                <div id="box" ref="qrcode">
+                    <vue-easy-print ref="easyPrint" table-show :one-page-row="onePageRow">
+                        <div v-for="(item, index) in list" :key="index">
+                            <div class="All">
+                                <div class="mid">
+                                    <div class="titleFont">
+                                        {{ tagData.title }}
+                                    </div>
+                                    <div class="borderLine" :style="{width: tagData.width+'px',margin: '7px auto'}" />
+                                    <div class="tagBox" :style="{width: tagData.width+'px'}">
+                                        <div class="midSty">
+                                            <div v-for="(e,t) in tagData.columns" :key="'zi'+t" class="lh" style="margin: 5px 2px;">
+                                                <div :style="{width: ((tagData.width-15)/4).toFixed(2)+'px',textAlign: 'left'}">{{ e.label }}：</div>
+                                                <div v-if="e.field === 'deviceStatus'" :style="{width: ((tagData.width-15)/4).toFixed(2)+'px',textAlign: 'left'}" class="borderSty">
+                                                    <!-- <span :style="{'border':'1px solid '+ (item[e.field] === '合格' ? '#008000' : item[e.field] === '停用' ? '#ff0000' : item[e.field] === '限用' ? '#ffff00': '#909399'),'color': item[e.field] === '合格' ? '#008000 !important' : item[e.field] === '停用' ? '#ff0000 !important' : item[e.field] === '限用' ? '#ffff00 !important': '#909399 !important','padding': '0px 3px','border-radius': '2px'}">{{ item[e.field] }}</span> -->
+                                                    <span :style="{'background': (item[e.field] === '合格' ? '#008000' : item[e.field] === '停用' ? '#ff0000' : item[e.field] === '限用' ? '#ffff00': '#909399') + '!important','color': '#fff !important','padding': '0px 3px','border-radius': '2px','-webkit-print-color-adjust': 'exact'}">{{ item[e.field] }}</span>
+                                                </div>
+                                                <div v-else :style="{width: ((tagData.width-15)/4).toFixed(2)+'px',textAlign: 'left'}" class="borderSty">{{ item[e.field] || '/' }}</div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+
+                            </div>
+                        </div>
+                    </vue-easy-print>
+                </div>
+            </div>
+            <span slot="footer" class="dialog-footer">
+                <el-button @click="close">取 消</el-button>
+                <el-button type="primary" @click="printDemo">打印标签</el-button>
+            </span>
+        </el-dialog>
+
+    </div>
+</template>
+
+<script>
+import VueBarcode from 'vue-barcode'
+import vueEasyPrint from 'vue-easy-print'
+import curdPost from '@/business/platform/form/utils/custom/joinCURD.js'
+
+export default {
+    components: {
+        VueBarcode,
+        vueEasyPrint
+    },
+    props: {
+        obj: {
+            default: () => [],
+            type: Array
+        },
+        onePageRow: {
+            type: Number,
+            default: 3
+        },
+        blankLines: {
+            type: Boolean,
+            default: true
+        },
+        scanVisible: {
+            type: Boolean,
+            default: false
+        },
+        stateList: {
+            type: Object,
+            default: function () {
+                return { '停用': '停用', '报废': '报废', '合格': '合格' }
+            }
+        },
+        tagData: {
+            type: Object,
+            default: () => {}
+        }
+    },
+    data () {
+        const { userList = [] } = this.$store.getters || {}
+        return {
+            userList: userList,
+            dialogVisible: false,
+            value: '',
+            id: '',
+            list: [{
+                name: '设备名称',
+                serial: '设备编号',
+                model: '型号规格',
+                verifier: '核查人',
+                verificationDate: '核查日期',
+                // status: 1
+                prove: '测试证', // 证名
+                slogan: '标语', // 标语
+                deviceStatus: '设备状态',
+                range: '限用范围', // 限用范围
+                assetNum: '固定资产号',
+                deviceGrouping: '设备分组',
+                placeOfPlacement: '放置地点',
+                calibrationDate: '校准日期',
+                nextCalibrationDate: '下次校准日期',
+                commissioningDate: '启用日期',
+                personInCharge: '责任人'
+            }],
+            visible: true
+        }
+    },
+    watch: {
+        obj () {
+            this.getInit()
+        },
+        scanVisible: {
+            handler (val) {
+                this.dialogVisible = val
+            },
+            immediate: true
+        }
+    },
+    created () {
+        this.getInit()
+    },
+    methods: {
+        close () {
+            this.dialogVisible = false
+            this.$emit('scanOff')
+        },
+        printDemo () {
+            this.$refs.easyPrint.print()
+        },
+        getInit () {
+            var idStr = ''
+            this.obj.forEach(item => {
+                idStr += item.split(' ')[0] + ','
+            })
+            idStr = idStr.substring(0, idStr.length - 1)
+            this.getLook(idStr)
+        },
+        getLook (id) {
+            const sql = `select
+                    dj.*
+                FROM
+                    t_sbdj dj
+                WHERE
+                    find_in_set( dj.id_, '${id}' )`
+            // console.log(sql)
+            const posSql = `select * from t_sbwhgwpzb`
+            const roomSql = `select * from t_jjqfjb`
+            const personSql = `select id_,NAME_ from ibps_party_employee`
+            Promise.all([curdPost('sql', sql), curdPost('sql', personSql), curdPost('sql', posSql), curdPost('sql', roomSql)]).then(([res1, res2, res3, res4]) => {
+                const { data } = res1.variables || []
+                const personData = res2.variables.data || []
+                const posData = res3.variables.data || []
+                const roomData = res4.variables.data || []
+                console.log(data)
+                console.log(this.userList, 'dddddddd')
+                const list = []
+                data.forEach(item => {
+                    const midPos = item.wei_hu_fang_shi_ ? posData.find(t => t.id_ === item.wei_hu_fang_shi_).wei_hu_gang_wei_ : ''
+                    const midRoom = item.cun_fang_wei_zhi_ ? roomData.find(t => t.id_ === item.cun_fang_wei_zhi_).fang_jian_ming_ha : ''
+                    const midPer = item.guan_li_ren_ ? this.userList.find(t => t.userId === item.guan_li_ren_).userName : ''
+
+                    const verificationDateStr = item.bi_xu_she_shi_ ? item.bi_xu_she_shi_ : ''
+                    const o = {
+                        prove: this.switchProve(item.she_bei_zhuang_ta),
+                        slogan: this.switchSlogan(item.she_bei_zhuang_ta),
+                        deviceStatus: item.she_bei_zhuang_ta,
+                        range: this.judgementVal(item.cai_gou_he_tong_) ? item.cai_gou_he_tong_ : '',
+                        assetNum: item.zi_chan_bian_hao_,
+
+                        name: item.she_bei_ming_cheng_,
+                        serial: item.she_bei_shi_bie_h,
+                        model: item.gui_ge_xing_hao_,
+                        verifier: this.findPersonName(item.bi_xu_de_huan_jin, personData),
+                        verificationDate: verificationDateStr.substring(0, 10),
+                        deviceGrouping: midPos,
+                        placeOfPlacement: midRoom,
+                        calibrationDate: item.yi_xiao_ri_qi_,
+                        nextCalibrationDate: item.xiao_zhun_you_xia,
+                        commissioningDate: item.qi_yong_ri_qi_,
+                        personInCharge: midPer
+                    }
+                    list.push(o)
+                    console.log(o)
+                })
+                this.list = list
+            })
+        },
+        judgementVal (value) {
+            return value != null && value != undefined
+        },
+        switchProve (status) {
+            return `${this.stateList[status] || '测试'}证`
+        },
+        switchSlogan (status) {
+            switch (status) {
+                case '合格':
+                    return 'PASS'
+                case '停用':
+                    return 'STOP'
+                case '限用':
+                    return 'RESTRICT'
+                case '报废':
+                    return 'SCRAP'
+                default:
+                    return 'TEST'
+            }
+        },
+        findPersonName (id, personData) {
+            if (!personData) { return '核查人列表为空' }
+            if (!id) { return '' }
+            return personData.find(i => i.id_ === id).NAME_
+        }
+    }
+}
+</script>
+
+<style lang="scss" scoped>
+.All {
+    text-align: center;
+    margin: 10px 0px;
+}
+// .mid{
+//     display: flex;
+//     justify-content: center;
+//     flex-wrap: wrap;
+// }
+.bg {
+    // height: auto;
+}
+
+.tagBox {
+    width: 330px; // 300  240 231
+    position: relative;
+    // border: 1px solid #000000;
+    border-top: 0px;
+    display: inline-block;
+    background-color: #fff;
+}
+.midSty{
+    display: flex;
+    justify-items: center;
+    align-items: center;
+    flex-wrap: wrap;
+}
+.ewm {
+    margin-left: 10px;
+}
+.qianZhi {
+    white-space: nowrap
+}
+
+.la {
+    font-size: 12px; //16
+    display: flex;
+    align-items: center;
+    padding: 1px;
+    width: 50%;
+}
+
+.zuoJuZhong {
+    text-align: left;
+}
+.titleFont{
+    font-size: 16px;
+    font-weight: 600;
+    letter-spacing: 1px;
+}
+.borderLine{
+    height: 1px;
+    border-top: 2px solid #000;
+    border-bottom: 1px solid #000;
+}
+.lh {
+    display: flex;
+    align-items: center;
+    padding: 1px;
+    font-size: 12px; //16
+    display: flex;
+    align-items: center;
+    margin: 0 2px;
+    // border-bottom: 1px solid #000000;
+    .borderSty{
+        border-bottom: 1px solid #000;
+        text-align: left;
+    }
+    div{
+        width: 60px;
+    }
+}
+.marginLeft{
+    margin-left: 5px;
+}
+
+.container {
+    width: 330px;
+    height: 50px;
+    position: relative;
+    border: 1px solid #000000;
+}
+
+.triangle,
+.triangleYellow,
+.triangleRed,
+.triangleGray {
+    width: 0;
+    height: 0;
+    position: relative;
+    border-right: 125px solid transparent;
+    border-left: 125px solid transparent;
+    border-bottom: 125px solid transparent;
+    text-align: center;
+}
+
+.triangle {
+    border-top: 50px solid #008000;
+}
+
+.triangleYellow {
+    border-top: 50px solid #ffff00;
+}
+
+.triangleRed {
+    border-top: 50px solid #ff0000;
+}
+.triangleGray {
+    border-top: 50px solid #909399;
+}
+.triangle>.label,
+.triangleYellow>.label,
+.triangleRed>.label,
+.triangleGray>.label {
+    width: 100px;
+    position: relative;
+    top: -45px;
+    left: -50px;
+    font-size: 20px;
+    font-weight: bold;
+    color: #000000;
+}
+
+.top-triangle {
+    border-left: 100px solid transparent;
+    border-right: 100px solid transparent;
+    top: 0;
+    left: 0;
+}
+
+.left-triangle {
+    /* border-top: 100px solid transparent; */
+    border-right: 100px solid black;
+    border-bottom: 50px solid rgb(217, 217, 233);
+    top: 0;
+    left: 0;
+}
+
+.right-triangle {
+    border-left: 100px solid black;//red
+    border-bottom: 50px solid rgb(217, 217, 233);
+    top: 0;
+    left: 100px;
+}
+
+.one {
+    justify-content: center;
+    align-items: center;
+    display: flex;
+}
+</style>

src/views/system/jbdScan/scan.vue

@@ -16,7 +16,7 @@ import guanshenzhuangtai from './goods/guanshenzhuangtai'
 import bwTag from './goods/bwTag.vue'
 import fzrkTag from './goods/fzrkTag.vue'
 import kucuntag from './goods/kucuntag.vue'
-import deviceTagWeiNing from './goods/deviceTagWeiNing.vue'
+import deviceTagTemplateTwo from './goods/deviceTagTemplateTwo'
 
 export default {
     components: {
@@ -29,7 +29,7 @@ export default {
         bwTag,
         fzrkTag,
         kucuntag,
-        deviceTagWeiNing
+        deviceTagTemplateTwo
     },
     props: {
         currentScan: String,