| | |
| | | <div class="typeNum-left"> |
| | | <img src="~@/assets/images/chartCard.svg" alt="图表" |
| | | style="width: 40px; height: 40px; object-fit: contain;"> |
| | | <div class="typeNum-left-text">原材料</div> |
| | | <div class="typeNum-left-text">入厂检</div> |
| | | </div> |
| | | <div class="typeNum-center"> |
| | | <div class="typeNum-leftLine">-</div> |
| | |
| | | <div class="typeNum-left"> |
| | | <img src="~@/assets/images/chartCard2.svg" alt="图表" |
| | | style="width: 40px; height: 40px; object-fit: contain;"> |
| | | <div class="typeNum-left-text" style="color: #5EB334;">半成品</div> |
| | | <div class="typeNum-left-text" style="color: #5EB334;">车间检</div> |
| | | </div> |
| | | <div class="typeNum-center"> |
| | | <div class="typeNum-leftLine2">-</div> |
| | |
| | | <div class="typeNum-left"> |
| | | <img src="~@/assets/images/chartCard3.svg" alt="图表" |
| | | style="width: 40px; height: 40px; object-fit: contain;"> |
| | | <div class="typeNum-left-text" style="color: #8000FF;">成品</div> |
| | | <div class="typeNum-left-text" style="color: #8000FF;">出厂检</div> |
| | | </div> |
| | | <div class="typeNum-center"> |
| | | <div class="typeNum-leftLine3">-</div> |
| | |
| | | <div class="top-container flex-center"> |
| | | <div class="quality-card blue-card"> |
| | | <div class="quality-card-title"> |
| | | <img src="~@/assets/images/chartCard.svg" alt="原材料" |
| | | <img src="~@/assets/images/chartCard.svg" alt="入厂检" |
| | | style="width: 24px; height: 24px; margin-right: 8px;"> |
| | | 原材料合格率 |
| | | 入厂检合格率 |
| | | </div> |
| | | <div class="quality-card-content"> |
| | | <div class="quality-item"> |
| | |
| | | </div> |
| | | <div class="quality-card green-card"> |
| | | <div class="quality-card-title"> |
| | | <img src="~@/assets/images/chartCard2.svg" alt="半成品" |
| | | <img src="~@/assets/images/chartCard2.svg" alt="车间检" |
| | | style="width: 24px; height: 24px; margin-right: 8px;"> |
| | | 半成品合格率 |
| | | 车间检合格率 |
| | | </div> |
| | | <div class="quality-card-content"> |
| | | <div class="quality-item"> |
| | |
| | | </div> |
| | | <div class="quality-card purple-card"> |
| | | <div class="quality-card-title"> |
| | | <img src="~@/assets/images/chartCard3.svg" alt="成品" |
| | | <img src="~@/assets/images/chartCard3.svg" alt="出厂检" |
| | | style="width: 24px; height: 24px; margin-right: 8px;"> |
| | | 成品合格率 |
| | | 出厂检合格率 |
| | | </div> |
| | | <div class="quality-card-content"> |
| | | <div class="quality-item"> |
| | |
| | | </div> |
| | | <div class="container-line-right-bottom"> |
| | | <div class="inspection-chart-box"> |
| | | <div class="chart-box-title">原材料总数</div> |
| | | <div class="chart-box-title">入厂检总数</div> |
| | | <div class="chart-box-num">{{ getYearlyStatValue(0, 'totalCount') }}</div> |
| | | </div> |
| | | <div class="inspection-chart-box"> |
| | | <div class="chart-box-title">半成品总数</div> |
| | | <div class="chart-box-title">车间检总数</div> |
| | | <div class="chart-box-num">{{ getYearlyStatValue(1, 'totalCount') }}</div> |
| | | </div> |
| | | <div class="inspection-chart-box"> |
| | | <div class="chart-box-title">成品总数</div> |
| | | <div class="chart-box-title">出厂检总数</div> |
| | | <div class="chart-box-num">{{ getYearlyStatValue(2, 'totalCount') }}</div> |
| | | </div> |
| | | </div> |
| | |
| | | </div> |
| | | <!-- Tab 选择器 --> |
| | | <div class="tab-selector"> |
| | | <div class="tab-item" :class="{ active: activeTab === 'raw' }" @click="activeTab = 'raw'">原材料</div> |
| | | <div class="tab-item" :class="{ active: activeTab === 'semi' }" @click="activeTab = 'semi'">半成品</div> |
| | | <div class="tab-item" :class="{ active: activeTab === 'final' }" @click="activeTab = 'final'">成品</div> |
| | | <div class="tab-item" :class="{ active: activeTab === 'raw' }" @click="activeTab = 'raw'">入厂检</div> |
| | | <div class="tab-item" :class="{ active: activeTab === 'semi' }" @click="activeTab = 'semi'">车间检</div> |
| | | <div class="tab-item" :class="{ active: activeTab === 'final' }" @click="activeTab = 'final'">出厂检</div> |
| | | </div> |
| | | </el-card> |
| | | </el-col> |
| | |
| | | containLabel: true, |
| | | }, |
| | | legend: { |
| | | data: ["原材料", "半成品", "成品"], // 图例数据 |
| | | data: ["入厂检", "车间检", "出厂检"], // 图例数据 |
| | | icon: ["circle", "circle", "circle"], |
| | | itemWidth: 10, // 设置图标宽度 |
| | | itemHeight: 10, |
| | |
| | | }, |
| | | series: [ |
| | | { |
| | | name: "原材料", |
| | | name: "入厂检", |
| | | type: "bar", |
| | | barWidth: "15%", |
| | | data: monthlyCompletionDetailsData.value.map(item => item.rawMaterialCount), |
| | |
| | | }, |
| | | }, |
| | | { |
| | | name: "半成品", |
| | | name: "车间检", |
| | | type: "bar", |
| | | barWidth: "15%", |
| | | |
| | |
| | | }, |
| | | }, |
| | | { |
| | | name: "成品", |
| | | name: "出厂检", |
| | | type: "bar", |
| | | barWidth: "15%", |
| | | |
| | |
| | | type: "pie", |
| | | radius: "70%", |
| | | data: [ |
| | | { value: getYearlyStatValue(0, 'totalCount'), name: "原材料", itemStyle: { color: "#1890FF" } }, |
| | | { value: getYearlyStatValue(1, 'totalCount'), name: "半成品", itemStyle: { color: "#F7BA1E" } }, |
| | | { value: getYearlyStatValue(2, 'totalCount'), name: "成品", itemStyle: { color: "#14C9C9" } }, |
| | | { value: getYearlyStatValue(0, 'totalCount'), name: "入厂检", itemStyle: { color: "#1890FF" } }, |
| | | { value: getYearlyStatValue(1, 'totalCount'), name: "车间检", itemStyle: { color: "#F7BA1E" } }, |
| | | { value: getYearlyStatValue(2, 'totalCount'), name: "出厂检", itemStyle: { color: "#14C9C9" } }, |
| | | ], |
| | | label: { |
| | | show: true, |
| | |
| | | }, |
| | | // 图例配置 |
| | | legend: { |
| | | data: ["原材料", "半成品", "成品"], // 图例数据 |
| | | data: ["入厂检", "车间检", "出厂检"], // 图例数据 |
| | | icon: ["circle", "circle", "circle"], |
| | | itemWidth: 10, // 设置图标宽度 |
| | | itemHeight: 10, |
| | |
| | | // 系列数据 |
| | | series: [ |
| | | { |
| | | name: "原材料", // 系列名称 |
| | | name: "入厂检", // 系列名称 |
| | | type: "line", // 图表类型为折线图 |
| | | // stack: "Total", // 堆叠名称 |
| | | symbol: "circle", |
| | |
| | | data: monthlyPassRateData.value.map(item => item.rawMaterial.passRate), |
| | | }, |
| | | { |
| | | name: "半成品", // 系列名称 |
| | | name: "车间检", // 系列名称 |
| | | type: "line", // 图表类型为折线图 |
| | | // stack: "Total", // 堆叠名称 |
| | | symbol: "circle", |
| | |
| | | data: monthlyPassRateData.value.map(item => item.process.passRate), |
| | | }, |
| | | { |
| | | name: "成品", // 系列名称 |
| | | name: "出厂检", // 系列名称 |
| | | type: "line", // 图表类型为折线图 |
| | | // stack: "Total", // 堆叠名称 |
| | | symbol: "circle", |