368 lines
9.2 KiB
Vue
368 lines
9.2 KiB
Vue
<template>
|
|
<div ref="cockpit-container-equipment" class="visual-container">
|
|
<techy-header :head-title="'合肥新能源数字工厂设备管理驾驶舱'" @toggle-full-screen="changeFullScreen" />
|
|
<!-- <section class="techy-body" :key="refreshKey"> -->
|
|
<section class="techy-body">
|
|
<div class="tech-body__col-1">
|
|
<div class="row-1">
|
|
<div class="equipment-exception">
|
|
<!-- 设备报修/异常上报 -->
|
|
<techy-container :title="'设备报修/异常上报'" icon="扳手螺丝刀">
|
|
<div class="table-wrapper fix-table-exception-report">
|
|
<techy-table
|
|
:page="1"
|
|
:limit="7"
|
|
:show-index="false"
|
|
:table-config="equipmentExceptionProps"
|
|
:table-data="equipmentExceptionDatalist"
|
|
/>
|
|
</div>
|
|
</techy-container>
|
|
</div>
|
|
<div class="equipment-alarm">
|
|
<!-- 设备异常报警 -->
|
|
<techy-container :title="'设备异常报警'" icon="安全帽">
|
|
<div class="table-wrapper fix-table-eq-exception">
|
|
<techy-table
|
|
:page="1"
|
|
:limit="7"
|
|
:show-index="false"
|
|
:table-config="equipmentAlarmProps"
|
|
:table-data="equipmentAlarmDatalist"
|
|
/>
|
|
</div>
|
|
</techy-container>
|
|
</div>
|
|
</div>
|
|
<div class="row-2">
|
|
<!-- 设备分析 -->
|
|
<techy-container :title="'设备分析'" icon="趋势搜索">
|
|
<select id="productLine" name="productLine" class="product-line-selection">
|
|
<option value="1">产线一</option>
|
|
<option value="2">产线二</option>
|
|
<option value="3">产线三</option>
|
|
</select>
|
|
<div class="equipment-analysis__inner">
|
|
<div>
|
|
<TechyBox class="pl-jdl">
|
|
<!-- <h2
|
|
:style="{
|
|
margin: 0,
|
|
padding: 0,
|
|
fontWeight: 'normal',
|
|
color: '#01CFCC',
|
|
lineHeight: '18px',
|
|
fontSize: '0.85vw'
|
|
}"
|
|
>
|
|
各产线稼动率
|
|
</h2> -->
|
|
<span class="pl-jdl__title">各产线稼动率</span>
|
|
<pl-jdl-chart />
|
|
</TechyBox>
|
|
</div>
|
|
<div class="eqs-oee-mtbr-btbf grid grid-2-3">
|
|
<EquipmentAnalysisBox
|
|
v-for="(item, index) in equipmentAnalysisData"
|
|
:key="index"
|
|
:name="item.name"
|
|
:oee="item.oee"
|
|
:mtbf="item.mtbf"
|
|
:mtbr="item.mtbr"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</techy-container>
|
|
</div>
|
|
<div class="row-3">
|
|
<!-- 设备备件管理 -->
|
|
<techy-container :title="'设备备件管理'" icon="清单齿轮">
|
|
<div class="table-wrapper fix-table-exception-report">
|
|
<techy-table
|
|
:page="1"
|
|
:limit="7"
|
|
:show-index="false"
|
|
:table-config="sparepartsProps"
|
|
:table-data="sparepartsDatalist"
|
|
/>
|
|
</div>
|
|
</techy-container>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="tech-body__col-2">
|
|
<techy-container :title="'设备工单管理'" icon="清单齿轮">
|
|
<!-- 设备工单管理 -->
|
|
<div class="techy-container__inner">
|
|
<div>
|
|
<TechyAnalysisHeader>突发性维护</TechyAnalysisHeader>
|
|
<TechyVerticalTable :table-props="rightSideProps" :data-list="rightSideDatalist" />
|
|
</div>
|
|
<div>
|
|
<TechyAnalysisHeader>计划内保养</TechyAnalysisHeader>
|
|
<TechyVerticalTable :table-props="rightSideProps" :data-list="rightSideDatalist" />
|
|
</div>
|
|
<div>
|
|
<TechyAnalysisHeader>防御性维护</TechyAnalysisHeader>
|
|
<TechyVerticalTable :table-props="rightSideProps" :data-list="rightSideDatalist" />
|
|
</div>
|
|
<div>
|
|
<TechyAnalysisHeader>点检工单</TechyAnalysisHeader>
|
|
<TechyVerticalTable :table-props="rightSideProps" :data-list="rightSideDatalist" />
|
|
</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 TechyAnalysisHeader from './components/TechyAnalysisHeader.vue'
|
|
import EquipmentAnalysisBox from './components/EquipmentAnalysisBox.vue'
|
|
import TechyVerticalTable from './components/TechyVerticalTable.vue'
|
|
import plJdlChart from './components/charts/pl-JDL-Chart.vue'
|
|
|
|
import {
|
|
equipmentExceptionProps,
|
|
equipmentExceptionDatalist,
|
|
equipmentAlarmProps,
|
|
equipmentAlarmDatalist,
|
|
OEE_PER_LINE,
|
|
equipmentAnalysisData,
|
|
sparepartsProps,
|
|
sparepartsDatalist,
|
|
rightSideProps,
|
|
rightSideDatalist
|
|
} from './mockData'
|
|
|
|
import { mapGetters } from 'vuex'
|
|
import screenfull from 'screenfull'
|
|
|
|
export default {
|
|
name: 'EquipmentManageHome',
|
|
components: {
|
|
plJdlChart,
|
|
TechyContainer,
|
|
TechyHeader,
|
|
TechyBox,
|
|
TechyVerticalTable,
|
|
TechyTable,
|
|
TechyAnalysisHeader,
|
|
EquipmentAnalysisBox
|
|
},
|
|
directives: {
|
|
'auto-shrink-and-grow': function(el, binding) {
|
|
console.log('el', el, binding)
|
|
}
|
|
},
|
|
props: {},
|
|
data() {
|
|
return {
|
|
equipmentExceptionProps,
|
|
equipmentExceptionDatalist,
|
|
equipmentAlarmProps,
|
|
equipmentAlarmDatalist,
|
|
OEE_PER_LINE,
|
|
equipmentAnalysisData,
|
|
sparepartsProps,
|
|
sparepartsDatalist,
|
|
rightSideProps,
|
|
rightSideDatalist
|
|
// refreshKey: 0
|
|
}
|
|
},
|
|
computed: {
|
|
...mapGetters(['sidebar'])
|
|
},
|
|
mounted() {},
|
|
|
|
methods: {
|
|
changeFullScreen() {
|
|
if (!screenfull.enabled) {
|
|
this.$message({
|
|
message: 'you browser can not work',
|
|
type: 'warning'
|
|
})
|
|
return false
|
|
}
|
|
screenfull.toggle(this.$refs['cockpit-container-equipment'])
|
|
}
|
|
}
|
|
}
|
|
</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-eq-exception >>> .el-table td .cell {
|
|
width: 80% !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;
|
|
gap: calc(16px * var(--beilv));
|
|
}
|
|
|
|
.tech-body__col-1 {
|
|
/* height: calc(100% - 28px); */
|
|
height: 100%;
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: calc(16px * var(--beilv));
|
|
width: 70%;
|
|
}
|
|
|
|
.tech-body__col-2 {
|
|
width: 25%;
|
|
flex: 0;
|
|
height: 100%;
|
|
}
|
|
|
|
.techy-container__inner {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: calc(8px * var(--beilv));
|
|
height: calc(100% - 4vh);
|
|
/* overflow-y: scroll; */
|
|
overflow-y: auto;
|
|
}
|
|
.techy-container__inner > div {
|
|
flex: 1 1;
|
|
}
|
|
|
|
.row-1,
|
|
/* .row-2, */
|
|
.row-3 {
|
|
height: 30%;
|
|
}
|
|
|
|
.row-1 {
|
|
flex: 1;
|
|
display: flex;
|
|
gap: calc(16px * var(--beilv));
|
|
}
|
|
|
|
.row-2 {
|
|
flex: 0;
|
|
}
|
|
|
|
.row-3 {
|
|
flex: 1;
|
|
}
|
|
|
|
.equipment-exception {
|
|
min-width: 20%;
|
|
flex: 3;
|
|
}
|
|
|
|
.equipment-alarm {
|
|
min-width: 20%;
|
|
flex: 2;
|
|
}
|
|
|
|
.table-wrapper {
|
|
height: calc(100% - 3vh);
|
|
overflow: auto;
|
|
}
|
|
|
|
.grid {
|
|
display: grid;
|
|
}
|
|
|
|
.equipment-analysis__inner {
|
|
height: calc(100% - 32px);
|
|
display: flex;
|
|
gap: calc(8px * var(--beilv));
|
|
}
|
|
|
|
.pl-jdl {
|
|
padding: calc(8px * var(--beilv)) calc(16px * var(--beilv));
|
|
height: calc(191px * var(--beilv));
|
|
width: calc(245px * var(--beilv));
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.pl-jdl__title {
|
|
font-size: calc(15px * var(--beilv));
|
|
line-height: calc(18px * var(--beilv));
|
|
color: #01cfcc;
|
|
}
|
|
|
|
.eqs-oee-mtbr-btbf {
|
|
flex: 1;
|
|
height: calc(191px * var(--beilv));
|
|
overflow: hidden;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.grid-2-3 {
|
|
grid-template-columns: repeat(3, 1fr);
|
|
grid-template-rows: 1fr 1fr;
|
|
gap: calc(8px * var(--beilv)) calc(4px * var(--beilv));
|
|
}
|
|
|
|
.product-line-selection {
|
|
border: none;
|
|
outline: none;
|
|
border-radius: calc(4px * var(--beilv));
|
|
background: #31878c45;
|
|
/* opacity: 0.29; */
|
|
color: white;
|
|
position: absolute;
|
|
padding: calc(4px * var(--beilv));
|
|
width: calc(114px * var(--beilv));
|
|
font-size: calc(12px * var(--beilv));
|
|
line-height: calc(18px * var(--beilv));
|
|
top: calc(24px * var(--beilv));
|
|
left: calc(140px * var(--beilv));
|
|
}
|
|
</style>
|