| | |
| | | <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> |
| | |
| | | <li v-for="item in todoList" :key="item.id"> |
| | | <div style="display: flex;flex-direction: column;justify-content: space-between;width: 100%;gap: 20px"> |
| | | <div style="display: flex;justify-content: space-between;align-items: center;"> |
| | | <div class="todo-title">流程编号:{{item.approveId}}</div> |
| | | <div class="todo-division">申请部门:{{item.approveDeptName}}</div> |
| | | <div class="todo-title">待办编号:{{item.approveId}}</div> |
| | | <div class="todo-division">部门:{{item.approveDeptName}}</div> |
| | | <div class="todo-time">{{item.approveTime}}</div> |
| | | </div> |
| | | <div class="todo-division">审批事由:{{item.approveReason}}</div> |
| | | <div class="todo-division">待办事由:{{item.approveReason}}</div> |
| | | </div> |
| | | </li> |
| | | </ul> |
| | |
| | | |
| | | <!-- 底部横向两栏 --> |
| | | <div class="dashboard-row"> |
| | | <div class="main-panel"> |
| | | <div class="section-title">质量统计</div> |
| | | <div class="quality-cards"> |
| | | <div class="quality-card one">原材料已检测数 <span>{{qualityStatisticsObject.supplierNum}}件</span></div> |
| | | <div class="quality-card two">过程检验数量 <span>{{qualityStatisticsObject.processNum}}件</span></div> |
| | | <div class="quality-card three">出厂已检数量 <span>{{qualityStatisticsObject.factoryNum}}件</span></div> |
| | | </div> |
| | | <Echarts ref="chart" |
| | | :chartStyle="chartStyle" |
| | | :grid="grid" |
| | | :legend="barLegend" |
| | | :series="barSeries1" |
| | | :tooltip="tooltip" |
| | | :xAxis="xAxis1" |
| | | :yAxis="yAxis1" |
| | | style="height: 260px"></Echarts> |
| | | </div> |
| | | <!-- <div class="main-panel">--> |
| | | <!-- <div class="section-title">质量统计</div>--> |
| | | <!-- <div class="quality-cards">--> |
| | | <!-- <div class="quality-card one">原材料已检测数 <span>{{qualityStatisticsObject.supplierNum}}件</span></div>--> |
| | | <!-- <div class="quality-card two">过程检验数量 <span>{{qualityStatisticsObject.processNum}}件</span></div>--> |
| | | <!-- <div class="quality-card three">出厂已检数量 <span>{{qualityStatisticsObject.factoryNum}}件</span></div>--> |
| | | <!-- </div>--> |
| | | <!-- <Echarts ref="chart"--> |
| | | <!-- :chartStyle="chartStyle"--> |
| | | <!-- :grid="grid"--> |
| | | <!-- :legend="barLegend"--> |
| | | <!-- :series="barSeries1"--> |
| | | <!-- :tooltip="tooltip"--> |
| | | <!-- :xAxis="xAxis1"--> |
| | | <!-- :yAxis="yAxis1"--> |
| | | <!-- style="height: 260px"></Echarts>--> |
| | | <!-- </div>--> |
| | | <div class="main-panel"> |
| | | <div class="section-title">回款与开票分析</div> |
| | | <Echarts ref="chart" :chartStyle="chartStyle" :grid="grid" :legend="lineLegend" :series="lineSeries" |
| | |
| | | }]) |
| | | const yAxis = [{ |
| | | type: 'category', |
| | | data: ['预付账款', '应付账款', '预收账款', '应收账款',] |
| | | data: [ '应付账款', '应收账款',] |
| | | }] |
| | | const yAxis1 = [{ |
| | | type: 'value' |
| | |
| | | formatter: function (params) { |
| | | // 动态生成提示信息,基于数据项的 name 属性 |
| | | const description = params.name === '本月回款金额' ? '本月回款金额' : '应收款金额'; |
| | | return `${description} ${formatNumber(params.value)}元 ${params.percent}%`; |
| | | return `${description} ${formattedNumber(params.value)}元 ${params.percent}%`; |
| | | }, |
| | | position: 'right' |
| | | }) |
| | |
| | | } |
| | | ]) |
| | | |
| | | // 合同金额分析数据 |
| | | const contractList = [ |
| | | { name: '深圳科技有限公司', percent: 36, value: 4544, color: '#4fc3f7' }, |
| | | { name: '北京科技有限公司', percent: 20, value: 4000, color: '#81c784' }, |
| | | { name: '广州科技有限公司', percent: 16, value: 3113, color: '#ffb74d' }, |
| | | { name: '上海科技有限公司', percent: 10, value: 2341, color: '#ba68c8' }, |
| | | { name: '南京科技有限公司', percent: 9, value: 1231, color: '#e57373' }, |
| | | { name: '北京未来科技有限公司', percent: 9, value: 1231, color: '#64b5f6' } |
| | | ] |
| | | |
| | | // 待办事项 |
| | | const todoList = ref([]) |
| | | const radio1 = ref(1) |
| | |
| | | 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) => { |
| | |
| | | } |
| | | // 应付应收统计 |
| | | const statisticsReceivable = (type) => { |
| | | console.log(type) |
| | | statisticsReceivablePayable({type: radio1.value}).then((res) => { |
| | | barSeries.value[0].data = [ |
| | | { value: res.data.prepayMoney, itemStyle: { color: barColors2[0] } }, |
| | | { value: res.data.payableMoney, itemStyle: { color: barColors2[1] } }, |
| | | { value: res.data.advanceMoney, itemStyle: { color: barColors2[2] } }, |
| | | { value: res.data.receivableMoney, itemStyle: { color: barColors2[3] } } |
| | | // { value: res.data.prepayMoney, itemStyle: { color: barColors2[0] } }, |
| | | { value: res.data.payableMoney, itemStyle: { color: barColors2[0] } }, |
| | | // { value: res.data.advanceMoney, itemStyle: { color: barColors2[2] } }, |
| | | { value: res.data.receivableMoney, itemStyle: { color: barColors2[1] } } |
| | | ] |
| | | }) |
| | | } |
| | |
| | | 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; |
| | |
| | | color: #666; |
| | | list-style: none; |
| | | padding: 0; |
| | | height: 190px; |
| | | overflow-y: auto; |
| | | width: 460px; |
| | | } |
| | | .line { |
| | | position: relative; |
| | | width: 250px; |
| | | width: 230px; |
| | | } |
| | | .line::after { |
| | | content: ''; |
| | | position: absolute; |
| | | right: 12px; |
| | | right: 2px; |
| | | top: 0; |
| | | bottom: 0; |
| | | width: 1px; |