403 lines
11 KiB
Vue
403 lines
11 KiB
Vue
<template>
|
|
<div id="v3d-outter" ref="v3d-outter">
|
|
<!-- <div id="V3DData" style="position: fixed; top: 0; left: 0; display: hidden;" rel="" />
|
|
<V3DApp @3d-loaded="handle3DLoaded" @click.native="handle3DClick" />
|
|
<div v-if="showPage" id="v3d-main-content"> -->
|
|
<div v-if="true" id="v3d-main-content">
|
|
<techy-header :head-title="'合肥新能源数字工厂总览'" @toggle-full-screen="toggleFullScreen" />
|
|
|
|
<section id="techy-body-part">
|
|
<div class="upper-part">
|
|
<div class="techy-body-part__left">
|
|
<div class="order">
|
|
<techy-container title="订单完成情况" icon="default" style="display: flex; flex-direction: column;">
|
|
<LeftContentOrder style="height: 1px; flex: 1;" />
|
|
</techy-container>
|
|
</div>
|
|
<div class="public">
|
|
<techy-container title="公用工程消耗" icon="菱形叠加">
|
|
<LeftContentPublicConsume />
|
|
</techy-container>
|
|
</div>
|
|
|
|
<div v-if="currentEquipment" class="techy-body-part__middle">
|
|
<TechyBox>
|
|
<div class="techy-body-part__middle__inner">
|
|
<p>
|
|
<b>产线名称 :</b>
|
|
<span>{{ currentEquipment.pl }}</span>
|
|
</p>
|
|
<p>
|
|
<b>设备名称 :</b>
|
|
<span>{{ currentEquipment.name }}</span>
|
|
</p>
|
|
<p>
|
|
<b>累计加工 :</b>
|
|
<span>{{ currentEquipment.amount }}</span>
|
|
</p>
|
|
<p>
|
|
<b>通信状态 :</b>
|
|
<span class="round-dot">
|
|
<span
|
|
class="dot-icon"
|
|
:class="{
|
|
'green-dot': currentEquipment.status === '生产中',
|
|
'red-dot': currentEquipment.status === '故障',
|
|
'yellow-dot': currentEquipment.status === '调试中'
|
|
}"
|
|
/>
|
|
{{ currentEquipment.status }}
|
|
</span>
|
|
</p>
|
|
</div>
|
|
</TechyBox>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="techy-body-part__right">
|
|
<div class="realtime">
|
|
<techy-container title="实时产量和能耗" icon="折角的菜单图标">
|
|
<RightContentRealtimeProduction />
|
|
</techy-container>
|
|
</div>
|
|
|
|
<div class="ws-quality">
|
|
<techy-container title="工序质量分析" icon="趋势放大镜图标">
|
|
<RightContentQualityAnalysis />
|
|
</techy-container>
|
|
</div>
|
|
|
|
<div class="production">
|
|
<techy-container title="产线成品率" icon="default">
|
|
<RightContentProductRate />
|
|
</techy-container>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 底部 -->
|
|
<div class="bottom-part">
|
|
<div class="eq-check">
|
|
<techy-container title="设备巡检提示" icon="电脑警告菜单图标" style="flex: 0; align-self: stretch;">
|
|
<LeftContentEquipmentCheck />
|
|
</techy-container>
|
|
</div>
|
|
<div class="ft-monitor" style="flex: 1;">
|
|
<techy-container title="现场实时监控" icon="安全帽图标" style="display: flex; flex-direction: column;">
|
|
<LeftContentMonitor />
|
|
</techy-container>
|
|
</div>
|
|
<div class="fault-analysis">
|
|
<techy-container title="缺陷分类分析" icon="菜单放大镜图标">
|
|
<RightContentFaultAnalysis />
|
|
</techy-container>
|
|
</div>
|
|
<div class="eq-alert">
|
|
<techy-container title="设备报警提示" icon="电脑警告图标">
|
|
<RightContentAlert />
|
|
</techy-container>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import V3DApp from './components/V3DApp.vue'
|
|
import TechyHeader from './components/TechyHeader.vue'
|
|
import TechyContainer from './components/TechyContainer.vue'
|
|
import LeftContentMonitor from './components/LeftContentMonitor.vue'
|
|
import LeftContentEquipmentCheck from './components/LeftContentEquipmentCheck.vue'
|
|
import LeftContentOrder from './components/LeftContentOrder.vue'
|
|
import LeftContentPublicConsume from './components/LeftContentPublicConsume.vue'
|
|
import RightContentAlert from './components/RightContentAlert.vue'
|
|
import RightContentRealtimeProduction from './components/RightContentRealtimeProduction.vue'
|
|
import RightContentProductRate from './components/RightContentProductRate.vue'
|
|
import RightContentQualityAnalysis from './components/RightContentQualityAnalysis.vue'
|
|
import RightContentFaultAnalysis from './components/RightContentFaultAnalysis.vue'
|
|
import TechyBox from './components/TechyBox.vue'
|
|
|
|
import screenfull from 'screenfull'
|
|
|
|
import eqList from './v3dApp/data'
|
|
|
|
export default {
|
|
name: '',
|
|
components: {
|
|
V3DApp,
|
|
TechyHeader,
|
|
TechyContainer,
|
|
LeftContentMonitor,
|
|
LeftContentEquipmentCheck,
|
|
LeftContentOrder,
|
|
LeftContentPublicConsume,
|
|
RightContentAlert,
|
|
RightContentRealtimeProduction,
|
|
RightContentProductRate,
|
|
RightContentQualityAnalysis,
|
|
RightContentFaultAnalysis,
|
|
TechyBox
|
|
},
|
|
data() {
|
|
return {
|
|
eqId: null,
|
|
currentEquipment: null,
|
|
showPage: false,
|
|
toggleResize: 'toggle-1' // <=== no need to worry this
|
|
}
|
|
},
|
|
provide() {
|
|
return { resizeStatus: () => this.toggleResize }
|
|
},
|
|
created() {},
|
|
mounted() {},
|
|
methods: {
|
|
/** 全屏切换 */
|
|
toggleFullScreen() {
|
|
if (!screenfull.enabled) {
|
|
this.$message({
|
|
message: 'you browser can not work',
|
|
type: 'warning'
|
|
})
|
|
return false
|
|
}
|
|
screenfull.toggle(this.$refs['v3d-outter'])
|
|
this.toggleResize = this.toggleResize === 'toggle-1' ? 'toggle-2' : 'toggle-1'
|
|
},
|
|
handle3DLoaded() {
|
|
this.showPage = true
|
|
},
|
|
handle3DClick() {
|
|
this.eqId = document.getElementById('V3DData').rel
|
|
if (this.eqId) {
|
|
this.currentEquipment = eqList.find(item => item.id === this.eqId)
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
#v3d-outter {
|
|
width: 100vw;
|
|
height: 100vh;
|
|
background-image: url('../../assets/img/cockpit/cockpit-back.png');
|
|
background-size: cover;
|
|
background-position: center;
|
|
font: 14px/1.5 tahoma, arial, 'Hiragino Sans GB', '\5b8b\4f53', sans-serif;
|
|
color: #4d4d4d;
|
|
-webkit-font-smoothing: antialiased;
|
|
font-weight: 300;
|
|
position: relative;
|
|
/* overflow: auto; */
|
|
}
|
|
|
|
#v3d-outter *::-webkit-scrollbar {
|
|
width: calc(8px * var(--beilv));
|
|
}
|
|
|
|
#v3d-outter *::-webkit-scrollbar-track {
|
|
background-color: #14243f;
|
|
/* background-color: white; */
|
|
border-radius: 0;
|
|
}
|
|
|
|
#v3d-outter *::-webkit-scrollbar-button {
|
|
display: none;
|
|
width: calc(8px * var(--beilv));
|
|
height: calc(8px * var(--beilv));
|
|
background: #5bc4bf9f;
|
|
position: relative;
|
|
}
|
|
|
|
#v3d-outter *::-webkit-scrollbar-thumb {
|
|
border-radius: calc(8px * var(--beilv));
|
|
background: #5bc4bf9f;
|
|
}
|
|
|
|
#v3d-main-content {
|
|
width: 100%;
|
|
height: 100%;
|
|
background: transparent;
|
|
z-index: 3;
|
|
display: flex;
|
|
flex-direction: column;
|
|
font: initial;
|
|
}
|
|
|
|
#techy-body-part {
|
|
height: 20vh;
|
|
flex: 1 1;
|
|
display: flex;
|
|
gap: calc(16px * var(--beilv));
|
|
flex-direction: column;
|
|
}
|
|
|
|
.upper-part {
|
|
flex: 1 1;
|
|
height: 20vh;
|
|
padding: calc(24px * var(--beilv));
|
|
padding-bottom: 0;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
gap: calc(16px * var(--beilv));
|
|
}
|
|
|
|
/* 订单完成情况 */
|
|
.order {
|
|
height: calc(232px * var(--beilv));
|
|
flex: 0;
|
|
}
|
|
/* 公用工程消耗 */
|
|
.public {
|
|
height: calc(472px * var(--beilv));
|
|
flex: 1;
|
|
overflow: hidden;
|
|
}
|
|
|
|
/* 实时产量和能耗 */
|
|
.realtime {
|
|
height: calc(240px * var(--beilv));
|
|
}
|
|
/* 工序质量分析 */
|
|
.ws-quality {
|
|
/* height: calc(228px * var(--beilv)); */
|
|
min-height: calc(136px * var(--beilv));
|
|
flex: 1;
|
|
}
|
|
/* 产线成品率 */
|
|
.production {
|
|
height: calc(200px * var(--beilv));
|
|
flex: 1 0;
|
|
position: relative;
|
|
}
|
|
|
|
.bottom-part {
|
|
height: calc(224px * var(--beilv));
|
|
padding: 0 calc(24px * var(--beilv)) calc(24px * var(--beilv));
|
|
display: flex;
|
|
gap: calc(16px * var(--beilv));
|
|
}
|
|
|
|
/* 设备巡检提示 */
|
|
.eq-check,
|
|
.eq-alert {
|
|
width: calc(472px * var(--beilv));
|
|
}
|
|
|
|
/* 缺陷分类分析 */
|
|
.fault-analysis {
|
|
width: calc(290px * var(--beilv));
|
|
}
|
|
|
|
.techy-body-part__left,
|
|
.techy-body-part__right {
|
|
/* height: 100%; */
|
|
/* height: calc(512px * var(--beilv));
|
|
flex: 1; */
|
|
width: calc(472px * var(--beilv));
|
|
overflow: unset;
|
|
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: calc(16px * var(--beilv));
|
|
position: relative;
|
|
}
|
|
|
|
.techy-body-part__right-col-2 {
|
|
flex: 1;
|
|
display: flex;
|
|
gap: calc(100vmin / 1920 * 36);
|
|
}
|
|
|
|
/* .techy-body-part__middle {
|
|
flex: 1;
|
|
position: relative;
|
|
} */
|
|
|
|
.techy-body-part__middle {
|
|
position: absolute;
|
|
/* background: #ff3311; */
|
|
top: 0;
|
|
right: calc(-16px * var(--beilv));
|
|
transform: translateX(100%);
|
|
}
|
|
|
|
.techy-body-part__middle__inner {
|
|
/* height: 100%; */
|
|
padding: calc(16px * var(--beilv));
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
/* gap: calc(6px * var(--beilv)); */
|
|
}
|
|
|
|
.techy-body-part__middle__inner p {
|
|
margin: 0;
|
|
padding: 0;
|
|
font-size: calc(12px * var(--beilv));
|
|
line-height: 1.5;
|
|
color: #fff;
|
|
display: flex;
|
|
min-width: calc(168px * var(--beilv));
|
|
}
|
|
|
|
.techy-body-part__middle__inner p:not(:last-child) {
|
|
margin-bottom: calc(8px * var(--beilv));
|
|
}
|
|
|
|
/* .techy-body-part__middle__inner p > b {
|
|
width: calc(90px * var(--beilv));
|
|
} */
|
|
|
|
.techy-body-part__middle__inner p > span {
|
|
position: relative;
|
|
padding-left: calc(16px * var(--beilv));
|
|
}
|
|
|
|
.techy-body-part__middle__inner p > span.round-dot {
|
|
/* padding-left: calc(28px * var(--beilv)); */
|
|
display: flex;
|
|
align-items: center;
|
|
gap: calc(4px * var(--beilv));
|
|
}
|
|
|
|
.dot-icon {
|
|
height: calc(16px * var(--beilv));
|
|
width: calc(16px * var(--beilv));
|
|
}
|
|
|
|
.red-dot {
|
|
background: url(./components/assets/red.png) 20% center / 100% no-repeat;
|
|
}
|
|
.green-dot {
|
|
background: url(./components/assets/green.png) 20% center / 100% no-repeat;
|
|
}
|
|
.yellow-dot {
|
|
background: url(./components/assets/orange.png) 20% center / 100% no-repeat;
|
|
}
|
|
.blue-dot {
|
|
background: url(./components/assets/blue.png) 20% center / 100% no-repeat;
|
|
}
|
|
|
|
/* .round-dot::before {
|
|
content: ''; */
|
|
/* position: absolute;
|
|
top: calc(4px * var(--beilv));
|
|
left: calc(16px * var(--beilv)); */
|
|
/* width: calc(8px * var(--beilv));
|
|
height: calc(8px * var(--beilv));
|
|
background-color: rgb(82, 231, 82);
|
|
border-radius: calc(4px * var(--beilv));
|
|
} */
|
|
|
|
.danger-dot::before {
|
|
background-color: #e71837;
|
|
}
|
|
|
|
.warning-dot::before {
|
|
background-color: #d6961f;
|
|
}
|
|
</style>
|