'init'
This commit is contained in:
258
src/views/3DOverview/index.vue
Normal file
258
src/views/3DOverview/index.vue
Normal file
@@ -0,0 +1,258 @@
|
||||
<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">
|
||||
<techy-container title="订单完成情况" style="flex: 0;">
|
||||
<LeftContentOrder />
|
||||
</techy-container>
|
||||
<techy-container title="公用工程消耗" style="flex:1;">
|
||||
<LeftContentPublicConsume />
|
||||
</techy-container>
|
||||
</div>
|
||||
|
||||
<div class="techy-body-part__middle">
|
||||
<TechyBox>
|
||||
<div class="flex">
|
||||
<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">
|
||||
<techy-container title="实时产量和能耗" style="flex: 0">
|
||||
<RightContentRealtimeProduction />
|
||||
</techy-container>
|
||||
<div class="techy-body-part__right-col-2">
|
||||
<techy-container title="工序质量分析">
|
||||
<RightContentQualityAnalysis />
|
||||
</techy-container>
|
||||
</div>
|
||||
<techy-container title="产线成品率" style="flex: 0;">
|
||||
<RightContentProductRate />
|
||||
</techy-container>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 底部 -->
|
||||
<div class="bottom-part">
|
||||
<div style="width: 25%; min-width: 480px; min-height: 240px; height: 20vh;">
|
||||
<techy-container title="设备巡检提示" style="flex: 0;">
|
||||
<LeftContentEquipmentCheck />
|
||||
</techy-container>
|
||||
</div>
|
||||
<div style="flex: 1;">
|
||||
<techy-container title="现场实时监控">
|
||||
<LeftContentMonitor />
|
||||
</techy-container>
|
||||
</div>
|
||||
<div>
|
||||
<techy-container title="缺陷分类分析">
|
||||
<RightContentFaultAnalysis />
|
||||
</techy-container>
|
||||
</div>
|
||||
<div style="width: 25%; min-width: 480px;">
|
||||
<techy-container title="设备报警提示" style="flex: 0;">
|
||||
<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;
|
||||
}
|
||||
|
||||
#v3d-main-content {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: transparent;
|
||||
z-index: 3;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
font: initial;
|
||||
}
|
||||
|
||||
#techy-body-part {
|
||||
flex: 1 1;
|
||||
display: flex;
|
||||
/* gap: 16px; */
|
||||
gap: calc(100vmin / 1920 * 36);
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.upper-part {
|
||||
flex: 1 1;
|
||||
padding: calc(100vmin / 1920 * 36);
|
||||
padding-bottom: 0;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.bottom-part {
|
||||
padding: 0 calc(100vmin / 1920 * 36) calc(100vmin / 1920 * 36);
|
||||
display: flex;
|
||||
/* gap: 16px; */
|
||||
gap: calc(100vmin / 1920 * 36);
|
||||
}
|
||||
|
||||
.techy-body-part__left,
|
||||
.techy-body-part__right {
|
||||
height: 100%;
|
||||
width: 25%;
|
||||
min-width: 480px;
|
||||
overflow: hidden;
|
||||
/* background: rgba(20, 69, 100, 0.425);
|
||||
backdrop-filter: blur(2px); */
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: calc(100vmin / 1920 * 36);
|
||||
}
|
||||
|
||||
/* .techy-body-part__left {
|
||||
width: 35%;
|
||||
} */
|
||||
|
||||
.techy-body-part__right-col-2 {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
gap: calc(100vmin / 1920 * 36);
|
||||
}
|
||||
|
||||
.techy-body-part__middle {
|
||||
position: absolute;
|
||||
top: 12%;
|
||||
left: 36%;
|
||||
height: 96px;
|
||||
width: 128px;
|
||||
}
|
||||
|
||||
.flex {
|
||||
padding: 12px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.flex p {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-size: 12px;
|
||||
line-height: 1.5;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.flex p > span {
|
||||
position: relative;
|
||||
padding-left: 6px;
|
||||
}
|
||||
.round-dot::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 5px;
|
||||
left: -3px;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
background-color: rgb(82, 231, 82);
|
||||
border-radius: 4px;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user