yudao-dev/src/views/OperationalOverview/components/baseContainer/index.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>