<template>
|
<div>
|
<div>
|
<el-row class="title">
|
<el-col :span="6" style="padding-left: 20px;text-align: left;">数据分析</el-col>
|
<el-col :span="18" style="text-align: right;">
|
<el-button size="small" @click="$emit('goBack')">返回</el-button>
|
</el-col>
|
</el-row>
|
</div>
|
<div class="container">
|
<div>
|
<div style="padding: 0 0 10px 10px">填写厂家数据</div>
|
<el-form ref="supplierForm" :model="supplierForm" :rules="rules" class="demo-ruleForm" label-width="40px">
|
<el-row :gutter="20">
|
<el-col :span="3">
|
<el-form-item label="1：" prop="one">
|
<el-input v-model="supplierForm.one" size="small"></el-input>
|
</el-form-item>
|
</el-col>
|
<el-col :span="3">
|
<el-form-item label="2：" prop="two">
|
<el-input v-model="supplierForm.two" size="small"></el-input>
|
</el-form-item>
|
</el-col>
|
<el-col :span="3">
|
<el-form-item label="3：" prop="three">
|
<el-input v-model="supplierForm.three" size="small"></el-input>
|
</el-form-item>
|
</el-col>
|
<el-col :span="3">
|
<el-form-item label="4：" prop="four">
|
<el-input v-model="supplierForm.four" size="small"></el-input>
|
</el-form-item>
|
</el-col>
|
<el-col :span="3">
|
<el-form-item label="5：" prop="five">
|
<el-input v-model="supplierForm.five" size="small"></el-input>
|
</el-form-item>
|
</el-col>
|
<el-col :span="4">
|
<el-form-item>
|
<el-button size="small" type="primary" @click="submitForm()">数据分析</el-button>
|
<el-button size="small" @click="resetForm()">重置</el-button>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
</el-form>
|
</div>
|
<table :border='true' class="table">
|
<tr>
|
<th class="thTitle"> </th>
|
<th class="thTitle">1</th>
|
<th class="thTitle">2</th>
|
<th class="thTitle">3</th>
|
<th class="thTitle">4</th>
|
<th class="thTitle">5</th>
|
<th class="thTitle">平均值</th>
|
<th class="thTitle">标准偏差</th>
|
<th class="thTitle">相对偏差</th>
|
<th class="thTitle">平均标准偏差</th>
|
</tr>
|
<tr>
|
<td class="thBack">厂家检测数据</td>
|
<td v-for="(item,index) in supplierData" :key="index" class="tdData">{{item}}</td>
|
</tr>
|
<tr>
|
<td class="thBack">检测中心数据</td>
|
<td v-for="(item,index) in localData" :key="index" class="tdData">{{item}}</td>
|
</tr>
|
<tr>
|
<td class="thBack">绝对偏差</td>
|
<td v-for="(item,index) in absoluteDeviation" :key="index" class="tdData">{{item}}</td>
|
</tr>
|
<tr>
|
<td class="thBack">平均值</td>
|
<td v-for="(item,index) in average" :key="index" class="tdData">{{item}}</td>
|
</tr>
|
<tr>
|
<td class="thBack2">厂家</td>
|
</tr>
|
<tr>
|
<td class="thBack">UCL</td>
|
<td v-for="(item,index) in supplierULC" :key="index" class="tdData">{{item}}</td>
|
<td v-for="(item,index) in empty" :key="'a' + index" class="tdData"></td>
|
</tr>
|
<tr>
|
<td class="thBack">LCL</td>
|
<td v-for="(item,index) in supplierLCL" :key="index" class="tdData">{{item}}</td>
|
<td v-for="(item,index) in empty" :key="'b' + index" class="tdData"></td>
|
</tr>
|
<tr>
|
<td class="thBack">平均值</td>
|
<td v-for="(item,index) in supplierAverage" :key="index" class="tdData">{{item}}</td>
|
<td v-for="(item,index) in empty" :key="'c' + index" class="tdData"></td>
|
</tr>
|
<tr>
|
<td class="thBack">极差</td>
|
<td v-for="(item,index) in supplierRange" :key="index" class="tdData">{{item}}</td>
|
<td v-for="(item,index) in empty" :key="'d' + index" class="tdData"></td>
|
</tr>
|
<tr>
|
<td class="thBack2">检测中心</td>
|
</tr>
|
<tr>
|
<td class="thBack">UCL</td>
|
<td v-for="(item,index) in localULC" :key="index" class="tdData">{{item}}</td>
|
<td v-for="(item,index) in empty" :key="'e' + index" class="tdData"></td>
|
</tr>
|
<tr>
|
<td class="thBack">LCL</td>
|
<td v-for="(item,index) in localLCL" :key="index" class="tdData">{{item}}</td>
|
<td v-for="(item,index) in empty" :key="'f' + index" class="tdData"></td>
|
</tr>
|
<tr>
|
<td class="thBack">平均值</td>
|
<td v-for="(item,index) in localAverage" :key="index" class="tdData">{{item}}</td>
|
<td v-for="(item,index) in empty" :key="'g' + index" class="tdData"></td>
|
</tr>
|
<tr>
|
<td class="thBack">极差</td>
|
<td v-for="(item,index) in localRange" :key="index" class="tdData">{{item}}</td>
|
<td v-for="(item,index) in empty" :key="'h' + index" class="tdData"></td>
|
</tr>
|
</table>
|
<el-row>
|
<el-col :span="12">
|
<div class="inspection-card">
|
<div class="echartsTitle">检测数据对比</div>
|
<Echarts ref="chart"
|
:grid="grid"
|
:legend="legend"
|
:lineColors="lineColors"
|
:series="echartsSeries"
|
:tooltip="tooltip"
|
:xAxis="xAxis"
|
:yAxis="yAxis"
|
style="height: 40vh;"></Echarts>
|
</div>
|
</el-col>
|
<el-col :span="12">
|
<div class="inspection-card">
|
<div class="echartsTitle">测量数据标准差对比</div>
|
<Echarts ref="chart"
|
:barColors="barColors"
|
:chartStyle="chartStyle"
|
:grid="grid"
|
:legend="legend1"
|
:series="echartsSeries1"
|
:tooltip="tooltip"
|
:xAxis="xAxis1"
|
:yAxis="yAxis1"
|
style="height: 40vh;"></Echarts>
|
</div>
|
</el-col>
|
</el-row>
|
<el-row>
|
<el-col :span="12">
|
<div class="inspection-card">
|
<div class="echartsTitle">偏差分析</div>
|
<Echarts ref="chart"
|
:grid="grid"
|
:legend="legend2"
|
:lineColors="lineColors"
|
:series="echartsSeries2"
|
:tooltip="tooltip1"
|
:xAxis="xAxis"
|
:yAxis="yAxis2"
|
style="height: 40vh;"></Echarts>
|
</div>
|
</el-col>
|
<el-col :span="12">
|
<div class="inspection-card">
|
<div class="echartsTitle">检测中心数据</div>
|
<Echarts ref="chart"
|
:grid="grid"
|
:legend="legend"
|
:lineColors="lineColors"
|
:series="echartsSeries3"
|
:tooltip="tooltip"
|
:xAxis="xAxis"
|
:yAxis="yAxis"
|
style="height: 40vh;"></Echarts>
|
</div>
|
</el-col>
|
</el-row>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import Echarts from "./echarts.vue";
|
import {getRawSupplierCompare} from "@/api/statisticalCharts/dataAnalysis";
|
|
export default {
|
name: "DataComparison",
|
// import 引入的组件需要注入到对象中才能使用
|
components: {Echarts},
|
props: {
|
comparisonData : {
|
type: Object,
|
default: () => {}
|
},
|
selectRow : {
|
type: Object,
|
default: () => {}
|
}
|
},
|
data() {
|
// 这里存放数据
|
return {
|
supplierForm: {
|
one: '',
|
two: '',
|
three: '',
|
four: '',
|
five: '',
|
},
|
rules: {
|
one: [{ required: true, message: '必填', trigger: 'blur' }],
|
two: [{ required: true, message: '必填', trigger: 'blur' }],
|
three: [{ required: true, message: '必填', trigger: 'blur' }],
|
four: [{ required: true, message: '必填', trigger: 'blur' }],
|
five: [{ required: true, message: '必填', trigger: 'blur' }],
|
},
|
comparisonData1: {},
|
supplierData: [], // 厂家数据
|
localData: [], // 检测中心检测数据
|
absoluteDeviation: [], // 绝对偏差
|
average: [], // 平均值
|
supplierULC: [], // 厂家UCL
|
supplierLCL: [], // 厂家LCL
|
supplierAverage: [], // 厂家平均值
|
supplierRange: [], // 厂家极差
|
localULC: [], // 检测中心UCL
|
localLCL: [], // 检测中心LCL
|
localAverage: [], // 检测中心平均值
|
localRange: [], // 检测中心极差
|
manufacturerData: [],
|
manufacturer: [
|
{value: '1.1'},
|
{value: '2.2'},
|
{value: '3.3'},
|
{value: '4.4'},
|
{value: '5.5'},
|
],
|
testCenter: [
|
{value: '1.2'},
|
{value: '2.33'},
|
{value: '3.64'},
|
{value: '4.3'},
|
{value: '5.9'},
|
],
|
empty: [
|
{data: '1'},
|
{data: '2'},
|
{data: '3'},
|
{data: '4'},
|
],
|
lineColors: ['#ed7d31', '#409EFF'],
|
barColors: ['#ed7d31', '#409EFF', '#a5a5a5'],
|
chartStyle: {
|
width: '100%',
|
height: '96%' // 设置图表容器的高度
|
},
|
grid: {
|
left: '3%',
|
right: '4%',
|
bottom: '3%',
|
containLabel: true
|
},
|
legend: {
|
data: ['厂家检测数据','检测中心检测数据']
|
},
|
tooltip: {
|
trigger: 'axis',
|
axisPointer: {
|
type: 'shadow'
|
}
|
},
|
tooltip1: {
|
trigger: 'axis',
|
axisPointer: {
|
type: 'shadow'
|
},
|
formatter: (params) => {
|
// params 是一个数组，包含当前鼠标悬停的所有系列的数据
|
return params.map(param => {
|
const value = param.value; // 获取当前数据点的值
|
const name = param.seriesName; // 获取系列名称
|
return `${name}: ${Math.round(value)}%`; // 格式化为百分比形式
|
}).join('<br>'); // 每个系列占一行
|
}
|
},
|
xAxis: [{
|
type: 'category',
|
data: ['1', '2', '3', '4', '5']
|
}],
|
yAxis: [{
|
type: 'value'
|
}],
|
echartsSeries: [
|
{
|
name: '厂家检测数据',
|
type: 'line',
|
label: {
|
show: true,
|
position: 'top',
|
},
|
data: []
|
},
|
{
|
name: '检测中心检测数据',
|
type: 'line',
|
label: {
|
show: true,
|
position: 'top',
|
},
|
data: []
|
}
|
],
|
xAxis1: [{
|
type: 'category',
|
data: ['厂家', '检测中心']
|
}],
|
legend1: {
|
data: ['UCL','LCL', '平均值']
|
},
|
yAxis1: [
|
{
|
type: 'value',
|
},
|
],
|
echartsSeries1: [
|
{
|
name: 'UCL',
|
type: 'bar',
|
label: {
|
show: true,
|
position: 'top'
|
},
|
data: []
|
},
|
{
|
name: 'LCL',
|
type: 'bar',
|
label: {
|
show: true,
|
position: 'top'
|
},
|
data: []
|
},
|
{
|
name: '平均值',
|
type: 'bar',
|
label: {
|
show: true,
|
position: 'top'
|
},
|
data: []
|
},
|
],
|
legend2: {
|
data: ['平均值','绝对偏差']
|
},
|
yAxis2: [{
|
type: 'value',
|
min: 0,
|
max: 100,
|
axisLabel: {
|
formatter: '{value}%' // 在每个刻度值后添加百分比符号
|
}
|
}],
|
echartsSeries2: [
|
{
|
name: '平均值',
|
type: 'line',
|
label: {
|
show: true,
|
position: 'top',
|
formatter: (params) => params.value + '%'
|
},
|
data: [],
|
},
|
{
|
name: '绝对偏差',
|
type: 'line',
|
label: {
|
show: true,
|
position: 'top',
|
formatter: (params) => params.value + '%'
|
},
|
data: [],
|
}
|
],
|
echartsSeries3: [
|
{
|
name: '检测中心检测数据',
|
type: 'line',
|
data: []
|
}
|
],
|
}
|
},
|
mounted() {
|
this.getInfo()
|
},
|
// 方法集合
|
methods: {
|
getInfo() {
|
const { localData, localULC, localLCL, localAverage, localRange } = this.comparisonData;
|
// 初始化 localData，确保有默认值
|
this.localData = localData === null
|
? ['', '', '', '', '', '', '', '', '']
|
: localData.map((number, index) => index === 7 ? `${Math.round(number * 100)}%` : number);
|
// 更新图表数据
|
this.echartsSeries3[0].data = this.localData.slice(0, 5);
|
this.localULC = localULC;
|
this.localLCL = localLCL;
|
this.localAverage = localAverage;
|
this.localRange = localRange;
|
},
|
getInfo1() {
|
const {
|
supplierData,
|
localData,
|
absoluteDeviation,
|
average,
|
supplierULC,
|
supplierLCL,
|
supplierAverage,
|
supplierRange,
|
localULC,
|
localLCL,
|
localAverage,
|
localRange,
|
} = this.comparisonData1;
|
// 辅助函数：处理空数据并转换百分比
|
const processPercentageData = (data, defaultValue = ['', '', '', '', '', '', '', '', '']) =>
|
data === null ? defaultValue : data.map((number, index) => index === 7 ? `${Math.round(number * 100)}%` : number);
|
// 辅助函数：处理空数值型数据
|
const processNumericData = (data, defaultValue = ['', '', '', '', '']) =>
|
data === null ? defaultValue : data;
|
// 初始化数据
|
this.supplierData = processPercentageData(supplierData);
|
this.localData = processPercentageData(localData);
|
this.absoluteDeviation = processPercentageData(absoluteDeviation).map(number => `${Math.round(number * 100)}%`);
|
this.average = processPercentageData(average).map(number => `${Math.round(number * 100)}%`);
|
// 更新图表数据
|
this.echartsSeries1[0].data = [];
|
this.echartsSeries3[0].data = this.localData.slice(0, 5);
|
this.echartsSeries[0].data = this.supplierData;
|
this.echartsSeries[1].data = this.localData;
|
this.echartsSeries2[1].data = this.comparisonData1.absoluteDeviation.map(value => value * 100);
|
this.echartsSeries2[0].data = this.comparisonData1.average.map(value => value * 100);
|
// 处理供应商和本地的标准差对比数据
|
this.supplierULC = processNumericData(supplierULC);
|
this.supplierLCL = processNumericData(supplierLCL);
|
this.supplierAverage = processNumericData(supplierAverage);
|
this.supplierRange = processNumericData(supplierRange);
|
this.localULC = processNumericData(localULC);
|
this.localLCL = processNumericData(localLCL);
|
this.localAverage = processNumericData(localAverage);
|
this.localRange = processNumericData(localRange);
|
// 更新测量数据标准差对比柱状图数据
|
this.echartsSeries1[0].data.push(this.supplierULC[0], this.localULC[0]);
|
this.echartsSeries1[1].data.push(this.supplierLCL[0], this.localLCL[0]);
|
this.echartsSeries1[2].data.push(this.supplierAverage[0], this.localAverage[0]);
|
},
|
submitForm () {
|
this.$refs['supplierForm'].validate((valid) => {
|
if (valid) {
|
const params = {
|
orderIds: this.selectRow.orderIds,
|
itemNames: this.selectRow.itemNames,
|
supplierDataList: Object.values(this.supplierForm)
|
}
|
getRawSupplierCompare(params).then(res => {
|
this.comparisonData1 = res.data
|
this.getInfo1()
|
})
|
} else {
|
console.log('error submit!!');
|
return false;
|
}
|
});
|
},
|
resetForm () {
|
this.$refs['supplierForm'].resetFields();
|
},
|
},
|
}
|
</script>
|
|
<style scoped>
|
.title {
|
height: 40px;
|
line-height: 40px;
|
}
|
.container {
|
width: calc(100% - 20px);
|
height: calc(100vh - 170px);
|
background-color: #fff;
|
padding: 10px;
|
overflow-y: auto;
|
}
|
.table {
|
width: 100%;
|
}
|
.thTitle {
|
background-color: #e0eaf5;
|
padding: 6px 2px;
|
}
|
.thBack {
|
text-align: center;
|
background-color: #e0eaf5;
|
padding: 2px;
|
}
|
.thBack2 {
|
text-align: center;
|
background-color: #e4f2da;
|
padding: 2px;
|
}
|
.tdData {
|
padding: 4px;
|
text-align: center;
|
font-size: 13px;
|
width: 10%;
|
}
|
.inspection-card{
|
width: 100%;
|
background: #FFFFFF;
|
margin-top: 10px;
|
}
|
.echartsTitle {
|
text-align: center;
|
padding-bottom: 10px;
|
}
|
</style>
|
