681 lines
22 KiB
Vue
681 lines
22 KiB
Vue
<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="flex gap-16" style="flex: 1;">
|
|
<div style="width: calc(400px * var(--beilv)); flex: 1;">
|
|
<techy-box class="" style="padding: calc(8px * var(--beilv));">
|
|
<techy-analysis-header type="special">产线缺陷日对比</techy-analysis-header>
|
|
<div
|
|
class="absolute top-0 left-0"
|
|
style="position: absolute; width: 100%; height: 100%; top: 0; left: 0;"
|
|
>
|
|
<!-- <new-bar
|
|
chart-name="realtime-cost-production"
|
|
:name-list="['脏污', '破片', '崩边', '崩孔', '划擦伤', '其他']"
|
|
:data-list="[
|
|
{
|
|
topColor: 'rgba(59, 76, 118, 0.2)',
|
|
bottomColor: '#49FBD6',
|
|
name: '产线A',
|
|
data: [163, 184, 110, 22, 96, 74]
|
|
},
|
|
{
|
|
topColor: 'rgba(59, 76, 118, 0.2)',
|
|
bottomColor: '#31A2FF',
|
|
name: '产线B',
|
|
data: [162, 172, 122, 15, 82, 74]
|
|
}
|
|
]"
|
|
/> -->
|
|
<techy-bar
|
|
unit-name="单位/片"
|
|
:datainfo="[
|
|
{
|
|
name: '产线A',
|
|
list: [163, 184, 110, 22, 96, 74]
|
|
},
|
|
{
|
|
name: '产线B',
|
|
list: [162, 172, 122, 15, 82, 74]
|
|
}
|
|
]"
|
|
/>
|
|
</div>
|
|
</techy-box>
|
|
</div>
|
|
<div style="width: calc(400px * var(--beilv)); flex: 1;">
|
|
<techy-box class="" style="padding: calc(8px * var(--beilv));">
|
|
<techy-analysis-header type="special">产线缺陷月对比</techy-analysis-header>
|
|
<div
|
|
class="absolute top-0 left-0"
|
|
style="position: absolute; width: 100%; height: 100%; top: 0; left: 0;"
|
|
>
|
|
<!-- <new-bar
|
|
chart-name="realtime-cost-production"
|
|
:name-list="['脏污', '破片', '崩边', '崩孔', '划擦伤', '其他']"
|
|
unit-name="单位: 千片"
|
|
:data-list="[
|
|
{
|
|
topColor: 'rgba(59, 76, 118, 0.2)',
|
|
bottomColor: '#49FBD6',
|
|
name: '产线A',
|
|
data: [4.12, 5.21, 3.2, 0.96, 2.61, 2.2]
|
|
},
|
|
{
|
|
topColor: 'rgba(59, 76, 118, 0.2)',
|
|
bottomColor: '#31A2FF',
|
|
name: '产线B',
|
|
data: [4.1, 4.34, 3.4, 0.32, 2.4, 2.14]
|
|
}
|
|
]"
|
|
/> -->
|
|
<techy-bar
|
|
unit-name="单位/千片"
|
|
:extra-space-between-zero="0.8"
|
|
:datainfo="[
|
|
{
|
|
name: '产线A',
|
|
list: [4.12, 5.21, 3.2, 0.96, 2.61, 2.2]
|
|
},
|
|
{
|
|
name: '产线B',
|
|
list: [4.1, 4.34, 3.4, 0.32, 2.4, 2.14]
|
|
}
|
|
]"
|
|
/>
|
|
</div>
|
|
</techy-box>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 第二列 -->
|
|
<div class="flex gap-16" style="flex: 1; width: 1px;">
|
|
<div class="" style="width: calc(380px * var(--beilv)); flex: 1;">
|
|
<techy-box class="" style="padding: calc(16px * var(--beilv));">
|
|
<techy-analysis-header :show-top-icon="false">
|
|
产线缺陷分析
|
|
<template v-slot:dateSelect>
|
|
<div class="pl-select">
|
|
<span
|
|
:class="{ 'pl-select__active': plMode === 'a' }"
|
|
@click="
|
|
plMode = 'a'
|
|
chosenDatalist = getFaultDataList()
|
|
"
|
|
>
|
|
A
|
|
</span>
|
|
<span
|
|
:class="{ 'pl-select__active': plMode === 'b' }"
|
|
@click="
|
|
plMode = 'b'
|
|
chosenDatalist = getFaultDataList()
|
|
"
|
|
>
|
|
B
|
|
</span>
|
|
</div>
|
|
<div class="date-select">
|
|
<span
|
|
:class="{ 'date-select__active': dateMode === 'day' }"
|
|
@click="
|
|
dateMode = 'day'
|
|
chosenDatalist = getFaultDataList()
|
|
"
|
|
>
|
|
日
|
|
</span>
|
|
<span
|
|
:class="{ 'date-select__active': dateMode === 'month' }"
|
|
@click="
|
|
dateMode = 'month'
|
|
chosenDatalist = getFaultDataList()
|
|
"
|
|
>
|
|
月
|
|
</span>
|
|
</div>
|
|
</template>
|
|
</techy-analysis-header>
|
|
<div style="position: absolute; top: 0; left:0; width: 100%; height: 100%;">
|
|
<span
|
|
style="display: inline-block; font-size: calc(10px * var(--beilv)); color: #fffc; position: absolute; top: calc(48px * var(--beilv)); left: calc(28px * var(--beilv));"
|
|
>
|
|
<!--单位千片和单位片 -->
|
|
{{ unit }}
|
|
</span>
|
|
<!-- data-period 是指数据是月数据还是日数据 -->
|
|
<pl-fault-analysis-pie-chart :data-list="chosenDatalist" :data-period="dateMode" />
|
|
</div>
|
|
</techy-box>
|
|
</div>
|
|
<div class="" style="width: calc(400px * var(--beilv)); flex: 1;">
|
|
<techy-box class="" style="padding: calc(16px * var(--beilv));">
|
|
<!-- <productionRateHeader
|
|
@update-data="
|
|
obj => {
|
|
dataUpdateToken = obj.str
|
|
dateMode2 = obj.mode
|
|
}
|
|
"
|
|
>
|
|
产品成品率
|
|
</productionRateHeader> -->
|
|
|
|
<techy-analysis-header :show-top-icon="false">
|
|
产线成品率
|
|
<template v-slot:dateSelect>
|
|
<div class="pl-select">
|
|
<span
|
|
:class="{ 'pl-select__active': dateMode2 === 'day' }"
|
|
@click="
|
|
dateMode2 = 'day'
|
|
dataUpdateToken = Math.random() + ''
|
|
"
|
|
>
|
|
日
|
|
</span>
|
|
<span
|
|
:class="{ 'pl-select__active': dateMode2 === 'month' }"
|
|
@click="
|
|
dateMode2 = 'month'
|
|
dataUpdateToken = Math.random() + ''
|
|
"
|
|
>
|
|
月
|
|
</span>
|
|
</div>
|
|
<div class="date-select fake-legend">
|
|
<span>
|
|
<!-- 产线A -->
|
|
</span>
|
|
<span>
|
|
<!-- 产线B -->
|
|
</span>
|
|
</div>
|
|
</template>
|
|
</techy-analysis-header>
|
|
|
|
<div style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;">
|
|
<new-line-stack :data-update-token="dataUpdateToken" :mode="dateMode2" />
|
|
</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="blue"
|
|
/>
|
|
</div>
|
|
</techy-box>
|
|
<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 qualityAnalysisDatalistMonth"
|
|
: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>产线B工序质量分析(日)</techy-analysis-header>
|
|
<div class="grow grid gap-16-8 column-2 row-5">
|
|
<techy-analysis-bar
|
|
v-for="(item, index) in qualityAnalysisDatalistB"
|
|
: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>产线B工序质量分析(月)</techy-analysis-header>
|
|
<div class="grow grid gap-16-8 column-2 row-5">
|
|
<techy-analysis-bar
|
|
v-for="(item, index) in qualityAnalysisDatalistMonthB"
|
|
:key="index"
|
|
:name="item.name"
|
|
:amount="item.amount"
|
|
color="orange"
|
|
/>
|
|
</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 productionRateHeader from './components/productionRateHeader.vue'
|
|
// import FaultCategoryChart from './components/charts/FaultCategoryChart.vue'
|
|
import PlFaultAnalysisPieChart from './components/charts/PlFaultAnalysisPieChart.vue'
|
|
import { mapGetters } from 'vuex'
|
|
import screenfull from 'screenfull'
|
|
|
|
import TechyBar from './components/charts/TechyBar.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,
|
|
TechyBar,
|
|
NewLineStack
|
|
// productionRateHeader
|
|
},
|
|
data() {
|
|
const quexianDatalist = [
|
|
[
|
|
// 月a
|
|
{ value: 5.21, name: '破片' },
|
|
{ value: 3.2, name: '崩边' },
|
|
{ value: 4.12, name: '脏污' },
|
|
{ value: 2.61, name: '划擦伤' },
|
|
{ value: 0.96, name: '崩孔' },
|
|
{ value: 2.2, name: '其他' }
|
|
],
|
|
[
|
|
// 月b
|
|
{ value: 4.34, name: '破片' },
|
|
{ value: 3.4, name: '崩边' },
|
|
{ value: 4.1, name: '脏污' },
|
|
{ value: 2.4, name: '划擦伤' },
|
|
{ value: 0.32, name: '崩孔' },
|
|
{ value: 2.14, name: '其他' }
|
|
],
|
|
[
|
|
// 日a
|
|
{ value: 184, name: '破片' },
|
|
{ value: 110, name: '崩边' },
|
|
{ value: 163, name: '脏污' },
|
|
{ value: 96, name: '划擦伤' },
|
|
{ value: 22, name: '崩孔' },
|
|
{ value: 74, name: '其他' }
|
|
],
|
|
[
|
|
// 日b
|
|
{ value: 172, name: '破片' },
|
|
{ value: 122, name: '崩边' },
|
|
{ value: 162, name: '脏污' },
|
|
{ value: 82, name: '划擦伤' },
|
|
{ value: 15, name: '崩孔' },
|
|
{ value: 74, name: '其他' }
|
|
]
|
|
]
|
|
|
|
return {
|
|
dataUpdateToken: 'xx-token',
|
|
plMode: 'a',
|
|
dateMode: 'month',
|
|
dateMode2: 'day',
|
|
qualityTableProps,
|
|
qualityDatalist,
|
|
qualityExceptionDatalist,
|
|
qualityExceptionTableProps,
|
|
qualityAnalysisDatalist: [
|
|
{ name: '上片', amount: 22 },
|
|
{ name: '钢化', amount: 2 },
|
|
{ name: '磨边', amount: 221 },
|
|
{ name: '下片', amount: 27 },
|
|
{ name: '丝印', amount: 93 },
|
|
{ name: '包装', amount: 3 },
|
|
{ name: '打孔', amount: 31 },
|
|
{ name: '清洗', amount: 2 },
|
|
{ name: '镀膜', amount: 95 },
|
|
{ name: '其他', amount: 171 }
|
|
],
|
|
qualityAnalysisDatalistMonth: [
|
|
{ name: '上片', amount: 665 },
|
|
{ name: '钢化', amount: 56 },
|
|
{ name: '磨边', amount: 6541 },
|
|
{ name: '下片', amount: 820 },
|
|
{ name: '丝印', amount: 2790 },
|
|
{ name: '包装', amount: 83 },
|
|
{ name: '打孔', amount: 964 },
|
|
{ name: '清洗', amount: 61 },
|
|
{ name: '镀膜', amount: 2470 },
|
|
{ name: '其他', amount: 4959 }
|
|
],
|
|
qualityAnalysisDatalistB: [
|
|
{ name: '上片', amount: 16 },
|
|
{ name: '钢化', amount: 4 },
|
|
{ name: '磨边', amount: 201 },
|
|
{ name: '下片', amount: 21 },
|
|
{ name: '丝印', amount: 100 },
|
|
{ name: '包装', amount: 1 },
|
|
{ name: '打孔', amount: 27 },
|
|
{ name: '清洗', amount: 2 },
|
|
{ name: '镀膜', amount: 93 },
|
|
{ name: '其他', amount: 163 }
|
|
],
|
|
qualityAnalysisDatalistMonthB: [
|
|
{ name: '上片', amount: 698 },
|
|
{ name: '钢化', amount: 49 },
|
|
{ name: '磨边', amount: 6321 },
|
|
{ name: '下片', amount: 799 },
|
|
{ name: '丝印', amount: 2782 },
|
|
{ name: '包装', amount: 72 },
|
|
{ name: '打孔', amount: 992 },
|
|
{ name: '清洗', amount: 63 },
|
|
{ name: '镀膜', amount: 2510 },
|
|
{ name: '其他', amount: 4920 }
|
|
],
|
|
quexianDatalist,
|
|
chosenDatalist: quexianDatalist[0]
|
|
}
|
|
},
|
|
computed: {
|
|
...mapGetters(['sidebar']),
|
|
unit() {
|
|
return this.dateMode === 'month' ? '单位: 千片' : '单位: 片'
|
|
}
|
|
},
|
|
methods: {
|
|
changeFullScreen() {
|
|
if (!screenfull.enabled) {
|
|
this.$message({
|
|
message: 'you browser can not work',
|
|
type: 'warning'
|
|
})
|
|
return false
|
|
}
|
|
screenfull.toggle(this.$refs['cockpit-container-quality'])
|
|
},
|
|
getFaultDataList() {
|
|
const { dateMode, plMode, quexianDatalist } = this
|
|
if (dateMode === 'month' && plMode === 'a') return quexianDatalist[0]
|
|
else if (dateMode === 'month' && plMode === 'b') return quexianDatalist[1]
|
|
else if (dateMode === 'day' && plMode === 'a') return quexianDatalist[2]
|
|
else if (dateMode === 'day' && plMode === 'b') return quexianDatalist[3]
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.visual-container >>> ::-webkit-scrollbar {
|
|
width: calc(8px * var(--beilv));
|
|
}
|
|
|
|
.visual-container >>> ::-webkit-scrollbar-track {
|
|
background-color: #14243f;
|
|
border-radius: 0;
|
|
}
|
|
|
|
.visual-container >>> ::-webkit-scrollbar-button {
|
|
/* width: calc(8px * var(--beilv));
|
|
height: calc(8px * var(--beilv)); */
|
|
display: none;
|
|
width: 0;
|
|
height: 0;
|
|
background: #5bc4bf9f;
|
|
position: relative;
|
|
}
|
|
|
|
.visual-container >>> ::-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; */
|
|
overflow: initial;
|
|
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));
|
|
}
|
|
|
|
.pl-select,
|
|
.date-select {
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
/* top: calc(16px * var(--beilv)); */
|
|
/* right: calc(22px * var(--beilv)); */
|
|
border-radius: calc(2px * var(--beilv));
|
|
overflow: hidden;
|
|
display: flex;
|
|
align-items: center;
|
|
height: 100%;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.pl-select {
|
|
right: unset;
|
|
left: 0;
|
|
/* left: calc(10px * var(--beilv)); */
|
|
}
|
|
|
|
.pl-select span,
|
|
.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;
|
|
}
|
|
|
|
.pl-select span.pl-select__active,
|
|
.date-select span.date-select__active {
|
|
background-color: #42bbb7;
|
|
}
|
|
|
|
.width-222 {
|
|
width: calc(375px * var(--beilv));
|
|
}
|
|
|
|
.fake-legend {
|
|
cursor: unset;
|
|
}
|
|
|
|
.fake-legend span {
|
|
background: none;
|
|
cursor: none;
|
|
color: #dff1fe;
|
|
}
|
|
</style>
|