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
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
<template>
  <div class="item_panel_box">
    <el-input v-model="filterText" placeholder="输入关键字进行过滤" size="mini">
    </el-input>
    <div class="box_item">
      <item-panel v-loading="loading" class="item-panel">
        <template v-for="(item, index) in nodeItems">
          <item
            :key="index"
            :model="{
              // must have model property
              color: item.color || '#1890FF',
              label: item.id || '节点'
            }"
            :shape="item.shape || 'flow-rect'"
            :size="item.size || '72*43'"
            :type="item.type || 'node'"
          >
            <template v-if="item.src">
              <div class="item item-img">
                <img :alt="item.id" :src="item.src"/>
              </div>
            </template>
            <template v-else>
              <div :class="'item item-' + (item.shape || 'flow-rect')">
                <el-tooltip v-if="item.id.length > 9" :content="item.id" effect="light" placement="top">
                  <span class="spanValue">{{ item.id }}</span>
                </el-tooltip>
                <span v-else>{{ item.id }}</span>
              </div>
            </template>
          </item>
        </template>
      </item-panel>
    </div>
  </div>
</template>
 
<script>
import {Item, ItemPanel} from 'vue-flowchart-editor'
// import { getPage } from '../../../api/omd/status'
 
export default {
  name: 'EditorItemPanel',
  components: {ItemPanel, Item},
  props: {
    nodeItems: {
      type: Array,
      default: () => [],
    }
  },
  data() {
    return {
      filterText: '',
      loading: false,
    }
  },
  created() {
    this.loading = false
 
  },
  computed: {
    filterNode() {
      return this.nodeItems.filter(item => item.id.includes(this.filterText))
    }
  },
}
</script>
 
<style lang="scss" scoped>
.item-panel {
  width: 210px;
  height: 77vh;
  text-align: center;
  overflow-y: scroll;
  display: flex;
  flex-wrap: wrap; /* 允许换行 */
  justify-content: center; /* 居中对齐项目 */
  align-items: flex-start; /* 确保项目在容器顶部对齐 */
}
 
.item {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 12px;
  margin: 10px; /* 设定外边距以确保项目间有间隔 */
  user-select: none;
}
 
/* 项目类型的样式 */
.item-flow-rect {
  width: 75px;
  padding: 6px;
  box-sizing: border-box;
  border: 1px solid rgb(24, 144, 255);
  background-color: rgba(24, 144, 255, 0.2);
}
 
.item-flow-circle {
  width: 70px;
  height: 70px;
  border-radius: 60px;
  border: 1px solid rgb(250, 140, 22);
  background-color: rgba(250, 140, 22, 0.2);
}
 
.item-flow-rhombus {
  width: 70px;
  height: 70px;
  border: 1px solid rgb(19, 194, 194);
  background-color: rgba(19, 194, 194, 0.2);
  transform: rotate(45deg);
  margin: 25px auto;
 
  span {
    transform: rotate(-45deg);
  }
}
 
.item-img {
  max-width: 100px;
}
 
.spanValue {
  white-space: nowrap; // 防止换行
  overflow: hidden; //隐藏超出部分
  text-overflow: ellipsis; //显示省略号
}
</style>