| | |
| | | </div> |
| | | </div> |
| | | </div> |
| | | <div class="data-cards"> |
| | | <div class="data-card sales"> |
| | | <div class="data-title">销售数据</div> |
| | | <div class="data-num"> |
| | | <div> |
| | | <div class="data-desc">本月销售额/元</div> |
| | | <div class="data-value">{{businessInfo.monthSaleMoney}}</div> |
| | | </div> |
| | | <div> |
| | | <div class="data-desc">未开票金额/元</div> |
| | | <div class="data-value">{{businessInfo.monthSaleHaveMoney}}</div> |
| | | </div> |
| | | </div> |
| | | |
| | | </div> |
| | | <div class="data-card purchase"> |
| | | <div class="data-title">采购数据</div> |
| | | <div class="data-num"> |
| | | <div> |
| | | <div class="data-desc">本月采购额/元</div> |
| | | <div class="data-value">{{businessInfo.monthPurchaseMoney}}</div> |
| | | </div> |
| | | <div> |
| | | <div class="data-desc">待付款金额/元</div> |
| | | <div class="data-value">{{businessInfo.monthPurchaseHaveMoney}}</div> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | <div class="data-card inventory"> |
| | | <div class="data-title">库存数据</div> |
| | | <div class="data-num"> |
| | | <div> |
| | | <div class="data-desc">当前库存总量/件</div> |
| | | <div class="data-value">{{businessInfo.inventoryNum}}</div> |
| | | </div> |
| | | <div> |
| | | <div class="data-desc">今日入库/件</div> |
| | | <div class="data-value">{{businessInfo.todayInventoryNum}}</div> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | <!-- <div class="data-cards">--> |
| | | <!-- <div class="data-card sales">--> |
| | | <!-- <div class="data-title">销售数据</div>--> |
| | | <!-- <div class="data-num">--> |
| | | <!-- <div>--> |
| | | <!-- <div class="data-desc">本月销售额/元</div>--> |
| | | <!-- <div class="data-value">{{businessInfo.monthSaleMoney}}</div>--> |
| | | <!-- </div>--> |
| | | <!-- <div>--> |
| | | <!-- <div class="data-desc">未开票金额/元</div>--> |
| | | <!-- <div class="data-value">{{businessInfo.monthSaleHaveMoney}}</div>--> |
| | | <!-- </div>--> |
| | | <!-- </div>--> |
| | | <!-- --> |
| | | <!-- </div>--> |
| | | <!-- <div class="data-card purchase">--> |
| | | <!-- <div class="data-title">采购数据</div>--> |
| | | <!-- <div class="data-num">--> |
| | | <!-- <div>--> |
| | | <!-- <div class="data-desc">本月采购额/元</div>--> |
| | | <!-- <div class="data-value">{{businessInfo.monthPurchaseMoney}}</div>--> |
| | | <!-- </div>--> |
| | | <!-- <div>--> |
| | | <!-- <div class="data-desc">待付款金额/元</div>--> |
| | | <!-- <div class="data-value">{{businessInfo.monthPurchaseHaveMoney}}</div>--> |
| | | <!-- </div>--> |
| | | <!-- </div>--> |
| | | <!-- </div>--> |
| | | <!-- <div class="data-card inventory">--> |
| | | <!-- <div class="data-title">库存数据</div>--> |
| | | <!-- <div class="data-num">--> |
| | | <!-- <div>--> |
| | | <!-- <div class="data-desc">当前库存总量/件</div>--> |
| | | <!-- <div class="data-value">{{businessInfo.inventoryNum}}</div>--> |
| | | <!-- </div>--> |
| | | <!-- <div>--> |
| | | <!-- <div class="data-desc">今日入库/件</div>--> |
| | | <!-- <div class="data-value">{{businessInfo.todayInventoryNum}}</div>--> |
| | | <!-- </div>--> |
| | | <!-- </div>--> |
| | | <!-- </div>--> |
| | | <!-- </div>--> |
| | | </div> |
| | | <!-- 右:待办事项 --> |
| | | <div class="todo-panel"> |
| | | <div class="section-title">待办事项</div> |
| | | <ul class="todo-list" v-if="todoList.length > 0"> |
| | | <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-time">{{item.approveTime}}</div> |
| | | </div> |
| | | <div class="todo-division">审批事由:{{item.approveReason}}</div> |
| | | </div> |
| | | </li> |
| | | </ul> |
| | | <div v-else style="text-align: center"> |
| | | 暂无数据 |
| | | </div> |
| | | </div> |
| | | </div> |
| | | |
| | | <!-- 中部横向两栏 --> |
| | | <div class="dashboard-row"> |
| | | <div class="main-panel"> |
| | | <div class="section-title">客户合同金额分析</div> |
| | | <div class="contract-summary"> |
| | | <div class="contract-info"> |
| | | <img src="../assets/images/khtitle.png" alt="" style="width: 42px"/> |
| | | <div class="contract-card"> |
| | | <div class="contract-name">总合同金额(元)</div> |
| | | <div class="contract-meta"> |
| | | <div class="main-amount">{{sum}}</div> |
| | | <div>周同比: <span class="up">{{yny}}% </span> 日环比: <span class="up">{{chain}}% </span></div> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | <div style="display: flex;align-items: center;gap: 20px;justify-content: space-evenly;height: 180px;margin-top: 20px"> |
| | | <div> |
| | | <Echarts ref="chart" :legend="pieLegend" :chartStyle="chartStylePie" |
| | | :series="materialPieSeries" |
| | | :tooltip="pieTooltip"></Echarts> |
| | | </div> |
| | | <ul class="contract-list"> |
| | | <li v-for="item in materialPieSeries[0].data" :key="item.name"> |
| | | <div style="display: flex;align-items: center;justify-content: space-between;width: 100%"> |
| | | <div class="line" :style="{color: item.itemStyle.color}">●{{item.name}}</div> |
| | | <div style="width: 70px">{{item.rate}}%</div> |
| | | <div>¥{{item.value}}</div> |
| | | </div> |
| | | </li> |
| | | </ul> |
| | | </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> |
| | | </div> |
| | | <Echarts ref="chart" |
| | | :color="barColors2" |
| | | :chartStyle="chartStyle" |
| | | :grid="grid" |
| | | :series="barSeries" |
| | | :tooltip="tooltip" |
| | | :xAxis="xAxis" |
| | | :yAxis="yAxis" |
| | | style="height: 260px"></Echarts> |
| | | </div> |
| | | </div> |
| | | |
| | | <!-- <div class="todo-panel">--> |
| | | <!-- <div class="section-title">待办事项</div>--> |
| | | <!-- <ul class="todo-list" v-if="todoList.length > 0">--> |
| | | <!-- <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-time">{{item.approveTime}}</div>--> |
| | | <!-- </div>--> |
| | | <!-- <div class="todo-division">审批事由:{{item.approveReason}}</div>--> |
| | | <!-- </div>--> |
| | | <!-- </li>--> |
| | | <!-- </ul>--> |
| | | <!-- <div v-else style="text-align: center">--> |
| | | <!-- 暂无数据--> |
| | | <!-- </div>--> |
| | | <!-- </div>--> |
| | | <!-- </div>--> |
| | | <!-- --> |
| | | <!-- <!– 中部横向两栏 –>--> |
| | | <!-- <div class="dashboard-row">--> |
| | | <!-- <div class="main-panel">--> |
| | | <!-- <div class="section-title">客户合同金额分析</div>--> |
| | | <!-- <div class="contract-summary">--> |
| | | <!-- <div class="contract-info">--> |
| | | <!-- <img src="../assets/images/khtitle.png" alt="" style="width: 42px"/>--> |
| | | <!-- <div class="contract-card">--> |
| | | <!-- <div class="contract-name">总合同金额(元)</div>--> |
| | | <!-- <div class="contract-meta">--> |
| | | <!-- <div class="main-amount">{{sum}}</div>--> |
| | | <!-- <div>周同比: <span class="up">{{yny}}% </span> 日环比: <span class="up">{{chain}}% </span></div>--> |
| | | <!-- </div>--> |
| | | <!-- </div>--> |
| | | <!-- </div>--> |
| | | <!-- </div>--> |
| | | <!-- <div style="display: flex;align-items: center;gap: 20px;justify-content: space-evenly;height: 180px;margin-top: 20px">--> |
| | | <!-- <div>--> |
| | | <!-- <Echarts ref="chart" :legend="pieLegend" :chartStyle="chartStylePie"--> |
| | | <!-- :series="materialPieSeries"--> |
| | | <!-- :tooltip="pieTooltip"></Echarts>--> |
| | | <!-- </div>--> |
| | | <!-- <ul class="contract-list">--> |
| | | <!-- <li v-for="item in materialPieSeries[0].data" :key="item.name">--> |
| | | <!-- <div style="display: flex;align-items: center;justify-content: space-between;width: 100%">--> |
| | | <!-- <div class="line" :style="{color: item.itemStyle.color}">●{{item.name}}</div>--> |
| | | <!-- <div style="width: 70px">{{item.rate}}%</div>--> |
| | | <!-- <div>¥{{item.value}}</div>--> |
| | | <!-- </div>--> |
| | | <!-- </li>--> |
| | | <!-- </ul>--> |
| | | <!-- </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>–>--> |
| | | <!-- </div>--> |
| | | <!-- <Echarts ref="chart"--> |
| | | <!-- :color="barColors2"--> |
| | | <!-- :chartStyle="chartStyle"--> |
| | | <!-- :grid="grid"--> |
| | | <!-- :series="barSeries"--> |
| | | <!-- :tooltip="tooltip"--> |
| | | <!-- :xAxis="xAxis"--> |
| | | <!-- :yAxis="yAxis"--> |
| | | <!-- style="height: 260px"></Echarts>--> |
| | | <!-- </div>--> |
| | | <!-- </div>--> |
| | | |
| | | <!-- 底部横向两栏 --> |
| | | <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> |
| | | <Echarts ref="chart" :chartStyle="chartStyle" :grid="grid" :legend="lineLegend" :series="lineSeries" |
| | | :tooltip="tooltipLine" :xAxis="xAxis2" :yAxis="yAxis2" style="height: 270px;"></Echarts> |
| | | </div> |
| | | <!-- <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>--> |
| | | <!-- <Echarts ref="chart" :chartStyle="chartStyle" :grid="grid" :legend="lineLegend" :series="lineSeries"--> |
| | | <!-- :tooltip="tooltipLine" :xAxis="xAxis2" :yAxis="yAxis2" style="height: 270px;"></Echarts>--> |
| | | <!-- </div>--> |
| | | </div> |
| | | </div> |
| | | </template> |
| | |
| | | }]) |
| | | const yAxis = [{ |
| | | type: 'category', |
| | | data: ['预付账款', '应付账款', '预收账款', '应收账款',] |
| | | data: [ '应付账款', '应收账款',] |
| | | }] |
| | | const yAxis1 = [{ |
| | | type: 'value' |
| | |
| | | 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] } } |
| | | ] |
| | | }) |
| | | } |
| | |
| | | min-width: 0; |
| | | background-color: #EFF2FB; /* 使用指定的背景颜色 */ |
| | | background-image: url("../assets/images/denglu.png"); |
| | | background-size: cover; |
| | | background-size: 100% 260%; |
| | | background-position: center; |
| | | background-repeat: no-repeat; |
| | | border-radius: 12px; |
| | |
| | | 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; |
| | |
| | | } |
| | | .quality-card.three { |
| | | background-image: url("../assets/images/chuchang.png"); |
| | | |
| | | |
| | | } |
| | | .quality-card span { |
| | | color: #4fc3f7; |
| | |
| | | height: 220px; |
| | | margin-top: 10px; |
| | | } |
| | | </style> |
| | | </style> |