xc-pad/src/views/Quality.vue

<!--
 * @Author: Do not edit
 * @Date: 2024-01-09 13:48:42
 * @LastEditTime: 2024-01-11 09:26:12
 * @LastEditors: DY
 * @Description:
-->
<template>
  <div class="quality">
    <van-row type="flex" justify="space-between">
      <van-col span="5" style="text-align: left">
        <h2>质量管理器</h2>
      </van-col>
      <van-col span="4" style="text-align: right">
        <img class="homeIcon" @click="toHome" src="./../assets/home.png" alt="">
      </van-col>
    </van-row>
    <van-row gutter="20" style="margin-top: -20px;">
      <van-col span="12">
        <van-dropdown-menu >
          <van-dropdown-item v-model="listQuery.productionLineId" :options="lineArray" @change="getSection()" />
        </van-dropdown-menu>
      </van-col>
      <van-col span="12">
        <van-dropdown-menu>
          <van-dropdown-item v-model="listQuery.sectionId" :options="sectionArray" @change="getQuality()" />
        </van-dropdown-menu>
      </van-col>
    </van-row>
    <div class="count">
      本班次合计数量：{{ count }}
    </div>
    <div class="content" v-for="(item, index) in typeList" :key="index">
      <van-row type="flex" align="center" style="margin-left: -20px">
        <van-col span="1">
          <img style="width: 20px; height: 20px;" src="./../assets/icon.png" alt="">
        </van-col>
        <van-col span="8">
          <p style="text-align: left; color: #276BFF">{{ item[0].typeName }}</p>
        </van-col>
      </van-row>
      <van-row type="flex">
        <van-col span="6" v-for="it in item" :key="it.id">
          <div :class=" it.active ? 'flexActive' : 'flexItem'">
            <!-- <div> -->
              <div class="contain">
              <div class="leftDiv">{{ it.count }}</div>
              </div>
            <!-- </div> -->
            <!-- <div> -->
              <div class="rightDiv" @click="addRecord(it)">{{ it.detContent }}</div>
            <!-- </div> -->
          </div>
        </van-col>
      </van-row>
    </div>
  </div>
</template>

<script>
import { lineList, workshopSectionListByLine, qualityManage, createInspection } from '@/api/quality'

export default {
  name: 'Quality',
  data () {
    return {
      lineArray: [],
      sectionArray: [],
      listQuery: {
        productionLineId: '',
        sectionId: ''
      },
      count: 0,
      typeList: []
    }
  },
  mounted () {
    this.getLine()
  },
  methods: {
    addRecord (value) {
      const now = new Date() // 创建一个表示当前时间的Date对象
      const formattedTime = `${now.getFullYear()}-${(now.getMonth() + 1).toString().padStart(2, '0')}-${now.getDate().toString().padStart(2, '0')} ${now.getHours().toString().padStart(2, '0')}:${now.getMinutes().toString().padStart(2, '0')}:${now.getSeconds().toString().padStart(2, '0')}`
      // console.log(formattedTime)
      createInspection({
        ...this.listQuery,
        inspectionDetId: value.detId,
        checkTime: formattedTime
      }).then(res => {
        if (res.data.code === 0) {
          this.$set(value, 'active', true)
          value.count++
          this.count++
        }
      })
    },
    toHome () {
      this.$router.push({
        path: 'home'
      })
    },
    getQuality () {
      qualityManage(this.listQuery).then(res => {
        if (JSON.stringify(res.data.data) !== '{}') {
          this.typeList = Object.values(res.data.data)
          this.count = this.typeList[0][0].sunCount
        } else {
          this.typeList = []
          this.count = 0
        }
      })
    },
    getLine () {
      lineList().then(res => {
        if (res && res.data.data.length > 0) {
          this.lineArray = res.data.data.map(item => {
            return {
              text: item.name,
              value: item.id
            }
          })
        } else {
          this.lineArray = []
        }
      })
    },
    getSection () {
      workshopSectionListByLine({ id: this.listQuery.productionLineId }).then(res => {
        this.sectionArray = res.data.data.map(item => {
          return {
            text: item.name,
            value: item.id
          }
        })
      })
    }
  }
}
</script>

<style scoped>
.flexItem {
  display: flex;
  margin-right: 20px;
  width: 226px;
  line-height: 72px;
  box-shadow: 5px 6px 8px 0px rgba(206,212,226,0.72), inset 6px 0px 6px 0px #FFFFFF;
  background-color: #FFFFFF;
}
.flexActive {
  display: flex;
  margin-right: 20px;
  width: 226px;
  line-height: 72px;
  box-shadow: 5px 6px 8px 0px rgba(206,212,226,0.72), inset 6px 0px 6px 0px #FFFFFF;
  background-color: #276BFF;
}
.rightDiv {
  border-radius: 7px;
  height: 72px;
  line-height: 72px;
  width: 140px;
  /* background-color: #276BFF; */
}
.contain {
  border-radius: 7px 36px 36px 7px;
  height: 72px;
  width: 80px;
  line-height: 72px;
  background-color: #FFFFFF;
  /* margin: 5px 0 5px 0; */
}
.leftDiv {
  border-radius: 7px 36px 36px 7px;
  background-color: #276BFF;
  height: 72px;
  width: 77px;
  line-height: 72px;
  /* margin: 5px 0 5px 0; */
}
.content {
  width: 100%;
  /* height: 40px; */
  /* display: flex; */
  flex-wrap: wrap;
  justify-content: space-around;
  align-items: center;
  background: #FFFFFF;
  border-radius: 8px;
  opacity: 0.7;
  backdrop-filter: blur(50px);
  line-height: 40px;
  font-size: 18px;
  font-family: PingFangSC, PingFang SC;
  font-weight: 400;
  color: #000000;
  margin-top: 7px;
  padding: 0 20px 20px 20px;
  box-sizing: border-box;
}
.count {
  width: 100%;
  height: 40px;
  background: #FFFFFF;
  border-radius: 8px;
  opacity: 0.7;
  backdrop-filter: blur(50px);
  line-height: 40px;
  font-size: 18px;
  font-family: PingFangSC, PingFang SC;
  font-weight: 600;
  color: #000000;
  margin-top: 7px;
}
.homeIcon {
  width: 84px;
  height: 84px;
}
.quality {
  background-image: url('./../assets/quality-bg.png');
  height: 100vh;
  width: 100vw;
  padding: 20px 20px;
  box-sizing: border-box;
}
</style>