mts / MTS-UI · Files

<template>
  <div class="content">
    <div style="width: 100%;text-align: center;font-weight: 600;">每周压力容器安全检查记录</div>
    <table>
      <tr>
        <th>序号:</th>
        <th style="width: 19%;">检查因素:</th>
        <th style="width: 19%;">检查项目:</th>
        <th>检查内容:</th>
        <th>检查结果</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'">
          <select v-model="item.ischeck">
            <option value="1">✓</option>
            <option value="0" selected>✕</option>
          </select>
        </td>
      </tr>
      <tr>
        <td colspan="5">
          检查情况记录：
          <button @click="ww">清空</button>
          <br/>
          <textarea style="width: 98%;" name="" id="" cols="30" rows="10" v-model="record"> </textarea>
        </td>
      </tr>
      <tr>
        <td colspan="3">设备编号:
          <a-select
            show-search
            placeholder="请选择设备编号"
            option-filter-prop="children"
            :filter-option="filterOption"
            v-model="cloum20" style="width: 150px"
          >
            <a-select-option v-for="item in dictModel" :key="item.title" :value="item.value">{{
                item.text
              }}
            </a-select-option>
          </a-select>
        </td>
        <td colspan="3">特种设备安全总监:
          <a-input v-model="recorder" style="width: 40%"></a-input>
        </td>
      </tr>
      <tr>
        <td colspan="3">检查日期：
          <j-date v-model="recordDate"></j-date>
        </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>
</template>

<script>
import {addCheck, getDeviceDict} from '@/api/api'

export default {
  data() {
    return {
      recordDate: '',
      recorder: '',
      record: '',
      cloum20: '',
      dictModel: [],
      people: [
        {
          checkFactors: '管理因素',
          inspectionItems: '设备使用登记',
          inspectionContent: `1)在投入使用前或者投入使用后30日内，向特种设备所在地的 直辖市或者设区的市的特种设备安全监督管理部门申请办理使用登记 ；
2)将“特种设备使用标志”或者使用单位盖章或者签名确认的 复印件悬挂或者固定在特种设备显著位置(当无法悬挂或者固定 时，可存放在使用单位的安全技术档案中，同时将使用登记证编 号标注在特种设备产品铭牌上或者其他可见部位)
`,
          ischeck: 1,
        },
        {
          checkFactors: '管理因素',
          inspectionItems: '隐患排查',
          inspectionContent: `1)定期开展安全隐患排查；
                                        2)及时消除安全隐患
                                        `,
          ischeck: 1,
        },
        {
          checkFactors: '管理因素',
          inspectionItems: '相关记录填写情况',
          inspectionContent: `1)建立压力容器操作以及日常使用运行记录；
                                        2)建立压力容器操作交接班记录；
                                        3)建立压力容器及其附属仪器仪表维护保养记录； 4)建立压力容器操作巡回检查记录；
                                        5)压力容器运行故障和事故记录及事故处理报告； 6)建立压力容器停用或报废安全措施记录；
                                        7)压力容器应急演练记录；
                                        8)人员培训考核持证上岗记录；
                                        9)每日特种设备安全检查记录；
                                        10)每周特种设备安全排查治理报告；
                                        11)每月特种设备安全调度会议纪要

                                        `,
          ischeck: 1,
        },

        {
          checkFactors: '设备因素',
          inspectionItems: '安全保护装置',
          inspectionContent: `应根据设备特点配备报警及联锁保护装置`,
          ischeck: 1,
        },
        {
          checkFactors: '设备因素',
          inspectionItems: '事故及运行情况',
          inspectionContent: `曾发生设备事故或操作原因造成损坏等情况`,
          ischeck: 1,
        },
        {
          checkFactors: '设备因素',
          inspectionItems: `检验、校
                                        验、检定
                                        情况
                                        `,
          inspectionContent: `)压力容器应按时定期检验；
                                        2)压力容器定期检验不合格不得继续使用；
                                        3)安全附件应定期校验或检定；
                                        4)校验或检定不合格不得继续使用
`,
          ischeck: 1,
        },
        {
          checkFactors: '设备因素',
          inspectionItems: '压力容器停用',
          inspectionContent: `停用1年以上的，是否采取有效的保护措施，并设置停用标志； 2)停用1年以上的，重新启用时，是否组织自行检查`,
          ischeck: 1,
        },
        {
          checkFactors: '设备因素',
          inspectionItems: '快开门式压力容器的安全联锁装置',
          inspectionContent: `快开门式压力容器的安全联锁装置完好，功能符合下述要求： 1)当快开门达到预定关闭部位，方能升压运行；
2)当压力容器的内部压力完全释放，方能打开快开门；
3)氧舱舱门除设置安全保护联锁装置外，至少应配置一套手动 操作装置
`,
          ischeck: 1,
        },

        {
          checkFactors: '设备因素',
          inspectionItems: '装卸软管',
          inspectionContent: `1)装卸软管出厂时应当随产品提供质量证明文件，并且在产品 的明显部位装设牢固的金属铭牌，制造单位应当注明装卸软管的
设计使用寿命；
2)装卸软管与充装介质接触部分应当有良好的耐腐蚀性能； 3)装卸高(低)压液化气体、冷冻液化气体和液体的装卸软管  的公称压力不得小于装卸系统工作压力的2倍，装卸压缩气体的 装卸软管公称压力不得小于装卸系统工作压力的1.3倍，装卸软 管的最小爆破压力应当大于4倍公称压力；
4)装卸软管和快装接头组装完成后应当逐根进行耐压试验和气 密性试验
`,
          ischeck: 1,
        },
        {
          checkFactors: '设备因素',
          inspectionItems: '压力表',
          inspectionContent: `1)压力表的精度等级、量程、选型符合运行要求；
2)压力表的定期检修维护、检定有效期及其封签符合规定
`,
          ischeck: 1,
        },
      ],
    }
  },
  created() {
    this.loadFrom()
  },
  methods: {
    ww() {
      this.record = ''
    },
    loadFrom() {
      let params = {
        "type": 7
      }
      getDeviceDict(params).then((res) => {
        this.dictModel = res.result
      })
    },
    submit() {
      let params = {
        'cloum1': this.people.length > 0 ? this.people[0].ischeck : null,
        'cloum2': this.people.length > 0 ? this.people[1].ischeck : null,
        'cloum3': this.people.length > 0 ? this.people[2].ischeck : null,
        'cloum4': this.people.length > 0 ? this.people[3].ischeck : null,
        'cloum5': this.people.length > 0 ? this.people[4].ischeck : null,
        'cloum6': this.people.length > 0 ? this.people[5].ischeck : null,
        'cloum7': this.people.length > 0 ? this.people[6].ischeck : null,
        'cloum8': this.people.length > 0 ? this.people[7].ischeck : null,
        'cloum9': this.people.length > 0 ? this.people[8].ischeck : null,
        'cloum10': this.people.length > 0 ? this.people[9].ischeck : null,
        'type': 7,
        'record': this.record,
        'recordDate': this.recordDate,
        'recorder': this.recorder,
        'cloum20': this.cloum20,
      }
      addCheck(params).then((res) => {
        if (res.success) {
          this.$message.success("提交成功!")
        }
      })
    },
  },
  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;
}

@media screen and (max-width: 400px) {
  .font {
    font-size: 2.8vw;
  }

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

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

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>