| | |
| | | <div class="data-num"> |
| | | <div> |
| | | <div class="data-desc">本月销售额/元</div> |
| | | <div class="data-value">{{businessInfo.monthSaleMoney}}</div> |
| | | <div class="data-value" :title="businessInfo.monthSaleMoney">{{businessInfo.monthSaleMoney}}</div> |
| | | </div> |
| | | <div> |
| | | <div class="data-desc">未开票金额/元</div> |
| | | <div class="data-value">{{businessInfo.monthSaleHaveMoney}}</div> |
| | | <div class="data-value" :title="businessInfo.monthSaleHaveMoney">{{businessInfo.monthSaleHaveMoney}}</div> |
| | | </div> |
| | | </div> |
| | | |
| | |
| | | <div class="data-num"> |
| | | <div> |
| | | <div class="data-desc">本月采购额/元</div> |
| | | <div class="data-value">{{businessInfo.monthPurchaseMoney}}</div> |
| | | <div class="data-value" :title="businessInfo.monthPurchaseMoney">{{businessInfo.monthPurchaseMoney}}</div> |
| | | </div> |
| | | <div> |
| | | <div class="data-desc">待付款金额/元</div> |
| | | <div class="data-value">{{businessInfo.monthPurchaseHaveMoney}}</div> |
| | | <div class="data-value" :title="businessInfo.monthPurchaseHaveMoney">{{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">{{businessInfo.inventoryNum}}</div> |
| | | <div class="data-value" :title="businessInfo.inventoryNum">{{businessInfo.inventoryNum}}</div> |
| | | </div> |
| | | <div> |
| | | <div class="data-desc">今日入库/件</div> |
| | | <div class="data-value">{{businessInfo.todayInventoryNum}}</div> |
| | | <div class="data-value" :title="businessInfo.todayInventoryNum">{{businessInfo.todayInventoryNum}}</div> |
| | | </div> |
| | | </div> |
| | | </div> |
| | |
| | | formatter: function (params) { |
| | | // 动态生成提示信息,基于数据项的 name 属性 |
| | | const description = params.name === '本月回款金额' ? '本月回款金额' : '应收款金额'; |
| | | return `${description} ${formatNumber(params.value)}元 ${params.percent}%`; |
| | | return `${description} ${formattedNumber(params.value)}元 ${params.percent}%`; |
| | | }, |
| | | position: 'right' |
| | | }) |
| | |
| | | businessInfo.value = {...res.data} |
| | | }) |
| | | } |
| | | const formattedNumber = (row, column, cellValue) => { |
| | | return parseFloat(cellValue).toFixed(2); |
| | | }; |
| | | // 合同金额 |
| | | const analysisCustomer = () => { |
| | | analysisCustomerContractAmounts().then((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', |
| | |
| | | color: #FFFFFF; |
| | | } |
| | | .data-value { |
| | | max-width: 100px; |
| | | overflow: hidden; |
| | | text-overflow: ellipsis; |
| | | font-size: 18px; |
| | | font-weight: 500; |
| | | margin: 10px 0; |