设备检定/校准记录列表打印校准标签

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

@@ -1,276 +1,385 @@
 <template>
-  <div class="bg">
-    <el-dialog 
-      width="11cm"
-      height="10cm" 
-       :modal-append-to-body='true' :append-to-body="true" title="设备检定校准标签" :visible.sync="scanVisible">
-      <!-- 表单是否显示 -->
-      <div style="height:500px">
-          <div ref="qrcode" id="box">
-          <vue-easy-print tableShow ref="easyPrint"
-            :onePageRow="onePageRow"
-          >
-            <div v-for="(item1, index1) in list" :key="index1" >
-              <div v-for="(item2, index2) in parseInt(item1.num)" :key="index2" 
-              
-              ><!-- style="page-break-after:always" -->
-               <div class="All">
-                <div class="tagBox">
-                  <div class="lh">
-                    <div class="qianZhi">设备名称：</div>
-                    <div>{{ item1.name }}</div>
-                  </div>
-                  <div class="la">
-                    <div class="lh">
-                      <div>设备编号：</div>
-                      <div>{{ item1.serial }}</div>
-                    </div>
-                  </div>
-                  <!-- <div class="lh">
-                    <div>存放地点：</div>
-                    <div>{{ item1.local }}</div>
-                  </div> -->
-                  <!-- <div class="lh">
-                    <div>启用日期：</div>
-                    <div>{{ item1.time }}</div>
-                  </div> -->
-
-                  <!-- <div class="lh">
-                    <div>资产原值：</div>
-                    <div>{{ item1.money }}</div>
-                  </div> -->
-                  <!-- <div class="lh">
-                    <div>使用科室：</div>
-                    <div>{{ item1.condition }}</div>
-                  </div> -->
-                  <div class="lh">
-                    <div class="qianZhi">校准机构：</div>
-                    <div class="zuoJuZhong">{{ item1.jiGou }}</div>
-                  </div>
-                  <div class="lh">
-                    <div>校准时间：</div>
-                    <div>{{ item1.jiaoZhunTime }}</div>
-                  </div>
-                  <div class="lh">
-                    <div class="qianZhi zuoJuZhong" style="width: 70px;">修正值&nbsp;&nbsp;&nbsp;：</div>
-                    <div class="zuoJuZhong">{{ item1.yinZi }}</div>
-                  </div>
-
-                  <!-- <div class="lh">
-                    <div>固定资产编号：</div>
-                    <div>{{ item1.assets }}</div>
-                  </div> -->
-                  <!-- <div class="lh">
-                    <div>设备状态：</div>
-                    <div>{{ item1.status }}</div>
-                  </div> -->
-                 
-                  <!-- <div class="ewm">
-                    <vue-barcode :value="item1.serial" :width=1.5 :height=25 :fontSize=15 :margin="0" :displayValue="false"></vue-barcode>
-                  </div> -->
-
-                  <!-- <div
-                    style="page-break-after: always; display: block !important;height: 40px"
-                  ></div> -->
-
+    <div class="bg">
+        <el-dialog
+            width="11cm"
+            height="10cm"
+            :modal-append-to-body="true"
+            :append-to-body="true"
+            title="设备检定校准标签"
+            :visible.sync="scanVisible"
+        >
+            <!-- 表单是否显示 -->
+            <div style="height:500px">
+                <div id="box" ref="qrcode">
+                    <vue-easy-print ref="easyPrint" table-show :one-page-row="onePageRow">
+                        <div v-for="(item, index1) in list" :key="index1">
+                            <!-- style="page-break-after:always" -->
+                            <div class="All">
+                                <div>
+                                    <div class="one">
+                                        <div class="container">
+                                            <div
+                                                :class="item.deviceStatus === '合格' ? 'triangle' : item.deviceStatus === '停用' ? 'triangleRed' : 'triangleYellow'"
+                                            >
+                                                <div class="label" style="border: 0;">{{ item.prove }}</div>
+                                            </div>
+                                            <div style="position: absolute;top: 25px;width: 100%;">
+                                                <div
+                                                    style="display: flex;justify-content: space-between;font-size: 14px;font-weight: 800;margin: 0 8px;"
+                                                >
+                                                    <div>{{ item.slogan }}</div>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                    <div class="tagBox">
+                                        <div class="lh">
+                                            <div class="qianZhi">设备名称：</div>
+                                            <div>{{ item.name }}</div>
+                                        </div>
+                                        <div class="lh">
+                                            <div>设备型号：</div>
+                                            <div>{{ item.model }}</div>
+                                        </div>
+                                        <div class="lh">
+                                            <div>设备编号：</div>
+                                            <div>{{ item.serial }}</div>
+                                        </div>
+                                        <div class="lh">
+                                            <div class="la">
+                                                <div>校准日期：</div>
+                                                <div>{{ item.jiaoZhunTime }}</div>
+                                            </div>
+                                            <div class="la" style="border-left: 1px solid #000000;">
+                                                <div>有效期至：</div>
+                                                <div>{{ item.validTo }}</div>
+                                            </div>
+                                        </div>
+                                        <div
+                                            class="lh"
+                                            :style="item.range !== '' ? 'border-bottom: 1px solid #000000;' : 'border-bottom: 0px;'"
+                                        >
+                                            <div class="qianZhi">校准单位：</div>
+                                            <div class="zuoJuZhong">{{ item.unit }}</div>
+                                        </div>
+                                        <!-- <div class="lh" style="border-bottom: 0px;" v-if="item.range !== ''">
+                                          <div class="qianZhi">限用范围：</div>
+                                          <div class="zuoJuZhong">{{ item.range }}</div>
+                                      </div> -->
+                                    </div>
+                                </div>
 
