<template>
  <dv-loading v-if="!showPage" style="width: 100%; height: 100%" class="the-loading">Loading...</dv-loading>
  <div v-else class="security">
    <div class="top">
      <div class="leftt">
        <dv-border-box-12 class="item-box">
          <ItemTitle title="安全教育交底"></ItemTitle>
          <ListImg class="box" :height="290" :list="lstJd" />
        </dv-border-box-12>
      </div>
      <dv-border-box-12 class="item-box">
        <div class="xunjian-images">
          <template v-for="(item, index) in lstJC">
            <img v-if="index < 4" :key="index" :src="item.url" />
          </template>
        </div>
      </dv-border-box-12>
      <div>
        <dv-border-box-12 class="item-box">
          <ItemTitle title="风险五色图"></ItemTitle>
          <div class="box">
            <img class="wusetu" src="@/assets/image/anquan/wusetu.png" />
          </div>
        </dv-border-box-12>
      </div>
    </div>
    <div class="bottom">
      <div>
        <dv-border-box-12 class="item-box">
          <ItemTitle title="安全整改记录"></ItemTitle>
          <div class="table-rank">
            <dv-scroll-board :config="zhenggaijilu_config" style="width: 100%; height: 100%" />
          </div>
        </dv-border-box-12>
      </div>
      <div>
        <dv-border-box-12 class="item-box">
          <ItemTitle title="重大危险源公示"></ItemTitle>
          <div class="table-rank">
            <dv-scroll-board :config="weixianyuan_config" style="width: 100%; height: 100%" />
          </div>
        </dv-border-box-12>
      </div>
    </div>
  </div>
</template>

