132 lines
2.7 KiB
Vue
132 lines
2.7 KiB
Vue
<template>
|
|
<div class="factory-header">
|
|
<section class="menu1">
|
|
<FactorySelect
|
|
:companyName="companyName"
|
|
:companyId="companyId"
|
|
@updateCompany="updateCompany"
|
|
/>
|
|
</section>
|
|
<section class="menu2">
|
|
<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 class="page-title">{{ companyName }}</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import CopilotButton from "./button.vue";
|
|
import FactorySelect from "./FactorySelect.vue";
|
|
import screenfull from "screenfull";
|
|
|
|
export default {
|
|
name: "FactoryDataHeader",
|
|
components: { CopilotButton, FactorySelect },
|
|
props: {
|
|
companyName: {
|
|
type: String,
|
|
},
|
|
companyId: {
|
|
type: String,
|
|
},
|
|
period: {
|
|
type: String,
|
|
},
|
|
},
|
|
data() {
|
|
return {
|
|
isFullscreen: false,
|
|
};
|
|
},
|
|
computed: {},
|
|
methods: {
|
|
toggleFullScreen() {
|
|
this.isFullscreen = !this.isFullscreen;
|
|
|
|
screenfull.toggle(document.querySelector(".factory-layout"));
|
|
// 矫正宽度
|
|
// const el = document.querySelector(".factory-layout");
|
|
// el.style.width = this.isFullscreen ? "100vw" : "calc(100vw - 54px)";
|
|
// el.style.left = this.isFullscreen ? "0" : "54px";
|
|
},
|
|
updateCompany(obj) {
|
|
this.$emit("updateCompany", obj);
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style scoped>
|
|
@font-face {
|
|
font-family: 优设标题黑;
|
|
src: url(../../../assets/YouSheBiaoTiHei-2.ttf);
|
|
}
|
|
|
|
.factory-header {
|
|
display: flex;
|
|
gap: 12px;
|
|
align-items: center;
|
|
}
|
|
|
|
.factory-header > .menu1 {
|
|
width: 24vw;
|
|
/* display: flex;
|
|
align-items: center;
|
|
gap: 8px; */
|
|
}
|
|
.factory-header > .menu2 {
|
|
width: 30vw;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
}
|
|
|
|
.export-btn,
|
|
.fullscreen-btn {
|
|
width: 32px;
|
|
height: 32px;
|
|
margin-left: 24px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.export-btn {
|
|
background: url(../../../assets/images/export-icon.png) 0 0 / 100% 100%
|
|
no-repeat;
|
|
}
|
|
|
|
.fullscreen-btn {
|
|
background: url(../../../assets/images/full-icon.png) 0 0 / 100% 100%
|
|
no-repeat;
|
|
}
|
|
.exit-fullscreen {
|
|
background: url(../../../assets/images/homeindex/exit-fullscreen.png) 0 0 /
|
|
100% 100% no-repeat;
|
|
}
|
|
|
|
.page-title {
|
|
flex: 1;
|
|
font-size: 40px;
|
|
line-height: 70px;
|
|
letter-spacing: 5px;
|
|
font-family: 优设标题黑;
|
|
color: #6db6ff;
|
|
text-align: right;
|
|
user-select: none;
|
|
}
|
|
</style>
|