311 lines
8.1 KiB
Vue
311 lines
8.1 KiB
Vue
<!--
|
||
* @Author: gtz
|
||
* @Date: 2022-01-19 15:58:17
|
||
* @LastEditors: zhp
|
||
* @LastEditTime: 2024-04-22 09:41:21
|
||
* @Description: file content
|
||
* @FilePath: \mt-bus-fe\src\views\OperationalOverview\components\baseContainer\index.vue
|
||
-->
|
||
<template>
|
||
<div class="base-container" ref="baseContainer" :style="{ height: '100%', fontSize: 12 + 'px', padding: 12 + 'px' }"
|
||
:class="[{ 'no-padding': noPadding, 'border-none': !showLine }, 'base-container__' + size]">
|
||
<!-- <div class="base-container" :style="{height: height + 'px', fontSize: 12 + 'px', padding: 12 + 'px'}"> -->
|
||
<template v-if="showLine">
|
||
<div class="line" />
|
||
<div class="line line-vertical" />
|
||
<div class="line line-right" />
|
||
<div class="line line-right-vertical" />
|
||
<div class="line line-bottom" />
|
||
<div class="line line-bottom-vertical" />
|
||
<div class="line line-bottom-right" />
|
||
<div class="line line-bottom-right-vertical" />
|
||
</template>
|
||
|
||
<div class="bar-item">
|
||
<div v-if="title" class="bar-title" ds>
|
||
<span>
|
||
<svg-icon :icon-class="titleIcon" style="font-size: 1em; position: relative; top: .01em" />
|
||
{{ title }}
|
||
</span>
|
||
<!-- <span v-if="showTime" style="font-size: 20px;color:#52FFF8;margin-left: 10px;margin-top: 2px;">
|
||
{{ time2 +'-'+ time }}
|
||
</span> -->
|
||
<span v-if="showTime" style="font-size: 20px;color:#52FFF8;margin-left: 10px;margin-top: 2px;">
|
||
{{ startTime + '-' + endTime }}
|
||
</span>
|
||
</div>
|
||
<!-- <div v-if="true" class="bar-title">
|
||
<span>
|
||
<svg-icon :icon-class="titleIcon" style="font-size: 1em; position: relative; top: .08em" />
|
||
{{ title }}
|
||
</span>
|
||
</div> -->
|
||
<div class="bar-content" :class="{ 'p-0': noContentPadding }">
|
||
<slot />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import moment from "moment";
|
||
export default {
|
||
name: 'BaseContainer',
|
||
props: {
|
||
showLine: {
|
||
type: Boolean,
|
||
default: true
|
||
},
|
||
showTime: {
|
||
type: Boolean,
|
||
default: true
|
||
},
|
||
noPadding: {
|
||
type: Boolean,
|
||
default: false
|
||
},
|
||
showTime: {
|
||
type: Boolean,
|
||
default: false
|
||
},
|
||
showYesTime: {
|
||
type: Boolean,
|
||
default: false
|
||
},
|
||
back: {
|
||
type: String,
|
||
default: ''
|
||
},
|
||
noContentPadding: {
|
||
type: Boolean,
|
||
default: false
|
||
},
|
||
title: {
|
||
type: String,
|
||
default: ''
|
||
},
|
||
titleIcon: {
|
||
type: String,
|
||
default: ''
|
||
},
|
||
height: {
|
||
type: Number,
|
||
default: 200
|
||
},
|
||
baseSize: {
|
||
type: Number,
|
||
default: 12
|
||
},
|
||
beilv: {
|
||
type: Number,
|
||
default: 1
|
||
},
|
||
size: {
|
||
type: String,
|
||
default: ''
|
||
}
|
||
},
|
||
data() {
|
||
return {
|
||
curIndex: 0,
|
||
time: null,
|
||
time2: null,
|
||
startTime: undefined,
|
||
endTime: undefined
|
||
// imgUrl: require(`../../../../assets/img/${this.back}.png`),
|
||
}
|
||
},
|
||
created() {
|
||
},
|
||
mounted () {
|
||
// this.time = this.format(new Date().setHours(7,0,0));
|
||
// // console.log(time);
|
||
// //前一天时间
|
||
let nowTime = new Date
|
||
let hour = nowTime.getHours()
|
||
if (hour > 6) {
|
||
this.startTime = moment(nowTime).format('yyyy.MM.DD') + ' 7点'
|
||
this.endTime = moment(moment(nowTime) + 86400000).format('yyyy.MM.DD') + ' 7点'
|
||
} else {
|
||
this.endTime = moment(nowTime).format('yyyy.MM.DD') + ' 7点'
|
||
this.startTime = moment(moment(nowTime) - 86400000).format('yyyy.MM.DD') + ' 7点'
|
||
}
|
||
// this.yesStartTime = moment(moment(nowTime) - 86400000).format('yyyy.MM.DD') + ' 0点'
|
||
// this.yesEndTime = moment(moment(nowTime) - 86400000).format('yyyy.MM.DD') + ' 24点'
|
||
|
||
// this.time2 = this.format(new Date().setHours(7, 0, 0) - 86400000 * 1);
|
||
// console.log(new Date().setHours(7, 0, 0) - 86400000 * 1);
|
||
},
|
||
methods: {
|
||
// add0(m) {
|
||
// return m < 10 ? '0' + m : m
|
||
// },
|
||
// format(shijianchuo) {
|
||
// //shijianchuo是整数，否则要parseInt转换
|
||
// var time = new Date(shijianchuo);
|
||
// var y = time.getFullYear();
|
||
// var m = time.getMonth() + 1;
|
||
// var d = time.getDate();
|
||
// var h = time.getHours();
|
||
// var mm = time.getMinutes();
|
||
// var s = time.getSeconds();
|
||
// return y + '-' + this.add0(m) + '-' + this.add0(d) + ' ' + h + '时'
|
||
// },
|
||
// changeTab(num) {
|
||
// this.curIndex = num
|
||
// this.$emit('tabSelect', num)
|
||
// },
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
|
||
|
||
|
||
.base-container {
|
||
color: #fff;
|
||
width: 100%;
|
||
// background-color: rgba($color: #061027, $alpha: 0.15);
|
||
position: relative;
|
||
// opacity: calc(.8);
|
||
// border: 2px solid;
|
||
// background: url('../../../../assets/img/energy.png') no-repeat;
|
||
// background-size: 100% 100%;
|
||
&__small {
|
||
background: url(../../../../assets/img/short.png) no-repeat;
|
||
background-size: 100% 100%;
|
||
backdrop-filter: blur(5px);
|
||
}
|
||
// &__small::after {
|
||
// content: "";
|
||
// position: absolute;
|
||
// top: 0;
|
||
// left: 0;
|
||
// filter: blur(20px);
|
||
// z-index: -1;
|
||
// }
|
||
&__middle {
|
||
background: url(../../../../assets/img/middle.png) no-repeat;
|
||
background-size: 100% 100%;
|
||
backdrop-filter: blur(5px);
|
||
}
|
||
|
||
&__large {
|
||
background: url(../../../../assets/img/high.png) no-repeat;
|
||
background-size: 100% 100%;
|
||
backdrop-filter: blur(5px);
|
||
}
|
||
&__eqStatus {
|
||
background: url(../../../../assets/img/large.png) no-repeat;
|
||
background-size: 100% 100%;
|
||
backdrop-filter: blur(5px);
|
||
}
|
||
// &::after {
|
||
// content: " ";
|
||
// // display: block;
|
||
// position: absolute;
|
||
// left: 0;
|
||
// top: 0;
|
||
// right: 0;
|
||
// bottom: 0;
|
||
// // background: inherit;
|
||
// /* 设置模糊，不用 filter */
|
||
// backdrop-filter: blur(5px);
|
||
// z-index: -1;
|
||
// }
|
||
// border-radius: 40px 0px 40px 0px;
|
||
// border-image: linear-gradient(360deg, rgba(157, 246, 254, 0.05), rgba(100, 233, 252, 0.9)) 2 2;
|
||
// .line {
|
||
// position: absolute;
|
||
// border-top: 4px solid #52fff1;
|
||
// width: 2em;
|
||
// top: -0.25em;
|
||
// left: -0.25em;
|
||
// &-vertical {
|
||
// top: calc(-5em / 12);
|
||
// left: calc(-1em / 12);
|
||
// transform: rotate(90deg);
|
||
// transform-origin: left;
|
||
// }
|
||
// &-right {
|
||
// top: -0.25em;
|
||
// right: -0.25em;
|
||
// left: inherit;
|
||
// }
|
||
// &-right-vertical {
|
||
// top: calc(-5em / 12);
|
||
// right: calc(-1em / 12);
|
||
// left: inherit;
|
||
// transform: rotate(-90deg);
|
||
// transform-origin: right;
|
||
// }
|
||
// &-bottom {
|
||
// top: inherit;
|
||
// left: -0.25em;
|
||
// bottom: -0.25em;
|
||
// }
|
||
// &-bottom-vertical {
|
||
// top: inherit;
|
||
// left: calc(-1em / 12);
|
||
// bottom: calc(-5em / 12);
|
||
// transform: rotate(-90deg);
|
||
// transform-origin: left;
|
||
// }
|
||
// &-bottom-right {
|
||
// top: inherit;
|
||
// left: inherit;
|
||
// right: -0.25em;
|
||
// bottom: -0.25em;
|
||
// }
|
||
// &-bottom-right-vertical {
|
||
// top: inherit;
|
||
// left: inherit;
|
||
// right: calc(-1em / 12);
|
||
// bottom: calc(-5em / 12);
|
||
// transform: rotate(90deg);
|
||
// transform-origin: right;
|
||
// }
|
||
// }
|
||
|
||
.bar-item {
|
||
height: 100%;
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
|
||
.bar-title {
|
||
width: 100%;
|
||
color: #ffffff;
|
||
font-size: 24px;
|
||
font-weight: normal;
|
||
letter-spacing: .8px;
|
||
padding: 0.67em 0.67em 0.3em 0.67em;
|
||
display: flex;
|
||
}
|
||
|
||
.bar-content {
|
||
padding: .5em 1em 1em 1em;
|
||
flex: 1 auto;
|
||
position: relative;
|
||
}
|
||
|
||
.no-padding {
|
||
padding: 0;
|
||
}
|
||
|
||
.p-0 {
|
||
padding: 0;
|
||
}
|
||
|
||
&.border-none {
|
||
border: none;
|
||
}
|
||
}
|
||
// .base-container::after{
|
||
// z-index: -1;
|
||
// width: 100%;
|
||
// filter: blur(2px);
|
||
// }
|
||
</style>
|