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="true"
      :is-resizable="true"
      :is-mirrored="false"
      :vertical-compact="true"
      :margin="[10, 10]"
      :use-css-transforms="true"
    >
      <grid-item :key="layout[0].i" :x="layout[0].x" :y="layout[0].y" :w="layout[0].w" :h="layout[0].h" :i="layout[0].i">
        <el-row type="flex" justify="center" class="searh-row">
          <el-col :span="10"><el-input placeholder="请输入搜索内容" /></el-col>
          <el-col :span="2"><el-button type="primary" icon="el-icon-search">智搜</el-button></el-col>
        </el-row>
      </grid-item>
      <grid-item :key="layout[1].i" :x="layout[1].x" :y="layout[1].y" :w="layout[1].w" :h="layout[1].h" :i="layout[1].i">
        <el-card class="card-box">
          <div slot="header" class="clearfix">
            <span>消息提醒</span>
            <el-button style="float: right; padding: 3px 0" type="text">More<i class="el-icon-arrow-right" /></el-button>
          </div>
          <el-tabs class="message-content" value="todo">
            <el-tab-pane :label="'待办（'+ message.todo + '）'" name="todo">
              <div class="message-filter_box">
                <span>筛选条件：</span>
                <el-radio-group v-model="message.filter" size="mini">
                  <el-radio-button label="0">全部</el-radio-button>
                  <el-radio-button label="1">任务类</el-radio-button>
                  <el-radio-button label="2">通知类</el-radio-button>
                  <el-radio-button label="3">超期提醒类</el-radio-button>
                </el-radio-group>
              </div>
              <el-table :data="message.todoData" :show-header="false" size="mini" height="calc(100% - 30px)">
                <el-table-column width="40">
                  <template>
                    <el-avatar shape="square" size="small"><svg-icon icon-class="yujing" /></el-avatar>
                  </template>
                </el-table-column>
                <el-table-column show-overflow-tooltip>
                  <template slot-scope="scope">
                    <div>{{ scope.row.title }} <span :class="'priority-box priority-level'+ scope.row.priority">{{ scope.row.priorityName }}</span> </div>
                    <div>{{ scope.row.appName }}</div>
                  </template>
                </el-table-column>
                <el-table-column prop="createDate" width="140" />
                <el-table-column prop="createUser" width="70" show-overflow-tooltip />
                <el-table-column width="105">
                  <template>
                    <el-button size="mini">Mark Read</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </el-tab-pane>
            <el-tab-pane :label="'已办（'+ message.done + '）'" name="done">
              <div class="message-filter_box">
                <span>筛选条件：</span>
                <el-radio-group v-model="message.filter" size="mini">
                  <el-radio-button label="0">全部</el-radio-button>
                  <el-radio-button label="1">任务类</el-radio-button>
                  <el-radio-button label="2">通知类</el-radio-button>
                  <el-radio-button label="3">超期提醒类</el-radio-button>
                </el-radio-group>
              </div>
              <el-table :data="message.doneData" :show-header="false" size="mini" height="calc(100% - 30px)">
                <el-table-column width="40">
                  <template>
                    <el-avatar shape="square" size="small"><svg-icon icon-class="yujing" /></el-avatar>
                  </template>
                </el-table-column>
                <el-table-column show-overflow-tooltip>
                  <template slot-scope="scope">
                    <div>{{ scope.row.title }} <span :class="'priority-box priority-level'+ scope.row.priority">{{ scope.row.priorityName }}</span> </div>
                    <div>{{ scope.row.appName }}</div>
                  </template>
                </el-table-column>
                <el-table-column prop="createDate" width="140" />
                <el-table-column prop="createUser" width="70" show-overflow-tooltip />
                <el-table-column width="105">
                  <template>
                    <el-button size="mini">不再提醒</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </el-tab-pane>
          </el-tabs>
        </el-card>
      </grid-item>
      <grid-item :key="layout[2].i" :x="layout[2].x" :y="layout[2].y" :w="layout[2].w" :h="layout[2].h" :i="layout[2].i">
        <el-card class="card-box">
          <div slot="header" class="clearfix">
            <span>我的业务</span>
            <el-button style="float: right; padding: 3px 0" type="text">More<i class="el-icon-arrow-right" /></el-button>
          </div>
        </el-card>
      </grid-item>
      <grid-item :key="layout[3].i" :x="layout[3].x" :y="layout[3].y" :w="layout[3].w" :h="layout[3].h" :i="layout[3].i">
        <el-card class="card-box">
          <div slot="header" class="clearfix">
            <span>我的应用</span>
            <el-button style="float: right; padding: 3px 0" type="text">More<i class="el-icon-arrow-right" /></el-button>
          </div>
          <el-carousel height="150px">
            <el-carousel-item v-for="item in 4" :key="item">
              <h3 class="small">{{ item }}</h3>
            </el-carousel-item>
          </el-carousel>
        </el-card>
      </grid-item>
      <grid-item :key="layout[4].i" :x="layout[4].x" :y="layout[4].y" :w="layout[4].w" :h="layout[4].h" :i="layout[4].i">
        <el-card class="card-box">
          <div slot="header" class="clearfix">
            <span>专项工具</span>
            <el-button style="float: right; padding: 3px 0" type="text">More<i class="el-icon-arrow-right" /></el-button>
          </div>
          <div v-for="o in 4" :key="o" class="item">
            {{ '列表内容 ' + o }}
          </div>
        </el-card>
      </grid-item>
      <grid-item :key="layout[5].i" :x="layout[5].x" :y="layout[5].y" :w="layout[5].w" :h="layout[5].h" :i="layout[5].i">
        <el-card class="card-box">
          <div slot="header" class="clearfix">
            <span>标准规范</span>
            <el-button style="float: right; padding: 3px 0" type="text">More<i class="el-icon-arrow-right" /></el-button>
          </div>
          <div v-for="o in 4" :key="o" class="item">
            {{ '列表内容 ' + o }}
          </div>
        </el-card>
      </grid-item>
      <grid-item :key="layout[6].i" :x="layout[6].x" :y="layout[6].y" :w="layout[6].w" :h="layout[6].h" :i="layout[6].i">
        <el-card class="card-box">
          <div slot="header" class="clearfix">
            <span>外部应用导航</span>
            <el-button style="float: right; padding: 3px 0" type="text">More<i class="el-icon-arrow-right" /></el-button>
          </div>
          <div v-for="o in 4" :key="o" class="item">
            {{ '列表内容 ' + o }}
          </div>
        </el-card>
      </grid-item>
    </grid-layout>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import VueGridLayout from 'vue-grid-layout'

