Blame view

src/components/VisualPortal/Layout/index.vue 3.24 KB
be009217   monkeyhouyi   处理,通知公告,任务中心
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
  <template>
    <el-scrollbar class="layout-area">
      <template v-if="layout.length">
        <grid-layout :layout.sync="layout" :row-height="40" :is-draggable="false"
          :is-resizable="false">
          <grid-item v-for="item in layout" :x="item.x" :y="item.y" :w="item.w" :h="item.h"
            :i="item.i" :key="item.i" static>
            <Todo v-if="item.nccKey==='todo'" :title="item.title" />
            <CommonFunc v-if="item.nccKey==='commonFunc'" :title="item.title" :list="item.list" />
            <TodoList v-if="item.nccKey==='todoList'" :title="item.title" />
            <HNotice v-if="item.nccKey==='notice'" :title="item.title" />
            <HEmail v-if="item.nccKey==='email'" :title="item.title" />
            <DataBoard v-if="item.nccKey==='dataBoard'" :title="item.title" :list="item.list" />
            <HBarChart v-if="item.nccKey==='barChart'" :title="item.title" :option="item.option"
              :dataType="item.dataType" :propsApi="item.propsApi" />
            <HAnnularChart v-if="item.nccKey==='annularChart'" :title="item.title"
              :option=" item.option" :dataType="item.dataType" :propsApi="item.propsApi" />
            <HAreaChart v-if="item.nccKey==='areaChart'" :title="item.title" :option="item.option"
              :dataType="item.dataType" :propsApi="item.propsApi" />
            <HLineChart v-if="item.nccKey==='lineChart'" :title="item.title" :option="item.option"
              :dataType="item.dataType" :propsApi="item.propsApi" />
            <HPieChart v-if="item.nccKey==='pieChart'" :title="item.title" :option="item.option"
              :dataType="item.dataType" :propsApi="item.propsApi" />
            <HRadarChart v-if="item.nccKey==='radarChart'" :title="item.title" :option="item.option"
              :dataType="item.dataType" :propsApi="item.propsApi" />
            <div class="mask" v-if="mask"></div>
          </grid-item>
        </grid-layout>
      </template>
      <div class="portal-layout-nodata" v-else>
        <img src="@/assets/images/dashboard-nodata.png" alt="" class="layout-nodata-img">
        <p class="layout-nodata-txt">暂无数据</p>
      </div>
    </el-scrollbar>
  </template>
  
  <script>
  import {
    Todo,
    CommonFunc,
    TodoList,
    HNotice,
    HEmail,
    DataBoard,
    HBarChart,
    HAnnularChart,
    HAreaChart,
    HLineChart,
    HPieChart,
    HRadarChart
  } from "@/components/VisualPortal"
  import VueGridLayout from 'vue-grid-layout'
  export default {
    props: {
      layout: { type: Array, default: () => [] },
      mask: { type: Boolean, default: false },
    },
    components: {
      GridLayout: VueGridLayout.GridLayout,
      GridItem: VueGridLayout.GridItem,
      Todo,
      CommonFunc,
      TodoList,
      HNotice,
      HEmail,
      DataBoard,
      HBarChart,
      HAnnularChart,
      HAreaChart,
      HLineChart,
      HPieChart,
      HRadarChart
    },
  }
  </script>
  <style lang="scss" scoped>
  .layout-area {
    height: 100%;
    overflow: hidden;
    >>> .el-scrollbar__wrap {
      margin-bottom: 0 !important;
      overflow-x: auto;
    }
    >>> .el-scrollbar__bar.is-horizontal > div {
      display: none;
    }
    >>> .el-card {
      width: 100%;
      height: 100%;
      .el-card__body {
        padding: 0;
      }
    }
    .vue-grid-item {
      position: relative;
      .mask {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 1;
      }
    }
  }
  </style>