| | |
| | | icon="Download" |
| | | @click="handleExport" |
| | | v-hasPermi="['apsPartRouteStat:export']" |
| | | >导出</el-button> |
| | | >{{ $t(`common.common.export`) }}</el-button |
| | | > |
| | | </el-col> |
| | | <el-col :span="1.5"> |
| | | <el-button |
| | | type="info" |
| | | type="success" |
| | | plain |
| | | icon="Refresh" |
| | | @click="handleRefresh" |
| | | :disabled="loading" |
| | | v-hasPermi="['apsPartRouteStat:edit']" |
| | | >更新</el-button> |
| | | >{{ $t(`common.common.update`) }}</el-button |
| | | > |
| | | </el-col> |
| | | <right-toolbar @queryTable="getList" :search="false"></right-toolbar> |
| | | </el-row> |
| | |
| | | </template> |
| | | |
| | | <script setup name="apsPartRouteStat"> |
| | | import { query,updateStat } from "@/api/mainPlan/partRouteStat.js"; |
| | | import { query, updateStat } from "@/api/mainPlan/partRouteStat.js"; |
| | | import { ref } from "vue"; |
| | | import * as XLSX from 'xlsx'; |
| | | import * as XLSX from "xlsx"; |
| | | |
| | | const { proxy } = getCurrentInstance(); |
| | | |
| | | const loading = ref(true); |
| | | import { useI18n } from "vue-i18n"; //要在js中使用国际化 |
| | | const { t, locale } = useI18n(); |
| | | const loading = ref(false); |
| | | const gridRef = ref(); |
| | | const height = ref(document.documentElement.clientHeight - 130 + "px;") |
| | | const height = ref(document.documentElement.clientHeight - 130 + "px;"); |
| | | const headers = ref([]); |
| | | const exportData = ref([]); |
| | | |
| | |
| | | showFooterOverflow: true, |
| | | height: height, |
| | | columnConfig: { |
| | | resizable: true |
| | | resizable: true, |
| | | }, |
| | | scrollX: { |
| | | enabled: true, |
| | | gt: 0, |
| | | threshold: 50 |
| | | threshold: 50, |
| | | }, |
| | | scrollY: { |
| | | enabled: true, |
| | | gt: 0, |
| | | threshold: 50 |
| | | } |
| | | threshold: 50, |
| | | }, |
| | | }); |
| | | |
| | | let tableColumn = [] |
| | | let tableData = [] |
| | | let tableColumn = []; |
| | | let tableData = []; |
| | | let merges = []; |
| | | |
| | | watch(locale, (newLocale) => { |
| | | getList() |
| | | },{immediate:true, deep:true}) |
| | | /** 查询零件统计表列表 */ |
| | | function getList() { |
| | | let rowKey = 0 |
| | | let colKey = 0 |
| | | headers.value = [] |
| | | exportData.value = [] |
| | | tableColumn = [] |
| | | tableData = [] |
| | | let rowKey = 0; |
| | | let colKey = 0; |
| | | headers.value = []; |
| | | exportData.value = []; |
| | | tableColumn = []; |
| | | tableData = []; |
| | | loading.value = true; |
| | | query().then(response => { |
| | | const colList = [] |
| | | let headersOne = [] |
| | | let headersTwo = [] |
| | | if(response.code == '200'){ |
| | | query().then((response) => { |
| | | const colList = []; |
| | | let headersOne = []; |
| | | let headersTwo = []; |
| | | if (response.code == "200") { |
| | | if (!response.planTitle) { |
| | | loading.value = false; |
| | | return; |
| | | } |
| | | headersOne.push('日期'); |
| | | headersTwo.push('资源组'); |
| | | headersOne.push(t('plan.table.dateYearMonth')); |
| | | headersTwo.push(t('plan.table.resourceName')); |
| | | colList.push({ |
| | | field: 'dateCol', |
| | | title: '日期', |
| | | fixed: 'left', |
| | | children: [ |
| | | { field: `resourceName`, title: '资源组', width: 250, type: 'html'}, |
| | | ], |
| | | width: 160 |
| | | }) |
| | | response.planTitle.forEach(item => { |
| | | field: "dateCol", |
| | | title: t('plan.table.dateYearMonth'), |
| | | fixed: "left", |
| | | children: [ |
| | | { field: `resourceName`, title: t('plan.table.resourceName'), width: 250, type: "html" }, |
| | | ], |
| | | width: 160, |
| | | }); |
| | | response.planTitle.forEach((item) => { |
| | | headersOne.push(item); |
| | | headersOne.push(''); |
| | | headersOne.push(''); |
| | | headersTwo.push('设计工时'); |
| | | headersTwo.push('需求工时'); |
| | | headersTwo.push('产能负荷'); |
| | | colKey++ |
| | | headersOne.push(""); |
| | | headersOne.push(""); |
| | | headersTwo.push(t("plan.table.designWorkingHours")); |
| | | headersTwo.push(t("plan.table.requiredWorkingHours")); |
| | | headersTwo.push(t("plan.table.capacityLoad")); |
| | | colKey++; |
| | | colList.push({ |
| | | field: `dateColTime${colKey}`, |
| | | title: item, |
| | | children: [ |
| | | { field: `designTimes${colKey}`, title: '设计工时', width: 80}, |
| | | { field: `requireTimes${colKey}`, title: '需求工时', width: 80}, |
| | | { field: `capacityLoad${colKey}`, title: '产能负荷', width: 80, type: 'html'}, |
| | | { field: `designTimes${colKey}`, title: t("plan.table.designWorkingHours"), width: 80 }, |
| | | { field: `requireTimes${colKey}`, title: t("plan.table.requiredWorkingHours"), width: 80 }, |
| | | { |
| | | field: `capacityLoad${colKey}`, |
| | | title: t("plan.table.capacityLoad"), |
| | | width: 80, |
| | | type: "html", |
| | | }, |
| | | ], |
| | | width: 160 |
| | | }) |
| | | width: 160, |
| | | }); |
| | | }); |
| | | |
| | | headers.value.push(headersOne); |
| | | headers.value.push(headersTwo); |
| | | |
| | | const columnList = [...tableColumn, ...colList] |
| | | const dataList = [] |
| | | const columnList = [...tableColumn, ...colList]; |
| | | const dataList = []; |
| | | let startCol = 1; |
| | | |
| | | //获取map |
| | | response.planTable.forEach(mapItem => { |
| | | rowKey++ |
| | | response.planTable.forEach((mapItem) => { |
| | | rowKey++; |
| | | let lastCol = startCol + 2; |
| | | merges.push({ s: { r: 0, c: startCol }, e: { r: 0, c: lastCol} }); |
| | | merges.push({ s: { r: 0, c: startCol }, e: { r: 0, c: lastCol } }); |
| | | startCol = lastCol + 1; |
| | | let data = []; |
| | | const item = { |
| | | id: `${rowKey}` |
| | | } |
| | | id: `${rowKey}`, |
| | | }; |
| | | for (const [key, listValue] of Object.entries(mapItem)) { |
| | | data.push(key); |
| | | |
| | | |
| | | let tableKey = 0; |
| | | let flag = false; |
| | | listValue.forEach(listItem => { |
| | | |
| | | tableKey++ |
| | | listValue.forEach((listItem) => { |
| | | tableKey++; |
| | | item[`designTimes${tableKey}`] = listItem.designTimes; |
| | | item[`requireTimes${tableKey}`] = listItem.requireTimes; |
| | | item[`capacityLoad${tableKey}`] = listItem.capacityLoad > 100 ? `<font color="red">${listItem.capacityLoad}%</font>` :listItem.capacityLoad+'%'; |
| | | item[`capacityLoad${tableKey}`] = |
| | | listItem.capacityLoad > 100 |
| | | ? `<font color="red">${listItem.capacityLoad}%</font>` |
| | | : listItem.capacityLoad + "%"; |
| | | data.push(listItem.designTimes); |
| | | data.push(listItem.requireTimes); |
| | | data.push(listItem.capacityLoad+'%'); |
| | | data.push(listItem.capacityLoad + "%"); |
| | | if (listItem.capacityLoad > 100) { |
| | | flag = true; |
| | | } |
| | | }); |
| | | |
| | | item[`resourceName`] = flag ? `<div class='el-badge'><sup class="el-badge__content is-fixed is-dot"></sup>${key}</div>` : key; |
| | | item[`resourceName`] = flag |
| | | ? `<div class='el-badge'><sup class="el-badge__content is-fixed is-dot"></sup>${key}</div>` |
| | | : key; |
| | | } |
| | | exportData.value.push(data); |
| | | dataList.push(item); |
| | | }); |
| | | |
| | | const $grid = gridRef.value |
| | | |
| | | const $grid = gridRef.value; |
| | | if ($grid) { |
| | | tableColumn = columnList |
| | | tableData = [...tableData, ...dataList] |
| | | $grid.loadColumn(tableColumn) |
| | | $grid.loadData(tableData) |
| | | gridOptions.loading = false |
| | | tableColumn = columnList; |
| | | tableData = [...tableData, ...dataList]; |
| | | $grid.loadColumn(tableColumn); |
| | | $grid.loadData(tableData); |
| | | gridOptions.loading = false; |
| | | } |
| | | |
| | | loading.value = false; |
| | |
| | | |
| | | /** 导出按钮操作 */ |
| | | function handleExport() { |
| | | |
| | | // 合并表头和数据 |
| | | const finalData = [...headers.value, ...exportData.value]; |
| | | |
| | |
| | | { s: { r: 0, c: 0 }, e: { r: 0, c: 0 } } |
| | | ]; */ |
| | | |
| | | ws['!merges'] = merges; |
| | | |
| | | ws["!merges"] = merges; |
| | | |
| | | // 创建 workbook |
| | | const wb = XLSX.utils.book_new(); |
| | | // 将 worksheet 添加到 workbook 中 |
| | | XLSX.utils.book_append_sheet(wb, ws, 'Sheet1'); |
| | | XLSX.utils.book_append_sheet(wb, ws, "Sheet1"); |
| | | // 导出文件 |
| | | XLSX.writeFile(wb, `apsPartRouteStat_${new Date().getTime()}.xlsx`); |
| | | |
| | | } |
| | | |
| | | /** 刷新按钮操作 */ |
| | | function handleRefresh(){ |
| | | updateStat().then(response => { |
| | | if(response.code == '200'){ |
| | | function handleRefresh() { |
| | | loading.value = true; |
| | | updateStat().then((response) => { |
| | | if (response.code == "200") { |
| | | ElMessage({ |
| | | message: t("plan.message.update"), |
| | | type: "success", |
| | | }); |
| | | getList(); |
| | | loading.value = false; |
| | | } |
| | | }); |
| | | } |
| | | |
| | | getList(); |
| | | // getList(); |
| | | </script> |