mts / MTS-UI · Files

<template>
  <a-modal
    :width="modalWidth"
    :style="modalStyle"
    :visible="visible"
    :maskClosable="false"
    @cancel="handleCancel">
    <template slot="footer">
      <a-button @click="handleCancel">关闭</a-button>
      <a-button @click="printContent">打印</a-button>
    </template>

    <div class="content" id="dyContent4">
      <div style="width: 100%;text-align: center;"><h1 style="font-size:55px">每月起重机械安全检查记录</h1></div>
      <table>
        <tr>
          <th style="width: 10%;">序号</th>
          <th style="width: 15%;">检查因素</th>
          <th style="width: 20%;">检查项目</th>
          <th style="width: 40%;">检查内容</th>
          <th style="width: 10%;">结果</th>
        </tr>
        <tr v-for="(item, index) in people" :key="index">
          <td class="font">{{ index + 1 }}</td>
          <td class="font">{{ item.checkFactors }}</td>
          <td class="font">{{ item.inspectionItems }}</td>
          <td class="font">{{ item.inspectionContent }}</td>

          <td :class="'text-center'">
          <th v-if="item.ischeck==1">✓</th>
          <th v-if="item.ischeck==0">✕</th>
          </td>

        </tr>

        <tr>
          <td colspan="5">
            检查情况记录：
            <br/>
            <textarea style="width: 98%;" name="" id="" cols="30" rows="10" v-model="record" disabled> </textarea>
          </td>
        </tr>
        <tr>
          <td colspan="3">设备编号:
            <j-dict-select-tag style="width: 60%" v-model="cloum20" title="编号" dictCode="device_number"
                               placeholder="请选择设备编号" disabled/>
          </td>
          <td colspan="3">特种设备安全总监:
            <a-input v-model="recorder" style="width: 40%" disabled></a-input>
          </td>
        </tr>
        <tr>
          <td colspan="6">检查日期：
            <a-input v-model="recordDate" style="width: 40%" disabled></a-input>
          </td>
        </tr>
        <tr style="height: 5px;">
          <td colspan="5" style="text-align: center;">
            <!--            <button style="width: 20rem;height: 3rem;" @click="submit">提交</button>-->
          </td>
        </tr>
      </table>
    </div>


  </a-modal>
</template>


<script>


