Merge branch 'dev_pro_河南鹤壁' of http://114.132.189.42:9002/r/product-inventory-management into dev_pro_河南鹤壁
| | |
| | | </div> |
| | | </div> |
| | | </div> |
| | | <div class="typeNum"> |
| | | <div class="typeNum" v-if="showSemiFinished"> |
| | | <div class="typeNum-left"> |
| | | <img src="~@/assets/images/chartCard2.svg" alt="图表" |
| | | style="width: 40px; height: 40px; object-fit: contain;"> |
| | |
| | | </div> |
| | | </div> |
| | | </div> |
| | | <div class="quality-card green-card"> |
| | | <div class="quality-card green-card" v-if="showSemiFinished"> |
| | | <div class="quality-card-title"> |
| | | <img src="~@/assets/images/chartCard2.svg" alt="半成品" |
| | | style="width: 24px; height: 24px; margin-right: 8px;"> |
| | |
| | | <div class="chart-box-title">原材料总数</div> |
| | | <div class="chart-box-num">{{ getYearlyStatValue(0, 'totalCount') }}</div> |
| | | </div> |
| | | <div class="inspection-chart-box"> |
| | | <div class="inspection-chart-box" v-if="showSemiFinished"> |
| | | <div class="chart-box-title">半成品总数</div> |
| | | <div class="chart-box-num">{{ getYearlyStatValue(1, 'totalCount') }}</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 v-if="showSemiFinished" 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> |
| | |
| | | const monthlyCompletionDetailsData = ref([]); |
| | | const topParametersData = ref({ totalCount: 0, list: [] }); |
| | | const activeTab = ref("raw"); |
| | | |
| | | // 是否显示半成品相关内容。有的企业没有半成品,设为 false 即可隐藏所有半成品相关展示 |
| | | const showSemiFinished = ref(false); |
| | | |
| | | const getParameterColor = (index) => { |
| | | const colors = ['#165DFF', '#14C9C9', '#F7BA1E', '#722ED1', '#3491FA', '#FF7D00', '#F53F3F']; |
| | |
| | | containLabel: true, |
| | | }, |
| | | legend: { |
| | | data: ["原材料", "半成品", "成品"], // 图例数据 |
| | | data: showSemiFinished.value ? ["原材料", "半成品", "成品"] : ["原材料", "成品"], // 图例数据 |
| | | icon: ["circle", "circle", "circle"], |
| | | itemWidth: 10, // 设置图标宽度 |
| | | itemHeight: 10, |
| | |
| | | color: "#409EFF", |
| | | }, |
| | | }, |
| | | { |
| | | ...(showSemiFinished.value ? [{ |
| | | name: "半成品", |
| | | type: "bar", |
| | | barWidth: "15%", |
| | |
| | | itemStyle: { |
| | | color: "#67C23A", |
| | | }, |
| | | }, |
| | | }] : []), |
| | | { |
| | | name: "成品", |
| | | type: "bar", |
| | |
| | | radius: "70%", |
| | | data: [ |
| | | { value: getYearlyStatValue(0, 'totalCount'), name: "原材料", itemStyle: { color: "#1890FF" } }, |
| | | { value: getYearlyStatValue(1, 'totalCount'), name: "半成品", itemStyle: { color: "#F7BA1E" } }, |
| | | ...(showSemiFinished.value ? [{ value: getYearlyStatValue(1, 'totalCount'), name: "半成品", itemStyle: { color: "#F7BA1E" } }] : []), |
| | | { value: getYearlyStatValue(2, 'totalCount'), name: "成品", itemStyle: { color: "#14C9C9" } }, |
| | | ], |
| | | label: { |
| | |
| | | }, |
| | | // 图例配置 |
| | | legend: { |
| | | data: ["原材料", "半成品", "成品"], // 图例数据 |
| | | data: showSemiFinished.value ? ["原材料", "半成品", "成品"] : ["原材料", "成品"], // 图例数据 |
| | | icon: ["circle", "circle", "circle"], |
| | | itemWidth: 10, // 设置图标宽度 |
| | | itemHeight: 10, |
| | |
| | | }, |
| | | data: monthlyPassRateData.value.map(item => item.rawMaterial.passRate), |
| | | }, |
| | | { |
| | | ...(showSemiFinished.value ? [{ |
| | | name: "半成品", // 系列名称 |
| | | type: "line", // 图表类型为折线图 |
| | | // stack: "Total", // 堆叠名称 |
| | |
| | | color: "#F7BA1E", // 设置这条线的颜色 |
| | | }, |
| | | data: monthlyPassRateData.value.map(item => item.process.passRate), |
| | | }, |
| | | }] : []), |
| | | { |
| | | name: "成品", // 系列名称 |
| | | type: "line", // 图表类型为折线图 |
| | |
| | | "#52c41a", |
| | | getPassRateStatValue(0, 'passRate') |
| | | ); |
| | | if (showSemiFinished.value) { |
| | | semiCompletionChartInstance = initQualityChart( |
| | | semiCompletionChart, |
| | | "#1890ff", |
| | |
| | | "#52c41a", |
| | | getPassRateStatValue(1, 'passRate') |
| | | ); |
| | | } |
| | | finalCompletionChartInstance = initQualityChart( |
| | | finalCompletionChart, |
| | | "#1890ff", |
| | |
| | | |
| | | .typeNum { |
| | | height: 100%; |
| | | width: 33.33%; |
| | | flex: 1; |
| | | display: flex; |
| | | align-items: center; |
| | | justify-content: center; |
| | |
| | | |
| | | .flex-center { |
| | | justify-content: space-evenly; |
| | | gap: 15px; |
| | | } |
| | | |
| | | .quality-card { |
| | | /* flex: 1; */ |
| | | width: 32%; |
| | | flex: 1; |
| | | min-width: 0; |
| | | /* height: 100px; */ |
| | | border-radius: 8px; |
| | | padding: 12px; |