From 1ade256261931323e1cfcc57e52d67799ae813b7 Mon Sep 17 00:00:00 2001
From: zhaoxiaolin <khd@123>
Date: Thu, 10 Apr 2025 13:59:50 +0800
Subject: [PATCH] =?UTF-8?q?=E9=BB=91=E8=9A=8A=E9=A6=99=E5=88=86=E7=B1=BB?=
 =?UTF-8?q?=E6=B1=87=E6=80=BB=E6=8A=A5=E8=A1=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/quality/qcTable.js                    |  18 +
 src/views/quality/checkType/index.vue         |  11 +-
 src/views/quality/qcTableDL/index.vue         |   2 +-
 src/views/quality/report/bpDefect/index.vue   |   2 +-
 src/views/quality/report/cpDefect/index.vue   | 215 +++++++++++
 .../quality/report/cpSortChart/index.vue      | 342 ++++++++++++++++++
 .../quality/report/cpTranChart/index.vue      | 342 ++++++++++++++++++
 7 files changed, 925 insertions(+), 7 deletions(-)
 create mode 100644 src/views/quality/report/cpDefect/index.vue
 create mode 100644 src/views/quality/report/cpSortChart/index.vue
 create mode 100644 src/views/quality/report/cpTranChart/index.vue

diff --git a/src/api/quality/qcTable.js b/src/api/quality/qcTable.js
index 5e99d05..34487b1 100644
--- a/src/api/quality/qcTable.js
+++ b/src/api/quality/qcTable.js
@@ -297,3 +297,21 @@ export function getDefectItemLinePC(query) {
 		params: query
 	});
 }
+
+//黑蚊香分类汇总头部
+export function getCpDateTitle(query) {
+	return request({
+		url: '/quality/staticTable/getCpDateTitle',
+		method: 'get',
+		params: query
+	});
+}
+
+//黑蚊香分类汇总头部
+export function getCpDefectDate(query) {
+	return request({
+		url: '/quality/staticTable/getCpDefectDate',
+		method: 'get',
+		params: query
+	});
+}
diff --git a/src/views/quality/checkType/index.vue b/src/views/quality/checkType/index.vue
index 0ce862e..3ef9b28 100644
--- a/src/views/quality/checkType/index.vue
+++ b/src/views/quality/checkType/index.vue
@@ -156,9 +156,9 @@
     <el-dialog :title="titleUserBind" :visible.sync="openUserBind" width="800px">
 		<el-table v-loading="userloading" :data="userList" ref="userBindTable" >
 			<el-table-column label="序号" align="center" type="index" width="50" />
-			<el-table-column label="员工编号" align="center" prop="userCode" />
-			<el-table-column label="姓名" align="center" prop="userName" />
-			<el-table-column label="来料类别" align="center" prop="attr1" >
+			<el-table-column label="员工编号" align="center" prop="userCode" width="90"/>
+			<el-table-column label="姓名" align="center" prop="userName" width="90"/>
+			<el-table-column label="来料类别" align="center" prop="attr1" width="90">
 				<template slot-scope="scope">
 					<dict-tag
 						:options="dict.type.order_type_ll"
@@ -168,7 +168,8 @@
 			</el-table-column>
 			<el-table-column label="所属线体/标准" align="center" prop="attr2List" >
 				<template slot-scope="scope">
-					<el-select v-model="scope.row.attr2List" placeholder="请选择" clearable @change="selectBelongTo(scope.row)" multiple>
+					<el-select v-model="scope.row.attr2List" placeholder="请选择" clearable @change="selectBelongTo(scope.row)" multiple
+					style="width:330px;">
 						<el-option
 						v-for="item in belongToOptions"
 						:key="item.typeCode"
