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="dyContent3">
      <div style="width: 100%;text-align: center;"><h1 style="font-size:100px">每日压力容器安全检查记录</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: `压力容器与管道发生严重振动出现泄漏，危及安全运行的`,
          ischeck: 1,
        },
        {
          checkFactors: '设备因素',
          inspectionItems: '变形及裂缝',
          inspectionContent: `压力容器在运行时出现超温、超压，致使主要受压元件出现下列 危及安全的现象：
                                        1)主要受压元件母材异常变形、发生裂缝；
                                        2)焊接接头发生裂缝失效等
                                        `,
          ischeck: 1,
        },
        {
          checkFactors: '设备因素',
          inspectionItems: '材质劣化',
          inspectionContent: `压力容器运行时由于超温，致使主要受压元件材质劣化等危及安全的情况`,
          ischeck: 1,
        },
        {
          checkFactors: '设备因素',
          inspectionItems: '异常情况',
          inspectionContent: `压力容器在运行时出现工作压力、工作温度、液位超过规定值， 采取措施后仍不能得到有效控制的现象`,
          ischeck: 1,
        },
        {
          checkFactors: '设备因素',
          inspectionItems: '测温仪表',
          inspectionContent: `1)测温仪表的定期校验和检修符合规定；
                                        2)测温仪表的量程与其检测的温度范围匹配；
                                        3)测温仪表及其二次仪表的外观符合规定
                                        `,
          ischeck: 1,
        },
        {
          checkFactors: '设备因素',
          inspectionItems: '爆破片',
          inspectionContent: `1)爆破片选型正确，符合运行要求；
                                        2)爆破片装置的安装方向正确，运行中无渗漏；
                                        3)爆破片未超过规定使用期限，使用过程中不存在未超压爆破 或者超压未爆破的情况；
                                        4)爆破片和压力容器之间装设的截止阀处于全开状态，铅封完
                                        好 ；
                                        5)爆破片和安全阀串联使用，如果爆破片装在安全阀的进口
                                        侧，爆破片和安全阀之间装设的压力表有压力显示，打开截止阀
                                        无气体排出；
                                        6)与爆破片夹持器相连的放空管通畅，放空管内无存水(或者 冰),防水帽、防雨片完好
                                        `,
          ischeck: 1,
        },
      ],
    }
  },
  methods: {
    handleCancel() {
      this.visible = false
    },
    printContent() {
      // 获取你想打印的内容
      let content = document.getElementById('dyContent3').innerHTML;

      // 获取所有的 input 和 textarea 元素
      let inputs = document.querySelectorAll('#dyContent3 input');
      let textareas = document.querySelectorAll('#dyContent3 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('dyContent3').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];
      });
    },
    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.record = record.record;
      this.recorder = record.recorder;
      this.recordDate = record.recordDate;
      this.cloum20 = record.cloum20;
    }
  }
  ,
  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>