更新模块
This commit is contained in:
‘937886381’
328
src/views/modules/finishproduct/UDiagram.vue
Normal file
328
src/views/modules/finishproduct/UDiagram.vue
Normal file
@@ -0,0 +1,328 @@
|
||||
<!--
|
||||
* @Author: zhp
|
||||
* @Date: 2023-01-11 09:24:58
|
||||
* @LastEditTime: 2023-06-20 15:51:30
|
||||
* @LastEditors: zhp
|
||||
* @Description:
|
||||
-->
|
||||
<template>
|
||||
<el-card shadow="never" class="aui-card--fill">
|
||||
<div class="mod-sys__user">
|
||||
<el-form :inline="true" :model="dataForm" class="demo-form-inline">
|
||||
<el-form-item :label="$t('code.inspectionTime')" prop="timeSlot">
|
||||
<el-date-picker v-model="dataForm.timeSlot" size="small" type="datetimerange" format='yyyy-MM-dd HH:mm:ss'
|
||||
@change="getFactory" valueFormat='yyyy-MM-ddTHH:mm:ss' :start-placeholder="$t('gage.startTime')"
|
||||
:end-placeholder="$t('gage.endTime')" :range-separator="$t('gage.to')" clearable />
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('code.factoryName')">
|
||||
<el-select v-model="dataForm.factoryId" :placeholder="$t('code.factoryName')" @change="getInspectionType">
|
||||
<el-option v-for="item in factoryList" :key="item.id" :label="item.name" :value="item.id">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('code.productName')">
|
||||
<el-select v-model="dataForm.productId" :placeholder="$t('code.productName')" @change="gerCharacteristics">
|
||||
<el-option v-for="item in productList" :key="item.id" :label="item.name" :value="item.id">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<!-- <el-form-item :label="$t('code.inspectionType')">
|
||||
<el-select v-model="dataForm.inspectionType" :placeholder="$t('code.inspectionType')">
|
||||
<el-option v-for="item in inspectionTypeList" :key="item.id" :label="item.name" :value="item.id">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item> -->
|
||||
<el-form-item :label="$t('code.inspectionType')">
|
||||
<el-input v-model="dataForm.inspectionType" :placeholder="$t('code.inspectionType')"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('code.characteristics')">
|
||||
<el-select v-model="dataForm.characteristicsId" :placeholder="$t('code.characteristics')">
|
||||
<el-option v-for="item in characteristicsList" :key="item.id" :label="item.name" :value="item.id">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('code.grouping')">
|
||||
<el-radio v-model="dataForm.divideIntoGroup" label="0">批号</el-radio>
|
||||
<el-radio v-model="dataForm.divideIntoGroup" label="1">年</el-radio>
|
||||
<el-radio v-model="dataForm.divideIntoGroup" label="2">月</el-radio>
|
||||
<el-radio v-model="dataForm.divideIntoGroup" label="3">日</el-radio>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="getData">查询</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
<div id="priceMain" :style="{ width: '100%', height: '500px' }" />
|
||||
</el-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// import available from "./components/gageAvailable.vue"
|
||||
import i18n from "@/i18n"
|
||||
import * as echarts from 'echarts';
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
myChart: null,
|
||||
urlOptions: {
|
||||
getDataListURL: "/code/productRegistration/u/diagram",
|
||||
getFactoryURL: '/code/productRegistration/query/factory',
|
||||
getProductURL: '/code/productRegistration/query/product',
|
||||
getInspectionTypeURL: '/code/productRegistration/query/inspection/type',
|
||||
getPurchaseRegistrationTypeURL: '/code/productRegistration/query/checkout/project',
|
||||
},
|
||||
factoryList: [],
|
||||
productList: [],
|
||||
characteristicsList: [],
|
||||
listQuery: {
|
||||
characteristicsId: null,
|
||||
factoryId: null,
|
||||
inspectionType: null,
|
||||
productId: null,
|
||||
sampleSize: null,
|
||||
endTime: null,
|
||||
startTime: null,
|
||||
divideIntoGroup:null
|
||||
},
|
||||
dataForm: {
|
||||
productId: null,
|
||||
timeSlot: [],
|
||||
factoryId: null,
|
||||
characteristicsId: null,
|
||||
inspectionType: null,
|
||||
sampleSize: null,
|
||||
divideIntoGroup: null,
|
||||
endTime: null,
|
||||
startTime: null,
|
||||
},
|
||||
selectOptions: [{
|
||||
id: 0,
|
||||
name: '监控'
|
||||
},
|
||||
{
|
||||
id: 1,
|
||||
name: '电芯来料检验'
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
lname: 'IQC抽检'
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
name: 'IQC抽检2'
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
name: '原料抽检'
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
name: '进货外观检验'
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
name: '库内原料检验'
|
||||
},
|
||||
{
|
||||
id: 7,
|
||||
name: '来料检验'
|
||||
},
|
||||
{
|
||||
id: 8,
|
||||
name: '胶片'
|
||||
},
|
||||
{
|
||||
id: 9,
|
||||
name: '抽检'
|
||||
},
|
||||
{
|
||||
id: 10,
|
||||
name: '巡检'
|
||||
}, {
|
||||
id: 11,
|
||||
name: '首检'
|
||||
},
|
||||
{
|
||||
id: 12,
|
||||
name: '末检'
|
||||
},
|
||||
{
|
||||
id: 13,
|
||||
name: '实时监测'
|
||||
},
|
||||
{
|
||||
id: 14,
|
||||
name: 'FQC抽检'
|
||||
},
|
||||
{
|
||||
id: 15,
|
||||
name: 'OQC抽检'
|
||||
},
|
||||
],
|
||||
};
|
||||
},
|
||||
// components: {
|
||||
// AddOrUpdate,
|
||||
// },
|
||||
mounted() {
|
||||
this.getData()
|
||||
// this.getDict()
|
||||
},
|
||||
methods: {
|
||||
selectChanged(val) {
|
||||
console.log(val)
|
||||
alert(JSON.stringify(val))
|
||||
},
|
||||
getFactory(val) {
|
||||
console.log(val)
|
||||
this.$http.get(this.urlOptions.getFactoryURL, {
|
||||
params: {
|
||||
startTime: val[0],
|
||||
endTime: val[1]
|
||||
},
|
||||
})
|
||||
.then(({ data: res }) => {
|
||||
if (res.code === 0) {
|
||||
this.factoryList = res.data.map((item) => {
|
||||
return {
|
||||
id: item.factoryId,
|
||||
name: item.factoryName
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
this.$http.get(this.urlOptions.getProductURL, {
|
||||
params: {
|
||||
startTime: val[0],
|
||||
endTime: val[1]
|
||||
},
|
||||
})
|
||||
.then(({ data: res }) => {
|
||||
if (res.code === 0) {
|
||||
this.productList = res.data.map((item) => {
|
||||
return {
|
||||
id: item.productId,
|
||||
name: item.productName
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
getInspectionType(val) {
|
||||
this.$http.get(this.urlOptions.getInspectionTypeURL, {
|
||||
params: {
|
||||
startTime: this.dataForm.timeSlot[0],
|
||||
endTime: this.dataForm.timeSlot[1],
|
||||
factoryId: val
|
||||
},
|
||||
})
|
||||
.then(({ data: res }) => {
|
||||
if (res.code === 0) {
|
||||
this.dataForm.inspectionType = res.data.inspectionType
|
||||
}
|
||||
})
|
||||
},
|
||||
gerCharacteristics(val) {
|
||||
this.$http.get(this.urlOptions.getPurchaseRegistrationTypeURL, {
|
||||
params: {
|
||||
productId: val
|
||||
},
|
||||
})
|
||||
.then(({ data: res }) => {
|
||||
if (res.code === 0) {
|
||||
this.characteristicsList[0].id = res.data.id
|
||||
this.characteristicsList[0].name = res.data.parameterName
|
||||
|
||||
}
|
||||
})
|
||||
},
|
||||
getData() {
|
||||
this.dataForm.startTime = this.dataForm.timeSlot ? this.dataForm.timeSlot[0] : null
|
||||
this.dataForm.endTime = this.dataForm.timeSlot ? this.dataForm.timeSlot[1] : null
|
||||
this.$http
|
||||
.post(this.urlOptions.getDataListURL, {
|
||||
params: this.dataForm
|
||||
}
|
||||
)
|
||||
.then(({ data: res }) => {
|
||||
let xAxisData = []
|
||||
res.data.forEach((item) => {
|
||||
this.dataForm.divideIntoGroup === 0 ? xAxisData.push(item.batchNo) : this.dataForm.divideIntoGroup === 1 ? xAxisData.push(item.year) : this.dataForm.divideIntoGroup === 2 ? xAxisData.push(item.month) : this.dataForm.divideIntoGroup === 3 ? xAxisData.push(item.day) : ''
|
||||
})
|
||||
var chartDom = document.getElementById('priceMain');
|
||||
var myChart = echarts.init(chartDom)
|
||||
this.myChart = myChart
|
||||
var option;
|
||||
// myChart.on('click', function (params) {
|
||||
// console.log(params);
|
||||
// });
|
||||
myChart.on('click', 'xAxis.category', function (params) {
|
||||
console.log(params);
|
||||
});
|
||||
option = {
|
||||
title: {
|
||||
text: 'C图'
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis'
|
||||
},
|
||||
// legend: {
|
||||
// data: ['推移图']
|
||||
// },
|
||||
grid: {
|
||||
left: '3%',
|
||||
right: '4%',
|
||||
bottom: '3%',
|
||||
containLabel: true
|
||||
},
|
||||
xAxis: {
|
||||
data: xAxisData,
|
||||
type: 'category',
|
||||
axisLabel: {
|
||||
clickable: true
|
||||
},
|
||||
silent: false,
|
||||
triggerEvent: true
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
data: res.data.map(i => { return i.dpu })
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: ' 单位缺陷',
|
||||
type: 'line',
|
||||
stack: 'Total',
|
||||
data: res.data.map(i => { return i.dpu })
|
||||
},
|
||||
{
|
||||
name: ' UCL',
|
||||
type: 'line',
|
||||
stack: 'Total',
|
||||
data: res.data.map(i => { return i.ucl })
|
||||
},
|
||||
{
|
||||
name: 'LCL',
|
||||
type: 'line',
|
||||
stack: 'Total',
|
||||
data: res.data.map(i => { return i.lcl })
|
||||
}
|
||||
]
|
||||
};
|
||||
option && myChart.setOption(option);
|
||||
})
|
||||
},
|
||||
buttonClick(val) {
|
||||
console.log(val)
|
||||
switch (val.btnName) {
|
||||
case "search":
|
||||
this.getData()
|
||||
break;
|
||||
|
||||
default:
|
||||
console.log(val)
|
||||
}
|
||||
},
|
||||
}
|
||||
};
|
||||
</script>
|
||||
Reference in New Issue
Block a user