Yangwl
/
lanju-front
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

修改质量看板，成品推移图，白坯车间看板刷新时间请求调整。

Browse Source
master
杨万里 2 weeks ago
parent 54fe4927cc
commit 554b1c609f
9 changed files with 355 additions and 146 deletions
Show Stats Download Patch File Download Diff File

7
src/api/kanban/quality.js
Unescape Escape View File

@ -104,3 +104,10 @@ export function getMonthOfYearContrast(data) {
data: data data: data
}); });
} }
// 过程检验--产品不合格率同期对比
export function getKBTest() {
return request({
url: '/quality/qcInterface/getKBTest',
method: 'post'
});
}

8
src/api/quality/qcTable.js
Unescape Escape View File

@ -315,3 +315,11 @@ export function getCpDefectDate(query) {
params: query params: query
}); });
} }
//黑 蚊 香 成 品 包 装 不 良 排 列 图头部
export function getHWXCPBZTitle(query) {
return request({
url: '/quality/staticTable/getHWXCPBZTitle',
method: 'get',
params: query
});
}

2
src/views/kanban/Dryingprocess/index.vue
Unescape Escape View File

@ -761,7 +761,7 @@ export default {
}, },
getDeviceRefreshTime() { getDeviceRefreshTime() {
const _this = this; const _this = this;
getDeviceRefreshTime().then((response) => { getDeviceRefreshTime({ poolName: "ds_1000" }).then((response) => {
if (response) { if (response) {
this.RefreshTime = response.data; this.RefreshTime = response.data;
_this.getDatalist(); _this.getDatalist();

4
src/views/kanban/dailyoutput/index.vue
Unescape Escape View File

@ -310,7 +310,7 @@ export default {
}).then((response) => { }).then((response) => {
if (response.data) { if (response.data) {
_this.getLineList = response.data; _this.getLineList = response.data;
_this.selectxt = _this.getLineList[0].parentName; _this.selectxt = _this.getLineList[2].parentName;
getBoardShifts({ getBoardShifts({
factory: _this.selectxt, factory: _this.selectxt,
}).then((response) => { }).then((response) => {
@ -327,7 +327,7 @@ export default {
}, },
getDeviceRefreshTime() { getDeviceRefreshTime() {
const _this = this; const _this = this;
getDeviceRefreshTime().then((response) => { getDeviceRefreshTime({ poolName: "ds_1000" }).then((response) => {
if (response.data) { if (response.data) {
console.log(response.data); console.log(response.data);
this.RefreshTime = response.data; this.RefreshTime = response.data;

22
src/views/kanban/quality/kanban1.vue
Unescape Escape View File

@ -254,6 +254,7 @@ import {
getProMonthNoOk, getProMonthNoOk,
getLineDayNoOk, getLineDayNoOk,
getMonthOfYearContrast, getMonthOfYearContrast,
getKBTest,
getDictData, getDictData,
} from "@/api/kanban/quality"; } from "@/api/kanban/quality";
import { getDeviceRefreshTime } from "@/api/kanban/equipment"; import { getDeviceRefreshTime } from "@/api/kanban/equipment";
@ -1050,20 +1051,19 @@ export default {
}; };
myChart6.setOption(option6); myChart6.setOption(option6);
getMonthOfYearContrast({ getMonthOfYearContrast({
typeCode: "product", factoryCode: _this.selectxt || "1000",
factoryCode: "ds_" + _this.selectxt,
}).then((response) => { }).then((response) => {
if (response) { if (response) {
let seriesdata1 = response[0].dataBarArrays; let xAxisdata = response.mapListCurrentYear.map(item => item.month);
let seriesdata2 = response[0].dataLineArrays; let seriesdata1 = response.mapListPreviousYear.map(item => item.total_noOkQty);
let xAxisdata = response[0].dayStr; let seriesdata2 = response.mapListPreviousYear.map(item => item.defect_ratio);
let seriesdata3 = response[1].dataBarArrays; let seriesdata3 = response.mapListCurrentYear.map(item => item.total_noOkQty);
let seriesdata4 = response[1].dataLineArrays; let seriesdata4 = response.mapListCurrentYear.map(item => item.defect_ratio);
let max1 = Math.max(...seriesdata1) + 5; let max1 = Math.max(...seriesdata1) + 5;
let max2 = Math.max(...seriesdata3) + 5; let max2 = Math.max(...seriesdata3) + 5;
let max3 = Math.max(...seriesdata2) + 5; let max3 = Math.max(...seriesdata2) + 5;
let max4 = Math.max(...seriesdata4) + 5; let max4 = Math.max(...seriesdata4) + 5;
//
let legenddata = []; let legenddata = [];
legenddata.push("去年不合格数量(PC)"); legenddata.push("去年不合格数量(PC)");
legenddata.push("本年不合格数量(PC)"); legenddata.push("本年不合格数量(PC)");
@ -1116,6 +1116,12 @@ export default {
myChart6.setOption(option6); myChart6.setOption(option6);
} }
}); });
// getKBTest({
// typeCode: "product",
// factoryCode: "ds_" + _this.selectxt,
// }).then((response) => {
// console.log(response);
// })
}, },
initChart2() { initChart2() {
const _this = this; const _this = this;

2
src/views/plan/order/index.vue
Unescape Escape View File

@ -199,7 +199,7 @@
type="text" type="text"
icon="el-icon-s-home" icon="el-icon-s-home"
@click="handleUpdate(scope.row)" @click="handleUpdate(scope.row)"
v-hasPermi="['mes:pro:order:bom']" v-hasPermi="['wms:bomComponent:list']"
v-if="scope.row.parentOrder == 0 && scope.row.delFlag == 0" v-if="scope.row.parentOrder == 0 && scope.row.delFlag == 0"
>查看库存 >查看库存
</el-button> </el-button>

20
src/views/quality/report/cpDefect/index.vue
Unescape Escape View File

@ -24,13 +24,14 @@
plain plain
icon="el-icon-download" icon="el-icon-download"
size="mini" size="mini"
@click="handleExport" @click="exportToExcel"
:loading="exportLoading"
>导出</el-button> >导出</el-button>
</el-form-item> </el-form-item>
</el-form> </el-form>
<el-table v-loading="loading" :data="defectList" border height="500px" ref="tableRef"> <el-table v-loading="loading" id="exportTable" :data="defectList" border height="500px" ref="tableRef">
<el-table-column label="序号" type="index" align="center" :index="indexMethod"/> <el-table-column label="序号" type="index" align="center" :index="indexMethod"/>
<el-table-column label="日期/不良项目" align="center" prop="dataType" min-width="100"/> <el-table-column label="日期/不良项目" align="center" prop="dataType" min-width="100"/>
<template v-for="(column, index) in showTitles"> <template v-for="(column, index) in showTitles">
@ -43,6 +44,8 @@
<script> <script>
import {getCpDateTitle, getCpDefectDate} from "@/api/quality/qcTable"; import {getCpDateTitle, getCpDefectDate} from "@/api/quality/qcTable";
import FileSaver from 'file-saver'
import * as XLSX from 'xlsx'
import moment from 'moment'; import moment from 'moment';
export default { export default {
name: "CpDefect", name: "CpDefect",
@ -50,6 +53,7 @@ export default {
return { return {
// 遮罩层 // 遮罩层
loading: true, loading: true,
exportLoading: false,
// 选中数组 // 选中数组
ids: [], ids: [],
// 非单个禁用 // 非单个禁用
@ -120,7 +124,19 @@ export default {
return y + "-" + m ; return y + "-" + m ;
}, },
async exportToExcel() {
this.exportLoading = true;
const table = document.querySelector('#exportTable').cloneNode(true)
// 删除fixed区域避免重复内容
if (table.querySelector('.el-table__fixed')) {
table.removeChild(table.querySelector('.el-table__fixed')) // :ml-citation{ref="3,8" data="citationList"}
}
const wb = XLSX.utils.table_to_book(table, { raw: true })
const wbout = XLSX.write(wb, { bookType: 'xlsx', type: 'array' })
FileSaver.saveAs(new Blob([wbout]), '黑蚊香分类汇总.xlsx') // :ml-citation{ref="4,7" data="citationList"}
this.exportLoading = false;
},
getList() { getList() {
if(this.queryParams.yearMonthDate!=null){ if(this.queryParams.yearMonthDate!=null){

317
src/views/quality/report/cpSortChart/index.vue
Unescape Escape View File

@ -8,14 +8,14 @@
placeholder="选择月"> placeholder="选择月">
</el-date-picker> </el-date-picker>
</el-form-item> </el-form-item>
<el-form-item label="白坯名称" prop="materialName"> <!-- <el-form-item label="白坯名称" prop="materialName">-->
<el-input <!-- <el-input-->
v-model="queryParams.materialName" <!-- v-model="queryParams.materialName"-->
placeholder="请输入白坯名称" <!-- placeholder="请输入白坯名称"-->
clearable <!-- clearable-->
@keyup.enter.native="handleQuery" <!-- @keyup.enter.native="handleQuery"-->
/> <!-- />-->
</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 type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
@ -34,40 +34,84 @@
<el-form ref="form" :model="form" label-width="80px"> <el-form ref="form" :model="form" label-width="80px">
<el-row> <el-row>
<el-col :span="24" style="text-align:center"> <el-col :span="24" style="text-align:center">
<h2>{{form.column080090}} 年 {{form.column090100}} 月 份 黑 蚊 香 成 品 包 装 不 良 排 列 图</h2> <h2>{{titleYear}} 年 {{titleMonth}} 月 份 黑 蚊 香 成 品 包 装 不 良 排 列 图</h2>
</el-col> </el-col>
</el-row> </el-row>
<el-descriptions title="" border :column="3" :contentStyle="content_style" :label-style="label_style"> <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">{{ProductName}}</el-descriptions-item>
<el-descriptions-item label="抽样数" class="my-description-item1">{{form.sampleQty}}</el-descriptions-item> <el-descriptions-item label="抽样数" class="my-description-item1">{{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">{{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">{{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">{{noOkNumRate}}</el-descriptions-item>
<el-descriptions-item label="合格率" class="my-description-item1">{{form.okNumRate}}</el-descriptions-item> <el-descriptions-item label="合格率" class="my-description-item1">{{okNumRate}}</el-descriptions-item>
</el-descriptions> </el-descriptions>
</el-form> </el-form>
<div id="echartss" style="width:1200px;height:450px;"></div> <div id="echartss" style="width:1200px;height:500px;"></div>
</el-tab-pane> </el-tab-pane>
<el-tab-pane label="报表" name="second"> <el-tab-pane label="报表" name="second">
<el-table v-loading="loading" :data="itemProList" border> <div class="quality-table-container">
<el-table-column label="序号" type="index" align="center" :index="indexMethod" fixed/> <table class="quality-table" id="exportTable">
<el-table-column label="项目" align="center" prop="dataType" min-width="100" fixed/> <thead>
<template v-for="(column, index) in showTitles"> <tr>
<el-table-column align="center" min-width="120" :prop="column.id" :key="column.id" :label="column.titleName"/> <!-- 使用v-for循环遍历数据，将class_name作为表头 -->
</template> <th>不良项目</th>
</el-table-column> <th v-for="(item, index) in dataList" :key="index">{{ item.class_name }}</th>
</el-table>
</tr>
</thead>
<tbody>
<tr>
<!-- 使用v-for循环遍历数据，将noOk_quality作为对应的值显示在第一行 -->
<th>不良品数</th>
<td v-for="(item, index) in dataList" :key="index">{{ item.noOk_quality }}</td>
</tr>
<tr>
<!-- 使用v-for循环遍历数据，将rate作为显示在第二行 -->
<th>不良比例</th>
<td v-for="(item, index) in dataList" :key="index">{{ item.rate }}%</td>
</tr>
<tr>
<!-- 使用v-for循环遍历数据，将rate作为显示在第二行 -->
<th>累计不良比例</th>
<td v-for="(item, index) in dataList" :key="index">{{ item.rateAdd }}%</td>
</tr>
</tbody>
</table>
</div>
<!-- <el-table :data="[tableData]" style="width: 100%">-->
<!-- &lt;!&ndash; 动态生成表头和列数据 &ndash;&gt;-->
<!-- <el-table-column-->
<!-- v-for="(value, key) in tableData"-->
<!-- :key="key"-->
<!-- :label="key"-->
<!-- :prop="key">-->
<!-- </el-table-column>-->
<!-- </el-table>-->
</el-tab-pane> </el-tab-pane>
<!-- </el-tab-pane>-->
<!-- <el-tab-pane label="报表" name="second">-->
<!-- <el-table v-loading="loading" :data="itemProList" border>-->
<!--&lt;!&ndash; <el-table-column label="设备编码" align="center" prop="equipmentCode" width="150"/>&ndash;&gt;-->
<!-- <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.class_name"/>-->
<!-- </template>-->
<!-- </el-table-column>-->
<!-- </el-table>-->
</el-tabs> </el-tabs>
</div> </div>
</template> </template>
<script> <script>
import {getDefectItemTitle,getDefectItemData,getDefectItemLine} from "@/api/quality/qcTable"; import {getHWXCPBZTitle,getDefectItemData,getDefectItemLine} from "@/api/quality/qcTable";
import moment from 'moment'; import moment from 'moment';
import * as echarts from "echarts"; import * as echarts from "echarts";
import * as XLSX from "xlsx";
import FileSaver from 'file-saver'
export default { export default {
name: "CpSortChart", name: "CpSortChart",
data() { data() {
@ -83,10 +127,12 @@ export default {
// 显示搜索条件 // 显示搜索条件
showSearch: true, showSearch: true,
// 备料单表格数据 // 备料单表格数据
itemProList: [], dataList: [],
tableData: {},
activeName: 'first', activeName: 'first',
showTitles:[],//列表展示的小时段 showTitles:[],//列表展示的小时段
rate:[],
rateAdd:[],
// 弹出层标题 // 弹出层标题
title: "", title: "",
// 是否显示弹出层 // 是否显示弹出层
@ -113,6 +159,14 @@ export default {
}, },
// 表单参数 // 表单参数
form: {}, form: {},
titleYear: null,
titleMonth: null,
ProductName: null,
sampleQty: null,
workCenter: null,
noOkQty: null,
noOkNumRate: null,
okNumRate:null,
// 班次list // 班次list
workShift: [], workShift: [],
equipmentTypeOption:[ equipmentTypeOption:[
@ -139,6 +193,9 @@ export default {
}, },
created() { created() {
this.getDate(); this.getDate();
},
mounted() {
this.getList(); this.getList();
}, },
methods: { methods: {
@ -155,11 +212,13 @@ export default {
return y + "-" + m ; return y + "-" + m ;
}, },
/** 查询设备小时产量列表 */ /** 查询表头内容 */
getList() { getList() {
console.log(this.queryParams);
if(this.queryParams.yearMonthDate!=null){ if(this.queryParams.yearMonthDate!=null){
this.queryParams.yearMonth = moment(this.queryParams.yearMonthDate).format('YYYY-MM'); this.queryParams.yearMonth = moment(this.queryParams.yearMonthDate).format('YYYY-MM');
this.titleYear = this.queryParams.yearMonth.split('-')[0];
this.titleMonth = this.queryParams.yearMonth.split('-')[1];
}else{ }else{
this.$message.error("请填写月份"); this.$message.error("请填写月份");
return return
@ -170,20 +229,31 @@ export default {
this.loading = true; this.loading = true;
//获取Table表头 //获取Table表头
getDefectItemTitle(this.queryParams).then(response => { getHWXCPBZTitle(this.queryParams)
this.showTitles = []; .then(response => {
for(let i=0;i<=response.length-1;i++){ this.ProductName = response.ProductName;
var pobj={}; this.workCenter = response.workCenter;
pobj.id="item"+i; this.sampleQty = response.sampleQty;
pobj.titleName = response[i]; this.noOkQty = response.noOKQtyTotal;
this.showTitles.push(pobj) this.noOkNumRate = response.noOkNumRate;
} this.okNumRate = response.okNumRate;
}); this.dataList = response.classNameMap
//获取Table数据 .sort((a, b) => b.rate - a.rate)
getDefectItemData(this.queryParams).then(response => { .reduce((acc, item) => {
this.itemProList = response; const sum = (acc.length > 0 ? acc[acc.length - 1].rateAdd : 0) + item.rate;
this.getTbody(); const rateAdd = Number(sum.toFixed(2));
this.loading = false; acc.push({ ...item, rateAdd });
return acc;
}, []);
this.showTitles = this.dataList ? this.dataList.map(item => item.class_name) : [];
this.rate = this.dataList ? this.dataList.map(item => item.rate) : [];
this.rateAdd = this.dataList ? this.dataList.map(item => item.rateAdd) : [];
// 数据处理完成后调用 initChart
this.loading = true;
this.initChart();
})
.catch(error => {
console.error('数据请求失败', error);
}); });
}, },
@ -238,10 +308,18 @@ export default {
}, },
/** 导出按钮操作 */ /** 导出按钮操作 */
handleExport() { async handleExport() {
this.download('quality/staticTable/getDefectItemDataExport', { this.exportLoading = true;
...this.queryParams const table = document.querySelector('#exportTable').cloneNode(true)
}, `bpDefectItem_${new Date().getTime()}.xlsx`) // 删除fixed区域避免重复内容
if (table.querySelector('.el-table__fixed')) {
table.removeChild(table.querySelector('.el-table__fixed')) // :ml-citation{ref="3,8" data="citationList"}
}
const wb = XLSX.utils.table_to_book(table, { raw: true })
const wbout = XLSX.write(wb, { bookType: 'xlsx', type: 'array' })
FileSaver.saveAs(new Blob([wbout]), '黑蚊香成品排列明细.xlsx') // :ml-citation{ref="4,7" data="citationList"}
this.exportLoading = false;
}, },
@ -250,23 +328,14 @@ export default {
this.$refs.tables.doLayout()//对table进行重新布局 this.$refs.tables.doLayout()//对table进行重新布局
}) })
}, },
async getTbody(){ async initChart() {
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 chartDom = document.getElementById('echartss');
if (!chartDom) {
console.error('图表容器不存在');
return;
}
var myChart = echarts.init(chartDom); var myChart = echarts.init(chartDom);
var option; var option = {
option = {
tooltip: { tooltip: {
trigger: 'axis', trigger: 'axis',
axisPointer: { axisPointer: {
@ -276,30 +345,43 @@ export default {
} }
} }
}, },
toolbox: {
feature: {
// dataView: { show: true, readOnly: false },
// magicType: { show: true, type: ['line', 'bar'] },
// restore: { show: true },
saveAsImage: { show: true }
}
},
legend: { legend: {
data: ['不良率', '累计不良率'] data: ['不良比例','累计不良比例']
}, },
xAxis: { xAxis: [
{
type: 'category', type: 'category',
data: xData//['断片', '断裂', '变形', '干料', '杂质'] data: this.showTitles,
}, axisPointer: {
type: 'shadow'
}
}
],
yAxis: [ yAxis: [
{ {
type: 'value', type: 'value',
name: '不良率(%)', name: '不良比例',
min: 0, min: 0,
max: 100, max: 100,
interval: 5, interval: 50,
axisLabel: { axisLabel: {
formatter: '{value} %' formatter: '{value} %'
} }
}, },
{ {
type: 'value', type: 'value',
name: '累计不良率', name: '累计不良比例',
min: 0, min: 0,
//max: 100, max: 100,
interval: 20, interval: 5,
axisLabel: { axisLabel: {
formatter: '{value} %' formatter: '{value} %'
} }
@ -307,31 +389,58 @@ export default {
], ],
series: [ series: [
{ {
name: '不良率', name: '不良比例',
type: 'bar', type: 'bar',
data: yDataLeft, //[15, 10, 8, 5, 2], tooltip: {
label: { valueFormatter: function (value) {
show: true, // 开启显示 return value + ' %';
position: 'top', // 显示位置，可以是'top', 'bottom', 'left', 'right'等 }
formatter: '{c}%' // {c} 表示系列中的当前数据值
}, },
data: this.rate,
label: {
show: true, // 启用数值显示
position: 'top', // 数值显示在柱顶
formatter: '{c}%',
textStyle: {
fontSize: 14, // 字体大小
fontWeight: 'bold', // 加粗
color: 'blue' // 字体颜色
}
}
}, },
{ {
name: '累计不良率', name: '累计不良比例',
type: 'line', type: 'line',
yAxisIndex: 1, yAxisIndex: 1,
data: yDdataRight //[15, 25, 33, 38, 40] tooltip: {
valueFormatter: function (value) {
return value + ' %';
}
},
data: this.rateAdd,
label: {
show: true, // 启用数值显示
position: 'top', // 数值显示在柱顶
// formatter: '{c}%',
formatter: function (index) {
console.log(index)
if (index.dataIndex == 0) {
return '';
}
return index.data + '%';
},
textStyle: {
fontSize: 14, // 字体大小
fontWeight: 'bold', // 加粗
color: 'blue' // 字体颜色
}
}
} }
] ]
}; };
option && myChart.setOption(option); option && myChart.setOption(option);
}, },
// 生成表头序号
indexMethod(index) {
return index + 1;
},
} }
}; };
</script> </script>
@ -339,4 +448,44 @@ export default {
.my-description-item1 { .my-description-item1 {
width: 200px; /* 或者你想要的任何宽度 */ width: 200px; /* 或者你想要的任何宽度 */
} }
.quality-table-container {
padding: 20px;
font-family: 'Arial', sans-serif;
}
.quality-table {
width: 100%;
border-collapse: collapse; /* 合并边框为单线条 */
border: 1px solid #e0e0e0;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}
.quality-table th,
.quality-table td {
padding: 12px 15px;
text-align: center;
border: 1px solid #e0e0e0; /* 统一单元格边框 */
}
.quality-table thead th {
background-color: #f5f7fa;
font-weight: 600;
color: #333;
}
.quality-table tbody th {
background-color: #f9f9f9;
font-weight: 500;
text-align: left;
min-width: 120px;
}
.quality-table tbody tr:nth-child(even) {
background-color: #fafafa;
}
.quality-table td:hover {
background-color: #f0f7ff;
transition: background-color 0.2s;
}
</style> </style>

31
src/views/quality/report/cpTranChart/index.vue
Unescape Escape View File

@ -16,7 +16,8 @@
plain plain
icon="el-icon-download" icon="el-icon-download"
size="mini" size="mini"
@click="handleExport" @click="exportToExcel"
:loading="exportLoading"
>导出</el-button> >导出</el-button>
<span style="color:firebrick;font-size: small; text-align: center;padding-left:30px">说明：空白处表示当日未生产。</span> <span style="color:firebrick;font-size: small; text-align: center;padding-left:30px">说明：空白处表示当日未生产。</span>
</el-form-item> </el-form-item>
@ -26,13 +27,13 @@
<el-form ref="form" :model="form" label-width="80px"> <el-form ref="form" :model="form" label-width="80px">
<el-row> <el-row>
<el-col :span="24" style="text-align:center"> <el-col :span="24" style="text-align:center">
<h2>{{titleYear}} 年 {{titleMonth}} 月 份 黑 蚊 香 成 品 包 装 不 良 排 列 图</h2> <h2>{{titleYear}} 年 {{titleMonth}} 月 份 黑 蚊 香 成 品 包 装 不 良 推 移 图</h2>
</el-col> </el-col>
</el-row> </el-row>
</el-form> </el-form>
<div id="echartss" style="width:1200px;height:450px;"></div> <div id="echartss" style="width:1200px;height:450px;"></div>
</el-tab-pane> </el-tab-pane>
<el-table v-loading="loading" :data="defectList" border height="500px" ref="tableRef"> <el-table v-loading="loading" id="exportTable" :data="defectList" border height="500px" ref="tableRef" >
<el-table-column label="序号" type="index" align="center" :index="indexMethod"/> <el-table-column label="序号" type="index" align="center" :index="indexMethod"/>
<el-table-column label="日期/不良项目" align="center" prop="dataType" min-width="100"/> <el-table-column label="日期/不良项目" align="center" prop="dataType" min-width="100"/>
<template v-for="(column, index) in showTitles"> <template v-for="(column, index) in showTitles">
@ -57,12 +58,15 @@
import { getCpDateTitle,getCpDefectDate} from "@/api/quality/qcTable"; import { getCpDateTitle,getCpDefectDate} from "@/api/quality/qcTable";
import moment from 'moment'; import moment from 'moment';
import * as echarts from "echarts"; import * as echarts from "echarts";
import FileSaver from 'file-saver'
import * as XLSX from 'xlsx'
export default { export default {
name: "CpTranChart", name: "CpTranChart",
data() { data() {
return { return {
// 遮罩层 // 遮罩层
loading: true, loading: true,
exportLoading: false,
// 非单个禁用 // 非单个禁用
single: true, single: true,
// 非多个禁用 // 非多个禁用
@ -124,8 +128,20 @@ export default {
var m = dd.getMonth() + 1;//获取当前月份的日期 var m = dd.getMonth() + 1;//获取当前月份的日期
return y + "-" + m ; return y + "-" + m ;
}, },
async exportToExcel() {
this.exportLoading = true;
const table = document.querySelector('#exportTable').cloneNode(true)
// 删除fixed区域避免重复内容
if (table.querySelector('.el-table__fixed')) {
table.removeChild(table.querySelector('.el-table__fixed')) // :ml-citation{ref="3,8" data="citationList"}
}
/** 查询设备小时产量列表 */ const wb = XLSX.utils.table_to_book(table, { raw: true })
const wbout = XLSX.write(wb, { bookType: 'xlsx', type: 'array' })
FileSaver.saveAs(new Blob([wbout]), '黑蚊香分类汇总.xlsx') // :ml-citation{ref="4,7" data="citationList"}
this.exportLoading = false;
},
/** 查询表头内容 */
getList() { getList() {
//this.titleYear = this.queryParams.yearMonthDate.split('-')[0]; //this.titleYear = this.queryParams.yearMonthDate.split('-')[0];
// this.titleMonth = this.queryParams.yearMonthDate.split('-')[1]; // this.titleMonth = this.queryParams.yearMonthDate.split('-')[1];
@ -187,6 +203,13 @@ export default {
top: '5%', // 距离顶部5% top: '5%', // 距离顶部5%
orient: 'vertical' // 可选：垂直排列图例 orient: 'vertical' // 可选：垂直排列图例
}, },
toolbox: {
show: true,
feature: {
saveAsImage: {}
}
},
tooltip: { tooltip: {
trigger: 'axis', trigger: 'axis',
formatter: function(params) { formatter: function(params) {

Write Preview
Loading…
Cancel
Save