<script setup lang="ts">
|
import { ref, onMounted, watch, nextTick } from 'vue'
|
import { ElMessage } from 'element-plus'
|
import TaskTabs from '@/views/dashboard/components/TaskTabs.vue'
|
import CurrentDateTime from '@/views/dashboard/components/CurrentDateTime.vue'
|
import {
|
getQualityProcedureApi,
|
getProjectApi,
|
getProductApi,
|
getWorkerApi,
|
updateQualityProcedureApi,
|
qualityCountApi,
|
IQualityCountParams
|
} from '@/api'
|
import BigButton from '@/views/dashboard/components/BigButton.vue'
|
import EditInspection from '@/views/newDashboard/components/EditInspection.vue'
|
defineOptions({
|
name: 'NewDashboardView'
|
})
|
const taskTabsList: Array<any> = [
|
{ label: '待质检', value: 1 },
|
{ label: '已质检', value: 3 }
|
]
|
const activeTaskTab = ref(1)
|
const projectList = ref([])
|
const productList = ref([])
|
const projectIdArray = ref([])
|
const productIdArray = ref([])
|
const workerList = ref([])
|
const pageData = ref({ page: 1, pageSize: 1000 })
|
const modalObj = ref({ modalValue: false })
|
const qualityList = ref([])
|
const lookQuality = ref({})
|
const oldLookQuality = ref({})
|
const DEFAULT_QUALITY_COUNT = { wait: '--', over: '--', scrapped: '--', pass: '--' }
|
const qualityCountObj = ref({ ...DEFAULT_QUALITY_COUNT })
|
const tableHeaderColor = ({ rowIndex }: any) => {
|
if (rowIndex === 0) {
|
return 'header-row-class' // 这个类名需要你自己定义
|
}
|
}
|
const checkProduct = (quality: any) => {
|
lookQuality.value = { ...quality }
|
oldLookQuality.value = { ...quality }
|
modalObj.value.modalValue = true
|
}
|
const editInspection = (quality: any) => {
|
updateQualityProcedureApi(quality).then(({ code, data }: any) => {
|
if (code == 200) {
|
ElMessage.success(data)
|
queryQualityProcedure()
|
queryQualityCount()
|
modalObj.value.modalValue = false
|
} else {
|
ElMessage.error(data)
|
}
|
})
|
}
|
//1.查询项目列表
|
const queryProject = () => {
|
getProjectApi(pageData.value).then(({ code, data }: any) => {
|
if (code == 200) {
|
projectList.value = data
|
if (Array.isArray(data) && data.length > 0) {
|
projectIdArray.value[0] = data[0].id
|
queryProduct()
|
}
|
}
|
})
|
}
|
//2.根据项目编号查询产品列表
|
const queryProduct = () => {
|
if (projectIdArray.value && projectIdArray.value.length > 0) {
|
getProductApi({ projectId: projectIdArray.value[0], ...pageData.value }).then(({ code, data }) => {
|
if (code == 200) {
|
productList.value = data
|
if (Array.isArray(data) && data.length > 0) {
|
productIdArray.value[0] = data[0].id
|
queryQualityProcedure()
|
queryQualityCount()
|
}
|
}
|
})
|
} else {
|
productList.value = []
|
productIdArray.value = []
|
}
|
}
|
//3.查询工序质检列表
|
const queryQualityProcedure = () => {
|
const params: any = { status: activeTaskTab.value, projectId: '', productId: '', ...pageData.value, keyword: '' }
|
if (Array.isArray(projectIdArray.value) && projectIdArray.value.length > 0) {
|
params.projectId = projectIdArray.value[0] + ''
|
} else {
|
qualityList.value = []
|
return
|
}
|
if (Array.isArray(productIdArray.value) && productIdArray.value.length > 0) {
|
params.productId = productIdArray.value[0] + ''
|
} else {
|
qualityList.value = []
|
return
|
}
|
getQualityProcedureApi(params).then(({ code, data }: any) => {
|
if (code == 200) {
|
qualityList.value = data
|
}
|
})
|
}
|
//4. 条件变化更新工序质检列表数据
|
watch(
|
[() => activeTaskTab.value, () => productIdArray.value, () => projectIdArray.value],
|
() => {
|
queryQualityProcedure()
|
queryQualityCount()
|
},
|
{ immediate: false }
|
)
|
//5. 查询所有加工人员列表
|
const queryWorker = () => {
|
getWorkerApi(pageData.value).then(({ code, data }: any) => {
|
if (code == 200) {
|
workerList.value = data
|
}
|
})
|
}
|
//6.查询质检数据统计
|
const queryQualityCount = () => {
|
const params: IQualityCountParams = { productId: '', projectId: '' }
|
if (Array.isArray(projectIdArray.value) && projectIdArray.value.length > 0) {
|
params.projectId = projectIdArray.value[0] + ''
|
} else {
|
qualityCountObj.value = { ...DEFAULT_QUALITY_COUNT }
|
return
|
}
|
if (Array.isArray(productIdArray.value) && productIdArray.value.length > 0) {
|
params.productId = productIdArray.value[0] + ''
|
} else {
|
qualityCountObj.value = { ...DEFAULT_QUALITY_COUNT }
|
return
|
}
|
qualityCountApi(params).then(({ code, data }) => {
|
if (code == 200) {
|
for (let fieldName in data) {
|
if (isNaN(parseInt(data[fieldName]))) {
|
data[fieldName] = '--'
|
}
|
}
|
qualityCountObj.value = data
|
}
|
})
|
}
|
//6.初始化页面数据
|
const initPage = () => {
|
queryProject()
|
queryWorker()
|
}
|
onMounted(() => {
|
initPage()
|
})
|
</script>
|
<template>
|
<EditInspection
|
:worker-list="workerList"
|
:look-quality="lookQuality"
|
:modal-obj="modalObj"
|
:old-look-quality="oldLookQuality"
|
@edit-inspection="editInspection"
|
></EditInspection>
|
<div class="container">
|
<div class="head">
|
<div class="left"></div>
|
<div class="title">质检工作台</div>
|
<div class="right"><CurrentDateTime></CurrentDateTime></div>
|
</div>
|
<div class="statistic">
|
<div class="item">
|
<div class="img bg1"><img src="@/assets/images/u820.png" /></div>
|
<div class="text">
|
<div>待检测</div>
|
<div>{{ qualityCountObj.wait }}</div>
|
</div>
|
</div>
|
<div class="item">
|
<div class="img bg2"><img src="@/assets/images/u820.png" /></div>
|
<div class="text">
|
<div>完成数</div>
|
<div>{{ qualityCountObj.over }}</div>
|
</div>
|
</div>
|
<div class="item">
|
<div class="img bg3"><img src="@/assets/images/u820.png" /></div>
|
<div class="text">
|
<div>合格率</div>
|
<div class="success-number">
|
{{ qualityCountObj.pass }}
|
<span v-show="!isNaN(parseInt(qualityCountObj.pass))">%</span>
|
</div>
|
</div>
|
</div>
|
<div class="item">
|
<div class="img bg4"><img src="@/assets/images/u820.png" /></div>
|
<div class="text">
|
<div>报废率</div>
|
<div class="fail-number">
|
{{ qualityCountObj.scrapped }}<span v-show="!isNaN(parseInt(qualityCountObj.scrapped))">%</span>
|
</div>
|
</div>
|
</div>
|
</div>
|
<div class="table-filter">
|
<div class="left">
|
<TaskTabs v-model="activeTaskTab" style="margin-top: 20px" :list="taskTabsList"></TaskTabs>
|
</div>
|
<div class="right">
|
<el-select
|
v-model="projectIdArray"
|
:teleported="false"
|
size="large"
|
:multiple-limit="1"
|
multiple
|
placeholder="项目"
|
@change="queryProduct"
|
>
|
<el-option v-for="item in projectList" :key="item.id" :label="item.projectName" :value="item.id" multiple>
|
<div class="item-option">
|
<div>{{ item.id }}</div>
|
<div>{{ item.projectName }}</div>
|
</div>
|
</el-option>
|
</el-select>
|
<el-select
|
v-model="productIdArray"
|
:teleported="false"
|
size="large"
|
:multiple-limit="1"
|
multiple
|
placeholder="产品"
|
>
|
<el-option v-for="item in productList" :key="item.id" :label="item.name" :value="item.id" multiple>
|
<div class="item-option">
|
<div>{{ item.id }}</div>
|
<div>{{ item.name }}</div>
|
</div>
|
</el-option>
|
</el-select>
|
</div>
|
</div>
|
<div class="table">
|
<!--<el-empty v-if="qualityList.length == 0" description="暂无数据" />-->
|
<el-table
|
:data="qualityList"
|
:header-cell-class-name="tableHeaderColor"
|
row-class-name="row-bg"
|
style="width: 100%; background: transparent"
|
border
|
>
|
<el-table-column fixed prop="procedureName" style="background: gray" align="center" label="产品工序" />
|
<el-table-column prop="workOrderId" align="center" label="工单编号" />
|
<el-table-column prop="productName" align="center" label="产品名称" />
|
<el-table-column prop="drawingNumber" align="center" label="产品图号" />
|
<el-table-column prop="amount" align="center" label="计划数" />
|
<el-table-column prop="transferAmount" align="center" label="转入数" />
|
<el-table-column prop="scrappedAmount" align="center" label="报废数" />
|
<el-table-column prop="passAmount" align="center" label="合格数" />
|
<el-table-column prop="workerName" align="center" label="加工人员" />
|
<el-table-column prop="inspectionPeople" align="center" label="质检员" />
|
<!--<el-table-column prop="procedureId" align="center" label="工序号" />-->
|
<el-table-column fixed="right" align="center" label="操作" width="120px">
|
<template #default="scope">
|
<BigButton bg-color="#00ff00" @click="checkProduct(scope.row)">质检</BigButton>
|
</template>
|
</el-table-column>
|
<template #empty>
|
<el-empty description="暂无数据"></el-empty>
|
</template>
|
</el-table>
|
</div>
|
</div>
|
</template>
|
|
<style scoped lang="scss">
|
.container {
|
.head {
|
background-image: url('/header-bg.png');
|
background-position-x: center;
|
background-repeat: no-repeat;
|
display: flex;
|
flex-wrap: wrap;
|
align-items: center;
|
justify-content: space-between;
|
padding: 12px;
|
.left {
|
width: 25%;
|
}
|
.title {
|
width: 50%;
|
font-family: 'Arial Negreta', 'Arial Normal', 'Arial';
|
font-weight: 700;
|
font-style: normal;
|
font-size: 36px;
|
color: #ffffff;
|
text-align: center;
|
}
|
.right {
|
line-height: 60px;
|
background-image: url('@/assets/images/u883.png');
|
background-position-x: 0px;
|
background-position-y: 10px;
|
background-repeat: no-repeat;
|
background-size: 40px;
|
width: 25%;
|
padding-left: 60px;
|
}
|
.left,
|
.title,
|
.right {
|
margin-top: 12px;
|
}
|
}
|
.statistic {
|
display: flex;
|
flex-wrap: wrap;
|
justify-content: space-around;
|
.item {
|
border-width: 0px;
|
width: 24%;
|
height: 144px;
|
background-color: rgba(22, 72, 173, 0.737254901960784);
|
border: none;
|
border-radius: 8px;
|
-moz-box-shadow: none;
|
-webkit-box-shadow: none;
|
box-shadow: none;
|
.img {
|
text-align: center;
|
display: inline-block;
|
margin: 0px 30px;
|
position: relative;
|
top: -5px;
|
width: 98px;
|
height: 98px;
|
img {
|
width: 50%;
|
position: relative;
|
top: 23px;
|
}
|
}
|
.bg1 {
|
background: url('@/assets/images/u819.png') no-repeat;
|
background-size: cover;
|
}
|
.bg2 {
|
background: url('@/assets/images/u837.png') no-repeat;
|
background-size: cover;
|
}
|
.bg3 {
|
background: url('@/assets/images/u825.png') no-repeat;
|
background-size: cover;
|
}
|
.bg4 {
|
background: url('@/assets/images/u831.png') no-repeat;
|
background-size: cover;
|
}
|
.text {
|
display: inline-block;
|
position: relative;
|
top: 25px;
|
font-size: 25px;
|
}
|
.success-number {
|
color: #00ff00;
|
}
|
.fail-number {
|
color: #ff0000;
|
}
|
}
|
}
|
.table-filter {
|
display: flex;
|
justify-content: space-between;
|
.left {
|
width: 30%;
|
margin-left: 10px;
|
}
|
.right {
|
width: 40%;
|
display: flex;
|
justify-content: space-around;
|
margin-top: 2.5vh;
|
margin-right: -10px;
|
.el-select {
|
width: 256px;
|
:deep(.el-select__wrapper) {
|
background-color: transparent !important;
|
}
|
}
|
.el-select-dropdown__item {
|
color: white;
|
}
|
.el-select-dropdown__item.is-hovering {
|
color: #fff;
|
background: transparent !important;
|
/*background: linear-gradient(*/
|
/*to right,*/
|
/*rgba(147, 250, 255, 0),*/
|
/*rgba(147, 250, 255, 0.4),*/
|
/*rgba(147, 250, 255, 0)*/
|
/*);*/
|
}
|
:deep(.el-select__popper) {
|
width: 100%;
|
border: 1px solid #1ca898;
|
background: deepskyblue;
|
}
|
.item-option {
|
width: 100%;
|
display: flex;
|
flex: 1;
|
> div {
|
min-width: 50%;
|
white-space: nowrap;
|
overflow: hidden;
|
text-overflow: ellipsis;
|
text-align: center;
|
}
|
}
|
:deep(.el-select__selection .el-tag) {
|
background: transparent;
|
font-size: 16px;
|
color: white;
|
}
|
:deep(.el-icon) {
|
display: none;
|
}
|
}
|
}
|
.table {
|
margin: 20px 10px;
|
}
|
}
|
:deep(.row-bg) {
|
background-color: transparent;
|
color: white;
|
&:hover {
|
color: #181818;
|
}
|
}
|
:deep(.header-row-class) {
|
background-color: #007fff !important;
|
font-size: 20px;
|
color: white;
|
}
|
</style>
|
