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

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

Browse Source
yangwl
李靖 5 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> <template>
<div class="app-container"> <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-form-item label="订单编码" prop="orderNo">
<el-input <el-input
v-model="queryParams.orderNo" v-model="queryParams.orderNo"
@ -27,7 +35,12 @@
/> />
</el-form-item> </el-form-item>
<el-form-item label="检验类型" prop="typeCode"> <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 <el-option
v-for="dict in dict.type.check_type" v-for="dict in dict.type.check_type"
:key="dict.value" :key="dict.value"
@ -37,7 +50,12 @@
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-form-item label="检验节点" prop="checkType"> <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 <el-option
v-for="dict in checkTypeList" v-for="dict in checkTypeList"
:key="dict.checkType" :key="dict.checkType"
@ -47,16 +65,28 @@
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-form-item label="定量检测项" prop="projectNoArray"> <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 <el-option
v-for="item in projectNoOptions" v-for="item in projectNoOptions"
:key="item.recordId" :key="item.recordId"
:label="item.ruleName" :label="item.ruleName"
:value="item.recordId"></el-option> :value="item.recordId"
></el-option>
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-form-item label="统计单位" prop="supplierCode"> <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 <el-option
v-for="dict in workCenterList" v-for="dict in workCenterList"
:key="dict.supplierCode" :key="dict.supplierCode"
@ -72,12 +102,21 @@
type="datetimerange" type="datetimerange"
range-separator="至" range-separator="至"
start-placeholder="开始日期" start-placeholder="开始日期"
end-placeholder="结束日期"> end-placeholder="结束日期"
>
</el-date-picker> </el-date-picker>
</el-form-item> </el-form-item>
<el-form-item> <el-form-item>
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery" >搜索</el-button> <el-button
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</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-item>
</el-form> </el-form>
@ -89,23 +128,47 @@
icon="el-icon-download" icon="el-icon-download"
size="mini" size="mini"
@click="handleExport" @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> </el-col>
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar> <right-toolbar
:showSearch.sync="showSearch"
@queryTable="getList"
></right-toolbar>
</el-row> </el-row>
<el-table v-loading="loading" :data="tableList"> <el-table v-loading="loading" :data="tableList">
<el-table-column type="expand"> <el-table-column type="expand">
<template #default="props"> <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" :show-header="false"
class="expandClass" class="expandClass"
> >
><!----> ><!---->
<el-table-column type="expand"/> <el-table-column type="expand" />
<el-table-column label="日期" align="center" prop="ymdms" width="150"/> <el-table-column
label="日期"
align="center"
prop="ymdms"
width="150"
/>
<template v-for="(detail, index) in detailTitleCol2"> <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" :key="detail.col2Id"
:label="detail.col2Name" :label="detail.col2Name"
:show-overflow-tooltip="true" :show-overflow-tooltip="true"
@ -114,16 +177,19 @@
</el-table> </el-table>
</template> </template>
</el-table-column> </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"> <template v-for="(column1, index) in titleCol1">
<el-table-column align="center" <el-table-column
align="center"
:prop="column1.col1Id" :prop="column1.col1Id"
:key="column1.col1Id" :key="column1.col1Id"
:label="column1.col1Name" :label="column1.col1Name"
> >
<template v-for="(column2, index) in titleCol2"> <template v-for="(column2, index) in titleCol2">
<el-table-column :prop="column1.col1Id+column2.col2Id" align="center" <el-table-column
:key="column1.col1Id+column2.col2Id" :prop="column1.col1Id + column2.col2Id"
align="center"
:key="column1.col1Id + column2.col2Id"
:label="column2.col2Name" :label="column2.col2Name"
:show-overflow-tooltip="true" :show-overflow-tooltip="true"
/> />
@ -131,13 +197,34 @@
</el-table-column> </el-table-column>
</template> </template>
</el-table> </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> </div>
</template> </template>
<script> <script>
import { getDLTableAvgInfo,getDLDetailList,getCheckTypeList,getSupplierList, import {
getProjectOptionList getDLTableAvgInfo,
getDLDetailList,
getCheckTypeList,
getSupplierList,
getProjectOptionList,
} from "@/api/quality/qcTable"; } from "@/api/quality/qcTable";
import * as echarts from "echarts";
import moment from "moment/moment"; import moment from "moment/moment";
export default { export default {
name: "qcAnalysis", name: "qcAnalysis",
@ -145,11 +232,11 @@ export default {
data() { data() {
return { return {
detailListLoading: true, detailListLoading: true,
refreshNewWorkerTable:true, refreshNewWorkerTable: true,
// 选择领料单 // 选择领料单
selectPrepare:[], selectPrepare: [],
// 打印 // 打印
formRef: 'form', formRef: "form",
validateRules: [], validateRules: [],
printDialogVisible: false, printDialogVisible: false,
// 遮罩层 // 遮罩层
@ -166,9 +253,9 @@ export default {
total: 0, total: 0,
// 表格数据 // 表格数据
tableList: [], tableList: [],
titleCol1:[], titleCol1: [],
titleCol2:[], titleCol2: [],
detailTitleCol2:[], detailTitleCol2: [],
// 弹出层标题 // 弹出层标题
title: "", title: "",
// 是否显示弹出层 // 是否显示弹出层
@ -178,8 +265,8 @@ export default {
pageNum: 1, pageNum: 1,
pageSize: 10, pageSize: 10,
checkNo: null, checkNo: null,
typeCode:null, typeCode: null,
checkType:null, checkType: null,
orderNo: null, orderNo: null,
productId: null, productId: null,
materialCode: null, materialCode: null,
@ -188,20 +275,26 @@ export default {
productSpc: null, productSpc: null,
wetDetailPlanId: null, wetDetailPlanId: null,
incomeTime: null, incomeTime: null,
incomeBatchNo:null, incomeBatchNo: null,
incomeTimeArray: [], incomeTimeArray: [],
ymArrayStart:null, ymArrayStart: null,
ymArrayEnd:null ymArrayEnd: null,
}, },
workCenterList:[], workCenterList: [],
checkTypeList:[], checkTypeList: [],
projectNoOptions:[], projectNoOptions: [],
// 表单参数 // 表单参数
form: {}, form: {},
// 表单校验 // 表单校验
rules: {}, rules: {},
openReport : false, openReport: false,
titleReport : "工单报工详情" titleReport: "工单报工详情",
analyzeList: [],
legenddata: [],
seriesdata: [],
xAxisdata: [],
detailechartslist: [],
titledata: "",
}; };
}, },
created() { created() {
@ -210,97 +303,191 @@ export default {
}, },
methods: { methods: {
//产品编码格式化 //产品编码格式化
productCodeFormate(row, column, cellValue){ productCodeFormate(row, column, cellValue) {
return cellValue.slice(7,18); //返回值 return cellValue.slice(7, 18); //返回值
}, },
//订单编码格式化 //订单编码格式化
orderCodeFormate(row, column, cellValue){ orderCodeFormate(row, column, cellValue) {
if(cellValue !=null){ if (cellValue != null) {
return cellValue.slice(3,18); //返回值 return cellValue.slice(3, 18); //返回值
} }
}, },
/**获取默认查询时间段**/ /**获取默认查询时间段**/
getDate() { getDate() {
let start = this.Fungetdate (0); let start = this.Fungetdate(0);
let end = this.Fungetdate (0); let end = this.Fungetdate(0);
this.queryParams.incomeTimeArray.push(start,end); this.queryParams.incomeTimeArray.push(start, end);
}, },
Fungetdate (num) { Fungetdate(num) {
var dd = new Date(); var dd = new Date();
dd.setDate(dd.getDate() + num); dd.setDate(dd.getDate() + num);
var y = dd.getFullYear(); var y = dd.getFullYear();
var m = dd.getMonth() + 1;//获取当前月份的日期 var m = dd.getMonth() + 1; //获取当前月份的日期
var d = dd.getDate(); var d = dd.getDate();
return y + "-" + m + "-" + d; return y + "-" + m + "-" + d;
}, },
/**获取车间数据**/ /**获取车间数据**/
getWorkCenterList(){ getWorkCenterList() {
getWorkcenterList(this.queryParams).then(response => { getWorkcenterList(this.queryParams).then((response) => {
this.workCenterList = response this.workCenterList = response;
}) });
}, },
getCheckTypeList(val){ getCheckTypeList(val) {
//获取检验节点 //获取检验节点
getCheckTypeList(val).then(response => { getCheckTypeList(val).then((response) => {
this.checkTypeList = response this.checkTypeList = response;
}); });
//获取统计单位 //获取统计单位
getSupplierList(val).then(response => { getSupplierList(val).then((response) => {
this.workCenterList = response this.workCenterList = response;
}); });
}, },
//获取定量检测项 //获取定量检测项
getProjectListFunc(val){ getProjectListFunc(val) {
getProjectOptionList(val).then(response => { getProjectOptionList(val).then((response) => {
this.projectNoOptions = response this.projectNoOptions = response;
}) });
}, },
indexMethod(index){ indexMethod(index) {
return index+1 ; return index + 1;
}, },
/** 查询备料单列表 */ /** 查询备料单列表 */
getList() { getList() {
this.loading = true; this.loading = true;
if(this.queryParams.incomeTimeArray.length>0){ if (this.queryParams.incomeTimeArray.length > 0) {
this.queryParams.ymArrayStart = moment(this.queryParams.incomeTimeArray[0]).format('YYYY-MM-DD'); this.queryParams.ymArrayStart = moment(
this.queryParams.ymArrayEnd = moment(this.queryParams.incomeTimeArray[1]).format('YYYY-MM-DD'); 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 => { getDLTableAvgInfo(this.queryParams).then((response) => {
this.titleCol1=[]; this.titleCol1 = [];
this.titleCol2=[]; this.titleCol2 = [];
this.detailTitleCol2=[]; this.detailTitleCol2 = [];
let col1 = response.titleCol1; let col1 = response.titleCol1;
let col2 = response.titleCol2; let col2 = response.titleCol2;
for(let i=0;i<col1.length;i++){ for (let i = 0; i < col1.length; i++) {
var titleobj1={}; var titleobj1 = {};
titleobj1.col1Id="mcode"+i; titleobj1.col1Id = "mcode" + i;
titleobj1.col1Name = col1[i]; titleobj1.col1Name = col1[i];
this.titleCol1.push(titleobj1) this.titleCol1.push(titleobj1);
} }
for(let j=0;j<col2.length;j++){ for (let j = 0; j < col2.length; j++) {
var titleobj2={}; var titleobj2 = {};
titleobj2.col2Id="Pcode"+j; titleobj2.col2Id = "Pcode" + j;
titleobj2.col2Name = col2[j]; titleobj2.col2Name = col2[j];
this.titleCol2.push(titleobj2) this.titleCol2.push(titleobj2);
} }
for(let i=0;i<col1.length;i++){ for (let i = 0; i < col1.length; i++) {
for(let j=0;j<col2.length;j++){ for (let j = 0; j < col2.length; j++) {
var detailTitle={}; var detailTitle = {};
detailTitle.col2Id="mcode"+i+"Pcode"+j+"Detail"; detailTitle.col2Id = "mcode" + i + "Pcode" + j + "Detail";
detailTitle.col2Name = col2[j]; 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, productSpc: null,
wetDetailPlanId: null, wetDetailPlanId: null,
incomeTime: null, incomeTime: null,
incomeBatchNo:null, incomeBatchNo: null,
createBy: null, createBy: null,
createTime: null, createTime: null,
updateBy: null, updateBy: null,
updateTime: null, updateTime: null,
factoryCode: null factoryCode: null,
}; };
this.resetForm("form"); this.resetForm("form");
}, },
@ -347,10 +534,10 @@ export default {
}, },
// 多选框选中数据 // 多选框选中数据
handleSelectionChange(selection) { handleSelectionChange(selection) {
this.ids = selection.map(item => item.prepareId) this.ids = selection.map((item) => item.prepareId);
this.single = selection.length!==1 this.single = selection.length !== 1;
this.multiple = !selection.length this.multiple = !selection.length;
this.selectPrepare = selection this.selectPrepare = selection;
}, },
/** 新增按钮操作 */ /** 新增按钮操作 */
handleAdd() { handleAdd() {
@ -361,8 +548,8 @@ export default {
/** 修改按钮操作 */ /** 修改按钮操作 */
handleUpdate(row) { handleUpdate(row) {
this.reset(); this.reset();
const prepareId = row.prepareId || this.ids const prepareId = row.prepareId || this.ids;
getPrepare(prepareId).then(response => { getPrepare(prepareId).then((response) => {
this.form = response.data; this.form = response.data;
this.open = true; this.open = true;
this.title = "修改备料单"; this.title = "修改备料单";
@ -370,16 +557,16 @@ export default {
}, },
/** 提交按钮 */ /** 提交按钮 */
submitForm() { submitForm() {
this.$refs["form"].validate(valid => { this.$refs["form"].validate((valid) => {
if (valid) { if (valid) {
if (this.form.prepareId != null) { if (this.form.prepareId != null) {
updatePrepare(this.form).then(response => { updatePrepare(this.form).then((response) => {
this.$modal.msgSuccess("修改成功"); this.$modal.msgSuccess("修改成功");
this.open = false; this.open = false;
this.getList(); this.getList();
}); });
} else { } else {
addPrepare(this.form).then(response => { addPrepare(this.form).then((response) => {
this.$modal.msgSuccess("新增成功"); this.$modal.msgSuccess("新增成功");
this.open = false; this.open = false;
this.getList(); this.getList();
@ -394,20 +581,104 @@ export default {
let sr = row; let sr = row;
this.queryParams.orderNo = sr.orderNo; this.queryParams.orderNo = sr.orderNo;
getXJCheckTableDetail(this.queryParams).then(response => { getXJCheckTableDetail(this.queryParams).then((response) => {
this.pOrderTableList = response; this.pOrderTableList = response;
this.openReport = true; this.openReport = true;
this.titleReport = "过程巡检详情"; this.titleReport = "过程巡检详情";
}); });
}, },
/** 导出按钮操作 */ /** 导出按钮操作 */
handleExport() { handleExport() {
this.download('quality/staticTable/exportDLTable', { this.download(
...this.queryParams "quality/staticTable/exportDLTable",
}, `DLTable_${new Date().getTime()}.xlsx`) {
...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> </script>
<style> <style>
@ -420,14 +691,12 @@ export default {
margin-bottom: 15px; margin-bottom: 15px;
} }
.my-print-table { .my-print-table {
} }
.my-print-foot { .my-print-foot {
margin-top: 20px; margin-top: 20px;
} }
#.el-table .cell{ #.el-table .cell {
white-space: pre-line !important; white-space: pre-line !important;
} }
.el-table .cell.el-tooltip { .el-table .cell.el-tooltip {
white-space: pre-wrap; /*这是重点。文本换行*/ white-space: pre-wrap; /*这是重点。文本换行*/
@ -435,8 +704,7 @@ export default {
/deep/ .el-table__expand-icon { /deep/ .el-table__expand-icon {
display: none; display: none;
} }
.expandClass .el-table__expand-icon{ .expandClass .el-table__expand-icon {
display: none; display: none;
} }
</style> </style>

Write Preview
Loading…
Cancel
Save