开发设备校准标签以及设备档案卡标签

package-lock.json

@@ -7328,7 +7328,7 @@
     },
     "node_modules/crypto-js": {
       "version": "4.1.1",
-      "resolved": "https://registry.npmjs.org/crypto-js/-/crypto-js-4.1.1.tgz",
+      "resolved": "https://registry.npmmirror.com/crypto-js/-/crypto-js-4.1.1.tgz",
       "integrity": "sha512-o2JlM7ydqd3Qk9CA0L4NL6mTzU2sdx96a+oOfPu8Mkl/PK51vSyoi8/rQ8NknZtk44vq15lmhAj9CIAGwgeWKw=="
     },
     "node_modules/css": {
@@ -28853,7 +28853,7 @@
     },
     "crypto-js": {
       "version": "4.1.1",
-      "resolved": "https://registry.npmjs.org/crypto-js/-/crypto-js-4.1.1.tgz",
+      "resolved": "https://registry.npmmirror.com/crypto-js/-/crypto-js-4.1.1.tgz",
       "integrity": "sha512-o2JlM7ydqd3Qk9CA0L4NL6mTzU2sdx96a+oOfPu8Mkl/PK51vSyoi8/rQ8NknZtk44vq15lmhAj9CIAGwgeWKw=="
     },
     "css": {

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

@@ -1,88 +1,79 @@
 <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>设备名称：</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.specifications }}</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>细胞质量检测实验室</div>
