kakapay/src/views/data-view/components/data-view-layout.vue

<template>
  <div
    class="data-view"
    :style="{backgroundImage: `url(${DataViewBG})`}"
  >
    <!-- 头部部分  -->
    <div
      class="data-view-header"
      :style="{backgroundImage: `url(${DataViewHeaderBg})`}"
    >
      <div class="identifier data-view-header-item">
        <img style="width: 23px; height: 23px;" :src="icon" alt="">
        <span style="padding-left: 10px;">{{identifier}}</span>
      </div>
      <h1 class="YouSheBiaoTiHei data-view-header-title data-view-header-item" style="text-align: center;">{{ title }}</h1>
      <div class="data-view-header-time data-view-header-item">
        <img @click="$emit('leave')" style="width: 26px; height: 26px; cursor: pointer;" :src="ICUNFullscreen" alt="">
        <div style="width: 26px;"/>
        <span>{{date}}</span>
      </div>
    </div>

    <!-- 内容  -->
    <div class="data-view-body">
      <!-- 左边的表格     -->
      <div class="left-table">
        <slot name="left-table"/>
      </div>

      <!-- 中间的内容     -->
      <div class="middle">
        <!-- 中间的图表       -->
        <div class="middle-charts">
          <slot name="middle-charts"></slot>
        </div>
        <!-- 中间的表格      -->
        <div class="middle-table">
          <slot name="middle-table"/>
        </div>
      </div>

      <!-- 右边的表格     -->
      <div class="right-table">
        <slot name="right-table"/>
      </div>
    </div>

  </div>
</template>

<script>
import DataViewBG from '@/assets/images/data-view-bg.png'
import DataViewHeaderBg from '@/assets/images/data-view-header-bg.png'
import ICUNFullscreen from '@/assets/images/ic_unfullscreen.png'
import { getWeek, parseTime } from '@/utils/ruoyi'


export default {
  components: {  },
  props: {
    // 左上角的标识
    identifier: {
      type: String
    },
    // 左上角的图标
    icon: {
      type: String
    },
    // 大标题
    title: {
      type: String
    }
  },
  data() {
    return {
      ICUNFullscreen,
      DataViewBG,
      DataViewHeaderBg,
      date: parseTime(new Date(), `{y}-{m}-{d} {h}:{i}:{s}`) + " " + getWeek()
    }
  },
  mounted() {
    // 每秒更新一次时间
    setInterval(() => {
      this.date = parseTime(new Date(), `{y}-{m}-{d} {h}:{i}:{s}`) + " " + getWeek()
    }, 1000)
  }
}
</script>
<style scoped>
.data-view {
  height: 100vh;
  width: 100vw;
  background-size: cover;
  background-repeat: no-repeat;
  display: flex;
  flex-direction: column;

  .data-view-header {
    display: flex;
    justify-content: space-between;
    background-size: contain;
    background-repeat: no-repeat;
    height: 6vw;
    padding: 0 20px 0 20px;

    .data-view-header-item {
      width: 33%;
    }

    .identifier {
      font-family: 'PingFang SC';
      font-style: normal;
      font-weight: 500;
      font-size: 24px;
      line-height: 25px;
      color: #FFFFFF;
      display: flex;
      flex-direction: row;
      margin-top: 14px;
    }

    .data-view-header-time {
      font-family: 'PingFang SC';
      font-style: normal;
      font-weight: 500;
      font-size: 18px;
      line-height: 25px;
      color: #FFFFFF;
      display: flex;
      flex-direction: row;
      margin-top: 14px;
      justify-content: flex-end;
    }

    .data-view-header-title {
      color: #D4DCFF;
      font-size: 2.5vw;
    }

  }

  .data-view-body {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin-top: 40px;
    padding: 0 20px 0 20px;
  }

  .left-table {
    width: 23.5%;
  }

  .middle {
    width: 50%;

    .middle-charts {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
    }

    .middle-table {
      margin-top: 0.5vh;
    }

  }


  .right-table {
    width: 23.5%;

  }
}


</style>