| | |
| | | <div class="dashboard-row"> |
| | | <div class="main-panel process-panel"> |
| | | <div class="process-panel__header"> |
| | | <div class="section-title">工序数据生产统计明细</div> |
| | | <!-- <div class="section-title">工序数据生产统计明细</div> --> |
| | | <div class="section-title">产品部件统计</div> |
| | | <div style="display: flex; gap: 10px; align-items: center;"> |
| | | <el-button type="primary" size="small" plain icon="Filter" @click="openProcessDialog">选择工序</el-button> |
| | | <el-button type="primary" size="small" plain icon="Filter" @click="openProcessDialog">选择部件类型</el-button> |
| | | <el-button type="info" size="small" plain icon="Refresh" @click="resetProcessFilter">重置</el-button> |
| | | <el-radio-group v-model="processRange" size="small" @change="refreshProcessStats"> |
| | | <el-radio-button :value="1">日</el-radio-button> |
| | |
| | | </div> |
| | | |
| | | <!-- 工序选择弹窗 --> |
| | | <el-dialog v-model="processDialogVisible" title="选择工序" width="500px" append-to-body> |
| | | <el-dialog v-model="processDialogVisible" title="选择部件" width="500px" append-to-body> |
| | | <div class="process-selection-wrapper"> |
| | | <el-checkbox-group v-model="tempProcessIds"> |
| | | <div class="process-grid"> |
| | |
| | | </template> |
| | | |
| | | <script setup> |
| | | import { ref, onMounted, computed, reactive } from 'vue' |
| | | import { ref, onMounted, computed, reactive, getCurrentInstance } from 'vue' |
| | | import Echarts from "@/components/Echarts/echarts.vue"; |
| | | import * as echarts from 'echarts'; |
| | | import useUserStore from "@/store/modules/user.js"; |
| | |
| | | statisticsReceivablePayable, |
| | | qualityInspectionStatistics |
| | | } from "@/api/viewIndex.js"; |
| | | import { list } from '@/api/productionManagement/productionProcess'; |
| | | |
| | | |
| | | const userStore = useUserStore() |
| | | |
| | | const processOptions = ref([]) |
| | | const { proxy } = getCurrentInstance() |
| | | const { product_process_type } = proxy.useDict('product_process_type') |
| | | |
| | | // 工序选择弹窗:使用字典 product_process_type |
| | | // 字典字段:label / value,组件期望字段:name / id |
| | | const processOptions = computed(() => { |
| | | return (product_process_type?.value || []).map(item => ({ |
| | | id: item.value, |
| | | name: item.label |
| | | })) |
| | | }) |
| | | const selectedProcessIds = ref([]) |
| | | const tempProcessIds = ref([]) |
| | | const processDialogVisible = ref(false) |
| | |
| | | statisticsReceivable() |
| | | qualityStatisticsInfo() |
| | | getAmountHalfYearNum() |
| | | getProcessList() |
| | | }) |
| | | // 数据统计 |
| | | const getBusinessData = () => { |
| | |
| | | todoList.value = res.data |
| | | }) |
| | | } |
| | | // 获取工序列表 |
| | | const getProcessList = () => { |
| | | list().then(res => { |
| | | processOptions.value = res.data |
| | | }) |
| | | } |
| | | |
| | | const openProcessDialog = () => { |
| | | tempProcessIds.value = [...selectedProcessIds.value] |
| | | processDialogVisible.value = true |
| | |
| | | { |
| | | name: '开票', |
| | | type: 'line', |
| | | data: receiptAmount, |
| | | data: invoiceAmount, |
| | | stack: 'Total', |
| | | areaStyle: { |
| | | color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ |
| | |
| | | { |
| | | name: '回款', |
| | | type: 'line', |
| | | data: invoiceAmount, |
| | | data: receiptAmount, |
| | | stack: 'Total', |
| | | lineStyle: { |
| | | width: 0 |
| | |
| | | const refreshProcessStats = () => { |
| | | processDataProductionStatistics({ |
| | | type: processRange.value, |
| | | processIds: selectedProcessIds.value.length > 0 ? selectedProcessIds.value.join(',') : null |
| | | processTypes: selectedProcessIds.value.length > 0 ? selectedProcessIds.value.join(',') : null |
| | | }).then(res => { |
| | | processChartData.value = res.data.map(item => ({ |
| | | name: item.processName, |
| | |
| | | |
| | | <style scoped> |
| | | .dashboard { |
| | | background: #f5f7fa; |
| | | min-height: 100vh; |
| | | padding: 20px; |
| | | box-sizing: border-box; |