-                    <!-- <div>{{ item1.condition }}</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=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 ref="qrcode" id="box">
+                    <vue-easy-print tableShow ref="easyPrint" :onePageRow="onePageRow">
+                        <div v-for="(item, index1) in list" :key="index">
+                            <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>核查人：</div>
+                                            <div>{{ item.verifier }}</div>
+                                        </div>
+                                        <div class="lh" :style="item.range !== '' ? 'border-bottom: 1px solid #000000;' : 'border-bottom: 0px;'">
+                                            <div>核查日期：</div>
+                                            <div>{{ item.verificationDate }}</div>
+                                        </div>
+                                        <!-- <div class="lh">
+                                            <div class="la">
+                                                <div>核查人：</div>
+                                                <div>{{ item.verifier }}</div>
+                                            </div>
+                                            <div class="la" style="border-left: 1px solid #000000;">
+                                                <div>核查日期：</div>
+                                                <div>{{ item.verificationDate }}</div>
+                                            </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>
@@ -91,178 +82,260 @@ 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: '设备名称',
+                serial: '设备编号',
+                model: '型号规格',
+                verifier:'核查人',
+                verificationDate:'核查日期',
+                // status: 1
+                prove: '测试证', // 证名
+                slogan: '标语', // 标语
+                deviceStatus: '设备状态',
+                range: '限用范围' // 限用范围
+            }],
+            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,
-        status:1,
-        specifications:1
-      }],
-      visible: true,
-    }
-  },
-  watch: {
-    obj() {
-      this.getInit()
-      // console.log(this.obj)
-    }
-  },
-  created() {
-    this.getInit()
-  },
-  methods: {
-    printDemo() {
-      this.$refs.easyPrint.print()
+    watch: {
+        obj() {
+            this.getInit()
+        }
     },
-    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 * from t_sbdj where find_in_set(id_,'${id}')`
-      // console.log(sql)
-      curdPost("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_):'',
-              status:item.she_bei_zhuang_ta,
-              specifications:item.gui_ge_xing_hao_
+    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) {
+            let sql = `select
+                    dj.she_bei_ming_cheng_,
+                    dj.she_bei_shi_bie_h,
+                    dj.gui_ge_xing_hao_,
+                    dj.she_bei_zhuang_ta,
+                    dj.bi_xu_de_huan_jin,
+                    dj.bi_xu_she_shi_,
+                    dj.cai_gou_he_tong_
+                FROM
+                    t_sbdj dj
+                WHERE
+                    find_in_set( dj.id_, '${id}' )`
+            // console.log(sql)
+            let personSql = `select id_,NAME_ from ibps_party_employee`
+            Promise.all([curdPost("sql", sql),curdPost("sql", personSql)]).then(([res1,res2])=>{
+                const { data } = res1.variables || []
+                const personData = res2.variables.data || []
+                // console.log(data)
+                // console.log(personData)
+                let list = []
+                data.forEach(item => {
+                    let o = {
+                        prove: this.switchProve(item.she_bei_zhuang_ta),
+                        slogan: this.switchSlogan(item.she_bei_zhuang_ta),
+                        deviceStatus: item.she_bei_zhuang_ta,
+                        range: item.cai_gou_he_tong_,
+
+                        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:item.bi_xu_she_shi_
+                    }
+                    list.push(o)
+                })
+                this.list = list
+
+            })
+        },
+        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"
+            }
+        },
+        findPersonName(id,personData) {
+            if(!personData)
+                return '核查人列表为空'
+            if(!id)
+                return ''
+            return personData.find(i => i.id_ === id).NAME_
+        }
     }
-  }
 }
 </script>
 
 <style lang="scss" scoped>
-.bg {
-  // height: auto;
+.All {
+    text-align: center;
+    margin: 10px 0px;
 }
-.All{
-  text-align: center
+
+.bg {
+    // height: auto;
 }
-// .tagBox {
-//   width: 283px;   // 300  240
-//   height: 283px;  // 180  150  94
-//   position: relative;
-//   border: 2px solid #000000;
-//   padding: 5px;
-//   display: inline-block;
-//   // justify-content: space-around;
-//   // flex-direction: column;
-//   margin: 10px 5px;
-//   border-radius: 4px;
-//   background-color: #fff;
-// }
 
-.tagBox{
-  width: 231px; //300
-//   height: 240px;
-  position: relative;
-  border: 1px solid #000;
-//   font-size: 14px;
-  padding: 2px;
-  display: inline-block;
-  margin: 10px auto 10px;
-  border-radius: 4px;
+.tagBox {
+    width: 250px; // 300  240 231
+    position: relative;
+    border: 1px solid #000000;
+    border-top: 0px;
+    display: inline-block;
+    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;
+.qianZhi {
+    white-space: nowrap
 }
-*/
 
 .la {
-  display: flex;
-  align-items: center;
+    font-size: 12px; //16
+    display: flex;
+    align-items: center;
+    padding: 1px;
+    width: 50%;
+}
+
+.zuoJuZhong {
+    text-align: left;
 }
 
 .lh {
-  // line-height: auto;
-  font-size: 12px;  //16
-  display: flex;
-  align-items: center;
-  padding: 1px;
+    display: flex;
+    align-items: center;
+    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;
+}
+
+.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>

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

@@ -1,94 +1,77 @@
 <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 ref="qrcode" id="box">
+                    <vue-easy-print tableShow ref="easyPrint" :onePageRow="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>
@@ -97,148 +80,183 @@ 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)
-      curdPost("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) {
+            let 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)
+                let list = []
+                data.forEach(item => {
+                    let o = {
+                        prove: this.switchProve(item.she_bei_zhuang_ta),
+                        slogan: this.switchSlogan(item.she_bei_zhuang_ta),
+                        deviceStatus: item.she_bei_zhuang_ta,
+                        range: 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
+            })
+        },
+        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) {
+            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;
+        }
     }
-  }
 }
 </script>
 
 <style lang="scss" scoped>
-
-.All{
-  text-align: center
+.All {
+    text-align: center;
+    margin: 10px 0px;
 }
+
 .bg {
-  // height: auto;
+    // height: auto;
 }
 
 .tagBox {
-  width: 231px;   // 300  240
-  // height: 283px;  // 180  150  94
-  position: relative;
-  border: 1px solid #000000;
-  padding: 2px;
-  display: inline-block;
-  // justify-content: space-around;
-  // flex-direction: column;
-  margin: 10px 5px;
-  border-radius: 4px;
-  background-color: #fff;
+    width: 250px; // 300  240 231
+    // height: 283px;  // 180  150  94
+    position: relative;
+    border: 1px solid #000000;
+    border-top: 0px;
+    //   padding: 2px;
+    display: inline-block;
+    // justify-content: space-around;
+    // flex-direction: column;
+    //   margin: 10px 5px;
+    //   border-radius: 4px;
+    background-color: #fff;
 }
-.ewm{
-  margin-left: 10px;
+
+.ewm {
+    margin-left: 10px;
 }
+
 /*
 .tagBox {
   width: 177.5px;   // 300  240
@@ -254,23 +272,104 @@ export default {
   background-color: #fff;
 }
 */
-.qianZhi{
+.qianZhi {
     white-space: nowrap
 }
+
 .la {
-  display: flex;
-  align-items: center;
+    font-size: 12px; //16
+    display: flex;
+    align-items: center;
+    padding: 1px;
+    width: 50%;
 }
-.zuoJuZhong{
+
+.zuoJuZhong {
     text-align: left;
 }
 
 .lh {
-  // line-height: auto;
-  font-size: 12px;  //16
-  display: flex;
-  align-items: center;
-  padding: 1px;
+    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>