@@ -1,7 +1,7 @@ | |||
### | |||
# @Author: zhp | |||
# @Date: 2024-04-28 13:42:51 | |||
# @LastEditTime: 2024-05-20 08:31:10 | |||
# @LastEditTime: 2024-05-21 08:36:39 | |||
# @LastEditors: zhp | |||
# @Description: | |||
### | |||
@@ -8,33 +8,19 @@ | |||
<template> | |||
<div class="copilot-header"> | |||
<section class="menu"> | |||
<CopilotButton | |||
v-for="i in ['产量', '效率', '综合']" | |||
:key="i" | |||
:label="i" | |||
:active="i === active" | |||
@click="() => $emit('update:active', i)" | |||
/> | |||
<CopilotButton v-for="i in ['产量', '效率']" :key="i" :label="i" :active="i === active" | |||
@click="() => $emit('update:active', i)" /> | |||
</section> | |||
<div class="page-title">{{ active }}驾驶舱</div> | |||
<section class="menu"> | |||
<CopilotButton | |||
v-for="i in ['日', '周', '月', '年']" | |||
:key="i" | |||
:label="i" | |||
:active="i === period" | |||
@click="() => $emit('update:period', i)" | |||
/> | |||
<CopilotButton v-for="i in ['日', '周', '月', '年']" :key="i" :label="i" :active="i === period" | |||
@click="() => $emit('update:period', i)" /> | |||
<div class="btn-group"> | |||
<button type="button" class="export-btn" /> | |||
<button | |||
type="button" | |||
class="fullscreen-btn" | |||
:class="[isFullscreen ? 'exit-fullscreen' : '']" | |||
@click="toggleFullScreen" | |||
/> | |||
<button type="button" class="fullscreen-btn" :class="[isFullscreen ? 'exit-fullscreen' : '']" | |||
@click="toggleFullScreen" /> | |||
</div> | |||
</section> | |||
<div class="page-title">{{ active }}驾驶舱</div> | |||
</div> | |||
</template> | |||
@@ -120,7 +106,7 @@ export default { | |||
letter-spacing: 5px; | |||
font-family: 优设标题黑; | |||
color: #6db6ff; | |||
text-align: right; | |||
text-align: center; | |||
user-select: none; | |||
} | |||
</style> |
@@ -1,4 +1,3 @@ | |||
<!-- | |||
filename: container.vue | |||
author: liubin | |||
@@ -8,12 +7,12 @@ | |||
<template> | |||
<!-- <div class="copilot-layout" ref="copilot-layout"> --> | |||
<div class="copilot-layout" ref="copilot-layout" :class="[page == '效率' ? 'other' : 'produce' ]"> | |||
<CopilotHeaderVue :active="page" :period="period" @update:active="page = $event" @update:period="period = $event" /> | |||
<div class="copilot-layout produce" ref="copilot-layout"> | |||
<CopilotHeaderVue :active="page" :period="period" @update:active="updateActive" @update:period="period = $event" /> | |||
<YieldCopilot v-if="page == '产量'" :period="period" /> | |||
<EnergyCopilot v-if="page == '综合'" :period="period" /> | |||
<EfficiencyCopilot v-if="page == '效率'" :period="period" /> | |||
<YieldCopilot :period="period" /> | |||
<!-- <EnergyCopilot v-if="page == '综合'" :period="period" /> --> | |||
<!-- <EfficiencyCopilot v-if="page == '效率'" :period="period" /> --> | |||
<div class="copilot-footer">© 中建材智能自动化研究院有限公司</div> | |||
</div> | |||
</template> | |||
@@ -39,6 +38,31 @@ export default { | |||
currentsStyles: '', | |||
}; | |||
}, | |||
methods: { | |||
updateActive(val, oldVal) { | |||
console.log(val) | |||
if (val === '效率') { | |||
this.$router.push({ | |||
path: 'efficiency-container', | |||
query: { | |||
name: '效率' | |||
} | |||
}) | |||
// this.page = oldVal | |||
} else if (val === '产量') { | |||
this.$router.push({ | |||
path: 'main', | |||
query: { | |||
name: '产量' | |||
} | |||
}) | |||
// this.page = oldVal | |||
} | |||
} | |||
}, | |||
// mounted() { | |||
// this.page = this.$route.query.name | |||
// }, | |||
// watch: { | |||
// page(val) { | |||
// if (val === '产量') { | |||
@@ -65,7 +89,6 @@ export default { | |||
}; | |||
</script> | |||
<style> | |||
.copilot-layout { | |||
padding: 16px; | |||
background: url(../../assets/images/copilot-bg.png) 0 0 / 100% 100% no-repeat; | |||
@@ -81,12 +104,14 @@ export default { | |||
gap: 8px; | |||
} | |||
.produce{ | |||
.produce { | |||
height: calc(100% + 38px); | |||
} | |||
.other { | |||
height: calc(100% + 240px); | |||
} | |||
.copilot-footer { | |||
/** position: absolute; | |||
bottom: 10px; **/ | |||
@@ -0,0 +1,126 @@ | |||
<!-- | |||
* @Author: zhp | |||
* @Date: 2024-05-20 16:04:18 | |||
* @LastEditTime: 2024-05-21 09:09:10 | |||
* @LastEditors: zhp | |||
* @Description: | |||
--> | |||
<template> | |||
<!-- <div class="copilot-layout" ref="copilot-layout"> --> | |||
<div class="copilot-layout other" ref="copilot-layout"> | |||
<CopilotHeaderVue :active="page" :period="period" @update:active="updateActive" @update:period="period = $event" /> | |||
<!-- <YieldCopilot v-if="page == '产量'" :period="period" /> --> | |||
<!-- <EnergyCopilot v-if="page == '综合'" :period="period" /> --> | |||
<EfficiencyCopilot :period="period" /> | |||
<div class="copilot-footer">© 中建材智能自动化研究院有限公司</div> | |||
</div> | |||
</template> | |||
<script> | |||
import CopilotHeaderVue from "./components/CopilotHeader.vue"; | |||
// import YieldCopilot from "./yield/index.vue"; | |||
// import EnergyCopilot from "./energy/index.vue"; | |||
import EfficiencyCopilot from "./efficiency/index.vue"; | |||
export default { | |||
name: "CopilotContainer", | |||
components: { | |||
CopilotHeaderVue, | |||
// YieldCopilot, | |||
// EnergyCopilot, | |||
EfficiencyCopilot, | |||
}, | |||
data() { | |||
return { | |||
page: "效率", | |||
period: "日", | |||
currentsStyles: '', | |||
}; | |||
}, | |||
methods: { | |||
updateActive(val, oldVal) { | |||
console.log(val) | |||
if (val === '效率') { | |||
this.$router.push({ | |||
path: 'efficiency-container', | |||
query: { | |||
name: '效率' | |||
} | |||
}) | |||
// this.page = oldVal | |||
} else if (val === '产量') { | |||
this.$router.push({ | |||
path: 'main', | |||
query: { | |||
name: '产量' | |||
} | |||
}) | |||
// this.page = oldVal | |||
} | |||
} | |||
}, | |||
// mounted() { | |||
// this.page = this.$route.query.name | |||
// }, | |||
// watch: { | |||
// page(val) { | |||
// if (val === '产量') { | |||
// console.log(val) | |||
// this.currentsStyles = | |||
// 'height: calc(100% + 38px)' | |||
// console.log(this.currentsStyles) | |||
// } else { | |||
// console.log(val) | |||
// this.currentsStyles = 'height:100%+38px' | |||
// console.log(this.currentsStyles) | |||
// } | |||
// immediate: true | |||
// } | |||
// } | |||
// mounted() { | |||
// document.body.style.minHeight = "1024px"; | |||
// document.body.style.minWidth = "1550px"; | |||
// }, | |||
// destroyed() { | |||
// document.body.style.minHeight = "1024px"; | |||
// document.body.style.minWidth = "1550px"; | |||
// }, | |||
}; | |||
</script> | |||
<style> | |||
.copilot-layout { | |||
padding: 16px; | |||
background: url(../../assets/images/copilot-bg.png) 0 0 / 100% 100% no-repeat; | |||
position: absolute; | |||
left: -16px; | |||
/* top: -8px; */ | |||
/* height: calc(100% + 38px); */ | |||
width: calc(100% + 30px); | |||
z-index: 1001; | |||
color: #fff; | |||
display: flex; | |||
flex-direction: column; | |||
gap: 8px; | |||
} | |||
.produce{ | |||
height: calc(100% + 38px); | |||
} | |||
.other { | |||
height: calc(100% + 240px); | |||
} | |||
.copilot-footer { | |||
/** position: absolute; | |||
bottom: 10px; **/ | |||
height: 10px; | |||
width: 100%; | |||
color: rgb(80, 80, 80); | |||
user-select: none; | |||
font-size: 14px; | |||
letter-spacing: 1px; | |||
display: grid; | |||
place-content: center; | |||
} | |||
</style> |