320 lines
9.2 KiB
Vue
320 lines
9.2 KiB
Vue
|
|
<!--
|
|
* @Author: zhp
|
|
* @Date: 2023-01-11 09:24:58
|
|
* @LastEditTime: 2023-06-20 15:51:17
|
|
* @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.sampleSize')">
|
|
<el-input v-model="dataForm.sampleSize" :placeholder="$t('code.sampleSize')"></el-input>
|
|
</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/transition/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,
|
|
},
|
|
dataForm: {
|
|
productId: null,
|
|
timeSlot: [],
|
|
factoryId: null,
|
|
characteristicsId: null,
|
|
inspectionType: null,
|
|
sampleSize: 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.$http
|
|
.post(this.urlOptions.getDataListURL, {
|
|
params: this.listQuery
|
|
}
|
|
)
|
|
.then(({ data: res }) => {
|
|
console.log(res)
|
|
let xAxisData = []
|
|
let yAxisData = []
|
|
res.data.purchaseRegistrationCharacteristicsDTOList.forEach(ele => {
|
|
xAxisData.push(ele.batchNo + ele.groupNo)
|
|
})
|
|
res.data.purchaseRegistrationCharacteristicsDTOList.forEach(ele => {
|
|
yAxisData.push(ele.countValue)
|
|
})
|
|
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: '推移图'
|
|
},
|
|
tooltip: {
|
|
trigger: 'axis'
|
|
},
|
|
// legend: {
|
|
// data: ['推移图']
|
|
// },
|
|
grid: {
|
|
left: '3%',
|
|
right: '4%',
|
|
bottom: '3%',
|
|
containLabel: true
|
|
},
|
|
xAxis: {
|
|
data: res.data.map(i => { return i.batchNo + i.groupNo }),
|
|
type: 'category',
|
|
axisLabel: {
|
|
clickable: true
|
|
},
|
|
silent: false,
|
|
triggerEvent: true
|
|
},
|
|
yAxis: {
|
|
type: 'value'
|
|
},
|
|
series: [
|
|
{
|
|
name: '计数型值',
|
|
type: 'line',
|
|
stack: 'Total',
|
|
data: res.data.map(i => { return i.countValue })
|
|
}
|
|
]
|
|
};
|
|
option && myChart.setOption(option);
|
|
})
|
|
},
|
|
buttonClick(val) {
|
|
console.log(val)
|
|
switch (val.btnName) {
|
|
case "search":
|
|
this.dataForm.sampleSize = val.sampleSize ? val.sampleSize : null
|
|
this.dataForm.inspectionType = val.inspectionType ? val.inspectionType : null
|
|
this.dataForm.characteristicsId = val.characteristicsId ? val.characteristicsId : null
|
|
this.dataForm.factoryId = val.factoryId ? val.factoryId : null
|
|
this.dataForm.productId = val.productId ? val.productId : null
|
|
this.dataForm.startTime = val.timeSlot ? val.timeSlot[0] : null
|
|
this.dataForm.endTime = val.timeSlot ? val.timeSlot[1] : null
|
|
this.getData()
|
|
break;
|
|
|
|
default:
|
|
console.log(val)
|
|
}
|
|
},
|
|
}
|
|
};
|
|
</script>
|