portal-vue/src/views/home/index.vue

<template>
  <div class="home-container">
    <grid-layout
      :layout.sync="layout"
      :col-num="14"
      :row-height="30"
      :is-draggable="false"
      :is-resizable="true"
      :is-mirrored="false"
      :vertical-compact="true"
      :margin="[10, 10]"
      :use-css-transforms="true"
    >
      <!-- <grid-item v-for="item in layout" :key="item.i" :x="item.x" :y="item.y" :w="item.w" :h="item.h" :i="item.i" :style="'display: ' + (item.i === '1' ? 'block' : 'none' )"> -->
      <grid-item v-for="item in layout" :key="item.i" :x="item.x" :y="item.y" :w="item.w" :h="item.h" :i="item.i">
        <component :is="components[item.i]" :ref="components[item.i]" class="card-box" v-bind="componentProps(item.i)" />
      </grid-item>
    </grid-layout>
    <information ref="Information" />
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import VueGridLayout from 'vue-grid-layout'
import Search from './components/Search'
import Message from './components/Message'
import Business from './components/Business'
import System from './components/System'
// import System from './components/System'
import Specification from './components/Specification'
import Link from './components/Link'
import Information from './components/Information'
import Test from './components/Test'

let sseClient

export default {
  name: 'Home',
  components: {
    GridLayout: VueGridLayout.GridLayout,
    GridItem: VueGridLayout.GridItem,
    Search,
    Message,
    Business,
    System,
    Specification,
    Link,
    Information,
    Test
  },
  data() {
    return {
      layout: [
        { 'x': 0, 'y': 0, 'w': 14, 'h': 2, 'i': '0' },
        { 'x': 0, 'y': 2, 'w': 6, 'h': 12, 'i': '1' },
        { 'x': 0, 'y': 14, 'w': 6, 'h': 8, 'i': '2' },
        { 'x': 6, 'y': 2, 'w': 8, 'h': 8, 'i': '3' },
        { 'x': 6, 'y': 10, 'w': 8, 'h': 5, 'i': '4' },
        { 'x': 6, 'y': 15, 'w': 8, 'h': 7, 'i': '5' },
        { 'x': 0, 'y': 21, 'w': 14, 'h': 4, 'i': '6' }
      ],
      components: ['Search', 'Message', 'Business', 'System', 'System', 'Specification', 'Link']
    }
  },
  computed: {
    ...mapGetters([
      'name'
    ])
  },
  created() {
  },
  mounted() {
    // this.calcLayoutWidth()
    this.connect()
  },
  beforeDestroy() {
    if (sseClient) {
      sseClient.disconnect()
    }
  },
  methods: {
    componentProps(index) {
      if (index === '3') {
        return { pageSize: 10 }
      }
      if (index === '4') {
        return { pageSize: 5 }
      }
      return {}
    },
    calcLayoutWidth() {
      document.getElementsByClassName('home-container')[0].style.width = document.getElementsByClassName('home-container')[0].offsetWidth + 'px'
    },
    connect() {
      sseClient = this.$sse.create({
        url: process.env.VUE_APP_BASE_API + '/subscribe/test1',
        format: 'json',
        withCredentials: true,
        polyfill: true
      })
      sseClient.on('error', (e) => {
        console.error('lost connection or failed to parse!', e)

      // If this error is due to an unexpected disconnection, EventSource will
      // automatically attempt to reconnect indefinitely. You will _not_ need to
      // re-add your handlers.
      })

      sseClient.on('message', this.handleMessage)

      sseClient.connect()
        .then(sse => {
          console.log('We\'re connected!')
        })
        .catch((err) => {
        // When this error is caught, it means the initial connection to the
        // events server failed.  No automatic attempts to reconnect will be made.
          console.error('Failed to connect to server', err)
        })
    },
    handleMessage(message) {
      console.log(message)
      this.$refs.Message[0].addNewMessage(message)
      this.$refs.Information.open()
    }

  }
}
</script>

<style lang="scss" scoped>
$msgCardHeaderHeight: 43px;

.home-container {
  .card-box {
    height: 100%;

    ::v-deep {
      .el-card {
        height: 100%;

        .el-card__header {
          padding: 10px 10px !important;
          height: $msgCardHeaderHeight;
          span{
            font-weight: bold;
          }
        }

        .el-card__body {
          height: calc(100% - #{$msgCardHeaderHeight});
          padding: 0 10px 10px 10px;
          &>* {
            height: 100%;
          }
        }

        .el-scrollbar__wrap{
          overflow-x: hidden;
        }
        .el-scrollbar__bar.is-horizontal {
          display: none;
        }
        .el-table__row .cell {
          padding-left: 0 !important;
        }
      }
    }
  }
}

.vue-grid-item:not(.vue-grid-placeholder) {
    background: #e0dede;
}

.vue-grid-item .resizing {
    opacity: 0.9;
}

.vue-grid-item .static {
    background: rgb(128, 128, 237);
}

.vue-grid-item .text {
    font-size: 24px;
    text-align: center;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    height: 100%;
    width: 100%;
}

.vue-grid-item .no-drag {
    height: 100%;
    width: 100%;
}

.vue-grid-item .minMax {
    font-size: 12px;
}

.vue-grid-item .add {
    cursor: pointer;
}

.vue-draggable-handle {
    position: absolute;
    width: 20px;
    height: 20px;
    top: 0;
    left: 0;
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10'><circle cx='5' cy='5' r='5' fill='#999999'/></svg>") no-repeat;
    background-position: bottom right;
    padding: 0 8px 8px 0;
    background-repeat: no-repeat;
    background-origin: content-box;
    box-sizing: border-box;
    cursor: pointer;
}
</style>