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">设备编号:
          <!--          <j-dict-select-tag style="width: 60%" v-model="cloum20" title="性别" dictCode="device_number"-->
          <!--                             placeholder="请选择设备编号"/>-->
          <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="6">检查日期：
          <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 {
      record: '',
      recorder: '',
      recordDate: '',
      cloum20: '',
      dynamicModels: {},
      dictModel: [],
      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: `1) 机房门外侧有下述或者类似的警示标志："电梯机器—危险;
                                        2) 轿厢内的铭牌和"特种设备使用标志"标识;
                                        3) 设有IC卡系统的电梯轿厢内的出口层选层按钮标志;
                                        4) 超面积载货电梯、杂物电梯层站处的额定载重量标志;
                                        5) 自动扶梯与自动人行道"急停"指示标记;
                                        6) 消防员电梯象形图标志;
                                        7) 其他安全标志`,
          ischeck: 1,
        },
        {
          checkFactors: '环境因素',
          inspectionItems: '自然环境',
          inspectionContent: '防火、防爆、防雷、防风、防雨、防冻、防腐等设施齐全、完好',
          ischeck: 1,
        },
      ],
    }
  },
  created() {
    this.loadFrom()
  },
  methods: {
    ww() {
      this.record = '';
    },
    loadFrom() {
      let params = {
        "type": 1
      }
      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,
        'cloum11': this.people.length > 0 ? this.people[10].ischeck : null,
        'type': 1,
        'record': this.record,
        'recordDate': this.recordDate,
        'recorder': this.recorder,
        'cloum20': this.cloum20
      }
      addCheck(params).then((res) => {
        if (res.success) {
          this.$message.success("提交成功!")
        } else {
          this.$message.error(res.message)
        }
      })
    },
  }
  ,
  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>