+                            </div>
+                        </div>
+                    </vue-easy-print>
                 </div>
-               </div>
-              </div>
             </div>
-          </vue-easy-print>
-        </div>
-      </div>
-      <span slot="footer" class="dialog-footer">
-        <!-- <el-button @click="dialogVisible = false">取 消</el-button> -->
-        <el-button type="primary" @click="printDemo">打印标签</el-button>
-      </span>
-    </el-dialog>
+            <span slot="footer" class="dialog-footer">
+                <el-button @click="scanVisible = false">取 消</el-button>
+                <el-button type="primary" @click="printDemo">打印标签</el-button>
+            </span>
+        </el-dialog>
 
-
-  </div>
+    </div>
 </template>
 
 <script>
-import VueBarcode from 'vue-barcode';
-import vueEasyPrint from "vue-easy-print";
-import repostCurd from '@/business/platform/form/utils/custom/joinCURD.js';
+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
+    components: {
+        VueBarcode,
+        vueEasyPrint
     },
-    onePageRow:{
-      type:Number,
-      default:3
+    props: {
+        obj: {
+            default: [],
+            type: Array
+        },
+        onePageRow: {
+            type: Number,
+            default: 3
+        },
+        blankLines: {
+            type: Boolean,
+            default: true
+        },
+        scanVisible: {
+            type: Boolean,
+            default: false
+        }
     },
-    blankLines:{
-      type:Boolean,
-      default:true
+    data () {
+        return {
+            value: '',
+            id: '',
+            list: [{
+                name: 1,
+                serial: 1,
+                validTo: 1,
+                model: 1,
+                unit: 1,
+                jiaoZhunTime: 1,
+                // status: 1
+                prove: 1, // 证名
+                slogan: 1, // 标语
+                deviceStatus: 1,
+                range: 1 // 限用范围
+            }],
+            visible: true
+        }
     },
-    scanVisible:{
-      type:Boolean,
-      default: false
-    }
-  },
-  data() {
-    return {
-      value: '',
-      id: '',
-      list: [{
-        name: 1,
-        serial: 1,
-        // assets: 1,
-        num: 1,
-        // local:1,
-        // condition: 1,
-        // money:1,
-        // time:1,
-        yinZi:1,
-        jiGou:1,
-        jiaoZhunTime:1,
-        // status: 1
-      }],
-      visible: true,
-    }
-  },
-  watch: {
-    obj() {
-      this.getInit()
-      // console.log(this.obj)
-    }
-  },
-  created() {
-    this.getInit()
-  },
-  methods: {
-    printDemo() {
-      this.$refs.easyPrint.print()
+    watch: {
+        obj () {
+            this.getInit()
+            // console.log(this.obj)
+        }
     },
-    getInit() {
-      var idStr = '';
-      this.obj.forEach(item=>{
-        idStr += item.split(" ")[0] + ','
-      })
-      idStr = idStr.substring(0,idStr.length-1);
-      this.getLook(idStr)
+    created () {
+        this.getInit()
     },
-    getLook(id) {
-      let sql = `select dj.she_bei_ming_cheng_,dj.she_bei_shi_bie_h,dj.zi_chan_bian_hao_,
-        dj.cun_fang_di_dian_,dj.shi_yong_ke_shi_,dj.zi_chan_yuan_zhi_,  dj.qi_yong_ri_qi_,dj.she_bei_zhuang_ta,
-        zx.xiu_zheng_zhi_,zx.xiao_zhun_ri_qi_,zx.jian_ding_xiao_zh
-        from t_sbdj dj right JOIN t_sbjdxzzx zx on zx.yi_qi_bian_hao_ = dj.id_ where find_in_set(zx.parent_id_,'${id}')`
-      // console.log(sql)
-      repostCurd("sql", sql).then(res => {
-          const data = res.variables.data
-          // console.log(data)
-          let list = []
-          data.forEach(item => {
-            let num = 1
-            let o = {
-              name: item.she_bei_ming_cheng_,
-              serial: item.she_bei_shi_bie_h,
-              // assets: item.zi_chan_bian_hao_,
-              num: num,
-              // local:item.cun_fang_di_dian_,
-              // condition: item.shi_yong_ke_shi_,
-              // money:item.zi_chan_yuan_zhi_,
-              // time:item.qi_yong_ri_qi_!=null?this.getTime(item.qi_yong_ri_qi_):'',
-              yinZi:item.xiu_zheng_zhi_,
-              jiGou:item.jian_ding_xiao_zh,
-              jiaoZhunTime:item.xiao_zhun_ri_qi_,
-              // status:item.she_bei_zhuang_ta,
+    methods: {
+        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.she_bei_ming_cheng_,
+                  dj.she_bei_shi_bie_h,
+                  dj.gui_ge_xing_hao_,
+                  dj.she_bei_zhuang_ta,
+                  dj.cai_gou_he_tong_, 
+                  zx.shi_shi_ri_qi_,
+                  zx.chu_chang_bian_ha,
+                  zx.jian_ding_dan_wei
+              FROM
+                  t_sbdj dj
+                  RIGHT JOIN t_mjsbjdxzjhzb zx ON zx.bian_hao_zhong_we = dj.she_bei_shi_bie_h 
+              WHERE
+                  find_in_set( zx.id_, '${id}' )`
+            // console.log(sql)
+            curdPost('sql', sql).then(res => {
+                const { data } = res.variables || []
+                // console.log(data)
+                const list = []
+                data.forEach(item => {
+                    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_ : '',
+
+                        name: item.she_bei_ming_cheng_,
+                        serial: item.she_bei_shi_bie_h,
+                        validTo: item.chu_chang_bian_ha,
+                        model: item.gui_ge_xing_hao_,
+                        unit: item.jian_ding_dan_wei,
+                        jiaoZhunTime: item.shi_shi_ri_qi_
+                    }
+                    list.push(o)
+                })
+
+                this.list = list
+            })
+        },
+        judgementVal (value) {
+            return value != null && value != undefined
+        },
+        switchProve (status) {
+            switch (status) {
+                case '合格':
+                    return '合格证'
+                case '停用':
+                    return '停用证'
+                case '限用':
+                    return '限用证'
+                default:
+                    return '测试证'
             }
-            list.push(o)
-          })
-          
-          this.list = list
-      })
-    },
-    getTime(second) {
-      let date =new Date(second);
-      let year = date.getFullYear();
-      let month = ''
-      let day = ''
-      if((date.getMonth()+1)<=9){
-        month = "0"+ (date.getMonth()+1)
-      }else{
-        month = date.getMonth()+1
-      }
-      if(date.getDate()<=9){
-        day =  "0"+date.getDate();
-      }else {
-        day =  date.getDate();
-      }
-        return year + "-"+month+"-"+day;
+        },
+        switchSlogan (status) {
+            switch (status) {
+                case '合格':
+                    return 'PASS'
+                case '停用':
+                    return 'STOP'
+                case '限用':
+                    return 'RESTRICT'
+                default:
+                    return 'TEST'
+            }
+        },
+        getTime (second) {
+            const date = new Date(second)
+            const year = date.getFullYear()
+            let month = ''
+            let day = ''
+            if ((date.getMonth() + 1) <= 9) {
+                month = '0' + (date.getMonth() + 1)
+            } else {
+                month = date.getMonth() + 1
+            }
+            if (date.getDate() <= 9) {
+                day = '0' + date.getDate()
+            } else {
+                day = date.getDate()
+            }
+            return year + '-' + month + '-' + day
+        }
     }
-  }
 }
 </script>
 
 <style lang="scss" scoped>
-
-.All{
-  text-align: center
+.All {
+  text-align: center;
+  margin: 10px 0px;
 }
+
 .bg {
   // height: auto;
 }
 
 .tagBox {
-  width: 231px;   // 300  240
+  width: 250px; // 300  240 231
   // height: 283px;  // 180  150  94
   position: relative;
   border: 1px solid #000000;
-  padding: 2px;
+  border-top: 0px;
+  //   padding: 2px;
   display: inline-block;
   // justify-content: space-around;
   // flex-direction: column;
-  margin: 10px 5px;
-  border-radius: 4px;
+  //   margin: 10px 5px;
+  //   border-radius: 4px;
   background-color: #fff;
 }
-.ewm{
+
+.ewm {
   margin-left: 10px;
 }
+
 /*
 .tagBox {
-  width: 177.5px;   // 300  240
-  height: 106.5px;  // 180  150
-  position: relative;
-  border: 1px solid #000000;
-  padding: 20px;
-  display: flex;
-  justify-content: space-around;
-  flex-direction: column;
-  margin: 20px auto;
-  border-radius: 15px;
-  background-color: #fff;
+width: 177.5px;   // 300  240
+height: 106.5px;  // 180  150
+position: relative;
+border: 1px solid #000000;
+padding: 20px;
+display: flex;
+justify-content: space-around;
+flex-direction: column;
+margin: 20px auto;
+border-radius: 15px;
+background-color: #fff;
 }
 */
-.qianZhi{
-    white-space: nowrap
+.qianZhi {
+  white-space: nowrap
 }
+
 .la {
+  font-size: 12px; //16
   display: flex;
   align-items: center;
+  padding: 1px;
+  width: 50%;
 }
-.zuoJuZhong{
-    text-align: left;
+
+.zuoJuZhong {
+  text-align: left;
 }
 
 .lh {
-  // line-height: auto;
-  font-size: 12px;  //16
   display: flex;
   align-items: center;
+  //   line-height: auto;
   padding: 1px;
+  font-size: 12px; //16
+  display: flex;
+  align-items: center;
+  border-bottom: 1px solid #000000;
+}
+
+.container {
+  width: 250px;
+  height: 50px;
+  position: relative;
+  border: 1px solid #000000;
+}
+
+.triangle,
+.triangleYellow,
+.triangleRed {
+  width: 0;
+  height: 0;
+  position: relative;
+  border-right: 125px solid transparent;
+  border-left: 125px solid transparent;
+  border-bottom: 125px solid transparent;
+  text-align: center;
+  //   float: left;
+}
+
+.triangle {
+  border-top: 50px solid #008000;
+}
+
+.triangleYellow {
+  border-top: 50px solid #ffff00;
+}
 
+.triangleRed {
+  border-top: 50px solid #ff0000;
+}
+
+.triangle>.label,
+.triangleYellow>.label,
+.triangleRed>.label {
+  width: 100px;
+  position: relative;
+  top: -45px;
+  left: -50px;
+  font-size: 24px;
+  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>