343 lines
9.8 KiB
Vue
343 lines
9.8 KiB
Vue
<!--
|
|
* @Author: zhp
|
|
* @Date: 2023-01-11 09:24:58
|
|
* @LastEditTime: 2023-07-13 09:31:48
|
|
* @LastEditors: zhp
|
|
* @Description:
|
|
-->
|
|
<template>
|
|
<el-card shadow="never" class="aui-card--fill">
|
|
<div class="mod-sys__user">
|
|
<SearchBar :formConfigs="formConfig" ref="ruleForm" @headBtnClick="buttonClick">
|
|
</SearchBar>
|
|
</div>
|
|
<el-divider> {{ $t('gage.singleValueAnalysis') }} </el-divider>
|
|
<div id="priceMain" :style="{width: '100%', height: '500px'}" />
|
|
<el-divider> {{ $t('gage.stageDifferenceMeanAnalysis') }} </el-divider>
|
|
<div id="averageStationDifferenceMapMain" :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 {
|
|
averageStationDifferenceMapBatchTail: null,
|
|
averageStationDifferenceMapChecksums: null,
|
|
averageStationDifferenceMapDifference: null,
|
|
averageStationDifferenceMapReference: null,
|
|
priceBatchTailArr: null,
|
|
priceChecksumsArr: null,
|
|
priceDifferenceArr: null,
|
|
priceReferenceArr: null,
|
|
myChart:null,
|
|
urlOptions: {
|
|
getDataListURL: "/gage/qmsStationDeviationAnalysis/analzy",
|
|
getGageURL: "/gage/qmsGage/page",
|
|
getGageTypeURL: "/gage/qmsGageType/page",
|
|
|
|
},
|
|
listQuery: {
|
|
pageId: `1`,
|
|
batchNumber:null,
|
|
endTime: null,
|
|
gageTypeId: null,
|
|
parameter: null,
|
|
startTime: null,
|
|
},
|
|
formConfig: [
|
|
{
|
|
type: 'select',
|
|
label: i18n.t('gage.gageTypeName'),
|
|
selectOptions: [],
|
|
param: 'gageTypeId',
|
|
clearable: true,
|
|
filterable: true
|
|
},
|
|
{
|
|
type: 'select',
|
|
label: i18n.t('gage.gageName'),
|
|
selectOptions: [],
|
|
param: 'gageId',
|
|
clearable: true,
|
|
filterable: true,
|
|
},
|
|
{
|
|
type: 'select',
|
|
label: i18n.t('gage.analysisParameter'),
|
|
selectOptions: [],
|
|
param: 'parameter',
|
|
selectOptions: [
|
|
{
|
|
id: 0,
|
|
name: '基准'
|
|
},
|
|
{
|
|
id: 0,
|
|
name: '否'
|
|
},
|
|
{
|
|
id: 1,
|
|
name: '是'
|
|
}
|
|
],
|
|
|
|
clearable: true,
|
|
filterable: true,
|
|
},
|
|
{
|
|
type: 'input',
|
|
label: i18n.t('gage.batchTail'),
|
|
placeholder: i18n.t('gage.batchTail'),
|
|
param: 'batchNumber'
|
|
},
|
|
{
|
|
type: 'datePicker',
|
|
label: i18n.t('gage.inspectionTime'),
|
|
dateType: 'datetimerange',
|
|
format: 'yyyy-MM-dd HH:mm:ss',
|
|
valueFormat: 'yyyy-MM-ddTHH:mm:ss',
|
|
rangeSeparator: '-',
|
|
startPlaceholder: '开始时间',
|
|
endPlaceholder: '结束时间',
|
|
param: 'timeSlot',
|
|
width: 350
|
|
},
|
|
{
|
|
type: "button",
|
|
btnName: i18n.t('search'),
|
|
name: "search",
|
|
color: "primary",
|
|
},
|
|
{
|
|
type: "button",
|
|
btnName: i18n.t('export'),
|
|
name: "export",
|
|
color: "primary",
|
|
plain:true
|
|
}
|
|
],
|
|
};
|
|
},
|
|
// components: {
|
|
// AddOrUpdate,
|
|
// },
|
|
mounted () {
|
|
this.getData()
|
|
this.getDict()
|
|
},
|
|
methods: {
|
|
getDict() {
|
|
this.$http
|
|
.get(this.urlOptions.getGageURL, {
|
|
params: {
|
|
limit: 999,
|
|
page:1
|
|
},
|
|
})
|
|
.then(({ data: res }) => {
|
|
if (res.code === 0) {
|
|
this.formConfig[1].selectOptions = res.data.list
|
|
}
|
|
})
|
|
this.$http
|
|
.get(this.urlOptions.getGageTypeURL, {
|
|
params: {
|
|
limit: 999,
|
|
page: 1
|
|
},
|
|
})
|
|
.then(({ data: res }) => {
|
|
if (res.code === 0) {
|
|
this.formConfig[0].selectOptions = res.data.list
|
|
}
|
|
|
|
})
|
|
},
|
|
getData() {
|
|
this.$http
|
|
.get(this.urlOptions.getDataListURL, {
|
|
params: this.listQuery,
|
|
})
|
|
.then(({ data: res }) => {
|
|
this.dataListLoading = false;
|
|
if (res.code === 0) {
|
|
let averageStationDifferenceMapBatchTail = []
|
|
let averageStationDifferenceMapChecksums = []
|
|
let averageStationDifferenceMapDifference = []
|
|
let averageStationDifferenceMapReference = []
|
|
let priceBatchTailArr = []
|
|
let priceChecksumsArr = []
|
|
let priceDifferenceArr = []
|
|
let priceReferenceArr = []
|
|
for (let i in res.data.averageStationDifferenceMap) {
|
|
averageStationDifferenceMapBatchTail.push(i)
|
|
averageStationDifferenceMapChecksums.push(res.data.averageStationDifferenceMap[i].checksums)
|
|
averageStationDifferenceMapDifference.push(res.data.averageStationDifferenceMap[i].difference)
|
|
averageStationDifferenceMapReference.push(res.data.averageStationDifferenceMap[i].reference)
|
|
}
|
|
for (let i in res.data.price) {
|
|
res.data.price[i].forEach(ele => {
|
|
priceBatchTailArr.push(i + '_' + ele.batchTail)
|
|
priceChecksumsArr.push(ele.checksums)
|
|
priceDifferenceArr.push(ele.difference)
|
|
priceReferenceArr.push(ele.reference)
|
|
})
|
|
}
|
|
this.averageStationDifferenceMapBatchTail = averageStationDifferenceMapBatchTail
|
|
this.averageStationDifferenceMapChecksums = averageStationDifferenceMapChecksums
|
|
this.averageStationDifferenceMapDifference = averageStationDifferenceMapDifference
|
|
this.averageStationDifferenceMapReference = averageStationDifferenceMapReference
|
|
this.priceBatchTailArr = priceBatchTailArr
|
|
this.priceChecksumsArr = priceChecksumsArr
|
|
this.priceDifferenceArr = priceDifferenceArr
|
|
this.priceReferenceArr = priceReferenceArr
|
|
this.priceLineCharts()
|
|
this.averageStationDifferenceMapLineCharts()
|
|
}
|
|
|
|
})
|
|
},
|
|
priceLineCharts() {
|
|
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: i18n.t('gage.contrastiveAnalysis')
|
|
},
|
|
tooltip: {
|
|
trigger: 'axis'
|
|
},
|
|
legend: {
|
|
data: ['大流量(基准)', '大流量(校验)', '大流量(台差)']
|
|
},
|
|
grid: {
|
|
left: '3%',
|
|
right: '4%',
|
|
bottom: '3%',
|
|
containLabel: true
|
|
},
|
|
xAxis: {
|
|
data: this.priceBatchTailArr,
|
|
type: 'category',
|
|
axisLabel: {
|
|
clickable: true
|
|
},
|
|
silent: false,
|
|
triggerEvent: true
|
|
},
|
|
yAxis: {
|
|
type: 'value'
|
|
},
|
|
series: [
|
|
{
|
|
name: '大流量(基准)',
|
|
type: 'line',
|
|
stack: 'Total',
|
|
data: this.priceReferenceArr
|
|
},
|
|
{
|
|
name: '大流量(校验)',
|
|
type: 'line',
|
|
stack: 'Total',
|
|
data: this.priceChecksumsArr
|
|
},
|
|
{
|
|
name: '大流量(台差)',
|
|
type: 'line',
|
|
stack: 'Total',
|
|
data: this.priceDifferenceArr
|
|
},
|
|
]
|
|
};
|
|
option && myChart.setOption(option);
|
|
},
|
|
averageStationDifferenceMapLineCharts() {
|
|
var chartDom = document.getElementById('averageStationDifferenceMapMain');
|
|
var myChart = echarts.init(chartDom);
|
|
var option;
|
|
|
|
option = {
|
|
title: {
|
|
text: i18n.t('gage.contrastiveAnalysis')
|
|
},
|
|
tooltip: {
|
|
trigger: 'axis'
|
|
},
|
|
legend: {
|
|
data: ['大流量(基准)', '大流量(校验)', '大流量(台差)']
|
|
},
|
|
grid: {
|
|
left: '3%',
|
|
right: '4%',
|
|
bottom: '3%',
|
|
containLabel: true
|
|
},
|
|
xAxis: {
|
|
type: 'category',
|
|
boundaryGap: false,
|
|
data: this.averageStationDifferenceMapBatchTail
|
|
},
|
|
yAxis: {
|
|
type: 'value'
|
|
},
|
|
series: [
|
|
{
|
|
name: '大流量(基准)',
|
|
type: 'line',
|
|
stack: 'Total',
|
|
data: this.averageStationDifferenceMapReference
|
|
},
|
|
{
|
|
name: '大流量(校验)',
|
|
type: 'line',
|
|
stack: 'Total',
|
|
data: this.averageStationDifferenceMapChecksums
|
|
},
|
|
{
|
|
name: '大流量(台差)',
|
|
type: 'line',
|
|
stack: 'Total',
|
|
data: this.averageStationDifferenceMapDifference
|
|
},
|
|
]
|
|
};
|
|
option && myChart.setOption(option);
|
|
},
|
|
buttonClick(val) {
|
|
console.log(val)
|
|
switch (val.btnName) {
|
|
case "search":
|
|
this.listQuery.batchNumber = val.batchNumber ? val.batchNumber : null
|
|
this.listQuery.gageId = val.gageId ? val.gageId : null
|
|
this.listQuery.gageTypeId = val.gageTypeId ? val.gageTypeId : null
|
|
this.listQuery.parameter = val.parameter ? val.parameter :null
|
|
this.listQuery.startTime = val.timeSlot ? val.timeSlot[0] : null
|
|
this.listQuery.endTime = val.timeSlot ? val.timeSlot[1] : null
|
|
this.listQuery.page = 1
|
|
this.getDataList();
|
|
break;
|
|
case "export":
|
|
// this.listQuery.paramCode = val.paramCode;
|
|
this.listQuery.page = 1
|
|
this.exportHandle();
|
|
break;
|
|
default:
|
|
console.log(val)
|
|
}
|
|
},
|
|
}
|
|
};
|
|
</script>
|