let sseClient

export default {
  name: 'Home',
  components: {
    GridLayout: VueGridLayout.GridLayout,
    GridItem: VueGridLayout.GridItem
  },
  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': 6, 'i': '4' },
        { 'x': 6, 'y': 16, 'w': 8, 'h': 6, 'i': '5' },
        { 'x': 0, 'y': 22, 'w': 14, 'h': 4, 'i': '6' }
      ],
      message: {
        todo: 10,
        done: 45,
        filter: '0',
        todoData: [
          { 'id': 1, 'type': '1', 'app': 'zfbapt', 'appName': 'XXXX System', 'priority': '1', 'priorityName': 'Emergency', 'title': 'message test 1', 'createDate': '2023-07-09 16:01:02', 'createUser': 'zhang san', 'status': '0' },
          { 'id': 2, 'type': '2', 'app': 'zfbapt', 'appName': 'XXXX System System', 'priority': '2', 'priorityName': 'Normal', 'title': 'message test 2message test 2', 'createDate': '2023-07-09 16:01:02', 'createUser': 'zhang san', 'status': '0' },
          { 'id': 2, 'type': '2', 'app': 'zfbapt', 'appName': 'XXXX System', 'priority': '2', 'priorityName': 'Normal', 'title': 'I am a message 3', 'createDate': '2023-07-09 16:01:02', 'createUser': 'zhang san', 'status': '0' },
          { 'id': 2, 'type': '2', 'app': 'zfbapt', 'appName': 'XXXX System', 'priority': '2', 'priorityName': 'Normal', 'title': 'I am a message 3', 'createDate': '2023-07-09 16:01:02', 'createUser': 'zhang san', 'status': '0' },
          { 'id': 2, 'type': '2', 'app': 'zfbapt', 'appName': 'XXXX System', 'priority': '2', 'priorityName': 'Normal', 'title': 'I am a message 3', 'createDate': '2023-07-09 16:01:02', 'createUser': 'zhang san', 'status': '0' },
          { 'id': 2, 'type': '2', 'app': 'zfbapt', 'appName': 'XXXX System', 'priority': '2', 'priorityName': 'Normal', 'title': 'I am a message 3', 'createDate': '2023-07-09 16:01:02', 'createUser': 'zhang san', 'status': '0' },
          { 'id': 2, 'type': '2', 'app': 'zfbapt', 'appName': 'XXXX System', 'priority': '2', 'priorityName': 'Normal', 'title': 'I am a message 3', 'createDate': '2023-07-09 16:01:02', 'createUser': 'zhang san', 'status': '0' },
          { 'id': 2, 'type': '2', 'app': 'zfbapt', 'appName': 'XXXXXXXXXXXX System', 'priority': '2', 'priorityName': 'Normal', 'title': 'I am a message too 4', 'createDate': '2023-07-09 16:01:02', 'createUser': 'zhang san', 'status': '0' }
        ],
        todoData2: [],
        doneData: []
      }

    }
  },
  computed: {
    ...mapGetters([
      'name'
    ])
  },
  mounted() {
    this.connect()
  },
  beforeDestroy() {
    if (sseClient) {
      sseClient.disconnect()
    }
  },
  methods: {
    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)
    }
  }
}
</script>

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

.searh-row {
  height: 100%;
  align-items: center;
  background-color: $gridBgColor;
}

.card-box {
  height: 100%;

  ::v-deep {
    .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%;
      }
    }
  }
}

.message-content  {
  .message-filter_box {
    height: 30px;
    &>span {
      display: inline-block;
      font-size: 14px;
    }
  }

  ::v-deep {
    .el-tabs__header {
      height: 40px;
    }
    .el-tabs__item {
      font-size: 18px !important;
    }
    .el-tabs__content {
      height: calc(100% - 55px);

      .el-tab-pane{
        height: 100%;
      }
    }
    .el-table .cell {
      padding-left: 0 !important;
    }
  }
}

.priority-box{
  display: inline-block;
  padding: 0 5px;
  color: #ffffff;
}
.priority-level1{
  background: #F85252;
}
.priority-level2{
  background: orange;
}
.priority-level3{
  background: yellow;
}
.priority-level4{
  background: blue;
}

.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>