shgx_tz_vue-sync/src/views/qualityManagement/FQC/firstFQC.vue

<template>
  <div class="app-container">
    <div class="animate__animated animate__shakeX title">车镜油漆缺陷采集系统</div>
    <el-row>
      <el-col :span="1">
        <div style="height: 225px">
          <div class="title_Line">抛光</div>
          <div class="title_Line">打磨</div>
          <div class="title_Line">报废</div>
        </div>
        <div style="height: 250px">
          <div class="title_Line">抛光</div>
          <div class="title_Line">打磨</div>
          <div class="title_Line">报废</div>
        </div>
      </el-col>
      <el-col :span="23">
        <div>
          <div class="grid">
            <div class="a">
              <div class="title_sub">{{ checkItemTable.paint[0].inspectionModule }}</div>
              <div class="grid_sub">
                <div class="a_11" v-for="(item, index) of checkItemTable.paint" :key="index">{{ item.inspectionName }}</div>
              </div>
            </div>
            <div class="b">
              <div class="title_sub">{{ checkItemTable.device[0].inspectionModule }}</div>
              <div class="grid_sub">
                <div class="a_11" v-for="(item, index) of checkItemTable.device" :key="index">{{ item.inspectionName }}</div>
              </div>
            </div>
            <div class="c">
              <div class="title_sub">{{ checkItemTable.blank[0].inspectionModule }}</div>
              <div class="grid_sub">
                <div class="a_11" v-for="(item, index) of checkItemTable.blank" :key="index">{{ item.inspectionName }}</div>
              </div>
            </div>
            <div class="d">
              <div class="title_sub">{{ checkItemTable.program[0].inspectionModule }}</div>
              <div class="grid_sub">
                <div class="a_11" v-for="(item, index) of checkItemTable.program" :key="index">{{ item.inspectionName }}</div>
              </div>
            </div>
            <div class="e">
              <div class="title_sub">{{ checkItemTable.team[0].inspectionModule }}</div>
              <div class="grid_sub">
                <div class="a_11" v-for="(item, index) of checkItemTable.team" :key="index">{{ item.inspectionName }}</div>
              </div>
            </div>
            <div class="f">
              <div class="f_item">
                <div class="f_name">产品名称：</div>
                <div></div>
              </div>
              <div class="f_item">
                <div class="f_name">左右:</div>
                <div></div>
              </div>
              <div class="f_item">
                <div class="f_name">颜色:</div>
                <div></div>
              </div>

              <div class="f_item">
                <div class="f_name">班组:</div>
                <div></div>
              </div>

              <div class="f_item">
                <div class="f_name">投入数:</div>
                <div></div>
              </div>
            </div>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { GetcheckItemTable } from '@/api/qualityManagement/firstFQC.js'
export default {
  name: 'firstFQC',
  data() {
    return {
      checkItemTable: {
        paint: [],
        device: [],
        blank: [], // 毛坯
        program: [], // 程序
        team: [], //班组
      },
      ProductSituationForm: {
        name: '',
      },
    }
  },
  mounted() {
    this.getCheckItemList()
  },
  methods: {
    //todo  获取检测项
    getCheckItemList() {
      GetcheckItemTable()
        .then((result) => {
          if (result.code == 200) {
            this.checkItemTable = result.data
          }
        })
        .catch((err) => {})
    },
  },
}
</script>

<style lang="scss" scoped>
.title {
  font-family: Arial, sans-serif;
  font-size: 30px;
  color: #303133;
  line-height: 1.5;
  text-align: center;
}
.grid {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  grid-gap: 0.5em;
  .a {
    .title_sub {
      font-family: Arial, sans-serif;
      font-size: 1.5rem;
      color: #303133;
      text-align: center;
    }
    .grid_sub {
      width: 100%;
      display: grid;
      grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
      grid-template-rows: 1fr 1fr 1fr;
      grid-gap: 0.5em;
    }
  }
  .b {
    .title_sub {
      font-family: Arial, sans-serif;
      font-size: 1.5rem;
      color: #303133;
      text-align: center;
    }
    .grid_sub {
      width: 100%;
      display: grid;
      grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
      grid-template-rows: 1fr 1fr 1fr;
      grid-gap: 0.5em;
    }
  }
  .c {
    .title_sub {
      font-family: Arial, sans-serif;
      font-size: 1.5rem;
      color: #303133;
      text-align: center;
    }
    .grid_sub {
      width: 100%;
      display: grid;
      grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
      grid-template-rows: 1fr 1fr 1fr;
      grid-gap: 0.5em;
    }
  }
  .d {
    .title_sub {
      font-family: Arial, sans-serif;
      font-size: 1.5rem;
      color: #303133;
      text-align: center;
    }
    .grid_sub {
      width: 100%;
      display: grid;
      grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
      grid-template-rows: 1fr 1fr 1fr;
      grid-gap: 0.5em;
    }
  }
  .e {
    .title_sub {
      font-family: Arial, sans-serif;
      font-size: 1.5rem;
      color: #303133;
      text-align: center;
    }
    .grid_sub {
      width: 100%;
      display: grid;
      grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
      grid-template-rows: 1fr 1fr 1fr;
      grid-gap: 0.5em;
    }
  }
  .f {
  }
}
.grid > * {
  height: 250px;
  background-color: #EBEEF5;
  color: white;
  border-radius: 0.5em;
}

.grid_sub > * {
  height: 60px;
  background-color: #53a8ff;
  color: white;
  border-radius: 0.2em;
  transition: all 0.2s ease-in-out;
  &:hover {
  cursor: pointer;
  box-shadow: 0 0 0 rgba(0, 0, 0, 0.2), 0 0 0 #c6e2ff, inset 18px 18px 30px rgba(0, 0, 0, 0.1),
    inset -18px -18px 30px #c6e2ff;
}
}

.title_Line {
  color: #409eff;
  font-family: Arial, sans-serif;
  font-size: 1.5rem;
  text-align: center;
  margin-top: 40px;
}
.f_item {
  margin-top: 10px;
  margin-left: 20px;
}
.f_name {
  color: #dd7118;
  font-family: Arial, sans-serif;
  font-size: 1.2rem;
}
</style>