筛选出现符合box的组件

src/components/MyComponent/MyProgress/my-progress.vue

@@ -3,7 +3,8 @@
     <div v-if="msg" class="msg">
       <p v-if="msg.name">{{ msg.name }}</p>
       <p v-if="msg.value" :style="{ color: msg.color }">
-        <MonitorCount :value="msg.value" />
+        <MonitorCount v-if="typeof msg.value === 'number'" :value="msg.value" />
+        <span v-else>{{ msg.value }}</span>
         <span v-if="msg.unit">{{ msg.unit }}</span>
       </p>
     </div>
@@ -34,6 +35,10 @@ export default defineComponent({
       type: [String, Array] as PropType<string | string[]>,
       default: () => ['#0094FF', '#1EFBFF'],
     },
+    backgroundColor: {
+      type: String as PropType<string>,
+      default: null,
+    },
     /** 进度百分值 */
     value: {
       type: Number as PropType<number>,
@@ -60,6 +65,9 @@ export default defineComponent({
       return { background: props.color }
     })
     const bgColor = computed(() => {
+      if (props.backgroundColor) {
+        return { background: props.backgroundColor, opacity: 1 }
+      }
       if (Array.isArray(props.color)) {
         return {
           background: props.color[0],
@@ -108,6 +116,7 @@ export default defineComponent({
       top 0
       &.inner
         transition width .5s ease-in-out
+        z-index 2
       &.bg
         opacity .3
 </style>

src/hooks/useComponent.ts

 import { ref } from 'vue'
 import componentList, { tabs } from '@/utils/component-list'
 import useConfig, { Config } from './useConfig'
+import take2rows from '@/utils/take2rows'
 
 export default function useComponent() {
   const showComponentModal = ref(false) // 展示组件选择框
   const curBox = ref<number | null>(null) // 当前容器下标
   const components = ref<Config['components']>({}) // {容器下标: 组件key}
+  const isTake2rows = ref<boolean>(false)
 
   const config = useConfig() // 获取组件选择配置
   if (config?.components) {
     components.value = config.components
   }
 
-  const openComponentModal = (i: number) => {
+  const openComponentModal = (i: number, template: string[]) => {
     // 点击容器中的新增按钮
     curBox.value = i
+    const name = `box${i + 1}`
+    isTake2rows.value = take2rows(template, name)
     showComponentModal.value = true
   }
   const onSelectComponent = (key: string) => {
@@ -35,5 +39,6 @@ export default function useComponent() {
     onSelectComponent,
     onCancelComponent,
     tabs,
+    isTake2rows,
   }
 }

src/utils/component-list.js

 // import * as vue from 'vue'
 // import fetchComponents from 'http://127.0.0.1:8081/component-lib.min.js'
-// const { A001, A002, A003, A004, A005, A006, A007, A008, A009 } =
-//   fetchComponents(vue)('http://127.0.0.1:8082')
+// const {
+//   A001,
+//   A002,
+//   A003,
+//   A004,
+//   A005,
+//   A006,
+//   A007,
+//   A008,
+//   A009,
+//   A010,
+//   A011,
+//   A012,
+//   A013,
+//   A014,
+// } = fetchComponents(vue)('http://127.0.0.1:8082')
 
 import {
   A001,
@@ -13,6 +27,11 @@ import {
   A007,
   A008,
   A009,
+  A010,
+  A011,
+  A012,
+  A013,
+  A014,
 } from './component-lib.esm' // 未正式上生产暂时先如此代替
 
 export default {
@@ -25,6 +44,11 @@ export default {
   A007,
   A008,
   A009,
+  A010,
+  A011,
+  A012,
+  A013,
+  A014,
 }
 
 export const tabs = {
@@ -39,7 +63,7 @@ export const tabs = {
     'A008',
     'A009',
   ],
-  市场: [],
-  修缮: [],
-  保障: [],
+  市场: ['A010', 'A011'],
+  修缮: ['A012', 'A013'],
+  保障: ['A014'],
 }

src/utils/take2rows.ts

+export default function take2rows(template: string[], name: string): boolean {
+  let count = 0,
+    curIndex: null | number = null
+
+  for (let index = 0; index < template.length; index++) {
+    const arr = template[index].split(' ')
+    const location = arr.indexOf(name)
+    if (location < 0) continue
+    if (count === 0) {
+      count += 1
+      curIndex = location
+    } else {
+      if (curIndex === location) {
+        count += 1
+      }
+    }
+  }
+
+  return count === 2
+}

src/view/components/component-modal.vue

@@ -9,7 +9,7 @@
     <div class="container">
       <div class="tabs">
         <div
-          v-for="tab in tabs"
+          v-for="tab in tabList"
           :key="tab.key"
           class="tab"
           :class="{ on: curTab === tab.key }"
@@ -20,15 +20,17 @@
       </div>
       <div class="list">
         <template v-if="componentKeys.length > 0">
-          <div
-            v-for="key in componentKeys"
-            :key="key"
-            class="component"
-            :class="{ checked: curComponent === key }"
-            @click.prevent.stop="onSelect(key)"
-          >
-            <component :is="componentList[key]" />
-          </div>
+          <template v-for="key in componentKeys">
+            <div
+              v-if="componentList[key].row == rows"
+              :key="key"
+              class="component"
+              :class="{ checked: curComponent === key }"
+              @click.prevent.stop="onSelect(key)"
+            >
+              <component :is="componentList[key]" />
+            </div>
+          </template>
         </template>
         <m-empty v-else text="暂无组件" />
       </div>
@@ -45,6 +47,10 @@ const props = defineProps({
     type: Boolean as PropType<boolean>,
     default: false,
   },
+  rows: {
+    type: Number as PropType<number>,
+    default: 1,
+  },
 })
 const emit = defineEmits(['update:modelValue', 'select'])
 const visible = ref(false)
@@ -63,7 +69,6 @@ watch(
   },
 )
 const { componentList, tabs } = useComponent()
-
 const curTab = ref('1')
 const tabList = [
   { name: '物业', key: '1', list: tabs['物业'] },

src/view/main.vue

@@ -28,7 +28,7 @@
           v-else
           class="add-btn"
           src="@/assets/images/add.png"
-          @click.prevent.stop="openComponentModal(index)"
+          @click.prevent.stop="openComponentModal(index, layout.template)"
         />
         <n-icon
           v-show="!!components[index]"
@@ -42,7 +42,11 @@
     </m-grid>
   </div>
   <LayoutModal v-model="showLayoutModal" @select="onChangeLayout" />
-  <ComponentModal v-model="showComponentModal" @select="onSelectComponent" />
+  <ComponentModal
+    v-model="showComponentModal"
+    :rows="isTake2rows ? 2 : 1"
+    @select="onSelectComponent"
+  />
 </template>
 
 <script lang="ts" setup>
@@ -61,6 +65,7 @@ const {
   openComponentModal,
   onCancelComponent,
   onSelectComponent,
+  isTake2rows,
 } = useComponent()
 const save = () => {
   const data = {