<template>
  <dv-loading v-if="!showPage" style="width: 100%; height: 100%" class="the-loading">Loading...</dv-loading>
  <div v-else class="quality">
    <div>
      <div class="top">
        <item-title title="质量巡检"></item-title>
        <div class="box" ref="chart1"></div>
      </div>
      <div class="bottom">
        <item-title title="质量问题列表"></item-title>
        <div class="table-rank zhiliang-table">
          <dv-scroll-board :config="zhiliangwenti_config" style="width: 100%; height: 100%" />
        </div>
      </div>
    </div>
    <div>
      <div class="top">
        <item-title title="质量亮点"></item-title>
        <div class="zhiliang-images">
          <div>
            <img src="@/assets/image/zhiliang/1.jpg" />
          </div>
          <div>
            <img src="@/assets/image/zhiliang/2.jpg" />
          </div>
          <div>
            <img src="@/assets/image/zhiliang/3.jpg" />
          </div>
          <div>
            <img src="@/assets/image/zhiliang/4.jpg" />
          </div>
        </div>
      </div>
      <div class="bottom">
        <item-title title="现场巡检"></item-title>
        <ListImg class="box" :height="310" :list="lstXJ" />
      </div>
    </div>
    <div>
      <item-title title="质量验收记录"></item-title>
      <div class="table-rank">
        <dv-scroll-board :config="yanshoujilu_config" style="width: 100%; height: 100%" />
      </div>
    </div>
  </div>
</template>

<script>
import ItemTitle from '@/components/ItemTitle.vue'
import ListImg from '@/components/ListImg.vue'
import * as echarts from 'echarts'
import dayjs from 'dayjs'
import axios from 'axios'

export default {
  name: 'quality',
  components: {
    ItemTitle,
    ListImg
  },
  data() {
    return {
      showPage: true,
      zhiliangwenti_config: {
        oddRowBGC: 'rgba(4, 24, 45,0.4)',
        evenRowBGC: '#0d1732',
        waitTime: 5000,
        rowNum: 5,
        align: ['center', 'center', 'center'],
        headerBGC: '#0b375d',
        header: ['问题描述', '检查时间', '处理时间'],
        data: [
          ['实训楼一层板钢筋间距过大', '2024-4-11', '2024-4-11'],
          ['托育楼三层顶板钢筋间距大', '2024-4-6', '2024-4-6'],
          ['托育楼顶梁箍筋间距大', '2024-4-6', '2024-4-6'],
          ['实训楼基础梁钢筋保护层不够', '2024-4-6', '2024-4-6'],
          ['实训楼架空层梁底标高不准', '2024-4-6', '2024-4-6'],
          ['托育楼一层柱模板垂直度差一公分', '2024-3-30', '2024-3-30'],
          ['托育楼一层顶板钢筋往梁底锚固不够', '2024-3-30', '2024-3-30'],
          ['托育楼二层顶梁钢筋主次梁交接处箍筋加密不够', '2024-3-30', '2024-3-30'],
          ['托育楼二层顶梁底有杂物', '2024-3-30', '2024-3-30']
        ]
      },
      yanshoujilu_config: {
        oddRowBGC: 'rgba(4, 24, 45,0.4)',
        evenRowBGC: '#0d1732',
        waitTime: 5000,
        rowNum: 10,
        align: ['center', 'center', 'center', 'center', 'center'],
        headerBGC: '#0b375d',
        header: ['验收项目', '验收部位', '抽检数量', '合格数量', '验收结论'],
        data: [
          ['钢筋安装质量验收', '实训楼架空层墙柱顶梁板', '10', '10', '合格'],
          ['钢筋连接质量验收', '实训楼架空层墙柱顶梁板', '10', '10', '合格'],
          ['模板安装工程质量验收', '实训楼架空层墙柱顶梁板', '10', '10', '合格'],
          ['现浇结构外观及尺寸\n偏差质量验收', '实训楼架空层墙柱顶梁板', '10', '10', '合格'],
          ['钢筋安装质量验收', '实训楼一层墙柱顶梁板', '10', '10', '合格'],
          ['钢筋连接质量验收', '实训楼一层墙柱顶梁板', '10', '10', '合格'],
          ['模板安装工程质量验收', '实训楼一层墙柱顶梁板', '10', '10', '合格'],
          ['现浇结构外观及尺寸\n偏差质量验收', '实训楼一层墙柱顶梁板', '10', '10', '合格'],
          ['钢筋安装质量验收', '托育楼架空层墙柱顶梁板', '10', '10', '合格'],
          ['钢筋连接质量验收', '托育楼架空层墙柱顶梁板', '10', '10', '合格'],
          ['模板安装工程质量验收', '托育楼架空层墙柱顶梁板', '10', '10', '合格'],
          ['现浇结构外观及尺寸\n偏差质量验收', '托育楼架空层墙柱顶梁板', '10', '10', '合格'],
          ['钢筋安装质量验收', '托育楼一层墙柱顶梁板', '10', '10', '合格'],
          ['钢筋连接质量验收', '托育楼一层墙柱顶梁板', '10', '10', '合格'],
          ['模板安装工程质量验收', '托育楼一层墙柱顶梁板', '10', '10', '合格'],
          ['现浇结构外观及尺寸\n偏差质量验收', '托育楼一层墙柱顶梁板', '10', '10', '合格'],
          ['钢筋安装质量验收', '托育楼二层墙柱顶梁板', '10', '10', '合格'],
          ['钢筋连接质量验收', '托育楼二层墙柱顶梁板', '10', '10', '合格'],
          ['模板安装工程质量验收', '托育楼二层墙柱顶梁板', '10', '10', '合格'],
          ['现浇结构外观及尺寸\n偏差质量验收', '托育楼二层墙柱顶梁板', '10', '10', '合格'],
          ['钢筋安装质量验收', '托育楼三层墙柱顶梁板', '10', '10', '合格'],
          ['钢筋连接质量验收', '托育楼三层墙柱顶梁板', '10', '10', '合格'],
          ['模板安装工程质量验收', '托育楼三层墙柱顶梁板', '10', '10', '合格'],
          ['现浇结构外观及尺寸\n偏差质量验收', '托育楼三层墙柱顶梁板', '10', '10', '合格']
        ]
      },
      lstXJ: []
    }
  },

  methods: {
    initChart() {
      const option = {
        xAxis: {
          type: 'category',
          data: ['本月巡检', '上月巡检'],
          axisLabel: {
            show: true,
            textStyle: {
              color: '#fff'
            }
          }
        },
        yAxis: {
          type: 'value',
          axisLabel: {
            show: true,
            textStyle: {
              color: '#fff'
            }
          }
        },
        series: [
          {
            data: [
              {
                value: 5,
                itemStyle: {
                  color: '#91cc75'
                }
              },
              {
                value: 4,
                itemStyle: {
                  color: '#fac858'
                }
              }
            ],
            type: 'bar'
          }
        ]
      }
      const chart1 = echarts.init(this.$refs.chart1)
      window.onresize = chart1.resize //在窗口大小改变时，相应的元素能够适应新的窗口尺寸。
      chart1.setOption(option)
    },
    getXJ() {
      axios.get('http://static.harbinxiaoshi.cn/daping/哈尔滨市托育综合服务中心建设项目/json/xianchangxuncha.json?t=' + dayjs()).then(res => {
        this.lstXJ = res.data
      })
    }
  },

  mounted() {
    this.initChart()
    this.getXJ()
  }
}
</script>

<style lang="scss" scoped>
.quality {
  margin-top: px2rem(20);
  height: calc(100% - #{px2rem(58+78 + 20)});
  width: 100%;
  flex: 1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-column-gap: px2rem(30);
  padding: 10px 20px;
  overflow: hidden;
}
.top {
  height: 49%;
  width: 100%;
}
.bottom {
  margin-top: px2rem(10);
  width: 100%;
  height: 48%;
}
.zhiliang-images {
  display: grid;
  margin-top: px2rem(10);
  grid-template-columns: repeat(2, 50%);
  grid-template-rows: minmax(0, 1fr) minmax(0, 1fr);
  grid-gap: px2rem(10);
  width: 100%;
  height: calc(100% - #{px2rem(50)});
  & > div > img {
    width: 100%;
    height: 100%;
    object-fit: fill;
    border-radius: 10px;
  }
}
.table-rank {
  width: 100%;
  margin-top: px2rem(10);
  height: calc(100% - #{px2rem(60)});

  ::v-deep .row-item {
    cursor: pointer;
  }
}
.zhiliang-table {
  height: calc(100% - #{px2rem(70)});
}
.box {
  width: 100%;
  margin-top: px2rem(10);
  height: calc(100% - #{px2rem(50)});
}
</style>
