| | |
| | | <div class="left-panel"> |
| | | <!-- 客户信息统计分析 --> |
| | | <div class="panel-header"> |
| | | <span class="panel-title">客户信息统计分析</span> |
| | | <span class="panel-title">在制品统计分析</span> |
| | | </div> |
| | | <div class="panel-item-customers"> |
| | | <div class="panel-title-second"> |
| | | <div class="panel-title-icon"></div> |
| | | <div class="total-customers"> |
| | | <span class="label">总合同金额(元)</span> |
| | | <span class="value">{{sum}}</span> |
| | | <div class="quality-cards"> |
| | | <div class="quality-cardSec"> |
| | | <div class="quality-card one"></div> |
| | | <div class="quality-cardTitle"> |
| | | <div>总在制数量</div> |
| | | <div>{{workInProcessStatistics.totalQuantity}}件</div> |
| | | </div> |
| | | </div> |
| | | <!-- <div class="jiantou"></div>--> |
| | | <div class="quality-cardSec"> |
| | | <div class="quality-card two"></div> |
| | | <div class="quality-cardTitle"> |
| | | <div>平均周转天数</div> |
| | | <div>{{workInProcessStatistics.avgTurnoverDays}}天</div> |
| | | </div> |
| | | </div> |
| | | <div class="quality-cardSec"> |
| | | <div class="quality-card three"></div> |
| | | <div class="quality-cardTitle"> |
| | | <div>周转效率</div> |
| | | <div>{{workInProcessStatistics.turnoverEfficiency}}%</div> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | <!-- 饼图区域 --> |
| | | <div style="display: flex;align-items: center;gap: 20px;justify-content: space-evenly;height: 82%;margin-top: 20px"> |
| | | <div style="width: 240px; height: 240px; background-image: url('/src/assets/BI/zonghetongbingtubiankuang@2x.png'); background-size: contain; background-position: center; background-repeat: no-repeat; display: flex; align-items: center; justify-content: center;"> |
| | | <Echarts ref="chart" :legend="pieLegend" :chartStyle="chartStylePie" |
| | | :series="materialPieSeries" |
| | | :tooltip="pieTooltip" |
| | | :options="{backgroundColor: 'transparent'}" |
| | | style="margin-left: 5px;"></Echarts> |
| | | </div> |
| | | <ul class="contract-list" style="margin: 0; padding: 0; display: flex; flex-direction: column;justify-content: space-around; height: 100%; overflow-y: auto; scroll-behavior: smooth;" ref="refContractList"> |
| | | <li v-for="item in materialPieSeries[0].data" :key="item.name" style="list-style: none; margin-bottom: 12px;"> |
| | | <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="font-weight: 700;font-size: 16px;color: #85B1E4;">¥{{item.value}}</div> |
| | | </div> |
| | | </li> |
| | | </ul> |
| | | <!-- 工序在制品数量柱状图 --> |
| | | <div style="height: 82%;margin-top: 20px"> |
| | | <Echarts ref="chart" |
| | | :chartStyle="chartStyle" |
| | | :grid="grid" |
| | | :legend="workInProcessBarLegend" |
| | | :series="workInProcessBarSeries" |
| | | :tooltip="tooltip" |
| | | :xAxis="workInProcessXAxis" |
| | | :yAxis="workInProcessYAxis" |
| | | :options="{backgroundColor: 'transparent', textStyle: {color: '#B8C8E0'}}" |
| | | style="height: 100%"></Echarts> |
| | | </div> |
| | | </div> |
| | | |
| | |
| | | <div class="quality-cardSec"> |
| | | <div class="quality-card one"></div> |
| | | <div class="quality-cardTitle"> |
| | | <div>原材料已检测数</div> |
| | | <div>原材料检数</div> |
| | | <div>{{qualityStatisticsObject.supplierNum}}件</div> |
| | | </div> |
| | | </div> |
| | | <div class="quality-cardSec"> |
| | | <div class="quality-card two"></div> |
| | | <div class="quality-cardTitle"> |
| | | <div>过程检验数量</div> |
| | | <div>过程检数</div> |
| | | <div>{{qualityStatisticsObject.processNum}}件</div> |
| | | </div> |
| | | </div> |
| | | <div class="quality-cardSec"> |
| | | <div class="quality-card three"></div> |
| | | <div class="quality-cardTitle"> |
| | | <div>出厂已检数量</div> |
| | | <div>出厂检数</div> |
| | | <div>{{qualityStatisticsObject.factoryNum}}件</div> |
| | | </div> |
| | | </div> |
| | |
| | | </div> |
| | | <div class="main-panel"> |
| | | <div class="panel-item-customers"> |
| | | <div class="order-statistics-cards"> |
| | | <div class="order-statistics-cards" style="margin-bottom: 0px;"> |
| | | <div class="quality-cardSec"> |
| | | <div class="quality-card four"></div> |
| | | <div class="quality-cardTitle"> |
| | |
| | | </div> |
| | | </div> |
| | | </div> |
| | | <div class="progress-table-container" ref="progressTableRef" @scroll="handleTableScroll"> |
| | | <div class="progress-table-container" ref="progressTableRef" style="margin-top: 0px;" @scroll="handleTableScroll"> |
| | | <table class="progress-table"> |
| | | <thead> |
| | | <tr> |
| | |
| | | const rowsUnderHeader = ref(new Set()) |
| | | |
| | | const chartStylePie = { |
| | | width: '140%', |
| | | height: '140%' // 设置图表容器的高度 |
| | | width: '100%', |
| | | height: '100%' // 设置图表容器的高度 |
| | | } |
| | | const materialPieSeries = ref([ |
| | | { |
| | |
| | | uncompletedOrderCount: 0, |
| | | partialCompletedOrderCount: 0, |
| | | completedOrderCount: 0, |
| | | }) |
| | | |
| | | // 在制品周转统计对象 |
| | | const workInProcessStatistics = ref({ |
| | | totalQuantity: 0, |
| | | avgTurnoverDays: 0, |
| | | turnoverEfficiency: 0, |
| | | }) |
| | | const chartStyle = { |
| | | width: '100%', |
| | |
| | | axisLabel: { color: '#B8C8E0' } |
| | | }] |
| | | |
| | | // 在制品工序柱状图配置 |
| | | const workInProcessXAxis = ref([{ |
| | | type: 'category', |
| | | axisTick: { show: false }, |
| | | axisLabel: { color: '#B8C8E0' }, |
| | | data: [] |
| | | }]) |
| | | const workInProcessYAxis = [{ |
| | | type: 'value', |
| | | axisLabel: { color: '#B8C8E0' }, |
| | | name: '' |
| | | }] |
| | | const workInProcessBarLegend = { |
| | | show: false, |
| | | textStyle: { color: '#B8C8E0' }, |
| | | data: [] |
| | | } |
| | | const workInProcessBarSeries = ref([ |
| | | { |
| | | name: '在制品数量', |
| | | type: 'bar', |
| | | barWidth: 25, // 固定柱状图宽度为40px |
| | | barGap: 0, |
| | | emphasis: { |
| | | focus: 'series' |
| | | }, |
| | | itemStyle: { |
| | | color: { |
| | | type: 'linear', |
| | | x: 0, |
| | | y: 0, |
| | | x2: 0, |
| | | y2: 1, |
| | | colorStops: [ |
| | | { offset: 0, color: '#4EE4FF' }, |
| | | { offset: 1, color: '#00A4ED' } |
| | | ] |
| | | } |
| | | }, |
| | | label: { |
| | | show: true, |
| | | position: 'top', |
| | | color: '#B8C8E0' |
| | | }, |
| | | data: [] |
| | | } |
| | | ]) |
| | | |
| | | // 待办事项 |
| | | const todoList = ref([]) |
| | | |
| | |
| | | ...item, |
| | | itemStyle: { color: getRandomColor() } |
| | | })) |
| | | }) |
| | | } |
| | | // 在制品周转统计 |
| | | const workInProcessTurnoverInfo = () => { |
| | | getWorkInProcessTurnover().then((res) => { |
| | | console.log("在制品周转统计数据:", res) |
| | | |
| | | if (!res || !res.data) { |
| | | console.warn('在制品周转统计数据为空') |
| | | return |
| | | } |
| | | |
| | | // 从接口获取统计数据 |
| | | workInProcessStatistics.value = { |
| | | totalQuantity: res.data.totalOrderCount || 0, |
| | | avgTurnoverDays: res.data.averageTurnoverDays || 0, |
| | | turnoverEfficiency: res.data.turnoverEfficiency || 0, |
| | | } |
| | | |
| | | // 设置工序柱状图数据 |
| | | // X轴:processDetails (工序详情数组) |
| | | // Y轴:processQuantityDetails (工序数量详情数组) |
| | | if (res.data.processDetails && Array.isArray(res.data.processDetails)) { |
| | | // 设置X轴数据(工序名称) |
| | | workInProcessXAxis.value[0].data = res.data.processDetails |
| | | } else { |
| | | workInProcessXAxis.value[0].data = [] |
| | | } |
| | | |
| | | if (res.data.processQuantityDetails && Array.isArray(res.data.processQuantityDetails)) { |
| | | // 设置Y轴数据(在制品数量) |
| | | workInProcessBarSeries.value[0].data = res.data.processQuantityDetails |
| | | } else { |
| | | workInProcessBarSeries.value[0].data = [] |
| | | } |
| | | }).catch((error) => { |
| | | console.error('获取在制品周转统计失败:', error) |
| | | }) |
| | | } |
| | | // 质检统计 |
| | |
| | | window.addEventListener('webkitfullscreenchange', handleFullscreenChange) |
| | | window.addEventListener('MSFullscreenChange', handleFullscreenChange) |
| | | analysisCustomer() |
| | | workInProcessTurnoverInfo() |
| | | qualityStatisticsInfo() |
| | | // accountStatisticsInfo() |
| | | progressStatisticsInfo() |