<script>
import ItemTitle from '@/components/ItemTitle.vue'
import ListImg from '@/components/ListImg.vue'
import axios from 'axios'
import dayjs from 'dayjs'
export default {
  name: 'security',
  components: {
    ItemTitle,
    ListImg
  },
  data() {
    return {
      showPage: true,
      lstJd: [],
      lstJC: [],
      zhenggaijilu_config: {
        oddRowBGC: 'rgba(4, 24, 45,0.4)',
        evenRowBGC: '#0d1732',
        waitTime: 2000,
        rowNum: 5,
        align: ['center', 'center', 'center', 'center', 'center'],
        headerBGC: '#0b375d',
        header: ['问题描述', '日期', '整改单位', '整改日期', '整改验收情况'],
        data: [
          ['植筋作业未采用三级配电，未按要求使用带漏保插座', '2024-06-08', '哈尔滨建工建设有限公司', '2024-06-08', '按照临时用电要求整改'],
          ['厨房未宣挂安全挂图', '2024-06-08', '哈尔滨建工建设有限公司', '2024-06-09', '按照消防规范要求整改'],
          ['砌筑班组移动开关箱未按要求设置', '2024-05-25', '哈尔滨建工建设有限公司', '2024-05-25', '按照临时用电要求整改'],
          ['材料堆放区木方未设消防器材', '2024-05-25', '哈尔滨建工建设有限公司', '2024-05-25', '按照消防规范要求整改'],
          ['实训楼东北角木工支模，无外防护架', '2024-04-24', '哈尔滨建工建设有限公司', '2024-04-24', '按安全防护措施整改'],
          ['托育楼木工、钢筋班组材料、垃圾未清', '2024-04-24', '哈尔滨建工建设有限公司', '2024-04-24', '文明施工要求'],
          ['实训楼防护架未跟进', '2024-04-24', '哈尔滨建工建设有限公司', '2024-04-24', '按照防护措施整改'],
          ['托育楼一层东侧临边防护缺失', '2024-04-24', '哈尔滨建工建设有限公司', '2024-04-24', '按安全防护措施恢复'],
          ['连廊位置外防护搭设未系安全带', '2024-04-24', '哈尔滨建工建设有限公司', '2024-04-24', ''],
          ['托育楼一层预留洞口未设置防护', '2024-04-06', '哈尔滨建工建设有限公司', '2024-04-06', '按照临边洞口防护措施整改'],
          ['木工班组人员进入现场作业未佩戴安全帽', '2024-04-06', '哈尔滨建工建设有限公司', '2024-04-06', '佩戴安全帽'],
          ['木工班组人员进入现场作业未佩戴安全帽', '2024-04-06', '哈尔滨建工建设有限公司', '2024-04-06', '佩戴安全帽'],
          ['开关箱未按要求挂起，电线托地', '2024-04-06', '哈尔滨建工建设有限公司', '2024-04-06', '按临时用电要求架起'],
          ['木工圆盘锯无防护', '2024-03-30', '哈尔滨建工建设有限公司', '2024-03-30', '圆盘锯增加防护挡板，外架不允许堆料'],
          ['个别消防器材失效', '2024-03-30', '哈尔滨建工建设有限公司', '2024-03-30', '重新更换'],
          ['现场木方等杂物拥堵，材料未及时清理', '2024-03-23', '哈尔滨建工建设有限公司', '2024-03-23', '文明施工，工完场清'],
          ['钢筋加工区场地的配电箱门未上锁，电线托地', '2024-03-23', '哈尔滨建工建设有限公司', '2024-03-23', '按临时用电规范整改'],
          ['水平杆、立杆缺失，立杆下少垫板、悬空，剪刀撑不足，梁底无独立支撑，套管下置，模板支撑连接外架', '2024-03-18', '哈尔滨建工建设有限公司', '2024-03-18', '补齐立杆、水平杆、垫板，悬空位置处理，增加剪刀撑和独立支撑，连接外架外拆除']
        ]
      },
      weixianyuan_config: {
        oddRowBGC: 'rgba(4, 24, 45,0.4)',
        evenRowBGC: '#0d1732',
        waitTime: 2000,
        rowNum: 5,
        align: ['center', 'center', 'center', 'center', 'center', 'center'],
        headerBGC: '#0b375d',
        header: ['序号', '危险源名称', '可能发生的事故', '防范措施', '责任人', '监控时间'],
        data: [
          ['1', '基坑工程', '坍塌高处坠落', '开挖土方严格按照施工方案进行，基坑周边堆放荷载按设计荷载控制。对基坑实时监测。基坑位移超报警值立即疏散人员采取加固措施安排专人对基坑巡查，发现问题及时反馈。临边防护、设置警示牌', '安全员', '基础阶段'],
          ['2', '模板工程', '坍塌', '对支模人员进安全技术交底、严格执行施工方案和相关施工规范', '班组长', '施工全过程'],
          ['3', '高处坠落', '高处坠落', '防措施高处坠落：高处作业时要设置安全标志，系好安全带。严禁从高处往下丢弃物体，防护设施应经常检查，并加强工人的安全教育。', '安全员', '施工全过程'],
          ['4', '物体打击', '物体打击', '防治“物体打击”措施：加强施工管理人员和工人的安全防护意识教育，对作业中的走道、通道和登高用具等。高空作业中严禁从高处向下抛物体，要用绳子系好后慢慢往下传送。', '班组长', '施工全过程'],
          ['5', '机械操作', '机械伤害', '要认真学习掌握本工程安全技术操作规程和安全知识，严格按交底的要求施工，遵守操作规程，不违章作业，有权拒绝违章指挥', '安全员', '施工全过程'],
          ['6', '触电伤害', '触电', '防治“触电”伤害措施：施工现场用电采用“三相五线制”，各用电电器的安装、维修或拆除必须由电工完成，线路标识；检查、维修、验收；消防器材配置齐全。', '安全员电 工', '施工全过程'],
          ['7', '脚手架工程', '高处坠落物体打击', '应设防止操作者高空坠落和零散材料掉落的防护措施；架子工作业时必须戴安全帽，系安全带。', '安全员班组长', '主体阶段'],
          ['8', '起重机械吊装', '坍塌、高处坠落、物体打击', '司机、司索信号、指挥经培训合格持证上岗；起重吊装严禁超载作业；吊装时构件堆放符合要求；加强平时日常检查，做好维修保养记录；加强对机操人员的安全操作规程培训教育，消除安全隐患', '安全员塔吊司机司索信号', '施工全过程'],
          ['9', '“四口、五临边”', '高处坠落、物体打击', '做好“四口、五临边”的防护。配备合格的“三宝”防护用品。指定专人“四口、五临边”防护检查维护。', ' 安全员', '主体、装饰阶段'],
          ['10', '防火', '火灾', '建立完善的动火制度，配备灭火器材，专人看护，严禁私接乱接。', ' 安全员班组长', '施工全过程']
        ]
      }
    }
  },

  methods: {
    getJd() {
      axios.get('http://static.harbinxiaoshi.cn/daping/哈尔滨市托育综合服务中心建设项目/json/anquanjiaoyujiaodi.json?t=' + dayjs()).then(res => {
        this.lstJd = res.data
      })
    },
    getJC() {
      axios.get('http://static.harbinxiaoshi.cn/daping/哈尔滨市托育综合服务中心建设项目/json/anquanxunchan.json?t=' + dayjs()).then(res => {
        this.lstJC = res.data
      })
    }
  },

  mounted() {
    this.getJd()
    this.getJC()
  }
}
</script>

<style lang="scss" scoped>
.security {
  margin-top: px2rem(20);
  height: calc(100% - #{px2rem(58+78 + 20)});
  width: 100%;
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 10px 20px;
}
.top {
  height: 49%;
  width: 100%;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-column-gap: px2rem(10);
}

.item-box {
  padding: px2rem(20);
}
.xunjian-images {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-column-gap: px2rem(10);
  grid-row-gap: px2rem(10);
  width: 100%;
  height: 100%;
  & > img {
    width: px2rem(283);
    height: px2rem(160);
    object-fit: fill;
  }
}
.leftt {
}
.box {
  margin-top: px2rem(10);
}
.wusetu {
  width: 100%;
  height: px2rem(290);
}
.bottom {
  margin-top: px2rem(10);
  width: 100%;
  height: 49%;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-column-gap: px2rem(30);
}
.table-rank {
  width: 100%;
  margin-top: px2rem(10);
  height: calc(100% - #{px2rem(50)});

  ::v-deep .row-item {
    cursor: pointer;
  }
}
</style>
