<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.jpg" />
          </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-05-25', '哈尔滨建工建设有限公司', '2024-05-25', '要求施工现场分包单位按规范要求搭设剪刀撑搭接长度符合脚手架施工方案和规范，整改完成'],
          ['现场材料堆放安全隐患问题', '2024-05-23', '哈尔滨建工建设有限公司', '2024-05-23', '要求施工现场苯板进场必须按规范要求堆放，已按规范要求设置防火围挡，已按规范要求实行下垫上盖，已按按规范要求配备灭火器材，整改完毕'],
          ['现场23#脚手架施工工人未系安全带', '2024-05-08', '哈尔滨建工建设有限公司', '2024-05-08', '要求23#楼脚手架搭设施工人员按规范要求系好安全带，整改完毕'],
          ['现场施工单位未按要求擅自施工', '2024-05-06', '哈尔滨建工建设有限公司', '2024-05-06', '钢管等材料已见证送样，二次复试报告已回确认构件、管件已合格，施工单位技术负责已上报安全施工组织设计、脚手架施工方案，整改完成'],
          ['施工现场工人未系安全带:', '2024-05-05', '哈尔滨建工建设有限公司', '2024-05-05', '要求高处作业施工人员系安全带'],
          ['进场工装及安全帽、反光马甲配置问题', '2024-04-27', '哈尔滨建工建设有限公司', '2024-04-28', '要求施工人员按规范佩戴安全帽、穿工装及反光马甲。我单位并在五一前配齐安全帽、工装及反光马甲，整改完毕'],

        ]
      },
      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', '高处坠落', '脚手架', '27栋', '物体坠落', '安全带', '徐怀宝'],
          ['2', '物体打击', '脚手架', '26栋', '伤人', '防护', '徐怀宝'],
          ['3', '高处坠落', '脚手架', '25栋', '物体坠落', '安全带', '马纬国'],
          ['4', '物体打击', '脚手架', '23栋', '伤人', '防护', '马纬国'],

        ]
      }
    }
  },

  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;
  }
}


.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>
