<!-- * @Author: zhp * @Date: 2024-04-15 10:49:13 * @LastEditTime: 2024-07-08 08:50:26 * @LastEditors: zhp * @Description: --> <template> <div style="display: flex; flex-direction: column; min-height: calc(100vh - 96px - 35px)"> <el-row :gutter="10"> <el-col :span="4"> <div class="app-container" style="padding: 16px; height: auto; text-align: left; border-radius: 8px;"> <!-- <p style="margin-bottom: 0">数据概览</p> --> <div class="view"> <div style="padding: 10px 0; width: 100%"> <div class="topDiv"> <div style="width: 4px; height: 52px; background: #71CC8C; border-radius: 2px;"></div> <div class="centerDiv"> <span style="font-size: 30px; line-height: 30px; color: rgba(0,0,0,0.85);">{{ inputNum }}</span> <span style="font-size: 14px; color: rgba(0,0,0,0.85);">在制工单数量</span> </div> <svg-icon icon-class="workProcess" style="width: 26px; height: 26px" /> </div> </div> </div> </div> </el-col> <el-col :span="20"> <div class="app-container" style="padding: 16px; height: auto; text-align: left; border-radius: 8px;"> <!-- <p style="margin-bottom: 0">数据概览</p> --> <div class="view"> <div style="padding: 10px 0; width: 100%" v-for="(item, index) in factorys" :key="index"> <div class="topDiv"> <div style="width: 4px; height: 52px; background: #3A79FF; border-radius: 2px;"></div> <div class="centerDiv"> <span style="font-size: 30px; line-height: 30px; color: rgba(0,0,0,0.85);">{{ factoryNum[index] }}</span> <span style="font-size: 14px; color: rgba(0,0,0,0.85);">{{item}}</span> </div> <svg-icon icon-class="factoryWorkOrder" style="width: 26px; height: 26px" /> </div> </div> </div> </div> </el-col> </el-row> <!-- <div class="app-container" style="margin-top: 8px; height: auto;"> <search-bar :formConfigs="formConfig" ref="searchBarForm" @headBtnClick="buttonClick" /> </div> --> <div class="app-container" style="margin-top: 8px;flex-grow: 1;"> <!-- <search-bar :formConfigs="formConfig2" ref="searchBarForm" style="margin-bottom: 0" /> --> <search-bar :formConfigs="formConfig" ref="searchBarForm" @headBtnClick="buttonClick" /> <base-table :table-props="tableProps" :page="listQuery.pageNo" :limit="listQuery.pageSize" :table-data="tableData" :max-height="tableH"> <method-btn v-if="tableBtn.length" slot="handleBtn" label="操作" :width="120" fixed="right" :method-list="tableBtn" @clickBtn="handleClick" /> </base-table> <pagination :limit.sync="listQuery.pageSize" :page.sync="listQuery.pageNo" :total="listQuery.total" @pagination="getDataList" /> </div> <add-or-update v-if="detailOrUpdateVisible" ref="detailOrUpdate" :date="listQuery.date" @refreshDataList="successSubmit" @destroy="detailOrUpdateVisible = false" /> </div> </template> <script> // import { parseTime } from '../../core/mixins/code-filter'; import { getWorkOrderPage, exportExcel, getOverView } from '@/api/produceData/order'; // import inputTable from './inputTable.vue'; import lineChart from './lineChart'; import moment from 'moment' import tableHeightMixin from "@/mixins/tableHeightMixin"; // import ButtonNav from '@/components/ButtonNav' import basicPage from '@/mixins/basic-page' import AddOrUpdate from './add-or-updata'; import { factoryList, factoryArray } from "@/utils/constants"; // import { publicFormatter } from "@/utils/dict"; import statusChart from "./statusChart.vue"; // import FileSaver from 'file-saver' // import * as XLSX from 'xlsx' export default { components: { lineChart, AddOrUpdate }, mixins: [basicPage, tableHeightMixin], data() { return { factorys: ['瑞昌中建材', '邯郸中建材', '株洲中建材', '佳木斯中建材', '成都中建材', '凯盛光伏', '蚌埠兴科'], factoryNum: [0, 0, 0, 0, 0, 0, 0], inputNum: 0, heightNum: 180, factoryList, factoryArray, listQuery: { pageSize: 20, pageNo: 1, factorys: undefined, total: 0, time: undefined, orderStatus:undefined }, detailOrUpdateVisible:false, tableBtn: [ { type: 'detail', btnName: '详情', }, // { // type: 'delete', // btnName: '删除', // }, ].filter((v) => v), typeList: [ { name: '芯片', id: 0, }, { name: '标准组件', id: 1, }, { name: 'BIPV产品', id: 2, }, ], formConfig: [ { type: "select", label: "工厂名称", selectOptions: factoryArray, labelField: 'name', valueField: 'id', param: "factory", multiple: true, filterable: true }, { type: "select", label: "工单状态", selectOptions: [ { label: '未开始', value: 0 }, { label: '生产中', value: 1 }, { label: '已完成', value: 2 } ], labelField: "label", valueField: "value", param: "orderStatus", multiple: true, filterable: true }, { type: "datePicker", label: "时间段", dateType: "daterange", format: "yyyy-MM-dd", valueFormat: "yyyy-MM-dd", rangeSeparator: "-", startPlaceholder: "开始日期", endPlaceholder: "结束日期", param: "timeSlot", defaultSelect: [], defaultTime: ["00:00:00", "23:59:59"], width: 250, }, { type: "button", btnName: "查询", name: "search", color: "primary", }, { type: "separate", }, { type: "button", btnName: "导出", name: "export", color: "primary", plain: true }, ], formConfig2: [ { type: 'title', label: '工厂信息', }, ], formConfig1: [ { type: 'title', label: '良品数量', }, ], tableProps: [ { prop: 'factory', label: '工厂名称', filter: (val) => factoryList[val], minWidth: 220, showOverflowtooltip: true }, { prop: 'workOrderNumber', label: '工单号', minWidth: 130, showOverflowtooltip: true // filter: (val) => ['玻璃芯片', '标准组件', 'BIPV', '定制组件'][val] }, { prop: 'workOrderType', label: '工单类型', // filter: publicFormatter('workorder_status') filter: (val) => ['', '芯片工单', '组件类型', 'bipv类型'][val], }, { prop: 'plannedInvestment', label: '计划投入', }, { prop: 'actualInvestment', label: '实际投入', }, { prop: 'targetProduction', label: '目标产量', }, { prop: 'actualProduction', label: '实际产量', }, { prop: 'productionProgress', label: '生产进度', filter: (val) => (val * 100).toFixed(2) + '%' }, { prop: 'orderStatus', label: '工单状态', subcomponent: statusChart // filter: (val) => ['', '未开始', '生产中', '已完成'][val], }, { prop: 'startTime', label: '开始时间', minWidth: 100, showOverflowtooltip: true }, { prop: 'endTime', label: '完成时间', minWidth: 100, showOverflowtooltip: true } ], tableData: [], xAxis: [], lineData: {} // data: {} // proLineList: [], // all: {} }; }, created() { const today = new Date() const sevenDaysAgo = new Date(today.getTime() - (6 * 24 * 60 * 60 * 1000)) this.listQuery.time = [moment(sevenDaysAgo).format('yyyy-MM-DD'), moment(today).format('yyyy-MM-DD')] this.formConfig[2].defaultSelect = this.listQuery.time }, mounted() { this.getOverView() }, methods: { getOverView() { getOverView().then(res => { // this.data = res.data if (res.code === 0) { for(const i in res.data) { if (i === '在制工单数量') { this.inputNum = res.data[i] } else { const index = this.factorys.indexOf(i) if (index > -1) { this.factoryNum[index] = res.data[i] } } } } }) }, otherMethods(val) { this.detailOrUpdateVisible = true; // this.addOrEditTitle = "详情"; this.$nextTick(() => { this.$refs.detailOrUpdate.init(val.data.id); }); }, async getDataList() { const res = await getWorkOrderPage(this.listQuery) this.tableData = res.data.list this.listQuery.total = res.data.total if (this.listQuery.total > 0) { this.tableData.forEach(item => { item.startTime = item.startDate ? item.startDate[0] + '-' + item.startDate[1] + '-' + item.startDate[2] : '--' item.endTime = item.endDate ? item.endDate[0] + '-' + item.endDate[1] + '-' + item.endDate[2] : '--' }) } }, buttonClick(val) { this.listQuery.factorys = val.factory?.length > 0 ? val.factory : undefined this.listQuery.orderStatus = val.orderStatus?.length > 0 ? val.orderStatus : undefined this.listQuery.time = val.timeSlot?.length > 0 ? val.timeSlot : undefined switch (val.btnName) { case 'search': this.listQuery.pageNo = 1; this.listQuery.pageSize = 20; if (this.listQuery.time) { this.getDataList(); } else { this.$message.warning('请选择时间范围!') } break; case 'export': if (this.listQuery.time) { this.handleExport(); } else { this.$message.warning('请选择时间范围!') } break; default: console.log(val); } }, /** 导出按钮操作 */ handleExport() { this.$modal.confirm('是否确认导出工单数据?').then(() => { // 处理查询参数 // let params = {...this.listQuery}; // params.current = 1; // params.size = 999; this.exportLoading = true; return exportExcel({ factorys: this.listQuery.factorys, orderStatus: this.listQuery.orderStatus, time: this.listQuery.time }); }).then(response => { this.$download.excel(response, '工单数据.xls'); this.exportLoading = false; }).catch(() => {}) }, }, }; </script> <style scoped> .centerDiv { display: flex; flex-direction: column; justify-content: flex-start; } .topDiv { display: flex; flex-direction: row; justify-content: space-around; align-items: flex-start; flex: 1; } .view { display: flex; justify-content: space-around; align-items: center; flex: 1; } .blueTip::before{ display: inline-block; content: ''; width: 4px; height: 18px; background: #0B58FF; border-radius: 1px; margin-right: 8PX; margin-top: 8px; } .app-container { margin: 0 0px 0; background-color: #fff; border-radius: 4px; padding: 16px 16px 0; height: calc(100vh - 40px); overflow: auto; } </style>