修改ui
Cette révision appartient à :
‘937886381’
Parent
cb7cd0df81
révision
5c05e6c2e4
2
.env.dev
2
.env.dev
@ -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)"
|
||||
/>
|
||||
</section>
|
||||
<section class="menu">
|
||||
<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"
|
||||
/>
|
||||
</div>
|
||||
<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)" />
|
||||
<div class="btn-group">
|
||||
<button type="button" class="export-btn" />
|
||||
<button type="button" class="fullscreen-btn" :class="[isFullscreen ? 'exit-fullscreen' : '']"
|
||||
@click="toggleFullScreen" />
|
||||
</div>
|
||||
</section>
|
||||
</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; **/
|
||||
|
||||
126
src/views/copilot/efficiencyContainer.vue
Fichier normal
126
src/views/copilot/efficiencyContainer.vue
Fichier normal
@ -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>
|
||||
Chargement…
Référencer dans un nouveau ticket
Block a user