尝试选择插入组件

src/components/MyComponent/MyCard/mode1.vue

@@ -33,7 +33,7 @@ export default defineComponent({
   .card-title
     display flex
     align-items center
-    padding 0 .1rem
+    padding .04rem .1rem
     background linear-gradient(to right, rgba(59,85,102,.8) 70%, transparent)
     position relative
     border-bottom .01rem solid #717F8C
@@ -54,6 +54,9 @@ export default defineComponent({
     position relative
     box-sizing border-box
     padding .05rem
+    display flex
+    flex-direction column
+    justify-content space-around
     >div
       $full()
 </style>

src/components/MyComponent/MyCard/my-card.vue

@@ -66,8 +66,6 @@ export default defineComponent({
 @import '../main.styl'
 .my-card
   $full()
-  width initial
-  height initial
   overflow hidden
   z-index 10
   :deep(.card-wrapper)

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

@@ -2,7 +2,7 @@
   <div class="my-progress">
     <div v-if="msg" class="msg">
       <p v-if="msg.name">{{ msg.name }}</p>
-      <p v-if="msg.value">
+      <p v-if="msg.value" :style="{ color: msg.color }">
         <MonitorCount :value="msg.value" />
         <span v-if="msg.unit">{{ msg.unit }}</span>
       </p>

src/hooks/useComponent.ts

+import { ref, computed } from 'vue'
+import list from '@/utils/component-list'
+
+export default function useComponent() {
+  const showComponentModal = ref(false) // 展示组件选择框
+  const curBox = ref<number | null>(null) // 当前容器下标
+  const components = ref<{ [key: number]: string }>({}) // {容器下标: 组件key}
+  const openComponentModal = (i: number) => {
+    // 点击容器中的新增按钮
+    curBox.value = i
+    showComponentModal.value = true
+  }
+  const onChangeComponent = (key: string) => {
+    // 选择组件后将key存入
+    if (curBox.value === null) return
+    components.value[curBox.value] = key
+  }
+  const componentList = computed(() => list) // key值-组件 对照表
+
+  return {
+    components,
+    componentList,
+    showComponentModal,
+    openComponentModal,
+    onChangeComponent,
+  }
+}

src/hooks/useLayout.ts

-export default function useLayout(key: string) {
+import { ref } from 'vue'
+
+export default function useLayout() {
+  const showLayoutModal = ref(false) // 展示布局选择弹窗
+  const layout = ref<{ template: string[]; rows: string; boxNum: number }>({
+    // 布局内容设置
+    template: [],
+    rows: '',
+    boxNum: 0,
+  })
+  const onChangeLayout = (key: string) => {
+    // 选择某一布局后获取布局内容
+    layout.value = getLayout(key)
+  }
+  return { showLayoutModal, layout, onChangeLayout }
+}
+
+function getLayout(key: string) {
   switch (key) {
     case '2-6-1':
       return {

src/utils/component-list.ts

+import Property from '@/view/components/property.vue' // 物业
+
+export default {
+  w1: Property,
+}

src/view/components/brief.vue

+<template>
+  <div class="brief-container" :class="{ vertical: align === 'vertical' }">
+    <div v-for="item in list" :key="item.name">
+      <img
+        v-if="item.icon"
+        :src="item.icon"
+        :style="`width:${size};height:${size}`"
+      />
+      <div v-if="Array.isArray(item.value)">
+        <div class="count-group">
+          <m-count
+            class="count orange-count"
+            :value="item.value[0]"
+            :style="{ color: color }"
+          />
+          /
+          <m-count class="count" :value="item.value[1]" />
+        </div>
+        <p>{{ item.name }}</p>
+      </div>
+      <div v-else :class="{ center: !item.icon }">
+        <m-count class="count" :style="{ color: color }" :value="item.value" />
+        <p>{{ item.name }}</p>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, PropType } from 'vue'
+
+export interface BriefProp {
+  name: string
+  value: number | number[]
+  icon?: any
+}
+export default defineComponent({
+  name: 'Brief',
+  props: {
+    list: {
+      type: Array as PropType<BriefProp[]>,
+      required: true,
+    },
+    color: {
+      type: String as PropType<string>,
+      default: null,
+    },
+    size: {
+      type: String as PropType<string>,
+      default: '0.22rem',
+    },
+    align: {
+      type: String as PropType<'vertical' | 'horizontal'>,
+      default: 'horizontal',
+    },
+  },
+})
+</script>
+
+<style lang="stylus" scoped>
+@import '../../components/MyComponent/main.styl'
+.brief-container
+  display flex
+  align-items center
+  white-space nowrap
+  .count
+    font-family $font-barlow
+    font-size .14rem
+  &.vertical
+    display inline-block
+  >div
+    display flex
+    align-items center
+    flex 1
+    margin-left .05rem
+    >img
+      margin-right .05rem
+    >div
+      font-weight bold
+      p
+        color #ccc
+      &.center
+        text-align center
+</style>

src/view/components/component-modal.vue

@@ -19,11 +19,15 @@
         </div>
       </div>
       <div class="list">
-        <template
-          v-if="componentList[curTab] && componentList[curTab].length > 0"
-        >
-          <div v-for="(component, i) in componentList[curTab]" :key="i">
-            <component :is="component" />
+        <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>
         <m-empty v-else text="暂无组件" />
@@ -33,8 +37,8 @@
 </template>
 
 <script lang="ts" setup>
-import { PropType, ref, watch } from 'vue'
-import Property from './property.vue'
+import { computed, PropType, ref, watch } from 'vue'
+import list from '@/utils/component-list'
 
 const props = defineProps({
   modelValue: {
@@ -57,17 +61,25 @@ watch(
 
 const curTab = ref('1')
 const tabs = [
-  { name: '物业', key: '1' },
-  { name: '市场', key: '2' },
-  { name: '修缮', key: '3' },
-  { name: '保障', key: '4' },
+  { name: '物业', key: '1', list: ['w1'] },
+  { name: '市场', key: '2', list: [] },
+  { name: '修缮', key: '3', list: [] },
+  { name: '保障', key: '4', list: [] },
 ]
-const componentList = {
-  '1': [Property],
+const componentKeys = computed(
+  () => tabs.find((e) => e.key === curTab.value)?.list || [],
+)
+const componentList = computed(() => list)
+const curComponent = ref('')
+const onSelect = (key: string) => {
+  if (curComponent.value === key) return
+  curComponent.value = key
+  emit('select', key)
 }
 </script>
 
 <style lang="stylus" scoped>
+@import '../../components/MyComponent/main.styl'
 .container
   height 100%
   display flex
@@ -77,6 +89,23 @@ const componentList = {
     overflow-x hidden
     overflow-y auto
     margin-top .1rem
+    .component
+      position relative
+      cursor pointer
+      border .01rem solid transparent
+      &:hover
+        border .01rem solid $primary-border
+      &.checked
+        &:before
+          z-index 9
+          position absolute
+          top .08rem
+          right .08rem
+          content ''
+          display inline-block
+          background url('/src/assets/images/checked.png') center/100% 100% no-repeat
+          width .12rem
+          height @width
   .tabs
     display flex
     background rgba(70,83,97,.5)

src/view/components/property.vue

 <template>
-  <m-card title="物业"> 123 </m-card>
+  <m-card title="物业">
+    <Brief :list="summary" />
+    <div class="wrapper">
+      <div class="left">
+        <m-progress
+          v-for="item in list"
+          :key="item.name"
+          :value="item.value"
+          :msg="{
+            name: item.name,
+            value: item.value,
+            unit: '%',
+            color: '#fff',
+          }"
+          :color="['rgb(36,59,86)', '#F4923E']"
+        />
+      </div>
+      <div class="right">
+        <p>整改执行</p>
+        <div>
+          <div>
+            <p class="count"><m-count :value="63" /></p>
+            <p>已开</p>
+          </div>
+          |
+          <div>
+            <p class="count"><m-count :value="76" />%</p>
+            <p>完成率</p>
+          </div>
+        </div>
+      </div>
+    </div>
+  </m-card>
 </template>
 
-<script lang="ts" setup></script>
+<script lang="ts" setup>
+import icon1 from '@/assets/images/icon1.png'
+import icon2 from '@/assets/images/icon2.png'
+import icon3 from '@/assets/images/icon3.png'
+import Brief from './brief.vue'
 
-<style lang="stylus" scoped></style>
+const summary = [
+  { icon: icon1, name: '小区', value: 904 },
+  { icon: icon2, name: '业委会', value: 400 },
+  { icon: icon3, name: '物业服务企业', value: 130 },
+]
+const list = [
+  { name: '房办月查', value: 79 },
+  { name: '物企双周查', value: 83 },
+  { name: '物业日查', value: 100 },
+]
+</script>
+
+<style lang="stylus" scoped>
+@import  '../../components/MyComponent/main.styl'
+
+.wrapper
+  display flex
+  padding-bottom .05rem
+  .left
+    flex 1.8
+  .right
+    flex 1
+    background rgba(70,83,97,.4)
+    border-radius .04rem
+    box-shadow 0 0.01rem .01rem 0 rgba(255,255,255,.2) inset
+    margin .06rem .06rem 0 .1rem
+    padding .06rem .1rem
+    box-sizing border-box
+    >div
+      display flex
+      align-items center
+      margin-top .1rem
+      >div
+        flex 1
+        text-align center
+        .count
+          font-size .12rem
+          color #EDB872
+          font-family $font-din
+          font-weight bold
+        >p
+          color #ccc
+</style>

src/view/main.vue

@@ -13,40 +13,37 @@
         class="box"
         :area="`box${index + 1}`"
       >
-        <component :is="componentList[index]" v-if="componentList[index]" />
+        <component
+          :is="componentList[components[index]]"
+          v-if="!!components[index]"
+        />
         <img
           v-else
           class="add-btn"
           src="@/assets/images/add.png"
-          @click.prevent.stop="onClick(index)"
+          @click.prevent.stop="openComponentModal(index)"
         />
       </div>
     </m-grid>
   </div>
   <LayoutModal v-model="showLayoutModal" @select="onChangeLayout" />
-  <ComponentModal v-model="showComponentModal" />
+  <ComponentModal v-model="showComponentModal" @select="onChangeComponent" />
 </template>
 
 <script lang="ts" setup>
-import { ref } from 'vue'
 import LayoutModal from './components/layout-modal.vue'
 import ComponentModal from './components/component-modal.vue'
 import useLayout from '@/hooks/useLayout'
+import useComponent from '@/hooks/useComponent'
 
-const showLayoutModal = ref(false)
-const layout = ref<{ template: string[]; rows: string; boxNum: number }>({
-  template: [],
-  rows: '',
-  boxNum: 0,
-})
-const onChangeLayout = (key: string) => {
-  layout.value = useLayout(key)
-}
-const componentList = []
-const showComponentModal = ref(false)
-const onClick = (i: number) => {
-  showComponentModal.value = true
-}
+const { showLayoutModal, layout, onChangeLayout } = useLayout()
+const {
+  components,
+  componentList,
+  showComponentModal,
+  openComponentModal,
+  onChangeComponent,
+} = useComponent()
 </script>
 
 <style lang="stylus" scoped>