| | |
| | | <el-icon color="#5053B5" size="22"><Clock /></el-icon> |
| | | <span>登陆日期:{{userStore.currentLoginTime}}</span> |
| | | </div> |
| | | <div style="display: flex;align-items: center;gap: 8px"> |
| | | <el-icon color="#5053B5" size="22"><Calendar /></el-icon> |
| | | <span>排班时间:{{scheduleTime}}</span> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | <div class="data-cards"> |
| | |
| | | <div class="data-num"> |
| | | <div> |
| | | <div class="data-desc">本月销售额/元</div> |
| | | <div class="data-value" :title="businessInfo.monthSaleMoney">{{businessInfo.monthSaleMoney}}</div> |
| | | <div class="data-value">{{businessInfo.monthSaleMoney}}</div> |
| | | </div> |
| | | <div> |
| | | <div class="data-desc">未开票金额/元</div> |
| | | <div class="data-value" :title="businessInfo.monthSaleHaveMoney">{{businessInfo.monthSaleHaveMoney}}</div> |
| | | <div class="data-value">{{businessInfo.monthSaleHaveMoney}}</div> |
| | | </div> |
| | | </div> |
| | | |
| | |
| | | <div class="data-num"> |
| | | <div> |
| | | <div class="data-desc">本月采购额/元</div> |
| | | <div class="data-value" :title="businessInfo.monthPurchaseMoney">{{businessInfo.monthPurchaseMoney}}</div> |
| | | <div class="data-value">{{businessInfo.monthPurchaseMoney}}</div> |
| | | </div> |
| | | <div> |
| | | <div class="data-desc">待付款金额/元</div> |
| | | <div class="data-value" :title="businessInfo.monthPurchaseHaveMoney">{{businessInfo.monthPurchaseHaveMoney}}</div> |
| | | <div class="data-value">{{businessInfo.monthPurchaseHaveMoney}}</div> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | <div class="data-card inventory"> |
| | | <div class="data-title">采购库存</div> |
| | | <div class="data-title">库存数据</div> |
| | | <div class="data-num"> |
| | | <div> |
| | | <div class="data-desc">当前库存总量/件</div> |
| | | <div class="data-value" :title="businessInfo.inventoryNum">{{businessInfo.inventoryNum}}</div> |
| | | <div class="data-value">{{businessInfo.inventoryNum}}</div> |
| | | </div> |
| | | <div> |
| | | <div class="data-desc">今日入库/件</div> |
| | | <div class="data-value" :title="businessInfo.todayInventoryNum">{{businessInfo.todayInventoryNum}}</div> |
| | | <div class="data-value">{{businessInfo.todayInventoryNum}}</div> |
| | | </div> |
| | | </div> |
| | | </div> |
| | |
| | | <div class="main-panel"> |
| | | <div style="display: flex;justify-content: space-between;"> |
| | | <div class="section-title">应收应付统计</div> |
| | | <el-radio-group v-model="radio1" size="large" @change="statisticsReceivable"> |
| | | <el-radio-button label="按周" :value="1" /> |
| | | <el-radio-button label="按月" :value="2" /> |
| | | <el-radio-button label="按季度" :value="3" /> |
| | | </el-radio-group> |
| | | <!-- <el-radio-group v-model="radio1" size="large" @change="statisticsReceivable">--> |
| | | <!-- <el-radio-button label="按周" :value="1" />--> |
| | | <!-- <el-radio-button label="按月" :value="2" />--> |
| | | <!-- <el-radio-button label="按季度" :value="3" />--> |
| | | <!-- </el-radio-group>--> |
| | | </div> |
| | | <Echarts ref="chart" |
| | | :color="barColors2" |
| | |
| | | </template> |
| | | |
| | | <script setup> |
| | | import { ref, onMounted } from 'vue' |
| | | import { ref, reactive, onMounted } from 'vue' |
| | | import { ElNotification } from 'element-plus' |
| | | import Echarts from "@/components/Echarts/echarts.vue"; |
| | | import * as echarts from 'echarts'; |
| | | import useUserStore from "@/store/modules/user.js"; |
| | | import { Clock, Calendar } from '@element-plus/icons-vue' |
| | | import { |
| | | analysisCustomerContractAmounts, getAmountHalfYear, |
| | | getBusiness, |
| | | homeTodos, |
| | | qualityStatistics, |
| | | statisticsReceivablePayable |
| | | statisticsReceivablePayable, |
| | | approveAndDeviceTodos, |
| | | noticesCount |
| | | } from "@/api/viewIndex.js"; |
| | | import { getCurrentUserLatestScheduling } from "@/api/personnelManagement/scheduling.js"; |
| | | import dayjs from "dayjs"; |
| | | |
| | | const userStore = useUserStore() |
| | | |
| | |
| | | formatter: function (params) { |
| | | // 动态生成提示信息,基于数据项的 name 属性 |
| | | const description = params.name === '本月回款金额' ? '本月回款金额' : '应收款金额'; |
| | | return `${description} ${formattedNumber(params.value)}元 ${params.percent}%`; |
| | | return `${description} ${formatNumber(params.value)}元 ${params.percent}%`; |
| | | }, |
| | | position: 'right' |
| | | }) |
| | |
| | | const todoList = ref([]) |
| | | const radio1 = ref(1) |
| | | |
| | | // 排班时间 |
| | | const scheduleTime = ref('') |
| | | const scheduleInfo = ref({}) |
| | | |
| | | // 图表引用 |
| | | const barChart = ref(null) |
| | | const lineChart = ref(null) |
| | |
| | | statisticsReceivable() |
| | | qualityStatisticsInfo() |
| | | getAmountHalfYearNum() |
| | | getCurrentUserSchedule() |
| | | getApproveAndDeviceTodos() |
| | | getOngoingAnnouncementNoticeNumber() |
| | | }) |
| | | // 数据统计 |
| | | const getBusinessData = () => { |
| | |
| | | businessInfo.value = {...res.data} |
| | | }) |
| | | } |
| | | const formattedNumber = (row, column, cellValue) => { |
| | | // 如果只传了一个参数,直接格式化该参数 |
| | | if (column === undefined && cellValue === undefined) { |
| | | return parseFloat(row).toFixed(2) |
| | | } |
| | | return parseFloat(cellValue).toFixed(2) |
| | | }; |
| | | // 合同金额 |
| | | const analysisCustomer = () => { |
| | | analysisCustomerContractAmounts().then((res) => { |
| | |
| | | qualityStatisticsObject.value.factoryNum = res.data.factoryNum |
| | | }) |
| | | } |
| | | // 获取当前用户排班信息 |
| | | const getCurrentUserSchedule = async () => { |
| | | try { |
| | | const res = await getCurrentUserLatestScheduling() |
| | | |
| | | if (res.data) { |
| | | const currentSchedule = res.data |
| | | scheduleInfo.value = currentSchedule |
| | | |
| | | // 格式化排班时间显示 |
| | | if (currentSchedule.startTime && currentSchedule.endTime) { |
| | | scheduleTime.value = `${currentSchedule.startTime} - ${currentSchedule.endTime}` |
| | | } else if (currentSchedule.workStartTime && currentSchedule.workEndTime) { |
| | | const startTime = dayjs(currentSchedule.workStartTime).format('HH:mm') |
| | | const endTime = dayjs(currentSchedule.workEndTime).format('HH:mm') |
| | | scheduleTime.value = `${startTime} - ${endTime}` |
| | | } else { |
| | | scheduleTime.value = '今日无排班' |
| | | } |
| | | } else { |
| | | scheduleTime.value = '今日无排班' |
| | | scheduleInfo.value = {} |
| | | } |
| | | } catch (error) { |
| | | console.error('获取排班信息失败:', error) |
| | | scheduleTime.value = '获取排班信息失败' |
| | | } |
| | | } |
| | | |
| | | const getAmountHalfYearNum = async () => { |
| | | const res = await getAmountHalfYear() |
| | | console.log(res) |
| | |
| | | xAxis2.value[0].data = monthName.map(item => item.replace(/~/g, '\n~')); |
| | | lineSeries.value = [ |
| | | { |
| | | name: '回款', |
| | | name: '开票', |
| | | type: 'line', |
| | | data: receiptAmount, |
| | | stack: 'Total', |
| | |
| | | showSymbol: true, |
| | | }, |
| | | { |
| | | name: '开票', |
| | | name: '回款', |
| | | type: 'line', |
| | | data: invoiceAmount, |
| | | stack: 'Total', |
| | |
| | | }, |
| | | } |
| | | ] |
| | | } |
| | | |
| | | // 协同待审批和报修待办事项 |
| | | const getApproveAndDeviceTodos = async () => { |
| | | try { |
| | | const res = await approveAndDeviceTodos() |
| | | const { approveTodo, deviceRepairTodo } = res.data |
| | | |
| | | // 显示通知 |
| | | ElNotification({ |
| | | title: '待办事项提醒', |
| | | message: `当前有${approveTodo}条待审批事项,${deviceRepairTodo}条待维修事项`, |
| | | type: 'warning', |
| | | duration: 5000 |
| | | }) |
| | | } catch (error) { |
| | | console.error('获取协同待办事项失败:', error) |
| | | } |
| | | } |
| | | // 进行中公告通知 |
| | | const getOngoingAnnouncementNoticeNumber = async () => { |
| | | try { |
| | | const res = await noticesCount() |
| | | // const { approveTodo, deviceRepairTodo } = res.data |
| | | const _noticesCount = res.data |
| | | if(!_noticesCount){ |
| | | return |
| | | } |
| | | // 显示通知 |
| | | ElNotification({ |
| | | title: '通知公告通知', |
| | | message: `当前有${_noticesCount}条公告通知,注意查看`, |
| | | type: 'warning', |
| | | duration: 5000 |
| | | }) |
| | | } catch (error) { |
| | | console.error('获取协同待办事项失败:', error) |
| | | } |
| | | } |
| | | </script> |
| | | |
| | |
| | | color: #FFFFFF; |
| | | } |
| | | .data-value { |
| | | max-width: 100px; |
| | | overflow: hidden; |
| | | text-overflow: ellipsis; |
| | | font-size: 18px; |
| | | font-weight: 500; |
| | | margin: 10px 0; |