344 lines
8.4 KiB
Vue
344 lines
8.4 KiB
Vue
<template>
|
|
<div id="v3d-outter" ref="v3d-outter">
|
|
<!-- <V3DApp @3d-loaded="handle3DLoaded" /> -->
|
|
<!-- <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">
|
|
<LeftContentOrder />
|
|
</techy-container>
|
|
</div>
|
|
<div class="public">
|
|
<techy-container title="公用工程消耗" icon="菱形叠加">
|
|
<LeftContentPublicConsume />
|
|
</techy-container>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="techy-body-part__middle">
|
|
<TechyBox>
|
|
<div class="techy-body-part__middle__inner">
|
|
<p>
|
|
<b>产线名称 :</b>
|
|
<span>A产线</span>
|
|
</p>
|
|
<p>
|
|
<b>设备名称 :</b>
|
|
<span>清洗机</span>
|
|
</p>
|
|
<p>
|
|
<b>累计加工 :</b>
|
|
<span>20</span>
|
|
</p>
|
|
<p>
|
|
<b>通信状态 :</b>
|
|
<span class="round-dot">运行中</span>
|
|
</p>
|
|
</div>
|
|
</TechyBox>
|
|
</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="安全帽图标">
|
|
<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'
|
|
|
|
export default {
|
|
name: '',
|
|
components: {
|
|
V3DApp,
|
|
TechyHeader,
|
|
TechyContainer,
|
|
LeftContentMonitor,
|
|
LeftContentEquipmentCheck,
|
|
LeftContentOrder,
|
|
LeftContentPublicConsume,
|
|
RightContentAlert,
|
|
RightContentRealtimeProduction,
|
|
RightContentProductRate,
|
|
RightContentQualityAnalysis,
|
|
RightContentFaultAnalysis,
|
|
TechyBox
|
|
},
|
|
data() {
|
|
return {
|
|
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
|
|
}
|
|
}
|
|
}
|
|
</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 {
|
|
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;
|
|
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(256px * var(--beilv));
|
|
}
|
|
/* 工序质量分析 */
|
|
.ws-quality {
|
|
height: calc(228px * var(--beilv));
|
|
flex: 1;
|
|
}
|
|
/* 产线成品率 */
|
|
.production {
|
|
height: calc(195px * var(--beilv));
|
|
}
|
|
|
|
.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));
|
|
}
|
|
|
|
/* 现场实时监控 */
|
|
.ft-monitor {
|
|
}
|
|
|
|
/* 缺陷分类分析 */
|
|
.fault-analysis {
|
|
width: calc(290px * var(--beilv));
|
|
}
|
|
|
|
/* 设备报警提示 */
|
|
.eq-alert {
|
|
}
|
|
|
|
.techy-body-part__left,
|
|
.techy-body-part__right {
|
|
/* height: 100%; */
|
|
/* height: calc(512px * var(--beilv));
|
|
flex: 1; */
|
|
width: calc(472px * var(--beilv));
|
|
overflow: hidden;
|
|
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: calc(16px * var(--beilv));
|
|
}
|
|
|
|
.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 .techy-box {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
height: 136px;
|
|
width: 176px;
|
|
}
|
|
|
|
.techy-body-part__middle__inner {
|
|
height: 100%;
|
|
padding: 16px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.techy-body-part__middle__inner p {
|
|
margin: 0;
|
|
padding: 0;
|
|
font-size: 12px;
|
|
line-height: 1.5;
|
|
color: #fff;
|
|
}
|
|
|
|
.techy-body-part__middle__inner p > span {
|
|
position: relative;
|
|
padding-left: 16px;
|
|
}
|
|
|
|
.techy-body-part__middle__inner p > span.round-dot {
|
|
padding-left: 28px;
|
|
}
|
|
|
|
.round-dot::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 4px;
|
|
left: 16px;
|
|
width: 8px;
|
|
height: 8px;
|
|
background-color: rgb(82, 231, 82);
|
|
border-radius: 4px;
|
|
}
|
|
</style>
|