export default {
  data() {
    return {
      visible: false,
      querySource: {},
      loading: false,
      drawno: '',
      modalWidth: '90%',
      modalStyle: {'top': '20px'},
      record: '',
      recorder: '',
      recordDate: '',
      dynamicModels: {},
      people: [
        {
          checkFactors: '人的因素',
          inspectionItems: '人员配置',
          inspectionContent: `1)	应按规定配置起重机安全总监、起重机械安全员、安全责任人和专（兼）安全管理人员；
                                        2)	特种设备总量50台以上（含50台，不含气瓶）的使用单位应逐台落实安全责任人；
                                        3)	特种设备总量20台以上（含20台，不含气瓶）的使用单位应配备专职安全管理员；
                                        4)	使用单位应根据本单位特种设备数量、特性配备相应持证的特种作业人员，并且在使用特种设备时应当每班至少有一名持证的作业人员在岗。
                                        5)	设置安全管理机构的使用单位特种设备安全管理负责人应当取得特种设备安全管理人员资格证书且证书在有效期内。
                                        `,
          ischeck: 1,
        },
        {
          checkFactors: '人的因素',
          inspectionItems: '持证上岗',
          inspectionContent: `特种设备安全管理人员、作业人员应持证上岗，且证书在有效期内。
                                        `,
          ischeck: 1,
        },
        {
          checkFactors: '人的因素',
          inspectionItems: '人员培训',
          inspectionContent: `应按规定定期开展安全培训`,
          ischeck: 1,
        },
        {
          checkFactors: '设备因素',
          inspectionItems: '设备来源',
          inspectionContent: `起重机械应由具有资质的生产单位生产，应具有产品质量证明；安装、改造、重大修理应具有监督或首次检验证书。`,
          ischeck: 1,
        },
        {
          checkFactors: '设备因素',
          inspectionItems: '抗风防滑装置',
          inspectionContent: `1)	按照规定设置抗风防滑装置，并且符合GB/T6067.1-2010《起重机械安全规程：总则》中9.4.1的要求。
2)	进行动作试验，检测钳口夹紧情况、锚定的可靠性以及电气保护装置的工作状况，其顶轨器、自锁式防滑动装置功能是否动作。
3)	其零件无缺损

                                        `,
          ischeck: 1,
        },
        {
          checkFactors: '管理因素',
          inspectionItems: '设备登记',
          inspectionContent: `在投入使用前或投入使用后30日内，向特种设备所在地的直辖市或者设区的市的特种设备安全监督管理部门申请办理使用登记。
将“特种设备使用标志”或者使用单位盖章或者签名确认的复印件悬挂或者固定在特种设备显著位置（当无法悬挂或者固定时，可以放在使用单位的安全技术档案中，同时将使用登记证编号标准在特种设备产品铭牌上或者其他可见部位）。           `,
          ischeck: 1,
        },
        {
          checkFactors: '管理因素',
          inspectionItems: '特种设备标志',
          inspectionContent: `1)\t特种设备标志应至于或者附着于特种设备的显著位置。
2)\t应设置特种设备维修、停用、报废等使用标志。
3)\t在特种设备使用、维修等场所应设置安全标志，安全标志按GB2894《安全标志及其使用导则》。
。           `,
          ischeck: 1,
        },
        {
          checkFactors: '管理因素',
          inspectionItems: '安全管理机构',
          inspectionContent: `使用特种设备总量大于50台（含50台，不含气瓶）的使用单位应设置安全管理机构。`,
          ischeck: 1,
        },
        {
          checkFactors: '管理因素',
          inspectionItems: '安全管理制度',
          inspectionContent: `应建立健全特种设备使用安全管理制度。`,
          ischeck: 1,
        },
        {
          checkFactors: '管理因素',
          inspectionItems: '安全技术档案',
          inspectionContent: `1)\t按台（套）建立安全技术档案；
2)\t档案文件内容和保存期限应满足相关规定；
3)\t按规定在设备使用地保存相关安全技术档案原件或复印件。
。`,
          ischeck: 1,
        },
        {
          checkFactors: '管理因素',
          inspectionItems: '应急预案与演练',
          inspectionContent: ` 1)\t建立特种设备事故应急专项预案。
2)\t按规定定期开展应急救援预案演练并保存应急救援预案演练记录（含文字、图片、视频等）。
`,
          ischeck: 1,
        },
        {
          checkFactors: '环境因素',
          inspectionItems: '安全距离及相关尺寸',
          inspectionContent: `起重机械运动部分与建筑物、设施、输电线的安全距离符合GB/T 6067.1-2010 《起重机械安全规程：总则》中10.2和15.3的要求。`,
          ischeck: 1,
        },
        {
          checkFactors: '环境因素',
          inspectionItems: '起重量或者起重力矩标识',
          inspectionContent: `起重机械明显部位标注的额定起重量标志清晰、符合规定。`,
          ischeck: 1,
        },
        {
          checkFactors: '环境因素',
          inspectionItems: '使用条件',
          inspectionContent: `起重机械使用场所的条件应符合相关设计规范及特种设备使用说明书限定的使用条件。`,
          ischeck: 1,
        },
      ],
    }
  },
  methods: {
    handleCancel() {
      this.visible = false
    },
    ck(record) {
      this.visible = true;
      this.people[0].ischeck = record.cloum1;
      this.people[1].ischeck = record.cloum2;
      this.people[2].ischeck = record.cloum3;
      this.people[3].ischeck = record.cloum4;
      this.people[4].ischeck = record.cloum5;
      this.people[5].ischeck = record.cloum6;
      this.people[6].ischeck = record.cloum7;
      this.people[7].ischeck = record.cloum8;
      this.people[8].ischeck = record.cloum9;
      this.people[9].ischeck = record.cloum10;
      this.people[10].ischeck = record.cloum11;
      this.people[11].ischeck = record.cloum12;
      this.people[12].ischeck = record.cloum13;
      this.people[13].ischeck = record.cloum14;
      this.record = record.record;
      this.recorder = record.recorder;
      this.recordDate = record.recordDate;
      this.cloum20 = record.cloum20;
    }
  },
  printContent() {
    // 获取你想打印的内容
    let content = document.getElementById('dyContent4').innerHTML;

    // 获取所有的 input 和 textarea 元素
    let inputs = document.querySelectorAll('#dyContent4 input');
    let textareas = document.querySelectorAll('#dyContent4 textarea');

    // 存储 input 和 textarea 的值
    let inputValues = [];
    let textareaValues = [];

    // 处理 input 元素，将它们的值替换为普通文本
    inputs.forEach((input, index) => {
      inputValues[index] = input.value;
      let span = document.createElement('span');
      span.textContent = input.value;
      input.parentNode.replaceChild(span, input);
    });

    // 处理 textarea 元素，将它们的值替换为普通文本
    textareas.forEach((textarea, index) => {
      textareaValues[index] = textarea.value;
      let span = document.createElement('span');
      span.textContent = textarea.value.replace(/\n/g, '<br>'); // 保持换行
      textarea.parentNode.replaceChild(span, textarea);
    });

    // 创建一个新的窗口用于打印
    let printWindow = window.open('', '', 'height=500,width=800');

    // 添加表格和边框样式
    let style = `
    <style>
      table {
        border-collapse: collapse;
        width: 100%;
      }
      table, th, td {
        border: 1px solid black;
      }
    </style>
  `;

    // 写入内容到新窗口
    printWindow.document.write('<html><head><title>每日电梯安全检查记录</title>');
    printWindow.document.write(style); // 确保表格样式生效
    printWindow.document.write('</head><body>');
    printWindow.document.write(document.getElementById('dyContent4').innerHTML);
    printWindow.document.write('</body></html>');
    printWindow.document.close(); // 必须关闭文档流才能触发打印
    printWindow.focus(); // 使打印窗口成为焦点

    // 触发打印
    printWindow.print();

    // 关闭打印窗口
    printWindow.close();

    // 恢复原来的 input 和 textarea 元素
    inputs.forEach((input, index) => {
      input.value = inputValues[index];
    });

    textareas.forEach((textarea, index) => {
      textarea.value = textareaValues[index];
    });
  }
  ,
  mounted() {
  }
  ,
}
</script>


<style scoped>
.app-body {
  width: 100%;
  height: 100%;
}

.content {
  width: 99.1%;
  height: 100%;
  border: 1px solid yellowgreen;
  margin: 0 auto;
  overflow: auto;
}

body {
  font-size: 1rem;
}

table,
td,
th {
  border-collapse: collapse;
  border-spacing: 0;
}

table {
  width: 100%;
  margin-top: 10px;
}

td,
th {
  border: 2px solid #000000;
  padding: 5px 10px;
}

th {
  background: #42b983;
  font-size: 3vw;
  font-weight: 400;
  color: #fff;
  cursor: pointer;
}

.font {
  font-size: 2.8vw;
}

tr:nth-of-type(odd) {
  background: #fff;
}

tr:nth-of-type(even) {
  background: #eee;
}

button {
  outline: none;
  padding: 5px 8px;
  color: #fff;
  border: 1px solid #bcbcbc;
  border-radius: 3px;
  background-color: #009a61;
  cursor: pointer;
}

button:hover {
  opacity: 0.8;
}

.text-center {
  text-align: center;
}
</style>

<style lang="less">
.app_container {
  width: 100%;
  height: 100%;
  background: #ffff !important;
}
</style>