Yangwl
/
LJ-UI
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

定量分析页面增加图标分析

Browse Source
yangwl
李靖 4 months ago
parent 22d6ffe8f8
commit cd1f9627a1
1 changed files with 659 additions and 391 deletions
Show Stats Download Patch File Download Diff File

480
src/views/quality/qcTableDL/index.vue
Unescape Escape View File

@ -1,6 +1,14 @@
<template>
<div class="app-container">
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="100px" class="edit-el-form">
<el-form
:model="queryParams"
ref="queryForm"
size="small"
:inline="true"
v-show="showSearch"
label-width="100px"
class="edit-el-form"
>
<el-form-item label="订单编码" prop="orderNo">
<el-input
v-model="queryParams.orderNo"
@ -27,7 +35,12 @@
/>
</el-form-item>
<el-form-item label="检验类型" prop="typeCode">
<el-select v-model="queryParams.typeCode" clearable placeholder="请选择检验类型" @change="getCheckTypeList">
<el-select
v-model="queryParams.typeCode"
clearable
placeholder="请选择检验类型"
@change="getCheckTypeList"
>
<el-option
v-for="dict in dict.type.check_type"
:key="dict.value"
@ -37,7 +50,12 @@
</el-select>
</el-form-item>
<el-form-item label="检验节点" prop="checkType">
<el-select v-model="queryParams.checkType" clearable placeholder="请选择检验节点" @change="getProjectListFunc">
<el-select
v-model="queryParams.checkType"
clearable
placeholder="请选择检验节点"
@change="getProjectListFunc"
>
<el-option
v-for="dict in checkTypeList"
:key="dict.checkType"
@ -47,16 +65,28 @@
</el-select>
</el-form-item>
<el-form-item label="定量检测项" prop="projectNoArray">
<el-select v-model="queryParams.projectNoArray" multiple collapse-tags placeholder="请选择">
<el-select
v-model="queryParams.projectNoArray"
multiple
collapse-tags
placeholder="请选择"
>
<el-option
v-for="item in projectNoOptions"
:key="item.recordId"
:label="item.ruleName"
:value="item.recordId"></el-option>
:value="item.recordId"
></el-option>
</el-select>
</el-form-item>
<el-form-item label="统计单位" prop="supplierCode">
<el-select v-model="queryParams.supplierCode" clearable placeholder="请选择统计单位" filterable clearable>
<el-select
v-model="queryParams.supplierCode"
clearable
placeholder="请选择统计单位"
filterable
clearable
>
<el-option
v-for="dict in workCenterList"
:key="dict.supplierCode"
@ -72,12 +102,21 @@
type="datetimerange"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期">
end-placeholder="结束日期"
>
</el-date-picker>
</el-form-item>
<el-form-item>
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery" >搜索</el-button>
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
<el-button
type="primary"
icon="el-icon-search"
size="mini"
@click="handleQuery"
>搜索</el-button
>
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
>重置</el-button
>
</el-form-item>
</el-form>
@ -89,23 +128,47 @@
icon="el-icon-download"
size="mini"
@click="handleExport"
>导出</el-button>
>导出</el-button
>
</el-col>
<el-col :span="1.5">
<el-button
type="primary"
plain
icon="el-icon-s-data"
size="mini"
@click="handleAnalysis"
>图标分析</el-button
>
</el-col>
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
<right-toolbar
:showSearch.sync="showSearch"
@queryTable="getList"
></right-toolbar>
</el-row>
<el-table v-loading="loading" :data="tableList">
<el-table-column type="expand">
<template #default="props">
<el-table :data="props.row.details" size="mini" style="width: 100%;margin-left: 0%"
<el-table
:data="props.row.details"
size="mini"
style="width: 100%; margin-left: 0%"
:show-header="false"
class="expandClass"
>
><!---->
<el-table-column type="expand"/>
<el-table-column label="日期" align="center" prop="ymdms" width="150"/>
<el-table-column type="expand" />
<el-table-column
label="日期"
align="center"
prop="ymdms"
width="150"
/>
<template v-for="(detail, index) in detailTitleCol2">
<el-table-column :prop="detail.col2Id" align="center"
<el-table-column
:prop="detail.col2Id"
align="center"
:key="detail.col2Id"
:label="detail.col2Name"
:show-overflow-tooltip="true"
@ -114,16 +177,19 @@
</el-table>
</template>
</el-table-column>
<el-table-column label="日期" align="center" prop="ymdms" width="150"/>
<el-table-column label="日期" align="center" prop="ymdms" width="150" />
<template v-for="(column1, index) in titleCol1">
<el-table-column align="center"
<el-table-column
align="center"
:prop="column1.col1Id"
:key="column1.col1Id"
:label="column1.col1Name"
>
<template v-for="(column2, index) in titleCol2">
<el-table-column :prop="column1.col1Id+column2.col2Id" align="center"
:key="column1.col1Id+column2.col2Id"
<el-table-column
:prop="column1.col1Id + column2.col2Id"
align="center"
:key="column1.col1Id + column2.col2Id"
:label="column2.col2Name"
:show-overflow-tooltip="true"
/>
@ -131,13 +197,34 @@
</el-table-column>
</template>
</el-table>
<!-- 图标分析 -->
<el-dialog
:title="title"
:visible.sync="open"
width="1880px"
append-to-body
>
<div
class="echartbox"
id="echart1"
style="margin: auto; margin-top: 20px; width: 1820px; height: 545px"
></div>
<div slot="footer" class="dialog-footer">
<el-button @click="cancel">取 消</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
import { getDLTableAvgInfo,getDLDetailList,getCheckTypeList,getSupplierList,
getProjectOptionList
import {
getDLTableAvgInfo,
getDLDetailList,
getCheckTypeList,
getSupplierList,
getProjectOptionList,
} from "@/api/quality/qcTable";
import * as echarts from "echarts";
import moment from "moment/moment";
export default {
name: "qcAnalysis",
@ -145,11 +232,11 @@ export default {
data() {
return {
detailListLoading: true,
refreshNewWorkerTable:true,
refreshNewWorkerTable: true,
// 选择领料单
selectPrepare:[],
selectPrepare: [],
// 打印
formRef: 'form',
formRef: "form",
validateRules: [],
printDialogVisible: false,
// 遮罩层
@ -166,9 +253,9 @@ export default {
total: 0,
// 表格数据
tableList: [],
titleCol1:[],
titleCol2:[],
detailTitleCol2:[],
titleCol1: [],
titleCol2: [],
detailTitleCol2: [],
// 弹出层标题
title: "",
// 是否显示弹出层
@ -178,8 +265,8 @@ export default {
pageNum: 1,
pageSize: 10,
checkNo: null,
typeCode:null,
checkType:null,
typeCode: null,
checkType: null,
orderNo: null,
productId: null,
materialCode: null,
@ -188,20 +275,26 @@ export default {
productSpc: null,
wetDetailPlanId: null,
incomeTime: null,
incomeBatchNo:null,
incomeBatchNo: null,
incomeTimeArray: [],
ymArrayStart:null,
ymArrayEnd:null
ymArrayStart: null,
ymArrayEnd: null,
},
workCenterList:[],
checkTypeList:[],
projectNoOptions:[],
workCenterList: [],
checkTypeList: [],
projectNoOptions: [],
// 表单参数
form: {},
// 表单校验
rules: {},
openReport : false,
titleReport : "工单报工详情"
openReport: false,
titleReport: "工单报工详情",
analyzeList: [],
legenddata: [],
seriesdata: [],
xAxisdata: [],
detailechartslist: [],
titledata: "",
};
},
created() {
@ -210,97 +303,191 @@ export default {
},
methods: {
//产品编码格式化
productCodeFormate(row, column, cellValue){
return cellValue.slice(7,18); //返回值
productCodeFormate(row, column, cellValue) {
return cellValue.slice(7, 18); //返回值
},
//订单编码格式化
orderCodeFormate(row, column, cellValue){
if(cellValue !=null){
return cellValue.slice(3,18); //返回值
orderCodeFormate(row, column, cellValue) {
if (cellValue != null) {
return cellValue.slice(3, 18); //返回值
}
},
/**获取默认查询时间段**/
getDate() {
let start = this.Fungetdate (0);
let end = this.Fungetdate (0);
this.queryParams.incomeTimeArray.push(start,end);
let start = this.Fungetdate(0);
let end = this.Fungetdate(0);
this.queryParams.incomeTimeArray.push(start, end);
},
Fungetdate (num) {
Fungetdate(num) {
var dd = new Date();
dd.setDate(dd.getDate() + num);
var y = dd.getFullYear();
var m = dd.getMonth() + 1;//获取当前月份的日期
var m = dd.getMonth() + 1; //获取当前月份的日期
var d = dd.getDate();
return y + "-" + m + "-" + d;
},
/**获取车间数据**/
getWorkCenterList(){
getWorkcenterList(this.queryParams).then(response => {
this.workCenterList = response
})
getWorkCenterList() {
getWorkcenterList(this.queryParams).then((response) => {
this.workCenterList = response;
});
},
getCheckTypeList(val){
getCheckTypeList(val) {
//获取检验节点
getCheckTypeList(val).then(response => {
this.checkTypeList = response
getCheckTypeList(val).then((response) => {
this.checkTypeList = response;
});
//获取统计单位
getSupplierList(val).then(response => {
this.workCenterList = response
getSupplierList(val).then((response) => {
this.workCenterList = response;
});
},
//获取定量检测项
getProjectListFunc(val){
getProjectOptionList(val).then(response => {
this.projectNoOptions = response
})
getProjectListFunc(val) {
getProjectOptionList(val).then((response) => {
this.projectNoOptions = response;
});
},
indexMethod(index){
return index+1 ;
indexMethod(index) {
return index + 1;
},
/** 查询备料单列表 */
getList() {
this.loading = true;
if(this.queryParams.incomeTimeArray.length>0){
this.queryParams.ymArrayStart = moment(this.queryParams.incomeTimeArray[0]).format('YYYY-MM-DD');
this.queryParams.ymArrayEnd = moment(this.queryParams.incomeTimeArray[1]).format('YYYY-MM-DD');
if (this.queryParams.incomeTimeArray.length > 0) {
this.queryParams.ymArrayStart = moment(
this.queryParams.incomeTimeArray[0]
).format("YYYY-MM-DD");
this.queryParams.ymArrayEnd = moment(
this.queryParams.incomeTimeArray[1]
).format("YYYY-MM-DD");
}
getDLTableAvgInfo(this.queryParams).then(response => {
this.titleCol1=[];
this.titleCol2=[];
this.detailTitleCol2=[];
getDLTableAvgInfo(this.queryParams).then((response) => {
this.titleCol1 = [];
this.titleCol2 = [];
this.detailTitleCol2 = [];
let col1 = response.titleCol1;
let col2 = response.titleCol2;
for(let i=0;i<col1.length;i++){
var titleobj1={};
titleobj1.col1Id="mcode"+i;
for (let i = 0; i < col1.length; i++) {
var titleobj1 = {};
titleobj1.col1Id = "mcode" + i;
titleobj1.col1Name = col1[i];
this.titleCol1.push(titleobj1)
this.titleCol1.push(titleobj1);
}
for(let j=0;j<col2.length;j++){
var titleobj2={};
titleobj2.col2Id="Pcode"+j;
for (let j = 0; j < col2.length; j++) {
var titleobj2 = {};
titleobj2.col2Id = "Pcode" + j;
titleobj2.col2Name = col2[j];
this.titleCol2.push(titleobj2)
this.titleCol2.push(titleobj2);
}
for(let i=0;i<col1.length;i++){
for(let j=0;j<col2.length;j++){
var detailTitle={};
detailTitle.col2Id="mcode"+i+"Pcode"+j+"Detail";
for (let i = 0; i < col1.length; i++) {
for (let j = 0; j < col2.length; j++) {
var detailTitle = {};
detailTitle.col2Id = "mcode" + i + "Pcode" + j + "Detail";
detailTitle.col2Name = col2[j];
this.detailTitleCol2.push(detailTitle)
this.detailTitleCol2.push(detailTitle);
}
}
this.analyzeList = response;
this.tableList = response.dxData;
this.tableList = response.dxData
this.loading = false;
});
},
getanalyzeList() {
if (this.queryParams.incomeTimeArray.length > 0) {
this.queryParams.ymArrayStart = moment(
this.queryParams.incomeTimeArray[0]
).format("YYYY-MM-DD");
this.queryParams.ymArrayEnd = moment(
this.queryParams.incomeTimeArray[1]
).format("YYYY-MM-DD");
}
getDLTableAvgInfo(this.queryParams).then((response) => {
this.detailechartslist = [];
this.seriesdata = [];
this.legenddata = [];
this.xAxisdata = [];
let col1 = response.titleCol1;
let col2 = response.titleCol2;
// mcode0Pcode0
for (let i = 0; i < col1.length; i++) {
for (let j = 0; j < col2.length; j++) {
var detailTitle = {};
detailTitle.col1Id = "mcode" + i + "Pcode" + j;
detailTitle.col1Name = col1[i];
detailTitle.col1xName = col2[j];
this.detailechartslist.push(detailTitle);
}
}
console.log(
this.detailechartslist,
this.seriesdata,
this.legenddata,
this.xAxisdata
);
this.loading = false;
if (this.detailechartslist.length > 0) {
this.analyzeList = response;
const datalist = this.detailechartslist.map((item) => {
const xdata = this.analyzeList.dxData.map((d) => {
return (d.ymdms = moment(d.ymdms, "YYYY-MM-DD AVG").format(
"YYYY-MM-DD"
));
});
const datalist = this.analyzeList.dxData.map((d) => d[item.col1Id]);
return {
...item,
xdata,
datalist,
};
});
this.xAxisdata = datalist[0].xdata;
this.titledata = datalist[0].col1xName;
datalist.forEach((e, index) => {
this.legenddata.push(e.col1Name);
if (e.houer) {
state.xAxisdata = e.col1Name;
}
var item = {
name: e.col1Name,
type: "bar",
barGap: 0,
label: {
show: true,
position: "insideBottom",
distance: 15,
align: "left",
verticalAlign: "middle",
rotate: 90,
formatter: "{c} {name|{a}}",
fontSize: 16,
rich: {
name: {},
},
},
emphasis: {
focus: "series",
},
data: e.datalist,
};
this.seriesdata.push(item);
});
this.initChart1();
} else {
this.$modal.msgError("数据为空");
this.detailechartslist = [];
this.seriesdata = [];
this.legenddata = [];
this.xAxisdata = [];
(this.titledata = ""), this.initChart1();
}
});
},
// 取消按钮
@ -325,12 +512,12 @@ export default {
productSpc: null,
wetDetailPlanId: null,
incomeTime: null,
incomeBatchNo:null,
incomeBatchNo: null,
createBy: null,
createTime: null,
updateBy: null,
updateTime: null,
factoryCode: null
factoryCode: null,
};
this.resetForm("form");
},
@ -347,10 +534,10 @@ export default {
},
// 多选框选中数据
handleSelectionChange(selection) {
this.ids = selection.map(item => item.prepareId)
this.single = selection.length!==1
this.multiple = !selection.length
this.selectPrepare = selection
this.ids = selection.map((item) => item.prepareId);
this.single = selection.length !== 1;
this.multiple = !selection.length;
this.selectPrepare = selection;
},
/** 新增按钮操作 */
handleAdd() {
@ -361,8 +548,8 @@ export default {
/** 修改按钮操作 */
handleUpdate(row) {
this.reset();
const prepareId = row.prepareId || this.ids
getPrepare(prepareId).then(response => {
const prepareId = row.prepareId || this.ids;
getPrepare(prepareId).then((response) => {
this.form = response.data;
this.open = true;
this.title = "修改备料单";
@ -370,16 +557,16 @@ export default {
},
/** 提交按钮 */
submitForm() {
this.$refs["form"].validate(valid => {
this.$refs["form"].validate((valid) => {
if (valid) {
if (this.form.prepareId != null) {
updatePrepare(this.form).then(response => {
updatePrepare(this.form).then((response) => {
this.$modal.msgSuccess("修改成功");
this.open = false;
this.getList();
});
} else {
addPrepare(this.form).then(response => {
addPrepare(this.form).then((response) => {
this.$modal.msgSuccess("新增成功");
this.open = false;
this.getList();
@ -394,20 +581,104 @@ export default {
let sr = row;
this.queryParams.orderNo = sr.orderNo;
getXJCheckTableDetail(this.queryParams).then(response => {
getXJCheckTableDetail(this.queryParams).then((response) => {
this.pOrderTableList = response;
this.openReport = true;
this.titleReport = "过程巡检详情";
});
},
/** 导出按钮操作 */
handleExport() {
this.download('quality/staticTable/exportDLTable', {
...this.queryParams
}, `DLTable_${new Date().getTime()}.xlsx`)
this.download(
"quality/staticTable/exportDLTable",
{
...this.queryParams,
},
`DLTable_${new Date().getTime()}.xlsx`
);
},
// 图表分析
handleAnalysis() {
this.title = "图表分析";
//
if (
this.queryParams.projectNoArray.length > 0 &&
this.queryParams.projectNoArray.length < 2
) {
// this.projectNoOptions.forEach((item) => {
// if (item.recordId == this.queryParams.projectNoArray) {
// console.log(item);
// }
// });
this.open = true;
this.getanalyzeList();
} else if (this.queryParams.projectNoArray.length < 0) {
this.$modal.msgError("请选择定量检测项");
} else {
this.$modal.msgError("请选择一项定量检测项");
}
},
// 取消
cancel() {
this.open = false;
},
// 加载图表
initChart1() {
const _this = this;
// mcode0Pcode0 mcode1Pcode0
var chartDom = document.getElementById("echart1");
// 检查是否已经初始化了 ECharts 实例
if (echarts.getInstanceByDom(chartDom)) {
// 销毁已有的实例
echarts.dispose(chartDom);
}
var myChart1 = echarts.init(document.querySelector("#echart1"));
var option1 = {
title: {
text: this.titledata,
left: "left",
},
grid: {
left: "0.5%",
right: "1%",
top: "8%",
bottom: "3%",
containLabel: true,
},
tooltip: {
trigger: "axis",
axisPointer: {
type: "shadow",
},
},
legend: {
top: 10,
left: "center",
data: this.legenddata,
},
xAxis: [
{
axisLabel: {
rotate: 45,
interval: 0,
},
type: "category",
axisTick: { show: false },
data: this.xAxisdata,
},
],
yAxis: [
{
type: "value",
},
],
series: this.seriesdata,
};
myChart1.setOption(option1);
},
},
};
</script>
<style>
@ -420,14 +691,12 @@ export default {
margin-bottom: 15px;
}
.my-print-table {
}
.my-print-foot {
margin-top: 20px;
}
#.el-table .cell{
#.el-table .cell {
white-space: pre-line !important;
}
.el-table .cell.el-tooltip {
white-space: pre-wrap; /*这是重点。文本换行*/
@ -435,8 +704,7 @@ export default {
/deep/ .el-table__expand-icon {
display: none;
}
.expandClass .el-table__expand-icon{
.expandClass .el-table__expand-icon {
display: none;
}
</style>

Write Preview
Loading…
Cancel
Save