11-mes-new/src/views/QualityManager/HomePage.vue

429 lines
12 KiB
Vue
Raw Normal View History

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>