mt-fe-group/yudao-init
9
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

修改ui

Browse Source
This commit is contained in:
‘937886381’
2024-05-21 09:13:52 +08:00
parent cb7cd0df81
commit 5c05e6c2e4
4 changed files with 172 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
src/views/copilot/components/CopilotHeader.vue
View File

@@ -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>

41
src/views/copilot/container.vue
View File

@@ -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 Normal file
View File

@@ -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>