2022-11-07 08:45:49 +08:00
|
|
|
<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>
|
2022-11-10 14:18:58 +08:00
|
|
|
<techy-container :title="'质量异常上报'" icon="质量1">
|
|
|
|
<div class="table-wrapper fix-table-exception-report">
|
2022-11-07 08:45:49 +08:00
|
|
|
<techy-table
|
|
|
|
:page="1"
|
2022-11-10 14:18:58 +08:00
|
|
|
:limit="8"
|
2022-11-07 08:45:49 +08:00
|
|
|
:show-index="false"
|
|
|
|
:table-config="qualityTableProps"
|
|
|
|
:table-data="qualityDatalist"
|
|
|
|
/>
|
|
|
|
</div>
|
|
|
|
</techy-container>
|
|
|
|
</div>
|
|
|
|
|
2022-11-10 14:18:58 +08:00
|
|
|
<div class=" fix-table-exception-alert">
|
|
|
|
<techy-container :title="'质量异常报警'" icon="质量2">
|
|
|
|
<div class="table-wrapper">
|
|
|
|
<techy-table
|
|
|
|
:page="1"
|
|
|
|
:limit="8"
|
|
|
|
:show-index="false"
|
|
|
|
:table-config="qualityExceptionTableProps"
|
|
|
|
:table-data="qualityExceptionDatalist"
|
|
|
|
/>
|
|
|
|
</div>
|
2022-11-07 08:45:49 +08:00
|
|
|
</techy-container>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<div class="part-2">
|
2022-11-10 14:18:58 +08:00
|
|
|
<techy-container :title="'质量缺陷分析'" icon="质量3">
|
2022-11-07 08:45:49 +08:00
|
|
|
<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: 16px;">
|
|
|
|
<techy-analysis-header>缺陷分类分析</techy-analysis-header>
|
|
|
|
<new-bar
|
|
|
|
:xlabel-font-size="8"
|
|
|
|
:xlabel-rotate="20"
|
|
|
|
: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: 16px;">
|
|
|
|
<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="grow">
|
|
|
|
<techy-box class="" style="padding: 16px;">
|
|
|
|
<techy-analysis-header>产线缺陷分析</techy-analysis-header>
|
|
|
|
<pl-fault-analysis-pie-chart />
|
|
|
|
</techy-box>
|
|
|
|
</div>
|
|
|
|
<div class="grow">
|
|
|
|
<techy-box class="" style="padding: 16px;">
|
|
|
|
<techy-analysis-header>产品成品率</techy-analysis-header>
|
|
|
|
<new-line-stack />
|
|
|
|
<div class="date-select">
|
|
|
|
<span>日</span>
|
|
|
|
<span class="date-select__active">月</span>
|
|
|
|
</div>
|
|
|
|
</techy-box>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<!-- end 第一行 -->
|
|
|
|
|
|
|
|
<!-- 第二行 -->
|
|
|
|
<div class="quality-analysis__body__row-2">
|
|
|
|
<techy-box style="padding: 16px;" 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: 16px;" 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: 16px;" 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: 16px;" 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 {
|
|
|
|
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>
|
2022-11-10 14:18:58 +08:00
|
|
|
::-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;
|
|
|
|
}
|
|
|
|
|
2022-11-08 14:40:04 +08:00
|
|
|
.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;
|
|
|
|
}
|
|
|
|
|
2022-11-07 08:45:49 +08:00
|
|
|
.visual-container {
|
|
|
|
width: 100%;
|
2022-11-10 14:18:58 +08:00
|
|
|
height: 100vh;
|
|
|
|
display: flex;
|
|
|
|
flex-direction: column;
|
2022-11-07 08:45:49 +08:00
|
|
|
background: url('./assets/bg.png') no-repeat;
|
|
|
|
background-size: cover;
|
|
|
|
overflow: hidden;
|
|
|
|
position: relative;
|
|
|
|
}
|
|
|
|
|
|
|
|
.techy-body {
|
2022-11-10 14:18:58 +08:00
|
|
|
flex: 1 0;
|
|
|
|
height: 65vh;
|
2022-11-07 08:45:49 +08:00
|
|
|
width: 100%;
|
2022-11-10 14:18:58 +08:00
|
|
|
padding: calc(24px * var(--beilv));
|
2022-11-07 08:45:49 +08:00
|
|
|
display: flex;
|
|
|
|
flex-direction: column;
|
2022-11-10 14:18:58 +08:00
|
|
|
gap: calc(16px * var(--beilv));
|
|
|
|
}
|
|
|
|
|
|
|
|
.table-wrapper {
|
|
|
|
height: calc(100% - 3vh);
|
|
|
|
overflow: auto;
|
2022-11-07 08:45:49 +08:00
|
|
|
}
|
|
|
|
|
|
|
|
.grid {
|
|
|
|
display: grid;
|
|
|
|
}
|
|
|
|
|
|
|
|
.gap-16-8 {
|
|
|
|
/* gap: calc(100vw / 1920 * 16) calc(100vw / 1920 * 8); */
|
2022-11-10 14:18:58 +08:00
|
|
|
gap: calc(16px * var(--beilv)) calc(8px * var(--beilv));
|
2022-11-07 08:45:49 +08:00
|
|
|
}
|
|
|
|
|
|
|
|
.column-2 {
|
|
|
|
grid-template-columns: 1fr 1fr;
|
|
|
|
}
|
|
|
|
|
|
|
|
.row-5 {
|
|
|
|
grid-template-rows: repeat(5, 25px);
|
|
|
|
}
|
|
|
|
|
|
|
|
.part-1 {
|
|
|
|
display: flex;
|
2022-11-10 14:18:58 +08:00
|
|
|
gap: calc(16px * var(--beilv));
|
2022-11-07 08:45:49 +08:00
|
|
|
flex: 1;
|
2022-11-10 14:18:58 +08:00
|
|
|
height: calc(263px * var(--beilv));
|
2022-11-07 08:45:49 +08:00
|
|
|
}
|
|
|
|
|
|
|
|
.part-1 > div {
|
2022-11-10 14:18:58 +08:00
|
|
|
width: 30px;
|
2022-11-07 08:45:49 +08:00
|
|
|
flex: 1 1;
|
|
|
|
}
|
|
|
|
|
|
|
|
.part-2 {
|
2022-11-10 14:18:58 +08:00
|
|
|
flex: 0;
|
|
|
|
height: calc(542px * var(--beilv));
|
2022-11-07 08:45:49 +08:00
|
|
|
}
|
|
|
|
|
|
|
|
.quality-analysis__body {
|
|
|
|
height: calc(100% - 32px);
|
|
|
|
display: flex;
|
|
|
|
flex-direction: column;
|
2022-11-10 14:18:58 +08:00
|
|
|
gap: calc(16px * var(--beilv));
|
2022-11-07 08:45:49 +08:00
|
|
|
}
|
|
|
|
|
|
|
|
.quality-analysis__body__row-1 {
|
|
|
|
/* flex: 1 1;
|
|
|
|
max-height: 25vh; */
|
|
|
|
height: 25vh;
|
|
|
|
overflow: hidden;
|
|
|
|
display: flex;
|
2022-11-10 14:18:58 +08:00
|
|
|
gap: calc(16px * var(--beilv));
|
2022-11-07 08:45:49 +08:00
|
|
|
}
|
|
|
|
|
|
|
|
.quality-analysis__body__row-2 {
|
|
|
|
/* height: calc(100%); */
|
|
|
|
/* height: 200px; */
|
|
|
|
/* flex: 1.5 1.5; */
|
|
|
|
overflow: hidden;
|
|
|
|
display: flex;
|
2022-11-10 14:18:58 +08:00
|
|
|
gap: calc(16px * var(--beilv));
|
2022-11-07 08:45:49 +08:00
|
|
|
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(100vw / 1920 * 16);
|
|
|
|
}
|
|
|
|
|
|
|
|
.date-select {
|
|
|
|
position: absolute;
|
|
|
|
top: calc(100vh / 1920 * 22);
|
|
|
|
right: calc(100vw / 1440 * 12);
|
|
|
|
border-radius: 2px;
|
|
|
|
overflow: hidden;
|
|
|
|
display: flex;
|
|
|
|
cursor: pointer;
|
|
|
|
}
|
|
|
|
|
|
|
|
.date-select span {
|
|
|
|
display: inline-block;
|
|
|
|
width: 40px;
|
|
|
|
text-align: center;
|
|
|
|
font-size: 12px;
|
|
|
|
line-height: 18px;
|
|
|
|
color: white;
|
|
|
|
background-color: #31878c94;
|
|
|
|
}
|
|
|
|
|
|
|
|
.date-select span.date-select__active {
|
2022-11-10 14:18:58 +08:00
|
|
|
background-color: #42bbb7;
|
2022-11-07 08:45:49 +08:00
|
|
|
}
|
|
|
|
</style>
|