tft-fe/src/views/qualityManagement/components/defectScatterPlotTotal.vue

<template>
  <div class="bottom-box">
    <div class="bottom-left">
      <ul class="dataTab">
        <div class="title">颗粒数据</div>
        <li v-for="(item, index) in leftList" :key="index">
          <p class="tabHead">{{ item.name }}</p>
          <p class="tabValue" :title="item.value">{{ item.value }}</p>
        </li>
      </ul>
    </div>
    <div class="bottom-right">
      <ul class="dataTab">
        <div class="title">面检数据</div>
        <li v-for="(item, index) in rightList" :key="index">
          <p class="tabHead">{{ item.name }}</p>
          <p class="tabValue" :title="item.value">{{ item.value }}</p>
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
export default {
  name: 'DefectScatterPlot',
  data() {
    return {
      leftList: [
        { name: 'S', value: null, key: 's' },
        { name: 'M', value: null, key: 'm' },
        { name: 'L', value: null, key: 'l' },
        { name: 'XL', value: null, key: 'xl' }
      ],
      rightList: [
        { name: '气泡', value: null, key: 'bl' },
        { name: '变形', value: null, key: 'distortion' },
        { name: '纤维', value: null, key: 'fiber' },
        { name: '划伤', value: null, key: 'scratch' },
        { name: '点状缺陷', value: null, key: 'tin' },
        { name: '结石', value: null, key: 'stone' },
        { name: '铂金', value: null, key: 'pt' },
        { name: '结节', value: null, key: 'knot' },
        { name: '拖尾', value: null, key: 'tail' },
        { name: 'ADG', value: null, key: 'adg' },
        { name: '锡缺陷(顶部)', value: null, key: 'top' },
        { name: '锡缺陷(底部)', value: null, key: 'bottom' },
        { name: '无法识别', value: null, key: 'iisrest' }
      ]
    }
  },
  methods: {
    init(detailObj) {
      console.log(detailObj)
      for (let i = 0; i < this.leftList.length; i++) {
        this.leftList[i].value = detailObj[this.leftList[i].key]
          ? detailObj[this.leftList[i].key]
          : null
      }
      for (let i = 0; i < this.rightList.length; i++) {
        this.rightList[i].value = detailObj[this.rightList[i].key]
          ? detailObj[this.rightList[i].key]
          : null
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.bottom-box {
  overflow-x: auto;
  display: flex;
  .bottom-left,
  .bottom-right {
    display: inline-block;
  }
  .bottom-left {
    width: 290px;
    margin-right: 8px;
    .dataTab {
      li {
        width: 65px;
      }
    }
  }
  .bottom-right {
    width: calc(100% - 300px);
    .dataTab {
      li {
        width: 7.7%;
        min-width: 60px;
      }
    }
  }
}
.title {
  display: inline-block;
  height: 66px;
  width: 30px;
  font-size: 14px;
  line-height: 14px;
  font-weight: 500;
  padding: 5px 8px 0px;
  color: rgba(0, 0, 0, 0.85);
  background-color: #fafafa;
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
}
.dataTab {
  display: flex;
  flex-flow: row nowrap;
  li {
    font-size: 14px;
    border-right: 1px solid #e8e8e8;
    border-bottom: 1px solid #e8e8e8;
    p {
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
    .tabHead {
      height: 31px;
      background: #e9ebf0;
    }
    .tabHead,
    .tabValue {
      padding: 8px;
    }
    .tabValue {
      height: 35px;
    }
  }
}
</style>