CN-1563 feat: 功能整合
This commit is contained in:
chenjinsong
241
src/components/common/SimpleLoading.vue
Normal file
241
src/components/common/SimpleLoading.vue
Normal file
@@ -0,0 +1,241 @@
|
||||
<template>
|
||||
<Transition name="fade">
|
||||
<div class="simple-loading" :class="placementClass" v-show="loading">
|
||||
<div class="simple-loading__box" :class="sizeClass">
|
||||
<div class="simple-loading__inner">
|
||||
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Transition>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'simpleLoading',
|
||||
props: {
|
||||
loading: Boolean,
|
||||
size: {
|
||||
type: String,
|
||||
default: 'default' // large default small
|
||||
},
|
||||
placement: {
|
||||
type: String,
|
||||
default: 'center' // top/top-start/top-end/bottom/bottom-start/bottom-end/left/left-start/left-end/right/right-start/right-end/center
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
showLoading: false
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
startLoading () {
|
||||
this.showLoading = true
|
||||
},
|
||||
endLoading () {
|
||||
this.showLoading = false
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
loading: {
|
||||
deep: true,
|
||||
immediate: true,
|
||||
handler (n) {
|
||||
this.showLoading = n
|
||||
}
|
||||
}
|
||||
},
|
||||
setup (props) {
|
||||
let sizeClass = ''
|
||||
switch (props.size) {
|
||||
case 'large': {
|
||||
sizeClass = 'simple-loading--large'
|
||||
break
|
||||
}
|
||||
case 'small': {
|
||||
sizeClass = 'simple-loading--small'
|
||||
break
|
||||
}
|
||||
default: {
|
||||
sizeClass = 'simple-loading--default'
|
||||
break
|
||||
}
|
||||
}
|
||||
let placementClass = ''
|
||||
const placements = ['top', 'top-start', 'top-end', 'bottom', 'bottom-start', 'bottom-end', 'left', 'left-start', 'left-end', 'right', 'right-start', 'right-end', 'center']
|
||||
if (placements.indexOf(props.placement) > -1) {
|
||||
placementClass = `simple-loading--${props.placement}`
|
||||
}
|
||||
return {
|
||||
placementClass,
|
||||
sizeClass
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss">
|
||||
.simple-loading {
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
|
||||
&.simple-loading--top, &.simple-loading--top-start, &.simple-loading--top-end, &.simple-loading--left-start, &.simple-loading--right-start {
|
||||
top: 2px
|
||||
}
|
||||
&.simple-loading--bottom, &.simple-loading--bottom-start, &.simple-loading--bottom-end, &.simple-loading--left-end, &.simple-loading--right-end {
|
||||
bottom: 2px;
|
||||
}
|
||||
&.simple-loading--left, &.simple-loading--top-start, &.simple-loading--bottom-start, &.simple-loading--left-start, &.simple-loading--left-end {
|
||||
left: 2px
|
||||
}
|
||||
&.simple-loading--right, &.simple-loading--top-end, &.simple-loading--bottom-end, &.simple-loading--right-start, &.simple-loading--right-end {
|
||||
right: 2px;
|
||||
}
|
||||
&.simple-loading--top, &.simple-loading--bottom {
|
||||
left: 50%;
|
||||
}
|
||||
&.simple-loading--left, &.simple-loading--right {
|
||||
top: 50%;
|
||||
}
|
||||
&.simple-loading--top {
|
||||
.simple-loading__box {
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
}
|
||||
&.simple-loading--left {
|
||||
.simple-loading__box {
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
}
|
||||
&.simple-loading--top-end, &.simple-loading--right-start {
|
||||
.simple-loading__box {
|
||||
transform: translateX(-100%);
|
||||
}
|
||||
}
|
||||
&.simple-loading--right {
|
||||
.simple-loading__box {
|
||||
transform: translate(-100%, -50%);
|
||||
}
|
||||
}
|
||||
&.simple-loading--bottom-start, &.simple-loading--left-end {
|
||||
.simple-loading__box {
|
||||
transform: translateY(-100%);
|
||||
}
|
||||
}
|
||||
&.simple-loading--bottom {
|
||||
.simple-loading__box {
|
||||
transform: translate(-50%, -100%);
|
||||
}
|
||||
}
|
||||
&.simple-loading--bottom-end, &.simple-loading--right-end {
|
||||
.simple-loading__box {
|
||||
transform: translate(-100%, -100%);
|
||||
}
|
||||
}
|
||||
&.simple-loading--center {
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
|
||||
.simple-loading__box {
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes simple-loading__inner {
|
||||
0% { opacity: 1 }
|
||||
100% { opacity: 0 }
|
||||
}
|
||||
|
||||
.simple-loading__box {
|
||||
position: absolute;
|
||||
display: inline-block;
|
||||
overflow: hidden;
|
||||
background: transparent;
|
||||
|
||||
&.simple-loading--default {
|
||||
width: 27px;
|
||||
height: 27px;
|
||||
|
||||
.simple-loading__inner {
|
||||
div {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
border-radius: 3px / 3px;
|
||||
transform-origin: 3px 13px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.simple-loading--small {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
|
||||
.simple-loading__inner {
|
||||
div {
|
||||
width: 5px;
|
||||
height: 5px;
|
||||
border-radius: 3px / 3px;
|
||||
transform-origin: 0 9px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.simple-loading__inner {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
transform: translateZ(0) scale(1);
|
||||
backface-visibility: hidden;
|
||||
transform-origin: 0 0;
|
||||
|
||||
div {
|
||||
left: 10px;
|
||||
top: 0;
|
||||
position: absolute;
|
||||
animation: simple-loading__inner linear 1s infinite;
|
||||
background: #3c76cc;
|
||||
box-sizing: content-box;
|
||||
}
|
||||
div:nth-child(1) {
|
||||
transform: rotate(0deg);
|
||||
animation-delay: -0.875s;
|
||||
background: #3c76cc;
|
||||
}
|
||||
div:nth-child(2) {
|
||||
transform: rotate(45deg);
|
||||
animation-delay: -0.75s;
|
||||
background: #3c76cc;
|
||||
}
|
||||
div:nth-child(3) {
|
||||
transform: rotate(90deg);
|
||||
animation-delay: -0.625s;
|
||||
background: #3c76cc;
|
||||
}
|
||||
div:nth-child(4) {
|
||||
transform: rotate(135deg);
|
||||
animation-delay: -0.5s;
|
||||
background: #3c76cc;
|
||||
}
|
||||
div:nth-child(5) {
|
||||
transform: rotate(180deg);
|
||||
animation-delay: -0.375s;
|
||||
background: #3c76cc;
|
||||
}
|
||||
div:nth-child(6) {
|
||||
transform: rotate(225deg);
|
||||
animation-delay: -0.25s;
|
||||
background: #3c76cc;
|
||||
}
|
||||
div:nth-child(7) {
|
||||
transform: rotate(270deg);
|
||||
animation-delay: -0.125s;
|
||||
background: #3c76cc;
|
||||
}
|
||||
div:nth-child(8) {
|
||||
transform: rotate(315deg);
|
||||
animation-delay: 0s;
|
||||
background: #3c76cc;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -47,11 +47,9 @@ export default {
|
||||
methods: {
|
||||
getDate () {
|
||||
// 切换页面进来时，timeFilter时间戳为秒而非毫秒
|
||||
if (JSON.stringify(this.timeFilter.endTime).length < 13) {
|
||||
// eslint-disable-next-line vue/no-mutating-props
|
||||
this.timeFilter.startTime = getMillisecond(this.timeFilter.startTime)
|
||||
// eslint-disable-next-line vue/no-mutating-props
|
||||
this.timeFilter.endTime = getMillisecond(this.timeFilter.endTime)
|
||||
const timeFilter = {
|
||||
startTime: getMillisecond(this.timeFilter.startTime),
|
||||
endTime: getMillisecond(this.timeFilter.endTime)
|
||||
}
|
||||
|
||||
// 给倒三角滑块添加竖线
|
||||
@@ -70,10 +68,10 @@ export default {
|
||||
}
|
||||
|
||||
const myTimeRange = []
|
||||
const timeInterval = this.getTimeInterval(this.timeFilter) // 时间间隔
|
||||
const showTimeInterval = this.showTimeTimeInterval(this.timeFilter) // 显示时间的时间间隔
|
||||
let startTime = this.timeFilter.startTime // 开始时间
|
||||
const firstTime = new Date(this.timeFilter.startTime).getMinutes() // 开始时间的分钟数，作为计算基础
|
||||
const timeInterval = this.getTimeInterval(timeFilter) // 时间间隔
|
||||
const showTimeInterval = this.showTimeTimeInterval(timeFilter) // 显示时间的时间间隔
|
||||
let startTime = timeFilter.startTime // 开始时间
|
||||
const firstTime = new Date(timeFilter.startTime).getMinutes() // 开始时间的分钟数，作为计算基础
|
||||
|
||||
// 根据显示时间间隔计算所需开始时间，如获取3小时的时间，开始时间为第31分钟，则按30分钟开始计算
|
||||
if (showTimeInterval % 5 === 0) {
|
||||
@@ -84,7 +82,7 @@ export default {
|
||||
startTime = startTime - 60 * 1000
|
||||
}
|
||||
|
||||
for (let i = startTime; i <= this.timeFilter.endTime; i += showTimeInterval * 60 * 1000) {
|
||||
for (let i = startTime; i <= timeFilter.endTime; i += showTimeInterval * 60 * 1000) {
|
||||
const obj = this.formatTime(i, showTimeInterval, timeInterval)
|
||||
if (obj) {
|
||||
myTimeRange.push({ time: obj.time, time1: obj.time1, stamp: i, showFlag: obj.showFlag })
|
||||
|
||||
Reference in New Issue
Block a user