@@ -401,7 +402,7 @@ export default {
 			this.getUserParams.materialCode = row.orderCode;
 
 			if(row.orderCode == 'checkTypeSC'|| row.orderCode == 'checkTypeSCXJ' || 
-				row.orderCode=='checkTypeCPPC' || row.orderCode=='checkTypeCP'){
+				row.orderCode=='checkTypeCPPC' || row.orderCode=='checkTypeCP' || row.orderCode=='checkTypeCPCJ'){
 				this.belongToOptions = this.belongToLines;
 			}else if(row.orderCode == 'checkTypeLL'){
 				this.belongToOptions = this.belongToStandars;
diff --git a/src/views/quality/qcTableDL/index.vue b/src/views/quality/qcTableDL/index.vue
index 4486601..fba6c18 100644
--- a/src/views/quality/qcTableDL/index.vue
+++ b/src/views/quality/qcTableDL/index.vue
@@ -247,7 +247,7 @@ import {
 import * as echarts from "echarts";
 import moment from "moment/moment";
 export default {
-  name: "qcAnalysis",
+  name: "qcTableDL",
   dicts: ["check_type"],
   data() {
     return {
diff --git a/src/views/quality/report/bpDefect/index.vue b/src/views/quality/report/bpDefect/index.vue
index 48d6ef4..d9c26fe 100644
--- a/src/views/quality/report/bpDefect/index.vue
+++ b/src/views/quality/report/bpDefect/index.vue
@@ -46,7 +46,7 @@
 import {getMonthOfDateTitle, getMonthOfDataDefect} from "@/api/quality/qcTable";
 import moment from 'moment';
 export default {
-	name: "BpReworkRate",
+	name: "BpDefect",
 	data() {
 		return {
 			// 遮罩层
diff --git a/src/views/quality/report/cpDefect/index.vue b/src/views/quality/report/cpDefect/index.vue
new file mode 100644
index 0000000..c20c466
--- /dev/null
+++ b/src/views/quality/report/cpDefect/index.vue
@@ -0,0 +1,215 @@
+<template>
+	<div class="app-container">
+		<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="98px">
+		    <el-form-item label="检验月份" prop="yearMonthDate">
+				<el-date-picker
+				v-model="queryParams.yearMonthDate"
+				type="month"
+				placeholder="选择月">
+				</el-date-picker>
+			</el-form-item>
+			<el-form-item label="白坯名称" prop="materialName">
+				<el-input
+					v-model="queryParams.materialName"
+					placeholder="请输入白坯名称"
+					clearable
+					@keyup.enter.native="handleQuery"
+				/>
+			</el-form-item>
+
+			<el-form-item>
+				<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
+				<el-button
+					type="warning"
+					plain
+					icon="el-icon-download"
+					size="mini"
+					@click="handleExport"
+				>导出</el-button>
+
+			</el-form-item>
+		</el-form>
+
+		<el-table v-loading="loading" :data="defectList" border height="500px" ref="tableRef">
+			<el-table-column label="序号" type="index" align="center" :index="indexMethod"/>
+			<el-table-column label="不良项目" align="center" prop="dataType" min-width="100"/>
+			<template v-for="(column, index) in showTitles">
+				<el-table-column align="center" min-width="120" :prop="column.id" :key="column.id" :label="column.titleName"/>
+			</template>
+		</el-table>
+
+	</div>
+</template>
+
+<script>
+import {getCpDateTitle, getCpDefectDate} from "@/api/quality/qcTable";
+import moment from 'moment';
+export default {
+	name: "CpDefect",
+	data() {
+		return {
+			// 遮罩层
+			loading: true,
+			// 选中数组
+			ids: [],
+			// 非单个禁用
+			single: true,
+			// 非多个禁用
+			multiple: true,
+			// 显示搜索条件
+			showSearch: true,
+			// 备料单表格数据
+			defectList: [],
+ 			activeName: 'first',
+            showTitles:[],//列表展示的小时段
+
+			// 弹出层标题
+			title: "",
+			// 是否显示弹出层
+			open: false,
+			// 查询参数
+			queryParams: {
+				yearMonthDate:null,
+				yearMonth:null,
+				productDateArray: [],
+				pageNum: 1,
+				pageSize: 10,
+				workorderCode: null,
+				workorderName: null,
+				parentOrder: null,
+				orderId: null,
+				orderCode: null,
+				productId: null,
+				productCode: null,
+				prodType: null,
+				productName: null,
+				productSpc: null,
+				productDate: null,
+				checkType: 'checkTypeCPCJ'
+			},
+			// 表单参数
+			form: {},
+			// 班次list
+            workShift: [],
+			equipmentTypeOption:[
+			],
+			spanArr: [],
+            position: 0
+		};
+	},
+	created() {
+        this.getDate();
+		this.getList();
+	},
+	//mounted() {
+	//	this.$nextTick(() => {
+	//		this.$refs.tableRef.doLayout();
+	//	});
+	//},
+	methods: {
+        /**获取默认查询时间段**/
+		getDate() {
+			let start = this.Fungetdate (0);
+			this.queryParams.yearMonthDate = start;
+		},
+		Fungetdate (num) {
+			var dd = new Date();
+			dd.setDate(dd.getDate() + num);
+			var y = dd.getFullYear();
+			var m = dd.getMonth() + 1;//获取当前月份的日期
+			return y + "-" + m ;
+		},
+
+
+		getList() {
+
+			if(this.queryParams.yearMonthDate!=null){
+				this.queryParams.yearMonth = moment(this.queryParams.yearMonthDate).format('YYYY-MM');
+			}else{
+				this.$message.error("请填写月份");
+				return
+			}
+
+			this.loading = true;
+            //获取Table表头
+			getCpDateTitle(this.queryParams).then(response => {
+				this.showTitles = [];
+				for(let i=0;i<=response.length-1;i++){
+					var pobj={};
+					pobj.id="dataTitle"+i;
+					pobj.titleName = response[i];
+					this.showTitles.push(pobj)
+				}
+			});
+            //获取Table数据
+			getCpDefectDate(this.queryParams).then(response => {
+				this.defectList = response;
+				this.loading = false;
+			});
+
+		},
+
+		// 取消按钮
+		cancel() {
+			this.open = false;
+			this.reset();
+		},
+		// 表单重置
+		reset() {
+			this.form = {
+				prepareId: null,
+				workorderCode: null,
+				workorderName: null,
+				parentOrder: null,
+				orderId: null,
+				orderCode: null,
+				productId: null,
+				productCode: null,
+				prodType: null,
+				productName: null,
+				productSpc: null,
+				wetDetailPlanId: null,
+				productDate: null,
+				shiftId: null,
+				ancestors: null,
+				status: null,
+				remark: null,
+				attr1: null,
+				attr2: null,
+				attr3: null,
+				attr4: null,
+				createBy: null,
+				createTime: null,
+				updateBy: null,
+				updateTime: null,
+				factoryCode: null
+			};
+			this.spanArr = [];
+			this.position = 0;
+			this.resetForm("form");
+		},
+		/** 搜索按钮操作 */
+		handleQuery() {
+			this.queryParams.pageNum = 1;
+			this.getList();
+		},
+		/** 重置按钮操作 */
+		resetQuery() {
+			this.resetForm("queryForm");
+			this.handleQuery();
+		},
+
+		/** 导出按钮操作 */
+		handleExport() {
+			this.download('quality/staticTable/getMonthOfDataDefectExport', {
+				...this.queryParams
+			}, `bpDefect_${new Date().getTime()}.xlsx`)
+		},
+
+		// 生成表头序号
+		indexMethod(index) {
+			return index + 1;
+		},
+	}
+};
+</script>
diff --git a/src/views/quality/report/cpSortChart/index.vue b/src/views/quality/report/cpSortChart/index.vue
new file mode 100644
index 0000000..be79842
--- /dev/null
+++ b/src/views/quality/report/cpSortChart/index.vue
@@ -0,0 +1,342 @@
+<template>
+	<div class="app-container">
+		<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="98px">
+		    <el-form-item label="检验月份" prop="yearMonthDate">
+				<el-date-picker
+				v-model="queryParams.yearMonthDate"
+				type="month"
+				placeholder="选择月">
+				</el-date-picker>
+			</el-form-item>
+			<el-form-item label="白坯名称" prop="materialName">
+				<el-input
+					v-model="queryParams.materialName"
+					placeholder="请输入白坯名称"
+					clearable
+					@keyup.enter.native="handleQuery"
+				/>
+			</el-form-item>
+
+			<el-form-item>
+				<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
+				<el-button
+					type="warning"
+					plain
+					icon="el-icon-download"
+					size="mini"
+					@click="handleExport"
+				>导出</el-button>
+				<span style="color:firebrick;font-size: small; text-align: center;padding-left:30px">说明：空白处表示当日未生产。</span>
+			</el-form-item>
+		</el-form>
+		<el-tabs v-model="activeName" type="card" @tab-click="handleClick">
+			<el-tab-pane label="图表" name="first">
+			    <el-form ref="form" :model="form" label-width="80px">
+					<el-row>
+						<el-col :span="24" style="text-align:center">
+							<h2>{{form.column080090}} 年 {{form.column090100}} 月 份 白 坯 不 良 排 列 图</h2>
+						</el-col>
+					</el-row>
+					<el-descriptions title="" border :column="3" :contentStyle="content_style" :label-style="label_style">
+						<el-descriptions-item label="产品名称" class="my-description-item1">{{form.materialName}}</el-descriptions-item>
+						<el-descriptions-item label="抽样数" class="my-description-item1">{{form.sampleQty}}</el-descriptions-item>
+
+						<el-descriptions-item label="生产车间" class="my-description-item1">{{form.workCenter}}</el-descriptions-item>
+						<el-descriptions-item label="不良品数" class="my-description-item1">{{form.noOkQty}}</el-descriptions-item>
+
+						<el-descriptions-item label="不良率" class="my-description-item1">{{form.noOkNumRate}}</el-descriptions-item>
+						<el-descriptions-item label="合格率" class="my-description-item1">{{form.okNumRate}}</el-descriptions-item>				
+					</el-descriptions>
+				</el-form>
+				<div id="echartss" style="width:1200px;height:450px;"></div>
+			</el-tab-pane>
+			<el-tab-pane label="报表" name="second">
+				<el-table v-loading="loading" :data="itemProList" border>
+					<el-table-column label="序号" type="index" align="center" :index="indexMethod" fixed/>
+					<el-table-column label="项目" align="center" prop="dataType" min-width="100" fixed/>
+						<template v-for="(column, index) in showTitles">
+							<el-table-column align="center" min-width="120" :prop="column.id" :key="column.id" :label="column.titleName"/>
+						</template>
+					</el-table-column>
+				</el-table>
+			</el-tab-pane>	
+		</el-tabs>
+	</div>
+</template>
+
+<script>
+import {getDefectItemTitle,getDefectItemData,getDefectItemLine} from "@/api/quality/qcTable";
+import moment from 'moment';
+import * as echarts from "echarts";
+export default {
+	name: "CpSortChart",
+	data() {
+		return {
+			// 遮罩层
+			loading: true,
+			// 选中数组
+			ids: [],
+			// 非单个禁用
+			single: true,
+			// 非多个禁用
+			multiple: true,
+			// 显示搜索条件
+			showSearch: true,
+			// 备料单表格数据
+			itemProList: [],
+ 			activeName: 'first',
+            showTitles:[],//列表展示的小时段
+
+			// 弹出层标题
+			title: "",
+			// 是否显示弹出层
+			open: false,
+			// 查询参数
+			queryParams: {
+				yearMonthDate:null,
+				yearMonth:null,
+				productDateArray: [],
+				pageNum: 1,
+				pageSize: 10,
+				workorderCode: null,
+				workorderName: null,
+				parentOrder: null,
+				orderId: null,
+				orderCode: null,
+				productId: null,
+				productCode: null,
+				prodType: null,
+				productName: null,
+				productSpc: null,
+				productDate: null,
+				equTypeCode: "equ_type_hf"
+			},
+			// 表单参数
+			form: {},
+			// 班次list
+            workShift: [],
+			equipmentTypeOption:[
+				{equipmentTypeCode:"equ_type_cxj",equipmentTypeName:"成型机"},
+				{equipmentTypeCode:"equ_type_hf",equipmentTypeName:"烘房"}
+			],
+			spanArr: [],
+            position: 0,
+			content_style: {
+				'text-align': 'center',
+				'min-width': '200px',
+				'word-break': 'break-all'
+			},
+			label_style: {
+				'color': '#000',
+				'text-align': 'center',
+				'font-weight': '600',
+				'height': '40px',
+				'background-color': '#d6dbe1',
+				'min-width': '100px',
+				'word-break': 'keep-all'
+			},
+		};
+	},
+	created() {
+        this.getDate();
+		this.getList();
+	},
+	methods: {
+        /**获取默认查询时间段**/
+		getDate() {
+			let start = this.Fungetdate (0);
+			this.queryParams.yearMonthDate = start;
+		},
+		Fungetdate (num) {
+			var dd = new Date();
+			dd.setDate(dd.getDate() + num);
+			var y = dd.getFullYear();
+			var m = dd.getMonth() + 1;//获取当前月份的日期
+			return y + "-" + m ;
+		},
+
+		/** 查询设备小时产量列表 */
+		getList() {
+
+			if(this.queryParams.yearMonthDate!=null){
+				this.queryParams.yearMonth = moment(this.queryParams.yearMonthDate).format('YYYY-MM');
+			}else{
+				this.$message.error("请填写月份");
+				return
+			}
+
+			this.spanArr = [];
+			this.position = 0;
+
+			this.loading = true;
+            //获取Table表头
+			getDefectItemTitle(this.queryParams).then(response => {
+				this.showTitles = [];
+				for(let i=0;i<=response.length-1;i++){
+					var pobj={};
+					pobj.id="item"+i;
+					pobj.titleName = response[i];
+					this.showTitles.push(pobj)
+				}
+			});
+            //获取Table数据
+			getDefectItemData(this.queryParams).then(response => {
+				this.itemProList = response;
+			    this.getTbody();
+				this.loading = false;
+			});
+		},
+
+		// 取消按钮
+		cancel() {
+			this.open = false;
+			this.reset();
+		},
+		// 表单重置
+		reset() {
+			this.form = {
+				prepareId: null,
+				workorderCode: null,
+				workorderName: null,
+				parentOrder: null,
+				orderId: null,
+				orderCode: null,
+				productId: null,
+				productCode: null,
+				prodType: null,
+				productName: null,
+				productSpc: null,
+				wetDetailPlanId: null,
+				productDate: null,
+				shiftId: null,
+				ancestors: null,
+				status: null,
+				remark: null,
+				attr1: null,
+				attr2: null,
+				attr3: null,
+				attr4: null,
+				createBy: null,
+				createTime: null,
+				updateBy: null,
+				updateTime: null,
+				factoryCode: null
+			};
+			this.resetForm("form");
+			this.spanArr = [];
+			this.position = 0;
+		},
+		/** 搜索按钮操作 */
+		handleQuery() {
+			this.queryParams.pageNum = 1;
+			this.getList();
+		},
+		/** 重置按钮操作 */
+		resetQuery() {
+			this.resetForm("queryForm");
+			this.handleQuery();
+		},
+
+		/** 导出按钮操作 */
+		handleExport() {
+			this.download('quality/staticTable/getDefectItemDataExport', {
+				...this.queryParams
+			}, `bpDefectItem_${new Date().getTime()}.xlsx`)
+		},
+
+
+		handleClick(){
+			this.$nextTick(()=>{
+				this.$refs.tables.doLayout()//对table进行重新布局
+			})
+		},
+		async getTbody(){
+			this.loading=true
+			this.$nextTick(()=>{
+				this.$refs.tables.doLayout()//对table进行重新布局
+			})
+            let _this = this
+			getDefectItemLine(this.queryParams).then(response => {
+				_this.form = response;
+				_this.getEcharts(response.supplierCodes,response.columns1,response.columns2)
+			});
+		},
+		getEcharts(xData,yDataLeft,yDdataRight){
+			var _this=this
+			var chartDom = document.getElementById('echartss');
+			var myChart = echarts.init(chartDom);
+			var option;
+			option = {
+            tooltip: {
+                trigger: 'axis',
+                axisPointer: {
+                    type: 'cross',
+                    crossStyle: {
+                        color: '#999'
+                    }
+                }
+            },
+            legend: {
+                data: ['不良率', '累计不良率']
+            },
+            xAxis: {
+                type: 'category',
+                data: xData//['断片', '断裂', '变形', '干料', '杂质']
+            },
+            yAxis: [
+                {
+                    type: 'value',
+                    name: '不良率(%)',
+                    min: 0,
+                    max: 100,
+                    interval: 5,
+                    axisLabel: {
+                        formatter: '{value} %'
+                    }
+                },
+                {
+                    type: 'value',
+                    name: '累计不良率',
+                    min: 0,
+                    //max: 100,
+                    interval: 20,
+                    axisLabel: {
+                        formatter: '{value} %'
+                    }
+                }
+            ],
+            series: [
+                {
+                    name: '不良率',
+                    type: 'bar',
+                    data: yDataLeft, //[15, 10, 8, 5, 2],
+					label: {
+						show: true, // 开启显示
+						position: 'top', // 显示位置，可以是'top', 'bottom', 'left', 'right'等
+						formatter: '{c}%' // {c} 表示系列中的当前数据值
+					},
+                },
+                {
+                    name: '累计不良率',
+                    type: 'line',
+                    yAxisIndex: 1,
+                    data: yDdataRight //[15, 25, 33, 38, 40]
+                }
+            ]
+        };
+
+				option && myChart.setOption(option);	
+		},
+
+		// 生成表头序号
+		indexMethod(index) {
+			return index + 1;
+		},
+	}
+};
+</script>
+<style scoped>
+.my-description-item1 {
+  width: 200px; /* 或者你想要的任何宽度 */
+}
+</style>
\ No newline at end of file
diff --git a/src/views/quality/report/cpTranChart/index.vue b/src/views/quality/report/cpTranChart/index.vue
new file mode 100644
index 0000000..38f3f63
--- /dev/null
+++ b/src/views/quality/report/cpTranChart/index.vue
@@ -0,0 +1,342 @@
+<template>
+	<div class="app-container">
+		<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="98px">
+		    <el-form-item label="检验月份" prop="yearMonthDate">
+				<el-date-picker
+				v-model="queryParams.yearMonthDate"
+				type="month"
+				placeholder="选择月">
+				</el-date-picker>
+			</el-form-item>
+			<el-form-item label="白坯名称" prop="materialName">
+				<el-input
+					v-model="queryParams.materialName"
+					placeholder="请输入白坯名称"
+					clearable
+					@keyup.enter.native="handleQuery"
+				/>
+			</el-form-item>
+
+			<el-form-item>
+				<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
+				<el-button
+					type="warning"
+					plain
+					icon="el-icon-download"
+					size="mini"
+					@click="handleExport"
+				>导出</el-button>
+				<span style="color:firebrick;font-size: small; text-align: center;padding-left:30px">说明：空白处表示当日未生产。</span>
+			</el-form-item>
+		</el-form>
+		<el-tabs v-model="activeName" type="card" @tab-click="handleClick">
+			<el-tab-pane label="图表" name="first">
+			    <el-form ref="form" :model="form" label-width="80px">
+					<el-row>
+						<el-col :span="24" style="text-align:center">
+							<h2>{{form.column080090}} 年 {{form.column090100}} 月 份 白 坯 不 良 排 列 图</h2>
+						</el-col>
+					</el-row>
+					<el-descriptions title="" border :column="3" :contentStyle="content_style" :label-style="label_style">
+						<el-descriptions-item label="产品名称" class="my-description-item1">{{form.materialName}}</el-descriptions-item>
+						<el-descriptions-item label="抽样数" class="my-description-item1">{{form.sampleQty}}</el-descriptions-item>
+
+						<el-descriptions-item label="生产车间" class="my-description-item1">{{form.workCenter}}</el-descriptions-item>
+						<el-descriptions-item label="不良品数" class="my-description-item1">{{form.noOkQty}}</el-descriptions-item>
+
+						<el-descriptions-item label="不良率" class="my-description-item1">{{form.noOkNumRate}}</el-descriptions-item>
+						<el-descriptions-item label="合格率" class="my-description-item1">{{form.okNumRate}}</el-descriptions-item>				
+					</el-descriptions>
+				</el-form>
+				<div id="echartss" style="width:1200px;height:450px;"></div>
+			</el-tab-pane>
+			<el-tab-pane label="报表" name="second">
+				<el-table v-loading="loading" :data="itemProList" border>
+					<el-table-column label="序号" type="index" align="center" :index="indexMethod" fixed/>
+					<el-table-column label="项目" align="center" prop="dataType" min-width="100" fixed/>
+						<template v-for="(column, index) in showTitles">
+							<el-table-column align="center" min-width="120" :prop="column.id" :key="column.id" :label="column.titleName"/>
+						</template>
+					</el-table-column>
+				</el-table>
+			</el-tab-pane>	
+		</el-tabs>
+	</div>
+</template>
+
+<script>
+import {getDefectItemTitle,getDefectItemData,getDefectItemLine} from "@/api/quality/qcTable";
+import moment from 'moment';
+import * as echarts from "echarts";
+export default {
+	name: "CpTranChart",
+	data() {
+		return {
+			// 遮罩层
+			loading: true,
+			// 选中数组
+			ids: [],
+			// 非单个禁用
+			single: true,
+			// 非多个禁用
+			multiple: true,
+			// 显示搜索条件
+			showSearch: true,
+			// 备料单表格数据
+			itemProList: [],
+ 			activeName: 'first',
+            showTitles:[],//列表展示的小时段
+
+			// 弹出层标题
+			title: "",
+			// 是否显示弹出层
+			open: false,
+			// 查询参数
+			queryParams: {
+				yearMonthDate:null,
+				yearMonth:null,
+				productDateArray: [],
+				pageNum: 1,
+				pageSize: 10,
+				workorderCode: null,
+				workorderName: null,
+				parentOrder: null,
+				orderId: null,
+				orderCode: null,
+				productId: null,
+				productCode: null,
+				prodType: null,
+				productName: null,
+				productSpc: null,
+				productDate: null,
+				equTypeCode: "equ_type_hf"
+			},
+			// 表单参数
+			form: {},
+			// 班次list
+            workShift: [],
+			equipmentTypeOption:[
+				{equipmentTypeCode:"equ_type_cxj",equipmentTypeName:"成型机"},
+				{equipmentTypeCode:"equ_type_hf",equipmentTypeName:"烘房"}
+			],
+			spanArr: [],
+            position: 0,
+			content_style: {
+				'text-align': 'center',
+				'min-width': '200px',
+				'word-break': 'break-all'
+			},
+			label_style: {
+				'color': '#000',
+				'text-align': 'center',
+				'font-weight': '600',
+				'height': '40px',
+				'background-color': '#d6dbe1',
+				'min-width': '100px',
+				'word-break': 'keep-all'
+			},
+		};
+	},
+	created() {
+        this.getDate();
+		this.getList();
+	},
+	methods: {
+        /**获取默认查询时间段**/
+		getDate() {
+			let start = this.Fungetdate (0);
+			this.queryParams.yearMonthDate = start;
+		},
+		Fungetdate (num) {
+			var dd = new Date();
+			dd.setDate(dd.getDate() + num);
+			var y = dd.getFullYear();
+			var m = dd.getMonth() + 1;//获取当前月份的日期
+			return y + "-" + m ;
+		},
+
+		/** 查询设备小时产量列表 */
+		getList() {
+
+			if(this.queryParams.yearMonthDate!=null){
+				this.queryParams.yearMonth = moment(this.queryParams.yearMonthDate).format('YYYY-MM');
+			}else{
+				this.$message.error("请填写月份");
+				return
+			}
+
+			this.spanArr = [];
+			this.position = 0;
+
+			this.loading = true;
+            //获取Table表头
+			getDefectItemTitle(this.queryParams).then(response => {
+				this.showTitles = [];
+				for(let i=0;i<=response.length-1;i++){
+					var pobj={};
+					pobj.id="item"+i;
+					pobj.titleName = response[i];
+					this.showTitles.push(pobj)
+				}
+			});
+            //获取Table数据
+			getDefectItemData(this.queryParams).then(response => {
+				this.itemProList = response;
+			    this.getTbody();
+				this.loading = false;
+			});
+		},
+
+		// 取消按钮
+		cancel() {
+			this.open = false;
+			this.reset();
+		},
+		// 表单重置
+		reset() {
+			this.form = {
+				prepareId: null,
+				workorderCode: null,
+				workorderName: null,
+				parentOrder: null,
+				orderId: null,
+				orderCode: null,
+				productId: null,
+				productCode: null,
+				prodType: null,
+				productName: null,
+				productSpc: null,
+				wetDetailPlanId: null,
+				productDate: null,
+				shiftId: null,
+				ancestors: null,
+				status: null,
+				remark: null,
+				attr1: null,
+				attr2: null,
+				attr3: null,
+				attr4: null,
+				createBy: null,
+				createTime: null,
+				updateBy: null,
+				updateTime: null,
+				factoryCode: null
+			};
+			this.resetForm("form");
+			this.spanArr = [];
+			this.position = 0;
+		},
+		/** 搜索按钮操作 */
+		handleQuery() {
+			this.queryParams.pageNum = 1;
+			this.getList();
+		},
+		/** 重置按钮操作 */
+		resetQuery() {
+			this.resetForm("queryForm");
+			this.handleQuery();
+		},
+
+		/** 导出按钮操作 */
+		handleExport() {
+			this.download('quality/staticTable/getDefectItemDataExport', {
+				...this.queryParams
+			}, `bpDefectItem_${new Date().getTime()}.xlsx`)
+		},
+
+
+		handleClick(){
+			this.$nextTick(()=>{
+				this.$refs.tables.doLayout()//对table进行重新布局
+			})
+		},
+		async getTbody(){
+			this.loading=true
+			this.$nextTick(()=>{
+				this.$refs.tables.doLayout()//对table进行重新布局
+			})
+            let _this = this
+			getDefectItemLine(this.queryParams).then(response => {
+				_this.form = response;
+				_this.getEcharts(response.supplierCodes,response.columns1,response.columns2)
+			});
+		},
+		getEcharts(xData,yDataLeft,yDdataRight){
+			var _this=this
+			var chartDom = document.getElementById('echartss');
+			var myChart = echarts.init(chartDom);
+			var option;
+			option = {
+            tooltip: {
+                trigger: 'axis',
+                axisPointer: {
+                    type: 'cross',
+                    crossStyle: {
+                        color: '#999'
+                    }
+                }
+            },
+            legend: {
+                data: ['不良率', '累计不良率']
+            },
+            xAxis: {
+                type: 'category',
+                data: xData//['断片', '断裂', '变形', '干料', '杂质']
+            },
+            yAxis: [
+                {
+                    type: 'value',
+                    name: '不良率(%)',
+                    min: 0,
+                    max: 100,
+                    interval: 5,
+                    axisLabel: {
+                        formatter: '{value} %'
+                    }
+                },
+                {
+                    type: 'value',
+                    name: '累计不良率',
+                    min: 0,
+                    //max: 100,
+                    interval: 20,
+                    axisLabel: {
+                        formatter: '{value} %'
+                    }
+                }
+            ],
+            series: [
+                {
+                    name: '不良率',
+                    type: 'bar',
+                    data: yDataLeft, //[15, 10, 8, 5, 2],
+					label: {
+						show: true, // 开启显示
+						position: 'top', // 显示位置，可以是'top', 'bottom', 'left', 'right'等
+						formatter: '{c}%' // {c} 表示系列中的当前数据值
+					},
+                },
+                {
+                    name: '累计不良率',
+                    type: 'line',
+                    yAxisIndex: 1,
+                    data: yDdataRight //[15, 25, 33, 38, 40]
+                }
+            ]
+        };
+
+				option && myChart.setOption(option);	
+		},
+
+		// 生成表头序号
+		indexMethod(index) {
+			return index + 1;
+		},
+	}
+};
+</script>
+<style scoped>
+.my-description-item1 {
+  width: 200px; /* 或者你想要的任何宽度 */
+}
+</style>
\ No newline at end of file