<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-04-17', '哈尔滨建工建设有限公司', '2024-04-19', '暂老训练馆耳房除湿风机房、控制室处沿地敷设电缆做防护'],
          ['老训练馆南侧场地通往临时办公用房的电缆直接悬挂于围挡钢管上,无任何安全防护措施', '2024-04-17', '哈尔滨建工建设有限公司', '2024-04-19', '老训练馆南侧场地通往临时办公用房的电缆用绝缘钩悬挂']
        ]
      },
      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', '交叉作业', '施工现场', '安全防护用品使用不到位、交叉作业无防护措施', '高处坠落、物体打击、灼伤', '同步检查', '刘悦']
        ]
      }
    }
  },

  methods: {
    getJd() {
      axios.get('http://static.harbinxiaoshi.cn/daping/' + process.env.VUE_APP_TITLE + '/json/anquanjiaoyujiaodi.json?t=' + dayjs()).then(res => {
        this.lstJd = res.data
      })
    },
    getJC() {
      axios.get('http://static.harbinxiaoshi.cn/daping/' + process.env.VUE_APP_TITLE + '/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>
