Skip to content

E
energyai_vue
Commit 8b041c78 authored by xiexingan's avatar xiexingan
Browse files
Options

tj

parent 935258f6
Hide whitespace changes
Inline Side-by-side
Showing with 373 additions and 1 deletion
src/layout/header-aside/layout 1221.vue 0 → 100644
View file @ 8b041c78
<template>
<div
class="d2-layout-header-aside-group"
:style="styleLayoutMainGroup"
:class="{ grayMode: grayActive }"
>
<!-- 半透明遮罩 -->
<div class="d2-layout-header-aside-mask"></div>
<!-- 主体内容 -->
<div class="d2-layout-header-aside-content" flex="dir:top">
<!-- 顶栏 -->
<div
class="d2-theme-header"
:style="{
opacity: this.searchActive ? 0.5 : 1,
}"
flex-box="0"
flex
>
<div
class="logo-group"
:style="{ width: asideCollapse ? asideWidthCollapse : asideWidth }"
flex-box="0"
>
<img src="./imgs/logo2.png" />
<!-- <span v-if="!asideCollapse">ssssssssss系统</span> -->
</div>
<!-- 左侧菜单隐藏显示 -->
<div style="width: 100%; border: 2px solid">
<div class="toggle-aside-btn" @click="handleToggleAside" flex-box="0">
<d2-icon name="bars" style="color: #fff" />
</div>
<div flex-box="1"></div>
<!-- 顶栏右侧 -->
<div class="d2-header-right">
<div class="time-container">
<div class="current-time">{{ time | formatDate }}</div>
<div class="current-date">{{ time | formatDate2 }}</div>
</div>
<div class="weather-container">
<div class="user-img">室内</div>
<div class="weather-info" v-if="list">
<!-- <span :class="station.length < 6 ? 'lineFeed' : ''">{{station }}</span> -->
<div>温度 {{ list.snqxzList[0].temperature }}℃</div>
<div>湿度 {{ list.snqxzList[0].humidity }}%</div>
</div>
</div>
<div class="weather-container">
<div class="user-img">室外</div>
<div class="weather-info" v-if="list">
<!-- <span :class="station.length < 6 ? 'lineFeed' : ''">{{station }}</span> -->
<div>温度 {{ list.swqxzList[0].temperature }}℃</div>
<div>湿度 {{ list.swqxzList[0].humidity }}%</div>
</div>
</div>
<!-- <d2-header-theme /> -->
<!-- <el-badge class="msg-img" :value="countNum == 0 ? '' : countNum > 99 ? '99+' : countNum" type="danger">
<div title="报警中心" style="cursor: pointer" @click="toAlarms">
<img src="./imgs/msg.png" />
</div>
</el-badge> -->
<d2-header-user />
<div
title="退出"
class="msg-img"
style="cursor: pointer"
@click="logOff"
>
<img src="./imgs/out.png" />
</div>
</div>
</div>
</div>
<!-- 下面 主体 -->
<div class="d2-theme-container" flex-box="1" flex>
<!-- 主体 侧边栏 -->
<div
flex-box="0"
ref="aside"
class="d2-theme-container-aside"
:style="{
width: asideCollapse ? asideWidthCollapse : asideWidth,
opacity: this.searchActive ? 0.5 : 1,
}"
>
<d2-menu-side />
</div>
<!-- 主体 -->
<div class="d2-theme-container-main" flex-box="1" flex>
<!-- 内容 -->
<transition name="fade-scale">
<div class="d2-theme-container-main-layer" flex="dir:top">
<!-- 页面 -->
<div class="d2-theme-container-main-body" flex-box="1">
<!-- <bim></bim> -->
<keep-alive :include="keepAlive">
<router-view />
</keep-alive>
</div>
</div>
</transition>
</div>
</div>
<div style="z-index: 9999 !important; user-select: none" class="mfooter">
Copyright (C) 2021-2022. XXXXX信息工程有限公司 蜀ICP备1202XXXX号-1
电话：86-028-689XXXX 传真：86-028-6893XXXX
</div>
</div>
</div>
</template>
<script>
import { mapState, mapGetters, mapActions } from "vuex";
import mixinSearch from "./mixins/search";
export default {
name: "d2-layout-header-aside",
mixins: [mixinSearch],
components: {
"d2-menu-side": () => import("./components/menu-side"),
"d2-menu-header": () => import("./components/menu-header"),
"d2-header-theme": () => import("./components/header-theme"),
"d2-header-user": () => import("./components/header-user"),
},
data() {
return {
drawer: false,
// [侧边栏宽度] 正常状态
asideWidth: "256px",
// [侧边栏宽度] 折叠状态
asideWidthCollapse: "65px",
time: new Date(),
timer: null,
logTimeout: null,
countNum: 0,
station: "",
};
},
mounted() {
this.getStation();
this.getDate();
this.countNum = this.size;
},
filters: {
formatDate: function (value) {
let date = new Date(value);
let h = date.getHours();
h = h < 10 ? "0" + h : h;
let m = date.getMinutes();
m = m < 10 ? "0" + m : m;
let s = date.getSeconds();
s = s < 10 ? "0" + s : s;
return ` ${h}:${m}:${s}`;
},
formatDate2: function (value) {
let date = new Date(value);
let y = date.getFullYear();
let MM = date.getMonth() + 1;
MM = MM < 10 ? "0" + MM : MM;
let d = date.getDate();
d = d < 10 ? "0" + d : d;
let week = date.getDay();
let weeks = ["日", "一", "二", "三", "四", "五", "六"];
let getWeek = "星期" + weeks[week];
// return `${y}/${MM}/${d} ${getWeek} `
return `${MM}/${d} ${getWeek} `;
},
},
computed: {
...mapState("d2admin", {
keepAlive: (state) => state.page.keepAlive,
grayActive: (state) => state.gray.active,
transitionActive: (state) => state.transition.active,
asideCollapse: (state) => state.menu.asideCollapse,
}),
...mapState("d2admin/menu", ["header"]),
...mapState("d2admin/toast", ["size"]),
...mapGetters("d2admin", {
themeActiveSetting: "theme/activeSetting",
}),
...mapState("d2admin/paramsList", ["list"]),
/**
* @description 最外层容器的背景图片样式
*/
styleLayoutMainGroup() {
return {
// ...(this.themeActiveSetting.backgroundImage
// ? {
// backgroundImage: `url('${this.$baseUrl}${this.themeActiveSetting.backgroundImage}')`
// }
// : {})
};
},
},
watch: {
size(val) {
this.countNum = val;
},
},
methods: {
...mapActions("d2admin/menu", ["asideCollapseToggle"]),
/**
* 接收点击切换侧边栏的按钮
*/
handleToggleAside() {
console.log(111111);
this.asideCollapseToggle();
},
...mapActions("d2admin/account", ["logout"]),
/**
* @description 登出
*/
logOff() {
this.logout({
vm: this,
confirm: true,
});
},
getDate() {
let _this = this;
this.timer = setInterval(() => {
_this.time = new Date();
}, 1000);
},
// out() {
// this.$router.push('/')
// },
toAlarms() {
this.header.forEach((res) => {
if (res.path === "/alarms") {
this.$router.push({ path: res.list[0].path });
}
});
},
//读取站点名称
getStation() {
this.station = JSON.parse(localStorage.getItem("sysSystem")).name;
if (!this.station || this.station == "undefined") {
setTimeout(this.getStation, 3000);
}
},
},
};
</script>
<style lang="scss">
.lineFeed {
line-height: 36px;
padding-top: 0px !important;
}
.time-container {
width: 93px;
text-align: center;
// border:1px solid red;
padding: 2px;
.current-time {
font-size: 18px;
font-weight: 500;
color: rgba(255, 255, 255, 0.75);
}
.current-date {
font-size: 12px;
color: rgba(255, 255, 255, 0.75);
}
}
.msg-img {
margin-right: 10px;
img {
width: 37px;
height: 37px;
vertical-align: middle;
}
}
.weather-container {
display: flex;
align-items: center;
.user-img {
width: 37px;
height: 36px;
line-height: 37px;
text-align: center;
font-size: 14px;
color: #a0a8b4;
border: 1px solid #a0a8b4;
border-radius: 50%;
img {
width: 37px;
height: 36px;
vertical-align: middle;
}
}
.weather-info {
width: 90px;
height: 36px;
border: 1px solid;
border-color: #a0a8b4 #a0a8b4 #a0a8b4 transparent;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
transform: translateX(-19px);
div {
text-indent: 25px;
font-size: 12px;
transform: translateY(1px);
font-family: Microsoft YaHei;
font-weight: 400;
color: rgba(255, 255, 255, 0.75);
}
}
}
.drop-down img {
transform: translateX(-15px);
}
.d2-theme-header {
height: 90px !important;
display: flex;
align-items: center;
position: relative !important;
box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.07) !important;
background-image: url(./imgs/d2menu2x.png);
background-size: 100% 100% !important;
}
// 菜单
.menu-header {
width: 100%;
height: 90px;
}
//container
.d2-theme-container {
transform: translateY(60px);
}
// 注册主题
@import "~@/assets/style/theme/register.scss";
// 左上角logo
.d2-layout-header-aside-group
.d2-layout-header-aside-content
.d2-theme-header
.logo-group {
height: 36px;
width: 300px;
display: flex;
border: 2px solid red;
img {
padding-left: 20px;
height: 36px;
&:last-child {
padding-left: 10px;
}
}
}
.mfooter {
width: 100%;
height: 60px;
line-height: 60px;
text-align: center;
font-size: 12px;
font-weight: 400;
color: rgba(255, 255, 255, 0.75);
}
</style>
src/store/modules/d2admin/modules/menu.js
View file @ 8b041c78
......@@ -9,7 +9,7 @@ export default {
// 侧栏菜单
aside: [],
// 侧边栏收缩
// asideCollapse: setting.menu.asideCollapse,
asideCollapse: setting.menu.asideCollapse,
// 接口返回的路由数据
routerList: []
},
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment