Skip to content

E
energyai_vue
Commit 16461ac9 authored by xiexingan's avatar xiexingan
Browse files
Options

设备概览 

Signed-off-by: 's avatarxiexingan <748626312@qq.com>
parent 36d0ac57
Hide whitespace changes
Inline Side-by-side
Showing with 715 additions and 370 deletions
src/assets/style/public.scss
View file @ 16461ac9
......@@ -129,6 +129,9 @@ $el-bg-color-4: #F2F6FC;
}
// ~~~
.margin-lr-20 {
margin: 0 20px;
}
......@@ -145,4 +148,46 @@ $el-bg-color-4: #F2F6FC;
.color-green {
color: #4ECB74;
}
\ No newline at end of file
}
// 首页菜单选中
.theme-d2 .d2-theme-container .d2-theme-container-aside .d2-layout-header-aside-menu-side>.el-menu> .el-menu-item:first-child{
background: transparent ;
}
.en-tabs {
.el-tabs__header {
margin: 0;
}
.el-tabs__active-bar{
bottom:-1px ;
}
.el-tabs__nav-wrap::after {
height: 0;
}
.el-tabs__nav-wrap {
background: #f2f4f5;
.el-tabs__nav {
border-bottom: 1px solid #e5e9ec;
}
}
.el-tabs__header {
border: 1px solid #e5e9ec;
}
.el-tabs__item:nth-child(2) {
padding: 0 30px !important;
}
.el-tabs__item:last-child {
padding: 0 30px !important;
}
.el-tabs__item.is-active {
background: #fff;
}
}
src/assets/style/theme/d2/setting.scss
View file @ 16461ac9
......@@ -50,16 +50,19 @@ $theme-header-item-background-color-active: transparent;
// 侧边栏上的文字颜色
$theme-aside-item-color: $color-text-normal;
$theme-aside-item-background-color: transparent;
// $theme-aside-item-background-color: transparent;
$theme-aside-item-background-color: #F2FAFF;
// 侧边栏上的项目在 hover 时
$theme-aside-item-color-hover: #2f74ff;
$theme-aside-item-background-color-hover: rgba(#FFF, .5);
$theme-aside-item-color-hover: rgba(#fff,1);
$theme-aside-item-background-color-hover: rgba(#21ACFC, .9);
// 侧边栏上的项目在 focus 时
$theme-aside-item-color-focus: #2f74ff;
$theme-aside-item-color-focus: #21ACFC;
$theme-aside-item-background-color-focus: rgba(#FFF, .5);
// 侧边栏上的项目在 active 时
$theme-aside-item-color-active: #2f74ff;
$theme-aside-item-background-color-active: rgba(#FFF, .5);
$theme-aside-item-color-active: #fff;
// $theme-aside-item-background-color-active: rgba(#FFF, .5);
$theme-aside-item-background-color-active: #21ACFC;
// 侧边栏菜单为空的时候显示的元素
$theme-aside-menu-empty-icon-color: $color-text-normal;
......
src/assets/style/theme/theme.scss
View file @ 16461ac9
......@@ -206,7 +206,7 @@
}
&:hover {
color: $theme-aside-item-color-hover;
background: $theme-aside-item-background-color-hover;
background: $theme-aside-item-background-color-hover !important;
i {
color: $theme-aside-item-color-hover;
}
......@@ -220,7 +220,7 @@
}
&.is-active {
color: $theme-aside-item-color-active;
background: $theme-aside-item-background-color-active;
background: $theme-aside-item-background-color-active !important;
i {
color: $theme-aside-item-color-active;
}
......@@ -230,7 +230,7 @@
.el-submenu {
.el-submenu__title {
color: $theme-aside-item-color;
background: $theme-aside-item-background-color;
background:$theme-aside-item-color-active;
i {
color: $theme-aside-item-color;
}
......
src/layout/header-aside/components/header-user/index.vue
View file @ 16461ac9
<template>
<div >
<div title="修改密码" class="msg-img user-warp" @click="editPasword" style="display:flex;">
<div class="user-info">
<span class="item" style='margin-top:2px;'>{{info.userName}}</span>
<span class="item">{{info.name}}</span>
</div>
<div>
<div title="修改密码" class="msg-img user-warp" @click="editPasword" style="display:flex;">
<img src="../../imgs/user.png" alt="">
<div class="user-info">
<span class="item" style='margin-top:2px;'>{{info.userName}}</span>
<span class="item">{{info.name}}</span>
</div>
<img src="../../imgs/user.png" alt="">
</div>
</div>
<!-- <span class="btn-text">你好， {{info.name}}</span>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item @click.native="editPasword">
......@@ -19,27 +19,25 @@
注销
</el-dropdown-item>
</el-dropdown-menu> -->
<el-dialog title="修改密码"
:visible.sync="editPaswDialog" @close="closeEditPasw"
width="50%">
<el-dialog title="修改密码" :visible.sync="editPaswDialog" @close="closeEditPasw" width="50%">
<div slot='title' class="title-bold">
<span>修改密码</span>
</div>
<el-form :model="editPasForm" :rules="fromrule" ref="editPasRef">
<el-form-item label="用户名" :label-width="formLabelWidth">
<el-input v-model="editPasForm.username" disabled></el-input>
</el-form-item>
<el-form-item label="原密码" prop="oldpsw" :label-width="formLabelWidth" >
<el-input v-model="editPasForm.oldpsw" autocomplete="off" type='password' placeholder='请输入原密码' @input='e => editPasForm.oldpsw = inputMe(e)'></el-input>
</el-form-item>
<el-form-item label="新密码" prop="newpas" :label-width="formLabelWidth" >
<el-input v-model="editPasForm.newpas" autocomplete="off" type='password' placeholder='请输入新密码' @input='e => editPasForm.newpas = inputMe(e)'></el-input>
</el-form-item>
<el-form-item label="密码确认" prop="pwd" :label-width="formLabelWidth" >
<el-input v-model="editPasForm.pwd" autocomplete="off" type='password' placeholder='请再次输入新密码' @input='e => editPasForm.pwd = inputMe(e)'></el-input>
</el-form-item>
</el-form>
<div slot="footer" align='center'>
<el-form :model="editPasForm" :rules="fromrule" ref="editPasRef">
<el-form-item label="用户名" :label-width="formLabelWidth">
<el-input v-model="editPasForm.username" disabled></el-input>
</el-form-item>
<el-form-item label="原密码" prop="oldpsw" :label-width="formLabelWidth">
<el-input v-model="editPasForm.oldpsw" autocomplete="off" type='password' placeholder='请输入原密码' @input='e => editPasForm.oldpsw = inputMe(e)'></el-input>
</el-form-item>
<el-form-item label="新密码" prop="newpas" :label-width="formLabelWidth">
<el-input v-model="editPasForm.newpas" autocomplete="off" type='password' placeholder='请输入新密码' @input='e => editPasForm.newpas = inputMe(e)'></el-input>
</el-form-item>
<el-form-item label="密码确认" prop="pwd" :label-width="formLabelWidth">
<el-input v-model="editPasForm.pwd" autocomplete="off" type='password' placeholder='请再次输入新密码' @input='e => editPasForm.pwd = inputMe(e)'></el-input>
</el-form-item>
</el-form>
<div slot="footer" align='center'>
<el-button type="primary" @click="cancel" size="medium">取 消</el-button>
<el-button type="primary" @click="saveEditPas" size="medium">确 定</el-button>
</div>
......@@ -78,12 +76,15 @@ export default {
},
fromrule: {
newpas: [
{ validator: validatePassword, trigger: 'blur' },
{ min: 1, max: 30, message: '长度在 1 到 50 个字符', trigger: 'blur' }
{ validator: validatePassword, trigger: 'blur' },
{
min: 1,
max: 30,
message: '长度在 1 到 50 个字符',
trigger: 'blur'
}
],
pwd: [
{ validator: validateComfirmPassword, trigger: 'blur' }
]
pwd: [{ validator: validateComfirmPassword, trigger: 'blur' }]
}
}
},
......@@ -91,18 +92,14 @@ export default {
this.editPasForm.username = this.info.name
},
computed: {
...mapState('d2admin/user', [
'info'
])
...mapState('d2admin/user', ['info'])
},
methods: {
...mapActions('d2admin/account', [
'logout'
]),
...mapActions('d2admin/account', ['logout']),
/**
* @description 登出
*/
logOff () {
logOff() {
this.logout({
vm: this,
confirm: true
......@@ -118,7 +115,7 @@ export default {
})
},
saveEditPas() {
this.$refs.editPasRef.validate(valid => {
this.$refs.editPasRef.validate((valid) => {
if (valid) {
this.$http({
url: this.$http.adornUrl('/sys/user/password'),
......@@ -146,7 +143,7 @@ export default {
})
},
closeEditPasw() {
this.editPaswDialog = false
this.editPaswDialog = false
},
cancel() {
this.$confirm('确认取消?', '修改密码', {
......@@ -155,7 +152,7 @@ export default {
type: 'warning'
})
.then(() => {
this.editPaswDialog = false
this.editPaswDialog = false
})
.catch(() => {
this.$message({
......@@ -168,29 +165,31 @@ export default {
}
</script>
<style lang="scss" scoped>
.user-warp{
.user-info{
width: 84px;
.user-warp {
.user-info {
width: 93px;
height: 36px;
background: url(../../imgs/subwayBg.png);
background-size: 100% 100%;
text-align:center;
border: 1px solid;
border-color: #a0a8b4 #a0a8b4 #a0a8b4 transparent;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
transform: translateX(-19px);
text-align: center;
text-indent: 10px;
opacity: 0;
float: right;
z-index: -3;
margin-right:-84px;
transition:all .3s ease;
-webkit-transition: all .3s ease;
.item{
transition: all 0.3s ease;
-webkit-transition: all 0.3s ease;
.item {
display: block;
padding-right:10px;
font-size: 12px;
font-family: Microsoft YaHei;
font-weight: 400;
color: rgba(255, 255, 255, 0.75);
}
}
}
}
.user-warp:hover .user-info{
opacity: 1;
......@@ -198,5 +197,4 @@ export default {
z-index: 1;
}
</style>
src/layout/header-aside/imgs/logo2x.png
View replaced file @ 36d0ac57 View file @ 16461ac9
src/layout/header-aside/imgs/logo2x.png

31.2 KB | W: | H:

src/layout/header-aside/imgs/logo2x.png

8.89 KB | W: | H:

src/layout/header-aside/imgs/logo2x.png
src/layout/header-aside/imgs/logo2x.png
src/layout/header-aside/imgs/logo2x.png
src/layout/header-aside/imgs/logo2x.png
  • 2-up
  • Swipe
  • Onion skin
src/layout/header-aside/layout.vue
View file @ 16461ac9
<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" flex-box="0" flex>
<div class="logo-group" :style="{width: asideWidth}" flex-box="0">
<img src="./imgs/logo2x.png">
<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" flex-box="0" flex>
<div class="logo-group" flex-box="0" style="margin-left:30px">
<img src="./imgs/train.png" style="width:50px;height:50px" />
<img src="./imgs/energy_text.png" />
</div>
<div style="width: 100%">
<div flex-box="1"></div>
<!-- 顶栏右侧 -->
<div class="d2-header-right">
<div
class="time-container"
style="padding-right: 26px; text-align: unset"
>
<div class="current-time">{{ time | formatDate }}</div>
<div class="current-date">{{ time | formatDate2 }}</div>
</div>
<div class="subway-container" style="margin-right:43px">
<div class="subway-info" style="transform: rotate(180deg)">
<!-- <span :class="station.length < 6 ? 'lineFeed' : ''">{{
station
}}</span> -->
</div>
<div style="display: flex; position: absolute">
<div
style="
background: #fff;
position: relative;
top: -1px;
left: -17px;
text-align: center;
font-size: 12px;
width: 35px;
height: 35px;
border-radius: 50%;
line-height: 35px;
"
>
室内
</div>
<div style='width:100%;'>
<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="subway-container">
<div class="subway-info">
<span :class="station.length < 6 ? 'lineFeed' : ''">{{station }}</span>
</div>
<div class="user-img"><img src="./imgs/subway.png" /></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
style="
font-size: 12px;
color: #fff;
position: relative;
left: -8px;
"
>
<div>温度:20℃</div>
<div>湿度:60%</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:asideWidth,
opacity: this.searchActive ? 0.5 : 1
}">
<d2-menu-side />
<div class="subway-container" >
<div class="subway-info" style="transform: rotate(180deg)">
<!-- <span :class="station.length < 6 ? 'lineFeed' : ''">{{
station
}}</span> -->
</div>
<div style="display: flex; position: absolute">
<div
style="
background: #fff;
position: relative;
top: -1px;
left: -17px;
text-align: center;
font-size: 12px;
width: 35px;
height: 35px;
border-radius: 50%;
line-height: 35px;
"
>
室外
</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
style="
font-size: 12px;
color: #fff;
position: relative;
left: -8px;
"
>
<div>晴:20℃</div>
<div>湿度:60%</div>
</div>
</div>
</div>
<div style="z-index:9999!important;user-select:none;" class="mfooter">
Copyright (C) 2009-2010. XXXXX信息工程有限公司 蜀ICP备1202XXXX号-1
电话：86-028-689XXXX 传真：86-028-6893XXXX
</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: 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) 2009-2010. XXXXX信息工程有限公司 蜀ICP备1202XXXX号-1
电话：86-028-689XXXX 传真：86-028-6893XXXX
</div>
</div>
</div>
</template>
<script>
......@@ -74,245 +143,245 @@ 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: ''
}
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}`
},
mounted() {
this.getStation()
this.getDate()
this.countNum = this.size
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'
}),
/**
* @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()
},
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} `
}
...mapActions('d2admin/account', ['logout']),
/**
* @description 登出
*/
logOff() {
this.logout({
vm: this,
confirm: true
})
},
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'
}),
/**
* @description 最外层容器的背景图片样式
*/
styleLayoutMainGroup() {
return {
// ...(this.themeActiveSetting.backgroundImage
// ? {
// backgroundImage: `url('${this.$baseUrl}${this.themeActiveSetting.backgroundImage}')`
// }
// : {})
}
}
getDate() {
let _this = this
this.timer = setInterval(() => {
_this.time = new Date()
}, 1000)
},
watch: {
size(val) {
this.countNum = val
// out() {
// this.$router.push('/')
// },
toAlarms() {
this.header.forEach((res) => {
if (res.path === '/alarms') {
this.$router.push({ path: res.list[0].path })
}
})
},
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)
}
}
//读取站点名称
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;
line-height: 36px;
padding-top: 0px !important;
}
.time-container {
width: 93px;
text-align: right;
// border:1px solid red;
padding: 2px;
.current-time {
font-size: 18px;
font-weight: 500;
color: rgba(255, 255, 255, 0.75);
}
width: 93px;
text-align: right;
// 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);
}
.current-date {
font-size: 12px;
color: rgba(255, 255, 255, 0.75);
}
}
.msg-img {
margin-right: 10px;
img {
width: 37px;
height: 36px;
vertical-align: middle;
}
margin-right: 10px;
img {
width: 37px;
height: 36px;
vertical-align: middle;
}
}
.subway-container {
display: flex;
align-items: center;
margin-right: 10px;
display: flex;
align-items: center;
margin-right: 10px;
.user-img {
img {
width: 37px;
height: 36px;
vertical-align: middle;
}
.user-img {
img {
width: 37px;
height: 36px;
vertical-align: middle;
}
}
.subway-info {
width: 84px;
height: 36px;
background: url(./imgs/subwayBg.png);
background-size: 100% 100%;
transform: translateX(12px);
text-align: right;
span {
display: inline-block;
height: 36px;
padding-top: 2px;
padding-right: 16px;
font-size: 12px;
font-family: Microsoft YaHei;
font-weight: 400;
color: rgba(255, 255, 255, 0.75);
}
.subway-info {
width: 84px;
height: 36px;
background: url(./imgs/subwayBg.png);
background-size: 100% 100%;
transform: translateX(12px);
text-align: right;
span {
display: inline-block;
height: 36px;
padding-top: 2px;
padding-right: 16px;
font-size: 12px;
font-family: Microsoft YaHei;
font-weight: 400;
color: rgba(255, 255, 255, 0.75);
}
}
}
.drop-down img {
transform: translateX(-15px);
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;
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;
width: 100%;
height: 90px;
}
//container
.d2-theme-container {
transform: translateY(60px);
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
img {
height: 40px;
padding: 0 20px 0 10px;
width: 300px;
vertical-align: middle;
.d2-layout-header-aside-content
.d2-theme-header
.logo-group
img {
height: 40px;
padding: 0 20px 0 10px;
width: 300px;
vertical-align: middle;
}
.mfooter {
width: 100%;
height: 60px;
line-height: 60px;
text-align: center;
font-size: 12px;
font-weight: 400;
color: rgba(255, 255, 255, 0.75);
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/pages/analysis/energy/page.vue
View file @ 16461ac9
......@@ -2,27 +2,53 @@
<div class="energy-page">
<cardList cardListTitle="能耗数据分析">
<div slot="right" >
<span
<!-- <span
:class="activeIndex === index ? 'active-hight-linght' : ''"
class="date-text"
@click="activehandle(item, index)"
v-for="(item, index) in dateList"
:key="item.value"
>{{ item.label }}</span
>
<el-date-picker
> -->
<!-- <el-date-picker
size="mini"
type="daterange"
range-separator="～"
start-placeholder="开始日期"
end-placeholder="结束日期"
> -->
<!-- </el-date-picker> -->
<!-- <i style=" padding-left:20px;padding-right: 20px;color:#21acfc" class="el-icon-s-unfold"></i> -->
<!-- <i class="el-icon-printer" style="color:#21acfc"></i> -->
<el-button size="mini" type="primary" @click="toPowerPage">图形/列表</el-button>
</div>
<div slot="content" >
<div >
<!-- <enTabs :tabList="energyTabList"></enTabs> -->
<el-tabs class="en-tabs" v-model="activetap" >
<el-row style="padding-top:15px">
<el-col :span="10">
<span>时间范围：</span>
<el-date-picker
size="mini"
type="daterange"
range-separator="～"
start-placeholder="开始日期"
end-placeholder="结束日期"
>
</el-date-picker>
<i style=" padding-left:20px;padding-right: 20px;color:#21acfc" class="el-icon-s-unfold"></i>
<i class="el-icon-printer" style="color:#21acfc"></i>
</div>
<div slot="content" style="padding: 24px 28px 20px 23px">
<div style="margin-bottom: 20px">
<enTabs :tabList="energyTabList"></enTabs>
</el-col>
<el-col :span="4">
<el-button type="primary" size="mini" icon="el-icon-search">查询</el-button>
</el-col>
</el-row>
<el-tab-pane
:label="item.label"
:name="item.value"
v-for="(item, index) in energyTabList"
:key="index"
></el-tab-pane>
</el-tabs>
</div>
<el-row>
<el-col :span="24">
......@@ -35,21 +61,22 @@
</template>
<script>
import cardList from "../../home/compontents/cardList";
import enTabs from '../../eq/hall/components/enTabs'
import cardList from "../../components/cardList";
import enTabs from "../../components/enTabs";
// import enTable from '../../eq/hall/components/enTable'
import energyChart from '../../home/compontents/energyTotalCharts'
import energyChart from "../../components/energyTotalCharts";
export default {
name: "energypage",
components: {
cardList,
enTabs,
energyChart
energyChart,
},
data() {
return {
activeIndex: 1,
dateList: [
activeIndex: 1,
activetap: "01",
dateList: [
// {
// value: "01",
// label: "时段",
......@@ -71,8 +98,8 @@ export default {
label: "全年",
},
],
energyTabList:[
{
energyTabList: [
{
value: "01",
label: "全部",
},
......@@ -88,33 +115,37 @@ export default {
value: "04",
label: " 多联新风",
},
]
],
};
},
methods: {
methods: {
activehandle(item, index) {
this.activeIndex = index;
},
toPowerPage(){
this.$router.push({
path:'/kb/power'
})
},
},
};
</script>
<style lang="scss">
.energy-page{
padding:10px 10px 40px 10px;
.el-input__inner {
// height: 30px;
.energy-page {
height: 100%;
padding: 0px 0px 40px 0px;
.date-text {
padding-right: 20px;
font-size: 14px;
font-family: Microsoft YaHei;
font-weight: 400;
color: #1d1d1d;
cursor: pointer;
}
.date-text {
padding-right: 20px;
font-size: 14px;
font-family: Microsoft YaHei;
font-weight: 400;
color: #1d1d1d;
cursor: pointer;
}
.active-hight-linght {
color: #21acfc;
}
.active-hight-linght {
color: #21acfc;
}
}
</style>
src/pages/analysis/fault/index.vue
View file @ 16461ac9
<template lang='pug'>
card-warp(title="故障报警分析")
div(slot="right")
span 时间范围：
el-date-picker.margin-lr-20(
size='mini'
v-model="dateValue",
type="daterange",
align="right",
unlink-panels,
range-separator="至",
start-placeholder="开始日期",
end-placeholder="结束日期",
:picker-options="pickerOptions"
)
el-button(size='mini' type='primary') 查询
card-warp(title="故障报警分析" height='45px' showBackground)
div(slot="content")
el-form(:inline='true' size="mini" )
el-form-item(label='时间范围：')
el-date-picker(
size='mini'
v-model="dateValue",
type="daterange",
align="right",
unlink-panels,
range-separator="至",
start-placeholder="开始日期",
end-placeholder="结束日期",
:picker-options="pickerOptions"
)
el-button(size='mini' type='primary') 查询
.echartsWarp(width="100%", flex)
//- div
//- .title 设备故障统计
......@@ -98,7 +98,7 @@ export default {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
height: calc(100vh - 260px);
height: calc(100vh - 280px);
> div {
width: 47%;
// height: calc(90% / 2);
......
src/pages/analysis/indoor/index.vue
View file @ 16461ac9
<template lang="pug">
card-warp(title="室内气象分析" height='45px' )
card-warp(title="室内气象分析" height='45px' showBackground)
div(slot="right")
//- span 时间范围：
//- el-date-picker.margin-lr-20(
......
src/pages/analysis/outdoor/index.vue
View file @ 16461ac9
<template lang="pug">
card-warp(title="室外气象分析" height='45px' )
card-warp(title="室外气象分析" height='45px' showBackground)
div(slot="right")
router-link.margin-lr-20(:to="{name:'kb-indoor'}")
el-button(size='mini' type='primary') 图形 / 列表
//- router-link.margin-lr-20(:to="{name:'kb-indoor'}")
//- el-button(size='mini' type='primary') 图形 / 列表
div(slot="content", style="height: 90%")
el-tabs.myTabs(v-model="activeName", @tab-click="tabClick")
el-tab-pane(label="候车室区域", name="1")
......
src/pages/home/compontents/cardList.vue → src/pages/components/cardList.vue
View file @ 16461ac9
......@@ -6,8 +6,10 @@
<slot name="right" />
</div>
</div>
<div class="card-list-content">
<slot name="content" />
</div>
</div>
</template>
......@@ -30,6 +32,7 @@ export default {
width: 100%;
height: 100%;
background: #fff;
box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
&-line {
display: flex;
justify-content: space-between;
......@@ -60,5 +63,9 @@ export default {
// height: 16px;
// background: #1890ff;
// }
.card-list-content{
padding:20px;
height: calc( 155 - 40px );
}
}
</style>
src/pages/components/enTable.vue 0 → 100644
View file @ 16461ac9
<template>
<div class="en-table">
<el-table
border
stripe
:data="tableData"
style="width: 100%"
:header-cell-style="{
background: 'rgba(0, 151, 255, 0.08)',
color: '#333333',
}"
>
<el-table-column align="center" label="序号" width="100">
<template slot-scope="scope">
{{ scope.$index + 1 }}
</template>
</el-table-column>
<template v-for="(item, index) in tableColums">
<el-table-column
:key="index"
:prop="item.prop"
:label="item.label"
:width="item.width"
:align="item.align"
>
</el-table-column>
</template>
<el-table-column align="center" label="操作" width="150" >
<template slot-scope="scope" >
<slot name='operation' :scope='scope'></slot>
</template>
</el-table-column>
</el-table>
<div
v-if="isShowPage"
style="
display: flex;
justify-content: flex-end;
align-items: center;
line-height: 3;
"
>
<div class="record-color marg_r_18">共34860条记录</div>
<div class="record-color marg_r_8">共20页</div>
<div class="record-color">每页显示</div>
<!-- background -->
<el-pagination layout="sizes, prev, pager, next" :total="1000">
</el-pagination>
</div>
</div>
</template>
<script >
export default {
name: "enTable",
props: {
// ["", "tableColums",'isShowOp'.toString
tableData:{
type:Array,
},
tableColums:{
type:Array,
},
isShowOp:{
type:Boolean,
defaul:false,
},
isShowPage:{
defaul:true,
},
isEdit:{
defaul:true,
}
},
data() {
return {};
},
methods:{
handleClick(){
this.$emit('handleBtnClick')
}
}
};
</script>
<style lang="scss">
.record-color {
color: #0097ff;
}
.marg_r_18 {
margin-right: 18px;
}
.marg_r_8 {
margin-right: 8px;
}
.en-table{
.el-pagination.is-background .btn-next, .el-pagination.is-background .btn-prev, .el-pagination.is-background .el-pager li{
margin: 0 !important;
}
/deep/.el-pagination.is-background .el-pager li:not(.disabled).active {
color: #32a5ea !important;
background-color: red !important;
}
}
</style>
src/pages/eq/hall/components/enTabs.vue → src/pages/components/enTabs.vue
View file @ 16461ac9
<template>
<template >
<div class="en-tabs">
<ul class="ul-wrap">
<li
......@@ -11,24 +11,35 @@
{{ item.label }}
</p>
</li>
</ul>
</div>
</template>
<script lang="ts">
<script >
import { Tabs } from 'element-ui';
export default {
name: "elTabs",
props:['tabList'],
props: ["tabList"],
data() {
return {
isActiveIndex:0,
isActiveIndex: 0,
activeName: 'second',
};
},
methods: {
methods: {
tabHandle(item, index) {
this.isActiveIndex = index;
this.$emit('tabHandle')
// this.$emit("tabHandle");
},
},
};
......@@ -36,40 +47,37 @@ export default {
<style scoped lang="scss">
.en-tabs{
.show-bar-border {
border-bottom: 2px solid #0097ff;
}
.ul-wrap {
list-style: none;
margin: 0;
padding: 0;
display: flex;
color: #666;
background: rgba(229, 233, 236, 0.5);
border: 1px solid #e5e9ec;
font-size: 14px;
li {
position: relative;
padding: 0 71px;
cursor: pointer;
p {
margin: 0;
padding: 0;
padding-bottom: 14px;
padding-top: 15px;
box-sizing: border-box;
}
}
.isActive {
background: #fff;
color: #0097ff;
.en-tabs {
.show-bar-border {
border-bottom: 2px solid #0097ff;
}
}
// .ul-wrap {
// list-style: none;
// margin: 0;
// padding: 0;
// display: flex;
// color: #666;
// background: rgba(229, 233, 236, 0.5);
// border: 1px solid #e5e9ec;
// font-size: 14px;
// li {
// position: relative;
// padding: 0 71px;
// cursor: pointer;
// p {
// margin: 0;
// padding: 0;
// padding-bottom: 14px;
// padding-top: 15px;
// box-sizing: border-box;
// }
// }
// .isActive {
// background: #fff;
// color: #0097ff;
// }
// }
}
......
src/pages/home/compontents/myPies.vue → src/pages/components/myPies.vue
View file @ 16461ac9
......@@ -13,6 +13,7 @@ export default {
};
},
mounted() {
this.initPie();
},
......
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