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="dyContent8">
      <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: `场车作业和专职安全管理人员需取得相应项目的特种设备安全管 理和作业人员证，持证上岗，并且保证每台场车在作业时均由司 机随车操纵。`,
          ischeck: 1,
        },
        {
          checkFactors: '管理因素',
          inspectionItems: '试运行',
          inspectionContent: `出车前进行试运行检查，并且做好记录
                                        `,
          ischeck: 1,
        },
        {
          checkFactors: '管理因素',
          inspectionItems: '限速',
          inspectionContent: `遵守作业场所内的限速规定，严禁超速行驶
                                        `,
          ischeck: 1,
        },

        {
          checkFactors: '管理因素',
          inspectionItems: '载客',
          inspectionContent: `叉车不得载客运行(设有搭载随乘人员设施的车辆除外，此时搭 载人数不得超过允许随乘的人数)`,
          ischeck: 1,
        },
        {
          checkFactors: '管理因素',
          inspectionItems: '安全带',
          inspectionContent: `行驶和作业时佩戴安全带(如果有)`,
          ischeck: 1,
        },
        {
          checkFactors: '管理因素',
          inspectionItems: `特殊路段操作`,
          inspectionContent: `车辆转弯、进出库门等须减速行驶
`,
          ischeck: 1,
        },
        {
          checkFactors: '管理因素',
          inspectionItems: '货叉载人',
          inspectionContent: `严禁在货叉上站人或者利用货叉起升载有人员的装置`,
          ischeck: 1,
        },
        {
          checkFactors: '管理因素',
          inspectionItems: '视野受阻时操作',
          inspectionContent: `叉车司机视线不良或者受阻时，倒车低速行驶或者在专人指挥下 低速行驶`,
          ischeck: 1,
        },

        {
          checkFactors: '管理因素',
          inspectionItems: '载货',
          inspectionContent: `严禁超载`,
          ischeck: 1,
        },
        {
          checkFactors: '管理因素',
          inspectionItems: '身体条件',
          inspectionContent: `身体过度疲劳、饮酒后或者患病有碍操作安全时，严禁操作车辆
`,
          ischeck: 1,
        },
        {
          checkFactors: '管理因素',
          inspectionItems: '维护保养和检查',
          inspectionContent: `维护保养应当符合有关安全技术规范和产品使用维护说明的要 求，对维护保养中发现的异常情况应当及时处理，消除事故隐 患，并且记录，记录存入安全技术档案，至少保存5年`,
          ischeck: 1,
        },
        {
          checkFactors: '设备因素',
          inspectionItems: '行驶系统',
          inspectionContent: `叉车的行驶系统应符合以下要求：
                    1)轮胎规格符合设计要求；
                    2)同一轴上的轮胎规格和花纹应当相同；
                    3)轮辋应当完整无损，螺栓、螺母应当齐全紧固； 4)前后桥与车架的连接应当紧固；
                    5)充气轮胎胎面和胎壁应当无长度超过25mm或者深度足以暴露 出轮胎帘布层的破裂和割伤；实心轮胎(包括工业脚轮和车轮轮 胎)应当无胶层气泡和脱层、钢圈与胶层松脱等缺陷。

                    `,
          ischeck: 1,
        },
        {
          checkFactors: '设备因素',
          inspectionItems: '转向系统',
          inspectionContent: `叉车的转向系统应符合以下要求：
                        1)转向系统应当转动灵活、操纵方便、无卡滞，在任意转向操 作时不得与其他部件有干涉；
                        2)向前运行时，顺时针转动方向盘或者对转向控制装置的等同 操作，应当使叉车右转，并且乘驾式叉车的控制装置应当被限制 在叉车轮廓内
                        3)转向装置中的转向节臂，转向横、直拉杆不应当有裂纹、损 伤，球销不应当松旷，转向油缸不应当有泄漏油现象。
                        观光车辆的转向系统应符合以下要求：
                        1)车辆应当设置转向限位装置；
                        2)转向系统应当转动灵活、操作方便、无卡滞，在任意转向操 作时不得与其他部件有干涉；
                        3)转向装置中的转向节及臂，转向横、直拉杆应当无裂纹、损 伤，球销不应当松旷，转向油缸不应当有泄漏油现象；
                        4)方向盘不得右置；
                        5)车辆以15km/h(最大设计车速小于15km/h时，以最大车速)  速度直线行驶，方向盘保持不动，不得有明显的蛇行现象，应当
                        具有良好的直线行驶性能
`,
          ischeck: 1,
        },
        {
          checkFactors: '设备因素',
          inspectionItems: '制动系统',
          inspectionContent: `叉车的制动系统应符合以下要求：
1)应当具有行车、驻车制动系统，并且设置相应的制动装置  2)坐驾式叉车的行车制动与驻车制动系统应当由独立的装置进 行操纵 ；
3)站驾式和步驾式叉车应当带有一个制动装置，该装置应当自 动闭合直到其被司机释放；
4)驻车制动系统应当通过纯机械装置把工作部件锁止，手柄操 纵的驻车制动控制装置应当有防止意外释放的功能。
`,
          ischeck: 1,
        },

        {
          checkFactors: '设备因素',
          inspectionItems: '电气和控制系统',
          inspectionContent: `叉车的电气和控制系统应符合以下要求：
                                        1）启动应当设置开关装置，需要有钥匙、密码或者磁卡等才能启动。
                                        2）电动叉车的电气系统应当采用双线制。
                                        3）坐驾式平衡重式叉车和侧面式叉车应当设置前照灯、制动灯、转向灯，其他叉车根据使用工况设置照明和信号装置，照明和信 号装置应当功能完好。
                                        4)电动叉车应当设置非自动复位且能切断所有驱动部件电源的紧
                                        急断电开关。
                                        5)动力源为蓄电池的叉车充电时，应当保证电源与车辆控制电路 分离，车辆不能通过自身的驱动系统行驶；插接器应当有定向防 护，防止插接器接反。
                                        6)电气部件及线路的带电部分不得因使用损耗或者老化而裸露
`,
          ischeck: 1,
        },
        {
          checkFactors: '设备因素',
          inspectionItems: '安全保护与防护装置',
          inspectionContent: `叉车的安全保护与防护装置应符合以下要求：
1)起升高度大于1800mm的乘驾式叉车或者载荷起升高度超过操 作平台1800mm的叉车应当装有护顶架或者司机室。
2)乘驾式叉车应当设置由司机控制、能够发出清晰声响的警示 装置(至少包括喇叭、倒车蜂鸣器),其中，设计为司机侧站或  者侧坐驾驶的叉车可不设置倒车蜂鸣器。
3)坐驾式平衡重式叉车和侧面式叉车应当设置后视镜，侧面式  叉车货叉侧和额定起重量大于10000kg的坐驾式平衡重式叉车后 方还应当设置视频监视装置。
4)额定起重量不大于10000kg的坐驾式平衡重式叉车和侧面式叉 车(单侧)应当配备司机防护约束装置(如安全带)。
5)前风窗玻璃应当设置刮水器，刮水器应当能正常工作，且关 闭时刮片应当能自动返回至初始位置。
6)应当设置下降限速装置、门架前倾自锁装置，如果下降限速 阀与升降油缸采用软管连接，还应当有防止爆管装置。
7)起升装置应当设置防越程装置，避免货叉架和门架上的运动 部件从门架上端意外脱落。
8)挡货架上开口的两个尺寸中应当有一个不大于150mm。
9)应当有避免正常操作的司机与车轮接触以及被车轮甩出物体伤 害的保护装置；对于转向轮，只需对其直线行驶状态进行防护。
10)没有安装护顶架的带有折叠站板的步驾式叉车，当其侧面 防护装置处于保护位置时，应当采取措施以防起升高度大于
1800mm。
11)对于步驾式叉车，舵柄应当配备一种装置，当其头部在操作 位置与固体物(如司机的身体)接触时，能促使车辆朝远离司机
的方向运行，直到该装置上的压力被解除或者实施制动使车辆停 下，且该装置应当可靠有效。

`,
          ischeck: 1,
        },
        {
          checkFactors: '环境因素',
          inspectionItems: '爆炸性环境使用要求',
          inspectionContent: `在爆炸性环境中使用叉车时，遵守有关部门对防爆安全的管理规定
`,
          ischeck: 1,
        },
        {
          checkFactors: '环境因素',
          inspectionItems: '场车作业环境',
          inspectionContent: `1)使用单位应当根据本单位场车作业区域的状况，规范本单位 场车作业环境，作业环境不符合要求的，场车不得进入该区域
作业。
2)观光车辆的行驶路线中，任意连续20m路段的平均坡度不应 当超过最大行驶坡度。
3)观光车辆的行驶路线中不得存在爆炸性环境，路面边沿3m   (弯道处为4.5m)内有悬崖、深谷、深沟或水域的路段，应当设  置防护能力与车辆相匹配的路侧护栏。存在陡坡、连续下坡、急  弯、窄道、交岔口等特殊情况的路段，使用单位应当评估风险， 根据需要设置相应的标志、标线、避险车道、减速丘、凸面镜等  安全设施，或者采取限速、分流等管理措施
`,
          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.people[14].ischeck = record.cloum15;
      this.people[15].ischeck = record.cloum16;
      this.people[16].ischeck = record.cloum17;
      this.people[17].ischeck = record.cloum18;
      this.record = record.record;
      this.recorder = record.recorder;
      this.recordDate = record.recordDate;
      this.cloum20 = record.cloum20;
    },
    printContent() {
      // 获取你想打印的内容
      let content = document.getElementById('dyContent8').innerHTML;

      // 获取所有的 input 和 textarea 元素
      let inputs = document.querySelectorAll('#dyContent8 input');
      let textareas = document.querySelectorAll('#dyContent8 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('dyContent8').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>