<template> <div ref="cockpit-container-quality" class="visual-container"> <techy-header :head-title="'合肥新能源数字工厂质量管理驾驶舱'" @toggle-full-screen="changeFullScreen" /> <section class="techy-body"> <div class="part-1"> <div> <techy-container :title="'质量异常上报'" icon="质量1"> <div class="table-wrapper fix-table-exception-report"> <techy-table :page="1" :limit="20" :show-index="false" :table-config="qualityTableProps" :table-data="qualityDatalist" /> </div> </techy-container> </div> <div class=" fix-table-exception-alert"> <techy-container :title="'质量异常报警'" icon="质量2"> <div class="table-wrapper"> <techy-table :page="1" :limit="20" :show-index="false" :table-config="qualityExceptionTableProps" :table-data="qualityExceptionDatalist" /> </div> </techy-container> </div> </div> <div class="part-2"> <techy-container :title="'质量缺陷分析'" icon="质量3"> <div v-if="1" class="quality-analysis__body"> <!-- 第一行 --> <div class="quality-analysis__body__row-1"> <!-- 第一列 --> <div class="grow-8 flex gap-16"> <div class="grow"> <techy-box class="" style="padding: calc(16px * var(--beilv));"> <techy-analysis-header>缺陷分类分析</techy-analysis-header> <new-bar :xlabel-font-size="10" :xlabel-rotate="30" :name-list="[ '擦划伤1', '擦划伤2', '擦划伤3', '擦划伤4', '擦划伤5', '擦划伤6', '擦划伤7', '擦划伤8', '擦划伤9', '擦划伤0', '擦划伤11', '擦划伤12' ]" chart-name="fault-category" :data-list="[ { topColor: 'rgba(59, 76, 118, 0.2)', bottomColor: '#31A2FF', name: '库存', data: [32, 65, 65, 54, 40, 60, 64, 91, 55, 65, 37, 77] } ]" /> </techy-box> </div> <div class="grow"> <techy-box class="" style="padding: calc(16px * var(--beilv));"> <techy-analysis-header>工序缺陷分析</techy-analysis-header> <new-bar chart-name="process-fault" :name-list="['A', 'B', 'C', 'D', 'E', 'F']" :data-list="[ { topColor: 'rgba(59, 76, 118, 0.2)', bottomColor: '#49FBD6', name: '库存', data: [64, 91, 55, 65, 37, 77] } ]" /> </techy-box> </div> </div> <!-- 第二列 --> <div class="grow-6 flex gap-16"> <div class="width-222"> <techy-box class="" style="padding: calc(16px * var(--beilv));"> <techy-analysis-header>产线缺陷分析</techy-analysis-header> <pl-fault-analysis-pie-chart /> <div class="date-select"> <span :class="{ 'date-select__active': dateMode === 'day' }" @click="dateMode = 'day'">日</span> <span :class="{ 'date-select__active': dateMode === 'month' }" @click="dateMode = 'month'"> 月 </span> </div> </techy-box> </div> <div class="grow"> <techy-box class="" style="padding: calc(16px * var(--beilv));"> <techy-analysis-header>产品成品率</techy-analysis-header> <new-line-stack /> <div class="date-select"> <span :class="{ 'date-select__active': dateMode2 === 'day' }" @click="dateMode2 = 'day'">日</span> <span :class="{ 'date-select__active': dateMode2 === 'month' }" @click="dateMode2 = 'month'"> 月 </span> </div> </techy-box> </div> </div> </div> <!-- end 第一行 --> <!-- 第二行 --> <div class="quality-analysis__body__row-2"> <techy-box style="padding: calc(16px * var(--beilv));" class="flex flex-col"> <techy-analysis-header>产线A工序质量分析(数量)</techy-analysis-header> <div class="grow grid gap-16-8 column-2 row-5"> <techy-analysis-bar v-for="(item, index) in qualityAnalysisDatalist" :key="index" :name="item.name" :amount="item.amount" color="green" /> </div> </techy-box> <techy-box style="padding: calc(16px * var(--beilv));" class="flex flex-col"> <techy-analysis-header>产线B工序质量分析(数量)</techy-analysis-header> <div class="grow grid gap-16-8 column-2 row-5"> <techy-analysis-bar v-for="(item, index) in qualityAnalysisDatalist" :key="index" :name="item.name" :amount="item.amount" color="blue" /> </div> </techy-box> <techy-box style="padding: calc(16px * var(--beilv));" class="flex flex-col"> <techy-analysis-header>产线C工序质量分析(数量)</techy-analysis-header> <div class="grow grid gap-16-8 column-2 row-5"> <techy-analysis-bar v-for="(item, index) in qualityAnalysisDatalist" :key="index" :name="item.name" :amount="item.amount" color="orange" /> </div> </techy-box> <techy-box style="padding: calc(16px * var(--beilv));" class="flex flex-col"> <techy-analysis-header>产线D工序质量分析(数量)</techy-analysis-header> <div class="grow grid gap-16-8 column-2 row-5"> <techy-analysis-bar v-for="(item, index) in qualityAnalysisDatalist" :key="index" :name="item.name" :amount="item.amount" color="pink" /> </div> </techy-box> </div> </div> </techy-container> </div> </section> </div> </template> <script> import TechyContainer from './components/TechyContainer.vue' import TechyHeader from './components/TechyHeader.vue' import TechyBox from './components/TechyBox.vue' import TechyTable from './components/TechyTable.vue' import TechyAnalysisBar from './components/TechyAnalysisBar.vue' import TechyAnalysisHeader from './components/TechyAnalysisHeader.vue' // import FaultCategoryChart from './components/charts/FaultCategoryChart.vue' import PlFaultAnalysisPieChart from './components/charts/PlFaultAnalysisPieChart.vue' import { mapGetters } from 'vuex' import screenfull from 'screenfull' import NewBar from './components/charts/newBar.vue' import NewLineStack from './components/charts/newLineStack.vue' import { qualityDatalist, qualityTableProps, qualityExceptionDatalist, qualityExceptionTableProps } from './mockData' export default { name: 'QualityManagerHome', components: { TechyHeader, TechyContainer, TechyBox, TechyAnalysisBar, TechyAnalysisHeader, TechyTable, // FaultCategoryChart, PlFaultAnalysisPieChart, NewBar, NewLineStack }, data() { return { dateMode: 'month', dateMode2: 'month', qualityTableProps, qualityDatalist, qualityExceptionDatalist, qualityExceptionTableProps, qualityAnalysisDatalist: [ { name: '热端', amount: 20233 }, { name: '丝印', amount: 20233328 }, { name: '原片', amount: 20 }, { name: '钢化', amount: 2000 }, { name: '上片磨边', amount: 20 }, { name: '下片铺纸', amount: 202423 }, { name: '镀膜', amount: 20 }, { name: '包装', amount: 20 }, { name: '清晰', amount: 20 }, { name: '物流仓储', amount: 233920 } ] } }, computed: { ...mapGetters(['sidebar']) }, methods: { changeFullScreen() { if (!screenfull.enabled) { this.$message({ message: 'you browser can not work', type: 'warning' }) return false } screenfull.toggle(this.$refs['cockpit-container-quality']) } } } </script> <style scoped> ::-webkit-scrollbar { width: calc(8px * var(--beilv)); } ::-webkit-scrollbar-track { background-color: #14243f; border-radius: 0; } ::-webkit-scrollbar-button { width: calc(8px * var(--beilv)); height: calc(8px * var(--beilv)); background: #5bc4bf9f; position: relative; } ::-webkit-scrollbar-thumb { border-radius: calc(8px * var(--beilv)); background: #5bc4bf9f; } .fix-table-exception-alert >>> .el-table td .cell { width: 75% !important; margin: auto; text-align: left; } .fix-table-exception-report >>> .el-table td .cell { width: 70% !important; margin: auto; text-align: left; } .visual-container { width: 100%; height: 100vh; display: flex; flex-direction: column; background: url('./assets/bg.png') no-repeat; background-size: cover; overflow: hidden; position: relative; } .techy-body { flex: 1 0; height: 65vh; width: 100%; padding: calc(24px * var(--beilv)); display: flex; flex-direction: column; gap: calc(16px * var(--beilv)); } .table-wrapper { height: calc(100% - 3vh); overflow: auto; } .grid { display: grid; } .gap-16-8 { gap: calc(12px * var(--beilv)) calc(8px * var(--beilv)); } .column-2 { grid-template-columns: 1fr 1fr; } .row-5 { grid-template-rows: repeat(5, calc(24px * var(--beilv))); } .part-1 { display: flex; gap: calc(16px * var(--beilv)); flex: 1; height: calc(263px * var(--beilv)); } .part-1 > div { width: 30px; flex: 1 1; } .part-2 { flex: 0; height: calc(542px * var(--beilv)); } .quality-analysis__body { height: calc(100% - 32px); display: flex; flex-direction: column; gap: calc(16px * var(--beilv)); } .quality-analysis__body__row-1 { height: calc(216px * var(--beilv)); overflow: hidden; display: flex; gap: calc(16px * var(--beilv)); } .quality-analysis__body__row-2 { /* height: calc(100%); */ /* height: 200px; */ /* flex: 1.5 1.5; */ overflow: hidden; display: flex; gap: calc(16px * var(--beilv)); font-size: 0.65vw; } .quality-analysis__body__row-2 > .techy-box { flex: 1 1; } .quality-analysis__body__row-2__body { /* height: calc(100% - 128px); */ overflow: hidden; background-color: #99302a; } .flex { display: flex; } .flex-col { flex-direction: column; } .grow { flex-grow: 1; } .grow-6 { flex-grow: 6; } .grow-8 { flex-grow: 8; } .grow-10 { flex-grow: 10; } .mb-20 { margin-bottom: 20px; } .mr-16 { margin-right: 16px; } .gap-16 { gap: calc(16px * var(--beilv)); } .date-select { position: absolute; top: calc(16px * var(--beilv)); right: calc(10px * var(--beilv)); border-radius: calc(2px * var(--beilv)); overflow: hidden; display: flex; cursor: pointer; } .date-select span { display: inline-block; width: calc(40px * var(--beilv)); text-align: center; font-size: calc(12px * var(--beilv)); line-height: calc(18px * var(--beilv)); color: white; background-color: #31878c94; } .date-select span.date-select__active { background-color: #42bbb7; } .width-222 { width: calc(375px * var(--beilv)); } </style>