265 lines
6.6 KiB
Vue
265 lines
6.6 KiB
Vue
<!--
|
|
* @Author: zhp
|
|
* @Date: 2023-06-19 09:19:53
|
|
* @LastEditTime: 2023-06-19 14:43:40
|
|
* @LastEditors: zhp
|
|
* @Description:
|
|
-->
|
|
<template>
|
|
<el-card shadow="never" class="aui-card--fill">
|
|
<el-row :gutter="24">
|
|
<el-col :span="18">
|
|
<div id="priceMain" :style="{ width: '100%', height: '500px' }" />
|
|
</el-col>
|
|
<el-col :span="6">
|
|
<el-table style="width: 100%" :data="getValues" :show-header="false">
|
|
<el-table-column width="180" v-for="(item, index) in getHeaders" :key="index" :prop="item">
|
|
</el-table-column>
|
|
</el-table>
|
|
</el-col>
|
|
</el-row>
|
|
</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/purchaseRegistration/single/value/movement/range/chart",
|
|
},
|
|
tableData: [],
|
|
headers: [
|
|
{
|
|
prop: 'usl',
|
|
label: 'USL',
|
|
},
|
|
{
|
|
prop: 'sl',
|
|
label: 'SL',
|
|
},
|
|
{
|
|
prop: 'lsl',
|
|
label: 'LSL',
|
|
},
|
|
{
|
|
prop: 'averageUcl',
|
|
label: 'CL(图一)',
|
|
},
|
|
{
|
|
prop: 'averageUcl',
|
|
label: 'UCL(图一)',
|
|
},
|
|
{
|
|
prop: 'averageLcl',
|
|
label: 'LCL(图一)',
|
|
},
|
|
{
|
|
prop: 'rangeCl',
|
|
label: 'CL(图二)',
|
|
},
|
|
{
|
|
prop: 'rangeLcl',
|
|
label: 'LCL(图二)',
|
|
},
|
|
{
|
|
prop: 'rangeUcl',
|
|
label: 'UCL(图二)',
|
|
},
|
|
{
|
|
prop: 'standardDeviationGroup',
|
|
label: '标准差',
|
|
},
|
|
{
|
|
prop: 'cpk',
|
|
label: 'cpk',
|
|
},
|
|
{
|
|
prop: 'standardDeviationWhole',
|
|
label: '总体标准差',
|
|
},
|
|
{
|
|
prop: 'ppk',
|
|
label: 'ppk',
|
|
},
|
|
{
|
|
prop: 'ca',
|
|
label: 'ca',
|
|
},
|
|
{
|
|
prop: 'cp',
|
|
label: 'cp',
|
|
},
|
|
{
|
|
prop: 'ca',
|
|
label: 'ca',
|
|
},
|
|
{
|
|
prop: 'average',
|
|
label: '均值',
|
|
},
|
|
{
|
|
prop: 'max',
|
|
label: '最大值',
|
|
},
|
|
{
|
|
prop: 'max',
|
|
label: '最大值',
|
|
},
|
|
],
|
|
listQuery: {
|
|
characteristicsId: null,
|
|
factoryId: null,
|
|
inspectionType: null,
|
|
productId: null,
|
|
sampleSize: null,
|
|
endTime: null,
|
|
startTime: null,
|
|
},
|
|
};
|
|
},
|
|
computed: {
|
|
getHeaders() {
|
|
return this.tableData.reduce((pre, cur, index) => pre.concat(`value${index}`), ['title'])
|
|
},
|
|
getValues() {
|
|
return this.headers.map(item => {
|
|
return this.tableData.reduce((pre, cur, index) => Object.assign(pre, { ['value' + index]: cur[item.prop] }), { 'title': item.label, });
|
|
});
|
|
}
|
|
},
|
|
// components: {
|
|
// AddOrUpdate,
|
|
// },
|
|
methods: {
|
|
getData(listQuery) {
|
|
this.$http
|
|
.post(this.urlOptions.getDataListURL, {
|
|
params: listQuery
|
|
}
|
|
)
|
|
.then(({ data: res }) => {
|
|
this.tableData.push({
|
|
average: res.data.average,
|
|
averageCl: res.data.averageCl,
|
|
averageLcl: res.data.averageLcl,
|
|
averageUcl: res.data.averageUcl,
|
|
ca: res.data.ca,
|
|
cp: res.data.cp,
|
|
cpk: res.data.cpk,
|
|
groupNum: res.data.groupNum,
|
|
lsl: res.data.lsl,
|
|
ppk: res.data.ppk,
|
|
rangeCl: res.data.rangeCl,
|
|
rangeLcl: res.data.rangeCl,
|
|
rangeUcl: res.data.rangeCl,
|
|
standardDeviationWhole: res.data.standardDeviationWhole,
|
|
usl: res.data.usl,
|
|
max: res.data.max,
|
|
min: res.data.min,
|
|
})
|
|
console.log(res)
|
|
let xAxisData = []
|
|
res.data.purchaseRegistrationCharacteristicsDTOList.forEach(ele => {
|
|
xAxisData.push(ele.batchNo + ele.groupNo)
|
|
})
|
|
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: xAxisData,
|
|
type: 'category',
|
|
axisLabel: {
|
|
clickable: true
|
|
},
|
|
silent: false,
|
|
triggerEvent: true
|
|
},
|
|
yAxis: {
|
|
type: 'value'
|
|
},
|
|
series: [
|
|
{
|
|
name: 'lsl',
|
|
type: 'bar',
|
|
barWidth: '50%',
|
|
data: [res.data.lsl]
|
|
},
|
|
{
|
|
name: 'UCL(图一)',
|
|
type: 'bar',
|
|
barWidth: '50%',
|
|
data: [res.data.averageUcl]
|
|
},
|
|
{
|
|
name: 'UCL(图二)',
|
|
type: 'bar',
|
|
barWidth: '50%',
|
|
data: [res.data.rangeUcl]
|
|
},
|
|
{
|
|
name: 'USL(图一)',
|
|
type: 'bar',
|
|
barWidth: '50%',
|
|
data: [res.data.usl]
|
|
},
|
|
{
|
|
name: 'CL(图一)',
|
|
type: 'bar',
|
|
barWidth: '50%',
|
|
data: [res.data.rangeCl]
|
|
},
|
|
{
|
|
name: 'CL(图一)',
|
|
type: 'bar',
|
|
barWidth: '50%',
|
|
data: [res.data.averageCl]
|
|
},
|
|
{
|
|
name: 'LCL(图一)',
|
|
type: 'bar',
|
|
barWidth: '50%',
|
|
data: [res.data.averageLcl]
|
|
},
|
|
{
|
|
name: 'SL',
|
|
type: 'bar',
|
|
barWidth: '50%',
|
|
data: [res.data.sl]
|
|
},
|
|
]
|
|
};
|
|
option && myChart.setOption(option);
|
|
})
|
|
},
|
|
}
|
|
};
|
|
</script>
|